@okta/odyssey-react-mui 1.24.1 → 1.26.0

package/src/OdysseyProvider.tsx

@@ -10,7 +10,7 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { memo, ReactNode, useMemo } from "react";
+import { memo, ReactNode } from "react";
 import { ScopedCssBaseline } from "@mui/material";
 
 import {
@@ -26,12 +26,6 @@ import {
   OdysseyTranslationProviderProps,
 } from "./OdysseyTranslationProvider";
 import { DefaultSupportedLanguages } from "./OdysseyTranslationProvider.types";
-import {
-  ContrastMode,
-  ContrastModeProvider,
-  useContrastContext,
-} from "./ContrastModeProvider";
-
 const scopedCssBaselineStyles = {
   height: "inherit",
 };
@@ -42,68 +36,47 @@ export type OdysseyProviderProps<
   OdysseyThemeProviderProps &
   OdysseyTranslationProviderProps<SupportedLanguages> & {
     children: ReactNode;
-    contrastMode?: ContrastMode;
   };
 
-const OdysseyProviderInner = <SupportedLanguages extends string>({
+const OdysseyProvider = <SupportedLanguages extends string>({
   children,
+  contrastMode,
   designTokensOverride,
   emotionRoot,
   emotionRootElement,
-  shadowDomElement,
-  shadowRootElement,
   languageCode,
   nonce,
+  shadowDomElement,
+  shadowRootElement,
   stylisPlugins,
   themeOverride,
   translationOverrides,
-}: OdysseyProviderProps<SupportedLanguages>) => {
-  const { contrastMode } = useContrastContext();
-
-  const memoizedThemeProps = useMemo(
-    () => ({
-      ...themeOverride,
-      odysseyContrastMode: contrastMode,
-    }),
-    [themeOverride, contrastMode],
-  );
-
-  return (
-    <OdysseyCacheProvider
-      emotionRoot={emotionRoot}
-      emotionRootElement={emotionRootElement}
-      hasShadowDom={Boolean(shadowRootElement || shadowDomElement)}
-      nonce={nonce}
-      stylisPlugins={stylisPlugins}
-    >
-      <OdysseyThemeProvider
-        designTokensOverride={designTokensOverride}
-        shadowDomElement={shadowDomElement}
-        shadowRootElement={shadowRootElement}
-        themeOverride={memoizedThemeProps}
-      >
-        <ScopedCssBaseline sx={scopedCssBaselineStyles}>
-          <OdysseyTranslationProvider<SupportedLanguages>
-            languageCode={languageCode}
-            translationOverrides={translationOverrides}
-          >
-            {children}
-          </OdysseyTranslationProvider>
-        </ScopedCssBaseline>
-      </OdysseyThemeProvider>
-    </OdysseyCacheProvider>
-  );
-};
-
-const OdysseyProvider = <SupportedLanguages extends string>({
-  contrastMode,
-  ...providerProps
 }: OdysseyProviderProps<SupportedLanguages>) => (
-  <ContrastModeProvider contrastMode={contrastMode}>
-    <OdysseyProviderInner {...providerProps} />
-  </ContrastModeProvider>
+  <OdysseyCacheProvider
+    emotionRootElement={emotionRootElement || emotionRoot}
+    hasShadowDom={Boolean(shadowRootElement || shadowDomElement)}
+    nonce={nonce}
+    stylisPlugins={stylisPlugins}
+  >
+    <OdysseyThemeProvider
+      contrastMode={contrastMode}
+      designTokensOverride={designTokensOverride}
+      shadowDomElement={shadowDomElement}
+      shadowRootElement={shadowRootElement}
+      themeOverride={themeOverride}
+    >
+      {/* This component creates a div; for flexibility of layout of children, make it inherit its parent's height */}
+      <ScopedCssBaseline sx={scopedCssBaselineStyles}>
+        <OdysseyTranslationProvider<SupportedLanguages>
+          languageCode={languageCode}
+          translationOverrides={translationOverrides}
+        >
+          {children}
+        </OdysseyTranslationProvider>
+      </ScopedCssBaseline>
+    </OdysseyThemeProvider>
+  </OdysseyCacheProvider>
 );
-
 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,67 +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;
 };
 
+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,
+        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/OdysseyTranslationProvider.types.ts

@@ -19,6 +19,7 @@ export const defaultSupportedLanguages = [
   "es", // Spanish
   "fi", // Finnish
   "fr", // French
+  "ht", // Haitian Creole
   "hu", // Hungarian
   "id", // Indonesian
   "it", // Italian