@okta/odyssey-react-mui 1.10.3 → 1.11.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okta/odyssey-react-mui",
-  "version": "1.10.3",
+  "version": "1.11.1",
   "description": "React MUI components for Odyssey, Okta's design system",
   "author": "Okta, Inc.",
   "license": "Apache-2.0",
@@ -51,7 +51,7 @@
     "@mui/system": "^5.14.9",
     "@mui/utils": "^5.11.2",
     "@mui/x-date-pickers": "^5.0.15",
-    "@okta/odyssey-design-tokens": "1.10.3",
+    "@okta/odyssey-design-tokens": "1.11.1",
     "date-fns": "^2.30.0",
     "i18next": "^23.5.1",
     "material-react-table": "^2.0.2",
@@ -63,5 +63,5 @@
     "react": ">=17 <19",
     "react-dom": ">=17 <19"
   },
-  "gitHead": "a6212214c614cc9e2b6199d805e253d4fad586a4"
+  "gitHead": "3318d342f74b82e7b957bf881007fe0f78556635"
 }

package/src/@types/react-augment.d.ts

@@ -11,13 +11,17 @@
  */
 
 import { FC } from "react";
-
 export interface ForwardRefWithType extends FC<WithForwardRefProps<Option>> {
   <T extends Option>(props: WithForwardRefProps<T>): ReturnType<
     FC<WithForwardRefProps<T>>
   >;
 }
 
-export type FocusHandle = {
-  focus: () => void;
-};
+declare module "react" {
+  type DataAttributeKey = `data-${string}`;
+  interface InputHTMLAttributes<T> extends HTMLAttributes<T> {
+    // Allows data-* props to be passed to inputProps in nested MUI components
+    // see: https://github.com/mui/material-ui/issues/20160
+    [dataAttribute: DataAttributeKey]: string | undefined;
+  }
+}

package/src/Accordion.tsx

@@ -20,12 +20,17 @@ import {
 } from "@mui/material";
 import { ChevronDownIcon } from "./icons.generated";
 import { Support } from "./Typography";
+import { useUniqueId } from "./useUniqueId";
 
 export type AccordionProps = {
   /**
    * The content of the Accordion itself
    */
   children: ReactNode;
+  /**
+   * Defines IDs for the header and the content of the Accordion
+   */
+  id?: string;
   /**
    * The label text for the AccordionSummary
    */
@@ -66,12 +71,16 @@ const Accordion = ({
   children,
   label,
   hasShadow = true,
+  id: idOverride,
   isDefaultExpanded,
   isDisabled,
   isExpanded,
   onChange,
   translate,
 }: AccordionProps) => {
+  const id = useUniqueId(idOverride);
+  const headerId = `${id}-header`;
+  const contentId = `${id}-content`;
   return (
     <MuiAccordion
       defaultExpanded={isDefaultExpanded}
@@ -81,12 +90,18 @@ const Accordion = ({
       onChange={onChange}
       className={hasShadow ? `hasShadow` : undefined}
     >
-      <MuiAccordionSummary expandIcon={<ChevronDownIcon />}>
+      <MuiAccordionSummary
+        aria-controls={contentId}
+        expandIcon={<ChevronDownIcon />}
+        id={headerId}
+      >
         <Support component="div" translate={translate}>
           {label}
         </Support>
       </MuiAccordionSummary>
-      <MuiAccordionDetails>{children}</MuiAccordionDetails>
+      <MuiAccordionDetails aria-labelledby={headerId}>
+        {children}
+      </MuiAccordionDetails>
     </MuiAccordion>
   );
 };

package/src/Autocomplete.tsx

@@ -267,6 +267,7 @@ const Autocomplete = <
               ...params.inputProps,
               "aria-errormessage": errorMessageElementId,
               "aria-labelledby": labelElementId,
+              "data-se": testId,
             }}
             aria-describedby={ariaDescribedBy}
             id={id}
@@ -284,6 +285,7 @@ const Autocomplete = <
       isOptional,
       label,
       nameOverride,
+      testId,
     ]
   );
   const onChange = useCallback<
@@ -324,7 +326,6 @@ const Autocomplete = <
       {...inputValueProp}
       // 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}

package/src/Button.tsx

@@ -23,7 +23,7 @@ import {
 import { MuiPropsContext, useMuiProps } from "./MuiPropsContext";
 import { Tooltip } from "./Tooltip";
 import type { AllowedProps } from "./AllowedProps";
-import { FocusHandle } from "./@types/react-augment";
+import { FocusHandle } from "./inputUtils";
 
 export const buttonSizeValues = ["small", "medium", "large"] as const;
 export const buttonTypeValues = ["button", "submit", "reset"] as const;
@@ -49,9 +49,9 @@ export type ButtonProps = {
    */
   ariaDescribedBy?: string;
   /**
-   * The ref forwarded to the Button to expose focus()
+   * The ref forwarded to the Button
    */
-  buttonFocusRef?: React.RefObject<FocusHandle>;
+  buttonRef?: React.RefObject<FocusHandle>;
   /**
    * The icon element to display at the end of the Button
    */
@@ -119,7 +119,7 @@ const Button = ({
   ariaDescribedBy,
   ariaLabel,
   ariaLabelledBy,
-  buttonFocusRef,
+  buttonRef,
   endIcon,
   id,
   isDisabled,
@@ -136,14 +136,13 @@ const Button = ({
 }: ButtonProps) => {
   const muiProps = useMuiProps();
 
-  const ref = useRef<HTMLButtonElement>(null);
+  const localButtonRef = useRef<HTMLButtonElement>(null);
   useImperativeHandle(
-    buttonFocusRef,
+    buttonRef,
     () => {
-      const element = ref.current;
       return {
         focus: () => {
-          element && element.focus();
+          localButtonRef.current?.focus();
         },
       };
     },
@@ -163,7 +162,7 @@ const Button = ({
         fullWidth={isFullWidth}
         id={id}
         onClick={onClick}
-        ref={ref}
+        ref={localButtonRef}
         size={size}
         startIcon={startIcon}
         translate={translate}

package/src/Checkbox.tsx

@@ -23,9 +23,12 @@ import {
 import { FieldComponentProps } from "./FieldComponentProps";
 import { Typography } from "./Typography";
 import type { AllowedProps } from "./AllowedProps";
-import { ComponentControlledState, getControlState } from "./inputUtils";
+import {
+  ComponentControlledState,
+  FocusHandle,
+  getControlState,
+} from "./inputUtils";
 import { CheckedFieldProps } from "./FormCheckedProps";
-import { FocusHandle } from "./@types/react-augment";
 
 export const checkboxValidityValues = ["valid", "invalid", "inherit"] as const;
 
@@ -43,9 +46,9 @@ export type CheckboxProps = {
    */
   id?: string;
   /**
-   * The ref forwarded to the Checkbox to expose focus()
+   * The ref forwarded to the Checkbox
    */
-  inputFocusRef?: React.RefObject<FocusHandle>;
+  inputRef?: React.RefObject<FocusHandle>;
   /**
    * Determines whether the Checkbox is disabled
    */
@@ -86,7 +89,7 @@ const Checkbox = ({
   ariaLabel,
   ariaLabelledBy,
   id: idOverride,
-  inputFocusRef,
+  inputRef,
   isChecked,
   isDefaultChecked,
   isDisabled,
@@ -116,14 +119,13 @@ const Checkbox = ({
     return { defaultChecked: isDefaultChecked };
   }, [isDefaultChecked, isChecked]);
 
-  const inputRef = useRef<HTMLInputElement>(null);
+  const localInputRef = useRef<HTMLInputElement>(null);
   useImperativeHandle(
-    inputFocusRef,
+    inputRef,
     () => {
-      const element = inputRef.current;
       return {
         focus: () => {
-          element && element.focus();
+          localInputRef.current?.focus();
         },
       };
     },
@@ -179,13 +181,15 @@ const Checkbox = ({
           indeterminate={isIndeterminate}
           onChange={onChange}
           required={isRequired}
-          inputRef={inputRef}
+          inputProps={{
+            "data-se": testId,
+          }}
+          inputRef={localInputRef}
           sx={() => ({
             marginBlockStart: "2px",
           })}
         />
       }
-      data-se={testId}
       disabled={isDisabled}
       id={idOverride}
       label={label}

package/src/CheckboxGroup.tsx

@@ -39,6 +39,7 @@ export type CheckboxGroupProps = {
   | "errorMessageList"
   | "hint"
   | "HintLinkComponent"
+  | "id"
   | "isDisabled"
 > &
   AllowedProps;
@@ -49,6 +50,7 @@ const CheckboxGroup = ({
   errorMessageList,
   hint,
   HintLinkComponent,
+  id: idOverride,
   isDisabled,
   isRequired = false,
   label,
@@ -56,12 +58,13 @@ const CheckboxGroup = ({
   translate,
 }: CheckboxGroupProps) => {
   const renderFieldComponent = useCallback(
-    ({ ariaDescribedBy, errorMessageElementId, labelElementId }) => (
+    ({ ariaDescribedBy, errorMessageElementId, id, labelElementId }) => (
       <MuiFormGroup
         aria-describedby={ariaDescribedBy}
         aria-errormessage={errorMessageElementId}
         aria-labelledby={labelElementId}
         data-se={testId}
+        id={id}
         translate={translate}
       >
         {children}
@@ -78,6 +81,7 @@ const CheckboxGroup = ({
       hasVisibleLabel={true}
       hint={hint}
       HintLinkComponent={HintLinkComponent}
+      id={idOverride}
       isDisabled={isDisabled}
       isOptional={!isRequired}
       label={label}

package/src/Link.tsx

@@ -13,9 +13,9 @@
 import { memo, ReactElement, useImperativeHandle, useRef } from "react";
 import { ExternalLinkIcon } from "./icons.generated";
 import type { AllowedProps } from "./AllowedProps";
+import { FocusHandle } from "./inputUtils";
 
 import { Link as MuiLink, LinkProps as MuiLinkProps } from "@mui/material";
-import { FocusHandle } from "./@types/react-augment";
 
 export const linkVariantValues = ["default", "monochrome"] as const;
 
@@ -33,9 +33,9 @@ export type LinkProps = {
    */
   icon?: ReactElement;
   /**
-   * The ref forwarded to the TextField to expose focus()
+   * The ref forwarded to the TextField
    */
-  linkFocusRef?: React.RefObject<FocusHandle>;
+  linkRef?: React.RefObject<FocusHandle>;
   /**
    * The click event handler for the Link
    */
@@ -63,7 +63,7 @@ const Link = ({
   children,
   href,
   icon,
-  linkFocusRef,
+  linkRef,
   rel,
   target,
   testId,
@@ -71,14 +71,13 @@ const Link = ({
   variant,
   onClick,
 }: LinkProps) => {
-  const ref = useRef<HTMLAnchorElement>(null);
+  const localLinkRef = useRef<HTMLAnchorElement>(null);
   useImperativeHandle(
-    linkFocusRef,
+    linkRef,
     () => {
-      const element = ref.current;
       return {
         focus: () => {
-          element && element.focus();
+          localLinkRef.current?.focus();
         },
       };
     },
@@ -89,7 +88,7 @@ const Link = ({
     <MuiLink
       data-se={testId}
       href={href}
-      ref={ref}
+      ref={localLinkRef}
       rel={rel}
       target={target}
       translate={translate}

package/src/NativeSelect.tsx

@@ -11,10 +11,12 @@
  */
 
 import React, {
+  InputHTMLAttributes,
   ReactElement,
   forwardRef,
   memo,
   useCallback,
+  useImperativeHandle,
   useMemo,
   useRef,
 } from "react";
@@ -25,7 +27,7 @@ import {
 import { Field } from "./Field";
 import { FieldComponentProps } from "./FieldComponentProps";
 import type { AllowedProps } from "./AllowedProps";
-import { getControlState, useInputValues } from "./inputUtils";
+import { FocusHandle, getControlState, useInputValues } from "./inputUtils";
 import { ForwardRefWithType } from "./@types/react-augment";
 
 export type NativeSelectOption = {
@@ -41,6 +43,12 @@ export type NativeSelectProps<
   Value extends NativeSelectValueType<HasMultipleChoices>,
   HasMultipleChoices extends boolean
 > = {
+  /**
+   * This prop helps users to fill forms faster, especially on mobile devices.
+   * The name can be confusing, as it's more like an autofill.
+   * @see https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill
+   */
+  autoCompleteType?: InputHTMLAttributes<HTMLInputElement>["autoComplete"];
   /**
    * The options or optgroup elements within the NativeSelect
    */
@@ -53,6 +61,10 @@ export type NativeSelectProps<
    * If `true`, the Select allows multiple selections
    */
   hasMultipleChoices?: HasMultipleChoices;
+  /**
+   * The ref forwarded to the NativeSelect
+   */
+  inputRef?: React.RefObject<FocusHandle>;
   /**
    * @deprecated Use `hasMultipleChoices` instead
    */
@@ -98,6 +110,7 @@ const NativeSelect: ForwardRefWithType = forwardRef(
     HasMultipleChoices extends boolean
   >(
     {
+      autoCompleteType,
       defaultValue,
       errorMessage,
       errorMessageList,
@@ -105,6 +118,7 @@ const NativeSelect: ForwardRefWithType = forwardRef(
       hint,
       HintLinkComponent,
       id: idOverride,
+      inputRef,
       isDisabled = false,
       isFullWidth = false,
       isMultiSelect,
@@ -126,6 +140,20 @@ const NativeSelect: ForwardRefWithType = forwardRef(
         uncontrolledValue: defaultValue,
       })
     );
+    const localInputRef = useRef<HTMLSelectElement>(null);
+
+    useImperativeHandle(
+      inputRef,
+      () => {
+        return {
+          focus: () => {
+            localInputRef.current?.focus();
+          },
+        };
+      },
+      []
+    );
+
     const inputValues = useInputValues({
       defaultValue,
       value,
@@ -153,13 +181,15 @@ const NativeSelect: ForwardRefWithType = forwardRef(
         <MuiSelect
           {...inputValues}
           aria-describedby={ariaDescribedBy}
+          autoComplete={autoCompleteType}
           children={children}
-          data-se={testId}
           id={idOverride}
           inputProps={{
             "aria-errormessage": errorMessageElementId,
             "aria-labelledby": labelElementId,
+            "data-se": testId,
           }}
+          inputRef={localInputRef}
           name={idOverride}
           multiple={hasMultipleChoices}
           native={true}
@@ -171,6 +201,7 @@ const NativeSelect: ForwardRefWithType = forwardRef(
         />
       ),
       [
+        autoCompleteType,
         children,
         idOverride,
         inputValues,

package/src/PasswordField.tsx

@@ -27,8 +27,7 @@ import { Field } from "./Field";
 import { FieldComponentProps } from "./FieldComponentProps";
 import type { AllowedProps } from "./AllowedProps";
 import { useTranslation } from "react-i18next";
-import { getControlState, useInputValues } from "./inputUtils";
-import { FocusHandle } from "./@types/react-augment";
+import { FocusHandle, getControlState, useInputValues } from "./inputUtils";
 
 export type PasswordFieldProps = {
   /**
@@ -50,9 +49,9 @@ export type PasswordFieldProps = {
    */
   hasShowPassword?: boolean;
   /**
-   * The ref forwarded to the TextField to expose focus()
+   * The ref forwarded to the TextField
    */
-  inputFocusRef?: React.RefObject<FocusHandle>;
+  inputRef?: React.RefObject<FocusHandle>;
   /**
    * The label for the `input` element.
    */
@@ -90,7 +89,7 @@ const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
       hasInitialFocus,
       hint,
       id: idOverride,
-      inputFocusRef,
+      inputRef,
       isDisabled = false,
       isFullWidth = false,
       isOptional = false,
@@ -129,14 +128,13 @@ const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
       controlState: controlledStateRef.current,
     });
 
-    const inputRef = useRef<HTMLInputElement>(null);
+    const localInputRef = useRef<HTMLInputElement>(null);
     useImperativeHandle(
-      inputFocusRef,
+      inputRef,
       () => {
-        const element = inputRef.current;
         return {
           focus: () => {
-            element && element.focus();
+            localInputRef.current?.focus();
           },
         };
       },
@@ -160,16 +158,17 @@ const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
           autoComplete={inputType === "password" ? autoCompleteType : "off"}
           /* eslint-disable-next-line jsx-a11y/no-autofocus */
           autoFocus={hasInitialFocus}
-          data-se={testId}
           endAdornment={
             hasShowPassword && (
               <InputAdornment position="end">
                 <IconButton
+                  aria-controls={id}
                   aria-label={
                     inputType === "password"
                       ? t("passwordfield.icon.label.show")
                       : t("passwordfield.icon.label.hide")
                   }
+                  aria-pressed={inputType === "text"}
                   onClick={togglePasswordVisibility}
                 >
                   {inputType === "password" ? <ShowIcon /> : <HideIcon />}
@@ -181,10 +180,11 @@ const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
           inputProps={{
             "aria-errormessage": errorMessageElementId,
             "aria-labelledby": labelElementId,
+            "data-se": testId,
             // role: "textbox" Added because password inputs don't have an implicit role assigned. This causes problems with element selection.
             role: "textbox",
           }}
-          inputRef={inputRef}
+          inputRef={localInputRef}
           name={nameOverride ?? id}
           onChange={onChange}
           onFocus={onFocus}

package/src/Radio.tsx

@@ -20,13 +20,13 @@ import { memo, useCallback, useRef, useImperativeHandle } from "react";
 
 import { FieldComponentProps } from "./FieldComponentProps";
 import type { AllowedProps } from "./AllowedProps";
-import { FocusHandle } from "./@types/react-augment";
+import { FocusHandle } from "./inputUtils";
 
 export type RadioProps = {
   /**
-   * The ref forwarded to the Radio to expose focus()
+   * The ref forwarded to the Radio
    */
-  inputFocusRef?: React.RefObject<FocusHandle>;
+  inputRef?: React.RefObject<FocusHandle>;
   /**
    * If `true`, the Radio is selected
    */
@@ -55,7 +55,7 @@ export type RadioProps = {
   AllowedProps;
 
 const Radio = ({
-  inputFocusRef,
+  inputRef,
   isChecked,
   isDisabled,
   isInvalid,
@@ -67,14 +67,13 @@ const Radio = ({
   onChange: onChangeProp,
   onBlur: onBlurProp,
 }: RadioProps) => {
-  const ref = useRef<HTMLInputElement>(null);
+  const localInputRef = useRef<HTMLInputElement>(null);
   useImperativeHandle(
-    inputFocusRef,
+    inputRef,
     () => {
-      const element = ref.current;
       return {
         focus: () => {
-          element && element.focus();
+          localInputRef.current?.focus();
         },
       };
     },
@@ -99,8 +98,15 @@ const Radio = ({
     <FormControlLabel
       checked={isChecked}
       className={isInvalid ? "Mui-error" : ""}
-      control={<MuiRadio inputRef={ref} onChange={onChange} />}
-      data-se={testId}
+      control={
+        <MuiRadio
+          inputProps={{
+            "data-se": testId,
+          }}
+          inputRef={localInputRef}
+          onChange={onChange}
+        />
+      }
       disabled={isDisabled}
       label={label}
       name={name}

package/src/Select.tsx

@@ -36,10 +36,10 @@ import { CheckIcon } from "./icons.generated";
 import type { AllowedProps } from "./AllowedProps";
 import {
   ComponentControlledState,
+  FocusHandle,
   useInputValues,
   getControlState,
 } from "./inputUtils";
-import { FocusHandle } from "./@types/react-augment";
 
 export type SelectOption = {
   text: string;
@@ -63,9 +63,9 @@ export type SelectProps<
    */
   hasMultipleChoices?: HasMultipleChoices;
   /**
-   * The ref forwarded to the Select to expose focus()
+   * The ref forwarded to the Select
    */
-  inputFocusRef?: React.RefObject<FocusHandle>;
+  inputRef?: React.RefObject<FocusHandle>;
   /**
    * @deprecated Use `hasMultipleChoices` instead.
    */
@@ -136,7 +136,7 @@ const Select = <
   hint,
   HintLinkComponent,
   id: idOverride,
-  inputFocusRef,
+  inputRef,
   isDisabled = false,
   isFullWidth = false,
   isMultiSelect,
@@ -164,15 +164,14 @@ const Select = <
   const [internalSelectedValues, setInternalSelectedValues] = useState(
     controlledStateRef.current === CONTROLLED ? value : defaultValue
   );
-  const inputRef = useRef<HTMLSelectElement>(null);
+  const localInputRef = useRef<HTMLSelectElement>(null);
 
   useImperativeHandle(
-    inputFocusRef,
+    inputRef,
     () => {
-      const element = inputRef.current;
       return {
         focus: () => {
-          element && element.focus();
+          localInputRef.current?.focus();
         },
       };
     },
@@ -290,9 +289,9 @@ const Select = <
         aria-describedby={ariaDescribedBy}
         aria-errormessage={errorMessageElementId}
         children={children}
-        data-se={testId}
         id={id}
-        inputRef={inputRef}
+        inputProps={{ "data-se": testId }}
+        inputRef={localInputRef}
         labelId={labelElementId}
         multiple={hasMultipleChoices}
         name={nameOverride ?? id}