components/menu/menu.react.tsx

Functions

Imports

It imports components/menu/menu.ts. Imported by components/menu/examples.tsx, components/people-roles/people-roles.react.tsx, components/posts-list/posts-list.react.tsx.

Source

1import { Menu as Base } from "@base-ui/react/menu";
2import { Fragment, useEffect, useId, useRef, type ReactNode } from "react";
3import { enhance } from "./menu.ts";
4
5export interface MenuAction {
6  type?: "item";
7  label: string;
8  onSelect?: () => void;
9  // Destructive or one-way. Danger items are moved to the end of the menu, after a
10  // separator, and drawn in --crit (Primer's rule). The item itself should open the
11  // confirm dialog, never act at once.
12  danger?: boolean;
13  disabled?: boolean;
14  // Why the item is disabled, shown under it and read with it. A disabled item stays
15  // reachable by the arrow keys so its reason can be read.
16  reason?: string;
17  // The key that runs this command elsewhere, in aria-keyshortcuts form: "R", "Shift+D",
18  // "Control+K". Shown at the item's end.
19  shortcut?: string;
20  // A small icon before the label.
21  icon?: ReactNode;
22}
23
24// An item that is on or off, with a check at its end while it is on. The menu stays open
25// when it is pressed.
26export interface MenuCheckbox {
27  type: "checkbox";
28  label: string;
29  checked?: boolean;
30  defaultChecked?: boolean;
31  onCheckedChange?: (checked: boolean) => void;
32  disabled?: boolean;
33  shortcut?: string;
34}
35
36// One choice of several, with a check at its end on the chosen one.
37export interface MenuRadioGroup {
38  type: "radio-group";
39  // A muted heading over the group.
40  label?: string;
41  value?: string;
42  defaultValue?: string;
43  onValueChange?: (value: string) => void;
44  items: Array<{ value: string; label: string; disabled?: boolean }>;
45}
46
47// Items under a muted heading.
48export interface MenuGroup {
49  type: "group";
50  label: string;
51  items: MenuAction[];
52}
53
54// An item that opens another menu to its side.
55export interface MenuSubmenu {
56  type: "submenu";
57  label: string;
58  items: MenuEntry[];
59  disabled?: boolean;
60  icon?: ReactNode;
61}
62
63// A separator between groups of ordinary items.
64export type MenuEntry = MenuAction | MenuCheckbox | MenuRadioGroup | MenuGroup | MenuSubmenu | "separator";
65
66export interface MenuProps {
67  // The trigger's visible label: what the menu acts on ("Actions", "More for capsid").
68  label: ReactNode;
69  // Needed when the label is not plain text, for example an icon-only trigger.
70  "aria-label"?: string;
71  items: MenuEntry[];
72  disabled?: boolean;
73  // Where the popup is portalled. Inside a modal <dialog> pass the dialog.
74  container?: HTMLElement | null;
75  // For specimens and tests: open on mount.
76  defaultOpen?: boolean;
77}
78
79const Chevron = () => (
80  <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
81    <path fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" d="m3.5 6 4.5 4.5L12.5 6" />
82  </svg>
83);
84
85const ChevronEnd = () => (
86  <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
87    <path fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" d="m6 3.5 4.5 4.5L6 12.5" />
88  </svg>
89);
90
91const Check = () => (
92  <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
93    <path fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" d="M3.5 8.5 6.5 11.5 12.5 4.5" />
94  </svg>
95);
96
97const isAction = (e: MenuEntry): e is MenuAction => e !== "separator" && (e.type === undefined || e.type === "item");
98
99// Ordinary entries first, in their order, with no leading, trailing or doubled separator;
100// then the danger items, after one separator.
101export function arrangeEntries(items: MenuEntry[]): MenuEntry[] {
102  const plain: MenuEntry[] = [];
103  for (const e of items) {
104    if (e === "separator") {
105      if (plain.length > 0 && plain[plain.length - 1] !== "separator") plain.push(e);
106    } else if (!(isAction(e) && e.danger)) plain.push(e);
107  }
108  if (plain[plain.length - 1] === "separator") plain.pop();
109  const danger = items.filter((e): e is MenuAction => isAction(e) && e.danger === true);
110  return danger.length > 0 && plain.length > 0 ? [...plain, "separator", ...danger] : [...plain, ...danger];
111}
112
113// The caps of a shortcut: "Shift+R" is two, aria-hidden (the name stays the action, and
114// aria-keyshortcuts says the keys).
115function Keys({ shortcut }: { shortcut: string }) {
116  return (
117    <span className="cap-option-keys" aria-hidden="true">
118      {shortcut.split("+").map((cap, i) => (
119        <Fragment key={`${cap}-${i}`}>
120          {i > 0 ? " " : null}
121          <kbd className="cap-menu-kbd">{cap}</kbd>
122        </Fragment>
123      ))}
124    </span>
125  );
126}
127
128function Entries({ entries, id, container }: { entries: MenuEntry[]; id: string; container?: HTMLElement | null }) {
129  return (
130    <>
131      {entries.map((e, i) => {
132        const key = `${i}`;
133        if (e === "separator") return <Base.Separator key={`sep-${key}`} className="cap-listbox-separator cap-menu-separator" />;
134        if (isAction(e)) {
135          return (
136            <Base.Item
137              key={`${e.label}-${key}`}
138              className="cap-option cap-menu-item"
139              label={e.label}
140              disabled={e.disabled}
141              onClick={e.onSelect}
142              data-tone={e.danger ? "crit" : undefined}
143              aria-describedby={e.reason ? `${id}-r${key}` : undefined}
144              aria-keyshortcuts={e.shortcut}
145            >
146              {e.icon ? <span className="cap-option-icon">{e.icon}</span> : null}
147              <span className="cap-option-label">{e.label}</span>
148              {e.shortcut && <Keys shortcut={e.shortcut} />}
149              {/* Hidden from the item's name and read as its description instead. */}
150              {e.reason && (
151                <span className="cap-menu-reason" id={`${id}-r${key}`} aria-hidden="true">
152                  {e.reason}
153                </span>
154              )}
155            </Base.Item>
156          );
157        }
158        if (e.type === "checkbox") {
159          return (
160            <Base.CheckboxItem key={`${e.label}-${key}`} className="cap-option cap-menu-item" label={e.label} checked={e.checked} defaultChecked={e.defaultChecked} onCheckedChange={e.onCheckedChange} disabled={e.disabled} aria-keyshortcuts={e.shortcut}>
161              <span className="cap-option-label">{e.label}</span>
162              {e.shortcut && <Keys shortcut={e.shortcut} />}
163              <span className="cap-option-indicator" aria-hidden="true">
164                <Base.CheckboxItemIndicator>
165                  <Check />
166                </Base.CheckboxItemIndicator>
167              </span>
168            </Base.CheckboxItem>
169          );
170        }
171        if (e.type === "radio-group") {
172          const group = (
173            <Base.RadioGroup value={e.value} defaultValue={e.defaultValue} onValueChange={e.onValueChange ? (v: unknown) => e.onValueChange?.(String(v)) : undefined}>
174              {e.items.map((r) => (
175                <Base.RadioItem key={r.value} value={r.value} label={r.label} disabled={r.disabled} className="cap-option cap-menu-item">
176                  <span className="cap-option-label">{r.label}</span>
177                  <span className="cap-option-indicator" aria-hidden="true">
178                    <Base.RadioItemIndicator>
179                      <Check />
180                    </Base.RadioItemIndicator>
181                  </span>
182                </Base.RadioItem>
183              ))}
184            </Base.RadioGroup>
185          );
186          return e.label ? (
187            <Base.Group key={`radio-${key}`}>
188              <Base.GroupLabel className="cap-listbox-label">{e.label}</Base.GroupLabel>
189              {group}
190            </Base.Group>
191          ) : (
192            <Fragment key={`radio-${key}`}>{group}</Fragment>
193          );
194        }
195        if (e.type === "group") {
196          return (
197            <Base.Group key={`group-${key}`}>
198              <Base.GroupLabel className="cap-listbox-label">{e.label}</Base.GroupLabel>
199              <Entries entries={e.items} id={`${id}-g${key}`} container={container} />
200            </Base.Group>
201          );
202        }
203        return (
204          <Base.SubmenuRoot key={`${e.label}-${key}`}>
205            <Base.SubmenuTrigger className="cap-option cap-menu-item" label={e.label} disabled={e.disabled}>
206              {e.icon ? <span className="cap-option-icon">{e.icon}</span> : null}
207              <span className="cap-option-label">{e.label}</span>
208              <span className="cap-menu-chevron" aria-hidden="true">
209                <ChevronEnd />
210              </span>
211            </Base.SubmenuTrigger>
212            <Base.Portal container={container ?? undefined}>
213              <Base.Positioner className="cap-menu-positioner" side="right" align="start" sideOffset={0} alignOffset={-4}>
214                <Base.Popup className="cap-popover cap-menu" data-submenu="">
215                  <Entries entries={e.items} id={`${id}-s${key}`} container={container} />
216                </Base.Popup>
217              </Base.Positioner>
218            </Base.Portal>
219          </Base.SubmenuRoot>
220        );
221      })}
222    </>
223  );
224}
225
226export function Menu({ label, items, disabled = false, container, defaultOpen, ...rest }: MenuProps) {
227  const id = useId();
228  const entries = arrangeEntries(items);
229  return (
230    // Not modal: a menu does not lock the page's scroll or cover it with an invisible
231    // backdrop. Esc, Tab and a click outside close it; focus returns to the trigger.
232    <Base.Root modal={false} disabled={disabled} defaultOpen={defaultOpen}>
233      <Base.Trigger className="cap-btn cap-menu-trigger" aria-label={rest["aria-label"]}>
234        {label}
235        <Chevron />
236      </Base.Trigger>
237      <Base.Portal container={container ?? undefined}>
238        <Base.Positioner className="cap-menu-positioner" sideOffset={4} align="start">
239          <Base.Popup className="cap-popover cap-menu">
240            <Entries entries={entries} id={id} container={container} />
241          </Base.Popup>
242        </Base.Positioner>
243      </Base.Portal>
244    </Base.Root>
245  );
246}
247
248export interface FormMenuItem {
249  // The button's text.
250  label: string;
251  // Posted as `intent` (or `name`) with the form: what the server is asked to do. For a link
252  // item it is only the item's key.
253  value: string;
254  // A link item: goes somewhere instead of posting ("Edit", "View on the site"). Same look, and
255  // never danger.
256  href?: string;
257  // Destructive or one-way: moved last, after a separator, and drawn in --crit. The server
258  // answers it with its own confirmation page, since this works with no script.
259  danger?: boolean;
260  // A disabled item stays in the menu with its reason under it in plain text (a native
261  // disabled button cannot be reached, so the reason is not hidden behind it).
262  disabled?: boolean;
263  reason?: string;
264}
265
266export interface FormMenuProps {
267  // The summary's visible text: what the menu acts on ("Actions for foxhound.app").
268  label: ReactNode;
269  "aria-label"?: string;
270  // Where the form posts, and its method (post unless a GET filter is meant).
271  action: string;
272  method?: "post" | "get";
273  items: FormMenuItem[];
274  // The field the button's value goes in. `intent` unless the server expects another name.
275  name?: string;
276  // Fields every item sends with it: the row's id, a return address.
277  hidden?: Record<string, string>;
278}
279
280// The row-actions menu with no script: a <details> of submit buttons. Pure markup, so a server
281// renders what the browser shows; `enhance` adds Esc, arrow keys and closing on an outside press.
282export function FormMenu({ label, action, method = "post", items, name = "intent", hidden, ...rest }: FormMenuProps) {
283  const ref = useRef<HTMLDetailsElement>(null);
284  useEffect(() => (ref.current ? enhance(ref.current.parentNode ?? document) : undefined), []);
285  const ordinary = items.filter((i) => !i.danger);
286  const danger = items.filter((i) => i.danger);
287  const button = (i: FormMenuItem) => i.href && !i.danger ? (
288    <a key={i.value} className="cap-option cap-menu-item" href={i.href}>
289      <span className="cap-option-label">{i.label}</span>
290    </a>
291  ) : (
292    <button key={i.value} type="submit" className="cap-option cap-menu-item" name={name} value={i.value} disabled={i.disabled} data-tone={i.danger ? "crit" : undefined}>
293      <span className="cap-option-label">{i.label}</span>
294      {i.reason ? <span className="cap-menu-reason">{i.reason}</span> : null}
295    </button>
296  );
297  return (
298    <details className="cap-menu-form" data-cap="menu-form" ref={ref}>
299      <summary className="cap-btn cap-menu-trigger" aria-label={rest["aria-label"]}>
300        {label}
301        <Chevron />
302      </summary>
303      <form className="cap-popover cap-menu" action={action} method={method}>
304        {Object.entries(hidden ?? {}).map(([k, v]) => (
305          <input key={k} type="hidden" name={k} value={v} />
306        ))}
307        {ordinary.map(button)}
308        {danger.length && ordinary.length ? <hr className="cap-listbox-separator cap-menu-separator" /> : null}
309        {danger.map(button)}
310      </form>
311    </details>
312  );
313}