@okta/odyssey-react-mui 1.24.1 → 1.25.0

package/jest.config.cjs

@@ -10,7 +10,26 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-module.exports = {
+/** @type { import("jest").Config } */
+const jestConfig = {
+  collectCoverageFrom: ["src/**/*.{js,jsx,ts,tsx}"],
+  coveragePathIgnorePatterns: [
+    "/src/icons.generated/",
+    "/src/properties/",
+    "/node_modules/",
+  ],
+  coverageReporters: ["json", "html", "text", "text-summary"],
+  coverageThreshold: {
+    global: {
+      branches: 13.63,
+      functions: 17.41,
+      lines: 29.98,
+      statements: 29.91,
+    },
+  },
+  extensionsToTreatAsEsm: [".ts"],
   setupFilesAfterEnv: ["./jest.setup.js"],
   testEnvironment: "jsdom",
 };
+
+module.exports = jestConfig;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okta/odyssey-react-mui",
-  "version": "1.24.1",
+  "version": "1.25.0",
   "description": "React MUI components for Odyssey, Okta's design system",
   "author": "Okta, Inc.",
   "license": "Apache-2.0",
@@ -58,7 +58,7 @@
     "@mui/system": "^5.15.9",
     "@mui/utils": "^5.15.9",
     "@mui/x-date-pickers": "^7.2.0",
-    "@okta/odyssey-design-tokens": "^1.24.1",
+    "@okta/odyssey-design-tokens": "^1.25.0",
     "@types/luxon": "^3.4.2",
     "date-fns": "^2.30.0",
     "dom-accessibility-api": "^0.7.0",
@@ -73,5 +73,5 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "8706464f0aa2e07b37fb33c16d848758ea56dfdd"
+  "gitHead": "d184ad44c7dc3a87359aae0cbc2282e5d28bd48c"
 }

package/src/OdysseyProvider.tsx

@@ -10,9 +10,8 @@
  * 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 {
   OdysseyCacheProvider,
   OdysseyCacheProviderProps,
@@ -26,26 +25,18 @@ import {
   OdysseyTranslationProviderProps,
 } from "./OdysseyTranslationProvider";
 import { DefaultSupportedLanguages } from "./OdysseyTranslationProvider.types";
-import {
-  ContrastMode,
-  ContrastModeProvider,
-  useContrastContext,
-} from "./ContrastModeProvider";
 
 const scopedCssBaselineStyles = {
   height: "inherit",
 };
-
 export type OdysseyProviderProps<
   SupportedLanguages extends string = DefaultSupportedLanguages,
 > = OdysseyCacheProviderProps &
   OdysseyThemeProviderProps &
   OdysseyTranslationProviderProps<SupportedLanguages> & {
     children: ReactNode;
-    contrastMode?: ContrastMode;
   };
-
-const OdysseyProviderInner = <SupportedLanguages extends string>({
+const OdysseyProvider = <SupportedLanguages extends string>({
   children,
   designTokensOverride,
   emotionRoot,
@@ -57,53 +48,30 @@ const OdysseyProviderInner = <SupportedLanguages extends string>({
   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
+    emotionRoot={emotionRoot}
+    emotionRootElement={emotionRootElement}
+    hasShadowDom={Boolean(shadowRootElement || shadowDomElement)}
+    nonce={nonce}
+    stylisPlugins={stylisPlugins}
+  >
+    <OdysseyThemeProvider
+      designTokensOverride={designTokensOverride}
+      shadowRootElement={shadowRootElement || shadowDomElement}
+      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 };
+const MemoizedThemeProvider = memo(OdysseyProvider) as typeof OdysseyProvider;
+export { MemoizedThemeProvider as OdysseyProvider };

package/src/OdysseyThemeProvider.tsx

@@ -31,6 +31,15 @@ export type OdysseyThemeProviderProps = {
   themeOverride?: ThemeOptions;
 };
 
+declare module "@mui/material/styles" {
+  interface Theme {
+    contrastMode: string;
+  }
+  interface ThemeOptions {
+    contrastMode?: string;
+  }
+}
+
 /**
  * This function doesn't include the Emotion Cache or Translations. You should probably be using `OdysseyProvider`.
  *
@@ -53,6 +62,7 @@ const OdysseyThemeProvider = ({
       createOdysseyMuiTheme({
         odysseyTokens,
         shadowRootElement: shadowRootElement || shadowDomElement,
+        contrastMode: "highContrast",
       }),
     [odysseyTokens, shadowDomElement, shadowRootElement],
   );

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

package/src/Select.tsx

@@ -19,6 +19,7 @@ import {
   useState,
   useImperativeHandle,
 } from "react";
+import styled from "@emotion/styled";
 import {
   Box as MuiBox,
   Checkbox as MuiCheckbox,
@@ -27,9 +28,10 @@ import {
   ListSubheader,
   MenuItem as MuiMenuItem,
   Select as MuiSelect,
+  SelectProps as MuiSelectProps,
   SelectChangeEvent,
 } from "@mui/material";
-import { SelectProps as MuiSelectProps } from "@mui/material";
+
 import { Field } from "./Field";
 import {
   FieldComponentProps,
@@ -43,13 +45,12 @@ import {
   useInputValues,
   getControlState,
 } from "./inputUtils";
-import { normalizedKey } from "./useNormalizedKey";
-import styled from "@emotion/styled";
 import {
   useOdysseyDesignTokens,
   DesignTokens,
 } from "./OdysseyDesignTokensContext";
 import { TestSelector } from "./test-selectors";
+import { normalizedKey } from "./useNormalizedKey";
 
 export const SelectTestSelector = {
   accessibleText: {
@@ -508,6 +509,14 @@ const Select = <
             selectRef.current = el;
           }}
           labelId={labelElementId}
+          MenuProps={{
+            sx: {
+              ".MuiPaper-root": {
+                maxHeight: "50vh",
+                minHeight: "200px",
+              },
+            },
+          }}
           multiple={hasMultipleChoices}
           name={nameOverride ?? id}
           onBlur={onBlur}

package/src/Tag.tsx

@@ -65,91 +65,115 @@ const getChipColors = (
       ...(contrastMode === "lowContrast" && {
         background: odysseyDesignTokens.HueNeutral200,
         text: odysseyDesignTokens.HueNeutral700,
+        textDisabled: odysseyDesignTokens.HueNeutral400,
       }),
       ...(contrastMode === "highContrast" && {
         background: odysseyDesignTokens.HueNeutral100,
         text: odysseyDesignTokens.HueNeutral700,
+        textDisabled: odysseyDesignTokens.HueNeutral300,
       }),
       hover: odysseyDesignTokens.HueNeutral200,
       active: odysseyDesignTokens.HueNeutral300,
       border: odysseyDesignTokens.HueNeutral200,
       deleteIcon: odysseyDesignTokens.HueNeutral500,
       deleteIconHover: odysseyDesignTokens.HueNeutral700,
+      icon: odysseyDesignTokens.HueNeutral700,
+      iconDisabled: odysseyDesignTokens.HueNeutral300,
     },
     info: {
       ...(contrastMode === "lowContrast" && {
         background: odysseyDesignTokens.HueBlue200,
         text: odysseyDesignTokens.HueBlue700,
+        textDisabled: odysseyDesignTokens.HueBlue400,
       }),
       ...(contrastMode === "highContrast" && {
         background: odysseyDesignTokens.HueBlue100,
         text: odysseyDesignTokens.HueBlue700,
+        textDisabled: odysseyDesignTokens.HueBlue300,
       }),
       hover: odysseyDesignTokens.HueBlue200,
       active: odysseyDesignTokens.HueBlue300,
       border: odysseyDesignTokens.HueBlue200,
       deleteIcon: odysseyDesignTokens.HueBlue500,
       deleteIconHover: odysseyDesignTokens.HueBlue700,
+      icon: odysseyDesignTokens.HueBlue700,
+      iconDisabled: odysseyDesignTokens.HueBlue300,
     },
     accentOne: {
       ...(contrastMode === "lowContrast" && {
         background: odysseyDesignTokens.HueAccentOne200,
         text: odysseyDesignTokens.HueAccentOne700,
+        textDisabled: odysseyDesignTokens.HueAccentOne400,
       }),
       ...(contrastMode === "highContrast" && {
         background: odysseyDesignTokens.HueAccentOne100,
         text: odysseyDesignTokens.HueAccentOne700,
+        textDisabled: odysseyDesignTokens.HueAccentOne300,
       }),
       hover: odysseyDesignTokens.HueAccentOne200,
       active: odysseyDesignTokens.HueAccentOne300,
       border: odysseyDesignTokens.HueAccentOne200,
       deleteIcon: odysseyDesignTokens.HueAccentOne500,
       deleteIconHover: odysseyDesignTokens.HueAccentOne700,
+      icon: odysseyDesignTokens.HueAccentOne700,
+      iconDisabled: odysseyDesignTokens.HueAccentOne300,
     },
     accentTwo: {
       ...(contrastMode === "lowContrast" && {
         background: odysseyDesignTokens.HueAccentTwo200,
         text: odysseyDesignTokens.HueAccentTwo800,
+        textDisabled: odysseyDesignTokens.HueAccentTwo400,
       }),
       ...(contrastMode === "highContrast" && {
         background: odysseyDesignTokens.HueAccentTwo100,
         text: odysseyDesignTokens.HueAccentTwo700,
+        textDisabled: odysseyDesignTokens.HueAccentTwo300,
       }),
       hover: odysseyDesignTokens.HueAccentTwo200,
       active: odysseyDesignTokens.HueAccentTwo300,
       border: odysseyDesignTokens.HueAccentTwo200,
       deleteIcon: odysseyDesignTokens.HueAccentTwo500,
       deleteIconHover: odysseyDesignTokens.HueAccentTwo700,
+      icon: odysseyDesignTokens.HueAccentTwo700,
+      iconDisabled: odysseyDesignTokens.HueAccentTwo300,
     },
     accentThree: {
       ...(contrastMode === "lowContrast" && {
         background: odysseyDesignTokens.HueAccentThree200,
         text: odysseyDesignTokens.HueAccentThree700,
+        textDisabled: odysseyDesignTokens.HueAccentThree400,
       }),
       ...(contrastMode === "highContrast" && {
         background: odysseyDesignTokens.HueAccentThree100,
         text: odysseyDesignTokens.HueAccentThree700,
+        textDisabled: odysseyDesignTokens.HueAccentThree300,
       }),
       hover: odysseyDesignTokens.HueAccentThree200,
       active: odysseyDesignTokens.HueAccentThree300,
       border: odysseyDesignTokens.HueAccentThree200,
       deleteIcon: odysseyDesignTokens.HueAccentThree500,
       deleteIconHover: odysseyDesignTokens.HueAccentThree700,
+      icon: odysseyDesignTokens.HueAccentThree700,
+      iconDisabled: odysseyDesignTokens.HueAccentThree300,
     },
     accentFour: {
       ...(contrastMode === "lowContrast" && {
         background: odysseyDesignTokens.HueAccentFour200,
         text: odysseyDesignTokens.HueAccentFour700,
+        textDisabled: odysseyDesignTokens.HueAccentFour400,
       }),
       ...(contrastMode === "highContrast" && {
         background: odysseyDesignTokens.HueAccentFour100,
         text: odysseyDesignTokens.HueAccentFour700,
+        textDisabled: odysseyDesignTokens.HueAccentFour300,
       }),
       hover: odysseyDesignTokens.HueAccentFour200,
       active: odysseyDesignTokens.HueAccentFour300,
       border: odysseyDesignTokens.HueAccentFour200,
       deleteIcon: odysseyDesignTokens.HueAccentFour500,
       deleteIconHover: odysseyDesignTokens.HueAccentFour700,
+      icon: odysseyDesignTokens.HueAccentFour700,
+      iconDisabled: odysseyDesignTokens.HueAccentFour300,
     },
   };
 
@@ -166,13 +190,21 @@ const StyledTag = styled(MuiChip, {
   contrastMode: ContrastMode;
   odysseyDesignTokens: DesignTokens;
   as?: React.ElementType; // Allow the 'as' prop to be forwarded
-}>(({ colorVariant, contrastMode, odysseyDesignTokens }) => {
+  clickable?: boolean;
+}>(({ colorVariant, contrastMode, odysseyDesignTokens, clickable }) => {
   const colors = getChipColors(colorVariant, odysseyDesignTokens, contrastMode);
 
   return {
     backgroundColor: colors.background,
     color: colors.text,
-    borderColor: colors.border,
+
+    ...(clickable === true && {
+      borderColor: colors.border,
+    }),
+
+    ...(clickable === false && {
+      borderColor: "transparent",
+    }),
 
     "&.MuiChip-clickable:hover": {
       backgroundColor: colors.hover,
@@ -183,14 +215,18 @@ const StyledTag = styled(MuiChip, {
     },
 
     "&.Mui-disabled": {
-      "& .MuiChip-deleteIcon": {
-        color: odysseyDesignTokens.HueNeutral300,
+      color: colors.textDisabled,
+      borderColor: colors.border,
+      "& .MuiChip-icon, & .MuiChip-deleteIcon": {
+        color: colors.iconDisabled,
       },
     },
 
+    "& .MuiChip-icon": {
+      color: colors.icon,
+    },
     "& .MuiChip-deleteIcon": {
       color: colors.deleteIcon,
-
       "&:hover": {
         color: colors.deleteIconHover,
       },
@@ -222,7 +258,7 @@ const Tag = ({
         data-se={testId}
         colorVariant={colorVariant}
         odysseyDesignTokens={odysseyDesignTokens}
-        contrastMode={contrastMode}
+        contrastMode="highContrast"
         disabled={isDisabled}
         icon={icon}
         label={label}

package/src/i18n.ts

@@ -21,6 +21,7 @@ import { translation as en } from "./properties/ts/odyssey-react-mui";
 import { translation as es } from "./properties/ts/odyssey-react-mui_es";
 import { translation as fi } from "./properties/ts/odyssey-react-mui_fi";
 import { translation as fr } from "./properties/ts/odyssey-react-mui_fr";
+import { translation as ht } from "./properties/ts/odyssey-react-mui_ht";
 import { translation as hu } from "./properties/ts/odyssey-react-mui_hu";
 import { translation as id } from "./properties/ts/odyssey-react-mui_id";
 import { translation as it } from "./properties/ts/odyssey-react-mui_it";
@@ -57,6 +58,7 @@ export const resources: I18nResources = {
   es,
   fi,
   fr,
+  ht,
   hu,
   id,
   it,

package/src/theme/components.tsx

@@ -578,7 +578,7 @@ export const components = ({
       },
       styleOverrides: {
         root: ({ ownerState, theme }) => {
-          const contrastMode = theme.odysseyContrastMode;
+          const contrastMode = theme.contrastMode;
 
           return {
             minWidth: "unset",
@@ -1030,7 +1030,8 @@ export const components = ({
       },
       styleOverrides: {
         root: ({ ownerState, theme }) => {
-          const contrastMode = theme.odysseyContrastMode;
+          const contrastMode = theme.contrastMode;
+
           return {
             height: "auto",
             paddingBlock: `calc(${odysseyTokens.Spacing2} - ${odysseyTokens.BorderWidthMain})`,
@@ -1057,6 +1058,10 @@ export const components = ({
               [`& .${chipClasses.deleteIcon}`]: {
                 color: odysseyTokens.HueNeutral300,
               },
+
+              [`& .${chipClasses.icon}`]: {
+                color: odysseyTokens.HueNeutral300,
+              },
             },
 
             ...(ownerState.clickable && {
@@ -2191,9 +2196,11 @@ export const components = ({
         root: ({ ownerState }) => ({
           gap: odysseyTokens.Spacing2,
           minHeight: "unset",
+          maxWidth: `calc(55ch - ${odysseyTokens.Spacing4})`,
           paddingBlock: odysseyTokens.Spacing3,
           paddingInline: odysseyTokens.Spacing4,
           borderRadius: odysseyTokens.BorderRadiusMain,
+          whiteSpace: "normal",
 
           [`& .${formControlLabelClasses.root}`]: {
             gap: "unset",

package/src/theme/createOdysseyMuiTheme.ts

@@ -28,10 +28,12 @@ export type DesignTokens = typeof Tokens;
 export type DesignTokensOverride = Partial<typeof Tokens>;
 
 export const createOdysseyMuiTheme = ({
+  contrastMode = "highContrast",
   odysseyTokens,
   shadowDomElement,
   shadowRootElement,
 }: {
+  contrastMode?: string;
   odysseyTokens: DesignTokens;
   /** @deprecated Use `shadowRootElement` */
   shadowDomElement?: HTMLElement;
@@ -42,6 +44,7 @@ export const createOdysseyMuiTheme = ({
       odysseyTokens,
       shadowRootElement: shadowRootElement || shadowDomElement,
     }),
+    contrastMode,
     mixins: mixins({ odysseyTokens }),
     palette: palette({ odysseyTokens }),
     shape: shape({ odysseyTokens }),