"use client"; import { X } from "lucide-react"; import { useCallback, useEffect, useRef, type ReactNode } from "react"; import { createPortal } from "react-dom"; import { cn } from "@/lib/utils"; /** * Accessible modal: focus trap, Escape to close, scroll lock, portal to * , and click-outside dismissal. */ export function Modal({ open, onClose, title, description, ariaLabel, children, size = "md", className, bodyClassName, }: { open: boolean; onClose: () => void; title?: ReactNode; description?: ReactNode; /** * Accessible name for dialogs that supply no `title`, and so render no header * of their own. Falls back to the title when it is plain text. */ ariaLabel?: string; children: ReactNode; size?: "sm" | "md" | "lg"; className?: string; /** * Extra classes for the scroll container around `children`. * * The default scrolls the whole body, which is right for a short form. A * two-pane dialog — the TV download modal, with a fixed season rail beside a * long episode list — needs the opposite: the container must not scroll, so * each pane owns its own overflow. Passing `overflow-hidden p-0` here does that * without changing the primitive's behaviour for anyone else. */ bodyClassName?: string; }) { const panelRef = useRef(null); const previouslyFocused = useRef(null); const handleKeyDown = useCallback( (event: KeyboardEvent) => { if (event.key === "Escape") { event.stopPropagation(); onClose(); return; } if (event.key !== "Tab") return; const focusables = panelRef.current?.querySelectorAll( 'a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex="-1"])', ); if (!focusables?.length) return; const first = focusables[0]!; const last = focusables[focusables.length - 1]!; if (event.shiftKey && document.activeElement === first) { event.preventDefault(); last.focus(); } else if (!event.shiftKey && document.activeElement === last) { event.preventDefault(); first.focus(); } }, [onClose], ); useEffect(() => { if (!open) return; previouslyFocused.current = document.activeElement as HTMLElement | null; const { overflow, paddingRight } = document.body.style; const scrollbar = window.innerWidth - document.documentElement.clientWidth; document.body.style.overflow = "hidden"; if (scrollbar > 0) document.body.style.paddingRight = `${scrollbar}px`; document.addEventListener("keydown", handleKeyDown); const t = window.setTimeout(() => { panelRef.current ?.querySelector('[data-autofocus], button, a[href], input') ?.focus(); }, 40); return () => { document.removeEventListener("keydown", handleKeyDown); document.body.style.overflow = overflow; document.body.style.paddingRight = paddingRight; window.clearTimeout(t); previouslyFocused.current?.focus?.(); }; }, [handleKeyDown, open]); if (!open || typeof document === "undefined") return null; return createPortal(

) : null}

{children}

, document.body, ); }