@carbon/react 1.27.0-rc.0 → 1.28.0-rc.0

package/lib/components/ComboBox/ComboBox.js

@@ -38,11 +38,7 @@ var Downshift__default = /*#__PURE__*/_interopDefaultLegacy(Downshift);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _ComboBox$propTypes, _ComboBox$defaultProp;
-
-var _excluded = ["aria-label", "ariaLabel", "className", "direction", "disabled", "downshiftProps", "helperText", "id", "initialSelectedItem", "invalid", "invalidText", "items", "itemToElement", "itemToString", "light", "onChange", "onInputChange", "onToggleClick", "placeholder", "readOnly", "selectedItem", "shouldFilterItem", "size", "titleText", "translateWithId", "type", "warn", "warnText", "onStateChange"];
-
-var defaultItemToString = function defaultItemToString(item) {
+const defaultItemToString = item => {
   if (typeof item === 'string') {
     return item;
   }
@@ -50,15 +46,15 @@ var defaultItemToString = function defaultItemToString(item) {
   return item && item.label;
 };
 
-var defaultShouldFilterItem = function defaultShouldFilterItem() {
-  return true;
-};
+const defaultShouldFilterItem = () => true;
 
-var getInputValue = function getInputValue(_ref) {
-  var initialSelectedItem = _ref.initialSelectedItem,
-      inputValue = _ref.inputValue,
-      itemToString = _ref.itemToString,
-      selectedItem = _ref.selectedItem;
+const getInputValue = _ref => {
+  let {
+    initialSelectedItem,
+    inputValue,
+    itemToString,
+    selectedItem
+  } = _ref;
 
   if (selectedItem) {
     return itemToString(selectedItem);
@@ -71,21 +67,22 @@ var getInputValue = function getInputValue(_ref) {
   return inputValue || '';
 };
 
-var findHighlightedIndex = function findHighlightedIndex(_ref2, inputValue) {
-  var items = _ref2.items,
-      _ref2$itemToString = _ref2.itemToString,
-      itemToString = _ref2$itemToString === void 0 ? defaultItemToString : _ref2$itemToString;
+const findHighlightedIndex = (_ref2, inputValue) => {
+  let {
+    items,
+    itemToString = defaultItemToString
+  } = _ref2;
 
   if (!inputValue) {
     return -1;
   }
 
-  var searchValue = inputValue.toLowerCase();
+  const searchValue = inputValue.toLowerCase();
 
-  for (var i = 0; i < items.length; i++) {
-    var _item = itemToString(items[i]).toLowerCase();
+  for (let i = 0; i < items.length; i++) {
+    const item = itemToString(items[i]).toLowerCase();
 
-    if (_item.indexOf(searchValue) !== -1) {
+    if (item.indexOf(searchValue) !== -1) {
       return i;
     }
   }
@@ -93,200 +90,198 @@ var findHighlightedIndex = function findHighlightedIndex(_ref2, inputValue) {
   return -1;
 };
 
-var getInstanceId = setupGetInstanceId["default"]();
-var ComboBox = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
-  var _cx, _ref4, _cx4, _Text;
-
-  var ariaLabel = props['aria-label'],
-      deprecatedAriaLabel = props.ariaLabel,
-      containerClassName = props.className,
-      direction = props.direction,
-      disabled = props.disabled,
-      downshiftProps = props.downshiftProps,
-      helperText = props.helperText,
-      id = props.id,
-      initialSelectedItem = props.initialSelectedItem,
-      invalid = props.invalid,
-      invalidText = props.invalidText,
-      items = props.items,
-      itemToElement = props.itemToElement,
-      itemToString = props.itemToString,
-      light = props.light,
-      onChange = props.onChange,
-      onInputChange = props.onInputChange,
-      onToggleClick = props.onToggleClick,
-      placeholder = props.placeholder,
-      readOnly = props.readOnly,
-      selectedItem = props.selectedItem,
-      shouldFilterItem = props.shouldFilterItem,
-      size = props.size,
-      titleText = props.titleText,
-      translateWithId = props.translateWithId;
-      props.type;
-      var warn = props.warn,
-      warnText = props.warnText;
-      props.onStateChange;
-      var rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
-
-  var prefix = usePrefix.usePrefix();
-
-  var _useContext = React.useContext(FormContext.FormContext),
-      isFluid = _useContext.isFluid;
-
-  var textInput = React.useRef(null);
-  var comboBoxInstanceId = getInstanceId();
-
-  var _useState = React.useState(getInputValue({
-    initialSelectedItem: initialSelectedItem,
+const getInstanceId = setupGetInstanceId["default"]();
+const ComboBox = /*#__PURE__*/React__default["default"].forwardRef((props, ref) => {
+  var _Text;
+
+  const {
+    ['aria-label']: ariaLabel,
+    ariaLabel: deprecatedAriaLabel,
+    className: containerClassName,
+    direction,
+    disabled,
+    downshiftProps,
+    helperText,
+    id,
+    initialSelectedItem,
+    invalid,
+    invalidText,
+    items,
+    itemToElement,
+    itemToString,
+    light,
+    onChange,
+    onInputChange,
+    onToggleClick,
+    placeholder,
+    readOnly,
+    selectedItem,
+    shouldFilterItem,
+    size,
+    titleText,
+    translateWithId,
+    type: _type,
+    warn,
+    warnText,
+    onStateChange: _onStateChange,
+    ...rest
+  } = props;
+  const prefix = usePrefix.usePrefix();
+  const {
+    isFluid
+  } = React.useContext(FormContext.FormContext);
+  const textInput = React.useRef(null);
+  const comboBoxInstanceId = getInstanceId();
+  const [inputValue, setInputValue] = React.useState(getInputValue({
+    initialSelectedItem,
     inputValue: '',
-    itemToString: itemToString,
-    selectedItem: selectedItem
-  })),
-      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-      inputValue = _useState2[0],
-      setInputValue = _useState2[1];
-
-  var _useState3 = React.useState(false),
-      _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-      isFocused = _useState4[0],
-      setIsFocused = _useState4[1];
-
-  var _useState5 = React.useState(),
-      _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
-      prevSelectedItem = _useState6[0],
-      setPrevSelectedItem = _useState6[1];
-
-  var _useState7 = React.useState(false),
-      _useState8 = _rollupPluginBabelHelpers.slicedToArray(_useState7, 2),
-      doneInitialSelectedItem = _useState8[0],
-      setDoneInitialSelectedItem = _useState8[1];
-
-  var savedOnInputChange = React.useRef(onInputChange);
+    itemToString,
+    selectedItem
+  }));
+  const [isFocused, setIsFocused] = React.useState(false);
+  const [prevSelectedItem, setPrevSelectedItem] = React.useState();
+  const [doneInitialSelectedItem, setDoneInitialSelectedItem] = React.useState(false);
+  const savedOnInputChange = React.useRef(onInputChange);
 
   if (!doneInitialSelectedItem || prevSelectedItem !== selectedItem) {
     setDoneInitialSelectedItem(true);
     setPrevSelectedItem(selectedItem);
     setInputValue(getInputValue({
-      initialSelectedItem: initialSelectedItem,
-      inputValue: inputValue,
-      itemToString: itemToString,
-      selectedItem: selectedItem
+      initialSelectedItem,
+      inputValue,
+      itemToString,
+      selectedItem
     }));
   }
 
-  var filterItems = function filterItems(items, itemToString, inputValue) {
-    return items.filter(function (item) {
-      return shouldFilterItem ? shouldFilterItem({
-        item: item,
-        itemToString: itemToString,
-        inputValue: inputValue
-      }) : defaultShouldFilterItem();
-    });
-  };
+  const filterItems = (items, itemToString, inputValue) => items.filter(item => shouldFilterItem ? shouldFilterItem({
+    item,
+    itemToString,
+    inputValue
+  }) : defaultShouldFilterItem());
 
-  var handleOnChange = function handleOnChange(selectedItem) {
+  const handleOnChange = selectedItem => {
     if (onChange) {
       onChange({
-        selectedItem: selectedItem
+        selectedItem
       });
     }
   };
 
-  var handleOnInputValueChange = function handleOnInputValueChange(inputValue) {
+  const handleOnInputValueChange = inputValue => {
     setInputValue(inputValue || '');
   };
 
-  React.useEffect(function () {
+  React.useEffect(() => {
     savedOnInputChange.current = onInputChange;
   }, [onInputChange]);
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (savedOnInputChange.current) {
       savedOnInputChange.current(inputValue);
     }
   }, [inputValue]);
 
-  var handleSelectionClear = function handleSelectionClear() {
+  const handleSelectionClear = () => {
     if (textInput !== null && textInput !== void 0 && textInput.current) {
       textInput.current.focus();
     }
   };
 
-  var handleOnStateChange = function handleOnStateChange(newState, _ref3) {
-    var setHighlightedIndex = _ref3.setHighlightedIndex;
+  const handleOnStateChange = (newState, _ref3) => {
+    let {
+      setHighlightedIndex
+    } = _ref3;
 
     if (Object.prototype.hasOwnProperty.call(newState, 'inputValue')) {
-      var _inputValue = newState.inputValue;
-      var filteredItems = filterItems(items, itemToString, _inputValue);
-      setHighlightedIndex(findHighlightedIndex(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, props), {}, {
+      const {
+        inputValue
+      } = newState;
+      const filteredItems = filterItems(items, itemToString, inputValue);
+      setHighlightedIndex(findHighlightedIndex({ ...props,
         items: filteredItems
-      }), _inputValue));
+      }, inputValue));
     }
   };
 
-  var handleToggleClick = function handleToggleClick(isOpen) {
-    return function (event) {
-      if (onToggleClick) {
-        onToggleClick(event);
-      }
+  const handleToggleClick = isOpen => event => {
+    if (onToggleClick) {
+      onToggleClick(event);
+    }
 
-      if (event.target === textInput.current && isOpen) {
-        event.preventDownshiftDefault = true;
-        event.persist();
-      }
-    };
+    if (event.target === textInput.current && isOpen) {
+      event.preventDownshiftDefault = true;
+      event.persist();
+    }
   };
 
-  var enabled = index.useFeatureFlag('enable-v11-release');
-  var showWarning = !invalid && warn;
-  var className = cx__default["default"]("".concat(prefix, "--combo-box"), [enabled ? null : containerClassName], (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box--up"), direction === 'top'), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--combo-box--warning"), showWarning), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--combo-box--readonly"), readOnly), _cx));
-  var titleClasses = cx__default["default"]("".concat(prefix, "--label"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--label--disabled"), disabled));
-  var comboBoxHelperId = !helperText ? undefined : "combobox-helper-text-".concat(comboBoxInstanceId);
-  var helperClasses = cx__default["default"]("".concat(prefix, "--form__helper-text"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--form__helper-text--disabled"), disabled));
-  var wrapperClasses = cx__default["default"]("".concat(prefix, "--list-box__wrapper"), [enabled ? containerClassName : null, (_ref4 = {}, _rollupPluginBabelHelpers.defineProperty(_ref4, "".concat(prefix, "--list-box__wrapper--fluid--invalid"), isFluid && invalid), _rollupPluginBabelHelpers.defineProperty(_ref4, "".concat(prefix, "--list-box__wrapper--fluid--focus"), isFluid && isFocused), _ref4)]);
-  var inputClasses = cx__default["default"]("".concat(prefix, "--text-input"), (_cx4 = {}, _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--text-input--empty"), !inputValue), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--combo-box--input--focus"), isFocused && !isFluid), _cx4)); // needs to be Capitalized for react to render it correctly
-
-  var ItemToElement = itemToElement;
+  const enabled = index.useFeatureFlag('enable-v11-release');
+  const showWarning = !invalid && warn;
+  const className = cx__default["default"](`${prefix}--combo-box`, [enabled ? null : containerClassName], {
+    [`${prefix}--list-box--up`]: direction === 'top',
+    [`${prefix}--combo-box--warning`]: showWarning,
+    [`${prefix}--combo-box--readonly`]: readOnly
+  });
+  const titleClasses = cx__default["default"](`${prefix}--label`, {
+    [`${prefix}--label--disabled`]: disabled
+  });
+  const comboBoxHelperId = !helperText ? undefined : `combobox-helper-text-${comboBoxInstanceId}`;
+  const helperClasses = cx__default["default"](`${prefix}--form__helper-text`, {
+    [`${prefix}--form__helper-text--disabled`]: disabled
+  });
+  const wrapperClasses = cx__default["default"](`${prefix}--list-box__wrapper`, [enabled ? containerClassName : null, {
+    [`${prefix}--list-box__wrapper--fluid--invalid`]: isFluid && invalid,
+    [`${prefix}--list-box__wrapper--fluid--focus`]: isFluid && isFocused
+  }]);
+  const inputClasses = cx__default["default"](`${prefix}--text-input`, {
+    [`${prefix}--text-input--empty`]: !inputValue,
+    [`${prefix}--combo-box--input--focus`]: isFocused && !isFluid
+  }); // needs to be Capitalized for react to render it correctly
+
+  const ItemToElement = itemToElement;
   return /*#__PURE__*/React__default["default"].createElement(Downshift__default["default"], _rollupPluginBabelHelpers["extends"]({}, downshiftProps, {
     onChange: handleOnChange,
     onInputValueChange: handleOnInputValueChange,
-    onStateChange: function onStateChange() {
+    onStateChange: function () {
       var _downshiftProps$onSta;
 
       for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
         args[_key] = arguments[_key];
       }
 
-      handleOnStateChange.apply(void 0, args);
-      downshiftProps === null || downshiftProps === void 0 ? void 0 : (_downshiftProps$onSta = downshiftProps.onStateChange) === null || _downshiftProps$onSta === void 0 ? void 0 : _downshiftProps$onSta.call.apply(_downshiftProps$onSta, [downshiftProps].concat(args));
+      handleOnStateChange(...args);
+      downshiftProps === null || downshiftProps === void 0 ? void 0 : (_downshiftProps$onSta = downshiftProps.onStateChange) === null || _downshiftProps$onSta === void 0 ? void 0 : _downshiftProps$onSta.call(downshiftProps, ...args);
     },
     inputValue: inputValue || '',
     itemToString: itemToString,
     initialSelectedItem: initialSelectedItem,
     inputId: id,
     selectedItem: selectedItem
-  }), function (_ref5) {
+  }), _ref4 => {
     var _textInput$current;
 
-    var getInputProps = _ref5.getInputProps,
-        getItemProps = _ref5.getItemProps,
-        getLabelProps = _ref5.getLabelProps,
-        getMenuProps = _ref5.getMenuProps,
-        getRootProps = _ref5.getRootProps,
-        getToggleButtonProps = _ref5.getToggleButtonProps,
-        isOpen = _ref5.isOpen,
-        inputValue = _ref5.inputValue,
-        selectedItem = _ref5.selectedItem,
-        highlightedIndex = _ref5.highlightedIndex,
-        clearSelection = _ref5.clearSelection,
-        toggleMenu = _ref5.toggleMenu;
-    var rootProps = getRootProps( // @ts-ignore this is not supposed to be a required property
+    let {
+      getInputProps,
+      getItemProps,
+      getLabelProps,
+      getMenuProps,
+      getRootProps,
+      getToggleButtonProps,
+      isOpen,
+      inputValue,
+      selectedItem,
+      highlightedIndex,
+      clearSelection,
+      toggleMenu
+    } = _ref4;
+    const rootProps = getRootProps( // @ts-ignore this is not supposed to be a required property
     {}, {
       suppressRefError: true
     });
-    var labelProps = getLabelProps();
-    var buttonProps = getToggleButtonProps({
+    const labelProps = getLabelProps();
+    const buttonProps = getToggleButtonProps({
       disabled: disabled || readOnly,
       onClick: handleToggleClick(isOpen),
+
       // When we moved the "root node" of Downshift to the <input> for
       // ARIA 1.2 compliance, we unfortunately hit this branch for the
       // "mouseup" event that downshift listens to:
@@ -296,21 +291,24 @@ var ComboBox = /*#__PURE__*/React__default["default"].forwardRef(function (props
       // stop the event from propagating to prevent this if the menu is already open.
       // This allows the toggleMenu behavior for the toggleButton to correctly open and
       // close the menu.
-      onMouseUp: function onMouseUp(event) {
+      onMouseUp(event) {
         if (isOpen) {
           event.stopPropagation();
         }
       }
+
     });
-    var inputProps = getInputProps({
+    const inputProps = getInputProps({
       // Remove excess aria `aria-labelledby`. HTML <label for> provides this aria information.
       'aria-labelledby': null,
-      disabled: disabled,
-      placeholder: placeholder,
-      onClick: function onClick() {
+      disabled,
+      placeholder,
+
+      onClick() {
         toggleMenu();
       },
-      onKeyDown: function onKeyDown(event) {
+
+      onKeyDown: event => {
         if (match.match(event, keys.Space)) {
           event.stopPropagation();
         }
@@ -337,12 +335,12 @@ var ComboBox = /*#__PURE__*/React__default["default"].forwardRef(function (props
       }
     });
 
-    var handleFocus = function handleFocus(evt) {
+    const handleFocus = evt => {
       setIsFocused(evt.type === 'focus');
     };
 
-    var readOnlyEventHandlers = readOnly ? {
-      onKeyDown: function onKeyDown(evt) {
+    const readOnlyEventHandlers = readOnly ? {
+      onKeyDown: evt => {
         // This prevents the select from opening for the above keys
         if (evt.key !== 'Tab') {
           evt.preventDefault();
@@ -367,7 +365,7 @@ var ComboBox = /*#__PURE__*/React__default["default"].forwardRef(function (props
       warn: warn,
       warnText: warnText
     }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "".concat(prefix, "--list-box__field")
+      className: `${prefix}--list-box__field`
     }, /*#__PURE__*/React__default["default"].createElement("input", _rollupPluginBabelHelpers["extends"]({
       role: "combobox",
       disabled: disabled,
@@ -384,9 +382,9 @@ var ComboBox = /*#__PURE__*/React__default["default"].forwardRef(function (props
       ref: mergeRefs["default"](textInput, ref),
       "aria-describedby": helperText && !invalid && !warn && !isFluid ? comboBoxHelperId : undefined
     })), invalid && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningFilled, {
-      className: "".concat(prefix, "--list-box__invalid-icon")
+      className: `${prefix}--list-box__invalid-icon`
     }), showWarning && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningAltFilled, {
-      className: "".concat(prefix, "--list-box__invalid-icon ").concat(prefix, "--list-box__invalid-icon--warning")
+      className: `${prefix}--list-box__invalid-icon ${prefix}--list-box__invalid-icon--warning`
     }), inputValue && /*#__PURE__*/React__default["default"].createElement(ListBoxSelection["default"], {
       clearSelection: clearSelection,
       translateWithId: translateWithId,
@@ -398,13 +396,14 @@ var ComboBox = /*#__PURE__*/React__default["default"].forwardRef(function (props
       translateWithId: translateWithId
     }))), /*#__PURE__*/React__default["default"].createElement(index$1["default"].Menu, getMenuProps({
       'aria-label': deprecatedAriaLabel || ariaLabel
-    }), isOpen ? filterItems(items, itemToString, inputValue).map(function (item, index) {
-      var _getItemProps;
-
-      var itemProps = getItemProps((_getItemProps = {
-        item: item,
-        index: index
-      }, _rollupPluginBabelHelpers.defineProperty(_getItemProps, 'aria-current', selectedItem === item ? 'true' : 'false'), _rollupPluginBabelHelpers.defineProperty(_getItemProps, 'aria-selected', highlightedIndex === index ? 'true' : 'false'), _rollupPluginBabelHelpers.defineProperty(_getItemProps, "disabled", item.disabled), _getItemProps));
+    }), isOpen ? filterItems(items, itemToString, inputValue).map((item, index) => {
+      const itemProps = getItemProps({
+        item,
+        index,
+        ['aria-current']: selectedItem === item ? 'true' : 'false',
+        ['aria-selected']: highlightedIndex === index ? 'true' : 'false',
+        disabled: item.disabled
+      });
       return /*#__PURE__*/React__default["default"].createElement(index$1["default"].MenuItem, _rollupPluginBabelHelpers["extends"]({
         key: itemProps.id,
         isActive: selectedItem === item,
@@ -416,7 +415,7 @@ var ComboBox = /*#__PURE__*/React__default["default"].forwardRef(function (props
       React__default["default"].createElement(ItemToElement, _rollupPluginBabelHelpers["extends"]({
         key: itemProps.id
       }, item)) : itemToString ? itemToString(item) : defaultItemToString(item), selectedItem === item && /*#__PURE__*/React__default["default"].createElement(iconsReact.Checkmark, {
-        className: "".concat(prefix, "--list-box__menu-item__selected-icon")
+        className: `${prefix}--list-box__menu-item__selected-icon`
       }));
     }) : null)), helperText && !invalid && !warn && !isFluid && (_Text || (_Text = /*#__PURE__*/React__default["default"].createElement(Text.Text, {
       as: "div",
@@ -426,14 +425,186 @@ var ComboBox = /*#__PURE__*/React__default["default"].forwardRef(function (props
   });
 });
 ComboBox.displayName = 'ComboBox';
-ComboBox.propTypes = (_ComboBox$propTypes = {}, _rollupPluginBabelHelpers.defineProperty(_ComboBox$propTypes, 'aria-label', PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ComboBox$propTypes, "ariaLabel", deprecate["default"](PropTypes__default["default"].string, 'This prop syntax has been deprecated. Please use the new `aria-label`.')), _rollupPluginBabelHelpers.defineProperty(_ComboBox$propTypes, "className", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ComboBox$propTypes, "direction", PropTypes__default["default"].oneOf(['top', 'bottom'])), _rollupPluginBabelHelpers.defineProperty(_ComboBox$propTypes, "disabled", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_ComboBox$propTypes, "downshiftProps", PropTypes__default["default"].shape(Downshift__default["default"].propTypes)), _rollupPluginBabelHelpers.defineProperty(_ComboBox$propTypes, "helperText", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ComboBox$propTypes, "id", PropTypes__default["default"].string.isRequired), _rollupPluginBabelHelpers.defineProperty(_ComboBox$propTypes, "initialSelectedItem", PropTypes__default["default"].oneOfType([PropTypes__default["default"].object, PropTypes__default["default"].string, PropTypes__default["default"].number])), _rollupPluginBabelHelpers.defineProperty(_ComboBox$propTypes, "invalid", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_ComboBox$propTypes, "invalidText", PropTypes__default["default"].node), _rollupPluginBabelHelpers.defineProperty(_ComboBox$propTypes, "itemToElement", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_ComboBox$propTypes, "itemToString", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_ComboBox$propTypes, "items", PropTypes__default["default"].array.isRequired), _rollupPluginBabelHelpers.defineProperty(_ComboBox$propTypes, "light", deprecate["default"](PropTypes__default["default"].bool, 'The `light` prop for `Combobox` has ' + 'been deprecated in favor of the new `Layer` component. It will be removed in the next major release.')), _rollupPluginBabelHelpers.defineProperty(_ComboBox$propTypes, "onChange", PropTypes__default["default"].func.isRequired), _rollupPluginBabelHelpers.defineProperty(_ComboBox$propTypes, "onInputChange", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_ComboBox$propTypes, "onStateChange", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_ComboBox$propTypes, "onToggleClick", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_ComboBox$propTypes, "placeholder", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ComboBox$propTypes, "readOnly", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_ComboBox$propTypes, "selectedItem", PropTypes__default["default"].oneOfType([PropTypes__default["default"].object, PropTypes__default["default"].string, PropTypes__default["default"].number])), _rollupPluginBabelHelpers.defineProperty(_ComboBox$propTypes, "shouldFilterItem", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_ComboBox$propTypes, "size", ListBoxPropTypes.ListBoxSize), _rollupPluginBabelHelpers.defineProperty(_ComboBox$propTypes, "titleText", PropTypes__default["default"].node), _rollupPluginBabelHelpers.defineProperty(_ComboBox$propTypes, "translateWithId", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_ComboBox$propTypes, "type", ListBoxPropTypes.ListBoxType), _rollupPluginBabelHelpers.defineProperty(_ComboBox$propTypes, "warn", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_ComboBox$propTypes, "warnText", PropTypes__default["default"].node), _ComboBox$propTypes);
-ComboBox.defaultProps = (_ComboBox$defaultProp = {
+ComboBox.propTypes = {
+  /**
+   * 'aria-label' of the ListBox component.
+   * Specify a label to be read by screen readers on the container node
+   */
+  ['aria-label']: PropTypes__default["default"].string,
+
+  /**
+   * Deprecated, please use `aria-label` instead.
+   * Specify a label to be read by screen readers on the container note.
+   * 'aria-label' of the ListBox component.
+   */
+  ariaLabel: deprecate["default"](PropTypes__default["default"].string, 'This prop syntax has been deprecated. Please use the new `aria-label`.'),
+
+  /**
+   * An optional className to add to the container node
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Specify the direction of the combobox dropdown. Can be either top or bottom.
+   */
+  direction: PropTypes__default["default"].oneOf(['top', 'bottom']),
+
+  /**
+   * Specify if the control should be disabled, or not
+   */
+  disabled: PropTypes__default["default"].bool,
+
+  /**
+   * Additional props passed to Downshift
+   */
+  // @ts-ignore
+  downshiftProps: PropTypes__default["default"].shape(Downshift__default["default"].propTypes),
+
+  /**
+   * Provide helper text that is used alongside the control label for
+   * additional help
+   */
+  helperText: PropTypes__default["default"].string,
+
+  /**
+   * Specify a custom `id` for the input
+   */
+  id: PropTypes__default["default"].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__default["default"].oneOfType([PropTypes__default["default"].object, PropTypes__default["default"].string, PropTypes__default["default"].number]),
+
+  /**
+   * Specify if the currently selected value is invalid.
+   */
+  invalid: PropTypes__default["default"].bool,
+
+  /**
+   * Message which is displayed if the value is invalid.
+   */
+  invalidText: PropTypes__default["default"].node,
+
+  /**
+   * Optional function to render items as custom components instead of strings.
+   * Defaults to null and is overridden by a getter
+   */
+  itemToElement: PropTypes__default["default"].func,
+
+  /**
+   * 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__default["default"].func,
+
+  /**
+   * 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__default["default"].array.isRequired,
+
+  /**
+   * should use "light theme" (white background)?
+   */
+  light: deprecate["default"](PropTypes__default["default"].bool, 'The `light` prop for `Combobox` has ' + 'been deprecated in favor of the new `Layer` component. It will be removed in the next major release.'),
+
+  /**
+   * `onChange` is a utility for this controlled component to communicate to a
+   * consuming component when a specific dropdown item is selected.
+   * `({ selectedItem }) => void`
+   * @param {{ selectedItem }}
+   */
+  onChange: PropTypes__default["default"].func.isRequired,
+
+  /**
+   * Callback function to notify consumer when the text input changes.
+   * This provides support to change available items based on the text.
+   * `(inputText) => void`
+   * @param {string} inputText
+   */
+  onInputChange: PropTypes__default["default"].func,
+
+  /**
+   * Helper function passed to Downshift that allows the user to observe internal
+   * state changes
+   * `(changes, stateAndHelpers) => void`
+   */
+  onStateChange: PropTypes__default["default"].func,
+
+  /**
+   * Callback function that fires when the combobox menu toggle is clicked
+   * `(evt) => void`
+   * @param {MouseEvent} event
+   */
+  onToggleClick: PropTypes__default["default"].func,
+
+  /**
+   * 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__default["default"].string,
+
+  /**
+   * Is the ComboBox readonly?
+   */
+  readOnly: PropTypes__default["default"].bool,
+
+  /**
+   * For full control of the selection
+   */
+  selectedItem: PropTypes__default["default"].oneOfType([PropTypes__default["default"].object, PropTypes__default["default"].string, PropTypes__default["default"].number]),
+
+  /**
+   * 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__default["default"].func,
+
+  /**
+   * Specify the size of the ListBox. Currently supports either `sm`, `md` or `lg` as an option.
+   */
+  size: ListBoxPropTypes.ListBoxSize,
+
+  /**
+   * Provide text to be used in a `<label>` element that is tied to the
+   * combobox via ARIA attributes.
+   */
+  titleText: PropTypes__default["default"].node,
+
+  /**
+   * Specify a custom translation function that takes in a message identifier
+   * and returns the localized string for the message
+   */
+  translateWithId: PropTypes__default["default"].func,
+
+  /**
+   * Currently supports either the default type, or an inline variant
+   */
+  type: ListBoxPropTypes.ListBoxType,
+
+  /**
+   * Specify whether the control is currently in warning state
+   */
+  warn: PropTypes__default["default"].bool,
+
+  /**
+   * Provide the text that is displayed when the control is in warning state
+   */
+  warnText: PropTypes__default["default"].node
+};
+ComboBox.defaultProps = {
   disabled: false,
   itemToString: defaultItemToString,
   itemToElement: null,
   shouldFilterItem: defaultShouldFilterItem,
-  type: 'default'
-}, _rollupPluginBabelHelpers.defineProperty(_ComboBox$defaultProp, 'aria-label', 'Choose an item'), _rollupPluginBabelHelpers.defineProperty(_ComboBox$defaultProp, "direction", 'bottom'), _ComboBox$defaultProp);
+  type: 'default',
+  ['aria-label']: 'Choose an item',
+  direction: 'bottom'
+};
 var ComboBox$1 = ComboBox;
 
 exports["default"] = ComboBox$1;