@carbon/react 1.92.1 → 1.93.0-rc.0

package/lib/components/DataTable/TableSlugRow.js

@@ -34,7 +34,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/lib/components/DataTable/TableToolbarMenu.js

@@ -19,7 +19,7 @@ var index = require('../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/lib/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/lib/components/DataTable/TableToolbarSearch.js

@@ -19,23 +19,23 @@ var useId = require('../../internal/useId.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var noopFn = require('../../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.noopFn,
-  translateWithId: t = translateWithId,
+  translateWithId: t = defaultTranslateWithId,
   placeholder,
   labelText,
   expanded: expandedProp,
@@ -192,7 +192,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/lib/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;

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

@@ -13,8 +13,8 @@ export interface SortRowParams {
     locale: string;
     compare: (a: string | number, b: string | number, locale?: string) => number;
 }
-export type SortRowFn = (cellA: any, // eslint-disable-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
-cellB: any, // eslint-disable-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
+export type SortRowFn = (cellA: any, // eslint-disable-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
+cellB: any, // eslint-disable-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
 options: SortRowParams) => number;
 interface Props {
     locale?: string;

package/lib/components/DataTable/state/sorting.js

@@ -10,7 +10,7 @@
 var sortStates = require('./sortStates.js');
 var sorting = require('../tools/sorting.js');
 
-// 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 initialSortState = sortStates.sortStates.NONE;
 

package/lib/components/DataTable/tools/sorting.js

@@ -15,7 +15,7 @@ var sortStates = require('../state/sortStates.js');
  * type, the default sort algorithm will be used for those types. Otherwise, the
  * values will be converted to strings for comparison.
  */
-// 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 compare = (a, b, locale = 'en') => {
   // prevent multiple null values in one column (sorting breaks)
   if (a === null) a = '';

package/lib/components/DatePicker/DatePicker.js

@@ -173,7 +173,7 @@ const DatePicker = /*#__PURE__*/React.forwardRef(function DatePicker({
     isFluid
   } = React.useContext(FormContext.FormContext);
   const [hasInput, setHasInput] = React.useState(false);
-  // 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 startInputField = React.useCallback(node => {
     if (node !== null) {
       startInputField.current = node;
@@ -194,9 +194,9 @@ const DatePicker = /*#__PURE__*/React.forwardRef(function DatePicker({
       onClose(selectedDates, dateStr, instance);
     }
   },
-  // 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
   [onClose]);
-  // 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
   const onCalendarClose = (selectedDates, dateStr, instance, e) => {
     if (e && e.type === 'clickOutside') {
       return;
@@ -235,9 +235,9 @@ const DatePicker = /*#__PURE__*/React.forwardRef(function DatePicker({
     [String(className)]: className
   });
 
-  // 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 childrenWithProps = React.Children.toArray(children).map(
-  // 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
   (child, index) => {
     if (index === 0 && child.type === /*#__PURE__*/React.createElement(DatePickerInput.default, child.props).type) {
       return /*#__PURE__*/React.cloneElement(child, {
@@ -352,7 +352,7 @@ const DatePicker = /*#__PURE__*/React.forwardRef(function DatePicker({
     const {
       current: end
     } = endInputField;
-    // 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 flatpickerConfig = {
       inline: inline ?? false,
       onClose: onCalendarClose,
@@ -528,7 +528,7 @@ const DatePicker = /*#__PURE__*/React.forwardRef(function DatePicker({
   // this hook allows consumers to access the flatpickr calendar
   // instance for cases where functions like open() or close()
   // need to be imperatively called on the calendar
-  // 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
   React.useImperativeHandle(ref, () => ({
     get calendar() {
       return calendarRef.current;
@@ -585,7 +585,7 @@ const DatePicker = /*#__PURE__*/React.forwardRef(function DatePicker({
         endInputField.current.value = '';
       }
     }
-    // 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
   }, [value]);
   React.useEffect(() => {
     const handleMouseDown = event => {
@@ -594,7 +594,7 @@ const DatePicker = /*#__PURE__*/React.forwardRef(function DatePicker({
         closeCalendar();
       }
     };
-    // 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
     const closeCalendar = event => {
       calendarRef.current?.close();
       // Remove focus from endDate calendar input

package/lib/components/DatePickerInput/DatePickerInput.js

@@ -24,7 +24,7 @@ var deprecate = require('../../prop-types/deprecate.js');
 var index = require('../AILabel/index.js');
 var utils = require('../../internal/utils.js');
 
-// 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 didWarnAboutDatePickerInputValue = false;
 const DatePickerInput = /*#__PURE__*/React.forwardRef(function DatePickerInput(props, ref) {
@@ -100,7 +100,7 @@ const DatePickerInput = /*#__PURE__*/React.forwardRef(function DatePickerInput(p
   });
   const datePickerInputHelperId = !helperText ? undefined : `datepicker-input-helper-text-${datePickerInputInstanceId}`;
 
-  // 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 inputProps = {
     ...rest,
     ...datePickerInputProps,
@@ -119,7 +119,7 @@ const DatePickerInput = /*#__PURE__*/React.forwardRef(function DatePickerInput(p
   const candidateIsAILabel = utils.isComponentElement(candidate, index.AILabel);
   const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/React.cloneElement(candidate, {
     size: 'mini'
-  }) : null;
+  }) : candidate;
   return /*#__PURE__*/React.createElement("div", {
     className: containerClasses
   }, labelText && /*#__PURE__*/React.createElement(Text.Text, {
@@ -206,14 +206,14 @@ DatePickerInput.propTypes = {
   /**
    * Provide a regular expression that the input value must match
    */
-  // 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
   pattern: (props, propName, componentName) => {
     if (props[propName] === undefined) {
       return;
     }
     try {
       new RegExp(props[propName]);
-      // 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
     } catch (e) {
       return new Error(`Invalid value of prop '${propName}' supplied to '${componentName}', it should be a valid regular expression`);
     }

package/lib/components/Dialog/Dialog.js

@@ -95,7 +95,7 @@ const Dialog = /*#__PURE__*/React.forwardRef(({
         ref.current.close();
       }
     }
-    // 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
   }, [modal, open]);
   React.useEffect(() => {
     if (!open && focusAfterCloseRef) {
@@ -126,7 +126,7 @@ const Dialog = /*#__PURE__*/React.forwardRef(({
         ref.current.setAttribute('aria-labelledby', title.id);
       }
     }
-    // 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, ariaLabel, ariaLabelledBy, prefix]);
   return /*#__PURE__*/React.createElement(DialogContext.Provider, {
     value: contextValue
@@ -231,7 +231,7 @@ const DialogControls = /*#__PURE__*/React.forwardRef(({
   const prefix = usePrefix.usePrefix();
   return (
     /*#__PURE__*/
-    // 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
     React.createElement("div", _rollupPluginBabelHelpers.extends({
       className: `${prefix}--dialog__header-controls`,
@@ -260,7 +260,7 @@ const DialogCloseButton = /*#__PURE__*/React.forwardRef(({
   const prefix = usePrefix.usePrefix();
   return (
     /*#__PURE__*/
-    // 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
     React.createElement(index.IconButton, _rollupPluginBabelHelpers.extends({
       kind: "ghost",
@@ -497,7 +497,7 @@ const DialogFooter = /*#__PURE__*/React.forwardRef(({
     onClick: onButtonClick
   }, i) => /*#__PURE__*/React.createElement(Button.default, {
     key: `${buttonText}-${i}`
-    // eslint-disable-next-line jsx-a11y/no-autofocus -- https://github.com/carbon-design-system/carbon/issues/20071
+    // eslint-disable-next-line jsx-a11y/no-autofocus -- https://github.com/carbon-design-system/carbon/issues/20452
     ,
     autoFocus: danger,
     kind: "secondary",
@@ -507,7 +507,7 @@ const DialogFooter = /*#__PURE__*/React.forwardRef(({
     ref: danger ? setSecondaryButtonRef : undefined,
     disabled: loadingActive,
     kind: "secondary"
-    // eslint-disable-next-line jsx-a11y/no-autofocus -- https://github.com/carbon-design-system/carbon/issues/20071
+    // eslint-disable-next-line jsx-a11y/no-autofocus -- https://github.com/carbon-design-system/carbon/issues/20452
     ,
     autoFocus: danger,
     onClick: onSecondaryButtonClick

package/lib/components/Dropdown/Dropdown.d.ts

@@ -7,7 +7,7 @@
 import React, { type HTMLAttributes, type ReactNode, type Ref } from 'react';
 import { UseSelectProps } from 'downshift';
 import { type ListBoxMenuIconTranslationKey, type ListBoxSize, type ListBoxType } from '../ListBox';
-import { TranslateWithId } from '../../types/common';
+import type { TranslateWithId } from '../../types/common';
 type ExcludedAttributes = 'id' | 'onChange';
 export interface OnChangeData<ItemType> {
     selectedItem: ItemType | null;

package/lib/components/Dropdown/Dropdown.js

@@ -142,7 +142,7 @@ const Dropdown = /*#__PURE__*/React.forwardRef(({
         }
       });
     }
-    // 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
   }, [floatingStyles, autoAlign, refs.floating]);
   const prefix = usePrefix.usePrefix();
   const {
@@ -158,7 +158,7 @@ const Dropdown = /*#__PURE__*/React.forwardRef(({
     }
   }, [onChange]);
 
-  // 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
   const isItemDisabled = React.useCallback((item, _index) => {
     const isObject = item !== null && typeof item === 'object';
     return isObject && 'disabled' in item && item.disabled === true;
@@ -168,7 +168,7 @@ const Dropdown = /*#__PURE__*/React.forwardRef(({
       highlightedIndex
     } = changes;
     if (highlightedIndex !== undefined && highlightedIndex > -1 &&
-    // eslint-disable-next-line valid-typeof , no-constant-binary-expression -- https://github.com/carbon-design-system/carbon/issues/20071
+    // eslint-disable-next-line valid-typeof , no-constant-binary-expression -- https://github.com/carbon-design-system/carbon/issues/20452
     typeof window !== undefined) {
       const itemArray = document.querySelectorAll(`li.${prefix}--list-box__menu-item[role="option"]`);
       const highlightedItem = itemArray[highlightedIndex];
@@ -191,7 +191,7 @@ const Dropdown = /*#__PURE__*/React.forwardRef(({
     onHighlightedIndexChange,
     ...downshiftProps
   }),
-  // 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
   [items, itemToString, initialSelectedItem, onSelectedItemChange, stateReducer, isItemDisabled, onHighlightedIndexChange, downshiftProps]);
   const dropdownInstanceId = useId.useId();
 
@@ -283,7 +283,7 @@ const Dropdown = /*#__PURE__*/React.forwardRef(({
       toggleButtonProps.onKeyDown(evt);
     }
   },
-  // 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
   [isTyping, currTimer, toggleButtonProps]);
   const readOnlyEventHandlers = React.useMemo(() => {
     if (readOnly) {
@@ -317,7 +317,7 @@ const Dropdown = /*#__PURE__*/React.forwardRef(({
   const candidateIsAILabel = utils.isComponentElement(candidate, index$1.AILabel);
   const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/React.cloneElement(candidate, {
     size: 'mini'
-  }) : null;
+  }) : candidate;
   const allLabelProps = getLabelProps();
   const labelProps = /*#__PURE__*/React.isValidElement(titleText) ? {
     id: allLabelProps.id
@@ -358,7 +358,7 @@ const Dropdown = /*#__PURE__*/React.forwardRef(({
   }), /*#__PURE__*/React.createElement("span", {
     className: `${prefix}--list-box__label`
   }, selectedItem ? renderSelectedItem ? renderSelectedItem(selectedItem) : itemToString(selectedItem) :
-  // 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
   label), /*#__PURE__*/React.createElement(index$2.default.MenuIcon, {
     isOpen: isOpen,
     translateWithId: translateWithId
@@ -515,7 +515,7 @@ Dropdown.propTypes = {
    */
   titleText: PropTypes.node.isRequired,
   /**
-   * Callback function for translating ListBoxMenuIcon SVG title
+   * Translates component strings using your i18n tool.
    */
   translateWithId: PropTypes.func,
   /**

package/lib/components/ErrorBoundary/ErrorBoundaryContext.js

@@ -11,7 +11,7 @@ var React = require('react');
 
 const ErrorBoundaryContext = /*#__PURE__*/React.createContext({
   log(error, info) {
-    // eslint-disable-next-line no-console -- https://github.com/carbon-design-system/carbon/issues/20071
+    // eslint-disable-next-line no-console -- https://github.com/carbon-design-system/carbon/issues/20452
     console.log(info.componentStack);
   }
 });

package/lib/components/FileUploader/FileUploader.js

@@ -24,7 +24,7 @@ require('../Text/TextDirection.js');
 var useId = require('../../internal/useId.js');
 var index = require('../FeatureFlags/index.js');
 
-// eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20071
+// eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20452
 const FileUploader = /*#__PURE__*/React.forwardRef(({
   accept,
   buttonKind,
@@ -49,7 +49,7 @@ const FileUploader = /*#__PURE__*/React.forwardRef(({
   const [fileItems, setFileItems] = React.useState([]);
   const [legacyFileNames, setLegacyFileNames] = React.useState([]);
 
-  // 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
   const [fileObjects, setFileObjects] = React.useState(new Map());
   const nodes = [];
   const createFileItem = file => ({
@@ -103,7 +103,7 @@ const FileUploader = /*#__PURE__*/React.forwardRef(({
       }
     }
   },
-  // 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
   [enhancedFileUploaderEnabled, fileItems, legacyFileNames, multiple, onChange]);
   const handleClick = React.useCallback((evt, {
     index,
@@ -160,7 +160,7 @@ const FileUploader = /*#__PURE__*/React.forwardRef(({
       uploaderButton.current?.focus?.();
     }
   },
-  // 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
   [enhancedFileUploaderEnabled, fileItems, legacyFileNames, onDelete, onChange, onClick]);
   React.useImperativeHandle(ref, () => ({
     clearFiles() {

package/lib/components/FileUploader/FileUploaderButton.js

@@ -40,7 +40,7 @@ function FileUploaderButton({
   const prefix = usePrefix.usePrefix();
   const [labelText, setLabelText] = React.useState(ownerLabelText);
   const [prevOwnerLabelText, setPrevOwnerLabelText] = React.useState(ownerLabelText);
-  // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20071
+  // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20452
   const {
     current: inputId
   } = React.useRef(id || useId.useId());

package/lib/components/FileUploader/FileUploaderDropContainer.js

@@ -37,7 +37,7 @@ function FileUploaderDropContainer({
 }) {
   const prefix = usePrefix.usePrefix();
   const inputRef = React.useRef(null);
-  // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20071
+  // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20452
   const {
     current: uid
   } = React.useRef(id || useId.useId());

package/lib/components/FileUploader/FileUploaderItem.js

@@ -40,7 +40,7 @@ function FileUploaderItem({
   const textRef = React.useRef(null);
   const [isEllipsisApplied, setIsEllipsisApplied] = React.useState(false);
   const prefix = usePrefix.usePrefix();
-  // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20071
+  // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20452
   const {
     current: id
   } = React.useRef(uuid || useId.useId());
@@ -54,7 +54,7 @@ function FileUploaderItem({
     return name?.replace(/\s+/g, '');
   };
 
-  // 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 isEllipsisActive = element => {
     setIsEllipsisApplied(element.offsetWidth < element.scrollWidth);
     return element.offsetWidth < element.scrollWidth;

package/lib/components/FluidComboBox/FluidComboBox.d.ts

@@ -1,17 +1,18 @@
 /**
- * Copyright IBM Corp. 2022
+ * Copyright IBM Corp. 2022, 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 React, { ComponentType } from 'react';
+import React, { ComponentType, type ComponentProps } from 'react';
+import ComboBox from '../ComboBox';
 import { ComboBoxProps } from '../ComboBox/ComboBox';
 type ItemToStringHandler<ItemType> = (item: ItemType | null) => string;
 interface OnChangeData<ItemType> {
     selectedItem: ItemType | null | undefined;
     inputValue?: string | null;
 }
-export interface FluidComboBoxProps<ItemType> extends ComboBoxProps<ItemType> {
+export interface FluidComboBoxProps<ItemType> extends ComboBoxProps<ItemType>, Pick<ComponentProps<typeof ComboBox>, 'translateWithId'> {
     /**
      * Specify an optional className to be applied to the outer FluidForm wrapper
      */
@@ -85,10 +86,6 @@ export interface FluidComboBoxProps<ItemType> extends ComboBoxProps<ItemType> {
      * visiting this control
      */
     titleText?: React.ReactNode;
-    /**
-     * Callback function for translating ListBoxMenuIcon SVG title
-     */
-    translateWithId?: (id: string) => string;
     /**
      * Specify whether the control is currently in warning state
      */

package/lib/components/FluidComboBox/FluidComboBox.js

@@ -110,7 +110,7 @@ FluidComboBox.propTypes = {
    */
   titleText: PropTypes.node,
   /**
-   * Callback function for translating ListBoxMenuIcon SVG title
+   * Translates component strings using your i18n tool.
    */
   translateWithId: PropTypes.func,
   /**

package/lib/components/FluidDropdown/FluidDropdown.d.ts

@@ -1,15 +1,15 @@
 /**
- * Copyright IBM Corp. 2022
+ * Copyright IBM Corp. 2022, 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 React from 'react';
-import { DropdownProps } from '../Dropdown';
+import React, { type ComponentProps } from 'react';
+import Dropdown, { DropdownProps } from '../Dropdown';
 export interface OnChangeData<ItemType> {
     selectedItem: ItemType | null;
 }
-export interface FluidDropdownProps<ItemType> extends DropdownProps<ItemType> {
+export interface FluidDropdownProps<ItemType> extends DropdownProps<ItemType>, Pick<ComponentProps<typeof Dropdown>, 'translateWithId'> {
     /**
      * Specify an optional className to be applied to the outer FluidForm wrapper
      */
@@ -84,10 +84,6 @@ export interface FluidDropdownProps<ItemType> extends DropdownProps<ItemType> {
      * visiting this control
      */
     titleText: React.ReactNode;
-    /**
-     * Callback function for translating ListBoxMenuIcon SVG title
-     */
-    translateWithId?: (id: string) => string;
     /**
      * Specify whether the control is currently in warning state
      */

package/lib/components/FluidDropdown/FluidDropdown.js

@@ -111,7 +111,7 @@ FluidDropdown.propTypes = {
    */
   titleText: PropTypes.node,
   /**
-   * Callback function for translating ListBoxMenuIcon SVG title
+   * Translates component strings using your i18n tool.
    */
   translateWithId: PropTypes.func,
   /**

package/lib/components/FluidMultiSelect/FluidFilterableMultiSelect.d.ts

@@ -4,13 +4,13 @@
  * 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 React, { FunctionComponent } from 'react';
+import React, { FunctionComponent, type ComponentProps } from 'react';
 import type { UseComboboxProps, UseMultipleSelectionProps } from 'downshift';
-import { type FilterableMultiSelectProps } from '../MultiSelect';
+import { type FilterableMultiSelectProps, type MultiSelect } from '../MultiSelect';
 interface OnChangeData<ItemType> {
     selectedItems: ItemType[] | null;
 }
-export interface FluidFilterableMultiSelectProps<ItemType> extends FilterableMultiSelectProps<ItemType> {
+export interface FluidFilterableMultiSelectProps<ItemType> extends FilterableMultiSelectProps<ItemType>, Pick<ComponentProps<typeof MultiSelect>, 'translateWithId'> {
     /**
      * Specify an optional className to be applied to the outer FluidForm wrapper
      */
@@ -123,10 +123,6 @@ export interface FluidFilterableMultiSelectProps<ItemType> extends FilterableMul
      * visiting this control
      */
     titleText?: React.ReactNode;
-    /**
-     * Callback function for translating ListBoxMenuIcon SVG title
-     */
-    translateWithId?: (id: string) => string;
     /**
      * Specify title to show title on hover
      */

package/lib/components/FluidMultiSelect/FluidMultiSelect.d.ts

@@ -4,13 +4,13 @@
  * 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 React from 'react';
-import { type MultiSelectProps } from '../MultiSelect';
+import React, { type ComponentProps } from 'react';
+import { MultiSelect, type MultiSelectProps } from '../MultiSelect';
 import { UseSelectProps } from 'downshift';
 interface OnChangeData<ItemType> {
     selectedItems: ItemType[] | null;
 }
-export interface FluidMultiSelectProps<ItemType> extends MultiSelectProps<ItemType> {
+export interface FluidMultiSelectProps<ItemType> extends MultiSelectProps<ItemType>, Pick<ComponentProps<typeof MultiSelect>, 'translateWithId'> {
     /**
      * Specify an optional className to be applied to the outer FluidForm wrapper
      */
@@ -128,10 +128,6 @@ export interface FluidMultiSelectProps<ItemType> extends MultiSelectProps<ItemTy
      * visiting this control
      */
     titleText?: React.ReactNode;
-    /**
-     * Callback function for translating ListBoxMenuIcon SVG title
-     */
-    translateWithId?: (id: string) => string;
     /**
      * Specify title to show title on hover
      */