@carbon-labs/react-ui-shell 0.15.0 → 0.17.0

package/lib/components/SideNavMenu.js

@@ -30,16 +30,21 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
     large = false,
     renderIcon: IconElement,
     isSideNavExpanded,
-    tabIndex,
     title
   } = _ref;
   const depth = propDepth;
   const {
-    isRail
+    isTreeview,
+    expanded,
+    navType,
+    isRail,
+    setIsTreeview
   } = React.useContext(SideNav.SideNavContext);
+  const sideNavExpanded = expanded;
   const prefix = usePrefix.usePrefix();
   const [isExpanded, setIsExpanded] = React.useState(defaultExpanded);
   const [active, setActive] = React.useState(isActive);
+  const firstLink = React.useRef(null);
   const [prevExpanded, setPrevExpanded] = React.useState(defaultExpanded);
   const className = index.default({
     [`${prefix}--side-nav__item`]: true,
@@ -82,23 +87,35 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
     return child;
   });
   React.useEffect(() => {
-    if (depth === 0) return;
-    const calcButtonOffset = () => {
-      // menu with icon
-      if (children && IconElement) {
-        return depth + 3;
+    if (navType == SideNav.SIDE_NAV_TYPE.PANEL) {
+      // grab first link to redirect if clicked when not expanded
+      if (!firstLink?.current && listRef?.current) {
+        const firstLinkElement = listRef.current.querySelector(`.${prefix}--side-nav__menu-item a`);
+        firstLink.current = firstLinkElement?.getAttribute('href') ?? '';
       }
+    }
+    if (depth === 0) return;
+
+    // if depth is more than 0, that means its nested, thus we set treeview mode
+    setIsTreeview?.(true);
+    if (isTreeview) {
+      const calcButtonOffset = () => {
+        // menu with icon
+        if (children && IconElement) {
+          return depth + 3;
+        }
 
-      // menu without icon
-      if (children) {
-        return depth * 4;
+        // menu without icon
+        if (children) {
+          return depth * 4;
+        }
+        return depth;
+      };
+      if (buttonRef.current) {
+        buttonRef.current.style.paddingLeft = `${calcButtonOffset()}rem`;
       }
-      return depth;
-    };
-    if (buttonRef.current) {
-      buttonRef.current.style.paddingLeft = `${calcButtonOffset()}rem`;
     }
-  }, []);
+  }, [isTreeview]);
 
   /**
    * Returns the parent SideNavMenu, if node is actually inside one.
@@ -114,56 +131,71 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
     if (match.match(event, keys.Escape)) {
       setIsExpanded(false);
     }
-    const node = event.target;
-    const isMenu = node.hasAttribute('aria-expanded');
-    const isExpanded = node.getAttribute('aria-expanded');
-    const parent = parentSideNavMenu(node);
-    if (match.match(event, keys.ArrowLeft)) {
-      event.stopPropagation();
-      if (isMenu) {
-        // collapse menu
-        if (isExpanded == 'true') {
-          setIsExpanded(false);
+    if (isTreeview) {
+      const node = event.target;
+      const isMenu = node.hasAttribute('aria-expanded');
+      const isExpanded = node.getAttribute('aria-expanded');
+      const parent = parentSideNavMenu(node);
+      if (match.match(event, keys.ArrowLeft)) {
+        event.stopPropagation();
+        if (isMenu) {
+          // collapse menu
+          if (isExpanded == 'true') {
+            setIsExpanded(false);
 
-          // go to previous level's side nav menu button
-        } else {
-          // since we're in a menu, it finds its own <li>, we go up one more
-          const previousMenu = parentSideNavMenu(parent);
-          const button = previousMenu.querySelector('button');
+            // go to previous level's side nav menu button
+          } else {
+            // since we're in a menu, it finds its own <li>, we go up one more
+            const previousMenu = parentSideNavMenu(parent);
+            const button = previousMenu.querySelector('button');
+            button.tabIndex = 0;
+            button?.focus();
+          }
+
+          // go to side nav menu button
+        } else if (parent) {
+          const button = parent.querySelector('button');
           button.tabIndex = 0;
           button?.focus();
         }
-
-        // go to side nav menu button
-      } else if (parent) {
-        const button = parent.querySelector('button');
-        button.tabIndex = 0;
-        button?.focus();
       }
-    }
-    if (match.match(event, keys.ArrowRight)) {
-      event.stopPropagation();
+      if (match.match(event, keys.ArrowRight)) {
+        event.stopPropagation();
 
-      // expand menu
-      if (isMenu) {
-        setIsExpanded(true);
+        // expand menu
+        if (isMenu) {
+          setIsExpanded(true);
 
-        // if already expanded, focus on first element
-        if (isExpanded == 'true') {
-          let nextNode = node.nextElementSibling?.querySelector('a, button');
-          if (nextNode) {
-            nextNode.tabIndex = 0;
-            nextNode.focus();
+          // if already expanded, focus on first element
+          if (isExpanded == 'true') {
+            let nextNode = node.nextElementSibling?.querySelector('a, button');
+            if (nextNode) {
+              nextNode.tabIndex = 0;
+              nextNode.focus();
+            }
           }
         }
       }
     }
   }
+
+  // save expanded state before SideNav collapse
+  const [lastExpandedState, setLastExpandedState] = React.useState(isExpanded);
+
+  // reset when SideNav is panel
+  React.useEffect(() => {
+    if (navType == SideNav.SIDE_NAV_TYPE.PANEL && !sideNavExpanded) {
+      setLastExpandedState(isExpanded);
+      setIsExpanded(false);
+    } else {
+      setIsExpanded(lastExpandedState);
+    }
+  }, [sideNavExpanded]);
   return (
     /*#__PURE__*/
     // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
     React.createElement("li", {
-      role: "treeitem",
+      role: isTreeview ? 'treeitem' : undefined,
       "aria-expanded": isExpanded,
       className: className,
       ref: listRef,
@@ -172,11 +204,17 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
       "aria-expanded": isExpanded,
       className: buttonClassName,
       onClick: () => {
-        setIsExpanded(!isExpanded);
+        // only when sidenav is panel view
+        if (navType == SideNav.SIDE_NAV_TYPE.PANEL && !isExpanded && firstLink.current && !sideNavExpanded) {
+          window.location.href = firstLink.current;
+        } else {
+          setIsExpanded(!isExpanded);
+          setLastExpandedState(!isExpanded);
+        }
       },
       ref: menuRef,
       type: "button",
-      tabIndex: -1
+      tabIndex: isTreeview ? -1 : 0
     }, IconElement && /*#__PURE__*/React.createElement(react.SideNavIcon, null, /*#__PURE__*/React.createElement(IconElement, null)), /*#__PURE__*/React.createElement("span", {
       className: `${prefix}--side-nav__submenu-title`
     }, title), /*#__PURE__*/React.createElement(react.SideNavIcon, {

package/lib/components/SideNavMenuItem.js

@@ -15,6 +15,7 @@ var react = require('@carbon/react');
 var Link = require('./Link.js');
 var usePrefix = require('../internal/usePrefix.js');
 var useMergedRefs = require('../internal/useMergedRefs.js');
+var SideNav = require('./SideNav.js');
 
 const SideNavMenuItem = /*#__PURE__*/React.forwardRef(function SideNavMenuItem(props, ref) {
   const prefix = usePrefix.usePrefix();
@@ -26,6 +27,9 @@ const SideNavMenuItem = /*#__PURE__*/React.forwardRef(function SideNavMenuItem(p
     isActive,
     ...rest
   } = props;
+  const {
+    isTreeview
+  } = React.useContext(SideNav.SideNavContext);
   const className = index.default(`${prefix}--side-nav__menu-item`, customClassName);
   const depth = propDepth;
   const linkClassName = index.default({
@@ -41,14 +45,14 @@ const SideNavMenuItem = /*#__PURE__*/React.forwardRef(function SideNavMenuItem(p
     if (linkRef.current) {
       linkRef.current.style.paddingLeft = `${calcLinkOffset()}rem`;
     }
-  }, []);
+  }, [isTreeview]);
   return /*#__PURE__*/React.createElement("li", {
-    role: "treeitem",
-    "aria-selected": isActive ? 'true' : 'false',
     className: className
   }, /*#__PURE__*/React.createElement(Component, _rollupPluginBabelHelpers.extends({}, rest, {
+    "aria-selected": isActive ? 'true' : 'false',
+    role: isTreeview ? 'treeitem' : undefined,
     className: linkClassName,
-    tabIndex: -1,
+    tabIndex: isTreeview ? -1 : 0,
     ref: itemRef
   }), /*#__PURE__*/React.createElement(react.SideNavLinkText, null, children)));
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbon-labs/react-ui-shell",
-  "version": "0.15.0",
+  "version": "0.17.0",
   "publishConfig": {
     "access": "public",
     "provenance": true
@@ -33,5 +33,5 @@
   "dependencies": {
     "@ibm/telemetry-js": "^1.9.1"
   },
-  "gitHead": "69556e3e509139b1efc47f7c4561a8fceaae8ac7"
+  "gitHead": "b9ed739e909accebbb96349c611213832b779c84"
 }

package/scss/styles/_side-nav.scss

@@ -48,12 +48,20 @@ div:has(.#{$prefix}--header)
     font-weight: 600;
   }
 
+  .#{$prefix}--side-nav__icon > svg,
+  .#{$prefix}--side-nav__submenu-chevron > svg {
+    fill: $icon-primary;
+  }
+}
+
+.#{$prefix}--side-nav__link:hover,
+.#{$prefix}--side-nav__submenu:hover {
+  .#{$prefix}--side-nav__icon > svg,
   .#{$prefix}--side-nav__submenu-chevron > svg {
     fill: $icon-primary;
   }
 }
 
-//----------------------------------------------------------------------------
 // Side-nav Panel
 //----------------------------------------------------------------------------
 .#{$prefix}--side-nav--panel {
@@ -63,6 +71,12 @@ div:has(.#{$prefix}--header)
     margin-inline-end: $spacing-05;
   }
 
+  .#{$prefix}--side-nav__item.#{$prefix}--side-nav__link:hover {
+    .#{$prefix}--side-nav__icon > svg {
+      fill: $icon-primary;
+    }
+  }
+
   .#{$prefix}--side-nav__item.#{$prefix}--side-nav__item--icon
     a.#{$prefix}--side-nav__link {
     padding-inline-start: $spacing-10;