@carbon/ibm-products 2.43.2-canary.30 → 2.43.2-canary.301

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

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
 require('../../../feature-flags.js');
 var React = require('react');
@@ -18,7 +16,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 = require('../../../node_modules/prop-types/index.js');
+var FilterSummary = require('../../FilterSummary/FilterSummary.js');
+var index = require('../../../_virtual/index.js');
 var cx = require('classnames');
 var handleGridFocus = require('./addons/InlineEdit/handleGridFocus.js');
 var handleGridKeyPress = require('./addons/InlineEdit/handleGridKeyPress.js');
@@ -30,12 +29,6 @@ var useClickOutside = require('../../../global/js/hooks/useClickOutside.js');
 var useMultipleKeyTracking = require('../../DataSpreadsheet/hooks/useMultipleKeyTracking.js');
 var useSubscribeToEventEmitter = require('./addons/Filtering/hooks/useSubscribeToEventEmitter.js');
 var FilterPanel = require('./addons/Filtering/FilterPanel.js');
-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");
@@ -49,7 +42,8 @@ var DatagridContent = function DatagridContent(_ref) {
   var _useContext2 = React.useContext(FilterProvider.FilterContext),
     filterTags = _useContext2.filterTags,
     EventEmitter = _useContext2.EventEmitter,
-    panelOpen = _useContext2.panelOpen;
+    panelOpen = _useContext2.panelOpen,
+    contextTableId = _useContext2.tableId;
   var activeCellId = inlineEditState.activeCellId,
     gridActive = inlineEditState.gridActive,
     editId = inlineEditState.editId,
@@ -115,8 +109,8 @@ var DatagridContent = function DatagridContent(_ref) {
     });
   });
   var renderTable = function renderTable() {
-    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(react.Table, _rollupPluginBabelHelpers["extends"]({}, getTableProps === null || getTableProps === void 0 ? void 0 : getTableProps(), {
-      className: cx__default["default"](withVirtualScroll ? "".concat(blockClass, "__table-virtual-scroll") : "".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 === null || columnResizing === void 0 ? void 0 : columnResizing.isResizingColumn) === 'string'), getTableProps === null || getTableProps === void 0 ? void 0 : getTableProps().className),
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(react.Table, _rollupPluginBabelHelpers.extends({}, getTableProps === null || getTableProps === void 0 ? void 0 : getTableProps(), {
+      className: cx(withVirtualScroll ? "".concat(blockClass, "__table-virtual-scroll") : "".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 === null || columnResizing === void 0 ? void 0 : columnResizing.isResizingColumn) === 'string'), getTableProps === null || getTableProps === void 0 ? void 0 : getTableProps().className),
       role: withInlineEdit ? 'grid' : undefined,
       tabIndex: withInlineEdit ? 0 : -1,
       onKeyDown: withInlineEdit && function (event) {
@@ -134,7 +128,7 @@ var DatagridContent = function DatagridContent(_ref) {
         return handleGridFocus.handleGridFocus(inlineEditState, dispatch);
       },
       title: title
-    }), (!withVirtualScroll || withVirtualScroll && !isFetching && !contentRows.length) && /*#__PURE__*/React__default["default"].createElement(DatagridHead["default"], datagridState), /*#__PURE__*/React__default["default"].createElement(DatagridBody["default"], _rollupPluginBabelHelpers["extends"]({}, datagridState, {
+    }), (!withVirtualScroll || withVirtualScroll && !isFetching && !contentRows.length) && /*#__PURE__*/React.createElement(DatagridHead.default, datagridState), /*#__PURE__*/React.createElement(DatagridBody.default, _rollupPluginBabelHelpers.extends({}, datagridState, {
       rows: contentRows
     }))), (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'panel' && renderPagination());
   };
@@ -159,15 +153,18 @@ var DatagridContent = function DatagridContent(_ref) {
       gridElement === null || gridElement === void 0 || gridElement.style.setProperty("--".concat(blockClass, "--grid-header-height"), layout.px((tableHeader === null || tableHeader === void 0 ? void 0 : tableHeader.clientHeight) || 0));
     }
   }, [withInlineEdit, tableId, totalColumnsWidth, datagridState, gridActive]);
-  useSubscribeToEventEmitter["default"](constants.CLEAR_SINGLE_FILTER, function (id) {
-    return FilterProvider.clearSingleFilter(id, setAllFilters, state);
+  useSubscribeToEventEmitter.default(constants.CLEAR_SINGLE_FILTER, function (id) {
+    return FilterProvider.clearSingleFilter(id, setAllFilters, state, contextTableId);
   });
   var renderFilterSummary = function renderFilterSummary() {
-    return state.filters.length > 0 && /*#__PURE__*/React__default["default"].createElement(FilterSummary["default"], {
+    return state.filters.length > 0 && /*#__PURE__*/React.createElement(FilterSummary.default, {
       className: "".concat(blockClass, "__filter-summary"),
       filters: filterTags,
       clearFilters: function clearFilters() {
-        return EventEmitter.dispatch(constants.CLEAR_FILTERS, tableId);
+        EventEmitter.dispatch(constants.CLEAR_FILTERS, tableId);
+        if (typeof (filterProps === null || filterProps === void 0 ? void 0 : filterProps.onClearFilters) === 'function') {
+          filterProps.onClearFilters();
+        }
       },
       renderLabel: filterProps === null || filterProps === void 0 ? void 0 : filterProps.renderLabel,
       overflowType: "tag"
@@ -175,63 +172,63 @@ var DatagridContent = function DatagridContent(_ref) {
   };
   var renderPagination = function renderPagination() {
     if ((contentRows === null || contentRows === void 0 ? void 0 : contentRows.length) > 0 && !isFetching && DatagridPagination) {
-      return /*#__PURE__*/React__default["default"].createElement(DatagridPagination, datagridState);
+      return /*#__PURE__*/React.createElement(DatagridPagination, datagridState);
     }
   };
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(react.TableContainer, {
-    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)),
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(react.TableContainer, {
+    className: cx("".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, {
+  }, /*#__PURE__*/React.createElement(DatagridToolbar.default, _rollupPluginBabelHelpers.extends({}, datagridState, {
     ariaToolbarLabel: ariaToolbarLabel
-  })), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: cx__default["default"]("".concat(blockClass, "__table-container"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__table-container--filter-open"), panelOpen)),
+  })), /*#__PURE__*/React.createElement("div", {
+    className: cx("".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 === null || getFilterFlyoutProps === void 0 ? void 0 : getFilterFlyoutProps(), {
+  }, (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'panel' && /*#__PURE__*/React.createElement(FilterPanel.default, _rollupPluginBabelHelpers.extends({}, getFilterFlyoutProps === null || getFilterFlyoutProps === void 0 ? void 0 : getFilterFlyoutProps(), {
     title: filterProps.panelTitle,
     filterSections: filterProps.sections,
     autoHideFilters: filterProps.autoHideFilters,
     isFetching: isFetching
-  })), /*#__PURE__*/React__default["default"].createElement("div", {
+  })), /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__table-container-inner")
-  }, renderFilterSummary(), withInlineEdit ? /*#__PURE__*/React__default["default"].createElement("div", {
+  }, renderFilterSummary(), withInlineEdit ? /*#__PURE__*/React.createElement("div", {
     ref: multiKeyTrackingRef
-  }, renderTable()) : withVirtualScroll ? /*#__PURE__*/React__default["default"].createElement("div", {
+  }, renderTable()) : withVirtualScroll ? /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__virtualScrollContainer"),
     ref: gridRef
-  }, renderTable()) : renderTable()))), (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) !== 'panel' && renderPagination(), CustomizeColumnsTearsheet && /*#__PURE__*/React__default["default"].createElement(CustomizeColumnsTearsheet, {
+  }, renderTable()) : renderTable()))), (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) !== 'panel' && renderPagination(), CustomizeColumnsTearsheet && /*#__PURE__*/React.createElement(CustomizeColumnsTearsheet, {
     instance: datagridState
   }));
 };
 DatagridContent.propTypes = {
-  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,
-    skeletonRowCount: index["default"].number,
-    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
+  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,
+    skeletonRowCount: index.default.number,
+    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["default"].string
+  title: index.default.string
 };
 
 exports.DatagridContent = DatagridContent;

package/lib/components/Datagrid/Datagrid/DatagridEmptyBody.js

@@ -18,10 +18,6 @@ var NoDataEmptyState = require('../../EmptyStates/NoDataEmptyState/NoDataEmptySt
 var NotFoundEmptyState = require('../../EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js');
 var EmptyState = require('../../EmptyStates/EmptyState.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
 var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
 var DatagridEmptyBody = function DatagridEmptyBody(datagridState) {
   var getTableBodyProps = datagridState.getTableBodyProps,
@@ -43,15 +39,15 @@ var DatagridEmptyBody = function DatagridEmptyBody(datagridState) {
     link: emptyStateLink
   };
   var validEmptyStates = ['error', 'noData', 'notFound'];
-  return /*#__PURE__*/React__default["default"].createElement(react.TableBody, _rollupPluginBabelHelpers["extends"]({}, getTableBodyProps({
+  return /*#__PURE__*/React.createElement(react.TableBody, _rollupPluginBabelHelpers.extends({}, getTableBodyProps({
     role: undefined
   }), {
     "aria-live": "off",
     className: "".concat(blockClass, "__empty-state-body")
-  }), /*#__PURE__*/React__default["default"].createElement(react.TableRow, null, /*#__PURE__*/React__default["default"].createElement(react.TableCell, {
+  }), /*#__PURE__*/React.createElement(react.TableRow, null, /*#__PURE__*/React.createElement(react.TableCell, {
     colSpan: headers === null || headers === void 0 ? void 0 : headers.length,
     className: "".concat(blockClass, "__empty-state-cell")
-  }, validEmptyStates.includes(emptyStateType) ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, emptyStateType === 'error' && /*#__PURE__*/React__default["default"].createElement(ErrorEmptyState.ErrorEmptyState, emptyStateProps), emptyStateType === 'noData' && /*#__PURE__*/React__default["default"].createElement(NoDataEmptyState.NoDataEmptyState, emptyStateProps), emptyStateType === 'notFound' && /*#__PURE__*/React__default["default"].createElement(NotFoundEmptyState.NotFoundEmptyState, emptyStateProps)) : /*#__PURE__*/React__default["default"].createElement(EmptyState.EmptyState, emptyStateProps))));
+  }, validEmptyStates.includes(emptyStateType) ? /*#__PURE__*/React.createElement(React.Fragment, null, emptyStateType === 'error' && /*#__PURE__*/React.createElement(ErrorEmptyState.ErrorEmptyState, emptyStateProps), emptyStateType === 'noData' && /*#__PURE__*/React.createElement(NoDataEmptyState.NoDataEmptyState, emptyStateProps), emptyStateType === 'notFound' && /*#__PURE__*/React.createElement(NotFoundEmptyState.NotFoundEmptyState, emptyStateProps)) : /*#__PURE__*/React.createElement(EmptyState.EmptyState, emptyStateProps))));
 };
 
-exports["default"] = DatagridEmptyBody;
+exports.default = DatagridEmptyBody;

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

@@ -14,11 +14,6 @@ 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 _excluded = ["key"];
 var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
 
@@ -44,25 +39,27 @@ var DatagridExpandedRow = function DatagridExpandedRow(ExpandedRowContentCompone
     };
     var key = datagridState.key,
       _state = _rollupPluginBabelHelpers.objectWithoutProperties(datagridState, _excluded);
-    return /*#__PURE__*/React__default["default"].createElement("tr", {
-      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))),
+    return /*#__PURE__*/React.createElement("tr", {
+      className: cx("".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');
       },
       onMouseLeave: function onMouseLeave(event) {
         return toggleParentHoverClass(event);
       }
-    }, /*#__PURE__*/React__default["default"].createElement("td", {
+    }, /*#__PURE__*/React.createElement("td", {
       className: "".concat(blockClass, "__expanded-row-cell-wrapper")
-    }, /*#__PURE__*/React__default["default"].createElement("div", {
+    }, /*#__PURE__*/React.createElement("div", {
       className: "".concat(blockClass, "__expanded-row-content"),
-      style: {
-        height: expandedContentHeight && expandedContentHeight
+      ref: function ref(el) {
+        if (el && el.style && expandedContentHeight) {
+          el.style.height = "".concat(expandedContentHeight, "px");
+        }
       }
-    }, /*#__PURE__*/React__default["default"].createElement(ExpandedRowContentComponent, _rollupPluginBabelHelpers["extends"]({
+    }, /*#__PURE__*/React.createElement(ExpandedRowContentComponent, _rollupPluginBabelHelpers.extends({
       key: key
     }, _state)))));
   };
 };
 
-exports["default"] = DatagridExpandedRow;
+exports.default = DatagridExpandedRow;

package/lib/components/Datagrid/Datagrid/DatagridHead.js

@@ -12,20 +12,16 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var react = require('@carbon/react');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
 var DatagridHead = function DatagridHead(datagridState) {
   var _datagridState$header = datagridState.headerGroups,
     headerGroups = _datagridState$header === void 0 ? [] : _datagridState$header,
     headRef = datagridState.headRef,
     HeaderRow = datagridState.HeaderRow;
-  return /*#__PURE__*/React__default["default"].createElement(react.TableHead, null, headerGroups.map(function (headerGroup) {
+  return /*#__PURE__*/React.createElement(react.TableHead, null, headerGroups.map(function (headerGroup) {
     return (// doesn't support header grouping.
       HeaderRow === null || HeaderRow === void 0 ? void 0 : HeaderRow(datagridState, headRef, headerGroup)
     );
   }));
 };
 
-exports["default"] = DatagridHead;
+exports.default = DatagridHead;

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

@@ -21,21 +21,14 @@ var getNodeTextContent = require('../../../global/js/utils/getNodeTextContent.js
 var DatagridSlug = require('./addons/Slug/DatagridSlug.js');
 var useInitialColumnSort = require('../useInitialColumnSort.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 = ["className"],
   _excluded2 = ["key"];
 var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
 var getAccessibilityProps = function getAccessibilityProps(header) {
   var props = {};
-  var title = getNodeTextContent.getNodeTextContent(header.Header);
-  if (title) {
-    props.title = title;
-  } else {
+  var content = getNodeTextContent.getNodeTextContent(header.Header);
+  if (!content) {
     props['aria-hidden'] = true;
   }
   return props;
@@ -53,7 +46,7 @@ var ResizeHeader = function ResizeHeader(_ref) {
     onColResizeEnd = _ref.onColResizeEnd,
     resizerAriaLabel = _ref.resizerAriaLabel,
     isFetching = _ref.isFetching;
-  var headerProps = _rollupPluginBabelHelpers["extends"]({}, (_rollupPluginBabelHelpers.objectDestructuringEmpty(resizerProps), resizerProps));
+  var headerProps = _rollupPluginBabelHelpers.extends({}, (_rollupPluginBabelHelpers.objectDestructuringEmpty(resizerProps), resizerProps));
   var mouseDownHandler = function mouseDownHandler(evt) {
     handleOnMouseDownResize === null || handleOnMouseDownResize === void 0 || handleOnMouseDownResize(evt, resizerProps);
   };
@@ -80,7 +73,7 @@ var ResizeHeader = function ResizeHeader(_ref) {
   var keyUpHandler = function keyUpHandler() {
     stateReducer.handleColumnResizeEndEvent(dispatch, onColResizeEnd, header === null || header === void 0 ? void 0 : header.id, true);
   };
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("input", _rollupPluginBabelHelpers["extends"]({}, headerProps, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", _rollupPluginBabelHelpers.extends({}, headerProps, {
     onMouseDown: mouseDownHandler,
     onMouseUp: mouseUpHandler,
     onKeyDown: keyDownHandler,
@@ -90,7 +83,8 @@ var ResizeHeader = function ResizeHeader(_ref) {
     defaultValue: originalCol === null || originalCol === void 0 ? void 0 : originalCol.width,
     "aria-label": resizerAriaLabel || 'Resize column',
     disabled: isFetching
-  })), /*#__PURE__*/React__default["default"].createElement("span", {
+  })), /*#__PURE__*/React.createElement("span", {
+    role: "separator",
     className: "".concat(blockClass, "__col-resize-indicator")
   }));
 };
@@ -145,14 +139,16 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
     }
     onMouseDown === null || onMouseDown === void 0 || onMouseDown(event);
   };
-  var _headerGroup$getHeade = headerGroup.getHeaderGroupProps(),
+  var _headerGroup$getHeade = headerGroup.getHeaderGroupProps({
+      role: undefined
+    }),
     headerGroupClassName = _headerGroup$getHeade.className,
     headerGroupProps = _rollupPluginBabelHelpers.objectWithoutProperties(_headerGroup$getHeade, _excluded);
   var renderSlug = function renderSlug(slug) {
     if (isTableSortable) {
       return;
     }
-    return /*#__PURE__*/React__default["default"].createElement(DatagridSlug.DatagridSlug, {
+    return /*#__PURE__*/React.createElement(DatagridSlug.DatagridSlug, {
       slug: slug
     });
   };
@@ -165,12 +161,12 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
   var withActionsColumn = headers ? !!headers.filter(function (header) {
     return header.isAction;
   }).length : false;
-  return /*#__PURE__*/React__default["default"].createElement(react.TableRow, _rollupPluginBabelHelpers["extends"]({
+  return /*#__PURE__*/React.createElement(react.TableRow, _rollupPluginBabelHelpers.extends({
     key: key
   }, rowProps, {
-    className: cx__default["default"]("".concat(blockClass, "__head"), headerGroupClassName),
+    className: cx("".concat(blockClass, "__head"), headerGroupClassName),
     ref: headRef
-  }), foundAIRow ? _th || (_th = /*#__PURE__*/React__default["default"].createElement("th", {
+  }), foundAIRow ? _th || (_th = /*#__PURE__*/React.createElement("th", {
     scope: "col",
     "aria-hidden": "false"
   })) : null, datagridState === null || datagridState === void 0 || (_datagridState$header = datagridState.headers) === null || _datagridState$header === void 0 || (_datagridState$header = _datagridState$header.filter(function (_ref3) {
@@ -194,20 +190,27 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
     var _ref5 = columnResizing || {},
       columnWidths = _ref5.columnWidths;
     var originalCol = visibleColumns[index];
-    var _header$getHeaderProp = header.getHeaderProps(),
-      headerProps = _rollupPluginBabelHelpers["extends"]({}, (_rollupPluginBabelHelpers.objectDestructuringEmpty(_header$getHeaderProp), _header$getHeaderProp));
-    var resizerProps = header === null || header === void 0 || (_header$getResizerPro = header.getResizerProps) === null || _header$getResizerPro === void 0 ? void 0 : _header$getResizerPro.call(header);
+    var _header$getHeaderProp = header.getHeaderProps({
+        role: undefined
+      }),
+      headerProps = _rollupPluginBabelHelpers.extends({}, (_rollupPluginBabelHelpers.objectDestructuringEmpty(_header$getHeaderProp), _header$getHeaderProp));
+    var resizerProps = header === null || header === void 0 || (_header$getResizerPro = header.getResizerProps) === null || _header$getResizerPro === void 0 ? void 0 : _header$getResizerPro.call(header, {
+      role: undefined
+    });
     var headerStyle = headerProps === null || headerProps === void 0 ? void 0 : headerProps.style;
     var lastVisibleIndex = withActionsColumn ? 2 : 1;
-    var lastVisibleFlexStyle = index === visibleColumns.length - lastVisibleIndex ? '1 1 0' : '0 0 auto';
+    var isLastVisibleColumn = index === visibleColumns.length - lastVisibleIndex;
     if (headerStyle) {
-      headerStyle.flex = lastVisibleFlexStyle;
+      Object.assign(headerStyle, {
+        flex: isLastVisibleColumn ? '1 1 0' : '0 0 auto',
+        overflow: isLastVisibleColumn ? 'hidden' : headerStyle.overflow
+      });
     }
-    return /*#__PURE__*/React__default["default"].createElement(react.TableHeader, _rollupPluginBabelHelpers["extends"]({}, headerProps, {
-      className: cx__default["default"](header === null || header === void 0 ? void 0 : header.className, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__resizableColumn"), resizerProps), "".concat(blockClass, "__isResizing"), header === null || header === void 0 ? void 0 : header.isResizing), "".concat(blockClass, "__sortableColumn"), datagridState.isTableSortable && header.id !== 'spacer'), "".concat(blockClass, "__isSorted"), header === null || header === void 0 ? void 0 : header.isSorted), "".concat(blockClass, "__header-actions-column"), header === null || header === void 0 ? void 0 : header.isAction), "".concat(blockClass, "__with-slug"), header.slug && /*#__PURE__*/React__default["default"].isValidElement(header === null || header === void 0 ? void 0 : header.slug)), headerProps.className),
+    return /*#__PURE__*/React.createElement(react.TableHeader, _rollupPluginBabelHelpers.extends({}, headerProps, {
+      className: cx(header === null || header === void 0 ? void 0 : header.className, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__resizableColumn"), resizerProps), "".concat(blockClass, "__isResizing"), header === null || header === void 0 ? void 0 : header.isResizing), "".concat(blockClass, "__sortableColumn"), datagridState.isTableSortable && header.id !== 'spacer'), "".concat(blockClass, "__isSorted"), header === null || header === void 0 ? void 0 : header.isSorted), "".concat(blockClass, "__header-actions-column"), header === null || header === void 0 ? void 0 : header.isAction), "".concat(blockClass, "__with-slug"), header.slug && /*#__PURE__*/React.isValidElement(header === null || header === void 0 ? void 0 : header.slug)), headerProps.className),
       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, {
+    }, getAccessibilityProps(header)), header.render('Header'), renderSlug(header.slug), resizerProps && !header.isAction && /*#__PURE__*/React.createElement(ResizeHeader, {
       resizerProps: resizerProps,
       header: header,
       handleOnMouseDownResize: handleOnMouseDownResize,
@@ -232,4 +235,4 @@ var useHeaderRow = function useHeaderRow(hooks) {
   hooks.useInstance.push(useInstance);
 };
 
-exports["default"] = useHeaderRow;
+exports.default = useHeaderRow;

package/lib/components/Datagrid/Datagrid/DatagridRefBody.d.ts

@@ -1,3 +1,9 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
 import { DataGridState } from '../types';
 declare const DatagridRefBody: (datagridState: DataGridState) => import("react/jsx-runtime").JSX.Element;
 export default DatagridRefBody;

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

@@ -14,11 +14,6 @@ var React = require('react');
 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");
 
 // TableBody from carbon is a functional component
@@ -29,10 +24,10 @@ var DatagridRefBody = function DatagridRefBody(datagridState) {
   var getTableBodyProps = datagridState.getTableBodyProps,
     rows = datagridState.rows,
     prepareRow = datagridState.prepareRow;
-  return /*#__PURE__*/React__default["default"].createElement("tbody", _rollupPluginBabelHelpers["extends"]({}, getTableBodyProps({
+  return /*#__PURE__*/React.createElement("tbody", _rollupPluginBabelHelpers.extends({}, getTableBodyProps({
     role: undefined
   }), {
-    className: cx__default["default"]("".concat(blockClass, "__simple-body"), getTableBodyProps().className)
+    className: cx("".concat(blockClass, "__simple-body"), getTableBodyProps().className)
   }), rows === null || rows === void 0 ? void 0 : rows.map(function (row) {
     var _row$RowRenderer;
     prepareRow(row);
@@ -45,4 +40,4 @@ var DatagridRefBody = function DatagridRefBody(datagridState) {
   }));
 };
 
-exports["default"] = DatagridRefBody;
+exports.default = DatagridRefBody;

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

@@ -18,11 +18,6 @@ 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 = ["className"],
   _excluded2 = ["style", "children"];
@@ -49,7 +44,8 @@ var DatagridRow = function DatagridRow(datagridState) {
     withMouseHover = datagridState.withMouseHover,
     setMouseOverRowIndex = datagridState.setMouseOverRowIndex,
     headers = datagridState.headers,
-    visibleColumns = datagridState.visibleColumns;
+    visibleColumns = datagridState.visibleColumns,
+    getAsyncSubRows = datagridState.getAsyncSubRows;
   var getVisibleNestedRowCount = function getVisibleNestedRowCount(_ref) {
     var isExpanded = _ref.isExpanded,
       subRows = _ref.subRows;
@@ -117,66 +113,69 @@ var DatagridRow = function DatagridRow(datagridState) {
     }
     return {};
   };
-  var _row$getRowProps = row.getRowProps(),
+  var _row$getRowProps = row.getRowProps({
+      role: undefined
+    }),
     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)));
+  var rowClassNames = cx("".concat(blockClass, "__carbon-row"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), "".concat(blockClass, "__carbon-row-expandable"), row.canExpand), "".concat(blockClass, "__carbon-row-expandable--async"), getAsyncSubRows && row.depth > 0), "".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)));
   var withActionsColumn = headers ? !!headers.filter(function (header) {
     return header.isAction;
   }).length : false;
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
-    key: key
-  }, /*#__PURE__*/React__default["default"].createElement(react.TableRow, _rollupPluginBabelHelpers["extends"]({}, rowProps, {
-    className: cx__default["default"](rowClassNames, className),
-    key: row.id,
+  var rowKey = !row.isSkeleton ? key : row.skeletonKey;
+  return /*#__PURE__*/React.createElement(React.Fragment, {
+    key: "".concat(rowKey, "__").concat(key, "__row--fragment")
+  }, /*#__PURE__*/React.createElement(react.TableRow, _rollupPluginBabelHelpers.extends({}, rowProps, {
+    className: cx(rowClassNames, className),
+    key: rowKey,
     onMouseEnter: hoverHandler,
     onMouseLeave: handleMouseLeave,
     onFocus: hoverHandler,
     onBlur: focusRemover,
     onKeyUp: handleOnKeyUp
-  }, 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, {
+  }, setAdditionalRowProps()), foundAIRow ? row !== null && row !== void 0 && (_row$original2 = row.original) !== null && _row$original2 !== void 0 && _row$original2.slug ? /*#__PURE__*/React.createElement("td", {
+    className: cx("".concat(blockClass, "__table-row-ai-enabled"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__slug--expanded"), row.isExpanded))
+  }, /*#__PURE__*/React.createElement(DatagridSlug.DatagridSlug, {
     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", {
+  })) : /*#__PURE__*/React.createElement("td", {
     className: "".concat(blockClass, "__table-row-ai-spacer")
   }) : null, row.cells.map(function (cell, index) {
-    var _cell$column, _cell$column2, _content$props, _associatedHeader$;
-    var cellProps = cell.getCellProps();
+    var _cell$column, _cell$column2, _associatedHeader$;
+    var cellProps = cell.getCellProps({
+      role: undefined
+    });
     // eslint-disable-next-line no-unused-vars
     var _ref2 = cellProps,
       style = _ref2.style,
       children = _ref2.children,
       restProps = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded2);
     var columnClassname = cell === null || cell === void 0 || (_cell$column = cell.column) === null || _cell$column === void 0 ? void 0 : _cell$column.className;
-    var content = children || /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, !row.isSkeleton && cell.render('Cell'), row.isSkeleton && (_SkeletonText || (_SkeletonText = /*#__PURE__*/React__default["default"].createElement(react.SkeletonText, null))));
+    var content = children || /*#__PURE__*/React.createElement(React.Fragment, null, !row.isSkeleton && cell.render('Cell'), row.isSkeleton && (_SkeletonText || (_SkeletonText = /*#__PURE__*/React.createElement(react.SkeletonText, null))));
     if ((cell === null || cell === void 0 || (_cell$column2 = cell.column) === null || _cell$column2 === void 0 ? void 0 : _cell$column2.id) === commonColumnIds.selectionColumnId) {
       // directly render component without the wrapping TableCell
       return cell.render('Cell', {
         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;
     var associatedHeader = headers === null || headers === void 0 ? void 0 : headers.filter(function (h) {
       return h.id === cell.column.id;
     });
     var lastVisibleIndex = withActionsColumn ? 2 : 1;
-    var lastVisibleFlexStyle = index === visibleColumns.length - lastVisibleIndex ? '1 1 0' : '0 0 auto';
+    var lastVisibleFlexStyle = index === visibleColumns.length - lastVisibleIndex ? '1 0 auto' : '0 0 auto';
     if (style) {
       style.flex = lastVisibleFlexStyle;
     }
-    return /*#__PURE__*/React__default["default"].createElement(react.TableCell, _rollupPluginBabelHelpers["extends"]({
-      className: cx__default["default"]("".concat(blockClass, "__cell"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__expandable-row-cell"), row.canExpand && index === 0), "".concat(blockClass, "__expandable-row-cell--is-expanded"), row.isExpanded && index === 0), "".concat(blockClass, "__slug--cell"), associatedHeader && associatedHeader.length && /*#__PURE__*/React.isValidElement((_associatedHeader$ = associatedHeader[0]) === null || _associatedHeader$ === void 0 ? void 0 : _associatedHeader$.slug)), columnClassname)
+    return /*#__PURE__*/React.createElement(react.TableCell, _rollupPluginBabelHelpers.extends({
+      className: cx("".concat(blockClass, "__cell"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__expandable-row-cell"), (row.canExpand || getAsyncSubRows) && index === 0), "".concat(blockClass, "__expandable-row-cell--is-expanded"), row.isExpanded && index === 0), "".concat(blockClass, "__slug--cell"), associatedHeader && associatedHeader.length && /*#__PURE__*/React.isValidElement((_associatedHeader$ = associatedHeader[0]) === null || _associatedHeader$ === void 0 ? void 0 : _associatedHeader$.slug)), columnClassname)
     }, restProps, {
       style: style,
-      key: cell.column.id,
-      title: title
+      key: cell.column.id
     }), content);
   })), (renderExpandedRow === null || renderExpandedRow === void 0 ? void 0 : renderExpandedRow()) || undefined);
 };
 
-exports["default"] = DatagridRow;
+exports.default = DatagridRow;