"use client"; import * as React from "react"; import { Command } from "cmdk"; import { Popover as PopoverPrimitive } from "radix-ui"; import { cn } from "@kineticui/core"; import { CheckIcon, ChevronDownIcon, PlusIcon, XIcon } from "@kineticui/icons"; export type ComboboxOption = { value: string; label: string; group?: string }; type Base = { options: ComboboxOption[]; placeholder?: string; searchPlaceholder?: string; emptyText?: string; /** Show "Create “…”" when nothing matches. Called with the typed text. */ onCreate?: (label: string) => void; disabled?: boolean; className?: string; "aria-label"?: string; }; export type ComboboxProps = | (Base & { multiple?: false; value?: string; onValueChange?: (value: string) => void; defaultValue?: string }) | (Base & { multiple: true; value?: string[]; onValueChange?: (value: string[]) => void; defaultValue?: string[] }); /** Searchable select. Set `multiple` for tag-style multi-select. */ export function Combobox(props: ComboboxProps) { const { options, placeholder = "Select…", searchPlaceholder = "Search…", emptyText = "No results.", onCreate, disabled, className } = props; const [open, setOpen] = React.useState(false); const [query, setQuery] = React.useState(""); const [internal, setInternal] = React.useState( props.multiple ? props.defaultValue ?? [] : props.defaultValue ? [props.defaultValue] : [], ); const selected: string[] = props.multiple ? props.value ?? internal : props.value !== undefined ? props.value ? [props.value] : [] : internal; const commit = (next: string[]) => { if (props.value === undefined) setInternal(next); if (props.multiple) props.onValueChange?.(next); else props.onValueChange?.(next[0] ?? ""); }; const toggle = (v: string) => { if (props.multiple) commit(selected.includes(v) ? selected.filter((s) => s !== v) : [...selected, v]); else { commit([v]); setOpen(false); } setQuery(""); }; const labelOf = (v: string) => options.find((o) => o.value === v)?.label ?? v; const groups = React.useMemo(() => { const m = new Map(); for (const o of options) m.set(o.group ?? "", [...(m.get(o.group ?? "") ?? []), o]); return [...m.entries()]; }, [options]); const exact = options.some((o) => o.label.toLowerCase() === query.trim().toLowerCase()); return ( {selected.length === 0 ? {placeholder} : null} {props.multiple ? selected.map((v) => ( {labelOf(v)} { e.preventDefault(); e.stopPropagation(); toggle(v); }} className="text-subtle hover:text-foreground" > )) : selected[0] ? {labelOf(selected[0])} : null} {onCreate ? null : emptyText} {groups.map(([g, list]) => ( {list.map((o) => ( toggle(o.value)} className="flex cursor-default items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm text-foreground outline-none data-[selected=true]:bg-surface-overlay" > {selected.includes(o.value) ? : null} {o.label} ))} ))} {onCreate && query.trim() && !exact ? ( { onCreate(query.trim()); setQuery(""); }} className="flex cursor-default items-center gap-2 rounded-lg px-2.5 py-2 text-sm text-muted outline-none data-[selected=true]:bg-surface-overlay" > Create “{query.trim()}” ) : null} ); }

Combobox

Installation

Exports