Dropdown Menu

1'use client'
2 
3import {
4  createContext,
5  forwardRef,
6  useCallback,
7  useContext,
8  useEffect,
9  useId,
10  useLayoutEffect,
11  useMemo,
12  useRef,
13  useState,
14  type HTMLAttributes,
15  type ReactNode,
16} from 'react'
17import { createPortal } from 'react-dom'
18import { useReducedMotion, type MotionValue } from 'motion/react'
19import { cn } from '@/lib/utils'
20import { playHoverSound, playClickSound } from '@/lib/sound'
21import { useProximityHighlight, ProximityHighlight } from '@/lib/hooks/use-proximity-highlight'
22interface DropdownMenuContextValue {
23  open: boolean
24  setOpen: (next: boolean) => void
25  triggerId: string
26  contentId: string
27  nextIndex: () => number
28 
29  itemsWidth: number | null
30  setItemsWidth: (w: number | null) => void
31}
32 
33const DropdownMenuContext = createContext<DropdownMenuContextValue | null>(null)
34 
35function useDropdownMenuCtx(componentName: string) {
36  const ctx = useContext(DropdownMenuContext)
37  if (!ctx) throw new Error(`${componentName} must be used within DropdownMenu`)
38  return ctx
39}
40interface DropdownMenuContentContextValue {
41  activeIndex: number | null
42  setActiveIndex: (i: number | null) => void
43  highlightX: ReturnType<typeof import('motion/react').useSpring>
44  highlightSize: MotionValue<number>
45  highlightOpacity: ReturnType<typeof import('motion/react').useSpring>
46  axis: 'x' | 'y'
47  focusedIndex: number
48  setFocusedIndex: (i: number) => void
49  setOpen: (next: boolean) => void
50 
51  registerItem: (index: number, el: HTMLElement | null) => void
52}
53 
54const DropdownMenuContentContext = createContext<DropdownMenuContentContextValue | null>(null)
55 
56function useDropdownMenuContentCtx(componentName: string) {
57  const ctx = useContext(DropdownMenuContentContext)
58  if (!ctx) throw new Error(`${componentName} must be used within DropdownMenuContent`)
59  return ctx
60}
61export interface DropdownMenuProps {
62  children: ReactNode
63  open?: boolean
64  defaultOpen?: boolean
65  onOpenChange?: (open: boolean) => void
66  className?: string
67}
68 
69export function DropdownMenu({
70  children,
71  open: openProp,
72  defaultOpen = false,
73  onOpenChange,
74  className,
75}: DropdownMenuProps) {
76  const isControlled = openProp !== undefined
77  const [internalOpen, setInternalOpen] = useState(defaultOpen)
78  const open = isControlled ? openProp : internalOpen
79  const [itemsWidth, setItemsWidth] = useState<number | null>(null)
80 
81  const setOpen = useCallback(
82    (next: boolean) => {
83      if (!isControlled) setInternalOpen(next)
84      onOpenChange?.(next)
85    },
86// … truncated