Autocomplete

1// This code is based on downshift-shadcn-combobox by OmerMakesStuff
2// Source: https://github.com/OmerMakesStuff/downshift-shadcn-combobox
3// Licensed under the MIT License
4 
5import {
6  Popover,
7  PopoverContent,
8  PopoverTrigger,
9} from "@/components/ui/popover";
10import { cn } from "@/lib/utils";
11import { Input, type InputProps } from "@/components/ui/input";
12import { cva } from "class-variance-authority";
13import {
14  type UseComboboxGetInputPropsReturnValue,
15  type UseComboboxProps,
16  type UseComboboxReturnValue,
17  useCombobox,
18} from "downshift";
19import { CheckIcon, ChevronDownIcon } from "lucide-react";
20import {
21  Children,
22  type ComponentPropsWithoutRef,
23  type PropsWithChildren,
24  type ReactElement,
25  createContext,
26  isValidElement,
27  useCallback,
28  useContext,
29  useEffect,
30  useMemo,
31  useState,
32} from "react";
33 
34type AutocompleteItemType = {
35  label: string;
36  value: string;
37  disabled?: boolean;
38};
39 
40type AutocompleteContextValue = Partial<
41  Pick<
42    UseComboboxReturnValue<AutocompleteItemType>,
43    | "getInputProps"
44    | "getToggleButtonProps"
45    | "getItemProps"
46    | "getMenuProps"
47    | "highlightedIndex"
48    | "inputValue"
49    | "isOpen"
50    | "selectedItem"
51    | "selectItem"
52    | "setInputValue"
53  > & {
54    size: InputProps["size"];
55    variant: InputProps["variant"];
56    filteredItems: AutocompleteItemType[];
57    items: AutocompleteItemType[];
58    onItemsChange: (items: AutocompleteItemType[]) => void;
59    onChange: (value: string) => void;
60    openedOnce: boolean;
61  }
62>;
63 
64const AutocompleteContext = createContext<AutocompleteContextValue>(
65  {} as AutocompleteContextValue,
66);
67 
68const useAutocompleteContext = () => useContext(AutocompleteContext);
69 
70type AutocompleteProps = PropsWithChildren<{
71  value?: string;
72  onChange?: (value: string) => void;
73  size?: InputProps["size"];
74  variant?: InputProps["variant"];
75  filterItems?: (
76    search: string,
77    items: AutocompleteItemType[],
78  ) => AutocompleteItemType[];
79}>;
80 
81const { stateChangeTypes } = useCombobox;
82 
83const defaultFilter = (inputValue: string, items: AutocompleteItemType[]) => {
84  return items.filter(
85    (item) =>
86      !inputValue ||
87      item.label.toLowerCase().includes(inputValue.toLowerCase()),
88  );
89};
90 
91const Autocomplete = ({
92  size,
93  variant,
94  value,
95  onChange,
96  filterItems = defaultFilter,
97  children,
98}: AutocompleteProps) => {
99  const [items, setItems] = useState<AutocompleteItemType[]>([]);
100// … truncated