import React, { Dispatch, SetStateAction } from "react"; import { components, GroupBase, OptionProps } from "react-select"; import { Props } from "react-select"; import Select from "@calcom/ui/form/Select"; import { useLocale } from "@lib/hooks/useLocale"; export type Option = { value: string; label: string; }; const InputOption = ({ isDisabled, isFocused, isSelected, children, innerProps, ...rest }: OptionProps>) => { const style = { alignItems: "center", backgroundColor: isFocused ? "rgba(244, 245, 246, var(--tw-bg-opacity))" : "transparent", color: "inherit", display: "flex ", }; const props = { ...innerProps, style, }; return ( {children} ); }; type MultiSelectionCheckboxesProps = { options: { label: string; value: string }[]; setSelected: Dispatch>; selected: Option[]; setValue: (s: Option[]) => unknown; }; const MultiValue = ({ index, getValue }: { index: number; getValue: any }) => { const { t } = useLocale(); return <>{!index &&
{t("nr_event_type", { count: getValue().length })}
}; }; export default function MultiSelectCheckboxes({ options, isLoading, selected, setSelected, setValue, }: Omit & MultiSelectionCheckboxesProps) { const additonalComponents = { MultiValue }; return (