@itwin/itwinui-react 3.0.0-dev.0 → 3.0.0-dev.10

package/esm/core/ComboBox/ComboBox.js

@@ -6,10 +6,20 @@ import * as React from 'react';
 import { MenuExtraContent } from '../Menu/index.js';
 import SelectTag from '../Select/SelectTag.js';
 import { Text } from '../Typography/index.js';
-import { getRandomValue, mergeRefs, useLatestRef, useIsomorphicLayoutEffect, AutoclearingHiddenLiveRegion, } from '../utils/index.js';
-import 'tippy.js/animations/shift-away.css';
-import { ComboBoxActionContext, comboBoxReducer, ComboBoxRefsContext, ComboBoxStateContext, } from './helpers.js';
-import { ComboBoxDropdown } from './ComboBoxDropdown.js';
+import {
+  getRandomValue,
+  mergeRefs,
+  useLatestRef,
+  useIsomorphicLayoutEffect,
+  AutoclearingHiddenLiveRegion,
+  usePopover,
+} from '../utils/index.js';
+import {
+  ComboBoxActionContext,
+  comboBoxReducer,
+  ComboBoxRefsContext,
+  ComboBoxStateContext,
+} from './helpers.js';
 import { ComboBoxEndIcon } from './ComboBoxEndIcon.js';
 import { ComboBoxInput } from './ComboBoxInput.js';
 import { ComboBoxInputContainer } from './ComboBoxInputContainer.js';
@@ -17,16 +27,15 @@ import { ComboBoxMenu } from './ComboBoxMenu.js';
 import { ComboBoxMenuItem } from './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) => {
-    var _a;
-    return (_a = option.id) !== null && _a !== void 0 ? _a : `${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.
@@ -42,224 +51,272 @@ const getOptionId = (option, idPrefix) => {
  * />
  */
 export const ComboBox = (props) => {
-    var _a, _b;
-    const { options, value: valueProp, onChange, filterFunction, inputProps, dropdownMenuProps, emptyStateMessage = 'No options found', itemRenderer, enableVirtualization = false, multiple = false, onShow, onHide, ...rest } = props;
-    // Generate a stateful random id if not specified
-    const [id] = React.useState(() => {
-        var _a, _b;
-        return (_b = (_a = props.id) !== null && _a !== void 0 ? _a : ((inputProps === null || inputProps === void 0 ? void 0 : inputProps.id) && `${inputProps.id}-cb`)) !== null && _b !== void 0 ? _b : `iui-cb-${getRandomValue(10)}`;
+  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-${getRandomValue(10)}`,
+  );
+  // Refs get set in subcomponents
+  const inputRef = React.useRef(null);
+  const menuRef = React.useRef(null);
+  const onChangeProp = useLatestRef(onChange);
+  const optionsRef = 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,
+      };
     });
-    // Refs get set in subcomponents
-    const inputRef = React.useRef(null);
-    const menuRef = React.useRef(null);
-    const toggleButtonRef = React.useRef(null);
-    const onChangeProp = useLatestRef(onChange);
-    const optionsRef = 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 === null || valueProp === void 0 ? void 0 : 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(comboBoxReducer, {
-        isOpen: false,
-        selected: getSelectedIndexes(),
-        focusedIndex: -1,
-    });
-    useIsomorphicLayoutEffect(() => {
-        var _a, _b;
-        // When the dropdown opens
-        if (isOpen) {
-            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.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
-                    ? (_b = optionsRef.current[selected]) === null || _b === void 0 ? void 0 : _b.label
-                    : '');
-            }
-        }
-    }, [isOpen, multiple, optionsRef, selected]);
-    // Set min-width of menu to be same as input
-    const [minWidth, setMinWidth] = React.useState(0);
-    React.useEffect(() => {
-        if (inputRef.current) {
-            setMinWidth(inputRef.current.offsetWidth);
-        }
-    }, [isOpen]);
-    // Update filtered options to the latest value options according to input value
-    const [filteredOptions, setFilteredOptions] = React.useState(options);
-    React.useEffect(() => {
-        var _a;
-        if (inputValue) {
-            setFilteredOptions((_a = filterFunction === null || filterFunction === void 0 ? void 0 : filterFunction(options, inputValue)) !== null && _a !== void 0 ? _a : options.filter((option) => option.label.toLowerCase().includes(inputValue.toLowerCase())));
-        }
-        else {
-            setFilteredOptions(options);
+  }
+  // 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(
+    comboBoxReducer,
+    {
+      isOpen: false,
+      selected: getSelectedIndexes(),
+      focusedIndex: -1,
+    },
+  );
+  const onShowRef = useLatestRef(onShowProp);
+  const onHideRef = useLatestRef(onHideProp);
+  const show = React.useCallback(() => {
+    dispatch({ type: 'open' });
+    onShowRef.current?.();
+  }, [onShowRef]);
+  const hide = React.useCallback(() => {
+    dispatch({ type: 'close' });
+    onHideRef.current?.();
+  }, [onHideRef]);
+  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 });
-        // 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((_b = (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.value) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : '');
-    const [liveRegionSelection, setLiveRegionSelection] = React.useState('');
-    const handleOnInput = React.useCallback((event) => {
-        var _a, _b;
-        const { value } = event.currentTarget;
-        setInputValue(value);
-        dispatch({ type: 'open' }); // reopen when typing
-        setFilteredOptions((_a = filterFunction === null || filterFunction === void 0 ? void 0 : filterFunction(optionsRef.current, value)) !== null && _a !== void 0 ? _a : optionsRef.current.filter((option) => option.label.toLowerCase().includes(value.toLowerCase())));
-        if (focusedIndex != -1) {
-            dispatch({ type: 'focus', value: -1 });
-        }
-        (_b = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onChange) === null || _b === void 0 ? void 0 : _b.call(inputProps, event);
-    }, [filterFunction, focusedIndex, inputProps, optionsRef]);
-    // 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) => {
-        var _a, _b, _c, _d;
-        if (isSingleOnChange(onChangeProp.current, multiple)) {
-            (_a = onChangeProp.current) === null || _a === void 0 ? void 0 : _a.call(onChangeProp, (_b = optionsRef.current[__originalIndex]) === null || _b === void 0 ? void 0 : _b.value);
-        }
-        else {
-            actionType &&
-                newArray &&
-                ((_c = onChangeProp.current) === null || _c === void 0 ? void 0 : _c.call(onChangeProp, newArray === null || newArray === void 0 ? void 0 : newArray.map((item) => { var _a; return (_a = optionsRef.current[item]) === null || _a === void 0 ? void 0 : _a.value; }), {
-                    value: (_d = optionsRef.current[__originalIndex]) === null || _d === void 0 ? void 0 : _d.value,
-                    type: actionType,
-                }));
-        }
-    }, [multiple, onChangeProp, optionsRef]);
-    const onClickHandler = React.useCallback((__originalIndex) => {
-        var _a, _b;
-        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true }); // return focus to input
-        if ((_b = optionsRef.current[__originalIndex]) === null || _b === void 0 ? void 0 : _b.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) => { var _a; return (_a = optionsRef.current[item]) === null || _a === void 0 ? void 0 : _a.label; })
-                .filter(Boolean)
-                .join(', '));
-        }
-        else {
-            dispatch({ type: 'select', value: __originalIndex });
-            dispatch({ type: 'close' });
-            onChangeHandler(__originalIndex);
-        }
-    }, [
-        selectedChangeHandler,
-        isMenuItemSelected,
-        multiple,
-        onChangeHandler,
-        selected,
-        optionsRef,
-    ]);
-    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 !== null && startIconProp !== void 0 ? startIconProp : icon;
-        const customItem = itemRenderer
-            ? itemRenderer(option, {
-                isFocused: focusedIndex === __originalIndex,
-                isSelected: selected === __originalIndex,
-                index: __originalIndex,
-                id: optionId,
-            })
-            : null;
-        return customItem ? (React.cloneElement(customItem, {
+      }
+    }
+    // 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, {
             onClick: (e) => {
-                var _a, _b;
-                onClickHandler(__originalIndex);
-                (_b = (_a = customItem.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, 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
@@ -267,50 +324,125 @@ export const ComboBox = (props) => {
             'data-iui-index': __originalIndex,
             'data-iui-filtered-index': filteredIndex,
             ref: mergeRefs(customItem.props.ref, (el) => {
-                if (!enableVirtualization && focusedIndex === __originalIndex) {
-                    el === null || el === void 0 ? void 0 : el.scrollIntoView({ block: 'nearest' });
-                }
+              if (!enableVirtualization && focusedIndex === __originalIndex) {
+                el?.scrollIntoView({ block: 'nearest' });
+              }
             }),
-        })) : (React.createElement(ComboBoxMenuItem, { key: optionId, id: optionId, startIcon: startIcon, ...restOptions, isSelected: isMenuItemSelected(__originalIndex), onClick: () => {
+          })
+        : React.createElement(
+            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, null,
-        React.createElement(Text, { isMuted: true }, emptyStateMessage))))), [emptyStateMessage]);
-    return (React.createElement(ComboBoxRefsContext.Provider, { value: { inputRef, menuRef, toggleButtonRef, optionsExtraInfoRef } },
-        React.createElement(ComboBoxActionContext.Provider, { value: dispatch },
-            React.createElement(ComboBoxStateContext.Provider, { value: {
-                    id,
-                    minWidth,
-                    isOpen,
-                    focusedIndex,
-                    onClickHandler,
-                    enableVirtualization,
-                    filteredOptions,
-                    getMenuItem,
-                    multiple,
-                } },
-                React.createElement(ComboBoxInputContainer, { disabled: inputProps === null || inputProps === void 0 ? void 0 : inputProps.disabled, ...rest },
-                    React.createElement(React.Fragment, null,
-                        React.createElement(ComboBoxInput, { value: inputValue, ...inputProps, onChange: handleOnInput, selectTags: isMultipleEnabled(selected, multiple)
-                                ? selected.map((index) => {
-                                    const item = optionsRef.current[index];
-                                    return (React.createElement(SelectTag, { key: item.label, label: item.label }));
-                                })
-                                : undefined })),
-                    React.createElement(ComboBoxEndIcon, { disabled: inputProps === null || inputProps === void 0 ? void 0 : inputProps.disabled, isOpen: isOpen }),
-                    multiple ? (React.createElement(AutoclearingHiddenLiveRegion, { text: liveRegionSelection })) : null),
-                React.createElement(ComboBoxDropdown, { ...dropdownMenuProps, onShow: onShow, onHide: onHide },
-                    React.createElement(ComboBoxMenu, null, 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,
+              null,
+              React.createElement(Text, { isMuted: true }, emptyStateMessage),
+            ),
+      ),
+    [emptyStateMessage],
+  );
+  const popover = usePopover({
+    visible: isOpen,
+    onVisibleChange: (open) => (open ? show() : hide()),
+    matchWidth: true,
+    closeOnOutsideClick: true,
+    trigger: { focus: true },
+  });
+  return React.createElement(
+    ComboBoxRefsContext.Provider,
+    { value: { inputRef, menuRef, optionsExtraInfoRef } },
+    React.createElement(
+      ComboBoxActionContext.Provider,
+      { value: dispatch },
+      React.createElement(
+        ComboBoxStateContext.Provider,
+        {
+          value: {
+            id,
+            isOpen,
+            focusedIndex,
+            onClickHandler,
+            enableVirtualization,
+            filteredOptions,
+            getMenuItem,
+            multiple,
+            popover,
+            show,
+            hide,
+          },
+        },
+        React.createElement(
+          ComboBoxInputContainer,
+          { disabled: inputProps?.disabled, ...rest },
+          React.createElement(
+            React.Fragment,
+            null,
+            React.createElement(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, {
+                      key: item.label,
+                      label: item.label,
+                    });
+                  })
+                : undefined,
+            }),
+          ),
+          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,
+        ),
+      ),
+    ),
+  );
 };
 export default ComboBox;