combobox

1"use client";
2 
3import { useControllableState } from "@radix-ui/react-use-controllable-state";
4import { ChevronsUpDownIcon, PlusIcon } from "lucide-react";
5import {
6  type ComponentProps,
7  createContext,
8  type ReactNode,
9  useContext,
10  useEffect,
11  useRef,
12  useState,
13} from "react";
14import { Button } from "@/components/ui/button";
15import {
16  Command,
17  CommandEmpty,
18  CommandGroup,
19  CommandInput,
20  CommandItem,
21  CommandList,
22  CommandSeparator,
23} from "@/components/ui/command";
24import {
25  Popover,
26  PopoverContent,
27  PopoverTrigger,
28} from "@/components/ui/popover";
29import { cn } from "@/lib/utils";
30 
31type ComboboxData = {
32  label: string;
33  value: string;
34};
35 
36type ComboboxContextType = {
37  data: ComboboxData[];
38  type: string;
39  value: string;
40  onValueChange: (value: string) => void;
41  open: boolean;
42  onOpenChange: (open: boolean) => void;
43  width: number;
44  setWidth: (width: number) => void;
45  inputValue: string;
46  setInputValue: (value: string) => void;
47};
48 
49const ComboboxContext = createContext<ComboboxContextType>({
50  data: [],
51  type: "item",
52  value: "",
53  onValueChange: () => {},
54  open: false,
55  onOpenChange: () => {},
56  width: 200,
57  setWidth: () => {},
58  inputValue: "",
59  setInputValue: () => {},
60});
61 
62export type ComboboxProps = ComponentProps<typeof Popover> & {
63  data: ComboboxData[];
64  type: string;
65  defaultValue?: string;
66  value?: string;
67  onValueChange?: (value: string) => void;
68  open?: boolean;
69  onOpenChange?: (open: boolean) => void;
70};
71 
72export const Combobox = ({
73  data,
74  type,
75  defaultValue,
76  value: controlledValue,
77  onValueChange: controlledOnValueChange,
78  defaultOpen = false,
79  open: controlledOpen,
80  onOpenChange: controlledOnOpenChange,
81  ...props
82}: ComboboxProps) => {
83  const [value, onValueChange] = useControllableState({
84    defaultProp: defaultValue ?? "",
85    prop: controlledValue,
86    onChange: controlledOnValueChange,
87  });
88  const [open, onOpenChange] = useControllableState({
89    defaultProp: defaultOpen,
90    prop: controlledOpen,
91    onChange: controlledOnOpenChange,
92  });
93  const [width, setWidth] = useState(200);
94  const [inputValue, setInputValue] = useState("");
95 
96  return (
97    <ComboboxContext.Provider
98      value={{
99        type,
100        value,
101        onValueChange,
102        open,
103        onOpenChange,
104        data,
105        width,
106        setWidth,
107        inputValue,
108        setInputValue,
109      }}
110    >
111      <Popover {...props} onOpenChange={onOpenChange} open={open} />
112// … truncated