refactor: relocate useFocusWithin hook (#1084)

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';

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';

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';

src/hooks/useFocusWithin/README.md

@@ -0,0 +1,24 @@
+<!--GITHUB_BLOCK-->
+
+# useFocusWithin
+
+<!--/GITHUB_BLOCK-->
+
+```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}}`

src/hooks/useFocusWithin/index.ts

@@ -0,0 +1,2 @@
+export {useFocusWithin} from './useFocusWithin';
+export type {UseFocusWithinProps, FocusWithinProps, UseFocusWithinResult} from './useFocusWithin';

src/components/utils/interactions/useFocusWithin.ts → 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<Element, Element>) => void;
+        onBlur?: (event: React.FocusEvent<Element, Element>) => 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);