@types/react-select: add theme property introduced in react-select v2.1 [WIP] (#29669)

* add theme property introduced in react-select 2.1

* fix lint errors

* added theme.tsx to tsconfig

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

@@ -25,7 +25,7 @@ import {
   SelectComponentsConfig,
 } from './components/index';
 import { StylesConfig } from './styles';
-
+import { ThemeConfig } from './theme';
 import {
   ActionMeta,
   ActionTypes,
@@ -193,6 +193,8 @@ export interface Props<OptionType> {
   screenReaderStatus?: (obj: { count: number }) => string;
   /* Style modifier methods */
   styles?: StylesConfig;
+  /* Theme modifier method */
+  theme?: ThemeConfig;
   /* Sets the tabIndex attribute on the input */
   tabIndex?: string | null;
   /* Select the currently focused option when the user presses tab */

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

@@ -1,3 +1,4 @@
+import { Theme } from './types';
 export const borderRadius: number;
 
 export const colors: {
@@ -51,3 +52,7 @@ export const spacing: {
   /* The amount of space between the control and menu */
   menuGutter: number,
 };
+
+export const defaultTheme: Theme;
+
+export type ThemeConfig = Theme | ((theme: Theme) => Theme);

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

@@ -98,3 +98,15 @@ export type OptionProps = PropsWithInnerRef & {
   onMouseOver: MouseEventHandler,
   value: any,
 };
+
+export interface ThemeSpacing {
+  baseUnit: number;
+  controlHeight: number;
+  menuGutter: number;
+}
+
+export interface Theme {
+  borderRadius: number;
+  colors: { [key: string]: string };
+  spacing: ThemeSpacing;
+}

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

@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+import { flavourOptions } from '../data';
+import Select from 'react-select';
+
+export default () => (
+  <Select
+    defaultValue={flavourOptions[2]}
+    options={flavourOptions}
+    theme={(theme) => ({
+      ...theme,
+      borderRadius: 0,
+      colors: {
+      ...theme.colors,
+        text: 'orangered',
+        primary25: 'hotpink',
+        primary: 'black',
+      },
+    })}
+  />
+);

types/react-select/tsconfig.json

@@ -99,6 +99,7 @@
         "test/examples/OnSelectResetsInput.tsx",
         "test/examples/Popout.tsx",
         "test/examples/StyledMulti.tsx",
-        "test/examples/StyledSingle.tsx"
+        "test/examples/StyledSingle.tsx",
+        "test/examples/Theme.tsx"
     ]
 }