fix: add isomorphic version of useLayoutEffect hook to fix SSR warnings

src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -3,6 +3,7 @@
 import * as React from 'react';
 
 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';
@@ -131,15 +132,15 @@ export const Breadcrumbs = React.forwardRef(function Breadcrumbs(
     });
 
     const lastChildren = React.useRef<typeof props.children | null>(null);
-    React.useLayoutEffect(() => {
+    useLayoutEffect(() => {
         if (calculated && props.children !== lastChildren.current) {
             lastChildren.current = props.children;
             setVisibleItemsCount(items.length);
             setCalculated(false);
         }
     }, [calculated, items.length, props.children]);
 
-    React.useLayoutEffect(() => {
+    useLayoutEffect(() => {
         if (!calculated) {
             recalculate(visibleItemsCount);
         }

src/components/TreeSelect/TreeSelect.tsx

@@ -3,6 +3,7 @@
 import * as React from 'react';
 
 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';
@@ -147,7 +148,7 @@ export const TreeSelect = React.forwardRef(function TreeSelect<T, P extends {} =
     }, [onItemClick, list, multiple, toggleOpen]);
 
     // restoring focus when popup opens
-    React.useLayoutEffect(() => {
+    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});

src/components/lab/Virtualizer/useLoadMore.tsx

@@ -1,5 +1,7 @@
 import * as React from 'react';
 
+import {useLayoutEffect} from '../../../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;

src/components/layout/hooks/useCurrentActiveMediaQuery.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 
+import {useLayoutEffect} from '../../../hooks/private';
 import type {MediaProps, MediaType} from '../types';
 
 export const mockMediaQueryList: MediaQueryList = {
@@ -88,7 +89,7 @@ export const useCurrentActiveMediaQuery = (
         initialMediaQuery ?? (fixBreakpoints ? 'xs' : 's'),
     );
 
-    React.useLayoutEffect(() => {
+    useLayoutEffect(() => {
         const queries = new Queries(breakpointsMap, fixBreakpoints);
 
         const setState = () => {

src/components/theme/ThemeProvider.tsx

@@ -2,6 +2,7 @@
 
 import * as React from 'react';
 
+import {useLayoutEffect} 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(() => {
+    useLayoutEffect(() => {
         if (!scoped) {
             updateBodyClassName({
                 theme: themeValue,

src/components/useList/hooks/useListKeydown.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 
 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';
@@ -58,7 +59,7 @@ export const useListKeydown = ({containerRef, onItemClick, enabled, list}: UseLi
         ],
     );
 
-    React.useLayoutEffect(() => {
+    useLayoutEffect(() => {
         const anchor = containerRef?.current;
 
         if (enabled || !anchor) {

src/hooks/private/index.ts

@@ -10,3 +10,4 @@ export * from './usePrevious';
 export * from './useRadio';
 export * from './useRadioGroup';
 export * from './useUpdateEffect';
+export * from './useIsomorphicLayoutEffect';

src/hooks/private/useCheckbox/useCheckbox.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 
+import {useLayoutEffect} from '../';
 import {useControlledState, useForkRef} from '../..';
 import type {ControlProps} from '../../../components/types';
 import {eventBroker} from '../../../components/utils/event-broker';
@@ -40,7 +41,7 @@ export function useCheckbox({
 
     const handleRef = useForkRef(controlRef, innerControlRef, fieldRef);
 
-    React.useLayoutEffect(() => {
+    useLayoutEffect(() => {
         if (innerControlRef.current) {
             innerControlRef.current.indeterminate = Boolean(indeterminate);
         }

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 '../';
+
 const RESIZE_THROTTLE = 16;
 const ROUND_PRECISION = 2;
 
@@ -23,7 +25,7 @@ export function useElementSize<T extends HTMLElement = HTMLDivElement>(
         height: 0,
     });
 
-    React.useLayoutEffect(() => {
+    useLayoutEffect(() => {
         const element = ref?.current;
         if (!element) {
             return undefined;

src/hooks/private/useIsomorphicLayoutEffect/index.ts

@@ -0,0 +1 @@
+export {useLayoutEffect} from './useIsomorphicLayoutEffect';

src/hooks/private/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+
+export const useLayoutEffect = typeof window === 'undefined' ? () => {} : React.useLayoutEffect;

src/hooks/useListNavigation/useListNavigation.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 
 import {KeyCode} from '../../constants';
+import {useLayoutEffect} from '../private';
 
 import {moveBack} from './moveBack';
 import {moveForward} from './moveForward';
@@ -46,7 +47,7 @@ export function useListNavigation<ItemType, AnchorType extends HTMLElement>({
         }
     }, [items, reset]);
 
-    React.useLayoutEffect(() => {
+    useLayoutEffect(() => {
         if (disabled) {
             return undefined;
         }