@carbon-labs/react-ui-shell 0.41.0 → 0.43.0

package/lib/components/SideNav.d.ts

@@ -21,6 +21,7 @@ export interface SideNavProps extends ComponentProps<'nav'>, TranslateWithId<Tra
     defaultExpanded?: boolean;
     isChildOfHeader?: boolean;
     onToggle?: (event: FocusEvent<HTMLElement> | KeyboardEvent<HTMLElement> | boolean, value: boolean) => void;
+    hideRailBreakpointDown?: 'sm' | 'md' | 'lg' | 'xlg' | 'max';
     href?: string;
     isFixedNav?: boolean;
     isRail?: boolean;
@@ -42,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/lib/components/SideNav.js

@@ -50,6 +50,7 @@ function SideNavRenderFunction(_ref, ref) {
     children,
     onToggle,
     className: customClassName,
+    hideRailBreakpointDown,
     href,
     isFixedNav = false,
     isRail,
@@ -76,6 +77,7 @@ function SideNavRenderFunction(_ref, ref) {
   const expanded = controlled ? expandedProp : expandedState;
   const sideNavRef = React.useRef(null);
   const navRef = useMergedRefs.useMergedRefs([sideNavRef, ref]);
+  const [currentPrimaryMenu, setCurrentPrimaryMenu] = React.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;
@@ -97,6 +99,7 @@ function SideNavRenderFunction(_ref, ref) {
     [`${prefix}--side-nav`]: true,
     [`${prefix}--side-nav--expanded`]: expanded || expandedViaHoverState,
     [`${prefix}--side-nav--collapsed`]: !expanded && isFixedNav,
+    [`${prefix}--side-nav--hide-rail-breakpoint-down-${hideRailBreakpointDown}`]: hideRailBreakpointDown,
     [`${prefix}--side-nav--rail`]: isRail,
     [`${prefix}--side-nav--panel`]: navType === SIDE_NAV_TYPE.PANEL,
     [`${prefix}--side-nav--ux`]: isChildOfHeader,
@@ -149,11 +152,22 @@ function SideNavRenderFunction(_ref, ref) {
       resetNodeTabIndices();
     }
   }, [prefix, internalIsTreeview]);
+  const smMediaQuery = `(min-width: ${index$1.breakpoints.sm.width})`;
+  const isSm = useMatchMedia.useMatchMedia(smMediaQuery);
   React.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 +235,17 @@ function SideNavRenderFunction(_ref, ref) {
         let nextFocusNode = null;
         if (match.match(event, keys.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 +257,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 +269,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 +348,7 @@ 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`)) {
         return;
       }
       item.tabIndex = -1;
@@ -358,7 +379,9 @@ function SideNavRenderFunction(_ref, ref) {
       isRail,
       navType,
       isTreeview: internalIsTreeview,
-      setIsTreeview
+      setIsTreeview,
+      currentPrimaryMenu,
+      setCurrentPrimaryMenu
     }
   }, isFixedNav || hideOverlay ? null :
   /*#__PURE__*/
@@ -412,6 +435,12 @@ SideNav.propTypes = {
    * If `true`, the overlay will be hidden. Defaults to `false`.
    */
   hideOverlay: PropTypes.bool,
+  /**
+   * Specify the breakpoint at which the SideNav will be hidden.
+   * Can be one of `sm`, `md`, `lg`, `xlg`, or `max`.
+   * Only applies when `isRail` is `true`.
+   */
+  hideRailBreakpointDown: PropTypes.oneOf(['sm', 'md', 'lg', 'xlg', 'max']),
   /**
    * Provide the `href` to the id of the element on your package that is the
    * main content.

package/lib/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/lib/components/SideNavMenu.js

@@ -7,10 +7,12 @@
 
 'use strict';
 
+var index$1 = require('../node_modules/@carbon/layout/es/index.js');
 var index = require('../_virtual/index.js');
 var PropTypes = require('prop-types');
 var React = require('react');
 var _utils = require('./_utils.js');
+var useId = require('../internal/useId.js');
 var react = require('@carbon/react');
 var keys = require('../internal/keyboard/keys.js');
 var match = require('../internal/keyboard/match.js');
@@ -19,21 +21,31 @@ var SideNav = require('./SideNav.js');
 var useMergedRefs = require('../internal/useMergedRefs.js');
 var SharkFinIcon = require('./SharkFinIcon.js');
 var SideNavFlyoutMenu = require('./SideNavFlyoutMenu.js');
+var SideNavItems = require('./SideNavItems.js');
+var useMatchMedia = require('../internal/useMatchMedia.js');
+var bucket0 = require('../node_modules/@carbon/icons-react/es/generated/bucket-0.js');
 var bucket3 = require('../node_modules/@carbon/icons-react/es/generated/bucket-3.js');
 
-var _SharkFinIcon, _ChevronDown;
+var _ArrowLeft, _SharkFinIcon, _ChevronRight, _ChevronDown;
+const smMediaQuery = `(max-width: ${index$1.breakpoints.md.width})`;
 const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref) {
   let {
+    backButtonRenderIcon = () => _ArrowLeft || (_ArrowLeft = /*#__PURE__*/React.createElement(bucket0.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 {
@@ -48,10 +60,19 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
   const [isExpanded, setIsExpanded] = React.useState(defaultExpanded);
   const [active, setActive] = React.useState(isActive);
   const firstLink = React.useRef(null);
+  const backButtonRef = React.useRef(null);
+  const uid = useId.useId('side-nav-menu');
+  const uniqueId = id || uid;
   const [prevExpanded, setPrevExpanded] = React.useState(defaultExpanded);
+  const [isSecondaryOpen, setSecondaryOpen] = React.useState(defaultExpanded);
+  const {
+    currentPrimaryMenu,
+    setCurrentPrimaryMenu
+  } = React.useContext(SideNav.SideNavContext);
   const className = index.default({
     [`${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
@@ -60,6 +81,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 = index.default({
+    [`${prefix}--side-nav__menu-secondary-wrapper`]: true,
+    [`${prefix}--side-nav__menu-secondary-wrapper-expanded`]: isSideNavExpanded && isSecondaryOpen && currentPrimaryMenu === uniqueId
+  });
   const buttonRef = React.useRef(null);
   const listRef = React.useRef(null);
   const menuRef = useMergedRefs.useMergedRefs([buttonRef, ref]);
@@ -170,10 +195,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');
@@ -183,33 +209,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.match(event, keys.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);
+  }
+  React.useEffect(() => {
+    if (isExpanded && primary && setCurrentPrimaryMenu) {
+      setCurrentPrimaryMenu(uniqueId);
+    }
+    setSecondaryOpen(isExpanded);
+  }, [isExpanded]);
+  React.useEffect(() => {
+    if (currentPrimaryMenu !== uniqueId) {
+      setIsExpanded(false);
+    } else {
+      setIsExpanded(true);
+    }
+  }, [currentPrimaryMenu]);
 
   // save expanded state before SideNav collapse
   const [lastExpandedState, setLastExpandedState] = React.useState(isExpanded);
@@ -224,6 +291,14 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
     }
   }, [sideNavExpanded]);
   const [openPopover, setOpenPopover] = React.useState(false);
+  const isSm = useMatchMedia.useMatchMedia(smMediaQuery);
+
+  // keeps the secondary open when moving from small to large breakpoints
+  React.useEffect(() => {
+    if (!isSm && uniqueId === currentPrimaryMenu) {
+      setIsExpanded(true);
+    }
+  }, [isSm]);
   const content =
   /*#__PURE__*/
   // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
@@ -232,7 +307,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,
@@ -245,10 +321,13 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
       if (navType == SideNav.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",
@@ -262,9 +341,24 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
   }, title), /*#__PURE__*/React.createElement(react.SideNavIcon, {
     className: `${prefix}--side-nav__submenu-chevron`,
     small: true
-  }, _ChevronDown || (_ChevronDown = /*#__PURE__*/React.createElement(bucket3.ChevronDown, {
+  }, primary ? _ChevronRight || (_ChevronRight = /*#__PURE__*/React.createElement(bucket3.ChevronRight, {
     size: 20
-  })))), /*#__PURE__*/React.createElement("ul", {
+  })) : _ChevronDown || (_ChevronDown = /*#__PURE__*/React.createElement(bucket3.ChevronDown, {
+    size: 20
+  })))), primary && /*#__PURE__*/React.createElement("div", {
+    className: primaryClassNames
+  }, /*#__PURE__*/React.createElement(SideNavItems.SideNavItems, {
+    accessibilityLabel: {
+      'aria-label': `${title} submenu`
+    }
+  }, isSm && /*#__PURE__*/React.createElement(react.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));
@@ -277,6 +371,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`
    */
@@ -295,6 +398,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