Combobox

1"use client";
2
3import * as React from "react";
4import { cn } from "@/lib/utils";
5import {
6  elevatedSurface,
7  type SurfaceLevel,
8} from "@/registry/default/lib/elevated";
9import { Label } from "@/registry/default/label/label";
10import {
11  ScrollArea,
12  type ScrollAreaProps,
13} from "@/registry/default/scroll-area/scroll-area";
14import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
15
16import { HugeiconsIcon } from "@hugeicons/react";
17import {
18  ArrowDown01Icon,
19  Cancel01Icon,
20  Tick02Icon,
21} from "@hugeicons/core-free-icons";
22const useComboboxFilter = BaseCombobox.useFilter;
23const useComboboxFilteredItems = BaseCombobox.useFilteredItems;
24
25// Shared styling for the start/end addon containers. `pointer-events-none` lets
26// clicks on decorative content (icons, spinners) fall through to the InputGroup,
27// whose Base UI mousedown handler focuses the input; interactive children opt
28// back in so buttons/links inside an addon still receive their own clicks.
29const comboboxAddonClassName = cn(
30  "text-muted-foreground pointer-events-none flex shrink-0 items-center",
31  "[&_svg:not([class*='size-'])]:size-4",
32  "[&_:is(button,a,input,select,textarea,label,[role=button])]:pointer-events-auto",
33);
34
35const ComboboxContext = React.createContext<{
36  id: string;
37  /** The mounted ComboboxChips element, if any, used to anchor the popup. */
38  chipsElement: HTMLDivElement | null;
39  setChipsElement: (element: HTMLDivElement | null) => void;
40} | null>(null);
41
42function Combobox<Value, Multiple extends boolean | undefined = false>(
43  props: BaseCombobox.Root.Props<Value, Multiple>,
44): React.JSX.Element {
45  const id = React.useId();
46  const [chipsElement, setChipsElement] = React.useState<HTMLDivElement | null>(
47    null,
48  );
49
50  const contextValue = React.useMemo(
51    () => ({ id, chipsElement, setChipsElement }),
52    [id, chipsElement],
53  );
54
55  return (
56    <ComboboxContext.Provider value={contextValue}>
57      <BaseCombobox.Root data-slot="combobox" {...props} />
58    </ComboboxContext.Provider>
59  );
60}
61
62function ComboboxInput({
63  id: idProp,
64  className,
65  inputClassName,
66  showTrigger = true,
67  showClear = true,
68  variant = "default",
69  start,
70  end,
71  ...props
72}: BaseCombobox.Input.Props & {
73  showTrigger?: boolean;
74  showClear?: boolean;
75  variant?: "default" | "elevated";
76  /** Content pinned to the start (leading edge) of the field, e.g. a search icon. */
77  start?: React.ReactNode;
78// … truncated