// src/components/ui/Modal.tsx "use client"; import { useEffect, useId, useRef, type ReactNode } from "react"; import { createPortal } from "react-dom"; import Button from "./Button"; export interface ModalProps { open: boolean; onClose: () => void; title: string; children: ReactNode; /** Action buttons, rendered right-aligned in the footer. */ actions?: ReactNode; } export default function Modal({ open, onClose, title, children, actions }: ModalProps) { const titleId = useId(); const dialogRef = useRef(null); const restoreFocusRef = useRef(null); // Read through a ref so the focus lifecycle depends on `open` alone. Pages // pass inline onClose arrows; if the effect re-ran on every new identity, // each keystroke inside the modal would tear down and re-grab focus. const onCloseRef = useRef(onClose); useEffect(() => { onCloseRef.current = onClose; }); useEffect(() => { if (!open) return; restoreFocusRef.current = document.activeElement as HTMLElement; // Form modals start in their first field; content modals focus the dialog. const firstField = dialogRef.current?.querySelector( ".modal-body input, .modal-body select, .modal-body textarea" ); (firstField ?? dialogRef.current)?.focus(); // Lock scroll without layout shift: removing the scrollbar reflows the page // wider by its width, so reserve that width as padding while locked. const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth; document.body.style.overflow = "hidden"; if (scrollbarWidth > 0) document.body.style.paddingRight = `${scrollbarWidth}px`; const onKeyDown = (e: KeyboardEvent) => { if (e.key === "Escape") onCloseRef.current(); if (e.key === "Tab" && dialogRef.current) { const focusables = dialogRef.current.querySelectorAll( 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])' ); if (focusables.length === 0) return; const first = focusables[0]; const last = focusables[focusables.length - 1]; if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); } else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); } } }; document.addEventListener("keydown", onKeyDown); return () => { document.removeEventListener("keydown", onKeyDown); document.body.style.overflow = ""; document.body.style.paddingRight = ""; restoreFocusRef.current?.focus(); }; }, [open]); if (!open) return null; return createPortal(

{ if (e.target === e.currentTarget) onClose(); }} >

, document.body ); } export interface ConfirmDialogProps { open: boolean; onClose: () => void; onConfirm: () => void; title: string; message: ReactNode; confirmLabel: string; /** Destructive confirms get the solid danger treatment — the only filled red in the system. */ destructive?: boolean; } export function ConfirmDialog({ open, onClose, onConfirm, title, message, confirmLabel, destructive, }: ConfirmDialogProps) { return ( } > {message} ); }