@lovett/ui 0.0.9 → 0.0.11

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

@@ -0,0 +1,418 @@
+/**
+ * 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')
+    })
+
+    it('does not move focus into the menu on open (the trigger keeps it)', async () => {
+      render(<Menu />)
+      await userEvent.click(trigger())
+      expect(document.activeElement).toBe(trigger())
+    })
+
+    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`)
+    })
+  })
+
+  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()
+    })
+  })
+})

package/src/__tests__/helpers/geometry.ts

@@ -0,0 +1,58 @@
+/**
+ * jsdom has no layout: every rect is 0×0 at (0, 0) and every offset size is
+ * 0. The positioning hook needs real numbers, so elements under test declare
+ * their geometry in data attributes and these spies read them back:
+ *
+ *   data-rect="left,top,width,height"  → getBoundingClientRect()
+ *   data-size="width,height"           → offsetWidth / offsetHeight
+ *
+ * Call `mockGeometry()` in `beforeEach` and the returned restore in
+ * `afterEach`. Viewport is `window.innerWidth/Height` (jsdom's
+ * documentElement.clientWidth is 0, which the hook already falls through).
+ */
+import { vi } from 'vitest'
+
+function numbers(spec: string | undefined, count: number): number[] {
+  const parsed = spec ? spec.split(',').map(Number) : []
+  return Array.from({ length: count }, (_, i) => parsed[i] ?? 0)
+}
+
+export function mockGeometry(): () => void {
+  const rect = vi
+    .spyOn(Element.prototype, 'getBoundingClientRect')
+    .mockImplementation(function (this: Element) {
+      const spec = this instanceof HTMLElement ? this.dataset.rect : undefined
+      const [left, top, width, height] = numbers(spec, 4) as [number, number, number, number]
+      return {
+        left,
+        top,
+        width,
+        height,
+        right: left + width,
+        bottom: top + height,
+        x: left,
+        y: top,
+        toJSON: () => ({ left, top, width, height }),
+      } as DOMRect
+    })
+  const width = vi
+    .spyOn(HTMLElement.prototype, 'offsetWidth', 'get')
+    .mockImplementation(function (this: HTMLElement) {
+      return numbers(this.dataset.size, 2)[0] ?? 0
+    })
+  const height = vi
+    .spyOn(HTMLElement.prototype, 'offsetHeight', 'get')
+    .mockImplementation(function (this: HTMLElement) {
+      return numbers(this.dataset.size, 2)[1] ?? 0
+    })
+  return () => {
+    rect.mockRestore()
+    width.mockRestore()
+    height.mockRestore()
+  }
+}
+
+export function setViewport(width: number, height: number): void {
+  Object.defineProperty(window, 'innerWidth', { configurable: true, writable: true, value: width })
+  Object.defineProperty(window, 'innerHeight', { configurable: true, writable: true, value: height })
+}