@okta/odyssey-react-mui 1.32.0 → 1.32.4

package/src/ui-shell/TopNav/TopNavListItem.tsx

@@ -1,209 +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,
-  useCallback,
-  KeyboardEventHandler,
-  MouseEventHandler,
-} from "react";
-
-import { Link } from "../../Link.js";
-import {
-  DesignTokens,
-  useOdysseyDesignTokens,
-} from "../../OdysseyDesignTokensContext.js";
-
-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/ui-shell/TopNav/index.ts

@@ -1,13 +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.
- */
-
-export * from "./TopNav.js";

package/src/ui-shell/UiShell.test.tsx

@@ -1,366 +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 { render, waitFor, within } from "@testing-library/react";
-
-import { defaultComponentProps, UiShell, UiShellProps } from "./UiShell.js";
-import { ReactElement } from "react";
-
-describe("UiShell", () => {
-  test("renders `stylesRootElement`", () => {
-    const rootElement = document.createElement("div");
-
-    // If this isn't appended to the DOM, the React app won't exist because of how Web Components run.
-    document.body.append(rootElement);
-
-    const appContainerElement = document.createElement("div");
-    document.body.append(appContainerElement);
-
-    const stylesRootElement = document.createElement("div");
-
-    render(
-      <UiShell
-        appComponent={<div />}
-        appContainerElement={appContainerElement}
-        appRootElement={document.createElement("div")}
-        onSubscriptionCreated={() => {}}
-        stylesRootElement={stylesRootElement}
-        subscribeToPropChanges={() => () => {}}
-      />,
-    );
-
-    expect(Array.from(stylesRootElement.children).length).toBeGreaterThan(0);
-  });
-
-  test("renders always-available `componentSlots`", async () => {
-    const appContainerElement = document.createElement("div");
-    document.body.append(appContainerElement);
-
-    const optionalComponentTestIds: Array<
-      keyof Required<UiShellProps>["optionalComponents"]
-    > = ["banners", "topNavLeftSide", "topNavRightSide"];
-
-    // This is the subscription we give the component, and then once subscribed, we're going to immediately call it with new props.
-    // TopNav won't render unless we pass something into it.
-    const subscribeToPropChanges: UiShellProps["subscribeToPropChanges"] = (
-      subscriber,
-    ) => {
-      subscriber({
-        ...defaultComponentProps,
-        topNavProps: {},
-      });
-
-      return () => {};
-    };
-
-    const { container } = render(
-      <UiShell
-        appComponent={<div />}
-        appContainerElement={appContainerElement}
-        appRootElement={document.createElement("div")}
-        onSubscriptionCreated={() => {}}
-        optionalComponents={
-          Object.fromEntries(
-            optionalComponentTestIds.map((testId) => [
-              testId,
-              <div data-testid={testId} />,
-            ]),
-          ) as Record<keyof UiShellProps["optionalComponents"], ReactElement>
-        }
-        stylesRootElement={document.createElement("div")}
-        subscribeToPropChanges={subscribeToPropChanges}
-      />,
-    );
-
-    await waitFor(() => {
-      optionalComponentTestIds.forEach((testId) => {
-        expect(within(container).getByTestId(testId)).toBeVisible();
-      });
-    });
-  });
-
-  test("renders optionally-available `componentSlots`", () => {
-    const appContainerElement = document.createElement("div");
-    document.body.append(appContainerElement);
-
-    const optionalComponentTestIds: Array<
-      keyof Required<UiShellProps>["optionalComponents"]
-    > = ["sideNavFooter"];
-
-    // This is the subscription we give the component, and then once subscribed, we're going to immediately call it with new props.
-    const subscribeToPropChanges: UiShellProps["subscribeToPropChanges"] = (
-      subscriber,
-    ) => {
-      subscriber({
-        ...defaultComponentProps,
-        sideNavProps: {
-          appName: "",
-          hasCustomFooter: true,
-          sideNavItems: [],
-        },
-      });
-
-      return () => {};
-    };
-
-    const { container } = render(
-      <UiShell
-        appComponent={<div />}
-        appContainerElement={appContainerElement}
-        appRootElement={document.createElement("div")}
-        onSubscriptionCreated={() => {}}
-        optionalComponents={
-          Object.fromEntries(
-            optionalComponentTestIds.map((testId) => [
-              testId,
-              <div data-testid={testId} />,
-            ]),
-          ) as Record<keyof UiShellProps["optionalComponents"], ReactElement>
-        }
-        stylesRootElement={document.createElement("div")}
-        subscribeToPropChanges={subscribeToPropChanges}
-      />,
-    );
-
-    optionalComponentTestIds.forEach((testId) => {
-      expect(within(container).getByTestId(testId)).toBeVisible();
-    });
-  });
-
-  test("unsubscribes from prop changes when unmounted", () => {
-    const rootElement = document.createElement("div");
-
-    // If this isn't appended to the DOM, the React app won't exist because of how Web Components run.
-    document.body.append(rootElement);
-
-    const appContainerElement = document.createElement("div");
-    document.body.append(appContainerElement);
-
-    const unsubscribeFromPropChanges = vi.fn();
-    const subscribeToPropChanges = vi.fn(() => unsubscribeFromPropChanges);
-
-    const { unmount } = render(
-      <UiShell
-        appComponent={<div />}
-        appContainerElement={appContainerElement}
-        appRootElement={document.createElement("div")}
-        onSubscriptionCreated={() => {}}
-        stylesRootElement={document.createElement("div")}
-        subscribeToPropChanges={subscribeToPropChanges}
-      />,
-    );
-
-    unmount();
-
-    expect(subscribeToPropChanges).toHaveBeenCalledTimes(1);
-    expect(unsubscribeFromPropChanges).toHaveBeenCalledTimes(1);
-  });
-
-  test("allows changing props through the subscription", () => {
-    const rootElement = document.createElement("div");
-    const sideNavItemText = "Add New Folder";
-
-    // If this isn't appended to the DOM, the React app won't exist because of how Web Components run.
-    document.body.append(rootElement);
-
-    const appContainerElement = document.createElement("div");
-    document.body.append(appContainerElement);
-
-    // This is the subscription we give the component, and then once subscribed, we're going to immediately call it with new props.
-    const subscribeToPropChanges: UiShellProps["subscribeToPropChanges"] = (
-      subscriber,
-    ) => {
-      subscriber({
-        ...defaultComponentProps,
-        sideNavProps: {
-          appName: "",
-          sideNavItems: [
-            {
-              id: "AddNewFolder",
-              label: sideNavItemText,
-              onClick: () => {},
-            },
-          ],
-        },
-      });
-
-      return () => {};
-    };
-
-    const { container } = render(
-      <UiShell
-        appComponent={<div />}
-        appContainerElement={appContainerElement}
-        appRootElement={document.createElement("div")}
-        onSubscriptionCreated={() => {}}
-        stylesRootElement={document.createElement("div")}
-        subscribeToPropChanges={subscribeToPropChanges}
-      />,
-    );
-
-    expect(container).toHaveTextContent(sideNavItemText);
-  });
-
-  test("uses default props if no value passed to subscription", () => {
-    const rootElement = document.createElement("div");
-
-    // If this isn't appended to the DOM, the React app won't exist because of how Web Components run.
-    document.body.append(rootElement);
-
-    const appContainerElement = document.createElement("div");
-    document.body.append(appContainerElement);
-
-    // This is the subscription we give the component, and then once subscribed, we're going to immediately call it with new props.
-    const subscribeToPropChanges: UiShellProps["subscribeToPropChanges"] = (
-      subscriber,
-    ) => {
-      // @ts-expect-error This unit test is checking what happens when we don't pass a value.
-      subscriber();
-
-      return () => {};
-    };
-
-    const { container } = render(
-      <UiShell
-        appComponent={<div />}
-        appContainerElement={appContainerElement}
-        appRootElement={document.createElement("div")}
-        onSubscriptionCreated={() => {}}
-        stylesRootElement={document.createElement("div")}
-        subscribeToPropChanges={subscribeToPropChanges}
-      />,
-    );
-
-    expect(container).toBeVisible();
-  });
-
-  test("has previous state in prop change subscription", () => {
-    const rootElement = document.createElement("div");
-
-    // If this isn't appended to the DOM, the React app won't exist because of how Web Components run.
-    document.body.append(rootElement);
-
-    const appContainerElement = document.createElement("div");
-    document.body.append(appContainerElement);
-
-    // This passed to React's state setter. The return value here prevents a test error. It wouldn't be required otherwise as this test could care less what's returned.
-    const stateUpdater = vi.fn(() => defaultComponentProps);
-
-    // This is the subscription we give the component, and then once subscribed, we're going to immediately call it to see if it passes us the previous state.
-    const subscribeToPropChanges: UiShellProps["subscribeToPropChanges"] = (
-      subscriber,
-    ) => {
-      subscriber(stateUpdater);
-
-      return () => {};
-    };
-
-    render(
-      <UiShell
-        appComponent={<div />}
-        appContainerElement={appContainerElement}
-        appRootElement={document.createElement("div")}
-        onSubscriptionCreated={() => {}}
-        stylesRootElement={document.createElement("div")}
-        subscribeToPropChanges={subscribeToPropChanges}
-      />,
-    );
-
-    expect(stateUpdater).toHaveBeenCalledWith(defaultComponentProps);
-    expect(stateUpdater).toHaveBeenCalledTimes(1);
-  });
-
-  test("places expected padding on appContainerElement", async () => {
-    const rootElement = document.createElement("div");
-
-    // If this isn't appended to the DOM, the React app won't exist because of how Web Components run.
-    document.body.append(rootElement);
-
-    const appContainerElement = document.createElement("div");
-    document.body.append(appContainerElement);
-
-    const stylesRootElement = document.createElement("div");
-
-    render(
-      <UiShell
-        appComponent={<div />}
-        appContainerElement={appContainerElement}
-        appContainerScrollingMode="both"
-        appRootElement={document.createElement("div")}
-        onSubscriptionCreated={() => {}}
-        stylesRootElement={stylesRootElement}
-        subscribeToPropChanges={() => () => {}}
-      />,
-    );
-
-    await waitFor(() => {
-      expect(appContainerElement.style.getPropertyValue("position")).toEqual(
-        "absolute",
-      );
-      expect(appContainerElement.style.getPropertyValue("overflow-x")).toEqual(
-        "auto",
-      );
-      expect(appContainerElement.style.getPropertyValue("overflow-y")).toEqual(
-        "auto",
-      );
-      expect(
-        appContainerElement.style.getPropertyValue("padding-inline"),
-      ).toEqual("3.42857143rem");
-      expect(
-        appContainerElement.style.getPropertyValue("padding-block"),
-      ).toEqual("1.71428571rem");
-    });
-  });
-
-  test("places expected padding on appContainerElement", async () => {
-    const rootElement = document.createElement("div");
-
-    // If this isn't appended to the DOM, the React app won't exist because of how Web Components run.
-    document.body.append(rootElement);
-
-    const appContainerElement = document.createElement("div");
-    document.body.append(appContainerElement);
-
-    const stylesRootElement = document.createElement("div");
-
-    render(
-      <UiShell
-        appComponent={<div />}
-        appContainerElement={appContainerElement}
-        appContainerScrollingMode="none"
-        appRootElement={document.createElement("div")}
-        hasStandardAppContentPadding={false}
-        onSubscriptionCreated={() => {}}
-        stylesRootElement={stylesRootElement}
-        subscribeToPropChanges={() => () => {}}
-      />,
-    );
-
-    await waitFor(() => {
-      expect(appContainerElement.style.getPropertyValue("position")).toEqual(
-        "absolute",
-      );
-      expect(appContainerElement.style.getPropertyValue("overflow-x")).toEqual(
-        "hidden",
-      );
-      expect(appContainerElement.style.getPropertyValue("overflow-y")).toEqual(
-        "hidden",
-      );
-      expect(
-        appContainerElement.style.getPropertyValue("padding-inline"),
-      ).toEqual("");
-      expect(
-        appContainerElement.style.getPropertyValue("padding-block"),
-      ).toEqual("");
-    });
-  });
-});