@itwin/itwinui-react 1.37.3 → 1.39.0

package/cjs/core/Table/Table.js

@@ -186,7 +186,13 @@ var Table = function (props) {
         }
         return result;
     }, {});
-    var areFiltersSet = allColumns.some(function (column) { return !!column.filterValue; });
+    var areFiltersSet = allColumns.some(function (column) { return column.filterValue != null && column.filterValue !== ''; });
+    var showFilterButton = function (column) {
+        return (data.length !== 0 || areFiltersSet) && column.canFilter;
+    };
+    var showSortButton = function (column) {
+        return data.length !== 0 && column.canSort;
+    };
     var onRowClickHandler = react_1.default.useCallback(function (event, row) {
         var isDisabled = isRowDisabled === null || isRowDisabled === void 0 ? void 0 : isRowDisabled(row.original);
         if (!isDisabled) {
@@ -297,28 +303,32 @@ var Table = function (props) {
             className: (0, classnames_1.default)('iui-table', (_a = {}, _a["iui-".concat(density)] = density !== 'default', _a), className),
             style: style,
         }), ariaDataAttributes),
-            react_1.default.createElement("div", { className: 'iui-table-header', ref: headerRef }, headerGroups.slice(1).map(function (headerGroup) {
-                var headerGroupProps = headerGroup.getHeaderGroupProps({
-                    className: 'iui-row',
-                });
-                return (react_1.default.createElement("div", __assign({}, headerGroupProps, { key: headerGroupProps.key }), headerGroup.headers.map(function (column, index) {
-                    var columnProps = column.getHeaderProps(__assign(__assign({}, column.getSortByToggleProps()), { className: (0, classnames_1.default)('iui-cell', { 'iui-actionable': column.canSort }, { 'iui-sorted': column.isSorted }, column.columnClassName), style: __assign({}, (0, utils_2.getCellStyle)(column, !!state.isTableResizing)) }));
-                    return (react_1.default.createElement("div", __assign({}, columnProps, column.getDragAndDropProps(), { key: columnProps.key, title: undefined, ref: function (el) {
-                            if (el && isResizable) {
-                                columnRefs.current[column.id] = el;
-                                column.resizeWidth = el.getBoundingClientRect().width;
-                            }
-                        } }),
-                        column.render('Header'),
-                        (data.length !== 0 || areFiltersSet) && (react_1.default.createElement(filters_1.FilterToggle, { column: column, ownerDocument: ownerDocument })),
-                        data.length !== 0 && column.canSort && (react_1.default.createElement("div", { className: 'iui-cell-end-icon' }, column.isSorted && column.isSortedDesc ? (react_1.default.createElement(SortDown_1.default, { className: 'iui-icon iui-sort', "aria-hidden": true })) : (react_1.default.createElement(SortUp_1.default, { className: 'iui-icon iui-sort', "aria-hidden": true })))),
-                        isResizable &&
-                            column.isResizerVisible &&
-                            index !== headerGroup.headers.length - 1 && (react_1.default.createElement("div", __assign({}, column.getResizerProps(), { className: 'iui-resizer' }),
-                            react_1.default.createElement("div", { className: 'iui-resizer-bar' }))),
-                        enableColumnReordering && !column.disableReordering && (react_1.default.createElement("div", { className: 'iui-reorder-bar' }))));
-                })));
-            })),
+            react_1.default.createElement("div", { className: 'iui-table-header-wrapper', ref: headerRef },
+                react_1.default.createElement("div", { className: 'iui-table-header' }, headerGroups.slice(1).map(function (headerGroup) {
+                    var headerGroupProps = headerGroup.getHeaderGroupProps({
+                        className: 'iui-row',
+                    });
+                    return (react_1.default.createElement("div", __assign({}, headerGroupProps, { key: headerGroupProps.key }), headerGroup.headers.map(function (column, index) {
+                        var columnProps = column.getHeaderProps(__assign(__assign({}, column.getSortByToggleProps()), { className: (0, classnames_1.default)('iui-cell', { 'iui-actionable': column.canSort }, { 'iui-sorted': column.isSorted }, column.columnClassName), style: (0, utils_2.getCellStyle)(column, !!state.isTableResizing) }));
+                        return (react_1.default.createElement("div", __assign({}, columnProps, column.getDragAndDropProps(), { key: columnProps.key, title: undefined, ref: function (el) {
+                                if (el && isResizable) {
+                                    columnRefs.current[column.id] = el;
+                                    column.resizeWidth = el.getBoundingClientRect().width;
+                                }
+                            } }),
+                            column.render('Header'),
+                            (showFilterButton(column) ||
+                                showSortButton(column)) && (react_1.default.createElement("div", { className: 'iui-table-header-actions-container' },
+                                showFilterButton(column) && (react_1.default.createElement(filters_1.FilterToggle, { column: column, ownerDocument: ownerDocument })),
+                                showSortButton(column) && (react_1.default.createElement("div", { className: 'iui-cell-end-icon' }, column.isSorted && column.isSortedDesc ? (react_1.default.createElement(SortDown_1.default, { className: 'iui-icon iui-sort', "aria-hidden": true })) : (react_1.default.createElement(SortUp_1.default, { className: 'iui-icon iui-sort', "aria-hidden": true })))))),
+                            isResizable &&
+                                column.isResizerVisible &&
+                                index !== headerGroup.headers.length - 1 && (react_1.default.createElement("div", __assign({}, column.getResizerProps(), { className: 'iui-resizer' }),
+                                react_1.default.createElement("div", { className: 'iui-resizer-bar' }))),
+                            enableColumnReordering &&
+                                !column.disableReordering && (react_1.default.createElement("div", { className: 'iui-reorder-bar' }))));
+                    })));
+                }))),
             react_1.default.createElement("div", __assign({}, getTableBodyProps({
                 className: (0, classnames_1.default)('iui-table-body', {
                     'iui-zebra-striping': styleType === 'zebra-rows',

package/cjs/core/Table/TablePaginator.js

@@ -149,7 +149,7 @@ var TablePaginator = function (props) {
     }
     var hasNoRows = totalPagesCount === 0;
     var showPagesList = totalPagesCount > 1 || isLoading;
-    var showPageSizeList = pageSizeList && onPageSizeChange && !!totalRowsCount;
+    var showPageSizeList = pageSizeList && !!onPageSizeChange && !!totalRowsCount;
     var ellipsis = (react_1.default.createElement("span", { className: (0, classnames_1.default)('iui-paginator-ellipsis', {
             'iui-paginator-ellipsis-small': size === 'small',
         }) }, "\u2026"));

package/cjs/core/Table/filters/FilterToggle.js

@@ -53,11 +53,12 @@ var FilterToggle = function (props) {
         column.setFilter(undefined);
         close();
     }, [close, column]);
+    var isColumnFiltered = column.filterValue != null && column.filterValue !== '';
     return (react_1.default.createElement(react_1.default.Fragment, null, column.canFilter && column.Filter && (react_1.default.createElement(utils_1.Popover, { content: column.render('Filter', { close: close, setFilter: setFilter, clearFilter: clearFilter }), placement: 'bottom-start', visible: isVisible, onClickOutside: close, appendTo: ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.body },
-        react_1.default.createElement(Buttons_1.IconButton, __assign({ styleType: 'borderless', isActive: isVisible || column.filterValue, className: (0, classnames_1.default)('iui-filter-button', className), onClick: function (e) {
+        react_1.default.createElement(Buttons_1.IconButton, __assign({ styleType: 'borderless', isActive: isVisible || isColumnFiltered, className: (0, classnames_1.default)('iui-filter-button', className), onClick: function (e) {
                 setIsVisible(function (v) { return !v; });
                 // Prevents from triggering sort
                 e.stopPropagation();
-            } }, rest), column.filterValue ? react_1.default.createElement(Filter_1.default, null) : react_1.default.createElement(FilterHollow_1.default, null))))));
+            } }, rest), isColumnFiltered ? react_1.default.createElement(Filter_1.default, null) : react_1.default.createElement(FilterHollow_1.default, null))))));
 };
 exports.FilterToggle = FilterToggle;

package/cjs/core/Table/filters/tableFilters.d.ts

@@ -28,7 +28,7 @@ export declare const tableFilters: {
      * Basic filter with a single input field.
      * @param translatedLabels Translated filter labels.
      */
-    TextFilter: (translatedLabels?: FilterButtonBarTranslation | undefined) => <T extends Record<string, unknown>>(props: TableFilterProps<T>) => JSX.Element;
+    TextFilter: (translatedLabels?: FilterButtonBarTranslation) => <T extends Record<string, unknown>>(props: TableFilterProps<T>) => JSX.Element;
     /**
      * Date range filter.
      *
@@ -39,7 +39,7 @@ export declare const tableFilters: {
      * If your data is different type e.g. `string`, you can use `accessor` property in column description:
      * `accessor: (rowData) => new Date(rowData.date)`.
      */
-    DateRangeFilter: (options?: DateRangeFilterOptions | undefined) => <T_1 extends Record<string, unknown>>(props: TableFilterProps<T_1>) => JSX.Element;
+    DateRangeFilter: (options?: DateRangeFilterOptions) => <T_1 extends Record<string, unknown>>(props: TableFilterProps<T_1>) => JSX.Element;
     /**
      * Number range filter.
      *
@@ -48,5 +48,5 @@ export declare const tableFilters: {
      * `accessor: (rowData) => Number(rowData.numberProp)`.
      * @param translatedLabels Translated filter labels.
      */
-    NumberRangeFilter: (translatedLabels?: (NumberRangeTranslation & FilterButtonBarTranslation) | undefined) => <T_2 extends Record<string, unknown>>(props: NumberRangeFilterProps<T_2>) => JSX.Element;
+    NumberRangeFilter: (translatedLabels?: NumberRangeTranslation & FilterButtonBarTranslation) => <T_2 extends Record<string, unknown>>(props: NumberRangeFilterProps<T_2>) => JSX.Element;
 };

package/cjs/core/Table/hooks/useExpanderCell.js

@@ -19,8 +19,16 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useExpanderCell = 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 columns_1 = require("../columns");
 var useExpanderCell = function (subComponent, expanderCell, isRowDisabled) { return function (hooks) {
     if (!subComponent) {
@@ -36,7 +44,9 @@ var useExpanderCell = function (subComponent, expanderCell, isRowDisabled) { ret
             isDisabled: isRowDisabled,
         });
         return __spreadArray([
-            __assign(__assign({}, expanderColumn), { Cell: expanderCell !== null && expanderCell !== void 0 ? expanderCell : expanderColumn.Cell })
+            __assign(__assign({}, expanderColumn), { Cell: expanderCell
+                    ? function (cellProps) { return react_1.default.createElement(react_1.default.Fragment, null, expanderCell(cellProps)); }
+                    : expanderColumn.Cell })
         ], columns, true);
     });
 }; };

package/cjs/core/Toast/ToastWrapper.d.ts

@@ -1,9 +1,11 @@
-/// <reference types="react" />
 import '@itwin/itwinui-css/css/toast-notification.css';
+import React from 'react';
 import { ToastProps } from './Toast';
 import { ToasterSettings } from './Toaster';
-declare type ToastWrapperProps = {
-    toasts: ToastProps[];
-} & Pick<ToasterSettings, 'placement'>;
-export declare const ToastWrapper: (props: ToastWrapperProps) => JSX.Element;
+declare type ToastPlacement = NonNullable<ToasterSettings['placement']>;
+export declare type ToastWrapperHandle = {
+    setToasts: (toasts: ToastProps[]) => void;
+    setPlacement: (placement: ToastPlacement) => void;
+};
+export declare const ToastWrapper: React.ForwardRefExoticComponent<React.RefAttributes<ToastWrapperHandle>>;
 export {};

package/cjs/core/Toast/ToastWrapper.js

@@ -23,11 +23,15 @@ require("@itwin/itwinui-css/css/toast-notification.css");
 var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var Toast_1 = __importDefault(require("./Toast"));
-var ToastWrapper = function (props) {
-    var toasts = props.toasts, _a = props.placement, placement = _a === void 0 ? 'top' : _a;
+exports.ToastWrapper = react_1.default.forwardRef(function (_, ref) {
+    var _a = react_1.default.useState([]), toasts = _a[0], setToasts = _a[1];
+    var _b = react_1.default.useState('top'), placement = _b[0], setPlacement = _b[1];
     var placementPosition = placement.startsWith('top') ? 'top' : 'bottom';
+    react_1.default.useImperativeHandle(ref, function () { return ({
+        setToasts: setToasts,
+        setPlacement: setPlacement,
+    }); }, []);
     return (react_1.default.createElement("span", { className: (0, classnames_1.default)("iui-toast-wrapper", "iui-placement-".concat(placement)) }, toasts.map(function (toastProps) {
         return (react_1.default.createElement(Toast_1.default, __assign({ key: toastProps.id, placementPosition: placementPosition }, toastProps)));
     })));
-};
-exports.ToastWrapper = ToastWrapper;
+});

package/cjs/core/Toast/Toaster.d.ts

@@ -20,6 +20,9 @@ export default class Toaster {
     private toasts;
     private lastId;
     private settings;
+    private toastsRef;
+    private isInitialized;
+    private asyncInit;
     /**
      * Set global Toaster settings for toasts order and placement.
      * Settings will be applied to new toasts on the page.

package/cjs/core/Toast/Toaster.js

@@ -10,6 +10,65 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
 var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
@@ -28,30 +87,75 @@ Object.defineProperty(exports, "__esModule", { value: true });
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 var react_1 = __importDefault(require("react"));
-var react_dom_1 = __importDefault(require("react-dom"));
+var ReactDOM = __importStar(require("react-dom"));
 var utils_1 = require("../utils");
 var ToastWrapper_1 = require("./ToastWrapper");
 var TOASTS_CONTAINER_ID = 'iui-toasts-container';
 var Toaster = /** @class */ (function () {
     function Toaster() {
+        var _this = this;
         this.toasts = [];
         this.lastId = 0;
         this.settings = {
             order: 'descending',
             placement: 'top',
         };
+        this.toastsRef = react_1.default.createRef();
+        this.isInitialized = false;
+        // Create container on demand.
+        // Cannot do it in constructor, because SSG/SSR apps would fail.
+        this.asyncInit = function () { return __awaiter(_this, void 0, void 0, function () {
+            var container, toastWrapper, _ReactDOM, _ReactDOMInternals, root;
+            var _a, _b;
+            return __generator(this, function (_c) {
+                if (this.isInitialized) {
+                    return [2 /*return*/];
+                }
+                container = (_a = (0, utils_1.getContainer)(TOASTS_CONTAINER_ID)) !== null && _a !== void 0 ? _a : (_b = (0, utils_1.getDocument)()) === null || _b === void 0 ? void 0 : _b.body;
+                if (!container) {
+                    return [2 /*return*/];
+                }
+                this.isInitialized = true;
+                toastWrapper = react_1.default.createElement(ToastWrapper_1.ToastWrapper, { ref: this.toastsRef });
+                _ReactDOM = ReactDOM;
+                // v18 mode
+                if (_ReactDOM.createRoot) {
+                    _ReactDOMInternals = _ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+                    // suppress warning about importing createRoot from react-dom/client
+                    if (_ReactDOMInternals) {
+                        _ReactDOMInternals.usingClientEntryPoint = true;
+                    }
+                    root = _ReactDOM.createRoot(container);
+                    root.render(toastWrapper);
+                    // revert suppression, not to influence users app
+                    if (_ReactDOMInternals) {
+                        _ReactDOMInternals.usingClientEntryPoint = false;
+                    }
+                }
+                else {
+                    // v17 and before
+                    ReactDOM.render(toastWrapper, container);
+                }
+                return [2 /*return*/];
+            });
+        }); };
     }
     /**
      * Set global Toaster settings for toasts order and placement.
      * Settings will be applied to new toasts on the page.
      */
     Toaster.prototype.setSettings = function (newSettings) {
+        var _this = this;
         var _a, _b, _c;
         (_a = newSettings.placement) !== null && _a !== void 0 ? _a : (newSettings.placement = this.settings.placement);
         (_b = newSettings.order) !== null && _b !== void 0 ? _b : (newSettings.order = ((_c = newSettings.placement) === null || _c === void 0 ? void 0 : _c.startsWith('bottom'))
             ? 'ascending'
             : 'descending');
         this.settings = newSettings;
+        this.asyncInit().then(function () {
+            var _a, _b;
+            (_a = _this.toastsRef.current) === null || _a === void 0 ? void 0 : _a.setPlacement((_b = _this.settings.placement) !== null && _b !== void 0 ? _b : 'top');
+        });
     };
     Toaster.prototype.positive = function (content, options) {
         return this.createToast(content, 'positive', options);
@@ -84,11 +188,11 @@ var Toaster = /** @class */ (function () {
         this.updateView();
     };
     Toaster.prototype.updateView = function () {
-        var container = (0, utils_1.getContainer)(TOASTS_CONTAINER_ID);
-        if (!container) {
-            return;
-        }
-        react_dom_1.default.render(react_1.default.createElement(ToastWrapper_1.ToastWrapper, { toasts: this.toasts, placement: this.settings.placement }), container);
+        var _this = this;
+        this.asyncInit().then(function () {
+            var _a;
+            (_a = _this.toastsRef.current) === null || _a === void 0 ? void 0 : _a.setToasts(_this.toasts);
+        });
     };
     Toaster.prototype.closeToast = function (toastId) {
         this.toasts = this.toasts.map(function (toast) {

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

@@ -26,24 +26,7 @@ export declare type PopoverProps = {
  * with pre-configured props and plugins (e.g. lazy mounting, focus, etc).
  * @private
  */
-export declare const Popover: React.ForwardRefExoticComponent<Pick<{
-    /**
-     * Controlled flag for whether the popover is visible.
-     */
-    visible?: boolean | undefined;
-    /**
-     * Determines the events that cause the popover to show.
-     * Should not be used when `visible` is set.
-     * @see [tippy.js trigger prop](https://atomiks.github.io/tippyjs/v6/all-props/#trigger)
-     */
-    trigger?: string | undefined;
-    /**
-     * Placement of the popover content.
-     * @default 'bottom-start'
-     * @see [tippy.js placement prop](https://atomiks.github.io/tippyjs/v6/all-props/#placement).
-     */
-    placement?: import("@popperjs/core").Placement | undefined;
-} & Omit<TippyProps, "placement" | "trigger" | "visible">, "disabled" | "placement" | "trigger" | "visible" | "content" | "render" | "animateFill" | "appendTo" | "aria" | "delay" | "duration" | "followCursor" | "getReferenceClientRect" | "hideOnClick" | "ignoreAttributes" | "inlinePositioning" | "interactive" | "interactiveBorder" | "interactiveDebounce" | "moveTransition" | "offset" | "plugins" | "popperOptions" | "showOnCreate" | "sticky" | "touch" | "triggerTarget" | "onAfterUpdate" | "onBeforeUpdate" | "onCreate" | "onDestroy" | "onHidden" | "onHide" | "onMount" | "onShow" | "onShown" | "onTrigger" | "onUntrigger" | "onClickOutside" | "allowHTML" | "animation" | "arrow" | "inertia" | "maxWidth" | "role" | "theme" | "zIndex" | "children" | "className" | "singleton" | "reference"> & React.RefAttributes<unknown>>;
+export declare const Popover: React.ForwardRefExoticComponent<Pick<PopoverProps, "disabled" | "children" | "placement" | "trigger" | "visible" | "content" | "render" | "animateFill" | "appendTo" | "aria" | "delay" | "duration" | "followCursor" | "getReferenceClientRect" | "hideOnClick" | "ignoreAttributes" | "inlinePositioning" | "interactive" | "interactiveBorder" | "interactiveDebounce" | "moveTransition" | "offset" | "plugins" | "popperOptions" | "showOnCreate" | "sticky" | "touch" | "triggerTarget" | "onAfterUpdate" | "onBeforeUpdate" | "onCreate" | "onDestroy" | "onHidden" | "onHide" | "onMount" | "onShow" | "onShown" | "onTrigger" | "onUntrigger" | "onClickOutside" | "allowHTML" | "animation" | "arrow" | "inertia" | "maxWidth" | "role" | "theme" | "zIndex" | "className" | "singleton" | "reference"> & React.RefAttributes<unknown>>;
 /**
  * Plugin to hide Popover when either Esc key is pressed,
  * or when the content inside is not tabbable and Tab key is pressed.

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

@@ -16,6 +16,10 @@ export declare type VirtualScrollProps = {
      * @default 10
      */
     bufferSize?: number;
+    /**
+     * Index of the first element on initial render.
+     */
+    scrollToIndex?: 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
@@ -38,5 +42,35 @@ export declare type VirtualScrollProps = {
  * />
  * @private
  */
-export declare const VirtualScroll: React.ForwardRefExoticComponent<Pick<VirtualScrollProps, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "itemsLength" | "itemRenderer" | "bufferSize"> & React.RefAttributes<HTMLDivElement>>;
+export declare const VirtualScroll: React.ForwardRefExoticComponent<Pick<VirtualScrollProps, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "itemsLength" | "itemRenderer" | "bufferSize" | "scrollToIndex"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * `useVirtualization` is used for efficiently rendering only the visible rows from a large list.
+ * It returns `outerProps` and `innerProps`, which need to be applied on 2 container elements and `visibleChildren` which is a list of virtualized items.
+ * @example
+ * const itemRenderer = React.useCallback((index: number) => (
+ *  <li key={index}>
+ *    This is my item #{index}
+ *  </li>
+ * ), [])
+ *
+ * const { outerProps, innerProps, visibleChildren } = useVirtualization({itemsLength: 1000, itemRenderer: itemRenderer});
+ * return (
+ *  <div {...outerProps}>
+ *   <ul {...innerProps}>
+ *    {visibleChildren}
+ *   </ul>
+ *  </div>
+ * );
+ * @private
+ */
+export declare const useVirtualization: (props: VirtualScrollProps) => {
+    outerProps: React.HTMLAttributes<HTMLElement>;
+    innerProps: {
+        readonly style: {
+            readonly willChange: "transform";
+        };
+        readonly ref: (instance: HTMLElement | null) => void;
+    };
+    visibleChildren: JSX.Element[];
+};
 export default VirtualScroll;