@okta/odyssey-react-mui 1.25.0 → 1.27.0

package/src/labs/SideNav/SortableList/SortableOverlay.tsx

@@ -0,0 +1,34 @@
+/*!
+ * 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 type { PropsWithChildren } from "react";
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { DragOverlay, defaultDropAnimationSideEffects } from "@dnd-kit/core";
+import type { DropAnimation } from "@dnd-kit/core";
+
+const dropAnimationConfig: DropAnimation = {
+  sideEffects: defaultDropAnimationSideEffects({
+    styles: {
+      active: {
+        opacity: "0.4",
+      },
+    },
+  }),
+};
+
+interface Props {}
+
+export function SortableOverlay({ children }: PropsWithChildren<Props>) {
+  return (
+    <DragOverlay dropAnimation={dropAnimationConfig}>{children}</DragOverlay>
+  );
+}

package/src/labs/SideNav/types.ts

@@ -14,15 +14,62 @@ import type { ReactElement } from "react";
 import type { HtmlProps } from "../../HtmlProps";
 import type { statusSeverityValues } from "../../Status";
 
+export type SideNavLogoProps = {
+  href?: string;
+} & (
+  | {
+      /**
+       * a component to render as the logo
+       */
+      logoComponent: ReactElement;
+      imageAltText?: never;
+      imageUrl?: never;
+    }
+  | {
+      /**
+       * The src url to render in an `img` tag
+       */
+      imageUrl: string;
+      /**
+       * alt text for the img logo
+       */
+      imageAltText: string;
+      logoComponent?: never;
+    }
+  | {
+      /**
+       * The src url to render in an `img` tag
+       */
+      imageUrl?: never;
+      /**
+       * alt text for the img logo
+       */
+      imageAltText?: never;
+      logoComponent?: never;
+    }
+);
+
 export type SideNavProps = {
   /**
    * Side Nav header text that is usually reserved to show the App name
    */
-  navHeaderText: string;
+  appName: string;
   /**
    *  Determines whether the side nav is collapsible
    */
   isCollapsible?: boolean;
+  /**
+   *  Determines whether the side nav items use compact layout
+   */
+  isCompact?: boolean;
+  /**
+   *  Before the side nav has items, it will be in a loading state.
+   */
+  isLoading?: boolean;
+  /**
+   * An optional logo component or src string for an img to display in the header. If not provided, will default to the Okta logo
+   */
+  logoProps?: SideNavLogoProps;
   /**
    *  Triggers when the side nav is collapsed
    */
@@ -32,58 +79,53 @@ export type SideNavProps = {
    */
   onExpand?(): void;
   /**
-   * Nav items in the side nav
-   */
-  sideNavItems: SideNavItem[];
-  /**
-   * A CSS length string indicating the customizable expanded width of the SideNav container.
-   * (it will be smaller if isCollapsible and collapsed)
+   *  Triggers when the item is reordered
    */
-  expandedWidth?: string;
+  onSort?(reorderedItems: SideNavItem[]): void;
   /**
-   * An optional logo to display in the header. If not provided, will default to the Okta logo
+   * Nav items in the side nav
    */
-  logo?: ReactElement;
+  sideNavItems: SideNavItem[];
 } & (
   | {
       /**
-       * Footer items in the side nav
-       */
-      footerItems?: SideNavFooterItem[];
-      /**
-       * footerComponent cannot be used if footerItems are defined
+       * The component to display as the footer; if present the `footerItems` are ignored and not rendered.
        */
-      footerComponent?: never;
+      footerComponent?: ReactElement;
+      footerItems?: never;
+      hasCustomFooter: true;
     }
   | {
+      footerComponent?: never;
       /**
-       * footerItems cannot be used if footerComponent is defined
-       */
-      footerItems?: never;
-      /**
-       * The component to display as the footer; if present the `footerItems` are ignored and not rendered.
+       * Footer items in the side nav
        */
-      footerComponent?: ReactElement;
+      footerItems?: SideNavFooterItem[];
+      hasCustomFooter?: false;
     }
 ) &
   Pick<HtmlProps, "testId">;
 
 export type SideNavItem = {
-  id: string;
-  label: string;
+  /**
+   * The number to display as a count alongside the nav item
+   */
+  count?: number;
   /**
    * The icon element to display at the end of the Nav Item
    */
   endIcon?: ReactElement;
+  id: string;
   /**
    * Whether the item is disabled. When set to true the nav item is set to Disabled color,
-   * the link/item is not clickable, and item with children is not expandable.
+   * the link/item is not clickable, and item with nestedNavItems is not expandable.
    */
   isDisabled?: boolean;
   /**
    * Whether the item is active/selected
    */
   isSelected?: boolean;
+  label: string;
   /**
    * Event fired when the nav item is clicked
    */
@@ -106,33 +148,37 @@ export type SideNavItem = {
   target?: string;
 } & (
   | {
+      nestedNavItems?: never;
+      href?: never;
+      isDefaultExpanded?: never;
+      isExpanded?: never;
       /**
        * Determines if the side nav item is a section header
        */
       isSectionHeader: true;
-      href?: never;
-      children?: never;
-      isDefaultExpanded?: never;
-      isExpanded?: never;
+      isSortable?: never;
     }
   | {
+      nestedNavItems?: never;
       /**
        * link added to the nav item. if it is undefined, static text will be displayed.
        * fires onClick event when it is passed
        */
-      href: string;
-      children?: never;
-      isSectionHeader?: never;
+      href?: string;
       isDefaultExpanded?: never;
       isExpanded?: never;
+      isSectionHeader?: never;
+      isSortable?: never;
     }
   | {
       /**
-       * An array of side nav items to be displayed as children within Accordion
+       * An array of side nav items to be displayed as nestedNavItems within Accordion
        */
-      children?: SideNavItem[];
+      nestedNavItems?: Array<Omit<SideNavItem, "startIcon" | "nestedNavItems">>;
+      endIcon?: never;
+      href?: never;
       /**
-       * Whether the accordion (nav item with children) is expanded by default
+       * Whether the accordion (nav item with nestedNavItems) is expanded by default
        */
       isDefaultExpanded?: boolean;
       /**
@@ -140,8 +186,11 @@ export type SideNavItem = {
        * Setting this prop enables control over the accordion.
        */
       isExpanded?: boolean;
+      /**
+       * If true, enables sorting for the accordion items
+       */
       isSectionHeader?: never;
-      href?: never;
+      isSortable?: boolean;
     }
 );
 

package/src/labs/TopNav/TopNav.tsx

@@ -0,0 +1,95 @@
+/*!
+ * 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.")
+ *
+ * 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, type ReactElement } from "react";
+
+import type { HtmlProps } from "../../HtmlProps";
+import {
+  DesignTokens,
+  useOdysseyDesignTokens,
+} from "../../OdysseyDesignTokensContext";
+
+export const TOP_NAV_HEIGHT = `${64 / 14}rem`;
+
+const StyledLeftSideContainer = styled("div")(() => ({
+  flexGrow: 1,
+}));
+
+const StyledRightSideContainer = styled("div")(() => ({
+  flexShrink: 0,
+}));
+
+const StyledTopNavContainer = styled("div", {
+  shouldForwardProp: (prop) =>
+    prop !== "odysseyDesignTokens" && prop !== "isScrolled",
+})<{
+  odysseyDesignTokens: DesignTokens;
+  isScrolled?: boolean;
+}>(({ odysseyDesignTokens, isScrolled }) => ({
+  alignItems: "center",
+  backgroundColor: odysseyDesignTokens.HueNeutral50,
+  boxShadow: isScrolled ? odysseyDesignTokens.DepthMedium : undefined,
+  clipPath: "inset(0 0 -100vh 0)",
+  display: "flex",
+  gap: odysseyDesignTokens.Spacing4,
+  height: "100%",
+  justifyContent: "space-between",
+  maxHeight: TOP_NAV_HEIGHT,
+  minHeight: TOP_NAV_HEIGHT,
+  paddingBlock: odysseyDesignTokens.Spacing2,
+  paddingInline: odysseyDesignTokens.Spacing8,
+  transition: `box-shadow ${odysseyDesignTokens.TransitionDurationMain} ${odysseyDesignTokens.TransitionTimingMain}`,
+  zIndex: 1,
+}));
+
+export type TopNavProps = {
+  /**
+   * Whether or not the underlying content has been scrolled
+   */
+  isScrolled?: boolean;
+  /**
+   * React components that render into the left side of the top nav.
+   */
+  leftSideComponent?: ReactElement;
+  /**
+   * React components that render into the right side of the top nav.
+   */
+  rightSideComponent?: ReactElement;
+} & Pick<HtmlProps, "testId">;
+
+const TopNav = ({
+  isScrolled,
+  leftSideComponent,
+  rightSideComponent,
+}: TopNavProps) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+
+  return (
+    <StyledTopNavContainer
+      odysseyDesignTokens={odysseyDesignTokens}
+      isScrolled={isScrolled}
+    >
+      <StyledLeftSideContainer>
+        {leftSideComponent ?? <div />}
+      </StyledLeftSideContainer>
+      <StyledRightSideContainer>
+        {rightSideComponent ?? <div />}
+      </StyledRightSideContainer>
+    </StyledTopNavContainer>
+  );
+};
+
+const MemoizedTopNav = memo(TopNav);
+MemoizedTopNav.displayName = "TopNav";
+
+export { MemoizedTopNav as TopNav };

package/src/labs/TopNav/TopNavLinksList.tsx

@@ -0,0 +1,68 @@
+/*!
+ * 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.")
+ *
+ * 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, type ReactElement } from "react";
+
+import type { HtmlProps } from "../../HtmlProps";
+import { TopNavListItem, TopNavListItemProps } from "./TopNavListItem";
+import { UserProfileProps } from "./UserProfile";
+
+export type TopNavLinksListProps = {
+  /**
+   * Pass in an additional component like `Button` that will be displayed after the nav link items
+   */
+  additionalNavItem?: ReactElement;
+  /**
+   * URL to the help page.
+   */
+  helpPageHref?: string;
+  /**
+   *  Pass in a SearchField component with the variant="filled" prop set
+   */
+  searchField?: ReactElement;
+  /**
+   * URL to settings page.
+   */
+  settingsPageHref?: string;
+  /**
+   * Nav links in the top nav
+   */
+  topNavLinkItems: TopNavListItemProps[];
+  /**
+   * Displays user account info
+   */
+  userProfile?: UserProfileProps;
+} & Pick<HtmlProps, "testId">;
+
+const StyledTopNavList = styled("ul")(() => ({
+  alignItems: "center",
+  display: "flex",
+  listStyle: "none",
+  listStyleType: "none",
+  padding: 0,
+}));
+
+const TopNavLinksList = ({ topNavLinkItems }: TopNavLinksListProps) => (
+  <nav>
+    <StyledTopNavList>
+      {topNavLinkItems.map((item) => (
+        <TopNavListItem {...item} key={item.id} />
+      ))}
+    </StyledTopNavList>
+  </nav>
+);
+
+const MemoizedTopNavLinksList = memo(TopNavLinksList);
+MemoizedTopNavLinksList.displayName = "TopNavLinksList";
+
+export { MemoizedTopNavLinksList as TopNavLinksList };

package/src/labs/TopNav/TopNavListItem.tsx

@@ -0,0 +1,209 @@
+/*!
+ * 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,
+  useCallback,
+  KeyboardEventHandler,
+  MouseEventHandler,
+} from "react";
+
+import { Link } from "../../Link";
+import {
+  DesignTokens,
+  useOdysseyDesignTokens,
+} from "../../OdysseyDesignTokensContext";
+
+const StyledTopNavItemLabelContainer = styled("div", {
+  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+})<{
+  odysseyDesignTokens: DesignTokens;
+}>(({ odysseyDesignTokens }) => ({
+  alignItems: "center",
+  display: "flex",
+  flexWrap: "wrap",
+  fontSize: odysseyDesignTokens.TypographyScale0,
+  fontWeight: odysseyDesignTokens.TypographyWeightHeading,
+}));
+
+const StyledTopNavListItem = styled("li", {
+  shouldForwardProp: (prop) =>
+    prop !== "odysseyDesignTokens" && prop !== "isDisabled",
+})<{
+  odysseyDesignTokens: DesignTokens;
+  isDisabled?: boolean;
+}>(({ odysseyDesignTokens, isDisabled }) => ({
+  alignItems: "center",
+  color: `${isDisabled ? odysseyDesignTokens.TypographyColorDisabled : odysseyDesignTokens.TypographyColorHeading} !important`,
+  cursor: isDisabled ? "default" : "pointer",
+  display: "flex",
+  pointerEvents: isDisabled ? "none" : "auto",
+
+  a: {
+    alignItems: "center",
+    color: `${odysseyDesignTokens.TypographyColorHeading} !important`,
+    display: "flex",
+    paddingBlock: odysseyDesignTokens.Spacing2,
+    paddingInline: odysseyDesignTokens.Spacing4,
+
+    "&:hover": {
+      backgroundColor: !isDisabled
+        ? odysseyDesignTokens.HueNeutral50
+        : "inherit",
+      textDecoration: "none",
+    },
+
+    "&:focus-visible": {
+      backgroundColor: !isDisabled
+        ? odysseyDesignTokens.HueNeutral50
+        : "inherit",
+      borderRadius: 0,
+      outlineOffset: 0,
+      outlineWidth: odysseyDesignTokens.FocusOutlineWidthMain,
+    },
+  },
+
+  "div[role='button']:hover": {
+    backgroundColor: !isDisabled ? odysseyDesignTokens.HueNeutral50 : "inherit",
+  },
+}));
+
+const StyledNavItemContentClickContainer = styled("div", {
+  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+})<{
+  odysseyDesignTokens: DesignTokens;
+}>(({ odysseyDesignTokens }) => ({
+  alignItems: "center",
+  display: "flex",
+  paddingBlock: odysseyDesignTokens.Spacing2,
+  paddingInline: odysseyDesignTokens.Spacing4,
+  width: "100%",
+
+  "&:focus-visible": {
+    backgroundColor: odysseyDesignTokens.HueNeutral50,
+    borderRadius: 0,
+    outlineColor: odysseyDesignTokens.FocusOutlineColorPrimary,
+    outlineStyle: odysseyDesignTokens.FocusOutlineStyle,
+    outlineWidth: odysseyDesignTokens.FocusOutlineWidthMain,
+    textDecoration: "none",
+  },
+}));
+
+export type TopNavListItemProps = {
+  /**
+   * Without a hyperlink reference, `onClick` functionality will not function.
+   * If `undefined`, static text will be displayed.
+   */
+  href?: string;
+  /**
+   * HTML `id` attribute.
+   */
+  id: string;
+  /**
+   * Determines whether the link item is disabled.
+   */
+  isDisabled?: boolean;
+  /**
+   * Display text for the link.
+   */
+  label: string;
+  /**
+   * Handles both mouse and keyboard interactions.
+   */
+  onClick?: MouseEventHandler<HTMLAnchorElement> &
+    MouseEventHandler<HTMLDivElement> &
+    KeyboardEventHandler<HTMLDivElement>;
+  /**
+   * Where to display the linked URL.
+   */
+  target?: string;
+};
+
+const TopNavListItem = ({
+  href,
+  id,
+  isDisabled,
+  label,
+  onClick,
+  target,
+}: TopNavListItemProps) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+
+  const topNavItemContentKeyHandler = useCallback<
+    KeyboardEventHandler<HTMLDivElement>
+  >(
+    (event) => {
+      if (event?.key === "Enter") {
+        event.preventDefault();
+        event.stopPropagation();
+        onClick?.(event);
+      }
+    },
+    [onClick],
+  );
+
+  return (
+    <StyledTopNavListItem
+      aria-disabled={isDisabled}
+      id={id}
+      isDisabled={isDisabled}
+      odysseyDesignTokens={odysseyDesignTokens}
+    >
+      {
+        // Use Link for nav items with links and div for disabled or non-link items
+        isDisabled && (
+          <StyledNavItemContentClickContainer
+            odysseyDesignTokens={odysseyDesignTokens}
+          >
+            <StyledTopNavItemLabelContainer
+              odysseyDesignTokens={odysseyDesignTokens}
+            >
+              {label}
+            </StyledTopNavItemLabelContainer>
+          </StyledNavItemContentClickContainer>
+        )
+      }
+
+      {!isDisabled && href && (
+        <Link href={href} onClick={onClick} target={target}>
+          <StyledTopNavItemLabelContainer
+            odysseyDesignTokens={odysseyDesignTokens}
+          >
+            {label}
+          </StyledTopNavItemLabelContainer>
+        </Link>
+      )}
+
+      {!isDisabled && !href && (
+        <StyledNavItemContentClickContainer
+          odysseyDesignTokens={odysseyDesignTokens}
+          onClick={onClick}
+          onKeyDown={topNavItemContentKeyHandler}
+          role="button"
+          tabIndex={0}
+        >
+          <StyledTopNavItemLabelContainer
+            odysseyDesignTokens={odysseyDesignTokens}
+          >
+            {label}
+          </StyledTopNavItemLabelContainer>
+        </StyledNavItemContentClickContainer>
+      )}
+    </StyledTopNavListItem>
+  );
+};
+
+const MemoizedTopNavListItem = memo(TopNavListItem);
+MemoizedTopNavListItem.displayName = "TopNavListItem";
+
+export { MemoizedTopNavListItem as TopNavListItem };

package/src/labs/TopNav/UserProfile.tsx

@@ -0,0 +1,79 @@
+/*!
+ * 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, type ReactElement } from "react";
+
+import {
+  DesignTokens,
+  useOdysseyDesignTokens,
+} from "../../OdysseyDesignTokensContext";
+import { Subordinate } from "../../Typography";
+
+const UserProfileContainer = styled("div", {
+  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({
+  display: "flex",
+  alignItems: "center",
+  paddingInlineEnd: odysseyDesignTokens.Spacing4,
+}));
+
+const UserProfileIconContainer = styled("div", {
+  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({
+  display: "flex",
+  paddingInlineEnd: odysseyDesignTokens.Spacing2,
+}));
+
+const UserProfileInfoContainer = styled("div")(() => ({
+  display: "flex",
+  flexDirection: "column",
+}));
+
+export type UserProfileProps = {
+  /**
+   * Logged in user profile icon to be displayed in the top nav
+   */
+  profileIcon?: ReactElement;
+  /**
+   * Logged in user info to be displayed in the top nav
+   */
+  userName: string;
+  /**
+   * Org name of the logged in user
+   */
+  orgName: string;
+};
+
+const UserProfile = ({ profileIcon, userName, orgName }: UserProfileProps) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+
+  return (
+    <UserProfileContainer odysseyDesignTokens={odysseyDesignTokens}>
+      {profileIcon && (
+        <UserProfileIconContainer odysseyDesignTokens={odysseyDesignTokens}>
+          {profileIcon}
+        </UserProfileIconContainer>
+      )}
+
+      <UserProfileInfoContainer>
+        <Subordinate color="textPrimary">{userName}</Subordinate>
+        <Subordinate color="textSecondary">{orgName}</Subordinate>
+      </UserProfileInfoContainer>
+    </UserProfileContainer>
+  );
+};
+
+const MemoizedUserProfile = memo(UserProfile);
+MemoizedUserProfile.displayName = "UserProfile";
+
+export { MemoizedUserProfile as UserProfile };