components/dialog/dialog.react.tsx

Functions

Imports

It imports components/dialog/dialog.ts. Imported by components/approval-sheet/approval-sheet.react.tsx, components/command-menu/command-menu.react.tsx, components/confirm-dialog/confirm-dialog.react.tsx, components/detail-panel/detail-panel.react.tsx, components/shell/shell.react.tsx, components/shortcuts/shortcuts.react.tsx, components/site-header/site-header.react.tsx.

Source

1import { createContext, useCallback, useContext, useEffect, useId, useRef, useState, type HTMLAttributes, type ReactNode, type Ref } from "react";
2import { closeDialog, openDialog, setDialogBusy, wireDialog } from "./dialog.ts";
3
4export type DialogPlacement = "center" | "right" | "left" | "bottom" | "top";
5export type DialogSize = "sm" | "md" | "lg";
6
7interface Ids {
8  title: string;
9  description: string;
10  setDescribed: (on: boolean) => void;
11}
12const Ctx = createContext<Ids | null>(null);
13
14export interface DialogProps extends Omit<HTMLAttributes<HTMLDialogElement>, "style" | "onClose" | "role"> {
15  // Controlled: true opens it (showModal), false closes it.
16  open: boolean;
17  // Called once per close, by Esc, Close, Cancel, the backdrop or Back, with false.
18  onOpenChange: (open: boolean) => void;
19  placement?: DialogPlacement;
20  size?: DialogSize;
21  // A question the person must answer: role="alertdialog", focus on Cancel, and a click
22  // outside does nothing. No Close button unless closeButton says so.
23  alert?: boolean;
24  // A click on the backdrop does nothing (Esc still closes).
25  modalLock?: boolean;
26  // Focus goes to Cancel on open, as for an alert, without the alert role.
27  destructive?: boolean;
28  // Busy: aria-busy, and Esc, Close, Cancel and the backdrop refuse.
29  busy?: boolean;
30  // Push "#dialog-<historyId>" so Back closes it.
31  history?: boolean;
32  historyId?: string;
33  // The corner Close button. Default: shown, except for an alert.
34  closeButton?: boolean;
35  closeLabel?: string;
36  // Where focus goes when the opener has gone; the page's main region by default.
37  returnTo?: HTMLElement | null;
38  // Where focus goes on open. Default: the [autofocus] control, else the first one.
39  initialFocus?: { current: HTMLElement | null };
40  // Server-rendered markup cannot know a DialogDescription is inside; say so here to have
41  // aria-describedby in the HTML.
42  described?: boolean;
43  ref?: Ref<HTMLDialogElement>;
44  // Names the dialog when there is no DialogTitle. With a DialogTitle, leave it out.
45  "aria-label"?: string;
46  children?: ReactNode;
47}
48
49const CLOSE_ICON = <path d="M4 4l8 8M12 4l-8 8" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />;
50
51export function Dialog(props: DialogProps) {
52  const {
53    open,
54    onOpenChange,
55    placement = "center",
56    size = "md",
57    alert = false,
58    modalLock,
59    destructive,
60    busy,
61    history = false,
62    historyId,
63    closeButton = !alert,
64    closeLabel = "Close",
65    returnTo,
66    initialFocus,
67    described = false,
68    ref,
69    className,
70    children,
71    ...rest
72  } = props;
73  const id = useId();
74  const own = useRef<HTMLDialogElement | null>(null);
75  const [hasDescription, setDescribed] = useState(described);
76  const labelled = rest["aria-label"] == null && rest["aria-labelledby"] == null;
77  const setRefs = useCallback(
78    (el: HTMLDialogElement | null) => {
79      own.current = el;
80      if (typeof ref === "function") ref(el);
81      else if (ref) ref.current = el;
82    },
83    [ref],
84  );
85
86  // Wired once the markup is on the page; the markup itself is complete without it.
87  useEffect(() => {
88    const d = own.current;
89    return d ? wireDialog(d) : undefined;
90  }, []);
91
92  useEffect(() => {
93    const d = own.current;
94    if (!d) return;
95    if (open && !d.open) openDialog(d, document.activeElement, { history, returnTo, focus: initialFocus?.current ?? null });
96    else if (!open && d.open) closeDialog(d);
97  }, [open, history, returnTo, initialFocus]);
98
99  // Close and Cancel say they are refusing while busy.
100  useEffect(() => {
101    if (own.current) setDialogBusy(own.current, !!busy);
102  }, [busy]);
103
104  return (
105    <Ctx.Provider value={{ title: `${id}-title`, description: `${id}-description`, setDescribed }}>
106      <dialog
107        {...rest}
108        ref={setRefs}
109        className={className ? `cap-dialog ${className}` : "cap-dialog"}
110        data-cap="dialog"
111        data-placement={placement}
112        data-size={size}
113        data-cap-modal-lock={modalLock ? "" : undefined}
114        data-cap-destructive={destructive ? "" : undefined}
115        data-cap-history={history ? "" : undefined}
116        data-cap-history-id={history ? historyId : undefined}
117        role={alert ? "alertdialog" : undefined}
118        aria-labelledby={rest["aria-labelledby"] ?? (labelled ? `${id}-title` : undefined)}
119        aria-describedby={rest["aria-describedby"] ?? (hasDescription ? `${id}-description` : undefined)}
120        aria-busy={busy || undefined}
121        onClose={() => onOpenChange(false)}
122      >
123        {children}
124        {closeButton && <DialogClose label={closeLabel} />}
125      </dialog>
126    </Ctx.Provider>
127  );
128}
129
130export function DialogHeader({ className, divider, ...rest }: HTMLAttributes<HTMLDivElement> & { divider?: boolean }) {
131  return <div {...rest} className={className ? `cap-dialog-header ${className}` : "cap-dialog-header"} data-divider={divider ? "" : undefined} />;
132}
133
134export function DialogTitle({ className, ...rest }: HTMLAttributes<HTMLHeadingElement>) {
135  const ids = useContext(Ctx);
136  return <h2 id={ids?.title} {...rest} className={className ? `cap-dialog-title ${className}` : "cap-dialog-title"} />;
137}
138
139export function DialogDescription({ className, ...rest }: HTMLAttributes<HTMLParagraphElement>) {
140  const ids = useContext(Ctx);
141  const set = ids?.setDescribed;
142  useEffect(() => {
143    set?.(true);
144    return () => set?.(false);
145  }, [set]);
146  return <p id={ids?.description} {...rest} className={className ? `cap-dialog-description ${className}` : "cap-dialog-description"} />;
147}
148
149// An icon tile beside the title, as Alert Dialog's media.
150export function DialogMedia({ className, tone, ...rest }: HTMLAttributes<HTMLDivElement> & { tone?: "crit" | "warn" }) {
151  return <div aria-hidden="true" {...rest} className={className ? `cap-dialog-media ${className}` : "cap-dialog-media"} data-tone={tone} />;
152}
153
154// The part that scrolls when the content is taller than the screen.
155export function DialogBody({ className, flush, ...rest }: HTMLAttributes<HTMLDivElement> & { flush?: boolean }) {
156  return <div {...rest} className={className ? `cap-dialog-body ${className}` : "cap-dialog-body"} data-flush={flush ? "" : undefined} />;
157}
158
159export function DialogFooter({ className, align, ...rest }: HTMLAttributes<HTMLDivElement> & { align?: "start" | "between" }) {
160  return <div {...rest} className={className ? `cap-dialog-footer ${className}` : "cap-dialog-footer"} data-align={align} />;
161}
162
163// A Close part. With no children it is the corner icon button; with children it is a button
164// that closes (a Cancel in the footer: `<DialogClose part="cancel">Cancel</DialogClose>`).
165export function DialogClose({ label = "Close", part = "close", children, className, onClick, ...rest }: Omit<HTMLAttributes<HTMLButtonElement>, "children"> & { label?: string; part?: "close" | "cancel"; children?: ReactNode }) {
166  if (children != null) {
167    return (
168      <button type="button" {...rest} className={className ? `cap-btn ${className}` : "cap-btn"} data-cap-part={part} onClick={onClick}>
169        {children}
170      </button>
171    );
172  }
173  return (
174    <button type="button" {...rest} className={`cap-btn cap-dialog-close${className ? ` ${className}` : ""}`} data-variant="quiet" data-icon-only="" data-cap-part={part} aria-label={label} onClick={onClick}>
175      <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true" focusable="false">
176        {CLOSE_ICON}
177      </svg>
178    </button>
179  );
180}
181
182// The state a trigger and a Dialog share: `const d = useDialog(); <button onClick={d.show}>`
183// and `<Dialog {...d.props}>`. Focus goes back to the button that was focused when show ran.
184export function useDialog(initial = false): { open: boolean; show: () => void; hide: () => void; toggle: () => void; props: { open: boolean; onOpenChange: (open: boolean) => void } } {
185  const [open, setOpen] = useState(initial);
186  const show = useCallback(() => setOpen(true), []);
187  const hide = useCallback(() => setOpen(false), []);
188  const toggle = useCallback(() => setOpen((o) => !o), []);
189  return { open, show, hide, toggle, props: { open, onOpenChange: setOpen } };
190}