From 05c5be8411596e7c65cb586cfa5f261f3f91ca03 Mon Sep 17 00:00:00 2001
From: Stuart van Beek <stuart@mediamonks.com>
Date: Tue, 14 May 2019 16:44:36 -0400
Subject: [PATCH] feat(downshift): allow passing additional props to Downshift

---
 packages/react/src/components/ComboBox/ComboBox.js         | 7 +++++++
 packages/react/src/components/Dropdown/Dropdown.js         | 7 +++++++
 .../src/components/MultiSelect/FilterableMultiSelect.js    | 7 +++++++
 packages/react/src/components/MultiSelect/MultiSelect.js   | 7 +++++++
 4 files changed, 28 insertions(+)

diff --git a/packages/react/src/components/ComboBox/ComboBox.js b/packages/react/src/components/ComboBox/ComboBox.js
index 8188c3208c52..8aa5eb83b67c 100644
--- a/packages/react/src/components/ComboBox/ComboBox.js
+++ b/packages/react/src/components/ComboBox/ComboBox.js
@@ -146,6 +146,11 @@ export default class ComboBox extends React.Component {
      * should use "light theme" (white background)?
      */
     light: PropTypes.bool,
+
+    /**
+     * Additional props passed to Downshift
+     */
+    downshiftProps: Downshift.propTypes,
   };
 
   static defaultProps = {
@@ -237,6 +242,7 @@ export default class ComboBox extends React.Component {
       shouldFilterItem, // eslint-disable-line no-unused-vars
       onChange, // eslint-disable-line no-unused-vars
       onInputChange, // eslint-disable-line no-unused-vars
+      downshiftProps,
       ...rest
     } = this.props;
     const className = cx(`${prefix}--combo-box`, containerClassName);
@@ -257,6 +263,7 @@ export default class ComboBox extends React.Component {
     const wrapperClasses = cx(`${prefix}--list-box__wrapper`);
     const input = (
       <Downshift
+        {...downshiftProps}
         onChange={this.handleOnChange}
         onInputValueChange={this.handleOnInputValueChange}
         inputValue={this.state.inputValue || ''}
diff --git a/packages/react/src/components/Dropdown/Dropdown.js b/packages/react/src/components/Dropdown/Dropdown.js
index d3bc92d6a060..fed1f2096047 100644
--- a/packages/react/src/components/Dropdown/Dropdown.js
+++ b/packages/react/src/components/Dropdown/Dropdown.js
@@ -126,6 +126,11 @@ export default class Dropdown extends React.Component {
      * additional help
      */
     helperText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+
+    /**
+     * Additional props passed to Downshift
+     */
+    downshiftProps: Downshift.propTypes,
   };
 
   static defaultProps = {
@@ -163,6 +168,7 @@ export default class Dropdown extends React.Component {
       light,
       invalid,
       invalidText,
+      downshiftProps,
     } = this.props;
     const inline = type === 'inline';
     const className = ({ isOpen }) =>
@@ -205,6 +211,7 @@ export default class Dropdown extends React.Component {
         {title}
         {!inline && helper}
         <Downshift
+          {...downshiftProps}
           onChange={this.handleOnChange}
           itemToString={itemToString}
           defaultSelectedItem={initialSelectedItem}
diff --git a/packages/react/src/components/MultiSelect/FilterableMultiSelect.js b/packages/react/src/components/MultiSelect/FilterableMultiSelect.js
index a8593fcb6e6c..94e7bacffd0e 100644
--- a/packages/react/src/components/MultiSelect/FilterableMultiSelect.js
+++ b/packages/react/src/components/MultiSelect/FilterableMultiSelect.js
@@ -109,6 +109,11 @@ export default class FilterableMultiSelect extends React.Component {
      * Callback function for translating ListBoxMenuIcon SVG title
      */
     translateWithId: PropTypes.func,
+
+    /**
+     * Additional props passed to Downshift
+     */
+    downshiftProps: Downshift.propTypes,
   };
 
   static getDerivedStateFromProps({ open }, state) {
@@ -256,6 +261,7 @@ export default class FilterableMultiSelect extends React.Component {
       invalid,
       invalidText,
       translateWithId,
+      downshiftProps,
     } = this.props;
     const inline = type === 'inline';
     const wrapperClasses = cx(
@@ -289,6 +295,7 @@ export default class FilterableMultiSelect extends React.Component {
         initialSelectedItems={initialSelectedItems}
         render={({ selectedItems, onItemChange, clearSelection }) => (
           <Downshift
+            {...downshiftProps}
             highlightedIndex={highlightedIndex}
             isOpen={isOpen}
             inputValue={inputValue}
diff --git a/packages/react/src/components/MultiSelect/MultiSelect.js b/packages/react/src/components/MultiSelect/MultiSelect.js
index b6bd5d030b45..8f8aca74fad9 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect.js
+++ b/packages/react/src/components/MultiSelect/MultiSelect.js
@@ -115,6 +115,11 @@ export default class MultiSelect extends React.Component {
      * `top-after-reopen`: selected item jump to top after reopen dropdown
      */
     selectionFeedback: PropTypes.oneOf(['top', 'fixed', 'top-after-reopen']),
+
+    /**
+     * Additional props passed to Downshift
+     */
+    downshiftProps: Downshift.propTypes,
   };
 
   static getDerivedStateFromProps({ open }, state) {
@@ -226,6 +231,7 @@ export default class MultiSelect extends React.Component {
       invalidText,
       useTitleInItem,
       translateWithId,
+      downshiftProps,
     } = this.props;
     const inline = type === 'inline';
     const wrapperClasses = cx(
@@ -261,6 +267,7 @@ export default class MultiSelect extends React.Component {
         initialSelectedItems={initialSelectedItems}
         render={({ selectedItems, onItemChange, clearSelection }) => (
           <Downshift
+            {...downshiftProps}
             highlightedIndex={highlightedIndex}
             isOpen={isOpen}
             itemToString={itemToString}