@cube-dev/ui-kit 0.202.0 → 0.204.0

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.204.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";
@@ -136,7 +136,7 @@ function useSelectedLabel(collection, selectedKey) {
 	return t1;
 }
 function useComboBoxFiltering(t0) {
-	const $ = c(15);
+	const $ = c(18);
 	const { effectiveInputValue, filter } = t0;
 	const [isFilterActive, setIsFilterActive] = useState(false);
 	let t1;
@@ -170,32 +170,37 @@ function useComboBoxFiltering(t0) {
 	} else t4 = $[6];
 	const textFilterFn = t4;
 	let t5;
-	if ($[7] !== effectiveInputValue || $[8] !== isFilterActive || $[9] !== textFilterFn) {
-		t5 = (nodes) => {
-			const term = effectiveInputValue.trim();
-			if (!isFilterActive || !term) return nodes;
-			return filterCollectionNodes(nodes, term, textFilterFn);
-		};
+	if ($[7] !== effectiveInputValue || $[8] !== textFilterFn) {
+		t5 = (nodes) => filterCollectionNodes(nodes, effectiveInputValue.trim(), textFilterFn);
 		$[7] = effectiveInputValue;
-		$[8] = isFilterActive;
-		$[9] = textFilterFn;
-		$[10] = t5;
-	} else t5 = $[10];
-	const filterFn = t5;
+		$[8] = textFilterFn;
+		$[9] = t5;
+	} else t5 = $[9];
+	const matchTypedText = t5;
 	let t6;
-	if ($[11] !== filterFn || $[12] !== isFilterActive || $[13] !== isSameText) {
-		t6 = {
+	if ($[10] !== isFilterActive || $[11] !== matchTypedText) {
+		t6 = (nodes_0) => isFilterActive ? matchTypedText(nodes_0) : nodes_0;
+		$[10] = isFilterActive;
+		$[11] = matchTypedText;
+		$[12] = t6;
+	} else t6 = $[12];
+	const filterFn = t6;
+	let t7;
+	if ($[13] !== filterFn || $[14] !== isFilterActive || $[15] !== isSameText || $[16] !== matchTypedText) {
+		t7 = {
 			filterFn,
+			matchTypedText,
 			isSameText,
 			isFilterActive,
 			setIsFilterActive
 		};
-		$[11] = filterFn;
-		$[12] = isFilterActive;
-		$[13] = isSameText;
-		$[14] = t6;
-	} else t6 = $[14];
-	return t6;
+		$[13] = filterFn;
+		$[14] = isFilterActive;
+		$[15] = isSameText;
+		$[16] = matchTypedText;
+		$[17] = t7;
+	} else t7 = $[17];
+	return t7;
 }
 function _temp() {
 	return true;
@@ -204,8 +209,8 @@ function isComposing(e) {
 	return e.nativeEvent?.isComposing || e.keyCode === 229;
 }
 function useComboBoxKeyboard(t0) {
-	const $ = c(48);
-	const { isListShown, isReadOnly, listStateRef, hasResults, allowsCustomValue, effectiveInputValue, selectedKey, selectedLabel, isClearable, onSelectionChange, onClearValue, onOpenList, onCloseList, inputRef, onVirtualFocus, onKeyDown } = t0;
+	const $ = c(49);
+	const { isListShown, isReadOnly, listStateRef, hasTypedMatch, allowsCustomValue, effectiveInputValue, selectedKey, selectedLabel, isClearable, onSelectionChange, onSettleTypedText, onClearValue, onOpenList, onCloseList, inputRef, onVirtualFocus, onKeyDown } = t0;
 	let t1;
 	if ($[0] !== onVirtualFocus) {
 		t1 = (listState, key) => {
@@ -253,7 +258,7 @@ function useComboBoxKeyboard(t0) {
 	} else t3 = $[12];
 	const commitTypedText = t3;
 	let t4;
-	if ($[13] !== allowsCustomValue || $[14] !== commitTypedText || $[15] !== effectiveInputValue || $[16] !== hasResults || $[17] !== inputRef || $[18] !== isListShown || $[19] !== listStateRef || $[20] !== onCloseList || $[21] !== onSelectionChange || $[22] !== selectedKey) {
+	if ($[13] !== allowsCustomValue || $[14] !== commitTypedText || $[15] !== effectiveInputValue || $[16] !== hasTypedMatch || $[17] !== inputRef || $[18] !== isListShown || $[19] !== listStateRef || $[20] !== onCloseList || $[21] !== onSelectionChange || $[22] !== onSettleTypedText || $[23] !== selectedKey) {
 		t4 = (e_1) => {
 			const listState_1 = isListShown ? listStateRef.current : null;
 			const key_0 = listState_1 ? resolveHighlightedKey(listState_1, selectedKey) : null;
@@ -263,26 +268,30 @@ function useComboBoxKeyboard(t0) {
 				onCloseList();
 				inputRef.current?.focus();
 			} else if (allowsCustomValue) commitTypedText(e_1);
-			else if (!hasResults || !effectiveInputValue.trim()) {
+			else if (!effectiveInputValue.trim() || !hasTypedMatch()) {
 				e_1.preventDefault();
 				onSelectionChange(null);
+			} else {
+				onCloseList();
+				onSettleTypedText();
 			}
 		};
 		$[13] = allowsCustomValue;
 		$[14] = commitTypedText;
 		$[15] = effectiveInputValue;
-		$[16] = hasResults;
+		$[16] = hasTypedMatch;
 		$[17] = inputRef;
 		$[18] = isListShown;
 		$[19] = listStateRef;
 		$[20] = onCloseList;
 		$[21] = onSelectionChange;
-		$[22] = selectedKey;
-		$[23] = t4;
-	} else t4 = $[23];
+		$[22] = onSettleTypedText;
+		$[23] = selectedKey;
+		$[24] = t4;
+	} else t4 = $[24];
 	const handleEnterKey = t4;
 	let t5;
-	if ($[24] !== effectiveInputValue || $[25] !== inputRef || $[26] !== isClearable || $[27] !== isListShown || $[28] !== onClearValue || $[29] !== onCloseList) {
+	if ($[25] !== effectiveInputValue || $[26] !== inputRef || $[27] !== isClearable || $[28] !== isListShown || $[29] !== onClearValue || $[30] !== onCloseList) {
 		t5 = (e_2) => {
 			if (isListShown) {
 				e_2.preventDefault();
@@ -297,31 +306,31 @@ function useComboBoxKeyboard(t0) {
 			}
 			return false;
 		};
-		$[24] = effectiveInputValue;
-		$[25] = inputRef;
-		$[26] = isClearable;
-		$[27] = isListShown;
-		$[28] = onClearValue;
-		$[29] = onCloseList;
-		$[30] = t5;
-	} else t5 = $[30];
+		$[25] = effectiveInputValue;
+		$[26] = inputRef;
+		$[27] = isClearable;
+		$[28] = isListShown;
+		$[29] = onClearValue;
+		$[30] = onCloseList;
+		$[31] = t5;
+	} else t5 = $[31];
 	const handleEscapeKey = t5;
 	let t6;
-	if ($[31] !== focusOption || $[32] !== isListShown || $[33] !== listStateRef) {
+	if ($[32] !== focusOption || $[33] !== isListShown || $[34] !== listStateRef) {
 		t6 = (e_3) => {
 			if (!isListShown) return;
 			e_3.preventDefault();
 			const listState_2 = listStateRef.current;
 			if (listState_2) focusOption(listState_2, getEdgeVisibleKey(listState_2, e_3.key === "Home" ? "first" : "last"));
 		};
-		$[31] = focusOption;
-		$[32] = isListShown;
-		$[33] = listStateRef;
-		$[34] = t6;
-	} else t6 = $[34];
+		$[32] = focusOption;
+		$[33] = isListShown;
+		$[34] = listStateRef;
+		$[35] = t6;
+	} else t6 = $[35];
 	const handleEdgeKey = t6;
 	let t7;
-	if ($[35] !== handleArrowKey || $[36] !== handleEdgeKey || $[37] !== handleEnterKey || $[38] !== handleEscapeKey || $[39] !== isListShown || $[40] !== onCloseList) {
+	if ($[36] !== handleArrowKey || $[37] !== handleEdgeKey || $[38] !== handleEnterKey || $[39] !== handleEscapeKey || $[40] !== isListShown || $[41] !== onCloseList) {
 		t7 = (e_4) => {
 			switch (e_4.key) {
 				case "ArrowDown":
@@ -342,17 +351,17 @@ function useComboBoxKeyboard(t0) {
 				default: return true;
 			}
 		};
-		$[35] = handleArrowKey;
-		$[36] = handleEdgeKey;
-		$[37] = handleEnterKey;
-		$[38] = handleEscapeKey;
-		$[39] = isListShown;
-		$[40] = onCloseList;
-		$[41] = t7;
-	} else t7 = $[41];
+		$[36] = handleArrowKey;
+		$[37] = handleEdgeKey;
+		$[38] = handleEnterKey;
+		$[39] = handleEscapeKey;
+		$[40] = isListShown;
+		$[41] = onCloseList;
+		$[42] = t7;
+	} else t7 = $[42];
 	const handleKey = t7;
 	let t8;
-	if ($[42] !== handleKey || $[43] !== isReadOnly || $[44] !== onKeyDown) {
+	if ($[43] !== handleKey || $[44] !== isReadOnly || $[45] !== onKeyDown) {
 		t8 = { onKeyDown: (e_5) => {
 			onKeyDown?.(e_5);
 			if (e_5.isDefaultPrevented()) {
@@ -365,18 +374,18 @@ function useComboBoxKeyboard(t0) {
 			}
 			if ((isReadOnly || !handleKey(e_5)) && OVERLAY_KEYS.has(e_5.key)) e_5.continuePropagation();
 		} };
-		$[42] = handleKey;
-		$[43] = isReadOnly;
-		$[44] = onKeyDown;
-		$[45] = t8;
-	} else t8 = $[45];
+		$[43] = handleKey;
+		$[44] = isReadOnly;
+		$[45] = onKeyDown;
+		$[46] = t8;
+	} else t8 = $[46];
 	const { keyboardProps } = useKeyboard(t8);
 	let t9;
-	if ($[46] !== keyboardProps) {
+	if ($[47] !== keyboardProps) {
 		t9 = { keyboardProps };
-		$[46] = keyboardProps;
-		$[47] = t9;
-	} else t9 = $[47];
+		$[47] = keyboardProps;
+		$[48] = t9;
+	} else t9 = $[48];
 	return t9;
 }
 const ComboBoxInput = forwardRef(function ComboBoxInput(t0, ref) {
@@ -456,7 +465,7 @@ const ComboBoxInput = forwardRef(function ComboBoxInput(t0, ref) {
 	return t5;
 });
 const ComboBox = forwardRef(function ComboBox(props, ref) {
-	const $ = c(288);
+	const $ = c(298);
 	let t0;
 	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
 		t0 = { valuePropsMapper: _temp2 };
@@ -564,15 +573,16 @@ const ComboBox = forwardRef(function ComboBox(props, ref) {
 		$[20] = filter;
 		$[21] = t18;
 	} else t18 = $[21];
-	const { filterFn, isSameText, setIsFilterActive } = useComboBoxFiltering(t18);
+	const { filterFn, matchTypedText, isSameText, setIsFilterActive } = useComboBoxFiltering(t18);
+	const filteredOptions = collectOptions(filterFn(localCollectionState.collection));
 	let t19;
-	if ($[22] !== filterFn || $[23] !== localCollectionState.collection) {
-		t19 = collectOptions(filterFn(localCollectionState.collection));
-		$[22] = filterFn;
-		$[23] = localCollectionState.collection;
+	if ($[22] !== localCollectionState.collection || $[23] !== matchTypedText) {
+		t19 = () => collectOptions(matchTypedText(localCollectionState.collection));
+		$[22] = localCollectionState.collection;
+		$[23] = matchTypedText;
 		$[24] = t19;
 	} else t19 = $[24];
-	const filteredOptions = t19;
+	const getTypedOptions = t19;
 	const hasResults = filteredOptions.length > 0;
 	const shouldShowPopover = isPopoverOpen && hasResults;
 	const reportedOpenRef = useRef(shouldShowPopover);
@@ -665,9 +675,9 @@ const ComboBox = forwardRef(function ComboBox(props, ref) {
 	} 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) {
+	if ($[54] !== clearOnBlur || $[55] !== clearSelectionAndInput || $[56] !== effectiveInputValue || $[57] !== effectiveSelectedKey || $[58] !== externalOnSelectionChange || $[59] !== getTypedOptions || $[60] !== isSameText || $[61] !== localCollectionState.disabledKeys || $[62] !== pickLabel || $[63] !== restoreSelectedLabel || $[64] !== setSelectedKey || $[65] !== showSelectionLabel) {
 		t27 = () => {
-			const matchKey = findTypedOption(filteredOptions, effectiveInputValue, effectiveSelectedKey, localCollectionState.disabledKeys, isSameText);
+			const matchKey = findTypedOption(getTypedOptions(), effectiveInputValue, effectiveSelectedKey, localCollectionState.disabledKeys, isSameText);
 			if (matchKey != null && matchKey !== effectiveSelectedKey) {
 				setSelectedKey(matchKey);
 				showSelectionLabel(pickLabel(matchKey));
@@ -680,7 +690,7 @@ const ComboBox = forwardRef(function ComboBox(props, ref) {
 		$[56] = effectiveInputValue;
 		$[57] = effectiveSelectedKey;
 		$[58] = externalOnSelectionChange;
-		$[59] = filteredOptions;
+		$[59] = getTypedOptions;
 		$[60] = isSameText;
 		$[61] = localCollectionState.disabledKeys;
 		$[62] = pickLabel;
@@ -689,13 +699,13 @@ const ComboBox = forwardRef(function ComboBox(props, ref) {
 		$[65] = showSelectionLabel;
 		$[66] = t27;
 	} else t27 = $[66];
-	const settleOptionOnBlur = t27;
+	const settleTypedOption = t27;
 	let t28;
-	if ($[67] !== allowsCustomValue || $[68] !== isReadOnly || $[69] !== onBlur || $[70] !== setIsFilterActive || $[71] !== setIsPopoverOpen || $[72] !== settleCustomValueOnBlur || $[73] !== settleOptionOnBlur) {
+	if ($[67] !== allowsCustomValue || $[68] !== isReadOnly || $[69] !== onBlur || $[70] !== setIsFilterActive || $[71] !== setIsPopoverOpen || $[72] !== settleCustomValueOnBlur || $[73] !== settleTypedOption) {
 		t28 = () => {
 			setIsPopoverOpen(false);
 			if (isReadOnly) {} else if (allowsCustomValue) settleCustomValueOnBlur();
-			else settleOptionOnBlur();
+			else settleTypedOption();
 			onBlur?.();
 			setIsFilterActive(false);
 		};
@@ -705,7 +715,7 @@ const ComboBox = forwardRef(function ComboBox(props, ref) {
 		$[70] = setIsFilterActive;
 		$[71] = setIsPopoverOpen;
 		$[72] = settleCustomValueOnBlur;
-		$[73] = settleOptionOnBlur;
+		$[73] = settleTypedOption;
 		$[74] = t28;
 	} else t28 = $[74];
 	const handleCompositeBlur = useEvent(t28);
@@ -921,131 +931,153 @@ const ComboBox = forwardRef(function ComboBox(props, ref) {
 	} else t41 = $[148];
 	const clearValue = useEvent(t41);
 	let t42;
-	if ($[149] !== setIsPopoverOpen) {
-		t42 = () => setIsPopoverOpen(false);
-		$[149] = setIsPopoverOpen;
-		$[150] = t42;
-	} else t42 = $[150];
-	const t43 = inputRef;
+	if ($[149] !== effectiveInputValue || $[150] !== effectiveSelectedKey || $[151] !== getTypedOptions || $[152] !== isSameText || $[153] !== selectedLabel) {
+		t42 = () => effectiveSelectedKey != null && isSameText(selectedLabel, effectiveInputValue.trim()) || getTypedOptions().length > 0;
+		$[149] = effectiveInputValue;
+		$[150] = effectiveSelectedKey;
+		$[151] = getTypedOptions;
+		$[152] = isSameText;
+		$[153] = selectedLabel;
+		$[154] = t42;
+	} else t42 = $[154];
+	let t43;
+	if ($[155] !== setIsFilterActive || $[156] !== settleTypedOption) {
+		t43 = () => {
+			settleTypedOption();
+			setIsFilterActive(false);
+		};
+		$[155] = setIsFilterActive;
+		$[156] = settleTypedOption;
+		$[157] = t43;
+	} else t43 = $[157];
 	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 = {
+	if ($[158] !== setIsPopoverOpen) {
+		t44 = () => setIsPopoverOpen(false);
+		$[158] = setIsPopoverOpen;
+		$[159] = t44;
+	} else t44 = $[159];
+	const t45 = inputRef;
+	let t46;
+	if ($[160] !== allowsCustomValue || $[161] !== clearValue || $[162] !== effectiveInputValue || $[163] !== effectiveSelectedKey || $[164] !== handleSelectionChange || $[165] !== isClearable || $[166] !== isReadOnly || $[167] !== onKeyDown || $[168] !== openList || $[169] !== selectedLabel || $[170] !== shouldShowPopover || $[171] !== t42 || $[172] !== t43 || $[173] !== t44 || $[174] !== t45) {
+		t46 = {
 			isListShown: shouldShowPopover,
 			isReadOnly,
 			listStateRef,
-			hasResults,
+			hasTypedMatch: t42,
 			allowsCustomValue,
 			effectiveInputValue,
 			selectedKey: effectiveSelectedKey,
 			selectedLabel,
 			isClearable,
 			onSelectionChange: handleSelectionChange,
+			onSettleTypedText: t43,
 			onClearValue: clearValue,
 			onOpenList: openList,
-			onCloseList: t42,
-			inputRef: t43,
+			onCloseList: t44,
+			inputRef: t45,
 			onVirtualFocus: setActiveOptionKey,
 			onKeyDown
 		};
-		$[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);
+		$[160] = allowsCustomValue;
+		$[161] = clearValue;
+		$[162] = effectiveInputValue;
+		$[163] = effectiveSelectedKey;
+		$[164] = handleSelectionChange;
+		$[165] = isClearable;
+		$[166] = isReadOnly;
+		$[167] = onKeyDown;
+		$[168] = openList;
+		$[169] = selectedLabel;
+		$[170] = shouldShowPopover;
+		$[171] = t42;
+		$[172] = t43;
+		$[173] = t44;
+		$[174] = t45;
+		$[175] = t46;
+	} else t46 = $[175];
+	const { keyboardProps } = useComboBoxKeyboard(t46);
 	if (icon) {
-		let t45;
-		if ($[166] !== icon) {
-			t45 = /* @__PURE__ */ jsx("div", {
+		let t47;
+		if ($[176] !== icon) {
+			t47 = /* @__PURE__ */ jsx("div", {
 				"data-element": "InputIcon",
 				children: icon
 			});
-			$[166] = icon;
-			$[167] = t45;
-		} else t45 = $[167];
-		icon = t45;
+			$[176] = icon;
+			$[177] = t47;
+		} else t47 = $[177];
+		icon = t47;
 		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;
+			let t48;
+			if ($[178] !== icon || $[179] !== prefix) {
+				t48 = /* @__PURE__ */ jsxs(Fragment$1, { children: [icon, prefix] });
+				$[178] = icon;
+				$[179] = prefix;
+				$[180] = t48;
+			} else t48 = $[180];
+			prefix = t48;
 		} else prefix = icon;
 	}
-	let t45;
-	if ($[171] !== isInvalid || $[172] !== isValid) {
-		t45 = getValidationMods({
+	let t47;
+	if ($[181] !== isInvalid || $[182] !== isValid) {
+		t47 = getValidationMods({
 			isInvalid,
 			isValid
 		});
-		$[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,
+		$[181] = isInvalid;
+		$[182] = isValid;
+		$[183] = t47;
+	} else t47 = $[183];
+	const t48 = !!isReadOnly;
+	const t49 = !!prefix;
+	let t50;
+	if ($[184] !== isDisabled || $[185] !== isFocused || $[186] !== isLoading || $[187] !== showClearButton || $[188] !== t47 || $[189] !== t48 || $[190] !== t49) {
+		t50 = {
+			...t47,
 			disabled: isDisabled,
-			readonly: t46,
+			readonly: t48,
 			hovered: false,
 			focused: isFocused,
 			loading: isLoading,
-			prefix: t47,
+			prefix: t49,
 			suffix: true,
 			clearable: showClearButton
 		};
-		$[174] = isDisabled;
-		$[175] = isFocused;
-		$[176] = isLoading;
-		$[177] = showClearButton;
-		$[178] = t45;
-		$[179] = t46;
-		$[180] = t47;
-		$[181] = t48;
-	} else t48 = $[181];
-	const mods = t48;
+		$[184] = isDisabled;
+		$[185] = isFocused;
+		$[186] = isLoading;
+		$[187] = showClearButton;
+		$[188] = t47;
+		$[189] = t48;
+		$[190] = t49;
+		$[191] = t50;
+	} else t50 = $[191];
+	const mods = t50;
 	const [comboBoxWidth, setComboBoxWidth] = useState();
-	let t49;
-	let t50;
-	if ($[182] !== hasResults || $[183] !== isPopoverOpen || $[184] !== setIsPopoverOpen) {
-		t49 = () => {
+	let t51;
+	let t52;
+	if ($[192] !== hasResults || $[193] !== isPopoverOpen || $[194] !== setIsPopoverOpen) {
+		t51 = () => {
 			if (isPopoverOpen && !hasResults) setIsPopoverOpen(false);
 		};
-		t50 = [
+		t52 = [
 			isPopoverOpen,
 			hasResults,
 			setIsPopoverOpen
 		];
-		$[182] = hasResults;
-		$[183] = isPopoverOpen;
-		$[184] = setIsPopoverOpen;
-		$[185] = t49;
-		$[186] = t50;
+		$[192] = hasResults;
+		$[193] = isPopoverOpen;
+		$[194] = setIsPopoverOpen;
+		$[195] = t51;
+		$[196] = t52;
 	} else {
-		t49 = $[185];
-		t50 = $[186];
+		t51 = $[195];
+		t52 = $[196];
 	}
-	useEffect(t49, t50);
-	let t51;
-	if ($[187] !== effectiveSelectedKey || $[188] !== shouldShowPopover || $[189] !== wrapperRef) {
-		t51 = () => {
+	useEffect(t51, t52);
+	let t53;
+	if ($[197] !== effectiveSelectedKey || $[198] !== shouldShowPopover || $[199] !== wrapperRef) {
+		t53 = () => {
 			if (!shouldShowPopover) return;
 			setComboBoxWidth(wrapperRef.current?.offsetWidth);
 			let attempts = 0;
@@ -1061,84 +1093,76 @@ const ComboBox = forwardRef(function ComboBox(props, ref) {
 			});
 			return () => cancelAnimationFrame(frame);
 		};
-		$[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 = [
+		$[197] = effectiveSelectedKey;
+		$[198] = shouldShowPopover;
+		$[199] = wrapperRef;
+		$[200] = t53;
+	} else t53 = $[200];
+	const t54 = wrapperRef;
+	let t55;
+	if ($[201] !== effectiveInputValue || $[202] !== effectiveSelectedKey || $[203] !== shouldShowPopover || $[204] !== t54) {
+		t55 = [
 			shouldShowPopover,
 			effectiveSelectedKey,
 			effectiveInputValue,
-			t52
+			t54
 		];
-		$[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", {
+		$[201] = effectiveInputValue;
+		$[202] = effectiveSelectedKey;
+		$[203] = shouldShowPopover;
+		$[204] = t54;
+		$[205] = t55;
+	} else t55 = $[205];
+	useLayoutEffect$1(t53, t55);
+	const activeDescendant = shouldShowPopover && activeOptionKey != null && filteredOptions.some((option) => option.key === activeOptionKey) ? getListBoxOptionId(`ComboBoxListBox-${comboBoxId}`, activeOptionKey) : void 0;
+	let t56;
+	if ($[206] !== prefix) {
+		t56 = prefix ? /* @__PURE__ */ jsx("div", {
 			"data-element": "Prefix",
 			children: prefix
 		}) : null;
-		$[200] = prefix;
-		$[201] = t55;
-	} else t55 = $[201];
-	const t56 = qa || "ComboBox";
-	const t57 = inputRef;
-	let t58;
-	if ($[202] !== focusProps || $[203] !== handleInputBlur) {
-		t58 = {
+		$[206] = prefix;
+		$[207] = t56;
+	} else t56 = $[207];
+	const t57 = qa || "ComboBox";
+	const t58 = inputRef;
+	let t59;
+	if ($[208] !== focusProps || $[209] !== handleInputBlur) {
+		t59 = {
 			...focusProps,
 			onBlur: handleInputBlur
 		};
-		$[202] = focusProps;
-		$[203] = handleInputBlur;
-		$[204] = t58;
-	} else t58 = $[204];
-	let t59;
-	if ($[205] === Symbol.for("react.memo_cache_sentinel")) {
-		t59 = () => {
+		$[208] = focusProps;
+		$[209] = handleInputBlur;
+		$[210] = t59;
+	} else t59 = $[210];
+	let t60;
+	if ($[211] === Symbol.for("react.memo_cache_sentinel")) {
+		t60 = () => {
 			pressStartedOnInputRef.current = true;
 		};
-		$[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
-		};
-		$[206] = t60;
-		$[207] = t61;
-		$[208] = t62;
-		$[209] = t63;
-	} else t63 = $[209];
+		$[211] = t60;
+	} else t60 = $[211];
+	const t61 = props["aria-label"];
+	const t62 = props["aria-labelledby"];
+	const t63 = props["aria-describedby"];
 	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,
+	if ($[212] !== t61 || $[213] !== t62 || $[214] !== t63) {
+		t64 = {
+			"aria-label": t61,
+			"aria-labelledby": t62,
+			"aria-describedby": t63
+		};
+		$[212] = t61;
+		$[213] = t62;
+		$[214] = t63;
+		$[215] = t64;
+	} else t64 = $[215];
+	let t65;
+	if ($[216] !== activeDescendant || $[217] !== autoComplete || $[218] !== autoFocus || $[219] !== effectiveInputValue || $[220] !== handleInputChange || $[221] !== handleInputClick || $[222] !== handleInputFocus || $[223] !== id || $[224] !== inputStyles || $[225] !== isDisabled || $[226] !== isInvalid || $[227] !== isReadOnly || $[228] !== isRequired || $[229] !== keyboardProps || $[230] !== mods || $[231] !== placeholder || $[232] !== shouldShowPopover || $[233] !== size || $[234] !== t57 || $[235] !== t58 || $[236] !== t59 || $[237] !== t64) {
+		t65 = /* @__PURE__ */ jsx(ComboBoxInput, {
+			qa: t57,
+			inputRef: t58,
 			id,
 			value: effectiveInputValue,
 			placeholder,
@@ -1151,53 +1175,66 @@ const ComboBox = forwardRef(function ComboBox(props, ref) {
 			mods,
 			inputStyles,
 			keyboardProps,
-			focusProps: t58,
+			focusProps: t59,
 			isListShown: shouldShowPopover,
 			comboBoxId,
 			activeDescendant,
 			onChange: handleInputChange,
 			onFocus: handleInputFocus,
-			onPointerDown: t59,
+			onPointerDown: t60,
 			onClick: handleInputClick,
-			ariaProps: t63,
+			ariaProps: t64,
 			isInvalid
 		});
-		$[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;
+		$[216] = activeDescendant;
+		$[217] = autoComplete;
+		$[218] = autoFocus;
+		$[219] = effectiveInputValue;
+		$[220] = handleInputChange;
+		$[221] = handleInputClick;
+		$[222] = handleInputFocus;
+		$[223] = id;
+		$[224] = inputStyles;
+		$[225] = isDisabled;
+		$[226] = isInvalid;
+		$[227] = isReadOnly;
+		$[228] = isRequired;
+		$[229] = keyboardProps;
+		$[230] = mods;
+		$[231] = placeholder;
+		$[232] = shouldShowPopover;
+		$[233] = size;
+		$[234] = t57;
+		$[235] = t58;
+		$[236] = t59;
+		$[237] = t64;
+		$[238] = t65;
+	} else t65 = $[238];
 	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;
+	if ($[239] !== effectiveSelectedKey || $[240] !== isDisabled || $[241] !== props.name) {
+		t66 = props.name ? /* @__PURE__ */ jsx("input", {
+			type: "hidden",
+			name: props.name,
+			value: effectiveSelectedKey ?? "",
+			disabled: isDisabled
+		}) : null;
+		$[239] = effectiveSelectedKey;
+		$[240] = isDisabled;
+		$[241] = props.name;
+		$[242] = t66;
+	} else t66 = $[242];
+	const t67 = suffixPosition === "before" ? suffix : null;
 	let t68;
-	if ($[236] !== clearValue || $[237] !== hideTrigger || $[238] !== showClearButton || $[239] !== size || $[240] !== t) {
-		t68 = showClearButton && /* @__PURE__ */ jsx(_CollectionItem.Action, {
+	if ($[243] !== isLoading || $[244] !== validationIcon) {
+		t68 = isLoading ? /* @__PURE__ */ jsx(LoadingIcon, { "data-element": "InputIcon" }) : validationIcon;
+		$[243] = isLoading;
+		$[244] = validationIcon;
+		$[245] = t68;
+	} else t68 = $[245];
+	const t69 = suffixPosition === "after" ? suffix : null;
+	let t70;
+	if ($[246] !== clearValue || $[247] !== hideTrigger || $[248] !== showClearButton || $[249] !== size || $[250] !== t) {
+		t70 = showClearButton && /* @__PURE__ */ jsx(_CollectionItem.Action, {
 			excludeFromTabOrder: true,
 			icon: /* @__PURE__ */ jsx(CloseIcon, {}),
 			size,
@@ -1207,16 +1244,16 @@ const ComboBox = forwardRef(function ComboBox(props, ref) {
 			"aria-label": t("comboBox.clearValue", "Clear value"),
 			onPress: clearValue
 		});
-		$[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, {
+		$[246] = clearValue;
+		$[247] = hideTrigger;
+		$[248] = showClearButton;
+		$[249] = size;
+		$[250] = t;
+		$[251] = t70;
+	} else t70 = $[251];
+	let t71;
+	if ($[252] !== hideTrigger || $[253] !== isDisabled || $[254] !== isLoading || $[255] !== shouldShowPopover || $[256] !== size || $[257] !== t || $[258] !== toggleList || $[259] !== triggerRef || $[260] !== triggerStyles) {
+		t71 = !hideTrigger ? /* @__PURE__ */ jsx(_CollectionItem.Action, {
 			ref: triggerRef,
 			excludeFromTabOrder: true,
 			"data-popover-trigger": true,
@@ -1235,49 +1272,49 @@ const ComboBox = forwardRef(function ComboBox(props, ref) {
 			"aria-label": t("comboBox.showOptions", "Show options"),
 			onPress: toggleList
 		}) : null;
-		$[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", {
+		$[252] = hideTrigger;
+		$[253] = isDisabled;
+		$[254] = isLoading;
+		$[255] = shouldShowPopover;
+		$[256] = size;
+		$[257] = t;
+		$[258] = toggleList;
+		$[259] = triggerRef;
+		$[260] = triggerStyles;
+		$[261] = t71;
+	} else t71 = $[261];
+	let t72;
+	if ($[262] !== t67 || $[263] !== t68 || $[264] !== t69 || $[265] !== t70 || $[266] !== t71) {
+		t72 = /* @__PURE__ */ jsxs("div", {
 			"data-element": "Suffix",
 			children: [
-				t65,
-				t66,
 				t67,
 				t68,
-				t69
+				t69,
+				t70,
+				t71
 			]
 		});
-		$[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, {
+		$[262] = t67;
+		$[263] = t68;
+		$[264] = t69;
+		$[265] = t70;
+		$[266] = t71;
+		$[267] = t72;
+	} else t72 = $[267];
+	const t73 = wrapperRef;
+	const t74 = props["aria-label"];
+	let t75;
+	if ($[268] !== setIsPopoverOpen) {
+		t75 = () => setIsPopoverOpen(false);
+		$[268] = setIsPopoverOpen;
+		$[269] = t75;
+	} else t75 = $[269];
+	let t76;
+	if ($[270] !== children || $[271] !== comboBoxWidth || $[272] !== compositeFocusProps || $[273] !== containerPadding || $[274] !== direction || $[275] !== effectiveSelectedKey || $[276] !== filterFn || $[277] !== handleSelectionChange || $[278] !== headingStyles || $[279] !== isDisabled || $[280] !== label || $[281] !== listBoxRef || $[282] !== listBoxStyles || $[283] !== listGap || $[284] !== optionStyles || $[285] !== overlayOffset || $[286] !== overlayStyles || $[287] !== popoverRef || $[288] !== props.disabledKeys || $[289] !== sectionStyles || $[290] !== shouldFlip || $[291] !== shouldShowPopover || $[292] !== size || $[293] !== sortedItems || $[294] !== t73 || $[295] !== t74 || $[296] !== t75) {
+		t76 = /* @__PURE__ */ jsx(ListBoxPopover, {
 			isOpen: shouldShowPopover,
-			triggerRef: t71,
+			triggerRef: t73,
 			popoverRef,
 			listBoxRef,
 			direction,
@@ -1299,43 +1336,43 @@ const ComboBox = forwardRef(function ComboBox(props, ref) {
 			items: sortedItems,
 			listStateRef,
 			label,
-			ariaLabel: t72,
+			ariaLabel: t74,
 			compositeFocusProps,
 			filter: filterFn,
 			size,
 			onSelectionChange: handleSelectionChange,
-			onClose: t73,
+			onClose: t75,
 			children
 		});
-		$[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];
+		$[270] = children;
+		$[271] = comboBoxWidth;
+		$[272] = compositeFocusProps;
+		$[273] = containerPadding;
+		$[274] = direction;
+		$[275] = effectiveSelectedKey;
+		$[276] = filterFn;
+		$[277] = handleSelectionChange;
+		$[278] = headingStyles;
+		$[279] = isDisabled;
+		$[280] = label;
+		$[281] = listBoxRef;
+		$[282] = listBoxStyles;
+		$[283] = listGap;
+		$[284] = optionStyles;
+		$[285] = overlayOffset;
+		$[286] = overlayStyles;
+		$[287] = popoverRef;
+		$[288] = props.disabledKeys;
+		$[289] = sectionStyles;
+		$[290] = shouldFlip;
+		$[291] = shouldShowPopover;
+		$[292] = size;
+		$[293] = sortedItems;
+		$[294] = t73;
+		$[295] = t74;
+		$[296] = t75;
+		$[297] = t76;
+	} else t76 = $[297];
 	const comboBoxField = /* @__PURE__ */ jsxs(ComboBoxWrapperElement, {
 		ref: wrapperRef,
 		mods,
@@ -1343,10 +1380,11 @@ const ComboBox = forwardRef(function ComboBox(props, ref) {
 		"data-size": size,
 		...compositeFocusProps,
 		children: [
-			t55,
-			t64,
-			t70,
-			t74
+			t56,
+			t65,
+			t66,
+			t72,
+			t76
 		]
 	});
 	const { children: _, ...propsWithoutChildren } = props;