feat(downshift): allow passing additional props to Downshift (#2726)

carbon-design-system · May 15, 2019 · a5601a7 · a5601a7
1 parent acb0ee0
commit a5601a7
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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}