Mobile Drawer

1'use client'
2 
3import {
4  forwardRef,
5  useCallback,
6  useEffect,
7  useId,
8  useRef,
9  useState,
10  type HTMLAttributes,
11  type ReactNode,
12} from 'react'
13import { createPortal } from 'react-dom'
14import {
15  AnimatePresence,
16  motion,
17  useMotionValue,
18  useReducedMotion,
19  useTransform,
20} from 'motion/react'
21import { cn } from '@/lib/utils'
22import { springs } from '@/lib/motion-tokens'
23import { useFocusTrap } from '@/lib/hooks/use-focus-trap'
24import { useMounted } from '@/hooks/use-mounted'
25 
26export interface MobileDrawerProps extends HTMLAttributes<HTMLDivElement> {
27  open: boolean
28  onClose: () => void
29  children: ReactNode
30  triggerRef?: React.RefObject<HTMLElement | null>
31  dismissible?: boolean
32}
33 
34export interface MobileDrawerTitleProps extends HTMLAttributes<HTMLHeadingElement> {
35  children: ReactNode
36}
37 
38export const MobileDrawerTitle = forwardRef<HTMLHeadingElement, MobileDrawerTitleProps>(
39  ({ children, className, ...props }, ref) => (
40    <h2
41      ref={ref}
42      className={cn('px-6 pt-6 pb-2 text-lg font-semibold text-(--color-fg)', className)}
43      {...props}
44    >
45      {children}
46    </h2>
47  ),
48)
49MobileDrawerTitle.displayName = 'MobileDrawerTitle'
50 
51export const MobileDrawer = forwardRef<HTMLDivElement, MobileDrawerProps>(
52  (
53    {
54      open,
55      onClose,
56      children,
57      triggerRef: triggerRefProp,
58      dismissible = true,
59      className,
60      ...props
61    },
62    ref,
63  ) => {
64    const reduceMotion = useReducedMotion()
65    const mounted = useMounted()
66    const panelRef = useRef<HTMLDivElement>(null)
67    const dialogRef = useRef<HTMLDivElement>(null)
68    const previousScrollRef = useRef<string>('')
69    const dragY = useMotionValue(0)
70    const overlayOpacity = useTransform(dragY, [0, 300], [0.8, 0])
71 
72    const reactId = useId()
73    const titleId = `${reactId}-drawer-title`
74 
75    useFocusTrap(dialogRef, open, triggerRefProp)
76 
77    useEffect(() => {
78      if (!open) return
79      previousScrollRef.current = document.body.style.overflow
80      document.body.style.overflow = 'hidden'
81      return () => {
82        document.body.style.overflow = previousScrollRef.current
83      }
84    }, [open])
85 
86    const handleDragEnd = useCallback(
87      (_: unknown, info: { offset: { y: number }; velocity: { y: number } }) => {
88        if (!dismissible) return
89        const panelHeight = panelRef.current?.offsetHeight ?? 300
90        const pastThreshold = info.offset.y > panelHeight * 0.3
91        const fastFlick = info.velocity.y > 500
92// … truncated