@carbon/ibm-products 2.4.0 → 2.5.0

package/es/components/SidePanel/SidePanel.js

@@ -121,7 +121,7 @@ export var SidePanel = /*#__PURE__*/React.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]);
@@ -152,7 +152,7 @@ export var SidePanel = /*#__PURE__*/React.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]);
 
@@ -173,7 +173,7 @@ export var SidePanel = /*#__PURE__*/React.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/es/components/TagSet/TagSetModal.js

@@ -53,9 +53,9 @@ export 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/es/global/js/utils/StoryDocsPage.js

@@ -69,7 +69,7 @@ var processBlocks = function processBlocks(blocks, stories, omitUnreferencedStor
  * @returns
  */
 export 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,
@@ -80,7 +80,7 @@ export var StoryDocsPage = function StoryDocsPage(_ref2) {
     csfFile = _useOf.csfFile;
   var storyInfo = 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/es/global/js/utils/Wrap.js

@@ -22,7 +22,7 @@ var isEmpty = function isEmpty(children) {
   React.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/es/global/js/utils/props-helper.js

@@ -151,7 +151,7 @@ export var getDeprecatedArgTypes = function getDeprecatedArgTypes(deprecatedProp
 export 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.Fragment || items.type === React.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.Fragment || items.type === React.Fragment)) {
     var unwrappedItems = unwrapIfFragment(items);
     return unwrappedItems.map(function (item) {
       return _objectSpread({

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

@@ -107,7 +107,7 @@ StackblitzLink.propTypes = {
 };
 export 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 = _slicedToArray(_title$split, 3),
     _pkg = _title$split2[0],
@@ -119,7 +119,7 @@ export var palUsageHref = function palUsageHref(csfFile) {
 };
 export 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 = _toArray(_title$split3),
     _pkg = _title$split4[0],
@@ -148,7 +148,7 @@ export var storyDocsPageTitle = function storyDocsPageTitle(csfFile) {
 };
 export 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 = _toArray(_title$split5),
     pkg = _title$split6[0],

package/lib/components/AddSelect/AddSelectRow.js

@@ -127,7 +127,7 @@ var AddSelectRow = function AddSelectRow(_ref) {
   var isInMetaPanel = function isInMetaPanel(id) {
     return id === (displayMetalPanel === null || displayMetalPanel === void 0 ? void 0 : displayMetalPanel.id);
   };
-  var hasModifiers = (modifiers === null || modifiers === void 0 ? void 0 : (_modifiers$options = modifiers.options) === null || _modifiers$options === void 0 ? void 0 : _modifiers$options.length) > 0;
+  var hasModifiers = (modifiers === null || modifiers === void 0 || (_modifiers$options = modifiers.options) === null || _modifiers$options === void 0 ? void 0 : _modifiers$options.length) > 0;
   var tabIndex = getTabIndex();
   var selected = isSelected();
   var expanded = parentSelected === item.id;

package/lib/components/AddSelect/AddSelectSidebar.js

@@ -34,7 +34,7 @@ var AddSelectSidebar = function AddSelectSidebar(_ref) {
     noSelectionDescription = _ref.noSelectionDescription,
     noSelectionTitle = _ref.noSelectionTitle,
     setDisplayMetaPanel = _ref.setDisplayMetaPanel;
-  var hasModifiers = (modifiers === null || modifiers === void 0 ? void 0 : (_modifiers$options = modifiers.options) === null || _modifiers$options === void 0 ? void 0 : _modifiers$options.length) > 0;
+  var hasModifiers = (modifiers === null || modifiers === void 0 || (_modifiers$options = modifiers.options) === null || _modifiers$options === void 0 ? void 0 : _modifiers$options.length) > 0;
   var hasSelections = multiSelection.length > 0;
   var getNewItem = function getNewItem(item) {
     // certain properties should not be displayed in the sidebar

package/lib/components/AddSelect/add-select-utils.js

@@ -114,14 +114,14 @@ var getFilteredItems = function getFilteredItems(useNormalizedItems, normalizedI
      */
     if (path.length > 1) {
       return path.reduce(function (prev, cur, curIdx) {
-        var _prev$find, _prev$find$children;
+        var _prev$find;
         // because the root of the path never changes we can skip it
         if (curIdx === 0) {
           return prev;
         }
         var item = (_prev$find = prev.find(function (item) {
           return item.id === cur.id;
-        })) === null || _prev$find === void 0 ? void 0 : (_prev$find$children = _prev$find.children) === null || _prev$find$children === void 0 ? void 0 : _prev$find$children.entries;
+        })) === null || _prev$find === void 0 || (_prev$find = _prev$find.children) === null || _prev$find === void 0 ? void 0 : _prev$find.entries;
         return item;
       }, items.entries);
     }

package/lib/components/Card/Card.js

@@ -16,7 +16,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _CardHeader = require("./CardHeader");
 var _CardFooter = require("./CardFooter");
 var _settings = require("../../settings");
-var _excluded = ["actionIcons", "actionsPlacement", "children", "className", "clickZone", "description", "label", "media", "mediaPosition", "onClick", "onKeyDown", "onPrimaryButtonClick", "overflowActions", "overflowAriaLabel", "onSecondaryButtonClick", "pictogram", "primaryButtonHref", "primaryButtonIcon", "primaryButtonKind", "primaryButtonPlacement", "primaryButtonText", "productive", "secondaryButtonHref", "secondaryButtonIcon", "secondaryButtonKind", "secondaryButtonText", "title", "titleSize"],
+var _excluded = ["actionIcons", "actionsPlacement", "children", "className", "clickZone", "description", "label", "media", "mediaPosition", "onClick", "onKeyDown", "onPrimaryButtonClick", "overflowActions", "overflowAriaLabel", "onSecondaryButtonClick", "pictogram", "primaryButtonHref", "primaryButtonIcon", "primaryButtonKind", "primaryButtonPlacement", "primaryButtonText", "productive", "secondaryButtonHref", "secondaryButtonIcon", "secondaryButtonKind", "secondaryButtonPlacement", "secondaryButtonText", "title", "titleSize"],
   _excluded2 = ["id"],
   _excluded3 = ["id", "icon", "onClick", "iconDescription", "href"]; //
 // Copyright IBM Corp. 2020, 2023
@@ -41,6 +41,7 @@ var defaults = {
   primaryButtonPlacement: 'bottom',
   productive: false,
   secondaryButtonKind: 'secondary',
+  secondaryButtonPlacement: 'bottom',
   titleSize: 'default'
 };
 var Card = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
@@ -78,6 +79,8 @@ var Card = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     secondaryButtonIcon = _ref.secondaryButtonIcon,
     _ref$secondaryButtonK = _ref.secondaryButtonKind,
     secondaryButtonKind = _ref$secondaryButtonK === void 0 ? defaults.secondaryButtonKind : _ref$secondaryButtonK,
+    _ref$secondaryButtonP = _ref.secondaryButtonPlacement,
+    secondaryButtonPlacement = _ref$secondaryButtonP === void 0 ? defaults.secondaryButtonPlacement : _ref$secondaryButtonP,
     secondaryButtonText = _ref.secondaryButtonText,
     title = _ref.title,
     _ref$titleSize = _ref.titleSize,
@@ -182,12 +185,17 @@ var Card = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       noActionIcons: actionIcons.length > 0 && actionsPlacement === 'top' ? false : true,
       actionsPlacement: actionsPlacement,
       onPrimaryButtonClick: onPrimaryButtonClick,
+      onSecondaryButtonClick: onSecondaryButtonClick,
       primaryButtonIcon: primaryButtonIcon,
       primaryButtonPlacement: primaryButtonPlacement,
       primaryButtonText: primaryButtonText,
       description: description,
       hasActions: hasActions,
       label: label,
+      secondaryButtonHref: secondaryButtonHref,
+      secondaryButtonIcon: secondaryButtonIcon,
+      secondaryButtonPlacement: secondaryButtonPlacement,
+      secondaryButtonText: secondaryButtonText,
       title: title,
       titleSize: titleSize
     };
@@ -216,6 +224,7 @@ var Card = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       secondaryButtonHref: secondaryButtonHref,
       secondaryButtonIcon: secondaryButtonIcon,
       secondaryButtonKind: secondaryButtonKind,
+      secondaryButtonPlacement: secondaryButtonPlacement,
       secondaryButtonText: secondaryButtonText
     };
   };
@@ -266,6 +275,7 @@ Card.propTypes = {
   secondaryButtonHref: _propTypes.default.string,
   secondaryButtonIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
   secondaryButtonKind: _propTypes.default.oneOf(['secondary', 'ghost']),
+  secondaryButtonPlacement: _propTypes.default.oneOf(['top', 'bottom']),
   secondaryButtonText: _propTypes.default.string,
   title: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.node]),
   titleSize: _propTypes.default.oneOf(['default', 'large'])

package/lib/components/Card/CardFooter.js

@@ -44,14 +44,15 @@ var CardFooter = function CardFooter(_ref) {
     secondaryButtonIcon = _ref.secondaryButtonIcon,
     _ref$secondaryButtonK = _ref.secondaryButtonKind,
     secondaryButtonKind = _ref$secondaryButtonK === void 0 ? defaults.secondaryButtonKind : _ref$secondaryButtonK,
+    secondaryButtonPlacement = _ref.secondaryButtonPlacement,
     secondaryButtonText = _ref.secondaryButtonText;
   var blockClass = "".concat(_settings.pkg.prefix, "--card");
   var footerClass = "".concat(_settings.pkg.prefix, "--card__footer");
   var footerClasses = (0, _classnames.default)(footerClass, (0, _defineProperty2.default)({}, "".concat(footerClass, "-no-button"), !hasButton));
   return /*#__PURE__*/_react.default.createElement("div", {
     className: footerClasses
-  }, secondaryButtonText && /*#__PURE__*/_react.default.createElement(_react2.Button, {
-    kind: secondaryButtonKind,
+  }, secondaryButtonText && secondaryButtonPlacement === 'bottom' && /*#__PURE__*/_react.default.createElement(_react2.Button, {
+    kind: productive ? 'ghost' : secondaryButtonKind,
     onClick: onSecondaryButtonClick,
     size: "md",
     renderIcon: secondaryButtonIcon,
@@ -82,6 +83,7 @@ CardFooter.propTypes = {
   secondaryButtonHref: _propTypes.default.string,
   secondaryButtonIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
   secondaryButtonKind: _propTypes.default.oneOf(['secondary', 'ghost']),
+  secondaryButtonPlacement: _propTypes.default.oneOf(['top', 'bottom']),
   secondaryButtonText: _propTypes.default.string
 };
 CardFooter.displayName = componentName;

package/lib/components/Card/CardHeader.js

@@ -28,6 +28,7 @@ var CardHeader = function CardHeader(_ref) {
   var actions = _ref.actions,
     noActionIcons = _ref.noActionIcons,
     onPrimaryButtonClick = _ref.onPrimaryButtonClick,
+    onSecondaryButtonClick = _ref.onSecondaryButtonClick,
     primaryButtonIcon = _ref.primaryButtonIcon,
     primaryButtonPlacement = _ref.primaryButtonPlacement,
     primaryButtonText = _ref.primaryButtonText,
@@ -35,6 +36,10 @@ var CardHeader = function CardHeader(_ref) {
     _ref$hasActions = _ref.hasActions,
     hasActions = _ref$hasActions === void 0 ? defaults.hasActions : _ref$hasActions,
     label = _ref.label,
+    secondaryButtonHref = _ref.secondaryButtonHref,
+    secondaryButtonIcon = _ref.secondaryButtonIcon,
+    secondaryButtonPlacement = _ref.secondaryButtonPlacement,
+    secondaryButtonText = _ref.secondaryButtonText,
     title = _ref.title,
     _ref$titleSize = _ref.titleSize,
     titleSize = _ref$titleSize === void 0 ? defaults.titleSize : _ref$titleSize;
@@ -57,9 +62,16 @@ var CardHeader = function CardHeader(_ref) {
     className: "".concat(blockClass, "__description")
   }, description)), hasActions && /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__actions ").concat(blockClass, "__actions-header")
-  }, actions, primaryButtonText && primaryButtonPlacement === 'top' && /*#__PURE__*/_react.default.createElement(_react2.Button, {
+  }, actions, secondaryButtonText && secondaryButtonPlacement === 'top' && /*#__PURE__*/_react.default.createElement(_react2.Button, {
     kind: "ghost",
-    size: "small",
+    onClick: onSecondaryButtonClick,
+    size: "sm",
+    renderIcon: secondaryButtonIcon,
+    href: secondaryButtonHref,
+    className: actionGhostButtonClass
+  }, secondaryButtonText), primaryButtonText && primaryButtonPlacement === 'top' && /*#__PURE__*/_react.default.createElement(_react2.Button, {
+    kind: "ghost",
+    size: "sm",
     renderIcon: primaryButtonIcon,
     onClick: onPrimaryButtonClick,
     className: actionGhostButtonClass
@@ -73,9 +85,15 @@ CardHeader.propTypes = {
   label: _propTypes.default.string,
   noActionIcons: _propTypes.default.bool,
   onPrimaryButtonClick: _propTypes.default.func,
+  onSecondaryButtonClick: _propTypes.default.func,
   primaryButtonIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
   primaryButtonPlacement: _propTypes.default.oneOf(['top', 'bottom']),
   primaryButtonText: _propTypes.default.string,
+  secondaryButtonHref: _propTypes.default.string,
+  secondaryButtonIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+  secondaryButtonKind: _propTypes.default.oneOf(['secondary', 'ghost']),
+  secondaryButtonPlacement: _propTypes.default.oneOf(['top', 'bottom']),
+  secondaryButtonText: _propTypes.default.string,
   title: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.node]),
   titleSize: _propTypes.default.oneOf(['default', 'large'])
 };

package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js

@@ -86,7 +86,7 @@ var DataSpreadsheetBody = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, re
   (0, _react.useEffect)(function () {
     if (selectionAreaData.length) {
       var _previousState$select;
-      if (!clickAndHoldActive && previousState !== null && previousState !== void 0 && previousState.clickAndHoldActive || (previousState === null || previousState === void 0 ? void 0 : (_previousState$select = previousState.selectionAreaData) === null || _previousState$select === void 0 ? void 0 : _previousState$select.length) !== (selectionAreaData === null || selectionAreaData === void 0 ? void 0 : selectionAreaData.length)) {
+      if (!clickAndHoldActive && previousState !== null && previousState !== void 0 && previousState.clickAndHoldActive || (previousState === null || previousState === void 0 || (_previousState$select = previousState.selectionAreaData) === null || _previousState$select === void 0 ? void 0 : _previousState$select.length) !== (selectionAreaData === null || selectionAreaData === void 0 ? void 0 : selectionAreaData.length)) {
         onSelectionAreaChange(selectionAreaData);
       }
     }
@@ -396,7 +396,7 @@ var DataSpreadsheetBody = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, re
           role: "gridcell",
           style: _objectSpread(_objectSpread({}, cell.getCellProps().style), {}, {
             display: 'grid',
-            minWidth: (cell === null || cell === void 0 ? void 0 : (_cell$column = cell.column) === null || _cell$column === void 0 ? void 0 : _cell$column.width) || (defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.width)
+            minWidth: (cell === null || cell === void 0 || (_cell$column = cell.column) === null || _cell$column === void 0 ? void 0 : _cell$column.width) || (defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.width)
           })
         }), /*#__PURE__*/_react.default.createElement("button", {
           id: "".concat(blockClass, "__cell--").concat(cell.row.index, "--").concat(index),

package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js

@@ -65,7 +65,7 @@ var DataSpreadsheetHeader = /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
   (0, _react.useEffect)(function () {
     if ((previousState === null || previousState === void 0 ? void 0 : previousState.cellSize) !== cellSize) {
       var _ref$current;
-      var scrollContainer = ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.querySelector(".".concat(blockClass, "__list--container"));
+      var scrollContainer = ref === null || ref === void 0 || (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.querySelector(".".concat(blockClass, "__list--container"));
       var hasScrollBar = (scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.scrollHeight) > (scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.clientHeight);
       var scrollBarValue = hasScrollBar ? 0 : scrollBarSize;
       setScrollBarSizeValue(scrollBarValue);

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

@@ -54,7 +54,7 @@ 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/lib/components/DataSpreadsheet/utils/checkSelectedHeaderCell.js

@@ -17,10 +17,10 @@ var checkSelectedHeaderCell = function checkSelectedHeaderCell(headerIndex, sele
   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/lib/components/DataSpreadsheet/utils/handleCellDeletion.js

@@ -32,10 +32,10 @@ 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);
   (0, _rangeWithCallback.rangeWithCallback)(lowestColumnIndex, greatestColumnIndex, function (columnIndex) {
     (0, _rangeWithCallback.rangeWithCallback)(lowestRowIndex, greatestRowIndex, function (rowIndex) {
       var cellProps = rows[rowIndex].cells[columnIndex];

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

@@ -98,7 +98,7 @@ var handleHeaderCellSelection = function handleHeaderCellSelection(_ref2) {
       return [].concat((0, _toConsumableArray2.default)(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;
@@ -118,7 +118,7 @@ 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/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js

@@ -42,7 +42,7 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
     return /*#__PURE__*/_react.default.createElement(_react2.TableHeader, (0, _extends2.default)({}, header.getHeaderProps({
       role: false
     }), {
-      className: (0, _classnames.default)((_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__resizableColumn"), header.getResizerProps), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__isResizing"), header.isResizing), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__sortableColumn"), header.canSort), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__isSorted"), header.isSorted), _cx), header.getHeaderProps().className),
+      className: (0, _classnames.default)((_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__resizableColumn"), header.getResizerProps), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__isResizing"), header.isResizing), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__sortableColumn"), datagridState.isTableSortable), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__isSorted"), header.isSorted), _cx), header.getHeaderProps().className),
       key: header.id
     }), header.render('Header'), header.getResizerProps && /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, header.getResizerProps(), {
       className: "".concat(blockClass, "__resizer")

package/lib/components/Datagrid/Datagrid/DatagridRow.js

@@ -58,9 +58,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"), (0, _layout.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"), (0, _layout.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"), (0, _layout.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"), (0, _layout.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/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js

@@ -39,17 +39,17 @@ 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.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_react2.Checkbox, {
       wrapperClassName: "".concat(blockClass, "__customize-columns-checkbox-wrapper"),
@@ -60,8 +60,8 @@ 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.default.createElement("div", {
@@ -78,7 +78,7 @@ 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/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js

@@ -294,7 +294,7 @@ 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) {
@@ -332,9 +332,9 @@ var InlineEditCell = function InlineEditCell(_ref) {
   var renderDateCell = function renderDateCell() {
     var _config$inputProps, _outerButtonElement$c;
     var datePickerPreparedProps = (0, _propsHelper.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.default.createElement(_react2.DatePicker, (0, _extends2.default)({}, 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
@@ -344,7 +344,7 @@ 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);
@@ -376,7 +376,7 @@ 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);
@@ -448,7 +448,7 @@ var InlineEditCell = function InlineEditCell(_ref) {
       "data-inline-type": type,
       onClick: !nonEditCell ? handleInlineCellClick : addActiveState,
       onKeyDown: !nonEditCell ? handleKeyDown : null,
-      className: (0, _classnames.default)("".concat(blockClass, "__inline-edit--outer-cell-button"), (_cx3 = {}, (0, _defineProperty2.default)(_cx3, "".concat(blockClass, "__inline-edit--outer-cell-button--").concat(rowSize), rowSize), (0, _defineProperty2.default)(_cx3, "".concat(blockClass, "__inline-edit--outer-cell-button--lg"), !rowSize), (0, _defineProperty2.default)(_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: (0, _classnames.default)("".concat(blockClass, "__inline-edit--outer-cell-button"), (_cx3 = {}, (0, _defineProperty2.default)(_cx3, "".concat(blockClass, "__inline-edit--outer-cell-button--").concat(rowSize), rowSize), (0, _defineProperty2.default)(_cx3, "".concat(blockClass, "__inline-edit--outer-cell-button--lg"), !rowSize), (0, _defineProperty2.default)(_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.default.createElement(_InlineEditButton.InlineEditButton, {
       isActiveCell: cellId === activeCellId,
       renderIcon: setRenderIcon(),

package/lib/components/Datagrid/useActionsColumn.js

@@ -33,7 +33,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;
@@ -62,11 +71,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.default.createElement("div", {
-                className: (0, _classnames.default)("".concat(blockClass, "__actions-column-button"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__disabled-row-action-button"), selectedFlatRows && selectedFlatRows.length && selectedRowId && selectedRowId.length)),
+                className: (0, _classnames.default)("".concat(blockClass, "__actions-column-button"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__disabled-row-action-button"), getDisabledState(row.index))),
                 key: "".concat(itemText, "__").concat(index)
               }, /*#__PURE__*/_react.default.createElement(_react2.OverflowMenu, (0, _extends2.default)({}, rest, {
                 renderIcon: icon,
@@ -74,9 +80,9 @@ var useActionsColumn = function useActionsColumn(hooks) {
                 light: true,
                 iconDescription: itemText,
                 kind: "ghost",
-                className: (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(blockClass, "__disabled-row-action"), selectedFlatRows && selectedFlatRows.length && selectedRowId && selectedRowId.length)),
+                className: (0, _classnames.default)((0, _defineProperty2.default)({}, "".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;
                   }