Modal

1"use client";
2 
3import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
4import { X } from "@phosphor-icons/react/dist/ssr";
5import {
6  Children,
7  isValidElement,
8} from "react";
9import type * as React from "react";
10import { cn } from "@/lib/utils";
11import {
12  coarseTarget,
13  overlayLayer,
14  selectionFocus,
15} from "@/lib/recipes";
16import { Button, type ButtonProps } from "@/components/ui/button";
17 
18export type ModalSize = "sm" | "md" | "lg" | "xl" | "full";
19export type ModalOpenChangeDetails = Parameters<
20  NonNullable<
21    React.ComponentProps<typeof DialogPrimitive.Root>["onOpenChange"]
22  >
23>[1];
24 
25const SIZE_CLASSES: Record<Exclude<ModalSize, "full">, string> = {
26  sm: "sm:max-w-sm",
27  md: "sm:max-w-md",
28  lg: "sm:max-w-lg",
29  xl: "sm:max-w-xl",
30};
31 
32export interface ModalProps {
33  open?: boolean;
34  defaultOpen?: boolean;
35  onOpenChange?: (
36    open: boolean,
37    details: ModalOpenChangeDetails,
38  ) => void;
39  initialFocusRef?: React.RefObject<HTMLElement | null>;
40  /** Centered width, or full viewport width and height. Default `md`. */
41  size?: ModalSize;
42  /** Auto-render a close X in the top-right corner. Defaults to true when
43   *  there are no `<ModalActions>` in the tree, false when there are. */
44  showClose?: boolean;
45  className?: string;
46  children: React.ReactNode;
47}
48 
49function hasChildOfType(
50  children: React.ReactNode,
51  Component: React.ComponentType,
52): boolean {
53  let found = false;
54  Children.forEach(children, (child) => {
55    if (!isValidElement(child)) return;
56    if (child.type === Component) found = true;
57  });
58  return found;
59}
60 
61export function Modal({
62  open,
63  defaultOpen,
64  onOpenChange,
65  initialFocusRef,
66  size = "md",
67  showClose,
68  className,
69  children,
70}: ModalProps): React.ReactElement {
71  const resolvedShowClose =
72    showClose ?? !hasChildOfType(children, ModalActions);
73 
74  return (
75    <DialogPrimitive.Root
76      open={open}
77      defaultOpen={defaultOpen}
78      onOpenChange={onOpenChange}
79    >
80      <DialogPrimitive.Portal>
81        <DialogPrimitive.Backdrop
82          data-slot="modal-backdrop"
83          className={cn(
84            "fixed inset-0 bg-scrim",
85            overlayLayer.modal,
86            "transition-opacity duration-[var(--duration-overlay)] ease-[var(--ease-standard)]",
87            "data-starting-style:opacity-0 data-ending-style:opacity-0",
88          )}
89        />
90        <DialogPrimitive.Popup
91          data-slot="modal-popup"
92          initialFocus={initialFocusRef}
93          className={cn(
94// … truncated