@itwin/itwinui-react 1.29.3 → 1.30.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [1.30.0](https://www.github.com/iTwin/iTwinUI-react/compare/v1.29.3...v1.30.0) (2022-02-08)
+
+### What's new
+
+* **ButtonGroup:** Add new `overflowPlacement` prop to allow placing `overflowButton` at start ([#527](https://www.github.com/iTwin/iTwinUI-react/issues/527)) ([442ba87](https://www.github.com/iTwin/iTwinUI-react/commit/442ba87f8ba45240f07e8cacd9463cd95e5ec1e7))
+* **Table:** Added new `enableVirtualization` prop for row virtualization ([#236](https://www.github.com/iTwin/iTwinUI-react/issues/236)) ([178bb75](https://www.github.com/iTwin/iTwinUI-react/commit/178bb756bf14fd0f780433ca33ea2a151d4c1436))
+
+### Fixes
+
+* **Popover:** Prevent from adding 5px padding ([#534](https://www.github.com/iTwin/iTwinUI-react/issues/534)) ([fea4782](https://www.github.com/iTwin/iTwinUI-react/commit/fea47823ae730b3e9b2bab2e2ec75b1ba8101b27))
+* **Slider:** Handle pointermove events only when thumb is active ([#528](https://www.github.com/iTwin/iTwinUI-react/issues/528)) ([e41b53b](https://www.github.com/iTwin/iTwinUI-react/commit/e41b53b7ccda245f298bb33c6984f2431d917932))
+
 ### [1.29.3](https://www.github.com/iTwin/iTwinUI-react/compare/v1.29.2...v1.29.3) (2022-01-26)
 
 ### Fixes

package/cjs/core/ButtonGroup/ButtonGroup.d.ts

@@ -6,13 +6,20 @@ export declare type ButtonGroupProps = {
      */
     children: React.ReactNode;
     /**
-     * If specified, this prop will be used to show a custom button as the last button
-     * when overflow happens, i.e. when there is not enough space to fit all the buttons.
+     * If specified, this prop will be used to show a custom button when overflow happens,
+     * i.e. when there is not enough space to fit all the buttons.
      *
      * Expects a function that takes the index of the first button that is overflowing (i.e. hidden)
      * and returns the `ReactNode` to render.
+     *
+     * The placement of this button can be controlled using the `overflowPlacement` prop.
      */
     overflowButton?: (firstOverflowingIndex: number) => React.ReactNode;
+    /**
+     * If `overflowButton` is specified, should it placed at the start or the end?
+     * @default 'end'
+     */
+    overflowPlacement?: 'start' | 'end';
 } & React.ComponentPropsWithRef<'div'>;
 /**
  * Group buttons together for common actions.
@@ -42,5 +49,5 @@ export declare type ButtonGroupProps = {
  *   {buttons}
  * </ButtonGroup>
  */
-export declare const ButtonGroup: React.ForwardRefExoticComponent<Pick<ButtonGroupProps, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "overflowButton"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ButtonGroup: React.ForwardRefExoticComponent<Pick<ButtonGroupProps, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "overflowButton" | "overflowPlacement"> & React.RefAttributes<HTMLDivElement>>;
 export default ButtonGroup;

package/cjs/core/ButtonGroup/ButtonGroup.js

@@ -63,13 +63,14 @@ require("@itwin/itwinui-css/css/button.css");
  * </ButtonGroup>
  */
 exports.ButtonGroup = react_1.default.forwardRef(function (props, ref) {
-    var children = props.children, className = props.className, style = props.style, overflowButton = props.overflowButton, rest = __rest(props, ["children", "className", "style", "overflowButton"]);
+    var children = props.children, className = props.className, style = props.style, overflowButton = props.overflowButton, _a = props.overflowPlacement, overflowPlacement = _a === void 0 ? 'end' : _a, rest = __rest(props, ["children", "className", "style", "overflowButton", "overflowPlacement"]);
     var items = react_1.default.useMemo(function () { var _a; return (_a = react_1.default.Children.map(children, function (child) { return react_1.default.createElement("div", null, child); })) !== null && _a !== void 0 ? _a : []; }, [children]);
     (0, utils_1.useTheme)();
-    var _a = (0, utils_1.useOverflow)(items, !overflowButton), overflowRef = _a[0], visibleCount = _a[1];
+    var _b = (0, utils_1.useOverflow)(items, !overflowButton), overflowRef = _b[0], visibleCount = _b[1];
     var refs = (0, utils_1.useMergedRefs)(overflowRef, ref);
     return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-button-group', className), style: __assign(__assign({}, (!!overflowButton && { width: '100%' })), style), ref: refs }, rest), !!overflowButton && visibleCount < items.length ? (react_1.default.createElement(react_1.default.Fragment, null,
+        overflowButton && overflowPlacement === 'start' && (react_1.default.createElement("div", null, overflowButton(visibleCount))),
         items.slice(0, visibleCount - 1),
-        overflowButton(visibleCount))) : (items)));
+        overflowButton && overflowPlacement === 'end' && (react_1.default.createElement("div", null, overflowButton(visibleCount))))) : (items)));
 });
 exports.default = exports.ButtonGroup;

package/cjs/core/ColorPicker/ColorBuilder.js

@@ -138,22 +138,31 @@ exports.ColorBuilder = react_1.default.forwardRef(function (props, ref) {
         }
     }, [colorDotActive, updateColorDot]);
     var handleSquarePointerUp = react_1.default.useCallback(function (event) {
+        if (!colorDotActive) {
+            return;
+        }
         updateSquareValue(event, 'onChange');
         setColorDotActive(false);
         event.preventDefault();
         event.stopPropagation();
-    }, [updateSquareValue]);
+    }, [colorDotActive, updateSquareValue]);
     (0, utils_1.useEventListener)('pointerup', handleSquarePointerUp, (_k = builderRef.current) === null || _k === void 0 ? void 0 : _k.ownerDocument);
     var handleSquarePointerMove = react_1.default.useCallback(function (event) {
+        if (!colorDotActive) {
+            return;
+        }
         event.preventDefault();
         event.stopPropagation();
         updateSquareValue(event, 'onUpdate');
-    }, [updateSquareValue]);
+    }, [colorDotActive, updateSquareValue]);
     (0, utils_1.useEventListener)('pointermove', handleSquarePointerMove, (_l = builderRef.current) === null || _l === void 0 ? void 0 : _l.ownerDocument);
     var handleSquarePointerLeave = react_1.default.useCallback(function (event) {
+        if (!colorDotActive) {
+            return;
+        }
         updateSquareValue(event, 'onChange');
         setColorDotActive(false);
-    }, [updateSquareValue]);
+    }, [colorDotActive, updateSquareValue]);
     (0, utils_1.useEventListener)('pointerleave', handleSquarePointerLeave, (_m = builderRef.current) === null || _m === void 0 ? void 0 : _m.ownerDocument);
     var keysPressed = react_1.default.useRef({}); // keep track of which keys are currently pressed
     // Arrow key navigation for color dot

package/cjs/core/Slider/Slider.js

@@ -164,10 +164,13 @@ exports.Slider = react_1.default.forwardRef(function (props, ref) {
         onChange,
     ]);
     var handlePointerMove = react_1.default.useCallback(function (event) {
+        if (activeThumbIndex === undefined) {
+            return;
+        }
         event.preventDefault();
         event.stopPropagation();
         updateThumbValue(event, 'onUpdate');
-    }, [updateThumbValue]);
+    }, [activeThumbIndex, updateThumbValue]);
     // function called by Thumb keyboard processing
     var onThumbValueChanged = react_1.default.useCallback(function (index, value) {
         if (currentValues[index] === value) {
@@ -182,11 +185,14 @@ exports.Slider = react_1.default.forwardRef(function (props, ref) {
         setActiveThumbIndex(index);
     }, []);
     var handlePointerUp = react_1.default.useCallback(function (event) {
+        if (activeThumbIndex === undefined) {
+            return;
+        }
         updateThumbValue(event, 'onChange');
         setActiveThumbIndex(undefined);
         event.preventDefault();
         event.stopPropagation();
-    }, [updateThumbValue]);
+    }, [activeThumbIndex, updateThumbValue]);
     var handlePointerDownOnSlider = react_1.default.useCallback(function (event) {
         if (containerRef.current) {
             var percent = getPercentageOfRectangle(containerRef.current.getBoundingClientRect(), event.clientX);

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

@@ -46,6 +46,7 @@ var hooks_1 = require("./hooks");
 var actionHandlers_1 = require("./actionHandlers");
 var selectHandler_1 = require("./actionHandlers/selectHandler");
 var resizeHandler_1 = require("./actionHandlers/resizeHandler");
+var VirtualScroll_1 = __importDefault(require("../utils/components/VirtualScroll"));
 var singleRowSelectedAction = 'singleRowSelected';
 var tableResizeStartAction = 'tableResizeStart';
 var tableResizeEndAction = 'tableResizeEnd';
@@ -93,9 +94,9 @@ var tableResizeEndAction = 'tableResizeEnd';
  */
 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"]);
     (0, utils_1.useTheme)();
-    var _m = react_1.default.useState(), ownerDocument = _m[0], setOwnerDocument = _m[1];
+    var _o = react_1.default.useState(), ownerDocument = _o[0], setOwnerDocument = _o[1];
     var defaultColumn = react_1.default.useMemo(function () { return ({
         maxWidth: 0,
         minWidth: 0,
@@ -233,6 +234,23 @@ var Table = function (props) {
     });
     var headerRef = react_1.default.useRef(null);
     var bodyRef = react_1.default.useRef(null);
+    var getPreparedRow = react_1.default.useCallback(function (row) {
+        prepareRow(row);
+        return (react_1.default.createElement(TableRowMemoized_1.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_1.default.useCallback(function (index) { return getPreparedRow(page[index]); }, [getPreparedRow, page]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("div", __assign({ ref: function (element) {
                 setOwnerDocument(element === null || element === void 0 ? void 0 : element.ownerDocument);
@@ -269,16 +287,13 @@ var Table = function (props) {
                 className: (0, classnames_1.default)('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_1.default.createElement(TableRowMemoized_1.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_1.default.createElement(react_1.default.Fragment, null, enableVirtualization ? (react_1.default.createElement(VirtualScroll_1.default, { itemsLength: page.length, itemRenderer: virtualizedItemRenderer })) : (page.map(function (row) { return getPreparedRow(row); })))),
                 isLoading && data.length === 0 && (react_1.default.createElement("div", { className: 'iui-table-empty' },
                     react_1.default.createElement(ProgressIndicators_1.ProgressRadial, { indeterminate: true }))),
                 isLoading && data.length !== 0 && (react_1.default.createElement("div", { className: 'iui-row' },

package/cjs/core/Tile/Tile.js

@@ -63,28 +63,28 @@ var Tile = function (props) {
     var showMenu = react_1.default.useCallback(function () { return setIsMenuVisible(true); }, []);
     var hideMenu = react_1.default.useCallback(function () { return setIsMenuVisible(false); }, []);
     return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-tile', { 'iui-folder': variant === 'folder' }, { 'iui-new': isNew }, { 'iui-selected': isSelected }, className) }, rest),
-        thumbnail && (react_1.default.createElement("div", { className: 'iui-thumbnail' },
-            typeof thumbnail === 'string' ? (react_1.default.createElement("div", { className: 'iui-picture', style: { backgroundImage: "url(" + thumbnail + ")" } })) : thumbnail && thumbnail.type === 'img' ? (react_1.default.cloneElement(thumbnail, {
-                className: 'iui-picture',
+        thumbnail && (react_1.default.createElement("div", { className: 'iui-tile-thumbnail' },
+            typeof thumbnail === 'string' ? (react_1.default.createElement("div", { className: 'iui-tile-thumbnail-picture', style: { backgroundImage: "url(" + thumbnail + ")" } })) : thumbnail && thumbnail.type === 'img' ? (react_1.default.cloneElement(thumbnail, {
+                className: 'iui-tile-thumbnail-picture',
             })) : react_1.default.isValidElement(thumbnail) ? (react_1.default.cloneElement(thumbnail, {
                 className: (0, classnames_1.default)('iui-thumbnail-icon', thumbnail.props.className),
             })) : (thumbnail),
             leftIcon &&
                 react_1.default.cloneElement(leftIcon, {
-                    className: 'iui-small iui-type-indicator',
+                    className: 'iui-small iui-tile-thumbnail-type-indicator',
                 }),
             rightIcon &&
                 react_1.default.cloneElement(rightIcon, {
-                    className: 'iui-small iui-quick-action',
+                    className: 'iui-small iui-tile-thumbnail-quick-action',
                 }),
-            badge && react_1.default.createElement("div", { className: 'iui-badge-container' }, badge))),
-        react_1.default.createElement("div", { className: 'iui-content' },
-            react_1.default.createElement("div", { className: 'iui-name' },
+            badge && (react_1.default.createElement("div", { className: 'iui-tile-thumbnail-badge-container' }, badge)))),
+        react_1.default.createElement("div", { className: 'iui-tile-content' },
+            react_1.default.createElement("div", { className: 'iui-tile-name' },
                 isSelected && (react_1.default.createElement(Checkmark_1.default, { className: (0, classnames_1.default)('iui-tile-status-icon', 'iui-informational'), "aria-hidden": true })),
                 isNew && (react_1.default.createElement(New_1.default, { className: (0, classnames_1.default)('iui-tile-status-icon', 'iui-positive'), "aria-hidden": true })),
-                react_1.default.createElement("span", { className: 'iui-name-label' }, name)),
-            description != undefined && (react_1.default.createElement("div", { className: 'iui-description' }, description)),
-            metadata != undefined && (react_1.default.createElement("div", { className: 'iui-metadata' }, metadata)),
+                react_1.default.createElement("span", { className: 'iui-tile-name-label' }, name)),
+            description != undefined && (react_1.default.createElement("div", { className: 'iui-tile-description' }, description)),
+            metadata != undefined && (react_1.default.createElement("div", { className: 'iui-tile-metadata' }, metadata)),
             moreOptions && (react_1.default.createElement(DropdownMenu_1.DropdownMenu, { onShow: showMenu, onHide: hideMenu, menuItems: function (close) {
                     return moreOptions.map(function (option) {
                         return react_1.default.cloneElement(option, {
@@ -97,16 +97,12 @@ var Tile = function (props) {
                         });
                     });
                 } },
-                react_1.default.createElement(Buttons_1.IconButton, { styleType: 'borderless', size: 'small', className: (0, classnames_1.default)('iui-more-options', {
+                react_1.default.createElement(Buttons_1.IconButton, { styleType: 'borderless', size: 'small', className: (0, classnames_1.default)('iui-tile-more-options', {
                         'iui-visible': isMenuVisible,
                     }), "aria-label": 'More options' },
                     react_1.default.createElement(More_1.default, null)))),
             children),
-        buttons && (react_1.default.createElement("div", { className: 'iui-tile-buttons' }, buttons.map(function (button) {
-            return react_1.default.cloneElement(button, {
-                className: (0, classnames_1.default)('iui-tile-button', button.props.className),
-            });
-        })))));
+        buttons && react_1.default.createElement("div", { className: 'iui-tile-buttons' }, buttons)));
 };
 exports.Tile = Tile;
 exports.default = exports.Tile;

package/cjs/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/cjs/core/utils/components/Popover.js

@@ -29,15 +29,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.hideOnEscOrTab = exports.Popover = void 0;
 var react_1 = __importDefault(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
 var react_2 = __importDefault(require("@tippyjs/react"));
 var useMergedRefs_1 = require("../hooks/useMergedRefs");
+require("@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
  */
 exports.Popover = react_1.default.forwardRef(function (props, ref) {
-    var _a = react_1.default.useState(false), mounted = _a[0], setMounted = _a[1];
+    var _a;
+    var _b = react_1.default.useState(false), mounted = _b[0], setMounted = _b[1];
     var tippyRef = react_1.default.useRef(null);
     var refs = (0, useMergedRefs_1.useMergedRefs)(tippyRef, ref);
     // Plugin to allow lazy mounting. See https://github.com/atomiks/tippyjs-react#lazy-mounting
@@ -56,14 +59,14 @@ exports.Popover = react_1.default.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: (0, classnames_1.default)('iui-popover', props.className), plugins: __spreadArray([
             lazyLoad,
             removeTabIndex,
             exports.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/cjs/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/cjs/core/utils/components/VirtualScroll.js

@@ -0,0 +1,174 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VirtualScroll = void 0;
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+var react_1 = __importDefault(require("react"));
+var useResizeObserver_1 = require("../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
+ */
+exports.VirtualScroll = react_1.default.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_1.default.useState(0), startNode = _c[0], setStartNode = _c[1];
+    var _d = react_1.default.useState(0), visibleNodeCount = _d[0], setVisibleNodeCount = _d[1];
+    var scrollContainer = react_1.default.useRef();
+    var parentRef = react_1.default.useRef(null);
+    var childHeight = react_1.default.useRef(0);
+    var onScrollRef = react_1.default.useRef();
+    // Used only to recalculate on resize
+    var _e = react_1.default.useState(0), scrollContainerHeight = _e[0], setScrollContainerHeight = _e[1];
+    var onResize = react_1.default.useCallback(function (_a) {
+        var height = _a.height;
+        setScrollContainerHeight(height);
+    }, []);
+    var resizeRef = (0, useResizeObserver_1.useResizeObserver)(onResize)[0];
+    // Find scrollable parent
+    // Needed only on init
+    react_1.default.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_1.default.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_1.default.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_1.default.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_1.default.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_1.default.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_1.default.useLayoutEffect(function () {
+        updateVirtualScroll();
+    }, [scrollContainerHeight, itemsLength, updateVirtualScroll]);
+    return (react_1.default.createElement("div", __assign({ style: __assign({ overflow: 'hidden', minHeight: itemsLength * childHeight.current, width: '100%' }, style), ref: ref }, rest),
+        react_1.default.createElement("div", { style: {
+                willChange: 'transform',
+            }, ref: parentRef }, visibleChildren)));
+});
+exports.default = exports.VirtualScroll;

package/cjs/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/cjs/core/utils/components/index.js

@@ -20,3 +20,4 @@ __exportStar(require("./InputContainer"), exports);
 __exportStar(require("./icons"), exports);
 __exportStar(require("./WithCSSTransition"), exports);
 __exportStar(require("./MiddleTextTruncation"), exports);
+__exportStar(require("./VirtualScroll"), exports);

package/esm/core/ButtonGroup/ButtonGroup.d.ts

@@ -6,13 +6,20 @@ export declare type ButtonGroupProps = {
      */
     children: React.ReactNode;
     /**
-     * If specified, this prop will be used to show a custom button as the last button
-     * when overflow happens, i.e. when there is not enough space to fit all the buttons.
+     * If specified, this prop will be used to show a custom button when overflow happens,
+     * i.e. when there is not enough space to fit all the buttons.
      *
      * Expects a function that takes the index of the first button that is overflowing (i.e. hidden)
      * and returns the `ReactNode` to render.
+     *
+     * The placement of this button can be controlled using the `overflowPlacement` prop.
      */
     overflowButton?: (firstOverflowingIndex: number) => React.ReactNode;
+    /**
+     * If `overflowButton` is specified, should it placed at the start or the end?
+     * @default 'end'
+     */
+    overflowPlacement?: 'start' | 'end';
 } & React.ComponentPropsWithRef<'div'>;
 /**
  * Group buttons together for common actions.
@@ -42,5 +49,5 @@ export declare type ButtonGroupProps = {
  *   {buttons}
  * </ButtonGroup>
  */
-export declare const ButtonGroup: React.ForwardRefExoticComponent<Pick<ButtonGroupProps, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "overflowButton"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ButtonGroup: React.ForwardRefExoticComponent<Pick<ButtonGroupProps, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "overflowButton" | "overflowPlacement"> & React.RefAttributes<HTMLDivElement>>;
 export default ButtonGroup;

package/esm/core/ButtonGroup/ButtonGroup.js

@@ -57,13 +57,14 @@ import '@itwin/itwinui-css/css/button.css';
  * </ButtonGroup>
  */
 export var ButtonGroup = React.forwardRef(function (props, ref) {
-    var children = props.children, className = props.className, style = props.style, overflowButton = props.overflowButton, rest = __rest(props, ["children", "className", "style", "overflowButton"]);
+    var children = props.children, className = props.className, style = props.style, overflowButton = props.overflowButton, _a = props.overflowPlacement, overflowPlacement = _a === void 0 ? 'end' : _a, rest = __rest(props, ["children", "className", "style", "overflowButton", "overflowPlacement"]);
     var items = React.useMemo(function () { var _a; return (_a = React.Children.map(children, function (child) { return React.createElement("div", null, child); })) !== null && _a !== void 0 ? _a : []; }, [children]);
     useTheme();
-    var _a = useOverflow(items, !overflowButton), overflowRef = _a[0], visibleCount = _a[1];
+    var _b = useOverflow(items, !overflowButton), overflowRef = _b[0], visibleCount = _b[1];
     var refs = useMergedRefs(overflowRef, ref);
     return (React.createElement("div", __assign({ className: cx('iui-button-group', className), style: __assign(__assign({}, (!!overflowButton && { width: '100%' })), style), ref: refs }, rest), !!overflowButton && visibleCount < items.length ? (React.createElement(React.Fragment, null,
+        overflowButton && overflowPlacement === 'start' && (React.createElement("div", null, overflowButton(visibleCount))),
         items.slice(0, visibleCount - 1),
-        overflowButton(visibleCount))) : (items)));
+        overflowButton && overflowPlacement === 'end' && (React.createElement("div", null, overflowButton(visibleCount))))) : (items)));
 });
 export default ButtonGroup;

package/esm/core/ColorPicker/ColorBuilder.js

@@ -132,22 +132,31 @@ export var ColorBuilder = React.forwardRef(function (props, ref) {
         }
     }, [colorDotActive, updateColorDot]);
     var handleSquarePointerUp = React.useCallback(function (event) {
+        if (!colorDotActive) {
+            return;
+        }
         updateSquareValue(event, 'onChange');
         setColorDotActive(false);
         event.preventDefault();
         event.stopPropagation();
-    }, [updateSquareValue]);
+    }, [colorDotActive, updateSquareValue]);
     useEventListener('pointerup', handleSquarePointerUp, (_k = builderRef.current) === null || _k === void 0 ? void 0 : _k.ownerDocument);
     var handleSquarePointerMove = React.useCallback(function (event) {
+        if (!colorDotActive) {
+            return;
+        }
         event.preventDefault();
         event.stopPropagation();
         updateSquareValue(event, 'onUpdate');
-    }, [updateSquareValue]);
+    }, [colorDotActive, updateSquareValue]);
     useEventListener('pointermove', handleSquarePointerMove, (_l = builderRef.current) === null || _l === void 0 ? void 0 : _l.ownerDocument);
     var handleSquarePointerLeave = React.useCallback(function (event) {
+        if (!colorDotActive) {
+            return;
+        }
         updateSquareValue(event, 'onChange');
         setColorDotActive(false);
-    }, [updateSquareValue]);
+    }, [colorDotActive, updateSquareValue]);
     useEventListener('pointerleave', handleSquarePointerLeave, (_m = builderRef.current) === null || _m === void 0 ? void 0 : _m.ownerDocument);
     var keysPressed = React.useRef({}); // keep track of which keys are currently pressed
     // Arrow key navigation for color dot

package/esm/core/Slider/Slider.js

@@ -158,10 +158,13 @@ export var Slider = React.forwardRef(function (props, ref) {
         onChange,
     ]);
     var handlePointerMove = React.useCallback(function (event) {
+        if (activeThumbIndex === undefined) {
+            return;
+        }
         event.preventDefault();
         event.stopPropagation();
         updateThumbValue(event, 'onUpdate');
-    }, [updateThumbValue]);
+    }, [activeThumbIndex, updateThumbValue]);
     // function called by Thumb keyboard processing
     var onThumbValueChanged = React.useCallback(function (index, value) {
         if (currentValues[index] === value) {
@@ -176,11 +179,14 @@ export var Slider = React.forwardRef(function (props, ref) {
         setActiveThumbIndex(index);
     }, []);
     var handlePointerUp = React.useCallback(function (event) {
+        if (activeThumbIndex === undefined) {
+            return;
+        }
         updateThumbValue(event, 'onChange');
         setActiveThumbIndex(undefined);
         event.preventDefault();
         event.stopPropagation();
-    }, [updateThumbValue]);
+    }, [activeThumbIndex, updateThumbValue]);
     var handlePointerDownOnSlider = React.useCallback(function (event) {
         if (containerRef.current) {
             var percent = getPercentageOfRectangle(containerRef.current.getBoundingClientRect(), event.clientX);

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/Tile/Tile.js

@@ -57,28 +57,28 @@ 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, {
@@ -91,15 +91,11 @@ export var Tile = function (props) {
                         });
                     });
                 } },
-                React.createElement(IconButton, { styleType: 'borderless', size: 'small', className: cx('iui-more-options', {
+                React.createElement(IconButton, { styleType: 'borderless', size: 'small', className: cx('iui-tile-more-options', {
                         'iui-visible': isMenuVisible,
                     }), "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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "1.29.3",
+  "version": "1.30.0",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "cjs/index.js",
@@ -40,7 +40,7 @@
     "build-storybook": "build-storybook"
   },
   "dependencies": {
-    "@itwin/itwinui-css": "^0.44.1",
+    "@itwin/itwinui-css": "^0.45.0",
     "@itwin/itwinui-icons-react": "^1.5.0",
     "@itwin/itwinui-illustrations-react": "^1.0.1",
     "@tippyjs/react": "^4.2.5",