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

package/es/components/Breadcrumb/BreadcrumbItem.js

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

package/es/components/ComposedModal/ComposedModal.js

@@ -119,6 +119,7 @@ const ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedMo
   const button = useRef(null);
   const startSentinel = useRef(null);
   const endSentinel = useRef(null);
+  const onMouseDownTarget = useRef(null);
   const focusTrapWithoutSentinels = useFeatureFlag('enable-experimental-focus-wrap-without-sentinels');
 
   // Keep track of modal open/close state
@@ -151,10 +152,15 @@ const ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedMo
     }
     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 && !elementOrParentIsFloatingMenu(target, selectorsFloatingMenus) && innerModal.current && !innerModal.current.contains(target)) {
+    if (!preventCloseOnClickOutside && !elementOrParentIsFloatingMenu(target, selectorsFloatingMenus) && innerModal.current && !innerModal.current.contains(target) && !innerModal.current.contains(mouseDownTarget)) {
       closeModal(evt);
     }
   }
@@ -265,6 +271,7 @@ const ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedMo
     "aria-hidden": !open,
     onBlur: !focusTrapWithoutSentinels ? handleBlur : () => {},
     onClick: composeEventHandlers([rest?.onClick, handleOnClick]),
+    onMouseDown: composeEventHandlers([rest?.onMouseDown, handleOnMouseDown]),
     onKeyDown: handleKeyDown,
     className: modalClass
   }), /*#__PURE__*/React__default.createElement("div", {

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

@@ -23,6 +23,7 @@ import TableBatchActions from './TableBatchActions.js';
 import TableBody from './TableBody.js';
 import TableCell from './TableCell.js';
 import TableContainer from './TableContainer.js';
+import TableDecoratorRow from './TableDecoratorRow.js';
 import TableExpandHeader from './TableExpandHeader.js';
 import TableExpandRow from './TableExpandRow.js';
 import TableExpandedRow from './TableExpandedRow.js';
@@ -109,6 +110,7 @@ class DataTable extends React__default.Component {
         isSortable,
         isSortHeader: sortHeaderKey === header.key,
         slug: header.slug,
+        decorator: header.decorator,
         onClick: event => {
           const nextSortState = getNextSortState(this.props, this.state, {
             key: header.key
@@ -363,7 +365,8 @@ class DataTable extends React__default.Component {
       } = _ref4;
       return {
         ...rest,
-        hasSlugHeader: cell.hasSlugHeader
+        hasAILabelHeader: cell.hasAILabelHeader,
+        hasDecoratorHeader: cell.hasDecoratorHeader
       };
     });
     /**
@@ -743,6 +746,7 @@ _defineProperty(DataTable, "TableBatchActions", void 0);
 _defineProperty(DataTable, "TableBody", void 0);
 _defineProperty(DataTable, "TableCell", void 0);
 _defineProperty(DataTable, "TableContainer", void 0);
+_defineProperty(DataTable, "TableDecoratorRow", void 0);
 _defineProperty(DataTable, "TableExpandHeader", void 0);
 _defineProperty(DataTable, "TableExpandRow", void 0);
 _defineProperty(DataTable, "TableExpandedRow", void 0);
@@ -764,6 +768,7 @@ DataTable.TableBatchActions = TableBatchActions;
 DataTable.TableBody = TableBody;
 DataTable.TableCell = TableCell;
 DataTable.TableContainer = TableContainer;
+DataTable.TableDecoratorRow = TableDecoratorRow;
 DataTable.TableExpandHeader = TableExpandHeader;
 DataTable.TableExpandRow = TableExpandRow;
 DataTable.TableExpandedRow = TableExpandedRow;

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

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

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

@@ -0,0 +1,48 @@
+/**
+ * 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 React__default from 'react';
+import cx from 'classnames';
+import { usePrefix } from '../../internal/usePrefix.js';
+
+const TableDecoratorRow = _ref => {
+  let {
+    className,
+    decorator
+  } = _ref;
+  const prefix = usePrefix();
+  const TableDecoratorRowClasses = cx({
+    ...(className && {
+      [className]: true
+    }),
+    [`${prefix}--table-column-decorator`]: true,
+    [`${prefix}--table-column-decorator--active`]: decorator
+  });
+  let normalizedDecorator = /*#__PURE__*/React__default.isValidElement(decorator) ? decorator : null;
+  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
+    normalizedDecorator = /*#__PURE__*/React__default.cloneElement(normalizedDecorator, {
+      size: 'mini'
+    });
+  }
+  return /*#__PURE__*/React__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.string,
+  /**
+   * **Experimental**: Provide a `decorator` component to be rendered inside the `TableDecoratorRow` component
+   */
+  decorator: PropTypes.node
+};
+
+export { TableDecoratorRow as default };

package/es/components/DataTable/TableExpandRow.js

@@ -29,18 +29,18 @@ const TableExpandRow = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   } = _ref;
   const prefix = 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.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.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.Children.toArray(children).map(child => {
-    if (child.type?.displayName !== 'TableSlugRow') {
+    if (child.type?.displayName !== 'TableSlugRow' && child.type?.displayName !== 'TableDecoratorRow') {
       return child;
     }
   });
@@ -48,14 +48,14 @@ const TableExpandRow = /*#__PURE__*/React__default.forwardRef((_ref, 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.createElement("tr", _extends({}, rest, {
     ref: ref,
     className: className,
     "data-parent-row": true
-  }), slug, /*#__PURE__*/React__default.createElement(TableCell, {
+  }), decorator, /*#__PURE__*/React__default.createElement(TableCell, {
     className: `${prefix}--table-expand`,
     "data-previous-value": previousValue,
     headers: expandHeader

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

@@ -46,6 +46,7 @@ const TableHeader = /*#__PURE__*/React__default.forwardRef(function TableHeader(
     className: headerClassName,
     children,
     colSpan,
+    decorator,
     isSortable = false,
     isSortHeader,
     onClick,
@@ -59,18 +60,21 @@ const TableHeader = /*#__PURE__*/React__default.forwardRef(function TableHeader(
   const prefix = usePrefix();
   const uniqueId = useId('table-sort');
 
-  // Slug is always size `mini`
-  const slugRef = useRef(null);
-  let normalizedSlug;
-  if (slug) {
-    normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
+  // AILabel is always size `mini`
+  const AILableRef = useRef(null);
+  let colHasAILabel;
+  let normalizedDecorator = /*#__PURE__*/React__default.isValidElement(slug ?? decorator) ? slug ?? decorator : null;
+  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
+    colHasAILabel = true;
+    normalizedDecorator = /*#__PURE__*/React__default.cloneElement(normalizedDecorator, {
       size: 'mini',
-      ref: slugRef
+      ref: AILableRef
     });
   }
   const headerLabelClassNames = cx({
     [`${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.createElement("th", _extends({}, rest, {
@@ -81,7 +85,9 @@ const TableHeader = /*#__PURE__*/React__default.forwardRef(function TableHeader(
       ref: ref
     }), children ? /*#__PURE__*/React__default.createElement("div", {
       className: headerLabelClassNames
-    }, children, normalizedSlug) : null);
+    }, children, /*#__PURE__*/React__default.createElement("div", {
+      className: `${prefix}--table-header-label--decorator-inner`
+    }, normalizedDecorator)) : null);
   }
   const className = cx(headerClassName, {
     [`${prefix}--table-sort`]: true,
@@ -96,10 +102,11 @@ const TableHeader = /*#__PURE__*/React__default.forwardRef(function TableHeader(
     sortStates
   });
   const headerClasses = cx(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);
@@ -130,7 +137,9 @@ const TableHeader = /*#__PURE__*/React__default.forwardRef(function TableHeader(
   }), /*#__PURE__*/React__default.createElement(ArrowsVertical, {
     size: 20,
     className: `${prefix}--table-sort__icon-unsorted`
-  }), normalizedSlug)));
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--table-header-label--decorator-inner`
+  }, normalizedDecorator))));
 });
 TableHeader.propTypes = {
   /**

package/es/components/DataTable/TableRow.js

@@ -12,12 +12,12 @@ import { usePrefix } from '../../internal/usePrefix.js';
 
 const TableRow = props => {
   const prefix = usePrefix();
-  let rowHasSlug;
+  let rowHasAILabel;
   if (props?.children) {
     React__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;
         }
       }
     });
@@ -26,7 +26,7 @@ const TableRow = props => {
   // only useful in `TableExpandRow`
   const className = cx(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/es/components/DataTable/TableSlugRow.js

@@ -6,15 +6,19 @@
  */
 
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React__default, { useEffect } from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
+import deprecateComponent from '../../prop-types/deprecateComponent.js';
 
 const TableSlugRow = _ref => {
   let {
     className,
     slug
   } = _ref;
+  useEffect(() => {
+    deprecateComponent('TableSlugRow', 'The `TableSlugRow` component has been deprecated and will be removed in the next major version. Use the TableDecoratorRow component instead.');
+  }, []);
   const prefix = usePrefix();
   const TableSlugRowClasses = cx({
     ...(className && {

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

@@ -23,6 +23,8 @@ import TableContainer from './TableContainer.js';
 export { default as TableContainer } from './TableContainer.js';
 import TableExpandHeader from './TableExpandHeader.js';
 export { default as TableExpandHeader } from './TableExpandHeader.js';
+import TableDecoratorRow from './TableDecoratorRow.js';
+export { default as TableDecoratorRow } from './TableDecoratorRow.js';
 import TableExpandRow from './TableExpandRow.js';
 export { default as TableExpandRow } from './TableExpandRow.js';
 import TableExpandedRow from './TableExpandedRow.js';
@@ -57,6 +59,7 @@ DataTable.TableBatchActions = TableBatchActions;
 DataTable.TableBody = TableBody;
 DataTable.TableCell = TableCell;
 DataTable.TableContainer = TableContainer;
+DataTable.TableDecoratorRow = TableDecoratorRow;
 DataTable.TableExpandHeader = TableExpandHeader;
 DataTable.TableExpandRow = TableExpandRow;
 DataTable.TableExpandedRow = TableExpandedRow;

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

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

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

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

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

@@ -0,0 +1,72 @@
+/**
+ * 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 React__default from 'react';
+import cx from 'classnames';
+import { usePrefix } from '../../internal/usePrefix.js';
+import { ErrorFilled, WarningAltInvertedFilled, WarningAltFilled, UndefinedFilled, CheckmarkFilled, CheckmarkOutline, InProgress, Incomplete, CircleDash, PendingFilled, UnknownFilled, WarningSquareFilled } from '@carbon/icons-react';
+
+const IconIndicatorKinds = ['failed', 'caution-major', 'caution-minor', 'undefined', 'succeeded', 'normal', 'in-progress', 'incomplete', 'not-started', 'pending', 'unknown', 'informative'];
+const iconTypes = {
+  failed: ErrorFilled,
+  ['caution-major']: WarningAltInvertedFilled,
+  ['caution-minor']: WarningAltFilled,
+  undefined: UndefinedFilled,
+  succeeded: CheckmarkFilled,
+  normal: CheckmarkOutline,
+  ['in-progress']: InProgress,
+  incomplete: Incomplete,
+  ['not-started']: CircleDash,
+  pending: PendingFilled,
+  unknown: UnknownFilled,
+  informative: WarningSquareFilled
+};
+const IconIndicator = /*#__PURE__*/React__default.forwardRef(function IconIndicatorContent(_ref, ref) {
+  let {
+    className: customClassName,
+    kind,
+    label,
+    size = 16,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix();
+  const classNames = cx(`${prefix}--icon-indicator`, customClassName, {
+    [`${prefix}--icon-indicator--20`]: size == 20
+  });
+  const IconForKind = iconTypes[kind];
+  if (!IconForKind) {
+    return null;
+  }
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: classNames,
+    ref: ref
+  }, /*#__PURE__*/React__default.createElement(IconForKind, {
+    size: size,
+    className: `${prefix}--icon-indicator--${kind}`
+  }), label);
+});
+IconIndicator.propTypes = {
+  /**
+   * Specify an optional className to add.
+   */
+  className: PropTypes.string,
+  /**
+   * Specify the kind of the Icon Indicator
+   */
+  kind: PropTypes.oneOf(IconIndicatorKinds).isRequired,
+  /**
+   * Label next to the icon.
+   */
+  label: PropTypes.string.isRequired,
+  /**
+   * Specify the size of the Icon Indicator. Defaults to 16.
+   */
+  size: PropTypes.oneOf([16, 20])
+};
+
+export { IconIndicator, IconIndicatorKinds, IconIndicator as default };

package/es/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';

package/es/index.js

@@ -201,6 +201,7 @@ import './components/Text/index.js';
 export { GlobalTheme, Theme, ThemeContext, usePrefersDarkScheme, useTheme } from './components/Theme/index.js';
 export { PrefixContext, usePrefix } from './internal/usePrefix.js';
 export { useIdPrefix } from './internal/useIdPrefix.js';
+export { IconIndicator as unstable__IconIndicator } from './components/IconIndicator/index.js';
 export { default as unstable_PageSelector } from './components/Pagination/experimental/PageSelector.js';
 export { default as unstable_Pagination } from './components/Pagination/experimental/Pagination.js';
 export { default as ContainedListItem } from './components/ContainedList/ContainedListItem/ContainedListItem.js';
@@ -220,6 +221,7 @@ export { default as TableBatchActions } from './components/DataTable/TableBatchA
 export { default as TableBody } from './components/DataTable/TableBody.js';
 export { default as TableCell } from './components/DataTable/TableCell.js';
 export { default as TableContainer } from './components/DataTable/TableContainer.js';
+export { default as TableDecoratorRow } from './components/DataTable/TableDecoratorRow.js';
 export { default as TableExpandHeader } from './components/DataTable/TableExpandHeader.js';
 export { default as TableExpandRow } from './components/DataTable/TableExpandRow.js';
 export { default as TableExpandedRow } from './components/DataTable/TableExpandedRow.js';

package/es/prop-types/deprecateComponent.js

@@ -0,0 +1,22 @@
+/**
+ * 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 { warning } from '../internal/warning.js';
+
+const didWarnAboutDeprecation = {};
+function deprecateComponent(componentName, message) {
+  if (!componentName) {
+    return;
+  }
+  if (!didWarnAboutDeprecation[componentName]) {
+    didWarnAboutDeprecation[componentName] = true;
+    process.env.NODE_ENV !== "production" ? warning(false, message || `The ${componentName} component has been deprecated and will be removed in the next major release.`) : void 0;
+  }
+  return componentName;
+}
+
+export { deprecateComponent as default };