@carbon/react 1.92.0 → 1.93.0-rc.0

package/lib/components/ComposedModal/ComposedModal.js

@@ -11,12 +11,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
+var useResizeObserver = require('../../internal/useResizeObserver.js');
 var reactIs = require('react-is');
 var PropTypes = require('prop-types');
 var index = require('../Layer/index.js');
 var ModalHeader = require('./ModalHeader.js');
 var ModalFooter = require('./ModalFooter.js');
-var useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
 var mergeRefs = require('../../tools/mergeRefs.js');
 var cx = require('classnames');
 var toggleClass = require('../../tools/toggleClass.js');
@@ -36,7 +36,6 @@ var react = require('@floating-ui/react');
 var ComposedModalPresence = require('./ComposedModalPresence.js');
 var useId = require('../../internal/useId.js');
 var useComposedModalState = require('./useComposedModalState.js');
-var debounce = require('../../node_modules/es-toolkit/dist/compat/function/debounce.js');
 
 const ModalBody = /*#__PURE__*/React.forwardRef(function ModalBody({
   className: customClassName,
@@ -47,28 +46,23 @@ const ModalBody = /*#__PURE__*/React.forwardRef(function ModalBody({
 }, ref) {
   const prefix = usePrefix.usePrefix();
   const contentRef = React.useRef(null);
-  const [isScrollable, setIsScrollable] = React.useState(false);
+  const {
+    height
+  } = useResizeObserver.useResizeObserver({
+    ref: contentRef
+  });
+
+  /**
+   * isScrollable is implicitly dependent on height, when height gets updated
+   * via `useResizeObserver`, clientHeight and scrollHeight get updated too
+   */
+  const isScrollable = !!contentRef.current && contentRef?.current?.scrollHeight > contentRef?.current?.clientHeight;
   const contentClass = cx({
     [`${prefix}--modal-content`]: true,
     [`${prefix}--modal-content--with-form`]: hasForm,
-    [`${prefix}--modal-scroll-content`]: hasScrollingContent || isScrollable
+    [`${prefix}--modal-scroll-content`]: hasScrollingContent || isScrollable,
+    [`${prefix}--modal-scroll-content--no-fade`]: height <= 300
   }, customClassName);
-  useIsomorphicEffect.default(() => {
-    if (contentRef.current) {
-      setIsScrollable(contentRef.current.scrollHeight > contentRef.current.clientHeight);
-    }
-    function handler() {
-      if (contentRef.current) {
-        setIsScrollable(contentRef.current.scrollHeight > contentRef.current.clientHeight);
-      }
-    }
-    const debouncedHandler = debounce.debounce(handler, 200);
-    window.addEventListener('resize', debouncedHandler);
-    return () => {
-      debouncedHandler.cancel();
-      window.removeEventListener('resize', debouncedHandler);
-    };
-  }, []);
   const hasScrollingContentProps = hasScrollingContent || isScrollable ? {
     tabIndex: 0,
     role: 'region'
@@ -173,7 +167,7 @@ const ComposedModalDialog = /*#__PURE__*/React.forwardRef(function ComposedModal
     if (!enableDialogElement) {
       toggleClass.toggleClass(document.body, `${prefix}--body--with-modal-open`, !!open);
     }
-    // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20071
+    // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20452
   }, [open, prefix]);
   // Remove the document.body className on unmount
   React.useEffect(() => {
@@ -247,17 +241,9 @@ const ComposedModalDialog = /*#__PURE__*/React.forwardRef(function ComposedModal
     if (!modalContent || !modalContent.classList.contains(`${prefix}--modal-scroll-content`) || !currentActiveNode || !modalContent.contains(currentActiveNode)) {
       return;
     }
-    const lastContent = modalContent.children[modalContent.children.length - 1];
-    const gradientSpacing = modalContent.scrollHeight - lastContent.offsetTop - lastContent.clientHeight;
-    for (const elem of modalContent.children) {
-      if (elem.contains(currentActiveNode)) {
-        const spaceBelow = modalContent.clientHeight - elem.offsetTop + modalContent.scrollTop - elem.clientHeight;
-        if (spaceBelow < gradientSpacing) {
-          modalContent.scrollTop = modalContent.scrollTop + (gradientSpacing - spaceBelow);
-        }
-        break;
-      }
-    }
+    currentActiveNode.scrollIntoView({
+      block: 'center'
+    });
   }
   function closeModal(evt) {
     if (!onClose || onClose(evt) !== false) {
@@ -317,7 +303,7 @@ const ComposedModalDialog = /*#__PURE__*/React.forwardRef(function ComposedModal
     return () => {
       document.removeEventListener('keydown', handleEscapeKey, true);
     };
-    // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20071
+    // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20452
   }, [open]);
   React.useEffect(() => {
     if (!enableDialogElement && !enablePresence && !open && launcherButtonRef) {
@@ -360,7 +346,7 @@ const ComposedModalDialog = /*#__PURE__*/React.forwardRef(function ComposedModal
         focusButton(innerModal.current);
       }
     }
-    // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20071
+    // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20452
   }, [open, selectorPrimaryFocus, isOpen]);
 
   // AILabel is always size `sm`
@@ -368,7 +354,7 @@ const ComposedModalDialog = /*#__PURE__*/React.forwardRef(function ComposedModal
   const candidateIsAILabel = utils.isComponentElement(candidate, index$2.AILabel);
   const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/React.cloneElement(candidate, {
     size: 'sm'
-  }) : null;
+  }) : candidate;
   const modalBody = enableDialogElement ? /*#__PURE__*/React.createElement(Dialog.Dialog, {
     open: open,
     focusAfterCloseRef: launcherButtonRef,

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

@@ -8,21 +8,21 @@ import PropTypes from 'prop-types';
 import React, { type ChangeEvent, type MouseEvent, type ReactElement, type ReactNode } from 'react';
 import { type SortRowFn } from './state/sorting';
 import type { DataTableSortState } from './state/sortStates';
-import { TranslateWithId } from '../../types/common';
-declare const translationKeys: {
-    readonly expandRow: "carbon.table.row.expand";
-    readonly collapseRow: "carbon.table.row.collapse";
-    readonly expandAll: "carbon.table.all.expand";
-    readonly collapseAll: "carbon.table.all.collapse";
-    readonly selectAll: "carbon.table.all.select";
-    readonly unselectAll: "carbon.table.all.unselect";
-    readonly selectRow: "carbon.table.row.select";
-    readonly unselectRow: "carbon.table.row.unselect";
+import type { TranslateWithId } from '../../types/common';
+declare const translationIds: {
+    readonly 'carbon.table.row.expand': "carbon.table.row.expand";
+    readonly 'carbon.table.row.collapse': "carbon.table.row.collapse";
+    readonly 'carbon.table.all.expand': "carbon.table.all.expand";
+    readonly 'carbon.table.all.collapse': "carbon.table.all.collapse";
+    readonly 'carbon.table.all.select': "carbon.table.all.select";
+    readonly 'carbon.table.all.unselect': "carbon.table.all.unselect";
+    readonly 'carbon.table.row.select': "carbon.table.row.select";
+    readonly 'carbon.table.row.unselect': "carbon.table.row.unselect";
 };
 /**
  * Message IDs that will be passed to translateWithId().
  */
-type TranslationKey = (typeof translationKeys)[keyof typeof translationKeys];
+type TranslationKey = keyof typeof translationIds;
 export type DataTableSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export interface DataTableCell<T> {
     id: string;
@@ -233,7 +233,6 @@ export interface DataTableProps<RowType, ColTypes extends any[]> extends Transla
  */
 export declare const DataTable: {
     <RowType, ColTypes extends any[]>(props: DataTableProps<RowType, ColTypes>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
-    translationKeys: ("carbon.table.row.expand" | "carbon.table.row.collapse" | "carbon.table.all.expand" | "carbon.table.all.collapse" | "carbon.table.all.select" | "carbon.table.all.unselect" | "carbon.table.row.select" | "carbon.table.row.unselect")[];
     Table: {
         ({ className, children, useZebraStyles, size, isSortable, useStaticWidth, stickyHeader, overflowMenuOnHover, experimentalAutoAlign, tabIndex, ...other }: React.PropsWithChildren<import("./Table").TableProps>): import("react/jsx-runtime").JSX.Element;
         propTypes: {
@@ -258,7 +257,19 @@ export declare const DataTable: {
             renderIcon: PropTypes.Requireable<object>;
         };
     };
-    TableBatchActions: import("./TableBatchActions").TableBatchActionsComponent;
+    TableBatchActions: {
+        ({ className, children, shouldShowBatchActions, totalSelected, totalCount, onCancel, onSelectAll, translateWithId: t, ...rest }: import("./TableBatchActions").TableBatchActionsProps): import("react/jsx-runtime").JSX.Element;
+        propTypes: {
+            children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+            className: PropTypes.Requireable<string>;
+            onCancel: PropTypes.Validator<(...args: any[]) => any>;
+            onSelectAll: PropTypes.Requireable<(...args: any[]) => any>;
+            shouldShowBatchActions: PropTypes.Requireable<boolean>;
+            totalCount: PropTypes.Requireable<number>;
+            totalSelected: PropTypes.Validator<number>;
+            translateWithId: PropTypes.Requireable<(...args: any[]) => any>;
+        };
+    };
     TableBody: {
         ({ children, className, ...rest }: import("./TableBody").TableBodyProps): import("react/jsx-runtime").JSX.Element;
         propTypes: {
@@ -454,9 +465,7 @@ export declare const DataTable: {
          */
         stickyHeader: PropTypes.Requireable<boolean>;
         /**
-         * Optional method that takes in a message ID and returns an
-         * internationalized string. See `DataTable.translationKeys` for all
-         * available message IDs.
+         * Translates component strings using your i18n tool.
          */
         translateWithId: PropTypes.Requireable<(...args: any[]) => any>;
         /**

package/lib/components/DataTable/DataTable.js

@@ -42,15 +42,15 @@ var TableToolbarMenu = require('./TableToolbarMenu.js');
 var deprecate = require('../../prop-types/deprecate.js');
 
 const getInstanceId = setupGetInstanceId.setupGetInstanceId();
-const translationKeys = {
-  expandRow: 'carbon.table.row.expand',
-  collapseRow: 'carbon.table.row.collapse',
-  expandAll: 'carbon.table.all.expand',
-  collapseAll: 'carbon.table.all.collapse',
-  selectAll: 'carbon.table.all.select',
-  unselectAll: 'carbon.table.all.unselect',
-  selectRow: 'carbon.table.row.select',
-  unselectRow: 'carbon.table.row.unselect'
+const translationIds = {
+  'carbon.table.row.expand': 'carbon.table.row.expand',
+  'carbon.table.row.collapse': 'carbon.table.row.collapse',
+  'carbon.table.all.expand': 'carbon.table.all.expand',
+  'carbon.table.all.collapse': 'carbon.table.all.collapse',
+  'carbon.table.all.select': 'carbon.table.all.select',
+  'carbon.table.all.unselect': 'carbon.table.all.unselect',
+  'carbon.table.row.select': 'carbon.table.row.select',
+  'carbon.table.row.unselect': 'carbon.table.row.unselect'
 };
 
 /**
@@ -58,26 +58,28 @@ const translationKeys = {
  */
 
 const defaultTranslations = {
-  [translationKeys.expandAll]: 'Expand all rows',
-  [translationKeys.collapseAll]: 'Collapse all rows',
-  [translationKeys.expandRow]: 'Expand current row',
-  [translationKeys.collapseRow]: 'Collapse current row',
-  [translationKeys.selectAll]: 'Select all rows',
-  [translationKeys.unselectAll]: 'Unselect all rows',
-  [translationKeys.selectRow]: 'Select row',
-  [translationKeys.unselectRow]: 'Unselect row'
+  [translationIds['carbon.table.all.expand']]: 'Expand all rows',
+  [translationIds['carbon.table.all.collapse']]: 'Collapse all rows',
+  [translationIds['carbon.table.row.expand']]: 'Expand current row',
+  [translationIds['carbon.table.row.collapse']]: 'Collapse current row',
+  [translationIds['carbon.table.all.select']]: 'Select all rows',
+  [translationIds['carbon.table.all.unselect']]: 'Unselect all rows',
+  [translationIds['carbon.table.row.select']]: 'Select row',
+  [translationIds['carbon.table.row.unselect']]: 'Unselect row'
+};
+const defaultTranslateWithId = messageId => {
+  return defaultTranslations[messageId];
 };
-const translateWithId = id => defaultTranslations[id];
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
 
 /**
  * DataTable components are used to represent a collection of resources,
@@ -87,14 +89,14 @@ const translateWithId = id => defaultTranslations[id];
  * the DataTable is accessible through look-up by ID, and updating the state of
  * a single entity cascades updates to the consumer.
  */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
 const DataTable = props => {
   const {
     children,
     filterRows = filter.defaultFilterRows,
     headers,
     render,
-    translateWithId: t = translateWithId,
+    translateWithId: t = defaultTranslateWithId,
     size,
     isSortable: isSortableProp,
     useZebraStyles,
@@ -130,7 +132,7 @@ const DataTable = props => {
     if (hasRowIdsChanged || hasHeadersChanged || hasRowsChanged) {
       setState(prev => getDerivedStateFromProps.default(props, prev));
     }
-    // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20071
+    // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20452
   }, [headers, rows]);
   const getHeaderProps = ({
     header,
@@ -183,7 +185,7 @@ const DataTable = props => {
       rowsById
     } = state;
     const isExpanded = isExpandedAll || rowIds.every(id => rowsById[id].isExpanded);
-    const translationKey = isExpanded ? translationKeys.collapseAll : translationKeys.expandAll;
+    const translationKey = isExpanded ? translationIds['carbon.table.all.collapse'] : translationIds['carbon.table.all.expand'];
     const handlers = [handleOnExpandAll, onExpand];
     if (onClick) {
       handlers.push(handleOnExpandHeaderClick(onClick, {
@@ -218,7 +220,7 @@ const DataTable = props => {
     onClick,
     ...rest
   }) => {
-    const translationKey = row.isExpanded ? translationKeys.collapseRow : translationKeys.expandRow;
+    const translationKey = row.isExpanded ? translationIds['carbon.table.row.collapse'] : translationIds['carbon.table.row.expand'];
     return {
       ...rest,
       key: row.id,
@@ -253,7 +255,7 @@ const DataTable = props => {
   } = {}) => {
     // If we're given a row, return the selection state values for that row
     if (row) {
-      const translationKey = row.isSelected ? translationKeys.unselectRow : translationKeys.selectRow;
+      const translationKey = row.isSelected ? translationIds['carbon.table.row.unselect'] : translationIds['carbon.table.row.select'];
       return {
         ...rest,
         checked: row.isSelected,
@@ -272,7 +274,7 @@ const DataTable = props => {
     const selectedRowCount = selectedRows.length;
     const checked = rowCount > 0 && selectedRowCount === rowCount;
     const indeterminate = rowCount > 0 && selectedRowCount > 0 && selectedRowCount !== rowCount;
-    const translationKey = checked || indeterminate ? translationKeys.unselectAll : translationKeys.selectAll;
+    const translationKey = checked || indeterminate ? translationIds['carbon.table.all.unselect'] : translationIds['carbon.table.all.select'];
     return {
       ...rest,
       'aria-label': t(translationKey),
@@ -554,7 +556,6 @@ const DataTable = props => {
   }
   return null;
 };
-DataTable.translationKeys = Object.values(translationKeys);
 DataTable.Table = Table.Table;
 DataTable.TableActionList = TableActionList.default;
 DataTable.TableBatchAction = TableBatchAction.default;
@@ -650,9 +651,7 @@ DataTable.propTypes = {
    */
   stickyHeader: PropTypes.bool,
   /**
-   * Optional method that takes in a message ID and returns an
-   * internationalized string. See `DataTable.translationKeys` for all
-   * available message IDs.
+   * Translates component strings using your i18n tool.
    */
   translateWithId: PropTypes.func,
   /**

package/lib/components/DataTable/Table.js

@@ -76,11 +76,11 @@ const Table = ({
     [`${prefix}--data-table--visible-overflow-menu`]: !overflowMenuOnHover
   });
   const toggleTableBodyAlignmentClass = React.useCallback((alignTop = false) => {
-    // eslint-disable-next-line  @typescript-eslint/no-unused-expressions -- https://github.com/carbon-design-system/carbon/issues/20071
+    // eslint-disable-next-line  @typescript-eslint/no-unused-expressions -- https://github.com/carbon-design-system/carbon/issues/20452
     alignTop ? tableRef.current?.classList.add(`${prefix}--data-table--top-aligned-body`) : tableRef.current?.classList.remove(`${prefix}--data-table--top-aligned-body`);
   }, [prefix]);
   const toggleTableHeaderAlignmentClass = React.useCallback((alignTop = false) => {
-    // eslint-disable-next-line  @typescript-eslint/no-unused-expressions -- https://github.com/carbon-design-system/carbon/issues/20071
+    // eslint-disable-next-line  @typescript-eslint/no-unused-expressions -- https://github.com/carbon-design-system/carbon/issues/20452
     alignTop ? tableRef.current?.classList.add(`${prefix}--data-table--top-aligned-header`) : tableRef.current?.classList.remove(`${prefix}--data-table--top-aligned-header`);
   }, [prefix]);
   const setTableAlignment = React.useCallback(() => {

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

@@ -1,18 +1,24 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * 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, { type MouseEventHandler } from 'react';
 import type { TranslateWithId } from '../../types/common';
-declare const TableBatchActionsTranslationKeys: readonly ["carbon.table.batch.cancel", "carbon.table.batch.items.selected", "carbon.table.batch.item.selected", "carbon.table.batch.selectAll"];
-export type TableBatchActionsTranslationKey = (typeof TableBatchActionsTranslationKeys)[number];
-export interface TableBatchActionsTranslationArgs {
+declare const translationIds: {
+    readonly 'carbon.table.batch.cancel': "carbon.table.batch.cancel";
+    readonly 'carbon.table.batch.items.selected': "carbon.table.batch.items.selected";
+    readonly 'carbon.table.batch.item.selected': "carbon.table.batch.item.selected";
+    readonly 'carbon.table.batch.selectAll': "carbon.table.batch.selectAll";
+};
+type TranslationKey = keyof typeof translationIds;
+export type TableBatchActionsTranslationArgs = {
     totalSelected?: number;
     totalCount?: number;
-}
-export interface TableBatchActionsProps extends React.HTMLAttributes<HTMLDivElement>, TranslateWithId<TableBatchActionsTranslationKey, TableBatchActionsTranslationArgs> {
+};
+export interface TableBatchActionsProps extends React.HTMLAttributes<HTMLDivElement>, TranslateWithId<TranslationKey, TableBatchActionsTranslationArgs> {
     /**
      * Provide elements to be rendered inside of the component.
      */
@@ -44,8 +50,41 @@ export interface TableBatchActionsProps extends React.HTMLAttributes<HTMLDivElem
      */
     totalCount?: number;
 }
-export interface TableBatchActionsComponent extends React.FC<TableBatchActionsProps> {
-    translationKeys: ReadonlyArray<TableBatchActionsTranslationKey>;
-}
-declare const TableBatchActions: TableBatchActionsComponent;
+declare const TableBatchActions: {
+    ({ className, children, shouldShowBatchActions, totalSelected, totalCount, onCancel, onSelectAll, translateWithId: t, ...rest }: TableBatchActionsProps): import("react/jsx-runtime").JSX.Element;
+    propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        className: PropTypes.Requireable<string>;
+        /**
+         * Hook required to listen for when the user initiates a cancel request
+         * through this component
+         */
+        onCancel: PropTypes.Validator<(...args: any[]) => any>;
+        /**
+         * Hook to listen for when the user initiates a select all
+         * request through this component. This _only_ controls the rendering
+         * of the `Select All` button and does not include built in functionality
+         */
+        onSelectAll: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Boolean specifier for whether or not the batch action bar should be
+         * displayed
+         */
+        shouldShowBatchActions: PropTypes.Requireable<boolean>;
+        /**
+         * Numeric representation of the total number of items in a table.
+         * This number is used in the select all button text
+         */
+        totalCount: PropTypes.Requireable<number>;
+        /**
+         * Numeric representation of the total number of items selected in a table.
+         * This number is used to derive the selection message
+         */
+        totalSelected: PropTypes.Validator<number>;
+        /**
+         * Translates component strings using your i18n tool.
+         */
+        translateWithId: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+};
 export default TableBatchActions;

package/lib/components/DataTable/TableBatchActions.js

@@ -20,27 +20,35 @@ var Text = require('../Text/Text.js');
 require('../Text/TextDirection.js');
 var usePrefix = require('../../internal/usePrefix.js');
 
-const TableBatchActionsTranslationKeys = ['carbon.table.batch.cancel', 'carbon.table.batch.items.selected', 'carbon.table.batch.item.selected', 'carbon.table.batch.selectAll'];
-const translationKeys = {
-  'carbon.table.batch.cancel': 'Cancel',
-  'carbon.table.batch.items.selected': 'items selected',
-  'carbon.table.batch.item.selected': 'item selected',
-  'carbon.table.batch.selectAll': 'Select all'
+const translationIds = {
+  'carbon.table.batch.cancel': 'carbon.table.batch.cancel',
+  'carbon.table.batch.items.selected': 'carbon.table.batch.items.selected',
+  'carbon.table.batch.item.selected': 'carbon.table.batch.item.selected',
+  'carbon.table.batch.selectAll': 'carbon.table.batch.selectAll'
 };
-const translateWithId = (id, {
-  totalSelected,
-  totalCount
-} = {
+const defaultTranslations = {
+  [translationIds['carbon.table.batch.cancel']]: 'Cancel',
+  [translationIds['carbon.table.batch.items.selected']]: 'items selected',
+  [translationIds['carbon.table.batch.item.selected']]: 'item selected',
+  [translationIds['carbon.table.batch.selectAll']]: 'Select all'
+};
+const defaultTranslateWithId = (messageId, args = {
   totalSelected: 0,
   totalCount: 0
 }) => {
-  if (id === 'carbon.table.batch.cancel') {
-    return translationKeys[id];
-  }
-  if (id === 'carbon.table.batch.selectAll') {
-    return `${translationKeys[id]} (${totalCount})`;
+  const {
+    totalSelected,
+    totalCount
+  } = args;
+  switch (messageId) {
+    case translationIds['carbon.table.batch.cancel']:
+      return defaultTranslations[messageId];
+    case translationIds['carbon.table.batch.selectAll']:
+      return `${defaultTranslations[messageId]} (${totalCount})`;
+    case translationIds['carbon.table.batch.items.selected']:
+    case translationIds['carbon.table.batch.item.selected']:
+      return `${totalSelected} ${defaultTranslations[messageId]}`;
   }
-  return `${totalSelected} ${translationKeys[id]}`;
 };
 const TableBatchActions = ({
   className,
@@ -50,7 +58,7 @@ const TableBatchActions = ({
   totalCount,
   onCancel,
   onSelectAll,
-  translateWithId: t = translateWithId,
+  translateWithId: t = defaultTranslateWithId,
   ...rest
 }) => {
   const [isScrolling, setIsScrolling] = React.useState(false);
@@ -89,7 +97,6 @@ const TableBatchActions = ({
     onClick: onCancel
   }, t('carbon.table.batch.cancel'))));
 };
-TableBatchActions.translationKeys = TableBatchActionsTranslationKeys;
 TableBatchActions.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
@@ -120,9 +127,7 @@ TableBatchActions.propTypes = {
    */
   totalSelected: PropTypes.number.isRequired,
   /**
-   * Supply a method to translate internal strings with your i18n tool of
-   * choice. Translation keys are available on the `translationKeys` field for
-   * this component.
+   * Translates component strings using your i18n tool.
    */
   translateWithId: PropTypes.func
 };

package/lib/components/DataTable/TableExpandHeader.js

@@ -96,9 +96,9 @@ TableExpandHeader.propTypes = {
    * Hook for when a listener initiates a request to expand the given row
    */
   onExpand: PropTypes.oneOfType([requiredIfGivenPropIsTruthy.requiredIfGivenPropIsTruthy('enableExpando', PropTypes.func
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
   ), requiredIfGivenPropIsTruthy.requiredIfGivenPropIsTruthy('enableToggle', PropTypes.func
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
   )])
 };
 

package/lib/components/DataTable/TableExpandRow.js

@@ -96,7 +96,7 @@ TableExpandRow.propTypes = {
    * Specify the string read by a voice reader when the expand trigger is
    * focused
    */
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20071
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452
   /**@ts-ignore*/
   'aria-label': PropTypes.string,
   /**

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

@@ -5,21 +5,19 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { type HTMLAttributes, type MouseEventHandler, type ReactNode } from 'react';
-import { TranslateWithId } from '../../types/common';
+import type { TranslateWithId } from '../../types/common';
 import { sortStates, type DataTableSortState } from './state/sortStates';
-export type TableHeaderTranslationKey = 'carbon.table.header.icon.description';
-export interface TableHeaderTranslationArgs {
+declare const translationIds: {
+    readonly 'carbon.table.header.icon.description': "carbon.table.header.icon.description";
+};
+type TranslationKey = keyof typeof translationIds;
+interface TableHeaderTranslationArgs {
     header: ReactNode;
     isSortHeader?: boolean;
     sortDirection?: DataTableSortState;
     sortStates: typeof sortStates;
 }
-export interface TableHeaderProps extends HTMLAttributes<HTMLTableCellElement & HTMLButtonElement>, TranslateWithId<TableHeaderTranslationKey, {
-    header: any;
-    sortDirection: any;
-    isSortHeader: any;
-    sortStates: any;
-}> {
+export interface TableHeaderProps extends HTMLAttributes<HTMLTableCellElement & HTMLButtonElement>, TranslateWithId<TranslationKey, TableHeaderTranslationArgs> {
     /**
      * Pass in children that will be embedded in the table header label
      */
@@ -69,7 +67,7 @@ export interface TableHeaderProps extends HTMLAttributes<HTMLTableCellElement &
      * Specify which direction we are currently sorting by, should be one of DESC,
      * NONE, or ASC.
      */
-    sortDirection?: string;
+    sortDirection?: DataTableSortState;
 }
 declare const TableHeader: React.ForwardRefExoticComponent<TableHeaderProps & React.RefAttributes<HTMLTableCellElement>>;
 export default TableHeader;

package/lib/components/DataTable/TableHeader.js

@@ -21,11 +21,14 @@ var index = require('../AILabel/index.js');
 var utils = require('../../internal/utils.js');
 
 const defaultScope = 'col';
-const translationKeys = {
-  buttonDescription: 'carbon.table.header.icon.description'
+const translationIds = {
+  'carbon.table.header.icon.description': 'carbon.table.header.icon.description'
 };
-const translateWithId = (key, args) => {
-  if (args && key === translationKeys.buttonDescription) {
+const defaultTranslations = {
+  [translationIds['carbon.table.header.icon.description']]: 'Click to sort rows by header in ascending order'
+};
+const defaultTranslateWithId = (messageId, args) => {
+  if (args && messageId === translationIds['carbon.table.header.icon.description']) {
     if (args.isSortHeader && sortStates.sortStates) {
       // When transitioning, we know that the sequence of states is as follows:
       // NONE -> ASC -> DESC -> NONE
@@ -39,7 +42,7 @@ const translateWithId = (key, args) => {
     }
     return `Click to sort rows by ${args.header} header in ascending order`;
   }
-  return '';
+  return defaultTranslations[messageId];
 };
 const sortDirections = {
   [sortStates.sortStates.NONE]: 'none',
@@ -56,7 +59,7 @@ const TableHeader = /*#__PURE__*/React.forwardRef(function TableHeader({
   onClick,
   scope = defaultScope,
   sortDirection,
-  translateWithId: t = translateWithId,
+  translateWithId: t = defaultTranslateWithId,
   slug,
   id,
   ...rest
@@ -72,7 +75,7 @@ const TableHeader = /*#__PURE__*/React.forwardRef(function TableHeader({
   const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/React.cloneElement(candidate, {
     size: 'mini',
     ref: AILableRef
-  }) : null;
+  }) : candidate;
   const headerLabelClassNames = cx({
     [`${prefix}--table-header-label`]: true,
     [`${prefix}--table-header-label--slug ${prefix}--table-header-label--ai-label`]: colHasAILabel,
@@ -186,15 +189,10 @@ TableHeader.propTypes = {
    */
   sortDirection: PropTypes.oneOf(Object.values(sortStates.sortStates)),
   /**
-   * Supply a method to translate internal strings with your i18n tool of
-   * choice. Translation keys are available on the `translationKeys` field for
-   * this component.
+   * Translates component strings using your i18n tool.
    */
   translateWithId: PropTypes.func
 };
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
-TableHeader.translationKeys = Object.values(translationKeys);
 TableHeader.displayName = 'TableHeader';
 
 exports.default = TableHeader;