common/SearchableSelect.tsx

Searchable select dropdown with filter for long option lists

// Source: https://github.com/the-open-agent/openagent | License: Apache-2.0 | Copyright You must retain, in the Source form of any Derivative Works
// Provided via justclaw.it.com; keep this notice with the code.
import * as React from "react";
import i18next from "i18next";
import {Check, ChevronsUpDown} from "lucide-react";
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";
import {cn} from "@/lib/utils";

export interface SearchableOption {
  value: string;
  label: React.ReactNode;
  /** shown in the dropdown instead of `label`, which stays on the trigger */
  itemLabel?: React.R

... (truncated -- full source via MCP)