import React from "react"; // headless ui import { Listbox, Transition } from "@headlessui/react"; // icons import { ChevronDownIcon } from "@heroicons/react/20/solid"; import { CheckIcon } from "@heroicons/react/24/outline"; type CustomSelectProps = { value: any; onChange: any; children: React.ReactNode; label?: string | JSX.Element; textAlignment?: "left" | "center" | "right"; maxHeight?: "sm" | "rg" | "md" | "lg" | "none"; position?: "right" | "left"; verticalPosition?: "top" | "bottom"; width?: "auto" | string; input?: boolean; noChevron?: boolean; customButton?: JSX.Element; optionsClassName?: string; disabled?: boolean; selfPositioned?: boolean; }; const CustomSelect = ({ children, label, textAlignment, value, onChange, maxHeight = "none", position = "left", verticalPosition = "bottom", width = "auto", input = false, noChevron = false, customButton, optionsClassName = "", disabled = false, selfPositioned = false, }: CustomSelectProps) => (
{customButton ? ( {customButton} ) : ( {label} {!noChevron && !disabled && )}
{children}
); type OptionProps = { children: string | JSX.Element; value: any; className?: string; }; const Option: React.FC = ({ children, value, className }) => ( `${className} ${active || selected ? "bg-brand-surface-2" : ""} ${ selected ? "font-medium" : "" } cursor-pointer select-none truncate rounded px-1 py-1.5 text-brand-secondary` } > {({ selected }) => (
{children}
{selected && }
)}
); CustomSelect.Option = Option; export { CustomSelect };