@itwin/itwinui-react 3.0.0-dev.0 → 3.0.0-dev.10

package/esm/core/utils/functions/react.js

@@ -0,0 +1,35 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+import { mergeRefs } from '../hooks/useMergedRefs.js';
+/**
+ * Wrapper over `cloneElement` that automatically checks for `isValidElement`
+ * and automatically merges `children.ref` with the ref passed in props.
+ *
+ * @private
+ */
+export const cloneElementWithRef = (children, getProps) => {
+  if (!children) {
+    return null;
+  }
+  if (!React.isValidElement(children)) {
+    return children;
+  }
+  const props = getProps(children);
+  const ref = mergeRefs(
+    ...[
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      'ref' in children ? children.ref : null,
+      'ref' in props ? props.ref : null,
+    ].filter(Boolean),
+  );
+  return React.cloneElement(children, {
+    ...props,
+    // we already checked ref above and handled null, so ts-ignore is ok
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    ref,
+  });
+};

package/esm/core/utils/functions/supports.js

@@ -6,4 +6,5 @@ import { getWindow } from './dom.js';
 /**
  * Returns true if the :has selector is supported in the browser
  */
-export const supportsHas = () => { var _a, _b, _c; return (_c = (_b = (_a = getWindow()) === null || _a === void 0 ? void 0 : _a.CSS) === null || _b === void 0 ? void 0 : _b.supports) === null || _c === void 0 ? void 0 : _c.call(_b, 'selector(:has(+ *))'); };
+export const supportsHas = () =>
+  getWindow()?.CSS?.supports?.('selector(:has(+ *))');

package/esm/core/utils/hooks/index.d.ts

@@ -9,6 +9,6 @@ export * from './useMediaQuery.js';
 export * from './useSafeContext.js';
 export * from './useLatestRef.js';
 export * from './useIsomorphicLayoutEffect.js';
-export * from './useIsThemeAlreadySet.js';
 export * from './useIsClient.js';
 export * from './useId.js';
+export * from './useControlledState.js';

package/esm/core/utils/hooks/index.js

@@ -13,6 +13,6 @@ export * from './useMediaQuery.js';
 export * from './useSafeContext.js';
 export * from './useLatestRef.js';
 export * from './useIsomorphicLayoutEffect.js';
-export * from './useIsThemeAlreadySet.js';
 export * from './useIsClient.js';
 export * from './useId.js';
+export * from './useControlledState.js';

package/esm/core/utils/hooks/useContainerWidth.js

@@ -21,19 +21,22 @@ import { useResizeObserver } from './useResizeObserver.js';
  * return <div ref={ref}>...</div>;
  */
 export const useContainerWidth = (watchResizes = true) => {
-    const [contentWidth, setContentWidth] = React.useState(0);
-    const ref = React.useCallback((element) => {
-        if (!element) {
-            return;
-        }
-        setContentWidth(element.getBoundingClientRect().width);
-    }, []);
-    const updateWidth = React.useCallback(({ width }) => setContentWidth(width), []);
-    const [resizeRef, resizeObserver] = useResizeObserver(updateWidth);
-    if (!watchResizes) {
-        resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
+  const [contentWidth, setContentWidth] = React.useState(0);
+  const ref = React.useCallback((element) => {
+    if (!element) {
+      return;
     }
-    const refs = useMergedRefs(ref, watchResizes ? resizeRef : undefined);
-    return [refs, contentWidth];
+    setContentWidth(element.getBoundingClientRect().width);
+  }, []);
+  const updateWidth = React.useCallback(
+    ({ width }) => setContentWidth(width),
+    [],
+  );
+  const [resizeRef, resizeObserver] = useResizeObserver(updateWidth);
+  if (!watchResizes) {
+    resizeObserver?.disconnect();
+  }
+  const refs = useMergedRefs(ref, watchResizes ? resizeRef : undefined);
+  return [refs, contentWidth];
 };
 export default useContainerWidth;

package/esm/core/utils/hooks/useControlledState.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+/**
+ * Wrapper over `useState` that always gives preference to the
+ * controlled state (which often comes from a prop).
+ *
+ * This is helpful when a component needs to support both uncontrolled
+ * and controlled states. If controlled value/setter is not passed,
+ * then it will work just like a regular `useState`.
+ *
+ * @example
+ * const [state, setState] = useControlledState(null, props.value, props.onChange);
+ */
+export declare const useControlledState: <T>(initialValue: T, controlledState: T, setControlledState?: React.Dispatch<React.SetStateAction<T>> | undefined) => readonly [T, React.Dispatch<React.SetStateAction<T>>];

package/esm/core/utils/hooks/useControlledState.js

@@ -0,0 +1,34 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+/**
+ * Wrapper over `useState` that always gives preference to the
+ * controlled state (which often comes from a prop).
+ *
+ * This is helpful when a component needs to support both uncontrolled
+ * and controlled states. If controlled value/setter is not passed,
+ * then it will work just like a regular `useState`.
+ *
+ * @example
+ * const [state, setState] = useControlledState(null, props.value, props.onChange);
+ */
+export const useControlledState = (
+  initialValue,
+  controlledState,
+  setControlledState,
+) => {
+  const [uncontrolledState, setUncontrolledState] =
+    React.useState(initialValue);
+  const state =
+    controlledState !== undefined ? controlledState : uncontrolledState;
+  const setState = React.useCallback(
+    (value) => {
+      setUncontrolledState(value);
+      setControlledState?.(value);
+    },
+    [setControlledState, setUncontrolledState],
+  );
+  return [state, setState];
+};

package/esm/core/utils/hooks/useDragAndDrop.js

@@ -7,14 +7,13 @@ import { getTranslateValues, getWindow } from '../functions/index.js';
 import { useEventListener } from './useEventListener.js';
 import { useResizeObserver } from './useResizeObserver.js';
 const getContainerRect = (containerRef) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    const containerRect = (_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-    return {
-        top: (_b = containerRect === null || containerRect === void 0 ? void 0 : containerRect.top) !== null && _b !== void 0 ? _b : 0,
-        right: (_e = (_c = containerRect === null || containerRect === void 0 ? void 0 : containerRect.right) !== null && _c !== void 0 ? _c : (_d = getWindow()) === null || _d === void 0 ? void 0 : _d.innerWidth) !== null && _e !== void 0 ? _e : 0,
-        bottom: (_h = (_f = containerRect === null || containerRect === void 0 ? void 0 : containerRect.bottom) !== null && _f !== void 0 ? _f : (_g = getWindow()) === null || _g === void 0 ? void 0 : _g.innerHeight) !== null && _h !== void 0 ? _h : 0,
-        left: (_j = containerRect === null || containerRect === void 0 ? void 0 : containerRect.left) !== null && _j !== void 0 ? _j : 0,
-    };
+  const containerRect = containerRef?.current?.getBoundingClientRect();
+  return {
+    top: containerRect?.top ?? 0,
+    right: containerRect?.right ?? getWindow()?.innerWidth ?? 0,
+    bottom: containerRect?.bottom ?? getWindow()?.innerHeight ?? 0,
+    left: containerRect?.left ?? 0,
+  };
 };
 /**
  * Helper hook that handles elements drag logic.
@@ -25,79 +24,97 @@ const getContainerRect = (containerRef) => {
  * `transform` - current transform of the element, it is used to preserve drag position when element visibility is being toggled.
  */
 export const useDragAndDrop = (elementRef, containerRef, enabled = true) => {
-    const grabOffsetX = React.useRef(0);
-    const grabOffsetY = React.useRef(0);
-    const translateX = React.useRef();
-    const translateY = React.useRef();
-    const containerRectRef = React.useRef(getContainerRect(containerRef));
-    const adjustTransform = React.useCallback(() => {
-        var _a;
-        if (!elementRef.current || !enabled) {
-            return;
-        }
-        const { top, right, bottom, left } = (_a = elementRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-        let [newTranslateX, newTranslateY] = getTranslateValues(elementRef.current);
-        containerRectRef.current = getContainerRect(containerRef);
-        if (bottom > containerRectRef.current.bottom) {
-            newTranslateY -= bottom - containerRectRef.current.bottom;
-        }
-        if (top < containerRectRef.current.top) {
-            newTranslateY += containerRectRef.current.top - top;
-        }
-        if (right > containerRectRef.current.right) {
-            newTranslateX -= right - containerRectRef.current.right;
-        }
-        if (left < containerRectRef.current.left) {
-            newTranslateX += containerRectRef.current.left - left;
-        }
-        translateX.current = newTranslateX;
-        translateY.current = newTranslateY;
-        elementRef.current.style.transform = `translate(${newTranslateX}px, ${newTranslateY}px)`;
-    }, [containerRef, elementRef, enabled]);
-    const [resizeRef, resizeObserver] = useResizeObserver(adjustTransform);
-    resizeRef(containerRef === null || containerRef === void 0 ? void 0 : containerRef.current);
-    React.useEffect(() => {
-        return () => {
-            resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
-        };
-    }, [resizeObserver]);
-    useEventListener('resize', () => {
-        adjustTransform();
-        if (translateX.current != null && translateY.current != null) {
-            setTransform(`translate(${translateX.current}px, ${translateY.current}px)`);
-        }
-    }, getWindow());
-    const [transform, setTransform] = React.useState('');
-    const onPointerMove = React.useRef((event) => {
-        if (!elementRef.current) {
-            return;
-        }
-        const newTranslateX = event.clientX - grabOffsetX.current;
-        const newTranslateY = event.clientY - grabOffsetY.current;
-        elementRef.current.style.transform = `translate(${newTranslateX}px, ${newTranslateY}px)`;
-        adjustTransform();
-    });
-    const originalUserSelect = React.useRef('');
-    const onPointerDown = React.useCallback((e) => {
-        if (!elementRef.current || e.button !== 0 || !enabled) {
-            return;
-        }
-        const [x, y] = getTranslateValues(elementRef.current);
-        grabOffsetX.current = e.clientX - x;
-        grabOffsetY.current = e.clientY - y;
-        originalUserSelect.current = elementRef.current.style.userSelect;
-        // Prevents from selecting inner content when dragging.
-        elementRef.current.style.userSelect = 'none';
-        const ownerDocument = elementRef.current.ownerDocument || document;
-        ownerDocument.addEventListener('pointermove', onPointerMove.current);
-        ownerDocument.addEventListener('pointerup', () => {
-            setTransform(`translate(${translateX.current}px, ${translateY.current}px)`);
-            ownerDocument.removeEventListener('pointermove', onPointerMove.current);
-            if (elementRef.current) {
-                elementRef.current.style.userSelect = originalUserSelect.current;
-            }
-        }, { once: true });
-    }, [elementRef, enabled]);
-    return { onPointerDown, transform };
+  const grabOffsetX = React.useRef(0);
+  const grabOffsetY = React.useRef(0);
+  const translateX = React.useRef();
+  const translateY = React.useRef();
+  const containerRectRef = React.useRef(getContainerRect(containerRef));
+  const adjustTransform = React.useCallback(() => {
+    if (!elementRef.current || !enabled) {
+      return;
+    }
+    const { top, right, bottom, left } =
+      elementRef.current?.getBoundingClientRect();
+    let [newTranslateX, newTranslateY] = getTranslateValues(elementRef.current);
+    containerRectRef.current = getContainerRect(containerRef);
+    if (bottom > containerRectRef.current.bottom) {
+      newTranslateY -= bottom - containerRectRef.current.bottom;
+    }
+    if (top < containerRectRef.current.top) {
+      newTranslateY += containerRectRef.current.top - top;
+    }
+    if (right > containerRectRef.current.right) {
+      newTranslateX -= right - containerRectRef.current.right;
+    }
+    if (left < containerRectRef.current.left) {
+      newTranslateX += containerRectRef.current.left - left;
+    }
+    translateX.current = newTranslateX;
+    translateY.current = newTranslateY;
+    elementRef.current.style.transform = `translate(${newTranslateX}px, ${newTranslateY}px)`;
+  }, [containerRef, elementRef, enabled]);
+  const [resizeRef, resizeObserver] = useResizeObserver(adjustTransform);
+  resizeRef(containerRef?.current);
+  React.useEffect(() => {
+    return () => {
+      resizeObserver?.disconnect();
+    };
+  }, [resizeObserver]);
+  useEventListener(
+    'resize',
+    () => {
+      adjustTransform();
+      if (translateX.current != null && translateY.current != null) {
+        setTransform(
+          `translate(${translateX.current}px, ${translateY.current}px)`,
+        );
+      }
+    },
+    getWindow(),
+  );
+  const [transform, setTransform] = React.useState('');
+  const onPointerMove = React.useRef((event) => {
+    if (!elementRef.current) {
+      return;
+    }
+    const newTranslateX = event.clientX - grabOffsetX.current;
+    const newTranslateY = event.clientY - grabOffsetY.current;
+    elementRef.current.style.transform = `translate(${newTranslateX}px, ${newTranslateY}px)`;
+    adjustTransform();
+  });
+  const originalUserSelect = React.useRef('');
+  const onPointerDown = React.useCallback(
+    (e) => {
+      if (!elementRef.current || e.button !== 0 || !enabled) {
+        return;
+      }
+      const [x, y] = getTranslateValues(elementRef.current);
+      grabOffsetX.current = e.clientX - x;
+      grabOffsetY.current = e.clientY - y;
+      originalUserSelect.current = elementRef.current.style.userSelect;
+      // Prevents from selecting inner content when dragging.
+      elementRef.current.style.userSelect = 'none';
+      const ownerDocument = elementRef.current.ownerDocument || document;
+      ownerDocument.addEventListener('pointermove', onPointerMove.current);
+      ownerDocument.addEventListener(
+        'pointerup',
+        () => {
+          setTransform(
+            `translate(${translateX.current}px, ${translateY.current}px)`,
+          );
+          ownerDocument.removeEventListener(
+            'pointermove',
+            onPointerMove.current,
+          );
+          if (elementRef.current) {
+            elementRef.current.style.userSelect = originalUserSelect.current;
+          }
+        },
+        { once: true },
+      );
+    },
+    [elementRef, enabled],
+  );
+  return { onPointerDown, transform };
 };
 export default useDragAndDrop;

package/esm/core/utils/hooks/useEventListener.js

@@ -13,22 +13,22 @@ import * as React from 'react';
  *  );
  */
 export const useEventListener = (eventName, handler, element) => {
-    // Based on published hook https://usehooks.com/useEventListener/.
-    const savedHandler = React.useRef();
-    // Update reference if handler changes. This allows our effect below to
-    // always use latest handler without us needing to pass it in effect deps array
-    // and potentially cause effect to re-run every render.
-    React.useEffect(() => {
-        savedHandler.current = handler;
-    }, [handler]);
-    React.useEffect(() => {
-        if (!element) {
-            return;
-        }
-        const eventListener = (event) => { var _a; return (_a = savedHandler.current) === null || _a === void 0 ? void 0 : _a.call(savedHandler, event); };
-        element.addEventListener(eventName, eventListener);
-        return () => {
-            element.removeEventListener(eventName, eventListener);
-        };
-    }, [eventName, element]);
+  // Based on published hook https://usehooks.com/useEventListener/.
+  const savedHandler = React.useRef();
+  // Update reference if handler changes. This allows our effect below to
+  // always use latest handler without us needing to pass it in effect deps array
+  // and potentially cause effect to re-run every render.
+  React.useEffect(() => {
+    savedHandler.current = handler;
+  }, [handler]);
+  React.useEffect(() => {
+    if (!element) {
+      return;
+    }
+    const eventListener = (event) => savedHandler.current?.(event);
+    element.addEventListener(eventName, eventListener);
+    return () => {
+      element.removeEventListener(eventName, eventListener);
+    };
+  }, [eventName, element]);
 };

package/esm/core/utils/hooks/useGlobals.d.ts

@@ -1,10 +1,15 @@
-import '@itwin/itwinui-css/css/global.css';
-import '@itwin/itwinui-variables/index.css';
+import * as React from 'react';
+import { ThemeContext } from '../../ThemeProvider/ThemeContext.js';
 /**
  * Hook used in every component for any shared setup and side effects.
+ * Returns the nearest ThemeContext.
  *
  * @private
  */
-export declare const useGlobals: () => void;
+export declare const useGlobals: () => {
+    theme?: import("../../index.js").ThemeType | undefined;
+    themeOptions?: import("../../ThemeProvider/ThemeProvider.js").ThemeOptions | undefined;
+    portalContainer?: HTMLElement | null | undefined;
+} | undefined;
 /** Shows console error if ThemeProvider is not used */
-export declare const useThemeProviderWarning: () => void;
+export declare const useThemeProviderWarning: (themeContext: React.ContextType<typeof ThemeContext>) => void;

package/esm/core/utils/hooks/useGlobals.js

@@ -3,49 +3,50 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import '@itwin/itwinui-css/css/global.css';
-import '@itwin/itwinui-variables/index.css';
 import { ThemeContext } from '../../ThemeProvider/ThemeContext.js';
-let isDev = false;
-// wrapping in try-catch because process might be undefined
-try {
-    isDev = process.env.NODE_ENV !== 'production';
-}
-catch (_a) { }
+import { isDev } from '../functions/dev.js';
 const didLogWarning = {
-    fontSize: false,
-    themeProvider: false,
+  fontSize: false,
+  themeProvider: false,
 };
 /**
  * Hook used in every component for any shared setup and side effects.
+ * Returns the nearest ThemeContext.
  *
  * @private
  */
 export const useGlobals = () => {
-    useThemeProviderWarning();
-    useRootFontSizeWarning();
+  const themeContext = React.useContext(ThemeContext);
+  useThemeProviderWarning(themeContext);
+  useRootFontSizeWarning();
+  return themeContext;
 };
 // ----------------------------------------------------------------------------
 /** Shows console error if ThemeProvider is not used */
-export const useThemeProviderWarning = () => {
-    const themeContext = React.useContext(ThemeContext);
-    React.useEffect(() => {
-        if (isDev && !didLogWarning.themeProvider && !themeContext) {
-            console.error('iTwinUI components must be used within a tree wrapped in a ThemeProvider.');
-            didLogWarning.themeProvider = true;
-        }
-    }, [themeContext]);
+export const useThemeProviderWarning = (themeContext) => {
+  React.useEffect(() => {
+    if (isDev && !didLogWarning.themeProvider && !themeContext) {
+      console.error(
+        'iTwinUI components must be used within a tree wrapped in a ThemeProvider.',
+      );
+      didLogWarning.themeProvider = true;
+    }
+  }, [themeContext]);
 };
 // ----------------------------------------------------------------------------
 /** Shows console error if the page changes the root font size */
 const useRootFontSizeWarning = () => {
-    React.useEffect(() => {
-        if (isDev && !didLogWarning.fontSize) {
-            const rootFontSize = parseInt(getComputedStyle(document.documentElement).fontSize);
-            if (rootFontSize < 16) {
-                console.error('Root font size must not be overridden. \nSee https://github.com/iTwin/iTwinUI/wiki/iTwinUI-react-v2-migration-guide#relative-font-size');
-            }
-            didLogWarning.fontSize = true;
-        }
-    }, []);
+  React.useEffect(() => {
+    if (isDev && !didLogWarning.fontSize) {
+      const rootFontSize = parseInt(
+        getComputedStyle(document.documentElement).fontSize,
+      );
+      if (rootFontSize < 16) {
+        console.error(
+          'Root font size must not be overridden. \nSee https://github.com/iTwin/iTwinUI/wiki/iTwinUI-react-v2-migration-guide#relative-font-size',
+        );
+      }
+      didLogWarning.fontSize = true;
+    }
+  }, []);
 };

package/esm/core/utils/hooks/useId.js

@@ -2,7 +2,6 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var _a;
 import * as React from 'react';
 import { getRandomValue } from '../functions/numbers.js';
 /**
@@ -10,10 +9,10 @@ import { getRandomValue } from '../functions/numbers.js';
  * a random value as fallback for older React versions which don't include `useId`.
  */
 export const useId = () => {
-    const uniqueValue = useUniqueValue();
-    return React.useMemo(() => `iui-${uniqueValue}`, [uniqueValue]);
+  const uniqueValue = useUniqueValue();
+  return React.useMemo(() => `iui-${uniqueValue}`, [uniqueValue]);
 };
 // This is needed to avoid bundlers trying to import non-existing export.
 // Read more: https://github.com/webpack/webpack/issues/14814
 const _React = React;
-const useUniqueValue = (_a = _React.useId) !== null && _a !== void 0 ? _a : (() => getRandomValue(10));
+const useUniqueValue = _React.useId ?? (() => getRandomValue(10));

package/esm/core/utils/hooks/useIntersection.js

@@ -17,25 +17,30 @@ import { getWindow } from '../functions/dom.js';
  * return (<div ref={ref}>One of many elements</div>);
  */
 export const useIntersection = (onIntersect, options = {}, once = true) => {
-    const { root, rootMargin, threshold } = options;
-    const cleanupRef = React.useRef(() => { });
-    const setRef = React.useCallback((node) => {
-        var _a, _b;
-        (_a = cleanupRef.current) === null || _a === void 0 ? void 0 : _a.call(cleanupRef);
-        cleanupRef.current = () => { }; // ensure it doesn't try to clean up again
-        if (!node || !((_b = getWindow()) === null || _b === void 0 ? void 0 : _b.IntersectionObserver)) {
-            return;
-        }
-        const observer = new IntersectionObserver(([entry], obs) => {
-            if (entry.isIntersecting) {
-                if (once) {
-                    obs.disconnect();
-                }
-                onIntersect();
+  const { root, rootMargin, threshold } = options;
+  const cleanupRef = React.useRef(() => {});
+  const setRef = React.useCallback(
+    (node) => {
+      cleanupRef.current?.();
+      cleanupRef.current = () => {}; // ensure it doesn't try to clean up again
+      if (!node || !getWindow()?.IntersectionObserver) {
+        return;
+      }
+      const observer = new IntersectionObserver(
+        ([entry], obs) => {
+          if (entry.isIntersecting) {
+            if (once) {
+              obs.disconnect();
             }
-        }, { root, rootMargin, threshold });
-        observer.observe(node);
-        cleanupRef.current = () => observer.disconnect();
-    }, [onIntersect, once, root, rootMargin, threshold]);
-    return setRef;
+            onIntersect();
+          }
+        },
+        { root, rootMargin, threshold },
+      );
+      observer.observe(node);
+      cleanupRef.current = () => observer.disconnect();
+    },
+    [onIntersect, once, root, rootMargin, threshold],
+  );
+  return setRef;
 };

package/esm/core/utils/hooks/useIsClient.js

@@ -4,9 +4,9 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 export const useIsClient = () => {
-    const [isClient, setIsClient] = React.useState(false);
-    React.useEffect(() => {
-        setIsClient(true);
-    }, []);
-    return isClient;
+  const [isClient, setIsClient] = React.useState(false);
+  React.useEffect(() => {
+    setIsClient(true);
+  }, []);
+  return isClient;
 };

package/esm/core/utils/hooks/useIsomorphicLayoutEffect.js

@@ -8,4 +8,5 @@ import * as React from 'react';
  *
  * @see https://fb.me/react-uselayouteffect-ssr
  */
-export const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+export const useIsomorphicLayoutEffect =
+  typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;

package/esm/core/utils/hooks/useLatestRef.js

@@ -11,9 +11,9 @@ import * as React from 'react';
  * const valueRef = useLatestRef(value);
  */
 export const useLatestRef = (value) => {
-    const valueRef = React.useRef(value);
-    React.useEffect(() => {
-        valueRef.current = value;
-    }, [value]);
-    return valueRef;
+  const valueRef = React.useRef(value);
+  React.useEffect(() => {
+    valueRef.current = value;
+  }, [value]);
+  return valueRef;
 };