@lovett/ui 0.0.10 → 0.1.0

package/src/__tests__/dropdown-menu.test.tsx

@@ -0,0 +1,572 @@
+/**
+ * DropdownMenu — 137 call sites, rebuilt on lib/anchor + lib/layer-stack.
+ *
+ * These pin the public contract the rebuild had to keep byte-for-byte:
+ * roles, data-slots, trigger ARIA, item click-closes, checkbox toggling,
+ * Escape-refocuses-trigger, outside-click, controlled mode, and the
+ * `align` / `side` / `sideOffset` / `alignOffset` props. Plus the one
+ * behaviour that CHANGED on purpose: a menu inside a Modal now closes
+ * alone on Escape.
+ */
+import { createRef, useState } from 'react'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import Modal from '../modal'
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  type DropdownMenuContentProps,
+} from '../dropdown-menu'
+import { DropdownButton } from '../dropdown-button'
+import { MenuButton } from '../menu-button'
+import { mockGeometry, setViewport } from './helpers/geometry'
+
+function Menu({
+  onSelect = () => {},
+  contentProps,
+  triggerProps,
+}: {
+  onSelect?: () => void
+  contentProps?: Partial<React.ComponentProps<typeof DropdownMenuContent>>
+  triggerProps?: React.ComponentProps<typeof DropdownMenuTrigger>
+}) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger {...triggerProps}>Actions</DropdownMenuTrigger>
+      <DropdownMenuContent {...contentProps}>
+        <DropdownMenuGroup>
+          <DropdownMenuLabel>Section</DropdownMenuLabel>
+        </DropdownMenuGroup>
+        <DropdownMenuItem onClick={onSelect}>Rename</DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem variant="destructive">Delete</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+const trigger = () => screen.getByRole('button', { name: 'Actions' })
+
+describe('DropdownMenu', () => {
+  describe('trigger', () => {
+    it('is a menu-haspopup button with the secondary Button chrome by default', () => {
+      render(<Menu />)
+      const t = trigger()
+      expect(t).toHaveAttribute('type', 'button')
+      expect(t).toHaveAttribute('aria-haspopup', 'menu')
+      expect(t).toHaveAttribute('aria-expanded', 'false')
+      expect(t).not.toHaveAttribute('aria-controls')
+      expect(t).toHaveClass('btn', 'btn-secondary')
+    })
+
+    it('drops the chrome when unstyled', () => {
+      render(<Menu triggerProps={{ unstyled: true, className: 'mine' }} />)
+      expect(trigger()).not.toHaveClass('btn')
+      expect(trigger()).toHaveClass('mine')
+    })
+
+    it('forwards a ref to the <button>', () => {
+      const ref = createRef<HTMLButtonElement>()
+      render(<Menu triggerProps={{ ref }} />)
+      expect(ref.current).toBe(trigger())
+    })
+
+    it('keeps the menu closed when onClick prevents default', async () => {
+      render(<Menu triggerProps={{ onClick: (e) => e.preventDefault() }} />)
+      await userEvent.click(trigger())
+      expect(screen.queryByRole('menu')).toBeNull()
+    })
+  })
+
+  describe('content', () => {
+    it('renders nothing while closed', () => {
+      render(<Menu />)
+      expect(screen.queryByRole('menu')).toBeNull()
+      expect(document.querySelector('[data-slot="dropdown-menu-content"]')).toBeNull()
+    })
+
+    it('opens on click as role=menu, portaled to body, wired by aria-controls', async () => {
+      const { container } = render(<Menu />)
+      await userEvent.click(trigger())
+      const menu = screen.getByRole('menu')
+      expect(trigger()).toHaveAttribute('aria-expanded', 'true')
+      expect(trigger()).toHaveAttribute('aria-controls', menu.id)
+      expect(menu).toHaveAttribute('data-slot', 'dropdown-menu-content')
+      expect(menu).toHaveAttribute('data-state', 'open')
+      expect(menu.parentElement).toBe(document.body)
+      expect(container.contains(menu)).toBe(false)
+    })
+
+    it('exposes the compound parts with their roles and data-slots', async () => {
+      render(<Menu />)
+      await userEvent.click(trigger())
+      expect(screen.getByRole('group')).toHaveAttribute('data-slot', 'dropdown-menu-group')
+      expect(screen.getByText('Section')).toHaveAttribute('data-slot', 'dropdown-menu-label')
+      expect(screen.getByRole('separator')).toHaveAttribute('data-slot', 'dropdown-menu-separator')
+      const items = screen.getAllByRole('menuitem')
+      expect(items).toHaveLength(2)
+      expect(items[0]).toHaveAttribute('data-slot', 'dropdown-menu-item')
+      expect(items[0]).toHaveAttribute('data-variant', 'default')
+      expect(items[1]).toHaveAttribute('data-variant', 'destructive')
+    })
+
+    // REPLACES 'does not move focus into the menu on open (the trigger keeps
+    // it)'. That pinned the defect: focus stayed outside an open menu, so
+    // ArrowDown did nothing and Tab walked off into the page behind it.
+    it('moves focus onto the first item on open', async () => {
+      render(<Menu />)
+      await userEvent.click(trigger())
+      expect(document.activeElement).toBe(
+        screen.getByRole('menuitem', { name: 'Rename' }),
+      )
+    })
+
+    it('spreads className and style, caller style last', async () => {
+      render(
+        <Menu contentProps={{ className: 'w-56', style: { width: '17rem', padding: 6 } }} />,
+      )
+      await userEvent.click(trigger())
+      const menu = screen.getByRole('menu')
+      expect(menu).toHaveClass('w-56')
+      expect(menu.style.width).toBe('17rem')
+      expect(menu.style.padding).toBe('6px')
+      expect(menu.style.background).toContain('--popover')
+    })
+
+    it('forwards a ref to the menu element', async () => {
+      const ref = createRef<HTMLDivElement>()
+      render(<Menu contentProps={{ ref }} />)
+      await userEvent.click(trigger())
+      expect(ref.current).toBe(screen.getByRole('menu'))
+    })
+  })
+
+  describe('items', () => {
+    it('calls onClick and closes the menu', async () => {
+      const onSelect = vi.fn()
+      render(<Menu onSelect={onSelect} />)
+      await userEvent.click(trigger())
+      await userEvent.click(screen.getByRole('menuitem', { name: 'Rename' }))
+      expect(onSelect).toHaveBeenCalledTimes(1)
+      expect(screen.queryByRole('menu')).toBeNull()
+    })
+
+    it('stays open when the item onClick prevents default', async () => {
+      render(
+        <DropdownMenu>
+          <DropdownMenuTrigger>Actions</DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuItem onClick={(e) => e.preventDefault()}>Keep</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>,
+      )
+      await userEvent.click(trigger())
+      await userEvent.click(screen.getByRole('menuitem', { name: 'Keep' }))
+      expect(screen.getByRole('menu')).toBeInTheDocument()
+    })
+
+    it('inset pads the left edge', async () => {
+      render(
+        <DropdownMenu defaultOpen>
+          <DropdownMenuTrigger>Actions</DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuItem inset>Inset</DropdownMenuItem>
+            <DropdownMenuLabel inset>Inset label</DropdownMenuLabel>
+          </DropdownMenuContent>
+        </DropdownMenu>,
+      )
+      expect(screen.getByRole('menuitem', { name: 'Inset' })).toHaveClass('pl-9')
+      expect(screen.getByText('Inset label')).toHaveClass('pl-9')
+    })
+
+    it('checkbox item toggles through onCheckedChange and shows its indicator', async () => {
+      function Checkable() {
+        const [checked, setChecked] = useState(false)
+        return (
+          <DropdownMenu defaultOpen>
+            <DropdownMenuTrigger>Actions</DropdownMenuTrigger>
+            <DropdownMenuContent>
+              <DropdownMenuCheckboxItem checked={checked} onCheckedChange={setChecked}>
+                Show summary
+              </DropdownMenuCheckboxItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        )
+      }
+      render(<Checkable />)
+      const item = screen.getByRole('menuitemcheckbox', { name: 'Show summary' })
+      expect(item).toHaveAttribute('aria-checked', 'false')
+      expect(item).toHaveAttribute('data-slot', 'dropdown-menu-checkbox-item')
+      expect(
+        item.querySelector('[data-slot="dropdown-menu-checkbox-item-indicator"]'),
+      ).toBeNull()
+
+      await userEvent.click(item)
+      expect(item).toHaveAttribute('aria-checked', 'true')
+      expect(
+        item.querySelector('[data-slot="dropdown-menu-checkbox-item-indicator"]'),
+      ).not.toBeNull()
+      // Toggling does NOT close the menu.
+      expect(screen.getByRole('menu')).toBeInTheDocument()
+    })
+
+    it('disabled checkbox item does not toggle', async () => {
+      const onCheckedChange = vi.fn()
+      render(
+        <DropdownMenu defaultOpen>
+          <DropdownMenuTrigger>Actions</DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuCheckboxItem disabled onCheckedChange={onCheckedChange}>
+              Locked
+            </DropdownMenuCheckboxItem>
+          </DropdownMenuContent>
+        </DropdownMenu>,
+      )
+      const item = screen.getByRole('menuitemcheckbox', { name: 'Locked' })
+      expect(item).toBeDisabled()
+      await userEvent.click(item)
+      expect(onCheckedChange).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('dismissal', () => {
+    it('closes on Escape and returns focus to the trigger', async () => {
+      render(<Menu />)
+      await userEvent.click(trigger())
+      screen.getByRole('menuitem', { name: 'Rename' }).focus()
+      await userEvent.keyboard('{Escape}')
+      expect(screen.queryByRole('menu')).toBeNull()
+      expect(document.activeElement).toBe(trigger())
+    })
+
+    it('closes on an outside click', async () => {
+      render(
+        <>
+          <Menu />
+          <button type="button">Elsewhere</button>
+        </>,
+      )
+      await userEvent.click(trigger())
+      await userEvent.click(screen.getByRole('button', { name: 'Elsewhere' }))
+      expect(screen.queryByRole('menu')).toBeNull()
+    })
+
+    it('stays open on a click inside the menu that is not an item', async () => {
+      render(<Menu />)
+      await userEvent.click(trigger())
+      await userEvent.click(screen.getByText('Section'))
+      expect(screen.getByRole('menu')).toBeInTheDocument()
+    })
+
+    it('inside a Modal, Escape closes only the menu; the next Escape closes the modal', async () => {
+      // The regression this rebuild fixes: two document listeners used to
+      // both answer one Escape, closing menu AND modal together.
+      const onClose = vi.fn()
+      render(
+        <Modal isOpen onClose={onClose} title="Settings">
+          <Menu />
+        </Modal>,
+      )
+      await userEvent.click(trigger())
+      expect(screen.getByRole('menu')).toBeInTheDocument()
+
+      await userEvent.keyboard('{Escape}')
+      expect(screen.queryByRole('menu')).toBeNull()
+      expect(onClose).not.toHaveBeenCalled()
+
+      await userEvent.keyboard('{Escape}')
+      expect(onClose).toHaveBeenCalledTimes(1)
+    })
+
+    it('does not listen for Escape while closed', async () => {
+      const onOpenChange = vi.fn()
+      render(
+        <DropdownMenu onOpenChange={onOpenChange}>
+          <DropdownMenuTrigger>Actions</DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuItem>Rename</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>,
+      )
+      await userEvent.keyboard('{Escape}')
+      expect(onOpenChange).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('controlled', () => {
+    it('reports transitions through onOpenChange and follows `open`', async () => {
+      function Controlled() {
+        const [open, setOpen] = useState(false)
+        return (
+          <>
+            <span data-testid="state">{open ? 'open' : 'closed'}</span>
+            <DropdownMenu open={open} onOpenChange={setOpen}>
+              <DropdownMenuTrigger>Actions</DropdownMenuTrigger>
+              <DropdownMenuContent>
+                <DropdownMenuItem>Rename</DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </>
+        )
+      }
+      render(<Controlled />)
+      await userEvent.click(trigger())
+      expect(screen.getByTestId('state')).toHaveTextContent('open')
+      await userEvent.click(screen.getByRole('menuitem', { name: 'Rename' }))
+      expect(screen.getByTestId('state')).toHaveTextContent('closed')
+      expect(screen.queryByRole('menu')).toBeNull()
+    })
+  })
+
+  describe('positioning (mocked geometry)', () => {
+    let restore: () => void
+    beforeEach(() => {
+      restore = mockGeometry()
+      setViewport(1000, 800)
+    })
+    afterEach(() => restore())
+
+    function Positioned(props: Partial<DropdownMenuContentProps> & { rect?: string }) {
+      const { rect = '400,300,80,32', ...contentProps } = props
+      return (
+        <DropdownMenu defaultOpen>
+          <DropdownMenuTrigger data-rect={rect}>Actions</DropdownMenuTrigger>
+          <DropdownMenuContent data-size="200,120" {...contentProps}>
+            <DropdownMenuItem>Rename</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      )
+    }
+
+    it('defaults to bottom-start with a 6px gap and animates in once positioned', () => {
+      render(<Positioned />)
+      const menu = screen.getByRole('menu')
+      expect(menu.style.position).toBe('fixed')
+      expect(menu.style.left).toBe('400px')
+      expect(menu.style.top).toBe('338px')
+      expect(menu).toHaveAttribute('data-positioned', 'true')
+      expect(menu).toHaveAttribute('data-side', 'bottom')
+      expect(menu).toHaveClass('ds-enter-pop')
+    })
+
+    it('align="end" right-aligns; alignOffset shifts inward', () => {
+      render(<Positioned align="end" alignOffset={10} />)
+      expect(screen.getByRole('menu').style.left).toBe(`${480 - 200 - 10}px`)
+    })
+
+    it('align="center" centres on the trigger', () => {
+      render(<Positioned align="center" />)
+      expect(screen.getByRole('menu').style.left).toBe('340px')
+    })
+
+    it('side="top" with sideOffset opens above', () => {
+      render(<Positioned side="top" sideOffset={10} />)
+      const menu = screen.getByRole('menu')
+      expect(menu).toHaveAttribute('data-side', 'top')
+      expect(menu.style.top).toBe(`${300 - 120 - 10}px`)
+    })
+
+    it('flips to top when the trigger sits at the bottom of the viewport', () => {
+      render(<Positioned rect="400,700,80,32" />)
+      const menu = screen.getByRole('menu')
+      expect(menu).toHaveAttribute('data-side', 'top')
+      expect(menu.style.top).toBe(`${700 - 120 - 6}px`)
+    })
+
+    it('clamps into the viewport gutter at the right edge', () => {
+      render(<Positioned rect="950,300,40,32" />)
+      expect(screen.getByRole('menu').style.left).toBe(`${1000 - 200 - 8}px`)
+    })
+  })
+
+  // The APG menu-button keyboard model, added 2026-09-06. Before it, the
+  // primitive had NO keyboard handling: `ArrowDown|ArrowUp|onKeyDown` did
+  // not appear in the file, opening left focus on the trigger, and Tab
+  // moved to the next page control with the menu still open.
+  describe('keyboard model (APG menu)', () => {
+    const items = () => screen.getAllByRole('menuitem')
+
+    it('ArrowDown on the trigger opens onto the first item', async () => {
+      render(<Menu />)
+      trigger().focus()
+      await userEvent.keyboard('{ArrowDown}')
+      expect(screen.getByRole('menu')).toBeInTheDocument()
+      expect(document.activeElement).toBe(items()[0])
+    })
+
+    it('ArrowUp on the trigger opens onto the LAST item', async () => {
+      render(<Menu />)
+      trigger().focus()
+      await userEvent.keyboard('{ArrowUp}')
+      expect(document.activeElement).toBe(items()[1])
+    })
+
+    it('Up / Down move between items and wrap at both ends', async () => {
+      render(<Menu />)
+      await userEvent.click(trigger())
+      expect(document.activeElement).toBe(items()[0])
+      await userEvent.keyboard('{ArrowDown}')
+      expect(document.activeElement).toBe(items()[1])
+      await userEvent.keyboard('{ArrowDown}')
+      expect(document.activeElement).toBe(items()[0]) // wrapped forward
+      await userEvent.keyboard('{ArrowUp}')
+      expect(document.activeElement).toBe(items()[1]) // wrapped backward
+    })
+
+    it('Home and End jump to the first and last item', async () => {
+      render(<Menu />)
+      await userEvent.click(trigger())
+      await userEvent.keyboard('{End}')
+      expect(document.activeElement).toBe(items()[1])
+      await userEvent.keyboard('{Home}')
+      expect(document.activeElement).toBe(items()[0])
+    })
+
+    it('is ONE tab stop — roving tabindex, never a positive value', async () => {
+      render(<Menu />)
+      await userEvent.click(trigger())
+      expect(items().map((i) => i.tabIndex)).toEqual([0, -1])
+      await userEvent.keyboard('{ArrowDown}')
+      expect(items().map((i) => i.tabIndex)).toEqual([-1, 0])
+    })
+
+    it('Tab from an item closes the menu and restores the trigger', async () => {
+      render(
+        <>
+          <Menu />
+          <button type="button">Next control</button>
+        </>,
+      )
+      await userEvent.click(trigger())
+      await userEvent.keyboard('{Tab}')
+      expect(screen.queryByRole('menu')).toBeNull()
+      expect(document.activeElement).toBe(trigger())
+    })
+
+    it('activating an item restores focus to the trigger', async () => {
+      render(<Menu />)
+      await userEvent.click(trigger())
+      await userEvent.click(screen.getByRole('menuitem', { name: 'Rename' }))
+      expect(screen.queryByRole('menu')).toBeNull()
+      expect(document.activeElement).toBe(trigger())
+    })
+
+    it('an outside click that lands on another control leaves it focused', async () => {
+      render(
+        <>
+          <Menu />
+          <button type="button">Elsewhere</button>
+        </>,
+      )
+      await userEvent.click(trigger())
+      await userEvent.click(screen.getByRole('button', { name: 'Elsewhere' }))
+      expect(document.activeElement).toBe(
+        screen.getByRole('button', { name: 'Elsewhere' }),
+      )
+    })
+
+    // The cascade the menu defect caused: Modal captures
+    // `document.activeElement` as its restore target, so a dialog opened
+    // from a menu item used to capture <body> and restore nothing.
+    it('a dialog opened from a menu item restores focus to the trigger', async () => {
+      function MenuWithDialog() {
+        const [open, setOpen] = useState(false)
+        return (
+          <>
+            <DropdownMenu>
+              <DropdownMenuTrigger>Actions</DropdownMenuTrigger>
+              <DropdownMenuContent>
+                <DropdownMenuItem onClick={() => setOpen(true)}>
+                  Edit column
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+            <Modal isOpen={open} onClose={() => setOpen(false)} title="Edit column">
+              <button type="button">Save</button>
+            </Modal>
+          </>
+        )
+      }
+      render(<MenuWithDialog />)
+      await userEvent.click(trigger())
+      await userEvent.click(screen.getByRole('menuitem', { name: 'Edit column' }))
+      expect(screen.getByRole('dialog')).toBeInTheDocument()
+      await userEvent.keyboard('{Escape}')
+      expect(screen.queryByRole('dialog')).toBeNull()
+      expect(document.activeElement).toBe(trigger())
+    })
+
+    // Menus here legitimately host a small form (the keywords range-filter
+    // chip). Those must not be hijacked: no items to rove, arrows belong to
+    // the field, and Tab moves between the fields instead of closing.
+    describe('a form-shaped menu (no items)', () => {
+      const FormMenu = () => (
+        <DropdownMenu>
+          <DropdownMenuTrigger>Range</DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <label htmlFor="lo">Min</label>
+            <input id="lo" type="number" />
+            <label htmlFor="hi">Max</label>
+            <input id="hi" type="number" />
+          </DropdownMenuContent>
+        </DropdownMenu>
+      )
+
+      it('focuses its first field on open', async () => {
+        render(<FormMenu />)
+        await userEvent.click(screen.getByRole('button', { name: 'Range' }))
+        expect(document.activeElement).toBe(screen.getByLabelText('Min'))
+      })
+
+      it('leaves Tab alone so the fields stay reachable', async () => {
+        render(<FormMenu />)
+        await userEvent.click(screen.getByRole('button', { name: 'Range' }))
+        await userEvent.tab()
+        expect(screen.getByRole('menu')).toBeInTheDocument()
+        expect(document.activeElement).toBe(screen.getByLabelText('Max'))
+      })
+    })
+  })
+
+  describe('composed primitives still work', () => {
+    it('DropdownButton opens its items and selects', async () => {
+      const onSelect = vi.fn()
+      render(
+        <DropdownButton
+          label="New plan"
+          items={[
+            { id: 'set', label: 'Set', description: 'A set', onSelect },
+            { id: 'group', label: 'Group', onSelect: () => {} },
+          ]}
+        />,
+      )
+      await userEvent.click(screen.getByRole('button', { name: 'New plan' }))
+      await userEvent.click(screen.getByRole('menuitem', { name: /Set/ }))
+      expect(onSelect).toHaveBeenCalledTimes(1)
+      expect(screen.queryByRole('menu')).toBeNull()
+    })
+
+    it('MenuButton renders separators and shortcuts', async () => {
+      render(
+        <MenuButton
+          label="File"
+          items={[
+            { id: 'new', label: 'New', shortcut: 'N', onSelect: () => {} },
+            { type: 'separator' },
+            { id: 'quit', label: 'Quit', variant: 'destructive', onSelect: () => {} },
+          ]}
+        />,
+      )
+      await userEvent.click(screen.getByRole('button', { name: 'File' }))
+      expect(screen.getAllByRole('menuitem')).toHaveLength(2)
+      expect(screen.getByRole('separator')).toBeInTheDocument()
+    })
+  })
+})