@arc-ui/components 12.1.0 → 13.1.0

package/lib/ComboBox/ComboBox.cjs

@@ -3,123 +3,223 @@
 
 var tslib_es6 = require('../_shared/cjs/tslib.es6-CCZ3TN_7.cjs');
 var React = require('react');
-var index$2 = require('../_shared/cjs/index-BWfgSvRQ.cjs');
-var index$1 = require('../_shared/cjs/index-CTlXMLug.cjs');
+var index = require('../_shared/cjs/index-CTlXMLug.cjs');
+var index$2 = require('../_shared/cjs/index-DsqYRMfM.cjs');
 var filterAttrs = require('../_shared/cjs/filter-attrs-D19P2s1V.cjs');
+var suffixModifier = require('../_shared/cjs/suffix-modifier-DLUGR-yG.cjs');
 var FormControl = require('../_shared/cjs/FormControl-TtboqHRx.cjs');
-var index = require('../_shared/cjs/index-DXNM3D1d.cjs');
-var Box = require('../_shared/cjs/Box-Va2g7Gdp.cjs');
+var index$1 = require('../_shared/cjs/index-DlWZZNwu.cjs');
 var Icon = require('../_shared/cjs/Icon-Dk2XHa7V.cjs');
+var Surface = require('../_shared/cjs/Surface-DIU5ciDT.cjs');
 var ThemeIcon = require('../_shared/cjs/ThemeIcon-CwYN77IF.cjs');
-require('../_shared/cjs/Combination-6m6aOXZq.cjs');
+var Tooltip = require('../_shared/cjs/Tooltip-CdmWvrnr.cjs');
+var VerticalSpace = require('../_shared/cjs/VerticalSpace-DLQUYsvc.cjs');
+var Text = require('../_shared/cjs/Text-jwsn80lQ.cjs');
+var Rule = require('../_shared/cjs/Rule-essaguo_.cjs');
+require('../_shared/cjs/Combination-Cm62lfyr.cjs');
 require('react/jsx-runtime');
 require('react-dom');
-require('../_shared/cjs/index-KrMgv4q_.cjs');
-require('../_shared/cjs/index-B11wQrRa.cjs');
-require('../_shared/cjs/index-BGGFOAAx.cjs');
-require('../_shared/cjs/Surface-DIU5ciDT.cjs');
+require('../_shared/cjs/index-WO7l1Mfx.cjs');
+require('../_shared/cjs/index-BdJeAKfz.cjs');
+require('../_shared/cjs/index-BBDa9gnQ.cjs');
 require('../_shared/cjs/index-DR8Rkav9.cjs');
 require('../_shared/cjs/DisclosureMini-Cy7hNc90.cjs');
-require('../_shared/cjs/Text-jwsn80lQ.cjs');
-require('../_shared/cjs/suffix-modifier-DLUGR-yG.cjs');
 require('../_shared/cjs/VisuallyHidden-CQg3cOVK.cjs');
 
-/**
- * Do not edit directly
- * Generated file
- */
-
-const BtIconChevronDown2Px =
-  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath fill='currentColor' d='M15.993 23.914 2.294 10.207a1 1 0 1 1 1.414-1.414l12.285 12.293L28.292 8.793a1 1 0 1 1 1.414 1.414Z'/%3e%3c/svg%3e";
+var convertOptionsToObjects = function (options) {
+    return options.map(function (option) { return ({
+        isCustom: false,
+        text: option,
+    }); });
+};
 
 var filterOptions = function (options, value) {
-    return options.filter(function (option) {
+    return options
+        .filter(function (option) {
         return value ? option.toLowerCase().includes(value.toLowerCase()) : true;
-    });
+    })
+        .map(function (option) { return ({ text: option, isCustom: false }); });
+};
+
+var findOptionIndex = function (options, searchOption) { return options.findIndex(function (option) { return option.text === searchOption.text; }); };
+
+var getClosestMatchingOptionIndex = function (options, filteredOptions) {
+    return options.length && filteredOptions.length
+        ? options.findIndex(function (option) { return option.text === filteredOptions[0].text; })
+        : 0;
+};
+
+var isOptionValueMatch = function (option, value) {
+    return option.text.toLowerCase() === value.toLowerCase();
+};
+
+var getMatchingOption = function (options, value) {
+    return options.find(function (option) { return isOptionValueMatch(option, value); });
 };
+
+var getKeydownOptionToHighlight = function (_a) {
+    var options = _a.options, isNext = _a.isNext, highlightedOptionIndex = _a.highlightedOptionIndex;
+    var currentHighlightIndex = highlightedOptionIndex !== null && highlightedOptionIndex !== void 0 ? highlightedOptionIndex : -1;
+    var isAtBoundary = isNext
+        ? currentHighlightIndex === options.length - 1
+        : currentHighlightIndex <= 0;
+    var boundaryIndex = isNext ? 0 : options.length - 1;
+    var nextOptionIndex = isNext
+        ? currentHighlightIndex + 1
+        : currentHighlightIndex - 1;
+    return isAtBoundary ? boundaryIndex : nextOptionIndex;
+};
+
+var multiSelectLimitReached = function (newSelectedOptions, multiSelectLimit) { return (multiSelectLimit ? newSelectedOptions.length >= multiSelectLimit : false); };
+
+var convertOptionsToText = function (options) {
+    return options.map(function (option) { return option.text; });
+};
+
+var canAddNewMultiSelectOptions = function (newSelectedOptions, multiSelectLimit) {
+    return !multiSelectLimit ||
+        (multiSelectLimit && newSelectedOptions.length <= multiSelectLimit);
+};
+
 var getSelectedOptions = function (option, selectedOptions) {
-    return selectedOptions.indexOf(option) !== -1
-        ? selectedOptions.filter(function (selectedOption) { return selectedOption !== option; })
+    var isOptionCurrentlySelected = getMatchingOption(selectedOptions, option.text);
+    return isOptionCurrentlySelected
+        ? selectedOptions.filter(function (selectedOption) { return !isOptionValueMatch(selectedOption, option.text); })
         : tslib_es6.__spreadArray(tslib_es6.__spreadArray([], selectedOptions, true), [option], false);
 };
-var findOptionIndex = function (options, searchOption) {
-    return options.findIndex(function (option) { return option === searchOption; });
-};
-var isSelected = function (option, selectedOptions) {
-    return selectedOptions.some(function (selectedOption) { return option === selectedOption; });
+
+var getNewMultiSelectOptions = function (selectedOption, selectedOptions, multiSelectLimit) {
+    var newSelectedOptions = getSelectedOptions(selectedOption, selectedOptions);
+    var limitReached = multiSelectLimitReached(newSelectedOptions, multiSelectLimit);
+    var canAddNewOptions = canAddNewMultiSelectOptions(newSelectedOptions, multiSelectLimit);
+    return {
+        newOptions: canAddNewOptions ? newSelectedOptions : selectedOptions,
+        limitReached: limitReached,
+    };
 };
 
 var reducer = function (initialOptions) {
     return function (state, action) {
+        var _a;
         switch (action.type) {
             case "OPEN": {
-                var isMultiSelectable = action.payload.isMultiSelectable;
-                var selectedOptions = state.selectedOptions, options = state.options;
-                return tslib_es6.__assign(tslib_es6.__assign({}, state), { isExpanded: true, highlightedOptionIndex: isMultiSelectable && selectedOptions.length
-                        ? findOptionIndex(options, selectedOptions[selectedOptions.length - 1])
-                        : 0 });
+                return tslib_es6.__assign(tslib_es6.__assign({}, state), { isExpanded: true, highlightedOptionIndex: 0 });
+            }
+            case "CLOSE_MENU": {
+                return tslib_es6.__assign(tslib_es6.__assign({}, state), { showAllTags: false, isExpanded: false, highlightedOptionIndex: undefined });
+            }
+            case "CLEAR": {
+                return tslib_es6.__assign(tslib_es6.__assign({}, state), { value: "", singleSelectedOption: action.payload.isCustomEntryAllowed
+                        ? { isCustom: false, text: "" }
+                        : state.singleSelectedOption, options: convertOptionsToObjects(initialOptions), onChangeValue: action.payload.isMultiSelectable
+                        ? convertOptionsToText(state.selectedOptions)
+                        : "" });
+            }
+            case "SHOW_ALL_TAGS": {
+                return tslib_es6.__assign(tslib_es6.__assign({}, state), { showAllTags: true });
+            }
+            case "EXIT_INPUT": {
+                var _b = action.payload, isMultiSelectable = _b.isMultiSelectable, isCustomEntryAllowed = _b.isCustomEntryAllowed;
+                var matchingOption = getMatchingOption(state.options, state.value);
+                var allOptions = convertOptionsToObjects(initialOptions);
+                var isCustomEntrySingleSelect = !isMultiSelectable && isCustomEntryAllowed;
+                var isConstrainedSingleSelect = !isMultiSelectable && !isCustomEntryAllowed;
+                var commonState = tslib_es6.__assign(tslib_es6.__assign({}, state), { options: allOptions, showAllTags: false, isExpanded: false, highlightedOptionIndex: undefined });
+                if (!isMultiSelectable && matchingOption) {
+                    return tslib_es6.__assign(tslib_es6.__assign({}, commonState), { singleSelectedOption: matchingOption, value: matchingOption.text, onChangeValue: matchingOption.text });
+                }
+                if (isCustomEntrySingleSelect && !matchingOption) {
+                    return tslib_es6.__assign(tslib_es6.__assign({}, commonState), { value: state.value, onChangeValue: state.value });
+                }
+                if (isConstrainedSingleSelect) {
+                    var newValue = ((_a = state.singleSelectedOption) === null || _a === void 0 ? void 0 : _a.text) || "";
+                    return tslib_es6.__assign(tslib_es6.__assign({}, commonState), { value: newValue, onChangeValue: newValue });
+                }
+                return tslib_es6.__assign(tslib_es6.__assign({}, commonState), { value: "", onChangeValue: isMultiSelectable
+                        ? convertOptionsToText(state.selectedOptions)
+                        : "" });
             }
-            case "CLOSE": {
-                return tslib_es6.__assign(tslib_es6.__assign({}, state), { isExpanded: false, highlightedOptionIndex: 0 });
+            case "SET_HIGHLIGHTED_OPTION": {
+                var index = action.payload.index;
+                return tslib_es6.__assign(tslib_es6.__assign({}, state), { highlightedOptionIndex: index });
             }
             case "INPUT_CHANGE": {
-                var _a = action.payload, value = _a.value, isAutocomplete = _a.isAutocomplete;
-                return tslib_es6.__assign(tslib_es6.__assign({}, state), { value: value, options: isAutocomplete
-                        ? filterOptions(initialOptions, value)
-                        : state.options, highlightedOptionIndex: 0, isExpanded: true });
+                var _c = action.payload, value = _c.value, isAutocomplete = _c.isAutocomplete, isCustomEntryAllowed = _c.isCustomEntryAllowed, isMultiSelectable = _c.isMultiSelectable;
+                var filteredOptions = filterOptions(initialOptions, value);
+                var matchingOption = getMatchingOption(state.options, value);
+                var showCustomMultiSelectOption = Boolean(value.trim()) &&
+                    isCustomEntryAllowed &&
+                    isMultiSelectable &&
+                    !matchingOption;
+                var optionsList = isAutocomplete
+                    ? filteredOptions
+                    : convertOptionsToObjects(initialOptions);
+                var newOptions = showCustomMultiSelectOption
+                    ? tslib_es6.__spreadArray([{ isCustom: true, text: value }], optionsList, true) : optionsList;
+                var closestMatchingOptionIndex = getClosestMatchingOptionIndex(newOptions, filteredOptions);
+                var singleSelectedOption = isCustomEntryAllowed
+                    ? { isCustom: false, text: "" }
+                    : state.singleSelectedOption;
+                var highlightedOptionIndex = isAutocomplete
+                    ? 0
+                    : closestMatchingOptionIndex;
+                return tslib_es6.__assign(tslib_es6.__assign({}, state), { value: value, onChangeValue: !isMultiSelectable
+                        ? value
+                        : convertOptionsToText(state.selectedOptions), options: newOptions, singleSelectedOption: singleSelectedOption, highlightedOptionIndex: highlightedOptionIndex, isDirty: true, isExpanded: true });
             }
             case "SINGLE_SELECT": {
-                var _b = action.payload, selectedOption = _b.option, isAutocomplete = _b.isAutocomplete;
-                return tslib_es6.__assign(tslib_es6.__assign({}, state), { isExpanded: false, options: isAutocomplete
-                        ? filterOptions(initialOptions, selectedOption)
-                        : state.options, value: selectedOption });
+                var selectedOption = action.payload.option;
+                var options = state.options;
+                return tslib_es6.__assign(tslib_es6.__assign({}, state), { isExpanded: false, isDirty: true, singleSelectedOption: selectedOption, options: convertOptionsToObjects(initialOptions), highlightedOptionIndex: findOptionIndex(options, selectedOption), value: selectedOption.text, onChangeValue: selectedOption.text });
             }
             case "MULTI_SELECT": {
-                var selectedOption = action.payload.option;
-                var selectedOptions = state.selectedOptions, options = state.options;
-                var newSelectedOptions = getSelectedOptions(selectedOption, selectedOptions);
-                return tslib_es6.__assign(tslib_es6.__assign({}, state), { value: "", options: initialOptions, highlightedOptionIndex: findOptionIndex(options, selectedOption), selectedOptions: newSelectedOptions });
+                var _d = action.payload, selectedOption = _d.option, multiSelectLimit = _d.multiSelectLimit;
+                var selectedOptions = state.selectedOptions;
+                var _e = getNewMultiSelectOptions(selectedOption, selectedOptions, multiSelectLimit), newOptions = _e.newOptions, limitReached = _e.limitReached;
+                return tslib_es6.__assign(tslib_es6.__assign({}, state), { limitReached: limitReached, selectedOptions: newOptions, onChangeValue: convertOptionsToText(newOptions) });
             }
             case "MULTI_SELECT_REMOVE": {
-                var option_1 = action.payload.option;
+                var _f = action.payload, option_1 = _f.option, multiSelectLimit = _f.multiSelectLimit;
                 var selectedOptions = state.selectedOptions;
-                return tslib_es6.__assign(tslib_es6.__assign({}, state), { selectedOptions: selectedOptions.filter(function (selectedOption) { return option_1 !== selectedOption; }) });
+                var newSelectedOptions = selectedOptions.filter(function (selectedOption) { return option_1.text !== selectedOption.text; });
+                var limitReached = multiSelectLimitReached(newSelectedOptions, multiSelectLimit);
+                return tslib_es6.__assign(tslib_es6.__assign({}, state), { limitReached: limitReached, onChangeValue: convertOptionsToText(newSelectedOptions), selectedOptions: newSelectedOptions });
             }
             case "KEYDOWN": {
-                var _c = action.payload, key = _c.key, isAutocomplete = _c.isAutocomplete, isMultiSelectable = _c.isMultiSelectable;
+                var _g = action.payload, key = _g.key, isMultiSelectable = _g.isMultiSelectable, multiSelectLimit = _g.multiSelectLimit;
                 var isExpanded = state.isExpanded, highlightedOptionIndex = state.highlightedOptionIndex, options = state.options, selectedOptions = state.selectedOptions;
+                var hasNoHighlightedOption = highlightedOptionIndex === undefined;
                 if (key === "Escape" && isExpanded) {
-                    return tslib_es6.__assign(tslib_es6.__assign({}, state), { isExpanded: false, highlightedOptionIndex: 0 });
+                    return tslib_es6.__assign(tslib_es6.__assign({}, state), { showAllTags: false, isExpanded: false, highlightedOptionIndex: 0 });
                 }
                 if (key === "ArrowDown" && isExpanded) {
-                    return tslib_es6.__assign(tslib_es6.__assign({}, state), { highlightedOptionIndex: highlightedOptionIndex === options.length - 1
-                            ? 0
-                            : highlightedOptionIndex + 1 });
+                    return tslib_es6.__assign(tslib_es6.__assign({}, state), { highlightedOptionIndex: getKeydownOptionToHighlight({
+                            isNext: true,
+                            options: options,
+                            highlightedOptionIndex: highlightedOptionIndex,
+                        }) });
                 }
                 if (key === "ArrowUp" && isExpanded) {
-                    return tslib_es6.__assign(tslib_es6.__assign({}, state), { highlightedOptionIndex: highlightedOptionIndex === 0
-                            ? options.length - 1
-                            : highlightedOptionIndex - 1 });
-                }
-                if (key === "ArrowDown" && !isExpanded) {
-                    return tslib_es6.__assign(tslib_es6.__assign({}, state), { isExpanded: true, highlightedOptionIndex: isMultiSelectable && selectedOptions.length
-                            ? findOptionIndex(options, selectedOptions[selectedOptions.length - 1])
-                            : 0 });
+                    return tslib_es6.__assign(tslib_es6.__assign({}, state), { highlightedOptionIndex: getKeydownOptionToHighlight({
+                            isNext: false,
+                            options: options,
+                            highlightedOptionIndex: highlightedOptionIndex,
+                        }) });
                 }
-                if (key === "ArrowUp" && !isExpanded) {
-                    return tslib_es6.__assign(tslib_es6.__assign({}, state), { isExpanded: true, highlightedOptionIndex: isMultiSelectable && selectedOptions.length
-                            ? findOptionIndex(options, selectedOptions[selectedOptions.length - 1])
-                            : options.length - 1 });
+                if (["ArrowDown", "ArrowUp"].includes(key) && !isExpanded) {
+                    return tslib_es6.__assign(tslib_es6.__assign({}, state), { isExpanded: true, highlightedOptionIndex: 0 });
                 }
                 if (key === "Enter" && isExpanded) {
+                    if (hasNoHighlightedOption) {
+                        return tslib_es6.__assign(tslib_es6.__assign({}, state), { isExpanded: false });
+                    }
                     if (isMultiSelectable) {
-                        var newSelectedOptionIds = getSelectedOptions(options[highlightedOptionIndex], selectedOptions);
-                        return tslib_es6.__assign(tslib_es6.__assign({}, state), { value: "", options: initialOptions, selectedOptions: newSelectedOptionIds });
+                        var _h = getNewMultiSelectOptions(options[highlightedOptionIndex], selectedOptions, multiSelectLimit), newOptions = _h.newOptions, limitReached = _h.limitReached;
+                        return tslib_es6.__assign(tslib_es6.__assign({}, state), { limitReached: limitReached, onChangeValue: convertOptionsToText(newOptions), selectedOptions: newOptions });
                     }
                     else {
-                        return tslib_es6.__assign(tslib_es6.__assign({}, state), { isExpanded: false, options: isAutocomplete
-                                ? filterOptions(initialOptions, options[highlightedOptionIndex])
-                                : options, value: options[highlightedOptionIndex] });
+                        var newSelectedOption = options[highlightedOptionIndex];
+                        return tslib_es6.__assign(tslib_es6.__assign({}, state), { isExpanded: false, singleSelectedOption: newSelectedOption, options: convertOptionsToObjects(initialOptions), onChangeValue: newSelectedOption.text, value: newSelectedOption.text });
                     }
                 }
                 return state;
@@ -130,27 +230,179 @@ var reducer = function (initialOptions) {
     };
 };
 
-/** Use `ComboBox` to provide a searchable dropdown list that allows users to select from or filter through multiple options. */
-var ComboBox = React.forwardRef(function (_a, ref) {
-    var name = _a.name, onBlur = _a.onBlur, onFocus = _a.onFocus, label = _a.label, helper = _a.helper, id = _a.id, initialOptions = _a.options, hideLabel = _a.hideLabel, isFluid = _a.isFluid, errorMessage = _a.errorMessage, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, onClickDisclosure = _a.onClickDisclosure, listBoxAriaLabel = _a.listBoxAriaLabel, _b = _a.defaultValue, defaultValue = _b === void 0 ? "" : _b, _c = _a.labelSize, labelSize = _c === void 0 ? "l" : _c, _d = _a.isMultiSelectable, isMultiSelectable = _d === void 0 ? false : _d, _e = _a.isDisabled, isDisabled = _e === void 0 ? false : _e, _f = _a.isRequired, isRequired = _f === void 0 ? false : _f, _g = _a.isAutocomplete, isAutocomplete = _g === void 0 ? false : _g, props = tslib_es6.__rest(_a, ["name", "onBlur", "onFocus", "label", "helper", "id", "options", "hideLabel", "isFluid", "errorMessage", "disclosureTitle", "disclosureText", "onClickDisclosure", "listBoxAriaLabel", "defaultValue", "labelSize", "isMultiSelectable", "isDisabled", "isRequired", "isAutocomplete"]);
+var ComboBoxTags = function (_a) {
+    var ref = _a.ref, selectedOptions = _a.selectedOptions, showAllTags = _a.showAllTags, isDisabled = _a.isDisabled, isError = _a.isError, isDarkSurface = _a.isDarkSurface, visibleTagCount = _a.visibleTagCount, inputSize = _a.inputSize, isReadOnly = _a.isReadOnly, onTagBlur = _a.onTagBlur, onTagClick = _a.onTagClick, onTagKeyDown = _a.onTagKeyDown, onShowAllTagsClick = _a.onShowAllTagsClick;
+    var id = React.useId();
+    var tagLimit = !showAllTags ? visibleTagCount : undefined;
+    var showHiddenTagCount = !showAllTags && selectedOptions.length > visibleTagCount;
+    return (React.createElement("div", { ref: ref, className: index.classNames("arc-ComboBoxTags", suffixModifier.suffixModifier("arc-ComboBoxTags--size", inputSize), {
+            "arc-ComboBoxTags--disabled": isDisabled,
+            "arc-ComboBoxTags--readOnly": isReadOnly,
+            "arc-ComboBoxTags--invalid": isError,
+            "arc-ComboBoxTags--onDarkSurface": isDarkSurface,
+        }) },
+        selectedOptions.slice(0, tagLimit).map(function (option, i) { return (React.createElement("button", { type: "button", disabled: isDisabled, key: "".concat(id, "-selectedOption-").concat(i), className: "arc-ComboBoxTags-tag", "aria-label": "".concat(option.text, ", press space or enter to remove"), onBlur: onTagBlur, onMouseDown: onTagClick(option), onKeyDown: onTagKeyDown(option) },
+            React.createElement("div", { "aria-hidden": true, className: "arc-ComboBoxTags-tagInner" },
+                React.createElement("span", null, option.text),
+                React.createElement("div", { className: "arc-ComboBoxTags-tagIcon" },
+                    React.createElement(ThemeIcon.ThemeIcon, { icon: "comboboxTagRemove", size: 20 }))))); }),
+        showHiddenTagCount && (React.createElement("button", { type: "button", disabled: isDisabled, onClick: onShowAllTagsClick, className: "arc-ComboBoxTags-showHiddenButton", "aria-label": "Show all selected options" },
+            React.createElement("span", { className: "arc-ComboBoxTags-showHiddenButtonContent" },
+                "+\u00A0",
+                selectedOptions.length - visibleTagCount,
+                "\u00A0more")))));
+};
+
+var ComboBoxListItemInner = function (_a) {
+    var isHighlighted = _a.isHighlighted, isSingleSelected = _a.isSingleSelected, children = _a.children;
+    return (React.createElement("div", { className: index.classNames("arc-ComboBoxListItemInner", {
+            "arc-ComboBoxListItemInner--highlighted": isHighlighted,
+            "arc-ComboBoxListItemInner--singleSelected": isSingleSelected,
+        }) }, children));
+};
+
+var ComboBoxRegularOption = function (_a) {
+    var option = _a.option, isDisabled = _a.isDisabled, isMultiSelectable = _a.isMultiSelectable, isHighlighted = _a.isHighlighted, isSingleSelected = _a.isSingleSelected, isMultiSelected = _a.isMultiSelected;
+    return (React.createElement(ComboBoxListItemInner, { isHighlighted: isHighlighted, isSingleSelected: isSingleSelected },
+        React.createElement("div", { className: "arc-ComboBoxRegularOption-container" },
+            isMultiSelectable && (React.createElement("div", { className: index.classNames("arc-ComboBoxRegularOption-icon", "arc-ComboBoxRegularOption-icon--checkbox", {
+                    "arc-ComboBoxRegularOption-icon--checkboxSelected": isMultiSelected,
+                    "arc-ComboBoxRegularOption-icon--checkboxDisabled": isDisabled,
+                }) },
+                React.createElement(ThemeIcon.ThemeIcon, { size: 24, icon: "comboboxSelected" }))),
+            React.createElement("div", { className: "arc-ComboBoxRegularOption-text" },
+                React.createElement(Text.Text, null, option.text)),
+            !isMultiSelectable && isSingleSelected && (React.createElement("div", { className: "arc-ComboBoxRegularOption-icon" },
+                React.createElement(ThemeIcon.ThemeIcon, { size: 24, icon: "comboboxSelected" }))))));
+};
+
+var ComboBoxCustomOption = function (_a) {
+    var option = _a.option, selectedOptions = _a.selectedOptions, customOptionSupportingCopy = _a.customOptionSupportingCopy, optionsLength = _a.optionsLength, isHighlighted = _a.isHighlighted, isSelected = _a.isSelected;
+    var prefixText = getMatchingOption(selectedOptions, option.text)
+        ? "Remove"
+        : "Add";
+    return (React.createElement(React.Fragment, null,
+        React.createElement(ComboBoxListItemInner, { isHighlighted: isHighlighted, isSingleSelected: isSelected },
+            React.createElement(Text.Text, null,
+                prefixText,
+                ": \"",
+                option.text,
+                "\""),
+            customOptionSupportingCopy && (React.createElement("div", null,
+                React.createElement(VerticalSpace.VerticalSpace, { size: "4" }),
+                React.createElement(Text.Text, { size: "xs" }, customOptionSupportingCopy)))),
+        optionsLength > 1 && (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: "arc-ComboBoxCustomOption-rule" },
+                React.createElement("div", { className: "arc-ComboBoxCustomOption-ruleWrapper" },
+                    React.createElement(Rule.Rule, null))),
+            React.createElement(VerticalSpace.VerticalSpace, { size: "8" })))));
+};
+
+var ComboBoxNoResults = function (_a) {
+    var noResultsSupportingCopy = _a.noResultsSupportingCopy, value = _a.value;
+    return (React.createElement("li", { "aria-disabled": true, "aria-selected": false, role: "option", className: "arc-ComboBoxNoResults" },
+        React.createElement(ComboBoxListItemInner, null,
+            React.createElement("div", { className: "arc-ComboBoxNoResults-container" },
+                React.createElement("div", { className: "arc-ComboBoxNoResults-icon" },
+                    React.createElement(ThemeIcon.ThemeIcon, { size: 24, icon: "comboboxNoResults" })),
+                React.createElement("div", { className: "arc-ComboBoxNoResults-text" },
+                    React.createElement(Text.Text, null,
+                        "No results for \"",
+                        value,
+                        "\""),
+                    noResultsSupportingCopy && (React.createElement(React.Fragment, null,
+                        React.createElement(VerticalSpace.VerticalSpace, { size: "4" }),
+                        React.createElement(Text.Text, { size: "xs" }, noResultsSupportingCopy))))))));
+};
+
+var ComboBoxOptions = function (_a) {
+    var options = _a.options, listBoxId = _a.listBoxId, onMouseMove = _a.onMouseMove, onMouseDown = _a.onMouseDown, isMultiSelectable = _a.isMultiSelectable, noResultsSupportingCopy = _a.noResultsSupportingCopy, customOptionSupportingCopy = _a.customOptionSupportingCopy, selectedOptions = _a.selectedOptions, singleSelectedOption = _a.singleSelectedOption, highlightedOptionIndex = _a.highlightedOptionIndex, setOptionRef = _a.setOptionRef, limitReached = _a.limitReached, value = _a.value;
+    var isHighlighted = function (index, currentHighlightIndex) {
+        return index === currentHighlightIndex;
+    };
+    var isSingleSelected = function (option, selectedOption) { return option.text === selectedOption.text; };
+    var isMultiSelected = function (option, selectedOptions) {
+        return selectedOptions.some(function (selectedOption) { return option.text === selectedOption.text; });
+    };
+    var isOptionDisabled = function (option, selectedOptions) { return limitReached && !isMultiSelected(option, selectedOptions); };
+    return (React.createElement(React.Fragment, null, options.length ? (options.map(function (option, i) { return (React.createElement("li", { key: option.text, role: "option", id: "".concat(listBoxId, "-").concat(i), ref: setOptionRef(i), onMouseMove: onMouseMove(i), onMouseDown: onMouseDown(option), "aria-disabled": isOptionDisabled(option, selectedOptions), "aria-selected": isMultiSelectable
+            ? isMultiSelected(option, selectedOptions)
+            : isSingleSelected(option, singleSelectedOption), className: index.classNames("arc-ComboBoxOptions-listItem", {
+            "arc-ComboBoxOptions-listItem--disabled": isOptionDisabled(option, selectedOptions),
+        }) }, option.isCustom ? (React.createElement(ComboBoxCustomOption, { option: option, optionsLength: options.length, customOptionSupportingCopy: customOptionSupportingCopy, selectedOptions: selectedOptions, isHighlighted: isHighlighted(i, highlightedOptionIndex), isSelected: isSingleSelected(option, singleSelectedOption) })) : (React.createElement(ComboBoxRegularOption, { option: option, isDisabled: isOptionDisabled(option, selectedOptions), isMultiSelectable: isMultiSelectable, isHighlighted: isHighlighted(i, highlightedOptionIndex), isMultiSelected: isMultiSelected(option, selectedOptions), isSingleSelected: isSingleSelected(option, singleSelectedOption) })))); })) : (React.createElement(ComboBoxNoResults, { noResultsSupportingCopy: noResultsSupportingCopy, value: value }))));
+};
+
+var KeyNames;
+(function (KeyNames) {
+    KeyNames["ArrowUp"] = "ArrowUp";
+    KeyNames["ArrowDown"] = "ArrowDown";
+    KeyNames["Home"] = "Home";
+    KeyNames["Enter"] = "Enter";
+    KeyNames["Escape"] = "Escape";
+    KeyNames["Space"] = " ";
+})(KeyNames || (KeyNames = {}));
+
+var isSelectionKey = function (key) {
+    return key === KeyNames.Space || key === KeyNames.Enter;
+};
+
+var ComboBoxClearButton = function (_a) {
+    var ref = _a.ref, inputSize = _a.inputSize, tooltip = _a.tooltip, onKeyDown = _a.onKeyDown, onMouseDown = _a.onMouseDown, onBlur = _a.onBlur, isDarkSurface = _a.isDarkSurface, props = tslib_es6.__rest(_a, ["ref", "inputSize", "tooltip", "onKeyDown", "onMouseDown", "onBlur", "isDarkSurface"]);
+    return (React.createElement("button", tslib_es6.__assign({}, props, { type: "button", ref: ref, "aria-label": tooltip, onMouseDown: onMouseDown, onKeyDown: onKeyDown, onBlur: onBlur, className: index.classNames("arc-ComboBoxClearButton", suffixModifier.suffixModifier("arc-ComboBoxClearButton--size", inputSize), {
+            "arc-ComboBoxClearButton--onDarkSurface": isDarkSurface,
+        }) }),
+        React.createElement("div", { className: "arc-ComboBoxClearButton-icon" },
+            React.createElement(ThemeIcon.ThemeIcon, { "aria-hidden": true, icon: "comboboxClear" }))));
+};
+
+/** Use `ComboBox` to assist a text input with a dropdown list of options. */
+var ComboBox = function (_a) {
+    var ref = _a.ref, name = _a.name, onBlur = _a.onBlur, onFocus = _a.onFocus, label = _a.label, helper = _a.helper, id = _a.id, hideLabel = _a.hideLabel, isFluid = _a.isFluid, errorMessage = _a.errorMessage, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, onClickDisclosure = _a.onClickDisclosure, listBoxAriaLabel = _a.listBoxAriaLabel, prefixIcon = _a.prefixIcon, onChange = _a.onChange, noResultsSupportingCopy = _a.noResultsSupportingCopy, customOptionSupportingCopy = _a.customOptionSupportingCopy, multiSelectLimit = _a.multiSelectLimit, initialOptions = _a.options, _b = _a.clearButtonTooltip, clearButtonTooltip = _b === void 0 ? "Clear input" : _b, _c = _a.defaultSelectedValues, defaultSelectedValues = _c === void 0 ? [] : _c, _d = _a.defaultValue, defaultValue = _d === void 0 ? "" : _d, _e = _a.size, size = _e === void 0 ? "m" : _e, _f = _a.visibleTagCount, visibleTagCount = _f === void 0 ? 5 : _f, _g = _a.isClearButtonEnabled, isClearButtonEnabled = _g === void 0 ? false : _g, _h = _a.isReadOnly, isReadOnly = _h === void 0 ? false : _h, _j = _a.isMultiSelectable, isMultiSelectable = _j === void 0 ? false : _j, _k = _a.isDisabled, isDisabled = _k === void 0 ? false : _k, _l = _a.isRequired, isRequired = _l === void 0 ? false : _l, _m = _a.isAutocomplete, isAutocomplete = _m === void 0 ? false : _m, _o = _a.isCustomEntryAllowed, isCustomEntryAllowed = _o === void 0 ? false : _o, props = tslib_es6.__rest(_a, ["ref", "name", "onBlur", "onFocus", "label", "helper", "id", "hideLabel", "isFluid", "errorMessage", "disclosureTitle", "disclosureText", "onClickDisclosure", "listBoxAriaLabel", "prefixIcon", "onChange", "noResultsSupportingCopy", "customOptionSupportingCopy", "multiSelectLimit", "options", "clearButtonTooltip", "defaultSelectedValues", "defaultValue", "size", "visibleTagCount", "isClearButtonEnabled", "isReadOnly", "isMultiSelectable", "isDisabled", "isRequired", "isAutocomplete", "isCustomEntryAllowed"]);
     var listBoxId = React.useId();
+    var surface = React.useContext(Surface.Context).surface;
+    var _p = index$1.useThemeElement(), themeElement = _p[0], setThemeElement = _p[1];
     var listItemRefs = React.useRef([]);
-    var containerRef = React.useRef(null);
+    var comboBoxContainerRef = React.useRef(null);
+    var tagContainerRef = React.useRef(null);
     var inputRef = React.useRef(null);
-    var _h = index.useThemeElement(), themeElement = _h[0], setThemeElement = _h[1];
-    var _j = React.useReducer(reducer(initialOptions), {
+    var prevOnChangeValueRef = React.useRef(null);
+    var _q = React.useReducer(reducer(initialOptions), {
         isExpanded: false,
+        showAllTags: false,
+        isDirty: Boolean(defaultValue),
+        singleSelectedOption: { isCustom: false, text: defaultValue },
+        limitReached: defaultSelectedValues && multiSelectLimit
+            ? defaultSelectedValues.length > multiSelectLimit
+            : false,
         value: defaultValue,
-        options: initialOptions,
-        highlightedOptionIndex: 0,
-        selectedOptions: [],
-    }), _k = _j[0], isExpanded = _k.isExpanded, value = _k.value, options = _k.options, highlightedOptionIndex = _k.highlightedOptionIndex, selectedOptions = _k.selectedOptions, dispatch = _j[1];
+        onChangeValue: isMultiSelectable
+            ? defaultSelectedValues || null
+            : defaultValue || null,
+        options: convertOptionsToObjects(initialOptions),
+        selectedOptions: isMultiSelectable
+            ? convertOptionsToObjects(defaultSelectedValues).slice(0, multiSelectLimit)
+            : [],
+    }), _r = _q[0], isExpanded = _r.isExpanded, value = _r.value, options = _r.options, showAllTags = _r.showAllTags, singleSelectedOption = _r.singleSelectedOption, highlightedOptionIndex = _r.highlightedOptionIndex, selectedOptions = _r.selectedOptions, limitReached = _r.limitReached, isDirty = _r.isDirty, onChangeValue = _r.onChangeValue, dispatch = _q[1];
     var ariaDescribedby = FormControl.useAriaDescribedby({
         errorMessage: errorMessage,
         id: id,
         helper: helper,
         disclosureText: disclosureText,
     }).ariaDescribedby;
+    React.useEffect(function () {
+        var hasValueChanged = JSON.stringify(onChangeValue) !==
+            JSON.stringify(prevOnChangeValueRef.current);
+        if (hasValueChanged && onChange && onChangeValue) {
+            prevOnChangeValueRef.current = onChangeValue;
+            onChange(onChangeValue);
+        }
+    }, [onChangeValue, onChange]);
+    var hasHighlightedOption = typeof highlightedOptionIndex !== "undefined";
+    var listVerticalPadding = "12";
+    var isDarkSurface = surface === "dark";
+    var canOpenMenu = !isExpanded && !isReadOnly;
+    var showClearButton = isClearButtonEnabled && isDirty && value && !isDisabled && !isReadOnly;
+    var stackAutoCompleteIconFirst = selectedOptions.length && isAutocomplete && !showClearButton;
     var getTextInputRef = function (elementRef) {
         inputRef.current = elementRef;
         if (ref && typeof ref === "object") {
@@ -160,20 +412,24 @@ var ComboBox = React.forwardRef(function (_a, ref) {
             ref(elementRef);
         }
     };
+    var setOptionRef = function (index) { return function (el) {
+        return (listItemRefs.current[index] = el);
+    }; };
     var setScrollPosition = function (listEl) {
-        var listItemEl = listItemRefs.current[highlightedOptionIndex];
-        if (listItemEl && listEl) {
-            var selectedOptionIsBelowOverFlow = listItemEl.offsetTop + listItemEl.offsetHeight >
-                listEl.offsetHeight + listEl.scrollTop;
-            var selectedOptionIsAboveOverFlow = listItemEl.offsetTop < listEl.scrollTop;
-            if (selectedOptionIsBelowOverFlow) {
-                listEl.scrollTop =
-                    listItemEl.offsetTop +
-                        listItemEl.offsetHeight -
-                        listEl.offsetHeight;
-            }
-            if (selectedOptionIsAboveOverFlow) {
-                listEl.scrollTop = listItemEl.offsetTop;
+        if (hasHighlightedOption) {
+            var listItemEl = listItemRefs.current[highlightedOptionIndex];
+            if (listItemEl && listEl) {
+                var listItemOffset = listItemEl.offsetTop - parseInt(listVerticalPadding);
+                var selectedOptionIsBelowOverFlow = listItemOffset + listItemEl.offsetHeight >
+                    listEl.offsetHeight + listEl.scrollTop;
+                var selectedOptionIsAboveOverFlow = listItemOffset < listEl.scrollTop;
+                if (selectedOptionIsBelowOverFlow) {
+                    listEl.scrollTop =
+                        listItemOffset + listItemEl.offsetHeight - listEl.offsetHeight;
+                }
+                if (selectedOptionIsAboveOverFlow) {
+                    listEl.scrollTop = listItemOffset;
+                }
             }
         }
     };
@@ -185,6 +441,7 @@ var ComboBox = React.forwardRef(function (_a, ref) {
                 dispatch({
                     type: "MULTI_SELECT",
                     payload: {
+                        multiSelectLimit: multiSelectLimit,
                         option: itemOption,
                     },
                 });
@@ -193,7 +450,6 @@ var ComboBox = React.forwardRef(function (_a, ref) {
                 dispatch({
                     type: "SINGLE_SELECT",
                     payload: {
-                        isAutocomplete: isAutocomplete,
                         option: itemOption,
                     },
                 });
@@ -205,92 +461,230 @@ var ComboBox = React.forwardRef(function (_a, ref) {
         dispatch({
             type: "INPUT_CHANGE",
             payload: {
+                isCustomEntryAllowed: isCustomEntryAllowed,
+                isMultiSelectable: isMultiSelectable,
                 isAutocomplete: isAutocomplete,
                 value: e.target.value,
             },
         });
     };
-    var onInputClick = function () {
-        isAutocomplete &&
+    var onMouseDown = function (preventDefault) { return function (e) {
+        var _a;
+        preventDefault && e.preventDefault();
+        if (isDisabled) {
+            return;
+        }
+        if (canOpenMenu) {
             dispatch({
                 type: "OPEN",
+            });
+        }
+        if (isExpanded) {
+            dispatch({
+                type: "CLOSE_MENU",
+            });
+        }
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }; };
+    var onInteractOutsideDropdown = function (e) {
+        if (comboBoxContainerRef.current &&
+            !comboBoxContainerRef.current.contains(e.currentTarget)) {
+            dispatch({
+                type: "EXIT_INPUT",
                 payload: {
                     isMultiSelectable: isMultiSelectable,
+                    isCustomEntryAllowed: isCustomEntryAllowed,
                 },
             });
+        }
     };
-    var onInteractOutside = function (e) {
-        if (containerRef.current &&
-            !containerRef.current.contains(e.currentTarget)) {
+    var onInputFocus = function (e) {
+        if (canOpenMenu) {
             dispatch({
-                type: "CLOSE",
+                type: "OPEN",
+            });
+        }
+        onFocus && onFocus(e);
+    };
+    var onInputBlur = function (e) {
+        var _a;
+        if (!isExpanded &&
+            !((_a = comboBoxContainerRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget))) {
+            dispatch({
+                type: "EXIT_INPUT",
+                payload: {
+                    isMultiSelectable: isMultiSelectable,
+                    isCustomEntryAllowed: isCustomEntryAllowed,
+                },
+            });
+        }
+        onBlur && onBlur(e);
+    };
+    var onClearButtonBlur = function (e) {
+        var _a;
+        if (!isExpanded &&
+            !((_a = comboBoxContainerRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget))) {
+            dispatch({
+                type: "EXIT_INPUT",
+                payload: {
+                    isMultiSelectable: isMultiSelectable,
+                    isCustomEntryAllowed: isCustomEntryAllowed,
+                },
             });
         }
     };
     var onInputKeyDown = function (e) {
+        if (!isReadOnly) {
+            if (isSelectionKey(e.key)) {
+                e.preventDefault();
+            }
+            dispatch({
+                type: "KEYDOWN",
+                payload: {
+                    key: e.key,
+                    isCustomEntryAllowed: isCustomEntryAllowed,
+                    isMultiSelectable: isMultiSelectable,
+                    multiSelectLimit: multiSelectLimit,
+                },
+            });
+        }
+    };
+    var setHighlightedOption = function (index) { return function () {
         dispatch({
-            type: "KEYDOWN",
+            type: "SET_HIGHLIGHTED_OPTION",
             payload: {
-                key: e.key,
-                isAutocomplete: isAutocomplete,
-                isMultiSelectable: isMultiSelectable,
+                index: index,
             },
         });
-    };
-    var onMultiSelectRemove = function (option) { return function (e) {
+    }; };
+    var onMultiSelectRemove = function (option) {
         var _a;
-        e.preventDefault();
-        e.stopPropagation();
         dispatch({
             type: "MULTI_SELECT_REMOVE",
             payload: {
                 option: option,
+                multiSelectLimit: multiSelectLimit,
             },
         });
         (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    var onTagClick = function (option) { return function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        !isReadOnly && onMultiSelectRemove(option);
     }; };
+    var onTagKeyDown = function (option) { return function (e) {
+        if (isSelectionKey(e.key)) {
+            e.preventDefault();
+            e.stopPropagation();
+            !isReadOnly && onMultiSelectRemove(option);
+        }
+    }; };
+    var onShowAllTagsClick = function () {
+        var _a, _b;
+        dispatch({
+            type: "SHOW_ALL_TAGS",
+        });
+        if (!isReadOnly) {
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        else {
+            ((_b = tagContainerRef.current) === null || _b === void 0 ? void 0 : _b.firstChild).focus();
+        }
+    };
+    var onTagBlur = function (e) {
+        var _a;
+        if (isReadOnly &&
+            !((_a = comboBoxContainerRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget))) {
+            dispatch({
+                type: "EXIT_INPUT",
+                payload: {
+                    isMultiSelectable: isMultiSelectable,
+                    isCustomEntryAllowed: isCustomEntryAllowed,
+                },
+            });
+        }
+    };
+    var onClearButtonMouseDown = function (e) {
+        var _a, _b;
+        e.preventDefault();
+        dispatch({
+            type: "CLEAR",
+            payload: {
+                isCustomEntryAllowed: isCustomEntryAllowed,
+                isMultiSelectable: isMultiSelectable,
+            },
+        });
+        if (!((_a = comboBoxContainerRef.current) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement))) {
+            (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+    };
+    var onClearButtonKeydown = function (e) {
+        var _a;
+        if (isSelectionKey(e.key)) {
+            e.preventDefault();
+            dispatch({
+                type: "CLEAR",
+                payload: {
+                    isCustomEntryAllowed: isCustomEntryAllowed,
+                    isMultiSelectable: isMultiSelectable,
+                },
+            });
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    };
     var onOpenAutoFocus = function (e) {
         var _a;
         e.preventDefault();
         (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     };
-    return (React.createElement("div", { ref: setThemeElement, className: index$1.classNames("arc-ComboBox", {
+    return (React.createElement("div", tslib_es6.__assign({ ref: setThemeElement, className: index.classNames("arc-ComboBox", suffixModifier.suffixModifier("arc-ComboBox--size", size), {
             "arc-ComboBox--constrained": !isFluid,
-        }) },
-        React.createElement("div", { ref: containerRef },
+            "arc-ComboBox--invalid": errorMessage,
+            "arc-ComboBox--disabled": isDisabled,
+            "arc-ComboBox--expanded": isExpanded,
+            "arc-ComboBox--autoComplete": isAutocomplete,
+            "arc-ComboBox--onDarkSurface": isDarkSurface,
+            "arc-ComboBox--readOnly": isReadOnly,
+        }) }, filterAttrs.filterAttrs(props)),
+        React.createElement("div", { ref: comboBoxContainerRef },
             React.createElement(index$2.Root2, { open: isExpanded },
-                React.createElement(FormControl.FormControl, { errorMessage: errorMessage, helper: helper, htmlFor: id, isDisabled: isDisabled, label: label, hideLabel: hideLabel, labelSize: labelSize, requirementStatus: isRequired ? "required" : "optional", disclosureTitle: disclosureTitle, disclosureText: disclosureText, onClickDisclosure: onClickDisclosure },
-                    React.createElement("div", { onClick: onInputClick, className: index$1.classNames("arc-ComboBox-container", {
-                            "arc-ComboBox-container--cursor": isAutocomplete,
-                        }) },
-                        React.createElement("div", { className: index$1.classNames("arc-ComboBox-inputWrapper", {
-                                "arc-ComboBox-inputWrapper--multiSelect": isMultiSelectable,
-                            }) },
-                            selectedOptions.length > 0 &&
-                                selectedOptions.map(function (option, i) { return (React.createElement("div", { className: "arc-ComboBox-tag", key: "".concat(listBoxId, "-selectedOption-").concat(i) },
-                                    React.createElement("span", null, option),
-                                    React.createElement("button", { className: "arc-ComboBox-tagButton", "aria-label": "".concat(option, ", press space or enter to remove"), onClick: onMultiSelectRemove(option) },
-                                        React.createElement(ThemeIcon.ThemeIcon, { icon: "tagRemove", color: "brand", size: 20 })))); }),
-                            React.createElement("input", tslib_es6.__assign({ className: "arc-ComboBox-input", ref: getTextInputRef, "aria-describedby": ariaDescribedby, "aria-invalid": errorMessage ? "true" : "false", type: "text", role: "combobox", autoComplete: "off", "aria-autocomplete": "list", "aria-controls": listBoxId, "aria-expanded": isExpanded, "aria-activedescendant": highlightedOptionIndex
-                                    ? "".concat(listBoxId, "-").concat(highlightedOptionIndex)
-                                    : undefined, id: id, name: name, onFocus: onFocus, onBlur: onBlur, onChange: onInputChange, onKeyDown: onInputKeyDown, disabled: isDisabled, required: isRequired, value: value }, filterAttrs.filterAttrs(props)))),
-                        isAutocomplete && (React.createElement("div", { className: index$1.classNames("arc-ComboBox-inputIcon", {
-                                "arc-ComboBox-inputIcon--expanded": isExpanded,
-                            }) },
-                            React.createElement(Icon.Icon, { icon: BtIconChevronDown2Px, size: 24 }))))),
-                React.createElement(index$2.Anchor2, null),
-                React.createElement(index$2.Portal, { container: themeElement },
-                    React.createElement(index$2.Content2, { align: "start", sideOffset: 5, onInteractOutside: onInteractOutside, onOpenAutoFocus: onOpenAutoFocus },
-                        React.createElement("div", { className: "arc-ComboBox-listboxContainer" },
-                            React.createElement(Box.Box, { elevationLevel: "1" },
-                                React.createElement("ul", { ref: setScrollPosition, id: listBoxId, className: "arc-ComboBox-list", role: "listbox", "aria-label": listBoxAriaLabel, "aria-multiselectable": isMultiSelectable }, options.length ? (options.map(function (option, i) { return (React.createElement("li", { id: "".concat(listBoxId, "-").concat(i), ref: function (el) { return (listItemRefs.current[i] = el); }, key: option, className: index$1.classNames("arc-ComboBox-listItem", {
-                                        "arc-ComboBox-listItem--highlighted": i === highlightedOptionIndex,
-                                    }), onMouseDown: onItemClick(option), role: "option", "aria-selected": isSelected(option, selectedOptions) },
-                                    React.createElement("div", { className: "arc-ComboBox-listItemText" }, option),
-                                    React.createElement("div", { className: index$1.classNames("arc-ComboBox-listItemIcon", {
-                                            "arc-ComboBox-listItemIcon--visible": isSelected(option, selectedOptions),
+                React.createElement(FormControl.FormControl, { errorMessage: errorMessage, helper: helper, htmlFor: id, isDisabled: isDisabled, label: label, hideLabel: hideLabel, labelSize: size, requirementStatus: isRequired ? "required" : "optional", disclosureTitle: disclosureTitle, disclosureText: disclosureText, onClickDisclosure: onClickDisclosure },
+                    React.createElement(index$2.Anchor2, null,
+                        React.createElement("div", { className: "arc-ComboBox-container" },
+                            React.createElement("div", { className: index.classNames("arc-ComboBox-inputContainer", {
+                                    "arc-ComboBox-inputContainer--selectedOptionMode": selectedOptions.length,
+                                }) },
+                                React.createElement("div", { className: "arc-ComboBox-controls" },
+                                    selectedOptions.length > 0 && (React.createElement(ComboBoxTags, { ref: tagContainerRef, isReadOnly: isReadOnly, inputSize: size, isDisabled: isDisabled, isDarkSurface: isDarkSurface, isError: Boolean(errorMessage), showAllTags: showAllTags, visibleTagCount: visibleTagCount, selectedOptions: selectedOptions, onShowAllTagsClick: onShowAllTagsClick, onTagBlur: onTagBlur, onTagClick: onTagClick, onTagKeyDown: onTagKeyDown })),
+                                    React.createElement("div", { className: "arc-ComboBox-inputWrapper" },
+                                        prefixIcon && (React.createElement("div", { onMouseDown: onMouseDown(true), className: "arc-ComboBox-prefixIcon" },
+                                            React.createElement(Icon.Icon, { icon: prefixIcon }))),
+                                        React.createElement("input", { readOnly: isReadOnly, className: "arc-ComboBox-input", type: "text", role: "combobox", autoComplete: "off", ref: getTextInputRef, id: id, name: name, onMouseDown: onMouseDown(false), onFocus: onInputFocus, onBlur: onInputBlur, onChange: onInputChange, onKeyDown: onInputKeyDown, disabled: isDisabled, required: isRequired, value: value, "aria-describedby": ariaDescribedby, "aria-invalid": errorMessage ? "true" : "false", "aria-autocomplete": isAutocomplete ? "list" : "none", "aria-controls": listBoxId, "aria-expanded": isExpanded, "aria-activedescendant": hasHighlightedOption
+                                                ? "".concat(listBoxId, "-").concat(highlightedOptionIndex)
+                                                : undefined }))),
+                                React.createElement("div", { className: index.classNames("arc-ComboBox-icons", {
+                                        "arc-ComboBox-icons--stack": selectedOptions.length,
+                                        "arc-ComboBox-icons--unreversed": stackAutoCompleteIconFirst,
+                                    }) },
+                                    showClearButton && (React.createElement("div", { className: "arc-ComboBox-iconContainer" },
+                                        React.createElement(Tooltip.Tooltip, { asChild: true, zIndex: 102, title: clearButtonTooltip, alignContent: "center", delayDuration: 500, side: "bottom" },
+                                            React.createElement(ComboBoxClearButton, { onBlur: onClearButtonBlur, isDarkSurface: isDarkSurface, inputSize: size, tooltip: clearButtonTooltip, onMouseDown: onClearButtonMouseDown, onKeyDown: onClearButtonKeydown })))),
+                                    isAutocomplete && (React.createElement("div", { onMouseDown: onMouseDown(true), className: index.classNames("arc-ComboBox-iconContainer", "arc-ComboBox-iconContainer--autoComplete", {
+                                            "arc-ComboBox-iconContainer--rotate": isExpanded,
                                         }) },
-                                        React.createElement(ThemeIcon.ThemeIcon, { size: 20, icon: "selectIndicator" })))); })) : (React.createElement("li", { className: "arc-ComboBox-listItem", role: "option", "aria-selected": false, "aria-disabled": true }, "No matches found")))))))))));
-});
+                                        React.createElement("div", { className: "arc-ComboBox-autoCompleteIcon" },
+                                            React.createElement(ThemeIcon.ThemeIcon, { icon: "comboboxAutoComplete" }))))))))),
+                React.createElement(index$2.Portal, { container: themeElement },
+                    React.createElement(index$2.Content2, { align: "start", className: "arc-ComboBox-popoverContent", sideOffset: parseInt(listVerticalPadding), onInteractOutside: onInteractOutsideDropdown, onOpenAutoFocus: onOpenAutoFocus },
+                        React.createElement("div", { onMouseLeave: setHighlightedOption(undefined), className: "arc-ComboBox-listboxContainer" },
+                            React.createElement("div", { className: index.classNames("arc-ComboBox-listBoxInner", {
+                                    "arc-ComboBox-listBoxInner--onDarkSurface": isDarkSurface,
+                                }) },
+                                React.createElement(VerticalSpace.VerticalSpace, { size: listVerticalPadding }),
+                                React.createElement("ul", { tabIndex: -1, className: "arc-ComboBox-list", role: "listbox", ref: setScrollPosition, id: listBoxId, "aria-label": listBoxAriaLabel, "aria-multiselectable": isMultiSelectable },
+                                    React.createElement(ComboBoxOptions, { value: value, limitReached: limitReached, customOptionSupportingCopy: customOptionSupportingCopy, noResultsSupportingCopy: noResultsSupportingCopy, setOptionRef: setOptionRef, options: options, listBoxId: listBoxId, isMultiSelectable: isMultiSelectable, selectedOptions: selectedOptions, singleSelectedOption: singleSelectedOption, highlightedOptionIndex: highlightedOptionIndex, onMouseMove: setHighlightedOption, onMouseDown: onItemClick })),
+                                React.createElement(VerticalSpace.VerticalSpace, { size: listVerticalPadding })))))))));
+};
 
 exports.ComboBox = ComboBox;