@carbon/ibm-products 2.65.0-rc.0 → 2.66.0-rc.0

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

@@ -30,55 +30,64 @@ var useMultipleKeyTracking = require('../../DataSpreadsheet/hooks/useMultipleKey
 var useSubscribeToEventEmitter = require('./addons/Filtering/hooks/useSubscribeToEventEmitter.js');
 var FilterPanel = require('./addons/Filtering/FilterPanel.js');
 
-var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
-var gcClass = "".concat(blockClass, "__grid-container");
-var DatagridContent = function DatagridContent(_ref) {
-  var datagridState = _ref.datagridState,
-    ariaToolbarLabel = _ref.ariaToolbarLabel,
-    title = _ref.title;
-  var _useContext = React.useContext(InlineEditContext.InlineEditContext),
-    inlineEditState = _useContext.state,
-    dispatch = _useContext.dispatch;
-  var _useContext2 = React.useContext(FilterProvider.FilterContext),
-    filterTags = _useContext2.filterTags,
-    EventEmitter = _useContext2.EventEmitter,
-    panelOpen = _useContext2.panelOpen,
-    contextTableId = _useContext2.tableId;
-  var activeCellId = inlineEditState.activeCellId,
-    gridActive = inlineEditState.gridActive,
-    editId = inlineEditState.editId,
-    featureFlags = inlineEditState.featureFlags;
-  var getTableProps = datagridState.getTableProps,
-    getFilterFlyoutProps = datagridState.getFilterFlyoutProps,
-    withVirtualScroll = datagridState.withVirtualScroll,
-    DatagridPagination = datagridState.DatagridPagination,
-    isFetching = datagridState.isFetching,
-    CustomizeColumnsTearsheet = datagridState.CustomizeColumnsTearsheet,
-    filterProps = datagridState.filterProps,
-    fullHeightDatagrid = datagridState.fullHeightDatagrid,
-    _datagridState$vertic = datagridState.verticalAlign,
-    verticalAlign = _datagridState$vertic === void 0 ? 'center' : _datagridState$vertic,
-    variableRowHeight = datagridState.variableRowHeight,
-    gridTitle = datagridState.gridTitle,
-    gridDescription = datagridState.gridDescription,
-    useDenseHeader = datagridState.useDenseHeader,
-    withInlineEdit = datagridState.withInlineEdit,
-    tableId = datagridState.tableId,
-    DatagridActions = datagridState.DatagridActions,
-    totalColumnsWidth = datagridState.totalColumnsWidth,
-    gridRef = datagridState.gridRef,
-    setAllFilters = datagridState.setAllFilters,
-    state = datagridState.state,
-    page = datagridState.page,
-    rows = datagridState.rows;
-  var columnResizing = state.columnResizing;
-  var contentRows = DatagridPagination && page || rows;
-  var gridAreaRef = React.useRef(null);
-  var multiKeyTrackingRef = React.useRef(null);
-  var enableEditableCell = index$1.useFeatureFlag('enable-datagrid-useEditableCell');
-  var enableInlineEdit = index$1.useFeatureFlag('enable-datagrid-useInlineEdit');
-  var enableCustomizeCols = index$1.useFeatureFlag('enable-datagrid-useCustomizeColumns');
-  React.useEffect(function () {
+const blockClass = `${settings.pkg.prefix}--datagrid`;
+const gcClass = `${blockClass}__grid-container`;
+const DatagridContent = _ref => {
+  let {
+    datagridState,
+    ariaToolbarLabel,
+    title
+  } = _ref;
+  const {
+    state: inlineEditState,
+    dispatch
+  } = React.useContext(InlineEditContext.InlineEditContext);
+  const {
+    filterTags,
+    EventEmitter,
+    panelOpen,
+    tableId: contextTableId
+  } = React.useContext(FilterProvider.FilterContext);
+  const {
+    activeCellId,
+    gridActive,
+    editId,
+    featureFlags
+  } = inlineEditState;
+  const {
+    getTableProps,
+    getFilterFlyoutProps,
+    withVirtualScroll,
+    DatagridPagination,
+    isFetching,
+    CustomizeColumnsTearsheet,
+    filterProps,
+    fullHeightDatagrid,
+    verticalAlign = 'center',
+    variableRowHeight,
+    gridTitle,
+    gridDescription,
+    useDenseHeader,
+    withInlineEdit,
+    tableId,
+    DatagridActions,
+    totalColumnsWidth,
+    gridRef,
+    setAllFilters,
+    state,
+    page,
+    rows
+  } = datagridState;
+  const {
+    columnResizing
+  } = state;
+  const contentRows = DatagridPagination && page || rows;
+  const gridAreaRef = React.useRef(null);
+  const multiKeyTrackingRef = React.useRef(null);
+  const enableEditableCell = index$1.useFeatureFlag('enable-datagrid-useEditableCell');
+  const enableInlineEdit = index$1.useFeatureFlag('enable-datagrid-useInlineEdit');
+  const enableCustomizeCols = index$1.useFeatureFlag('enable-datagrid-useCustomizeColumns');
+  React.useEffect(() => {
     dispatch({
       type: 'SET_FEATURE_FLAGS',
       payload: {
@@ -88,19 +97,19 @@ var DatagridContent = function DatagridContent(_ref) {
       }
     });
   }, [dispatch, enableEditableCell, enableCustomizeCols, enableInlineEdit]);
-  React.useEffect(function () {
-    if (featureFlags && (featureFlags !== null && featureFlags !== void 0 && featureFlags['enable-datagrid-useEditableCell'] || featureFlags !== null && featureFlags !== void 0 && featureFlags['enable-datagrid-useInlineEdit'])) {
-      console.error("Datagrid useEditableCell/useInlineEdit extension has not been enabled via feature flag.");
+  React.useEffect(() => {
+    if (featureFlags && (featureFlags?.['enable-datagrid-useEditableCell'] || featureFlags?.['enable-datagrid-useInlineEdit'])) {
+      console.error(`Datagrid useEditableCell/useInlineEdit extension has not been enabled via feature flag.`);
     }
   }, [featureFlags]);
-  useClickOutside.useClickOutside(gridAreaRef, function (target) {
+  useClickOutside.useClickOutside(gridAreaRef, target => {
     if (!withInlineEdit) {
       return;
     }
     // We return from here if we find a parent element with the selector below
     // because that element was initially part of the grid area but was removed
     // and swapped out with an input, i.e. text, number, selection, or date picker
-    if (target.closest(".".concat(blockClass, "__inline-edit-button")) || target.closest(".".concat(blockClass, "__inline-edit--select"))) {
+    if (target.closest(`.${blockClass}__inline-edit-button`) || target.closest(`.${blockClass}__inline-edit--select`)) {
       return;
     }
     dispatch({
@@ -108,98 +117,107 @@ var DatagridContent = function DatagridContent(_ref) {
       payload: activeCellId
     });
   });
-  var renderTable = function renderTable() {
-    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),
+  const renderTable = () => {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(react.Table, _rollupPluginBabelHelpers.extends({}, getTableProps?.(), {
+      className: cx(withVirtualScroll ? `${blockClass}__table-virtual-scroll` : `${blockClass}__table-simple`, `${blockClass}__vertical-align-${verticalAlign}`, {
+        [`${blockClass}__variable-row-height`]: variableRowHeight
+      }, {
+        [`${blockClass}__table-with-inline-edit`]: withInlineEdit
+      }, {
+        [`${blockClass}__table-grid-active`]: gridActive
+      }, {
+        [`${blockClass}__table-is-resizing`]: typeof columnResizing?.isResizingColumn === 'string'
+      }, getTableProps?.().className),
       role: withInlineEdit ? 'grid' : undefined,
       tabIndex: withInlineEdit ? 0 : -1,
-      onKeyDown: withInlineEdit && function (event) {
-        return handleGridKeyPress.handleGridKeyPress({
-          event: event,
-          dispatch: dispatch,
-          instance: datagridState,
-          keysPressedList: keysPressedList,
-          state: inlineEditState,
-          usingMac: usingMac,
-          ref: multiKeyTrackingRef
-        });
-      },
-      onFocus: withInlineEdit && function () {
-        return handleGridFocus.handleGridFocus(inlineEditState, dispatch);
-      },
-      title: title
+      onKeyDown: withInlineEdit && (event => handleGridKeyPress.handleGridKeyPress({
+        event,
+        dispatch,
+        instance: datagridState,
+        keysPressedList,
+        state: inlineEditState,
+        usingMac,
+        ref: multiKeyTrackingRef
+      })),
+      onFocus: withInlineEdit && (() => handleGridFocus.handleGridFocus(inlineEditState, dispatch)),
+      title
     }), (!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());
+    }))), filterProps?.variation === 'panel' && renderPagination());
   };
-  var _useMultipleKeyTracki = useMultipleKeyTracking.useMultipleKeyTracking({
-      ref: withInlineEdit ? multiKeyTrackingRef : null,
-      containerHasFocus: gridActive,
-      isEditing: !!editId
-    }),
-    keysPressedList = _useMultipleKeyTracki.keysPressedList,
-    usingMac = _useMultipleKeyTracki.usingMac;
+  const {
+    keysPressedList,
+    usingMac
+  } = useMultipleKeyTracking.useMultipleKeyTracking({
+    ref: withInlineEdit ? multiKeyTrackingRef : null,
+    containerHasFocus: gridActive,
+    isEditing: !!editId
+  });
 
   // Provides a width for the region outline for useInlineEdit
-  React.useEffect(function () {
-    var _gridElement$style;
+  React.useEffect(() => {
     if (!withInlineEdit) {
       return;
     }
-    var gridElement = document.querySelector("#".concat(tableId));
-    var tableHeader = gridElement === null || gridElement === void 0 ? void 0 : gridElement.querySelector(".".concat(settings.carbon.prefix, "--data-table-header"));
-    gridElement === null || gridElement === void 0 || (_gridElement$style = gridElement.style) === null || _gridElement$style === void 0 || _gridElement$style.setProperty("--".concat(blockClass, "--grid-width"), layout.px((totalColumnsWidth || 0) + 32));
+    const gridElement = document.querySelector(`#${tableId}`);
+    const tableHeader = gridElement?.querySelector(`.${settings.carbon.prefix}--data-table-header`);
+    gridElement?.style?.setProperty(`--${blockClass}--grid-width`, layout.px((totalColumnsWidth || 0) + 32));
     if (gridActive) {
-      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));
+      gridElement?.style.setProperty(`--${blockClass}--grid-header-height`, layout.px(tableHeader?.clientHeight || 0));
     }
   }, [withInlineEdit, tableId, totalColumnsWidth, datagridState, gridActive]);
-  useSubscribeToEventEmitter.default(constants.CLEAR_SINGLE_FILTER, function (id) {
-    return FilterProvider.clearSingleFilter(id, setAllFilters, state, contextTableId);
+  useSubscribeToEventEmitter.default(constants.CLEAR_SINGLE_FILTER, id => FilterProvider.clearSingleFilter(id, setAllFilters, state, contextTableId));
+  const renderFilterSummary = () => state.filters.length > 0 && /*#__PURE__*/React.createElement(FilterSummary.default, {
+    className: `${blockClass}__filter-summary`,
+    filters: filterTags,
+    clearFilters: () => {
+      EventEmitter.dispatch(constants.CLEAR_FILTERS, tableId);
+      if (typeof filterProps?.onClearFilters === 'function') {
+        filterProps.onClearFilters();
+      }
+    },
+    renderLabel: filterProps?.renderLabel,
+    overflowType: "tag"
   });
-  var renderFilterSummary = function renderFilterSummary() {
-    return state.filters.length > 0 && /*#__PURE__*/React.createElement(FilterSummary.default, {
-      className: "".concat(blockClass, "__filter-summary"),
-      filters: filterTags,
-      clearFilters: function clearFilters() {
-        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"
-    });
-  };
-  var renderPagination = function renderPagination() {
-    if ((contentRows === null || contentRows === void 0 ? void 0 : contentRows.length) > 0 && !isFetching && DatagridPagination) {
+  const renderPagination = () => {
+    if (contentRows?.length > 0 && !isFetching && DatagridPagination) {
       return /*#__PURE__*/React.createElement(DatagridPagination, datagridState);
     }
   };
   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)),
+    className: cx(`${gcClass}`, {
+      [`${gcClass}-active`]: gridActive,
+      [`${gcClass}-active--without-toolbar`]: withInlineEdit && !DatagridActions,
+      [`${gcClass}-inline-edit`]: withInlineEdit,
+      [`${blockClass}__full-height`]: withVirtualScroll || fullHeightDatagrid,
+      [`${blockClass}__with-pagination`]: DatagridPagination,
+      [`${blockClass}__dense-header`]: useDenseHeader
+    }),
     title: gridTitle,
     description: gridDescription
   }, /*#__PURE__*/React.createElement(DatagridToolbar.default, _rollupPluginBabelHelpers.extends({}, datagridState, {
     ariaToolbarLabel: ariaToolbarLabel
   })), /*#__PURE__*/React.createElement("div", {
-    className: cx("".concat(blockClass, "__table-container"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__table-container--filter-open"), panelOpen)),
+    className: cx(`${blockClass}__table-container`, {
+      [`${blockClass}__table-container--filter-open`]: panelOpen
+    }),
     ref: gridAreaRef
-  }, (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'panel' && /*#__PURE__*/React.createElement(FilterPanel.default, _rollupPluginBabelHelpers.extends({
+  }, filterProps?.variation === 'panel' && /*#__PURE__*/React.createElement(FilterPanel.default, _rollupPluginBabelHelpers.extends({
     updateMethod: undefined,
     setAllFilters: undefined
-  }, getFilterFlyoutProps === null || getFilterFlyoutProps === void 0 ? void 0 : getFilterFlyoutProps(), {
+  }, getFilterFlyoutProps?.(), {
     title: filterProps.panelTitle,
     filterSections: filterProps.sections,
     autoHideFilters: filterProps.autoHideFilters,
     isFetching: isFetching
   })), /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__table-container-inner")
+    className: `${blockClass}__table-container-inner`
   }, renderFilterSummary(), withInlineEdit ? /*#__PURE__*/React.createElement("div", {
     ref: multiKeyTrackingRef
   }, renderTable()) : withVirtualScroll ? /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__virtualScrollContainer"),
+    className: `${blockClass}__virtualScrollContainer`,
     ref: gridRef
-  }, renderTable()) : renderTable()))), (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) !== 'panel' && renderPagination(), CustomizeColumnsTearsheet && /*#__PURE__*/React.createElement(CustomizeColumnsTearsheet, {
+  }, renderTable()) : renderTable()))), filterProps?.variation !== 'panel' && renderPagination(), CustomizeColumnsTearsheet && /*#__PURE__*/React.createElement(CustomizeColumnsTearsheet, {
     instance: datagridState
   }));
 };

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

@@ -22,35 +22,36 @@ var NotFoundEmptyState = require('../../EmptyStates/NotFoundEmptyState/NotFoundE
 require('../../EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js');
 require('../../EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js');
 
-var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
-var DatagridEmptyBody = function DatagridEmptyBody(datagridState) {
-  var getTableBodyProps = datagridState.getTableBodyProps,
-    headers = datagridState.headers,
-    emptyStateTitle = datagridState.emptyStateTitle,
-    emptyStateDescription = datagridState.emptyStateDescription,
-    emptyStateSize = datagridState.emptyStateSize,
-    _datagridState$emptyS = datagridState.emptyStateType,
-    emptyStateType = _datagridState$emptyS === void 0 ? 'noData' : _datagridState$emptyS,
-    illustrationTheme = datagridState.illustrationTheme,
-    emptyStateAction = datagridState.emptyStateAction,
-    emptyStateLink = datagridState.emptyStateLink;
-  var emptyStateProps = {
-    illustrationTheme: illustrationTheme,
+const blockClass = `${settings.pkg.prefix}--datagrid`;
+const DatagridEmptyBody = datagridState => {
+  const {
+    getTableBodyProps,
+    headers,
+    emptyStateTitle,
+    emptyStateDescription,
+    emptyStateSize,
+    emptyStateType = 'noData',
+    illustrationTheme,
+    emptyStateAction,
+    emptyStateLink
+  } = datagridState;
+  const emptyStateProps = {
+    illustrationTheme,
     size: emptyStateSize,
     title: emptyStateTitle,
     subtitle: emptyStateDescription,
     action: emptyStateAction,
     link: emptyStateLink
   };
-  var validEmptyStates = ['error', 'noData', 'notFound'];
+  const validEmptyStates = ['error', 'noData', 'notFound'];
   return /*#__PURE__*/React.createElement(react.TableBody, _rollupPluginBabelHelpers.extends({}, getTableBodyProps({
     role: undefined
   }), {
     "aria-live": "off",
-    className: "".concat(blockClass, "__empty-state-body")
+    className: `${blockClass}__empty-state-body`
   }), /*#__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")
+    colSpan: headers?.length,
+    className: `${blockClass}__empty-state-cell`
   }, 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))));
 };
 

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

@@ -14,50 +14,49 @@ var React = require('react');
 var settings = require('../../../settings.js');
 var cx = require('classnames');
 
-var _excluded = ["key"];
-var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
-var DatagridExpandedRow = function DatagridExpandedRow(ExpandedRowContentComponent) {
-  return function (datagridState) {
-    var _row$original, _row$original2;
-    var row = datagridState.row;
-    var expandedContentHeight = row.expandedContentHeight;
-    var toggleParentHoverClass = function toggleParentHoverClass(event) {
-      var _event$target;
-      var eventType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-      /* istanbul ignore else */
-      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 {
-          parentNode.classList.remove("".concat(blockClass, "__expandable-row--hover"));
-        }
+const blockClass = `${settings.pkg.prefix}--datagrid`;
+const DatagridExpandedRow = ExpandedRowContentComponent => datagridState => {
+  const {
+    row
+  } = datagridState;
+  const {
+    expandedContentHeight
+  } = row;
+  const toggleParentHoverClass = function (event) {
+    let eventType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+    /* istanbul ignore else */
+    if (event?.target?.closest('tr').previousElementSibling) {
+      const parentNode = event?.target?.closest('tr').previousElementSibling;
+      if (eventType === 'enter') {
+        parentNode.classList.add(`${blockClass}__expandable-row--hover`);
+      } else {
+        parentNode.classList.remove(`${blockClass}__expandable-row--hover`);
       }
-    };
-    var key = datagridState.key,
-      _state = _rollupPluginBabelHelpers.objectWithoutProperties(datagridState, _excluded);
-    return /*#__PURE__*/React.createElement("tr", {
-      className: cx("".concat(blockClass, "__expanded-row"), _rollupPluginBabelHelpers.defineProperty(_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)), "".concat(blockClass, "__ai-label--row"), /*#__PURE__*/React.isValidElement(row === null || row === void 0 || (_row$original2 = row.original) === null || _row$original2 === void 0 ? void 0 : _row$original2.aiLabel))),
-      onMouseEnter: function onMouseEnter(event) {
-        return toggleParentHoverClass(event, 'enter');
-      },
-      onMouseLeave: function onMouseLeave(event) {
-        return toggleParentHoverClass(event);
-      }
-    }, /*#__PURE__*/React.createElement("td", {
-      className: "".concat(blockClass, "__expanded-row-cell-wrapper")
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "".concat(blockClass, "__expanded-row-content"),
-      ref: function ref(el) {
-        if (el && el.style && expandedContentHeight) {
-          el.style.height = "".concat(expandedContentHeight, "px");
-        }
-      }
-    }, /*#__PURE__*/React.createElement(ExpandedRowContentComponent, _rollupPluginBabelHelpers.extends({
-      key: key
-    }, _state)))));
+    }
   };
+  const {
+    key,
+    ..._state
+  } = datagridState;
+  return /*#__PURE__*/React.createElement("tr", {
+    className: cx(`${blockClass}__expanded-row`, {
+      [`${blockClass}__slug--row`]: /*#__PURE__*/React.isValidElement(row?.original?.slug),
+      [`${blockClass}__ai-label--row`]: /*#__PURE__*/React.isValidElement(row?.original?.aiLabel)
+    }),
+    onMouseEnter: event => toggleParentHoverClass(event, 'enter'),
+    onMouseLeave: event => toggleParentHoverClass(event)
+  }, /*#__PURE__*/React.createElement("td", {
+    className: `${blockClass}__expanded-row-cell-wrapper`
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}__expanded-row-content`,
+    ref: el => {
+      if (el && el.style && expandedContentHeight) {
+        el.style.height = `${expandedContentHeight}px`;
+      }
+    }
+  }, /*#__PURE__*/React.createElement(ExpandedRowContentComponent, _rollupPluginBabelHelpers.extends({
+    key: key
+  }, _state)))));
 };
 
 exports.default = DatagridExpandedRow;

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

@@ -12,16 +12,15 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var react = require('@carbon/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.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)
-    );
-  }));
+const DatagridHead = datagridState => {
+  const {
+    headerGroups = [],
+    headRef,
+    HeaderRow
+  } = datagridState;
+  return /*#__PURE__*/React.createElement(react.TableHead, null, headerGroups.map(headerGroup =>
+  // doesn't support header grouping.
+  HeaderRow?.(datagridState, headRef, headerGroup)));
 };
 
 exports.default = DatagridHead;