@cube-dev/ui-kit 0.0.0-canary-a5b5501 → 0.0.0-canary-162cdb3

package/dist/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @cube-dev/ui-kit
 
+## 0.192.1
+
+### Patch Changes
+
+- [#1496](https://github.com/cube-js/cube-ui-kit/pull/1496) [`bdc1cc70`](https://github.com/cube-js/cube-ui-kit/commit/bdc1cc70ad2b0bab7bcbbe687240a3c2ee2db3ec) Thanks [@tenphi](https://github.com/tenphi)! - Preserve inline Layout.Panel sizes when switching to dialog mode or resizing the dialog's host.
+
+- [#1497](https://github.com/cube-js/cube-ui-kit/pull/1497) [`c076ab70`](https://github.com/cube-js/cube-ui-kit/commit/c076ab7027e18900fb64c4cf671f65bcc828aaaa) Thanks [@tenphi](https://github.com/tenphi)! - Reduce ItemTable and DataTable scrolling work by retaining virtual row keys and unchanged default cell text, and skip row-position reads while movement animation is disabled. Keep virtual height estimates and tooltip overflow detection current when row sizes, text or inherited table styling change.
+
 ## 0.192.0
 
 ### Minor Changes

package/dist/_internal/hooks/use-debounced-value.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a5b5501 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-162cdb3 | Cube Dev Team */
 import { c } from "react/compiler-runtime";
 import { useEffect, useRef, useState } from "react";
 

package/dist/_internal/hooks/use-deprecation-warning.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a5b5501 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-162cdb3 | Cube Dev Team */
 import { deprecationWarning } from "../../utils/warnings.js";
 import { c } from "react/compiler-runtime";
 import React, { useEffect } from "react";

package/dist/_internal/hooks/use-event.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a5b5501 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-162cdb3 | Cube Dev Team */
 import { useSyncRef } from "./use-sync-ref.js";
 import { c } from "react/compiler-runtime";
 

package/dist/_internal/hooks/use-is-first-render.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a5b5501 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-162cdb3 | Cube Dev Team */
 import { useRef } from "react";
 
 //#region src/_internal/hooks/use-is-first-render.ts

package/dist/_internal/hooks/use-sync-ref.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a5b5501 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-162cdb3 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "../../utils/react/useLayoutEffect.js";
 import { c } from "react/compiler-runtime";
 import { useRef } from "react";

package/dist/_internal/hooks/use-timer/timer.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a5b5501 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-162cdb3 | Cube Dev Team */
 //#region src/_internal/hooks/use-timer/timer.ts
 var Timer = class {
 	callback;

package/dist/_internal/hooks/use-timer/use-timer.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a5b5501 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-162cdb3 | Cube Dev Team */
 import { useEvent } from "../use-event.js";
 import { Timer } from "./timer.js";
 import { c } from "react/compiler-runtime";

package/dist/_internal/hooks/use-warn.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a5b5501 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-162cdb3 | Cube Dev Team */
 import { useEvent } from "./use-event.js";
 import { warn } from "../../utils/warnings.js";
 import { useRef } from "react";

package/dist/components/Block.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a5b5501 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-162cdb3 | Cube Dev Team */
 import { extractStyles } from "../utils/styles.js";
 import { c } from "react/compiler-runtime";
 import { CONTAINER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";

package/dist/components/CollectionItem.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a5b5501 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-162cdb3 | Cube Dev Team */
 import { ItemAction } from "./actions/ItemAction/ItemAction.js";
 import { ItemBadge } from "./content/ItemBadge/ItemBadge.js";
 import { Item } from "react-stately";

package/dist/components/GlobalStyles.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a5b5501 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-162cdb3 | Cube Dev Team */
 import { mergeStyleLayers } from "../utils/styles.js";
 import { usePaletteValue } from "../tokens/palette-config.js";
 import { getTokens } from "../tokens/all-tokens.js";

package/dist/components/GridProvider.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a5b5501 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-162cdb3 | Cube Dev Team */
 import { useCombinedRefs } from "../utils/react/useCombinedRefs.js";
 import { filterBaseProps, tasty } from "@tenphi/tasty";
 import { forwardRef, useCallback, useEffect, useState } from "react";

package/dist/components/HiddenInput.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a5b5501 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-162cdb3 | Cube Dev Team */
 import { tasty } from "@tenphi/tasty";
 
 //#region src/components/HiddenInput.tsx

package/dist/components/Root.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a5b5501 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-162cdb3 | Cube Dev Team */
 import { extractStyles } from "../utils/styles.js";
 import { AMBIENT_PREDEFINED_STATES } from "../utils/react/useScheme.js";
 import { EventBusProvider } from "../utils/react/useEventBus.js";

package/dist/components/actions/Action/Action.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a5b5501 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-162cdb3 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useAction } from "../use-action.js";
 import { c } from "react/compiler-runtime";

package/dist/components/actions/Banner/Banner.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a5b5501 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-162cdb3 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { _Item } from "../../content/Item/Item.js";
 import { useI18n } from "../../../i18n/useI18n.js";

package/dist/components/actions/Button/Button.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a5b5501 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-162cdb3 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { getDisabledElementProps, omitActivationEventProps } from "../../../utils/react/disabledProps.js";
 import { mergeProps } from "../../../utils/react/mergeProps.js";

package/dist/components/actions/ButtonGroup/ButtonGroup.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a5b5501 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-162cdb3 | Cube Dev Team */
 import { useSlotProps } from "../../../utils/react/Slots.js";
 import { Space } from "../../layout/Space.js";
 import { c } from "react/compiler-runtime";

package/dist/components/actions/ButtonSplit/ButtonSplit.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a5b5501 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-162cdb3 | Cube Dev Team */
 import { extractStyles, mergeStyleLayers } from "../../../utils/styles.js";
 import { mergeProps } from "../../../utils/react/mergeProps.js";
 import { ButtonSplitContext } from "./context.js";

package/dist/components/actions/ButtonSplit/context.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a5b5501 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-162cdb3 | Cube Dev Team */
 import { createContext, useContext } from "react";
 
 //#region src/components/actions/ButtonSplit/context.ts

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a5b5501 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-162cdb3 | 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";
@@ -19,8 +19,27 @@ import { Section, useTreeState } from "react-stately";
 import { useObjectRef, useSyncRef } from "@react-aria/utils";
 
 //#region src/components/actions/CommandMenu/CommandMenu.tsx
+/** The keys of the items in `nodes`, in order, including those in sections. */
+function collectItemKeys(nodes, keys = []) {
+	for (const node of nodes) if (node?.type === "section") collectItemKeys(node.childNodes ?? [], keys);
+	else if (node?.type === "item") keys.push(node.key);
+	return keys;
+}
+/**
+* The key an arrow press moves to: the next enabled key after `currentKey` in
+* `direction`, wrapping round to the first enabled key in that direction (the
+* last one going up). With nothing focused, or the focused key filtered out,
+* it returns that key.
+*/
+function getNextEnabledKey(keys, currentKey, direction, isDisabled) {
+	const isEnabled = (key) => !isDisabled(key);
+	const index = currentKey == null ? -1 : keys.indexOf(currentKey);
+	const ahead = direction === 1 ? keys.slice(index + 1) : keys.slice(0, Math.max(index, 0)).reverse();
+	const ordered = direction === 1 ? keys : [...keys].reverse();
+	return ahead.find(isEnabled) ?? ordered.find(isEnabled) ?? null;
+}
 function CommandMenu(props, ref) {
-	const $ = c(83);
+	const $ = c(96);
 	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;
@@ -137,17 +156,7 @@ function CommandMenu(props, ref) {
 	const filteredCollectionItems = [...collectionFilter(collectionItems)];
 	const hasFilteredItems = filteredCollectionItems.length > 0;
 	const viewHasSections = filteredCollectionItems.some(_temp7);
-	const findFirstSelectableItem = () => {
-		const { selectionManager } = treeState;
-		const visit = (items) => {
-			for (const node_0 of items) if (node_0?.type === "section") {
-				const childResult = visit(Array.from(node_0.childNodes ?? []));
-				if (childResult != null) return childResult;
-			} else if (node_0?.type === "item" && !selectionManager.isDisabled(node_0.key)) return node_0.key;
-			return null;
-		};
-		return visit(filteredCollectionItems);
-	};
+	const findFirstSelectableItem = () => collectItemKeys(filteredCollectionItems).find((key_2) => !treeState.selectionManager.isDisabled(key_2)) ?? null;
 	const menuRef = useRef(null);
 	const { menuProps } = useMenu({
 		...completeProps,
@@ -226,7 +235,7 @@ function CommandMenu(props, ref) {
 	React.useEffect(t15, t16);
 	const prevSearchValueRef = useRef("");
 	let t17;
-	if ($[24] !== findFirstSelectableItem || $[25] !== hasFilteredItems || $[26] !== searchValue || $[27] !== setFocusedKey || $[28] !== treeState) {
+	if ($[24] !== findFirstSelectableItem || $[25] !== hasFilteredItems || $[26] !== searchValue || $[27] !== setFocusedKey || $[28] !== treeState.selectionManager) {
 		t17 = () => {
 			const currentSearchValue = searchValue.trim();
 			if (currentSearchValue !== prevSearchValueRef.current && currentSearchValue !== "") {
@@ -247,7 +256,7 @@ function CommandMenu(props, ref) {
 		$[25] = hasFilteredItems;
 		$[26] = searchValue;
 		$[27] = setFocusedKey;
-		$[28] = treeState;
+		$[28] = treeState.selectionManager;
 		$[29] = t17;
 	} else t17 = $[29];
 	let t18;
@@ -263,174 +272,165 @@ function CommandMenu(props, ref) {
 		$[33] = t18;
 	} else t18 = $[33];
 	React.useEffect(t17, t18);
-	const extractedStyles = extractStyles(props, CONTAINER_STYLES);
+	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;
+		}
+	};
 	let t19;
-	if ($[34] !== searchValue) {
-		t19 = searchValue.trim();
-		$[34] = searchValue;
-		$[35] = t19;
-	} else t19 = $[35];
-	const showEmptyState = t19.length > 0 && !hasFilteredItems && !isLoading;
+	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;
 	useSyncRef(contextProps, menuRef);
-	const t20 = !!footer;
-	const t21 = !!header;
-	const t22 = completeProps.mods?.popover;
-	const t23 = completeProps.mods?.tray;
-	let t24;
-	if ($[36] !== t20 || $[37] !== t21 || $[38] !== t22 || $[39] !== t23 || $[40] !== viewHasSections) {
-		t24 = {
+	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 = {
 			sections: viewHasSections,
-			footer: t20,
-			header: t21,
-			popover: t22,
-			tray: t23
+			footer: t23,
+			header: t24,
+			popover: t25,
+			tray: t26
 		};
-		$[36] = t20;
-		$[37] = t21;
-		$[38] = t22;
-		$[39] = t23;
-		$[40] = viewHasSections;
-		$[41] = t24;
-	} else t24 = $[41];
-	const mods = t24;
+		$[49] = t23;
+		$[50] = t24;
+		$[51] = t25;
+		$[52] = t26;
+		$[53] = viewHasSections;
+		$[54] = t27;
+	} else t27 = $[54];
+	const mods = t27;
 	const T0 = StyledCommandMenu;
-	let t25;
-	if ($[42] !== props) {
-		t25 = filterBaseProps(props);
-		$[42] = props;
-		$[43] = t25;
-	} else t25 = $[43];
-	const t26 = t25;
-	const t27 = qa || "CommandMenu";
-	const t28 = mergeStyleLayers(extractedStyles, styles);
-	let t29;
-	if ($[44] !== header || $[45] !== headerStyles || $[46] !== size) {
-		t29 = header && /* @__PURE__ */ jsx(StyledHeader, {
+	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, {
 			role: "presentation",
 			"data-size": size,
 			styles: mergeStyleLayers({ border: "none" }, headerStyles),
 			children: header
 		});
-		$[44] = header;
-		$[45] = headerStyles;
-		$[46] = size;
-		$[47] = t29;
-	} else t29 = $[47];
-	const t30 = `${qa || "CommandMenu"}-menu`;
-	const t31 = focusedKey != null ? `${qa || "CommandMenu"}-menu-option-${focusedKey}` : void 0;
-	let t32;
-	if ($[48] !== handleSearchChange) {
-		t32 = (e) => handleSearchChange(e.target.value);
-		$[48] = handleSearchChange;
-		$[49] = t32;
-	} else t32 = $[49];
-	const t33 = (e_0) => {
-		if (e_0.key === "ArrowDown" || e_0.key === "ArrowUp") {
-			e_0.preventDefault();
-			const isArrowDown = e_0.key === "ArrowDown";
-			const { selectionManager: selectionManager_0 } = treeState;
-			const currentKey = focusedKeyRef.current || selectionManager_0.focusedKey;
-			const getVisibleItemKeys = () => {
-				const keys_0 = [];
-				const visit_0 = (items_0) => {
-					for (const node_1 of items_0) if (node_1?.type === "section") visit_0(Array.from(node_1.childNodes ?? []));
-					else if (node_1?.type === "item") keys_0.push(node_1.key);
-				};
-				visit_0(filteredCollectionItems);
-				return keys_0;
-			};
-			const findNextSelectableKey = (currentIndex, direction, visibleKeys) => {
-				const increment = direction === "forward" ? 1 : -1;
-				for (let i = currentIndex + increment; i >= 0 && i < visibleKeys.length; i = i + increment) {
-					const key_2 = visibleKeys[i];
-					if (!selectionManager_0.isDisabled(key_2)) return key_2;
-				}
-				return null;
-			};
-			const findFirstLastSelectableKey = (direction_0, visibleKeys_0) => {
-				const keysToCheck = direction_0 === "forward" ? visibleKeys_0 : [...visibleKeys_0].reverse();
-				for (const key_3 of keysToCheck) if (!selectionManager_0.isDisabled(key_3)) return key_3;
-				return null;
-			};
-			const visibleKeys_1 = getVisibleItemKeys();
-			if (visibleKeys_1.length === 0) return;
-			let nextKey;
-			const direction_1 = isArrowDown ? "forward" : "backward";
-			if (currentKey == null) nextKey = findFirstLastSelectableKey(direction_1, visibleKeys_1);
-			else {
-				const currentIndex_0 = visibleKeys_1.indexOf(currentKey);
-				if (currentIndex_0 === -1) nextKey = findFirstLastSelectableKey(direction_1, visibleKeys_1);
-				else {
-					nextKey = findNextSelectableKey(currentIndex_0, direction_1, visibleKeys_1);
-					if (nextKey == null) nextKey = findFirstLastSelectableKey(direction_1, visibleKeys_1);
-				}
-			}
-			if (nextKey != null) {
-				selectionManager_0.setFocusedKey(nextKey);
-				setFocusedKey(nextKey);
-				focusedKeyRef.current = nextKey;
-			}
-		} else if (e_0.key === "Enter" || e_0.key === " " && !searchValue.trim()) {
-			const currentFocusedKey = focusedKey || treeState.selectionManager.focusedKey;
-			if (currentFocusedKey != null) {
-				e_0.preventDefault();
-				if (treeState.selectionManager.selectionMode !== "none") treeState.selectionManager.select(currentFocusedKey);
-				else {
-					const node_2 = treeState.collection.getItem(currentFocusedKey);
-					if (node_2) {
-						const onAction_0 = completeProps.onAction;
-						if (onAction_0) onAction_0(currentFocusedKey);
-						if (node_2.props?.onAction) node_2.props.onAction(currentFocusedKey);
-					}
-				}
-				const { onClose, closeOnSelect } = contextProps;
-				if (onClose && closeOnSelect !== false) onClose();
-			}
-		} else if (e_0.key === "Escape") {
-			if (searchValue) {
-				e_0.preventDefault();
-				handleSearchChange("");
-			}
-		}
-	};
-	let t34;
-	if ($[50] !== searchInputStyles || $[51] !== searchPlaceholder || $[52] !== searchValue || $[53] !== size || $[54] !== t30 || $[55] !== t31 || $[56] !== t32 || $[57] !== t33) {
-		t34 = /* @__PURE__ */ jsx(StyledSearchInput, {
+		$[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, {
 			ref: searchInputRef,
 			type: "search",
 			placeholder: searchPlaceholder,
 			value: searchValue,
 			styles: searchInputStyles,
 			"data-size": size,
-			"aria-controls": t30,
+			"aria-controls": t33,
 			role: "combobox",
 			"aria-expanded": "true",
 			"aria-haspopup": "listbox",
-			"aria-activedescendant": t31,
-			onChange: t32,
-			onKeyDown: t33
+			"aria-activedescendant": t34,
+			onChange: t35,
+			onKeyDown: handleSearchKeyDown
 		});
-		$[50] = searchInputStyles;
-		$[51] = searchPlaceholder;
-		$[52] = searchValue;
-		$[53] = size;
-		$[54] = t30;
-		$[55] = t31;
-		$[56] = t32;
-		$[57] = t33;
-		$[58] = t34;
-	} else t34 = $[58];
-	let t35;
-	if ($[59] !== isLoading) {
-		t35 = isLoading && /* @__PURE__ */ jsx(StyledLoadingWrapper, { children: /* @__PURE__ */ jsx(LoadingIcon, {
+		$[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, {
 			role: "progressbar",
 			"aria-label": "Loading commands",
 			"aria-hidden": false
 		}) });
-		$[59] = isLoading;
-		$[60] = t35;
-	} else t35 = $[60];
-	const t36 = !isLoading && !showEmptyState && /* @__PURE__ */ jsx(StyledMenu, {
+		$[72] = isLoading;
+		$[73] = t37;
+	} else t37 = $[73];
+	const t38 = !isLoading && !showEmptyState && /* @__PURE__ */ jsx(StyledMenu, {
 		...menuProps,
 		ref: menuRef,
 		id: `${qa || "CommandMenu"}-menu`,
@@ -446,61 +446,61 @@ function CommandMenu(props, ref) {
 		},
 		children: renderedItems
 	});
-	let t37;
-	if ($[61] !== emptyLabel || $[62] !== isLoading || $[63] !== showEmptyState) {
-		t37 = !isLoading && showEmptyState && /* @__PURE__ */ jsx(StyledEmptyState, { children: emptyLabel });
-		$[61] = emptyLabel;
-		$[62] = isLoading;
-		$[63] = showEmptyState;
-		$[64] = t37;
-	} else t37 = $[64];
-	let t38;
-	if ($[65] !== footer || $[66] !== footerStyles || $[67] !== size) {
-		t38 = footer && /* @__PURE__ */ jsx(StyledFooter, {
+	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, {
 			role: "presentation",
 			"data-size": size,
 			styles: footerStyles,
 			children: footer
 		});
-		$[65] = footer;
-		$[66] = footerStyles;
-		$[67] = size;
-		$[68] = t38;
-	} else t38 = $[68];
-	let t39;
-	if ($[69] !== T0 || $[70] !== domRef || $[71] !== mods || $[72] !== size || $[73] !== t26 || $[74] !== t27 || $[75] !== t28 || $[76] !== t29 || $[77] !== t34 || $[78] !== t35 || $[79] !== t36 || $[80] !== t37 || $[81] !== t38) {
-		t39 = /* @__PURE__ */ jsxs(T0, {
-			...t26,
+		$[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,
 			ref: domRef,
-			qa: t27,
+			qa: t30,
 			"data-size": size,
 			mods,
-			styles: t28,
+			styles: t31,
 			children: [
-				t29,
-				t34,
-				t35,
+				t32,
 				t36,
 				t37,
-				t38
+				t38,
+				t39,
+				t40
 			]
 		});
-		$[69] = T0;
-		$[70] = domRef;
-		$[71] = mods;
-		$[72] = size;
-		$[73] = t26;
-		$[74] = t27;
-		$[75] = t28;
-		$[76] = t29;
-		$[77] = t34;
-		$[78] = t35;
-		$[79] = t36;
-		$[80] = t37;
-		$[81] = t38;
-		$[82] = t39;
-	} else t39 = $[82];
-	return t39;
+		$[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;
 }
 function _temp7(item_1) {
 	return item_1.type === "section";