react-select typings update:

- defaultMenuRenderer
 - Option component
 - other minor updates

types/react-select/index.d.ts

@@ -11,6 +11,7 @@
 //                 Ian Johnson <https://github.com/ninjaferret>
 //                 Anton Novik <https://github.com/tehbi4>
 //                 David Schkalee <https://github.com/misantronic>
+//                 Arthur Udalov <https://github.com/darkartur>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.6
 
@@ -18,12 +19,15 @@ import * as React from 'react';
 
 export default class ReactSelectClass<TValue = OptionValues> extends React.Component<ReactSelectProps<TValue>> {
     focus(): void;
+    setValue(value: Option<TValue>): void;
 }
 // Other components
 export class Creatable<TValue = OptionValues> extends React.Component<ReactCreatableSelectProps<TValue>> { }
 export class Async<TValue = OptionValues> extends React.Component<ReactAsyncSelectProps<TValue>> { }
 export class AsyncCreatable<TValue = OptionValues> extends React.Component<ReactAsyncSelectProps<TValue> & ReactCreatableSelectProps<TValue>> { }
 
+export type OptionComponentType<TValue = OptionValues> = React.ComponentType<OptionComponentProps<TValue>>;
+
 export type HandlerRendererResult = JSX.Element | null | false;
 
 // Handlers
@@ -128,6 +132,16 @@ export interface MenuRendererProps<TValue = OptionValues> {
      * Array of currently selected options.
      */
     valueArray: Options<TValue>;
+
+    /**
+     * Callback to remove selection from option; receives the option as a parameter.
+     */
+    removeValue: SelectValueHandler<TValue>;
+
+    /**
+     * function which returns a custom way to render the options in the menu
+     */
+    optionRenderer: OptionRendererHandler<TValue>;
 }
 
 export interface OptionComponentProps<TValue = OptionValues> {
@@ -196,6 +210,11 @@ export interface ArrowRendererProps {
      * Arrow mouse down event handler.
      */
     onMouseDown: React.MouseEventHandler<any>;
+
+    /**
+     * whether the Select is open or not.
+     */
+    isOpen: boolean;
 }
 
 export interface ReactSelectProps<TValue = OptionValues> extends React.Props<ReactSelectClass<TValue>> {
@@ -449,7 +468,7 @@ export interface ReactSelectProps<TValue = OptionValues> extends React.Props<Rea
     /**
      * option component to render in dropdown
      */
-    optionComponent?: React.ComponentType<OptionComponentProps<TValue>>;
+    optionComponent?: OptionComponentType<TValue>;
     /**
      * function which returns a custom way to render the options in the menu
      */

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

@@ -0,0 +1,5 @@
+import { OptionComponentType } from '../../';
+
+declare const OptionComponent: OptionComponentType;
+
+export default OptionComponent;

types/react-select/lib/utils/defaultMenuRenderer/index.d.ts

@@ -0,0 +1,3 @@
+import { MenuRendererProps } from '../../../';
+
+export default function defaultMenuRenderer(props: MenuRendererProps): JSX.Element[];

types/react-select/react-select-tests.tsx

@@ -1,5 +1,7 @@
 import * as React from "react";
 import ReactSelect, * as ReactSelectModule from "react-select";
+import defaultMenuRenderer from 'react-select/lib/utils/defaultMenuRenderer';
+import DefaultOptionComponent from 'react-select/lib/Option';
 
 declare function describe(desc: string, f: () => void): void;
 declare function it(desc: string, f: () => void): void;
@@ -126,6 +128,22 @@ describe("react-select", () => {
         }
     });
 
+    it("setValue method", () => {
+        class Component extends React.PureComponent {
+            private readonly selectRef = (component: ReactSelect) => {
+                component.setValue({
+                    value: 'value'
+                });
+            }
+
+            render() {
+                return <ReactSelect
+                    ref={this.selectRef}
+                />;
+            }
+        }
+    });
+
     it("Overriding default key-down behavior with onInputKeyDown", () => {
         const keyDownHandler: ReactSelectModule.OnInputKeyDownHandler = (event => {
             const divEvent = event as React.KeyboardEvent<HTMLDivElement>;
@@ -246,7 +264,13 @@ describe("Examples", () => {
 
             private readonly menuRenderer: ReactSelectModule.MenuRendererHandler = props => {
                 const options = props.options.map(option => {
-                    return <div className="option">{option.label}</div>;
+                    return (
+                        <div className="option">
+                            <div>{option.label}</div>
+                            <div>{props.optionRenderer({})}</div>
+                            <button onClick={() => props.removeValue(option)}/>
+                        </div>
+                    );
                 });
 
                 return <div className="menu">{options}</div>;
@@ -289,6 +313,41 @@ describe("Examples", () => {
         }
     });
 
+    it("Extend default menu renderer", () => {
+        return class Component extends React.Component {
+            private readonly menuRenderer: ReactSelectModule.MenuRendererHandler = props => {
+                return <div className="menu">defaultMenuRenderer(props)</div>;
+            }
+
+            render() {
+                return <ReactSelect
+                    menuRenderer={this.menuRenderer}
+                />;
+            }
+        };
+    });
+
+    it("Extend default Option component", () => {
+        function OptionComponent(props: ReactSelectModule.OptionComponentProps) {
+            const {option, isFocused, isSelected} = props;
+
+            return (
+                <DefaultOptionComponent {...props}>
+                    <span className={isFocused ? 'focused' : ''}>
+                        {isSelected ? '+' : '-'}
+                        {option.label}
+                    </span>
+                </DefaultOptionComponent>
+            );
+        }
+
+        return (
+            <ReactSelect
+                optionComponent={OptionComponent}
+            />
+        );
+    });
+
     it("Input render example", () => {
         class Component extends React.Component {
             private readonly onSelectChange: ReactSelectModule.OnChangeSingleHandler<string> = option => {
@@ -330,6 +389,19 @@ describe("Examples", () => {
         />;
     });
 
+    it("Arrow render example", () => {
+        return (
+            <ReactSelect
+                arrowRenderer={({onMouseDown, isOpen}) => (
+                    <div
+                        className={isOpen ? 'open' : 'closed'}
+                        onMouseDown={onMouseDown}
+                    />
+                )}
+            />
+        );
+    });
+
     it("Option render with custom value option", () => {
         const optionRenderer = (option: ReactSelectModule.Option<CustomValueType>): ReactSelectModule.HandlerRendererResult =>
             null;

types/react-select/tsconfig.json

@@ -1,6 +1,8 @@
 {
     "files": [
         "index.d.ts",
+        "lib/Option/index.d.ts",
+        "lib/utils/defaultMenuRenderer/index.d.ts",
         "react-select-tests.tsx"
     ],
     "compilerOptions": {
@@ -22,4 +24,4 @@
         "noEmit": true,
         "forceConsistentCasingInFileNames": true
     }
-}
+}