From 84600fa56163d48447dd2e11ffc29f44f0f8d876 Mon Sep 17 00:00:00 2001
From: Murali <mmrath@gmail.com>
Date: Sat, 13 Oct 2018 04:06:30 +1100
Subject: [PATCH] @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         |  4 +++-
 types/react-select/lib/theme.d.ts          |  5 +++++
 types/react-select/lib/types.d.ts          | 12 ++++++++++++
 types/react-select/test/examples/Theme.tsx | 21 +++++++++++++++++++++
 types/react-select/tsconfig.json           |  3 ++-
 5 files changed, 43 insertions(+), 2 deletions(-)
 create mode 100644 types/react-select/test/examples/Theme.tsx

diff --git a/types/react-select/lib/Select.d.ts b/types/react-select/lib/Select.d.ts
index f6e5eba96e..b6298efa50 100644
--- a/types/react-select/lib/Select.d.ts
+++ b/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 */
diff --git a/types/react-select/lib/theme.d.ts b/types/react-select/lib/theme.d.ts
index 7282dd20ad..25f9a44c85 100644
--- a/types/react-select/lib/theme.d.ts
+++ b/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);
diff --git a/types/react-select/lib/types.d.ts b/types/react-select/lib/types.d.ts
index 08ebfae965..f27f02a75a 100644
--- a/types/react-select/lib/types.d.ts
+++ b/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;
+}
diff --git a/types/react-select/test/examples/Theme.tsx b/types/react-select/test/examples/Theme.tsx
new file mode 100644
index 0000000000..3587b74c96
--- /dev/null
+++ b/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',
+      },
+    })}
+  />
+);
diff --git a/types/react-select/tsconfig.json b/types/react-select/tsconfig.json
index 8c7a1921bd..2b656dd7de 100644
--- a/types/react-select/tsconfig.json
+++ b/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"
     ]
 }