From 7d077bf41894f995c58bc9a7c3bdfcb8065b38ac Mon Sep 17 00:00:00 2001
From: Claas Ahlrichs <claasahl@users.noreply.github.com>
Date: Fri, 3 Aug 2018 20:49:22 +0200
Subject: [PATCH] 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         |  4 +--
 types/react-select/lib/Select.d.ts            |  6 ++--
 .../react-select/lib/components/Control.d.ts  |  2 +-
 types/react-select/lib/components/Group.d.ts  |  4 +--
 types/react-select/lib/components/Input.d.ts  |  4 +--
 types/react-select/lib/components/Menu.d.ts   | 10 +++---
 .../lib/components/MultiValue.d.ts            |  6 ++--
 types/react-select/lib/components/Option.d.ts |  2 +-
 .../lib/components/Placeholder.d.ts           |  2 +-
 .../lib/components/SingleValue.d.ts           |  2 +-
 .../lib/components/containers.d.ts            |  6 ++--
 types/react-select/lib/components/index.d.ts  | 28 +--------------
 .../lib/components/indicators.d.ts            |  6 ++--
 types/react-select/lib/styles.d.ts            | 34 +++----------------
 .../test/examples/Experimental.tsx            |  6 ++--
 .../react-select/test/examples/MenuPortal.tsx |  1 -
 types/react-select/test/examples/Popout.tsx   |  4 +--
 17 files changed, 38 insertions(+), 89 deletions(-)

diff --git a/types/react-select/lib/Creatable.d.ts b/types/react-select/lib/Creatable.d.ts
index c194441a8b..ac67bf039c 100644
--- a/types/react-select/lib/Creatable.d.ts
+++ b/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. */
diff --git a/types/react-select/lib/Select.d.ts b/types/react-select/lib/Select.d.ts
index 0298ea0288..3e89a139ac 100644
--- a/types/react-select/lib/Select.d.ts
+++ b/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 */
diff --git a/types/react-select/lib/components/Control.d.ts b/types/react-select/lib/components/Control.d.ts
index 019f75bee9..c48dee76d4 100644
--- a/types/react-select/lib/components/Control.d.ts
+++ b/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>>;
 
diff --git a/types/react-select/lib/components/Group.d.ts b/types/react-select/lib/components/Group.d.ts
index d37964c0b4..9e05263224 100644
--- a/types/react-select/lib/components/Group.d.ts
+++ b/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>;
 
diff --git a/types/react-select/lib/components/Input.d.ts b/types/react-select/lib/components/Input.d.ts
index 16f07491d2..9f79ffb1e0 100644
--- a/types/react-select/lib/components/Input.d.ts
+++ b/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>;
 
diff --git a/types/react-select/lib/components/Menu.d.ts b/types/react-select/lib/components/Menu.d.ts
index 85b5ef0fae..d91288cdeb 100644
--- a/types/react-select/lib/components/Menu.d.ts
+++ b/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: {
diff --git a/types/react-select/lib/components/MultiValue.d.ts b/types/react-select/lib/components/MultiValue.d.ts
index 495b4fc96f..ac304bd42a 100644
--- a/types/react-select/lib/components/MultiValue.d.ts
+++ b/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;
diff --git a/types/react-select/lib/components/Option.d.ts b/types/react-select/lib/components/Option.d.ts
index 743083fff8..81ab38e401 100644
--- a/types/react-select/lib/components/Option.d.ts
+++ b/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>>;
 
diff --git a/types/react-select/lib/components/Placeholder.d.ts b/types/react-select/lib/components/Placeholder.d.ts
index f674f74cc2..6f674d70a8 100644
--- a/types/react-select/lib/components/Placeholder.d.ts
+++ b/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>>;
 
diff --git a/types/react-select/lib/components/SingleValue.d.ts b/types/react-select/lib/components/SingleValue.d.ts
index c5f922d84c..c727b2242e 100644
--- a/types/react-select/lib/components/SingleValue.d.ts
+++ b/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>>;
 
diff --git a/types/react-select/lib/components/containers.d.ts b/types/react-select/lib/components/containers.d.ts
index 373a552062..e75de6d756 100644
--- a/types/react-select/lib/components/containers.d.ts
+++ b/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>>;
diff --git a/types/react-select/lib/components/index.d.ts b/types/react-select/lib/components/index.d.ts
index 7d493a562a..d9d505b119 100644
--- a/types/react-select/lib/components/index.d.ts
+++ b/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;
diff --git a/types/react-select/lib/components/indicators.d.ts b/types/react-select/lib/components/indicators.d.ts
index d27cc518da..15df6d3748 100644
--- a/types/react-select/lib/components/indicators.d.ts
+++ b/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. */
diff --git a/types/react-select/lib/styles.d.ts b/types/react-select/lib/styles.d.ts
index 9c5178fed1..e9c63d07b8 100644
--- a/types/react-select/lib/styles.d.ts
+++ b/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;
diff --git a/types/react-select/test/examples/Experimental.tsx b/types/react-select/test/examples/Experimental.tsx
index c2b8e42f95..c0bbf3c6ad 100644
--- a/types/react-select/test/examples/Experimental.tsx
+++ b/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>
   );
 };
diff --git a/types/react-select/test/examples/MenuPortal.tsx b/types/react-select/test/examples/MenuPortal.tsx
index 32590acfb1..b7360e6fff 100644
--- a/types/react-select/test/examples/MenuPortal.tsx
+++ b/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"
diff --git a/types/react-select/test/examples/Popout.tsx b/types/react-select/test/examples/Popout.tsx
index 80bccce933..d795d00f62 100644
--- a/types/react-select/test/examples/Popout.tsx
+++ b/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"