@okta/odyssey-react-mui 1.11.0 → 1.12.0

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.
    */
@@ -97,6 +97,7 @@ export type SelectProps<
   value?: Value;
 } & Pick<
   FieldComponentProps,
+  | "ariaDescribedBy"
   | "errorMessage"
   | "errorMessageList"
   | "hint"
@@ -129,6 +130,7 @@ const Select = <
   Value extends SelectValueType<HasMultipleChoices>,
   HasMultipleChoices extends boolean
 >({
+  ariaDescribedBy,
   defaultValue,
   errorMessage,
   errorMessageList,
@@ -136,7 +138,7 @@ const Select = <
   hint,
   HintLinkComponent,
   id: idOverride,
-  inputFocusRef,
+  inputRef,
   isDisabled = false,
   isFullWidth = false,
   isMultiSelect,
@@ -164,15 +166,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 +291,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}
@@ -319,6 +320,7 @@ const Select = <
 
   return (
     <Field
+      ariaDescribedBy={ariaDescribedBy}
       errorMessage={errorMessage}
       errorMessageList={errorMessageList}
       fieldType="single"

package/src/TextField.tsx

@@ -26,8 +26,7 @@ import { InputAdornment, InputBase } from "@mui/material";
 import { FieldComponentProps } from "./FieldComponentProps";
 import { Field } from "./Field";
 import { AllowedProps } from "./AllowedProps";
-import { useInputValues, getControlState } from "./inputUtils";
-import { FocusHandle } from "./@types/react-augment";
+import { FocusHandle, useInputValues, getControlState } from "./inputUtils";
 
 export const textFieldTypeValues = [
   "email",
@@ -57,9 +56,9 @@ export type TextFieldProps = {
    */
   hasInitialFocus?: boolean;
   /**
-   * The ref forwarded to the TextField to expose focus()
+   * The ref forwarded to the TextField
    */
-  inputFocusRef?: React.RefObject<FocusHandle>;
+  inputRef?: React.RefObject<FocusHandle>;
   /**
    * Hints at the type of data that might be entered by the user while editing the element or its contents
    * @see https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute
@@ -107,6 +106,7 @@ export type TextFieldProps = {
 const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
   (
     {
+      ariaDescribedBy,
       autoCompleteType,
       defaultValue,
       hasInitialFocus,
@@ -116,7 +116,7 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
       hint,
       HintLinkComponent,
       id: idOverride,
-      inputFocusRef,
+      inputRef,
       inputMode,
       isDisabled = false,
       isFullWidth = false,
@@ -149,14 +149,13 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
       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();
           },
         };
       },
@@ -180,7 +179,6 @@ 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" translate={translate}>
@@ -192,9 +190,10 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
           inputProps={{
             "aria-errormessage": errorMessageElementId,
             "aria-labelledby": labelElementId,
+            "data-se": testId,
             inputmode: inputMode,
           }}
-          inputRef={inputRef}
+          inputRef={localInputRef}
           multiline={isMultiline}
           name={nameOverride ?? id}
           onBlur={onBlur}
@@ -239,6 +238,7 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
 
     return (
       <Field
+        ariaDescribedBy={ariaDescribedBy}
         errorMessage={errorMessage}
         errorMessageList={errorMessageList}
         fieldType="single"

package/src/Typography.tsx

@@ -23,7 +23,7 @@ import {
   useImperativeHandle,
 } from "react";
 import { AllowedProps } from "./AllowedProps";
-import { FocusHandle } from "./@types/react-augment";
+import { FocusHandle } from "./inputUtils";
 
 export type TypographyVariantValue =
   | "h1"
@@ -87,9 +87,9 @@ export type TypographyProps = {
    */
   component?: ElementType;
   /**
-   * The ref forwarded to the Typography to expose focus()
+   * The ref forwarded to the Typography
    */
-  typographyFocusRef?: React.RefObject<FocusHandle>;
+  typographyRef?: React.RefObject<FocusHandle>;
   /**
    * The variant of Typography to render.
    */
@@ -105,7 +105,7 @@ const Typography = ({
   component: componentProp,
   testId,
   translate,
-  typographyFocusRef,
+  typographyRef,
   variant = "body",
 }: TypographyProps) => {
   const component = useMemo(() => {
@@ -121,14 +121,13 @@ const Typography = ({
     return componentProp;
   }, [componentProp, variant]);
 
-  const ref = useRef<HTMLElement>(null);
+  const localTypographyRef = useRef<HTMLElement>(null);
   useImperativeHandle(
-    typographyFocusRef,
+    typographyRef,
     () => {
-      const element = ref.current;
       return {
         focus: () => {
-          element && element.focus();
+          localTypographyRef.current?.focus();
         },
       };
     },
@@ -144,7 +143,7 @@ const Typography = ({
       color={color}
       component={component}
       data-se={testId}
-      ref={ref}
+      ref={localTypographyRef}
       tabIndex={-1}
       translate={translate}
       variant={typographyVariantMapping[variant]}

package/src/inputUtils.ts

@@ -12,6 +12,10 @@
 
 import { useMemo } from "react";
 
+export type FocusHandle = {
+  focus: () => void;
+};
+
 type UseControlledStateProps<Value> = {
   controlledValue?: Value;
   uncontrolledValue?: Value;

package/src/labs/Switch.tsx

@@ -186,6 +186,7 @@ const Switch = ({
           "aria-describedby": hintId,
           "aria-label": label,
           "aria-labelledby": labelElementId,
+          "data-se": testId,
         }}
         name={_name ?? id}
         onChange={handleOnChange}
@@ -201,6 +202,7 @@ const Switch = ({
       label,
       labelElementId,
       _name,
+      testId,
     ]
   );
 
@@ -213,7 +215,6 @@ const Switch = ({
       <FormControlLabel
         checked={internalSwitchChecked}
         control={renderSwitchComponent}
-        data-se={testId}
         disabled={isDisabled}
         id={labelElementId}
         label={

package/src/labs/VirtualizedAutocomplete.tsx

@@ -168,7 +168,13 @@ export type AutocompleteProps<
   getIsOptionEqualToValue?: (option: OptionType, value: OptionType) => boolean;
 } & Pick<
   FieldComponentProps,
-  "errorMessage" | "errorMessageList" | "hint" | "id" | "isOptional" | "name"
+  | "ariaDescribedBy"
+  | "errorMessage"
+  | "errorMessageList"
+  | "hint"
+  | "id"
+  | "isOptional"
+  | "name"
 > &
   AllowedProps;
 
@@ -177,6 +183,7 @@ const VirtualizedAutocomplete = <
   HasMultipleChoices extends boolean | undefined,
   IsCustomValueAllowed extends boolean | undefined
 >({
+  ariaDescribedBy,
   defaultValue,
   errorMessage,
   errorMessageList,
@@ -243,6 +250,7 @@ const VirtualizedAutocomplete = <
   const renderInput = useCallback(
     ({ InputLabelProps, InputProps, ...params }) => (
       <Field
+        ariaDescribedBy={ariaDescribedBy}
         errorMessage={errorMessage}
         errorMessageList={errorMessageList}
         fieldType="single"
@@ -264,6 +272,7 @@ const VirtualizedAutocomplete = <
               ...params.inputProps,
               "aria-errormessage": errorMessageElementId,
               "aria-labelledby": labelElementId,
+              "data-se": testId,
             }}
             aria-describedby={ariaDescribedBy}
             id={id}
@@ -273,7 +282,16 @@ const VirtualizedAutocomplete = <
         )}
       />
     ),
-    [errorMessage, errorMessageList, hint, isOptional, label, nameOverride]
+    [
+      ariaDescribedBy,
+      errorMessage,
+      errorMessageList,
+      hint,
+      isOptional,
+      label,
+      nameOverride,
+      testId,
+    ]
   );
   const onChange = useCallback<
     NonNullable<
@@ -313,7 +331,6 @@ const VirtualizedAutocomplete = <
       {...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}