@okta/odyssey-react-mui 0.24.0 → 1.0.1

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

@@ -28,17 +28,19 @@ 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 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 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 { 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,
@@ -63,17 +65,19 @@ export const resources = {
   ko,
   ms,
   nb,
-  "nl-NL": nlNL,
+  nl_NL: nlNL,
+  ok_PL: okPL,
+  ok_SK: okSK,
   pl,
-  "pt-BR": ptBR,
+  pt_BR: ptBR,
   ro,
   ru,
   sv,
   th,
   tr,
   uk,
-  "zh-CN": zhCN,
-  "zh-TW": znTW,
+  zh_CN: zhCN,
+  zh_TW: znTW,
 };
 
 i18n.use(initReactI18next).init({

package/src/OdysseyProvider.tsx

@@ -10,36 +10,37 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { memo, ReactElement } from "react";
+import { memo, ReactNode } from "react";
 
-import { ThemeOptions } from ".";
-import { DesignTokensOverride } from "../src/theme/index";
-import { OdysseyCacheProvider } from "./OdysseyCacheProvider";
-import { OdysseyThemeProvider } from "./OdysseyThemeProvider";
+import {
+  OdysseyCacheProvider,
+  OdysseyCacheProviderProps,
+} from "./OdysseyCacheProvider";
+import {
+  OdysseyThemeProvider,
+  OdysseyThemeProviderProps,
+} from "./OdysseyThemeProvider";
 import {
   OdysseyTranslationProvider,
-  TranslationOverrides,
+  OdysseyTranslationProviderProps,
 } from "./OdysseyTranslationProvider";
-import { SupportedLanguages } from "./OdysseyTranslationProvider.types";
 
-type OdysseyProviderProps = {
-  children: ReactElement;
-  nonce?: string;
-  themeOverride?: ThemeOptions;
-  designTokensOverride?: DesignTokensOverride;
-  languageCode?: SupportedLanguages;
-  translationOverrides?: TranslationOverrides;
-};
+export type OdysseyProviderProps = OdysseyCacheProviderProps &
+  OdysseyThemeProviderProps &
+  OdysseyTranslationProviderProps & {
+    children: ReactNode;
+  };
 
 const OdysseyProvider = ({
   children,
-  nonce,
-  themeOverride,
   designTokensOverride,
   languageCode,
+  nonce,
+  stylisPlugins,
+  themeOverride,
   translationOverrides,
 }: OdysseyProviderProps) => (
-  <OdysseyCacheProvider nonce={nonce}>
+  <OdysseyCacheProvider nonce={nonce} stylisPlugins={stylisPlugins}>
     <OdysseyThemeProvider
       themeOverride={themeOverride}
       designTokensOverride={designTokensOverride}

package/src/OdysseyThemeProvider.tsx

@@ -10,24 +10,37 @@
  * 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, DesignTokensOverride } from ".";
-import { createOdysseyMuiTheme } 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,
-  themeOverride,
   designTokensOverride,
-}: {
-  children: ReactElement;
-  themeOverride?: ThemeOptions;
-  designTokensOverride?: DesignTokensOverride;
-}) => {
-  const odysseyTokens = { ...Tokens, ...designTokensOverride };
-  const odysseyTheme = createOdysseyMuiTheme(odysseyTokens);
+  themeOverride,
+}: OdysseyThemeProviderProps) => {
+  const odysseyTokens = useMemo(
+    () => ({ ...Tokens, ...designTokensOverride }),
+    [designTokensOverride]
+  );
+  const odysseyTheme = useMemo(
+    () => createOdysseyMuiTheme(odysseyTokens),
+    [odysseyTokens]
+  );
 
   const customOdysseyTheme = useMemo(
     () => themeOverride && createTheme(deepmerge(odysseyTheme, themeOverride)),
@@ -36,7 +49,11 @@ const OdysseyThemeProvider = ({
 
   return (
     <MuiThemeProvider theme={customOdysseyTheme ?? odysseyTheme}>
-      {children}
+      <ScopedCssBaseline>
+        <OdysseyDesignTokensContext.Provider value={odysseyTokens}>
+          {children}
+        </OdysseyDesignTokensContext.Provider>
+      </ScopedCssBaseline>
     </MuiThemeProvider>
   );
 };

package/src/OdysseyTranslationProvider.tsx

@@ -10,7 +10,7 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { ReactElement, useEffect } from "react";
+import { ReactNode, useEffect } from "react";
 
 import { SupportedLanguages } from "./OdysseyTranslationProvider.types";
 
@@ -21,12 +21,6 @@ export type TranslationOverrides = {
   [key in SupportedLanguages]?: Partial<(typeof resources)["en"]>;
 };
 
-type OdysseyTranslationProviderProps = {
-  children: ReactElement;
-  languageCode?: SupportedLanguages;
-  translationOverrides?: TranslationOverrides;
-};
-
 const mergeBundleOverrides = (
   languageCode: SupportedLanguages,
   translationOverrides: TranslationOverrides
@@ -39,6 +33,12 @@ const mergeBundleOverrides = (
   };
 };
 
+export type OdysseyTranslationProviderProps = {
+  children: ReactNode;
+  languageCode?: SupportedLanguages;
+  translationOverrides?: TranslationOverrides;
+};
+
 export const OdysseyTranslationProvider = ({
   children,
   languageCode,

package/src/OdysseyTranslationProvider.types.ts

@@ -26,17 +26,19 @@ export const supportedLanguages = [
   "ko", // Korean
   "ms", // Malaysian
   "nb", // Norwegian
-  "nl-NL", // Dutch
+  "nl_NL", // Dutch
+  "ok_PL", // (Test Language) Pseudo-loc
+  "ok_SK", // (Test Language) Show Keys
   "pl", // Polish
-  "pt-BR", // Portuguese (Brazil)
+  "pt_BR", // Portuguese (Brazil)
   "ro", // Romanian
   "ru", // Russian
   "sv", // Swedish
   "th", // Thai
   "tr", // Turkish
   "uk", // Ukrainian
-  "zh-CN", // Chinese (PRC)
-  "zh-TW", // Chinese
+  "zh_CN", // Chinese (PRC)
+  "zh_TW", // Chinese
 ] as const;
 
 export type SupportedLanguages = (typeof supportedLanguages)[number];

package/src/PasswordField.tsx

@@ -20,7 +20,8 @@ import {
   useState,
 } from "react";
 
-import { EyeIcon, EyeOffIcon, IconButton } from "./";
+import { ShowIcon, HideIcon } from "./icons.generated";
+import { Button } from "./Button";
 import { Field } from "./Field";
 
 export type PasswordFieldProps = {
@@ -121,13 +122,13 @@ const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
           autoFocus={hasInitialFocus}
           endAdornment={
             <InputAdornment position="end">
-              <IconButton
-                aria-label="toggle password visibility"
-                edge="end"
+              <Button
+                ariaLabel="toggle password visibility"
+                endIcon={inputType === "password" ? <ShowIcon /> : <HideIcon />}
                 onClick={togglePasswordVisibility}
-              >
-                {inputType === "password" ? <EyeIcon /> : <EyeOffIcon />}
-              </IconButton>
+                size="small"
+                variant="floating"
+              />
             </InputAdornment>
           }
           id={id}

package/src/Radio.tsx

@@ -13,32 +13,47 @@
 import { Radio as MuiRadio } from "@mui/material";
 import { memo } from "react";
 
-import { FormControlLabel } from ".";
+import { FormControlLabel } from "@mui/material";
 
 export type RadioProps = {
+  /**
+   * If `true`, the Radio is selected
+   */
   isChecked?: boolean;
-  isDefaultChecked?: boolean;
+  /**
+   * If `true`, the Radio is disabled
+   */
   isDisabled?: boolean;
-  hasError?: boolean;
+  /**
+   * If `true`, the Radio has an invalid value
+   */
+  isInvalid?: boolean;
+  /**
+   * The label text for the Radio
+   */
   label: string;
+  /**
+   * The name attribute of the Radio
+   */
   name?: string;
+  /**
+   * The value attribute of the Radio
+   */
   value: string;
 };
 
 const Radio = ({
   isChecked,
-  isDefaultChecked,
   isDisabled,
-  hasError,
+  isInvalid,
   label,
   name,
   value,
 }: RadioProps) => (
   <FormControlLabel
     checked={isChecked}
-    className={hasError ? "Mui-error" : ""}
+    className={isInvalid ? "Mui-error" : ""}
     control={<MuiRadio />}
-    defaultChecked={isDefaultChecked}
     disabled={isDisabled}
     label={label}
     name={name}
@@ -47,5 +62,6 @@ const Radio = ({
 );
 
 const MemoizedRadio = memo(Radio);
+MemoizedRadio.displayName = "Radio";
 
 export { MemoizedRadio as Radio };

package/src/RadioGroup.tsx

@@ -18,15 +18,15 @@ import { Field } from "./Field";
 
 export type RadioGroupProps = {
   /**
-   * The <Radio> components within the group. Must include two or more.
+   * The Radio components within the group. Must include two or more.
    */
   children: Array<ReactElement<typeof Radio>>;
   /**
-   * The text value of the radio that should be selected by default
+   * The text value of the Radio that should be selected by default
    */
   defaultValue?: string;
   /**
-   * The error text for an invalid group
+   * The error text for an invalid RadioGroup
    */
   errorMessage?: string;
   /**
@@ -38,19 +38,19 @@ export type RadioGroupProps = {
    */
   id?: string;
   /**
-   * Disables the whole radio group
+   * Disables the whole RadioGroup
    */
   isDisabled?: boolean;
   /**
-   * The text label for the radio group
+   * The text label for the RadioGroup
    */
   label: string;
   /**
-   * Listen for changes in the browser that change `value`.
+   * Listen for changes in the browser that change `value`
    */
   onChange?: ChangeEventHandler<EventTarget>;
   /**
-   * The `value` on the selected radio button.
+   * The `value` on the selected Radio
    */
   value?: RadioProps["value"];
 };
@@ -97,5 +97,6 @@ const RadioGroup = ({
 };
 
 const MemoizedRadioGroup = memo(RadioGroup);
+MemoizedRadioGroup.displayName = "RadioGroup";
 
 export { MemoizedRadioGroup as RadioGroup };

package/src/ScreenReaderText.tsx

@@ -11,7 +11,8 @@
  */
 
 import { memo, ReactNode } from "react";
-import { Box, visuallyHidden } from "./";
+import { Box } from "@mui/material";
+import { visuallyHidden } from "@mui/utils";
 
 export type ScreenReaderTextProps = {
   /**
@@ -28,9 +29,12 @@ export type ScreenReaderTextProps = {
 const style = { ...visuallyHidden };
 
 const ScreenReaderText = ({ children }: ScreenReaderTextProps) => (
-  <Box sx={style}>{children}</Box>
+  <Box sx={style} component="span">
+    {children}
+  </Box>
 );
 
 const MemoizedScreenReaderText = memo(ScreenReaderText);
+MemoizedScreenReaderText.displayName = "ScreenReaderText";
 
 export { MemoizedScreenReaderText as ScreenReaderText };

package/src/SearchField.tsx

@@ -10,6 +10,7 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
+import { useState, useEffect } from "react";
 import { InputAdornment, InputBase } from "@mui/material";
 import {
   ChangeEventHandler,
@@ -20,8 +21,9 @@ import {
   useCallback,
 } from "react";
 
-import { SearchIcon } from "./";
+import { CloseCircleFilledIcon, SearchIcon } from "./icons.generated";
 import { Field } from "./Field";
+import { Button } from "./Button";
 
 export type SearchFieldProps = {
   /**
@@ -50,6 +52,10 @@ export type SearchFieldProps = {
    * Callback fired when the `input` element loses focus.
    */
   onBlur?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+  /**
+   * Callback fired when the clear button is pressed.
+   */
+  onClear?: () => void;
   /**
    * Callback fired when the value is changed.
    */
@@ -76,14 +82,37 @@ const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
       id: idOverride,
       isDisabled = false,
       label,
-      onChange,
+      onChange: onChangeProp,
       onFocus,
       onBlur,
+      onClear: onClearProp,
       placeholder,
-      value,
+      value: controlledValue,
     },
     ref
   ) => {
+    const [uncontrolledValue, setUncontrolledValue] = useState("");
+
+    const onChange: ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement> =
+      useCallback(
+        (event) => {
+          setUncontrolledValue(event.currentTarget.value);
+          onChangeProp?.(event);
+        },
+        [onChangeProp]
+      );
+
+    const onClear = useCallback(() => {
+      setUncontrolledValue("");
+      onClearProp?.();
+    }, [onClearProp]);
+
+    useEffect(() => {
+      if (controlledValue !== undefined) {
+        setUncontrolledValue(controlledValue);
+      }
+    }, [controlledValue]);
+
     const renderFieldComponent = useCallback(
       ({ ariaDescribedBy, id }) => (
         <InputBase
@@ -91,6 +120,21 @@ const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
           autoComplete={autoCompleteType}
           /* eslint-disable-next-line jsx-a11y/no-autofocus */
           autoFocus={hasInitialFocus}
+          endAdornment={
+            uncontrolledValue && (
+              <InputAdornment position="end">
+                <Button
+                  ariaLabel="Clear"
+                  isDisabled={isDisabled}
+                  label=""
+                  onClick={onClear}
+                  size="small"
+                  startIcon={<CloseCircleFilledIcon />}
+                  variant="floating"
+                />
+              </InputAdornment>
+            )
+          }
           id={id}
           name={id}
           onChange={onChange}
@@ -104,18 +148,23 @@ const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
             </InputAdornment>
           }
           type="search"
-          value={value}
+          value={
+            controlledValue === undefined ? uncontrolledValue : controlledValue
+          }
         />
       ),
       [
         autoCompleteType,
         hasInitialFocus,
+        isDisabled,
+        onClear,
         onChange,
         onFocus,
         onBlur,
         placeholder,
         ref,
-        value,
+        controlledValue,
+        uncontrolledValue,
       ]
     );
 
@@ -134,5 +183,6 @@ const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
 );
 
 const MemoizedSearchField = memo(SearchField);
+MemoizedSearchField.displayName = "SearchField";
 
 export { MemoizedSearchField as SearchField };

package/src/Select.tsx

@@ -25,22 +25,58 @@ import { Field } from "./Field";
 
 export type SelectOption = {
   text: string;
-  value?: string;
   type?: "heading" | "option";
+  value?: string;
 };
 
 export type SelectProps = {
+  /**
+   * The error message for the Select
+   */
   errorMessage?: string;
+  /**
+   * The hint text for the Select
+   */
   hint?: string;
+  /**
+   * The id attribute of the Select
+   */
   id?: string;
+  /**
+   * If `true`, the Select is disabled
+   */
   isDisabled?: boolean;
+  /**
+   * If `true`, the Select allows multiple selections
+   */
   isMultiSelect?: boolean;
+  /**
+   * If `true`, the Select is optional
+   */
   isOptional?: boolean;
+  /**
+   * The label text for the Select
+   */
   label: string;
+  /**
+   * Callback fired when the Select loses focus
+   */
   onBlur?: MuiSelectProps["onBlur"];
+  /**
+   * Callback fired when the value of the Select changes
+   */
   onChange?: MuiSelectProps["onChange"];
+  /**
+   * Callback fired when the Select gains focus
+   */
   onFocus?: MuiSelectProps["onFocus"];
+  /**
+   * The options for the Select
+   */
   options: (string | SelectOption)[];
+  /**
+   * The value or values selected in the Select
+   */
   value?: string | string[];
 };
 
@@ -169,7 +205,7 @@ const Select = forwardRef<HTMLSelectElement, SelectProps>(
       return (
         <MenuItem key={option.value} value={option.value}>
           {isMultiSelect && (
-            <Checkbox isChecked={selectedValue.includes(option.value)} />
+            <Checkbox isDefaultChecked={selectedValue.includes(option.value)} />
           )}
           {option.text}
         </MenuItem>
@@ -179,16 +215,17 @@ const Select = forwardRef<HTMLSelectElement, SelectProps>(
     const renderFieldComponent = useCallback(
       () => (
         <MuiSelect
+          children={children}
           id={idOverride}
-          name={idOverride}
           multiple={isMultiSelect}
+          name={idOverride}
           onBlur={onBlur}
           onChange={onChange}
           onFocus={onFocus}
           ref={ref}
-          children={children}
           renderValue={isMultiSelect ? renderValue : undefined}
           value={selectedValue}
+          labelId={label}
         />
       ),
       [
@@ -201,6 +238,7 @@ const Select = forwardRef<HTMLSelectElement, SelectProps>(
         children,
         renderValue,
         selectedValue,
+        label,
       ]
     );