From 0a39e81fba19ed13bc63d430d0199ceaae843d7c Mon Sep 17 00:00:00 2001 From: monochromer Date: Mon, 17 Nov 2025 17:51:11 +0500 Subject: [PATCH 1/4] fix(ThemeProvider): add `useIsomorphicLayoutEffect` to fix SSR warnings --- src/components/theme/ThemeProvider.tsx | 3 ++- src/hooks/private/index.ts | 1 + src/hooks/private/useIsomorphicLayoutEffect/index.ts | 1 + .../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.ts | 4 ++++ 4 files changed, 8 insertions(+), 1 deletion(-) create mode 100644 src/hooks/private/useIsomorphicLayoutEffect/index.ts create mode 100644 src/hooks/private/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.ts diff --git a/src/components/theme/ThemeProvider.tsx b/src/components/theme/ThemeProvider.tsx index a90b453822..6799388e93 100644 --- a/src/components/theme/ThemeProvider.tsx +++ b/src/components/theme/ThemeProvider.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; +import {useIsomorphicLayoutEffect} from '../../hooks/private'; import {PrivateLayoutProvider} from '../layout/LayoutProvider/LayoutProvider'; import type {PrivateLayoutProviderProps} from '../layout/LayoutProvider/LayoutProvider'; import {block} from '../utils/cn'; @@ -66,7 +67,7 @@ export function ThemeProvider({ const prevRootClassName = React.useRef(''); - React.useLayoutEffect(() => { + useIsomorphicLayoutEffect(() => { if (!scoped) { updateBodyClassName({ theme: themeValue, diff --git a/src/hooks/private/index.ts b/src/hooks/private/index.ts index 315c180e75..85a8d9675b 100644 --- a/src/hooks/private/index.ts +++ b/src/hooks/private/index.ts @@ -10,3 +10,4 @@ export * from './usePrevious'; export * from './useRadio'; export * from './useRadioGroup'; export * from './useUpdateEffect'; +export * from './useIsomorphicLayoutEffect'; diff --git a/src/hooks/private/useIsomorphicLayoutEffect/index.ts b/src/hooks/private/useIsomorphicLayoutEffect/index.ts new file mode 100644 index 0000000000..b76100dbb0 --- /dev/null +++ b/src/hooks/private/useIsomorphicLayoutEffect/index.ts @@ -0,0 +1 @@ +export {useIsomorphicLayoutEffect} from './useIsomorphicLayoutEffect'; diff --git a/src/hooks/private/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.ts b/src/hooks/private/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.ts new file mode 100644 index 0000000000..c7dc50419a --- /dev/null +++ b/src/hooks/private/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.ts @@ -0,0 +1,4 @@ +import * as React from 'react'; + +export const useIsomorphicLayoutEffect = + typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect; From 383e1f664075b3f3953a17f06725e699ed6b473b Mon Sep 17 00:00:00 2001 From: monochromer Date: Tue, 18 Nov 2025 14:46:21 +0500 Subject: [PATCH 2/4] fix: replace useLayoutEffect to isomoprhic version --- src/components/Breadcrumbs/Breadcrumbs.tsx | 6 ++++-- src/components/TreeSelect/TreeSelect.tsx | 4 +++- src/components/lab/Virtualizer/useLoadMore.tsx | 5 +++-- src/components/layout/hooks/useCurrentActiveMediaQuery.tsx | 4 +++- src/components/theme/ThemeProvider.tsx | 4 ++-- src/components/useList/hooks/useListKeydown.tsx | 4 +++- src/hooks/private/useCheckbox/useCheckbox.ts | 4 +++- src/hooks/private/useElementSize/useElementSize.ts | 4 +++- src/hooks/private/useIsomorphicLayoutEffect/index.ts | 2 +- .../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.ts | 3 +-- src/hooks/useListNavigation/useListNavigation.ts | 4 +++- 11 files changed, 29 insertions(+), 15 deletions(-) diff --git a/src/components/Breadcrumbs/Breadcrumbs.tsx b/src/components/Breadcrumbs/Breadcrumbs.tsx index 70a8122e1c..3e10908547 100644 --- a/src/components/Breadcrumbs/Breadcrumbs.tsx +++ b/src/components/Breadcrumbs/Breadcrumbs.tsx @@ -2,6 +2,8 @@ import * as React from 'react'; +import {useLayoutEffect} from 'src/hooks/private'; + import {useForkRef, useResizeObserver} from '../../hooks'; import type {PopupPlacement} from '../Popup'; import type {AriaLabelingProps, DOMProps, Key, QAProps} from '../types'; @@ -131,7 +133,7 @@ export const Breadcrumbs = React.forwardRef(function Breadcrumbs( }); const lastChildren = React.useRef(null); - React.useLayoutEffect(() => { + useLayoutEffect(() => { if (calculated && props.children !== lastChildren.current) { lastChildren.current = props.children; setVisibleItemsCount(items.length); @@ -139,7 +141,7 @@ export const Breadcrumbs = React.forwardRef(function Breadcrumbs( } }, [calculated, items.length, props.children]); - React.useLayoutEffect(() => { + useLayoutEffect(() => { if (!calculated) { recalculate(visibleItemsCount); } diff --git a/src/components/TreeSelect/TreeSelect.tsx b/src/components/TreeSelect/TreeSelect.tsx index 17a1c1a60a..464d702cd1 100644 --- a/src/components/TreeSelect/TreeSelect.tsx +++ b/src/components/TreeSelect/TreeSelect.tsx @@ -2,6 +2,8 @@ import * as React from 'react'; +import {useLayoutEffect} from 'src/hooks/private'; + import {useFocusWithin, useForkRef, useUniqId} from '../../hooks'; import {useOpenState} from '../../hooks/useSelect/useOpenState'; import {SelectControl} from '../Select/components'; @@ -147,7 +149,7 @@ export const TreeSelect = React.forwardRef(function TreeSelect { + useLayoutEffect(() => { if (open) { // for some reason popup position on page may be wrong calculated. `preventScroll` prevent page gap in that cases containerRef.current?.focus({preventScroll: true}); diff --git a/src/components/lab/Virtualizer/useLoadMore.tsx b/src/components/lab/Virtualizer/useLoadMore.tsx index 9896aa6bf4..3ff2eaa3f0 100644 --- a/src/components/lab/Virtualizer/useLoadMore.tsx +++ b/src/components/lab/Virtualizer/useLoadMore.tsx @@ -1,5 +1,7 @@ import * as React from 'react'; +import {useLayoutEffect} from 'src/hooks/private'; + export interface Loadable { /** Whether the items are currently loading. */ loading?: boolean; @@ -11,7 +13,6 @@ export interface LoadMoreOptions extends Loadable { /** * The amount of offset from bottom that should trigger load more. * The value is multiplied to the size of the visible area. - * * @default 1 */ scrollOffset?: number; @@ -50,7 +51,7 @@ export function useLoadMore( }, [scrollContainerRef, onLoadMore, scrollOffset]); const prevLoadingPropRef = React.useRef(loading); - React.useLayoutEffect(() => { + useLayoutEffect(() => { if (loading !== prevLoadingPropRef.current) { isLoadingRef.current = loading; prevLoadingPropRef.current = loading; diff --git a/src/components/layout/hooks/useCurrentActiveMediaQuery.tsx b/src/components/layout/hooks/useCurrentActiveMediaQuery.tsx index 1312d4122b..e63ffe7c71 100644 --- a/src/components/layout/hooks/useCurrentActiveMediaQuery.tsx +++ b/src/components/layout/hooks/useCurrentActiveMediaQuery.tsx @@ -1,5 +1,7 @@ import * as React from 'react'; +import {useLayoutEffect} from 'src/hooks/private'; + import type {MediaProps, MediaType} from '../types'; export const mockMediaQueryList: MediaQueryList = { @@ -88,7 +90,7 @@ export const useCurrentActiveMediaQuery = ( initialMediaQuery ?? (fixBreakpoints ? 'xs' : 's'), ); - React.useLayoutEffect(() => { + useLayoutEffect(() => { const queries = new Queries(breakpointsMap, fixBreakpoints); const setState = () => { diff --git a/src/components/theme/ThemeProvider.tsx b/src/components/theme/ThemeProvider.tsx index 6799388e93..69c276ee50 100644 --- a/src/components/theme/ThemeProvider.tsx +++ b/src/components/theme/ThemeProvider.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; -import {useIsomorphicLayoutEffect} from '../../hooks/private'; +import {useLayoutEffect} from '../../hooks/private'; import {PrivateLayoutProvider} from '../layout/LayoutProvider/LayoutProvider'; import type {PrivateLayoutProviderProps} from '../layout/LayoutProvider/LayoutProvider'; import {block} from '../utils/cn'; @@ -67,7 +67,7 @@ export function ThemeProvider({ const prevRootClassName = React.useRef(''); - useIsomorphicLayoutEffect(() => { + useLayoutEffect(() => { if (!scoped) { updateBodyClassName({ theme: themeValue, diff --git a/src/components/useList/hooks/useListKeydown.tsx b/src/components/useList/hooks/useListKeydown.tsx index 4a1c0f301f..d78b0d005e 100644 --- a/src/components/useList/hooks/useListKeydown.tsx +++ b/src/components/useList/hooks/useListKeydown.tsx @@ -1,5 +1,7 @@ import * as React from 'react'; +import {useLayoutEffect} from 'src/hooks/private'; + import {KeyCode} from '../../../constants'; import type {ListOnItemClick, UseListResult} from '../types'; import {findNextIndex} from '../utils/findNextIndex'; @@ -58,7 +60,7 @@ export const useListKeydown = ({containerRef, onItemClick, enabled, list}: UseLi ], ); - React.useLayoutEffect(() => { + useLayoutEffect(() => { const anchor = containerRef?.current; if (enabled || !anchor) { diff --git a/src/hooks/private/useCheckbox/useCheckbox.ts b/src/hooks/private/useCheckbox/useCheckbox.ts index c40045fffd..7843baee65 100644 --- a/src/hooks/private/useCheckbox/useCheckbox.ts +++ b/src/hooks/private/useCheckbox/useCheckbox.ts @@ -1,5 +1,7 @@ import * as React from 'react'; +import {useLayoutEffect} from 'src/hooks/private'; + import {useControlledState, useForkRef} from '../..'; import type {ControlProps} from '../../../components/types'; import {eventBroker} from '../../../components/utils/event-broker'; @@ -41,7 +43,7 @@ export function useCheckbox({ const handleRef = useForkRef(controlRef, innerControlRef, fieldRef); - React.useLayoutEffect(() => { + useLayoutEffect(() => { if (innerControlRef.current) { innerControlRef.current.indeterminate = Boolean(indeterminate); } diff --git a/src/hooks/private/useElementSize/useElementSize.ts b/src/hooks/private/useElementSize/useElementSize.ts index 18ca7656b4..492f08da00 100644 --- a/src/hooks/private/useElementSize/useElementSize.ts +++ b/src/hooks/private/useElementSize/useElementSize.ts @@ -3,6 +3,8 @@ import * as React from 'react'; import round from 'lodash/round'; import throttle from 'lodash/throttle'; +import {useLayoutEffect} from 'src/hooks/private'; + const RESIZE_THROTTLE = 16; const ROUND_PRECISION = 2; @@ -23,7 +25,7 @@ export function useElementSize( height: 0, }); - React.useLayoutEffect(() => { + useLayoutEffect(() => { const element = ref?.current; if (!element) { return undefined; diff --git a/src/hooks/private/useIsomorphicLayoutEffect/index.ts b/src/hooks/private/useIsomorphicLayoutEffect/index.ts index b76100dbb0..369d269151 100644 --- a/src/hooks/private/useIsomorphicLayoutEffect/index.ts +++ b/src/hooks/private/useIsomorphicLayoutEffect/index.ts @@ -1 +1 @@ -export {useIsomorphicLayoutEffect} from './useIsomorphicLayoutEffect'; +export {useLayoutEffect} from './useIsomorphicLayoutEffect'; diff --git a/src/hooks/private/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.ts b/src/hooks/private/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.ts index c7dc50419a..d9184c73cf 100644 --- a/src/hooks/private/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.ts +++ b/src/hooks/private/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.ts @@ -1,4 +1,3 @@ import * as React from 'react'; -export const useIsomorphicLayoutEffect = - typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect; +export const useLayoutEffect = typeof window === 'undefined' ? () => {} : React.useLayoutEffect; diff --git a/src/hooks/useListNavigation/useListNavigation.ts b/src/hooks/useListNavigation/useListNavigation.ts index 5571137ba0..c351235709 100644 --- a/src/hooks/useListNavigation/useListNavigation.ts +++ b/src/hooks/useListNavigation/useListNavigation.ts @@ -1,5 +1,7 @@ import * as React from 'react'; +import {useLayoutEffect} from 'src/hooks/private'; + import {KeyCode} from '../../constants'; import {moveBack} from './moveBack'; @@ -46,7 +48,7 @@ export function useListNavigation({ } }, [items, reset]); - React.useLayoutEffect(() => { + useLayoutEffect(() => { if (disabled) { return undefined; } From 9ec9922c04c335eed534c40e8d6171b524efadf0 Mon Sep 17 00:00:00 2001 From: monochromer Date: Wed, 19 Nov 2025 11:56:24 +0500 Subject: [PATCH 3/4] fix: use relative paths --- src/components/Breadcrumbs/Breadcrumbs.tsx | 3 +-- src/components/TreeSelect/TreeSelect.tsx | 3 +-- src/components/lab/Virtualizer/useLoadMore.tsx | 2 +- src/components/layout/hooks/useCurrentActiveMediaQuery.tsx | 3 +-- src/components/useList/hooks/useListKeydown.tsx | 3 +-- src/hooks/private/useCheckbox/useCheckbox.ts | 3 +-- src/hooks/private/useElementSize/useElementSize.ts | 2 +- src/hooks/useListNavigation/useListNavigation.ts | 3 +-- 8 files changed, 8 insertions(+), 14 deletions(-) diff --git a/src/components/Breadcrumbs/Breadcrumbs.tsx b/src/components/Breadcrumbs/Breadcrumbs.tsx index 3e10908547..470ea10c4b 100644 --- a/src/components/Breadcrumbs/Breadcrumbs.tsx +++ b/src/components/Breadcrumbs/Breadcrumbs.tsx @@ -2,9 +2,8 @@ import * as React from 'react'; -import {useLayoutEffect} from 'src/hooks/private'; - import {useForkRef, useResizeObserver} from '../../hooks'; +import {useLayoutEffect} from '../../hooks/private'; import type {PopupPlacement} from '../Popup'; import type {AriaLabelingProps, DOMProps, Key, QAProps} from '../types'; import {filterDOMProps} from '../utils/filterDOMProps'; diff --git a/src/components/TreeSelect/TreeSelect.tsx b/src/components/TreeSelect/TreeSelect.tsx index 464d702cd1..7d4ed3e1a7 100644 --- a/src/components/TreeSelect/TreeSelect.tsx +++ b/src/components/TreeSelect/TreeSelect.tsx @@ -2,9 +2,8 @@ import * as React from 'react'; -import {useLayoutEffect} from 'src/hooks/private'; - import {useFocusWithin, useForkRef, useUniqId} from '../../hooks'; +import {useLayoutEffect} from '../../hooks/private'; import {useOpenState} from '../../hooks/useSelect/useOpenState'; import {SelectControl} from '../Select/components'; import {SelectPopup} from '../Select/components/SelectPopup/SelectPopup'; diff --git a/src/components/lab/Virtualizer/useLoadMore.tsx b/src/components/lab/Virtualizer/useLoadMore.tsx index 3ff2eaa3f0..710380c5d2 100644 --- a/src/components/lab/Virtualizer/useLoadMore.tsx +++ b/src/components/lab/Virtualizer/useLoadMore.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import {useLayoutEffect} from 'src/hooks/private'; +import {useLayoutEffect} from '../../../hooks/private'; export interface Loadable { /** Whether the items are currently loading. */ diff --git a/src/components/layout/hooks/useCurrentActiveMediaQuery.tsx b/src/components/layout/hooks/useCurrentActiveMediaQuery.tsx index e63ffe7c71..d86d17ebea 100644 --- a/src/components/layout/hooks/useCurrentActiveMediaQuery.tsx +++ b/src/components/layout/hooks/useCurrentActiveMediaQuery.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; -import {useLayoutEffect} from 'src/hooks/private'; - +import {useLayoutEffect} from '../../../hooks/private'; import type {MediaProps, MediaType} from '../types'; export const mockMediaQueryList: MediaQueryList = { diff --git a/src/components/useList/hooks/useListKeydown.tsx b/src/components/useList/hooks/useListKeydown.tsx index d78b0d005e..d4061066c6 100644 --- a/src/components/useList/hooks/useListKeydown.tsx +++ b/src/components/useList/hooks/useListKeydown.tsx @@ -1,8 +1,7 @@ import * as React from 'react'; -import {useLayoutEffect} from 'src/hooks/private'; - import {KeyCode} from '../../../constants'; +import {useLayoutEffect} from '../../../hooks/private'; import type {ListOnItemClick, UseListResult} from '../types'; import {findNextIndex} from '../utils/findNextIndex'; import {scrollToListItem} from '../utils/scrollToListItem'; diff --git a/src/hooks/private/useCheckbox/useCheckbox.ts b/src/hooks/private/useCheckbox/useCheckbox.ts index 7843baee65..2f5ec1c201 100644 --- a/src/hooks/private/useCheckbox/useCheckbox.ts +++ b/src/hooks/private/useCheckbox/useCheckbox.ts @@ -1,7 +1,6 @@ import * as React from 'react'; -import {useLayoutEffect} from 'src/hooks/private'; - +import {useLayoutEffect} from '../'; import {useControlledState, useForkRef} from '../..'; import type {ControlProps} from '../../../components/types'; import {eventBroker} from '../../../components/utils/event-broker'; diff --git a/src/hooks/private/useElementSize/useElementSize.ts b/src/hooks/private/useElementSize/useElementSize.ts index 492f08da00..7d4142870c 100644 --- a/src/hooks/private/useElementSize/useElementSize.ts +++ b/src/hooks/private/useElementSize/useElementSize.ts @@ -3,7 +3,7 @@ import * as React from 'react'; import round from 'lodash/round'; import throttle from 'lodash/throttle'; -import {useLayoutEffect} from 'src/hooks/private'; +import {useLayoutEffect} from '../'; const RESIZE_THROTTLE = 16; const ROUND_PRECISION = 2; diff --git a/src/hooks/useListNavigation/useListNavigation.ts b/src/hooks/useListNavigation/useListNavigation.ts index c351235709..3be64b2083 100644 --- a/src/hooks/useListNavigation/useListNavigation.ts +++ b/src/hooks/useListNavigation/useListNavigation.ts @@ -1,8 +1,7 @@ import * as React from 'react'; -import {useLayoutEffect} from 'src/hooks/private'; - import {KeyCode} from '../../constants'; +import {useLayoutEffect} from '../private'; import {moveBack} from './moveBack'; import {moveForward} from './moveForward'; From 6007a57c6b4c86445dd7ae21b4482e74e5b2e018 Mon Sep 17 00:00:00 2001 From: monochromer Date: Wed, 19 Nov 2025 21:11:35 +0500 Subject: [PATCH 4/4] fix: move hook to public --- eslint.config.mjs | 5 +++++ src/components/Breadcrumbs/Breadcrumbs.tsx | 3 +-- src/components/TreeSelect/TreeSelect.tsx | 3 +-- src/components/lab/Virtualizer/useLoadMore.tsx | 2 +- src/components/layout/hooks/useCurrentActiveMediaQuery.tsx | 2 +- src/components/theme/ThemeProvider.tsx | 2 +- src/components/useList/hooks/useListKeydown.tsx | 2 +- src/hooks/index.ts | 1 + src/hooks/private/index.ts | 1 - src/hooks/private/useCheckbox/useCheckbox.ts | 3 +-- src/hooks/private/useElementSize/useElementSize.ts | 2 +- src/hooks/private/useIsomorphicLayoutEffect/index.ts | 1 - src/hooks/useLayoutEffect/index.ts | 1 + .../useLayoutEffect.ts} | 1 + src/hooks/useListNavigation/useListNavigation.ts | 2 +- 15 files changed, 17 insertions(+), 14 deletions(-) delete mode 100644 src/hooks/private/useIsomorphicLayoutEffect/index.ts create mode 100644 src/hooks/useLayoutEffect/index.ts rename src/hooks/{private/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.ts => useLayoutEffect/useLayoutEffect.ts} (72%) diff --git a/eslint.config.mjs b/eslint.config.mjs index 2f127aa2b0..fd789dbd7a 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -38,6 +38,11 @@ export default defineConfig([ selector: "MemberExpression[object.name='React'][property.name='useId']", message: "Please use 'src/hooks/useUniqId' instead.", }, + { + selector: + "MemberExpression[object.name='React'][property.name='useLayoutEffect']", + message: "Please use 'src/hooks/useLayoutEffect' instead.", + }, ], 'jsx-a11y/no-autofocus': 'off', 'import/no-extraneous-dependencies': 'off', diff --git a/src/components/Breadcrumbs/Breadcrumbs.tsx b/src/components/Breadcrumbs/Breadcrumbs.tsx index 470ea10c4b..ca9dce00ca 100644 --- a/src/components/Breadcrumbs/Breadcrumbs.tsx +++ b/src/components/Breadcrumbs/Breadcrumbs.tsx @@ -2,8 +2,7 @@ import * as React from 'react'; -import {useForkRef, useResizeObserver} from '../../hooks'; -import {useLayoutEffect} from '../../hooks/private'; +import {useForkRef, useLayoutEffect, useResizeObserver} from '../../hooks'; import type {PopupPlacement} from '../Popup'; import type {AriaLabelingProps, DOMProps, Key, QAProps} from '../types'; import {filterDOMProps} from '../utils/filterDOMProps'; diff --git a/src/components/TreeSelect/TreeSelect.tsx b/src/components/TreeSelect/TreeSelect.tsx index 7d4ed3e1a7..f082f04723 100644 --- a/src/components/TreeSelect/TreeSelect.tsx +++ b/src/components/TreeSelect/TreeSelect.tsx @@ -2,8 +2,7 @@ import * as React from 'react'; -import {useFocusWithin, useForkRef, useUniqId} from '../../hooks'; -import {useLayoutEffect} from '../../hooks/private'; +import {useFocusWithin, useForkRef, useLayoutEffect, useUniqId} from '../../hooks'; import {useOpenState} from '../../hooks/useSelect/useOpenState'; import {SelectControl} from '../Select/components'; import {SelectPopup} from '../Select/components/SelectPopup/SelectPopup'; diff --git a/src/components/lab/Virtualizer/useLoadMore.tsx b/src/components/lab/Virtualizer/useLoadMore.tsx index 710380c5d2..31e6fadaad 100644 --- a/src/components/lab/Virtualizer/useLoadMore.tsx +++ b/src/components/lab/Virtualizer/useLoadMore.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import {useLayoutEffect} from '../../../hooks/private'; +import {useLayoutEffect} from '../../../hooks/'; export interface Loadable { /** Whether the items are currently loading. */ diff --git a/src/components/layout/hooks/useCurrentActiveMediaQuery.tsx b/src/components/layout/hooks/useCurrentActiveMediaQuery.tsx index d86d17ebea..f95881f8dc 100644 --- a/src/components/layout/hooks/useCurrentActiveMediaQuery.tsx +++ b/src/components/layout/hooks/useCurrentActiveMediaQuery.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import {useLayoutEffect} from '../../../hooks/private'; +import {useLayoutEffect} from '../../../hooks'; import type {MediaProps, MediaType} from '../types'; export const mockMediaQueryList: MediaQueryList = { diff --git a/src/components/theme/ThemeProvider.tsx b/src/components/theme/ThemeProvider.tsx index 69c276ee50..f061969411 100644 --- a/src/components/theme/ThemeProvider.tsx +++ b/src/components/theme/ThemeProvider.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; -import {useLayoutEffect} from '../../hooks/private'; +import {useLayoutEffect} from '../../hooks'; import {PrivateLayoutProvider} from '../layout/LayoutProvider/LayoutProvider'; import type {PrivateLayoutProviderProps} from '../layout/LayoutProvider/LayoutProvider'; import {block} from '../utils/cn'; diff --git a/src/components/useList/hooks/useListKeydown.tsx b/src/components/useList/hooks/useListKeydown.tsx index d4061066c6..65da9851b5 100644 --- a/src/components/useList/hooks/useListKeydown.tsx +++ b/src/components/useList/hooks/useListKeydown.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import {KeyCode} from '../../../constants'; -import {useLayoutEffect} from '../../../hooks/private'; +import {useLayoutEffect} from '../../../hooks'; import type {ListOnItemClick, UseListResult} from '../types'; import {findNextIndex} from '../utils/findNextIndex'; import {scrollToListItem} from '../utils/scrollToListItem'; diff --git a/src/hooks/index.ts b/src/hooks/index.ts index e5e67492c2..3e6aaed402 100644 --- a/src/hooks/index.ts +++ b/src/hooks/index.ts @@ -14,3 +14,4 @@ export * from './useTimeout'; export * from './useViewportSize'; export * from './useVirtualElementRef'; export * from './useUniqId'; +export * from './useLayoutEffect'; diff --git a/src/hooks/private/index.ts b/src/hooks/private/index.ts index 85a8d9675b..315c180e75 100644 --- a/src/hooks/private/index.ts +++ b/src/hooks/private/index.ts @@ -10,4 +10,3 @@ export * from './usePrevious'; export * from './useRadio'; export * from './useRadioGroup'; export * from './useUpdateEffect'; -export * from './useIsomorphicLayoutEffect'; diff --git a/src/hooks/private/useCheckbox/useCheckbox.ts b/src/hooks/private/useCheckbox/useCheckbox.ts index 5614a4d5ec..177761939b 100644 --- a/src/hooks/private/useCheckbox/useCheckbox.ts +++ b/src/hooks/private/useCheckbox/useCheckbox.ts @@ -1,7 +1,6 @@ import * as React from 'react'; -import {useLayoutEffect} from '../'; -import {useControlledState, useForkRef} from '../..'; +import {useControlledState, useForkRef, useLayoutEffect} from '../..'; import type {ControlProps} from '../../../components/types'; import {eventBroker} from '../../../components/utils/event-broker'; import {useFormResetHandler} from '../useFormResetHandler'; diff --git a/src/hooks/private/useElementSize/useElementSize.ts b/src/hooks/private/useElementSize/useElementSize.ts index 7d4142870c..cccbdef110 100644 --- a/src/hooks/private/useElementSize/useElementSize.ts +++ b/src/hooks/private/useElementSize/useElementSize.ts @@ -3,7 +3,7 @@ import * as React from 'react'; import round from 'lodash/round'; import throttle from 'lodash/throttle'; -import {useLayoutEffect} from '../'; +import {useLayoutEffect} from '../..'; const RESIZE_THROTTLE = 16; const ROUND_PRECISION = 2; diff --git a/src/hooks/private/useIsomorphicLayoutEffect/index.ts b/src/hooks/private/useIsomorphicLayoutEffect/index.ts deleted file mode 100644 index 369d269151..0000000000 --- a/src/hooks/private/useIsomorphicLayoutEffect/index.ts +++ /dev/null @@ -1 +0,0 @@ -export {useLayoutEffect} from './useIsomorphicLayoutEffect'; diff --git a/src/hooks/useLayoutEffect/index.ts b/src/hooks/useLayoutEffect/index.ts new file mode 100644 index 0000000000..a826d65204 --- /dev/null +++ b/src/hooks/useLayoutEffect/index.ts @@ -0,0 +1 @@ +export {useLayoutEffect} from './useLayoutEffect'; diff --git a/src/hooks/private/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.ts b/src/hooks/useLayoutEffect/useLayoutEffect.ts similarity index 72% rename from src/hooks/private/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.ts rename to src/hooks/useLayoutEffect/useLayoutEffect.ts index d9184c73cf..4452fa3e79 100644 --- a/src/hooks/private/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.ts +++ b/src/hooks/useLayoutEffect/useLayoutEffect.ts @@ -1,3 +1,4 @@ import * as React from 'react'; +// eslint-disable-next-line no-restricted-syntax export const useLayoutEffect = typeof window === 'undefined' ? () => {} : React.useLayoutEffect; diff --git a/src/hooks/useListNavigation/useListNavigation.ts b/src/hooks/useListNavigation/useListNavigation.ts index 3be64b2083..e9ce432517 100644 --- a/src/hooks/useListNavigation/useListNavigation.ts +++ b/src/hooks/useListNavigation/useListNavigation.ts @@ -1,7 +1,7 @@ import * as React from 'react'; +import {useLayoutEffect} from '../..'; import {KeyCode} from '../../constants'; -import {useLayoutEffect} from '../private'; import {moveBack} from './moveBack'; import {moveForward} from './moveForward';