Mobile Drawer

1"use client";
2 
3import { useEffect, useState, type ReactNode, type RefObject } from "react";
4import * as DialogPrimitive from "@radix-ui/react-dialog";
5import { motion } from "framer-motion";
6import { spring, exitFallbackMs } from "@/lib/springs";
7import { useSurface, SurfaceProvider } from "@/lib/surface-context";
8import { surfaceClasses } from "@/lib/surface-classes";
9 
10// Built on Radix Dialog: it provides scroll lock, focus trap, focus restore,
11// Esc + outside-click dismissal, while leaving the slide animation to
12// framer-motion. Radix has no actionsRef-style deferred unmount, so the
13// portal lifetime is managed with local `mounted` state (the same pattern
14// the Dialog component uses): mount on open, keep the portal alive with
15// `forceMount` through the exit tween, and unmount once the panel's exit
16// animation completes.
17 
18interface MobileDrawerProps {
19  open: boolean;
20  onClose: () => void;
21  children: ReactNode;
22  triggerRef?: RefObject<HTMLElement | null>;
23}
24 
25export function MobileDrawer({
26  open,
27  onClose,
28  children,
29  triggerRef,
30}: MobileDrawerProps) {
31  const substrate = useSurface();
32  const level = Math.min(substrate + 2, 8);
33 
34  // Portal lifetime: mounts as soon as `open` flips true; on close it stays
35  // mounted (forceMount below) until the exit tween finishes.
36  const [mounted, setMounted] = useState(false);
37 
38  useEffect(() => {
39    if (open) setMounted(true);
40  }, [open]);
41 
42  // Fallback release for the deferred unmount: onAnimationComplete on the
43  // panel is the primary signal, but rAF-driven animation callbacks can
44  // stall in throttled/background tabs. The longest exit tween is
45  // spring.moderate.exit (backdrop), so the fallback tracks that tier's exit
46  // duration plus a safety buffer.
47  useEffect(() => {
48    if (open) return;
49    const id = setTimeout(() => setMounted(false), exitFallbackMs(spring.moderate));
50    return () => clearTimeout(id);
51  }, [open]);
52 
53  return (
54    <DialogPrimitive.Root
55      open={open}
56      onOpenChange={(nextOpen) => {
57        if (!nextOpen) onClose();
58      }}
59    >
60      {mounted && (
61        <DialogPrimitive.Portal forceMount>
62          {/* Overlay — same scrim as the library's dialogs: an always-on
63              bg-black/40 base that stays visible for system-dark users (the
64              `dark:` variant only matches the explicit .dark class), boosted
65              to /80 in explicit dark mode. */}
66          <DialogPrimitive.Overlay asChild forceMount>
67            <motion.div
68// … truncated