From edbbc0dd567edfd88d90b98c51dbbfa10919a215 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Martynas=20=C5=BDilinskas?= <martiogalaltu@gmail.com>
Date: Tue, 1 Aug 2017 00:54:59 +0300
Subject: [PATCH] [react-select] Fixed and updated (#18287)

* Added tslint. Fixed some dtslint errors.

* Changed from empty style object to React.CSSProperties.

* Changed from any to dictionary props.

* Created prop handlers types.

* Fixed props return types and Handlers return types.

* Added options. Added missing focus method in ReactSelect.

* Rewritten tests.
---
 types/react-select/index.d.ts             | 165 +++++----
 types/react-select/react-select-tests.tsx | 431 +++++++---------------
 types/react-select/tslint.json            |   1 +
 3 files changed, 231 insertions(+), 366 deletions(-)
 create mode 100644 types/react-select/tslint.json

diff --git a/types/react-select/index.d.ts b/types/react-select/index.d.ts
index fd07b4545c..24ef712a05 100644
--- a/types/react-select/index.d.ts
+++ b/types/react-select/index.d.ts
@@ -1,6 +1,12 @@
 // Type definitions for react-select 1.0
 // Project: https://github.com/JedWatson/react-select
-// Definitions by: ESQUIBET Hugo <https://github.com/Hesquibet/>, Gilad Gray <https://github.com/giladgray/>, Izaak Baker <https://github.com/iebaker/>, Tadas Dailyda <https://github.com/skirsdeda/>, Mark Vujevits <https://github.com/vujevits/>, Mike Deverell <https://github.com/devrelm/>
+// Definitions by: ESQUIBET Hugo <https://github.com/Hesquibet/>
+//                 Gilad Gray <https://github.com/giladgray/>
+//                 Izaak Baker <https://github.com/iebaker/>
+//                 Tadas Dailyda <https://github.com/skirsdeda/>
+//                 Mark Vujevits <https://github.com/vujevits/>
+//                 Mike Deverell <https://github.com/devrelm/>
+//                 MartynasZilinskas <https://github.com/MartynasZilinskas>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.3
 
@@ -9,21 +15,61 @@ import * as React from 'react';
 export = ReactSelectClass;
 
 declare namespace ReactSelectClass {
-    export interface AutocompleteResult {
-        /** the search-results to be displayed  */
-        options: Option[],
-        /** Should be set to true, if and only if a longer query with the same prefix
+    // Other components
+    class Creatable extends React.Component<ReactCreatableSelectProps> { }
+    class Async extends React.Component<ReactAsyncSelectProps> { }
+    class AsyncCreatable extends React.Component<ReactAsyncSelectProps & ReactCreatableSelectProps> { }
+
+    // Handlers
+    type FocusOptionHandler = (option: Option) => void;
+    type SelectValueHandler = (option: Option) => void;
+    type ArrowRendererHandler = (props: ArrowRendererProps) => JSX.Element;
+    type FilterOptionHandler = (option: Option, filter: string) => Option;
+    type FilterOptionsHandler = (options: Options, filter: string, currentValues: Options) => Options;
+    type InputRendererHandler = (props: { [key: string]: any }) => JSX.Element;
+    type MenuRendererHandler = (props: MenuRendererProps) => JSX.Element;
+    type OnCloseHandler = () => void;
+    type OnInputChangeHandler = (inputValue: string) => void;
+    type OnInputKeyDownHandler = React.KeyboardEventHandler<HTMLDivElement>;
+    type OnMenuScrollToBottomHandler = () => void;
+    type OnOpenHandler = () => void;
+    type OnFocusHandler = React.FocusEventHandler<HTMLDivElement>;
+    type OnBlurHandler = React.FocusEventHandler<HTMLDivElement>;
+    type OptionRendererHandler = (option: Option) => JSX.Element;
+    type ValueRendererHandler = (option: Option) => JSX.Element;
+    type OnValueClickHandler = (value: string, event: React.MouseEvent<HTMLAnchorElement>) => void;
+    type IsOptionUniqueHandler = (arg: { option: Option, options: Options, labelKey: string, valueKey: string }) => boolean;
+    type IsValidNewOptionHandler = (arg: { label: string }) => boolean;
+    type NewOptionCreatorHandler = (arg: { label: string, labelKey: string, valueKey: string }) => Option;
+    type PromptTextCreatorHandler = (filterText: string) => string;
+    type ShouldKeyDownEventCreateNewOptionHandler = (arg: { keyCode: number }) => boolean;
+
+    type OnChangeSingleHandler<TValue = OptionValues> = OnChangeHandler<Option<TValue>>;
+    type OnChangeMultipleHandler<TValue = OptionValues> = OnChangeHandler<Options<TValue>>;
+    type OnChangeHandler<TOption = Option | Options> = (newValue: TOption | null) => void;
+
+    type LoadOptionsHandler = LoadOptionsAsyncHandler | LoadOptionsLegacyHandler;
+    type LoadOptionsAsyncHandler = (input: string) => Promise<AutocompleteResult>;
+    type LoadOptionsLegacyHandler = (input: string, callback: (err: any, result: AutocompleteResult) => void) => void;
+
+    interface AutocompleteResult {
+        /** The search-results to be displayed  */
+        options: Options;
+        /**
+         * Should be set to true, if and only if a longer query with the same prefix
          * would return a subset of the results
          * If set to true, more specific queries will not be sent to the server.
-         **/
+         */
         complete: boolean;
     }
 
-    export interface Option {
+    type Options<TValue = OptionValues> = Array<Option<TValue>>;
+
+    interface Option<TValue = OptionValues> {
         /** Text for rendering */
         label?: string;
         /** Value for searching */
-        value?: string | number | boolean;
+        value?: TValue;
         /**
          * Allow this option to be cleared
          * @default true
@@ -36,7 +82,9 @@ declare namespace ReactSelectClass {
         disabled?: boolean;
     }
 
-    export interface MenuRendererProps {
+    type OptionValues = string | number | boolean;
+
+    interface MenuRendererProps {
         /**
          * The currently focused option; should be visible in the menu by default.
          * default {}
@@ -46,7 +94,7 @@ declare namespace ReactSelectClass {
         /**
          * Callback to focus a new option; receives the option as a parameter.
          */
-        focusOption: (option: Option) => void;
+        focusOption: FocusOptionHandler;
 
         /**
          * Option labels are accessible with this string key.
@@ -56,27 +104,27 @@ declare namespace ReactSelectClass {
         /**
          * Ordered array of options to render.
          */
-        options: Option[];
+        options: Options;
 
         /**
          * Callback to select a new option; receives the option as a parameter.
          */
-        selectValue: (option: Option) => void;
+        selectValue: SelectValueHandler;
 
         /**
          * Array of currently selected options.
          */
-        valueArray: Option[];
+        valueArray: Options;
     }
 
-    export interface ArrowRendererProps {
+    interface ArrowRendererProps {
         /**
          * Arrow mouse down event handler.
          */
-        onMouseDown: React.MouseEventHandler<{}>;
+        onMouseDown: React.MouseEventHandler<any>;
     }
 
-    export interface ReactSelectProps extends React.Props<ReactSelectClass> {
+    interface ReactSelectProps extends React.Props<ReactSelectClass> {
         /**
          * text to display when `allowCreate` is true.
          * @default 'Add "{label}"?'
@@ -86,7 +134,7 @@ declare namespace ReactSelectClass {
          * renders a custom drop-down arrow to be shown in the right-hand side of the select.
          * @default undefined
          */
-        arrowRenderer?: (props: ArrowRendererProps) => React.ReactElement<any>;
+        arrowRenderer?: ArrowRendererHandler;
         /**
          * blurs the input element after a selection has been made. Handy for lowering the keyboard on mobile devices.
          * @default false
@@ -149,11 +197,11 @@ declare namespace ReactSelectClass {
         /**
          * method to filter a single option
          */
-        filterOption?: (option: Option, filter: string) => Option;
+        filterOption?: FilterOptionHandler;
         /**
          * method to filter the options array
          */
-        filterOptions?: (options: Array<Option>, filter: string, currentValues: Array<Option>) => Array<Option>;
+        filterOptions?: FilterOptionsHandler;
         /**
          * whether to strip diacritics when filtering
          * @default true
@@ -168,11 +216,11 @@ declare namespace ReactSelectClass {
          * custom attributes for the Input (in the Select-control) e.g: {'data-foo': 'bar'}
          * @default {}
          */
-        inputProps?: Object;
+        inputProps?: { [key: string]: any };
         /**
          * renders a custom input
          */
-        inputRenderer?: (props: Object) => React.ReactElement<any>;
+        inputRenderer?: InputRendererHandler;
         /**
          * allows for synchronization of component id's on server and client.
          * @see https://github.com/JedWatson/react-select/pull/1105
@@ -212,15 +260,15 @@ declare namespace ReactSelectClass {
         /**
          * optional style to apply to the menu container
          */
-        menuContainerStyle?: {}
+        menuContainerStyle?: React.CSSProperties;
         /**
          * renders a custom menu with options
          */
-        menuRenderer?: (props: MenuRendererProps) => React.ReactElement<any>;
+        menuRenderer?: MenuRendererHandler;
         /**
          * optional style to apply to the menu
          */
-        menuStyle?: {}
+        menuStyle?: React.CSSProperties;
         /**
          * multi-value input
          * @default false
@@ -238,7 +286,7 @@ declare namespace ReactSelectClass {
         /**
          * onBlur handler: function (event) {}
          */
-        onBlur?: React.FocusEventHandler<{}>;
+        onBlur?: OnBlurHandler;
         /**
          * whether to clear input on blur or not
          * @default true
@@ -247,35 +295,31 @@ declare namespace ReactSelectClass {
         /**
          * onChange handler: function (newValue) {}
          */
-        onChange?: (newValue: Option | Option[] | null) => void;
+        onChange?: OnChangeHandler;
         /**
          * fires when the menu is closed
          */
-        onClose?: () => void;
+        onClose?: OnCloseHandler;
         /**
          * onFocus handler: function (event) {}
          */
-        onFocus?: React.FocusEventHandler<{}>;
+        onFocus?: OnFocusHandler;
         /**
          * onInputChange handler: function (inputValue) {}
          */
-        onInputChange?: (inputValue: string) => void;
+        onInputChange?: OnInputChangeHandler;
         /**
          * onInputKeyDown handler: function (keyboardEvent) {}
          */
-        onInputKeyDown?: (event: KeyboardEvent) => void;
+        onInputKeyDown?: OnInputKeyDownHandler;
         /**
          * fires when the menu is scrolled to the bottom; can be used to paginate options
          */
-        onMenuScrollToBottom?: () => void;
+        onMenuScrollToBottom?: OnMenuScrollToBottomHandler;
         /**
          * fires when the menu is opened
          */
-        onOpen?: () => void;
-        /**
-         * @deprecated use onValueClick isntead
-         */
-        onOptionLabelClick?: (value: string, event: Event) => void;
+        onOpen?: OnOpenHandler;
         /**
          * boolean to enable opening dropdown when focused
          * @default false
@@ -293,21 +337,21 @@ declare namespace ReactSelectClass {
         /**
          * option component to render in dropdown
          */
-        optionComponent?: React.ComponentClass<any>;
+        optionComponent?: React.ComponentType;
         /**
          * function which returns a custom way to render the options in the menu
          */
-        optionRenderer?: (option: Option) => JSX.Element;
+        optionRenderer?: OptionRendererHandler;
         /**
          * array of Select options
          * @default false
          */
-        options?: Array<Option>;
+        options?: Options;
         /**
          * field placeholder, displayed when there's no value
          * @default "Select..."
          */
-        placeholder?: string | React.ReactElement<any>;
+        placeholder?: string | JSX.Element;
         /**
          * applies HTML5 required attribute when needed
          * @default false
@@ -334,7 +378,7 @@ declare namespace ReactSelectClass {
         /**
          * initial field value
          */
-        value?: Option | Option[] | string | string[] | number | number[] | boolean;
+        value?: Option | Options | string | string[] | number | number[] | boolean;
         /**
          * the option property to use for the value
          * @default "value"
@@ -344,11 +388,11 @@ declare namespace ReactSelectClass {
          * function which returns a custom way to render the value selected
          * @default false
          */
-        valueRenderer?: (option: Option) => JSX.Element;
+        valueRenderer?: ValueRendererHandler;
         /**
          *  optional style to apply to the control
          */
-        style?: any;
+        style?: React.CSSProperties;
 
         /**
          *  optional tab index of the control
@@ -358,17 +402,17 @@ declare namespace ReactSelectClass {
         /**
          *  value component to render
          */
-        valueComponent?: React.ComponentClass<any>;
+        valueComponent?: React.ComponentType;
 
         /**
          *  optional style to apply to the component wrapper
          */
-        wrapperStyle?: any;
+        wrapperStyle?: React.CSSProperties;
 
         /**
          * onClick handler for value labels: function (value, event) {}
          */
-        onValueClick?: (value: string, event: Event) => void;
+        onValueClick?: OnValueClickHandler;
 
         /**
          *  pass the value to onChange as a simple value (legacy pre 1.0 mode), defaults to false
@@ -376,36 +420,35 @@ declare namespace ReactSelectClass {
         simpleValue?: boolean;
     }
 
-    export interface ReactCreatableSelectProps extends ReactSelectProps {
+    interface ReactCreatableSelectProps extends ReactSelectProps {
         /**
          * Searches for any matching option within the set of options. This function prevents
          * duplicate options from being created.
          */
-        isOptionUnique?: (arg: { option: Option, options: Option[], labelKey: string, valueKey: string }) => boolean;
+        isOptionUnique?: IsOptionUniqueHandler;
 
         /**
          * Determines if the current input text represents a valid option.
          */
-        isValidNewOption?: (arg: { label: string }) => boolean;
+        isValidNewOption?: IsValidNewOptionHandler;
 
         /**
          * factory to create new options
          */
-        newOptionCreator?: (arg: { label: string, labelKey: string, valueKey: string }) => Option;
+        newOptionCreator?: NewOptionCreatorHandler;
 
         /**
          * Creates prompt/placeholder for option text.
          */
-        promptTextCreator?: (filterText: string) => string;
+        promptTextCreator?: PromptTextCreatorHandler;
 
         /**
          * Decides if a keyDown event (eg its 'keyCode') should result in the creation of a new option.
          */
-        shouldKeyDownEventCreateNewOption?: (arg: { keyCode: number }) => boolean;
+        shouldKeyDownEventCreateNewOption?: ShouldKeyDownEventCreateNewOptionHandler;
     }
 
-
-    export interface ReactAsyncSelectProps extends ReactSelectProps {
+    interface ReactAsyncSelectProps extends ReactSelectProps {
         /**
          * Whether to auto-load the default async options set.
          */
@@ -414,7 +457,7 @@ declare namespace ReactSelectClass {
         /**
          *  object to use to cache results; can be null to disable cache
          */
-        cache?: Object | boolean;
+        cache?: { [key: string]: any } | boolean;
 
         /**
          *  whether to strip diacritics when filtering (shared with Select)
@@ -434,9 +477,7 @@ declare namespace ReactSelectClass {
         /**
          *  function to call to load options asynchronously
          */
-        loadOptions:
-            | ((input: string) => Promise<AutocompleteResult>)
-            | ((input: string, callback: (err: any, result: AutocompleteResult) => void) => void);
+        loadOptions: LoadOptionsHandler;
 
         /**
          *  replaces the placeholder while options are loading
@@ -469,10 +510,6 @@ declare namespace ReactSelectClass {
     }
 }
 
-declare class ReactSelectClass extends React.Component<ReactSelectClass.ReactSelectProps> { }
-
-declare module ReactSelectClass {
-    class Creatable extends React.Component<ReactCreatableSelectProps> { }
-    class Async extends React.Component<ReactAsyncSelectProps> { }
-    class AsyncCreatable extends React.Component<ReactAsyncSelectProps & ReactCreatableSelectProps> { }
+declare class ReactSelectClass extends React.Component<ReactSelectClass.ReactSelectProps> {
+    focus(): void;
 }
diff --git a/types/react-select/react-select-tests.tsx b/types/react-select/react-select-tests.tsx
index 6a1d1b778b..3dd010536f 100644
--- a/types/react-select/react-select-tests.tsx
+++ b/types/react-select/react-select-tests.tsx
@@ -1,327 +1,154 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom";
+import * as ReactSelect from "react-select";
+const { Creatable } = ReactSelect;
 
-import Select = require("react-select");
-import { Option, ReactSelectProps, ReactCreatableSelectProps, ReactAsyncSelectProps, MenuRendererProps, AutocompleteResult } from "react-select";
+declare function describe(desc: string, f: () => void): void;
+declare function it(desc: string, f: () => void): void;
 
-const CustomOption = React.createClass({
-    propTypes: {
-        children: React.PropTypes.node,
-        className: React.PropTypes.string,
-        isDisabled: React.PropTypes.bool,
-        isFocused: React.PropTypes.bool,
-        isSelected: React.PropTypes.bool,
-        onFocus: React.PropTypes.func,
-        onSelect: React.PropTypes.func,
-        option: React.PropTypes.object.isRequired,
-    },
-    handleMouseDown (event: Event) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.props.onSelect(this.props.option, event);
-    },
-    handleMouseEnter (event: Event) {
-        this.props.onFocus(this.props.option, event);
-    },
-    handleMouseMove (event: Event) {
-        if (this.props.isFocused) return;
-        this.props.onFocus(this.props.option, event);
-    },
-    render () {
-        return (
-            <div className="Select-option"
-                    onMouseDown={this.handleMouseDown}
-                    onMouseEnter={this.handleMouseEnter}
-                    onMouseMove={this.handleMouseMove}
-                    title={this.props.option.title}>
-                {this.props.children}
-            </div>
-        );
-    }
-});
+const EXAMPLE_OPTIONS: ReactSelect.Options = [
+    { value: "one", label: "One" },
+    { value: "two", label: "Two" }
+];
 
-const CustomValue = React.createClass({
-    propTypes: {
-        children: React.PropTypes.node,
-        placeholder: React.PropTypes.string,
-        value: React.PropTypes.object
-    },
-    render () {
-        return (
-            <div className="Select-value" title={this.props.value.title}>
-                <span className="Select-value-label">
-                    {this.props.children}
-                </span>
-            </div>
-        );
-    }
-});
+describe("react-select", () => {
+    it("options", () => {
+        const optionsString: ReactSelect.Options<string> = [
+            { value: "one", label: "One" },
+            { value: "two", label: "Two", clearableValue: false }
+        ];
 
-const filterOptions = (options: Array<Option>, filter: string, values: Array<Option>) => {
-    // Filter already selected values
-    let filteredOptions = options.filter(option => values.indexOf(option) < 0);
+        const optionsNumber: ReactSelect.Options<number> = [
+            { value: 1, label: "One" },
+            { value: 2, label: "Two", clearableValue: false }
+        ];
 
-    // Filter by label
-    if (filter != null && filter.length > 0) {
-        filteredOptions = filteredOptions.filter(option => RegExp(filter, 'ig').test(option.label));
-    }
+        const optionsMixed: ReactSelect.Options = [
+            { value: "one", label: "One" },
+            { value: 2, label: "Two", clearableValue: false }
+        ];
+    });
 
-    // Append Addition option
-    if (filteredOptions.length === 0) {
-        filteredOptions.push({
-            label:  `Create: ${filter}`,
-            value:  filter
-        });
-    }
-
-    return filteredOptions;
-};
-
-class SelectTest extends React.Component<React.Props<{}>> {
-
-    render() {
-        const options: Option[] = [{ label: "Foo", value: "bar" }];
-        const onChange = (value: any) => console.log(value);
-        const renderMenu = ({
-            focusedOption,
-            focusOption,
-            labelKey,
-            options,
-            selectValue,
-            valueArray
-        }: MenuRendererProps) => { return <div></div> };
-        const onOpen = () => { return; };
-        const onClose = () => { return; };
-        const optionRenderer = (option: Option) => <span>{option.label}</span>
-
-        const selectProps: ReactSelectProps = {
-            name: "test-select",
-            className: "test-select",
-            key: "1",
-            options: options,
-            optionClassName: 'test-select-option',
-            optionRenderer: optionRenderer,
-            autofocus: true,
-            autosize: true,
-            clearable: true,
-            escapeClearsValue: true,
-            filterOptions: filterOptions,
-            ignoreAccents: true,
-            instanceId: 'custom-instance-id',
-            joinValues: false,
-            matchPos: "any",
-            matchProp: "any",
-            menuContainerStyle: {},
-            menuRenderer: renderMenu,
-            menuStyle: {},
-            multi: true,
-            onMenuScrollToBottom: () => {},
-            onValueClick: onChange,
-            onOpen: onOpen,
-            onClose: onClose,
-            openAfterFocus: false,
-            optionComponent: CustomOption,
-            required: false,
-            resetValue: "resetValue",
-            scrollMenuIntoView: false,
-            valueKey: "github",
-            labelKey: "name",
-            onChange: onChange,
-            value: options,
-            valueComponent: CustomValue,
-            valueRenderer: optionRenderer
-        };
-
-        return <div>
-            <Select {...selectProps} />
-        </div>;
-    }
-}
-
-class SelectWithStringValueTest extends React.Component<React.Props<{}>> {
-
-    render() {
-        const options: Option[] = [{
-            label: "Foo",
-            value: "bar",
-        }, {
-            label: "Foo2",
-            value: "bar2",
-            clearableValue: false,
-            disabled: true
-        }];
-        const onChange = (value: any) => console.log(value);
-
-        const selectProps: ReactSelectProps = {
-            name: "test-select-with-string-value",
-            value: "bar",
-            options: options,
-            onChange: onChange
-        };
-
-        return <div>
-            <Select {...selectProps} />
-        </div>;
-    }
-}
-
-class SelectAsyncTest extends React.Component<React.Props<{}>> {
-
-    render() {
-        const getOptions = (input: string, callback: (err: any, result: AutocompleteResult) => any) => {
-            setTimeout(function() {
+    it("async options", () => {
+        const getAsyncLegacyOptions: ReactSelect.LoadOptionsLegacyHandler = (input, callback) => {
+            setTimeout(() => {
                 callback(null, {
-                    options: options,
-                    complete: true
+                    options: [
+                        { value: "one", label: "Two" }
+                    ],
+                    complete: false
                 });
-            }, 500);
-        };
-        const options: Option[] = [{ label: "Foo", value: "bar" }];
-        const onChange = (value: any) => console.log(value);
-
-        const asyncSelectProps: ReactAsyncSelectProps = {
-            name: "test-select",
-            className: "test-select",
-            key: "1",
-            matchPos: "any",
-            matchProp: "any",
-            multi: true,
-            onValueClick: onChange,
-            valueKey: "github",
-            labelKey: "name",
-            onChange: onChange,
-            simpleValue: undefined,
-            value: options,
-            loadOptions: getOptions,
-            cache: {},
-            ignoreAccents: false,
-            ignoreCase: true,
-            isLoading: false,
-            minimumInput: 5,
-            searchPromptText: "search...",
-            searchingText: "searching...",
-        };
-
-        return <div>
-            <Select.Async {...asyncSelectProps} />
-        </div>;
-    }
-
-}
-
-class SelectAsyncPromiseTest extends React.Component<React.Props<{}>> {
-
-    render() {
-        const getOptions = (input: string): Promise<AutocompleteResult> => {
-            return new Promise(resolve => {
-                setTimeout(function() {
-                    return resolve({
-                        options: options,
-                        complete: true
-                    });
-                }, 500);
             });
         };
-        const options: Option[] = [{ label: "Foo", value: "bar" }];
-        const onChange = (value: any) => console.log(value);
 
-        const asyncSelectProps: ReactAsyncSelectProps = {
-            name: "test-select-async-promise",
-            className: "test-select",
-            key: "1",
-            matchPos: "any",
-            matchProp: "any",
-            multi: true,
-            onValueClick: onChange,
-            valueKey: "github",
-            labelKey: "name",
-            onChange: onChange,
-            simpleValue: undefined,
-            value: options,
-            loadOptions: getOptions,
-            cache: {},
-            ignoreAccents: false,
-            ignoreCase: true,
-            isLoading: false,
-            minimumInput: 5,
-            searchPromptText: "search...",
-            searchingText: "searching...",
+        const dummyRequest = async () => {
+            return new Promise<ReactSelect.Options>(resolve => {
+                resolve(EXAMPLE_OPTIONS);
+            });
         };
 
-        return <div>
-            <Select.Async {...asyncSelectProps} />
-        </div>;
-    }
+        const getAsyncOptions: ReactSelect.LoadOptionsAsyncHandler = async input => {
+            const result = await dummyRequest();
 
-}
-
-class SelectCreatableTest extends React.Component<React.Props<{}>> {
-
-    render() {
-        const options: Option[] = [{ label: "Foo", value: "bar" }];
-        const onChange = (value: any) => console.log(value);
-
-        const creatableSelectProps: ReactCreatableSelectProps = {
-            name: "test-creatable-select",
-            value: "bar",
-            options: options,
-            onChange: onChange,
-            isOptionUnique: () => { return true; },
-            isValidNewOption: () => { return true; },
-            newOptionCreator: () => { return { label: "NewFoo", value: "newBar" }; },
-            promptTextCreator: () => { return ""; },
-            shouldKeyDownEventCreateNewOption: () => { return true; }
+            return {
+                options: result,
+                complete: false
+            };
         };
+    });
 
-        return <div>
-            <Select.Creatable {...creatableSelectProps} />
-        </div>
-    }
+    it("creatable", () => {
+        function Component(props: {}): JSX.Element {
+            return <Creatable name="creatable" options={EXAMPLE_OPTIONS} />;
+        }
+    });
 
-}
+    it("Focus method", () => {
+        class Component extends React.PureComponent {
+            private selectRef = (component: ReactSelect) => {
+                component.focus();
+            }
 
-class SelectAsyncCreatableTest extends React.Component<React.Props<{}>> {
+            render() {
+                return <ReactSelect
+                    ref={this.selectRef}
+                />;
+            }
+        }
+    });
 
-    render() {
-        const getOptions = (input: string, callback: Function) => {
-            setTimeout(function() {
-                callback(null, options);
-            }, 500);
+    it("Overriding default key-down behavior with onInputKeyDown", () => {
+        const keyDownHandler: ReactSelect.OnInputKeyDownHandler = event => {
+            const e: React.KeyboardEvent<HTMLDivElement> = event;
         };
-        const options: Option[] = [{ label: "Foo", value: "bar" }];
-        const onChange = (value: any) => console.log(value);
+    });
 
-        const asyncCreatableSelectProps: ReactCreatableSelectProps & ReactAsyncSelectProps = {
-            name: "test-select-async-creatable",
-            className: "test-select-async-creatable",
-            key: "1",
-            matchPos: "any",
-            matchProp: "any",
-            multi: true,
-            onValueClick: onChange,
-            valueKey: "github",
-            labelKey: "name",
-            onChange: onChange,
-            simpleValue: undefined,
-            value: options,
-            loadOptions: getOptions,
-            cache: {},
-            ignoreAccents: false,
-            ignoreCase: true,
-            isLoading: false,
-            minimumInput: 5,
-            searchPromptText: "search...",
-            searchingText: "searching...",
-            isOptionUnique: () => { return true; },
-            isValidNewOption: () => { return true; },
-            newOptionCreator: () => { return { label: "NewFoo", value: "newBar" }; },
-            promptTextCreator: () => { return ""; },
-            shouldKeyDownEventCreateNewOption: () => { return true; }
+    it("Updating input values with onInputChange", () => {
+        const cleanInput: ReactSelect.OnInputChangeHandler = inputValue => {
+            return inputValue.replace(/[^0-9]/g, "");
         };
+    });
+});
 
-        return <div>
-            <Select.AsyncCreatable {...asyncCreatableSelectProps} />
-        </div>
-    }
+describe("Examples", () => {
+    it("Simple example", () => {
+        class Component extends React.Component {
+            private onSelectChange: ReactSelect.OnChangeSingleHandler<string> = (option) => {
+                const optionValue: string = option.value;
+            }
 
-}
+            render() {
+                return <ReactSelect
+                    name="select"
+                    value="one"
+                    options={EXAMPLE_OPTIONS}
+                />;
+            }
+        }
+    });
+
+    it("Menu renderer example", () => {
+        class Component extends React.Component {
+            private onSelectChange: ReactSelect.OnChangeSingleHandler<string> = option => {
+                const optionValue: string = option.value;
+            }
+
+            private menuRenderer: ReactSelect.MenuRendererHandler = props => {
+                const options = props.options.map(option => {
+                    return <div className="option">{option.label}</div>;
+                });
+
+                return <div className="menu">{options}</div>;
+            }
+
+            render() {
+                return <ReactSelect
+                    name="select"
+                    value="one"
+                    options={EXAMPLE_OPTIONS}
+                    menuRenderer={this.menuRenderer}
+                />;
+            }
+        }
+    });
+
+    it("Input render example", () => {
+        class Component extends React.Component {
+            private onSelectChange: ReactSelect.OnChangeSingleHandler<string> = option => {
+                const optionValue: string = option.value;
+            }
+
+            private inputRenderer: ReactSelect.InputRendererHandler = props => {
+                return <input {...props} />;
+            }
+
+            render() {
+                return <ReactSelect
+                    name="select"
+                    value="one"
+                    options={EXAMPLE_OPTIONS}
+                    inputRenderer={this.inputRenderer}
+                />;
+            }
+        }
+    });
+});
diff --git a/types/react-select/tslint.json b/types/react-select/tslint.json
new file mode 100644
index 0000000000..3db14f85ea
--- /dev/null
+++ b/types/react-select/tslint.json
@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }