Combobox

1"use client";
2 
3import { Combobox as ComboboxPrimitive } from "@base-ui/react/combobox";
4import {
5  CaretDown,
6  MagnifyingGlass,
7  X,
8} from "@phosphor-icons/react/dist/ssr";
9import { RemoveScroll } from "react-remove-scroll";
10import { createContext, forwardRef, useContext, useMemo } from "react";
11import type * as React from "react";
12import { cn } from "@/lib/utils";
13import {
14  coarseTarget,
15  fieldControl,
16  itemGroupLabel,
17  itemRow,
18  mobilePopupBackdrop,
19  mobilePopupSurface,
20  overlayLayer,
21  popupDivider,
22  popupSurface,
23} from "@/lib/recipes";
24import { Checkbox } from "@/components/ui/checkbox";
25import type { InputSize } from "@/components/ui/input";
26import { Spinner } from "@/components/ui/spinner";
27import {
28  MOBILE_MEDIA_QUERY,
29  useMediaQuery,
30} from "../hooks/use-media-query";
31 
32/* --------------------------------- Root -------------------------------- */
33 
34interface ComboboxCommonProps {
35  open?: boolean;
36  defaultOpen?: boolean;
37  onOpenChange?: (open: boolean) => void;
38  /** Search text. */
39  inputValue?: string;
40  onInputValueChange?: (next: string) => void;
41  placeholder?: string;
42  /**
43   * Auto-highlight behavior on the popup list:
44   *   - `false` (default): open with no highlighted item. Arrow keys move to
45   *     an option before Enter can select it.
46   *   - `true`: only highlight on input change, not on plain open.
47   *   - `"always"`: highlight the first item on open and input change.
48   */
49  autoHighlight?: boolean | "always";
50  /** Marks the popup list busy and shows ComboboxLoading. */
51  loading?: boolean;
52  children: React.ReactNode;
53}
54 
55export type ComboboxProps<Value = string> = ComboboxCommonProps &
56  (
57    | {
58        multiple?: false;
59        selectedValue?: Value | null;
60        onSelectedValueChange?: (next: Value | null) => void;
61        selectedValues?: never;
62        onSelectedValuesChange?: never;
63      }
64    | {
65        multiple: true;
66        selectedValue?: never;
67        onSelectedValueChange?: never;
68        selectedValues?: readonly Value[];
69        onSelectedValuesChange?: (next: Value[]) => void;
70      }
71  );
72 
73const ComboboxSharedContext = createContext<{
74  placeholder?: string;
75  multiple?: boolean;
76  isMobile: boolean;
77  loading: boolean;
78}>({ isMobile: false, loading: false });
79 
80export function Combobox<Value = string>(
81  props: ComboboxProps<Value>,
82): React.ReactElement {
83  const {
84    open,
85    defaultOpen,
86    onOpenChange,
87    inputValue,
88    onInputValueChange,
89    placeholder,
90// … truncated