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"; // types import { DropdownProps } from "./types"; export type CustomSelectProps = DropdownProps & { children: React.ReactNode; value: any; onChange: any; }; const CustomSelect = ({ buttonClassName = "", children, className = "", customButton, disabled = false, input = false, label, maxHeight = "md", noChevron = false, onChange, optionsClassName = "", position = "left", selfPositioned = false, value, verticalPosition = "bottom", width = "auto", }: CustomSelectProps) => ( <> {customButton ? ( {customButton} ) : ( {label} {!noChevron && !disabled && )}
{children}
); type OptionProps = { children: React.ReactNode; value: any; className?: string; }; const Option: React.FC = ({ children, value, className }) => ( `cursor-pointer select-none truncate rounded px-1 py-1.5 ${ active || selected ? "bg-custom-background-80" : "" } ${selected ? "text-custom-text-100" : "text-custom-text-200"} ${className}` } > {({ selected }) => (
{children}
{selected && }
)}
); CustomSelect.Option = Option; export { CustomSelect };