@cube-dev/ui-kit 0.0.0-canary-8531f8b → 0.0.0-canary-1b26a89

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

@@ -1,10 +1,10 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8531f8b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-1b26a89 | Cube Dev Team */
 import { extractStyles, mergeStyleLayers } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { LoadingIcon } from "../../../icons/LoadingIcon.js";
-import { _CollectionItem } from "../../CollectionItem.js";
 import { useI18n } from "../../../i18n/useI18n.js";
 import { useMenuContext } from "../Menu/context.js";
+import { _MenuCollectionItem, getMenuItemReactKey } from "../Menu/MenuCollectionItem.js";
 import { MenuItem } from "../Menu/MenuItem.js";
 import { StyledDivider, StyledFooter, StyledHeader, StyledMenu } from "../Menu/styled.js";
 import { MenuSection } from "../Menu/MenuSection.js";
@@ -39,7 +39,7 @@ function getNextEnabledKey(keys, currentKey, direction, isDisabled) {
 	return ahead.find(isEnabled) ?? ordered.find(isEnabled) ?? null;
 }
 function CommandMenu(props, ref) {
-	const $ = c(104);
+	const $ = c(80);
 	const { t } = useI18n();
 	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, onAction, header, footer, ...restMenuProps } = props;
 	let t6;
@@ -64,6 +64,8 @@ function CommandMenu(props, ref) {
 	const size = t5 === void 0 ? "medium" : t5;
 	const domRef = useObjectRef(ref);
 	const searchInputRef = useRef(null);
+	const instanceId = useId();
+	const menuId = `${qa || "CommandMenu"}-${instanceId}-menu`;
 	const contextProps = useMenuContext();
 	const ariaSelectedKeys = selectedKeys ? new Set(selectedKeys) : void 0;
 	const ariaDefaultSelectedKeys = defaultSelectedKeys ? new Set(defaultSelectedKeys) : void 0;
@@ -149,19 +151,15 @@ function CommandMenu(props, ref) {
 		filter: collectionFilter,
 		shouldUseVirtualFocus: true
 	});
+	const itemId = (key_2) => {
+		const item_0 = treeState.collection.getItem(key_2);
+		const actions = item_0?.props.actions;
+		if (item_0?.props.id != null && item_0.props.href == null && (!actions || actions === true)) return String(item_0.props.id);
+		return `${menuId}-option-${typeof key_2}-${encodeURIComponent(String(key_2))}`;
+	};
 	const collectionItems = [...treeState.collection];
 	collectionItems.some(_temp6);
-	const autoId = useId();
-	const menuId = `${qa || `CommandMenu${autoId}`}-menu`;
-	let t13;
-	if ($[17] !== menuId) {
-		t13 = (key_2) => `${menuId}-option-${encodeURIComponent(String(key_2))}`;
-		$[17] = menuId;
-		$[18] = t13;
-	} else t13 = $[18];
-	const getItemId = t13;
-	const [focusedKey, setFocusedKey] = React.useState(null);
-	const focusedKeyRef = useRef(null);
+	const focusedKey = treeState.selectionManager.focusedKey;
 	const filteredCollectionItems = [...collectionFilter(collectionItems)];
 	const hasFilteredItems = filteredCollectionItems.length > 0;
 	const viewHasSections = filteredCollectionItems.some(_temp7);
@@ -174,39 +172,39 @@ function CommandMenu(props, ref) {
 	}, treeState, menuRef);
 	const renderedItems = [];
 	let isFirstSection = true;
-	filteredCollectionItems.forEach((item_2) => {
-		if (item_2.type === "section") {
+	filteredCollectionItems.forEach((item_3) => {
+		const reactKey = getMenuItemReactKey(item_3.key);
+		if (item_3.type === "section") {
 			if (!isFirstSection) renderedItems.push(/* @__PURE__ */ jsx(StyledDivider, {
 				role: "separator",
 				"aria-orientation": "horizontal"
-			}, `divider-${String(item_2.key)}`));
+			}, `divider-${reactKey}`));
 			renderedItems.push(/* @__PURE__ */ jsx(MenuSection, {
-				item: item_2,
-				getItemId,
+				item: item_3,
 				state: treeState,
 				styles: completeProps.sectionStyles,
 				itemStyles: completeProps.itemStyles,
 				headingStyles: completeProps.sectionHeadingStyles,
-				size
-			}, item_2.key));
+				size,
+				itemId
+			}, reactKey));
 			isFirstSection = false;
 			return;
 		}
 		let menuItem = /* @__PURE__ */ jsx(MenuItem, {
-			id: getItemId(item_2.key),
-			item: item_2,
+			item: item_3,
 			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 }));
+			id: itemId(item_3.key)
+		}, reactKey);
+		if (item_3.props.wrapper) menuItem = item_3.props.wrapper(menuItem);
+		renderedItems.push(React.cloneElement(menuItem, { key: reactKey }));
 	});
+	let t13;
 	let t14;
-	let t15;
-	if ($[19] !== autoFocus) {
-		t14 = () => {
+	if ($[17] !== autoFocus) {
+		t13 = () => {
 			if (autoFocus && searchInputRef.current) {
 				const timeoutId = setTimeout(() => {
 					if (searchInputRef.current) searchInputRef.current.focus();
@@ -214,19 +212,19 @@ function CommandMenu(props, ref) {
 				return () => clearTimeout(timeoutId);
 			}
 		};
-		t15 = [autoFocus];
-		$[19] = autoFocus;
-		$[20] = t14;
-		$[21] = t15;
+		t14 = [autoFocus];
+		$[17] = autoFocus;
+		$[18] = t13;
+		$[19] = t14;
 	} else {
-		t14 = $[20];
-		t15 = $[21];
+		t13 = $[18];
+		t14 = $[19];
 	}
-	React.useEffect(t14, t15);
+	React.useEffect(t13, t14);
+	let t15;
 	let t16;
-	let t17;
-	if ($[22] !== autoFocus || $[23] !== contextProps.autoFocus) {
-		t16 = () => {
+	if ($[20] !== autoFocus || $[21] !== contextProps.autoFocus) {
+		t15 = () => {
 			if (autoFocus && contextProps.autoFocus && searchInputRef.current) {
 				const timeoutId_0 = setTimeout(() => {
 					if (searchInputRef.current) searchInputRef.current.focus();
@@ -234,230 +232,198 @@ function CommandMenu(props, ref) {
 				return () => clearTimeout(timeoutId_0);
 			}
 		};
-		t17 = [autoFocus, contextProps.autoFocus];
-		$[22] = autoFocus;
-		$[23] = contextProps.autoFocus;
-		$[24] = t16;
-		$[25] = t17;
+		t16 = [autoFocus, contextProps.autoFocus];
+		$[20] = autoFocus;
+		$[21] = contextProps.autoFocus;
+		$[22] = t15;
+		$[23] = t16;
 	} else {
-		t16 = $[24];
-		t17 = $[25];
+		t15 = $[22];
+		t16 = $[23];
 	}
-	React.useEffect(t16, t17);
+	React.useEffect(t15, t16);
 	const prevSearchValueRef = useRef("");
-	let t18;
-	if ($[26] !== findFirstSelectableItem || $[27] !== hasFilteredItems || $[28] !== searchValue || $[29] !== setFocusedKey || $[30] !== treeState.selectionManager) {
-		t18 = () => {
-			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;
-		};
-		$[26] = findFirstSelectableItem;
-		$[27] = hasFilteredItems;
-		$[28] = searchValue;
-		$[29] = setFocusedKey;
-		$[30] = treeState.selectionManager;
-		$[31] = t18;
-	} else t18 = $[31];
-	let t19;
-	if ($[32] !== findFirstSelectableItem || $[33] !== hasFilteredItems || $[34] !== searchValue) {
-		t19 = [
-			searchValue,
-			findFirstSelectableItem,
-			hasFilteredItems
-		];
-		$[32] = findFirstSelectableItem;
-		$[33] = hasFilteredItems;
-		$[34] = searchValue;
-		$[35] = t19;
-	} else t19 = $[35];
-	React.useEffect(t18, t19);
+	React.useEffect(() => {
+		const currentSearchValue = searchValue.trim();
+		if (currentSearchValue !== prevSearchValueRef.current && currentSearchValue !== "") {
+			const firstSelectableKey = findFirstSelectableItem();
+			if (firstSelectableKey != null && hasFilteredItems) treeState.selectionManager.setFocusedKey(firstSelectableKey);
+			else treeState.selectionManager.setFocusedKey(null);
+		}
+		prevSearchValueRef.current = currentSearchValue;
+	}, [
+		searchValue,
+		findFirstSelectableItem,
+		hasFilteredItems
+	]);
 	const handleArrowKey = (e) => {
 		e.preventDefault();
 		const { selectionManager } = treeState;
-		const currentKey = focusedKeyRef.current || selectionManager.focusedKey;
+		const currentKey = selectionManager.focusedKey;
 		const nextKey = getNextEnabledKey(collectItemKeys(filteredCollectionItems), currentKey, e.key === "ArrowDown" ? 1 : -1, (key_4) => selectionManager.isDisabled(key_4));
-		if (nextKey != null) {
-			selectionManager.setFocusedKey(nextKey);
-			setFocusedKey(nextKey);
-			focusedKeyRef.current = nextKey;
+		if (nextKey != null) selectionManager.setFocusedKey(nextKey);
+	};
+	const handleActionKey = (e_0) => {
+		e_0.preventDefault();
+		e_0.stopPropagation();
+		if (e_0.repeat || focusedKey == null || treeState.selectionManager.isDisabled(focusedKey)) return;
+		const item_4 = menuRef.current?.ownerDocument.getElementById(itemId(focusedKey));
+		if (!item_4 || !menuRef.current?.contains(item_4)) return;
+		if (item_4.dispatchEvent(new window.KeyboardEvent("keydown", {
+			key: e_0.key,
+			code: e_0.code,
+			ctrlKey: e_0.ctrlKey,
+			metaKey: e_0.metaKey,
+			altKey: e_0.altKey,
+			shiftKey: e_0.shiftKey,
+			bubbles: true,
+			cancelable: true
+		})) && e_0.key === "Enter") item_4.dispatchEvent(new window.MouseEvent("click", {
+			ctrlKey: e_0.ctrlKey,
+			metaKey: e_0.metaKey,
+			altKey: e_0.altKey,
+			shiftKey: e_0.shiftKey,
+			bubbles: true,
+			cancelable: true,
+			detail: 1
+		}));
+		item_4.dispatchEvent(new window.KeyboardEvent("keyup", {
+			key: e_0.key,
+			code: e_0.code,
+			ctrlKey: e_0.ctrlKey,
+			metaKey: e_0.metaKey,
+			altKey: e_0.altKey,
+			shiftKey: e_0.shiftKey,
+			bubbles: true,
+			cancelable: true
+		}));
+	};
+	const handleSearchKeyDown = (e_1) => {
+		if (e_1.nativeEvent.isComposing) return;
+		if (e_1.key === "ArrowDown" || e_1.key === "ArrowUp") handleArrowKey(e_1);
+		else if (e_1.key === "Enter" || e_1.key === " " && !searchValue.trim()) handleActionKey(e_1);
+		else if (e_1.key === "Escape" && searchValue) {
+			e_1.preventDefault();
+			handleSearchChange("");
 		}
 	};
-	let t20;
-	if ($[36] !== completeProps || $[37] !== treeState.collection) {
-		t20 = (key_5) => {
-			const node_0 = treeState.collection.getItem(key_5);
-			if (!node_0) return;
-			const onAction_0 = completeProps.onAction;
-			if (onAction_0) onAction_0(key_5);
-			if (node_0.props?.onAction) node_0.props.onAction(key_5);
-		};
-		$[36] = completeProps;
-		$[37] = treeState.collection;
-		$[38] = t20;
-	} else t20 = $[38];
-	const triggerAction = t20;
-	let t21;
-	if ($[39] !== contextProps || $[40] !== focusedKey || $[41] !== treeState.selectionManager || $[42] !== triggerAction) {
-		t21 = (e_0) => {
-			const currentFocusedKey = focusedKey || treeState.selectionManager.focusedKey;
-			if (currentFocusedKey == null) return;
-			e_0.preventDefault();
-			if (treeState.selectionManager.selectionMode !== "none") treeState.selectionManager.select(currentFocusedKey);
-			else triggerAction(currentFocusedKey);
-			const { onClose, closeOnSelect } = contextProps;
-			if (onClose && closeOnSelect !== false) onClose();
-		};
-		$[39] = contextProps;
-		$[40] = focusedKey;
-		$[41] = treeState.selectionManager;
-		$[42] = triggerAction;
-		$[43] = t21;
-	} else t21 = $[43];
-	const handleActionKey = t21;
-	let t22;
-	if ($[44] !== handleActionKey || $[45] !== handleArrowKey || $[46] !== handleSearchChange || $[47] !== searchValue) {
-		t22 = (e_1) => {
-			if (e_1.key === "ArrowDown" || e_1.key === "ArrowUp") handleArrowKey(e_1);
-			else if (e_1.key === "Enter" || e_1.key === " " && !searchValue.trim()) handleActionKey(e_1);
-			else if (e_1.key === "Escape" && searchValue) {
-				e_1.preventDefault();
-				handleSearchChange("");
-			}
-		};
-		$[44] = handleActionKey;
-		$[45] = handleArrowKey;
-		$[46] = handleSearchChange;
-		$[47] = searchValue;
-		$[48] = t22;
-	} else t22 = $[48];
-	const handleSearchKeyDown = t22;
 	const extractedStyles = extractStyles(props, CONTAINER_STYLES);
-	let t23;
-	if ($[49] !== searchValue) {
-		t23 = searchValue.trim();
-		$[49] = searchValue;
-		$[50] = t23;
-	} else t23 = $[50];
-	const showEmptyState = t23.length > 0 && !hasFilteredItems && !isLoading;
+	let t17;
+	if ($[24] !== searchValue) {
+		t17 = searchValue.trim();
+		$[24] = searchValue;
+		$[25] = t17;
+	} else t17 = $[25];
+	const showEmptyState = t17.length > 0 && !hasFilteredItems && !isLoading;
+	const activeDescendant = !isLoading && !showEmptyState && focusedKey != null && collectItemKeys(filteredCollectionItems).includes(focusedKey) ? itemId(focusedKey) : void 0;
 	useSyncRef(contextProps, menuRef);
-	const t24 = !!footer;
-	const t25 = !!header;
-	const t26 = completeProps.mods?.popover;
-	const t27 = completeProps.mods?.tray;
-	let t28;
-	if ($[51] !== t24 || $[52] !== t25 || $[53] !== t26 || $[54] !== t27 || $[55] !== viewHasSections) {
-		t28 = {
+	const t18 = !!footer;
+	const t19 = !!header;
+	const t20 = completeProps.mods?.popover;
+	const t21 = completeProps.mods?.tray;
+	let t22;
+	if ($[26] !== t18 || $[27] !== t19 || $[28] !== t20 || $[29] !== t21 || $[30] !== viewHasSections) {
+		t22 = {
 			sections: viewHasSections,
-			footer: t24,
-			header: t25,
-			popover: t26,
-			tray: t27
+			footer: t18,
+			header: t19,
+			popover: t20,
+			tray: t21
 		};
-		$[51] = t24;
-		$[52] = t25;
-		$[53] = t26;
-		$[54] = t27;
-		$[55] = viewHasSections;
-		$[56] = t28;
-	} else t28 = $[56];
-	const mods = t28;
-	let t29;
-	if ($[57] !== props) {
-		t29 = filterBaseProps(props);
-		$[57] = props;
-		$[58] = t29;
-	} else t29 = $[58];
-	const t30 = t29;
+		$[26] = t18;
+		$[27] = t19;
+		$[28] = t20;
+		$[29] = t21;
+		$[30] = viewHasSections;
+		$[31] = t22;
+	} else t22 = $[31];
+	const mods = t22;
+	let t23;
+	if ($[32] !== props) {
+		t23 = filterBaseProps(props);
+		$[32] = props;
+		$[33] = t23;
+	} else t23 = $[33];
+	const t24 = t23;
 	let wrapperProps;
-	if ($[59] !== t30) {
-		const { "aria-label": _ariaLabel, "aria-labelledby": _ariaLabelledBy, "aria-describedby": _ariaDescribedBy, "aria-details": _ariaDetails, ...t31 } = t30;
-		wrapperProps = t31;
-		$[59] = t30;
-		$[60] = wrapperProps;
-	} else wrapperProps = $[60];
+	if ($[34] !== t24) {
+		const { "aria-label": _ariaLabel, "aria-labelledby": _ariaLabelledBy, "aria-describedby": _ariaDescribedBy, "aria-details": _ariaDetails, ...t25 } = t24;
+		wrapperProps = t25;
+		$[34] = t24;
+		$[35] = wrapperProps;
+	} else wrapperProps = $[35];
 	const T0 = StyledCommandMenu;
-	const t31 = qa || "CommandMenu";
-	const t32 = mergeStyleLayers(extractedStyles, styles);
-	let t33;
-	if ($[61] !== header || $[62] !== headerStyles || $[63] !== size) {
-		t33 = header && /* @__PURE__ */ jsx(StyledHeader, {
+	const t25 = qa || "CommandMenu";
+	const t26 = mergeStyleLayers(extractedStyles, styles);
+	let t27;
+	if ($[36] !== header || $[37] !== headerStyles || $[38] !== size) {
+		t27 = header && /* @__PURE__ */ jsx(StyledHeader, {
 			role: "presentation",
 			"data-size": size,
 			styles: mergeStyleLayers({ border: "none" }, headerStyles),
 			children: header
 		});
-		$[61] = header;
-		$[62] = headerStyles;
-		$[63] = size;
-		$[64] = t33;
-	} else t33 = $[64];
-	const t34 = focusedKey != null ? getItemId(focusedKey) : void 0;
-	const t35 = completeProps["aria-label"];
-	const t36 = completeProps["aria-labelledby"];
-	const t37 = completeProps["aria-describedby"];
-	let t38;
-	if ($[65] !== handleSearchChange) {
-		t38 = (e_2) => handleSearchChange(e_2.target.value);
-		$[65] = handleSearchChange;
-		$[66] = t38;
-	} else t38 = $[66];
-	let t39;
-	if ($[67] !== handleSearchKeyDown || $[68] !== menuId || $[69] !== searchInputStyles || $[70] !== searchPlaceholder || $[71] !== searchValue || $[72] !== size || $[73] !== t34 || $[74] !== t35 || $[75] !== t36 || $[76] !== t37 || $[77] !== t38) {
-		t39 = /* @__PURE__ */ jsx(StyledSearchInput, {
+		$[36] = header;
+		$[37] = headerStyles;
+		$[38] = size;
+		$[39] = t27;
+	} else t27 = $[39];
+	const t28 = completeProps["aria-label"] ?? searchPlaceholder;
+	const t29 = completeProps["aria-labelledby"];
+	const t30 = completeProps["aria-describedby"];
+	const t31 = completeProps["aria-details"];
+	const t32 = !isLoading && !showEmptyState ? menuId : void 0;
+	let t33;
+	if ($[40] !== handleSearchChange) {
+		t33 = (e_2) => handleSearchChange(e_2.target.value);
+		$[40] = handleSearchChange;
+		$[41] = t33;
+	} else t33 = $[41];
+	let t34;
+	if ($[42] !== activeDescendant || $[43] !== handleSearchKeyDown || $[44] !== searchInputStyles || $[45] !== searchPlaceholder || $[46] !== searchValue || $[47] !== size || $[48] !== t28 || $[49] !== t29 || $[50] !== t30 || $[51] !== t31 || $[52] !== t32 || $[53] !== t33) {
+		t34 = /* @__PURE__ */ jsx(StyledSearchInput, {
 			ref: searchInputRef,
 			type: "search",
 			placeholder: searchPlaceholder,
 			value: searchValue,
 			styles: searchInputStyles,
 			"data-size": size,
-			"aria-controls": menuId,
-			role: "combobox",
-			"aria-expanded": "true",
-			"aria-haspopup": "listbox",
-			"aria-activedescendant": t34,
-			"aria-label": t35,
-			"aria-labelledby": t36,
-			"aria-describedby": t37,
-			onChange: t38,
+			"aria-label": t28,
+			"aria-labelledby": t29,
+			"aria-describedby": t30,
+			"aria-details": t31,
+			"aria-controls": t32,
+			role: "searchbox",
+			"aria-activedescendant": activeDescendant,
+			onChange: t33,
 			onKeyDown: handleSearchKeyDown
 		});
-		$[67] = handleSearchKeyDown;
-		$[68] = menuId;
-		$[69] = searchInputStyles;
-		$[70] = searchPlaceholder;
-		$[71] = searchValue;
-		$[72] = size;
-		$[73] = t34;
-		$[74] = t35;
-		$[75] = t36;
-		$[76] = t37;
-		$[77] = t38;
-		$[78] = t39;
-	} else t39 = $[78];
-	let t40;
-	if ($[79] !== isLoading || $[80] !== t) {
-		t40 = isLoading && /* @__PURE__ */ jsx(StyledLoadingWrapper, { children: /* @__PURE__ */ jsx(LoadingIcon, {
+		$[42] = activeDescendant;
+		$[43] = handleSearchKeyDown;
+		$[44] = searchInputStyles;
+		$[45] = searchPlaceholder;
+		$[46] = searchValue;
+		$[47] = size;
+		$[48] = t28;
+		$[49] = t29;
+		$[50] = t30;
+		$[51] = t31;
+		$[52] = t32;
+		$[53] = t33;
+		$[54] = t34;
+	} else t34 = $[54];
+	let t35;
+	if ($[55] !== isLoading || $[56] !== t) {
+		t35 = isLoading && /* @__PURE__ */ jsx(StyledLoadingWrapper, { children: /* @__PURE__ */ jsx(LoadingIcon, {
 			role: "progressbar",
 			"aria-label": t("commandMenu.loading", "Loading commands"),
 			"aria-hidden": false
 		}) });
-		$[79] = isLoading;
-		$[80] = t;
-		$[81] = t40;
-	} else t40 = $[81];
-	const t41 = !isLoading && !showEmptyState && /* @__PURE__ */ jsx(StyledMenu, {
+		$[55] = isLoading;
+		$[56] = t;
+		$[57] = t35;
+	} else t35 = $[57];
+	const t36 = !isLoading && !showEmptyState && /* @__PURE__ */ jsx(StyledMenu, {
 		...menuProps,
 		ref: menuRef,
 		id: menuId,
@@ -473,67 +439,67 @@ function CommandMenu(props, ref) {
 		},
 		children: renderedItems
 	});
-	let t42;
-	if ($[82] !== emptyLabel || $[83] !== isLoading || $[84] !== showEmptyState) {
-		t42 = !isLoading && showEmptyState && /* @__PURE__ */ jsx(StyledEmptyState, { children: emptyLabel });
-		$[82] = emptyLabel;
-		$[83] = isLoading;
-		$[84] = showEmptyState;
-		$[85] = t42;
-	} else t42 = $[85];
-	let t43;
-	if ($[86] !== footer || $[87] !== footerStyles || $[88] !== size) {
-		t43 = footer && /* @__PURE__ */ jsx(StyledFooter, {
+	let t37;
+	if ($[58] !== emptyLabel || $[59] !== isLoading || $[60] !== showEmptyState) {
+		t37 = !isLoading && showEmptyState && /* @__PURE__ */ jsx(StyledEmptyState, { children: emptyLabel });
+		$[58] = emptyLabel;
+		$[59] = isLoading;
+		$[60] = showEmptyState;
+		$[61] = t37;
+	} else t37 = $[61];
+	let t38;
+	if ($[62] !== footer || $[63] !== footerStyles || $[64] !== size) {
+		t38 = footer && /* @__PURE__ */ jsx(StyledFooter, {
 			role: "presentation",
 			"data-size": size,
 			styles: footerStyles,
 			children: footer
 		});
-		$[86] = footer;
-		$[87] = footerStyles;
-		$[88] = size;
-		$[89] = t43;
-	} else t43 = $[89];
-	let t44;
-	if ($[90] !== T0 || $[91] !== domRef || $[92] !== mods || $[93] !== size || $[94] !== t31 || $[95] !== t32 || $[96] !== t33 || $[97] !== t39 || $[98] !== t40 || $[99] !== t41 || $[100] !== t42 || $[101] !== t43 || $[102] !== wrapperProps) {
-		t44 = /* @__PURE__ */ jsxs(T0, {
+		$[62] = footer;
+		$[63] = footerStyles;
+		$[64] = size;
+		$[65] = t38;
+	} else t38 = $[65];
+	let t39;
+	if ($[66] !== T0 || $[67] !== domRef || $[68] !== mods || $[69] !== size || $[70] !== t25 || $[71] !== t26 || $[72] !== t27 || $[73] !== t34 || $[74] !== t35 || $[75] !== t36 || $[76] !== t37 || $[77] !== t38 || $[78] !== wrapperProps) {
+		t39 = /* @__PURE__ */ jsxs(T0, {
 			...wrapperProps,
 			ref: domRef,
-			qa: t31,
+			qa: t25,
 			"data-size": size,
 			mods,
-			styles: t32,
+			styles: t26,
 			children: [
-				t33,
-				t39,
-				t40,
-				t41,
-				t42,
-				t43
+				t27,
+				t34,
+				t35,
+				t36,
+				t37,
+				t38
 			]
 		});
-		$[90] = T0;
-		$[91] = domRef;
-		$[92] = mods;
-		$[93] = size;
-		$[94] = t31;
-		$[95] = t32;
-		$[96] = t33;
-		$[97] = t39;
-		$[98] = t40;
-		$[99] = t41;
-		$[100] = t42;
-		$[101] = t43;
-		$[102] = wrapperProps;
-		$[103] = t44;
-	} else t44 = $[103];
-	return t44;
+		$[66] = T0;
+		$[67] = domRef;
+		$[68] = mods;
+		$[69] = size;
+		$[70] = t25;
+		$[71] = t26;
+		$[72] = t27;
+		$[73] = t34;
+		$[74] = t35;
+		$[75] = t36;
+		$[76] = t37;
+		$[77] = t38;
+		$[78] = wrapperProps;
+		$[79] = t39;
+	} else t39 = $[79];
+	return t39;
 }
-function _temp7(item_1) {
-	return item_1.type === "section";
+function _temp7(item_2) {
+	return item_2.type === "section";
 }
-function _temp6(item_0) {
-	return item_0.type === "section";
+function _temp6(item_1) {
+	return item_1.type === "section";
 }
 function _temp5(word_0) {
 	return word_0.length > 0;
@@ -553,7 +519,7 @@ function _temp(key) {
 const _CommandMenu = React.forwardRef(CommandMenu);
 const __CommandMenu = Object.assign(_CommandMenu, {
 	Trigger: _MenuTrigger,
-	Item: _CollectionItem,
+	Item: _MenuCollectionItem,
 	Section,
 	displayName: "CommandMenu"
 });