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

package/es/components/SideNavMenu.js

@@ -13,7 +13,7 @@ import { SideNavIcon } from '@carbon/react';
 import { Escape, ArrowLeft, ArrowRight } from '../internal/keyboard/keys.js';
 import { match } from '../internal/keyboard/match.js';
 import { usePrefix } from '../internal/usePrefix.js';
-import { SideNavContext } from './SideNav.js';
+import { SideNavContext, SIDE_NAV_TYPE } from './SideNav.js';
 import { useMergedRefs } from '../internal/useMergedRefs.js';
 import { ChevronDown } from '../node_modules/@carbon/icons-react/es/generated/bucket-3.js';
 
@@ -28,16 +28,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
   } = useContext(SideNavContext);
+  const sideNavExpanded = expanded;
   const prefix = usePrefix();
   const [isExpanded, setIsExpanded] = useState(defaultExpanded);
   const [active, setActive] = useState(isActive);
+  const firstLink = useRef(null);
   const [prevExpanded, setPrevExpanded] = useState(defaultExpanded);
   const className = cx({
     [`${prefix}--side-nav__item`]: true,
@@ -80,23 +85,35 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
     return child;
   });
   useEffect(() => {
-    if (depth === 0) return;
-    const calcButtonOffset = () => {
-      // menu with icon
-      if (children && IconElement) {
-        return depth + 3;
+    if (navType == 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.
@@ -112,56 +129,71 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
     if (match(event, 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(event, 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(event, 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(event, ArrowRight)) {
-      event.stopPropagation();
+      if (match(event, 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] = useState(isExpanded);
+
+  // reset when SideNav is panel
+  useEffect(() => {
+    if (navType == 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,
@@ -170,11 +202,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 == 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(SideNavIcon, null, /*#__PURE__*/React.createElement(IconElement, null)), /*#__PURE__*/React.createElement("span", {
       className: `${prefix}--side-nav__submenu-title`
     }, title), /*#__PURE__*/React.createElement(SideNavIcon, {

package/es/components/SideNavMenuItem.js

@@ -8,11 +8,12 @@
 import { extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
 import cx from '../_virtual/index.js';
 import PropTypes from 'prop-types';
-import React, { useRef, useEffect } from 'react';
+import React, { useContext, useRef, useEffect } from 'react';
 import { SideNavLinkText } from '@carbon/react';
 import Link from './Link.js';
 import { usePrefix } from '../internal/usePrefix.js';
 import { useMergedRefs } from '../internal/useMergedRefs.js';
+import { SideNavContext } from './SideNav.js';
 
 const SideNavMenuItem = /*#__PURE__*/React.forwardRef(function SideNavMenuItem(props, ref) {
   const prefix = usePrefix();
@@ -24,6 +25,9 @@ const SideNavMenuItem = /*#__PURE__*/React.forwardRef(function SideNavMenuItem(p
     isActive,
     ...rest
   } = props;
+  const {
+    isTreeview
+  } = useContext(SideNavContext);
   const className = cx(`${prefix}--side-nav__menu-item`, customClassName);
   const depth = propDepth;
   const linkClassName = cx({
@@ -39,14 +43,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, _extends({}, rest, {
+    "aria-selected": isActive ? 'true' : 'false',
+    role: isTreeview ? 'treeitem' : undefined,
     className: linkClassName,
-    tabIndex: -1,
+    tabIndex: isTreeview ? -1 : 0,
     ref: itemRef
   }), /*#__PURE__*/React.createElement(SideNavLinkText, null, children)));
 });

package/lib/components/SideNav.d.ts

@@ -34,10 +34,14 @@ export interface SideNavProps extends ComponentProps<'nav'>, TranslateWithId<Tra
     isCollapsible?: boolean;
     hideOverlay?: boolean;
     navType: SIDE_NAV_TYPE;
+    isTreeview: boolean;
 }
 interface SideNavContextData {
+    expanded?: boolean;
     isRail?: boolean;
     navType?: SIDE_NAV_TYPE;
+    isTreeview?: boolean;
+    setIsTreeview?: (value: boolean) => void;
 }
 export declare const SideNavContext: React.Context<SideNavContextData>;
 export declare const SideNav: React.ForwardRefExoticComponent<Omit<SideNavProps, "ref"> & React.RefAttributes<HTMLElement>>;

package/lib/components/SideNav.js

@@ -54,6 +54,7 @@ function SideNavRenderFunction(_ref, ref) {
     isFixedNav = false,
     isRail,
     isPersistent = true,
+    isTreeview: isTreeviewProp,
     navType = SIDE_NAV_TYPE.DEFAULT,
     addFocusListeners = true,
     addMouseListeners = true,
@@ -65,6 +66,7 @@ function SideNavRenderFunction(_ref, ref) {
     translateWithId: t = defaultTranslateWithId,
     ...other
   } = _ref;
+  const [internalIsTreeview, setInternalIsTreeview] = React.useState(isTreeviewProp ?? false);
   const prefix = usePrefix.usePrefix();
   const {
     current: controlled
@@ -116,7 +118,10 @@ function SideNavRenderFunction(_ref, ref) {
       // 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
+          isSideNavExpanded: currentExpansionState,
+          ...(childJsxElement.type?.displayName === 'SideNavItems' && {
+            accessibilityLabel: accessibilityLabel
+          })
         } : {})
       });
     }
@@ -125,26 +130,28 @@ function SideNavRenderFunction(_ref, ref) {
   const eventHandlers = {};
   const treeWalkerRef = React.useRef(null);
   React.useEffect(() => {
-    treeWalkerRef.current = treeWalkerRef.current ?? document.createTreeWalker(sideNavRef?.current, NodeFilter.SHOW_ELEMENT, {
-      acceptNode: function (node) {
-        if (!(node instanceof Element)) {
+    if (internalIsTreeview) {
+      treeWalkerRef.current = treeWalkerRef.current ?? document.createTreeWalker(sideNavRef?.current, NodeFilter.SHOW_ELEMENT, {
+        acceptNode: function (node) {
+          if (!(node instanceof Element)) {
+            return NodeFilter.FILTER_SKIP;
+          }
+          if (node.classList.contains(`${prefix}--side-nav__divider`)) {
+            return NodeFilter.FILTER_REJECT;
+          }
+          if (node.matches(`li.${prefix}--side-nav__item`) || node.matches(`li.${prefix}--side-nav__menu-item`)) {
+            return NodeFilter.FILTER_ACCEPT;
+          }
           return NodeFilter.FILTER_SKIP;
         }
-        if (node.classList.contains(`${prefix}--side-nav__divider`)) {
-          return NodeFilter.FILTER_REJECT;
-        }
-        if (node.matches(`li.${prefix}--side-nav__item`) || node.matches(`li.${prefix}--side-nav__menu-item`)) {
-          return NodeFilter.FILTER_ACCEPT;
-        }
-        return NodeFilter.FILTER_SKIP;
+      });
+      resetNodeTabIndices();
+      const firstElement = sideNavRef?.current?.querySelector('a, button');
+      if (firstElement) {
+        firstElement.tabIndex = 0;
       }
-    });
-    resetNodeTabIndices();
-    const firstElement = sideNavRef?.current?.querySelector('a, button');
-    if (firstElement) {
-      firstElement.tabIndex = 0;
     }
-  }, [prefix]);
+  }, [prefix, internalIsTreeview]);
 
   /**
    * Returns the parent SideNavMenu, if node is actually inside one.
@@ -176,98 +183,111 @@ function SideNavRenderFunction(_ref, ref) {
       }
     };
     eventHandlers.onKeyDown = event => {
-      if (!treeWalkerRef.current) return;
-      const treeWalker = treeWalkerRef.current;
-      event.stopPropagation();
-
-      // stops page from scrolling
-      if (match.matches(event, [keys.ArrowUp, keys.ArrowDown, keys.Home, keys.End,
-      // @ts-ignore - `matches` doesn't like the object syntax without missing properties
-      {
-        code: 'KeyA'
-      }])) {
-        event.preventDefault();
-      }
-      treeWalker.currentNode = event.target.closest(`li`) ?? treeWalker?.currentNode;
-      let nextFocusNode = null;
-      if (match.match(event, keys.ArrowUp)) {
-        const parentNode = parentSideNavMenu(treeWalker.currentNode);
-        let previousSideNavMenu = parentNode?.previousElementSibling;
-
-        // skip the divider
-        if (previousSideNavMenu?.classList.contains(`${prefix}--side-nav__divider`)) {
-          previousSideNavMenu = previousSideNavMenu?.previousElementSibling;
-        }
-
-        // when previous sibling is open, go to its last item
-        if (previousSideNavMenu?.getAttribute('aria-expanded') == 'true') {
-          nextFocusNode = treeWalker.previousNode();
-        } else {
-          nextFocusNode = treeWalker.previousSibling();
-
-          // first item in the menu, go back up to SideNavMenu button
-          if (nextFocusNode == null) {
-            nextFocusNode = parentNode;
+      // close menu
+      if (match.match(event, keys.Escape)) {
+        if (expanded && !isFixedNav) {
+          resetNodeTabIndices();
+          if (onSideNavBlur) {
+            onSideNavBlur();
           }
         }
-      }
-      if (match.match(event, keys.ArrowDown)) {
-        if (treeWalker.currentNode.getAttribute('aria-expanded') == 'false') {
-          nextFocusNode = treeWalker.nextSibling();
-        } else {
-          nextFocusNode = treeWalker.nextNode();
+        handleToggle(event, false);
+        if (href) {
+          window.location.href = href;
         }
       }
 
-      // Home/End functionality
-      if (match.matches(event, [keys.Home, keys.End])) {
-        if (!sideNavRef?.current) {
-          return;
+      // Treeview keyboard navigation
+      if (treeWalkerRef?.current && internalIsTreeview) {
+        const treeWalker = treeWalkerRef.current;
+        event.stopPropagation();
+
+        // stops page from scrolling
+        if (match.matches(event, [keys.ArrowUp, keys.ArrowDown, keys.Home, keys.End,
+        // @ts-ignore - `matches` doesn't like the object syntax without missing properties
+        {
+          code: 'KeyA'
+        }])) {
+          event.preventDefault();
         }
-        const allItems = Array.from(sideNavRef.current.querySelectorAll('a, button'));
-        if (match.match(event, keys.Home)) {
-          const firstElement = allItems[0];
-          if (firstElement) {
-            firstElement.tabIndex = 0;
-            firstElement?.focus();
+        treeWalker.currentNode = event.target.closest(`li`) ?? treeWalker?.currentNode;
+        let nextFocusNode = null;
+        if (match.match(event, keys.ArrowUp)) {
+          const parentNode = parentSideNavMenu(treeWalker.currentNode);
+          let previousSideNavMenu = parentNode?.previousElementSibling;
+
+          // skip the divider
+          if (previousSideNavMenu?.classList.contains(`${prefix}--side-nav__divider`)) {
+            previousSideNavMenu = previousSideNavMenu?.previousElementSibling;
+          }
+
+          // when previous sibling is open, go to its last item
+          if (previousSideNavMenu?.getAttribute('aria-expanded') == 'true') {
+            const allItems = previousSideNavMenu.querySelectorAll(`.${prefix}--side-nav__item`);
+            const lastMenu = allItems[allItems.length - 1];
+            if (lastMenu && lastMenu.getAttribute('aria-expanded') == 'false') {
+              nextFocusNode = lastMenu;
+            } else {
+              nextFocusNode = treeWalker.previousNode();
+            }
+          } else {
+            nextFocusNode = treeWalker.previousSibling();
+
+            // first item in the menu, go back up to SideNavMenu button
+            if (nextFocusNode == null) {
+              nextFocusNode = parentNode;
+            }
           }
         }
-        if (match.match(event, keys.End)) {
-          const allItems = Array.from(sideNavRef.current.querySelectorAll('li'));
-          const lastVisibleItem = allItems.reverse().find(item => getComputedStyle(item).visibility !== 'hidden');
-          if (lastVisibleItem) {
-            const node = lastVisibleItem.querySelector('button') ?? lastVisibleItem.querySelector('a');
-            if (node) {
-              node.tabIndex = 0;
-              node?.focus();
+        if (match.match(event, keys.ArrowDown)) {
+          if (treeWalker.currentNode.getAttribute('aria-expanded') == 'false') {
+            nextFocusNode = treeWalker.nextSibling();
+            if (!nextFocusNode) {
+              const parent = parentSideNavMenu(treeWalker.currentNode);
+              nextFocusNode = parent?.nextElementSibling;
             }
+          } else {
+            nextFocusNode = treeWalker.nextNode();
           }
         }
-      }
 
-      // focus on the focusable element within the node
-      if (nextFocusNode && nextFocusNode !== event.target) {
-        resetNodeTabIndices();
-        if (nextFocusNode instanceof HTMLElement) {
-          const node = nextFocusNode.querySelector('button') ?? nextFocusNode.querySelector('a');
-          if (node) {
-            node.tabIndex = 0;
-            node?.focus();
+        // Home/End functionality
+        if (match.matches(event, [keys.Home, keys.End])) {
+          if (!sideNavRef?.current) {
+            return;
+          }
+          const allItems = Array.from(sideNavRef.current.querySelectorAll('a, button'));
+          if (match.match(event, keys.Home)) {
+            const firstElement = allItems[0];
+            if (firstElement) {
+              firstElement.tabIndex = 0;
+              firstElement?.focus();
+            }
+          }
+          if (match.match(event, keys.End)) {
+            const allItems = Array.from(sideNavRef.current.querySelectorAll('li'));
+            const lastVisibleItem = allItems.reverse().find(item => getComputedStyle(item).visibility !== 'hidden');
+            if (lastVisibleItem) {
+              const node = lastVisibleItem.querySelector('button') ?? lastVisibleItem.querySelector('a');
+              if (node) {
+                node.tabIndex = 0;
+                node?.focus();
+              }
+            }
           }
         }
-      }
 
-      // close menu
-      if (match.match(event, keys.Escape)) {
-        if (expanded && !isFixedNav) {
-          if (onSideNavBlur) {
-            onSideNavBlur();
+        // focus on the focusable element within the node
+        if (nextFocusNode && nextFocusNode !== event.target) {
+          resetNodeTabIndices();
+          if (nextFocusNode instanceof HTMLElement) {
+            const node = nextFocusNode.querySelector('button') ?? nextFocusNode.querySelector('a');
+            if (node) {
+              node.tabIndex = 0;
+              node?.focus();
+            }
           }
         }
-        handleToggle(event, false);
-        if (href) {
-          window.location.href = href;
-        }
       }
     };
   }
@@ -306,9 +326,27 @@ function SideNavRenderFunction(_ref, ref) {
       item.tabIndex = -1;
     });
   }
+
+  // ensure that changes are in sync with internal treeview prop
+  React.useEffect(() => {
+    if (isTreeviewProp !== undefined) {
+      setInternalIsTreeview(isTreeviewProp);
+    }
+  }, [isTreeviewProp]);
+
+  // prevent changes if prop is passed in
+  const setIsTreeview = value => {
+    if (isTreeviewProp === undefined) {
+      setInternalIsTreeview(value);
+    }
+  };
   return /*#__PURE__*/React.createElement(SideNavContext.Provider, {
     value: {
-      isRail
+      isRail,
+      navType,
+      expanded: expanded,
+      isTreeview: internalIsTreeview,
+      setIsTreeview
     }
   }, isFixedNav || hideOverlay ? null :
   /*#__PURE__*/
@@ -317,7 +355,7 @@ function SideNavRenderFunction(_ref, ref) {
     className: overlayClassName,
     onClick: onOverlayClick
   }), /*#__PURE__*/React.createElement("nav", _rollupPluginBabelHelpers.extends({
-    role: "tree",
+    role: 'navigation',
     tabIndex: -1,
     ref: navRef,
     className: `${prefix}--side-nav__navigation ${className}`,

package/lib/components/SideNavItems.d.ts

@@ -6,6 +6,11 @@
  */
 import React from 'react';
 export interface SideNavItemsProps {
+    /**
+     * Object to provide an aria-label to the component when used in treeview,
+     * to ensure it meets a11y requirements.
+     */
+    accessibilityLabel: object;
     /**
      * Provide a single icon as the child to `SideNavIcon` to render in the
      * container

package/lib/components/SideNavItems.js

@@ -7,18 +7,25 @@
 
 'use strict';
 
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.js');
 var index = require('../_virtual/index.js');
 var PropTypes = require('prop-types');
 var React = require('react');
 var _utils = require('./_utils.js');
 var usePrefix = require('../internal/usePrefix.js');
+var SideNav = require('./SideNav.js');
 
 const SideNavItems = _ref => {
   let {
     className: customClassName,
     children,
-    isSideNavExpanded
+    isSideNavExpanded,
+    accessibilityLabel: accessibilityLabel
   } = _ref;
+  const {
+    isTreeview
+  } = React.useContext(SideNav.SideNavContext);
+  const listRef = React.useRef(null); // Adjust type if necessary
   const prefix = usePrefix.usePrefix();
   const className = index.default([`${prefix}--side-nav__items`], customClassName);
   const childrenWithExpandedState = React.Children.map(children, child => {
@@ -38,9 +45,22 @@ const SideNavItems = _ref => {
       });
     }
   });
-  return /*#__PURE__*/React.createElement("ul", {
-    className: className
-  }, childrenWithExpandedState);
+  React.useEffect(() => {
+    // set SideNavLink's role without needing to extend original component
+    if (isTreeview && listRef.current) {
+      const sideNavItem = listRef.current.querySelectorAll(`.${prefix}--side-nav__item a`);
+      sideNavItem.forEach(e => {
+        if (!e.hasAttribute('role')) {
+          e.setAttribute('role', 'treeitem');
+        }
+      });
+    }
+  }, [isTreeview]);
+  return /*#__PURE__*/React.createElement("ul", _rollupPluginBabelHelpers.extends({}, isTreeview && accessibilityLabel, {
+    ref: listRef,
+    className: className,
+    role: isTreeview ? 'tree' : ''
+  }), childrenWithExpandedState);
 };
 SideNavItems.displayName = 'SideNavItems';
 SideNavItems.propTypes = {