Combobox

1"use client";
2 
3import {
4  Command,
5  CommandEmpty,
6  CommandGroup,
7  CommandInput,
8  CommandItem,
9  CommandList,
10} from "@/components/ui/command";
11import {
12  Popover,
13  PopoverContent,
14  PopoverTrigger,
15} from "@/components/ui/popover";
16import { cn } from "@/lib/utils";
17import { CheckIcon, ChevronsUpDownIcon, LoaderIcon } from "lucide-react";
18import { AnimatePresence, motion, useReducedMotion } from "motion/react";
19import { useCallback, useEffect, useRef, useState } from "react";
20import { DURATION_INSTANT, SPRING_DEFAULT } from "@/components/smoothui/lib/animation";
21import SmoothButton from "../smooth-button";
22 
23export interface ComboboxOption {
24  /** Whether the option is disabled */
25  disabled?: boolean;
26  /** The display label for the option */
27  label: string;
28  /** The value of the option */
29  value: string;
30}
31 
32export interface ComboboxProps {
33  /** Accessible label for the combobox */
34  "aria-label"?: string;
35  /** ID of element that labels this combobox */
36  "aria-labelledby"?: string;
37  /** Additional CSS class names for the trigger button */
38  className?: string;
39  /** Additional CSS class names for the popover content */
40  contentClassName?: string;
41  /** Whether the combobox is disabled */
42  disabled?: boolean;
43  /** Text shown when no results match */
44  emptyText?: string;
45  /** Async search callback — receives the query string, returns filtered options */
46  onSearch?: (query: string) => Promise<ComboboxOption[]>;
47  /** Callback when the selected value changes */
48  onValueChange?: (value: string) => void;
49  /** Static list of options (used when onSearch is not provided) */
50  options?: ComboboxOption[];
51  /** Placeholder text for the trigger button */
52  placeholder?: string;
53  /** Debounce delay in ms for the onSearch callback */
54  searchDebounce?: number;
55  /** Placeholder text for the search input */
56  searchPlaceholder?: string;
57  /** The controlled selected value */
58  value?: string;
59}
60 
61const MotionCommandItem = motion.create(CommandItem);
62 
63export default function Combobox({
64  value,
65  onValueChange,
66  options: staticOptions,
67  onSearch,
68  searchDebounce = 300,
69  placeholder = "Select an option…",
70  searchPlaceholder = "Search…",
71  emptyText = "No results found.",
72  disabled = false,
73  className,
74  contentClassName,
75  "aria-label": ariaLabel,
76  "aria-labelledby": ariaLabelledBy,
77}: ComboboxProps) {
78  const shouldReduceMotion = useReducedMotion();
79  const [open, setOpen] = useState(false);
80  const [query, setQuery] = useState("");
81// … truncated