@carbon/react 1.73.0-rc.0 → 1.74.0-rc.0

package/lib/components/Breadcrumb/BreadcrumbItem.js

@@ -66,6 +66,7 @@ const BreadcrumbItem = /*#__PURE__*/React__default["default"].forwardRef(functio
       href: href,
       "aria-current": ariaCurrent || isCurrentPage
     }, children) : /*#__PURE__*/React__default["default"].createElement(Text.Text, {
+      "aria-current": ariaCurrent || isCurrentPage,
       className: `${prefix}--link`
     }, children));
   }

package/lib/components/ComposedModal/ComposedModal.js

@@ -129,6 +129,7 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
   const button = React.useRef(null);
   const startSentinel = React.useRef(null);
   const endSentinel = React.useRef(null);
+  const onMouseDownTarget = React.useRef(null);
   const focusTrapWithoutSentinels = index$1.useFeatureFlag('enable-experimental-focus-wrap-without-sentinels');
 
   // Keep track of modal open/close state
@@ -161,10 +162,15 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
     }
     onKeyDown?.(event);
   }
+  function handleOnMouseDown(evt) {
+    const target = evt.target;
+    onMouseDownTarget.current = target;
+  }
   function handleOnClick(evt) {
     const target = evt.target;
+    const mouseDownTarget = onMouseDownTarget.current;
     evt.stopPropagation();
-    if (!preventCloseOnClickOutside && !wrapFocus.elementOrParentIsFloatingMenu(target, selectorsFloatingMenus) && innerModal.current && !innerModal.current.contains(target)) {
+    if (!preventCloseOnClickOutside && !wrapFocus.elementOrParentIsFloatingMenu(target, selectorsFloatingMenus) && innerModal.current && !innerModal.current.contains(target) && !innerModal.current.contains(mouseDownTarget)) {
       closeModal(evt);
     }
   }
@@ -275,6 +281,7 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
     "aria-hidden": !open,
     onBlur: !focusTrapWithoutSentinels ? handleBlur : () => {},
     onClick: events.composeEventHandlers([rest?.onClick, handleOnClick]),
+    onMouseDown: events.composeEventHandlers([rest?.onMouseDown, handleOnMouseDown]),
     onKeyDown: handleKeyDown,
     className: modalClass
   }), /*#__PURE__*/React__default["default"].createElement("div", {

package/lib/components/DataTable/DataTable.d.ts

@@ -15,6 +15,7 @@ import TableBatchActions from './TableBatchActions';
 import TableBody from './TableBody';
 import TableCell from './TableCell';
 import TableContainer from './TableContainer';
+import TableDecoratorRow from './TableDecoratorRow';
 import TableExpandHeader from './TableExpandHeader';
 import TableExpandRow from './TableExpandRow';
 import TableExpandedRow from './TableExpandedRow';
@@ -70,6 +71,7 @@ export interface DataTableHeader {
     key: string;
     header: React.ReactNode;
     slug?: React.ReactElement;
+    decorator?: React.ReactElement;
 }
 export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
     headers: Array<DataTableHeader>;
@@ -174,7 +176,8 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
         cell: DataTableCell<ColTypes>;
     }) => {
         [key: string]: unknown;
-        hasSlugHeader?: boolean;
+        hasAILabelHeader?: boolean;
+        hasDecoratorHeader?: boolean;
     };
     onInputChange: (e: React.ChangeEvent<HTMLInputElement>, defaultValue?: string) => void;
     sortBy: (headerKey: string) => void;
@@ -318,6 +321,7 @@ declare class DataTable<RowType, ColTypes extends any[]> extends React.Component
     static TableBody: typeof TableBody;
     static TableCell: typeof TableCell;
     static TableContainer: typeof TableContainer;
+    static TableDecoratorRow: typeof TableDecoratorRow;
     static TableExpandHeader: typeof TableExpandHeader;
     static TableExpandRow: typeof TableExpandRow;
     static TableExpandedRow: typeof TableExpandedRow;
@@ -358,6 +362,7 @@ declare class DataTable<RowType, ColTypes extends any[]> extends React.Component
         isSortable: boolean | undefined;
         isSortHeader: boolean;
         slug: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+        decorator: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
         onClick: (event: any) => void;
     };
     /**
@@ -505,7 +510,8 @@ declare class DataTable<RowType, ColTypes extends any[]> extends React.Component
         [x: string]: any;
         cell: any;
     }) => {
-        hasSlugHeader: any;
+        hasAILabelHeader: any;
+        hasDecoratorHeader: any;
     };
     /**
      * Helper utility to get all the currently selected rows

package/lib/components/DataTable/DataTable.js

@@ -27,6 +27,7 @@ var TableBatchActions = require('./TableBatchActions.js');
 var TableBody = require('./TableBody.js');
 var TableCell = require('./TableCell.js');
 var TableContainer = require('./TableContainer.js');
+var TableDecoratorRow = require('./TableDecoratorRow.js');
 var TableExpandHeader = require('./TableExpandHeader.js');
 var TableExpandRow = require('./TableExpandRow.js');
 var TableExpandedRow = require('./TableExpandedRow.js');
@@ -119,6 +120,7 @@ class DataTable extends React__default["default"].Component {
         isSortable,
         isSortHeader: sortHeaderKey === header.key,
         slug: header.slug,
+        decorator: header.decorator,
         onClick: event => {
           const nextSortState = sorting.getNextSortState(this.props, this.state, {
             key: header.key
@@ -373,7 +375,8 @@ class DataTable extends React__default["default"].Component {
       } = _ref4;
       return {
         ...rest,
-        hasSlugHeader: cell.hasSlugHeader
+        hasAILabelHeader: cell.hasAILabelHeader,
+        hasDecoratorHeader: cell.hasDecoratorHeader
       };
     });
     /**
@@ -753,6 +756,7 @@ _rollupPluginBabelHelpers.defineProperty(DataTable, "TableBatchActions", void 0)
 _rollupPluginBabelHelpers.defineProperty(DataTable, "TableBody", void 0);
 _rollupPluginBabelHelpers.defineProperty(DataTable, "TableCell", void 0);
 _rollupPluginBabelHelpers.defineProperty(DataTable, "TableContainer", void 0);
+_rollupPluginBabelHelpers.defineProperty(DataTable, "TableDecoratorRow", void 0);
 _rollupPluginBabelHelpers.defineProperty(DataTable, "TableExpandHeader", void 0);
 _rollupPluginBabelHelpers.defineProperty(DataTable, "TableExpandRow", void 0);
 _rollupPluginBabelHelpers.defineProperty(DataTable, "TableExpandedRow", void 0);
@@ -774,6 +778,7 @@ DataTable.TableBatchActions = TableBatchActions["default"];
 DataTable.TableBody = TableBody["default"];
 DataTable.TableCell = TableCell["default"];
 DataTable.TableContainer = TableContainer["default"];
+DataTable.TableDecoratorRow = TableDecoratorRow["default"];
 DataTable.TableExpandHeader = TableExpandHeader["default"];
 DataTable.TableExpandRow = TableExpandRow["default"];
 DataTable.TableExpandedRow = TableExpandedRow["default"];

package/lib/components/DataTable/TableCell.d.ts

@@ -22,7 +22,7 @@ interface TableCellProps extends ReactAttr<HTMLTableCellElement> {
     /**
      * Specify if the table cell is in an AI column
      */
-    hasSlugHeader?: boolean;
+    hasAILabelHeader?: boolean;
     /**
      * The id of the matching th node in the table head. Addresses a11y concerns outlined here: https://www.ibm.com/able/guidelines/ci162/info_and_relationships.html and https://www.w3.org/TR/WCAG20-TECHS/H43
      */

package/lib/components/DataTable/TableCell.js

@@ -23,13 +23,13 @@ const TableCell = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref)
   let {
     children,
     className,
-    hasSlugHeader,
+    hasAILabelHeader,
     colSpan,
     ...rest
   } = _ref;
   const prefix = usePrefix.usePrefix();
   const tableCellClassNames = cx__default["default"](className, {
-    [`${prefix}--table-cell--column-slug`]: hasSlugHeader
+    [`${prefix}--table-cell--column-slug`]: hasAILabelHeader
   });
   return /*#__PURE__*/React__default["default"].createElement("td", _rollupPluginBabelHelpers["extends"]({
     className: tableCellClassNames ? tableCellClassNames : undefined,

package/lib/components/DataTable/TableDecoratorRow.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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 PropTypes from 'prop-types';
+import { ReactNode } from 'react';
+export interface TableDecoratorRowProps {
+    /**
+     * The CSS class names of the cell that wraps the underlying input control
+     */
+    className?: string;
+    /**
+     * **Experimental**: Provide a `decorator` component to be rendered inside the `TableDecoratorRow` component
+     */
+    decorator?: ReactNode;
+}
+declare const TableDecoratorRow: {
+    ({ className, decorator, }: TableDecoratorRowProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+    propTypes: {
+        /**
+         * The CSS class names of the cell that wraps the underlying input control
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * **Experimental**: Provide a `decorator` component to be rendered inside the `TableDecoratorRow` component
+         */
+        decorator: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    };
+};
+export default TableDecoratorRow;

package/lib/components/DataTable/TableDecoratorRow.js

@@ -0,0 +1,58 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var PropTypes = require('prop-types');
+var React = require('react');
+var cx = require('classnames');
+var usePrefix = require('../../internal/usePrefix.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+const TableDecoratorRow = _ref => {
+  let {
+    className,
+    decorator
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const TableDecoratorRowClasses = cx__default["default"]({
+    ...(className && {
+      [className]: true
+    }),
+    [`${prefix}--table-column-decorator`]: true,
+    [`${prefix}--table-column-decorator--active`]: decorator
+  });
+  let normalizedDecorator = /*#__PURE__*/React__default["default"].isValidElement(decorator) ? decorator : null;
+  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
+    normalizedDecorator = /*#__PURE__*/React__default["default"].cloneElement(normalizedDecorator, {
+      size: 'mini'
+    });
+  }
+  return /*#__PURE__*/React__default["default"].createElement("td", {
+    className: TableDecoratorRowClasses
+  }, normalizedDecorator);
+};
+TableDecoratorRow.displayName = 'TableDecoratorRow';
+TableDecoratorRow.propTypes = {
+  /**
+   * The CSS class names of the cell that wraps the underlying input control
+   */
+  className: PropTypes__default["default"].string,
+  /**
+   * **Experimental**: Provide a `decorator` component to be rendered inside the `TableDecoratorRow` component
+   */
+  decorator: PropTypes__default["default"].node
+};
+
+exports["default"] = TableDecoratorRow;

package/lib/components/DataTable/TableExpandRow.js

@@ -39,18 +39,18 @@ const TableExpandRow = /*#__PURE__*/React__default["default"].forwardRef((_ref,
   } = _ref;
   const prefix = usePrefix.usePrefix();
 
-  // We need to put the slug before the expansion arrow and all other table cells after the arrow.
-  let rowHasSlug;
-  const slug = React__default["default"].Children.toArray(children).map(child => {
-    if (child.type?.displayName === 'TableSlugRow') {
-      if (child.props.slug) {
-        rowHasSlug = true;
+  // We need to put the AILabel and Decorator before the expansion arrow and all other table cells after the arrow.
+  let rowHasAILabel;
+  const decorator = React__default["default"].Children.toArray(children).map(child => {
+    if (child.type?.displayName === 'TableSlugRow' || child.type?.displayName === 'TableDecoratorRow') {
+      if (child.props.slug || child.props.decorator?.type.displayName === 'AILabel') {
+        rowHasAILabel = true;
       }
       return child;
     }
   });
   const normalizedChildren = React__default["default"].Children.toArray(children).map(child => {
-    if (child.type?.displayName !== 'TableSlugRow') {
+    if (child.type?.displayName !== 'TableSlugRow' && child.type?.displayName !== 'TableDecoratorRow') {
       return child;
     }
   });
@@ -58,14 +58,14 @@ const TableExpandRow = /*#__PURE__*/React__default["default"].forwardRef((_ref,
     [`${prefix}--parent-row`]: true,
     [`${prefix}--expandable-row`]: isExpanded,
     [`${prefix}--data-table--selected`]: isSelected,
-    [`${prefix}--data-table--slug-row`]: rowHasSlug
+    [`${prefix}--data-table--slug-row ${prefix}--data-table--ai-label-row`]: rowHasAILabel
   }, rowClassName);
   const previousValue = isExpanded ? 'collapsed' : undefined;
   return /*#__PURE__*/React__default["default"].createElement("tr", _rollupPluginBabelHelpers["extends"]({}, rest, {
     ref: ref,
     className: className,
     "data-parent-row": true
-  }), slug, /*#__PURE__*/React__default["default"].createElement(TableCell["default"], {
+  }), decorator, /*#__PURE__*/React__default["default"].createElement(TableCell["default"], {
     className: `${prefix}--table-expand`,
     "data-previous-value": previousValue,
     headers: expandHeader

package/lib/components/DataTable/TableHeader.d.ts

@@ -58,9 +58,14 @@ interface TableHeaderProps extends ReactAttr<HTMLTableCellElement & HTMLButtonEl
      */
     scope?: string;
     /**
-     * **Experimental**: Provide a `Slug` component to be rendered inside the `TableSlugRow` component
+     * @deprecated please use decorator instead.
+     * Provide a `Slug` component to be rendered inside the `TableSlugRow` component
      */
     slug?: ReactNode;
+    /**
+     * **Experimental**: Provide a `decorator` component to be rendered inside the `TableDecoratorRow` component
+     */
+    decorator?: ReactNode;
     /**
      * Specify which direction we are currently sorting by, should be one of DESC,
      * NONE, or ASC.

package/lib/components/DataTable/TableHeader.js

@@ -56,6 +56,7 @@ const TableHeader = /*#__PURE__*/React__default["default"].forwardRef(function T
     className: headerClassName,
     children,
     colSpan,
+    decorator,
     isSortable = false,
     isSortHeader,
     onClick,
@@ -69,18 +70,21 @@ const TableHeader = /*#__PURE__*/React__default["default"].forwardRef(function T
   const prefix = usePrefix.usePrefix();
   const uniqueId = useId.useId('table-sort');
 
-  // Slug is always size `mini`
-  const slugRef = React.useRef(null);
-  let normalizedSlug;
-  if (slug) {
-    normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
+  // AILabel is always size `mini`
+  const AILableRef = React.useRef(null);
+  let colHasAILabel;
+  let normalizedDecorator = /*#__PURE__*/React__default["default"].isValidElement(slug ?? decorator) ? slug ?? decorator : null;
+  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
+    colHasAILabel = true;
+    normalizedDecorator = /*#__PURE__*/React__default["default"].cloneElement(normalizedDecorator, {
       size: 'mini',
-      ref: slugRef
+      ref: AILableRef
     });
   }
   const headerLabelClassNames = cx__default["default"]({
     [`${prefix}--table-header-label`]: true,
-    [`${prefix}--table-header-label--slug`]: slug
+    [`${prefix}--table-header-label--slug ${prefix}--table-header-label--ai-label`]: colHasAILabel,
+    [`${prefix}--table-header-label--decorator`]: decorator
   });
   if (!isSortable) {
     return /*#__PURE__*/React__default["default"].createElement("th", _rollupPluginBabelHelpers["extends"]({}, rest, {
@@ -91,7 +95,9 @@ const TableHeader = /*#__PURE__*/React__default["default"].forwardRef(function T
       ref: ref
     }), children ? /*#__PURE__*/React__default["default"].createElement("div", {
       className: headerLabelClassNames
-    }, children, normalizedSlug) : null);
+    }, children, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: `${prefix}--table-header-label--decorator-inner`
+    }, normalizedDecorator)) : null);
   }
   const className = cx__default["default"](headerClassName, {
     [`${prefix}--table-sort`]: true,
@@ -106,10 +112,11 @@ const TableHeader = /*#__PURE__*/React__default["default"].forwardRef(function T
     sortStates: sortStates.sortStates
   });
   const headerClasses = cx__default["default"](headerClassName, `${prefix}--table-sort__header`, {
-    [`${prefix}--table-sort__header--slug`]: slug
+    [`${prefix}--table-sort__header--ai-label`]: colHasAILabel,
+    [`${prefix}--table-sort__header--decorator`]: decorator
   });
   const handleClick = evt => {
-    if (slug && slugRef.current && slugRef.current.contains(evt.target)) {
+    if (colHasAILabel && AILableRef.current && AILableRef.current.contains(evt.target)) {
       return;
     } else if (onClick) {
       return onClick(evt);
@@ -140,7 +147,9 @@ const TableHeader = /*#__PURE__*/React__default["default"].forwardRef(function T
   }), /*#__PURE__*/React__default["default"].createElement(iconsReact.ArrowsVertical, {
     size: 20,
     className: `${prefix}--table-sort__icon-unsorted`
-  }), normalizedSlug)));
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--table-header-label--decorator-inner`
+  }, normalizedDecorator))));
 });
 TableHeader.propTypes = {
   /**

package/lib/components/DataTable/TableRow.js

@@ -22,12 +22,12 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 const TableRow = props => {
   const prefix = usePrefix.usePrefix();
-  let rowHasSlug;
+  let rowHasAILabel;
   if (props?.children) {
     React__default["default"].Children.toArray(props.children).map(child => {
-      if (child.type?.displayName === 'TableSlugRow') {
-        if (child.props.slug) {
-          rowHasSlug = true;
+      if (child.type?.displayName === 'TableSlugRow' || child.type?.displayName === 'TableDecoratorRow') {
+        if (child.props.slug || child.props.decorator?.type.displayName === 'AILabel') {
+          rowHasAILabel = true;
         }
       }
     });
@@ -36,7 +36,7 @@ const TableRow = props => {
   // only useful in `TableExpandRow`
   const className = cx__default["default"](props.className, {
     [`${prefix}--data-table--selected`]: props.isSelected,
-    [`${prefix}--data-table--slug-row`]: rowHasSlug
+    [`${prefix}--data-table--slug-row ${prefix}--data-table--ai-label-row`]: rowHasAILabel
   });
   const {
     ariaLabel,

package/lib/components/DataTable/TableSlugRow.js

@@ -13,6 +13,7 @@ var PropTypes = require('prop-types');
 var React = require('react');
 var cx = require('classnames');
 var usePrefix = require('../../internal/usePrefix.js');
+var deprecateComponent = require('../../prop-types/deprecateComponent.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -25,6 +26,9 @@ const TableSlugRow = _ref => {
     className,
     slug
   } = _ref;
+  React.useEffect(() => {
+    deprecateComponent["default"]('TableSlugRow', 'The `TableSlugRow` component has been deprecated and will be removed in the next major version. Use the TableDecoratorRow component instead.');
+  }, []);
   const prefix = usePrefix.usePrefix();
   const TableSlugRowClasses = cx__default["default"]({
     ...(className && {

package/lib/components/DataTable/index.d.ts

@@ -13,6 +13,7 @@ import TableBody from './TableBody';
 import TableCell from './TableCell';
 import TableContainer from './TableContainer';
 import TableExpandHeader from './TableExpandHeader';
+import TableDecoratorRow from './TableDecoratorRow';
 import TableExpandRow from './TableExpandRow';
 import TableExpandedRow from './TableExpandedRow';
 import TableHead from './TableHead';
@@ -27,5 +28,5 @@ import TableToolbarContent from './TableToolbarContent';
 import TableToolbarSearch from './TableToolbarSearch';
 import TableToolbarMenu from './TableToolbarMenu';
 import type { DataTableSortState } from './state/sortStates';
-export { DataTable, type DataTableCell, type DataTableHeader, type DataTableProps, type DataTableRenderProps, type DataTableSortState, type DataTableRow, type DataTableSize, Table, TableActionList, TableBatchAction, TableBatchActions, TableBody, TableCell, TableContainer, TableExpandHeader, TableExpandRow, TableExpandedRow, TableHead, TableHeader, type TableHeaderTranslationKey, type TableHeaderTranslationArgs, TableRow, TableSelectAll, TableSelectRow, TableSlugRow, TableToolbar, TableToolbarAction, TableToolbarContent, TableToolbarSearch, TableToolbarMenu, };
+export { DataTable, type DataTableCell, type DataTableHeader, type DataTableProps, type DataTableRenderProps, type DataTableSortState, type DataTableRow, type DataTableSize, Table, TableActionList, TableBatchAction, TableBatchActions, TableBody, TableCell, TableContainer, TableDecoratorRow, TableExpandHeader, TableExpandRow, TableExpandedRow, TableHead, TableHeader, type TableHeaderTranslationKey, type TableHeaderTranslationArgs, TableRow, TableSelectAll, TableSelectRow, TableSlugRow, TableToolbar, TableToolbarAction, TableToolbarContent, TableToolbarSearch, TableToolbarMenu, };
 export default DataTable;

package/lib/components/DataTable/index.js

@@ -18,6 +18,7 @@ var TableBody = require('./TableBody.js');
 var TableCell = require('./TableCell.js');
 var TableContainer = require('./TableContainer.js');
 var TableExpandHeader = require('./TableExpandHeader.js');
+var TableDecoratorRow = require('./TableDecoratorRow.js');
 var TableExpandRow = require('./TableExpandRow.js');
 var TableExpandedRow = require('./TableExpandedRow.js');
 var TableHead = require('./TableHead.js');
@@ -39,6 +40,7 @@ DataTable["default"].TableBatchActions = TableBatchActions["default"];
 DataTable["default"].TableBody = TableBody["default"];
 DataTable["default"].TableCell = TableCell["default"];
 DataTable["default"].TableContainer = TableContainer["default"];
+DataTable["default"].TableDecoratorRow = TableDecoratorRow["default"];
 DataTable["default"].TableExpandHeader = TableExpandHeader["default"];
 DataTable["default"].TableExpandRow = TableExpandRow["default"];
 DataTable["default"].TableExpandedRow = TableExpandedRow["default"];
@@ -64,6 +66,7 @@ exports.TableBody = TableBody["default"];
 exports.TableCell = TableCell["default"];
 exports.TableContainer = TableContainer["default"];
 exports.TableExpandHeader = TableExpandHeader["default"];
+exports.TableDecoratorRow = TableDecoratorRow["default"];
 exports.TableExpandRow = TableExpandRow["default"];
 exports.TableExpandedRow = TableExpandedRow["default"];
 exports.TableHead = TableHead["default"];

package/lib/components/DataTable/tools/normalize.js

@@ -53,7 +53,8 @@ const normalize = function (rows, headers) {
     headers.forEach((_ref, i) => {
       let {
         key,
-        slug
+        slug,
+        decorator
       } = _ref;
       const id = cells.getCellId(row.id, key);
       // Initialize the cell info and state values, namely for editing
@@ -64,7 +65,7 @@ const normalize = function (rows, headers) {
         isEditing: false,
         isValid: true,
         errors: null,
-        hasSlugHeader: !!slug,
+        hasAILabelHeader: !!(slug || decorator?.type?.displayName === 'AILabel'),
         info: {
           header: key
         }

package/lib/components/IconButton/index.d.ts

@@ -20,6 +20,10 @@ interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>
      * **Experimental**: Will attempt to automatically align the tooltip
      */
     autoAlign?: boolean;
+    /**
+     * Optionally specify an href for your IconButton to become an `<a>` element
+     */
+    href?: string;
     /**
      * Provide an icon or asset to be rendered inside of the IconButton
      */

package/lib/components/IconButton/index.js

@@ -114,6 +114,10 @@ IconButton.propTypes = {
    * **Experimental**: Will attempt to automatically align the tooltip
    */
   autoAlign: PropTypes__default["default"].bool,
+  /**
+   * Optionally specify an href for your IconButton to become an `<a>` element
+   */
+  href: PropTypes__default["default"].string,
   /**
    * Provide an icon or asset to be rendered inside of the IconButton
    */

package/lib/components/IconIndicator/index.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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';
+export declare const IconIndicatorKinds: string[];
+export type IconIndicatorKind = (typeof IconIndicatorKinds)[number];
+interface IconIndicatorProps {
+    /**
+     * Specify an optional className to add.
+     */
+    className?: string;
+    /**
+     * Specify the kind of icon to be used
+     */
+    kind: IconIndicatorKind;
+    /**
+     * Label next to the icon
+     */
+    label: string;
+    /**
+     * Specify the size of the Icon Indicator. Defaults to 16.
+     */
+    size?: 16 | 20;
+}
+export declare const IconIndicator: React.ForwardRefExoticComponent<IconIndicatorProps & React.RefAttributes<HTMLDivElement>>;
+export default IconIndicator;

package/lib/components/IconIndicator/index.js

@@ -0,0 +1,84 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var PropTypes = require('prop-types');
+var React = require('react');
+var cx = require('classnames');
+var usePrefix = require('../../internal/usePrefix.js');
+var iconsReact = require('@carbon/icons-react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+const IconIndicatorKinds = ['failed', 'caution-major', 'caution-minor', 'undefined', 'succeeded', 'normal', 'in-progress', 'incomplete', 'not-started', 'pending', 'unknown', 'informative'];
+const iconTypes = {
+  failed: iconsReact.ErrorFilled,
+  ['caution-major']: iconsReact.WarningAltInvertedFilled,
+  ['caution-minor']: iconsReact.WarningAltFilled,
+  undefined: iconsReact.UndefinedFilled,
+  succeeded: iconsReact.CheckmarkFilled,
+  normal: iconsReact.CheckmarkOutline,
+  ['in-progress']: iconsReact.InProgress,
+  incomplete: iconsReact.Incomplete,
+  ['not-started']: iconsReact.CircleDash,
+  pending: iconsReact.PendingFilled,
+  unknown: iconsReact.UnknownFilled,
+  informative: iconsReact.WarningSquareFilled
+};
+const IconIndicator = /*#__PURE__*/React__default["default"].forwardRef(function IconIndicatorContent(_ref, ref) {
+  let {
+    className: customClassName,
+    kind,
+    label,
+    size = 16,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const classNames = cx__default["default"](`${prefix}--icon-indicator`, customClassName, {
+    [`${prefix}--icon-indicator--20`]: size == 20
+  });
+  const IconForKind = iconTypes[kind];
+  if (!IconForKind) {
+    return null;
+  }
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classNames,
+    ref: ref
+  }, /*#__PURE__*/React__default["default"].createElement(IconForKind, {
+    size: size,
+    className: `${prefix}--icon-indicator--${kind}`
+  }), label);
+});
+IconIndicator.propTypes = {
+  /**
+   * Specify an optional className to add.
+   */
+  className: PropTypes__default["default"].string,
+  /**
+   * Specify the kind of the Icon Indicator
+   */
+  kind: PropTypes__default["default"].oneOf(IconIndicatorKinds).isRequired,
+  /**
+   * Label next to the icon.
+   */
+  label: PropTypes__default["default"].string.isRequired,
+  /**
+   * Specify the size of the Icon Indicator. Defaults to 16.
+   */
+  size: PropTypes__default["default"].oneOf([16, 20])
+};
+
+exports.IconIndicator = IconIndicator;
+exports.IconIndicatorKinds = IconIndicatorKinds;
+exports["default"] = IconIndicator;

package/lib/index.d.ts

@@ -128,3 +128,4 @@ export * from './components/Tooltip/DefinitionTooltip';
 export * from './components/Theme';
 export * from './internal/usePrefix';
 export { useIdPrefix } from './internal/useIdPrefix';
+export { IconIndicator as unstable__IconIndicator } from './components/IconIndicator';