@okta/odyssey-react-mui 1.0.2 → 1.1.1

package/src/Status.tsx

@@ -13,6 +13,7 @@
 import { Chip } from "@mui/material";
 
 import { useMuiProps } from "./MuiPropsContext";
+import type { SeleniumProps } from "./SeleniumProps";
 
 export const statusSeverityValues = [
   "default",
@@ -35,12 +36,23 @@ export type StatusProps = {
    * The style of the Status indicator
    */
   variant?: (typeof statusVariantValues)[number];
-};
+} & SeleniumProps;
 
-export const Status = ({ severity, label, variant = "lamp" }: StatusProps) => {
+export const Status = ({
+  label,
+  severity,
+  testId,
+  variant = "lamp",
+}: StatusProps) => {
   const muiProps = useMuiProps();
 
   return (
-    <Chip {...muiProps} label={label} color={severity} variant={variant} />
+    <Chip
+      {...muiProps}
+      color={severity}
+      data-se={testId}
+      label={label}
+      variant={variant}
+    />
   );
 };

package/src/Tabs.tsx

@@ -15,6 +15,7 @@ import React, {
   ReactNode,
   memo,
   useCallback,
+  useEffect,
   useState,
 } from "react";
 import { Tab as MuiTab } from "@mui/material";
@@ -23,6 +24,7 @@ import {
   TabPanel as MuiTabPanel,
   TabContext as MuiTabContext,
 } from "@mui/lab";
+import { SeleniumProps } from "./SeleniumProps";
 
 export type TabItemProps = {
   /**
@@ -45,7 +47,7 @@ export type TabItemProps = {
    * The value associated with the TabItem
    */
   value?: string;
-};
+} & SeleniumProps;
 
 export type TabsProps = {
   /**
@@ -53,17 +55,22 @@ export type TabsProps = {
    */
   ariaLabel?: string;
   /**
-   * The value of the Tab that should be selected by default
+   * @deprecated please use the `value` prop instead
+   * When `value` is provided, `initialValue` isn't used.
    */
   initialValue?: string;
   /**
    * The TabItems to be included in the Tabs group
    */
   tabs: TabItemProps[];
+  /**
+   * Identifier for the selected tab.
+   */
+  value?: string;
 };
 
-const Tabs = ({ ariaLabel, initialValue = "0", tabs }: TabsProps) => {
-  const [tabState, setTabState] = useState(initialValue);
+const Tabs = ({ ariaLabel, initialValue, tabs, value }: TabsProps) => {
+  const [tabState, setTabState] = useState(initialValue ?? value ?? "0");
 
   const onChange = useCallback(
     (_event: React.SyntheticEvent, newState: string) => {
@@ -72,11 +79,18 @@ const Tabs = ({ ariaLabel, initialValue = "0", tabs }: TabsProps) => {
     []
   );
 
+  useEffect(() => {
+    if (value !== undefined) {
+      setTabState(value);
+    }
+  }, [value]);
+
   return (
     <MuiTabContext value={tabState}>
       <MuiTabList onChange={onChange} aria-label={ariaLabel}>
         {tabs.map((tab, index) => (
           <MuiTab
+            data-se={tab.testId}
             disabled={tab.isDisabled}
             icon={tab.startIcon}
             label={tab.label}

package/src/Tag.tsx

@@ -14,6 +14,7 @@ import { Chip as MuiChip, ChipProps as MuiChipProps } from "@mui/material";
 import { memo, ReactElement, useCallback, useContext } from "react";
 import { TagListContext } from "./TagListContext";
 import { MuiPropsContext } from "./MuiPropsContext";
+import { SeleniumProps } from "./SeleniumProps";
 
 export type TagProps = {
   icon?: ReactElement;
@@ -30,9 +31,16 @@ export type TagProps = {
    * Callback fired when the remove button of the Tag is clicked
    */
   onRemove?: MuiChipProps["onDelete"];
-};
+} & SeleniumProps;
 
-const Tag = ({ icon, isDisabled, label, onClick, onRemove }: TagProps) => {
+const Tag = ({
+  icon,
+  isDisabled,
+  label,
+  onClick,
+  onRemove,
+  testId,
+}: TagProps) => {
   const { chipElementType } = useContext(TagListContext);
 
   const renderTag = useCallback(
@@ -42,6 +50,7 @@ const Tag = ({ icon, isDisabled, label, onClick, onRemove }: TagProps) => {
         aria-disabled={isDisabled}
         clickable={onClick ? true : false}
         component={chipElementType}
+        data-se={testId}
         disabled={isDisabled}
         icon={icon}
         label={label}
@@ -49,7 +58,7 @@ const Tag = ({ icon, isDisabled, label, onClick, onRemove }: TagProps) => {
         onDelete={onRemove}
       />
     ),
-    [chipElementType, icon, isDisabled, label, onClick, onRemove]
+    [chipElementType, icon, isDisabled, label, onClick, onRemove, testId]
   );
 
   return <MuiPropsContext.Consumer>{renderTag}</MuiPropsContext.Consumer>;

package/src/TagList.tsx

@@ -14,15 +14,16 @@ import { Tag } from "./Tag";
 import { Stack } from "@mui/material";
 import { memo, ReactElement, useMemo } from "react";
 import { ChipElementType, TagListContext } from "./TagListContext";
+import { SeleniumProps } from "./SeleniumProps";
 
 export type TagListProps = {
   /**
    * The Tag or array of Tags within the TagList
    */
   children: ReactElement<typeof Tag> | Array<ReactElement<typeof Tag>>;
-};
+} & SeleniumProps;
 
-const TagList = ({ children }: TagListProps) => {
+const TagList = ({ children, testId }: TagListProps) => {
   const providerValue = useMemo<{
     chipElementType: ChipElementType;
   }>(
@@ -35,6 +36,7 @@ const TagList = ({ children }: TagListProps) => {
   return (
     <Stack
       component="ul"
+      data-se={testId}
       direction="row"
       spacing={2}
       useFlexGap

package/src/TextField.tsx

@@ -22,6 +22,7 @@ import {
 } from "react";
 
 import { Field } from "./Field";
+import { SeleniumProps } from "./SeleniumProps";
 
 export const textFieldTypeValues = [
   "email",
@@ -78,6 +79,10 @@ export type TextFieldProps = {
    * 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.
    */
@@ -106,7 +111,7 @@ export type TextFieldProps = {
    * The value of the `input` element, required for a controlled component.
    */
   value?: string;
-};
+} & SeleniumProps;
 
 const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
   (
@@ -122,11 +127,13 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
       isOptional = false,
       isReadOnly,
       label,
+      name: nameOverride,
       onBlur,
       onChange,
       onFocus,
       placeholder,
       startAdornment,
+      testId,
       type = "text",
       value,
     },
@@ -139,6 +146,7 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
           autoComplete={autoCompleteType}
           /* eslint-disable-next-line jsx-a11y/no-autofocus */
           autoFocus={hasInitialFocus}
+          data-se={testId}
           endAdornment={
             endAdornment && (
               <InputAdornment position="end">{endAdornment}</InputAdornment>
@@ -146,13 +154,14 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
           }
           id={id}
           multiline={isMultiline}
-          name={id}
+          name={nameOverride ?? id}
           onBlur={onBlur}
           onChange={onChange}
           onFocus={onFocus}
           placeholder={placeholder}
           readOnly={isReadOnly}
           ref={ref}
+          required={!isOptional}
           startAdornment={
             startAdornment && (
               <InputAdornment position="start">{startAdornment}</InputAdornment>
@@ -167,13 +176,16 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
         hasInitialFocus,
         endAdornment,
         isMultiline,
+        nameOverride,
         onChange,
         onFocus,
         onBlur,
         placeholder,
+        isOptional,
         isReadOnly,
         ref,
         startAdornment,
+        testId,
         type,
         value,
       ]

package/src/Toast.tsx

@@ -17,6 +17,7 @@ import { Link } from "./Link";
 import { CloseIcon } from "./icons.generated";
 import { Button } from "./Button";
 import { useTranslation } from "react-i18next";
+import { SeleniumProps } from "./SeleniumProps";
 
 export const toastRoleValues = ["status", "alert"] as const;
 export const toastSeverityValues = [
@@ -69,7 +70,7 @@ export type ToastProps = {
    * The text content of the Toast
    */
   text: string;
-};
+} & SeleniumProps;
 
 const ClickAwayListenerProps = { onClickAway: () => false };
 
@@ -82,6 +83,7 @@ const Toast = ({
   onHide: onHideProp,
   role,
   severity,
+  testId,
   text,
 }: ToastProps) => {
   const { t } = useTranslation();
@@ -119,6 +121,7 @@ const Toast = ({
             />
           )
         }
+        data-se={testId}
         role={role}
         severity={severity}
         variant="toast"

package/src/Tooltip.tsx

@@ -15,6 +15,7 @@ import type { TooltipProps as MuiTooltipProps } from "@mui/material";
 
 import { MuiPropsChild } from "./MuiPropsChild";
 import { ReactElement } from "react";
+import { SeleniumProps } from "./SeleniumProps";
 
 export type TooltipProps = {
   /**
@@ -33,15 +34,17 @@ export type TooltipProps = {
    * The text to display in the Tooltip
    */
   text: string;
-};
+} & SeleniumProps;
 
 export const Tooltip = ({
   ariaType,
   children,
   placement = "top",
+  testId,
   text,
 }: TooltipProps) => (
   <MuiTooltip
+    data-se={testId}
     describeChild={ariaType === "description"}
     placement={placement}
     title={text}

package/src/Typography.tsx

@@ -14,7 +14,8 @@ import {
   Typography as MuiTypography,
   TypographyProps as MuiTypographyProps,
 } from "@mui/material";
-import { ElementType, ReactNode, useMemo } from "react";
+import { ElementType, ReactNode, memo, useMemo } from "react";
+import { SeleniumProps } from "./SeleniumProps";
 
 export type TypographyVariantValue =
   | "h1"
@@ -85,9 +86,9 @@ export type TypographyProps = {
    * The variant of Typography to render.
    */
   variant?: keyof typeof typographyVariantMapping;
-};
+} & SeleniumProps;
 
-export const Typography = ({
+const Typography = ({
   ariaDescribedBy,
   ariaLabel,
   ariaLabelledBy,
@@ -95,6 +96,7 @@ export const Typography = ({
   classes,
   color,
   component: componentProp,
+  testId,
   variant = "body",
 }: TypographyProps) => {
   const component = useMemo(() => {
@@ -102,7 +104,7 @@ export const Typography = ({
       if (variant === "body") {
         return "p";
       } else if (variant === "subordinate" || variant === "support") {
-        return "h6";
+        return "p";
       } else {
         return variant;
       }
@@ -112,21 +114,23 @@ export const Typography = ({
 
   return (
     <MuiTypography
-      ariaDescribedBy={ariaDescribedBy}
-      ariaLabel={ariaLabel}
-      ariaLabelledBy={ariaLabelledBy}
+      aria-describedby={ariaDescribedBy}
+      aria-label={ariaLabel}
+      aria-labelledby={ariaLabelledBy}
       children={children}
       classes={classes}
       color={color}
       component={component}
+      data-se={testId}
       variant={typographyVariantMapping[variant]}
     />
   );
 };
 
-Typography.displayName = "Typography";
+const MemoizedTypography = memo(Typography);
+MemoizedTypography.displayName = "Typography";
 
-export const Heading1 = ({
+const Heading1 = ({
   ariaDescribedBy,
   ariaLabel,
   ariaLabelledBy,
@@ -134,6 +138,7 @@ export const Heading1 = ({
   classes,
   color,
   component,
+  testId,
 }: TypographyProps) => (
   <Typography
     ariaDescribedBy={ariaDescribedBy}
@@ -143,13 +148,15 @@ export const Heading1 = ({
     classes={classes}
     color={color}
     component={component}
+    data-se={testId}
     variant="h1"
   />
 );
 
-Heading1.displayName = "Heading1";
+const MemoizedHeading1 = memo(Heading1);
+MemoizedHeading1.displayName = "Heading1";
 
-export const Heading2 = ({
+const Heading2 = ({
   ariaDescribedBy,
   ariaLabel,
   ariaLabelledBy,
@@ -157,6 +164,7 @@ export const Heading2 = ({
   classes,
   color,
   component,
+  testId,
 }: TypographyProps) => (
   <Typography
     ariaDescribedBy={ariaDescribedBy}
@@ -166,13 +174,15 @@ export const Heading2 = ({
     classes={classes}
     color={color}
     component={component}
+    data-se={testId}
     variant="h2"
   />
 );
 
-Heading2.displayName = "Heading2";
+const MemoizedHeading2 = memo(Heading2);
+MemoizedHeading2.displayName = "Heading2";
 
-export const Heading3 = ({
+const Heading3 = ({
   ariaDescribedBy,
   ariaLabel,
   ariaLabelledBy,
@@ -180,6 +190,7 @@ export const Heading3 = ({
   classes,
   color,
   component,
+  testId,
 }: TypographyProps) => (
   <Typography
     ariaDescribedBy={ariaDescribedBy}
@@ -189,13 +200,15 @@ export const Heading3 = ({
     classes={classes}
     color={color}
     component={component}
+    data-se={testId}
     variant="h3"
   />
 );
 
-Heading3.displayName = "Heading3";
+const MemoizedHeading3 = memo(Heading3);
+MemoizedHeading3.displayName = "Heading3";
 
-export const Heading4 = ({
+const Heading4 = ({
   ariaDescribedBy,
   ariaLabel,
   ariaLabelledBy,
@@ -203,6 +216,7 @@ export const Heading4 = ({
   classes,
   color,
   component,
+  testId,
 }: TypographyProps) => (
   <Typography
     ariaDescribedBy={ariaDescribedBy}
@@ -212,13 +226,15 @@ export const Heading4 = ({
     classes={classes}
     color={color}
     component={component}
+    data-se={testId}
     variant="h4"
   />
 );
 
-Heading4.displayName = "Heading4";
+const MemoizedHeading4 = memo(Heading4);
+MemoizedHeading4.displayName = "Heading4";
 
-export const Heading5 = ({
+const Heading5 = ({
   ariaDescribedBy,
   ariaLabel,
   ariaLabelledBy,
@@ -226,6 +242,7 @@ export const Heading5 = ({
   classes,
   color,
   component,
+  testId,
 }: TypographyProps) => (
   <Typography
     ariaDescribedBy={ariaDescribedBy}
@@ -235,13 +252,15 @@ export const Heading5 = ({
     classes={classes}
     color={color}
     component={component}
+    data-se={testId}
     variant="h5"
   />
 );
 
-Heading5.displayName = "Heading5";
+const MemoizedHeading5 = memo(Heading5);
+MemoizedHeading5.displayName = "Heading5";
 
-export const Heading6 = ({
+const Heading6 = ({
   ariaDescribedBy,
   ariaLabel,
   ariaLabelledBy,
@@ -249,6 +268,7 @@ export const Heading6 = ({
   classes,
   color,
   component,
+  testId,
 }: TypographyProps) => (
   <Typography
     ariaDescribedBy={ariaDescribedBy}
@@ -258,13 +278,15 @@ export const Heading6 = ({
     classes={classes}
     color={color}
     component={component}
+    data-se={testId}
     variant="h6"
   />
 );
 
-Heading6.displayName = "Heading6";
+const MemoizedHeading6 = memo(Heading6);
+MemoizedHeading6.displayName = "Heading6";
 
-export const Paragraph = ({
+const Paragraph = ({
   ariaDescribedBy,
   ariaLabel,
   ariaLabelledBy,
@@ -272,6 +294,7 @@ export const Paragraph = ({
   classes,
   color,
   component,
+  testId,
 }: TypographyProps) => (
   <Typography
     ariaDescribedBy={ariaDescribedBy}
@@ -281,13 +304,15 @@ export const Paragraph = ({
     classes={classes}
     color={color}
     component={component}
+    data-se={testId}
     variant="body"
   />
 );
 
-Paragraph.displayName = "Paragraph";
+const MemoizedParagraph = memo(Paragraph);
+MemoizedParagraph.displayName = "Paragraph";
 
-export const Subordinate = ({
+const Subordinate = ({
   ariaDescribedBy,
   ariaLabel,
   ariaLabelledBy,
@@ -295,6 +320,7 @@ export const Subordinate = ({
   classes,
   color,
   component,
+  testId,
 }: TypographyProps) => (
   <Typography
     ariaDescribedBy={ariaDescribedBy}
@@ -304,13 +330,15 @@ export const Subordinate = ({
     classes={classes}
     color={color}
     component={component}
+    data-se={testId}
     variant="subordinate"
   />
 );
 
-Subordinate.displayName = "Subordinate";
+const MemoizedSubordinate = memo(Subordinate);
+MemoizedSubordinate.displayName = "Subordinate";
 
-export const Support = ({
+const Support = ({
   ariaDescribedBy,
   ariaLabel,
   ariaLabelledBy,
@@ -318,6 +346,7 @@ export const Support = ({
   classes,
   color,
   component,
+  testId,
 }: TypographyProps) => (
   <Typography
     ariaDescribedBy={ariaDescribedBy}
@@ -327,13 +356,15 @@ export const Support = ({
     classes={classes}
     color={color}
     component={component}
+    data-se={testId}
     variant="support"
   />
 );
 
-Support.displayName = "Support";
+const MemoizedSupport = memo(Support);
+MemoizedSupport.displayName = "Support";
 
-export const Legend = ({
+const Legend = ({
   ariaDescribedBy,
   ariaLabel,
   ariaLabelledBy,
@@ -341,6 +372,7 @@ export const Legend = ({
   classes,
   color,
   component,
+  testId,
 }: TypographyProps) => (
   <Typography
     ariaDescribedBy={ariaDescribedBy}
@@ -350,8 +382,24 @@ export const Legend = ({
     classes={classes}
     color={color}
     component={component}
+    data-se={testId}
     variant="legend"
   />
 );
 
-Legend.displayName = "Legend";
+const MemoizedLegend = memo(Legend);
+MemoizedLegend.displayName = "Legend";
+
+export {
+  MemoizedTypography as Typography,
+  MemoizedHeading1 as Heading1,
+  MemoizedHeading2 as Heading2,
+  MemoizedHeading3 as Heading3,
+  MemoizedHeading4 as Heading4,
+  MemoizedHeading5 as Heading5,
+  MemoizedHeading6 as Heading6,
+  MemoizedLegend as Legend,
+  MemoizedParagraph as Paragraph,
+  MemoizedSubordinate as Subordinate,
+  MemoizedSupport as Support,
+};

package/src/labs/DatePicker.tsx

@@ -19,23 +19,31 @@ import { useCallback } from "react";
 
 export type DatePickerProps<TInputDate, TDate> = {
   label: MuiDatePickerProps<TInputDate, TDate>["label"];
+  /**
+   * If `true`, the `input` element is not required.
+   */
+  isOptional?: boolean;
   onChange: MuiDatePickerProps<TInputDate, TDate>["onChange"];
   value: MuiDatePickerProps<TInputDate, TDate>["value"];
 };
 
 export const DatePicker = <TInputDate, TDate>({
   label,
+  isOptional = false,
   onChange,
   value = null,
 }: DatePickerProps<TInputDate, TDate>) => {
-  const renderInput = useCallback(({ InputProps, ...props }) => {
-    const combinedProps = {
-      ...InputProps,
-      ...props,
-    };
+  const renderInput = useCallback(
+    ({ InputProps, ...props }) => {
+      const combinedProps = {
+        ...InputProps,
+        ...props,
+      };
 
-    return <InputBase {...combinedProps} />;
-  }, []);
+      return <InputBase {...combinedProps} required={!isOptional} />;
+    },
+    [isOptional]
+  );
 
   return (
     <MuiDatePicker