useFocusableIframe: Refactor to TypeScript (#45428)

* `useFocusableIframe`: Refactor to TypeScript * Update CHANGELOG.md * Add return type
WordPress · Nov 1, 2022 · 3e7a5e9 · 3e7a5e9
1 parent 5068af4
commit 3e7a5e9
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 5 deletions.
diff --git a/packages/components/src/focusable-iframe/index.js b/packages/components/src/focusable-iframe/index.js
@@ -9,7 +9,6 @@ import deprecated from '@wordpress/deprecated';
  * @param {import('react').Ref<HTMLIFrameElement>} props.iframeRef
  */
 export default function FocusableIframe( { iframeRef, ...props } ) {
-	// @ts-expect-error: Return type for useFocusableIframe() is incorrect.
 	const ref = useMergeRefs( [ iframeRef, useFocusableIframe() ] );
 	deprecated( 'wp.components.FocusableIframe', {
 		since: '5.9',

diff --git a/packages/compose/CHANGELOG.md b/packages/compose/CHANGELOG.md
@@ -6,6 +6,7 @@
 
 -   `useDisabled`: Refactor the component to rely on the HTML `inert` attribute ([#44865](https://github.com/WordPress/gutenberg/pull/44865)).
 -   `useFocusOutside`: Refactor the hook to TypeScript, rewrite tests using modern RTL and jest features ([#45317](https://github.com/WordPress/gutenberg/pull/45317)).
+-   `useFocusableIframe`: Refactor to TypeScript ([#45428](https://github.com/WordPress/gutenberg/pull/45428)).
 
 ## 5.18.0 (2022-10-19)
 

diff --git a/packages/compose/README.md b/packages/compose/README.md
@@ -326,7 +326,7 @@ Dispatches a bubbling focus event when the iframe receives focus. Use
 
 _Returns_
 
--   `Object`: Ref to pass to the iframe.
+-   `RefCallback< HTMLIFrameElement >`: Ref to pass to the iframe.
 
 ### useFocusOnMount
 

diff --git a/...e/src/hooks/use-focusable-iframe/index.js → ...e/src/hooks/use-focusable-iframe/index.ts b/...e/src/hooks/use-focusable-iframe/index.js → ...e/src/hooks/use-focusable-iframe/index.ts
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import type { RefCallback } from 'react';
+
 /**
  * Internal dependencies
  */
@@ -7,9 +12,9 @@ import useRefEffect from '../use-ref-effect';
  * Dispatches a bubbling focus event when the iframe receives focus. Use
  * `onFocus` as usual on the iframe or a parent element.
  *
- * @return {Object} Ref to pass to the iframe.
+ * @return Ref to pass to the iframe.
  */
-export default function useFocusableIframe() {
+export default function useFocusableIframe(): RefCallback< HTMLIFrameElement > {
 	return useRefEffect( ( element ) => {
 		const { ownerDocument } = element;
 		if ( ! ownerDocument ) return;
@@ -22,7 +27,7 @@ export default function useFocusableIframe() {
 		 */
 		function checkFocus() {
 			if ( ownerDocument && ownerDocument.activeElement === element ) {
-				/** @type {HTMLElement} */ ( element ).focus();
+				( element as HTMLElement ).focus();
 			}
 		}