@itwin/itwinui-react 3.13.2 → 3.13.3

package/cjs/utils/hooks/useVirtualScroll.js

@@ -11,9 +11,24 @@ 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,
@@ -21,19 +36,26 @@ const useVirtualScroll = (params) => {
   let scrollToIndex = _react.default.useCallback(
     (index, options) => {
       setTimeout(() => {
-        virtualizer.scrollToIndex(index, {
+        _virtualizer.scrollToIndex(index, {
           align: 'auto',
           ...options,
         });
       });
     },
-    [virtualizer],
+    [_virtualizer],
   );
-  return _react.default.useMemo(
+  let virtualizer = _react.default.useMemo(
     () => ({
-      ...virtualizer,
+      ..._virtualizer,
       scrollToIndex,
     }),
-    [virtualizer, scrollToIndex],
+    [_virtualizer, scrollToIndex],
+  );
+  return _react.default.useMemo(
+    () => ({
+      virtualizer,
+      css,
+    }),
+    [virtualizer],
   );
 };

package/esm/core/ComboBox/ComboBoxMenu.js

@@ -31,7 +31,7 @@ let VirtualizedComboBoxMenu = (props) => {
       currentElement.getAttribute('data-iui-filtered-index') ?? focusedIndex,
     );
   }, [focusedIndex, menuRef]);
-  let virtualizer = useVirtualScroll({
+  let { virtualizer, css: virtualizerCss } = useVirtualScroll({
     count: filteredOptions.length || 1,
     getScrollElement: () => menuRef.current,
     estimateSize: () => (mostlySubLabeled ? 48 : 36),
@@ -49,10 +49,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)`,
         },
@@ -65,16 +63,17 @@ let VirtualizedComboBoxMenu = (props) => {
     null,
     React.createElement(
       ShadowRoot,
-      null,
+      {
+        css: virtualizerCss,
+      },
       React.createElement(
         Box,
         {
           as: 'div',
+          'data-iui-virtualizer': 'root',
           ...rest,
           style: {
             minBlockSize: virtualizer.getTotalSize(),
-            minInlineSize: '100%',
-            contain: 'strict',
             ...props.style,
           },
         },

package/esm/core/Table/Table.js

@@ -447,7 +447,7 @@ export const Table = (props) => {
       });
     }
   });
-  let virtualizer = useVirtualScroll({
+  let { virtualizer, css: virtualizerCss } = useVirtualScroll({
     count: page.length,
     getScrollElement: () => tableRef.current,
     estimateSize: () => rowHeight,
@@ -772,15 +772,16 @@ export const Table = (props) => {
         },
         React.createElement(
           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/esm/core/Table/TableRowMemoized.js

@@ -50,27 +50,29 @@ export const TableRow = (props) => {
         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,

package/esm/core/Tree/Tree.js

@@ -117,11 +117,9 @@ 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%',
                 transform: `translateY(${virtualItem.start}px)`,
               },
@@ -194,7 +192,7 @@ let VirtualizedTree = React.forwardRef(
       (index) => flatNodesList[index].nodeProps.nodeId,
       [flatNodesList],
     );
-    let virtualizer = useVirtualScroll({
+    let { virtualizer, css: virtualizerCss } = useVirtualScroll({
       count: flatNodesList.length,
       getScrollElement: () => parentRef.current,
       estimateSize: () => 39,
@@ -211,13 +209,15 @@ let VirtualizedTree = React.forwardRef(
       },
       React.createElement(
         ShadowRoot,
-        null,
+        {
+          css: virtualizerCss,
+        },
         React.createElement(
           'div',
           {
+            'data-iui-virtualizer': 'root',
             style: {
               minBlockSize: virtualizer.getTotalSize(),
-              contain: 'strict',
             },
           },
           React.createElement('slot', null),

package/esm/styles.js

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

package/esm/utils/hooks/useVirtualScroll.d.ts

@@ -5,10 +5,30 @@ import type { Virtualizer } from '@tanstack/react-virtual';
  * `data-iui-index` and adds wraps the `scrollToIndex` function in a `setTimeout` so it can be used in `useLayoutEffect`.
  *
  * @example
- * const virtualizer = useVirtualScroll({
- *  count: item.length,
- *  getScrollElement: () => parentRef.current,
- *  estimateSize: () => 30,
+ * const { virtualizer, css } = useVirtualScroll({
+ *   count: item.length,
+ *   getScrollElement: () => parentRef.current,
+ *   estimateSize: () => 30,
  * });
+ *
+ * <Parent ref={parentRef}>
+ *   <ShadowRoot css={css}>
+ *     <div data-iui-virtualizer="root" style={{ height: virtualizer.getTotalSize() }}>
+ *       <slot />
+ *     </div>
+ *   </ShadowRoot>
+ *
+ *   {virtualizer.getVirtualItems().map((item) => (
+ *     <Item
+ *       data-iui-virtualizer="item"
+ *       data-iui-index={item.index}
+ *       style={{ transform: `translateY(${item.start}px)`}}
+ *       ref={virtualizer.measureElement}
+ *     />
+ *   ))}
+ * </Parent>
  */
-export declare const useVirtualScroll: (params: Parameters<typeof useVirtualizer>[0]) => Virtualizer<Element, Element>;
+export declare const useVirtualScroll: (params: Parameters<typeof useVirtualizer>[0]) => {
+    virtualizer: Virtualizer<Element, Element>;
+    css: string;
+};

package/esm/utils/hooks/useVirtualScroll.js

@@ -1,8 +1,23 @@
 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,
@@ -10,19 +25,26 @@ export const useVirtualScroll = (params) => {
   let scrollToIndex = React.useCallback(
     (index, options) => {
       setTimeout(() => {
-        virtualizer.scrollToIndex(index, {
+        _virtualizer.scrollToIndex(index, {
           align: 'auto',
           ...options,
         });
       });
     },
-    [virtualizer],
+    [_virtualizer],
   );
-  return React.useMemo(
+  let virtualizer = React.useMemo(
     () => ({
-      ...virtualizer,
+      ..._virtualizer,
       scrollToIndex,
     }),
-    [virtualizer, scrollToIndex],
+    [_virtualizer, scrollToIndex],
+  );
+  return React.useMemo(
+    () => ({
+      virtualizer,
+      css,
+    }),
+    [virtualizer],
   );
 };

package/package.json

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