Alert dialog

"use client";

import { createContext, useContext, useId, type ComponentProps } from "react";
import { Dialog, DialogBody, DialogFooter, DialogTitle, type DialogProps } from "./dialog";
import "./alert-dialog.css";

type Tone = "default" | "danger";

const AlertContext = createContext<{ tone: Tone; descriptionId?: string }>({ tone: "default" });

export type AlertDialogProps = Omit<DialogProps, "closedby"> & {
  /** danger marks the title with a warning icon for actions that destroy data. */
  tone?: Tone;
};

/**
 * A Dialog with role="alertdialog" that only Escape or one of its actions can
 * close. A click on the backdrop does nothing.
 */
export function AlertDialog({ tone = "default", className, children, ...rest }: AlertDialogProps) {
  const descriptionId = useId();
  return (
    <AlertContext.Provider value={{ tone, descriptionId }}>
      <Dialog
        role="alertdialog"
        aria-describedby={descriptionId}
        {...rest}
        closedby="closerequest"
        data-tone={tone}
        className={["eq-alert-dialog", className].filter(Boolean).join(" ")}
      >
        {children}
      </Dialog>
    </AlertContext.Provider>
  );
}

export function AlertDialogTitle({ className, children, ...rest }: ComponentProps<"h2">) {
  const { tone } = useContext(AlertContext);
  return (
    <DialogTitle {...rest} className={["eq-alert-dialog-title", className].filter(Boolean).join(" ")}>
      {tone === "danger" && (
        <svg
          className="eq-alert-dialog-icon"
          viewBox="0 0 20 20"
          fill="none"
          stroke="currentColor"
          strokeWidth="1.5"
          strokeLinecap="round"
          strokeLinejoin="round"
          aria-hidden="true"
        >
          <path d="M8.6 3.4 2.3 14.3a1.6 1.6 0 0 0 1.4 2.4h12.6a1.6 1.6 0 0 0 1.4-2.4L11.4 3.4a1.6 1.6 0 0 0-2.8 0Z" />
          <path d="M10 8v3.5M10 14h.01" />
        </svg>
      )}
      {children}
    </DialogTitle>
  );
}

/** The consequence text. The dialog is described by it. */
export function AlertDialogDescription({ className, ...rest }: ComponentProps<"div">) {
  const { descriptionId } = useContext(AlertContext);
  return (
    <DialogBody
      id={descriptionId}
      {...rest}
      className={["eq-alert-dialog-description", className].filter(Boolean).join(" ")}
    />
  );
}

/**
 * A method="dialog" form. Each submit button inside closes the dialog and sets
 * returnValue to its value. The first button gets autofocus, so the least
 * destructive action goes first.
 */
export function AlertDialogActions({ className, ref, ...rest }: ComponentProps<"form">) {
  function attach(node: HTMLFormElement | null) {
    if (node && !node.querySelector("[autofocus]")) {
      node.querySelector("button")?.setAttribute("autofocus", "");
    }
    if (typeof ref === "function") ref(node);
    else if (ref) ref.current = node;
  }

  return (
    <DialogFooter
      {...rest}
      ref={attach}
      className={["eq-alert-dialog-actions", className].filter(Boolean).join(" ")}
    />
  );
}