@carbon/react 1.73.0-rc.0 → 1.73.0

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/index.js

@@ -220,6 +220,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 };

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;