@okta/odyssey-react-mui 1.0.2 → 1.2.0

package/src/Form.tsx

@@ -17,6 +17,7 @@ import { Button } from "./Button";
 import { Callout } from "./Callout";
 import { Heading4, Support } from "./Typography";
 import { useUniqueId } from "./useUniqueId";
+import type { SeleniumProps } from "./SeleniumProps";
 
 export const formEncodingTypeValues = [
   "application/x-www-form-urlencoded",
@@ -84,7 +85,7 @@ export type FormProps = {
    * The title of the Form
    */
   title?: string;
-};
+} & SeleniumProps;
 
 const Form = ({
   alert,
@@ -98,20 +99,22 @@ const Form = ({
   name,
   noValidate = false,
   target,
+  testId,
   title,
 }: FormProps) => {
   const id = useUniqueId(idOverride);
 
   return (
     <Box
-      component="form"
       autoComplete={autoCompleteType}
-      name={name}
+      component="form"
+      data-se={testId}
       encType={encodingType}
+      id={id}
       method={method}
+      name={name}
       noValidate={noValidate}
       target={target}
-      id={id}
       sx={{
         maxWidth: (theme) => theme.mixins.maxWidth,
         margin: (theme) => theme.spacing(0),

package/src/Link.tsx

@@ -12,6 +12,7 @@
 
 import { memo, ReactElement } from "react";
 import { ExternalLinkIcon } from "./icons.generated";
+import type { SeleniumProps } from "./SeleniumProps";
 
 import { Link as MuiLink } from "@mui/material";
 
@@ -47,10 +48,24 @@ export type LinkProps = {
    * The visual presentation of the Link (default or monochrome)
    */
   variant?: (typeof linkVariantValues)[number];
-};
+} & SeleniumProps;
 
-const Link = ({ children, href, icon, target, rel, variant }: LinkProps) => (
-  <MuiLink href={href} rel={rel} target={target} variant={variant}>
+const Link = ({
+  children,
+  href,
+  icon,
+  rel,
+  target,
+  testId,
+  variant,
+}: LinkProps) => (
+  <MuiLink
+    data-se={testId}
+    href={href}
+    rel={rel}
+    target={target}
+    variant={variant}
+  >
     {icon && <span className="Link-icon">{icon}</span>}
 
     {children}

package/src/MenuButton.tsx

@@ -10,13 +10,20 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { Button, buttonVariantValues, MenuItem, useUniqueId } from "./";
+import {
+  Button,
+  buttonSizeValues,
+  buttonVariantValues,
+  MenuItem,
+  useUniqueId,
+} from "./";
 import { Divider, ListSubheader, Menu } from "@mui/material";
-import { ChevronDownIcon } from "./icons.generated";
+import { ChevronDownIcon, MoreIcon } from "./icons.generated";
 import { memo, type ReactElement, useCallback, useMemo, useState } from "react";
 
 import { MenuContext, MenuContextType } from "./MenuContext";
 import { NullElement } from "./NullElement";
+import type { SeleniumProps } from "./SeleniumProps";
 
 export type MenuButtonProps = {
   /**
@@ -55,6 +62,14 @@ export type MenuButtonProps = {
    * The id of the Button
    */
   id?: string;
+  /**
+   * If the MenuButton is an overflow menu or standard menu.
+   */
+  isOverflow?: boolean;
+  /**
+   * The size of the button
+   */
+  size?: (typeof buttonSizeValues)[number];
   /**
    * The tooltip text for the Button if it's icon-only
    */
@@ -75,7 +90,8 @@ export type MenuButtonProps = {
       ariaLabelledBy: string;
       buttonLabel?: undefined | "";
     }
-);
+) &
+  SeleniumProps;
 
 const MenuButton = ({
   ariaLabel,
@@ -84,8 +100,11 @@ const MenuButton = ({
   buttonLabel = "",
   buttonVariant = "secondary",
   children,
-  endIcon = <ChevronDownIcon />,
+  endIcon: endIconProp,
   id: idOverride,
+  isOverflow,
+  size,
+  testId,
   tooltipText,
 }: MenuButtonProps) => {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
@@ -115,6 +134,14 @@ const MenuButton = ({
     [closeMenu, openMenu]
   );
 
+  const endIcon = endIconProp ? (
+    endIconProp
+  ) : isOverflow ? (
+    <MoreIcon />
+  ) : (
+    <ChevronDownIcon />
+  );
+
   return (
     <div>
       <Button
@@ -124,10 +151,12 @@ const MenuButton = ({
         ariaDescribedBy={ariaDescribedBy}
         ariaLabel={ariaLabel}
         ariaLabelledBy={ariaLabelledBy}
+        data-se={testId}
         endIcon={endIcon}
         id={`${uniqueId}-button`}
         label={buttonLabel}
         onClick={openMenu}
+        size={size}
         tooltipText={tooltipText}
         variant={buttonVariant}
       />

package/src/MenuItem.tsx

@@ -18,6 +18,7 @@ import { menuItemClasses } from "@mui/material/MenuItem";
 import { memo, useCallback, useContext, type ReactNode } from "react";
 
 import { MenuContext } from "./MenuContext";
+import type { SeleniumProps } from "./SeleniumProps";
 
 export type MenuItemProps = {
   /**
@@ -33,9 +34,9 @@ export type MenuItemProps = {
    */
   isSelected?: boolean;
   /**
-   * If `true`, the menu item will be visually marked as destructive.
+   * If `true`, the menu item will be visually marked as disabled.
    */
-  isDestructive?: boolean;
+  isDisabled?: boolean;
   /**
    * Callback fired when the menu item is clicked.
    */
@@ -50,13 +51,15 @@ export type MenuItemProps = {
    * - "destructive": A variant indicating a destructive action.
    */
   variant?: "default" | "destructive";
-};
+} & SeleniumProps;
 
 const MenuItem = ({
   children,
   hasInitialFocus,
   isSelected,
+  isDisabled,
   onClick: onClickProp,
+  testId,
   value,
   variant = "default",
 }: MenuItemProps) => {
@@ -74,14 +77,16 @@ const MenuItem = ({
     <MuiMenuItem
       /* eslint-disable-next-line jsx-a11y/no-autofocus */
       autoFocus={hasInitialFocus}
-      selected={isSelected}
-      value={value}
-      onClick={onClick}
       className={
         variant === "destructive"
           ? `${menuItemClasses.root}-destructive`
           : undefined
       }
+      data-se={testId}
+      disabled={isDisabled}
+      onClick={onClick}
+      selected={isSelected}
+      value={value}
     >
       {children}
     </MuiMenuItem>

package/src/NativeSelect.tsx

@@ -15,6 +15,8 @@ import { Select as MuiSelect } from "@mui/material";
 import { SelectProps as MuiSelectProps } from "@mui/material";
 import { Field } from "./Field";
 
+import type { SeleniumProps } from "./SeleniumProps";
+
 export type NativeSelectOption = {
   text: string;
   value?: string;
@@ -74,7 +76,7 @@ export type NativeSelectProps = {
    * The value or values selected in the NativeSelect
    */
   value?: string | string[];
-};
+} & SeleniumProps;
 
 const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
   (
@@ -90,6 +92,7 @@ const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
       onBlur,
       onChange,
       onFocus,
+      testId,
       value,
       children,
     },
@@ -98,6 +101,7 @@ const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
     const renderFieldComponent = useCallback(
       () => (
         <MuiSelect
+          data-se={testId}
           defaultValue={defaultValue}
           id={idOverride}
           name={idOverride}
@@ -112,6 +116,7 @@ const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
         />
       ),
       [
+        children,
         defaultValue,
         idOverride,
         isMultiSelect,
@@ -119,7 +124,7 @@ const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
         onChange,
         onFocus,
         ref,
-        children,
+        testId,
         value,
       ]
     );

package/src/OdysseyCacheProvider.tsx

@@ -24,12 +24,18 @@ import { useUniqueAlphabeticalId } from "./useUniqueAlphabeticalId";
 
 export type OdysseyCacheProviderProps = {
   children: ReactNode;
+  /**
+   * Emotion renders into this HTML element.
+   * When enabling this prop, Emotion renders at the top of this component rather than the bottom like it does in the HTML `<head>`.
+   */
+  emotionRootElement?: HTMLStyleElement;
   nonce?: string;
   stylisPlugins?: StylisPlugin[];
 };
 
 const OdysseyCacheProvider = ({
   children,
+  emotionRootElement,
   nonce,
   stylisPlugins,
 }: OdysseyCacheProviderProps) => {
@@ -38,11 +44,13 @@ const OdysseyCacheProvider = ({
   const emotionCache = useMemo(
     () =>
       createCache({
+        container: emotionRootElement,
         key: uniqueAlphabeticalId,
         nonce: nonce || window.cspNonce,
+        prepend: Boolean(emotionRootElement),
         stylisPlugins,
       }),
-    [nonce, stylisPlugins, uniqueAlphabeticalId]
+    [emotionRootElement, nonce, stylisPlugins, uniqueAlphabeticalId]
   );
 
   return <CacheProvider value={emotionCache}>{children}</CacheProvider>;

package/src/OdysseyProvider.tsx

@@ -11,6 +11,7 @@
  */
 
 import { memo, ReactNode } from "react";
+import { ScopedCssBaseline } from "@mui/material";
 
 import {
   OdysseyCacheProvider,
@@ -34,23 +35,32 @@ export type OdysseyProviderProps = OdysseyCacheProviderProps &
 const OdysseyProvider = ({
   children,
   designTokensOverride,
+  emotionRootElement,
+  shadowRootElement,
   languageCode,
   nonce,
   stylisPlugins,
   themeOverride,
   translationOverrides,
 }: OdysseyProviderProps) => (
-  <OdysseyCacheProvider nonce={nonce} stylisPlugins={stylisPlugins}>
+  <OdysseyCacheProvider
+    emotionRootElement={emotionRootElement}
+    nonce={nonce}
+    stylisPlugins={stylisPlugins}
+  >
     <OdysseyThemeProvider
-      themeOverride={themeOverride}
       designTokensOverride={designTokensOverride}
+      shadowRootElement={shadowRootElement}
+      themeOverride={themeOverride}
     >
-      <OdysseyTranslationProvider
-        languageCode={languageCode}
-        translationOverrides={translationOverrides}
-      >
-        {children}
-      </OdysseyTranslationProvider>
+      <ScopedCssBaseline>
+        <OdysseyTranslationProvider
+          languageCode={languageCode}
+          translationOverrides={translationOverrides}
+        >
+          {children}
+        </OdysseyTranslationProvider>
+      </ScopedCssBaseline>
     </OdysseyThemeProvider>
   </OdysseyCacheProvider>
 );

package/src/OdysseyThemeProvider.tsx

@@ -16,7 +16,7 @@ import {
 } from "@mui/material/styles";
 import { memo, ReactNode, useMemo } from "react";
 
-import { ScopedCssBaseline, ThemeOptions } from "@mui/material";
+import { ThemeOptions } from "@mui/material";
 import { deepmerge } from "@mui/utils";
 import { createOdysseyMuiTheme, DesignTokensOverride } from "./theme";
 import * as Tokens from "@okta/odyssey-design-tokens";
@@ -25,12 +25,14 @@ import { OdysseyDesignTokensContext } from "./OdysseyDesignTokensContext";
 export type OdysseyThemeProviderProps = {
   children: ReactNode;
   designTokensOverride?: DesignTokensOverride;
+  shadowRootElement?: HTMLDivElement;
   themeOverride?: ThemeOptions;
 };
 
 const OdysseyThemeProvider = ({
   children,
   designTokensOverride,
+  shadowRootElement,
   themeOverride,
 }: OdysseyThemeProviderProps) => {
   const odysseyTokens = useMemo(
@@ -38,8 +40,12 @@ const OdysseyThemeProvider = ({
     [designTokensOverride]
   );
   const odysseyTheme = useMemo(
-    () => createOdysseyMuiTheme(odysseyTokens),
-    [odysseyTokens]
+    () =>
+      createOdysseyMuiTheme({
+        odysseyTokens,
+        shadowRootElement,
+      }),
+    [odysseyTokens, shadowRootElement]
   );
 
   const customOdysseyTheme = useMemo(
@@ -49,11 +55,9 @@ const OdysseyThemeProvider = ({
 
   return (
     <MuiThemeProvider theme={customOdysseyTheme ?? odysseyTheme}>
-      <ScopedCssBaseline>
-        <OdysseyDesignTokensContext.Provider value={odysseyTokens}>
-          {children}
-        </OdysseyDesignTokensContext.Provider>
-      </ScopedCssBaseline>
+      <OdysseyDesignTokensContext.Provider value={odysseyTokens}>
+        {children}
+      </OdysseyDesignTokensContext.Provider>
     </MuiThemeProvider>
   );
 };

package/src/OdysseyTranslationProvider.test.tsx

@@ -12,14 +12,14 @@
 
 import { render, screen } from "@testing-library/react";
 import { OdysseyTranslationProvider } from "./OdysseyTranslationProvider";
-import i18n from "./OdysseyI18n";
+import { odysseyTranslate } from "./i18n";
 import { TextField } from "./TextField";
 
 describe("OdysseyTranslationProvider", () => {
   it("defaults to 'en' translation bundle", () => {
     render(
       <OdysseyTranslationProvider>
-        <span>{i18n.t("fieldlabel.optional.text")}</span>
+        <span>{odysseyTranslate("fieldlabel.optional.text")}</span>
       </OdysseyTranslationProvider>
     );
 

package/src/OdysseyTranslationProvider.tsx

@@ -14,7 +14,7 @@ import { ReactNode, useEffect } from "react";
 
 import { SupportedLanguages } from "./OdysseyTranslationProvider.types";
 
-import i18n, { defaultNS, resources } from "./OdysseyI18n";
+import { i18n, defaultNS, resources } from "./i18n";
 import { I18nextProvider } from "react-i18next";
 
 export type TranslationOverrides = {

package/src/OdysseyTranslationProvider.types.ts

@@ -37,6 +37,7 @@ export const supportedLanguages = [
   "th", // Thai
   "tr", // Turkish
   "uk", // Ukrainian
+  "vi", // Vietnamese
   "zh_CN", // Chinese (PRC)
   "zh_TW", // Chinese
 ] as const;

package/src/PasswordField.tsx

@@ -10,7 +10,7 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { InputAdornment, InputBase } from "@mui/material";
+import { InputAdornment, InputBase, IconButton } from "@mui/material";
 import {
   ChangeEventHandler,
   FocusEventHandler,
@@ -21,8 +21,9 @@ import {
 } from "react";
 
 import { ShowIcon, HideIcon } from "./icons.generated";
-import { Button } from "./Button";
 import { Field } from "./Field";
+import type { SeleniumProps } from "./SeleniumProps";
+import { useTranslation } from "react-i18next";
 
 export type PasswordFieldProps = {
   /**
@@ -39,6 +40,10 @@ export type PasswordFieldProps = {
    * If `true`, the component will receive focus automatically.
    */
   hasInitialFocus?: boolean;
+  /**
+   * If `true`, the show/hide icon is not shown to the user
+   */
+  hasShowPassword?: boolean;
   /**
    * The helper text content.
    */
@@ -63,6 +68,10 @@ export type PasswordFieldProps = {
    * The label for the `input` element.
    */
   label: string;
+  /**
+   * The name of the `input` element. Defaults to the `id` if not set.
+   */
+  name?: string;
   /**
    * Callback fired when the `input` element loses focus.
    */
@@ -83,7 +92,7 @@ export type PasswordFieldProps = {
    * The value of the `input` element, required for a controlled component.
    */
   value?: string;
-};
+} & SeleniumProps;
 
 const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
   (
@@ -95,16 +104,20 @@ const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
       id: idOverride,
       isDisabled = false,
       isOptional = false,
+      hasShowPassword = true,
       isReadOnly,
       label,
+      name: nameOverride,
       onChange,
       onFocus,
       onBlur,
       placeholder,
+      testId,
       value,
     },
     ref
   ) => {
+    const { t } = useTranslation();
     const [inputType, setInputType] = useState("password");
 
     const togglePasswordVisibility = useCallback(() => {
@@ -120,19 +133,26 @@ const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
           autoComplete={autoCompleteType}
           /* eslint-disable-next-line jsx-a11y/no-autofocus */
           autoFocus={hasInitialFocus}
+          data-se={testId}
           endAdornment={
-            <InputAdornment position="end">
-              <Button
-                ariaLabel="toggle password visibility"
-                endIcon={inputType === "password" ? <ShowIcon /> : <HideIcon />}
-                onClick={togglePasswordVisibility}
-                size="small"
-                variant="floating"
-              />
-            </InputAdornment>
+            hasShowPassword && (
+              <InputAdornment position="end">
+                <IconButton
+                  aria-label={
+                    inputType === "password"
+                      ? t("passwordfield.icon.label.show")
+                      : t("passwordfield.icon.label.hide")
+                  }
+                  onClick={togglePasswordVisibility}
+                >
+                  {inputType === "password" ? <ShowIcon /> : <HideIcon />}
+                </IconButton>
+              </InputAdornment>
+            )
           }
           id={id}
-          name={id}
+          inputProps={{ role: "textbox" }}
+          name={nameOverride ?? id}
           onChange={onChange}
           onFocus={onFocus}
           onBlur={onBlur}
@@ -147,15 +167,19 @@ const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
       [
         autoCompleteType,
         hasInitialFocus,
+        t,
         togglePasswordVisibility,
         inputType,
+        nameOverride,
         onChange,
         onFocus,
         onBlur,
         placeholder,
         isOptional,
         isReadOnly,
+        hasShowPassword,
         ref,
+        testId,
         value,
       ]
     );

package/src/Radio.tsx

@@ -15,6 +15,8 @@ import { memo } from "react";
 
 import { FormControlLabel } from "@mui/material";
 
+import type { SeleniumProps } from "./SeleniumProps";
+
 export type RadioProps = {
   /**
    * If `true`, the Radio is selected
@@ -40,7 +42,7 @@ export type RadioProps = {
    * The value attribute of the Radio
    */
   value: string;
-};
+} & SeleniumProps;
 
 const Radio = ({
   isChecked,
@@ -48,12 +50,14 @@ const Radio = ({
   isInvalid,
   label,
   name,
+  testId,
   value,
 }: RadioProps) => (
   <FormControlLabel
     checked={isChecked}
     className={isInvalid ? "Mui-error" : ""}
     control={<MuiRadio />}
+    data-se={testId}
     disabled={isDisabled}
     label={label}
     name={name}

package/src/RadioGroup.tsx

@@ -15,6 +15,7 @@ import { ChangeEventHandler, memo, ReactElement, useCallback } from "react";
 
 import { Radio, RadioProps } from "./Radio";
 import { Field } from "./Field";
+import type { SeleniumProps } from "./SeleniumProps";
 
 export type RadioGroupProps = {
   /**
@@ -34,7 +35,7 @@ export type RadioGroupProps = {
    */
   hint?: string;
   /**
-   * The id of the `input` element. This will also be the input's `name` field.
+   * The id of the `input` element.
    */
   id?: string;
   /**
@@ -45,6 +46,10 @@ export type RadioGroupProps = {
    * The text label for the RadioGroup
    */
   label: string;
+  /**
+   * The name of the `input` element. Defaults to the `id` if not set.
+   */
+  name?: string;
   /**
    * Listen for changes in the browser that change `value`
    */
@@ -53,7 +58,7 @@ export type RadioGroupProps = {
    * The `value` on the selected Radio
    */
   value?: RadioProps["value"];
-};
+} & SeleniumProps;
 
 const RadioGroup = ({
   children,
@@ -63,23 +68,26 @@ const RadioGroup = ({
   id: idOverride,
   isDisabled,
   label,
+  name: nameOverride,
   onChange,
+  testId,
   value,
 }: RadioGroupProps) => {
   const renderFieldComponent = useCallback(
     ({ ariaDescribedBy, id }) => (
       <MuiRadioGroup
         aria-describedby={ariaDescribedBy}
+        data-se={testId}
         defaultValue={defaultValue}
         id={id}
-        name={id}
+        name={nameOverride ?? id}
         onChange={onChange}
         value={value}
       >
         {children}
       </MuiRadioGroup>
     ),
-    [children, defaultValue, onChange, value]
+    [children, defaultValue, nameOverride, onChange, testId, value]
   );
 
   return (