Combobox

1"use client";
2
3import { ComponentPropsWithRef, useRef } from "react";
4
5import { Combobox as ComboboxPrimitive } from "@base-ui/react";
6
7import { cn } from "@/lib/utils";
8import { Button } from "@/components/ui/button";
9import {
10  InputGroup,
11  InputGroupAddon,
12  InputGroupButton,
13  InputGroupInput
14} from "@/components/ui/input-group";
15import { ChevronDownIcon, XIcon, CheckIcon } from "lucide-react";
16
17const Combobox = ComboboxPrimitive.Root;
18
19function ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {
20  return <ComboboxPrimitive.Value data-slot="combobox-value" {...props} />;
21}
22
23function ComboboxTrigger({
24  className,
25  children,
26  ...props
27}: ComboboxPrimitive.Trigger.Props) {
28  return (
29    <ComboboxPrimitive.Trigger
30      data-slot="combobox-trigger"
31      className={cn("[&_svg:not([class*='size-'])]:size-4", className)}
32      {...props}
33    >
34      {children}
35      <ChevronDownIcon className="pointer-events-none size-4" />
36    </ComboboxPrimitive.Trigger>
37  );
38}
39
40function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {
41  return (
42    <ComboboxPrimitive.Clear
43      data-slot="combobox-clear"
44      render={<InputGroupButton variant="ghost" size="icon-xs" />}
45      className={cn(className)}
46      {...props}
47    >
48      <XIcon className="pointer-events-none" />
49    </ComboboxPrimitive.Clear>
50  );
51}
52
53function ComboboxInput({
54  className,
55  children,
56  disabled = false,
57  showTrigger = true,
58  showClear = false,
59  ...props
60}: ComboboxPrimitive.Input.Props & {
61  showTrigger?: boolean;
62  showClear?: boolean;
63}) {
64  return (
65    <InputGroup className={cn("w-auto", className)}>
66      <ComboboxPrimitive.Input
67        render={<InputGroupInput disabled={disabled} />}
68        {...props}
69      />
70      <InputGroupAddon align="inline-end">
71        {showTrigger && (
72          <InputGroupButton
73            size="icon-xs"
74            variant="ghost"
75            render={<ComboboxTrigger />}
76            data-slot="input-group-button"
77            className="group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent"
78            disabled={disabled}
79          />
80        )}
81        {showClear && <ComboboxClear disabled={disabled} />}
82      </InputGroupAddon>
83      {children}
84    </InputGroup>
85  );
86}
87
88function ComboboxContent({
89  className,
90  side = "bottom",
91  sideOffset = 6,
92  align = "start",
93  alignOffset = 0,
94  anchor,
95// … truncated