compose: Add types to useFocusReturn (#31949)

* compose: Add types to `useFocusReturn`

* Slightly improve types

* Use null as default value

* Fix missing null type.

Co-authored-by: Marco Ciampini <[email protected]>

Co-authored-by: Marco Ciampini <[email protected]>

Author: sarayourfriend

packages/compose/README.md

@@ -261,11 +261,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<HTMLElement>`: Element Ref.
 
 <a name="useInstanceId" href="#useInstanceId">#</a> **useInstanceId**
 

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<HTMLElement>} 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<null | HTMLElement>} */
+	const ref = useRef( null );
+	/** @type {import('react').MutableRefObject<null | Element>} */
+	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();
 			}
 		}
 	}, [] );

packages/compose/tsconfig.json

@@ -18,6 +18,7 @@
 		"src/hooks/use-constrained-tabbing/**/*",
 		"src/hooks/use-debounce/**/*",
 		"src/hooks/use-instance-id/**/*",
+		"src/hooks/use-focus-return/**/*",
 		"src/utils/**/*"
 	]
 }