@okta/odyssey-react-mui 1.21.2 → 1.23.0

package/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,15 +44,16 @@ 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 = ({
@@ -68,8 +67,10 @@ const Radio = ({
   testId,
   translate,
   value,
+  isReadOnly,
   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",
+          },
+        }),
+      }}
     />
   );
 };

package/src/RadioGroup.tsx

@@ -14,9 +14,8 @@ import {
   RadioGroup as MuiRadioGroup,
   type RadioGroupProps as MuiRadioGroupProps,
 } from "@mui/material";
-import { memo, ReactNode, useCallback, useRef } from "react";
+import React, { memo, ReactNode, useCallback, useRef, useMemo } from "react";
 
-import { RadioProps } from "./Radio";
 import { Field } from "./Field";
 import {
   FieldComponentProps,
@@ -24,6 +23,7 @@ import {
 } from "./FieldComponentProps";
 import type { HtmlProps } from "./HtmlProps";
 import { getControlState, useInputValues } from "./inputUtils";
+import { Radio, RadioProps } from "./Radio";
 
 export type RadioGroupProps = {
   /**
@@ -45,7 +45,7 @@ export type RadioGroupProps = {
   /**
    * The `value` on the selected Radio
    */
-  value?: RadioProps["value"];
+  value?: string;
 } & Pick<
   FieldComponentProps,
   | "errorMessage"
@@ -54,6 +54,7 @@ export type RadioGroupProps = {
   | "HintLinkComponent"
   | "id"
   | "isDisabled"
+  | "isReadOnly"
   | "name"
 > &
   Pick<HtmlProps, "ariaDescribedBy" | "testId" | "translate">;
@@ -73,6 +74,7 @@ const RadioGroup = ({
   HintLinkComponent,
   id: idOverride,
   isDisabled,
+  isReadOnly = false,
   label,
   name: nameOverride,
   onChange: onChangeProp,
@@ -86,6 +88,7 @@ const RadioGroup = ({
       uncontrolledValue: defaultValue,
     }),
   );
+
   const inputValues = useInputValues({
     defaultValue,
     value,
@@ -93,11 +96,26 @@ const RadioGroup = ({
   });
 
   const onChange = useCallback<NonNullable<MuiRadioGroupProps["onChange"]>>(
-    (event, value) => {
-      onChangeProp?.(event, value);
+    (event, newValue) => {
+      onChangeProp?.(event, newValue);
     },
     [onChangeProp],
   );
+
+  const memoizedChildren = useMemo(
+    () =>
+      React.Children.map(children, (child) => {
+        if (React.isValidElement<RadioProps>(child) && child.type === Radio) {
+          return React.cloneElement(child, {
+            isDisabled: isDisabled,
+            isReadOnly: isReadOnly,
+          });
+        }
+        return child;
+      }),
+    [children, isDisabled, isReadOnly],
+  );
+
   const renderFieldComponent = useCallback(
     ({
       ariaDescribedBy,
@@ -116,10 +134,10 @@ const RadioGroup = ({
         onChange={onChange}
         translate={translate}
       >
-        {children}
+        {memoizedChildren}
       </MuiRadioGroup>
     ),
-    [children, inputValues, nameOverride, onChange, testId, translate],
+    [inputValues, nameOverride, onChange, memoizedChildren, testId, translate],
   );
 
   return (
@@ -133,6 +151,7 @@ const RadioGroup = ({
       HintLinkComponent={HintLinkComponent}
       id={idOverride}
       isDisabled={isDisabled}
+      isReadOnly={isReadOnly}
       label={label}
       renderFieldComponent={renderFieldComponent}
     />

package/src/Select.tsx

@@ -18,7 +18,6 @@ import {
   useRef,
   useState,
   useImperativeHandle,
-  MouseEvent,
 } from "react";
 import {
   Box as MuiBox,
@@ -31,7 +30,6 @@ import {
   SelectChangeEvent,
 } from "@mui/material";
 import { SelectProps as MuiSelectProps } from "@mui/material";
-
 import { Field } from "./Field";
 import {
   FieldComponentProps,
@@ -47,11 +45,48 @@ import {
 } from "./inputUtils";
 import { normalizedKey } from "./useNormalizedKey";
 import styled from "@emotion/styled";
-
 import {
   useOdysseyDesignTokens,
   DesignTokens,
 } from "./OdysseyDesignTokensContext";
+import { TestSelector } from "./test-selectors";
+
+export const SelectTestSelector = {
+  accessibleText: {
+    errorMessage: "errorMessage",
+    hint: "description",
+    label: "label",
+  },
+  children: {
+    list: {
+      accessibleText: {
+        label: "label",
+      },
+      children: {
+        listItem: {
+          accessibleText: {
+            label: "label",
+          },
+          elementSelector: {
+            method: "ByRole",
+            options: {
+              label: "name",
+            },
+            role: "option",
+          },
+        },
+      },
+      isControlledElement: true,
+    },
+  },
+  elementSelector: {
+    method: "ByRole",
+    options: {
+      label: "name",
+    },
+    role: "combobox",
+  },
+} as const satisfies TestSelector;
 
 export type SelectOption = {
   text: string;
@@ -97,16 +132,20 @@ const NonInteractiveIcon = styled(CloseCircleFilledIcon, {
 
 const ChipsInnerContainer = styled(MuiBox, {
   shouldForwardProp: (prop) =>
-    prop !== "odysseyDesignTokens" && prop !== "isInteractive",
+    prop !== "odysseyDesignTokens" &&
+    prop !== "isInteractive" &&
+    prop !== "isReadOnly",
 })<{
   isInteractive?: boolean;
+  isReadOnly?: boolean;
   odysseyDesignTokens: DesignTokens;
 }>`
   display: flex;
   flex-wrap: wrap;
   gap: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing1};
   pointer-events: none;
-  opacity: ${({ isInteractive }) => (isInteractive ? 1 : 0)};
+  opacity: ${({ isInteractive, isReadOnly }) =>
+    isInteractive || isReadOnly ? 1 : 0};
   min-height: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing6};
 `;
 
@@ -168,6 +207,7 @@ export type SelectProps<
   | "isDisabled"
   | "isFullWidth"
   | "isOptional"
+  | "isReadOnly"
   | "name"
 > &
   Pick<HtmlProps, "ariaDescribedBy" | "testId" | "translate">;
@@ -210,6 +250,7 @@ const Select = <
   isFullWidth = false,
   isMultiSelect,
   isOptional = false,
+  isReadOnly = false,
   label,
   name: nameOverride,
   onBlur,
@@ -220,6 +261,8 @@ const Select = <
   translate,
   value,
 }: SelectProps<Value, HasMultipleChoices>) => {
+  const selectRef = useRef<HTMLInputElement | HTMLTextAreaElement | null>(null);
+
   const hasMultipleChoices = useMemo(
     () =>
       hasMultipleChoicesProp === undefined
@@ -227,6 +270,7 @@ const Select = <
         : hasMultipleChoicesProp,
     [hasMultipleChoicesProp, isMultiSelect],
   );
+
   const controlledStateRef = useRef(
     getControlState({
       controlledValue: value,
@@ -266,44 +310,51 @@ const Select = <
 
   const onChange = useCallback<NonNullable<MuiSelectProps<Value>["onChange"]>>(
     (event, child) => {
-      const {
-        target: { value },
-      } = event;
-      if (controlledStateRef.current !== CONTROLLED) {
-        setInternalSelectedValues(
-          (typeof value === "string" && hasMultipleChoices
-            ? value.split(",")
-            : value) as Value,
-        );
+      if (isReadOnly) {
+        event.preventDefault();
+      } else {
+        const {
+          target: { value },
+        } = event;
+        if (controlledStateRef.current !== CONTROLLED) {
+          setInternalSelectedValues(
+            (typeof value === "string" && hasMultipleChoices
+              ? value.split(",")
+              : value) as Value,
+          );
+        }
+        onChangeProp?.(event, child);
       }
-      onChangeProp?.(event, child);
     },
-    [hasMultipleChoices, onChangeProp],
+    [hasMultipleChoices, onChangeProp, isReadOnly],
   );
-
   // Normalize the options array to accommodate the various
   // data types that might be passed
-  const normalizedOptions = useMemo(
-    () =>
-      options.map((option) => {
-        if (typeof option === "object") {
-          /**
-           * If the value of `option?.value is an empty string, we need to make sure that we
-           * set an empty string to `value` in the normalized option so that the select component
-           * can potentially set it as the selected one in the text input
-           */
-          const value =
-            option?.value === "" ? option.value : option.value || option.text;
-          return {
-            text: option.text,
-            value,
-            type: option.type === "heading" ? "heading" : "option",
-          };
-        }
-        return { text: option, value: option, type: "option" };
-      }),
-    [options],
-  );
+  const [normalizedOptions, normalizedOptionsMap] = useMemo(() => {
+    const normalizedOptions = options.map((option) => {
+      if (typeof option === "object") {
+        /**
+         * If the value of `option?.value is an empty string, we need to make sure that we
+         * set an empty string to `value` in the normalized option so that the select component
+         * can potentially set it as the selected one in the text input
+         */
+        const value =
+          option?.value === "" ? option.value : option.value || option.text;
+        return {
+          text: option.text,
+          value,
+          type: option.type === "heading" ? "heading" : "option",
+        };
+      }
+
+      return { text: option, value: option, type: "option" };
+    });
+
+    const normalizedOptionsMap = new Map(
+      normalizedOptions.map((option) => [option.value, option]),
+    );
+    return [normalizedOptions, normalizedOptionsMap];
+  }, [options]);
 
   const removeSelectedValue = useCallback(
     (selectedValue: string) => {
@@ -323,19 +374,25 @@ const Select = <
   );
 
   const Chips = useCallback(
-    ({ isInteractive }: { isInteractive: boolean }) => {
-      const stopPropagation = (event: MouseEvent<SVGSVGElement>) =>
+    ({
+      isInteractive,
+      isReadOnly,
+    }: {
+      isInteractive: boolean;
+      isReadOnly?: boolean;
+    }) => {
+      const stopPropagation = (event: React.MouseEvent<SVGSVGElement>) =>
         event.stopPropagation();
 
       const hasNonInteractiveIcon =
         !isInteractive &&
         controlledStateRef.current === CONTROLLED &&
         hasMultipleChoices;
-
       return (
         Array.isArray(internalSelectedValues) && (
           <ChipsInnerContainer
             isInteractive={isInteractive}
+            isReadOnly={isReadOnly}
             odysseyDesignTokens={odysseyDesignTokens}
           >
             {internalSelectedValues.map(
@@ -345,7 +402,7 @@ const Select = <
                     key={item}
                     label={
                       <>
-                        {item}
+                        {normalizedOptionsMap.get(item)?.text}
                         {hasNonInteractiveIcon && (
                           <NonInteractiveIcon
                             odysseyDesignTokens={odysseyDesignTokens}
@@ -381,6 +438,7 @@ const Select = <
       internalSelectedValues,
       odysseyDesignTokens,
       removeSelectedValue,
+      normalizedOptionsMap,
     ],
   );
 
@@ -401,6 +459,7 @@ const Select = <
 
         return (
           <MuiMenuItem
+            data-empty={!option.text}
             key={normalizedKey(option.text, index.toString())}
             value={option.value}
             selected={isSelected}
@@ -417,6 +476,7 @@ const Select = <
       }),
     [hasMultipleChoices, normalizedOptions, internalSelectedValues],
   );
+
   const renderValue = useCallback(
     (value: Value) => Array.isArray(value) && <Chips isInteractive={false} />,
     [Chips],
@@ -436,8 +496,17 @@ const Select = <
           aria-errormessage={errorMessageElementId}
           displayEmpty
           id={id}
-          inputProps={{ "data-se": testId }}
-          inputRef={localInputRef}
+          inputProps={{
+            "data-se": testId,
+            "aria-disabled": isDisabled || isReadOnly,
+            readOnly: isReadOnly,
+          }}
+          inputRef={(el: HTMLInputElement | HTMLTextAreaElement | null) => {
+            if (localInputRef.current !== el) {
+              (localInputRef as React.MutableRefObject<typeof el>).current = el;
+            }
+            selectRef.current = el;
+          }}
           labelId={labelElementId}
           multiple={hasMultipleChoices}
           name={nameOverride ?? id}
@@ -454,7 +523,7 @@ const Select = <
             <ChipsPositioningContainer
               odysseyDesignTokens={odysseyDesignTokens}
             >
-              <Chips isInteractive={true} />
+              <Chips isInteractive={!isReadOnly} isReadOnly={isReadOnly} />
             </ChipsPositioningContainer>
           </>
         )}
@@ -464,6 +533,8 @@ const Select = <
       Chips,
       inputValues,
       hasMultipleChoices,
+      isDisabled,
+      isReadOnly,
       nameOverride,
       odysseyDesignTokens,
       onBlur,