@carbon/react 1.92.1 → 1.93.0

package/es/components/UIShell/SwitcherItem.js

@@ -69,7 +69,7 @@ const SwitcherItem = /*#__PURE__*/forwardRef((props, forwardRef) => {
     href: href,
     target: target,
     rel: rel
-    // 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: forwardRef
   }, rest, {

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/CodeSnippet/CodeSnippet.js

@@ -64,8 +64,6 @@ function CodeSnippet({
   const codeContentRef = React.useRef(null);
   const codeContainerRef = React.useRef(null);
   const innerCodeRef = React.useRef(null);
-  const [hasLeftOverflow, setHasLeftOverflow] = React.useState(false);
-  const [hasRightOverflow, setHasRightOverflow] = React.useState(false);
   const getCodeRef = React.useCallback(() => {
     if (type === 'single') {
       return codeContainerRef;
@@ -77,39 +75,13 @@ function CodeSnippet({
     }
   }, [type]);
   const prefix = usePrefix.usePrefix();
-  const getCodeRefDimensions = React.useCallback(() => {
-    const {
-      clientWidth: codeClientWidth = 0,
-      scrollLeft: codeScrollLeft = 0,
-      scrollWidth: codeScrollWidth = 0
-    } = getCodeRef().current || {};
-    return {
-      horizontalOverflow: codeScrollWidth > codeClientWidth,
-      codeClientWidth,
-      codeScrollWidth,
-      codeScrollLeft
-    };
-  }, [getCodeRef]);
-  const handleScroll = React.useCallback(() => {
-    if (type === 'inline' || type === 'single' && !codeContainerRef?.current || type === 'multi' && !codeContentRef?.current) {
-      return;
-    }
-    const {
-      horizontalOverflow,
-      codeClientWidth,
-      codeScrollWidth,
-      codeScrollLeft
-    } = getCodeRefDimensions();
-    setHasLeftOverflow(horizontalOverflow && !!codeScrollLeft);
-    setHasRightOverflow(horizontalOverflow && codeScrollLeft + codeClientWidth !== codeScrollWidth);
-  }, [type, getCodeRefDimensions]);
   useResizeObserver.useResizeObserver({
     ref: getCodeRef(),
     onResize: () => {
-      if (codeContentRef?.current && type === 'multi') {
+      if (innerCodeRef?.current && type === 'multi') {
         const {
           height
-        } = codeContentRef.current.getBoundingClientRect();
+        } = innerCodeRef.current.getBoundingClientRect();
         if (maxCollapsedNumberOfRows > 0 && (maxExpandedNumberOfRows <= 0 || maxExpandedNumberOfRows > maxCollapsedNumberOfRows) && height > maxCollapsedNumberOfRows * rowHeightInPixels) {
           setShouldShowMoreLessBtn(true);
         } else {
@@ -119,14 +91,8 @@ function CodeSnippet({
           setExpandedCode(false);
         }
       }
-      if (codeContentRef?.current && type === 'multi' || codeContainerRef?.current && type === 'single') {
-        handleScroll();
-      }
     }
   });
-  React.useEffect(() => {
-    handleScroll();
-  }, [handleScroll]);
   const handleCopyClick = evt => {
     if (copyText || innerCodeRef?.current) {
       copy(copyText ?? innerCodeRef?.current?.innerText ?? '');
@@ -141,8 +107,7 @@ function CodeSnippet({
     [`${prefix}--snippet--expand`]: expandedCode,
     [`${prefix}--snippet--light`]: light,
     [`${prefix}--snippet--no-copy`]: hideCopyButton,
-    [`${prefix}--snippet--wraptext`]: wrapText,
-    [`${prefix}--snippet--has-right-overflow`]: type == 'multi' && hasRightOverflow
+    [`${prefix}--snippet--wraptext`]: wrapText
   });
   const expandCodeBtnText = expandedCode ? showLessText : showMoreText;
   if (type === 'inline') {
@@ -200,18 +165,12 @@ function CodeSnippet({
     className: `${prefix}--snippet-container`,
     "aria-label": deprecatedAriaLabel || ariaLabel || 'code-snippet',
     "aria-readonly": type === 'single' || type === 'multi' ? true : undefined,
-    "aria-multiline": type === 'multi' ? true : undefined,
-    onScroll: type === 'single' && handleScroll || undefined
-  }, containerStyle), /*#__PURE__*/React.createElement("pre", {
-    ref: codeContentRef,
-    onScroll: type === 'multi' && handleScroll || undefined
-  }, /*#__PURE__*/React.createElement("code", {
+    "aria-multiline": type === 'multi' ? true : undefined
+  }, containerStyle), /*#__PURE__*/React.createElement("pre", _rollupPluginBabelHelpers.extends({
+    ref: codeContentRef
+  }, containerStyle), /*#__PURE__*/React.createElement("code", {
     ref: innerCodeRef
-  }, children))), hasLeftOverflow && /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}--snippet__overflow-indicator--left`
-  }), hasRightOverflow && type !== 'multi' && /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}--snippet__overflow-indicator--right`
-  }), !hideCopyButton && /*#__PURE__*/React.createElement(CopyButton.default, {
+  }, children))), !hideCopyButton && /*#__PURE__*/React.createElement(CopyButton.default, {
     align: align,
     autoAlign: autoAlign,
     size: type === 'multi' ? 'sm' : 'md',

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