Feature/react select v2 update (#27837)

* updated parameter names in function signatures

* addressed return type of "CSS functions"

* simplified StylesConfig and SelectComponentsConfig

* updated type of base parameter in styleFn

* removed invalid property from HTML select element

types/react-select/lib/Creatable.d.ts

@@ -14,10 +14,10 @@ export interface CreatableProps<OptionType> {
   formatCreateLabel?: (inputValue: string) => Node;
   /* Determines whether the "create new ..." option should be displayed based on
      the current input value, select value and options array. */
-  isValidNewOption?: (a: string, b: ValueType<OptionType>, c: OptionsType<OptionType>) => boolean;
+  isValidNewOption?: (inputValue: string, value: ValueType<OptionType>, options: OptionsType<OptionType>) => boolean;
   /* Returns the data for the new option when it is created. Used to display the
      value, and is passed to `onChange`. */
-  getNewOptionData?: (a: string, b: Node) => OptionType;
+  getNewOptionData?: (inputValue: string, optionLabel: Node) => OptionType;
   /* If provided, this will be called with the input value when a new option is
      created, and `onChange` will **not** be called. Use this when you need more
      control over what happens when new options are created. */

types/react-select/lib/Select.d.ts

@@ -107,7 +107,7 @@ export interface Props<OptionType> {
   /* Formats group labels in the menu as React components */
   formatGroupLabel?: typeof formatGroupLabel;
   /* Formats option labels in the menu and control as React components */
-  formatOptionLabel?: (a: OptionType, b: FormatOptionLabelMeta<OptionType>) => Node;
+  formatOptionLabel?: (option: OptionType, labelMeta: FormatOptionLabelMeta<OptionType>) => Node;
   /* Resolves option data to a string to be displayed as the label by components */
   getOptionLabel?: typeof getOptionLabel;
   /* Resolves option data to a string to compare options and specify value attributes */
@@ -129,9 +129,9 @@ export interface Props<OptionType> {
   /* Is the select in a state of loading (async) */
   isLoading?: boolean;
   /* Override the built-in logic to detect whether an option is disabled */
-  isOptionDisabled?: (a: OptionType, b: OptionsType<OptionType>) => boolean | false;
+  isOptionDisabled?: (option: OptionType, options: OptionsType<OptionType>) => boolean | false;
   /* Override the built-in logic to detect whether an option is selected */
-  isOptionSelected?: (a: OptionType, b: OptionsType<OptionType>) => boolean;
+  isOptionSelected?: (option: OptionType, options: OptionsType<OptionType>) => boolean;
   /* Support multiple selected options */
   isMulti?: boolean;
   /* Is the select direction right-to-left */

types/react-select/lib/components/Control.d.ts

@@ -22,7 +22,7 @@ export type ControlProps<OptionType> = CommonProps<OptionType> &
     },
   };
 
-export function css(state: State): any; // TODO css type
+export function css(state: State): React.CSSProperties;
 
 declare const Control: ComponentType<ControlProps<any>>;
 

types/react-select/lib/components/Group.d.ts

@@ -13,11 +13,11 @@ interface ComponentProps {
 }
 export type GroupProps<OptionType> = CommonProps<OptionType> & ComponentProps;
 
-export function groupCSS(): any; // TODO css type
+export function groupCSS(): React.CSSProperties;
 
 export const Group: ComponentType<GroupProps<any>>;
 
-export function groupHeadingCSS(): any; // TODO css type
+export function groupHeadingCSS(): React.CSSProperties;
 
 export const GroupHeading: ComponentType<any>;
 

types/react-select/lib/components/Input.d.ts

@@ -15,8 +15,8 @@ export type InputProps = PropsWithStyles & {
   className?: string,
 };
 
-export function inputCSS(props: InputProps): any; // TODO css type;
-export function inputStyle(isHidden: boolean): any; // TODO css type
+export function inputCSS(props: InputProps): React.CSSProperties;
+export function inputStyle(isHidden: boolean): React.CSSProperties;
 
 export const Input: ComponentType<InputProps>;
 

types/react-select/lib/components/Menu.d.ts

@@ -64,7 +64,7 @@ export type MenuProps<OptionType> = CommonProps<OptionType> & {
   menuShouldScrollIntoView: boolean,
 };
 
-export function menuCSS(state: MenuState): any; // TODO css type
+export function menuCSS(state: MenuState): React.CSSProperties;
 
 export class Menu<OptionType> extends Component<MenuProps<OptionType>, MenuState> {
   static contextTypes: {
@@ -96,15 +96,15 @@ export interface MenuListProps {
 export type MenuListComponentProps<OptionType> = CommonProps<OptionType> &
   MenuListProps &
   MenuListState;
-export function menuListCSS(state: MenuState): any; // TODO css type
+export function menuListCSS(state: MenuState): React.CSSProperties;
 export const MenuList: ComponentType<MenuListComponentProps<any>>;
 
 // ==============================
 // Menu Notices
 // ==============================
 
-export function noOptionsMessageCSS(): any; // TODO css type
-export function loadingMessageCSS(): any; // TODO css type
+export function noOptionsMessageCSS(): React.CSSProperties;
+export function loadingMessageCSS(): React.CSSProperties;
 
 export type NoticeProps<OptionType> = CommonProps<OptionType> & {
   /** The children to be rendered. */
@@ -143,7 +143,7 @@ interface PortalStyleArgs {
   rect: RectType;
 }
 
-export function menuPortalCSS(args: PortalStyleArgs): any; // TODO css type
+export function menuPortalCSS(args: PortalStyleArgs): React.CSSProperties;
 
 export class MenuPortal<OptionType> extends Component<MenuPortalProps<OptionType>, MenuPortalState> {
   static childContextTypes: {

types/react-select/lib/components/MultiValue.d.ts

@@ -18,9 +18,9 @@ export type MultiValueProps<OptionType> = CommonProps<OptionType> &{
   },
 };
 
-export function multiValueCSS(): any; // TODO css type
-export function multiValueLabelCSS(props: MultiValueProps<any>): any; // TODO css type
-export function multiValueRemoveCSS(props: MultiValueProps<any>): any; // TODO css type
+export function multiValueCSS(): React.CSSProperties;
+export function multiValueLabelCSS(props: MultiValueProps<any>): React.CSSProperties;
+export function multiValueRemoveCSS(props: MultiValueProps<any>): React.CSSProperties;
 
 export interface MultiValueGenericProps<OptionType> {
   children: Node;

types/react-select/lib/components/Option.d.ts

@@ -34,7 +34,7 @@ export type OptionProps<OptionType> = PropsWithStyles &
     type: 'option',
   };
 
-export function optionCSS(state: State): any; // TODO css type
+export function optionCSS(state: State): React.CSSProperties;
 
 export const Option: ComponentType<OptionProps<any>>;
 

types/react-select/lib/components/Placeholder.d.ts

@@ -10,7 +10,7 @@ export type PlaceholderProps<OptionType> = CommonProps<OptionType> & {
   innerProps: { [key: string]: any },
 };
 
-export function placeholderCSS(): any; // TODO css type
+export function placeholderCSS(): React.CSSProperties;
 
 export const Placeholder: ComponentType<PlaceholderProps<any>>;
 

types/react-select/lib/components/SingleValue.d.ts

@@ -16,7 +16,7 @@ interface ValueProps<OptionType> {
 }
 export type SingleValueProps<OptionType> = CommonProps<OptionType> & ValueProps<OptionType> & State;
 
-export function css(props: SingleValueProps<any>): any; // TODO css type
+export function css(props: SingleValueProps<any>): React.CSSProperties;
 
 export const SingleValue: ComponentType<SingleValueProps<any>>;
 

types/react-select/lib/components/containers.d.ts

@@ -20,7 +20,7 @@ export type ContainerProps<OptionType> = CommonProps<OptionType> &
     /** Inner props to be passed down to the container. */
     innerProps: { onKeyDown: KeyboardEventHandler },
   };
-export function containerCSS(state: ContainerState): any; // TODO css type;
+export function containerCSS(state: ContainerState): React.CSSProperties;
 export const SelectContainer: ComponentType<ContainerProps<any>>;
 
 // ==============================
@@ -35,7 +35,7 @@ export type ValueContainerProps<OptionType> = CommonProps<OptionType> & {
   /** The children to be rendered. */
   children: Node,
 };
-export function valueContainerCSS(): any; // TODO css type;
+export function valueContainerCSS(): React.CSSProperties;
 export class ValueContainer extends Component<ValueContainerProps<any>> {}
 
 // ==============================
@@ -53,5 +53,5 @@ export type IndicatorContainerProps<OptionType> = CommonProps<OptionType> &
     children: Node,
   };
 
-export function indicatorsContainerCSS(): any; // TODO css type;
+export function indicatorsContainerCSS(): React.CSSProperties;
 export const IndicatorsContainer: ComponentType<IndicatorContainerProps<any>>;

types/react-select/lib/components/index.d.ts

@@ -79,33 +79,7 @@ export interface SelectComponents<OptionType> {
   ValueContainer: ComponentType<ValueContainerProps<OptionType>>;
 }
 
-export interface SelectComponentsConfig<OptionType> {
-  ClearIndicator?: IndicatorComponentType<OptionType> | null;
-  Control?: ComponentType<ControlProps<OptionType>>;
-  DropdownIndicator?: IndicatorComponentType<OptionType> | null;
-  DownChevron?: ComponentType<any>;
-  CrossIcon?: ComponentType<any>;
-  Group?: ComponentType<GroupProps<OptionType>>;
-  GroupHeading?: ComponentType<any>;
-  IndicatorsContainer?: ComponentType<IndicatorContainerProps<OptionType>>;
-  IndicatorSeparator?: IndicatorComponentType<OptionType> | null;
-  Input?: ComponentType<InputProps>;
-  LoadingIndicator?: ComponentType<LoadingIconProps<OptionType>> | null;
-  Menu?: ComponentType<MenuProps<OptionType>>;
-  MenuList?: ComponentType<MenuListComponentProps<any>>;
-  MenuPortal?: ComponentType<MenuPortalProps<any>>;
-  LoadingMessage?: ComponentType<NoticeProps<any>>;
-  NoOptionsMessage?: ComponentType<NoticeProps<any>>;
-  MultiValue?: ComponentType<MultiValueProps<OptionType>>;
-  MultiValueContainer?: ComponentType<any>;
-  MultiValueLabel?: ComponentType<any>;
-  MultiValueRemove?: ComponentType<any>;
-  Option?: ComponentType<OptionProps<OptionType>>;
-  Placeholder?: ComponentType<PlaceholderProps<OptionType>>;
-  SelectContainer?: ComponentType<ContainerProps<OptionType>>;
-  SingleValue?: ComponentType<SingleValueProps<OptionType>>;
-  ValueContainer?: ComponentType<ValueContainerProps<OptionType>>;
-}
+export type SelectComponentsConfig<OptionType> = Partial<SelectComponents<OptionType>>;
 
 export namespace components {
   const ClearIndicator: IndicatorComponentType<any> | null;

types/react-select/lib/components/indicators.d.ts

@@ -25,7 +25,7 @@ export type IndicatorProps<OptionType> = CommonProps<OptionType> & {
   isRtl: boolean,
 };
 
-export type baseCSS = (props: IndicatorProps<any>) => any; // TODO css type
+export type baseCSS = (props: IndicatorProps<any>) => React.CSSProperties;
 
 export const dropdownIndicatorCSS: baseCSS;
 export const DropdownIndicator: ComponentType<IndicatorProps<any>>;
@@ -39,7 +39,7 @@ export const ClearIndicator: ComponentType<IndicatorProps<any>>;
 
 export interface SeparatorState { isDisabled: boolean; }
 
-export function indicatorSeparatorCSS(state: SeparatorState): any; // TODO css type
+export function indicatorSeparatorCSS(state: SeparatorState): React.CSSProperties;
 
 export const IndicatorSeparator: ComponentType<IndicatorProps<any>>;
 
@@ -50,7 +50,7 @@ export const IndicatorSeparator: ComponentType<IndicatorProps<any>>;
 export function loadingIndicatorCSS(state: {
   isFocused: boolean,
   size: number,
-}): any; // TODO css type
+}): React.CSSProperties;
 
 export type LoadingIconProps<OptionType> = {
   /** Props that will be passed on to the children. */

types/react-select/lib/styles.d.ts

@@ -27,6 +27,7 @@ import {
   multiValueLabelCSS,
   multiValueRemoveCSS,
 } from './components/MultiValue';
+import { CSSProperties } from 'react';
 
 export interface Props { [key: string]: any; }
 
@@ -35,7 +36,7 @@ export interface Props { [key: string]: any; }
  * @param state -- the component's current state e.g. `isFocused`
  * @returns
  */
-export type styleFn = (base: any, state: any) => any;
+export type styleFn = (base: CSSProperties, state: any) => CSSProperties;
 
 export interface Styles {
   clearIndicator?: styleFn;
@@ -63,37 +64,12 @@ export interface Styles {
   singleValue?: styleFn;
   valueContainer: styleFn;
 }
-export interface StylesConfig {
-  clearIndicator?: styleFn;
-  container?: styleFn;
-  control?: styleFn;
-  dropdownIndicator?: styleFn;
-  group?: styleFn;
-  groupHeading?: styleFn;
-  indicatorsContainer?: styleFn;
-  indicatorSeparator?: styleFn;
-  input?: styleFn;
-  loadingIndicator?: styleFn;
-  // TODO loadingMessageCSS?: styleFn;
-  loadingMessage?: styleFn;
-  menu?: styleFn;
-  menuList?: styleFn;
-  menuPortal?: styleFn;
-  multiValue?: styleFn;
-  multiValueLabel?: styleFn;
-  multiValueRemove?: styleFn;
-  // TODO noOptionsMessageCSS?: styleFn;
-  noOptionsMessage?: styleFn;
-  option?: styleFn;
-  placeholder?: styleFn;
-  singleValue?: styleFn;
-  valueContainer?: styleFn;
-}
-export type GetStyles = (a: string, b: Props) => any;
+export type StylesConfig = Partial<Styles>;
+export type GetStyles = (a: string, b: Props) => CSSProperties;
 
 export const defaultStyles: Styles;
 
 // Merge Utility
 // Allows consumers to extend a base Select with additional styles
 
-export function mergeStyles(source: any, target: any): any;
+export function mergeStyles(source: any, target: any): CSSProperties;

types/react-select/test/examples/Experimental.tsx

@@ -111,14 +111,14 @@ const Group = (props: any) => {
       >
         {label}
       </Heading>
-      <div style={daysHeaderStyles}>// TODO css type
+      <div style={daysHeaderStyles}>
         {days.map((day, i) => (
-          <span key={`${i}-${day}`} style={daysHeaderItemStyles}>// TODO css type
+          <span key={`${i}-${day}`} style={daysHeaderItemStyles}>
             {day}
           </span>
         ))}
       </div>
-      <div style={daysContainerStyles}>{children}</div>// TODO css type
+      <div style={daysContainerStyles}>{children}</div>
     </div>
   );
 };

types/react-select/test/examples/MenuPortal.tsx

@@ -52,7 +52,6 @@ export default class MenuPortal extends React.Component<any, State> {
             />
             <Note Tag="label">
               <select
-                // TODO type="radio"
                 onChange={this.setPlacement}
                 value={portalPlacement}
                 id="cypress-portalled__radio-bottom"

types/react-select/test/examples/Popout.tsx

@@ -89,7 +89,7 @@ const Blanket = (props: any) => (
   />
 );
 const Dropdown = ({ children, isOpen, target, onClose }: any) => (
-  <div style={{ position: 'relative' }}>// TODO css type
+  <div style={{ position: 'relative' }}>
     {target}
     {isOpen ? <Menu>{children}</Menu> : null}
     {isOpen ? <Blanket onClick={onClose} /> : null}
@@ -106,7 +106,7 @@ const Svg = (p: any) => (
   />
 );
 const DropdownIndicator = () => (
-  <div style={{ color: colors.neutral20, height: 24, width: 32 }}>// TODO css type
+  <div style={{ color: colors.neutral20, height: 24, width: 32 }}>
     <Svg>
       <path
         d="M16.436 15.085l3.94 4.01a1 1 0 0 1-1.425 1.402l-3.938-4.006a7.5 7.5 0 1 1 1.423-1.406zM10.5 16a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11z"