diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx index f490b4a86c..ffd1833a03 100644 --- a/src/components/Modal/Modal.tsx +++ b/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'; diff --git a/src/components/Popup/__stories__/Popup.stories.tsx b/src/components/Popup/__stories__/Popup.stories.tsx index 6a7348b8f7..43f6c49966 100644 --- a/src/components/Popup/__stories__/Popup.stories.tsx +++ b/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'; diff --git a/src/components/Portal/Portal.tsx b/src/components/Portal/Portal.tsx index 3da43f5622..cbc0bdb7ea 100644 --- a/src/components/Portal/Portal.tsx +++ b/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; diff --git a/src/components/index.ts b/src/components/index.ts index 3b820c3d7a..af7bcfca2e 100644 --- a/src/components/index.ts +++ b/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'; diff --git a/src/hooks/index.ts b/src/hooks/index.ts index bcd5297292..8ce4679d64 100644 --- a/src/hooks/index.ts +++ b/src/hooks/index.ts @@ -1 +1,4 @@ +export * from './useBodyScrollLock'; export * from './useOutsideClick'; +export * from './usePortalContainer'; +export * from './useVirtualElementRef'; diff --git a/src/hooks/useBodyScrollLock/README.md b/src/hooks/useBodyScrollLock/README.md new file mode 100644 index 0000000000..fbd0b0a033 --- /dev/null +++ b/src/hooks/useBodyScrollLock/README.md @@ -0,0 +1,17 @@ + + +# useBodyScrollLock + + + +```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` | | diff --git a/src/hooks/useBodyScrollLock/index.ts b/src/hooks/useBodyScrollLock/index.ts new file mode 100644 index 0000000000..59656edbbe --- /dev/null +++ b/src/hooks/useBodyScrollLock/index.ts @@ -0,0 +1,2 @@ +export {useBodyScrollLock} from './useBodyScrollLock'; +export type {BodyScrollLockProps, UseBodyScrollLockProps} from './useBodyScrollLock'; diff --git a/src/components/utils/useBodyScrollLock.ts b/src/hooks/useBodyScrollLock/useBodyScrollLock.ts similarity index 91% rename from src/components/utils/useBodyScrollLock.ts rename to src/hooks/useBodyScrollLock/useBodyScrollLock.ts index 3d47b0fc53..56cfdff249 100644 --- a/src/components/utils/useBodyScrollLock.ts +++ b/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++; diff --git a/src/components/utils/PortalProvider.tsx b/src/hooks/usePortalContainer/PortalProvider.tsx similarity index 100% rename from src/components/utils/PortalProvider.tsx rename to src/hooks/usePortalContainer/PortalProvider.tsx diff --git a/src/hooks/usePortalContainer/README.md b/src/hooks/usePortalContainer/README.md new file mode 100644 index 0000000000..1b1d59e6fe --- /dev/null +++ b/src/hooks/usePortalContainer/README.md @@ -0,0 +1,15 @@ + + +# usePortalContainer + + + +```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` diff --git a/src/hooks/usePortalContainer/index.ts b/src/hooks/usePortalContainer/index.ts new file mode 100644 index 0000000000..e768dc2839 --- /dev/null +++ b/src/hooks/usePortalContainer/index.ts @@ -0,0 +1,3 @@ +export {usePortalContainer} from './usePortalContainer'; +export {PortalProvider} from './PortalProvider'; +export type {UsePortalContainerResult} from './usePortalContainer'; diff --git a/src/components/utils/usePortalContainer.ts b/src/hooks/usePortalContainer/usePortalContainer.ts similarity index 71% rename from src/components/utils/usePortalContainer.ts rename to src/hooks/usePortalContainer/usePortalContainer.ts index 392a81b82f..e85939edef 100644 --- a/src/components/utils/usePortalContainer.ts +++ b/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; diff --git a/src/hooks/useVirtualElementRef/README.md b/src/hooks/useVirtualElementRef/README.md new file mode 100644 index 0000000000..41a01eb7b1 --- /dev/null +++ b/src/hooks/useVirtualElementRef/README.md @@ -0,0 +1,22 @@ + + +# useVirtualElementRef + + + +```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` diff --git a/src/hooks/useVirtualElementRef/index.ts b/src/hooks/useVirtualElementRef/index.ts new file mode 100644 index 0000000000..47af80691d --- /dev/null +++ b/src/hooks/useVirtualElementRef/index.ts @@ -0,0 +1,6 @@ +export {useVirtualElementRef} from './useVirtualElementRef'; +export type { + VirtualElementRect, + UseVirtualElementRefProps, + UseVirtualElementRefResult, +} from './useVirtualElementRef'; diff --git a/src/components/utils/useVirtualElementRef.ts b/src/hooks/useVirtualElementRef/useVirtualElementRef.ts similarity index 86% rename from src/components/utils/useVirtualElementRef.ts rename to src/hooks/useVirtualElementRef/useVirtualElementRef.ts index 88ff2d04bf..d45af8bdfd 100644 --- a/src/components/utils/useVirtualElementRef.ts +++ b/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; + 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 { +): UseVirtualElementRefResult { const {rect, contextElement} = props; const rectRef = React.useRef(initialPosition);