refactor: move hooks under own directory (#1042)

CODEOWNERS

@@ -47,7 +47,11 @@
 /src/components/Tooltip @amje
 /src/components/theme @resure
 
+/src/hooks/useActionHandlers @ogonkov
+/src/hooks/useFileInput @korvin89
+/src/hooks/useForkRef @ValeraS
 /src/hooks/useOutsideClick @NikitaCG
+/src/hooks/useUniqId @ValeraS
 
 # Allow everyone to update dependencies
 /package.json

src/components/Card/Card.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
+import {useActionHandlers} from '../../hooks';
 import type {QAProps} from '../types';
 import {block} from '../utils/cn';
-import {useActionHandlers} from '../utils/useActionHandlers';
 
 import './Card.scss';
 

src/components/Disclosure/DisclosureContext.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {useUniqId} from '../utils/useUniqId';
+import {useUniqId} from '../../hooks';
 
 import type {DisclosureProps} from './Disclosure';
 

src/components/List/constants.ts

@@ -1,4 +1,4 @@
-import {KeyCode} from '../constants';
+import {KeyCode} from '../../constants';
 
 export const ListQa = {
     ACTIVE_ITEM: 'list-active-item',

src/components/Menu/MenuGroup.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
+import {useUniqId} from '../../hooks';
 import type {DOMProps, QAProps} from '../types';
 import {block} from '../utils/cn';
-import {useUniqId} from '../utils/useUniqId';
 
 const b = block('menu');
 

src/components/Menu/MenuItem.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
+import {useActionHandlers} from '../../hooks';
 import type {DOMProps, QAProps} from '../types';
 import {block} from '../utils/cn';
 import {eventBroker} from '../utils/event-broker';
-import {useActionHandlers} from '../utils/useActionHandlers';
 
 const b = block('menu');
 

src/components/Pagination/components/PaginationInput/PaginationInput.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {KeyCode} from '../../../constants';
+import {KeyCode} from '../../../../constants';
 import {TextInput, TextInputProps} from '../../../controls';
 import {blockNew} from '../../../utils/cn';
 import i18n from '../../i18n';

src/components/Popover/components/Trigger/Trigger.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {useActionHandlers} from '../../../utils/useActionHandlers';
+import {useActionHandlers} from '../../../../hooks';
 
 interface TriggerArgs {
     onClick: React.MouseEventHandler;

src/components/Popup/Popup.tsx

@@ -2,12 +2,12 @@ import React from 'react';
 
 import {CSSTransition} from 'react-transition-group';
 
+import {useForkRef} from '../../hooks';
 import {Portal} from '../Portal';
 import type {DOMProps, QAProps} from '../types';
 import {FocusTrap, useParentFocusTrap} from '../utils/FocusTrap';
 import {block} from '../utils/cn';
 import {getCSSTransitionClassNames} from '../utils/transition';
-import {useForkRef} from '../utils/useForkRef';
 import {useLayer} from '../utils/useLayer';
 import type {LayerExtendableProps} from '../utils/useLayer';
 import {usePopper} from '../utils/usePopper';

src/components/Select/Select.tsx

@@ -1,13 +1,12 @@
 import React from 'react';
 
+import {KeyCode} from '../../constants';
+import {useForkRef, useUniqId} from '../../hooks';
 import type {List} from '../List';
-import {KeyCode} from '../constants';
 import {useMobile} from '../mobile';
 import type {CnMods} from '../utils/cn';
 import {useFocusWithin} from '../utils/interactions';
-import {useForkRef} from '../utils/useForkRef';
 import {useSelect} from '../utils/useSelect';
-import {useUniqId} from '../utils/useUniqId';
 
 import {EmptyOptions, SelectControl, SelectFilter, SelectList, SelectPopup} from './components';
 import {DEFAULT_VIRTUALIZATION_THRESHOLD, selectBlock} from './constants';

src/components/Select/utils.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
+import {KeyCode} from '../../constants';
 import type {List, ListItemData} from '../List';
-import {KeyCode} from '../constants';
 
 import {GROUP_ITEM_MARGIN_TOP, MOBILE_ITEM_HEIGHT, SIZE_TO_ITEM_HEIGHT} from './constants';
 import type {Option, OptionGroup} from './tech-components';

src/components/Toc/TocItem/TocItem.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
+import {useActionHandlers} from '../../../hooks';
 import {blockNew} from '../../utils/cn';
-import {useActionHandlers} from '../../utils/useActionHandlers';
 import type {TocItem as TocItemType} from '../types';
 
 import './TocItem.scss';

src/components/Tooltip/Tooltip.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 
+import {KeyCode} from '../../constants';
+import {useForkRef} from '../../hooks';
 import {Popup} from '../Popup';
 import type {PopupPlacement} from '../Popup';
-import {KeyCode} from '../constants';
 import type {DOMProps} from '../types';
 import {block} from '../utils/cn';
 import {useBoolean} from '../utils/useBoolean';
-import {useForkRef} from '../utils/useForkRef';
 
 import './Tooltip.scss';
 

src/components/controls/TextArea/TextArea.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 
+import {useForkRef, useUniqId} from '../../../hooks';
 import {blockNew} from '../../utils/cn';
-import {useForkRef} from '../../utils/useForkRef';
-import {useUniqId} from '../../utils/useUniqId';
 import {ClearButton, mapTextInputSizeToButtonSize} from '../common';
 import {OuterAdditionalContent} from '../common/OuterAdditionalContent/OuterAdditionalContent';
 import type {

src/components/controls/TextArea/TextAreaControl.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
+import {useForkRef} from '../../../hooks';
 import {blockNew} from '../../utils/cn';
-import {useForkRef} from '../../utils/useForkRef';
 
 import type {TextAreaProps} from './TextArea';
 

src/components/controls/TextInput/TextInput.tsx

@@ -2,12 +2,11 @@ import React from 'react';
 
 import {TriangleExclamation} from '@gravity-ui/icons';
 
+import {useForkRef, useUniqId} from '../../../hooks';
 import {Icon} from '../../Icon';
 import {Popover} from '../../Popover';
 import {block} from '../../utils/cn';
 import {useElementSize} from '../../utils/useElementSize';
-import {useForkRef} from '../../utils/useForkRef';
-import {useUniqId} from '../../utils/useUniqId';
 import {ClearButton, mapTextInputSizeToButtonSize} from '../common';
 import {OuterAdditionalContent} from '../common/OuterAdditionalContent/OuterAdditionalContent';
 import type {

src/components/index.ts

@@ -56,12 +56,7 @@ export * from './utils/useLayer';
 export {Lang, configure} from './utils/configure';
 export * from './utils/useSelect';
 export * from './utils/useListNavigation';
-export * from './utils/useForkRef';
-export * from './utils/setRef';
 export {useOnFocusOutside} from './utils/useOnFocusOutside';
 export * from './utils/interactions';
 export * from './utils/xpath';
-export * from './utils/useFileInput/useFileInput';
-export {useActionHandlers} from './utils/useActionHandlers';
-export {useUniqId} from './utils/useUniqId';
 export {getLayersCount} from './utils/LayerManager';

src/components/utils/FocusTrap.tsx

@@ -3,8 +3,7 @@ import React from 'react';
 import {createFocusTrap} from 'focus-trap';
 import type {FocusTrap as FocusTrapInstance} from 'focus-trap';
 
-import {useForkRef} from './useForkRef';
-import {useUniqId} from './useUniqId';
+import {useForkRef, useUniqId} from '../../hooks';
 
 interface FocusTrapContext {
     addNode: (id: string, node: HTMLElement) => void;

src/components/utils/LayerManager.ts

@@ -1,6 +1,6 @@
 import type {VirtualElement} from '@popperjs/core';
 
-import {KeyCode} from '../constants';
+import {KeyCode} from '../../constants';
 
 import {eventBroker} from './event-broker';
 

src/components/utils/useCheckbox.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 
+import {useForkRef} from '../../hooks';
 import type {ControlProps} from '../types';
 
 import {eventBroker} from './event-broker';
-import {useForkRef} from './useForkRef';
 
 export function useCheckbox({
     name,

src/components/utils/useRadio.ts

@@ -1,10 +1,9 @@
 import React from 'react';
 
+import {useForkRef, useUniqId} from '../../hooks';
 import type {ControlProps} from '../types';
 
 import {eventBroker} from './event-broker';
-import {useForkRef} from './useForkRef';
-import {useUniqId} from './useUniqId';
 
 export function useRadio({
     name,

src/components/utils/useRadioGroup.ts

@@ -1,9 +1,8 @@
 import React from 'react';
 
+import {useUniqId} from '../../hooks';
 import type {ControlGroupProps} from '../types';
 
-import {useUniqId} from './useUniqId';
-
 export function useRadioGroup(props: ControlGroupProps) {
     const {
         name,

src/hooks/index.ts

@@ -1,4 +1,8 @@
+export * from './useActionHandlers';
 export * from './useBodyScrollLock';
+export * from './useFileInput';
+export * from './useForkRef';
 export * from './useOutsideClick';
 export * from './usePortalContainer';
 export * from './useVirtualElementRef';
+export * from './useUniqId';

src/hooks/useActionHandlers/README.md

@@ -0,0 +1,21 @@
+<!--GITHUB_BLOCK-->
+
+# useActionHandlers
+
+<!--/GITHUB_BLOCK-->
+
+```tsx
+import {useActionHandlers} from '@gravity-ui/uikit';
+```
+
+The `useActionHandlers` hook emulates behaviour of system controls, that respond to Enter and Spacebar
+
+## Properties
+
+| Name     | Description                |            Type            | Default |
+| :------- | :------------------------- | :------------------------: | :-----: |
+| callback | Callback for keydown event | `(...args: any[]) => any;` |         |
+
+## Result
+
+Keyboard event handler. `React.KeyboardEventHandler`

src/hooks/useActionHandlers/index.ts

@@ -0,0 +1,2 @@
+export {useActionHandlers} from './useActionHandlers';
+export type {UseActionHandlersProps, UseActionHandlersResult} from './useActionHandlers';

src/components/utils/useActionHandlers.ts → src/hooks/useActionHandlers/useActionHandlers.ts

@@ -1,11 +1,13 @@
 import React from 'react';
 
-import {KeyCode} from '../constants';
+import {KeyCode} from '../../constants';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type AnyFunction = (...args: any[]) => any;
 
-interface UseActionHandlersResult<T> {
+export type UseActionHandlersProps = AnyFunction;
+
+export interface UseActionHandlersResult<T> {
     onKeyDown: React.KeyboardEventHandler<T>;
 }
 
@@ -14,13 +16,16 @@ interface UseActionHandlersResult<T> {
  * @param callback
  * @return {onKeyDown}
  */
-export function useActionHandlers<T>(callback?: AnyFunction): UseActionHandlersResult<T> {
+export function useActionHandlers<T>(
+    callback?: UseActionHandlersProps,
+): UseActionHandlersResult<T> {
     const onKeyDown = React.useCallback(
         (event: React.KeyboardEvent<T>) => {
             if (
                 callback &&
                 [KeyCode.ENTER, KeyCode.SPACEBAR, KeyCode.SPACEBAR_OLD].includes(event.key)
             ) {
+                // eslint-disable-next-line callback-return
                 callback(event);
             }
         },

src/hooks/useFileInput/README.md

@@ -0,0 +1,23 @@
+<!--GITHUB_BLOCK-->
+
+# useFileInput
+
+<!--/GITHUB_BLOCK-->
+
+```tsx
+import {useFileInput} from '@gravity-ui/uikit';
+```
+
+The `useFileInput` hook used to shape props for input with type "file"
+
+## Properties
+
+| Name     | Description          |                 Type                 | Default |
+| :------- | :------------------- | :----------------------------------: | :-----: |
+| onUpdate | Update file callback |      `(files: File[]) => void`       |         |
+| onChange | On change callback   | `(event: React.ChangeEvent) => void` |         |
+
+## Result
+
+- controlProps - props for the input with type 'file' `React.DetailedHTMLProps`.
+- triggerProps - props for the interactive element that, when interacted with, should open a dialog window for file selection `{onClick: () => void;}`.

src/components/utils/useFileInput/__stories__/UseFileInput.stories.tsx → src/hooks/useFileInput/__stories__/UseFileInput.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import type {Meta, StoryFn} from '@storybook/react';
 
-import {Button} from '../../../Button';
+import {Button} from '../../../components/Button';
 import {useFileInput} from '../useFileInput';
 
 export default {title: 'Hooks/useFileInput'} as Meta;

src/hooks/useFileInput/index.ts

@@ -0,0 +1,2 @@
+export {useFileInput} from './useFileInput';
+export type {UseFileInputProps, UseFileInputOutput, UseFileInputResult} from './useFileInput';

src/components/utils/useFileInput/useFileInput.ts → src/hooks/useFileInput/useFileInput.ts

@@ -6,6 +6,9 @@ export type UseFileInputProps = {
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
 };
 
+/**
+ * @deprecated use UseFileInputResult instead
+ */
 export type UseFileInputOutput = {
     controlProps: React.DetailedHTMLProps<
         React.InputHTMLAttributes<HTMLInputElement>,
@@ -16,18 +19,20 @@ export type UseFileInputOutput = {
     };
 };
 
+export type UseFileInputResult = UseFileInputOutput;
+
 /**
  * Used to shape props for input with type "file".
- * 
+ *
  * Usage example:
  ```tsx
     import React from 'react';
     import {Button, useFileInput} from '@gravity-ui/uikit';
-    
+
     const Component = () => {
         const onUpdate = React.useCallback((files: File[]) => console.log(files), []);
         const {controlProps, triggerProps} = useFileInput({onUpdate});
-        
+
         return (
             <React.Fragment>
                 <input {...controlProps} />

src/hooks/useForkRef/README.md

@@ -0,0 +1,21 @@
+<!--GITHUB_BLOCK-->
+
+# useForkRef
+
+<!--/GITHUB_BLOCK-->
+
+```tsx
+import {useForkRef} from '@gravity-ui/uikit';
+```
+
+The `useForkRef` hook that can combine refs into a single ref
+
+## Properties
+
+| Name | Description     |        Type         | Default |
+| :--- | :-------------- | :-----------------: | :-----: |
+| refs | ref-links array | `React.RefObject[]` |         |
+
+## Result
+
+Combined ref. `React.RefCallback`

src/hooks/useForkRef/index.ts

@@ -0,0 +1,3 @@
+export {useForkRef} from './useForkRef';
+export {setRef} from './setRef';
+export type {UseForkRefProps, UseForkRefResult} from './useForkRef';