app/components/admin/disclosure.tsx

Functions

Imports

It imports no other module of this repo. Imported by app/components/admin/overflow-menu.tsx, app/components/admin/row-menu.tsx.

Source

1import { useEffect, useRef } from "react";
2import { Popover, PopoverContent, PopoverTrigger } from "capsomer/react/popover";
3
4/*
5 * Deliberately a disclosure, not role="menu": each item is a submit in its own form, which breaks
6 * menuitem ownership. The panel is a native popover opened by `popovertarget`, so these repair
7 * actions open without script, the panel sits in the top layer (nothing clips it, the posts table's
8 * scroll box included), and the browser light-dismisses it on an outside click. The surface and its
9 * placement are Capsomer's popover; this hook adds the arrow keys and Escape.
10 */
11function useDisclosure(ref: React.RefObject<HTMLDivElement | null>) {
12  useEffect(() => {
13    const root = ref.current;
14    const button = root?.querySelector<HTMLButtonElement>("button[popovertarget]");
15    const panel = root?.querySelector<HTMLElement>("[popover]");
16    if (!root || !button || !panel) return;
17
18    const isOpen = () => panel.matches(":popover-open");
19    const items = () => Array.from(panel.querySelectorAll<HTMLElement>("[data-menu-item]"));
20
21    const close = (restoreFocus: boolean) => {
22      if (!isOpen()) return;
23      panel.hidePopover();
24      if (restoreFocus) button.focus();
25    };
26
27    const onKeyDown = (event: KeyboardEvent) => {
28      if (event.key === "Escape") {
29        if (!isOpen()) return;
30        // Stopped, or the same press also reaches the page's own Escape (the media grid clears its selection).
31        event.stopPropagation();
32        event.preventDefault();
33        close(true);
34        return;
35      }
36      if (!isOpen()) return;
37      if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return;
38
39      const list = items();
40      const here = list.indexOf(document.activeElement as HTMLElement);
41      const next =
42        event.key === "ArrowDown"
43          ? here < 0
44            ? 0
45            : (here + 1) % list.length
46          : here < 0
47            ? list.length - 1
48            : (here - 1 + list.length) % list.length;
49      list[next]?.focus();
50      event.preventDefault();
51    };
52
53    // Tabbing out closes it, or the open panel sits over the next control focus lands on.
54    const onFocusOut = (event: FocusEvent) => {
55      const next = event.relatedTarget;
56      if (next instanceof Node && !root.contains(next)) close(false);
57    };
58
59    // Items submit real forms and this element survives the navigation, so close on activation.
60    const onClick = (event: MouseEvent) => {
61      const target = event.target as HTMLElement | null;
62      if (target?.closest("[data-menu-item]")) close(false);
63    };
64
65    root.addEventListener("keydown", onKeyDown);
66    root.addEventListener("click", onClick);
67    root.addEventListener("focusout", onFocusOut);
68    return () => {
69      root.removeEventListener("keydown", onKeyDown);
70      root.removeEventListener("click", onClick);
71      root.removeEventListener("focusout", onFocusOut);
72    };
73  }, [ref]);
74}
75
76/**
77 * The shared shell of the overflow and row menus, on Capsomer's popover. Items are `cap-option` buttons or
78 * links carrying `data-menu-item`. `summaryLabel` names a button whose content is only an icon.
79 */
80export function DisclosureMenu({
81  summary,
82  summaryLabel,
83  iconOnly,
84  children,
85}: {
86  summary: React.ReactNode;
87  summaryLabel?: string;
88  iconOnly?: boolean;
89  children: React.ReactNode;
90}) {
91  const ref = useRef<HTMLDivElement>(null);
92  useDisclosure(ref);
93
94  return (
95    <div ref={ref}>
96      <Popover>
97        <PopoverTrigger
98          aria-label={summaryLabel}
99          title={summaryLabel}
100          {...(iconOnly ? { "data-icon-only": "", "data-variant": "quiet", "data-size": "sm" } : {})}
101        >
102          {summary}
103        </PopoverTrigger>
104        <PopoverContent side="bottom" align="end" size="auto" data-flush="" aria-label={summaryLabel ?? "Actions"}>
105          <div className="cap-listbox">{children}</div>
106        </PopoverContent>
107      </Popover>
108    </div>
109  );
110}