Combobox

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 HTMLAttributes,
14  type ReactNode,
15} from 'react'
16import { createPortal } from 'react-dom'
17import { type MotionValue } from 'motion/react'
18import { cn } from '@/lib/utils'
19import { useProximityHighlight, ProximityHighlight } from '@/lib/hooks/use-proximity-highlight'
20import { matchesSearch, buildSearchableText } from '@/lib/search-match'
21 
22export interface ComboboxOption {
23  value: string
24  label: string
25  description?: string
26}
27 
28interface ComboboxContextValue {
29  value: string
30  setValue: (v: string) => void
31  open: boolean
32  setOpen: (next: boolean) => void
33  query: string
34  setQuery: (q: string) => void
35  disabled: boolean
36  triggerId: string
37  contentId: string
38  nextIndex: () => number
39  labelMap: React.MutableRefObject<Map<string, string>>
40  registerOption: (value: string, label: string) => void
41  options: ComboboxOption[]
42  placeholder: string
43  emptyMessage: string
44  clearable: boolean
45  openOnFocus: boolean
46  setValueRef: React.MutableRefObject<(v: string) => void>
47  activeDescendantId: string | null
48  setActiveDescendantId: (id: string | null) => void
49  suppressNextFocusOpenRef: React.MutableRefObject<boolean>
50}
51 
52const ComboboxContext = createContext<ComboboxContextValue | null>(null)
53 
54function useComboboxCtx(componentName: string) {
55  const ctx = useContext(ComboboxContext)
56  if (!ctx) throw new Error(`${componentName} must be used within Combobox`)
57  return ctx
58}
59 
60interface ComboboxContentContextValue {
61  activeIndex: number | null
62  setActiveIndex: (i: number | null) => void
63  highlightX: ReturnType<typeof import('motion/react').useSpring>
64  highlightSize: MotionValue<number>
65  highlightOpacity: ReturnType<typeof import('motion/react').useSpring>
66  axis: 'x' | 'y'
67  registerItem: (index: number, el: HTMLElement | null) => void
68  filteredOptions: ComboboxOption[]
69  setValueRef: React.MutableRefObject<(v: string) => void>
70}
71 
72const ComboboxContentContext = createContext<ComboboxContentContextValue | null>(null)
73 
74function useComboboxContentCtx(componentName: string) {
75  const ctx = useContext(ComboboxContentContext)
76  if (!ctx) throw new Error(`${componentName} must be used within ComboboxContent`)
77  return ctx
78}
79 
80export interface ComboboxProps {
81  children: ReactNode
82  options: ComboboxOption[]
83  value?: string
84  defaultValue?: string
85  onValueChange?: (value: string) => void
86  placeholder?: string
87// … truncated