@wordpress/compose 5.18.0 → 5.19.0

package/build-types/hooks/use-focus-outside/index.d.ts

@@ -1,72 +1,25 @@
 /**
- * @typedef {import('react').SyntheticEvent} SyntheticEvent
- */
-/**
- * @callback EventCallback
- * @param {SyntheticEvent} event input related event.
- */
-/**
- * @typedef FocusOutsideReactElement
- * @property {EventCallback} handleFocusOutside callback for a focus outside event.
- */
-/**
- * @typedef {import('react').MutableRefObject<FocusOutsideReactElement | undefined>} FocusOutsideRef
- */
-/**
- * @typedef {Object} FocusOutsideReturnValue
- * @property {EventCallback} onFocus      An event handler for focus events.
- * @property {EventCallback} onBlur       An event handler for blur events.
- * @property {EventCallback} onMouseDown  An event handler for mouse down events.
- * @property {EventCallback} onMouseUp    An event handler for mouse up events.
- * @property {EventCallback} onTouchStart An event handler for touch start events.
- * @property {EventCallback} onTouchEnd   An event handler for touch end events.
+ * External dependencies
  */
+import type { FocusEventHandler, MouseEventHandler, TouchEventHandler, FocusEvent } from 'react';
+declare type UseFocusOutsideReturn = {
+    onFocus: FocusEventHandler;
+    onMouseDown: MouseEventHandler;
+    onMouseUp: MouseEventHandler;
+    onTouchStart: TouchEventHandler;
+    onTouchEnd: TouchEventHandler;
+    onBlur: FocusEventHandler;
+};
 /**
  * A react hook that can be used to check whether focus has moved outside the
  * element the event handlers are bound to.
  *
- * @param {EventCallback} onFocusOutside A callback triggered when focus moves outside
- *                                       the element the event handlers are bound to.
+ * @param  onFocusOutside A callback triggered when focus moves outside
+ *                        the element the event handlers are bound to.
  *
- * @return {FocusOutsideReturnValue} An object containing event handlers. Bind the event handlers
- *                                   to a wrapping element element to capture when focus moves
- *                                   outside that element.
+ * @return An object containing event handlers. Bind the event handlers to a
+ * wrapping element element to capture when focus moves outside that element.
  */
-export default function useFocusOutside(onFocusOutside: EventCallback): FocusOutsideReturnValue;
-export type FocusNormalizedButton = HTMLButtonElement | HTMLLinkElement | HTMLInputElement;
-export type SyntheticEvent = import('react').SyntheticEvent;
-export type EventCallback = (event: SyntheticEvent) => any;
-export type FocusOutsideReactElement = {
-    /**
-     * callback for a focus outside event.
-     */
-    handleFocusOutside: EventCallback;
-};
-export type FocusOutsideRef = import('react').MutableRefObject<FocusOutsideReactElement | undefined>;
-export type FocusOutsideReturnValue = {
-    /**
-     * An event handler for focus events.
-     */
-    onFocus: EventCallback;
-    /**
-     * An event handler for blur events.
-     */
-    onBlur: EventCallback;
-    /**
-     * An event handler for mouse down events.
-     */
-    onMouseDown: EventCallback;
-    /**
-     * An event handler for mouse up events.
-     */
-    onMouseUp: EventCallback;
-    /**
-     * An event handler for touch start events.
-     */
-    onTouchStart: EventCallback;
-    /**
-     * An event handler for touch end events.
-     */
-    onTouchEnd: EventCallback;
-};
+export default function useFocusOutside(onFocusOutside: (event: FocusEvent) => void): UseFocusOutsideReturn;
+export {};
 //# sourceMappingURL=index.d.ts.map

package/build-types/hooks/use-focus-outside/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-focus-outside/index.js"],"names":[],"mappings":"AAgDA;;GAEG;AAEH;;;GAGG;AAEH;;;GAGG;AAEH;;GAEG;AAEH;;;;;;;;GAQG;AAEH;;;;;;;;;;GAUG;AACH,wDAPW,aAAa,GAGZ,uBAAuB,CAqGlC;oCA1KY,iBAAiB,GAAG,eAAe,GAAG,gBAAgB;6BAmCtD,OAAO,OAAO,EAAE,cAAc;oCAKhC,cAAc;;;;;wBAKX,aAAa;;8BAId,OAAO,OAAO,EAAE,gBAAgB,CAAC,wBAAwB,GAAG,SAAS,CAAC;;;;;aAKrE,aAAa;;;;YACb,aAAa;;;;iBACb,aAAa;;;;eACb,aAAa;;;;kBACb,aAAa;;;;gBACb,aAAa"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-focus-outside/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EACX,iBAAiB,EAEjB,iBAAiB,EACjB,iBAAiB,EACjB,UAAU,EAGV,MAAM,OAAO,CAAC;AAqDf,aAAK,qBAAqB,GAAG;IAC5B,OAAO,EAAE,iBAAiB,CAAC;IAC3B,WAAW,EAAE,iBAAiB,CAAC;IAC/B,SAAS,EAAE,iBAAiB,CAAC;IAC7B,YAAY,EAAE,iBAAiB,CAAC;IAChC,UAAU,EAAE,iBAAiB,CAAC;IAC9B,MAAM,EAAE,iBAAiB,CAAC;CAC1B,CAAC;AAEF;;;;;;;;;GASG;AACH,MAAM,CAAC,OAAO,UAAU,eAAe,CACtC,cAAc,EAAE,CAAE,KAAK,EAAE,UAAU,KAAM,IAAI,GAC3C,qBAAqB,CA4FvB"}

package/build-types/hooks/use-focusable-iframe/index.d.ts

@@ -1,8 +1,12 @@
+/**
+ * External dependencies
+ */
+import type { RefCallback } from 'react';
 /**
  * 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(): Object;
+export default function useFocusableIframe(): RefCallback<HTMLIFrameElement>;
 //# sourceMappingURL=index.d.ts.map

package/build-types/hooks/use-focusable-iframe/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-focusable-iframe/index.js"],"names":[],"mappings":"AAKA;;;;;GAKG;AACH,8CAFY,MAAM,CAwBjB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-focusable-iframe/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAOzC;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,kBAAkB,IAAI,WAAW,CAAE,iBAAiB,CAAE,CAsB7E"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/compose",
-	"version": "5.18.0",
+	"version": "5.19.0",
 	"description": "WordPress higher-order components (HOCs).",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -31,12 +31,12 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@types/mousetrap": "^1.6.8",
-		"@wordpress/deprecated": "^3.20.0",
-		"@wordpress/dom": "^3.20.0",
-		"@wordpress/element": "^4.18.0",
-		"@wordpress/is-shallow-equal": "^4.20.0",
-		"@wordpress/keycodes": "^3.20.0",
-		"@wordpress/priority-queue": "^2.20.0",
+		"@wordpress/deprecated": "^3.21.0",
+		"@wordpress/dom": "^3.21.0",
+		"@wordpress/element": "^4.19.0",
+		"@wordpress/is-shallow-equal": "^4.21.0",
+		"@wordpress/keycodes": "^3.21.0",
+		"@wordpress/priority-queue": "^2.21.0",
 		"change-case": "^4.1.2",
 		"clipboard": "^2.0.8",
 		"mousetrap": "^1.6.5",
@@ -48,5 +48,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "a2ff0e6471c88436dad0287beb88d1729aa6f5dd"
+	"gitHead": "511f4cc1f0138641bc4394bc1cf36e833109c791"
 }

package/src/hooks/use-dialog/index.ts

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { KeyboardEvent, RefCallback, SyntheticEvent } from 'react';
+import type { RefCallback, SyntheticEvent } from 'react';
 
 /**
  * WordPress dependencies
@@ -17,7 +17,6 @@ import useFocusOnMount from '../use-focus-on-mount';
 import useFocusReturn from '../use-focus-return';
 import useFocusOutside from '../use-focus-outside';
 import useMergeRefs from '../use-merge-refs';
-import type { FocusOutsideReturnValue } from '../use-focus-outside';
 
 type DialogOptions = {
 	focusOnMount?: Parameters< typeof useFocusOnMount >[ 0 ];
@@ -35,7 +34,7 @@ type DialogOptions = {
 
 type useDialogReturn = [
 	RefCallback< HTMLElement >,
-	FocusOutsideReturnValue & Pick< HTMLElement, 'tabIndex' >
+	ReturnType< typeof useFocusOutside > & Pick< HTMLElement, 'tabIndex' >
 ];
 
 /**
@@ -64,7 +63,7 @@ function useDialog( options: DialogOptions ): useDialogReturn {
 			currentOptions.current.onClose();
 		}
 	} );
-	const closeOnEscapeRef = useCallback( ( node ) => {
+	const closeOnEscapeRef = useCallback( ( node: HTMLElement ) => {
 		if ( ! node ) {
 			return;
 		}

package/src/hooks/use-focus-outside/{index.js → index.ts}

@@ -1,3 +1,16 @@
+/**
+ * External dependencies
+ */
+import type {
+	FocusEventHandler,
+	EventHandler,
+	MouseEventHandler,
+	TouchEventHandler,
+	FocusEvent,
+	MouseEvent,
+	TouchEvent,
+} from 'react';
+
 /**
  * WordPress dependencies
  */
@@ -6,28 +19,32 @@ import { useCallback, useEffect, useRef } from '@wordpress/element';
 /**
  * Input types which are classified as button types, for use in considering
  * whether element is a (focus-normalized) button.
- *
- * @type {string[]}
  */
 const INPUT_BUTTON_TYPES = [ 'button', 'submit' ];
 
 /**
- * @typedef {HTMLButtonElement | HTMLLinkElement | HTMLInputElement} FocusNormalizedButton
+ * List of HTML button elements subject to focus normalization
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
  */
+type FocusNormalizedButton =
+	| HTMLButtonElement
+	| HTMLLinkElement
+	| HTMLInputElement;
 
-// Disable reason: Rule doesn't support predicate return types.
-/* eslint-disable jsdoc/valid-types */
 /**
  * Returns true if the given element is a button element subject to focus
  * normalization, or false otherwise.
  *
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
  *
- * @param {EventTarget} eventTarget The target from a mouse or touch event.
+ * @param  eventTarget The target from a mouse or touch event.
  *
- * @return {eventTarget is FocusNormalizedButton} Whether element is a button.
+ * @return Whether the element is a button element subject to focus normalization.
  */
-function isFocusNormalizedButton( eventTarget ) {
+function isFocusNormalizedButton(
+	eventTarget: EventTarget
+): eventTarget is FocusNormalizedButton {
 	if ( ! ( eventTarget instanceof window.HTMLElement ) ) {
 		return false;
 	}
@@ -38,54 +55,35 @@ function isFocusNormalizedButton( eventTarget ) {
 
 		case 'INPUT':
 			return INPUT_BUTTON_TYPES.includes(
-				/** @type {HTMLInputElement} */ ( eventTarget ).type
+				( eventTarget as HTMLInputElement ).type
 			);
 	}
 
 	return false;
 }
-/* eslint-enable jsdoc/valid-types */
-
-/**
- * @typedef {import('react').SyntheticEvent} SyntheticEvent
- */
 
-/**
- * @callback EventCallback
- * @param {SyntheticEvent} event input related event.
- */
-
-/**
- * @typedef FocusOutsideReactElement
- * @property {EventCallback} handleFocusOutside callback for a focus outside event.
- */
-
-/**
- * @typedef {import('react').MutableRefObject<FocusOutsideReactElement | undefined>} FocusOutsideRef
- */
-
-/**
- * @typedef {Object} FocusOutsideReturnValue
- * @property {EventCallback} onFocus      An event handler for focus events.
- * @property {EventCallback} onBlur       An event handler for blur events.
- * @property {EventCallback} onMouseDown  An event handler for mouse down events.
- * @property {EventCallback} onMouseUp    An event handler for mouse up events.
- * @property {EventCallback} onTouchStart An event handler for touch start events.
- * @property {EventCallback} onTouchEnd   An event handler for touch end events.
- */
+type UseFocusOutsideReturn = {
+	onFocus: FocusEventHandler;
+	onMouseDown: MouseEventHandler;
+	onMouseUp: MouseEventHandler;
+	onTouchStart: TouchEventHandler;
+	onTouchEnd: TouchEventHandler;
+	onBlur: FocusEventHandler;
+};
 
 /**
  * A react hook that can be used to check whether focus has moved outside the
  * element the event handlers are bound to.
  *
- * @param {EventCallback} onFocusOutside A callback triggered when focus moves outside
- *                                       the element the event handlers are bound to.
+ * @param  onFocusOutside A callback triggered when focus moves outside
+ *                        the element the event handlers are bound to.
  *
- * @return {FocusOutsideReturnValue} An object containing event handlers. Bind the event handlers
- *                                   to a wrapping element element to capture when focus moves
- *                                   outside that element.
+ * @return An object containing event handlers. Bind the event handlers to a
+ * wrapping element element to capture when focus moves outside that element.
  */
-export default function useFocusOutside( onFocusOutside ) {
+export default function useFocusOutside(
+	onFocusOutside: ( event: FocusEvent ) => void
+): UseFocusOutsideReturn {
 	const currentOnFocusOutside = useRef( onFocusOutside );
 	useEffect( () => {
 		currentOnFocusOutside.current = onFocusOutside;
@@ -93,10 +91,7 @@ export default function useFocusOutside( onFocusOutside ) {
 
 	const preventBlurCheck = useRef( false );
 
-	/**
-	 * @type {import('react').MutableRefObject<number | undefined>}
-	 */
-	const blurCheckTimeoutId = useRef();
+	const blurCheckTimeoutId = useRef< number | undefined >();
 
 	/**
 	 * Cancel a blur check timeout.
@@ -124,20 +119,20 @@ export default function useFocusOutside( onFocusOutside ) {
 	 * button elements when clicked, while others do. The logic here
 	 * intends to normalize this as treating click on buttons as focus.
 	 *
+	 * @param  event
 	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
-	 *
-	 * @param {SyntheticEvent} event Event for mousedown or mouseup.
 	 */
-	const normalizeButtonFocus = useCallback( ( event ) => {
-		const { type, target } = event;
-		const isInteractionEnd = [ 'mouseup', 'touchend' ].includes( type );
-
-		if ( isInteractionEnd ) {
-			preventBlurCheck.current = false;
-		} else if ( isFocusNormalizedButton( target ) ) {
-			preventBlurCheck.current = true;
-		}
-	}, [] );
+	const normalizeButtonFocus: EventHandler< MouseEvent | TouchEvent > =
+		useCallback( ( event ) => {
+			const { type, target } = event;
+			const isInteractionEnd = [ 'mouseup', 'touchend' ].includes( type );
+
+			if ( isInteractionEnd ) {
+				preventBlurCheck.current = false;
+			} else if ( isFocusNormalizedButton( target ) ) {
+				preventBlurCheck.current = true;
+			}
+		}, [] );
 
 	/**
 	 * A callback triggered when a blur event occurs on the element the handler
@@ -145,10 +140,8 @@ export default function useFocusOutside( onFocusOutside ) {
 	 *
 	 * Calls the `onFocusOutside` callback in an immediate timeout if focus has
 	 * move outside the bound element and is still within the document.
-	 *
-	 * @param {SyntheticEvent} event Blur event.
 	 */
-	const queueBlurCheck = useCallback( ( event ) => {
+	const queueBlurCheck: FocusEventHandler = useCallback( ( event ) => {
 		// React does not allow using an event reference asynchronously
 		// due to recycling behavior, except when explicitly persisted.
 		event.persist();

package/src/hooks/use-focus-outside/test/index.js

@@ -4,120 +4,149 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-/**
- * WordPress dependencies
- */
-import { Component } from '@wordpress/element';
-
 /**
  * Internal dependencies
  */
 import useFocusOutside from '../';
 
-let onFocusOutside;
-
-describe( 'useFocusOutside', () => {
-	let origHasFocus;
-
-	const FocusOutsideComponent = ( { onFocusOutside: callback } ) => (
+const FocusOutsideComponent = ( { onFocusOutside: callback } ) => (
+	<div>
+		{ /* Wrapper */ }
 		<div { ...useFocusOutside( callback ) }>
 			<input type="text" />
-			<input type="button" />
+			<button>Button inside the wrapper</button>
+			<iframe title="test-iframe">
+				<button>Inside the iframe</button>
+			</iframe>
 		</div>
-	);
 
-	class TestComponent extends Component {
-		render() {
-			return <FocusOutsideComponent { ...this.props } />;
-		}
-	}
+		<button>Button outside the wrapper</button>
+	</div>
+);
 
-	beforeEach( () => {
-		// Mock document.hasFocus() to always be true for testing
-		// note: we overide this for some tests.
-		origHasFocus = document.hasFocus;
-		document.hasFocus = () => true;
-
-		onFocusOutside = jest.fn();
-	} );
-
-	afterEach( () => {
-		document.hasFocus = origHasFocus;
-	} );
-
-	it( 'should not call handler if focus shifts to element within component', () => {
-		render( <TestComponent onFocusOutside={ onFocusOutside } /> );
+describe( 'useFocusOutside', () => {
+	it( 'should not call handler if focus shifts to element within component', async () => {
+		const mockOnFocusOutside = jest.fn();
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
 
-		const input = screen.getByRole( 'textbox' );
-		const button = screen.getByRole( 'button' );
+		render(
+			<FocusOutsideComponent onFocusOutside={ mockOnFocusOutside } />
+		);
 
-		input.focus();
-		input.blur();
-		button.focus();
+		// Tab through the interactive elements inside the wrapper,
+		// causing multiple focus/blur events.
+		await user.tab();
+		expect( screen.getByRole( 'textbox' ) ).toHaveFocus();
 
-		jest.runAllTimers();
+		await user.tab();
+		expect(
+			screen.getByRole( 'button', { name: 'Button inside the wrapper' } )
+		).toHaveFocus();
 
-		expect( onFocusOutside ).not.toHaveBeenCalled();
+		expect( mockOnFocusOutside ).not.toHaveBeenCalled();
 	} );
 
 	it( 'should not call handler if focus transitions via click to button', async () => {
+		const mockOnFocusOutside = jest.fn();
 		const user = userEvent.setup( {
 			advanceTimers: jest.advanceTimersByTime,
 		} );
-		render( <TestComponent onFocusOutside={ onFocusOutside } /> );
-
-		const input = screen.getByRole( 'textbox' );
-		const button = screen.getByRole( 'button' );
 
-		input.focus();
-		await user.click( button );
+		render(
+			<FocusOutsideComponent onFocusOutside={ mockOnFocusOutside } />
+		);
 
-		jest.runAllTimers();
+		// Click the input and the button, causing multiple focus/blur events.
+		await user.click( screen.getByRole( 'textbox' ) );
+		await user.click(
+			screen.getByRole( 'button', { name: 'Button inside the wrapper' } )
+		);
 
-		expect( onFocusOutside ).not.toHaveBeenCalled();
+		expect( mockOnFocusOutside ).not.toHaveBeenCalled();
 	} );
 
-	it( 'should call handler if focus doesn’t shift to element within component', () => {
-		render( <TestComponent onFocusOutside={ onFocusOutside } /> );
+	it( 'should call handler if focus shifts to element outside component', async () => {
+		const mockOnFocusOutside = jest.fn();
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+
+		render(
+			<FocusOutsideComponent onFocusOutside={ mockOnFocusOutside } />
+		);
 
-		const input = screen.getByRole( 'textbox' );
-		input.focus();
-		input.blur();
+		// Click and focus button inside the wrapper
+		await user.click(
+			screen.getByRole( 'button', { name: 'Button inside the wrapper' } )
+		);
 
-		jest.runAllTimers();
+		expect( mockOnFocusOutside ).not.toHaveBeenCalled();
 
-		expect( onFocusOutside ).toHaveBeenCalled();
-	} );
+		// Click and focus button outside the wrapper
+		await user.click(
+			screen.getByRole( 'button', { name: 'Button outside the wrapper' } )
+		);
 
-	it( 'should not call handler if focus shifts outside the component when the document does not have focus', () => {
-		render( <TestComponent onFocusOutside={ onFocusOutside } /> );
+		expect( mockOnFocusOutside ).toHaveBeenCalled();
+	} );
 
+	it( 'should not call handler if focus shifts outside the component when the document does not have focus', async () => {
 		// Force document.hasFocus() to return false to simulate the window/document losing focus
 		// See https://developer.mozilla.org/en-US/docs/Web/API/Document/hasFocus.
-		document.hasFocus = () => false;
+		const mockedDocumentHasFocus = jest
+			.spyOn( document, 'hasFocus' )
+			.mockImplementation( () => false );
+		const mockOnFocusOutside = jest.fn();
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
 
-		const input = screen.getByRole( 'textbox' );
-		input.focus();
-		input.blur();
+		render(
+			<FocusOutsideComponent onFocusOutside={ mockOnFocusOutside } />
+		);
 
-		jest.runAllTimers();
+		// Click and focus button inside the wrapper, then click and focus
+		// a button outside the wrapper.
+		await user.click(
+			screen.getByRole( 'button', { name: 'Button inside the wrapper' } )
+		);
+		await user.click(
+			screen.getByRole( 'button', { name: 'Button outside the wrapper' } )
+		);
+
+		// The handler is not called thanks to the mocked return value of
+		// `document.hasFocus()`
+		expect( mockOnFocusOutside ).not.toHaveBeenCalled();
 
-		expect( onFocusOutside ).not.toHaveBeenCalled();
+		// Restore the `document.hasFocus()` function to its original implementation.
+		mockedDocumentHasFocus.mockRestore();
 	} );
 
-	it( 'should cancel check when unmounting while queued', () => {
-		const { rerender } = render(
-			<TestComponent onFocusOutside={ onFocusOutside } />
+	it( 'should cancel check when unmounting while queued', async () => {
+		const mockOnFocusOutside = jest.fn();
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+
+		const { unmount } = render(
+			<FocusOutsideComponent onFocusOutside={ mockOnFocusOutside } />
 		);
 
-		const input = screen.getByRole( 'textbox' );
-		input.focus();
-		input.blur();
+		// Click and focus button inside the wrapper.
+		const button = screen.getByRole( 'button', {
+			name: 'Button inside the wrapper',
+		} );
+		await user.click( button );
 
-		rerender( <div /> );
+		// Simulate a blur event and the wrapper unmounting while the blur event
+		// handler is queued
+		button.blur();
+		unmount();
 
 		jest.runAllTimers();
 
-		expect( onFocusOutside ).not.toHaveBeenCalled();
+		expect( mockOnFocusOutside ).not.toHaveBeenCalled();
 	} );
 } );

package/src/hooks/use-focusable-iframe/{index.js → 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();
 			}
 		}