@okta/odyssey-react-mui 0.22.0 → 0.24.0

package/src/Link.tsx

@@ -12,17 +12,25 @@
 
 import { forwardRef, ReactElement } from "react";
 
-import { Link as MuiLink, SvgIcon } from "@mui/material";
-import type { LinkProps as MuiLinkProps } from "@mui/material";
+import {
+  Link as MuiLink,
+  LinkProps as MuiLinkProps,
+  SvgIcon,
+} from "@mui/material";
 
-export interface LinkProps extends MuiLinkProps {
+export type LinkProps = {
+  children: React.ReactNode;
+  href: string;
   icon?: ReactElement;
-}
+  rel?: string;
+  target?: "_self" | "_blank" | "_parent" | "_top" | string;
+  variant?: MuiLinkProps["variant"];
+};
 
 export const Link = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {
-  const { icon, children, target } = props;
+  const { icon, children, target, variant, href, rel } = props;
   return (
-    <MuiLink {...props} ref={ref}>
+    <MuiLink ref={ref} variant={variant} target={target} href={href} rel={rel}>
       {icon && <span className="Link-icon">{icon}</span>}
       {children}
       {target === "_blank" && (

package/src/MenuButton.tsx

@@ -22,7 +22,7 @@ import {
 } from "./";
 import { memo, MouseEvent, ReactElement, useMemo, useState } from "react";
 
-export interface MenuButtonProps {
+export type MenuButtonProps = {
   /**
    * The <MenuItem> components within the Menu.
    */
@@ -41,13 +41,18 @@ export interface MenuButtonProps {
    * The variant of the triggering Button
    */
   buttonVariant?: ButtonProps["variant"];
-}
+  /**
+   * The id of the `input` element.
+   */
+  id?: string;
+};
 
 const MenuButton = ({
   buttonLabel = "",
   children,
   buttonEndIcon = <ChevronDownIcon />,
   buttonVariant = "secondary",
+  id: idOverride,
 }: MenuButtonProps) => {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
 
@@ -61,7 +66,7 @@ const MenuButton = ({
     setAnchorEl(null);
   };
 
-  const uniqueId = useUniqueId();
+  const uniqueId = useUniqueId(idOverride);
 
   const menuListProps = useMemo(
     () => ({ "aria-labelledby": `${uniqueId}-button` }),

package/src/MenuItem.tsx

@@ -45,5 +45,6 @@ const MenuItem = forwardRef<HTMLLIElement, MenuItemProps>(
 );
 
 const MemoizedMenuItem = memo(MenuItem);
+MemoizedMenuItem.displayName = "MenuItem";
 
 export { MemoizedMenuItem as MenuItem };

package/src/MuiPropsChild.tsx

@@ -0,0 +1,41 @@
+/*!
+ * 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 { forwardRef, memo, ReactNode, useMemo } from "react";
+
+import { MuiPropsContext, MuiPropsContextType } from "./MuiPropsContext";
+
+export type MuiPropsChildProps = {
+  children: ReactNode;
+};
+
+const MuiPropsChild = forwardRef<HTMLElement, MuiPropsChildProps>(
+  ({ children, ...muiProps }, ref) => {
+    const providerValue = useMemo<MuiPropsContextType>(
+      () => ({
+        ...muiProps,
+        ref,
+      }),
+      [muiProps, ref]
+    );
+
+    return (
+      <MuiPropsContext.Provider value={providerValue}>
+        {children}
+      </MuiPropsContext.Provider>
+    );
+  }
+);
+
+const MemoizedMuiPropsChild = memo(MuiPropsChild);
+
+export { MemoizedMuiPropsChild as MuiPropsChild };

package/src/MuiPropsContext.ts

@@ -0,0 +1,17 @@
+/*!
+ * 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 { createContext } from "react";
+
+export type MuiPropsContextType = Record<string, unknown>;
+
+export const MuiPropsContext = createContext<MuiPropsContextType>({});

package/src/NativeSelect.tsx

@@ -0,0 +1,107 @@
+/*!
+ * 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 = {
+  children?: ReactElement<"option"> | ReactElement<"optgroup">;
+  defaultValue?: string;
+  errorMessage?: string;
+  hint?: string;
+  id?: string;
+  isDisabled?: boolean;
+  isMultiSelect?: boolean;
+  isOptional?: boolean;
+  label: string;
+  onBlur?: MuiSelectProps["onBlur"];
+  onChange?: MuiSelectProps["onChange"];
+  onFocus?: MuiSelectProps["onFocus"];
+  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/OdysseyI18n.ts

@@ -0,0 +1,101 @@
+/*!
+ * 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 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,
+  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,59 @@
+/*!
+ * 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, ReactElement } from "react";
+
+import { ThemeOptions } from ".";
+import { DesignTokensOverride } from "../src/theme/index";
+import { OdysseyCacheProvider } from "./OdysseyCacheProvider";
+import { OdysseyThemeProvider } from "./OdysseyThemeProvider";
+import {
+  OdysseyTranslationProvider,
+  TranslationOverrides,
+} from "./OdysseyTranslationProvider";
+import { SupportedLanguages } from "./OdysseyTranslationProvider.types";
+
+type OdysseyProviderProps = {
+  children: ReactElement;
+  nonce?: string;
+  themeOverride?: ThemeOptions;
+  designTokensOverride?: DesignTokensOverride;
+  languageCode?: SupportedLanguages;
+  translationOverrides?: TranslationOverrides;
+};
+
+const OdysseyProvider = ({
+  children,
+  nonce,
+  themeOverride,
+  designTokensOverride,
+  languageCode,
+  translationOverrides,
+}: OdysseyProviderProps) => (
+  <OdysseyCacheProvider nonce={nonce}>
+    <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

@@ -13,19 +13,25 @@
 import { ThemeProvider as MuiThemeProvider } from "@mui/material/styles";
 import { memo, ReactElement, useMemo } from "react";
 
-import { createTheme, deepmerge, ThemeOptions } from ".";
-import { odysseyTheme } from "./theme";
+import { createTheme, deepmerge, ThemeOptions, DesignTokensOverride } from ".";
+import { createOdysseyMuiTheme } from "./theme";
+import * as Tokens from "@okta/odyssey-design-tokens";
 
 const OdysseyThemeProvider = ({
   children,
   themeOverride,
+  designTokensOverride,
 }: {
   children: ReactElement;
   themeOverride?: ThemeOptions;
+  designTokensOverride?: DesignTokensOverride;
 }) => {
+  const odysseyTokens = { ...Tokens, ...designTokensOverride };
+  const odysseyTheme = createOdysseyMuiTheme(odysseyTokens);
+
   const customOdysseyTheme = useMemo(
     () => themeOverride && createTheme(deepmerge(odysseyTheme, themeOverride)),
-    [themeOverride]
+    [odysseyTheme, themeOverride]
   );
 
   return (

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 { ReactElement, 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"]>;
+};
+
+type OdysseyTranslationProviderProps = {
+  children: ReactElement;
+  languageCode?: SupportedLanguages;
+  translationOverrides?: TranslationOverrides;
+};
+
+const mergeBundleOverrides = (
+  languageCode: SupportedLanguages,
+  translationOverrides: TranslationOverrides
+) => {
+  const bundle = resources[languageCode];
+  const overrides = translationOverrides[languageCode];
+  return {
+    ...bundle,
+    ...overrides,
+  };
+};
+
+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,42 @@
+/*!
+ * 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
+  "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];