Creatable Combobox

1"use client";
2 
3import * as React from "react";
4import {
5  Combobox as ComboboxPrimitive,
6  ComboboxRootChangeEventDetails,
7} from "@base-ui/react";
8 
9import { cn } from "@/lib/utils";
10import { Combobox } from "@/components/ui/combobox";
11import { Plus } from "lucide-react";
12 
13// ─── Creatable ────────────────────────────────────────────────────────
14 
15type CreatableItem = {
16  creatable: true; // literal true, not boolean
17  label: string;
18  value: string;
19};
20 
21const isCreatableItem = (item: unknown): item is CreatableItem => {
22  return (
23    typeof item === "object" &&
24    item !== null &&
25    (item as CreatableItem).creatable === true
26  );
27};
28// ─── Internal helpers ─────────────────────────────────────────────────────────
29 
30/** Display string for an item — mirrors base-ui's own default logic. */
31const toLabel = (item: unknown): string => {
32  if (typeof item === "string") return item;
33  if (item && typeof item === "object") {
34    if ("label" in item) return String((item as { label: unknown }).label);
35    if ("value" in item) return String((item as { value: unknown }).value);
36  }
37  return String(item);
38};
39 
40/** Equality key for an item — prefers .value for stable identity. */
41const toValueKey = (item: unknown): string => {
42  if (typeof item === "string") return item;
43  if (item && typeof item === "object") {
44    if ("value" in item) return String((item as { value: unknown }).value);
45    if ("label" in item) return String((item as { label: unknown }).label);
46  }
47  return String(item);
48};
49 
50// ─── CreatableCombobox ────────────────────────────────────────────────────────
51 
52type ComboboxRootProps = React.ComponentProps<typeof ComboboxPrimitive.Root>;
53 
54type CreatableComboboxProps = ComboboxRootProps & {
55  /**
56   * Called when the user confirms a new value that doesn't exist in the list.
57   * Receives the raw typed string value.
58   */
59  /**
60   * onValueChange will never be called with a CreatableItem.
61   * Use onCreateValue to handle new value creation.
62   */
63  onCreateValue: (value: string) => void;
64 
65  /** Label for the "Create" option. Defaults to `Create "${value}"`. */
66  createLabel?: (value: string) => string;
67 
68// … truncated