@carbon/ibm-products 2.27.0 → 2.28.0-alpha.4

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

@@ -17,8 +17,8 @@ var constants = require('./addons/Filtering/constants.js');
 var DatagridBody = require('./DatagridBody.js');
 var DatagridHead = require('./DatagridHead.js');
 var DatagridToolbar = require('./DatagridToolbar.js');
-var index$1 = require('../../../node_modules/prop-types/index.js');
-var index = require('../../../node_modules/classnames/index.js');
+var index = require('../../../node_modules/prop-types/index.js');
+var cx = require('classnames');
 var handleGridFocus = require('./addons/InlineEdit/handleGridFocus.js');
 var handleGridKeyPress = require('./addons/InlineEdit/handleGridKeyPress.js');
 var layout = require('@carbon/layout');
@@ -33,6 +33,7 @@ var FilterSummary = require('../../FilterSummary/FilterSummary.js');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
 var gcClass = "".concat(blockClass, "__grid-container");
@@ -95,7 +96,7 @@ var DatagridContent = function DatagridContent(_ref) {
   var renderTable = function renderTable() {
     var _getTableProps;
     return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(react.Table, _rollupPluginBabelHelpers["extends"]({}, getTableProps(), {
-      className: index["default"](withVirtualScroll ? '' : "".concat(blockClass, "__table-simple"), "".concat(blockClass, "__vertical-align-").concat(verticalAlign), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__variable-row-height"), variableRowHeight), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__table-with-inline-edit"), withInlineEdit), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__table-grid-active"), gridActive), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__table-is-resizing"), typeof columnResizing.isResizingColumn === 'string'), (_getTableProps = getTableProps()) === null || _getTableProps === void 0 ? void 0 : _getTableProps.className),
+      className: cx__default["default"](withVirtualScroll ? '' : "".concat(blockClass, "__table-simple"), "".concat(blockClass, "__vertical-align-").concat(verticalAlign), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__variable-row-height"), variableRowHeight), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__table-with-inline-edit"), withInlineEdit), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__table-grid-active"), gridActive), _rollupPluginBabelHelpers.defineProperty({}, "".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,
       onKeyDown: /* istanbul ignore next */
@@ -157,13 +158,13 @@ var DatagridContent = function DatagridContent(_ref) {
     }
   };
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(react.TableContainer, {
-    className: index["default"]("".concat(gcClass), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".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)),
+    className: cx__default["default"]("".concat(gcClass), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".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["default"].createElement(DatagridToolbar["default"], _rollupPluginBabelHelpers["extends"]({}, datagridState, {
     ariaToolbarLabel: ariaToolbarLabel
   })), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: index["default"]("".concat(blockClass, "__table-container"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__table-container--filter-open"), panelOpen)),
+    className: cx__default["default"]("".concat(blockClass, "__table-container"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__table-container--filter-open"), panelOpen)),
     ref: gridAreaRef
   }, (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'panel' && /*#__PURE__*/React__default["default"].createElement(FilterPanel["default"], _rollupPluginBabelHelpers["extends"]({}, getFilterFlyoutProps(), {
     title: filterProps.panelTitle,
@@ -182,33 +183,33 @@ var DatagridContent = function DatagridContent(_ref) {
   }));
 };
 DatagridContent.propTypes = {
-  ariaToolbarLabel: index$1["default"].string,
-  datagridState: index$1["default"].shape({
-    getTableProps: index$1["default"].func,
-    getFilterFlyoutProps: index$1["default"].func,
-    withVirtualScroll: index$1["default"].bool,
-    DatagridActions: index$1["default"].oneOfType([index$1["default"].element, index$1["default"].func]),
-    DatagridPagination: index$1["default"].oneOfType([index$1["default"].element, index$1["default"].func]),
-    CustomizeColumnsTearsheet: index$1["default"].oneOfType([index$1["default"].element, index$1["default"].func]),
-    isFetching: index$1["default"].bool,
-    fullHeightDatagrid: index$1["default"].bool,
-    filterProps: index$1["default"].object,
-    variableRowHeight: index$1["default"].bool,
-    useDenseHeader: index$1["default"].bool,
-    withInlineEdit: index$1["default"].bool,
-    verticalAlign: index$1["default"].string,
-    gridTitle: index$1["default"].node,
-    gridDescription: index$1["default"].node,
-    page: index$1["default"].arrayOf(index$1["default"].object),
-    rows: index$1["default"].arrayOf(index$1["default"].object),
-    tableId: index$1["default"].string,
-    totalColumnsWidth: index$1["default"].number,
-    gridRef: index$1["default"].object,
-    setAllFilters: index$1["default"].func,
-    getFilterProps: index$1["default"].func,
-    state: index$1["default"].object
+  ariaToolbarLabel: index["default"].string,
+  datagridState: index["default"].shape({
+    getTableProps: index["default"].func,
+    getFilterFlyoutProps: index["default"].func,
+    withVirtualScroll: index["default"].bool,
+    DatagridActions: index["default"].oneOfType([index["default"].element, index["default"].func]),
+    DatagridPagination: index["default"].oneOfType([index["default"].element, index["default"].func]),
+    CustomizeColumnsTearsheet: index["default"].oneOfType([index["default"].element, index["default"].func]),
+    isFetching: index["default"].bool,
+    fullHeightDatagrid: index["default"].bool,
+    filterProps: index["default"].object,
+    variableRowHeight: index["default"].bool,
+    useDenseHeader: index["default"].bool,
+    withInlineEdit: index["default"].bool,
+    verticalAlign: index["default"].string,
+    gridTitle: index["default"].node,
+    gridDescription: index["default"].node,
+    page: index["default"].arrayOf(index["default"].object),
+    rows: index["default"].arrayOf(index["default"].object),
+    tableId: index["default"].string,
+    totalColumnsWidth: index["default"].number,
+    gridRef: index["default"].object,
+    setAllFilters: index["default"].func,
+    getFilterProps: index["default"].func,
+    state: index["default"].object
   }),
-  title: index$1["default"].string
+  title: index["default"].string
 };
 
 exports.DatagridContent = DatagridContent;

package/lib/components/Datagrid/Datagrid/DatagridExpandedRow.js

@@ -9,25 +9,30 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var settings = require('../../../settings.js');
+var cx = require('classnames');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
 
 // eslint-disable-next-line react/prop-types
 var DatagridExpandedRow = function DatagridExpandedRow(ExpandedRowContentComponent) {
   return function (datagridState) {
+    var _row$original;
     var row = datagridState.row;
     var expandedContentHeight = row.expandedContentHeight;
     var toggleParentHoverClass = function toggleParentHoverClass(event, eventType) {
       var _event$target;
       /* istanbul ignore else */
-      if (event !== null && event !== void 0 && (_event$target = event.target) !== null && _event$target !== void 0 && (_event$target = _event$target.parentNode) !== null && _event$target !== void 0 && _event$target.previousElementSibling) {
-        var parentNode = event.target.parentNode.previousElementSibling;
+      if (event !== null && event !== void 0 && (_event$target = event.target) !== null && _event$target !== void 0 && _event$target.closest('tr').previousElementSibling) {
+        var _event$target2;
+        var parentNode = event === null || event === void 0 || (_event$target2 = event.target) === null || _event$target2 === void 0 ? void 0 : _event$target2.closest('tr').previousElementSibling;
         if (eventType === 'enter') {
           parentNode.classList.add("".concat(blockClass, "__expandable-row--hover"));
         } else {
@@ -36,7 +41,7 @@ var DatagridExpandedRow = function DatagridExpandedRow(ExpandedRowContentCompone
       }
     };
     return /*#__PURE__*/React__default["default"].createElement("tr", {
-      className: "".concat(blockClass, "__expanded-row"),
+      className: cx__default["default"]("".concat(blockClass, "__expanded-row"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__slug--row"), /*#__PURE__*/React.isValidElement(row === null || row === void 0 || (_row$original = row.original) === null || _row$original === void 0 ? void 0 : _row$original.slug))),
       onMouseEnter: function onMouseEnter(event) {
         return toggleParentHoverClass(event, 'enter');
       },

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

@@ -11,7 +11,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
-var index = require('../../../node_modules/classnames/index.js');
+var cx = require('classnames');
 var react = require('@carbon/react');
 var layout = require('@carbon/layout');
 var commonColumnIds = require('../common-column-ids.js');
@@ -23,6 +23,7 @@ var DatagridSlug = require('./addons/Slug/DatagridSlug.js');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _th;
 var _excluded = ["role"],
@@ -154,7 +155,7 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
     return /*#__PURE__*/React.isValidElement(r === null || r === void 0 || (_r$original = r.original) === null || _r$original === void 0 ? void 0 : _r$original.slug);
   });
   return /*#__PURE__*/React__default["default"].createElement(react.TableRow, _rollupPluginBabelHelpers["extends"]({}, headerGroupProps, {
-    className: index["default"]("".concat(blockClass, "__head"), headerGroupClassName),
+    className: cx__default["default"]("".concat(blockClass, "__head"), headerGroupClassName),
     ref: headRef
   }), foundAIRow ? _th || (_th = /*#__PURE__*/React__default["default"].createElement("th", {
     scope: "col",
@@ -162,7 +163,7 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
   })) : null, datagridState.headers.filter(function (_ref3) {
     var isVisible = _ref3.isVisible;
     return isVisible;
-  }).map(function (header, index$1) {
+  }).map(function (header, index) {
     var _header$getResizerPro;
     if (header.id === commonColumnIds.selectionColumnId) {
       // render directly without the wrapper TableHeader
@@ -179,14 +180,14 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
     var columnResizing = state.columnResizing;
     var _ref5 = columnResizing || {},
       columnWidths = _ref5.columnWidths;
-    var originalCol = visibleColumns[index$1];
+    var originalCol = visibleColumns[index];
     var _header$getHeaderProp = header.getHeaderProps();
       _header$getHeaderProp.role;
       var headerClassName = _header$getHeaderProp.className,
       headerProps = _rollupPluginBabelHelpers.objectWithoutProperties(_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["default"].createElement(react.TableHeader, _rollupPluginBabelHelpers["extends"]({}, headerProps, {
-      className: index["default"](headerClassName, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".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), "".concat(blockClass, "__with-slug"), header.slug && /*#__PURE__*/React__default["default"].isValidElement(header.slug))),
+      className: cx__default["default"](headerClassName, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".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), "".concat(blockClass, "__with-slug"), header.slug && /*#__PURE__*/React__default["default"].isValidElement(header.slug))),
       key: header.id,
       "aria-hidden": header.id === 'spacer' && 'true'
     }, getAccessibilityProps(header)), header.render('Header'), renderSlug(header.slug), resizerProps && !header.isAction && /*#__PURE__*/React__default["default"].createElement(ResizeHeader, {

package/lib/components/Datagrid/Datagrid/DatagridRefBody.js

@@ -11,12 +11,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
-var index = require('../../../node_modules/classnames/index.js');
+var cx = require('classnames');
 var settings = require('../../../settings.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
 
@@ -29,7 +30,7 @@ var DatagridRefBody = function DatagridRefBody(datagridState) {
     rows = datagridState.rows,
     prepareRow = datagridState.prepareRow;
   return /*#__PURE__*/React__default["default"].createElement("tbody", _rollupPluginBabelHelpers["extends"]({}, getTableBodyProps(), {
-    className: index["default"]("".concat(blockClass, "__simple-body"), getTableBodyProps().className)
+    className: cx__default["default"]("".concat(blockClass, "__simple-body"), getTableBodyProps().className)
   }), rows.map(function (row) {
     prepareRow(row);
     var _row$getRowProps = row.getRowProps(),

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

@@ -14,16 +14,17 @@ var React = require('react');
 var react = require('@carbon/react');
 var layout = require('@carbon/layout');
 var commonColumnIds = require('../common-column-ids.js');
-var index = require('../../../node_modules/classnames/index.js');
+var cx = require('classnames');
 var settings = require('../../../settings.js');
 var DatagridSlug = require('./addons/Slug/DatagridSlug.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _SkeletonText;
-var _excluded = ["role"],
+var _excluded = ["role", "className"],
   _excluded2 = ["children", "role"];
 var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
 var rowHeights = {
@@ -36,7 +37,7 @@ var rowHeights = {
 
 // eslint-disable-next-line react/prop-types
 var DatagridRow = function DatagridRow(datagridState) {
-  var _row$original, _row$original2;
+  var _row$original, _row$original2, _row$original3;
   var row = datagridState.row,
     rows = datagridState.rows,
     rowSize = datagridState.rowSize,
@@ -46,7 +47,8 @@ var DatagridRow = function DatagridRow(datagridState) {
     tableId = datagridState.tableId,
     withExpandedRows = datagridState.withExpandedRows,
     withMouseHover = datagridState.withMouseHover,
-    setMouseOverRowIndex = datagridState.setMouseOverRowIndex;
+    setMouseOverRowIndex = datagridState.setMouseOverRowIndex,
+    headers = datagridState.headers;
   var getVisibleNestedRowCount = function getVisibleNestedRowCount(_ref) {
     var isExpanded = _ref.isExpanded,
       subRows = _ref.subRows;
@@ -106,7 +108,6 @@ var DatagridRow = function DatagridRow(datagridState) {
       hoverHandler(event);
     }
   };
-  var rowClassNames = index["default"]("".concat(blockClass, "__carbon-row"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".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 {
@@ -119,30 +120,31 @@ var DatagridRow = function DatagridRow(datagridState) {
   // eslint-disable-next-line no-unused-vars
   var _row$getRowProps = row.getRowProps();
     _row$getRowProps.role;
-    var rowProps = _rollupPluginBabelHelpers.objectWithoutProperties(_row$getRowProps, _excluded);
+    var className = _row$getRowProps.className,
+    rowProps = _rollupPluginBabelHelpers.objectWithoutProperties(_row$getRowProps, _excluded);
   var foundAIRow = rows.some(function (r) {
     var _r$original;
     return /*#__PURE__*/React.isValidElement(r === null || r === void 0 || (_r$original = r.original) === null || _r$original === void 0 ? void 0 : _r$original.slug);
   });
+  var rowClassNames = cx__default["default"]("".concat(blockClass, "__carbon-row"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), "".concat(blockClass, "__carbon-row-expandable"), row.canExpand), "".concat(settings.carbon.prefix, "--data-table--selected"), row.isSelected), "".concat(blockClass, "__slug--row"), /*#__PURE__*/React.isValidElement(row === null || row === void 0 || (_row$original = row.original) === null || _row$original === void 0 ? void 0 : _row$original.slug)));
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
     key: key
-  }, /*#__PURE__*/React__default["default"].createElement(react.TableRow, _rollupPluginBabelHelpers["extends"]({
-    className: rowClassNames
-  }, rowProps, {
+  }, /*#__PURE__*/React__default["default"].createElement(react.TableRow, _rollupPluginBabelHelpers["extends"]({}, rowProps, {
+    className: cx__default["default"](rowClassNames, className),
     key: row.id,
     onMouseEnter: hoverHandler,
     onMouseLeave: handleMouseLeave,
     onFocus: hoverHandler,
     onBlur: focusRemover,
     onKeyUp: handleOnKeyUp
-  }, setAdditionalRowProps()), foundAIRow ? row !== null && row !== void 0 && (_row$original = row.original) !== null && _row$original !== void 0 && _row$original.slug ? /*#__PURE__*/React__default["default"].createElement("td", {
-    className: "".concat(blockClass, "__table-row-ai-enabled")
+  }, setAdditionalRowProps()), foundAIRow ? row !== null && row !== void 0 && (_row$original2 = row.original) !== null && _row$original2 !== void 0 && _row$original2.slug ? /*#__PURE__*/React__default["default"].createElement("td", {
+    className: cx__default["default"]("".concat(blockClass, "__table-row-ai-enabled"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__slug--expanded"), row.isExpanded))
   }, /*#__PURE__*/React__default["default"].createElement(DatagridSlug.DatagridSlug, {
-    slug: row === null || row === void 0 || (_row$original2 = row.original) === null || _row$original2 === void 0 ? void 0 : _row$original2.slug
+    slug: row === null || row === void 0 || (_row$original3 = row.original) === null || _row$original3 === void 0 ? void 0 : _row$original3.slug
   })) : /*#__PURE__*/React__default["default"].createElement("td", {
     className: "".concat(blockClass, "__table-row-ai-spacer")
-  }) : null, row.cells.map(function (cell, index$1) {
-    var _cell$column, _content$props;
+  }) : null, row.cells.map(function (cell, index) {
+    var _cell$column, _content$props, _associatedHeader$;
     var cellProps = cell.getCellProps();
     // eslint-disable-next-line no-unused-vars
     var children = cellProps.children;
@@ -156,8 +158,11 @@ var DatagridRow = function DatagridRow(datagridState) {
       });
     }
     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;
+    var associatedHeader = headers.filter(function (h) {
+      return h.id === cell.column.id;
+    });
     return /*#__PURE__*/React__default["default"].createElement(react.TableCell, _rollupPluginBabelHelpers["extends"]({
-      className: index["default"]("".concat(blockClass, "__cell"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__expandable-row-cell"), row.canExpand && index$1 === 0))
+      className: cx__default["default"]("".concat(blockClass, "__cell"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__expandable-row-cell"), row.canExpand && index === 0), "".concat(blockClass, "__slug--cell"), associatedHeader && associatedHeader.length && /*#__PURE__*/React.isValidElement((_associatedHeader$ = associatedHeader[0]) === null || _associatedHeader$ === void 0 ? void 0 : _associatedHeader$.slug)))
     }, restProps, {
       key: cell.column.id,
       title: title

package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js

@@ -12,13 +12,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var react = require('@carbon/react');
-var index = require('../../../node_modules/classnames/index.js');
+var cx = require('classnames');
 var settings = require('../../../settings.js');
 var stateReducer = require('./addons/stateReducer.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _excluded = ["onChange"];
 var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
@@ -57,7 +58,7 @@ var SelectAll = function SelectAll(datagridState) {
   var isFirstColumnStickyLeft = ((_columns$ = columns[0]) === null || _columns$ === void 0 ? void 0 : _columns$.sticky) === 'left' && withStickyColumn;
   if (hideSelectAll || radio) {
     return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: index["default"]("".concat(blockClass, "__head-hidden-select-all"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__select-all-sticky-left"), /* istanbul ignore next */
+      className: cx__default["default"]("".concat(blockClass, "__head-hidden-select-all"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__select-all-sticky-left"), /* istanbul ignore next */
       isFirstColumnStickyLeft && windowSize > 671))
     });
   }
@@ -92,7 +93,7 @@ var SelectAll = function SelectAll(datagridState) {
     return onChange === null || onChange === void 0 ? void 0 : onChange(event);
   };
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: index["default"]("".concat(blockClass, "__head-select-all"), "".concat(blockClass, "__checkbox-cell"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__checkbox-cell-sticky-left"), /* istanbul ignore next */
+    className: cx__default["default"]("".concat(blockClass, "__head-select-all"), "".concat(blockClass, "__checkbox-cell"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__checkbox-cell-sticky-left"), /* istanbul ignore next */
     isFirstColumnStickyLeft && windowSize > 671))
   }, /*#__PURE__*/React__default["default"].createElement(react.TableSelectAll, _rollupPluginBabelHelpers["extends"]({}, selectProps, {
     name: "".concat(tableId, "-select-all-checkbox-name"),

package/lib/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js

@@ -11,8 +11,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
-var index$1 = require('../../../node_modules/prop-types/index.js');
-var index = require('../../../node_modules/classnames/index.js');
+var index = require('../../../node_modules/prop-types/index.js');
+var cx = require('classnames');
 var react = require('@carbon/react');
 var icons = require('@carbon/react/icons');
 var settings = require('../../../settings.js');
@@ -20,6 +20,7 @@ var settings = require('../../../settings.js');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _excluded = ["onChange"];
 var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
@@ -76,7 +77,7 @@ var SelectAllWithToggle = function SelectAllWithToggle(_ref) {
   var isFirstColumnStickyLeft = ((_columns$ = columns[0]) === null || _columns$ === void 0 ? void 0 : _columns$.sticky) === 'left' && withStickyColumn;
   return /*#__PURE__*/React__default["default"].createElement("th", {
     scope: "col",
-    className: index["default"]("".concat(blockClass, "__select-all-toggle-on"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__select-all-sticky-left"), isFirstColumnStickyLeft && windowSize > 671))
+    className: cx__default["default"]("".concat(blockClass, "__select-all-toggle-on"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__select-all-sticky-left"), isFirstColumnStickyLeft && windowSize > 671))
   }, /*#__PURE__*/React__default["default"].createElement("span", null, /*#__PURE__*/React__default["default"].createElement(react.Checkbox, _rollupPluginBabelHelpers["extends"]({}, selectProps, {
     name: "".concat(tableId, "-select-all-checkbox-name"),
     onClick: function onClick(e) {
@@ -129,16 +130,16 @@ var SelectAllWithToggle = function SelectAllWithToggle(_ref) {
   })));
 };
 SelectAllWithToggle.propTypes = {
-  allPageRowsLabel: index$1["default"].string,
-  allRowsLabel: index$1["default"].string,
-  columns: index$1["default"].arrayOf(index$1["default"].object),
-  getToggleAllPageRowsSelectedProps: index$1["default"].func.isRequired,
-  getToggleAllRowsSelectedProps: index$1["default"].func.isRequired,
-  isAllRowsSelected: index$1["default"].bool.isRequired,
-  isFetching: index$1["default"].bool,
-  selectAllToggle: index$1["default"].object,
-  tableId: index$1["default"].string.isRequired,
-  withStickyColumn: index$1["default"].bool
+  allPageRowsLabel: index["default"].string,
+  allRowsLabel: index["default"].string,
+  columns: index["default"].arrayOf(index["default"].object),
+  getToggleAllPageRowsSelectedProps: index["default"].func.isRequired,
+  getToggleAllRowsSelectedProps: index["default"].func.isRequired,
+  isAllRowsSelected: index["default"].bool.isRequired,
+  isFetching: index["default"].bool,
+  selectAllToggle: index["default"].object,
+  tableId: index["default"].string.isRequired,
+  withStickyColumn: index["default"].bool
 };
 var SelectAllWithToggle$1 = SelectAllWithToggle;
 

package/lib/components/Datagrid/Datagrid/DatagridSimpleBody.js

@@ -12,12 +12,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var react = require('@carbon/react');
-var index = require('../../../node_modules/classnames/index.js');
+var cx = require('classnames');
 var settings = require('../../../settings.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
 var DatagridSimpleBody = function DatagridSimpleBody(datagridState) {
@@ -25,7 +26,7 @@ var DatagridSimpleBody = function DatagridSimpleBody(datagridState) {
     rows = datagridState.rows,
     prepareRow = datagridState.prepareRow;
   return /*#__PURE__*/React__default["default"].createElement(react.TableBody, _rollupPluginBabelHelpers["extends"]({}, getTableBodyProps(), {
-    className: index["default"]("".concat(blockClass, "__simple-body"), getTableBodyProps().className)
+    className: cx__default["default"]("".concat(blockClass, "__simple-body"), getTableBodyProps().className)
   }), rows.map(function (row) {
     prepareRow(row);
     var _row$getRowProps = row.getRowProps(),

package/lib/components/Datagrid/Datagrid/DatagridToolbar.js

@@ -11,16 +11,17 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
-var index$1 = require('../../../node_modules/prop-types/index.js');
+var index = require('../../../node_modules/prop-types/index.js');
 var react = require('@carbon/react');
 var useResizeObserver = require('../../../global/js/hooks/useResizeObserver.js');
 var settings = require('../../../settings.js');
-var index = require('../../../node_modules/classnames/index.js');
+var cx = require('classnames');
 var stateReducer = require('./addons/stateReducer.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _excluded = ["ariaToolbarLabel"];
 var blockClass = "".concat(settings.pkg.prefix, "--datagrid__table-toolbar");
@@ -101,7 +102,7 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
     };
     return /*#__PURE__*/React__default["default"].createElement(react.MenuButton, {
       label: batchActionMenuButtonLabelText,
-      className: index["default"]([menuClass, _rollupPluginBabelHelpers.defineProperty({}, "".concat(menuClass, "-icon-only"), width <= minWidthBeforeOverflowIcon)]),
+      className: cx__default["default"]([menuClass, _rollupPluginBabelHelpers.defineProperty({}, "".concat(menuClass, "-icon-only"), width <= minWidthBeforeOverflowIcon)]),
       tabIndex: totalSelected > 0 ? 0 : -1
     }, toolbarBatchActions === null || toolbarBatchActions === void 0 ? void 0 : toolbarBatchActions.map(function (batchAction, index) {
       var hidden = index < 2 && !displayAllInMenu;
@@ -173,7 +174,7 @@ var DatagridToolbar = function DatagridToolbar(_ref2) {
   var getRowHeight = rowSize || 'lg';
   return batchActions && DatagridActions ? /*#__PURE__*/React__default["default"].createElement("div", {
     ref: ref,
-    className: index["default"]([blockClass, "".concat(blockClass, "--").concat(getRowHeight)])
+    className: cx__default["default"]([blockClass, "".concat(blockClass, "--").concat(getRowHeight)])
   }, /*#__PURE__*/React__default["default"].createElement(react.TableToolbar, {
     "aria-label": ariaToolbarLabel
   }, DatagridActions && /*#__PURE__*/React__default["default"].createElement(DatagridActions, datagridState), DatagridBatchActionsToolbar && DatagridBatchActionsToolbar(datagridState, width, ref))) : DatagridActions ? /*#__PURE__*/React__default["default"].createElement("div", {
@@ -183,7 +184,7 @@ var DatagridToolbar = function DatagridToolbar(_ref2) {
   }, DatagridActions && /*#__PURE__*/React__default["default"].createElement(DatagridActions, datagridState), DatagridBatchActions && DatagridBatchActions(datagridState))) : null;
 };
 DatagridToolbar.propTypes = {
-  ariaToolbarLabel: index$1["default"].string
+  ariaToolbarLabel: index["default"].string
 };
 var DatagridToolbar$1 = DatagridToolbar;
 

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

@@ -11,9 +11,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
-var index$1 = require('../../../node_modules/prop-types/index.js');
+var index = require('../../../node_modules/prop-types/index.js');
 var icons = require('@carbon/react/icons');
-var index = require('../../../node_modules/classnames/index.js');
+var cx = require('classnames');
 var settings = require('../../../settings.js');
 var utilities = require('@dnd-kit/utilities');
 var sortable = require('@dnd-kit/sortable');
@@ -21,6 +21,7 @@ var sortable = require('@dnd-kit/sortable');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _Locked, _DraggableIcon;
 var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
@@ -43,7 +44,7 @@ var DraggableElement = function DraggableElement(_ref) {
     transform = _useSortable.transform,
     transition = _useSortable.transition;
   var content = /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: index["default"]({
+    className: cx__default["default"]({
       disabled: disabled
     }, "".concat(blockClass, "__draggable-handleStyle"))
   }, isSticky ? _Locked || (_Locked = /*#__PURE__*/React__default["default"].createElement(icons.Locked, {
@@ -56,7 +57,7 @@ var DraggableElement = function DraggableElement(_ref) {
     transition: transition
   };
   return /*#__PURE__*/React__default["default"].createElement("li", _rollupPluginBabelHelpers["extends"]({
-    className: index["default"](classList, "".concat(blockClass, "__draggable-handleHolder"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__draggable-handleHolder--selected"), selected), "".concat(blockClass, "__draggable-handleHolder--sticky"), isSticky), "".concat(blockClass, "__draggable-handleHolder--dragging"), isDragging)),
+    className: cx__default["default"](classList, "".concat(blockClass, "__draggable-handleHolder"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__draggable-handleHolder--selected"), selected), "".concat(blockClass, "__draggable-handleHolder--sticky"), isSticky), "".concat(blockClass, "__draggable-handleHolder--dragging"), isDragging)),
     id: id,
     ref: setNodeRef,
     style: style
@@ -67,17 +68,17 @@ var DraggableElement = function DraggableElement(_ref) {
   }), /*#__PURE__*/React__default["default"].createElement("span", {
     className: "".concat(blockClass, "__shared-ui--assistive-text")
   }, ariaLabel), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: index["default"](_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__draggable-handleStyle"), !disabled), ["".concat(blockClass, "__draggable-handleHolder-droppable")])
+    className: cx__default["default"](_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__draggable-handleStyle"), !disabled), ["".concat(blockClass, "__draggable-handleHolder-droppable")])
   }, content));
 };
 DraggableElement.propTypes = {
-  ariaLabel: index$1["default"].string.isRequired,
-  children: index$1["default"].element.isRequired,
-  classList: index$1["default"].string,
-  disabled: index$1["default"].bool,
-  id: index$1["default"].string.isRequired,
-  isSticky: index$1["default"].bool,
-  selected: index$1["default"].bool
+  ariaLabel: index["default"].string.isRequired,
+  children: index["default"].element.isRequired,
+  classList: index["default"].string,
+  disabled: index["default"].bool,
+  id: index["default"].string.isRequired,
+  isSticky: index["default"].bool,
+  selected: index["default"].bool
 };
 var DraggableElement$1 = DraggableElement;