Dialog

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