@carbon/react 1.92.0 → 1.93.0-rc.0

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}`;
@@ -211,21 +209,16 @@ const ModalDialog = /*#__PURE__*/React.forwardRef(function ModalDialog({
     if (!modalContent || !modalContent.classList.contains(`${prefix}--modal-scroll-content`) || !currentActiveNode || !modalContent.contains(currentActiveNode)) {
       return;
     }
-    const lastContent = modalContent.children[modalContent.children.length - 1];
-    const gradientSpacing = modalContent.scrollHeight - lastContent.offsetTop - lastContent.clientHeight;
-
-    // eslint-disable-next-line   prefer-const -- https://github.com/carbon-design-system/carbon/issues/20071
-    for (let elem of modalContent.children) {
-      if (elem.contains(currentActiveNode)) {
-        const spaceBelow = modalContent.clientHeight - elem.offsetTop + modalContent.scrollTop - elem.clientHeight;
-        if (spaceBelow < gradientSpacing) {
-          modalContent.scrollTop = modalContent.scrollTop + (gradientSpacing - spaceBelow);
-        }
-        break;
-      }
-    }
+    currentActiveNode.scrollIntoView({
+      block: 'center'
+    });
   }
   const onSecondaryButtonClick = onSecondarySubmit ? onSecondarySubmit : onRequestClose;
+  const {
+    height
+  } = useResizeObserver.useResizeObserver({
+    ref: contentRef
+  });
   const modalClasses = cx(`${prefix}--modal`, {
     [`${prefix}--modal-tall`]: !passiveModal,
     'is-visible': enablePresence || open,
@@ -238,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
@@ -278,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 () => {
@@ -333,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 {};

package/lib/components/MultiSelect/FilterableMultiSelect.js

@@ -58,15 +58,6 @@ const {
   DropdownKeyDownBackspace,
   FunctionRemoveSelectedItem
 } = Downshift.useMultipleSelection.stateChangeTypes;
-
-/**
- * Message ids that will be passed to translateWithId().
- * Combination of message ids from ListBox/next/ListBoxSelection.js and
- * ListBox/next/ListBoxTrigger.js, but we can't access those values directly
- * because those components aren't Typescript.  (If you try, TranslationKey
- * ends up just being defined as "string".)
- */
-
 const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableMultiSelect({
   autoAlign = false,
   className: containerClassName,
@@ -113,7 +104,7 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
     isFluid
   } = React.useContext(FormContext.FormContext);
   const isFirstRender = React.useRef(true);
-  // 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 [isFocused, setIsFocused] = React.useState(false);
   const [isOpen, setIsOpen] = React.useState(!!open);
   const [prevOpen, setPrevOpen] = React.useState(!!open);
@@ -125,9 +116,9 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
     inputValue
   }), [items, inputValue, itemToString, filterItems]);
   const nonSelectAllItems = React.useMemo(
-  // 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
   () => filteredItems.filter(item => !item.isSelectAll), [filteredItems]);
-  // 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 selectAll = filteredItems.some(item => item.isSelectAll);
   const {
     selectedItems: controlledSelectedItems,
@@ -144,7 +135,7 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
   });
   const selectAllStatus = React.useMemo(() => {
     const selectable = nonSelectAllItems.filter(
-    // 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
     item => !item.disabled);
     const nonSelectedCount = selectable.filter(item => !controlledSelectedItems.some(sel => isEqual(sel, item))).length;
     const totalCount = selectable.length;
@@ -154,7 +145,7 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
     };
   }, [controlledSelectedItems, nonSelectAllItems]);
   const handleSelectAllClick = React.useCallback(() => {
-    // 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 selectable = nonSelectAllItems.filter(i => !i.disabled);
     const {
       checked,
@@ -171,7 +162,7 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
       const toSelect = selectable.filter(e => !controlledSelectedItems.some(sel => isEqual(sel, e)));
       toggleAll([...controlledSelectedItems, ...toSelect]);
     }
-    // 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
   }, [nonSelectAllItems, selectAllStatus, controlledSelectedItems, toggleAll]);
   const {
     refs,
@@ -222,14 +213,14 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
 
   // memoize sorted items to reduce unnecessary expensive sort on rerender
   const sortedItems = React.useMemo(() => {
-    // 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 selectAllItem = items.find(item => item.isSelectAll);
     const selectableRealItems = nonSelectAllItems.filter(
-    // 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
     item => !item.disabled);
 
     // Sort only non-select-all items, select-all item must stay at the top
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20071
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452
     const sortedReal = sortItems(nonSelectAllItems, {
       selectedItems: {
         top: controlledSelectedItems,
@@ -246,7 +237,7 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
       return [selectAllItem, ...sortedReal];
     }
     return sortedReal;
-    // 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, inputValue, controlledSelectedItems, topItems, selectionFeedback, itemToString, compareItems, locale, sortItems, nonSelectAllItems]);
   const inline = type === 'inline';
   const showWarning = !invalid && warn;
@@ -330,7 +321,7 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
     return () => {
       document.removeEventListener('mousedown', handleClickOutside);
     };
-    // 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
   }, [isOpen, inputFocused]);
   const {
     getToggleButtonProps,
@@ -353,9 +344,9 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
     inputId,
     inputValue,
     stateReducer,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20071
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20452
     isItemDisabled(item, _index) {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
       return item?.disabled;
     }
   });
@@ -523,11 +514,11 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
   const candidateIsAILabel = utils.isComponentElement(candidate, index.AILabel);
   const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/React.cloneElement(candidate, {
     size: 'mini'
-  }) : null;
+  }) : candidate;
 
   // exclude the select-all item from the count
   const selectedItemsLength = controlledSelectedItems.filter(
-  // 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
   item => !item.isSelectAll).length;
   const className = cx(`${prefix}--multi-select`, `${prefix}--combo-box`, `${prefix}--multi-select--filterable`, {
     [`${prefix}--multi-select--invalid`]: invalid,
@@ -709,7 +700,7 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
   }, normalizedDecorator) : '', /*#__PURE__*/React.createElement(index$1.default.Menu, menuProps, isOpen ? sortedItems.map((item, index) => {
     let isChecked;
     let isIndeterminate = 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
     if (item.isSelectAll) {
       isChecked = selectAllStatus.checked;
       isIndeterminate = selectAllStatus.indeterminate;
@@ -807,7 +798,7 @@ FilterableMultiSelect.propTypes = {
    * change, and in some cases they can not be shimmed by Carbon to shield you
    * from potentially breaking changes.
    */
-  // 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
   downshiftProps: PropTypes.shape(Downshift.propTypes),
   /**
@@ -899,7 +890,7 @@ FilterableMultiSelect.propTypes = {
    */
   titleText: PropTypes.node,
   /**
-   * Callback function for translating ListBoxMenuIcon SVG title
+   * Translates component strings using your i18n tool.
    */
   translateWithId: PropTypes.func,
   type: ListBoxPropTypes.ListBoxTypePropType,

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

@@ -6,14 +6,14 @@
  */
 import { UseSelectProps } from 'downshift';
 import React, { type ReactNode } from 'react';
-import { type ListBoxSize, type ListBoxType } from '../ListBox';
+import { type ListBoxMenuIconTranslationKey, type ListBoxSelectionTranslationKey, type ListBoxSize, type ListBoxType } from '../ListBox';
 import { MultiSelectSortingProps } from './MultiSelectPropTypes';
 import { ListBoxProps } from '../ListBox/ListBox';
 import type { TranslateWithId } from '../../types/common';
 interface OnChangeData<ItemType> {
     selectedItems: ItemType[] | null;
 }
-export interface MultiSelectProps<ItemType> extends MultiSelectSortingProps<ItemType>, TranslateWithId<'close.menu' | 'open.menu' | 'clear.all' | 'clear.selection'> {
+export interface MultiSelectProps<ItemType> extends MultiSelectSortingProps<ItemType>, TranslateWithId<ListBoxMenuIconTranslationKey | ListBoxSelectionTranslationKey> {
     /**
      * **Experimental**: Will attempt to automatically align the floating
      * element to avoid collisions with the viewport and being clipped by

package/lib/components/MultiSelect/MultiSelect.js

@@ -103,14 +103,14 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
     });
   }, [items]);
 
-  // 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 selectAll = filteredItems.some(item => item.isSelectAll);
   const prefix = usePrefix.usePrefix();
   const {
     isFluid
   } = React.useContext(FormContext.FormContext);
   const multiSelectInstanceId = useId.useId();
-  // 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 [isFocused, setIsFocused] = React.useState(false);
   const [inputFocused, setInputFocused] = React.useState(false);
   const [isOpen, setIsOpen] = React.useState(open || false);
@@ -185,9 +185,9 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
     },
     selectedItem: controlledSelectedItems,
     items: filteredItems,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20071
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20452
     isItemDisabled(item, _index) {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
       return item?.disabled;
     },
     ...downshiftProps
@@ -383,7 +383,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
     [`${prefix}--list-box__field--wrapper--input-focused`]: inputFocused
   });
   const handleFocus = evt => {
-    // eslint-disable-next-line  @typescript-eslint/no-unused-expressions -- https://github.com/carbon-design-system/carbon/issues/20071
+    // eslint-disable-next-line  @typescript-eslint/no-unused-expressions -- https://github.com/carbon-design-system/carbon/issues/20452
     evt.target.classList.contains(`${prefix}--tag__close-icon`) ? setIsFocused(false) : setIsFocused(evt.type === 'focus' ? true : false);
   };
   const readOnlyEventHandlers = readOnly ? {
@@ -409,10 +409,10 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
   const candidateIsAILabel = utils.isComponentElement(candidate, index$1.AILabel);
   const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/React.cloneElement(candidate, {
     size: 'mini'
-  }) : null;
+  }) : candidate;
   const itemsSelectedText = selectedItems.length > 0 && selectedItems.map(item => item?.text);
   const selectedItemsLength = selectAll ?
-  // 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
   selectedItems.filter(item => !item.isSelectAll).length : selectedItems.length;
 
   // Memoize the value of getMenuProps to avoid an infinite loop
@@ -433,7 +433,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
       totalSelectableCount
     };
   },
-  // 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
   [selectedItems, filteredItems]);
   return /*#__PURE__*/React.createElement("div", {
     className: wrapperClasses
@@ -487,7 +487,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
   })), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--list-box__inner-wrapper--decorator`
   }, normalizedDecorator) : ''), /*#__PURE__*/React.createElement(index$2.default.Menu, menuProps, isOpen &&
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20071
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452
   sortItems(filteredItems, sortOptions).map((item, index) => {
     const {
       hasIndividualSelections,
@@ -495,10 +495,10 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
       totalSelectableCount
     } = getSelectionStats(selectedItems, filteredItems);
 
-    // 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 isChecked = item.isSelectAll ? nonSelectAllSelectedCount === totalSelectableCount && totalSelectableCount > 0 : selectedItems.some(selected => isEqual(selected, item));
     const isIndeterminate =
-    // 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
     item.isSelectAll && hasIndividualSelections && nonSelectAllSelectedCount < totalSelectableCount;
     const itemProps = getItemProps({
       item,
@@ -702,7 +702,7 @@ MultiSelect.propTypes = {
    */
   titleText: PropTypes.node,
   /**
-   * Callback function for translating ListBoxMenuIcon SVG title
+   * Translates component strings using your i18n tool.
    */
   translateWithId: PropTypes.func,
   /**

package/lib/components/Notification/Notification.js

@@ -809,7 +809,7 @@ Callout.propTypes = {
 /**
  * @deprecated Use `CalloutProps` instead.
  */
-// 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
 
 let didWarnAboutDeprecation = false;
 const StaticNotification = props => {

package/lib/components/NumberInput/NumberInput.d.ts

@@ -5,15 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { type ReactNode } from 'react';
-import { TranslateWithId } from '../../types/common';
+import type { TranslateWithId } from '../../types/common';
 import { type NumberFormatOptions } from '@carbon/utilities';
-export declare const translationIds: {
+declare const translationIds: {
     readonly 'increment.number': "increment.number";
     readonly 'decrement.number': "decrement.number";
 };
-/**
- * Message ids that will be passed to translateWithId().
- */
 type TranslationKey = keyof typeof translationIds;
 type ExcludedAttributes = 'defaultValue' | 'id' | 'min' | 'max' | 'onChange' | 'onClick' | 'size' | 'step' | 'value';
 export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes>, TranslateWithId<TranslationKey> {