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

package/lib/components/Card/CardHeader.js

@@ -22,6 +22,7 @@ var defaults = {
 };
 var CardHeader = function CardHeader(_ref) {
   var actions = _ref.actions,
+    aiLabel = _ref.aiLabel,
     noActionIcons = _ref.noActionIcons,
     onPrimaryButtonClick = _ref.onPrimaryButtonClick,
     onSecondaryButtonClick = _ref.onSecondaryButtonClick,
@@ -49,8 +50,9 @@ var CardHeader = function CardHeader(_ref) {
   var headerClasses = cx(headerClass, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(headerClass, "-label-only"), label && !title && !description), "".concat(headerClass, "-has-label"), !!label), "".concat(blockClass, "__title-lg"), titleSize === 'large'));
   var actionGhostButton = "".concat(blockClass, "__actions-header-ghost-button");
   var actionGhostButtonClass = cx(actionGhostButton, _rollupPluginBabelHelpers.defineProperty({}, "".concat(actionGhostButton, "--only"), noActionIcons));
-  var hollowSlugIcon = /*#__PURE__*/React.createElement("svg", {
-    className: "".concat(carbonPrefix, "--slug ").concat(carbonPrefix, "--slug-icon"),
+  var hollowAiIcon = /*#__PURE__*/React.createElement("svg", {
+    className: "".concat(carbonPrefix, "--slug ").concat(carbonPrefix, "--slug-icon") // NOTE: We cannot change this to ai-label until carbon changes their classnames on their end
+    ,
     width: "24",
     height: "24",
     viewBox: "0 0 24 24",
@@ -65,12 +67,13 @@ var CardHeader = function CardHeader(_ref) {
     d: "M13.2436 16H11.5996L10.9276 13.864H7.95164L7.29164 16H5.68364L8.49164 7.624H10.4596L13.2436 16ZM10.5436 12.508L9.46364 9.064H9.40364L8.33564 12.508H10.5436ZM17.9341 16H14.1301V14.728H15.2341V8.896H14.1301V7.624H17.9341V8.896H16.8181V14.728H17.9341V16Z",
     fill: "#161616"
   })));
-  var normalizedSlug = null;
-  if (slug) {
-    if (inClickableCard || typeof slug === 'boolean') {
-      normalizedSlug = hollowSlugIcon;
+  var normalizedAiLabel = null;
+  if (aiLabel || slug) {
+    if (inClickableCard || typeof aiLabel === 'boolean' || typeof slug === 'boolean') {
+      normalizedAiLabel = hollowAiIcon;
     } else {
-      normalizedSlug = /*#__PURE__*/React.cloneElement(slug, {
+      var element = aiLabel || slug;
+      normalizedAiLabel = /*#__PURE__*/React.cloneElement(element, {
         size: label && title || title && titleSize === 'large' ? 'sm' : 'xs'
       });
     }
@@ -78,7 +81,7 @@ var CardHeader = function CardHeader(_ref) {
   return /*#__PURE__*/React.createElement("div", {
     className: headerClasses
   }, /*#__PURE__*/React.createElement("div", {
-    className: cx(["".concat(headerClass, "-container"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(headerClass, "-container--has-slug"), !!slug), _rollupPluginBabelHelpers.defineProperty({}, "".concat(headerClass, "-container--has-actions"), !!hasActions), _rollupPluginBabelHelpers.defineProperty({}, "".concat(headerClass, "-container--large-tile-or-label"), title && (label || titleSize === 'large'))])
+    className: cx(["".concat(headerClass, "-container"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(headerClass, "-container--has-slug"), !!slug), _rollupPluginBabelHelpers.defineProperty({}, "".concat(headerClass, "-container--has-ai-label"), !!aiLabel), _rollupPluginBabelHelpers.defineProperty({}, "".concat(headerClass, "-container--has-actions"), !!hasActions), _rollupPluginBabelHelpers.defineProperty({}, "".concat(headerClass, "-container--large-tile-or-label"), title && (label || titleSize === 'large'))])
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__title-container")
   }, label && /*#__PURE__*/React.createElement("p", {
@@ -104,11 +107,15 @@ var CardHeader = function CardHeader(_ref) {
     onClick: onPrimaryButtonClick,
     className: actionGhostButtonClass,
     disabled: primaryButtonDisabled
-  }, primaryButtonText)), normalizedSlug));
+  }, primaryButtonText)), normalizedAiLabel));
 };
 /**@ts-ignore */
 CardHeader.propTypes = {
   actions: index.default.oneOfType([index.default.array, index.default.node]),
+  /**
+   * Optional prop that is intended for any scenario where something is being generated by AI to reinforce AI transparency, accountability, and explainability at the UI level.
+   */
+  aiLabel: index.default.oneOfType([index.default.node, index.default.bool]),
   description: index.default.oneOfType([index.default.string, index.default.object, index.default.node]),
   hasActions: index.default.bool,
   /**
@@ -132,6 +139,7 @@ CardHeader.propTypes = {
   /**
    * **Experimental:** For all cases a `Slug` component can be provided.
    * Clickable tiles only accept a boolean value of true and display a hollow slug.
+   * @deprecated please use the `aiLabel` prop
    */
   slug: index.default.oneOfType([index.default.node, index.default.bool]),
   title: index.default.oneOfType([index.default.string, index.default.object, index.default.node]),

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/lib/components/ExpressiveCard/ExpressiveCard.d.ts

@@ -13,6 +13,10 @@ export interface ExpressiveCardProps extends PropsWithChildren {
      * Icons that are displayed on card. Refer to design documentation for implementation guidelines. Note- href will supersede onClick
      */
     actionIcons?: ActionIcon[];
+    /**
+     * Optional prop that is intended for any scenario where something is being generated by AI to reinforce AI transparency, accountability, and explainability at the UI level.
+     */
+    aiLabel?: ReactNode | boolean;
     /**
      * Content that shows in the body of the card
      */
@@ -87,6 +91,7 @@ export interface ExpressiveCardProps extends PropsWithChildren {
     /**
      * **Experimental:** For all cases a `Slug` component can be provided.
      * Clickable tiles only accept a boolean value of true and display a hollow slug.
+     * @deprecated please use the `aiLabel` prop
      */
     slug?: ReactNode | boolean;
     /**

package/lib/components/ExpressiveCard/ExpressiveCard.js

@@ -38,6 +38,10 @@ exports.ExpressiveCard.propTypes = {
     iconDescription: index.default.string,
     href: index.default.string
   })),
+  /**
+   * Optional prop that is intended for any scenario where something is being generated by AI to reinforce AI transparency, accountability, and explainability at the UI level.
+   */
+  aiLabel: index.default.oneOfType([index.default.node, index.default.bool]),
   /**
    * Content that shows in the body of the card
    */
@@ -116,6 +120,7 @@ exports.ExpressiveCard.propTypes = {
   /**
    * **Experimental:** For all cases a `Slug` component can be provided.
    * Clickable tiles only accept a boolean value of true and display a hollow slug.
+   * @deprecated please use the `aiLabel` prop
    */
   slug: index.default.oneOfType([index.default.node, index.default.bool]),
   /**

package/lib/components/ProductiveCard/ProductiveCard.d.ts

@@ -21,6 +21,10 @@ export interface ProductiveCardProps extends PropsWithChildren {
      * Icons that are displayed on card. Refer to design documentation for implementation guidelines. Note- href will supersede onClick
      */
     actionIcons?: ActionIcon[];
+    /**
+     * Optional prop that is intended for any scenario where something is being generated by AI to reinforce AI transparency, accountability, and explainability at the UI level.
+     */
+    aiLabel?: ReactNode | boolean;
     /**
      * Determines if the action icons are on the top or bottom of the card
      */
@@ -104,6 +108,7 @@ export interface ProductiveCardProps extends PropsWithChildren {
     /**
      * **Experimental:** For all cases a `Slug` component can be provided.
      * Clickable tiles only accept a boolean value of true and display a hollow slug.
+     * @deprecated please use the `aiLabel` prop
      */
     slug?: ReactNode | boolean;
     /**

package/lib/components/ProductiveCard/ProductiveCard.js

@@ -50,6 +50,10 @@ exports.ProductiveCard.propTypes = {
    * Determines if the action icons are on the top or bottom of the card
    */
   actionsPlacement: index.default.oneOf(['top', 'bottom']),
+  /**
+   * Optional prop that is intended for any scenario where something is being generated by AI to reinforce AI transparency, accountability, and explainability at the UI level.
+   */
+  aiLabel: index.default.oneOfType([index.default.node, index.default.bool]),
   /**
    * Content that shows in the body of the card
    */

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.305+5b94ed8d0",
   "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.315+5b94ed8d0",
     "@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": "5b94ed8d01638db747277f104d9f7dd9ab2e0eb3"
 }

package/scss/components/Card/_card.scss

@@ -5,6 +5,8 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+// NOTE: Please do not remove the duplicate `slug` and `ai-label` classes. We need both until slug is fully deprecated
+
 // Standard imports.
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/spacing' as *;
@@ -148,16 +150,19 @@ $block-class: #{c4p-settings.$pkg-prefix}--card;
   right: $spacing-05;
 }
 
-.#{$block-class}__header-container--has-slug {
+.#{$block-class}__header-container--has-slug,
+.#{$block-class}__header-container--has-ai-label {
   width: 100%;
   padding-right: $spacing-07;
 }
 
-.#{$block-class}__header-container--has-slug.#{$block-class}__header-container--has-actions {
+.#{$block-class}__header-container--has-slug.#{$block-class}__header-container--has-actions,
+.#{$block-class}__header-container--has-ai-label.#{$block-class}__header-container--has-actions {
   padding-right: $spacing-08;
 }
 
-.#{$block-class}__header-container--has-slug.#{$block-class}__header-container--large-tile-or-label {
+.#{$block-class}__header-container--has-slug.#{$block-class}__header-container--large-tile-or-label,
+.#{$block-class}__header-container--has-ai-label.#{$block-class}__header-container--large-tile-or-label {
   padding-right: $spacing-09;
 }
 
@@ -170,7 +175,8 @@ $block-class: #{c4p-settings.$pkg-prefix}--card;
   pointer-events: none;
 }
 
-.#{$block-class}--has-slug {
+.#{$block-class}--has-slug,
+.#{$block-class}--has-ai-label {
   @include utilities.ai-popover-gradient('default', 0, 'layer');
 
   border: 1px solid transparent;
@@ -178,7 +184,8 @@ $block-class: #{c4p-settings.$pkg-prefix}--card;
     0 4px 10px 2px $ai-drop-shadow;
 }
 
-.#{$block-class}__clickable.#{$block-class}--has-slug::before {
+.#{$block-class}__clickable.#{$block-class}--has-slug::before,
+.#{$block-class}__clickable.#{$block-class}--has-ai-label::before {
   @include utilities.ai-popover-gradient('hover', 0, 'layer');
 
   position: absolute;
@@ -193,7 +200,8 @@ $block-class: #{c4p-settings.$pkg-prefix}--card;
   transition: opacity $duration-fast-02 motion(standard, productive);
 }
 
-.#{$block-class}__clickable.#{$block-class}--has-slug:hover::before {
+.#{$block-class}__clickable.#{$block-class}--has-slug:hover::before,
+.#{$block-class}__clickable.#{$block-class}--has-ai-label:hover::before {
   opacity: 1;
 }
 

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;
   }
 }

package/es/components/Datagrid/Datagrid/addons/Slug/DatagridSlug.js

@@ -1,29 +0,0 @@
-/**
- * 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 DatagridSlug = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var slug = _ref.slug;
-  if (slug && /*#__PURE__*/isValidElement(slug)) {
-    var normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
-      size: 'mini',
-      ref: ref
-    });
-    return normalizedSlug;
-  }
-  return null;
-});
-DatagridSlug.propTypes = {
-  /**
-   * Specify the AI slug to be displayed
-   */
-  slug: PropTypes.node
-};
-
-export { DatagridSlug };