@carbon/react 1.100.0-rc.0 → 1.100.0

package/es/components/ComboBox/ComboBox.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { UseComboboxProps, UseComboboxActions } from 'downshift';
-import { type ComponentType, type InputHTMLAttributes, type MouseEvent, type PropsWithChildren, type ReactElement, type ReactNode, type RefAttributes, type RefObject } from 'react';
+import { type InputHTMLAttributes, type MouseEvent, type PropsWithChildren, type ReactElement, type ReactNode, type RefAttributes, type RefObject } from 'react';
 import { type ListBoxMenuIconTranslationKey, type ListBoxSelectionTranslationKey, type ListBoxSize } from '../ListBox';
 import type { TranslateWithId } from '../../types/common';
 type ExcludedAttributes = 'id' | 'onChange' | 'onClick' | 'type' | 'size';
@@ -98,10 +98,9 @@ export interface ComboBoxProps<ItemType> extends Omit<InputHTMLAttributes<HTMLIn
      */
     invalidText?: ReactNode;
     /**
-     * Optional function to render items as custom components instead of strings.
-     * Defaults to null and is overridden by a getter
+     * Renders an item as a custom React node instead of a string.
      */
-    itemToElement?: ComponentType<ItemType> | null;
+    itemToElement?: ((item: ItemType) => ReactNode) | null;
     /**
      * Helper function passed to downshift that allows the library to render a
      * given item to a string label. By default, it extracts the `label` field

package/es/components/ComboBox/ComboBox.js

@@ -450,9 +450,6 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
     [`${prefix}--combo-box--input--focus`]: isFocused
   });
 
-  // needs to be Capitalized for react to render it correctly
-  const ItemToElement = itemToElement;
-
   // AILabel always size `mini`
   const candidate = slug ?? decorator;
   const candidateIsAILabel = isComponentElement(candidate, AILabel);
@@ -784,9 +781,7 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
       isHighlighted: highlightedIndex === index,
       title: title,
       disabled: disabled
-    }, modifiedItemProps), ItemToElement ? /*#__PURE__*/React.createElement(ItemToElement, _extends({
-      key: itemProps.id
-    }, item)) : itemToString(item), isEqual(currentSelectedItem, item) && /*#__PURE__*/React.createElement(Checkmark, {
+    }, modifiedItemProps), itemToElement ? itemToElement(item) : itemToString(item), isEqual(currentSelectedItem, item) && /*#__PURE__*/React.createElement(Checkmark, {
       className: `${prefix}--list-box__menu-item__selected-icon`
     }));
   }) : null)), helperText && !invalid && !warn && !isFluid && /*#__PURE__*/React.createElement(Text, {
@@ -882,8 +877,7 @@ ComboBox.propTypes = {
    */
   invalidText: PropTypes.node,
   /**
-   * Optional function to render items as custom components instead of strings.
-   * Defaults to null and is overridden by a getter
+   * Renders an item as a custom React node instead of a string.
    */
   itemToElement: PropTypes.func,
   /**

package/es/components/Dropdown/Dropdown.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2022, 2025
+ * Copyright IBM Corp. 2022, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -78,10 +78,9 @@ export interface DropdownProps<ItemType> extends Omit<HTMLAttributes<HTMLDivElem
      */
     invalidText?: ReactNode;
     /**
-     * Function to render items as custom components instead of strings.
-     * Defaults to null and is overridden by a getter
+     * Renders an item as a custom React node instead of a string.
      */
-    itemToElement?: React.JSXElementConstructor<ItemType> | null;
+    itemToElement?: ((item: ItemType) => NonNullable<ReactNode>) | null;
     /**
      * Helper function passed to downshift that allows the library to render a
      * given item to a string label. By default, it extracts the `label` field

package/es/components/Dropdown/Dropdown.js

@@ -252,9 +252,6 @@ const Dropdown = /*#__PURE__*/React.forwardRef(({
     [`${prefix}--list-box__wrapper--slug`]: slug,
     [`${prefix}--list-box__wrapper--decorator`]: decorator
   });
-
-  // needs to be Capitalized for react to render it correctly
-  const ItemToElement = itemToElement;
   const toggleButtonProps = getToggleButtonProps({
     'aria-label': ariaLabel || deprecatedAriaLabel
   });
@@ -270,10 +267,20 @@ const Dropdown = /*#__PURE__*/React.forwardRef(({
   const [currTimer, setCurrTimer] = useState();
   const [isTyping, setIsTyping] = useState(false);
   const onKeyDownHandler = useCallback(evt => {
-    if (evt.code !== 'Space' || !['ArrowDown', 'ArrowUp', ' ', 'Enter'].includes(evt.key)) {
+    const navigationKeys = ['ArrowDown', 'ArrowUp', ' ', 'Enter'];
+
+    // If the key is not a navigation key, the user is typing
+    if (!navigationKeys.includes(evt.key)) {
       setIsTyping(true);
-    }
-    if (isTyping && evt.code === 'Space' || !['ArrowDown', 'ArrowUp', ' ', 'Enter'].includes(evt.key)) {
+      // Reset the timer for typing timeout
+      if (currTimer) {
+        clearTimeout(currTimer);
+      }
+      setCurrTimer(setTimeout(() => {
+        setIsTyping(false);
+      }, 3000));
+    } else if (isTyping && evt.key === ' ') {
+      // If user is typing and presses space, reset the timer
       if (currTimer) {
         clearTimeout(currTimer);
       }
@@ -377,21 +384,18 @@ const Dropdown = /*#__PURE__*/React.forwardRef(({
   })), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--list-box__inner-wrapper--decorator`
   }, normalizedDecorator) : '', /*#__PURE__*/React.createElement(ListBox.Menu, menuProps, isOpen && items.map((item, index) => {
-    const isObject = item !== null && typeof item === 'object';
     const itemProps = getItemProps({
       item,
       index
     });
-    const title = isObject && 'text' in item && itemToElement ? item.text : itemToString(item);
+    const title = itemToString(item);
     return /*#__PURE__*/React.createElement(ListBox.MenuItem, _extends({
       key: itemProps.id,
       isActive: selectedItem === item,
       isHighlighted: highlightedIndex === index,
       title: title,
       disabled: itemProps['aria-disabled']
-    }, itemProps), typeof item === 'object' && ItemToElement !== undefined && ItemToElement !== null ? /*#__PURE__*/React.createElement(ItemToElement, _extends({
-      key: itemProps.id
-    }, item)) : itemToString(item), selectedItem === item && /*#__PURE__*/React.createElement(Checkmark, {
+    }, itemProps), itemToElement ? itemToElement(item) : itemToString(item), selectedItem === item && /*#__PURE__*/React.createElement(Checkmark, {
       className: `${prefix}--list-box__menu-item__selected-icon`
     }));
   }))), !inline && !isFluid && !normalizedProps.validation && helper, !inline && !isFluid && normalizedProps.validation);
@@ -471,8 +475,7 @@ Dropdown.propTypes = {
    */
   invalidText: PropTypes.node,
   /**
-   * Function to render items as custom components instead of strings.
-   * Defaults to null and is overridden by a getter
+   * Renders an item as a custom React node instead of a string.
    */
   itemToElement: PropTypes.func,
   /**

package/es/components/FluidComboBox/FluidComboBox.d.ts

@@ -1,10 +1,10 @@
 /**
- * Copyright IBM Corp. 2022, 2025
+ * Copyright IBM Corp. 2022, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React, { ComponentType, type ComponentProps } from 'react';
+import React, { type ComponentProps } from 'react';
 import ComboBox from '../ComboBox';
 import { ComboBoxProps } from '../ComboBox/ComboBox';
 type ItemToStringHandler<ItemType> = (item: ItemType | null) => string;
@@ -46,11 +46,6 @@ export interface FluidComboBoxProps<ItemType> extends ComboBoxProps<ItemType>, P
      * Specify if the `FluidComboBox` should render its menu items in condensed mode
      */
     isCondensed?: boolean;
-    /**
-     * Function to render items as custom components instead of strings.
-     * Defaults to null and is overridden by a getter
-     */
-    itemToElement?: ComponentType<ItemType> | null;
     /**
      * Helper function passed to downshift that allows the library to render a
      * given item to a string label. By default, it extracts the `label` field

package/es/components/FluidComboBox/FluidComboBox.js

@@ -66,8 +66,7 @@ FluidComboBox.propTypes = {
    */
   isCondensed: PropTypes.bool,
   /**
-   * Function to render items as custom components instead of strings.
-   * Defaults to null and is overridden by a getter
+   * Renders an item as a custom React node instead of a string.
    */
   itemToElement: PropTypes.func,
   /**

package/es/components/FluidDropdown/FluidDropdown.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2022, 2025
+ * Copyright IBM Corp. 2022, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -43,11 +43,6 @@ export interface FluidDropdownProps<ItemType> extends DropdownProps<ItemType>, P
      * Specify if the `FluidDropdown` should render its menu items in condensed mode
      */
     isCondensed?: boolean;
-    /**
-     * Function to render items as custom components instead of strings.
-     * Defaults to null and is overridden by a getter
-     */
-    itemToElement?: React.JSXElementConstructor<ItemType> | null;
     /**
      * Helper function passed to downshift that allows the library to render a
      * given item to a string label. By default, it extracts the `label` field

package/es/components/FluidDropdown/FluidDropdown.js

@@ -67,8 +67,7 @@ FluidDropdown.propTypes = {
    */
   isCondensed: PropTypes.bool,
   /**
-   * Function to render items as custom components instead of strings.
-   * Defaults to null and is overridden by a getter
+   * Renders an item as a custom React node instead of a string.
    */
   itemToElement: PropTypes.func,
   /**

package/es/components/FluidMultiSelect/FluidMultiSelect.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2022, 2025
+ * Copyright IBM Corp. 2022, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -66,11 +66,6 @@ export interface FluidMultiSelectProps<ItemType> extends MultiSelectProps<ItemTy
      * @deprecated This prop is deprecated in favor of new component called FluidFilterableMultiSelect and will be removed in the next major release
      */
     isFilterable?: boolean;
-    /**
-     * Function to render items as custom components instead of strings.
-     * Defaults to null and is overridden by a getter
-     */
-    itemToElement?: React.JSXElementConstructor<ItemType>;
     /**
      * Helper function passed to downshift that allows the library to render a
      * given item to a string label. By default, it extracts the `label` field

package/es/components/FluidMultiSelect/FluidMultiSelect.js

@@ -106,8 +106,7 @@ FluidMultiSelect.propTypes = {
    */
   isFilterable: PropTypes.bool,
   /**
-   * Function to render items as custom components instead of strings.
-   * Defaults to null and is overridden by a getter
+   * Renders an item as a custom React node instead of a string.
    */
   itemToElement: PropTypes.func,
   /**

package/es/components/InlineLoading/InlineLoading.js

@@ -52,7 +52,10 @@ const InlineLoading = ({
         className: `${prefix}--inline-loading__checkmark-container`
       }, /*#__PURE__*/React.createElement("title", null, iconLabel));
     }
-    if (status === 'active') {
+    if (status === 'inactive' || status === 'active') {
+      if (status === 'inactive') {
+        return undefined;
+      }
       if (!iconDescription) {
         iconLabel = 'loading';
       }
@@ -63,15 +66,6 @@ const InlineLoading = ({
         active: status === 'active'
       });
     }
-    if (status === 'inactive') {
-      if (!iconDescription) {
-        iconLabel = 'not loading';
-      }
-      return /*#__PURE__*/React.createElement("title", {
-        className: `${prefix}--inline-loading__inactive-status`
-      }, iconLabel);
-    }
-    return undefined;
   };
   const loadingText = description && /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--inline-loading__text`
@@ -83,7 +77,7 @@ const InlineLoading = ({
   return /*#__PURE__*/React.createElement("div", _extends({
     className: loadingClasses
   }, rest, {
-    "aria-live": rest['aria-live'] ?? 'assertive'
+    "aria-live": rest['aria-live'] ?? (status === 'inactive' ? 'off' : 'assertive')
   }), loadingAnimation, loadingText);
 };
 InlineLoading.propTypes = {

package/es/components/MultiSelect/MultiSelect.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2025
+ * Copyright IBM Corp. 2016, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -82,10 +82,9 @@ export interface MultiSelectProps<ItemType> extends MultiSelectSortingProps<Item
      */
     invalidText?: ReactNode;
     /**
-     * Function to render items as custom components instead of strings.
-     * Defaults to null and is overridden by a getter
+     * Renders an item as a custom React node instead of a string.
      */
-    itemToElement?: React.JSXElementConstructor<ItemType>;
+    itemToElement?: ((item: ItemType) => NonNullable<ReactNode>) | null;
     /**
      * Helper function passed to downshift that allows the library to render a
      * given item to a string label. By default, it extracts the `label` field

package/es/components/MultiSelect/MultiSelect.js

@@ -294,10 +294,6 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
     [`${prefix}--autoalign`]: enableFloatingStyles,
     [`${prefix}--multi-select--selectall`]: selectAll
   });
-
-  // needs to be capitalized for react to render it correctly
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  const ItemToElement = itemToElement;
   if (selectionFeedback === 'fixed') {
     sortOptions.selectedItems = [];
   } else if (selectionFeedback === 'top-after-reopen') {
@@ -526,9 +522,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
       className: `${prefix}--checkbox-wrapper`
     }, /*#__PURE__*/React.createElement(Checkbox, {
       id: `${itemProps.id}__checkbox`,
-      labelText: itemToElement ? /*#__PURE__*/React.createElement(ItemToElement, _extends({
-        key: itemProps.id
-      }, item)) : itemText,
+      labelText: itemToElement ? itemToElement(item) : itemText,
       checked: isChecked,
       title: useTitleInItem ? itemText : undefined,
       indeterminate: isIndeterminate,
@@ -619,8 +613,7 @@ MultiSelect.propTypes = {
    */
   invalidText: PropTypes.node,
   /**
-   * Function to render items as custom components instead of strings.
-   * Defaults to null and is overridden by a getter
+   * Renders an item as a custom React node instead of a string.
    */
   itemToElement: PropTypes.func,
   /**

package/es/components/Notification/Notification.js

@@ -572,6 +572,8 @@ function ActionableNotification({
     role: "link",
     className: `${prefix}--visually-hidden`
   }, "Focus sentinel"), /*#__PURE__*/React.createElement("div", {
+    ref: innerModal
+  }, /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--actionable-notification__details`
   }, /*#__PURE__*/React.createElement(NotificationIcon, {
     notificationType: inline ? 'inline' : 'toast',
@@ -593,8 +595,7 @@ function ActionableNotification({
     as: "div",
     className: `${prefix}--actionable-notification__caption`
   }, caption), children))), /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}--actionable-notification__button-wrapper`,
-    ref: innerModal
+    className: `${prefix}--actionable-notification__button-wrapper`
   }, actionButtonLabel && /*#__PURE__*/React.createElement(NotificationActionButton, {
     onClick: onActionButtonClick,
     inline: inline
@@ -602,7 +603,7 @@ function ActionableNotification({
     "aria-label": deprecatedAriaLabel || ariaLabel,
     notificationType: "actionable",
     onClick: handleCloseButtonClick
-  })), !focusTrapWithoutSentinels && /*#__PURE__*/React.createElement("span", {
+  }))), !focusTrapWithoutSentinels && /*#__PURE__*/React.createElement("span", {
     ref: endTrap,
     tabIndex: 0,
     role: "link",

package/es/components/TextArea/TextArea.js

@@ -144,9 +144,7 @@ const TextArea = frFn((props, forwardRef) => {
             setTimeout(() => {
               setTextCount(0);
             }, 0);
-            return;
-          }
-          if (enableCounter && typeof maxCount !== 'undefined' && textareaRef.current !== null) {
+          } else if (enableCounter && typeof maxCount !== 'undefined' && textareaRef.current !== null) {
             const matchedWords = evt.target?.value?.match(/\p{L}+/gu);
             if (matchedWords && matchedWords.length <= maxCount) {
               textareaRef.current.removeAttribute('maxLength');

package/es/components/Tile/Tile.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2019, 2025
+ * Copyright IBM Corp. 2019, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

package/es/components/Tile/Tile.js

@@ -6,7 +6,7 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React, { useState, useEffect, useCallback, useRef, cloneElement } from 'react';
+import React, { forwardRef, useState, useEffect, useCallback, useRef, cloneElement, Children } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { AiLabel, CheckboxCheckedFilled, Checkbox, ChevronDown, ArrowRight, Error } from '@carbon/icons-react';
@@ -363,7 +363,7 @@ SelectableTile.propTypes = {
    */
   value: deprecate(PropTypes.oneOfType([PropTypes.string, PropTypes.number]), 'The `value` property is no longer used.  It will be removed in the next major release.`')
 };
-const ExpandableTile = /*#__PURE__*/React.forwardRef(({
+const ExpandableTile = /*#__PURE__*/forwardRef(({
   tabIndex = 0,
   className,
   children,
@@ -382,11 +382,8 @@ const ExpandableTile = /*#__PURE__*/React.forwardRef(({
   hasRoundedCorners,
   ...rest
 }, forwardRef) => {
-  const [isTileMaxHeight, setIsTileMaxHeight] = useState(tileMaxHeight);
-  const [isTilePadding, setIsTilePadding] = useState(tilePadding);
-  const [prevExpanded, setPrevExpanded] = useState(expanded);
-  const [prevTileMaxHeight, setPrevTileMaxHeight] = useState(tileMaxHeight);
-  const [prevTilePadding, setPrevTilePadding] = useState(tilePadding);
+  const [measuredAboveHeight, setMeasuredAboveHeight] = useState(0);
+  const [measuredPadding, setMeasuredPadding] = useState(0);
   const [isExpanded, setIsExpanded] = useState(expanded);
   const [interactive, setInteractive] = useState(true);
   const aboveTheFold = useRef(null);
@@ -396,105 +393,74 @@ const ExpandableTile = /*#__PURE__*/React.forwardRef(({
   const tile = useRef(null);
   const ref = useMergedRefs([forwardRef, tile]);
   const prefix = usePrefix();
-  if (expanded !== prevExpanded) {
+  useEffect(() => {
     setIsExpanded(expanded);
-    setPrevExpanded(expanded);
-    setMaxHeight();
-  }
-  if (tileMaxHeight !== prevTileMaxHeight) {
-    setIsTileMaxHeight(tileMaxHeight);
-    setPrevTileMaxHeight(tileMaxHeight);
-  }
-  if (tilePadding !== prevTilePadding) {
-    setIsTilePadding(tilePadding);
-    setPrevTilePadding(tilePadding);
-  }
-  function setMaxHeight() {
-    if (isExpanded && tileContent.current) {
-      setIsTileMaxHeight(tileContent.current.getBoundingClientRect()?.height);
-    }
-    if (aboveTheFold.current) {
-      setIsTileMaxHeight(aboveTheFold.current.getBoundingClientRect().height);
-    }
-  }
-  function handleClick(evt) {
-    evt?.persist?.();
-    setIsExpanded(!isExpanded);
-    setMaxHeight();
-  }
-  function handleKeyUp(evt) {
+  }, [expanded]);
+  const handleClick = () => {
+    setIsExpanded(prev => !prev);
+  };
+  const handleKeyUp = evt => {
     if (evt.target !== tile.current && evt.target !== chevronInteractiveRef.current) {
       if (matches(evt, [Enter, Space])) {
         evt.preventDefault();
       }
     }
-  }
-  function getChildren() {
-    return React.Children.toArray(children);
-  }
+  };
   const classNames = cx(`${prefix}--tile`, `${prefix}--tile--expandable`, {
     [`${prefix}--tile--is-expanded`]: isExpanded,
     [`${prefix}--tile--light`]: light
   }, className);
-  const interactiveClassNames = cx(`${prefix}--tile`, `${prefix}--tile--expandable`, `${prefix}--tile--expandable--interactive`, {
-    [`${prefix}--tile--is-expanded`]: isExpanded,
-    [`${prefix}--tile--light`]: light,
+  const interactiveClassNames = cx(classNames, `${prefix}--tile--expandable--interactive`, {
     [`${prefix}--tile--slug`]: slug,
     [`${prefix}--tile--slug-rounded`]: slug && hasRoundedCorners,
     [`${prefix}--tile--decorator`]: decorator,
     [`${prefix}--tile--decorator-rounded`]: decorator && hasRoundedCorners
-  }, className);
+  });
   const chevronInteractiveClassNames = cx(`${prefix}--tile__chevron`, `${prefix}--tile__chevron--interactive`);
-  const childrenAsArray = getChildren();
+  const childrenAsArray = Children.toArray(children);
   useIsomorphicEffect(() => {
     if (!tile.current || !aboveTheFold.current) {
       return;
     }
-    const getStyle = window.getComputedStyle(tile.current, null);
-    const {
-      current: node
-    } = aboveTheFold;
-    const {
-      height
-    } = node.getBoundingClientRect();
-    const paddingTop = parseInt(getStyle.getPropertyValue('padding-top'), 10);
-    const paddingBottom = parseInt(getStyle.getPropertyValue('padding-bottom'), 10);
-    setIsTileMaxHeight(height);
-    setIsTilePadding(paddingTop + paddingBottom);
-  }, [isTileMaxHeight]);
+    const style = window.getComputedStyle(tile.current);
+    const paddingTop = parseInt(style.getPropertyValue('padding-top'), 10) || 0;
+    const paddingBottom = parseInt(style.getPropertyValue('padding-bottom'), 10) || 0;
+    setMeasuredPadding(paddingTop + paddingBottom);
+    setMeasuredAboveHeight(aboveTheFold.current.scrollHeight);
+  }, []);
   useIsomorphicEffect(() => {
     if (!aboveTheFold.current || !belowTheFold.current) {
       return;
     }
-
-    // Interactive elements or elements that are given a role should be treated
-    // the same because elements with a role can not be rendered inside a `button`
-    if (!getInteractiveContent(belowTheFold.current) && !getRoleContent(belowTheFold.current) && !getInteractiveContent(aboveTheFold.current) && !getRoleContent(aboveTheFold.current) && !(slug || decorator)) {
-      setInteractive(false);
-    }
-  }, [slug, decorator]);
+    const hasInteractive = Boolean(getInteractiveContent(aboveTheFold.current)) || Boolean(getRoleContent(aboveTheFold.current)) || Boolean(getInteractiveContent(belowTheFold.current)) || Boolean(getRoleContent(belowTheFold.current)) || Boolean(slug || decorator);
+    setInteractive(hasInteractive);
+  }, [slug, decorator, children]);
   useIsomorphicEffect(() => {
     if (!tile.current) {
       return;
     }
     if (isExpanded) {
       tile.current.style.maxHeight = '';
-    } else {
-      tile.current.style.maxHeight = isTileMaxHeight + isTilePadding + 'px';
+      return;
     }
-  }, [isExpanded, isTileMaxHeight, isTilePadding]);
+    const measured = measuredAboveHeight || aboveTheFold.current?.scrollHeight || 0;
+    const baseHeight = tileMaxHeight > 0 ? tileMaxHeight : measured;
+    const pad = tilePadding > 0 ? tilePadding : measuredPadding;
+    tile.current.style.maxHeight = `${baseHeight + pad}px`;
+  }, [isExpanded, tileMaxHeight, tilePadding, measuredAboveHeight, measuredPadding]);
   useEffect(() => {
     if (!aboveTheFold.current) {
       return;
     }
-    const resizeObserver = new ResizeObserver(entries => {
-      const [aboveTheFold] = entries;
-      setIsTileMaxHeight(aboveTheFold.contentRect.height);
+    const resizeObserver = new ResizeObserver(() => {
+      if (aboveTheFold.current) {
+        setMeasuredAboveHeight(aboveTheFold.current.scrollHeight);
+      }
     });
     resizeObserver.observe(aboveTheFold.current);
     return () => resizeObserver.disconnect();
-  }, [isTileMaxHeight, isTilePadding]);
-  const belowTheFoldId = useId('expandable-tile-interactive');
+  }, []);
+  const belowTheFoldId = useId(interactive ? 'expandable-tile-interactive' : 'expandable-tile');
 
   // AILabel is always size `xs`
   const candidate = slug ?? decorator;
@@ -529,6 +495,7 @@ const ExpandableTile = /*#__PURE__*/React.forwardRef(({
     type: "button",
     ref: ref,
     className: classNames,
+    "aria-controls": belowTheFoldId,
     "aria-expanded": isExpanded,
     title: isExpanded ? tileExpandedIconText : tileCollapsedIconText
   }, rest, {
@@ -544,6 +511,7 @@ const ExpandableTile = /*#__PURE__*/React.forwardRef(({
     className: `${prefix}--tile__chevron`
   }, /*#__PURE__*/React.createElement("span", null, isExpanded ? tileExpandedLabel : tileCollapsedLabel), _ChevronDown2 || (_ChevronDown2 = /*#__PURE__*/React.createElement(ChevronDown, null))), /*#__PURE__*/React.createElement("div", {
     ref: belowTheFold,
+    id: belowTheFoldId,
     className: `${prefix}--tile-content`
   }, childrenAsArray[1])));
 });

package/es/components/UIShell/SideNav.d.ts

@@ -19,7 +19,6 @@ export interface SideNavProps {
     onOverlayClick?: MouseEventHandler<HTMLDivElement> | undefined;
     onSideNavBlur?: () => void;
     enterDelayMs?: number;
-    inert?: boolean;
 }
 interface SideNavContextData {
     isRail?: boolean | undefined;

package/es/components/UIShell/SideNav.js

@@ -6,7 +6,7 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React, { forwardRef, useRef, isValidElement, createContext } from 'react';
+import React, { forwardRef, useRef, isValidElement, useEffect, createContext } from 'react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
@@ -157,6 +157,16 @@ const SideNav = frFn((props, ref) => {
   });
   const lgMediaQuery = `(min-width: ${breakpoints.lg.width})`;
   const isLg = useMatchMedia(lgMediaQuery);
+  const inertEnabled = !isRail ? !(expanded || isLg) : false;
+  useEffect(() => {
+    const node = sideNavRef.current;
+    if (!node) return;
+    if (inertEnabled) {
+      node.setAttribute('inert', '');
+    } else {
+      node.removeAttribute('inert');
+    }
+  }, [inertEnabled]);
   return /*#__PURE__*/React.createElement(SideNavContext.Provider, {
     value: {
       isRail
@@ -170,8 +180,7 @@ const SideNav = frFn((props, ref) => {
   }), /*#__PURE__*/React.createElement("nav", _extends({
     tabIndex: -1,
     ref: navRef,
-    className: `${prefix}--side-nav__navigation ${className}`,
-    inert: !isRail ? !(expanded || isLg) : undefined
+    className: `${prefix}--side-nav__navigation ${className}`
   }, accessibilityLabel, eventHandlers, other), childrenToRender));
 });
 SideNav.displayName = 'SideNav';

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { UseComboboxProps, UseComboboxActions } from 'downshift';
-import { type ComponentType, type InputHTMLAttributes, type MouseEvent, type PropsWithChildren, type ReactElement, type ReactNode, type RefAttributes, type RefObject } from 'react';
+import { type InputHTMLAttributes, type MouseEvent, type PropsWithChildren, type ReactElement, type ReactNode, type RefAttributes, type RefObject } from 'react';
 import { type ListBoxMenuIconTranslationKey, type ListBoxSelectionTranslationKey, type ListBoxSize } from '../ListBox';
 import type { TranslateWithId } from '../../types/common';
 type ExcludedAttributes = 'id' | 'onChange' | 'onClick' | 'type' | 'size';
@@ -98,10 +98,9 @@ export interface ComboBoxProps<ItemType> extends Omit<InputHTMLAttributes<HTMLIn
      */
     invalidText?: ReactNode;
     /**
-     * Optional function to render items as custom components instead of strings.
-     * Defaults to null and is overridden by a getter
+     * Renders an item as a custom React node instead of a string.
      */
-    itemToElement?: ComponentType<ItemType> | null;
+    itemToElement?: ((item: ItemType) => ReactNode) | null;
     /**
      * Helper function passed to downshift that allows the library to render a
      * given item to a string label. By default, it extracts the `label` field