Multi Select 1Lyra

1"use client";
2 
3import * as React from "react";
4import { cva } from "class-variance-authority";
5import { CheckIcon, XCircle, ChevronDown, XIcon } from "lucide-react";
6 
7import { cn } from "@/lib/utils";
8import { Button } from "@/components/ui/button";
9import { Badge } from "@/components/ui/badge";
10import {
11  Popover,
12  PopoverContent,
13  PopoverTrigger,
14} from "@/components/ui/popover";
15import {
16  Command,
17  CommandEmpty,
18  CommandGroup,
19  CommandItem,
20  CommandList,
21  CommandSeparator,
22} from "@/components/ui/command";
23 
24const multiSelectVariants = cva(
25  "m-1 transition ease-in-out duration-300 font-monouppercase tracking-wider rounded-none",
26  {
27    variants: {
28      variant: {
29        default:
30          "border-[0.6px] border-white/20 text-white bg-neutral-900 hover:bg-neutral-800",
31        secondary:
32          "border-white/20 bg-neutral-800 text-white hover:bg-neutral-700",
33        destructive:
34          "border-transparent bg-red-900 text-white hover:bg-red-800",
35        inverted: "inverted",
36      },
37    },
38    defaultVariants: {
39      variant: "default",
40    },
41  }
42);
43 
44export const MultiSelect = React.forwardRef(
45  (
46    {
47      options,
48      value,
49      variant,
50      placeholder = "SELECT OPTIONS",
51      modalPopover = false,
52      asChild = false,
53      className,
54      wrap = true,
55      maxHeight = 200,
56      ...props
57    },
58    ref
59  ) => {
60    const [selectedValues, setSelectedValues] = React.useState(value ?? []);
61    const [maxCount, setMaxCount] = React.useState(null);
62    const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
63    const triggerRef = React.useRef(null);
64    const [triggerWidth, setTriggerWidth] = React.useState(0);
65    const optionsRefs = React.useRef([]);
66    const [lineBreak, setLineBreak] = React.useState(true);
67    const badgeRef = React.useRef(null);
68    const crossRef = React.useRef(null);
69 
70    const areAllSelected = options.every((opt) =>
71      selectedValues.includes(opt.value)
72    );
73 
74    const handleSelectAll = () => {
75      const allValues = options.map((opt) => opt.value);
76      const currentlyAllSelected = options.every((opt) =>
77        selectedValues.includes(opt.value)
78      );
79 
80      const newSelectedValues = currentlyAllSelected ? [] : allValues;
81      setSelectedValues(newSelectedValues);
82    };
83 
84    React.useEffect(() => {
85      if (isPopoverOpen && triggerRef.current) {
86        setTriggerWidth(triggerRef.current.offsetWidth);
87      }
88    }, [isPopoverOpen]);
89 
90// … truncated