@okta/odyssey-react-mui 1.0.2 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okta/odyssey-react-mui",
-  "version": "1.0.2",
+  "version": "1.2.0",
   "description": "React MUI components for Odyssey, Okta's design system",
   "author": "Okta, Inc.",
   "license": "Apache-2.0",
@@ -43,24 +43,25 @@
   },
   "dependencies": {
     "@emotion/cache": "^11.10.5",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.11.0",
     "@mui/lab": "^5.0.0-alpha.117",
     "@mui/material": "^5.12.3",
+    "@mui/system": "^5.14.9",
     "@mui/utils": "^5.11.2",
     "@mui/x-date-pickers": "^5.0.15",
-    "@okta/odyssey-design-tokens": "1.0.2",
+    "@okta/odyssey-design-tokens": "1.2.0",
     "date-fns": "^2.30.0",
-    "i18next": "^22.4.15",
+    "i18next": "^23.5.1",
     "material-react-table": "^1.14.0",
     "react-i18next": "^12.2.2",
     "ts-node": "^10.9.1",
     "word-wrap": "~1.2.5"
   },
   "peerDependencies": {
-    "@emotion/react": "^11",
-    "@emotion/styled": "^11",
     "react": ">=17 <19",
     "react-dom": ">=17 <19"
   },
-  "gitHead": "06d0b602d3bf239b43a739dd3a63ec2fb7f0ba01"
+  "gitHead": "6dc7afd2fce73ec25b0566b0c59aeedf0738b925"
 }

package/src/Autocomplete.tsx

@@ -18,12 +18,17 @@ import {
 import { memo, useCallback } from "react";
 
 import { Field } from "./Field";
+import type { SeleniumProps } from "./SeleniumProps";
 
 export type AutocompleteProps<
   OptionType,
   HasMultipleChoices extends boolean | undefined,
   IsCustomValueAllowed extends boolean | undefined
 > = {
+  /**
+   * The error message for the Select
+   */
+  errorMessage?: string;
   /**
    * Enables multiple choice selection
    */
@@ -37,6 +42,10 @@ export type AutocompleteProps<
    * The hint text for the Autocomplete input
    */
   hint?: string;
+  /**
+   * The id attribute of the Select
+   */
+  id?: string;
   /**
    * Allows the input of custom values
    */
@@ -64,6 +73,10 @@ export type AutocompleteProps<
     undefined,
     IsCustomValueAllowed
   >["loading"];
+  /**
+   * If `true`, the `input` element is not required.
+   */
+  isOptional?: boolean;
   /**
    * Makes the Autocomplete input read-only
    */
@@ -78,7 +91,20 @@ export type AutocompleteProps<
    */
   label: string;
   /**
-   * Callback fired when the value of the autocomplete input changes
+   * The name of the `input` element. Defaults to the `id` if not set.
+   */
+  name?: string;
+  /**
+   * Callback fired when the autocomplete loses focus.
+   */
+  onBlur?: MuiAutocompleteProps<
+    OptionType,
+    HasMultipleChoices,
+    undefined,
+    IsCustomValueAllowed
+  >["onBlur"];
+  /**
+   * Callback fired when a selection is made.
    */
   onChange?: MuiAutocompleteProps<
     OptionType,
@@ -87,7 +113,7 @@ export type AutocompleteProps<
     IsCustomValueAllowed
   >["onChange"];
   /**
-   * Callback fired when the input value of the autocomplete input changes
+   * Callback fired when the textbox receives typed characters.
    */
   onInputChange?: MuiAutocompleteProps<
     OptionType,
@@ -95,6 +121,15 @@ export type AutocompleteProps<
     undefined,
     IsCustomValueAllowed
   >["onInputChange"];
+  /**
+   * Callback fired when the autocomplete gains focus.
+   */
+  onFocus?: MuiAutocompleteProps<
+    OptionType,
+    HasMultipleChoices,
+    undefined,
+    IsCustomValueAllowed
+  >["onFocus"];
   /**
    * The options for the Autocomplete input
    */
@@ -113,56 +148,73 @@ export type AutocompleteProps<
     undefined,
     IsCustomValueAllowed
   >["value"];
-};
+} & SeleniumProps;
 
 const Autocomplete = <
   OptionType,
   HasMultipleChoices extends boolean | undefined,
   IsCustomValueAllowed extends boolean | undefined
 >({
+  errorMessage,
   hasMultipleChoices,
+  id: idOverride,
   isCustomValueAllowed,
   isDisabled,
   isLoading,
+  isOptional = false,
   isReadOnly,
   hint,
   label,
+  name: nameOverride,
+  onBlur,
   onChange,
   onInputChange,
+  onFocus,
   options,
   value,
+  testId,
 }: AutocompleteProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>) => {
   const renderInput = useCallback(
     ({ InputLabelProps, InputProps, ...params }) => (
       <Field
+        errorMessage={errorMessage}
         fieldType="single"
         hasVisibleLabel
         id={InputLabelProps.htmlFor}
         hint={hint}
         label={label}
+        isOptional={isOptional}
         renderFieldComponent={({ ariaDescribedBy, id }) => (
           <InputBase
             {...params}
             {...InputProps}
             aria-describedby={ariaDescribedBy}
             id={id}
+            name={nameOverride ?? id}
+            required={!isOptional}
           />
         )}
       />
     ),
-    [hint, label]
+    [errorMessage, hint, isOptional, label, nameOverride]
   );
 
   return (
     <MuiAutocomplete
       // AutoComplete is wrapped in a div within MUI which does not get the disabled attr. So this aria-disabled gets set in the div
       aria-disabled={isDisabled}
+      data-se={testId}
+      disableCloseOnSelect={hasMultipleChoices}
       disabled={isDisabled}
       freeSolo={isCustomValueAllowed}
+      filterSelectedOptions={true}
+      id={idOverride}
       loading={isLoading}
       multiple={hasMultipleChoices}
+      onBlur={onBlur}
       onChange={onChange}
       onInputChange={onInputChange}
+      onFocus={onFocus}
       options={options}
       readOnly={isReadOnly}
       renderInput={renderInput}

package/src/Banner.tsx

@@ -16,6 +16,8 @@ import { ScreenReaderText } from "./ScreenReaderText";
 import { memo } from "react";
 import { useTranslation } from "react-i18next";
 
+import type { SeleniumProps } from "./SeleniumProps";
+
 export const bannerRoleValues = ["status", "alert"] as const;
 export const bannerSeverityValues: AlertColor[] = [
   "success",
@@ -54,7 +56,7 @@ export type BannerProps = {
    * The text content of the alert
    */
   text: string;
-};
+} & SeleniumProps;
 
 const Banner = ({
   linkUrl,
@@ -63,11 +65,18 @@ const Banner = ({
   role,
   severity,
   text,
+  testId,
 }: BannerProps) => {
   const { t } = useTranslation();
 
   return (
-    <Alert onClose={onClose} role={role} severity={severity} variant="banner">
+    <Alert
+      data-se={testId}
+      onClose={onClose}
+      role={role}
+      severity={severity}
+      variant="banner"
+    >
       <ScreenReaderText>{t(`severity.${severity}`)}:</ScreenReaderText>
       <AlertTitle>{text}</AlertTitle>
       {linkUrl && (

package/src/Box.tsx

@@ -11,25 +11,31 @@
  */
 
 import { Box as MuiBox, BoxProps as MuiBoxProps } from "@mui/material";
-import { ReactNode, forwardRef } from "react";
+import { ReactNode, forwardRef, memo } from "react";
+
+import type { SeleniumProps } from "./SeleniumProps";
 
 export type BoxProps = {
   children?: ReactNode;
   component?: MuiBoxProps["component"];
   id?: MuiBoxProps["id"];
   sx?: MuiBoxProps["sx"];
-};
+} & SeleniumProps;
 
-export const Box = forwardRef<HTMLElement, BoxProps>(
-  ({ children, component, id, sx }, ref) => (
+const Box = forwardRef<HTMLElement, BoxProps>(
+  ({ children, component, id, sx, testId }, ref) => (
     <MuiBox
       ref={ref}
       children={children}
       component={component}
+      data-se={testId}
       id={id}
       sx={sx}
     />
   )
 );
 
-Box.displayName = "Box";
+const MemoizedBox = memo(Box);
+MemoizedBox.displayName = "Box";
+
+export { MemoizedBox as Box };

package/src/Button.tsx

@@ -16,6 +16,7 @@ import { memo, ReactElement, useCallback } from "react";
 
 import { MuiPropsContext, useMuiProps } from "./MuiPropsContext";
 import { Tooltip } from "./Tooltip";
+import type { SeleniumProps } from "./SeleniumProps";
 
 export const buttonSizeValues = ["small", "medium", "large"] as const;
 export const buttonTypeValues = ["button", "submit", "reset"] as const;
@@ -100,7 +101,8 @@ export type ButtonProps = {
       label?: "" | undefined;
       startIcon?: ReactElement;
     }
-);
+) &
+  SeleniumProps;
 
 const Button = ({
   ariaDescribedBy,
@@ -114,6 +116,7 @@ const Button = ({
   onClick,
   size = "medium",
   startIcon,
+  testId,
   tooltipText,
   type = "button",
   variant,
@@ -127,6 +130,7 @@ const Button = ({
         aria-label={ariaLabel}
         aria-labelledby={ariaLabelledBy}
         aria-describedby={ariaDescribedBy}
+        data-se={testId}
         disabled={isDisabled}
         endIcon={endIcon}
         fullWidth={isFullWidth}
@@ -152,6 +156,7 @@ const Button = ({
       onClick,
       size,
       startIcon,
+      testId,
       type,
       variant,
     ]

package/src/Callout.tsx

@@ -15,6 +15,8 @@ import { Alert, AlertTitle, Box } from "@mui/material";
 import { ScreenReaderText } from "./ScreenReaderText";
 import { useTranslation } from "react-i18next";
 
+import type { SeleniumProps } from "./SeleniumProps";
+
 export const calloutRoleValues = ["status", "alert"] as const;
 export const calloutSeverityValues = [
   "success",
@@ -42,13 +44,13 @@ export type CalloutProps = {
    * The title of the Callout
    */
   title?: string;
-};
+} & SeleniumProps;
 
-const Callout = ({ children, role, severity, title }: CalloutProps) => {
+const Callout = ({ children, role, severity, testId, title }: CalloutProps) => {
   const { t } = useTranslation();
 
   return (
-    <Alert role={role} severity={severity} variant="callout">
+    <Alert data-se={testId} role={role} severity={severity} variant="callout">
       <ScreenReaderText>{t(`severity.${severity}`)}: </ScreenReaderText>
       {title && <AlertTitle>{title}</AlertTitle>}
       <Box component="div">{children}</Box>

package/src/Checkbox.tsx

@@ -19,6 +19,8 @@ import { Typography } from "./Typography";
 import { memo, useCallback, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 
+import type { SeleniumProps } from "./SeleniumProps";
+
 export const checkboxValidityValues = ["valid", "invalid", "inherit"] as const;
 
 export type CheckboxProps = {
@@ -30,6 +32,10 @@ export type CheckboxProps = {
    * The ID of the element that labels the Checkbox
    */
   ariaLabelledBy?: string;
+  /**
+   * The id of the `input` element.
+   */
+  id?: string;
   /**
    * Determines whether the Checkbox is checked
    */
@@ -51,7 +57,7 @@ export type CheckboxProps = {
    */
   label?: string;
   /**
-   * The name attribute of the Checkbox
+   * The name of the `input` element. Defaults to the `id` if not set.
    */
   name?: string;
   /**
@@ -66,18 +72,20 @@ export type CheckboxProps = {
    * The value attribute of the Checkbox
    */
   value?: string;
-};
+} & SeleniumProps;
 
 const Checkbox = ({
   ariaLabel,
   ariaLabelledBy,
+  id: idOverride,
   isDefaultChecked = false,
   isDisabled,
   isIndeterminate,
   isRequired,
   label: labelProp,
-  name,
+  name: nameOverride,
   onChange: onChangeProp,
+  testId,
   validity = "inherit",
   value,
 }: CheckboxProps) => {
@@ -122,9 +130,11 @@ const Checkbox = ({
       control={
         <MuiCheckbox indeterminate={isIndeterminate} required={isRequired} />
       }
+      data-se={testId}
       disabled={isDisabled}
+      id={idOverride}
       label={label}
-      name={name}
+      name={nameOverride ?? idOverride}
       onChange={onChange}
       value={value}
       required={isRequired}

package/src/CheckboxGroup.tsx

@@ -15,6 +15,7 @@ import { memo, ReactElement, useCallback } from "react";
 
 import { Checkbox } from "./Checkbox";
 import { Field } from "./Field";
+import type { SeleniumProps } from "./SeleniumProps";
 
 export type CheckboxGroupProps = {
   /**
@@ -31,10 +32,6 @@ export type CheckboxGroupProps = {
    * The hint text for the CheckboxGroup
    */
   hint?: string;
-  /**
-   * The id of the `input` element. This will also be the input's `name` field.
-   */
-  id?: string;
   /**
    * If `true`, the CheckboxGroup is disabled
    */
@@ -47,24 +44,24 @@ export type CheckboxGroupProps = {
    * The label text for the CheckboxGroup
    */
   label: string;
-};
+} & SeleniumProps;
 
 const CheckboxGroup = ({
   children,
   errorMessage,
   hint,
-  id: idOverride,
   isDisabled,
   isRequired = false,
   label,
+  testId,
 }: CheckboxGroupProps) => {
   const renderFieldComponent = useCallback(
-    ({ ariaDescribedBy, id }) => (
-      <MuiFormGroup aria-describedby={ariaDescribedBy} id={id}>
+    ({ ariaDescribedBy }) => (
+      <MuiFormGroup aria-describedby={ariaDescribedBy} data-se={testId}>
         {children}
       </MuiFormGroup>
     ),
-    [children]
+    [children, testId]
   );
 
   return (
@@ -73,7 +70,6 @@ const CheckboxGroup = ({
       fieldType="group"
       hasVisibleLabel={true}
       hint={hint}
-      id={idOverride}
       isDisabled={isDisabled}
       isOptional={!isRequired}
       label={label}

package/src/CircularProgress.tsx

@@ -12,6 +12,8 @@
 
 import { CircularProgress as MuiCircularProgress } from "@mui/material";
 
+import type { SeleniumProps } from "./SeleniumProps";
+
 export type CircularProgressProps = {
   /**
    * The ARIA label for the progress spinner
@@ -22,13 +24,15 @@ export type CircularProgressProps = {
    * If undefined, the spinner will spin perpetually.
    */
   value?: number;
-};
+} & SeleniumProps;
 
 export const CircularProgress = ({
   ariaLabel,
+  testId,
   value,
 }: CircularProgressProps) => (
   <MuiCircularProgress
+    data-se={testId}
     value={value}
     variant={value ? "determinate" : "indeterminate"}
     aria-label={ariaLabel}

package/src/Dialog.tsx

@@ -28,6 +28,8 @@ import {
   ReactElement,
 } from "react";
 
+import type { SeleniumProps } from "./SeleniumProps";
+
 export type DialogProps = {
   /**
    * An optional Button object to be situated in the Dialog footer. Should almost always be of variant `primary`.
@@ -58,7 +60,7 @@ export type DialogProps = {
    */
   title: string;
   ariaLabel: string;
-};
+} & SeleniumProps;
 
 const Dialog = ({
   callToActionFirstComponent,
@@ -67,6 +69,7 @@ const Dialog = ({
   children,
   isOpen,
   onClose,
+  testId,
   title,
   ariaLabel,
 }: DialogProps) => {
@@ -103,7 +106,7 @@ const Dialog = ({
     );
 
   return (
-    <MuiDialog open={isOpen} onClose={onClose}>
+    <MuiDialog data-se={testId} open={isOpen} onClose={onClose}>
       <DialogTitle>
         {title}
         <Button

package/src/Field.tsx

@@ -76,9 +76,11 @@ export type FieldProps = {
    */
   renderFieldComponent: ({
     ariaDescribedBy,
+    dataSe,
     id,
   }: {
     ariaDescribedBy?: string;
+    dataSe?: string;
     id: string;
   }) => ReactElement;
 };

package/src/FieldError.tsx

@@ -16,16 +16,18 @@ import { FormHelperText } from "@mui/material";
 import { ScreenReaderText } from "./ScreenReaderText";
 import { useTranslation } from "react-i18next";
 
+import type { SeleniumProps } from "./SeleniumProps";
+
 export type FieldErrorProps = {
   id?: string;
   text: string;
-};
+} & SeleniumProps;
 
-const FieldError = ({ id, text }: FieldErrorProps) => {
+const FieldError = ({ id, testId, text }: FieldErrorProps) => {
   const { t } = useTranslation();
 
   return (
-    <FormHelperText error id={id}>
+    <FormHelperText data-se={testId} error id={id}>
       <ScreenReaderText>{`${t(
         "fielderror.screenreader.text"
       )}:`}</ScreenReaderText>

package/src/FieldHint.tsx

@@ -14,13 +14,19 @@ import { memo } from "react";
 
 import { FormHelperText } from "@mui/material";
 
+import type { SeleniumProps } from "./SeleniumProps";
+
 export type FieldHintProps = {
   id?: string;
   text: string;
-};
+} & SeleniumProps;
 
-const FieldHint = ({ id, text }: FieldHintProps) => {
-  return <FormHelperText id={id}>{text}</FormHelperText>;
+const FieldHint = ({ id, testId, text }: FieldHintProps) => {
+  return (
+    <FormHelperText data-se={testId} id={id}>
+      {text}
+    </FormHelperText>
+  );
 };
 
 const MemoizedFieldHint = memo(FieldHint);

package/src/FieldLabel.tsx

@@ -16,6 +16,7 @@ import { memo, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { ScreenReaderText } from "./ScreenReaderText";
 import { Subordinate } from "./Typography";
+import type { SeleniumProps } from "./SeleniumProps";
 
 export type FieldLabelProps = {
   hasVisibleLabel: boolean;
@@ -23,27 +24,28 @@ export type FieldLabelProps = {
   inputId: string;
   isOptional: boolean;
   text: string;
-};
+} & SeleniumProps;
 
 const FieldLabel = ({
   hasVisibleLabel,
   id,
   inputId,
   isOptional,
+  testId,
   text,
 }: FieldLabelProps) => {
   const { t } = useTranslation();
 
   const inputLabel = useMemo(
     () => (
-      <MuiInputLabel htmlFor={inputId} id={id}>
+      <MuiInputLabel data-se={testId} htmlFor={inputId} id={id}>
         <span>{text}</span>
         {isOptional && (
           <Subordinate>{t("fieldlabel.optional.text")}</Subordinate>
         )}
       </MuiInputLabel>
     ),
-    [id, inputId, isOptional, text, t]
+    [id, inputId, isOptional, testId, text, t]
   );
 
   return hasVisibleLabel ? (

package/src/Fieldset.tsx

@@ -18,6 +18,7 @@ import { FieldsetContext } from "./FieldsetContext";
 import { Legend, Support } from "./Typography";
 import { useOdysseyDesignTokens } from "./OdysseyDesignTokensContext";
 import { useUniqueId } from "./useUniqueId";
+import type { SeleniumProps } from "./SeleniumProps";
 
 export type FieldsetProps = {
   /**
@@ -48,7 +49,7 @@ export type FieldsetProps = {
    * The name associated with the group.
    */
   name?: string;
-};
+} & SeleniumProps;
 
 const Fieldset = ({
   alert,
@@ -58,6 +59,7 @@ const Fieldset = ({
   isDisabled = false,
   legend,
   name,
+  testId,
 }: FieldsetProps) => {
   const odysseyDesignTokens = useOdysseyDesignTokens();
   const id = useUniqueId(idOverride);
@@ -72,6 +74,7 @@ const Fieldset = ({
   return (
     <Box
       component="fieldset"
+      data-se={testId}
       disabled={isDisabled}
       name={name}
       id={id}