@itwin/itwinui-react 3.20.0 → 3.20.2

package/esm/core/Table/TableCell.js

@@ -93,7 +93,7 @@ export const TableCell = (props) => {
   );
   let defaultCellRendererChildren = React.useMemo(
     () =>
-      React.createElement(React.Fragment, null, cellContent, expander, shadows),
+      React.createElement(React.Fragment, null, expander, cellContent, shadows),
     [cellContent, expander, shadows],
   );
   let cellRendererProps = React.useMemo(

package/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/esm/styles.js

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

package/esm/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/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/esm/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "3.20.0",
+  "version": "3.20.2",
   "author": "Bentley Systems",
   "license": "MIT",
   "type": "module",