@itwin/itwinui-react 3.0.3 → 3.0.5

package/cjs/core/ComboBox/ComboBox.js

@@ -1,34 +1,34 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.ComboBox = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = tslib_1.__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');
+const React = tslib_1.__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
 const isMultipleEnabled = (variable, multiple) => {
-  return multiple && (Array.isArray(variable) || variable === undefined);
+    return multiple && (Array.isArray(variable) || 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.
@@ -44,272 +44,221 @@ const getOptionId = (option, idPrefix) => {
  * />
  */
 const ComboBox = (props) => {
-  const {
-    options,
-    value: valueProp,
-    onChange,
-    filterFunction,
-    inputProps,
-    endIconProps,
-    dropdownMenuProps,
-    emptyStateMessage = 'No options found',
-    itemRenderer,
-    enableVirtualization = false,
-    multiple = false,
-    onShow: onShowProp,
-    onHide: onHideProp,
-    ...rest
-  } = props;
-  // Generate a stateful random id if not specified
-  const [id] = React.useState(
-    () =>
-      props.id ??
-      (inputProps?.id && `${inputProps.id}-cb`) ??
-      `iui-cb-${(0, index_js_1.getRandomValue)(10)}`,
-  );
-  // 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,
-      };
+    const { options, value: valueProp, onChange, filterFunction, inputProps, endIconProps, dropdownMenuProps, emptyStateMessage = 'No options found', itemRenderer, enableVirtualization = false, multiple = false, onShow: onShowProp, onHide: onHideProp, ...rest } = props;
+    // Generate a stateful random id if not specified
+    const [id] = React.useState(() => props.id ??
+        (inputProps?.id && `${inputProps.id}-cb`) ??
+        `iui-cb-${(0, index_js_1.getRandomValue)(10)}`);
+    // 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,
     });
-  }
-  // 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);
+    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.useIsomorphicLayoutEffect)(() => {
+        // 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);
         }
-      });
-      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 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.useIsomorphicLayoutEffect)(() => {
-    // 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(', '),
-        );
-      } else {
-        dispatch({ type: 'select', value: __originalIndex });
-        hide();
-        onChangeHandler(__originalIndex);
-      }
-    },
-    [
-      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, ...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, {
+        // 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(', '));
+        }
+        else {
+            dispatch({ type: 'select', value: __originalIndex });
+            hide();
+            onChangeHandler(__originalIndex);
+        }
+    }, [
+        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, ...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, {
             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
@@ -317,130 +266,59 @@ const ComboBox = (props) => {
             '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' });
-              }
+                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_js_1.ComboBoxMenuItem, { key: optionId, id: optionId, startIcon: startIcon, ...restOptions, isSelected: isMenuItemSelected(__originalIndex), onClick: () => {
                 onClickHandler(__originalIndex);
-              },
-              index: __originalIndex,
-              'data-iui-filtered-index': filteredIndex,
-            },
-            option.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,
-    trigger: { 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,
-          { 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 }, option.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,
+        trigger: { 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, { 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)))));
 };
 exports.ComboBox = ComboBox;
 exports.default = exports.ComboBox;