Typescript error on components prop after adding formatGroupLabel prop

[jhowell-droit]

Hi, I'm building a custom Dropdown component for my design system which uses React Select under the hood. I'm adding custom components for the Option and Menu components and have also just looked into adding Group headings when the options data is grouped.

Everything was working fine until I tried to add custom JSX for the Group Label as shown below, which has caused a bunch of typescript errors, also below.

Any pointers would be really helpful,

Thanks

Here's my component tsx file:

import clsx from 'clsx';
import {
  default as ReactSelect,
  ActionMeta,
  components,
  MenuProps,
  OptionProps,
  MultiValue,
  GroupBase
} from 'react-select';
import { useRef } from 'react';
import { Checkbox } from '../checkbox';
import { CheckboxGroup } from '../checkbox-group';
import { Text } from '../text';
import styles from './index.module.css';

type OptionType = {
  value: string;
  label: string;
};

export interface GroupedOption {
  readonly label: string;
  readonly options: readonly OptionType[] | readonly OptionType[];
}

export interface DropdownProps {
  isMulti: boolean;
  options: OptionType[];
}

const DropdownMultiOption = (optionProps: OptionProps<OptionType>) => {
  const { children, isSelected } = optionProps;
  const inputRef = useRef(null);
  return (
    <components.Option {...optionProps}>
      {/* <Checkbox value={children?.toString() || 'checkbox label'} isSelected>
        {children}
      </Checkbox> */}
      <input id="optionCheck" type="checkbox" checked={isSelected} ref={inputRef} />
      <label htmlFor="optionCheck">{children}</label>
    </components.Option>
  );
};

const DropdownMultiOptionMenu = (menuProps: MenuProps<OptionType>) => {
  const { children, selectProps, options } = menuProps;
  return (
    <components.Menu {...menuProps}>
      <button
        onClick={() =>
          selectProps.onChange(
            options as MultiValue<OptionType>,
            'select-option' as ActionMeta<OptionType>
          )
        }
      >
        Select all
      </button>
      {children}
    </components.Menu>
  );
};

const GroupLabel = ({ label }: GroupedOption) => (
  <Text as="h3" size="sm" color={2}>
    {label}
  </Text>
);

const Dropdown = ({ options, isMulti, ...rest }: DropdownProps) => (
  <ReactSelect
    classNames={{
      control: () => styles['c-dropdown'],
      menu: () => styles['c-dropdown__menu'],
      multiValue: () => styles['c-dropdown__multi-value'],
      option: () => styles['c-dropdown__option']
    }}
    closeMenuOnSelect={false}
    components={
      isMulti ? { Option: DropdownMultiOption, Menu: DropdownMultiOptionMenu } : undefined
    }
    formatGroupLabel={GroupLabel}
    isMulti={isMulti}
    hideSelectedOptions={false}
    options={options}
    unstyled
    {...rest}
  />
);

Dropdown.defaultProps = {};

export default Dropdown;

The errors shown are relating to the components prop (shown by the red underline in VSCode):

Type '{ Option: (optionProps: OptionProps<OptionType, boolean, GroupBase<OptionType>>) => Element; Menu: (menuProps: MenuProps<OptionType, boolean, GroupBase<...>>) => Element; } | undefined' is not assignable to type 'Partial<SelectComponents<OptionType, boolean, GroupedOption>> | undefined'.
  Type '{ Option: (optionProps: OptionProps<OptionType, boolean, GroupBase<OptionType>>) => JSX.Element; Menu: (menuProps: MenuProps<OptionType, boolean, GroupBase<...>>) => JSX.Element; }' is not assignable to type 'Partial<SelectComponents<OptionType, boolean, GroupedOption>>'.
    Types of property 'Option' are incompatible.
      Type '(optionProps: OptionProps<OptionType>) => JSX.Element' is not assignable to type 'ComponentType<OptionProps<OptionType, boolean, GroupedOption>> | undefined'.
        Type '(optionProps: OptionProps<OptionType>) => JSX.Element' is not assignable to type 'FunctionComponent<OptionProps<OptionType, boolean, GroupedOption>>'.
          Types of parameters 'optionProps' and 'props' are incompatible.
            Type 'OptionProps<OptionType, boolean, GroupedOption>' is not assignable to type 'OptionProps<OptionType, boolean, GroupBase<OptionType>>'.
              The types of 'selectProps.ariaLiveMessages' are incompatible between these types.
                Type 'AriaLiveMessages<OptionType, boolean, GroupedOption> | undefined' is not assignable to type 'AriaLiveMessages<OptionType, boolean, GroupBase<OptionType>> | undefined'.
                  Type 'AriaLiveMessages<OptionType, boolean, GroupedOption>' is not assignable to type 'AriaLiveMessages<OptionType, boolean, GroupBase<OptionType>>'.
                    Type 'GroupBase<OptionType>' is not assignable to type 'GroupedOption'.ts(2322)

Select.d.ts(72, 5): The expected type comes from property 'components' which is declared here on type 'IntrinsicAttributes & Omit<PublicBaseSelectProps<OptionType, boolean, GroupedOption>, StateManagedPropKeys> & Partial<...> & StateManagerAdditionalProps<...> & RefAttributes<...>'
(property) components?: Partial<SelectComponents<OptionType, boolean, GroupedOption>> | undefined
This complex object includes all the compositional components that are used in react-select. If you wish to overwrite a component, pass in an object with the appropriate namespace.

If you only wish to restyle a component, we recommend using the styles prop instead. For a list of the components that can be passed in, and the shape that will be passed to them, see [the components docs](vscode-file://vscode-app/Applications/Visual%20Studio%20Code.app/Contents/Resources/app/out/vs/code/electron-sandbox/workbench/workbench.html)

[stychu]

Have you found solution? I have a similar error when I add component props to my custom Select.

Adding type: SingleValueProps<DataFactory, false> causes ts error

<Select
      {...props}
      options={data}
      onInputChange={setSearch}
      components={{
        SingleValue: ({
          children,
          ...props
        }: SingleValueProps<DataFactory, false>) => (
          <components.SingleValue {...props}>
            {props.data?.value}
          </components.SingleValue>
        ),
      }}
    />

   TS2322: Type
({children, ...props}: SingleValueProps<DataFactory, false>) => JSX.Element
is not assignable to type
ComponentType<SingleValueProps<any, boolean, GroupBase<unknown>>> | undefined
Type
({children, ...props}: SingleValueProps<DataFactory, false>) => JSX.Element
is not assignable to type
FunctionComponent<SingleValueProps<any, boolean, GroupBase<unknown>>>
Types of parameters __0 and props are incompatible.
Type 'SingleValueProps<any, boolean, GroupBase<unknown>>' is not assignable to type 'SingleValueProps<{ label: string; value: string; }, false, GroupBase<{ label: string; value: string; }>>'.
The types of selectProps.classNames.clearIndicator are incompatible between these types.
Type '((props: ClearIndicatorProps<any, boolean, GroupBase<unknown>>) => string) | undefined' is not assignable to type '((props: ClearIndicatorProps<{ label: string; value: string; }, false, GroupBase<{ label: string; value: string; }>>) => string) | undefined'.
Type '(props: ClearIndicatorProps<any, boolean, GroupBase<unknown>>) => string' is not assignable to type '(props: ClearIndicatorProps<{ label: string; value: string; }, false, GroupBase<{ label: string; value: string; }>>) => string'.
Types of parameters props and props are incompatible.
Type 'ClearIndicatorProps<{ label: string; value: string; }, false, GroupBase<{ label: string; value: string; }>>' is not assignable to type 'ClearIndicatorProps<any, boolean, GroupBase<unknown>>'.
The types of selectProps.ariaLiveMessages are incompatible between these types.
Type 'AriaLiveMessages<{ label: string; value: string; }, false, GroupBase<{ label: string; value: string; }>> | undefined' is not assignable to type 'AriaLiveMessages<any, boolean, GroupBase<unknown>> | undefined'.
Type 'AriaLiveMessages<{ label: string; value: string; }, false, GroupBase<{ label: string; value: string; }>>' is not assignable to type 'AriaLiveMessages<any, boolean, GroupBase<unknown>>'.
Type GroupBase<unknown> is not assignable to type GroupBase<{ label: string; value: string; }>