Grabbed dndbeyond's source code

``` ~/go/bin/sourcemapper -output ddb -jsurl https://media.dndbeyond.com/character-app/static/js/main.90aa78c5.js ```
2025-05-28 11:50:03 -07:00
commit 8df9031d27
3592 changed files with 319051 additions and 0 deletions
@@ -0,0 +1,98 @@
+import clsx from "clsx";
+import { useEffect, useRef, type HTMLAttributes, type MouseEvent } from "react";
+
+import styles from "./Dialog.module.css";
+
+/**
+ * A generic dialog component to display content in a dialog (non-blocking) or
+ * a modal (blocking) way. This has built-in functionality like backdrop
+ * clicking and escape key handling. It also accepts a trigger element which
+ * will open the dialog when clicked. This is to allow focus to be returned to
+ * the trigger when the element is closed (for accessibility).
+ */
+
+export interface DialogProps extends HTMLAttributes<HTMLDialogElement> {
+  open: boolean;
+  onClose: (e?: MouseEvent) => void;
+  modal?: boolean;
+}
+
+export const Dialog: React.FC<DialogProps> = ({
+  open,
+  onClose,
+  modal,
+  children,
+  className,
+  ...props
+}) => {
+  const dialogRef = useRef<HTMLDialogElement>(null);
+  const triggerRef = useRef<Element | null>(null);
+
+  const handleClose = () => {
+    onClose();
+    dialogRef.current?.close();
+    // Returns focus to trigger after close for accessibility
+    (triggerRef.current as HTMLButtonElement)?.focus();
+  };
+
+  const handleClickBackdrop = (e?: MouseEvent) => {
+    if (!e) return;
+
+    const rect = dialogRef.current?.getBoundingClientRect();
+    const isClickInDialog =
+      rect &&
+      rect.top <= e.clientY &&
+      e.clientY <= rect.top + rect.height &&
+      rect.left <= e.clientX &&
+      e.clientX <= rect.left + rect.width;
+
+    if (!isClickInDialog) handleClose();
+  };
+
+  const handleEsc = (e: KeyboardEvent) => {
+    if (e.key === "Escape" && open) {
+      handleClose();
+    }
+  };
+
+  useEffect(
+    () => {
+      // Get the element that was clicked to open the dialog
+      triggerRef.current = document.activeElement;
+
+      if (modal && open) dialogRef.current?.showModal();
+      if (open) dialogRef.current?.focus();
+
+      if (!open) {
+        handleClose();
+      }
+    },
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+    [dialogRef.current, open, modal],
+  );
+
+  useEffect(
+    () => {
+      document.addEventListener("keydown", handleEsc);
+
+      return () => {
+        document.removeEventListener("keydown", handleEsc);
+      };
+    },
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+    [modal, open],
+  );
+
+  return (
+    <dialog
+      className={clsx([styles.dialog, className])}
+      ref={dialogRef}
+      onClick={modal ? handleClickBackdrop : undefined}
+      open={modal ? undefined : open}
+      aria-modal={modal}
+      {...props}
+    >
+      {children}
+    </dialog>
+  );
+};