tsf-autocomplete-field

1'use client';
2 
3import { Loader2 } from 'lucide-react';
4import * as React from 'react';
5import { Command, CommandEmpty, CommandGroup, CommandItem, CommandList } from '@/components/ui/command';
6import { Field, FieldDescription, FieldError, FieldLabel } from '@/components/ui/field';
7import { Input } from '@/components/ui/input';
8import { Popover, PopoverAnchor, PopoverContent } from '@/components/ui/popover';
9import { useFieldContext } from '@/components/ui/shuip/tanstack-form/form-context';
10import { cn } from '@/lib/utils';
11 
12const DEBOUNCE_TIME = 300;
13 
14function defaultFilter(suggestion: string, query: string) {
15  return suggestion.toLowerCase().includes(query.toLowerCase());
16}
17 
18export interface AutocompleteFieldProps {
19  label?: string;
20  description?: string;
21  placeholder?: string;
22  suggestions?: string[];
23  onSearch?: (query: string) => Promise<string[]>;
24  emptyText?: string;
25  debounceMs?: number;
26  filter?: (suggestion: string, query: string) => boolean;
27  fieldProps?: React.ComponentProps<typeof Field>;
28  props?: Omit<React.ComponentProps<'input'>, 'value' | 'onChange'>;
29}
30 
31export function AutocompleteField({
32  label,
33  description,
34  placeholder,
35  suggestions,
36  onSearch,
37  emptyText = 'No results',
38  debounceMs = DEBOUNCE_TIME,
39  filter = defaultFilter,
40  fieldProps,
41  props,
42}: AutocompleteFieldProps) {
43  const field = useFieldContext<string>();
44  const { isValid, errors } = field.state.meta;
45 
46  const [open, setOpen] = React.useState(false);
47  const [selectedIndex, setSelectedIndex] = React.useState(-1);
48  const [results, setResults] = React.useState<string[]>([]);
49  const [isPending, startTransition] = React.useTransition();
50  const debounceTimerRef = React.useRef<NodeJS.Timeout | null>(null);
51  const requestIdRef = React.useRef(0);
52  const popoverRef = React.useRef<HTMLDivElement>(null);
53 
54  const query = field.state.value ?? '';
55 
56  const items = React.useMemo(() => {
57    if (onSearch) return results;
58    if (!suggestions) return [];
59    if (!query) return suggestions;
60    return suggestions.filter((suggestion) => filter(suggestion, query));
61  }, [onSearch, results, suggestions, query, filter]);
62 
63  React.useEffect(() => {
64    if (!onSearch || !open) return;
65 
66    if (debounceTimerRef.current) {
67      clearTimeout(debounceTimerRef.current);
68    }
69 
70    if (!query) {
71      requestIdRef.current++;
72      setResults([]);
73      return;
74    }
75 
76    debounceTimerRef.current = setTimeout(() => {
77      const requestId = ++requestIdRef.current;
78// … truncated