@okta/odyssey-react-mui 0.23.0 → 1.0.0

package/src/MuiPropsChild.tsx

@@ -37,5 +37,6 @@ const MuiPropsChild = forwardRef<HTMLElement, MuiPropsChildProps>(
 );
 
 const MemoizedMuiPropsChild = memo(MuiPropsChild);
+MemoizedMuiPropsChild.displayName = "MuiPropsChild";
 
 export { MemoizedMuiPropsChild as MuiPropsChild };

package/src/MuiPropsContext.ts

@@ -10,8 +10,10 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { createContext } from "react";
+import { createContext, useContext } from "react";
 
 export type MuiPropsContextType = Record<string, unknown>;
 
 export const MuiPropsContext = createContext<MuiPropsContextType>({});
+
+export const useMuiProps = () => useContext(MuiPropsContext);

package/src/NativeSelect.tsx

@@ -0,0 +1,146 @@
+/*!
+ * Copyright (c) 2022-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.
+ */
+
+import { ReactElement, forwardRef, memo, useCallback } from "react";
+import { Select as MuiSelect } from "@mui/material";
+import { SelectProps as MuiSelectProps } from "@mui/material";
+import { Field } from "./Field";
+
+export type NativeSelectOption = {
+  text: string;
+  value?: string;
+  type?: "heading" | "option";
+};
+
+export type NativeSelectProps = {
+  /**
+   * The options or optgroup elements within the NativeSelect
+   */
+  children?: ReactElement<"option"> | ReactElement<"optgroup">;
+  /**
+   * The default value of the NativeSelect. Only applicable if `value` is not provided
+   */
+  defaultValue?: string;
+  /**
+   * The error message for the NativeSelect
+   */
+  errorMessage?: string;
+  /**
+   * The hint text for the NativeSelect
+   */
+  hint?: string;
+  /**
+   * The id attribute of the NativeSelect
+   */
+  id?: string;
+  /**
+   * If `true`, the NativeSelect is disabled
+   */
+  isDisabled?: boolean;
+  /**
+   * If `true`, the NativeSelect allows multiple selections
+   */
+  isMultiSelect?: boolean;
+  /**
+   * If `true`, the NativeSelect is optional
+   */
+  isOptional?: boolean;
+  /**
+   * The label text for the NativeSelect
+   */
+  label: string;
+  /**
+   * Callback fired when the NativeSelect loses focus
+   */
+  onBlur?: MuiSelectProps["onBlur"];
+  /**
+   * Callback fired when the value of the NativeSelect changes
+   */
+  onChange?: MuiSelectProps["onChange"];
+  /**
+   * Callback fired when the NativeSelect gains focus
+   */
+  onFocus?: MuiSelectProps["onFocus"];
+  /**
+   * The value or values selected in the NativeSelect
+   */
+  value?: string | string[];
+};
+
+const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
+  (
+    {
+      defaultValue,
+      errorMessage,
+      hint,
+      id: idOverride,
+      isDisabled = false,
+      isMultiSelect = false,
+      isOptional = false,
+      label,
+      onBlur,
+      onChange,
+      onFocus,
+      value,
+      children,
+    },
+    ref
+  ) => {
+    const renderFieldComponent = useCallback(
+      () => (
+        <MuiSelect
+          defaultValue={defaultValue}
+          id={idOverride}
+          name={idOverride}
+          multiple={isMultiSelect}
+          native={true}
+          onBlur={onBlur}
+          onChange={onChange}
+          onFocus={onFocus}
+          ref={ref}
+          value={value}
+          children={children}
+        />
+      ),
+      [
+        defaultValue,
+        idOverride,
+        isMultiSelect,
+        onBlur,
+        onChange,
+        onFocus,
+        ref,
+        children,
+        value,
+      ]
+    );
+
+    return (
+      <Field
+        errorMessage={errorMessage}
+        fieldType="single"
+        hasVisibleLabel
+        hint={hint}
+        id={idOverride}
+        isDisabled={isDisabled}
+        isOptional={isOptional}
+        label={label}
+        renderFieldComponent={renderFieldComponent}
+      />
+    );
+  }
+);
+
+const MemoizedNativeSelect = memo(NativeSelect);
+MemoizedNativeSelect.displayName = "NativeSelect";
+
+export { MemoizedNativeSelect as NativeSelect };

package/src/NullElement.tsx

@@ -0,0 +1,13 @@
+/*!
+ * 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 type NullElement = false | null | undefined;

package/src/OdysseyCacheProvider.test.tsx

@@ -29,7 +29,7 @@ describe("OdysseyCacheProvider", () => {
   it("themes a Button", () => {
     render(
       <OdysseyCacheProvider>
-        <Button text="text" />
+        <Button label="text" variant="primary" />
       </OdysseyCacheProvider>
     );
 

package/src/OdysseyCacheProvider.tsx

@@ -16,19 +16,23 @@ declare global {
   }
 }
 
-import createCache from "@emotion/cache";
+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,
-}: {
-  children: ReactElement;
-  nonce?: string;
-}) => {
+  stylisPlugins,
+}: OdysseyCacheProviderProps) => {
   const uniqueAlphabeticalId = useUniqueAlphabeticalId();
 
   const emotionCache = useMemo(
@@ -36,13 +40,15 @@ const OdysseyCacheProvider = ({
       createCache({
         key: uniqueAlphabeticalId,
         nonce: nonce || window.cspNonce,
+        stylisPlugins,
       }),
-    [nonce, uniqueAlphabeticalId]
+    [nonce, stylisPlugins, uniqueAlphabeticalId]
   );
 
   return <CacheProvider value={emotionCache}>{children}</CacheProvider>;
 };
 
 const MemoizedOdysseyCacheProvider = memo(OdysseyCacheProvider);
+MemoizedOdysseyCacheProvider.displayName = "OdysseyCacheProvider";
 
 export { MemoizedOdysseyCacheProvider as OdysseyCacheProvider };

package/src/OdysseyDesignTokensContext.tsx

@@ -0,0 +1,19 @@
+/*!
+ * 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.
+ */
+
+import * as Tokens from "@okta/odyssey-design-tokens";
+import { createContext, useContext } from "react";
+
+export const OdysseyDesignTokensContext = createContext<typeof Tokens>(Tokens);
+
+export const useOdysseyDesignTokens = () =>
+  useContext(OdysseyDesignTokensContext);

package/src/OdysseyI18n.ts

@@ -0,0 +1,105 @@
+/*!
+ * 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.
+ */
+
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+
+import { translation as cs } from "./properties/ts/odyssey-react-mui_cs";
+import { translation as da } from "./properties/ts/odyssey-react-mui_da";
+import { translation as de } from "./properties/ts/odyssey-react-mui_de";
+import { translation as el } from "./properties/ts/odyssey-react-mui_el";
+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 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";
+import { translation as ja } from "./properties/ts/odyssey-react-mui_ja";
+import { translation as ko } from "./properties/ts/odyssey-react-mui_ko";
+import { translation as ms } from "./properties/ts/odyssey-react-mui_ms";
+import { translation as nb } from "./properties/ts/odyssey-react-mui_nb";
+import { translation as nlNL } from "./properties/ts/odyssey-react-mui_nl_NL";
+import { translation as okPL } from "./properties/ts/odyssey-react-mui_ok_PL";
+import { translation as okSK } from "./properties/ts/odyssey-react-mui_ok_SK";
+import { translation as pl } from "./properties/ts/odyssey-react-mui_pl";
+import { translation as ptBR } from "./properties/ts/odyssey-react-mui_pt_BR";
+import { translation as ro } from "./properties/ts/odyssey-react-mui_ro";
+import { translation as ru } from "./properties/ts/odyssey-react-mui_ru";
+import { translation as sv } from "./properties/ts/odyssey-react-mui_sv";
+import { translation as th } from "./properties/ts/odyssey-react-mui_th";
+import { translation as tr } from "./properties/ts/odyssey-react-mui_tr";
+import { translation as uk } from "./properties/ts/odyssey-react-mui_uk";
+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 defaultNS = "translations";
+export const resources = {
+  cs,
+  da,
+  de,
+  el,
+  en,
+  es,
+  fi,
+  fr,
+  hu,
+  id,
+  it,
+  ja,
+  ko,
+  ms,
+  nb,
+  nl_NL: nlNL,
+  ok_PL: okPL,
+  ok_SK: okSK,
+  pl,
+  pt_BR: ptBR,
+  ro,
+  ru,
+  sv,
+  th,
+  tr,
+  uk,
+  zh_CN: zhCN,
+  zh_TW: znTW,
+};
+
+i18n.use(initReactI18next).init({
+  defaultNS,
+  ns: [defaultNS],
+  fallbackLng: defaultLNG,
+  supportedLngs: supportedLanguages,
+  load: "currentOnly",
+  keySeparator: false,
+  interpolation: {
+    escapeValue: false, // react already safe from xss
+    skipOnVariables: false, // to handle translations that use nesting
+  },
+  react: {
+    useSuspense: false,
+    bindI18nStore: "added",
+  },
+});
+
+Object.entries(resources).forEach(([locale, property]) => {
+  i18n.addResourceBundle(locale, defaultNS, property);
+});
+
+// eslint-disable-next-line import/no-default-export
+export default i18n;

package/src/OdysseyProvider.tsx

@@ -0,0 +1,60 @@
+/*!
+ * Copyright (c) 2022-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.
+ */
+
+import { memo, ReactNode } from "react";
+
+import {
+  OdysseyCacheProvider,
+  OdysseyCacheProviderProps,
+} from "./OdysseyCacheProvider";
+import {
+  OdysseyThemeProvider,
+  OdysseyThemeProviderProps,
+} from "./OdysseyThemeProvider";
+import {
+  OdysseyTranslationProvider,
+  OdysseyTranslationProviderProps,
+} from "./OdysseyTranslationProvider";
+
+export type OdysseyProviderProps = OdysseyCacheProviderProps &
+  OdysseyThemeProviderProps &
+  OdysseyTranslationProviderProps & {
+    children: ReactNode;
+  };
+
+const OdysseyProvider = ({
+  children,
+  designTokensOverride,
+  languageCode,
+  nonce,
+  stylisPlugins,
+  themeOverride,
+  translationOverrides,
+}: OdysseyProviderProps) => (
+  <OdysseyCacheProvider nonce={nonce} stylisPlugins={stylisPlugins}>
+    <OdysseyThemeProvider
+      themeOverride={themeOverride}
+      designTokensOverride={designTokensOverride}
+    >
+      <OdysseyTranslationProvider
+        languageCode={languageCode}
+        translationOverrides={translationOverrides}
+      >
+        {children}
+      </OdysseyTranslationProvider>
+    </OdysseyThemeProvider>
+  </OdysseyCacheProvider>
+);
+
+const MemoizedThemeProvider = memo(OdysseyProvider);
+
+export { MemoizedThemeProvider as OdysseyProvider };

package/src/OdysseyThemeProvider.tsx

@@ -10,27 +10,50 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { ThemeProvider as MuiThemeProvider } from "@mui/material/styles";
-import { memo, ReactElement, useMemo } from "react";
+import {
+  createTheme,
+  ThemeProvider as MuiThemeProvider,
+} from "@mui/material/styles";
+import { memo, ReactNode, useMemo } from "react";
 
-import { createTheme, deepmerge, ThemeOptions } from ".";
-import { odysseyTheme } from "./theme";
+import { ScopedCssBaseline, ThemeOptions } from "@mui/material";
+import { deepmerge } from "@mui/utils";
+import { createOdysseyMuiTheme, DesignTokensOverride } from "./theme";
+import * as Tokens from "@okta/odyssey-design-tokens";
+import { OdysseyDesignTokensContext } from "./OdysseyDesignTokensContext";
+
+export type OdysseyThemeProviderProps = {
+  children: ReactNode;
+  designTokensOverride?: DesignTokensOverride;
+  themeOverride?: ThemeOptions;
+};
 
 const OdysseyThemeProvider = ({
   children,
+  designTokensOverride,
   themeOverride,
-}: {
-  children: ReactElement;
-  themeOverride?: ThemeOptions;
-}) => {
+}: OdysseyThemeProviderProps) => {
+  const odysseyTokens = useMemo(
+    () => ({ ...Tokens, ...designTokensOverride }),
+    [designTokensOverride]
+  );
+  const odysseyTheme = useMemo(
+    () => createOdysseyMuiTheme(odysseyTokens),
+    [odysseyTokens]
+  );
+
   const customOdysseyTheme = useMemo(
     () => themeOverride && createTheme(deepmerge(odysseyTheme, themeOverride)),
-    [themeOverride]
+    [odysseyTheme, themeOverride]
   );
 
   return (
     <MuiThemeProvider theme={customOdysseyTheme ?? odysseyTheme}>
-      {children}
+      <ScopedCssBaseline>
+        <OdysseyDesignTokensContext.Provider value={odysseyTokens}>
+          {children}
+        </OdysseyDesignTokensContext.Provider>
+      </ScopedCssBaseline>
     </MuiThemeProvider>
   );
 };

package/src/OdysseyTranslationProvider.test.tsx

@@ -0,0 +1,63 @@
+/*!
+ * 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.
+ */
+
+import { render, screen } from "@testing-library/react";
+import { OdysseyTranslationProvider } from "./OdysseyTranslationProvider";
+import i18n from "./OdysseyI18n";
+import { TextField } from "./TextField";
+
+describe("OdysseyTranslationProvider", () => {
+  it("defaults to 'en' translation bundle", () => {
+    render(
+      <OdysseyTranslationProvider>
+        <span>{i18n.t("fieldlabel.optional.text")}</span>
+      </OdysseyTranslationProvider>
+    );
+
+    expect(screen.getByText("Optional"));
+  });
+
+  it("can modify a translation bundle with translantionOverrides", () => {
+    const translationOverrides = {
+      en: {
+        "fieldlabel.optional.text": "Non Required",
+      },
+    };
+
+    render(
+      <OdysseyTranslationProvider translationOverrides={translationOverrides}>
+        <TextField label={""} isOptional />
+      </OdysseyTranslationProvider>
+    );
+
+    expect(screen.getByText("Non Required"));
+  });
+
+  it("can change the displayed language with languageCode", () => {
+    const translationOverrides = {
+      fr: {
+        "fieldlabel.optional.text": "Optionnel",
+      },
+    };
+
+    render(
+      <OdysseyTranslationProvider
+        languageCode="fr"
+        translationOverrides={translationOverrides}
+      >
+        <TextField label={""} isOptional />
+      </OdysseyTranslationProvider>
+    );
+
+    expect(screen.getByText("Optionnel"));
+  });
+});

package/src/OdysseyTranslationProvider.tsx

@@ -0,0 +1,65 @@
+/*!
+ * 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.
+ */
+
+import { ReactNode, useEffect } from "react";
+
+import { SupportedLanguages } from "./OdysseyTranslationProvider.types";
+
+import i18n, { defaultNS, resources } from "./OdysseyI18n";
+import { I18nextProvider } from "react-i18next";
+
+export type TranslationOverrides = {
+  [key in SupportedLanguages]?: Partial<(typeof resources)["en"]>;
+};
+
+const mergeBundleOverrides = (
+  languageCode: SupportedLanguages,
+  translationOverrides: TranslationOverrides
+) => {
+  const bundle = resources[languageCode];
+  const overrides = translationOverrides[languageCode];
+  return {
+    ...bundle,
+    ...overrides,
+  };
+};
+
+export type OdysseyTranslationProviderProps = {
+  children: ReactNode;
+  languageCode?: SupportedLanguages;
+  translationOverrides?: TranslationOverrides;
+};
+
+export const OdysseyTranslationProvider = ({
+  children,
+  languageCode,
+  translationOverrides,
+}: OdysseyTranslationProviderProps) => {
+  useEffect(() => {
+    // Defaults to the browser's language if available otherwise `en` will be used
+    i18n.changeLanguage(languageCode || window.navigator.language);
+  }, [languageCode]);
+
+  useEffect(() => {
+    if (translationOverrides) {
+      Object.keys(translationOverrides).forEach((language) => {
+        const bundle = mergeBundleOverrides(
+          language as SupportedLanguages,
+          translationOverrides
+        );
+        i18n.addResourceBundle(language, defaultNS, bundle);
+      });
+    }
+  }, [translationOverrides]);
+
+  return <I18nextProvider i18n={i18n}>{children}</I18nextProvider>;
+};

package/src/OdysseyTranslationProvider.types.ts

@@ -0,0 +1,44 @@
+/*!
+ * 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 supportedLanguages = [
+  "cs", // Czech
+  "da", // Danish
+  "de", // German
+  "el", // Greek
+  "en", // English
+  "es", // Spanish
+  "fi", // Finnish
+  "fr", // French
+  "hu", // Hungarian
+  "id", // Indonesian
+  "it", // Italian
+  "ja", // Japanese
+  "ko", // Korean
+  "ms", // Malaysian
+  "nb", // Norwegian
+  "nl_NL", // Dutch
+  "ok_PL", // (Test Language) Pseudo-loc
+  "ok_SK", // (Test Language) Show Keys
+  "pl", // Polish
+  "pt_BR", // Portuguese (Brazil)
+  "ro", // Romanian
+  "ru", // Russian
+  "sv", // Swedish
+  "th", // Thai
+  "tr", // Turkish
+  "uk", // Ukrainian
+  "zh_CN", // Chinese (PRC)
+  "zh_TW", // Chinese
+] as const;
+
+export type SupportedLanguages = (typeof supportedLanguages)[number];