@carbon/react 1.92.0 → 1.93.0-rc.0

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

package/lib/components/PaginationNav/PaginationNav.js

@@ -22,20 +22,22 @@ var clamp = require('../../internal/clamp.js');
 
 var _CaretRight, _CaretLeft, _option;
 const translationIds = {
-  'carbon.pagination-nav.next': 'Next',
-  'carbon.pagination-nav.previous': 'Previous',
-  'carbon.pagination-nav.item': 'Page',
-  'carbon.pagination-nav.active': 'Active',
-  'carbon.pagination-nav.of': 'of'
+  'carbon.pagination-nav.next': 'carbon.pagination-nav.next',
+  'carbon.pagination-nav.previous': 'carbon.pagination-nav.previous',
+  'carbon.pagination-nav.item': 'carbon.pagination-nav.item',
+  'carbon.pagination-nav.active': 'carbon.pagination-nav.active',
+  'carbon.pagination-nav.of': 'carbon.pagination-nav.of'
+};
+const defaultTranslations = {
+  [translationIds['carbon.pagination-nav.next']]: 'Next',
+  [translationIds['carbon.pagination-nav.previous']]: 'Previous',
+  [translationIds['carbon.pagination-nav.item']]: 'Page',
+  [translationIds['carbon.pagination-nav.active']]: 'Active',
+  [translationIds['carbon.pagination-nav.of']]: 'of'
+};
+const defaultTranslateWithId = messageId => {
+  return defaultTranslations[messageId];
 };
-
-/**
- * Message ids that will be passed to translateWithId().
- */
-
-function translateWithId(messageId) {
-  return translationIds[messageId];
-}
 
 // https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state
 function usePrevious(value) {
@@ -92,7 +94,7 @@ function PaginationItem({
   page,
   isActive,
   onClick,
-  translateWithId: t = translateWithId
+  translateWithId: t = defaultTranslateWithId
 }) {
   const prefix = usePrefix.usePrefix();
   const itemLabel = t('carbon.pagination-nav.item');
@@ -115,7 +117,7 @@ function PaginationOverflow({
   count = NaN,
   onSelect,
   disableOverflow,
-  translateWithId: t = translateWithId
+  translateWithId: t = defaultTranslateWithId
 }) {
   const prefix = usePrefix.usePrefix();
 
@@ -182,7 +184,7 @@ const PaginationNav = /*#__PURE__*/React.forwardRef(({
   size = 'lg',
   tooltipAlignment,
   tooltipPosition,
-  translateWithId: t = translateWithId,
+  translateWithId: t = defaultTranslateWithId,
   ...rest
 }, ref) => {
   const smMediaQuery = `(max-width: ${layout.breakpoints.sm.width})`;
@@ -383,8 +385,7 @@ PaginationItem.propTypes = {
    */
   page: PropTypes.number,
   /**
-   * Specify a custom translation function that takes in a message identifier
-   * and returns the localized string for the message
+   * Translates component strings using your i18n tool.
    */
   translateWithId: PropTypes.func
 };
@@ -402,8 +403,7 @@ PaginationOverflow.propTypes = {
    */
   onSelect: PropTypes.func,
   /**
-   * Specify a custom translation function that takes in a message identifier
-   * and returns the localized string for the message
+   * Translates component strings using your i18n tool.
    */
   translateWithId: PropTypes.func
 };
@@ -453,8 +453,7 @@ PaginationNav.propTypes = {
    */
   totalItems: PropTypes.number,
   /**
-   * Specify a custom translation function that takes in a message identifier
-   * and returns the localized string for the message
+   * Translates component strings using your i18n tool.
    */
   translateWithId: PropTypes.func
 };

package/lib/components/Popover/index.js

@@ -50,10 +50,10 @@ const Popover = /*#__PURE__*/React.forwardRef(function PopoverRenderFunction({
   open,
   alignmentAxisOffset,
   ...rest
-  // 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
 },
 //this is a workaround, have to come back and fix this.
-// 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
 forwardRef) {
   const prefix = usePrefix.usePrefix();
   const floating = React.useRef(null);
@@ -96,9 +96,9 @@ forwardRef) {
   // we look to see if any of the children has a className containing "slug"
   const initialCaretHeight = React.Children.toArray(children).some(x => {
     return (
-      // 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
       x?.props?.className?.includes('slug') ||
-      // 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
       x?.props?.className?.includes('ai-label')
     );
   }) ? 7 : 6;
@@ -219,7 +219,7 @@ forwardRef) {
     [`${prefix}--popover--tab-tip`]: isTabTip
   }, customClassName);
   const mappedChildren = React.Children.map(children, child => {
-    // 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 item = child;
     const displayName = item?.type?.displayName;
 
@@ -234,13 +234,13 @@ forwardRef) {
     const isTriggerComponent = enableFloatingStyles && displayName && ['ToggletipButton'].includes(displayName);
     const isAllowedTriggerComponent = enableFloatingStyles && !['ToggletipContent', 'PopoverContent'].includes(displayName);
     if (/*#__PURE__*/React.isValidElement(item) && (isTriggerElement || isTriggerComponent || isAllowedTriggerComponent)) {
-      // 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 className = item?.props?.className;
-      // 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 ref = (item?.props).ref;
       const tabTipClasses = cx(`${prefix}--popover--tab-tip__button`, className);
 
-      // 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 /*#__PURE__*/React.cloneElement(item, {
         className: isTabTip && item?.type === 'button' ? tabTipClasses : className || '',
         // With cloneElement, if you pass a `ref`, it overrides the original ref.

package/lib/components/ProgressBar/ProgressBar.js

@@ -59,7 +59,7 @@ function ProgressBar({
   });
   let StatusIcon = null;
   if (isError) {
-    // 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
     StatusIcon = /*#__PURE__*/React.forwardRef((props, ref) => {
       return /*#__PURE__*/React.createElement(iconsReact.ErrorFilled, _rollupPluginBabelHelpers.extends({
         ref: ref,
@@ -67,7 +67,7 @@ function ProgressBar({
       }, props));
     });
   } else if (isFinished) {
-    // 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
     StatusIcon = /*#__PURE__*/React.forwardRef((props, ref) => {
       return /*#__PURE__*/React.createElement(iconsReact.CheckmarkFilled, _rollupPluginBabelHelpers.extends({
         ref: ref,

package/lib/components/ProgressIndicator/ProgressIndicator.d.ts

@@ -1,22 +1,19 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 import PropTypes from 'prop-types';
 import React from 'react';
-import { TranslateWithId } from '../../types/common';
-declare const defaultTranslations: {
-    readonly 'carbon.progress-step.complete': "Complete";
-    readonly 'carbon.progress-step.incomplete': "Incomplete";
-    readonly 'carbon.progress-step.current': "Current";
-    readonly 'carbon.progress-step.invalid': "Invalid";
+import type { TranslateWithId } from '../../types/common';
+declare const translationIds: {
+    readonly 'carbon.progress-step.complete': "carbon.progress-step.complete";
+    readonly 'carbon.progress-step.incomplete': "carbon.progress-step.incomplete";
+    readonly 'carbon.progress-step.current': "carbon.progress-step.current";
+    readonly 'carbon.progress-step.invalid': "carbon.progress-step.invalid";
 };
-/**
- * Message ids that will be passed to translateWithId().
- */
-type TranslationKey = keyof typeof defaultTranslations;
+type TranslationKey = keyof typeof translationIds;
 export interface ProgressIndicatorProps extends Omit<React.HTMLAttributes<HTMLUListElement>, 'onChange'> {
     /**
      * Provide `<ProgressStep>` components to be rendered in the
@@ -32,7 +29,7 @@ export interface ProgressIndicatorProps extends Omit<React.HTMLAttributes<HTMLUL
      */
     currentIndex?: number;
     /**
-     * Optional callback called if a ProgressStep is clicked on.  Returns the index of the step.
+     * Optional callback called if a ProgressStep is clicked on. Returns the index of the step.
      */
     onChange?: (data: number) => void;
     /**
@@ -61,7 +58,7 @@ declare namespace ProgressIndicator {
          */
         currentIndex: PropTypes.Requireable<number>;
         /**
-         * Optional callback called if a ProgressStep is clicked on.  Returns the index of the step.
+         * Optional callback called if a ProgressStep is clicked on. Returns the index of the step.
          */
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
         /**
@@ -176,8 +173,7 @@ declare namespace ProgressStep {
          */
         tooltipId: PropTypes.Requireable<string>;
         /**
-         * Optional method that takes in a message id and returns an
-         * internationalized string.
+         * Translates component strings using your i18n tool.
          */
         translateWithId: PropTypes.Requireable<(...args: any[]) => any>;
     };

package/lib/components/ProgressIndicator/ProgressIndicator.js

@@ -18,20 +18,21 @@ var usePrefix = require('../../internal/usePrefix.js');
 var Text = require('../Text/Text.js');
 require('../Text/TextDirection.js');
 
+const translationIds = {
+  'carbon.progress-step.complete': 'carbon.progress-step.complete',
+  'carbon.progress-step.incomplete': 'carbon.progress-step.incomplete',
+  'carbon.progress-step.current': 'carbon.progress-step.current',
+  'carbon.progress-step.invalid': 'carbon.progress-step.invalid'
+};
 const defaultTranslations = {
-  'carbon.progress-step.complete': 'Complete',
-  'carbon.progress-step.incomplete': 'Incomplete',
-  'carbon.progress-step.current': 'Current',
-  'carbon.progress-step.invalid': 'Invalid'
+  [translationIds['carbon.progress-step.complete']]: 'Complete',
+  [translationIds['carbon.progress-step.incomplete']]: 'Incomplete',
+  [translationIds['carbon.progress-step.current']]: 'Current',
+  [translationIds['carbon.progress-step.invalid']]: 'Invalid'
 };
-
-/**
- * Message ids that will be passed to translateWithId().
- */
-
-function translateWithId(messageId) {
+const defaultTranslateWithId = messageId => {
   return defaultTranslations[messageId];
-}
+};
 function ProgressIndicator({
   children,
   className: customClassName,
@@ -103,7 +104,7 @@ ProgressIndicator.propTypes = {
    */
   currentIndex: PropTypes.number,
   /**
-   * Optional callback called if a ProgressStep is clicked on.  Returns the index of the step.
+   * Optional callback called if a ProgressStep is clicked on. Returns the index of the step.
    */
   onChange: PropTypes.func,
   /**
@@ -125,7 +126,7 @@ function ProgressStep({
   secondaryLabel,
   disabled,
   onClick,
-  translateWithId: t = translateWithId,
+  translateWithId: t = defaultTranslateWithId,
   ...rest
 }) {
   const prefix = usePrefix.usePrefix();
@@ -255,8 +256,7 @@ ProgressStep.propTypes = {
    */
   tooltipId: PropTypes.string,
   /**
-   * Optional method that takes in a message id and returns an
-   * internationalized string.
+   * Translates component strings using your i18n tool.
    */
   translateWithId: PropTypes.func
 };

package/lib/components/RadioButton/RadioButton.js

@@ -57,7 +57,7 @@ const RadioButton = /*#__PURE__*/React.forwardRef((props, ref) => {
   const candidateIsAILabel = utils.isComponentElement(candidate, index.AILabel);
   const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/React.cloneElement(candidate, {
     size: candidate.props?.['kind'] === 'inline' ? 'md' : 'mini'
-  }) : null;
+  }) : candidate;
   return /*#__PURE__*/React.createElement("div", {
     className: wrapperClasses
   }, /*#__PURE__*/React.createElement("input", _rollupPluginBabelHelpers.extends({}, rest, {

package/lib/components/RadioButtonGroup/RadioButtonGroup.js

@@ -114,7 +114,7 @@ const RadioButtonGroup = /*#__PURE__*/React.forwardRef((props, ref) => {
   const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/React.cloneElement(candidate, {
     size: 'mini',
     kind: 'default'
-  }) : null;
+  }) : candidate;
   return /*#__PURE__*/React.createElement("div", {
     className: wrapperClasses,
     ref: mergeRefs.mergeRefs(divRef, ref)

package/lib/components/RadioTile/RadioTile.js

@@ -82,7 +82,7 @@ const RadioTile = /*#__PURE__*/React.forwardRef(({
   const candidateIsAILabel = utils.isComponentElement(candidate, index$1.AILabel);
   const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/React.cloneElement(candidate, {
     size: 'xs'
-  }) : null;
+  }) : candidate;
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("input", {
     checked: checked,
     className: `${prefix}--tile-input`,