diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx index f490b4a86c..1ced9e296a 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/useBodyScrollLock'; 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..cd2e6c6ae7 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/useVirtualElementRef'; 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..1e6588548f 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/usePortalContainer/usePortalContainer'; export interface PortalProps { container?: HTMLElement; diff --git a/src/components/Portal/index.ts b/src/components/Portal/index.ts index 73d42c80c4..1fa7cdec53 100644 --- a/src/components/Portal/index.ts +++ b/src/components/Portal/index.ts @@ -1 +1,2 @@ export * from './Portal'; +export * from '../../hooks/usePortalContainer/PortalProvider'; 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..c2f62a9d45 100644 --- a/src/hooks/index.ts +++ b/src/hooks/index.ts @@ -1 +1,4 @@ export * from './useOutsideClick'; +export * from './useBodyScrollLock'; +export * from './useVirtualElementRef'; +export * from './usePortalContainer'; 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..de319276c0 --- /dev/null +++ b/src/hooks/useBodyScrollLock/index.ts @@ -0,0 +1,2 @@ +export {useBodyScrollLock} from './useBodyScrollLock'; +export type {UseBodyScrollLockProps} from './useBodyScrollLock'; diff --git a/src/components/utils/useBodyScrollLock.ts b/src/hooks/useBodyScrollLock/useBodyScrollLock.ts similarity index 93% rename from src/components/utils/useBodyScrollLock.ts rename to src/hooks/useBodyScrollLock/useBodyScrollLock.ts index 3d47b0fc53..c50f5229b6 100644 --- a/src/components/utils/useBodyScrollLock.ts +++ b/src/hooks/useBodyScrollLock/useBodyScrollLock.ts @@ -1,13 +1,13 @@ import React from 'react'; -export interface BodyScrollLockProps { +export interface UseBodyScrollLockProps { enabled: boolean; } 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..45207cb319 --- /dev/null +++ b/src/hooks/usePortalContainer/README.md @@ -0,0 +1,17 @@ + + +# usePortalContainer + + + +```tsx +import {usePortalContainer} from '@gravity-ui/uikit'; +``` + +The `usePortalContainer` hook helps to create portal container + +## Return + +| Name | Description | Type | +| :-------- | :--------------------------- | :------------------: | +| container | 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..a152b18a94 --- /dev/null +++ b/src/hooks/usePortalContainer/index.ts @@ -0,0 +1,3 @@ +export {usePortalContainer} from './usePortalContainer'; +export {PortalProvider} from './PortalProvider'; +export type {UsePortalContainerReturnType} from './usePortalContainer'; diff --git a/src/components/utils/usePortalContainer.ts b/src/hooks/usePortalContainer/usePortalContainer.ts similarity index 69% rename from src/components/utils/usePortalContainer.ts rename to src/hooks/usePortalContainer/usePortalContainer.ts index 392a81b82f..d05b08303b 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 UsePortalContainerReturnType = HTMLElement | null; + +export function usePortalContainer(): UsePortalContainerReturnType { 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..4ed780d9f8 --- /dev/null +++ b/src/hooks/useVirtualElementRef/README.md @@ -0,0 +1,24 @@ + + +# 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 in relation to viewport | `{top, bottom, left, right}: {[x]:number}` | | +| contextElement | DOM-context of virtual element | `Element` | | + +## Return + +| Name | Description | Type | +| :--- | :----------------------- | :----------------------: | +| ref | Virtual element ref link | `React.MutableRefObject` | diff --git a/src/hooks/useVirtualElementRef/index.ts b/src/hooks/useVirtualElementRef/index.ts new file mode 100644 index 0000000000..5f154ad945 --- /dev/null +++ b/src/hooks/useVirtualElementRef/index.ts @@ -0,0 +1,6 @@ +export {useVirtualElementRef} from './useVirtualElementRef'; +export type { + VirtualElementRect, + UseVirtualElementRefProps, + UseVirtualElementRefReturnType, +} from './useVirtualElementRef'; diff --git a/src/components/utils/useVirtualElementRef.ts b/src/hooks/useVirtualElementRef/useVirtualElementRef.ts similarity index 89% rename from src/components/utils/useVirtualElementRef.ts rename to src/hooks/useVirtualElementRef/useVirtualElementRef.ts index 88ff2d04bf..b3d4a39af9 100644 --- a/src/components/utils/useVirtualElementRef.ts +++ b/src/hooks/useVirtualElementRef/useVirtualElementRef.ts @@ -16,17 +16,19 @@ export interface UseVirtualElementRefProps { rect?: VirtualElementRect | null; /** - * DOM-context of virual element + * DOM-context of virtual element */ contextElement?: Element; } +export type UseVirtualElementRefReturnType = 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 { +): UseVirtualElementRefReturnType { const {rect, contextElement} = props; const rectRef = React.useRef(initialPosition);