@carbon/ibm-products 2.22.0 → 2.24.0

package/lib/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js

@@ -17,7 +17,7 @@ var _settings = require("../../../settings");
 var _EmptyStateContent = require("../EmptyStateContent");
 var _NoTagsIllustration = require("../assets/NoTagsIllustration");
 var _EmptyState = require("../EmptyState");
-var _excluded = ["action", "className", "illustrationPosition", "illustrationTheme", "link", "size", "subtitle", "title"];
+var _excluded = ["action", "className", "illustrationPosition", "illustrationTheme", "illustrationDescription", "link", "size", "subtitle", "title"];
 /**
  * Copyright IBM Corp. 2020, 2021
  *
@@ -41,6 +41,7 @@ var NoTagsEmptyState = exports.NoTagsEmptyState = /*#__PURE__*/_react.default.fo
     _ref$illustrationPosi = _ref.illustrationPosition,
     illustrationPosition = _ref$illustrationPosi === void 0 ? _EmptyState.defaults.position : _ref$illustrationPosi,
     illustrationTheme = _ref.illustrationTheme,
+    illustrationDescription = _ref.illustrationDescription,
     link = _ref.link,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? _EmptyState.defaults.size : _ref$size,
@@ -53,7 +54,7 @@ var NoTagsEmptyState = exports.NoTagsEmptyState = /*#__PURE__*/_react.default.fo
   }, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement(_NoTagsIllustration.NoTagsIllustration, {
     theme: illustrationTheme,
     size: size,
-    title: title
+    alt: illustrationDescription || title
   }), /*#__PURE__*/_react.default.createElement(_EmptyStateContent.EmptyStateContent, {
     action: action,
     link: link,
@@ -87,6 +88,10 @@ NoTagsEmptyState.propTypes = {
    * Provide an optional class to be applied to the containing node.
    */
   className: _propTypes.default.string,
+  /**
+   * The alt text for empty state svg images. If not provided , title will be used.
+   */
+  illustrationDescription: _propTypes.default.string,
   /**
    * Designates the position of the illustration relative to the content
    */

package/lib/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js

@@ -17,7 +17,7 @@ var _settings = require("../../../settings");
 var _EmptyStateContent = require("../EmptyStateContent");
 var _NotFoundIllustration = require("../assets/NotFoundIllustration");
 var _EmptyState = require("../EmptyState");
-var _excluded = ["action", "className", "illustrationPosition", "illustrationTheme", "link", "size", "subtitle", "title"];
+var _excluded = ["action", "className", "illustrationPosition", "illustrationTheme", "illustrationDescription", "link", "size", "subtitle", "title"];
 /**
  * Copyright IBM Corp. 2020, 2021
  *
@@ -41,6 +41,7 @@ var NotFoundEmptyState = exports.NotFoundEmptyState = /*#__PURE__*/_react.defaul
     _ref$illustrationPosi = _ref.illustrationPosition,
     illustrationPosition = _ref$illustrationPosi === void 0 ? _EmptyState.defaults.position : _ref$illustrationPosi,
     illustrationTheme = _ref.illustrationTheme,
+    illustrationDescription = _ref.illustrationDescription,
     link = _ref.link,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? _EmptyState.defaults.size : _ref$size,
@@ -53,7 +54,7 @@ var NotFoundEmptyState = exports.NotFoundEmptyState = /*#__PURE__*/_react.defaul
   }, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement(_NotFoundIllustration.NotFoundIllustration, {
     theme: illustrationTheme,
     size: size,
-    title: title
+    alt: illustrationDescription || title
   }), /*#__PURE__*/_react.default.createElement(_EmptyStateContent.EmptyStateContent, {
     action: action,
     link: link,
@@ -87,6 +88,10 @@ NotFoundEmptyState.propTypes = {
    * Provide an optional class to be applied to the containing node.
    */
   className: _propTypes.default.string,
+  /**
+   * The alt text for empty state svg images. If not provided , title will be used.
+   */
+  illustrationDescription: _propTypes.default.string,
   /**
    * Designates the position of the illustration relative to the content
    */

package/lib/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js

@@ -17,7 +17,7 @@ var _settings = require("../../../settings");
 var _EmptyStateContent = require("../EmptyStateContent");
 var _NotificationsIllustration = require("../assets/NotificationsIllustration");
 var _EmptyState = require("../EmptyState");
-var _excluded = ["action", "className", "illustrationPosition", "illustrationTheme", "link", "size", "subtitle", "title"];
+var _excluded = ["action", "className", "illustrationPosition", "illustrationTheme", "illustrationDescription", "link", "size", "subtitle", "title"];
 /**
  * Copyright IBM Corp. 2020, 2021
  *
@@ -41,6 +41,7 @@ var NotificationsEmptyState = exports.NotificationsEmptyState = /*#__PURE__*/_re
     _ref$illustrationPosi = _ref.illustrationPosition,
     illustrationPosition = _ref$illustrationPosi === void 0 ? _EmptyState.defaults.position : _ref$illustrationPosi,
     illustrationTheme = _ref.illustrationTheme,
+    illustrationDescription = _ref.illustrationDescription,
     link = _ref.link,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? _EmptyState.defaults.size : _ref$size,
@@ -53,7 +54,7 @@ var NotificationsEmptyState = exports.NotificationsEmptyState = /*#__PURE__*/_re
   }, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement(_NotificationsIllustration.NotificationsIllustration, {
     size: size,
     theme: illustrationTheme,
-    title: title
+    alt: illustrationDescription || title
   }), /*#__PURE__*/_react.default.createElement(_EmptyStateContent.EmptyStateContent, {
     action: action,
     link: link,
@@ -87,6 +88,10 @@ NotificationsEmptyState.propTypes = {
    * Provide an optional class to be applied to the containing node.
    */
   className: _propTypes.default.string,
+  /**
+   * The alt text for empty state svg images. If not provided , title will be used.
+   */
+  illustrationDescription: _propTypes.default.string,
   /**
    * Designates the position of the illustration relative to the content
    */

package/lib/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js

@@ -17,7 +17,7 @@ var _settings = require("../../../settings");
 var _EmptyStateContent = require("../EmptyStateContent");
 var _UnauthorizedIllustration = require("../assets/UnauthorizedIllustration");
 var _EmptyState = require("../EmptyState");
-var _excluded = ["action", "className", "illustrationPosition", "illustrationTheme", "link", "size", "subtitle", "title"];
+var _excluded = ["action", "className", "illustrationPosition", "illustrationTheme", "illustrationDescription", "link", "size", "subtitle", "title"];
 /**
  * Copyright IBM Corp. 2020, 2021
  *
@@ -41,6 +41,7 @@ var UnauthorizedEmptyState = exports.UnauthorizedEmptyState = /*#__PURE__*/_reac
     _ref$illustrationPosi = _ref.illustrationPosition,
     illustrationPosition = _ref$illustrationPosi === void 0 ? _EmptyState.defaults.position : _ref$illustrationPosi,
     illustrationTheme = _ref.illustrationTheme,
+    illustrationDescription = _ref.illustrationDescription,
     link = _ref.link,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? _EmptyState.defaults.size : _ref$size,
@@ -53,7 +54,7 @@ var UnauthorizedEmptyState = exports.UnauthorizedEmptyState = /*#__PURE__*/_reac
   }, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement(_UnauthorizedIllustration.UnauthorizedIllustration, {
     size: size,
     theme: illustrationTheme,
-    title: title
+    alt: illustrationDescription || title
   }), /*#__PURE__*/_react.default.createElement(_EmptyStateContent.EmptyStateContent, {
     action: action,
     link: link,
@@ -87,6 +88,10 @@ UnauthorizedEmptyState.propTypes = {
    * Provide an optional class to be applied to the containing node.
    */
   className: _propTypes.default.string,
+  /**
+   * The alt text for empty state svg images. If not provided , title will be used.
+   */
+  illustrationDescription: _propTypes.default.string,
   /**
    * Designates the position of the illustration relative to the content
    */

package/lib/components/EmptyStates/assets/ErrorIllustration.js

@@ -12,7 +12,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _settings = require("../../../settings");
 var _uuidv = _interopRequireDefault(require("../../../global/js/utils/uuidv4"));
-var _excluded = ["theme", "title", "size"];
+var _excluded = ["theme", "size", "alt"];
 /**
  * Copyright IBM Corp. 2020, 2021
  *
@@ -25,8 +25,8 @@ var _excluded = ["theme", "title", "size"];
 var blockClass = "".concat(_settings.pkg.prefix, "--empty-state");
 var ErrorIllustration = exports.ErrorIllustration = function ErrorIllustration(_ref) {
   var theme = _ref.theme,
-    title = _ref.title,
     size = _ref.size,
+    alt = _ref.alt,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var svgId = (0, _uuidv.default)();
   return /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({}, rest, {
@@ -36,7 +36,7 @@ var ErrorIllustration = exports.ErrorIllustration = function ErrorIllustration(_
     viewBox: "0 0 80 80",
     className: (0, _classnames.default)(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-error"), "".concat(blockClass, "__illustration--").concat(size)]),
     role: "img"
-  }), /*#__PURE__*/_react.default.createElement("title", null, title), theme === 'dark' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
+  }), /*#__PURE__*/_react.default.createElement("title", null, alt), theme === 'dark' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
     id: "prefix__a_dark_".concat(svgId),
     x1: 38.9,
     y1: 77.08,
@@ -213,7 +213,7 @@ var ErrorIllustration = exports.ErrorIllustration = function ErrorIllustration(_
   })));
 };
 ErrorIllustration.propTypes = {
+  alt: _propTypes.default.string.isRequired,
   size: _propTypes.default.oneOf(['lg', 'sm']),
-  theme: _propTypes.default.oneOf(['light', 'dark']),
-  title: _propTypes.default.string
+  theme: _propTypes.default.oneOf(['light', 'dark'])
 };

package/lib/components/EmptyStates/assets/NoDataIllustration.js

@@ -12,7 +12,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _settings = require("../../../settings");
 var _uuidv = _interopRequireDefault(require("../../../global/js/utils/uuidv4"));
-var _excluded = ["theme", "title", "size"];
+var _excluded = ["theme", "size", "alt"];
 /**
  * Copyright IBM Corp. 2020, 2021
  *
@@ -25,8 +25,8 @@ var _excluded = ["theme", "title", "size"];
 var blockClass = "".concat(_settings.pkg.prefix, "--empty-state");
 var NoDataIllustration = exports.NoDataIllustration = function NoDataIllustration(_ref) {
   var theme = _ref.theme,
-    title = _ref.title,
     size = _ref.size,
+    alt = _ref.alt,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var svgId = (0, _uuidv.default)();
   return /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({}, rest, {
@@ -36,7 +36,7 @@ var NoDataIllustration = exports.NoDataIllustration = function NoDataIllustratio
     viewBox: "0 0 80 80",
     className: (0, _classnames.default)(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-noData"), "".concat(blockClass, "__illustration--").concat(size)]),
     role: "img"
-  }), /*#__PURE__*/_react.default.createElement("title", null, title), theme === 'dark' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
+  }), /*#__PURE__*/_react.default.createElement("title", null, alt), theme === 'dark' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
     id: "prefix__a_dark_".concat(svgId),
     x1: 11.12,
     y1: 43.34,
@@ -176,7 +176,7 @@ var NoDataIllustration = exports.NoDataIllustration = function NoDataIllustratio
   })));
 };
 NoDataIllustration.propTypes = {
+  alt: _propTypes.default.string.isRequired,
   size: _propTypes.default.oneOf(['lg', 'sm']),
-  theme: _propTypes.default.oneOf(['light', 'dark']),
-  title: _propTypes.default.string
+  theme: _propTypes.default.oneOf(['light', 'dark'])
 };

package/lib/components/EmptyStates/assets/NoTagsIllustration.js

@@ -12,7 +12,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _settings = require("../../../settings");
 var _uuidv = _interopRequireDefault(require("../../../global/js/utils/uuidv4"));
-var _excluded = ["theme", "title", "size"];
+var _excluded = ["theme", "size", "alt"];
 /**
  * Copyright IBM Corp. 2020, 2021
  *
@@ -25,8 +25,8 @@ var _excluded = ["theme", "title", "size"];
 var blockClass = "".concat(_settings.pkg.prefix, "--empty-state");
 var NoTagsIllustration = exports.NoTagsIllustration = function NoTagsIllustration(_ref) {
   var theme = _ref.theme,
-    title = _ref.title,
     size = _ref.size,
+    alt = _ref.alt,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var svgId = (0, _uuidv.default)();
   return /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({}, rest, {
@@ -37,7 +37,7 @@ var NoTagsIllustration = exports.NoTagsIllustration = function NoTagsIllustratio
     viewBox: "0 0 80 80",
     className: (0, _classnames.default)(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-noTags"), "".concat(blockClass, "__illustration--").concat(size)]),
     role: "img"
-  }), /*#__PURE__*/_react.default.createElement("title", null, title), theme === 'dark' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
+  }), /*#__PURE__*/_react.default.createElement("title", null, alt), theme === 'dark' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
     id: "prefix__c_dark_".concat(svgId),
     x1: 34.96,
     y1: 5.37,
@@ -483,7 +483,7 @@ var NoTagsIllustration = exports.NoTagsIllustration = function NoTagsIllustratio
   })));
 };
 NoTagsIllustration.propTypes = {
+  alt: _propTypes.default.string.isRequired,
   size: _propTypes.default.oneOf(['lg', 'sm']),
-  theme: _propTypes.default.oneOf(['light', 'dark']),
-  title: _propTypes.default.string
+  theme: _propTypes.default.oneOf(['light', 'dark'])
 };

package/lib/components/EmptyStates/assets/NotFoundIllustration.js

@@ -12,7 +12,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _settings = require("../../../settings");
 var _uuidv = _interopRequireDefault(require("../../../global/js/utils/uuidv4"));
-var _excluded = ["theme", "title", "size"];
+var _excluded = ["theme", "size", "alt"];
 /**
  * Copyright IBM Corp. 2020, 2021
  *
@@ -25,8 +25,8 @@ var _excluded = ["theme", "title", "size"];
 var blockClass = "".concat(_settings.pkg.prefix, "--empty-state");
 var NotFoundIllustration = exports.NotFoundIllustration = function NotFoundIllustration(_ref) {
   var theme = _ref.theme,
-    title = _ref.title,
     size = _ref.size,
+    alt = _ref.alt,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var svgId = (0, _uuidv.default)();
   return /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({}, rest, {
@@ -36,7 +36,7 @@ var NotFoundIllustration = exports.NotFoundIllustration = function NotFoundIllus
     viewBox: "0 0 80 80",
     className: (0, _classnames.default)(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-notFound"), "".concat(blockClass, "__illustration--").concat(size)]),
     role: "img"
-  }), /*#__PURE__*/_react.default.createElement("title", null, title), theme === 'dark' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
+  }), /*#__PURE__*/_react.default.createElement("title", null, alt), theme === 'dark' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
     id: "prefix__a_dark_".concat(svgId),
     x1: 2.6,
     y1: -12.81,
@@ -360,7 +360,7 @@ var NotFoundIllustration = exports.NotFoundIllustration = function NotFoundIllus
   })));
 };
 NotFoundIllustration.propTypes = {
+  alt: _propTypes.default.string.isRequired,
   size: _propTypes.default.oneOf(['lg', 'sm']),
-  theme: _propTypes.default.oneOf(['light', 'dark']),
-  title: _propTypes.default.string
+  theme: _propTypes.default.oneOf(['light', 'dark'])
 };

package/lib/components/EmptyStates/assets/NotificationsIllustration.js

@@ -12,7 +12,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _settings = require("../../../settings");
 var _uuidv = _interopRequireDefault(require("../../../global/js/utils/uuidv4"));
-var _excluded = ["theme", "title", "size"];
+var _excluded = ["theme", "size", "alt"];
 /**
  * Copyright IBM Corp. 2020, 2021
  *
@@ -25,8 +25,8 @@ var _excluded = ["theme", "title", "size"];
 var blockClass = "".concat(_settings.pkg.prefix, "--empty-state");
 var NotificationsIllustration = exports.NotificationsIllustration = function NotificationsIllustration(_ref) {
   var theme = _ref.theme,
-    title = _ref.title,
     size = _ref.size,
+    alt = _ref.alt,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var svgId = (0, _uuidv.default)();
   return /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({}, rest, {
@@ -36,7 +36,7 @@ var NotificationsIllustration = exports.NotificationsIllustration = function Not
     viewBox: "0 0 80 80",
     className: (0, _classnames.default)(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-notification"), "".concat(blockClass, "__illustration--").concat(size)]),
     role: "img"
-  }), /*#__PURE__*/_react.default.createElement("title", null, title), theme === 'dark' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
+  }), /*#__PURE__*/_react.default.createElement("title", null, alt), theme === 'dark' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
     id: "prefix__a_dark_".concat(svgId),
     x1: 30.05,
     y1: 54.31,
@@ -331,7 +331,7 @@ var NotificationsIllustration = exports.NotificationsIllustration = function Not
   })));
 };
 NotificationsIllustration.propTypes = {
+  alt: _propTypes.default.string.isRequired,
   size: _propTypes.default.oneOf(['lg', 'sm']),
-  theme: _propTypes.default.oneOf(['light', 'dark']),
-  title: _propTypes.default.string
+  theme: _propTypes.default.oneOf(['light', 'dark'])
 };

package/lib/components/EmptyStates/assets/UnauthorizedIllustration.js

@@ -12,7 +12,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _settings = require("../../../settings");
 var _uuidv = _interopRequireDefault(require("../../../global/js/utils/uuidv4"));
-var _excluded = ["theme", "title", "size"];
+var _excluded = ["theme", "size", "alt"];
 /**
  * Copyright IBM Corp. 2020, 2021
  *
@@ -25,8 +25,8 @@ var _excluded = ["theme", "title", "size"];
 var blockClass = "".concat(_settings.pkg.prefix, "--empty-state");
 var UnauthorizedIllustration = exports.UnauthorizedIllustration = function UnauthorizedIllustration(_ref) {
   var theme = _ref.theme,
-    title = _ref.title,
     size = _ref.size,
+    alt = _ref.alt,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var svgId = (0, _uuidv.default)();
   return /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({}, rest, {
@@ -37,7 +37,7 @@ var UnauthorizedIllustration = exports.UnauthorizedIllustration = function Unaut
     viewBox: "0 0 80 80",
     className: (0, _classnames.default)(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-unauthorized"), "".concat(blockClass, "__illustration--").concat(size)]),
     role: "img"
-  }), /*#__PURE__*/_react.default.createElement("title", null, title), theme === 'dark' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
+  }), /*#__PURE__*/_react.default.createElement("title", null, alt), theme === 'dark' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
     id: "prefix__b_dark_".concat(svgId),
     x1: 17.33,
     y1: 40.68,
@@ -304,7 +304,7 @@ var UnauthorizedIllustration = exports.UnauthorizedIllustration = function Unaut
   })));
 };
 UnauthorizedIllustration.propTypes = {
+  alt: _propTypes.default.string.isRequired,
   size: _propTypes.default.oneOf(['lg', 'sm']),
-  theme: _propTypes.default.oneOf(['light', 'dark']),
-  title: _propTypes.default.string
+  theme: _propTypes.default.oneOf(['light', 'dark'])
 };

package/lib/components/FilterSummary/FilterSummary.js

@@ -7,20 +7,26 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = require("@carbon/react");
-var _react2 = _interopRequireWildcard(require("react"));
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@carbon/react");
+var _framerMotion = require("framer-motion");
+var _icons = require("@carbon/react/icons");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _TagSet = require("../TagSet");
 var _settings = require("../../settings");
 var _uuidv = _interopRequireDefault(require("../../global/js/utils/uuidv4"));
+var _motionConstants = require("../../global/js/utils/motionConstants");
+var _hooks = require("../../global/js/hooks");
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
 var _devtools = require("../../global/js/utils/devtools");
 var _excluded = ["className", "clearFiltersText", "clearFilters", "filters", "renderLabel", "overflowType", "clearButtonInline"],
   _excluded2 = ["key", "value"];
 /**
- * Copyright IBM Corp. 2022, 2023
+ * Copyright IBM Corp. 2022, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -30,8 +36,8 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var blockClass = "".concat(_settings.pkg.prefix, "--filter-summary");
-var FilterSummary = /*#__PURE__*/_react2.default.forwardRef(function (_ref, ref) {
-  var _filterSummaryClearBu;
+var FilterSummary = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+  var _viewAllButtonRef$cur, _filterSummaryClearBu;
   var _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
     _ref$clearFiltersText = _ref.clearFiltersText,
@@ -56,30 +62,104 @@ var FilterSummary = /*#__PURE__*/_react2.default.forwardRef(function (_ref, ref)
       label: (_renderLabel = renderLabel === null || renderLabel === void 0 ? void 0 : renderLabel(key, value)) !== null && _renderLabel !== void 0 ? _renderLabel : "".concat(key, ": ").concat(value)
     });
   });
-  var filterSummaryClearButton = (0, _react2.useRef)();
-  var filterSummaryRef = (0, _react2.useRef)();
-  var localRef = ref || filterSummaryRef;
-  return /*#__PURE__*/_react2.default.createElement("div", (0, _extends2.default)({}, (0, _devtools.getDevtoolsProps)(componentName), {
+  var filterSummaryClearButton = (0, _react.useRef)();
+  var viewAllButtonRef = (0, _react.useRef)();
+  var filterSummaryRef = (0, _react.useRef)();
+  var localRef = filterSummaryRef || ref;
+  var _useState = (0, _react.useState)(0),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    overflowCount = _useState2[0],
+    setOverflowCount = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    multiline = _useState4[0],
+    setMultiline = _useState4[1];
+  var previousState = (0, _hooks.usePreviousValue)({
+    multiline: multiline
+  });
+  var handleViewAll = function handleViewAll() {
+    if (overflowCount === 0) {
+      setMultiline(false);
+      return;
+    }
+    setMultiline(function (prev) {
+      return !prev;
+    });
+  };
+  var viewAllWidth = typeof (viewAllButtonRef === null || viewAllButtonRef === void 0 || (_viewAllButtonRef$cur = viewAllButtonRef.current) === null || _viewAllButtonRef$cur === void 0 ? void 0 : _viewAllButtonRef$cur.offsetWidth) === 'undefined' ? 0 : overflowCount > 0 ? 48 : 0;
+  var measurementOffset = (filterSummaryClearButton === null || filterSummaryClearButton === void 0 || (_filterSummaryClearBu = filterSummaryClearButton.current) === null || _filterSummaryClearBu === void 0 ? void 0 : _filterSummaryClearBu.offsetWidth) + viewAllWidth;
+  var renderTagSet = function renderTagSet(type) {
+    return /*#__PURE__*/_react.default.createElement(_framerMotion.motion.div, {
+      key: type,
+      initial: {
+        opacity: 0,
+        y: -16
+      },
+      animate: {
+        opacity: 1,
+        y: 0
+      },
+      exit: {
+        opacity: 0,
+        y: -16
+      },
+      transition: {
+        duration: _motionConstants.DURATIONS.moderate01,
+        ease: _motionConstants.EASINGS.productive.entrance
+      }
+    }, /*#__PURE__*/_react.default.createElement(_TagSet.TagSet, {
+      allTagsModalSearchLabel: "Search all tags",
+      allTagsModalSearchPlaceholderText: "Search all tags",
+      allTagsModalTitle: "All tags",
+      showAllTagsLabel: "View all tags",
+      tags: tagFilters,
+      overflowType: overflowType,
+      className: (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(blockClass, "__clear-button-inline"), clearButtonInline)),
+      containingElementRef: localRef,
+      measurementOffset: measurementOffset,
+      onOverflowTagChange: function onOverflowTagChange(overflowTags) {
+        return setOverflowCount(overflowTags.length);
+      },
+      multiline: multiline
+    }));
+  };
+  (0, _hooks.useWindowResize)(function () {
+    var handleFilterSummaryResize = function handleFilterSummaryResize() {
+      var _localRef$current;
+      if (multiline && (localRef === null || localRef === void 0 || (_localRef$current = localRef.current) === null || _localRef$current === void 0 ? void 0 : _localRef$current.offsetHeight) <= 50) {
+        setMultiline(false);
+      }
+    };
+    var filterResize = (0, _debounce.default)(handleFilterSummaryResize, 500);
+    filterResize();
+  }, [previousState === null || previousState === void 0 ? void 0 : previousState.multiline, multiline]);
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, (0, _devtools.getDevtoolsProps)(componentName), {
     id: filterSummaryId
   }, rest, {
     ref: localRef,
-    className: (0, _classnames.default)([blockClass, className])
-  }), /*#__PURE__*/_react2.default.createElement(_TagSet.TagSet, {
-    allTagsModalSearchLabel: "Search all tags",
-    allTagsModalSearchPlaceholderText: "Search all tags",
-    allTagsModalTitle: "All tags",
-    showAllTagsLabel: "View all tags",
-    tags: tagFilters,
-    overflowType: overflowType,
-    className: (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(blockClass, "__clear-button-inline"), clearButtonInline)),
-    containingElementRef: localRef,
-    measurementOffset: filterSummaryClearButton === null || filterSummaryClearButton === void 0 || (_filterSummaryClearBu = filterSummaryClearButton.current) === null || _filterSummaryClearBu === void 0 ? void 0 : _filterSummaryClearBu.offsetWidth
-  }), /*#__PURE__*/_react2.default.createElement(_react.Button, {
+    className: (0, _classnames.default)([blockClass, className], (0, _defineProperty2.default)({}, "".concat(blockClass, "__expanded"), multiline))
+  }), /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
+    mode: "wait",
+    exitBeforeEnter: true
+  }, !multiline && renderTagSet('single'), multiline && renderTagSet('multiline')), /*#__PURE__*/_react.default.createElement(_react2.Button, {
     kind: "ghost",
     size: "sm",
     onClick: clearFilters,
-    ref: filterSummaryClearButton
-  }, clearFiltersText));
+    ref: filterSummaryClearButton,
+    className: "".concat(blockClass, "__clear-all-button")
+  }, clearFiltersText), (overflowCount > 0 || multiline) && /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(blockClass, "__view-all--wrapper")
+  }, /*#__PURE__*/_react.default.createElement(_react2.IconButton, {
+    ref: viewAllButtonRef,
+    kind: "ghost",
+    label: 'View all',
+    className: "".concat(blockClass, "__view-all--trigger"),
+    align: "left",
+    onClick: handleViewAll,
+    size: "sm"
+  }, /*#__PURE__*/_react.default.createElement(_icons.ChevronDown, {
+    className: (0, _classnames.default)("".concat(blockClass, "__view-all--chevron"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__view-all--chevron-multiline"), multiline))
+  }))));
 });
 var componentName = 'FilterSummary';
 FilterSummary.displayName = componentName;