@carbon/react 1.100.0-rc.0 → 1.100.0

package/lib/components/ComboBox/ComboBox.js

@@ -454,9 +454,6 @@ const ComboBox = /*#__PURE__*/React.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 = utils.isComponentElement(candidate, index$1.AILabel);
@@ -788,9 +785,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
       isHighlighted: highlightedIndex === index,
       title: title,
       disabled: disabled
-    }, modifiedItemProps), ItemToElement ? /*#__PURE__*/React.createElement(ItemToElement, _rollupPluginBabelHelpers.extends({
-      key: itemProps.id
-    }, item)) : itemToString(item), isEqual(currentSelectedItem, item) && /*#__PURE__*/React.createElement(iconsReact.Checkmark, {
+    }, modifiedItemProps), itemToElement ? itemToElement(item) : itemToString(item), isEqual(currentSelectedItem, item) && /*#__PURE__*/React.createElement(iconsReact.Checkmark, {
       className: `${prefix}--list-box__menu-item__selected-icon`
     }));
   }) : null)), helperText && !invalid && !warn && !isFluid && /*#__PURE__*/React.createElement(Text.Text, {
@@ -886,8 +881,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/lib/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/lib/components/Dropdown/Dropdown.js

@@ -256,9 +256,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
   });
@@ -274,10 +271,20 @@ const Dropdown = /*#__PURE__*/React.forwardRef(({
   const [currTimer, setCurrTimer] = React.useState();
   const [isTyping, setIsTyping] = React.useState(false);
   const onKeyDownHandler = React.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);
       }
@@ -381,21 +388,18 @@ const Dropdown = /*#__PURE__*/React.forwardRef(({
   })), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--list-box__inner-wrapper--decorator`
   }, normalizedDecorator) : '', /*#__PURE__*/React.createElement(index$2.default.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(index$2.default.MenuItem, _rollupPluginBabelHelpers.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, _rollupPluginBabelHelpers.extends({
-      key: itemProps.id
-    }, item)) : itemToString(item), selectedItem === item && /*#__PURE__*/React.createElement(iconsReact.Checkmark, {
+    }, itemProps), itemToElement ? itemToElement(item) : itemToString(item), selectedItem === item && /*#__PURE__*/React.createElement(iconsReact.Checkmark, {
       className: `${prefix}--list-box__menu-item__selected-icon`
     }));
   }))), !inline && !isFluid && !normalizedProps.validation && helper, !inline && !isFluid && normalizedProps.validation);
@@ -475,8 +479,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/lib/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/lib/components/FluidComboBox/FluidComboBox.js

@@ -70,8 +70,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/lib/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/lib/components/FluidDropdown/FluidDropdown.js

@@ -71,8 +71,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/lib/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/lib/components/FluidMultiSelect/FluidMultiSelect.js

@@ -110,8 +110,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/lib/components/InlineLoading/InlineLoading.js

@@ -56,7 +56,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';
       }
@@ -67,15 +70,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`
@@ -87,7 +81,7 @@ const InlineLoading = ({
   return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({
     className: loadingClasses
   }, rest, {
-    "aria-live": rest['aria-live'] ?? 'assertive'
+    "aria-live": rest['aria-live'] ?? (status === 'inactive' ? 'off' : 'assertive')
   }), loadingAnimation, loadingText);
 };
 InlineLoading.propTypes = {

package/lib/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/lib/components/MultiSelect/MultiSelect.js

@@ -296,10 +296,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') {
@@ -528,9 +524,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
       className: `${prefix}--checkbox-wrapper`
     }, /*#__PURE__*/React.createElement(Checkbox.default, {
       id: `${itemProps.id}__checkbox`,
-      labelText: itemToElement ? /*#__PURE__*/React.createElement(ItemToElement, _rollupPluginBabelHelpers.extends({
-        key: itemProps.id
-      }, item)) : itemText,
+      labelText: itemToElement ? itemToElement(item) : itemText,
       checked: isChecked,
       title: useTitleInItem ? itemText : undefined,
       indeterminate: isIndeterminate,
@@ -621,8 +615,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/lib/components/Notification/Notification.js

@@ -574,6 +574,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',
@@ -595,8 +597,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
@@ -604,7 +605,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/lib/components/TextArea/TextArea.js

@@ -148,9 +148,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/lib/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/lib/components/Tile/Tile.js

@@ -384,11 +384,8 @@ const ExpandableTile = /*#__PURE__*/React.forwardRef(({
   hasRoundedCorners,
   ...rest
 }, forwardRef) => {
-  const [isTileMaxHeight, setIsTileMaxHeight] = React.useState(tileMaxHeight);
-  const [isTilePadding, setIsTilePadding] = React.useState(tilePadding);
-  const [prevExpanded, setPrevExpanded] = React.useState(expanded);
-  const [prevTileMaxHeight, setPrevTileMaxHeight] = React.useState(tileMaxHeight);
-  const [prevTilePadding, setPrevTilePadding] = React.useState(tilePadding);
+  const [measuredAboveHeight, setMeasuredAboveHeight] = React.useState(0);
+  const [measuredPadding, setMeasuredPadding] = React.useState(0);
   const [isExpanded, setIsExpanded] = React.useState(expanded);
   const [interactive, setInteractive] = React.useState(true);
   const aboveTheFold = React.useRef(null);
@@ -398,105 +395,74 @@ const ExpandableTile = /*#__PURE__*/React.forwardRef(({
   const tile = React.useRef(null);
   const ref = useMergedRefs.useMergedRefs([forwardRef, tile]);
   const prefix = usePrefix.usePrefix();
-  if (expanded !== prevExpanded) {
+  React.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 (match.matches(evt, [keys.Enter, keys.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 = React.Children.toArray(children);
   useIsomorphicEffect.default(() => {
     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.default(() => {
     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 (!useNoInteractiveChildren.getInteractiveContent(belowTheFold.current) && !useNoInteractiveChildren.getRoleContent(belowTheFold.current) && !useNoInteractiveChildren.getInteractiveContent(aboveTheFold.current) && !useNoInteractiveChildren.getRoleContent(aboveTheFold.current) && !(slug || decorator)) {
-      setInteractive(false);
-    }
-  }, [slug, decorator]);
+    const hasInteractive = Boolean(useNoInteractiveChildren.getInteractiveContent(aboveTheFold.current)) || Boolean(useNoInteractiveChildren.getRoleContent(aboveTheFold.current)) || Boolean(useNoInteractiveChildren.getInteractiveContent(belowTheFold.current)) || Boolean(useNoInteractiveChildren.getRoleContent(belowTheFold.current)) || Boolean(slug || decorator);
+    setInteractive(hasInteractive);
+  }, [slug, decorator, children]);
   useIsomorphicEffect.default(() => {
     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]);
   React.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.useId('expandable-tile-interactive');
+  }, []);
+  const belowTheFoldId = useId.useId(interactive ? 'expandable-tile-interactive' : 'expandable-tile');
 
   // AILabel is always size `xs`
   const candidate = slug ?? decorator;
@@ -531,6 +497,7 @@ const ExpandableTile = /*#__PURE__*/React.forwardRef(({
     type: "button",
     ref: ref,
     className: classNames,
+    "aria-controls": belowTheFoldId,
     "aria-expanded": isExpanded,
     title: isExpanded ? tileExpandedIconText : tileCollapsedIconText
   }, rest, {
@@ -546,6 +513,7 @@ const ExpandableTile = /*#__PURE__*/React.forwardRef(({
     className: `${prefix}--tile__chevron`
   }, /*#__PURE__*/React.createElement("span", null, isExpanded ? tileExpandedLabel : tileCollapsedLabel), _ChevronDown2 || (_ChevronDown2 = /*#__PURE__*/React.createElement(iconsReact.ChevronDown, null))), /*#__PURE__*/React.createElement("div", {
     ref: belowTheFold,
+    id: belowTheFoldId,
     className: `${prefix}--tile-content`
   }, childrenAsArray[1])));
 });

package/lib/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/lib/components/UIShell/SideNav.js

@@ -161,6 +161,16 @@ const SideNav = frFn((props, ref) => {
   });
   const lgMediaQuery = `(min-width: ${layout.breakpoints.lg.width})`;
   const isLg = useMatchMedia.useMatchMedia(lgMediaQuery);
+  const inertEnabled = !isRail ? !(expanded || isLg) : false;
+  React.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
@@ -174,8 +184,7 @@ const SideNav = frFn((props, ref) => {
   }), /*#__PURE__*/React.createElement("nav", _rollupPluginBabelHelpers.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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.100.0-rc.0",
+  "version": "1.100.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -53,10 +53,10 @@
   "dependencies": {
     "@babel/runtime": "^7.27.3",
     "@carbon/feature-flags": ">=0.32.0",
-    "@carbon/icons-react": "^11.74.0-rc.0",
-    "@carbon/layout": "^11.47.0-rc.0",
-    "@carbon/styles": "^1.99.0-rc.0",
-    "@carbon/utilities": "^0.15.0-rc.0",
+    "@carbon/icons-react": "^11.74.0",
+    "@carbon/layout": "^11.47.0",
+    "@carbon/styles": "^1.99.0",
+    "@carbon/utilities": "^0.15.0",
     "@floating-ui/react": "^0.27.4",
     "@ibm/telemetry-js": "^1.5.0",
     "classnames": "2.5.1",
@@ -79,7 +79,7 @@
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
     "@carbon/test-utils": "^10.39.0",
-    "@carbon/themes": "^11.67.0-rc.0",
+    "@carbon/themes": "^11.67.0",
     "@figma/code-connect": "^1.3.5",
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^28.0.3",
@@ -131,5 +131,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "cbde6bd5df4774c2780411b3faa02ec3a0bb7585"
+  "gitHead": "f366448449df3d81c9bb63a8a842772d734c163a"
 }