@carbon/react 1.102.0 → 1.103.0

package/lib/components/Slider/SliderHandles.js

@@ -12,58 +12,70 @@ var usePrefix = require('../../internal/usePrefix.js');
 var React = require('react');
 
 var _path, _path2, _path3, _path4, _path5, _path6, _path7, _path8, _path9, _path0, _path1, _path10, _path11, _path12;
-const LowerHandle = props => /*#__PURE__*/React.createElement(usePrefix.PrefixContext.Consumer, null, prefix => /*#__PURE__*/React.createElement("svg", _rollupPluginBabelHelpers.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(usePrefix.PrefixContext.Consumer, null, prefix => /*#__PURE__*/React.createElement("svg", _rollupPluginBabelHelpers.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(usePrefix.PrefixContext.Consumer, null, prefix => /*#__PURE__*/React.createElement("svg", _rollupPluginBabelHelpers.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(usePrefix.PrefixContext.Consumer, null, prefix => /*#__PURE__*/React.createElement("svg", _rollupPluginBabelHelpers.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.usePrefix();
+  return /*#__PURE__*/React.createElement("svg", _rollupPluginBabelHelpers.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.usePrefix();
+  return /*#__PURE__*/React.createElement("svg", _rollupPluginBabelHelpers.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.usePrefix();
+  return /*#__PURE__*/React.createElement("svg", _rollupPluginBabelHelpers.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.usePrefix();
+  return /*#__PURE__*/React.createElement("svg", _rollupPluginBabelHelpers.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"
+  })));
+};
 
 exports.LowerHandle = LowerHandle;
 exports.LowerHandleFocus = LowerHandleFocus;

package/lib/components/Tabs/Tabs.js

@@ -290,6 +290,9 @@ function TabList({
   // VISIBLE IF:
   //   SCROLLABLE
   //   AND SCROLL_LEFT > 0
+  //
+  // TODO: Hoist `buttonWidth` to a module level constant like
+  // `verticalTabHeight`.
   const buttonWidth = 44;
   // Next Button
   // VISIBLE IF:
@@ -384,14 +387,13 @@ function TabList({
     // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20452
   }, []);
   React.useEffect(() => {
-    //adding 1 in calculation for firefox support
+    // adding 1 in calculation for firefox support
     setIsNextButtonVisible(ref.current ? scrollLeft + buttonWidth + ref.current.clientWidth + 1 < ref.current.scrollWidth : false);
-    if (dismissable) {
-      if (ref.current) {
-        setIsScrollable(ref.current.scrollWidth > ref.current.clientWidth);
-      }
+    if (dismissable && ref.current) {
+      // adding 1 in calculation for firefox support
+      setIsScrollable(ref.current.scrollWidth > ref.current.clientWidth + 1);
     }
-  }, [scrollLeft, children, dismissable, isScrollable]);
+  }, [children, dismissable, scrollLeft]);
   React.useEffect(() => {
     if (tabs.current[selectedIndex]?.disabled) {
       const activeTabs = tabs.current.filter(tab => {
@@ -1040,11 +1042,7 @@ const IconTab = /*#__PURE__*/React.forwardRef(({
   const value = React.useMemo(() => ({
     badgeIndicator
   }), [badgeIndicator]);
-  const hasSize20 = /*#__PURE__*/React.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__*/React.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/lib/components/Tag/Tag.Skeleton.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var PropTypes = require('prop-types');
 var React = require('react');
@@ -43,4 +41,3 @@ TagSkeleton.propTypes = {
 };
 
 exports.TagSkeleton = TagSkeleton;
-exports.default = TagSkeleton;

package/lib/components/TextArea/index.js

@@ -16,4 +16,4 @@ var TextArea_Skeleton = require('./TextArea.Skeleton.js');
 
 exports.TextArea = TextArea.default;
 exports.default = TextArea.default;
-exports.TextAreaSkeleton = TextArea_Skeleton.default;
+exports.TextAreaSkeleton = TextArea_Skeleton.TextAreaSkeleton;

package/lib/components/TextInput/index.js

@@ -16,4 +16,4 @@ var TextInput_Skeleton = require('./TextInput.Skeleton.js');
 
 exports.TextInput = TextInput.default;
 exports.default = TextInput.default;
-exports.TextInputSkeleton = TextInput_Skeleton.default;
+exports.TextInputSkeleton = TextInput_Skeleton.TextInputSkeleton;

package/lib/components/Tile/Tile.d.ts

@@ -59,11 +59,11 @@ export interface ClickableTileProps extends HTMLAttributes<HTMLAnchorElement> {
     /**
      * Specify the function to run when the ClickableTile is clicked
      */
-    onClick?(event: MouseEvent): void;
+    onClick?(event: MouseEvent<HTMLAnchorElement> | KeyboardEvent<HTMLAnchorElement>): void;
     /**
      * Specify the function to run when the ClickableTile is interacted with via a keyboard
      */
-    onKeyDown?(event: KeyboardEvent): void;
+    onKeyDown?(event: KeyboardEvent<HTMLAnchorElement>): void;
     /**
      * The rel property for the link.
      */

package/lib/components/Tile/Tile.js

@@ -108,6 +108,9 @@ const ClickableTile = /*#__PURE__*/React.forwardRef(({
     [`${prefix}--tile--decorator`]: decorator,
     [`${prefix}--tile--decorator-rounded`]: decorator && hasRoundedCorners
   }, className);
+
+  // TODO: Can this be removed? Or is cds--tile--is-clicked supposed to use this instead of `clicked`?
+  // This state is never used
   const [isSelected, setIsSelected] = React.useState(clicked);
   function handleOnClick(evt) {
     evt?.persist?.();
@@ -116,8 +119,10 @@ const ClickableTile = /*#__PURE__*/React.forwardRef(({
   }
   function handleOnKeyDown(evt) {
     evt?.persist?.();
-    if (match.matches(evt, [keys.Enter, keys.Space])) {
+    if (!href && match.matches(evt, [keys.Enter, keys.Space])) {
+      evt.preventDefault();
       setIsSelected(!isSelected);
+      onClick(evt);
     }
     onKeyDown(evt);
   }

package/lib/components/Toggle/Toggle.Skeleton.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var PropTypes = require('prop-types');
 var React = require('react');
@@ -35,4 +33,3 @@ ToggleSkeleton.propTypes = {
 };
 
 exports.ToggleSkeleton = ToggleSkeleton;
-exports.default = ToggleSkeleton;

package/lib/components/Toggletip/index.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var cx = require('classnames');
 var PropTypes = require('prop-types');
@@ -292,4 +290,3 @@ exports.ToggletipActions = ToggletipActions;
 exports.ToggletipButton = ToggletipButton;
 exports.ToggletipContent = ToggletipContent;
 exports.ToggletipLabel = ToggletipLabel;
-exports.default = Toggletip;

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

@@ -14,20 +14,19 @@ var React = require('react');
 var cx = require('classnames');
 var PropTypes = require('prop-types');
 var AriaPropTypes = require('../../prop-types/AriaPropTypes.js');
-var _utils = require('./_utils.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var keys = require('../../internal/keyboard/keys.js');
 var match = require('../../internal/keyboard/match.js');
 var useMergedRefs = require('../../internal/useMergedRefs.js');
 var useEvent = require('../../internal/useEvent.js');
 var useDelayedState = require('../../internal/useDelayedState.js');
+var SideNavContext = require('./SideNavContext.js');
 var layout = require('@carbon/layout');
 var useMatchMedia = require('../../internal/useMatchMedia.js');
 
 // TODO: comment back in when footer is added for rails
 // import SideNavFooter from './SideNavFooter';
 
-const SideNavContext = /*#__PURE__*/React.createContext({});
 const frFn = React.forwardRef;
 const SideNav = frFn((props, ref) => {
   const {
@@ -94,23 +93,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__*/React.isValidElement(child)) {
-      const childJsxElement = child;
-      // avoid spreading `isSideNavExpanded` to non-Carbon UI Shell children
-      return /*#__PURE__*/React.cloneElement(childJsxElement, {
-        ...(_utils.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 => {
@@ -171,10 +156,9 @@ const SideNav = frFn((props, ref) => {
       node.removeAttribute('inert');
     }
   }, [inertEnabled]);
-  return /*#__PURE__*/React.createElement(SideNavContext.Provider, {
-    value: {
-      isRail
-    }
+  return /*#__PURE__*/React.createElement(SideNavContext.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
@@ -185,7 +169,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 = {
@@ -268,5 +252,5 @@ SideNav.propTypes = {
   // translateById: PropTypes.func,
 };
 
-exports.SideNavContext = SideNavContext;
+exports.SideNavContext = SideNavContext.SideNavContext;
 exports.default = SideNav;

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

@@ -0,0 +1,27 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+var React = require('react');
+
+const SideNavContext = /*#__PURE__*/React.createContext({});
+const SideNavContextProvider = ({
+  children,
+  isRail,
+  isSideNavExpanded
+}) => {
+  return /*#__PURE__*/React.createElement(SideNavContext.Provider, {
+    value: {
+      isRail,
+      isSideNavExpanded
+    }
+  }, children);
+};
+
+exports.SideNavContext = SideNavContext;
+exports.SideNavContextProvider = SideNavContextProvider;

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

@@ -12,7 +12,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var cx = require('classnames');
 var PropTypes = require('prop-types');
 var React = require('react');
-var _utils = require('./_utils.js');
+var SideNavContext = require('./SideNavContext.js');
 var usePrefix = require('../../internal/usePrefix.js');
 
 const SideNavItems = ({
@@ -21,22 +21,18 @@ const SideNavItems = ({
   isSideNavExpanded
 }) => {
   const prefix = usePrefix.usePrefix();
+  const {
+    isRail,
+    isSideNavExpanded: contextIsSideNavExpanded
+  } = React.useContext(SideNavContext.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, {
-        ...(_utils.CARBON_SIDENAV_ITEMS.includes(childDisplayName) ? {
-          isSideNavExpanded
-        } : {})
-      });
-    }
-  });
-  return /*#__PURE__*/React.createElement("ul", {
+  return /*#__PURE__*/React.createElement(SideNavContext.SideNavContextProvider, {
+    isRail: isRail,
+    isSideNavExpanded: currentIsSideNavExpanded
+  }, /*#__PURE__*/React.createElement("ul", {
     className: className
-  }, childrenWithExpandedState);
+  }, children));
 };
 SideNavItems.displayName = 'SideNavItems';
 SideNavItems.propTypes = {

package/lib/components/UIShell/SideNavLink.js

@@ -17,8 +17,8 @@ var Link = require('./Link.js');
 var SideNavIcon = require('./SideNavIcon.js');
 var SideNavItem = require('./SideNavItem.js');
 var SideNavLinkText = require('./SideNavLinkText.js');
+var SideNavContext = require('./SideNavContext.js');
 var usePrefix = require('../../internal/usePrefix.js');
-var SideNav = require('./SideNav.js');
 
 // First define a non-generic base component to work with forwardRef
 
@@ -34,7 +34,11 @@ const SideNavLink = frFn((props, ref) => {
     tabIndex,
     ...rest
   } = props;
-  const isRail = React.useContext(SideNav.SideNavContext);
+  const {
+    isRail,
+    isSideNavExpanded: contextIsSideNavExpanded
+  } = React.useContext(SideNavContext.SideNavContext);
+  const currentIsSideNavExpanded = isSideNavExpanded ?? contextIsSideNavExpanded;
   const prefix = usePrefix.usePrefix();
   const className = cx({
     [`${prefix}--side-nav__link`]: true,
@@ -46,7 +50,7 @@ const SideNavLink = frFn((props, ref) => {
   }, /*#__PURE__*/React.createElement(Link.default, _rollupPluginBabelHelpers.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.default, {
     small: true
   }, /*#__PURE__*/React.createElement(IconElement, null)), /*#__PURE__*/React.createElement(SideNavLinkText.default, null, children)));

package/lib/components/UIShell/SideNavMenu.js

@@ -17,7 +17,7 @@ var SideNavIcon = require('./SideNavIcon.js');
 var keys = require('../../internal/keyboard/keys.js');
 var match = require('../../internal/keyboard/match.js');
 var usePrefix = require('../../internal/usePrefix.js');
-var SideNav = require('./SideNav.js');
+var SideNavContext = require('./SideNavContext.js');
 
 var _ChevronDown;
 const SideNavMenu = /*#__PURE__*/React.forwardRef(({
@@ -32,8 +32,10 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(({
   title
 }, ref) => {
   const {
-    isRail
-  } = React.useContext(SideNav.SideNavContext);
+    isRail,
+    isSideNavExpanded: contextIsSideNavExpanded
+  } = React.useContext(SideNavContext.SideNavContext);
+  const currentIsSideNavExpanded = isSideNavExpanded ?? contextIsSideNavExpanded;
   const prefix = usePrefix.usePrefix();
   const [isExpanded, setIsExpanded] = React.useState(defaultExpanded);
   const [prevExpanded, setPrevExpanded] = React.useState(defaultExpanded);
@@ -44,10 +46,10 @@ const SideNavMenu = /*#__PURE__*/React.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);
   }
@@ -69,7 +71,7 @@ const SideNavMenu = /*#__PURE__*/React.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.default, null, /*#__PURE__*/React.createElement(IconElement, null)), /*#__PURE__*/React.createElement("span", {
       className: `${prefix}--side-nav__submenu-title`
     }, title), /*#__PURE__*/React.createElement(SideNavIcon.default, {