fix: refactor hooks: useForkRef and useFileInput

CODEOWNERS

@@ -48,6 +48,7 @@
 /src/components/theme @resure
 
 /src/hooks/useActionHandlers @ogonkov
+/src/hooks/useFileInput @korvin89
 /src/hooks/useOutsideClick @NikitaCG
 /src/hooks/useUniqId @ValeraS
 

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,12 +1,11 @@
 import React from 'react';
 
 import {KeyCode} from '../../constants';
-import {useUniqId} from '../../hooks';
+import {useForkRef, useUniqId} from '../../hooks';
 import type {List} from '../List';
 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 {EmptyOptions, SelectControl, SelectFilter, SelectList, SelectPopup} from './components';

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 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 {useUniqId} from '../../../hooks';
+import {useForkRef, useUniqId} from '../../../hooks';
 import {blockNew} from '../../utils/cn';
-import {useForkRef} from '../../utils/useForkRef';
 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 {useUniqId} from '../../../hooks';
+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 {ClearButton, mapTextInputSizeToButtonSize} from '../common';
 import {OuterAdditionalContent} from '../common/OuterAdditionalContent/OuterAdditionalContent';
 import type {

src/components/index.ts

@@ -56,10 +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 {getLayersCount} from './utils/LayerManager';

src/components/utils/FocusTrap.tsx

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

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 {useUniqId} from '../../hooks';
+import {useForkRef, useUniqId} from '../../hooks';
 import type {ControlProps} from '../types';
 
 import {eventBroker} from './event-broker';
-import {useForkRef} from './useForkRef';
 
 export function useRadio({
     name,

src/hooks/index.ts

@@ -1,5 +1,7 @@
 export * from './useActionHandlers';
 export * from './useBodyScrollLock';
+export * from './useFileInput';
+export * from './useForkRef';
 export * from './useOutsideClick';
 export * from './usePortalContainer';
 export * from './useVirtualElementRef';

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

@@ -16,18 +16,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';

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

@@ -2,9 +2,10 @@ import React from 'react';
 
 import {setRef} from './setRef';
 
-export function useForkRef<T>(
-    ...refs: Array<React.Ref<T> | undefined>
-): React.RefCallback<T> | null {
+export type UseForkRefProps<K> = Array<React.Ref<K> | undefined>;
+export type UseForkRefResult<W> = React.RefCallback<W> | null;
+
+export function useForkRef<T>(...refs: UseForkRefProps<T>): UseForkRefResult<T> {
     return React.useMemo(() => {
         if (refs.every((ref) => ref === null || ref === undefined)) {
             return null;