@carbon/react 1.92.1 → 1.93.0

package/lib/components/ComboBox/ComboBox.js

@@ -97,15 +97,6 @@ const findHighlightedIndex = ({
   }
   return -1;
 };
-
-/**
- * Message ids that will be passed to translateWithId().
- * Combination of message ids from ListBox/next/ListBoxSelection.js and
- * ListBox/next/ListBoxTrigger.js, but we can't access those values directly
- * because those components aren't Typescript.  (If you try, TranslationKey
- * ends up just being defined as "string".)
- */
-
 const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
   const prevInputLengthRef = React.useRef(0);
   const inputRef = React.useRef(null);
@@ -173,7 +164,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
         refs.floating.current.style.width = parentWidth + 'px';
       }
     }
-    // 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
   }, [enableFloatingStyles, floatingStyles, refs.floating, parentWidth]);
   const [inputValue, setInputValue] = React.useState(getInputValue({
     initialSelectedItem,
@@ -203,7 +194,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
       }
       prevInputLengthRef.current = inputValue.length;
     }
-    // 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
   }, [typeahead, inputValue, items, itemToString, autocompleteCustomFilter]);
   const isManualClearingRef = React.useRef(false);
   const [isClearing, setIsClearing] = React.useState(false);
@@ -244,7 +235,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
       }
       prevSelectedItemProp.current = selectedItemProp;
     }
-    // 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
   }, [selectedItemProp]);
   const filterItems = (items, itemToString, inputValue) => items.filter(item => typeahead ? autocompleteCustomFilter({
     item: itemToString(item),
@@ -259,10 +250,10 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
   React.useEffect(() => {
     if (prevInputValue.current !== inputValue) {
       prevInputValue.current = inputValue;
-      // 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
       onInputChange && onInputChange(inputValue);
     }
-    // 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
   }, [inputValue]);
   const handleSelectionClear = () => {
     if (textInput?.current) {
@@ -331,7 +322,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
             const filteredList = filterItems(items, itemToString, inputValue);
             const highlightedItem = filteredList[state.highlightedIndex];
 
-            // 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
             if (highlightedItem && !highlightedItem.disabled) {
               return {
                 ...changes,
@@ -344,7 +335,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
             if (autoIndex !== -1) {
               const matchingItem = items[autoIndex];
 
-              // 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
               if (matchingItem && !matchingItem.disabled) {
                 return {
                   ...changes,
@@ -462,7 +453,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
   const candidateIsAILabel = utils.isComponentElement(candidate, index$1.AILabel);
   const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/React.cloneElement(candidate, {
     size: 'mini'
-  }) : null;
+  }) : candidate;
   const {
     // Prop getters
     getInputProps,
@@ -498,10 +489,10 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     onHighlightedIndexChange: ({
       highlightedIndex
     }) => {
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion , valid-typeof , no-constant-binary-expression -- https://github.com/carbon-design-system/carbon/issues/20071
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion , valid-typeof , no-constant-binary-expression -- https://github.com/carbon-design-system/carbon/issues/20452
       if (highlightedIndex > -1 && typeof window !== undefined) {
         const itemArray = document.querySelectorAll(`li.${prefix}--list-box__menu-item[role="option"]`);
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20071
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452
         const highlightedItem = itemArray[highlightedIndex];
         if (highlightedItem) {
           highlightedItem.scrollIntoView({
@@ -514,9 +505,9 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     initialSelectedItem: initialSelectedItem,
     inputId: id,
     stateReducer,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20071
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20452
     isItemDisabled(item, _index) {
-      // 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
       return item?.disabled;
     },
     ...downshiftProps,
@@ -553,7 +544,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
         toggleMenu
       };
     }
-    // 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
   }, [closeMenu, openMenu, reset, selectItem, setHighlightedIndex, downshiftSetInputValue, toggleMenu]);
   const buttonProps = getToggleButtonProps({
     disabled: disabled || readOnly,
@@ -603,7 +594,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
   const menuProps = React.useMemo(() => getMenuProps({
     ref: enableFloatingStyles ? refs.setFloating : null
   }),
-  // 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
   [enableFloatingStyles, deprecatedAriaLabel, ariaLabel, getMenuProps, refs.setFloating]);
   React.useEffect(() => {
     if (textInput.current) {
@@ -937,8 +928,7 @@ ComboBox.propTypes = {
    */
   titleText: PropTypes.node,
   /**
-   * Specify a custom translation function that takes in a message identifier
-   * and returns the localized string for the message
+   * Translates component strings using your i18n tool.
    */
   translateWithId: PropTypes.func,
   /**

package/lib/components/ComboButton/index.d.ts

@@ -9,14 +9,11 @@ import { IconButton } from '../IconButton';
 import Button from '../Button';
 import { Menu } from '../Menu';
 import { MenuAlignment } from '../MenuButton';
-import { TranslateWithId } from '../../types/common';
-declare const defaultTranslations: {
-    'carbon.combo-button.additional-actions': string;
+import type { TranslateWithId } from '../../types/common';
+declare const translationIds: {
+    readonly 'carbon.combo-button.additional-actions': "carbon.combo-button.additional-actions";
 };
-/**
- * Message ids that will be passed to translateWithId().
- */
-export type TranslationKey = keyof typeof defaultTranslations;
+type TranslationKey = keyof typeof translationIds;
 interface ComboButtonProps extends TranslateWithId<TranslationKey> {
     /**
      * A collection of `MenuItems` to be rendered as additional actions for this `ComboButton`.
@@ -45,7 +42,7 @@ interface ComboButtonProps extends TranslateWithId<TranslationKey> {
     /**
      * Specify the size of the buttons and menu.
      */
-    size?: 'sm' | 'md' | 'lg';
+    size?: 'xs' | 'sm' | 'md' | 'lg';
     /**
      * Specify how the trigger tooltip should be aligned.
      */

package/lib/components/ComboButton/index.js

@@ -27,17 +27,15 @@ var deprecateValuesWithin = require('../../prop-types/deprecateValuesWithin.js')
 var mapPopoverAlign = require('../../tools/mapPopoverAlign.js');
 
 var _ChevronDown;
+const translationIds = {
+  'carbon.combo-button.additional-actions': 'carbon.combo-button.additional-actions'
+};
 const defaultTranslations = {
-  'carbon.combo-button.additional-actions': 'Additional actions'
+  [translationIds['carbon.combo-button.additional-actions']]: 'Additional actions'
 };
-
-/**
- * Message ids that will be passed to translateWithId().
- */
-
-function defaultTranslateWithId(messageId) {
+const defaultTranslateWithId = messageId => {
   return defaultTranslations[messageId];
-}
+};
 const ComboButton = /*#__PURE__*/React.forwardRef(function ComboButton({
   children,
   className,
@@ -56,7 +54,7 @@ const ComboButton = /*#__PURE__*/React.forwardRef(function ComboButton({
   const id = useId.useId('combobutton');
   const prefix = usePrefix.usePrefix();
   const containerRef = React.useRef(null);
-  // 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
   let middlewares = [];
   if (!enableOnlyFloatingStyles) {
     middlewares = [react.flip({
@@ -188,7 +186,7 @@ ComboButton.propTypes = {
   /**
    * Specify the size of the buttons and menu.
    */
-  size: PropTypes.oneOf(['sm', 'md', 'lg']),
+  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
   /**
    * Specify how the trigger tooltip should be aligned.
    */
@@ -215,8 +213,7 @@ ComboButton.propTypes = {
   // new values to match floating-ui
   'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-end', 'left-start', 'right-end', 'right-start']), ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end'], mapPopoverAlign.mapPopoverAlign),
   /**
-   * Optional method that takes in a message id and returns an
-   * internationalized string.
+   * Translates component strings using your i18n tool.
    */
   translateWithId: PropTypes.func
 };

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(() => {
@@ -309,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) {
@@ -352,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`
@@ -360,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;
@@ -92,6 +92,7 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
         isExpanded: boolean;
         onExpand: (event: MouseEvent<HTMLButtonElement>) => void;
         [key: string]: unknown;
+        id: string;
     };
     getRowProps: (options: {
         onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
@@ -105,6 +106,7 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
         key: string;
         onExpand: (event: MouseEvent<HTMLButtonElement>) => void;
         [key: string]: unknown;
+        expandHeader: string;
     };
     getExpandedRowProps: (options: {
         row: DataTableRow<ColTypes>;
@@ -233,7 +235,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 +259,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 +467,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, {
@@ -194,9 +196,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: events.composeEventHandlers(handlers)
+      onExpand: events.composeEventHandlers(handlers),
+      id: `${getTablePrefix()}-expand`
     };
   };
 
@@ -218,7 +221,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,
@@ -228,9 +231,10 @@ const DataTable = props => {
       onExpand: events.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 = ({
@@ -239,7 +243,7 @@ const DataTable = props => {
   }) => {
     return {
       ...rest,
-      id: `expanded-row-${row.id}`
+      id: `${getTablePrefix()}-expanded-row-${row.id}`
     };
   };
 
@@ -253,7 +257,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 +276,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 +558,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 +653,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(() => {