@carbon/react 1.92.1 → 1.93.0-rc.0

package/es/index.d.ts

@@ -245,7 +245,7 @@ export type { ListBoxFieldProps } from './components/ListBox/ListBoxField';
 export type { ListBoxMenuProps } from './components/ListBox/ListBoxMenu';
 export type { ListBoxMenuItemProps } from './components/ListBox/ListBoxMenuItem';
 export type { ListBoxMenuIconProps } from './components/ListBox/ListBoxMenuIcon';
-export type { ListBoxMenuIconTranslationKey } from './components/ListBox/ListBoxMenuIcon';
+export type { ListBoxMenuIconTranslationKey, ListBoxSelectionTranslationKey, } from './components/ListBox';
 export type { ListBoxMenuIconComponent } from './components/ListBox/ListBoxMenuIcon';
 export type { ListBoxSelectionProps } from './components/ListBox/ListBoxSelection';
 export type { ListItemProps } from './components/ListItem/ListItem';

package/es/internal/FloatingMenu.js

@@ -198,7 +198,7 @@ const FloatingMenu = ({
       }
       placeInProgressRef.current = false;
     }
-    // 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
   }, [floatingPosition, onPlace]);
 
   // Attach a resize listener.
@@ -209,13 +209,13 @@ const FloatingMenu = ({
     return () => {
       resizeHandler.remove();
     };
-    // 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
   }, [triggerRef, menuOffset, menuDirection, flipped, target, updateOrientation]);
 
   // Update menu position when key props change.
   useEffect(() => {
     updateMenuPosition();
-    // 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
   }, [menuOffset, menuDirection, flipped, triggerRef, target, updateOrientation]);
 
   /**
@@ -279,7 +279,7 @@ const FloatingMenu = ({
     const portalTarget = target ? target() : document.body;
     return /*#__PURE__*/ReactDOM.createPortal(
     /*#__PURE__*/
-    // eslint-disable-next-line  jsx-a11y/no-static-element-interactions  -- https://github.com/carbon-design-system/carbon/issues/20071
+    // eslint-disable-next-line  jsx-a11y/no-static-element-interactions  -- https://github.com/carbon-design-system/carbon/issues/20452
     React.createElement("div", {
       onBlur: focusTrap && !focusTrapWithoutSentinels ? handleBlur : undefined,
       onKeyDown: focusTrapWithoutSentinels ? handleKeyDown : undefined

package/es/internal/Selection.js

@@ -42,7 +42,7 @@ const useSelection = ({
   const savedOnChange = useRef(onChange);
   const [uncontrolledItems, setUncontrolledItems] = useState(initialSelectedItems);
   const isControlled = !!controlledItems;
-  // 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 selectedItems = isControlled ? controlledItems : uncontrolledItems;
   const onItemChange = useCallback(item => {
     if (disabled) return;
@@ -50,20 +50,20 @@ const useSelection = ({
     // Assert special properties (e.g., `disabled`, `isSelectAll`, etc.) are
     // `any` since those properties aren’t part of the generic type.
     const allSelectableItems = filteredItems.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 && !item?.isSelectAll);
     const disabledItemCount = filteredItems.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).length;
     let newSelectedItems;
 
     // deselect all on click to All/indeterminate option
-    // 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 && selectedItems.length > 0) {
       newSelectedItems = [];
     }
     // select all options
-    // 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
     else if (item?.isSelectAll && selectedItems.length === 0) {
       newSelectedItems = allSelectableItems;
     } else {
@@ -77,7 +77,7 @@ const useSelection = ({
       } else {
         newSelectedItems = removeAtIndex(selectedItems, selectedIndex);
         newSelectedItems = newSelectedItems.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);
       }
     }

package/es/internal/useMergedRefs.js

@@ -16,7 +16,7 @@ import { useMemo, useCallback } from 'react';
  * node, assigns that node to every ref in the array.
  */
 const useMergedRefs = refs => {
-  // 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
   const memoizedRefs = useMemo(() => refs, refs);
   return useCallback(node => {
     memoizedRefs.forEach(ref => {

package/es/internal/useNoInteractiveChildren.js

@@ -14,16 +14,16 @@ const useNoInteractiveChildren = (ref, message = 'component should have no inter
     /*
     // eslint-disable-next-line react-hooks/rules-of-hooks
     */
-    // 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
     useEffect(() => {
       const node = ref.current ? getInteractiveContent(ref.current) : false;
       if (node) {
         const errorMessage = `Error: ${message}.\n\nInstead found: ${node.outerHTML}`;
-        // eslint-disable-next-line no-console -- https://github.com/carbon-design-system/carbon/issues/20071
+        // eslint-disable-next-line no-console -- https://github.com/carbon-design-system/carbon/issues/20452
         console.error(errorMessage);
         throw new Error(errorMessage);
       }
-      // 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
     }, []);
   }
 };
@@ -34,7 +34,7 @@ const useInteractiveChildrenNeedDescription = (ref, message = `interactive child
     /*
     // eslint-disable-next-line react-hooks/rules-of-hooks
     */
-    // 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
     useEffect(() => {
       const node = ref.current ? getInteractiveContent(ref.current) : false;
       if (node && !node.hasAttribute('aria-describedby')) {

package/es/internal/useOutsideClick.js

@@ -23,7 +23,7 @@ const useOutsideClick = (ref, callback) => {
     /*
     // eslint-disable-next-line react-hooks/rules-of-hooks
     */
-    // 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
     useWindowEvent('click', event => {
       const {
         target

package/es/internal/useOverflowItems.js

@@ -36,7 +36,7 @@ const useOverflowItems = (items, containerRef, offsetRef, maxItems, onChange) =>
       setMaxWidth(newMax);
     }
   };
-  // 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
   useResizeObserver({
     ref: containerRef,
     onResize: handleResize
@@ -86,17 +86,17 @@ const useOverflowItems = (items, containerRef, offsetRef, maxItems, onChange) =>
   };
 
   // Memoize visible items calculation to avoid recalculating on every render
-  // 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 visibleItems = useMemo(() => {
     if (!Array.isArray(items)) {
       return [];
     }
     return getVisibleItems();
-    // 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, maxWidth, maxItems]);
 
   // Memoize hidden items calculation
-  // 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 hiddenItems = useMemo(() => {
     if (!Array.isArray(items)) {
       return [];
@@ -105,11 +105,11 @@ const useOverflowItems = (items, containerRef, offsetRef, maxItems, onChange) =>
   }, [items, visibleItems]);
 
   // Use previous value to compare and only call onChange when needed
-  // 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 previousHiddenItems = usePreviousValue(hiddenItems);
 
   // Only call onChange if hidden items actually changed
-  // 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
   useEffect(() => {
   }, [hiddenItems, previousHiddenItems, onChange]);
   return {

package/es/internal/useResizeObserver.js

@@ -35,7 +35,7 @@ const useResizeObserver = ({
       return;
     }
     getInitialSize();
-    // 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
   }, [width, height]);
   useLayoutEffect(() => {
     if (!ref?.current) {
@@ -49,7 +49,7 @@ const useResizeObserver = ({
       setWidth(entry.contentRect.width);
       setHeight(entry.contentRect.height);
 
-      // 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
       cb.current && cb.current(entry.contentRect);
     };
     const observer = new ResizeObserver(entries => {
@@ -66,7 +66,7 @@ const useResizeObserver = ({
     return () => {
       observer.disconnect();
     };
-    // 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 {
     width,

package/es/internal/useSavedCallback.js

@@ -15,7 +15,7 @@ import { useRef, useEffect, useCallback } from 'react';
  *
  * @param callback - The callback to track.
  */
-// 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 useSavedCallback = callback => {
   const savedCallback = useRef(callback);
   useEffect(() => {

package/es/internal/warning.js

@@ -22,7 +22,7 @@ const warning = process.env.NODE_ENV !== 'production' ? (condition, message) =>
     throw new Error('`warning(condition, message)` requires a warning ' + 'format argument');
   }
   if (!condition) {
-    // eslint-disable-next-line no-console -- https://github.com/carbon-design-system/carbon/issues/20071
+    // eslint-disable-next-line no-console -- https://github.com/carbon-design-system/carbon/issues/20452
     console.warn('Warning: ' + message);
   }
 } : noopFn;

package/es/prop-types/isRequiredOneOf.js

@@ -13,11 +13,11 @@
  *    are the names of the props, and the values are the prop-type validators.
  * @returns A new object of wrapped prop-type validators.
  */
-// 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 isRequiredOneOf = propTypes => {
   const names = Object.keys(propTypes);
   const checker = propType =>
-  // eslint-disable-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
+  // eslint-disable-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
   (props, propName, componentName, ...rest) => {
     if (process.env.NODE_ENV !== 'production' && names.every(name => typeof props[name] === 'undefined')) {
       return new Error(`${componentName} requires one of the following props: ${names.join(', ')}`);

package/es/tools/events.js

@@ -15,7 +15,7 @@
  * @returns A composite event handler.
  */
 const composeEventHandlers = handlers =>
-// 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
 (event, ...args) => {
   for (const handler of handlers) {
     if (event.defaultPrevented) {

package/es/tools/wrapComponent.js

@@ -42,7 +42,7 @@ const wrapComponent = ({
   Component.propTypes = {
     className: PropTypes.string
   };
-  // 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 Component;
 };
 

package/es/types/common.d.ts

@@ -13,8 +13,12 @@ export type PolymorphicProps<Element extends React.ElementType, Props> = Props &
 };
 export interface TranslateWithId<MID = string, ARGS = Record<string, unknown>> {
     /**
-     * Supply a method to translate internal strings with your i18n tool of
-     * choice.
+     * Translates component strings using your i18n tool.
+     *
+     * @param messageId - The translation ID for the string to translate.
+     * @param [args] - Arguments for string interpolation.
+     * @returns The translated string.
      */
     translateWithId?(messageId: MID, args?: ARGS): string;
 }
+export type TFunc<K, A = Record<string, unknown>> = NonNullable<TranslateWithId<K, A>['translateWithId']>;

package/lib/components/AILabel/index.js

@@ -22,18 +22,18 @@ var _Undo;
 const AILabelContent = /*#__PURE__*/React.forwardRef(function AILabelContent({
   className,
   children
-}, ref // eslint-disable-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20071
+}, ref // eslint-disable-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20452
 ) {
   const prefix = usePrefix.usePrefix();
   const hasAILabelActions = React.Children.toArray(children).some(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;
     // TODO: Is there supposed to be a `return` here? If so, this issue would
     // have been caught by ESLint. It's concerning that this code is 7 months
     // old and no one has noticed any issues with it. It also makes me question
     // whether the code is necessary.
     // https://github.com/carbon-design-system/carbon/issues/18991
-    // 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
     item.type === AILabelActions;
   });
   const aiLabelContentClasses = cx(className, {
@@ -58,7 +58,7 @@ AILabelContent.propTypes = {
 const AILabelActions = /*#__PURE__*/React.forwardRef(function AILabelActions({
   className,
   children
-}, ref // eslint-disable-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20071
+}, ref // eslint-disable-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20452
 ) {
   const prefix = usePrefix.usePrefix();
   const aiLabelActionsClasses = cx(className, {

package/lib/components/Breadcrumb/BreadcrumbItem.js

@@ -38,7 +38,7 @@ const BreadcrumbItem = frFn((props, ref) => {
     [customClassName]: !!customClassName
   });
 
-  // 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 child = children;
   if (child.type && child.type.displayName !== undefined && child.type.displayName.includes('OverflowMenu')) {
     const horizontalOverflowIcon = /*#__PURE__*/React.createElement(iconsReact.OverflowMenuHorizontal, {

package/lib/components/Button/Button.js

@@ -26,7 +26,7 @@ function isIconOnlyButton(hasIconOnly, _kind) {
   return false;
 }
 
-// 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 Button = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     as,
@@ -49,7 +49,7 @@ const Button = /*#__PURE__*/React.forwardRef((props, ref) => {
     ...rest
   } = props;
   if (ButtonImageElement && !children && !iconDescription) {
-    // eslint-disable-next-line no-console -- https://github.com/carbon-design-system/carbon/issues/20071
+    // eslint-disable-next-line no-console -- https://github.com/carbon-design-system/carbon/issues/20452
     console.error('Button: renderIcon property specified without also providing an iconDescription property. ' + 'This may impact accessibility for screen reader users.');
   }
   const iconOnlyImage = !ButtonImageElement ? null : /*#__PURE__*/React.createElement(ButtonImageElement, null);

package/lib/components/ChatButton/ChatButton.js

@@ -42,7 +42,7 @@ const ChatButton = /*#__PURE__*/React.forwardRef(function ChatButton({
   } else {
     // Check if size is valid and warn if not
     if (size && !allowedSizes.includes(size)) {
-      // eslint-disable-next-line no-console -- https://github.com/carbon-design-system/carbon/issues/20071
+      // eslint-disable-next-line no-console -- https://github.com/carbon-design-system/carbon/issues/20452
       console.error(`Invalid size "${size}" provided to ChatButton. Size must be one of: ${allowedSizes.join(', ')}. Defaulting to "lg".`);
       size = 'lg';
     }

package/lib/components/Checkbox/Checkbox.js

@@ -65,7 +65,7 @@ const Checkbox = /*#__PURE__*/React.forwardRef(({
   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({}, other, {

package/lib/components/CheckboxGroup/CheckboxGroup.js

@@ -62,7 +62,7 @@ const CheckboxGroup = ({
   const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/React.cloneElement(candidate, {
     size: 'mini',
     kind: 'default'
-  }) : null;
+  }) : candidate;
   const clonedChildren = React.Children.map(children, child => {
     if (/*#__PURE__*/React.isValidElement(child) && child.type === Checkbox.default) {
       const childProps = {

package/lib/components/ComboBox/ComboBox.d.ts

@@ -6,23 +6,15 @@
  */
 import { UseComboboxProps, UseComboboxActions } from 'downshift';
 import React, { type ComponentType, type InputHTMLAttributes, type MouseEvent, type PropsWithChildren, type PropsWithRef, type ReactElement, type ReactNode, type RefAttributes } from 'react';
-import { type ListBoxSize } from '../ListBox';
-import { TranslateWithId } from '../../types/common';
+import { type ListBoxMenuIconTranslationKey, type ListBoxSelectionTranslationKey, type ListBoxSize } from '../ListBox';
+import type { TranslateWithId } from '../../types/common';
 type ExcludedAttributes = 'id' | 'onChange' | 'onClick' | 'type' | 'size';
 export interface OnChangeData<ItemType> {
     selectedItem: ItemType | null | undefined;
     inputValue?: string | null;
 }
-/**
- * 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".)
- */
-export type TranslationKey = 'close.menu' | 'open.menu' | 'clear.all' | 'clear.selection';
 export type ItemToStringHandler<ItemType> = (item: ItemType | null) => string;
-export interface ComboBoxProps<ItemType> extends Omit<InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes>, TranslateWithId<TranslationKey> {
+export interface ComboBoxProps<ItemType> extends Omit<InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes>, TranslateWithId<ListBoxMenuIconTranslationKey | ListBoxSelectionTranslationKey> {
     /**
      * Specify whether or not the ComboBox should allow a value that is
      * not in the list to be entered in the input

package/lib/components/ComboBox/ComboBox.js

@@ -97,15 +97,6 @@ const findHighlightedIndex = ({
   }
   return -1;
 };
-
-/**
- * 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 ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
   const prevInputLengthRef = React.useRef(0);
   const inputRef = React.useRef(null);
@@ -173,7 +164,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
         refs.floating.current.style.width = parentWidth + 'px';
       }
     }
-    // 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
   }, [enableFloatingStyles, floatingStyles, refs.floating, parentWidth]);
   const [inputValue, setInputValue] = React.useState(getInputValue({
     initialSelectedItem,
@@ -203,7 +194,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
       }
       prevInputLengthRef.current = inputValue.length;
     }
-    // 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
   }, [typeahead, inputValue, items, itemToString, autocompleteCustomFilter]);
   const isManualClearingRef = React.useRef(false);
   const [isClearing, setIsClearing] = React.useState(false);
@@ -244,7 +235,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
       }
       prevSelectedItemProp.current = selectedItemProp;
     }
-    // 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
   }, [selectedItemProp]);
   const filterItems = (items, itemToString, inputValue) => items.filter(item => typeahead ? autocompleteCustomFilter({
     item: itemToString(item),
@@ -259,10 +250,10 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
   React.useEffect(() => {
     if (prevInputValue.current !== inputValue) {
       prevInputValue.current = inputValue;
-      // 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
       onInputChange && onInputChange(inputValue);
     }
-    // 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
   }, [inputValue]);
   const handleSelectionClear = () => {
     if (textInput?.current) {
@@ -331,7 +322,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
             const filteredList = filterItems(items, itemToString, inputValue);
             const highlightedItem = filteredList[state.highlightedIndex];
 
-            // 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 (highlightedItem && !highlightedItem.disabled) {
               return {
                 ...changes,
@@ -344,7 +335,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
             if (autoIndex !== -1) {
               const matchingItem = items[autoIndex];
 
-              // 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 (matchingItem && !matchingItem.disabled) {
                 return {
                   ...changes,
@@ -462,7 +453,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
   const candidateIsAILabel = utils.isComponentElement(candidate, index$1.AILabel);
   const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/React.cloneElement(candidate, {
     size: 'mini'
-  }) : null;
+  }) : candidate;
   const {
     // Prop getters
     getInputProps,
@@ -498,10 +489,10 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     onHighlightedIndexChange: ({
       highlightedIndex
     }) => {
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion , valid-typeof , no-constant-binary-expression -- https://github.com/carbon-design-system/carbon/issues/20071
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion , valid-typeof , no-constant-binary-expression -- https://github.com/carbon-design-system/carbon/issues/20452
       if (highlightedIndex > -1 && typeof window !== undefined) {
         const itemArray = document.querySelectorAll(`li.${prefix}--list-box__menu-item[role="option"]`);
-        // 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 highlightedItem = itemArray[highlightedIndex];
         if (highlightedItem) {
           highlightedItem.scrollIntoView({
@@ -514,9 +505,9 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     initialSelectedItem: initialSelectedItem,
     inputId: id,
     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;
     },
     ...downshiftProps,
@@ -553,7 +544,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
         toggleMenu
       };
     }
-    // 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
   }, [closeMenu, openMenu, reset, selectItem, setHighlightedIndex, downshiftSetInputValue, toggleMenu]);
   const buttonProps = getToggleButtonProps({
     disabled: disabled || readOnly,
@@ -603,7 +594,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
   const menuProps = React.useMemo(() => getMenuProps({
     ref: enableFloatingStyles ? refs.setFloating : 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
   [enableFloatingStyles, deprecatedAriaLabel, ariaLabel, getMenuProps, refs.setFloating]);
   React.useEffect(() => {
     if (textInput.current) {
@@ -937,8 +928,7 @@ ComboBox.propTypes = {
    */
   titleText: PropTypes.node,
   /**
-   * 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/ComboButton/index.d.ts

@@ -9,14 +9,11 @@ import { IconButton } from '../IconButton';
 import Button from '../Button';
 import { Menu } from '../Menu';
 import { MenuAlignment } from '../MenuButton';
-import { TranslateWithId } from '../../types/common';
-declare const defaultTranslations: {
-    'carbon.combo-button.additional-actions': string;
+import type { TranslateWithId } from '../../types/common';
+declare const translationIds: {
+    readonly 'carbon.combo-button.additional-actions': "carbon.combo-button.additional-actions";
 };
-/**
- * Message ids that will be passed to translateWithId().
- */
-export type TranslationKey = keyof typeof defaultTranslations;
+type TranslationKey = keyof typeof translationIds;
 interface ComboButtonProps extends TranslateWithId<TranslationKey> {
     /**
      * A collection of `MenuItems` to be rendered as additional actions for this `ComboButton`.
@@ -45,7 +42,7 @@ interface ComboButtonProps extends TranslateWithId<TranslationKey> {
     /**
      * Specify the size of the buttons and menu.
      */
-    size?: 'sm' | 'md' | 'lg';
+    size?: 'xs' | 'sm' | 'md' | 'lg';
     /**
      * Specify how the trigger tooltip should be aligned.
      */

package/lib/components/ComboButton/index.js

@@ -27,17 +27,15 @@ var deprecateValuesWithin = require('../../prop-types/deprecateValuesWithin.js')
 var mapPopoverAlign = require('../../tools/mapPopoverAlign.js');
 
 var _ChevronDown;
+const translationIds = {
+  'carbon.combo-button.additional-actions': 'carbon.combo-button.additional-actions'
+};
 const defaultTranslations = {
-  'carbon.combo-button.additional-actions': 'Additional actions'
+  [translationIds['carbon.combo-button.additional-actions']]: 'Additional actions'
 };
-
-/**
- * Message ids that will be passed to translateWithId().
- */
-
-function defaultTranslateWithId(messageId) {
+const defaultTranslateWithId = messageId => {
   return defaultTranslations[messageId];
-}
+};
 const ComboButton = /*#__PURE__*/React.forwardRef(function ComboButton({
   children,
   className,
@@ -56,7 +54,7 @@ const ComboButton = /*#__PURE__*/React.forwardRef(function ComboButton({
   const id = useId.useId('combobutton');
   const prefix = usePrefix.usePrefix();
   const containerRef = React.useRef(null);
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
   let middlewares = [];
   if (!enableOnlyFloatingStyles) {
     middlewares = [react.flip({
@@ -188,7 +186,7 @@ ComboButton.propTypes = {
   /**
    * Specify the size of the buttons and menu.
    */
-  size: PropTypes.oneOf(['sm', 'md', 'lg']),
+  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
   /**
    * Specify how the trigger tooltip should be aligned.
    */
@@ -215,8 +213,7 @@ ComboButton.propTypes = {
   // new values to match floating-ui
   'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-end', 'left-start', 'right-end', 'right-start']), ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end'], mapPopoverAlign.mapPopoverAlign),
   /**
-   * Optional method that takes in a message id and returns an
-   * internationalized string.
+   * Translates component strings using your i18n tool.
    */
   translateWithId: PropTypes.func
 };