@carbon/react 1.21.0 → 1.22.0-rc.0

package/es/components/Dropdown/Dropdown.js

@@ -5,13 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { typeof as _typeof, objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useContext, useState, useRef } from 'react';
 import { useSelect } from 'downshift';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import { WarningFilled, WarningAltFilled, Checkmark } from '@carbon/icons-react';
-import '../ListBox/index.js';
+import ListBox from '../ListBox/index.js';
 import mergeRefs from '../../tools/mergeRefs.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
@@ -19,7 +19,6 @@ import { usePrefix } from '../../internal/usePrefix.js';
 import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 import { ListBoxSize, ListBoxType } from '../ListBox/ListBoxPropTypes.js';
-import ListBox from '../ListBox/ListBox.js';
 
 var _excluded = ["className", "disabled", "direction", "items", "label", "ariaLabel", "itemToString", "itemToElement", "renderSelectedItem", "type", "size", "onChange", "id", "titleText", "hideLabel", "helperText", "translateWithId", "light", "invalid", "invalidText", "warn", "warnText", "initialSelectedItem", "selectedItem", "downshiftProps", "readOnly"];
 
@@ -28,10 +27,18 @@ var defaultItemToString = function defaultItemToString(item) {
     return item;
   }
 
-  return item ? item.label : '';
+  if (typeof item === 'number') {
+    return "".concat(item);
+  }
+
+  if (item !== null && _typeof(item) === 'object' && 'label' in item && typeof item['label'] === 'string') {
+    return item['label'];
+  }
+
+  return '';
 };
 
-var Dropdown = /*#__PURE__*/React__default.forwardRef(function Dropdown(_ref, ref) {
+var Dropdown = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var _cx, _cx2, _cx4;
 
   var containerClassName = _ref.className,
@@ -40,7 +47,8 @@ var Dropdown = /*#__PURE__*/React__default.forwardRef(function Dropdown(_ref, re
       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,
@@ -115,7 +123,7 @@ var Dropdown = /*#__PURE__*/React__default.forwardRef(function Dropdown(_ref, re
 
     if (onChange) {
       onChange({
-        selectedItem: selectedItem
+        selectedItem: selectedItem !== null && selectedItem !== void 0 ? selectedItem : null
       });
     }
   }
@@ -128,12 +136,15 @@ var Dropdown = /*#__PURE__*/React__default.forwardRef(function Dropdown(_ref, re
     setIsFocused(evt.type === 'focus' ? true : false);
   };
 
+  var mergedRef = mergeRefs(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
@@ -170,21 +181,23 @@ var Dropdown = /*#__PURE__*/React__default.forwardRef(function Dropdown(_ref, re
     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(toggleButtonProps.ref, ref)
+    ref: mergedRef
   }), /*#__PURE__*/React__default.createElement("span", {
     className: "".concat(prefix, "--list-box__label")
   }, selectedItem ? renderSelectedItem ? renderSelectedItem(selectedItem) : itemToString(selectedItem) : label), /*#__PURE__*/React__default.createElement(ListBox.MenuIcon, {
     isOpen: isOpen,
     translateWithId: translateWithId
   })), /*#__PURE__*/React__default.createElement(ListBox.Menu, getMenuProps(), isOpen && items.map(function (item, index) {
+    var isObject = item !== null && _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);
+    var title = isObject && 'text' in item && itemToElement ? item.text : itemToString(item);
     return /*#__PURE__*/React__default.createElement(ListBox.MenuItem, _extends({
       key: itemProps.id,
       isActive: selectedItem === item,
@@ -193,7 +206,7 @@ var Dropdown = /*#__PURE__*/React__default.forwardRef(function Dropdown(_ref, re
       ref: {
         menuItemOptionRef: menuItemOptionRefs.current[index]
       }
-    }, itemProps), itemToElement ? /*#__PURE__*/React__default.createElement(ItemToElement, _extends({
+    }, itemProps), _typeof(item) === 'object' && ItemToElement !== undefined && ItemToElement !== null ? /*#__PURE__*/React__default.createElement(ItemToElement, _extends({
       key: itemProps.id
     }, item)) : itemToString(item), selectedItem === item && /*#__PURE__*/React__default.createElement(Checkmark, {
       className: "".concat(prefix, "--list-box__menu-item__selected-icon")
@@ -320,7 +333,7 @@ Dropdown.propTypes = {
    * Provide the title text that will be read by a screen reader when
    * visiting this control
    */
-  titleText: PropTypes.node,
+  titleText: PropTypes.node.isRequired,
 
   /**
    * Callback function for translating ListBoxMenuIcon SVG title

package/es/components/Dropdown/index.js

@@ -7,4 +7,3 @@
 
 import Dropdown from './Dropdown.js';
 export { default as Dropdown, default } from './Dropdown.js';
-export { default as DropdownSkeleton } from './Dropdown.Skeleton.js';

package/es/components/ExpandableSearch/ExpandableSearch.js

@@ -9,7 +9,6 @@ import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _
 import React__default, { useState, useRef } from 'react';
 import cx from 'classnames';
 import Search from '../Search/Search.js';
-import '../Search/Search.Skeleton.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { composeEventHandlers } from '../../tools/events.js';
 

package/es/components/FileUploader/FileUploader.js

@@ -13,9 +13,9 @@ import React__default from 'react';
 import Filename from './Filename.js';
 import FileUploaderButton from './FileUploaderButton.js';
 import { ButtonKinds } from '../../prop-types/types.js';
-import { Enter, Space } from '../../internal/keyboard/keys.js';
-import { matches } from '../../internal/keyboard/match.js';
 import { PrefixContext } from '../../internal/usePrefix.js';
+import { matches } from '../../internal/keyboard/match.js';
+import { Enter, Space } from '../../internal/keyboard/keys.js';
 
 var _excluded = ["iconDescription", "buttonLabel", "buttonKind", "disabled", "filenameStatus", "labelDescription", "labelTitle", "className", "multiple", "accept", "name", "size", "onDelete"];
 

package/es/components/FileUploader/FileUploaderButton.js

@@ -9,12 +9,12 @@ import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React__default, { useState, useRef } from 'react';
-import { Enter, Space } from '../../internal/keyboard/keys.js';
-import { matches } from '../../internal/keyboard/match.js';
 import { ButtonKinds } from '../../prop-types/types.js';
 import uniqueId from '../../tools/uniqueId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import * as FeatureFlags from '@carbon/feature-flags';
+import { matches } from '../../internal/keyboard/match.js';
+import { Enter, Space } from '../../internal/keyboard/keys.js';
 
 var _excluded = ["accept", "buttonKind", "className", "disabled", "disableLabelChanges", "id", "labelText", "multiple", "onChange", "role", "name", "size", "tabIndex", "innerRef"];
 

package/es/components/FileUploader/FileUploaderDropContainer.js

@@ -9,10 +9,10 @@ import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _
 import React__default, { useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { Enter, Space } from '../../internal/keyboard/keys.js';
-import { matches } from '../../internal/keyboard/match.js';
 import uniqueId from '../../tools/uniqueId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
+import { matches } from '../../internal/keyboard/match.js';
+import { Enter, Space } from '../../internal/keyboard/keys.js';
 
 var _excluded = ["accept", "className", "id", "disabled", "labelText", "multiple", "name", "onAddFiles", "pattern", "role", "tabIndex", "innerRef"];
 

package/es/components/FileUploader/FileUploaderItem.js

@@ -10,11 +10,11 @@ import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React__default, { useRef } from 'react';
 import Filename from './Filename.js';
-import { Enter, Space } from '../../internal/keyboard/keys.js';
-import { matches } from '../../internal/keyboard/match.js';
 import uniqueId from '../../tools/uniqueId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import * as FeatureFlags from '@carbon/feature-flags';
+import { matches } from '../../internal/keyboard/match.js';
+import { Enter, Space } from '../../internal/keyboard/keys.js';
 
 var _excluded = ["uuid", "name", "status", "iconDescription", "onDelete", "invalid", "errorSubject", "errorBody", "size"];
 

package/es/components/FluidComboBox/FluidComboBox.Skeleton.js

@@ -36,5 +36,6 @@ FluidComboBoxSkeleton.propTypes = {
    */
   className: PropTypes.string
 };
+var FluidComboBoxSkeleton$1 = FluidComboBoxSkeleton;
 
-export { FluidComboBoxSkeleton as default };
+export { FluidComboBoxSkeleton$1 as default };

package/es/components/FluidComboBox/FluidComboBox.js

@@ -135,5 +135,6 @@ FluidComboBox.propTypes = {
    */
   warnText: PropTypes.node
 };
+var FluidComboBox$1 = FluidComboBox;
 
-export { FluidComboBox as default };
+export { FluidComboBox$1 as default };

package/es/components/FluidDatePicker/FluidDatePicker.js

@@ -10,7 +10,6 @@ import PropTypes from 'prop-types';
 import React__default from 'react';
 import cx from 'classnames';
 import DatePicker from '../DatePicker/DatePicker.js';
-import '../DatePicker/DatePicker.Skeleton.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 
@@ -72,5 +71,6 @@ FluidDatePicker.propTypes = {
    */
   warnText: PropTypes.node
 };
+var FluidDatePicker$1 = FluidDatePicker;
 
-export { FluidDatePicker as default };
+export { FluidDatePicker$1 as default };

package/es/components/FluidDatePickerInput/FluidDatePickerInput.js

@@ -21,5 +21,6 @@ var FluidDatePickerInput = /*#__PURE__*/React__default.forwardRef(function Fluid
     ref: ref
   }, other)));
 });
+var FluidDatePickerInput$1 = FluidDatePickerInput;
 
-export { FluidDatePickerInput as default };
+export { FluidDatePickerInput$1 as default };

package/es/components/FluidDropdown/FluidDropdown.Skeleton.js

@@ -36,5 +36,6 @@ FluidDropdownSkeleton.propTypes = {
    */
   className: PropTypes.string
 };
+var FluidDropdownSkeleton$1 = FluidDropdownSkeleton;
 
-export { FluidDropdownSkeleton as default };
+export { FluidDropdownSkeleton$1 as default };

package/es/components/FluidDropdown/FluidDropdown.js

@@ -10,7 +10,6 @@ import PropTypes from 'prop-types';
 import React__default from 'react';
 import cx from 'classnames';
 import Dropdown from '../Dropdown/Dropdown.js';
-import '../Dropdown/Dropdown.Skeleton.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 
@@ -136,5 +135,6 @@ FluidDropdown.propTypes = {
    */
   warnText: PropTypes.node
 };
+var FluidDropdown$1 = FluidDropdown;
 
-export { FluidDropdown as default };
+export { FluidDropdown$1 as default };

package/es/components/FluidForm/FluidForm.js

@@ -15,7 +15,7 @@ import { usePrefix } from '../../internal/usePrefix.js';
 
 var _excluded = ["className", "children"];
 
-function FluidForm(_ref) {
+var FluidForm = function FluidForm(_ref) {
   var className = _ref.className,
       children = _ref.children,
       other = _objectWithoutProperties(_ref, _excluded);
@@ -29,7 +29,7 @@ function FluidForm(_ref) {
   }, /*#__PURE__*/React__default.createElement(Form, _extends({
     className: classNames
   }, other), children));
-}
+};
 
 FluidForm.propTypes = {
   /**

package/es/components/FluidMultiSelect/FluidMultiSelect.Skeleton.js

@@ -36,5 +36,6 @@ FluidMultiSelectSkeleton.propTypes = {
    */
   className: PropTypes.string
 };
+var FluidMultiSelectSkeleton$1 = FluidMultiSelectSkeleton;
 
-export { FluidMultiSelectSkeleton as default };
+export { FluidMultiSelectSkeleton$1 as default };

package/es/components/FluidMultiSelect/FluidMultiSelect.js

@@ -146,5 +146,6 @@ FluidMultiSelect.propTypes = {
    */
   warnText: PropTypes.node
 };
+var FluidMultiSelect$1 = FluidMultiSelect;
 
-export { FluidMultiSelect as default };
+export { FluidMultiSelect$1 as default };

package/es/components/FluidSelect/FluidSelect.Skeleton.js

@@ -36,5 +36,6 @@ FluidSelectSkeleton.propTypes = {
    */
   className: PropTypes.string
 };
+var FluidSelectSkeleton$1 = FluidSelectSkeleton;
 
-export { FluidSelectSkeleton as default };
+export { FluidSelectSkeleton$1 as default };

package/es/components/FluidSelect/FluidSelect.js

@@ -10,7 +10,6 @@ import PropTypes from 'prop-types';
 import React__default from 'react';
 import cx from 'classnames';
 import Select from '../Select/Select.js';
-import '../Select/Select.Skeleton.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 
@@ -89,5 +88,6 @@ FluidSelect.propTypes = {
    */
   warnText: PropTypes.node
 };
+var FluidSelect$1 = FluidSelect;
 
-export { FluidSelect as default };
+export { FluidSelect$1 as default };

package/es/components/FluidSelect/index.js

@@ -7,4 +7,3 @@
 
 import FluidSelect from './FluidSelect.js';
 export { default as FluidSelect, default } from './FluidSelect.js';
-export { default as FluidSelectSkeleton } from './FluidSelect.Skeleton.js';

package/es/components/FluidTextArea/FluidTextArea.js

@@ -10,7 +10,6 @@ import PropTypes from 'prop-types';
 import React__default from 'react';
 import cx from 'classnames';
 import TextArea from '../TextArea/TextArea.js';
-import '../TextArea/TextArea.Skeleton.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { FormContext } from '../FluidForm/FormContext.js';

package/es/components/FluidTextInput/FluidTextInput.js

@@ -10,7 +10,6 @@ import PropTypes from 'prop-types';
 import React__default from 'react';
 import cx from 'classnames';
 import '../TextInput/index.js';
-import '../TextInput/ControlledPasswordInput.js';
 import PasswordInput from '../TextInput/PasswordInput.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { FormContext } from '../FluidForm/FormContext.js';

package/es/components/FluidTextInput/index.js

@@ -7,4 +7,3 @@
 
 import FluidTextInput from './FluidTextInput.js';
 export { default as FluidTextInput, default } from './FluidTextInput.js';
-export { default as FluidTextInputSkeleton } from './FluidTextInput.Skeleton.js';

package/es/components/FluidTimePicker/FluidTimePicker.Skeleton.js

@@ -10,9 +10,7 @@ import PropTypes from 'prop-types';
 import React__default from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
-import '../FluidTextInput/FluidTextInput.js';
 import FluidTextInputSkeleton from '../FluidTextInput/FluidTextInput.Skeleton.js';
-import '../FluidSelect/FluidSelect.js';
 import FluidSelectSkeleton from '../FluidSelect/FluidSelect.Skeleton.js';
 
 var _FluidTextInputSkelet, _FluidSelectSkeleton, _FluidSelectSkeleton2;
@@ -42,5 +40,6 @@ FluidTimePickerSkeleton.propTypes = {
    */
   isOnlyTwo: PropTypes.bool
 };
+var FluidTimePickerSkeleton$1 = FluidTimePickerSkeleton;
 
-export { FluidTimePickerSkeleton as default };
+export { FluidTimePickerSkeleton$1 as default };

package/es/components/FluidTimePicker/FluidTimePicker.js

@@ -10,7 +10,6 @@ import PropTypes from 'prop-types';
 import React__default from 'react';
 import cx from 'classnames';
 import FluidTextInput from '../FluidTextInput/FluidTextInput.js';
-import '../FluidTextInput/FluidTextInput.Skeleton.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
 
@@ -106,5 +105,6 @@ FluidTimePicker.propTypes = {
    */
   warnText: PropTypes.node
 };
+var FluidTimePicker$1 = FluidTimePicker;
 
-export { FluidTimePicker as default };
+export { FluidTimePicker$1 as default };

package/es/components/FluidTimePickerSelect/FluidTimePickerSelect.js

@@ -9,7 +9,6 @@ import { objectWithoutProperties as _objectWithoutProperties, extends as _extend
 import React__default from 'react';
 import PropTypes from 'prop-types';
 import FluidSelect from '../FluidSelect/FluidSelect.js';
-import '../FluidSelect/FluidSelect.Skeleton.js';
 
 var _excluded = ["children", "className"];
 var FluidTimePickerSelect = /*#__PURE__*/React__default.forwardRef(function FluidTimePickerSelect(_ref, ref) {
@@ -60,5 +59,6 @@ FluidTimePickerSelect.propTypes = {
    */
   onChange: PropTypes.func
 };
+var FluidTimePickerSelect$1 = FluidTimePickerSelect;
 
-export { FluidTimePickerSelect as default };
+export { FluidTimePickerSelect$1 as default };

package/es/components/Form/Form.js

@@ -36,5 +36,6 @@ Form.propTypes = {
    */
   className: PropTypes.string
 };
+var Form$1 = Form;
 
-export { Form as default };
+export { Form$1 as default };

package/es/components/FormGroup/FormGroup.js

@@ -81,5 +81,6 @@ FormGroup.defaultProps = {
   message: false,
   messageText: ''
 };
+var FormGroup$1 = FormGroup;
 
-export { FormGroup as default };
+export { FormGroup$1 as default };

package/es/components/IconButton/index.js

@@ -9,8 +9,6 @@ import { objectWithoutProperties as _objectWithoutProperties, extends as _extend
 import PropTypes from 'prop-types';
 import React__default from 'react';
 import Button from '../Button/Button.js';
-import '../Button/Button.Skeleton.js';
-import '../Tooltip/DefinitionTooltip.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import cx from 'classnames';

package/es/components/InlineCheckbox/InlineCheckbox.js

@@ -10,6 +10,8 @@ import React__default, { useRef, useEffect } from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
 
+/** @type any */
+
 var InlineCheckbox = /*#__PURE__*/React__default.forwardRef(function InlineCheckbox(props, forwardRef) {
   var ariaLabel = props.ariaLabel,
       _props$checked = props.checked,
@@ -116,5 +118,6 @@ InlineCheckbox.propTypes = {
    */
   title: PropTypes.string
 };
+var InlineCheckbox$1 = InlineCheckbox;
 
-export { InlineCheckbox as default };
+export { InlineCheckbox$1 as default };

package/es/components/Link/Link.js

@@ -93,5 +93,6 @@ Link.propTypes = {
    */
   visited: PropTypes.bool
 };
+var Link$1 = Link;
 
-export { Link as default };
+export { Link$1 as default };

package/es/components/ListBox/ListBox.js

@@ -5,18 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import React__default, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import deprecate from '../../prop-types/deprecate.js';
 import { ListBoxSize, ListBoxType } from './ListBoxPropTypes.js';
 import { usePrefix } from '../../internal/usePrefix.js';
-import ListBoxField from './ListBoxField.js';
-import ListBoxMenu from './ListBoxMenu.js';
-import ListBoxMenuIcon from './ListBoxMenuIcon.js';
-import ListBoxMenuItem from './ListBoxMenuItem.js';
-import ListBoxSelection from './ListBoxSelection.js';
 import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 
@@ -32,14 +27,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.forwardRef(function ListBox(_ref, ref) {
-  var _cx;
+  var _objectSpread2$1;
 
   var children = _ref.children,
       containerClassName = _ref.className,
@@ -60,7 +54,7 @@ var ListBox = /*#__PURE__*/React__default.forwardRef(function ListBox(_ref, ref)
       isFluid = _useContext.isFluid;
 
   var showWarning = !invalid && warn;
-  var className = cx((_cx = {}, _defineProperty(_cx, containerClassName, !!containerClassName), _defineProperty(_cx, "".concat(prefix, "--list-box"), true), _defineProperty(_cx, "".concat(prefix, "--list-box--").concat(size), size), _defineProperty(_cx, "".concat(prefix, "--list-box--inline"), type === 'inline'), _defineProperty(_cx, "".concat(prefix, "--list-box--disabled"), disabled), _defineProperty(_cx, "".concat(prefix, "--list-box--light"), light), _defineProperty(_cx, "".concat(prefix, "--list-box--expanded"), isOpen), _defineProperty(_cx, "".concat(prefix, "--list-box--invalid"), invalid), _defineProperty(_cx, "".concat(prefix, "--list-box--warning"), showWarning), _cx));
+  var className = cx(_objectSpread2(_objectSpread2({}, containerClassName && _defineProperty({}, containerClassName, true)), {}, (_objectSpread2$1 = {}, _defineProperty(_objectSpread2$1, "".concat(prefix, "--list-box"), true), _defineProperty(_objectSpread2$1, "".concat(prefix, "--list-box--").concat(size), size), _defineProperty(_objectSpread2$1, "".concat(prefix, "--list-box--inline"), type === 'inline'), _defineProperty(_objectSpread2$1, "".concat(prefix, "--list-box--disabled"), disabled), _defineProperty(_objectSpread2$1, "".concat(prefix, "--list-box--light"), light), _defineProperty(_objectSpread2$1, "".concat(prefix, "--list-box--expanded"), isOpen), _defineProperty(_objectSpread2$1, "".concat(prefix, "--list-box--invalid"), invalid), _defineProperty(_objectSpread2$1, "".concat(prefix, "--list-box--warning"), showWarning), _objectSpread2$1)));
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
     className: className,
     ref: ref,
@@ -138,10 +132,5 @@ ListBox.defaultProps = {
   disabled: false,
   type: 'default'
 };
-ListBox.Field = ListBoxField;
-ListBox.Menu = ListBoxMenu;
-ListBox.MenuIcon = ListBoxMenuIcon;
-ListBox.MenuItem = ListBoxMenuItem;
-ListBox.Selection = ListBoxSelection;
 
 export { ListBox as default };

package/es/components/ListBox/ListBoxField.js

@@ -11,12 +11,12 @@ import PropTypes from 'prop-types';
 import { usePrefix } from '../../internal/usePrefix.js';
 
 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/es/components/ListBox/ListBoxMenu.js

@@ -12,12 +12,12 @@ import PropTypes from 'prop-types';
 import ListBoxMenuItem from './ListBoxMenuItem.js';
 
 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.forwardRef(function ListBoxMenu(_ref, ref) {
   var children = _ref.children,
       id = _ref.id,
@@ -36,7 +36,7 @@ ListBoxMenu.propTypes = {
   /**
    * Provide the contents of your ListBoxMenu
    */
-  children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(ListBoxMenuItem),
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.oneOf([ListBoxMenuItem])),
   /**
    * allow single item using the workaround for functional components
    * https://github.com/facebook/react/issues/2979#issuecomment-222379916

package/es/components/ListBox/ListBoxMenuIcon.js

@@ -18,14 +18,19 @@ var translationIds = {
   'open.menu': 'open.menu'
 };
 var defaultTranslations = (_defaultTranslations = {}, _defineProperty(_defaultTranslations, translationIds['close.menu'], 'Close menu'), _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();
   var className = cx("".concat(prefix, "--list-box__menu-icon"), _defineProperty({}, "".concat(prefix, "--list-box__menu-icon--open"), isOpen));
   var description = isOpen ? t('close.menu') : t('open.menu');
@@ -52,9 +57,7 @@ ListBoxMenuIcon.propTypes = {
   translateWithId: PropTypes.func.isRequired
 };
 ListBoxMenuIcon.defaultProps = {
-  translateWithId: function translateWithId(id) {
-    return defaultTranslations[id];
-  }
+  translateWithId: defaultTranslateWithId
 };
 
 export { ListBoxMenuIcon as default, translationIds };

package/es/components/ListBox/ListBoxMenuItem.js

@@ -27,13 +27,12 @@ function useIsTruncated(ref) {
   }, [ref, setIsTruncated]);
   return isTruncated;
 }
+
 /**
  * `ListBoxMenuItem` is a helper component for managing the container class
  * name, alongside any classes for any corresponding states, for a generic list
  * box menu item.
  */
-
-
 var ListBoxMenuItem = /*#__PURE__*/React__default.forwardRef(function ListBoxMenuItem(_ref, forwardedRef) {
   var _cx;
 
@@ -50,7 +49,7 @@ var ListBoxMenuItem = /*#__PURE__*/React__default.forwardRef(function ListBoxMen
   return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
     className: className,
     title: isTruncated ? title : undefined,
-    tabIndex: "-1"
+    tabIndex: -1
   }), /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(prefix, "--list-box__menu-item__option"),
     ref: (forwardedRef === null || forwardedRef === void 0 ? void 0 : forwardedRef.menuItemOptionRef) || ref

package/es/components/ListBox/ListBoxPropTypes.js

@@ -7,7 +7,9 @@
 
 import PropTypes from 'prop-types';
 
-var ListBoxType = PropTypes.oneOf(['default', 'inline']);
-var ListBoxSize = PropTypes.oneOf(['sm', 'md', 'lg']);
+var listBoxTypes = ['default', 'inline'];
+var listBoxSizes = ['sm', 'md', 'lg'];
+var ListBoxType = PropTypes.oneOf(listBoxTypes);
+var ListBoxSize = PropTypes.oneOf(listBoxSizes);
 
 export { ListBoxSize, ListBoxType };