@cube-dev/ui-kit 0.193.2 → 0.194.0

package/dist/components/actions/CommandMenu/CommandMenu.d.ts

@@ -1,7 +1,8 @@
 
+import { ItemAction } from "../ItemAction/ItemAction.js";
+import { CubeMenuItemProps } from "../Menu/MenuCollectionItem.js";
 import { CubeMenuProps } from "../Menu/Menu.js";
-import { CubeItemBadgeProps } from "../../content/ItemBadge/ItemBadge.js";
-import { CubeItemActionProps } from "../ItemAction/ItemAction.js";
+import { ItemBadge } from "../../content/ItemBadge/ItemBadge.js";
 import "../index.js";
 import { CubeCollectionItemProps } from "../../CollectionItem.js";
 import "../../../index.js";
@@ -9,7 +10,6 @@ import { BasePropsWithoutChildren, ContainerStyleProps, Styles } from "@tenphi/t
 import React, { ReactElement, ReactNode } from "react";
 import * as react_aria0 from "react-aria";
 import * as react_stately0 from "react-stately";
-import * as _react_types_shared0 from "@react-types/shared";
 import { FocusStrategy } from "@react-types/shared";
 
 //#region src/components/actions/CommandMenu/CommandMenu.d.ts
@@ -53,10 +53,10 @@ declare const __CommandMenu: (<T>(props: CubeCommandMenuProps<T> & React.RefAttr
     popoverRef?: React.MutableRefObject<HTMLDivElement | null>;
     mobileType?: "popover" | "tray";
   } & React.RefAttributes<HTMLElement>>;
-  Item: (<T>(props: CubeCollectionItemProps<T>) => ReactElement) & {
-    Action: React.ForwardRefExoticComponent<CubeItemActionProps & React.RefAttributes<_react_types_shared0.FocusableRefValue<HTMLElement, HTMLElement>>>;
-    Badge: React.ForwardRefExoticComponent<CubeItemBadgeProps & React.RefAttributes<HTMLDivElement>>;
-  };
+  Item: (<T>(_props: CubeMenuItemProps<T>) => ReactElement | null) & Pick<(<T>(_props: CubeCollectionItemProps<T>) => ReactElement | null) & {
+    Action: typeof ItemAction;
+    Badge: typeof ItemBadge;
+  }, "Action" | "Badge">;
   Section: <T>(props: react_stately0.SectionProps<T>) => React.JSX.Element;
   displayName: string;
 };

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

@@ -1,10 +1,10 @@
-/** @license MIT | @cube-dev/ui-kit v0.193.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.194.0 | 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";
@@ -12,7 +12,7 @@ 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, { useRef, useState } from "react";
+import React, { useId, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useFilter, useMenu } from "react-aria";
 import { Section, useTreeState } from "react-stately";
@@ -39,7 +39,7 @@ function getNextEnabledKey(keys, currentKey, direction, isDisabled) {
 	return ahead.find(isEnabled) ?? ordered.find(isEnabled) ?? null;
 }
 function CommandMenu(props, ref) {
-	const $ = c(96);
+	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,48 +151,55 @@ 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 [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);
-	const findFirstSelectableItem = () => collectItemKeys(filteredCollectionItems).find((key_2) => !treeState.selectionManager.isDisabled(key_2)) ?? null;
+	const findFirstSelectableItem = () => collectItemKeys(filteredCollectionItems).find((key_3) => !treeState.selectionManager.isDisabled(key_3)) ?? null;
 	const menuRef = useRef(null);
 	const { menuProps } = useMenu({
 		...completeProps,
-		"aria-label": "Command palette menu",
+		"aria-label": t("commandMenu.menu", "Command menu"),
 		shouldUseVirtualFocus: true
 	}, 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,
+				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, {
-			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;
@@ -234,207 +243,191 @@ function CommandMenu(props, ref) {
 	}
 	React.useEffect(t15, t16);
 	const prevSearchValueRef = useRef("");
-	let t17;
-	if ($[24] !== findFirstSelectableItem || $[25] !== hasFilteredItems || $[26] !== searchValue || $[27] !== setFocusedKey || $[28] !== treeState.selectionManager) {
-		t17 = () => {
-			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;
-		};
-		$[24] = findFirstSelectableItem;
-		$[25] = hasFilteredItems;
-		$[26] = searchValue;
-		$[27] = setFocusedKey;
-		$[28] = treeState.selectionManager;
-		$[29] = t17;
-	} else t17 = $[29];
-	let t18;
-	if ($[30] !== findFirstSelectableItem || $[31] !== hasFilteredItems || $[32] !== searchValue) {
-		t18 = [
-			searchValue,
-			findFirstSelectableItem,
-			hasFilteredItems
-		];
-		$[30] = findFirstSelectableItem;
-		$[31] = hasFilteredItems;
-		$[32] = searchValue;
-		$[33] = t18;
-	} else t18 = $[33];
-	React.useEffect(t17, t18);
+	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 nextKey = getNextEnabledKey(collectItemKeys(filteredCollectionItems), currentKey, e.key === "ArrowDown" ? 1 : -1, (key_3) => selectionManager.isDisabled(key_3));
-		if (nextKey != null) {
-			selectionManager.setFocusedKey(nextKey);
-			setFocusedKey(nextKey);
-			focusedKeyRef.current = nextKey;
+		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);
+	};
+	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 t19;
-	if ($[34] !== completeProps || $[35] !== treeState.collection) {
-		t19 = (key_4) => {
-			const node_0 = treeState.collection.getItem(key_4);
-			if (!node_0) return;
-			const onAction_0 = completeProps.onAction;
-			if (onAction_0) onAction_0(key_4);
-			if (node_0.props?.onAction) node_0.props.onAction(key_4);
-		};
-		$[34] = completeProps;
-		$[35] = treeState.collection;
-		$[36] = t19;
-	} else t19 = $[36];
-	const triggerAction = t19;
-	let t20;
-	if ($[37] !== contextProps || $[38] !== focusedKey || $[39] !== treeState.selectionManager || $[40] !== triggerAction) {
-		t20 = (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();
-		};
-		$[37] = contextProps;
-		$[38] = focusedKey;
-		$[39] = treeState.selectionManager;
-		$[40] = triggerAction;
-		$[41] = t20;
-	} else t20 = $[41];
-	const handleActionKey = t20;
-	let t21;
-	if ($[42] !== handleActionKey || $[43] !== handleArrowKey || $[44] !== handleSearchChange || $[45] !== searchValue) {
-		t21 = (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("");
-			}
-		};
-		$[42] = handleActionKey;
-		$[43] = handleArrowKey;
-		$[44] = handleSearchChange;
-		$[45] = searchValue;
-		$[46] = t21;
-	} else t21 = $[46];
-	const handleSearchKeyDown = t21;
 	const extractedStyles = extractStyles(props, CONTAINER_STYLES);
-	let t22;
-	if ($[47] !== searchValue) {
-		t22 = searchValue.trim();
-		$[47] = searchValue;
-		$[48] = t22;
-	} else t22 = $[48];
-	const showEmptyState = t22.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 t23 = !!footer;
-	const t24 = !!header;
-	const t25 = completeProps.mods?.popover;
-	const t26 = completeProps.mods?.tray;
-	let t27;
-	if ($[49] !== t23 || $[50] !== t24 || $[51] !== t25 || $[52] !== t26 || $[53] !== viewHasSections) {
-		t27 = {
+	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: t23,
-			header: t24,
-			popover: t25,
-			tray: t26
+			footer: t18,
+			header: t19,
+			popover: t20,
+			tray: t21
 		};
-		$[49] = t23;
-		$[50] = t24;
-		$[51] = t25;
-		$[52] = t26;
-		$[53] = viewHasSections;
-		$[54] = t27;
-	} else t27 = $[54];
-	const mods = t27;
+		$[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 ($[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;
-	let t28;
-	if ($[55] !== props) {
-		t28 = filterBaseProps(props);
-		$[55] = props;
-		$[56] = t28;
-	} else t28 = $[56];
-	const t29 = t28;
-	const t30 = qa || "CommandMenu";
-	const t31 = mergeStyleLayers(extractedStyles, styles);
-	let t32;
-	if ($[57] !== header || $[58] !== headerStyles || $[59] !== size) {
-		t32 = 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
 		});
-		$[57] = header;
-		$[58] = headerStyles;
-		$[59] = size;
-		$[60] = t32;
-	} else t32 = $[60];
-	const t33 = `${qa || "CommandMenu"}-menu`;
-	const t34 = focusedKey != null ? `${qa || "CommandMenu"}-menu-option-${focusedKey}` : void 0;
-	let t35;
-	if ($[61] !== handleSearchChange) {
-		t35 = (e_2) => handleSearchChange(e_2.target.value);
-		$[61] = handleSearchChange;
-		$[62] = t35;
-	} else t35 = $[62];
-	let t36;
-	if ($[63] !== handleSearchKeyDown || $[64] !== searchInputStyles || $[65] !== searchPlaceholder || $[66] !== searchValue || $[67] !== size || $[68] !== t33 || $[69] !== t34 || $[70] !== t35) {
-		t36 = /* @__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": t33,
-			role: "combobox",
-			"aria-expanded": "true",
-			"aria-haspopup": "listbox",
-			"aria-activedescendant": t34,
-			onChange: t35,
+			"aria-label": t28,
+			"aria-labelledby": t29,
+			"aria-describedby": t30,
+			"aria-details": t31,
+			"aria-controls": t32,
+			role: "searchbox",
+			"aria-activedescendant": activeDescendant,
+			onChange: t33,
 			onKeyDown: handleSearchKeyDown
 		});
-		$[63] = handleSearchKeyDown;
-		$[64] = searchInputStyles;
-		$[65] = searchPlaceholder;
-		$[66] = searchValue;
-		$[67] = size;
-		$[68] = t33;
-		$[69] = t34;
-		$[70] = t35;
-		$[71] = t36;
-	} else t36 = $[71];
-	let t37;
-	if ($[72] !== isLoading) {
-		t37 = 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": "Loading commands",
+			"aria-label": t("commandMenu.loading", "Loading commands"),
 			"aria-hidden": false
 		}) });
-		$[72] = isLoading;
-		$[73] = t37;
-	} else t37 = $[73];
-	const t38 = !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: `${qa || "CommandMenu"}-menu`,
-		"aria-label": "Command menu",
+		id: menuId,
+		"aria-label": t("commandMenu.menu", "Command menu"),
 		qa: "Menu",
 		"data-size": size,
 		mods,
@@ -446,67 +439,67 @@ function CommandMenu(props, ref) {
 		},
 		children: renderedItems
 	});
-	let t39;
-	if ($[74] !== emptyLabel || $[75] !== isLoading || $[76] !== showEmptyState) {
-		t39 = !isLoading && showEmptyState && /* @__PURE__ */ jsx(StyledEmptyState, { children: emptyLabel });
-		$[74] = emptyLabel;
-		$[75] = isLoading;
-		$[76] = showEmptyState;
-		$[77] = t39;
-	} else t39 = $[77];
-	let t40;
-	if ($[78] !== footer || $[79] !== footerStyles || $[80] !== size) {
-		t40 = 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
 		});
-		$[78] = footer;
-		$[79] = footerStyles;
-		$[80] = size;
-		$[81] = t40;
-	} else t40 = $[81];
-	let t41;
-	if ($[82] !== T0 || $[83] !== domRef || $[84] !== mods || $[85] !== size || $[86] !== t29 || $[87] !== t30 || $[88] !== t31 || $[89] !== t32 || $[90] !== t36 || $[91] !== t37 || $[92] !== t38 || $[93] !== t39 || $[94] !== t40) {
-		t41 = /* @__PURE__ */ jsxs(T0, {
-			...t29,
+		$[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: t30,
+			qa: t25,
 			"data-size": size,
 			mods,
-			styles: t31,
+			styles: t26,
 			children: [
-				t32,
+				t27,
+				t34,
+				t35,
 				t36,
 				t37,
-				t38,
-				t39,
-				t40
+				t38
 			]
 		});
-		$[82] = T0;
-		$[83] = domRef;
-		$[84] = mods;
-		$[85] = size;
-		$[86] = t29;
-		$[87] = t30;
-		$[88] = t31;
-		$[89] = t32;
-		$[90] = t36;
-		$[91] = t37;
-		$[92] = t38;
-		$[93] = t39;
-		$[94] = t40;
-		$[95] = t41;
-	} else t41 = $[95];
-	return t41;
+		$[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;
@@ -526,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"
 });