@itwin/itwinui-react 3.13.2 → 3.13.4

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## 3.13.4
+
+### Patch Changes
+
+- [#2138](https://github.com/iTwin/iTwinUI/pull/2138): Fixed an issue in `Table` column resizing where passing in a `width` value that was less than the column's default `minWidth` would cause an undesirable shift when the column was resized.
+- [#2170](https://github.com/iTwin/iTwinUI/pull/2170): Fixed an issue in virtualized `Tree` where the `style` prop passed to `TreeNode` was not respected.
+- [#2170](https://github.com/iTwin/iTwinUI/pull/2170): Fixed an issue in virtualized `Tree` where horizontal scroll was impossible to achieve.
+- [#2174](https://github.com/iTwin/iTwinUI/pull/2174): Fixed an issue in `Table` where the virtualizer was being initialized when the `enableVirtualization` prop wasn't set to `true`.
+
+## 3.13.3
+
+### Patch Changes
+
+- [#2163](https://github.com/iTwin/iTwinUI/pull/2163): Fixed an issue in virtualized `Table` where horizontal scroll was broken.
+
 ## 3.13.2
 
 ### Patch Changes

package/DEV-cjs/core/ComboBox/ComboBoxMenu.js

@@ -34,7 +34,7 @@ const VirtualizedComboBoxMenu = (props)=>{
         focusedIndex,
         menuRef
     ]);
-    let virtualizer = (0, _index.useVirtualScroll)({
+    let { virtualizer, css: virtualizerCss } = (0, _index.useVirtualScroll)({
         count: filteredOptions.length || 1,
         getScrollElement: ()=>menuRef.current,
         estimateSize: ()=>mostlySubLabeled ? 48 : 36,
@@ -51,10 +51,8 @@ const VirtualizedComboBoxMenu = (props)=>{
         return _react.cloneElement(menuItem, {
             key: virtualItem.key,
             ref: virtualizer.measureElement,
+            'data-iui-virtualizer': 'item',
             style: {
-                position: 'absolute',
-                top: 0,
-                left: 0,
                 width: '100%',
                 transform: `translateY(${virtualItem.start}px)`
             }
@@ -65,13 +63,14 @@ const VirtualizedComboBoxMenu = (props)=>{
         children,
         virtualizer.measureElement
     ]);
-    return _react.createElement(_react.Fragment, null, _react.createElement(_index.ShadowRoot, null, _react.createElement(_index.Box, {
+    return _react.createElement(_react.Fragment, null, _react.createElement(_index.ShadowRoot, {
+        css: virtualizerCss
+    }, _react.createElement(_index.Box, {
         as: "div",
+        "data-iui-virtualizer": "root",
         ...rest,
         style: {
             minBlockSize: virtualizer.getTotalSize(),
-            minInlineSize: '100%',
-            contain: 'strict',
             ...props.style
         }
     }, _react.createElement("slot", null))), _react.createElement(_react.Fragment, null, virtualizer.getVirtualItems().map((virtualItem)=>virtualItemRenderer(virtualItem))));

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

@@ -290,7 +290,8 @@ const Table = (props)=>{
             });
         }
     });
-    let virtualizer = (0, _index.useVirtualScroll)({
+    let { virtualizer, css: virtualizerCss } = (0, _index.useVirtualScroll)({
+        enabled: enableVirtualization,
         count: page.length,
         getScrollElement: ()=>tableRef.current,
         estimateSize: ()=>rowHeight,
@@ -411,7 +412,10 @@ const Table = (props)=>{
             if ([
                 void 0,
                 0
-            ].includes(column.minWidth)) column.minWidth = columnHasExpanders ? COLUMN_MIN_WIDTHS.withExpander : COLUMN_MIN_WIDTHS.default;
+            ].includes(column.minWidth)) {
+                column.minWidth = columnHasExpanders ? COLUMN_MIN_WIDTHS.withExpander : COLUMN_MIN_WIDTHS.default;
+                if ('number' == typeof column.width && column.minWidth > column.width) column.minWidth = column.width;
+            }
             let columnProps = column.getHeaderProps({
                 ...restSortProps,
                 className: (0, _classnames.default)('iui-table-cell', {
@@ -500,11 +504,12 @@ const Table = (props)=>{
         }),
         tabIndex: -1,
         "aria-multiselectable": isSelectable && 'multi' === selectionMode || void 0
-    }, _react.createElement(_index.ShadowRoot, null, enableVirtualization && 0 !== data.length ? _react.createElement("div", {
+    }, _react.createElement(_index.ShadowRoot, {
+        css: virtualizerCss
+    }, enableVirtualization && 0 !== data.length ? _react.createElement("div", {
+        "data-iui-virtualizer": "root",
         style: {
-            minBlockSize: virtualizer.getTotalSize(),
-            minInlineSize: '100%',
-            contain: 'strict'
+            minBlockSize: virtualizer.getTotalSize()
         }
     }, _react.createElement("slot", null)) : _react.createElement("slot", null)), 0 !== data.length && _react.createElement(_react.Fragment, null, enableVirtualization ? virtualizer.getVirtualItems().map((virtualItem)=>getPreparedRow(virtualItem.index, virtualItem, virtualizer)) : page.map((_, index)=>getPreparedRow(index))), isLoading && 0 === data.length && _react.createElement(_index.Box, {
         as: "div",

package/DEV-cjs/core/Table/TableRowMemoized.js

@@ -51,22 +51,24 @@ const TableRow = (props)=>{
                 flex: "0 0 auto",
                 minWidth: '100%',
                 ...null != virtualItem ? {
-                    position: 'absolute',
-                    top: 0,
-                    left: 0,
                     transform: `translateY(${virtualItem.start}px)`
                 } : {}
             }
         }),
         ...restUserRowProps,
-        className: (0, _classnames.default)('iui-table-row', {
-            'iui-table-row-expanded': row.isExpanded && subComponent,
-            'iui-loading': isLoading
-        }, userRowProps?.className),
-        'aria-selected': row.isSelected || void 0,
-        'aria-disabled': isDisabled || void 0,
-        'data-iui-status': status,
-        'data-iui-index': virtualItem?.index
+        ...{
+            className: (0, _classnames.default)('iui-table-row', {
+                'iui-table-row-expanded': row.isExpanded && subComponent,
+                'iui-loading': isLoading
+            }, userRowProps?.className),
+            'aria-selected': row.isSelected || void 0,
+            'aria-disabled': isDisabled || void 0,
+            'data-iui-status': status,
+            'data-iui-index': virtualItem?.index,
+            ...null != virtualItem && {
+                'data-iui-virtualizer': 'item'
+            }
+        }
     };
     let refs = (0, _index.useMergedRefs)(intersectionRef, mergedProps.ref, tableRowRef, virtualizer?.measureElement);
     return _react.createElement(_react.Fragment, null, _react.createElement(_index.Box, {

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

@@ -105,12 +105,11 @@ const Tree = (props)=>{
                 ...children.props,
                 key: virtualItem.key,
                 'data-iui-index': virtualItem.index,
+                'data-iui-virtualizer': 'item',
                 ref: virtualizer.measureElement,
                 style: {
-                    position: 'absolute',
-                    top: 0,
-                    left: 0,
-                    width: '100%',
+                    ...children.props.style,
+                    '--_iui-width': '100%',
                     transform: `translateY(${virtualItem.start}px)`
                 }
             })) : nodeRenderer(node.nodeProps));
@@ -174,7 +173,7 @@ const VirtualizedTree = _react.forwardRef(({ flatNodesList, itemRenderer, scroll
     let getItemKey = _react.useCallback((index)=>flatNodesList[index].nodeProps.nodeId, [
         flatNodesList
     ]);
-    let virtualizer = (0, _index.useVirtualScroll)({
+    let { virtualizer, css: virtualizerCss } = (0, _index.useVirtualScroll)({
         count: flatNodesList.length,
         getScrollElement: ()=>parentRef.current,
         estimateSize: ()=>39,
@@ -189,10 +188,12 @@ const VirtualizedTree = _react.forwardRef(({ flatNodesList, itemRenderer, scroll
     return _react.createElement(TreeElement, {
         ...rest,
         ref: (0, _index.useMergedRefs)(ref, parentRef)
-    }, _react.createElement(_index.ShadowRoot, null, _react.createElement("div", {
+    }, _react.createElement(_index.ShadowRoot, {
+        css: virtualizerCss
+    }, _react.createElement("div", {
+        "data-iui-virtualizer": "root",
         style: {
-            minBlockSize: virtualizer.getTotalSize(),
-            contain: 'strict'
+            minBlockSize: virtualizer.getTotalSize()
         }
     }, _react.createElement("slot", null))), _react.createElement(_react.Fragment, null, virtualizer.getVirtualItems().map((virtualItem)=>itemRenderer(virtualItem.index, virtualItem, virtualizer))));
 });

package/DEV-cjs/styles.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e="3.13.2";const u=new Proxy({},{get(t,i){if(typeof i=="string"&&i.startsWith("iui-"))return i.replace("iui-",`_iui${e.replace(/\./g,"")}-`)},has(t,i){return typeof i=="string"&&i.startsWith("iui-")}});exports.styles=u;exports.version=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e="3.13.4";const u=new Proxy({},{get(t,i){if(typeof i=="string"&&i.startsWith("iui-"))return i.replace("iui-",`_iui${e.replace(/\./g,"")}-`)},has(t,i){return typeof i=="string"&&i.startsWith("iui-")}});exports.styles=u;exports.version=e;

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

@@ -11,28 +11,49 @@ Object.defineProperty(exports, "useVirtualScroll", {
 const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
 const _reactvirtual = require("@tanstack/react-virtual");
 const _react = _interop_require_default._(require("react"));
+const css = `
+:host {
+  contain: layout;
+  background-color: var(--iui-color-background);
+}
+[data-iui-virtualizer='root'] {
+  min-inline-size: 100%;
+  position: relative;
+}
+::slotted([data-iui-virtualizer='item']) {
+  position: absolute !important;
+  top: 0 !important;
+  left: 0 !important;
+}
+`;
 const useVirtualScroll = (params)=>{
     let { ...rest } = params;
-    let virtualizer = (0, _reactvirtual.useVirtualizer)({
+    let _virtualizer = (0, _reactvirtual.useVirtualizer)({
         indexAttribute: 'data-iui-index',
         overscan: 10,
         ...rest
     });
     let scrollToIndex = _react.default.useCallback((index, options)=>{
         setTimeout(()=>{
-            virtualizer.scrollToIndex(index, {
+            _virtualizer.scrollToIndex(index, {
                 align: 'auto',
                 ...options
             });
         });
     }, [
-        virtualizer
+        _virtualizer
     ]);
-    return _react.default.useMemo(()=>({
-            ...virtualizer,
+    let virtualizer = _react.default.useMemo(()=>({
+            ..._virtualizer,
             scrollToIndex
         }), [
-        virtualizer,
+        _virtualizer,
         scrollToIndex
     ]);
+    return _react.default.useMemo(()=>({
+            virtualizer,
+            css
+        }), [
+        virtualizer
+    ]);
 };

package/DEV-esm/core/ComboBox/ComboBoxMenu.js

@@ -22,7 +22,7 @@ let VirtualizedComboBoxMenu = (props)=>{
         focusedIndex,
         menuRef
     ]);
-    let virtualizer = useVirtualScroll({
+    let { virtualizer, css: virtualizerCss } = useVirtualScroll({
         count: filteredOptions.length || 1,
         getScrollElement: ()=>menuRef.current,
         estimateSize: ()=>mostlySubLabeled ? 48 : 36,
@@ -39,10 +39,8 @@ let VirtualizedComboBoxMenu = (props)=>{
         return React.cloneElement(menuItem, {
             key: virtualItem.key,
             ref: virtualizer.measureElement,
+            'data-iui-virtualizer': 'item',
             style: {
-                position: 'absolute',
-                top: 0,
-                left: 0,
                 width: '100%',
                 transform: `translateY(${virtualItem.start}px)`
             }
@@ -53,13 +51,14 @@ let VirtualizedComboBoxMenu = (props)=>{
         children,
         virtualizer.measureElement
     ]);
-    return React.createElement(React.Fragment, null, React.createElement(ShadowRoot, null, React.createElement(Box, {
+    return React.createElement(React.Fragment, null, React.createElement(ShadowRoot, {
+        css: virtualizerCss
+    }, React.createElement(Box, {
         as: "div",
+        "data-iui-virtualizer": "root",
         ...rest,
         style: {
             minBlockSize: virtualizer.getTotalSize(),
-            minInlineSize: '100%',
-            contain: 'strict',
             ...props.style
         }
     }, React.createElement("slot", null))), React.createElement(React.Fragment, null, virtualizer.getVirtualItems().map((virtualItem)=>virtualItemRenderer(virtualItem))));

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

@@ -270,7 +270,8 @@ export const Table = (props)=>{
             });
         }
     });
-    let virtualizer = useVirtualScroll({
+    let { virtualizer, css: virtualizerCss } = useVirtualScroll({
+        enabled: enableVirtualization,
         count: page.length,
         getScrollElement: ()=>tableRef.current,
         estimateSize: ()=>rowHeight,
@@ -391,7 +392,10 @@ export const Table = (props)=>{
             if ([
                 void 0,
                 0
-            ].includes(column.minWidth)) column.minWidth = columnHasExpanders ? COLUMN_MIN_WIDTHS.withExpander : COLUMN_MIN_WIDTHS.default;
+            ].includes(column.minWidth)) {
+                column.minWidth = columnHasExpanders ? COLUMN_MIN_WIDTHS.withExpander : COLUMN_MIN_WIDTHS.default;
+                if ('number' == typeof column.width && column.minWidth > column.width) column.minWidth = column.width;
+            }
             let columnProps = column.getHeaderProps({
                 ...restSortProps,
                 className: cx('iui-table-cell', {
@@ -480,11 +484,12 @@ export const Table = (props)=>{
         }),
         tabIndex: -1,
         "aria-multiselectable": isSelectable && 'multi' === selectionMode || void 0
-    }, React.createElement(ShadowRoot, null, enableVirtualization && 0 !== data.length ? React.createElement("div", {
+    }, React.createElement(ShadowRoot, {
+        css: virtualizerCss
+    }, enableVirtualization && 0 !== data.length ? React.createElement("div", {
+        "data-iui-virtualizer": "root",
         style: {
-            minBlockSize: virtualizer.getTotalSize(),
-            minInlineSize: '100%',
-            contain: 'strict'
+            minBlockSize: virtualizer.getTotalSize()
         }
     }, React.createElement("slot", null)) : React.createElement("slot", null)), 0 !== data.length && React.createElement(React.Fragment, null, enableVirtualization ? virtualizer.getVirtualItems().map((virtualItem)=>getPreparedRow(virtualItem.index, virtualItem, virtualizer)) : page.map((_, index)=>getPreparedRow(index))), isLoading && 0 === data.length && React.createElement(Box, {
         as: "div",

package/DEV-esm/core/Table/TableRowMemoized.js

@@ -31,22 +31,24 @@ export const TableRow = (props)=>{
                 flex: "0 0 auto",
                 minWidth: '100%',
                 ...null != virtualItem ? {
-                    position: 'absolute',
-                    top: 0,
-                    left: 0,
                     transform: `translateY(${virtualItem.start}px)`
                 } : {}
             }
         }),
         ...restUserRowProps,
-        className: cx('iui-table-row', {
-            'iui-table-row-expanded': row.isExpanded && subComponent,
-            'iui-loading': isLoading
-        }, userRowProps?.className),
-        'aria-selected': row.isSelected || void 0,
-        'aria-disabled': isDisabled || void 0,
-        'data-iui-status': status,
-        'data-iui-index': virtualItem?.index
+        ...{
+            className: cx('iui-table-row', {
+                'iui-table-row-expanded': row.isExpanded && subComponent,
+                'iui-loading': isLoading
+            }, userRowProps?.className),
+            'aria-selected': row.isSelected || void 0,
+            'aria-disabled': isDisabled || void 0,
+            'data-iui-status': status,
+            'data-iui-index': virtualItem?.index,
+            ...null != virtualItem && {
+                'data-iui-virtualizer': 'item'
+            }
+        }
     };
     let refs = useMergedRefs(intersectionRef, mergedProps.ref, tableRowRef, virtualizer?.measureElement);
     return React.createElement(React.Fragment, null, React.createElement(Box, {

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

@@ -94,12 +94,11 @@ export const Tree = (props)=>{
                 ...children.props,
                 key: virtualItem.key,
                 'data-iui-index': virtualItem.index,
+                'data-iui-virtualizer': 'item',
                 ref: virtualizer.measureElement,
                 style: {
-                    position: 'absolute',
-                    top: 0,
-                    left: 0,
-                    width: '100%',
+                    ...children.props.style,
+                    '--_iui-width': '100%',
                     transform: `translateY(${virtualItem.start}px)`
                 }
             })) : nodeRenderer(node.nodeProps));
@@ -163,7 +162,7 @@ let VirtualizedTree = React.forwardRef(({ flatNodesList, itemRenderer, scrollToI
     let getItemKey = React.useCallback((index)=>flatNodesList[index].nodeProps.nodeId, [
         flatNodesList
     ]);
-    let virtualizer = useVirtualScroll({
+    let { virtualizer, css: virtualizerCss } = useVirtualScroll({
         count: flatNodesList.length,
         getScrollElement: ()=>parentRef.current,
         estimateSize: ()=>39,
@@ -178,10 +177,12 @@ let VirtualizedTree = React.forwardRef(({ flatNodesList, itemRenderer, scrollToI
     return React.createElement(TreeElement, {
         ...rest,
         ref: useMergedRefs(ref, parentRef)
-    }, React.createElement(ShadowRoot, null, React.createElement("div", {
+    }, React.createElement(ShadowRoot, {
+        css: virtualizerCss
+    }, React.createElement("div", {
+        "data-iui-virtualizer": "root",
         style: {
-            minBlockSize: virtualizer.getTotalSize(),
-            contain: 'strict'
+            minBlockSize: virtualizer.getTotalSize()
         }
     }, React.createElement("slot", null))), React.createElement(React.Fragment, null, virtualizer.getVirtualItems().map((virtualItem)=>itemRenderer(virtualItem.index, virtualItem, virtualizer))));
 });

package/DEV-esm/styles.js

@@ -1,4 +1,4 @@
-const t = "3.13.2";
+const t = "3.13.4";
 const u = new Proxy(
   {},
   {

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

@@ -1,27 +1,48 @@
 import { useVirtualizer } from '@tanstack/react-virtual';
 import React from 'react';
+let css = `
+:host {
+  contain: layout;
+  background-color: var(--iui-color-background);
+}
+[data-iui-virtualizer='root'] {
+  min-inline-size: 100%;
+  position: relative;
+}
+::slotted([data-iui-virtualizer='item']) {
+  position: absolute !important;
+  top: 0 !important;
+  left: 0 !important;
+}
+`;
 export const useVirtualScroll = (params)=>{
     let { ...rest } = params;
-    let virtualizer = useVirtualizer({
+    let _virtualizer = useVirtualizer({
         indexAttribute: 'data-iui-index',
         overscan: 10,
         ...rest
     });
     let scrollToIndex = React.useCallback((index, options)=>{
         setTimeout(()=>{
-            virtualizer.scrollToIndex(index, {
+            _virtualizer.scrollToIndex(index, {
                 align: 'auto',
                 ...options
             });
         });
     }, [
-        virtualizer
+        _virtualizer
     ]);
-    return React.useMemo(()=>({
-            ...virtualizer,
+    let virtualizer = React.useMemo(()=>({
+            ..._virtualizer,
             scrollToIndex
         }), [
-        virtualizer,
+        _virtualizer,
         scrollToIndex
     ]);
+    return React.useMemo(()=>({
+            virtualizer,
+            css
+        }), [
+        virtualizer
+    ]);
 };

package/cjs/core/ComboBox/ComboBoxMenu.js

@@ -35,7 +35,7 @@ const VirtualizedComboBoxMenu = (props) => {
       currentElement.getAttribute('data-iui-filtered-index') ?? focusedIndex,
     );
   }, [focusedIndex, menuRef]);
-  let virtualizer = (0, _index.useVirtualScroll)({
+  let { virtualizer, css: virtualizerCss } = (0, _index.useVirtualScroll)({
     count: filteredOptions.length || 1,
     getScrollElement: () => menuRef.current,
     estimateSize: () => (mostlySubLabeled ? 48 : 36),
@@ -53,10 +53,8 @@ const VirtualizedComboBoxMenu = (props) => {
       return _react.cloneElement(menuItem, {
         key: virtualItem.key,
         ref: virtualizer.measureElement,
+        'data-iui-virtualizer': 'item',
         style: {
-          position: 'absolute',
-          top: 0,
-          left: 0,
           width: '100%',
           transform: `translateY(${virtualItem.start}px)`,
         },
@@ -69,16 +67,17 @@ const VirtualizedComboBoxMenu = (props) => {
     null,
     _react.createElement(
       _index.ShadowRoot,
-      null,
+      {
+        css: virtualizerCss,
+      },
       _react.createElement(
         _index.Box,
         {
           as: 'div',
+          'data-iui-virtualizer': 'root',
           ...rest,
           style: {
             minBlockSize: virtualizer.getTotalSize(),
-            minInlineSize: '100%',
-            contain: 'strict',
             ...props.style,
           },
         },

package/cjs/core/Table/Table.js

@@ -429,7 +429,8 @@ const Table = (props) => {
       });
     }
   });
-  let virtualizer = (0, _index.useVirtualScroll)({
+  let { virtualizer, css: virtualizerCss } = (0, _index.useVirtualScroll)({
+    enabled: enableVirtualization,
     count: page.length,
     getScrollElement: () => tableRef.current,
     estimateSize: () => rowHeight,
@@ -589,10 +590,16 @@ const Table = (props) => {
                     headerGroup.headers.findIndex(
                       (c) => c.id !== _index4.SELECTION_CELL_ID,
                     );
-                if ([void 0, 0].includes(column.minWidth))
+                if ([void 0, 0].includes(column.minWidth)) {
                   column.minWidth = columnHasExpanders
                     ? COLUMN_MIN_WIDTHS.withExpander
                     : COLUMN_MIN_WIDTHS.default;
+                  if (
+                    'number' == typeof column.width &&
+                    column.minWidth > column.width
+                  )
+                    column.minWidth = column.width;
+                }
                 let columnProps = column.getHeaderProps({
                   ...restSortProps,
                   className: (0, _classnames.default)(
@@ -760,15 +767,16 @@ const Table = (props) => {
         },
         _react.createElement(
           _index.ShadowRoot,
-          null,
+          {
+            css: virtualizerCss,
+          },
           enableVirtualization && 0 !== data.length
             ? _react.createElement(
                 'div',
                 {
+                  'data-iui-virtualizer': 'root',
                   style: {
                     minBlockSize: virtualizer.getTotalSize(),
-                    minInlineSize: '100%',
-                    contain: 'strict',
                   },
                 },
                 _react.createElement('slot', null),

package/cjs/core/Table/TableRowMemoized.js

@@ -66,27 +66,29 @@ const TableRow = (props) => {
         minWidth: '100%',
         ...(null != virtualItem
           ? {
-              position: 'absolute',
-              top: 0,
-              left: 0,
               transform: `translateY(${virtualItem.start}px)`,
             }
           : {}),
       },
     }),
     ...restUserRowProps,
-    className: (0, _classnames.default)(
-      'iui-table-row',
-      {
-        'iui-table-row-expanded': row.isExpanded && subComponent,
-        'iui-loading': isLoading,
-      },
-      userRowProps?.className,
-    ),
-    'aria-selected': row.isSelected || void 0,
-    'aria-disabled': isDisabled || void 0,
-    'data-iui-status': status,
-    'data-iui-index': virtualItem?.index,
+    ...{
+      className: (0, _classnames.default)(
+        'iui-table-row',
+        {
+          'iui-table-row-expanded': row.isExpanded && subComponent,
+          'iui-loading': isLoading,
+        },
+        userRowProps?.className,
+      ),
+      'aria-selected': row.isSelected || void 0,
+      'aria-disabled': isDisabled || void 0,
+      'data-iui-status': status,
+      'data-iui-index': virtualItem?.index,
+      ...(null != virtualItem && {
+        'data-iui-virtualizer': 'item',
+      }),
+    },
   };
   let refs = (0, _index.useMergedRefs)(
     intersectionRef,

package/cjs/core/Tree/Tree.js

@@ -122,12 +122,11 @@ const Tree = (props) => {
                 ...children.props,
                 key: virtualItem.key,
                 'data-iui-index': virtualItem.index,
+                'data-iui-virtualizer': 'item',
                 ref: virtualizer.measureElement,
                 style: {
-                  position: 'absolute',
-                  top: 0,
-                  left: 0,
-                  width: '100%',
+                  ...children.props.style,
+                  '--_iui-width': '100%',
                   transform: `translateY(${virtualItem.start}px)`,
                 },
               }),
@@ -200,7 +199,7 @@ const VirtualizedTree = _react.forwardRef(
       (index) => flatNodesList[index].nodeProps.nodeId,
       [flatNodesList],
     );
-    let virtualizer = (0, _index.useVirtualScroll)({
+    let { virtualizer, css: virtualizerCss } = (0, _index.useVirtualScroll)({
       count: flatNodesList.length,
       getScrollElement: () => parentRef.current,
       estimateSize: () => 39,
@@ -217,13 +216,15 @@ const VirtualizedTree = _react.forwardRef(
       },
       _react.createElement(
         _index.ShadowRoot,
-        null,
+        {
+          css: virtualizerCss,
+        },
         _react.createElement(
           'div',
           {
+            'data-iui-virtualizer': 'root',
             style: {
               minBlockSize: virtualizer.getTotalSize(),
-              contain: 'strict',
             },
           },
           _react.createElement('slot', null),

package/cjs/styles.js

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