Change Checkbox onChange and validity

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

@@ -12,12 +12,15 @@
 
 import {
   Checkbox as MuiCheckbox,
+  CheckboxProps as MuiCheckboxProps,
   FormControlLabel,
   Typography,
 } from "@mui/material";
-import { ChangeEventHandler, memo, useMemo } from "react";
+import { memo, useCallback, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 
+export const checkboxValidityValues = ["valid", "invalid", "inherit"] as const;
+
 export type CheckboxProps = {
   /**
    * The ARIA label for the Checkbox
@@ -30,7 +33,7 @@ export type CheckboxProps = {
   /**
    * Determines whether the Checkbox is checked
    */
-  isChecked?: boolean;
+  isDefaultChecked?: boolean;
   /**
    * Determines whether the Checkbox is disabled
    */
@@ -39,18 +42,10 @@ export type CheckboxProps = {
    * Determines whether the Checkbox is in an indeterminate state
    */
   isIndeterminate?: boolean;
-  /**
-   * Determines whether the Checkbox has an invalid value
-   */
-  isInvalid?: boolean;
   /**
    * Determines whether the Checkbox is required
    */
   isRequired?: boolean;
-  /**
-   * Determines whether the Checkbox has a valid value
-   */
-  isValid?: boolean;
   /**
    * The label text for the Checkbox
    */
@@ -62,7 +57,11 @@ export type CheckboxProps = {
   /**
    * The change event handler for the Checkbox
    */
-  onChange?: ChangeEventHandler<EventTarget>;
+  onChange?: MuiCheckboxProps["onChange"];
+  /**
+   * The checkbox validity, if different from its enclosing group. Defaults to "inherit".
+   */
+  validity?: (typeof checkboxValidityValues)[number];
   /**
    * The value attribute of the Checkbox
    */
@@ -72,18 +71,18 @@ export type CheckboxProps = {
 const Checkbox = ({
   ariaLabel,
   ariaLabelledBy,
-  isChecked,
+  isDefaultChecked = false,
   isDisabled,
   isIndeterminate,
-  isInvalid,
   isRequired,
-  isValid,
   label: labelProp,
   name,
-  onChange,
+  onChange: onChangeProp,
+  validity = "inherit",
   value,
 }: CheckboxProps) => {
   const { t } = useTranslation();
+  const [isCheckedValue, setIsCheckedValue] = useState(isDefaultChecked);
 
   const label = useMemo(() => {
     if (isRequired) {
@@ -100,12 +99,26 @@ const Checkbox = ({
     }
   }, [isRequired, labelProp, t]);
 
+  const onChange = useCallback(
+    (event, checked) => {
+      setIsCheckedValue(event.target.checked);
+      onChangeProp?.(event, checked);
+    },
+    [onChangeProp]
+  );
+
   return (
     <FormControlLabel
       aria-label={ariaLabel}
       aria-labelledby={ariaLabelledBy}
-      checked={isChecked}
-      className={isInvalid ? "Mui-error" : isValid ? "Mui-valid" : ""}
+      checked={isCheckedValue}
+      className={
+        validity === "invalid"
+          ? "Mui-error"
+          : validity === "valid"
+          ? "Mui-valid"
+          : ""
+      }
       control={
         <MuiCheckbox indeterminate={isIndeterminate} required={isRequired} />
       }

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

@@ -205,7 +205,7 @@ const Select = forwardRef<HTMLSelectElement, SelectProps>(
       return (
         <MenuItem key={option.value} value={option.value}>
           {isMultiSelect && (
-            <Checkbox isChecked={selectedValue.includes(option.value)} />
+            <Checkbox isDefaultChecked={selectedValue.includes(option.value)} />
           )}
           {option.text}
         </MenuItem>

packages/odyssey-storybook/src/components/odyssey-mui/Checkbox/Checkbox.stories.tsx

@@ -10,7 +10,11 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { Checkbox, CheckboxProps } from "@okta/odyssey-react-mui";
+import {
+  Checkbox,
+  CheckboxProps,
+  checkboxValidityValues,
+} from "@okta/odyssey-react-mui";
 import { Meta, StoryObj } from "@storybook/react";
 import { MuiThemeDecorator } from "../../../../.storybook/components";
 import { userEvent, within } from "@storybook/testing-library";
@@ -40,28 +44,9 @@ const storybookMeta: Meta<CheckboxProps> = {
         },
       },
     },
-    isInvalid: {
+    isDefaultChecked: {
       control: "boolean",
-      description:
-        "If `true`, indicates that the checkbox has an invalid value",
-      table: {
-        type: {
-          summary: "boolean",
-        },
-      },
-    },
-    isValid: {
-      control: "boolean",
-      description: "If `true`, indicates that the checkbox has a valid value",
-      table: {
-        type: {
-          summary: "boolean",
-        },
-      },
-    },
-    isChecked: {
-      control: "boolean",
-      description: "If `true`, the checkbox is checked",
+      description: "If `true`, the checkbox starts checked",
       table: {
         type: {
           summary: "boolean",
@@ -123,6 +108,20 @@ const storybookMeta: Meta<CheckboxProps> = {
         defaultValue: "",
       },
     },
+    validity: {
+      options: checkboxValidityValues,
+      control: { type: "radio" },
+      description:
+        "The checkbox validity, if different from its enclosing group. Doesn't need to be set if the checkbox isn't a different validity from an enclosing `CheckboxGroup`.",
+      table: {
+        type: {
+          summary: checkboxValidityValues.join(" | "),
+        },
+        defaultValue: {
+          summary: "inherit",
+        },
+      },
+    },
     value: {
       control: "text",
       description: "The value attribute of the checkbox",
@@ -184,10 +183,7 @@ export const Required: StoryObj<CheckboxProps> = {
 export const Checked: StoryObj<CheckboxProps> = {
   args: {
     label: "Pre-flight systems check complete",
-    isChecked: true,
-  },
-  play: async ({ canvasElement, step }) => {
-    checkTheBox({ canvasElement, step })("Checkbox Checked");
+    isDefaultChecked: true,
   },
 };
 
@@ -218,17 +214,14 @@ export const Indeterminate: StoryObj<CheckboxProps> = {
   args: {
     label: "Pre-flight systems check complete",
     isIndeterminate: true,
-    isChecked: true,
-  },
-  play: async ({ canvasElement, step }) => {
-    checkTheBox({ canvasElement, step })("Checkbox Indeterminate");
+    isDefaultChecked: true,
   },
 };
 
 export const Invalid: StoryObj<CheckboxProps> = {
   args: {
     label: "Pre-flight systems check complete",
-    isInvalid: true,
+    validity: "invalid",
   },
   play: async ({ canvasElement, step }) => {
     checkTheBox({ canvasElement, step })("Checkbox Disabled");

packages/odyssey-storybook/src/components/odyssey-mui/CheckboxGroup/CheckboxGroup.stories.tsx

@@ -20,7 +20,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import { MuiThemeDecorator } from "../../../../.storybook/components";
 
 type CheckboxGroupStoryProps = CheckboxGroupProps & {
-  isChecked: Parameters<typeof Checkbox>[0]["isChecked"];
+  isDefaultChecked: Parameters<typeof Checkbox>[0]["isDefaultChecked"];
   isIndeterminate: Parameters<typeof Checkbox>[0]["isIndeterminate"];
 };
 
@@ -120,7 +120,7 @@ const GroupTemplate: StoryObj<CheckboxGroupProps> = {
   ),
   parameters: {
     controls: {
-      exclude: ["isChecked", "isIndeterminate"],
+      exclude: ["isDefaultChecked", "isIndeterminate"],
     },
   },
 };
@@ -133,7 +133,7 @@ export const Disabled: StoryObj<CheckboxGroupStoryProps> = {
   ...GroupTemplate,
   parameters: {
     controls: {
-      exclude: ["isChecked", "isIndeterminate"],
+      exclude: ["isDefaultChecked", "isIndeterminate"],
     },
   },
   args: {
@@ -145,7 +145,7 @@ export const Error: StoryObj<CheckboxGroupStoryProps> = {
   ...GroupTemplate,
   parameters: {
     controls: {
-      exclude: ["isChecked", "isIndeterminate"],
+      exclude: ["isDefaultChecked", "isIndeterminate"],
     },
     docs: {
       description: {
@@ -168,9 +168,9 @@ export const MixedError: StoryObj<CheckboxGroupStoryProps> = {
       label="Who will you invite to your birthday?"
       isRequired={args.isRequired}
     >
-      <Checkbox label="Alfred" name="alfred" value="alfred" isValid />
+      <Checkbox label="Alfred" name="alfred" value="alfred" validity="valid" />
       <Checkbox
-        isChecked
+        isDefaultChecked
         label="Barbara Gordon"
         name="barbara-gordon"
         value="barbara-gordon"
@@ -179,10 +179,10 @@ export const MixedError: StoryObj<CheckboxGroupStoryProps> = {
         label="Hal Jordan"
         name="hal-jordan"
         value="hal-jordan"
-        isValid
+        validity="valid"
       />
       <Checkbox
-        isChecked
+        isDefaultChecked
         label="The Joker"
         name="the-joker"
         value="the-joker"
@@ -191,7 +191,7 @@ export const MixedError: StoryObj<CheckboxGroupStoryProps> = {
   ),
   parameters: {
     controls: {
-      exclude: ["isChecked", "isIndeterminate"],
+      exclude: ["isDefaultChecked", "isIndeterminate"],
     },
     docs: {
       description: {