Dropdown Menu

1'use client';
2 
3import * as React from 'react';
4 
5// @interlace/dropdown-menu v1.3.0 — Interlace design system.
6// Docs, props and live preview: https://ds.interlace.tools/c/dropdown-menu
7// What changed since: https://ds.interlace.tools/c/dropdown-menu#history
8// Generated banner — keep it, the upgrade diff reads this version.
9 
10/**
11 * @interlace/ui — DropdownMenu
12 *
13 * A button-triggered command menu — items, checkbox and radio items, submenus,
14 * plus a `Compose` array shorthand. Wraps @base-ui/react/menu: Base UI owns
15 * open state, positioning, focus and typeahead; we own the popup and the rows.
16 *
17 * The menu ARIA is upstream's too, except where this file steps out of it on
18 * purpose — see below.
19 *
20 * ## Anatomy
21 *
22 *   DropdownMenu                     (Menu.Root — renders no DOM node)
23 *     ├─ DropdownMenuTrigger         (Menu.Trigger)
24 *     └─ DropdownMenuContent         (Portal → Positioner(z-50) → Popup — data-min-viewport=320)
25 *          ├─ DropdownMenuLabel      (a plain div — see below)
26 *          ├─ DropdownMenuGroup      (Menu.Group)
27 *          ├─ DropdownMenuItem       (Menu.Item — variant default | destructive)
28 *          ├─ DropdownMenuCheckboxItem / DropdownMenuRadioGroup + RadioItem
29 *          ├─ DropdownMenuSeparator  (a plain div with role="separator")
30 *          ├─ DropdownMenuShortcut   (span, ml-auto)
31 *          └─ DropdownMenuSub        (SubmenuRoot → SubTrigger + SubContent)
32 *
33 * `DropdownMenuContent` is not a thin wrapper: it bundles Portal, Positioner
34 * and Popup, so `side` / `align` / `sideOffset` are lifted onto it and any
35 * other prop lands on the Popup.
36 *
37 * ## Where we deliberately left Base UI
38 *
39 *   - `DropdownMenuLabel` is a `<div>`, not `Menu.GroupLabel`. Base UI throws
40 *     error #31 when a GroupLabel has no `Menu.Group` ancestor, and the
41 *     canonical call site puts a heading straight inside the content. For a
42 *     label that is semantically tied to a set of items, wrap them in
43 *     `DropdownMenuGroup` and use Base UI's own GroupLabel inside it.
44 *   - `DropdownMenuSeparator` is a `<div role="separator">` for the same
45 *     reason of independence from menu structure.
46 *
47 * ## `Compose` — the array form
48 *
49 * `DropdownMenuCompose` (also reachable as `DropdownMenu.Compose`) renders
50 * Root + Trigger + Content from `{ label, onSelect, shortcut, tone }` entries
51 * plus `{ type: 'separator' | 'label' }`. Note it wires each entry's
52// … truncated