All files / react-base/src/components/ui searchable-dropdown.tsx

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
118
119
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { Check, ChevronsUpDown, Search } from "lucide-react";
import * as React from "react";
import { Button } from "@/components/ui/button";
import { dropdownClasses, type DropdownOption } from "@/components/ui/dropdown-types";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { ScrollArea } from "@/components/ui/scroll-area";
import { cn } from "@/lib/utils";
 
function filterOptions(options: DropdownOption[], search: string) {
  const query = search.trim().toLowerCase();
  if (!query) {
    return options;
  }
 
  return options.filter(
    (option) =>
      option.label.toLowerCase().includes(query) || option.description?.toLowerCase().includes(query),
  );
}
 
export type SearchableDropdownProps = {
  options: DropdownOption[];
  value?: string;
  onValueChange?: (value: string) => void;
  placeholder?: string;
  searchPlaceholder?: string;
  emptyText?: string;
  disabled?: boolean;
  className?: string;
};
 
export function SearchableDropdown({
  options,
  value,
  onValueChange,
  placeholder = "Select option...",
  searchPlaceholder = "Search...",
  emptyText = "No results found.",
  disabled = false,
  className,
}: SearchableDropdownProps) {
  const [open, setOpen] = React.useState(false);
  const [search, setSearch] = React.useState("");
 
  const selected = options.find((option) => option.value === value);
  const filteredOptions = filterOptions(options, search);
 
  const handleOpenChange = (nextOpen: boolean) => {
    setOpen(nextOpen);
    if (!nextOpen) {
      setSearch("");
    }
  };
 
  const handleSelect = (optionValue: string) => {
    onValueChange?.(optionValue);
    setOpen(false);
    setSearch("");
  };
 
  return (
    <Popover open={open} onOpenChange={handleOpenChange}>
      <PopoverTrigger asChild>
        <Button
          variant="outline"
          role="combobox"
          aria-expanded={open}
          disabled={disabled}
          className={cn(dropdownClasses.trigger, !selected && dropdownClasses.emptyText, className)}
        >
          <span className="truncate">{selected ? selected.label : placeholder}</span>
          <ChevronsUpDown className={dropdownClasses.chevron} />
        </Button>
      </PopoverTrigger>
      <PopoverContent align="start" className={dropdownClasses.popoverContent}>
        <div className={dropdownClasses.searchBar}>
          <Search className={dropdownClasses.searchIcon} />
          <input
            value={search}
            onChange={(event) => setSearch(event.target.value)}
            placeholder={searchPlaceholder}
            className={dropdownClasses.searchInput}
          />
        </div>
        <ScrollArea className="max-h-60">
          <div className="p-1">
            {filteredOptions.length === 0 ? (
              <p className={cn(dropdownClasses.empty, dropdownClasses.emptyText)}>{emptyText}</p>
            ) : (
              filteredOptions.map((option) => (
                <button
                  key={option.value}
                  type="button"
                  disabled={option.disabled}
                  onClick={() => handleSelect(option.value)}
                  className={cn(
                    dropdownClasses.optionItem,
                    value === option.value && dropdownClasses.optionItemActive,
                  )}
                >
                  <Check
                    className={cn(dropdownClasses.checkIcon, value === option.value ? "opacity-100" : "opacity-0")}
                  />
                  <div className="flex flex-col items-start text-left">
                    <span>{option.label}</span>
                    {option.description ? (
                      <span className={cn("text-xs", dropdownClasses.optionDescription)}>{option.description}</span>
                    ) : null}
                  </div>
                </button>
              ))
            )}
          </div>
        </ScrollArea>
      </PopoverContent>
    </Popover>
  );
}