@carbon/react 1.102.0-rc.0 → 1.103.0-rc.0

package/es/components/Slider/SliderHandles.js

@@ -6,61 +6,73 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import { PrefixContext } from '../../internal/usePrefix.js';
+import { usePrefix } from '../../internal/usePrefix.js';
 import React from 'react';
 
 var _path, _path2, _path3, _path4, _path5, _path6, _path7, _path8, _path9, _path0, _path1, _path10, _path11, _path12;
-const LowerHandle = props => /*#__PURE__*/React.createElement(PrefixContext.Consumer, null, prefix => /*#__PURE__*/React.createElement("svg", _extends({
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 16 24",
-  className: `${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--lower`
-}, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
-  d: "M15.08 6.46H16v11.08h-.92zM4.46 17.54c-.25 0-.46-.21-.46-.46V6.92a.465.465 0 0 1 .69-.4l8.77 5.08a.46.46 0 0 1 0 .8l-8.77 5.08c-.07.04-.15.06-.23.06Z"
-})), _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
-  fill: "none",
-  d: "M-4 0h24v24H-4z"
-}))));
-const LowerHandleFocus = props => /*#__PURE__*/React.createElement(PrefixContext.Consumer, null, prefix => /*#__PURE__*/React.createElement("svg", _extends({
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 16 24",
-  className: `${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--lower ${prefix}--slider__thumb-icon--focus`
-}, props), _path3 || (_path3 = /*#__PURE__*/React.createElement("path", {
-  d: "M15.08 6.46H16v11.08h-.92zM4.46 17.54c-.25 0-.46-.21-.46-.46V6.92a.465.465 0 0 1 .69-.4l8.77 5.08a.46.46 0 0 1 0 .8l-8.77 5.08c-.07.04-.15.06-.23.06Z"
-})), _path4 || (_path4 = /*#__PURE__*/React.createElement("path", {
-  fill: "none",
-  d: "M-4 0h24v24H-4z"
-})), _path5 || (_path5 = /*#__PURE__*/React.createElement("path", {
-  d: "M15.08 0H16v6.46h-.92z"
-})), _path6 || (_path6 = /*#__PURE__*/React.createElement("path", {
-  d: "M0 0h.92v24H0zM15.08 0H16v24h-.92z"
-})), _path7 || (_path7 = /*#__PURE__*/React.createElement("path", {
-  d: "M0 .92V0h16v.92zM0 24v-.92h16V24z"
-}))));
-const UpperHandle = props => /*#__PURE__*/React.createElement(PrefixContext.Consumer, null, prefix => /*#__PURE__*/React.createElement("svg", _extends({
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 16 24",
-  className: `${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--upper`
-}, props), _path8 || (_path8 = /*#__PURE__*/React.createElement("path", {
-  d: "M0 6.46h.92v11.08H0zM11.54 6.46c.25 0 .46.21.46.46v10.15a.465.465 0 0 1-.69.4L2.54 12.4a.46.46 0 0 1 0-.8l8.77-5.08c.07-.04.15-.06.23-.06Z"
-})), _path9 || (_path9 = /*#__PURE__*/React.createElement("path", {
-  fill: "none",
-  d: "M-4 0h24v24H-4z"
-}))));
-const UpperHandleFocus = props => /*#__PURE__*/React.createElement(PrefixContext.Consumer, null, prefix => /*#__PURE__*/React.createElement("svg", _extends({
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 16 24",
-  className: `${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--upper ${prefix}--slider__thumb-icon--focus`
-}, props), _path0 || (_path0 = /*#__PURE__*/React.createElement("path", {
-  d: "M0 6.46h.92v11.08H0zM11.54 6.46c.25 0 .46.21.46.46v10.15a.465.465 0 0 1-.69.4L2.54 12.4a.46.46 0 0 1 0-.8l8.77-5.08c.07-.04.15-.06.23-.06Z"
-})), _path1 || (_path1 = /*#__PURE__*/React.createElement("path", {
-  fill: "none",
-  d: "M-4 0h24v24H-4z"
-})), _path10 || (_path10 = /*#__PURE__*/React.createElement("path", {
-  d: "M.92 24H0v-6.46h.92z"
-})), _path11 || (_path11 = /*#__PURE__*/React.createElement("path", {
-  d: "M16 24h-.92V0H16zM.92 24H0V0h.92z"
-})), _path12 || (_path12 = /*#__PURE__*/React.createElement("path", {
-  d: "M16 23.08V24H0v-.92zM16 0v.92H0V0z"
-}))));
+const LowerHandle = props => {
+  const prefix = usePrefix();
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 16 24",
+    className: `${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--lower`
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    d: "M15.08 6.46H16v11.08h-.92zM4.46 17.54c-.25 0-.46-.21-.46-.46V6.92a.465.465 0 0 1 .69-.4l8.77 5.08a.46.46 0 0 1 0 .8l-8.77 5.08c-.07.04-.15.06-.23.06Z"
+  })), _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    d: "M-4 0h24v24H-4z"
+  })));
+};
+const LowerHandleFocus = props => {
+  const prefix = usePrefix();
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 16 24",
+    className: `${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--lower ${prefix}--slider__thumb-icon--focus`
+  }, props), _path3 || (_path3 = /*#__PURE__*/React.createElement("path", {
+    d: "M15.08 6.46H16v11.08h-.92zM4.46 17.54c-.25 0-.46-.21-.46-.46V6.92a.465.465 0 0 1 .69-.4l8.77 5.08a.46.46 0 0 1 0 .8l-8.77 5.08c-.07.04-.15.06-.23.06Z"
+  })), _path4 || (_path4 = /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    d: "M-4 0h24v24H-4z"
+  })), _path5 || (_path5 = /*#__PURE__*/React.createElement("path", {
+    d: "M15.08 0H16v6.46h-.92z"
+  })), _path6 || (_path6 = /*#__PURE__*/React.createElement("path", {
+    d: "M0 0h.92v24H0zM15.08 0H16v24h-.92z"
+  })), _path7 || (_path7 = /*#__PURE__*/React.createElement("path", {
+    d: "M0 .92V0h16v.92zM0 24v-.92h16V24z"
+  })));
+};
+const UpperHandle = props => {
+  const prefix = usePrefix();
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 16 24",
+    className: `${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--upper`
+  }, props), _path8 || (_path8 = /*#__PURE__*/React.createElement("path", {
+    d: "M0 6.46h.92v11.08H0zM11.54 6.46c.25 0 .46.21.46.46v10.15a.465.465 0 0 1-.69.4L2.54 12.4a.46.46 0 0 1 0-.8l8.77-5.08c.07-.04.15-.06.23-.06Z"
+  })), _path9 || (_path9 = /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    d: "M-4 0h24v24H-4z"
+  })));
+};
+const UpperHandleFocus = props => {
+  const prefix = usePrefix();
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 16 24",
+    className: `${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--upper ${prefix}--slider__thumb-icon--focus`
+  }, props), _path0 || (_path0 = /*#__PURE__*/React.createElement("path", {
+    d: "M0 6.46h.92v11.08H0zM11.54 6.46c.25 0 .46.21.46.46v10.15a.465.465 0 0 1-.69.4L2.54 12.4a.46.46 0 0 1 0-.8l8.77-5.08c.07-.04.15-.06.23-.06Z"
+  })), _path1 || (_path1 = /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    d: "M-4 0h24v24H-4z"
+  })), _path10 || (_path10 = /*#__PURE__*/React.createElement("path", {
+    d: "M.92 24H0v-6.46h.92z"
+  })), _path11 || (_path11 = /*#__PURE__*/React.createElement("path", {
+    d: "M16 24h-.92V0H16zM.92 24H0V0h.92z"
+  })), _path12 || (_path12 = /*#__PURE__*/React.createElement("path", {
+    d: "M16 23.08V24H0v-.92zM16 0v.92H0V0z"
+  })));
+};
 
 export { LowerHandle, LowerHandleFocus, UpperHandle, UpperHandleFocus };

package/es/components/Switch/IconSwitch.js

@@ -7,7 +7,7 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React, { forwardRef, useState } from 'react';
+import React, { useState, forwardRef } from 'react';
 import cx from 'classnames';
 import { IconButton } from '../IconButton/index.js';
 import { usePrefix } from '../../internal/usePrefix.js';

package/es/components/Tabs/Tabs.js

@@ -10,7 +10,7 @@ import { Close, ChevronLeft, ChevronRight } from '@carbon/icons-react';
 import { breakpoints } from '@carbon/layout';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React, { forwardRef, createContext, useRef, useState, useMemo, isValidElement, Children, cloneElement, useCallback, useEffect } from 'react';
+import React, { forwardRef, useRef, useState, useMemo, isValidElement, createContext, Children, useCallback, useEffect, cloneElement } from 'react';
 import '../Grid/FlexGrid.js';
 import { Grid as GridAsGridComponent } from '../Grid/Grid.js';
 import '../Grid/Row.js';
@@ -1038,11 +1038,7 @@ const IconTab = /*#__PURE__*/React.forwardRef(({
   const value = useMemo(() => ({
     badgeIndicator
   }), [badgeIndicator]);
-  const hasSize20 = /*#__PURE__*/isValidElement(children) &&
-  // TODO: The interface allows `size` to be a string. Should this case be
-  // handled here, or should the prop type be restricted to `number`
-  // instead?
-  children.props.size === 20;
+  const hasSize20 = /*#__PURE__*/isValidElement(children) && (children.props.size === 20 || children.props.size === '20');
   const classNames = cx(`${prefix}--tabs__nav-item--icon-only`, customClassName, {
     [`${prefix}--tabs__nav-item--icon-only__20`]: hasSize20
   });

package/es/components/Tag/Tag.Skeleton.js

@@ -38,4 +38,4 @@ TagSkeleton.propTypes = {
   size: PropTypes.oneOf(['sm'])
 };
 
-export { TagSkeleton, TagSkeleton as default };
+export { TagSkeleton };

package/es/components/TextArea/TextArea.js

@@ -7,7 +7,7 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React, { forwardRef, useContext, useRef, useState, useEffect, cloneElement } from 'react';
+import React, { useContext, useRef, useState, useEffect, forwardRef, cloneElement } from 'react';
 import cx from 'classnames';
 import { deprecate } from '../../prop-types/deprecate.js';
 import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';

package/es/components/TextArea/index.js

@@ -6,7 +6,7 @@
  */
 
 import TextArea from './TextArea.js';
-export { default as TextAreaSkeleton } from './TextArea.Skeleton.js';
+export { TextAreaSkeleton } from './TextArea.Skeleton.js';
 
 
 

package/es/components/TextInput/index.js

@@ -6,7 +6,7 @@
  */
 
 import TextInput from './TextInput.js';
-export { default as TextInputSkeleton } from './TextInput.Skeleton.js';
+export { TextInputSkeleton } from './TextInput.Skeleton.js';
 
 
 

package/es/components/Tile/Tile.js

@@ -6,7 +6,7 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React, { forwardRef, useState, useEffect, useCallback, useRef, cloneElement, Children } from 'react';
+import React, { useState, useEffect, useCallback, useRef, forwardRef, Children, cloneElement } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { AiLabel, CheckboxCheckedFilled, Checkbox, ChevronDown, ArrowRight, Error } from '@carbon/icons-react';

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

@@ -9,6 +9,7 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import PropTypes from 'prop-types';
 import React, { useState, useEffect, Children, isValidElement, cloneElement } from 'react';
 import RadioTile from '../RadioTile/RadioTile.js';
+import { isComponentElement } from '../../internal/utils.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { noopFn } from '../../internal/noopFn.js';
 
@@ -42,7 +43,7 @@ const TileGroup = ({
         if (! /*#__PURE__*/isValidElement(child)) return child;
 
         // If a `RadioTile` is found, return it with necessary props,
-        if (/*#__PURE__*/isValidElement(child) && child.type === RadioTile) {
+        if (isComponentElement(child, RadioTile)) {
           const {
             value,
             ...otherProps

package/es/components/Toggle/Toggle.Skeleton.js

@@ -30,4 +30,4 @@ ToggleSkeleton.propTypes = {
   className: PropTypes.string
 };
 
-export { ToggleSkeleton, ToggleSkeleton as default };
+export { ToggleSkeleton };

package/es/components/Toggletip/index.js

@@ -283,4 +283,4 @@ ToggletipActions.propTypes = {
   className: PropTypes.string
 };
 
-export { Toggletip, ToggletipActions, ToggletipButton, ToggletipContent, ToggletipLabel, Toggletip as default };
+export { Toggletip, ToggletipActions, ToggletipButton, ToggletipContent, ToggletipLabel };

package/es/components/UIShell/HeaderMenu.js

@@ -8,7 +8,7 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { ChevronDown } from '@carbon/icons-react';
 import cx from 'classnames';
-import React, { forwardRef, useContext, useState, useRef, Children, isValidElement, cloneElement } from 'react';
+import React, { useContext, useState, useRef, Children, forwardRef, isValidElement, cloneElement } from 'react';
 import PropTypes from 'prop-types';
 import { Escape, Enter, Space } from '../../internal/keyboard/keys.js';
 import { matches } from '../../internal/keyboard/match.js';

package/es/components/UIShell/HeaderPanel.js

@@ -8,7 +8,8 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useRef, useState, isValidElement } from 'react';
+import React, { useRef, useState } from 'react';
+import { isComponentElement } from '../../internal/utils.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { Escape } from '../../internal/keyboard/keys.js';
 import { match } from '../../internal/keyboard/match.js';
@@ -64,7 +65,7 @@ const HeaderPanel = /*#__PURE__*/React.forwardRef(({
     } = event;
     if (!(target instanceof Element)) return;
     setLastClickedElement(target);
-    const isChildASwitcher = /*#__PURE__*/isValidElement(children) && typeof children.type !== 'string' && children.type === Switcher;
+    const isChildASwitcher = isComponentElement(children, Switcher);
     if (isChildASwitcher && !target.closest(`.${prefix}--header-panel--expanded`) && !target.closest(`.${prefix}--header__action`) && !headerPanelReference?.current?.classList.contains(`${prefix}--switcher`) && expanded) {
       setExpandedState(false);
       onHeaderPanelFocus();

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

@@ -20,9 +20,6 @@ export interface SideNavProps {
     onSideNavBlur?: () => void;
     enterDelayMs?: number;
 }
-interface SideNavContextData {
-    isRail?: boolean | undefined;
-}
-export declare const SideNavContext: React.Context<SideNavContextData>;
 declare const SideNav: React.ForwardRefExoticComponent<Omit<SideNavProps & React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
 export default SideNav;
+export { SideNavContext } from './SideNavContext';

package/es/components/UIShell/SideNav.js

@@ -6,24 +6,24 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React, { forwardRef, useRef, isValidElement, useEffect, createContext } from 'react';
+import React, { useRef, useEffect, forwardRef } from 'react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
-import { CARBON_SIDENAV_ITEMS } from './_utils.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { Tab, Escape } from '../../internal/keyboard/keys.js';
 import { match } from '../../internal/keyboard/match.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import { useWindowEvent } from '../../internal/useEvent.js';
 import { useDelayedState } from '../../internal/useDelayedState.js';
+import { SideNavContextProvider } from './SideNavContext.js';
+export { SideNavContext } from './SideNavContext.js';
 import { breakpoints } from '@carbon/layout';
 import { useMatchMedia } from '../../internal/useMatchMedia.js';
 
 // TODO: comment back in when footer is added for rails
 // import SideNavFooter from './SideNavFooter';
 
-const SideNavContext = /*#__PURE__*/createContext({});
 const frFn = forwardRef;
 const SideNav = frFn((props, ref) => {
   const {
@@ -90,23 +90,9 @@ const SideNav = frFn((props, ref) => {
     [`${prefix}--side-nav__overlay`]: true,
     [`${prefix}--side-nav__overlay-active`]: expanded || expandedViaHoverState
   });
-  let childrenToRender = children;
 
-  // Pass the expansion state as a prop, so children can update themselves to match
-  childrenToRender = React.Children.map(children, child => {
-    // if we are controlled, check for if we have hovered over or the expanded state, else just use the expanded state (uncontrolled)
-    const currentExpansionState = controlled ? expandedViaHoverState || expanded : expanded;
-    if (/*#__PURE__*/isValidElement(child)) {
-      const childJsxElement = child;
-      // avoid spreading `isSideNavExpanded` to non-Carbon UI Shell children
-      return /*#__PURE__*/React.cloneElement(childJsxElement, {
-        ...(CARBON_SIDENAV_ITEMS.includes(childJsxElement.type?.displayName ?? childJsxElement.type?.name) ? {
-          isSideNavExpanded: currentExpansionState
-        } : {})
-      });
-    }
-    return child;
-  });
+  // In controlled mode, rail hover can temporarily expand SideNav.
+  const currentExpansionState = controlled ? expandedViaHoverState || expanded : expanded;
   const eventHandlers = {};
   if (addFocusListeners) {
     eventHandlers.onFocus = event => {
@@ -167,10 +153,9 @@ const SideNav = frFn((props, ref) => {
       node.removeAttribute('inert');
     }
   }, [inertEnabled]);
-  return /*#__PURE__*/React.createElement(SideNavContext.Provider, {
-    value: {
-      isRail
-    }
+  return /*#__PURE__*/React.createElement(SideNavContextProvider, {
+    isRail: isRail,
+    isSideNavExpanded: currentExpansionState
   }, isFixedNav ? null :
   /*#__PURE__*/
   // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
@@ -181,7 +166,7 @@ const SideNav = frFn((props, ref) => {
     tabIndex: -1,
     ref: navRef,
     className: `${prefix}--side-nav__navigation ${className}`
-  }, accessibilityLabel, eventHandlers, other), childrenToRender));
+  }, accessibilityLabel, eventHandlers, other), children));
 });
 SideNav.displayName = 'SideNav';
 SideNav.propTypes = {
@@ -264,4 +249,4 @@ SideNav.propTypes = {
   // translateById: PropTypes.func,
 };
 
-export { SideNavContext, SideNav as default };
+export { SideNav as default };

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

@@ -0,0 +1,17 @@
+/**
+ * Copyright IBM Corp. 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 ReactNode } from 'react';
+interface SideNavContextData {
+    isRail?: boolean | undefined;
+    isSideNavExpanded?: boolean | undefined;
+}
+export declare const SideNavContext: React.Context<SideNavContextData>;
+interface SideNavContextProviderProps extends SideNavContextData {
+    children: ReactNode;
+}
+export declare const SideNavContextProvider: ({ children, isRail, isSideNavExpanded, }: SideNavContextProviderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/es/components/UIShell/SideNavContext.js

@@ -0,0 +1,24 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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, { createContext } from 'react';
+
+const SideNavContext = /*#__PURE__*/createContext({});
+const SideNavContextProvider = ({
+  children,
+  isRail,
+  isSideNavExpanded
+}) => {
+  return /*#__PURE__*/React.createElement(SideNavContext.Provider, {
+    value: {
+      isRail,
+      isSideNavExpanded
+    }
+  }, children);
+};
+
+export { SideNavContext, SideNavContextProvider };

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

@@ -7,8 +7,8 @@
 
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React from 'react';
-import { CARBON_SIDENAV_ITEMS } from './_utils.js';
+import React, { useContext } from 'react';
+import { SideNavContext, SideNavContextProvider } from './SideNavContext.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
 const SideNavItems = ({
@@ -17,22 +17,18 @@ const SideNavItems = ({
   isSideNavExpanded
 }) => {
   const prefix = usePrefix();
+  const {
+    isRail,
+    isSideNavExpanded: contextIsSideNavExpanded
+  } = useContext(SideNavContext);
+  const currentIsSideNavExpanded = isSideNavExpanded ?? contextIsSideNavExpanded;
   const className = cx([`${prefix}--side-nav__items`], customClassName);
-  const childrenWithExpandedState = React.Children.map(children, child => {
-    if (/*#__PURE__*/React.isValidElement(child)) {
-      // avoid spreading `isSideNavExpanded` to non-Carbon UI Shell children
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
-      const childDisplayName = child.type?.displayName;
-      return /*#__PURE__*/React.cloneElement(child, {
-        ...(CARBON_SIDENAV_ITEMS.includes(childDisplayName) ? {
-          isSideNavExpanded
-        } : {})
-      });
-    }
-  });
-  return /*#__PURE__*/React.createElement("ul", {
+  return /*#__PURE__*/React.createElement(SideNavContextProvider, {
+    isRail: isRail,
+    isSideNavExpanded: currentIsSideNavExpanded
+  }, /*#__PURE__*/React.createElement("ul", {
     className: className
-  }, childrenWithExpandedState);
+  }, children));
 };
 SideNavItems.displayName = 'SideNavItems';
 SideNavItems.propTypes = {

package/es/components/UIShell/SideNavLink.js

@@ -8,13 +8,13 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React, { forwardRef, useContext } from 'react';
+import React, { useContext, forwardRef } from 'react';
 import Link, { LinkPropTypes } from './Link.js';
 import SideNavIcon from './SideNavIcon.js';
 import SideNavItem from './SideNavItem.js';
 import SideNavLinkText from './SideNavLinkText.js';
+import { SideNavContext } from './SideNavContext.js';
 import { usePrefix } from '../../internal/usePrefix.js';
-import { SideNavContext } from './SideNav.js';
 
 // First define a non-generic base component to work with forwardRef
 
@@ -30,7 +30,11 @@ const SideNavLink = frFn((props, ref) => {
     tabIndex,
     ...rest
   } = props;
-  const isRail = useContext(SideNavContext);
+  const {
+    isRail,
+    isSideNavExpanded: contextIsSideNavExpanded
+  } = useContext(SideNavContext);
+  const currentIsSideNavExpanded = isSideNavExpanded ?? contextIsSideNavExpanded;
   const prefix = usePrefix();
   const className = cx({
     [`${prefix}--side-nav__link`]: true,
@@ -42,7 +46,7 @@ const SideNavLink = frFn((props, ref) => {
   }, /*#__PURE__*/React.createElement(Link, _extends({}, rest, {
     className: className,
     ref: ref,
-    tabIndex: tabIndex === undefined ? !isSideNavExpanded && !isRail ? -1 : 0 : tabIndex
+    tabIndex: tabIndex === undefined ? !currentIsSideNavExpanded && !isRail ? -1 : 0 : tabIndex
   }), IconElement && /*#__PURE__*/React.createElement(SideNavIcon, {
     small: true
   }, /*#__PURE__*/React.createElement(IconElement, null)), /*#__PURE__*/React.createElement(SideNavLinkText, null, children)));

package/es/components/UIShell/SideNavMenu.js

@@ -13,7 +13,7 @@ import SideNavIcon from './SideNavIcon.js';
 import { Escape } from '../../internal/keyboard/keys.js';
 import { match } from '../../internal/keyboard/match.js';
 import { usePrefix } from '../../internal/usePrefix.js';
-import { SideNavContext } from './SideNav.js';
+import { SideNavContext } from './SideNavContext.js';
 
 var _ChevronDown;
 const SideNavMenu = /*#__PURE__*/forwardRef(({
@@ -28,8 +28,10 @@ const SideNavMenu = /*#__PURE__*/forwardRef(({
   title
 }, ref) => {
   const {
-    isRail
+    isRail,
+    isSideNavExpanded: contextIsSideNavExpanded
   } = useContext(SideNavContext);
+  const currentIsSideNavExpanded = isSideNavExpanded ?? contextIsSideNavExpanded;
   const prefix = usePrefix();
   const [isExpanded, setIsExpanded] = useState(defaultExpanded);
   const [prevExpanded, setPrevExpanded] = useState(defaultExpanded);
@@ -40,10 +42,10 @@ const SideNavMenu = /*#__PURE__*/forwardRef(({
     [`${prefix}--side-nav__item--large`]: large,
     [customClassName]: !!customClassName
   });
-  if (!isSideNavExpanded && isExpanded && isRail) {
+  if (!currentIsSideNavExpanded && isExpanded && isRail) {
     setIsExpanded(false);
     setPrevExpanded(true);
-  } else if (isSideNavExpanded && prevExpanded && isRail) {
+  } else if (currentIsSideNavExpanded && prevExpanded && isRail) {
     setIsExpanded(true);
     setPrevExpanded(false);
   }
@@ -65,7 +67,7 @@ const SideNavMenu = /*#__PURE__*/forwardRef(({
       },
       ref: ref,
       type: "button",
-      tabIndex: tabIndex === undefined ? !isSideNavExpanded && !isRail ? -1 : 0 : tabIndex
+      tabIndex: tabIndex === undefined ? !currentIsSideNavExpanded && !isRail ? -1 : 0 : tabIndex
     }, IconElement && /*#__PURE__*/React.createElement(SideNavIcon, null, /*#__PURE__*/React.createElement(IconElement, null)), /*#__PURE__*/React.createElement("span", {
       className: `${prefix}--side-nav__submenu-title`
     }, title), /*#__PURE__*/React.createElement(SideNavIcon, {

package/es/components/UIShell/Switcher.js

@@ -6,10 +6,11 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React, { forwardRef, useRef, Children, isValidElement, cloneElement } from 'react';
+import React, { forwardRef, useRef, Children, cloneElement } from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
+import { isComponentElement } from '../../internal/utils.js';
 import PropTypes from 'prop-types';
 import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
 import SwitcherItem from './SwitcherItem.js';
@@ -38,7 +39,7 @@ const Switcher = /*#__PURE__*/forwardRef((props, forwardRef) => {
     direction
   }) => {
     const enabledIndices = Children.toArray(children).reduce((acc, child, i) => {
-      if (/*#__PURE__*/isValidElement(child) && child.type === SwitcherItem && Object.keys(child.props).length) {
+      if (isComponentElement(child, SwitcherItem) && Object.keys(child.props).length) {
         acc.push(i);
       }
       return acc;
@@ -66,7 +67,7 @@ const Switcher = /*#__PURE__*/forwardRef((props, forwardRef) => {
     }
   };
   const childrenWithProps = Children.toArray(children).map((child, index) => {
-    if (/*#__PURE__*/isValidElement(child) && child.type === SwitcherItem) {
+    if (isComponentElement(child, SwitcherItem)) {
       return /*#__PURE__*/cloneElement(child, {
         handleSwitcherItemFocus,
         index,
@@ -74,7 +75,7 @@ const Switcher = /*#__PURE__*/forwardRef((props, forwardRef) => {
         expanded
       });
     }
-    if (/*#__PURE__*/isValidElement(child) && child.type === SwitcherDivider) {
+    if (isComponentElement(child, SwitcherDivider)) {
       return /*#__PURE__*/cloneElement(child, {
         key: index
       });