@itwin/itwinui-react 1.38.0 → 1.38.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+### [1.38.1](https://www.github.com/iTwin/iTwinUI-react/compare/v1.38.0...v1.38.1) (2022-05-23)
+
+### Fixes
+
+* **Toaster:** Fix initial position setting ([#687](https://www.github.com/iTwin/iTwinUI-react/issues/687)) ([c58b747](https://www.github.com/iTwin/iTwinUI-react/commit/c58b74786bf90a165993afb2eec926f74b37a1eb))
+
 ## [1.38.0](https://www.github.com/iTwin/iTwinUI-react/compare/v1.37.3...v1.38.0) (2022-05-23)
 
 ### What's new

package/cjs/core/ComboBox/ComboBox.d.ts

@@ -51,6 +51,13 @@ export declare type ComboBoxProps<T> = {
         id: string;
         index: number;
     }) => JSX.Element;
+    /**
+     * If enabled, virtualization is used for the scrollable dropdown list.
+     * Use it if you expect a very long list of items.
+     * @default false
+     * @beta
+     */
+    enableVirtualization?: boolean;
 } & Pick<InputContainerProps, 'status'> & Omit<CommonProps, 'title'>;
 /**
  * ComboBox component that allows typing a value to filter the options in dropdown list.

package/cjs/core/ComboBox/ComboBox.js

@@ -63,7 +63,7 @@ var getOptionId = function (option, idPrefix) {
  */
 var ComboBox = function (props) {
     var _a;
-    var options = props.options, valueProp = props.value, onChange = props.onChange, filterFunction = props.filterFunction, inputProps = props.inputProps, dropdownMenuProps = props.dropdownMenuProps, _b = props.emptyStateMessage, emptyStateMessage = _b === void 0 ? 'No options found' : _b, itemRenderer = props.itemRenderer, rest = __rest(props, ["options", "value", "onChange", "filterFunction", "inputProps", "dropdownMenuProps", "emptyStateMessage", "itemRenderer"]);
+    var options = props.options, valueProp = props.value, onChange = props.onChange, filterFunction = props.filterFunction, inputProps = props.inputProps, dropdownMenuProps = props.dropdownMenuProps, _b = props.emptyStateMessage, emptyStateMessage = _b === void 0 ? 'No options found' : _b, itemRenderer = props.itemRenderer, _c = props.enableVirtualization, enableVirtualization = _c === void 0 ? false : _c, rest = __rest(props, ["options", "value", "onChange", "filterFunction", "inputProps", "dropdownMenuProps", "emptyStateMessage", "itemRenderer", "enableVirtualization"]);
     // Generate a stateful random id if not specified
     var id = react_1.default.useState(function () {
         var _a, _b;
@@ -95,11 +95,11 @@ var ComboBox = function (props) {
         });
     }
     // Reducer where all the component-wide state is stored
-    var _c = react_1.default.useReducer(helpers_1.comboBoxReducer, {
+    var _d = react_1.default.useReducer(helpers_1.comboBoxReducer, {
         isOpen: false,
         selectedIndex: -1,
         focusedIndex: -1,
-    }), _d = _c[0], isOpen = _d.isOpen, selectedIndex = _d.selectedIndex, focusedIndex = _d.focusedIndex, dispatch = _c[1];
+    }), _e = _d[0], isOpen = _e.isOpen, selectedIndex = _e.selectedIndex, focusedIndex = _e.focusedIndex, dispatch = _d[1];
     react_1.default.useEffect(function () {
         var _a, _b;
         // When the dropdown opens
@@ -118,19 +118,19 @@ var ComboBox = function (props) {
         }
     }, [isOpen, options, selectedIndex]);
     // Set min-width of menu to be same as input
-    var _e = react_1.default.useState(0), minWidth = _e[0], setMinWidth = _e[1];
+    var _f = react_1.default.useState(0), minWidth = _f[0], setMinWidth = _f[1];
     react_1.default.useEffect(function () {
         if (inputRef.current) {
             setMinWidth(inputRef.current.offsetWidth);
         }
     }, [isOpen]);
     // Initialize filtered options to the latest value options
-    var _f = react_1.default.useState(options), filteredOptions = _f[0], setFilteredOptions = _f[1];
+    var _g = react_1.default.useState(options), filteredOptions = _g[0], setFilteredOptions = _g[1];
     react_1.default.useEffect(function () {
         setFilteredOptions(options);
     }, [options]);
     // Filter options based on input value
-    var _g = react_1.default.useState((_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.value) !== null && _a !== void 0 ? _a : ''), inputValue = _g[0], setInputValue = _g[1];
+    var _h = react_1.default.useState((_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.value) !== null && _a !== void 0 ? _a : ''), inputValue = _h[0], setInputValue = _h[1];
     var handleOnInput = react_1.default.useCallback(function (event) {
         var _a, _b;
         var value = event.currentTarget.value;
@@ -187,21 +187,28 @@ var ComboBox = function (props) {
             }),
             'data-iui-index': __originalIndex,
             ref: (0, utils_1.mergeRefs)(customItem.props.ref, function (el) {
-                // will need to check for virtualization here too
-                if (focusedIndex === __originalIndex) {
+                if (!enableVirtualization && focusedIndex === __originalIndex) {
                     el === null || el === void 0 ? void 0 : el.scrollIntoView({ block: 'nearest' });
                 }
             }),
         })) : (react_1.default.createElement(ComboBoxMenuItem_1.ComboBoxMenuItem, __assign({ key: optionId, id: optionId }, option, { isSelected: selectedIndex === __originalIndex, onClick: function () { return dispatch(['select', __originalIndex]); }, index: __originalIndex }), option.label));
-    }, [focusedIndex, id, itemRenderer, selectedIndex]);
+    }, [enableVirtualization, focusedIndex, id, itemRenderer, selectedIndex]);
     return (react_1.default.createElement(helpers_1.ComboBoxRefsContext.Provider, { value: { inputRef: inputRef, menuRef: menuRef, toggleButtonRef: toggleButtonRef, optionsExtraInfoRef: optionsExtraInfoRef } },
         react_1.default.createElement(helpers_1.ComboBoxActionContext.Provider, { value: dispatch },
-            react_1.default.createElement(helpers_1.ComboBoxStateContext.Provider, { value: { id: id, minWidth: minWidth, isOpen: isOpen, focusedIndex: focusedIndex } },
+            react_1.default.createElement(helpers_1.ComboBoxStateContext.Provider, { value: {
+                    id: id,
+                    minWidth: minWidth,
+                    isOpen: isOpen,
+                    focusedIndex: focusedIndex,
+                    enableVirtualization: enableVirtualization,
+                    filteredOptions: filteredOptions,
+                    getMenuItem: getMenuItem,
+                } },
                 react_1.default.createElement(ComboBoxInputContainer_1.ComboBoxInputContainer, __assign({ disabled: inputProps === null || inputProps === void 0 ? void 0 : inputProps.disabled }, rest),
                     react_1.default.createElement(ComboBoxInput_1.ComboBoxInput, __assign({ value: inputValue }, inputProps, { onChange: handleOnInput })),
                     react_1.default.createElement(ComboBoxEndIcon_1.ComboBoxEndIcon, { disabled: inputProps === null || inputProps === void 0 ? void 0 : inputProps.disabled, isOpen: isOpen })),
                 react_1.default.createElement(ComboBoxDropdown_1.ComboBoxDropdown, __assign({}, dropdownMenuProps),
-                    react_1.default.createElement(ComboBoxMenu_1.ComboBoxMenu, null, filteredOptions.length > 0 ? (filteredOptions.map(getMenuItem)) : (react_1.default.createElement(Menu_1.MenuExtraContent, null,
+                    react_1.default.createElement(ComboBoxMenu_1.ComboBoxMenu, null, filteredOptions.length > 0 && !enableVirtualization ? (filteredOptions.map(getMenuItem)) : (react_1.default.createElement(Menu_1.MenuExtraContent, null,
                         react_1.default.createElement(Typography_1.Text, { isMuted: true }, emptyStateMessage)))))))));
 };
 exports.ComboBox = ComboBox;

package/cjs/core/ComboBox/ComboBoxMenu.js

@@ -33,13 +33,49 @@ exports.ComboBoxMenu = void 0;
 var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importDefault(require("react"));
 var Menu_1 = require("../Menu");
+var Surface_1 = require("../Surface");
 var utils_1 = require("../utils");
 var helpers_1 = require("./helpers");
+var VirtualizedComboBoxMenu = react_1.default.forwardRef(function (_a, forwardedRef) {
+    var _b, _c, _d;
+    var children = _a.children, style = _a.style, rest = __rest(_a, ["children", "style"]);
+    var _e = (0, utils_1.useSafeContext)(helpers_1.ComboBoxStateContext), minWidth = _e.minWidth, id = _e.id, filteredOptions = _e.filteredOptions, getMenuItem = _e.getMenuItem, focusedIndex = _e.focusedIndex;
+    var menuRef = (0, utils_1.useSafeContext)(helpers_1.ComboBoxRefsContext).menuRef;
+    var virtualItemRenderer = react_1.default.useCallback(function (index) {
+        return filteredOptions.length > 0
+            ? getMenuItem(filteredOptions[index])
+            : children;
+    }, // Here is expected empty state content
+    [filteredOptions, getMenuItem, children]);
+    var _f = (0, utils_1.useVirtualization)({
+        // 'Fool' VirtualScroll by passing length 1
+        // whenever there is no elements, to show empty state message
+        itemsLength: filteredOptions.length || 1,
+        itemRenderer: virtualItemRenderer,
+        scrollToIndex: focusedIndex,
+    }), outerProps = _f.outerProps, innerProps = _f.innerProps, visibleChildren = _f.visibleChildren;
+    var overflowY = ((_d = (_c = (_b = (0, utils_1.getWindow)()) === null || _b === void 0 ? void 0 : _b.CSS) === null || _c === void 0 ? void 0 : _c.supports) === null || _d === void 0 ? void 0 : _d.call(_c, 'overflow-x: overlay'))
+        ? { overflowY: 'overlay' }
+        : { overflowY: 'auto' };
+    var styles = react_1.default.useMemo(function () { return ({
+        minWidth: minWidth,
+        maxWidth: "min(".concat(minWidth * 2, "px, 90vw)"),
+        maxHeight: 315,
+    }); }, [minWidth]);
+    return (react_1.default.createElement(Surface_1.Surface, __assign({ elevation: 1, style: __assign(__assign(__assign({}, styles), overflowY), style) }, rest),
+        react_1.default.createElement("div", __assign({}, outerProps),
+            react_1.default.createElement(Menu_1.Menu, { id: "".concat(id, "-list"), setFocus: false, role: 'listbox', ref: (0, utils_1.mergeRefs)(menuRef, innerProps.ref, forwardedRef), style: innerProps.style }, visibleChildren))));
+});
 exports.ComboBoxMenu = react_1.default.forwardRef(function (props, forwardedRef) {
     var className = props.className, style = props.style, rest = __rest(props, ["className", "style"]);
-    var _a = (0, utils_1.useSafeContext)(helpers_1.ComboBoxStateContext), minWidth = _a.minWidth, id = _a.id;
+    var _a = (0, utils_1.useSafeContext)(helpers_1.ComboBoxStateContext), minWidth = _a.minWidth, id = _a.id, enableVirtualization = _a.enableVirtualization;
     var menuRef = (0, utils_1.useSafeContext)(helpers_1.ComboBoxRefsContext).menuRef;
     var refs = (0, utils_1.useMergedRefs)(menuRef, forwardedRef);
-    return (react_1.default.createElement(Menu_1.Menu, __assign({ id: "".concat(id, "-list"), style: react_1.default.useMemo(function () { return (__assign({ minWidth: minWidth, maxWidth: "min(".concat(minWidth * 2, "px, 90vw)"), maxHeight: 300 }, style)); }, [minWidth, style]), setFocus: false, role: 'listbox', ref: refs, className: (0, classnames_1.default)('iui-scroll', className) }, rest)));
+    var styles = react_1.default.useMemo(function () { return ({
+        minWidth: minWidth,
+        maxWidth: "min(".concat(minWidth * 2, "px, 90vw)"),
+        maxHeight: 315,
+    }); }, [minWidth]);
+    return (react_1.default.createElement(react_1.default.Fragment, null, !enableVirtualization ? (react_1.default.createElement(Menu_1.Menu, __assign({ id: "".concat(id, "-list"), style: __assign(__assign({}, styles), style), setFocus: false, role: 'listbox', ref: refs, className: (0, classnames_1.default)('iui-scroll', className) }, rest))) : (react_1.default.createElement(VirtualizedComboBoxMenu, __assign({ ref: forwardedRef }, props)))));
 });
 exports.ComboBoxMenu.displayName = 'ComboBoxMenu';

package/cjs/core/ComboBox/ComboBoxMenuItem.js

@@ -36,10 +36,9 @@ var utils_1 = require("../utils");
 var helpers_1 = require("./helpers");
 exports.ComboBoxMenuItem = react_1.default.memo(react_1.default.forwardRef(function (props, forwardedRef) {
     var children = props.children, isSelected = props.isSelected, disabled = props.disabled, value = props.value, onClick = props.onClick, sublabel = props.sublabel, _a = props.size, size = _a === void 0 ? !!sublabel ? 'large' : 'default' : _a, icon = props.icon, badge = props.badge, className = props.className, _b = props.role, role = _b === void 0 ? 'menuitem' : _b, index = props.index, rest = __rest(props, ["children", "isSelected", "disabled", "value", "onClick", "sublabel", "size", "icon", "badge", "className", "role", "index"]);
-    var focusedIndex = (0, utils_1.useSafeContext)(helpers_1.ComboBoxStateContext).focusedIndex;
+    var _c = (0, utils_1.useSafeContext)(helpers_1.ComboBoxStateContext), focusedIndex = _c.focusedIndex, enableVirtualization = _c.enableVirtualization;
     var focusRef = function (el) {
-        // will need to check for virtualization here too
-        if (focusedIndex === index) {
+        if (!enableVirtualization && focusedIndex === index) {
             el === null || el === void 0 ? void 0 : el.scrollIntoView({ block: 'nearest' });
         }
     };

package/cjs/core/ComboBox/helpers.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { SelectOption } from '../Select/Select';
 declare type ComboBoxAction = 'open' | 'close' | 'select' | 'focus';
 export declare const comboBoxReducer: (state: {
     isOpen: boolean;
@@ -17,11 +18,15 @@ export declare const ComboBoxRefsContext: React.Context<{
         __originalIndex: number;
     }>>;
 } | undefined>;
-export declare const ComboBoxStateContext: React.Context<{
+declare type ComboBoxStateContextProps<T = unknown> = {
     isOpen: boolean;
     id: string;
     minWidth: number;
-    focusedIndex?: number | undefined;
-} | undefined>;
+    enableVirtualization: boolean;
+    filteredOptions: SelectOption<T>[];
+    getMenuItem: (option: SelectOption<T>) => JSX.Element;
+    focusedIndex?: number;
+};
+export declare const ComboBoxStateContext: React.Context<ComboBoxStateContextProps<unknown> | undefined>;
 export declare const ComboBoxActionContext: React.Context<((x: [ComboBoxAction] | [ComboBoxAction, number]) => void) | undefined>;
 export {};

package/cjs/core/Select/Select.js

@@ -146,7 +146,7 @@ var Select = function (props) {
         return options.find(function (option) { return option.value === value; });
     }, [options, value]);
     return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-input-with-icon', className), "aria-expanded": isOpen, "aria-haspopup": 'listbox', style: style }, rest),
-        react_1.default.createElement(DropdownMenu_1.DropdownMenu, __assign({ menuItems: menuItems, placement: 'bottom-start', className: (0, classnames_1.default)('iui-scroll', menuClassName), style: __assign({ minWidth: minWidth, maxWidth: "min(".concat(minWidth * 2, "px, 90vw)"), maxHeight: "300px" }, menuStyle), role: 'listbox', onShow: onShowHandler, onHide: onHideHandler, disabled: disabled }, popoverProps, { visible: isOpen, onClickOutside: function (_, _a) {
+        react_1.default.createElement(DropdownMenu_1.DropdownMenu, __assign({ menuItems: menuItems, placement: 'bottom-start', className: (0, classnames_1.default)('iui-scroll', menuClassName), style: __assign({ minWidth: minWidth, maxWidth: "min(".concat(minWidth * 2, "px, 90vw)"), maxHeight: 315 }, menuStyle), role: 'listbox', onShow: onShowHandler, onHide: onHideHandler, disabled: disabled }, popoverProps, { visible: isOpen, onClickOutside: function (_, _a) {
                 var _b;
                 var target = _a.target;
                 if (!((_b = toggleButtonRef.current) === null || _b === void 0 ? void 0 : _b.contains(target))) {

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,42 +10,6 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-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)) {
@@ -70,6 +34,7 @@ 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 +43,40 @@ 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 = new Promise(function (resolve) {
+            if (_this.isInitialized) {
+                resolve();
+                return;
+            }
+            var container = (0, utils_1.getContainer)(TOASTS_CONTAINER_ID);
+            if (!container) {
+                // should never happen
+                resolve();
+                return;
+            }
+            _this.isInitialized = true;
+            react_dom_1.default.render(react_1.default.createElement(ToastWrapper_1.ToastWrapper, { ref: _this.toastsRef }), container);
+            resolve();
+        });
     }
     /**
      * 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 +108,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/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;