@okta/odyssey-react-mui 1.25.0 → 1.27.0

package/src/labs/SideNav/SideNavFooterContent.tsx

@@ -11,10 +11,30 @@
  */
 
 import { memo, useMemo } from "react";
-import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext";
+import styled from "@emotion/styled";
+
+import {
+  useOdysseyDesignTokens,
+  DesignTokens,
+} from "../../OdysseyDesignTokensContext";
 import type { SideNavFooterItem } from "./types";
 import { Box } from "../../Box";
 import { Link } from "../../Link";
+import { useTranslation } from "react-i18next";
+
+const StyledFooterNav = styled("nav")({
+  display: "flex",
+});
+
+const StyledFooterItemContainer = styled("div", {
+  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({
+  "& + &": {
+    marginInlineStart: odysseyDesignTokens.Spacing4,
+    paddingInlineStart: odysseyDesignTokens.Spacing4,
+    borderInlineStart: `1px solid ${odysseyDesignTokens.HueNeutral300}`,
+  },
+}));
 
 const SideNavFooterContent = ({
   footerItems,
@@ -22,41 +42,29 @@ const SideNavFooterContent = ({
   footerItems: SideNavFooterItem[];
 }) => {
   const odysseyDesignTokens = useOdysseyDesignTokens();
+  const { t } = useTranslation();
 
-  const footerContent = useMemo(() => {
-    return footerItems?.map((item, index) => (
-      <Box
-        key={`${item.id}-wrapper`}
-        sx={{
-          display: "flex",
-        }}
+  const memoizedFooterContent = useMemo(() => {
+    return footerItems?.map((item) => (
+      <StyledFooterItemContainer
+        key={item.id}
+        odysseyDesignTokens={odysseyDesignTokens}
+        role="menuitem"
       >
         {item.href ? (
-          <Link key={item.id} href={item.href}>
-            {item.label}
-          </Link>
+          <Link href={item.href}>{item.label}</Link>
         ) : (
-          <Box component="span" key={item.id}>
-            {item.label}
-          </Box>
-        )}
-        {index < footerItems.length - 1 && (
-          <Box
-            key={`${item.id}-separator`}
-            sx={{
-              marginLeft: odysseyDesignTokens.Spacing4,
-              marginRight: odysseyDesignTokens.Spacing4,
-              color: odysseyDesignTokens.HueNeutral300,
-            }}
-          >
-            |
-          </Box>
+          <Box component="span">{item.label}</Box>
         )}
-      </Box>
+      </StyledFooterItemContainer>
     ));
   }, [footerItems, odysseyDesignTokens]);
 
-  return footerContent;
+  return (
+    <StyledFooterNav role="menubar" aria-label={t("navigation.footer")}>
+      {memoizedFooterContent}
+    </StyledFooterNav>
+  );
 };
 const MemoizedSideNavFooterContent = memo(SideNavFooterContent);
 MemoizedSideNavFooterContent.displayName = "SideNavFooterContent";

package/src/labs/SideNav/SideNavHeader.tsx

@@ -11,77 +11,94 @@
  */
 
 import styled from "@emotion/styled";
-import { memo, ReactNode, useMemo } from "react";
+import { memo } from "react";
+import { Skeleton } from "@mui/material";
+
 import {
   type DesignTokens,
   useOdysseyDesignTokens,
 } from "../../OdysseyDesignTokensContext";
-import { Box } from "../../Box";
+import { SideNavLogo } from "./SideNavLogo";
+import { SideNavProps } from "./types";
 import { Heading6 } from "../../Typography";
-import { CollapseIcon } from "./CollapseIcon";
-import type { SideNavProps } from "./types";
-import { TOP_NAV_HEIGHT_TOKEN } from "../TopNav";
+import { TOP_NAV_HEIGHT } from "../TopNav";
+
+const SideNavHeaderContainer = styled("div", {
+  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({
+  position: "relative",
+  display: "flex",
+  flexDirection: "column",
+  backgroundColor: odysseyDesignTokens.HueNeutralWhite,
+  zIndex: 1,
+}));
 
 const SideNavLogoContainer = styled("div", {
   shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
 })(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({
-  height: odysseyDesignTokens[TOP_NAV_HEIGHT_TOKEN],
-  padding: odysseyDesignTokens.Spacing3,
-  borderColor: odysseyDesignTokens.HueNeutral50,
-  borderStyle: odysseyDesignTokens.BorderStyleMain,
-  borderWidth: 0,
-  borderBottomWidth: odysseyDesignTokens.BorderWidthMain,
+  display: "flex",
+  alignItems: "center",
+  height: TOP_NAV_HEIGHT,
+  padding: odysseyDesignTokens.Spacing4,
+
+  "svg, img": {
+    maxHeight: "100%",
+    width: "auto",
+    maxWidth: "100%",
+  },
 }));
 
-const SideNavHeaderContainer = styled("div", {
+const SideNavHeadingContainer = styled("div", {
   shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
 })(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({
   display: "flex",
   justifyContent: "space-between",
   alignItems: "center",
-  paddingLeft: odysseyDesignTokens.Spacing4,
-  paddingRight: odysseyDesignTokens.Spacing4,
-  paddingTop: odysseyDesignTokens.Spacing3,
-  paddingBottom: odysseyDesignTokens.Spacing3,
+  padding: odysseyDesignTokens.Spacing4,
+  width: "100%",
+
+  ["& .MuiTypography-root"]: {
+    margin: 0,
+    width: "100%",
+  },
 }));
 
+export type SideNavHeaderProps = {
+  /**
+   * The app's name.
+   */
+  appName: string;
+  /**
+   * If the side nav currently has no items, it will be loading.
+   */
+  isLoading?: boolean;
+} & Pick<SideNavProps, "logoProps">;
+
 const SideNavHeader = ({
-  navHeaderText,
-  isCollapsible,
-  onCollapse,
-  logo,
-}: Pick<
-  SideNavProps,
-  "navHeaderText" | "isCollapsible" | "onCollapse" | "logo"
->): ReactNode => {
+  appName,
+  isLoading,
+  logoProps,
+}: SideNavHeaderProps) => {
   const odysseyDesignTokens = useOdysseyDesignTokens();
 
-  const sideNavHeaderStyles = useMemo(
-    () => ({
-      marginTop: odysseyDesignTokens.Spacing2,
-    }),
-    [odysseyDesignTokens],
-  );
-
   return (
-    <Box
-      sx={{
-        display: "flex",
-        flexDirection: "column",
-      }}
-    >
+    <SideNavHeaderContainer odysseyDesignTokens={odysseyDesignTokens}>
       <SideNavLogoContainer odysseyDesignTokens={odysseyDesignTokens}>
-        {logo}
+        {isLoading ? (
+          //  The skeleton takes the hardcoded dimensions of the Okta logo
+          <Skeleton variant="rounded" height={24} width={67} />
+        ) : (
+          <SideNavLogo {...logoProps} />
+        )}
       </SideNavLogoContainer>
-      <SideNavHeaderContainer odysseyDesignTokens={odysseyDesignTokens}>
-        <Box sx={sideNavHeaderStyles}>
-          <Heading6>{navHeaderText}</Heading6>
-        </Box>
-        {isCollapsible && <CollapseIcon onClick={onCollapse} />}
-      </SideNavHeaderContainer>
-    </Box>
+
+      <SideNavHeadingContainer odysseyDesignTokens={odysseyDesignTokens}>
+        <Heading6 component="h2">{isLoading ? <Skeleton /> : appName}</Heading6>
+      </SideNavHeadingContainer>
+    </SideNavHeaderContainer>
   );
 };
+
 const MemoizedSideNavHeader = memo(SideNavHeader);
 MemoizedSideNavHeader.displayName = "SideNavHeader";
 

package/src/labs/SideNav/SideNavItemContent.tsx

@@ -17,55 +17,39 @@ import {
   useCallback,
   memo,
   KeyboardEvent,
+  useMemo,
 } from "react";
-import { Link } from "../../Link";
+import { Link as NavItemLink } from "@mui/material";
 import {
   type DesignTokens,
   useOdysseyDesignTokens,
 } from "../../OdysseyDesignTokensContext";
 import { SideNavItemLinkContent } from "./SideNavItemLinkContent";
 import type { SideNavItem } from "./types";
+import {
+  SideNavItemContentContextValue,
+  useSideNavItemContent,
+} from "./SideNavItemContentContext";
+import { ExternalLinkIcon } from "../../icons.generated";
 
-export const SideNavListItemContainer = styled("li", {
+export const StyledSideNavListItem = styled("li", {
   shouldForwardProp: (prop) =>
-    prop !== "odysseyDesignTokens" &&
-    prop !== "isSelected" &&
-    prop !== "isDisabled",
+    prop !== "odysseyDesignTokens" && prop !== "isSelected",
 })<{
   odysseyDesignTokens: DesignTokens;
   isSelected?: boolean;
   disabled?: boolean;
-  isDisabled?: boolean;
-}>(({ odysseyDesignTokens, isSelected, isDisabled }) => ({
+}>(({ odysseyDesignTokens, isSelected }) => ({
   display: "flex",
   alignItems: "center",
-  cursor: isDisabled ? "default" : "pointer",
-  pointerEvents: isDisabled ? "none" : "auto",
-  backgroundColor: isSelected ? odysseyDesignTokens.HueNeutral50 : "unset",
-  margin: `${odysseyDesignTokens.Spacing1} 0`,
-  "&:last-child": {
-    marginBottom: odysseyDesignTokens.Spacing2,
-  },
-  "& a": {
-    display: "flex",
-    alignItems: "center",
-    width: "100%",
-    minHeight: "48px",
-    padding: `${odysseyDesignTokens.Spacing3} ${odysseyDesignTokens.Spacing4}`,
-    color: `${odysseyDesignTokens.TypographyColorHeading} !important`,
-    pointerEvents: isDisabled ? "none" : "auto",
-  },
-  "& a:hover": {
-    textDecoration: "none",
-    cursor: isDisabled ? "default" : "pointer",
-    backgroundColor: !isDisabled ? odysseyDesignTokens.HueNeutral50 : "inherit",
-  },
-  "& a:focus-visible": {
-    outlineOffset: 0,
-    borderRadius: 0,
-    outlineWidth: odysseyDesignTokens.FocusOutlineWidthMain,
-    backgroundColor: !isDisabled ? odysseyDesignTokens.HueNeutral50 : "inherit",
-  },
+  backgroundColor: "unset",
+  borderRadius: odysseyDesignTokens.BorderRadiusMain,
+  transition: `backgroundColor ${odysseyDesignTokens.TransitionDurationMain}, color ${odysseyDesignTokens.TransitionDurationMain}`,
+
+  ...(isSelected && {
+    color: `${odysseyDesignTokens.TypographyColorAction} !important`,
+    backgroundColor: odysseyDesignTokens.HueBlue50,
+  }),
 }));
 
 const scrollToNode = (node: HTMLElement | null) => {
@@ -82,7 +66,127 @@ type ScrollIntoViewHandle = {
   scrollIntoView: () => void;
 };
 
+export const getBaseNavItemContentStyles = ({
+  odysseyDesignTokens,
+  isDisabled,
+  isSelected,
+}: {
+  odysseyDesignTokens: DesignTokens;
+  isDisabled?: boolean;
+  isSelected?: boolean;
+}) => ({
+  display: "flex",
+  alignItems: "center",
+  width: "100%",
+  textDecoration: "none",
+  color: `${odysseyDesignTokens.TypographyColorHeading} !important`,
+  minHeight: "unset",
+  paddingBlock: odysseyDesignTokens.Spacing3,
+  paddingInlineEnd: odysseyDesignTokens.Spacing4,
+  borderRadius: odysseyDesignTokens.BorderRadiusMain,
+  transition: `backgroundColor ${odysseyDesignTokens.TransitionDurationMain}, color ${odysseyDesignTokens.TransitionDurationMain}`,
+  cursor: "pointer",
+
+  // `[data-sortable-container='true']:has(button:hover) &` - when the sortable item's drag handle is hovered we want to trigger the same hover behavior as if you were hovering the actual item
+  "&:hover, [data-sortable-container='true']:has(button:hover, button:focus, button:focus-visible) &":
+    {
+      textDecoration: "none",
+      backgroundColor: odysseyDesignTokens.HueNeutral50,
+
+      ...(isSelected && {
+        backgroundColor: odysseyDesignTokens.HueBlue50,
+        color: odysseyDesignTokens.TypographyColorAction,
+      }),
+
+      ...(isDisabled && {
+        backgroundColor: "unset",
+      }),
+    },
+
+  ...(isSelected && {
+    color: `${odysseyDesignTokens.TypographyColorAction}`,
+    fontWeight: odysseyDesignTokens.TypographyWeightBodyBold,
+  }),
+
+  ...(isDisabled && {
+    cursor: "default",
+    color: `${odysseyDesignTokens.TypographyColorDisabled} !important`,
+  }),
+
+  "&:focus-visible, &:focus": {
+    outline: "none",
+    boxShadow: `inset 0 0 0 2px ${odysseyDesignTokens.PalettePrimaryMain}`,
+  },
+});
+
+export const getNavItemContentStyles = ({
+  odysseyDesignTokens,
+  contextValue,
+}: {
+  odysseyDesignTokens: DesignTokens;
+  contextValue: SideNavItemContentContextValue;
+}) => ({
+  paddingInlineStart: `calc(${odysseyDesignTokens.Spacing4} * ${contextValue.depth} + ${odysseyDesignTokens.Spacing6})`,
+
+  ...(contextValue.depth === 1 && {
+    paddingInlineStart: odysseyDesignTokens.Spacing4,
+  }),
+
+  ...(contextValue.isCompact && {
+    paddingBlock: odysseyDesignTokens.Spacing1,
+  }),
+});
+
+const NavItemContentContainer = styled("div", {
+  shouldForwardProp: (prop) =>
+    prop !== "odysseyDesignTokens" &&
+    prop != "contextValue" &&
+    prop !== "isDisabled" &&
+    prop !== "isSelected",
+})<{
+  contextValue: SideNavItemContentContextValue;
+  odysseyDesignTokens: DesignTokens;
+  isSelected?: boolean;
+  isDisabled?: boolean;
+}>(({ contextValue, odysseyDesignTokens, isDisabled, isSelected }) => ({
+  ...getBaseNavItemContentStyles({
+    odysseyDesignTokens,
+    isDisabled,
+    isSelected,
+  }),
+
+  ...getNavItemContentStyles({
+    odysseyDesignTokens,
+    contextValue,
+  }),
+}));
+
+const StyledNavItemLink = styled(NavItemLink, {
+  shouldForwardProp: (prop) =>
+    prop !== "odysseyDesignTokens" &&
+    prop != "contextValue" &&
+    prop !== "isDisabled" &&
+    prop !== "isSelected",
+})<{
+  contextValue: SideNavItemContentContextValue;
+  odysseyDesignTokens: DesignTokens;
+  isSelected?: boolean;
+  isDisabled?: boolean;
+}>(({ contextValue, odysseyDesignTokens, isDisabled, isSelected }) => ({
+  ...getBaseNavItemContentStyles({
+    odysseyDesignTokens,
+    isDisabled,
+    isSelected,
+  }),
+
+  ...getNavItemContentStyles({
+    odysseyDesignTokens,
+    contextValue,
+  }),
+}));
+
 const SideNavItemContent = ({
+  count,
   id,
   label,
   href,
@@ -92,11 +196,13 @@ const SideNavItemContent = ({
   statusLabel,
   endIcon,
   onClick,
-  isSelected,
   isDisabled,
+  isSelected,
   scrollRef,
+  onItemSelected,
 }: Pick<
   SideNavItem,
+  | "count"
   | "id"
   | "label"
   | "href"
@@ -106,14 +212,22 @@ const SideNavItemContent = ({
   | "statusLabel"
   | "endIcon"
   | "onClick"
-  | "isSelected"
   | "isDisabled"
+  | "isSelected"
 > & {
   /**
    * The ref used to scroll to this item
    */
   scrollRef?: React.RefObject<ScrollIntoViewHandle>;
+  onItemSelected?(selectedItemId: string): void;
 }) => {
+  const sidenavItemContentContext = useSideNavItemContent();
+  const contextValue = useMemo(
+    () => sidenavItemContentContext,
+    [sidenavItemContentContext],
+  );
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+
   const localScrollRef = useRef<HTMLLIElement>(null);
   useImperativeHandle(
     scrollRef,
@@ -126,90 +240,109 @@ const SideNavItemContent = ({
     },
     [],
   );
-  const odysseyDesignTokens = useOdysseyDesignTokens();
 
-  const NavItemContentClickContainer = styled("div", {
-    shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
-  })(() => ({
-    display: "flex",
-    alignItems: "center",
-    width: "100%",
-    minHeight: "48px",
-    padding: `${odysseyDesignTokens.Spacing3} ${odysseyDesignTokens.Spacing4}`,
-    color: `${isDisabled ? odysseyDesignTokens.TypographyColorDisabled : odysseyDesignTokens.TypographyColorHeading} !important`,
-    "&:focus-visible": {
-      borderRadius: 0,
-      outlineColor: odysseyDesignTokens.FocusOutlineColorPrimary,
-      outlineStyle: odysseyDesignTokens.FocusOutlineStyle,
-      outlineWidth: odysseyDesignTokens.FocusOutlineWidthMain,
-      backgroundColor: odysseyDesignTokens.HueNeutral50,
-      textDecoration: "none",
+  const itemClickHandler = useCallback(
+    (id: string) => {
+      return () => {
+        onItemSelected?.(id);
+        onClick?.();
+      };
     },
-  }));
+    [onClick, onItemSelected],
+  );
 
   const sideNavItemContentKeyHandler = useCallback(
-    (event: KeyboardEvent<HTMLDivElement>) => {
+    (id: string, event: KeyboardEvent<HTMLDivElement>) => {
       if (event?.key === "Enter") {
         event.preventDefault();
+        onItemSelected?.(id);
         onClick?.();
       }
     },
-    [onClick],
+    [onClick, onItemSelected],
   );
 
   return (
-    <SideNavListItemContainer
+    <StyledSideNavListItem
       ref={localScrollRef}
       id={id}
       key={id}
+      isSelected={isSelected}
       disabled={isDisabled}
       aria-disabled={isDisabled}
-      isDisabled={isDisabled}
-      isSelected={isSelected}
+      aria-current={isSelected ? "page" : undefined}
       odysseyDesignTokens={odysseyDesignTokens}
     >
       {
         // Use Link for nav items with links and div for disabled or non-link items
         isDisabled ? (
-          <NavItemContentClickContainer>
+          <NavItemContentContainer
+            odysseyDesignTokens={odysseyDesignTokens}
+            contextValue={contextValue}
+            isDisabled={isDisabled}
+            isSelected={isSelected}
+          >
             <SideNavItemLinkContent
+              count={count}
               label={label}
               startIcon={startIcon}
               endIcon={endIcon}
               statusLabel={statusLabel}
               severity={severity}
             />
-          </NavItemContentClickContainer>
+          </NavItemContentContainer>
         ) : !href ? (
-          <NavItemContentClickContainer
-            role="button"
+          <NavItemContentContainer
+            odysseyDesignTokens={odysseyDesignTokens}
+            contextValue={contextValue}
+            isDisabled={isDisabled}
             tabIndex={0}
-            onClick={onClick}
-            onKeyDown={sideNavItemContentKeyHandler}
+            role="button"
+            onClick={itemClickHandler(id)}
+            onKeyDown={(event: KeyboardEvent<HTMLDivElement>) =>
+              sideNavItemContentKeyHandler(id, event)
+            }
+            isSelected={isSelected}
           >
             <SideNavItemLinkContent
+              count={count}
               label={label}
               startIcon={startIcon}
               endIcon={endIcon}
               statusLabel={statusLabel}
               severity={severity}
             />
-          </NavItemContentClickContainer>
+          </NavItemContentContainer>
         ) : (
-          <Link href={href} target={target} onClick={onClick}>
+          <StyledNavItemLink
+            odysseyDesignTokens={odysseyDesignTokens}
+            contextValue={contextValue}
+            isDisabled={isDisabled}
+            isSelected={isSelected}
+            href={href}
+            target={target}
+            onClick={itemClickHandler(id)}
+          >
             <SideNavItemLinkContent
+              count={count}
               label={label}
               startIcon={startIcon}
               endIcon={endIcon}
               statusLabel={statusLabel}
               severity={severity}
             />
-          </Link>
+            {target === "_blank" && (
+              <span className="Link-indicator" role="presentation">
+                <ExternalLinkIcon />
+              </span>
+            )}
+          </StyledNavItemLink>
         )
       }
-    </SideNavListItemContainer>
+    </StyledSideNavListItem>
   );
 };
+
 const MemoizedSideNavItemContent = memo(SideNavItemContent);
 MemoizedSideNavItemContent.displayName = "SideNavItemContent";
 

package/src/labs/SideNav/SideNavItemContentContext.tsx

@@ -0,0 +1,29 @@
+/*!
+ * Copyright (c) 2024-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.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { createContext, useContext } from "react";
+
+export type SideNavItemContentContextValue = {
+  isCompact?: boolean;
+  isSortable?: boolean;
+  depth: number;
+};
+
+export const SideNavItemContentContext =
+  createContext<SideNavItemContentContextValue>({
+    isCompact: false,
+    isSortable: false,
+    depth: 1,
+  });
+
+export const useSideNavItemContent = () =>
+  useContext(SideNavItemContentContext);