@carbon/ibm-products 1.69.0 → 1.71.0

package/es/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["action", "className", "illustrationTheme", "link", "size", "subtitle", "title"];
+var _excluded = ["action", "className", "illustrationTheme", "illustrationDescription", "link", "size", "subtitle", "title"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 /**
@@ -31,6 +31,7 @@ export var NotificationsEmptyState = /*#__PURE__*/React.forwardRef(function (_re
   var action = _ref.action,
     className = _ref.className,
     illustrationTheme = _ref.illustrationTheme,
+    illustrationDescription = _ref.illustrationDescription,
     link = _ref.link,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? defaults.size : _ref$size,
@@ -42,8 +43,8 @@ export var NotificationsEmptyState = /*#__PURE__*/React.forwardRef(function (_re
     ref: ref
   }, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(NotificationsIllustration, {
     size: size,
-    title: title,
-    theme: illustrationTheme
+    theme: illustrationTheme,
+    alt: illustrationDescription || title
   }), /*#__PURE__*/React.createElement(EmptyStateContent, {
     action: action,
     link: link,
@@ -77,6 +78,10 @@ NotificationsEmptyState.propTypes = {
    * Provide an optional class to be applied to the containing node.
    */
   className: PropTypes.string,
+  /**
+   * The alt text for empty state svg images.If not provided , title will be used.
+   */
+  illustrationDescription: PropTypes.string,
   /**
    * Empty state illustration theme variations.
    * To ensure you use the correct themed illustrations, you can conditionally specify light or dark

package/es/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["action", "className", "illustrationTheme", "link", "size", "subtitle", "title"];
+var _excluded = ["action", "className", "illustrationTheme", "illustrationDescription", "link", "size", "subtitle", "title"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 /**
@@ -31,6 +31,7 @@ export var UnauthorizedEmptyState = /*#__PURE__*/React.forwardRef(function (_ref
   var action = _ref.action,
     className = _ref.className,
     illustrationTheme = _ref.illustrationTheme,
+    illustrationDescription = _ref.illustrationDescription,
     link = _ref.link,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? defaults.size : _ref$size,
@@ -42,8 +43,8 @@ export var UnauthorizedEmptyState = /*#__PURE__*/React.forwardRef(function (_ref
     ref: ref
   }, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(UnauthorizedIllustration, {
     size: size,
-    title: title,
-    theme: illustrationTheme
+    theme: illustrationTheme,
+    alt: illustrationDescription || title
   }), /*#__PURE__*/React.createElement(EmptyStateContent, {
     action: action,
     link: link,
@@ -77,6 +78,10 @@ UnauthorizedEmptyState.propTypes = {
    * Provide an optional class to be applied to the containing node.
    */
   className: PropTypes.string,
+  /**
+   * The alt text for empty state svg images.If not provided , title will be used.
+   */
+  illustrationDescription: PropTypes.string,
   /**
    * Empty state illustration theme variations.
    * To ensure you use the correct themed illustrations, you can conditionally specify light or dark

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["title", "theme", "size"];
+var _excluded = ["theme", "size", "alt"];
 /**
  * Copyright IBM Corp. 2020, 2021
  *
@@ -20,9 +20,9 @@ import uuidv4 from '../../../global/js/utils/uuidv4';
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--empty-state");
 export var ErrorIllustration = function ErrorIllustration(_ref) {
-  var title = _ref.title,
-    theme = _ref.theme,
+  var theme = _ref.theme,
     size = _ref.size,
+    alt = _ref.alt,
     rest = _objectWithoutProperties(_ref, _excluded);
   var svgId = uuidv4();
   return /*#__PURE__*/React.createElement("svg", _extends({}, rest, {
@@ -32,7 +32,7 @@ export var ErrorIllustration = function ErrorIllustration(_ref) {
     viewBox: "0 0 80 80",
     className: cx(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-error"), "".concat(blockClass, "__illustration--").concat(size)]),
     role: "img"
-  }), /*#__PURE__*/React.createElement("title", null, title), theme === 'dark' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
+  }), /*#__PURE__*/React.createElement("title", null, alt), theme === 'dark' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
     id: "prefix__a_dark_".concat(svgId),
     x1: 38.9,
     y1: 77.08,
@@ -209,7 +209,7 @@ export var ErrorIllustration = function ErrorIllustration(_ref) {
   })));
 };
 ErrorIllustration.propTypes = {
+  alt: PropTypes.string.isRequired,
   size: PropTypes.oneOf(['lg', 'sm']),
-  theme: PropTypes.oneOf(['light', 'dark']),
-  title: PropTypes.string
+  theme: PropTypes.oneOf(['light', 'dark'])
 };

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["title", "theme", "size"];
+var _excluded = ["theme", "size", "alt"];
 /**
  * Copyright IBM Corp. 2020, 2021
  *
@@ -20,9 +20,9 @@ import uuidv4 from '../../../global/js/utils/uuidv4';
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--empty-state");
 export var NoDataIllustration = function NoDataIllustration(_ref) {
-  var title = _ref.title,
-    theme = _ref.theme,
+  var theme = _ref.theme,
     size = _ref.size,
+    alt = _ref.alt,
     rest = _objectWithoutProperties(_ref, _excluded);
   var svgId = uuidv4();
   return /*#__PURE__*/React.createElement("svg", _extends({}, rest, {
@@ -32,7 +32,7 @@ export var NoDataIllustration = function NoDataIllustration(_ref) {
     viewBox: "0 0 80 80",
     className: cx(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-noData"), "".concat(blockClass, "__illustration--").concat(size)]),
     role: "img"
-  }), /*#__PURE__*/React.createElement("title", null, title), theme === 'dark' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
+  }), /*#__PURE__*/React.createElement("title", null, alt), theme === 'dark' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
     id: "prefix__a_dark_".concat(svgId),
     x1: 11.12,
     y1: 43.34,
@@ -172,7 +172,7 @@ export var NoDataIllustration = function NoDataIllustration(_ref) {
   })));
 };
 NoDataIllustration.propTypes = {
+  alt: PropTypes.string.isRequired,
   size: PropTypes.oneOf(['lg', 'sm']),
-  theme: PropTypes.oneOf(['light', 'dark']),
-  title: PropTypes.string
+  theme: PropTypes.oneOf(['light', 'dark'])
 };

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["title", "theme", "size"];
+var _excluded = ["theme", "size", "alt"];
 /**
  * Copyright IBM Corp. 2020, 2021
  *
@@ -20,9 +20,9 @@ import uuidv4 from '../../../global/js/utils/uuidv4';
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--empty-state");
 export var NoTagsIllustration = function NoTagsIllustration(_ref) {
-  var title = _ref.title,
-    theme = _ref.theme,
+  var theme = _ref.theme,
     size = _ref.size,
+    alt = _ref.alt,
     rest = _objectWithoutProperties(_ref, _excluded);
   var svgId = uuidv4();
   return /*#__PURE__*/React.createElement("svg", _extends({}, rest, {
@@ -33,7 +33,7 @@ export var NoTagsIllustration = function NoTagsIllustration(_ref) {
     viewBox: "0 0 80 80",
     className: cx(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-noTags"), "".concat(blockClass, "__illustration--").concat(size)]),
     role: "img"
-  }), /*#__PURE__*/React.createElement("title", null, title), theme === 'dark' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
+  }), /*#__PURE__*/React.createElement("title", null, alt), theme === 'dark' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
     id: "prefix__c_dark_".concat(svgId),
     x1: 34.96,
     y1: 5.37,
@@ -479,7 +479,7 @@ export var NoTagsIllustration = function NoTagsIllustration(_ref) {
   })));
 };
 NoTagsIllustration.propTypes = {
+  alt: PropTypes.string.isRequired,
   size: PropTypes.oneOf(['lg', 'sm']),
-  theme: PropTypes.oneOf(['light', 'dark']),
-  title: PropTypes.string
+  theme: PropTypes.oneOf(['light', 'dark'])
 };

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["title", "theme", "size"];
+var _excluded = ["theme", "size", "alt"];
 /**
  * Copyright IBM Corp. 2020, 2021
  *
@@ -20,9 +20,9 @@ import uuidv4 from '../../../global/js/utils/uuidv4';
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--empty-state");
 export var NotFoundIllustration = function NotFoundIllustration(_ref) {
-  var title = _ref.title,
-    theme = _ref.theme,
+  var theme = _ref.theme,
     size = _ref.size,
+    alt = _ref.alt,
     rest = _objectWithoutProperties(_ref, _excluded);
   var svgId = uuidv4();
   return /*#__PURE__*/React.createElement("svg", _extends({}, rest, {
@@ -32,7 +32,7 @@ export var NotFoundIllustration = function NotFoundIllustration(_ref) {
     viewBox: "0 0 80 80",
     className: cx(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-notFound"), "".concat(blockClass, "__illustration--").concat(size)]),
     role: "img"
-  }), /*#__PURE__*/React.createElement("title", null, title), theme === 'dark' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
+  }), /*#__PURE__*/React.createElement("title", null, alt), theme === 'dark' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
     id: "prefix__a_dark_".concat(svgId),
     x1: 2.6,
     y1: -12.81,
@@ -356,7 +356,7 @@ export var NotFoundIllustration = function NotFoundIllustration(_ref) {
   })));
 };
 NotFoundIllustration.propTypes = {
+  alt: PropTypes.string.isRequired,
   size: PropTypes.oneOf(['lg', 'sm']),
-  theme: PropTypes.oneOf(['light', 'dark']),
-  title: PropTypes.string
+  theme: PropTypes.oneOf(['light', 'dark'])
 };

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["title", "theme", "size"];
+var _excluded = ["theme", "size", "alt"];
 /**
  * Copyright IBM Corp. 2020, 2021
  *
@@ -20,9 +20,9 @@ import uuidv4 from '../../../global/js/utils/uuidv4';
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--empty-state");
 export var NotificationsIllustration = function NotificationsIllustration(_ref) {
-  var title = _ref.title,
-    theme = _ref.theme,
+  var theme = _ref.theme,
     size = _ref.size,
+    alt = _ref.alt,
     rest = _objectWithoutProperties(_ref, _excluded);
   var svgId = uuidv4();
   return /*#__PURE__*/React.createElement("svg", _extends({}, rest, {
@@ -32,7 +32,7 @@ export var NotificationsIllustration = function NotificationsIllustration(_ref)
     viewBox: "0 0 80 80",
     className: cx(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-notification"), "".concat(blockClass, "__illustration--").concat(size)]),
     role: "img"
-  }), /*#__PURE__*/React.createElement("title", null, title), theme === 'dark' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
+  }), /*#__PURE__*/React.createElement("title", null, alt), theme === 'dark' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
     id: "prefix__a_dark_".concat(svgId),
     x1: 30.05,
     y1: 54.31,
@@ -327,7 +327,7 @@ export var NotificationsIllustration = function NotificationsIllustration(_ref)
   })));
 };
 NotificationsIllustration.propTypes = {
+  alt: PropTypes.string.isRequired,
   size: PropTypes.oneOf(['lg', 'sm']),
-  theme: PropTypes.oneOf(['light', 'dark']),
-  title: PropTypes.string
+  theme: PropTypes.oneOf(['light', 'dark'])
 };

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["title", "theme", "size"];
+var _excluded = ["theme", "size", "alt"];
 /**
  * Copyright IBM Corp. 2020, 2021
  *
@@ -20,9 +20,9 @@ import uuidv4 from '../../../global/js/utils/uuidv4';
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--empty-state");
 export var UnauthorizedIllustration = function UnauthorizedIllustration(_ref) {
-  var title = _ref.title,
-    theme = _ref.theme,
+  var theme = _ref.theme,
     size = _ref.size,
+    alt = _ref.alt,
     rest = _objectWithoutProperties(_ref, _excluded);
   var svgId = uuidv4();
   return /*#__PURE__*/React.createElement("svg", _extends({}, rest, {
@@ -33,7 +33,7 @@ export var UnauthorizedIllustration = function UnauthorizedIllustration(_ref) {
     viewBox: "0 0 80 80",
     className: cx(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-unauthorized"), "".concat(blockClass, "__illustration--").concat(size)]),
     role: "img"
-  }), /*#__PURE__*/React.createElement("title", null, title), theme === 'dark' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
+  }), /*#__PURE__*/React.createElement("title", null, alt), theme === 'dark' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
     id: "prefix__b_dark_".concat(svgId),
     x1: 17.33,
     y1: 40.68,
@@ -300,7 +300,7 @@ export var UnauthorizedIllustration = function UnauthorizedIllustration(_ref) {
   })));
 };
 UnauthorizedIllustration.propTypes = {
+  alt: PropTypes.string.isRequired,
   size: PropTypes.oneOf(['lg', 'sm']),
-  theme: PropTypes.oneOf(['light', 'dark']),
-  title: PropTypes.string
+  theme: PropTypes.oneOf(['light', 'dark'])
 };

package/es/components/FilterSummary/FilterSummary.js

@@ -1,10 +1,12 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["key", "value"];
+var _excluded = ["className", "clearFiltersText", "clearFilters", "filters", "renderLabel", "overflowType", "clearButtonInline"],
+  _excluded2 = ["key", "value"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 /**
- * 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.
@@ -16,6 +18,7 @@ import cx from 'classnames';
 import { TagSet } from '../TagSet';
 import { pkg } from '../../settings';
 import uuidv4 from '../../global/js/utils/uuidv4';
+import { getDevtoolsProps } from '../../global/js/utils/devtools';
 var blockClass = "".concat(pkg.prefix, "--filter-summary");
 var FilterSummary = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _filterSummaryClearBu;
@@ -23,35 +26,36 @@ var FilterSummary = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className = _ref$className === void 0 ? '' : _ref$className,
     _ref$clearFiltersText = _ref.clearFiltersText,
     clearFiltersText = _ref$clearFiltersText === void 0 ? 'Clear filters' : _ref$clearFiltersText,
-    _ref$clearFilters = _ref.clearFilters,
-    clearFilters = _ref$clearFilters === void 0 ? function () {} : _ref$clearFilters,
-    _ref$filters = _ref.filters,
-    filters = _ref$filters === void 0 ? [] : _ref$filters,
+    clearFilters = _ref.clearFilters,
+    filters = _ref.filters,
     _ref$renderLabel = _ref.renderLabel,
     renderLabel = _ref$renderLabel === void 0 ? null : _ref$renderLabel,
     _ref$overflowType = _ref.overflowType,
     overflowType = _ref$overflowType === void 0 ? 'default' : _ref$overflowType,
     _ref$clearButtonInlin = _ref.clearButtonInline,
-    clearButtonInline = _ref$clearButtonInlin === void 0 ? true : _ref$clearButtonInlin;
+    clearButtonInline = _ref$clearButtonInlin === void 0 ? true : _ref$clearButtonInlin,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var filterSummaryId = "".concat(blockClass, "__").concat(uuidv4());
   var tagFilters = filters.map(function (_ref2) {
     var _renderLabel;
     var key = _ref2.key,
       value = _ref2.value,
-      rest = _objectWithoutProperties(_ref2, _excluded);
+      rest = _objectWithoutProperties(_ref2, _excluded2);
     return _objectSpread(_objectSpread({}, rest), {}, {
       type: 'gray',
-      label: (_renderLabel = renderLabel === null || renderLabel === void 0 ? void 0 : renderLabel(key, value)) !== null && _renderLabel !== void 0 ? _renderLabel : "".concat(key, ": ").concat(value)
+      label: (_renderLabel = renderLabel === null || renderLabel === void 0 ? void 0 : renderLabel(key, value)) !== null && _renderLabel !== void 0 ? _renderLabel : "".concat(key, ": ").concat(value),
+      title: clearFiltersText
     });
   });
   var filterSummaryClearButton = useRef();
   var filterSummaryRef = useRef();
-  var localRef = filterSummaryRef || ref;
-  return /*#__PURE__*/React.createElement("div", {
-    ref: localRef,
-    className: cx([blockClass, className]),
+  var localRef = ref || filterSummaryRef;
+  return /*#__PURE__*/React.createElement("div", _extends({}, getDevtoolsProps(componentName), {
     id: filterSummaryId
-  }, /*#__PURE__*/React.createElement(TagSet, {
+  }, rest, {
+    ref: localRef,
+    className: cx([blockClass, className])
+  }), /*#__PURE__*/React.createElement(TagSet, {
     allTagsModalSearchLabel: "Search all tags",
     allTagsModalSearchPlaceholderText: "Search all tags",
     allTagsModalTitle: "All tags",
@@ -72,7 +76,7 @@ var componentName = 'FilterSummary';
 FilterSummary.displayName = componentName;
 FilterSummary.propTypes = {
   className: PropTypes.string,
-  clearButtonInline: PropTypes.boolean,
+  clearButtonInline: PropTypes.bool,
   clearFilters: PropTypes.func.isRequired,
   clearFiltersText: PropTypes.string,
   filters: PropTypes.arrayOf(PropTypes.object).isRequired,

package/es/components/InterstitialScreen/InterstitialScreen.js

@@ -13,7 +13,6 @@ var _excluded = ["children", "className", "closeIconDescription", "domainName",
 // Import portions of React that are needed.
 import React, { Children, useCallback, useEffect, useRef, useState } from 'react';
 import { clamp } from 'lodash';
-// Other standard imports.
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools';
@@ -57,7 +56,10 @@ var defaults = {
 };
 
 /**
- * TODO: A description of the component.
+ * InterstitialScreen can be a full page or an overlay, and are
+ * shown on the first time a user accesses a new experience
+ * (e.g. upon first login or first time opening a page where a
+ * newly purchased capability is presented).
  */
 export var InterstitialScreen = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _media$breakpoints, _media$breakpoints2;
@@ -151,7 +153,7 @@ export var InterstitialScreen = /*#__PURE__*/React.forwardRef(function (_ref, re
   }, [isOpen, progStep]);
   useEffect(function () {
     var _nextButtonRef$curren;
-    //for modal only, "is-visible" triggers animation
+    // for modal only, "is-visible" triggers animation
     setIsVisibleClass(!isFullScreen && isOpen ? 'is-visible' : null);
     nextButtonRef === null || nextButtonRef === void 0 ? void 0 : (_nextButtonRef$curren = nextButtonRef.current) === null || _nextButtonRef$curren === void 0 ? void 0 : _nextButtonRef$curren.focus();
   }, [isFullScreen, isOpen]);
@@ -175,11 +177,10 @@ export var InterstitialScreen = /*#__PURE__*/React.forwardRef(function (_ref, re
   var domainProductDelimiter = domainName !== '' && productName !== '' ? ' | ' : '';
   var renderModal = function renderModal(childElements) {
     return /*#__PURE__*/React.createElement(ComposedModal, _extends({}, rest, {
-      className: cx(
-      // blockClass, // Apply the block class to the main HTML element
+      preventCloseOnClickOutside: true,
+      className: cx(blockClass,
+      // Apply the block class to the main HTML element
       className // Apply any supplied class names to the main HTML element.
-      // variantClass,
-      // isVisibleClass
       ),
 
       size: "lg",

package/es/components/Tearsheet/TearsheetShell.js

@@ -27,6 +27,7 @@ import pconsole from '../../global/js/utils/pconsole';
 import { Button, ComposedModal, ModalHeader, ModalBody } from 'carbon-components-react';
 import { ActionSet } from '../ActionSet';
 import { Wrap } from '../../global/js/utils/Wrap';
+import { useFocus } from '../../global/js/hooks/useFocus';
 
 // The block part of our conventional BEM class names (bc__E--M).
 var bc = "".concat(pkg.prefix, "--tearsheet");
@@ -97,6 +98,9 @@ export var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var modalRef = ref || localRef;
   var _useResizeObserver = useResizeObserver(resizer),
     width = _useResizeObserver.width;
+  var _useFocus = useFocus(modalRef),
+    firstElement = _useFocus.firstElement,
+    keyDownListener = _useFocus.keyDownListener;
 
   // Keep track of the stack depth and our position in it (1-based, 0=closed)
   var _useState3 = useState(0),
@@ -133,10 +137,7 @@ export var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
   // Callback to give the tearsheet the opportunity to claim focus
   handleStackChange.claimFocus = function () {
-    var element = selectorPrimaryFocus ? modalRef.current.innerModal.current.querySelector(selectorPrimaryFocus) : modalRef.current.startSentinel.current;
-    setTimeout(function () {
-      return element.focus();
-    }, 1);
+    firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
   };
   useEffect(function () {
     var notify = function notify() {
@@ -204,6 +205,7 @@ export var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       open: open,
       selectorPrimaryFocus: selectorPrimaryFocus,
       onFocus: handleFocus,
+      onKeyDown: keyDownListener,
       preventCloseOnClickOutside: !isPassive,
       ref: modalRef,
       selectorsFloatingMenus: [".".concat(carbon.prefix, "--overflow-menu-options"), ".".concat(carbon.prefix, "--tooltip"), '.flatpickr-calendar', ".".concat(bc, "__container")],

package/es/global/js/hooks/index.js

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2020, 2023
+ * Copyright IBM Corp. 2020, 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.
@@ -16,4 +16,5 @@ export { useResetCreateComponent } from './useResetCreateComponent';
 export { useRetrieveStepData } from './useRetrieveStepData';
 export { useValidCreateStepCount } from './useValidCreateStepCount';
 export { useControllableState } from './useControllableState';
-export { usePrefix } from './usePrefix';
+export { usePrefix } from './usePrefix';
+export { useIsomorphicEffect } from './useIsomorphicEffect';

package/es/global/js/hooks/useFocus.js

@@ -0,0 +1,72 @@
+/**
+ * Copyright IBM Corp. 2024, 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.
+ */
+
+import { pkg, carbon } from '../../../settings';
+import { useCallback, useEffect } from 'react';
+export var useFocus = function useFocus(modalRef) {
+  var tearsheetBaseClass = "".concat(pkg.prefix, "--tearsheet");
+  // Querying focusable element in the modal
+  // Query to exclude hidden elements in the modal from querySelectorAll() method
+  // feel free to include more if needed :)
+  var notQuery = ":not(.".concat(carbon.prefix, "--visually-hidden,.").concat(tearsheetBaseClass, "__header--no-close-icon,.").concat(carbon.prefix, "--btn--disabled,[aria-hidden=\"true\"],[tabindex=\"-1\"])");
+  // Queries to include element types button, input, select, textarea
+  var queryButton = "button".concat(notQuery);
+  var queryInput = "input".concat(notQuery);
+  var querySelect = "select".concat(notQuery);
+  var queryTextarea = "textarea".concat(notQuery);
+  var queryLink = "[href]".concat(notQuery);
+  // Final query
+  var query = "".concat(queryButton, ",").concat(queryLink, ",").concat(queryInput, ",").concat(querySelect, ",").concat(queryTextarea);
+  var getFocusable = useCallback(function () {
+    var _modalRef$current, _modalRef$current$inn, _modalRef$current$inn2;
+    // Selecting all focusable elements based on the above conditions
+    var focusableElements = modalRef === null || modalRef === void 0 ? void 0 : (_modalRef$current = modalRef.current) === null || _modalRef$current === void 0 ? void 0 : (_modalRef$current$inn = _modalRef$current.innerModal) === null || _modalRef$current$inn === void 0 ? void 0 : (_modalRef$current$inn2 = _modalRef$current$inn.current) === null || _modalRef$current$inn2 === void 0 ? void 0 : _modalRef$current$inn2.querySelectorAll("".concat(query));
+    var first = focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements[0];
+    var last = focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements[(focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements.length) - 1];
+    var all = focusableElements;
+    return {
+      first: first,
+      last: last,
+      all: all
+    };
+  }, [modalRef, query]);
+  useEffect(function () {
+    getFocusable();
+  }, [getFocusable]);
+  var handleKeyDown = function handleKeyDown(event) {
+    // Checking whether the key is tab or not
+    if (event.key === 'Tab') {
+      // updating the focusable elements list
+      var _getFocusable = getFocusable(),
+        first = _getFocusable.first,
+        last = _getFocusable.last,
+        all = _getFocusable.all;
+      event.persist();
+      setTimeout(function () {
+        var _document, _document2;
+        if (event.shiftKey && !Array.prototype.includes.call(all, (_document = document) === null || _document === void 0 ? void 0 : _document.activeElement)) {
+          // Prevents the default "Tab" behavior
+          event.preventDefault();
+          // if the user press shift+tab and the current element not in focusable items
+          last === null || last === void 0 ? void 0 : last.focus();
+        } else if (!Array.prototype.includes.call(all, (_document2 = document) === null || _document2 === void 0 ? void 0 : _document2.activeElement)) {
+          event.preventDefault();
+          // user pressing tab key only then
+          // focusing the first element if the current element is not in focusable items
+          first === null || first === void 0 ? void 0 : first.focus();
+        }
+      }, 0);
+    }
+  };
+  return {
+    firstElement: getFocusable().first,
+    lastElement: getFocusable().last,
+    allElements: getFocusable().all,
+    keyDownListener: handleKeyDown,
+    getFocusable: getFocusable
+  };
+};

package/es/global/js/hooks/useIsomorphicEffect.js

@@ -0,0 +1,12 @@
+/**
+ * Copyright IBM Corp. 2024, 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.
+ */
+
+import { useEffect, useLayoutEffect } from 'react';
+
+// Originally from `@carbon/react`, https://github.com/carbon-design-system/carbon/blob/main/packages/react/src/internal/useIsomorphicEffect.js
+// useLayoutEffect on the client, useEffect on the server
+export var useIsomorphicEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;

package/es/global/js/package-settings.js

@@ -101,7 +101,6 @@ var defaults = {
     'a-new-feature': false,
     'default-portal-target-body': true,
     'Datagrid.useInlineEdit': false,
-    'Datagrid.useFiltering': false,
     'Datagrid.useCustomizeColumns': false,
     'ExampleComponent.secondaryIcon': false,
     'ExampleComponent.useExample': false

package/lib/components/ButtonMenu/ButtonMenu.js

@@ -12,7 +12,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _settings = require("../../settings");
 var _carbonComponentsReact = require("carbon-components-react");
-var _excluded = ["children", "className", "iconDescription", "kind", "label", "menuOptionsClass", "renderIcon", "size"];
+var _getNodeTextContent = require("../../global/js/utils/getNodeTextContent");
+var _excluded = ["children", "className", "iconDescription", "kind", "label", "menuAriaLabel", "menuOptionsClass", "renderIcon", "size"];
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(_settings.pkg.prefix, "--button-menu");
 var componentName = 'ButtonMenu';
@@ -33,12 +34,14 @@ var defaults = {
  * OverflowMenuItem component.
  */
 var ButtonMenu = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+  var _ref2;
   var children = _ref.children,
     className = _ref.className,
     iconDescription = _ref.iconDescription,
     _ref$kind = _ref.kind,
     kind = _ref$kind === void 0 ? defaults.kind : _ref$kind,
     label = _ref.label,
+    menuAriaLabel = _ref.menuAriaLabel,
     menuOptionsClass = _ref.menuOptionsClass,
     Icon = _ref.renderIcon,
     _ref$size = _ref.size,
@@ -53,6 +56,7 @@ var ButtonMenu = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
 
     menuOptionsClass: (0, _classnames.default)("".concat(blockClass, "__options"), menuOptionsClass),
     size: size,
+    ariaLabel: (_ref2 = menuAriaLabel !== null && menuAriaLabel !== void 0 ? menuAriaLabel : (0, _getNodeTextContent.getNodeTextContent)(label)) !== null && _ref2 !== void 0 ? _ref2 : undefined,
     renderIcon: function renderIcon() {
       return /*#__PURE__*/_react.default.createElement("div", {
         className: (0, _classnames.default)(["".concat(blockClass, "__trigger"), "".concat(_settings.carbon.prefix, "--btn"), "".concat(_settings.carbon.prefix, "--btn--").concat(kind), "".concat(_settings.carbon.prefix, "--btn--").concat(buttonSize)])
@@ -100,6 +104,12 @@ ButtonMenu.propTypes = {
    * The button label for the menu trigger.
    */
   label: _propTypes.default.node,
+  /**
+   * Provide the menuAriaLabel prop to be passed to the ButtonMenu component.
+   * This optional label should contain or match the visible labels or
+   *  it will automatically take button label
+   */
+  menuAriaLabel: _propTypes.default.string,
   /**
    * class name applied to the overflow options
    */