Select

1'use client'
2 
3import {
4  Children,
5  cloneElement,
6  createContext,
7  forwardRef,
8  isValidElement,
9  useCallback,
10  useContext,
11  useEffect,
12  useId,
13  useLayoutEffect,
14  useMemo,
15  useRef,
16  useState,
17  type HTMLAttributes,
18  type ReactElement,
19  type ReactNode,
20} from 'react'
21import { createPortal } from 'react-dom'
22import { AnimatePresence, motion, useReducedMotion, type MotionValue } from 'motion/react'
23import { cn } from '@/lib/utils'
24import { useMounted } from '@/hooks/use-mounted'
25import { playHoverSound, playClickSound } from '@/lib/sound'
26import { springs } from '@/lib/motion-tokens'
27import { useProximityHighlight, ProximityHighlight } from '@/lib/hooks/use-proximity-highlight'
28const MAX_HEIGHT = 320
29const SIDE_OFFSET = 8
30const VIEWPORT_MARGIN = 12
31const TYPEAHEAD_RESET_MS = 500
32interface SelectContextValue {
33  value: string
34  setValue: (v: string) => void
35  open: boolean
36  setOpen: (next: boolean) => void
37  disabled: boolean
38  triggerId: string
39  contentId: string
40  labelMap: React.MutableRefObject<Map<string, string>>
41  registerOption: (value: string, label: string) => void
42  openInteractionRef: React.MutableRefObject<'keyboard' | 'pointer'>
43  itemsWidth: number | null
44  setItemsWidth: (w: number | null) => void
45}
46 
47const SelectContext = createContext<SelectContextValue | null>(null)
48 
49function useSelectCtx(componentName: string) {
50  const ctx = useContext(SelectContext)
51  if (!ctx) throw new Error(`${componentName} must be used within <Select>`)
52  return ctx
53}
54interface SelectContentContextValue {
55  activeIndex: number | null
56  setActiveIndex: (i: number | null) => void
57  highlightX: ReturnType<typeof import('motion/react').useSpring>
58  highlightSize: MotionValue<number>
59  highlightOpacity: ReturnType<typeof import('motion/react').useSpring>
60  axis: 'x' | 'y'
61  focusedIndex: number
62  setFocusedIndex: (i: number) => void
63  setOpen: (next: boolean) => void
64  registerItem: (index: number, el: HTMLElement | null) => void
65}
66 
67const SelectContentContext = createContext<SelectContentContextValue | null>(null)
68 
69function useSelectContentCtx(componentName: string) {
70  const ctx = useContext(SelectContentContext)
71  if (!ctx) throw new Error(`${componentName} must be used within <SelectContent>`)
72  return ctx
73}
74function normalizeTypeahead(value: string) {
75  return value
76    .normalize('NFKD')
77    .replace(/[\u0300-\u036f]/g, '')
78    .toLowerCase()
79    .replace(/\s+/g, ' ')
80    .trim()
81}
82 
83function clamp(value: number, min: number, max: number) {
84// … truncated