@carbon/react 1.92.1 → 1.93.0

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
 };

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

@@ -25,13 +25,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,
@@ -59,12 +61,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
 };
 
 exports.default = ListBoxTrigger;
-exports.translationIds = translationIds;

package/lib/components/Menu/MenuContext.js

@@ -46,7 +46,7 @@ function menuReducer(state, action) {
 const MenuContext = /*#__PURE__*/React.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/lib/components/Menu/MenuItem.js

@@ -344,7 +344,7 @@ const MenuItemRadioGroup = /*#__PURE__*/React.forwardRef(function MenuItemRadioG
     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/lib/components/MenuButton/index.js

@@ -25,7 +25,7 @@ var mergeRefs = require('../../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__*/React.forwardRef(({
   children,
   className,
@@ -44,7 +44,7 @@ const MenuButton = /*#__PURE__*/React.forwardRef(({
   const id = useId.useId('MenuButton');
   const prefix = usePrefix.usePrefix();
   const triggerRef = React.useRef(null);
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
   let middlewares = [];
   if (!enableOnlyFloatingStyles) {
     middlewares = [react.flip({
@@ -163,7 +163,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),
   /**
@@ -177,13 +177,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,
   /**

package/lib/components/Modal/Modal.js

@@ -22,7 +22,7 @@ var InlineLoading = require('../InlineLoading/InlineLoading.js');
 var index$3 = require('../Layer/index.js');
 var requiredIfGivenPropIsTruthy = require('../../prop-types/requiredIfGivenPropIsTruthy.js');
 var wrapFocus = require('../../internal/wrapFocus.js');
-var useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
+var useResizeObserver = require('../../internal/useResizeObserver.js');
 var useId = require('../../internal/useId.js');
 var useMergedRefs = require('../../internal/useMergedRefs.js');
 var usePrefix = require('../../internal/usePrefix.js');
@@ -41,7 +41,6 @@ var index$1 = require('../AILabel/index.js');
 var utils = require('../../internal/utils.js');
 var warning = require('../../internal/warning.js');
 var ModalPresence = require('./ModalPresence.js');
-var debounce = require('../../node_modules/es-toolkit/dist/compat/function/debounce.js');
 
 const ModalSizes = ['xs', 'sm', 'md', 'lg'];
 const invalidOutsideClickMessage = '`<Modal>` prop `preventCloseOnClickOutside` should not be `false` when ' + '`passiveModal` is `false`. Transactional, non-passive Modals should ' + 'not be dissmissable by clicking outside. ' + 'See: https://carbondesignsystem.com/components/modal/usage/#transactional-modal';
@@ -116,7 +115,6 @@ const ModalDialog = /*#__PURE__*/React.forwardRef(function ModalDialog({
   const startTrap = React.useRef(null);
   const endTrap = React.useRef(null);
   const wrapFocusTimeout = React.useRef(null);
-  const [isScrollable, setIsScrollable] = React.useState(false);
   const modalInstanceId = `modal-${useId.useId()}`;
   const modalLabelId = `${prefix}--modal-header__label--${modalInstanceId}`;
   const modalHeadingId = `${prefix}--modal-header__heading--${modalInstanceId}`;
@@ -216,6 +214,11 @@ const ModalDialog = /*#__PURE__*/React.forwardRef(function ModalDialog({
     });
   }
   const onSecondaryButtonClick = onSecondarySubmit ? onSecondarySubmit : onRequestClose;
+  const {
+    height
+  } = useResizeObserver.useResizeObserver({
+    ref: contentRef
+  });
   const modalClasses = cx(`${prefix}--modal`, {
     [`${prefix}--modal-tall`]: !passiveModal,
     'is-visible': enablePresence || open,
@@ -228,8 +231,15 @@ const ModalDialog = /*#__PURE__*/React.forwardRef(function ModalDialog({
     [`${prefix}--modal-container--${size}`]: size,
     [`${prefix}--modal-container--full-width`]: isFullWidth
   });
+
+  /**
+   * isScrollable is implicitly dependent on height, when height gets updated
+   * via `useResizeObserver`, clientHeight and scrollHeight get updated too
+   */
+  const isScrollable = !!contentRef.current && contentRef?.current?.scrollHeight > contentRef?.current?.clientHeight;
   const contentClasses = cx(`${prefix}--modal-content`, {
-    [`${prefix}--modal-scroll-content`]: hasScrollingContent || isScrollable
+    [`${prefix}--modal-scroll-content`]: hasScrollingContent || isScrollable,
+    [`${prefix}--modal-scroll-content--no-fade`]: height <= 300
   });
   const footerClasses = cx(`${prefix}--modal-footer`, {
     [`${prefix}--modal-footer--three-button`]: Array.isArray(secondaryButtons) && secondaryButtons.length === 2
@@ -268,7 +278,7 @@ const ModalDialog = /*#__PURE__*/React.forwardRef(function ModalDialog({
     return () => {
       document.removeEventListener('keydown', handleEscapeKey, true);
     };
-    // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20071
+    // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20452
   }, [open]);
   React.useEffect(() => {
     return () => {
@@ -323,29 +333,13 @@ const ModalDialog = /*#__PURE__*/React.forwardRef(function ModalDialog({
       }
     }
   }, [open, selectorPrimaryFocus, danger, prefix, enableDialogElement]);
-  useIsomorphicEffect.default(() => {
-    if (contentRef.current) {
-      setIsScrollable(contentRef.current.scrollHeight > contentRef.current.clientHeight);
-    }
-    function handler() {
-      if (contentRef.current) {
-        setIsScrollable(contentRef.current.scrollHeight > contentRef.current.clientHeight);
-      }
-    }
-    const debouncedHandler = debounce.debounce(handler, 200);
-    window.addEventListener('resize', debouncedHandler);
-    return () => {
-      debouncedHandler.cancel();
-      window.removeEventListener('resize', debouncedHandler);
-    };
-  }, []);
 
   // AILabel always size `sm`
   const candidate = slug ?? decorator;
   const candidateIsAILabel = utils.isComponentElement(candidate, index$1.AILabel);
   const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/React.cloneElement(candidate, {
     size: 'sm'
-  }) : null;
+  }) : candidate;
   const modalButton = /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--modal-close-button`
   }, /*#__PURE__*/React.createElement(index$2.IconButton, {

package/lib/components/ModalWrapper/ModalWrapper.js

@@ -21,7 +21,7 @@ var keys = require('../../internal/keyboard/keys.js');
 var match = require('../../internal/keyboard/match.js');
 
 let didWarnAboutDeprecation = false;
-// 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
 process.env.NODE_ENV !== 'production';
 class ModalWrapper extends React.Component {
   constructor(...args) {
@@ -58,7 +58,7 @@ class ModalWrapper extends React.Component {
       handleSubmit?.(evt);
     });
   }
-  // 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
   if(isDev) {
     process.env.NODE_ENV !== "production" ? warning.warning(didWarnAboutDeprecation, '`<ModalWrapper>` has been deprecated in favor of `<ComposedModal/>` and will be removed in the next major version, `@carbon/react@v2.x`') : void 0;
     didWarnAboutDeprecation = true;

package/lib/components/MultiSelect/FilterableMultiSelect.d.ts

@@ -7,17 +7,9 @@
 import { type UseComboboxProps, type UseMultipleSelectionProps } from 'downshift';
 import React, { type FunctionComponent, type ReactElement, type ReactNode } from 'react';
 import { type MultiSelectSortingProps } from './MultiSelectPropTypes';
-import { type ListBoxSize, type ListBoxType } from '../ListBox';
-import { TranslateWithId } from '../../types/common';
-/**
- * Message ids that will be passed to translateWithId().
- * Combination of message ids from ListBox/next/ListBoxSelection.js and
- * ListBox/next/ListBoxTrigger.js, but we can't access those values directly
- * because those components aren't Typescript.  (If you try, TranslationKey
- * ends up just being defined as "string".)
- */
-type TranslationKey = 'close.menu' | 'open.menu' | 'clear.all' | 'clear.selection';
-export interface FilterableMultiSelectProps<ItemType> extends MultiSelectSortingProps<ItemType>, React.RefAttributes<HTMLDivElement>, TranslateWithId<TranslationKey> {
+import { type ListBoxMenuIconTranslationKey, type ListBoxSelectionTranslationKey, type ListBoxSize, type ListBoxType } from '../ListBox';
+import type { TranslateWithId } from '../../types/common';
+export interface FilterableMultiSelectProps<ItemType> extends MultiSelectSortingProps<ItemType>, React.RefAttributes<HTMLDivElement>, TranslateWithId<ListBoxSelectionTranslationKey | ListBoxMenuIconTranslationKey> {
     /**
      * Specify a label to be read by screen readers on the container node
      * @deprecated
@@ -209,4 +201,3 @@ export declare const FilterableMultiSelect: {
     defaultProps?: any;
     displayName?: any;
 };
-export {};