@itwin/itwinui-react 1.38.0 → 1.38.1

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

@@ -25,12 +25,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.VirtualScroll = void 0;
+exports.useVirtualization = 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 hooks_1 = require("../hooks");
 var useResizeObserver_1 = require("../hooks/useResizeObserver");
 var getScrollableParent = function (element, ownerDocument) {
     if (ownerDocument === void 0) { ownerDocument = document; }
@@ -52,6 +53,14 @@ 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 getElementHeightWithMargins = function (element) {
+    if (!element) {
+        return undefined;
+    }
+    var margin = parseFloat(getElementStyle(element, 'margin-top')) +
+        parseFloat(getElementStyle(element, 'margin-bottom'));
+    return getElementHeight(element) + (isNaN(margin) ? 0 : margin);
+};
 var getNumberOfNodesInHeight = function (childHeight, totalHeight) {
     if (!childHeight) {
         return 0;
@@ -59,7 +68,10 @@ var getNumberOfNodesInHeight = function (childHeight, totalHeight) {
     return Math.floor(totalHeight / childHeight);
 };
 var getTranslateValue = function (childHeight, startIndex) {
-    return childHeight * startIndex;
+    if (startIndex > 0) {
+        return childHeight * startIndex;
+    }
+    return 0;
 };
 var getVisibleNodeCount = function (childHeight, startIndex, childrenLength, scrollContainer) {
     return Math.min(childrenLength - startIndex, getNumberOfNodesInHeight(childHeight, getElementHeight(scrollContainer)));
@@ -85,21 +97,55 @@ var getVisibleNodeCount = function (childHeight, startIndex, childrenLength, scr
  * />
  * @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];
+exports.VirtualScroll = react_1.default.forwardRef(function (props, ref) {
+    var _a = (0, exports.useVirtualization)(props), innerProps = _a.innerProps, outerProps = _a.outerProps, visibleChildren = _a.visibleChildren;
+    return (react_1.default.createElement("div", __assign({}, outerProps, { ref: ref }),
+        react_1.default.createElement("div", __assign({}, innerProps), visibleChildren)));
+});
+/**
+ * `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
+ */
+var useVirtualization = function (props) {
+    var itemsLength = props.itemsLength, itemRenderer = props.itemRenderer, _a = props.bufferSize, bufferSize = _a === void 0 ? 10 : _a, scrollToIndex = props.scrollToIndex, style = props.style, rest = __rest(props, ["itemsLength", "itemRenderer", "bufferSize", "scrollToIndex", "style"]);
+    var _b = react_1.default.useState(0), startNode = _b[0], setStartNode = _b[1];
+    var _c = react_1.default.useState(0), visibleNodeCount = _c[0], setVisibleNodeCount = _c[1];
     var scrollContainer = react_1.default.useRef();
     var parentRef = react_1.default.useRef(null);
-    var childHeight = react_1.default.useRef(0);
+    var childHeight = react_1.default.useRef({ first: 0, middle: 0, last: 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 _d = react_1.default.useState(0), scrollContainerHeight = _d[0], setScrollContainerHeight = _d[1];
+    var visibleIndex = react_1.default.useRef({ start: 0, end: 0 });
+    // Used to mark when scroll container has height (updated by resize observer)
+    // because before that calculations are not right
+    var _e = react_1.default.useState(false), isMounted = _e[0], setIsMounted = _e[1];
     var onResize = react_1.default.useCallback(function (_a) {
         var height = _a.height;
+        // Initial value returned by resize observer is 0
+        // So wait for the next one
+        if (height > 0) {
+            setIsMounted(true);
+        }
         setScrollContainerHeight(height);
     }, []);
-    var resizeRef = (0, useResizeObserver_1.useResizeObserver)(onResize)[0];
+    var _f = (0, useResizeObserver_1.useResizeObserver)(onResize), resizeRef = _f[0], resizeObserver = _f[1];
     // Find scrollable parent
     // Needed only on init
     react_1.default.useLayoutEffect(function () {
@@ -108,6 +154,14 @@ exports.VirtualScroll = react_1.default.forwardRef(function (_a, ref) {
         scrollContainer.current = scrollableParent;
         resizeRef(scrollableParent);
     }, [resizeRef]);
+    // Stop watching resize, when virtual scroll is unmounted
+    react_1.default.useLayoutEffect(function () {
+        return function () { return resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect(); };
+    }, [resizeObserver]);
+    var getScrollableContainer = function () {
+        var _a, _b;
+        return (_a = scrollContainer.current) !== null && _a !== void 0 ? _a : (_b = parentRef.current) === null || _b === void 0 ? void 0 : _b.ownerDocument.scrollingElement;
+    };
     var visibleChildren = react_1.default.useMemo(function () {
         var arr = [];
         var endIndex = Math.min(itemsLength, startNode + visibleNodeCount + bufferSize * 2);
@@ -118,27 +172,42 @@ exports.VirtualScroll = react_1.default.forwardRef(function (_a, ref) {
     }, [itemsLength, itemRenderer, bufferSize, startNode, visibleNodeCount]);
     // Get child height when children available
     react_1.default.useLayoutEffect(function () {
+        var _a, _b, _c, _d, _e, _f;
         if (!parentRef.current || !visibleChildren.length) {
             return;
         }
         var firstChild = parentRef.current.children.item(0);
-        childHeight.current = Number(getElementHeight(firstChild).toFixed(2));
+        var secondChild = parentRef.current.children.item(1);
+        var lastChild = parentRef.current.children.item(parentRef.current.children.length - 1);
+        var firstChildHeight = Number((_b = (_a = getElementHeightWithMargins(firstChild)) === null || _a === void 0 ? void 0 : _a.toFixed(2)) !== null && _b !== void 0 ? _b : 0);
+        childHeight.current = {
+            first: firstChildHeight,
+            middle: Number((_d = (_c = getElementHeightWithMargins(secondChild)) === null || _c === void 0 ? void 0 : _c.toFixed(2)) !== null && _d !== void 0 ? _d : firstChildHeight),
+            last: Number((_f = (_e = getElementHeightWithMargins(lastChild)) === null || _e === void 0 ? void 0 : _e.toFixed(2)) !== null && _f !== void 0 ? _f : firstChildHeight),
+        };
     }, [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;
+        var scrollableContainer = getScrollableContainer();
         if (!scrollableContainer) {
             return;
         }
-        var start = getNumberOfNodesInHeight(childHeight.current, scrollableContainer.scrollTop);
-        var startIndex = Math.max(0, start - bufferSize);
+        var start = getNumberOfNodesInHeight(childHeight.current.middle, Math.round(scrollableContainer.scrollTop));
+        var visibleNodes = getVisibleNodeCount(childHeight.current.middle, start, itemsLength, scrollableContainer);
+        // If there are less items at the end than buffer size
+        // show more items at the start.
+        // Have boundaries for edge cases, e.g. 1 item length
+        var startIndex = Math.min(Math.max(0, start - bufferSize), Math.max(0, itemsLength - bufferSize * 2 - visibleNodes));
+        visibleIndex.current = { start: start, end: start + visibleNodes };
         setStartNode(startIndex);
-        setVisibleNodeCount(getVisibleNodeCount(childHeight.current, start, itemsLength, scrollableContainer));
+        setVisibleNodeCount(visibleNodes);
         if (!parentRef.current) {
             return;
         }
-        parentRef.current.style.transform = "translateY(".concat(getTranslateValue(childHeight.current, startIndex), "px)");
+        parentRef.current.style.transform = "translateY(".concat(getTranslateValue(childHeight.current.middle, startIndex), "px)");
     }, [bufferSize, itemsLength]);
+    var onScroll = react_1.default.useCallback(function () {
+        updateVirtualScroll();
+    }, [updateVirtualScroll]);
     var removeScrollListener = react_1.default.useCallback(function () {
         var _a, _b;
         if (!onScrollRef.current) {
@@ -153,22 +222,86 @@ exports.VirtualScroll = react_1.default.forwardRef(function (_a, ref) {
     react_1.default.useLayoutEffect(function () {
         var _a, _b;
         removeScrollListener();
-        onScrollRef.current = updateVirtualScroll;
+        onScrollRef.current = onScroll;
         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);
+            (_b = parentRef.current) === null || _b === void 0 ? void 0 : _b.ownerDocument.addEventListener('scroll', onScroll);
         }
         else {
-            scrollContainer.current.addEventListener('scroll', updateVirtualScroll);
+            scrollContainer.current.addEventListener('scroll', onScroll);
         }
         return removeScrollListener;
-    }, [updateVirtualScroll, removeScrollListener]);
+    }, [onScroll, removeScrollListener]);
+    react_1.default.useLayoutEffect(function () {
+        if (!isMounted) {
+            return;
+        }
+        var scrollableContainer = getScrollableContainer();
+        if (!scrollableContainer || scrollToIndex == null) {
+            return;
+        }
+        // if `scrollToIndex` is not visible, scroll to it
+        if (scrollToIndex > visibleIndex.current.end ||
+            scrollToIndex < visibleIndex.current.start) {
+            var indexDiff = scrollToIndex > visibleIndex.current.end
+                ? scrollToIndex - visibleIndex.current.end
+                : scrollToIndex - visibleIndex.current.start;
+            if (scrollToIndex === 0) {
+                scrollableContainer.scrollTo({ top: 0 });
+                return;
+            }
+            // If go down: add to the existing scrollTop needed height
+            // If go up: calculate the exact scroll top
+            scrollableContainer.scrollTo({
+                top: indexDiff > 0
+                    ? Math.ceil(scrollableContainer.scrollTop) +
+                        indexDiff * childHeight.current.middle
+                    : scrollToIndex * childHeight.current.middle,
+            });
+        }
+        // if `scrollToIndex` is the first visible node
+        // ensure it is fully visible
+        if (scrollToIndex === visibleIndex.current.start) {
+            var roundedScrollTop = Math.round(scrollableContainer.scrollTop);
+            var diff = roundedScrollTop % childHeight.current.middle;
+            diff > 0 &&
+                scrollableContainer.scrollTo({
+                    top: roundedScrollTop - diff,
+                });
+            return;
+        }
+        // if `scrollToIndex` is the last visible node
+        // ensure it is fully visible
+        if (scrollToIndex === visibleIndex.current.end) {
+            var diff = (scrollableContainer.offsetHeight - childHeight.current.first) %
+                childHeight.current.middle;
+            var roundedScrollTop = Math.ceil(scrollableContainer.scrollTop);
+            var scrollTopMod = roundedScrollTop % childHeight.current.middle;
+            if (diff > 0 && scrollTopMod === 0) {
+                scrollableContainer.scrollTo({
+                    top: roundedScrollTop + childHeight.current.middle - diff,
+                });
+            }
+        }
+    }, [scrollToIndex, isMounted]);
     react_1.default.useLayoutEffect(function () {
+        if (!scrollContainerHeight) {
+            return;
+        }
         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)));
-});
+    }, [scrollContainerHeight, updateVirtualScroll]);
+    return {
+        outerProps: __assign({ style: __assign({ overflow: 'hidden', minHeight: itemsLength > 1
+                    ? Math.max(itemsLength - 2, 0) * childHeight.current.middle +
+                        childHeight.current.first +
+                        childHeight.current.last
+                    : childHeight.current.middle, width: '100%' }, style) }, rest),
+        innerProps: {
+            style: { willChange: 'transform' },
+            ref: (0, hooks_1.mergeRefs)(parentRef), // convert object ref to callback ref for better types
+        },
+        visibleChildren: visibleChildren,
+    };
+};
+exports.useVirtualization = useVirtualization;
 exports.default = exports.VirtualScroll;

package/esm/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/esm/core/ComboBox/ComboBox.js

@@ -57,7 +57,7 @@ var getOptionId = function (option, idPrefix) {
  */
 export 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.useState(function () {
         var _a, _b;
@@ -89,11 +89,11 @@ export var ComboBox = function (props) {
         });
     }
     // Reducer where all the component-wide state is stored
-    var _c = React.useReducer(comboBoxReducer, {
+    var _d = React.useReducer(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.useEffect(function () {
         var _a, _b;
         // When the dropdown opens
@@ -112,19 +112,19 @@ export var ComboBox = function (props) {
         }
     }, [isOpen, options, selectedIndex]);
     // Set min-width of menu to be same as input
-    var _e = React.useState(0), minWidth = _e[0], setMinWidth = _e[1];
+    var _f = React.useState(0), minWidth = _f[0], setMinWidth = _f[1];
     React.useEffect(function () {
         if (inputRef.current) {
             setMinWidth(inputRef.current.offsetWidth);
         }
     }, [isOpen]);
     // Initialize filtered options to the latest value options
-    var _f = React.useState(options), filteredOptions = _f[0], setFilteredOptions = _f[1];
+    var _g = React.useState(options), filteredOptions = _g[0], setFilteredOptions = _g[1];
     React.useEffect(function () {
         setFilteredOptions(options);
     }, [options]);
     // Filter options based on input value
-    var _g = React.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.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.useCallback(function (event) {
         var _a, _b;
         var value = event.currentTarget.value;
@@ -181,21 +181,28 @@ export var ComboBox = function (props) {
             }),
             'data-iui-index': __originalIndex,
             ref: 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.createElement(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.createElement(ComboBoxRefsContext.Provider, { value: { inputRef: inputRef, menuRef: menuRef, toggleButtonRef: toggleButtonRef, optionsExtraInfoRef: optionsExtraInfoRef } },
         React.createElement(ComboBoxActionContext.Provider, { value: dispatch },
-            React.createElement(ComboBoxStateContext.Provider, { value: { id: id, minWidth: minWidth, isOpen: isOpen, focusedIndex: focusedIndex } },
+            React.createElement(ComboBoxStateContext.Provider, { value: {
+                    id: id,
+                    minWidth: minWidth,
+                    isOpen: isOpen,
+                    focusedIndex: focusedIndex,
+                    enableVirtualization: enableVirtualization,
+                    filteredOptions: filteredOptions,
+                    getMenuItem: getMenuItem,
+                } },
                 React.createElement(ComboBoxInputContainer, __assign({ disabled: inputProps === null || inputProps === void 0 ? void 0 : inputProps.disabled }, rest),
                     React.createElement(ComboBoxInput, __assign({ value: inputValue }, inputProps, { onChange: handleOnInput })),
                     React.createElement(ComboBoxEndIcon, { disabled: inputProps === null || inputProps === void 0 ? void 0 : inputProps.disabled, isOpen: isOpen })),
                 React.createElement(ComboBoxDropdown, __assign({}, dropdownMenuProps),
-                    React.createElement(ComboBoxMenu, null, filteredOptions.length > 0 ? (filteredOptions.map(getMenuItem)) : (React.createElement(MenuExtraContent, null,
+                    React.createElement(ComboBoxMenu, null, filteredOptions.length > 0 && !enableVirtualization ? (filteredOptions.map(getMenuItem)) : (React.createElement(MenuExtraContent, null,
                         React.createElement(Text, { isMuted: true }, emptyStateMessage)))))))));
 };
 export default ComboBox;

package/esm/core/ComboBox/ComboBoxMenu.js

@@ -27,13 +27,49 @@ var __rest = (this && this.__rest) || function (s, e) {
 import cx from 'classnames';
 import React from 'react';
 import { Menu } from '../Menu';
-import { useSafeContext, useMergedRefs } from '../utils';
+import { Surface } from '../Surface';
+import { useSafeContext, useMergedRefs, useVirtualization, mergeRefs, getWindow, } from '../utils';
 import { ComboBoxStateContext, ComboBoxRefsContext } from './helpers';
+var VirtualizedComboBoxMenu = React.forwardRef(function (_a, forwardedRef) {
+    var _b, _c, _d;
+    var children = _a.children, style = _a.style, rest = __rest(_a, ["children", "style"]);
+    var _e = useSafeContext(ComboBoxStateContext), minWidth = _e.minWidth, id = _e.id, filteredOptions = _e.filteredOptions, getMenuItem = _e.getMenuItem, focusedIndex = _e.focusedIndex;
+    var menuRef = useSafeContext(ComboBoxRefsContext).menuRef;
+    var virtualItemRenderer = React.useCallback(function (index) {
+        return filteredOptions.length > 0
+            ? getMenuItem(filteredOptions[index])
+            : children;
+    }, // Here is expected empty state content
+    [filteredOptions, getMenuItem, children]);
+    var _f = 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 = 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.useMemo(function () { return ({
+        minWidth: minWidth,
+        maxWidth: "min(".concat(minWidth * 2, "px, 90vw)"),
+        maxHeight: 315,
+    }); }, [minWidth]);
+    return (React.createElement(Surface, __assign({ elevation: 1, style: __assign(__assign(__assign({}, styles), overflowY), style) }, rest),
+        React.createElement("div", __assign({}, outerProps),
+            React.createElement(Menu, { id: "".concat(id, "-list"), setFocus: false, role: 'listbox', ref: mergeRefs(menuRef, innerProps.ref, forwardedRef), style: innerProps.style }, visibleChildren))));
+});
 export var ComboBoxMenu = React.forwardRef(function (props, forwardedRef) {
     var className = props.className, style = props.style, rest = __rest(props, ["className", "style"]);
-    var _a = useSafeContext(ComboBoxStateContext), minWidth = _a.minWidth, id = _a.id;
+    var _a = useSafeContext(ComboBoxStateContext), minWidth = _a.minWidth, id = _a.id, enableVirtualization = _a.enableVirtualization;
     var menuRef = useSafeContext(ComboBoxRefsContext).menuRef;
     var refs = useMergedRefs(menuRef, forwardedRef);
-    return (React.createElement(Menu, __assign({ id: "".concat(id, "-list"), style: React.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: cx('iui-scroll', className) }, rest)));
+    var styles = React.useMemo(function () { return ({
+        minWidth: minWidth,
+        maxWidth: "min(".concat(minWidth * 2, "px, 90vw)"),
+        maxHeight: 315,
+    }); }, [minWidth]);
+    return (React.createElement(React.Fragment, null, !enableVirtualization ? (React.createElement(Menu, __assign({ id: "".concat(id, "-list"), style: __assign(__assign({}, styles), style), setFocus: false, role: 'listbox', ref: refs, className: cx('iui-scroll', className) }, rest))) : (React.createElement(VirtualizedComboBoxMenu, __assign({ ref: forwardedRef }, props)))));
 });
 ComboBoxMenu.displayName = 'ComboBoxMenu';

package/esm/core/ComboBox/ComboBoxMenuItem.js

@@ -30,10 +30,9 @@ import { useSafeContext, useMergedRefs } from '../utils';
 import { ComboBoxStateContext } from './helpers';
 export var ComboBoxMenuItem = React.memo(React.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 = useSafeContext(ComboBoxStateContext).focusedIndex;
+    var _c = useSafeContext(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/esm/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/esm/core/Select/Select.js

@@ -140,7 +140,7 @@ export var Select = function (props) {
         return options.find(function (option) { return option.value === value; });
     }, [options, value]);
     return (React.createElement("div", __assign({ className: cx('iui-input-with-icon', className), "aria-expanded": isOpen, "aria-haspopup": 'listbox', style: style }, rest),
-        React.createElement(DropdownMenu, __assign({ menuItems: menuItems, placement: 'bottom-start', className: cx('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.createElement(DropdownMenu, __assign({ menuItems: menuItems, placement: 'bottom-start', className: cx('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/esm/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/esm/core/Toast/Toaster.js

@@ -9,42 +9,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)) {
@@ -65,6 +29,7 @@ import { ToastWrapper } from './ToastWrapper';
 var TOASTS_CONTAINER_ID = 'iui-toasts-container';
 var Toaster = /** @class */ (function () {
     function Toaster() {
+        var _this = this;
         this.toasts = [];
         this.lastId = 0;
         this.settings = {
@@ -73,19 +38,40 @@ var Toaster = /** @class */ (function () {
         };
         this.toastsRef = React.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 = getContainer(TOASTS_CONTAINER_ID);
+            if (!container) {
+                // should never happen
+                resolve();
+                return;
+            }
+            _this.isInitialized = true;
+            ReactDOM.render(React.createElement(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);
@@ -117,34 +103,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 = getContainer(TOASTS_CONTAINER_ID);
-                if (!container) {
-                    return [2 /*return*/];
-                }
-                ReactDOM.render(React.createElement(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) {