@okta/odyssey-react-mui 1.9.4 → 1.9.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okta/odyssey-react-mui",
-  "version": "1.9.4",
+  "version": "1.9.5",
   "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.4",
+    "@okta/odyssey-design-tokens": "1.9.5",
     "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": "c2cfdc3048a0c8a71d2728f9b1a81162db405a32"
+  "gitHead": "5e04a06a8f989e16d12c07fd90f4e3023a6ca02d"
 }

package/src/OdysseyTranslationProvider.tsx

@@ -44,14 +44,30 @@ export type OdysseyTranslationProviderProps<
   translationOverrides?: TranslationOverrides<SupportedLanguages>;
 };
 
+const formatLanguageCodeToHyphenated = <SupportedLanguages extends string>(
+  languageCode: OdysseyTranslationProviderProps<SupportedLanguages>["languageCode"]
+) => languageCode?.replaceAll("_", "-");
+
 export const OdysseyTranslationProvider = <SupportedLanguages extends string>({
   children,
   languageCode,
   translationOverrides,
 }: OdysseyTranslationProviderProps<SupportedLanguages>) => {
   useEffect(() => {
+    const normalizedLanguageCode =
+      formatLanguageCodeToHyphenated<SupportedLanguages>(languageCode);
+
+    const changeHtmlElementLanguageAttribute = () => {
+      window.document.documentElement.setAttribute(
+        "lang",
+        normalizedLanguageCode || "en"
+      );
+    };
     // Defaults to the browser's language if available otherwise `en` will be used
-    i18n.changeLanguage(languageCode || window.navigator.language);
+    i18n.changeLanguage(
+      normalizedLanguageCode || window.navigator.language,
+      changeHtmlElementLanguageAttribute
+    );
   }, [languageCode]);
 
   useEffect(() => {

package/src/theme/components.tsx

@@ -972,6 +972,32 @@ export const components = ({
       html {
         font-size: calc((${themeParam.typography.fontSize} / 16) * 100%);
       }
+
+      :not(code) &, :not(pre) & {
+          :lang(el) {
+            font-family: 'Noto Sans', sans-serif;
+          }
+
+          :lang(ja) {
+            font-family: 'Noto Sans JP', sans-serif;
+          }
+
+          :lang(ko) {
+            font-family: 'Noto Sans KR', sans-serif;
+          }
+
+          :lang(th) {
+            font-family: 'Noto Sans Thai', sans-serif;
+          }
+
+          :lang(zh-CN) {
+            font-family: 'Noto Sans SC', sans-serif;
+          }
+
+          :lang(zh-TW) {
+            font-family: 'Noto Sans TC', sans-serif;
+          }
+        }
     `,
     },
     MuiScopedCssBaseline: {
@@ -2115,6 +2141,8 @@ export const components = ({
 
           ...(ownerState.disabled && {
             color: odysseyTokens.TypographyColorDisabled,
+            // !important used to override more specific .Mui-Disabled class selector
+            opacity: "1 !important",
           }),
 
           ...(ownerState.wrapped && {