@carbon-labs/react-ui-shell 0.62.0 → 0.64.0

package/es/components/SideNav.js

@@ -168,7 +168,7 @@ function SideNavRenderFunction({
         } else if (firstElement) {
           firstElement.tabIndex = 0;
           if (slotElement) {
-            const firstElementAfterSlot = slotElement.nextElementSibling?.nextElementSibling?.querySelector('a, button');
+            const firstElementAfterSlot = slotElement.nextElementSibling?.querySelector('a, button');
             if (firstElementAfterSlot) {
               firstElementAfterSlot.tabIndex = 0;
             }
@@ -345,7 +345,7 @@ function SideNavRenderFunction({
     const target = event.target;
     const isNavItemClick = target.closest(`.${prefix}--side-nav a, .${prefix}--side-nav button`);
     const isInRail = isNavItemClick?.closest(`.${prefix}--side-nav--rail`);
-    if (isNavItemClick) {
+    if (isNavItemClick && !isNavItemClick.classList.contains(`${prefix}--side-nav__submenu`)) {
       isInRail ? handleToggle(false, false) : onSideNavBlur?.();
     }
   });

package/es/components/SideNavMenu.js

@@ -69,6 +69,7 @@ const SideNavMenu = /*#__PURE__*/React__default.forwardRef(function SideNavMenu(
     [`${prefix}--side-nav__item`]: true,
     [`${prefix}--side-nav__item--primary`]: primary,
     [`${prefix}--side-nav__item--active`]: !primary && (active || hasActiveDescendant(children) && !isExpanded),
+    [`${prefix}--side-nav__item--has-active-descendant`]: active || hasActiveDescendant(children) && !isExpanded,
     [`${prefix}--side-nav__item--icon`]: IconElement,
     [`${prefix}--side-nav__item--large`]: large,
     [customClassName]: !!customClassName
@@ -154,7 +155,9 @@ const SideNavMenu = /*#__PURE__*/React__default.forwardRef(function SideNavMenu(
         firstLink.current = firstLinkElement?.getAttribute('href') ?? '';
       }
     }
-    if (depth === 0) return;
+    if (depth === 0) {
+      return;
+    }
 
     // if depth is more than 0, that means its nested, thus we set treeview mode
     setIsTreeview?.(true);
@@ -185,7 +188,7 @@ const SideNavMenu = /*#__PURE__*/React__default.forwardRef(function SideNavMenu(
       if (match(event, Tab)) {
         const slotElement = node.closest(`.${prefix}--side-nav__slot`);
         if (slotElement) {
-          (slotElement.nextElementSibling?.nextElementSibling?.querySelector('a, button')).tabIndex = 0;
+          (slotElement.nextElementSibling?.querySelector('a, button')).tabIndex = 0;
         }
       }
       if (match(event, ArrowLeft$1)) {

package/lib/components/SideNav.js

@@ -170,7 +170,7 @@ function SideNavRenderFunction({
         } else if (firstElement) {
           firstElement.tabIndex = 0;
           if (slotElement) {
-            const firstElementAfterSlot = slotElement.nextElementSibling?.nextElementSibling?.querySelector('a, button');
+            const firstElementAfterSlot = slotElement.nextElementSibling?.querySelector('a, button');
             if (firstElementAfterSlot) {
               firstElementAfterSlot.tabIndex = 0;
             }
@@ -347,7 +347,7 @@ function SideNavRenderFunction({
     const target = event.target;
     const isNavItemClick = target.closest(`.${prefix}--side-nav a, .${prefix}--side-nav button`);
     const isInRail = isNavItemClick?.closest(`.${prefix}--side-nav--rail`);
-    if (isNavItemClick) {
+    if (isNavItemClick && !isNavItemClick.classList.contains(`${prefix}--side-nav__submenu`)) {
       isInRail ? handleToggle(false, false) : onSideNavBlur?.();
     }
   });

package/lib/components/SideNavMenu.js

@@ -71,6 +71,7 @@ const SideNavMenu = /*#__PURE__*/React__default.forwardRef(function SideNavMenu(
     [`${prefix}--side-nav__item`]: true,
     [`${prefix}--side-nav__item--primary`]: primary,
     [`${prefix}--side-nav__item--active`]: !primary && (active || hasActiveDescendant(children) && !isExpanded),
+    [`${prefix}--side-nav__item--has-active-descendant`]: active || hasActiveDescendant(children) && !isExpanded,
     [`${prefix}--side-nav__item--icon`]: IconElement,
     [`${prefix}--side-nav__item--large`]: large,
     [customClassName]: !!customClassName
@@ -156,7 +157,9 @@ const SideNavMenu = /*#__PURE__*/React__default.forwardRef(function SideNavMenu(
         firstLink.current = firstLinkElement?.getAttribute('href') ?? '';
       }
     }
-    if (depth === 0) return;
+    if (depth === 0) {
+      return;
+    }
 
     // if depth is more than 0, that means its nested, thus we set treeview mode
     setIsTreeview?.(true);
@@ -187,7 +190,7 @@ const SideNavMenu = /*#__PURE__*/React__default.forwardRef(function SideNavMenu(
       if (match.match(event, keys.Tab)) {
         const slotElement = node.closest(`.${prefix}--side-nav__slot`);
         if (slotElement) {
-          (slotElement.nextElementSibling?.nextElementSibling?.querySelector('a, button')).tabIndex = 0;
+          (slotElement.nextElementSibling?.querySelector('a, button')).tabIndex = 0;
         }
       }
       if (match.match(event, keys.ArrowLeft)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbon-labs/react-ui-shell",
-  "version": "0.62.0",
+  "version": "0.64.0",
   "publishConfig": {
     "access": "public",
     "provenance": true
@@ -42,5 +42,5 @@
   "dependencies": {
     "@ibm/telemetry-js": "^1.9.1"
   },
-  "gitHead": "9656b7b03d0232cdda3cf200d972eaf727a35fbc"
+  "gitHead": "3bf6978c6066837bfd877816ee4c520031cb5fe3"
 }

package/scss/styles/_side-nav.scss

@@ -51,6 +51,43 @@ div:has(.#{$prefix}--header)
   margin-inline-end: $spacing-05;
 }
 
+.#{$prefix}--side-nav__item--active.#{$prefix}--side-nav__item--has-active-descendant
+  .#{$prefix}--side-nav__submenu:not(
+    .#{$prefix}--side-nav__item--has-active-descendant
+  )[aria-expanded='false'] {
+  background-color: transparent;
+
+  &::before {
+    display: none;
+  }
+}
+
+.#{$prefix}--side-nav__item--active.#{$prefix}--side-nav__item--has-active-descendant[aria-expanded='false']
+  .#{$prefix}--side-nav__submenu[aria-expanded='false'],
+.#{$prefix}--side-nav__item--active
+  .#{$prefix}--side-nav__item--has-active-descendant
+  .#{$prefix}--side-nav__submenu.#{$prefix}--side-nav__submenu--active[aria-expanded='false'] {
+  position: relative;
+  background-color: $background-selected;
+  color: $text-primary;
+
+  &::before {
+    position: absolute;
+    display: block;
+    background-color: $border-interactive;
+    content: '';
+    inline-size: 3px;
+    inset-block: 0;
+    inset-inline-start: 0;
+  }
+}
+
+.#{$prefix}--side-nav__item--active
+  .#{$prefix}--side-nav__submenu:not(.#{$prefix}--side-nav__submenu--active)
+  > .#{$prefix}--side-nav__submenu-title {
+  font-weight: 500;
+}
+
 .#{$prefix}--side-nav__submenu.#{$prefix}--side-nav__submenu--active {
   > span {
     color: $text-primary;
@@ -71,8 +108,29 @@ div:has(.#{$prefix}--header)
   }
 }
 
+@include breakpoint-down(md) {
+  .#{$prefix}--side-nav__submenu {
+    padding: 0 $spacing-05 0 convert.to-rem(14px);
+  }
+
+  .#{$prefix}--side-nav__submenu,
+  .#{$prefix}--side-nav__link,
+  .#{$prefix}--side-nav__menu a.#{$prefix}--side-nav__link {
+    block-size: $spacing-08;
+  }
+
+  .#{$prefix}--side-nav__icon {
+    margin-inline-end: convert.to-rem(14px);
+  }
+
+  .#{$prefix}--side-nav__icon > svg {
+    block-size: convert.to-rem(20px);
+    inline-size: convert.to-rem(20px);
+  }
+}
+
 // SideNavMenu
-// Level 2
+// Level 2 / Doublewide Level 3
 // without icon
 .#{$prefix}--side-nav__submenu
   + .#{$prefix}--side-nav__menu
@@ -85,12 +143,61 @@ div:has(.#{$prefix}--header)
 .#{$prefix}--side-nav__submenu
   + .#{$prefix}--side-nav__menu
   > .#{$prefix}--side-nav__item--icon
-  .#{$prefix}--side-nav__submenu {
+  > .#{$prefix}--side-nav__submenu {
   padding-inline-start: $spacing-09;
 }
 
+// Level 3 / Doublewide Level 4
+// without icon, icon not supported at this level
+.#{$prefix}--side-nav__submenu
+  + .#{$prefix}--side-nav__menu
+  > .#{$prefix}--side-nav__item
+  .#{$prefix}--side-nav__menu
+  > .#{$prefix}--side-nav__item
+  .#{$prefix}--side-nav__submenu {
+  padding-inline-start: $spacing-11;
+}
+
+// with icon parent at level 2
+.#{$prefix}--side-nav__item--icon
+  > .#{$prefix}--side-nav__submenu
+  + .#{$prefix}--side-nav__menu
+  > .#{$prefix}--side-nav__item--icon
+  > .#{$prefix}--side-nav__submenu
+  + .#{$prefix}--side-nav__menu
+  > .#{$prefix}--side-nav__item
+  > .#{$prefix}--side-nav__submenu {
+  padding-inline-start: $spacing-12;
+}
+
+// Level 4 / / Doesn't exist in doublewide
+// without icon, icon not supported at this level
+.#{$prefix}--side-nav__submenu
+  + .#{$prefix}--side-nav__menu
+  > .#{$prefix}--side-nav__item
+  .#{$prefix}--side-nav__menu
+  > .#{$prefix}--side-nav__item
+  .#{$prefix}--side-nav__menu
+  > .#{$prefix}--side-nav__item
+  .#{$prefix}--side-nav__submenu {
+  padding-inline-start: $spacing-12;
+}
+
+// with icon parent at level 2
+.#{$prefix}--side-nav__item--icon
+  > .#{$prefix}--side-nav__submenu
+  + .#{$prefix}--side-nav__menu
+  > .#{$prefix}--side-nav__item--icon
+  .#{$prefix}--side-nav__menu
+  > .#{$prefix}--side-nav__item
+  .#{$prefix}--side-nav__menu
+  > .#{$prefix}--side-nav__item
+  .#{$prefix}--side-nav__submenu {
+  padding-inline-start: convert.to-rem(112px);
+}
+
 // Nested SideNavMenuItem
-// Level 2
+// Level 2  / Doublewide Level 3
 // without icon
 .#{$prefix}--side-nav__item.#{$prefix}--side-nav__item--icon
   a.#{$prefix}--side-nav__link {
@@ -116,14 +223,23 @@ div:has(.#{$prefix}--header)
   padding-inline-start: $spacing-09;
 }
 
-// with icon inside primary menu (double wide)
+// with icon inside primary menu (double wide), Level 2
 .#{$prefix}--side-nav__item.#{$prefix}--side-nav__item--icon
-  .cds--side-nav__menu-secondary-wrapper
+  .#{$prefix}--side-nav__menu-secondary-wrapper
   a.#{$prefix}--side-nav__link:has(.#{$prefix}--side-nav__icon) {
   padding-inline-start: $spacing-05;
 }
 
-// Level 3
+@include breakpoint-down(md) {
+  // with icon inside primary menu (double wide)
+  .#{$prefix}--side-nav__item.#{$prefix}--side-nav__item--icon
+    .#{$prefix}--side-nav__menu-secondary-wrapper
+    a.#{$prefix}--side-nav__link:has(.#{$prefix}--side-nav__icon) {
+    padding-inline-start: convert.to-rem(14px);
+  }
+}
+
+// Level 3 / Doublewide level 4
 // without icon parent
 .#{$prefix}--side-nav__menu
   .#{$prefix}--side-nav__menu
@@ -138,6 +254,46 @@ div:has(.#{$prefix}--header)
   padding-inline-start: $spacing-12;
 }
 
+// Level 4 / Doublewide level 5
+// without icon parent
+.#{$prefix}--side-nav__menu
+  .#{$prefix}--side-nav__menu
+  .#{$prefix}--side-nav__menu
+  a.#{$prefix}--side-nav__link {
+  padding-inline-start: $spacing-12;
+}
+
+// with icon parent at level 2
+.#{$prefix}--side-nav__item--icon
+  .#{$prefix}--side-nav__menu
+  .#{$prefix}--side-nav__item--icon
+  .#{$prefix}--side-nav__menu
+  .#{$prefix}--side-nav__menu
+  a.#{$prefix}--side-nav__link {
+  padding-inline-start: convert.to-rem(112px);
+}
+
+// Level 5 / Doesn't exist in doublewide
+.#{$prefix}--side-nav__item--icon
+  .#{$prefix}--side-nav__menu
+  .#{$prefix}--side-nav__menu
+  .#{$prefix}--side-nav__menu
+  .#{$prefix}--side-nav__menu
+  a.#{$prefix}--side-nav__link {
+  padding-inline-start: convert.to-rem(112px);
+}
+
+// with icon parent at level 2
+.#{$prefix}--side-nav__item--icon
+  .#{$prefix}--side-nav__menu
+  .#{$prefix}--side-nav__item--icon
+  .#{$prefix}--side-nav__menu
+  .#{$prefix}--side-nav__menu
+  .#{$prefix}--side-nav__menu
+  a.#{$prefix}--side-nav__link {
+  padding-inline-start: convert.to-rem(128px);
+}
+
 .#{$prefix}--side-nav__menu-secondary-wrapper {
   position: absolute;
   background-color: $layer-01;
@@ -426,7 +582,7 @@ div:has(.#{$prefix}--header)
 .#{$prefix}--side-nav__slot {
   display: flex;
   align-items: center;
-  margin: 0 $spacing-05;
+  margin: 0 $spacing-05 $spacing-05;
   block-size: 2rem;
 }