import { ChevronDownIcon } from "@heroicons/react/solid"; import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@radix-ui/react-collapsible"; import React from "react"; import type { FieldValues, Path, UseFormReturn } from "react-hook-form"; import classNames from "@calcom/lib/classNames"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { RadioArea, RadioAreaGroup } from "./RadioAreaGroup"; interface OptionProps extends Pick, "value" | "label" | "className"> { description?: string; } export type FieldPath = Path; interface RadioAreaSelectProps extends Omit, "onChange" | "form"> { options: OptionProps[]; // allow options to be passed programmatically, like options={} onChange?: (value: string) => void; form: UseFormReturn; name: FieldPath; } export const Select = function RadioAreaSelect( props: RadioAreaSelectProps ) { const { t } = useLocale(); const { options, form, disabled = !options.length, // if not explicitly disabled and the options length is empty, disable anyway placeholder = t("select"), } = props; const getLabel = (value: string | ReadonlyArray | number | undefined) => options.find((option: OptionProps) => option.value === value)?.label; return ( {getLabel(props.value) ?? placeholder} {options.map((option) => ( {option.label}

{option.description}

))}
); }; export default Select;