@carbon/ibm-products 2.43.2-canary.33 → 2.43.2-canary.330

package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js

@@ -7,7 +7,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 PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
 import { px } from '@carbon/layout';
 import { pkg } from '../../settings.js';
@@ -36,6 +36,8 @@ var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
     setActiveCellCoordinates = _ref.setActiveCellCoordinates,
     setCurrentMatcher = _ref.setCurrentMatcher,
     setSelectionAreas = _ref.setSelectionAreas,
+    readOnlyTable = _ref.readOnlyTable,
+    disableColumnSwapping = _ref.disableColumnSwapping,
     setSelectionAreaData = _ref.setSelectionAreaData,
     rows = _ref.rows,
     totalVisibleColumns = _ref.totalVisibleColumns,
@@ -194,8 +196,8 @@ var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
         "data-row-index": "header",
         "data-column-index": index,
         tabIndex: -1,
-        onMouseDown: selectedHeader ? handleHeaderMouseDown(index) : undefined,
-        onMouseUp: selectedHeader && typeof setSelectedHeaderReorderActive === 'function' ? function () {
+        onMouseDown: selectedHeader && !readOnlyTable && !disableColumnSwapping ? handleHeaderMouseDown(index) : undefined,
+        onMouseUp: selectedHeader && !readOnlyTable && !disableColumnSwapping && typeof setSelectedHeaderReorderActive === 'function' ? function () {
           return setSelectedHeaderReorderActive(false);
         } : undefined,
         onClick: !selectedHeader ? handleColumnHeaderClick(index) : undefined,
@@ -203,7 +205,7 @@ var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
           height: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeight,
           width: (column === null || column === void 0 ? void 0 : column.width) || (defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.width)
         },
-        className: cx("".concat(blockClass, "__th"), "".concat(blockClass, "--interactive-cell-element"), _defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === index || checkActiveHeaderCell(index, selectionAreas, 'column')), "".concat(blockClass, "__th--selected-header"), selectedHeader), "".concat(blockClass, "__th--selected-header-reorder-active"), selectedHeaderReorderActive)),
+        className: cx("".concat(blockClass, "__th"), "".concat(blockClass, "--interactive-cell-element"), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === index || checkActiveHeaderCell(index, selectionAreas, 'column')), "".concat(blockClass, "__th--active-header-disabledSwapping"), disableColumnSwapping || readOnlyTable), "".concat(blockClass, "__th--selected-header"), selectedHeader), "".concat(blockClass, "__th--selected-header-reorder-active"), selectedHeaderReorderActive)),
         type: "button"
       }, column.render('Header')));
     }));
@@ -239,6 +241,10 @@ DataSpreadsheetHeader.propTypes = {
     rowHeaderWidth: PropTypes.number,
     width: PropTypes.number
   }),
+  /**
+   * Disable column swapping, default false
+   */
+  disableColumnSwapping: PropTypes.bool,
   /**
    * Whether or not a click/hold is active on a header cell
    */
@@ -247,6 +253,10 @@ DataSpreadsheetHeader.propTypes = {
    * Headers provided from useTable hook
    */
   headerGroups: PropTypes.arrayOf(PropTypes.object),
+  /**
+   * Read-only table
+   */
+  readOnlyTable: PropTypes.bool,
   /**
    * All of the spreadsheet row data
    */

package/es/components/DataSpreadsheet/index.d.ts

@@ -1 +1,8 @@
-export { DataSpreadsheet } from "./DataSpreadsheet";
+/**
+ * Copyright IBM Corp. 2022, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export { DataSpreadsheet } from './DataSpreadsheet';
+export type { DataSpreadsheetProps } from './DataSpreadsheet';

package/es/components/DataSpreadsheet/types/index.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.
+ */
 export type Size = 'xs' | 'sm' | 'md' | 'lg';
 export type Theme = 'light' | 'dark';
 export interface SpreadsheetColumn {
@@ -15,6 +21,7 @@ export interface PrevState {
     isEditing?: boolean;
     selectionAreaData?: any[];
     clickAndHoldActive?: boolean;
+    selectedHeaderReorderActive?: boolean;
     rowHeight?: number;
     cellSize?: Size;
 }

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

@@ -16,12 +16,8 @@ export interface DatagridProps {
      * The data grid state, much of it being supplied by the useDatagrid hook
      */
     datagridState: DataGridState;
-    /**
-     * Table title
-     */
-    title?: string;
 }
 /**
- * The `Datagrid` component is an extension of Carbon's DataTable component. At the most basic level, the `Datagrid` component takes in columns and rows and renders a data table. There is a set of data table extensions which this component provides support for, these can be found [here](https://pages.github.ibm.com/cdai-design/pal/components/data-table/overview/). This component is data driven and allows you to choose what pieces will be included based on the hooks/plugins that are provided.
+ * The `Datagrid` component is an extension of Carbon's DataTable component. At the most basic level, the `Datagrid` component takes in columns and rows and renders a data table. There is a set of data table extensions which this component provides support for, these can be found [here](https://pages.github.ibm.com/carbon/ibm-products/components/datagrid/overview/). This component is data driven and allows you to choose what pieces will be included based on the hooks/plugins that are provided.
  */
 export declare let Datagrid: React.ForwardRefExoticComponent<DatagridProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -7,7 +7,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 PropTypes from '../../../_virtual/index.js';
 import cx from 'classnames';
 import { getDevtoolsProps } from '../../../global/js/utils/devtools.js';
 import { pkg } from '../../../settings.js';
@@ -16,15 +16,14 @@ import { DatagridContent } from './DatagridContent.js';
 import { FilterProvider } from './addons/Filtering/FilterProvider.js';
 import { InlineEditProvider } from './addons/InlineEdit/InlineEditContext/InlineEditContext.js';
 
-var _excluded = ["datagridState", "title", "ariaToolbarLabel"];
+var _excluded = ["datagridState", "ariaToolbarLabel"];
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var componentName = 'Datagrid';
 /**
- * The `Datagrid` component is an extension of Carbon's DataTable component. At the most basic level, the `Datagrid` component takes in columns and rows and renders a data table. There is a set of data table extensions which this component provides support for, these can be found [here](https://pages.github.ibm.com/cdai-design/pal/components/data-table/overview/). This component is data driven and allows you to choose what pieces will be included based on the hooks/plugins that are provided.
+ * The `Datagrid` component is an extension of Carbon's DataTable component. At the most basic level, the `Datagrid` component takes in columns and rows and renders a data table. There is a set of data table extensions which this component provides support for, these can be found [here](https://pages.github.ibm.com/carbon/ibm-products/components/datagrid/overview/). This component is data driven and allows you to choose what pieces will be included based on the hooks/plugins that are provided.
  */
 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) {
@@ -40,7 +39,6 @@ var Datagrid = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     state = datagridState.state;
   var rows = DatagridPagination && datagridState.page || datagridState.rows;
   var props = {
-    title: title,
     datagridState: datagridState,
     ariaToolbarLabel: ariaToolbarLabel
   };
@@ -73,11 +71,7 @@ Datagrid.propTypes = {
    * The data grid state, much of it being supplied by the useDatagrid hook
    */
   /**@ts-ignore */
-  datagridState: PropTypes.object.isRequired,
-  /**
-   * Table title
-   */
-  title: PropTypes.string
+  datagridState: PropTypes.object.isRequired
 };
 
 export { Datagrid };

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

@@ -1,3 +1,10 @@
+/**
+ * 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 React from 'react';
 import { DataGridState } from '../types';
-declare const DatagridBody: (datagridState: DataGridState) => import("react/jsx-runtime").JSX.Element;
+declare const DatagridBody: (datagridState: DataGridState) => React.JSX.Element;
 export default DatagridBody;

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

@@ -1,4 +1,5 @@
 import '../../../feature-flags';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { DataGridState } from '../types';
 interface DatagridContentProps {
@@ -7,7 +8,7 @@ interface DatagridContentProps {
     title?: string;
 }
 export declare const DatagridContent: {
-    ({ datagridState, ariaToolbarLabel, title, }: DatagridContentProps): import("react/jsx-runtime").JSX.Element;
+    ({ datagridState, ariaToolbarLabel, title, }: DatagridContentProps): React.JSX.Element;
     propTypes: {
         ariaToolbarLabel: PropTypes.Requireable<string>;
         datagridState: PropTypes.Requireable<PropTypes.InferProps<{

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

@@ -14,7 +14,8 @@ import { CLEAR_SINGLE_FILTER, CLEAR_FILTERS } from './addons/Filtering/constants
 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 FilterSummary from '../../FilterSummary/FilterSummary.js';
+import PropTypes from '../../../_virtual/index.js';
 import cx from 'classnames';
 import { handleGridFocus } from './addons/InlineEdit/handleGridFocus.js';
 import { handleGridKeyPress } from './addons/InlineEdit/handleGridKeyPress.js';
@@ -26,7 +27,6 @@ import { useClickOutside } from '../../../global/js/hooks/useClickOutside.js';
 import { useMultipleKeyTracking } from '../../DataSpreadsheet/hooks/useMultipleKeyTracking.js';
 import useSubscribeToEventEmitter from './addons/Filtering/hooks/useSubscribeToEventEmitter.js';
 import FilterPanel from './addons/Filtering/FilterPanel.js';
-import FilterSummary from '../../FilterSummary/FilterSummary.js';
 
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var gcClass = "".concat(blockClass, "__grid-container");
@@ -40,7 +40,8 @@ var DatagridContent = function DatagridContent(_ref) {
   var _useContext2 = useContext(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,
@@ -151,14 +152,17 @@ var DatagridContent = function DatagridContent(_ref) {
     }
   }, [withInlineEdit, tableId, totalColumnsWidth, datagridState, gridActive]);
   useSubscribeToEventEmitter(CLEAR_SINGLE_FILTER, function (id) {
-    return clearSingleFilter(id, setAllFilters, state);
+    return clearSingleFilter(id, setAllFilters, state, contextTableId);
   });
   var renderFilterSummary = function renderFilterSummary() {
     return state.filters.length > 0 && /*#__PURE__*/React__default.createElement(FilterSummary, {
       className: "".concat(blockClass, "__filter-summary"),
       filters: filterTags,
       clearFilters: function clearFilters() {
-        return EventEmitter.dispatch(CLEAR_FILTERS, tableId);
+        EventEmitter.dispatch(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"

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

@@ -4,6 +4,7 @@
  * 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 React from 'react';
 import { DataGridState } from '../types';
-declare const DatagridEmptyBody: (datagridState: DataGridState) => import("react/jsx-runtime").JSX.Element;
+declare const DatagridEmptyBody: (datagridState: DataGridState) => React.JSX.Element;
 export default DatagridEmptyBody;

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

@@ -9,10 +9,14 @@ import { extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers
 import React__default from 'react';
 import { pkg } from '../../../settings.js';
 import { TableBody, TableRow, TableCell } from '@carbon/react';
+import { EmptyState } from '../../EmptyStates/EmptyState.js';
+import '../../EmptyStates/EmptyStateV2.js';
 import { ErrorEmptyState } from '../../EmptyStates/ErrorEmptyState/ErrorEmptyState.js';
 import { NoDataEmptyState } from '../../EmptyStates/NoDataEmptyState/NoDataEmptyState.js';
+import '../../EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js';
 import { NotFoundEmptyState } from '../../EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js';
-import { EmptyState } from '../../EmptyStates/EmptyState.js';
+import '../../EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js';
+import '../../EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js';
 
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var DatagridEmptyBody = function DatagridEmptyBody(datagridState) {

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

@@ -4,7 +4,7 @@
  * 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 { JSXElementConstructor } from 'react';
+import React, { JSXElementConstructor } from 'react';
 import { DataGridState } from '../types';
-declare const DatagridExpandedRow: (ExpandedRowContentComponent: JSXElementConstructor<any>) => (datagridState: DataGridState) => import("react/jsx-runtime").JSX.Element;
+declare const DatagridExpandedRow: (ExpandedRowContentComponent: JSXElementConstructor<any>) => (datagridState: DataGridState) => React.JSX.Element;
 export default DatagridExpandedRow;

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

@@ -16,7 +16,7 @@ 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$original, _row$original2;
     var row = datagridState.row;
     var expandedContentHeight = row.expandedContentHeight;
     var toggleParentHoverClass = function toggleParentHoverClass(event) {
@@ -36,7 +36,7 @@ var DatagridExpandedRow = function DatagridExpandedRow(ExpandedRowContentCompone
     var key = datagridState.key,
       _state = _objectWithoutProperties(datagridState, _excluded);
     return /*#__PURE__*/React__default.createElement("tr", {
-      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))),
+      className: cx("".concat(blockClass, "__expanded-row"), _defineProperty(_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)), "".concat(blockClass, "__ai-label--row"), /*#__PURE__*/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');
       },
@@ -47,8 +47,10 @@ var DatagridExpandedRow = function DatagridExpandedRow(ExpandedRowContentCompone
       className: "".concat(blockClass, "__expanded-row-cell-wrapper")
     }, /*#__PURE__*/React__default.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.createElement(ExpandedRowContentComponent, _extends({
       key: key

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

@@ -4,6 +4,7 @@
  * 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 React from 'react';
 import { DataGridState } from '../types';
-declare const DatagridHead: (datagridState: DataGridState) => import("react/jsx-runtime").JSX.Element;
+declare const DatagridHead: (datagridState: DataGridState) => React.JSX.Element;
 export default DatagridHead;

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

@@ -14,7 +14,7 @@ import { selectionColumnId } from '../common-column-ids.js';
 import { pkg } from '../../../settings.js';
 import { handleColumnResizeEndEvent, handleColumnResizingEvent } from './addons/stateReducer.js';
 import { getNodeTextContent } from '../../../global/js/utils/getNodeTextContent.js';
-import { DatagridSlug } from './addons/Slug/DatagridSlug.js';
+import { DatagridAILabel } from './addons/AiLabel/DatagridAiLabel.js';
 import { useInitialColumnSort } from '../useInitialColumnSort.js';
 
 var _th;
@@ -23,10 +23,8 @@ var _excluded = ["className"],
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var getAccessibilityProps = function getAccessibilityProps(header) {
   var props = {};
-  var title = getNodeTextContent(header.Header);
-  if (title) {
-    props.title = title;
-  } else {
+  var content = getNodeTextContent(header.Header);
+  if (!content) {
     props['aria-hidden'] = true;
   }
   return props;
@@ -82,6 +80,7 @@ var ResizeHeader = function ResizeHeader(_ref) {
     "aria-label": resizerAriaLabel || 'Resize column',
     disabled: isFetching
   })), /*#__PURE__*/React__default.createElement("span", {
+    role: "separator",
     className: "".concat(blockClass, "__col-resize-indicator")
   }));
 };
@@ -136,20 +135,22 @@ 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 = _objectWithoutProperties(_headerGroup$getHeade, _excluded);
-  var renderSlug = function renderSlug(slug) {
+  var renderAILabel = function renderAILabel(aiLabel) {
     if (isTableSortable) {
       return;
     }
-    return /*#__PURE__*/React__default.createElement(DatagridSlug, {
-      slug: slug
+    return /*#__PURE__*/React__default.createElement(DatagridAILabel, {
+      aiLabel: aiLabel
     });
   };
   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 _r$original, _r$original2;
+    return /*#__PURE__*/isValidElement(r === null || r === void 0 || (_r$original = r.original) === null || _r$original === void 0 ? void 0 : _r$original.aiLabel) || /*#__PURE__*/isValidElement(r === null || r === void 0 || (_r$original2 = r.original) === null || _r$original2 === void 0 ? void 0 : _r$original2.slug);
   });
   var key = headerGroupProps.key,
     rowProps = _objectWithoutProperties(headerGroupProps, _excluded2);
@@ -185,20 +186,27 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
     var _ref5 = columnResizing || {},
       columnWidths = _ref5.columnWidths;
     var originalCol = visibleColumns[index];
-    var _header$getHeaderProp = header.getHeaderProps(),
+    var _header$getHeaderProp = header.getHeaderProps({
+        role: undefined
+      }),
       headerProps = _extends({}, (_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 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.createElement(TableHeader, _extends({}, headerProps, {
-      className: cx(header === null || header === void 0 ? void 0 : header.className, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_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.isValidElement(header === null || header === void 0 ? void 0 : header.slug)), headerProps.className),
+      className: cx(header === null || header === void 0 ? void 0 : header.className, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_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.isValidElement(header === null || header === void 0 ? void 0 : header.slug)), "".concat(blockClass, "__with-ai-label"), header.aiLabel && /*#__PURE__*/React__default.isValidElement(header === null || header === void 0 ? void 0 : header.aiLabel)), 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.createElement(ResizeHeader, {
+    }, getAccessibilityProps(header)), header.render('Header'), renderAILabel(header.aiLabel || header.slug), resizerProps && !header.isAction && /*#__PURE__*/React__default.createElement(ResizeHeader, {
       resizerProps: resizerProps,
       header: header,
       handleOnMouseDownResize: handleOnMouseDownResize,

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

@@ -1,3 +1,10 @@
+/**
+ * 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 React from 'react';
 import { DataGridState } from '../types';
-declare const DatagridRefBody: (datagridState: DataGridState) => import("react/jsx-runtime").JSX.Element;
+declare const DatagridRefBody: (datagridState: DataGridState) => React.JSX.Element;
 export default DatagridRefBody;

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

@@ -4,6 +4,7 @@
  * 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 React from 'react';
 import { DataGridState } from '../types';
-declare const DatagridRow: (datagridState: DataGridState) => import("react/jsx-runtime").JSX.Element;
+declare const DatagridRow: (datagridState: DataGridState) => React.JSX.Element;
 export default DatagridRow;

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

@@ -12,7 +12,7 @@ import { px } from '@carbon/layout';
 import { selectionColumnId } from '../common-column-ids.js';
 import cx from 'classnames';
 import { pkg, carbon } from '../../../settings.js';
-import { DatagridSlug } from './addons/Slug/DatagridSlug.js';
+import { DatagridAILabel } from './addons/AiLabel/DatagridAiLabel.js';
 
 var _SkeletonText;
 var _excluded = ["className"],
@@ -28,7 +28,7 @@ var rowHeights = {
 
 // eslint-disable-next-line react/prop-types
 var DatagridRow = function DatagridRow(datagridState) {
-  var _row$original, _row$original2, _row$original3;
+  var _row$original, _row$original2, _row$original3, _row$original4, _row$original5, _row$original6;
   var row = datagridState.row,
     rows = datagridState.rows,
     rowSize = datagridState.rowSize,
@@ -40,7 +40,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;
@@ -108,36 +109,45 @@ var DatagridRow = function DatagridRow(datagridState) {
     }
     return {};
   };
-  var _row$getRowProps = row.getRowProps(),
+  var _row$getRowProps = row.getRowProps({
+      role: undefined
+    }),
     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 _r$original, _r$original2;
+    return /*#__PURE__*/isValidElement(r === null || r === void 0 || (_r$original = r.original) === null || _r$original === void 0 ? void 0 : _r$original.aiLabel) || /*#__PURE__*/isValidElement(r === null || r === void 0 || (_r$original2 = r.original) === null || _r$original2 === void 0 ? void 0 : _r$original2.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)));
+  var rowClassNames = cx("".concat(blockClass, "__carbon-row"), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_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(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)), "".concat(blockClass, "__ai-label--row"), /*#__PURE__*/isValidElement(row === null || row === void 0 || (_row$original2 = row.original) === null || _row$original2 === void 0 ? void 0 : _row$original2.aiLabel)));
   var withActionsColumn = headers ? !!headers.filter(function (header) {
     return header.isAction;
   }).length : false;
+  var rowKey = !row.isSkeleton ? key : row.skeletonKey;
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
-    key: key
+    key: "".concat(rowKey, "__").concat(key, "__row--fragment")
   }, /*#__PURE__*/React__default.createElement(TableRow, _extends({}, rowProps, {
     className: cx(rowClassNames, className),
-    key: row.id,
+    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.createElement("td", {
+  }, setAdditionalRowProps()), foundAIRow ? row !== null && row !== void 0 && (_row$original3 = row.original) !== null && _row$original3 !== void 0 && _row$original3.aiLabel ? /*#__PURE__*/React__default.createElement("td", {
+    className: cx("".concat(blockClass, "__table-row-ai-enabled"), _defineProperty({}, "".concat(blockClass, "__ai-label--expanded"), row.isExpanded))
+  }, /*#__PURE__*/React__default.createElement(DatagridAILabel, {
+    aiLabel: row === null || row === void 0 || (_row$original4 = row.original) === null || _row$original4 === void 0 ? void 0 : _row$original4.aiLabel
+  })) : row !== null && row !== void 0 && (_row$original5 = row.original) !== null && _row$original5 !== void 0 && _row$original5.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$original3 = row.original) === null || _row$original3 === void 0 ? void 0 : _row$original3.slug
+  }, /*#__PURE__*/React__default.createElement(DatagridAILabel, {
+    aiLabel: row === null || row === void 0 || (_row$original6 = row.original) === null || _row$original6 === void 0 ? void 0 : _row$original6.slug
   })) : /*#__PURE__*/React__default.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$, _associatedHeader$2;
+    var cellProps = cell.getCellProps({
+      role: undefined
+    });
     // eslint-disable-next-line no-unused-vars
     var _ref2 = cellProps,
       style = _ref2.style,
@@ -151,21 +161,19 @@ var DatagridRow = function DatagridRow(datagridState) {
         key: cell.column.id
       });
     }
-    var title = content === null || content === void 0 || (_content$props = content.props) === null || _content$props === void 0 || (_content$props = _content$props.children[0]) === null || _content$props === void 0 || (_content$props = _content$props.props) === null || _content$props === void 0 ? void 0 : _content$props.value;
     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.createElement(TableCell, _extends({
-      className: cx("".concat(blockClass, "__cell"), _defineProperty(_defineProperty(_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__*/isValidElement((_associatedHeader$ = associatedHeader[0]) === null || _associatedHeader$ === void 0 ? void 0 : _associatedHeader$.slug)), columnClassname)
+      className: cx("".concat(blockClass, "__cell"), _defineProperty(_defineProperty(_defineProperty(_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__*/isValidElement((_associatedHeader$ = associatedHeader[0]) === null || _associatedHeader$ === void 0 ? void 0 : _associatedHeader$.slug)), "".concat(blockClass, "__ai-label--cell"), associatedHeader && associatedHeader.length && /*#__PURE__*/isValidElement((_associatedHeader$2 = associatedHeader[0]) === null || _associatedHeader$2 === void 0 ? void 0 : _associatedHeader$2.aiLabel)), columnClassname)
     }, restProps, {
       style: style,
-      key: cell.column.id,
-      title: title
+      key: cell.column.id
     }), content);
   })), (renderExpandedRow === null || renderExpandedRow === void 0 ? void 0 : renderExpandedRow()) || undefined);
 };

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

@@ -4,6 +4,7 @@
  * 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 React from 'react';
 import { DataGridState } from '../types';
-declare const SelectAll: (datagridState: DataGridState) => import("react/jsx-runtime").JSX.Element;
+declare const SelectAll: (datagridState: DataGridState) => React.JSX.Element;
 export { SelectAll };