@carbon/react 1.92.1 → 1.93.0

package/es/components/FluidTimePicker/FluidTimePicker.js

@@ -15,7 +15,7 @@ import '../FluidTextInput/FluidTextInput.Skeleton.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
 
-// 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 FluidTimePicker = /*#__PURE__*/React.forwardRef(({
   className,
   children,
@@ -48,7 +48,7 @@ const FluidTimePicker = /*#__PURE__*/React.forwardRef(({
     if (disabled) {
       return React.Children.toArray(children).map(child =>
       /*#__PURE__*/
-      // 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.cloneElement(child, {
         disabled: true
       }));
@@ -56,7 +56,7 @@ const FluidTimePicker = /*#__PURE__*/React.forwardRef(({
     if (readOnly) {
       return React.Children.toArray(children).map(child =>
       /*#__PURE__*/
-      // 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.cloneElement(child, {
         readOnly: true
       }));

package/es/components/FluidTimePickerSelect/FluidTimePickerSelect.js

@@ -11,7 +11,7 @@ import PropTypes from 'prop-types';
 import FluidSelect from '../FluidSelect/FluidSelect.js';
 import '../FluidSelect/FluidSelect.Skeleton.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 FluidTimePickerSelect = /*#__PURE__*/React.forwardRef(({
   children,
   className,

package/es/components/Grid/CSSGrid.js

@@ -12,7 +12,7 @@ import React from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { useGridSettings, GridSettings } from './GridContext.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 CSSGrid = /*#__PURE__*/React.forwardRef(({
   align,
   as,
@@ -96,9 +96,9 @@ CSSGrid.propTypes = {
   narrow: PropTypes.bool
 };
 
-// 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
 
-// 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 Subgrid = /*#__PURE__*/React.forwardRef(({
   as,
   className: customClassName,

package/es/components/Grid/Column.js

@@ -13,7 +13,7 @@ import React from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { useGridSettings } from './GridContext.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 Column = /*#__PURE__*/React.forwardRef(({
   as,
   children,
@@ -116,7 +116,7 @@ Column.propTypes = {
   xlg: spanPropType
 };
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any , react/display-name -- https://github.com/carbon-design-system/carbon/issues/20071
+// eslint-disable-next-line @typescript-eslint/no-explicit-any , react/display-name -- https://github.com/carbon-design-system/carbon/issues/20452
 const CSSGridColumn = /*#__PURE__*/React.forwardRef(({
   as: BaseComponent = 'div',
   children,

package/es/components/Grid/ColumnHang.js

@@ -24,7 +24,7 @@ function ColumnHang({
   const prefix = usePrefix();
   const className = cx(customClassName, `${prefix}--grid-column-hang`);
   // cast as any to let TypeScript allow passing in attributes to base component
-  // 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 BaseComponentAsAny = BaseComponent;
   return /*#__PURE__*/React.createElement(BaseComponentAsAny, _extends({}, rest, {
     className: className

package/es/components/Grid/FlexGrid.js

@@ -12,7 +12,7 @@ import React from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { GridSettings } from './GridContext.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 FlexGrid = /*#__PURE__*/React.forwardRef(({
   as,
   condensed = false,

package/es/components/Grid/Row.js

@@ -26,7 +26,7 @@ function Row({
     [`${prefix}--row--narrow`]: narrow
   });
   // TypeScript type validation reports conflicts on different instances of keyof JSX.IntrinsicElements
-  // 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 BaseComponentAsAny = BaseComponent;
   return /*#__PURE__*/React.createElement(BaseComponentAsAny, _extends({
     className: className

package/es/components/Heading/index.js

@@ -17,7 +17,7 @@ const Section = /*#__PURE__*/React.forwardRef(function Section({
 }, ref) {
   const parentLevel = React.useContext(HeadingContext);
   const level = levelOverride ?? parentLevel + 1;
-  // 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 BaseComponentAsAny = BaseComponent;
   return /*#__PURE__*/React.createElement(HeadingContext.Provider, {
     value: Math.min(level, 6)
@@ -44,7 +44,7 @@ Section.propTypes = {
    */
   level: PropTypes.number
 };
-// 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 Heading = /*#__PURE__*/React.forwardRef((props, ref) => {
   const HeadingIntrinsic = `h${React.useContext(HeadingContext)}`;
   return /*#__PURE__*/React.createElement(HeadingIntrinsic, _extends({

package/es/components/IconButton/index.js

@@ -19,7 +19,7 @@ import { BadgeIndicator } from '../BadgeIndicator/index.js';
 import { mapPopoverAlign } from '../../tools/mapPopoverAlign.js';
 
 const IconButtonKinds = ['primary', 'secondary', 'ghost', 'tertiary'];
-// 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 IconButton = /*#__PURE__*/React.forwardRef(({
   align,
   autoAlign = false,
@@ -45,7 +45,7 @@ const IconButton = /*#__PURE__*/React.forwardRef(({
     [`${prefix}--icon-tooltip--disabled`]: disabled
   });
   if (badgeCount && (kind !== 'ghost' || size !== 'lg')) {
-    // 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.warn("The prop BadgeCount must be used with hasIconOnly=true, kind='ghost' and size='lg'");
   }
   const badgeId = useId('badge-indicator');

package/es/components/IconIndicator/index.js

@@ -26,13 +26,13 @@ const iconTypes = {
   unknown: UnknownFilled,
   informative: WarningSquareFilled
 };
-// 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 IconIndicator = /*#__PURE__*/React.forwardRef(({
   className: customClassName,
   kind,
   label,
   size = 16,
-  // 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
   ...rest
 }, ref) => {
   const prefix = usePrefix();

package/es/components/InlineCheckbox/InlineCheckbox.js

@@ -11,7 +11,7 @@ import { deprecate } from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.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 InlineCheckbox = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
   const {
     ['aria-label']: ariaLabel,

package/es/components/Layout/index.js

@@ -22,7 +22,7 @@ const densities = ['condensed', 'normal'];
  * Size of components within this layout
  */
 
-// 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 Layout = /*#__PURE__*/React.forwardRef(({
   as: BaseComponent = 'div',
   children,
@@ -65,7 +65,7 @@ Layout.propTypes = {
    */
   size: PropTypes.oneOf(sizes)
 };
-// 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 LayoutConstraint = /*#__PURE__*/React.forwardRef(({
   as: BaseComponent = 'div',
   children,

package/es/components/LayoutDirection/LayoutDirection.js

@@ -10,7 +10,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { LayoutDirectionContext } from './LayoutDirectionContext.js';
 
-// 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
 
 function LayoutDirection({
   as: BaseComponent = 'div',

package/es/components/Link/Link.js

@@ -12,7 +12,7 @@ import React from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
 
 // First create the component with basic types
-// 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 LinkBase = /*#__PURE__*/React.forwardRef(({
   as: BaseComponent,
   children,
@@ -49,7 +49,7 @@ const LinkBase = /*#__PURE__*/React.forwardRef(({
     linkProps['aria-disabled'] = true;
   }
 
-  // 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 BaseComponentAsAny = BaseComponent ?? 'a';
   const handleOnClick = event => {
     if (disabled) {

package/es/components/ListBox/ListBoxField.d.ts

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { type HTMLAttributes } from 'react';
-export declare const translationIds: {};
 export interface ListBoxFieldProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Specify if the parent <ListBox> is disabled

package/es/components/ListBox/ListBoxMenuIcon.d.ts

@@ -1,13 +1,17 @@
 /**
- * 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 React from 'react';
-import { TranslateWithId } from '../../types/common';
-export type ListBoxMenuIconTranslationKey = 'close.menu' | 'open.menu';
-export interface ListBoxMenuIconProps extends TranslateWithId<ListBoxMenuIconTranslationKey> {
+import type { TranslateWithId } from '../../types/common';
+declare const translationIds: {
+    readonly 'close.menu': "close.menu";
+    readonly 'open.menu': "open.menu";
+};
+type TranslationKey = keyof typeof translationIds;
+export interface ListBoxMenuIconProps extends TranslateWithId<TranslationKey> {
     /**
      * Specify whether the menu is currently open, which will influence the
      * direction of the menu icon

package/es/components/ListBox/ListBoxMenuIcon.js

@@ -11,11 +11,17 @@ import PropTypes from 'prop-types';
 import { ChevronDown } from '@carbon/icons-react';
 import { usePrefix } from '../../internal/usePrefix.js';
 
+const translationIds = {
+  'close.menu': 'close.menu',
+  'open.menu': 'open.menu'
+};
 const defaultTranslations = {
-  'close.menu': 'Close menu',
-  'open.menu': 'Open menu'
+  [translationIds['close.menu']]: 'Close menu',
+  [translationIds['open.menu']]: 'Open menu'
+};
+const defaultTranslateWithId = messageId => {
+  return defaultTranslations[messageId];
 };
-const defaultTranslateWithId = id => defaultTranslations[id];
 /**
  * `ListBoxMenuIcon` is used to orient the icon up or down depending on the
  * state of the menu for a given `ListBox`
@@ -43,9 +49,7 @@ ListBoxMenuIcon.propTypes = {
    */
   isOpen: PropTypes.bool.isRequired,
   /**
-   * i18n hook used to provide the appropriate description for the given menu
-   * icon. This function takes a ListBoxMenuIconTranslationKey and should
-   * return a string message for that given message id.
+   * Translates component strings using your i18n tool.
    */
   translateWithId: PropTypes.func
 };

package/es/components/ListBox/ListBoxMenuItem.js

@@ -23,7 +23,7 @@ import { useMergedRefs } from '../../internal/useMergedRefs.js';
  * @returns An object containing the truncation state and the merged ref.
  */
 const useIsTruncated = (forwardedRef,
-// 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
 deps = []) => {
   const localRef = useRef(null);
   const mergedRef = useMergedRefs([...(forwardedRef ? [forwardedRef] : []), localRef]);
@@ -37,7 +37,7 @@ deps = []) => {
       } = element;
       setIsTruncated(offsetWidth < scrollWidth);
     }
-    // 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
   }, [localRef, ...deps]);
   return {
     isTruncated,

package/es/components/ListBox/ListBoxSelection.d.ts

@@ -1,12 +1,12 @@
 /**
- * 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 React from 'react';
 import { KeyboardEvent, MouseEvent } from 'react';
-import { TranslateWithId } from '../../types/common';
+import type { TranslateWithId } from '../../types/common';
 export interface ListBoxSelectionProps extends TranslateWithId<TranslationKey> {
     /**
      * Specify a function to be invoked when a user interacts with the clear
@@ -33,13 +33,10 @@ export interface ListBoxSelectionProps extends TranslateWithId<TranslationKey> {
     selectionCount?: number;
 }
 export type ListBoxSelectionComponent = React.FC<ListBoxSelectionProps>;
-export declare const translationIds: {
+declare const translationIds: {
     readonly 'clear.all': "clear.all";
     readonly 'clear.selection': "clear.selection";
 };
-/**
- * Message ids that will be passed to translateWithId().
- */
 type TranslationKey = keyof typeof translationIds;
 /**
  * `ListBoxSelection` is used to provide controls for clearing a selection, in

package/es/components/ListBox/ListBoxSelection.js

@@ -16,16 +16,13 @@ const translationIds = {
   'clear.all': 'clear.all',
   'clear.selection': 'clear.selection'
 };
-
-/**
- * Message ids that will be passed to translateWithId().
- */
-
 const defaultTranslations = {
   [translationIds['clear.all']]: 'Clear all selected items',
   [translationIds['clear.selection']]: 'Clear selected item'
 };
-const defaultTranslateWithId = id => defaultTranslations[id];
+const defaultTranslateWithId = messageId => {
+  return defaultTranslations[messageId];
+};
 
 /**
  * `ListBoxSelection` is used to provide controls for clearing a selection, in
@@ -108,11 +105,9 @@ ListBoxSelection.propTypes = {
    */
   selectionCount: PropTypes.number,
   /**
-   * i18n hook used to provide the appropriate description for the given menu
-   * icon. This function takes in an id defined in `translationIds` and should
-   * return a string message for that given message id.
+   * Translates component strings using your i18n tool.
    */
   translateWithId: PropTypes.func
 };
 
-export { ListBoxSelection as default, translationIds };
+export { ListBoxSelection as default };

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

@@ -5,12 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 export * from './ListBoxPropTypes';
+import type { ComponentProps } from 'react';
 import ListBoxInternal from './ListBox';
 import { ListBoxFieldComponent } from './ListBoxField';
 import ListBoxMenu from './ListBoxMenu';
-import { ListBoxMenuIconComponent } from './ListBoxMenuIcon';
+import ListBoxMenuIcon, { ListBoxMenuIconComponent } from './ListBoxMenuIcon';
 import ListBoxMenuItem from './ListBoxMenuItem';
-import { ListBoxSelectionComponent } from './ListBoxSelection';
+import ListBoxSelection, { ListBoxSelectionComponent } from './ListBoxSelection';
 type ListBoxMenuComponent = typeof ListBoxMenu;
 type ListBoxMenuItemComponent = typeof ListBoxMenuItem;
 type ListBoxPartialComponent = typeof ListBoxInternal;
@@ -23,4 +24,5 @@ export interface ListBoxComponent extends ListBoxPartialComponent {
 }
 declare const ListBox: ListBoxComponent;
 export default ListBox;
-export type { ListBoxMenuIconTranslationKey } from './ListBoxMenuIcon';
+export type ListBoxMenuIconTranslationKey = Parameters<NonNullable<ComponentProps<typeof ListBoxMenuIcon>['translateWithId']>>[0];
+export type ListBoxSelectionTranslationKey = Parameters<NonNullable<ComponentProps<typeof ListBoxSelection>['translateWithId']>>[0];

package/es/components/ListBox/next/ListBoxSelection.d.ts

@@ -1,22 +1,23 @@
 /**
- * Copyright IBM Corp. 2016, 2024
+ * 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 React from 'react';
 import PropTypes from 'prop-types';
+import type { TranslateWithId } from '../../../types/common';
 /**
  * `ListBoxSelection` is used to provide controls for clearing a selection, in
  * addition to conditionally rendering a badge if the control has more than one
  * selection.
  */
-export declare const translationIds: {
+declare const translationIds: {
     readonly 'clear.all': "clear.all";
     readonly 'clear.selection': "clear.selection";
 };
-export type TranslationKey = keyof typeof translationIds;
-export interface ListBoxSelectionProps {
+type TranslationKey = keyof typeof translationIds;
+export interface ListBoxSelectionProps extends TranslateWithId<TranslationKey> {
     /**
      * Specify a function to be invoked when a user interacts with the clear
      * selection element.
@@ -27,12 +28,6 @@ export interface ListBoxSelectionProps {
      * whether the selection should display a badge or a single clear icon.
      */
     selectionCount?: number;
-    /**
-     * i18n hook used to provide the appropriate description for the given menu
-     * icon. This function takes in an id defined in `translationIds` and should
-     * return a string message for that given message id.
-     */
-    translateWithId?: (id: TranslationKey) => string;
     /**
      * Specify whether or not the clear selection element should be disabled
      */
@@ -104,9 +99,7 @@ declare namespace ListBoxSelection {
          */
         selectionCount: PropTypes.Requireable<number>;
         /**
-         * i18n hook used to provide the appropriate description for the given menu
-         * icon. This function takes in an id defined in `translationIds` and should
-         * return a string message for that given message id.
+         * Translates component strings using your i18n tool.
          */
         translateWithId: PropTypes.Requireable<(...args: any[]) => any>;
     };

package/es/components/ListBox/next/ListBoxSelection.js

@@ -13,13 +13,23 @@ import { Close } from '@carbon/icons-react';
 import { usePrefix } from '../../../internal/usePrefix.js';
 
 var _Close, _Close2;
+/**
+ * `ListBoxSelection` is used to provide controls for clearing a selection, in
+ * addition to conditionally rendering a badge if the control has more than one
+ * selection.
+ */
+
+const translationIds = {
+  'clear.all': 'clear.all',
+  'clear.selection': 'clear.selection'
+};
 const defaultTranslations = {
-  'clear.all': 'Clear all selected items',
-  'clear.selection': 'Clear selected item'
+  [translationIds['clear.all']]: 'Clear all selected items',
+  [translationIds['clear.selection']]: 'Clear selected item'
+};
+const defaultTranslateWithId = messageId => {
+  return defaultTranslations[messageId];
 };
-function defaultTranslateWithId(id) {
-  return defaultTranslations[id];
-}
 function ListBoxSelection({
   clearSelection,
   selectionCount,
@@ -116,9 +126,7 @@ ListBoxSelection.propTypes = {
    */
   selectionCount: PropTypes.number,
   /**
-   * i18n hook used to provide the appropriate description for the given menu
-   * icon. This function takes in an id defined in `translationIds` and should
-   * return a string message for that given message id.
+   * Translates component strings using your i18n tool.
    */
   translateWithId: PropTypes.func
 };

package/es/components/ListBox/next/ListBoxTrigger.d.ts

@@ -1,27 +1,22 @@
 /**
- * Copyright IBM Corp. 2016, 2024
+ * 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 React from 'react';
-export declare const translationIds: {
+import type { TranslateWithId } from '../../../types/common';
+declare const translationIds: {
     readonly 'close.menu': "close.menu";
     readonly 'open.menu': "open.menu";
 };
-export type TranslationKey = keyof typeof translationIds;
-export interface ListBoxTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+type TranslationKey = keyof typeof translationIds;
+export interface ListBoxTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, TranslateWithId<TranslationKey> {
     /**
      * Specify whether the menu is currently open, which will influence the
      * direction of the menu icon
      */
     isOpen: boolean;
-    /**
-     * i18n hook used to provide the appropriate description for the given menu
-     * icon. This function takes in an id defined in `translationIds` and should
-     * return a string message for that given message id.
-     */
-    translateWithId?: (id: TranslationKey) => string;
 }
 /**
  * `ListBoxTrigger` is used to orient the icon up or down depending on the

package/es/components/ListBox/next/ListBoxTrigger.js

@@ -21,13 +21,15 @@ const defaultTranslations = {
   [translationIds['close.menu']]: 'Close',
   [translationIds['open.menu']]: 'Open'
 };
-const defaultTranslateWithId = id => defaultTranslations[id];
+const defaultTranslateWithId = messageId => {
+  return defaultTranslations[messageId];
+};
 /**
  * `ListBoxTrigger` is used to orient the icon up or down depending on the
  * state of the menu for a given `ListBox`
  */
 
-// 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 ListBoxTrigger = /*#__PURE__*/React.forwardRef(({
   isOpen,
   translateWithId: t = defaultTranslateWithId,
@@ -55,11 +57,9 @@ ListBoxTrigger.propTypes = {
    */
   isOpen: PropTypes.bool.isRequired,
   /**
-   * i18n hook used to provide the appropriate description for the given menu
-   * icon. This function takes in an id defined in `translationIds` and should
-   * return a string message for that given message id.
+   * Translates component strings using your i18n tool.
    */
   translateWithId: PropTypes.func
 };
 
-export { ListBoxTrigger as default, translationIds };
+export { ListBoxTrigger as default };

package/es/components/Menu/MenuContext.js

@@ -44,7 +44,7 @@ function menuReducer(state, action) {
 const MenuContext = /*#__PURE__*/createContext({
   state: menuDefaultState,
   // 'dispatch' is populated by the root menu
-  // 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
   dispatch: _ => {}
 });
 

package/es/components/Menu/MenuItem.js

@@ -342,7 +342,7 @@ const MenuItemRadioGroup = /*#__PURE__*/forwardRef(function MenuItemRadioGroup({
     onChange,
     defaultValue: defaultSelectedItem ?? {}
   });
-  //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
   function handleClick(item, e) {
     setSelection(item);
   }

package/es/components/MenuButton/index.js

@@ -23,7 +23,7 @@ import { mergeRefs } from '../../tools/mergeRefs.js';
 
 const validButtonKinds = ['primary', 'tertiary', 'ghost'];
 const defaultButtonKind = 'primary';
-// 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 MenuButton = /*#__PURE__*/forwardRef(({
   children,
   className,
@@ -42,7 +42,7 @@ const MenuButton = /*#__PURE__*/forwardRef(({
   const id = useId('MenuButton');
   const prefix = usePrefix();
   const triggerRef = 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 = [flip({
@@ -161,7 +161,7 @@ MenuButton.propTypes = {
   /**
    * Specify the type of button to be used as the base for the trigger button.
    */
-  // 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-next-line -- avoid spurious (?) TS2322 error
   kind: PropTypes.oneOf(validButtonKinds),
   /**
@@ -175,13 +175,13 @@ MenuButton.propTypes = {
   /**
    * Specify the size of the button and menu.
    */
-  // 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-next-line -- avoid spurious (?) TS2322 error
   size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
   /**
    * Specify the tabIndex of the button.
    */
-  // 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-next-line -- avoid spurious (?) TS2322 error
   tabIndex: PropTypes.number,
   /**