@carbon/ibm-products 2.52.0 → 2.53.0

package/es/components/ConditionBuilder/utils/handleKeyboardEvents.js

@@ -27,72 +27,76 @@ var excludeKeyPress = function excludeKeyPress(evt) {
   return !['Escape'].includes(evt.key) && (evt.target.closest(".".concat(blockClass, "__item-date")) || evt.target.closest(".".concat(blockClass, "__item-time")));
 };
 var handleKeyPressForPopover = function handleKeyPressForPopover(evt, parentContainer, conditionBuilderRef) {
-  var _parentContainer$quer;
+  var _parentContainer$quer, _parentContainer$quer2, _evt$target$closest$q, _evt$target$closest;
   var key = evt.key;
   var isHoldingShiftKey = checkForHoldingKey(evt, 'shiftKey');
   var isMultiSelect = (_parentContainer$quer = parentContainer.querySelector('ul')) === null || _parentContainer$quer === void 0 ? void 0 : _parentContainer$quer.dataset.multiSelect;
+  var isOptionInput = (_parentContainer$quer2 = parentContainer.querySelectorAll("[role=\"option\"]")) === null || _parentContainer$quer2 === void 0 ? void 0 : _parentContainer$quer2.length;
   var allItems = [];
-  switch (key) {
-    case 'ArrowUp':
-      evt.preventDefault();
-      //traverse through the popover options, search box, selectAll button
-      parentContainer.querySelectorAll("[role=\"option\"]").forEach(function (eachElem, index, allElements) {
-        traverseReverse(eachElem, index, allElements, null, null, conditionBuilderRef);
-      });
-      //scroll to top when we reach a the top of the list to make search box visible
-      if (Array.from(evt.target.closest('ul').querySelectorAll('li')).indexOf(evt.target) === 1) {
-        parentContainer.querySelector(".".concat(blockClass, "__popover-content-wrapper")).scrollTop = 0;
-      }
-      break;
-    case 'ArrowDown':
-      evt.preventDefault();
-      //traverse through the popover options, search box, selectAll button
-      parentContainer.querySelectorAll("[role=\"option\"]").forEach(function (eachElem, index, allElements) {
-        traverseClockVise(eachElem, index, allElements, null, null, conditionBuilderRef);
-      });
-      break;
-    case 'Tab':
-      allItems = [].concat(_toConsumableArray(Array.from(parentContainer.querySelectorAll(".".concat(blockClass, "__selectAll-button,[role=\"searchbox\"]")))), [parentContainer.querySelector("[role=\"option\"]")]);
-      allItems.forEach(function (eachElem, index, allElements) {
-        if (isHoldingShiftKey) {
-          traverseReverse(eachElem, index, allElements, true, true, conditionBuilderRef);
-        } else {
-          traverseClockVise(eachElem, index, allElements, true, true, conditionBuilderRef);
-        }
-      });
-      evt.preventDefault();
-      break;
-    case ' ':
-      if (isMultiSelect === 'true') {
-        if (document.activeElement.type !== 'button') {
-          var _document$activeEleme;
-          //for button , enter key is click which already handled by framework, for other elements trigger click
-          (_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 || _document$activeEleme.click();
+  if (key === 'Escape') {
+    //focus the corresponding field in which the popover is triggered from
+    focusThisField(evt, conditionBuilderRef);
+    evt.preventDefault();
+  }
+  if (isOptionInput) {
+    switch (key) {
+      case 'ArrowUp':
+        evt.preventDefault();
+        //traverse through the popover options, search box, selectAll button
+        parentContainer.querySelectorAll("[role=\"option\"]").forEach(function (eachElem, index, allElements) {
+          traverseReverse(eachElem, index, allElements, null, null, conditionBuilderRef);
+        });
+        //scroll to top when we reach a the top of the list to make search box visible
+        if (Array.from((_evt$target$closest$q = (_evt$target$closest = evt.target.closest('ul')) === null || _evt$target$closest === void 0 ? void 0 : _evt$target$closest.querySelectorAll('li')) !== null && _evt$target$closest$q !== void 0 ? _evt$target$closest$q : []).indexOf(evt.target) === 1) {
+          parentContainer.querySelector(".".concat(blockClass, "__popover-content-wrapper")).scrollTop = 0;
         }
+        break;
+      case 'ArrowDown':
         evt.preventDefault();
-      }
-      break;
-    case 'Enter':
-      if (isMultiSelect === 'true') {
-        if (document.activeElement.type !== 'button') {
-          var _document$activeEleme2;
-          //for button , enter key is click which already handled by framework, for other elements trigger click
+        //traverse through the popover options, search box, selectAll button
+        parentContainer.querySelectorAll("[role=\"option\"]").forEach(function (eachElem, index, allElements) {
+          traverseClockVise(eachElem, index, allElements, null, null, conditionBuilderRef);
+        });
+        break;
+      case 'Tab':
+        allItems = [].concat(_toConsumableArray(Array.from(parentContainer.querySelectorAll(".".concat(blockClass, "__selectAll-button,[role=\"searchbox\"]")))), [parentContainer.querySelector("[role=\"option\"]")]);
+        allItems.forEach(function (eachElem, index, allElements) {
+          if (isHoldingShiftKey) {
+            traverseReverse(eachElem, index, allElements, true, true, conditionBuilderRef);
+          } else {
+            traverseClockVise(eachElem, index, allElements, true, true, conditionBuilderRef);
+          }
+        });
+        evt.preventDefault();
+        break;
+      case ' ':
+        if (isMultiSelect === 'true') {
+          if (document.activeElement.type !== 'button') {
+            var _document$activeEleme;
+            //for button , enter key is click which already handled by framework, for other elements trigger click
+            (_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 || _document$activeEleme.click();
+          }
           evt.preventDefault();
-          (_document$activeEleme2 = document.activeElement) === null || _document$activeEleme2 === void 0 || _document$activeEleme2.click();
         }
-      } else {
-        if (document.activeElement.type !== 'button') {
-          var _document$activeEleme3;
-          //for button , enter key is click which already handled by framework, else trigger click
-          focusThisField(evt, conditionBuilderRef);
-          (_document$activeEleme3 = document.activeElement) === null || _document$activeEleme3 === void 0 || _document$activeEleme3.click();
+        break;
+      case 'Enter':
+        if (isMultiSelect === 'true') {
+          if (document.activeElement.type !== 'button') {
+            var _document$activeEleme2;
+            //for button , enter key is click which already handled by framework, for other elements trigger click
+            evt.preventDefault();
+            (_document$activeEleme2 = document.activeElement) === null || _document$activeEleme2 === void 0 || _document$activeEleme2.click();
+          }
+        } else {
+          if (document.activeElement.type !== 'button') {
+            var _document$activeEleme3;
+            //for button , enter key is click which already handled by framework, else trigger click
+            focusThisField(evt, conditionBuilderRef);
+            (_document$activeEleme3 = document.activeElement) === null || _document$activeEleme3 === void 0 || _document$activeEleme3.click();
+          }
         }
-      }
-      break;
-    case 'Escape':
-      //focus the corresponding field in which the popover is triggered\
-      focusThisField(evt, conditionBuilderRef);
-      break;
+        break;
+    }
   }
 };
 var handleKeyPressForMainContent = function handleKeyPressForMainContent(evt, conditionBuilderRef, variant) {
@@ -101,8 +105,8 @@ var handleKeyPressForMainContent = function handleKeyPressForMainContent(evt, co
     case 'ArrowRight':
       evt.preventDefault();
       if (variant == HIERARCHICAL_VARIANT) {
-        var _evt$target$closest;
-        var allCellsInRow = Array.from((_evt$target$closest = evt.target.closest('[role="row"]')) === null || _evt$target$closest === void 0 ? void 0 : _evt$target$closest.querySelectorAll('[role="gridcell"] button'));
+        var _evt$target$closest2;
+        var allCellsInRow = Array.from((_evt$target$closest2 = evt.target.closest('[role="row"]')) === null || _evt$target$closest2 === void 0 ? void 0 : _evt$target$closest2.querySelectorAll('[role="gridcell"] button'));
         if (allCellsInRow.length === 1) {
           evt.target = evt.target.closest('[role="row"]');
           handleRowNavigationHierarchical(evt, conditionBuilderRef, variant);
@@ -129,10 +133,10 @@ var handleKeyPressForMainContent = function handleKeyPressForMainContent(evt, co
       evt.preventDefault();
       if (variant == HIERARCHICAL_VARIANT) {
         if (evt.target.getAttribute('role') !== 'row') {
-          var _evt$target$closest2;
+          var _evt$target$closest3;
           //when any cell is focussed, arrow left will select the previous cell or current row
 
-          var _allCellsInRow = Array.from((_evt$target$closest2 = evt.target.closest('[role="row"]')) === null || _evt$target$closest2 === void 0 ? void 0 : _evt$target$closest2.querySelectorAll('[role="gridcell"] button'));
+          var _allCellsInRow = Array.from((_evt$target$closest3 = evt.target.closest('[role="row"]')) === null || _evt$target$closest3 === void 0 ? void 0 : _evt$target$closest3.querySelectorAll('[role="gridcell"] button'));
           var _currentItemIndex = _allCellsInRow.indexOf(evt.target);
           if (_currentItemIndex > 0) {
             focusThisItem(_allCellsInRow[_currentItemIndex - 1], conditionBuilderRef);

package/es/components/ConditionBuilder/utils/util.js

@@ -22,8 +22,6 @@ var focusThisField = function focusThisField(evt, conditionBuilderRef) {
 };
 var focusThisItem = function focusThisItem(currentElement, conditionBuilderRef) {
   setTimeout(function () {
-    //document.activeElement.setAttribute('tabindex', '-1');
-    // currentElement.setAttribute('tabindex', '0');
     manageTabIndexAndFocus(currentElement, conditionBuilderRef);
   }, 0);
 };

package/es/components/CreateInfluencer/CreateInfluencer.d.ts

@@ -4,7 +4,7 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { PropsWithChildren, ReactNode } from 'react';
+import React, { PropsWithChildren, ReactNode } from 'react';
 import PropTypes from 'prop-types';
 import '../../global/js/utils/props-helper';
 interface Step {
@@ -32,7 +32,7 @@ interface CreateInfluencerProps {
     title?: string | undefined;
 }
 export declare const CreateInfluencer: {
-    ({ className, currentStep, stepData, title, }: PropsWithChildren<CreateInfluencerProps>): import("react/jsx-runtime").JSX.Element;
+    ({ className, currentStep, stepData, title, }: PropsWithChildren<CreateInfluencerProps>): React.JSX.Element;
     displayName: string;
     propTypes: {
         /**

package/es/components/DataSpreadsheet/DataSpreadsheet.js

@@ -84,7 +84,7 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
     totalVisibleColumns = _ref.totalVisibleColumns,
     rest = _objectWithoutProperties(_ref, _excluded);
   var multiKeyTrackingRef = useRef(null);
-  var localRef = useRef();
+  var localRef = useRef(undefined);
   var spreadsheetRef = ref || localRef;
   var focusedElement = useActiveElement();
   var _useState = useState(columns),
@@ -151,13 +151,13 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
     selectedHeaderReorderActive: selectedHeaderReorderActive
   }) || {};
   var cellSizeValue = getCellSize(cellSize);
-  var cellEditorRef = useRef();
+  var cellEditorRef = useRef(undefined);
   var _useState29 = useState(),
     _useState30 = _slicedToArray(_useState29, 2),
     activeCellContent = _useState30[0],
     setActiveCellContent = _useState30[1];
-  var activeCellRef = useRef();
-  var cellEditorRulerRef = useRef();
+  var activeCellRef = useRef(undefined);
+  var cellEditorRulerRef = useRef(undefined);
   var hasCustomRowHeader = typeof renderRowHeader === 'function';
   var maxNumRowsCount = data.length.toString().length;
   var defaultColumn = useMemo(function () {

package/es/components/DataSpreadsheet/DataSpreadsheetBody.js

@@ -65,7 +65,7 @@ var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _useState2 = _slicedToArray(_useState, 2),
     validStartingPoint = _useState2[0],
     setValidStartingPoint = _useState2[1];
-  var contentScrollRef = useRef();
+  var contentScrollRef = useRef(undefined);
   var previousState = usePreviousValue({
     selectionAreaData: selectionAreaData,
     clickAndHoldActive: clickAndHoldActive,
@@ -377,7 +377,7 @@ var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
       }));
     }
   }, [prepareRow, renderRowHeader, renderRowHeaderDirection, rows, hasCustomRowHeader, activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row, selectionAreas, handleRowHeaderClickEvent, handleBodyCellClickEvent, handleBodyCellHoverEvent, defaultColumn, columns]);
-  var spreadsheetBodyRef = useRef();
+  var spreadsheetBodyRef = useRef(undefined);
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: spreadsheetBodyRef,
     className: cx("".concat(blockClass, "__body--container"))

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

@@ -4,6 +4,7 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
+import React from 'react';
 import { DataGridState } from '../types';
-declare const DatagridBody: (datagridState: DataGridState) => import("react/jsx-runtime").JSX.Element;
+declare const DatagridBody: (datagridState: DataGridState) => React.JSX.Element;
 export default DatagridBody;

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

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

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

@@ -4,6 +4,7 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
+import React from 'react';
 import { DataGridState } from '../types';
-declare const DatagridEmptyBody: (datagridState: DataGridState) => import("react/jsx-runtime").JSX.Element;
+declare const DatagridEmptyBody: (datagridState: DataGridState) => React.JSX.Element;
 export default DatagridEmptyBody;

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

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

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

@@ -4,7 +4,7 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { JSXElementConstructor } from 'react';
+import React, { JSXElementConstructor } from 'react';
 import { DataGridState } from '../types';
-declare const DatagridExpandedRow: (ExpandedRowContentComponent: JSXElementConstructor<any>) => (datagridState: DataGridState) => import("react/jsx-runtime").JSX.Element;
+declare const DatagridExpandedRow: (ExpandedRowContentComponent: JSXElementConstructor<any>) => (datagridState: DataGridState) => React.JSX.Element;
 export default DatagridExpandedRow;

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

@@ -16,7 +16,7 @@ var blockClass = "".concat(pkg.prefix, "--datagrid");
 // eslint-disable-next-line react/prop-types
 var DatagridExpandedRow = function DatagridExpandedRow(ExpandedRowContentComponent) {
   return function (datagridState) {
-    var _row$original;
+    var _row$original, _row$original2;
     var row = datagridState.row;
     var expandedContentHeight = row.expandedContentHeight;
     var toggleParentHoverClass = function toggleParentHoverClass(event) {
@@ -36,7 +36,7 @@ var DatagridExpandedRow = function DatagridExpandedRow(ExpandedRowContentCompone
     var key = datagridState.key,
       _state = _objectWithoutProperties(datagridState, _excluded);
     return /*#__PURE__*/React__default.createElement("tr", {
-      className: cx("".concat(blockClass, "__expanded-row"), _defineProperty({}, "".concat(blockClass, "__slug--row"), /*#__PURE__*/isValidElement(row === null || row === void 0 || (_row$original = row.original) === null || _row$original === void 0 ? void 0 : _row$original.slug))),
+      className: cx("".concat(blockClass, "__expanded-row"), _defineProperty(_defineProperty({}, "".concat(blockClass, "__slug--row"), /*#__PURE__*/isValidElement(row === null || row === void 0 || (_row$original = row.original) === null || _row$original === void 0 ? void 0 : _row$original.slug)), "".concat(blockClass, "__ai-label--row"), /*#__PURE__*/isValidElement(row === null || row === void 0 || (_row$original2 = row.original) === null || _row$original2 === void 0 ? void 0 : _row$original2.aiLabel))),
       onMouseEnter: function onMouseEnter(event) {
         return toggleParentHoverClass(event, 'enter');
       },
@@ -47,8 +47,10 @@ var DatagridExpandedRow = function DatagridExpandedRow(ExpandedRowContentCompone
       className: "".concat(blockClass, "__expanded-row-cell-wrapper")
     }, /*#__PURE__*/React__default.createElement("div", {
       className: "".concat(blockClass, "__expanded-row-content"),
-      style: {
-        height: expandedContentHeight && expandedContentHeight
+      ref: function ref(el) {
+        if (el && el.style && expandedContentHeight) {
+          el.style.height = "".concat(expandedContentHeight, "px");
+        }
       }
     }, /*#__PURE__*/React__default.createElement(ExpandedRowContentComponent, _extends({
       key: key

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

@@ -4,6 +4,7 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
+import React from 'react';
 import { DataGridState } from '../types';
-declare const DatagridHead: (datagridState: DataGridState) => import("react/jsx-runtime").JSX.Element;
+declare const DatagridHead: (datagridState: DataGridState) => React.JSX.Element;
 export default DatagridHead;

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

@@ -14,7 +14,7 @@ import { selectionColumnId } from '../common-column-ids.js';
 import { pkg } from '../../../settings.js';
 import { handleColumnResizeEndEvent, handleColumnResizingEvent } from './addons/stateReducer.js';
 import { getNodeTextContent } from '../../../global/js/utils/getNodeTextContent.js';
-import { DatagridSlug } from './addons/Slug/DatagridSlug.js';
+import { DatagridAILabel } from './addons/AiLabel/DatagridAiLabel.js';
 import { useInitialColumnSort } from '../useInitialColumnSort.js';
 
 var _th;
@@ -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);
@@ -195,15 +195,18 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
     });
     var headerStyle = headerProps === null || headerProps === void 0 ? void 0 : headerProps.style;
     var lastVisibleIndex = withActionsColumn ? 2 : 1;
-    var lastVisibleFlexStyle = index === visibleColumns.length - lastVisibleIndex ? '1 1 0' : '0 0 auto';
+    var isLastVisibleColumn = index === visibleColumns.length - lastVisibleIndex;
     if (headerStyle) {
-      headerStyle.flex = lastVisibleFlexStyle;
+      Object.assign(headerStyle, {
+        flex: isLastVisibleColumn ? '1 1 0' : '0 0 auto',
+        overflow: isLastVisibleColumn ? 'hidden' : headerStyle.overflow
+      });
     }
     return /*#__PURE__*/React__default.createElement(TableHeader, _extends({}, headerProps, {
-      className: cx(header === null || header === void 0 ? void 0 : header.className, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__resizableColumn"), resizerProps), "".concat(blockClass, "__isResizing"), header === null || header === void 0 ? void 0 : header.isResizing), "".concat(blockClass, "__sortableColumn"), datagridState.isTableSortable && header.id !== 'spacer'), "".concat(blockClass, "__isSorted"), header === null || header === void 0 ? void 0 : header.isSorted), "".concat(blockClass, "__header-actions-column"), header === null || header === void 0 ? void 0 : header.isAction), "".concat(blockClass, "__with-slug"), header.slug && /*#__PURE__*/React__default.isValidElement(header === null || header === void 0 ? void 0 : header.slug)), headerProps.className),
+      className: cx(header === null || header === void 0 ? void 0 : header.className, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__resizableColumn"), resizerProps), "".concat(blockClass, "__isResizing"), header === null || header === void 0 ? void 0 : header.isResizing), "".concat(blockClass, "__sortableColumn"), datagridState.isTableSortable && header.id !== 'spacer'), "".concat(blockClass, "__isSorted"), header === null || header === void 0 ? void 0 : header.isSorted), "".concat(blockClass, "__header-actions-column"), header === null || header === void 0 ? void 0 : header.isAction), "".concat(blockClass, "__with-slug"), header.slug && /*#__PURE__*/React__default.isValidElement(header === null || header === void 0 ? void 0 : header.slug)), "".concat(blockClass, "__with-ai-label"), header.aiLabel && /*#__PURE__*/React__default.isValidElement(header === null || header === void 0 ? void 0 : header.aiLabel)), headerProps.className),
       key: header.id,
       "aria-hidden": header.id === 'spacer' && 'true'
-    }, getAccessibilityProps(header)), header.render('Header'), renderSlug(header.slug), resizerProps && !header.isAction && /*#__PURE__*/React__default.createElement(ResizeHeader, {
+    }, getAccessibilityProps(header)), header.render('Header'), renderAILabel(header.aiLabel || header.slug), resizerProps && !header.isAction && /*#__PURE__*/React__default.createElement(ResizeHeader, {
       resizerProps: resizerProps,
       header: header,
       handleOnMouseDownResize: handleOnMouseDownResize,

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

@@ -4,6 +4,7 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
+import React from 'react';
 import { DataGridState } from '../types';
-declare const DatagridRefBody: (datagridState: DataGridState) => import("react/jsx-runtime").JSX.Element;
+declare const DatagridRefBody: (datagridState: DataGridState) => React.JSX.Element;
 export default DatagridRefBody;

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

@@ -4,6 +4,7 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
+import React from 'react';
 import { DataGridState } from '../types';
-declare const DatagridRow: (datagridState: DataGridState) => import("react/jsx-runtime").JSX.Element;
+declare const DatagridRow: (datagridState: DataGridState) => React.JSX.Element;
 export default DatagridRow;

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

@@ -12,7 +12,7 @@ import { px } from '@carbon/layout';
 import { selectionColumnId } from '../common-column-ids.js';
 import cx from 'classnames';
 import { pkg, carbon } from '../../../settings.js';
-import { DatagridSlug } from './addons/Slug/DatagridSlug.js';
+import { DatagridAILabel } from './addons/AiLabel/DatagridAiLabel.js';
 
 var _SkeletonText;
 var _excluded = ["className"],
@@ -28,7 +28,7 @@ var rowHeights = {
 
 // eslint-disable-next-line react/prop-types
 var DatagridRow = function DatagridRow(datagridState) {
-  var _row$original, _row$original2, _row$original3;
+  var _row$original, _row$original2, _row$original3, _row$original4, _row$original5, _row$original6;
   var row = datagridState.row,
     rows = datagridState.rows,
     rowSize = datagridState.rowSize,
@@ -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/DatagridSelectAll.d.ts

@@ -4,6 +4,7 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
+import React from 'react';
 import { DataGridState } from '../types';
-declare const SelectAll: (datagridState: DataGridState) => import("react/jsx-runtime").JSX.Element;
+declare const SelectAll: (datagridState: DataGridState) => React.JSX.Element;
 export { SelectAll };

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

@@ -4,10 +4,11 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
+import React from 'react';
 import PropTypes from 'prop-types';
 import { DataGridState } from '../types';
 declare const SelectAllWithToggle: {
-    ({ tableId, isFetching, isAllRowsSelected, selectAllToggle, getToggleAllPageRowsSelectedProps, getToggleAllRowsSelectedProps, allPageRowsLabel, allRowsLabel, columns, withStickyColumn, }: DataGridState): import("react/jsx-runtime").JSX.Element;
+    ({ tableId, isFetching, isAllRowsSelected, selectAllToggle, getToggleAllPageRowsSelectedProps, getToggleAllRowsSelectedProps, allPageRowsLabel, allRowsLabel, columns, withStickyColumn, }: DataGridState): React.JSX.Element;
     propTypes: {
         allPageRowsLabel: PropTypes.Requireable<string>;
         allRowsLabel: PropTypes.Requireable<string>;

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

@@ -4,6 +4,7 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
+import React from 'react';
 import { DataGridState } from '../types';
-declare const DatagridSimpleBody: (datagridState: DataGridState) => import("react/jsx-runtime").JSX.Element;
+declare const DatagridSimpleBody: (datagridState: DataGridState) => React.JSX.Element;
 export default DatagridSimpleBody;

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

@@ -4,13 +4,14 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
+import React from 'react';
 import PropTypes from 'prop-types';
 import { DataGridState } from '../types';
 interface DatagridToolbarProps {
     ariaToolbarLabel?: string;
 }
 declare const DatagridToolbar: {
-    ({ ariaToolbarLabel, ...datagridState }: DatagridToolbarProps & DataGridState): import("react/jsx-runtime").JSX.Element | null;
+    ({ ariaToolbarLabel, ...datagridState }: DatagridToolbarProps & DataGridState): React.JSX.Element | null;
     propTypes: {
         ariaToolbarLabel: PropTypes.Requireable<string>;
     };

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

@@ -4,6 +4,7 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
+import React from 'react';
 import { DataGridState } from '../types';
-declare const DatagridVirtualBody: (datagridState: DataGridState) => import("react/jsx-runtime").JSX.Element;
+declare const DatagridVirtualBody: (datagridState: DataGridState) => React.JSX.Element;
 export default DatagridVirtualBody;

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

@@ -4,7 +4,7 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { PropsWithChildren, ReactNode } from 'react';
+import React, { PropsWithChildren, ReactNode } from 'react';
 import PropTypes from 'prop-types';
 interface DraggableElementProps extends PropsWithChildren {
     ariaLabel: string;
@@ -16,7 +16,7 @@ interface DraggableElementProps extends PropsWithChildren {
     selected?: boolean;
 }
 declare const DraggableElement: {
-    ({ id, children, classList, disabled, ariaLabel, isSticky, selected, }: DraggableElementProps): import("react/jsx-runtime").JSX.Element;
+    ({ id, children, classList, disabled, ariaLabel, isSticky, selected, }: DraggableElementProps): React.JSX.Element;
     propTypes: {
         ariaLabel: PropTypes.Validator<string>;
         children: PropTypes.Validator<PropTypes.ReactElementLike>;

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