@carbon/ibm-products 2.4.0 → 2.5.0

package/lib/components/Datagrid/useDisableSelectRows.js

@@ -26,7 +26,7 @@ var useDisableSelectRows = function useDisableSelectRows(hooks) {
 };
 var updateSelectAll = function updateSelectAll(hooks) {
   var getToggleAllRowsSelectedProps = function getToggleAllRowsSelectedProps(props, _ref2) {
-    var _instance$disableSele, _instance$disableSele2;
+    var _instance$disableSele;
     var instance = _ref2.instance;
     var selectableRows = instance.rows.filter(function (row) {
       return !(instance.shouldDisableSelectRow && instance.shouldDisableSelectRow(row));
@@ -46,7 +46,7 @@ var updateSelectAll = function updateSelectAll(hooks) {
       },
       checked: isAllRowsSelected,
       disabled: instance.disableSelectAll,
-      title: (instance === null || instance === void 0 ? void 0 : (_instance$disableSele = instance.disableSelectRowsProps) === null || _instance$disableSele === void 0 ? void 0 : (_instance$disableSele2 = _instance$disableSele.labels) === null || _instance$disableSele2 === void 0 ? void 0 : _instance$disableSele2.toggleAllRowsLabel) || 'Toggle All Rows Selected',
+      title: (instance === null || instance === void 0 || (_instance$disableSele = instance.disableSelectRowsProps) === null || _instance$disableSele === void 0 || (_instance$disableSele = _instance$disableSele.labels) === null || _instance$disableSele === void 0 ? void 0 : _instance$disableSele.toggleAllRowsLabel) || 'Toggle All Rows Selected',
       indeterminate: Boolean(!isAllRowsSelected && Object.keys(instance.state.selectedRowIds).length)
     }];
   };
@@ -54,7 +54,7 @@ var updateSelectAll = function updateSelectAll(hooks) {
 };
 var updatePageSelectAll = function updatePageSelectAll(hooks) {
   var getToggleAllPageRowsSelectedProps = function getToggleAllPageRowsSelectedProps(props, _ref4) {
-    var _instance$disableSele3, _instance$disableSele4;
+    var _instance$disableSele2;
     var instance = _ref4.instance;
     var selectableRows = instance.page.filter(function (row) {
       return !(instance.shouldDisableSelectRow && instance.shouldDisableSelectRow(row));
@@ -74,7 +74,7 @@ var updatePageSelectAll = function updatePageSelectAll(hooks) {
       },
       checked: isAllRowsSelected,
       disabled: instance.disableSelectAll,
-      title: (instance === null || instance === void 0 ? void 0 : (_instance$disableSele3 = instance.disableSelectRowsProps) === null || _instance$disableSele3 === void 0 ? void 0 : (_instance$disableSele4 = _instance$disableSele3.labels) === null || _instance$disableSele4 === void 0 ? void 0 : _instance$disableSele4.toggleAllRowsLabel) || 'Toggle All Rows Selected',
+      title: (instance === null || instance === void 0 || (_instance$disableSele2 = instance.disableSelectRowsProps) === null || _instance$disableSele2 === void 0 || (_instance$disableSele2 = _instance$disableSele2.labels) === null || _instance$disableSele2 === void 0 ? void 0 : _instance$disableSele2.toggleAllRowsLabel) || 'Toggle All Rows Selected',
       indeterminate: Boolean(!isAllRowsSelected && instance.page.some(function (_ref6) {
         var id = _ref6.id;
         return instance.state.selectedRowIds[id];

package/lib/components/Datagrid/useInlineEdit.js

@@ -31,11 +31,11 @@ var useInlineEdit = function useInlineEdit(hooks, usingEditableCell) {
     }
   }, [usingEditableCell]);
   var addInlineEdit = function addInlineEdit(props, _ref) {
-    var _cell$column, _cell$column$inlineEd, _instance$columns$fil;
+    var _cell$column, _instance$columns$fil;
     var cell = _ref.cell,
       instance = _ref.instance;
     var columnInlineEditConfig = cell.column.inlineEdit;
-    var inlineEditType = (_cell$column = cell.column) === null || _cell$column === void 0 ? void 0 : (_cell$column$inlineEd = _cell$column.inlineEdit) === null || _cell$column$inlineEd === void 0 ? void 0 : _cell$column$inlineEd.type;
+    var inlineEditType = (_cell$column = cell.column) === null || _cell$column === void 0 || (_cell$column = _cell$column.inlineEdit) === null || _cell$column === void 0 ? void 0 : _cell$column.type;
     var totalInlineEditColumns = (_instance$columns$fil = instance.columns.filter(function (item) {
       return item.inlineEdit;
     })) === null || _instance$columns$fil === void 0 ? void 0 : _instance$columns$fil.length;

package/lib/components/Datagrid/useOnRowClick.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _settings = require("../../settings");
 /*
  * Licensed Materials - Property of IBM
  * 5724-Q36
@@ -21,13 +22,28 @@ var useOnRowClick = function useOnRowClick(hooks) {
         instance = datagridState.instance;
       var id = row.id,
         toggleRowSelected = row.toggleRowSelected;
+      var withSelectRows = instance.withSelectRows,
+        tableId = instance.tableId;
       var onClick = function onClick(event) {
         if (!isFetching && onRowClick) {
           onRowClick(row, event);
-          instance.selectedFlatRows && instance.selectedFlatRows.map(function (toggleRow) {
-            return toggleRow.toggleRowSelected(false);
-          });
-          toggleRowSelected(id, true);
+          // We do not want to change the list of selected rows if using the useSelectedRows hook, otherwise clicking on an entire row will mark the row as checked
+
+          // Remove selected class from all other clickable rows as only one clickable row can be selected at a time
+          var clickableSelectedRows = document.querySelectorAll("#".concat(tableId, ".").concat(_settings.pkg.prefix, "--datagrid .").concat(_settings.carbon.prefix, "--data-table--selected:not(.").concat(_settings.pkg.prefix, "--datagrid__active-row)"));
+          if (clickableSelectedRows.length) {
+            Array.from(clickableSelectedRows).forEach(function (row) {
+              row.classList.remove("".concat(_settings.carbon.prefix, "--data-table--selected"));
+            });
+          }
+          var closestRow = event.target.closest(".".concat(_settings.pkg.prefix, "--datagrid__carbon-row"));
+          closestRow.classList.add("".concat(_settings.carbon.prefix, "--data-table--selected"));
+          if (!withSelectRows) {
+            instance.selectedFlatRows && instance.selectedFlatRows.map(function (toggleRow) {
+              return toggleRow.toggleRowSelected(false);
+            });
+            toggleRowSelected(id, true);
+          }
         }
       };
       var onKeyDown = function onKeyDown(event) {

package/lib/components/Datagrid/useSortableColumns.js

@@ -26,11 +26,37 @@ var ordering = {
   DESC: 'DESC',
   NONE: 'NONE'
 };
+var getAriaSortValue = function getAriaSortValue(col, _ref) {
+  var ascendingSortableLabelText = _ref.ascendingSortableLabelText,
+    descendingSortableLabelText = _ref.descendingSortableLabelText,
+    defaultSortableLabelText = _ref.defaultSortableLabelText;
+  var isSorted = col.isSorted,
+    isSortedDesc = col.isSortedDesc;
+  if (!isSorted) {
+    return defaultSortableLabelText || 'none';
+  }
+  if (isSorted && !isSortedDesc) {
+    return ascendingSortableLabelText || 'ascending';
+  }
+  if (isSorted && isSortedDesc) {
+    return descendingSortableLabelText || 'descending';
+  }
+};
+var getAriaPressedValue = function getAriaPressedValue(col) {
+  var isSorted = col.isSorted;
+  if (isSorted) {
+    return 'true';
+  }
+  return 'false';
+};
 var useSortableColumns = function useSortableColumns(hooks) {
-  var sortableVisibleColumns = function sortableVisibleColumns(visibleColumns, _ref) {
+  var sortableVisibleColumns = function sortableVisibleColumns(visibleColumns, _ref2) {
     var _instance$customizeCo;
-    var instance = _ref.instance;
-    var onSort = instance.onSort;
+    var instance = _ref2.instance;
+    var onSort = instance.onSort,
+      ascendingSortableLabelText = instance.ascendingSortableLabelText,
+      descendingSortableLabelText = instance.descendingSortableLabelText,
+      defaultSortableLabelText = instance.defaultSortableLabelText;
     var onSortClick = function onSortClick(column) {
       var key = column.id;
       var sortDesc = column.isSortedDesc;
@@ -75,6 +101,12 @@ var useSortableColumns = function useSortableColumns(hooks) {
       var Header = function Header(headerProp) {
         var _cx;
         return column.disableSortBy === true ? column.Header : /*#__PURE__*/_react.default.createElement(_react2.Button, {
+          "aria-sort": getAriaSortValue(headerProp === null || headerProp === void 0 ? void 0 : headerProp.column, {
+            ascendingSortableLabelText: ascendingSortableLabelText,
+            descendingSortableLabelText: descendingSortableLabelText,
+            defaultSortableLabelText: defaultSortableLabelText
+          }),
+          "aria-pressed": getAriaPressedValue(headerProp === null || headerProp === void 0 ? void 0 : headerProp.column),
           onClick: function onClick() {
             return onSortClick(headerProp === null || headerProp === void 0 ? void 0 : headerProp.column);
           },

package/lib/components/Datagrid/useStickyColumn.js

@@ -154,7 +154,7 @@ var changeProps = function changeProps(elementName, headerCellRef, windowSize, p
   if (column.sticky === 'left') {
     var _data$instance, _cx2;
     return [props, _objectSpread({
-      className: (0, _classnames.default)((_cx2 = {}, (0, _defineProperty2.default)(_cx2, "".concat(leftStickyStyleClassPrefix, "-").concat(elementName), true && windowSize > 671), (0, _defineProperty2.default)(_cx2, "".concat(leftStickyStyleClassPrefix, "-").concat(elementName, "--with-extra-select-column"), (data === null || data === void 0 ? void 0 : (_data$instance = data.instance) === null || _data$instance === void 0 ? void 0 : _data$instance.withSelectRows) && windowSize > 671), _cx2))
+      className: (0, _classnames.default)((_cx2 = {}, (0, _defineProperty2.default)(_cx2, "".concat(leftStickyStyleClassPrefix, "-").concat(elementName), true && windowSize > 671), (0, _defineProperty2.default)(_cx2, "".concat(leftStickyStyleClassPrefix, "-").concat(elementName, "--with-extra-select-column"), (data === null || data === void 0 || (_data$instance = data.instance) === null || _data$instance === void 0 ? void 0 : _data$instance.withSelectRows) && windowSize > 671), _cx2))
     }, headerCellRef && {
       ref: headerCellRef
     })];

package/lib/components/EditUpdateCards/EditUpdateCards.js

@@ -14,7 +14,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _devtools = require("../../global/js/utils/devtools");
 var _settings = require("../../settings");
 var _ProductiveCard = require("../ProductiveCard");
-var _excluded = ["actionIcons", "actionsPlacement", "className", "description", "editChildren", "editMode", "label", "previewChildren", "title", "titleSize"];
+var _excluded = ["actionIcons", "actionsPlacement", "className", "description", "editChildren", "editMode", "label", "onPrimaryButtonClick", "onSecondaryButtonClick", "previewChildren", "title", "titleSize", "primaryButtonIcon", "primaryButtonText", "secondaryButtonIcon", "secondaryButtonText"];
 /**
  * Copyright IBM Corp. 2022, 2022
  *
@@ -59,12 +59,30 @@ var EditUpdateCards = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
     editChildren = _ref.editChildren,
     editMode = _ref.editMode,
     label = _ref.label,
+    onPrimaryButtonClick = _ref.onPrimaryButtonClick,
+    onSecondaryButtonClick = _ref.onSecondaryButtonClick,
     previewChildren = _ref.previewChildren,
     title = _ref.title,
     titleSize = _ref.titleSize,
+    primaryButtonIcon = _ref.primaryButtonIcon,
+    primaryButtonText = _ref.primaryButtonText,
+    secondaryButtonIcon = _ref.secondaryButtonIcon,
+    secondaryButtonText = _ref.secondaryButtonText,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  // const [editMode, setEditMode] = useState(false);
+  // const [editCardMode, setEditCardMode] = useState(editMode);
 
+  var conditionalProps = {
+    onPrimaryButtonClick: onPrimaryButtonClick,
+    onSecondaryButtonClick: onSecondaryButtonClick,
+    primaryButtonIcon: primaryButtonIcon,
+    primaryButtonKind: 'ghost',
+    primaryButtonPlacement: 'top',
+    primaryButtonText: primaryButtonText,
+    secondaryButtonIcon: secondaryButtonIcon,
+    secondaryButtonKind: 'ghost',
+    secondaryButtonPlacement: 'top',
+    secondaryButtonText: secondaryButtonText
+  };
   return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
     className: (0, _classnames.default)(blockClass,
     // Apply the block class to the main HTML element
@@ -73,7 +91,7 @@ var EditUpdateCards = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
     (0, _defineProperty2.default)({}, "".concat(blockClass, "__actions-bottom"), actionsPlacement === 'bottom')),
     ref: ref,
     role: "main"
-  }, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement(_ProductiveCard.ProductiveCard, {
+  }, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement(_ProductiveCard.ProductiveCard, (0, _extends2.default)({
     actionIcons: actionIcons,
     actionsPlacement: actionsPlacement,
     className: className,
@@ -81,7 +99,7 @@ var EditUpdateCards = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
     label: label,
     title: title,
     titleSize: titleSize
-  }, editMode === false && /*#__PURE__*/_react.default.createElement("div", null, previewChildren), editMode && /*#__PURE__*/_react.default.createElement("div", null, editChildren)));
+  }, editMode && conditionalProps), editMode === false && /*#__PURE__*/_react.default.createElement("div", null, previewChildren), editMode && /*#__PURE__*/_react.default.createElement("div", null, editChildren)));
 });
 
 // Return a placeholder if not released and not enabled by feature flag
@@ -131,10 +149,54 @@ EditUpdateCards.propTypes = {
    * Optional label for the top of the card
    */
   label: _propTypes.default.string,
+  /**
+   * Function that's called from the primary button or action icon
+   */
+  onPrimaryButtonClick: _propTypes.default.func,
+  /**
+   * Function that's called from the secondary button or action icon
+   */
+  onSecondaryButtonClick: _propTypes.default.func,
   /**
    * Preview mode children
    */
   previewChildren: _propTypes.default.node,
+  /**
+   * Optional prop to allow overriding the icon rendering. Can be a React component class
+   */
+  primaryButtonIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+  /**
+   * Establishes the kind of button displayed for the primary button
+   */
+  primaryButtonKind: _propTypes.default.oneOf(['primary', 'ghost']),
+  /**
+   * Determines if the primary button is on the top or bottom of the card
+   */
+  primaryButtonPlacement: _propTypes.default.oneOf(['top', 'bottom']),
+  /**
+   * The text that's displayed in the primary button
+   */
+  primaryButtonText: _propTypes.default.string,
+  /**
+   * Optionally specify an href for your Button to become an <a> element
+   */
+  secondaryButtonHref: _propTypes.default.string,
+  /**
+   * Optional prop to allow overriding the icon rendering. Can be a React component class
+   */
+  secondaryButtonIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+  /**
+   * Establishes the kind of button displayed for the secondary button
+   */
+  secondaryButtonKind: _propTypes.default.oneOf(['secondary', 'ghost']),
+  /**
+   * Determines if the secondary button is on the top or bottom of the card
+   */
+  secondaryButtonPlacement: _propTypes.default.oneOf(['top', 'bottom']),
+  /**
+   * The text that's displayed in the secondary button
+   */
+  secondaryButtonText: _propTypes.default.string,
   /**
    * Title that's displayed at the top of the card
    */

package/lib/components/ExportModal/ExportModal.js

@@ -84,7 +84,7 @@ var ExportModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   (0, _react.useEffect)(function () {
     var _preformattedExtensio;
     setName(filename);
-    setExtension(preformattedExtensions === null || preformattedExtensions === void 0 ? void 0 : (_preformattedExtensio = preformattedExtensions[0]) === null || _preformattedExtensio === void 0 ? void 0 : _preformattedExtensio.extension);
+    setExtension(preformattedExtensions === null || preformattedExtensions === void 0 || (_preformattedExtensio = preformattedExtensions[0]) === null || _preformattedExtensio === void 0 ? void 0 : _preformattedExtensio.extension);
   }, [filename, preformattedExtensions, open]);
   var onNameChangeHandler = function onNameChangeHandler(evt) {
     setName(evt.target.value);

package/lib/components/NotificationsPanel/NotificationsPanel.js

@@ -302,10 +302,10 @@ var NotificationsPanel = /*#__PURE__*/_react.default.forwardRef(function (_ref,
       nowText: nowText
     })), /*#__PURE__*/_react.default.createElement("h6", {
       className: notificationHeaderClassName
-    }, notification.title), notification.description && notification.description.length && renderDescription(notification.id), notification.link && notification.link.text && notification.link.url && /*#__PURE__*/_react.default.createElement(_react2.Link, {
+    }, notification.title), notification.description && notification.description.length && renderDescription(notification.id), notification.link && notification.link.text && notification.link.url && /*#__PURE__*/_react.default.createElement(_react2.Link, (0, _extends2.default)({
       href: notification.link.url,
       className: "".concat(blockClass, "__notifications-link")
-    }, notification.link.text)), /*#__PURE__*/_react.default.createElement(_react2.IconButton, {
+    }, notification.link.optional), notification.link.text)), /*#__PURE__*/_react.default.createElement(_react2.IconButton, {
       align: "left",
       kind: "ghost",
       size: "sm",
@@ -426,7 +426,10 @@ NotificationsPanel.propTypes = {
     description: _propTypes.default.string,
     link: _propTypes.default.shape({
       url: _propTypes.default.string,
-      text: _propTypes.default.string
+      text: _propTypes.default.string,
+      optional: _propTypes.default.shape({
+        // Add optional props here
+      })
     }),
     unread: _propTypes.default.bool,
     onNotificationClick: _propTypes.default.func

package/lib/components/ProductiveCard/ProductiveCard.js

@@ -35,7 +35,7 @@ var ProductiveCard = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _ref$actionsPlacement = _ref.actionsPlacement,
     actionsPlacement = _ref$actionsPlacement === void 0 ? defaults.actionsPlacement : _ref$actionsPlacement,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var validProps = (0, _propsHelper.prepareProps)(rest, ['media', 'mediaPosition', 'onSecondaryButtonClick', 'pictogram', 'primaryButtonClick', 'productive', 'secondaryButtonKind', 'secondaryButtonText']);
+  var validProps = (0, _propsHelper.prepareProps)(rest, ['media', 'mediaPosition', 'pictogram', 'primaryButtonClick', 'productive', 'secondaryButtonKind']);
   return /*#__PURE__*/_react.default.createElement(_Card.Card, (0, _extends2.default)({}, _objectSpread(_objectSpread({}, validProps), {}, {
     actionsPlacement: actionsPlacement,
     ref: ref
@@ -91,6 +91,10 @@ ProductiveCard.propTypes = {
    * Function that's called from the primary button or action icon
    */
   onPrimaryButtonClick: _propTypes.default.func,
+  /**
+   * Function that's called from the secondary button or action icon
+   */
+  onSecondaryButtonClick: _propTypes.default.func,
   /**
    * Use an overflow menu instead of action icons. Refer to design documentation for implementation guidelines
    */
@@ -120,6 +124,22 @@ ProductiveCard.propTypes = {
    * The text that's displayed in the primary button
    */
   primaryButtonText: _propTypes.default.node,
+  /**
+   * Optionally specify an href for your Button to become an <a> element
+   */
+  secondaryButtonHref: _propTypes.default.string,
+  /**
+   * Optional prop to allow overriding the icon rendering. Can be a React component class
+   */
+  secondaryButtonIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+  /**
+   * Determines if the secondary button is on the top or bottom of the card
+   */
+  secondaryButtonPlacement: _propTypes.default.oneOf(['top', 'bottom']),
+  /**
+   * The text that's displayed in the secondary button
+   */
+  secondaryButtonText: _propTypes.default.node,
   /**
    * Title that's displayed at the top of the card
    */

package/lib/components/SidePanel/SidePanel.js

@@ -128,7 +128,7 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       if ((previousState === null || previousState === void 0 ? void 0 : previousState.size) !== size) {
         var _sidePanelOuter$style;
         scrollableSection.scrollTop = 0;
-        sidePanelOuter === null || sidePanelOuter === void 0 ? void 0 : (_sidePanelOuter$style = sidePanelOuter.style) === null || _sidePanelOuter$style === void 0 ? void 0 : _sidePanelOuter$style.setProperty("--".concat(blockClass, "--title-container-height"), "".concat(Number(initialTitleHeight), "px"));
+        sidePanelOuter === null || sidePanelOuter === void 0 || (_sidePanelOuter$style = sidePanelOuter.style) === null || _sidePanelOuter$style === void 0 ? void 0 : _sidePanelOuter$style.setProperty("--".concat(blockClass, "--title-container-height"), "".concat(Number(initialTitleHeight), "px"));
       }
     }
   }, [currentStep, ref, size, previousState === null || previousState === void 0 ? void 0 : previousState.size]);
@@ -159,7 +159,7 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       var actionsContainer = getActionsContainerElement();
       var actionsHeight = (actionsContainer === null || actionsContainer === void 0 ? void 0 : actionsContainer.offsetHeight) + 16; // add additional 1rem spacing to bottom padding
       actionsHeight = "".concat(Math.round(actionsHeight / 16), "rem");
-      sidePanelOuter === null || sidePanelOuter === void 0 ? void 0 : (_sidePanelOuter$style2 = sidePanelOuter.style) === null || _sidePanelOuter$style2 === void 0 ? void 0 : _sidePanelOuter$style2.setProperty("--".concat(blockClass, "--content-bottom-padding"), actionsHeight);
+      sidePanelOuter === null || sidePanelOuter === void 0 || (_sidePanelOuter$style2 = sidePanelOuter.style) === null || _sidePanelOuter$style2 === void 0 ? void 0 : _sidePanelOuter$style2.setProperty("--".concat(blockClass, "--content-bottom-padding"), actionsHeight);
     }
   }, [actions, condensedActions, open, animationComplete]);
 
@@ -180,7 +180,7 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     var actionsContainer = getActionsContainerElement();
     var actionsHeight = (actionsContainer === null || actionsContainer === void 0 ? void 0 : actionsContainer.offsetHeight) + 16; // add additional 1rem spacing to bottom padding
     actionsHeight = "".concat(Math.round(actionsHeight / 16), "rem");
-    sidePanelOuter === null || sidePanelOuter === void 0 ? void 0 : (_sidePanelOuter$style3 = sidePanelOuter.style) === null || _sidePanelOuter$style3 === void 0 ? void 0 : _sidePanelOuter$style3.setProperty("--".concat(blockClass, "--content-bottom-padding"), actionsHeight);
+    sidePanelOuter === null || sidePanelOuter === void 0 || (_sidePanelOuter$style3 = sidePanelOuter.style) === null || _sidePanelOuter$style3 === void 0 ? void 0 : _sidePanelOuter$style3.setProperty("--".concat(blockClass, "--content-bottom-padding"), actionsHeight);
   };
   var getActionsContainerElement = function getActionsContainerElement() {
     var sidePanelOuter = document.querySelector("#".concat(blockClass, "-outer"));

package/lib/components/TagSet/TagSetModal.js

@@ -61,9 +61,9 @@ var TagSetModal = function TagSetModal(_ref) {
       } else {
         var lCaseSearch = search.toLocaleLowerCase();
         allTags.forEach(function (tag) {
-          var _tag$dataSearch, _tag$dataSearch$toLoc, _tag$label, _tag$label$toLocaleLo;
-          var dataSearch = (_tag$dataSearch = tag['data-search']) === null || _tag$dataSearch === void 0 ? void 0 : (_tag$dataSearch$toLoc = _tag$dataSearch.toLocaleLowerCase()) === null || _tag$dataSearch$toLoc === void 0 ? void 0 : _tag$dataSearch$toLoc.indexOf(lCaseSearch);
-          var labelSearch = (_tag$label = tag.label) === null || _tag$label === void 0 ? void 0 : (_tag$label$toLocaleLo = _tag$label.toLocaleLowerCase()) === null || _tag$label$toLocaleLo === void 0 ? void 0 : _tag$label$toLocaleLo.indexOf(lCaseSearch);
+          var _tag$dataSearch, _tag$label;
+          var dataSearch = (_tag$dataSearch = tag['data-search']) === null || _tag$dataSearch === void 0 || (_tag$dataSearch = _tag$dataSearch.toLocaleLowerCase()) === null || _tag$dataSearch === void 0 ? void 0 : _tag$dataSearch.indexOf(lCaseSearch);
+          var labelSearch = (_tag$label = tag.label) === null || _tag$label === void 0 || (_tag$label = _tag$label.toLocaleLowerCase()) === null || _tag$label === void 0 ? void 0 : _tag$label.indexOf(lCaseSearch);
           if (dataSearch > -1 || labelSearch > -1) {
             newFilteredModalTags.push(tag);
           }

package/lib/global/js/utils/StoryDocsPage.js

@@ -75,7 +75,7 @@ var processBlocks = function processBlocks(blocks, stories, omitUnreferencedStor
  * @returns
  */
 var StoryDocsPage = function StoryDocsPage(_ref2) {
-  var _csfFile$meta, _csfFile$meta$paramet, _processedBlocks$filt;
+  var _csfFile$meta, _processedBlocks$filt;
   var altTitle = _ref2.altTitle,
     altDescription = _ref2.altDescription,
     altGuidelinesHref = _ref2.altGuidelinesHref,
@@ -86,7 +86,7 @@ var StoryDocsPage = function StoryDocsPage(_ref2) {
     csfFile = _useOf.csfFile;
   var storyInfo = (0, _storyHelper.storyDocsPageInfo)(csfFile);
   var guidelinesHref = altGuidelinesHref !== null && altGuidelinesHref !== void 0 ? altGuidelinesHref : storyInfo.guidelinesHref;
-  var isFullScreen = (csfFile === null || csfFile === void 0 ? void 0 : (_csfFile$meta = csfFile.meta) === null || _csfFile$meta === void 0 ? void 0 : (_csfFile$meta$paramet = _csfFile$meta.parameters) === null || _csfFile$meta$paramet === void 0 ? void 0 : _csfFile$meta$paramet.layout) === 'fullscreen' || false;
+  var isFullScreen = (csfFile === null || csfFile === void 0 || (_csfFile$meta = csfFile.meta) === null || _csfFile$meta === void 0 || (_csfFile$meta = _csfFile$meta.parameters) === null || _csfFile$meta === void 0 ? void 0 : _csfFile$meta.layout) === 'fullscreen' || false;
   var storyHelperClass = isFullScreen ? 'c4p--story-docs-page--fullscreen' : '';
   var processedBlocks = processBlocks(blocks, csfFile.stories, omitUnreferencedStories);
   console.log(processBlocks);

package/lib/global/js/utils/Wrap.js

@@ -26,7 +26,7 @@ var isEmpty = function isEmpty(children) {
   _react.default.Children.forEach(children, function (child) {
     if (child) {
       var _child$type, _child$props;
-      result && (result = (child === null || child === void 0 ? void 0 : (_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) === 'Wrap' && isEmpty(child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.children));
+      result && (result = (child === null || child === void 0 || (_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) === 'Wrap' && isEmpty(child === null || child === void 0 || (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.children));
     }
   });
   return result;

package/lib/global/js/utils/props-helper.js

@@ -159,7 +159,7 @@ exports.getDeprecatedArgTypes = getDeprecatedArgTypes;
 var extractShapesArray = function extractShapesArray(items) {
   var _items$, _items$2;
   // unwrap if items or the first index looks like a React element or fragment
-  if (items && (items !== null && items !== void 0 && (_items$ = items[0]) !== null && _items$ !== void 0 && _items$.props || (items === null || items === void 0 ? void 0 : (_items$2 = items[0]) === null || _items$2 === void 0 ? void 0 : _items$2.type) === _react.default.Fragment || items.type === _react.default.Fragment)) {
+  if (items && (items !== null && items !== void 0 && (_items$ = items[0]) !== null && _items$ !== void 0 && _items$.props || (items === null || items === void 0 || (_items$2 = items[0]) === null || _items$2 === void 0 ? void 0 : _items$2.type) === _react.default.Fragment || items.type === _react.default.Fragment)) {
     var unwrappedItems = (0, _unwrapIfFragment.default)(items);
     return unwrappedItems.map(function (item) {
       return _objectSpread({

package/lib/global/js/utils/story-helper.js

@@ -120,7 +120,7 @@ StackblitzLink.propTypes = {
 };
 var palUsageHref = function palUsageHref(csfFile) {
   var _csfFile$meta;
-  var title = csfFile === null || csfFile === void 0 ? void 0 : (_csfFile$meta = csfFile.meta) === null || _csfFile$meta === void 0 ? void 0 : _csfFile$meta.title;
+  var title = csfFile === null || csfFile === void 0 || (_csfFile$meta = csfFile.meta) === null || _csfFile$meta === void 0 ? void 0 : _csfFile$meta.title;
   var _title$split = title.split('/'),
     _title$split2 = (0, _slicedToArray2.default)(_title$split, 3),
     _pkg = _title$split2[0],
@@ -133,7 +133,7 @@ var palUsageHref = function palUsageHref(csfFile) {
 exports.palUsageHref = palUsageHref;
 var storyDocsPageTitle = function storyDocsPageTitle(csfFile) {
   var _csfFile$meta2;
-  var title = csfFile === null || csfFile === void 0 ? void 0 : (_csfFile$meta2 = csfFile.meta) === null || _csfFile$meta2 === void 0 ? void 0 : _csfFile$meta2.title;
+  var title = csfFile === null || csfFile === void 0 || (_csfFile$meta2 = csfFile.meta) === null || _csfFile$meta2 === void 0 ? void 0 : _csfFile$meta2.title;
   var _title$split3 = title.split('/'),
     _title$split4 = (0, _toArray2.default)(_title$split3),
     _pkg = _title$split4[0],
@@ -163,7 +163,7 @@ var storyDocsPageTitle = function storyDocsPageTitle(csfFile) {
 exports.storyDocsPageTitle = storyDocsPageTitle;
 var storyDocsPageInfo = function storyDocsPageInfo(csfFile) {
   var _csfFile$meta3;
-  var title = csfFile === null || csfFile === void 0 ? void 0 : (_csfFile$meta3 = csfFile.meta) === null || _csfFile$meta3 === void 0 ? void 0 : _csfFile$meta3.title;
+  var title = csfFile === null || csfFile === void 0 || (_csfFile$meta3 = csfFile.meta) === null || _csfFile$meta3 === void 0 ? void 0 : _csfFile$meta3.title;
   var _title$split5 = title.split('/'),
     _title$split6 = (0, _toArray2.default)(_title$split5),
     pkg = _title$split6[0],

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -54,27 +54,27 @@
     "upgrade-dependencies": "npm-check-updates -u --dep dev,peer,prod --color --reject '/(carbon|^react$|^react-dom$|^chalk$|^react-dnd|^namor)/'"
   },
   "devDependencies": {
-    "@babel/cli": "^7.22.5",
-    "@babel/core": "^7.22.5",
-    "babel-preset-ibm-cloud-cognitive": "^0.14.37",
+    "@babel/cli": "^7.22.9",
+    "@babel/core": "^7.22.9",
+    "babel-preset-ibm-cloud-cognitive": "^0.14.38",
     "chalk": "^4.1.2",
     "change-case": "^4.1.2",
     "copyfiles": "^2.4.1",
     "cross-env": "^7.0.3",
     "fs-extra": "^11.1.1",
-    "glob": "^10.3.1",
-    "jest": "^29.5.0",
-    "jest-config-ibm-cloud-cognitive": "^0.24.24",
-    "jest-environment-jsdom": "^29.5.0",
+    "glob": "^10.3.3",
+    "jest": "^29.6.1",
+    "jest-config-ibm-cloud-cognitive": "^0.24.25",
+    "jest-environment-jsdom": "^29.6.1",
     "namor": "^1.1.2",
-    "npm-check-updates": "^16.10.13",
+    "npm-check-updates": "^16.10.15",
     "npm-run-all": "^4.1.5",
     "rimraf": "^5.0.1",
     "sass": "^1.63.6",
     "yargs": "^17.7.2"
   },
   "dependencies": {
-    "@babel/runtime": "^7.22.5",
+    "@babel/runtime": "^7.22.6",
     "@carbon/telemetry": "^0.1.0",
     "framer-motion": "^6.5.1 < 7",
     "immutability-helper": "^3.1.1",
@@ -94,5 +94,5 @@
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "ce43460f28f908aeb8ec4bfb2c501dd457d11a58"
+  "gitHead": "40fe19b4ef32f97f01e8664bbe81fc1e459d0f3f"
 }

package/scss/components/Datagrid/_storybook-styles.scss

@@ -54,6 +54,11 @@ $block-class: #{c4p-settings.$pkg-prefix}--datagrid;
   padding-bottom: $spacing-06;
 }
 
+.#{$block-class}__side-panel-link {
+  padding-top: $spacing-01;
+  padding-bottom: $spacing-06;
+}
+
 .#{$block-class}__side-panel-section-inner {
   display: flex;
   padding: $spacing-01 0;

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

@@ -632,14 +632,6 @@
   padding: 0;
 }
 
-// TODO: Revisit batch action list button and button icon alignment after
-// https: //github.com/carbon-design-system/carbon/issues/14021 is fixed
-.#{$block-class}
-  .#{c4p-settings.$carbon-prefix}--action-list
-  .#{c4p-settings.$carbon-prefix}--btn {
-  align-items: center;
-}
-
 .#{$block-class}
   .#{c4p-settings.$carbon-prefix}--action-list
   .#{c4p-settings.$carbon-prefix}--btn__icon {

package/scss/components/EditUpdateCards/_edit-update-cards.scss

@@ -31,6 +31,9 @@ $block-class: #{c4p-settings.$pkg-prefix}--edit-update-cards;
     .#{c4p-settings.$pkg-prefix}--card__header,
     .#{c4p-settings.$pkg-prefix}--card__footer {
       button {
+        // stylelint-disable-next-line carbon/theme-token-use
+        color: $white-0;
+
         &:hover {
           // stylelint-disable-next-line carbon/theme-token-use
           background-color: $blue-60-hover;
@@ -54,12 +57,14 @@ $block-class: #{c4p-settings.$pkg-prefix}--edit-update-cards;
         }
       }
     }
+
     .#{c4p-settings.$pkg-prefix}--card__footer {
       // stylelint-disable-next-line carbon/theme-token-use
       background-color: $blue-60;
       // stylelint-disable-next-line carbon/theme-token-use
       color: $white-0;
     }
+
     .#{c4p-settings.$pkg-prefix}--loading {
       animation-duration: $duration-slow-02;
       animation-fill-mode: forwards;
@@ -71,7 +76,12 @@ $block-class: #{c4p-settings.$pkg-prefix}--edit-update-cards;
         background-color: transparent;
       }
     }
+
+    .#{c4p-settings.$pkg-prefix}--card__header-container {
+      align-items: center;
+    }
   }
+
   &:not(.#{$block-class}__actions-bottom) {
     &##{$block-class}--edit {
       .#{c4p-settings.$pkg-prefix}--card__header {

package/scss/components/ProductiveCard/_productive-card.scss

@@ -77,6 +77,21 @@ $block-class: #{c4p-settings.$pkg-prefix}--card;
       &::before {
         opacity: 0;
       }
+
+      + .#{$block-class}__actions-header-ghost-button {
+        /* stylelint-disable-next-line max-nesting-depth */
+        &::before {
+          opacity: 0;
+        }
+      }
+    }
+
+    /* stylelint-disable-next-line max-nesting-depth */
+    &:first-child:not(:last-child) {
+      /* stylelint-disable-next-line max-nesting-depth */
+      &::before {
+        display: none;
+      }
     }
   }
 

package/scss/components/Tearsheet/_tearsheet.scss

@@ -127,6 +127,12 @@ $motion-duration: $duration-moderate-02;
     width: 100%;
   }
 
+  &.#{$block-class}--wide
+    .#{$pkg-prefix}--action-set
+    .#{$pkg-prefix}--action-set__action-button.#{$pkg-prefix}--action-set__action-button--expressive {
+    height: $spacing-11;
+  }
+
   @include breakpoint(md) {
     &.#{$block-class}--wide .#{$block-class}__container {
       width: calc(100% - (2 * #{$spacing-10}));