@itwin/itwinui-react 1.29.1 → 1.31.0

package/esm/core/Table/Table.d.ts

@@ -56,6 +56,7 @@ export declare type TableProps<T extends Record<string, unknown> = Record<string
     isSelectable?: boolean;
     /**
      * Handler for rows selection. Must be memoized.
+     * This is triggered only by user initiated actions (i.e. data change will not call it).
      */
     onSelect?: (selectedData: T[] | undefined, tableState?: TableState<T>) => void;
     /**
@@ -160,6 +161,15 @@ export declare type TableProps<T extends Record<string, unknown> = Record<string
      * @default 'default'
      */
     styleType?: 'default' | 'zebra-rows';
+    /**
+     * Virtualization is used for the scrollable table body.
+     * Height on the table is required for virtualization to work.
+     * @example
+     * <Table enableVirtualization style={{height: 400}} {...} />
+     * @default false
+     * @beta
+     */
+    enableVirtualization?: boolean;
 } & Omit<CommonProps, 'title'>;
 /**
  * Table based on [react-table](https://react-table.tanstack.com/docs/api/overview).

package/esm/core/Table/Table.js

@@ -40,6 +40,7 @@ import { useExpanderCell, useSelectionCell, useSubRowFiltering, useSubRowSelecti
 import { onExpandHandler, onFilterHandler, onSelectHandler, } from './actionHandlers';
 import { onSingleSelectHandler } from './actionHandlers/selectHandler';
 import { onTableResizeEnd, onTableResizeStart, } from './actionHandlers/resizeHandler';
+import VirtualScroll from '../utils/components/VirtualScroll';
 var singleRowSelectedAction = 'singleRowSelected';
 var tableResizeStartAction = 'tableResizeStart';
 var tableResizeEndAction = 'tableResizeEnd';
@@ -87,9 +88,9 @@ var tableResizeEndAction = 'tableResizeEnd';
  */
 export var Table = function (props) {
     var _a;
-    var data = props.data, columns = props.columns, _b = props.isLoading, isLoading = _b === void 0 ? false : _b, emptyTableContent = props.emptyTableContent, className = props.className, style = props.style, id = props.id, _c = props.isSelectable, isSelectable = _c === void 0 ? false : _c, onSelect = props.onSelect, onRowClick = props.onRowClick, _d = props.isSortable, isSortable = _d === void 0 ? false : _d, onSort = props.onSort, stateReducer = props.stateReducer, onBottomReached = props.onBottomReached, onRowInViewport = props.onRowInViewport, _e = props.intersectionMargin, intersectionMargin = _e === void 0 ? 300 : _e, subComponent = props.subComponent, onExpand = props.onExpand, onFilter = props.onFilter, emptyFilteredTableContent = props.emptyFilteredTableContent, filterFunctions = props.filterTypes, expanderCell = props.expanderCell, isRowDisabled = props.isRowDisabled, rowProps = props.rowProps, _f = props.density, density = _f === void 0 ? 'default' : _f, _g = props.selectSubRows, selectSubRows = _g === void 0 ? true : _g, getSubRows = props.getSubRows, _h = props.selectRowOnClick, selectRowOnClick = _h === void 0 ? true : _h, paginatorRenderer = props.paginatorRenderer, _j = props.pageSize, pageSize = _j === void 0 ? 25 : _j, _k = props.isResizable, isResizable = _k === void 0 ? false : _k, _l = props.styleType, styleType = _l === void 0 ? 'default' : _l, rest = __rest(props, ["data", "columns", "isLoading", "emptyTableContent", "className", "style", "id", "isSelectable", "onSelect", "onRowClick", "isSortable", "onSort", "stateReducer", "onBottomReached", "onRowInViewport", "intersectionMargin", "subComponent", "onExpand", "onFilter", "emptyFilteredTableContent", "filterTypes", "expanderCell", "isRowDisabled", "rowProps", "density", "selectSubRows", "getSubRows", "selectRowOnClick", "paginatorRenderer", "pageSize", "isResizable", "styleType"]);
+    var data = props.data, columns = props.columns, _b = props.isLoading, isLoading = _b === void 0 ? false : _b, emptyTableContent = props.emptyTableContent, className = props.className, style = props.style, id = props.id, _c = props.isSelectable, isSelectable = _c === void 0 ? false : _c, onSelect = props.onSelect, onRowClick = props.onRowClick, _d = props.isSortable, isSortable = _d === void 0 ? false : _d, onSort = props.onSort, stateReducer = props.stateReducer, onBottomReached = props.onBottomReached, onRowInViewport = props.onRowInViewport, _e = props.intersectionMargin, intersectionMargin = _e === void 0 ? 300 : _e, subComponent = props.subComponent, onExpand = props.onExpand, onFilter = props.onFilter, emptyFilteredTableContent = props.emptyFilteredTableContent, filterFunctions = props.filterTypes, expanderCell = props.expanderCell, isRowDisabled = props.isRowDisabled, rowProps = props.rowProps, _f = props.density, density = _f === void 0 ? 'default' : _f, _g = props.selectSubRows, selectSubRows = _g === void 0 ? true : _g, getSubRows = props.getSubRows, _h = props.selectRowOnClick, selectRowOnClick = _h === void 0 ? true : _h, paginatorRenderer = props.paginatorRenderer, _j = props.pageSize, pageSize = _j === void 0 ? 25 : _j, _k = props.isResizable, isResizable = _k === void 0 ? false : _k, _l = props.styleType, styleType = _l === void 0 ? 'default' : _l, _m = props.enableVirtualization, enableVirtualization = _m === void 0 ? false : _m, rest = __rest(props, ["data", "columns", "isLoading", "emptyTableContent", "className", "style", "id", "isSelectable", "onSelect", "onRowClick", "isSortable", "onSort", "stateReducer", "onBottomReached", "onRowInViewport", "intersectionMargin", "subComponent", "onExpand", "onFilter", "emptyFilteredTableContent", "filterTypes", "expanderCell", "isRowDisabled", "rowProps", "density", "selectSubRows", "getSubRows", "selectRowOnClick", "paginatorRenderer", "pageSize", "isResizable", "styleType", "enableVirtualization"]);
     useTheme();
-    var _m = React.useState(), ownerDocument = _m[0], setOwnerDocument = _m[1];
+    var _o = React.useState(), ownerDocument = _o[0], setOwnerDocument = _o[1];
     var defaultColumn = React.useMemo(function () { return ({
         maxWidth: 0,
         minWidth: 0,
@@ -227,6 +228,23 @@ export var Table = function (props) {
     });
     var headerRef = React.useRef(null);
     var bodyRef = React.useRef(null);
+    var getPreparedRow = React.useCallback(function (row) {
+        prepareRow(row);
+        return (React.createElement(TableRowMemoized, { row: row, rowProps: rowProps, isLast: row.index === data.length - 1, onRowInViewport: onRowInViewportRef, onBottomReached: onBottomReachedRef, intersectionMargin: intersectionMargin, state: state, key: row.getRowProps().key, onClick: onRowClickHandler, subComponent: subComponent, isDisabled: !!(isRowDisabled === null || isRowDisabled === void 0 ? void 0 : isRowDisabled(row.original)), tableHasSubRows: hasAnySubRows, tableInstance: instance, expanderCell: expanderCell }));
+    }, [
+        data.length,
+        expanderCell,
+        hasAnySubRows,
+        instance,
+        intersectionMargin,
+        isRowDisabled,
+        onRowClickHandler,
+        prepareRow,
+        rowProps,
+        state,
+        subComponent,
+    ]);
+    var virtualizedItemRenderer = React.useCallback(function (index) { return getPreparedRow(page[index]); }, [getPreparedRow, page]);
     return (React.createElement(React.Fragment, null,
         React.createElement("div", __assign({ ref: function (element) {
                 setOwnerDocument(element === null || element === void 0 ? void 0 : element.ownerDocument);
@@ -263,16 +281,13 @@ export var Table = function (props) {
                 className: cx('iui-table-body', {
                     'iui-zebra-striping': styleType === 'zebra-rows',
                 }),
+                style: { outline: 0 },
             }), { ref: bodyRef, onScroll: function () {
                     if (headerRef.current && bodyRef.current) {
                         headerRef.current.scrollLeft = bodyRef.current.scrollLeft;
                     }
-                } }),
-                data.length !== 0 &&
-                    page.map(function (row) {
-                        prepareRow(row);
-                        return (React.createElement(TableRowMemoized, { row: row, rowProps: rowProps, isLast: row.index === data.length - 1, onRowInViewport: onRowInViewportRef, onBottomReached: onBottomReachedRef, intersectionMargin: intersectionMargin, state: state, key: row.getRowProps().key, onClick: onRowClickHandler, subComponent: subComponent, isDisabled: !!(isRowDisabled === null || isRowDisabled === void 0 ? void 0 : isRowDisabled(row.original)), tableHasSubRows: hasAnySubRows, tableInstance: instance, expanderCell: expanderCell }));
-                    }),
+                }, tabIndex: -1 }),
+                data.length !== 0 && (React.createElement(React.Fragment, null, enableVirtualization ? (React.createElement(VirtualScroll, { itemsLength: page.length, itemRenderer: virtualizedItemRenderer })) : (page.map(function (row) { return getPreparedRow(row); })))),
                 isLoading && data.length === 0 && (React.createElement("div", { className: 'iui-table-empty' },
                     React.createElement(ProgressRadial, { indeterminate: true }))),
                 isLoading && data.length !== 0 && (React.createElement("div", { className: 'iui-row' },

package/esm/core/Table/TablePaginator.js

@@ -79,11 +79,10 @@ export var TablePaginator = function (props) {
     var buttonSize = size != 'default' ? 'small' : undefined;
     var pageButton = React.useCallback(function (index, tabIndex) {
         if (tabIndex === void 0) { tabIndex = index === focusedIndex ? 0 : -1; }
-        return (React.createElement("div", { key: index },
-            React.createElement("button", { className: cx('iui-paginator-page-button', {
-                    'iui-active': index === currentPage,
-                    'iui-paginator-page-button-small': buttonSize === 'small',
-                }), onClick: function () { return onPageChange(index); }, "aria-current": index === currentPage, "aria-label": localization.goToPageLabel(index + 1), tabIndex: tabIndex }, index + 1)));
+        return (React.createElement("button", { key: index, className: cx('iui-paginator-page-button', {
+                'iui-active': index === currentPage,
+                'iui-paginator-page-button-small': buttonSize === 'small',
+            }), onClick: function () { return onPageChange(index); }, "aria-current": index === currentPage, "aria-label": localization.goToPageLabel(index + 1), tabIndex: tabIndex }, index + 1));
     }, [focusedIndex, currentPage, localization, buttonSize, onPageChange]);
     var totalPagesCount = Math.ceil(totalRowsCount / pageSize);
     var pageList = React.useMemo(function () {
@@ -145,10 +144,9 @@ export var TablePaginator = function (props) {
     var hasNoRows = totalPagesCount === 0;
     var showPagesList = totalPagesCount > 1 || isLoading;
     var showPageSizeList = pageSizeList && onPageSizeChange && !!totalRowsCount;
-    var ellipsis = (React.createElement("div", null,
-        React.createElement("span", { className: cx('iui-paginator-ellipsis', {
-                'iui-paginator-ellipsis-small': size === 'small',
-            }) }, "\u2026")));
+    var ellipsis = (React.createElement("span", { className: cx('iui-paginator-ellipsis', {
+            'iui-paginator-ellipsis-small': size === 'small',
+        }) }, "\u2026"));
     var noRowsContent = (React.createElement(React.Fragment, null, isLoading ? (React.createElement(ProgressRadial, { indeterminate: true, size: 'small' })) : (React.createElement(Button, { styleType: 'borderless', disabled: true, size: buttonSize }, "1"))));
     if (!showPagesList && !showPageSizeList) {
         return null;

package/esm/core/Tile/Tile.js

@@ -57,32 +57,31 @@ export var Tile = function (props) {
     var showMenu = React.useCallback(function () { return setIsMenuVisible(true); }, []);
     var hideMenu = React.useCallback(function () { return setIsMenuVisible(false); }, []);
     return (React.createElement("div", __assign({ className: cx('iui-tile', { 'iui-folder': variant === 'folder' }, { 'iui-new': isNew }, { 'iui-selected': isSelected }, className) }, rest),
-        thumbnail && (React.createElement("div", { className: 'iui-thumbnail' },
-            typeof thumbnail === 'string' ? (React.createElement("div", { className: 'iui-picture', style: { backgroundImage: "url(" + thumbnail + ")" } })) : thumbnail && thumbnail.type === 'img' ? (React.cloneElement(thumbnail, {
-                className: 'iui-picture',
+        thumbnail && (React.createElement("div", { className: 'iui-tile-thumbnail' },
+            typeof thumbnail === 'string' ? (React.createElement("div", { className: 'iui-tile-thumbnail-picture', style: { backgroundImage: "url(" + thumbnail + ")" } })) : thumbnail && thumbnail.type === 'img' ? (React.cloneElement(thumbnail, {
+                className: 'iui-tile-thumbnail-picture',
             })) : React.isValidElement(thumbnail) ? (React.cloneElement(thumbnail, {
                 className: cx('iui-thumbnail-icon', thumbnail.props.className),
             })) : (thumbnail),
             leftIcon &&
                 React.cloneElement(leftIcon, {
-                    className: 'iui-small iui-type-indicator',
+                    className: 'iui-small iui-tile-thumbnail-type-indicator',
                 }),
             rightIcon &&
                 React.cloneElement(rightIcon, {
-                    className: 'iui-small iui-quick-action',
+                    className: 'iui-small iui-tile-thumbnail-quick-action',
                 }),
-            badge && React.createElement("div", { className: 'iui-badge-container' }, badge))),
-        React.createElement("div", { className: 'iui-content' },
-            React.createElement("div", { className: 'iui-name' },
+            badge && (React.createElement("div", { className: 'iui-tile-thumbnail-badge-container' }, badge)))),
+        React.createElement("div", { className: 'iui-tile-content' },
+            React.createElement("div", { className: 'iui-tile-name' },
                 isSelected && (React.createElement(SvgCheckmark, { className: cx('iui-tile-status-icon', 'iui-informational'), "aria-hidden": true })),
                 isNew && (React.createElement(SvgNew, { className: cx('iui-tile-status-icon', 'iui-positive'), "aria-hidden": true })),
-                React.createElement("span", { className: 'iui-name-label' }, name)),
-            description != undefined && (React.createElement("div", { className: 'iui-description' }, description)),
-            metadata != undefined && (React.createElement("div", { className: 'iui-metadata' }, metadata)),
+                React.createElement("span", { className: 'iui-tile-name-label' }, name)),
+            description != undefined && (React.createElement("div", { className: 'iui-tile-description' }, description)),
+            metadata != undefined && (React.createElement("div", { className: 'iui-tile-metadata' }, metadata)),
             moreOptions && (React.createElement(DropdownMenu, { onShow: showMenu, onHide: hideMenu, menuItems: function (close) {
                     return moreOptions.map(function (option) {
                         return React.cloneElement(option, {
-                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
                             onClick: function (value) {
                                 var _a, _b;
                                 close();
@@ -91,15 +90,12 @@ export var Tile = function (props) {
                         });
                     });
                 } },
-                React.createElement(IconButton, { styleType: 'borderless', size: 'small', className: cx('iui-more-options', {
+                React.createElement("div", { className: cx('iui-tile-more-options', {
                         'iui-visible': isMenuVisible,
-                    }), "aria-label": 'More options' },
-                    React.createElement(SvgMore, null)))),
+                    }) },
+                    React.createElement(IconButton, { styleType: 'borderless', size: 'small', "aria-label": 'More options' },
+                        React.createElement(SvgMore, null))))),
             children),
-        buttons && (React.createElement("div", { className: 'iui-tile-buttons' }, buttons.map(function (button) {
-            return React.cloneElement(button, {
-                className: cx('iui-tile-button', button.props.className),
-            });
-        })))));
+        buttons && React.createElement("div", { className: 'iui-tile-buttons' }, buttons)));
 };
 export default Tile;

package/esm/core/utils/components/Popover.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
 import { TippyProps } from '@tippyjs/react';
-import { Placement, Instance } from 'tippy.js';
+import type { Placement, Instance } from 'tippy.js';
 export declare type PopoverInstance = Instance;
+import '@itwin/itwinui-css/css/popover.css';
 export declare type PopoverProps = {
     /**
      * Controlled flag for whether the popover is visible.

package/esm/core/utils/components/Popover.js

@@ -23,15 +23,18 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 import React from 'react';
+import cx from 'classnames';
 import Tippy from '@tippyjs/react';
 import { useMergedRefs } from '../hooks/useMergedRefs';
+import '@itwin/itwinui-css/css/popover.css';
 /**
  * Wrapper around [tippy.js](https://atomiks.github.io/tippyjs)
  * with pre-configured props and plugins (e.g. lazy mounting, focus, etc).
  * @private
  */
 export var Popover = React.forwardRef(function (props, ref) {
-    var _a = React.useState(false), mounted = _a[0], setMounted = _a[1];
+    var _a;
+    var _b = React.useState(false), mounted = _b[0], setMounted = _b[1];
     var tippyRef = React.useRef(null);
     var refs = useMergedRefs(tippyRef, ref);
     // Plugin to allow lazy mounting. See https://github.com/atomiks/tippyjs-react#lazy-mounting
@@ -50,14 +53,14 @@ export var Popover = React.forwardRef(function (props, ref) {
             },
         }); },
     };
-    var computedProps = __assign(__assign({ allowHTML: true, animation: false, appendTo: 'parent', arrow: false, duration: 0, interactive: true, popperOptions: {
-            strategy: 'fixed',
-            modifiers: [{ name: 'flip' }],
-        }, role: undefined, offset: [0, 0], maxWidth: '' }, props), { plugins: __spreadArray([
+    var computedProps = __assign(__assign({ allowHTML: true, animation: false, appendTo: 'parent', arrow: false, duration: 0, interactive: true, role: undefined, offset: [0, 0], maxWidth: '' }, props), { className: cx('iui-popover', props.className), plugins: __spreadArray([
             lazyLoad,
             removeTabIndex,
             hideOnEscOrTab
-        ], (props.plugins || []), true) });
+        ], (props.plugins || []), true), popperOptions: __assign(__assign({ strategy: 'fixed' }, props.popperOptions), { modifiers: __spreadArray([
+                { name: 'flip' },
+                { name: 'preventOverflow', options: { padding: 0 } }
+            ], (((_a = props.popperOptions) === null || _a === void 0 ? void 0 : _a.modifiers) || []), true) }) });
     if (props.render) {
         var render_1 = props.render;
         computedProps.render = function () {

package/esm/core/utils/components/VirtualScroll.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+export declare type VirtualScrollProps = {
+    /**
+     * Length of the items to virtualize.
+     */
+    itemsLength: number;
+    /**
+     * Single item render function, which gives index of the item (0 based) in the data array
+     * and expects to get the JSX of that element to render.
+     * Recommended to memoize the reference of the function.
+     */
+    itemRenderer: (index: number) => JSX.Element;
+    /**
+     * Number of items to be rendered at the start and the end.
+     * Not recommended to go lower than the visible items in viewport.
+     * @default 10
+     */
+    bufferSize?: number;
+} & React.ComponentPropsWithRef<'div'>;
+/**
+ * `VirtualScroll` component is used to render a huge amount of items in the DOM. It renders only the ones which are visible
+ * and the amount provided through `bufferSize` prop at the start and the end. Can be used inside other components like `Table`.
+ *
+ * It has two wrapper elements, so DOM will be changed. One is used for setting full expected height in the scrollable container
+ * and other is for transformation (translateY) to show the correct part of the list.
+ *
+ * Currently it works only with the direct vertically scrollable parent element. It does not work with body scroll.
+ * It supports only static (same) height rows virtualization. Expect some issues, if list consists of different height elements.
+ * @example
+ * const itemRenderer = React.useCallback(() => (
+ *  <div key={index}>
+ *    This is my item #{index}
+ *  </div>
+ * ), [])
+ * <VirtualScroll
+ *  itemsLength={1000}
+ *  itemRenderer={itemRenderer}
+ * />
+ * @private
+ */
+export declare const VirtualScroll: React.ForwardRefExoticComponent<Pick<VirtualScrollProps, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "itemsLength" | "itemRenderer" | "bufferSize"> & React.RefAttributes<HTMLDivElement>>;
+export default VirtualScroll;

package/esm/core/utils/components/VirtualScroll.js

@@ -0,0 +1,168 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import React from 'react';
+import { useResizeObserver } from '../hooks/useResizeObserver';
+var getScrollableParent = function (element, ownerDocument) {
+    if (ownerDocument === void 0) { ownerDocument = document; }
+    if (!element || element === ownerDocument.body) {
+        return ownerDocument.body;
+    }
+    return isElementScrollable(element)
+        ? element
+        : getScrollableParent(element.parentElement, ownerDocument);
+};
+var isElementScrollable = function (element) {
+    return /(auto|scroll|overlay)/.test(getElementStyle(element, 'overflow') +
+        getElementStyle(element, 'overflow-y'));
+};
+var getElementStyle = function (element, prop) {
+    return getComputedStyle(element, null).getPropertyValue(prop);
+};
+var getElementHeight = function (element) {
+    var _a;
+    return (_a = element === null || element === void 0 ? void 0 : element.getBoundingClientRect().height) !== null && _a !== void 0 ? _a : 0;
+};
+var getNumberOfNodesInHeight = function (childHeight, totalHeight) {
+    if (!childHeight) {
+        return 0;
+    }
+    return Math.floor(totalHeight / childHeight);
+};
+var getTranslateValue = function (childHeight, startIndex) {
+    return childHeight * startIndex;
+};
+var getVisibleNodeCount = function (childHeight, startIndex, childrenLength, scrollContainer) {
+    return Math.min(childrenLength - startIndex, getNumberOfNodesInHeight(childHeight, getElementHeight(scrollContainer)));
+};
+/**
+ * `VirtualScroll` component is used to render a huge amount of items in the DOM. It renders only the ones which are visible
+ * and the amount provided through `bufferSize` prop at the start and the end. Can be used inside other components like `Table`.
+ *
+ * It has two wrapper elements, so DOM will be changed. One is used for setting full expected height in the scrollable container
+ * and other is for transformation (translateY) to show the correct part of the list.
+ *
+ * Currently it works only with the direct vertically scrollable parent element. It does not work with body scroll.
+ * It supports only static (same) height rows virtualization. Expect some issues, if list consists of different height elements.
+ * @example
+ * const itemRenderer = React.useCallback(() => (
+ *  <div key={index}>
+ *    This is my item #{index}
+ *  </div>
+ * ), [])
+ * <VirtualScroll
+ *  itemsLength={1000}
+ *  itemRenderer={itemRenderer}
+ * />
+ * @private
+ */
+export var VirtualScroll = React.forwardRef(function (_a, ref) {
+    var itemsLength = _a.itemsLength, itemRenderer = _a.itemRenderer, _b = _a.bufferSize, bufferSize = _b === void 0 ? 10 : _b, style = _a.style, rest = __rest(_a, ["itemsLength", "itemRenderer", "bufferSize", "style"]);
+    var _c = React.useState(0), startNode = _c[0], setStartNode = _c[1];
+    var _d = React.useState(0), visibleNodeCount = _d[0], setVisibleNodeCount = _d[1];
+    var scrollContainer = React.useRef();
+    var parentRef = React.useRef(null);
+    var childHeight = React.useRef(0);
+    var onScrollRef = React.useRef();
+    // Used only to recalculate on resize
+    var _e = React.useState(0), scrollContainerHeight = _e[0], setScrollContainerHeight = _e[1];
+    var onResize = React.useCallback(function (_a) {
+        var height = _a.height;
+        setScrollContainerHeight(height);
+    }, []);
+    var resizeRef = useResizeObserver(onResize)[0];
+    // Find scrollable parent
+    // Needed only on init
+    React.useLayoutEffect(function () {
+        var _a;
+        var scrollableParent = getScrollableParent(parentRef.current, (_a = parentRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument);
+        scrollContainer.current = scrollableParent;
+        resizeRef(scrollableParent);
+    }, [resizeRef]);
+    var visibleChildren = React.useMemo(function () {
+        var arr = [];
+        var endIndex = Math.min(itemsLength, startNode + visibleNodeCount + bufferSize * 2);
+        for (var i = startNode; i < endIndex; i++) {
+            arr.push(itemRenderer(i));
+        }
+        return arr;
+    }, [itemsLength, itemRenderer, bufferSize, startNode, visibleNodeCount]);
+    // Get child height when children available
+    React.useLayoutEffect(function () {
+        if (!parentRef.current || !visibleChildren.length) {
+            return;
+        }
+        var firstChild = parentRef.current.children.item(0);
+        childHeight.current = Number(getElementHeight(firstChild).toFixed(2));
+    }, [visibleChildren.length]);
+    var updateVirtualScroll = React.useCallback(function () {
+        var _a, _b;
+        var scrollableContainer = (_a = scrollContainer.current) !== null && _a !== void 0 ? _a : (_b = parentRef.current) === null || _b === void 0 ? void 0 : _b.ownerDocument.scrollingElement;
+        if (!scrollableContainer) {
+            return;
+        }
+        var start = getNumberOfNodesInHeight(childHeight.current, scrollableContainer.scrollTop);
+        var startIndex = Math.max(0, start - bufferSize);
+        setStartNode(startIndex);
+        setVisibleNodeCount(getVisibleNodeCount(childHeight.current, start, itemsLength, scrollableContainer));
+        if (!parentRef.current) {
+            return;
+        }
+        parentRef.current.style.transform = "translateY(" + getTranslateValue(childHeight.current, startIndex) + "px)";
+    }, [bufferSize, itemsLength]);
+    var removeScrollListener = React.useCallback(function () {
+        var _a, _b;
+        if (!onScrollRef.current) {
+            return;
+        }
+        !scrollContainer.current ||
+            scrollContainer.current === ((_a = parentRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument.body)
+            ? (_b = parentRef.current) === null || _b === void 0 ? void 0 : _b.ownerDocument.removeEventListener('scroll', onScrollRef.current)
+            : scrollContainer.current.removeEventListener('scroll', onScrollRef.current);
+    }, []);
+    // Add event listener to the scrollable container.
+    React.useLayoutEffect(function () {
+        var _a, _b;
+        removeScrollListener();
+        onScrollRef.current = updateVirtualScroll;
+        if (!scrollContainer.current ||
+            scrollContainer.current === ((_a = parentRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument.body)) {
+            (_b = parentRef.current) === null || _b === void 0 ? void 0 : _b.ownerDocument.addEventListener('scroll', updateVirtualScroll);
+        }
+        else {
+            scrollContainer.current.addEventListener('scroll', updateVirtualScroll);
+        }
+        return removeScrollListener;
+    }, [updateVirtualScroll, removeScrollListener]);
+    React.useLayoutEffect(function () {
+        updateVirtualScroll();
+    }, [scrollContainerHeight, itemsLength, updateVirtualScroll]);
+    return (React.createElement("div", __assign({ style: __assign({ overflow: 'hidden', minHeight: itemsLength * childHeight.current, width: '100%' }, style), ref: ref }, rest),
+        React.createElement("div", { style: {
+                willChange: 'transform',
+            }, ref: parentRef }, visibleChildren)));
+});
+export default VirtualScroll;

package/esm/core/utils/components/index.d.ts

@@ -4,3 +4,4 @@ export * from './InputContainer';
 export * from './icons';
 export * from './WithCSSTransition';
 export * from './MiddleTextTruncation';
+export * from './VirtualScroll';

package/esm/core/utils/components/index.js

@@ -8,3 +8,4 @@ export * from './InputContainer';
 export * from './icons';
 export * from './WithCSSTransition';
 export * from './MiddleTextTruncation';
+export * from './VirtualScroll';

package/esm/core/utils/props.d.ts

@@ -42,9 +42,9 @@ export interface PolymorphicForwardRefComponent<T, OwnProps = Record<string, unk
     as?: T;
 }>> {
     <As = T>(props: As extends keyof JSX.IntrinsicElements ? Merge<JSX.IntrinsicElements[As], OwnProps & {
-        as?: As;
+        as: As;
     }> : As extends React.ComponentType<infer P> ? Merge<P, OwnProps & {
-        as?: As;
+        as: As;
     }> : never): React.ReactElement | null;
 }
 declare type Merge<P1, P2> = Omit<P1, keyof P2> & P2;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "1.29.1",
+  "version": "1.31.0",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "cjs/index.js",
@@ -40,7 +40,7 @@
     "build-storybook": "build-storybook"
   },
   "dependencies": {
-    "@itwin/itwinui-css": "^0.44.0",
+    "@itwin/itwinui-css": "^0.47.0",
     "@itwin/itwinui-icons-react": "^1.5.0",
     "@itwin/itwinui-illustrations-react": "^1.0.1",
     "@tippyjs/react": "^4.2.5",
@@ -121,7 +121,8 @@
     "nth-check": "^2.0.1",
     "ansi-regex": "^5.0.1",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.1",
-    "postcss": "8"
+    "postcss": "8",
+    "nanoid": "^3.1.31"
   },
   "husky": {
     "hooks": {