diff --git a/apps/examples/e2e/tests/fixtures/fixtures.ts b/apps/examples/e2e/tests/fixtures/fixtures.ts index d86645aea..9df95f90d 100644 --- a/apps/examples/e2e/tests/fixtures/fixtures.ts +++ b/apps/examples/e2e/tests/fixtures/fixtures.ts @@ -1,10 +1,20 @@ import { test as base } from '@playwright/test' +import { ActionsMenu } from './menus/ActionsMenu' +import { HelpMenu } from './menus/HelpMenu' +import { MainMenu } from './menus/MainMenu' +import { NavigationPanel } from './menus/NavigationPanel' +import { PageMenu } from './menus/PageMenu' import { StylePanel } from './menus/StylePanel' import { Toolbar } from './menus/Toolbar' type Fixtures = { toolbar: Toolbar stylePanel: StylePanel + actionsMenu: ActionsMenu + helpMenu: HelpMenu + mainMenu: MainMenu + pageMenu: PageMenu + navigationPanel: NavigationPanel } const test = base.extend({ @@ -16,6 +26,26 @@ const test = base.extend({ const stylePanel = new StylePanel(page) await use(stylePanel) }, + actionsMenu: async ({ page }, use) => { + const actionsMenu = new ActionsMenu(page) + await use(actionsMenu) + }, + helpMenu: async ({ page }, use) => { + const helpMenu = new HelpMenu(page) + await use(helpMenu) + }, + mainMenu: async ({ page }, use) => { + const mainMenu = new MainMenu(page) + await use(mainMenu) + }, + pageMenu: async ({ page }, use) => { + const pagemenu = new PageMenu(page) + await use(pagemenu) + }, + navigationPanel: async ({ page }, use) => { + const navigationPanel = new NavigationPanel(page) + await use(navigationPanel) + }, }) export default test diff --git a/apps/examples/e2e/tests/fixtures/menus/ActionsMenu.ts b/apps/examples/e2e/tests/fixtures/menus/ActionsMenu.ts new file mode 100644 index 000000000..20b05ac0b --- /dev/null +++ b/apps/examples/e2e/tests/fixtures/menus/ActionsMenu.ts @@ -0,0 +1,42 @@ +import { Locator, Page } from '@playwright/test' + +export class ActionsMenu { + readonly quickActions: { [key: string]: Locator } + readonly mainActions: { [key: string]: Locator } + readonly actionsMenuButton: Locator + readonly actionsMenuContent: Locator + + constructor(public readonly page: Page) { + this.page = page + this.actionsMenuButton = this.page.getByTestId('actions-menu.button') + this.actionsMenuContent = this.page.getByTestId('actions-menu.content') + this.quickActions = { + undo: this.page.getByTestId('quick-actions.undo'), + redo: this.page.getByTestId('quick-actions.redo'), + delete: this.page.getByTestId('quick-actions.delete'), + duplicate: this.page.getByTestId('quick-actions.duplicate'), + } + this.mainActions = { + alignLeft: this.page.getByTestId('actions-menu.align-left'), + alignCenterHorizontal: this.page.getByTestId('actions-menu.align-center-horizontal'), + alignRight: this.page.getByTestId('actions-menu.align-right'), + stretchHorizontal: this.page.getByTestId('actions-menu.stretch-horizontal'), + alignTop: this.page.getByTestId('actions-menu.align-top'), + alignCenterVertical: this.page.getByTestId('actions-menu.align-center-vertical'), + alignBottom: this.page.getByTestId('actions-menu.align-bottom'), + stretchVertical: this.page.getByTestId('actions-menu.stretch-vertical'), + distributeHorizontal: this.page.getByTestId('actions-menu.distribute-horizontal'), + distributeVertical: this.page.getByTestId('actions-menu.distribute-vertical'), + stackHorizontal: this.page.getByTestId('actions-menu.stack-horizontal'), + stackVertical: this.page.getByTestId('actions-menu.stack-vertical'), + sendToBack: this.page.getByTestId('actions-menu.send-to-back'), + sendBackward: this.page.getByTestId('actions-menu.send-backward'), + bringForward: this.page.getByTestId('actions-menu.bring-forward'), + bringToFront: this.page.getByTestId('actions-menu.bring-to-front'), + rotateCCW: this.page.getByTestId('actions-menu.rotate-ccw'), + rotateCW: this.page.getByTestId('actions-menu.rotate-cw'), + editLink: this.page.getByTestId('actions-menu.edit-link'), + group: this.page.getByTestId('actions-menu.group'), + } + } +} diff --git a/apps/examples/e2e/tests/fixtures/menus/HelpMenu.ts b/apps/examples/e2e/tests/fixtures/menus/HelpMenu.ts new file mode 100644 index 000000000..9fc4769f0 --- /dev/null +++ b/apps/examples/e2e/tests/fixtures/menus/HelpMenu.ts @@ -0,0 +1,34 @@ +import { Locator, Page } from '@playwright/test' + +export class HelpMenu { + readonly helpMenuButton: Locator + readonly languagesButton: Locator + readonly languagesContent: Locator + readonly keyboardShortcutsMenu: KeyboardShortcutsMenu + readonly linkGroup: { [key: string]: Locator } + + constructor(public readonly page: Page) { + this.page = page + this.helpMenuButton = this.page.getByTestId('help-menu.button') + this.languagesButton = this.page.getByTestId('help-menu-sub.language-button') + this.languagesContent = this.page.getByTestId('help-menu-sub.language-content') + this.keyboardShortcutsMenu = new KeyboardShortcutsMenu(this.page) + this.linkGroup = { + github: this.page.getByTestId('help-menu.github'), + twitter: this.page.getByTestId('help-menu.twitter'), + discord: this.page.getByTestId('help-menu.discord'), + about: this.page.getByTestId('help-menu.about'), + } + } +} +class KeyboardShortcutsMenu { + readonly heading: Locator + readonly button: Locator + readonly closeButton: Locator + + constructor(private readonly page: Page) { + this.heading = this.page.getByRole('dialog').getByText('Keyboard shortcuts') + this.button = this.page.getByTestId('help-menu.keyboard-shortcuts-button') + this.closeButton = this.page.getByRole('dialog').getByTestId('dialog.close') + } +} diff --git a/apps/examples/e2e/tests/fixtures/menus/MainMenu.ts b/apps/examples/e2e/tests/fixtures/menus/MainMenu.ts new file mode 100644 index 000000000..d711f120d --- /dev/null +++ b/apps/examples/e2e/tests/fixtures/menus/MainMenu.ts @@ -0,0 +1,63 @@ +import { Locator, Page } from '@playwright/test' + +export class MainMenu { + readonly mainMenuButton: Locator + readonly buttons: { [key: string]: Locator } + readonly subMenus: { [key: string]: Locator[] } + constructor(public readonly page: Page) { + this.page = page + this.mainMenuButton = this.page.getByTestId('main-menu.button') + this.buttons = { + edit: this.page.getByRole('menuitem').getByText('Edit'), + object: this.page.getByRole('menuitem').getByText('Object'), + view: this.page.getByRole('menuitem').getByText('View'), + insertEmbed: this.page.getByRole('menuitem').getByText('Insert Embed'), + uploadMedia: this.page.getByRole('menuitem').getByText('Upload Media'), + preferences: this.page.getByRole('menuitem').getByText('Preferences'), + } + this.subMenus = { + editSubmenu: [ + this.page.getByTestId('main-menu-sub.edit-content').getByText('Undo'), + this.page.getByTestId('main-menu-sub.edit-content').getByText('Redo'), + this.page.getByTestId('main-menu-sub.edit-content').getByText('Cut'), + this.page.getByTestId('main-menu-sub.edit-content').getByText('Copy'), + this.page.getByTestId('main-menu-sub.edit-content').getByText('Copy as'), + this.page.getByTestId('main-menu-sub.edit-content').getByText('Duplicate'), + this.page.getByTestId('main-menu-sub.edit-content').getByText('Paste'), + this.page.getByTestId('main-menu-sub.edit-content').getByText('Delete'), + this.page.getByTestId('main-menu-sub.edit-content').getByText('Select all'), + ], + objectSubmenu: [ + this.page.getByRole('menuitem').getByText('Export as'), + this.page.getByRole('menuitem').getByText('Group'), + this.page.getByRole('menuitem').getByText('Ungroup'), + this.page.getByRole('menuitem').getByText('Remove frame'), + this.page.getByRole('menuitem').getByText('Fit to content'), + this.page.getByRole('menuitem').getByText('Toggle auto size'), + this.page.getByRole('menuitem').getByText('Edit link'), + this.page.getByRole('menuitem').getByText('Convert to Bookmark'), + this.page.getByRole('menuitem').getByText('Convert to Embed'), + this.page.getByRole('menuitem').getByText('Toggle locked'), + this.page.getByRole('menuitem').getByText('Unlock all'), + ], + viewSubmenu: [ + this.page.getByTestId('main-menu-sub.view-content').getByText('Zoom in'), + this.page.getByTestId('main-menu-sub.view-content').getByText('Zoom out'), + this.page.getByTestId('main-menu-sub.view-content').getByText('Zoom to 100%'), + this.page.getByTestId('main-menu-sub.view-content').getByText('Zoom to fit'), + this.page.getByTestId('main-menu-sub.view-content').getByText('Zoom to selection'), + ], + preferencesSubmenu: [ + this.page.getByTestId('main-menu-sub.preferences-content').getByText('Always snap'), + this.page.getByTestId('main-menu-sub.preferences-content').getByText('Tool lock'), + this.page.getByTestId('main-menu-sub.preferences-content').getByText('Show grid'), + this.page.getByTestId('main-menu-sub.preferences-content').getByText('Dark mode'), + this.page.getByTestId('main-menu-sub.preferences-content').getByText('Focus mode'), + this.page.getByTestId('main-menu-sub.preferences-content').getByText('Edge scrolling'), + this.page.getByTestId('main-menu-sub.preferences-content').getByText('Reduce motion'), + this.page.getByTestId('main-menu-sub.preferences-content').getByText('Debug mode'), + this.page.getByTestId('main-menu-sub.preferences-content').getByText('Language'), + ], + } + } +} diff --git a/apps/examples/e2e/tests/fixtures/menus/NavigationPanel.ts b/apps/examples/e2e/tests/fixtures/menus/NavigationPanel.ts new file mode 100644 index 000000000..c9fe81117 --- /dev/null +++ b/apps/examples/e2e/tests/fixtures/menus/NavigationPanel.ts @@ -0,0 +1,21 @@ +import { Locator, Page } from '@playwright/test' + +export class NavigationPanel { + readonly minimap: Locator + readonly zoomMenuButton: Locator + readonly toggleButton: Locator + readonly zoomMenuItems: { [key: string]: Locator } + constructor(private readonly page: Page) { + this.page = page + this.minimap = page.getByLabel('minimap') + this.zoomMenuButton = page.getByTestId('minimap.zoom-menu-button') + this.toggleButton = page.getByTestId('minimap.toggle-button') + this.zoomMenuItems = { + zoomIn: page.getByRole('menuitem').getByText('Zoom in'), + zoomOut: page.getByRole('menuitem').getByText('Zoom out'), + zoomToHundred: page.getByRole('menuitem').getByText('Zoom to 100%'), + zoomToFit: page.getByRole('menuitem').getByText('Zoom to fit'), + zoomToSelection: page.getByRole('menuitem').getByText('Zoom to selection'), + } + } +} diff --git a/apps/examples/e2e/tests/fixtures/menus/PageMenu.ts b/apps/examples/e2e/tests/fixtures/menus/PageMenu.ts new file mode 100644 index 000000000..f99225764 --- /dev/null +++ b/apps/examples/e2e/tests/fixtures/menus/PageMenu.ts @@ -0,0 +1,12 @@ +import { Locator, Page } from '@playwright/test' + +export class PageMenu { + readonly pagemenuButton: Locator + readonly header: Locator + + constructor(public readonly page: Page) { + this.page = page + this.pagemenuButton = this.page.getByTestId('page-menu.button') + this.header = this.page.getByRole('dialog').getByText('Pages') + } +} diff --git a/apps/examples/e2e/tests/test-actions-menu.spec.ts b/apps/examples/e2e/tests/test-actions-menu.spec.ts new file mode 100644 index 000000000..3fe7bf7f6 --- /dev/null +++ b/apps/examples/e2e/tests/test-actions-menu.spec.ts @@ -0,0 +1,20 @@ +import { expect } from '@playwright/test' +import { setup } from '../shared-e2e' +import test from './fixtures/fixtures' + +test.describe('actions menu', () => { + test.beforeEach(setup) + + test('you can open and close the actions menu', async ({ actionsMenu }) => { + const { actionsMenuButton, actionsMenuContent } = actionsMenu + await expect(actionsMenuContent).toBeHidden() + await actionsMenuButton.click() + await expect(actionsMenuContent).toBeVisible() + await actionsMenuButton.click() + await expect(actionsMenuContent).toBeHidden() + }) + + // ... + // More tests here + // ... +}) diff --git a/apps/examples/e2e/tests/test-clipboard.spec.ts b/apps/examples/e2e/tests/test-clipboard.spec.ts index cf5df5079..2c0f0a7ca 100644 --- a/apps/examples/e2e/tests/test-clipboard.spec.ts +++ b/apps/examples/e2e/tests/test-clipboard.spec.ts @@ -45,11 +45,11 @@ test.describe.skip('clipboard tests', () => { expect(await page.evaluate(() => editor.getCurrentPageShapes().length)).toBe(1) expect(await page.evaluate(() => editor.getSelectedShapes().length)).toBe(1) - await page.getByTestId('main.menu').click() + await page.getByTestId('main-menu.button').click() await page.getByTestId('main-menu-sub-trigger.edit').click() await page.getByTestId('main-menu.copy').click() await sleep(100) - await page.getByTestId('main.menu').click() + await page.getByTestId('main-menu.button').click() await page.getByTestId('main-menu-sub-trigger.edit').click() await page.getByTestId('main-menu.paste').click() diff --git a/apps/examples/e2e/tests/context-menu.spec.ts b/apps/examples/e2e/tests/test-context-menu.spec.ts similarity index 100% rename from apps/examples/e2e/tests/context-menu.spec.ts rename to apps/examples/e2e/tests/test-context-menu.spec.ts diff --git a/apps/examples/e2e/tests/test-help-menu.spec.ts b/apps/examples/e2e/tests/test-help-menu.spec.ts new file mode 100644 index 000000000..cc58972fd --- /dev/null +++ b/apps/examples/e2e/tests/test-help-menu.spec.ts @@ -0,0 +1,41 @@ +import { expect } from '@playwright/test' +import { setup } from '../shared-e2e' +import test from './fixtures/fixtures' + +test.describe('help menu', () => { + test.beforeEach(setup) + + test('you can open and close the menus', async ({ helpMenu, isMobile }) => { + // No help menu on mobile + + const { helpMenuButton, languagesButton, keyboardShortcutsMenu, languagesContent } = helpMenu + + test.skip(isMobile, 'only run on desktop') + await test.step('open help menu', async () => { + await expect(languagesButton).toBeHidden() + await expect(keyboardShortcutsMenu.button).toBeHidden() + await helpMenuButton.click() + await expect(languagesButton).toBeVisible() + await expect(keyboardShortcutsMenu.button).toBeVisible() + }) + await test.step('hover languages submenu', async () => { + await expect(languagesContent).toBeHidden() + await languagesButton.hover() + await expect(languagesContent).toBeVisible() + }) + await test.step('open the keyboard shortcuts menu', async () => { + await expect(keyboardShortcutsMenu.heading).toBeHidden() + await keyboardShortcutsMenu.button.click() + await expect(keyboardShortcutsMenu.heading).toBeVisible() + }) + await test.step('close the keyboard shortcuts menu', async () => { + await keyboardShortcutsMenu.closeButton.click() + await expect(keyboardShortcutsMenu.heading).toBeHidden() + await expect(languagesButton).toBeHidden() + }) + }) + + // ... + // More tests here + // ... +}) diff --git a/apps/examples/e2e/tests/test-main-menu.spec.ts b/apps/examples/e2e/tests/test-main-menu.spec.ts new file mode 100644 index 000000000..db9b0b2c2 --- /dev/null +++ b/apps/examples/e2e/tests/test-main-menu.spec.ts @@ -0,0 +1,44 @@ +import { expect } from '@playwright/test' +import { setup } from '../shared-e2e' +import test from './fixtures/fixtures' + +test.describe('help menu', () => { + test.beforeEach(setup) + + test('you can open and close the menu', async ({ mainMenu, page }) => { + const { mainMenuButton, buttons } = mainMenu + const { editSubmenu, viewSubmenu, preferencesSubmenu } = mainMenu.subMenus + const submenus = [ + { name: 'preferences', submenu: preferencesSubmenu, button: buttons.preferences }, + { name: 'view', submenu: viewSubmenu, button: buttons.view }, + { name: 'edit', submenu: editSubmenu, button: buttons.edit }, + ] + + await test.step('open main menu', async () => { + await expect(buttons.edit).toBeHidden() + await mainMenuButton.click() + await expect(buttons.edit).toBeVisible() + }) + for (const submenu of submenus) { + await test.step(`hovering opens ${submenu.name} submenu`, async () => { + await expect(submenu.submenu[0]).toBeHidden() + await submenu.button.hover() + await expect(submenu.submenu[0]).toBeVisible() + }) + } + await test.step('close main menu', async () => { + // close the menu by clicking the main menu button again + await mainMenuButton.click() + await expect(buttons.edit).toBeHidden() + // open the menu again + await mainMenuButton.click() + // click somewhere on the canvas to close the menu + await page.mouse.click(250, 150) + await expect(buttons.edit).toBeHidden() + }) + }) + + // ... + // More tests here + // ... +}) diff --git a/apps/examples/e2e/tests/test-navigation-panel.spec.ts b/apps/examples/e2e/tests/test-navigation-panel.spec.ts new file mode 100644 index 000000000..4c7ecbfe3 --- /dev/null +++ b/apps/examples/e2e/tests/test-navigation-panel.spec.ts @@ -0,0 +1,33 @@ +import { expect } from '@playwright/test' +import { setup } from '../shared-e2e' +import test from './fixtures/fixtures' + +test.describe('navigationPanel', () => { + test.beforeEach(setup) + + test('you can open and close the zoom menu', async ({ navigationPanel, isMobile }) => { + // no navigationPanel on mobile + test.skip(isMobile) + const { zoomMenuButton } = navigationPanel + const { zoomIn } = navigationPanel.zoomMenuItems + await expect(zoomIn).toBeHidden() + await zoomMenuButton.click() + await expect(zoomIn).toBeVisible() + await zoomMenuButton.click() + await expect(zoomIn).toBeHidden() + }) + test('you can toggle the minimap', async ({ navigationPanel, isMobile }) => { + // no navigationPanel on mobile + test.skip(isMobile) + const { minimap, toggleButton } = navigationPanel + await expect(minimap).toBeHidden() + await toggleButton.click() + await expect(minimap).toBeVisible() + await toggleButton.click() + await expect(minimap).toBeHidden() + }) + + // ... + // More tests here + // ... +}) diff --git a/apps/examples/e2e/tests/test-page-menu.spec.ts b/apps/examples/e2e/tests/test-page-menu.spec.ts new file mode 100644 index 000000000..e079988cd --- /dev/null +++ b/apps/examples/e2e/tests/test-page-menu.spec.ts @@ -0,0 +1,20 @@ +import { expect } from '@playwright/test' +import { setup } from '../shared-e2e' +import test from './fixtures/fixtures' + +test.describe('page menu', () => { + test.beforeEach(setup) + + test('you can open and close the page menu', async ({ pageMenu }) => { + const { pagemenuButton, header } = pageMenu + await expect(header).toBeHidden() + await pagemenuButton.click() + await expect(header).toBeVisible() + await pagemenuButton.click() + await expect(header).toBeHidden() + }) + + // ... + // More tests here + // ... +}) diff --git a/packages/tldraw/api-report.md b/packages/tldraw/api-report.md index 35b33dd01..31c6fa82b 100644 --- a/packages/tldraw/api-report.md +++ b/packages/tldraw/api-report.md @@ -1479,7 +1479,7 @@ export function TldrawUiDropdownMenuRoot({ id, children, modal, debugOpen, }: TL export function TldrawUiDropdownMenuSub({ id, children }: TLUiDropdownMenuSubProps): JSX_2.Element; // @public (undocumented) -export function TldrawUiDropdownMenuSubTrigger({ label, title, disabled, }: TLUiDropdownMenuSubTriggerProps): JSX_2.Element; +export function TldrawUiDropdownMenuSubTrigger({ id, label, title, disabled, }: TLUiDropdownMenuSubTriggerProps): JSX_2.Element; // @public (undocumented) export function TldrawUiDropdownMenuTrigger({ children, ...rest }: TLUiDropdownMenuTriggerProps): JSX_2.Element; @@ -1910,7 +1910,7 @@ export interface TLUiEventMap { } // @public (undocumented) -export type TLUiEventSource = 'actions-menu' | 'context-menu' | 'debug-panel' | 'dialog' | 'document-name' | 'export-menu' | 'help-menu' | 'helper-buttons' | 'kbd' | 'menu' | 'navigation-zone' | 'page-menu' | 'people-menu' | 'quick-actions' | 'share-menu' | 'style-panel' | 'toolbar' | 'unknown' | 'zoom-menu'; +export type TLUiEventSource = 'actions-menu' | 'context-menu' | 'debug-panel' | 'dialog' | 'document-name' | 'export-menu' | 'help-menu' | 'helper-buttons' | 'kbd' | 'main-menu' | 'menu' | 'navigation-zone' | 'page-menu' | 'people-menu' | 'quick-actions' | 'share-menu' | 'style-panel' | 'toolbar' | 'unknown' | 'zoom-menu'; // @public (undocumented) export type TLUiHelperButtonsProps = { diff --git a/packages/tldraw/api/api.json b/packages/tldraw/api/api.json index ef8228472..c2c100ef0 100644 --- a/packages/tldraw/api/api.json +++ b/packages/tldraw/api/api.json @@ -17517,7 +17517,7 @@ "excerptTokens": [ { "kind": "Content", - "text": "export declare function TldrawUiDropdownMenuSubTrigger({ label, title, disabled, }: " + "text": "export declare function TldrawUiDropdownMenuSubTrigger({ id, label, title, disabled, }: " }, { "kind": "Reference", @@ -17551,7 +17551,7 @@ "overloadIndex": 1, "parameters": [ { - "parameterName": "{ label, title, disabled, }", + "parameterName": "{ id, label, title, disabled, }", "parameterTypeTokenRange": { "startIndex": 1, "endIndex": 2 @@ -22024,7 +22024,7 @@ }, { "kind": "Content", - "text": "'actions-menu' | 'context-menu' | 'debug-panel' | 'dialog' | 'document-name' | 'export-menu' | 'help-menu' | 'helper-buttons' | 'kbd' | 'menu' | 'navigation-zone' | 'page-menu' | 'people-menu' | 'quick-actions' | 'share-menu' | 'style-panel' | 'toolbar' | 'unknown' | 'zoom-menu'" + "text": "'actions-menu' | 'context-menu' | 'debug-panel' | 'dialog' | 'document-name' | 'export-menu' | 'help-menu' | 'helper-buttons' | 'kbd' | 'main-menu' | 'menu' | 'navigation-zone' | 'page-menu' | 'people-menu' | 'quick-actions' | 'share-menu' | 'style-panel' | 'toolbar' | 'unknown' | 'zoom-menu'" }, { "kind": "Content", diff --git a/packages/tldraw/src/lib/ui/components/ActionsMenu/DefaultActionsMenu.tsx b/packages/tldraw/src/lib/ui/components/ActionsMenu/DefaultActionsMenu.tsx index 1d21d9b60..9b43d0a9b 100644 --- a/packages/tldraw/src/lib/ui/components/ActionsMenu/DefaultActionsMenu.tsx +++ b/packages/tldraw/src/lib/ui/components/ActionsMenu/DefaultActionsMenu.tsx @@ -47,7 +47,7 @@ export const DefaultActionsMenu = memo(function DefaultActionsMenu({ @@ -57,7 +57,7 @@ export const DefaultActionsMenu = memo(function DefaultActionsMenu({ side={breakpoint >= PORTRAIT_BREAKPOINT.TABLET ? 'bottom' : 'top'} sideOffset={6} > -
+
{content} diff --git a/packages/tldraw/src/lib/ui/components/HelpMenu/DefaultHelpMenu.tsx b/packages/tldraw/src/lib/ui/components/HelpMenu/DefaultHelpMenu.tsx index 6ff3a9842..edf45cd58 100644 --- a/packages/tldraw/src/lib/ui/components/HelpMenu/DefaultHelpMenu.tsx +++ b/packages/tldraw/src/lib/ui/components/HelpMenu/DefaultHelpMenu.tsx @@ -33,7 +33,7 @@ export const DefaultHelpMenu = memo(function DefaultHelpMenu({ children }: TLUiH
- + diff --git a/packages/tldraw/src/lib/ui/components/HelpMenu/DefaultHelpMenuContent.tsx b/packages/tldraw/src/lib/ui/components/HelpMenu/DefaultHelpMenuContent.tsx index a9ba82166..871a89b27 100644 --- a/packages/tldraw/src/lib/ui/components/HelpMenu/DefaultHelpMenuContent.tsx +++ b/packages/tldraw/src/lib/ui/components/HelpMenu/DefaultHelpMenuContent.tsx @@ -21,7 +21,7 @@ export function KeyboardShortcutsMenuItem() { return ( { diff --git a/packages/tldraw/src/lib/ui/components/MainMenu/DefaultMainMenu.tsx b/packages/tldraw/src/lib/ui/components/MainMenu/DefaultMainMenu.tsx index 9075ef22f..1115ce93b 100644 --- a/packages/tldraw/src/lib/ui/components/MainMenu/DefaultMainMenu.tsx +++ b/packages/tldraw/src/lib/ui/components/MainMenu/DefaultMainMenu.tsx @@ -27,7 +27,7 @@ export const DefaultMainMenu = memo(function DefaultMainMenu({ children }: TLUiM return ( <_Dropdown.Root dir="ltr" open={isOpen} onOpenChange={onOpenChange} modal={false}> <_Dropdown.Trigger asChild dir="ltr"> - + @@ -40,7 +40,7 @@ export const DefaultMainMenu = memo(function DefaultMainMenu({ children }: TLUiM alignOffset={0} sideOffset={6} > - + {content} diff --git a/packages/tldraw/src/lib/ui/components/Minimap/DefaultMinimap.tsx b/packages/tldraw/src/lib/ui/components/Minimap/DefaultMinimap.tsx index 59491e7ce..a84eba262 100644 --- a/packages/tldraw/src/lib/ui/components/Minimap/DefaultMinimap.tsx +++ b/packages/tldraw/src/lib/ui/components/Minimap/DefaultMinimap.tsx @@ -221,6 +221,8 @@ export function DefaultMinimap() { return (
- +
{currentPage.name}
 diff --git a/packages/tldraw/src/lib/ui/components/ZoomMenu/DefaultZoomMenu.tsx b/packages/tldraw/src/lib/ui/components/ZoomMenu/DefaultZoomMenu.tsx index 3cfa126a9..ed0a47acd 100644 --- a/packages/tldraw/src/lib/ui/components/ZoomMenu/DefaultZoomMenu.tsx +++ b/packages/tldraw/src/lib/ui/components/ZoomMenu/DefaultZoomMenu.tsx @@ -64,7 +64,7 @@ const ZoomTriggerButton = forwardRef( {...props} type="icon" title={`${msg('navigation-zone.zoom')}`} - data-testid="minimap.zoom-menu" + data-testid="minimap.zoom-menu-button" className={ breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM ? 'tlui-zoom-menu__button' diff --git a/packages/tldraw/src/lib/ui/components/primitives/TldrawUiDropdownMenu.tsx b/packages/tldraw/src/lib/ui/components/primitives/TldrawUiDropdownMenu.tsx index b64988f0d..27b78657a 100644 --- a/packages/tldraw/src/lib/ui/components/primitives/TldrawUiDropdownMenu.tsx +++ b/packages/tldraw/src/lib/ui/components/primitives/TldrawUiDropdownMenu.tsx @@ -115,6 +115,7 @@ export type TLUiDropdownMenuSubTriggerProps = { /** @public */ export function TldrawUiDropdownMenuSubTrigger({ + id, label, title, disabled, @@ -122,6 +123,7 @@ export function TldrawUiDropdownMenuSubTrigger({ return ( <_DropdownMenu.SubTrigger dir="ltr" asChild disabled={disabled}> <_DropdownMenu.SubContent + data-testid={id} className="tlui-menu tlui-menu__submenu__content" alignOffset={alignOffset} sideOffset={sideOffset} diff --git a/packages/tldraw/src/lib/ui/components/primitives/menus/TldrawUiMenuContext.tsx b/packages/tldraw/src/lib/ui/components/primitives/menus/TldrawUiMenuContext.tsx index a7e63158e..abc01ad01 100644 --- a/packages/tldraw/src/lib/ui/components/primitives/menus/TldrawUiMenuContext.tsx +++ b/packages/tldraw/src/lib/ui/components/primitives/menus/TldrawUiMenuContext.tsx @@ -14,7 +14,7 @@ export type TldrawUiMenuContextType = const menuContext = createContext<{ type: TldrawUiMenuContextType sourceId: TLUiEventSource -}>({ type: 'menu', sourceId: 'menu' }) +}>({ type: 'menu', sourceId: 'main-menu' }) /** @public */ export function useTldrawUiMenuContext() { diff --git a/packages/tldraw/src/lib/ui/components/primitives/menus/TldrawUiMenuSubmenu.tsx b/packages/tldraw/src/lib/ui/components/primitives/menus/TldrawUiMenuSubmenu.tsx index 5a677b8c8..80b6cc1b7 100644 --- a/packages/tldraw/src/lib/ui/components/primitives/menus/TldrawUiMenuSubmenu.tsx +++ b/packages/tldraw/src/lib/ui/components/primitives/menus/TldrawUiMenuSubmenu.tsx @@ -50,12 +50,15 @@ export function TldrawUiMenuSubmenu({ return ( - + {children} diff --git a/packages/tldraw/src/lib/ui/context/events.tsx b/packages/tldraw/src/lib/ui/context/events.tsx index 314df22d1..130e3c69e 100644 --- a/packages/tldraw/src/lib/ui/context/events.tsx +++ b/packages/tldraw/src/lib/ui/context/events.tsx @@ -3,6 +3,7 @@ import * as React from 'react' /** @public */ export type TLUiEventSource = | 'menu' + | 'main-menu' | 'context-menu' | 'zoom-menu' | 'document-name'