@carbon/ibm-products 2.43.2-canary.303 → 2.43.2-canary.304

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;
@@ -140,17 +140,17 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
     }),
     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);
@@ -203,10 +203,10 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
       });
     }
     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/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,
@@ -115,10 +115,10 @@ var DatagridRow = function DatagridRow(datagridState) {
     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(_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)));
+  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;
@@ -133,14 +133,18 @@ var DatagridRow = function DatagridRow(datagridState) {
     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, _associatedHeader$;
+    var _cell$column, _cell$column2, _associatedHeader$, _associatedHeader$2;
     var cellProps = cell.getCellProps({
       role: undefined
     });
@@ -166,7 +170,7 @@ var DatagridRow = function DatagridRow(datagridState) {
       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 || 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)), 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

package/es/components/Datagrid/Datagrid/addons/{Slug/DatagridSlug.d.ts → AiLabel/DatagridAiLabel.d.ts}

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { ReactNode } from 'react';
-interface DatagridSlugProps {
-    slug?: ReactNode;
+interface DatagridAILabelProps {
+    aiLabel?: ReactNode;
 }
-export declare const DatagridSlug: React.ForwardRefExoticComponent<DatagridSlugProps & React.RefAttributes<HTMLDivElement>>;
+export declare const DatagridAILabel: React.ForwardRefExoticComponent<DatagridAILabelProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/es/components/Datagrid/Datagrid/addons/AiLabel/DatagridAiLabel.js

@@ -0,0 +1,29 @@
+/**
+ * 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.
+ */
+
+import React__default, { forwardRef, isValidElement } from 'react';
+import PropTypes from '../../../../../_virtual/index.js';
+
+var DatagridAILabel = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var aiLabel = _ref.aiLabel;
+  if (aiLabel && /*#__PURE__*/isValidElement(aiLabel)) {
+    var normalizedAILabel = /*#__PURE__*/React__default.cloneElement(aiLabel, {
+      size: 'mini',
+      ref: ref
+    });
+    return normalizedAILabel;
+  }
+  return null;
+});
+DatagridAILabel.propTypes = {
+  /**
+   * Specify the AI AILabel to be displayed
+   */
+  aiLabel: PropTypes.node
+};
+
+export { DatagridAILabel };

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

@@ -128,7 +128,8 @@ export interface DataGridHeader<T extends object = any> extends ColumnInstance,
         [x: string]: any;
     }): unknown;
     isAction?: boolean;
-    slug?: any;
+    slug?: ReactNode;
+    aiLabel?: ReactNode;
 }
 export interface DataGridHeaderGroup<T extends object = any> extends HeaderGroup<T>, UseResizeColumnsColumnProps<T> {
 }

package/es/components/Datagrid/useDefaultStringRenderer.js

@@ -18,9 +18,9 @@ var useDefaultStringRenderer = function useDefaultStringRenderer(hooks) {
       className: cx("".concat(blockClass, "__defaultStringRenderer"), _defineProperty({}, "".concat(blockClass, "__defaultStringRenderer--multiline"), ((_tableProps$column = tableProps.column) === null || _tableProps$column === void 0 ? void 0 : _tableProps$column.multiLineWrap) || (tableProps === null || tableProps === void 0 ? void 0 : tableProps.multiLineWrapAll)))
     }, tableProps.value);
   };
-  var HeaderRenderer = function HeaderRenderer(header, slug) {
+  var HeaderRenderer = function HeaderRenderer(header, slug, aiLabel) {
     return /*#__PURE__*/React__default.createElement("div", {
-      className: cx("".concat(blockClass, "__defaultStringRenderer"), _defineProperty({}, "".concat(blockClass, "__defaultStringRenderer--slug"), slug && /*#__PURE__*/React__default.isValidElement(slug))),
+      className: cx("".concat(blockClass, "__defaultStringRenderer"), _defineProperty(_defineProperty({}, "".concat(blockClass, "__defaultStringRenderer--slug"), slug && /*#__PURE__*/React__default.isValidElement(slug)), "".concat(blockClass, "__defaultStringRenderer--ai-label"), aiLabel && /*#__PURE__*/React__default.isValidElement(aiLabel))),
       key: typeof header === 'string' ? header : ''
     }, header);
   };
@@ -29,7 +29,7 @@ var useDefaultStringRenderer = function useDefaultStringRenderer(hooks) {
       return _objectSpread2(_objectSpread2({
         Cell: StringRenderer
       }, column), {}, {
-        Header: column.HeaderRenderer || HeaderRenderer(column.Header, column.slug)
+        Header: column.HeaderRenderer || HeaderRenderer(column.Header, column.slug, column.aiLabel)
       });
     });
     return _toConsumableArray(columnsWithDefaultCells);

package/es/components/Datagrid/useSortableColumns.js

@@ -12,7 +12,7 @@ import { pkg, carbon } from '../../settings.js';
 import { Button } from '@carbon/react';
 import { ArrowsVertical, ArrowDown, ArrowUp } from '@carbon/react/icons';
 import { SelectAll } from './Datagrid/DatagridSelectAll.js';
-import { DatagridSlug } from './Datagrid/addons/Slug/DatagridSlug.js';
+import { DatagridAILabel } from './Datagrid/addons/AiLabel/DatagridAiLabel.js';
 
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var getNewSortOrder = function getNewSortOrder(currentOrder) {
@@ -78,9 +78,9 @@ var useSortableColumns = function useSortableColumns(hooks) {
       descendingSortableLabelText = instance.descendingSortableLabelText,
       defaultSortableLabelText = instance.defaultSortableLabelText;
     var onSortClick = function onSortClick(event, column) {
-      var slug = event.target.classList.contains("".concat(carbon.prefix, "--slug")) || event.target.closest(".".concat(carbon.prefix, "--slug"));
+      var aiLabel = event.target.classList.contains("".concat(carbon.prefix, "--slug")) || event.target.closest(".".concat(carbon.prefix, "--slug"));
       // Do not continue with sorting if we find a slug
-      if (slug) {
+      if (aiLabel) {
         event.stopPropagation();
         return;
       }
@@ -136,9 +136,9 @@ var useSortableColumns = function useSortableColumns(hooks) {
           },
           kind: "ghost",
           renderIcon: function renderIcon(props) {
-            var _headerProp$column;
-            return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(DatagridSlug, {
-              slug: headerProp === null || headerProp === void 0 || (_headerProp$column = headerProp.column) === null || _headerProp$column === void 0 ? void 0 : _headerProp$column.slug
+            var _headerProp$column, _headerProp$column2;
+            return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(DatagridAILabel, {
+              aiLabel: (headerProp === null || headerProp === void 0 || (_headerProp$column = headerProp.column) === null || _headerProp$column === void 0 ? void 0 : _headerProp$column.aiLabel) || (headerProp === null || headerProp === void 0 || (_headerProp$column2 = headerProp.column) === null || _headerProp$column2 === void 0 ? void 0 : _headerProp$column2.slug)
             }), icon(headerProp === null || headerProp === void 0 ? void 0 : headerProp.column, props));
           },
           id: column === null || column === void 0 ? void 0 : column.id,

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

@@ -20,7 +20,7 @@ var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
 // eslint-disable-next-line react/prop-types
 var DatagridExpandedRow = function DatagridExpandedRow(ExpandedRowContentComponent) {
   return function (datagridState) {
-    var _row$original;
+    var _row$original, _row$original2;
     var row = datagridState.row;
     var expandedContentHeight = row.expandedContentHeight;
     var toggleParentHoverClass = function toggleParentHoverClass(event) {
@@ -40,7 +40,7 @@ var DatagridExpandedRow = function DatagridExpandedRow(ExpandedRowContentCompone
     var key = datagridState.key,
       _state = _rollupPluginBabelHelpers.objectWithoutProperties(datagridState, _excluded);
     return /*#__PURE__*/React.createElement("tr", {
-      className: cx("".concat(blockClass, "__expanded-row"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__slug--row"), /*#__PURE__*/React.isValidElement(row === null || row === void 0 || (_row$original = row.original) === null || _row$original === void 0 ? void 0 : _row$original.slug))),
+      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');
       },

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

@@ -18,7 +18,7 @@ var commonColumnIds = require('../common-column-ids.js');
 var settings = require('../../../settings.js');
 var stateReducer = require('./addons/stateReducer.js');
 var getNodeTextContent = require('../../../global/js/utils/getNodeTextContent.js');
-var DatagridSlug = require('./addons/Slug/DatagridSlug.js');
+var DatagridAiLabel = require('./addons/AiLabel/DatagridAiLabel.js');
 var useInitialColumnSort = require('../useInitialColumnSort.js');
 
 var _th;
@@ -144,17 +144,17 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
     }),
     headerGroupClassName = _headerGroup$getHeade.className,
     headerGroupProps = _rollupPluginBabelHelpers.objectWithoutProperties(_headerGroup$getHeade, _excluded);
-  var renderSlug = function renderSlug(slug) {
+  var renderAILabel = function renderAILabel(aiLabel) {
     if (isTableSortable) {
       return;
     }
-    return /*#__PURE__*/React.createElement(DatagridSlug.DatagridSlug, {
-      slug: slug
+    return /*#__PURE__*/React.createElement(DatagridAiLabel.DatagridAILabel, {
+      aiLabel: aiLabel
     });
   };
   var foundAIRow = rows.some(function (r) {
-    var _r$original;
-    return /*#__PURE__*/React.isValidElement(r === null || r === void 0 || (_r$original = r.original) === null || _r$original === void 0 ? void 0 : _r$original.slug);
+    var _r$original, _r$original2;
+    return /*#__PURE__*/React.isValidElement(r === null || r === void 0 || (_r$original = r.original) === null || _r$original === void 0 ? void 0 : _r$original.aiLabel) || /*#__PURE__*/React.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 = _rollupPluginBabelHelpers.objectWithoutProperties(headerGroupProps, _excluded2);
@@ -207,10 +207,10 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
       });
     }
     return /*#__PURE__*/React.createElement(react.TableHeader, _rollupPluginBabelHelpers.extends({}, headerProps, {
-      className: cx(header === null || header === void 0 ? void 0 : header.className, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__resizableColumn"), resizerProps), "".concat(blockClass, "__isResizing"), header === null || header === void 0 ? void 0 : header.isResizing), "".concat(blockClass, "__sortableColumn"), datagridState.isTableSortable && header.id !== 'spacer'), "".concat(blockClass, "__isSorted"), header === null || header === void 0 ? void 0 : header.isSorted), "".concat(blockClass, "__header-actions-column"), header === null || header === void 0 ? void 0 : header.isAction), "".concat(blockClass, "__with-slug"), header.slug && /*#__PURE__*/React.isValidElement(header === null || header === void 0 ? void 0 : header.slug)), headerProps.className),
+      className: cx(header === null || header === void 0 ? void 0 : header.className, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__resizableColumn"), resizerProps), "".concat(blockClass, "__isResizing"), header === null || header === void 0 ? void 0 : header.isResizing), "".concat(blockClass, "__sortableColumn"), datagridState.isTableSortable && header.id !== 'spacer'), "".concat(blockClass, "__isSorted"), header === null || header === void 0 ? void 0 : header.isSorted), "".concat(blockClass, "__header-actions-column"), header === null || header === void 0 ? void 0 : header.isAction), "".concat(blockClass, "__with-slug"), header.slug && /*#__PURE__*/React.isValidElement(header === null || header === void 0 ? void 0 : header.slug)), "".concat(blockClass, "__with-ai-label"), header.aiLabel && /*#__PURE__*/React.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.createElement(ResizeHeader, {
+    }, getAccessibilityProps(header)), header.render('Header'), renderAILabel(header.aiLabel || header.slug), resizerProps && !header.isAction && /*#__PURE__*/React.createElement(ResizeHeader, {
       resizerProps: resizerProps,
       header: header,
       handleOnMouseDownResize: handleOnMouseDownResize,

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

@@ -16,7 +16,7 @@ var layout = require('@carbon/layout');
 var commonColumnIds = require('../common-column-ids.js');
 var cx = require('classnames');
 var settings = require('../../../settings.js');
-var DatagridSlug = require('./addons/Slug/DatagridSlug.js');
+var DatagridAiLabel = require('./addons/AiLabel/DatagridAiLabel.js');
 
 var _SkeletonText;
 var _excluded = ["className"],
@@ -32,7 +32,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,
@@ -119,10 +119,10 @@ var DatagridRow = function DatagridRow(datagridState) {
     className = _row$getRowProps.className,
     rowProps = _rollupPluginBabelHelpers.objectWithoutProperties(_row$getRowProps, _excluded);
   var foundAIRow = rows.some(function (r) {
-    var _r$original;
-    return /*#__PURE__*/React.isValidElement(r === null || r === void 0 || (_r$original = r.original) === null || _r$original === void 0 ? void 0 : _r$original.slug);
+    var _r$original, _r$original2;
+    return /*#__PURE__*/React.isValidElement(r === null || r === void 0 || (_r$original = r.original) === null || _r$original === void 0 ? void 0 : _r$original.aiLabel) || /*#__PURE__*/React.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"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), "".concat(blockClass, "__carbon-row-expandable"), row.canExpand), "".concat(blockClass, "__carbon-row-expandable--async"), getAsyncSubRows && row.depth > 0), "".concat(settings.carbon.prefix, "--data-table--selected"), row.isSelected), "".concat(blockClass, "__slug--row"), /*#__PURE__*/React.isValidElement(row === null || row === void 0 || (_row$original = row.original) === null || _row$original === void 0 ? void 0 : _row$original.slug)));
+  var rowClassNames = cx("".concat(blockClass, "__carbon-row"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), "".concat(blockClass, "__carbon-row-expandable"), row.canExpand), "".concat(blockClass, "__carbon-row-expandable--async"), getAsyncSubRows && row.depth > 0), "".concat(settings.carbon.prefix, "--data-table--selected"), row.isSelected), "".concat(blockClass, "__slug--row"), /*#__PURE__*/React.isValidElement(row === null || row === void 0 || (_row$original = row.original) === null || _row$original === void 0 ? void 0 : _row$original.slug)), "".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)));
   var withActionsColumn = headers ? !!headers.filter(function (header) {
     return header.isAction;
   }).length : false;
@@ -137,14 +137,18 @@ var DatagridRow = function DatagridRow(datagridState) {
     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.createElement("td", {
+  }, setAdditionalRowProps()), foundAIRow ? row !== null && row !== void 0 && (_row$original3 = row.original) !== null && _row$original3 !== void 0 && _row$original3.aiLabel ? /*#__PURE__*/React.createElement("td", {
+    className: cx("".concat(blockClass, "__table-row-ai-enabled"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__ai-label--expanded"), row.isExpanded))
+  }, /*#__PURE__*/React.createElement(DatagridAiLabel.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.createElement("td", {
     className: cx("".concat(blockClass, "__table-row-ai-enabled"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__slug--expanded"), row.isExpanded))
-  }, /*#__PURE__*/React.createElement(DatagridSlug.DatagridSlug, {
-    slug: row === null || row === void 0 || (_row$original3 = row.original) === null || _row$original3 === void 0 ? void 0 : _row$original3.slug
+  }, /*#__PURE__*/React.createElement(DatagridAiLabel.DatagridAILabel, {
+    aiLabel: row === null || row === void 0 || (_row$original6 = row.original) === null || _row$original6 === void 0 ? void 0 : _row$original6.slug
   })) : /*#__PURE__*/React.createElement("td", {
     className: "".concat(blockClass, "__table-row-ai-spacer")
   }) : null, row.cells.map(function (cell, index) {
-    var _cell$column, _cell$column2, _associatedHeader$;
+    var _cell$column, _cell$column2, _associatedHeader$, _associatedHeader$2;
     var cellProps = cell.getCellProps({
       role: undefined
     });
@@ -170,7 +174,7 @@ var DatagridRow = function DatagridRow(datagridState) {
       style.flex = lastVisibleFlexStyle;
     }
     return /*#__PURE__*/React.createElement(react.TableCell, _rollupPluginBabelHelpers.extends({
-      className: cx("".concat(blockClass, "__cell"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__expandable-row-cell"), (row.canExpand || getAsyncSubRows) && index === 0), "".concat(blockClass, "__expandable-row-cell--is-expanded"), row.isExpanded && index === 0), "".concat(blockClass, "__slug--cell"), associatedHeader && associatedHeader.length && /*#__PURE__*/React.isValidElement((_associatedHeader$ = associatedHeader[0]) === null || _associatedHeader$ === void 0 ? void 0 : _associatedHeader$.slug)), columnClassname)
+      className: cx("".concat(blockClass, "__cell"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__expandable-row-cell"), (row.canExpand || getAsyncSubRows) && index === 0), "".concat(blockClass, "__expandable-row-cell--is-expanded"), row.isExpanded && index === 0), "".concat(blockClass, "__slug--cell"), associatedHeader && associatedHeader.length && /*#__PURE__*/React.isValidElement((_associatedHeader$ = associatedHeader[0]) === null || _associatedHeader$ === void 0 ? void 0 : _associatedHeader$.slug)), "".concat(blockClass, "__ai-label--cell"), associatedHeader && associatedHeader.length && /*#__PURE__*/React.isValidElement((_associatedHeader$2 = associatedHeader[0]) === null || _associatedHeader$2 === void 0 ? void 0 : _associatedHeader$2.aiLabel)), columnClassname)
     }, restProps, {
       style: style,
       key: cell.column.id

package/lib/components/Datagrid/Datagrid/addons/{Slug/DatagridSlug.d.ts → AiLabel/DatagridAiLabel.d.ts}

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { ReactNode } from 'react';
-interface DatagridSlugProps {
-    slug?: ReactNode;
+interface DatagridAILabelProps {
+    aiLabel?: ReactNode;
 }
-export declare const DatagridSlug: React.ForwardRefExoticComponent<DatagridSlugProps & React.RefAttributes<HTMLDivElement>>;
+export declare const DatagridAILabel: React.ForwardRefExoticComponent<DatagridAILabelProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/lib/components/Datagrid/Datagrid/addons/AiLabel/DatagridAiLabel.js

@@ -0,0 +1,31 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+var React = require('react');
+var index = require('../../../../../_virtual/index.js');
+
+var DatagridAILabel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var aiLabel = _ref.aiLabel;
+  if (aiLabel && /*#__PURE__*/React.isValidElement(aiLabel)) {
+    var normalizedAILabel = /*#__PURE__*/React.cloneElement(aiLabel, {
+      size: 'mini',
+      ref: ref
+    });
+    return normalizedAILabel;
+  }
+  return null;
+});
+DatagridAILabel.propTypes = {
+  /**
+   * Specify the AI AILabel to be displayed
+   */
+  aiLabel: index.default.node
+};
+
+exports.DatagridAILabel = DatagridAILabel;

package/lib/components/Datagrid/types/index.d.ts

@@ -128,7 +128,8 @@ export interface DataGridHeader<T extends object = any> extends ColumnInstance,
         [x: string]: any;
     }): unknown;
     isAction?: boolean;
-    slug?: any;
+    slug?: ReactNode;
+    aiLabel?: ReactNode;
 }
 export interface DataGridHeaderGroup<T extends object = any> extends HeaderGroup<T>, UseResizeColumnsColumnProps<T> {
 }

package/lib/components/Datagrid/useDefaultStringRenderer.js

@@ -22,9 +22,9 @@ var useDefaultStringRenderer = function useDefaultStringRenderer(hooks) {
       className: cx("".concat(blockClass, "__defaultStringRenderer"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__defaultStringRenderer--multiline"), ((_tableProps$column = tableProps.column) === null || _tableProps$column === void 0 ? void 0 : _tableProps$column.multiLineWrap) || (tableProps === null || tableProps === void 0 ? void 0 : tableProps.multiLineWrapAll)))
     }, tableProps.value);
   };
-  var HeaderRenderer = function HeaderRenderer(header, slug) {
+  var HeaderRenderer = function HeaderRenderer(header, slug, aiLabel) {
     return /*#__PURE__*/React.createElement("div", {
-      className: cx("".concat(blockClass, "__defaultStringRenderer"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__defaultStringRenderer--slug"), slug && /*#__PURE__*/React.isValidElement(slug))),
+      className: cx("".concat(blockClass, "__defaultStringRenderer"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__defaultStringRenderer--slug"), slug && /*#__PURE__*/React.isValidElement(slug)), "".concat(blockClass, "__defaultStringRenderer--ai-label"), aiLabel && /*#__PURE__*/React.isValidElement(aiLabel))),
       key: typeof header === 'string' ? header : ''
     }, header);
   };
@@ -33,7 +33,7 @@ var useDefaultStringRenderer = function useDefaultStringRenderer(hooks) {
       return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({
         Cell: StringRenderer
       }, column), {}, {
-        Header: column.HeaderRenderer || HeaderRenderer(column.Header, column.slug)
+        Header: column.HeaderRenderer || HeaderRenderer(column.Header, column.slug, column.aiLabel)
       });
     });
     return _rollupPluginBabelHelpers.toConsumableArray(columnsWithDefaultCells);

package/lib/components/Datagrid/useSortableColumns.js

@@ -16,7 +16,7 @@ var settings = require('../../settings.js');
 var react = require('@carbon/react');
 var icons = require('@carbon/react/icons');
 var DatagridSelectAll = require('./Datagrid/DatagridSelectAll.js');
-var DatagridSlug = require('./Datagrid/addons/Slug/DatagridSlug.js');
+var DatagridAiLabel = require('./Datagrid/addons/AiLabel/DatagridAiLabel.js');
 
 var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
 var getNewSortOrder = function getNewSortOrder(currentOrder) {
@@ -82,9 +82,9 @@ var useSortableColumns = function useSortableColumns(hooks) {
       descendingSortableLabelText = instance.descendingSortableLabelText,
       defaultSortableLabelText = instance.defaultSortableLabelText;
     var onSortClick = function onSortClick(event, column) {
-      var slug = event.target.classList.contains("".concat(settings.carbon.prefix, "--slug")) || event.target.closest(".".concat(settings.carbon.prefix, "--slug"));
+      var aiLabel = event.target.classList.contains("".concat(settings.carbon.prefix, "--slug")) || event.target.closest(".".concat(settings.carbon.prefix, "--slug"));
       // Do not continue with sorting if we find a slug
-      if (slug) {
+      if (aiLabel) {
         event.stopPropagation();
         return;
       }
@@ -140,9 +140,9 @@ var useSortableColumns = function useSortableColumns(hooks) {
           },
           kind: "ghost",
           renderIcon: function renderIcon(props) {
-            var _headerProp$column;
-            return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DatagridSlug.DatagridSlug, {
-              slug: headerProp === null || headerProp === void 0 || (_headerProp$column = headerProp.column) === null || _headerProp$column === void 0 ? void 0 : _headerProp$column.slug
+            var _headerProp$column, _headerProp$column2;
+            return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DatagridAiLabel.DatagridAILabel, {
+              aiLabel: (headerProp === null || headerProp === void 0 || (_headerProp$column = headerProp.column) === null || _headerProp$column === void 0 ? void 0 : _headerProp$column.aiLabel) || (headerProp === null || headerProp === void 0 || (_headerProp$column2 = headerProp.column) === null || _headerProp$column2 === void 0 ? void 0 : _headerProp$column2.slug)
             }), icon(headerProp === null || headerProp === void 0 ? void 0 : headerProp.column, props));
           },
           id: column === null || column === void 0 ? void 0 : column.id,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.43.2-canary.303+2311bdb74",
+  "version": "2.43.2-canary.304+b0b3c1cf4",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -96,7 +96,7 @@
   "dependencies": {
     "@babel/runtime": "^7.23.9",
     "@carbon/feature-flags": "^0.22.0",
-    "@carbon/ibm-products-styles": "^2.39.1-canary.313+2311bdb74",
+    "@carbon/ibm-products-styles": "^2.39.1-canary.314+b0b3c1cf4",
     "@carbon/telemetry": "^0.1.0",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/modifiers": "^7.0.0",
@@ -120,5 +120,5 @@
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
   },
-  "gitHead": "2311bdb7477e72a6cd4d7f915f6dc754874b7375"
+  "gitHead": "b0b3c1cf40199e7458584ea1d9093224264e1f4c"
 }

package/scss/components/Datagrid/styles/_datagrid.scss

@@ -156,6 +156,7 @@
   background-color: $background;
 }
 
+/* This section to be removed after support for slug dropped  - start */
 .#{$block-class} th.#{$block-class}__with-slug {
   /* stylelint-disable-next-line carbon/theme-token-use */
   box-shadow: inset 0 1px $ai-border-strong;
@@ -228,6 +229,80 @@
   .#{c4p-settings.$carbon-prefix}--slug {
   margin-left: $spacing-03;
 }
+/* This section to be removed after support for slug dropped  - end */
+
+.#{$block-class} th.#{$block-class}__with-ai-label {
+  /* stylelint-disable-next-line carbon/theme-token-use */
+  box-shadow: inset 0 1px $ai-border-strong;
+}
+
+.#{$block-class} th.#{$block-class}__with-ai-label,
+.#{$block-class} td.#{$block-class}__ai-label--cell {
+  @include ai-table-gradient();
+}
+
+.#{$block-class}
+  .#{c4p-settings.$carbon-prefix}--data-table
+  tbody
+  tr.#{$block-class}__ai-label--row,
+.#{$block-class}
+  .#{c4p-settings.$carbon-prefix}--data-table
+  tbody
+  tr.#{$block-class}__ai-label--row
+  + .#{$block-class}__expanded-row {
+  @include ai-table-gradient();
+
+  background-attachment: fixed;
+}
+
+.#{$block-class}
+  .#{c4p-settings.$carbon-prefix}--data-table
+  tbody
+  tr.#{$block-class}__ai-label--row {
+  /* stylelint-disable-next-line carbon/theme-token-use */
+  box-shadow: inset 1px 0 $ai-border-strong;
+}
+
+.#{$block-class}
+  .#{c4p-settings.$carbon-prefix}--data-table
+  tbody
+  tr.#{$block-class}__ai-label--row:hover,
+.#{$block-class}
+  .#{c4p-settings.$carbon-prefix}--data-table
+  tbody
+  tr.#{$block-class}__ai-label--row.#{c4p-settings.$carbon-prefix}--data-table--selected:hover,
+.#{$block-class}
+  .#{c4p-settings.$carbon-prefix}--data-table
+  tbody
+  tr.#{$block-class}__ai-label--row.#{$block-class}__carbon-row-expanded:hover
+  + .#{$block-class}__expanded-row,
+.#{$block-class}
+  .#{c4p-settings.$carbon-prefix}--data-table
+  tbody
+  tr.#{$block-class}__expandable-row--hover.#{$block-class}__ai-label--row {
+  @include ai-table-gradient('hover');
+}
+
+.#{$block-class}
+  .#{c4p-settings.$carbon-prefix}--data-table
+  tbody
+  tr.#{$block-class}__expandable-row--hover.#{$block-class}__ai-label--row
+  td {
+  background-color: transparent;
+}
+
+.#{$block-class}
+  .#{c4p-settings.$carbon-prefix}--data-table
+  tbody
+  tr.#{$block-class}__ai-label--row.#{c4p-settings.$carbon-prefix}--data-table--selected {
+  @include ai-table-gradient('selected');
+}
+
+.#{$block-class}
+  th.#{$block-class}__with-ai-label
+  .#{c4p-settings.$carbon-prefix}--slug {
+  margin-left: $spacing-03;
+}
 
 .#{$block-class}__grid-container {
   display: block;
@@ -315,7 +390,8 @@
     white-space: initial;
   }
 
-  .#{$block-class}__defaultStringRenderer.#{$block-class}__defaultStringRenderer--slug {
+  .#{$block-class}__defaultStringRenderer.#{$block-class}__defaultStringRenderer--slug,
+  .#{$block-class}__defaultStringRenderer.#{$block-class}__defaultStringRenderer--ai-label {
     width: fit-content;
   }
 
@@ -891,7 +967,9 @@
 .#{$block-class} .#{$block-class}__table-row-ai-enabled {
   display: flex;
   align-items: center;
-  &.#{$block-class}__slug--expanded {
+
+  &.#{$block-class}__slug--expanded,
+  &.#{$block-class}__ai-label--expanded {
     border: none;
   }
 }