@carbon-labs/react-ui-shell 0.42.0 → 0.44.0

package/es/components/SideNav.d.ts

@@ -43,6 +43,8 @@ interface SideNavContextData {
     navType?: SIDE_NAV_TYPE;
     isTreeview?: boolean;
     setIsTreeview?: (value: boolean) => void;
+    currentPrimaryMenu?: string;
+    setCurrentPrimaryMenu?: (value: string) => void;
 }
 export declare const SideNavContext: React.Context<SideNavContextData>;
 export declare const SideNav: React.ForwardRefExoticComponent<Omit<SideNavProps, "ref"> & React.RefAttributes<HTMLElement>>;

package/es/components/SideNav.js

@@ -75,6 +75,7 @@ function SideNavRenderFunction(_ref, ref) {
   const expanded = controlled ? expandedProp : expandedState;
   const sideNavRef = useRef(null);
   const navRef = useMergedRefs([sideNavRef, ref]);
+  const [currentPrimaryMenu, setCurrentPrimaryMenu] = useState();
   const sideNavToggleText = expandedState ? t('collapse.sidenav') : t('expand.sidenav');
   const handleToggle = function (event) {
     let value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !expanded;
@@ -149,11 +150,22 @@ function SideNavRenderFunction(_ref, ref) {
       resetNodeTabIndices();
     }
   }, [prefix, internalIsTreeview]);
+  const smMediaQuery = `(min-width: ${breakpoints.sm.width})`;
+  const isSm = useMatchMedia(smMediaQuery);
   useEffect(() => {
     if (sideNavRef.current) {
+      const backButton = sideNavRef?.current.querySelector(`.${prefix}--side-nav__back-button`);
       const firstElement = sideNavRef?.current?.querySelector('a, button');
-      if (firstElement && (navType == SIDE_NAV_TYPE.PANEL || expanded)) {
-        firstElement.tabIndex = 0;
+      if (navType == SIDE_NAV_TYPE.PANEL || expanded) {
+        if (isSm && backButton) {
+          backButton.tabIndex = 0;
+          const firstElementAfterBack = backButton.nextElementSibling?.querySelector('a, button');
+          if (firstElementAfterBack) {
+            firstElementAfterBack.tabIndex = 0;
+          }
+        } else if (firstElement) {
+          firstElement.tabIndex = 0;
+        }
       }
     }
   }, [expanded]);
@@ -221,15 +233,17 @@ function SideNavRenderFunction(_ref, ref) {
         let nextFocusNode = null;
         if (match(event, ArrowUp)) {
           const parentNode = parentSideNavMenu(treeWalker.currentNode);
-          let previousSideNavMenu = parentNode?.previousElementSibling;
-
+          let previousSideNavMenu = treeWalker.currentNode?.previousSibling;
           // 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') {
+          if (previousSideNavMenu?.classList.contains(`${prefix}--side-nav__item--primary`)) {
+            nextFocusNode = previousSideNavMenu;
+          } else if (treeWalker.currentNode.classList.contains(`${prefix}--side-nav__item--primary`)) {
+            nextFocusNode = treeWalker.currentNode.previousSibling;
+          } // when previous sibling is open, go to its last item
+          else 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') {
@@ -241,7 +255,7 @@ function SideNavRenderFunction(_ref, ref) {
             nextFocusNode = treeWalker.previousSibling();
 
             // first item in the menu, go back up to SideNavMenu button
-            if (nextFocusNode == null) {
+            if (nextFocusNode == null && !parentNode.classList.contains(`${prefix}--side-nav__item--primary`)) {
               nextFocusNode = parentNode;
             }
           }
@@ -253,6 +267,11 @@ function SideNavRenderFunction(_ref, ref) {
               const parent = parentSideNavMenu(treeWalker.currentNode);
               nextFocusNode = parent?.nextElementSibling;
             }
+          } else if (treeWalker.currentNode.classList.contains(`${prefix}--side-nav__item--primary`)) {
+            nextFocusNode = treeWalker.currentNode.nextSibling;
+            if (nextFocusNode?.classList.contains(`${prefix}--side-nav__divider`)) {
+              nextFocusNode = nextFocusNode.nextSibling;
+            }
           } else {
             nextFocusNode = treeWalker.nextNode();
           }
@@ -327,7 +346,9 @@ function SideNavRenderFunction(_ref, ref) {
   function resetNodeTabIndices() {
     const items = sideNavRef?.current?.querySelectorAll('[tabIndex="0"]') ?? [];
     items.forEach(item => {
-      if (item.classList.contains(`${prefix}--side-nav__toggle`)) {
+      if (item.classList.contains(`${prefix}--side-nav__toggle`) || item.classList.contains(`${prefix}--side-nav__back-button`) ||
+      // checks if a link is in primary nav
+      item.classList.contains(`${prefix}--side-nav__link`) && item.closest(`ul`)?.getAttribute('aria-label') === ariaLabel) {
         return;
       }
       item.tabIndex = -1;
@@ -358,7 +379,9 @@ function SideNavRenderFunction(_ref, ref) {
       isRail,
       navType,
       isTreeview: internalIsTreeview,
-      setIsTreeview
+      setIsTreeview,
+      currentPrimaryMenu,
+      setCurrentPrimaryMenu
     }
   }, isFixedNav || hideOverlay ? null :
   /*#__PURE__*/

package/es/components/SideNavItems.js

@@ -21,7 +21,8 @@ const SideNavItems = _ref => {
     accessibilityLabel: accessibilityLabel
   } = _ref;
   const {
-    isTreeview
+    isTreeview,
+    currentPrimaryMenu
   } = useContext(SideNavContext);
   const listRef = useRef(null); // Adjust type if necessary
   const prefix = usePrefix();
@@ -57,6 +58,7 @@ const SideNavItems = _ref => {
   return /*#__PURE__*/React.createElement("ul", _extends({}, isTreeview && accessibilityLabel, {
     ref: listRef,
     className: className,
+    tabIndex: currentPrimaryMenu ? -1 : undefined,
     role: isTreeview ? 'tree' : ''
   }), childrenWithExpandedState);
 };

package/es/components/SideNavMenu.d.ts

@@ -6,6 +6,15 @@
  */
 import React from 'react';
 export interface SideNavMenuProps {
+    /**
+     * Title for back button in sm screen
+     */
+    backButtonTitle?: string;
+    /**
+     * A custom icon to render on the back button in sm screen
+     * default is ArrowLeft
+     */
+    backButtonRenderIcon?: React.ComponentType;
     /**
      * An optional CSS class to apply to the component.
      */
@@ -23,6 +32,10 @@ export interface SideNavMenuProps {
      * SideNavMenu depth to determine spacing
      */
     depth?: number;
+    /**
+     * Provide a unique id
+     */
+    id?: string;
     /**
      * Indicates whether the SideNavMenu is active.
      */
@@ -44,6 +57,12 @@ export interface SideNavMenuProps {
      * Indicates if the side navigation container is expanded or collapsed.
      */
     isSideNavExpanded?: boolean;
+    /**
+     * Specifies if this is the primary SideNav.
+     * If true, child components will open to the right,
+     * creating the double-wide navigation layout
+     */
+    primary?: boolean;
     /**
      *  The boolean to show the flyout menu has been selected.
      */

package/es/components/SideNavMenu.js

@@ -5,33 +5,45 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { breakpoints } from '../node_modules/@carbon/layout/es/index.js';
 import cx from '../_virtual/index.js';
 import PropTypes from 'prop-types';
 import React, { useContext, useState, useRef, useEffect } from 'react';
 import { CARBON_SIDENAV_ITEMS } from './_utils.js';
-import { SideNavIcon } from '@carbon/react';
-import { Escape, ArrowLeft, ArrowRight } from '../internal/keyboard/keys.js';
+import { useId } from '../internal/useId.js';
+import { SideNavIcon, Button } from '@carbon/react';
+import { Escape, ArrowLeft as ArrowLeft$1, ArrowRight } from '../internal/keyboard/keys.js';
 import { match } from '../internal/keyboard/match.js';
 import { usePrefix } from '../internal/usePrefix.js';
 import { SideNavContext, SIDE_NAV_TYPE } from './SideNav.js';
 import { useMergedRefs } from '../internal/useMergedRefs.js';
 import { SharkFinIcon } from './SharkFinIcon.js';
 import { SideNavFlyoutMenu } from './SideNavFlyoutMenu.js';
-import { ChevronDown } from '../node_modules/@carbon/icons-react/es/generated/bucket-3.js';
+import { SideNavItems } from './SideNavItems.js';
+import { useMatchMedia } from '../internal/useMatchMedia.js';
+import { ArrowLeft } from '../node_modules/@carbon/icons-react/es/generated/bucket-0.js';
+import { ChevronRight, ChevronDown } from '../node_modules/@carbon/icons-react/es/generated/bucket-3.js';
 
-var _SharkFinIcon, _ChevronDown;
+var _ArrowLeft, _SharkFinIcon, _ChevronRight, _ChevronDown;
+const smMediaQuery = `(max-width: ${breakpoints.md.width})`;
 const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref) {
   let {
+    backButtonRenderIcon = () => _ArrowLeft || (_ArrowLeft = /*#__PURE__*/React.createElement(ArrowLeft, {
+      size: 16
+    })),
+    backButtonTitle = 'My products',
     className: customClassName,
     children,
     defaultExpanded = false,
     depth: propDepth,
+    id,
     isActive = false,
     large = false,
     renderIcon: IconElement,
     isSideNavExpanded,
     title,
-    onMenuToggle
+    onMenuToggle,
+    primary
   } = _ref;
   const depth = propDepth;
   const {
@@ -46,10 +58,19 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
   const [isExpanded, setIsExpanded] = useState(defaultExpanded);
   const [active, setActive] = useState(isActive);
   const firstLink = useRef(null);
+  const backButtonRef = useRef(null);
+  const uid = useId('side-nav-menu');
+  const uniqueId = id || uid;
   const [prevExpanded, setPrevExpanded] = useState(defaultExpanded);
+  const [isSecondaryOpen, setSecondaryOpen] = useState(defaultExpanded);
+  const {
+    currentPrimaryMenu,
+    setCurrentPrimaryMenu
+  } = useContext(SideNavContext);
   const className = cx({
     [`${prefix}--side-nav__item`]: true,
-    [`${prefix}--side-nav__item--active`]: active || hasActiveDescendant(children) && !isExpanded,
+    [`${prefix}--side-nav__item--primary`]: primary,
+    [`${prefix}--side-nav__item--active`]: !primary && (active || hasActiveDescendant(children) && !isExpanded),
     [`${prefix}--side-nav__item--icon`]: IconElement,
     [`${prefix}--side-nav__item--large`]: large,
     [customClassName]: !!customClassName
@@ -58,6 +79,10 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
     [`${prefix}--side-nav__submenu`]: true,
     [`${prefix}--side-nav__submenu--active`]: active || hasActiveDescendant(children) && isExpanded
   });
+  const primaryClassNames = cx({
+    [`${prefix}--side-nav__menu-secondary-wrapper`]: true,
+    [`${prefix}--side-nav__menu-secondary-wrapper-expanded`]: isSideNavExpanded && isSecondaryOpen && currentPrimaryMenu === uniqueId
+  });
   const buttonRef = useRef(null);
   const listRef = useRef(null);
   const menuRef = useMergedRefs([buttonRef, ref]);
@@ -159,7 +184,7 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
       const isMenu = node.hasAttribute('aria-expanded');
       const isExpanded = node.getAttribute('aria-expanded');
       const parent = parentSideNavMenu(node);
-      if (match(event, ArrowLeft)) {
+      if (match(event, ArrowLeft$1)) {
         event.stopPropagation();
 
         // collapse menu
@@ -168,10 +193,11 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
             if (onMenuToggle) {
               onMenuToggle();
             }
-            setIsExpanded(false);
-
+            if (!primary && isExpanded) {
+              setIsExpanded(false);
+            }
             // go to previous level's side nav menu button
-          } else {
+          } else if (!isSm) {
             // 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');
@@ -181,33 +207,74 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
 
           // go to side nav menu button
         } else if (parent) {
-          const button = parent.querySelector('button');
-          button.tabIndex = 0;
-          button?.focus();
+          if (parent.hasAttribute('aria-expanded')) {
+            const button = parent.querySelector('button');
+            if (button) {
+              button.tabIndex = 0;
+              button.focus();
+            }
+          } else if (!isSm) {
+            const previousMenu = parentSideNavMenu(parent);
+            const button = previousMenu.querySelector('button');
+            button.tabIndex = 0;
+            button?.focus();
+          }
         }
       }
       if (match(event, ArrowRight)) {
+        setIsExpanded(true);
+        if (primary && node.hasAttribute('aria-expanded')) {
+          event.preventDefault();
+        }
         event.stopPropagation();
 
         // expand menu when sidenav is expanded
         if (isMenu && sideNavExpanded) {
-          setIsExpanded(true);
           if (onMenuToggle) {
             onMenuToggle();
           }
 
           // if already expanded, focus on first element
-          if (isExpanded == 'true') {
-            let nextNode = node.nextElementSibling?.querySelector('a, button');
+          if (isExpanded == 'true' || isSm) {
+            const nextNode = node.nextElementSibling?.querySelector('a, button');
             if (nextNode) {
               nextNode.tabIndex = 0;
               nextNode.focus();
             }
+            if (isSm) {
+              const nextNodeAfterBackButton = nextNode.nextElementSibling?.querySelector('a, button');
+              if (nextNodeAfterBackButton) {
+                nextNodeAfterBackButton.tabIndex = 0;
+              }
+            }
           }
         }
       }
     }
   }
+  function handleOnBackButtonClick(event) {
+    const node = event.target;
+    const parent = parentSideNavMenu(node);
+    const button = parent.querySelector('button');
+    if (button) {
+      button.tabIndex = 0;
+      button.focus();
+    }
+    setIsExpanded(false);
+  }
+  useEffect(() => {
+    if (isExpanded && primary && setCurrentPrimaryMenu) {
+      setCurrentPrimaryMenu(uniqueId);
+    }
+    setSecondaryOpen(isExpanded);
+  }, [isExpanded]);
+  useEffect(() => {
+    if (currentPrimaryMenu !== uniqueId) {
+      setIsExpanded(false);
+    } else {
+      setIsExpanded(true);
+    }
+  }, [currentPrimaryMenu]);
 
   // save expanded state before SideNav collapse
   const [lastExpandedState, setLastExpandedState] = useState(isExpanded);
@@ -222,6 +289,14 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
     }
   }, [sideNavExpanded]);
   const [openPopover, setOpenPopover] = React.useState(false);
+  const isSm = useMatchMedia(smMediaQuery);
+
+  // keeps the secondary open when moving from small to large breakpoints
+  useEffect(() => {
+    if (!isSm && uniqueId === currentPrimaryMenu) {
+      setIsExpanded(true);
+    }
+  }, [isSm]);
   const content =
   /*#__PURE__*/
   // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
@@ -230,7 +305,8 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
     "aria-expanded": isExpanded,
     className: className,
     ref: listRef,
-    onKeyDown: handleKeyDown
+    onKeyDown: handleKeyDown,
+    id: uniqueId
   }, /*#__PURE__*/React.createElement("button", {
     "aria-expanded": isExpanded,
     className: buttonClassName,
@@ -243,10 +319,13 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
       if (navType == SIDE_NAV_TYPE.PANEL && !isExpanded && firstLink.current && !sideNavExpanded) {
         setOpenPopover(!openPopover);
         // window.location.href = firstLink.current;
-      } else {
+      } else if (isSm || !primary || currentPrimaryMenu !== uniqueId) {
         setIsExpanded(!isExpanded);
         setLastExpandedState(!isExpanded);
       }
+      if (isSm && backButtonRef.current) {
+        backButtonRef.current.focus();
+      }
     },
     ref: menuRef,
     type: "button",
@@ -260,9 +339,24 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
   }, title), /*#__PURE__*/React.createElement(SideNavIcon, {
     className: `${prefix}--side-nav__submenu-chevron`,
     small: true
-  }, _ChevronDown || (_ChevronDown = /*#__PURE__*/React.createElement(ChevronDown, {
+  }, primary ? _ChevronRight || (_ChevronRight = /*#__PURE__*/React.createElement(ChevronRight, {
     size: 20
-  })))), /*#__PURE__*/React.createElement("ul", {
+  })) : _ChevronDown || (_ChevronDown = /*#__PURE__*/React.createElement(ChevronDown, {
+    size: 20
+  })))), primary ? /*#__PURE__*/React.createElement("div", {
+    className: primaryClassNames
+  }, /*#__PURE__*/React.createElement(SideNavItems, {
+    accessibilityLabel: {
+      'aria-label': `${title} submenu`
+    }
+  }, isSm && /*#__PURE__*/React.createElement(Button, {
+    ref: backButtonRef,
+    kind: "ghost",
+    size: "md",
+    onClick: handleOnBackButtonClick,
+    className: `${prefix}--side-nav__back-button`,
+    renderIcon: backButtonRenderIcon
+  }, backButtonTitle), childrenToRender)) : /*#__PURE__*/React.createElement("ul", {
     className: `${prefix}--side-nav__menu`,
     role: "group"
   }, childrenToRender));
@@ -275,6 +369,15 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
 });
 SideNavMenu.displayName = 'SideNavMenu';
 SideNavMenu.propTypes = {
+  /**
+   * A custom icon to render on the back button in sm screen
+   */
+  // @ts-expect-error - PropTypes are unable to cover this case.
+  backButtonRenderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  /**
+   * Title for back button in sm screen
+   */
+  backButtonTitle: PropTypes.string,
   /**
    * Provide <SideNavMenuItem>'s inside of the `SideNavMenu`
    */
@@ -293,6 +396,10 @@ SideNavMenu.propTypes = {
    * SideNavMenu depth to determine spacing
    */
   depth: PropTypes.number,
+  /**
+   * Provide a unique id
+   */
+  id: PropTypes.string,
   /**
    * Specify whether the `SideNavMenu` is "active". `SideNavMenu` should be
    * considered active if one of its menu items are a link for the current