@carbon/react 1.92.1 → 1.93.0

package/es/components/DataTable/DataTable.js

@@ -40,15 +40,15 @@ import TableToolbarMenu from './TableToolbarMenu.js';
 import { deprecate } from '../../prop-types/deprecate.js';
 
 const getInstanceId = 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'
 };
 
 /**
@@ -56,26 +56,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,
@@ -85,14 +87,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 = defaultFilterRows,
     headers,
     render,
-    translateWithId: t = translateWithId,
+    translateWithId: t = defaultTranslateWithId,
     size,
     isSortable: isSortableProp,
     useZebraStyles,
@@ -128,7 +130,7 @@ const DataTable = props => {
     if (hasRowIdsChanged || hasHeadersChanged || hasRowsChanged) {
       setState(prev => getDerivedStateFromProps(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,
@@ -181,7 +183,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, {
@@ -192,9 +194,10 @@ const DataTable = props => {
       ...rest,
       'aria-label': t(translationKey),
       // Provide a string of all expanded row IDs, separated by a space.
-      'aria-controls': rowIds.map(id => `expanded-row-${id}`).join(' '),
+      'aria-controls': rowIds.map(id => `${getTablePrefix()}-expanded-row-${id}`).join(' '),
       isExpanded,
-      onExpand: composeEventHandlers(handlers)
+      onExpand: composeEventHandlers(handlers),
+      id: `${getTablePrefix()}-expand`
     };
   };
 
@@ -216,7 +219,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,
@@ -226,9 +229,10 @@ const DataTable = props => {
       onExpand: composeEventHandlers([handleOnExpandRow(row.id), onClick]),
       isExpanded: row.isExpanded,
       'aria-label': t(translationKey),
-      'aria-controls': `expanded-row-${row.id}`,
+      'aria-controls': `${getTablePrefix()}-expanded-row-${row.id}`,
       isSelected: row.isSelected,
-      disabled: row.disabled
+      disabled: row.disabled,
+      expandHeader: `${getTablePrefix()}-expand`
     };
   };
   const getExpandedRowProps = ({
@@ -237,7 +241,7 @@ const DataTable = props => {
   }) => {
     return {
       ...rest,
-      id: `expanded-row-${row.id}`
+      id: `${getTablePrefix()}-expanded-row-${row.id}`
     };
   };
 
@@ -251,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,
@@ -270,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),
@@ -552,7 +556,6 @@ const DataTable = props => {
   }
   return null;
 };
-DataTable.translationKeys = Object.values(translationKeys);
 DataTable.Table = Table;
 DataTable.TableActionList = TableActionList;
 DataTable.TableBatchAction = TableBatchAction;
@@ -648,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/es/components/DataTable/Table.js

@@ -72,11 +72,11 @@ const Table = ({
     [`${prefix}--data-table--visible-overflow-menu`]: !overflowMenuOnHover
   });
   const toggleTableBodyAlignmentClass = 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 = 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 = useCallback(() => {

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

@@ -16,27 +16,35 @@ import { Text } from '../Text/Text.js';
 import '../Text/TextDirection.js';
 import { usePrefix } from '../../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,
@@ -46,7 +54,7 @@ const TableBatchActions = ({
   totalCount,
   onCancel,
   onSelectAll,
-  translateWithId: t = translateWithId,
+  translateWithId: t = defaultTranslateWithId,
   ...rest
 }) => {
   const [isScrolling, setIsScrolling] = React.useState(false);
@@ -85,7 +93,6 @@ const TableBatchActions = ({
     onClick: onCancel
   }, t('carbon.table.batch.cancel'))));
 };
-TableBatchActions.translationKeys = TableBatchActionsTranslationKeys;
 TableBatchActions.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
@@ -116,9 +123,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/es/components/DataTable/TableExpandHeader.js

@@ -92,9 +92,9 @@ TableExpandHeader.propTypes = {
    * Hook for when a listener initiates a request to expand the given row
    */
   onExpand: PropTypes.oneOfType([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('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/es/components/DataTable/TableExpandRow.d.ts

@@ -33,6 +33,10 @@ export interface TableRowExpandInteropProps {
      * Specify if the row is selected.
      */
     isSelected?: 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
+     */
+    expandHeader?: string;
 }
 export interface TableExpandRowProps extends PropsWithChildren<Omit<HTMLAttributes<HTMLTableRowElement>, 'onClick'>>, Omit<TableRowExpandInteropProps, 'aria-label' | 'onExpand'> {
     /**

package/es/components/DataTable/TableExpandRow.js

@@ -92,7 +92,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/es/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/es/components/DataTable/TableHeader.js

@@ -17,11 +17,14 @@ import { AILabel } from '../AILabel/index.js';
 import { isComponentElement } from '../../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) {
       // When transitioning, we know that the sequence of states is as follows:
       // NONE -> ASC -> DESC -> NONE
@@ -35,7 +38,7 @@ const translateWithId = (key, args) => {
     }
     return `Click to sort rows by ${args.header} header in ascending order`;
   }
-  return '';
+  return defaultTranslations[messageId];
 };
 const sortDirections = {
   [sortStates.NONE]: 'none',
@@ -52,7 +55,7 @@ const TableHeader = /*#__PURE__*/React.forwardRef(function TableHeader({
   onClick,
   scope = defaultScope,
   sortDirection,
-  translateWithId: t = translateWithId,
+  translateWithId: t = defaultTranslateWithId,
   slug,
   id,
   ...rest
@@ -68,7 +71,7 @@ const TableHeader = /*#__PURE__*/React.forwardRef(function TableHeader({
   const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/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,
@@ -182,15 +185,10 @@ TableHeader.propTypes = {
    */
   sortDirection: PropTypes.oneOf(Object.values(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';
 
 export { TableHeader as default };

package/es/components/DataTable/TableRow.js

@@ -21,16 +21,18 @@ const TableRow = frFn((props, ref) => {
   // only useful in `TableExpandRow`
   const {
     ariaLabel,
-    // eslint-disable-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20071
+    // eslint-disable-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20452
     'aria-label': ariaLabelAlt,
-    // eslint-disable-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20071
+    // eslint-disable-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20452
     'aria-controls': ariaControls,
-    // eslint-disable-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20071
+    // eslint-disable-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20452
     onExpand,
-    // eslint-disable-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20071
+    // eslint-disable-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20452
     isExpanded,
-    // eslint-disable-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20071
+    // eslint-disable-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20452
     isSelected,
+    expandHeader,
+    // eslint-disable-line @typescript-eslint/no-unused-vars
     ...cleanProps
   } = props;
   const prefix = usePrefix();

package/es/components/DataTable/TableSlugRow.js

@@ -30,7 +30,7 @@ const TableSlugRow = ({
   // Slug is always size `mini`
   let normalizedSlug;
   if (slug) {
-    // 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
     normalizedSlug = /*#__PURE__*/React.cloneElement(slug, {
       size: 'mini'
     });

package/es/components/DataTable/TableToolbarMenu.js

@@ -15,7 +15,7 @@ import OverflowMenu from '../OverflowMenu/index.js';
 
 const defaultIconDescription = 'Settings';
 
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type -- https://github.com/carbon-design-system/carbon/issues/20071
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type -- https://github.com/carbon-design-system/carbon/issues/20452
 
 const TableToolbarMenu = ({
   className,

package/es/components/DataTable/TableToolbarSearch.d.ts

@@ -7,14 +7,15 @@
 import PropTypes from 'prop-types';
 import { ChangeEvent, FocusEvent, ReactNode } from 'react';
 import { SearchProps } from '../Search';
-import { TranslateWithId } from '../../types/common';
-/**
- * Message ids that will be passed to translateWithId().
- */
-export type TableToolbarTranslationKey = 'carbon.table.toolbar.search.label' | 'carbon.table.toolbar.search.placeholder';
+import type { TranslateWithId } from '../../types/common';
+declare const translationIds: {
+    readonly 'carbon.table.toolbar.search.label': "carbon.table.toolbar.search.label";
+    readonly 'carbon.table.toolbar.search.placeholder': "carbon.table.toolbar.search.placeholder";
+};
+type TranslationKey = keyof typeof translationIds;
 type ExcludedInheritedProps = 'defaultValue' | 'labelText' | 'onBlur' | 'onChange' | 'onExpand' | 'onFocus' | 'tabIndex';
 export type TableToolbarSearchHandleExpand = (event: FocusEvent<HTMLInputElement>, newValue?: boolean) => void;
-export interface TableToolbarSearchProps extends Omit<SearchProps, ExcludedInheritedProps>, TranslateWithId<TableToolbarTranslationKey> {
+export interface TableToolbarSearchProps extends Omit<SearchProps, ExcludedInheritedProps>, TranslateWithId<TranslationKey> {
     /**
      * Specifies if the search should initially render in an expanded state
      */
@@ -138,7 +139,7 @@ declare const TableToolbarSearch: {
          */
         tabIndex: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
         /**
-         * Provide custom text for the component for each translation id
+         * Translates component strings using your i18n tool.
          */
         translateWithId: PropTypes.Requireable<(...args: any[]) => any>;
     };

package/es/components/DataTable/TableToolbarSearch.js

@@ -15,23 +15,23 @@ import { useId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { noopFn } from '../../internal/noopFn.js';
 
-/**
- * Message ids that will be passed to translateWithId().
- */
-
-const translationKeys = {
-  'carbon.table.toolbar.search.label': 'Filter table',
-  'carbon.table.toolbar.search.placeholder': 'Filter table'
+const translationIds = {
+  'carbon.table.toolbar.search.label': 'carbon.table.toolbar.search.label',
+  'carbon.table.toolbar.search.placeholder': 'carbon.table.toolbar.search.placeholder'
+};
+const defaultTranslations = {
+  [translationIds['carbon.table.toolbar.search.label']]: 'Filter table',
+  [translationIds['carbon.table.toolbar.search.placeholder']]: 'Filter table'
 };
-const translateWithId = id => {
-  return translationKeys[id];
+const defaultTranslateWithId = messageId => {
+  return defaultTranslations[messageId];
 };
 const TableToolbarSearch = ({
   className,
   searchContainerClass,
   onChange: onChangeProp,
   onClear = noopFn,
-  translateWithId: t = translateWithId,
+  translateWithId: t = defaultTranslateWithId,
   placeholder,
   labelText,
   expanded: expandedProp,
@@ -188,7 +188,7 @@ TableToolbarSearch.propTypes = {
    */
   tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   /**
-   * Provide custom text for the component for each translation id
+   * Translates component strings using your i18n tool.
    */
   translateWithId: PropTypes.func
 };

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

@@ -17,7 +17,7 @@ import TableDecoratorRow from './TableDecoratorRow';
 import TableExpandRow from './TableExpandRow';
 import TableExpandedRow from './TableExpandedRow';
 import TableHead from './TableHead';
-import TableHeader, { TableHeaderTranslationKey, TableHeaderTranslationArgs } from './TableHeader';
+import TableHeader from './TableHeader';
 import TableRow from './TableRow';
 import TableSelectAll from './TableSelectAll';
 import TableSelectRow from './TableSelectRow';
@@ -28,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, TableDecoratorRow, 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, TableRow, TableSelectAll, TableSelectRow, TableSlugRow, TableToolbar, TableToolbarAction, TableToolbarContent, TableToolbarSearch, TableToolbarMenu, };
 export default DataTable;