Function Modal

docs/app/components/modal.tsx:16–94

({
  isOpen,
  onClose,
  children,
  className,
  getInitialFocus,
  restoreFocus = true,
  ariaLabel,
}: ModalProps)

}

export const Modal = ({
  isOpen,
  onClose,
  children,
  className,
  getInitialFocus,
  restoreFocus = true,
  ariaLabel,
}: ModalProps) => {
  const modalRef = useRef<HTMLDivElement>(null)
  const previouslyFocusedRef = useRef<HTMLElement | null>(null)

  useScrollLock(isOpen)

  useEffect(() => {
    if (!isOpen) return
    previouslyFocusedRef.current = document.activeElement as HTMLElement | null
    return () => {
      if (restoreFocus) previouslyFocusedRef.current?.focus?.()
    }
  }, [isOpen, restoreFocus])

  useEffect(() => {
    if (!isOpen) return
    const id = requestAnimationFrame(() => {
      const candidate = getInitialFocus?.()
      if (candidate) { candidate.focus(); return }
      const root = modalRef.current
      if (!root) return
      const firstFocusable = root.querySelector<HTMLElement>(
        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
      )
      firstFocusable?.focus()
    })
    return () => cancelAnimationFrame(id)
  }, [isOpen, getInitialFocus])

  useEffect(() => {
    if (!isOpen) return
    const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") onClose() }
    window.addEventListener("keydown", onKey)
    return () => window.removeEventListener("keydown", onKey)
  }, [isOpen, onClose])

  const handleOverlayPointerDown = (e: React.PointerEvent<HTMLDivElement>) => {
    const root = modalRef.current
    if (!root) return
    if (!root.contains(e.target as Node)) onClose()
  }

  if (!isOpen) return null

  return (
    <>
      <Backdrop  onClose={onClose}  className="pointer-events-none z-40" />
      <div
        className="fixed inset-0 z-50 overflow-y-auto overscroll-contain"
        onPointerDown={handleOverlayPointerDown}