From 96f94df84a377454200968a69c4fa046cd3de52e Mon Sep 17 00:00:00 2001 From: Nikita Gorin <36075690+NikitaCG@users.noreply.github.com> Date: Thu, 2 Nov 2023 14:34:37 +0300 Subject: [PATCH] refactor: relocate useFocusWithin hook (#1084) --- src/components/Select/Select.tsx | 3 +-- src/components/index.ts | 2 +- src/components/utils/interactions/index.ts | 1 - src/hooks/index.ts | 1 + src/hooks/useFocusWithin/README.md | 24 +++++++++++++++++++ .../useFocusWithin}/SyntheticFocusEvent.ts | 0 src/hooks/useFocusWithin/index.ts | 2 ++ .../useFocusWithin}/useFocusWithin.test.tsx | 0 .../useFocusWithin}/useFocusWithin.ts | 11 ++++++++- .../useFocusWithin}/useSyntheticBlurEvent.tsx | 0 10 files changed, 39 insertions(+), 5 deletions(-) delete mode 100644 src/components/utils/interactions/index.ts create mode 100644 src/hooks/useFocusWithin/README.md rename src/{components/utils/interactions => hooks/useFocusWithin}/SyntheticFocusEvent.ts (100%) create mode 100644 src/hooks/useFocusWithin/index.ts rename src/{components/utils/interactions => hooks/useFocusWithin}/useFocusWithin.test.tsx (100%) rename src/{components/utils/interactions => hooks/useFocusWithin}/useFocusWithin.ts (94%) rename src/{components/utils/interactions => hooks/useFocusWithin}/useSyntheticBlurEvent.tsx (100%) diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx index ca4d62063e..c098f9fd4e 100644 --- a/src/components/Select/Select.tsx +++ b/src/components/Select/Select.tsx @@ -1,11 +1,10 @@ import React from 'react'; import {KeyCode} from '../../constants'; -import {useForkRef, useSelect, useUniqId} from '../../hooks'; +import {useFocusWithin, useForkRef, useSelect, useUniqId} from '../../hooks'; import type {List} from '../List'; import {useMobile} from '../mobile'; import type {CnMods} from '../utils/cn'; -import {useFocusWithin} from '../utils/interactions'; import {EmptyOptions, SelectControl, SelectFilter, SelectList, SelectPopup} from './components'; import {DEFAULT_VIRTUALIZATION_THRESHOLD, selectBlock} from './constants'; diff --git a/src/components/index.ts b/src/components/index.ts index 74083f4971..b8a55dee90 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -53,7 +53,7 @@ export {getComponentName} from './utils/getComponentName'; export * from './utils/withEventBrokerDomHandlers'; export * from './utils/layer-manager'; export {Lang, configure} from './utils/configure'; +/** @deprecated, drop on next major */ export {useOnFocusOutside} from './utils/useOnFocusOutside'; -export * from './utils/interactions'; export * from './utils/xpath'; export {getUniqId} from './utils/common'; diff --git a/src/components/utils/interactions/index.ts b/src/components/utils/interactions/index.ts deleted file mode 100644 index aa59b83ac2..0000000000 --- a/src/components/utils/interactions/index.ts +++ /dev/null @@ -1 +0,0 @@ -export {useFocusWithin} from './useFocusWithin'; diff --git a/src/hooks/index.ts b/src/hooks/index.ts index 0c7a7974ef..9cd1ead75d 100644 --- a/src/hooks/index.ts +++ b/src/hooks/index.ts @@ -1,6 +1,7 @@ export * from './useActionHandlers'; export * from './useBodyScrollLock'; export * from './useFileInput'; +export * from './useFocusWithin'; export * from './useForkRef'; export * from './useIntersection'; export * from './useListNavigation'; diff --git a/src/hooks/useFocusWithin/README.md b/src/hooks/useFocusWithin/README.md new file mode 100644 index 0000000000..e929bc4f2d --- /dev/null +++ b/src/hooks/useFocusWithin/README.md @@ -0,0 +1,24 @@ + + +# useFocusWithin + + + +```tsx +import {useFocusWithin} from '@gravity-ui/uikit'; +``` + +The `useFocusWithin` hook that handles focus events for the target and its descendants + +## Properties + +| Name | Description | Type | Default | +| :------------------ | :---------------------------------------------------------------------------- | :--------------------------------: | :-----: | +| isDisabled | Whether the focus within events should be disabled | `boolean` | | +| onFocusWithin | Handler that is called when the target element or a descendant receives focus | `(e: React.FocusEvent) => void` | | +| onBlurWithin | Handler that is called when the target element and all descendants lose focus | `(e: React.FocusEvent) => void` | | +| onFocusWithinChange | Handler that is called when the the focus within state changes | `(isFocusWithin: boolean) => void` | | + +## Result + +`onFocus` and `onBlur` handlers. `{focusWithinProps: {onFocus, onBlur}}` diff --git a/src/components/utils/interactions/SyntheticFocusEvent.ts b/src/hooks/useFocusWithin/SyntheticFocusEvent.ts similarity index 100% rename from src/components/utils/interactions/SyntheticFocusEvent.ts rename to src/hooks/useFocusWithin/SyntheticFocusEvent.ts diff --git a/src/hooks/useFocusWithin/index.ts b/src/hooks/useFocusWithin/index.ts new file mode 100644 index 0000000000..fe39fe5443 --- /dev/null +++ b/src/hooks/useFocusWithin/index.ts @@ -0,0 +1,2 @@ +export {useFocusWithin} from './useFocusWithin'; +export type {UseFocusWithinProps, FocusWithinProps, UseFocusWithinResult} from './useFocusWithin'; diff --git a/src/components/utils/interactions/useFocusWithin.test.tsx b/src/hooks/useFocusWithin/useFocusWithin.test.tsx similarity index 100% rename from src/components/utils/interactions/useFocusWithin.test.tsx rename to src/hooks/useFocusWithin/useFocusWithin.test.tsx diff --git a/src/components/utils/interactions/useFocusWithin.ts b/src/hooks/useFocusWithin/useFocusWithin.ts similarity index 94% rename from src/components/utils/interactions/useFocusWithin.ts rename to src/hooks/useFocusWithin/useFocusWithin.ts index d15187b2b7..46e2185d02 100644 --- a/src/components/utils/interactions/useFocusWithin.ts +++ b/src/hooks/useFocusWithin/useFocusWithin.ts @@ -14,6 +14,15 @@ export interface FocusWithinProps { onFocusWithinChange?: (isFocusWithin: boolean) => void; } +export interface UseFocusWithinProps extends FocusWithinProps {} + +export interface UseFocusWithinResult { + focusWithinProps: { + onFocus?: (event: React.FocusEvent) => void; + onBlur?: (event: React.FocusEvent) => void; + }; +} + /** * Callback on focus outside event. * @@ -59,7 +68,7 @@ export interface FocusWithinProps { * } * } */ -export function useFocusWithin(props: FocusWithinProps) { +export function useFocusWithin(props: UseFocusWithinProps) { const {onFocusWithin, onBlurWithin, onFocusWithinChange, isDisabled} = props; const isFocusWithinRef = React.useRef(false); diff --git a/src/components/utils/interactions/useSyntheticBlurEvent.tsx b/src/hooks/useFocusWithin/useSyntheticBlurEvent.tsx similarity index 100% rename from src/components/utils/interactions/useSyntheticBlurEvent.tsx rename to src/hooks/useFocusWithin/useSyntheticBlurEvent.tsx