app/components/admin/media-drawer.tsx

Functions

Imports

It imports no other module of this repo. Imported by app/components/admin/media-inspector.tsx.

Source

1import { useEffect, useRef, useState } from "react";
2import { useNavigate } from "react-router";
3
4/**
5 * Where focus goes when the inspector closes: the tile it was opened for, found by `data-tile`
6 * rather than a stored node, because opening is a navigation and a drawer opened from the URL has
7 * no trigger at all. The grid's tab stop is the thumbnail and the list's is the name.
8 */
9function focusTile(key: string) {
10  if (document.activeElement && document.activeElement !== document.body) return;
11  const tile = document.querySelector(`[data-tile="${CSS.escape(key)}"]`);
12  const grid = tile?.closest("[data-view]")?.getAttribute("data-view") === "grid";
13  const target =
14    tile?.querySelector<HTMLElement>(grid ? "a.cap-media-open" : "a.cap-table-open") ??
15    document.getElementById("main");
16  target?.focus({ preventScroll: false });
17}
18
19/**
20 * Drives the inspector's native `<dialog>`: modal once hydrated, so the page behind is inert and
21 * the browser owns the focus trap. Returns whether it has hydrated; until then the server render
22 * shows the dialog inline through `data-inline`, and its own links open and close it without script.
23 */
24export function useInspectorDialog(
25  ref: React.RefObject<HTMLDialogElement | null>,
26  activeKey: string,
27  closeHref: string,
28) {
29  const navigate = useNavigate();
30  const [hydrated, setHydrated] = useState(false);
31  const keyRef = useRef(activeKey);
32
33  useEffect(() => {
34    keyRef.current = activeKey;
35  }, [activeKey]);
36
37  useEffect(() => {
38    setHydrated(true);
39    const el = ref.current;
40    if (!el) return;
41    if (!el.open) el.showModal();
42    // The panel, not Close: focusing Close makes a screen reader announce "Close" as the whole event.
43    el.focus({ preventScroll: true });
44    // Closing unmounts the dialog and drops focus on the body. Deferred: a tile inside a scroller is
45    // not focusable until it has a box.
46    return () => {
47      window.setTimeout(() => focusTile(keyRef.current), 0);
48    };
49  }, [ref]);
50
51  useEffect(() => {
52    const el = ref.current;
53    if (!el) return;
54    const close = () => navigate(closeHref, { preventScrollReset: true });
55    // Escape leaves by the URL, as the Close link does: a natively closed dialog would leave ?key= behind.
56    const onCancel = async (event: Event) => {
57      event.preventDefault();
58      await close();
59    };
60    // A click outside the panel's box landed on the backdrop, which stands in for the scrim link.
61    const onClick = async (event: MouseEvent) => {
62      if (event.target !== el) return;
63      const r = el.getBoundingClientRect();
64      const inside =
65        event.clientX >= r.left &&
66        event.clientX <= r.right &&
67        event.clientY >= r.top &&
68        event.clientY <= r.bottom;
69      if (!inside) await close();
70    };
71    el.addEventListener("cancel", onCancel);
72    el.addEventListener("click", onClick);
73    return () => {
74      el.removeEventListener("cancel", onCancel);
75      el.removeEventListener("click", onClick);
76    };
77  }, [ref, closeHref, navigate]);
78
79  return hydrated;
80}