@itwin/itwinui-react 3.11.3 → 3.12.1

package/cjs/core/ComboBox/ComboBox.js

@@ -1,341 +1,440 @@
-"use strict";
-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;
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
 });
-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;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ComboBox = void 0;
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-const React = __importStar(require("react"));
-const MenuExtraContent_js_1 = require("../Menu/MenuExtraContent.js");
-const SelectTag_js_1 = require("../Select/SelectTag.js");
-const Text_js_1 = require("../Typography/Text.js");
-const index_js_1 = require("../../utils/index.js");
-const Popover_js_1 = require("../Popover/Popover.js");
-const helpers_js_1 = require("./helpers.js");
-const ComboBoxEndIcon_js_1 = require("./ComboBoxEndIcon.js");
-const ComboBoxInput_js_1 = require("./ComboBoxInput.js");
-const ComboBoxInputContainer_js_1 = require("./ComboBoxInputContainer.js");
-const ComboBoxMenu_js_1 = require("./ComboBoxMenu.js");
-const ComboBoxMenuItem_js_1 = require("./ComboBoxMenuItem.js");
-// Type guard for enabling multiple
+Object.defineProperty(exports, 'ComboBox', {
+  enumerable: true,
+  get: function () {
+    return ComboBox;
+  },
+});
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _react = _interop_require_wildcard._(require('react'));
+const _MenuExtraContent = require('../Menu/MenuExtraContent.js');
+const _SelectTag = require('../Select/SelectTag.js');
+const _Text = require('../Typography/Text.js');
+const _index = require('../../utils/index.js');
+const _Popover = require('../Popover/Popover.js');
+const _helpers = require('./helpers.js');
+const _ComboBoxEndIcon = require('./ComboBoxEndIcon.js');
+const _ComboBoxInput = require('./ComboBoxInput.js');
+const _ComboBoxInputContainer = require('./ComboBoxInputContainer.js');
+const _ComboBoxMenu = require('./ComboBoxMenu.js');
+const _ComboBoxMenuItem = require('./ComboBoxMenuItem.js');
 const isMultipleEnabled = (variable, multiple) => {
-    return multiple && (Array.isArray(variable) || variable === undefined);
+  return (
+    multiple &&
+    (Array.isArray(variable) || variable === null || variable === undefined)
+  );
 };
-// Type guard for user onChange
 const isSingleOnChange = (onChange, multiple) => {
-    return !multiple;
+  return !multiple;
 };
-/** Returns either `option.id` or derives a stable id using `idPrefix` and `option.label` (without whitespace) */
 const getOptionId = (option, idPrefix) => {
-    return option.id ?? `${idPrefix}-option-${option.label.replace(/\s/g, '-')}`;
+  return option.id ?? `${idPrefix}-option-${option.label.replace(/\s/g, '-')}`;
 };
-/**
- * ComboBox component that allows typing a value to filter the options in dropdown list.
- * Values can be selected either using mouse clicks or using the Enter key.
- * @example
- * <ComboBox
- *   options={[
- *     { label: 'Item 1', value: 1 },
- *     { label: 'Item 2', value: 2 },
- *     { label: 'Item 3', value: 3 },
- *   ]}
- *   onChange={() => {}}
- * />
- */
-exports.ComboBox = React.forwardRef((props, forwardedRef) => {
-    const idPrefix = (0, index_js_1.useId)();
-    const { options, value: valueProp, onChange, filterFunction, inputProps, endIconProps, dropdownMenuProps, emptyStateMessage = 'No options found', itemRenderer, enableVirtualization = false, multiple = false, onShow: onShowProp, onHide: onHideProp, id = inputProps?.id ? `iui-${inputProps.id}-cb` : idPrefix, ...rest } = props;
-    // Refs get set in subcomponents
-    const inputRef = React.useRef(null);
-    const menuRef = React.useRef(null);
-    const onChangeProp = (0, index_js_1.useLatestRef)(onChange);
-    const optionsRef = (0, index_js_1.useLatestRef)(options);
-    // Record to store all extra information (e.g. original indexes), where the key is the id of the option
-    const optionsExtraInfoRef = React.useRef({});
-    // Clear the extra info when the options change so that it can be reinitialized below
-    React.useEffect(() => {
-        optionsExtraInfoRef.current = {};
-    }, [options]);
-    // Initialize the extra info only if it is not already initialized
-    if (options.length > 0 &&
-        Object.keys(optionsExtraInfoRef.current).length === 0) {
-        options.forEach((option, index) => {
-            optionsExtraInfoRef.current[getOptionId(option, id)] = {
-                __originalIndex: index,
-            };
-        });
-    }
-    // Get indices of selected elements in options array when we have selected values.
-    const getSelectedIndexes = React.useCallback(() => {
-        if (isMultipleEnabled(valueProp, multiple)) {
-            const indexArray = [];
-            valueProp?.forEach((value) => {
-                const indexToAdd = options.findIndex((option) => option.value === value);
-                if (indexToAdd > -1) {
-                    indexArray.push(indexToAdd);
-                }
-            });
-            return indexArray;
-        }
-        else {
-            return options.findIndex((option) => option.value === valueProp);
-        }
-    }, [multiple, options, valueProp]);
-    // Reducer where all the component-wide state is stored
-    const [{ isOpen, selected, focusedIndex }, dispatch] = React.useReducer(helpers_js_1.comboBoxReducer, {
-        isOpen: false,
-        selected: getSelectedIndexes(),
-        focusedIndex: -1,
+const ComboBox = _react.forwardRef((props, forwardedRef) => {
+  const idPrefix = (0, _index.useId)();
+  const defaultFilterFunction = _react.useCallback((options, inputValue) => {
+    return options.filter((option) =>
+      option.label.toLowerCase().includes(inputValue.toLowerCase()),
+    );
+  }, []);
+  const {
+    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;
+  const inputRef = _react.useRef(null);
+  const menuRef = _react.useRef(null);
+  const onChangeProp = (0, _index.useLatestRef)(onChange);
+  const optionsRef = (0, _index.useLatestRef)(options);
+  const filterFunctionRef = (0, _index.useLatestRef)(filterFunction);
+  const optionsExtraInfo = _react.useMemo(() => {
+    const newOptionsExtraInfo = {};
+    options.forEach((option, index) => {
+      newOptionsExtraInfo[getOptionId(option, id)] = {
+        __originalIndex: index,
+      };
     });
-    const onShowRef = (0, index_js_1.useLatestRef)(onShowProp);
-    const onHideRef = (0, index_js_1.useLatestRef)(onHideProp);
-    const show = React.useCallback(() => {
-        dispatch({ type: 'open' });
-        onShowRef.current?.();
-    }, [onShowRef]);
-    const hide = React.useCallback(() => {
-        dispatch({ type: 'close' });
-        onHideRef.current?.();
-    }, [onHideRef]);
-    (0, index_js_1.useLayoutEffect)(() => {
-        // When the dropdown opens
-        if (isOpen) {
-            inputRef.current?.focus(); // Focus the input
-            // Reset the filtered list (does not reset when multiple enabled)
-            if (!multiple) {
-                setFilteredOptions(optionsRef.current);
-                dispatch({ type: 'focus', value: undefined });
-            }
-        }
-        // When the dropdown closes
-        else {
-            // Reset the focused index
-            dispatch({ type: 'focus', value: undefined });
-            // Reset the input value if not multiple
-            if (!isMultipleEnabled(selected, multiple)) {
-                setInputValue(selected != undefined && selected >= 0
-                    ? optionsRef.current[selected]?.label
-                    : '');
-            }
-        }
-    }, [isOpen, multiple, optionsRef, selected]);
-    // Update filtered options to the latest value options according to input value
-    const [filteredOptions, setFilteredOptions] = React.useState(options);
-    React.useEffect(() => {
-        if (inputValue) {
-            setFilteredOptions(filterFunction?.(options, inputValue) ??
-                options.filter((option) => option.label.toLowerCase().includes(inputValue.toLowerCase())));
-        }
-        else {
-            setFilteredOptions(options);
-        }
-        dispatch({ type: 'focus', value: undefined });
-        // Only need to call on options update
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [options]);
-    // Filter options based on input value
-    const [inputValue, setInputValue] = React.useState(inputProps?.value?.toString() ?? '');
-    const [liveRegionSelection, setLiveRegionSelection] = React.useState('');
-    const handleOnInput = React.useCallback((event) => {
-        const { value } = event.currentTarget;
-        setInputValue(value);
-        show(); // reopen when typing
-        setFilteredOptions(filterFunction?.(optionsRef.current, value) ??
-            optionsRef.current.filter((option) => option.label.toLowerCase().includes(value.toLowerCase())));
-        if (focusedIndex != -1) {
-            dispatch({ type: 'focus', value: -1 });
-        }
-        inputProps?.onChange?.(event);
-    }, [filterFunction, focusedIndex, inputProps, optionsRef, show]);
-    // When the value prop changes, update the selected index/indices
-    React.useEffect(() => {
-        if (isMultipleEnabled(valueProp, multiple)) {
-            if (valueProp) {
-                // If user provided array of selected values
-                const indexes = valueProp.map((value) => {
-                    return options.findIndex((option) => option.value === value);
-                });
-                dispatch({
-                    type: 'multiselect',
-                    value: indexes.filter((index) => index !== -1), // Add available options
-                });
-            }
-            else {
-                // if user provided one value or undefined
-                dispatch({
-                    type: 'multiselect',
-                    value: [], // Add empty list
-                });
-            }
-        }
-        else {
-            dispatch({
-                type: 'select',
-                value: options.findIndex((option) => option.value === valueProp),
-            });
-        }
-    }, [valueProp, options, multiple]);
-    const isMenuItemSelected = React.useCallback((index) => {
-        if (isMultipleEnabled(selected, multiple)) {
-            return !!selected.includes(index);
-        }
-        else {
-            return selected === index;
-        }
-    }, [multiple, selected]);
-    // Generates new array when item is added or removed
-    const selectedChangeHandler = React.useCallback((__originalIndex, action) => {
-        if (action === 'added') {
-            return [...selected, __originalIndex];
-        }
-        else {
-            return selected.filter((index) => index !== __originalIndex);
-        }
-    }, [selected]);
-    // Calls user defined onChange
-    const onChangeHandler = React.useCallback((__originalIndex, actionType, newArray) => {
-        if (isSingleOnChange(onChangeProp.current, multiple)) {
-            onChangeProp.current?.(optionsRef.current[__originalIndex]?.value);
-        }
-        else {
-            actionType &&
-                newArray &&
-                onChangeProp.current?.(newArray?.map((item) => optionsRef.current[item]?.value), {
-                    value: optionsRef.current[__originalIndex]?.value,
-                    type: actionType,
-                });
-        }
-    }, [multiple, onChangeProp, optionsRef]);
-    const onClickHandler = React.useCallback((__originalIndex) => {
-        inputRef.current?.focus({ preventScroll: true }); // return focus to input
-        if (optionsRef.current[__originalIndex]?.disabled) {
-            return;
-        }
-        if (isMultipleEnabled(selected, multiple)) {
-            const actionType = isMenuItemSelected(__originalIndex)
-                ? 'removed'
-                : 'added';
-            const newArray = selectedChangeHandler(__originalIndex, actionType);
-            dispatch({ type: 'multiselect', value: newArray });
-            onChangeHandler(__originalIndex, actionType, newArray);
-            // update live region
-            setLiveRegionSelection(newArray
-                .map((item) => optionsRef.current[item]?.label)
-                .filter(Boolean)
-                .join(', '));
+    return newOptionsExtraInfo;
+  }, [id, options]);
+  const getSelectedIndexes = _react.useCallback(
+    (value) => {
+      if (value === undefined) {
+        return undefined;
+      }
+      if (isMultipleEnabled(value, multiple)) {
+        const indexArray = [];
+        value?.forEach((value) => {
+          const indexToAdd = options.findIndex(
+            (option) => option.value === value,
+          );
+          if (indexToAdd > -1) {
+            indexArray.push(indexToAdd);
+          }
+        });
+        return indexArray;
+      } else {
+        return options.findIndex((option) => option.value === value);
+      }
+    },
+    [multiple, options],
+  );
+  const [selectedIndexes, setSelectedIndexes] = (0, _index.useControlledState)(
+    getSelectedIndexes(defaultValue) ?? (multiple ? [] : -1),
+    getSelectedIndexes(valueProp),
+  );
+  const previousValue = _react.useRef(valueProp);
+  (0, _index.useLayoutEffect)(() => {
+    if (valueProp !== previousValue.current) {
+      previousValue.current = valueProp;
+      if (valueProp === undefined) {
+        if (isMultipleEnabled(selectedIndexes, multiple)) {
+          setSelectedIndexes([]);
+        } else {
+          setSelectedIndexes(-1);
         }
-        else {
-            dispatch({ type: 'select', value: __originalIndex });
-            hide();
-            onChangeHandler(__originalIndex);
+      }
+    }
+  }, [multiple, selectedIndexes, setSelectedIndexes, valueProp]);
+  const [isOpen, setIsOpen] = _react.useState(false);
+  const [focusedIndex, setFocusedIndex] = _react.useState(-1);
+  const onShowRef = (0, _index.useLatestRef)(onShowProp);
+  const onHideRef = (0, _index.useLatestRef)(onHideProp);
+  const show = _react.useCallback(() => {
+    setIsOpen(true);
+    onShowRef.current?.();
+  }, [onShowRef]);
+  const hide = _react.useCallback(() => {
+    setIsOpen(false);
+    onHideRef.current?.();
+  }, [onHideRef]);
+  (0, _index.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]);
+  const previousOptions = _react.useRef(options);
+  _react.useEffect(() => {
+    if (options !== previousOptions.current) {
+      previousOptions.current = options;
+      onOptionsChange();
+    }
+    function onOptionsChange() {
+      if (!isMultipleEnabled(selectedIndexes, multiple)) {
+        setFocusedIndex(selectedIndexes);
+      } else {
+        setFocusedIndex(-1);
+      }
+      if (!isMultipleEnabled(selectedIndexes, multiple) && !isOpen) {
+        setInputValue(
+          selectedIndexes >= 0 ? options[selectedIndexes]?.label : '',
+        );
+      }
+    }
+  }, [options, isOpen, multiple, selectedIndexes]);
+  const [inputValue, setInputValue] = _react.useState(
+    inputProps?.value?.toString() ?? '',
+  );
+  const [isInputDirty, setIsInputDirty] = _react.useState(false);
+  const filteredOptions = _react.useMemo(() => {
+    if (!isInputDirty) {
+      return options;
+    }
+    return filterFunctionRef.current?.(options, inputValue);
+  }, [filterFunctionRef, inputValue, options, isInputDirty]);
+  const [liveRegionSelection, setLiveRegionSelection] = _react.useState('');
+  const handleOnInput = _react.useCallback(
+    (event) => {
+      const { value } = event.currentTarget;
+      setInputValue(value);
+      show();
+      setIsInputDirty(true);
+      if (focusedIndex != -1) {
+        setFocusedIndex(-1);
+      }
+      inputProps?.onChange?.(event);
+    },
+    [focusedIndex, inputProps, show],
+  );
+  const isMenuItemSelected = _react.useCallback(
+    (index) => {
+      if (isMultipleEnabled(selectedIndexes, multiple)) {
+        return selectedIndexes.includes(index);
+      } else {
+        return selectedIndexes === index;
+      }
+    },
+    [multiple, selectedIndexes],
+  );
+  const selectedChangeHandler = _react.useCallback(
+    (__originalIndex, action) => {
+      if (!isMultipleEnabled(selectedIndexes, multiple)) {
+        return;
+      }
+      if (action === 'added') {
+        return [...selectedIndexes, __originalIndex];
+      } else {
+        return selectedIndexes?.filter((index) => index !== __originalIndex);
+      }
+    },
+    [selectedIndexes, multiple],
+  );
+  const 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],
+  );
+  const onClickHandler = _react.useCallback(
+    (__originalIndex) => {
+      inputRef.current?.focus({
+        preventScroll: true,
+      });
+      if (optionsRef.current[__originalIndex]?.disabled) {
+        return;
+      }
+      setIsInputDirty(false);
+      if (multiple) {
+        const actionType = isMenuItemSelected(__originalIndex)
+          ? 'removed'
+          : 'added';
+        const newSelectedIndexes = selectedChangeHandler(
+          __originalIndex,
+          actionType,
+        );
+        if (newSelectedIndexes == null) {
+          return;
         }
-    }, [
-        selectedChangeHandler,
-        isMenuItemSelected,
-        multiple,
-        onChangeHandler,
-        selected,
-        optionsRef,
-        hide,
-    ]);
-    const getMenuItem = React.useCallback((option, filteredIndex) => {
-        const optionId = getOptionId(option, id);
-        const { __originalIndex } = optionsExtraInfoRef.current[optionId];
-        const { icon, startIcon: startIconProp, label, ...restOptions } = option;
-        const startIcon = startIconProp ?? icon;
-        const customItem = itemRenderer
-            ? itemRenderer(option, {
-                isFocused: focusedIndex === __originalIndex,
-                isSelected: selected === __originalIndex,
-                index: __originalIndex,
-                id: optionId,
-            })
-            : null;
-        return customItem ? (React.cloneElement(customItem, {
+        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,
+    ],
+  );
+  const getMenuItem = _react.useCallback(
+    (option, filteredIndex) => {
+      const optionId = getOptionId(option, id);
+      const { __originalIndex } = optionsExtraInfo[optionId];
+      const { icon, startIcon: startIconProp, label, ...restOptions } = option;
+      const startIcon = startIconProp ?? icon;
+      const 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);
+              onClickHandler(__originalIndex);
+              customItem.props.onClick?.(e);
             },
-            // ComboBox.MenuItem handles scrollIntoView, data-iui-index and focused through context
-            // but we still need to pass them here for backwards compatibility with MenuItem
             focused: focusedIndex === __originalIndex,
             'data-iui-index': __originalIndex,
             'data-iui-filtered-index': filteredIndex,
-            ref: (0, index_js_1.mergeRefs)(customItem.props.ref, (el) => {
-                if (!enableVirtualization && focusedIndex === __originalIndex) {
-                    el?.scrollIntoView({ block: 'nearest' });
-                }
+            ref: (0, _index.mergeRefs)(customItem.props.ref, (el) => {
+              if (!enableVirtualization && focusedIndex === __originalIndex) {
+                el?.scrollIntoView({
+                  block: 'nearest',
+                });
+              }
             }),
-        })) : (React.createElement(ComboBoxMenuItem_js_1.ComboBoxMenuItem, { key: optionId, id: optionId, startIcon: startIcon, ...restOptions, isSelected: isMenuItemSelected(__originalIndex), onClick: () => {
+          })
+        : _react.createElement(
+            _ComboBoxMenuItem.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,
-        selected,
-    ]);
-    const emptyContent = React.useMemo(() => (React.createElement(React.Fragment, null, React.isValidElement(emptyStateMessage) ? (emptyStateMessage) : (React.createElement(MenuExtraContent_js_1.MenuExtraContent, null,
-        React.createElement(Text_js_1.Text, { isMuted: true }, emptyStateMessage))))), [emptyStateMessage]);
-    const popover = (0, Popover_js_1.usePopover)({
-        visible: isOpen,
-        onVisibleChange: (open) => (open ? show() : hide()),
-        matchWidth: true,
-        closeOnOutsideClick: true,
-        interactions: { click: false, focus: true },
-    });
-    return (React.createElement(helpers_js_1.ComboBoxRefsContext.Provider, { value: { inputRef, menuRef, optionsExtraInfoRef } },
-        React.createElement(helpers_js_1.ComboBoxActionContext.Provider, { value: dispatch },
-            React.createElement(helpers_js_1.ComboBoxStateContext.Provider, { value: {
-                    id,
-                    isOpen,
-                    focusedIndex,
-                    onClickHandler,
-                    enableVirtualization,
-                    filteredOptions,
-                    getMenuItem,
-                    multiple,
-                    popover,
-                    show,
-                    hide,
-                } },
-                React.createElement(ComboBoxInputContainer_js_1.ComboBoxInputContainer, { ref: forwardedRef, disabled: inputProps?.disabled, ...rest },
-                    React.createElement(React.Fragment, null,
-                        React.createElement(ComboBoxInput_js_1.ComboBoxInput, { value: inputValue, disabled: inputProps?.disabled, ...inputProps, onChange: handleOnInput, selectTags: isMultipleEnabled(selected, multiple)
-                                ? selected.map((index) => {
-                                    const item = optionsRef.current[index];
-                                    return (React.createElement(SelectTag_js_1.SelectTag, { key: item.label, label: item.label }));
-                                })
-                                : undefined })),
-                    React.createElement(ComboBoxEndIcon_js_1.ComboBoxEndIcon, { ...endIconProps, disabled: inputProps?.disabled, isOpen: isOpen }),
-                    multiple ? (React.createElement(index_js_1.AutoclearingHiddenLiveRegion, { text: liveRegionSelection })) : null),
-                React.createElement(ComboBoxMenu_js_1.ComboBoxMenu, { as: 'div', ...dropdownMenuProps }, filteredOptions.length > 0 && !enableVirtualization
-                    ? filteredOptions.map(getMenuItem)
-                    : emptyContent)))));
+              },
+              index: __originalIndex,
+              'data-iui-filtered-index': filteredIndex,
+            },
+            label,
+          );
+    },
+    [
+      enableVirtualization,
+      focusedIndex,
+      id,
+      isMenuItemSelected,
+      itemRenderer,
+      onClickHandler,
+      optionsExtraInfo,
+    ],
+  );
+  const emptyContent = _react.useMemo(
+    () =>
+      _react.createElement(
+        _react.Fragment,
+        null,
+        _react.isValidElement(emptyStateMessage)
+          ? emptyStateMessage
+          : _react.createElement(
+              _MenuExtraContent.MenuExtraContent,
+              null,
+              _react.createElement(
+                _Text.Text,
+                {
+                  isMuted: true,
+                },
+                emptyStateMessage,
+              ),
+            ),
+      ),
+    [emptyStateMessage],
+  );
+  const popover = (0, _Popover.usePopover)({
+    visible: isOpen,
+    onVisibleChange: (open) => (open ? show() : hide()),
+    matchWidth: true,
+    closeOnOutsideClick: true,
+    interactions: {
+      click: false,
+      focus: true,
+    },
+  });
+  return _react.createElement(
+    _helpers.ComboBoxRefsContext.Provider,
+    {
+      value: {
+        inputRef,
+        menuRef,
+        optionsExtraInfo,
+      },
+    },
+    _react.createElement(
+      _helpers.ComboBoxStateContext.Provider,
+      {
+        value: {
+          id,
+          isOpen,
+          focusedIndex,
+          setFocusedIndex,
+          onClickHandler,
+          enableVirtualization,
+          filteredOptions,
+          getMenuItem,
+          multiple,
+          popover,
+          show,
+          hide,
+        },
+      },
+      _react.createElement(
+        _ComboBoxInputContainer.ComboBoxInputContainer,
+        {
+          ref: forwardedRef,
+          disabled: inputProps?.disabled,
+          ...rest,
+        },
+        _react.createElement(
+          _react.Fragment,
+          null,
+          _react.createElement(_ComboBoxInput.ComboBoxInput, {
+            value: inputValue,
+            disabled: inputProps?.disabled,
+            ...inputProps,
+            onChange: handleOnInput,
+            selectTags: isMultipleEnabled(selectedIndexes, multiple)
+              ? selectedIndexes
+                  ?.map((index) => {
+                    const item = options[index];
+                    return _react.createElement(_SelectTag.SelectTag, {
+                      key: item.label,
+                      label: item.label,
+                    });
+                  })
+                  .filter(Boolean)
+              : undefined,
+          }),
+        ),
+        _react.createElement(_ComboBoxEndIcon.ComboBoxEndIcon, {
+          ...endIconProps,
+          disabled: inputProps?.disabled,
+          isOpen: isOpen,
+        }),
+        multiple
+          ? _react.createElement(_index.AutoclearingHiddenLiveRegion, {
+              text: liveRegionSelection,
+            })
+          : null,
+      ),
+      _react.createElement(
+        _ComboBoxMenu.ComboBoxMenu,
+        {
+          as: 'div',
+          ...dropdownMenuProps,
+        },
+        filteredOptions.length > 0 && !enableVirtualization
+          ? filteredOptions.map(getMenuItem)
+          : emptyContent,
+      ),
+    ),
+  );
 });