@cube-dev/ui-kit 0.113.1 → 0.115.0

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

@@ -0,0 +1,364 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { extractStyles } from "../../../tasty/utils/styles.js";
+import { CONTAINER_STYLES } from "../../../tasty/styles/list.js";
+import { filterBaseProps } from "../../../tasty/utils/filter-base-props.js";
+import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
+import { TooltipProvider } from "../../overlays/Tooltip/TooltipProvider.js";
+import { LoadingIcon } from "../../../icons/LoadingIcon.js";
+import { useMenuContext } from "../Menu/context.js";
+import { MenuItem } from "../Menu/MenuItem.js";
+import { StyledDivider, StyledFooter, StyledHeader, StyledMenu } from "../Menu/styled.js";
+import { MenuSection } from "../Menu/MenuSection.js";
+import { _MenuTrigger } from "../Menu/MenuTrigger.js";
+import { StyledCommandMenu, StyledEmptyState, StyledLoadingWrapper, StyledSearchInput } from "./styled.js";
+import React, { useCallback, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useFilter, useMenu } from "react-aria";
+import { useDOMRef } from "@react-spectrum/utils";
+import { Item, Section, useTreeState } from "react-stately";
+import { useSyncRef } from "@react-aria/utils";
+
+//#region src/components/actions/CommandMenu/CommandMenu.tsx
+function CommandMenu(props, ref) {
+	const { searchPlaceholder = "Search commands...", searchValue: controlledSearchValue, onSearchChange, filter: customFilter, emptyLabel = "No commands found", searchInputStyles, headerStyles, footerStyles, isLoading = false, shouldFilter = true, autoFocus = true, size = "medium", qa, styles, selectedKeys, defaultSelectedKeys, onSelectionChange, header, footer, ...restMenuProps } = props;
+	const domRef = useDOMRef(ref);
+	const searchInputRef = useRef(null);
+	const contextProps = useMenuContext();
+	const completeProps = mergeProps$1(contextProps, restMenuProps, {
+		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) => String(key)));
+			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) => word.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;
+		};
+		return filterNodes(nodes);
+	}, [searchValue, enhancedFilter]);
+	const treeState = useTreeState({
+		...completeProps,
+		filter: collectionFilter,
+		shouldUseVirtualFocus: true
+	});
+	const collectionItems = [...treeState.collection];
+	collectionItems.some((item) => item.type === "section");
+	const [focusedKey, setFocusedKey] = React.useState(null);
+	const focusedKeyRef = useRef(null);
+	const filteredCollectionItems = useMemo(() => {
+		const term = searchValue.trim();
+		if (!term) return collectionItems;
+		if (term.toLowerCase().split(/\s+/).filter((word) => word.length > 0).length === 0) return collectionItems;
+		const filterNodes = (items) => {
+			const result = [];
+			[...items].forEach((item) => {
+				if (item.type === "section") {
+					const filteredChildren = filterNodes(item.childNodes);
+					if (filteredChildren.length) result.push({
+						...item,
+						childNodes: filteredChildren
+					});
+				} else if (enhancedFilter(item.textValue ?? String(item.rendered ?? ""), term, item.props)) result.push(item);
+			});
+			return result;
+		};
+		return filterNodes(collectionItems);
+	}, [
+		collectionItems,
+		searchValue,
+		enhancedFilter
+	]);
+	const hasFilteredItems = filteredCollectionItems.length > 0;
+	const viewHasSections = filteredCollectionItems.some((item) => item.type === "section");
+	const findFirstSelectableItem = useCallback(() => {
+		const { selectionManager } = treeState;
+		const visit = (items) => {
+			for (const node of items) if (node?.type === "section") {
+				const childResult = visit(Array.from(node.childNodes ?? []));
+				if (childResult != null) return childResult;
+			} else if (node?.type === "item" && !selectionManager.isDisabled(node.key)) return node.key;
+			return null;
+		};
+		return visit(filteredCollectionItems);
+	}, [filteredCollectionItems, treeState.selectionManager]);
+	const menuRef = useRef(null);
+	const { menuProps } = useMenu({
+		...completeProps,
+		"aria-label": "Command palette menu",
+		filter: collectionFilter,
+		shouldUseVirtualFocus: true
+	}, treeState, menuRef);
+	const renderedItems = useMemo(() => {
+		const items = [];
+		let isFirstSection = true;
+		filteredCollectionItems.forEach((item) => {
+			if (item.type === "section") {
+				if (!isFirstSection) items.push(/* @__PURE__ */ jsx(StyledDivider, {
+					role: "separator",
+					"aria-orientation": "horizontal"
+				}, `divider-${String(item.key)}`));
+				items.push(/* @__PURE__ */ jsx(MenuSection, {
+					item,
+					state: treeState,
+					styles: completeProps.sectionStyles,
+					itemStyles: completeProps.itemStyles,
+					headingStyles: completeProps.sectionHeadingStyles,
+					size
+				}, item.key));
+				isFirstSection = false;
+				return;
+			}
+			let menuItem = /* @__PURE__ */ jsx(MenuItem, {
+				item,
+				state: treeState,
+				styles: completeProps.itemStyles,
+				size,
+				onAction: item.onAction
+			}, item.key);
+			if (item.props.tooltip) menuItem = /* @__PURE__ */ jsx(TooltipProvider, {
+				activeWrap: true,
+				placement: "right",
+				...typeof item.props.tooltip === "string" ? { title: item.props.tooltip } : item.props.tooltip,
+				children: menuItem
+			}, item.key);
+			if (item.props.wrapper) menuItem = item.props.wrapper(menuItem);
+			items.push(React.cloneElement(menuItem, { key: item.key }));
+		});
+		return items;
+	}, [
+		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 = setTimeout(() => {
+				if (searchInputRef.current) searchInputRef.current.focus();
+			}, 50);
+			return () => clearTimeout(timeoutId);
+		}
+	}, [autoFocus, contextProps.autoFocus]);
+	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;
+			}
+		}
+		prevSearchValueRef.current = currentSearchValue;
+	}, [
+		searchValue,
+		findFirstSelectableItem,
+		hasFilteredItems
+	]);
+	const extractedStyles = useMemo(() => extractStyles(props, CONTAINER_STYLES), [props]);
+	const showEmptyState = searchValue.trim().length > 0 && !hasFilteredItems && !isLoading;
+	useSyncRef(contextProps, menuRef);
+	const mods = useMemo(() => {
+		let popoverMod = completeProps.mods?.popover;
+		let trayMod = completeProps.mods?.tray;
+		return {
+			sections: viewHasSections,
+			footer: !!footer,
+			header: !!header,
+			popover: popoverMod,
+			tray: trayMod
+		};
+	}, [
+		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) => {
+					if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+						e.preventDefault();
+						const isArrowDown = e.key === "ArrowDown";
+						const { selectionManager } = treeState;
+						const currentKey = focusedKeyRef.current || selectionManager.focusedKey;
+						const getVisibleItemKeys = () => {
+							const keys = [];
+							const visit = (items) => {
+								for (const node of items) if (node?.type === "section") visit(Array.from(node.childNodes ?? []));
+								else if (node?.type === "item") keys.push(node.key);
+							};
+							visit(filteredCollectionItems);
+							return keys;
+						};
+						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 = visibleKeys[i];
+								if (!selectionManager.isDisabled(key)) return key;
+							}
+							return null;
+						};
+						const findFirstLastSelectableKey = (direction, visibleKeys) => {
+							const keysToCheck = direction === "forward" ? visibleKeys : [...visibleKeys].reverse();
+							for (const key of keysToCheck) if (!selectionManager.isDisabled(key)) return key;
+							return null;
+						};
+						const visibleKeys = getVisibleItemKeys();
+						if (visibleKeys.length === 0) return;
+						let nextKey;
+						const direction = isArrowDown ? "forward" : "backward";
+						if (currentKey == null) nextKey = findFirstLastSelectableKey(direction, visibleKeys);
+						else {
+							const currentIndex = visibleKeys.indexOf(currentKey);
+							if (currentIndex === -1) nextKey = findFirstLastSelectableKey(direction, visibleKeys);
+							else {
+								nextKey = findNextSelectableKey(currentIndex, direction, visibleKeys);
+								if (nextKey == null) nextKey = findFirstLastSelectableKey(direction, visibleKeys);
+							}
+						}
+						if (nextKey != null) {
+							selectionManager.setFocusedKey(nextKey);
+							setFocusedKey(nextKey);
+							focusedKeyRef.current = nextKey;
+						}
+					} else if (e.key === "Enter" || e.key === " " && !searchValue.trim()) {
+						const currentFocusedKey = focusedKey || treeState.selectionManager.focusedKey;
+						if (currentFocusedKey != null) {
+							e.preventDefault();
+							if (treeState.selectionManager.selectionMode !== "none") treeState.selectionManager.select(currentFocusedKey, e);
+							else {
+								const node = treeState.collection.getItem(currentFocusedKey);
+								if (node) {
+									const onAction = completeProps.onAction;
+									if (onAction) onAction(currentFocusedKey);
+									if (node.props?.onAction) node.props.onAction(currentFocusedKey);
+								}
+							}
+							const { onClose, closeOnSelect } = contextProps;
+							if (onClose && closeOnSelect !== false) onClose();
+						}
+					} else if (e.key === "Escape") {
+						if (searchValue) {
+							e.preventDefault();
+							handleSearchChange("");
+						}
+					}
+				}
+			}),
+			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 _CommandMenu = React.forwardRef(CommandMenu);
+const __CommandMenu = Object.assign(_CommandMenu, {
+	Trigger: _MenuTrigger,
+	Item,
+	Section,
+	displayName: "CommandMenu"
+});
+
+//#endregion
+export { __CommandMenu };
+//# sourceMappingURL=CommandMenu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CommandMenu.js","names":["mergeProps","MenuTrigger"],"sources":["../../../../src/components/actions/CommandMenu/CommandMenu.tsx"],"sourcesContent":["import { useSyncRef } from '@react-aria/utils';\nimport { useDOMRef } from '@react-spectrum/utils';\nimport { DOMRef, FocusStrategy } from '@react-types/shared';\nimport React, {\n  Key,\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useFilter, useMenu } from 'react-aria';\n// Import Item and Section from Menu for CommandMenu compound component\nimport { Item, Section, useTreeState } from 'react-stately';\n\nimport { LoadingIcon } from '../../../icons';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  extractStyles,\n  filterBaseProps,\n  Styles,\n} from '../../../tasty';\nimport { mergeProps } from '../../../utils/react';\nimport { TooltipProvider } from '../../overlays/Tooltip/TooltipProvider';\nimport { useMenuContext } from '../Menu';\nimport { CubeMenuProps } from '../Menu/Menu';\nimport { MenuItem } from '../Menu/MenuItem';\nimport { MenuSection } from '../Menu/MenuSection';\nimport { MenuTrigger } from '../Menu/MenuTrigger';\nimport {\n  StyledDivider,\n  StyledFooter,\n  StyledHeader,\n  StyledMenu,\n} from '../Menu/styled';\n\nimport {\n  StyledCommandMenu,\n  StyledEmptyState,\n  StyledLoadingWrapper,\n  StyledSearchInput,\n} from './styled';\n\nexport interface CommandMenuItem {\n  // Standard item props\n  id: string;\n  textValue: string;\n\n  // Enhanced search features\n  keywords?: string[];\n  forceMount?: boolean;\n\n  // Standard Menu item props inherited\n  [key: string]: any;\n}\n\nexport interface CubeCommandMenuProps<T>\n  extends BaseProps,\n    ContainerStyleProps,\n    Omit<\n      CubeMenuProps<T>,\n      'selectedKeys' | 'defaultSelectedKeys' | 'onSelectionChange'\n    > {\n  // Search-specific props\n  searchPlaceholder?: string;\n  searchValue?: string;\n  onSearchChange?: (value: string) => void;\n  filter?: (textValue: string, inputValue: string) => boolean;\n  emptyLabel?: ReactNode;\n  searchInputStyles?: Styles;\n  headerStyles?: Styles;\n  footerStyles?: Styles;\n\n  // Advanced search features\n  isLoading?: boolean;\n  shouldFilter?: boolean;\n\n  // Focus management - override the autoFocus from CubeMenuProps to allow boolean | FocusStrategy\n  autoFocus?: boolean | FocusStrategy;\n\n  // Size prop\n  size?: 'medium' | 'large' | (string & {});\n\n  /** Currently selected keys (controlled) */\n  selectedKeys?: string[];\n  /** Initially selected keys (uncontrolled) */\n  defaultSelectedKeys?: string[];\n  /** Handler for selection changes */\n  onSelectionChange?: (keys: string[]) => void;\n}\n\nfunction CommandMenu<T extends object>(\n  props: CubeCommandMenuProps<T>,\n  ref: DOMRef<HTMLDivElement>,\n) {\n  const {\n    searchPlaceholder = 'Search commands...',\n    searchValue: controlledSearchValue,\n    onSearchChange,\n    filter: customFilter,\n    emptyLabel = 'No commands found',\n    searchInputStyles,\n    headerStyles,\n    footerStyles,\n    isLoading = false,\n    shouldFilter = true,\n    autoFocus = true,\n    size = 'medium',\n    qa,\n    styles,\n    selectedKeys,\n    defaultSelectedKeys,\n    onSelectionChange,\n    header,\n    footer,\n    ...restMenuProps\n  } = props;\n\n  const domRef = useDOMRef(ref);\n  const searchInputRef = useRef<HTMLInputElement>(null);\n  const contextProps = useMenuContext();\n\n  // Convert string[] to Set<Key> for React Aria compatibility\n  const ariaSelectedKeys = selectedKeys ? new Set(selectedKeys) : undefined;\n  const ariaDefaultSelectedKeys = defaultSelectedKeys\n    ? new Set(defaultSelectedKeys)\n    : undefined;\n\n  const handleSelectionChange = onSelectionChange\n    ? (keys: 'all' | Set<Key>) => {\n        if (keys === 'all') {\n          // Handle 'all' selection case - collect all available keys\n          const allKeys = Array.from(treeState.collection.getKeys()).map(\n            (key: any) => String(key),\n          );\n          onSelectionChange(allKeys);\n        } else if (keys instanceof Set) {\n          onSelectionChange(Array.from(keys).map((key) => String(key)));\n        } else {\n          onSelectionChange([]);\n        }\n      }\n    : undefined;\n\n  const completeProps = mergeProps(contextProps, restMenuProps, {\n    selectedKeys: ariaSelectedKeys,\n    defaultSelectedKeys: ariaDefaultSelectedKeys,\n    onSelectionChange: handleSelectionChange,\n  });\n\n  // Search state management\n  const [internalSearchValue, setInternalSearchValue] = useState('');\n  const searchValue = controlledSearchValue ?? internalSearchValue;\n\n  const handleSearchChange = useCallback(\n    (value: string) => {\n      if (controlledSearchValue === undefined) {\n        setInternalSearchValue(value);\n      }\n      onSearchChange?.(value);\n    },\n    [controlledSearchValue, onSearchChange],\n  );\n\n  // Filter setup\n  const { contains } = useFilter({ sensitivity: 'base' });\n  const textFilterFn = useMemo(\n    () => customFilter || contains,\n    [customFilter, contains],\n  );\n\n  // Enhanced filter function that supports keywords and forceMount\n  const enhancedFilter = useCallback(\n    (textValue: string, inputValue: string, item?: any) => {\n      // Always show force-mounted items\n      if (item?.forceMount) {\n        return true;\n      }\n\n      // If shouldFilter is false, show all items\n      if (!shouldFilter) {\n        return true;\n      }\n\n      // Split input value into individual words and filter out empty strings\n      const searchWords = inputValue\n        .trim()\n        .toLowerCase()\n        .split(/\\s+/)\n        .filter((word) => word.length > 0);\n\n      // If no search words, show all items\n      if (searchWords.length === 0) {\n        return true;\n      }\n\n      // Collect all searchable text for this item\n      const searchableTexts: string[] = [];\n\n      // Add main text value\n      searchableTexts.push(textValue.toLowerCase());\n\n      // Add keywords if available\n      if (item?.keywords && Array.isArray(item.keywords)) {\n        searchableTexts.push(\n          ...item.keywords.map((keyword: string) => keyword.toLowerCase()),\n        );\n      }\n\n      // Check if ALL search words match at least one of the searchable texts\n      return searchWords.every((searchWord) =>\n        searchableTexts.some((text) => text.includes(searchWord)),\n      );\n    },\n    [shouldFilter],\n  );\n\n  // Collection filter for React Stately\n  const collectionFilter = useCallback(\n    (nodes: Iterable<any>): Iterable<any> => {\n      const term = searchValue.trim();\n\n      // If no search term, return all nodes\n      if (!term) {\n        return nodes;\n      }\n\n      // Split search term into words for multi-word filtering\n      const searchWords = term\n        .toLowerCase()\n        .split(/\\s+/)\n        .filter((word) => word.length > 0);\n\n      // If no valid search words, return all nodes\n      if (searchWords.length === 0) {\n        return nodes;\n      }\n\n      // Recursive helper to filter sections and items\n      const filterNodes = (iter: Iterable<any>): any[] => {\n        const result: any[] = [];\n\n        for (const node of iter) {\n          if (node.type === 'section') {\n            const filteredChildren = filterNodes(node.childNodes);\n\n            if (filteredChildren.length) {\n              result.push({\n                ...node,\n                childNodes: filteredChildren,\n              });\n            }\n          } else {\n            const text = node.textValue ?? String(node.rendered ?? '');\n\n            if (enhancedFilter(text, term, node.props)) {\n              result.push(node);\n            }\n          }\n        }\n\n        return result;\n      };\n\n      return filterNodes(nodes);\n    },\n    [searchValue, enhancedFilter],\n  );\n\n  // Create tree state with filter for both keyboard navigation and rendering\n  const treeStateProps = {\n    ...completeProps,\n    filter: collectionFilter,\n    shouldUseVirtualFocus: true, // Always use virtual focus for CommandMenu\n  };\n\n  const treeState = useTreeState(treeStateProps);\n\n  const collectionItems = [...treeState.collection];\n  const hasSections = collectionItems.some((item) => item.type === 'section');\n\n  // Track focused key for aria-activedescendant\n  const [focusedKey, setFocusedKey] = React.useState<React.Key | null>(null);\n  const focusedKeyRef = useRef<React.Key | null>(null);\n\n  // Apply filtering to collection items for rendering and empty state checks\n  const filteredCollectionItems = useMemo(() => {\n    const term = searchValue.trim();\n    if (!term) {\n      return collectionItems;\n    }\n\n    // Split search term into words for multi-word filtering\n    const searchWords = term\n      .toLowerCase()\n      .split(/\\s+/)\n      .filter((word) => word.length > 0);\n\n    // If no valid search words, return all items\n    if (searchWords.length === 0) {\n      return collectionItems;\n    }\n\n    const filterNodes = (items: any[]): any[] => {\n      const result: any[] = [];\n\n      [...items].forEach((item) => {\n        if (item.type === 'section') {\n          const filteredChildren = filterNodes(item.childNodes);\n          if (filteredChildren.length) {\n            result.push({\n              ...item,\n              childNodes: filteredChildren,\n            });\n          }\n        } else {\n          const text = item.textValue ?? String(item.rendered ?? '');\n          if (enhancedFilter(text, term, item.props)) {\n            result.push(item);\n          }\n        }\n      });\n\n      return result;\n    };\n\n    return filterNodes(collectionItems);\n  }, [collectionItems, searchValue, enhancedFilter]);\n\n  const hasFilteredItems = filteredCollectionItems.length > 0;\n  const viewHasSections = filteredCollectionItems.some(\n    (item) => item.type === 'section',\n  );\n\n  // Helper function to find the first selectable item from filtered results\n  const findFirstSelectableItem = useCallback(() => {\n    const { selectionManager } = treeState;\n\n    const visit = (items: any[]): Key | null => {\n      for (const node of items) {\n        if (node?.type === 'section') {\n          const childResult = visit(Array.from(node.childNodes ?? []));\n          if (childResult != null) return childResult;\n        } else if (\n          node?.type === 'item' &&\n          !selectionManager.isDisabled(node.key)\n        ) {\n          return node.key;\n        }\n      }\n      return null;\n    };\n\n    return visit(filteredCollectionItems);\n  }, [filteredCollectionItems, treeState.selectionManager]);\n\n  // Create a ref for the menu container\n  const menuRef = useRef<HTMLUListElement>(null);\n\n  // Use menu hook for accessibility\n  const { menuProps } = useMenu(\n    {\n      ...completeProps,\n      'aria-label': 'Command palette menu',\n      filter: collectionFilter,\n      shouldUseVirtualFocus: true,\n    },\n    treeState,\n    menuRef,\n  );\n\n  // Manual rendering of menu items (similar to Menu component)\n  const renderedItems = useMemo(() => {\n    const items: React.ReactNode[] = [];\n    let isFirstSection = true;\n\n    filteredCollectionItems.forEach((item) => {\n      if (item.type === 'section') {\n        if (!isFirstSection) {\n          items.push(\n            <StyledDivider\n              key={`divider-${String(item.key)}`}\n              role=\"separator\"\n              aria-orientation=\"horizontal\"\n            />,\n          );\n        }\n\n        items.push(\n          <MenuSection\n            key={item.key}\n            item={item}\n            state={treeState}\n            styles={completeProps.sectionStyles}\n            itemStyles={completeProps.itemStyles}\n            headingStyles={completeProps.sectionHeadingStyles}\n            size={size}\n          />,\n        );\n\n        isFirstSection = false;\n        return;\n      }\n\n      let menuItem = (\n        <MenuItem\n          key={item.key}\n          item={item}\n          state={treeState}\n          styles={completeProps.itemStyles}\n          size={size}\n          onAction={item.onAction}\n        />\n      );\n\n      // Apply tooltip wrapper if tooltip property is provided\n      if (item.props.tooltip) {\n        const tooltipProps =\n          typeof item.props.tooltip === 'string'\n            ? { title: item.props.tooltip }\n            : item.props.tooltip;\n\n        menuItem = (\n          <TooltipProvider\n            key={item.key}\n            activeWrap\n            placement=\"right\"\n            {...tooltipProps}\n          >\n            {menuItem}\n          </TooltipProvider>\n        );\n      }\n\n      // Apply custom wrapper if provided\n      if (item.props.wrapper) {\n        menuItem = item.props.wrapper(menuItem);\n      }\n\n      // Ensure every child has a stable key, even if the wrapper component didn't set one.\n      items.push(React.cloneElement(menuItem, { key: item.key }));\n    });\n\n    return items;\n  }, [\n    filteredCollectionItems,\n    treeState,\n    completeProps.sectionStyles,\n    completeProps.itemStyles,\n\n    completeProps.sectionHeadingStyles,\n  ]);\n\n  // Auto-focus search input\n  React.useEffect(() => {\n    if (autoFocus && searchInputRef.current) {\n      // Use a small timeout to ensure the element is visible and focusable\n      // This is especially important when the CommandMenu is opened in a popover\n      const timeoutId = setTimeout(() => {\n        if (searchInputRef.current) {\n          searchInputRef.current.focus();\n        }\n      }, 0);\n\n      return () => clearTimeout(timeoutId);\n    }\n  }, [autoFocus]);\n\n  // Also focus when the component becomes visible (for trigger/popover usage)\n  React.useEffect(() => {\n    // Check if autoFocus is enabled and we're in a trigger context\n    if (autoFocus && contextProps.autoFocus && searchInputRef.current) {\n      // Use a small timeout to ensure the popover is fully rendered\n      const timeoutId = setTimeout(() => {\n        if (searchInputRef.current) {\n          searchInputRef.current.focus();\n        }\n      }, 50); // Slightly longer timeout for popover context\n\n      return () => clearTimeout(timeoutId);\n    }\n  }, [autoFocus, contextProps.autoFocus]);\n\n  // Track the previous search value to only run auto-focus when search actually changes\n  const prevSearchValueRef = useRef<string>('');\n\n  // Auto-focus first item when search value changes (but not on initial render)\n  React.useEffect(() => {\n    const currentSearchValue = searchValue.trim();\n    const prevSearchValue = prevSearchValueRef.current;\n\n    // Only auto-focus when search value actually changes\n    if (currentSearchValue !== prevSearchValue && currentSearchValue !== '') {\n      const firstSelectableKey = findFirstSelectableItem();\n\n      if (firstSelectableKey && hasFilteredItems) {\n        // Focus the first item in the selection manager\n        treeState.selectionManager.setFocusedKey(firstSelectableKey);\n        setFocusedKey(firstSelectableKey);\n        focusedKeyRef.current = firstSelectableKey;\n      } else {\n        // Clear focus if no items are available\n        treeState.selectionManager.setFocusedKey(null);\n        setFocusedKey(null);\n        focusedKeyRef.current = null;\n      }\n    }\n\n    // Update the previous search value\n    prevSearchValueRef.current = currentSearchValue;\n  }, [searchValue, findFirstSelectableItem, hasFilteredItems]);\n\n  // Extract styles\n  const extractedStyles = useMemo(\n    () => extractStyles(props, CONTAINER_STYLES),\n    [props],\n  );\n\n  // Determine if we should show empty state based on actual filtered collection\n  const hasSearchTerm = searchValue.trim().length > 0;\n  const showEmptyState = hasSearchTerm && !hasFilteredItems && !isLoading;\n\n  // Sync refs\n  useSyncRef(contextProps, menuRef);\n\n  const mods = useMemo(() => {\n    // Determine mods based on menu context\n    let popoverMod = completeProps.mods?.popover;\n    let trayMod = completeProps.mods?.tray;\n\n    return {\n      sections: viewHasSections,\n      footer: !!footer,\n      header: !!header,\n      popover: popoverMod,\n      tray: trayMod,\n    };\n  }, [viewHasSections, footer, header, completeProps.mods]);\n\n  return (\n    <StyledCommandMenu\n      {...filterBaseProps(props)}\n      ref={domRef}\n      qa={qa || 'CommandMenu'}\n      data-size={size}\n      mods={mods}\n      styles={mergeProps(extractedStyles, styles)}\n    >\n      {/* Header */}\n      {header && (\n        <StyledHeader\n          role=\"presentation\"\n          data-size={size}\n          styles={{ border: 'none', ...headerStyles }}\n        >\n          {header}\n        </StyledHeader>\n      )}\n\n      {/* Search Input */}\n      <StyledSearchInput\n        ref={searchInputRef}\n        type=\"search\"\n        placeholder={searchPlaceholder}\n        value={searchValue}\n        styles={searchInputStyles}\n        data-size={size}\n        aria-controls={`${qa || 'CommandMenu'}-menu`}\n        role=\"combobox\"\n        aria-expanded=\"true\"\n        aria-haspopup=\"listbox\"\n        aria-activedescendant={\n          focusedKey != null\n            ? `${qa || 'CommandMenu'}-menu-option-${focusedKey}`\n            : undefined\n        }\n        onChange={(e) => handleSearchChange(e.target.value)}\n        onKeyDown={(e) => {\n          if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {\n            e.preventDefault();\n\n            const isArrowDown = e.key === 'ArrowDown';\n            const { selectionManager } = treeState;\n            // Use the ref to get the current focused key synchronously\n            const currentKey =\n              focusedKeyRef.current || selectionManager.focusedKey;\n\n            // Helper function to get all visible item keys accounting for sections\n            const getVisibleItemKeys = (): Key[] => {\n              const keys: Key[] = [];\n\n              const visit = (items: any[]) => {\n                for (const node of items) {\n                  if (node?.type === 'section') {\n                    visit(Array.from(node.childNodes ?? []));\n                  } else if (node?.type === 'item') {\n                    keys.push(node.key);\n                  }\n                }\n              };\n\n              visit(filteredCollectionItems);\n              return keys;\n            };\n\n            // Helper function to find next selectable key in a direction\n            const findNextSelectableKey = (\n              currentIndex: number,\n              direction: 'forward' | 'backward',\n              visibleKeys: Key[],\n            ) => {\n              const increment = direction === 'forward' ? 1 : -1;\n\n              for (\n                let i = currentIndex + increment;\n                i >= 0 && i < visibleKeys.length;\n                i += increment\n              ) {\n                const key = visibleKeys[i];\n                if (!selectionManager.isDisabled(key)) {\n                  return key;\n                }\n              }\n\n              return null;\n            };\n\n            // Helper function to find first or last selectable key\n            const findFirstLastSelectableKey = (\n              direction: 'forward' | 'backward',\n              visibleKeys: Key[],\n            ) => {\n              const keysToCheck =\n                direction === 'forward'\n                  ? visibleKeys\n                  : [...visibleKeys].reverse();\n\n              for (const key of keysToCheck) {\n                if (!selectionManager.isDisabled(key)) {\n                  return key;\n                }\n              }\n\n              return null;\n            };\n\n            const visibleKeys = getVisibleItemKeys();\n\n            if (visibleKeys.length === 0) {\n              return; // No visible items to navigate\n            }\n\n            let nextKey;\n            const direction = isArrowDown ? 'forward' : 'backward';\n\n            if (currentKey == null) {\n              // No current focus, start from the first/last item\n              nextKey = findFirstLastSelectableKey(direction, visibleKeys);\n            } else {\n              // Find current position in visible keys\n              const currentIndex = visibleKeys.indexOf(currentKey);\n\n              if (currentIndex === -1) {\n                // Current key not in visible items, start from beginning/end\n                nextKey = findFirstLastSelectableKey(direction, visibleKeys);\n              } else {\n                // Find next selectable item from current position\n                nextKey = findNextSelectableKey(\n                  currentIndex,\n                  direction,\n                  visibleKeys,\n                );\n\n                // If no next key found, wrap to first/last selectable item\n                if (nextKey == null) {\n                  nextKey = findFirstLastSelectableKey(direction, visibleKeys);\n                }\n              }\n            }\n\n            if (nextKey != null) {\n              selectionManager.setFocusedKey(nextKey);\n              setFocusedKey(nextKey);\n              focusedKeyRef.current = nextKey; // Update ref immediately\n            }\n          } else if (\n            e.key === 'Enter' ||\n            (e.key === ' ' && !searchValue.trim())\n          ) {\n            const currentFocusedKey =\n              focusedKey || treeState.selectionManager.focusedKey;\n            if (currentFocusedKey != null) {\n              e.preventDefault();\n\n              // Trigger action for the focused item (like Menu does)\n              // First check if there's a selection mode, if so, handle selection\n              if (treeState.selectionManager.selectionMode !== 'none') {\n                treeState.selectionManager.select(currentFocusedKey, e);\n              } else {\n                // Default behavior: trigger action\n                const node = treeState.collection.getItem(currentFocusedKey);\n                if (node) {\n                  // Call the tree state's action handler\n                  const onAction = (completeProps as any).onAction;\n                  if (onAction) {\n                    onAction(currentFocusedKey);\n                  }\n                  // Also call the item's individual onAction if it exists\n                  if (node.props?.onAction) {\n                    node.props.onAction(currentFocusedKey);\n                  }\n                }\n              }\n\n              // Close the menu if we're in a trigger context and closeOnSelect is enabled (default behavior)\n              const { onClose, closeOnSelect } = contextProps;\n              if (onClose && closeOnSelect !== false) {\n                onClose();\n              }\n            }\n          } else if (e.key === 'Escape') {\n            if (searchValue) {\n              e.preventDefault();\n              handleSearchChange('');\n            }\n          }\n        }}\n      />\n\n      {/* Loading State */}\n      {isLoading && (\n        <StyledLoadingWrapper>\n          <LoadingIcon\n            role=\"progressbar\"\n            aria-label=\"Loading commands\"\n            aria-hidden={false}\n          />\n        </StyledLoadingWrapper>\n      )}\n\n      {/* Menu Content - always render unless loading */}\n      {!isLoading && !showEmptyState && (\n        <StyledMenu\n          {...menuProps}\n          ref={menuRef}\n          id={`${qa || 'CommandMenu'}-menu`}\n          aria-label=\"Command menu\"\n          qa=\"Menu\"\n          data-size={size}\n          mods={mods}\n          styles={{\n            border: 'none',\n            boxShadow: 'none',\n            radius: 0,\n            padding: '0.5x',\n          }}\n        >\n          {renderedItems}\n        </StyledMenu>\n      )}\n\n      {/* Empty State - show when search term exists but no results */}\n      {!isLoading && showEmptyState && (\n        <StyledEmptyState>{emptyLabel}</StyledEmptyState>\n      )}\n\n      {/* Footer */}\n      {footer && (\n        <StyledFooter\n          role=\"presentation\"\n          data-size={size}\n          styles={footerStyles}\n        >\n          {footer}\n        </StyledFooter>\n      )}\n    </StyledCommandMenu>\n  );\n}\n\n// forwardRef doesn't support generic parameters, so cast the result to the correct type\nconst _CommandMenu = React.forwardRef(CommandMenu) as <T>(\n  props: CubeCommandMenuProps<T> & React.RefAttributes<HTMLDivElement>,\n) => ReactElement;\n\n// Attach Trigger alias from MenuTrigger for consistent API\n// Also attach Item and Section for compound component pattern\nconst __CommandMenu = Object.assign(_CommandMenu, {\n  Trigger: MenuTrigger,\n  Item,\n  Section,\n  displayName: 'CommandMenu',\n});\n\nexport { __CommandMenu as CommandMenu };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA8FA,SAAS,YACP,OACA,KACA;CACA,MAAM,EACJ,oBAAoB,sBACpB,aAAa,uBACb,gBACA,QAAQ,cACR,aAAa,qBACb,mBACA,cACA,cACA,YAAY,OACZ,eAAe,MACf,YAAY,MACZ,OAAO,UACP,IACA,QACA,cACA,qBACA,mBACA,QACA,QACA,GAAG,kBACD;CAEJ,MAAM,SAAS,UAAU,IAAI;CAC7B,MAAM,iBAAiB,OAAyB,KAAK;CACrD,MAAM,eAAe,gBAAgB;CAwBrC,MAAM,gBAAgBA,aAAW,cAAc,eAAe;EAC5D,cAtBuB,eAAe,IAAI,IAAI,aAAa,GAAG;EAuB9D,qBAtB8B,sBAC5B,IAAI,IAAI,oBAAoB,GAC5B;EAqBF,mBAnB4B,qBACzB,SAA2B;AAC1B,OAAI,SAAS,MAKX,mBAHgB,MAAM,KAAK,UAAU,WAAW,SAAS,CAAC,CAAC,KACxD,QAAa,OAAO,IAAI,CAC1B,CACyB;YACjB,gBAAgB,IACzB,mBAAkB,MAAM,KAAK,KAAK,CAAC,KAAK,QAAQ,OAAO,IAAI,CAAC,CAAC;OAE7D,mBAAkB,EAAE,CAAC;MAGzB;EAMH,CAAC;CAGF,MAAM,CAAC,qBAAqB,0BAA0B,SAAS,GAAG;CAClE,MAAM,cAAc,yBAAyB;CAE7C,MAAM,qBAAqB,aACxB,UAAkB;AACjB,MAAI,0BAA0B,OAC5B,wBAAuB,MAAM;AAE/B,mBAAiB,MAAM;IAEzB,CAAC,uBAAuB,eAAe,CACxC;CAGD,MAAM,EAAE,aAAa,UAAU,EAAE,aAAa,QAAQ,CAAC;AAClC,eACb,gBAAgB,UACtB,CAAC,cAAc,SAAS,CACzB;CAGD,MAAM,iBAAiB,aACpB,WAAmB,YAAoB,SAAe;AAErD,MAAI,MAAM,WACR,QAAO;AAIT,MAAI,CAAC,aACH,QAAO;EAIT,MAAM,cAAc,WACjB,MAAM,CACN,aAAa,CACb,MAAM,MAAM,CACZ,QAAQ,SAAS,KAAK,SAAS,EAAE;AAGpC,MAAI,YAAY,WAAW,EACzB,QAAO;EAIT,MAAM,kBAA4B,EAAE;AAGpC,kBAAgB,KAAK,UAAU,aAAa,CAAC;AAG7C,MAAI,MAAM,YAAY,MAAM,QAAQ,KAAK,SAAS,CAChD,iBAAgB,KACd,GAAG,KAAK,SAAS,KAAK,YAAoB,QAAQ,aAAa,CAAC,CACjE;AAIH,SAAO,YAAY,OAAO,eACxB,gBAAgB,MAAM,SAAS,KAAK,SAAS,WAAW,CAAC,CAC1D;IAEH,CAAC,aAAa,CACf;CAGD,MAAM,mBAAmB,aACtB,UAAwC;EACvC,MAAM,OAAO,YAAY,MAAM;AAG/B,MAAI,CAAC,KACH,QAAO;AAUT,MANoB,KACjB,aAAa,CACb,MAAM,MAAM,CACZ,QAAQ,SAAS,KAAK,SAAS,EAAE,CAGpB,WAAW,EACzB,QAAO;EAIT,MAAM,eAAe,SAA+B;GAClD,MAAM,SAAgB,EAAE;AAExB,QAAK,MAAM,QAAQ,KACjB,KAAI,KAAK,SAAS,WAAW;IAC3B,MAAM,mBAAmB,YAAY,KAAK,WAAW;AAErD,QAAI,iBAAiB,OACnB,QAAO,KAAK;KACV,GAAG;KACH,YAAY;KACb,CAAC;cAKA,eAFS,KAAK,aAAa,OAAO,KAAK,YAAY,GAAG,EAEjC,MAAM,KAAK,MAAM,CACxC,QAAO,KAAK,KAAK;AAKvB,UAAO;;AAGT,SAAO,YAAY,MAAM;IAE3B,CAAC,aAAa,eAAe,CAC9B;CASD,MAAM,YAAY,aANK;EACrB,GAAG;EACH,QAAQ;EACR,uBAAuB;EACxB,CAE6C;CAE9C,MAAM,kBAAkB,CAAC,GAAG,UAAU,WAAW;AAC7B,iBAAgB,MAAM,SAAS,KAAK,SAAS,UAAU;CAG3E,MAAM,CAAC,YAAY,iBAAiB,MAAM,SAA2B,KAAK;CAC1E,MAAM,gBAAgB,OAAyB,KAAK;CAGpD,MAAM,0BAA0B,cAAc;EAC5C,MAAM,OAAO,YAAY,MAAM;AAC/B,MAAI,CAAC,KACH,QAAO;AAUT,MANoB,KACjB,aAAa,CACb,MAAM,MAAM,CACZ,QAAQ,SAAS,KAAK,SAAS,EAAE,CAGpB,WAAW,EACzB,QAAO;EAGT,MAAM,eAAe,UAAwB;GAC3C,MAAM,SAAgB,EAAE;AAExB,IAAC,GAAG,MAAM,CAAC,SAAS,SAAS;AAC3B,QAAI,KAAK,SAAS,WAAW;KAC3B,MAAM,mBAAmB,YAAY,KAAK,WAAW;AACrD,SAAI,iBAAiB,OACnB,QAAO,KAAK;MACV,GAAG;MACH,YAAY;MACb,CAAC;eAIA,eADS,KAAK,aAAa,OAAO,KAAK,YAAY,GAAG,EACjC,MAAM,KAAK,MAAM,CACxC,QAAO,KAAK,KAAK;KAGrB;AAEF,UAAO;;AAGT,SAAO,YAAY,gBAAgB;IAClC;EAAC;EAAiB;EAAa;EAAe,CAAC;CAElD,MAAM,mBAAmB,wBAAwB,SAAS;CAC1D,MAAM,kBAAkB,wBAAwB,MAC7C,SAAS,KAAK,SAAS,UACzB;CAGD,MAAM,0BAA0B,kBAAkB;EAChD,MAAM,EAAE,qBAAqB;EAE7B,MAAM,SAAS,UAA6B;AAC1C,QAAK,MAAM,QAAQ,MACjB,KAAI,MAAM,SAAS,WAAW;IAC5B,MAAM,cAAc,MAAM,MAAM,KAAK,KAAK,cAAc,EAAE,CAAC,CAAC;AAC5D,QAAI,eAAe,KAAM,QAAO;cAEhC,MAAM,SAAS,UACf,CAAC,iBAAiB,WAAW,KAAK,IAAI,CAEtC,QAAO,KAAK;AAGhB,UAAO;;AAGT,SAAO,MAAM,wBAAwB;IACpC,CAAC,yBAAyB,UAAU,iBAAiB,CAAC;CAGzD,MAAM,UAAU,OAAyB,KAAK;CAG9C,MAAM,EAAE,cAAc,QACpB;EACE,GAAG;EACH,cAAc;EACd,QAAQ;EACR,uBAAuB;EACxB,EACD,WACA,QACD;CAGD,MAAM,gBAAgB,cAAc;EAClC,MAAM,QAA2B,EAAE;EACnC,IAAI,iBAAiB;AAErB,0BAAwB,SAAS,SAAS;AACxC,OAAI,KAAK,SAAS,WAAW;AAC3B,QAAI,CAAC,eACH,OAAM,KACJ,oBAAC;KAEC,MAAK;KACL,oBAAiB;OAFZ,WAAW,OAAO,KAAK,IAAI,GAGhC,CACH;AAGH,UAAM,KACJ,oBAAC;KAEO;KACN,OAAO;KACP,QAAQ,cAAc;KACtB,YAAY,cAAc;KAC1B,eAAe,cAAc;KACvB;OAND,KAAK,IAOV,CACH;AAED,qBAAiB;AACjB;;GAGF,IAAI,WACF,oBAAC;IAEO;IACN,OAAO;IACP,QAAQ,cAAc;IAChB;IACN,UAAU,KAAK;MALV,KAAK,IAMV;AAIJ,OAAI,KAAK,MAAM,QAMb,YACE,oBAAC;IAEC;IACA,WAAU;IACV,GATF,OAAO,KAAK,MAAM,YAAY,WAC1B,EAAE,OAAO,KAAK,MAAM,SAAS,GAC7B,KAAK,MAAM;cASZ;MALI,KAAK,IAMM;AAKtB,OAAI,KAAK,MAAM,QACb,YAAW,KAAK,MAAM,QAAQ,SAAS;AAIzC,SAAM,KAAK,MAAM,aAAa,UAAU,EAAE,KAAK,KAAK,KAAK,CAAC,CAAC;IAC3D;AAEF,SAAO;IACN;EACD;EACA;EACA,cAAc;EACd,cAAc;EAEd,cAAc;EACf,CAAC;AAGF,OAAM,gBAAgB;AACpB,MAAI,aAAa,eAAe,SAAS;GAGvC,MAAM,YAAY,iBAAiB;AACjC,QAAI,eAAe,QACjB,gBAAe,QAAQ,OAAO;MAE/B,EAAE;AAEL,gBAAa,aAAa,UAAU;;IAErC,CAAC,UAAU,CAAC;AAGf,OAAM,gBAAgB;AAEpB,MAAI,aAAa,aAAa,aAAa,eAAe,SAAS;GAEjE,MAAM,YAAY,iBAAiB;AACjC,QAAI,eAAe,QACjB,gBAAe,QAAQ,OAAO;MAE/B,GAAG;AAEN,gBAAa,aAAa,UAAU;;IAErC,CAAC,WAAW,aAAa,UAAU,CAAC;CAGvC,MAAM,qBAAqB,OAAe,GAAG;AAG7C,OAAM,gBAAgB;EACpB,MAAM,qBAAqB,YAAY,MAAM;AAI7C,MAAI,uBAHoB,mBAAmB,WAGG,uBAAuB,IAAI;GACvE,MAAM,qBAAqB,yBAAyB;AAEpD,OAAI,sBAAsB,kBAAkB;AAE1C,cAAU,iBAAiB,cAAc,mBAAmB;AAC5D,kBAAc,mBAAmB;AACjC,kBAAc,UAAU;UACnB;AAEL,cAAU,iBAAiB,cAAc,KAAK;AAC9C,kBAAc,KAAK;AACnB,kBAAc,UAAU;;;AAK5B,qBAAmB,UAAU;IAC5B;EAAC;EAAa;EAAyB;EAAiB,CAAC;CAG5D,MAAM,kBAAkB,cAChB,cAAc,OAAO,iBAAiB,EAC5C,CAAC,MAAM,CACR;CAID,MAAM,iBADgB,YAAY,MAAM,CAAC,SAAS,KACV,CAAC,oBAAoB,CAAC;AAG9D,YAAW,cAAc,QAAQ;CAEjC,MAAM,OAAO,cAAc;EAEzB,IAAI,aAAa,cAAc,MAAM;EACrC,IAAI,UAAU,cAAc,MAAM;AAElC,SAAO;GACL,UAAU;GACV,QAAQ,CAAC,CAAC;GACV,QAAQ,CAAC,CAAC;GACV,SAAS;GACT,MAAM;GACP;IACA;EAAC;EAAiB;EAAQ;EAAQ,cAAc;EAAK,CAAC;AAEzD,QACE,qBAAC;EACC,GAAI,gBAAgB,MAAM;EAC1B,KAAK;EACL,IAAI,MAAM;EACV,aAAW;EACL;EACN,QAAQA,aAAW,iBAAiB,OAAO;;GAG1C,UACC,oBAAC;IACC,MAAK;IACL,aAAW;IACX,QAAQ;KAAE,QAAQ;KAAQ,GAAG;KAAc;cAE1C;KACY;GAIjB,oBAAC;IACC,KAAK;IACL,MAAK;IACL,aAAa;IACb,OAAO;IACP,QAAQ;IACR,aAAW;IACX,iBAAe,GAAG,MAAM,cAAc;IACtC,MAAK;IACL,iBAAc;IACd,iBAAc;IACd,yBACE,cAAc,OACV,GAAG,MAAM,cAAc,eAAe,eACtC;IAEN,WAAW,MAAM,mBAAmB,EAAE,OAAO,MAAM;IACnD,YAAY,MAAM;AAChB,SAAI,EAAE,QAAQ,eAAe,EAAE,QAAQ,WAAW;AAChD,QAAE,gBAAgB;MAElB,MAAM,cAAc,EAAE,QAAQ;MAC9B,MAAM,EAAE,qBAAqB;MAE7B,MAAM,aACJ,cAAc,WAAW,iBAAiB;MAG5C,MAAM,2BAAkC;OACtC,MAAM,OAAc,EAAE;OAEtB,MAAM,SAAS,UAAiB;AAC9B,aAAK,MAAM,QAAQ,MACjB,KAAI,MAAM,SAAS,UACjB,OAAM,MAAM,KAAK,KAAK,cAAc,EAAE,CAAC,CAAC;iBAC/B,MAAM,SAAS,OACxB,MAAK,KAAK,KAAK,IAAI;;AAKzB,aAAM,wBAAwB;AAC9B,cAAO;;MAIT,MAAM,yBACJ,cACA,WACA,gBACG;OACH,MAAM,YAAY,cAAc,YAAY,IAAI;AAEhD,YACE,IAAI,IAAI,eAAe,WACvB,KAAK,KAAK,IAAI,YAAY,QAC1B,KAAK,WACL;QACA,MAAM,MAAM,YAAY;AACxB,YAAI,CAAC,iBAAiB,WAAW,IAAI,CACnC,QAAO;;AAIX,cAAO;;MAIT,MAAM,8BACJ,WACA,gBACG;OACH,MAAM,cACJ,cAAc,YACV,cACA,CAAC,GAAG,YAAY,CAAC,SAAS;AAEhC,YAAK,MAAM,OAAO,YAChB,KAAI,CAAC,iBAAiB,WAAW,IAAI,CACnC,QAAO;AAIX,cAAO;;MAGT,MAAM,cAAc,oBAAoB;AAExC,UAAI,YAAY,WAAW,EACzB;MAGF,IAAI;MACJ,MAAM,YAAY,cAAc,YAAY;AAE5C,UAAI,cAAc,KAEhB,WAAU,2BAA2B,WAAW,YAAY;WACvD;OAEL,MAAM,eAAe,YAAY,QAAQ,WAAW;AAEpD,WAAI,iBAAiB,GAEnB,WAAU,2BAA2B,WAAW,YAAY;YACvD;AAEL,kBAAU,sBACR,cACA,WACA,YACD;AAGD,YAAI,WAAW,KACb,WAAU,2BAA2B,WAAW,YAAY;;;AAKlE,UAAI,WAAW,MAAM;AACnB,wBAAiB,cAAc,QAAQ;AACvC,qBAAc,QAAQ;AACtB,qBAAc,UAAU;;gBAG1B,EAAE,QAAQ,WACT,EAAE,QAAQ,OAAO,CAAC,YAAY,MAAM,EACrC;MACA,MAAM,oBACJ,cAAc,UAAU,iBAAiB;AAC3C,UAAI,qBAAqB,MAAM;AAC7B,SAAE,gBAAgB;AAIlB,WAAI,UAAU,iBAAiB,kBAAkB,OAC/C,WAAU,iBAAiB,OAAO,mBAAmB,EAAE;YAClD;QAEL,MAAM,OAAO,UAAU,WAAW,QAAQ,kBAAkB;AAC5D,YAAI,MAAM;SAER,MAAM,WAAY,cAAsB;AACxC,aAAI,SACF,UAAS,kBAAkB;AAG7B,aAAI,KAAK,OAAO,SACd,MAAK,MAAM,SAAS,kBAAkB;;;OAM5C,MAAM,EAAE,SAAS,kBAAkB;AACnC,WAAI,WAAW,kBAAkB,MAC/B,UAAS;;gBAGJ,EAAE,QAAQ,UACnB;UAAI,aAAa;AACf,SAAE,gBAAgB;AAClB,0BAAmB,GAAG;;;;KAI5B;GAGD,aACC,oBAAC,kCACC,oBAAC;IACC,MAAK;IACL,cAAW;IACX,eAAa;KACb,GACmB;GAIxB,CAAC,aAAa,CAAC,kBACd,oBAAC;IACC,GAAI;IACJ,KAAK;IACL,IAAI,GAAG,MAAM,cAAc;IAC3B,cAAW;IACX,IAAG;IACH,aAAW;IACL;IACN,QAAQ;KACN,QAAQ;KACR,WAAW;KACX,QAAQ;KACR,SAAS;KACV;cAEA;KACU;GAId,CAAC,aAAa,kBACb,oBAAC,8BAAkB,aAA8B;GAIlD,UACC,oBAAC;IACC,MAAK;IACL,aAAW;IACX,QAAQ;cAEP;KACY;;GAEC;;AAKxB,MAAM,eAAe,MAAM,WAAW,YAAY;AAMlD,MAAM,gBAAgB,OAAO,OAAO,cAAc;CAChD,SAASC;CACT;CACA;CACA,aAAa;CACd,CAAC"}

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

@@ -0,0 +1,2 @@
+
+import { CommandMenuItem, CubeCommandMenuProps, __CommandMenu } from "./CommandMenu.js";

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

@@ -0,0 +1,103 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { tasty } from "../../../tasty/tasty.js";
+
+//#region src/components/actions/CommandMenu/styled.tsx
+const StyledCommandMenu = tasty({
+	qa: "CommandMenu",
+	styles: {
+		display: "grid",
+		flow: "row",
+		gridColumns: "minmax(0, 1fr)",
+		gridRows: {
+			"": "max-content minmax(0, 1fr)",
+			header: "max-content max-content minmax(0, 1fr)",
+			footer: "max-content minmax(0, 1fr) max-content max-content",
+			"header & footer": "max-content max-content minmax(0, 1fr) max-content max-content"
+		},
+		placeContent: "stretch",
+		placeItems: "stretch",
+		fill: "#white",
+		border: "#border",
+		radius: "(1cr + 1bw)",
+		shadow: {
+			"": false,
+			"popover | tray": "0px 5px 15px #dark.05"
+		},
+		overflow: "hidden",
+		height: {
+			"": "initial",
+			popover: "initial max-content (50vh - $size-md)",
+			tray: "initial max-content (100vh - $size-md)"
+		}
+	}
+});
+const StyledSearchInput = tasty({
+	qa: "SearchInput",
+	as: "input",
+	styles: {
+		recipe: "reset input | input-autofill",
+		display: "grid",
+		width: "100%",
+		color: "#dark",
+		border: "#border bottom",
+		transition: "theme",
+		radius: 0,
+		textAlign: "left",
+		preset: "t3",
+		userSelect: "auto",
+		height: "($size + 1x)",
+		padding: {
+			"": ".5x 1.5x",
+			prefix: "0 1.5x 0 .5x"
+		},
+		$size: {
+			"": "$size-md",
+			"size=small": "$size-sm",
+			"size=medium": "$size-md",
+			"size=large": "$size-lg"
+		},
+		Placeholder: {
+			$: "::placeholder",
+			recipe: "input-placeholder"
+		},
+		"&::-webkit-search-cancel-button": { recipe: "input-search-cancel-button" }
+	}
+});
+const StyledLoadingWrapper = tasty({
+	qa: "LoadingWrapper",
+	styles: {
+		display: "flex",
+		padding: "2x",
+		placeContent: "center",
+		placeItems: "center",
+		color: "#dark-03"
+	}
+});
+const StyledEmptyState = tasty({
+	qa: "EmptyState",
+	styles: {
+		display: "flex",
+		padding: "2x",
+		placeContent: "center",
+		placeItems: "center",
+		color: "#dark-03",
+		preset: "t3"
+	}
+});
+const StyledMenuWrapper = tasty({
+	qa: "MenuWrapper",
+	styles: {
+		display: "grid",
+		flow: "row",
+		gridColumns: "minmax(0, 1fr)",
+		placeContent: "stretch",
+		placeItems: "stretch",
+		width: "100%",
+		overflow: "auto",
+		scrollbar: "styled"
+	}
+});
+
+//#endregion
+export { StyledCommandMenu, StyledEmptyState, StyledLoadingWrapper, StyledSearchInput };
+//# sourceMappingURL=styled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","names":[],"sources":["../../../../src/components/actions/CommandMenu/styled.tsx"],"sourcesContent":["import { tasty } from '../../../tasty';\n\nexport const StyledCommandMenu = tasty({\n  qa: 'CommandMenu',\n  styles: {\n    display: 'grid',\n    flow: 'row',\n    gridColumns: 'minmax(0, 1fr)',\n    gridRows: {\n      '': 'max-content minmax(0, 1fr)',\n      header: 'max-content max-content minmax(0, 1fr)',\n      footer: 'max-content minmax(0, 1fr) max-content max-content',\n      'header & footer':\n        'max-content max-content minmax(0, 1fr) max-content max-content',\n    },\n    placeContent: 'stretch',\n    placeItems: 'stretch',\n    fill: '#white',\n    border: '#border',\n    radius: '(1cr + 1bw)',\n    shadow: {\n      '': false,\n      'popover | tray': '0px 5px 15px #dark.05',\n    },\n    overflow: 'hidden',\n    height: {\n      '': 'initial',\n      popover: 'initial max-content (50vh - $size-md)',\n      tray: 'initial max-content (100vh - $size-md)',\n    },\n  },\n});\n\nexport const StyledSearchInput = tasty({\n  qa: 'SearchInput',\n  as: 'input',\n  styles: {\n    recipe: 'reset input | input-autofill',\n    display: 'grid',\n    width: '100%',\n    color: '#dark',\n    border: '#border bottom',\n    transition: 'theme',\n    radius: 0,\n    textAlign: 'left',\n    preset: 't3',\n    userSelect: 'auto',\n    height: '($size + 1x)',\n    padding: {\n      '': '.5x 1.5x',\n      prefix: '0 1.5x 0 .5x',\n    },\n\n    $size: {\n      '': '$size-md',\n      'size=small': '$size-sm',\n      'size=medium': '$size-md',\n      'size=large': '$size-lg',\n    },\n\n    Placeholder: {\n      $: '::placeholder',\n      recipe: 'input-placeholder',\n    },\n    '&::-webkit-search-cancel-button': {\n      recipe: 'input-search-cancel-button',\n    },\n  },\n});\n\nexport const StyledLoadingWrapper = tasty({\n  qa: 'LoadingWrapper',\n  styles: {\n    display: 'flex',\n    padding: '2x',\n    placeContent: 'center',\n    placeItems: 'center',\n    color: '#dark-03',\n  },\n});\n\nexport const StyledEmptyState = tasty({\n  qa: 'EmptyState',\n  styles: {\n    display: 'flex',\n    padding: '2x',\n    placeContent: 'center',\n    placeItems: 'center',\n    color: '#dark-03',\n    preset: 't3',\n  },\n});\n\nexport const StyledMenuWrapper = tasty({\n  qa: 'MenuWrapper',\n  styles: {\n    display: 'grid',\n    flow: 'row',\n    gridColumns: 'minmax(0, 1fr)',\n    placeContent: 'stretch',\n    placeItems: 'stretch',\n    width: '100%',\n    overflow: 'auto',\n    scrollbar: 'styled',\n  },\n});\n"],"mappings":";;;;AAEA,MAAa,oBAAoB,MAAM;CACrC,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,MAAM;EACN,aAAa;EACb,UAAU;GACR,IAAI;GACJ,QAAQ;GACR,QAAQ;GACR,mBACE;GACH;EACD,cAAc;EACd,YAAY;EACZ,MAAM;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;GACN,IAAI;GACJ,kBAAkB;GACnB;EACD,UAAU;EACV,QAAQ;GACN,IAAI;GACJ,SAAS;GACT,MAAM;GACP;EACF;CACF,CAAC;AAEF,MAAa,oBAAoB,MAAM;CACrC,IAAI;CACJ,IAAI;CACJ,QAAQ;EACN,QAAQ;EACR,SAAS;EACT,OAAO;EACP,OAAO;EACP,QAAQ;EACR,YAAY;EACZ,QAAQ;EACR,WAAW;EACX,QAAQ;EACR,YAAY;EACZ,QAAQ;EACR,SAAS;GACP,IAAI;GACJ,QAAQ;GACT;EAED,OAAO;GACL,IAAI;GACJ,cAAc;GACd,eAAe;GACf,cAAc;GACf;EAED,aAAa;GACX,GAAG;GACH,QAAQ;GACT;EACD,mCAAmC,EACjC,QAAQ,8BACT;EACF;CACF,CAAC;AAEF,MAAa,uBAAuB,MAAM;CACxC,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,SAAS;EACT,cAAc;EACd,YAAY;EACZ,OAAO;EACR;CACF,CAAC;AAEF,MAAa,mBAAmB,MAAM;CACpC,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,SAAS;EACT,cAAc;EACd,YAAY;EACZ,OAAO;EACP,QAAQ;EACT;CACF,CAAC;AAEF,MAAa,oBAAoB,MAAM;CACrC,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,MAAM;EACN,aAAa;EACb,cAAc;EACd,YAAY;EACZ,OAAO;EACP,UAAU;EACV,WAAW;EACZ;CACF,CAAC"}

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

@@ -0,0 +1,28 @@
+
+import { Styles } from "../../../tasty/styles/types.js";
+import { BaseProps } from "../../../tasty/types.js";
+import "../../../tasty/index.js";
+import { TooltipProvider } from "../../overlays/Tooltip/TooltipProvider.js";
+import { CubeUseActionProps } from "../use-action.js";
+import * as react from "react";
+import { ComponentProps, ReactNode } from "react";
+import * as _react_types_shared0 from "@react-types/shared";
+
+//#region src/components/actions/ItemAction/ItemAction.d.ts
+interface CubeItemActionProps extends Omit<CubeUseActionProps, 'as' | 'htmlType'>, Omit<BaseProps, 'as'> {
+  icon?: ReactNode | 'checkbox';
+  children?: ReactNode;
+  isLoading?: boolean;
+  isSelected?: boolean;
+  type?: 'primary' | 'secondary' | 'outline' | 'neutral' | 'clear' | (string & {});
+  theme?: 'default' | 'danger' | 'success' | 'warning' | 'note' | 'special' | (string & {});
+  tooltip?: string | (Omit<ComponentProps<typeof TooltipProvider>, 'children'> & {
+    title?: string;
+  });
+  styles?: Styles;
+  tabIndex?: number;
+}
+declare const ItemAction: react.ForwardRefExoticComponent<Omit<CubeItemActionProps, "ref"> & react.RefAttributes<_react_types_shared0.FocusableRefValue<HTMLElement, HTMLElement>>>;
+//#endregion
+export { CubeItemActionProps, ItemAction };
+//# sourceMappingURL=ItemAction.d.ts.map