@okta/odyssey-react-mui 1.0.2 → 1.1.1

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/OdysseyI18n.ts

@@ -39,6 +39,7 @@ 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 vi } from "./properties/ts/odyssey-react-mui_vi";
 import { translation as zhCN } from "./properties/ts/odyssey-react-mui_zh_CN";
 import { translation as znTW } from "./properties/ts/odyssey-react-mui_zh_TW";
 
@@ -76,6 +77,7 @@ export const resources = {
   th,
   tr,
   uk,
+  vi,
   zh_CN: zhCN,
   zh_TW: znTW,
 };

package/src/OdysseyProvider.tsx

@@ -11,6 +11,7 @@
  */
 
 import { memo, ReactNode } from "react";
+import { ScopedCssBaseline } from "@mui/material";
 
 import {
   OdysseyCacheProvider,
@@ -45,12 +46,14 @@ const OdysseyProvider = ({
       themeOverride={themeOverride}
       designTokensOverride={designTokensOverride}
     >
-      <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";
@@ -49,11 +49,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.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,8 @@ import {
 } from "react";
 
 import { ShowIcon, HideIcon } from "./icons.generated";
-import { Button } from "./Button";
 import { Field } from "./Field";
+import type { SeleniumProps } from "./SeleniumProps";
 
 export type PasswordFieldProps = {
   /**
@@ -63,6 +63,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 +87,7 @@ export type PasswordFieldProps = {
    * The value of the `input` element, required for a controlled component.
    */
   value?: string;
-};
+} & SeleniumProps;
 
 const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
   (
@@ -97,10 +101,12 @@ const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
       isOptional = false,
       isReadOnly,
       label,
+      name: nameOverride,
       onChange,
       onFocus,
       onBlur,
       placeholder,
+      testId,
       value,
     },
     ref
@@ -120,19 +126,19 @@ 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 />}
+              <IconButton
+                aria-label="toggle password visibility"
                 onClick={togglePasswordVisibility}
-                size="small"
-                variant="floating"
-              />
+              >
+                {inputType === "password" ? <ShowIcon /> : <HideIcon />}
+              </IconButton>
             </InputAdornment>
           }
           id={id}
-          name={id}
+          name={nameOverride ?? id}
           onChange={onChange}
           onFocus={onFocus}
           onBlur={onBlur}
@@ -149,6 +155,7 @@ const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
         hasInitialFocus,
         togglePasswordVisibility,
         inputType,
+        nameOverride,
         onChange,
         onFocus,
         onBlur,
@@ -156,6 +163,7 @@ const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
         isOptional,
         isReadOnly,
         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 (

package/src/SearchField.tsx

@@ -11,7 +11,7 @@
  */
 
 import { useState, useEffect } from "react";
-import { InputAdornment, InputBase } from "@mui/material";
+import { InputAdornment, InputBase, IconButton } from "@mui/material";
 import {
   ChangeEventHandler,
   FocusEventHandler,
@@ -23,7 +23,7 @@ import {
 
 import { CloseCircleFilledIcon, SearchIcon } from "./icons.generated";
 import { Field } from "./Field";
-import { Button } from "./Button";
+import type { SeleniumProps } from "./SeleniumProps";
 
 export type SearchFieldProps = {
   /**
@@ -48,6 +48,10 @@ export type SearchFieldProps = {
    * This label won't show up visually, but it's required for accessibility.
    */
   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.
    */
@@ -72,7 +76,7 @@ export type SearchFieldProps = {
    * The value of the `input` element, required for a controlled component.
    */
   value?: string;
-};
+} & SeleniumProps;
 
 const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
   (
@@ -82,11 +86,13 @@ const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
       id: idOverride,
       isDisabled = false,
       label,
+      name: nameOverride,
       onChange: onChangeProp,
       onFocus,
       onBlur,
       onClear: onClearProp,
       placeholder,
+      testId,
       value: controlledValue,
     },
     ref
@@ -120,26 +126,26 @@ const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
           autoComplete={autoCompleteType}
           /* eslint-disable-next-line jsx-a11y/no-autofocus */
           autoFocus={hasInitialFocus}
+          data-se={testId}
           endAdornment={
             uncontrolledValue && (
               <InputAdornment position="end">
-                <Button
-                  ariaLabel="Clear"
-                  isDisabled={isDisabled}
-                  label=""
+                <IconButton
+                  aria-label="Clear"
+                  disabled={isDisabled}
                   onClick={onClear}
                   size="small"
-                  startIcon={<CloseCircleFilledIcon />}
-                  variant="floating"
-                />
+                >
+                  <CloseCircleFilledIcon />
+                </IconButton>
               </InputAdornment>
             )
           }
           id={id}
-          name={id}
+          name={nameOverride ?? id}
+          onBlur={onBlur}
           onChange={onChange}
           onFocus={onFocus}
-          onBlur={onBlur}
           placeholder={placeholder}
           ref={ref}
           startAdornment={
@@ -155,15 +161,17 @@ const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
       ),
       [
         autoCompleteType,
+        controlledValue,
         hasInitialFocus,
         isDisabled,
-        onClear,
+        nameOverride,
+        onBlur,
         onChange,
+        onClear,
         onFocus,
-        onBlur,
         placeholder,
         ref,
-        controlledValue,
+        testId,
         uncontrolledValue,
       ]
     );

package/src/Select.tsx

@@ -14,14 +14,15 @@ import { ReactNode, forwardRef, memo, useCallback, useState } from "react";
 import {
   Box,
   Chip,
+  Checkbox as MuiCheckbox,
   ListSubheader,
   MenuItem,
   Select as MuiSelect,
   SelectChangeEvent,
 } from "@mui/material";
 import { SelectProps as MuiSelectProps } from "@mui/material";
-import { Checkbox } from "./Checkbox";
 import { Field } from "./Field";
+import type { SeleniumProps } from "./SeleniumProps";
 
 export type SelectOption = {
   text: string;
@@ -58,6 +59,10 @@ export type SelectProps = {
    * The label text for the Select
    */
   label: string;
+  /**
+   * The name of the `input` element. Defaults to the `id` if not set.
+   */
+  name?: string;
   /**
    * Callback fired when the Select loses focus
    */
@@ -78,7 +83,7 @@ export type SelectProps = {
    * The value or values selected in the Select
    */
   value?: string | string[];
-};
+} & SeleniumProps;
 
 /**
  * Options in Odyssey <Select> are passed as an array, which can contain any combination
@@ -105,10 +110,12 @@ const Select = forwardRef<HTMLSelectElement, SelectProps>(
       isMultiSelect = false,
       isOptional = false,
       label,
+      name: nameOverride,
       onBlur,
       onChange: onChangeProp,
       onFocus,
       value,
+      testId,
       options,
     },
     ref
@@ -205,7 +212,7 @@ const Select = forwardRef<HTMLSelectElement, SelectProps>(
       return (
         <MenuItem key={option.value} value={option.value}>
           {isMultiSelect && (
-            <Checkbox isDefaultChecked={selectedValue.includes(option.value)} />
+            <MuiCheckbox checked={selectedValue.includes(option.value)} />
           )}
           {option.text}
         </MenuItem>
@@ -216,9 +223,10 @@ const Select = forwardRef<HTMLSelectElement, SelectProps>(
       () => (
         <MuiSelect
           children={children}
+          data-se={testId}
           id={idOverride}
           multiple={isMultiSelect}
-          name={idOverride}
+          name={nameOverride ?? idOverride}
           onBlur={onBlur}
           onChange={onChange}
           onFocus={onFocus}
@@ -229,16 +237,18 @@ const Select = forwardRef<HTMLSelectElement, SelectProps>(
         />
       ),
       [
+        children,
         idOverride,
         isMultiSelect,
+        label,
+        nameOverride,
         onBlur,
         onChange,
         onFocus,
         ref,
-        children,
         renderValue,
         selectedValue,
-        label,
+        testId,
       ]
     );
 

package/src/SeleniumProps.ts

@@ -0,0 +1,20 @@
+/*!
+ * 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 SeleniumProps = {
+  /**
+   * This prop puts a `data` attribute on an HTML element in this component with the value provided.
+   *
+   * @deprecated **WARNING:** You should be using Semantic Selectors instead of this property. This is a temporary measure for backwards compatibility with existing Selenium tests.
+   */
+  testId?: string;
+};