@carbon/ibm-products 2.4.0 → 2.5.0

package/es/components/DataSpreadsheet/hooks/useSpreadsheetEdit.js

@@ -47,7 +47,7 @@ export var useSpreadsheetEdit = function useSpreadsheetEdit(_ref) {
       cellEditorRef.current.style.display = 'block';
       cellEditorRef.current.style.height = activeCellRef === null || activeCellRef === void 0 ? void 0 : activeCellRef.current.style.height;
       cellEditorRef.current.style.paddingTop = "".concat((parseInt(activeCellRef === null || activeCellRef === void 0 ? void 0 : activeCellRef.current.style.height) - 16) / 2 - 1, "px"); // calculate paddingTop based on cellHeight which could be variable depending on the cellSize prop
-      cellEditorRef.current.style.textAlign = (cellProps === null || cellProps === void 0 ? void 0 : (_cellProps$column = cellProps.column) === null || _cellProps$column === void 0 ? void 0 : _cellProps$column.placement) === 'right' ? 'right' : 'left';
+      cellEditorRef.current.style.textAlign = (cellProps === null || cellProps === void 0 || (_cellProps$column = cellProps.column) === null || _cellProps$column === void 0 ? void 0 : _cellProps$column.placement) === 'right' ? 'right' : 'left';
       (_cellEditorRef$curren = cellEditorRef.current) === null || _cellEditorRef$curren === void 0 ? void 0 : _cellEditorRef$curren.focus();
       if (rulerWidth < cellEditorCurrentWidth) {
         var _visibleColumns$nextI;

package/es/components/DataSpreadsheet/utils/checkSelectedHeaderCell.js

@@ -11,10 +11,10 @@ export var checkSelectedHeaderCell = function checkSelectedHeaderCell(headerInde
   var isSelectedHeader = areasCloned.some(function (area) {
     var _area$point, _area$point2, _area$point3, _area$point4, _area$point5, _area$point6, _area$point7, _area$point8;
     var oppositeType = headerType === 'column' ? 'row' : 'column';
-    var minOppositeSelection = Math.min(area === null || area === void 0 ? void 0 : (_area$point = area.point1) === null || _area$point === void 0 ? void 0 : _area$point[oppositeType], area === null || area === void 0 ? void 0 : (_area$point2 = area.point2) === null || _area$point2 === void 0 ? void 0 : _area$point2[oppositeType]);
-    var maxOppositeSelection = Math.max(area === null || area === void 0 ? void 0 : (_area$point3 = area.point1) === null || _area$point3 === void 0 ? void 0 : _area$point3[oppositeType], area === null || area === void 0 ? void 0 : (_area$point4 = area.point2) === null || _area$point4 === void 0 ? void 0 : _area$point4[oppositeType]);
-    var minSelection = Math.min(area === null || area === void 0 ? void 0 : (_area$point5 = area.point1) === null || _area$point5 === void 0 ? void 0 : _area$point5[headerType], area === null || area === void 0 ? void 0 : (_area$point6 = area.point2) === null || _area$point6 === void 0 ? void 0 : _area$point6[headerType]);
-    var maxSelection = Math.max(area === null || area === void 0 ? void 0 : (_area$point7 = area.point1) === null || _area$point7 === void 0 ? void 0 : _area$point7[headerType], area === null || area === void 0 ? void 0 : (_area$point8 = area.point2) === null || _area$point8 === void 0 ? void 0 : _area$point8[headerType]);
+    var minOppositeSelection = Math.min(area === null || area === void 0 || (_area$point = area.point1) === null || _area$point === void 0 ? void 0 : _area$point[oppositeType], area === null || area === void 0 || (_area$point2 = area.point2) === null || _area$point2 === void 0 ? void 0 : _area$point2[oppositeType]);
+    var maxOppositeSelection = Math.max(area === null || area === void 0 || (_area$point3 = area.point1) === null || _area$point3 === void 0 ? void 0 : _area$point3[oppositeType], area === null || area === void 0 || (_area$point4 = area.point2) === null || _area$point4 === void 0 ? void 0 : _area$point4[oppositeType]);
+    var minSelection = Math.min(area === null || area === void 0 || (_area$point5 = area.point1) === null || _area$point5 === void 0 ? void 0 : _area$point5[headerType], area === null || area === void 0 || (_area$point6 = area.point2) === null || _area$point6 === void 0 ? void 0 : _area$point6[headerType]);
+    var maxSelection = Math.max(area === null || area === void 0 || (_area$point7 = area.point1) === null || _area$point7 === void 0 ? void 0 : _area$point7[headerType], area === null || area === void 0 || (_area$point8 = area.point2) === null || _area$point8 === void 0 ? void 0 : _area$point8[headerType]);
     var isTrueSelectedState = (items === null || items === void 0 ? void 0 : items.length) - 1 === maxOppositeSelection && minOppositeSelection === 0;
     // console.log({minSelection, maxSelection});
     // Iterate over all columns included in the selection area

package/es/components/DataSpreadsheet/utils/handleCellDeletion.js

@@ -26,10 +26,10 @@ export var handleCellDeletion = function handleCellDeletion(_ref) {
     return item.matcher === currentMatcher;
   });
   var selectionAreaToEmptyContents = selectionAreaClone[indexOfCurrentSelectionArea];
-  var lowestColumnIndex = Math.min(selectionAreaToEmptyContents === null || selectionAreaToEmptyContents === void 0 ? void 0 : (_selectionAreaToEmpty = selectionAreaToEmptyContents.point1) === null || _selectionAreaToEmpty === void 0 ? void 0 : _selectionAreaToEmpty.column, selectionAreaToEmptyContents === null || selectionAreaToEmptyContents === void 0 ? void 0 : (_selectionAreaToEmpty2 = selectionAreaToEmptyContents.point2) === null || _selectionAreaToEmpty2 === void 0 ? void 0 : _selectionAreaToEmpty2.column);
-  var greatestColumnIndex = Math.max(selectionAreaToEmptyContents === null || selectionAreaToEmptyContents === void 0 ? void 0 : (_selectionAreaToEmpty3 = selectionAreaToEmptyContents.point1) === null || _selectionAreaToEmpty3 === void 0 ? void 0 : _selectionAreaToEmpty3.column, selectionAreaToEmptyContents === null || selectionAreaToEmptyContents === void 0 ? void 0 : (_selectionAreaToEmpty4 = selectionAreaToEmptyContents.point2) === null || _selectionAreaToEmpty4 === void 0 ? void 0 : _selectionAreaToEmpty4.column);
-  var lowestRowIndex = Math.min(selectionAreaToEmptyContents === null || selectionAreaToEmptyContents === void 0 ? void 0 : (_selectionAreaToEmpty5 = selectionAreaToEmptyContents.point1) === null || _selectionAreaToEmpty5 === void 0 ? void 0 : _selectionAreaToEmpty5.row, selectionAreaToEmptyContents === null || selectionAreaToEmptyContents === void 0 ? void 0 : (_selectionAreaToEmpty6 = selectionAreaToEmptyContents.point2) === null || _selectionAreaToEmpty6 === void 0 ? void 0 : _selectionAreaToEmpty6.row);
-  var greatestRowIndex = Math.max(selectionAreaToEmptyContents === null || selectionAreaToEmptyContents === void 0 ? void 0 : (_selectionAreaToEmpty7 = selectionAreaToEmptyContents.point1) === null || _selectionAreaToEmpty7 === void 0 ? void 0 : _selectionAreaToEmpty7.row, selectionAreaToEmptyContents === null || selectionAreaToEmptyContents === void 0 ? void 0 : (_selectionAreaToEmpty8 = selectionAreaToEmptyContents.point2) === null || _selectionAreaToEmpty8 === void 0 ? void 0 : _selectionAreaToEmpty8.row);
+  var lowestColumnIndex = Math.min(selectionAreaToEmptyContents === null || selectionAreaToEmptyContents === void 0 || (_selectionAreaToEmpty = selectionAreaToEmptyContents.point1) === null || _selectionAreaToEmpty === void 0 ? void 0 : _selectionAreaToEmpty.column, selectionAreaToEmptyContents === null || selectionAreaToEmptyContents === void 0 || (_selectionAreaToEmpty2 = selectionAreaToEmptyContents.point2) === null || _selectionAreaToEmpty2 === void 0 ? void 0 : _selectionAreaToEmpty2.column);
+  var greatestColumnIndex = Math.max(selectionAreaToEmptyContents === null || selectionAreaToEmptyContents === void 0 || (_selectionAreaToEmpty3 = selectionAreaToEmptyContents.point1) === null || _selectionAreaToEmpty3 === void 0 ? void 0 : _selectionAreaToEmpty3.column, selectionAreaToEmptyContents === null || selectionAreaToEmptyContents === void 0 || (_selectionAreaToEmpty4 = selectionAreaToEmptyContents.point2) === null || _selectionAreaToEmpty4 === void 0 ? void 0 : _selectionAreaToEmpty4.column);
+  var lowestRowIndex = Math.min(selectionAreaToEmptyContents === null || selectionAreaToEmptyContents === void 0 || (_selectionAreaToEmpty5 = selectionAreaToEmptyContents.point1) === null || _selectionAreaToEmpty5 === void 0 ? void 0 : _selectionAreaToEmpty5.row, selectionAreaToEmptyContents === null || selectionAreaToEmptyContents === void 0 || (_selectionAreaToEmpty6 = selectionAreaToEmptyContents.point2) === null || _selectionAreaToEmpty6 === void 0 ? void 0 : _selectionAreaToEmpty6.row);
+  var greatestRowIndex = Math.max(selectionAreaToEmptyContents === null || selectionAreaToEmptyContents === void 0 || (_selectionAreaToEmpty7 = selectionAreaToEmptyContents.point1) === null || _selectionAreaToEmpty7 === void 0 ? void 0 : _selectionAreaToEmpty7.row, selectionAreaToEmptyContents === null || selectionAreaToEmptyContents === void 0 || (_selectionAreaToEmpty8 = selectionAreaToEmptyContents.point2) === null || _selectionAreaToEmpty8 === void 0 ? void 0 : _selectionAreaToEmpty8.row);
   rangeWithCallback(lowestColumnIndex, greatestColumnIndex, function (columnIndex) {
     rangeWithCallback(lowestRowIndex, greatestRowIndex, function (rowIndex) {
       var cellProps = rows[rowIndex].cells[columnIndex];

package/es/components/DataSpreadsheet/utils/handleHeaderCellSelection.js

@@ -91,7 +91,7 @@ export var handleHeaderCellSelection = function handleHeaderCellSelection(_ref2)
       return [].concat(_toConsumableArray(prev), [newSelectionArea]);
     }
     if (isHoldingShiftKey) {
-      var _selectionAreasClone$, _selectionAreasClone$2;
+      var _selectionAreasClone$;
       var _selectionsFromHeaderCell = selectionsClone.filter(function (item) {
         var _item$header3;
         return (_item$header3 = item.header) === null || _item$header3 === void 0 ? void 0 : _item$header3.type;
@@ -111,7 +111,7 @@ export var handleHeaderCellSelection = function handleHeaderCellSelection(_ref2)
         return item.matcher === currentMatcher;
       });
       var newIndexList = getSelectedItemIndexList({
-        indexList: ((_selectionAreasClone$ = selectionAreasClone[indexOfCurrentArea]) === null || _selectionAreasClone$ === void 0 ? void 0 : (_selectionAreasClone$2 = _selectionAreasClone$.header) === null || _selectionAreasClone$2 === void 0 ? void 0 : _selectionAreasClone$2.selectedIndexList) || [type === 'column' ? columnValue : rowValue],
+        indexList: ((_selectionAreasClone$ = selectionAreasClone[indexOfCurrentArea]) === null || _selectionAreasClone$ === void 0 || (_selectionAreasClone$ = _selectionAreasClone$.header) === null || _selectionAreasClone$ === void 0 ? void 0 : _selectionAreasClone$.selectedIndexList) || [type === 'column' ? columnValue : rowValue],
         newIndex: newIndexValue,
         activeCellIndex: activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates[type]
       });

package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js

@@ -34,7 +34,7 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
     return /*#__PURE__*/React.createElement(TableHeader, _extends({}, header.getHeaderProps({
       role: false
     }), {
-      className: cx((_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__resizableColumn"), header.getResizerProps), _defineProperty(_cx, "".concat(blockClass, "__isResizing"), header.isResizing), _defineProperty(_cx, "".concat(blockClass, "__sortableColumn"), header.canSort), _defineProperty(_cx, "".concat(blockClass, "__isSorted"), header.isSorted), _cx), header.getHeaderProps().className),
+      className: cx((_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__resizableColumn"), header.getResizerProps), _defineProperty(_cx, "".concat(blockClass, "__isResizing"), header.isResizing), _defineProperty(_cx, "".concat(blockClass, "__sortableColumn"), datagridState.isTableSortable), _defineProperty(_cx, "".concat(blockClass, "__isSorted"), header.isSorted), _cx), header.getHeaderProps().className),
       key: header.id
     }), header.render('Header'), header.getResizerProps && /*#__PURE__*/React.createElement("div", _extends({}, header.getResizerProps(), {
       className: "".concat(blockClass, "__resizer")

package/es/components/Datagrid/Datagrid/DatagridRow.js

@@ -51,9 +51,9 @@ var DatagridRow = function DatagridRow(datagridState) {
     hoverRow === null || hoverRow === void 0 ? void 0 : hoverRow.classList.add("".concat(blockClass, "__carbon-row-expanded-hover-active"));
     var rowExpanderButton = hoverRow === null || hoverRow === void 0 ? void 0 : hoverRow.querySelector(".".concat(blockClass, "__row-expander"));
     var rowSizeValue = rowSize || 'lg';
-    hoverRow === null || hoverRow === void 0 ? void 0 : (_hoverRow$style = hoverRow.style) === null || _hoverRow$style === void 0 ? void 0 : _hoverRow$style.setProperty("--".concat(blockClass, "--indicator-height"), totalNestedRowIndicatorHeight);
-    hoverRow === null || hoverRow === void 0 ? void 0 : (_hoverRow$style2 = hoverRow.style) === null || _hoverRow$style2 === void 0 ? void 0 : _hoverRow$style2.setProperty("--".concat(blockClass, "--row-height"), px(rowHeights[rowSizeValue]));
-    hoverRow === null || hoverRow === void 0 ? void 0 : (_hoverRow$style3 = hoverRow.style) === null || _hoverRow$style3 === void 0 ? void 0 : _hoverRow$style3.setProperty("--".concat(blockClass, "--indicator-offset-amount"), px((rowExpanderButton === null || rowExpanderButton === void 0 ? void 0 : rowExpanderButton.offsetLeft) || 0));
+    hoverRow === null || hoverRow === void 0 || (_hoverRow$style = hoverRow.style) === null || _hoverRow$style === void 0 ? void 0 : _hoverRow$style.setProperty("--".concat(blockClass, "--indicator-height"), totalNestedRowIndicatorHeight);
+    hoverRow === null || hoverRow === void 0 || (_hoverRow$style2 = hoverRow.style) === null || _hoverRow$style2 === void 0 ? void 0 : _hoverRow$style2.setProperty("--".concat(blockClass, "--row-height"), px(rowHeights[rowSizeValue]));
+    hoverRow === null || hoverRow === void 0 || (_hoverRow$style3 = hoverRow.style) === null || _hoverRow$style3 === void 0 ? void 0 : _hoverRow$style3.setProperty("--".concat(blockClass, "--indicator-offset-amount"), px((rowExpanderButton === null || rowExpanderButton === void 0 ? void 0 : rowExpanderButton.offsetLeft) || 0));
   };
   var focusRemover = function focusRemover() {
     var elements = document.querySelectorAll(".".concat(blockClass, "__carbon-row-expanded"));

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js

@@ -32,17 +32,17 @@ export var DraggableItemsList = function DraggableItemsList(_ref) {
   }).filter(function (colDef) {
     return !colDef.isAction;
   }).filter(function (colDef) {
-    var _colDef$Header$props$2, _colDef$Header$props2, _colDef$Header$props3;
+    var _colDef$Header$props$2, _colDef$Header$props2;
     var sortableTitle = isTableSortable && ((_colDef$Header$props$2 = colDef.Header().props.children.props) === null || _colDef$Header$props$2 === void 0 ? void 0 : _colDef$Header$props$2.title);
-    return filterString.length === 0 || (isTableSortable ? sortableTitle === null || sortableTitle === void 0 ? void 0 : sortableTitle.toLowerCase().includes(filterString) : (_colDef$Header$props2 = colDef.Header.props) === null || _colDef$Header$props2 === void 0 ? void 0 : (_colDef$Header$props3 = _colDef$Header$props2.title) === null || _colDef$Header$props3 === void 0 ? void 0 : _colDef$Header$props3.toLowerCase().includes(filterString)) && colDef.id !== 'spacer';
+    return filterString.length === 0 || (isTableSortable ? sortableTitle === null || sortableTitle === void 0 ? void 0 : sortableTitle.toLowerCase().includes(filterString) : (_colDef$Header$props2 = colDef.Header.props) === null || _colDef$Header$props2 === void 0 || (_colDef$Header$props2 = _colDef$Header$props2.title) === null || _colDef$Header$props2 === void 0 ? void 0 : _colDef$Header$props2.toLowerCase().includes(filterString)) && colDef.id !== 'spacer';
   }).map(function (colDef, i) {
-    var _colDef$Header$props$3, _colDef$Header$props4, _colDef$Header$props5, _colDef$Header$props6, _colDef$Header$props7;
+    var _colDef$Header$props$3, _colDef$Header$props3, _colDef$Header$props4, _colDef$Header$props5, _colDef$Header$props6;
     var isSortableColumn = !!colDef.canSort && !!isTableSortable;
     var sortableTitle = isTableSortable && ((_colDef$Header$props$3 = colDef.Header().props.children.props) === null || _colDef$Header$props$3 === void 0 ? void 0 : _colDef$Header$props$3.title);
     var searchString = new RegExp('(' + filterString + ')');
     var res = filterString.length ? isSortableColumn ? sortableTitle.toLowerCase().split(searchString) : colDef.Header.props.title.toLowerCase().split(searchString) : null;
     var firstWord = res !== null ? res[0] === '' ? res[1].charAt(0).toUpperCase() + res[1].substring(1) : res[0].charAt(0).toUpperCase() + res[0].substring(1) : null;
-    var highlightedText = res !== null ? res[0] === '' ? "<strong>".concat(firstWord, "</strong>") + res[2] : firstWord + "<strong>".concat(res[1], "</strong>") + res[2] : isSortableColumn ? sortableTitle : (_colDef$Header$props4 = colDef.Header.props) === null || _colDef$Header$props4 === void 0 ? void 0 : _colDef$Header$props4.title;
+    var highlightedText = res !== null ? res[0] === '' ? "<strong>".concat(firstWord, "</strong>") + res[2] : firstWord + "<strong>".concat(res[1], "</strong>") + res[2] : isSortableColumn ? sortableTitle : (_colDef$Header$props3 = colDef.Header.props) === null || _colDef$Header$props3 === void 0 ? void 0 : _colDef$Header$props3.title;
     var isFrozenColumn = !!colDef.sticky;
     var listContents = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Checkbox, {
       wrapperClassName: "".concat(blockClass, "__customize-columns-checkbox-wrapper"),
@@ -53,8 +53,8 @@ export var DraggableItemsList = function DraggableItemsList(_ref) {
         return onSelectColumn(colDef, checked);
       },
       id: "".concat(blockClass, "__customization-column-").concat(colDef.id),
-      labelText: isSortableColumn ? sortableTitle : (_colDef$Header$props5 = colDef.Header.props) === null || _colDef$Header$props5 === void 0 ? void 0 : _colDef$Header$props5.title,
-      title: isSortableColumn ? sortableTitle : (_colDef$Header$props6 = colDef.Header.props) === null || _colDef$Header$props6 === void 0 ? void 0 : _colDef$Header$props6.title,
+      labelText: isSortableColumn ? sortableTitle : (_colDef$Header$props4 = colDef.Header.props) === null || _colDef$Header$props4 === void 0 ? void 0 : _colDef$Header$props4.title,
+      title: isSortableColumn ? sortableTitle : (_colDef$Header$props5 = colDef.Header.props) === null || _colDef$Header$props5 === void 0 ? void 0 : _colDef$Header$props5.title,
       className: "".concat(blockClass, "__customize-columns-checkbox"),
       hideLabel: true
     }), /*#__PURE__*/React.createElement("div", {
@@ -71,7 +71,7 @@ export var DraggableItemsList = function DraggableItemsList(_ref) {
       id: "dnd-datagrid-columns-".concat(colDef.id),
       type: "column-customization",
       disabled: filterString.length > 0 || isFrozenColumn,
-      ariaLabel: isSortableColumn ? sortableTitle : (_colDef$Header$props7 = colDef.Header.props) === null || _colDef$Header$props7 === void 0 ? void 0 : _colDef$Header$props7.title,
+      ariaLabel: isSortableColumn ? sortableTitle : (_colDef$Header$props6 = colDef.Header.props) === null || _colDef$Header$props6 === void 0 ? void 0 : _colDef$Header$props6.title,
       onGrab: setAriaRegionText,
       isFocused: focusIndex === i,
       moveElement: moveElement,

package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js

@@ -286,7 +286,7 @@ export var InlineEditCell = function InlineEditCell(_ref) {
         });
         setInEditMode(false);
         sendFocusBackToGrid();
-        inputProps === null || inputProps === void 0 ? void 0 : (_inputProps$onChange = inputProps.onChange) === null || _inputProps$onChange === void 0 ? void 0 : _inputProps$onChange.call(inputProps, item.selectedItem);
+        inputProps === null || inputProps === void 0 || (_inputProps$onChange = inputProps.onChange) === null || _inputProps$onChange === void 0 ? void 0 : _inputProps$onChange.call(inputProps, item.selectedItem);
       },
       downshiftProps: {
         onStateChange: function onStateChange(downshiftState) {
@@ -324,9 +324,9 @@ export var InlineEditCell = function InlineEditCell(_ref) {
   var renderDateCell = function renderDateCell() {
     var _config$inputProps, _outerButtonElement$c;
     var datePickerPreparedProps = prepareProps(config.inputProps, ['datePickerInputProps']);
-    var datePickerInputProps = config === null || config === void 0 ? void 0 : (_config$inputProps = config.inputProps) === null || _config$inputProps === void 0 ? void 0 : _config$inputProps.datePickerInputProps;
+    var datePickerInputProps = config === null || config === void 0 || (_config$inputProps = config.inputProps) === null || _config$inputProps === void 0 ? void 0 : _config$inputProps.datePickerInputProps;
     return /*#__PURE__*/React.createElement(DatePicker, _extends({}, datePickerPreparedProps, {
-      appendTo: outerButtonElement === null || outerButtonElement === void 0 ? void 0 : (_outerButtonElement$c = outerButtonElement.current) === null || _outerButtonElement$c === void 0 ? void 0 : _outerButtonElement$c.parentElement,
+      appendTo: outerButtonElement === null || outerButtonElement === void 0 || (_outerButtonElement$c = outerButtonElement.current) === null || _outerButtonElement$c === void 0 ? void 0 : _outerButtonElement$c.parentElement,
       ref: datePickerRef,
       style: {
         width: cell.column.totalWidth
@@ -336,7 +336,7 @@ export var InlineEditCell = function InlineEditCell(_ref) {
       onChange: function onChange(newDate) {
         var _datePickerPreparedPr;
         var newDateObj = newDate[0];
-        datePickerPreparedProps === null || datePickerPreparedProps === void 0 ? void 0 : (_datePickerPreparedPr = datePickerPreparedProps.onChange) === null || _datePickerPreparedPr === void 0 ? void 0 : _datePickerPreparedPr.call(datePickerPreparedProps, newDateObj, cell);
+        datePickerPreparedProps === null || datePickerPreparedProps === void 0 || (_datePickerPreparedPr = datePickerPreparedProps.onChange) === null || _datePickerPreparedPr === void 0 ? void 0 : _datePickerPreparedPr.call(datePickerPreparedProps, newDateObj, cell);
         var newCellId = getNewCellId('Enter');
         saveCellData(newDateObj);
         setCellValue(newDateObj);
@@ -368,7 +368,7 @@ export var InlineEditCell = function InlineEditCell(_ref) {
   };
   var buildDate = function buildDate(value) {
     var _config$inputProps2;
-    var dateFormat = config === null || config === void 0 ? void 0 : (_config$inputProps2 = config.inputProps) === null || _config$inputProps2 === void 0 ? void 0 : _config$inputProps2.dateFormat;
+    var dateFormat = config === null || config === void 0 || (_config$inputProps2 = config.inputProps) === null || _config$inputProps2 === void 0 ? void 0 : _config$inputProps2.dateFormat;
     if (value instanceof Date) {
       var maskedFullYear = value.getFullYear();
       var maskedMonth = padTo2Digits(value.getMonth() + 1);
@@ -440,7 +440,7 @@ export var InlineEditCell = function InlineEditCell(_ref) {
       "data-inline-type": type,
       onClick: !nonEditCell ? handleInlineCellClick : addActiveState,
       onKeyDown: !nonEditCell ? handleKeyDown : null,
-      className: cx("".concat(blockClass, "__inline-edit--outer-cell-button"), (_cx3 = {}, _defineProperty(_cx3, "".concat(blockClass, "__inline-edit--outer-cell-button--").concat(rowSize), rowSize), _defineProperty(_cx3, "".concat(blockClass, "__inline-edit--outer-cell-button--lg"), !rowSize), _defineProperty(_cx3, "".concat(blockClass, "__inline-edit--outer-cell-button--invalid"), config === null || config === void 0 ? void 0 : (_config$validator = config.validator) === null || _config$validator === void 0 ? void 0 : _config$validator.call(config, cellValue)), _cx3))
+      className: cx("".concat(blockClass, "__inline-edit--outer-cell-button"), (_cx3 = {}, _defineProperty(_cx3, "".concat(blockClass, "__inline-edit--outer-cell-button--").concat(rowSize), rowSize), _defineProperty(_cx3, "".concat(blockClass, "__inline-edit--outer-cell-button--lg"), !rowSize), _defineProperty(_cx3, "".concat(blockClass, "__inline-edit--outer-cell-button--invalid"), config === null || config === void 0 || (_config$validator = config.validator) === null || _config$validator === void 0 ? void 0 : _config$validator.call(config, cellValue)), _cx3))
     }, !inEditMode && /*#__PURE__*/React.createElement(InlineEditButton, {
       isActiveCell: cellId === activeCellId,
       renderIcon: setRenderIcon(),

package/es/components/Datagrid/useActionsColumn.js

@@ -24,7 +24,16 @@ var useActionsColumn = function useActionsColumn(hooks) {
   var useAttachActionsOnInstance = function useAttachActionsOnInstance(instance) {
     var rowActions = instance.rowActions,
       isFetching = instance.isFetching,
-      selectedFlatRows = instance.selectedFlatRows;
+      selectedRowIds = instance.state.selectedRowIds;
+    var getDisabledState = function getDisabledState(rowIndex) {
+      var selectedRowIndexes = Object.keys(selectedRowIds).map(function (n) {
+        return Number(n);
+      });
+      if (selectedRowIndexes.includes(rowIndex)) {
+        return true;
+      }
+      return false;
+    };
     if (rowActions && Array.isArray(rowActions)) {
       var addActionsMenu = function addActionsMenu(props, cellData) {
         var cell = cellData.cell;
@@ -53,11 +62,8 @@ var useActionsColumn = function useActionsColumn(hooks) {
               if (hidden) {
                 return null;
               }
-              var selectedRowId = selectedFlatRows === null || selectedFlatRows === void 0 ? void 0 : selectedFlatRows.filter(function (item) {
-                return item.id === row.id ? item.id : null;
-              });
               return /*#__PURE__*/React.createElement("div", {
-                className: cx("".concat(blockClass, "__actions-column-button"), _defineProperty({}, "".concat(blockClass, "__disabled-row-action-button"), selectedFlatRows && selectedFlatRows.length && selectedRowId && selectedRowId.length)),
+                className: cx("".concat(blockClass, "__actions-column-button"), _defineProperty({}, "".concat(blockClass, "__disabled-row-action-button"), getDisabledState(row.index))),
                 key: "".concat(itemText, "__").concat(index)
               }, /*#__PURE__*/React.createElement(OverflowMenu, _extends({}, rest, {
                 renderIcon: icon,
@@ -65,9 +71,9 @@ var useActionsColumn = function useActionsColumn(hooks) {
                 light: true,
                 iconDescription: itemText,
                 kind: "ghost",
-                className: cx(_defineProperty({}, "".concat(blockClass, "__disabled-row-action"), selectedFlatRows && selectedFlatRows.length && selectedRowId && selectedRowId.length)),
+                className: cx(_defineProperty({}, "".concat(blockClass, "__disabled-row-action"), getDisabledState(row.index))),
                 onClick: function onClick(e) {
-                  if (selectedFlatRows && selectedFlatRows.length && selectedRowId && selectedRowId.length) {
+                  if (getDisabledState(row.index)) {
                     // Row actions should be disabled if row is selected and batchActions toolbar is active
                     return;
                   }

package/es/components/Datagrid/useDisableSelectRows.js

@@ -20,7 +20,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));
@@ -40,7 +40,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)
     }];
   };
@@ -48,7 +48,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));
@@ -68,7 +68,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/es/components/Datagrid/useInlineEdit.js

@@ -21,11 +21,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/es/components/Datagrid/useOnRowClick.js

@@ -6,6 +6,7 @@
  * restricted by GSA ADP Schedule Contract with IBM Corp.
  */
 
+import { pkg, carbon } from '../../settings';
 var useOnRowClick = function useOnRowClick(hooks) {
   var useInstance = function useInstance(rowInstance) {
     var onRowClick = rowInstance.onRowClick;
@@ -15,13 +16,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(pkg.prefix, "--datagrid .").concat(carbon.prefix, "--data-table--selected:not(.").concat(pkg.prefix, "--datagrid__active-row)"));
+          if (clickableSelectedRows.length) {
+            Array.from(clickableSelectedRows).forEach(function (row) {
+              row.classList.remove("".concat(carbon.prefix, "--data-table--selected"));
+            });
+          }
+          var closestRow = event.target.closest(".".concat(pkg.prefix, "--datagrid__carbon-row"));
+          closestRow.classList.add("".concat(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/es/components/Datagrid/useSortableColumns.js

@@ -21,11 +21,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;
@@ -70,6 +96,12 @@ var useSortableColumns = function useSortableColumns(hooks) {
       var Header = function Header(headerProp) {
         var _cx;
         return column.disableSortBy === true ? column.Header : /*#__PURE__*/React.createElement(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/es/components/Datagrid/useStickyColumn.js

@@ -149,7 +149,7 @@ var changeProps = function changeProps(elementName, headerCellRef, windowSize, p
   if (column.sticky === 'left') {
     var _data$instance, _cx2;
     return [props, _objectSpread({
-      className: cx((_cx2 = {}, _defineProperty(_cx2, "".concat(leftStickyStyleClassPrefix, "-").concat(elementName), true && windowSize > 671), _defineProperty(_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: cx((_cx2 = {}, _defineProperty(_cx2, "".concat(leftStickyStyleClassPrefix, "-").concat(elementName), true && windowSize > 671), _defineProperty(_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/es/components/EditUpdateCards/EditUpdateCards.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-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
  *
@@ -56,12 +56,30 @@ export var EditUpdateCards = /*#__PURE__*/React.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 = _objectWithoutProperties(_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.createElement("div", _extends({}, rest, {
     className: cx(blockClass,
     // Apply the block class to the main HTML element
@@ -70,7 +88,7 @@ export var EditUpdateCards = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     _defineProperty({}, "".concat(blockClass, "__actions-bottom"), actionsPlacement === 'bottom')),
     ref: ref,
     role: "main"
-  }, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(ProductiveCard, {
+  }, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(ProductiveCard, _extends({
     actionIcons: actionIcons,
     actionsPlacement: actionsPlacement,
     className: className,
@@ -78,7 +96,7 @@ export var EditUpdateCards = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     label: label,
     title: title,
     titleSize: titleSize
-  }, editMode === false && /*#__PURE__*/React.createElement("div", null, previewChildren), editMode && /*#__PURE__*/React.createElement("div", null, editChildren)));
+  }, editMode && conditionalProps), editMode === false && /*#__PURE__*/React.createElement("div", null, previewChildren), editMode && /*#__PURE__*/React.createElement("div", null, editChildren)));
 });
 
 // Return a placeholder if not released and not enabled by feature flag
@@ -127,10 +145,54 @@ EditUpdateCards.propTypes = {
    * Optional label for the top of the card
    */
   label: PropTypes.string,
+  /**
+   * Function that's called from the primary button or action icon
+   */
+  onPrimaryButtonClick: PropTypes.func,
+  /**
+   * Function that's called from the secondary button or action icon
+   */
+  onSecondaryButtonClick: PropTypes.func,
   /**
    * Preview mode children
    */
   previewChildren: PropTypes.node,
+  /**
+   * Optional prop to allow overriding the icon rendering. Can be a React component class
+   */
+  primaryButtonIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  /**
+   * Establishes the kind of button displayed for the primary button
+   */
+  primaryButtonKind: PropTypes.oneOf(['primary', 'ghost']),
+  /**
+   * Determines if the primary button is on the top or bottom of the card
+   */
+  primaryButtonPlacement: PropTypes.oneOf(['top', 'bottom']),
+  /**
+   * The text that's displayed in the primary button
+   */
+  primaryButtonText: PropTypes.string,
+  /**
+   * Optionally specify an href for your Button to become an <a> element
+   */
+  secondaryButtonHref: PropTypes.string,
+  /**
+   * Optional prop to allow overriding the icon rendering. Can be a React component class
+   */
+  secondaryButtonIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  /**
+   * Establishes the kind of button displayed for the secondary button
+   */
+  secondaryButtonKind: PropTypes.oneOf(['secondary', 'ghost']),
+  /**
+   * Determines if the secondary button is on the top or bottom of the card
+   */
+  secondaryButtonPlacement: PropTypes.oneOf(['top', 'bottom']),
+  /**
+   * The text that's displayed in the secondary button
+   */
+  secondaryButtonText: PropTypes.string,
   /**
    * Title that's displayed at the top of the card
    */

package/es/components/ExportModal/ExportModal.js

@@ -76,7 +76,7 @@ export var ExportModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
   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/es/components/NotificationsPanel/NotificationsPanel.js

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

package/es/components/ProductiveCard/ProductiveCard.js

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