refactor: continue refactor hooks: useBodyScrollLock, useVirtualEleme…

…ntRef, usePortalContainer (#1038)

src/components/Modal/Modal.tsx

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

src/components/Popup/__stories__/Popup.stories.tsx

@@ -2,9 +2,9 @@ import React from 'react';
 
 import type {Meta, StoryFn} from '@storybook/react';
 
+import {useVirtualElementRef} from '../../../hooks';
 import {Button} from '../../Button';
 import {TextInput} from '../../controls';
-import {useVirtualElementRef} from '../../utils/useVirtualElementRef';
 import {Popup} from '../Popup';
 import type {PopupPlacement, PopupProps} from '../Popup';
 

src/components/Portal/Portal.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import ReactDOM from 'react-dom';
 
-import {usePortalContainer} from '../utils/usePortalContainer';
+import {usePortalContainer} from '../../hooks';
 
 export interface PortalProps {
     container?: HTMLElement;

src/components/index.ts

@@ -51,13 +51,9 @@ export * from './utils/class-transform';
 export * from './utils/event-broker';
 export {getComponentName} from './utils/getComponentName';
 export * from './utils/withEventBrokerDomHandlers';
-export * from './utils/useBodyScrollLock';
 export * from './utils/useEventBroker';
 export * from './utils/useLayer';
-export * from './utils/useVirtualElementRef';
 export {Lang, configure} from './utils/configure';
-export * from './utils/PortalProvider';
-export * from './utils/usePortalContainer';
 export * from './utils/useSelect';
 export * from './utils/useListNavigation';
 export * from './utils/useForkRef';

src/hooks/index.ts

@@ -1 +1,4 @@
+export * from './useBodyScrollLock';
 export * from './useOutsideClick';
+export * from './usePortalContainer';
+export * from './useVirtualElementRef';

src/hooks/useBodyScrollLock/README.md

@@ -0,0 +1,17 @@
+<!--GITHUB_BLOCK-->
+
+# useBodyScrollLock
+
+<!--/GITHUB_BLOCK-->
+
+```tsx
+import {useBodyScrollLock} from '@gravity-ui/uikit';
+```
+
+The `useBodyScrollLock` hook helps to blocks scrolling on the body element.
+
+## Properties
+
+| Name    | Description |   Type    | Default |
+| :------ | :---------- | :-------: | :-----: |
+| enabled | Enable flag | `boolean` |         |

src/hooks/useBodyScrollLock/index.ts

@@ -0,0 +1,2 @@
+export {useBodyScrollLock} from './useBodyScrollLock';
+export type {BodyScrollLockProps, UseBodyScrollLockProps} from './useBodyScrollLock';

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

@@ -1,13 +1,15 @@
 import React from 'react';
 
-export interface BodyScrollLockProps {
+export interface UseBodyScrollLockProps {
     enabled: boolean;
 }
 
+export type BodyScrollLockProps = UseBodyScrollLockProps;
+
 let locks = 0;
 let storedBodyStyle: string | undefined;
 
-export function useBodyScrollLock({enabled}: BodyScrollLockProps) {
+export function useBodyScrollLock({enabled}: UseBodyScrollLockProps) {
     React.useLayoutEffect(() => {
         if (enabled) {
             locks++;

src/hooks/usePortalContainer/README.md

@@ -0,0 +1,15 @@
+<!--GITHUB_BLOCK-->
+
+# usePortalContainer
+
+<!--/GITHUB_BLOCK-->
+
+```tsx
+import {usePortalContainer} from '@gravity-ui/uikit';
+```
+
+The `usePortalContainer` hook returns portal container element in the current scope
+
+## Result
+
+Container element for portal. `HTMLElement | null`

src/hooks/usePortalContainer/index.ts

@@ -0,0 +1,3 @@
+export {usePortalContainer} from './usePortalContainer';
+export {PortalProvider} from './PortalProvider';
+export type {UsePortalContainerResult} from './usePortalContainer';

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

@@ -2,7 +2,9 @@ import React from 'react';
 
 import {PortalContext} from './PortalProvider';
 
-export function usePortalContainer(): HTMLElement | null {
+export type UsePortalContainerResult = HTMLElement | null;
+
+export function usePortalContainer(): UsePortalContainerResult {
     const context = React.useContext(PortalContext);
 
     let defaultContainer = null;

src/hooks/useVirtualElementRef/README.md

@@ -0,0 +1,22 @@
+<!--GITHUB_BLOCK-->
+
+# useVirtualElementRef
+
+<!--/GITHUB_BLOCK-->
+
+```tsx
+import {useVirtualElementRef} from '@gravity-ui/uikit';
+```
+
+The `useVirtualElementRef` hook helps to create virtual element for popup
+
+## Properties
+
+| Name           | Description                                      |                    Type                    | Default |
+| :------------- | :----------------------------------------------- | :----------------------------------------: | :-----: |
+| rect           | Position of virtual element relative to viewport | `{top, bottom, left, right}: {[x]:number}` |         |
+| contextElement | DOM-context of virtual element                   |                 `Element`                  |         |
+
+## Result
+
+Virtual element ref link. `React.RefObject`

src/hooks/useVirtualElementRef/index.ts

@@ -0,0 +1,6 @@
+export {useVirtualElementRef} from './useVirtualElementRef';
+export type {
+    VirtualElementRect,
+    UseVirtualElementRefProps,
+    UseVirtualElementRefResult,
+} from './useVirtualElementRef';

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

@@ -11,22 +11,24 @@ export type VirtualElementRect = {
 
 export interface UseVirtualElementRefProps {
     /**
-     * Position of virtual element in relation to viewport
+     * Position of virtual element relative to viewport
      */
     rect?: VirtualElementRect | null;
 
     /**
-     * DOM-context of virual element
+     * DOM-context of virtual element
      */
     contextElement?: Element;
 }
 
+export type UseVirtualElementRefResult = React.MutableRefObject<VirtualElement>;
+
 const initialPosition = {top: 0, right: 0, bottom: 0, left: 0};
 
 // React hook for creating virtual element for popup
 export function useVirtualElementRef(
     props: UseVirtualElementRefProps = {},
-): React.RefObject<VirtualElement> {
+): UseVirtualElementRefResult {
     const {rect, contextElement} = props;
     const rectRef = React.useRef(initialPosition);