Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
2026-04-19 17:04:32 +00:00
parent 4da181aff6
commit 3faf312c47
1 changed files with 127 additions and 0 deletions
@@ -0,0 +1,127 @@
+import * as React from "react";
+import { Check, ChevronsUpDown } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+
+export interface SearchableSelectOption {
+  value: string;
+  /** Visible label in the selected trigger */
+  label: string;
+  /** Custom render for the option row (defaults to label) */
+  render?: React.ReactNode;
+  /** Extra text used for fuzzy matching (case number, email, etc.) */
+  keywords?: string;
+  disabled?: boolean;
+}
+
+interface SearchableSelectProps {
+  value?: string | null;
+  onValueChange: (value: string) => void;
+  options: SearchableSelectOption[];
+  placeholder?: string;
+  searchPlaceholder?: string;
+  emptyText?: string;
+  disabled?: boolean;
+  className?: string;
+  triggerClassName?: string;
+  /** Width of popover content. Default: trigger width via "w-[--radix-popover-trigger-width]" */
+  contentClassName?: string;
+  /** Optional element rendered above the list (e.g. "Add new") */
+  footer?: React.ReactNode;
+}
+
+export function SearchableSelect({
+  value,
+  onValueChange,
+  options,
+  placeholder = "Select…",
+  searchPlaceholder = "Search…",
+  emptyText = "No results.",
+  disabled,
+  className,
+  triggerClassName,
+  contentClassName,
+  footer,
+}: SearchableSelectProps) {
+  const [open, setOpen] = React.useState(false);
+  const selected = options.find((o) => o.value === value);
+
+  return (
+    <div className={className}>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            type="button"
+            variant="outline"
+            role="combobox"
+            aria-expanded={open}
+            disabled={disabled}
+            className={cn(
+              "w-full justify-between font-normal",
+              !selected && "text-muted-foreground",
+              triggerClassName,
+            )}
+          >
+            <span className="truncate text-left">
+              {selected ? selected.label : placeholder}
+            </span>
+            <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent
+          className={cn("w-[--radix-popover-trigger-width] p-0", contentClassName)}
+          align="start"
+        >
+          <Command
+            filter={(itemValue, search) => {
+              const opt = options.find((o) => o.value === itemValue);
+              if (!opt) return 0;
+              const hay = `${opt.label} ${opt.keywords ?? ""}`.toLowerCase();
+              return hay.includes(search.toLowerCase()) ? 1 : 0;
+            }}
+          >
+            <CommandInput placeholder={searchPlaceholder} />
+            <CommandList>
+              <CommandEmpty>{emptyText}</CommandEmpty>
+              <CommandGroup>
+                {options.map((opt) => (
+                  <CommandItem
+                    key={opt.value}
+                    value={opt.value}
+                    disabled={opt.disabled}
+                    onSelect={(v) => {
+                      onValueChange(v);
+                      setOpen(false);
+                    }}
+                  >
+                    <Check
+                      className={cn(
+                        "mr-2 h-4 w-4",
+                        value === opt.value ? "opacity-100" : "opacity-0",
+                      )}
+                    />
+                    <span className="flex-1 truncate">{opt.render ?? opt.label}</span>
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+              {footer}
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}