@carbon/react 1.92.1 → 1.93.0

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> {

package/lib/components/NumberInput/NumberInput.js

@@ -34,17 +34,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,
@@ -75,7 +73,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,
@@ -106,7 +104,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] = React.useState(controlledValue);
   const numberParser = React.useMemo(() => new utilities.NumberParser(locale, formatOptions), [locale, formatOptions]);
   /**
@@ -239,7 +237,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('.');
@@ -308,13 +306,10 @@ const NumberInput = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
   const candidateIsAILabel = utils.isComponentElement(candidate, index.AILabel);
   const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/React.cloneElement(candidate, {
     size: 'mini'
-  }) : null;
+  }) : candidate;
 
   // Need to update the internal value when the revert button is clicked
-  let isRevertActive;
-  if (normalizedDecorator?.type === index.AILabel) {
-    isRevertActive = normalizedDecorator.props.revertActive;
-  }
+  const isRevertActive = utils.isComponentElement(normalizedDecorator, index.AILabel) ? normalizedDecorator.props.revertActive : undefined;
   React.useEffect(() => {
     if (!isRevertActive && slug && defaultValue) {
       setValue(defaultValue);
@@ -349,9 +344,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.match(e, keys.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.match(e, keys.ArrowDown) && handleStep(e, 'down');
       }
       if (rest?.onKeyDown) {
@@ -599,7 +594,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,
   /**
@@ -734,4 +729,3 @@ function disableWheel(e) {
 }
 
 exports.NumberInput = NumberInput;
-exports.translationIds = translationIds;

package/lib/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/lib/components/OverflowMenu/OverflowMenu.js

@@ -70,7 +70,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
@@ -93,7 +93,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__*/React.forwardRef(({
   align,
   ['aria-label']: ariaLabel = null,
@@ -467,9 +467,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'])
 };
 
 exports.OverflowMenu = OverflowMenu;

package/lib/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/lib/components/OverflowMenu/next/index.js

@@ -25,7 +25,7 @@ var deprecateValuesWithin = require('../../../prop-types/deprecateValuesWithin.j
 var mapPopoverAlign = require('../../../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,
@@ -164,7 +164,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/lib/components/OverflowMenuItem/OverflowMenuItem.js

@@ -93,14 +93,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));

package/lib/components/PageHeader/PageHeader.js

@@ -133,7 +133,7 @@ const PageHeaderContent = /*#__PURE__*/React.forwardRef(({
     return element.offsetHeight < element.scrollHeight;
   };
   React.useLayoutEffect(() => {
-    // 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
     titleRef.current && isEllipsisActive(titleRef.current);
   }, [title]);
   return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({
@@ -205,7 +205,7 @@ PageHeaderContent.propTypes = {
 
 const PageHeaderContentPageActions = ({
   className,
-  // 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
   children,
   menuButtonLabel = 'Actions',
   actions,
@@ -241,7 +241,7 @@ const PageHeaderContentPageActions = ({
         }
       }
     });
-    // 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
   }, []);
   return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({
     className: classNames,
@@ -385,26 +385,26 @@ const PageHeaderTabBar = /*#__PURE__*/React.forwardRef(({
       sm: 4
     }, children)));
   }
-  // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20071
+  // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20452
   const [openPopover, setOpenPopover] = React.useState(false);
   const tagSize = tags[0]?.size || 'md';
-  // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20071
+  // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20452
   const instanceId = useId.useId('PageHeaderTabBar');
-  // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20071
+  // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20452
   const tagsWithIds = React.useMemo(() => {
     return tags.map((tag, index) => ({
       ...tag,
       id: tag.id || `tag-${index}-${instanceId}`
     }));
-    // 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
   }, [tags]);
 
-  // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20071
+  // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20452
   const tagsContainerRef = React.useRef(null);
-  // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20071
+  // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20452
   const offsetRef = React.useRef(null);
   // To close popover when window resizes
-  // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20071
+  // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20452
   React.useEffect(() => {
     const handleResize = () => {
       // Close the popover when window resizes to prevent unwanted opens
@@ -421,14 +421,14 @@ const PageHeaderTabBar = /*#__PURE__*/React.forwardRef(({
     visibleItems = [],
     hiddenItems = [],
     itemRefHandler = () => {}
-    // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20071
+    // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20452
   } = useOverflowItems.default(tagsWithIds, tagsContainerRef, offsetRef) || {
     visibleItems: [],
     hiddenItems: [],
     itemRefHandler: () => {}
   };
 
-  // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20071
+  // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20452
   const handleOverflowClick = React.useCallback(event => {
     event.stopPropagation();
     setOpenPopover(prev => !prev);

package/lib/components/Pagination/Pagination.js

@@ -54,7 +54,7 @@ function getPageSize(pageSizes, pageSize) {
   return pageSizes[0].value;
 }
 
-// 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 Pagination = /*#__PURE__*/React.forwardRef(({
   backwardText = 'Previous page',
   className: customClassName = '',
@@ -66,7 +66,7 @@ const Pagination = /*#__PURE__*/React.forwardRef(({
   itemRangeText = (min, max, total) => `${min}–${max} of ${total} items`,
   itemsPerPageText = 'Items per page:',
   onChange,
-  // 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
   pageNumberText: _pageNumberText = 'Page Number',
   pageRangeText = (_current, total) => `of ${total} ${total === 1 ? 'page' : 'pages'}`,
   page: controlledPage = 1,
@@ -129,7 +129,7 @@ const Pagination = /*#__PURE__*/React.forwardRef(({
       handleFocus(focusTarget);
       setFocusTarget(null);
     }
-    // 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
   }, [focusTarget]);
 
   // Sync state with props

package/lib/components/PaginationNav/PaginationNav.d.ts

@@ -5,19 +5,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import { TranslateWithId } from '../../types/common';
+import type { TranslateWithId } from '../../types/common';
 type TooltipAlignment = 'start' | 'center' | 'end';
 type TooltipPosition = 'top' | 'right' | 'bottom' | 'left';
 declare const translationIds: {
-    readonly 'carbon.pagination-nav.next': "Next";
-    readonly 'carbon.pagination-nav.previous': "Previous";
-    readonly 'carbon.pagination-nav.item': "Page";
-    readonly 'carbon.pagination-nav.active': "Active";
-    readonly 'carbon.pagination-nav.of': "of";
+    readonly 'carbon.pagination-nav.next': "carbon.pagination-nav.next";
+    readonly 'carbon.pagination-nav.previous': "carbon.pagination-nav.previous";
+    readonly 'carbon.pagination-nav.item': "carbon.pagination-nav.item";
+    readonly 'carbon.pagination-nav.active': "carbon.pagination-nav.active";
+    readonly 'carbon.pagination-nav.of': "carbon.pagination-nav.of";
 };
-/**
- * Message ids that will be passed to translateWithId().
- */
 type TranslationKey = keyof typeof translationIds;
 export interface DirectionButtonProps {
     /**