@cube-dev/ui-kit 0.0.0-canary-bef9600 → 0.0.0-canary-e3f8a1a

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-bef9600 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e3f8a1a | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useLayoutEffect as useLayoutEffect$1 } from "../../../utils/react/useLayoutEffect.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
@@ -20,11 +20,12 @@ import { filterCollectionNodes, getEdgeVisibleKey, getNextVisibleKey, markKeyboa
 import { DEFAULT_INPUT_STYLES, INPUT_WRAPPER_STYLES } from "../TextInput/TextInputBase.js";
 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 React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import React, { forwardRef, useEffect, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { useFilter, useKeyboard } from "react-aria";
+import { useCollator, useFilter, useKeyboard } from "react-aria";
 import { Section, useListState } from "react-stately";
 
 //#region src/components/fields/ComboBox/ComboBox.tsx
@@ -45,11 +46,10 @@ function useComboBoxState(t0) {
 	const $ = c(12);
 	const { selectedKey, defaultSelectedKey, inputValue, defaultInputValue, comboBoxId, triggerRef, popoverRef } = t0;
 	const [internalSelectedKey, setInternalSelectedKey] = useState(defaultSelectedKey ?? null);
-	const [internalInputValue, setInternalInputValue] = useState(defaultInputValue ?? "");
+	const [internalInputValue, setInternalInputValue] = useState(defaultInputValue ?? null);
 	const isControlledKey = selectedKey !== void 0;
 	const isControlledInput = inputValue !== void 0;
 	const effectiveSelectedKey = isControlledKey ? selectedKey : internalSelectedKey;
-	const effectiveInputValue = isControlledInput ? inputValue : internalInputValue;
 	const [isPopoverOpen, setIsPopoverOpen] = useState(false);
 	let t1;
 	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
@@ -73,10 +73,10 @@ function useComboBoxState(t0) {
 	} else t2 = $[5];
 	usePopoverSync(t2);
 	let t3;
-	if ($[6] !== effectiveInputValue || $[7] !== effectiveSelectedKey || $[8] !== isControlledInput || $[9] !== isControlledKey || $[10] !== isPopoverOpen) {
+	if ($[6] !== effectiveSelectedKey || $[7] !== internalInputValue || $[8] !== isControlledInput || $[9] !== isControlledKey || $[10] !== isPopoverOpen) {
 		t3 = {
 			effectiveSelectedKey,
-			effectiveInputValue,
+			internalInputValue,
 			isPopoverOpen,
 			setIsPopoverOpen,
 			setInternalSelectedKey,
@@ -84,8 +84,8 @@ function useComboBoxState(t0) {
 			isControlledKey,
 			isControlledInput
 		};
-		$[6] = effectiveInputValue;
-		$[7] = effectiveSelectedKey;
+		$[6] = effectiveSelectedKey;
+		$[7] = internalInputValue;
 		$[8] = isControlledInput;
 		$[9] = isControlledKey;
 		$[10] = isPopoverOpen;
@@ -93,8 +93,55 @@ function useComboBoxState(t0) {
 	} else t3 = $[11];
 	return t3;
 }
+function useSelectedLabel(collection, selectedKey) {
+	const $ = c(7);
+	const [knownLabel, setKnownLabel] = useState(null);
+	let t0;
+	if ($[0] !== collection) {
+		t0 = (key) => {
+			const picked = getItemLabel(collection, key);
+			setKnownLabel({
+				key,
+				label: picked
+			});
+			return picked;
+		};
+		$[0] = collection;
+		$[1] = t0;
+	} else t0 = $[1];
+	const pickLabel = t0;
+	if (selectedKey == null) {
+		let t1;
+		if ($[2] !== pickLabel) {
+			t1 = {
+				selectedLabel: "",
+				pickLabel
+			};
+			$[2] = pickLabel;
+			$[3] = t1;
+		} else t1 = $[3];
+		return t1;
+	}
+	const label = collection.getItem(selectedKey)?.textValue;
+	if (label && (knownLabel?.key !== selectedKey || knownLabel.label !== label)) setKnownLabel({
+		key: selectedKey,
+		label
+	});
+	const selectedLabel = label || (knownLabel?.key === selectedKey ? knownLabel.label : String(selectedKey));
+	let t1;
+	if ($[4] !== pickLabel || $[5] !== selectedLabel) {
+		t1 = {
+			selectedLabel,
+			pickLabel
+		};
+		$[4] = pickLabel;
+		$[5] = selectedLabel;
+		$[6] = t1;
+	} else t1 = $[6];
+	return t1;
+}
 function useComboBoxFiltering(t0) {
-	const $ = c(11);
+	const $ = c(15);
 	const { effectiveInputValue, filter } = t0;
 	const [isFilterActive, setIsFilterActive] = useState(false);
 	let t1;
@@ -104,45 +151,67 @@ function useComboBoxFiltering(t0) {
 	} else t1 = $[0];
 	const { contains } = useFilter(t1);
 	let t2;
-	if ($[1] !== contains || $[2] !== filter) {
-		t2 = filter === false ? _temp : filter || contains;
-		$[1] = contains;
-		$[2] = filter;
-		$[3] = t2;
-	} else t2 = $[3];
-	const textFilterFn = t2;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = {
+			usage: "search",
+			sensitivity: "base"
+		};
+		$[1] = t2;
+	} else t2 = $[1];
+	const collator = useCollator(t2);
 	let t3;
-	if ($[4] !== effectiveInputValue || $[5] !== isFilterActive || $[6] !== textFilterFn) {
-		t3 = (nodes) => {
+	if ($[2] !== collator) {
+		t3 = (textValue, text) => collator.compare(textValue.normalize("NFC"), text.normalize("NFC")) === 0;
+		$[2] = collator;
+		$[3] = t3;
+	} else t3 = $[3];
+	const isSameText = t3;
+	let t4;
+	if ($[4] !== contains || $[5] !== filter) {
+		t4 = filter === false ? _temp : filter || contains;
+		$[4] = contains;
+		$[5] = filter;
+		$[6] = t4;
+	} 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);
 		};
-		$[4] = effectiveInputValue;
-		$[5] = isFilterActive;
-		$[6] = textFilterFn;
-		$[7] = t3;
-	} else t3 = $[7];
-	const filterFn = t3;
-	let t4;
-	if ($[8] !== filterFn || $[9] !== isFilterActive) {
-		t4 = {
+		$[7] = effectiveInputValue;
+		$[8] = isFilterActive;
+		$[9] = textFilterFn;
+		$[10] = t5;
+	} else t5 = $[10];
+	const filterFn = t5;
+	let t6;
+	if ($[11] !== filterFn || $[12] !== isFilterActive || $[13] !== isSameText) {
+		t6 = {
 			filterFn,
+			isSameText,
 			isFilterActive,
 			setIsFilterActive
 		};
-		$[8] = filterFn;
-		$[9] = isFilterActive;
-		$[10] = t4;
-	} else t4 = $[10];
-	return t4;
+		$[11] = filterFn;
+		$[12] = isFilterActive;
+		$[13] = isSameText;
+		$[14] = t6;
+	} else t6 = $[14];
+	return t6;
 }
 function _temp() {
 	return true;
 }
+const OVERLAY_KEYS = new Set(["Escape", "Tab"]);
+function isComposing(e) {
+	return e.nativeEvent?.isComposing || e.keyCode === 229;
+}
 function useComboBoxKeyboard(t0) {
-	const $ = c(42);
-	const { isPopoverOpen, listStateRef, hasResults, allowsCustomValue, effectiveInputValue, isClearable, onSelectionChange, onClearValue, onOpenPopover, onClosePopover, inputRef, setIsFilterActive, onVirtualFocus, onKeyDown } = t0;
+	const $ = c(48);
+	const { isListShown, isReadOnly, listStateRef, hasResults, allowsCustomValue, effectiveInputValue, selectedKey, selectedLabel, isClearable, onSelectionChange, onClearValue, onOpenList, onCloseList, inputRef, onVirtualFocus, onKeyDown } = t0;
 	let t1;
 	if ($[0] !== onVirtualFocus) {
 		t1 = (listState, key) => {
@@ -156,155 +225,170 @@ function useComboBoxKeyboard(t0) {
 	} else t1 = $[1];
 	const focusOption = t1;
 	let t2;
-	if ($[2] !== focusOption || $[3] !== hasResults || $[4] !== isPopoverOpen || $[5] !== listStateRef || $[6] !== onOpenPopover || $[7] !== setIsFilterActive) {
+	if ($[2] !== focusOption || $[3] !== isListShown || $[4] !== listStateRef || $[5] !== onOpenList) {
 		t2 = (e) => {
 			e.preventDefault();
-			if (!isPopoverOpen) {
-				if (!hasResults) setIsFilterActive(false);
-				onOpenPopover();
+			if (!isListShown) {
+				onOpenList();
 				return;
 			}
 			const listState_0 = listStateRef.current;
 			if (listState_0) focusOption(listState_0, getNextVisibleKey(listState_0, e.key === "ArrowDown" ? 1 : -1));
 		};
 		$[2] = focusOption;
-		$[3] = hasResults;
-		$[4] = isPopoverOpen;
-		$[5] = listStateRef;
-		$[6] = onOpenPopover;
-		$[7] = setIsFilterActive;
-		$[8] = t2;
-	} else t2 = $[8];
+		$[3] = isListShown;
+		$[4] = listStateRef;
+		$[5] = onOpenList;
+		$[6] = t2;
+	} else t2 = $[6];
 	const handleArrowKey = t2;
 	let t3;
-	if ($[9] !== allowsCustomValue || $[10] !== effectiveInputValue || $[11] !== isPopoverOpen || $[12] !== onSelectionChange) {
+	if ($[7] !== effectiveInputValue || $[8] !== isListShown || $[9] !== onSelectionChange || $[10] !== selectedKey || $[11] !== selectedLabel) {
 		t3 = (e_0) => {
-			if (!allowsCustomValue) {
-				e_0.preventDefault();
-				onSelectionChange(null);
-				return;
-			}
 			const value = effectiveInputValue.trim();
-			onSelectionChange(value ?? null);
-			if (isPopoverOpen || !value) e_0.preventDefault();
-		};
-		$[9] = allowsCustomValue;
-		$[10] = effectiveInputValue;
-		$[11] = isPopoverOpen;
-		$[12] = onSelectionChange;
-		$[13] = t3;
-	} else t3 = $[13];
-	const commitWithoutResults = t3;
+			if (isListShown || !value) e_0.preventDefault();
+			if (value && selectedKey != null && value === selectedLabel) return;
+			onSelectionChange(value || null);
+		};
+		$[7] = effectiveInputValue;
+		$[8] = isListShown;
+		$[9] = onSelectionChange;
+		$[10] = selectedKey;
+		$[11] = selectedLabel;
+		$[12] = t3;
+	} else t3 = $[12];
+	const commitTypedText = t3;
 	let t4;
-	if ($[14] !== commitWithoutResults || $[15] !== effectiveInputValue || $[16] !== hasResults || $[17] !== inputRef || $[18] !== isPopoverOpen || $[19] !== listStateRef || $[20] !== onClosePopover || $[21] !== onSelectionChange) {
+	if ($[13] !== allowsCustomValue || $[14] !== commitTypedText || $[15] !== effectiveInputValue || $[16] !== hasResults || $[17] !== inputRef || $[18] !== isListShown || $[19] !== listStateRef || $[20] !== onCloseList || $[21] !== onSelectionChange || $[22] !== selectedKey) {
 		t4 = (e_1) => {
-			const listState_1 = isPopoverOpen ? listStateRef.current : null;
-			const focusedKey = listState_1?.selectionManager.focusedKey;
-			if (focusedKey != null) {
+			const listState_1 = isListShown ? listStateRef.current : null;
+			const key_0 = listState_1 ? resolveHighlightedKey(listState_1, selectedKey) : null;
+			if (key_0 != null) {
 				e_1.preventDefault();
-				listState_1.selectionManager.select(focusedKey, e_1);
-				onClosePopover();
+				listState_1.selectionManager.select(key_0, e_1);
+				onCloseList();
 				inputRef.current?.focus();
-			} else if (!hasResults) commitWithoutResults(e_1);
-			else if ((effectiveInputValue || "").trim() === "") {
+			} else if (allowsCustomValue) commitTypedText(e_1);
+			else if (!hasResults || !effectiveInputValue.trim()) {
 				e_1.preventDefault();
 				onSelectionChange(null);
 			}
 		};
-		$[14] = commitWithoutResults;
+		$[13] = allowsCustomValue;
+		$[14] = commitTypedText;
 		$[15] = effectiveInputValue;
 		$[16] = hasResults;
 		$[17] = inputRef;
-		$[18] = isPopoverOpen;
+		$[18] = isListShown;
 		$[19] = listStateRef;
-		$[20] = onClosePopover;
+		$[20] = onCloseList;
 		$[21] = onSelectionChange;
-		$[22] = t4;
-	} else t4 = $[22];
+		$[22] = selectedKey;
+		$[23] = t4;
+	} else t4 = $[23];
 	const handleEnterKey = t4;
 	let t5;
-	if ($[23] !== effectiveInputValue || $[24] !== inputRef || $[25] !== isClearable || $[26] !== isPopoverOpen || $[27] !== onClearValue || $[28] !== onClosePopover) {
+	if ($[24] !== effectiveInputValue || $[25] !== inputRef || $[26] !== isClearable || $[27] !== isListShown || $[28] !== onClearValue || $[29] !== onCloseList) {
 		t5 = (e_2) => {
-			if (isPopoverOpen) {
+			if (isListShown) {
 				e_2.preventDefault();
-				onClosePopover();
+				onCloseList();
 				inputRef.current?.focus();
-			} else if (effectiveInputValue && isClearable) {
+				return true;
+			}
+			if (effectiveInputValue && isClearable) {
 				e_2.preventDefault();
 				onClearValue();
+				return true;
 			}
+			return false;
 		};
-		$[23] = effectiveInputValue;
-		$[24] = inputRef;
-		$[25] = isClearable;
-		$[26] = isPopoverOpen;
-		$[27] = onClearValue;
-		$[28] = onClosePopover;
-		$[29] = t5;
-	} else t5 = $[29];
+		$[24] = effectiveInputValue;
+		$[25] = inputRef;
+		$[26] = isClearable;
+		$[27] = isListShown;
+		$[28] = onClearValue;
+		$[29] = onCloseList;
+		$[30] = t5;
+	} else t5 = $[30];
 	const handleEscapeKey = t5;
 	let t6;
-	if ($[30] !== focusOption || $[31] !== isPopoverOpen || $[32] !== listStateRef) {
+	if ($[31] !== focusOption || $[32] !== isListShown || $[33] !== listStateRef) {
 		t6 = (e_3) => {
-			if (!isPopoverOpen) return;
+			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"));
 		};
-		$[30] = focusOption;
-		$[31] = isPopoverOpen;
-		$[32] = listStateRef;
-		$[33] = t6;
-	} else t6 = $[33];
+		$[31] = focusOption;
+		$[32] = isListShown;
+		$[33] = listStateRef;
+		$[34] = t6;
+	} else t6 = $[34];
 	const handleEdgeKey = t6;
 	let t7;
-	if ($[34] !== handleArrowKey || $[35] !== handleEdgeKey || $[36] !== handleEnterKey || $[37] !== handleEscapeKey || $[38] !== onKeyDown) {
-		t7 = { onKeyDown: (e_4) => {
-			onKeyDown?.(e_4);
-			if (e_4.isDefaultPrevented()) return;
-			bb97: switch (e_4.key) {
+	if ($[35] !== handleArrowKey || $[36] !== handleEdgeKey || $[37] !== handleEnterKey || $[38] !== handleEscapeKey || $[39] !== isListShown || $[40] !== onCloseList) {
+		t7 = (e_4) => {
+			switch (e_4.key) {
 				case "ArrowDown":
 				case "ArrowUp":
 					handleArrowKey(e_4);
-					break bb97;
+					return true;
 				case "Enter":
 					handleEnterKey(e_4);
-					break bb97;
-				case "Escape":
-					handleEscapeKey(e_4);
-					break bb97;
+					return true;
+				case "Escape": return handleEscapeKey(e_4);
 				case "Home":
-				case "End": handleEdgeKey(e_4);
+				case "End":
+					handleEdgeKey(e_4);
+					return true;
+				case "Tab":
+					if (isListShown) onCloseList();
+					return false;
+				default: return true;
 			}
-		} };
-		$[34] = handleArrowKey;
-		$[35] = handleEdgeKey;
-		$[36] = handleEnterKey;
-		$[37] = handleEscapeKey;
-		$[38] = onKeyDown;
-		$[39] = t7;
-	} else t7 = $[39];
-	const { keyboardProps } = useKeyboard(t7);
+		};
+		$[35] = handleArrowKey;
+		$[36] = handleEdgeKey;
+		$[37] = handleEnterKey;
+		$[38] = handleEscapeKey;
+		$[39] = isListShown;
+		$[40] = onCloseList;
+		$[41] = t7;
+	} else t7 = $[41];
+	const handleKey = t7;
 	let t8;
-	if ($[40] !== keyboardProps) {
-		t8 = { keyboardProps };
-		$[40] = keyboardProps;
-		$[41] = t8;
-	} else t8 = $[41];
-	return t8;
+	if ($[42] !== handleKey || $[43] !== isReadOnly || $[44] !== onKeyDown) {
+		t8 = { onKeyDown: (e_5) => {
+			onKeyDown?.(e_5);
+			if (e_5.isDefaultPrevented() || isComposing(e_5)) return;
+			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];
+	const { keyboardProps } = useKeyboard(t8);
+	let t9;
+	if ($[46] !== keyboardProps) {
+		t9 = { keyboardProps };
+		$[46] = keyboardProps;
+		$[47] = t9;
+	} else t9 = $[47];
+	return t9;
 }
 const ComboBoxInput = forwardRef(function ComboBoxInput(t0, ref) {
-	const $ = c(24);
-	const { qa, inputRef, id, value, placeholder, isDisabled, isReadOnly, isRequired, autoFocus, autoComplete, size, mods, inputStyles, keyboardProps, focusProps, onChange, onFocus, isPopoverOpen, hasResults, comboBoxId, activeDescendant, ariaProps, isInvalid } = t0;
+	const $ = c(26);
+	const { qa, inputRef, id, value, placeholder, isDisabled, isReadOnly, isRequired, autoFocus, autoComplete, size, mods, inputStyles, keyboardProps, focusProps, onChange, onFocus, onPointerDown, onClick, isListShown, comboBoxId, activeDescendant, ariaProps, isInvalid } = t0;
 	const combinedRef = useCombinedRefs(ref, inputRef);
 	const t1 = autoFocus ? "" : void 0;
 	const t2 = isRequired || void 0;
-	const t3 = isPopoverOpen && hasResults;
-	const t4 = isPopoverOpen && hasResults ? `ComboBoxListBox-${comboBoxId}` : void 0;
-	const t5 = isInvalid || void 0;
-	let t6;
-	if ($[0] !== activeDescendant || $[1] !== ariaProps || $[2] !== autoComplete || $[3] !== autoFocus || $[4] !== combinedRef || $[5] !== focusProps.onBlur || $[6] !== id || $[7] !== inputStyles || $[8] !== isDisabled || $[9] !== isReadOnly || $[10] !== keyboardProps || $[11] !== mods || $[12] !== onChange || $[13] !== onFocus || $[14] !== placeholder || $[15] !== qa || $[16] !== size || $[17] !== t1 || $[18] !== t2 || $[19] !== t3 || $[20] !== t4 || $[21] !== t5 || $[22] !== value) {
-		t6 = /* @__PURE__ */ jsx(InputElement, {
+	const t3 = isListShown ? `ComboBoxListBox-${comboBoxId}` : void 0;
+	const t4 = isInvalid || void 0;
+	let t5;
+	if ($[0] !== activeDescendant || $[1] !== ariaProps || $[2] !== autoComplete || $[3] !== autoFocus || $[4] !== combinedRef || $[5] !== focusProps.onBlur || $[6] !== id || $[7] !== inputStyles || $[8] !== isDisabled || $[9] !== isListShown || $[10] !== isReadOnly || $[11] !== keyboardProps || $[12] !== mods || $[13] !== onChange || $[14] !== onClick || $[15] !== onFocus || $[16] !== onPointerDown || $[17] !== placeholder || $[18] !== qa || $[19] !== size || $[20] !== t1 || $[21] !== t2 || $[22] !== t3 || $[23] !== t4 || $[24] !== value) {
+		t5 = /* @__PURE__ */ jsx(InputElement, {
 			ref: combinedRef,
 			qa,
 			id,
@@ -318,6 +402,8 @@ const ComboBoxInput = forwardRef(function ComboBoxInput(t0, ref) {
 			"data-autofocus": t1,
 			onChange,
 			onFocus,
+			onPointerDown,
+			onClick,
 			onBlur: focusProps.onBlur,
 			...keyboardProps,
 			styles: inputStyles,
@@ -326,11 +412,12 @@ const ComboBoxInput = forwardRef(function ComboBoxInput(t0, ref) {
 			"data-input-type": "combobox",
 			role: "combobox",
 			"aria-required": t2,
-			"aria-expanded": t3,
+			"aria-expanded": isListShown,
 			"aria-haspopup": "listbox",
-			"aria-controls": t4,
+			"aria-controls": t3,
+			"aria-autocomplete": "list",
 			"aria-activedescendant": activeDescendant,
-			"aria-invalid": t5,
+			"aria-invalid": t4,
 			...ariaProps
 		});
 		$[0] = activeDescendant;
@@ -342,225 +429,319 @@ const ComboBoxInput = forwardRef(function ComboBoxInput(t0, ref) {
 		$[6] = id;
 		$[7] = inputStyles;
 		$[8] = isDisabled;
-		$[9] = isReadOnly;
-		$[10] = keyboardProps;
-		$[11] = mods;
-		$[12] = onChange;
-		$[13] = onFocus;
-		$[14] = placeholder;
-		$[15] = qa;
-		$[16] = size;
-		$[17] = t1;
-		$[18] = t2;
-		$[19] = t3;
-		$[20] = t4;
-		$[21] = t5;
-		$[22] = value;
-		$[23] = t6;
-	} else t6 = $[23];
-	return t6;
+		$[9] = isListShown;
+		$[10] = isReadOnly;
+		$[11] = keyboardProps;
+		$[12] = mods;
+		$[13] = onChange;
+		$[14] = onClick;
+		$[15] = onFocus;
+		$[16] = onPointerDown;
+		$[17] = placeholder;
+		$[18] = qa;
+		$[19] = size;
+		$[20] = t1;
+		$[21] = t2;
+		$[22] = t3;
+		$[23] = t4;
+		$[24] = value;
+		$[25] = t5;
+	} else t5 = $[25];
+	return t5;
 });
 const ComboBox = forwardRef(function ComboBox(props, ref) {
-	props = useFieldProps(props, { valuePropsMapper: ({ value, onChange }) => {
-		return {
-			selectedKey: value ?? null,
-			onSelectionChange(val) {
-				onChange(val);
-			}
-		};
-	} });
+	const $ = c(283);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = { valuePropsMapper: _temp2 };
+		$[0] = t0;
+	} else t0 = $[0];
+	props = useFieldProps(props, t0);
 	const { t } = useI18n();
-	let { qa, label, extra, labelStyles, isRequired, necessityIndicator, isInvalid, isValid, id, icon, prefix, isDisabled, autoFocus, autoComplete = "off", wrapperRef, inputRef, triggerRef, popoverRef, listBoxRef, isLoading, inputStyles, optionStyles, triggerStyles, listBoxStyles, overlayStyles, suffix, hideTrigger, message, description, size = "medium", direction = "bottom", shouldFlip = true, popoverTrigger = "input", suffixPosition = "before", filter, styles, labelSuffix, selectedKey, defaultSelectedKey, inputValue, defaultInputValue, onInputChange, isClearable, onClear, placeholder, allowsCustomValue, shouldCommitOnBlur = true, clearOnBlur, items, children: renderChildren, sectionStyles, headingStyles, listGap, isReadOnly, overlayOffset = 8, containerPadding = 8, onSelectionChange: externalOnSelectionChange, sortSelectedToTop: sortSelectedToTopProp, onOpenChange, onFocus, onBlur, onKeyDown, form, ...otherProps } = props;
-	const comboBoxId = useMemo(() => generateRandomId(), []);
+	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;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t13 = generateRandomId();
+		$[1] = t13;
+	} else t13 = $[1];
+	const comboBoxId = t13;
 	wrapperRef = useCombinedRefs(wrapperRef);
 	popoverRef = useCombinedRefs(popoverRef);
-	const { effectiveSelectedKey, effectiveInputValue, isPopoverOpen, setIsPopoverOpen, setInternalSelectedKey, setInternalInputValue, isControlledKey, isControlledInput } = useComboBoxState({
-		selectedKey,
-		defaultSelectedKey,
-		inputValue,
-		defaultInputValue,
-		comboBoxId,
-		triggerRef: wrapperRef,
-		popoverRef
-	});
-	const sortSelectedToTopExplicit = sortSelectedToTopProp !== void 0;
+	const t14 = wrapperRef;
+	const t15 = popoverRef;
+	let t16;
+	if ($[2] !== comboBoxId || $[3] !== defaultInputValue || $[4] !== defaultSelectedKey || $[5] !== inputValue || $[6] !== selectedKey || $[7] !== t14 || $[8] !== t15) {
+		t16 = {
+			selectedKey,
+			defaultSelectedKey,
+			inputValue,
+			defaultInputValue,
+			comboBoxId,
+			triggerRef: t14,
+			popoverRef: t15
+		};
+		$[2] = comboBoxId;
+		$[3] = defaultInputValue;
+		$[4] = defaultSelectedKey;
+		$[5] = inputValue;
+		$[6] = selectedKey;
+		$[7] = t14;
+		$[8] = t15;
+		$[9] = t16;
+	} else t16 = $[9];
+	const { effectiveSelectedKey, internalInputValue, isPopoverOpen, setIsPopoverOpen, setInternalSelectedKey, setInternalInputValue, isControlledKey, isControlledInput } = useComboBoxState(t16);
 	const sortSelectedToTop = sortSelectedToTopProp ?? (items ? true : false);
-	const cachedItemsOrder = useRef(null);
-	const selectionWhenClosed = useRef(null);
 	styles = extractStyles(otherProps, PROP_STYLES, styles);
 	ref = useCombinedRefs(ref);
 	inputRef = useCombinedRefs(inputRef);
 	triggerRef = useCombinedRefs(triggerRef);
 	listBoxRef = useCombinedRefs(listBoxRef);
-	const sortedItems = useCallback(() => {
-		if (!items) return items;
-		if (!sortSelectedToTop) return items;
-		if (cachedItemsOrder.current) return cachedItemsOrder.current;
-		if (sortSelectedToTopExplicit && !items) {
-			console.warn("ComboBox: sortSelectedToTop only works with the items prop. Sorting will be skipped when using JSX children.");
-			return items;
-		}
-		const selectedKey_0 = isPopoverOpen ? effectiveSelectedKey : selectionWhenClosed.current;
-		if (!selectedKey_0) return items;
-		const itemsArray = Array.isArray(items) ? items : Array.from(items);
-		const selectedItem = itemsArray.find((item) => {
-			const key = item?.key ?? item?.id;
-			return key != null && String(key) === String(selectedKey_0);
-		});
-		if (!selectedItem) return items;
-		const sorted = [selectedItem, ...itemsArray.filter((item_0) => {
-			const key_0 = item_0?.key ?? item_0?.id;
-			return key_0 == null || String(key_0) !== String(selectedKey_0);
-		})];
-		if (isPopoverOpen) cachedItemsOrder.current = sorted;
-		return sorted;
-	}, [
-		items,
-		sortSelectedToTop,
-		sortSelectedToTopExplicit,
-		effectiveSelectedKey,
-		isPopoverOpen
-	])();
-	let children = renderChildren;
-	const renderFn = renderChildren;
-	if (sortedItems && typeof renderFn === "function") try {
-		children = Array.from(sortedItems).map((item_1, idx) => {
-			const rendered = renderFn(item_1);
-			if (React.isValidElement(rendered) && rendered.key == null) return React.cloneElement(rendered, { key: rendered?.key ?? item_1?.key ?? idx });
-			return rendered;
-		});
-	} catch {}
-	useEffect(() => {
-		cachedItemsOrder.current = null;
-	}, [items]);
-	useEffect(() => {
-		if (!isPopoverOpen) {
-			selectionWhenClosed.current = effectiveSelectedKey != null ? String(effectiveSelectedKey) : null;
-			cachedItemsOrder.current = null;
-		}
-	}, [isPopoverOpen, effectiveSelectedKey]);
-	useEffect(() => {
-		onOpenChange?.(isPopoverOpen);
-	}, [isPopoverOpen]);
-	const { filterFn, isFilterActive, setIsFilterActive } = useComboBoxFiltering({
-		effectiveInputValue,
-		filter
-	});
-	const localCollectionState = useListState({
-		children,
-		items: sortedItems,
-		disabledKeys: props.disabledKeys,
-		selectionMode: "none"
-	});
-	const { isFocused, focusProps } = useFocus$1();
-	const checkInputValidity = useCallback(() => {
-		if (!effectiveInputValue.trim()) return {
-			isInputValid: false,
-			singleMatchKey: null,
-			filteredCount: 0
-		};
-		const filteredNodes = filterFn(localCollectionState.collection);
-		const filteredItems = [];
-		for (const node of filteredNodes) if (node.type === "section" && node.childNodes) {
-			for (const child of node.childNodes) if (child.type === "item") filteredItems.push({
-				key: child.key,
-				textValue: child.textValue || ""
+	const [sortKey, setSortKey] = useState(effectiveSelectedKey);
+	if (!isPopoverOpen && sortKey !== effectiveSelectedKey) setSortKey(effectiveSelectedKey);
+	let children;
+	let sortedItems;
+	if ($[10] !== items || $[11] !== renderChildren || $[12] !== sortKey || $[13] !== sortSelectedToTop) {
+		sortedItems = items && sortSelectedToTop ? sortSelectedFirst(items, sortKey) : items;
+		children = renderChildren;
+		const renderFn = renderChildren;
+		if (sortedItems && typeof renderFn === "function") try {
+			children = Array.from(sortedItems).map((item, idx) => {
+				const rendered = renderFn(item);
+				if (React.isValidElement(rendered) && rendered.key == null) return React.cloneElement(rendered, { key: rendered?.key ?? item?.key ?? idx });
+				return rendered;
 			});
-		} else if (node.type === "item") filteredItems.push({
-			key: node.key,
-			textValue: node.textValue || ""
+		} catch {}
+		$[10] = items;
+		$[11] = renderChildren;
+		$[12] = sortKey;
+		$[13] = sortSelectedToTop;
+		$[14] = children;
+		$[15] = sortedItems;
+	} else {
+		children = $[14];
+		sortedItems = $[15];
+	}
+	const t17 = children;
+	let t18;
+	if ($[16] !== props.disabledKeys || $[17] !== sortedItems || $[18] !== t17) {
+		t18 = {
+			children: t17,
+			items: sortedItems,
+			disabledKeys: props.disabledKeys,
+			selectionMode: "none"
+		};
+		$[16] = props.disabledKeys;
+		$[17] = sortedItems;
+		$[18] = t17;
+		$[19] = t18;
+	} else t18 = $[19];
+	const localCollectionState = useListState(t18);
+	const { selectedLabel, pickLabel } = useSelectedLabel(localCollectionState.collection, effectiveSelectedKey);
+	const effectiveInputValue = isControlledInput ? inputValue : internalInputValue ?? selectedLabel;
+	let t19;
+	if ($[20] !== effectiveInputValue || $[21] !== filter) {
+		t19 = {
+			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;
+	const hasResults = filteredOptions.length > 0;
+	const shouldShowPopover = isPopoverOpen && hasResults;
+	const reportedOpenRef = useRef(shouldShowPopover);
+	let t21;
+	let t22;
+	if ($[26] !== onOpenChange || $[27] !== shouldShowPopover) {
+		t21 = () => {
+			if (reportedOpenRef.current === shouldShowPopover) return;
+			reportedOpenRef.current = shouldShowPopover;
+			onOpenChange?.(shouldShowPopover);
+		};
+		t22 = [shouldShowPopover, onOpenChange];
+		$[26] = onOpenChange;
+		$[27] = shouldShowPopover;
+		$[28] = t21;
+		$[29] = t22;
+	} else {
+		t21 = $[28];
+		t22 = $[29];
+	}
+	useEffect(t21, t22);
+	const { isFocused, focusProps } = useFocus$1();
+	let t23;
+	if ($[30] !== isControlledKey || $[31] !== setInternalSelectedKey) {
+		t23 = (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) => {
+			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 = () => {
+			if (effectiveSelectedKey != null) {
+				externalOnSelectionChange?.(null);
+				setSelectedKey(null);
+			}
+			showSelectionLabel("");
+		};
+		$[38] = effectiveSelectedKey;
+		$[39] = externalOnSelectionChange;
+		$[40] = setSelectedKey;
+		$[41] = showSelectionLabel;
+		$[42] = t25;
+	} else t25 = $[42];
+	const clearSelectionAndInput = 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 = () => {
+			const value_0 = effectiveInputValue.trim();
+			if (shouldCommitOnBlur && value_0 && effectiveSelectedKey == null) {
+				externalOnSelectionChange?.(value_0);
+				setSelectedKey(value_0);
+				showSelectionLabel(value_0);
+			} 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 = () => {
+			const matchKey = findTypedOption(filteredOptions, effectiveInputValue, effectiveSelectedKey, localCollectionState.disabledKeys, isSameText);
+			if (matchKey != null && matchKey !== effectiveSelectedKey) {
+				setSelectedKey(matchKey);
+				showSelectionLabel(pickLabel(matchKey));
+				externalOnSelectionChange?.(matchKey);
+			} 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 = () => {
+			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,
+			popoverRef,
+			onFocus,
+			onBlur: handleCompositeBlur,
+			isDisabled
+		};
+		$[76] = handleCompositeBlur;
+		$[77] = isDisabled;
+		$[78] = onFocus;
+		$[79] = popoverRef;
+		$[80] = t30;
+		$[81] = t31;
+	} else t31 = $[81];
+	const { compositeFocusProps } = useCompositeFocus(t31);
+	let t32;
+	if ($[82] !== isInvalid || $[83] !== isValid) {
+		t32 = getValidationIcon({
+			isInvalid,
+			isValid
 		});
-		const filteredCount = filteredItems.length;
-		const term = effectiveInputValue.trim().toLowerCase();
-		const exactMatches = filteredItems.filter((item_2) => item_2.textValue.toLowerCase() === term);
-		const match = exactMatches.find((item_4) => item_4.key === effectiveSelectedKey) ?? exactMatches.find((item_3) => !localCollectionState.disabledKeys.has(item_3.key)) ?? exactMatches[0] ?? (filteredCount === 1 ? filteredItems[0] : null);
-		if (!match || match.key !== effectiveSelectedKey && localCollectionState.disabledKeys.has(match.key)) return {
-			isInputValid: false,
-			singleMatchKey: null,
-			filteredCount
-		};
-		return {
-			isInputValid: true,
-			singleMatchKey: match.key,
-			filteredCount
-		};
-	}, [
-		effectiveInputValue,
-		effectiveSelectedKey,
-		filterFn,
-		localCollectionState.collection,
-		localCollectionState.disabledKeys
-	]);
-	const setSelectedKey = (key_1) => {
-		if (!isControlledKey) setInternalSelectedKey(key_1);
-	};
-	const setInputText = (value_0) => {
-		if (!isControlledInput) setInternalInputValue(value_0);
-		onInputChange?.(value_0);
-	};
-	const clearSelectionAndInput = () => {
-		externalOnSelectionChange?.(null);
-		setSelectedKey(null);
-		setInputText("");
-	};
-	const restoreSelectedLabel = () => {
-		setInputText(effectiveSelectedKey != null ? getItemLabel(effectiveSelectedKey) : "");
-	};
-	const settleCustomValueOnBlur = () => {
-		if (shouldCommitOnBlur && effectiveInputValue && effectiveSelectedKey == null) {
-			externalOnSelectionChange?.(effectiveInputValue);
-			setSelectedKey(effectiveInputValue);
-		} else if (!String(effectiveInputValue).trim()) clearSelectionAndInput();
-		else restoreSelectedLabel();
-	};
-	const settleOptionOnBlur = () => {
-		const { isInputValid, singleMatchKey } = checkInputValidity();
-		if (isInputValid && singleMatchKey != null && singleMatchKey !== effectiveSelectedKey) {
-			const label_0 = getItemLabel(singleMatchKey);
-			setSelectedKey(singleMatchKey);
-			setInputText(label_0);
-			externalOnSelectionChange?.(singleMatchKey);
-		} else if (!isInputValid && (clearOnBlur || !effectiveInputValue.trim())) clearSelectionAndInput();
-		else restoreSelectedLabel();
-	};
-	const handleCompositeBlur = useEvent(() => {
-		setIsPopoverOpen(false);
-		if (allowsCustomValue) settleCustomValueOnBlur();
-		else settleOptionOnBlur();
-		onBlur?.();
-		setIsFilterActive(false);
-	});
-	const { compositeFocusProps } = useCompositeFocus({
-		wrapperRef,
-		popoverRef,
-		onFocus,
-		onBlur: handleCompositeBlur,
-		isDisabled
-	});
-	let validationIcon = getValidationIcon({
-		isInvalid,
-		isValid
-	});
+		$[82] = isInvalid;
+		$[83] = isValid;
+		$[84] = t32;
+	} else t32 = $[84];
+	const validationIcon = t32;
 	const listStateRef = useRef(null);
-	const focusInitAttemptsRef = useRef(0);
 	const [activeOptionKey, setActiveOptionKey] = useState(null);
-	const getItemLabel = useCallback((key_2) => {
-		return (localCollectionState?.collection?.getItem(key_2))?.textValue || String(key_2);
-	}, [localCollectionState?.collection]);
 	const handleSelectionChange = useEvent((selection) => {
-		const key_3 = Array.isArray(selection) ? selection[0] : selection;
-		if (!isControlledKey) setInternalSelectedKey(key_3 ?? null);
-		if (key_3 != null) {
-			setIsFilterActive(false);
-			const label_1 = getItemLabel(key_3);
-			if (!isControlledInput) setInternalInputValue(label_1);
-			onInputChange?.(label_1);
-		} else {
-			if (!isControlledInput) setInternalInputValue("");
-			onInputChange?.("");
-			setIsFilterActive(false);
-		}
-		externalOnSelectionChange?.(key_3);
+		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();
@@ -568,304 +749,590 @@ const ComboBox = forwardRef(function ComboBox(props, ref) {
 	});
 	const lastSyncedSelectedKey = useRef(void 0);
 	const selectionClearedByTyping = useRef(false);
-	const handleInputChange = useEvent((e) => {
-		const value_1 = e.target.value;
-		if (!isControlledInput) setInternalInputValue(value_1);
-		onInputChange?.(value_1);
-		setIsFilterActive(value_1.trim().length > 0);
-		if (allowsCustomValue && effectiveSelectedKey != null) {
-			selectionClearedByTyping.current = true;
-			if (!isControlledKey) setInternalSelectedKey(null);
-			externalOnSelectionChange?.(null);
-		}
-		if (popoverTrigger !== "manual" && value_1 && !isPopoverOpen) setIsPopoverOpen(true);
-	});
-	const [hasInitialized, setHasInitialized] = useState(false);
-	useEffect(() => {
-		if (hasInitialized || isControlledInput) return;
-		if (defaultInputValue !== void 0) {
-			setInternalInputValue(defaultInputValue);
-			setHasInitialized(true);
-			return;
-		}
-		if (defaultSelectedKey) {
-			setInternalInputValue(getItemLabel(defaultSelectedKey));
-			setHasInitialized(true);
-		}
-	}, [
-		hasInitialized,
-		isControlledInput,
-		defaultInputValue,
-		defaultSelectedKey,
-		getItemLabel,
-		children
-	]);
-	useEffect(() => {
-		const preserveTypedInput = selectionClearedByTyping.current;
-		selectionClearedByTyping.current = false;
-		if (!isControlledKey || isControlledInput) return;
-		if (lastSyncedSelectedKey.current !== void 0 && lastSyncedSelectedKey.current === effectiveSelectedKey) return;
-		lastSyncedSelectedKey.current = effectiveSelectedKey;
-		if (preserveTypedInput && effectiveSelectedKey == null) return;
-		setInternalInputValue(effectiveSelectedKey != null ? getItemLabel(effectiveSelectedKey) : "");
-	}, [
-		isControlledKey,
-		isControlledInput,
-		effectiveSelectedKey,
-		effectiveInputValue,
-		getItemLabel
-	]);
-	const handleInputFocus = useEvent((e_0) => {
-		focusProps.onFocus?.(e_0);
-		if (popoverTrigger === "focus" && !isPopoverOpen) setIsPopoverOpen(true);
-	});
-	const handleInputBlur = useEvent((e_1) => {
-		focusProps.onBlur?.(e_1);
-	});
-	let showClearButton = isClearable && (allowsCustomValue ? effectiveInputValue !== "" : effectiveSelectedKey != null) && !isDisabled && !isReadOnly;
-	const hasResults = useMemo(() => {
-		if (!children) return false;
-		if (!Array.isArray(children) && children === null) return false;
-		if (localCollectionState?.collection) {
-			const filteredNodes_0 = filterFn(localCollectionState.collection);
-			return Array.from(filteredNodes_0).flatMap((node_0) => {
-				if (node_0.type === "section" && node_0.childNodes) return [...node_0.childNodes];
-				return [node_0];
-			}).length > 0;
-		}
-		return Array.isArray(children) ? children.length > 0 : true;
-	}, [
-		children,
-		localCollectionState?.collection,
-		filterFn
-	]);
-	let clearValue = useEvent(() => {
-		if (!isControlledInput) setInternalInputValue("");
+	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) {
+		t33 = (e) => {
+			const value_1 = e.target.value;
+			if (!isControlledInput) setInternalInputValue(value_1);
+			onInputChange?.(value_1);
+			setIsFilterActive(value_1.trim().length > 0);
+			if (allowsCustomValue && effectiveSelectedKey != null) {
+				selectionClearedByTyping.current = true;
+				if (!isControlledKey) setInternalSelectedKey(null);
+				externalOnSelectionChange?.(null);
+			}
+			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];
+	const handleInputChange = useEvent(t33);
+	let t34;
+	if ($[98] !== effectiveSelectedKey || $[99] !== isControlledInput || $[100] !== isControlledKey || $[101] !== setInternalInputValue) {
+		t34 = () => {
+			const preserveTypedInput = selectionClearedByTyping.current;
+			selectionClearedByTyping.current = false;
+			if (!isControlledKey || isControlledInput) return;
+			if (lastSyncedSelectedKey.current !== void 0 && lastSyncedSelectedKey.current === effectiveSelectedKey) return;
+			lastSyncedSelectedKey.current = effectiveSelectedKey;
+			if (preserveTypedInput && effectiveSelectedKey == null) return;
+			setInternalInputValue(null);
+		};
+		$[98] = effectiveSelectedKey;
+		$[99] = isControlledInput;
+		$[100] = isControlledKey;
+		$[101] = setInternalInputValue;
+		$[102] = t34;
+	} else t34 = $[102];
+	let t35;
+	if ($[103] !== effectiveInputValue || $[104] !== effectiveSelectedKey || $[105] !== isControlledInput || $[106] !== isControlledKey || $[107] !== setInternalInputValue) {
+		t35 = [
+			isControlledKey,
+			isControlledInput,
+			effectiveSelectedKey,
+			effectiveInputValue,
+			setInternalInputValue
+		];
+		$[103] = effectiveInputValue;
+		$[104] = effectiveSelectedKey;
+		$[105] = isControlledInput;
+		$[106] = isControlledKey;
+		$[107] = setInternalInputValue;
+		$[108] = t35;
+	} else t35 = $[108];
+	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) {
+		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];
+	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) => {
+			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);
+	const pressStartedOnInputRef = useRef(false);
+	let t38;
+	if ($[120] !== hasResults || $[121] !== openList || $[122] !== popoverTrigger || $[123] !== shouldShowPopover) {
+		t38 = () => {
+			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) => {
+			focusProps.onBlur?.(e_1);
+		};
+		$[125] = focusProps;
+		$[126] = t39;
+	} else t39 = $[126];
+	const handleInputBlur = useEvent(t39);
+	const clearValue = useEvent(() => {
+		if (!isControlledInput) setInternalInputValue(null);
 		onInputChange?.("");
-		if (!isControlledKey) setInternalSelectedKey(null);
+		setSelectedKey(null);
 		externalOnSelectionChange?.(null);
 		if (isPopoverOpen) setIsPopoverOpen(false);
 		inputRef.current?.focus();
 		onClear?.();
 	});
-	const { keyboardProps } = useComboBoxKeyboard({
-		isPopoverOpen,
-		listStateRef,
-		hasResults,
-		allowsCustomValue,
-		effectiveInputValue,
-		isClearable,
-		onSelectionChange: handleSelectionChange,
-		onClearValue: clearValue,
-		onOpenPopover: () => setIsPopoverOpen(true),
-		onClosePopover: () => setIsPopoverOpen(false),
-		inputRef,
-		setIsFilterActive,
-		onVirtualFocus: setActiveOptionKey,
-		onKeyDown
-	});
+	let t40;
+	if ($[127] !== setIsPopoverOpen) {
+		t40 = () => setIsPopoverOpen(false);
+		$[127] = setIsPopoverOpen;
+		$[128] = t40;
+	} else t40 = $[128];
+	const t41 = inputRef;
+	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 = {
+			isListShown: shouldShowPopover,
+			isReadOnly,
+			listStateRef,
+			hasResults,
+			allowsCustomValue,
+			effectiveInputValue,
+			selectedKey: effectiveSelectedKey,
+			selectedLabel,
+			isClearable,
+			onSelectionChange: handleSelectionChange,
+			onClearValue: clearValue,
+			onOpenList: openList,
+			onCloseList: t40,
+			inputRef: t41,
+			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);
 	if (icon) {
-		icon = /* @__PURE__ */ jsx("div", {
-			"data-element": "InputIcon",
-			children: icon
-		});
+		let t43;
+		if ($[145] !== icon) {
+			t43 = /* @__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;
 	}
-	let mods = useMemo(() => ({
-		...getValidationMods({
+	let t43;
+	if ($[147] !== isInvalid || $[148] !== isValid) {
+		t43 = getValidationMods({
 			isInvalid,
 			isValid
-		}),
-		disabled: isDisabled,
-		hovered: false,
-		focused: isFocused,
-		loading: isLoading,
-		prefix: !!prefix,
-		suffix: true,
-		clearable: showClearButton
-	}), [
-		isInvalid,
-		isValid,
-		isDisabled,
-		isFocused,
-		isLoading,
-		prefix,
-		showClearButton
-	]);
-	const comboBoxWidth = wrapperRef?.current?.offsetWidth;
-	const shouldShowPopover = Boolean(isPopoverOpen && hasResults);
-	useEffect(() => {
-		if (isPopoverOpen && !hasResults) setIsPopoverOpen(false);
-	}, [isPopoverOpen, hasResults]);
-	const ensureInitialFocus = useCallback(() => {
-		if (!shouldShowPopover) return;
-		const listState = listStateRef.current;
-		if (!listState) return;
-		const { selectionManager, collection, disabledKeys, lastFocusSourceRef } = listState;
-		if (!selectionManager || !collection) return;
-		const collectFirstKey = () => {
-			for (const node_1 of collection) if (node_1.type === "item") {
-				if (!disabledKeys?.has(node_1.key)) return node_1.key;
-			} else if (node_1.childNodes) {
-				for (const child_0 of node_1.childNodes) if (child_0.type === "item" && !disabledKeys?.has(child_0.key)) return child_0.key;
-			}
-			return null;
-		};
-		if (lastFocusSourceRef) lastFocusSourceRef.current = "keyboard";
-		const currentFocusedKey = selectionManager.focusedKey;
-		let needsRefocus = false;
-		if (currentFocusedKey == null) needsRefocus = true;
-		else if (!(collection.getItem(currentFocusedKey) != null)) needsRefocus = true;
-		if (!needsRefocus) setActiveOptionKey(currentFocusedKey);
-		else {
-			let keyToFocus = null;
-			if (effectiveSelectedKey != null && collection.getItem(effectiveSelectedKey) != null) keyToFocus = effectiveSelectedKey;
-			else keyToFocus = collectFirstKey();
-			if (keyToFocus != null) {
-				selectionManager.setFocusedKey(keyToFocus);
-				setActiveOptionKey(keyToFocus);
-			}
-		}
-	}, [
-		shouldShowPopover,
-		effectiveSelectedKey,
-		setActiveOptionKey
-	]);
-	useLayoutEffect$1(() => {
-		if (!shouldShowPopover) return;
-		focusInitAttemptsRef.current = 0;
-		const tick = () => {
+		});
+		$[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,
+			disabled: isDisabled,
+			hovered: false,
+			focused: isFocused,
+			loading: isLoading,
+			prefix: t44,
+			suffix: true,
+			clearable: showClearButton
+		};
+		$[150] = isDisabled;
+		$[151] = isFocused;
+		$[152] = isLoading;
+		$[153] = showClearButton;
+		$[154] = t43;
+		$[155] = t44;
+		$[156] = t45;
+	} else t45 = $[156];
+	const mods = t45;
+	const [comboBoxWidth, setComboBoxWidth] = useState();
+	let t46;
+	let t47;
+	if ($[157] !== hasResults || $[158] !== isPopoverOpen || $[159] !== setIsPopoverOpen) {
+		t46 = () => {
+			if (isPopoverOpen && !hasResults) setIsPopoverOpen(false);
+		};
+		t47 = [
+			isPopoverOpen,
+			hasResults,
+			setIsPopoverOpen
+		];
+		$[157] = hasResults;
+		$[158] = isPopoverOpen;
+		$[159] = setIsPopoverOpen;
+		$[160] = t46;
+		$[161] = t47;
+	} else {
+		t46 = $[160];
+		t47 = $[161];
+	}
+	useEffect(t46, t47);
+	let t48;
+	if ($[162] !== effectiveSelectedKey || $[163] !== setActiveOptionKey || $[164] !== shouldShowPopover || $[165] !== wrapperRef) {
+		t48 = () => {
 			if (!shouldShowPopover) return;
-			ensureInitialFocus();
-			focusInitAttemptsRef.current += 1;
-			if (focusInitAttemptsRef.current < 8 && listStateRef.current?.selectionManager?.focusedKey == null) requestAnimationFrame(tick);
-		};
-		requestAnimationFrame(() => requestAnimationFrame(tick));
-	}, [shouldShowPopover, ensureInitialFocus]);
-	const comboBoxField = /* @__PURE__ */ jsxs(ComboBoxWrapperElement, {
-		ref: wrapperRef,
-		mods,
-		styles,
-		style: { zIndex: isFocused ? 1 : "initial" },
-		"data-size": size,
-		...compositeFocusProps,
-		children: [
-			prefix ? /* @__PURE__ */ jsx("div", {
-				"data-element": "Prefix",
-				children: prefix
-			}) : null,
-			/* @__PURE__ */ jsx(ComboBoxInput, {
-				qa: qa || "ComboBox",
-				inputRef,
-				id,
-				value: effectiveInputValue,
-				placeholder,
-				isDisabled,
-				isReadOnly,
-				isRequired,
-				autoFocus,
-				autoComplete,
-				size,
-				mods,
-				inputStyles,
-				keyboardProps,
-				focusProps: {
-					...focusProps,
-					onBlur: handleInputBlur
-				},
-				isPopoverOpen,
-				hasResults,
-				comboBoxId,
-				activeDescendant: shouldShowPopover && activeOptionKey != null ? getListBoxOptionId(`ComboBoxListBox-${comboBoxId}`, activeOptionKey) : void 0,
-				onChange: handleInputChange,
-				onFocus: handleInputFocus,
-				ariaProps: {
-					"aria-label": props["aria-label"],
-					"aria-labelledby": props["aria-labelledby"],
-					"aria-describedby": props["aria-describedby"]
-				},
-				isInvalid
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				"data-element": "Suffix",
-				children: [
-					suffixPosition === "before" ? suffix : null,
-					isLoading ? /* @__PURE__ */ jsx(LoadingIcon, { "data-element": "InputIcon" }) : validationIcon,
-					suffixPosition === "after" ? suffix : null,
-					showClearButton && /* @__PURE__ */ jsx(_CollectionItem.Action, {
-						icon: /* @__PURE__ */ jsx(CloseIcon, {}),
-						size,
-						qa: "ComboBoxClearButton",
-						"data-no-trigger": hideTrigger ? "" : void 0,
-						"data-popover-dismiss": "",
-						"aria-label": t("comboBox.clearValue", "Clear value"),
-						onPress: clearValue
-					}),
-					!hideTrigger ? /* @__PURE__ */ jsx(_CollectionItem.Action, {
-						ref: triggerRef,
-						"data-popover-trigger": true,
-						icon: /* @__PURE__ */ jsx(DirectionIcon, { to: isPopoverOpen ? "up" : "down" }),
-						qa: "ComboBoxTrigger",
-						mods: {
-							pressed: isPopoverOpen,
-							disabled: isDisabled,
-							loading: isLoading
-						},
-						"data-size": size,
-						isDisabled,
-						styles: triggerStyles,
-						"aria-expanded": isPopoverOpen,
-						"aria-haspopup": "listbox",
-						"aria-label": t("comboBox.showOptions", "Show options"),
-						onPress: () => {
-							if (!isDisabled) {
-								const willOpen = !isPopoverOpen;
-								setIsPopoverOpen(willOpen);
-								if (willOpen) {
-									inputRef.current?.focus();
-									if (!hasResults) setIsFilterActive(false);
-								}
-							}
-						}
-					}) : null
-				]
-			}),
-			/* @__PURE__ */ jsx(ListBoxPopover, {
-				isOpen: shouldShowPopover,
-				triggerRef: wrapperRef,
-				popoverRef,
-				listBoxRef,
-				direction,
-				shouldFlip,
-				overlayOffset,
-				containerPadding,
-				comboBoxWidth,
-				listBoxId: `ComboBoxListBox-${comboBoxId}`,
-				overlayStyles,
-				listBoxStyles,
-				optionStyles,
-				sectionStyles,
-				headingStyles,
-				listGap,
-				selectedKey: effectiveSelectedKey,
-				isDisabled,
-				disabledKeys: props.disabledKeys,
-				items: sortedItems,
-				listStateRef,
-				label,
-				ariaLabel: props["aria-label"],
-				compositeFocusProps,
-				filter: filterFn,
-				size,
-				onSelectionChange: handleSelectionChange,
-				onClose: () => setIsPopoverOpen(false),
-				children
-			})
-		]
-	});
-	const { children: _, ...propsWithoutChildren } = props;
-	return wrapWithField(comboBoxField, ref, propsWithoutChildren);
+			setComboBoxWidth(wrapperRef.current?.offsetWidth);
+			let attempts = 0;
+			let frame = 0;
+			const tick = () => {
+				const key_1 = highlightOption(listStateRef.current, effectiveSelectedKey);
+				if (key_1 != null) setActiveOptionKey(key_1);
+				attempts = attempts + 1;
+				if (key_1 == null && attempts < 8) frame = requestAnimationFrame(tick);
+			};
+			frame = requestAnimationFrame(() => {
+				frame = requestAnimationFrame(tick);
+			});
+			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 = [
+			shouldShowPopover,
+			effectiveSelectedKey,
+			effectiveInputValue,
+			wrapperRef
+		];
+		$[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;
+	const t51 = isFocused ? 1 : "initial";
+	let t52;
+	if ($[177] !== t51) {
+		t52 = { zIndex: t51 };
+		$[177] = t51;
+		$[178] = t52;
+	} else t52 = $[178];
+	let t53;
+	if ($[179] !== prefix) {
+		t53 = prefix ? /* @__PURE__ */ jsx("div", {
+			"data-element": "Prefix",
+			children: prefix
+		}) : null;
+		$[179] = prefix;
+		$[180] = t53;
+	} else t53 = $[180];
+	const t54 = qa || "ComboBox";
+	let t55;
+	if ($[181] !== focusProps || $[182] !== handleInputBlur) {
+		t55 = {
+			...focusProps,
+			onBlur: handleInputBlur
+		};
+		$[181] = focusProps;
+		$[182] = handleInputBlur;
+		$[183] = t55;
+	} else t55 = $[183];
+	let t56;
+	if ($[184] === Symbol.for("react.memo_cache_sentinel")) {
+		t56 = () => {
+			pressStartedOnInputRef.current = true;
+		};
+		$[184] = t56;
+	} else t56 = $[184];
+	const t57 = props["aria-label"];
+	const t58 = props["aria-labelledby"];
+	const t59 = props["aria-describedby"];
+	let t60;
+	if ($[185] !== t57 || $[186] !== t58 || $[187] !== t59) {
+		t60 = {
+			"aria-label": t57,
+			"aria-labelledby": t58,
+			"aria-describedby": t59
+		};
+		$[185] = t57;
+		$[186] = t58;
+		$[187] = t59;
+		$[188] = t60;
+	} else t60 = $[188];
+	let t61;
+	if ($[189] !== activeDescendant || $[190] !== autoComplete || $[191] !== autoFocus || $[192] !== comboBoxId || $[193] !== effectiveInputValue || $[194] !== handleInputChange || $[195] !== handleInputClick || $[196] !== handleInputFocus || $[197] !== id || $[198] !== inputRef || $[199] !== inputStyles || $[200] !== isDisabled || $[201] !== isInvalid || $[202] !== isReadOnly || $[203] !== isRequired || $[204] !== keyboardProps || $[205] !== mods || $[206] !== placeholder || $[207] !== shouldShowPopover || $[208] !== size || $[209] !== t54 || $[210] !== t55 || $[211] !== t60) {
+		t61 = /* @__PURE__ */ jsx(ComboBoxInput, {
+			qa: t54,
+			inputRef,
+			id,
+			value: effectiveInputValue,
+			placeholder,
+			isDisabled,
+			isReadOnly,
+			isRequired,
+			autoFocus,
+			autoComplete,
+			size,
+			mods,
+			inputStyles,
+			keyboardProps,
+			focusProps: t55,
+			isListShown: shouldShowPopover,
+			comboBoxId,
+			activeDescendant,
+			onChange: handleInputChange,
+			onFocus: handleInputFocus,
+			onPointerDown: t56,
+			onClick: handleInputClick,
+			ariaProps: t60,
+			isInvalid
+		});
+		$[189] = activeDescendant;
+		$[190] = autoComplete;
+		$[191] = autoFocus;
+		$[192] = comboBoxId;
+		$[193] = effectiveInputValue;
+		$[194] = handleInputChange;
+		$[195] = handleInputClick;
+		$[196] = handleInputFocus;
+		$[197] = id;
+		$[198] = inputRef;
+		$[199] = inputStyles;
+		$[200] = isDisabled;
+		$[201] = isInvalid;
+		$[202] = isReadOnly;
+		$[203] = isRequired;
+		$[204] = keyboardProps;
+		$[205] = mods;
+		$[206] = placeholder;
+		$[207] = shouldShowPopover;
+		$[208] = size;
+		$[209] = t54;
+		$[210] = t55;
+		$[211] = t60;
+		$[212] = t61;
+	} else t61 = $[212];
+	const t62 = suffixPosition === "before" ? suffix : null;
+	let t63;
+	if ($[213] !== isLoading || $[214] !== validationIcon) {
+		t63 = isLoading ? /* @__PURE__ */ jsx(LoadingIcon, { "data-element": "InputIcon" }) : validationIcon;
+		$[213] = isLoading;
+		$[214] = validationIcon;
+		$[215] = t63;
+	} else t63 = $[215];
+	const t64 = suffixPosition === "after" ? suffix : null;
+	let t65;
+	if ($[216] !== clearValue || $[217] !== hideTrigger || $[218] !== showClearButton || $[219] !== size || $[220] !== t) {
+		t65 = showClearButton && /* @__PURE__ */ jsx(_CollectionItem.Action, {
+			excludeFromTabOrder: true,
+			icon: /* @__PURE__ */ jsx(CloseIcon, {}),
+			size,
+			qa: "ComboBoxClearButton",
+			"data-no-trigger": hideTrigger ? "" : void 0,
+			"data-popover-dismiss": "",
+			"aria-label": t("comboBox.clearValue", "Clear value"),
+			onPress: clearValue
+		});
+		$[216] = clearValue;
+		$[217] = hideTrigger;
+		$[218] = showClearButton;
+		$[219] = size;
+		$[220] = t;
+		$[221] = t65;
+	} else t65 = $[221];
+	let t66;
+	if ($[222] !== hideTrigger || $[223] !== isDisabled || $[224] !== isLoading || $[225] !== shouldShowPopover || $[226] !== size || $[227] !== t || $[228] !== toggleList || $[229] !== triggerRef || $[230] !== triggerStyles) {
+		t66 = !hideTrigger ? /* @__PURE__ */ jsx(_CollectionItem.Action, {
+			ref: triggerRef,
+			excludeFromTabOrder: true,
+			"data-popover-trigger": true,
+			icon: /* @__PURE__ */ jsx(DirectionIcon, { to: shouldShowPopover ? "up" : "down" }),
+			qa: "ComboBoxTrigger",
+			mods: {
+				pressed: shouldShowPopover,
+				disabled: isDisabled,
+				loading: isLoading
+			},
+			"data-size": size,
+			isDisabled,
+			styles: triggerStyles,
+			"aria-expanded": shouldShowPopover,
+			"aria-haspopup": "listbox",
+			"aria-label": t("comboBox.showOptions", "Show options"),
+			onPress: toggleList
+		}) : null;
+		$[222] = hideTrigger;
+		$[223] = isDisabled;
+		$[224] = isLoading;
+		$[225] = shouldShowPopover;
+		$[226] = size;
+		$[227] = t;
+		$[228] = toggleList;
+		$[229] = triggerRef;
+		$[230] = triggerStyles;
+		$[231] = t66;
+	} else t66 = $[231];
+	let t67;
+	if ($[232] !== t62 || $[233] !== t63 || $[234] !== t64 || $[235] !== t65 || $[236] !== t66) {
+		t67 = /* @__PURE__ */ jsxs("div", {
+			"data-element": "Suffix",
+			children: [
+				t62,
+				t63,
+				t64,
+				t65,
+				t66
+			]
+		});
+		$[232] = t62;
+		$[233] = t63;
+		$[234] = t64;
+		$[235] = t65;
+		$[236] = t66;
+		$[237] = t67;
+	} else t67 = $[237];
+	const t68 = wrapperRef;
+	const t69 = props["aria-label"];
+	let t70;
+	if ($[238] !== setIsPopoverOpen) {
+		t70 = () => setIsPopoverOpen(false);
+		$[238] = setIsPopoverOpen;
+		$[239] = t70;
+	} else t70 = $[239];
+	let t71;
+	if ($[240] !== children || $[241] !== comboBoxWidth || $[242] !== compositeFocusProps || $[243] !== containerPadding || $[244] !== direction || $[245] !== effectiveSelectedKey || $[246] !== filterFn || $[247] !== handleSelectionChange || $[248] !== headingStyles || $[249] !== isDisabled || $[250] !== label || $[251] !== listBoxRef || $[252] !== listBoxStyles || $[253] !== listGap || $[254] !== optionStyles || $[255] !== overlayOffset || $[256] !== overlayStyles || $[257] !== popoverRef || $[258] !== props.disabledKeys || $[259] !== sectionStyles || $[260] !== shouldFlip || $[261] !== shouldShowPopover || $[262] !== size || $[263] !== sortedItems || $[264] !== t68 || $[265] !== t69 || $[266] !== t70) {
+		t71 = /* @__PURE__ */ jsx(ListBoxPopover, {
+			isOpen: shouldShowPopover,
+			triggerRef: t68,
+			popoverRef,
+			listBoxRef,
+			direction,
+			shouldFlip,
+			overlayOffset,
+			containerPadding,
+			comboBoxWidth,
+			listBoxId: `ComboBoxListBox-${comboBoxId}`,
+			overlayStyles,
+			listBoxStyles,
+			optionStyles,
+			sectionStyles,
+			headingStyles,
+			listGap,
+			selectedKey: effectiveSelectedKey,
+			shouldCloseOnTriggerInteraction: false,
+			isDisabled,
+			disabledKeys: props.disabledKeys,
+			items: sortedItems,
+			listStateRef,
+			label,
+			ariaLabel: t69,
+			compositeFocusProps,
+			filter: filterFn,
+			size,
+			onSelectionChange: handleSelectionChange,
+			onClose: t70,
+			children
+		});
+		$[240] = children;
+		$[241] = comboBoxWidth;
+		$[242] = compositeFocusProps;
+		$[243] = containerPadding;
+		$[244] = direction;
+		$[245] = effectiveSelectedKey;
+		$[246] = filterFn;
+		$[247] = handleSelectionChange;
+		$[248] = headingStyles;
+		$[249] = isDisabled;
+		$[250] = label;
+		$[251] = listBoxRef;
+		$[252] = listBoxStyles;
+		$[253] = listGap;
+		$[254] = optionStyles;
+		$[255] = overlayOffset;
+		$[256] = overlayStyles;
+		$[257] = popoverRef;
+		$[258] = props.disabledKeys;
+		$[259] = sectionStyles;
+		$[260] = shouldFlip;
+		$[261] = shouldShowPopover;
+		$[262] = size;
+		$[263] = sortedItems;
+		$[264] = t68;
+		$[265] = t69;
+		$[266] = t70;
+		$[267] = t71;
+	} else t71 = $[267];
+	let t72;
+	if ($[268] !== compositeFocusProps || $[269] !== mods || $[270] !== size || $[271] !== styles || $[272] !== t52 || $[273] !== t53 || $[274] !== t61 || $[275] !== t67 || $[276] !== t71 || $[277] !== wrapperRef) {
+		t72 = /* @__PURE__ */ jsxs(ComboBoxWrapperElement, {
+			ref: wrapperRef,
+			mods,
+			styles,
+			style: t52,
+			"data-size": size,
+			...compositeFocusProps,
+			children: [
+				t53,
+				t61,
+				t67,
+				t71
+			]
+		});
+		$[268] = compositeFocusProps;
+		$[269] = mods;
+		$[270] = size;
+		$[271] = styles;
+		$[272] = t52;
+		$[273] = t53;
+		$[274] = t61;
+		$[275] = t67;
+		$[276] = t71;
+		$[277] = wrapperRef;
+		$[278] = t72;
+	} else t72 = $[278];
+	const comboBoxField = t72;
+	let t73;
+	if ($[279] !== comboBoxField || $[280] !== props || $[281] !== ref) {
+		const { children: _, ...propsWithoutChildren } = props;
+		t73 = wrapWithField(comboBoxField, ref, propsWithoutChildren);
+		$[279] = comboBoxField;
+		$[280] = props;
+		$[281] = ref;
+		$[282] = t73;
+	} else t73 = $[282];
+	return t73;
 });
 ComboBox.Item = _CollectionItem;
 ComboBox.Section = Section;
@@ -874,6 +1341,15 @@ Object.defineProperty(ComboBox, "cubeInputType", {
 	enumerable: false,
 	configurable: false
 });
+function _temp2(t0) {
+	const { value, onChange } = t0;
+	return {
+		selectedKey: value ?? null,
+		onSelectionChange(val) {
+			onChange(val);
+		}
+	};
+}
 
 //#endregion
 export { ComboBox };