@okta/odyssey-react-mui 1.13.2 → 1.13.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okta/odyssey-react-mui",
-  "version": "1.13.2",
+  "version": "1.13.4",
   "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.13.2",
+    "@okta/odyssey-design-tokens": "1.13.4",
     "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": "8a55b110963ec05ab28c11147593dd90aa7c17f4"
+  "gitHead": "819c629fca285cc984dc6cbdbf9f7d8fe6d6d08f"
 }

package/src/Checkbox.tsx

@@ -21,14 +21,14 @@ import {
 } from "@mui/material";
 
 import { FieldComponentProps } from "./FieldComponentProps";
-import { Typography } from "./Typography";
+import { CheckedFieldProps } from "./FormCheckedProps";
 import type { HtmlProps } from "./HtmlProps";
 import {
   ComponentControlledState,
   FocusHandle,
   getControlState,
 } from "./inputUtils";
-import { CheckedFieldProps } from "./FormCheckedProps";
+import { Typography } from "./Typography";
 
 export const checkboxValidityValues = ["valid", "invalid", "inherit"] as const;
 

package/src/i18n.ts

@@ -47,7 +47,7 @@ export const defaultLNG = "en";
 export const defaultNS = "translations";
 
 // Note: This is type "string" to allow translation overrides from other languages
-export type I18nResources = Record<string, typeof en>;
+export type I18nResources = Record<string, Partial<typeof en>>;
 export const resources: I18nResources = {
   cs,
   da,

package/src/labs/Switch.tsx

@@ -24,6 +24,7 @@ import {
   SwitchProps as MuiSwitchProps,
   FormControlLabel,
 } from "@mui/material";
+import { useTranslation } from "react-i18next";
 
 import { useOdysseyDesignTokens } from "../OdysseyDesignTokensContext";
 import { Box } from "../Box";
@@ -81,6 +82,7 @@ const SwitchLabel = ({
   label,
 }: SwitchLabelProps) => {
   const odysseyDesignTokens = useOdysseyDesignTokens();
+  const { t } = useTranslation();
 
   return (
     <>
@@ -115,7 +117,7 @@ const SwitchLabel = ({
             transitionDuration: odysseyDesignTokens.TransitionDurationMain,
           }}
         >
-          {checked ? "Active" : "Inactive"}
+          {checked ? t("switch.active") : t("switch.inactive")}
         </Box>
       </Box>
       {hint && <FieldHint id={hintId} text={hint} />}

package/src/properties/odyssey-react-mui.properties

@@ -10,6 +10,8 @@ severity.error = error
 severity.info = info
 severity.success = success
 severity.warning = warning
+switch.active = Active
+switch.inactive = Inactive
 table.error = Error loading data.
 table.fetchedrows.text = Fetched {{totalRows}} row
 table.fetchedrows.text_plural = Fetched {{totalRows}} total rows

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

@@ -1 +1 @@
-export const translation = {"breadcrumbs.home.text":"Home","breadcrumbs.label.text":"Breadcrumbs","close.text":"close","fielderror.screenreader.text":"Error","fieldlabel.optional.text":"Optional","fieldlabel.required.text":"Required","passwordfield.icon.label.show":"Show password","passwordfield.icon.label.hide":"Hide password","severity.error":"error","severity.info":"info","severity.success":"success","severity.warning":"warning","table.error":"Error loading data.","table.fetchedrows.text":"Fetched {{totalRows}} row","table.fetchedrows.text_plural":"Fetched {{totalRows}} total rows","table.rows.text":"{{totalRows}} row","table.rows.text_plural":"{{totalRows}} rows"};
+export const translation = {"breadcrumbs.home.text":"Home","breadcrumbs.label.text":"Breadcrumbs","close.text":"close","fielderror.screenreader.text":"Error","fieldlabel.optional.text":"Optional","fieldlabel.required.text":"Required","passwordfield.icon.label.show":"Show password","passwordfield.icon.label.hide":"Hide password","severity.error":"error","severity.info":"info","severity.success":"success","severity.warning":"warning","switch.active":"Active","switch.inactive":"Inactive","table.error":"Error loading data.","table.fetchedrows.text":"Fetched {{totalRows}} row","table.fetchedrows.text_plural":"Fetched {{totalRows}} total rows","table.rows.text":"{{totalRows}} row","table.rows.text_plural":"{{totalRows}} rows"};

package/src/theme/components.tsx

@@ -744,6 +744,7 @@ export const components = ({
       styleOverrides: {
         root: ({ theme }) => ({
           width: `${odysseyTokens.TypographyLineHeightUi}em`,
+          minWidth: `${odysseyTokens.TypographyLineHeightUi}em`,
           height: `${odysseyTokens.TypographyLineHeightUi}em`,
           borderRadius: odysseyTokens.BorderRadiusTight,
           borderWidth: odysseyTokens.BorderWidthMain,
@@ -1544,6 +1545,9 @@ export const components = ({
           "&.Mui-disabled": {
             pointerEvents: "none",
           },
+          [`:has(> .${radioClasses.root})`]: {
+            alignItems: "flex-start",
+          },
           [`& .${checkboxClasses.root}`]: {
             marginBlockStart: 0,
           },
@@ -2059,6 +2063,7 @@ export const components = ({
       styleOverrides: {
         root: ({ theme }) => ({
           width: `${odysseyTokens.TypographyLineHeightUi}em`,
+          minWidth: `${odysseyTokens.TypographyLineHeightUi}em`,
           height: `${odysseyTokens.TypographyLineHeightUi}em`,
           borderRadius: `${odysseyTokens.TypographyLineHeightUi}em`,
           borderWidth: odysseyTokens.BorderWidthMain,