yaak-mountain-loop/src-web/components/core/Dialog.tsx

import classNames from "classnames";
import * as m from "motion/react-m";
import type { ReactNode } from "react";
import { useMemo } from "react";
import { Overlay } from "../Overlay";
import { Heading } from "./Heading";
import { IconButton } from "./IconButton";
import type { DialogSize } from "@yaakapp-internal/plugins";

export interface DialogProps {
  children: ReactNode;
  open: boolean;
  onClose?: () => void;
  disableBackdropClose?: boolean;
  title?: ReactNode;
  description?: ReactNode;
  className?: string;
  size?: DialogSize;
  hideX?: boolean;
  noPadding?: boolean;
  noScroll?: boolean;
  vAlign?: "top" | "center";
}

export function Dialog({
  children,
  className,
  size = "full",
  open,
  onClose,
  disableBackdropClose,
  title,
  description,
  hideX,
  noPadding,
  noScroll,
  vAlign = "center",
}: DialogProps) {
  const titleId = useMemo(() => Math.random().toString(36).slice(2), []);
  const descriptionId = useMemo(
    () => (description ? Math.random().toString(36).slice(2) : undefined),
    [description],
  );

  return (
    <Overlay open={open} onClose={disableBackdropClose ? undefined : onClose} portalName="dialog">
      <div
        role="dialog"
        className={classNames(
          "py-4 x-theme-dialog absolute inset-0 pointer-events-none",
          "h-full flex flex-col items-center justify-center",
          vAlign === "top" && "justify-start",
          vAlign === "center" && "justify-center",
        )}
        aria-labelledby={titleId}
        aria-describedby={descriptionId}
        tabIndex={-1}
        onKeyDown={(e) => {
          // NOTE: We handle Escape on the element itself so that it doesn't close multiple
          //   dialogs and can be intercepted by children if needed.
          if (e.key === "Escape") {
            onClose?.();
            e.stopPropagation();
            e.preventDefault();
          }
        }}
      >
        <m.div
          initial={{ top: 5, scale: 0.97 }}
          animate={{ top: 0, scale: 1 }}
          className={classNames(
            className,
            "grid grid-rows-[auto_auto_minmax(0,1fr)]",
            "grid-cols-1", // must be here for inline code blocks to correctly break words
            "relative bg-surface pointer-events-auto",
            "rounded-lg",
            "border border-border-subtle shadow-lg shadow-[rgba(0,0,0,0.1)]",
            "min-h-[10rem]",
            "max-w-[calc(100vw-5rem)] max-h-[calc(100vh-5rem)]",
            size === "sm" && "w-[30rem]",
            size === "md" && "w-[50rem]",
            size === "lg" && "w-[70rem]",
            size === "full" && "w-[100vw] h-[100vh]",
            size === "dynamic" && "min-w-[20rem] max-w-[100vw]",
          )}
        >
          {title ? (
            <Heading className="px-6 mt-4 mb-2" level={1} id={titleId}>
              {title}
            </Heading>
          ) : (
            <span />
          )}

          {description ? (
            <div className="min-h-0 px-6 text-text-subtle mb-3" id={descriptionId}>
              {description}
            </div>
          ) : (
            <span />
          )}

          <div
            className={classNames(
              "h-full w-full grid grid-cols-[minmax(0,1fr)] grid-rows-1",
              !noPadding && "px-6 py-2",
              !noScroll && "overflow-y-auto overflow-x-hidden",
            )}
          >
            {children}
          </div>

          {/*Put close at the end so that it's the last thing to be tabbed to*/}
          {!hideX && (
            <div className="ml-auto absolute right-1 top-1">
              <IconButton
                className="opacity-70 hover:opacity-100"
                onClick={onClose}
                title="Close dialog (Esc)"
                aria-label="Close"
                size="sm"
                icon="x"
              />
            </div>
          )}
        </m.div>
      </div>
    </Overlay>
  );
}