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 { 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 () => ( +