@carbon/ibm-products 2.20.0 → 2.22.0

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,
@@ -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/es/components/index.js

@@ -45,4 +45,5 @@ export { EditUpdateCards } from './EditUpdateCards';
 export { Checklist } from './Checklist';
 export { Guidebanner, GuidebannerElement, GuidebannerElementButton, GuidebannerElementLink } from './Guidebanner';
 export { InlineTip, InlineTipButton, InlineTipLink } from './InlineTip';
-export { NonLinearReading } from './NonLinearReading';
+export { NonLinearReading } from './NonLinearReading';
+export { DelimitedList } from './DelimitedList';

package/es/global/js/hooks/useResizeObserver.js

@@ -1,3 +1,4 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /**
  * Copyright IBM Corp. 2023, 2023
@@ -7,6 +8,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  */
 import { useRef, useState, useLayoutEffect, useEffect } from 'react';
 export var useResizeObserver = function useResizeObserver(ref, callback) {
+  var deps = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
   var _useState = useState(-1),
     _useState2 = _slicedToArray(_useState, 2),
     width = _useState2[0],
@@ -38,7 +40,8 @@ export var useResizeObserver = function useResizeObserver(ref, callback) {
       return;
     }
     getInitialSize();
-  }, [width, height, ref]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [width, height, ref].concat(_toConsumableArray(deps)));
   useLayoutEffect(function () {
     if (!(ref !== null && ref !== void 0 && ref.current)) {
       return;
@@ -68,7 +71,7 @@ export var useResizeObserver = function useResizeObserver(ref, callback) {
       observer = null;
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [ref.current]);
+  }, [ref].concat(_toConsumableArray(deps)));
   return {
     width: width,
     height: height

package/es/global/js/package-settings.js

@@ -69,6 +69,7 @@ var defaults = {
     EditTearsheetNarrow: false,
     EditFullPage: false,
     EditUpdateCards: false,
+    DelimitedList: false,
     /* new component flags here - comment used by generate CLI */
 
     // Novice to pro components not yet reviewed and released:

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),
@@ -96,7 +95,7 @@ var DatagridContent = exports.DatagridContent = function DatagridContent(_ref) {
   });
   var renderTable = function renderTable() {
     var _getTableProps;
-    return /*#__PURE__*/_react.default.createElement(_react2.Table, (0, _extends2.default)({}, getTableProps(), {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_react2.Table, (0, _extends2.default)({}, getTableProps(), {
       className: (0, _classnames.default)(withVirtualScroll ? '' : "".concat(blockClass, "__table-simple"), "".concat(blockClass, "__vertical-align-").concat(verticalAlign), (0, _defineProperty2.default)({}, "".concat(blockClass, "__variable-row-height"), variableRowHeight), (0, _defineProperty2.default)({}, "".concat(blockClass, "__table-with-inline-edit"), withInlineEdit), (0, _defineProperty2.default)({}, "".concat(blockClass, "__table-grid-active"), gridActive), (0, _defineProperty2.default)({}, "".concat(blockClass, "__table-is-resizing"), typeof columnResizing.isResizingColumn === 'string'), (_getTableProps = getTableProps()) === null || _getTableProps === void 0 ? void 0 : _getTableProps.className),
       role: withInlineEdit ? 'grid' : undefined,
       tabIndex: withInlineEdit ? 0 : -1,
@@ -117,7 +116,7 @@ var DatagridContent = exports.DatagridContent = function DatagridContent(_ref) {
       title: title
     }), !withVirtualScroll && /*#__PURE__*/_react.default.createElement(_DatagridHead.default, datagridState), /*#__PURE__*/_react.default.createElement(_DatagridBody.default, (0, _extends2.default)({}, datagridState, {
       rows: contentRows
-    })));
+    }))), (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'panel' && renderPagination());
   };
   var _useMultipleKeyTracki = (0, _hooks2.useMultipleKeyTracking)({
       ref: withInlineEdit ? multiKeyTrackingRef : null,
@@ -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"),
@@ -155,16 +152,19 @@ var DatagridContent = exports.DatagridContent = function DatagridContent(_ref) {
       overflowType: "tag"
     });
   };
+  var renderPagination = function renderPagination() {
+    if ((contentRows === null || contentRows === void 0 ? void 0 : contentRows.length) > 0 && !isFetching && DatagridPagination) {
+      return /*#__PURE__*/_react.default.createElement(DatagridPagination, datagridState);
+    }
+  };
   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,
@@ -176,7 +176,7 @@ var DatagridContent = exports.DatagridContent = function DatagridContent(_ref) {
   }, renderTable()) : withVirtualScroll ? /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__virtualScrollContainer"),
     ref: gridRef
-  }, renderTable()) : renderTable()))), (contentRows === null || contentRows === void 0 ? void 0 : contentRows.length) > 0 && !isFetching && DatagridPagination && /*#__PURE__*/_react.default.createElement(DatagridPagination, datagridState), CustomizeColumnsTearsheet && /*#__PURE__*/_react.default.createElement(CustomizeColumnsTearsheet, {
+  }, renderTable()) : renderTable()))), (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) !== 'panel' && renderPagination(), CustomizeColumnsTearsheet && /*#__PURE__*/_react.default.createElement(CustomizeColumnsTearsheet, {
     instance: datagridState
   }));
 };

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,

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

@@ -34,14 +34,15 @@ var rowHeights = {
 
 // eslint-disable-next-line react/prop-types
 var DatagridRow = function DatagridRow(datagridState) {
-  var _cx;
   var row = datagridState.row,
     rowSize = datagridState.rowSize,
     withNestedRows = datagridState.withNestedRows,
     prepareRow = datagridState.prepareRow,
     key = datagridState.key,
     tableId = datagridState.tableId,
-    withExpandedRows = datagridState.withExpandedRows;
+    withExpandedRows = datagridState.withExpandedRows,
+    withMouseHover = datagridState.withMouseHover,
+    setMouseOverRowIndex = datagridState.setMouseOverRowIndex;
   var getVisibleNestedRowCount = function getVisibleNestedRowCount(_ref) {
     var isExpanded = _ref.isExpanded,
       subRows = _ref.subRows;
@@ -86,6 +87,9 @@ var DatagridRow = function DatagridRow(datagridState) {
     return null;
   };
   var handleMouseLeave = function handleMouseLeave(event) {
+    if (withMouseHover) {
+      setMouseOverRowIndex(null);
+    }
     var hoverRow = event.target.closest(".".concat(blockClass, "__carbon-row-expanded"));
     hoverRow === null || hoverRow === void 0 || hoverRow.classList.remove("".concat(blockClass, "__carbon-row-expanded-hover-active"));
   };
@@ -98,7 +102,7 @@ var DatagridRow = function DatagridRow(datagridState) {
       hoverHandler(event);
     }
   };
-  var rowClassNames = (0, _classnames.default)("".concat(blockClass, "__carbon-row"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-row-expandable"), row.canExpand), (0, _defineProperty2.default)(_cx, "".concat(_settings.carbon.prefix, "--data-table--selected"), row.isSelected), _cx));
+  var rowClassNames = (0, _classnames.default)("".concat(blockClass, "__carbon-row"), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), "".concat(blockClass, "__carbon-row-expandable"), row.canExpand), "".concat(_settings.carbon.prefix, "--data-table--selected"), row.isSelected));
   var setAdditionalRowProps = function setAdditionalRowProps() {
     if (withNestedRows || withExpandedRows) {
       return {
@@ -107,6 +111,8 @@ var DatagridRow = function DatagridRow(datagridState) {
     }
     return {};
   };
+
+  // eslint-disable-next-line no-unused-vars
   var _row$getRowProps = row.getRowProps(),
     role = _row$getRowProps.role,
     rowProps = (0, _objectWithoutProperties2.default)(_row$getRowProps, _excluded);
@@ -121,11 +127,10 @@ var DatagridRow = function DatagridRow(datagridState) {
     onFocus: hoverHandler,
     onBlur: focusRemover,
     onKeyUp: handleOnKeyUp
-  }, setAdditionalRowProps(), role === 'row' && {
-    role: role
-  }), row.cells.map(function (cell, index) {
-    var _cell$column;
+  }, setAdditionalRowProps()), row.cells.map(function (cell, index) {
+    var _cell$column, _content$props;
     var cellProps = cell.getCellProps();
+    // eslint-disable-next-line no-unused-vars
     var children = cellProps.children,
       role = cellProps.role,
       restProps = (0, _objectWithoutProperties2.default)(cellProps, _excluded2);
@@ -136,13 +141,12 @@ var DatagridRow = function DatagridRow(datagridState) {
         key: cell.column.id
       });
     }
+    var title = content === null || content === void 0 || (_content$props = content.props) === null || _content$props === void 0 || (_content$props = _content$props.children[0]) === null || _content$props === void 0 || (_content$props = _content$props.props) === null || _content$props === void 0 ? void 0 : _content$props.value;
     return /*#__PURE__*/_react.default.createElement(_react2.TableCell, (0, _extends2.default)({
       className: (0, _classnames.default)("".concat(blockClass, "__cell"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__expandable-row-cell"), row.canExpand && index === 0))
     }, restProps, {
-      key: cell.column.id
-      // avoid unnecessary role assignment to cells
-    }, role === 'cell' && {
-      role: role
+      key: cell.column.id,
+      title: title
     }), content);
   })), renderExpandedRow());
 };

package/lib/components/Datagrid/Datagrid/DraggableElement.js

@@ -25,7 +25,6 @@ var _sortable = require("@dnd-kit/sortable");
 
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 var DraggableElement = function DraggableElement(_ref) {
-  var _cx;
   var id = _ref.id,
     children = _ref.children,
     classList = _ref.classList,
@@ -57,7 +56,7 @@ var DraggableElement = function DraggableElement(_ref) {
     transition: transition
   };
   return /*#__PURE__*/_react.default.createElement("li", (0, _extends2.default)({
-    className: (0, _classnames.default)(classList, "".concat(blockClass, "__draggable-handleHolder"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__draggable-handleHolder--selected"), selected), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__draggable-handleHolder--sticky"), isSticky), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__draggable-handleHolder--dragging"), isDragging), _cx)),
+    className: (0, _classnames.default)(classList, "".concat(blockClass, "__draggable-handleHolder"), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(blockClass, "__draggable-handleHolder--selected"), selected), "".concat(blockClass, "__draggable-handleHolder--sticky"), isSticky), "".concat(blockClass, "__draggable-handleHolder--dragging"), isDragging)),
     id: id,
     ref: setNodeRef,
     style: style