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

package/es/components/CoachmarkButton/CoachmarkButton.js

@@ -8,7 +8,7 @@
 import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
 import PropTypes from '../../node_modules/prop-types/index.js';
-import cx from '../../node_modules/classnames/index.js';
+import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
 import { Button } from '@carbon/react';

package/es/components/CoachmarkFixed/CoachmarkFixed.js

@@ -8,7 +8,7 @@
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useRef, useState, useCallback, useEffect } from 'react';
 import PropTypes from '../../node_modules/prop-types/index.js';
-import cx from '../../node_modules/classnames/index.js';
+import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
 import { createPortal } from 'react-dom';

package/es/components/CoachmarkOverlayElement/CoachmarkOverlayElement.js

@@ -8,7 +8,7 @@
 import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
 import PropTypes from '../../node_modules/prop-types/index.js';
-import cx from '../../node_modules/classnames/index.js';
+import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
 

package/es/components/CoachmarkOverlayElements/CoachmarkOverlayElements.js

@@ -8,7 +8,7 @@
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useRef, useState, Children, useEffect } from 'react';
 import PropTypes from '../../node_modules/prop-types/index.js';
-import cx from '../../node_modules/classnames/index.js';
+import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
 import { Button } from '@carbon/react';

package/es/components/CoachmarkStack/CoachmarkStack.js

@@ -9,7 +9,7 @@ import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _
 import React__default, { useRef, useState, Children, useCallback, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import PropTypes from '../../node_modules/prop-types/index.js';
-import cx from '../../node_modules/classnames/index.js';
+import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
 import { CoachmarkOverlay } from '../Coachmark/CoachmarkOverlay.js';

package/es/components/CoachmarkStack/CoachmarkStackHome.js

@@ -9,7 +9,7 @@ import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _
 import React__default, { forwardRef, useRef, useState, useEffect } from 'react';
 import pconsole from '../../global/js/utils/pconsole.js';
 import PropTypes from '../../node_modules/prop-types/index.js';
-import cx from '../../node_modules/classnames/index.js';
+import cx from 'classnames';
 import { Idea } from '@carbon/react/icons';
 import { Button } from '@carbon/react';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';

package/es/components/ComboButton/ComboButton.js

@@ -8,7 +8,7 @@
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, toArray as _toArray, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { ChevronUp, ChevronDown } from '@carbon/react/icons';
 import { Button, OverflowMenu, OverflowMenuItem } from '@carbon/react';
-import cx from '../../node_modules/classnames/index.js';
+import cx from 'classnames';
 import { p as propTypesExports } from '../../node_modules/prop-types/index.js';
 import uuidv4 from '../../global/js/utils/uuidv4.js';
 import React__default, { useRef, useState, Children, createElement } from 'react';

package/es/components/CreateFullPage/CreateFullPage.js

@@ -8,7 +8,7 @@
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useState, useRef, useEffect, createContext } from 'react';
 import PropTypes from '../../node_modules/prop-types/index.js';
-import cx from '../../node_modules/classnames/index.js';
+import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
 import { Form, ComposedModal, ModalHeader, ModalBody, ModalFooter, Button } from '@carbon/react';

package/es/components/CreateFullPage/CreateFullPageStep.js

@@ -8,7 +8,7 @@
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { forwardRef, useContext, useState, useEffect } from 'react';
 import PropTypes from '../../node_modules/prop-types/index.js';
-import cx from '../../node_modules/classnames/index.js';
+import cx from 'classnames';
 import { pkg } from '../../settings.js';
 import { Grid, Column, FormGroup } from '@carbon/react';
 import { StepsContext, StepNumberContext } from './CreateFullPage.js';

package/es/components/CreateInfluencer/CreateInfluencer.js

@@ -7,7 +7,7 @@
 
 import React__default from 'react';
 import PropTypes from '../../node_modules/prop-types/index.js';
-import cx from '../../node_modules/classnames/index.js';
+import cx from 'classnames';
 import { ProgressIndicator, ProgressStep } from '@carbon/react';
 import '../../global/js/utils/props-helper.js';
 import { pkg } from '../../settings.js';

package/es/components/CreateModal/CreateModal.js

@@ -9,7 +9,7 @@ import { objectWithoutProperties as _objectWithoutProperties, extends as _extend
 import React__default from 'react';
 import { ComposedModal, ModalHeader, ModalBody, Form, ModalFooter, Button } from '@carbon/react';
 import PropTypes from '../../node_modules/prop-types/index.js';
-import cx from '../../node_modules/classnames/index.js';
+import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
 import { usePortalTarget } from '../../global/js/hooks/usePortalTarget.js';

package/es/components/CreateSidePanel/CreateSidePanel.js

@@ -8,7 +8,7 @@
 import { objectWithoutProperties as _objectWithoutProperties, extends as _extends, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
 import PropTypes from '../../node_modules/prop-types/index.js';
-import cx from '../../node_modules/classnames/index.js';
+import cx from 'classnames';
 import { pkg } from '../../settings.js';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { Form } from '@carbon/react';

package/es/components/CreateTearsheet/CreateTearsheet.js

@@ -8,7 +8,7 @@
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { forwardRef, useState, useRef, useEffect, createContext } from 'react';
 import PropTypes from '../../node_modules/prop-types/index.js';
-import cx from '../../node_modules/classnames/index.js';
+import cx from 'classnames';
 import { Form } from '@carbon/react';
 import wrapFocus from '../../global/js/utils/wrapFocus.js';
 import { TearsheetShell } from '../Tearsheet/TearsheetShell.js';
@@ -23,7 +23,7 @@ import { useResetCreateComponent } from '../../global/js/hooks/useResetCreateCom
 import { useCreateComponentStepChange } from '../../global/js/hooks/useCreateComponentStepChange.js';
 import { CreateInfluencer } from '../CreateInfluencer/CreateInfluencer.js';
 
-var _excluded = ["backButtonText", "cancelButtonText", "children", "className", "description", "influencerWidth", "initialStep", "label", "nextButtonText", "onClose", "onRequestSubmit", "open", "firstFocusElement", "submitButtonText", "title", "verticalPosition"];
+var _excluded = ["backButtonText", "cancelButtonText", "children", "className", "description", "influencerWidth", "initialStep", "label", "nextButtonText", "onClose", "onRequestSubmit", "open", "firstFocusElement", "slug", "submitButtonText", "title", "verticalPosition"];
 var componentName = 'CreateTearsheet';
 var blockClass = "".concat(pkg.prefix, "--tearsheet-create");
 
@@ -56,6 +56,7 @@ var CreateTearsheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onRequestSubmit = _ref.onRequestSubmit,
     open = _ref.open,
     firstFocusElement = _ref.firstFocusElement,
+    slug = _ref.slug,
     submitButtonText = _ref.submitButtonText,
     title = _ref.title,
     _ref$verticalPosition = _ref.verticalPosition,
@@ -203,6 +204,7 @@ var CreateTearsheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onClose: onClose,
     open: open,
     size: "wide",
+    slug: slug,
     title: title,
     verticalPosition: verticalPosition,
     ref: ref
@@ -310,6 +312,10 @@ CreateTearsheet.propTypes = {
    * Specifies whether the tearsheet is currently open.
    */
   open: PropTypes.bool,
+  /**
+   *  **Experimental:** Provide a `Slug` component to be rendered inside the `Tearsheet` component
+   */
+  slug: PropTypes.node,
   /**
    * The submit button text
    */

package/es/components/CreateTearsheet/CreateTearsheetDivider.js

@@ -8,7 +8,7 @@
 import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { forwardRef } from 'react';
 import PropTypes from '../../node_modules/prop-types/index.js';
-import cx from '../../node_modules/classnames/index.js';
+import cx from 'classnames';
 import { pkg } from '../../settings.js';
 
 var _excluded = ["className"];

package/es/components/CreateTearsheet/CreateTearsheetStep.js

@@ -8,7 +8,7 @@
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { forwardRef, useContext, useState, useEffect, isValidElement } from 'react';
 import PropTypes from '../../node_modules/prop-types/index.js';
-import cx from '../../node_modules/classnames/index.js';
+import cx from 'classnames';
 import { Grid, Column, FormGroup } from '@carbon/react';
 import { StepsContext, StepNumberContext } from './CreateTearsheet.js';
 import { pkg } from '../../settings.js';

package/es/components/CreateTearsheetNarrow/CreateTearsheetNarrow.js

@@ -8,7 +8,7 @@
 import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
 import PropTypes from '../../node_modules/prop-types/index.js';
-import cx from '../../node_modules/classnames/index.js';
+import cx from 'classnames';
 import { Form } from '@carbon/react';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';

package/es/components/DataSpreadsheet/DataSpreadsheet.js

@@ -9,7 +9,7 @@ import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _
 import React__default, { useRef, useState, useMemo, useCallback, useEffect } from 'react';
 import { useTable, useBlockLayout, useColumnOrder } from 'react-table';
 import PropTypes from '../../node_modules/prop-types/index.js';
-import cx from '../../node_modules/classnames/index.js';
+import cx from 'classnames';
 import { pkg } from '../../settings.js';
 import { DataSpreadsheetBody } from './DataSpreadsheetBody.js';
 import { DataSpreadsheetHeader } from './DataSpreadsheetHeader.js';

package/es/components/DataSpreadsheet/DataSpreadsheetBody.js

@@ -9,7 +9,7 @@ import { slicedToArray as _slicedToArray, toConsumableArray as _toConsumableArra
 import React__default, { forwardRef, useState, useRef, useEffect, useCallback } from 'react';
 import PropTypes from '../../node_modules/prop-types/index.js';
 import { FixedSizeList } from 'react-window';
-import cx from '../../node_modules/classnames/index.js';
+import cx from 'classnames';
 import { px } from '@carbon/layout';
 import { pkg } from '../../settings.js';
 import { deepCloneObject } from '../../global/js/utils/deepCloneObject.js';
@@ -20,6 +20,7 @@ import { checkActiveHeaderCell } from './utils/checkActiveHeaderCell.js';
 import { checkSelectedHeaderCell } from './utils/checkSelectedHeaderCell.js';
 import { handleHeaderCellSelection } from './utils/handleHeaderCellSelection.js';
 import { getSpreadsheetWidth } from './utils/getSpreadsheetWidth.js';
+import { checkForHoldingKey } from './utils/checkForHoldingKey.js';
 import { usePreviousValue } from '../../global/js/hooks/usePreviousValue.js';
 import { useSpreadsheetMouseUp } from './hooks/useSpreadsheetMouseUp.js';
 
@@ -204,8 +205,8 @@ var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
       var closestBodyCell = event.target.closest(".".concat(blockClass, "__body--td"));
       var isValidSelectionAreaStart = closestBodyCell.classList.contains("".concat(blockClass, "__body--td"));
       setValidStartingPoint(isValidSelectionAreaStart);
-      var isHoldingCommandKey = event.metaKey || event.ctrlKey;
-      var isHoldingShiftKey = event.shiftKey;
+      var isHoldingCommandKey = checkForHoldingKey(event, 'cmd');
+      var isHoldingShiftKey = checkForHoldingKey(event, 'shiftKey');
       setContainerHasFocus(true);
       var activeCoordinates = {
         row: cell.row.index,
@@ -307,7 +308,7 @@ var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, [clickAndHoldActive, currentMatcher, setSelectionAreas]);
   var handleRowHeaderClick = useCallback(function (index) {
     return function (event) {
-      var isHoldingCommandKey = event.metaKey || event.ctrlKey;
+      var isHoldingCommandKey = checkForHoldingKey(event, 'cmd');
       handleHeaderCellSelection({
         type: 'row',
         activeCellCoordinates: activeCellCoordinates,

package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js

@@ -8,7 +8,7 @@
 import { slicedToArray as _slicedToArray, extends as _extends, objectSpread2 as _objectSpread2, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { forwardRef, useState, useEffect } from 'react';
 import PropTypes from '../../node_modules/prop-types/index.js';
-import cx from '../../node_modules/classnames/index.js';
+import cx from 'classnames';
 import { px } from '@carbon/layout';
 import { pkg } from '../../settings.js';
 import { checkActiveHeaderCell } from './utils/checkActiveHeaderCell.js';
@@ -16,6 +16,7 @@ import { checkSelectedHeaderCell } from './utils/checkSelectedHeaderCell.js';
 import { handleHeaderCellSelection } from './utils/handleHeaderCellSelection.js';
 import { selectAllCells } from './utils/selectAllCells.js';
 import { getSpreadsheetWidth } from './utils/getSpreadsheetWidth.js';
+import { checkForHoldingKey } from './utils/checkForHoldingKey.js';
 import { usePreviousValue } from '../../global/js/hooks/usePreviousValue.js';
 import { useSpreadsheetMouseMove } from './hooks/useSpreadsheetMouseMove.js';
 
@@ -62,8 +63,8 @@ var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, [cellSize, ref, scrollBarSize, previousState === null || previousState === void 0 ? void 0 : previousState.cellSize]);
   var handleColumnHeaderClick = function handleColumnHeaderClick(index) {
     return function (event) {
-      var isHoldingCommandKey = event.metaKey || event.ctrlKey;
-      var isHoldingShiftKey = event.shiftKey;
+      var isHoldingCommandKey = checkForHoldingKey(event, 'cmd');
+      var isHoldingShiftKey = checkForHoldingKey(event, 'shiftKey');
       handleHeaderCellSelection({
         type: 'column',
         activeCellCoordinates: activeCellCoordinates,

package/es/components/DataSpreadsheet/utils/checkForHoldingKey.d.ts

@@ -0,0 +1 @@
+export function checkForHoldingKey(event: any, key: any): any;

package/es/components/DataSpreadsheet/utils/checkForHoldingKey.js

@@ -0,0 +1,17 @@
+/**
+ * Copyright IBM Corp. 2020, 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.
+ */
+
+var checkForHoldingKey = function checkForHoldingKey(event, key) {
+  // possible key inputs: altKey,ctrlKey,metaKey,shiftKey
+  if (key == 'cmd') {
+    return event.metaKey || event.ctrlKey;
+  } else {
+    return event[key];
+  }
+};
+
+export { checkForHoldingKey };

package/es/components/Datagrid/Datagrid/Datagrid.js

@@ -8,7 +8,7 @@
 import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
 import PropTypes from '../../../node_modules/prop-types/index.js';
-import cx from '../../../node_modules/classnames/index.js';
+import cx from 'classnames';
 import { getDevtoolsProps } from '../../../global/js/utils/devtools.js';
 import { pkg } from '../../../settings.js';
 import pconsole from '../../../global/js/utils/pconsole.js';
@@ -16,7 +16,7 @@ import { DatagridContent } from './DatagridContent.js';
 import { FilterProvider } from './addons/Filtering/FilterProvider.js';
 import { InlineEditProvider } from './addons/InlineEdit/InlineEditContext/InlineEditContext.js';
 
-var _excluded = ["datagridState", "title"];
+var _excluded = ["datagridState", "title", "ariaToolbarLabel"];
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var componentName = 'Datagrid';
 
@@ -26,6 +26,7 @@ var componentName = 'Datagrid';
 var Datagrid = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var datagridState = _ref.datagridState,
     title = _ref.title,
+    ariaToolbarLabel = _ref.ariaToolbarLabel,
     rest = _objectWithoutProperties(_ref, _excluded);
   if (!datagridState) {
     pconsole.warn('Datagrid was not passed datagridState which is required to render this component.');
@@ -41,7 +42,8 @@ var Datagrid = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var rows = DatagridPagination && datagridState.page || datagridState.rows;
   var props = {
     title: title,
-    datagridState: datagridState
+    datagridState: datagridState,
+    ariaToolbarLabel: ariaToolbarLabel
   };
   return /*#__PURE__*/React__default.createElement(FilterProvider, {
     filters: filters,
@@ -62,6 +64,11 @@ Datagrid = pkg.checkComponentEnabled(Datagrid, componentName);
 // is used in preference to relying on function.name.
 Datagrid.displayName = componentName;
 Datagrid.propTypes = {
+  /**
+   * Specify a label to be read by screen readers on the container node
+   * 'aria-label' of the TableToolbar component.
+   */
+  ariaToolbarLabel: PropTypes.string,
   /**
    * The data grid state, much of it being supplied by the useDatagrid hook
    */

package/es/components/Datagrid/Datagrid/DatagridContent.d.ts

@@ -1,9 +1,11 @@
-export function DatagridContent({ datagridState, title }: {
+export function DatagridContent({ datagridState, title, ariaToolbarLabel }: {
     datagridState: any;
     title: any;
+    ariaToolbarLabel: any;
 }): import("react/jsx-runtime").JSX.Element;
 export namespace DatagridContent {
     namespace propTypes {
+        let ariaToolbarLabel: PropTypes.Requireable<string>;
         let datagridState: PropTypes.Requireable<PropTypes.InferProps<{
             getTableProps: PropTypes.Requireable<(...args: any[]) => any>;
             getFilterFlyoutProps: PropTypes.Requireable<(...args: any[]) => any>;

package/es/components/Datagrid/Datagrid/DatagridContent.js

@@ -14,7 +14,7 @@ import DatagridBody from './DatagridBody.js';
 import DatagridHead from './DatagridHead.js';
 import DatagridToolbar from './DatagridToolbar.js';
 import PropTypes from '../../../node_modules/prop-types/index.js';
-import cx from '../../../node_modules/classnames/index.js';
+import cx from 'classnames';
 import { handleGridFocus } from './addons/InlineEdit/handleGridFocus.js';
 import { handleGridKeyPress } from './addons/InlineEdit/handleGridKeyPress.js';
 import { px } from '@carbon/layout';
@@ -30,7 +30,8 @@ var blockClass = "".concat(pkg.prefix, "--datagrid");
 var gcClass = "".concat(blockClass, "__grid-container");
 var DatagridContent = function DatagridContent(_ref) {
   var datagridState = _ref.datagridState,
-    title = _ref.title;
+    title = _ref.title,
+    ariaToolbarLabel = _ref.ariaToolbarLabel;
   var _useContext = useContext(InlineEditContext),
     inlineEditState = _useContext.state,
     dispatch = _useContext.dispatch;
@@ -151,7 +152,9 @@ var DatagridContent = function DatagridContent(_ref) {
     className: cx("".concat(gcClass), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_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.createElement(DatagridToolbar, datagridState), /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement(DatagridToolbar, _extends({}, datagridState, {
+    ariaToolbarLabel: ariaToolbarLabel
+  })), /*#__PURE__*/React__default.createElement("div", {
     className: cx("".concat(blockClass, "__table-container"), _defineProperty({}, "".concat(blockClass, "__table-container--filter-open"), panelOpen)),
     ref: gridAreaRef
   }, (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'panel' && /*#__PURE__*/React__default.createElement(FilterPanel, _extends({}, getFilterFlyoutProps(), {
@@ -171,6 +174,7 @@ var DatagridContent = function DatagridContent(_ref) {
   }));
 };
 DatagridContent.propTypes = {
+  ariaToolbarLabel: PropTypes.string,
   datagridState: PropTypes.shape({
     getTableProps: PropTypes.func,
     getFilterFlyoutProps: PropTypes.func,

package/es/components/Datagrid/Datagrid/DatagridExpandedRow.js

@@ -5,21 +5,25 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React__default from 'react';
+import { defineProperty as _defineProperty } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { isValidElement } from 'react';
 import { pkg } from '../../../settings.js';
+import cx from 'classnames';
 
 var blockClass = "".concat(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 {
@@ -28,7 +32,7 @@ var DatagridExpandedRow = function DatagridExpandedRow(ExpandedRowContentCompone
       }
     };
     return /*#__PURE__*/React__default.createElement("tr", {
-      className: "".concat(blockClass, "__expanded-row"),
+      className: cx("".concat(blockClass, "__expanded-row"), _defineProperty({}, "".concat(blockClass, "__slug--row"), /*#__PURE__*/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/es/components/Datagrid/Datagrid/DatagridHeaderRow.js

@@ -7,7 +7,7 @@
 
 import { slicedToArray as _slicedToArray, objectWithoutProperties as _objectWithoutProperties, extends as _extends, defineProperty as _defineProperty, objectSpread2 as _objectSpread2 } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useEffect, useState, isValidElement } from 'react';
-import cx from '../../../node_modules/classnames/index.js';
+import cx from 'classnames';
 import { TableRow, TableHeader } from '@carbon/react';
 import { px } from '@carbon/layout';
 import { selectionColumnId } from '../common-column-ids.js';
@@ -42,7 +42,8 @@ var ResizeHeader = function ResizeHeader(_ref) {
     minWidth = _ref.minWidth,
     dispatch = _ref.dispatch,
     onColResizeEnd = _ref.onColResizeEnd,
-    resizerAriaLabel = _ref.resizerAriaLabel;
+    resizerAriaLabel = _ref.resizerAriaLabel,
+    isFetching = _ref.isFetching;
   // eslint-disable-next-line no-unused-vars
   resizerProps.role;
     var headerProps = _objectWithoutProperties(resizerProps, _excluded);
@@ -80,7 +81,8 @@ var ResizeHeader = function ResizeHeader(_ref) {
     className: "".concat(blockClass, "__col-resizer-range"),
     type: "range",
     defaultValue: originalCol.width,
-    "aria-label": resizerAriaLabel || 'Resize column'
+    "aria-label": resizerAriaLabel || 'Resize column',
+    disabled: isFetching
   })), /*#__PURE__*/React__default.createElement("span", {
     className: "".concat(blockClass, "__col-resize-indicator")
   }));
@@ -88,7 +90,8 @@ var ResizeHeader = function ResizeHeader(_ref) {
 var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
   var resizerAriaLabel = datagridState.resizerAriaLabel,
     isTableSortable = datagridState.isTableSortable,
-    rows = datagridState.rows;
+    rows = datagridState.rows,
+    isFetching = datagridState.isFetching;
   // Used to measure the height of the table and uses that value
   // to display a vertical line to indicate the column you are resizing
   useEffect(function () {
@@ -189,7 +192,8 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
       minWidth: minWidth,
       dispatch: dispatch,
       onColResizeEnd: onColResizeEnd,
-      resizerAriaLabel: resizerAriaLabel
+      resizerAriaLabel: resizerAriaLabel,
+      isFetching: isFetching
     }));
   }));
 };

package/es/components/Datagrid/Datagrid/DatagridRefBody.js

@@ -7,7 +7,7 @@
 
 import { extends as _extends, objectSpread2 as _objectSpread2 } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
-import cx from '../../../node_modules/classnames/index.js';
+import cx from 'classnames';
 import { pkg } from '../../../settings.js';
 
 var blockClass = "".concat(pkg.prefix, "--datagrid");

package/es/components/Datagrid/Datagrid/DatagridRow.js

@@ -5,17 +5,17 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { defineProperty as _defineProperty, objectWithoutProperties as _objectWithoutProperties, extends as _extends, objectSpread2 as _objectSpread2 } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends, objectSpread2 as _objectSpread2 } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { isValidElement } from 'react';
 import { TableRow, SkeletonText, TableCell } from '@carbon/react';
 import { px } from '@carbon/layout';
 import { selectionColumnId } from '../common-column-ids.js';
-import cx from '../../../node_modules/classnames/index.js';
+import cx from 'classnames';
 import { pkg, carbon } from '../../../settings.js';
 import { DatagridSlug } from './addons/Slug/DatagridSlug.js';
 
 var _SkeletonText;
-var _excluded = ["role"],
+var _excluded = ["role", "className"],
   _excluded2 = ["children", "role"];
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var rowHeights = {
@@ -28,7 +28,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,
@@ -38,7 +38,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;
@@ -98,7 +99,6 @@ var DatagridRow = function DatagridRow(datagridState) {
       hoverHandler(event);
     }
   };
-  var rowClassNames = cx("".concat(blockClass, "__carbon-row"), _defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), "".concat(blockClass, "__carbon-row-expandable"), row.canExpand), "".concat(carbon.prefix, "--data-table--selected"), row.isSelected));
   var setAdditionalRowProps = function setAdditionalRowProps() {
     if (withNestedRows || withExpandedRows) {
       return {
@@ -111,30 +111,31 @@ var DatagridRow = function DatagridRow(datagridState) {
   // eslint-disable-next-line no-unused-vars
   var _row$getRowProps = row.getRowProps();
     _row$getRowProps.role;
-    var rowProps = _objectWithoutProperties(_row$getRowProps, _excluded);
+    var className = _row$getRowProps.className,
+    rowProps = _objectWithoutProperties(_row$getRowProps, _excluded);
   var foundAIRow = rows.some(function (r) {
     var _r$original;
     return /*#__PURE__*/isValidElement(r === null || r === void 0 || (_r$original = r.original) === null || _r$original === void 0 ? void 0 : _r$original.slug);
   });
+  var rowClassNames = cx("".concat(blockClass, "__carbon-row"), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), "".concat(blockClass, "__carbon-row-expandable"), row.canExpand), "".concat(carbon.prefix, "--data-table--selected"), row.isSelected), "".concat(blockClass, "__slug--row"), /*#__PURE__*/isValidElement(row === null || row === void 0 || (_row$original = row.original) === null || _row$original === void 0 ? void 0 : _row$original.slug)));
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
     key: key
-  }, /*#__PURE__*/React__default.createElement(TableRow, _extends({
-    className: rowClassNames
-  }, rowProps, {
+  }, /*#__PURE__*/React__default.createElement(TableRow, _extends({}, rowProps, {
+    className: cx(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.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.createElement("td", {
+    className: cx("".concat(blockClass, "__table-row-ai-enabled"), _defineProperty({}, "".concat(blockClass, "__slug--expanded"), row.isExpanded))
   }, /*#__PURE__*/React__default.createElement(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.createElement("td", {
     className: "".concat(blockClass, "__table-row-ai-spacer")
   }) : null, row.cells.map(function (cell, index) {
-    var _cell$column, _content$props;
+    var _cell$column, _content$props, _associatedHeader$;
     var cellProps = cell.getCellProps();
     // eslint-disable-next-line no-unused-vars
     var children = cellProps.children;
@@ -148,8 +149,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.createElement(TableCell, _extends({
-      className: cx("".concat(blockClass, "__cell"), _defineProperty({}, "".concat(blockClass, "__expandable-row-cell"), row.canExpand && index === 0))
+      className: cx("".concat(blockClass, "__cell"), _defineProperty(_defineProperty({}, "".concat(blockClass, "__expandable-row-cell"), row.canExpand && index === 0), "".concat(blockClass, "__slug--cell"), associatedHeader && associatedHeader.length && /*#__PURE__*/isValidElement((_associatedHeader$ = associatedHeader[0]) === null || _associatedHeader$ === void 0 ? void 0 : _associatedHeader$.slug)))
     }, restProps, {
       key: cell.column.id,
       title: title

package/es/components/Datagrid/Datagrid/DatagridSelectAll.js

@@ -8,7 +8,7 @@
 import { slicedToArray as _slicedToArray, defineProperty as _defineProperty, objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useState, useLayoutEffect } from 'react';
 import { TableSelectAll } from '@carbon/react';
-import cx from '../../../node_modules/classnames/index.js';
+import cx from 'classnames';
 import { pkg } from '../../../settings.js';
 import { handleSelectAllRowData } from './addons/stateReducer.js';
 

package/es/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js

@@ -8,7 +8,7 @@
 import { slicedToArray as _slicedToArray, objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useState, useEffect, useLayoutEffect } from 'react';
 import PropTypes from '../../../node_modules/prop-types/index.js';
-import cx from '../../../node_modules/classnames/index.js';
+import cx from 'classnames';
 import { Checkbox, OverflowMenu, OverflowMenuItem } from '@carbon/react';
 import { CaretDown } from '@carbon/react/icons';
 import { pkg } from '../../../settings.js';