@okta/odyssey-react-mui 1.25.0 → 1.27.0

package/src/OdysseyProvider.tsx

@@ -12,6 +12,7 @@
 
 import { memo, ReactNode } from "react";
 import { ScopedCssBaseline } from "@mui/material";
+
 import {
   OdysseyCacheProvider,
   OdysseyCacheProviderProps,
@@ -25,10 +26,10 @@ import {
   OdysseyTranslationProviderProps,
 } from "./OdysseyTranslationProvider";
 import { DefaultSupportedLanguages } from "./OdysseyTranslationProvider.types";
-
 const scopedCssBaselineStyles = {
   height: "inherit",
 };
+
 export type OdysseyProviderProps<
   SupportedLanguages extends string = DefaultSupportedLanguages,
 > = OdysseyCacheProviderProps &
@@ -36,29 +37,32 @@ export type OdysseyProviderProps<
   OdysseyTranslationProviderProps<SupportedLanguages> & {
     children: ReactNode;
   };
+
 const OdysseyProvider = <SupportedLanguages extends string>({
   children,
+  contrastMode,
   designTokensOverride,
   emotionRoot,
   emotionRootElement,
-  shadowDomElement,
-  shadowRootElement,
   languageCode,
   nonce,
+  shadowDomElement,
+  shadowRootElement,
   stylisPlugins,
   themeOverride,
   translationOverrides,
 }: OdysseyProviderProps<SupportedLanguages>) => (
   <OdysseyCacheProvider
-    emotionRoot={emotionRoot}
-    emotionRootElement={emotionRootElement}
+    emotionRootElement={emotionRootElement || emotionRoot}
     hasShadowDom={Boolean(shadowRootElement || shadowDomElement)}
     nonce={nonce}
     stylisPlugins={stylisPlugins}
   >
     <OdysseyThemeProvider
+      contrastMode={contrastMode}
       designTokensOverride={designTokensOverride}
-      shadowRootElement={shadowRootElement || shadowDomElement}
+      shadowDomElement={shadowDomElement}
+      shadowRootElement={shadowRootElement}
       themeOverride={themeOverride}
     >
       {/* This component creates a div; for flexibility of layout of children, make it inherit its parent's height */}
@@ -73,5 +77,6 @@ const OdysseyProvider = <SupportedLanguages extends string>({
     </OdysseyThemeProvider>
   </OdysseyCacheProvider>
 );
-const MemoizedThemeProvider = memo(OdysseyProvider) as typeof OdysseyProvider;
-export { MemoizedThemeProvider as OdysseyProvider };
+const MemoizedOdysseyProvider = memo(OdysseyProvider) as typeof OdysseyProvider;
+
+export { MemoizedOdysseyProvider as OdysseyProvider };

package/src/OdysseyThemeProvider.test.tsx

@@ -0,0 +1,209 @@
+/*!
+ * 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 { render, waitFor, act } from "@testing-library/react";
+import { useTheme } from "@mui/material/styles";
+import { OdysseyThemeProvider } from "./OdysseyThemeProvider";
+import { ContrastModeContext } from "./useContrastMode";
+import { useOdysseyDesignTokens } from "./OdysseyDesignTokensContext";
+import * as Tokens from "@okta/odyssey-design-tokens";
+import { useContext } from "react";
+
+describe("OdysseyThemeProvider", () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+    document.documentElement.style.setProperty("backgroundColor", null);
+  });
+
+  describe("contrast mode handling", () => {
+    let getComputedStyleSpy: jest.SpyInstance;
+
+    beforeEach(() => {
+      getComputedStyleSpy = jest
+        .spyOn(window, "getComputedStyle")
+        .mockImplementation(
+          () =>
+            ({ backgroundColor: Tokens.HueNeutral50 }) as CSSStyleDeclaration,
+        );
+    });
+
+    afterEach(() => {
+      getComputedStyleSpy.mockRestore();
+    });
+
+    it("should update contrast mode based on background color changes", async () => {
+      const TestComponent = () => {
+        const { contrastMode } = useContext(ContrastModeContext);
+        return <div data-testid="container">{contrastMode}</div>;
+      };
+
+      const { getByTestId } = render(
+        <OdysseyThemeProvider>
+          <TestComponent />
+        </OdysseyThemeProvider>,
+      );
+
+      const testContainer = getByTestId("container");
+
+      act(() => {
+        testContainer.style.backgroundColor = Tokens.HueNeutral50;
+        const event = new Event("transitionend");
+        Object.defineProperty(event, "propertyName", {
+          value: "background-color",
+        });
+        testContainer.dispatchEvent(event);
+      });
+
+      await waitFor(() => {
+        expect(getByTestId("container").textContent).toBe("highContrast");
+      });
+    });
+  });
+
+  describe("theme customization", () => {
+    it("should merge theme overrides with base theme", () => {
+      const themeOverride = {
+        palette: {
+          primary: {
+            main: "#000000",
+          },
+        },
+      };
+
+      const TestComponent = () => {
+        const theme = useTheme();
+        return <div data-testid="theme-test">{theme.palette.primary.main}</div>;
+      };
+
+      const { getByTestId } = render(
+        <OdysseyThemeProvider themeOverride={themeOverride}>
+          <TestComponent />
+        </OdysseyThemeProvider>,
+      );
+
+      expect(getByTestId("theme-test").textContent).toBe("#000000");
+    });
+
+    it("should merge design tokens override with base tokens", () => {
+      const designTokensOverride = {
+        HueNeutral50: "#654321",
+      };
+
+      const TestComponent = () => {
+        const tokens = useOdysseyDesignTokens();
+        return <div data-testid="token-test">{tokens.HueNeutral50}</div>;
+      };
+
+      const { getByTestId } = render(
+        <OdysseyThemeProvider designTokensOverride={designTokensOverride}>
+          <TestComponent />
+        </OdysseyThemeProvider>,
+      );
+
+      expect(getByTestId("token-test").textContent).toBe("#654321");
+    });
+
+    it("should properly handle nested providers with different configurations", () => {
+      const outerThemeOverride = {
+        palette: {
+          primary: {
+            main: "#111111",
+          },
+        },
+      };
+
+      const innerThemeOverride = {
+        palette: {
+          primary: {
+            main: "#222222",
+          },
+        },
+      };
+
+      const TestComponent = () => {
+        const theme = useTheme();
+        return (
+          <div data-testid="nested-test">{theme.palette.primary.main}</div>
+        );
+      };
+
+      const { getByTestId } = render(
+        <OdysseyThemeProvider themeOverride={outerThemeOverride}>
+          <OdysseyThemeProvider themeOverride={innerThemeOverride}>
+            <TestComponent />
+          </OdysseyThemeProvider>
+        </OdysseyThemeProvider>,
+      );
+
+      expect(getByTestId("nested-test").textContent).toBe("#222222");
+    });
+  });
+
+  describe("shadow DOM configuration", () => {
+    let shadowRoot: HTMLDivElement;
+    let shadowDom: HTMLDivElement;
+
+    beforeEach(() => {
+      shadowRoot = document.createElement("div");
+      shadowDom = document.createElement("div");
+    });
+
+    it("should properly configure shadow root element for MUI components", () => {
+      const TestComponent = () => {
+        const theme = useTheme();
+        return (
+          <div data-testid="shadow-root-test">
+            {theme.components?.MuiPopover?.defaultProps?.container ===
+            shadowRoot
+              ? "shadow-root-configured"
+              : "no-shadow-root"}
+          </div>
+        );
+      };
+
+      const { getByTestId } = render(
+        <OdysseyThemeProvider shadowRootElement={shadowRoot}>
+          <TestComponent />
+        </OdysseyThemeProvider>,
+      );
+
+      expect(getByTestId("shadow-root-test").textContent).toBe(
+        "shadow-root-configured",
+      );
+    });
+
+    it("should handle both shadowRootElement and deprecated shadowDomElement", () => {
+      const TestComponent = () => {
+        const theme = useTheme();
+        return (
+          <div data-testid="shadow-test">
+            {theme.components?.MuiPopover?.defaultProps?.container ===
+            shadowRoot
+              ? "using-shadow-root"
+              : "using-shadow-dom"}
+          </div>
+        );
+      };
+
+      const { getByTestId } = render(
+        <OdysseyThemeProvider
+          shadowRootElement={shadowRoot}
+          shadowDomElement={shadowDom}
+        >
+          <TestComponent />
+        </OdysseyThemeProvider>,
+      );
+
+      expect(getByTestId("shadow-test").textContent).toBe("using-shadow-root");
+    });
+  });
+});

package/src/OdysseyThemeProvider.tsx

@@ -10,77 +10,93 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
+import { ReactNode, useMemo } from "react";
 import {
   createTheme,
   ThemeProvider as MuiThemeProvider,
 } from "@mui/material/styles";
-import { memo, ReactNode, useMemo } from "react";
-
 import { ThemeOptions } from "@mui/material";
 import { deepmerge } from "@mui/utils";
+import styled from "@emotion/styled";
 import { createOdysseyMuiTheme, DesignTokensOverride } from "./theme";
 import * as Tokens from "@okta/odyssey-design-tokens";
+
+import {
+  ContrastMode,
+  ContrastModeContext,
+  useContrastMode,
+} from "./useContrastMode";
 import { OdysseyDesignTokensContext } from "./OdysseyDesignTokensContext";
 
 export type OdysseyThemeProviderProps = {
   children: ReactNode;
+  contrastMode?: ContrastMode;
   designTokensOverride?: DesignTokensOverride;
-  /** @deprecated Use `shadowRootElement` instead. */
-  shadowDomElement?: HTMLDivElement | HTMLElement | undefined;
+  /** @deprecated Use shadowRootElement instead */
+  shadowDomElement?: HTMLDivElement | HTMLElement;
   shadowRootElement?: HTMLDivElement | HTMLElement;
   themeOverride?: ThemeOptions;
 };
 
-declare module "@mui/material/styles" {
-  interface Theme {
-    contrastMode: string;
-  }
-  interface ThemeOptions {
-    contrastMode?: string;
-  }
-}
+const StyledContrastContainer = styled("div")(() => ({
+  height: "inherit",
+}));
 
 /**
  * This function doesn't include the Emotion Cache or Translations. You should probably be using `OdysseyProvider`.
  *
  * Some teams have a need to wrap separately (SIW), but most teams will never need to use this explicitly.
  */
-const OdysseyThemeProvider = ({
+export const OdysseyThemeProvider = ({
   children,
+  contrastMode: explicitContrastMode,
   designTokensOverride,
   shadowDomElement,
   shadowRootElement,
   themeOverride,
 }: OdysseyThemeProviderProps) => {
+  const { contrastMode, contrastContainerRef } = useContrastMode({
+    contrastMode: explicitContrastMode,
+  });
+
   const odysseyTokens = useMemo(
     () => ({ ...Tokens, ...designTokensOverride }),
     [designTokensOverride],
   );
 
+  const effectiveShadowRootElement = shadowRootElement || shadowDomElement;
+
   const odysseyTheme = useMemo(
     () =>
       createOdysseyMuiTheme({
+        contrastMode,
         odysseyTokens,
-        shadowRootElement: shadowRootElement || shadowDomElement,
-        contrastMode: "highContrast",
+        shadowRootElement: effectiveShadowRootElement,
       }),
-    [odysseyTokens, shadowDomElement, shadowRootElement],
+    [contrastMode, odysseyTokens, effectiveShadowRootElement],
   );
 
   const customOdysseyTheme = useMemo(
-    () => themeOverride && createTheme(deepmerge(odysseyTheme, themeOverride)),
+    () => createTheme(deepmerge(odysseyTheme, themeOverride || {})),
     [odysseyTheme, themeOverride],
   );
 
+  const contrastModeProviderValue = useMemo(
+    () => ({
+      contrastMode,
+    }),
+    [contrastMode],
+  );
+
   return (
-    <MuiThemeProvider theme={customOdysseyTheme ?? odysseyTheme}>
-      <OdysseyDesignTokensContext.Provider value={odysseyTokens}>
-        {children}
-      </OdysseyDesignTokensContext.Provider>
-    </MuiThemeProvider>
+    <StyledContrastContainer ref={contrastContainerRef}>
+      <ContrastModeContext.Provider value={contrastModeProviderValue}>
+        <MuiThemeProvider theme={customOdysseyTheme}>
+          <OdysseyDesignTokensContext.Provider value={odysseyTokens}>
+            {children}
+          </OdysseyDesignTokensContext.Provider>
+        </MuiThemeProvider>
+      </ContrastModeContext.Provider>
+    </StyledContrastContainer>
   );
 };
-
-const MemoizedOdysseyThemeProvider = memo(OdysseyThemeProvider);
-
-export { MemoizedOdysseyThemeProvider as OdysseyThemeProvider };

package/src/Pagination/Pagination.test.tsx

@@ -0,0 +1,305 @@
+/*!
+ * 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 { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { Pagination } from "./Pagination";
+
+describe("Pagination", () => {
+  it("renders the expected controls in 'paged' variant", () => {
+    const onPaginationChange = jest.fn();
+    render(
+      <Pagination
+        currentPageLabel="Page"
+        nextLabel="Next page"
+        previousLabel="Previous page"
+        rowsPerPageLabel="Rows per page"
+        loadMoreLabel="Load more"
+        totalRows={100}
+        lastRow={10}
+        pageIndex={1}
+        pageSize={10}
+        onPaginationChange={onPaginationChange}
+        variant="paged"
+      />,
+    );
+
+    expect(screen.getByLabelText("Rows per page")).toBeInTheDocument();
+    expect(screen.getByLabelText("Page")).toBeInTheDocument();
+    expect(screen.getByLabelText("Previous page")).toBeInTheDocument();
+    expect(screen.getByLabelText("Next page")).toBeInTheDocument();
+    // Temporarily disabled while we figure out why i18n string interpolation
+    // isn't playing nicely with testing-library. Can confirm this works properly
+    // via VRT results
+    // expect(screen.getByText("1-10 of 100")).toBeInTheDocument();
+  });
+
+  it("calls onPaginationChange with correct pageIndex when clicking next", async () => {
+    const onPaginationChange = jest.fn();
+    render(
+      <Pagination
+        currentPageLabel="Page"
+        nextLabel="Next page"
+        previousLabel="Previous page"
+        rowsPerPageLabel="Rows per page"
+        loadMoreLabel="Load more"
+        totalRows={100}
+        lastRow={10}
+        pageIndex={1}
+        pageSize={10}
+        onPaginationChange={onPaginationChange}
+        variant="paged"
+      />,
+    );
+
+    fireEvent.click(screen.getByLabelText("Next page"));
+
+    await waitFor(() => {
+      expect(onPaginationChange).toHaveBeenCalledWith({
+        pageIndex: 2,
+        pageSize: 10,
+      });
+    });
+  });
+
+  it("calls onPaginationChange with correct pageIndex when clicking previous", async () => {
+    const onPaginationChange = jest.fn();
+    render(
+      <Pagination
+        currentPageLabel="Page"
+        nextLabel="Next page"
+        previousLabel="Previous page"
+        rowsPerPageLabel="Rows per page"
+        loadMoreLabel="Load more"
+        totalRows={100}
+        lastRow={20}
+        pageIndex={2}
+        pageSize={10}
+        onPaginationChange={onPaginationChange}
+        variant="paged"
+      />,
+    );
+
+    fireEvent.click(screen.getByLabelText("Previous page"));
+
+    await waitFor(() => {
+      expect(onPaginationChange).toHaveBeenCalledWith({
+        pageIndex: 1,
+        pageSize: 10,
+      });
+    });
+  });
+
+  it("disables previous button on first page", () => {
+    const onPaginationChange = jest.fn();
+    render(
+      <Pagination
+        currentPageLabel="Page"
+        nextLabel="Next page"
+        previousLabel="Previous page"
+        rowsPerPageLabel="Rows per page"
+        loadMoreLabel="Load more"
+        totalRows={100}
+        lastRow={10}
+        pageIndex={1}
+        pageSize={10}
+        onPaginationChange={onPaginationChange}
+        variant="paged"
+      />,
+    );
+
+    expect(screen.getByLabelText("Previous page")).toBeDisabled();
+  });
+
+  it("disables next button on last page", () => {
+    const onPaginationChange = jest.fn();
+    render(
+      <Pagination
+        currentPageLabel="Page"
+        nextLabel="Next page"
+        previousLabel="Previous page"
+        rowsPerPageLabel="Rows per page"
+        loadMoreLabel="Load more"
+        totalRows={100}
+        lastRow={100}
+        pageIndex={10}
+        pageSize={10}
+        onPaginationChange={onPaginationChange}
+        variant="paged"
+      />,
+    );
+
+    expect(screen.getByLabelText("Next page")).toBeDisabled();
+  });
+
+  it("updates pageIndex when entering a new page number", async () => {
+    const onPaginationChange = jest.fn();
+    render(
+      <Pagination
+        currentPageLabel="Page"
+        nextLabel="Next page"
+        previousLabel="Previous page"
+        rowsPerPageLabel="Rows per page"
+        loadMoreLabel="Load more"
+        totalRows={100}
+        lastRow={10}
+        pageIndex={1}
+        pageSize={10}
+        onPaginationChange={onPaginationChange}
+        variant="paged"
+      />,
+    );
+
+    const pageInput = screen.getByLabelText("Page");
+    fireEvent.change(pageInput, { target: { value: "5" } });
+    fireEvent.blur(pageInput);
+
+    await waitFor(() => {
+      expect(onPaginationChange).toHaveBeenCalledWith({
+        pageIndex: 5,
+        pageSize: 10,
+      });
+    });
+  });
+
+  it("updates pageSize when entering a new rows per page value", async () => {
+    const onPaginationChange = jest.fn();
+    render(
+      <Pagination
+        currentPageLabel="Page"
+        nextLabel="Next page"
+        previousLabel="Previous page"
+        rowsPerPageLabel="Rows per page"
+        loadMoreLabel="Load more"
+        totalRows={100}
+        lastRow={10}
+        pageIndex={1}
+        pageSize={10}
+        onPaginationChange={onPaginationChange}
+        variant="paged"
+      />,
+    );
+
+    const rowsPerPageInput = screen.getByLabelText("Rows per page");
+    fireEvent.change(rowsPerPageInput, { target: { value: "20" } });
+    fireEvent.blur(rowsPerPageInput);
+
+    await waitFor(() => {
+      expect(onPaginationChange).toHaveBeenCalledWith({
+        pageIndex: 1,
+        pageSize: 20,
+      });
+    });
+  });
+
+  it("renders 'Load more' button in 'loadMore' variant", () => {
+    const onPaginationChange = jest.fn();
+    render(
+      <Pagination
+        loadMoreLabel="Load more"
+        onPaginationChange={onPaginationChange}
+        pageIndex={1}
+        pageSize={20}
+        totalRows={100}
+        variant="loadMore"
+      />,
+    );
+
+    expect(screen.getByText("Load more")).toBeInTheDocument();
+  });
+
+  it("calls onPaginationChange with increased pageSize when clicking 'Load more'", async () => {
+    const onPaginationChange = jest.fn();
+    render(
+      <Pagination
+        loadMoreLabel="Load more"
+        onPaginationChange={onPaginationChange}
+        pageIndex={1}
+        pageSize={20}
+        totalRows={100}
+        variant="loadMore"
+      />,
+    );
+
+    fireEvent.click(screen.getByText("Load more"));
+
+    await waitFor(() => {
+      expect(onPaginationChange).toHaveBeenCalledWith({
+        pageIndex: 1,
+        pageSize: 40, // Assuming initial pageSize is 20, it should increment by 20
+      });
+    });
+  });
+
+  it("disables 'Load more' button when isMoreDisabled is true", () => {
+    const onPaginationChange = jest.fn();
+    render(
+      <Pagination
+        loadMoreLabel="Load more"
+        onPaginationChange={onPaginationChange}
+        pageIndex={1}
+        pageSize={100}
+        totalRows={100}
+        variant="loadMore"
+        isMoreDisabled={true}
+      />,
+    );
+
+    expect(screen.getByText("Load more")).toBeDisabled();
+  });
+
+  it("disables 'Next page' button when isMoreDisabled is true", () => {
+    const onPaginationChange = jest.fn();
+    render(
+      <Pagination
+        currentPageLabel="Page"
+        nextLabel="Next page"
+        previousLabel="Previous page"
+        rowsPerPageLabel="Rows per page"
+        loadMoreLabel="Load more"
+        totalRows={100}
+        lastRow={10}
+        pageIndex={1}
+        pageSize={10}
+        onPaginationChange={onPaginationChange}
+        variant="paged"
+        isMoreDisabled={true}
+      />,
+    );
+
+    expect(screen.getByLabelText("Next page")).toBeDisabled();
+  });
+
+  it("disables all controls when isDisabled is true", () => {
+    const onPaginationChange = jest.fn();
+    render(
+      <Pagination
+        currentPageLabel="Page"
+        nextLabel="Next page"
+        previousLabel="Previous page"
+        rowsPerPageLabel="Rows per page"
+        loadMoreLabel="Load more"
+        totalRows={100}
+        lastRow={10}
+        pageIndex={1}
+        pageSize={10}
+        onPaginationChange={onPaginationChange}
+        variant="paged"
+        isDisabled={true}
+      />,
+    );
+
+    expect(screen.getByLabelText("Rows per page")).toBeDisabled();
+    expect(screen.getByLabelText("Page")).toBeDisabled();
+    expect(screen.getByLabelText("Previous page")).toBeDisabled();
+    expect(screen.getByLabelText("Next page")).toBeDisabled();
+  });
+});