@carbon/react 1.92.0 → 1.93.0-rc.0

package/es/components/Modal/Modal.js

@@ -7,7 +7,7 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React, { useContext, useRef, useState, useEffect, cloneElement } from 'react';
+import React, { useContext, useRef, useEffect, cloneElement } from 'react';
 import cx from 'classnames';
 import { Close } from '@carbon/icons-react';
 import { toggleClass } from '../../tools/toggleClass.js';
@@ -18,7 +18,7 @@ import InlineLoading from '../InlineLoading/InlineLoading.js';
 import { Layer } from '../Layer/index.js';
 import { requiredIfGivenPropIsTruthy } from '../../prop-types/requiredIfGivenPropIsTruthy.js';
 import { wrapFocus, wrapFocusWithoutSentinels, elementOrParentIsFloatingMenu } from '../../internal/wrapFocus.js';
-import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
+import { useResizeObserver } from '../../internal/useResizeObserver.js';
 import { useId } from '../../internal/useId.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import { usePrefix } from '../../internal/usePrefix.js';
@@ -37,7 +37,6 @@ import { AILabel } from '../AILabel/index.js';
 import { isComponentElement } from '../../internal/utils.js';
 import { warning } from '../../internal/warning.js';
 import { ModalPresenceContext, useExclusiveModalPresenceContext, ModalPresence } from './ModalPresence.js';
-import { debounce } from '../../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';
@@ -112,7 +111,6 @@ const ModalDialog = /*#__PURE__*/React.forwardRef(function ModalDialog({
   const startTrap = useRef(null);
   const endTrap = useRef(null);
   const wrapFocusTimeout = useRef(null);
-  const [isScrollable, setIsScrollable] = useState(false);
   const modalInstanceId = `modal-${useId()}`;
   const modalLabelId = `${prefix}--modal-header__label--${modalInstanceId}`;
   const modalHeadingId = `${prefix}--modal-header__heading--${modalInstanceId}`;
@@ -207,21 +205,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({
+    ref: contentRef
+  });
   const modalClasses = cx(`${prefix}--modal`, {
     [`${prefix}--modal-tall`]: !passiveModal,
     'is-visible': enablePresence || open,
@@ -234,8 +227,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
@@ -274,7 +274,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]);
   useEffect(() => {
     return () => {
@@ -329,29 +329,13 @@ const ModalDialog = /*#__PURE__*/React.forwardRef(function ModalDialog({
       }
     }
   }, [open, selectorPrimaryFocus, danger, prefix, enableDialogElement]);
-  useIsomorphicEffect(() => {
-    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(handler, 200);
-    window.addEventListener('resize', debouncedHandler);
-    return () => {
-      debouncedHandler.cancel();
-      window.removeEventListener('resize', debouncedHandler);
-    };
-  }, []);
 
   // AILabel always size `sm`
   const candidate = slug ?? decorator;
   const candidateIsAILabel = isComponentElement(candidate, AILabel);
   const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/cloneElement(candidate, {
     size: 'sm'
-  }) : null;
+  }) : candidate;
   const modalButton = /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--modal-close-button`
   }, /*#__PURE__*/React.createElement(IconButton, {

package/es/components/ModalWrapper/ModalWrapper.js

@@ -17,7 +17,7 @@ import { Escape } from '../../internal/keyboard/keys.js';
 import { match } from '../../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) {
@@ -54,7 +54,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(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/es/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/es/components/MultiSelect/FilterableMultiSelect.js

@@ -56,15 +56,6 @@ const {
   DropdownKeyDownBackspace,
   FunctionRemoveSelectedItem
 } = 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__*/forwardRef(function FilterableMultiSelect({
   autoAlign = false,
   className: containerClassName,
@@ -111,7 +102,7 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
     isFluid
   } = useContext(FormContext);
   const isFirstRender = 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] = useState(false);
   const [isOpen, setIsOpen] = useState(!!open);
   const [prevOpen, setPrevOpen] = useState(!!open);
@@ -123,9 +114,9 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
     inputValue
   }), [items, inputValue, itemToString, filterItems]);
   const nonSelectAllItems = 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,
@@ -142,7 +133,7 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
   });
   const selectAllStatus = 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;
@@ -152,7 +143,7 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
     };
   }, [controlledSelectedItems, nonSelectAllItems]);
   const handleSelectAllClick = 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,
@@ -169,7 +160,7 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
       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,
@@ -220,14 +211,14 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
 
   // memoize sorted items to reduce unnecessary expensive sort on rerender
   const sortedItems = 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,
@@ -244,7 +235,7 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
       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;
@@ -328,7 +319,7 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
     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,
@@ -351,9 +342,9 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
     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;
     }
   });
@@ -521,11 +512,11 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
   const candidateIsAILabel = isComponentElement(candidate, AILabel);
   const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/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,
@@ -707,7 +698,7 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
   }, normalizedDecorator) : '', /*#__PURE__*/React.createElement(ListBox.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;
@@ -805,7 +796,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),
   /**
@@ -897,7 +888,7 @@ FilterableMultiSelect.propTypes = {
    */
   titleText: PropTypes.node,
   /**
-   * Callback function for translating ListBoxMenuIcon SVG title
+   * Translates component strings using your i18n tool.
    */
   translateWithId: PropTypes.func,
   type: ListBoxTypePropType,

package/es/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/es/components/MultiSelect/MultiSelect.js

@@ -101,14 +101,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();
   const {
     isFluid
   } = useContext(FormContext);
   const multiSelectInstanceId = 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] = useState(false);
   const [inputFocused, setInputFocused] = useState(false);
   const [isOpen, setIsOpen] = useState(open || false);
@@ -183,9 +183,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
@@ -381,7 +381,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 ? {
@@ -407,10 +407,10 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
   const candidateIsAILabel = isComponentElement(candidate, AILabel);
   const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/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
@@ -431,7 +431,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
@@ -485,7 +485,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
   })), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--list-box__inner-wrapper--decorator`
   }, normalizedDecorator) : ''), /*#__PURE__*/React.createElement(ListBox.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,
@@ -493,10 +493,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,
@@ -700,7 +700,7 @@ MultiSelect.propTypes = {
    */
   titleText: PropTypes.node,
   /**
-   * Callback function for translating ListBoxMenuIcon SVG title
+   * Translates component strings using your i18n tool.
    */
   translateWithId: PropTypes.func,
   /**

package/es/components/Notification/Notification.js

@@ -807,7 +807,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/es/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> {

package/es/components/NumberInput/NumberInput.js

@@ -32,17 +32,15 @@ const translationIds = {
   'increment.number': 'increment.number',
   'decrement.number': 'decrement.number'
 };
-
-/**
- * Message ids that will be passed to translateWithId().
- */
-
 const defaultTranslations = {
   [translationIds['increment.number']]: 'Increment number',
   [translationIds['decrement.number']]: 'Decrement number'
 };
+const defaultTranslateWithId = messageId => {
+  return defaultTranslations[messageId];
+};
 
-// 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 NumberInput = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
   const {
     allowEmpty = false,
@@ -73,7 +71,7 @@ const NumberInput = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
     size = 'md',
     slug,
     step = 1,
-    translateWithId: t = id => defaultTranslations[id],
+    translateWithId: t = defaultTranslateWithId,
     type = 'number',
     defaultValue = type === 'number' ? 0 : NaN,
     validate,
@@ -104,7 +102,7 @@ const NumberInput = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
     }
     return 0;
   });
-  // 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 [prevControlledValue, setPrevControlledValue] = useState(controlledValue);
   const numberParser = useMemo(() => new NumberParser(locale, formatOptions), [locale, formatOptions]);
   /**
@@ -237,7 +235,7 @@ const NumberInput = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
     [`${prefix}--number-input--fluid--disabled`]: isFluid && disabled
   });
 
-  // 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 Icon = normalizedProps.icon;
   const getDecimalPlaces = num => {
     const parts = num.toString().split('.');
@@ -306,13 +304,10 @@ const NumberInput = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
   const candidateIsAILabel = isComponentElement(candidate, AILabel);
   const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/cloneElement(candidate, {
     size: 'mini'
-  }) : null;
+  }) : candidate;
 
   // Need to update the internal value when the revert button is clicked
-  let isRevertActive;
-  if (normalizedDecorator?.type === AILabel) {
-    isRevertActive = normalizedDecorator.props.revertActive;
-  }
+  const isRevertActive = isComponentElement(normalizedDecorator, AILabel) ? normalizedDecorator.props.revertActive : undefined;
   useEffect(() => {
     if (!isRevertActive && slug && defaultValue) {
       setValue(defaultValue);
@@ -347,9 +342,9 @@ const NumberInput = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
     onKeyUp: onKeyUp,
     onKeyDown: e => {
       if (type === 'text') {
-        // 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
         match(e, ArrowUp) && handleStep(e, 'up');
-        // 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
         match(e, ArrowDown) && handleStep(e, 'down');
       }
       if (rest?.onKeyDown) {
@@ -597,7 +592,7 @@ NumberInput.propTypes = {
    */
   step: PropTypes.number,
   /**
-   * Provide custom text for the component for each translation id
+   * Translates component strings using your i18n tool.
    */
   translateWithId: PropTypes.func,
   /**
@@ -731,4 +726,4 @@ function disableWheel(e) {
   e.preventDefault();
 }
 
-export { NumberInput, translationIds };
+export { NumberInput };

package/es/components/OverflowMenu/OverflowMenu.d.ts

@@ -102,9 +102,9 @@ export interface OverflowMenuProps extends Omit<IconButtonProps, 'type' | 'aria-
      */
     selectorPrimaryFocus?: string;
     /**
-     * Specify the size of the OverflowMenu. Currently supports either `sm`, `md` (default) or `lg` as an option.
+     * Specify the size of the OverflowMenu. Currently supports either `xs`, `sm`, `md` (default) or `lg` as an option.
      */
-    size?: 'sm' | 'md' | 'lg';
+    size?: 'xs' | 'sm' | 'md' | 'lg';
     /**
      * The ref to the overflow menu's trigger button element.
      * @deprecated Use the standard React `ref` prop instead.

package/es/components/OverflowMenu/OverflowMenu.js

@@ -66,7 +66,7 @@ const getMenuOffset = (menuBody, direction, trigger, flip) => {
   if (process.env.NODE_ENV !== 'production') {
     !(triggerButtonPositionProp && triggerButtonPositionFactor) ? process.env.NODE_ENV !== "production" ? invariant(false, '[OverflowMenu] wrong floating menu direction: `%s`', direction) : invariant(false) : void 0;
   }
-  // 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 {
     offsetWidth: menuWidth,
     offsetHeight: menuHeight
@@ -89,7 +89,7 @@ const getMenuOffset = (menuBody, direction, trigger, flip) => {
       };
   }
 };
-// 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 OverflowMenu = /*#__PURE__*/forwardRef(({
   align,
   ['aria-label']: ariaLabel = null,
@@ -463,9 +463,9 @@ OverflowMenu.propTypes = {
    */
   selectorPrimaryFocus: PropTypes.string,
   /**
-   * Specify the size of the OverflowMenu. Currently supports either `sm`, `md` (default) or `lg` as an option.
+   * Specify the size of the OverflowMenu. Currently supports either `xs`, `sm`, `md` (default) or `lg` as an option.
    */
-  size: PropTypes.oneOf(['sm', 'md', 'lg'])
+  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg'])
 };
 
 export { OverflowMenu, OverflowMenu as default, getMenuOffset };

package/es/components/OverflowMenu/next/index.d.ts

@@ -37,7 +37,7 @@ interface OverflowMenuProps {
     /**
      * Specify the size of the menu, from a list of available sizes.
      */
-    size?: 'sm' | 'md' | 'lg';
+    size?: 'xs' | 'sm' | 'md' | 'lg';
     /**
      * Specify how the trigger tooltip should be aligned.
      */

package/es/components/OverflowMenu/next/index.js

@@ -23,7 +23,7 @@ import { deprecateValuesWithin } from '../../../prop-types/deprecateValuesWithin
 import { mapPopoverAlign } from '../../../tools/mapPopoverAlign.js';
 
 const defaultSize = 'md';
-// 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 OverflowMenu = /*#__PURE__*/React.forwardRef(({
   autoAlign = false,
   children,
@@ -162,7 +162,7 @@ OverflowMenu.propTypes = {
   /**
    * Specify the size of the menu, from a list of available sizes.
    */
-  size: PropTypes.oneOf(['sm', 'md', 'lg']),
+  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
   /**
    * Specify how the trigger tooltip should be aligned.
    */

package/es/components/OverflowMenuItem/OverflowMenuItem.js

@@ -89,14 +89,14 @@ const OverflowMenuItem = frFn((props, ref) => {
     // ref as any: the type of `ref` is `ForwardedRef<HTMLButtonElement>` in `Button` component
     // but `OverflowMenuItem` can be rendered as `a` tag as well, which is `HTMLAnchorElement`
     // so we have to use `any` here
-    // 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
     ,
     ref: ref,
     tabIndex: -1
     // itemText as any: itemText may be a ReactNode, but `title` only accepts string
     // to avoid compatibility issue, we use `any` here. Consider to enforce `itemText` to be `string?`
     // in the next major release
-    // 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
     ,
     title: requireTitle ? title || itemText : undefined
   }, rest), OverflowMenuItemContent));