@cube-dev/ui-kit 0.0.0-canary-0b79a39 → 0.0.0-canary-c02e70f

package/dist/components/actions/CommandMenu/CommandMenu.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0b79a39 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-c02e70f | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { LoadingIcon } from "../../../icons/LoadingIcon.js";
@@ -10,8 +10,9 @@ import { StyledDivider, StyledFooter, StyledHeader, StyledMenu } from "../Menu/s
 import { MenuSection } from "../Menu/MenuSection.js";
 import { _MenuTrigger } from "../Menu/MenuTrigger.js";
 import { StyledCommandMenu, StyledEmptyState, StyledLoadingWrapper, StyledSearchInput } from "./styled.js";
+import { c } from "react-compiler-runtime";
 import { CONTAINER_STYLES, filterBaseProps } from "@tenphi/tasty";
-import React, { useCallback, useMemo, useRef, useState } from "react";
+import React, { useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useFilter, useMenu } from "react-aria";
 import { Section, useTreeState } from "react-stately";
@@ -19,8 +20,29 @@ import { useObjectRef, useSyncRef } from "@react-aria/utils";
 
 //#region src/components/actions/CommandMenu/CommandMenu.tsx
 function CommandMenu(props, ref) {
+	const $ = c(81);
 	const { t } = useI18n();
-	const { searchPlaceholder = t("commandMenu.searchPlaceholder", "Search commands..."), searchValue: controlledSearchValue, onSearchChange, filter: customFilter, emptyLabel = t("commandMenu.empty", "No commands found"), searchInputStyles, headerStyles, footerStyles, isLoading = false, shouldFilter = true, autoFocus = true, size = "medium", qa, styles, selectedKeys, defaultSelectedKeys, onSelectionChange, header, footer, ...restMenuProps } = props;
+	const { searchPlaceholder: t0, searchValue: controlledSearchValue, onSearchChange, filter: customFilter, emptyLabel: t1, searchInputStyles, headerStyles, footerStyles, isLoading: t2, shouldFilter: t3, autoFocus: t4, size: t5, qa, styles, selectedKeys, defaultSelectedKeys, onSelectionChange, header, footer, ...restMenuProps } = props;
+	let t6;
+	if ($[0] !== t || $[1] !== t0) {
+		t6 = t0 === void 0 ? t("commandMenu.searchPlaceholder", "Search commands...") : t0;
+		$[0] = t;
+		$[1] = t0;
+		$[2] = t6;
+	} else t6 = $[2];
+	const searchPlaceholder = t6;
+	let t7;
+	if ($[3] !== t || $[4] !== t1) {
+		t7 = t1 === void 0 ? t("commandMenu.empty", "No commands found") : t1;
+		$[3] = t;
+		$[4] = t1;
+		$[5] = t7;
+	} else t7 = $[5];
+	const emptyLabel = t7;
+	const isLoading = t2 === void 0 ? false : t2;
+	const shouldFilter = t3 === void 0 ? true : t3;
+	const autoFocus = t4 === void 0 ? true : t4;
+	const size = t5 === void 0 ? "medium" : t5;
 	const domRef = useObjectRef(ref);
 	const searchInputRef = useRef(null);
 	const contextProps = useMenuContext();
@@ -28,91 +50,93 @@ function CommandMenu(props, ref) {
 		selectedKeys: selectedKeys ? new Set(selectedKeys) : void 0,
 		defaultSelectedKeys: defaultSelectedKeys ? new Set(defaultSelectedKeys) : void 0,
 		onSelectionChange: onSelectionChange ? (keys) => {
-			if (keys === "all") onSelectionChange(Array.from(treeState.collection.getKeys()).map((key) => String(key)));
-			else if (keys instanceof Set) onSelectionChange(Array.from(keys).map((key_0) => String(key_0)));
+			if (keys === "all") onSelectionChange(Array.from(treeState.collection.getKeys()).map(_temp));
+			else if (keys instanceof Set) onSelectionChange(Array.from(keys).map(_temp2));
 			else onSelectionChange([]);
 		} : void 0
 	});
 	const [internalSearchValue, setInternalSearchValue] = useState("");
 	const searchValue = controlledSearchValue ?? internalSearchValue;
-	const handleSearchChange = useCallback((value) => {
-		if (controlledSearchValue === void 0) setInternalSearchValue(value);
-		onSearchChange?.(value);
-	}, [controlledSearchValue, onSearchChange]);
-	const { contains } = useFilter({ sensitivity: "base" });
-	useMemo(() => customFilter || contains, [customFilter, contains]);
-	const enhancedFilter = useCallback((textValue, inputValue, item) => {
-		if (item?.forceMount) return true;
-		if (!shouldFilter) return true;
-		const searchWords = inputValue.trim().toLowerCase().split(/\s+/).filter((word) => word.length > 0);
-		if (searchWords.length === 0) return true;
-		const searchableTexts = [];
-		searchableTexts.push(textValue.toLowerCase());
-		if (item?.keywords && Array.isArray(item.keywords)) searchableTexts.push(...item.keywords.map((keyword) => keyword.toLowerCase()));
-		return searchWords.every((searchWord) => searchableTexts.some((text) => text.includes(searchWord)));
-	}, [shouldFilter]);
-	const collectionFilter = useCallback((nodes) => {
-		const term = searchValue.trim();
-		if (!term) return nodes;
-		if (term.toLowerCase().split(/\s+/).filter((word_0) => word_0.length > 0).length === 0) return nodes;
-		const filterNodes = (iter) => {
-			const result = [];
-			for (const node of iter) if (node.type === "section") {
-				const filteredChildren = filterNodes(node.childNodes);
-				if (filteredChildren.length) result.push({
-					...node,
-					childNodes: filteredChildren
-				});
-			} else if (enhancedFilter(node.textValue ?? String(node.rendered ?? ""), term, node.props)) result.push(node);
-			return result;
+	let t8;
+	if ($[6] !== controlledSearchValue || $[7] !== onSearchChange) {
+		t8 = (value) => {
+			if (controlledSearchValue === void 0) setInternalSearchValue(value);
+			onSearchChange?.(value);
 		};
-		return filterNodes(nodes);
-	}, [searchValue, enhancedFilter]);
+		$[6] = controlledSearchValue;
+		$[7] = onSearchChange;
+		$[8] = t8;
+	} else t8 = $[8];
+	const handleSearchChange = t8;
+	let t9;
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = { sensitivity: "base" };
+		$[9] = t9;
+	} else t9 = $[9];
+	const { contains } = useFilter(t9);
+	let t10;
+	if ($[10] !== shouldFilter) {
+		t10 = (textValue, inputValue, item) => {
+			if (item?.forceMount) return true;
+			if (!shouldFilter) return true;
+			const searchWords = inputValue.trim().toLowerCase().split(/\s+/).filter(_temp3);
+			if (searchWords.length === 0) return true;
+			const searchableTexts = [];
+			searchableTexts.push(textValue.toLowerCase());
+			if (item?.keywords && Array.isArray(item.keywords)) searchableTexts.push(...item.keywords.map(_temp4));
+			return searchWords.every((searchWord) => searchableTexts.some((text) => text.includes(searchWord)));
+		};
+		$[10] = shouldFilter;
+		$[11] = t10;
+	} else t10 = $[11];
+	const enhancedFilter = t10;
+	let t11;
+	if ($[12] !== enhancedFilter || $[13] !== searchValue) {
+		t11 = (nodes) => {
+			const term = searchValue.trim();
+			if (!term) return nodes;
+			if (term.toLowerCase().split(/\s+/).filter(_temp5).length === 0) return nodes;
+			const filterNodes = (iter) => {
+				const result = [];
+				for (const node of iter) if (node.type === "section") {
+					const filteredChildren = filterNodes(node.childNodes);
+					if (filteredChildren.length) result.push({
+						...node,
+						childNodes: filteredChildren
+					});
+				} else if (enhancedFilter(node.textValue ?? String(node.rendered ?? ""), term, node.props)) result.push(node);
+				return result;
+			};
+			return filterNodes(nodes);
+		};
+		$[12] = enhancedFilter;
+		$[13] = searchValue;
+		$[14] = t11;
+	} else t11 = $[14];
+	const collectionFilter = t11;
 	const treeState = useTreeState({
 		...completeProps,
 		filter: collectionFilter,
 		shouldUseVirtualFocus: true
 	});
 	const collectionItems = [...treeState.collection];
-	collectionItems.some((item_0) => item_0.type === "section");
+	collectionItems.some(_temp6);
 	const [focusedKey, setFocusedKey] = React.useState(null);
 	const focusedKeyRef = useRef(null);
-	const filteredCollectionItems = useMemo(() => {
-		const term_0 = searchValue.trim();
-		if (!term_0) return collectionItems;
-		if (term_0.toLowerCase().split(/\s+/).filter((word_1) => word_1.length > 0).length === 0) return collectionItems;
-		const filterNodes_0 = (items) => {
-			const result_0 = [];
-			[...items].forEach((item_1) => {
-				if (item_1.type === "section") {
-					const filteredChildren_0 = filterNodes_0(item_1.childNodes);
-					if (filteredChildren_0.length) result_0.push({
-						...item_1,
-						childNodes: filteredChildren_0
-					});
-				} else if (enhancedFilter(item_1.textValue ?? String(item_1.rendered ?? ""), term_0, item_1.props)) result_0.push(item_1);
-			});
-			return result_0;
-		};
-		return filterNodes_0(collectionItems);
-	}, [
-		collectionItems,
-		searchValue,
-		enhancedFilter
-	]);
+	const filteredCollectionItems = [...collectionFilter(collectionItems)];
 	const hasFilteredItems = filteredCollectionItems.length > 0;
-	const viewHasSections = filteredCollectionItems.some((item_2) => item_2.type === "section");
-	const findFirstSelectableItem = useCallback(() => {
+	const viewHasSections = filteredCollectionItems.some(_temp7);
+	const findFirstSelectableItem = () => {
 		const { selectionManager } = treeState;
-		const visit = (items_0) => {
-			for (const node_0 of items_0) if (node_0?.type === "section") {
+		const visit = (items) => {
+			for (const node_0 of items) if (node_0?.type === "section") {
 				const childResult = visit(Array.from(node_0.childNodes ?? []));
 				if (childResult != null) return childResult;
 			} else if (node_0?.type === "item" && !selectionManager.isDisabled(node_0.key)) return node_0.key;
 			return null;
 		};
 		return visit(filteredCollectionItems);
-	}, [filteredCollectionItems, treeState.selectionManager]);
+	};
 	const menuRef = useRef(null);
 	const { menuProps } = useMenu({
 		...completeProps,
@@ -120,230 +144,377 @@ function CommandMenu(props, ref) {
 		filter: collectionFilter,
 		shouldUseVirtualFocus: true
 	}, treeState, menuRef);
-	const renderedItems = useMemo(() => {
-		const items_1 = [];
-		let isFirstSection = true;
-		filteredCollectionItems.forEach((item_3) => {
-			if (item_3.type === "section") {
-				if (!isFirstSection) items_1.push(/* @__PURE__ */ jsx(StyledDivider, {
-					role: "separator",
-					"aria-orientation": "horizontal"
-				}, `divider-${String(item_3.key)}`));
-				items_1.push(/* @__PURE__ */ jsx(MenuSection, {
-					item: item_3,
-					state: treeState,
-					styles: completeProps.sectionStyles,
-					itemStyles: completeProps.itemStyles,
-					headingStyles: completeProps.sectionHeadingStyles,
-					size
-				}, item_3.key));
-				isFirstSection = false;
-				return;
-			}
-			let menuItem = /* @__PURE__ */ jsx(MenuItem, {
-				item: item_3,
+	const renderedItems = [];
+	let isFirstSection = true;
+	filteredCollectionItems.forEach((item_2) => {
+		if (item_2.type === "section") {
+			if (!isFirstSection) renderedItems.push(/* @__PURE__ */ jsx(StyledDivider, {
+				role: "separator",
+				"aria-orientation": "horizontal"
+			}, `divider-${String(item_2.key)}`));
+			renderedItems.push(/* @__PURE__ */ jsx(MenuSection, {
+				item: item_2,
 				state: treeState,
-				styles: completeProps.itemStyles,
-				size,
-				onAction: item_3.onAction
-			}, item_3.key);
-			if (item_3.props.wrapper) menuItem = item_3.props.wrapper(menuItem);
-			items_1.push(React.cloneElement(menuItem, { key: item_3.key }));
-		});
-		return items_1;
-	}, [
-		filteredCollectionItems,
-		treeState,
-		completeProps.sectionStyles,
-		completeProps.itemStyles,
-		completeProps.sectionHeadingStyles
-	]);
-	React.useEffect(() => {
-		if (autoFocus && searchInputRef.current) {
-			const timeoutId = setTimeout(() => {
-				if (searchInputRef.current) searchInputRef.current.focus();
-			}, 0);
-			return () => clearTimeout(timeoutId);
-		}
-	}, [autoFocus]);
-	React.useEffect(() => {
-		if (autoFocus && contextProps.autoFocus && searchInputRef.current) {
-			const timeoutId_0 = setTimeout(() => {
-				if (searchInputRef.current) searchInputRef.current.focus();
-			}, 50);
-			return () => clearTimeout(timeoutId_0);
+				styles: completeProps.sectionStyles,
+				itemStyles: completeProps.itemStyles,
+				headingStyles: completeProps.sectionHeadingStyles,
+				size
+			}, item_2.key));
+			isFirstSection = false;
+			return;
 		}
-	}, [autoFocus, contextProps.autoFocus]);
+		let menuItem = /* @__PURE__ */ jsx(MenuItem, {
+			item: item_2,
+			state: treeState,
+			styles: completeProps.itemStyles,
+			size,
+			onAction: item_2.onAction
+		}, item_2.key);
+		if (item_2.props.wrapper) menuItem = item_2.props.wrapper(menuItem);
+		renderedItems.push(React.cloneElement(menuItem, { key: item_2.key }));
+	});
+	let t12;
+	let t13;
+	if ($[15] !== autoFocus) {
+		t12 = () => {
+			if (autoFocus && searchInputRef.current) {
+				const timeoutId = setTimeout(() => {
+					if (searchInputRef.current) searchInputRef.current.focus();
+				}, 0);
+				return () => clearTimeout(timeoutId);
+			}
+		};
+		t13 = [autoFocus];
+		$[15] = autoFocus;
+		$[16] = t12;
+		$[17] = t13;
+	} else {
+		t12 = $[16];
+		t13 = $[17];
+	}
+	React.useEffect(t12, t13);
+	let t14;
+	let t15;
+	if ($[18] !== autoFocus || $[19] !== contextProps.autoFocus) {
+		t14 = () => {
+			if (autoFocus && contextProps.autoFocus && searchInputRef.current) {
+				const timeoutId_0 = setTimeout(() => {
+					if (searchInputRef.current) searchInputRef.current.focus();
+				}, 50);
+				return () => clearTimeout(timeoutId_0);
+			}
+		};
+		t15 = [autoFocus, contextProps.autoFocus];
+		$[18] = autoFocus;
+		$[19] = contextProps.autoFocus;
+		$[20] = t14;
+		$[21] = t15;
+	} else {
+		t14 = $[20];
+		t15 = $[21];
+	}
+	React.useEffect(t14, t15);
 	const prevSearchValueRef = useRef("");
-	React.useEffect(() => {
-		const currentSearchValue = searchValue.trim();
-		if (currentSearchValue !== prevSearchValueRef.current && currentSearchValue !== "") {
-			const firstSelectableKey = findFirstSelectableItem();
-			if (firstSelectableKey && hasFilteredItems) {
-				treeState.selectionManager.setFocusedKey(firstSelectableKey);
-				setFocusedKey(firstSelectableKey);
-				focusedKeyRef.current = firstSelectableKey;
-			} else {
-				treeState.selectionManager.setFocusedKey(null);
-				setFocusedKey(null);
-				focusedKeyRef.current = null;
+	let t16;
+	if ($[22] !== findFirstSelectableItem || $[23] !== hasFilteredItems || $[24] !== searchValue || $[25] !== setFocusedKey || $[26] !== treeState) {
+		t16 = () => {
+			const currentSearchValue = searchValue.trim();
+			if (currentSearchValue !== prevSearchValueRef.current && currentSearchValue !== "") {
+				const firstSelectableKey = findFirstSelectableItem();
+				if (firstSelectableKey && hasFilteredItems) {
+					treeState.selectionManager.setFocusedKey(firstSelectableKey);
+					setFocusedKey(firstSelectableKey);
+					focusedKeyRef.current = firstSelectableKey;
+				} else {
+					treeState.selectionManager.setFocusedKey(null);
+					setFocusedKey(null);
+					focusedKeyRef.current = null;
+				}
 			}
-		}
-		prevSearchValueRef.current = currentSearchValue;
-	}, [
-		searchValue,
-		findFirstSelectableItem,
-		hasFilteredItems
-	]);
-	const extractedStyles = useMemo(() => extractStyles(props, CONTAINER_STYLES), [props]);
-	const showEmptyState = searchValue.trim().length > 0 && !hasFilteredItems && !isLoading;
+			prevSearchValueRef.current = currentSearchValue;
+		};
+		$[22] = findFirstSelectableItem;
+		$[23] = hasFilteredItems;
+		$[24] = searchValue;
+		$[25] = setFocusedKey;
+		$[26] = treeState;
+		$[27] = t16;
+	} else t16 = $[27];
+	let t17;
+	if ($[28] !== findFirstSelectableItem || $[29] !== hasFilteredItems || $[30] !== searchValue) {
+		t17 = [
+			searchValue,
+			findFirstSelectableItem,
+			hasFilteredItems
+		];
+		$[28] = findFirstSelectableItem;
+		$[29] = hasFilteredItems;
+		$[30] = searchValue;
+		$[31] = t17;
+	} else t17 = $[31];
+	React.useEffect(t16, t17);
+	const extractedStyles = extractStyles(props, CONTAINER_STYLES);
+	let t18;
+	if ($[32] !== searchValue) {
+		t18 = searchValue.trim();
+		$[32] = searchValue;
+		$[33] = t18;
+	} else t18 = $[33];
+	const showEmptyState = t18.length > 0 && !hasFilteredItems && !isLoading;
 	useSyncRef(contextProps, menuRef);
-	const mods = useMemo(() => {
-		let popoverMod = completeProps.mods?.popover;
-		let trayMod = completeProps.mods?.tray;
-		return {
+	const t19 = !!footer;
+	const t20 = !!header;
+	const t21 = completeProps.mods?.popover;
+	const t22 = completeProps.mods?.tray;
+	let t23;
+	if ($[34] !== t19 || $[35] !== t20 || $[36] !== t21 || $[37] !== t22 || $[38] !== viewHasSections) {
+		t23 = {
 			sections: viewHasSections,
-			footer: !!footer,
-			header: !!header,
-			popover: popoverMod,
-			tray: trayMod
+			footer: t19,
+			header: t20,
+			popover: t21,
+			tray: t22
 		};
-	}, [
-		viewHasSections,
-		footer,
-		header,
-		completeProps.mods
-	]);
-	return /* @__PURE__ */ jsxs(StyledCommandMenu, {
-		...filterBaseProps(props),
-		ref: domRef,
-		qa: qa || "CommandMenu",
-		"data-size": size,
-		mods,
-		styles: mergeProps$1(extractedStyles, styles),
-		children: [
-			header && /* @__PURE__ */ jsx(StyledHeader, {
-				role: "presentation",
-				"data-size": size,
-				styles: {
-					border: "none",
-					...headerStyles
-				},
-				children: header
-			}),
-			/* @__PURE__ */ jsx(StyledSearchInput, {
-				ref: searchInputRef,
-				type: "search",
-				placeholder: searchPlaceholder,
-				value: searchValue,
-				styles: searchInputStyles,
-				"data-size": size,
-				"aria-controls": `${qa || "CommandMenu"}-menu`,
-				role: "combobox",
-				"aria-expanded": "true",
-				"aria-haspopup": "listbox",
-				"aria-activedescendant": focusedKey != null ? `${qa || "CommandMenu"}-menu-option-${focusedKey}` : void 0,
-				onChange: (e) => handleSearchChange(e.target.value),
-				onKeyDown: (e_0) => {
-					if (e_0.key === "ArrowDown" || e_0.key === "ArrowUp") {
-						e_0.preventDefault();
-						const isArrowDown = e_0.key === "ArrowDown";
-						const { selectionManager: selectionManager_0 } = treeState;
-						const currentKey = focusedKeyRef.current || selectionManager_0.focusedKey;
-						const getVisibleItemKeys = () => {
-							const keys_0 = [];
-							const visit_0 = (items_2) => {
-								for (const node_1 of items_2) if (node_1?.type === "section") visit_0(Array.from(node_1.childNodes ?? []));
-								else if (node_1?.type === "item") keys_0.push(node_1.key);
-							};
-							visit_0(filteredCollectionItems);
-							return keys_0;
-						};
-						const findNextSelectableKey = (currentIndex, direction, visibleKeys) => {
-							const increment = direction === "forward" ? 1 : -1;
-							for (let i = currentIndex + increment; i >= 0 && i < visibleKeys.length; i += increment) {
-								const key_1 = visibleKeys[i];
-								if (!selectionManager_0.isDisabled(key_1)) return key_1;
-							}
-							return null;
-						};
-						const findFirstLastSelectableKey = (direction_0, visibleKeys_0) => {
-							const keysToCheck = direction_0 === "forward" ? visibleKeys_0 : [...visibleKeys_0].reverse();
-							for (const key_2 of keysToCheck) if (!selectionManager_0.isDisabled(key_2)) return key_2;
-							return null;
-						};
-						const visibleKeys_1 = getVisibleItemKeys();
-						if (visibleKeys_1.length === 0) return;
-						let nextKey;
-						const direction_1 = isArrowDown ? "forward" : "backward";
-						if (currentKey == null) nextKey = findFirstLastSelectableKey(direction_1, visibleKeys_1);
-						else {
-							const currentIndex_0 = visibleKeys_1.indexOf(currentKey);
-							if (currentIndex_0 === -1) nextKey = findFirstLastSelectableKey(direction_1, visibleKeys_1);
-							else {
-								nextKey = findNextSelectableKey(currentIndex_0, direction_1, visibleKeys_1);
-								if (nextKey == null) nextKey = findFirstLastSelectableKey(direction_1, visibleKeys_1);
-							}
-						}
-						if (nextKey != null) {
-							selectionManager_0.setFocusedKey(nextKey);
-							setFocusedKey(nextKey);
-							focusedKeyRef.current = nextKey;
-						}
-					} else if (e_0.key === "Enter" || e_0.key === " " && !searchValue.trim()) {
-						const currentFocusedKey = focusedKey || treeState.selectionManager.focusedKey;
-						if (currentFocusedKey != null) {
-							e_0.preventDefault();
-							if (treeState.selectionManager.selectionMode !== "none") treeState.selectionManager.select(currentFocusedKey, e_0);
-							else {
-								const node_2 = treeState.collection.getItem(currentFocusedKey);
-								if (node_2) {
-									const onAction = completeProps.onAction;
-									if (onAction) onAction(currentFocusedKey);
-									if (node_2.props?.onAction) node_2.props.onAction(currentFocusedKey);
-								}
-							}
-							const { onClose, closeOnSelect } = contextProps;
-							if (onClose && closeOnSelect !== false) onClose();
-						}
-					} else if (e_0.key === "Escape") {
-						if (searchValue) {
-							e_0.preventDefault();
-							handleSearchChange("");
-						}
+		$[34] = t19;
+		$[35] = t20;
+		$[36] = t21;
+		$[37] = t22;
+		$[38] = viewHasSections;
+		$[39] = t23;
+	} else t23 = $[39];
+	const mods = t23;
+	const T0 = StyledCommandMenu;
+	let t24;
+	if ($[40] !== props) {
+		t24 = filterBaseProps(props);
+		$[40] = props;
+		$[41] = t24;
+	} else t24 = $[41];
+	const t25 = t24;
+	const t26 = qa || "CommandMenu";
+	const t27 = mergeProps$1(extractedStyles, styles);
+	let t28;
+	if ($[42] !== header || $[43] !== headerStyles || $[44] !== size) {
+		t28 = header && /* @__PURE__ */ jsx(StyledHeader, {
+			role: "presentation",
+			"data-size": size,
+			styles: {
+				border: "none",
+				...headerStyles
+			},
+			children: header
+		});
+		$[42] = header;
+		$[43] = headerStyles;
+		$[44] = size;
+		$[45] = t28;
+	} else t28 = $[45];
+	const t29 = `${qa || "CommandMenu"}-menu`;
+	const t30 = focusedKey != null ? `${qa || "CommandMenu"}-menu-option-${focusedKey}` : void 0;
+	let t31;
+	if ($[46] !== handleSearchChange) {
+		t31 = (e) => handleSearchChange(e.target.value);
+		$[46] = handleSearchChange;
+		$[47] = t31;
+	} else t31 = $[47];
+	const t32 = (e_0) => {
+		if (e_0.key === "ArrowDown" || e_0.key === "ArrowUp") {
+			e_0.preventDefault();
+			const isArrowDown = e_0.key === "ArrowDown";
+			const { selectionManager: selectionManager_0 } = treeState;
+			const currentKey = focusedKeyRef.current || selectionManager_0.focusedKey;
+			const getVisibleItemKeys = () => {
+				const keys_0 = [];
+				const visit_0 = (items_0) => {
+					for (const node_1 of items_0) if (node_1?.type === "section") visit_0(Array.from(node_1.childNodes ?? []));
+					else if (node_1?.type === "item") keys_0.push(node_1.key);
+				};
+				visit_0(filteredCollectionItems);
+				return keys_0;
+			};
+			const findNextSelectableKey = (currentIndex, direction, visibleKeys) => {
+				const increment = direction === "forward" ? 1 : -1;
+				for (let i = currentIndex + increment; i >= 0 && i < visibleKeys.length; i = i + increment) {
+					const key_1 = visibleKeys[i];
+					if (!selectionManager_0.isDisabled(key_1)) return key_1;
+				}
+				return null;
+			};
+			const findFirstLastSelectableKey = (direction_0, visibleKeys_0) => {
+				const keysToCheck = direction_0 === "forward" ? visibleKeys_0 : [...visibleKeys_0].reverse();
+				for (const key_2 of keysToCheck) if (!selectionManager_0.isDisabled(key_2)) return key_2;
+				return null;
+			};
+			const visibleKeys_1 = getVisibleItemKeys();
+			if (visibleKeys_1.length === 0) return;
+			let nextKey;
+			const direction_1 = isArrowDown ? "forward" : "backward";
+			if (currentKey == null) nextKey = findFirstLastSelectableKey(direction_1, visibleKeys_1);
+			else {
+				const currentIndex_0 = visibleKeys_1.indexOf(currentKey);
+				if (currentIndex_0 === -1) nextKey = findFirstLastSelectableKey(direction_1, visibleKeys_1);
+				else {
+					nextKey = findNextSelectableKey(currentIndex_0, direction_1, visibleKeys_1);
+					if (nextKey == null) nextKey = findFirstLastSelectableKey(direction_1, visibleKeys_1);
+				}
+			}
+			if (nextKey != null) {
+				selectionManager_0.setFocusedKey(nextKey);
+				setFocusedKey(nextKey);
+				focusedKeyRef.current = nextKey;
+			}
+		} else if (e_0.key === "Enter" || e_0.key === " " && !searchValue.trim()) {
+			const currentFocusedKey = focusedKey || treeState.selectionManager.focusedKey;
+			if (currentFocusedKey != null) {
+				e_0.preventDefault();
+				if (treeState.selectionManager.selectionMode !== "none") treeState.selectionManager.select(currentFocusedKey, e_0);
+				else {
+					const node_2 = treeState.collection.getItem(currentFocusedKey);
+					if (node_2) {
+						const onAction = completeProps.onAction;
+						if (onAction) onAction(currentFocusedKey);
+						if (node_2.props?.onAction) node_2.props.onAction(currentFocusedKey);
 					}
 				}
-			}),
-			isLoading && /* @__PURE__ */ jsx(StyledLoadingWrapper, { children: /* @__PURE__ */ jsx(LoadingIcon, {
-				role: "progressbar",
-				"aria-label": "Loading commands",
-				"aria-hidden": false
-			}) }),
-			!isLoading && !showEmptyState && /* @__PURE__ */ jsx(StyledMenu, {
-				...menuProps,
-				ref: menuRef,
-				id: `${qa || "CommandMenu"}-menu`,
-				"aria-label": "Command menu",
-				qa: "Menu",
-				"data-size": size,
-				mods,
-				styles: {
-					border: "none",
-					boxShadow: "none",
-					radius: 0,
-					padding: "0.5x"
-				},
-				children: renderedItems
-			}),
-			!isLoading && showEmptyState && /* @__PURE__ */ jsx(StyledEmptyState, { children: emptyLabel }),
-			footer && /* @__PURE__ */ jsx(StyledFooter, {
-				role: "presentation",
-				"data-size": size,
-				styles: footerStyles,
-				children: footer
-			})
-		]
+				const { onClose, closeOnSelect } = contextProps;
+				if (onClose && closeOnSelect !== false) onClose();
+			}
+		} else if (e_0.key === "Escape") {
+			if (searchValue) {
+				e_0.preventDefault();
+				handleSearchChange("");
+			}
+		}
+	};
+	let t33;
+	if ($[48] !== searchInputStyles || $[49] !== searchPlaceholder || $[50] !== searchValue || $[51] !== size || $[52] !== t29 || $[53] !== t30 || $[54] !== t31 || $[55] !== t32) {
+		t33 = /* @__PURE__ */ jsx(StyledSearchInput, {
+			ref: searchInputRef,
+			type: "search",
+			placeholder: searchPlaceholder,
+			value: searchValue,
+			styles: searchInputStyles,
+			"data-size": size,
+			"aria-controls": t29,
+			role: "combobox",
+			"aria-expanded": "true",
+			"aria-haspopup": "listbox",
+			"aria-activedescendant": t30,
+			onChange: t31,
+			onKeyDown: t32
+		});
+		$[48] = searchInputStyles;
+		$[49] = searchPlaceholder;
+		$[50] = searchValue;
+		$[51] = size;
+		$[52] = t29;
+		$[53] = t30;
+		$[54] = t31;
+		$[55] = t32;
+		$[56] = t33;
+	} else t33 = $[56];
+	let t34;
+	if ($[57] !== isLoading) {
+		t34 = isLoading && /* @__PURE__ */ jsx(StyledLoadingWrapper, { children: /* @__PURE__ */ jsx(LoadingIcon, {
+			role: "progressbar",
+			"aria-label": "Loading commands",
+			"aria-hidden": false
+		}) });
+		$[57] = isLoading;
+		$[58] = t34;
+	} else t34 = $[58];
+	const t35 = !isLoading && !showEmptyState && /* @__PURE__ */ jsx(StyledMenu, {
+		...menuProps,
+		ref: menuRef,
+		id: `${qa || "CommandMenu"}-menu`,
+		"aria-label": "Command menu",
+		qa: "Menu",
+		"data-size": size,
+		mods,
+		styles: {
+			border: "none",
+			boxShadow: "none",
+			radius: 0,
+			padding: "0.5x"
+		},
+		children: renderedItems
 	});
+	let t36;
+	if ($[59] !== emptyLabel || $[60] !== isLoading || $[61] !== showEmptyState) {
+		t36 = !isLoading && showEmptyState && /* @__PURE__ */ jsx(StyledEmptyState, { children: emptyLabel });
+		$[59] = emptyLabel;
+		$[60] = isLoading;
+		$[61] = showEmptyState;
+		$[62] = t36;
+	} else t36 = $[62];
+	let t37;
+	if ($[63] !== footer || $[64] !== footerStyles || $[65] !== size) {
+		t37 = footer && /* @__PURE__ */ jsx(StyledFooter, {
+			role: "presentation",
+			"data-size": size,
+			styles: footerStyles,
+			children: footer
+		});
+		$[63] = footer;
+		$[64] = footerStyles;
+		$[65] = size;
+		$[66] = t37;
+	} else t37 = $[66];
+	let t38;
+	if ($[67] !== T0 || $[68] !== domRef || $[69] !== mods || $[70] !== size || $[71] !== t25 || $[72] !== t26 || $[73] !== t27 || $[74] !== t28 || $[75] !== t33 || $[76] !== t34 || $[77] !== t35 || $[78] !== t36 || $[79] !== t37) {
+		t38 = /* @__PURE__ */ jsxs(T0, {
+			...t25,
+			ref: domRef,
+			qa: t26,
+			"data-size": size,
+			mods,
+			styles: t27,
+			children: [
+				t28,
+				t33,
+				t34,
+				t35,
+				t36,
+				t37
+			]
+		});
+		$[67] = T0;
+		$[68] = domRef;
+		$[69] = mods;
+		$[70] = size;
+		$[71] = t25;
+		$[72] = t26;
+		$[73] = t27;
+		$[74] = t28;
+		$[75] = t33;
+		$[76] = t34;
+		$[77] = t35;
+		$[78] = t36;
+		$[79] = t37;
+		$[80] = t38;
+	} else t38 = $[80];
+	return t38;
+}
+function _temp7(item_1) {
+	return item_1.type === "section";
+}
+function _temp6(item_0) {
+	return item_0.type === "section";
+}
+function _temp5(word_0) {
+	return word_0.length > 0;
+}
+function _temp4(keyword) {
+	return keyword.toLowerCase();
+}
+function _temp3(word) {
+	return word.length > 0;
+}
+function _temp2(key_0) {
+	return String(key_0);
+}
+function _temp(key) {
+	return String(key);
 }
 const _CommandMenu = React.forwardRef(CommandMenu);
 const __CommandMenu = Object.assign(_CommandMenu, {