@carbon/ibm-products 2.19.2 → 2.21.0

package/es/components/Saving/Saving.js

@@ -18,7 +18,7 @@ import { getDevtoolsProps } from '../../global/js/utils/devtools';
 import { pkg } from '../../settings';
 var componentName = 'Saving';
 export var Saving = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var _statusObj, _statusObj$status, _statusObj$status2, _statusObj$status3, _statusObj$status4;
+  var _statusObj$status, _statusObj$status2, _statusObj$status3, _statusObj$status4;
   var secondaryButtonText = _ref.secondaryButtonText,
     className = _ref.className,
     defaultIconDescription = _ref.defaultIconDescription,
@@ -34,7 +34,7 @@ export var Saving = /*#__PURE__*/forwardRef(function (_ref, ref) {
     successText = _ref.successText,
     type = _ref.type,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var statusObj = (_statusObj = {
+  var statusObj = _defineProperty(_defineProperty(_defineProperty({
     default: {
       text: defaultText,
       iconDescription: defaultIconDescription,
@@ -44,7 +44,7 @@ export var Saving = /*#__PURE__*/forwardRef(function (_ref, ref) {
         }, props));
       }
     }
-  }, _defineProperty(_statusObj, 'in-progress', {
+  }, 'in-progress', {
     text: inProgressText,
     iconDescription: inProgressIconDescription,
     icon: function icon(props) {
@@ -52,7 +52,7 @@ export var Saving = /*#__PURE__*/forwardRef(function (_ref, ref) {
         size: 16
       }, props));
     }
-  }), _defineProperty(_statusObj, "success", {
+  }), "success", {
     text: successText,
     iconDescription: successIconDescription,
     icon: function icon(props) {
@@ -60,7 +60,7 @@ export var Saving = /*#__PURE__*/forwardRef(function (_ref, ref) {
         size: 16
       }, props));
     }
-  }), _defineProperty(_statusObj, "fail", {
+  }), "fail", {
     text: failText,
     iconDescription: failIconDescription,
     icon: function icon(props) {
@@ -68,7 +68,7 @@ export var Saving = /*#__PURE__*/forwardRef(function (_ref, ref) {
         size: 16
       }, props));
     }
-  }), _statusObj);
+  });
   var blockClass = "".concat(pkg.prefix, "--saving");
   return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
     ref: ref,

package/es/components/SidePanel/SidePanel.js

@@ -34,6 +34,7 @@ import { Button } from '@carbon/react';
 import { Close, ArrowLeft } from '@carbon/react/icons';
 import { ActionSet } from '../ActionSet';
 import { overlayVariants, panelVariants } from './motion/variants';
+import pconsole from '../../global/js/utils/pconsole';
 var blockClass = "".concat(pkg.prefix, "--side-panel");
 var componentName = 'SidePanel';
 
@@ -53,7 +54,7 @@ var defaults = {
  * Side panels keep users in-context of a page while performing tasks like navigating, editing, viewing details, or configuring something new.
  */
 export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _window, _ref5, _cx4;
+  var _window;
   var actionToolbarButtons = _ref.actionToolbarButtons,
     actions = _ref.actions,
     _ref$animateTitle = _ref.animateTitle,
@@ -345,7 +346,11 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   useEffect(function () {
     if (open && slideIn) {
       var pageContentElement = document.querySelector(selectorPageContent);
-      pageContentElement.style.inlineSize = 'auto';
+      if (pageContentElement) {
+        pageContentElement.style.inlineSize = 'auto';
+      } else {
+        pconsole.warn('SidePanel prop `selectorPageContent` was not provided a selector that matches any element on your page. If an element is not found, the panel will render as a slide over.');
+      }
       if (placement && placement === 'right' && pageContentElement) {
         pageContentElement.style.marginInlineEnd = 0;
         pageContentElement.style.transition = !reducedMotion.matches ? "margin-inline-end ".concat(moderate02) : null;
@@ -375,9 +380,9 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }
   };
   var primaryActionContainerClassNames = cx(["".concat(blockClass, "__actions-container"), _defineProperty({}, "".concat(blockClass, "__actions-container-condensed"), condensedActions)]);
-  var mainPanelClassNames = cx([blockClass, className, "".concat(blockClass, "__container"), "".concat(blockClass, "__container--").concat(size), (_ref5 = {}, _defineProperty(_ref5, "".concat(blockClass, "__container-right-placement"), placement === 'right'), _defineProperty(_ref5, "".concat(blockClass, "__container-left-placement"), placement === 'left'), _defineProperty(_ref5, "".concat(blockClass, "__container-with-action-toolbar"), actionToolbarButtons && actionToolbarButtons.length), _defineProperty(_ref5, "".concat(blockClass, "__container-without-overlay"), !includeOverlay && !slideIn), _defineProperty(_ref5, "".concat(blockClass, "__container-is-animating"), !animationComplete || !open), _defineProperty(_ref5, "".concat(blockClass, "__container--has-slug"), slug), _ref5)]);
+  var mainPanelClassNames = cx([blockClass, className, "".concat(blockClass, "__container"), "".concat(blockClass, "__container--").concat(size), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__container-right-placement"), placement === 'right'), "".concat(blockClass, "__container-left-placement"), placement === 'left'), "".concat(blockClass, "__container-with-action-toolbar"), actionToolbarButtons && actionToolbarButtons.length), "".concat(blockClass, "__container-without-overlay"), !includeOverlay && !slideIn), "".concat(blockClass, "__container-is-animating"), !animationComplete || !open), "".concat(blockClass, "__container--has-slug"), slug)]);
   var renderHeader = function renderHeader() {
-    var _slug$type, _cx, _cx2;
+    var _slug$type;
     var slugCloseSize = actions && actions.length && /l/.test(size) ? 'md' : 'sm';
     var normalizedSlug;
     if (slug && (slug === null || slug === void 0 || (_slug$type = slug.type) === null || _slug$type === void 0 ? void 0 : _slug$type.displayName) === 'Slug') {
@@ -387,7 +392,7 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       });
     }
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-      className: cx("".concat(blockClass, "__title-container"), (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__on-detail-step"), currentStep > 0), _defineProperty(_cx, "".concat(blockClass, "__on-detail-step-without-title"), currentStep > 0 && !title), _defineProperty(_cx, "".concat(blockClass, "__title-container--no-title-animation"), !animateTitle), _defineProperty(_cx, "".concat(blockClass, "__title-container-is-animating"), !animationComplete || !open), _defineProperty(_cx, "".concat(blockClass, "__title-container-without-title"), !title), _defineProperty(_cx, "".concat(blockClass, "__title-container--reduced-motion"), reducedMotion.matches), _cx))
+      className: cx("".concat(blockClass, "__title-container"), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__on-detail-step"), currentStep > 0), "".concat(blockClass, "__on-detail-step-without-title"), currentStep > 0 && !title), "".concat(blockClass, "__title-container--no-title-animation"), !animateTitle), "".concat(blockClass, "__title-container-is-animating"), !animationComplete || !open), "".concat(blockClass, "__title-container-without-title"), !title), "".concat(blockClass, "__title-container--reduced-motion"), reducedMotion.matches))
     }, currentStep > 0 && /*#__PURE__*/React.createElement(Button, {
       "aria-label": navigationBackIconDescription,
       kind: "ghost",
@@ -419,7 +424,7 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       onClick: onRequestClose,
       ref: sidePanelCloseRef
     })), subtitle && /*#__PURE__*/React.createElement("p", {
-      className: cx("".concat(blockClass, "__subtitle-text"), (_cx2 = {}, _defineProperty(_cx2, "".concat(blockClass, "__subtitle-text-no-animation"), !animateTitle), _defineProperty(_cx2, "".concat(blockClass, "__subtitle-text-no-animation-no-action-toolbar"), !animateTitle && (!actionToolbarButtons || !actionToolbarButtons.length)), _defineProperty(_cx2, "".concat(blockClass, "__subtitle-text-is-animating"), !animationComplete && animateTitle), _defineProperty(_cx2, "".concat(blockClass, "__subtitle-without-title"), !title), _cx2))
+      className: cx("".concat(blockClass, "__subtitle-text"), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__subtitle-text-no-animation"), !animateTitle), "".concat(blockClass, "__subtitle-text-no-animation-no-action-toolbar"), !animateTitle && (!actionToolbarButtons || !actionToolbarButtons.length)), "".concat(blockClass, "__subtitle-text-is-animating"), !animationComplete && animateTitle), "".concat(blockClass, "__subtitle-without-title"), !title))
     }, subtitle), actionToolbarButtons && actionToolbarButtons.length && /*#__PURE__*/React.createElement("div", {
       className: cx("".concat(blockClass, "__action-toolbar"), _defineProperty({}, "".concat(blockClass, "__action-toolbar-no-animation"), !animateTitle))
     }, actionToolbarButtons.map(function (_ref6) {
@@ -484,7 +489,7 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className: "".concat(blockClass, "__visually-hidden")
   }, "Focus sentinel"), !animateTitle && renderHeader(), /*#__PURE__*/React.createElement("div", {
     ref: sidePanelInnerRef,
-    className: cx("".concat(blockClass, "__inner-content"), (_cx4 = {}, _defineProperty(_cx4, "".concat(blockClass, "__static-inner-content"), !animateTitle), _defineProperty(_cx4, "".concat(blockClass, "__static-inner-content-no-actions"), !animateTitle && !(actions !== null && actions !== void 0 && actions.length)), _defineProperty(_cx4, "".concat(blockClass, "__inner-content-with-actions"), actions && actions.length), _cx4))
+    className: cx("".concat(blockClass, "__inner-content"), _defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__static-inner-content"), !animateTitle), "".concat(blockClass, "__static-inner-content-no-actions"), !animateTitle && !(actions !== null && actions !== void 0 && actions.length)), "".concat(blockClass, "__inner-content-with-actions"), actions && actions.length))
   }, animateTitle && renderHeader(), /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__body-content")
   }, children), /*#__PURE__*/React.createElement(ActionSet, {

package/es/components/TagSet/TagSetOverflow.js

@@ -82,7 +82,6 @@ export var TagSetOverflow = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, overflowTags.filter(function (_, index) {
     return overflowTags.length > allTagsModalSearchThreshold ? index < allTagsModalSearchThreshold : index <= allTagsModalSearchThreshold;
   }).map(function (tag, index) {
-    var _cx2;
     var tagProps = {};
     if (overflowType === 'tag') {
       tagProps.type = 'high-contrast';
@@ -91,7 +90,7 @@ export var TagSetOverflow = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       tagProps.filter = false;
     }
     return /*#__PURE__*/React.createElement("li", {
-      className: cx("".concat(blockClass, "__tag-item"), (_cx2 = {}, _defineProperty(_cx2, "".concat(blockClass, "__tag-item--default"), overflowType === 'default'), _defineProperty(_cx2, "".concat(blockClass, "__tag-item--tag"), overflowType === 'tag'), _cx2)),
+      className: cx("".concat(blockClass, "__tag-item"), _defineProperty(_defineProperty({}, "".concat(blockClass, "__tag-item--default"), overflowType === 'default'), "".concat(blockClass, "__tag-item--tag"), overflowType === 'tag')),
       key: index
     }, /*#__PURE__*/React.cloneElement(tag, tagProps));
   })), overflowTags.length > allTagsModalSearchThreshold && /*#__PURE__*/React.createElement(Link, {

package/es/components/Tearsheet/Tearsheet.js

@@ -112,6 +112,11 @@ Tearsheet.propTypes = _objectSpread({
     // we duplicate this Button prop to improve the DocGen here
     onClick: Button.propTypes.onClick
   })))]),
+  /**
+   * The aria-label for the tearsheet, which is optional.
+   * if it is not passed, the title will be used as the aria-label.
+   */
+  ariaLabel: PropTypes.string,
   /**
    * An optional class or classes to be added to the outermost element.
    */

package/es/components/Tearsheet/TearsheetNarrow.js

@@ -100,6 +100,11 @@ TearsheetNarrow.propTypes = _objectSpread({
     // we duplicate this Button prop to improve the DocGen here
     onClick: Button.propTypes.onClick
   })))]),
+  /**
+   * The aria-label for the tearsheet, which is optional.
+   * if it is not passed, the title will be used as the aria-label.
+   */
+  ariaLabel: PropTypes.string,
   /**
    * An optional class or classes to be added to the outermost element.
    */

package/es/components/Tearsheet/TearsheetShell.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["actions", "children", "className", "closeIconDescription", "description", "hasCloseIcon", "headerActions", "influencer", "influencerPosition", "influencerWidth", "label", "navigation", "onClose", "open", "selectorPrimaryFocus", "size", "portalTarget", "title", "verticalPosition"];
+var _excluded = ["actions", "ariaLabel", "children", "className", "closeIconDescription", "description", "hasCloseIcon", "headerActions", "influencer", "influencerPosition", "influencerWidth", "label", "navigation", "onClose", "open", "selectorPrimaryFocus", "size", "portalTarget", "title", "verticalPosition"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
@@ -65,6 +65,7 @@ export var tearsheetHasCloseIcon = function tearsheetHasCloseIcon(actions, hasCl
  * */
 export var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var actions = _ref.actions,
+    ariaLabel = _ref.ariaLabel,
     children = _ref.children,
     className = _ref.className,
     closeIconDescription = _ref.closeIconDescription,
@@ -122,7 +123,7 @@ export var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }
   handleStackChange.checkFocus = function () {
     // if we are now the topmost tearsheet, ensure we have focus
-    if (position === depth && modalRef.current && !modalRef.current.contains(document.activeElement)) {
+    if (open && position === depth && modalRef.current && !modalRef.current.contains(document.activeElement)) {
       handleStackChange.claimFocus();
     }
   };
@@ -179,7 +180,6 @@ export var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }
   }
   if (position <= depth) {
-    var _cx, _ref2, _cx3, _cx5, _cx6;
     // Include a modal header if and only if one or more of these is given.
     // We can't use a Wrap for the ModalHeader because ComposedModal requires
     // the direct child to be the ModalHeader instance.
@@ -188,11 +188,11 @@ export var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     // Include an ActionSet if and only if one or more actions is given.
     var includeActions = actions && (actions === null || actions === void 0 ? void 0 : actions.length) > 0;
     return renderPortalUse( /*#__PURE__*/React.createElement(ComposedModal, _extends({}, rest, {
-      "aria-label": getNodeTextContent(title),
-      className: cx(bc, className, (_cx = {}, _defineProperty(_cx, "".concat(bc, "--stacked-").concat(position, "-of-").concat(depth),
+      "aria-label": ariaLabel || getNodeTextContent(title),
+      className: cx(bc, className, _defineProperty(_defineProperty(_defineProperty({}, "".concat(bc, "--stacked-").concat(position, "-of-").concat(depth),
       // Don't apply this on the initial open of a single tearsheet.
-      depth > 1 || depth === 1 && prevDepth.current > 1), _defineProperty(_cx, "".concat(bc, "--wide"), wide), _defineProperty(_cx, "".concat(bc, "--narrow"), !wide), _cx)),
-      style: (_ref2 = {}, _defineProperty(_ref2, "--".concat(bc, "--stacking-scale-factor-single"), (width - 32) / width), _defineProperty(_ref2, "--".concat(bc, "--stacking-scale-factor-double"), (width - 64) / width), _ref2),
+      depth > 1 || depth === 1 && prevDepth.current > 1), "".concat(bc, "--wide"), wide), "".concat(bc, "--narrow"), !wide)),
+      style: _defineProperty(_defineProperty({}, "--".concat(bc, "--stacking-scale-factor-single"), (width - 32) / width), "--".concat(bc, "--stacking-scale-factor-double"), (width - 64) / width),
       containerClassName: cx("".concat(bc, "__container"), _defineProperty({}, "".concat(bc, "__container--lower"), verticalPosition === 'lower')),
       onClose: onClose,
       open: open,
@@ -203,7 +203,7 @@ export var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       selectorsFloatingMenus: [".".concat(carbonPrefix, "--overflow-menu-options"), ".".concat(carbonPrefix, "--tooltip"), '.flatpickr-calendar', ".".concat(bc, "__container")],
       size: "sm"
     }), includeHeader && /*#__PURE__*/React.createElement(ModalHeader, {
-      className: cx("".concat(bc, "__header"), (_cx3 = {}, _defineProperty(_cx3, "".concat(bc, "__header--with-close-icon"), effectiveHasCloseIcon), _defineProperty(_cx3, "".concat(bc, "__header--with-nav"), navigation), _cx3)),
+      className: cx("".concat(bc, "__header"), _defineProperty(_defineProperty({}, "".concat(bc, "__header--with-close-icon"), effectiveHasCloseIcon), "".concat(bc, "__header--with-nav"), navigation)),
       closeClassName: cx(_defineProperty({}, "".concat(bc, "__header--no-close-icon"), !effectiveHasCloseIcon)),
       closeModal: onClose,
       iconDescription: closeIconDescription
@@ -228,7 +228,7 @@ export var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       element: ModalBody,
       className: "".concat(bc, "__body")
     }, /*#__PURE__*/React.createElement(Wrap, {
-      className: cx((_cx5 = {}, _defineProperty(_cx5, "".concat(bc, "__influencer"), true), _defineProperty(_cx5, "".concat(bc, "__influencer--wide"), influencerWidth === 'wide'), _cx5)),
+      className: cx(_defineProperty(_defineProperty({}, "".concat(bc, "__influencer"), true), "".concat(bc, "__influencer--wide"), influencerWidth === 'wide')),
       neverRender: influencerPosition === 'right'
     }, influencer), /*#__PURE__*/React.createElement(Wrap, {
       className: "".concat(bc, "__right")
@@ -239,7 +239,7 @@ export var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       className: "".concat(bc, "__content"),
       alwaysRender: influencer && influencerPosition === 'right'
     }, children), /*#__PURE__*/React.createElement(Wrap, {
-      className: cx((_cx6 = {}, _defineProperty(_cx6, "".concat(bc, "__influencer"), true), _defineProperty(_cx6, "".concat(bc, "__influencer--wide"), influencerWidth === 'wide'), _cx6)),
+      className: cx(_defineProperty(_defineProperty({}, "".concat(bc, "__influencer"), true), "".concat(bc, "__influencer--wide"), influencerWidth === 'wide')),
       neverRender: influencerPosition !== 'right'
     }, influencer)), includeActions && /*#__PURE__*/React.createElement(Wrap, {
       className: "".concat(bc, "__button-container")

package/es/components/WebTerminal/WebTerminal.js

@@ -44,7 +44,6 @@ var defaults = {
  * The `WebTerminal` is prompted by the user and is persistent until dismissed. The purpose of a web terminal is to provide users with the ability to type commands manually instead of using the GUI.
  */
 export var WebTerminal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _ref3;
   var _ref$actions = _ref.actions,
     actions = _ref$actions === void 0 ? defaults.actions : _ref$actions,
     children = _ref.children,
@@ -108,7 +107,7 @@ export var WebTerminal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   };
   return shouldRender ? /*#__PURE__*/React.createElement("div", _extends({}, _objectSpread(_objectSpread({}, rest), getDevtoolsProps(componentName)), {
     ref: ref,
-    className: cx([blockClass, className, (_ref3 = {}, _defineProperty(_ref3, "".concat(blockClass, "--open"), open), _defineProperty(_ref3, "".concat(blockClass, "--closed"), !open), _ref3)]),
+    className: cx([blockClass, className, _defineProperty(_defineProperty({}, "".concat(blockClass, "--open"), open), "".concat(blockClass, "--closed"), !open)]),
     style: {
       animation: !prefersReducedMotion && webTerminalAnimationName
     },

package/lib/components/ActionSet/ActionSet.js

@@ -33,7 +33,6 @@ var componentName = 'ActionSet';
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
 
 var ActionSetButton = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
-  var _ref2;
   var className = _ref.className,
     disabled = _ref.disabled,
     kind = _ref.kind,
@@ -44,7 +43,7 @@ var ActionSetButton = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(_react2.Button, (0, _extends2.default)({}, rest, {
     isExpressive: isExpressive,
-    className: (0, _classnames.default)(className, ["".concat(blockClass, "__action-button"), (_ref2 = {}, (0, _defineProperty2.default)(_ref2, "".concat(blockClass, "__action-button--ghost"), kind === 'ghost' || kind === 'danger--ghost'), (0, _defineProperty2.default)(_ref2, "".concat(blockClass, "__action-button--expressive"), isExpressive), _ref2)]),
+    className: (0, _classnames.default)(className, ["".concat(blockClass, "__action-button"), (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(blockClass, "__action-button--ghost"), kind === 'ghost' || kind === 'danger--ghost'), "".concat(blockClass, "__action-button--expressive"), isExpressive)]),
     disabled: disabled || loading || false,
     kind: kind,
     ref: ref
@@ -79,7 +78,7 @@ var defaults = {
  * right.
  */
 var ActionSet = exports.ActionSet = /*#__PURE__*/_react.default.forwardRef(function (_ref3, ref) {
-  var _actions$slice, _cx;
+  var _actions$slice;
   var actions = _ref3.actions,
     buttonSize = _ref3.buttonSize,
     className = _ref3.className,
@@ -109,7 +108,7 @@ var ActionSet = exports.ActionSet = /*#__PURE__*/_react.default.forwardRef(funct
     return (buttonOrder(action1.kind || defaultKind) - buttonOrder(action2.kind || defaultKind)) * (stacking ? -1 : 1);
   });
   return /*#__PURE__*/_react.default.createElement(_react2.ButtonSet, (0, _extends2.default)({}, rest, {
-    className: (0, _classnames.default)(blockClass, className, (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--row-single"), !stacking && buttons.length === 1), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--row-double"), !stacking && buttons.length === 2), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--row-triple"), !stacking && buttons.length === 3), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--row-quadruple"), !stacking && buttons.length >= 4), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--stacking"), stacking), _cx), "".concat(blockClass, "--").concat(size)),
+    className: (0, _classnames.default)(blockClass, className, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(blockClass, "--row-single"), !stacking && buttons.length === 1), "".concat(blockClass, "--row-double"), !stacking && buttons.length === 2), "".concat(blockClass, "--row-triple"), !stacking && buttons.length === 3), "".concat(blockClass, "--row-quadruple"), !stacking && buttons.length >= 4), "".concat(blockClass, "--stacking"), stacking), "".concat(blockClass, "--").concat(size)),
     ref: ref,
     role: "presentation",
     stacked: stacking

package/lib/components/AddSelect/AddSelectBody.js

@@ -40,7 +40,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 var blockClass = "".concat(_settings.pkg.prefix, "--add-select");
 var componentName = 'AddSelectBody';
 var AddSelectBody = exports.AddSelectBody = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
-  var _cx, _path$;
+  var _path$;
   var className = _ref.className,
     clearFiltersText = _ref.clearFiltersText,
     closeIconDescription = _ref.closeIconDescription,
@@ -135,7 +135,7 @@ var AddSelectBody = exports.AddSelectBody = /*#__PURE__*/(0, _react.forwardRef)(
     resetState();
     onClose();
   };
-  var tearsheetClassnames = (0, _classnames.default)(className, blockClass, (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__single"), !multi), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__multi"), multi), _cx));
+  var tearsheetClassnames = (0, _classnames.default)(className, blockClass, (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(blockClass, "__single"), !multi), "".concat(blockClass, "__multi"), multi));
   var globalFilterKeys = Object.keys(appliedGlobalFilters);
   var globalFiltersApplied = globalFilterKeys.length > 0;
 

package/lib/components/AddSelect/AddSelectRow.js

@@ -28,7 +28,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 var blockClass = "".concat(_settings.pkg.prefix, "--add-select__selections");
 var componentName = 'AddSelectList';
 var AddSelectRow = exports.AddSelectRow = function AddSelectRow(_ref) {
-  var _modifiers$options, _cx;
+  var _modifiers$options;
   var appliedModifiers = _ref.appliedModifiers,
     displayMetalPanel = _ref.displayMetalPanel,
     index = _ref.index,
@@ -132,7 +132,7 @@ var AddSelectRow = exports.AddSelectRow = function AddSelectRow(_ref) {
   var selected = isSelected();
   var expanded = parentSelected === item.id;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)("".concat(blockClass, "-row"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "-row--selected"), isSelected()), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "-row-meta--selected"), isInMetaPanel(item.id)), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "-row--active"), expanded), _cx)),
+    className: (0, _classnames.default)("".concat(blockClass, "-row"), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(blockClass, "-row--selected"), isSelected()), "".concat(blockClass, "-row-meta--selected"), isInMetaPanel(item.id)), "".concat(blockClass, "-row--active"), expanded)),
     onKeyDown: onSelectKeyDown,
     tabIndex: tabIndex,
     ref: ref,

package/lib/components/Card/Card.js

@@ -166,11 +166,10 @@ var Card = exports.Card = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, re
     return icons;
   };
   var getCardProps = function getCardProps() {
-    var _cx;
     var clickable = hasClickEvent && !productive || hasClickEvent && productive && clickZone === 'one';
     var cardProps = _objectSpread(_objectSpread({}, rest), {}, {
       ref: ref,
-      className: (0, _classnames.default)(blockClass, (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__productive"), productive), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__clickable"), clickable), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__media-left"), mediaPosition === 'left'), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--has-slug"), clickable && slug === true || (0, _typeof2.default)(slug) === 'object'), _cx), className)
+      className: (0, _classnames.default)(blockClass, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(blockClass, "__productive"), productive), "".concat(blockClass, "__clickable"), clickable), "".concat(blockClass, "__media-left"), mediaPosition === 'left'), "".concat(blockClass, "--has-slug"), clickable && slug === true || (0, _typeof2.default)(slug) === 'object'), className)
     }, clickable && clickableProps);
     return cardProps;
   };

package/lib/components/Card/CardHeader.js

@@ -24,7 +24,6 @@ var defaults = {
   titleSize: 'default'
 };
 var CardHeader = exports.CardHeader = function CardHeader(_ref) {
-  var _cx;
   var actions = _ref.actions,
     noActionIcons = _ref.noActionIcons,
     onPrimaryButtonClick = _ref.onPrimaryButtonClick,
@@ -50,7 +49,7 @@ var CardHeader = exports.CardHeader = function CardHeader(_ref) {
   var carbonPrefix = (0, _react2.usePrefix)();
   var blockClass = "".concat(_settings.pkg.prefix, "--card");
   var headerClass = "".concat(blockClass, "__header");
-  var headerClasses = (0, _classnames.default)(headerClass, (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(headerClass, "-label-only"), label && !title && !description), (0, _defineProperty2.default)(_cx, "".concat(headerClass, "-has-label"), !!label), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__title-lg"), titleSize === 'large'), _cx));
+  var headerClasses = (0, _classnames.default)(headerClass, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(headerClass, "-label-only"), label && !title && !description), "".concat(headerClass, "-has-label"), !!label), "".concat(blockClass, "__title-lg"), titleSize === 'large'));
   var actionGhostButton = "".concat(blockClass, "__actions-header-ghost-button");
   var actionGhostButtonClass = (0, _classnames.default)(actionGhostButton, (0, _defineProperty2.default)({}, "".concat(actionGhostButton, "--only"), noActionIcons));
   var hollowSlugIcon = /*#__PURE__*/_react.default.createElement("svg", {

package/lib/components/CreateFullPage/CreateFullPageStep.js

@@ -35,7 +35,6 @@ var defaults = {
   includeStep: true
 };
 var CreateFullPageStep = exports.CreateFullPageStep = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
-  var _cx;
   var children = _ref.children,
     className = _ref.className,
     subtitle = _ref.subtitle,
@@ -95,7 +94,7 @@ var CreateFullPageStep = exports.CreateFullPageStep = /*#__PURE__*/(0, _react.fo
   }; // Half.
 
   return stepsContext ? /*#__PURE__*/_react.default.createElement("section", (0, _extends2.default)({}, rest, {
-    className: (0, _classnames.default)(blockClass, className, (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__step--hidden-step"), stepNumber !== (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__step--visible-step"), stepNumber === (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)), _cx)),
+    className: (0, _classnames.default)(blockClass, className, (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(blockClass, "__step--hidden-step"), stepNumber !== (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)), "".concat(blockClass, "__step--visible-step"), stepNumber === (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep))),
     ref: ref
   }), /*#__PURE__*/_react.default.createElement(_react2.Grid, null, /*#__PURE__*/_react.default.createElement(_react2.Column, span, /*#__PURE__*/_react.default.createElement(_react2.Grid, null, /*#__PURE__*/_react.default.createElement(_react2.Column, (0, _extends2.default)({
     className: "".concat(blockClass, "-title"),

package/lib/components/CreateTearsheet/CreateTearsheetStep.js

@@ -36,7 +36,6 @@ var defaults = {
   includeStep: true
 };
 var CreateTearsheetStep = exports.CreateTearsheetStep = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
-  var _cx;
   var children = _ref.children,
     className = _ref.className,
     description = _ref.description,
@@ -112,7 +111,7 @@ var CreateTearsheetStep = exports.CreateTearsheetStep = /*#__PURE__*/(0, _react.
     return null;
   };
   return stepsContext ? /*#__PURE__*/_react.default.createElement(_react2.Grid, (0, _extends2.default)({}, rest, {
-    className: (0, _classnames.default)(blockClass, className, (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__step--hidden-step"), stepNumber !== (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__step--visible-step"), stepNumber === (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)), _cx)),
+    className: (0, _classnames.default)(blockClass, className, (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(blockClass, "__step--hidden-step"), stepNumber !== (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)), "".concat(blockClass, "__step--visible-step"), stepNumber === (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep))),
     ref: ref
   }), /*#__PURE__*/_react.default.createElement(_react2.Column, {
     xlg: 12,

package/lib/components/DataSpreadsheet/DataSpreadsheet.js

@@ -68,7 +68,6 @@ var defaults = {
  * DataSpreadsheet: used to organize and display large amounts of structured data, separated by columns and rows in a grid-like format.
  */
 var DataSpreadsheet = exports.DataSpreadsheet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
-  var _cx;
   var _ref$cellSize = _ref.cellSize,
     cellSize = _ref$cellSize === void 0 ? defaults.cellSize : _ref$cellSize,
     className = _ref.className,
@@ -710,7 +709,7 @@ var DataSpreadsheet = exports.DataSpreadsheet = /*#__PURE__*/_react.default.forw
     handleActiveCellMouseEnterCallback(selectionAreas, clickAndHoldActive);
   }, [clickAndHoldActive, selectionAreas, handleActiveCellMouseEnterCallback]);
   return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, getTableProps(), (0, _devtools.getDevtoolsProps)(componentName), {
-    className: (0, _classnames.default)(blockClass, className, "".concat(blockClass, "--interactive-cell-element"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__container-has-focus"), containerHasFocus), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__").concat(theme), theme === 'dark'), _cx)),
+    className: (0, _classnames.default)(blockClass, className, "".concat(blockClass, "--interactive-cell-element"), (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(blockClass, "__container-has-focus"), containerHasFocus), "".concat(blockClass, "__").concat(theme), theme === 'dark')),
     ref: spreadsheetRef,
     role: "grid",
     tabIndex: 0,

package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js

@@ -364,7 +364,6 @@ var DataSpreadsheetBody = exports.DataSpreadsheetBody = /*#__PURE__*/(0, _react.
       style = _ref3.style;
     var row = rows[index];
     if (rows && rows.length) {
-      var _cx;
       prepareRow(row);
       return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, row.getRowProps({
         style: style
@@ -383,7 +382,7 @@ var DataSpreadsheetBody = exports.DataSpreadsheetBody = /*#__PURE__*/(0, _react.
         "data-column-index": "header",
         type: "button",
         onClick: handleRowHeaderClick(index),
-        className: (0, _classnames.default)("".concat(blockClass, "__td"), "".concat(blockClass, "__td-th"), "".concat(blockClass, "--interactive-cell-element"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__td-th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === index || (0, _checkActiveHeaderCell.checkActiveHeaderCell)(index, selectionAreas, 'row')), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__td-th--selected-header"), (0, _checkSelectedHeaderCell.checkSelectedHeaderCell)(index, selectionAreas, 'row', columns)), _cx)),
+        className: (0, _classnames.default)("".concat(blockClass, "__td"), "".concat(blockClass, "__td-th"), "".concat(blockClass, "--interactive-cell-element"), (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(blockClass, "__td-th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === index || (0, _checkActiveHeaderCell.checkActiveHeaderCell)(index, selectionAreas, 'row')), "".concat(blockClass, "__td-th--selected-header"), (0, _checkSelectedHeaderCell.checkSelectedHeaderCell)(index, selectionAreas, 'row', columns))),
         style: {
           width: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth
         }

package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js

@@ -176,7 +176,6 @@ var DataSpreadsheetHeader = exports.DataSpreadsheetHeader = /*#__PURE__*/(0, _re
       onClick: handleSelectAllClick,
       className: (0, _classnames.default)("".concat(blockClass, "__th"), "".concat(blockClass, "--interactive-cell-element"), "".concat(blockClass, "__th--select-all"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'header' && (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'header'))
     }, "\xA0")), headerGroup.headers.map(function (column, index) {
-      var _cx2;
       var selectedHeader = (0, _checkSelectedHeaderCell.checkSelectedHeaderCell)(index, selectionAreas, 'column', rows);
       return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
         key: "column_".concat(index),
@@ -196,7 +195,7 @@ var DataSpreadsheetHeader = exports.DataSpreadsheetHeader = /*#__PURE__*/(0, _re
           height: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeight,
           width: (column === null || column === void 0 ? void 0 : column.width) || (defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.width)
         },
-        className: (0, _classnames.default)("".concat(blockClass, "__th"), "".concat(blockClass, "--interactive-cell-element"), (_cx2 = {}, (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "__th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === index || (0, _checkActiveHeaderCell.checkActiveHeaderCell)(index, selectionAreas, 'column')), (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "__th--selected-header"), selectedHeader), (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "__th--selected-header-reorder-active"), selectedHeaderReorderActive), _cx2)),
+        className: (0, _classnames.default)("".concat(blockClass, "__th"), "".concat(blockClass, "--interactive-cell-element"), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(blockClass, "__th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === index || (0, _checkActiveHeaderCell.checkActiveHeaderCell)(index, selectionAreas, 'column')), "".concat(blockClass, "__th--selected-header"), selectedHeader), "".concat(blockClass, "__th--selected-header-reorder-active"), selectedHeaderReorderActive)),
         type: "button"
       }, column.render('Header')));
     }));

package/lib/components/Datagrid/Datagrid/DatagridContent.js

@@ -39,7 +39,6 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 var gcClass = "".concat(blockClass, "__grid-container");
 var DatagridContent = exports.DatagridContent = function DatagridContent(_ref) {
-  var _cx5;
   var datagridState = _ref.datagridState,
     title = _ref.title;
   var _useContext = (0, _react.useContext)(_InlineEditContext.InlineEditContext),
@@ -142,8 +141,6 @@ var DatagridContent = exports.DatagridContent = function DatagridContent(_ref) {
   (0, _hooks3.useSubscribeToEventEmitter)(_constants.CLEAR_SINGLE_FILTER, function (id) {
     return (0, _FilterProvider.clearSingleFilter)(id, setAllFilters, state);
   });
-
-  /* istanbul ignore next */
   var renderFilterSummary = function renderFilterSummary() {
     return state.filters.length > 0 && /*#__PURE__*/_react.default.createElement(_FilterSummary.FilterSummary, {
       className: "".concat(blockClass, "__filter-summary"),
@@ -156,15 +153,13 @@ var DatagridContent = exports.DatagridContent = function DatagridContent(_ref) {
     });
   };
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_react2.TableContainer, {
-    className: (0, _classnames.default)("".concat(gcClass), (_cx5 = {}, (0, _defineProperty2.default)(_cx5, "".concat(gcClass, "-active"), gridActive), (0, _defineProperty2.default)(_cx5, "".concat(gcClass, "-active--without-toolbar"), withInlineEdit && !DatagridActions), (0, _defineProperty2.default)(_cx5, "".concat(gcClass, "-inline-edit"), withInlineEdit), (0, _defineProperty2.default)(_cx5, "".concat(blockClass, "__full-height"), withVirtualScroll || fullHeightDatagrid), (0, _defineProperty2.default)(_cx5, "".concat(blockClass, "__with-pagination"), DatagridPagination), (0, _defineProperty2.default)(_cx5, "".concat(blockClass, "__dense-header"), useDenseHeader), _cx5)),
+    className: (0, _classnames.default)("".concat(gcClass), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(gcClass, "-active"), gridActive), "".concat(gcClass, "-active--without-toolbar"), withInlineEdit && !DatagridActions), "".concat(gcClass, "-inline-edit"), withInlineEdit), "".concat(blockClass, "__full-height"), withVirtualScroll || fullHeightDatagrid), "".concat(blockClass, "__with-pagination"), DatagridPagination), "".concat(blockClass, "__dense-header"), useDenseHeader)),
     title: gridTitle,
     description: gridDescription
   }, /*#__PURE__*/_react.default.createElement(_DatagridToolbar.default, datagridState), /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)("".concat(blockClass, "__table-container"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__table-container--filter-open"), panelOpen)),
     ref: gridAreaRef
-  }, (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'panel' && /*#__PURE__*/_react.default.createElement(_Filtering.FilterPanel, (0, _extends2.default)({
-    updateMethod: "batch"
-  }, getFilterFlyoutProps(), {
+  }, (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'panel' && /*#__PURE__*/_react.default.createElement(_Filtering.FilterPanel, (0, _extends2.default)({}, getFilterFlyoutProps(), {
     title: filterProps.panelTitle,
     filterSections: filterProps.sections,
     autoHideFilters: filterProps.autoHideFilters,

package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js

@@ -55,6 +55,7 @@ var ResizeHeader = function ResizeHeader(_ref) {
     dispatch = _ref.dispatch,
     onColResizeEnd = _ref.onColResizeEnd,
     resizerAriaLabel = _ref.resizerAriaLabel;
+  // eslint-disable-next-line no-unused-vars
   var role = resizerProps.role,
     headerProps = (0, _objectWithoutProperties2.default)(resizerProps, _excluded);
   var mouseDownHandler = function mouseDownHandler(evt) {
@@ -80,9 +81,7 @@ var ResizeHeader = function ResizeHeader(_ref) {
   var keyUpHandler = function keyUpHandler() {
     (0, _stateReducer.handleColumnResizeEndEvent)(dispatch, onColResizeEnd, header.id, true);
   };
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({}, headerProps, role === 'separator' && {
-    role: role
-  }, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({}, headerProps, {
     onMouseDown: mouseDownHandler,
     onKeyDown: keyDownHandler,
     onKeyUp: keyUpHandler,
@@ -137,16 +136,14 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
     headerGroupClassName = _headerGroup$getHeade.className,
     role = _headerGroup$getHeade.role,
     headerGroupProps = (0, _objectWithoutProperties2.default)(_headerGroup$getHeade, _excluded2);
-  return /*#__PURE__*/_react.default.createElement(_react2.TableRow, (0, _extends2.default)({}, headerGroupProps, role === 'row' && {
-    role: role
-  }, {
+  return /*#__PURE__*/_react.default.createElement(_react2.TableRow, (0, _extends2.default)({}, headerGroupProps, {
     className: (0, _classnames.default)("".concat(blockClass, "__head"), headerGroupClassName),
     ref: headRef
   }), datagridState.headers.filter(function (_ref3) {
     var isVisible = _ref3.isVisible;
     return isVisible;
   }).map(function (header, index) {
-    var _header$getResizerPro, _cx;
+    var _header$getResizerPro;
     if (header.id === _commonColumnIds.selectionColumnId) {
       // render directly without the wrapper TableHeader
       return header.render('Header', {
@@ -169,12 +166,10 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
       headerProps = (0, _objectWithoutProperties2.default)(_header$getHeaderProp, _excluded3);
     var resizerProps = header === null || header === void 0 || (_header$getResizerPro = header.getResizerProps) === null || _header$getResizerPro === void 0 ? void 0 : _header$getResizerPro.call(header);
     return /*#__PURE__*/_react.default.createElement(_react2.TableHeader, (0, _extends2.default)({}, headerProps, {
-      className: (0, _classnames.default)(headerClassName, (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__resizableColumn"), resizerProps), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__isResizing"), header.isResizing), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__sortableColumn"), datagridState.isTableSortable && header.id !== 'spacer'), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__isSorted"), header.isSorted), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__header-actions-column"), header.isAction), _cx)),
+      className: (0, _classnames.default)(headerClassName, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(blockClass, "__resizableColumn"), resizerProps), "".concat(blockClass, "__isResizing"), header.isResizing), "".concat(blockClass, "__sortableColumn"), datagridState.isTableSortable && header.id !== 'spacer'), "".concat(blockClass, "__isSorted"), header.isSorted), "".concat(blockClass, "__header-actions-column"), header.isAction)),
       key: header.id,
       "aria-hidden": header.id === 'spacer' && 'true'
-    }, getAccessibilityProps(header), role === 'columnheader' && {
-      role: role
-    }), header.render('Header'), resizerProps && !header.isAction && /*#__PURE__*/_react.default.createElement(ResizeHeader, {
+    }, getAccessibilityProps(header)), header.render('Header'), resizerProps && !header.isAction && /*#__PURE__*/_react.default.createElement(ResizeHeader, {
       resizerProps: resizerProps,
       header: header,
       handleOnMouseDownResize: handleOnMouseDownResize,