1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
// adapted from https://github.com/shadcn-ui/ui/issues/66#issuecomment-1718329393// @deno-types="npm:@types/react@18.2.60"import * as React from "react";
import { Badge } from "./badge.tsx";import { Button } from "./button.tsx";import {  Command,  CommandEmpty,  CommandGroup,  CommandInput,  CommandItem,} from "./command.tsx";import { Popover, PopoverContent, PopoverTrigger } from "./popover.tsx";import { cn } from "./utils.ts";
export type SelectMultipleOption = {  value: string;  label: React.ReactNode;};
export type SelectMultipleProps = {  options: SelectMultipleOption[];  value: string[];  onChange: React.Dispatch<React.SetStateAction<string[]>>;  className?: string;};
function SelectMultiple(  { options, value, onChange, className, ...props }: SelectMultipleProps,) {  const [open, setOpen] = React.useState(false);
  const handleUnselect = (item: string) => {    onChange(value.filter((i) => i !== item));  };
  return (    <Popover open={open} onOpenChange={setOpen}>      <PopoverTrigger asChild>        <Button          variant="outline"          role="combobox"          aria-expanded={open}          className={cn(            `w-full justify-between`,            value.length > 1 ? "h-full" : "h-10",            className,          )}          onClick={() => setOpen(!open)}          {...props}        >          <div className="flex gap-1 flex-wrap">            {value.map((item) => (              <Badge                variant="secondary"                key={item}                className="mr-1 mb-1"                onClick={() => handleUnselect(item)}              >                {options.find((option) => option.value === item)?.label}                <button                  className="ml-1 ring-offset-background rounded-full outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"                  onKeyDown={(e) => {                    if (e.key === "Enter") {                      handleUnselect(item);                    }                  }}                  onMouseDown={(e) => {                    e.preventDefault();                    e.stopPropagation();                  }}                  onClick={() => handleUnselect(item)}                >                  <i className="mdi-close h-3 w-3 text-muted-foreground hover:text-foreground" />                </button>              </Badge>            ))}          </div>          <i className="mdi-unfold-more-horizontal h-4 w-4 shrink-0 opacity-50" />        </Button>      </PopoverTrigger>      <PopoverContent className="w-full p-0">        <Command className={className}>          <CommandInput placeholder="Search ..." />          <CommandEmpty>No item found.</CommandEmpty>          <CommandGroup className="max-h-64 overflow-auto">            {options.map((option) => (              <CommandItem                key={option.value}                onSelect={() => {                  onChange(                    value.includes(option.value)                      ? value.filter((item) => item !== option.value)                      : [...value, option.value],                  );                  setOpen(true);                }}              >                <i                  className={cn(                    "mdi-check mr-2 h-4 w-4",                    value.includes(option.value) ? "opacity-100" : "opacity-0",                  )}                />                {option.label}              </CommandItem>            ))}          </CommandGroup>        </Command>      </PopoverContent>    </Popover>  );}
export { SelectMultiple };