Combobox

1"use client";
2 
3import * as React from "react";
4import { Check, ChevronsUpDown } from "lucide-react";
5 
6import { cn } from "@/lib/utils";
7import { Button } from "@/components/ui/button";
8import {
9  Command,
10  CommandEmpty,
11  CommandGroup,
12  CommandInput,
13  CommandItem,
14  CommandList,
15} from "@/components/ui/command";
16import {
17  Popover,
18  PopoverContent,
19  PopoverTrigger,
20} from "@/components/ui/popover";
21 
22export type ComboboxOption = {
23  value: string;
24  label: string;
25  disabled?: boolean;
26};
27 
28function Combobox({
29  options,
30  value,
31  defaultValue,
32  onValueChange,
33  placeholder = "Select an option",
34  searchPlaceholder = "Search...",
35  emptyText = "No results found.",
36  disabled,
37  className,
38}: {
39  options: ComboboxOption[];
40  value?: string;
41  defaultValue?: string;
42  onValueChange?: (value: string) => void;
43  placeholder?: string;
44  searchPlaceholder?: string;
45  emptyText?: string;
46  disabled?: boolean;
47  className?: string;
48}) {
49  const [open, setOpen] = React.useState(false);
50  const [internalValue, setInternalValue] = React.useState(defaultValue ?? "");
51  const selectedValue = value ?? internalValue;
52  const selected = options.find((option) => option.value === selectedValue);
53 
54  function select(nextValue: string) {
55    if (value === undefined) setInternalValue(nextValue);
56    onValueChange?.(nextValue);
57    setOpen(false);
58  }
59 
60  return (
61    <Popover open={open} onOpenChange={setOpen}>
62      <PopoverTrigger asChild>
63        <Button
64          role="combobox"
65          aria-expanded={open}
66          disabled={disabled}
67          variant="outline"
68          className={cn(
69            "h-11.5 w-full justify-between px-4 font-medium hover:-translate-y-0",
70            !selected && "text-muted-foreground",
71            className,
72          )}
73        >
74          <span className="truncate">{selected?.label ?? placeholder}</span>
75          <ChevronsUpDown className="ml-2 size-4 shrink-0 text-muted-foreground" />
76        </Button>
77      </PopoverTrigger>
78      <PopoverContent
79        align="start"
80        className="w-[var(--radix-popover-trigger-width)] p-0"
81      >
82        <Command>
83          <CommandInput placeholder={searchPlaceholder} />
84          <CommandList>
85            <CommandEmpty>{emptyText}</CommandEmpty>
86            <CommandGroup>
87              {options.map((option) => (
88                <CommandItem
89                  disabled={option.disabled}
90                  key={option.value}
91                  value={option.label}
92// … truncated