@carbon-labs/react-ui-shell 0.46.0 → 0.48.0

package/es/components/SideNav.js

@@ -157,6 +157,7 @@ function SideNavRenderFunction(_ref, ref) {
       const backButton = sideNavRef?.current.querySelector(`.${prefix}--side-nav__back-button`);
       const slotElement = sideNavRef?.current.querySelector(`.${prefix}--side-nav__slot`);
       const firstElement = sideNavRef?.current?.querySelector('a, button');
+      const currentElement = sideNavRef?.current?.querySelector(`.cds--side-nav__link--current`);
       if (navType == SIDE_NAV_TYPE.PANEL || expanded) {
         if (isSm && backButton) {
           backButton.tabIndex = 0;
@@ -164,6 +165,8 @@ function SideNavRenderFunction(_ref, ref) {
           if (firstElementAfterBack) {
             firstElementAfterBack.tabIndex = 0;
           }
+        } else if (currentElement && currentElement.closest(`[id="${currentPrimaryMenu}"]`)) {
+          currentElement.tabIndex = 0;
         } else if (firstElement) {
           firstElement.tabIndex = 0;
           if (slotElement) {

package/es/components/SideNavMenu.js

@@ -173,7 +173,7 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
     return node;
   }
   function handleKeyDown(event) {
-    if (match(event, Escape)) {
+    if (match(event, Escape) && !primary) {
       setIsExpanded(false);
       if (onMenuToggle) {
         onMenuToggle();
@@ -275,23 +275,21 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
     setSecondaryOpen(isExpanded);
   }, [isExpanded]);
   useEffect(() => {
-    if (currentPrimaryMenu !== uniqueId) {
+    if (primary && currentPrimaryMenu !== uniqueId) {
       setIsExpanded(false);
     } else {
       setIsExpanded(true);
     }
   }, [currentPrimaryMenu]);
-
-  // save expanded state before SideNav collapse
-  const [lastExpandedState, setLastExpandedState] = useState(isExpanded);
-
   // reset to opened/collapsed menu state when Panel SideNav is toggled
   useEffect(() => {
     if (navType == SIDE_NAV_TYPE.PANEL && !sideNavExpanded) {
-      setLastExpandedState(isExpanded);
       setIsExpanded(false);
-    } else {
-      setIsExpanded(lastExpandedState);
+    }
+
+    // will always open to the menu with an active element
+    if (primary && (active || hasActiveDescendant(children))) {
+      setIsExpanded(true);
     }
   }, [sideNavExpanded]);
   const [openPopover, setOpenPopover] = React.useState(false);
@@ -327,7 +325,6 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
         // window.location.href = firstLink.current;
       } else if (isSm || !primary || currentPrimaryMenu !== uniqueId) {
         setIsExpanded(!isExpanded);
-        setLastExpandedState(!isExpanded);
       }
       if (isSm && backButtonRef.current) {
         backButtonRef.current.focus();

package/lib/components/SideNav.js

@@ -159,6 +159,7 @@ function SideNavRenderFunction(_ref, ref) {
       const backButton = sideNavRef?.current.querySelector(`.${prefix}--side-nav__back-button`);
       const slotElement = sideNavRef?.current.querySelector(`.${prefix}--side-nav__slot`);
       const firstElement = sideNavRef?.current?.querySelector('a, button');
+      const currentElement = sideNavRef?.current?.querySelector(`.cds--side-nav__link--current`);
       if (navType == SIDE_NAV_TYPE.PANEL || expanded) {
         if (isSm && backButton) {
           backButton.tabIndex = 0;
@@ -166,6 +167,8 @@ function SideNavRenderFunction(_ref, ref) {
           if (firstElementAfterBack) {
             firstElementAfterBack.tabIndex = 0;
           }
+        } else if (currentElement && currentElement.closest(`[id="${currentPrimaryMenu}"]`)) {
+          currentElement.tabIndex = 0;
         } else if (firstElement) {
           firstElement.tabIndex = 0;
           if (slotElement) {

package/lib/components/SideNavMenu.js

@@ -175,7 +175,7 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
     return node;
   }
   function handleKeyDown(event) {
-    if (match.match(event, keys.Escape)) {
+    if (match.match(event, keys.Escape) && !primary) {
       setIsExpanded(false);
       if (onMenuToggle) {
         onMenuToggle();
@@ -277,23 +277,21 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
     setSecondaryOpen(isExpanded);
   }, [isExpanded]);
   React.useEffect(() => {
-    if (currentPrimaryMenu !== uniqueId) {
+    if (primary && currentPrimaryMenu !== uniqueId) {
       setIsExpanded(false);
     } else {
       setIsExpanded(true);
     }
   }, [currentPrimaryMenu]);
-
-  // save expanded state before SideNav collapse
-  const [lastExpandedState, setLastExpandedState] = React.useState(isExpanded);
-
   // reset to opened/collapsed menu state when Panel SideNav is toggled
   React.useEffect(() => {
     if (navType == SideNav.SIDE_NAV_TYPE.PANEL && !sideNavExpanded) {
-      setLastExpandedState(isExpanded);
       setIsExpanded(false);
-    } else {
-      setIsExpanded(lastExpandedState);
+    }
+
+    // will always open to the menu with an active element
+    if (primary && (active || hasActiveDescendant(children))) {
+      setIsExpanded(true);
     }
   }, [sideNavExpanded]);
   const [openPopover, setOpenPopover] = React.useState(false);
@@ -329,7 +327,6 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
         // window.location.href = firstLink.current;
       } else if (isSm || !primary || currentPrimaryMenu !== uniqueId) {
         setIsExpanded(!isExpanded);
-        setLastExpandedState(!isExpanded);
       }
       if (isSm && backButtonRef.current) {
         backButtonRef.current.focus();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbon-labs/react-ui-shell",
-  "version": "0.46.0",
+  "version": "0.48.0",
   "publishConfig": {
     "access": "public",
     "provenance": true
@@ -41,5 +41,5 @@
   "dependencies": {
     "@ibm/telemetry-js": "^1.9.1"
   },
-  "gitHead": "25a4ee32036576869be9cb12de891826699587e8"
+  "gitHead": "1a3a98d3c24b71489bc34df3f8577f3b392c2891"
 }

package/scss/styles/_side-nav.scss

@@ -8,7 +8,6 @@
 @use '@carbon/styles/scss/utilities/convert' as convert;
 @use '@carbon/styles/scss/utilities/custom-property' as custom-property;
 @use '@carbon/styles/scss/utilities/button-reset' as button-reset;
-@use '@carbon/react/scss/breakpoint' as breakpoint;
 @use '@carbon/styles/scss/utilities/focus-outline' as *;
 @use '@carbon/styles/scss/breakpoint' as *;
 @use '@carbon/styles/scss/theme' as *;
@@ -152,6 +151,7 @@ div:has(.#{$prefix}--header)
 
 .#{$prefix}--side-nav__menu-secondary-wrapper-expanded {
   inline-size: 16rem;
+  overflow-y: auto;
   transform: translateX(0);
 }
 
@@ -456,7 +456,7 @@ div:has(.#{$prefix}--header)
 //----------------------------------------------------------------------------
 // Mobile
 //----------------------------------------------------------------------------
-@include breakpoint.breakpoint-down(md) {
+@include breakpoint-down(md) {
   .#{$prefix}--side-nav--collapsible.#{$prefix}--side-nav--expanded {
     inline-size: 100%;
     max-inline-size: 100%;