@carbon-labs/react-ui-shell 0.45.0 → 0.47.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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { SideNavIcon, Button, Layer } from '@carbon/react';
+import { SideNavIcon, Layer, Button } from '@carbon/react';
 import { breakpoints } from '../node_modules/@carbon/layout/es/index.js';
 import cx from '../_virtual/index.js';
 import PropTypes from 'prop-types';
@@ -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();
@@ -349,7 +346,7 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
     size: 20
   })) : _ChevronDown || (_ChevronDown = /*#__PURE__*/React.createElement(ChevronDown, {
     size: 20
-  })))), primary ? /*#__PURE__*/React.createElement("div", {
+  })))), primary ? /*#__PURE__*/React.createElement(Layer, null, /*#__PURE__*/React.createElement("div", {
     className: primaryClassNames
   }, /*#__PURE__*/React.createElement(SideNavItems, {
     accessibilityLabel: {
@@ -362,7 +359,7 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
     onClick: handleOnBackButtonClick,
     className: `${prefix}--side-nav__back-button`,
     renderIcon: backButtonRenderIcon
-  }, backButtonTitle), /*#__PURE__*/React.createElement(Layer, null, childrenToRender))) : /*#__PURE__*/React.createElement("ul", {
+  }, backButtonTitle), childrenToRender))) : /*#__PURE__*/React.createElement("ul", {
     className: `${prefix}--side-nav__menu`,
     role: "group"
   }, childrenToRender));

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();
@@ -351,7 +348,7 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
     size: 20
   })) : _ChevronDown || (_ChevronDown = /*#__PURE__*/React.createElement(bucket3.ChevronDown, {
     size: 20
-  })))), primary ? /*#__PURE__*/React.createElement("div", {
+  })))), primary ? /*#__PURE__*/React.createElement(react.Layer, null, /*#__PURE__*/React.createElement("div", {
     className: primaryClassNames
   }, /*#__PURE__*/React.createElement(SideNavItems.SideNavItems, {
     accessibilityLabel: {
@@ -364,7 +361,7 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
     onClick: handleOnBackButtonClick,
     className: `${prefix}--side-nav__back-button`,
     renderIcon: backButtonRenderIcon
-  }, backButtonTitle), /*#__PURE__*/React.createElement(react.Layer, null, childrenToRender))) : /*#__PURE__*/React.createElement("ul", {
+  }, backButtonTitle), childrenToRender))) : /*#__PURE__*/React.createElement("ul", {
     className: `${prefix}--side-nav__menu`,
     role: "group"
   }, childrenToRender));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbon-labs/react-ui-shell",
-  "version": "0.45.0",
+  "version": "0.47.0",
   "publishConfig": {
     "access": "public",
     "provenance": true
@@ -41,5 +41,5 @@
   "dependencies": {
     "@ibm/telemetry-js": "^1.9.1"
   },
-  "gitHead": "58202395282cf6325f3b0a1bc46da2a7234b185a"
+  "gitHead": "36a0245024d07cce75ca5654c2070ab252f0ca8c"
 }

package/scss/styles/_side-nav.scss

@@ -152,6 +152,7 @@ div:has(.#{$prefix}--header)
 
 .#{$prefix}--side-nav__menu-secondary-wrapper-expanded {
   inline-size: 16rem;
+  overflow-y: auto;
   transform: translateX(0);
 }