diff --git a/packages/compose/README.md b/packages/compose/README.md index 016560af43f142..5910005e3d3fc6 100644 --- a/packages/compose/README.md +++ b/packages/compose/README.md @@ -255,11 +255,11 @@ const WithFocusReturn = () => { _Parameters_ -- _onFocusReturn_ `Function?`: Overrides the default return behavior. +- _onFocusReturn_ `[() => void]`: Overrides the default return behavior. _Returns_ -- `Function`: Element Ref. +- `import('react').RefCallback`: Element Ref. # **useInstanceId** diff --git a/packages/compose/src/hooks/use-focus-return/index.js b/packages/compose/src/hooks/use-focus-return/index.js index d7c5975d0ee192..5f16a76167648f 100644 --- a/packages/compose/src/hooks/use-focus-return/index.js +++ b/packages/compose/src/hooks/use-focus-return/index.js @@ -9,8 +9,8 @@ import { useRef, useEffect, useCallback } from '@wordpress/element'; * previously focused element when closed. * The current hook implements the returning behavior. * - * @param {Function?} onFocusReturn Overrides the default return behavior. - * @return {Function} Element Ref. + * @param {() => void} [onFocusReturn] Overrides the default return behavior. + * @return {import('react').RefCallback} Element Ref. * * @example * ```js @@ -28,8 +28,10 @@ import { useRef, useEffect, useCallback } from '@wordpress/element'; * ``` */ function useFocusReturn( onFocusReturn ) { - const ref = useRef(); - const focusedBeforeMount = useRef(); + /** @type {import('react').MutableRefObject} */ + const ref = useRef( null ); + /** @type {import('react').MutableRefObject} */ + const focusedBeforeMount = useRef( null ); const onFocusReturnRef = useRef( onFocusReturn ); useEffect( () => { onFocusReturnRef.current = onFocusReturn; @@ -47,11 +49,11 @@ function useFocusReturn( onFocusReturn ) { focusedBeforeMount.current = node.ownerDocument.activeElement; } else if ( focusedBeforeMount.current ) { - const isFocused = ref.current.contains( - ref.current.ownerDocument.activeElement + const isFocused = ref.current?.contains( + ref.current?.ownerDocument.activeElement ); - if ( ref.current.isConnected && ! isFocused ) { + if ( ref.current?.isConnected && ! isFocused ) { return; } @@ -62,7 +64,7 @@ function useFocusReturn( onFocusReturn ) { if ( onFocusReturnRef.current ) { onFocusReturnRef.current(); } else { - focusedBeforeMount.current.focus(); + /** @type {null | HTMLElement} */ ( focusedBeforeMount.current )?.focus(); } } }, [] ); diff --git a/packages/compose/tsconfig.json b/packages/compose/tsconfig.json index 460abe2c783394..37bf27615f65bc 100644 --- a/packages/compose/tsconfig.json +++ b/packages/compose/tsconfig.json @@ -17,6 +17,7 @@ "src/hooks/use-async-list/**/*", "src/hooks/use-constrained-tabbing/**/*", "src/hooks/use-instance-id/**/*", + "src/hooks/use-focus-return/**/*", "src/utils/**/*" ] }