@cube-dev/ui-kit 0.182.0 → 0.183.0

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | 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";
@@ -19,6 +19,7 @@ import { DEFAULT_INPUT_STYLES, INPUT_WRAPPER_STYLES } from "../TextInput/TextInp
 import { ListBoxPopover } from "../ListBoxPopover/ListBoxPopover.js";
 import { useCompositeFocus } from "../ListBoxPopover/useCompositeFocus.js";
 import { filterCollectionNodes, getEdgeVisibleKey, getNextVisibleKey, markKeyboardFocus } from "../ListBoxPopover/listNavigation.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 { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -39,7 +40,9 @@ const PROP_STYLES = [
 	...OUTER_STYLES,
 	...COLOR_STYLES
 ];
-function useComboBoxState({ selectedKey, defaultSelectedKey, inputValue, defaultInputValue, comboBoxId, triggerRef, popoverRef }) {
+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 isControlledKey = selectedKey !== void 0;
@@ -47,112 +50,191 @@ function useComboBoxState({ selectedKey, defaultSelectedKey, inputValue, default
 	const effectiveSelectedKey = isControlledKey ? selectedKey : internalSelectedKey;
 	const effectiveInputValue = isControlledInput ? inputValue : internalInputValue;
 	const [isPopoverOpen, setIsPopoverOpen] = useState(false);
-	usePopoverSync({
-		menuId: comboBoxId,
-		isOpen: isPopoverOpen,
-		onClose: () => setIsPopoverOpen(false),
-		triggerRef,
-		containerRef: popoverRef
-	});
-	return {
-		effectiveSelectedKey,
-		effectiveInputValue,
-		isPopoverOpen,
-		setIsPopoverOpen,
-		setInternalSelectedKey,
-		setInternalInputValue,
-		isControlledKey,
-		isControlledInput
-	};
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = () => setIsPopoverOpen(false);
+		$[0] = t1;
+	} else t1 = $[0];
+	let t2;
+	if ($[1] !== comboBoxId || $[2] !== isPopoverOpen || $[3] !== popoverRef || $[4] !== triggerRef) {
+		t2 = {
+			menuId: comboBoxId,
+			isOpen: isPopoverOpen,
+			onClose: t1,
+			triggerRef,
+			containerRef: popoverRef
+		};
+		$[1] = comboBoxId;
+		$[2] = isPopoverOpen;
+		$[3] = popoverRef;
+		$[4] = triggerRef;
+		$[5] = t2;
+	} else t2 = $[5];
+	usePopoverSync(t2);
+	let t3;
+	if ($[6] !== effectiveInputValue || $[7] !== effectiveSelectedKey || $[8] !== isControlledInput || $[9] !== isControlledKey || $[10] !== isPopoverOpen) {
+		t3 = {
+			effectiveSelectedKey,
+			effectiveInputValue,
+			isPopoverOpen,
+			setIsPopoverOpen,
+			setInternalSelectedKey,
+			setInternalInputValue,
+			isControlledKey,
+			isControlledInput
+		};
+		$[6] = effectiveInputValue;
+		$[7] = effectiveSelectedKey;
+		$[8] = isControlledInput;
+		$[9] = isControlledKey;
+		$[10] = isPopoverOpen;
+		$[11] = t3;
+	} else t3 = $[11];
+	return t3;
 }
-function useComboBoxFiltering({ effectiveInputValue, filter }) {
+function useComboBoxFiltering(t0) {
+	const $ = c(11);
+	const { effectiveInputValue, filter } = t0;
 	const [isFilterActive, setIsFilterActive] = useState(false);
-	const { contains } = useFilter({ sensitivity: "base" });
-	const textFilterFn = useMemo(() => filter === false ? () => true : filter || contains, [filter, contains]);
-	return {
-		filterFn: useCallback((nodes) => {
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = { sensitivity: "base" };
+		$[0] = t1;
+	} 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;
+	let t3;
+	if ($[4] !== effectiveInputValue || $[5] !== isFilterActive || $[6] !== textFilterFn) {
+		t3 = (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 = {
+			filterFn,
 			isFilterActive,
-			effectiveInputValue,
-			textFilterFn
-		]),
-		isFilterActive,
-		setIsFilterActive
-	};
+			setIsFilterActive
+		};
+		$[8] = filterFn;
+		$[9] = isFilterActive;
+		$[10] = t4;
+	} else t4 = $[10];
+	return t4;
 }
-function useComboBoxKeyboard({ isPopoverOpen, listStateRef, hasResults, allowsCustomValue, effectiveInputValue, isClearable, onSelectionChange, onClearValue, onOpenPopover, onClosePopover, inputRef, setIsFilterActive, onKeyDown }) {
-	const { keyboardProps } = useKeyboard({ onKeyDown: (e) => {
-		onKeyDown?.(e);
-		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);
-			}
-		} else if (e.key === "Enter") {
-			if (isPopoverOpen) {
+function _temp() {
+	return true;
+}
+function useComboBoxKeyboard(t0) {
+	const $ = c(16);
+	const { isPopoverOpen, listStateRef, hasResults, allowsCustomValue, effectiveInputValue, isClearable, onSelectionChange, onClearValue, onOpenPopover, onClosePopover, inputRef, setIsFilterActive, 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] !== setIsFilterActive) {
+		t1 = { onKeyDown: (e) => {
+			onKeyDown?.(e);
+			if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+				e.preventDefault();
+				if (!isPopoverOpen) {
+					if (!hasResults) setIsFilterActive(false);
+					onOpenPopover();
+					return;
+				}
 				const listState = listStateRef.current;
-				if (listState) {
-					const keyToSelect = listState.selectionManager.focusedKey;
-					if (keyToSelect != null) {
+				if (!listState) return;
+				const nextKey = getNextVisibleKey(listState, e.key === "ArrowDown" ? 1 : -1);
+				if (nextKey != null) {
+					markKeyboardFocus(listState);
+					listState.selectionManager.setFocusedKey(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();
-						listState.selectionManager.select(keyToSelect, e);
-						onClosePopover();
-						inputRef.current?.focus();
-						return;
+						onSelectionChange(null);
 					}
+					return;
 				}
-			}
-			if (!hasResults) {
-				if (allowsCustomValue) {
-					const value = effectiveInputValue.trim();
-					onSelectionChange(value ?? null);
-					if (isPopoverOpen || !value) e.preventDefault();
-				} else {
+				if ((effectiveInputValue || "").trim() === "") {
 					e.preventDefault();
 					onSelectionChange(null);
+					return;
 				}
-				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 = listStateRef.current;
-				if (!listState) return;
-				const targetKey = getEdgeVisibleKey(listState, e.key === "Home" ? "first" : "last");
-				if (targetKey != null) {
-					markKeyboardFocus(listState);
-					listState.selectionManager.setFocusedKey(targetKey);
+			} 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);
+					}
 				}
 			}
-		}
-	} });
-	return { keyboardProps };
+		} };
+		$[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] = setIsFilterActive;
+		$[13] = t1;
+	} else t1 = $[13];
+	const { keyboardProps } = useKeyboard(t1);
+	let t2;
+	if ($[14] !== keyboardProps) {
+		t2 = { keyboardProps };
+		$[14] = keyboardProps;
+		$[15] = t2;
+	} else t2 = $[15];
+	return t2;
 }
 const ComboBoxInput = forwardRef(function ComboBoxInput({ qa, inputRef, id, value, placeholder, isDisabled, isReadOnly, isRequired, autoFocus, autoComplete, size, mods, inputStyles, keyboardProps, focusProps, onChange, onFocus, isPopoverOpen, hasResults, comboBoxId, listStateRef }, ref) {
 	return /* @__PURE__ */ jsx(InputElement, {
@@ -223,17 +305,17 @@ const ComboBox = forwardRef(function ComboBox(props, ref) {
 			console.warn("ComboBox: sortSelectedToTop only works with the items prop. Sorting will be skipped when using JSX children.");
 			return items;
 		}
-		const selectedKey = isPopoverOpen ? effectiveSelectedKey : selectionWhenClosed.current;
-		if (!selectedKey) 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);
+			return key != null && String(key) === String(selectedKey_0);
 		});
 		if (!selectedItem) return items;
-		const sorted = [selectedItem, ...itemsArray.filter((item) => {
-			const key = item?.key ?? item?.id;
-			return key == null || String(key) !== String(selectedKey);
+		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;
@@ -247,9 +329,9 @@ const ComboBox = forwardRef(function ComboBox(props, ref) {
 	let 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 });
+		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 {}
@@ -293,7 +375,7 @@ const ComboBox = forwardRef(function ComboBox(props, ref) {
 			textValue: node.textValue || ""
 		});
 		const filteredCount = filteredItems.length;
-		const exactMatch = filteredItems.find((item) => item.textValue.toLowerCase() === effectiveInputValue.trim().toLowerCase());
+		const exactMatch = filteredItems.find((item_2) => item_2.textValue.toLowerCase() === effectiveInputValue.trim().toLowerCase());
 		if (exactMatch) return {
 			isInputValid: true,
 			singleMatchKey: exactMatch.key,
@@ -336,10 +418,10 @@ const ComboBox = forwardRef(function ComboBox(props, ref) {
 		if (!allowsCustomValue) {
 			const { isInputValid, singleMatchKey } = checkInputValidity();
 			if (isInputValid && singleMatchKey != null && singleMatchKey !== effectiveSelectedKey) {
-				const label = getItemLabel(singleMatchKey);
+				const label_0 = getItemLabel(singleMatchKey);
 				if (!isControlledKey) setInternalSelectedKey(singleMatchKey);
-				if (!isControlledInput) setInternalInputValue(label);
-				onInputChange?.(label);
+				if (!isControlledInput) setInternalInputValue(label_0);
+				onInputChange?.(label_0);
 				externalOnSelectionChange?.(singleMatchKey);
 				onBlur?.();
 				setIsFilterActive(false);
@@ -364,9 +446,9 @@ const ComboBox = forwardRef(function ComboBox(props, ref) {
 				return;
 			}
 		}
-		const nextValue = effectiveSelectedKey != null ? getItemLabel(effectiveSelectedKey) : "";
-		if (!isControlledInput) setInternalInputValue(nextValue);
-		onInputChange?.(nextValue);
+		const nextValue_0 = effectiveSelectedKey != null ? getItemLabel(effectiveSelectedKey) : "";
+		if (!isControlledInput) setInternalInputValue(nextValue_0);
+		onInputChange?.(nextValue_0);
 		onBlur?.();
 		setIsFilterActive(false);
 	});
@@ -383,23 +465,23 @@ const ComboBox = forwardRef(function ComboBox(props, ref) {
 	});
 	const listStateRef = useRef(null);
 	const focusInitAttemptsRef = useRef(0);
-	const getItemLabel = useCallback((key) => {
-		return (localCollectionState?.collection?.getItem(key))?.textValue || String(key);
+	const getItemLabel = useCallback((key_1) => {
+		return (localCollectionState?.collection?.getItem(key_1))?.textValue || String(key_1);
 	}, [localCollectionState?.collection]);
 	const handleSelectionChange = useEvent((selection) => {
-		const key = Array.isArray(selection) ? selection[0] : selection;
-		if (!isControlledKey) setInternalSelectedKey(key ?? null);
-		if (key != null) {
+		const key_2 = Array.isArray(selection) ? selection[0] : selection;
+		if (!isControlledKey) setInternalSelectedKey(key_2 ?? null);
+		if (key_2 != null) {
 			setIsFilterActive(false);
-			const label = getItemLabel(key);
-			if (!isControlledInput) setInternalInputValue(label);
-			onInputChange?.(label);
+			const label_1 = getItemLabel(key_2);
+			if (!isControlledInput) setInternalInputValue(label_1);
+			onInputChange?.(label_1);
 		} else {
 			if (!isControlledInput) setInternalInputValue("");
 			onInputChange?.("");
 			setIsFilterActive(false);
 		}
-		externalOnSelectionChange?.(key);
+		externalOnSelectionChange?.(key_2);
 		setIsPopoverOpen(false);
 		setTimeout(() => {
 			inputRef.current?.focus();
@@ -408,16 +490,16 @@ const ComboBox = forwardRef(function ComboBox(props, ref) {
 	const lastSyncedSelectedKey = useRef(void 0);
 	const selectionClearedByTyping = useRef(false);
 	const handleInputChange = useEvent((e) => {
-		const value = e.target.value;
-		if (!isControlledInput) setInternalInputValue(value);
-		onInputChange?.(value);
-		setIsFilterActive(value.trim().length > 0);
+		const value_0 = e.target.value;
+		if (!isControlledInput) setInternalInputValue(value_0);
+		onInputChange?.(value_0);
+		setIsFilterActive(value_0.trim().length > 0);
 		if (allowsCustomValue && effectiveSelectedKey != null) {
 			selectionClearedByTyping.current = true;
 			if (!isControlledKey) setInternalSelectedKey(null);
 			externalOnSelectionChange?.(null);
 		}
-		if (popoverTrigger !== "manual" && value && !isPopoverOpen) setIsPopoverOpen(true);
+		if (popoverTrigger !== "manual" && value_0 && !isPopoverOpen) setIsPopoverOpen(true);
 	});
 	const [hasInitialized, setHasInitialized] = useState(false);
 	useEffect(() => {
@@ -454,22 +536,22 @@ const ComboBox = forwardRef(function ComboBox(props, ref) {
 		effectiveInputValue,
 		getItemLabel
 	]);
-	const handleInputFocus = useEvent((e) => {
-		focusProps.onFocus?.(e);
+	const handleInputFocus = useEvent((e_0) => {
+		focusProps.onFocus?.(e_0);
 		if (popoverTrigger === "focus" && !isPopoverOpen) setIsPopoverOpen(true);
 	});
-	const handleInputBlur = useEvent((e) => {
-		focusProps.onBlur?.(e);
+	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 = filterFn(localCollectionState.collection);
-			return Array.from(filteredNodes).flatMap((node) => {
-				if (node.type === "section" && node.childNodes) return [...node.childNodes];
-				return [node];
+			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;
@@ -543,10 +625,10 @@ const ComboBox = forwardRef(function ComboBox(props, ref) {
 		const { selectionManager, collection, disabledKeys, lastFocusSourceRef } = listState;
 		if (!selectionManager || !collection) return;
 		const collectFirstKey = () => {
-			for (const node of collection) if (node.type === "item") {
-				if (!disabledKeys?.has(node.key)) return node.key;
-			} else if (node.childNodes) {
-				for (const child of node.childNodes) if (child.type === "item" && !disabledKeys?.has(child.key)) return child.key;
+			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;
 		};