tsf-combobox-field

1'use client';
2 
3import { Command as CommandPrimitive } from 'cmdk';
4import { Check, Loader2, Search, X } from 'lucide-react';
5import * as React from 'react';
6import { Badge } from '@/components/ui/badge';
7import { Command, CommandGroup, CommandItem, CommandList } from '@/components/ui/command';
8import { Field, FieldDescription, FieldError, FieldLabel } from '@/components/ui/field';
9import { useFieldContext } from '@/components/ui/shuip/tanstack-form/form-context';
10import { cn } from '@/lib/utils';
11 
12const DEBOUNCE_TIME = 300;
13 
14export interface ComboboxOption {
15  value: string;
16  label: string;
17  sublabel?: string;
18}
19 
20type ComboboxFieldVariant = 'boxed' | 'ghost';
21type ComboboxFieldSize = 'sm' | 'default';
22 
23export interface ComboboxFieldProps {
24  multiple?: boolean;
25  options?: ComboboxOption[];
26  onSearch?: (query: string) => Promise<ComboboxOption[]>;
27  maxResults?: number;
28  variant?: ComboboxFieldVariant;
29  size?: ComboboxFieldSize;
30  label?: string;
31  description?: string;
32  placeholder?: string;
33  emptyText?: string;
34  debounceMs?: number;
35  defaultSelected?: ComboboxOption | ComboboxOption[];
36}
37 
38const shellVariants: Record<ComboboxFieldVariant, string> = {
39  boxed:
40    'rounded-md border border-input bg-transparent shadow-xs focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px] aria-invalid:border-destructive aria-invalid:ring-destructive/20',
41  ghost: 'rounded-md border border-transparent bg-transparent',
42};
43 
44const shellSizes: Record<ComboboxFieldSize, string> = {
45  default: 'min-h-9 gap-1.5 px-2 py-1 text-sm',
46  sm: 'min-h-7 gap-1 px-1.5 py-0.5 text-xs',
47};
48 
49function toArray(value: string | string[] | undefined | null): string[] {
50  if (Array.isArray(value)) return value;
51  if (value) return [value];
52  return [];
53}
54 
55export function ComboboxField({
56  multiple = false,
57  options,
58  onSearch,
59  maxResults,
60  variant = 'boxed',
61  size = 'default',
62  label,
63  description,
64  placeholder,
65  emptyText = 'No results',
66  debounceMs = DEBOUNCE_TIME,
67  defaultSelected,
68}: ComboboxFieldProps) {
69  // The consumer's field type (string vs string[]) decides single vs multi; the context is
70  // widened to the shared shape and values are normalised through `toArray`.
71  const field = useFieldContext<string | string[]>();
72  const { isValid, errors } = field.state.meta;
73 
74  const [open, setOpen] = React.useState(false);
75  const [query, setQuery] = React.useState('');
76  const [typed, setTyped] = React.useState(false);
77// … truncated