@itwin/itwinui-react 3.19.3 → 3.19.4

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 3.19.4
+
+### Patch Changes
+
+- [#2633](https://github.com/iTwin/iTwinUI/pull/2633): Fixed horizontal scroll in `Tree` with `enableVirtualization` so that all nodes are equally wide instead of using their intrinsic width.
+- c07a7166f1cbf5d8ec6c86389da2f9e1870af6d6: Fixed a theme bridge issue where `<Checkbox indeterminate>` was not displaying correctly in light theme.
+- 6d73dbecc2a5d57d1c4979ddbc7ef931744aebeb: Added `aria-haspopup` attribute to `DropdownMenu`'s trigger.
+
 ## 3.19.3
 
 ### Patch Changes

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

@@ -177,6 +177,7 @@ const Menu = _react.forwardRef((props, ref) => {
   let reference = (0, _index.cloneElementWithRef)(trigger, (triggerChild) =>
     getReferenceProps(
       popover.getReferenceProps({
+        'aria-haspopup': 'menu',
         ...triggerChild.props,
         'aria-expanded': popover.open,
         ref: (0, _index.mergeRefs)(triggerRef, popover.refs.setReference),

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

@@ -197,15 +197,32 @@ const TreeElement = _index.polymorphic.div('iui-tree', {
 const 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 } = (0, _index.useVirtualScroll)({
       count: flatNodesList.length,
       getScrollElement: () => parentRef.current,
       estimateSize: () => 39,
       getItemKey,
+      onChange: onVirtualizerChange,
     });
     (0, _index.useLayoutEffect)(() => {
       if (scrollToIndex) virtualizer.scrollToIndex(scrollToIndex);
@@ -235,13 +252,22 @@ const VirtualizedTree = _react.forwardRef(
               style: {
                 minBlockSize: virtualizer.getTotalSize(),
               },
+              ref: virtualizerRootRef,
             },
             _react.createElement('slot', null),
           ),
         ),
         _react.createElement(
-          _react.Fragment,
-          null,
+          _TreeContext.VirtualizedTreeContext.Provider,
+          {
+            value: _react.useMemo(
+              () => ({
+                virtualizer,
+                onVirtualizerChange,
+              }),
+              [virtualizer, onVirtualizerChange],
+            ),
+          },
           virtualizer
             .getVirtualItems()
             .map((virtualItem) =>
@@ -252,3 +278,12 @@ const VirtualizedTree = _react.forwardRef(
     );
   },
 );
+function debounce(callback, delay) {
+  let timeoutId;
+  return (...args) => {
+    if (timeoutId) window.clearTimeout(timeoutId);
+    timeoutId = window.setTimeout(() => {
+      callback(...args);
+    }, delay);
+  };
+}

package/DEV-cjs/core/Tree/TreeContext.js

@@ -13,6 +13,9 @@ _export(exports, {
   TreeContext: function () {
     return TreeContext;
   },
+  VirtualizedTreeContext: function () {
+    return VirtualizedTreeContext;
+  },
   useTreeContext: function () {
     return useTreeContext;
   },
@@ -26,3 +29,4 @@ const useTreeContext = () => {
     throw new Error('TreeContext must be used within a TreeContext.Provider');
   return context;
 };
+const VirtualizedTreeContext = _react.createContext(void 0);

package/DEV-cjs/core/Tree/TreeNode.js

@@ -52,6 +52,8 @@ const TreeNode = _react.forwardRef((props, forwardedRef) => {
     groupSize,
     indexInGroup,
   } = (0, _TreeContext.useTreeContext)();
+  let { virtualizer, onVirtualizerChange } =
+    _react.useContext(_TreeContext.VirtualizedTreeContext) ?? {};
   let [isFocused, setIsFocused] = _react.useState(false);
   let nodeRef = _react.useRef(null);
   let onKeyDown = (event) => {
@@ -64,6 +66,7 @@ const TreeNode = _react.forwardRef((props, forwardedRef) => {
         if (isNodeFocused) {
           if (isExpanded) {
             onExpanded(nodeId, false);
+            onVirtualizerChange?.(virtualizer);
             break;
           }
           if (parentNodeId) scrollToParent?.();
@@ -87,6 +90,7 @@ const TreeNode = _react.forwardRef((props, forwardedRef) => {
         if (isNodeFocused) {
           if (!isExpanded && hasSubNodes) {
             onExpanded(nodeId, true);
+            onVirtualizerChange?.(virtualizer);
             break;
           }
           focusableElements[0]?.focus();
@@ -113,9 +117,10 @@ 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(
     _index.Box,

package/DEV-cjs/styles.js

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

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

@@ -162,6 +162,7 @@ export const Menu = React.forwardRef((props, ref) => {
   let reference = cloneElementWithRef(trigger, (triggerChild) =>
     getReferenceProps(
       popover.getReferenceProps({
+        'aria-haspopup': 'menu',
         ...triggerChild.props,
         'aria-expanded': popover.open,
         ref: mergeRefs(triggerRef, popover.refs.setReference),

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

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

package/cjs/core/Menu/Menu.js

@@ -177,6 +177,7 @@ const Menu = _react.forwardRef((props, ref) => {
   let reference = (0, _index.cloneElementWithRef)(trigger, (triggerChild) =>
     getReferenceProps(
       popover.getReferenceProps({
+        'aria-haspopup': 'menu',
         ...triggerChild.props,
         'aria-expanded': popover.open,
         ref: (0, _index.mergeRefs)(triggerRef, popover.refs.setReference),

package/cjs/core/Tree/Tree.js

@@ -197,15 +197,32 @@ const TreeElement = _index.polymorphic.div('iui-tree', {
 const 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 } = (0, _index.useVirtualScroll)({
       count: flatNodesList.length,
       getScrollElement: () => parentRef.current,
       estimateSize: () => 39,
       getItemKey,
+      onChange: onVirtualizerChange,
     });
     (0, _index.useLayoutEffect)(() => {
       if (scrollToIndex) virtualizer.scrollToIndex(scrollToIndex);
@@ -235,13 +252,22 @@ const VirtualizedTree = _react.forwardRef(
               style: {
                 minBlockSize: virtualizer.getTotalSize(),
               },
+              ref: virtualizerRootRef,
             },
             _react.createElement('slot', null),
           ),
         ),
         _react.createElement(
-          _react.Fragment,
-          null,
+          _TreeContext.VirtualizedTreeContext.Provider,
+          {
+            value: _react.useMemo(
+              () => ({
+                virtualizer,
+                onVirtualizerChange,
+              }),
+              [virtualizer, onVirtualizerChange],
+            ),
+          },
           virtualizer
             .getVirtualItems()
             .map((virtualItem) =>
@@ -252,3 +278,12 @@ const VirtualizedTree = _react.forwardRef(
     );
   },
 );
+function debounce(callback, delay) {
+  let timeoutId;
+  return (...args) => {
+    if (timeoutId) window.clearTimeout(timeoutId);
+    timeoutId = window.setTimeout(() => {
+      callback(...args);
+    }, delay);
+  };
+}

package/cjs/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/cjs/core/Tree/TreeContext.js

@@ -13,6 +13,9 @@ _export(exports, {
   TreeContext: function () {
     return TreeContext;
   },
+  VirtualizedTreeContext: function () {
+    return VirtualizedTreeContext;
+  },
   useTreeContext: function () {
     return useTreeContext;
   },
@@ -26,3 +29,4 @@ const useTreeContext = () => {
     throw new Error('TreeContext must be used within a TreeContext.Provider');
   return context;
 };
+const VirtualizedTreeContext = _react.createContext(void 0);

package/cjs/core/Tree/TreeNode.js

@@ -52,6 +52,8 @@ const TreeNode = _react.forwardRef((props, forwardedRef) => {
     groupSize,
     indexInGroup,
   } = (0, _TreeContext.useTreeContext)();
+  let { virtualizer, onVirtualizerChange } =
+    _react.useContext(_TreeContext.VirtualizedTreeContext) ?? {};
   let [isFocused, setIsFocused] = _react.useState(false);
   let nodeRef = _react.useRef(null);
   let onKeyDown = (event) => {
@@ -64,6 +66,7 @@ const TreeNode = _react.forwardRef((props, forwardedRef) => {
         if (isNodeFocused) {
           if (isExpanded) {
             onExpanded(nodeId, false);
+            onVirtualizerChange?.(virtualizer);
             break;
           }
           if (parentNodeId) scrollToParent?.();
@@ -87,6 +90,7 @@ const TreeNode = _react.forwardRef((props, forwardedRef) => {
         if (isNodeFocused) {
           if (!isExpanded && hasSubNodes) {
             onExpanded(nodeId, true);
+            onVirtualizerChange?.(virtualizer);
             break;
           }
           focusableElements[0]?.focus();
@@ -113,9 +117,10 @@ 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(
     _index.Box,

package/cjs/styles.js

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

package/esm/core/Menu/Menu.js

@@ -162,6 +162,7 @@ export const Menu = React.forwardRef((props, ref) => {
   let reference = cloneElementWithRef(trigger, (triggerChild) =>
     getReferenceProps(
       popover.getReferenceProps({
+        'aria-haspopup': 'menu',
         ...triggerChild.props,
         'aria-expanded': popover.open,
         ref: mergeRefs(triggerRef, popover.refs.setReference),

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.3';
+const t = '3.19.4';
 const u = new Proxy(
   {},
   {

package/package.json

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