Context Menu

1'use client'
2 
3import {
4  createContext,
5  forwardRef,
6  useCallback,
7  useContext,
8  useEffect,
9  useId,
10  useMemo,
11  useRef,
12  useState,
13  type ReactNode,
14} from 'react'
15import { createPortal } from 'react-dom'
16import { motion, useReducedMotion } from 'motion/react'
17import { cn } from '@/lib/utils'
18import { springs } from '@/lib/motion-tokens'
19import { useProximityHighlight, ProximityHighlight } from '@/lib/hooks/use-proximity-highlight'
20 
21export interface ContextMenuItem {
22  label: string
23  icon?: ReactNode
24  shortcut?: string
25  onSelect?: () => void
26  destructive?: boolean
27  disabled?: boolean
28  separatorAfter?: boolean
29}
30 
31interface ContextMenuContextValue {
32  open: boolean
33  setOpen: (next: boolean) => void
34  items: ContextMenuItem[]
35  onOpenChange?: (open: boolean) => void
36}
37 
38const ContextMenuContext = createContext<ContextMenuContextValue | null>(null)
39 
40function useContextMenuCtx(componentName: string) {
41  const ctx = useContext(ContextMenuContext)
42  if (!ctx) throw new Error(`${componentName} must be used within ContextMenu`)
43  return ctx
44}
45 
46export interface ContextMenuProps {
47  children: ReactNode
48  items: ContextMenuItem[]
49  disabled?: boolean
50  onOpenChange?: (open: boolean) => void
51  className?: string
52  menuClassName?: string
53}
54 
55export const ContextMenu = forwardRef<HTMLDivElement, ContextMenuProps>(
56  ({ children, items, disabled = false, onOpenChange, className, menuClassName }, ref) => {
57    const [open, setOpen] = useState(false)
58    const [position, setPosition] = useState({ x: 0, y: 0 })
59    const triggerRef = useRef<HTMLDivElement>(null)
60    const contentRef = useRef<HTMLDivElement>(null)
61    const longPressTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
62    const longPressMovedRef = useRef(false)
63    const previousFocusRef = useRef<HTMLElement | null>(null)
64 
65    const setOpenState = useCallback(
66      (next: boolean) => {
67        setOpen(next)
68        onOpenChange?.(next)
69      },
70      [onOpenChange],
71    )
72 
73    const handleContextMenu = useCallback(
74      (e: React.MouseEvent) => {
75        if (disabled) return
76        e.preventDefault()
77        previousFocusRef.current = document.activeElement as HTMLElement | null
78        setPosition({ x: e.clientX, y: e.clientY })
79        setOpenState(true)
80      },
81      [disabled, setOpenState],
82    )
83 
84    const handleTouchStart = useCallback(
85      (e: React.TouchEvent) => {
86        if (disabled) return
87        longPressMovedRef.current = false
88        const touch = e.touches[0]
89// … truncated