Combobox

npx gbs-add-block -a Combobox -beta

@import "../components/combobox/styles.css";

import "@/components/combobox/styles.css";

"use client";
 
import { useState } from "react";
import {
  MultiSelect,
  Select,
  type ComboboxOption,
} from "@/components/combobox";
 
const countries: ComboboxOption[] = [
  { value: "in", label: "India", group: "Asia", keywords: ["bharat"] },
  { value: "jp", label: "Japan", group: "Asia" },
  { value: "de", label: "Germany", group: "Europe", description: "Berlin" },
  { value: "mx", label: "Mexico", group: "Americas", disabled: true },
];
 
export default function Example() {
  const [country, setCountry] = useState<string | null>(null);
  const [tags, setTags] = useState<string[]>([]);
 
  return (
    <>
      <Select
        label="Country"
        options={countries}
        value={country}
        onChange={setCountry}
      />
 
      <MultiSelect
        label="Countries"
        options={countries}
        value={tags}
        onChange={setTags}
        max={3}
      />
    </>
  );
}

<Select onChange={(value, option) => console.log(value, option?.label)} />
<MultiSelect onChange={(values, options) => console.log(values, options.map((o) => o.label))} />

interface ComboboxOption<V = string> {
  value: V; // string or number, unique
  label: string; // shown in the list, the control and tags
  description?: string; // second line under the label
  group?: string; // heading; groups appear in first-seen order
  disabled?: boolean; // shown, not selectable, skipped by the keyboard
  icon?: ReactNode; // rendered before the label
  keywords?: string[]; // extra search terms, e.g. synonyms or codes
}

const [country, setCountry] = useState<string | null>(null);
<Select options={countries} value={country} onChange={setCountry} />; // V is string

const users: ComboboxOption<number>[] = [{ value: 7, label: "Ada Lovelace" }];
<MultiSelect<number> options={users} value={ids} onChange={setIds} />;

<Select
  options={products}
  filterFn={(option, search) => option.value.toString().startsWith(search)}
/>

"use client";
 
import { useEffect, useState } from "react";
import { MultiSelect, type ComboboxOption } from "@/components/combobox";
 
const NO_OPTIONS: ComboboxOption<number>[] = [];
 
export function PeoplePicker({ value, onChange }: Props) {
  const [query, setQuery] = useState({ search: "", page: 0 });
  const [result, setResult] = useState<{
    query: typeof query;
    options: ComboboxOption<number>[];
    hasMore: boolean;
  } | null>(null);
 
  useEffect(() => {
    const controller = new AbortController();
    fetch(
      `/api/people?search=${encodeURIComponent(query.search)}&page=${query.page}`,
      {
        signal: controller.signal,
      },
    )
      .then((res) => res.json())
      .then((body) =>
        setResult({ query, options: body.options, hasMore: body.hasMore }),
      )
      .catch(() => {}); // aborted
    return () => controller.abort(); // cancels the previous request
  }, [query]);
 
  return (
    <MultiSelect<number>
      mode="server"
      options={result?.options ?? NO_OPTIONS}
      hasMore={result?.hasMore}
      loading={result?.query !== query}
      onSearchChange={(search) => setQuery({ search, page: 0 })}
      onLoadMore={() => setQuery((prev) => ({ ...prev, page: prev.page + 1 }))}
      value={value}
      onChange={onChange}
      placeholder="Search people"
    />
  );
}

const { data, isFetching } = useQuery({
  queryKey: ["people", query],
  queryFn: ({ signal }) => fetchPeople(query, signal),
  placeholderData: keepPreviousData,
});
 
<MultiSelect mode="server" options={data?.options ?? NO_OPTIONS} loading={isFetching} ... />;

const [options, setOptions] = useState(initialTags);
const [values, setValues] = useState<string[]>([]);
 
<MultiSelect
  label="Tags"
  options={options}
  value={values}
  onChange={setValues}
  allowCreate
  onCreate={(label) => {
    const option = { value: label.toLowerCase(), label };
    setOptions((prev) => [...prev, option]);
    setValues((prev) => [...prev, option.value]);
  }}
/>;

<form
  onSubmit={(event) => {
    event.preventDefault();
    const data = new FormData(event.currentTarget);
    console.log(data.get("country"), data.getAll("departments"));
  }}
>
  <Select
    name="country"
    label="Country"
    required
    options={countries}
    error={error}
  />
  <MultiSelect name="departments" label="Departments" options={departments} />
  <button type="submit">Save</button>
</form>

const picker = useRef<ComboboxHandle<string>>(null);
 
<Select ref={picker} options={countries} />;
 
picker.current?.open();

<MultiSelect
  className="max-w-sm"
  classNames={{ control: "shadow-sm", tag: "uppercase tracking-wide" }}
  options={options}
/>

.cb-root {
  --cb-accent: #7c3aed;
  --cb-radius: 12px;
}

<MultiSelect
  localeText={{
    searchPlaceholder: "Suchen…",
    noResults: "Keine Treffer",
    selectedCount: (count) => `${count} ausgewählt`,
  }}
/>

const controlRef = useRef<HTMLDivElement>(null);
const searchRef = useRef<HTMLInputElement>(null);
const listRef = useRef<HTMLDivElement>(null);
 
const combobox = useCombobox({
  options,
  multiple: false,
  defaultValue: [],
  onValuesChange: (values, options) => …,
  text: defaultComboboxText,
  id: "my-picker",
  controlRef,
  searchRef,
  listRef,
});