@carbon/react 1.21.0 → 1.22.0-rc.0

package/lib/components/Dropdown/Dropdown.js

@@ -15,7 +15,7 @@ var Downshift = require('downshift');
 var cx = require('classnames');
 var PropTypes = require('prop-types');
 var iconsReact = require('@carbon/icons-react');
-require('../ListBox/index.js');
+var index$1 = require('../ListBox/index.js');
 var mergeRefs = require('../../tools/mergeRefs.js');
 var deprecate = require('../../prop-types/deprecate.js');
 var index = require('../FeatureFlags/index.js');
@@ -23,7 +23,6 @@ var usePrefix = require('../../internal/usePrefix.js');
 require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
 var ListBoxPropTypes = require('../ListBox/ListBoxPropTypes.js');
-var ListBox = require('../ListBox/ListBox.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -38,10 +37,18 @@ var defaultItemToString = function defaultItemToString(item) {
     return item;
   }
 
-  return item ? item.label : '';
+  if (typeof item === 'number') {
+    return "".concat(item);
+  }
+
+  if (item !== null && _rollupPluginBabelHelpers["typeof"](item) === 'object' && 'label' in item && typeof item['label'] === 'string') {
+    return item['label'];
+  }
+
+  return '';
 };
 
-var Dropdown = /*#__PURE__*/React__default["default"].forwardRef(function Dropdown(_ref, ref) {
+var Dropdown = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
   var _cx, _cx2, _cx4;
 
   var containerClassName = _ref.className,
@@ -50,7 +57,8 @@ var Dropdown = /*#__PURE__*/React__default["default"].forwardRef(function Dropdo
       items = _ref.items,
       label = _ref.label,
       ariaLabel = _ref.ariaLabel,
-      itemToString = _ref.itemToString,
+      _ref$itemToString = _ref.itemToString,
+      itemToString = _ref$itemToString === void 0 ? defaultItemToString : _ref$itemToString,
       itemToElement = _ref.itemToElement,
       renderSelectedItem = _ref.renderSelectedItem,
       type = _ref.type,
@@ -125,7 +133,7 @@ var Dropdown = /*#__PURE__*/React__default["default"].forwardRef(function Dropdo
 
     if (onChange) {
       onChange({
-        selectedItem: selectedItem
+        selectedItem: selectedItem !== null && selectedItem !== void 0 ? selectedItem : null
       });
     }
   }
@@ -138,12 +146,15 @@ var Dropdown = /*#__PURE__*/React__default["default"].forwardRef(function Dropdo
     setIsFocused(evt.type === 'focus' ? true : false);
   };
 
+  var mergedRef = mergeRefs["default"](toggleButtonProps.ref, ref);
   var readOnlyEventHandlers = readOnly ? {
     onClick: function onClick(evt) {
       // NOTE: does not prevent click
       evt.preventDefault(); // focus on the element as per readonly input behavior
 
-      evt.target.focus();
+      if (mergedRef.current !== undefined) {
+        mergedRef.current.focus();
+      }
     },
     onKeyDown: function onKeyDown(evt) {
       var selectAccessKeys = ['ArrowDown', 'ArrowUp', ' ', 'Enter']; // This prevents the select from opening for the above keys
@@ -157,7 +168,7 @@ var Dropdown = /*#__PURE__*/React__default["default"].forwardRef(function Dropdo
     className: wrapperClasses
   }, other), titleText && /*#__PURE__*/React__default["default"].createElement("label", _rollupPluginBabelHelpers["extends"]({
     className: titleClasses
-  }, getLabelProps()), titleText), /*#__PURE__*/React__default["default"].createElement(ListBox["default"], {
+  }, getLabelProps()), titleText), /*#__PURE__*/React__default["default"].createElement(index$1["default"], {
     onFocus: handleFocus,
     onBlur: handleFocus,
     "aria-label": ariaLabel,
@@ -180,22 +191,24 @@ var Dropdown = /*#__PURE__*/React__default["default"].forwardRef(function Dropdo
     disabled: disabled,
     "aria-disabled": readOnly ? true : undefined // aria-disabled to remain focusable
     ,
-    title: selectedItem ? itemToString(selectedItem) : label
+    title: selectedItem && itemToString !== undefined ? itemToString(selectedItem) : label
   }, toggleButtonProps, readOnlyEventHandlers, {
-    ref: mergeRefs["default"](toggleButtonProps.ref, ref)
+    ref: mergedRef
   }), /*#__PURE__*/React__default["default"].createElement("span", {
     className: "".concat(prefix, "--list-box__label")
-  }, selectedItem ? renderSelectedItem ? renderSelectedItem(selectedItem) : itemToString(selectedItem) : label), /*#__PURE__*/React__default["default"].createElement(ListBox["default"].MenuIcon, {
+  }, selectedItem ? renderSelectedItem ? renderSelectedItem(selectedItem) : itemToString(selectedItem) : label), /*#__PURE__*/React__default["default"].createElement(index$1["default"].MenuIcon, {
     isOpen: isOpen,
     translateWithId: translateWithId
-  })), /*#__PURE__*/React__default["default"].createElement(ListBox["default"].Menu, getMenuProps(), isOpen && items.map(function (item, index) {
+  })), /*#__PURE__*/React__default["default"].createElement(index$1["default"].Menu, getMenuProps(), isOpen && items.map(function (item, index) {
+    var isObject = item !== null && _rollupPluginBabelHelpers["typeof"](item) === 'object';
+    var disabled = isObject && 'disabled' in item && item.disabled === true;
     var itemProps = getItemProps({
       item: item,
       index: index,
-      disabled: item.disabled
+      disabled: disabled
     });
-    var title = itemToElement ? item.text : itemToString(item);
-    return /*#__PURE__*/React__default["default"].createElement(ListBox["default"].MenuItem, _rollupPluginBabelHelpers["extends"]({
+    var title = isObject && 'text' in item && itemToElement ? item.text : itemToString(item);
+    return /*#__PURE__*/React__default["default"].createElement(index$1["default"].MenuItem, _rollupPluginBabelHelpers["extends"]({
       key: itemProps.id,
       isActive: selectedItem === item,
       isHighlighted: highlightedIndex === index || selectedItem === item,
@@ -203,7 +216,7 @@ var Dropdown = /*#__PURE__*/React__default["default"].forwardRef(function Dropdo
       ref: {
         menuItemOptionRef: menuItemOptionRefs.current[index]
       }
-    }, itemProps), itemToElement ? /*#__PURE__*/React__default["default"].createElement(ItemToElement, _rollupPluginBabelHelpers["extends"]({
+    }, itemProps), _rollupPluginBabelHelpers["typeof"](item) === 'object' && ItemToElement !== undefined && ItemToElement !== null ? /*#__PURE__*/React__default["default"].createElement(ItemToElement, _rollupPluginBabelHelpers["extends"]({
       key: itemProps.id
     }, item)) : itemToString(item), selectedItem === item && /*#__PURE__*/React__default["default"].createElement(iconsReact.Checkmark, {
       className: "".concat(prefix, "--list-box__menu-item__selected-icon")
@@ -330,7 +343,7 @@ Dropdown.propTypes = {
    * Provide the title text that will be read by a screen reader when
    * visiting this control
    */
-  titleText: PropTypes__default["default"].node,
+  titleText: PropTypes__default["default"].node.isRequired,
 
   /**
    * Callback function for translating ListBoxMenuIcon SVG title

package/lib/components/Dropdown/index.js

@@ -10,10 +10,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var Dropdown = require('./Dropdown.js');
-var Dropdown_Skeleton = require('./Dropdown.Skeleton.js');
 
 
 
 exports.Dropdown = Dropdown["default"];
 exports["default"] = Dropdown["default"];
-exports.DropdownSkeleton = Dropdown_Skeleton["default"];

package/lib/components/ExpandableSearch/ExpandableSearch.js

@@ -13,7 +13,6 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var React = require('react');
 var cx = require('classnames');
 var Search = require('../Search/Search.js');
-require('../Search/Search.Skeleton.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var events = require('../../tools/events.js');
 

package/lib/components/FileUploader/FileUploader.js

@@ -17,9 +17,9 @@ var React = require('react');
 var Filename = require('./Filename.js');
 var FileUploaderButton = require('./FileUploaderButton.js');
 var types = require('../../prop-types/types.js');
-var keys = require('../../internal/keyboard/keys.js');
-var match = require('../../internal/keyboard/match.js');
 var usePrefix = require('../../internal/usePrefix.js');
+var match = require('../../internal/keyboard/match.js');
+var keys = require('../../internal/keyboard/keys.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/lib/components/FileUploader/FileUploaderButton.js

@@ -13,12 +13,12 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var cx = require('classnames');
 var PropTypes = require('prop-types');
 var React = require('react');
-var keys = require('../../internal/keyboard/keys.js');
-var match = require('../../internal/keyboard/match.js');
 var types = require('../../prop-types/types.js');
 var uniqueId = require('../../tools/uniqueId.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var FeatureFlags = require('@carbon/feature-flags');
+var match = require('../../internal/keyboard/match.js');
+var keys = require('../../internal/keyboard/keys.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/lib/components/FileUploader/FileUploaderDropContainer.js

@@ -13,10 +13,10 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var React = require('react');
 var PropTypes = require('prop-types');
 var cx = require('classnames');
-var keys = require('../../internal/keyboard/keys.js');
-var match = require('../../internal/keyboard/match.js');
 var uniqueId = require('../../tools/uniqueId.js');
 var usePrefix = require('../../internal/usePrefix.js');
+var match = require('../../internal/keyboard/match.js');
+var keys = require('../../internal/keyboard/keys.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/lib/components/FileUploader/FileUploaderItem.js

@@ -14,11 +14,11 @@ var cx = require('classnames');
 var PropTypes = require('prop-types');
 var React = require('react');
 var Filename = require('./Filename.js');
-var keys = require('../../internal/keyboard/keys.js');
-var match = require('../../internal/keyboard/match.js');
 var uniqueId = require('../../tools/uniqueId.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var FeatureFlags = require('@carbon/feature-flags');
+var match = require('../../internal/keyboard/match.js');
+var keys = require('../../internal/keyboard/keys.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/lib/components/FluidComboBox/FluidComboBox.Skeleton.js

@@ -46,5 +46,6 @@ FluidComboBoxSkeleton.propTypes = {
    */
   className: PropTypes__default["default"].string
 };
+var FluidComboBoxSkeleton$1 = FluidComboBoxSkeleton;
 
-exports["default"] = FluidComboBoxSkeleton;
+exports["default"] = FluidComboBoxSkeleton$1;

package/lib/components/FluidComboBox/FluidComboBox.js

@@ -145,5 +145,6 @@ FluidComboBox.propTypes = {
    */
   warnText: PropTypes__default["default"].node
 };
+var FluidComboBox$1 = FluidComboBox;
 
-exports["default"] = FluidComboBox;
+exports["default"] = FluidComboBox$1;

package/lib/components/FluidDatePicker/FluidDatePicker.js

@@ -14,7 +14,6 @@ var PropTypes = require('prop-types');
 var React = require('react');
 var cx = require('classnames');
 var DatePicker = require('../DatePicker/DatePicker.js');
-require('../DatePicker/DatePicker.Skeleton.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var FormContext = require('../FluidForm/FormContext.js');
 
@@ -82,5 +81,6 @@ FluidDatePicker.propTypes = {
    */
   warnText: PropTypes__default["default"].node
 };
+var FluidDatePicker$1 = FluidDatePicker;
 
-exports["default"] = FluidDatePicker;
+exports["default"] = FluidDatePicker$1;

package/lib/components/FluidDatePickerInput/FluidDatePickerInput.js

@@ -29,5 +29,6 @@ var FluidDatePickerInput = /*#__PURE__*/React__default["default"].forwardRef(fun
     ref: ref
   }, other)));
 });
+var FluidDatePickerInput$1 = FluidDatePickerInput;
 
-exports["default"] = FluidDatePickerInput;
+exports["default"] = FluidDatePickerInput$1;

package/lib/components/FluidDropdown/FluidDropdown.Skeleton.js

@@ -46,5 +46,6 @@ FluidDropdownSkeleton.propTypes = {
    */
   className: PropTypes__default["default"].string
 };
+var FluidDropdownSkeleton$1 = FluidDropdownSkeleton;
 
-exports["default"] = FluidDropdownSkeleton;
+exports["default"] = FluidDropdownSkeleton$1;

package/lib/components/FluidDropdown/FluidDropdown.js

@@ -14,7 +14,6 @@ var PropTypes = require('prop-types');
 var React = require('react');
 var cx = require('classnames');
 var Dropdown = require('../Dropdown/Dropdown.js');
-require('../Dropdown/Dropdown.Skeleton.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var FormContext = require('../FluidForm/FormContext.js');
 
@@ -146,5 +145,6 @@ FluidDropdown.propTypes = {
    */
   warnText: PropTypes__default["default"].node
 };
+var FluidDropdown$1 = FluidDropdown;
 
-exports["default"] = FluidDropdown;
+exports["default"] = FluidDropdown$1;

package/lib/components/FluidForm/FluidForm.js

@@ -25,7 +25,7 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _excluded = ["className", "children"];
 
-function FluidForm(_ref) {
+var FluidForm = function FluidForm(_ref) {
   var className = _ref.className,
       children = _ref.children,
       other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
@@ -39,7 +39,7 @@ function FluidForm(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(Form["default"], _rollupPluginBabelHelpers["extends"]({
     className: classNames
   }, other), children));
-}
+};
 
 FluidForm.propTypes = {
   /**

package/lib/components/FluidMultiSelect/FluidMultiSelect.Skeleton.js

@@ -46,5 +46,6 @@ FluidMultiSelectSkeleton.propTypes = {
    */
   className: PropTypes__default["default"].string
 };
+var FluidMultiSelectSkeleton$1 = FluidMultiSelectSkeleton;
 
-exports["default"] = FluidMultiSelectSkeleton;
+exports["default"] = FluidMultiSelectSkeleton$1;

package/lib/components/FluidMultiSelect/FluidMultiSelect.js

@@ -156,5 +156,6 @@ FluidMultiSelect.propTypes = {
    */
   warnText: PropTypes__default["default"].node
 };
+var FluidMultiSelect$1 = FluidMultiSelect;
 
-exports["default"] = FluidMultiSelect;
+exports["default"] = FluidMultiSelect$1;

package/lib/components/FluidSelect/FluidSelect.Skeleton.js

@@ -46,5 +46,6 @@ FluidSelectSkeleton.propTypes = {
    */
   className: PropTypes__default["default"].string
 };
+var FluidSelectSkeleton$1 = FluidSelectSkeleton;
 
-exports["default"] = FluidSelectSkeleton;
+exports["default"] = FluidSelectSkeleton$1;

package/lib/components/FluidSelect/FluidSelect.js

@@ -14,7 +14,6 @@ var PropTypes = require('prop-types');
 var React = require('react');
 var cx = require('classnames');
 var Select = require('../Select/Select.js');
-require('../Select/Select.Skeleton.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var FormContext = require('../FluidForm/FormContext.js');
 
@@ -99,5 +98,6 @@ FluidSelect.propTypes = {
    */
   warnText: PropTypes__default["default"].node
 };
+var FluidSelect$1 = FluidSelect;
 
-exports["default"] = FluidSelect;
+exports["default"] = FluidSelect$1;

package/lib/components/FluidSelect/index.js

@@ -10,10 +10,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var FluidSelect = require('./FluidSelect.js');
-var FluidSelect_Skeleton = require('./FluidSelect.Skeleton.js');
 
 
 
 exports.FluidSelect = FluidSelect["default"];
 exports["default"] = FluidSelect["default"];
-exports.FluidSelectSkeleton = FluidSelect_Skeleton["default"];

package/lib/components/FluidTextArea/FluidTextArea.js

@@ -14,7 +14,6 @@ var PropTypes = require('prop-types');
 var React = require('react');
 var cx = require('classnames');
 var TextArea = require('../TextArea/TextArea.js');
-require('../TextArea/TextArea.Skeleton.js');
 var deprecate = require('../../prop-types/deprecate.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var FormContext = require('../FluidForm/FormContext.js');

package/lib/components/FluidTextInput/FluidTextInput.js

@@ -14,7 +14,6 @@ var PropTypes = require('prop-types');
 var React = require('react');
 var cx = require('classnames');
 require('../TextInput/index.js');
-require('../TextInput/ControlledPasswordInput.js');
 var PasswordInput = require('../TextInput/PasswordInput.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var FormContext = require('../FluidForm/FormContext.js');

package/lib/components/FluidTextInput/index.js

@@ -10,10 +10,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var FluidTextInput = require('./FluidTextInput.js');
-var FluidTextInput_Skeleton = require('./FluidTextInput.Skeleton.js');
 
 
 
 exports.FluidTextInput = FluidTextInput["default"];
 exports["default"] = FluidTextInput["default"];
-exports.FluidTextInputSkeleton = FluidTextInput_Skeleton["default"];

package/lib/components/FluidTimePicker/FluidTimePicker.Skeleton.js

@@ -14,9 +14,7 @@ var PropTypes = require('prop-types');
 var React = require('react');
 var cx = require('classnames');
 var usePrefix = require('../../internal/usePrefix.js');
-require('../FluidTextInput/FluidTextInput.js');
 var FluidTextInput_Skeleton = require('../FluidTextInput/FluidTextInput.Skeleton.js');
-require('../FluidSelect/FluidSelect.js');
 var FluidSelect_Skeleton = require('../FluidSelect/FluidSelect.Skeleton.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -52,5 +50,6 @@ FluidTimePickerSkeleton.propTypes = {
    */
   isOnlyTwo: PropTypes__default["default"].bool
 };
+var FluidTimePickerSkeleton$1 = FluidTimePickerSkeleton;
 
-exports["default"] = FluidTimePickerSkeleton;
+exports["default"] = FluidTimePickerSkeleton$1;

package/lib/components/FluidTimePicker/FluidTimePicker.js

@@ -14,7 +14,6 @@ var PropTypes = require('prop-types');
 var React = require('react');
 var cx = require('classnames');
 var FluidTextInput = require('../FluidTextInput/FluidTextInput.js');
-require('../FluidTextInput/FluidTextInput.Skeleton.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var iconsReact = require('@carbon/icons-react');
 
@@ -116,5 +115,6 @@ FluidTimePicker.propTypes = {
    */
   warnText: PropTypes__default["default"].node
 };
+var FluidTimePicker$1 = FluidTimePicker;
 
-exports["default"] = FluidTimePicker;
+exports["default"] = FluidTimePicker$1;

package/lib/components/FluidTimePickerSelect/FluidTimePickerSelect.js

@@ -13,7 +13,6 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var React = require('react');
 var PropTypes = require('prop-types');
 var FluidSelect = require('../FluidSelect/FluidSelect.js');
-require('../FluidSelect/FluidSelect.Skeleton.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -69,5 +68,6 @@ FluidTimePickerSelect.propTypes = {
    */
   onChange: PropTypes__default["default"].func
 };
+var FluidTimePickerSelect$1 = FluidTimePickerSelect;
 
-exports["default"] = FluidTimePickerSelect;
+exports["default"] = FluidTimePickerSelect$1;

package/lib/components/Form/Form.js

@@ -46,5 +46,6 @@ Form.propTypes = {
    */
   className: PropTypes__default["default"].string
 };
+var Form$1 = Form;
 
-exports["default"] = Form;
+exports["default"] = Form$1;

package/lib/components/FormGroup/FormGroup.js

@@ -91,5 +91,6 @@ FormGroup.defaultProps = {
   message: false,
   messageText: ''
 };
+var FormGroup$1 = FormGroup;
 
-exports["default"] = FormGroup;
+exports["default"] = FormGroup$1;

package/lib/components/IconButton/index.js

@@ -13,8 +13,6 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var PropTypes = require('prop-types');
 var React = require('react');
 var Button = require('../Button/Button.js');
-require('../Button/Button.Skeleton.js');
-require('../Tooltip/DefinitionTooltip.js');
 var Tooltip = require('../Tooltip/Tooltip.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var cx = require('classnames');

package/lib/components/InlineCheckbox/InlineCheckbox.js

@@ -19,6 +19,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
+/** @type any */
+
 var InlineCheckbox = /*#__PURE__*/React__default["default"].forwardRef(function InlineCheckbox(props, forwardRef) {
   var ariaLabel = props.ariaLabel,
       _props$checked = props.checked,
@@ -125,5 +127,6 @@ InlineCheckbox.propTypes = {
    */
   title: PropTypes__default["default"].string
 };
+var InlineCheckbox$1 = InlineCheckbox;
 
-exports["default"] = InlineCheckbox;
+exports["default"] = InlineCheckbox$1;

package/lib/components/Link/Link.js

@@ -103,5 +103,6 @@ Link.propTypes = {
    */
   visited: PropTypes__default["default"].bool
 };
+var Link$1 = Link;
 
-exports["default"] = Link;
+exports["default"] = Link$1;

package/lib/components/ListBox/ListBox.js

@@ -16,11 +16,6 @@ var PropTypes = require('prop-types');
 var deprecate = require('../../prop-types/deprecate.js');
 var ListBoxPropTypes = require('./ListBoxPropTypes.js');
 var usePrefix = require('../../internal/usePrefix.js');
-var ListBoxField = require('./ListBoxField.js');
-var ListBoxMenu = require('./ListBoxMenu.js');
-var ListBoxMenuIcon = require('./ListBoxMenuIcon.js');
-var ListBoxMenuItem = require('./ListBoxMenuItem.js');
-var ListBoxSelection = require('./ListBoxSelection.js');
 require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
 
@@ -42,14 +37,13 @@ var handleClick = function handleClick(event) {
   event.preventDefault();
   event.stopPropagation();
 };
+
 /**
  * `ListBox` is a generic container component that handles creating the
  * container class name in response to certain props.
  */
-
-
 var ListBox = /*#__PURE__*/React__default["default"].forwardRef(function ListBox(_ref, ref) {
-  var _cx;
+  var _objectSpread2;
 
   var children = _ref.children,
       containerClassName = _ref.className,
@@ -70,7 +64,7 @@ var ListBox = /*#__PURE__*/React__default["default"].forwardRef(function ListBox
       isFluid = _useContext.isFluid;
 
   var showWarning = !invalid && warn;
-  var className = cx__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, containerClassName, !!containerClassName), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box--").concat(size), size), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box--inline"), type === 'inline'), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box--light"), light), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box--expanded"), isOpen), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box--invalid"), invalid), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box--warning"), showWarning), _cx));
+  var className = cx__default["default"](_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, containerClassName && _rollupPluginBabelHelpers.defineProperty({}, containerClassName, true)), {}, (_objectSpread2 = {}, _rollupPluginBabelHelpers.defineProperty(_objectSpread2, "".concat(prefix, "--list-box"), true), _rollupPluginBabelHelpers.defineProperty(_objectSpread2, "".concat(prefix, "--list-box--").concat(size), size), _rollupPluginBabelHelpers.defineProperty(_objectSpread2, "".concat(prefix, "--list-box--inline"), type === 'inline'), _rollupPluginBabelHelpers.defineProperty(_objectSpread2, "".concat(prefix, "--list-box--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty(_objectSpread2, "".concat(prefix, "--list-box--light"), light), _rollupPluginBabelHelpers.defineProperty(_objectSpread2, "".concat(prefix, "--list-box--expanded"), isOpen), _rollupPluginBabelHelpers.defineProperty(_objectSpread2, "".concat(prefix, "--list-box--invalid"), invalid), _rollupPluginBabelHelpers.defineProperty(_objectSpread2, "".concat(prefix, "--list-box--warning"), showWarning), _objectSpread2)));
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
     className: className,
     ref: ref,
@@ -148,10 +142,5 @@ ListBox.defaultProps = {
   disabled: false,
   type: 'default'
 };
-ListBox.Field = ListBoxField["default"];
-ListBox.Menu = ListBoxMenu["default"];
-ListBox.MenuIcon = ListBoxMenuIcon["default"];
-ListBox.MenuItem = ListBoxMenuItem["default"];
-ListBox.Selection = ListBoxSelection["default"];
 
 exports["default"] = ListBox;

package/lib/components/ListBox/ListBoxField.js

@@ -20,12 +20,12 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
 var _excluded = ["children", "disabled", "tabIndex"];
+
 /**
  * `ListBoxField` is responsible for creating the containing node for valid
  * elements inside of a field. It also provides a11y-related attributes like
  * `role` to make sure a user can focus the given field.
  */
-
 function ListBoxField(_ref) {
   var children = _ref.children,
       disabled = _ref.disabled,

package/lib/components/ListBox/ListBoxMenu.js

@@ -21,12 +21,12 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
 var _excluded = ["children", "id"];
+
 /**
  * `ListBoxMenu` is a simple container node that isolates the `list-box__menu`
  * class into a single component. It is also being used to validate given
  * `children` components.
  */
-
 var ListBoxMenu = /*#__PURE__*/React__default["default"].forwardRef(function ListBoxMenu(_ref, ref) {
   var children = _ref.children,
       id = _ref.id,
@@ -45,7 +45,7 @@ ListBoxMenu.propTypes = {
   /**
    * Provide the contents of your ListBoxMenu
    */
-  children: PropTypes__default["default"].oneOfType([PropTypes__default["default"].node, PropTypes__default["default"].arrayOf(ListBoxMenuItem["default"]),
+  children: PropTypes__default["default"].oneOfType([PropTypes__default["default"].node, PropTypes__default["default"].arrayOf(PropTypes__default["default"].oneOf([ListBoxMenuItem["default"]])),
   /**
    * allow single item using the workaround for functional components
    * https://github.com/facebook/react/issues/2979#issuecomment-222379916

package/lib/components/ListBox/ListBoxMenuIcon.js

@@ -28,14 +28,19 @@ var translationIds = {
   'open.menu': 'open.menu'
 };
 var defaultTranslations = (_defaultTranslations = {}, _rollupPluginBabelHelpers.defineProperty(_defaultTranslations, translationIds['close.menu'], 'Close menu'), _rollupPluginBabelHelpers.defineProperty(_defaultTranslations, translationIds['open.menu'], 'Open menu'), _defaultTranslations);
+
+var defaultTranslateWithId = function defaultTranslateWithId(id) {
+  return defaultTranslations[id];
+};
+
 /**
  * `ListBoxMenuIcon` is used to orient the icon up or down depending on the
  * state of the menu for a given `ListBox`
  */
-
 var ListBoxMenuIcon = function ListBoxMenuIcon(_ref) {
   var isOpen = _ref.isOpen,
-      t = _ref.translateWithId;
+      _ref$translateWithId = _ref.translateWithId,
+      t = _ref$translateWithId === void 0 ? defaultTranslateWithId : _ref$translateWithId;
   var prefix = usePrefix.usePrefix();
   var className = cx__default["default"]("".concat(prefix, "--list-box__menu-icon"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--list-box__menu-icon--open"), isOpen));
   var description = isOpen ? t('close.menu') : t('open.menu');
@@ -62,9 +67,7 @@ ListBoxMenuIcon.propTypes = {
   translateWithId: PropTypes__default["default"].func.isRequired
 };
 ListBoxMenuIcon.defaultProps = {
-  translateWithId: function translateWithId(id) {
-    return defaultTranslations[id];
-  }
+  translateWithId: defaultTranslateWithId
 };
 
 exports["default"] = ListBoxMenuIcon;