Component Menu Picker with Radix

editor/src/components/editor/canvas-toolbar.tsx

@@ -356,8 +356,8 @@ export const CanvasToolbar = React.memo(() => {
     'storedLayoutToResolvedPanels panel visibility',
   )
 
-  const panelPopupItems: DropdownMenuItem[] = React.useMemo(
-    () => [
+  const panelPopupItems = React.useMemo(
+    (): DropdownMenuItem[] => [
       {
         id: 'navigator',
         label: 'Navigator',
@@ -369,6 +369,11 @@ export const CanvasToolbar = React.memo(() => {
         ),
         shortcut: keyToString(shortcutDetailsWithDefaults[TOGGLE_NAVIGATOR].shortcutKeys[0]),
         onSelect: () => dispatch([togglePanel('leftmenu')]),
+        subMenuItems: [
+          { id: 'aaa', label: 'aaa', onSelect: NO_OP },
+          { id: 'bbb', label: 'bbb', onSelect: NO_OP },
+          { id: 'ccc', label: 'ccc', onSelect: NO_OP },
+        ],
       },
       {
         id: 'rightmenu',

editor/src/components/inspector/add-remove-layout-system-control.tsx

@@ -30,8 +30,8 @@ import type { DropdownMenuItem } from '../../uuiui/radix-components'
 import { DropdownMenu } from '../../uuiui/radix-components'
 
 export const AddRemoveLayoutSystemControlTestId = (): string => 'AddRemoveLayoutSystemControlTestId'
-export const AddFlexLayoutOptionId = 'add-flex-layout'
-export const AddGridLayoutOptionId = 'add-grid-layout'
+export const AddFlexLayoutOptionId = 'add-flex-layout-option'
+export const AddGridLayoutOptionId = 'add-grid-layout-option'
 
 interface AddRemoveLayoutSystemControlProps {}
 

editor/src/components/inspector/layout-systems.test-utils.ts

@@ -1,6 +1,5 @@
 import { within } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import { ItemContainerTestId } from '../../uuiui/radix-components'
 import { mouseClickAtPoint } from '../canvas/event-helpers.test-utils'
 import type { EditorRenderResult } from '../canvas/ui-jsx.test-utils'
 import {
@@ -18,13 +17,13 @@ async function openLayoutDropdown(editor: EditorRenderResult) {
 
 export async function addFlexLayout(editor: EditorRenderResult) {
   await openLayoutDropdown(editor)
-  const flexOption = editor.renderedDOM.getByTestId(ItemContainerTestId(AddFlexLayoutOptionId))
+  const flexOption = editor.renderedDOM.getByTestId(AddFlexLayoutOptionId)
   await userEvent.click(flexOption)
 }
 
 export async function addGridLayout(editor: EditorRenderResult) {
   await openLayoutDropdown(editor)
-  const gridOption = editor.renderedDOM.getByTestId(ItemContainerTestId(AddGridLayoutOptionId))
+  const gridOption = editor.renderedDOM.getByTestId(AddGridLayoutOptionId)
   await userEvent.click(gridOption)
 }