{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "dialog", "title": "Dialog", "author": "AlgorizeTech", "description": "A composable modal dialog with focus trapping, overlay and controlled or uncontrolled open state. Use it as the general-purpose dialog primitive.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "https://avaraui.com/r/copy-button.json", "utils" ], "files": [ { "path": "src/components/custom/blocks/DialogBlock.tsx", "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { X } from \"lucide-react\";\nimport React, {\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n useSyncExternalStore,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { DialogContext, useDialog } from \"./dialog-context\";\n\n// ==========================================\n// 2. ROOT COMPONENT\n// ==========================================\nexport interface DialogProps {\n children: React.ReactNode;\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n}\n\nexport function Dialog({\n children,\n open: controlledOpen,\n defaultOpen = false,\n onOpenChange,\n}: DialogProps) {\n const isControlled = controlledOpen !== undefined;\n const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\n const open = isControlled ? controlledOpen : uncontrolledOpen;\n\n // What `setOpen` reads when it fires, refreshed after every commit so the\n // setter itself never has to be rebuilt. Identity matters here: DialogContent\n // registers on the open-dialog stack in an effect keyed by this function, and\n // a setter that changed on every render would re-register a dialog that is\n // merely re-rendering — handing an outer dialog the topmost slot while a\n // nested one is still on screen, so Escape would dismiss the wrong window.\n const latest = useRef({ open, isControlled, onOpenChange });\n useEffect(() => {\n latest.current = { open, isControlled, onOpenChange };\n });\n\n const setOpen = useCallback(\n (newOpen: boolean | ((prev: boolean) => boolean)) => {\n const current = latest.current;\n const nextState =\n typeof newOpen === \"function\" ? newOpen(current.open) : newOpen;\n if (!current.isControlled) setUncontrolledOpen(nextState);\n current.onOpenChange?.(nextState);\n },\n [],\n );\n\n const value = useMemo(() => ({ open, setOpen }), [open, setOpen]);\n\n return (\n {children}\n );\n}\n\n// ==========================================\n// 3. TRIGGER\n// ==========================================\nexport interface DialogTriggerProps\n extends React.HTMLAttributes {\n asChild?: boolean; // Note: For a real asChild implementation, you'd use Radix Slot. Here we use a generic wrapper.\n}\n\nexport function DialogTrigger({\n children,\n className,\n ...props\n}: DialogTriggerProps) {\n const { setOpen } = useDialog();\n\n return (\n setOpen(true)}\n onKeyDown={(e) => {\n if (e.key === \"Enter\" || e.key === \" \") {\n e.preventDefault();\n setOpen(true);\n }\n }}\n className={cn(\"inline-block\", className)}\n {...props}\n >\n {children}\n \n );\n}\n\n// ==========================================\n// 3b. CLOSE BUTTON\n// ==========================================\nexport type DialogCloseProps = React.ButtonHTMLAttributes;\n\nexport function DialogClose({\n children,\n className,\n onClick,\n ...props\n}: DialogCloseProps) {\n const { setOpen } = useDialog();\n\n return (\n {\n onClick?.(e);\n setOpen(false);\n }}\n className={className}\n {...props}\n >\n {children}\n \n );\n}\n\n// ==========================================\n// 4. CONTENT (Portal Renderer with Scroll Lock)\n// ==========================================\n\n/**\n * The panel width scale, from a compact confirm up to a full-page surface.\n *\n * `full` also drops the rounding, border and viewport-height cap that the\n * inset sizes rely on, so the panel really does fill the screen rather than\n * sitting as a very wide card inside it. Its rows are centred in that screen\n * (`content-center` overrides the panel's `content-start`) and kept to the\n * `md` column width, so the content reads as a dialog floating in the middle\n * of the page rather than a strip pinned to the top-left. Pass `className`\n * (it merges after the size) to lay the surface out edge to edge instead.\n */\nconst DIALOG_SIZES = {\n sm: \"max-w-sm\",\n md: \"max-w-lg\",\n lg: \"max-w-2xl\",\n xl: \"max-w-4xl\",\n full: \"max-w-none h-full max-h-none rounded-none border-0 content-center justify-center grid-cols-[minmax(0,32rem)]\",\n} as const;\n\nexport type DialogSize = keyof typeof DIALOG_SIZES;\n\n/**\n * Every dialog currently on screen, outermost first.\n *\n * Escape is listened for on the document, so a dialog opened from inside\n * another one would otherwise dismiss both on a single press — each open\n * content has its own live listener. Only the entry on top of this stack\n * reacts, and its position also decides which panel paints above the rest.\n */\nconst openDialogs: symbol[] = [];\n// Dialogs subscribe to the stack so each one can read its own position.\nconst stackListeners = new Set<() => void>();\nconst subscribeToStack = (onChange: () => void) => {\n stackListeners.add(onChange);\n return () => {\n stackListeners.delete(onChange);\n };\n};\nconst notifyStack = () => stackListeners.forEach((listener) => listener());\n\nexport interface DialogContentProps\n extends React.HTMLAttributes {\n hideCloseButton?: boolean;\n /** Panel width — `full` fills the viewport edge to edge. Defaults to `md`. */\n size?: DialogSize;\n}\n\nexport function DialogContent({\n className,\n children,\n hideCloseButton = false,\n size = \"md\",\n ...props\n}: DialogContentProps) {\n const { open, setOpen } = useDialog();\n const contentRef = useRef(null);\n const [portalTarget, setPortalTarget] = useState(null);\n // Identity for this dialog on the stack above. A symbol rather than a count\n // so a dialog can be removed by value, wherever it sits when it closes.\n const [id] = useState(() => Symbol(\"dialog\"));\n // Where this dialog sits on the stack once it has claimed a slot; 0 before\n // that, and while server-rendering.\n const depth = Math.max(\n 0,\n useSyncExternalStore(\n subscribeToStack,\n () => openDialogs.indexOf(id),\n () => -1,\n ),\n );\n\n // Resolves the document this dialog actually lives in, which is not always\n // the global one — previews portal components into an iframe. Resolving in a\n // callback ref rather than reading a ref during render keeps render pure, and\n // a null target doubles as the \"not mounted yet\" signal that guards SSR.\n const setAnchor = useCallback((node: HTMLSpanElement | null) => {\n setPortalTarget(node ? node.ownerDocument.body : null);\n }, []);\n\n // Handle Escape Key & Body Scroll Lock\n useEffect(() => {\n if (!open) return;\n\n // Resolve the document/window the dialog actually lives in (supports iframe rendering).\n const doc = contentRef.current?.ownerDocument ?? document;\n const win = doc.defaultView ?? window;\n\n // Claim a slot on the stack. Whatever opens last is what the user is\n // looking at, so it takes both the Escape key and the highest layer.\n openDialogs.push(id);\n notifyStack();\n\n // Lock body scroll. A nested dialog reads the lock the outer one already\n // applied as its \"original\", so unwinding in either order is safe.\n const originalStyle = win.getComputedStyle(doc.body).overflow;\n doc.body.style.overflow = \"hidden\";\n\n // Escape listener — ignored unless this is the topmost dialog.\n const handleEscape = (e: KeyboardEvent) => {\n if (e.key !== \"Escape\") return;\n if (openDialogs[openDialogs.length - 1] !== id) return;\n setOpen(false);\n };\n doc.addEventListener(\"keydown\", handleEscape);\n\n return () => {\n const index = openDialogs.indexOf(id);\n if (index !== -1) openDialogs.splice(index, 1);\n notifyStack();\n doc.body.style.overflow = originalStyle;\n doc.removeEventListener(\"keydown\", handleEscape);\n };\n }, [open, setOpen, portalTarget, id]);\n\n if (!portalTarget || !open) return