@carbon/ibm-products 1.69.0 → 1.71.0

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

@@ -12,13 +12,13 @@ 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 = ["title", "theme", "size"];
+var _excluded = ["theme", "size", "alt"];
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(_settings.pkg.prefix, "--empty-state");
 var ErrorIllustration = function ErrorIllustration(_ref) {
-  var title = _ref.title,
-    theme = _ref.theme,
+  var theme = _ref.theme,
     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, {
@@ -28,7 +28,7 @@ var ErrorIllustration = function ErrorIllustration(_ref) {
     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,
@@ -206,7 +206,7 @@ var ErrorIllustration = function ErrorIllustration(_ref) {
 };
 exports.ErrorIllustration = 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,13 +12,13 @@ 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 = ["title", "theme", "size"];
+var _excluded = ["theme", "size", "alt"];
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(_settings.pkg.prefix, "--empty-state");
 var NoDataIllustration = function NoDataIllustration(_ref) {
-  var title = _ref.title,
-    theme = _ref.theme,
+  var theme = _ref.theme,
     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, {
@@ -28,7 +28,7 @@ var NoDataIllustration = function NoDataIllustration(_ref) {
     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,
@@ -169,7 +169,7 @@ var NoDataIllustration = function NoDataIllustration(_ref) {
 };
 exports.NoDataIllustration = NoDataIllustration;
 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,13 +12,13 @@ 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 = ["title", "theme", "size"];
+var _excluded = ["theme", "size", "alt"];
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(_settings.pkg.prefix, "--empty-state");
 var NoTagsIllustration = function NoTagsIllustration(_ref) {
-  var title = _ref.title,
-    theme = _ref.theme,
+  var theme = _ref.theme,
     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, {
@@ -29,7 +29,7 @@ var NoTagsIllustration = function NoTagsIllustration(_ref) {
     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,
@@ -476,7 +476,7 @@ var NoTagsIllustration = function NoTagsIllustration(_ref) {
 };
 exports.NoTagsIllustration = NoTagsIllustration;
 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,13 +12,13 @@ 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 = ["title", "theme", "size"];
+var _excluded = ["theme", "size", "alt"];
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(_settings.pkg.prefix, "--empty-state");
 var NotFoundIllustration = function NotFoundIllustration(_ref) {
-  var title = _ref.title,
-    theme = _ref.theme,
+  var theme = _ref.theme,
     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, {
@@ -28,7 +28,7 @@ var NotFoundIllustration = function NotFoundIllustration(_ref) {
     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,
@@ -353,7 +353,7 @@ var NotFoundIllustration = function NotFoundIllustration(_ref) {
 };
 exports.NotFoundIllustration = NotFoundIllustration;
 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,13 +12,13 @@ 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 = ["title", "theme", "size"];
+var _excluded = ["theme", "size", "alt"];
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(_settings.pkg.prefix, "--empty-state");
 var NotificationsIllustration = function NotificationsIllustration(_ref) {
-  var title = _ref.title,
-    theme = _ref.theme,
+  var theme = _ref.theme,
     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, {
@@ -28,7 +28,7 @@ var NotificationsIllustration = function NotificationsIllustration(_ref) {
     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,
@@ -324,7 +324,7 @@ var NotificationsIllustration = function NotificationsIllustration(_ref) {
 };
 exports.NotificationsIllustration = NotificationsIllustration;
 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,13 +12,13 @@ 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 = ["title", "theme", "size"];
+var _excluded = ["theme", "size", "alt"];
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(_settings.pkg.prefix, "--empty-state");
 var UnauthorizedIllustration = function UnauthorizedIllustration(_ref) {
-  var title = _ref.title,
-    theme = _ref.theme,
+  var theme = _ref.theme,
     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, {
@@ -29,7 +29,7 @@ var UnauthorizedIllustration = function UnauthorizedIllustration(_ref) {
     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,
@@ -297,7 +297,7 @@ var UnauthorizedIllustration = function UnauthorizedIllustration(_ref) {
 };
 exports.UnauthorizedIllustration = UnauthorizedIllustration;
 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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _carbonComponentsReact = require("carbon-components-react");
@@ -15,7 +16,9 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _TagSet = require("../TagSet");
 var _settings = require("../../settings");
 var _uuidv = _interopRequireDefault(require("../../global/js/utils/uuidv4"));
-var _excluded = ["key", "value"];
+var _devtools = require("../../global/js/utils/devtools");
+var _excluded = ["className", "clearFiltersText", "clearFilters", "filters", "renderLabel", "overflowType", "clearButtonInline"],
+  _excluded2 = ["key", "value"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 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; }
@@ -27,35 +30,36 @@ var FilterSummary = /*#__PURE__*/_react.default.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 = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var filterSummaryId = "".concat(blockClass, "__").concat((0, _uuidv.default)());
   var tagFilters = filters.map(function (_ref2) {
     var _renderLabel;
     var key = _ref2.key,
       value = _ref2.value,
-      rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+      rest = (0, _objectWithoutProperties2.default)(_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 = (0, _react.useRef)();
   var filterSummaryRef = (0, _react.useRef)();
-  var localRef = filterSummaryRef || ref;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    ref: localRef,
-    className: (0, _classnames.default)([blockClass, className]),
+  var localRef = ref || filterSummaryRef;
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, (0, _devtools.getDevtoolsProps)(componentName), {
     id: filterSummaryId
-  }, /*#__PURE__*/_react.default.createElement(_TagSet.TagSet, {
+  }, rest, {
+    ref: localRef,
+    className: (0, _classnames.default)([blockClass, className])
+  }), /*#__PURE__*/_react.default.createElement(_TagSet.TagSet, {
     allTagsModalSearchLabel: "Search all tags",
     allTagsModalSearchPlaceholderText: "Search all tags",
     allTagsModalTitle: "All tags",
@@ -76,7 +80,7 @@ var componentName = 'FilterSummary';
 FilterSummary.displayName = componentName;
 FilterSummary.propTypes = {
   className: _propTypes.default.string,
-  clearButtonInline: _propTypes.default.boolean,
+  clearButtonInline: _propTypes.default.bool,
   clearFilters: _propTypes.default.func.isRequired,
   clearFiltersText: _propTypes.default.string,
   filters: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,

package/lib/components/InterstitialScreen/InterstitialScreen.js

@@ -57,7 +57,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).
  */
 var InterstitialScreen = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var _media$breakpoints, _media$breakpoints2;
@@ -151,7 +154,7 @@ var InterstitialScreen = /*#__PURE__*/_react.default.forwardRef(function (_ref,
   }, [isOpen, progStep]);
   (0, _react.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 +178,10 @@ var InterstitialScreen = /*#__PURE__*/_react.default.forwardRef(function (_ref,
   var domainProductDelimiter = domainName !== '' && productName !== '' ? ' | ' : '';
   var renderModal = function renderModal(childElements) {
     return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ComposedModal, (0, _extends2.default)({}, rest, {
-      className: (0, _classnames.default)(
-      // blockClass, // Apply the block class to the main HTML element
+      preventCloseOnClickOutside: true,
+      className: (0, _classnames.default)(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/lib/components/Tearsheet/TearsheetShell.js

@@ -20,6 +20,7 @@ var _pconsole = _interopRequireDefault(require("../../global/js/utils/pconsole")
 var _carbonComponentsReact = require("carbon-components-react");
 var _ActionSet = require("../ActionSet");
 var _Wrap = require("../../global/js/utils/Wrap");
+var _useFocus2 = require("../../global/js/hooks/useFocus");
 var _excluded = ["actions", "children", "className", "closeIconDescription", "description", "hasCloseIcon", "headerActions", "influencer", "influencerPosition", "influencerWidth", "label", "navigation", "onClose", "open", "selectorPrimaryFocus", "size", "portalTarget", "title", "verticalPosition"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -97,6 +98,9 @@ var TearsheetShell = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
   var modalRef = ref || localRef;
   var _useResizeObserver = (0, _useResizeObserver2.useResizeObserver)(resizer),
     width = _useResizeObserver.width;
+  var _useFocus = (0, _useFocus2.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 = (0, _react.useState)(0),
@@ -133,10 +137,7 @@ var TearsheetShell = /*#__PURE__*/_react.default.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();
   };
   (0, _react.useEffect)(function () {
     var notify = function notify() {
@@ -204,6 +205,7 @@ var TearsheetShell = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
       open: open,
       selectorPrimaryFocus: selectorPrimaryFocus,
       onFocus: handleFocus,
+      onKeyDown: keyDownListener,
       preventCloseOnClickOutside: !isPassive,
       ref: modalRef,
       selectorsFloatingMenus: [".".concat(_settings.carbon.prefix, "--overflow-menu-options"), ".".concat(_settings.carbon.prefix, "--tooltip"), '.flatpickr-calendar', ".".concat(bc, "__container")],

package/lib/global/js/hooks/index.js

@@ -33,6 +33,12 @@ Object.defineProperty(exports, "useCreateComponentStepChange", {
     return _useCreateComponentStepChange.useCreateComponentStepChange;
   }
 });
+Object.defineProperty(exports, "useIsomorphicEffect", {
+  enumerable: true,
+  get: function get() {
+    return _useIsomorphicEffect.useIsomorphicEffect;
+  }
+});
 Object.defineProperty(exports, "useNearestScroll", {
   enumerable: true,
   get: function get() {
@@ -92,4 +98,5 @@ var _useResetCreateComponent = require("./useResetCreateComponent");
 var _useRetrieveStepData = require("./useRetrieveStepData");
 var _useValidCreateStepCount = require("./useValidCreateStepCount");
 var _useControllableState = require("./useControllableState");
-var _usePrefix = require("./usePrefix");
+var _usePrefix = require("./usePrefix");
+var _useIsomorphicEffect = require("./useIsomorphicEffect");

package/lib/global/js/hooks/useFocus.js

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFocus = void 0;
+var _settings = require("../../../settings");
+var _react = require("react");
+/**
+ * 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.
+ */
+
+var useFocus = function useFocus(modalRef) {
+  var tearsheetBaseClass = "".concat(_settings.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(_settings.carbon.prefix, "--visually-hidden,.").concat(tearsheetBaseClass, "__header--no-close-icon,.").concat(_settings.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 = (0, _react.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]);
+  (0, _react.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
+  };
+};
+exports.useFocus = useFocus;

package/lib/global/js/hooks/useIsomorphicEffect.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useIsomorphicEffect = void 0;
+var _react = require("react");
+/**
+ * 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.
+ */
+
+// 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
+var useIsomorphicEffect = typeof window !== 'undefined' ? _react.useLayoutEffect : _react.useEffect;
+exports.useIsomorphicEffect = useIsomorphicEffect;

package/lib/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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "1.69.0",
+  "version": "1.71.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -20,7 +20,8 @@
     "css",
     "es",
     "lib",
-    "scss"
+    "scss",
+    "telemetry.yml"
   ],
   "keywords": [
     "carbon",
@@ -45,7 +46,7 @@
     "ci-check": "node scripts/import",
     "clean": "rimraf es lib css scss",
     "generate": "cross-env FORCE_COLOR=1 node scripts/generate",
-    "postinstall": "carbon-telemetry collect --install",
+    "postinstall": "ibmtelemetry --config=telemetry.yml",
     "test": "jest --colors",
     "//upgrade-dependencies": "# don't upgrade carbon (done globally), react/react-dom (explicit range peer dependency), chalk (issue #1596)",
     "upgrade-dependencies": "npm-check-updates -u --dep dev,peer,prod --color --reject '/(carbon|^react$|^react-dom$|^chalk$|^namor)/'"
@@ -72,10 +73,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.20.13",
-    "@carbon/telemetry": "^0.1.0",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/sortable": "^7.0.2",
     "@dnd-kit/utilities": "^3.2.1",
+    "@ibm/telemetry-js": "^1.2.0",
     "framer-motion": "^6.5.1 <7",
     "immutability-helper": "^3.1.1",
     "lodash": "^4.17.21",
@@ -97,5 +98,5 @@
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "f807098a8d962f26dbfafaa33d53a68fef94c7a1"
+  "gitHead": "48db8a26c5e8f33a2f2056e175fee30e7aab2c85"
 }

package/scss/components/Datagrid/_datagrid.scss

@@ -50,10 +50,18 @@
     }
   }
 
-  .bx--overflow-menu-options > .c4p--datagrid__row-size-dropdown {
+  .#{$carbon-prefix}--overflow-menu-options
+    > .c4p--datagrid__row-size-dropdown {
     left: $spacing-01;
     width: 112px;
   }
+
+  .#{$block-class} .#{$carbon-prefix}--pagination,
+  .#{$block-class}
+    .#{$carbon-prefix}--pagination
+    .#{$carbon-prefix}--select-input {
+    background-color: $ui-02;
+  }
 }
 
 @include exports('datagrid') {

package/scss/components/Datagrid/styles/_datagrid.scss

@@ -182,6 +182,12 @@
     overflow-x: auto;
   }
 
+  .#{$block-class}-filter-panel
+    + .#{$block-class}__table-container-inner
+    .#{$carbon-prefix}--data-table-content {
+    height: fit-content;
+  }
+
   table.#{$block-class}__table-simple {
     display: flex;
     overflow: auto;
@@ -353,22 +359,22 @@
 .#{$block-class}
   .#{$block-class}__carbon-row
   .#{$block-class}__actions-column-cell-non-sticky
-  .#{$carbon-prefix}--overflow-menu {
+  .#{$carbon-prefix}--btn--icon-only {
   opacity: 0;
 }
 
 .#{$block-class}
   .#{$block-class}__carbon-row:hover
   .#{$block-class}__actions-column-cell-non-sticky
-  .#{$carbon-prefix}--overflow-menu,
+  .#{$carbon-prefix}--btn--icon-only,
 .#{$block-class}
   .#{$block-class}__carbon-row
   .#{$block-class}__actions-column-cell-non-sticky
-  .#{$carbon-prefix}--overflow-menu:focus,
+  .#{$carbon-prefix}--btn--icon-only:focus,
 .#{$block-class}
   .#{$block-class}__carbon-row
   .#{$block-class}__actions-column-cell-non-sticky
-  .#{$carbon-prefix}--overflow-menu[aria-expanded='true'] {
+  .#{$carbon-prefix}--btn--icon-only[aria-expanded='true'] {
   opacity: 1;
 }
 

package/scss/components/Datagrid/styles/addons/_FilterPanel.scss

@@ -1,10 +1,9 @@
-/*
-* Licensed Materials - Property of IBM
-* 5724-Q36
-* (c) Copyright IBM Corp. 2022
-* US Government Users Restricted Rights - Use, duplication or disclosure
-* restricted by GSA ADP Schedule Contract with IBM Corp.
-*/
+//
+// 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.
+//
 
 @import '../variables';
 

package/scss/components/InterstitialScreen/_interstitial-screen.scss

@@ -75,6 +75,7 @@
       height: 100%;
       .#{$carousel-item} {
         flex: 0 0 100% !important;
+        scroll-snap-align: start;
       }
     }