From 87f416837211b48a237c625600889b527f9ab67c Mon Sep 17 00:00:00 2001 From: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com> Date: Tue, 18 May 2021 09:26:55 -0700 Subject: [PATCH 1/4] compose: Add types to `useFocusReturn` --- packages/compose/README.md | 4 ++-- .../src/hooks/use-focus-return/index.js | 18 +++++++++++------- packages/compose/tsconfig.json | 1 + 3 files changed, 14 insertions(+), 9 deletions(-) diff --git a/packages/compose/README.md b/packages/compose/README.md index 016560af43f14..5910005e3d3fc 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 d7c5975d0ee19..c16271405e4f3 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,7 +28,9 @@ import { useRef, useEffect, useCallback } from '@wordpress/element'; * ``` */ function useFocusReturn( onFocusReturn ) { + /** @type {import('react').MutableRefObject} */ const ref = useRef(); + /** @type {import('react').MutableRefObject} */ const focusedBeforeMount = useRef(); const onFocusReturnRef = useRef( onFocusReturn ); useEffect( () => { @@ -45,13 +47,15 @@ function useFocusReturn( onFocusReturn ) { return; } - focusedBeforeMount.current = node.ownerDocument.activeElement; + focusedBeforeMount.current = + /** @type {HTMLElement | null} */ ( node.ownerDocument + .activeElement ) || undefined; } else if ( focusedBeforeMount.current ) { - const isFocused = ref.current.contains( - ref.current.ownerDocument.activeElement + const isFocused = ref.current?.contains( + ref.current?.ownerDocument?.activeElement ?? null ); - if ( ref.current.isConnected && ! isFocused ) { + if ( ref.current?.isConnected && ! isFocused ) { return; } @@ -62,7 +66,7 @@ function useFocusReturn( onFocusReturn ) { if ( onFocusReturnRef.current ) { onFocusReturnRef.current(); } else { - focusedBeforeMount.current.focus(); + focusedBeforeMount.current?.focus(); } } }, [] ); diff --git a/packages/compose/tsconfig.json b/packages/compose/tsconfig.json index 460abe2c78339..37bf27615f65b 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/**/*" ] } From 487570fdbaf3cefb87c8df10c3623470d7ca618b Mon Sep 17 00:00:00 2001 From: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com> Date: Tue, 18 May 2021 09:30:15 -0700 Subject: [PATCH 2/4] Slightly improve types --- packages/compose/src/hooks/use-focus-return/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/compose/src/hooks/use-focus-return/index.js b/packages/compose/src/hooks/use-focus-return/index.js index c16271405e4f3..5cd155e7f17fe 100644 --- a/packages/compose/src/hooks/use-focus-return/index.js +++ b/packages/compose/src/hooks/use-focus-return/index.js @@ -28,7 +28,7 @@ import { useRef, useEffect, useCallback } from '@wordpress/element'; * ``` */ function useFocusReturn( onFocusReturn ) { - /** @type {import('react').MutableRefObject} */ + /** @type {import('react').MutableRefObject} */ const ref = useRef(); /** @type {import('react').MutableRefObject} */ const focusedBeforeMount = useRef(); @@ -52,7 +52,7 @@ function useFocusReturn( onFocusReturn ) { .activeElement ) || undefined; } else if ( focusedBeforeMount.current ) { const isFocused = ref.current?.contains( - ref.current?.ownerDocument?.activeElement ?? null + ref.current?.ownerDocument.activeElement ?? null ); if ( ref.current?.isConnected && ! isFocused ) { From 9c069b5ccf975b1ed7bdc7195a1ea065c4394cf3 Mon Sep 17 00:00:00 2001 From: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com> Date: Wed, 19 May 2021 11:03:12 -0700 Subject: [PATCH 3/4] Use null as default value --- .../compose/src/hooks/use-focus-return/index.js | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/packages/compose/src/hooks/use-focus-return/index.js b/packages/compose/src/hooks/use-focus-return/index.js index 5cd155e7f17fe..b29fd94813137 100644 --- a/packages/compose/src/hooks/use-focus-return/index.js +++ b/packages/compose/src/hooks/use-focus-return/index.js @@ -28,10 +28,10 @@ import { useRef, useEffect, useCallback } from '@wordpress/element'; * ``` */ function useFocusReturn( onFocusReturn ) { - /** @type {import('react').MutableRefObject} */ - const ref = useRef(); - /** @type {import('react').MutableRefObject} */ - 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,12 +47,10 @@ function useFocusReturn( onFocusReturn ) { return; } - focusedBeforeMount.current = - /** @type {HTMLElement | null} */ ( node.ownerDocument - .activeElement ) || undefined; + focusedBeforeMount.current = node.ownerDocument.activeElement; } else if ( focusedBeforeMount.current ) { const isFocused = ref.current?.contains( - ref.current?.ownerDocument.activeElement ?? null + ref.current?.ownerDocument.activeElement ); if ( ref.current?.isConnected && ! isFocused ) { @@ -66,7 +64,7 @@ function useFocusReturn( onFocusReturn ) { if ( onFocusReturnRef.current ) { onFocusReturnRef.current(); } else { - focusedBeforeMount.current?.focus(); + /** @type {HTMLElement} */ ( focusedBeforeMount.current )?.focus(); } } }, [] ); From a5307b546e548f1590e73d74c713f484bb91c065 Mon Sep 17 00:00:00 2001 From: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com> Date: Thu, 20 May 2021 07:58:11 -0700 Subject: [PATCH 4/4] Fix missing null type. Co-authored-by: Marco Ciampini --- packages/compose/src/hooks/use-focus-return/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/compose/src/hooks/use-focus-return/index.js b/packages/compose/src/hooks/use-focus-return/index.js index b29fd94813137..5f16a76167648 100644 --- a/packages/compose/src/hooks/use-focus-return/index.js +++ b/packages/compose/src/hooks/use-focus-return/index.js @@ -64,7 +64,7 @@ function useFocusReturn( onFocusReturn ) { if ( onFocusReturnRef.current ) { onFocusReturnRef.current(); } else { - /** @type {HTMLElement} */ ( focusedBeforeMount.current )?.focus(); + /** @type {null | HTMLElement} */ ( focusedBeforeMount.current )?.focus(); } } }, [] );