@carbon/react 1.14.0 → 1.15.0

package/lib/components/Dropdown/Dropdown.js

@@ -19,6 +19,7 @@ require('../ListBox/index.js');
 var mergeRefs = require('../../tools/mergeRefs.js');
 var index = require('../FeatureFlags/index.js');
 var usePrefix = require('../../internal/usePrefix.js');
+var FormContext = require('../FluidForm/FormContext.js');
 var ListBox = require('../ListBox/ListBox.js');
 var ListBoxPropTypes = require('../ListBox/ListBoxPropTypes.js');
 
@@ -70,6 +71,9 @@ var Dropdown = /*#__PURE__*/React__default["default"].forwardRef(function Dropdo
 
   var prefix = usePrefix.usePrefix();
 
+  var _useContext = React.useContext(FormContext.FormContext),
+      isFluid = _useContext.isFluid;
+
   var selectProps = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, downshiftProps), {}, {
     items: items,
     itemToString: itemToString,
@@ -95,19 +99,26 @@ var Dropdown = /*#__PURE__*/React__default["default"].forwardRef(function Dropdo
   var inline = type === 'inline';
   var showWarning = !invalid && warn;
   var enabled = index.useFeatureFlag('enable-v11-release');
+
+  var _useState = React.useState(false),
+      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+      isFocused = _useState2[0],
+      setIsFocused = _useState2[1];
+
   var className = cx__default["default"]("".concat(prefix, "--dropdown"), [enabled ? null : containerClassName], (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--dropdown--invalid"), invalid), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--dropdown--warning"), showWarning), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--dropdown--open"), isOpen), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--dropdown--inline"), inline), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--dropdown--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--dropdown--light"), light), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--dropdown--").concat(size), size), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box--up"), direction === 'top'), _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 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, "--dropdown__wrapper"), "".concat(prefix, "--list-box__wrapper"), [enabled ? containerClassName : null], (_cx4 = {}, _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--dropdown__wrapper--inline"), inline), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--list-box__wrapper--inline"), inline), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--dropdown__wrapper--inline--invalid"), inline && invalid), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--list-box__wrapper--inline--invalid"), inline && invalid), _cx4)); // needs to be Capitalized for react to render it correctly
+  var wrapperClasses = cx__default["default"]("".concat(prefix, "--dropdown__wrapper"), "".concat(prefix, "--list-box__wrapper"), [enabled ? containerClassName : null], (_cx4 = {}, _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--dropdown__wrapper--inline"), inline), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--list-box__wrapper--inline"), inline), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--dropdown__wrapper--inline--invalid"), inline && invalid), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--list-box__wrapper--inline--invalid"), inline && invalid), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--list-box__wrapper--fluid--invalid"), isFluid && invalid), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--list-box__wrapper--fluid--focus"), isFluid && isFocused && !isOpen), _cx4)); // needs to be Capitalized for react to render it correctly
 
   var ItemToElement = itemToElement;
   var toggleButtonProps = getToggleButtonProps();
-  var helper = helperText ? /*#__PURE__*/React__default["default"].createElement("div", {
+  var helper = helperText && !isFluid ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: helperClasses
   }, helperText) : null;
 
   function onSelectedItemChange(_ref2) {
     var selectedItem = _ref2.selectedItem;
+    setIsFocused(false);
 
     if (onChange) {
       onChange({
@@ -119,11 +130,18 @@ var Dropdown = /*#__PURE__*/React__default["default"].forwardRef(function Dropdo
   var menuItemOptionRefs = React.useRef(items.map(function (_) {
     return /*#__PURE__*/React__default["default"].createRef();
   }));
+
+  var handleFocus = function handleFocus(evt) {
+    setIsFocused(evt.type === 'focus' ? true : false);
+  };
+
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     className: wrapperClasses
   }, other), titleText && /*#__PURE__*/React__default["default"].createElement("label", _rollupPluginBabelHelpers["extends"]({
     className: titleClasses
   }, getLabelProps()), titleText), /*#__PURE__*/React__default["default"].createElement(ListBox["default"], {
+    onFocus: handleFocus,
+    onBlur: handleFocus,
     "aria-label": ariaLabel,
     size: size,
     className: className,

package/lib/components/ExpandableSearch/ExpandableSearch.js

@@ -14,13 +14,22 @@ var React = require('react');
 var cx = require('classnames');
 var index = require('../Search/index.js');
 var usePrefix = require('../../internal/usePrefix.js');
+var events = require('../../tools/events.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-function ExpandableSearch(props) {
+var _excluded = ["onBlur", "onChange", "onExpand", "onFocus"];
+
+function ExpandableSearch(_ref) {
+  var onBlur = _ref.onBlur,
+      onChange = _ref.onChange,
+      onExpand = _ref.onExpand,
+      onFocus = _ref.onFocus,
+      props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
   var _useState = React.useState(false),
       _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
       expanded = _useState2[0],
@@ -48,20 +57,24 @@ function ExpandableSearch(props) {
     }
   }
 
+  function handleChange(evt) {
+    setHasContent(evt.target.value !== '');
+  }
+
+  function handleExpand() {
+    var _searchRef$current$fo, _searchRef$current;
+
+    (_searchRef$current$fo = (_searchRef$current = searchRef.current).focus) === null || _searchRef$current$fo === void 0 ? void 0 : _searchRef$current$fo.call(_searchRef$current);
+  }
+
   var classes = cx__default["default"]("".concat(prefix, "--search--expandable"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--search--expanded"), expanded), props.className);
   return /*#__PURE__*/React__default["default"].createElement(index["default"], _rollupPluginBabelHelpers["extends"]({}, props, {
     ref: searchRef,
     className: classes,
-    onFocus: handleFocus,
-    onBlur: handleBlur,
-    onChange: function onChange(event) {
-      setHasContent(event.target.value !== '');
-    },
-    onExpand: function onExpand() {
-      var _searchRef$current$fo, _searchRef$current;
-
-      (_searchRef$current$fo = (_searchRef$current = searchRef.current).focus) === null || _searchRef$current$fo === void 0 ? void 0 : _searchRef$current$fo.call(_searchRef$current);
-    }
+    onFocus: events.composeEventHandlers([onFocus, handleFocus]),
+    onBlur: events.composeEventHandlers([onBlur, handleBlur]),
+    onChange: events.composeEventHandlers([onChange, handleChange]),
+    onExpand: events.composeEventHandlers([onExpand, handleExpand])
   }));
 }
 

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

package/lib/components/FluidDropdown/FluidDropdown.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 Dropdown = require('../Dropdown/Dropdown.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 FluidDropdown = /*#__PURE__*/React__default["default"].forwardRef(function FluidDropdown(_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(Dropdown["default"], _rollupPluginBabelHelpers["extends"]({
+    ref: ref,
+    className: classNames
+  }, other)));
+});
+FluidDropdown.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 `FluidDropdown` 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 FluidDropdown$1 = FluidDropdown;
+
+exports["default"] = FluidDropdown$1;

package/lib/components/FluidTextArea/FluidTextArea.Skeleton.js

@@ -0,0 +1,52 @@
+/**
+ * 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');
+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"];
+
+function FluidTextAreaSkeleton(_ref) {
+  var className = _ref.className,
+      other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+  return /*#__PURE__*/React__default["default"].createElement(FormContext.FormContext.Provider, {
+    value: {
+      isFluid: true
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+    className: cx__default["default"]("".concat(prefix, "--form-item ").concat(prefix, "--text-area--fluid__skeleton"), className)
+  }, other), /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "".concat(prefix, "--label ").concat(prefix, "--skeleton")
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--skeleton ").concat(prefix, "--text-area")
+  })));
+}
+
+FluidTextAreaSkeleton.propTypes = {
+  /**
+   * Specify an optional className to be applied to the outer FluidForm wrapper
+   */
+  className: PropTypes__default["default"].string
+};
+
+exports["default"] = FluidTextAreaSkeleton;

package/lib/components/FluidTextInput/FluidTextInput.Skeleton.js

@@ -0,0 +1,52 @@
+/**
+ * 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');
+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"];
+
+function FluidTextInputSkeleton(_ref) {
+  var className = _ref.className,
+      other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+  return /*#__PURE__*/React__default["default"].createElement(FormContext.FormContext.Provider, {
+    value: {
+      isFluid: true
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+    className: cx__default["default"]("".concat(prefix, "--form-item ").concat(prefix, "--text-input--fluid__skeleton"), className)
+  }, other), /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "".concat(prefix, "--label ").concat(prefix, "--skeleton")
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--skeleton ").concat(prefix, "--text-input")
+  })));
+}
+
+FluidTextInputSkeleton.propTypes = {
+  /**
+   * Specify an optional className to be applied to the outer FluidForm wrapper
+   */
+  className: PropTypes__default["default"].string
+};
+
+exports["default"] = FluidTextInputSkeleton;

package/lib/components/ListBox/ListBox.js

@@ -20,6 +20,7 @@ var ListBoxMenu = require('./ListBoxMenu.js');
 var ListBoxMenuIcon = require('./ListBoxMenuIcon.js');
 var ListBoxMenuItem = require('./ListBoxMenuItem.js');
 var ListBoxSelection = require('./ListBoxSelection.js');
+var FormContext = require('../FluidForm/FormContext.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -62,15 +63,21 @@ var ListBox = /*#__PURE__*/React__default["default"].forwardRef(function ListBox
       rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix.usePrefix();
+
+  var _useContext = React.useContext(FormContext.FormContext),
+      isFluid = _useContext.isFluid;
+
   var showWarning = !invalid && warn;
-  var className = cx__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, containerClassName, !!containerClassName), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box--").concat(size), size), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box--inline"), type === 'inline'), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box--light"), light), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box--expanded"), isOpen), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box--warning"), showWarning), _cx));
+  var className = cx__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, containerClassName, !!containerClassName), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box--").concat(size), size), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box--inline"), type === 'inline'), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box--light"), light), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box--expanded"), isOpen), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box--invalid"), invalid), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box--warning"), showWarning), _cx));
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
     className: className,
     ref: ref,
     onKeyDown: handleOnKeyDown,
     onClick: handleClick,
     "data-invalid": invalid || undefined
-  }), children), invalid ? /*#__PURE__*/React__default["default"].createElement("div", {
+  }), children), isFluid && /*#__PURE__*/React__default["default"].createElement("hr", {
+    className: "".concat(prefix, "--list-box__divider")
+  }), invalid ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(prefix, "--form-requirement")
   }, invalidText) : null, showWarning ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(prefix, "--form-requirement")

package/lib/components/Loading/Loading.js

@@ -27,11 +27,15 @@ var _excluded = ["active", "className", "withOverlay", "small", "description"];
 function Loading(_ref) {
   var _cx, _cx2;
 
-  var active = _ref.active,
+  var _ref$active = _ref.active,
+      active = _ref$active === void 0 ? true : _ref$active,
       customClassName = _ref.className,
-      withOverlay = _ref.withOverlay,
-      small = _ref.small,
-      description = _ref.description,
+      _ref$withOverlay = _ref.withOverlay,
+      withOverlay = _ref$withOverlay === void 0 ? true : _ref$withOverlay,
+      _ref$small = _ref.small,
+      small = _ref$small === void 0 ? false : _ref$small,
+      _ref$description = _ref.description,
+      description = _ref$description === void 0 ? 'loading' : _ref$description,
       rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix.usePrefix();
@@ -91,11 +95,5 @@ Loading.propTypes = {
    */
   withOverlay: PropTypes__default["default"].bool
 };
-Loading.defaultProps = {
-  active: true,
-  withOverlay: true,
-  small: false,
-  description: 'loading'
-};
 
 exports["default"] = Loading;

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

@@ -292,6 +292,10 @@ var FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(fu
             if (match.match(event, keys.Space)) {
               event.stopPropagation();
             }
+
+            if (match.match(event, keys.Tab)) {
+              handleOnMenuChange(false);
+            }
           },
           onFocus: function onFocus() {
             setInputFocused(true);

package/lib/components/Search/Search.js

@@ -29,7 +29,7 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _Close;
 
-var _excluded = ["className", "type", "id", "placeHolderText", "placeholder", "labelText", "closeButtonLabelText", "small", "size", "light", "disabled", "onChange", "onKeyDown", "renderIcon", "onClear"];
+var _excluded = ["className", "type", "id", "placeHolderText", "placeholder", "labelText", "closeButtonLabelText", "small", "size", "light", "disabled", "onChange", "onKeyDown", "renderIcon", "onClear", "onExpand"];
 
 var Search = /*#__PURE__*/function (_Component) {
   _rollupPluginBabelHelpers.inherits(Search, _Component);
@@ -114,6 +114,7 @@ var Search = /*#__PURE__*/function (_Component) {
           onKeyDown = _this$props.onKeyDown,
           renderIcon = _this$props.renderIcon;
           _this$props.onClear;
+          _this$props.onExpand;
           var other = _rollupPluginBabelHelpers.objectWithoutProperties(_this$props, _excluded);
 
       var hasContent = this.state.hasContent;

package/lib/components/Search/next/Search.js

@@ -88,19 +88,19 @@ var Search = /*#__PURE__*/React__default["default"].forwardRef(function Search(_
     setPrevValue(value);
   }
 
-  function clearInput(event) {
+  function clearInput() {
     if (!value) {
       inputRef.current.value = '';
-      onChange(event);
-    } else {
-      var clearedEvt = Object.assign({}, event.target, {
-        target: {
-          value: ''
-        }
-      });
-      onChange(clearedEvt);
     }
 
+    var inputTarget = Object.assign({}, inputRef.current, {
+      value: ''
+    });
+    var clearedEvt = {
+      target: inputTarget,
+      type: 'change'
+    };
+    onChange(clearedEvt);
     onClear();
     setHasContent(false);
     index.focus(inputRef);
@@ -113,7 +113,7 @@ var Search = /*#__PURE__*/React__default["default"].forwardRef(function Search(_
   function handleKeyDown(event) {
     if (match.match(event, keys.Escape)) {
       event.stopPropagation();
-      clearInput(event);
+      clearInput();
     }
   }
 
@@ -124,11 +124,7 @@ var Search = /*#__PURE__*/React__default["default"].forwardRef(function Search(_
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     role: onExpand ? 'button' : null,
     className: "".concat(prefix, "--search-magnifier"),
-    onClick: function onClick() {
-      if (onExpand) {
-        onExpand();
-      }
-    }
+    onClick: onExpand
   }, /*#__PURE__*/React__default["default"].createElement(CustomSearchIcon, {
     icon: renderIcon
   })), /*#__PURE__*/React__default["default"].createElement("label", {