@cube-dev/ui-kit 0.201.0 → 0.202.0

package/dist/components/fields/ComboBox/ComboBox.js

@@ -1,5 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.201.0 | Cube Dev Team */
-import { extractStyles } from "../../../utils/styles.js";
+/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "../../../utils/react/useLayoutEffect.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { usePopoverSync } from "../../../utils/react/usePopoverSync.js";
@@ -11,10 +10,12 @@ import { useI18n } from "../../../i18n/useI18n.js";
 import { DirectionIcon } from "../../../icons/DirectionIcon.js";
 import { generateRandomId } from "../../../utils/random.js";
 import { CloseIcon } from "../../../icons/CloseIcon.js";
+import { OVERLAY_KEYS, settleOverlayKey } from "../../../utils/react/overlayKeyPropagation.js";
 import { getValidationMods } from "../../form/validation/resolve-validation-props.js";
 import { getValidationIcon } from "../../form/validation/ValidationIndicator.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
 import { wrapWithField } from "../../form/wrapper.js";
+import { splitFieldLayout } from "../../form/field-layout.js";
 import { getListBoxOptionId } from "../ListBox/optionId.js";
 import { filterCollectionNodes, getEdgeVisibleKey, getNextVisibleKey, markKeyboardFocus } from "../ListBoxPopover/listNavigation.js";
 import { DEFAULT_INPUT_STYLES, INPUT_WRAPPER_STYLES } from "../TextInput/TextInputBase.js";
@@ -22,7 +23,7 @@ import { ListBoxPopover } from "../ListBoxPopover/ListBoxPopover.js";
 import { useCompositeFocus } from "../ListBoxPopover/useCompositeFocus.js";
 import { collectOptions, findTypedOption, getItemLabel, highlightOption, resolveHighlightedKey, sortSelectedFirst } from "./comboBoxOptions.js";
 import { c } from "react/compiler-runtime";
-import { BASE_STYLES, COLOR_STYLES, OUTER_STYLES, tasty } from "@tenphi/tasty";
+import { tasty } from "@tenphi/tasty";
 import React, { forwardRef, useEffect, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useCollator, useFilter, useKeyboard } from "react-aria";
@@ -36,11 +37,6 @@ const InputElement = tasty({
 	as: "input",
 	styles: DEFAULT_INPUT_STYLES
 });
-const PROP_STYLES = [
-	...BASE_STYLES,
-	...OUTER_STYLES,
-	...COLOR_STYLES
-];
 function useComboBoxState(t0) {
 	const $ = c(12);
 	const { selectedKey, defaultSelectedKey, inputValue, defaultInputValue, comboBoxId, triggerRef, popoverRef } = t0;
@@ -204,7 +200,6 @@ function useComboBoxFiltering(t0) {
 function _temp() {
 	return true;
 }
-const OVERLAY_KEYS = /* @__PURE__ */ new Set(["Escape", "Tab"]);
 function isComposing(e) {
 	return e.nativeEvent?.isComposing || e.keyCode === 229;
 }
@@ -360,7 +355,14 @@ function useComboBoxKeyboard(t0) {
 	if ($[42] !== handleKey || $[43] !== isReadOnly || $[44] !== onKeyDown) {
 		t8 = { onKeyDown: (e_5) => {
 			onKeyDown?.(e_5);
-			if (e_5.isDefaultPrevented() || isComposing(e_5)) return;
+			if (e_5.isDefaultPrevented()) {
+				settleOverlayKey(e_5);
+				return;
+			}
+			if (isComposing(e_5)) {
+				settleOverlayKey(e_5);
+				return;
+			}
 			if ((isReadOnly || !handleKey(e_5)) && OVERLAY_KEYS.has(e_5.key)) e_5.continuePropagation();
 		} };
 		$[42] = handleKey;
@@ -454,7 +456,7 @@ const ComboBoxInput = forwardRef(function ComboBoxInput(t0, ref) {
 	return t5;
 });
 const ComboBox = forwardRef(function ComboBox(props, ref) {
-	const $ = c(279);
+	const $ = c(288);
 	let t0;
 	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
 		t0 = { valuePropsMapper: _temp2 };
@@ -462,52 +464,51 @@ const ComboBox = forwardRef(function ComboBox(props, ref) {
 	} else t0 = $[0];
 	props = useFieldProps(props, t0);
 	const { t } = useI18n();
-	let { qa, label, extra, labelStyles, isRequired, necessityIndicator, isInvalid, isValid, id, icon, prefix: t1, isDisabled, autoFocus, autoComplete: t2, wrapperRef: t3, inputRef: t4, triggerRef, popoverRef, listBoxRef, isLoading, inputStyles, optionStyles, triggerStyles, listBoxStyles, overlayStyles, suffix, hideTrigger, message, description, size: t5, direction: t6, shouldFlip: t7, popoverTrigger: t8, suffixPosition: t9, filter, styles, labelSuffix, selectedKey, defaultSelectedKey, inputValue, defaultInputValue, onInputChange, isClearable, onClear, placeholder, allowsCustomValue, shouldCommitOnBlur: t10, clearOnBlur, items, children: renderChildren, sectionStyles, headingStyles, listGap, isReadOnly, overlayOffset: t11, containerPadding: t12, onSelectionChange: externalOnSelectionChange, sortSelectedToTop: sortSelectedToTopProp, onOpenChange, onFocus, onBlur, onKeyDown, form, ...otherProps } = props;
-	let prefix = t1;
-	const autoComplete = t2 === void 0 ? "off" : t2;
-	let wrapperRef = t3;
-	let inputRef = t4;
-	const size = t5 === void 0 ? "medium" : t5;
-	const direction = t6 === void 0 ? "bottom" : t6;
-	const shouldFlip = t7 === void 0 ? true : t7;
-	const popoverTrigger = t8 === void 0 ? "input" : t8;
-	const suffixPosition = t9 === void 0 ? "before" : t9;
-	const shouldCommitOnBlur = t10 === void 0 ? true : t10;
-	const overlayOffset = t11 === void 0 ? 8 : t11;
-	const containerPadding = t12 === void 0 ? 8 : t12;
-	let t13;
+	let { qa, label, isRequired, isInvalid, isValid, id, icon, prefix, isDisabled, autoFocus, autoComplete: t1, wrapperRef: t2, inputRef: t3, triggerRef, popoverRef, listBoxRef, isLoading, inputStyles, optionStyles, triggerStyles, listBoxStyles, overlayStyles, suffix, hideTrigger, size: t4, direction: t5, shouldFlip: t6, popoverTrigger: t7, suffixPosition: t8, filter, styles, selectedKey, defaultSelectedKey, inputValue, defaultInputValue, onInputChange, isClearable, onClear, placeholder, allowsCustomValue, shouldCommitOnBlur: t9, clearOnBlur, items, children: renderChildren, sectionStyles, headingStyles, listGap, isReadOnly, overlayOffset: t10, containerPadding: t11, onSelectionChange: externalOnSelectionChange, sortSelectedToTop: sortSelectedToTopProp, onOpenChange, onFocus, onBlur, onKeyDown } = props;
+	const autoComplete = t1 === void 0 ? "off" : t1;
+	let wrapperRef = t2;
+	let inputRef = t3;
+	const size = t4 === void 0 ? "medium" : t4;
+	const direction = t5 === void 0 ? "bottom" : t5;
+	const shouldFlip = t6 === void 0 ? true : t6;
+	const popoverTrigger = t7 === void 0 ? "input" : t7;
+	const suffixPosition = t8 === void 0 ? "before" : t8;
+	const shouldCommitOnBlur = t9 === void 0 ? true : t9;
+	const overlayOffset = t10 === void 0 ? 8 : t10;
+	const containerPadding = t11 === void 0 ? 8 : t11;
+	let t12;
 	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-		t13 = generateRandomId();
-		$[1] = t13;
-	} else t13 = $[1];
-	const comboBoxId = t13;
+		t12 = generateRandomId();
+		$[1] = t12;
+	} else t12 = $[1];
+	const comboBoxId = t12;
 	wrapperRef = useCombinedRefs(wrapperRef, ref);
 	popoverRef = useCombinedRefs(popoverRef);
-	const t14 = wrapperRef;
-	const t15 = popoverRef;
-	let t16;
-	if ($[2] !== comboBoxId || $[3] !== defaultInputValue || $[4] !== defaultSelectedKey || $[5] !== inputValue || $[6] !== selectedKey || $[7] !== t14 || $[8] !== t15) {
-		t16 = {
+	const t13 = wrapperRef;
+	const t14 = popoverRef;
+	let t15;
+	if ($[2] !== defaultInputValue || $[3] !== defaultSelectedKey || $[4] !== inputValue || $[5] !== selectedKey || $[6] !== t13 || $[7] !== t14) {
+		t15 = {
 			selectedKey,
 			defaultSelectedKey,
 			inputValue,
 			defaultInputValue,
 			comboBoxId,
-			triggerRef: t14,
-			popoverRef: t15
+			triggerRef: t13,
+			popoverRef: t14
 		};
-		$[2] = comboBoxId;
-		$[3] = defaultInputValue;
-		$[4] = defaultSelectedKey;
-		$[5] = inputValue;
-		$[6] = selectedKey;
+		$[2] = defaultInputValue;
+		$[3] = defaultSelectedKey;
+		$[4] = inputValue;
+		$[5] = selectedKey;
+		$[6] = t13;
 		$[7] = t14;
 		$[8] = t15;
-		$[9] = t16;
-	} else t16 = $[9];
-	const { effectiveSelectedKey, internalInputValue, isPopoverOpen, setIsPopoverOpen, setInternalSelectedKey, setInternalInputValue, isControlledKey, isControlledInput } = useComboBoxState(t16);
+	} else t15 = $[8];
+	const { effectiveSelectedKey, internalInputValue, isPopoverOpen, setIsPopoverOpen, setInternalSelectedKey, setInternalInputValue, isControlledKey, isControlledInput } = useComboBoxState(t15);
 	const sortSelectedToTop = sortSelectedToTopProp ?? (items ? true : false);
-	styles = extractStyles(otherProps, PROP_STYLES, styles);
+	const fieldLayout = splitFieldLayout(props);
+	styles = fieldLayout.styles;
 	inputRef = useCombinedRefs(inputRef);
 	triggerRef = useCombinedRefs(triggerRef);
 	listBoxRef = useCombinedRefs(listBoxRef);
@@ -515,7 +516,7 @@ const ComboBox = forwardRef(function ComboBox(props, ref) {
 	if (!isPopoverOpen && sortKey !== effectiveSelectedKey) setSortKey(effectiveSelectedKey);
 	let children;
 	let sortedItems;
-	if ($[10] !== items || $[11] !== renderChildren || $[12] !== sortKey || $[13] !== sortSelectedToTop) {
+	if ($[9] !== items || $[10] !== renderChildren || $[11] !== sortKey || $[12] !== sortSelectedToTop) {
 		sortedItems = items && sortSelectedToTop ? sortSelectedFirst(items, sortKey) : items;
 		children = renderChildren;
 		const renderFn = renderChildren;
@@ -526,124 +527,124 @@ const ComboBox = forwardRef(function ComboBox(props, ref) {
 				return rendered;
 			});
 		} catch {}
-		$[10] = items;
-		$[11] = renderChildren;
-		$[12] = sortKey;
-		$[13] = sortSelectedToTop;
-		$[14] = children;
-		$[15] = sortedItems;
+		$[9] = items;
+		$[10] = renderChildren;
+		$[11] = sortKey;
+		$[12] = sortSelectedToTop;
+		$[13] = children;
+		$[14] = sortedItems;
 	} else {
-		children = $[14];
-		sortedItems = $[15];
+		children = $[13];
+		sortedItems = $[14];
 	}
-	const t17 = children;
-	let t18;
-	if ($[16] !== props.disabledKeys || $[17] !== sortedItems || $[18] !== t17) {
-		t18 = {
-			children: t17,
+	const t16 = children;
+	let t17;
+	if ($[15] !== props.disabledKeys || $[16] !== sortedItems || $[17] !== t16) {
+		t17 = {
+			children: t16,
 			items: sortedItems,
 			disabledKeys: props.disabledKeys,
 			selectionMode: "none"
 		};
-		$[16] = props.disabledKeys;
-		$[17] = sortedItems;
+		$[15] = props.disabledKeys;
+		$[16] = sortedItems;
+		$[17] = t16;
 		$[18] = t17;
-		$[19] = t18;
-	} else t18 = $[19];
-	const localCollectionState = useListState(t18);
+	} else t17 = $[18];
+	const localCollectionState = useListState(t17);
 	const { selectedLabel, pickLabel } = useSelectedLabel(localCollectionState.collection, effectiveSelectedKey);
 	const effectiveInputValue = isControlledInput ? inputValue : internalInputValue ?? selectedLabel;
-	let t19;
-	if ($[20] !== effectiveInputValue || $[21] !== filter) {
-		t19 = {
+	let t18;
+	if ($[19] !== effectiveInputValue || $[20] !== filter) {
+		t18 = {
 			effectiveInputValue,
 			filter
 		};
-		$[20] = effectiveInputValue;
-		$[21] = filter;
-		$[22] = t19;
-	} else t19 = $[22];
-	const { filterFn, isSameText, setIsFilterActive } = useComboBoxFiltering(t19);
-	let t20;
-	if ($[23] !== filterFn || $[24] !== localCollectionState.collection) {
-		t20 = collectOptions(filterFn(localCollectionState.collection));
-		$[23] = filterFn;
-		$[24] = localCollectionState.collection;
-		$[25] = t20;
-	} else t20 = $[25];
-	const filteredOptions = t20;
+		$[19] = effectiveInputValue;
+		$[20] = filter;
+		$[21] = t18;
+	} else t18 = $[21];
+	const { filterFn, isSameText, setIsFilterActive } = useComboBoxFiltering(t18);
+	let t19;
+	if ($[22] !== filterFn || $[23] !== localCollectionState.collection) {
+		t19 = collectOptions(filterFn(localCollectionState.collection));
+		$[22] = filterFn;
+		$[23] = localCollectionState.collection;
+		$[24] = t19;
+	} else t19 = $[24];
+	const filteredOptions = t19;
 	const hasResults = filteredOptions.length > 0;
 	const shouldShowPopover = isPopoverOpen && hasResults;
 	const reportedOpenRef = useRef(shouldShowPopover);
+	let t20;
 	let t21;
-	let t22;
-	if ($[26] !== onOpenChange || $[27] !== shouldShowPopover) {
-		t21 = () => {
+	if ($[25] !== onOpenChange || $[26] !== shouldShowPopover) {
+		t20 = () => {
 			if (reportedOpenRef.current === shouldShowPopover) return;
 			reportedOpenRef.current = shouldShowPopover;
 			onOpenChange?.(shouldShowPopover);
 		};
-		t22 = [shouldShowPopover, onOpenChange];
-		$[26] = onOpenChange;
-		$[27] = shouldShowPopover;
+		t21 = [shouldShowPopover, onOpenChange];
+		$[25] = onOpenChange;
+		$[26] = shouldShowPopover;
+		$[27] = t20;
 		$[28] = t21;
-		$[29] = t22;
 	} else {
+		t20 = $[27];
 		t21 = $[28];
-		t22 = $[29];
 	}
-	useEffect(t21, t22);
+	useEffect(t20, t21);
 	const { isFocused, focusProps } = useFocus$1();
-	let t23;
-	if ($[30] !== isControlledKey || $[31] !== setInternalSelectedKey) {
-		t23 = (key) => {
+	let t22;
+	if ($[29] !== isControlledKey || $[30] !== setInternalSelectedKey) {
+		t22 = (key) => {
 			if (!isControlledKey) setInternalSelectedKey(key);
 		};
-		$[30] = isControlledKey;
-		$[31] = setInternalSelectedKey;
-		$[32] = t23;
-	} else t23 = $[32];
-	const setSelectedKey = t23;
-	let t24;
-	if ($[33] !== effectiveInputValue || $[34] !== isControlledInput || $[35] !== onInputChange || $[36] !== setInternalInputValue) {
-		t24 = (label_0) => {
+		$[29] = isControlledKey;
+		$[30] = setInternalSelectedKey;
+		$[31] = t22;
+	} else t22 = $[31];
+	const setSelectedKey = t22;
+	let t23;
+	if ($[32] !== effectiveInputValue || $[33] !== isControlledInput || $[34] !== onInputChange || $[35] !== setInternalInputValue) {
+		t23 = (label_0) => {
 			if (!isControlledInput) setInternalInputValue(null);
 			if (label_0 !== effectiveInputValue) onInputChange?.(label_0);
 		};
-		$[33] = effectiveInputValue;
-		$[34] = isControlledInput;
-		$[35] = onInputChange;
-		$[36] = setInternalInputValue;
-		$[37] = t24;
-	} else t24 = $[37];
-	const showSelectionLabel = t24;
-	let t25;
-	if ($[38] !== effectiveSelectedKey || $[39] !== externalOnSelectionChange || $[40] !== setSelectedKey || $[41] !== showSelectionLabel) {
-		t25 = () => {
+		$[32] = effectiveInputValue;
+		$[33] = isControlledInput;
+		$[34] = onInputChange;
+		$[35] = setInternalInputValue;
+		$[36] = t23;
+	} else t23 = $[36];
+	const showSelectionLabel = t23;
+	let t24;
+	if ($[37] !== effectiveSelectedKey || $[38] !== externalOnSelectionChange || $[39] !== setSelectedKey || $[40] !== showSelectionLabel) {
+		t24 = () => {
 			if (effectiveSelectedKey != null) {
 				externalOnSelectionChange?.(null);
 				setSelectedKey(null);
 			}
 			showSelectionLabel("");
 		};
-		$[38] = effectiveSelectedKey;
-		$[39] = externalOnSelectionChange;
-		$[40] = setSelectedKey;
-		$[41] = showSelectionLabel;
-		$[42] = t25;
-	} else t25 = $[42];
-	const clearSelectionAndInput = t25;
+		$[37] = effectiveSelectedKey;
+		$[38] = externalOnSelectionChange;
+		$[39] = setSelectedKey;
+		$[40] = showSelectionLabel;
+		$[41] = t24;
+	} else t24 = $[41];
+	const clearSelectionAndInput = t24;
+	let t25;
+	if ($[42] !== selectedLabel || $[43] !== showSelectionLabel) {
+		t25 = () => showSelectionLabel(selectedLabel);
+		$[42] = selectedLabel;
+		$[43] = showSelectionLabel;
+		$[44] = t25;
+	} else t25 = $[44];
+	const restoreSelectedLabel = t25;
 	let t26;
-	if ($[43] !== selectedLabel || $[44] !== showSelectionLabel) {
-		t26 = () => showSelectionLabel(selectedLabel);
-		$[43] = selectedLabel;
-		$[44] = showSelectionLabel;
-		$[45] = t26;
-	} else t26 = $[45];
-	const restoreSelectedLabel = t26;
-	let t27;
-	if ($[46] !== clearSelectionAndInput || $[47] !== effectiveInputValue || $[48] !== effectiveSelectedKey || $[49] !== externalOnSelectionChange || $[50] !== restoreSelectedLabel || $[51] !== setSelectedKey || $[52] !== shouldCommitOnBlur || $[53] !== showSelectionLabel) {
-		t27 = () => {
+	if ($[45] !== clearSelectionAndInput || $[46] !== effectiveInputValue || $[47] !== effectiveSelectedKey || $[48] !== externalOnSelectionChange || $[49] !== restoreSelectedLabel || $[50] !== setSelectedKey || $[51] !== shouldCommitOnBlur || $[52] !== showSelectionLabel) {
+		t26 = () => {
 			const value_0 = effectiveInputValue.trim();
 			if (shouldCommitOnBlur && value_0 && effectiveSelectedKey == null) {
 				externalOnSelectionChange?.(value_0);
@@ -652,20 +653,20 @@ const ComboBox = forwardRef(function ComboBox(props, ref) {
 			} else if (!value_0) clearSelectionAndInput();
 			else restoreSelectedLabel();
 		};
-		$[46] = clearSelectionAndInput;
-		$[47] = effectiveInputValue;
-		$[48] = effectiveSelectedKey;
-		$[49] = externalOnSelectionChange;
-		$[50] = restoreSelectedLabel;
-		$[51] = setSelectedKey;
-		$[52] = shouldCommitOnBlur;
-		$[53] = showSelectionLabel;
-		$[54] = t27;
-	} else t27 = $[54];
-	const settleCustomValueOnBlur = t27;
-	let t28;
-	if ($[55] !== clearOnBlur || $[56] !== clearSelectionAndInput || $[57] !== effectiveInputValue || $[58] !== effectiveSelectedKey || $[59] !== externalOnSelectionChange || $[60] !== filteredOptions || $[61] !== isSameText || $[62] !== localCollectionState.disabledKeys || $[63] !== pickLabel || $[64] !== restoreSelectedLabel || $[65] !== setSelectedKey || $[66] !== showSelectionLabel) {
-		t28 = () => {
+		$[45] = clearSelectionAndInput;
+		$[46] = effectiveInputValue;
+		$[47] = effectiveSelectedKey;
+		$[48] = externalOnSelectionChange;
+		$[49] = restoreSelectedLabel;
+		$[50] = setSelectedKey;
+		$[51] = shouldCommitOnBlur;
+		$[52] = showSelectionLabel;
+		$[53] = t26;
+	} else t26 = $[53];
+	const settleCustomValueOnBlur = t26;
+	let t27;
+	if ($[54] !== clearOnBlur || $[55] !== clearSelectionAndInput || $[56] !== effectiveInputValue || $[57] !== effectiveSelectedKey || $[58] !== externalOnSelectionChange || $[59] !== filteredOptions || $[60] !== isSameText || $[61] !== localCollectionState.disabledKeys || $[62] !== pickLabel || $[63] !== restoreSelectedLabel || $[64] !== setSelectedKey || $[65] !== showSelectionLabel) {
+		t27 = () => {
 			const matchKey = findTypedOption(filteredOptions, effectiveInputValue, effectiveSelectedKey, localCollectionState.disabledKeys, isSameText);
 			if (matchKey != null && matchKey !== effectiveSelectedKey) {
 				setSelectedKey(matchKey);
@@ -674,86 +675,98 @@ const ComboBox = forwardRef(function ComboBox(props, ref) {
 			} else if (matchKey == null && (clearOnBlur || !effectiveInputValue.trim())) clearSelectionAndInput();
 			else restoreSelectedLabel();
 		};
-		$[55] = clearOnBlur;
-		$[56] = clearSelectionAndInput;
-		$[57] = effectiveInputValue;
-		$[58] = effectiveSelectedKey;
-		$[59] = externalOnSelectionChange;
-		$[60] = filteredOptions;
-		$[61] = isSameText;
-		$[62] = localCollectionState.disabledKeys;
-		$[63] = pickLabel;
-		$[64] = restoreSelectedLabel;
-		$[65] = setSelectedKey;
-		$[66] = showSelectionLabel;
-		$[67] = t28;
-	} else t28 = $[67];
-	const settleOptionOnBlur = t28;
-	let t29;
-	if ($[68] !== allowsCustomValue || $[69] !== isReadOnly || $[70] !== onBlur || $[71] !== setIsFilterActive || $[72] !== setIsPopoverOpen || $[73] !== settleCustomValueOnBlur || $[74] !== settleOptionOnBlur) {
-		t29 = () => {
+		$[54] = clearOnBlur;
+		$[55] = clearSelectionAndInput;
+		$[56] = effectiveInputValue;
+		$[57] = effectiveSelectedKey;
+		$[58] = externalOnSelectionChange;
+		$[59] = filteredOptions;
+		$[60] = isSameText;
+		$[61] = localCollectionState.disabledKeys;
+		$[62] = pickLabel;
+		$[63] = restoreSelectedLabel;
+		$[64] = setSelectedKey;
+		$[65] = showSelectionLabel;
+		$[66] = t27;
+	} else t27 = $[66];
+	const settleOptionOnBlur = t27;
+	let t28;
+	if ($[67] !== allowsCustomValue || $[68] !== isReadOnly || $[69] !== onBlur || $[70] !== setIsFilterActive || $[71] !== setIsPopoverOpen || $[72] !== settleCustomValueOnBlur || $[73] !== settleOptionOnBlur) {
+		t28 = () => {
 			setIsPopoverOpen(false);
 			if (isReadOnly) {} else if (allowsCustomValue) settleCustomValueOnBlur();
 			else settleOptionOnBlur();
 			onBlur?.();
 			setIsFilterActive(false);
 		};
-		$[68] = allowsCustomValue;
-		$[69] = isReadOnly;
-		$[70] = onBlur;
-		$[71] = setIsFilterActive;
-		$[72] = setIsPopoverOpen;
-		$[73] = settleCustomValueOnBlur;
-		$[74] = settleOptionOnBlur;
-		$[75] = t29;
-	} else t29 = $[75];
-	const handleCompositeBlur = useEvent(t29);
-	const t30 = wrapperRef;
-	let t31;
-	if ($[76] !== handleCompositeBlur || $[77] !== isDisabled || $[78] !== onFocus || $[79] !== popoverRef || $[80] !== t30) {
-		t31 = {
-			wrapperRef: t30,
+		$[67] = allowsCustomValue;
+		$[68] = isReadOnly;
+		$[69] = onBlur;
+		$[70] = setIsFilterActive;
+		$[71] = setIsPopoverOpen;
+		$[72] = settleCustomValueOnBlur;
+		$[73] = settleOptionOnBlur;
+		$[74] = t28;
+	} else t28 = $[74];
+	const handleCompositeBlur = useEvent(t28);
+	const t29 = wrapperRef;
+	let t30;
+	if ($[75] !== handleCompositeBlur || $[76] !== isDisabled || $[77] !== onFocus || $[78] !== popoverRef || $[79] !== t29) {
+		t30 = {
+			wrapperRef: t29,
 			popoverRef,
 			onFocus,
 			onBlur: handleCompositeBlur,
 			isDisabled
 		};
-		$[76] = handleCompositeBlur;
-		$[77] = isDisabled;
-		$[78] = onFocus;
-		$[79] = popoverRef;
+		$[75] = handleCompositeBlur;
+		$[76] = isDisabled;
+		$[77] = onFocus;
+		$[78] = popoverRef;
+		$[79] = t29;
 		$[80] = t30;
-		$[81] = t31;
-	} else t31 = $[81];
-	const { compositeFocusProps } = useCompositeFocus(t31);
-	let t32;
-	if ($[82] !== isInvalid || $[83] !== isValid) {
-		t32 = getValidationIcon({
+	} else t30 = $[80];
+	const { compositeFocusProps } = useCompositeFocus(t30);
+	let t31;
+	if ($[81] !== isInvalid || $[82] !== isValid) {
+		t31 = getValidationIcon({
 			isInvalid,
 			isValid
 		});
-		$[82] = isInvalid;
-		$[83] = isValid;
-		$[84] = t32;
-	} else t32 = $[84];
-	const validationIcon = t32;
+		$[81] = isInvalid;
+		$[82] = isValid;
+		$[83] = t31;
+	} else t31 = $[83];
+	const validationIcon = t31;
 	const listStateRef = useRef(null);
 	const [activeOptionKey, setActiveOptionKey] = useState(null);
-	const handleSelectionChange = useEvent((selection) => {
-		const key_0 = Array.isArray(selection) ? selection[0] : selection;
-		setSelectedKey(key_0 ?? null);
-		setIsFilterActive(false);
-		showSelectionLabel(key_0 != null ? pickLabel(key_0) : "");
-		externalOnSelectionChange?.(key_0);
-		setIsPopoverOpen(false);
-		setTimeout(() => {
-			inputRef.current?.focus();
-		}, 0);
-	});
+	let t32;
+	if ($[84] !== externalOnSelectionChange || $[85] !== inputRef || $[86] !== pickLabel || $[87] !== setIsFilterActive || $[88] !== setIsPopoverOpen || $[89] !== setSelectedKey || $[90] !== showSelectionLabel) {
+		t32 = (selection) => {
+			const key_0 = Array.isArray(selection) ? selection[0] : selection;
+			setSelectedKey(key_0 ?? null);
+			setIsFilterActive(false);
+			showSelectionLabel(key_0 != null ? pickLabel(key_0) : "");
+			externalOnSelectionChange?.(key_0);
+			setIsPopoverOpen(false);
+			setTimeout(() => {
+				inputRef.current?.focus();
+			}, 0);
+		};
+		$[84] = externalOnSelectionChange;
+		$[85] = inputRef;
+		$[86] = pickLabel;
+		$[87] = setIsFilterActive;
+		$[88] = setIsPopoverOpen;
+		$[89] = setSelectedKey;
+		$[90] = showSelectionLabel;
+		$[91] = t32;
+	} else t32 = $[91];
+	const handleSelectionChange = useEvent(t32);
 	const lastSyncedSelectedKey = useRef(void 0);
 	const selectionClearedByTyping = useRef(false);
 	let t33;
-	if ($[85] !== allowsCustomValue || $[86] !== effectiveSelectedKey || $[87] !== externalOnSelectionChange || $[88] !== isControlledInput || $[89] !== isControlledKey || $[90] !== isPopoverOpen || $[91] !== onInputChange || $[92] !== popoverTrigger || $[93] !== setInternalInputValue || $[94] !== setInternalSelectedKey || $[95] !== setIsFilterActive || $[96] !== setIsPopoverOpen) {
+	if ($[92] !== allowsCustomValue || $[93] !== effectiveSelectedKey || $[94] !== externalOnSelectionChange || $[95] !== isControlledInput || $[96] !== isControlledKey || $[97] !== isPopoverOpen || $[98] !== onInputChange || $[99] !== popoverTrigger || $[100] !== setInternalInputValue || $[101] !== setInternalSelectedKey || $[102] !== setIsFilterActive || $[103] !== setIsPopoverOpen) {
 		t33 = (e) => {
 			const value_1 = e.target.value;
 			if (!isControlledInput) setInternalInputValue(value_1);
@@ -767,23 +780,23 @@ const ComboBox = forwardRef(function ComboBox(props, ref) {
 			}
 			if (popoverTrigger !== "manual" && value_1 && !isPopoverOpen) setIsPopoverOpen(true);
 		};
-		$[85] = allowsCustomValue;
-		$[86] = effectiveSelectedKey;
-		$[87] = externalOnSelectionChange;
-		$[88] = isControlledInput;
-		$[89] = isControlledKey;
-		$[90] = isPopoverOpen;
-		$[91] = onInputChange;
-		$[92] = popoverTrigger;
-		$[93] = setInternalInputValue;
-		$[94] = setInternalSelectedKey;
-		$[95] = setIsFilterActive;
-		$[96] = setIsPopoverOpen;
-		$[97] = t33;
-	} else t33 = $[97];
+		$[92] = allowsCustomValue;
+		$[93] = effectiveSelectedKey;
+		$[94] = externalOnSelectionChange;
+		$[95] = isControlledInput;
+		$[96] = isControlledKey;
+		$[97] = isPopoverOpen;
+		$[98] = onInputChange;
+		$[99] = popoverTrigger;
+		$[100] = setInternalInputValue;
+		$[101] = setInternalSelectedKey;
+		$[102] = setIsFilterActive;
+		$[103] = setIsPopoverOpen;
+		$[104] = t33;
+	} else t33 = $[104];
 	const handleInputChange = useEvent(t33);
 	let t34;
-	if ($[98] !== effectiveSelectedKey || $[99] !== isControlledInput || $[100] !== isControlledKey || $[101] !== setInternalInputValue) {
+	if ($[105] !== effectiveSelectedKey || $[106] !== isControlledInput || $[107] !== isControlledKey || $[108] !== setInternalInputValue) {
 		t34 = () => {
 			const preserveTypedInput = selectionClearedByTyping.current;
 			selectionClearedByTyping.current = false;
@@ -793,14 +806,14 @@ const ComboBox = forwardRef(function ComboBox(props, ref) {
 			if (preserveTypedInput && effectiveSelectedKey == null) return;
 			setInternalInputValue(null);
 		};
-		$[98] = effectiveSelectedKey;
-		$[99] = isControlledInput;
-		$[100] = isControlledKey;
-		$[101] = setInternalInputValue;
-		$[102] = t34;
-	} else t34 = $[102];
+		$[105] = effectiveSelectedKey;
+		$[106] = isControlledInput;
+		$[107] = isControlledKey;
+		$[108] = setInternalInputValue;
+		$[109] = t34;
+	} else t34 = $[109];
 	let t35;
-	if ($[103] !== effectiveInputValue || $[104] !== effectiveSelectedKey || $[105] !== isControlledInput || $[106] !== isControlledKey || $[107] !== setInternalInputValue) {
+	if ($[110] !== effectiveInputValue || $[111] !== effectiveSelectedKey || $[112] !== isControlledInput || $[113] !== isControlledKey || $[114] !== setInternalInputValue) {
 		t35 = [
 			isControlledKey,
 			isControlledInput,
@@ -808,92 +821,115 @@ const ComboBox = forwardRef(function ComboBox(props, ref) {
 			effectiveInputValue,
 			setInternalInputValue
 		];
-		$[103] = effectiveInputValue;
-		$[104] = effectiveSelectedKey;
-		$[105] = isControlledInput;
-		$[106] = isControlledKey;
-		$[107] = setInternalInputValue;
-		$[108] = t35;
-	} else t35 = $[108];
+		$[110] = effectiveInputValue;
+		$[111] = effectiveSelectedKey;
+		$[112] = isControlledInput;
+		$[113] = isControlledKey;
+		$[114] = setInternalInputValue;
+		$[115] = t35;
+	} else t35 = $[115];
 	useEffect(t34, t35);
 	const showClearButton = isClearable && (allowsCustomValue ? effectiveInputValue !== "" : effectiveSelectedKey != null) && !isDisabled && !isReadOnly;
 	let t36;
-	if ($[109] !== hasResults || $[110] !== isDisabled || $[111] !== isReadOnly || $[112] !== setIsFilterActive || $[113] !== setIsPopoverOpen) {
+	if ($[116] !== hasResults || $[117] !== isDisabled || $[118] !== isReadOnly || $[119] !== setIsFilterActive || $[120] !== setIsPopoverOpen) {
 		t36 = () => {
 			if (isReadOnly || isDisabled) return;
 			if (!hasResults) setIsFilterActive(false);
 			setIsPopoverOpen(true);
 		};
-		$[109] = hasResults;
-		$[110] = isDisabled;
-		$[111] = isReadOnly;
-		$[112] = setIsFilterActive;
-		$[113] = setIsPopoverOpen;
-		$[114] = t36;
-	} else t36 = $[114];
+		$[116] = hasResults;
+		$[117] = isDisabled;
+		$[118] = isReadOnly;
+		$[119] = setIsFilterActive;
+		$[120] = setIsPopoverOpen;
+		$[121] = t36;
+	} else t36 = $[121];
 	const openList = t36;
-	const toggleList = () => {
-		if (shouldShowPopover) setIsPopoverOpen(false);
-		else openList();
-		inputRef.current?.focus();
-	};
 	let t37;
-	if ($[115] !== focusProps || $[116] !== isPopoverOpen || $[117] !== openList || $[118] !== popoverTrigger) {
-		t37 = (e_0) => {
+	if ($[122] !== inputRef || $[123] !== openList || $[124] !== setIsPopoverOpen || $[125] !== shouldShowPopover) {
+		t37 = () => {
+			if (shouldShowPopover) setIsPopoverOpen(false);
+			else openList();
+			inputRef.current?.focus();
+		};
+		$[122] = inputRef;
+		$[123] = openList;
+		$[124] = setIsPopoverOpen;
+		$[125] = shouldShowPopover;
+		$[126] = t37;
+	} else t37 = $[126];
+	const toggleList = t37;
+	let t38;
+	if ($[127] !== focusProps || $[128] !== isPopoverOpen || $[129] !== openList || $[130] !== popoverTrigger) {
+		t38 = (e_0) => {
 			focusProps.onFocus?.(e_0);
 			if (popoverTrigger === "focus" && !isPopoverOpen) openList();
 		};
-		$[115] = focusProps;
-		$[116] = isPopoverOpen;
-		$[117] = openList;
-		$[118] = popoverTrigger;
-		$[119] = t37;
-	} else t37 = $[119];
-	const handleInputFocus = useEvent(t37);
+		$[127] = focusProps;
+		$[128] = isPopoverOpen;
+		$[129] = openList;
+		$[130] = popoverTrigger;
+		$[131] = t38;
+	} else t38 = $[131];
+	const handleInputFocus = useEvent(t38);
 	const pressStartedOnInputRef = useRef(false);
-	let t38;
-	if ($[120] !== hasResults || $[121] !== openList || $[122] !== popoverTrigger || $[123] !== shouldShowPopover) {
-		t38 = () => {
+	let t39;
+	if ($[132] !== hasResults || $[133] !== openList || $[134] !== popoverTrigger || $[135] !== shouldShowPopover) {
+		t39 = () => {
 			const isInputPress = pressStartedOnInputRef.current;
 			pressStartedOnInputRef.current = false;
 			if (!isInputPress || popoverTrigger === "manual") return;
 			if (!shouldShowPopover && hasResults) openList();
 		};
-		$[120] = hasResults;
-		$[121] = openList;
-		$[122] = popoverTrigger;
-		$[123] = shouldShowPopover;
-		$[124] = t38;
-	} else t38 = $[124];
-	const handleInputClick = t38;
-	let t39;
-	if ($[125] !== focusProps) {
-		t39 = (e_1) => {
+		$[132] = hasResults;
+		$[133] = openList;
+		$[134] = popoverTrigger;
+		$[135] = shouldShowPopover;
+		$[136] = t39;
+	} else t39 = $[136];
+	const handleInputClick = t39;
+	let t40;
+	if ($[137] !== focusProps) {
+		t40 = (e_1) => {
 			focusProps.onBlur?.(e_1);
 		};
-		$[125] = focusProps;
-		$[126] = t39;
-	} else t39 = $[126];
-	const handleInputBlur = useEvent(t39);
-	const clearValue = useEvent(() => {
-		if (!isControlledInput) setInternalInputValue(null);
-		onInputChange?.("");
-		setSelectedKey(null);
-		externalOnSelectionChange?.(null);
-		if (isPopoverOpen) setIsPopoverOpen(false);
-		inputRef.current?.focus();
-		onClear?.();
-	});
-	let t40;
-	if ($[127] !== setIsPopoverOpen) {
-		t40 = () => setIsPopoverOpen(false);
-		$[127] = setIsPopoverOpen;
-		$[128] = t40;
-	} else t40 = $[128];
-	const t41 = inputRef;
+		$[137] = focusProps;
+		$[138] = t40;
+	} else t40 = $[138];
+	const handleInputBlur = useEvent(t40);
+	let t41;
+	if ($[139] !== externalOnSelectionChange || $[140] !== inputRef || $[141] !== isControlledInput || $[142] !== isPopoverOpen || $[143] !== onClear || $[144] !== onInputChange || $[145] !== setInternalInputValue || $[146] !== setIsPopoverOpen || $[147] !== setSelectedKey) {
+		t41 = () => {
+			if (!isControlledInput) setInternalInputValue(null);
+			onInputChange?.("");
+			setSelectedKey(null);
+			externalOnSelectionChange?.(null);
+			if (isPopoverOpen) setIsPopoverOpen(false);
+			inputRef.current?.focus();
+			onClear?.();
+		};
+		$[139] = externalOnSelectionChange;
+		$[140] = inputRef;
+		$[141] = isControlledInput;
+		$[142] = isPopoverOpen;
+		$[143] = onClear;
+		$[144] = onInputChange;
+		$[145] = setInternalInputValue;
+		$[146] = setIsPopoverOpen;
+		$[147] = setSelectedKey;
+		$[148] = t41;
+	} else t41 = $[148];
+	const clearValue = useEvent(t41);
 	let t42;
-	if ($[129] !== allowsCustomValue || $[130] !== clearValue || $[131] !== effectiveInputValue || $[132] !== effectiveSelectedKey || $[133] !== handleSelectionChange || $[134] !== hasResults || $[135] !== isClearable || $[136] !== isReadOnly || $[137] !== onKeyDown || $[138] !== openList || $[139] !== selectedLabel || $[140] !== setActiveOptionKey || $[141] !== shouldShowPopover || $[142] !== t40 || $[143] !== t41) {
-		t42 = {
+	if ($[149] !== setIsPopoverOpen) {
+		t42 = () => setIsPopoverOpen(false);
+		$[149] = setIsPopoverOpen;
+		$[150] = t42;
+	} else t42 = $[150];
+	const t43 = inputRef;
+	let t44;
+	if ($[151] !== allowsCustomValue || $[152] !== clearValue || $[153] !== effectiveInputValue || $[154] !== effectiveSelectedKey || $[155] !== handleSelectionChange || $[156] !== hasResults || $[157] !== isClearable || $[158] !== isReadOnly || $[159] !== onKeyDown || $[160] !== openList || $[161] !== selectedLabel || $[162] !== shouldShowPopover || $[163] !== t42 || $[164] !== t43) {
+		t44 = {
 			isListShown: shouldShowPopover,
 			isReadOnly,
 			listStateRef,
@@ -906,100 +942,110 @@ const ComboBox = forwardRef(function ComboBox(props, ref) {
 			onSelectionChange: handleSelectionChange,
 			onClearValue: clearValue,
 			onOpenList: openList,
-			onCloseList: t40,
-			inputRef: t41,
+			onCloseList: t42,
+			inputRef: t43,
 			onVirtualFocus: setActiveOptionKey,
 			onKeyDown
 		};
-		$[129] = allowsCustomValue;
-		$[130] = clearValue;
-		$[131] = effectiveInputValue;
-		$[132] = effectiveSelectedKey;
-		$[133] = handleSelectionChange;
-		$[134] = hasResults;
-		$[135] = isClearable;
-		$[136] = isReadOnly;
-		$[137] = onKeyDown;
-		$[138] = openList;
-		$[139] = selectedLabel;
-		$[140] = setActiveOptionKey;
-		$[141] = shouldShowPopover;
-		$[142] = t40;
-		$[143] = t41;
-		$[144] = t42;
-	} else t42 = $[144];
-	const { keyboardProps } = useComboBoxKeyboard(t42);
+		$[151] = allowsCustomValue;
+		$[152] = clearValue;
+		$[153] = effectiveInputValue;
+		$[154] = effectiveSelectedKey;
+		$[155] = handleSelectionChange;
+		$[156] = hasResults;
+		$[157] = isClearable;
+		$[158] = isReadOnly;
+		$[159] = onKeyDown;
+		$[160] = openList;
+		$[161] = selectedLabel;
+		$[162] = shouldShowPopover;
+		$[163] = t42;
+		$[164] = t43;
+		$[165] = t44;
+	} else t44 = $[165];
+	const { keyboardProps } = useComboBoxKeyboard(t44);
 	if (icon) {
-		let t43;
-		if ($[145] !== icon) {
-			t43 = /* @__PURE__ */ jsx("div", {
+		let t45;
+		if ($[166] !== icon) {
+			t45 = /* @__PURE__ */ jsx("div", {
 				"data-element": "InputIcon",
 				children: icon
 			});
-			$[145] = icon;
-			$[146] = t43;
-		} else t43 = $[146];
-		icon = t43;
-		if (prefix) prefix = /* @__PURE__ */ jsxs(Fragment$1, { children: [icon, prefix] });
-		else prefix = icon;
+			$[166] = icon;
+			$[167] = t45;
+		} else t45 = $[167];
+		icon = t45;
+		if (prefix) {
+			let t46;
+			if ($[168] !== icon || $[169] !== prefix) {
+				t46 = /* @__PURE__ */ jsxs(Fragment$1, { children: [icon, prefix] });
+				$[168] = icon;
+				$[169] = prefix;
+				$[170] = t46;
+			} else t46 = $[170];
+			prefix = t46;
+		} else prefix = icon;
 	}
-	let t43;
-	if ($[147] !== isInvalid || $[148] !== isValid) {
-		t43 = getValidationMods({
+	let t45;
+	if ($[171] !== isInvalid || $[172] !== isValid) {
+		t45 = getValidationMods({
 			isInvalid,
 			isValid
 		});
-		$[147] = isInvalid;
-		$[148] = isValid;
-		$[149] = t43;
-	} else t43 = $[149];
-	const t44 = !!prefix;
-	let t45;
-	if ($[150] !== isDisabled || $[151] !== isFocused || $[152] !== isLoading || $[153] !== showClearButton || $[154] !== t43 || $[155] !== t44) {
-		t45 = {
-			...t43,
+		$[171] = isInvalid;
+		$[172] = isValid;
+		$[173] = t45;
+	} else t45 = $[173];
+	const t46 = !!isReadOnly;
+	const t47 = !!prefix;
+	let t48;
+	if ($[174] !== isDisabled || $[175] !== isFocused || $[176] !== isLoading || $[177] !== showClearButton || $[178] !== t45 || $[179] !== t46 || $[180] !== t47) {
+		t48 = {
+			...t45,
 			disabled: isDisabled,
+			readonly: t46,
 			hovered: false,
 			focused: isFocused,
 			loading: isLoading,
-			prefix: t44,
+			prefix: t47,
 			suffix: true,
 			clearable: showClearButton
 		};
-		$[150] = isDisabled;
-		$[151] = isFocused;
-		$[152] = isLoading;
-		$[153] = showClearButton;
-		$[154] = t43;
-		$[155] = t44;
-		$[156] = t45;
-	} else t45 = $[156];
-	const mods = t45;
+		$[174] = isDisabled;
+		$[175] = isFocused;
+		$[176] = isLoading;
+		$[177] = showClearButton;
+		$[178] = t45;
+		$[179] = t46;
+		$[180] = t47;
+		$[181] = t48;
+	} else t48 = $[181];
+	const mods = t48;
 	const [comboBoxWidth, setComboBoxWidth] = useState();
-	let t46;
-	let t47;
-	if ($[157] !== hasResults || $[158] !== isPopoverOpen || $[159] !== setIsPopoverOpen) {
-		t46 = () => {
+	let t49;
+	let t50;
+	if ($[182] !== hasResults || $[183] !== isPopoverOpen || $[184] !== setIsPopoverOpen) {
+		t49 = () => {
 			if (isPopoverOpen && !hasResults) setIsPopoverOpen(false);
 		};
-		t47 = [
+		t50 = [
 			isPopoverOpen,
 			hasResults,
 			setIsPopoverOpen
 		];
-		$[157] = hasResults;
-		$[158] = isPopoverOpen;
-		$[159] = setIsPopoverOpen;
-		$[160] = t46;
-		$[161] = t47;
+		$[182] = hasResults;
+		$[183] = isPopoverOpen;
+		$[184] = setIsPopoverOpen;
+		$[185] = t49;
+		$[186] = t50;
 	} else {
-		t46 = $[160];
-		t47 = $[161];
+		t49 = $[185];
+		t50 = $[186];
 	}
-	useEffect(t46, t47);
-	let t48;
-	if ($[162] !== effectiveSelectedKey || $[163] !== setActiveOptionKey || $[164] !== shouldShowPopover || $[165] !== wrapperRef) {
-		t48 = () => {
+	useEffect(t49, t50);
+	let t51;
+	if ($[187] !== effectiveSelectedKey || $[188] !== shouldShowPopover || $[189] !== wrapperRef) {
+		t51 = () => {
 			if (!shouldShowPopover) return;
 			setComboBoxWidth(wrapperRef.current?.offsetWidth);
 			let attempts = 0;
@@ -1015,84 +1061,84 @@ const ComboBox = forwardRef(function ComboBox(props, ref) {
 			});
 			return () => cancelAnimationFrame(frame);
 		};
-		$[162] = effectiveSelectedKey;
-		$[163] = setActiveOptionKey;
-		$[164] = shouldShowPopover;
-		$[165] = wrapperRef;
-		$[166] = t48;
-	} else t48 = $[166];
-	let t49;
-	if ($[167] !== effectiveInputValue || $[168] !== effectiveSelectedKey || $[169] !== shouldShowPopover || $[170] !== wrapperRef) {
-		t49 = [
+		$[187] = effectiveSelectedKey;
+		$[188] = shouldShowPopover;
+		$[189] = wrapperRef;
+		$[190] = t51;
+	} else t51 = $[190];
+	const t52 = wrapperRef;
+	let t53;
+	if ($[191] !== effectiveInputValue || $[192] !== effectiveSelectedKey || $[193] !== shouldShowPopover || $[194] !== t52) {
+		t53 = [
 			shouldShowPopover,
 			effectiveSelectedKey,
 			effectiveInputValue,
-			wrapperRef
+			t52
 		];
-		$[167] = effectiveInputValue;
-		$[168] = effectiveSelectedKey;
-		$[169] = shouldShowPopover;
-		$[170] = wrapperRef;
-		$[171] = t49;
-	} else t49 = $[171];
-	useLayoutEffect$1(t48, t49);
-	let t50;
-	if ($[172] !== activeOptionKey || $[173] !== comboBoxId || $[174] !== filteredOptions || $[175] !== shouldShowPopover) {
-		t50 = shouldShowPopover && activeOptionKey != null && filteredOptions.some((option) => option.key === activeOptionKey) ? getListBoxOptionId(`ComboBoxListBox-${comboBoxId}`, activeOptionKey) : void 0;
-		$[172] = activeOptionKey;
-		$[173] = comboBoxId;
-		$[174] = filteredOptions;
-		$[175] = shouldShowPopover;
-		$[176] = t50;
-	} else t50 = $[176];
-	const activeDescendant = t50;
-	let t51;
-	if ($[177] !== prefix) {
-		t51 = prefix ? /* @__PURE__ */ jsx("div", {
+		$[191] = effectiveInputValue;
+		$[192] = effectiveSelectedKey;
+		$[193] = shouldShowPopover;
+		$[194] = t52;
+		$[195] = t53;
+	} else t53 = $[195];
+	useLayoutEffect$1(t51, t53);
+	let t54;
+	if ($[196] !== activeOptionKey || $[197] !== filteredOptions || $[198] !== shouldShowPopover) {
+		t54 = shouldShowPopover && activeOptionKey != null && filteredOptions.some((option) => option.key === activeOptionKey) ? getListBoxOptionId(`ComboBoxListBox-${comboBoxId}`, activeOptionKey) : void 0;
+		$[196] = activeOptionKey;
+		$[197] = filteredOptions;
+		$[198] = shouldShowPopover;
+		$[199] = t54;
+	} else t54 = $[199];
+	const activeDescendant = t54;
+	let t55;
+	if ($[200] !== prefix) {
+		t55 = prefix ? /* @__PURE__ */ jsx("div", {
 			"data-element": "Prefix",
 			children: prefix
 		}) : null;
-		$[177] = prefix;
-		$[178] = t51;
-	} else t51 = $[178];
-	const t52 = qa || "ComboBox";
-	let t53;
-	if ($[179] !== focusProps || $[180] !== handleInputBlur) {
-		t53 = {
+		$[200] = prefix;
+		$[201] = t55;
+	} else t55 = $[201];
+	const t56 = qa || "ComboBox";
+	const t57 = inputRef;
+	let t58;
+	if ($[202] !== focusProps || $[203] !== handleInputBlur) {
+		t58 = {
 			...focusProps,
 			onBlur: handleInputBlur
 		};
-		$[179] = focusProps;
-		$[180] = handleInputBlur;
-		$[181] = t53;
-	} else t53 = $[181];
-	let t54;
-	if ($[182] === Symbol.for("react.memo_cache_sentinel")) {
-		t54 = () => {
+		$[202] = focusProps;
+		$[203] = handleInputBlur;
+		$[204] = t58;
+	} else t58 = $[204];
+	let t59;
+	if ($[205] === Symbol.for("react.memo_cache_sentinel")) {
+		t59 = () => {
 			pressStartedOnInputRef.current = true;
 		};
-		$[182] = t54;
-	} else t54 = $[182];
-	const t55 = props["aria-label"];
-	const t56 = props["aria-labelledby"];
-	const t57 = props["aria-describedby"];
-	let t58;
-	if ($[183] !== t55 || $[184] !== t56 || $[185] !== t57) {
-		t58 = {
-			"aria-label": t55,
-			"aria-labelledby": t56,
-			"aria-describedby": t57
+		$[205] = t59;
+	} else t59 = $[205];
+	const t60 = props["aria-label"];
+	const t61 = props["aria-labelledby"];
+	const t62 = props["aria-describedby"];
+	let t63;
+	if ($[206] !== t60 || $[207] !== t61 || $[208] !== t62) {
+		t63 = {
+			"aria-label": t60,
+			"aria-labelledby": t61,
+			"aria-describedby": t62
 		};
-		$[183] = t55;
-		$[184] = t56;
-		$[185] = t57;
-		$[186] = t58;
-	} else t58 = $[186];
-	let t59;
-	if ($[187] !== activeDescendant || $[188] !== autoComplete || $[189] !== autoFocus || $[190] !== comboBoxId || $[191] !== effectiveInputValue || $[192] !== handleInputChange || $[193] !== handleInputClick || $[194] !== handleInputFocus || $[195] !== id || $[196] !== inputRef || $[197] !== inputStyles || $[198] !== isDisabled || $[199] !== isInvalid || $[200] !== isReadOnly || $[201] !== isRequired || $[202] !== keyboardProps || $[203] !== mods || $[204] !== placeholder || $[205] !== shouldShowPopover || $[206] !== size || $[207] !== t52 || $[208] !== t53 || $[209] !== t58) {
-		t59 = /* @__PURE__ */ jsx(ComboBoxInput, {
-			qa: t52,
-			inputRef,
+		$[206] = t60;
+		$[207] = t61;
+		$[208] = t62;
+		$[209] = t63;
+	} else t63 = $[209];
+	let t64;
+	if ($[210] !== activeDescendant || $[211] !== autoComplete || $[212] !== autoFocus || $[213] !== effectiveInputValue || $[214] !== handleInputChange || $[215] !== handleInputClick || $[216] !== handleInputFocus || $[217] !== id || $[218] !== inputStyles || $[219] !== isDisabled || $[220] !== isInvalid || $[221] !== isReadOnly || $[222] !== isRequired || $[223] !== keyboardProps || $[224] !== mods || $[225] !== placeholder || $[226] !== shouldShowPopover || $[227] !== size || $[228] !== t56 || $[229] !== t57 || $[230] !== t58 || $[231] !== t63) {
+		t64 = /* @__PURE__ */ jsx(ComboBoxInput, {
+			qa: t56,
+			inputRef: t57,
 			id,
 			value: effectiveInputValue,
 			placeholder,
@@ -1105,54 +1151,53 @@ const ComboBox = forwardRef(function ComboBox(props, ref) {
 			mods,
 			inputStyles,
 			keyboardProps,
-			focusProps: t53,
+			focusProps: t58,
 			isListShown: shouldShowPopover,
 			comboBoxId,
 			activeDescendant,
 			onChange: handleInputChange,
 			onFocus: handleInputFocus,
-			onPointerDown: t54,
+			onPointerDown: t59,
 			onClick: handleInputClick,
-			ariaProps: t58,
+			ariaProps: t63,
 			isInvalid
 		});
-		$[187] = activeDescendant;
-		$[188] = autoComplete;
-		$[189] = autoFocus;
-		$[190] = comboBoxId;
-		$[191] = effectiveInputValue;
-		$[192] = handleInputChange;
-		$[193] = handleInputClick;
-		$[194] = handleInputFocus;
-		$[195] = id;
-		$[196] = inputRef;
-		$[197] = inputStyles;
-		$[198] = isDisabled;
-		$[199] = isInvalid;
-		$[200] = isReadOnly;
-		$[201] = isRequired;
-		$[202] = keyboardProps;
-		$[203] = mods;
-		$[204] = placeholder;
-		$[205] = shouldShowPopover;
-		$[206] = size;
-		$[207] = t52;
-		$[208] = t53;
-		$[209] = t58;
-		$[210] = t59;
-	} else t59 = $[210];
-	const t60 = suffixPosition === "before" ? suffix : null;
-	let t61;
-	if ($[211] !== isLoading || $[212] !== validationIcon) {
-		t61 = isLoading ? /* @__PURE__ */ jsx(LoadingIcon, { "data-element": "InputIcon" }) : validationIcon;
-		$[211] = isLoading;
-		$[212] = validationIcon;
-		$[213] = t61;
-	} else t61 = $[213];
-	const t62 = suffixPosition === "after" ? suffix : null;
-	let t63;
-	if ($[214] !== clearValue || $[215] !== hideTrigger || $[216] !== showClearButton || $[217] !== size || $[218] !== t) {
-		t63 = showClearButton && /* @__PURE__ */ jsx(_CollectionItem.Action, {
+		$[210] = activeDescendant;
+		$[211] = autoComplete;
+		$[212] = autoFocus;
+		$[213] = effectiveInputValue;
+		$[214] = handleInputChange;
+		$[215] = handleInputClick;
+		$[216] = handleInputFocus;
+		$[217] = id;
+		$[218] = inputStyles;
+		$[219] = isDisabled;
+		$[220] = isInvalid;
+		$[221] = isReadOnly;
+		$[222] = isRequired;
+		$[223] = keyboardProps;
+		$[224] = mods;
+		$[225] = placeholder;
+		$[226] = shouldShowPopover;
+		$[227] = size;
+		$[228] = t56;
+		$[229] = t57;
+		$[230] = t58;
+		$[231] = t63;
+		$[232] = t64;
+	} else t64 = $[232];
+	const t65 = suffixPosition === "before" ? suffix : null;
+	let t66;
+	if ($[233] !== isLoading || $[234] !== validationIcon) {
+		t66 = isLoading ? /* @__PURE__ */ jsx(LoadingIcon, { "data-element": "InputIcon" }) : validationIcon;
+		$[233] = isLoading;
+		$[234] = validationIcon;
+		$[235] = t66;
+	} else t66 = $[235];
+	const t67 = suffixPosition === "after" ? suffix : null;
+	let t68;
+	if ($[236] !== clearValue || $[237] !== hideTrigger || $[238] !== showClearButton || $[239] !== size || $[240] !== t) {
+		t68 = showClearButton && /* @__PURE__ */ jsx(_CollectionItem.Action, {
 			excludeFromTabOrder: true,
 			icon: /* @__PURE__ */ jsx(CloseIcon, {}),
 			size,
@@ -1162,16 +1207,16 @@ const ComboBox = forwardRef(function ComboBox(props, ref) {
 			"aria-label": t("comboBox.clearValue", "Clear value"),
 			onPress: clearValue
 		});
-		$[214] = clearValue;
-		$[215] = hideTrigger;
-		$[216] = showClearButton;
-		$[217] = size;
-		$[218] = t;
-		$[219] = t63;
-	} else t63 = $[219];
-	let t64;
-	if ($[220] !== hideTrigger || $[221] !== isDisabled || $[222] !== isLoading || $[223] !== shouldShowPopover || $[224] !== size || $[225] !== t || $[226] !== toggleList || $[227] !== triggerRef || $[228] !== triggerStyles) {
-		t64 = !hideTrigger ? /* @__PURE__ */ jsx(_CollectionItem.Action, {
+		$[236] = clearValue;
+		$[237] = hideTrigger;
+		$[238] = showClearButton;
+		$[239] = size;
+		$[240] = t;
+		$[241] = t68;
+	} else t68 = $[241];
+	let t69;
+	if ($[242] !== hideTrigger || $[243] !== isDisabled || $[244] !== isLoading || $[245] !== shouldShowPopover || $[246] !== size || $[247] !== t || $[248] !== toggleList || $[249] !== triggerRef || $[250] !== triggerStyles) {
+		t69 = !hideTrigger ? /* @__PURE__ */ jsx(_CollectionItem.Action, {
 			ref: triggerRef,
 			excludeFromTabOrder: true,
 			"data-popover-trigger": true,
@@ -1190,49 +1235,49 @@ const ComboBox = forwardRef(function ComboBox(props, ref) {
 			"aria-label": t("comboBox.showOptions", "Show options"),
 			onPress: toggleList
 		}) : null;
-		$[220] = hideTrigger;
-		$[221] = isDisabled;
-		$[222] = isLoading;
-		$[223] = shouldShowPopover;
-		$[224] = size;
-		$[225] = t;
-		$[226] = toggleList;
-		$[227] = triggerRef;
-		$[228] = triggerStyles;
-		$[229] = t64;
-	} else t64 = $[229];
-	let t65;
-	if ($[230] !== t60 || $[231] !== t61 || $[232] !== t62 || $[233] !== t63 || $[234] !== t64) {
-		t65 = /* @__PURE__ */ jsxs("div", {
+		$[242] = hideTrigger;
+		$[243] = isDisabled;
+		$[244] = isLoading;
+		$[245] = shouldShowPopover;
+		$[246] = size;
+		$[247] = t;
+		$[248] = toggleList;
+		$[249] = triggerRef;
+		$[250] = triggerStyles;
+		$[251] = t69;
+	} else t69 = $[251];
+	let t70;
+	if ($[252] !== t65 || $[253] !== t66 || $[254] !== t67 || $[255] !== t68 || $[256] !== t69) {
+		t70 = /* @__PURE__ */ jsxs("div", {
 			"data-element": "Suffix",
 			children: [
-				t60,
-				t61,
-				t62,
-				t63,
-				t64
+				t65,
+				t66,
+				t67,
+				t68,
+				t69
 			]
 		});
-		$[230] = t60;
-		$[231] = t61;
-		$[232] = t62;
-		$[233] = t63;
-		$[234] = t64;
-		$[235] = t65;
-	} else t65 = $[235];
-	const t66 = wrapperRef;
-	const t67 = props["aria-label"];
-	let t68;
-	if ($[236] !== setIsPopoverOpen) {
-		t68 = () => setIsPopoverOpen(false);
-		$[236] = setIsPopoverOpen;
-		$[237] = t68;
-	} else t68 = $[237];
-	let t69;
-	if ($[238] !== children || $[239] !== comboBoxWidth || $[240] !== compositeFocusProps || $[241] !== containerPadding || $[242] !== direction || $[243] !== effectiveSelectedKey || $[244] !== filterFn || $[245] !== handleSelectionChange || $[246] !== headingStyles || $[247] !== isDisabled || $[248] !== label || $[249] !== listBoxRef || $[250] !== listBoxStyles || $[251] !== listGap || $[252] !== optionStyles || $[253] !== overlayOffset || $[254] !== overlayStyles || $[255] !== popoverRef || $[256] !== props.disabledKeys || $[257] !== sectionStyles || $[258] !== shouldFlip || $[259] !== shouldShowPopover || $[260] !== size || $[261] !== sortedItems || $[262] !== t66 || $[263] !== t67 || $[264] !== t68) {
-		t69 = /* @__PURE__ */ jsx(ListBoxPopover, {
+		$[252] = t65;
+		$[253] = t66;
+		$[254] = t67;
+		$[255] = t68;
+		$[256] = t69;
+		$[257] = t70;
+	} else t70 = $[257];
+	const t71 = wrapperRef;
+	const t72 = props["aria-label"];
+	let t73;
+	if ($[258] !== setIsPopoverOpen) {
+		t73 = () => setIsPopoverOpen(false);
+		$[258] = setIsPopoverOpen;
+		$[259] = t73;
+	} else t73 = $[259];
+	let t74;
+	if ($[260] !== children || $[261] !== comboBoxWidth || $[262] !== compositeFocusProps || $[263] !== containerPadding || $[264] !== direction || $[265] !== effectiveSelectedKey || $[266] !== filterFn || $[267] !== handleSelectionChange || $[268] !== headingStyles || $[269] !== isDisabled || $[270] !== label || $[271] !== listBoxRef || $[272] !== listBoxStyles || $[273] !== listGap || $[274] !== optionStyles || $[275] !== overlayOffset || $[276] !== overlayStyles || $[277] !== popoverRef || $[278] !== props.disabledKeys || $[279] !== sectionStyles || $[280] !== shouldFlip || $[281] !== shouldShowPopover || $[282] !== size || $[283] !== sortedItems || $[284] !== t71 || $[285] !== t72 || $[286] !== t73) {
+		t74 = /* @__PURE__ */ jsx(ListBoxPopover, {
 			isOpen: shouldShowPopover,
-			triggerRef: t66,
+			triggerRef: t71,
 			popoverRef,
 			listBoxRef,
 			direction,
@@ -1254,79 +1299,61 @@ const ComboBox = forwardRef(function ComboBox(props, ref) {
 			items: sortedItems,
 			listStateRef,
 			label,
-			ariaLabel: t67,
+			ariaLabel: t72,
 			compositeFocusProps,
 			filter: filterFn,
 			size,
 			onSelectionChange: handleSelectionChange,
-			onClose: t68,
+			onClose: t73,
 			children
 		});
-		$[238] = children;
-		$[239] = comboBoxWidth;
-		$[240] = compositeFocusProps;
-		$[241] = containerPadding;
-		$[242] = direction;
-		$[243] = effectiveSelectedKey;
-		$[244] = filterFn;
-		$[245] = handleSelectionChange;
-		$[246] = headingStyles;
-		$[247] = isDisabled;
-		$[248] = label;
-		$[249] = listBoxRef;
-		$[250] = listBoxStyles;
-		$[251] = listGap;
-		$[252] = optionStyles;
-		$[253] = overlayOffset;
-		$[254] = overlayStyles;
-		$[255] = popoverRef;
-		$[256] = props.disabledKeys;
-		$[257] = sectionStyles;
-		$[258] = shouldFlip;
-		$[259] = shouldShowPopover;
-		$[260] = size;
-		$[261] = sortedItems;
-		$[262] = t66;
-		$[263] = t67;
-		$[264] = t68;
-		$[265] = t69;
-	} else t69 = $[265];
-	let t70;
-	if ($[266] !== compositeFocusProps || $[267] !== mods || $[268] !== size || $[269] !== styles || $[270] !== t51 || $[271] !== t59 || $[272] !== t65 || $[273] !== t69 || $[274] !== wrapperRef) {
-		t70 = /* @__PURE__ */ jsxs(ComboBoxWrapperElement, {
-			ref: wrapperRef,
-			mods,
-			styles,
-			"data-size": size,
-			...compositeFocusProps,
-			children: [
-				t51,
-				t59,
-				t65,
-				t69
-			]
-		});
-		$[266] = compositeFocusProps;
-		$[267] = mods;
-		$[268] = size;
-		$[269] = styles;
-		$[270] = t51;
-		$[271] = t59;
-		$[272] = t65;
-		$[273] = t69;
-		$[274] = wrapperRef;
-		$[275] = t70;
-	} else t70 = $[275];
-	const comboBoxField = t70;
-	let t71;
-	if ($[276] !== comboBoxField || $[277] !== props) {
-		const { children: _, ...propsWithoutChildren } = props;
-		t71 = wrapWithField(comboBoxField, propsWithoutChildren);
-		$[276] = comboBoxField;
-		$[277] = props;
-		$[278] = t71;
-	} else t71 = $[278];
-	return t71;
+		$[260] = children;
+		$[261] = comboBoxWidth;
+		$[262] = compositeFocusProps;
+		$[263] = containerPadding;
+		$[264] = direction;
+		$[265] = effectiveSelectedKey;
+		$[266] = filterFn;
+		$[267] = handleSelectionChange;
+		$[268] = headingStyles;
+		$[269] = isDisabled;
+		$[270] = label;
+		$[271] = listBoxRef;
+		$[272] = listBoxStyles;
+		$[273] = listGap;
+		$[274] = optionStyles;
+		$[275] = overlayOffset;
+		$[276] = overlayStyles;
+		$[277] = popoverRef;
+		$[278] = props.disabledKeys;
+		$[279] = sectionStyles;
+		$[280] = shouldFlip;
+		$[281] = shouldShowPopover;
+		$[282] = size;
+		$[283] = sortedItems;
+		$[284] = t71;
+		$[285] = t72;
+		$[286] = t73;
+		$[287] = t74;
+	} else t74 = $[287];
+	const comboBoxField = /* @__PURE__ */ jsxs(ComboBoxWrapperElement, {
+		ref: wrapperRef,
+		mods,
+		styles,
+		"data-size": size,
+		...compositeFocusProps,
+		children: [
+			t55,
+			t64,
+			t70,
+			t74
+		]
+	});
+	const { children: _, ...propsWithoutChildren } = props;
+	return wrapWithField(comboBoxField, {
+		...propsWithoutChildren,
+		...fieldLayout.field
+	});
 });
 ComboBox.Item = _CollectionItem;
 ComboBox.Section = Section;