@okta/odyssey-react-mui 1.32.0 → 1.33.0

package/src/ui-shell/SideNav/SideNavFooterContent.tsx

@@ -1,85 +0,0 @@
-/*!
- * 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 { memo, useMemo } from "react";
-import styled from "@emotion/styled";
-
-import {
-  useOdysseyDesignTokens,
-  DesignTokens,
-} from "../../OdysseyDesignTokensContext.js";
-import type { SideNavFooterItem } from "./types.js";
-import { Box } from "../../Box.js";
-import { Link } from "../../Link.js";
-import { useTranslation } from "react-i18next";
-import { useUiShellContext } from "../../ui-shell/UiShellProvider.js";
-import { ContrastColors } from "../../createContrastColors.js";
-
-const StyledFooterNav = styled("nav")({
-  display: "flex",
-});
-
-const StyledFooterItemContainer = styled("div", {
-  shouldForwardProp: (prop) =>
-    prop !== "odysseyDesignTokens" && prop !== "borderColor",
-})(
-  ({
-    borderColor,
-    odysseyDesignTokens,
-  }: {
-    borderColor: ContrastColors["fontColor"];
-    odysseyDesignTokens: DesignTokens;
-  }) => ({
-    "& + &": {
-      marginInlineStart: odysseyDesignTokens.Spacing4,
-      paddingInlineStart: odysseyDesignTokens.Spacing4,
-      borderInlineStart: `1px solid ${borderColor || odysseyDesignTokens.HueNeutral300}`,
-    },
-  }),
-);
-
-const SideNavFooterContent = ({
-  footerItems,
-}: {
-  footerItems: SideNavFooterItem[];
-}) => {
-  const odysseyDesignTokens = useOdysseyDesignTokens();
-  const { t } = useTranslation();
-  const shellColors = useUiShellContext();
-
-  const memoizedFooterContent = useMemo(() => {
-    return footerItems?.map((item) => (
-      <StyledFooterItemContainer
-        borderColor={shellColors?.sideNavContrastColors?.fontColor}
-        key={item.id}
-        odysseyDesignTokens={odysseyDesignTokens}
-        role="menuitem"
-      >
-        {item.href ? (
-          <Link href={item.href}>{item.label}</Link>
-        ) : (
-          <Box component="span">{item.label}</Box>
-        )}
-      </StyledFooterItemContainer>
-    ));
-  }, [footerItems, odysseyDesignTokens, shellColors]);
-
-  return (
-    <StyledFooterNav role="menubar" aria-label={t("navigation.footer")}>
-      {memoizedFooterContent}
-    </StyledFooterNav>
-  );
-};
-const MemoizedSideNavFooterContent = memo(SideNavFooterContent);
-MemoizedSideNavFooterContent.displayName = "SideNavFooterContent";
-
-export { MemoizedSideNavFooterContent as SideNavFooterContent };

package/src/ui-shell/SideNav/SideNavHeader.tsx

@@ -1,134 +0,0 @@
-/*!
- * 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 styled from "@emotion/styled";
-import { memo } from "react";
-import { Skeleton } from "@mui/material";
-
-import {
-  type DesignTokens,
-  useOdysseyDesignTokens,
-} from "../../OdysseyDesignTokensContext.js";
-import { SideNavLogo } from "./SideNavLogo.js";
-import { SideNavLogoProps, SideNavProps } from "./types.js";
-import { Heading5 } from "../../Typography.js";
-import { TOP_NAV_HEIGHT } from "../TopNav/index.js";
-import { ContrastColors } from "../../createContrastColors.js";
-import { useUiShellContext } from "../../ui-shell/UiShellProvider.js";
-
-const SideNavHeaderContainer = styled("div")({
-  position: "relative",
-  display: "flex",
-  flexDirection: "column",
-  zIndex: 1,
-});
-
-const SideNavLogoContainer = styled("div", {
-  shouldForwardProp: (prop) =>
-    prop !== "odysseyDesignTokens" && prop !== "isSameBackgroundAsMain",
-})<{
-  isSameBackgroundAsMain: SideNavLogoProps["isSameBackgroundAsMain"];
-  odysseyDesignTokens: DesignTokens;
-}>(({ isSameBackgroundAsMain, odysseyDesignTokens }) => ({
-  display: "flex",
-  alignItems: "center",
-  height: TOP_NAV_HEIGHT,
-  paddingBlock: odysseyDesignTokens.Spacing4,
-  paddingInline: odysseyDesignTokens.Spacing5,
-  backgroundColor: isSameBackgroundAsMain
-    ? "transparent"
-    : odysseyDesignTokens.HueNeutralWhite,
-
-  "svg, img": {
-    maxHeight: "100%",
-    width: "auto",
-    maxWidth: "100%",
-  },
-}));
-
-const SideNavHeadingContainer = styled("div", {
-  shouldForwardProp: (prop) =>
-    prop !== "odysseyDesignTokens" && prop !== "contrastFontColor",
-})(
-  ({
-    contrastFontColor,
-    odysseyDesignTokens,
-  }: {
-    contrastFontColor: ContrastColors["fontColor"];
-    odysseyDesignTokens: DesignTokens;
-  }) => ({
-    display: "flex",
-    justifyContent: "space-between",
-    alignItems: "center",
-    paddingBlock: odysseyDesignTokens.Spacing4,
-    paddingInline: odysseyDesignTokens.Spacing5,
-    width: "100%",
-
-    ["& .MuiTypography-root"]: {
-      margin: 0,
-      width: "100%",
-      color: contrastFontColor || "inherit",
-    },
-  }),
-);
-
-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 = ({
-  appName,
-  isLoading,
-  logoProps,
-}: SideNavHeaderProps) => {
-  const odysseyDesignTokens = useOdysseyDesignTokens();
-  const uiShellContext = useUiShellContext();
-
-  return (
-    <SideNavHeaderContainer>
-      <SideNavLogoContainer
-        isSameBackgroundAsMain={logoProps?.isSameBackgroundAsMain}
-        odysseyDesignTokens={odysseyDesignTokens}
-      >
-        {isLoading ? (
-          //  The skeleton takes the hardcoded dimensions of the Okta logo
-          <Skeleton variant="rounded" height={24} width={67} />
-        ) : (
-          <SideNavLogo {...logoProps} />
-        )}
-      </SideNavLogoContainer>
-
-      {appName && (
-        <SideNavHeadingContainer
-          contrastFontColor={uiShellContext?.sideNavContrastColors?.fontColor}
-          odysseyDesignTokens={odysseyDesignTokens}
-        >
-          <Heading5 component="h2">
-            {isLoading ? <Skeleton /> : appName}
-          </Heading5>
-        </SideNavHeadingContainer>
-      )}
-    </SideNavHeaderContainer>
-  );
-};
-
-const MemoizedSideNavHeader = memo(SideNavHeader);
-MemoizedSideNavHeader.displayName = "SideNavHeader";
-
-export { MemoizedSideNavHeader as SideNavHeader };

package/src/ui-shell/SideNav/SideNavItemContent.tsx

@@ -1,402 +0,0 @@
-/*!
- * 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 styled from "@emotion/styled";
-import {
-  KeyboardEventHandler,
-  memo,
-  MouseEventHandler,
-  useCallback,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-} from "react";
-import { Link as NavItemLink } from "@mui/material";
-import {
-  type DesignTokens,
-  useOdysseyDesignTokens,
-} from "../../OdysseyDesignTokensContext.js";
-import { SideNavItemLinkContent } from "./SideNavItemLinkContent.js";
-import type { SideNavItem } from "./types.js";
-import {
-  SideNavItemContentContextValue,
-  useSideNavItemContent,
-} from "./SideNavItemContentContext.js";
-import { ExternalLinkIcon } from "../../icons.generated/index.js";
-import {
-  UiShellColors,
-  useUiShellContext,
-} from "../../ui-shell/UiShellProvider.js";
-
-export const StyledSideNavListItem = styled("li", {
-  shouldForwardProp: (prop) =>
-    prop !== "isSelected" &&
-    prop !== "odysseyDesignTokens" &&
-    prop !== "sideNavContrastColors",
-})<{
-  sideNavContrastColors?: UiShellColors["sideNavContrastColors"];
-  odysseyDesignTokens: DesignTokens;
-  isSelected?: boolean;
-  itemSelectedBackgroundColor?: string;
-  disabled?: boolean;
-}>(({ isSelected, odysseyDesignTokens, sideNavContrastColors }) => ({
-  display: "flex",
-  alignItems: "center",
-  backgroundColor: "unset",
-  borderRadius: odysseyDesignTokens.BorderRadiusMain,
-  transition: `backgroundColor ${odysseyDesignTokens.TransitionDurationMain}, color ${odysseyDesignTokens.TransitionDurationMain}`,
-
-  ...(isSelected && {
-    color: sideNavContrastColors?.fontColor
-      ? `${sideNavContrastColors.fontColor}`
-      : `${odysseyDesignTokens.TypographyColorAction}`,
-    backgroundColor:
-      sideNavContrastColors?.itemSelectedBackgroundColor ||
-      odysseyDesignTokens.HueBlue50,
-  }),
-}));
-
-const scrollToNode = (node: HTMLElement | null) => {
-  if (node) {
-    node?.scrollIntoView({
-      behavior: "instant",
-      block: "center",
-      inline: "nearest",
-    });
-  }
-};
-
-type ScrollIntoViewHandle = {
-  scrollIntoView: () => void;
-};
-
-export const getBaseNavItemContentStyles = ({
-  isDisabled,
-  isSelected,
-  odysseyDesignTokens,
-  sideNavContrastColors,
-}: {
-  isSelected?: boolean;
-  isDisabled?: boolean;
-  odysseyDesignTokens: DesignTokens;
-  sideNavContrastColors: UiShellColors["sideNavContrastColors"];
-}) => ({
-  display: "flex",
-  alignItems: "center",
-  width: "100%",
-  textDecoration: "none",
-  // !important needed here to override more specific base link styling
-  color: sideNavContrastColors?.fontColor
-    ? `${sideNavContrastColors?.fontColor} !important`
-    : `${odysseyDesignTokens.TypographyColorHeading} !important`,
-  minHeight: "unset",
-  paddingBlock: odysseyDesignTokens.Spacing3,
-  paddingInlineEnd: odysseyDesignTokens.Spacing4,
-  borderRadius: odysseyDesignTokens.BorderRadiusMain,
-  transition: `backgroundColor ${odysseyDesignTokens.TransitionDurationMain}, color ${odysseyDesignTokens.TransitionDurationMain}`,
-  cursor: "pointer",
-
-  // When hover or focus of the drag handle, apply general hover styles
-  "&:hover, li:has(> button:hover, > button:focus, > button:focus-visible) &": {
-    textDecoration: "none",
-    backgroundColor:
-      sideNavContrastColors?.itemHoverBackgroundColor ||
-      odysseyDesignTokens.HueNeutral50,
-
-    ...(isSelected && {
-      backgroundColor:
-        sideNavContrastColors?.itemSelectedBackgroundColor ||
-        odysseyDesignTokens.HueBlue50,
-      color:
-        sideNavContrastColors?.fontColor ||
-        odysseyDesignTokens.TypographyColorAction,
-    }),
-
-    ...(isDisabled && {
-      backgroundColor: "unset",
-    }),
-  },
-
-  ...(isSelected && {
-    color: sideNavContrastColors?.fontColor
-      ? `${sideNavContrastColors?.fontColor} !important`
-      : `${odysseyDesignTokens.TypographyColorAction} !important`,
-    fontWeight: odysseyDesignTokens.TypographyWeightBodyBold,
-  }),
-
-  ...(isDisabled && {
-    cursor: "default",
-    color: `${odysseyDesignTokens.TypographyColorDisabled} !important`,
-
-    ...(sideNavContrastColors?.itemDisabledFontColor && {
-      color: `${sideNavContrastColors?.itemDisabledFontColor} !important`,
-    }),
-  }),
-
-  "&:focus-visible": {
-    outline: "none",
-    boxShadow: `inset 0 0 0 2px ${sideNavContrastColors?.focusRingColor || 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 !== "sideNavContrastColors" &&
-    prop !== "isSelected",
-})<{
-  contextValue: SideNavItemContentContextValue;
-  odysseyDesignTokens: DesignTokens;
-  sideNavContrastColors: UiShellColors["sideNavContrastColors"];
-  isSelected?: boolean;
-  isDisabled?: boolean;
-}>(
-  ({
-    isDisabled,
-    isSelected,
-    contextValue,
-    odysseyDesignTokens,
-    sideNavContrastColors,
-  }) => ({
-    ...getBaseNavItemContentStyles({
-      isDisabled,
-      isSelected,
-      odysseyDesignTokens,
-      sideNavContrastColors,
-    }),
-
-    ...getNavItemContentStyles({
-      odysseyDesignTokens,
-      contextValue,
-    }),
-  }),
-);
-
-const StyledNavItemLink = styled(NavItemLink, {
-  shouldForwardProp: (prop) =>
-    prop != "contextValue" &&
-    prop !== "isDisabled" &&
-    prop !== "isSelected" &&
-    prop !== "odysseyDesignTokens" &&
-    prop !== "sideNavContrastColors",
-})<{
-  contextValue: SideNavItemContentContextValue;
-  odysseyDesignTokens: DesignTokens;
-  sideNavContrastColors: UiShellColors["sideNavContrastColors"];
-  isSelected?: boolean;
-  isDisabled?: boolean;
-}>(
-  ({
-    isDisabled,
-    isSelected,
-    contextValue,
-    odysseyDesignTokens,
-    sideNavContrastColors,
-  }) => ({
-    ...getBaseNavItemContentStyles({
-      isDisabled,
-      isSelected,
-      odysseyDesignTokens,
-      sideNavContrastColors,
-    }),
-
-    ...getNavItemContentStyles({
-      odysseyDesignTokens,
-      contextValue,
-    }),
-  }),
-);
-
-const SideNavItemContent = ({
-  count,
-  id,
-  label,
-  href,
-  target,
-  startIcon,
-  severity,
-  statusLabel,
-  endIcon,
-  onClick,
-  isDisabled,
-  isSelected,
-  scrollRef,
-  onItemSelected,
-}: Pick<
-  SideNavItem,
-  | "count"
-  | "id"
-  | "label"
-  | "href"
-  | "target"
-  | "startIcon"
-  | "severity"
-  | "statusLabel"
-  | "endIcon"
-  | "onClick"
-  | "isDisabled"
-  | "isSelected"
-> & {
-  /**
-   * The ref used to scroll to this item
-   */
-  scrollRef?: React.RefObject<ScrollIntoViewHandle>;
-  onItemSelected?: (selectedItemId: string) => void;
-}) => {
-  const uiShellContext = useUiShellContext();
-  const sidenavItemContentContext = useSideNavItemContent();
-  const contextValue = useMemo(
-    () => sidenavItemContentContext,
-    [sidenavItemContentContext],
-  );
-
-  const odysseyDesignTokens = useOdysseyDesignTokens();
-
-  const localScrollRef = useRef<HTMLLIElement>(null);
-  useImperativeHandle(scrollRef, () => {
-    return {
-      scrollIntoView: () => {
-        scrollToNode(localScrollRef.current);
-      },
-    };
-  }, []);
-
-  const itemClickHandler = useCallback<
-    MouseEventHandler<HTMLDivElement | HTMLAnchorElement>
-  >(
-    (event) => {
-      onItemSelected?.(id);
-      onClick?.(event);
-    },
-    [id, onClick, onItemSelected],
-  );
-
-  const sideNavItemContentKeyHandler = useCallback<
-    KeyboardEventHandler<HTMLDivElement>
-  >(
-    (event) => {
-      if (event?.key === "Enter") {
-        event.preventDefault();
-        onItemSelected?.(id);
-        onClick?.(event);
-      }
-    },
-    [id, onClick, onItemSelected],
-  );
-
-  return (
-    <StyledSideNavListItem
-      aria-disabled={isDisabled}
-      aria-current={isSelected ? "page" : undefined}
-      disabled={isDisabled}
-      id={id}
-      isSelected={isSelected}
-      key={id}
-      odysseyDesignTokens={odysseyDesignTokens}
-      ref={localScrollRef}
-      sideNavContrastColors={uiShellContext?.sideNavContrastColors}
-    >
-      {
-        // Use Link for nav items with links and div for disabled or non-link items
-        isDisabled ? (
-          <NavItemContentContainer
-            contextValue={contextValue}
-            isDisabled={isDisabled}
-            isSelected={isSelected}
-            odysseyDesignTokens={odysseyDesignTokens}
-            sideNavContrastColors={uiShellContext?.sideNavContrastColors}
-          >
-            <SideNavItemLinkContent
-              count={count}
-              label={label}
-              startIcon={startIcon}
-              endIcon={endIcon}
-              statusLabel={statusLabel}
-              severity={severity}
-            />
-          </NavItemContentContainer>
-        ) : !href ? (
-          <NavItemContentContainer
-            contextValue={contextValue}
-            isDisabled={isDisabled}
-            isSelected={isSelected}
-            onClick={itemClickHandler}
-            onKeyDown={sideNavItemContentKeyHandler}
-            odysseyDesignTokens={odysseyDesignTokens}
-            role="button"
-            sideNavContrastColors={uiShellContext?.sideNavContrastColors}
-            tabIndex={0}
-          >
-            <SideNavItemLinkContent
-              count={count}
-              label={label}
-              startIcon={startIcon}
-              endIcon={endIcon}
-              statusLabel={statusLabel}
-              severity={severity}
-            />
-          </NavItemContentContainer>
-        ) : (
-          <StyledNavItemLink
-            contextValue={contextValue}
-            href={href}
-            isDisabled={isDisabled}
-            isSelected={isSelected}
-            odysseyDesignTokens={odysseyDesignTokens}
-            onClick={itemClickHandler}
-            sideNavContrastColors={uiShellContext?.sideNavContrastColors}
-            target={target}
-          >
-            <SideNavItemLinkContent
-              count={count}
-              label={label}
-              startIcon={startIcon}
-              endIcon={endIcon}
-              statusLabel={statusLabel}
-              severity={severity}
-            />
-            {target === "_blank" && (
-              <span className="Link-indicator" role="presentation">
-                <ExternalLinkIcon />
-              </span>
-            )}
-          </StyledNavItemLink>
-        )
-      }
-    </StyledSideNavListItem>
-  );
-};
-
-const MemoizedSideNavItemContent = memo(SideNavItemContent);
-MemoizedSideNavItemContent.displayName = "SideNavItemContent";
-
-export { MemoizedSideNavItemContent as SideNavItemContent };

package/src/ui-shell/SideNav/SideNavItemContentContext.tsx

@@ -1,29 +0,0 @@
-/*!
- * 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);