@cube-dev/ui-kit 0.0.0-canary-a5b5501 → 0.0.0-canary-162cdb3

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a5b5501 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-162cdb3 | 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";
@@ -141,105 +141,157 @@ function _temp() {
 	return true;
 }
 function useComboBoxKeyboard(t0) {
-	const $ = c(17);
+	const $ = c(42);
 	const { isPopoverOpen, listStateRef, hasResults, allowsCustomValue, effectiveInputValue, isClearable, onSelectionChange, onClearValue, onOpenPopover, onClosePopover, inputRef, setIsFilterActive, onVirtualFocus, onKeyDown } = t0;
 	let t1;
-	if ($[0] !== allowsCustomValue || $[1] !== effectiveInputValue || $[2] !== hasResults || $[3] !== inputRef || $[4] !== isClearable || $[5] !== isPopoverOpen || $[6] !== listStateRef || $[7] !== onClearValue || $[8] !== onClosePopover || $[9] !== onKeyDown || $[10] !== onOpenPopover || $[11] !== onSelectionChange || $[12] !== onVirtualFocus || $[13] !== setIsFilterActive) {
-		t1 = { onKeyDown: (e) => {
-			onKeyDown?.(e);
-			if (e.isDefaultPrevented()) return;
-			if (e.key === "ArrowDown" || e.key === "ArrowUp") {
-				e.preventDefault();
-				if (!isPopoverOpen) {
-					if (!hasResults) setIsFilterActive(false);
-					onOpenPopover();
-					return;
-				}
-				const listState = listStateRef.current;
-				if (!listState) return;
-				const nextKey = getNextVisibleKey(listState, e.key === "ArrowDown" ? 1 : -1);
-				if (nextKey != null) {
-					markKeyboardFocus(listState);
-					listState.selectionManager.setFocusedKey(nextKey);
-					onVirtualFocus(nextKey);
-				}
-			} else if (e.key === "Enter") {
-				if (isPopoverOpen) {
-					const listState_0 = listStateRef.current;
-					if (listState_0) {
-						const keyToSelect = listState_0.selectionManager.focusedKey;
-						if (keyToSelect != null) {
-							e.preventDefault();
-							listState_0.selectionManager.select(keyToSelect, e);
-							onClosePopover();
-							inputRef.current?.focus();
-							return;
-						}
-					}
-				}
-				if (!hasResults) {
-					if (allowsCustomValue) {
-						const value = effectiveInputValue.trim();
-						onSelectionChange(value ?? null);
-						if (isPopoverOpen || !value) e.preventDefault();
-					} else {
-						e.preventDefault();
-						onSelectionChange(null);
-					}
-					return;
-				}
-				if ((effectiveInputValue || "").trim() === "") {
-					e.preventDefault();
-					onSelectionChange(null);
-					return;
-				}
-			} else if (e.key === "Escape") {
-				if (isPopoverOpen) {
-					e.preventDefault();
-					onClosePopover();
-					inputRef.current?.focus();
-				} else if (effectiveInputValue && isClearable) {
-					e.preventDefault();
-					onClearValue();
-				}
-			} else if (e.key === "Home" || e.key === "End") {
-				if (isPopoverOpen) {
-					e.preventDefault();
-					const listState_1 = listStateRef.current;
-					if (!listState_1) return;
-					const targetKey = getEdgeVisibleKey(listState_1, e.key === "Home" ? "first" : "last");
-					if (targetKey != null) {
-						markKeyboardFocus(listState_1);
-						listState_1.selectionManager.setFocusedKey(targetKey);
-						onVirtualFocus(targetKey);
-					}
-				}
+	if ($[0] !== onVirtualFocus) {
+		t1 = (listState, key) => {
+			if (key == null) return;
+			markKeyboardFocus(listState);
+			listState.selectionManager.setFocusedKey(key);
+			onVirtualFocus(key);
+		};
+		$[0] = onVirtualFocus;
+		$[1] = t1;
+	} else t1 = $[1];
+	const focusOption = t1;
+	let t2;
+	if ($[2] !== focusOption || $[3] !== hasResults || $[4] !== isPopoverOpen || $[5] !== listStateRef || $[6] !== onOpenPopover || $[7] !== setIsFilterActive) {
+		t2 = (e) => {
+			e.preventDefault();
+			if (!isPopoverOpen) {
+				if (!hasResults) setIsFilterActive(false);
+				onOpenPopover();
+				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];
+	const handleArrowKey = t2;
+	let t3;
+	if ($[9] !== allowsCustomValue || $[10] !== effectiveInputValue || $[11] !== isPopoverOpen || $[12] !== onSelectionChange) {
+		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;
+	let t4;
+	if ($[14] !== commitWithoutResults || $[15] !== effectiveInputValue || $[16] !== hasResults || $[17] !== inputRef || $[18] !== isPopoverOpen || $[19] !== listStateRef || $[20] !== onClosePopover || $[21] !== onSelectionChange) {
+		t4 = (e_1) => {
+			const listState_1 = isPopoverOpen ? listStateRef.current : null;
+			const focusedKey = listState_1?.selectionManager.focusedKey;
+			if (focusedKey != null) {
+				e_1.preventDefault();
+				listState_1.selectionManager.select(focusedKey, e_1);
+				onClosePopover();
+				inputRef.current?.focus();
+			} else if (!hasResults) commitWithoutResults(e_1);
+			else if ((effectiveInputValue || "").trim() === "") {
+				e_1.preventDefault();
+				onSelectionChange(null);
+			}
+		};
+		$[14] = commitWithoutResults;
+		$[15] = effectiveInputValue;
+		$[16] = hasResults;
+		$[17] = inputRef;
+		$[18] = isPopoverOpen;
+		$[19] = listStateRef;
+		$[20] = onClosePopover;
+		$[21] = onSelectionChange;
+		$[22] = t4;
+	} else t4 = $[22];
+	const handleEnterKey = t4;
+	let t5;
+	if ($[23] !== effectiveInputValue || $[24] !== inputRef || $[25] !== isClearable || $[26] !== isPopoverOpen || $[27] !== onClearValue || $[28] !== onClosePopover) {
+		t5 = (e_2) => {
+			if (isPopoverOpen) {
+				e_2.preventDefault();
+				onClosePopover();
+				inputRef.current?.focus();
+			} else if (effectiveInputValue && isClearable) {
+				e_2.preventDefault();
+				onClearValue();
+			}
+		};
+		$[23] = effectiveInputValue;
+		$[24] = inputRef;
+		$[25] = isClearable;
+		$[26] = isPopoverOpen;
+		$[27] = onClearValue;
+		$[28] = onClosePopover;
+		$[29] = t5;
+	} else t5 = $[29];
+	const handleEscapeKey = t5;
+	let t6;
+	if ($[30] !== focusOption || $[31] !== isPopoverOpen || $[32] !== listStateRef) {
+		t6 = (e_3) => {
+			if (!isPopoverOpen) 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];
+	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) {
+				case "ArrowDown":
+				case "ArrowUp":
+					handleArrowKey(e_4);
+					break bb97;
+				case "Enter":
+					handleEnterKey(e_4);
+					break bb97;
+				case "Escape":
+					handleEscapeKey(e_4);
+					break bb97;
+				case "Home":
+				case "End": handleEdgeKey(e_4);
 			}
 		} };
-		$[0] = allowsCustomValue;
-		$[1] = effectiveInputValue;
-		$[2] = hasResults;
-		$[3] = inputRef;
-		$[4] = isClearable;
-		$[5] = isPopoverOpen;
-		$[6] = listStateRef;
-		$[7] = onClearValue;
-		$[8] = onClosePopover;
-		$[9] = onKeyDown;
-		$[10] = onOpenPopover;
-		$[11] = onSelectionChange;
-		$[12] = onVirtualFocus;
-		$[13] = setIsFilterActive;
-		$[14] = t1;
-	} else t1 = $[14];
-	const { keyboardProps } = useKeyboard(t1);
-	let t2;
-	if ($[15] !== keyboardProps) {
-		t2 = { keyboardProps };
-		$[15] = keyboardProps;
-		$[16] = t2;
-	} else t2 = $[16];
-	return t2;
+		$[34] = handleArrowKey;
+		$[35] = handleEdgeKey;
+		$[36] = handleEnterKey;
+		$[37] = handleEscapeKey;
+		$[38] = onKeyDown;
+		$[39] = t7;
+	} else t7 = $[39];
+	const { keyboardProps } = useKeyboard(t7);
+	let t8;
+	if ($[40] !== keyboardProps) {
+		t8 = { keyboardProps };
+		$[40] = keyboardProps;
+		$[41] = t8;
+	} else t8 = $[41];
+	return t8;
 }
 const ComboBoxInput = forwardRef(function ComboBoxInput(t0, ref) {
 	const $ = c(22);
@@ -434,60 +486,42 @@ const ComboBox = forwardRef(function ComboBox(props, ref) {
 		filterFn,
 		localCollectionState.collection
 	]);
+	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) {
-			if (shouldCommitOnBlur && effectiveInputValue && effectiveSelectedKey == null) {
-				externalOnSelectionChange?.(effectiveInputValue);
-				if (!isControlledKey) setInternalSelectedKey(effectiveInputValue);
-				onBlur?.();
-				setIsFilterActive(false);
-				return;
-			}
-			if (!String(effectiveInputValue).trim()) {
-				externalOnSelectionChange?.(null);
-				if (!isControlledKey) setInternalSelectedKey(null);
-				if (!isControlledInput) setInternalInputValue("");
-				onInputChange?.("");
-				onBlur?.();
-				setIsFilterActive(false);
-				return;
-			}
-		}
-		if (!allowsCustomValue) {
-			const { isInputValid, singleMatchKey } = checkInputValidity();
-			if (isInputValid && singleMatchKey != null && singleMatchKey !== effectiveSelectedKey) {
-				const label_0 = getItemLabel(singleMatchKey);
-				if (!isControlledKey) setInternalSelectedKey(singleMatchKey);
-				if (!isControlledInput) setInternalInputValue(label_0);
-				onInputChange?.(label_0);
-				externalOnSelectionChange?.(singleMatchKey);
-				onBlur?.();
-				setIsFilterActive(false);
-				return;
-			}
-			if (!isInputValid) {
-				const trimmedInput = effectiveInputValue.trim();
-				if (clearOnBlur || !trimmedInput) {
-					externalOnSelectionChange?.(null);
-					if (!isControlledKey) setInternalSelectedKey(null);
-					if (!isControlledInput) setInternalInputValue("");
-					onInputChange?.("");
-					onBlur?.();
-					setIsFilterActive(false);
-					return;
-				}
-				const nextValue = effectiveSelectedKey != null ? getItemLabel(effectiveSelectedKey) : "";
-				if (!isControlledInput) setInternalInputValue(nextValue);
-				onInputChange?.(nextValue);
-				onBlur?.();
-				setIsFilterActive(false);
-				return;
-			}
-		}
-		const nextValue_0 = effectiveSelectedKey != null ? getItemLabel(effectiveSelectedKey) : "";
-		if (!isControlledInput) setInternalInputValue(nextValue_0);
-		onInputChange?.(nextValue_0);
+		if (allowsCustomValue) settleCustomValueOnBlur();
+		else settleOptionOnBlur();
 		onBlur?.();
 		setIsFilterActive(false);
 	});
@@ -505,15 +539,15 @@ const ComboBox = forwardRef(function ComboBox(props, ref) {
 	const listStateRef = useRef(null);
 	const focusInitAttemptsRef = useRef(0);
 	const [activeOptionKey, setActiveOptionKey] = useState(null);
-	const getItemLabel = useCallback((key_1) => {
-		return (localCollectionState?.collection?.getItem(key_1))?.textValue || String(key_1);
+	const getItemLabel = useCallback((key_2) => {
+		return (localCollectionState?.collection?.getItem(key_2))?.textValue || String(key_2);
 	}, [localCollectionState?.collection]);
 	const handleSelectionChange = useEvent((selection) => {
-		const key_2 = Array.isArray(selection) ? selection[0] : selection;
-		if (!isControlledKey) setInternalSelectedKey(key_2 ?? null);
-		if (key_2 != null) {
+		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_2);
+			const label_1 = getItemLabel(key_3);
 			if (!isControlledInput) setInternalInputValue(label_1);
 			onInputChange?.(label_1);
 		} else {
@@ -521,7 +555,7 @@ const ComboBox = forwardRef(function ComboBox(props, ref) {
 			onInputChange?.("");
 			setIsFilterActive(false);
 		}
-		externalOnSelectionChange?.(key_2);
+		externalOnSelectionChange?.(key_3);
 		setIsPopoverOpen(false);
 		setTimeout(() => {
 			inputRef.current?.focus();
@@ -530,16 +564,16 @@ const ComboBox = forwardRef(function ComboBox(props, ref) {
 	const lastSyncedSelectedKey = useRef(void 0);
 	const selectionClearedByTyping = useRef(false);
 	const handleInputChange = useEvent((e) => {
-		const value_0 = e.target.value;
-		if (!isControlledInput) setInternalInputValue(value_0);
-		onInputChange?.(value_0);
-		setIsFilterActive(value_0.trim().length > 0);
+		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_0 && !isPopoverOpen) setIsPopoverOpen(true);
+		if (popoverTrigger !== "manual" && value_1 && !isPopoverOpen) setIsPopoverOpen(true);
 	});
 	const [hasInitialized, setHasInitialized] = useState(false);
 	useEffect(() => {