import type { GroupBase, InputProps, OptionProps, ControlProps } from "react-select"; import { components as reactSelectComponents } from "react-select"; import { classNames } from "@calcom/lib"; import { Icon } from "../../.."; import { UpgradeTeamsBadge } from "../../badge"; import type { SelectProps } from "./Select"; export const InputComponent = < Option, IsMulti extends boolean = false, Group extends GroupBase = GroupBase >({ inputClassName, ...props }: InputProps) => { return ( ); }; type ExtendedOption = { value: string | number; label: string; needsTeamsUpgrade?: boolean; }; export const OptionComponent = < Option, IsMulti extends boolean = false, Group extends GroupBase = GroupBase >({ ...props }: OptionProps) => { return ( // This gets styled in the select classNames prop now - handles overrides with styles vs className here doesnt {props.label || <> >} {(props.data as unknown as ExtendedOption).needsTeamsUpgrade ? : <>>} {props.isSelected && } ); }; export const ControlComponent = < Option, IsMulti extends boolean, Group extends GroupBase = GroupBase >( controlProps: ControlProps & { selectProps: SelectProps; } ) => { const dataTestId = controlProps.selectProps["data-testid"] ?? "select-control"; return ( ); }; // We need to override this component if we need a icon - we can't simpily override styles type IconLeadingProps = { icon: React.ReactNode; children?: React.ReactNode; } & React.ComponentProps; export const IconLeading = ({ icon, children, ...props }: IconLeadingProps) => { return ( {icon} {children} ); };