@carbon/react 1.99.0 → 1.100.0

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/Toggle/Toggle.Skeleton.d.ts

@@ -1,14 +1,20 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * 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 from 'react';
+import PropTypes from 'prop-types';
 export interface ToggleSkeletonProps {
     'aria-label'?: string;
     className?: string;
 }
-declare const ToggleSkeleton: React.FC<ToggleSkeletonProps>;
+declare const ToggleSkeleton: {
+    ({ className, ...rest }: ToggleSkeletonProps): import("react/jsx-runtime").JSX.Element;
+    propTypes: {
+        'aria-label': PropTypes.Requireable<string>;
+        className: PropTypes.Requireable<string>;
+    };
+};
 export default ToggleSkeleton;
 export { ToggleSkeleton };

package/es/components/Toggletip/index.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.

package/es/components/Toggletip/index.js

@@ -8,7 +8,7 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useContext, useRef, useState, useEffect } from 'react';
+import React, { forwardRef, useContext, useRef, useState, useEffect } from 'react';
 import { Popover, PopoverContent } from '../Popover/index.js';
 import { Escape } from '../../internal/keyboard/keys.js';
 import { match } from '../../internal/keyboard/match.js';
@@ -184,8 +184,7 @@ Toggletip.propTypes = {
  * `ToggletipButton` controls the visibility of the Toggletip through mouse
  * clicks and keyboard interactions.
  */
-
-const ToggletipButton = /*#__PURE__*/React.forwardRef(function ToggletipButton({
+const ToggletipButton = /*#__PURE__*/forwardRef(function ToggletipButton({
   children,
   className: customClassName,
   label = 'Show information',
@@ -225,15 +224,18 @@ ToggletipButton.propTypes = {
   label: PropTypes.string
 };
 ToggletipButton.displayName = 'ToggletipButton';
+const frFn = forwardRef;
+
 /**
  * `ToggletipContent` is a wrapper around `PopoverContent`. It places the
  * `children` passed in as a prop inside of `PopoverContent` so that they will
  * be rendered inside of the popover for this component.
  */
-const ToggletipContent = /*#__PURE__*/React.forwardRef(function ToggletipContent({
-  children,
-  className: customClassName
-}, ref) {
+const ToggletipContent = frFn((props, ref) => {
+  const {
+    children,
+    className: customClassName
+  } = props;
   const toggletip = useToggletip();
   const prefix = usePrefix();
   return /*#__PURE__*/React.createElement(PopoverContent, _extends({

package/es/components/Tooltip/DefinitionTooltip.d.ts

@@ -4,6 +4,7 @@
  * 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 PropTypes from 'prop-types';
 import React from 'react';
 import { PopoverAlignment } from '../Popover';
 export interface DefinitionTooltipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'id' | 'classname' | 'children' | 'type'> {
@@ -54,5 +55,55 @@ export interface DefinitionTooltipProps extends Omit<React.ButtonHTMLAttributes<
      */
     triggerClassName?: string;
 }
-declare const DefinitionTooltip: React.FC<DefinitionTooltipProps>;
+declare const DefinitionTooltip: {
+    ({ align, autoAlign, className, children, definition, defaultOpen, id, openOnHover, tooltipText, triggerClassName, ...rest }: DefinitionTooltipProps): import("react/jsx-runtime").JSX.Element;
+    propTypes: {
+        /**
+         * Specify how the trigger should align with the tooltip
+         */
+        align: PropTypes.Requireable<string>;
+        /**
+         * Will auto-align the popover. This prop is currently experimental and is
+         * subject to future changes. Requires React v17+
+         * @see https://github.com/carbon-design-system/carbon/issues/18714
+         */
+        autoAlign: PropTypes.Requireable<boolean>;
+        /**
+         * The `children` prop will be used as the value that is being defined
+         */
+        children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+        /**
+         * Specify an optional className to be applied to the container node
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify whether the tooltip should be open when it first renders
+         */
+        defaultOpen: PropTypes.Requireable<boolean>;
+        /**
+         * The `definition` prop is used as the content inside of the tooltip that
+         * appears when a user interacts with the element rendered by the `children`
+         * prop
+         */
+        definition: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+        /**
+         * Provide a value that will be assigned as the id of the tooltip
+         */
+        id: PropTypes.Requireable<string>;
+        /**
+         * Specifies whether or not the `DefinitionTooltip` should open on hover or not
+         */
+        openOnHover: PropTypes.Requireable<boolean>;
+        /**
+         * [Deprecated in v11] Please use the `definition` prop instead.
+         *
+         * Provide the text that will be displayed in the tooltip when it is rendered.
+         */
+        tooltipText: (props: Record<string, any>, propName: string, componentName: string, ...rest: any[]) => any;
+        /**
+         * The CSS class name of the trigger element
+         */
+        triggerClassName: PropTypes.Requireable<string>;
+    };
+};
 export { DefinitionTooltip };

package/es/components/Tooltip/Tooltip.js

@@ -187,6 +187,8 @@ const Tooltip = /*#__PURE__*/React.forwardRef(({
     }, label || description))
   );
 });
+
+// @ts-expect-error - `propTypes` isn't typed.
 Tooltip.propTypes = {
   /**
    * Specify how the trigger should align with the tooltip

package/es/components/TreeView/TreeNode.d.ts

@@ -1,10 +1,10 @@
 /**
- * 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.
  */
-import React, { type ComponentType, type FunctionComponent } from 'react';
+import React, { type ElementType } from 'react';
 type UncontrolledOnToggle = (event: React.MouseEvent | React.KeyboardEvent, node: Pick<TreeNodeProps, 'id' | 'label' | 'value' | 'isExpanded'>) => void;
 type ControlledOnToggle = (isExpanded: TreeNodeProps['isExpanded']) => void;
 export type TreeNodeProps = {
@@ -78,7 +78,7 @@ export type TreeNodeProps = {
     /**
      * A component used to render an icon.
      */
-    renderIcon?: ComponentType | FunctionComponent;
+    renderIcon?: ElementType;
     /**
      * **Note:** this is controlled by the parent TreeView component, do not set manually.
      * Array containing all selected node IDs in the tree
@@ -178,7 +178,7 @@ declare const TreeNode: React.ForwardRefExoticComponent<{
     /**
      * A component used to render an icon.
      */
-    renderIcon?: ComponentType | FunctionComponent;
+    renderIcon?: ElementType;
     /**
      * **Note:** this is controlled by the parent TreeView component, do not set manually.
      * Array containing all selected node IDs in the tree

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

@@ -1,10 +1,11 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * 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, { ReactNode } from 'react';
+import PropTypes from 'prop-types';
+import { ReactNode } from 'react';
 export interface HeaderProps {
     children?: ReactNode;
     /**
@@ -20,5 +21,21 @@ export interface HeaderProps {
      */
     className?: string;
 }
-declare const Header: React.FC<HeaderProps>;
+declare const Header: {
+    ({ className: customClassName, children, ...rest }: HeaderProps): import("react/jsx-runtime").JSX.Element;
+    propTypes: {
+        /**
+         * Optionally provide aria-label
+         */
+        'aria-label': PropTypes.Requireable<string>;
+        /**
+         * Optionally provide aria-labelledby
+         */
+        'aria-labelledby': PropTypes.Requireable<string>;
+        /**
+         * Optionally provide a custom class name that is applied to the underlying header
+         */
+        className: PropTypes.Requireable<string>;
+    };
+};
 export default Header;

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

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -55,5 +55,5 @@ export interface HeaderGlobalActionProps {
  *
  * Note: children passed to this component should be an Icon.
  */
-declare const HeaderGlobalAction: React.FC<HeaderGlobalActionProps>;
+declare const HeaderGlobalAction: React.ForwardRefExoticComponent<HeaderGlobalActionProps & React.RefAttributes<HTMLButtonElement>>;
 export default HeaderGlobalAction;

package/es/components/UIShell/HeaderName.js

@@ -24,7 +24,7 @@ function HeaderName({
     className: className
   }), prefix && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
     className: `${selectorPrefix}--header__name--prefix`
-  }, prefix), "\xA0"), children);
+  }, prefix), "\xA0"), /*#__PURE__*/React.createElement("span", null, children));
 }
 HeaderName.propTypes = {
   /**

package/es/components/UIShell/Link.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.

package/es/components/UIShell/Link.js

@@ -7,29 +7,29 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { deprecate } from '../../prop-types/deprecate.js';
 
 // First define the component without generics
 
-const LinkBase = ({
-  element,
-  as: BaseComponent,
-  // Captured here to prevent it from being passed into the created element.
-  // See https://github.com/carbon-design-system/carbon/issues/3970
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20452
-  isSideNavExpanded: _isSideNavExpanded,
-  ...rest
-}, ref) => {
+const frFn = forwardRef;
+const Link = frFn((props, ref) => {
+  const {
+    element,
+    as: BaseComponent,
+    // Captured here to prevent it from being passed into the created element.
+    // See https://github.com/carbon-design-system/carbon/issues/3970
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20452
+    isSideNavExpanded: _isSideNavExpanded,
+    ...rest
+  } = props;
+
   // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
   const BaseComponentAsAny = BaseComponent ?? element ?? 'a';
   return /*#__PURE__*/React.createElement(BaseComponentAsAny, _extends({
     ref: ref
   }, rest));
-};
-
-// Use forwardRef with the non-generic function
-const Link = /*#__PURE__*/React.forwardRef(LinkBase);
+});
 
 /**
  * Link is a custom component that allows us to supporting rendering elements

package/es/components/UIShell/SideNav.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.
@@ -9,7 +9,7 @@ export interface SideNavProps {
     expanded?: boolean | undefined;
     defaultExpanded?: boolean | undefined;
     isChildOfHeader?: boolean | undefined;
-    onToggle?: (event: FocusEvent<HTMLElement> | KeyboardEvent<HTMLElement> | boolean, value: boolean) => void | undefined;
+    onToggle?: (event: FocusEvent<HTMLElement> | KeyboardEvent<HTMLElement> | boolean, value: boolean) => void;
     href?: string | undefined;
     isFixedNav?: boolean | undefined;
     isRail?: boolean | undefined;
@@ -17,9 +17,8 @@ export interface SideNavProps {
     addFocusListeners?: boolean | undefined;
     addMouseListeners?: boolean | undefined;
     onOverlayClick?: MouseEventHandler<HTMLDivElement> | undefined;
-    onSideNavBlur?: () => void | 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, { 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';
@@ -24,28 +24,30 @@ import { useMatchMedia } from '../../internal/useMatchMedia.js';
 // import SideNavFooter from './SideNavFooter';
 
 const SideNavContext = /*#__PURE__*/createContext({});
-function SideNavRenderFunction({
-  expanded: expandedProp,
-  defaultExpanded = false,
-  isChildOfHeader = true,
-  'aria-label': ariaLabel,
-  'aria-labelledby': ariaLabelledBy,
-  children,
-  onToggle,
-  className: customClassName,
-  // TO-DO: comment back in when footer is added for rails
-  // translateById: t = (id) => translations[id],
-  href,
-  isFixedNav = false,
-  isRail,
-  isPersistent = true,
-  addFocusListeners = true,
-  addMouseListeners = true,
-  onOverlayClick,
-  onSideNavBlur,
-  enterDelayMs = 100,
-  ...other
-}, ref) {
+const frFn = forwardRef;
+const SideNav = frFn((props, ref) => {
+  const {
+    expanded: expandedProp,
+    defaultExpanded = false,
+    isChildOfHeader = true,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
+    children,
+    onToggle,
+    className: customClassName,
+    // TO-DO: comment back in when footer is added for rails
+    // translateById: t = (id) => translations[id],
+    href,
+    isFixedNav = false,
+    isRail,
+    isPersistent = true,
+    addFocusListeners = true,
+    addMouseListeners = true,
+    onOverlayClick,
+    onSideNavBlur,
+    enterDelayMs = 100,
+    ...other
+  } = props;
   const prefix = usePrefix();
   const {
     current: controlled
@@ -155,6 +157,16 @@ function SideNavRenderFunction({
   });
   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
@@ -168,11 +180,9 @@ function SideNavRenderFunction({
   }), /*#__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));
-}
-const SideNav = /*#__PURE__*/React.forwardRef(SideNavRenderFunction);
+});
 SideNav.displayName = 'SideNav';
 SideNav.propTypes = {
   /**

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

@@ -1,15 +1,23 @@
 /**
- * Copyright IBM Corp. 2021
+ * Copyright IBM Corp. 2021, 2025
  *
  * 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 from 'react';
+import PropTypes from 'prop-types';
 interface SideNavDividerProps {
     /**
      * Provide an optional class to be applied to the containing node
      */
     className?: string;
 }
-declare const SideNavDivider: React.FC<SideNavDividerProps>;
+declare const SideNavDivider: {
+    ({ className }: SideNavDividerProps): import("react/jsx-runtime").JSX.Element;
+    propTypes: {
+        /**
+         * Provide an optional class to be applied to the containing node
+         */
+        className: PropTypes.Requireable<string>;
+    };
+};
 export default SideNavDivider;

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

@@ -4,6 +4,7 @@
  * 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 PropTypes from 'prop-types';
 import React from 'react';
 export interface SideNavHeaderProps {
     /**
@@ -24,5 +25,27 @@ export interface SideNavHeaderProps {
      */
     renderIcon: React.ComponentType;
 }
-declare const SideNavHeader: React.FC<SideNavHeaderProps>;
+declare const SideNavHeader: {
+    ({ children, className: customClassName, renderIcon: IconElement, }: SideNavHeaderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+    propTypes: {
+        /**
+         * The child nodes to be rendered
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Provide an optional class to be applied to the containing node
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Property to indicate if the side nav container is open (or not). Use to
+         * keep local state and styling in step with the SideNav expansion state.
+         */
+        isSideNavExpanded: PropTypes.Requireable<boolean>;
+        /**
+         * A component used to render an icon.
+         */
+        renderIcon: PropTypes.Validator<object>;
+    };
+};
 export default SideNavHeader;