@okta/odyssey-react-mui 1.25.0 → 1.26.0

package/src/labs/SideNav/SideNav.tsx

@@ -10,44 +10,42 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import styled from "@emotion/styled";
+import styled, { CSSObject } from "@emotion/styled";
 import {
   memo,
   useMemo,
   useState,
   useCallback,
-  KeyboardEvent,
   useRef,
   useEffect,
+  KeyboardEventHandler,
 } from "react";
+import { Skeleton } from "@mui/material";
+import { useTranslation } from "react-i18next";
 
-import { ExpandLeftIcon } from "../../icons.generated";
-import { NavAccordion } from "../NavAccordion";
+import { NavAccordion } from "./NavAccordion";
 import {
   DesignTokens,
   useOdysseyDesignTokens,
 } from "../../OdysseyDesignTokensContext";
+import { OdysseyThemeProvider } from "../../OdysseyThemeProvider";
 import type { SideNavProps } from "./types";
-import { OktaLogo } from "./OktaLogo";
 import { SideNavHeader } from "./SideNavHeader";
 import {
   SideNavItemContent,
-  SideNavListItemContainer,
+  StyledSideNavListItem,
 } from "./SideNavItemContent";
 import { SideNavFooterContent } from "./SideNavFooterContent";
+import { SideNavItemContentContext } from "./SideNavItemContentContext";
+import { SideNavToggleButton } from "./SideNavToggleButton";
 
 export const DEFAULT_SIDE_NAV_WIDTH = "300px";
 
-const SideNavContainer = styled("div", {
-  shouldForwardProp: (prop) => prop !== "expandedWidth",
-})(({ expandedWidth }: { expandedWidth: SideNavProps["expandedWidth"] }) => ({
-  display: "flex",
-  height: "100%",
-  maxWidth: expandedWidth,
-  overflow: "hidden",
-}));
+// The side nav collapse icon is placed absolutely from the top (Logo container + nav header height)
+// to align it in the middle of the nav header text
+export const SIDENAV_COLLAPSE_ICON_POSITION = "77px";
 
-const SideNavCollapsedContainer = styled("div", {
+const StyledCollapsibleContent = styled("div", {
   shouldForwardProp: (prop) =>
     prop !== "odysseyDesignTokens" && prop !== "isSideNavCollapsed",
 })(
@@ -58,43 +56,69 @@ const SideNavCollapsedContainer = styled("div", {
     odysseyDesignTokens: DesignTokens;
     isSideNavCollapsed: boolean;
   }) => ({
-    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,
+    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", {
+const StyledSideNav = styled("nav", {
   shouldForwardProp: (prop) =>
-    prop !== "odysseyDesignTokens" &&
-    prop !== "isSideNavCollapsed" &&
-    prop !== "expandedWidth",
+    prop !== "odysseyDesignTokens" && prop !== "isSideNavCollapsed",
 })(
   ({
     odysseyDesignTokens,
     isSideNavCollapsed,
-    expandedWidth,
   }: {
     odysseyDesignTokens: DesignTokens;
     isSideNavCollapsed: boolean;
-    expandedWidth: string;
   }) => ({
+    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)`,
+    },
   }),
 );
 
@@ -109,36 +133,43 @@ const SideNavHeaderContainer = styled("div", {
     hasContentScrolled: boolean;
     odysseyDesignTokens: DesignTokens;
   }) => ({
-    position: "sticky",
-    top: 0,
+    flexShrink: 0,
     // The bottom border should appear only if the scrollable region has been scrolled
-    ...(hasContentScrolled && {
-      borderBottom: `${odysseyDesignTokens.BorderWidthMain} ${odysseyDesignTokens.BorderStyleMain} ${odysseyDesignTokens.HueNeutral50}`,
-    }),
+    ...(hasContentScrolled &&
+      ({
+        borderBottom: `${odysseyDesignTokens.BorderWidthMain} ${odysseyDesignTokens.BorderStyleMain} ${odysseyDesignTokens.HueNeutral50}`,
+      } satisfies CSSObject)),
   }),
 );
 
-const SideNavListContainer = styled.ul({
+const SideNavListContainer = styled("ul")(() => ({
   padding: 0,
   listStyle: "none",
   listStyleType: "none",
-});
+}));
 
-const SideNavScrollableContainer = styled.div({
-  flex: 1,
+const SideNavScrollableContainer = styled("div", {
+  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({
+  flex: "1 1 100%",
   overflowY: "auto",
-});
+  paddingInline: odysseyDesignTokens.Spacing2,
+}));
+
+const SectionHeaderContainer = styled("li", {
+  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({
+  paddingBlock: odysseyDesignTokens.Spacing3,
+  paddingInline: odysseyDesignTokens.Spacing4,
+}));
 
-const SectionHeader = styled("li", {
+const SectionHeader = styled("h3", {
   shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
 })(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({
   fontFamily: odysseyDesignTokens.TypographyFamilyHeading,
   fontSize: odysseyDesignTokens.TypographySizeOverline,
   fontWeight: odysseyDesignTokens.TypographyWeightHeadingBold,
   color: odysseyDesignTokens.HueNeutral600,
-  paddingTop: odysseyDesignTokens.Spacing3,
-  paddingBottom: odysseyDesignTokens.Spacing3,
-  paddingLeft: odysseyDesignTokens.Spacing4,
   textTransform: "uppercase",
 }));
 
@@ -153,15 +184,14 @@ const SideNavFooter = styled("div", {
     isContentScrollable: boolean;
     odysseyDesignTokens: DesignTokens;
   }) => ({
-    position: "sticky",
-    bottom: 0,
-    paddingTop: odysseyDesignTokens.Spacing2,
+    flexShrink: 0,
     transitionProperty: "box-shadow",
     transitionDuration: odysseyDesignTokens.TransitionDurationMain,
     transitionTiming: odysseyDesignTokens.TransitionTimingMain,
+    backgroundColor: odysseyDesignTokens.HueNeutralWhite,
     // The box shadow should appear above the footer only if the scrollable region has overflow
     ...(isContentScrollable && {
-      boxShadow: odysseyDesignTokens.DepthHigh,
+      boxShadow: "0px -8px 8px -8px rgba(39, 39, 39, 0.08)",
     }),
   }),
 );
@@ -169,45 +199,74 @@ const SideNavFooter = styled("div", {
 const SideNavFooterItemsContainer = styled("div", {
   shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
 })(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({
-  paddingTop: odysseyDesignTokens.Spacing2,
-  paddingBottom: odysseyDesignTokens.Spacing2,
+  paddingBlock: odysseyDesignTokens.Spacing4,
+  // paddingBlockEnd: odysseyDesignTokens.Spacing4,
+  paddingInline: odysseyDesignTokens.Spacing5,
   display: "flex",
-  justifyContent: "center",
   flexWrap: "wrap",
   alignItems: "center",
   fontSize: odysseyDesignTokens.TypographySizeOverline,
-  "& a": {
+
+  a: {
     color: `${odysseyDesignTokens.TypographyColorHeading} !important`,
-  },
-  "& a:hover": {
-    textDecoration: "none",
-  },
-  "& a:visited": {
-    color: odysseyDesignTokens.TypographyColorHeading,
+
+    "&:hover": {
+      textDecoration: "none",
+    },
+    "&:visited": {
+      color: odysseyDesignTokens.TypographyColorHeading,
+    },
   },
 }));
 
+const LoadingItemContainer = styled("div", {
+  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({
+  alignItems: "center",
+  display: "flex",
+  gap: odysseyDesignTokens.Spacing2,
+  paddingBlock: odysseyDesignTokens.Spacing2,
+  paddingInline: odysseyDesignTokens.Spacing4,
+}));
+
 const getHasScrollableContent = (scrollableContainer: HTMLElement) =>
   scrollableContainer.scrollHeight > scrollableContainer.clientHeight;
 
+const LoadingItem = () => {
+  const odysseyDesignTokens: DesignTokens = useOdysseyDesignTokens();
+  return (
+    <LoadingItemContainer odysseyDesignTokens={odysseyDesignTokens}>
+      <Skeleton
+        variant="circular"
+        width={odysseyDesignTokens.Spacing4}
+        height={odysseyDesignTokens.Spacing4}
+      />
+      <Skeleton variant="rounded" width="100%" />
+    </LoadingItemContainer>
+  );
+};
+
 const SideNav = ({
-  navHeaderText,
+  appName,
+  footerComponent,
+  footerItems,
+  hasCustomFooter,
   isCollapsible,
+  isCompact,
+  isLoading,
+  logoProps,
   onCollapse,
   onExpand,
   sideNavItems,
-  expandedWidth = DEFAULT_SIDE_NAV_WIDTH,
-  footerItems,
-  footerComponent,
-  logo,
 }: SideNavProps) => {
   const [isSideNavCollapsed, setSideNavCollapsed] = useState(false);
-  const odysseyDesignTokens = useOdysseyDesignTokens();
   const [isContentScrollable, setIsContentScrollable] = useState(false);
   const [hasContentScrolled, setHasContentScrolled] = useState(false);
   const scrollableContentRef = useRef<HTMLUListElement>(null);
   const resizeObserverRef = useRef<ResizeObserver | null>(null);
   const intersectionObserverRef = useRef<IntersectionObserver | null>(null);
+  const odysseyDesignTokens: DesignTokens = useOdysseyDesignTokens();
+  const { t } = useTranslation();
 
   useEffect(() => {
     const updateIsContentScrollable = () => {
@@ -267,10 +326,14 @@ const SideNav = ({
         },
       );
     }
+
     if (intersectionObserverRef.current && scrollableContentRef.current) {
-      const ul = scrollableContentRef.current;
-      const li = ul?.firstChild;
-      intersectionObserverRef.current.observe(li as HTMLElement);
+      const ulElement = scrollableContentRef.current;
+      const [liElement] = Array.from(ulElement?.children || []);
+
+      if (liElement) {
+        intersectionObserverRef.current.observe(liElement);
+      }
     }
 
     // Cleanup when unmounted:
@@ -285,7 +348,7 @@ const SideNav = ({
       }
       cancelAnimationFrame(resizeObserverDebounceTimer); // Ensure timer is cleared on component unmount
     };
-  }, []);
+  }, [sideNavItems]);
 
   const scrollIntoViewRef = useRef<HTMLLIElement>(null);
   /**
@@ -328,155 +391,179 @@ const SideNav = ({
     [firstSideNavItemIdWithIsSelected],
   );
 
+  const sideNavItemContentProviderValue = useMemo(
+    () => ({ isCompact, depth: 1 }),
+    [isCompact],
+  );
+
   const processedSideNavItems = useMemo(
     () =>
       sideNavItems.map((item) => ({
         ...item,
-        children: item.children?.map((childProps) => (
-          <SideNavItemContent
-            key={childProps.id}
-            scrollRef={getRefIfThisIsFirstNodeWithIsSelected(childProps.id)}
-            {...childProps}
-          />
-        )),
+        children: item.children?.map((childProps) => {
+          return (
+            <SideNavItemContentContext.Provider
+              value={{ ...sideNavItemContentProviderValue, depth: 2 }}
+              key={childProps.id}
+            >
+              <SideNavItemContent
+                {...childProps}
+                key={childProps.id}
+                scrollRef={getRefIfThisIsFirstNodeWithIsSelected(childProps.id)}
+              />
+            </SideNavItemContentContext.Provider>
+          );
+        }),
       })),
-    [getRefIfThisIsFirstNodeWithIsSelected, sideNavItems],
+    [
+      getRefIfThisIsFirstNodeWithIsSelected,
+      sideNavItems,
+      sideNavItemContentProviderValue,
+    ],
   );
 
-  const sideNavCollapseHandler = useCallback(() => {
-    setSideNavCollapsed(!isSideNavCollapsed);
-    onCollapse?.();
-  }, [isSideNavCollapsed, setSideNavCollapsed, onCollapse]);
-
   const sideNavExpandClickHandler = useCallback(() => {
+    isSideNavCollapsed ? onExpand?.() : onCollapse?.();
     setSideNavCollapsed(!isSideNavCollapsed);
-    onExpand?.();
-  }, [isSideNavCollapsed, setSideNavCollapsed, onExpand]);
+  }, [isSideNavCollapsed, setSideNavCollapsed, onExpand, onCollapse]);
 
-  const sideNavExpandKeyHandler = useCallback(
-    (event: KeyboardEvent<HTMLDivElement>) => {
+  const sideNavExpandKeyHandler = useCallback<
+    KeyboardEventHandler<HTMLButtonElement>
+  >(
+    (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],
+    [sideNavExpandClickHandler],
   );
 
   return (
-    <SideNavContainer expandedWidth={expandedWidth}>
-      <SideNavCollapsedContainer
-        tabIndex={0}
-        role="button"
-        odysseyDesignTokens={odysseyDesignTokens}
-        isSideNavCollapsed={isSideNavCollapsed}
-        onClick={sideNavExpandClickHandler}
-        onKeyDown={sideNavExpandKeyHandler}
-        data-se="collapsed-region"
-        data-aria-label="expand side navigation"
-      >
-        <ExpandLeftIcon sx={expandLeftIconStyles} />
-      </SideNavCollapsedContainer>
-      <SideNavExpandContainer
-        odysseyDesignTokens={odysseyDesignTokens}
-        isSideNavCollapsed={isSideNavCollapsed}
-        data-se="expanded-region"
-        expandedWidth={expandedWidth}
-        aria-label={navHeaderText}
-      >
-        <SideNavHeaderContainer
+    <StyledSideNav
+      aria-label={t("navigation.label")}
+      id="side-nav-expandable"
+      isSideNavCollapsed={isSideNavCollapsed}
+      odysseyDesignTokens={odysseyDesignTokens}
+    >
+      {isCollapsible && (
+        <SideNavToggleButton
+          ariaControls="side-nav-expandable"
+          isSideNavCollapsed={isSideNavCollapsed}
+          onClick={sideNavExpandClickHandler}
+          onKeyDown={sideNavExpandKeyHandler}
+        />
+      )}
+      <OdysseyThemeProvider>
+        <StyledCollapsibleContent
+          data-se="collapsible-region"
+          isSideNavCollapsed={isSideNavCollapsed}
           odysseyDesignTokens={odysseyDesignTokens}
-          hasContentScrolled={hasContentScrolled}
         >
-          <SideNavHeader
-            logo={logo || <OktaLogo />}
-            navHeaderText={navHeaderText}
-            isCollapsible={isCollapsible}
-            onCollapse={sideNavCollapseHandler}
-          />
-        </SideNavHeaderContainer>
-        <SideNavScrollableContainer data-se="scrollable-region">
-          <SideNavListContainer ref={scrollableContentRef}>
-            {processedSideNavItems?.map((item) => {
-              const {
-                id,
-                label,
-                isSectionHeader,
-                startIcon,
-                children,
-                isDefaultExpanded,
-                isDisabled,
-                isExpanded,
-              } = item;
-
-              if (isSectionHeader) {
-                return (
-                  <SectionHeader
-                    id={id}
-                    key={id}
-                    odysseyDesignTokens={odysseyDesignTokens}
-                  >
-                    {label}
-                  </SectionHeader>
-                );
-              } else if (children) {
-                return (
-                  <SideNavListItemContainer
-                    id={id}
-                    key={id}
-                    odysseyDesignTokens={odysseyDesignTokens}
-                  >
-                    <NavAccordion
-                      label={label}
-                      isDefaultExpanded={isDefaultExpanded}
-                      isExpanded={isExpanded}
-                      startIcon={startIcon}
-                      isDisabled={isDisabled}
-                    >
-                      <SideNavListContainer id={`${id}-list`}>
-                        {children}
-                      </SideNavListContainer>
-                    </NavAccordion>
-                  </SideNavListItemContainer>
-                );
-              } else {
-                return (
-                  <SideNavItemContent
-                    key={item.id}
-                    scrollRef={getRefIfThisIsFirstNodeWithIsSelected(item.id)}
-                    {...item}
-                  />
-                );
-              }
-            })}
-          </SideNavListContainer>
-        </SideNavScrollableContainer>
-        {(footerItems || footerComponent) && (
-          <SideNavFooter
+          <SideNavHeaderContainer
             odysseyDesignTokens={odysseyDesignTokens}
-            isContentScrollable={isContentScrollable}
+            hasContentScrolled={hasContentScrolled}
           >
-            {footerComponent}
-            {footerItems && !footerComponent && (
-              <SideNavFooterItemsContainer
-                odysseyDesignTokens={odysseyDesignTokens}
-              >
-                <SideNavFooterContent footerItems={footerItems} />
-              </SideNavFooterItemsContainer>
-            )}
-          </SideNavFooter>
-        )}
-      </SideNavExpandContainer>
-    </SideNavContainer>
+            <SideNavHeader
+              appName={appName}
+              isLoading={isLoading}
+              logoProps={logoProps}
+            />
+          </SideNavHeaderContainer>
+          <SideNavScrollableContainer
+            odysseyDesignTokens={odysseyDesignTokens}
+            data-se="scrollable-region"
+          >
+            <SideNavListContainer role="list" ref={scrollableContentRef}>
+              {isLoading
+                ? [...Array(6)].map((_, index) => <LoadingItem key={index} />)
+                : processedSideNavItems?.map((item) => {
+                    const {
+                      id,
+                      label,
+                      isSectionHeader,
+                      startIcon,
+                      children,
+                      isDefaultExpanded,
+                      isDisabled,
+                      isExpanded,
+                    } = item;
+
+                    if (isSectionHeader) {
+                      return (
+                        <SectionHeaderContainer
+                          id={id}
+                          key={id}
+                          odysseyDesignTokens={odysseyDesignTokens}
+                        >
+                          <SectionHeader
+                            odysseyDesignTokens={odysseyDesignTokens}
+                          >
+                            {label}
+                          </SectionHeader>
+                        </SectionHeaderContainer>
+                      );
+                    } else if (children) {
+                      return (
+                        <StyledSideNavListItem
+                          id={id}
+                          key={id}
+                          odysseyDesignTokens={odysseyDesignTokens}
+                          disabled={isDisabled}
+                          aria-disabled={isDisabled}
+                        >
+                          <NavAccordion
+                            label={label}
+                            isCompact={isCompact}
+                            isDefaultExpanded={isDefaultExpanded}
+                            isExpanded={isExpanded}
+                            startIcon={startIcon}
+                            isDisabled={isDisabled}
+                          >
+                            <SideNavListContainer id={`${id}-list`} role="list">
+                              {children}
+                            </SideNavListContainer>
+                          </NavAccordion>
+                        </StyledSideNavListItem>
+                      );
+                    } else {
+                      return (
+                        <SideNavItemContentContext.Provider
+                          key={item.id}
+                          value={sideNavItemContentProviderValue}
+                        >
+                          <SideNavItemContent
+                            {...item}
+                            key={item.id}
+                            scrollRef={getRefIfThisIsFirstNodeWithIsSelected(
+                              item.id,
+                            )}
+                          />
+                        </SideNavItemContentContext.Provider>
+                      );
+                    }
+                  })}
+            </SideNavListContainer>
+          </SideNavScrollableContainer>
+          {!isLoading && (footerItems || hasCustomFooter) && (
+            <SideNavFooter
+              odysseyDesignTokens={odysseyDesignTokens}
+              isContentScrollable={isContentScrollable}
+            >
+              {hasCustomFooter
+                ? footerComponent
+                : footerItems && (
+                    <SideNavFooterItemsContainer
+                      odysseyDesignTokens={odysseyDesignTokens}
+                    >
+                      <SideNavFooterContent footerItems={footerItems} />
+                    </SideNavFooterItemsContainer>
+                  )}
+            </SideNavFooter>
+          )}
+        </StyledCollapsibleContent>
+      </OdysseyThemeProvider>
+    </StyledSideNav>
   );
 };