@itwin/itwinui-react 3.0.3 → 3.0.5

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

@@ -1,14 +1,13 @@
-'use strict';
+"use strict";
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-Object.defineProperty(exports, '__esModule', { value: true });
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.supportsHas = void 0;
-const dom_js_1 = require('./dom.js');
+const dom_js_1 = require("./dom.js");
 /**
  * Returns true if the :has selector is supported in the browser
  */
-const supportsHas = () =>
-  (0, dom_js_1.getWindow)()?.CSS?.supports?.('selector(:has(+ *))');
+const supportsHas = () => (0, dom_js_1.getWindow)()?.CSS?.supports?.('selector(:has(+ *))');
 exports.supportsHas = supportsHas;

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

@@ -1,21 +1,21 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
-const tslib_1 = require('tslib');
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-tslib_1.__exportStar(require('./useEventListener.js'), exports);
-tslib_1.__exportStar(require('./useMergedRefs.js'), exports);
-tslib_1.__exportStar(require('./useOverflow.js'), exports);
-tslib_1.__exportStar(require('./useResizeObserver.js'), exports);
-tslib_1.__exportStar(require('./useContainerWidth.js'), exports);
-tslib_1.__exportStar(require('./useGlobals.js'), exports);
-tslib_1.__exportStar(require('./useIntersection.js'), exports);
-tslib_1.__exportStar(require('./useMediaQuery.js'), exports);
-tslib_1.__exportStar(require('./useSafeContext.js'), exports);
-tslib_1.__exportStar(require('./useLatestRef.js'), exports);
-tslib_1.__exportStar(require('./useIsomorphicLayoutEffect.js'), exports);
-tslib_1.__exportStar(require('./useIsClient.js'), exports);
-tslib_1.__exportStar(require('./useId.js'), exports);
-tslib_1.__exportStar(require('./useControlledState.js'), exports);
+tslib_1.__exportStar(require("./useEventListener.js"), exports);
+tslib_1.__exportStar(require("./useMergedRefs.js"), exports);
+tslib_1.__exportStar(require("./useOverflow.js"), exports);
+tslib_1.__exportStar(require("./useResizeObserver.js"), exports);
+tslib_1.__exportStar(require("./useContainerWidth.js"), exports);
+tslib_1.__exportStar(require("./useGlobals.js"), exports);
+tslib_1.__exportStar(require("./useIntersection.js"), exports);
+tslib_1.__exportStar(require("./useMediaQuery.js"), exports);
+tslib_1.__exportStar(require("./useSafeContext.js"), exports);
+tslib_1.__exportStar(require("./useLatestRef.js"), exports);
+tslib_1.__exportStar(require("./useIsomorphicLayoutEffect.js"), exports);
+tslib_1.__exportStar(require("./useIsClient.js"), exports);
+tslib_1.__exportStar(require("./useId.js"), exports);
+tslib_1.__exportStar(require("./useControlledState.js"), exports);

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

@@ -1,14 +1,14 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.useContainerWidth = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = tslib_1.__importStar(require('react'));
-const useMergedRefs_js_1 = require('./useMergedRefs.js');
-const useResizeObserver_js_1 = require('./useResizeObserver.js');
+const React = tslib_1.__importStar(require("react"));
+const useMergedRefs_js_1 = require("./useMergedRefs.js");
+const useResizeObserver_js_1 = require("./useResizeObserver.js");
 /**
  * Hook that returns the width of an element in three stages:
  *  - initialized with 0
@@ -25,27 +25,20 @@ const useResizeObserver_js_1 = require('./useResizeObserver.js');
  * return <div ref={ref}>...</div>;
  */
 const useContainerWidth = (watchResizes = true) => {
-  const [contentWidth, setContentWidth] = React.useState(0);
-  const ref = React.useCallback((element) => {
-    if (!element) {
-      return;
+    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] = (0, useResizeObserver_js_1.useResizeObserver)(updateWidth);
+    if (!watchResizes) {
+        resizeObserver?.disconnect();
     }
-    setContentWidth(element.getBoundingClientRect().width);
-  }, []);
-  const updateWidth = React.useCallback(
-    ({ width }) => setContentWidth(width),
-    [],
-  );
-  const [resizeRef, resizeObserver] = (0,
-  useResizeObserver_js_1.useResizeObserver)(updateWidth);
-  if (!watchResizes) {
-    resizeObserver?.disconnect();
-  }
-  const refs = (0, useMergedRefs_js_1.useMergedRefs)(
-    ref,
-    watchResizes ? resizeRef : undefined,
-  );
-  return [refs, contentWidth];
+    const refs = (0, useMergedRefs_js_1.useMergedRefs)(ref, watchResizes ? resizeRef : undefined);
+    return [refs, contentWidth];
 };
 exports.useContainerWidth = useContainerWidth;
 exports.default = exports.useContainerWidth;

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

@@ -1,12 +1,12 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.useControlledState = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = tslib_1.__importStar(require('react'));
+const React = tslib_1.__importStar(require("react"));
 /**
  * Wrapper over `useState` that always gives preference to the
  * controlled state (which often comes from a prop).
@@ -18,22 +18,13 @@ const React = tslib_1.__importStar(require('react'));
  * @example
  * const [state, setState] = useControlledState(null, props.value, props.onChange);
  */
-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];
+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];
 };
 exports.useControlledState = useControlledState;

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

@@ -1,24 +1,23 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.useDragAndDrop = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = tslib_1.__importStar(require('react'));
-const index_js_1 = require('../functions/index.js');
-const useEventListener_js_1 = require('./useEventListener.js');
-const useResizeObserver_js_1 = require('./useResizeObserver.js');
+const React = tslib_1.__importStar(require("react"));
+const index_js_1 = require("../functions/index.js");
+const useEventListener_js_1 = require("./useEventListener.js");
+const useResizeObserver_js_1 = require("./useResizeObserver.js");
 const getContainerRect = (containerRef) => {
-  const containerRect = containerRef?.current?.getBoundingClientRect();
-  return {
-    top: containerRect?.top ?? 0,
-    right: containerRect?.right ?? (0, index_js_1.getWindow)()?.innerWidth ?? 0,
-    bottom:
-      containerRect?.bottom ?? (0, index_js_1.getWindow)()?.innerHeight ?? 0,
-    left: containerRect?.left ?? 0,
-  };
+    const containerRect = containerRef?.current?.getBoundingClientRect();
+    return {
+        top: containerRect?.top ?? 0,
+        right: containerRect?.right ?? (0, index_js_1.getWindow)()?.innerWidth ?? 0,
+        bottom: containerRect?.bottom ?? (0, index_js_1.getWindow)()?.innerHeight ?? 0,
+        left: containerRect?.left ?? 0,
+    };
 };
 /**
  * Helper hook that handles elements drag logic.
@@ -29,101 +28,79 @@ const getContainerRect = (containerRef) => {
  * `transform` - current transform of the element, it is used to preserve drag position when element visibility is being toggled.
  */
 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(() => {
-    if (!elementRef.current || !enabled) {
-      return;
-    }
-    const { top, right, bottom, left } =
-      elementRef.current?.getBoundingClientRect();
-    let [newTranslateX, newTranslateY] = (0, index_js_1.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] = (0,
-  useResizeObserver_js_1.useResizeObserver)(adjustTransform);
-  resizeRef(containerRef?.current);
-  React.useEffect(() => {
-    return () => {
-      resizeObserver?.disconnect();
-    };
-  }, [resizeObserver]);
-  (0, useEventListener_js_1.useEventListener)(
-    'resize',
-    () => {
-      adjustTransform();
-      if (translateX.current != null && translateY.current != null) {
-        setTransform(
-          `translate(${translateX.current}px, ${translateY.current}px)`,
-        );
-      }
-    },
-    (0, index_js_1.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] = (0, index_js_1.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] = (0, index_js_1.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] = (0, useResizeObserver_js_1.useResizeObserver)(adjustTransform);
+    resizeRef(containerRef?.current);
+    React.useEffect(() => {
+        return () => {
+            resizeObserver?.disconnect();
+        };
+    }, [resizeObserver]);
+    (0, useEventListener_js_1.useEventListener)('resize', () => {
+        adjustTransform();
+        if (translateX.current != null && translateY.current != null) {
+            setTransform(`translate(${translateX.current}px, ${translateY.current}px)`);
+        }
+    }, (0, index_js_1.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] = (0, index_js_1.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 };
 };
 exports.useDragAndDrop = useDragAndDrop;
 exports.default = exports.useDragAndDrop;

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

@@ -1,12 +1,12 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.useEventListener = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = tslib_1.__importStar(require('react'));
+const React = tslib_1.__importStar(require("react"));
 /**
  * Hook that adds and removes Event listeners.
  * @example
@@ -17,23 +17,23 @@ const React = tslib_1.__importStar(require('react'));
  *  );
  */
 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) => savedHandler.current?.(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]);
 };
 exports.useEventListener = useEventListener;

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

@@ -1,17 +1,17 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.useThemeProviderWarning = exports.useGlobals = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = tslib_1.__importStar(require('react'));
-const ThemeContext_js_1 = require('../../ThemeProvider/ThemeContext.js');
-const dev_js_1 = require('../functions/dev.js');
+const React = tslib_1.__importStar(require("react"));
+const ThemeContext_js_1 = require("../../ThemeProvider/ThemeContext.js");
+const dev_js_1 = require("../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.
@@ -20,39 +20,33 @@ const didLogWarning = {
  * @private
  */
 const useGlobals = () => {
-  const themeContext = React.useContext(ThemeContext_js_1.ThemeContext);
-  (0, exports.useThemeProviderWarning)(themeContext);
-  useRootFontSizeWarning();
-  return themeContext;
+    const themeContext = React.useContext(ThemeContext_js_1.ThemeContext);
+    (0, exports.useThemeProviderWarning)(themeContext);
+    useRootFontSizeWarning();
+    return themeContext;
 };
 exports.useGlobals = useGlobals;
 // ----------------------------------------------------------------------------
 /** Shows console error if ThemeProvider is not used */
 const useThemeProviderWarning = (themeContext) => {
-  React.useEffect(() => {
-    if (dev_js_1.isDev && !didLogWarning.themeProvider && !themeContext) {
-      console.error(
-        'iTwinUI components must be used within a tree wrapped in a ThemeProvider.',
-      );
-      didLogWarning.themeProvider = true;
-    }
-  }, [themeContext]);
+    React.useEffect(() => {
+        if (dev_js_1.isDev && !didLogWarning.themeProvider && !themeContext) {
+            console.error('iTwinUI components must be used within a tree wrapped in a ThemeProvider.');
+            didLogWarning.themeProvider = true;
+        }
+    }, [themeContext]);
 };
 exports.useThemeProviderWarning = useThemeProviderWarning;
 // ----------------------------------------------------------------------------
 /** Shows console error if the page changes the root font size */
 const useRootFontSizeWarning = () => {
-  React.useEffect(() => {
-    if (dev_js_1.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 (dev_js_1.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/cjs/core/utils/hooks/useId.js

@@ -1,24 +1,23 @@
-'use strict';
+"use strict";
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-Object.defineProperty(exports, '__esModule', { value: true });
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.useId = void 0;
-const tslib_1 = require('tslib');
-const React = tslib_1.__importStar(require('react'));
-const numbers_js_1 = require('../functions/numbers.js');
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const numbers_js_1 = require("../functions/numbers.js");
 /**
  * Wrapper around React's `useId` hook, which prefixes the id with `iui-` and uses
  * a random value as fallback for older React versions which don't include `useId`.
  */
 const useId = () => {
-  const uniqueValue = useUniqueValue();
-  return React.useMemo(() => `iui-${uniqueValue}`, [uniqueValue]);
+    const uniqueValue = useUniqueValue();
+    return React.useMemo(() => `iui-${uniqueValue}`, [uniqueValue]);
 };
 exports.useId = useId;
 // 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 =
-  _React.useId ?? (() => (0, numbers_js_1.getRandomValue)(10));
+const useUniqueValue = _React.useId ?? (() => React.useMemo(() => (0, numbers_js_1.getRandomValue)(10), []));

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

@@ -1,13 +1,13 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.useIntersection = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = tslib_1.__importStar(require('react'));
-const dom_js_1 = require('../functions/dom.js');
+const React = tslib_1.__importStar(require("react"));
+const dom_js_1 = require("../functions/dom.js");
 /**
  * Hook that uses `IntersectionObserver` to trigger `onIntersect` callback when element is in viewport.
  * Callback is called only once by default (can be changed using the `once` parameter).
@@ -21,31 +21,25 @@ const dom_js_1 = require('../functions/dom.js');
  * return (<div ref={ref}>One of many elements</div>);
  */
 const useIntersection = (onIntersect, options = {}, once = true) => {
-  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 || !(0, dom_js_1.getWindow)()?.IntersectionObserver) {
-        return;
-      }
-      const observer = new IntersectionObserver(
-        ([entry], obs) => {
-          if (entry.isIntersecting) {
-            if (once) {
-              obs.disconnect();
+    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 || !(0, dom_js_1.getWindow)()?.IntersectionObserver) {
+            return;
+        }
+        const observer = new IntersectionObserver(([entry], obs) => {
+            if (entry.isIntersecting) {
+                if (once) {
+                    obs.disconnect();
+                }
+                onIntersect();
             }
-            onIntersect();
-          }
-        },
-        { root, rootMargin, threshold },
-      );
-      observer.observe(node);
-      cleanupRef.current = () => observer.disconnect();
-    },
-    [onIntersect, once, root, rootMargin, threshold],
-  );
-  return setRef;
+        }, { root, rootMargin, threshold });
+        observer.observe(node);
+        cleanupRef.current = () => observer.disconnect();
+    }, [onIntersect, once, root, rootMargin, threshold]);
+    return setRef;
 };
 exports.useIntersection = useIntersection;