From bdedb6ca78beb61fea574a356714d2523b5d3494 Mon Sep 17 00:00:00 2001
From: Kevin Ghadyani <kevin.ghadyani@okta.com>
Date: Thu, 20 Jul 2023 16:16:59 -0500
Subject: [PATCH 1/2] feat: adds ability to optionally add stylisPlugins

---
 packages/odyssey-react-mui/src/OdysseyCacheProvider.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/odyssey-react-mui/src/OdysseyCacheProvider.tsx b/packages/odyssey-react-mui/src/OdysseyCacheProvider.tsx
index 4be0f7d100..9ae609163c 100644
--- a/packages/odyssey-react-mui/src/OdysseyCacheProvider.tsx
+++ b/packages/odyssey-react-mui/src/OdysseyCacheProvider.tsx
@@ -16,7 +16,7 @@ declare global {
   }
 }
 
-import createCache from "@emotion/cache";
+import createCache, { StylisPlugin } from "@emotion/cache";
 import { CacheProvider } from "@emotion/react";
 import { memo, ReactElement, useMemo } from "react";
 
@@ -25,9 +25,11 @@ import { useUniqueAlphabeticalId } from "./useUniqueAlphabeticalId";
 const OdysseyCacheProvider = ({
   children,
   nonce,
+  stylisPlugins,
 }: {
   children: ReactElement;
   nonce?: string;
+  stylisPlugins: StylisPlugin[];
 }) => {
   const uniqueAlphabeticalId = useUniqueAlphabeticalId();
 
@@ -36,8 +38,9 @@ const OdysseyCacheProvider = ({
       createCache({
         key: uniqueAlphabeticalId,
         nonce: nonce || window.cspNonce,
+        stylisPlugins,
       }),
-    [nonce, uniqueAlphabeticalId]
+    [nonce, stylisPlugins, uniqueAlphabeticalId]
   );
 
   return <CacheProvider value={emotionCache}>{children}</CacheProvider>;

From 3d2c221e42cb163c4adc8ed1c7533541238e370f Mon Sep 17 00:00:00 2001
From: Kevin Ghadyani <kevin.ghadyani@okta.com>
Date: Thu, 20 Jul 2023 16:44:08 -0500
Subject: [PATCH 2/2] fix: refactors prop types in OdysseyProvider

---
 .../src/OdysseyCacheProvider.tsx              | 14 ++++----
 .../odyssey-react-mui/src/OdysseyProvider.tsx | 33 ++++++++++---------
 .../src/OdysseyThemeProvider.tsx              | 14 ++++----
 .../src/OdysseyTranslationProvider.tsx        | 12 +++----
 4 files changed, 39 insertions(+), 34 deletions(-)

diff --git a/packages/odyssey-react-mui/src/OdysseyCacheProvider.tsx b/packages/odyssey-react-mui/src/OdysseyCacheProvider.tsx
index 9ae609163c..6a86e4a374 100644
--- a/packages/odyssey-react-mui/src/OdysseyCacheProvider.tsx
+++ b/packages/odyssey-react-mui/src/OdysseyCacheProvider.tsx
@@ -18,19 +18,21 @@ declare global {
 
 import createCache, { StylisPlugin } from "@emotion/cache";
 import { CacheProvider } from "@emotion/react";
-import { memo, ReactElement, useMemo } from "react";
+import { memo, ReactNode, useMemo } from "react";
 
 import { useUniqueAlphabeticalId } from "./useUniqueAlphabeticalId";
 
+export type OdysseyCacheProviderProps = {
+  children: ReactNode;
+  nonce?: string;
+  stylisPlugins?: StylisPlugin[];
+};
+
 const OdysseyCacheProvider = ({
   children,
   nonce,
   stylisPlugins,
-}: {
-  children: ReactElement;
-  nonce?: string;
-  stylisPlugins: StylisPlugin[];
-}) => {
+}: OdysseyCacheProviderProps) => {
   const uniqueAlphabeticalId = useUniqueAlphabeticalId();
 
   const emotionCache = useMemo(
diff --git a/packages/odyssey-react-mui/src/OdysseyProvider.tsx b/packages/odyssey-react-mui/src/OdysseyProvider.tsx
index 64b29afec5..15f94170d8 100644
--- a/packages/odyssey-react-mui/src/OdysseyProvider.tsx
+++ b/packages/odyssey-react-mui/src/OdysseyProvider.tsx
@@ -10,36 +10,37 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { memo, ReactElement } from "react";
+import { memo, ReactNode } from "react";
 
-import { ThemeOptions } from "@mui/material";
-import { DesignTokensOverride } from "../src/theme/index";
-import { OdysseyCacheProvider } from "./OdysseyCacheProvider";
-import { OdysseyThemeProvider } from "./OdysseyThemeProvider";
+import {
+  OdysseyCacheProvider,
+  OdysseyCacheProviderProps,
+} from "./OdysseyCacheProvider";
+import {
+  OdysseyThemeProvider,
+  OdysseyThemeProviderProps,
+} from "./OdysseyThemeProvider";
 import {
   OdysseyTranslationProvider,
-  TranslationOverrides,
+  OdysseyTranslationProviderProps,
 } from "./OdysseyTranslationProvider";
-import { SupportedLanguages } from "./OdysseyTranslationProvider.types";
 
-type OdysseyProviderProps = {
-  children: ReactElement;
-  designTokensOverride?: DesignTokensOverride;
-  languageCode?: SupportedLanguages;
-  nonce?: string;
-  themeOverride?: ThemeOptions;
-  translationOverrides?: TranslationOverrides;
-};
+export type OdysseyProviderProps = OdysseyCacheProviderProps &
+  OdysseyThemeProviderProps &
+  OdysseyTranslationProviderProps & {
+    children: ReactNode;
+  };
 
 const OdysseyProvider = ({
   children,
   designTokensOverride,
   languageCode,
   nonce,
+  stylisPlugins,
   themeOverride,
   translationOverrides,
 }: OdysseyProviderProps) => (
-  <OdysseyCacheProvider nonce={nonce}>
+  <OdysseyCacheProvider nonce={nonce} stylisPlugins={stylisPlugins}>
     <OdysseyThemeProvider
       themeOverride={themeOverride}
       designTokensOverride={designTokensOverride}
diff --git a/packages/odyssey-react-mui/src/OdysseyThemeProvider.tsx b/packages/odyssey-react-mui/src/OdysseyThemeProvider.tsx
index aff02e9864..b4972c6623 100644
--- a/packages/odyssey-react-mui/src/OdysseyThemeProvider.tsx
+++ b/packages/odyssey-react-mui/src/OdysseyThemeProvider.tsx
@@ -14,22 +14,24 @@ import {
   createTheme,
   ThemeProvider as MuiThemeProvider,
 } from "@mui/material/styles";
-import { memo, ReactElement, useMemo } from "react";
+import { memo, ReactNode, useMemo } from "react";
 
 import { ThemeOptions } from "@mui/material";
 import { deepmerge } from "@mui/utils";
 import { createOdysseyMuiTheme, DesignTokensOverride } from "./theme";
 import * as Tokens from "@okta/odyssey-design-tokens";
 
+export type OdysseyThemeProviderProps = {
+  children: ReactNode;
+  designTokensOverride?: DesignTokensOverride;
+  themeOverride?: ThemeOptions;
+};
+
 const OdysseyThemeProvider = ({
   children,
   designTokensOverride,
   themeOverride,
-}: {
-  children: ReactElement;
-  designTokensOverride?: DesignTokensOverride;
-  themeOverride?: ThemeOptions;
-}) => {
+}: OdysseyThemeProviderProps) => {
   const odysseyTokens = { ...Tokens, ...designTokensOverride };
   const odysseyTheme = createOdysseyMuiTheme(odysseyTokens);
 
diff --git a/packages/odyssey-react-mui/src/OdysseyTranslationProvider.tsx b/packages/odyssey-react-mui/src/OdysseyTranslationProvider.tsx
index c2b46881f4..60b98da98c 100644
--- a/packages/odyssey-react-mui/src/OdysseyTranslationProvider.tsx
+++ b/packages/odyssey-react-mui/src/OdysseyTranslationProvider.tsx
@@ -21,12 +21,6 @@ export type TranslationOverrides = {
   [key in SupportedLanguages]?: Partial<(typeof resources)["en"]>;
 };
 
-type OdysseyTranslationProviderProps = {
-  children: ReactNode;
-  languageCode?: SupportedLanguages;
-  translationOverrides?: TranslationOverrides;
-};
-
 const mergeBundleOverrides = (
   languageCode: SupportedLanguages,
   translationOverrides: TranslationOverrides
@@ -39,6 +33,12 @@ const mergeBundleOverrides = (
   };
 };
 
+export type OdysseyTranslationProviderProps = {
+  children: ReactNode;
+  languageCode?: SupportedLanguages;
+  translationOverrides?: TranslationOverrides;
+};
+
 export const OdysseyTranslationProvider = ({
   children,
   languageCode,