Dropdown Menu

'use client'

import { useEffect, useId, useRef, useState } from 'react'

export type MenuItem =
  | { type?: 'item'; label: string; icon?: React.ReactNode; shortcut?: string; danger?: boolean; disabled?: boolean; onSelect?: () => void }
  | { type: 'checkbox'; label: string; checked: boolean; onChange: (v: boolean) => void }
  | { type: 'radio'; label: string; group: string; value: string; current: string; onChange: (v: string) => void }
  | { type: 'submenu'; label: string; icon?: React.ReactNode; items: MenuItem[] }
  | { type: 'separator' }
  | { type: 'label'; label: string }

export interface DropdownMenuProps {
  trigger: React.ReactNode
  items: MenuItem[]
  /** Accessible name for icon-only triggers. */
  label?: string
  align?: 'start' | 'end'
  /** Open on mount without moving focus (for inline demos). */
  defaultOpen?: boolean
}

const focusables = (el: HTMLElement | null) => [...(el?.querySelectorAll<HTMLElement>('[role^="menuitem"]:not([aria-disabled="true"])') ?? [])]

function MenuList({ items, onClose, depth, labelledBy, autoFocus }: { items: MenuItem[]; onClose: (refocus?: boolean) => void; depth: number; labelledBy?: string; autoFocus: boolean }) {
  const ref = useRef<HTMLDivElement>(null)
  const [sub, setSub] = useState<number | null>(null)
  const typed = useRef({ s: '', t: 0 })

  useEffect(() => {
    if (autoFocus) focusables(ref.current)[0]?.focus()
  }, [autoFocus])

  const move = (dir: 1 | -1 | 'first' | 'last') => {
    const list = focusables(ref.current).filter((el) => el.closest('[role="menu"]') === ref.current)
    const i = list.indexOf(document.activeElement as HTMLElement)
    const next = dir === 'first' ? 0 : dir === 'last' ? list.length - 1 : (i + dir + list.length) % list.length
    list[next]?.focus()
  }

  const onKey = (e: React.KeyboardEvent) => {
    if ((e.target as HTMLElement).closest('[role="menu"]') !== ref.current) return
    const keys: Record<string, () => void> = {
      ArrowDown: () => move(1),
      ArrowUp: () => move(-1),
      Home: () => move('first'),
      End: () => move('last'),
      Escape: () => onClose(true),
      ArrowLeft: () => depth > 0 && onClose(true),
      Tab: () => onClose(false),
    }
    if (keys[e.key]) {
      if (e.key !== 'Tab') e.preventDefault()
      e.stopPropagation()
      keys[e.key]()
      return
    }
    // Typeahead
    if (e.key.length === 1 && /\S/.test(e.key)) {
      const now = Date.now()
      typed.current.s = (now - typed.current.t < 600 ? typed.current.s : '') + e.key.toLowerCase()
      typed.current.t = now
      focusables(ref.current)
        .find((el) => el.closest('[role="menu"]') === ref.current && el.textContent?.trim().toLowerCase().startsWith(typed.current.s))
        ?.focus()
    }
  }

  const base = 'group relative flex h-8 w-full cursor-default select-none items-center gap-2.5 rounded-md px-2 text-left text-[13.5px] outline-none transition-colors focus:bg-zinc-100 dark:focus:bg-zinc-800/80 aria-disabled:opacity-40'

  return (
    <div
      ref={ref}
      role="menu"
      aria-labelledby={labelledBy}
      onKeyDown={onKey}
      className={`z-30 min-w-[220px] rounded-xl border border-zinc-200 bg-white p-1 text-zinc-800 shadow-[0_20px_50px_-20px_rgb(0_0_0/0.35)] motion-safe:animate-[dm-in_150ms_cubic-bezier(.22,1,.36,1)] dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-200 ${depth ? 'absolute left-full top-[-5px] ml-1' : ''}`}
    >
      {items.map((it, i) => {
        if (it.type === 'separator') return <div key={i} role="separator" className="-mx-1 my-1 h-px bg-zinc-100 dark:bg-zinc-800" />
        if (it.type === 'label') return <div key={i} className="px-2 pb-1 pt-1.5 text-[11.5px] font-medium text-zinc-400">{it.label}</div>
        if (it.type === 'checkbox')
          return (
            <button key={i} type="button" role="menuitemcheckbox" aria-checked={it.checked} className={base} onClick={() => it.onChange(!it.checked)}>
              <span className="grid size-4 place-items-center">{it.checked && <Check />}</span>
              {it.label}
            </button>
          )
        if (it.type === 'radio')
          return (
            <button key={i} type="button" role="menuitemradio" aria-checked={it.current === it.value} className={base} onClick={() => it.onChange(it.value)}>
              <span className="grid size-4 place-items-center">{it.current === it.value && <span className="size-1.5 rounded-full bg-current" />}</span>
              {it.label}
            </button>
          )
        if (it.type === 'submenu')
          return (
            <div key={i} className="relative" onPointerEnter={() => setSub(i)} onPointerLeave={() => setSub(null)}>
              <button
                type="button"
                role="menuitem"
                aria-haspopup="menu"
                aria-expanded={sub === i}
                className={base}
                onClick={() => setSub(i)}
                onKeyDown={(e) => {
                  if (e.key === 'ArrowRight' || e.key === 'Enter' || e.key === ' ') {
                    e.preventDefault()
                    e.stopPropagation()
                    setSub(i)
                  }
                }}
              >
                <span className="grid size-4 place-items-center text-zinc-400 group-focus:text-zinc-700 dark:group-focus:text-zinc-200">{it.icon}</span>
                <span className="flex-1">{it.label}</span>
                <span aria-hidden className="text-zinc-400">›</span>
              </button>
              {sub === i && (
                <MenuList
                  items={it.items}
                  depth={depth + 1}
                  autoFocus
                  onClose={(refocus) => {
                    setSub(null)
                    if (refocus) (ref.current?.querySelectorAll<HTMLElement>('[aria-haspopup="menu"]')[[...items.slice(0, i)].filter((x) => x.type === 'submenu').length])?.focus()
                    else onClose(false)
                  }}
                />
              )}
            </div>
          )
        return (
          <button
            key={i}
            type="button"
            role="menuitem"
            aria-disabled={it.disabled || undefined}
            className={`${base} ${it.danger ? 'text-red-600 focus:bg-red-50 dark:text-red-400 dark:focus:bg-red-500/10' : ''}`}
            onClick={() => {
              if (it.disabled) return
              it.onSelect?.()
              onClose(true)
            }}
          >
            <span className={`grid size-4 place-items-center ${it.danger ? '' : 'text-zinc-400 group-focus:text-zinc-700 dark:group-focus:text-zinc-200'}`}>{it.icon}</span>
            <span className="flex-1">{it.label}</span>
            {it.shortcut && <kbd className="font-sans text-[11.5px] tracking-wide text-zinc-400">{it.shortcut}</kbd>}
          </button>
        )
      })}
    </div>
  )
}

const Check = () => (
  <svg viewBox="0 0 16 16" className="size-3.5" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>
    <path d="m3.5 8.5 3 3 6-6.5" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
)

/** Menu button with nested submenus, checkbox and radio items, shortcuts and typeahead (WAI-ARIA menu button). */
export function DropdownMenu({ trigger, items, label, align = 'start', defaultOpen = false }: DropdownMenuProps) {
  const [open, setOpen] = useState(defaultOpen)
  const [viaKeyboard, setViaKeyboard] = useState(false)
  const id = useId()
  const btn = useRef<HTMLButtonElement>(null)
  const root = useRef<HTMLDivElement>(null)

  useEffect(() => {
    if (!open) return
    const off = (e: PointerEvent) => !root.current?.contains(e.target as Node) && setOpen(false)
    document.addEventListener('pointerdown', off)
    return () => document.removeEventListener('pointerdown', off)
  }, [open])

  return (
    <div ref={root} className="relative inline-block">
      <button
        ref={btn}
        id={id}
        type="button"
        aria-haspopup="menu"
        aria-expanded={open}
        aria-label={label}
        onClick={() => {
          setViaKeyboard(false)
          setOpen((o) => !o)
        }}
        onKeyDown={(e) => {
          if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') {
            e.preventDefault()
            setViaKeyboard(true)
            setOpen(true)
          }
        }}
        className="inline-flex h-9 items-center gap-2 rounded-lg border border-zinc-200 bg-white px-3 text-[13.5px] font-medium text-zinc-900 transition hover:bg-zinc-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-900 aria-expanded:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-100 dark:hover:bg-zinc-900 dark:aria-expanded:bg-zinc-900"
      >
        {trigger}
      </button>
      {open && (
        <div className={`absolute top-full mt-1.5 ${align === 'end' ? 'right-0' : 'left-0'}`}>
          <MenuList
            items={items}
            depth={0}
            labelledBy={id}
            autoFocus={viaKeyboard}
            onClose={(refocus) => {
              setOpen(false)
              if (refocus) btn.current?.focus()
            }}
          />
        </div>
      )}
      <style>{`@keyframes dm-in{from{opacity:0;transform:translateY(-4px) scale(.98)}}`}</style>
    </div>
  )
}