@carbon/react 1.15.0 → 1.16.0-rc.0

package/lib/components/ComboBox/ComboBox.js

@@ -20,7 +20,9 @@ require('../ListBox/index.js');
 var setupGetInstanceId = require('../../tools/setupGetInstanceId.js');
 var mergeRefs = require('../../tools/mergeRefs.js');
 var index = require('../FeatureFlags/index.js');
+var deprecate = require('../../prop-types/deprecate.js');
 var usePrefix = require('../../internal/usePrefix.js');
+var FormContext = require('../FluidForm/FormContext.js');
 var match = require('../../internal/keyboard/match.js');
 var Text = require('../Text/Text.js');
 var ListBox = require('../ListBox/ListBox.js');
@@ -90,7 +92,7 @@ var findHighlightedIndex = function findHighlightedIndex(_ref2, inputValue) {
 
 var getInstanceId = setupGetInstanceId["default"]();
 var ComboBox = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
-  var _cx, _Text;
+  var _cx, _ref4, _Text;
 
   var ariaLabel = props.ariaLabel,
       containerClassName = props.className,
@@ -122,6 +124,10 @@ var ComboBox = /*#__PURE__*/React__default["default"].forwardRef(function (props
       var rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
 
   var prefix = usePrefix.usePrefix();
+
+  var _useContext = React.useContext(FormContext.FormContext),
+      isFluid = _useContext.isFluid;
+
   var textInput = React.useRef();
   var comboBoxInstanceId = getInstanceId();
 
@@ -135,15 +141,20 @@ var ComboBox = /*#__PURE__*/React__default["default"].forwardRef(function (props
       inputValue = _useState2[0],
       setInputValue = _useState2[1];
 
-  var _useState3 = React.useState(null),
+  var _useState3 = React.useState(false),
       _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-      prevSelectedItem = _useState4[0],
-      setPrevSelectedItem = _useState4[1];
+      isFocused = _useState4[0],
+      setIsFocused = _useState4[1];
 
   var _useState5 = React.useState(null),
       _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
-      doneInitialSelectedItem = _useState6[0],
-      setDoneInitialSelectedItem = _useState6[1];
+      prevSelectedItem = _useState6[0],
+      setPrevSelectedItem = _useState6[1];
+
+  var _useState7 = React.useState(null),
+      _useState8 = _rollupPluginBabelHelpers.slicedToArray(_useState7, 2),
+      doneInitialSelectedItem = _useState8[0],
+      setDoneInitialSelectedItem = _useState8[1];
 
   var savedOnInputChange = React.useRef(onInputChange);
 
@@ -226,7 +237,7 @@ var ComboBox = /*#__PURE__*/React__default["default"].forwardRef(function (props
   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]);
+  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"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--text-input--empty"), !inputValue)); // needs to be Capitalized for react to render it correctly
 
   var ItemToElement = itemToElement;
@@ -248,21 +259,21 @@ var ComboBox = /*#__PURE__*/React__default["default"].forwardRef(function (props
     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
     });
@@ -303,12 +314,23 @@ var ComboBox = /*#__PURE__*/React__default["default"].forwardRef(function (props
         }
       }
     });
+
+    var handleFocus = function handleFocus(evt) {
+      if (evt.target.type === 'button') {
+        setIsFocused(false);
+      } else {
+        setIsFocused(evt.type === 'focus' ? true : false);
+      }
+    };
+
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: wrapperClasses
     }, titleText && /*#__PURE__*/React__default["default"].createElement(Text.Text, _rollupPluginBabelHelpers["extends"]({
       as: "label",
       className: titleClasses
     }, labelProps), titleText), /*#__PURE__*/React__default["default"].createElement(ListBox["default"], {
+      onFocus: handleFocus,
+      onBlur: handleFocus,
       className: className,
       disabled: disabled,
       invalid: invalid,
@@ -364,7 +386,7 @@ var ComboBox = /*#__PURE__*/React__default["default"].forwardRef(function (props
       }, item)) : itemToString(item), selectedItem === item && /*#__PURE__*/React__default["default"].createElement(iconsReact.Checkmark, {
         className: "".concat(prefix, "--list-box__menu-item__selected-icon")
       }));
-    }) : null)), helperText && !invalid && !warn && (_Text || (_Text = /*#__PURE__*/React__default["default"].createElement(Text.Text, {
+    }) : null)), helperText && !invalid && !warn && !isFluid && (_Text || (_Text = /*#__PURE__*/React__default["default"].createElement(Text.Text, {
       as: "div",
       id: comboBoxHelperId,
       className: helperClasses
@@ -447,7 +469,7 @@ ComboBox.propTypes = {
   /**
    * should use "light theme" (white background)?
    */
-  light: PropTypes__default["default"].bool,
+  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
@@ -532,7 +554,6 @@ ComboBox.defaultProps = {
   shouldFilterItem: defaultShouldFilterItem,
   type: 'default',
   ariaLabel: 'Choose an item',
-  light: false,
   direction: 'bottom'
 };
 var ComboBox$1 = ComboBox;

package/lib/components/DataTable/TableHeader.js

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

package/lib/components/DatePicker/DatePicker.js

@@ -19,6 +19,7 @@ var DatePickerInput = require('../DatePickerInput/DatePickerInput.js');
 var appendToPlugin = require('./plugins/appendToPlugin.js');
 var fixEventsPlugin = require('./plugins/fixEventsPlugin.js');
 var rangePlugin = require('./plugins/rangePlugin.js');
+var deprecate = require('../../prop-types/deprecate.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var useSavedCallback = require('../../internal/useSavedCallback.js');
 var match = require('../../internal/keyboard/match.js');
@@ -156,7 +157,7 @@ function updateClassNames(calendar, prefix) {
   }
 }
 
-function DatePicker(_ref) {
+var DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function DatePicker(_ref, ref) {
   var _cx;
 
   var allowInput = _ref.allowInput,
@@ -363,12 +364,12 @@ function DatePicker(_ref) {
     }
   }, [dateFormat]);
   React.useEffect(function () {
-    if (calendarRef.current && minDate) {
+    if (calendarRef.current) {
       calendarRef.current.set('minDate', minDate);
     }
   }, [minDate]);
   React.useEffect(function () {
-    if (calendarRef.current && maxDate) {
+    if (calendarRef.current) {
       calendarRef.current.set('maxDate', maxDate);
     }
   }, [maxDate]);
@@ -399,12 +400,12 @@ function DatePicker(_ref) {
     }
   }, [value, prefix]);
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
-    className: wrapperClasses
+    className: wrapperClasses,
+    ref: ref
   }, rest), /*#__PURE__*/React__default["default"].createElement("div", {
     className: datePickerClasses
   }, childrenWithProps));
-}
-
+});
 DatePicker.propTypes = {
   /**
    * flatpickr prop passthrough. Allows the user to enter a date directly
@@ -464,7 +465,7 @@ DatePicker.propTypes = {
   /**
    * `true` to use the light version.
    */
-  light: PropTypes__default["default"].bool,
+  light: deprecate["default"](PropTypes__default["default"].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
@@ -568,5 +569,6 @@ DatePicker.propTypes = {
    */
   value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].arrayOf(PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number, PropTypes__default["default"].object])), PropTypes__default["default"].object, PropTypes__default["default"].number])
 };
+var DatePicker$1 = DatePicker;
 
-exports["default"] = DatePicker;
+exports["default"] = DatePicker$1;

package/lib/components/Dropdown/Dropdown.js

@@ -17,6 +17,7 @@ var PropTypes = require('prop-types');
 var iconsReact = require('@carbon/icons-react');
 require('../ListBox/index.js');
 var mergeRefs = require('../../tools/mergeRefs.js');
+var deprecate = require('../../prop-types/deprecate.js');
 var index = require('../FeatureFlags/index.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var FormContext = require('../FluidForm/FormContext.js');
@@ -278,7 +279,7 @@ Dropdown.propTypes = {
   /**
    * `true` to use the light version.
    */
-  light: PropTypes__default["default"].bool,
+  light: deprecate["default"](PropTypes__default["default"].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
@@ -333,7 +334,6 @@ Dropdown.defaultProps = {
   type: 'default',
   itemToString: defaultItemToString,
   itemToElement: null,
-  light: false,
   titleText: '',
   helperText: '',
   direction: 'bottom'

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

@@ -0,0 +1,51 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var PropTypes = require('prop-types');
+var React = require('react');
+var cx = require('classnames');
+var usePrefix = require('../../internal/usePrefix.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+var _excluded = ["className"];
+
+var FluidComboBoxSkeleton = function FluidComboBoxSkeleton(_ref) {
+  var className = _ref.className,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+  var wrapperClasses = cx__default["default"](className, "".concat(prefix, "--skeleton"), "".concat(prefix, "--list-box"));
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--list-box__wrapper--fluid")
+  }, /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+    className: wrapperClasses
+  }, rest), /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "".concat(prefix, "--list-box__label")
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--list-box__field")
+  })));
+};
+
+FluidComboBoxSkeleton.propTypes = {
+  /**
+   * Specify an optional className to add.
+   */
+  className: PropTypes__default["default"].string
+};
+var FluidComboBoxSkeleton$1 = FluidComboBoxSkeleton;
+
+exports["default"] = FluidComboBoxSkeleton$1;

package/lib/components/FluidComboBox/FluidComboBox.js

@@ -0,0 +1,150 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var PropTypes = require('prop-types');
+var React = require('react');
+var cx = require('classnames');
+var ComboBox = require('../ComboBox/ComboBox.js');
+var usePrefix = require('../../internal/usePrefix.js');
+var FormContext = require('../FluidForm/FormContext.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+var _excluded = ["className", "isCondensed"];
+var FluidComboBox = /*#__PURE__*/React__default["default"].forwardRef(function FluidComboBox(_ref, ref) {
+  var className = _ref.className,
+      isCondensed = _ref.isCondensed,
+      other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+  var classNames = cx__default["default"]("".concat(prefix, "--list-box__wrapper--fluid"), className, _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--list-box__wrapper--fluid--condensed"), isCondensed));
+  return /*#__PURE__*/React__default["default"].createElement(FormContext.FormContext.Provider, {
+    value: {
+      isFluid: true
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(ComboBox["default"], _rollupPluginBabelHelpers["extends"]({
+    ref: ref,
+    className: classNames
+  }, other)));
+});
+FluidComboBox.propTypes = {
+  /**
+   * Specify an optional className to be applied to the outer FluidForm wrapper
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Specify the direction of the dropdown. Can be either top or bottom.
+   */
+  direction: PropTypes__default["default"].oneOf(['top', 'bottom']),
+
+  /**
+   * Specify whether the `<input>` should be disabled
+   */
+  disabled: PropTypes__default["default"].bool,
+
+  /**
+   * 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,
+
+  /**
+   * Provide the text that is displayed when the control is in an invalid state
+   */
+  invalidText: PropTypes__default["default"].node,
+
+  /**
+   * Specify if the `FluidComboBox` should render its menu items in condensed mode
+   */
+  isCondensed: PropTypes__default["default"].bool,
+
+  /**
+   * 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,
+
+  /**
+   * Generic `label` that will be used as the textual representation of what
+   * this field is for
+   */
+  label: PropTypes__default["default"].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__default["default"].func,
+
+  /**
+   * An optional callback to render the currently selected item as a react element instead of only
+   * as a string.
+   */
+  renderSelectedItem: PropTypes__default["default"].func,
+
+  /**
+   * In the case you want to control the dropdown selection entirely.
+   */
+  selectedItem: PropTypes__default["default"].oneOfType([PropTypes__default["default"].object, PropTypes__default["default"].string, PropTypes__default["default"].number]),
+
+  /**
+   * Provide the title text that will be read by a screen reader when
+   * visiting this control
+   */
+  titleText: PropTypes__default["default"].node,
+
+  /**
+   * Callback function for translating ListBoxMenuIcon SVG title
+   */
+  translateWithId: PropTypes__default["default"].func,
+
+  /**
+   * 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
+};
+var FluidComboBox$1 = FluidComboBox;
+
+exports["default"] = FluidComboBox$1;

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

@@ -0,0 +1,51 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var PropTypes = require('prop-types');
+var React = require('react');
+var cx = require('classnames');
+var usePrefix = require('../../internal/usePrefix.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+var _excluded = ["className"];
+
+var FluidMultiSelectSkeleton = function FluidMultiSelectSkeleton(_ref) {
+  var className = _ref.className,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+  var wrapperClasses = cx__default["default"](className, "".concat(prefix, "--skeleton"), "".concat(prefix, "--list-box"));
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--list-box__wrapper--fluid")
+  }, /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+    className: wrapperClasses
+  }, rest), /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "".concat(prefix, "--list-box__label")
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--list-box__field")
+  })));
+};
+
+FluidMultiSelectSkeleton.propTypes = {
+  /**
+   * Specify an optional className to add.
+   */
+  className: PropTypes__default["default"].string
+};
+var FluidMultiSelectSkeleton$1 = FluidMultiSelectSkeleton;
+
+exports["default"] = FluidMultiSelectSkeleton$1;

package/lib/components/FluidMultiSelect/FluidMultiSelect.js

@@ -0,0 +1,161 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var PropTypes = require('prop-types');
+var React = require('react');
+var cx = require('classnames');
+require('../MultiSelect/index.js');
+var usePrefix = require('../../internal/usePrefix.js');
+var FormContext = require('../FluidForm/FormContext.js');
+var FilterableMultiSelect = require('../MultiSelect/FilterableMultiSelect.js');
+var MultiSelect = require('../MultiSelect/MultiSelect.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+var _excluded = ["className", "isCondensed", "isFilterable"];
+var FluidMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(function FluidMultiSelect(_ref, ref) {
+  var className = _ref.className,
+      isCondensed = _ref.isCondensed,
+      isFilterable = _ref.isFilterable,
+      other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+  var classNames = cx__default["default"]("".concat(prefix, "--list-box__wrapper--fluid"), className, _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--list-box__wrapper--fluid--condensed"), isCondensed));
+  return /*#__PURE__*/React__default["default"].createElement(FormContext.FormContext.Provider, {
+    value: {
+      isFluid: true
+    }
+  }, isFilterable ? /*#__PURE__*/React__default["default"].createElement(FilterableMultiSelect["default"], _rollupPluginBabelHelpers["extends"]({
+    ref: ref,
+    className: classNames
+  }, other)) : /*#__PURE__*/React__default["default"].createElement(MultiSelect["default"], _rollupPluginBabelHelpers["extends"]({
+    ref: ref,
+    className: classNames
+  }, other)));
+});
+FluidMultiSelect.propTypes = {
+  /**
+   * Specify an optional className to be applied to the outer FluidForm wrapper
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Specify the direction of the dropdown. Can be either top or bottom.
+   */
+  direction: PropTypes__default["default"].oneOf(['top', 'bottom']),
+
+  /**
+   * Specify whether the `<input>` should be disabled
+   */
+  disabled: PropTypes__default["default"].bool,
+
+  /**
+   * 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,
+
+  /**
+   * Provide the text that is displayed when the control is in an invalid state
+   */
+  invalidText: PropTypes__default["default"].node,
+
+  /**
+   * Specify if the `FluidMultiSelect` should render its menu items in condensed mode
+   */
+  isCondensed: PropTypes__default["default"].bool,
+
+  /**
+   * Specify if the `FluidMultiSelect` should render the `filterable` variant of `FluidMultiSelect`
+   */
+  isFilterable: PropTypes__default["default"].bool,
+
+  /**
+   * 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,
+
+  /**
+   * Generic `label` that will be used as the textual representation of what
+   * this field is for
+   */
+  label: PropTypes__default["default"].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__default["default"].func,
+
+  /**
+   * An optional callback to render the currently selected item as a react element instead of only
+   * as a string.
+   */
+  renderSelectedItem: PropTypes__default["default"].func,
+
+  /**
+   * In the case you want to control the dropdown selection entirely.
+   */
+  selectedItem: PropTypes__default["default"].oneOfType([PropTypes__default["default"].object, PropTypes__default["default"].string, PropTypes__default["default"].number]),
+
+  /**
+   * Provide the title text that will be read by a screen reader when
+   * visiting this control
+   */
+  titleText: PropTypes__default["default"].node,
+
+  /**
+   * Callback function for translating ListBoxMenuIcon SVG title
+   */
+  translateWithId: PropTypes__default["default"].func,
+
+  /**
+   * 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
+};
+var FluidMultiSelect$1 = FluidMultiSelect;
+
+exports["default"] = FluidMultiSelect$1;