refactor: private hooks directory (gravity-ui#1091)

src/components/Checkbox/Checkbox.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 
+import {useCheckbox} from '../../hooks/private';
 import {ControlLabel} from '../ControlLabel';
 import type {ControlLabelSize} from '../ControlLabel';
 import type {ControlProps, DOMProps, QAProps} from '../types';
 import {block} from '../utils/cn';
-import {useCheckbox} from '../utils/useCheckbox';
 
 import {CheckboxDashIcon} from './CheckboxDashIcon';
 import {CheckboxTickIcon} from './CheckboxTickIcon';

src/components/DropdownMenu/constants.ts

@@ -1,4 +1,4 @@
-import type {PopperPlacement} from '../utils/usePopper';
+import type {PopperPlacement} from '../../hooks/private';
 
 import type {DropdownMenuListItem} from './types';
 

src/components/DropdownMenu/hooks/usePopupVisibility.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {useConditionallyControlledState} from '../../utils/useConditionallyControlledState';
+import {useConditionallyControlledState} from '../../../hooks/private';
 
 export function usePopupVisibility(
     visible?: boolean,

src/components/Modal/Modal.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import {CSSTransition} from 'react-transition-group';
 
 import {useBodyScrollLock} from '../../hooks';
+import {useRestoreFocus} from '../../hooks/private';
 import {Portal} from '../Portal';
 import type {DOMProps, QAProps} from '../types';
 import {FocusTrap} from '../utils/FocusTrap';
@@ -11,7 +12,6 @@ import type {LayerCloseReason} from '../utils/layer-manager';
 import {useLayer} from '../utils/layer-manager';
 import type {LayerExtendableProps} from '../utils/layer-manager/LayerManager';
 import {getCSSTransitionClassNames} from '../utils/transition';
-import {useRestoreFocus} from '../utils/useRestoreFocus';
 
 import './Modal.scss';
 

src/components/Popover/hooks/useOpen.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {useUpdateEffect} from '../../utils/useUpdateEffect';
+import {useUpdateEffect} from '../../../hooks/private';
 import {PopoverBehavior, delayByBehavior} from '../config';
 
 export type UseOpenProps = {

src/components/Popup/Popup.tsx

@@ -3,16 +3,15 @@ import React from 'react';
 import {CSSTransition} from 'react-transition-group';
 
 import {useForkRef} from '../../hooks';
+import {usePopper, useRestoreFocus} from '../../hooks/private';
+import type {PopperAnchorRef, PopperPlacement, PopperProps} from '../../hooks/private';
 import {Portal} from '../Portal';
 import type {DOMProps, QAProps} from '../types';
 import {FocusTrap, useParentFocusTrap} from '../utils/FocusTrap';
 import {block} from '../utils/cn';
 import {useLayer} from '../utils/layer-manager';
 import type {LayerExtendableProps} from '../utils/layer-manager/LayerManager';
 import {getCSSTransitionClassNames} from '../utils/transition';
-import {usePopper} from '../utils/usePopper';
-import type {PopperAnchorRef, PopperPlacement, PopperProps} from '../utils/usePopper';
-import {useRestoreFocus} from '../utils/useRestoreFocus';
 
 import {PopupArrow} from './PopupArrow';
 

src/components/Radio/Radio.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 
+import {useRadio} from '../../hooks/private';
 import {ControlLabel} from '../ControlLabel';
 import type {ControlLabelSize} from '../ControlLabel';
 import type {ControlProps, DOMProps, QAProps} from '../types';
 import {block} from '../utils/cn';
-import {useRadio} from '../utils/useRadio';
 
 import './Radio.scss';
 

src/components/RadioButton/RadioButton.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
+import {useRadioGroup} from '../../hooks/private';
 import type {ControlGroupOption, ControlGroupProps, DOMProps, QAProps} from '../types';
 import {block} from '../utils/cn';
-import {useRadioGroup} from '../utils/useRadioGroup';
 
 import {RadioButtonOption as Option} from './RadioButtonOption';
 

src/components/RadioButton/RadioButtonOption.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
+import {useRadio} from '../../hooks/private';
 import type {ControlProps} from '../types';
 import {block} from '../utils/cn';
 import {isIcon} from '../utils/common';
-import {useRadio} from '../utils/useRadio';
 
 const b = block('radio-button');
 

src/components/RadioGroup/RadioGroup.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 
+import {useRadioGroup} from '../../hooks/private';
 import {Radio} from '../Radio';
 import type {RadioProps, RadioSize} from '../Radio';
 import type {ControlGroupOption, ControlGroupProps, DOMProps, QAProps} from '../types';
 import {block} from '../utils/cn';
-import {useRadioGroup} from '../utils/useRadioGroup';
 
 import './RadioGroup.scss';
 

src/components/Switch/Switch.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 
+import {useCheckbox} from '../../hooks/private';
 import {ControlLabel} from '../ControlLabel';
 import type {ControlLabelSize} from '../ControlLabel';
 import type {ControlProps, DOMProps, QAProps} from '../types';
 import {block} from '../utils/cn';
-import {useCheckbox} from '../utils/useCheckbox';
 
 import './Switch.scss';
 

src/components/Table/hoc/withTableSettings/TableColumnSetup/TableColumnSetup.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import {Gear} from '@gravity-ui/icons';
 
-import type {PopperPlacement} from '../../../../../components/utils/usePopper';
+import type {PopperPlacement} from '../../../../../hooks/private';
 import {useActionHandlers} from '../../../../../hooks/useActionHandlers';
 import {Button} from '../../../../Button';
 import {Icon} from '../../../../Icon';

src/components/Toaster/Toast/Toast.tsx

@@ -2,11 +2,11 @@ import React from 'react';
 
 import {CircleCheck, CircleInfo, Thunderbolt, TriangleExclamation, Xmark} from '@gravity-ui/icons';
 
+import {useCloseOnTimeout} from '../../../hooks/private';
 import {Button} from '../../Button';
 import {Icon} from '../../Icon';
 import type {IconProps} from '../../Icon';
 import {block} from '../../utils/cn';
-import {useCloseOnTimeout} from '../../utils/useCloseOnTimeout';
 import i18n from '../i18n';
 import type {InternalToastProps, ToastAction, ToastType} from '../types';
 

src/components/Tooltip/Tooltip.tsx

@@ -2,11 +2,11 @@ import React from 'react';
 
 import {KeyCode} from '../../constants';
 import {useForkRef} from '../../hooks';
+import {useBoolean} from '../../hooks/private';
 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 './Tooltip.scss';
 

src/components/controls/TextInput/TextInput.tsx

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

src/components/utils/useOnFocusOutside.ts

@@ -13,7 +13,7 @@ interface UseOnFocusOutsideProps {
 }
 
 /**
- * @deprecated use useFocusWithin instead
+ * @deprecated use useFocusWithin instead, drop on next major
  *
  * Calls callback on focus element outside of some React sub-tree
  *

src/hooks/private/index.ts

@@ -0,0 +1,11 @@
+export * from './useBoolean';
+export * from './useCheckbox';
+export * from './useCloseOnTimeout';
+export * from './useConditionallyControlledState';
+export * from './useElementSize';
+export * from './useHover';
+export * from './usePopper';
+export * from './useRadio';
+export * from './useRadioGroup';
+export * from './useRestoreFocus';
+export * from './useUpdateEffect';

src/hooks/private/useBoolean/README.md

@@ -0,0 +1,20 @@
+# useBoolean
+
+The `useBoolean` hook makes typical handlers for boolean state
+
+## Properties
+
+| Name         | Description   |            Type            | Default |
+| :----------- | :------------ | :------------------------: | :-----: |
+| initialState | Boolean state | `boolean - (() => boolean` |         |
+
+## Result
+
+```
+[
+    value, // boolean
+    setTrueCallback, // () => void
+    setFalseCallback, // () => void
+    toggleBooleanStateCallback, // () => void
+]
+```

src/hooks/private/useBoolean/index.ts

@@ -0,0 +1,2 @@
+export {useBoolean} from './useBoolean';
+export type {UseBooleanResult} from './useBoolean';

src/components/utils/useBoolean.ts → src/hooks/private/useBoolean/useBoolean.ts

@@ -4,6 +4,8 @@ type SetTrue = () => void;
 type SetFalse = () => void;
 type Toggle = () => void;
 
+export type UseBooleanResult = [boolean, SetTrue, SetFalse, Toggle];
+
 export function useBoolean(
     initialState: boolean | (() => boolean),
 ): [boolean, SetTrue, SetFalse, Toggle] {

src/hooks/private/useCheckbox/README.md

@@ -0,0 +1,28 @@
+# useCheckbox
+
+The `useCheckbox` hook need to generate props for checkbox control
+
+## Properties
+
+| Name           | Description                 |                                                                            Type                                                                            | Default |
+| :------------- | :-------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----: |
+| name           | Name                        |                                                                          `string`                                                                          |         |
+| value          | Value                       |                                                                          `string`                                                                          |         |
+| checked        | Checked flag                |                                                                         `boolean`                                                                          |         |
+| defaultChecked | Default checked value       |                                                                         `boolean`                                                                          |         |
+| indeterminate  | Indeterminate flag          |                                                                         `boolean`                                                                          |         |
+| controlRef     | Ref-link on control element |                                                                        `React.Ref`                                                                         |         |
+| controlProps   | Another control props       | `Omit<React.InputHTMLAttributes, 'name', 'value', 'id', 'onFocus', 'onBlur', 'disabled', 'type', 'onChange', 'defaultChecked', 'checked', 'aria-checked'>` |         |
+| disabled       | Disabled flag               |                                                                         `boolean`                                                                          |         |
+| onUpdate       | OnUpdate callback           |                                                                `(checked: boolean) => void`                                                                |         |
+| onChange       | OnChange callback           |                                                            `(event: React.ChangeEvent) => void`                                                            |         |
+| onFocus        | OnFocus callback            |                                                            `(event: React.FocusEvent) => void`                                                             |         |
+| onBlur         | OnBlur callback             |                                                            `(event: React.FocusEvent) => void`                                                             |         |
+| id             | ID attribute                |                                                            `(event: React.FocusEvent) => void`                                                             |         |
+
+## Result
+
+| Name       | Description                        |                       Type                        |
+| :--------- | :--------------------------------- | :-----------------------------------------------: |
+| checked    | Checked state                      |                     `boolean`                     |
+| inputProps | Props to pass to the input element | `React.InputHTMLAttributes & React.RefAttributes` |

src/hooks/private/useCheckbox/index.ts

@@ -0,0 +1,2 @@
+export {useCheckbox} from './useCheckbox';
+export type {UseCheckboxProps, UseCheckboxResult} from './useCheckbox';

src/components/utils/useCheckbox.ts → src/hooks/private/useCheckbox/useCheckbox.ts

@@ -1,9 +1,15 @@
 import React from 'react';
 
-import {useForkRef} from '../../hooks';
-import type {ControlProps} from '../types';
+import {useForkRef} from '../..';
+import type {ControlProps} from '../../../components/types';
+import {eventBroker} from '../../../components/utils/event-broker';
 
-import {eventBroker} from './event-broker';
+export type UseCheckboxProps = ControlProps;
+
+export type UseCheckboxResult = {
+    checked: boolean;
+    inputProps: React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>;
+};
 
 export function useCheckbox({
     name,
@@ -19,7 +25,7 @@ export function useCheckbox({
     onFocus,
     onBlur,
     disabled,
-}: ControlProps) {
+}: UseCheckboxProps): UseCheckboxResult {
     const innerControlRef = React.useRef<HTMLInputElement>(null);
     const [checkedState, setCheckedState] = React.useState(defaultChecked ?? false);
     const isControlled = typeof checked === 'boolean';

src/hooks/private/useCloseOnTimeout/README.md

@@ -0,0 +1,17 @@
+# useCloseOnTimeout
+
+The `useCloseOnTimeout` hook invokes callback after given amount of time unless mouse is on the element
+
+## Properties
+
+| Name    | Description       |      Type      | Default |
+| :------ | :---------------- | :------------: | :-----: |
+| onClose | On close callback | `VoidFunction` |         |
+| timeout | Timeout           |    `number`    |         |
+
+## Result
+
+| Name         | Description          |           Type            |
+| :----------- | :------------------- | :-----------------------: |
+| onMouseOver  | OnMouseOver handler  | `React.MouseEventHandler` |
+| onMouseLeave | OnMouseLeave handler | `React.MouseEventHandler` |

src/hooks/private/useCloseOnTimeout/index.ts

@@ -0,0 +1,2 @@
+export {useCloseOnTimeout} from './useCloseOnTimeout';
+export type {UseCloseOnTimeoutProps, UseCloseOnTimeoutResult} from './useCloseOnTimeout';

src/components/utils/useCloseOnTimeout.ts → src/hooks/private/useCloseOnTimeout/useCloseOnTimeout.ts

@@ -1,17 +1,23 @@
-import {useTimeout} from '../../hooks';
+import {useTimeout} from '../..';
+import {useHover} from '../useHover';
 
-import {useHover} from './useHover';
-
-interface UseCloseOnTimeoutProps {
+export interface UseCloseOnTimeoutProps {
     onClose: VoidFunction;
     timeout?: number;
 }
 
+export interface UseCloseOnTimeoutResult {
+    onMouseOver: React.MouseEventHandler;
+    onMouseLeave: React.MouseEventHandler;
+}
+
 /**
  * Invokes callback after given amount of time unless mouse is on the element
  *
  * @param onClose
  * @param timeout
+ *
+ * @return mouse event handlers
  */
 export function useCloseOnTimeout<T = Element>({onClose, timeout}: UseCloseOnTimeoutProps) {
     const [onMouseOver, onMouseLeave, isHovering] = useHover<T>();

src/components/utils/useConditionallyControlledState/README.md → src/hooks/private/useConditionallyControlledState/README.md

@@ -2,16 +2,16 @@
 
 React hook used to create a conditionally controlled state, such state can either be controlled or uncontrolled
 
-### Arguments
+## Properties
 
-| Name         | Type                                                                  | Default                                               | Description                                                      |
-| :----------- | :-------------------------------------------------------------------- | :---------------------------------------------------- | :--------------------------------------------------------------- |
-| property     | `StateType`                                                           | `-`                                                   | State value                                                      |
-| setProperty  | `Dispatch<SetStateAction<StateType>> or ((value: StateType) => void)` | `-`                                                   | State setter or callback, which should be called on state change |
-| initialState | `StateType` or `() => StateType`                                      | `-`                                                   | Initial state or state initializer                               |
-| isControlled | `() => boolean`                                                       | `property !== undefined && setProperty !== undefined` | Returns if state should be controlled                            |
+| Name         | Description                                                      |                                 Type                                  |                        Default                        |
+| :----------- | :--------------------------------------------------------------- | :-------------------------------------------------------------------: | :---------------------------------------------------: |
+| property     | State value                                                      |                              `StateType`                              |                                                       |
+| setProperty  | State setter or callback, which should be called on state change | `Dispatch<SetStateAction<StateType>> or ((value: StateType) => void)` |                                                       |
+| initialState | Initial state or state initializer                               |                   `StateType` or `() => StateType`                    |                                                       |
+| isControlled | Returns if state should be controlled                            |                            `() => boolean`                            | `property !== undefined && setProperty !== undefined` |
 
-### Returns
+## Result
 
 | Name  | Type                                               | Description            |
 | :---- | :------------------------------------------------- | :--------------------- |

src/hooks/private/useConditionallyControlledState/index.ts

@@ -0,0 +1,2 @@
+export {useConditionallyControlledState} from './useConditionallyControlledState';
+export type {UseConditionallyControlledStateResult} from './useConditionallyControlledState';

src/components/utils/useConditionallyControlledState/useConditionallyControlledState.ts → src/hooks/private/useConditionallyControlledState/useConditionallyControlledState.ts

@@ -1,6 +1,6 @@
 import {useStateWithCallback} from '../useStateWithCallback';
 
-type UseConditionallyControlledStateResult<T extends unknown> = [
+export type UseConditionallyControlledStateResult<T extends unknown> = [
     T,
     React.Dispatch<React.SetStateAction<T>>,
 ];