@okta/odyssey-react-mui 1.9.1 → 1.9.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okta/odyssey-react-mui",
-  "version": "1.9.1",
+  "version": "1.9.3",
   "description": "React MUI components for Odyssey, Okta's design system",
   "author": "Okta, Inc.",
   "license": "Apache-2.0",
@@ -51,7 +51,7 @@
     "@mui/system": "^5.14.9",
     "@mui/utils": "^5.11.2",
     "@mui/x-date-pickers": "^5.0.15",
-    "@okta/odyssey-design-tokens": "1.9.1",
+    "@okta/odyssey-design-tokens": "1.9.3",
     "date-fns": "^2.30.0",
     "i18next": "^23.5.1",
     "material-react-table": "^2.0.2",
@@ -63,5 +63,5 @@
     "react": ">=17 <19",
     "react-dom": ">=17 <19"
   },
-  "gitHead": "09181cf65fb26379fca04275a4adbed25478cdd1"
+  "gitHead": "0901a41daba0362bfc71aab39591e6c039e0526b"
 }

package/src/OdysseyCacheProvider.tsx

@@ -40,6 +40,8 @@ export type OdysseyCacheProviderProps = {
 const OdysseyCacheProvider = ({
   children,
   emotionRoot,
+  nonce,
+  stylisPlugins,
 }: OdysseyCacheProviderProps) => {
   const uniqueAlphabeticalId = useUniqueAlphabeticalId();
 
@@ -47,11 +49,12 @@ const OdysseyCacheProvider = ({
     return createCache({
       ...(emotionRoot && { container: emotionRoot }),
       key: uniqueAlphabeticalId,
-      nonce: window.cspNonce,
+      nonce: nonce ?? window.cspNonce,
       prepend: true,
       speedy: false, // <-- Needs to be set to false when shadow-dom is used!! https://github.com/emotion-js/emotion/issues/2053#issuecomment-713429122
+      ...(stylisPlugins && { stylisPlugins }),
     });
-  }, [emotionRoot, uniqueAlphabeticalId]);
+  }, [emotionRoot, nonce, stylisPlugins, uniqueAlphabeticalId]);
 
   return <CacheProvider value={emotionCache}>{children}</CacheProvider>;
 };

package/src/OdysseyProvider.tsx

@@ -25,14 +25,17 @@ import {
   OdysseyTranslationProvider,
   OdysseyTranslationProviderProps,
 } from "./OdysseyTranslationProvider";
+import { DefaultSupportedLanguages } from "./OdysseyTranslationProvider.types";
 
-export type OdysseyProviderProps = OdysseyCacheProviderProps &
+export type OdysseyProviderProps<
+  SupportedLanguages extends string = DefaultSupportedLanguages
+> = OdysseyCacheProviderProps &
   OdysseyThemeProviderProps &
-  OdysseyTranslationProviderProps & {
+  OdysseyTranslationProviderProps<SupportedLanguages> & {
     children: ReactNode;
   };
 
-const OdysseyProvider = ({
+const OdysseyProvider = <SupportedLanguages extends string>({
   children,
   designTokensOverride,
   emotionRoot,
@@ -42,7 +45,7 @@ const OdysseyProvider = ({
   stylisPlugins,
   themeOverride,
   translationOverrides,
-}: OdysseyProviderProps) => (
+}: OdysseyProviderProps<SupportedLanguages>) => (
   <OdysseyCacheProvider
     nonce={nonce}
     emotionRoot={emotionRoot}
@@ -57,7 +60,7 @@ const OdysseyProvider = ({
       withCache={false}
     >
       <ScopedCssBaseline>
-        <OdysseyTranslationProvider
+        <OdysseyTranslationProvider<SupportedLanguages>
           languageCode={languageCode}
           translationOverrides={translationOverrides}
         >
@@ -68,6 +71,6 @@ const OdysseyProvider = ({
   </OdysseyCacheProvider>
 );
 
-const MemoizedThemeProvider = memo(OdysseyProvider);
+const MemoizedThemeProvider = memo(OdysseyProvider) as typeof OdysseyProvider;
 
 export { MemoizedThemeProvider as OdysseyProvider };

package/src/OdysseyTranslationProvider.test.tsx

@@ -26,6 +26,38 @@ describe("OdysseyTranslationProvider", () => {
     expect(screen.getByText("Optional"));
   });
 
+  it("defaults to 'en' for unsupported langauges", () => {
+    render(
+      <OdysseyTranslationProvider languageCode="test">
+        <span>{odysseyTranslate("fieldlabel.optional.text")}</span>
+      </OdysseyTranslationProvider>
+    );
+
+    expect(screen.getByText("Optional"));
+  });
+
+  it("allows translations for non-okta supported languages for existing keys", () => {
+    const translationOverrides = {
+      ar: {
+        "fieldlabel.optional.text":
+          "\u063A\u064A\u0631 \u0645\u0637\u0644\u0648\u0628",
+      },
+    };
+
+    render(
+      <OdysseyTranslationProvider<"ar">
+        languageCode="ar"
+        translationOverrides={translationOverrides}
+      >
+        <TextField label="" isOptional />
+      </OdysseyTranslationProvider>
+    );
+
+    expect(
+      screen.getByText("\u063A\u064A\u0631 \u0645\u0637\u0644\u0648\u0628")
+    );
+  });
+
   it("can modify a translation bundle with translantionOverrides", () => {
     const translationOverrides = {
       en: {
@@ -35,7 +67,7 @@ describe("OdysseyTranslationProvider", () => {
 
     render(
       <OdysseyTranslationProvider translationOverrides={translationOverrides}>
-        <TextField label={""} isOptional />
+        <TextField label="" isOptional />
       </OdysseyTranslationProvider>
     );
 
@@ -54,7 +86,7 @@ describe("OdysseyTranslationProvider", () => {
         languageCode="fr"
         translationOverrides={translationOverrides}
       >
-        <TextField label={""} isOptional />
+        <TextField label="" isOptional />
       </OdysseyTranslationProvider>
     );
 

package/src/OdysseyTranslationProvider.tsx

@@ -12,38 +12,43 @@
 
 import { ReactNode, useEffect } from "react";
 
-import { SupportedLanguages } from "./OdysseyTranslationProvider.types";
+import { DefaultSupportedLanguages } from "./OdysseyTranslationProvider.types";
 
 import { i18n, defaultNS, resources } from "./i18n";
 import { I18nextProvider } from "react-i18next";
+import { getTypedObjectKeys } from "./getTypedObjectKeys";
 
-export type TranslationOverrides = {
-  [key in SupportedLanguages]?: Partial<(typeof resources)["en"]>;
-};
+export type OdysseyI18nResourceKeys = (typeof resources)["en"];
+
+export type TranslationOverrides<
+  SupportedLanguages extends string = DefaultSupportedLanguages
+> = Record<SupportedLanguages, Partial<OdysseyI18nResourceKeys>>;
 
-const mergeBundleOverrides = (
+const mergeBundleOverrides = <SupportedLanguages extends string>(
   languageCode: SupportedLanguages,
-  translationOverrides: TranslationOverrides
+  translationOverrides: TranslationOverrides<SupportedLanguages>
 ) => {
-  const bundle = resources[languageCode];
-  const overrides = translationOverrides[languageCode];
+  const translationStrings = resources[languageCode] || {};
+  const translationStringOverrides = translationOverrides[languageCode];
   return {
-    ...bundle,
-    ...overrides,
+    ...translationStrings,
+    ...translationStringOverrides,
   };
 };
 
-export type OdysseyTranslationProviderProps = {
+export type OdysseyTranslationProviderProps<
+  SupportedLanguages extends string = DefaultSupportedLanguages
+> = {
   children: ReactNode;
-  languageCode?: SupportedLanguages;
-  translationOverrides?: TranslationOverrides;
+  languageCode?: SupportedLanguages | DefaultSupportedLanguages;
+  translationOverrides?: TranslationOverrides<SupportedLanguages>;
 };
 
-export const OdysseyTranslationProvider = ({
+export const OdysseyTranslationProvider = <SupportedLanguages extends string>({
   children,
   languageCode,
   translationOverrides,
-}: OdysseyTranslationProviderProps) => {
+}: OdysseyTranslationProviderProps<SupportedLanguages>) => {
   useEffect(() => {
     // Defaults to the browser's language if available otherwise `en` will be used
     i18n.changeLanguage(languageCode || window.navigator.language);
@@ -51,9 +56,9 @@ export const OdysseyTranslationProvider = ({
 
   useEffect(() => {
     if (translationOverrides) {
-      Object.keys(translationOverrides).forEach((language) => {
-        const bundle = mergeBundleOverrides(
-          language as SupportedLanguages,
+      getTypedObjectKeys(translationOverrides).forEach((language) => {
+        const bundle = mergeBundleOverrides<SupportedLanguages>(
+          language,
           translationOverrides
         );
         i18n.addResourceBundle(language, defaultNS, bundle);

package/src/OdysseyTranslationProvider.types.ts

@@ -10,7 +10,7 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-export const supportedLanguages = [
+export const defaultSupportedLanguages = [
   "cs", // Czech
   "da", // Danish
   "de", // German
@@ -42,4 +42,5 @@ export const supportedLanguages = [
   "zh_TW", // Chinese
 ] as const;
 
-export type SupportedLanguages = (typeof supportedLanguages)[number];
+export type DefaultSupportedLanguages =
+  (typeof defaultSupportedLanguages)[number];

package/src/getTypedObjectKeys.ts

@@ -0,0 +1,15 @@
+/*!
+ * Copyright (c) 2023-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 const getTypedObjectKeys: <ObjectType>(
+  object: ObjectType
+) => Array<keyof ObjectType> = Object.keys;

package/src/i18n.ts

@@ -43,14 +43,12 @@ import { translation as vi } from "./properties/ts/odyssey-react-mui_vi";
 import { translation as zhCN } from "./properties/ts/odyssey-react-mui_zh_CN";
 import { translation as znTW } from "./properties/ts/odyssey-react-mui_zh_TW";
 
-import {
-  SupportedLanguages,
-  supportedLanguages,
-} from "./OdysseyTranslationProvider.types";
-
-export const defaultLNG: SupportedLanguages = "en";
+export const defaultLNG = "en";
 export const defaultNS = "translations";
-export const resources = {
+
+// Note: This is type "string" to allow translation overrides from other languages
+export type I18nResources = Record<string, typeof en>;
+export const resources: I18nResources = {
   cs,
   da,
   de,
@@ -86,7 +84,6 @@ i18n.use(initReactI18next).init({
   defaultNS,
   ns: [defaultNS],
   fallbackLng: defaultLNG,
-  supportedLngs: supportedLanguages,
   load: "currentOnly",
   keySeparator: false,
   interpolation: {

package/src/properties/translations/odyssey-react-mui_ok_PL.properties

@@ -1,8 +1,17 @@
+breadcrumbs.home.text = 》Ĥöɱé 한Ӝฐโ《
+breadcrumbs.label.text = 》Ɓŕéåðçŕûɱƀš ئ䀕ヸ€홝한Ӝฐโ《
 fielderror.screenreader.text = 》Éŕŕöŕ 홝한Ӝฐโ《
 fieldlabel.optional.text = 》Öþţîöñåļ 䀕ヸ€홝한Ӝฐโ《
 fieldlabel.required.text = 》Ŕéǫûîŕéð 䀕ヸ€홝한Ӝฐโ《
+passwordfield.icon.label.show = 》Šĥöŵ þåššŵöŕð ⾼ئ䀕ヸ€홝한Ӝฐโ《
+passwordfield.icon.label.hide = 》Ĥîðé þåššŵöŕð ⾼ئ䀕ヸ€홝한Ӝฐโ《
+severity.error = 》éŕŕöŕ 홝한Ӝฐโ《
+severity.info = 》îñƒö 한Ӝฐโ《
 severity.success = 》šûççéšš ヸ€홝한Ӝฐโ《
 severity.warning = 》ŵåŕñîñĝ ヸ€홝한Ӝฐโ《
-severity.info = 》îñƒö 한Ӝฐโ《
-severity.error = 》éŕŕöŕ 홝한Ӝฐโ《
+table.error = 》Éŕŕöŕ ļöåðîñĝ ðåţå· 홝한Ӝฐโ⾼ئ䀕ヸ€홝한Ӝฐโ《
+table.fetchedrows.text = 》Ƒéţçĥéð {{totalRows}} ŕöŵ 홝한Ӝฐโ⾼ئ䀕ヸ€홝한Ӝฐโ《
+table.fetchedrows.text_plural = 》Ƒéţçĥéð {{totalRows}} ţöţåļ ŕöŵš Ӝฐโ⾼ئ䀕ヸ€홝한Ӝฐโ《
+table.rows.text = 》{{totalRows}} ŕöŵ 한Ӝฐโ⾼ئ䀕ヸ€홝한Ӝฐโ《
+table.rows.text_plural = 》{{totalRows}} ŕöŵš 한Ӝฐโ⾼ئ䀕ヸ€홝한Ӝฐโ《
 toast.close.text = 》çļöšé 홝한Ӝฐโ《

package/src/properties/translations/odyssey-react-mui_ok_SK.properties

@@ -1,8 +1,17 @@
+breadcrumbs.home.text = [[odyssey:odyssey-react-mui: breadcrumbs.home.text]]
+breadcrumbs.label.text = [[odyssey:odyssey-react-mui: breadcrumbs.label.text]]
 fielderror.screenreader.text = [[odyssey:odyssey-react-mui: fielderror.screenreader.text]]
 fieldlabel.optional.text = [[odyssey:odyssey-react-mui: fieldlabel.optional.text]]
 fieldlabel.required.text = [[odyssey:odyssey-react-mui: fieldlabel.required.text]]
+passwordfield.icon.label.show = [[odyssey:odyssey-react-mui: passwordfield.icon.label.show]]
+passwordfield.icon.label.hide = [[odyssey:odyssey-react-mui: passwordfield.icon.label.hide]]
+severity.error = [[odyssey:odyssey-react-mui: severity.error]]
+severity.info = [[odyssey:odyssey-react-mui: severity.info]]
 severity.success = [[odyssey:odyssey-react-mui: severity.success]]
 severity.warning = [[odyssey:odyssey-react-mui: severity.warning]]
-severity.info = [[odyssey:odyssey-react-mui: severity.info]]
-severity.error = [[odyssey:odyssey-react-mui: severity.error]]
+table.error = [[odyssey:odyssey-react-mui: table.error]]
+table.fetchedrows.text = [[odyssey:odyssey-react-mui: table.fetchedrows.text]]
+table.fetchedrows.text_plural = [[odyssey:odyssey-react-mui: table.fetchedrows.text_plural]]
+table.rows.text = [[odyssey:odyssey-react-mui: table.rows.text]]
+table.rows.text_plural = [[odyssey:odyssey-react-mui: table.rows.text_plural]]
 toast.close.text = [[odyssey:odyssey-react-mui: toast.close.text]]

package/src/properties/ts/odyssey-react-mui_ok_PL.ts

@@ -1 +1 @@
-export const translation = {"fielderror.screenreader.text":"》Éŕŕöŕ 홝한Ӝฐโ《","fieldlabel.optional.text":"》Öþţîöñåļ 䀕ヸ€홝한Ӝฐโ《","fieldlabel.required.text":"》Ŕéǫûîŕéð 䀕ヸ€홝한Ӝฐโ《","severity.success":"》šûççéšš ヸ€홝한Ӝฐโ《","severity.warning":"》ŵåŕñîñĝ ヸ€홝한Ӝฐโ《","severity.info":"》îñƒö 한Ӝฐโ《","severity.error":"》éŕŕöŕ 홝한Ӝฐโ《","toast.close.text":"》çļöšé 홝한Ӝฐโ《"};
+export const translation = {"breadcrumbs.home.text":"》Ĥöɱé 한Ӝฐโ《","breadcrumbs.label.text":"》Ɓŕéåðçŕûɱƀš ئ䀕ヸ€홝한Ӝฐโ《","fielderror.screenreader.text":"》Éŕŕöŕ 홝한Ӝฐโ《","fieldlabel.optional.text":"》Öþţîöñåļ 䀕ヸ€홝한Ӝฐโ《","fieldlabel.required.text":"》Ŕéǫûîŕéð 䀕ヸ€홝한Ӝฐโ《","passwordfield.icon.label.show":"》Šĥöŵ þåššŵöŕð ⾼ئ䀕ヸ€홝한Ӝฐโ《","passwordfield.icon.label.hide":"》Ĥîðé þåššŵöŕð ⾼ئ䀕ヸ€홝한Ӝฐโ《","severity.error":"》éŕŕöŕ 홝한Ӝฐโ《","severity.info":"》îñƒö 한Ӝฐโ《","severity.success":"》šûççéšš ヸ€홝한Ӝฐโ《","severity.warning":"》ŵåŕñîñĝ ヸ€홝한Ӝฐโ《","table.error":"》Éŕŕöŕ ļöåðîñĝ ðåţå· 홝한Ӝฐโ⾼ئ䀕ヸ€홝한Ӝฐโ《","table.fetchedrows.text":"》Ƒéţçĥéð {{totalRows}} ŕöŵ 홝한Ӝฐโ⾼ئ䀕ヸ€홝한Ӝฐโ《","table.fetchedrows.text_plural":"》Ƒéţçĥéð {{totalRows}} ţöţåļ ŕöŵš Ӝฐโ⾼ئ䀕ヸ€홝한Ӝฐโ《","table.rows.text":"》{{totalRows}} ŕöŵ 한Ӝฐโ⾼ئ䀕ヸ€홝한Ӝฐโ《","table.rows.text_plural":"》{{totalRows}} ŕöŵš 한Ӝฐโ⾼ئ䀕ヸ€홝한Ӝฐโ《","toast.close.text":"》çļöšé 홝한Ӝฐโ《"};

package/src/properties/ts/odyssey-react-mui_ok_SK.ts

@@ -1 +1 @@
-export const translation = {"fielderror.screenreader.text":"[[odyssey:odyssey-react-mui: fielderror.screenreader.text]]","fieldlabel.optional.text":"[[odyssey:odyssey-react-mui: fieldlabel.optional.text]]","fieldlabel.required.text":"[[odyssey:odyssey-react-mui: fieldlabel.required.text]]","severity.success":"[[odyssey:odyssey-react-mui: severity.success]]","severity.warning":"[[odyssey:odyssey-react-mui: severity.warning]]","severity.info":"[[odyssey:odyssey-react-mui: severity.info]]","severity.error":"[[odyssey:odyssey-react-mui: severity.error]]","toast.close.text":"[[odyssey:odyssey-react-mui: toast.close.text]]"};
+export const translation = {"breadcrumbs.home.text":"[[odyssey:odyssey-react-mui: breadcrumbs.home.text]]","breadcrumbs.label.text":"[[odyssey:odyssey-react-mui: breadcrumbs.label.text]]","fielderror.screenreader.text":"[[odyssey:odyssey-react-mui: fielderror.screenreader.text]]","fieldlabel.optional.text":"[[odyssey:odyssey-react-mui: fieldlabel.optional.text]]","fieldlabel.required.text":"[[odyssey:odyssey-react-mui: fieldlabel.required.text]]","passwordfield.icon.label.show":"[[odyssey:odyssey-react-mui: passwordfield.icon.label.show]]","passwordfield.icon.label.hide":"[[odyssey:odyssey-react-mui: passwordfield.icon.label.hide]]","severity.error":"[[odyssey:odyssey-react-mui: severity.error]]","severity.info":"[[odyssey:odyssey-react-mui: severity.info]]","severity.success":"[[odyssey:odyssey-react-mui: severity.success]]","severity.warning":"[[odyssey:odyssey-react-mui: severity.warning]]","table.error":"[[odyssey:odyssey-react-mui: table.error]]","table.fetchedrows.text":"[[odyssey:odyssey-react-mui: table.fetchedrows.text]]","table.fetchedrows.text_plural":"[[odyssey:odyssey-react-mui: table.fetchedrows.text_plural]]","table.rows.text":"[[odyssey:odyssey-react-mui: table.rows.text]]","table.rows.text_plural":"[[odyssey:odyssey-react-mui: table.rows.text_plural]]","toast.close.text":"[[odyssey:odyssey-react-mui: toast.close.text]]"};