tags

1"use client";
2 
3import { XIcon } from "lucide-react";
4import {
5  type ComponentProps,
6  createContext,
7  type MouseEventHandler,
8  type ReactNode,
9  useContext,
10  useEffect,
11  useRef,
12  useState,
13} from "react";
14import { Badge } from "@/components/ui/badge";
15import { Button } from "@/components/ui/button";
16import {
17  Command,
18  CommandEmpty,
19  CommandGroup,
20  CommandInput,
21  CommandItem,
22  CommandList,
23} from "@/components/ui/command";
24import {
25  Popover,
26  PopoverContent,
27  PopoverTrigger,
28} from "@/components/ui/popover";
29import { cn } from "@/lib/utils";
30 
31type TagsContextType = {
32  value?: string;
33  setValue?: (value: string) => void;
34  open: boolean;
35  onOpenChange: (open: boolean) => void;
36  width?: number;
37  setWidth?: (width: number) => void;
38};
39 
40const TagsContext = createContext<TagsContextType>({
41  value: undefined,
42  setValue: undefined,
43  open: false,
44  onOpenChange: () => {},
45  width: undefined,
46  setWidth: undefined,
47});
48 
49const useTagsContext = () => {
50  const context = useContext(TagsContext);
51 
52  if (!context) {
53    throw new Error("useTagsContext must be used within a TagsProvider");
54  }
55 
56  return context;
57};
58 
59export type TagsProps = {
60  value?: string;
61  setValue?: (value: string) => void;
62  open?: boolean;
63  onOpenChange?: (open: boolean) => void;
64  children?: ReactNode;
65  className?: string;
66};
67 
68export const Tags = ({
69  value,
70  setValue,
71  open: controlledOpen,
72  onOpenChange: controlledOnOpenChange,
73  children,
74  className,
75}: TagsProps) => {
76  const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
77  const [width, setWidth] = useState<number>();
78  const ref = useRef<HTMLDivElement>(null);
79 
80  const open = controlledOpen ?? uncontrolledOpen;
81  const onOpenChange = controlledOnOpenChange ?? setUncontrolledOpen;
82 
83  useEffect(() => {
84    if (!ref.current) {
85      return;
86    }
87 
88    const resizeObserver = new ResizeObserver((entries) => {
89      setWidth(entries[0].contentRect.width);
90    });
91 
92    resizeObserver.observe(ref.current);
93 
94    return () => {
95      resizeObserver.disconnect();
96    };
97  }, []);
98 
99  return (
100    <TagsContext.Provider
101      value={{ value, setValue, open, onOpenChange, width, setWidth }}
102    >
103      <Popover onOpenChange={onOpenChange} open={open}>
104        <div className={cn("relative w-full", className)} ref={ref}>
105          {children}
106        </div>
107      </Popover>
108    </TagsContext.Provider>
109  );
110};
111 
112export type TagsTriggerProps = ComponentProps<typeof Button>;
113 
114export const TagsTrigger = ({
115  className,
116// … truncated