@okta/odyssey-react-mui 1.25.0 → 1.26.0

package/dist/labs/SideNav/SideNav.js

@@ -1,3 +1,4 @@
+import _Skeleton from "@mui/material/Skeleton";
 /*!
  * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
  * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
@@ -12,59 +13,77 @@
 
 import styled from "@emotion/styled";
 import { memo, useMemo, useState, useCallback, useRef, useEffect } from "react";
-import { ExpandLeftIcon } from "../../icons.generated/index.js";
-import { NavAccordion } from "../NavAccordion.js";
+import { useTranslation } from "react-i18next";
+import { NavAccordion } from "./NavAccordion.js";
 import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext.js";
-import { OktaLogo } from "./OktaLogo.js";
+import { OdysseyThemeProvider } from "../../OdysseyThemeProvider.js";
 import { SideNavHeader } from "./SideNavHeader.js";
-import { SideNavItemContent, SideNavListItemContainer } from "./SideNavItemContent.js";
+import { SideNavItemContent, StyledSideNavListItem } from "./SideNavItemContent.js";
 import { SideNavFooterContent } from "./SideNavFooterContent.js";
+import { SideNavItemContentContext } from "./SideNavItemContentContext.js";
+import { SideNavToggleButton } from "./SideNavToggleButton.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
 export const DEFAULT_SIDE_NAV_WIDTH = "300px";
-const SideNavContainer = styled("div", {
-  shouldForwardProp: prop => prop !== "expandedWidth"
-})(({
-  expandedWidth
-}) => ({
-  display: "flex",
-  height: "100%",
-  maxWidth: expandedWidth,
-  overflow: "hidden"
-}));
-const SideNavCollapsedContainer = styled("div", {
+export const SIDENAV_COLLAPSE_ICON_POSITION = "77px";
+const StyledCollapsibleContent = styled("div", {
   shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "isSideNavCollapsed"
 })(({
   odysseyDesignTokens,
   isSideNavCollapsed
 }) => ({
-  backgroundColor: odysseyDesignTokens.HueNeutral300,
-  paddingTop: odysseyDesignTokens.Spacing5,
-  cursor: "pointer",
-  width: isSideNavCollapsed ? "auto" : 0,
-  opacity: isSideNavCollapsed ? 1 : 0,
-  visibility: isSideNavCollapsed ? "visible" : "hidden",
-  transitionProperty: "opacity",
-  transitionDuration: odysseyDesignTokens.TransitionDurationMain,
-  transitionTimingFunction: odysseyDesignTokens.TransitionTimingMain
+  position: "relative",
+  display: "inline-grid",
+  gridTemplateColumns: isSideNavCollapsed ? 0 : DEFAULT_SIDE_NAV_WIDTH,
+  gridTemplateRows: "max-content 1fr max-content",
+  minWidth: isSideNavCollapsed ? 0 : DEFAULT_SIDE_NAV_WIDTH,
+  height: "100%",
+  transition: `grid-template-columns ${odysseyDesignTokens.TransitionDurationMain}, opacity 300ms`,
+  transitionTimingFunction: odysseyDesignTokens.TransitionTimingMain,
+  overflow: "hidden",
+  opacity: isSideNavCollapsed ? 0 : 1
 }));
-const SideNavExpandContainer = styled("nav", {
-  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "isSideNavCollapsed" && prop !== "expandedWidth"
+const StyledSideNav = styled("nav", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "isSideNavCollapsed"
 })(({
   odysseyDesignTokens,
-  isSideNavCollapsed,
-  expandedWidth
+  isSideNavCollapsed
 }) => ({
+  position: "relative",
+  display: "inline-block",
+  height: "100%",
   backgroundColor: odysseyDesignTokens.HueNeutralWhite,
-  flexDirection: "column",
-  display: "flex",
-  opacity: isSideNavCollapsed ? 0 : 1,
-  visibility: isSideNavCollapsed ? "hidden" : "visible",
-  width: isSideNavCollapsed ? "0" : expandedWidth,
-  transitionProperty: "opacity, width",
-  transitionDuration: odysseyDesignTokens.TransitionDurationMain,
-  transitionTimingFunction: odysseyDesignTokens.TransitionTimingMain,
-  borderRight: `${odysseyDesignTokens.BorderWidthMain} ${odysseyDesignTokens.BorderStyleMain} ${odysseyDesignTokens.HueNeutral50}`
+  "&::after": {
+    backgroundColor: odysseyDesignTokens.HueNeutral200,
+    content: "''",
+    height: "100%",
+    opacity: 0,
+    position: "absolute",
+    right: 0,
+    top: 0,
+    transform: `translateX(0)`,
+    transition: `opacity ${odysseyDesignTokens.TransitionDurationMain}, transform ${odysseyDesignTokens.TransitionDurationMain}`,
+    width: odysseyDesignTokens.Spacing2
+  },
+  "&:has([data-sidenav-toggle='true']:hover), &:has([data-sidenav-toggle='true']:focus)": {
+    ...(isSideNavCollapsed && {
+      "&::after": {
+        opacity: 1,
+        transform: `translateX(100%)`
+      },
+      "[data-sidenav-toggle='true']": {
+        transform: `translate3d(calc(100% + ${odysseyDesignTokens.Spacing3}), 0, 0)`
+      }
+    })
+  },
+  "[data-sidenav-toggle='true']": {
+    position: "absolute",
+    top: SIDENAV_COLLAPSE_ICON_POSITION,
+    right: 0,
+    transition: `transform ${odysseyDesignTokens.TransitionDurationMain}`,
+    transform: `translate3d(100%, 0, 0)`
+  }
 }));
 const SideNavHeaderContainer = styled("div", {
   shouldForwardProp: prop => prop !== "hasContentScrolled" && prop !== "odysseyDesignTokens"
@@ -72,22 +91,34 @@ const SideNavHeaderContainer = styled("div", {
   hasContentScrolled,
   odysseyDesignTokens
 }) => ({
-  position: "sticky",
-  top: 0,
+  flexShrink: 0,
   ...(hasContentScrolled && {
     borderBottom: `${odysseyDesignTokens.BorderWidthMain} ${odysseyDesignTokens.BorderStyleMain} ${odysseyDesignTokens.HueNeutral50}`
   })
 }));
-const SideNavListContainer = styled.ul({
+const SideNavListContainer = styled("ul")(() => ({
   padding: 0,
   listStyle: "none",
   listStyleType: "none"
-});
-const SideNavScrollableContainer = styled.div({
-  flex: 1,
-  overflowY: "auto"
-});
-const SectionHeader = styled("li", {
+}));
+const SideNavScrollableContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  flex: "1 1 100%",
+  overflowY: "auto",
+  paddingInline: odysseyDesignTokens.Spacing2
+}));
+const SectionHeaderContainer = styled("li", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  paddingBlock: odysseyDesignTokens.Spacing3,
+  paddingInline: odysseyDesignTokens.Spacing4
+}));
+const SectionHeader = styled("h3", {
   shouldForwardProp: prop => prop !== "odysseyDesignTokens"
 })(({
   odysseyDesignTokens
@@ -96,9 +127,6 @@ const SectionHeader = styled("li", {
   fontSize: odysseyDesignTokens.TypographySizeOverline,
   fontWeight: odysseyDesignTokens.TypographyWeightHeadingBold,
   color: odysseyDesignTokens.HueNeutral600,
-  paddingTop: odysseyDesignTokens.Spacing3,
-  paddingBottom: odysseyDesignTokens.Spacing3,
-  paddingLeft: odysseyDesignTokens.Spacing4,
   textTransform: "uppercase"
 }));
 const SideNavFooter = styled("div", {
@@ -107,14 +135,13 @@ const SideNavFooter = styled("div", {
   isContentScrollable,
   odysseyDesignTokens
 }) => ({
-  position: "sticky",
-  bottom: 0,
-  paddingTop: odysseyDesignTokens.Spacing2,
+  flexShrink: 0,
   transitionProperty: "box-shadow",
   transitionDuration: odysseyDesignTokens.TransitionDurationMain,
   transitionTiming: odysseyDesignTokens.TransitionTimingMain,
+  backgroundColor: odysseyDesignTokens.HueNeutralWhite,
   ...(isContentScrollable && {
-    boxShadow: odysseyDesignTokens.DepthHigh
+    boxShadow: "0px -8px 8px -8px rgba(39, 39, 39, 0.08)"
   })
 }));
 const SideNavFooterItemsContainer = styled("div", {
@@ -122,42 +149,71 @@ const SideNavFooterItemsContainer = styled("div", {
 })(({
   odysseyDesignTokens
 }) => ({
-  paddingTop: odysseyDesignTokens.Spacing2,
-  paddingBottom: odysseyDesignTokens.Spacing2,
+  paddingBlock: odysseyDesignTokens.Spacing4,
+  paddingInline: odysseyDesignTokens.Spacing5,
   display: "flex",
-  justifyContent: "center",
   flexWrap: "wrap",
   alignItems: "center",
   fontSize: odysseyDesignTokens.TypographySizeOverline,
-  "& a": {
-    color: `${odysseyDesignTokens.TypographyColorHeading} !important`
-  },
-  "& a:hover": {
-    textDecoration: "none"
-  },
-  "& a:visited": {
-    color: odysseyDesignTokens.TypographyColorHeading
+  a: {
+    color: `${odysseyDesignTokens.TypographyColorHeading} !important`,
+    "&:hover": {
+      textDecoration: "none"
+    },
+    "&:visited": {
+      color: odysseyDesignTokens.TypographyColorHeading
+    }
   }
 }));
+const LoadingItemContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  alignItems: "center",
+  display: "flex",
+  gap: odysseyDesignTokens.Spacing2,
+  paddingBlock: odysseyDesignTokens.Spacing2,
+  paddingInline: odysseyDesignTokens.Spacing4
+}));
 const getHasScrollableContent = scrollableContainer => scrollableContainer.scrollHeight > scrollableContainer.clientHeight;
+const LoadingItem = () => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  return _jsxs(LoadingItemContainer, {
+    odysseyDesignTokens: odysseyDesignTokens,
+    children: [_jsx(_Skeleton, {
+      variant: "circular",
+      width: odysseyDesignTokens.Spacing4,
+      height: odysseyDesignTokens.Spacing4
+    }), _jsx(_Skeleton, {
+      variant: "rounded",
+      width: "100%"
+    })]
+  });
+};
 const SideNav = ({
-  navHeaderText,
+  appName,
+  footerComponent,
+  footerItems,
+  hasCustomFooter,
   isCollapsible,
+  isCompact,
+  isLoading,
+  logoProps,
   onCollapse,
   onExpand,
-  sideNavItems,
-  expandedWidth = DEFAULT_SIDE_NAV_WIDTH,
-  footerItems,
-  footerComponent,
-  logo
+  sideNavItems
 }) => {
   const [isSideNavCollapsed, setSideNavCollapsed] = useState(false);
-  const odysseyDesignTokens = useOdysseyDesignTokens();
   const [isContentScrollable, setIsContentScrollable] = useState(false);
   const [hasContentScrolled, setHasContentScrolled] = useState(false);
   const scrollableContentRef = useRef(null);
   const resizeObserverRef = useRef(null);
   const intersectionObserverRef = useRef(null);
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  const {
+    t
+  } = useTranslation();
   useEffect(() => {
     const updateIsContentScrollable = () => {
       if (scrollableContentRef.current && scrollableContentRef.current.parentElement) {
@@ -188,9 +244,11 @@ const SideNav = ({
       });
     }
     if (intersectionObserverRef.current && scrollableContentRef.current) {
-      const ul = scrollableContentRef.current;
-      const li = ul?.firstChild;
-      intersectionObserverRef.current.observe(li);
+      const ulElement = scrollableContentRef.current;
+      const [liElement] = Array.from(ulElement?.children || []);
+      if (liElement) {
+        intersectionObserverRef.current.observe(liElement);
+      }
     }
     return () => {
       if (resizeObserverRef.current) {
@@ -203,7 +261,7 @@ const SideNav = ({
       }
       cancelAnimationFrame(resizeObserverDebounceTimer);
     };
-  }, []);
+  }, [sideNavItems]);
   const scrollIntoViewRef = useRef(null);
   const firstSideNavItemIdWithIsSelected = useMemo(() => {
     const flattenedItems = sideNavItems.flatMap(sideNavItem => sideNavItem.children ? [sideNavItem, ...sideNavItem.children] : sideNavItem);
@@ -216,116 +274,128 @@ const SideNav = ({
     }
   }, [firstSideNavItemIdWithIsSelected, scrollIntoViewRef]);
   const getRefIfThisIsFirstNodeWithIsSelected = useCallback(itemId => itemId === firstSideNavItemIdWithIsSelected ? scrollIntoViewRef : undefined, [firstSideNavItemIdWithIsSelected]);
+  const sideNavItemContentProviderValue = useMemo(() => ({
+    isCompact,
+    depth: 1
+  }), [isCompact]);
   const processedSideNavItems = useMemo(() => sideNavItems.map(item => ({
     ...item,
-    children: item.children?.map(childProps => _jsx(SideNavItemContent, {
-      scrollRef: getRefIfThisIsFirstNodeWithIsSelected(childProps.id),
-      ...childProps
-    }, childProps.id))
-  })), [getRefIfThisIsFirstNodeWithIsSelected, sideNavItems]);
-  const sideNavCollapseHandler = useCallback(() => {
-    setSideNavCollapsed(!isSideNavCollapsed);
-    onCollapse?.();
-  }, [isSideNavCollapsed, setSideNavCollapsed, onCollapse]);
+    children: item.children?.map(childProps => {
+      return _jsx(SideNavItemContentContext.Provider, {
+        value: {
+          ...sideNavItemContentProviderValue,
+          depth: 2
+        },
+        children: _createElement(SideNavItemContent, {
+          ...childProps,
+          key: childProps.id,
+          scrollRef: getRefIfThisIsFirstNodeWithIsSelected(childProps.id)
+        })
+      }, childProps.id);
+    })
+  })), [getRefIfThisIsFirstNodeWithIsSelected, sideNavItems, sideNavItemContentProviderValue]);
   const sideNavExpandClickHandler = useCallback(() => {
+    isSideNavCollapsed ? onExpand?.() : onCollapse?.();
     setSideNavCollapsed(!isSideNavCollapsed);
-    onExpand?.();
-  }, [isSideNavCollapsed, setSideNavCollapsed, onExpand]);
+  }, [isSideNavCollapsed, setSideNavCollapsed, onExpand, onCollapse]);
   const sideNavExpandKeyHandler = useCallback(event => {
     if (event?.key === "Enter" || event?.code === "Space") {
       event.preventDefault();
-      setSideNavCollapsed(!isSideNavCollapsed);
-      onExpand?.();
+      sideNavExpandClickHandler();
     }
-  }, [isSideNavCollapsed, setSideNavCollapsed, onExpand]);
-  const expandLeftIconStyles = useMemo(() => ({
-    fontSize: "1em",
-    margin: `0 ${odysseyDesignTokens.Spacing1}`
-  }), [odysseyDesignTokens]);
-  return _jsxs(SideNavContainer, {
-    expandedWidth: expandedWidth,
-    children: [_jsx(SideNavCollapsedContainer, {
-      tabIndex: 0,
-      role: "button",
-      odysseyDesignTokens: odysseyDesignTokens,
+  }, [sideNavExpandClickHandler]);
+  return _jsxs(StyledSideNav, {
+    "aria-label": t("navigation.label"),
+    id: "side-nav-expandable",
+    isSideNavCollapsed: isSideNavCollapsed,
+    odysseyDesignTokens: odysseyDesignTokens,
+    children: [isCollapsible && _jsx(SideNavToggleButton, {
+      ariaControls: "side-nav-expandable",
       isSideNavCollapsed: isSideNavCollapsed,
       onClick: sideNavExpandClickHandler,
-      onKeyDown: sideNavExpandKeyHandler,
-      "data-se": "collapsed-region",
-      "data-aria-label": "expand side navigation",
-      children: _jsx(ExpandLeftIcon, {
-        sx: expandLeftIconStyles
-      })
-    }), _jsxs(SideNavExpandContainer, {
-      odysseyDesignTokens: odysseyDesignTokens,
-      isSideNavCollapsed: isSideNavCollapsed,
-      "data-se": "expanded-region",
-      expandedWidth: expandedWidth,
-      "aria-label": navHeaderText,
-      children: [_jsx(SideNavHeaderContainer, {
+      onKeyDown: sideNavExpandKeyHandler
+    }), _jsx(OdysseyThemeProvider, {
+      children: _jsxs(StyledCollapsibleContent, {
+        "data-se": "collapsible-region",
+        isSideNavCollapsed: isSideNavCollapsed,
         odysseyDesignTokens: odysseyDesignTokens,
-        hasContentScrolled: hasContentScrolled,
-        children: _jsx(SideNavHeader, {
-          logo: logo || _jsx(OktaLogo, {}),
-          navHeaderText: navHeaderText,
-          isCollapsible: isCollapsible,
-          onCollapse: sideNavCollapseHandler
-        })
-      }), _jsx(SideNavScrollableContainer, {
-        "data-se": "scrollable-region",
-        children: _jsx(SideNavListContainer, {
-          ref: scrollableContentRef,
-          children: processedSideNavItems?.map(item => {
-            const {
-              id,
-              label,
-              isSectionHeader,
-              startIcon,
-              children,
-              isDefaultExpanded,
-              isDisabled,
-              isExpanded
-            } = item;
-            if (isSectionHeader) {
-              return _jsx(SectionHeader, {
-                id: id,
-                odysseyDesignTokens: odysseyDesignTokens,
-                children: label
-              }, id);
-            } else if (children) {
-              return _jsx(SideNavListItemContainer, {
-                id: id,
-                odysseyDesignTokens: odysseyDesignTokens,
-                children: _jsx(NavAccordion, {
-                  label: label,
-                  isDefaultExpanded: isDefaultExpanded,
-                  isExpanded: isExpanded,
-                  startIcon: startIcon,
-                  isDisabled: isDisabled,
-                  children: _jsx(SideNavListContainer, {
-                    id: `${id}-list`,
-                    children: children
+        children: [_jsx(SideNavHeaderContainer, {
+          odysseyDesignTokens: odysseyDesignTokens,
+          hasContentScrolled: hasContentScrolled,
+          children: _jsx(SideNavHeader, {
+            appName: appName,
+            isLoading: isLoading,
+            logoProps: logoProps
+          })
+        }), _jsx(SideNavScrollableContainer, {
+          odysseyDesignTokens: odysseyDesignTokens,
+          "data-se": "scrollable-region",
+          children: _jsx(SideNavListContainer, {
+            role: "list",
+            ref: scrollableContentRef,
+            children: isLoading ? [...Array(6)].map((_, index) => _jsx(LoadingItem, {}, index)) : processedSideNavItems?.map(item => {
+              const {
+                id,
+                label,
+                isSectionHeader,
+                startIcon,
+                children,
+                isDefaultExpanded,
+                isDisabled,
+                isExpanded
+              } = item;
+              if (isSectionHeader) {
+                return _jsx(SectionHeaderContainer, {
+                  id: id,
+                  odysseyDesignTokens: odysseyDesignTokens,
+                  children: _jsx(SectionHeader, {
+                    odysseyDesignTokens: odysseyDesignTokens,
+                    children: label
+                  })
+                }, id);
+              } else if (children) {
+                return _jsx(StyledSideNavListItem, {
+                  id: id,
+                  odysseyDesignTokens: odysseyDesignTokens,
+                  disabled: isDisabled,
+                  "aria-disabled": isDisabled,
+                  children: _jsx(NavAccordion, {
+                    label: label,
+                    isCompact: isCompact,
+                    isDefaultExpanded: isDefaultExpanded,
+                    isExpanded: isExpanded,
+                    startIcon: startIcon,
+                    isDisabled: isDisabled,
+                    children: _jsx(SideNavListContainer, {
+                      id: `${id}-list`,
+                      role: "list",
+                      children: children
+                    })
                   })
-                })
-              }, id);
-            } else {
-              return _jsx(SideNavItemContent, {
-                scrollRef: getRefIfThisIsFirstNodeWithIsSelected(item.id),
-                ...item
-              }, item.id);
-            }
+                }, id);
+              } else {
+                return _jsx(SideNavItemContentContext.Provider, {
+                  value: sideNavItemContentProviderValue,
+                  children: _createElement(SideNavItemContent, {
+                    ...item,
+                    key: item.id,
+                    scrollRef: getRefIfThisIsFirstNodeWithIsSelected(item.id)
+                  })
+                }, item.id);
+              }
+            })
           })
-        })
-      }), (footerItems || footerComponent) && _jsxs(SideNavFooter, {
-        odysseyDesignTokens: odysseyDesignTokens,
-        isContentScrollable: isContentScrollable,
-        children: [footerComponent, footerItems && !footerComponent && _jsx(SideNavFooterItemsContainer, {
+        }), !isLoading && (footerItems || hasCustomFooter) && _jsx(SideNavFooter, {
           odysseyDesignTokens: odysseyDesignTokens,
-          children: _jsx(SideNavFooterContent, {
-            footerItems: footerItems
+          isContentScrollable: isContentScrollable,
+          children: hasCustomFooter ? footerComponent : footerItems && _jsx(SideNavFooterItemsContainer, {
+            odysseyDesignTokens: odysseyDesignTokens,
+            children: _jsx(SideNavFooterContent, {
+              footerItems: footerItems
+            })
           })
         })]
-      })]
+      })
     })]
   });
 };