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

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;

package/lib/components/FluidSelect/FluidSelect.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 FluidSelectSkeleton = function FluidSelectSkeleton(_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")
+  })));
+};
+
+FluidSelectSkeleton.propTypes = {
+  /**
+   * Specify an optional className to add.
+   */
+  className: PropTypes__default["default"].string
+};
+var FluidSelectSkeleton$1 = FluidSelectSkeleton;
+
+exports["default"] = FluidSelectSkeleton$1;

package/lib/components/FluidSelect/FluidSelect.js

@@ -0,0 +1,103 @@
+/**
+ * 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 Select = require('../Select/Select.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", "children"];
+var FluidSelect = /*#__PURE__*/React__default["default"].forwardRef(function FluidSelect(_ref, ref) {
+  var className = _ref.className,
+      children = _ref.children,
+      other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+  var classNames = cx__default["default"]("".concat(prefix, "--select--fluid"), className);
+  return /*#__PURE__*/React__default["default"].createElement(FormContext.FormContext.Provider, {
+    value: {
+      isFluid: true
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(Select["default"], _rollupPluginBabelHelpers["extends"]({
+    ref: ref,
+    className: classNames
+  }, other), children));
+});
+FluidSelect.propTypes = {
+  /**
+   * Provide the contents of your Select
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Specify an optional className to be applied to the node containing the label and the select box
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Optionally provide the default value of the `<select>`
+   */
+  defaultValue: PropTypes__default["default"].any,
+
+  /**
+   * Specify whether the control is disabled
+   */
+  disabled: PropTypes__default["default"].bool,
+
+  /**
+   * Specify a custom `id` for the `<select>`
+   */
+  id: PropTypes__default["default"].string.isRequired,
+
+  /**
+   * Specify if the currently value is invalid.
+   */
+  invalid: PropTypes__default["default"].bool,
+
+  /**
+   * Message which is displayed if the value is invalid.
+   */
+  invalidText: PropTypes__default["default"].node,
+
+  /**
+   * Provide label text to be read by screen readers when interacting with the
+   * control
+   */
+  labelText: PropTypes__default["default"].node,
+
+  /**
+   * Provide an optional `onChange` hook that is called each time the value of
+   * the underlying `<input>` changes
+   */
+  onChange: 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 FluidSelect$1 = FluidSelect;
+
+exports["default"] = FluidSelect$1;

package/lib/components/FluidTextArea/FluidTextArea.js

@@ -14,6 +14,7 @@ var PropTypes = require('prop-types');
 var React = require('react');
 var cx = require('classnames');
 var TextArea = require('../TextArea/TextArea.js');
+var deprecate = require('../../prop-types/deprecate.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var FormContext = require('../FluidForm/FormContext.js');
 
@@ -102,7 +103,7 @@ FluidTextArea.propTypes = {
    * `true` to use the light version. For use on $ui-01 backgrounds only.
    * Don't use this to make tile background color same as container background color.
    */
-  light: PropTypes__default["default"].bool,
+  light: deprecate["default"](PropTypes__default["default"].bool, 'The `light` prop for `FluidTextArea` has ' + 'been deprecated in favor of the new `Layer` component. It will be removed in the next major release.'),
 
   /**
    * Max character count allowed for the textarea. This is needed in order for enableCounter to display

package/lib/components/InlineLoading/InlineLoading.js

@@ -31,7 +31,8 @@ function InlineLoading(_ref) {
       iconDescription = _ref.iconDescription,
       description = _ref.description,
       onSuccess = _ref.onSuccess,
-      successDelay = _ref.successDelay,
+      _ref$successDelay = _ref.successDelay,
+      successDelay = _ref$successDelay === void 0 ? 1500 : _ref$successDelay,
       other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix.usePrefix();
@@ -118,8 +119,5 @@ InlineLoading.propTypes = {
    */
   successDelay: PropTypes__default["default"].number
 };
-InlineLoading.defaultProps = {
-  successDelay: 1500
-};
 
 exports["default"] = InlineLoading;

package/lib/components/ListBox/ListBox.js

@@ -13,6 +13,7 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var cx = require('classnames');
 var React = require('react');
 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');
@@ -119,7 +120,7 @@ ListBox.propTypes = {
    * `true` to use the light version. For use on $ui-01 backgrounds only.
    * Don't use this to make tile background color same as container background color.
    */
-  light: PropTypes__default["default"].bool,
+  light: deprecate["default"](PropTypes__default["default"].bool, 'The `light` prop for `ListBox` has ' + 'been deprecated in favor of the new `Layer` component. It will be removed in the next major release.'),
 
   /**
    * Specify the size of the ListBox. Currently supports either `sm`, `md` or `lg` as an option.

package/lib/components/ModalWrapper/ModalWrapper.js

@@ -15,6 +15,7 @@ var React = require('react');
 var Modal = require('../Modal/Modal.js');
 var Button = require('../Button/Button.js');
 var types = require('../../prop-types/types.js');
+var warning = require('../../internal/warning.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -22,6 +23,7 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var _excluded = ["children", "onKeyDown", "buttonTriggerText", "buttonTriggerClassName", "renderTriggerButtonIcon", "triggerButtonIconDescription", "triggerButtonKind", "disabled", "handleSubmit", "shouldCloseAfterSubmit", "selectorPrimaryFocus", "preventCloseOnClickOutside"];
+var didWarnAboutDeprecation = false;
 
 var ModalWrapper = /*#__PURE__*/function (_React$Component) {
   _rollupPluginBabelHelpers.inherits(ModalWrapper, _React$Component);
@@ -85,6 +87,12 @@ var ModalWrapper = /*#__PURE__*/function (_React$Component) {
   }
 
   _rollupPluginBabelHelpers.createClass(ModalWrapper, [{
+    key: "if",
+    value: function _if(__DEV__) {
+      process.env.NODE_ENV !== "production" ? warning.warning(didWarnAboutDeprecation, '`<ModalWrapper>` has been deprecated in favor of `<ComposedModal/>` and will be removed in the next major version, `@carbon/react@v2.x`') : void 0;
+      didWarnAboutDeprecation = true;
+    }
+  }, {
     key: "render",
     value: function render() {
       var _this2 = this;

package/lib/components/MultiSelect/FilterableMultiSelect.js

@@ -22,10 +22,12 @@ require('../ListBox/index.js');
 var Selection = require('../../internal/Selection.js');
 var itemToString = require('./tools/itemToString.js');
 var mergeRefs = require('../../tools/mergeRefs.js');
+var deprecate = require('../../prop-types/deprecate.js');
 var useId = require('../../internal/useId.js');
 var sorting = require('./tools/sorting.js');
 var index = require('../FeatureFlags/index.js');
 var usePrefix = require('../../internal/usePrefix.js');
+var FormContext = require('../FluidForm/FormContext.js');
 var match = require('../../internal/keyboard/match.js');
 var ListBoxSelection = require('../ListBox/next/ListBoxSelection.js');
 var ListBoxTrigger = require('../ListBox/next/ListBoxTrigger.js');
@@ -77,35 +79,43 @@ var FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(fu
       warn = _ref.warn,
       warnText = _ref.warnText;
 
-  var _useState = React.useState(open),
+  var _useContext = React.useContext(FormContext.FormContext),
+      isFluid = _useContext.isFluid;
+
+  var _useState = React.useState(false),
       _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-      isOpen = _useState2[0],
-      setIsOpen = _useState2[1];
+      isFocused = _useState2[0],
+      setIsFocused = _useState2[1];
 
   var _useState3 = React.useState(open),
       _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-      prevOpen = _useState4[0],
-      setPrevOpen = _useState4[1];
+      isOpen = _useState4[0],
+      setIsOpen = _useState4[1];
 
-  var _useState5 = React.useState(''),
+  var _useState5 = React.useState(open),
       _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
-      inputValue = _useState6[0],
-      setInputValue = _useState6[1];
+      prevOpen = _useState6[0],
+      setPrevOpen = _useState6[1];
 
-  var _useState7 = React.useState([]),
+  var _useState7 = React.useState(''),
       _useState8 = _rollupPluginBabelHelpers.slicedToArray(_useState7, 2),
-      topItems = _useState8[0],
-      setTopItems = _useState8[1];
+      inputValue = _useState8[0],
+      setInputValue = _useState8[1];
 
-  var _useState9 = React.useState(false),
+  var _useState9 = React.useState([]),
       _useState10 = _rollupPluginBabelHelpers.slicedToArray(_useState9, 2),
-      inputFocused = _useState10[0],
-      setInputFocused = _useState10[1];
+      topItems = _useState10[0],
+      setTopItems = _useState10[1];
 
-  var _useState11 = React.useState(null),
+  var _useState11 = React.useState(false),
       _useState12 = _rollupPluginBabelHelpers.slicedToArray(_useState11, 2),
-      highlightedIndex = _useState12[0],
-      setHighlightedIndex = _useState12[1];
+      inputFocused = _useState12[0],
+      setInputFocused = _useState12[1];
+
+  var _useState13 = React.useState(null),
+      _useState14 = _rollupPluginBabelHelpers.slicedToArray(_useState13, 2),
+      highlightedIndex = _useState14[0],
+      setHighlightedIndex = _useState14[1];
 
   var textInput = React.useRef();
   var filterableMultiSelectInstanceId = useId.useId();
@@ -119,7 +129,7 @@ var FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(fu
 
   var inline = type === 'inline';
   var showWarning = !invalid && warn;
-  var wrapperClasses = cx__default["default"]("".concat(prefix, "--multi-select__wrapper"), "".concat(prefix, "--list-box__wrapper"), [enabled ? containerClassName : null], (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--multi-select__wrapper--inline"), inline), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box__wrapper--inline"), inline), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--multi-select__wrapper--inline--invalid"), inline && invalid), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box__wrapper--inline--invalid"), inline && invalid), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box--up"), direction === 'top'), _cx));
+  var wrapperClasses = cx__default["default"]("".concat(prefix, "--multi-select__wrapper"), "".concat(prefix, "--list-box__wrapper"), [enabled ? containerClassName : null], (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--multi-select__wrapper--inline"), inline), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box__wrapper--inline"), inline), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--multi-select__wrapper--inline--invalid"), inline && invalid), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box__wrapper--inline--invalid"), inline && invalid), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box--up"), direction === 'top'), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box__wrapper--fluid--invalid"), isFluid && invalid), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box__wrapper--fluid--focus"), isFluid && isFocused), _cx));
   var helperId = !helperText ? undefined : "filterablemultiselect-helper-text-".concat(filterableMultiSelectInstanceId);
   var labelId = "".concat(id, "-label");
   var titleClasses = cx__default["default"]((_cx2 = {}, _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--label"), true), _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--label--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--visually-hidden"), hideLabel), _cx2));
@@ -309,11 +319,22 @@ var FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(fu
         }, {
           suppressRefError: true
         });
+
+        var handleFocus = function handleFocus(evt) {
+          if (evt.target.classList.contains("".concat(prefix, "--tag__close-icon")) || evt.target.classList.contains("".concat(prefix, "--list-box__selection"))) {
+            setIsFocused(false);
+          } else {
+            setIsFocused(evt.type === 'focus' ? true : false);
+          }
+        };
+
         return /*#__PURE__*/React__default["default"].createElement("div", {
           className: wrapperClasses
         }, titleText ? /*#__PURE__*/React__default["default"].createElement("label", _rollupPluginBabelHelpers["extends"]({
           className: titleClasses
         }, labelProps), titleText) : null, /*#__PURE__*/React__default["default"].createElement(ListBox["default"], {
+          onFocus: isFluid ? handleFocus : null,
+          onBlur: isFluid ? handleFocus : null,
           className: className,
           disabled: disabled,
           light: light,
@@ -471,7 +492,7 @@ FilterableMultiSelect.propTypes = _rollupPluginBabelHelpers.objectSpread2(_rollu
   /**
    * `true` to use the light version.
    */
-  light: PropTypes__default["default"].bool,
+  light: deprecate["default"](PropTypes__default["default"].bool, 'The `light` prop for `FilterableMultiSelect` has ' + 'been deprecated in favor of the new `Layer` component. It will be removed in the next major release.'),
 
   /**
    * Specify the locale of the control. Used for the default `compareItems`
@@ -551,7 +572,6 @@ FilterableMultiSelect.defaultProps = {
   itemToString: itemToString.defaultItemToString,
   locale: 'en',
   sortItems: sorting.defaultSortItems,
-  light: false,
   open: false,
   selectionFeedback: 'top-after-reopen'
 };

package/lib/components/MultiSelect/MultiSelect.js

@@ -23,8 +23,10 @@ var sorting = require('./tools/sorting.js');
 var Selection = require('../../internal/Selection.js');
 var setupGetInstanceId = require('../../tools/setupGetInstanceId.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');
 var match = require('../../internal/keyboard/match.js');
 var ListBox = require('../ListBox/ListBox.js');
 var ListBoxPropTypes = require('../ListBox/ListBoxPropTypes.js');
@@ -86,6 +88,9 @@ var MultiSelect = /*#__PURE__*/React__default["default"].forwardRef(function Mul
       selected = _ref.selectedItems;
   var prefix = usePrefix.usePrefix();
 
+  var _useContext = React.useContext(FormContext.FormContext),
+      isFluid = _useContext.isFluid;
+
   var _useRef = React.useRef(getInstanceId()),
       multiSelectInstanceId = _useRef.current;
 
@@ -94,20 +99,25 @@ var MultiSelect = /*#__PURE__*/React__default["default"].forwardRef(function Mul
       highlightedIndex = _useState2[0],
       setHighlightedIndex = _useState2[1];
 
-  var _useState3 = React.useState(open),
+  var _useState3 = React.useState(false),
       _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-      isOpen = _useState4[0],
-      setIsOpen = _useState4[1];
+      isFocused = _useState4[0],
+      setIsFocused = _useState4[1];
 
   var _useState5 = React.useState(open),
       _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
-      prevOpenProp = _useState6[0],
-      setPrevOpenProp = _useState6[1];
+      isOpen = _useState6[0],
+      setIsOpen = _useState6[1];
 
-  var _useState7 = React.useState([]),
+  var _useState7 = React.useState(open),
       _useState8 = _rollupPluginBabelHelpers.slicedToArray(_useState7, 2),
-      topItems = _useState8[0],
-      setTopItems = _useState8[1];
+      prevOpenProp = _useState8[0],
+      setPrevOpenProp = _useState8[1];
+
+  var _useState9 = React.useState([]),
+      _useState10 = _rollupPluginBabelHelpers.slicedToArray(_useState9, 2),
+      topItems = _useState10[0],
+      setTopItems = _useState10[1];
 
   var _useSelection = Selection.useSelection({
     disabled: disabled,
@@ -161,7 +171,7 @@ var MultiSelect = /*#__PURE__*/React__default["default"].forwardRef(function Mul
   var inline = type === 'inline';
   var showWarning = !invalid && warn;
   var enabled = index.useFeatureFlag('enable-v11-release');
-  var wrapperClasses = cx__default["default"]("".concat(prefix, "--multi-select__wrapper"), "".concat(prefix, "--list-box__wrapper"), [enabled ? containerClassName : null], (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--multi-select__wrapper--inline"), inline), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box__wrapper--inline"), inline), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--multi-select__wrapper--inline--invalid"), inline && invalid), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box__wrapper--inline--invalid"), inline && invalid), _cx));
+  var wrapperClasses = cx__default["default"]("".concat(prefix, "--multi-select__wrapper"), "".concat(prefix, "--list-box__wrapper"), [enabled ? containerClassName : null], (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--multi-select__wrapper--inline"), inline), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box__wrapper--inline"), inline), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--multi-select__wrapper--inline--invalid"), inline && invalid), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box__wrapper--inline--invalid"), inline && invalid), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box__wrapper--fluid--invalid"), isFluid && invalid), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box__wrapper--fluid--focus"), !isOpen && isFluid && isFocused), _cx));
   var titleClasses = cx__default["default"]("".concat(prefix, "--label"), (_cx2 = {}, _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--label--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--visually-hidden"), hideLabel), _cx2));
   var helperId = !helperText ? undefined : "multiselect-helper-text-".concat(multiSelectInstanceId);
   var fieldLabelId = "multiselect-field-label-".concat(multiSelectInstanceId);
@@ -226,6 +236,11 @@ var MultiSelect = /*#__PURE__*/React__default["default"].forwardRef(function Mul
   };
 
   var toggleButtonProps = getToggleButtonProps();
+
+  var handleFocus = function handleFocus(evt) {
+    evt.target.classList.contains("".concat(prefix, "--tag__close-icon")) ? setIsFocused(false) : setIsFocused(evt.type === 'focus' ? true : false);
+  };
+
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: wrapperClasses
   }, /*#__PURE__*/React__default["default"].createElement("label", _rollupPluginBabelHelpers["extends"]({
@@ -233,6 +248,8 @@ var MultiSelect = /*#__PURE__*/React__default["default"].forwardRef(function Mul
   }, getLabelProps()), titleText && titleText, selectedItems.length > 0 && /*#__PURE__*/React__default["default"].createElement("span", {
     className: "".concat(prefix, "--visually-hidden")
   }, clearSelectionDescription, " ", selectedItems.length, ",", clearSelectionText)), /*#__PURE__*/React__default["default"].createElement(ListBox["default"], {
+    onFocus: isFluid ? handleFocus : null,
+    onBlur: isFluid ? handleFocus : null,
     type: type,
     size: size,
     className: className,
@@ -383,7 +400,7 @@ MultiSelect.propTypes = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBab
   /**
    * `true` to use the light version.
    */
-  light: PropTypes__default["default"].bool,
+  light: deprecate["default"](PropTypes__default["default"].bool, 'The `light` prop for `MultiSelect` has ' + 'been deprecated in favor of the new `Layer` component. It will be removed in the next major release.'),
 
   /**
    * Specify the locale of the control. Used for the default `compareItems`
@@ -465,7 +482,6 @@ MultiSelect.defaultProps = {
   initialSelectedItems: [],
   sortItems: sorting.defaultSortItems,
   type: 'default',
-  light: false,
   title: false,
   open: false,
   selectionFeedback: 'top-after-reopen',

package/lib/components/OverflowMenu/OverflowMenu.js

@@ -526,8 +526,8 @@ _rollupPluginBabelHelpers.defineProperty(OverflowMenu, "propTypes", {
 _rollupPluginBabelHelpers.defineProperty(OverflowMenu, "contextType", usePrefix.PrefixContext);
 
 _rollupPluginBabelHelpers.defineProperty(OverflowMenu, "defaultProps", {
-  ariaLabel: FeatureFlags__namespace.enabled('enable-v11-release') ? null : 'open and close list of options',
-  iconDescription: 'open and close list of options',
+  ariaLabel: FeatureFlags__namespace.enabled('enable-v11-release') ? null : 'Open and close list of options',
+  iconDescription: 'Open and close list of options',
   open: false,
   direction: FloatingMenu.DIRECTION_BOTTOM,
   flipped: false,