@itwin/itwinui-react 3.19.2 → 3.19.4

package/esm/core/Select/Select.js

@@ -230,14 +230,16 @@ let CustomSelect = React.forwardRef((props, forwardedRef) => {
       React.createElement(SelectTag, {
         key: option.label,
         label: option.label,
-        onRemove: () => {
-          handleOptionSelection(option, {
-            isSelected: true,
-          });
-          selectRef.current?.focus();
-        },
+        onRemove: disabled
+          ? void 0
+          : () => {
+              handleOptionSelection(option, {
+                isSelected: true,
+              });
+              selectRef.current?.focus();
+            },
       }),
-    [handleOptionSelection],
+    [disabled, handleOptionSelection],
   );
   let popover = usePopover({
     visible: isOpen,

package/esm/core/Tree/Tree.js

@@ -8,7 +8,7 @@ import {
   useMergedRefs,
   useLayoutEffect,
 } from '../../utils/index.js';
-import { TreeContext } from './TreeContext.js';
+import { TreeContext, VirtualizedTreeContext } from './TreeContext.js';
 export const Tree = (props) => {
   let {
     data,
@@ -191,15 +191,32 @@ let TreeElement = polymorphic.div('iui-tree', {
 let VirtualizedTree = React.forwardRef(
   ({ flatNodesList, itemRenderer, scrollToIndex, ...rest }, ref) => {
     let parentRef = React.useRef(null);
+    let virtualizerRootRef = React.useRef(null);
     let getItemKey = React.useCallback(
       (index) => flatNodesList[index].nodeProps.nodeId,
       [flatNodesList],
     );
+    let onVirtualizerChange = React.useMemo(
+      () =>
+        debounce((virtualizer) => {
+          if (!virtualizer || !virtualizerRootRef.current) return;
+          virtualizerRootRef.current.style.width = '';
+          let widestNodeWidth = 0;
+          virtualizer.elementsCache.forEach((el) => {
+            if (el.clientWidth > widestNodeWidth)
+              widestNodeWidth = el.clientWidth;
+          });
+          if (widestNodeWidth)
+            virtualizerRootRef.current.style.width = `${widestNodeWidth}px`;
+        }, 100),
+      [],
+    );
     let { virtualizer, css: virtualizerCss } = useVirtualScroll({
       count: flatNodesList.length,
       getScrollElement: () => parentRef.current,
       estimateSize: () => 39,
       getItemKey,
+      onChange: onVirtualizerChange,
     });
     useLayoutEffect(() => {
       if (scrollToIndex) virtualizer.scrollToIndex(scrollToIndex);
@@ -229,13 +246,22 @@ let VirtualizedTree = React.forwardRef(
               style: {
                 minBlockSize: virtualizer.getTotalSize(),
               },
+              ref: virtualizerRootRef,
             },
             React.createElement('slot', null),
           ),
         ),
         React.createElement(
-          React.Fragment,
-          null,
+          VirtualizedTreeContext.Provider,
+          {
+            value: React.useMemo(
+              () => ({
+                virtualizer,
+                onVirtualizerChange,
+              }),
+              [virtualizer, onVirtualizerChange],
+            ),
+          },
           virtualizer
             .getVirtualItems()
             .map((virtualItem) =>
@@ -246,3 +272,12 @@ let VirtualizedTree = React.forwardRef(
     );
   },
 );
+function debounce(callback, delay) {
+  let timeoutId;
+  return (...args) => {
+    if (timeoutId) window.clearTimeout(timeoutId);
+    timeoutId = window.setTimeout(() => {
+      callback(...args);
+    }, delay);
+  };
+}

package/esm/core/Tree/TreeContext.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import type { Virtualizer } from '@tanstack/react-virtual';
 export type TreeContextProps = {
     /**
      * Depth of the node.
@@ -31,3 +32,7 @@ export type TreeContextProps = {
 };
 export declare const TreeContext: React.Context<TreeContextProps | undefined>;
 export declare const useTreeContext: () => TreeContextProps;
+export declare const VirtualizedTreeContext: React.Context<{
+    virtualizer?: Virtualizer<Element, Element>;
+    onVirtualizerChange?: (virtualizer?: Virtualizer<Element, Element>) => void;
+} | undefined>;

package/esm/core/Tree/TreeContext.js

@@ -6,3 +6,4 @@ export const useTreeContext = () => {
     throw new Error('TreeContext must be used within a TreeContext.Provider');
   return context;
 };
+export const VirtualizedTreeContext = React.createContext(void 0);

package/esm/core/Tree/TreeNode.js

@@ -7,7 +7,7 @@ import {
 } from '../../utils/index.js';
 import cx from 'classnames';
 import { TreeNodeExpander } from './TreeNodeExpander.js';
-import { useTreeContext } from './TreeContext.js';
+import { useTreeContext, VirtualizedTreeContext } from './TreeContext.js';
 export const TreeNode = React.forwardRef((props, forwardedRef) => {
   let {
     nodeId,
@@ -43,6 +43,8 @@ export const TreeNode = React.forwardRef((props, forwardedRef) => {
     groupSize,
     indexInGroup,
   } = useTreeContext();
+  let { virtualizer, onVirtualizerChange } =
+    React.useContext(VirtualizedTreeContext) ?? {};
   let [isFocused, setIsFocused] = React.useState(false);
   let nodeRef = React.useRef(null);
   let onKeyDown = (event) => {
@@ -55,6 +57,7 @@ export const TreeNode = React.forwardRef((props, forwardedRef) => {
         if (isNodeFocused) {
           if (isExpanded) {
             onExpanded(nodeId, false);
+            onVirtualizerChange?.(virtualizer);
             break;
           }
           if (parentNodeId) scrollToParent?.();
@@ -74,6 +77,7 @@ export const TreeNode = React.forwardRef((props, forwardedRef) => {
         if (isNodeFocused) {
           if (!isExpanded && hasSubNodes) {
             onExpanded(nodeId, true);
+            onVirtualizerChange?.(virtualizer);
             break;
           }
           focusableElements[0]?.focus();
@@ -100,9 +104,10 @@ export const TreeNode = React.forwardRef((props, forwardedRef) => {
   let onExpanderClick = React.useCallback(
     (event) => {
       onExpanded(nodeId, !isExpanded);
+      onVirtualizerChange?.(virtualizer);
       event.stopPropagation();
     },
-    [isExpanded, nodeId, onExpanded],
+    [isExpanded, nodeId, onExpanded, onVirtualizerChange, virtualizer],
   );
   return React.createElement(
     Box,

package/esm/styles.js

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

package/package.json

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