Alert dialog

1"use client";
2 
3import * as React from "react";
4import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
5 
6import { cn } from "@/lib/utils";
7import { Button } from "@/components/ui/button";
8 
9type AutoFocusEventHandler = (event: Event) => void;
10type FocusTarget = AlertDialogPrimitive.Popup.Props["initialFocus"];
11type PointerDownOutsideEvent = CustomEvent<{ originalEvent: PointerEvent }>;
12type FocusOutsideEvent = CustomEvent<{ originalEvent: FocusEvent }>;
13type DismissableLayerHandlers = {
14  onEscapeKeyDown?: (event: KeyboardEvent) => void;
15  onFocusOutside?: (event: FocusOutsideEvent) => void;
16  onInteractOutside?: (event: FocusOutsideEvent | PointerDownOutsideEvent) => void;
17  onPointerDownOutside?: (event: PointerDownOutsideEvent) => void;
18};
19type AlertDialogPortalProps = AlertDialogPrimitive.Portal.Props & {
20  forceMount?: boolean;
21};
22type AlertDialogOverlayProps = AlertDialogPrimitive.Backdrop.Props & {
23  asChild?: boolean;
24  children?: React.ReactNode;
25  forceMount?: boolean;
26};
27type AlertDialogContentProps = AlertDialogPrimitive.Popup.Props & {
28  asChild?: boolean;
29  children?: React.ReactNode;
30  forceMount?: boolean;
31  onCloseAutoFocus?: AutoFocusEventHandler;
32  onOpenAutoFocus?: AutoFocusEventHandler;
33  size?: "default" | "sm";
34} & DismissableLayerHandlers;
35type AlertDialogButtonProps = React.ComponentProps<typeof AlertDialogPrimitive.Close> &
36  Pick<React.ComponentProps<typeof Button>, "variant" | "size"> & {
37    asChild?: boolean;
38    children?: React.ReactNode;
39  };
40type AlertDialogContextProps = {
41  cancelRef: React.RefObject<HTMLButtonElement | null>;
42  dismissableLayerHandlersRef: React.RefObject<DismissableLayerHandlers>;
43  open: boolean;
44};
45 
46type PreventableBaseUIEvent = {
47  readonly baseUIHandlerPrevented?: boolean;
48  readonly defaultPrevented?: boolean;
49  preventBaseUIHandler?: () => void;
50};
51type EventHandler = (...args: unknown[]) => unknown;
52type RenderFunction = (props: Record<string, unknown>, state: unknown) => React.ReactElement;
53 
54function adaptEventHandlers(props: Record<string, unknown>, beforeBaseUIHandler: boolean) {
55  const eventHandlers: Record<string, EventHandler> = {};
56 
57  for (const [name, handler] of Object.entries(props)) {
58    if (!/^on[A-Z]/.test(name) || typeof handler !== "function") {
59      continue;
60    }
61 
62    eventHandlers[name] = (...args) => {
63      const event = args[0] as PreventableBaseUIEvent | undefined;
64      if (beforeBaseUIHandler && event?.defaultPrevented) {
65// … truncated