Read-only support for Checkbox, Radio, Switch [OKTA-731946]

packages/odyssey-react-mui/src/Checkbox.tsx

@@ -61,7 +61,10 @@ export type CheckboxProps = {
    * Callback fired when the blur event happens. Provides event value.
    */
   onBlur?: MuiFormControlLabelProps["onBlur"];
-} & Pick<FieldComponentProps, "hint" | "id" | "isDisabled" | "name"> &
+} & Pick<
+  FieldComponentProps,
+  "hint" | "id" | "isDisabled" | "isReadOnly" | "name"
+> &
   CheckedFieldProps<MuiCheckboxProps> &
   Pick<HtmlProps, "ariaLabel" | "ariaLabelledBy" | "testId" | "translate">;
 
@@ -74,6 +77,7 @@ const Checkbox = ({
   isDefaultChecked,
   isDisabled,
   isIndeterminate,
+  isReadOnly = false,
   isRequired,
   label: labelProp,
   hint,
@@ -102,13 +106,11 @@ const Checkbox = ({
   const localInputRef = useRef<HTMLInputElement>(null);
   useImperativeHandle(
     inputRef,
-    () => {
-      return {
-        focus: () => {
-          localInputRef.current?.focus();
-        },
-      };
-    },
+    () => ({
+      focus: () => {
+        localInputRef.current?.focus();
+      },
+    }),
     [],
   );
 
@@ -136,16 +138,39 @@ const Checkbox = ({
     [onChangeProp],
   );
 
+  const onClick = useCallback<NonNullable<MuiCheckboxProps["onClick"]>>(
+    (event) => {
+      if (isReadOnly) {
+        event.stopPropagation();
+        event.preventDefault();
+      }
+    },
+    [isReadOnly],
+  );
+
   const onBlur = useCallback<NonNullable<MuiFormControlLabelProps["onBlur"]>>(
     (event) => {
       onBlurProp?.(event);
     },
     [onBlurProp],
   );
 
+  const checkboxStyles = useMemo(
+    () => ({
+      alignItems: "flex-start",
+      ...(isReadOnly && {
+        cursor: "default",
+        "& .MuiTypography-root": {
+          cursor: "default",
+        },
+      }),
+    }),
+    [isReadOnly],
+  );
+
   return (
     <FormControlLabel
-      sx={{ alignItems: "flex-start" }}
+      sx={checkboxStyles}
       aria-label={ariaLabel}
       aria-labelledby={ariaLabelledBy}
       className={
@@ -160,9 +185,14 @@ const Checkbox = ({
           {...inputValues}
           indeterminate={isIndeterminate}
           onChange={onChange}
+          onClick={
+            onClick as unknown as React.MouseEventHandler<HTMLButtonElement>
+          }
           required={isRequired}
           inputProps={{
             "data-se": testId,
+            "aria-readonly": isReadOnly,
+            readOnly: isReadOnly,
           }}
           disabled={isDisabled}
           inputRef={localInputRef}

packages/odyssey-react-mui/src/CheckboxGroup.tsx

@@ -10,9 +10,9 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
+import React, { memo, ReactNode, useCallback, useMemo } from "react";
 import { FormGroup as MuiFormGroup } from "@mui/material";
-import { memo, ReactNode, useCallback } from "react";
-
+import { CheckboxProps } from "./Checkbox";
 import { Field } from "./Field";
 import {
   FieldComponentProps,
@@ -41,6 +41,7 @@ export type CheckboxGroupProps = {
   | "HintLinkComponent"
   | "id"
   | "isDisabled"
+  | "isReadOnly"
 > &
   Pick<HtmlProps, "ariaDescribedBy" | "testId" | "translate">;
 
@@ -61,11 +62,26 @@ const CheckboxGroup = ({
   HintLinkComponent,
   id: idOverride,
   isDisabled,
+  isReadOnly = false,
   isRequired = false,
   label,
   testId,
   translate,
 }: CheckboxGroupProps) => {
+  const memoizedChildren = useMemo(
+    () =>
+      React.Children.map(children, (child) => {
+        if (React.isValidElement<CheckboxProps>(child)) {
+          return React.cloneElement(child, {
+            isReadOnly,
+            isDisabled: isDisabled || child.props.isDisabled,
+          });
+        }
+        return child;
+      }),
+    [children, isReadOnly, isDisabled],
+  );
+
   const renderFieldComponent = useCallback(
     ({
       ariaDescribedBy,
@@ -81,10 +97,10 @@ const CheckboxGroup = ({
         id={id}
         translate={translate}
       >
-        {children}
+        {memoizedChildren}
       </MuiFormGroup>
     ),
-    [children, testId, translate],
+    [memoizedChildren, testId, translate],
   );
 
   return (

packages/odyssey-react-mui/src/Field.tsx

@@ -11,12 +11,10 @@
  */
 
 import { memo, ReactElement, useMemo } from "react";
-
 import {
   FormControl as MuiFormControl,
   FormLabel as MuiFormLabel,
 } from "@mui/material";
-
 import { FieldComponentProps } from "./FieldComponentProps";
 import { FieldError } from "./FieldError";
 import { FieldHint } from "./FieldHint";
@@ -35,6 +33,7 @@ export type RenderFieldComponentProps = {
   errorMessageElementId?: string;
   id: string;
   labelElementId: string;
+  isReadOnly?: boolean;
 };
 
 export type FieldProps = {
@@ -75,6 +74,7 @@ export type FieldProps = {
     errorMessageElementId,
     id,
     labelElementId,
+    isReadOnly,
   }: RenderFieldComponentProps) => ReactElement;
 };
 
@@ -91,6 +91,7 @@ const Field = ({
   isFullWidth = false,
   isRadioGroup = false,
   isOptional = false,
+  isReadOnly = false,
   label,
   renderFieldComponent,
 }: FieldProps &
@@ -104,6 +105,7 @@ const Field = ({
     | "isDisabled"
     | "isFullWidth"
     | "isOptional"
+    | "isReadOnly"
   > &
   Pick<HtmlProps, "ariaDescribedBy">) => {
   const { t } = useTranslation();
@@ -167,6 +169,7 @@ const Field = ({
         errorMessageElementId,
         id,
         labelElementId,
+        isReadOnly,
       })}
 
       {(errorMessage || errorMessageList) && (

packages/odyssey-react-mui/src/Radio.tsx

@@ -17,9 +17,7 @@ import {
   Radio as MuiRadio,
   RadioProps as MuiRadioProps,
 } from "@mui/material";
-
 import { memo, useCallback, useMemo, useRef, useImperativeHandle } from "react";
-
 import { FieldComponentProps } from "./FieldComponentProps";
 import type { HtmlProps } from "./HtmlProps";
 import { FocusHandle } from "./inputUtils";
@@ -31,11 +29,11 @@ export type RadioProps = {
    */
   inputRef?: React.RefObject<FocusHandle>;
   /**
-   * If `true`, the Radio is selected
+   * Determines whether the Radio button is checked
    */
   isChecked?: boolean;
   /**
-   * If `true`, the Radio has an invalid value
+   * If `true`, the radio button has an invalid value
    */
   isInvalid?: boolean;
   /**
@@ -46,30 +44,33 @@ export type RadioProps = {
    * The value attribute of the Radio
    */
   value: string;
-  /**
-   * Callback fired when the state is changed. Provides event and checked value.
-   */
-  onChange?: MuiRadioProps["onChange"];
   /**
    * Callback fired when the blur event happens. Provides event value.
    */
+  onChange?: MuiRadioProps["onChange"];
   onBlur?: MuiFormControlLabelProps["onBlur"];
-} & Pick<FieldComponentProps, "hint" | "id" | "isDisabled" | "name"> &
+  onClick?: React.MouseEventHandler<HTMLSpanElement>;
+} & Pick<
+  FieldComponentProps,
+  "hint" | "id" | "isDisabled" | "isReadOnly" | "name"
+> &
   Pick<HtmlProps, "testId" | "translate">;
 
 const Radio = ({
   hint,
   inputRef,
   isChecked,
-  isDisabled,
+  isDisabled = false,
   isInvalid,
   label: labelProp,
   name,
   testId,
   translate,
   value,
+  isReadOnly = false,
   onChange: onChangeProp,
   onBlur: onBlurProp,
+  onClick,
 }: RadioProps) => {
   const localInputRef = useRef<HTMLInputElement>(null);
   useImperativeHandle(
@@ -95,10 +96,25 @@ const Radio = ({
   );
 
   const onChange = useCallback<NonNullable<MuiRadioProps["onChange"]>>(
-    (event, checked) => onChangeProp?.(event, checked),
-    [onChangeProp],
+    (event, checked) => {
+      if (isReadOnly) {
+        event.preventDefault();
+      } else {
+        onChangeProp?.(event, checked);
+      }
+    },
+    [onChangeProp, isReadOnly],
   );
 
+  const handleClick = useCallback<React.MouseEventHandler<HTMLSpanElement>>(
+    (event) => {
+      if (isReadOnly) {
+        event.stopPropagation();
+        event.preventDefault();
+      }
+    },
+    [isReadOnly],
+  );
   const onBlur = useCallback<NonNullable<MuiFormControlLabelProps["onBlur"]>>(
     (event) => {
       onBlurProp?.(event);
@@ -114,17 +130,30 @@ const Radio = ({
         <MuiRadio
           inputProps={{
             "data-se": testId,
+            "aria-disabled": isDisabled || isReadOnly,
+            readOnly: isReadOnly,
+            tabIndex: isReadOnly ? 0 : undefined,
           }}
           inputRef={localInputRef}
           onChange={onChange}
+          onClick={onClick || handleClick}
+          disabled={isDisabled}
         />
       }
-      disabled={isDisabled}
       label={label}
       name={name}
       translate={translate}
       value={value}
       onBlur={onBlur}
+      disabled={isDisabled}
+      sx={{
+        ...(isReadOnly && {
+          cursor: "default",
+          "& .MuiTypography-root": {
+            cursor: "default",
+          },
+        }),
+      }}
     />
   );
 };