@carbon/react 1.92.0 → 1.93.0-rc.0

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
      */

package/lib/components/FluidMultiSelect/FluidMultiSelect.js

@@ -34,14 +34,14 @@ const FluidMultiSelect = /*#__PURE__*/React.forwardRef(function FluidMultiSelect
     }
   }, isFilterable ?
   /*#__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(FilterableMultiSelect.FilterableMultiSelect, _rollupPluginBabelHelpers.extends({
     ref: ref,
     className: classNames
   }, other)) :
   /*#__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(MultiSelect.MultiSelect, _rollupPluginBabelHelpers.extends({
     ref: ref,
@@ -193,7 +193,7 @@ FluidMultiSelect.propTypes = {
    */
   titleText: PropTypes.node,
   /**
-   * Callback function for translating ListBoxMenuIcon SVG title
+   * Translates component strings using your i18n tool.
    */
   translateWithId: PropTypes.func,
   /**

package/lib/components/FluidNumberInput/FluidNumberInput.d.ts

@@ -1,12 +1,13 @@
 /**
- * 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 React, { type ComponentProps } from 'react';
+import { NumberInput } from '../NumberInput';
 import { type NumberFormatOptions } from '@carbon/utilities';
-export interface FluidNumberInputProps {
+export interface FluidNumberInputProps extends Pick<ComponentProps<typeof NumberInput>, 'translateWithId'> {
     /**
      * `true` to allow empty string.
      */
@@ -108,10 +109,6 @@ export interface FluidNumberInputProps {
      * Specify how much the values should increase/decrease upon clicking on up/down button
      */
     step?: number;
-    /**
-     * Provide custom text for the component for each translation id
-     */
-    translateWithId?: (id: string) => string;
     /**
      * **Experimental**: Specify if the input should be of type text or number.
      * Use type="text" with `locale`, `formatOptions`, and guide user input with

package/lib/components/FluidNumberInput/FluidNumberInput.js

@@ -19,7 +19,7 @@ var usePrefix = require('../../internal/usePrefix.js');
 var FormContext = require('../FluidForm/FormContext.js');
 var NumberFormatPropTypes = require('../NumberInput/NumberFormatPropTypes.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 FluidNumberInput = /*#__PURE__*/React.forwardRef(({
   className,
   ...other
@@ -132,7 +132,7 @@ FluidNumberInput.propTypes = {
    */
   step: PropTypes.number,
   /**
-   * Provide custom text for the component for each translation id
+   * Translates component strings using your i18n tool.
    */
   translateWithId: PropTypes.func,
   /**

package/lib/components/FluidSearch/FluidSearch.js

@@ -18,7 +18,7 @@ require('../Search/Search.Skeleton.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var FormContext = require('../FluidForm/FormContext.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 FluidSearch = /*#__PURE__*/React.forwardRef(({
   className,
   ...other

package/lib/components/FluidSelect/FluidSelect.js

@@ -18,7 +18,7 @@ require('../Select/Select.Skeleton.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var FormContext = require('../FluidForm/FormContext.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 FluidSelect = /*#__PURE__*/React.forwardRef(({
   className,
   children,

package/lib/components/FluidTextInput/FluidTextInput.js

@@ -20,7 +20,7 @@ var PasswordInput = require('../TextInput/PasswordInput.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var FormContext = require('../FluidForm/FormContext.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 FluidTextInput = /*#__PURE__*/React.forwardRef(({
   className,
   isPassword,

package/lib/components/FluidTimePicker/FluidTimePicker.js

@@ -19,7 +19,7 @@ require('../FluidTextInput/FluidTextInput.Skeleton.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var iconsReact = require('@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,
@@ -52,7 +52,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
       }));
@@ -60,7 +60,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/lib/components/FluidTimePickerSelect/FluidTimePickerSelect.js

@@ -15,7 +15,7 @@ var PropTypes = require('prop-types');
 var FluidSelect = require('../FluidSelect/FluidSelect.js');
 require('../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/lib/components/Grid/CSSGrid.js

@@ -14,7 +14,7 @@ var React = require('react');
 var usePrefix = require('../../internal/usePrefix.js');
 var GridContext = require('./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,
@@ -98,9 +98,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/lib/components/Grid/Column.js

@@ -36,7 +36,7 @@ function _interopNamespaceDefault(e) {
 
 var FeatureFlags__namespace = /*#__PURE__*/_interopNamespaceDefault(FeatureFlags);
 
-// 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,
@@ -139,7 +139,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/lib/components/Grid/ColumnHang.js

@@ -26,7 +26,7 @@ function ColumnHang({
   const prefix = usePrefix.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, _rollupPluginBabelHelpers.extends({}, rest, {
     className: className

package/lib/components/Grid/FlexGrid.js

@@ -14,7 +14,7 @@ var React = require('react');
 var usePrefix = require('../../internal/usePrefix.js');
 var GridContext = require('./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/lib/components/Grid/Row.js

@@ -30,7 +30,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, _rollupPluginBabelHelpers.extends({
     className: className

package/lib/components/Heading/index.js

@@ -19,7 +19,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)
@@ -46,7 +46,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, _rollupPluginBabelHelpers.extends({

package/lib/components/IconButton/index.js

@@ -21,7 +21,7 @@ var index = require('../BadgeIndicator/index.js');
 var mapPopoverAlign = require('../../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,
@@ -47,7 +47,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.useId('badge-indicator');

package/lib/components/IconIndicator/index.js

@@ -30,13 +30,13 @@ const iconTypes = {
   unknown: iconsReact.UnknownFilled,
   informative: iconsReact.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.usePrefix();

package/lib/components/InlineCheckbox/InlineCheckbox.js

@@ -15,7 +15,7 @@ var deprecate = require('../../prop-types/deprecate.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var useMergedRefs = require('../../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/lib/components/Layout/index.js

@@ -24,7 +24,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,
@@ -67,7 +67,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/lib/components/LayoutDirection/LayoutDirection.js

@@ -12,7 +12,7 @@ var PropTypes = require('prop-types');
 var React = require('react');
 var LayoutDirectionContext = require('./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/lib/components/Link/Link.js

@@ -16,7 +16,7 @@ var React = require('react');
 var usePrefix = require('../../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,
@@ -53,7 +53,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/lib/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/lib/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/lib/components/ListBox/ListBoxMenuIcon.js

@@ -15,11 +15,17 @@ var PropTypes = require('prop-types');
 var iconsReact = require('@carbon/icons-react');
 var usePrefix = require('../../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`
@@ -47,9 +53,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/lib/components/ListBox/ListBoxMenuItem.js

@@ -27,7 +27,7 @@ var useMergedRefs = require('../../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 = React.useRef(null);
   const mergedRef = useMergedRefs.useMergedRefs([...(forwardedRef ? [forwardedRef] : []), localRef]);
@@ -41,7 +41,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/lib/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/lib/components/ListBox/ListBoxSelection.js

@@ -20,16 +20,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
@@ -112,12 +109,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
 };
 
 exports.default = ListBoxSelection;
-exports.translationIds = translationIds;

package/lib/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/lib/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/lib/components/ListBox/next/ListBoxSelection.js

@@ -17,13 +17,23 @@ var iconsReact = require('@carbon/icons-react');
 var usePrefix = require('../../../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,
@@ -120,9 +130,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
 };