components/menu/menu.ts

Functions

Imports

It imports no other module of this repo. Imported by components/menu/menu.react.tsx, components/people-roles/people-roles.ts.

Source

1// The form menu's behaviour: a <details> of submit buttons (and links) that already works with no script.
2// With script it also closes on Esc (focus back on the summary), closes on a press or focus
3// outside it, and moves between the buttons with the arrow keys; ArrowDown on the summary opens
4// it and lands on the first button. The Base UI menu needs none of this; it is React only.
5
6const READY = "data-cap-ready";
7
8// The items the arrow keys move through: the submit buttons that are not disabled, and link items.
9const buttonsOf = (d: HTMLElement) => Array.from(d.querySelectorAll<HTMLElement>(".cap-menu > :is(button:not(:disabled), a[href])"));
10
11// Moves to the next or previous button, wrapping; `from` is the focused one, or -1.
12export function stepIndex(count: number, from: number, dir: 1 | -1): number {
13  if (count === 0) return -1;
14  if (from < 0) return dir === 1 ? 0 : count - 1;
15  return (from + dir + count) % count;
16}
17
18export function enhance(root: ParentNode = document): () => void {
19  const undo: Array<() => void> = [];
20  for (const d of Array.from(root.querySelectorAll<HTMLDetailsElement>("details[data-cap='menu-form']:not([data-cap-ready])"))) {
21    d.setAttribute(READY, "");
22    const summary = d.querySelector<HTMLElement>(":scope > summary");
23    const close = (focus: boolean) => {
24      d.open = false;
25      if (focus) summary?.focus();
26    };
27    const onKey = (e: KeyboardEvent) => {
28      const items = buttonsOf(d);
29      if (e.key === "Escape" && d.open) {
30        e.preventDefault();
31        close(true);
32      } else if (e.key === "ArrowDown" && e.target === summary && !d.open) {
33        e.preventDefault();
34        d.open = true;
35        items[0]?.focus();
36      } else if ((e.key === "ArrowDown" || e.key === "ArrowUp") && d.open) {
37        const at = items.indexOf(document.activeElement as HTMLElement);
38        const next = items[stepIndex(items.length, at, e.key === "ArrowDown" ? 1 : -1)];
39        if (next) {
40          e.preventDefault();
41          next.focus();
42        }
43      }
44    };
45    const onOutside = (e: Event) => {
46      if (d.open && e.target instanceof Node && !d.contains(e.target)) close(false);
47    };
48    const onFocusOut = (e: FocusEvent) => {
49      if (d.open && e.relatedTarget instanceof Node && !d.contains(e.relatedTarget)) close(false);
50    };
51    d.addEventListener("keydown", onKey);
52    d.addEventListener("focusout", onFocusOut);
53    document.addEventListener("pointerdown", onOutside);
54    undo.push(() => {
55      d.removeEventListener("keydown", onKey);
56      d.removeEventListener("focusout", onFocusOut);
57      document.removeEventListener("pointerdown", onOutside);
58      d.removeAttribute(READY);
59    });
60  }
61  return () => undo.forEach((f) => f());
62}