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

package/es/components/Card/Card.js

@@ -16,7 +16,7 @@ import { CardFooter } from './CardFooter.js';
 import { pkg } from '../../settings.js';
 
 var _Incomplete, _CheckmarkOutline;
-var _excluded = ["actionIcons", "actionsPlacement", "metadata", "children", "className", "clickZone", "description", "disabled", "footerActionIcon", "getStarted", "label", "media", "mediaPosition", "onClick", "onKeyDown", "onPrimaryButtonClick", "overflowActions", "overflowAriaLabel", "onSecondaryButtonClick", "pictogram", "primaryButtonDisabled", "primaryButtonHref", "primaryButtonIcon", "primaryButtonKind", "primaryButtonPlacement", "primaryButtonText", "productive", "secondaryButtonDisabled", "secondaryButtonHref", "secondaryButtonIcon", "secondaryButtonKind", "secondaryButtonPlacement", "secondaryButtonText", "slug", "status", "sequence", "title", "titleSize", "iconDescription"],
+var _excluded = ["actionIcons", "actionsPlacement", "aiLabel", "metadata", "children", "className", "clickZone", "description", "disabled", "footerActionIcon", "getStarted", "label", "media", "mediaPosition", "onClick", "onKeyDown", "onPrimaryButtonClick", "overflowActions", "overflowAriaLabel", "onSecondaryButtonClick", "pictogram", "primaryButtonDisabled", "primaryButtonHref", "primaryButtonIcon", "primaryButtonKind", "primaryButtonPlacement", "primaryButtonText", "productive", "secondaryButtonDisabled", "secondaryButtonHref", "secondaryButtonIcon", "secondaryButtonKind", "secondaryButtonPlacement", "secondaryButtonText", "slug", "status", "sequence", "title", "titleSize", "iconDescription"],
   _excluded2 = ["id"],
   _excluded3 = ["id", "icon", "onClick", "iconDescription", "href"];
 var componentName = 'Card';
@@ -25,6 +25,7 @@ var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
     actionIcons = _ref$actionIcons === void 0 ? Object.freeze([]) : _ref$actionIcons,
     _ref$actionsPlacement = _ref.actionsPlacement,
     actionsPlacement = _ref$actionsPlacement === void 0 ? 'bottom' : _ref$actionsPlacement,
+    aiLabel = _ref.aiLabel,
     _ref$metadata = _ref.metadata,
     metadata = _ref$metadata === void 0 ? Object.freeze([]) : _ref$metadata,
     children = _ref.children,
@@ -166,7 +167,7 @@ var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
     var clickable = hasClickEvent && !productive || hasClickEvent && productive && clickZone === 'one';
     var cardProps = _objectSpread2(_objectSpread2({}, rest), {}, {
       ref: ref,
-      className: cx(blockClass, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__disabled"), disabled), "".concat(blockClass, "__get-started"), getStarted), "".concat(blockClass, "__productive"), productive), "".concat(blockClass, "__clickable"), clickable), "".concat(blockClass, "__media-left"), mediaPosition === 'left'), "".concat(blockClass, "--has-slug"), !!slug), className)
+      className: cx(blockClass, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__disabled"), disabled), "".concat(blockClass, "__get-started"), getStarted), "".concat(blockClass, "__productive"), productive), "".concat(blockClass, "__clickable"), clickable), "".concat(blockClass, "__media-left"), mediaPosition === 'left'), "".concat(blockClass, "--has-slug"), !!slug), "".concat(blockClass, "--has-ai-label"), !!aiLabel), className)
     }, clickable && clickableProps);
     return cardProps;
   };
@@ -182,6 +183,7 @@ var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var getHeaderProps = function getHeaderProps() {
     return {
       actions: actionsPlacement === 'top' ? getActions() : '',
+      aiLabel: aiLabel,
       noActionIcons: getIcons().length > 0 && actionsPlacement === 'top' ? false : true,
       actionsPlacement: actionsPlacement,
       onPrimaryButtonClick: onPrimaryButtonClick,
@@ -265,6 +267,10 @@ Card.propTypes = {
     href: PropTypes.string
   })),
   actionsPlacement: PropTypes.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: PropTypes.oneOfType([PropTypes.node, PropTypes.bool]),
   children: PropTypes.node,
   className: PropTypes.string,
   clickZone: PropTypes.oneOf(['one', 'two', 'three']),
@@ -316,6 +322,7 @@ Card.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: PropTypes.oneOfType([PropTypes.node, PropTypes.bool]),
   status: PropTypes.oneOf(['complete', 'incomplete']),

package/es/components/Card/CardHeader.d.ts

@@ -1,7 +1,11 @@
 import React, { ReactNode } from 'react';
 import PropTypes from 'prop-types';
 interface CardHeaderProps {
-    actions?: ReactNode[] | ReactNode;
+    actions?: ReactNode;
+    /**
+     * 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;
     description?: ReactNode;
     hasActions?: boolean;
     /**
@@ -25,16 +29,21 @@ interface CardHeaderProps {
     /**
      * **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;
     title?: ReactNode;
     titleSize?: 'default' | 'large';
 }
 export declare const CardHeader: {
-    ({ actions, noActionIcons, onPrimaryButtonClick, onSecondaryButtonClick, primaryButtonIcon, primaryButtonPlacement, primaryButtonText, primaryButtonDisabled, description, hasActions, inClickableCard, label, secondaryButtonDisabled, secondaryButtonHref, secondaryButtonIcon, secondaryButtonPlacement, secondaryButtonText, slug, title, titleSize, }: CardHeaderProps): import("react/jsx-runtime").JSX.Element;
+    ({ actions, aiLabel, noActionIcons, onPrimaryButtonClick, onSecondaryButtonClick, primaryButtonIcon, primaryButtonPlacement, primaryButtonText, primaryButtonDisabled, description, hasActions, inClickableCard, label, secondaryButtonDisabled, secondaryButtonHref, secondaryButtonIcon, secondaryButtonPlacement, secondaryButtonText, slug, title, titleSize, }: CardHeaderProps): import("react/jsx-runtime").JSX.Element;
     /**@ts-ignore */
     propTypes: {
         actions: PropTypes.Requireable<NonNullable<any[] | PropTypes.ReactNodeLike>>;
+        /**
+         * 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: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
         description: PropTypes.Requireable<NonNullable<object | PropTypes.ReactNodeLike>>;
         hasActions: PropTypes.Requireable<boolean>;
         /**
@@ -58,6 +67,7 @@ export declare const CardHeader: {
         /**
          * **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: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
         title: PropTypes.Requireable<NonNullable<object | PropTypes.ReactNodeLike>>;

package/es/components/Card/CardHeader.js

@@ -20,6 +20,7 @@ var defaults = {
 };
 var CardHeader = function CardHeader(_ref) {
   var actions = _ref.actions,
+    aiLabel = _ref.aiLabel,
     noActionIcons = _ref.noActionIcons,
     onPrimaryButtonClick = _ref.onPrimaryButtonClick,
     onSecondaryButtonClick = _ref.onSecondaryButtonClick,
@@ -47,8 +48,9 @@ var CardHeader = function CardHeader(_ref) {
   var headerClasses = cx(headerClass, _defineProperty(_defineProperty(_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, _defineProperty({}, "".concat(actionGhostButton, "--only"), noActionIcons));
-  var hollowSlugIcon = /*#__PURE__*/React__default.createElement("svg", {
-    className: "".concat(carbonPrefix, "--slug ").concat(carbonPrefix, "--slug-icon"),
+  var hollowAiIcon = /*#__PURE__*/React__default.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",
@@ -63,12 +65,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__default.cloneElement(slug, {
+      var element = aiLabel || slug;
+      normalizedAiLabel = /*#__PURE__*/React__default.cloneElement(element, {
         size: label && title || title && titleSize === 'large' ? 'sm' : 'xs'
       });
     }
@@ -76,7 +79,7 @@ var CardHeader = function CardHeader(_ref) {
   return /*#__PURE__*/React__default.createElement("div", {
     className: headerClasses
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: cx(["".concat(headerClass, "-container"), _defineProperty({}, "".concat(headerClass, "-container--has-slug"), !!slug), _defineProperty({}, "".concat(headerClass, "-container--has-actions"), !!hasActions), _defineProperty({}, "".concat(headerClass, "-container--large-tile-or-label"), title && (label || titleSize === 'large'))])
+    className: cx(["".concat(headerClass, "-container"), _defineProperty({}, "".concat(headerClass, "-container--has-slug"), !!slug), _defineProperty({}, "".concat(headerClass, "-container--has-ai-label"), !!aiLabel), _defineProperty({}, "".concat(headerClass, "-container--has-actions"), !!hasActions), _defineProperty({}, "".concat(headerClass, "-container--large-tile-or-label"), title && (label || titleSize === 'large'))])
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "__title-container")
   }, label && /*#__PURE__*/React__default.createElement("p", {
@@ -102,11 +105,15 @@ var CardHeader = function CardHeader(_ref) {
     onClick: onPrimaryButtonClick,
     className: actionGhostButtonClass,
     disabled: primaryButtonDisabled
-  }, primaryButtonText)), normalizedSlug));
+  }, primaryButtonText)), normalizedAiLabel));
 };
 /**@ts-ignore */
 CardHeader.propTypes = {
   actions: PropTypes.oneOfType([PropTypes.array, PropTypes.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: PropTypes.oneOfType([PropTypes.node, PropTypes.bool]),
   description: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.node]),
   hasActions: PropTypes.bool,
   /**
@@ -130,6 +137,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: PropTypes.oneOfType([PropTypes.node, PropTypes.bool]),
   title: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.node]),

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');
       },

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/es/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/es/components/ExpressiveCard/ExpressiveCard.js

@@ -36,6 +36,10 @@ ExpressiveCard.propTypes = {
     iconDescription: PropTypes.string,
     href: PropTypes.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: PropTypes.oneOfType([PropTypes.node, PropTypes.bool]),
   /**
    * Content that shows in the body of the card
    */
@@ -114,6 +118,7 @@ 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: PropTypes.oneOfType([PropTypes.node, PropTypes.bool]),
   /**

package/es/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/es/components/ProductiveCard/ProductiveCard.js

@@ -48,6 +48,10 @@ ProductiveCard.propTypes = {
    * Determines if the action icons are on the top or bottom of the card
    */
   actionsPlacement: PropTypes.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: PropTypes.oneOfType([PropTypes.node, PropTypes.bool]),
   /**
    * Content that shows in the body of the card
    */

package/lib/components/Card/Card.d.ts

@@ -57,10 +57,14 @@ interface CardProp extends PropsWithChildren {
     sequence?: number;
     iconDescription?: string;
     /**
-     * **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;
+    /**
+     * 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;
     status?: 'complete' | 'incomplete';
     title?: ReactNode;
     titleSize?: 'default' | 'large';

package/lib/components/Card/Card.js

@@ -18,7 +18,7 @@ var CardFooter = require('./CardFooter.js');
 var settings = require('../../settings.js');
 
 var _Incomplete, _CheckmarkOutline;
-var _excluded = ["actionIcons", "actionsPlacement", "metadata", "children", "className", "clickZone", "description", "disabled", "footerActionIcon", "getStarted", "label", "media", "mediaPosition", "onClick", "onKeyDown", "onPrimaryButtonClick", "overflowActions", "overflowAriaLabel", "onSecondaryButtonClick", "pictogram", "primaryButtonDisabled", "primaryButtonHref", "primaryButtonIcon", "primaryButtonKind", "primaryButtonPlacement", "primaryButtonText", "productive", "secondaryButtonDisabled", "secondaryButtonHref", "secondaryButtonIcon", "secondaryButtonKind", "secondaryButtonPlacement", "secondaryButtonText", "slug", "status", "sequence", "title", "titleSize", "iconDescription"],
+var _excluded = ["actionIcons", "actionsPlacement", "aiLabel", "metadata", "children", "className", "clickZone", "description", "disabled", "footerActionIcon", "getStarted", "label", "media", "mediaPosition", "onClick", "onKeyDown", "onPrimaryButtonClick", "overflowActions", "overflowAriaLabel", "onSecondaryButtonClick", "pictogram", "primaryButtonDisabled", "primaryButtonHref", "primaryButtonIcon", "primaryButtonKind", "primaryButtonPlacement", "primaryButtonText", "productive", "secondaryButtonDisabled", "secondaryButtonHref", "secondaryButtonIcon", "secondaryButtonKind", "secondaryButtonPlacement", "secondaryButtonText", "slug", "status", "sequence", "title", "titleSize", "iconDescription"],
   _excluded2 = ["id"],
   _excluded3 = ["id", "icon", "onClick", "iconDescription", "href"];
 var componentName = 'Card';
@@ -27,6 +27,7 @@ var Card = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     actionIcons = _ref$actionIcons === void 0 ? Object.freeze([]) : _ref$actionIcons,
     _ref$actionsPlacement = _ref.actionsPlacement,
     actionsPlacement = _ref$actionsPlacement === void 0 ? 'bottom' : _ref$actionsPlacement,
+    aiLabel = _ref.aiLabel,
     _ref$metadata = _ref.metadata,
     metadata = _ref$metadata === void 0 ? Object.freeze([]) : _ref$metadata,
     children = _ref.children,
@@ -168,7 +169,7 @@ var Card = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var clickable = hasClickEvent && !productive || hasClickEvent && productive && clickZone === 'one';
     var cardProps = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, rest), {}, {
       ref: ref,
-      className: cx(blockClass, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__disabled"), disabled), "".concat(blockClass, "__get-started"), getStarted), "".concat(blockClass, "__productive"), productive), "".concat(blockClass, "__clickable"), clickable), "".concat(blockClass, "__media-left"), mediaPosition === 'left'), "".concat(blockClass, "--has-slug"), !!slug), className)
+      className: cx(blockClass, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__disabled"), disabled), "".concat(blockClass, "__get-started"), getStarted), "".concat(blockClass, "__productive"), productive), "".concat(blockClass, "__clickable"), clickable), "".concat(blockClass, "__media-left"), mediaPosition === 'left'), "".concat(blockClass, "--has-slug"), !!slug), "".concat(blockClass, "--has-ai-label"), !!aiLabel), className)
     }, clickable && clickableProps);
     return cardProps;
   };
@@ -184,6 +185,7 @@ var Card = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var getHeaderProps = function getHeaderProps() {
     return {
       actions: actionsPlacement === 'top' ? getActions() : '',
+      aiLabel: aiLabel,
       noActionIcons: getIcons().length > 0 && actionsPlacement === 'top' ? false : true,
       actionsPlacement: actionsPlacement,
       onPrimaryButtonClick: onPrimaryButtonClick,
@@ -267,6 +269,10 @@ Card.propTypes = {
     href: index.default.string
   })),
   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]),
   children: index.default.node,
   className: index.default.string,
   clickZone: index.default.oneOf(['one', 'two', 'three']),
@@ -318,6 +324,7 @@ Card.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]),
   status: index.default.oneOf(['complete', 'incomplete']),

package/lib/components/Card/CardHeader.d.ts

@@ -1,7 +1,11 @@
 import React, { ReactNode } from 'react';
 import PropTypes from 'prop-types';
 interface CardHeaderProps {
-    actions?: ReactNode[] | ReactNode;
+    actions?: ReactNode;
+    /**
+     * 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;
     description?: ReactNode;
     hasActions?: boolean;
     /**
@@ -25,16 +29,21 @@ interface CardHeaderProps {
     /**
      * **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;
     title?: ReactNode;
     titleSize?: 'default' | 'large';
 }
 export declare const CardHeader: {
-    ({ actions, noActionIcons, onPrimaryButtonClick, onSecondaryButtonClick, primaryButtonIcon, primaryButtonPlacement, primaryButtonText, primaryButtonDisabled, description, hasActions, inClickableCard, label, secondaryButtonDisabled, secondaryButtonHref, secondaryButtonIcon, secondaryButtonPlacement, secondaryButtonText, slug, title, titleSize, }: CardHeaderProps): import("react/jsx-runtime").JSX.Element;
+    ({ actions, aiLabel, noActionIcons, onPrimaryButtonClick, onSecondaryButtonClick, primaryButtonIcon, primaryButtonPlacement, primaryButtonText, primaryButtonDisabled, description, hasActions, inClickableCard, label, secondaryButtonDisabled, secondaryButtonHref, secondaryButtonIcon, secondaryButtonPlacement, secondaryButtonText, slug, title, titleSize, }: CardHeaderProps): import("react/jsx-runtime").JSX.Element;
     /**@ts-ignore */
     propTypes: {
         actions: PropTypes.Requireable<NonNullable<any[] | PropTypes.ReactNodeLike>>;
+        /**
+         * 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: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
         description: PropTypes.Requireable<NonNullable<object | PropTypes.ReactNodeLike>>;
         hasActions: PropTypes.Requireable<boolean>;
         /**
@@ -58,6 +67,7 @@ export declare const CardHeader: {
         /**
          * **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: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
         title: PropTypes.Requireable<NonNullable<object | PropTypes.ReactNodeLike>>;