@itwin/itwinui-react 3.13.2 → 3.13.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 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,7 @@ const Table = (props)=>{
             });
         }
     });
-    let virtualizer = (0, _index.useVirtualScroll)({
+    let { virtualizer, css: virtualizerCss } = (0, _index.useVirtualScroll)({
         count: page.length,
         getScrollElement: ()=>tableRef.current,
         estimateSize: ()=>rowHeight,
@@ -500,11 +500,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,11 +105,9 @@ 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)`
                 }
@@ -174,7 +172,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 +187,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.3";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,7 @@ export const Table = (props)=>{
             });
         }
     });
-    let virtualizer = useVirtualScroll({
+    let { virtualizer, css: virtualizerCss } = useVirtualScroll({
         count: page.length,
         getScrollElement: ()=>tableRef.current,
         estimateSize: ()=>rowHeight,
@@ -480,11 +480,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,11 +94,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)`
                 }
@@ -163,7 +161,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 +176,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.3";
 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,7 @@ const Table = (props) => {
       });
     }
   });
-  let virtualizer = (0, _index.useVirtualScroll)({
+  let { virtualizer, css: virtualizerCss } = (0, _index.useVirtualScroll)({
     count: page.length,
     getScrollElement: () => tableRef.current,
     estimateSize: () => rowHeight,
@@ -760,15 +760,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,11 +122,9 @@ 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)`,
                 },
@@ -200,7 +198,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 +215,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.3';
 const u = new Proxy(
   {},
   {

package/cjs/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;
+};