@itwin/itwinui-react 3.20.1 → 3.20.2

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 3.20.2
+
+### Patch Changes
+
+- [#2674](https://github.com/iTwin/iTwinUI/pull/2674): Components that depend on floating-ui will now use stable references to its setter functions in order to prevent a potential infinite re-render loop. Affected components include: `Tooltip`, `Popover`, `ComboBox`, `Select`, `DropdownMenu`, `DropdownButton`, `SplitButton`.
+- [#2670](https://github.com/iTwin/iTwinUI/pull/2670): Updated the inner `border-radius` of `Tile` to be concentric with the outer one.
+
 ## 3.20.1
 
 ### Patch Changes

package/DEV-cjs/core/Menu/Menu.js

@@ -104,9 +104,9 @@ const Menu = _react.forwardRef((props, ref) => {
     }),
   ]);
   _react.useEffect(() => {
-    if (void 0 !== positionReference)
-      popover.refs.setPositionReference(positionReference);
-  }, [popover.refs, positionReference]);
+    let setPositionReference = popover.refs.setPositionReference;
+    if (void 0 !== positionReference) setPositionReference(positionReference);
+  }, [popover.refs.setPositionReference, positionReference]);
   let refs = (0, _index.useMergedRefs)(
     setMenuElement,
     ref,

package/DEV-cjs/core/Popover/Popover.js

@@ -203,6 +203,11 @@ const usePopover = (options) => {
       }),
     [interactions, mergedInteractions.click, visible, onOpenChange],
   );
+  let setFloating = (0, _index.useStableCallback)(floating.refs.setFloating);
+  let setReference = (0, _index.useStableCallback)(floating.refs.setReference);
+  let setPositionReference = (0, _index.useStableCallback)(
+    floating.refs.setPositionReference,
+  );
   return _react.useMemo(
     () => ({
       open,
@@ -210,8 +215,23 @@ const usePopover = (options) => {
       getReferenceProps,
       getFloatingProps,
       ...floating,
+      refs: {
+        ...floating.refs,
+        setFloating,
+        setReference,
+        setPositionReference,
+      },
     }),
-    [open, onOpenChange, getFloatingProps, floating, getReferenceProps],
+    [
+      open,
+      onOpenChange,
+      getFloatingProps,
+      floating,
+      getReferenceProps,
+      setFloating,
+      setReference,
+      setPositionReference,
+    ],
   );
 };
 const Popover = _react.forwardRef((props, forwardedRef) => {
@@ -248,9 +268,10 @@ const Popover = _react.forwardRef((props, forwardedRef) => {
   let hasAriaLabel = !!props['aria-labelledby'] || !!props['aria-label'];
   (0, _index.useLayoutEffect)(() => {
     if (!positionReference) return;
-    popover.refs.setPositionReference(positionReference);
-    return () => void popover.refs.setPositionReference(null);
-  }, [popover.refs, positionReference]);
+    let setPositionReference = popover.refs.setPositionReference;
+    setPositionReference(positionReference);
+    return () => void setPositionReference(null);
+  }, [popover.refs.setPositionReference, positionReference]);
   let [initialFocus, setInitialFocus] = _react.useState();
   let initialFocusContextValue = _react.useMemo(
     () => ({

package/DEV-cjs/core/Tooltip/Tooltip.js

@@ -189,6 +189,18 @@ const useTooltip = (options = {}) => {
     }),
     [interactions, props, id, open],
   );
+  let _setFloating = (0, _index.useStableCallback)(floating.refs.setFloating);
+  let setFloating = _react.useCallback(
+    (element) => {
+      _setFloating(element);
+      syncWithControlledState(element);
+    },
+    [_setFloating, syncWithControlledState],
+  );
+  let setReference = (0, _index.useStableCallback)(floating.refs.setReference);
+  let setPositionReference = (0, _index.useStableCallback)(
+    floating.refs.setPositionReference,
+  );
   return _react.useMemo(
     () => ({
       getReferenceProps,
@@ -196,14 +208,20 @@ const useTooltip = (options = {}) => {
       ...floating,
       refs: {
         ...floating.refs,
-        setFloating: (element) => {
-          floating.refs.setFloating(element);
-          syncWithControlledState(element);
-        },
+        setFloating,
+        setReference,
+        setPositionReference,
       },
       floatingStyles: floating.context.open ? floating.floatingStyles : {},
     }),
-    [getReferenceProps, floatingProps, floating, syncWithControlledState],
+    [
+      getReferenceProps,
+      floatingProps,
+      floating,
+      setFloating,
+      setReference,
+      setPositionReference,
+    ],
   );
 };
 const Tooltip = _react.forwardRef((props, forwardedRef) => {

package/DEV-cjs/styles.js

@@ -1,6 +1,6 @@
 'use strict';
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-const e = '3.20.1';
+const e = '3.20.2';
 const u = new Proxy(
   {},
   {

package/DEV-cjs/utils/hooks/index.js

@@ -20,3 +20,4 @@ _export_star._(require('./useSyncExternalStore.js'), exports);
 _export_star._(require('./useVirtualScroll.js'), exports);
 _export_star._(require('./useInstance.js'), exports);
 _export_star._(require('./useWarningLogger.js'), exports);
+_export_star._(require('./useStableCallback.js'), exports);

package/DEV-cjs/utils/hooks/useStableCallback.js

@@ -0,0 +1,20 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
+});
+Object.defineProperty(exports, 'useStableCallback', {
+  enumerable: true,
+  get: function () {
+    return useStableCallback;
+  },
+});
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require('react'));
+const _useLatestRef = require('./useLatestRef.js');
+function useStableCallback(callback) {
+  let latestCallback = (0, _useLatestRef.useLatestRef)(callback);
+  return _react.useCallback(
+    (...args) => latestCallback.current?.(...args),
+    [latestCallback],
+  );
+}

package/DEV-esm/core/Menu/Menu.js

@@ -96,9 +96,9 @@ export const Menu = React.forwardRef((props, ref) => {
     }),
   ]);
   React.useEffect(() => {
-    if (void 0 !== positionReference)
-      popover.refs.setPositionReference(positionReference);
-  }, [popover.refs, positionReference]);
+    let setPositionReference = popover.refs.setPositionReference;
+    if (void 0 !== positionReference) setPositionReference(positionReference);
+  }, [popover.refs.setPositionReference, positionReference]);
   let refs = useMergedRefs(setMenuElement, ref, popover.refs.setFloating);
   let triggerRef = React.useRef(null);
   let close = React.useCallback(() => {

package/DEV-esm/core/Popover/Popover.js

@@ -29,6 +29,7 @@ import {
   mergeEventHandlers,
   useControlledState,
   useId,
+  useStableCallback,
   useLayoutEffect,
   useMergedRefs,
 } from '../../utils/index.js';
@@ -204,6 +205,11 @@ export const usePopover = (options) => {
       }),
     [interactions, mergedInteractions.click, visible, onOpenChange],
   );
+  let setFloating = useStableCallback(floating.refs.setFloating);
+  let setReference = useStableCallback(floating.refs.setReference);
+  let setPositionReference = useStableCallback(
+    floating.refs.setPositionReference,
+  );
   return React.useMemo(
     () => ({
       open,
@@ -211,8 +217,23 @@ export const usePopover = (options) => {
       getReferenceProps,
       getFloatingProps,
       ...floating,
+      refs: {
+        ...floating.refs,
+        setFloating,
+        setReference,
+        setPositionReference,
+      },
     }),
-    [open, onOpenChange, getFloatingProps, floating, getReferenceProps],
+    [
+      open,
+      onOpenChange,
+      getFloatingProps,
+      floating,
+      getReferenceProps,
+      setFloating,
+      setReference,
+      setPositionReference,
+    ],
   );
 };
 export const Popover = React.forwardRef((props, forwardedRef) => {
@@ -249,9 +270,10 @@ export const Popover = React.forwardRef((props, forwardedRef) => {
   let hasAriaLabel = !!props['aria-labelledby'] || !!props['aria-label'];
   useLayoutEffect(() => {
     if (!positionReference) return;
-    popover.refs.setPositionReference(positionReference);
-    return () => void popover.refs.setPositionReference(null);
-  }, [popover.refs, positionReference]);
+    let setPositionReference = popover.refs.setPositionReference;
+    setPositionReference(positionReference);
+    return () => void setPositionReference(null);
+  }, [popover.refs.setPositionReference, positionReference]);
   let [initialFocus, setInitialFocus] = React.useState();
   let initialFocusContextValue = React.useMemo(
     () => ({

package/DEV-esm/core/Tooltip/Tooltip.js

@@ -23,6 +23,7 @@ import {
   cloneElementWithRef,
   useControlledState,
   useId,
+  useStableCallback,
   useMergedRefs,
 } from '../../utils/index.js';
 export const defaultTooltipDelay = {
@@ -185,6 +186,18 @@ let useTooltip = (options = {}) => {
     }),
     [interactions, props, id, open],
   );
+  let _setFloating = useStableCallback(floating.refs.setFloating);
+  let setFloating = React.useCallback(
+    (element) => {
+      _setFloating(element);
+      syncWithControlledState(element);
+    },
+    [_setFloating, syncWithControlledState],
+  );
+  let setReference = useStableCallback(floating.refs.setReference);
+  let setPositionReference = useStableCallback(
+    floating.refs.setPositionReference,
+  );
   return React.useMemo(
     () => ({
       getReferenceProps,
@@ -192,14 +205,20 @@ let useTooltip = (options = {}) => {
       ...floating,
       refs: {
         ...floating.refs,
-        setFloating: (element) => {
-          floating.refs.setFloating(element);
-          syncWithControlledState(element);
-        },
+        setFloating,
+        setReference,
+        setPositionReference,
       },
       floatingStyles: floating.context.open ? floating.floatingStyles : {},
     }),
-    [getReferenceProps, floatingProps, floating, syncWithControlledState],
+    [
+      getReferenceProps,
+      floatingProps,
+      floating,
+      setFloating,
+      setReference,
+      setPositionReference,
+    ],
   );
 };
 export const Tooltip = React.forwardRef((props, forwardedRef) => {

package/DEV-esm/styles.js

@@ -1,4 +1,4 @@
-const t = '3.20.1';
+const t = '3.20.2';
 const u = new Proxy(
   {},
   {

package/DEV-esm/utils/hooks/index.js

@@ -15,3 +15,4 @@ export * from './useSyncExternalStore.js';
 export * from './useVirtualScroll.js';
 export * from './useInstance.js';
 export * from './useWarningLogger.js';
+export * from './useStableCallback.js';

package/DEV-esm/utils/hooks/useStableCallback.js

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { useLatestRef } from './useLatestRef.js';
+export function useStableCallback(callback) {
+  let latestCallback = useLatestRef(callback);
+  return React.useCallback(
+    (...args) => latestCallback.current?.(...args),
+    [latestCallback],
+  );
+}

package/LICENSE.md

@@ -1,6 +1,6 @@
 # MIT License
 
-Copyright © 2021-2025 Bentley Systems, Incorporated. All rights reserved.
+Copyright © 2021-2026 Bentley Systems, Incorporated. All rights reserved.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

package/cjs/core/Menu/Menu.js

@@ -104,9 +104,9 @@ const Menu = _react.forwardRef((props, ref) => {
     }),
   ]);
   _react.useEffect(() => {
-    if (void 0 !== positionReference)
-      popover.refs.setPositionReference(positionReference);
-  }, [popover.refs, positionReference]);
+    let setPositionReference = popover.refs.setPositionReference;
+    if (void 0 !== positionReference) setPositionReference(positionReference);
+  }, [popover.refs.setPositionReference, positionReference]);
   let refs = (0, _index.useMergedRefs)(
     setMenuElement,
     ref,

package/cjs/core/Popover/Popover.d.ts

@@ -112,6 +112,14 @@ export declare const PopoverInitialFocusContext: React.Context<{
     setInitialFocus: React.Dispatch<React.SetStateAction<InitialFocus>>;
 } | undefined>;
 export declare const usePopover: (options: PopoverOptions & PopoverInternalProps) => {
+    refs: {
+        setFloating: ((node: HTMLElement | null) => void) & ((node: HTMLElement | null) => void);
+        setReference: ((node: import("@floating-ui/react-dom").ReferenceType | null) => void) & ((node: import("@floating-ui/react").ReferenceType | null) => void);
+        setPositionReference: (node: import("@floating-ui/react").ReferenceType | null) => void;
+        reference: React.MutableRefObject<import("@floating-ui/react-dom").ReferenceType | null> & React.MutableRefObject<import("@floating-ui/react").ReferenceType | null>;
+        floating: React.MutableRefObject<HTMLElement | null>;
+        domReference: React.MutableRefObject<Element | null>;
+    };
     placement: Placement;
     strategy: import("@floating-ui/utils").Strategy;
     middlewareData: import("@floating-ui/core").MiddlewareData;
@@ -120,12 +128,6 @@ export declare const usePopover: (options: PopoverOptions & PopoverInternalProps
     isPositioned: boolean;
     update: () => void;
     floatingStyles: React.CSSProperties;
-    refs: {
-        reference: React.MutableRefObject<import("@floating-ui/react-dom").ReferenceType | null>;
-        floating: React.MutableRefObject<HTMLElement | null>;
-        setReference: (node: import("@floating-ui/react-dom").ReferenceType | null) => void;
-        setFloating: (node: HTMLElement | null) => void;
-    } & import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
     elements: {
         reference: import("@floating-ui/react-dom").ReferenceType | null;
         floating: HTMLElement | null;

package/cjs/core/Popover/Popover.js

@@ -203,6 +203,11 @@ const usePopover = (options) => {
       }),
     [interactions, mergedInteractions.click, visible, onOpenChange],
   );
+  let setFloating = (0, _index.useStableCallback)(floating.refs.setFloating);
+  let setReference = (0, _index.useStableCallback)(floating.refs.setReference);
+  let setPositionReference = (0, _index.useStableCallback)(
+    floating.refs.setPositionReference,
+  );
   return _react.useMemo(
     () => ({
       open,
@@ -210,8 +215,23 @@ const usePopover = (options) => {
       getReferenceProps,
       getFloatingProps,
       ...floating,
+      refs: {
+        ...floating.refs,
+        setFloating,
+        setReference,
+        setPositionReference,
+      },
     }),
-    [open, onOpenChange, getFloatingProps, floating, getReferenceProps],
+    [
+      open,
+      onOpenChange,
+      getFloatingProps,
+      floating,
+      getReferenceProps,
+      setFloating,
+      setReference,
+      setPositionReference,
+    ],
   );
 };
 const Popover = _react.forwardRef((props, forwardedRef) => {
@@ -248,9 +268,10 @@ const Popover = _react.forwardRef((props, forwardedRef) => {
   let hasAriaLabel = !!props['aria-labelledby'] || !!props['aria-label'];
   (0, _index.useLayoutEffect)(() => {
     if (!positionReference) return;
-    popover.refs.setPositionReference(positionReference);
-    return () => void popover.refs.setPositionReference(null);
-  }, [popover.refs, positionReference]);
+    let setPositionReference = popover.refs.setPositionReference;
+    setPositionReference(positionReference);
+    return () => void setPositionReference(null);
+  }, [popover.refs.setPositionReference, positionReference]);
   let [initialFocus, setInitialFocus] = _react.useState();
   let initialFocusContextValue = _react.useMemo(
     () => ({

package/cjs/core/Tooltip/Tooltip.js

@@ -189,6 +189,18 @@ const useTooltip = (options = {}) => {
     }),
     [interactions, props, id, open],
   );
+  let _setFloating = (0, _index.useStableCallback)(floating.refs.setFloating);
+  let setFloating = _react.useCallback(
+    (element) => {
+      _setFloating(element);
+      syncWithControlledState(element);
+    },
+    [_setFloating, syncWithControlledState],
+  );
+  let setReference = (0, _index.useStableCallback)(floating.refs.setReference);
+  let setPositionReference = (0, _index.useStableCallback)(
+    floating.refs.setPositionReference,
+  );
   return _react.useMemo(
     () => ({
       getReferenceProps,
@@ -196,14 +208,20 @@ const useTooltip = (options = {}) => {
       ...floating,
       refs: {
         ...floating.refs,
-        setFloating: (element) => {
-          floating.refs.setFloating(element);
-          syncWithControlledState(element);
-        },
+        setFloating,
+        setReference,
+        setPositionReference,
       },
       floatingStyles: floating.context.open ? floating.floatingStyles : {},
     }),
-    [getReferenceProps, floatingProps, floating, syncWithControlledState],
+    [
+      getReferenceProps,
+      floatingProps,
+      floating,
+      setFloating,
+      setReference,
+      setPositionReference,
+    ],
   );
 };
 const Tooltip = _react.forwardRef((props, forwardedRef) => {

package/cjs/styles.js

@@ -1,6 +1,6 @@
 'use strict';
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-const e = '3.20.1';
+const e = '3.20.2';
 const u = new Proxy(
   {},
   {

package/cjs/utils/hooks/index.d.ts

@@ -15,3 +15,4 @@ export * from './useSyncExternalStore.js';
 export * from './useVirtualScroll.js';
 export * from './useInstance.js';
 export * from './useWarningLogger.js';
+export * from './useStableCallback.js';

package/cjs/utils/hooks/index.js

@@ -20,3 +20,4 @@ _export_star._(require('./useSyncExternalStore.js'), exports);
 _export_star._(require('./useVirtualScroll.js'), exports);
 _export_star._(require('./useInstance.js'), exports);
 _export_star._(require('./useWarningLogger.js'), exports);
+_export_star._(require('./useStableCallback.js'), exports);

package/cjs/utils/hooks/useStableCallback.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Hook that "memoizes" a function by skipping reactivity, similar to `React.useEffectEvent`,
+ * except it returns a stable reference. Under the hood, it combines `useLatestRef` and `React.useCallback`.
+ *
+ * @private
+ *
+ * @example
+ * ```ts
+ * const onClick = useStableCallback(props.onClick);
+ * ```
+ */
+export declare function useStableCallback<T extends (...args: any) => any>(callback: T | undefined): T;

package/cjs/utils/hooks/useStableCallback.js

@@ -0,0 +1,20 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
+});
+Object.defineProperty(exports, 'useStableCallback', {
+  enumerable: true,
+  get: function () {
+    return useStableCallback;
+  },
+});
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require('react'));
+const _useLatestRef = require('./useLatestRef.js');
+function useStableCallback(callback) {
+  let latestCallback = (0, _useLatestRef.useLatestRef)(callback);
+  return _react.useCallback(
+    (...args) => latestCallback.current?.(...args),
+    [latestCallback],
+  );
+}

package/esm/core/Menu/Menu.js

@@ -96,9 +96,9 @@ export const Menu = React.forwardRef((props, ref) => {
     }),
   ]);
   React.useEffect(() => {
-    if (void 0 !== positionReference)
-      popover.refs.setPositionReference(positionReference);
-  }, [popover.refs, positionReference]);
+    let setPositionReference = popover.refs.setPositionReference;
+    if (void 0 !== positionReference) setPositionReference(positionReference);
+  }, [popover.refs.setPositionReference, positionReference]);
   let refs = useMergedRefs(setMenuElement, ref, popover.refs.setFloating);
   let triggerRef = React.useRef(null);
   let close = React.useCallback(() => {

package/esm/core/Popover/Popover.d.ts

@@ -112,6 +112,14 @@ export declare const PopoverInitialFocusContext: React.Context<{
     setInitialFocus: React.Dispatch<React.SetStateAction<InitialFocus>>;
 } | undefined>;
 export declare const usePopover: (options: PopoverOptions & PopoverInternalProps) => {
+    refs: {
+        setFloating: ((node: HTMLElement | null) => void) & ((node: HTMLElement | null) => void);
+        setReference: ((node: import("@floating-ui/react-dom").ReferenceType | null) => void) & ((node: import("@floating-ui/react").ReferenceType | null) => void);
+        setPositionReference: (node: import("@floating-ui/react").ReferenceType | null) => void;
+        reference: React.MutableRefObject<import("@floating-ui/react-dom").ReferenceType | null> & React.MutableRefObject<import("@floating-ui/react").ReferenceType | null>;
+        floating: React.MutableRefObject<HTMLElement | null>;
+        domReference: React.MutableRefObject<Element | null>;
+    };
     placement: Placement;
     strategy: import("@floating-ui/utils").Strategy;
     middlewareData: import("@floating-ui/core").MiddlewareData;
@@ -120,12 +128,6 @@ export declare const usePopover: (options: PopoverOptions & PopoverInternalProps
     isPositioned: boolean;
     update: () => void;
     floatingStyles: React.CSSProperties;
-    refs: {
-        reference: React.MutableRefObject<import("@floating-ui/react-dom").ReferenceType | null>;
-        floating: React.MutableRefObject<HTMLElement | null>;
-        setReference: (node: import("@floating-ui/react-dom").ReferenceType | null) => void;
-        setFloating: (node: HTMLElement | null) => void;
-    } & import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
     elements: {
         reference: import("@floating-ui/react-dom").ReferenceType | null;
         floating: HTMLElement | null;

package/esm/core/Popover/Popover.js

@@ -29,6 +29,7 @@ import {
   mergeEventHandlers,
   useControlledState,
   useId,
+  useStableCallback,
   useLayoutEffect,
   useMergedRefs,
 } from '../../utils/index.js';
@@ -204,6 +205,11 @@ export const usePopover = (options) => {
       }),
     [interactions, mergedInteractions.click, visible, onOpenChange],
   );
+  let setFloating = useStableCallback(floating.refs.setFloating);
+  let setReference = useStableCallback(floating.refs.setReference);
+  let setPositionReference = useStableCallback(
+    floating.refs.setPositionReference,
+  );
   return React.useMemo(
     () => ({
       open,
@@ -211,8 +217,23 @@ export const usePopover = (options) => {
       getReferenceProps,
       getFloatingProps,
       ...floating,
+      refs: {
+        ...floating.refs,
+        setFloating,
+        setReference,
+        setPositionReference,
+      },
     }),
-    [open, onOpenChange, getFloatingProps, floating, getReferenceProps],
+    [
+      open,
+      onOpenChange,
+      getFloatingProps,
+      floating,
+      getReferenceProps,
+      setFloating,
+      setReference,
+      setPositionReference,
+    ],
   );
 };
 export const Popover = React.forwardRef((props, forwardedRef) => {
@@ -249,9 +270,10 @@ export const Popover = React.forwardRef((props, forwardedRef) => {
   let hasAriaLabel = !!props['aria-labelledby'] || !!props['aria-label'];
   useLayoutEffect(() => {
     if (!positionReference) return;
-    popover.refs.setPositionReference(positionReference);
-    return () => void popover.refs.setPositionReference(null);
-  }, [popover.refs, positionReference]);
+    let setPositionReference = popover.refs.setPositionReference;
+    setPositionReference(positionReference);
+    return () => void setPositionReference(null);
+  }, [popover.refs.setPositionReference, positionReference]);
   let [initialFocus, setInitialFocus] = React.useState();
   let initialFocusContextValue = React.useMemo(
     () => ({