feat(CommandMenu): add component

[tenphi]

No description provided.

[changeset-bot]

🦋 Changeset detected

Latest commit: aca5a85

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@cube-dev/ui-kit	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
cube-ui-kit	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 11, 2025 3:49pm
cube-ui-kit-cursor	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 11, 2025 3:49pm

[github-actions]

📦 NPM canary release

Deployed canary version 0.0.0-canary-70fb30b.

[github-actions]

🧪 Storybook is successfully deployed!

• 👀 Review changes: https://www.chromatic.com/build?appId=626ee6db91d1c8004a912249&number=1834
• 👨‍🎨 Preview storybook: https://626ee6db91d1c8004a912249-rrkebbzsxr.chromatic.com/

[github-actions]

🏋️ Size limit report

Name	Size	Passed?
All	261.17 KB (+0.86% 🔺)	No 👎
Tree shaking (just a Button)	21.71 KB (0% 🟰)	Yes 🎉
Tree shaking (just an Icon)	11.4 KB (0% 🟰)	Yes 🎉

---

Click here if you want to find out what is changed in this build

[cursor]

Bug: Tree State Initialization Timing Issue

The handleSelectionChange function attempts to access treeState.collection.getKeys() before treeState is defined. This causes a ReferenceError at runtime when the 'all' selection case is triggered, as handleSelectionChange is used in mergeProps before treeState is initialized.

src/components/actions/CommandMenu/CommandMenu.tsx#L120-L136

cube-ui-kit/src/components/actions/CommandMenu/CommandMenu.tsx

Lines 120 to 136 in aca5a85

	const handleSelectionChange = onSelectionChange
	? (keys: any) => {
	if (keys === 'all') {
	// Handle 'all' selection case - collect all available keys
	const allKeys = Array.from(treeState.collection.getKeys()).map(
	(key: any) => String(key),
	);
	onSelectionChange(allKeys);
	} else if (keys instanceof Set) {
	onSelectionChange(Array.from(keys).map((key) => String(key)));
	} else {
	onSelectionChange([]);
	}
	}
	: undefined;

Fix in Cursor • Fix in Web

---

Bug: Function Accesses Undefined State Variable

The handleSelectionChange function attempts to access state.collection.getKeys() before the state variable is defined. Since handleSelectionChange is passed to mergeProps prior to state's initialization, this results in a ReferenceError when the selection change handler is invoked, particularly for the 'all' selection case.

src/components/actions/Menu/Menu.tsx#L97-L113

cube-ui-kit/src/components/actions/Menu/Menu.tsx

Lines 97 to 113 in aca5a85

	const handleSelectionChange = onSelectionChange
	? (keys: any) => {
	if (keys === 'all') {
	// Handle 'all' selection case - collect all available keys
	const allKeys = Array.from(state.collection.getKeys()).map(
	(key: any) => String(key),
	);
	onSelectionChange(allKeys);
	} else if (keys instanceof Set) {
	onSelectionChange(Array.from(keys).map((key) => String(key)));
	} else {
	onSelectionChange([]);
	}
	}
	: undefined;

Fix in Cursor • Fix in Web

---

Was this report helpful? Give feedback by reacting with 👍 or 👎