Basic Modal

1"use client";
2 
3import { X } from "lucide-react";
4import { AnimatePresence, motion, useReducedMotion } from "motion/react";
5import { useEffect, useRef, useState } from "react";
6import { createPortal } from "react-dom";
7import { useOnClickOutside } from "usehooks-ts";
8 
9export interface BasicModalProps {
10  children: React.ReactNode;
11  isOpen: boolean;
12  onClose: () => void;
13  size?: "sm" | "md" | "lg" | "xl" | "full";
14  title?: string;
15}
16 
17const modalSizes = {
18  full: "max-w-4xl",
19  lg: "max-w-lg",
20  md: "max-w-md",
21  sm: "max-w-sm",
22  xl: "max-w-xl",
23};
24 
25export default function BasicModal({
26  isOpen,
27  onClose,
28  title,
29  children,
30  size = "md",
31}: BasicModalProps) {
32  const overlayRef = useRef<HTMLDivElement>(null);
33  const modalRef = useRef<HTMLDivElement>(
34    null
35  ) as React.RefObject<HTMLDivElement>;
36  const closeButtonRef = useRef<HTMLButtonElement>(null);
37  const previousActiveElementRef = useRef<HTMLElement | null>(null);
38  useOnClickOutside(modalRef, () => onClose());
39  const [mounted, setMounted] = useState(false);
40  const shouldReduceMotion = useReducedMotion();
41 
42  const titleId = title
43    ? `modal-title-${Math.random().toString(36).substring(2, 9)}`
44    : undefined;
45 
46  useEffect(() => {
47    setMounted(true);
48  }, []);
49 
50  // Focus management: Save previous focus and restore on close
51  useEffect(() => {
52    if (isOpen) {
53      previousActiveElementRef.current = document.activeElement as HTMLElement;
54      // Focus the close button or first focusable element when modal opens
55      setTimeout(() => {
56        closeButtonRef.current?.focus();
57      }, 100);
58    } else if (previousActiveElementRef.current) {
59      // Restore focus when modal closes
60      previousActiveElementRef.current.focus();
61    }
62  }, [isOpen]);
63 
64  // Close on Escape key press and focus trap
65  useEffect(() => {
66    if (!isOpen) {
67      return;
68    }
69 
70    const handleKeyDown = (e: KeyboardEvent) => {
71      if (e.key === "Escape") {
72        onClose();
73        return;
74      }
75 
76      // Focus trap: keep focus within modal
77      if (e.key === "Tab" && modalRef.current) {
78        const focusableElements = Array.from(
79          modalRef.current.querySelectorAll<HTMLElement>(
80            'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
81          )
82        );
83        const [firstElement] = focusableElements;
84        const lastElement = focusableElements.at(-1);
85 
86        if (e.shiftKey) {
87          // Shift + Tab
88// … truncated