@itwin/itwinui-react 1.38.0 → 1.40.0

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

@@ -0,0 +1,84 @@
+"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 __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)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStickyColumns = 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_table_1 = require("react-table");
+react_table_1.actions.setScrolledLeft = 'setScrolledLeft';
+react_table_1.actions.setScrolledRight = 'setScrolledRight';
+var useStickyColumns = function (hooks) {
+    hooks.stateReducers.push(reducer);
+    hooks.useInstance.push(useInstance);
+};
+exports.useStickyColumns = useStickyColumns;
+var reducer = function (newState, action) {
+    var _a, _b;
+    if (action.type === react_table_1.actions.init) {
+        return __assign(__assign({}, newState), { sticky: {} });
+    }
+    if (action.type === react_table_1.actions.setScrolledLeft &&
+        ((_a = newState.sticky) === null || _a === void 0 ? void 0 : _a.isScrolledToLeft) !== action.value // Prevents unnecessary re-render
+    ) {
+        return __assign(__assign({}, newState), { sticky: __assign(__assign({}, newState.sticky), { isScrolledToLeft: action.value }) });
+    }
+    if (action.type === react_table_1.actions.setScrolledRight &&
+        ((_b = newState.sticky) === null || _b === void 0 ? void 0 : _b.isScrolledToRight) !== action.value // Prevents unnecessary re-render
+    ) {
+        return __assign(__assign({}, newState), { sticky: __assign(__assign({}, newState.sticky), { isScrolledToRight: action.value }) });
+    }
+    return newState;
+};
+var useInstance = function (instance) {
+    var flatHeaders = instance.flatHeaders;
+    // Edge case. Saving original sticky state in case sticky columns are reordered.
+    flatHeaders.forEach(function (header) {
+        var _a;
+        if (!header.originalSticky) {
+            header.originalSticky = (_a = header.sticky) !== null && _a !== void 0 ? _a : 'none';
+        }
+        header.sticky =
+            header.originalSticky === 'none' ? undefined : header.originalSticky;
+    });
+    // If there is a column that is sticked to the left, make every column prior to that sticky too.
+    var hasLeftStickyColumn = false;
+    __spreadArray([], flatHeaders, true).reverse().forEach(function (header) {
+        if (header.sticky === 'left') {
+            hasLeftStickyColumn = true;
+        }
+        if (hasLeftStickyColumn) {
+            header.sticky = 'left';
+        }
+    });
+    // If there is a column that is sticked to the right, make every column after to that sticky too.
+    var hasRightStickyColumn = false;
+    flatHeaders.forEach(function (header) {
+        if (header.sticky === 'right') {
+            hasRightStickyColumn = true;
+        }
+        if (hasRightStickyColumn) {
+            header.sticky = 'right';
+        }
+    });
+};

package/cjs/core/Table/utils.d.ts

@@ -1,2 +1,3 @@
 import { ColumnInstance } from 'react-table';
 export declare const getCellStyle: <T extends Record<string, unknown>>(column: ColumnInstance<T>, isTableResizing: boolean) => React.CSSProperties | undefined;
+export declare const getStickyStyle: <T extends Record<string, unknown>>(column: ColumnInstance<T>, columnList: ColumnInstance<T>[]) => React.CSSProperties;

package/cjs/core/Table/utils.js

@@ -1,6 +1,15 @@
 "use strict";
+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)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getCellStyle = void 0;
+exports.getStickyStyle = exports.getCellStyle = void 0;
 var getCellStyle = function (column, isTableResizing) {
     var style = {};
     style.flex = "1 1 145px";
@@ -24,3 +33,29 @@ var getCellStyle = function (column, isTableResizing) {
     return style;
 };
 exports.getCellStyle = getCellStyle;
+var getStickyStyle = function (column, columnList) {
+    if (!column.sticky) {
+        return {};
+    }
+    var left = 0;
+    for (var _i = 0, columnList_1 = columnList; _i < columnList_1.length; _i++) {
+        var col = columnList_1[_i];
+        if (col.id === column.id) {
+            break;
+        }
+        left += Number(col.width || col.resizeWidth || 0);
+    }
+    var right = 0;
+    for (var _a = 0, _b = __spreadArray([], columnList, true).reverse(); _a < _b.length; _a++) {
+        var col = _b[_a];
+        if (col.id === column.id) {
+            break;
+        }
+        right += Number(col.width || col.resizeWidth || 0);
+    }
+    return {
+        '--iui-table-sticky-left': column.sticky === 'left' ? "".concat(left, "px") : undefined,
+        '--iui-table-sticky-right': column.sticky === 'right' ? "".concat(right, "px") : undefined,
+    };
+};
+exports.getStickyStyle = getStickyStyle;

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

@@ -22,6 +22,7 @@ export default class Toaster {
     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.
@@ -41,7 +42,6 @@ export default class Toaster {
     };
     private createToast;
     private removeToast;
-    private createContainer;
     private updateView;
     private closeToast;
     closeAll(): void;

package/cjs/core/Toast/Toaster.js

@@ -10,6 +10,29 @@ 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) {
@@ -64,12 +87,13 @@ 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 = {
@@ -78,19 +102,60 @@ var Toaster = /** @class */ (function () {
         };
         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 _a, _b, _c, _d, _e;
+        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;
-        (_d = this.toastsRef.current) === null || _d === void 0 ? void 0 : _d.setPlacement((_e = this.settings.placement) !== null && _e !== void 0 ? _e : 'top');
+        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);
@@ -122,34 +187,12 @@ var Toaster = /** @class */ (function () {
         this.toasts = this.toasts.filter(function (toast) { return toast.id !== id; });
         this.updateView();
     };
-    // Create container on demand.
-    // Cannot do it in constructor, because SSG/SSR apps would fail.
-    Toaster.prototype.createContainer = function () {
-        return __awaiter(this, void 0, void 0, function () {
-            var container;
-            return __generator(this, function (_a) {
-                container = (0, utils_1.getContainer)(TOASTS_CONTAINER_ID);
-                if (!container) {
-                    return [2 /*return*/];
-                }
-                react_dom_1.default.render(react_1.default.createElement(ToastWrapper_1.ToastWrapper, { ref: this.toastsRef }), container);
-                return [2 /*return*/];
-            });
-        });
-    };
     Toaster.prototype.updateView = function () {
         var _this = this;
-        var _a;
-        if (!this.isInitialized) {
-            this.createContainer().then(function () {
-                var _a;
-                _this.isInitialized = true;
-                (_a = _this.toastsRef.current) === null || _a === void 0 ? void 0 : _a.setToasts(_this.toasts);
-            });
-        }
-        else {
-            (_a = this.toastsRef.current) === null || _a === void 0 ? void 0 : _a.setToasts(this.toasts);
-        }
+        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/index.d.ts

@@ -48,8 +48,8 @@ export { LabeledSelect } from './LabeledSelect';
 export type { LabeledSelectProps } from './LabeledSelect';
 export { LabeledTextarea } from './LabeledTextarea';
 export type { LabeledTextareaProps } from './LabeledTextarea';
-export { Menu, MenuItem, MenuDivider, MenuExtraContent } from './Menu';
-export type { MenuProps, MenuItemProps, MenuDividerProps, MenuExtraContentProps, } from './Menu';
+export { Menu, MenuItem, MenuDivider, MenuExtraContent, MenuItemSkeleton, } from './Menu';
+export type { MenuProps, MenuItemProps, MenuDividerProps, MenuExtraContentProps, MenuItemSkeletonProps, } from './Menu';
 export { Modal, ModalButtonBar, ModalContent } from './Modal';
 export type { ModalProps, ModalButtonBarProps, ModalContentProps, } from './Modal';
 export { ProgressLinear, ProgressRadial } from './ProgressIndicators';

package/cjs/core/index.js

@@ -3,9 +3,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Modal = exports.MenuExtraContent = exports.MenuDivider = exports.MenuItem = exports.Menu = exports.LabeledTextarea = exports.LabeledSelect = exports.InputGroup = exports.LabeledInput = exports.Label = exports.Input = exports.InformationPanelContent = exports.InformationPanelBody = exports.InformationPanelHeader = exports.InformationPanelWrapper = exports.InformationPanel = exports.HorizontalTab = exports.HorizontalTabs = exports.Tab = exports.VerticalTabs = exports.HeaderLogo = exports.HeaderButton = exports.HeaderBreadcrumbs = exports.Header = exports.Footer = exports.FileUploadTemplate = exports.FileUpload = exports.Fieldset = exports.ExpandableBlock = exports.ErrorPage = exports.DropdownMenu = exports.generateLocalizedStrings = exports.DatePicker = exports.ComboBox = exports.ColorPalette = exports.ColorInputPanel = exports.ColorBuilder = exports.ColorSwatch = exports.ColorPicker = exports.Checkbox = exports.Carousel = exports.ButtonGroup = exports.SplitButton = exports.IdeasButton = exports.IconButton = exports.DropdownButton = exports.Button = exports.Breadcrumbs = exports.Badge = exports.Alert = void 0;
-exports.UserIcon = exports.Text = exports.KbdKeys = exports.Kbd = exports.Code = exports.Blockquote = exports.Title = exports.Subheading = exports.Small = exports.Leading = exports.Headline = exports.Body = exports.Anchor = exports.TreeNodeExpander = exports.TreeNode = exports.Tree = exports.Tooltip = exports.ToggleSwitch = exports.ThemeProvider = exports.toaster = exports.TimePicker = exports.Tile = exports.Textarea = exports.TagContainer = exports.Tag = exports.SelectionColumn = exports.ExpanderColumn = exports.ActionColumn = exports.TablePaginator = exports.EditableCell = exports.DefaultCell = exports.FilterButtonBar = exports.tableFilters = exports.Table = exports.Surface = exports.StatusMessage = exports.Slider = exports.SkipToContentLink = exports.SidenavSubmenuHeader = exports.SidenavSubmenu = exports.SidenavButton = exports.SideNavigation = exports.Select = exports.RadioTileGroup = exports.RadioTile = exports.Radio = exports.ProgressRadial = exports.ProgressLinear = exports.ModalContent = exports.ModalButtonBar = void 0;
-exports.MiddleTextTruncation = exports.ColorValue = exports.useTheme = exports.getUserColor = exports.Wizard = exports.UserIconGroup = void 0;
+exports.MenuItemSkeleton = exports.MenuExtraContent = exports.MenuDivider = exports.MenuItem = exports.Menu = exports.LabeledTextarea = exports.LabeledSelect = exports.InputGroup = exports.LabeledInput = exports.Label = exports.Input = exports.InformationPanelContent = exports.InformationPanelBody = exports.InformationPanelHeader = exports.InformationPanelWrapper = exports.InformationPanel = exports.HorizontalTab = exports.HorizontalTabs = exports.Tab = exports.VerticalTabs = exports.HeaderLogo = exports.HeaderButton = exports.HeaderBreadcrumbs = exports.Header = exports.Footer = exports.FileUploadTemplate = exports.FileUpload = exports.Fieldset = exports.ExpandableBlock = exports.ErrorPage = exports.DropdownMenu = exports.generateLocalizedStrings = exports.DatePicker = exports.ComboBox = exports.ColorPalette = exports.ColorInputPanel = exports.ColorBuilder = exports.ColorSwatch = exports.ColorPicker = exports.Checkbox = exports.Carousel = exports.ButtonGroup = exports.SplitButton = exports.IdeasButton = exports.IconButton = exports.DropdownButton = exports.Button = exports.Breadcrumbs = exports.Badge = exports.Alert = void 0;
+exports.Text = exports.KbdKeys = exports.Kbd = exports.Code = exports.Blockquote = exports.Title = exports.Subheading = exports.Small = exports.Leading = exports.Headline = exports.Body = exports.Anchor = exports.TreeNodeExpander = exports.TreeNode = exports.Tree = exports.Tooltip = exports.ToggleSwitch = exports.ThemeProvider = exports.toaster = exports.TimePicker = exports.Tile = exports.Textarea = exports.TagContainer = exports.Tag = exports.SelectionColumn = exports.ExpanderColumn = exports.ActionColumn = exports.TablePaginator = exports.EditableCell = exports.DefaultCell = exports.FilterButtonBar = exports.tableFilters = exports.Table = exports.Surface = exports.StatusMessage = exports.Slider = exports.SkipToContentLink = exports.SidenavSubmenuHeader = exports.SidenavSubmenu = exports.SidenavButton = exports.SideNavigation = exports.Select = exports.RadioTileGroup = exports.RadioTile = exports.Radio = exports.ProgressRadial = exports.ProgressLinear = exports.ModalContent = exports.ModalButtonBar = exports.Modal = void 0;
+exports.MiddleTextTruncation = exports.ColorValue = exports.useTheme = exports.getUserColor = exports.Wizard = exports.UserIconGroup = exports.UserIcon = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -85,6 +85,7 @@ Object.defineProperty(exports, "Menu", { enumerable: true, get: function () { re
 Object.defineProperty(exports, "MenuItem", { enumerable: true, get: function () { return Menu_1.MenuItem; } });
 Object.defineProperty(exports, "MenuDivider", { enumerable: true, get: function () { return Menu_1.MenuDivider; } });
 Object.defineProperty(exports, "MenuExtraContent", { enumerable: true, get: function () { return Menu_1.MenuExtraContent; } });
+Object.defineProperty(exports, "MenuItemSkeleton", { enumerable: true, get: function () { return Menu_1.MenuItemSkeleton; } });
 var Modal_1 = require("./Modal");
 Object.defineProperty(exports, "Modal", { enumerable: true, get: function () { return Modal_1.Modal; } });
 Object.defineProperty(exports, "ModalButtonBar", { enumerable: true, get: function () { return Modal_1.ModalButtonBar; } });

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" | "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>>;
+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;