@carbon/react 1.92.1 → 1.93.0

package/es/components/AILabel/index.js

@@ -20,18 +20,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();
   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, {
@@ -56,7 +56,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();
   const aiLabelActionsClasses = cx(className, {

package/es/components/Breadcrumb/BreadcrumbItem.js

@@ -34,7 +34,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(OverflowMenuHorizontal, {

package/es/components/Button/Button.js

@@ -22,7 +22,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,
@@ -45,7 +45,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/es/components/ChatButton/ChatButton.js

@@ -38,7 +38,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/es/components/Checkbox/Checkbox.js

@@ -61,7 +61,7 @@ const Checkbox = /*#__PURE__*/React.forwardRef(({
   const candidateIsAILabel = isComponentElement(candidate, AILabel);
   const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/cloneElement(candidate, {
     size: candidate.props.kind === 'inline' ? 'md' : 'mini'
-  }) : null;
+  }) : candidate;
   return /*#__PURE__*/React.createElement("div", {
     className: wrapperClasses
   }, /*#__PURE__*/React.createElement("input", _extends({}, other, {

package/es/components/CheckboxGroup/CheckboxGroup.js

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

package/es/components/CodeSnippet/CodeSnippet.js

@@ -7,7 +7,7 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React, { useState, useRef, useCallback, useEffect } from 'react';
+import React, { useState, useRef, useCallback } from 'react';
 import cx from 'classnames';
 import { useResizeObserver } from '../../internal/useResizeObserver.js';
 import { ChevronDown } from '@carbon/icons-react';
@@ -60,8 +60,6 @@ function CodeSnippet({
   const codeContentRef = useRef(null);
   const codeContainerRef = useRef(null);
   const innerCodeRef = useRef(null);
-  const [hasLeftOverflow, setHasLeftOverflow] = useState(false);
-  const [hasRightOverflow, setHasRightOverflow] = useState(false);
   const getCodeRef = useCallback(() => {
     if (type === 'single') {
       return codeContainerRef;
@@ -73,39 +71,13 @@ function CodeSnippet({
     }
   }, [type]);
   const prefix = usePrefix();
-  const getCodeRefDimensions = useCallback(() => {
-    const {
-      clientWidth: codeClientWidth = 0,
-      scrollLeft: codeScrollLeft = 0,
-      scrollWidth: codeScrollWidth = 0
-    } = getCodeRef().current || {};
-    return {
-      horizontalOverflow: codeScrollWidth > codeClientWidth,
-      codeClientWidth,
-      codeScrollWidth,
-      codeScrollLeft
-    };
-  }, [getCodeRef]);
-  const handleScroll = 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({
     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 {
@@ -115,14 +87,8 @@ function CodeSnippet({
           setExpandedCode(false);
         }
       }
-      if (codeContentRef?.current && type === 'multi' || codeContainerRef?.current && type === 'single') {
-        handleScroll();
-      }
     }
   });
-  useEffect(() => {
-    handleScroll();
-  }, [handleScroll]);
   const handleCopyClick = evt => {
     if (copyText || innerCodeRef?.current) {
       copy(copyText ?? innerCodeRef?.current?.innerText ?? '');
@@ -137,8 +103,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') {
@@ -196,18 +161,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", _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, {
+  }, children))), !hideCopyButton && /*#__PURE__*/React.createElement(CopyButton, {
     align: align,
     autoAlign: autoAlign,
     size: type === 'multi' ? 'sm' : 'md',

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

@@ -93,15 +93,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__*/forwardRef((props, ref) => {
   const prevInputLengthRef = useRef(0);
   const inputRef = useRef(null);
@@ -169,7 +160,7 @@ const ComboBox = /*#__PURE__*/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] = useState(getInputValue({
     initialSelectedItem,
@@ -199,7 +190,7 @@ const ComboBox = /*#__PURE__*/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 = useRef(false);
   const [isClearing, setIsClearing] = useState(false);
@@ -240,7 +231,7 @@ const ComboBox = /*#__PURE__*/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),
@@ -255,10 +246,10 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
   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) {
@@ -327,7 +318,7 @@ const ComboBox = /*#__PURE__*/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,
@@ -340,7 +331,7 @@ const ComboBox = /*#__PURE__*/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,
@@ -458,7 +449,7 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
   const candidateIsAILabel = isComponentElement(candidate, AILabel);
   const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/cloneElement(candidate, {
     size: 'mini'
-  }) : null;
+  }) : candidate;
   const {
     // Prop getters
     getInputProps,
@@ -494,10 +485,10 @@ const ComboBox = /*#__PURE__*/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({
@@ -510,9 +501,9 @@ const ComboBox = /*#__PURE__*/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,
@@ -549,7 +540,7 @@ const ComboBox = /*#__PURE__*/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,
@@ -599,7 +590,7 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
   const menuProps = 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]);
   useEffect(() => {
     if (textInput.current) {
@@ -933,8 +924,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/es/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/es/components/ComboButton/index.js

@@ -25,17 +25,15 @@ import { deprecateValuesWithin } from '../../prop-types/deprecateValuesWithin.js
 import { mapPopoverAlign } from '../../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,
@@ -54,7 +52,7 @@ const ComboButton = /*#__PURE__*/React.forwardRef(function ComboButton({
   const id = useId('combobutton');
   const prefix = usePrefix();
   const containerRef = 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 = [flip({
@@ -186,7 +184,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.
    */
@@ -213,8 +211,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),
   /**
-   * Optional method that takes in a message id and returns an
-   * internationalized string.
+   * Translates component strings using your i18n tool.
    */
   translateWithId: PropTypes.func
 };

package/es/components/ComposedModal/ComposedModal.js

@@ -6,13 +6,13 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React, { useRef, useState, useContext, useEffect, Children, cloneElement } from 'react';
+import React, { useRef, useContext, useEffect, Children, cloneElement } from 'react';
+import { useResizeObserver } from '../../internal/useResizeObserver.js';
 import { isElement } from 'react-is';
 import PropTypes from 'prop-types';
 import { Layer } from '../Layer/index.js';
 import { ModalHeader } from './ModalHeader.js';
 import { ModalFooter } from './ModalFooter.js';
-import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 import { mergeRefs } from '../../tools/mergeRefs.js';
 import cx from 'classnames';
 import { toggleClass } from '../../tools/toggleClass.js';
@@ -32,7 +32,6 @@ import { useMergeRefs } from '@floating-ui/react';
 import { ComposedModalPresenceContext, useExclusiveComposedModalPresenceContext, ComposedModalPresence } from './ComposedModalPresence.js';
 import { useId } from '../../internal/useId.js';
 import { useComposedModalState } from './useComposedModalState.js';
-import { debounce } from '../../node_modules/es-toolkit/dist/compat/function/debounce.js';
 
 const ModalBody = /*#__PURE__*/React.forwardRef(function ModalBody({
   className: customClassName,
@@ -43,28 +42,23 @@ const ModalBody = /*#__PURE__*/React.forwardRef(function ModalBody({
 }, ref) {
   const prefix = usePrefix();
   const contentRef = useRef(null);
-  const [isScrollable, setIsScrollable] = useState(false);
+  const {
+    height
+  } = useResizeObserver({
+    ref: contentRef
+  });
+
+  /**
+   * isScrollable is implicitly dependent on height, when height gets updated
+   * via `useResizeObserver`, clientHeight and scrollHeight get updated too
+   */
+  const isScrollable = !!contentRef.current && contentRef?.current?.scrollHeight > contentRef?.current?.clientHeight;
   const contentClass = cx({
     [`${prefix}--modal-content`]: true,
     [`${prefix}--modal-content--with-form`]: hasForm,
-    [`${prefix}--modal-scroll-content`]: hasScrollingContent || isScrollable
+    [`${prefix}--modal-scroll-content`]: hasScrollingContent || isScrollable,
+    [`${prefix}--modal-scroll-content--no-fade`]: height <= 300
   }, customClassName);
-  useIsomorphicEffect(() => {
-    if (contentRef.current) {
-      setIsScrollable(contentRef.current.scrollHeight > contentRef.current.clientHeight);
-    }
-    function handler() {
-      if (contentRef.current) {
-        setIsScrollable(contentRef.current.scrollHeight > contentRef.current.clientHeight);
-      }
-    }
-    const debouncedHandler = debounce(handler, 200);
-    window.addEventListener('resize', debouncedHandler);
-    return () => {
-      debouncedHandler.cancel();
-      window.removeEventListener('resize', debouncedHandler);
-    };
-  }, []);
   const hasScrollingContentProps = hasScrollingContent || isScrollable ? {
     tabIndex: 0,
     role: 'region'
@@ -169,7 +163,7 @@ const ComposedModalDialog = /*#__PURE__*/React.forwardRef(function ComposedModal
     if (!enableDialogElement) {
       toggleClass(document.body, `${prefix}--body--with-modal-open`, !!open);
     }
-    // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20071
+    // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20452
   }, [open, prefix]);
   // Remove the document.body className on unmount
   useEffect(() => {
@@ -305,7 +299,7 @@ const ComposedModalDialog = /*#__PURE__*/React.forwardRef(function ComposedModal
     return () => {
       document.removeEventListener('keydown', handleEscapeKey, true);
     };
-    // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20071
+    // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20452
   }, [open]);
   useEffect(() => {
     if (!enableDialogElement && !enablePresence && !open && launcherButtonRef) {
@@ -348,7 +342,7 @@ const ComposedModalDialog = /*#__PURE__*/React.forwardRef(function ComposedModal
         focusButton(innerModal.current);
       }
     }
-    // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20071
+    // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20452
   }, [open, selectorPrimaryFocus, isOpen]);
 
   // AILabel is always size `sm`
@@ -356,7 +350,7 @@ const ComposedModalDialog = /*#__PURE__*/React.forwardRef(function ComposedModal
   const candidateIsAILabel = isComponentElement(candidate, AILabel);
   const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/cloneElement(candidate, {
     size: 'sm'
-  }) : null;
+  }) : candidate;
   const modalBody = enableDialogElement ? /*#__PURE__*/React.createElement(Dialog, {
     open: open,
     focusAfterCloseRef: launcherButtonRef,

package/es/components/DataTable/DataTable.d.ts

@@ -8,21 +8,21 @@ import PropTypes from 'prop-types';
 import React, { type ChangeEvent, type MouseEvent, type ReactElement, type ReactNode } from 'react';
 import { type SortRowFn } from './state/sorting';
 import type { DataTableSortState } from './state/sortStates';
-import { TranslateWithId } from '../../types/common';
-declare const translationKeys: {
-    readonly expandRow: "carbon.table.row.expand";
-    readonly collapseRow: "carbon.table.row.collapse";
-    readonly expandAll: "carbon.table.all.expand";
-    readonly collapseAll: "carbon.table.all.collapse";
-    readonly selectAll: "carbon.table.all.select";
-    readonly unselectAll: "carbon.table.all.unselect";
-    readonly selectRow: "carbon.table.row.select";
-    readonly unselectRow: "carbon.table.row.unselect";
+import type { TranslateWithId } from '../../types/common';
+declare const translationIds: {
+    readonly 'carbon.table.row.expand': "carbon.table.row.expand";
+    readonly 'carbon.table.row.collapse': "carbon.table.row.collapse";
+    readonly 'carbon.table.all.expand': "carbon.table.all.expand";
+    readonly 'carbon.table.all.collapse': "carbon.table.all.collapse";
+    readonly 'carbon.table.all.select': "carbon.table.all.select";
+    readonly 'carbon.table.all.unselect': "carbon.table.all.unselect";
+    readonly 'carbon.table.row.select': "carbon.table.row.select";
+    readonly 'carbon.table.row.unselect': "carbon.table.row.unselect";
 };
 /**
  * Message IDs that will be passed to translateWithId().
  */
-type TranslationKey = (typeof translationKeys)[keyof typeof translationKeys];
+type TranslationKey = keyof typeof translationIds;
 export type DataTableSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export interface DataTableCell<T> {
     id: string;
@@ -92,6 +92,7 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
         isExpanded: boolean;
         onExpand: (event: MouseEvent<HTMLButtonElement>) => void;
         [key: string]: unknown;
+        id: string;
     };
     getRowProps: (options: {
         onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
@@ -105,6 +106,7 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
         key: string;
         onExpand: (event: MouseEvent<HTMLButtonElement>) => void;
         [key: string]: unknown;
+        expandHeader: string;
     };
     getExpandedRowProps: (options: {
         row: DataTableRow<ColTypes>;
@@ -233,7 +235,6 @@ export interface DataTableProps<RowType, ColTypes extends any[]> extends Transla
  */
 export declare const DataTable: {
     <RowType, ColTypes extends any[]>(props: DataTableProps<RowType, ColTypes>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
-    translationKeys: ("carbon.table.row.expand" | "carbon.table.row.collapse" | "carbon.table.all.expand" | "carbon.table.all.collapse" | "carbon.table.all.select" | "carbon.table.all.unselect" | "carbon.table.row.select" | "carbon.table.row.unselect")[];
     Table: {
         ({ className, children, useZebraStyles, size, isSortable, useStaticWidth, stickyHeader, overflowMenuOnHover, experimentalAutoAlign, tabIndex, ...other }: React.PropsWithChildren<import("./Table").TableProps>): import("react/jsx-runtime").JSX.Element;
         propTypes: {
@@ -258,7 +259,19 @@ export declare const DataTable: {
             renderIcon: PropTypes.Requireable<object>;
         };
     };
-    TableBatchActions: import("./TableBatchActions").TableBatchActionsComponent;
+    TableBatchActions: {
+        ({ className, children, shouldShowBatchActions, totalSelected, totalCount, onCancel, onSelectAll, translateWithId: t, ...rest }: import("./TableBatchActions").TableBatchActionsProps): import("react/jsx-runtime").JSX.Element;
+        propTypes: {
+            children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+            className: PropTypes.Requireable<string>;
+            onCancel: PropTypes.Validator<(...args: any[]) => any>;
+            onSelectAll: PropTypes.Requireable<(...args: any[]) => any>;
+            shouldShowBatchActions: PropTypes.Requireable<boolean>;
+            totalCount: PropTypes.Requireable<number>;
+            totalSelected: PropTypes.Validator<number>;
+            translateWithId: PropTypes.Requireable<(...args: any[]) => any>;
+        };
+    };
     TableBody: {
         ({ children, className, ...rest }: import("./TableBody").TableBodyProps): import("react/jsx-runtime").JSX.Element;
         propTypes: {
@@ -454,9 +467,7 @@ export declare const DataTable: {
          */
         stickyHeader: PropTypes.Requireable<boolean>;
         /**
-         * Optional method that takes in a message ID and returns an
-         * internationalized string. See `DataTable.translationKeys` for all
-         * available message IDs.
+         * Translates component strings using your i18n tool.
          */
         translateWithId: PropTypes.Requireable<(...args: any[]) => any>;
         /**