@carbon/react 1.73.0-rc.0 → 1.73.0

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

@@ -224,6 +224,7 @@ var TableBatchActions = require('./components/DataTable/TableBatchActions.js');
 var TableBody = require('./components/DataTable/TableBody.js');
 var TableCell = require('./components/DataTable/TableCell.js');
 var TableContainer = require('./components/DataTable/TableContainer.js');
+var TableDecoratorRow = require('./components/DataTable/TableDecoratorRow.js');
 var TableExpandHeader = require('./components/DataTable/TableExpandHeader.js');
 var TableExpandRow = require('./components/DataTable/TableExpandRow.js');
 var TableExpandedRow = require('./components/DataTable/TableExpandedRow.js');
@@ -507,6 +508,7 @@ exports.TableBatchActions = TableBatchActions["default"];
 exports.TableBody = TableBody["default"];
 exports.TableCell = TableCell["default"];
 exports.TableContainer = TableContainer["default"];
+exports.TableDecoratorRow = TableDecoratorRow["default"];
 exports.TableExpandHeader = TableExpandHeader["default"];
 exports.TableExpandRow = TableExpandRow["default"];
 exports.TableExpandedRow = TableExpandedRow["default"];

package/lib/prop-types/deprecateComponent.js

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.73.0-rc.0",
+  "version": "1.73.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -52,7 +52,7 @@
     "@carbon/feature-flags": "^0.24.0",
     "@carbon/icons-react": "^11.53.0",
     "@carbon/layout": "^11.28.0",
-    "@carbon/styles": "^1.72.0-rc.0",
+    "@carbon/styles": "^1.72.0",
     "@floating-ui/react": "^0.26.0",
     "@ibm/telemetry-js": "^1.5.0",
     "classnames": "2.5.1",
@@ -78,7 +78,7 @@
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
     "@carbon/test-utils": "^10.34.0",
-    "@carbon/themes": "^11.44.0-rc.0",
+    "@carbon/themes": "^11.44.0",
     "@figma/code-connect": "^1.2.4",
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^28.0.0",
@@ -143,5 +143,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "7b6d921583ff275baace5baa66da9d9b31740fa8"
+  "gitHead": "97fc2e65d5d78f3bc191f036cb669b072db1d85f"
 }