From 15e163aef6e358fcf8d522cc5419ab686e6db8ab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?v=C3=A9gtelens=C3=A9g?= <siya@stackworx.io>
Date: Tue, 5 Mar 2019 13:17:02 +0200
Subject: [PATCH] Added missing prop for the multi select component

---
 types/react-widgets/lib/Multiselect.d.ts    |  61 ++++--
 types/react-widgets/react-widgets-tests.tsx | 196 ++++++++++----------
 2 files changed, 139 insertions(+), 118 deletions(-)

diff --git a/types/react-widgets/lib/Multiselect.d.ts b/types/react-widgets/lib/Multiselect.d.ts
index 56a2753d3e..afafdfcb12 100644
--- a/types/react-widgets/lib/Multiselect.d.ts
+++ b/types/react-widgets/lib/Multiselect.d.ts
@@ -1,12 +1,14 @@
-import * as React from 'react';
-import { ReactWidgetsCommonDropdownProps, AutoFocus } from './CommonProps';
+import * as React from "react";
+import { ReactWidgetsCommonDropdownProps, AutoFocus } from "./CommonProps";
 
-interface MultiselectProps extends ReactWidgetsCommonDropdownProps<MultiselectClass>, AutoFocus {
+interface MultiselectProps
+    extends ReactWidgetsCommonDropdownProps<MultiselectClass>,
+        AutoFocus {
     /**
      * Enables the list option creation UI. onFilter will only the UI when actively filtering for a list item.
      * @default 'onFilter'
      */
-    allowCreate?: boolean | 'onFilter';
+    allowCreate?: boolean | "onFilter";
     /**
      * The current values of the Multiselect. The value should can null, or an array of
      * valueField values, or an array of objects (such as a few items in the data array)
@@ -20,20 +22,26 @@ interface MultiselectProps extends ReactWidgetsCommonDropdownProps<MultiselectCl
      * Change event Handler that is called when the value is changed. The handler is called with
      * an array of values.
      */
-    onChange?: (dataItems: any[], metadata: {
-        dataItem: any;
-        action: 'insert' | 'remove';
-        originalEvent?: any;
-        lastValue?: any[];
-        searchTerm?: string;
-    }) => void;
+    onChange?: (
+        dataItems: any[],
+        metadata: {
+            dataItem: any;
+            action: "insert" | "remove";
+            originalEvent?: any;
+            lastValue?: any[];
+            searchTerm?: string;
+        }
+    ) => void;
     /**
      * This handler fires when an item has been selected from the list. It fires before the
      * onChange handler, and fires regardless of whether the value has actually changed
      */
-    onSelect?: (value: any, metadata: {
-        originalEvent: any;
-    }) => void;
+    onSelect?: (
+        value: any,
+        metadata: {
+            originalEvent: any;
+        }
+    ) => void;
     /**
      * This handler fires when the user chooses to create a new tag, not in the data list. It is
      * up to the widget parent to implement creation logic, a common implementation is shown
@@ -100,11 +108,14 @@ interface MultiselectProps extends ReactWidgetsCommonDropdownProps<MultiselectCl
      * Called when the value of the text box changes either from typing or a pasted value.
      * onSearch should be used when the searchTerm prop is set.
      */
-    onSearch?: (searchTerm: string, metadata: {
-        action: 'clear' | 'input';
-        lastSearchTerm?: string;
-        originalEvent?: any;
-    }) => void;
+    onSearch?: (
+        searchTerm: string,
+        metadata: {
+            action: "clear" | "input";
+            lastSearchTerm?: string;
+            originalEvent?: any;
+        }
+    ) => void;
     /**
      * Whether or not the Multiselect is open. When unset (undefined) the Multiselect will
      * handle the opening and closing internally. The defaultOpen prop can be used to set an
@@ -124,7 +135,12 @@ interface MultiselectProps extends ReactWidgetsCommonDropdownProps<MultiselectCl
      * item (analogous to the array.filter builtin)
      * @default startsWith
      */
-    filter?: false | "startsWith" | "endsWith" | "contains" | ((dataItem: any, searchTerm: string) => boolean);
+    filter?:
+        | false
+        | "startsWith"
+        | "endsWith"
+        | "contains"
+        | ((dataItem: any, searchTerm: string) => boolean);
     /**
      * Use in conjunction with the filter prop. Filter the list without regard for case. This
      * only applies to non function values for filter.
@@ -167,6 +183,11 @@ interface MultiselectProps extends ReactWidgetsCommonDropdownProps<MultiselectCl
      * The transition component is also injected with a dropUp prop indicating the direction it should open.
      */
     popupTransition?: React.ReactType | string;
+
+    /**
+     * Adds a css class to the input container element.
+     */
+    containerClassName?: string;
 }
 
 interface MultiselectMessages {
diff --git a/types/react-widgets/react-widgets-tests.tsx b/types/react-widgets/react-widgets-tests.tsx
index 2a4023d23a..522c0b4d05 100644
--- a/types/react-widgets/react-widgets-tests.tsx
+++ b/types/react-widgets/react-widgets-tests.tsx
@@ -1,7 +1,15 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 
-import { Calendar, Combobox, DateTimePicker, DropdownList, Multiselect, NumberPicker, SelectList } from "react-widgets";
+import {
+    Calendar,
+    Combobox,
+    DateTimePicker,
+    DropdownList,
+    Multiselect,
+    NumberPicker,
+    SelectList
+} from "react-widgets";
 
 function tagComponent(props: { value: string }) {
     return <span>{props.value}</span>;
@@ -18,105 +26,97 @@ function listComponent(props: { value: string }) {
 class Test extends React.Component<React.Props<{}>> {
     render() {
         return (
-        <div>
             <div>
-                <Calendar />
-                <Combobox />
-                <DateTimePicker />
-                <DropdownList />
-                <Multiselect />
-                <NumberPicker />
-                <SelectList />
+                <div>
+                    <Calendar />
+                    <Combobox />
+                    <DateTimePicker />
+                    <DropdownList />
+                    <Multiselect />
+                    <NumberPicker />
+                    <SelectList />
+                </div>
+                <div>
+                    <Calendar defaultValue={new Date()} />
+                    <Combobox defaultValue={"foo"} />
+                    <DateTimePicker defaultValue={new Date()} />
+                    <DropdownList defaultValue={"foo"} />
+                    <Multiselect defaultValue={["foo"]} />
+                    <NumberPicker defaultValue={1} />
+                    <SelectList defaultValue={"foo"} />
+                </div>
+                <div>
+                    <Multiselect
+                        tagComponent={tagComponent}
+                        itemComponent={itemComponent}
+                    />
+                    <Combobox
+                        itemComponent={itemComponent}
+                        listComponent={listComponent}
+                    />
+                    <DropdownList
+                        itemComponent={itemComponent}
+                        listComponent={listComponent}
+                    />
+                    <Multiselect listComponent={listComponent} />
+                    <SelectList listComponent={listComponent} />
+                </div>
+                <div>
+                    <Calendar disabled readOnly />
+                    <Combobox
+                        disabled
+                        readOnly
+                        dropUp
+                        placeholder={"Some text"}
+                    />
+                    <DateTimePicker disabled readOnly dropUp />
+                    <DropdownList disabled readOnly dropUp />
+                    <Multiselect disabled readOnly dropUp />
+                    <NumberPicker disabled readOnly />
+                    <SelectList disabled readOnly />
+                </div>
+                <div>
+                    <Calendar
+                        autoFocus
+                        defaultValue={new Date()}
+                        defaultView="year"
+                        views={["year", "decade"]}
+                    />
+                    <Combobox autoFocus delay={300} name="box" />
+                    <Combobox
+                        busy
+                        busySpinner={<span className="fas fa-sync fa-spin" />}
+                    />
+                    <DateTimePicker autoFocus open="date" />
+                    <DropdownList
+                        autoFocus
+                        delay={350}
+                        name="list"
+                        multiple={false}
+                    />
+                    <DropdownList containerClassName="list-items" />
+                    <Multiselect autoFocus allowCreate />
+                    <Multiselect containerClassName="multiselect-container" />
+                    <NumberPicker
+                        autoFocus
+                        name="numbers"
+                        placeholder="hello"
+                    />
+                    <SelectList
+                        autoFocus
+                        delay={400}
+                        tabIndex={-1}
+                        name="list"
+                    />
+                </div>
+                <div>
+                    <DateTimePicker
+                        dropUp={true}
+                        containerClassName="d-flex"
+                        timeIcon={<i className="fa fa-clock" />}
+                    />
+                </div>
             </div>
-            <div>
-                <Calendar defaultValue={new Date()} />
-                <Combobox defaultValue={'foo'} />
-                <DateTimePicker defaultValue={new Date()} />
-                <DropdownList defaultValue={'foo'} />
-                <Multiselect defaultValue={['foo']} />
-                <NumberPicker defaultValue={1}/>
-                <SelectList defaultValue={'foo'} />
-            </div>
-            <div>
-                <Multiselect
-                    tagComponent={tagComponent}
-                    itemComponent={itemComponent}
-                 />
-                 <Combobox
-                    itemComponent={itemComponent}
-                    listComponent={listComponent}
-                 />
-                 <DropdownList
-                    itemComponent={itemComponent}
-                    listComponent={listComponent}
-                 />
-                 <Multiselect
-                    listComponent={listComponent}
-                />
-                 <SelectList
-                    listComponent={listComponent}
-                />
-            </div>
-            <div>
-                <Calendar disabled readOnly />
-                <Combobox disabled readOnly dropUp placeholder={'Some text'}/>
-                <DateTimePicker disabled readOnly dropUp />
-                <DropdownList disabled readOnly dropUp />
-                <Multiselect disabled readOnly dropUp />
-                <NumberPicker disabled readOnly />
-                <SelectList disabled readOnly />
-            </div>
-            <div>
-                <Calendar
-                    autoFocus
-                    defaultValue={new Date()}
-                    defaultView="year"
-                    views={['year', 'decade']}
-                />
-                <Combobox
-                    autoFocus
-                    delay={300}
-                    name="box"
-                />
-                <Combobox
-                    busy
-                    busySpinner={
-                      <span className="fas fa-sync fa-spin" />
-                    }
-                />
-                <DateTimePicker
-                    autoFocus
-                    open="date"
-                />
-                <DropdownList
-                    autoFocus
-                    delay={350}
-                    name="list"
-                    multiple={false}
-                />
-                <DropdownList
-                    containerClassName="list-items"
-                />
-                <Multiselect
-                    autoFocus
-                    allowCreate
-                />
-                <NumberPicker
-                    autoFocus
-                    name="numbers"
-                    placeholder="hello"
-                />
-                <SelectList
-                    autoFocus
-                    delay={400}
-                    tabIndex={-1}
-                    name="list"
-                />
-            </div>
-            <div>
-                <DateTimePicker dropUp={true} containerClassName="d-flex" timeIcon={<i className="fa fa-clock" />} />
-            </div>
-        </div>
         );
     }
 }