90 lines
2.9 KiB
TypeScript
90 lines
2.9 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useRef } from "react";
|
|
import { createPortal } from "react-dom";
|
|
|
|
interface Props {
|
|
open: boolean;
|
|
/** Called when user clicks the backdrop or presses Escape. */
|
|
onClose: () => void;
|
|
children: React.ReactNode;
|
|
/**
|
|
* ARIA label fallback when no labelled element exists inside.
|
|
* Optional; if you have a heading inside the modal with id, set
|
|
* `aria-labelledby` on a wrapper instead.
|
|
*/
|
|
ariaLabel?: string;
|
|
}
|
|
|
|
/**
|
|
* Portal-based modal.
|
|
*
|
|
* Why a portal
|
|
* ------------
|
|
* `position: fixed` becomes positioned relative to a transformed
|
|
* ancestor's containing block, not the viewport, when ANY ancestor
|
|
* has a `transform`, `perspective`, or `filter` applied. Our
|
|
* `animate-in` utility sets `transform: translateY(0)` on a lot of
|
|
* dashboard/tenant-detail containers (because of the fade-up
|
|
* animation, which uses `animation-fill-mode: both` to keep the
|
|
* transform on after the animation finishes). That broke modals
|
|
* rendered as in-place children — they centred to the panel they
|
|
* lived in, not to the page.
|
|
*
|
|
* Rendering at `document.body` via `createPortal` escapes every
|
|
* containing-block ancestor and gives us true viewport coordinates.
|
|
*
|
|
* UX details
|
|
* ----------
|
|
* - Backdrop click triggers `onClose`. (Bubbling check: only fires
|
|
* when the click target IS the backdrop, not the panel inside.)
|
|
* - Escape key triggers `onClose`. Standard modal expectation.
|
|
* - `body` overflow is locked while open so background content
|
|
* doesn't scroll behind the modal.
|
|
* - Renders nothing on first paint server-side, then mounts on
|
|
* client. `useEffect` gating ensures `document.body` is available;
|
|
* without it Next.js SSR would throw on `document` reference.
|
|
*/
|
|
export function Modal({ open, onClose, children, ariaLabel }: Props) {
|
|
const closeRef = useRef(onClose);
|
|
closeRef.current = onClose;
|
|
|
|
useEffect(() => {
|
|
if (!open) return;
|
|
|
|
// Lock background scroll. Restore on unmount/close.
|
|
const previousOverflow = document.body.style.overflow;
|
|
document.body.style.overflow = "hidden";
|
|
|
|
const onKey = (e: KeyboardEvent) => {
|
|
if (e.key === "Escape") closeRef.current();
|
|
};
|
|
window.addEventListener("keydown", onKey);
|
|
|
|
return () => {
|
|
document.body.style.overflow = previousOverflow;
|
|
window.removeEventListener("keydown", onKey);
|
|
};
|
|
}, [open]);
|
|
|
|
if (!open) return null;
|
|
if (typeof document === "undefined") return null;
|
|
|
|
return createPortal(
|
|
<div
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-label={ariaLabel}
|
|
className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm"
|
|
onClick={(e) => {
|
|
if (e.target === e.currentTarget) onClose();
|
|
}}
|
|
>
|
|
<div className="bg-surface-1 border border-border rounded-xl p-6 max-w-md w-full max-h-[90vh] overflow-y-auto">
|
|
{children}
|
|
</div>
|
|
</div>,
|
|
document.body
|
|
);
|
|
}
|