@okta/odyssey-react-mui 1.9.9 → 1.9.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okta/odyssey-react-mui",
-  "version": "1.9.9",
+  "version": "1.9.11",
   "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.9.9",
+    "@okta/odyssey-design-tokens": "1.9.11",
     "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": "e91a8bc9b3b1c85c0ea5dd20e47f75eeea4c5101"
+  "gitHead": "0482f9184d2bb88f465ed5b9296806bc540e1fa3"
 }

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

@@ -17,3 +17,7 @@ export interface ForwardRefWithType extends FC<WithForwardRefProps<Option>> {
     FC<WithForwardRefProps<T>>
   >;
 }
+
+export type FocusHandle = {
+  focus: () => void;
+};

package/src/Button.tsx

@@ -12,11 +12,18 @@
 
 import { Button as MuiButton } from "@mui/material";
 import type { ButtonProps as MuiButtonProps } from "@mui/material";
-import { memo, ReactElement, useCallback } from "react";
+import {
+  memo,
+  ReactElement,
+  useCallback,
+  useImperativeHandle,
+  useRef,
+} from "react";
 
 import { MuiPropsContext, useMuiProps } from "./MuiPropsContext";
 import { Tooltip } from "./Tooltip";
 import type { SeleniumProps } from "./SeleniumProps";
+import { FocusHandle } from "./@types/react-augment";
 
 export const buttonSizeValues = ["small", "medium", "large"] as const;
 export const buttonTypeValues = ["button", "submit", "reset"] as const;
@@ -41,6 +48,10 @@ export type ButtonProps = {
    * The ID of the element that describes the Button
    */
   ariaDescribedBy?: string;
+  /**
+   * The ref forwarded to the Button to expose focus()
+   */
+  buttonFocusRef?: React.RefObject<FocusHandle>;
   /**
    * The icon element to display at the end of the Button
    */
@@ -108,6 +119,7 @@ const Button = ({
   ariaDescribedBy,
   ariaLabel,
   ariaLabelledBy,
+  buttonFocusRef,
   endIcon,
   id,
   isDisabled,
@@ -123,6 +135,20 @@ const Button = ({
 }: ButtonProps) => {
   const muiProps = useMuiProps();
 
+  const ref = useRef<HTMLButtonElement>(null);
+  useImperativeHandle(
+    buttonFocusRef,
+    () => {
+      const element = ref.current;
+      return {
+        focus: () => {
+          element && element.focus();
+        },
+      };
+    },
+    []
+  );
+
   const renderButton = useCallback(
     (muiProps) => (
       <MuiButton
@@ -136,6 +162,7 @@ const Button = ({
         fullWidth={isFullWidth}
         id={id}
         onClick={onClick}
+        ref={ref}
         size={size}
         startIcon={startIcon}
         type={type}

package/src/Checkbox.tsx

@@ -11,7 +11,7 @@
  */
 
 import { useTranslation } from "react-i18next";
-import { memo, useCallback, useMemo, useRef } from "react";
+import { memo, useCallback, useMemo, useRef, useImperativeHandle } from "react";
 import {
   Checkbox as MuiCheckbox,
   CheckboxProps as MuiCheckboxProps,
@@ -25,6 +25,7 @@ import { Typography } from "./Typography";
 import type { SeleniumProps } from "./SeleniumProps";
 import { ComponentControlledState, getControlState } from "./inputUtils";
 import { CheckedFieldProps } from "./FormCheckedProps";
+import { FocusHandle } from "./@types/react-augment";
 
 export const checkboxValidityValues = ["valid", "invalid", "inherit"] as const;
 
@@ -41,6 +42,10 @@ export type CheckboxProps = {
    * The id of the `input` element.
    */
   id?: string;
+  /**
+   * The ref forwarded to the Checkbox to expose focus()
+   */
+  inputFocusRef?: React.RefObject<FocusHandle>;
   /**
    * Determines whether the Checkbox is disabled
    */
@@ -81,6 +86,7 @@ const Checkbox = ({
   ariaLabel,
   ariaLabelledBy,
   id: idOverride,
+  inputFocusRef,
   isChecked,
   isDefaultChecked,
   isDisabled,
@@ -109,6 +115,20 @@ const Checkbox = ({
     return { defaultChecked: isDefaultChecked };
   }, [isDefaultChecked, isChecked]);
 
+  const inputRef = useRef<HTMLInputElement>(null);
+  useImperativeHandle(
+    inputFocusRef,
+    () => {
+      const element = inputRef.current;
+      return {
+        focus: () => {
+          element && element.focus();
+        },
+      };
+    },
+    []
+  );
+
   const label = useMemo(() => {
     return (
       <>
@@ -158,6 +178,7 @@ const Checkbox = ({
           indeterminate={isIndeterminate}
           onChange={onChange}
           required={isRequired}
+          inputRef={inputRef}
           sx={() => ({
             marginBlockStart: "2px",
           })}

package/src/Link.tsx

@@ -10,11 +10,12 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { memo, ReactElement } from "react";
+import { memo, ReactElement, useImperativeHandle, useRef } from "react";
 import { ExternalLinkIcon } from "./icons.generated";
 import type { SeleniumProps } from "./SeleniumProps";
 
 import { Link as MuiLink, LinkProps as MuiLinkProps } from "@mui/material";
+import { FocusHandle } from "./@types/react-augment";
 
 export const linkVariantValues = ["default", "monochrome"] as const;
 
@@ -31,6 +32,10 @@ export type LinkProps = {
    * An optional Icon component at the start of the Link
    */
   icon?: ReactElement;
+  /**
+   * The ref forwarded to the TextField to expose focus()
+   */
+  linkFocusRef?: React.RefObject<FocusHandle>;
   /**
    * The click event handler for the Link
    */
@@ -58,31 +63,49 @@ const Link = ({
   children,
   href,
   icon,
+  linkFocusRef,
   rel,
   target,
   testId,
   variant,
   onClick,
-}: LinkProps) => (
-  <MuiLink
-    data-se={testId}
-    href={href}
-    rel={rel}
-    target={target}
-    variant={variant}
-    onClick={onClick}
-  >
-    {icon && <span className="Link-icon">{icon}</span>}
+}: LinkProps) => {
+  const ref = useRef<HTMLAnchorElement>(null);
+  useImperativeHandle(
+    linkFocusRef,
+    () => {
+      const element = ref.current;
+      return {
+        focus: () => {
+          element && element.focus();
+        },
+      };
+    },
+    []
+  );
+
+  return (
+    <MuiLink
+      data-se={testId}
+      href={href}
+      ref={ref}
+      rel={rel}
+      target={target}
+      variant={variant}
+      onClick={onClick}
+    >
+      {icon && <span className="Link-icon">{icon}</span>}
 
-    {children}
+      {children}
 
-    {target === "_blank" && (
-      <span className="Link-indicator" role="presentation">
-        <ExternalLinkIcon />
-      </span>
-    )}
-  </MuiLink>
-);
+      {target === "_blank" && (
+        <span className="Link-indicator" role="presentation">
+          <ExternalLinkIcon />
+        </span>
+      )}
+    </MuiLink>
+  );
+};
 
 const MemoizedLink = memo(Link);
 

package/src/PasswordField.tsx

@@ -17,6 +17,7 @@ import {
   forwardRef,
   memo,
   useCallback,
+  useImperativeHandle,
   useRef,
   useState,
 } from "react";
@@ -27,6 +28,7 @@ import { FieldComponentProps } from "./FieldComponentProps";
 import type { SeleniumProps } from "./SeleniumProps";
 import { useTranslation } from "react-i18next";
 import { getControlState, useInputValues } from "./inputUtils";
+import { FocusHandle } from "./@types/react-augment";
 
 export type PasswordFieldProps = {
   /**
@@ -47,6 +49,10 @@ export type PasswordFieldProps = {
    * If `true`, the show/hide icon is not shown to the user
    */
   hasShowPassword?: boolean;
+  /**
+   * The ref forwarded to the TextField to expose focus()
+   */
+  inputFocusRef?: React.RefObject<FocusHandle>;
   /**
    * The label for the `input` element.
    */
@@ -83,6 +89,7 @@ const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
       hasInitialFocus,
       hint,
       id: idOverride,
+      inputFocusRef,
       isDisabled = false,
       isFullWidth = false,
       isOptional = false,
@@ -120,6 +127,20 @@ const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
       controlState: controlledStateRef.current,
     });
 
+    const inputRef = useRef<HTMLInputElement>(null);
+    useImperativeHandle(
+      inputFocusRef,
+      () => {
+        const element = inputRef.current;
+        return {
+          focus: () => {
+            element && element.focus();
+          },
+        };
+      },
+      []
+    );
+
     const onChange = useCallback<
       ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>
     >(
@@ -161,6 +182,7 @@ const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
             // role: "textbox" Added because password inputs don't have an implicit role assigned. This causes problems with element selection.
             role: "textbox",
           }}
+          inputRef={inputRef}
           name={nameOverride ?? id}
           onChange={onChange}
           onFocus={onFocus}

package/src/Radio.tsx

@@ -16,12 +16,17 @@ import {
   Radio as MuiRadio,
   RadioProps as MuiRadioProps,
 } from "@mui/material";
-import { memo, useCallback } from "react";
+import { memo, useCallback, useRef, useImperativeHandle } from "react";
 
 import { FieldComponentProps } from "./FieldComponentProps";
 import type { SeleniumProps } from "./SeleniumProps";
+import { FocusHandle } from "./@types/react-augment";
 
 export type RadioProps = {
+  /**
+   * The ref forwarded to the Radio to expose focus()
+   */
+  inputFocusRef?: React.RefObject<FocusHandle>;
   /**
    * If `true`, the Radio is selected
    */
@@ -50,6 +55,7 @@ export type RadioProps = {
   SeleniumProps;
 
 const Radio = ({
+  inputFocusRef,
   isChecked,
   isDisabled,
   isInvalid,
@@ -60,6 +66,20 @@ const Radio = ({
   onChange: onChangeProp,
   onBlur: onBlurProp,
 }: RadioProps) => {
+  const ref = useRef<HTMLInputElement>(null);
+  useImperativeHandle(
+    inputFocusRef,
+    () => {
+      const element = ref.current;
+      return {
+        focus: () => {
+          element && element.focus();
+        },
+      };
+    },
+    []
+  );
+
   const onChange = useCallback<NonNullable<MuiRadioProps["onChange"]>>(
     (event, checked) => {
       onChangeProp?.(event, checked);
@@ -78,7 +98,7 @@ const Radio = ({
     <FormControlLabel
       checked={isChecked}
       className={isInvalid ? "Mui-error" : ""}
-      control={<MuiRadio onChange={onChange} />}
+      control={<MuiRadio inputRef={ref} onChange={onChange} />}
       data-se={testId}
       disabled={isDisabled}
       label={label}

package/src/Select.tsx

@@ -10,7 +10,15 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  useImperativeHandle,
+} from "react";
 import {
   Box,
   Checkbox as MuiCheckbox,
@@ -31,6 +39,7 @@ import {
   useInputValues,
   getControlState,
 } from "./inputUtils";
+import { FocusHandle } from "./@types/react-augment";
 
 export type SelectOption = {
   text: string;
@@ -53,6 +62,10 @@ export type SelectProps<
    * If `true`, the Select allows multiple selections
    */
   hasMultipleChoices?: HasMultipleChoices;
+  /**
+   * The ref forwarded to the Select to expose focus()
+   */
+  inputFocusRef?: React.RefObject<FocusHandle>;
   /**
    * @deprecated Use `hasMultipleChoices` instead.
    */
@@ -121,6 +134,7 @@ const Select = <
   hint,
   HintLinkComponent,
   id: idOverride,
+  inputFocusRef,
   isDisabled = false,
   isFullWidth = false,
   isMultiSelect,
@@ -147,6 +161,20 @@ const Select = <
   const [internalSelectedValues, setInternalSelectedValues] = useState(
     controlledStateRef.current === CONTROLLED ? value : defaultValue
   );
+  const inputRef = useRef<HTMLSelectElement>(null);
+
+  useImperativeHandle(
+    inputFocusRef,
+    () => {
+      const element = inputRef.current;
+      return {
+        focus: () => {
+          element && element.focus();
+        },
+      };
+    },
+    []
+  );
 
   useEffect(() => {
     if (controlledStateRef.current === CONTROLLED) {
@@ -261,6 +289,7 @@ const Select = <
         children={children}
         data-se={testId}
         id={id}
+        inputRef={inputRef}
         labelId={labelElementId}
         multiple={hasMultipleChoices}
         name={nameOverride ?? id}

package/src/TextField.tsx

@@ -18,6 +18,7 @@ import {
   memo,
   ReactElement,
   useCallback,
+  useImperativeHandle,
   useRef,
 } from "react";
 import { InputAdornment, InputBase } from "@mui/material";
@@ -26,6 +27,7 @@ import { FieldComponentProps } from "./FieldComponentProps";
 import { Field } from "./Field";
 import { SeleniumProps } from "./SeleniumProps";
 import { useInputValues, getControlState } from "./inputUtils";
+import { FocusHandle } from "./@types/react-augment";
 
 export const textFieldTypeValues = [
   "email",
@@ -54,6 +56,10 @@ export type TextFieldProps = {
    * If `true`, the component will receive focus automatically.
    */
   hasInitialFocus?: boolean;
+  /**
+   * The ref forwarded to the TextField to expose focus()
+   */
+  inputFocusRef?: React.RefObject<FocusHandle>;
   /**
    * If `true`, a [TextareaAutosize](/material-ui/react-textarea-autosize/) element is rendered.
    */
@@ -104,6 +110,7 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
       hint,
       HintLinkComponent,
       id: idOverride,
+      inputFocusRef,
       isDisabled = false,
       isFullWidth = false,
       isMultiline = false,
@@ -134,6 +141,20 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
       controlState: controlledStateRef.current,
     });
 
+    const inputRef = useRef<HTMLInputElement>(null);
+    useImperativeHandle(
+      inputFocusRef,
+      () => {
+        const element = inputRef.current;
+        return {
+          focus: () => {
+            element && element.focus();
+          },
+        };
+      },
+      []
+    );
+
     const onChange = useCallback<
       NonNullable<ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>>
     >(
@@ -162,6 +183,7 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
             )
           }
           id={id}
+          inputRef={inputRef}
           multiline={isMultiline}
           name={nameOverride ?? id}
           onBlur={onBlur}

package/src/Typography.tsx

@@ -14,8 +14,16 @@ import {
   Typography as MuiTypography,
   TypographyProps as MuiTypographyProps,
 } from "@mui/material";
-import { ElementType, ReactNode, memo, useMemo } from "react";
+import {
+  ElementType,
+  ReactNode,
+  memo,
+  useMemo,
+  useRef,
+  useImperativeHandle,
+} from "react";
 import { SeleniumProps } from "./SeleniumProps";
+import { FocusHandle } from "./@types/react-augment";
 
 export type TypographyVariantValue =
   | "h1"
@@ -78,6 +86,10 @@ export type TypographyProps = {
    * The HTML element the component should render, if different from the default.
    */
   component?: ElementType;
+  /**
+   * The ref forwarded to the Typography to expose focus()
+   */
+  typographyFocusRef?: React.RefObject<FocusHandle>;
   /**
    * The variant of Typography to render.
    */
@@ -92,6 +104,7 @@ const Typography = ({
   color,
   component: componentProp,
   testId,
+  typographyFocusRef,
   variant = "body",
 }: TypographyProps) => {
   const component = useMemo(() => {
@@ -107,6 +120,20 @@ const Typography = ({
     return componentProp;
   }, [componentProp, variant]);
 
+  const ref = useRef<HTMLElement>(null);
+  useImperativeHandle(
+    typographyFocusRef,
+    () => {
+      const element = ref.current;
+      return {
+        focus: () => {
+          element && element.focus();
+        },
+      };
+    },
+    []
+  );
+
   return (
     <MuiTypography
       aria-describedby={ariaDescribedBy}
@@ -116,6 +143,8 @@ const Typography = ({
       color={color}
       component={component}
       data-se={testId}
+      ref={ref}
+      tabIndex={-1}
       variant={typographyVariantMapping[variant]}
     />
   );

package/src/index.ts

@@ -96,6 +96,7 @@ export * from "./TextField";
 export * from "./theme";
 export * from "./Toast";
 export * from "./ToastStack";
+export * from "./labs/Switch";
 export * from "./Tooltip";
 export * from "./Typography";
 export * from "./useUniqueId";