@itwin/itwinui-react 3.12.2 → 3.13.1

package/DEV-esm/core/ColorPicker/ColorPickerContext.js

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export const ColorPickerContext = React.createContext(void 0);
+export const useColorPickerContext = ()=>{
+    let context = React.useContext(ColorPickerContext);
+    if (void 0 == context) throw new Error('useColorPickerContext must be used within a ColorPickerContext.Provider');
+    return context;
+};

package/DEV-esm/core/ColorPicker/ColorSwatch.js

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import cx from 'classnames';
+import { Box, ButtonBase } from '../../utils/index.js';
+import { getColorValue } from './ColorPicker.js';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
+export const ColorSwatch = React.forwardRef((props, ref)=>{
+    let { color, style, onClick, isActive, className, ...rest } = props;
+    let colorString = React.useMemo(()=>'string' == typeof color ? color : getColorValue(color).toHslString(true), [
+        color
+    ]);
+    return React.createElement(Box, {
+        as: onClick ? ButtonBase : 'span',
+        className: cx('iui-color-swatch', {
+            'iui-active': isActive
+        }, className),
+        style: {
+            '--iui-color-swatch-background': colorString,
+            ...style
+        },
+        onClick: onClick,
+        "aria-pressed": !!onClick && isActive ? 'true' : void 0,
+        ref: ref,
+        ...rest
+    }, props.children ?? React.createElement(VisuallyHidden, null, colorString.toUpperCase()));
+});
+ColorSwatch.displayName = 'ColorSwatch';

package/DEV-esm/core/ComboBox/ComboBox.js

@@ -0,0 +1,299 @@
+import * as React from 'react';
+import { MenuExtraContent } from '../Menu/MenuExtraContent.js';
+import { SelectTag } from '../Select/SelectTag.js';
+import { Text } from '../Typography/Text.js';
+import { mergeRefs, useLatestRef, useLayoutEffect, AutoclearingHiddenLiveRegion, useId, useControlledState } from '../../utils/index.js';
+import { usePopover } from '../Popover/Popover.js';
+import { ComboBoxRefsContext, ComboBoxStateContext } from './helpers.js';
+import { ComboBoxEndIcon } from './ComboBoxEndIcon.js';
+import { ComboBoxInput } from './ComboBoxInput.js';
+import { ComboBoxInputContainer } from './ComboBoxInputContainer.js';
+import { ComboBoxMenu } from './ComboBoxMenu.js';
+import { ComboBoxMenuItem } from './ComboBoxMenuItem.js';
+let isMultipleEnabled = (variable, multiple)=>multiple && (Array.isArray(variable) || null == variable);
+let isSingleOnChange = (onChange, multiple)=>!multiple;
+let getOptionId = (option, idPrefix)=>option.id ?? `${idPrefix}-option-${option.label.replace(/\s/g, '-')}`;
+export const ComboBox = React.forwardRef((props, forwardedRef)=>{
+    let idPrefix = useId();
+    let defaultFilterFunction = React.useCallback((options, inputValue)=>options.filter((option)=>option.label.toLowerCase().includes(inputValue.toLowerCase())), []);
+    let { options, value: valueProp, onChange, filterFunction = defaultFilterFunction, inputProps, endIconProps, dropdownMenuProps, emptyStateMessage = 'No options found', itemRenderer, enableVirtualization = false, multiple = false, onShow: onShowProp, onHide: onHideProp, id = inputProps?.id ? `iui-${inputProps.id}-cb` : idPrefix, defaultValue, ...rest } = props;
+    let inputRef = React.useRef(null);
+    let menuRef = React.useRef(null);
+    let onChangeProp = useLatestRef(onChange);
+    let optionsRef = useLatestRef(options);
+    let filterFunctionRef = useLatestRef(filterFunction);
+    let optionsExtraInfo = React.useMemo(()=>{
+        let newOptionsExtraInfo = {};
+        options.forEach((option, index)=>{
+            newOptionsExtraInfo[getOptionId(option, id)] = {
+                __originalIndex: index
+            };
+        });
+        return newOptionsExtraInfo;
+    }, [
+        id,
+        options
+    ]);
+    let getSelectedIndexes = React.useCallback((value)=>{
+        if (void 0 === value) return;
+        if (isMultipleEnabled(value, multiple)) {
+            let indexArray = [];
+            value?.forEach((value)=>{
+                let indexToAdd = options.findIndex((option)=>option.value === value);
+                if (indexToAdd > -1) indexArray.push(indexToAdd);
+            });
+            return indexArray;
+        }
+        return options.findIndex((option)=>option.value === value);
+    }, [
+        multiple,
+        options
+    ]);
+    let [selectedIndexes, setSelectedIndexes] = useControlledState(getSelectedIndexes(defaultValue) ?? (multiple ? [] : -1), getSelectedIndexes(valueProp));
+    let previousValue = React.useRef(valueProp);
+    useLayoutEffect(()=>{
+        if (valueProp !== previousValue.current) {
+            previousValue.current = valueProp;
+            if (void 0 === valueProp) isMultipleEnabled(selectedIndexes, multiple) ? setSelectedIndexes([]) : setSelectedIndexes(-1);
+        }
+    }, [
+        multiple,
+        selectedIndexes,
+        setSelectedIndexes,
+        valueProp
+    ]);
+    let [isOpen, setIsOpen] = React.useState(false);
+    let [focusedIndex, setFocusedIndex] = React.useState(-1);
+    let onShowRef = useLatestRef(onShowProp);
+    let onHideRef = useLatestRef(onHideProp);
+    let show = React.useCallback(()=>{
+        setIsOpen(true);
+        onShowRef.current?.();
+    }, [
+        onShowRef
+    ]);
+    let hide = React.useCallback(()=>{
+        setIsOpen(false);
+        onHideRef.current?.();
+    }, [
+        onHideRef
+    ]);
+    useLayoutEffect(()=>{
+        if (isOpen) {
+            inputRef.current?.focus();
+            if (!isMultipleEnabled(selectedIndexes, multiple)) setFocusedIndex(selectedIndexes ?? -1);
+        } else {
+            setFocusedIndex(-1);
+            if (!isMultipleEnabled(selectedIndexes, multiple)) setInputValue(selectedIndexes >= 0 ? optionsRef.current[selectedIndexes]?.label ?? '' : '');
+        }
+    }, [
+        isOpen,
+        multiple,
+        optionsRef,
+        selectedIndexes
+    ]);
+    let previousOptions = React.useRef(options);
+    React.useEffect(()=>{
+        if (options !== previousOptions.current) {
+            previousOptions.current = options;
+            onOptionsChange();
+        }
+        function onOptionsChange() {
+            isMultipleEnabled(selectedIndexes, multiple) ? setFocusedIndex(-1) : setFocusedIndex(selectedIndexes);
+            if (!isMultipleEnabled(selectedIndexes, multiple) && !isOpen) setInputValue(selectedIndexes >= 0 ? options[selectedIndexes]?.label : '');
+        }
+    }, [
+        options,
+        isOpen,
+        multiple,
+        selectedIndexes
+    ]);
+    let [inputValue, setInputValue] = React.useState(inputProps?.value?.toString() ?? '');
+    let [isInputDirty, setIsInputDirty] = React.useState(false);
+    let filteredOptions = React.useMemo(()=>{
+        if (!isInputDirty) return options;
+        return filterFunctionRef.current?.(options, inputValue);
+    }, [
+        filterFunctionRef,
+        inputValue,
+        options,
+        isInputDirty
+    ]);
+    let [liveRegionSelection, setLiveRegionSelection] = React.useState('');
+    let handleOnInput = React.useCallback((event)=>{
+        let { value } = event.currentTarget;
+        setInputValue(value);
+        show();
+        setIsInputDirty(true);
+        if (-1 != focusedIndex) setFocusedIndex(-1);
+        inputProps?.onChange?.(event);
+    }, [
+        focusedIndex,
+        inputProps,
+        show
+    ]);
+    let isMenuItemSelected = React.useCallback((index)=>{
+        if (isMultipleEnabled(selectedIndexes, multiple)) return selectedIndexes.includes(index);
+        return selectedIndexes === index;
+    }, [
+        multiple,
+        selectedIndexes
+    ]);
+    let selectedChangeHandler = React.useCallback((__originalIndex, action)=>{
+        if (!isMultipleEnabled(selectedIndexes, multiple)) return;
+        if ('added' === action) return [
+            ...selectedIndexes,
+            __originalIndex
+        ];
+        return selectedIndexes?.filter((index)=>index !== __originalIndex);
+    }, [
+        selectedIndexes,
+        multiple
+    ]);
+    let onChangeHandler = React.useCallback((__originalIndex, actionType, newSelectedIndexes)=>{
+        if (isSingleOnChange(onChangeProp.current, multiple)) onChangeProp.current?.(optionsRef.current[__originalIndex]?.value);
+        else actionType && newSelectedIndexes && onChangeProp.current?.(newSelectedIndexes?.map((index)=>optionsRef.current[index]?.value), {
+            value: optionsRef.current[__originalIndex]?.value,
+            type: actionType
+        });
+    }, [
+        multiple,
+        onChangeProp,
+        optionsRef
+    ]);
+    let onClickHandler = React.useCallback((__originalIndex)=>{
+        inputRef.current?.focus({
+            preventScroll: true
+        });
+        if (optionsRef.current[__originalIndex]?.disabled) return;
+        setIsInputDirty(false);
+        if (multiple) {
+            let actionType = isMenuItemSelected(__originalIndex) ? 'removed' : 'added';
+            let newSelectedIndexes = selectedChangeHandler(__originalIndex, actionType);
+            if (null == newSelectedIndexes) return;
+            setSelectedIndexes(newSelectedIndexes);
+            onChangeHandler(__originalIndex, actionType, newSelectedIndexes);
+            setLiveRegionSelection(newSelectedIndexes.map((item)=>optionsRef.current[item]?.label).filter(Boolean).join(', '));
+        } else {
+            setSelectedIndexes(__originalIndex);
+            hide();
+            onChangeHandler(__originalIndex);
+        }
+    }, [
+        selectedChangeHandler,
+        isMenuItemSelected,
+        multiple,
+        onChangeHandler,
+        optionsRef,
+        hide,
+        setSelectedIndexes
+    ]);
+    let getMenuItem = React.useCallback((option, filteredIndex)=>{
+        let optionId = getOptionId(option, id);
+        let { __originalIndex } = optionsExtraInfo[optionId];
+        let { icon, startIcon: startIconProp, label, ...restOptions } = option;
+        let startIcon = startIconProp ?? icon;
+        let customItem = itemRenderer ? itemRenderer(option, {
+            isFocused: focusedIndex === __originalIndex,
+            isSelected: isMenuItemSelected(__originalIndex),
+            index: __originalIndex,
+            id: optionId
+        }) : null;
+        return customItem ? React.cloneElement(customItem, {
+            onClick: (e)=>{
+                onClickHandler(__originalIndex);
+                customItem.props.onClick?.(e);
+            },
+            focused: focusedIndex === __originalIndex,
+            'data-iui-index': __originalIndex,
+            'data-iui-filtered-index': filteredIndex,
+            ref: mergeRefs(customItem.props.ref, (el)=>{
+                if (!enableVirtualization && focusedIndex === __originalIndex) el?.scrollIntoView({
+                    block: 'nearest'
+                });
+            })
+        }) : React.createElement(ComboBoxMenuItem, {
+            key: optionId,
+            id: optionId,
+            startIcon: startIcon,
+            ...restOptions,
+            isSelected: isMenuItemSelected(__originalIndex),
+            onClick: ()=>{
+                onClickHandler(__originalIndex);
+            },
+            index: __originalIndex,
+            "data-iui-filtered-index": filteredIndex
+        }, label);
+    }, [
+        enableVirtualization,
+        focusedIndex,
+        id,
+        isMenuItemSelected,
+        itemRenderer,
+        onClickHandler,
+        optionsExtraInfo
+    ]);
+    let emptyContent = React.useMemo(()=>React.createElement(React.Fragment, null, React.isValidElement(emptyStateMessage) ? emptyStateMessage : React.createElement(MenuExtraContent, null, React.createElement(Text, {
+            isMuted: true
+        }, emptyStateMessage))), [
+        emptyStateMessage
+    ]);
+    let popover = usePopover({
+        visible: isOpen,
+        onVisibleChange: (open)=>open ? show() : hide(),
+        matchWidth: true,
+        closeOnOutsideClick: true,
+        interactions: {
+            click: false,
+            focus: true
+        }
+    });
+    return React.createElement(ComboBoxRefsContext.Provider, {
+        value: {
+            inputRef,
+            menuRef,
+            optionsExtraInfo
+        }
+    }, React.createElement(ComboBoxStateContext.Provider, {
+        value: {
+            id,
+            isOpen,
+            focusedIndex,
+            setFocusedIndex,
+            onClickHandler,
+            enableVirtualization,
+            filteredOptions,
+            getMenuItem,
+            multiple,
+            popover,
+            show,
+            hide
+        }
+    }, React.createElement(ComboBoxInputContainer, {
+        ref: forwardedRef,
+        disabled: inputProps?.disabled,
+        ...rest
+    }, React.createElement(React.Fragment, null, React.createElement(ComboBoxInput, {
+        value: inputValue,
+        disabled: inputProps?.disabled,
+        ...inputProps,
+        onChange: handleOnInput,
+        selectTags: isMultipleEnabled(selectedIndexes, multiple) ? selectedIndexes?.map((index)=>{
+            let item = options[index];
+            return React.createElement(SelectTag, {
+                key: item.label,
+                label: item.label
+            });
+        }).filter(Boolean) : void 0
+    })), React.createElement(ComboBoxEndIcon, {
+        ...endIconProps,
+        disabled: inputProps?.disabled,
+        isOpen: isOpen
+    }), multiple ? React.createElement(AutoclearingHiddenLiveRegion, {
+        text: liveRegionSelection
+    }) : null), React.createElement(ComboBoxMenu, {
+        as: "div",
+        ...dropdownMenuProps
+    }, filteredOptions.length > 0 && !enableVirtualization ? filteredOptions.map(getMenuItem) : emptyContent)));
+});
+ComboBox.displayName = 'ComboBox';

package/DEV-esm/core/ComboBox/ComboBox.types-test.js

@@ -0,0 +1,78 @@
+import { useRef } from 'react';
+import { ComboBox } from './ComboBox.js';
+()=>{
+    let ref = useRef(null);
+    return React.createElement(ComboBox, {
+        options: [
+            {
+                label: 'Item 1',
+                value: 1
+            },
+            {
+                label: 'Item 2',
+                value: 2
+            },
+            {
+                label: 'Item 3',
+                value: 3
+            }
+        ],
+        onChange: (value)=>{
+            let returnValue = value;
+            return returnValue;
+        },
+        ref: ref
+    });
+};
+()=>React.createElement(ComboBox, {
+        options: [
+            {
+                label: 'Item 1',
+                value: 1
+            },
+            {
+                label: 'Item 2',
+                value: 2
+            },
+            {
+                label: 'Item 3',
+                value: 3
+            }
+        ],
+        onChange: (value)=>{
+            let returnValue = value;
+            return returnValue;
+        }
+    });
+()=>React.createElement(ComboBox, {
+        options: [
+            {
+                label: 'Item 1',
+                value: "1"
+            },
+            {
+                label: 'Item 2',
+                value: "2"
+            },
+            {
+                label: 'Item 3',
+                value: "3"
+            }
+        ],
+        onChange: (value)=>{
+            let returnValue = value;
+            return returnValue;
+        }
+    });
+()=>React.createElement(React.Fragment, null, React.createElement(ComboBox, {
+        options: [
+            {
+                label: 'Item #1',
+                value: 1
+            }
+        ],
+        onChange: (value)=>{
+            let returnValue = value;
+            return returnValue;
+        }
+    }));

package/DEV-esm/core/ComboBox/ComboBoxEndIcon.js

@@ -0,0 +1,19 @@
+import cx from 'classnames';
+import * as React from 'react';
+import { SvgCaretDownSmall } from '../../utils/index.js';
+import { Icon } from '../Icon/Icon.js';
+export const ComboBoxEndIcon = React.forwardRef((props, forwardedRef)=>{
+    let { className, children, disabled, isOpen, ...rest } = props;
+    return React.createElement(Icon, {
+        as: "span",
+        ref: forwardedRef,
+        className: cx('iui-end-icon', {
+            'iui-disabled': disabled,
+            'iui-open': isOpen
+        }, className),
+        ...rest
+    }, children ?? React.createElement(SvgCaretDownSmall, {
+        "aria-hidden": true
+    }));
+});
+ComboBoxEndIcon.displayName = 'ComboBoxEndIcon';

package/DEV-esm/core/ComboBox/ComboBoxInput.js

@@ -0,0 +1,122 @@
+import * as React from 'react';
+import { Input } from '../Input/Input.js';
+import { useSafeContext, useMergedRefs, useContainerWidth, mergeEventHandlers, useLatestRef } from '../../utils/index.js';
+import { ComboBoxMultipleContainer } from './ComboBoxMultipleContainer.js';
+import { ComboBoxStateContext, ComboBoxRefsContext } from './helpers.js';
+export const ComboBoxInput = React.forwardRef((props, forwardedRef)=>{
+    let { selectTags, size, style, ...rest } = props;
+    let { isOpen, id, focusedIndex, setFocusedIndex, enableVirtualization, multiple, onClickHandler, popover, show, hide } = useSafeContext(ComboBoxStateContext);
+    let { inputRef, menuRef, optionsExtraInfo } = useSafeContext(ComboBoxRefsContext);
+    let refs = useMergedRefs(inputRef, popover.refs.setReference, forwardedRef);
+    let focusedIndexRef = useLatestRef(focusedIndex ?? -1);
+    let getIdFromIndex = (index)=>menuRef.current?.querySelector(`[data-iui-index="${index}"]`)?.id ?? '';
+    let handleKeyDown = React.useCallback((event)=>{
+        let length = Object.keys(optionsExtraInfo).length ?? 0;
+        if (event.altKey) return;
+        switch(event.key){
+            case 'ArrowDown':
+                {
+                    event.preventDefault();
+                    if (!isOpen) return show();
+                    if (0 === length) return;
+                    if (-1 === focusedIndexRef.current) {
+                        let currentElement = menuRef.current?.querySelector('[data-iui-index]');
+                        return setFocusedIndex(Number(currentElement?.getAttribute('data-iui-index') ?? 0));
+                    }
+                    if (enableVirtualization && !menuRef.current?.querySelector(`[data-iui-index="${focusedIndexRef.current}"]`)?.nextElementSibling) return;
+                    let nextIndex = focusedIndexRef.current;
+                    do {
+                        let currentElement = menuRef.current?.querySelector(`[data-iui-index="${nextIndex}"]`);
+                        let nextElement = currentElement?.nextElementSibling ?? menuRef.current?.querySelector('[data-iui-index]');
+                        nextIndex = Number(nextElement?.getAttribute('data-iui-index'));
+                        if (nextElement) return setFocusedIndex(nextIndex);
+                    }while (nextIndex !== focusedIndexRef.current)
+                    break;
+                }
+            case 'ArrowUp':
+                {
+                    event.preventDefault();
+                    if (!isOpen) return show();
+                    if (0 === length) return;
+                    if (enableVirtualization && !menuRef.current?.querySelector(`[data-iui-index="${focusedIndexRef.current}"]`)?.previousElementSibling) return;
+                    if (-1 === focusedIndexRef.current) return setFocusedIndex(Object.values(optionsExtraInfo)?.[length - 1].__originalIndex ?? -1);
+                    let prevIndex = focusedIndexRef.current;
+                    do {
+                        let currentElement = menuRef.current?.querySelector(`[data-iui-index="${prevIndex}"]`);
+                        let prevElement = currentElement?.previousElementSibling ?? menuRef.current?.querySelector('[data-iui-index]:last-of-type');
+                        prevIndex = Number(prevElement?.getAttribute('data-iui-index'));
+                        if (prevElement) return setFocusedIndex(prevIndex);
+                    }while (prevIndex !== focusedIndexRef.current)
+                    break;
+                }
+            case 'Enter':
+                event.preventDefault();
+                if (isOpen) {
+                    if (focusedIndexRef.current > -1) onClickHandler?.(focusedIndexRef.current);
+                } else show();
+                break;
+            case 'Escape':
+                event.preventDefault();
+                hide();
+                break;
+            case 'Tab':
+                hide();
+                break;
+        }
+    }, [
+        setFocusedIndex,
+        enableVirtualization,
+        focusedIndexRef,
+        isOpen,
+        menuRef,
+        onClickHandler,
+        optionsExtraInfo,
+        show,
+        hide
+    ]);
+    let wasOpenBeforeClick = React.useRef(false);
+    let handlePointerDown = React.useCallback(()=>{
+        wasOpenBeforeClick.current = isOpen;
+    }, [
+        isOpen
+    ]);
+    let handleClick = React.useCallback(()=>{
+        if (wasOpenBeforeClick.current) hide();
+        else show();
+        wasOpenBeforeClick.current = false;
+    }, [
+        hide,
+        show
+    ]);
+    let [tagContainerWidthRef, tagContainerWidth] = useContainerWidth();
+    return React.createElement(React.Fragment, null, React.createElement(Input, {
+        ref: refs,
+        "aria-expanded": isOpen,
+        "aria-activedescendant": isOpen && void 0 != focusedIndex && focusedIndex > -1 ? getIdFromIndex(focusedIndex) : void 0,
+        role: "combobox",
+        "aria-controls": isOpen ? `${id}-list` : void 0,
+        "aria-autocomplete": "list",
+        spellCheck: false,
+        autoCapitalize: "none",
+        autoCorrect: "off",
+        style: {
+            ...multiple && {
+                paddingInlineStart: tagContainerWidth + 18
+            },
+            ...style
+        },
+        "aria-describedby": multiple ? `${id}-selected-live` : void 0,
+        size: size,
+        ...popover.getReferenceProps({
+            ...rest,
+            onPointerDown: mergeEventHandlers(props.onPointerDown, handlePointerDown),
+            onClick: mergeEventHandlers(props.onClick, handleClick),
+            onKeyDown: mergeEventHandlers(props.onKeyDown, handleKeyDown)
+        })
+    }), multiple && selectTags ? React.createElement(ComboBoxMultipleContainer, {
+        ref: tagContainerWidthRef,
+        selectedItems: selectTags,
+        id: `${id}-selected-live`
+    }) : null);
+});
+ComboBoxInput.displayName = 'ComboBoxInput';

package/DEV-esm/core/ComboBox/ComboBoxInputContainer.js

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { StatusMessage } from '../StatusMessage/StatusMessage.js';
+import { InputContainer, useSafeContext, InputWithIcon } from '../../utils/index.js';
+import { ComboBoxStateContext } from './helpers.js';
+export const ComboBoxInputContainer = React.forwardRef((props, forwardedRef)=>{
+    let { className, status, message, children, ...rest } = props;
+    let { id } = useSafeContext(ComboBoxStateContext);
+    return React.createElement(InputContainer, {
+        className: className,
+        status: status,
+        statusMessage: 'string' == typeof message ? React.createElement(StatusMessage, {
+            status: status
+        }, message) : React.isValidElement(message) && React.cloneElement(message, {
+            status
+        }),
+        ref: forwardedRef,
+        ...rest,
+        id: id
+    }, React.createElement(InputWithIcon, null, children));
+});
+ComboBoxInputContainer.displayName = 'ComboBoxInputContainer';

package/DEV-esm/core/ComboBox/ComboBoxMenu.js

@@ -0,0 +1,89 @@
+import * as React from 'react';
+import cx from 'classnames';
+import { useSafeContext, useMergedRefs, Portal, Box, useVirtualScroll, ShadowRoot, useLayoutEffect } from '../../utils/index.js';
+import { ComboBoxStateContext, ComboBoxRefsContext } from './helpers.js';
+import { List } from '../List/List.js';
+let VirtualizedComboBoxMenu = (props)=>{
+    let { children, ...rest } = props;
+    let { filteredOptions, getMenuItem, focusedIndex } = useSafeContext(ComboBoxStateContext);
+    let { menuRef } = useSafeContext(ComboBoxRefsContext);
+    let mostlySubLabeled = React.useMemo(()=>{
+        let numberOfSubLabels = 0;
+        for(let i = 0; i < Math.min(5, filteredOptions.length); i++)if (filteredOptions[i].sublabel) numberOfSubLabels++;
+        return numberOfSubLabels >= Math.min(3, filteredOptions.length);
+    }, [
+        filteredOptions
+    ]);
+    let focusedVisibleIndex = React.useMemo(()=>{
+        let currentElement = menuRef.current?.querySelector(`[data-iui-index="${focusedIndex}"]`);
+        if (!currentElement) return focusedIndex;
+        return Number(currentElement.getAttribute('data-iui-filtered-index') ?? focusedIndex);
+    }, [
+        focusedIndex,
+        menuRef
+    ]);
+    let virtualizer = useVirtualScroll({
+        count: filteredOptions.length || 1,
+        getScrollElement: ()=>menuRef.current,
+        estimateSize: ()=>mostlySubLabeled ? 48 : 36,
+        gap: -1
+    });
+    useLayoutEffect(()=>{
+        virtualizer.scrollToIndex(focusedVisibleIndex);
+    }, [
+        virtualizer,
+        focusedVisibleIndex
+    ]);
+    let virtualItemRenderer = React.useCallback((virtualItem)=>{
+        let menuItem = filteredOptions.length > 0 ? getMenuItem(filteredOptions[virtualItem.index], virtualItem.index) : children;
+        return React.cloneElement(menuItem, {
+            key: virtualItem.key,
+            ref: virtualizer.measureElement,
+            style: {
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width: '100%',
+                transform: `translateY(${virtualItem.start}px)`
+            }
+        });
+    }, [
+        filteredOptions,
+        getMenuItem,
+        children,
+        virtualizer.measureElement
+    ]);
+    return React.createElement(React.Fragment, null, React.createElement(ShadowRoot, null, React.createElement(Box, {
+        as: "div",
+        ...rest,
+        style: {
+            minBlockSize: virtualizer.getTotalSize(),
+            minInlineSize: '100%',
+            contain: 'strict',
+            ...props.style
+        }
+    }, React.createElement("slot", null))), React.createElement(React.Fragment, null, virtualizer.getVirtualItems().map((virtualItem)=>virtualItemRenderer(virtualItem))));
+};
+export const ComboBoxMenu = React.forwardRef((props, forwardedRef)=>{
+    let { className, children, style, ...rest } = props;
+    let { id, enableVirtualization, popover } = useSafeContext(ComboBoxStateContext);
+    let { menuRef } = useSafeContext(ComboBoxRefsContext);
+    let refs = useMergedRefs(popover.refs.setFloating, forwardedRef, menuRef);
+    return popover.open && React.createElement(Portal, {
+        portal: true
+    }, React.createElement(List, {
+        as: "div",
+        className: cx('iui-menu', className),
+        id: `${id}-list`,
+        role: "listbox",
+        ref: refs,
+        ...popover.getFloatingProps({
+            style: enableVirtualization ? {
+                maxInlineSize: 0,
+                ...style
+            } : style,
+            ...rest
+        })
+    }, enableVirtualization ? React.createElement(VirtualizedComboBoxMenu, null, children) : children));
+});
+ComboBoxMenu.displayName = 'ComboBoxMenu';