carbon-addons-iot-react 2.98.2 → 2.100.1

package/es/src/components/ComboBox/CarbonComboBox.jsx

@@ -0,0 +1,882 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import classnames from 'classnames';
+import { WarningFilled16, Checkmark16 } from '@carbon/icons-react';
+import 'core-js/modules/es.array.filter';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { settings } from 'carbon-components';
+import _extends from '@babel/runtime/helpers/extends';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import 'core-js/modules/es.array.map';
+import _classCallCheck from '@babel/runtime/helpers/classCallCheck';
+import _createClass from '@babel/runtime/helpers/createClass';
+import _possibleConstructorReturn from '@babel/runtime/helpers/possibleConstructorReturn';
+import _getPrototypeOf from '@babel/runtime/helpers/getPrototypeOf';
+import _assertThisInitialized from '@babel/runtime/helpers/assertThisInitialized';
+import _inherits from '@babel/runtime/helpers/inherits';
+import 'core-js/modules/es.array.index-of';
+import Downshift from 'downshift';
+import ListBox from '../../../node_modules/carbon-components-react/es/components/ListBox/index.js';
+
+var keys = {
+  Tab: {
+    key: 'Tab',
+    which: 9,
+    keyCode: 9
+  },
+  Enter: {
+    key: 'Enter',
+    which: 13,
+    keyCode: 13
+  },
+  Escape: {
+    key: ['Escape', // IE11 Escape
+    'Esc'],
+    which: 27,
+    keyCode: 27
+  },
+  Space: {
+    key: ' ',
+    which: 32,
+    keyCode: 32
+  },
+  PageUp: {
+    key: 'PageUp',
+    which: 33,
+    keyCode: 33
+  },
+  PageDown: {
+    key: 'PageDown',
+    which: 34,
+    keyCode: 34
+  },
+  End: {
+    key: 'End',
+    which: 35,
+    keyCode: 35
+  },
+  Home: {
+    key: 'Home',
+    which: 36,
+    keyCode: 36
+  },
+  ArrowLeft: {
+    key: 'ArrowLeft',
+    which: 37,
+    keyCode: 37
+  },
+  ArrowUp: {
+    key: 'ArrowUp',
+    which: 38,
+    keyCode: 38
+  },
+  ArrowRight: {
+    key: 'ArrowRight',
+    which: 39,
+    keyCode: 39
+  },
+  ArrowDown: {
+    key: 'ArrowDown',
+    which: 40,
+    keyCode: 40
+  }
+};
+var ListBoxPropTypes = {
+  ListBoxType: PropTypes.oneOf(['default', 'inline']),
+  ListBoxSize: PropTypes.oneOf(['sm', 'xl'])
+};
+var prefix = settings.prefix;
+/**
+ * Check to see if the given key matches the corresponding keyboard event. Also
+ * supports passing in the value directly if you can't used the given event.
+ *
+ * @example
+ * import * as keys from '../keys';
+ * import { matches } from '../match';
+ *
+ * function handleOnKeyDown(event) {
+ *   if (match(event, keys.Enter) {
+ *     // ...
+ *   }
+ * }
+ *
+ * @param {Event|number|string} eventOrCode
+ * @param {Key} key
+ * @returns {boolean}
+ */
+
+/* istanbul ignore next */
+
+function match(eventOrCode) {
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      key = _ref.key,
+      which = _ref.which,
+      keyCode = _ref.keyCode;
+
+  if (typeof eventOrCode === 'string') {
+    return eventOrCode === key;
+  }
+
+  if (typeof eventOrCode === 'number') {
+    return eventOrCode === which || eventOrCode === keyCode;
+  }
+
+  if (eventOrCode.key && Array.isArray(key)) {
+    return key.indexOf(eventOrCode.key) !== -1;
+  }
+
+  return eventOrCode.key === key || eventOrCode.which === which || eventOrCode.keyCode === keyCode;
+}
+/**
+ * Generic utility to initialize a method that will return a unique instance id
+ * for a component.
+ */
+
+function setupGetInstanceId() {
+  var instanceId = 0;
+  return function getInstanceId() {
+    return ++instanceId; // eslint-disable-line no-plusplus
+  };
+}
+var defaultItemToString = function defaultItemToString(item) {
+  if (typeof item === 'string') {
+    return item;
+  }
+
+  return item && item.label;
+};
+
+var defaultShouldFilterItem = function defaultShouldFilterItem() {
+  return true;
+};
+
+var getInputValue = function getInputValue(props, state) {
+  if (props.selectedItem) {
+    return props.itemToString(props.selectedItem);
+  } // TODO: consistent `initialSelectedItem` behavior with other listbox components in v11
+
+
+  if (props.initialSelectedItem) {
+    return props.itemToString(props.initialSelectedItem);
+  }
+
+  return state.inputValue || '';
+}; // Since we always provide a func this will never be hit
+
+/* istanbul ignore next */
+
+
+var defaultFindHighlightedIndex = function defaultFindHighlightedIndex(_ref2, inputValue) {
+  var items = _ref2.items,
+      itemToString = _ref2.itemToString;
+
+  if (!inputValue) {
+    return -1;
+  }
+
+  var searchValue = inputValue.toLowerCase(); // eslint-disable-next-line no-plusplus
+
+  for (var i = 0; i < items.length; i++) {
+    var item = itemToString(items[i]).toLowerCase();
+
+    if (item.indexOf(searchValue) !== -1 && searchValue.length > 1) {
+      return i;
+    }
+  }
+
+  return -1;
+};
+
+var getInstanceId = setupGetInstanceId();
+/* eslint react/require-default-props: 0 */
+
+var ComboBox = /*#__PURE__*/function (_React$Component) {
+  _inherits(ComboBox, _React$Component);
+
+  _createClass(ComboBox, null, [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(nextProps, state) {
+      var prevSelectedItem = state.prevSelectedItem,
+          doneInitialSelectedItem = state.doneInitialSelectedItem;
+      var selectedItem = nextProps.selectedItem;
+
+      if (!doneInitialSelectedItem || prevSelectedItem !== selectedItem) {
+        return {
+          doneInitialSelectedItem: true,
+          prevSelectedItem: selectedItem,
+          inputValue: getInputValue(nextProps, state)
+        };
+      }
+
+      return null;
+    }
+  }]);
+
+  function ComboBox(props) {
+    var _this;
+
+    _classCallCheck(this, ComboBox);
+
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(ComboBox).call(this, props));
+
+    _defineProperty(_assertThisInitialized(_this), "filterItems", function (items, itemToString, inputValue) {
+      return items.filter(function (item) {
+        return _this.props.shouldFilterItem({
+          item: item,
+          itemToString: itemToString,
+          inputValue: inputValue
+        });
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleOnChange", function (selectedItem) {
+      if (_this.props.onChange) {
+        _this.props.onChange({
+          selectedItem: selectedItem
+        });
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleOnInputValueChange", function (inputValue) {
+      var onInputChange = _this.props.onInputChange;
+
+      _this.setState(function () {
+        return {
+          // Default to empty string if we have a false-y `inputValue`
+          inputValue: inputValue || ''
+        };
+      }, function () {
+        if (onInputChange) {
+          onInputChange(inputValue);
+        }
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleOnStateChange", function (newState, _ref3) {
+      var setHighlightedIndex = _ref3.setHighlightedIndex,
+          highlightedIndex = _ref3.highlightedIndex;
+
+      _this.props.onHighligtedIndexChange(highlightedIndex);
+
+      var findHighlightedIndex = _this.props.findHighlightedIndex || defaultFindHighlightedIndex;
+
+      if (Object.prototype.hasOwnProperty.call(newState, 'inputValue')) {
+        var inputValue = newState.inputValue;
+        setHighlightedIndex(findHighlightedIndex(_this.props, inputValue));
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onToggleClick", function (isOpen) {
+      return function (event) {
+        if (event.target === _this.textInput.current && isOpen) {
+          // eslint-disable-next-line no-param-reassign
+          event.preventDownshiftDefault = true;
+          event.persist();
+        }
+      };
+    });
+
+    _this.textInput = /*#__PURE__*/React.createRef();
+    _this.comboBoxInstanceId = getInstanceId();
+    _this.state = {
+      inputValue: getInputValue(props, {})
+    };
+    return _this;
+  }
+
+  _createClass(ComboBox, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props = this.props,
+          containerClassName = _this$props.className,
+          disabled = _this$props.disabled,
+          id = _this$props.id,
+          items = _this$props.items,
+          itemToString = _this$props.itemToString,
+          itemToElement = _this$props.itemToElement,
+          titleText = _this$props.titleText,
+          helperText = _this$props.helperText,
+          placeholder = _this$props.placeholder,
+          initialSelectedItem = _this$props.initialSelectedItem,
+          selectedItem = _this$props.selectedItem,
+          ariaLabel = _this$props.ariaLabel,
+          translateWithId = _this$props.translateWithId,
+          invalid = _this$props.invalid,
+          invalidText = _this$props.invalidText,
+          light = _this$props.light,
+          type = _this$props.type,
+          size = _this$props.size,
+          shouldFilterItem = _this$props.shouldFilterItem,
+          onChange = _this$props.onChange,
+          onInputChange = _this$props.onInputChange,
+          downshiftProps = _this$props.downshiftProps,
+          direction = _this$props.direction,
+          onHighligtedIndexChange = _this$props.onHighligtedIndexChange,
+          findHighlightedIndex = _this$props.findHighlightedIndex,
+          editOptionText = _this$props.editOptionText,
+          rest = _objectWithoutProperties(_this$props, ["className", "disabled", "id", "items", "itemToString", "itemToElement", "titleText", "helperText", "placeholder", "initialSelectedItem", "selectedItem", "ariaLabel", "translateWithId", "invalid", "invalidText", "light", "type", "size", "shouldFilterItem", "onChange", "onInputChange", "downshiftProps", "direction", "onHighligtedIndexChange", "findHighlightedIndex", "editOptionText"]);
+
+      var inputValue = this.state.inputValue;
+      var className = classnames("".concat(prefix, "--combo-box"), containerClassName, _defineProperty({}, "".concat(prefix, "--list-box--up"), direction === 'top'));
+      var titleClasses = classnames("".concat(prefix, "--label"), _defineProperty({}, "".concat(prefix, "--label--disabled"), disabled));
+      var comboBoxHelperId = !helperText ? undefined : "combobox-helper-text-".concat(this.comboBoxInstanceId);
+      var comboBoxLabelId = "combobox-label-".concat(this.comboBoxInstanceId);
+      var title = titleText ?
+      /*#__PURE__*/
+      // eslint-disable-next-line jsx-a11y/label-has-for
+      React.createElement("label", {
+        id: comboBoxLabelId,
+        htmlFor: id,
+        className: titleClasses
+      }, titleText) : null;
+      var helperClasses = classnames("".concat(prefix, "--form__helper-text"), _defineProperty({}, "".concat(prefix, "--form__helper-text--disabled"), disabled));
+      var helper = helperText ? /*#__PURE__*/React.createElement("div", {
+        id: comboBoxHelperId,
+        className: helperClasses
+      }, helperText) : null;
+      var wrapperClasses = classnames("".concat(prefix, "--list-box__wrapper"));
+      var comboBoxA11yId = "combobox-a11y-".concat(this.comboBoxInstanceId);
+      var inputClasses = classnames("".concat(prefix, "--text-input"), _defineProperty({}, "".concat(prefix, "--text-input--empty"), !inputValue)); // needs to be Capitalized for react to render it correctly
+
+      var ItemToElement = itemToElement;
+      var input = /*#__PURE__*/React.createElement(Downshift, _extends({}, downshiftProps, {
+        onChange: this.handleOnChange,
+        onInputValueChange: this.handleOnInputValueChange,
+        onStateChange: this.handleOnStateChange,
+        inputValue: inputValue || '',
+        itemToString: itemToString,
+        initialIsOpen: false,
+        defaultSelectedItem: initialSelectedItem,
+        selectedItem: selectedItem
+      }), function (_ref4) {
+        var getButtonProps = _ref4.getButtonProps,
+            getInputProps = _ref4.getInputProps,
+            getItemProps = _ref4.getItemProps,
+            getRootProps = _ref4.getRootProps,
+            isOpen = _ref4.isOpen,
+            inputValue = _ref4.inputValue,
+            selectedItem = _ref4.selectedItem,
+            highlightedIndex = _ref4.highlightedIndex,
+            clearSelection = _ref4.clearSelection,
+            toggleMenu = _ref4.toggleMenu;
+        // console.log({ highlightedIndex });
+        return /*#__PURE__*/React.createElement(ListBox, _extends({
+          className: className,
+          disabled: disabled,
+          invalid: invalid,
+          id: comboBoxA11yId,
+          "aria-label": ariaLabel,
+          invalidText: invalidText,
+          isOpen: isOpen,
+          light: light,
+          size: size
+        }, getRootProps({
+          refKey: 'innerRef'
+        })), /*#__PURE__*/React.createElement(ListBox.Field, _extends({
+          id: id,
+          disabled: disabled,
+          "aria-labelledby": comboBoxLabelId,
+          "aria-describedby": comboBoxHelperId
+        }, getButtonProps({
+          disabled: disabled,
+          onClick: _this2.onToggleClick(isOpen)
+        })), /*#__PURE__*/React.createElement("input", _extends({
+          className: inputClasses,
+          "aria-labelledby": comboBoxA11yId,
+          tabIndex: "0",
+          "aria-disabled": disabled,
+          "aria-controls": isOpen ? "".concat(id, "__menu") : null,
+          "aria-owns": isOpen ? "".concat(id, "__menu") : null,
+          "aria-autocomplete": "list",
+          ref: _this2.textInput,
+          title: inputValue
+        }, rest, getInputProps({
+          disabled: disabled,
+          id: id,
+          placeholder: placeholder,
+          onKeyDown: function onKeyDown(event) {
+            if (match(event, keys.Space)) {
+              event.stopPropagation();
+            }
+
+            if (match(event, keys.Enter)) {
+              toggleMenu();
+            }
+          }
+        }))), invalid && /*#__PURE__*/React.createElement(WarningFilled16, {
+          className: "".concat(prefix, "--list-box__invalid-icon")
+        }), inputValue && /*#__PURE__*/React.createElement(ListBox.Selection, {
+          clearSelection: clearSelection,
+          translateWithId: translateWithId,
+          disabled: disabled
+        }), /*#__PURE__*/React.createElement(ListBox.MenuIcon, {
+          isOpen: isOpen,
+          translateWithId: translateWithId
+        })), /*#__PURE__*/React.createElement(ListBox.Menu, {
+          "aria-label": ariaLabel,
+          id: id
+        }, _this2.filterItems(items, itemToString, inputValue).map(function (item, index) {
+          var itemProps = getItemProps({
+            item: item,
+            index: index
+          });
+          return /*#__PURE__*/React.createElement(ListBox.MenuItem, _extends({
+            key: itemProps.id,
+            "data-text": editOptionText,
+            isActive: selectedItem === item,
+            isHighlighted: highlightedIndex === index || selectedItem && selectedItem.id === item.id || false,
+            title: itemToElement ? item.text : itemToString(item)
+          }, itemProps), itemToElement ? /*#__PURE__*/React.createElement(ItemToElement, _extends({
+            key: itemProps.id
+          }, item)) : itemToString(item), selectedItem === item && /*#__PURE__*/React.createElement(Checkmark16, {
+            className: "".concat(prefix, "--list-box__menu-item__selected-icon")
+          }));
+        })));
+      });
+      return /*#__PURE__*/React.createElement("div", {
+        className: wrapperClasses
+      }, title, helper, input);
+    }
+  }]);
+
+  return ComboBox;
+}(React.Component);
+
+_defineProperty(ComboBox, "propTypes", {
+  /**
+   * 'aria-label' of the ListBox component.
+   */
+  ariaLabel: PropTypes.string,
+
+  /**
+   * An optional className to add to the container node
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify if the control should be disabled, or not
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Specify a custom `id` for the input
+   */
+  id: PropTypes.string.isRequired,
+
+  /**
+   * Allow users to pass in an arbitrary item or a string (in case their items are an array of strings)
+   * from their collection that are pre-selected
+   */
+  initialSelectedItem: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+
+  /**
+   * We try to stay as generic as possible here to allow individuals to pass
+   * in a collection of whatever kind of data structure they prefer
+   */
+  items: PropTypes.array.isRequired,
+  // eslint-disable-line react/forbid-prop-types
+
+  /**
+   * Helper function passed to downshift that allows the library to render a
+   * given item to a string label. By default, it extracts the `label` field
+   * from a given item to serve as the item label in the list
+   */
+  itemToString: PropTypes.func,
+
+  /**
+   * Optional function to render items as custom components instead of strings.
+   * Defaults to null and is overriden by a getter
+   */
+  itemToElement: PropTypes.func,
+
+  /**
+   * `onChange` is a utility for this controlled component to communicate to a
+   * consuming component when a specific dropdown item is selected.
+   * @param {{ selectedItem }}
+   */
+  onChange: PropTypes.func.isRequired,
+
+  /**
+   * Used to provide a placeholder text node before a user enters any input.
+   * This is only present if the control has no items selected
+   */
+  placeholder: PropTypes.string.isRequired,
+
+  /**
+   * Specify your own filtering logic by passing in a `shouldFilterItem`
+   * function that takes in the current input and an item and passes back
+   * whether or not the item should be filtered.
+   */
+  shouldFilterItem: PropTypes.func,
+
+  /**
+   * Specify if the currently selected value is invalid.
+   */
+  invalid: PropTypes.bool,
+
+  /**
+   * Message which is displayed if the value is invalid.
+   */
+  invalidText: PropTypes.string,
+
+  /**
+   * For full control of the selection
+   */
+  selectedItem: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+
+  /**
+   * Specify a custom translation function that takes in a message identifier
+   * and returns the localized string for the message
+   */
+  translateWithId: PropTypes.func,
+
+  /**
+   * Currently supports either the default type, or an inline variant
+   */
+  type: ListBoxPropTypes.ListBoxType,
+
+  /**
+   * Specify the size of the ListBox. Currently supports either `sm`, `lg` or `xl` as an option.
+   */
+  size: ListBoxPropTypes.ListBoxSize,
+
+  /**
+   * Callback function to notify consumer when the text input changes.
+   * This provides support to change available items based on the text.
+   * @param {string} inputText
+   */
+  onInputChange: PropTypes.func,
+
+  /**
+   * should use "light theme" (white background)?
+   */
+  light: PropTypes.bool,
+
+  /**
+   * Additional props passed to Downshift
+   */
+  downshiftProps: PropTypes.shape(Downshift.propTypes),
+
+  /**
+   * Specify the direction of the combobox dropdown. Can be either top or bottom.
+   */
+  direction: PropTypes.oneOf(['top', 'bottom']),
+
+  /**
+   *  Optional callback to pass the highlighted index to parent
+   */
+  onHighligtedIndexChange: PropTypes.func,
+
+  /**
+   *  Optional func to change behavior of highlighted index
+   */
+  findHighlightedIndex: PropTypes.func,
+
+  /**
+   * String to pass to input field option
+   */
+  editOptionText: PropTypes.string
+});
+
+_defineProperty(ComboBox, "defaultProps", {
+  disabled: false,
+  itemToString: defaultItemToString,
+  itemToElement: null,
+  shouldFilterItem: defaultShouldFilterItem,
+  type: 'default',
+  ariaLabel: 'Choose an item',
+  light: false,
+  direction: 'bottom',
+  editOptionText: '+ Add'
+});
+ComboBox.__docgenInfo = {
+  "description": "",
+  "methods": [{
+    "name": "filterItems",
+    "docblock": null,
+    "modifiers": [],
+    "params": [{
+      "name": "items",
+      "type": null
+    }, {
+      "name": "itemToString",
+      "type": null
+    }, {
+      "name": "inputValue",
+      "type": null
+    }],
+    "returns": null
+  }, {
+    "name": "handleOnChange",
+    "docblock": null,
+    "modifiers": [],
+    "params": [{
+      "name": "selectedItem",
+      "type": null
+    }],
+    "returns": null
+  }, {
+    "name": "handleOnInputValueChange",
+    "docblock": null,
+    "modifiers": [],
+    "params": [{
+      "name": "inputValue",
+      "type": null
+    }],
+    "returns": null
+  }, {
+    "name": "handleOnStateChange",
+    "docblock": null,
+    "modifiers": [],
+    "params": [{
+      "name": "newState",
+      "type": null
+    }, {
+      "name": "{ setHighlightedIndex, highlightedIndex }",
+      "type": null
+    }],
+    "returns": null
+  }, {
+    "name": "onToggleClick",
+    "docblock": null,
+    "modifiers": [],
+    "params": [{
+      "name": "isOpen",
+      "type": null
+    }],
+    "returns": null
+  }],
+  "displayName": "ComboBox",
+  "props": {
+    "disabled": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Specify if the control should be disabled, or not"
+    },
+    "itemToString": {
+      "defaultValue": {
+        "value": "item => {\n  if (typeof item === 'string') {\n    return item;\n  }\n\n  return item && item.label;\n}",
+        "computed": false
+      },
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Helper function passed to downshift that allows the library to render a\ngiven item to a string label. By default, it extracts the `label` field\nfrom a given item to serve as the item label in the list"
+    },
+    "itemToElement": {
+      "defaultValue": {
+        "value": "null",
+        "computed": false
+      },
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Optional function to render items as custom components instead of strings.\nDefaults to null and is overriden by a getter"
+    },
+    "shouldFilterItem": {
+      "defaultValue": {
+        "value": "() => true",
+        "computed": false
+      },
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Specify your own filtering logic by passing in a `shouldFilterItem`\nfunction that takes in the current input and an item and passes back\nwhether or not the item should be filtered."
+    },
+    "type": {
+      "defaultValue": {
+        "value": "'default'",
+        "computed": false
+      },
+      "type": {
+        "name": "custom",
+        "raw": "ListBoxPropTypes.ListBoxType"
+      },
+      "required": false,
+      "description": "Currently supports either the default type, or an inline variant"
+    },
+    "ariaLabel": {
+      "defaultValue": {
+        "value": "'Choose an item'",
+        "computed": false
+      },
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "'aria-label' of the ListBox component."
+    },
+    "light": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "should use \"light theme\" (white background)?"
+    },
+    "direction": {
+      "defaultValue": {
+        "value": "'bottom'",
+        "computed": false
+      },
+      "type": {
+        "name": "enum",
+        "value": [{
+          "value": "'top'",
+          "computed": false
+        }, {
+          "value": "'bottom'",
+          "computed": false
+        }]
+      },
+      "required": false,
+      "description": "Specify the direction of the combobox dropdown. Can be either top or bottom."
+    },
+    "editOptionText": {
+      "defaultValue": {
+        "value": "'+ Add'",
+        "computed": false
+      },
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "String to pass to input field option"
+    },
+    "className": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "An optional className to add to the container node"
+    },
+    "id": {
+      "type": {
+        "name": "string"
+      },
+      "required": true,
+      "description": "Specify a custom `id` for the input"
+    },
+    "initialSelectedItem": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "object"
+        }, {
+          "name": "string"
+        }]
+      },
+      "required": false,
+      "description": "Allow users to pass in an arbitrary item or a string (in case their items are an array of strings)\nfrom their collection that are pre-selected"
+    },
+    "items": {
+      "type": {
+        "name": "array"
+      },
+      "required": true,
+      "description": "We try to stay as generic as possible here to allow individuals to pass\nin a collection of whatever kind of data structure they prefer"
+    },
+    "onChange": {
+      "type": {
+        "name": "func"
+      },
+      "required": true,
+      "description": "`onChange` is a utility for this controlled component to communicate to a\nconsuming component when a specific dropdown item is selected.\n@param {{ selectedItem }}"
+    },
+    "placeholder": {
+      "type": {
+        "name": "string"
+      },
+      "required": true,
+      "description": "Used to provide a placeholder text node before a user enters any input.\nThis is only present if the control has no items selected"
+    },
+    "invalid": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Specify if the currently selected value is invalid."
+    },
+    "invalidText": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "Message which is displayed if the value is invalid."
+    },
+    "selectedItem": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "object"
+        }, {
+          "name": "string"
+        }]
+      },
+      "required": false,
+      "description": "For full control of the selection"
+    },
+    "translateWithId": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Specify a custom translation function that takes in a message identifier\nand returns the localized string for the message"
+    },
+    "size": {
+      "type": {
+        "name": "custom",
+        "raw": "ListBoxPropTypes.ListBoxSize"
+      },
+      "required": false,
+      "description": "Specify the size of the ListBox. Currently supports either `sm`, `lg` or `xl` as an option."
+    },
+    "onInputChange": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Callback function to notify consumer when the text input changes.\nThis provides support to change available items based on the text.\n@param {string} inputText"
+    },
+    "downshiftProps": {
+      "type": {
+        "name": "shape",
+        "value": "Downshift.propTypes",
+        "computed": true
+      },
+      "required": false,
+      "description": "Additional props passed to Downshift"
+    },
+    "onHighligtedIndexChange": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Optional callback to pass the highlighted index to parent"
+    },
+    "findHighlightedIndex": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Optional func to change behavior of highlighted index"
+    }
+  }
+};
+
+export default ComboBox;
+export { match, setupGetInstanceId, defaultItemToString };