import React, { useState } from "react"; // headless ui import { Combobox, Transition } from "@headlessui/react"; // icons import { CheckIcon, ChevronDownIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline"; type CustomSearchSelectProps = { value: any; onChange: any; options: { value: any; query: string; content: JSX.Element; }[]; label?: string | JSX.Element; textAlignment?: "left" | "center" | "right"; height?: "sm" | "md" | "rg" | "lg"; position?: "right" | "left"; verticalPosition?: "top" | "bottom"; noChevron?: boolean; customButton?: JSX.Element; optionsClassName?: string; input?: boolean; disabled?: boolean; selfPositioned?: boolean; multiple?: boolean; footerOption?: JSX.Element; }; export const CustomSearchSelect = ({ label, textAlignment, height = "md", value, onChange, options, position = "left", verticalPosition = "bottom", noChevron = false, customButton, optionsClassName = "", input = false, disabled = false, selfPositioned = false, multiple = false, footerOption, }: CustomSearchSelectProps) => { const [query, setQuery] = useState(""); const filteredOptions = query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase())); const props: any = { value, onChange, disabled, }; if (multiple) props.multiple = true; return ( {({ open }: any) => ( <> {customButton ? ( {customButton} ) : ( {label} {!noChevron && !disabled && ( )}
setQuery(e.target.value)} placeholder="Type to search..." displayValue={(assigned: any) => assigned?.name} />
{filteredOptions ? ( filteredOptions.length > 0 ? ( filteredOptions.map((option) => ( `${active || selected ? "bg-brand-surface-2" : ""} ${ selected ? "font-medium" : "" } flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5 text-brand-secondary` } > {({ active, selected }) => ( <> {option.content} {multiple ? (
) : ( )} )}
)) ) : (

No matching results

) ) : (

Loading...

)}
{footerOption}
)}
); };