@carbon/react 1.15.0-rc.0 → 1.16.0-rc.0

package/es/components/CodeSnippet/CodeSnippet.js

@@ -16,6 +16,7 @@ import Button from '../Button/Button.js';
 import CopyButton from '../CopyButton/CopyButton.js';
 import uniqueId from '../../tools/uniqueId.js';
 import copy from 'copy-to-clipboard';
+import deprecate from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
 var _excluded = ["className", "type", "children", "disabled", "feedback", "feedbackTimeout", "onClick", "ariaLabel", "copyText", "copyButtonDescription", "light", "showMoreText", "showLessText", "hideCopyButton", "wrapText", "maxCollapsedNumberOfRows", "maxExpandedNumberOfRows", "minCollapsedNumberOfRows", "minExpandedNumberOfRows"];
@@ -303,7 +304,7 @@ CodeSnippet.propTypes = {
    * Specify whether you are using the light variant of the Code Snippet,
    * typically used for inline snippet to display an alternate color
    */
-  light: PropTypes.bool,
+  light: deprecate(PropTypes.bool, 'The `light` prop for `CodeSnippet` has ' + 'been deprecated in favor of the new `Layer` component. It will be removed in the next major release.'),
 
   /**
    * Specify the maximum number of rows to be shown when in collapsed view

package/es/components/ComboBox/ComboBox.js

@@ -9,14 +9,16 @@ import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _
 import cx from 'classnames';
 import Downshift from 'downshift';
 import PropTypes from 'prop-types';
-import React__default, { useRef, useState, useEffect } from 'react';
+import React__default, { useContext, useRef, useState, useEffect } from 'react';
 import '../Text/index.js';
 import { WarningFilled, WarningAltFilled, Checkmark } from '@carbon/icons-react';
 import '../ListBox/index.js';
 import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
 import mergeRefs from '../../tools/mergeRefs.js';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
+import deprecate from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
+import { FormContext } from '../FluidForm/FormContext.js';
 import { match } from '../../internal/keyboard/match.js';
 import { Text } from '../Text/Text.js';
 import ListBox from '../ListBox/ListBox.js';
@@ -79,7 +81,7 @@ var findHighlightedIndex = function findHighlightedIndex(_ref2, inputValue) {
 
 var getInstanceId = setupGetInstanceId();
 var ComboBox = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
-  var _cx, _Text;
+  var _cx, _ref4, _Text;
 
   var ariaLabel = props.ariaLabel,
       containerClassName = props.className,
@@ -111,6 +113,10 @@ var ComboBox = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
       var rest = _objectWithoutProperties(props, _excluded);
 
   var prefix = usePrefix();
+
+  var _useContext = useContext(FormContext),
+      isFluid = _useContext.isFluid;
+
   var textInput = useRef();
   var comboBoxInstanceId = getInstanceId();
 
@@ -124,15 +130,20 @@ var ComboBox = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
       inputValue = _useState2[0],
       setInputValue = _useState2[1];
 
-  var _useState3 = useState(null),
+  var _useState3 = useState(false),
       _useState4 = _slicedToArray(_useState3, 2),
-      prevSelectedItem = _useState4[0],
-      setPrevSelectedItem = _useState4[1];
+      isFocused = _useState4[0],
+      setIsFocused = _useState4[1];
 
   var _useState5 = useState(null),
       _useState6 = _slicedToArray(_useState5, 2),
-      doneInitialSelectedItem = _useState6[0],
-      setDoneInitialSelectedItem = _useState6[1];
+      prevSelectedItem = _useState6[0],
+      setPrevSelectedItem = _useState6[1];
+
+  var _useState7 = useState(null),
+      _useState8 = _slicedToArray(_useState7, 2),
+      doneInitialSelectedItem = _useState8[0],
+      setDoneInitialSelectedItem = _useState8[1];
 
   var savedOnInputChange = useRef(onInputChange);
 
@@ -215,7 +226,7 @@ var ComboBox = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
   var titleClasses = cx("".concat(prefix, "--label"), _defineProperty({}, "".concat(prefix, "--label--disabled"), disabled));
   var comboBoxHelperId = !helperText ? undefined : "combobox-helper-text-".concat(comboBoxInstanceId);
   var helperClasses = cx("".concat(prefix, "--form__helper-text"), _defineProperty({}, "".concat(prefix, "--form__helper-text--disabled"), disabled));
-  var wrapperClasses = cx("".concat(prefix, "--list-box__wrapper"), [enabled ? containerClassName : null]);
+  var wrapperClasses = cx("".concat(prefix, "--list-box__wrapper"), [enabled ? containerClassName : null, (_ref4 = {}, _defineProperty(_ref4, "".concat(prefix, "--list-box__wrapper--fluid--invalid"), isFluid && invalid), _defineProperty(_ref4, "".concat(prefix, "--list-box__wrapper--fluid--focus"), isFluid && isFocused), _ref4)]);
   var inputClasses = cx("".concat(prefix, "--text-input"), _defineProperty({}, "".concat(prefix, "--text-input--empty"), !inputValue)); // needs to be Capitalized for react to render it correctly
 
   var ItemToElement = itemToElement;
@@ -237,21 +248,21 @@ var ComboBox = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
     initialSelectedItem: initialSelectedItem,
     inputId: id,
     selectedItem: selectedItem
-  }), function (_ref4) {
+  }), function (_ref5) {
     var _textInput$current;
 
-    var getInputProps = _ref4.getInputProps,
-        getItemProps = _ref4.getItemProps,
-        getLabelProps = _ref4.getLabelProps,
-        getMenuProps = _ref4.getMenuProps,
-        getRootProps = _ref4.getRootProps,
-        getToggleButtonProps = _ref4.getToggleButtonProps,
-        isOpen = _ref4.isOpen,
-        inputValue = _ref4.inputValue,
-        selectedItem = _ref4.selectedItem,
-        highlightedIndex = _ref4.highlightedIndex,
-        clearSelection = _ref4.clearSelection,
-        toggleMenu = _ref4.toggleMenu;
+    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({}, {
       suppressRefError: true
     });
@@ -292,12 +303,23 @@ var ComboBox = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
         }
       }
     });
+
+    var handleFocus = function handleFocus(evt) {
+      if (evt.target.type === 'button') {
+        setIsFocused(false);
+      } else {
+        setIsFocused(evt.type === 'focus' ? true : false);
+      }
+    };
+
     return /*#__PURE__*/React__default.createElement("div", {
       className: wrapperClasses
     }, titleText && /*#__PURE__*/React__default.createElement(Text, _extends({
       as: "label",
       className: titleClasses
     }, labelProps), titleText), /*#__PURE__*/React__default.createElement(ListBox, {
+      onFocus: handleFocus,
+      onBlur: handleFocus,
       className: className,
       disabled: disabled,
       invalid: invalid,
@@ -353,7 +375,7 @@ var ComboBox = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
       }, item)) : itemToString(item), selectedItem === item && /*#__PURE__*/React__default.createElement(Checkmark, {
         className: "".concat(prefix, "--list-box__menu-item__selected-icon")
       }));
-    }) : null)), helperText && !invalid && !warn && (_Text || (_Text = /*#__PURE__*/React__default.createElement(Text, {
+    }) : null)), helperText && !invalid && !warn && !isFluid && (_Text || (_Text = /*#__PURE__*/React__default.createElement(Text, {
       as: "div",
       id: comboBoxHelperId,
       className: helperClasses
@@ -436,7 +458,7 @@ ComboBox.propTypes = {
   /**
    * should use "light theme" (white background)?
    */
-  light: PropTypes.bool,
+  light: deprecate(PropTypes.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
@@ -521,7 +543,6 @@ ComboBox.defaultProps = {
   shouldFilterItem: defaultShouldFilterItem,
   type: 'default',
   ariaLabel: 'Choose an item',
-  light: false,
   direction: 'bottom'
 };
 var ComboBox$1 = ComboBox;

package/es/components/DataTable/TableExpandHeader.js

@@ -14,13 +14,15 @@ import React__default from 'react';
 import { ChevronRight } from '@carbon/icons-react';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-var _excluded = ["ariaLabel", "className", "enableExpando", "enableToggle", "isExpanded", "onExpand", "expandIconDescription", "children"];
+var _excluded = ["ariaLabel", "className", "enableExpando", "enableToggle", "id", "isExpanded", "onExpand", "expandIconDescription", "children"];
 
 var TableExpandHeader = function TableExpandHeader(_ref) {
   var ariaLabel = _ref.ariaLabel,
       headerClassName = _ref.className,
       enableExpando = _ref.enableExpando,
       enableToggle = _ref.enableToggle,
+      _ref$id = _ref.id,
+      id = _ref$id === void 0 ? 'expand' : _ref$id,
       isExpanded = _ref.isExpanded,
       onExpand = _ref.onExpand,
       expandIconDescription = _ref.expandIconDescription,
@@ -33,7 +35,8 @@ var TableExpandHeader = function TableExpandHeader(_ref) {
   return /*#__PURE__*/React__default.createElement("th", _extends({
     scope: "col",
     className: className,
-    "data-previous-value": previousValue
+    "data-previous-value": previousValue,
+    id: id
   }, rest), enableExpando || enableToggle ? /*#__PURE__*/React__default.createElement("button", {
     type: "button",
     className: "".concat(prefix, "--table-expand__button"),
@@ -70,6 +73,11 @@ TableExpandHeader.propTypes = {
    */
   expandIconDescription: PropTypes.string,
 
+  /**
+   * Supply an id to the th element.
+   */
+  id: PropTypes.string,
+
   /**
    * Specify whether this row is expanded or not. This helps coordinate data
    * attributes so that `TableExpandRow` and `TableExpandedRow` work together

package/es/components/DataTable/TableExpandRow.js

@@ -25,7 +25,8 @@ var TableExpandRow = function TableExpandRow(_ref) {
       onExpand = _ref.onExpand,
       expandIconDescription = _ref.expandIconDescription,
       isSelected = _ref.isSelected,
-      expandHeader = _ref.expandHeader,
+      _ref$expandHeader = _ref.expandHeader,
+      expandHeader = _ref$expandHeader === void 0 ? 'expand' : _ref$expandHeader,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix();
@@ -85,9 +86,6 @@ TableExpandRow.propTypes = {
    */
   onExpand: PropTypes.func.isRequired
 };
-TableExpandRow.defaultProps = {
-  expandHeader: 'expand'
-};
 var TableExpandRow$1 = TableExpandRow;
 
 export { TableExpandRow$1 as default };

package/es/components/DataTable/TableHeader.js

@@ -80,7 +80,7 @@ var TableHeader = /*#__PURE__*/React__default.forwardRef(function TableHeader(_r
     }, children) : null);
   }
 
-  var className = cx(headerClassName, (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--table-sort"), true), _defineProperty(_cx, "".concat(prefix, "--table-sort--active"), isSortHeader && sortDirection !== sortStates.NONE), _defineProperty(_cx, "".concat(prefix, "--table-sort--ascending"), isSortHeader && sortDirection === sortStates.DESC), _cx));
+  var className = cx(headerClassName, (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--table-sort"), true), _defineProperty(_cx, "".concat(prefix, "--table-sort--active"), isSortHeader && sortDirection !== sortStates.NONE), _defineProperty(_cx, "".concat(prefix, "--table-sort--descending"), isSortHeader && sortDirection === sortStates.DESC), _cx));
   var ariaSort = !isSortHeader ? 'none' : sortDirections[sortDirection];
   var sortDescription = t('carbon.table.header.icon.description', {
     header: children,

package/es/components/DatePicker/DatePicker.js

@@ -15,6 +15,7 @@ import DatePickerInput from '../DatePickerInput/DatePickerInput.js';
 import carbonFlatpickrAppendToPlugin from './plugins/appendToPlugin.js';
 import carbonFlatpickrFixEventsPlugin from './plugins/fixEventsPlugin.js';
 import carbonFlatpickrRangePlugin from './plugins/rangePlugin.js';
+import deprecate from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { useSavedCallback } from '../../internal/useSavedCallback.js';
 import { match } from '../../internal/keyboard/match.js';
@@ -145,7 +146,7 @@ function updateClassNames(calendar, prefix) {
   }
 }
 
-function DatePicker(_ref) {
+var DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_ref, ref) {
   var _cx;
 
   var allowInput = _ref.allowInput,
@@ -352,12 +353,12 @@ function DatePicker(_ref) {
     }
   }, [dateFormat]);
   useEffect(function () {
-    if (calendarRef.current && minDate) {
+    if (calendarRef.current) {
       calendarRef.current.set('minDate', minDate);
     }
   }, [minDate]);
   useEffect(function () {
-    if (calendarRef.current && maxDate) {
+    if (calendarRef.current) {
       calendarRef.current.set('maxDate', maxDate);
     }
   }, [maxDate]);
@@ -388,12 +389,12 @@ function DatePicker(_ref) {
     }
   }, [value, prefix]);
   return /*#__PURE__*/React__default.createElement("div", _extends({
-    className: wrapperClasses
+    className: wrapperClasses,
+    ref: ref
   }, rest), /*#__PURE__*/React__default.createElement("div", {
     className: datePickerClasses
   }, childrenWithProps));
-}
-
+});
 DatePicker.propTypes = {
   /**
    * flatpickr prop passthrough. Allows the user to enter a date directly
@@ -453,7 +454,7 @@ DatePicker.propTypes = {
   /**
    * `true` to use the light version.
    */
-  light: PropTypes.bool,
+  light: deprecate(PropTypes.bool, 'The `light` prop for `DatePicker` has ' + 'been deprecated in favor of the new `Layer` component. It will be removed in the next major release.'),
 
   /**
    *  The language locale used to format the days of the week, months, and numbers. The full list of supported locales can be found here https://github.com/flatpickr/flatpickr/tree/master/src/l10n
@@ -557,5 +558,6 @@ DatePicker.propTypes = {
    */
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object])), PropTypes.object, PropTypes.number])
 };
+var DatePicker$1 = DatePicker;
 
-export { DatePicker as default };
+export { DatePicker$1 as default };

package/es/components/Dropdown/Dropdown.js

@@ -13,6 +13,7 @@ import PropTypes from 'prop-types';
 import { WarningFilled, WarningAltFilled, Checkmark } from '@carbon/icons-react';
 import '../ListBox/index.js';
 import mergeRefs from '../../tools/mergeRefs.js';
+import deprecate from '../../prop-types/deprecate.js';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { FormContext } from '../FluidForm/FormContext.js';
@@ -268,7 +269,7 @@ Dropdown.propTypes = {
   /**
    * `true` to use the light version.
    */
-  light: PropTypes.bool,
+  light: deprecate(PropTypes.bool, 'The `light` prop for `Dropdown` 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
@@ -323,7 +324,6 @@ Dropdown.defaultProps = {
   type: 'default',
   itemToString: defaultItemToString,
   itemToElement: null,
-  light: false,
   titleText: '',
   helperText: '',
   direction: 'bottom'

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

@@ -0,0 +1,41 @@
+/**
+ * Copyright IBM Corp. 2016, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import PropTypes from 'prop-types';
+import React__default from 'react';
+import cx from 'classnames';
+import { usePrefix } from '../../internal/usePrefix.js';
+
+var _excluded = ["className"];
+
+var FluidComboBoxSkeleton = function FluidComboBoxSkeleton(_ref) {
+  var className = _ref.className,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  var wrapperClasses = cx(className, "".concat(prefix, "--skeleton"), "".concat(prefix, "--list-box"));
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--list-box__wrapper--fluid")
+  }, /*#__PURE__*/React__default.createElement("div", _extends({
+    className: wrapperClasses
+  }, rest), /*#__PURE__*/React__default.createElement("span", {
+    className: "".concat(prefix, "--list-box__label")
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--list-box__field")
+  })));
+};
+
+FluidComboBoxSkeleton.propTypes = {
+  /**
+   * Specify an optional className to add.
+   */
+  className: PropTypes.string
+};
+var FluidComboBoxSkeleton$1 = FluidComboBoxSkeleton;
+
+export { FluidComboBoxSkeleton$1 as default };

package/es/components/FluidComboBox/FluidComboBox.js

@@ -0,0 +1,140 @@
+/**
+ * Copyright IBM Corp. 2016, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * 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 PropTypes from 'prop-types';
+import React__default from 'react';
+import cx from 'classnames';
+import ComboBox from '../ComboBox/ComboBox.js';
+import { usePrefix } from '../../internal/usePrefix.js';
+import { FormContext } from '../FluidForm/FormContext.js';
+
+var _excluded = ["className", "isCondensed"];
+var FluidComboBox = /*#__PURE__*/React__default.forwardRef(function FluidComboBox(_ref, ref) {
+  var className = _ref.className,
+      isCondensed = _ref.isCondensed,
+      other = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  var classNames = cx("".concat(prefix, "--list-box__wrapper--fluid"), className, _defineProperty({}, "".concat(prefix, "--list-box__wrapper--fluid--condensed"), isCondensed));
+  return /*#__PURE__*/React__default.createElement(FormContext.Provider, {
+    value: {
+      isFluid: true
+    }
+  }, /*#__PURE__*/React__default.createElement(ComboBox, _extends({
+    ref: ref,
+    className: classNames
+  }, other)));
+});
+FluidComboBox.propTypes = {
+  /**
+   * Specify an optional className to be applied to the outer FluidForm wrapper
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify the direction of the dropdown. Can be either top or bottom.
+   */
+  direction: PropTypes.oneOf(['top', 'bottom']),
+
+  /**
+   * Specify whether the `<input>` should be disabled
+   */
+  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, PropTypes.number]),
+
+  /**
+   * Specify if the currently selected value is invalid.
+   */
+  invalid: PropTypes.bool,
+
+  /**
+   * Provide the text that is displayed when the control is in an invalid state
+   */
+  invalidText: PropTypes.node,
+
+  /**
+   * Specify if the `FluidComboBox` should render its menu items in condensed mode
+   */
+  isCondensed: PropTypes.bool,
+
+  /**
+   * Function to render items as custom components instead of strings.
+   * Defaults to null and is overridden by a getter
+   */
+  itemToElement: PropTypes.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.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.array.isRequired,
+
+  /**
+   * Generic `label` that will be used as the textual representation of what
+   * this field is for
+   */
+  label: PropTypes.node.isRequired,
+
+  /**
+   * `onChange` is a utility for this controlled component to communicate to a
+   * consuming component what kind of internal state changes are occurring.
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * An optional callback to render the currently selected item as a react element instead of only
+   * as a string.
+   */
+  renderSelectedItem: PropTypes.func,
+
+  /**
+   * In the case you want to control the dropdown selection entirely.
+   */
+  selectedItem: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.number]),
+
+  /**
+   * Provide the title text that will be read by a screen reader when
+   * visiting this control
+   */
+  titleText: PropTypes.node,
+
+  /**
+   * Callback function for translating ListBoxMenuIcon SVG title
+   */
+  translateWithId: PropTypes.func,
+
+  /**
+   * Specify whether the control is currently in warning state
+   */
+  warn: PropTypes.bool,
+
+  /**
+   * Provide the text that is displayed when the control is in warning state
+   */
+  warnText: PropTypes.node
+};
+var FluidComboBox$1 = FluidComboBox;
+
+export { FluidComboBox$1 as default };

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

@@ -0,0 +1,41 @@
+/**
+ * Copyright IBM Corp. 2016, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import PropTypes from 'prop-types';
+import React__default from 'react';
+import cx from 'classnames';
+import { usePrefix } from '../../internal/usePrefix.js';
+
+var _excluded = ["className"];
+
+var FluidMultiSelectSkeleton = function FluidMultiSelectSkeleton(_ref) {
+  var className = _ref.className,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  var wrapperClasses = cx(className, "".concat(prefix, "--skeleton"), "".concat(prefix, "--list-box"));
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--list-box__wrapper--fluid")
+  }, /*#__PURE__*/React__default.createElement("div", _extends({
+    className: wrapperClasses
+  }, rest), /*#__PURE__*/React__default.createElement("span", {
+    className: "".concat(prefix, "--list-box__label")
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--list-box__field")
+  })));
+};
+
+FluidMultiSelectSkeleton.propTypes = {
+  /**
+   * Specify an optional className to add.
+   */
+  className: PropTypes.string
+};
+var FluidMultiSelectSkeleton$1 = FluidMultiSelectSkeleton;
+
+export { FluidMultiSelectSkeleton$1 as default };