@okta/odyssey-react-mui 1.6.13 → 1.6.17

package/dist/useControlledState.js

@@ -0,0 +1,33 @@
+/*!
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { useEffect, useRef, useState } from "react";
+export const useControlledState = _ref => {
+  let {
+    controlledValue,
+    uncontrolledValue
+  } = _ref;
+  const isControlledMode = useRef(controlledValue !== undefined);
+  const [stateValue, setStateValue] = useState(isControlledMode.current ? controlledValue : uncontrolledValue);
+  useEffect(() => {
+    if (isControlledMode.current) {
+      setStateValue(controlledValue);
+    }
+  }, [controlledValue]);
+  const setState = value => {
+    if (!isControlledMode.current) {
+      setStateValue(value);
+    }
+  };
+  return [stateValue, setState];
+};
+//# sourceMappingURL=useControlledState.js.map

package/dist/useControlledState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useControlledState.js","names":["useEffect","useRef","useState","useControlledState","_ref","controlledValue","uncontrolledValue","isControlledMode","undefined","stateValue","setStateValue","current","setState","value"],"sources":["../src/useControlledState.ts"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { useEffect, useRef, useState } from \"react\";\n\ntype UseControlledStateProps<Value> = {\n  controlledValue?: Value; // isChecked\n  uncontrolledValue?: Value; // isDefaultChecked\n};\n\n/**\n * Use the same way as `useState`. Returns a stateful value, and a function to update it.\n * When `initialState` is passed, the returned function to update it does nothing. This is\n * useful to handle values in components that may be controlled externally when that value is\n * passed in props and thus wish to prevent internal updates of the same value.\n *\n * @param initialState\n * @see https://react.dev/reference/react/useState\n */\nexport const useControlledState = <Value>({\n  controlledValue,\n  uncontrolledValue,\n}: UseControlledStateProps<Value>) => {\n  const isControlledMode = useRef(controlledValue !== undefined);\n  const [stateValue, setStateValue] = useState(\n    isControlledMode.current ? controlledValue : uncontrolledValue\n  );\n\n  useEffect(() => {\n    if (isControlledMode.current) {\n      setStateValue(controlledValue);\n    }\n  }, [controlledValue]);\n\n  const setState: typeof setStateValue = (value) => {\n    if (!isControlledMode.current) {\n      setStateValue(value);\n    }\n  };\n\n  return [\n    stateValue,\n    // If `value` is controlled externally, ignore calls to the setter.\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    setState,\n  ] as const;\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAgBnD,OAAO,MAAMC,kBAAkB,GAAGC,IAAA,IAGI;EAAA,IAHI;IACxCC,eAAe;IACfC;EAC8B,CAAC,GAAAF,IAAA;EAC/B,MAAMG,gBAAgB,GAAGN,MAAM,CAACI,eAAe,KAAKG,SAAS,CAAC;EAC9D,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAGR,QAAQ,CAC1CK,gBAAgB,CAACI,OAAO,GAAGN,eAAe,GAAGC,iBAC/C,CAAC;EAEDN,SAAS,CAAC,MAAM;IACd,IAAIO,gBAAgB,CAACI,OAAO,EAAE;MAC5BD,aAAa,CAACL,eAAe,CAAC;IAChC;EACF,CAAC,EAAE,CAACA,eAAe,CAAC,CAAC;EAErB,MAAMO,QAA8B,GAAIC,KAAK,IAAK;IAChD,IAAI,CAACN,gBAAgB,CAACI,OAAO,EAAE;MAC7BD,aAAa,CAACG,KAAK,CAAC;IACtB;EACF,CAAC;EAED,OAAO,CACLJ,UAAU,EAGVG,QAAQ,CACT;AACH,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okta/odyssey-react-mui",
-  "version": "1.6.13",
+  "version": "1.6.17",
   "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.6.13",
+    "@okta/odyssey-design-tokens": "1.6.17",
     "date-fns": "^2.30.0",
     "i18next": "^23.5.1",
     "material-react-table": "^1.14.0",
@@ -63,5 +63,5 @@
     "react": ">=17 <19",
     "react-dom": ">=17 <19"
   },
-  "gitHead": "34fa5cf5ebe53fde24cdc505b90107624c74c0fe"
+  "gitHead": "7643c5f6af8bd8b9a90c66a1d298abe7c0b2ca79"
 }

package/src/Checkbox.tsx

@@ -11,7 +11,7 @@
  */
 
 import { useTranslation } from "react-i18next";
-import { memo, useCallback, useMemo, useState } from "react";
+import { memo, useCallback, useMemo } from "react";
 import {
   Checkbox as MuiCheckbox,
   CheckboxProps as MuiCheckboxProps,
@@ -21,6 +21,8 @@ import {
 import { FieldComponentProps } from "./FieldComponentProps";
 import { Typography } from "./Typography";
 import type { SeleniumProps } from "./SeleniumProps";
+import { useControlledState } from "./useControlledState";
+import { CheckedFieldProps } from "./FormCheckedProps";
 
 export const checkboxValidityValues = ["valid", "invalid", "inherit"] as const;
 
@@ -34,9 +36,13 @@ export type CheckboxProps = {
    */
   ariaLabelledBy?: string;
   /**
-   * Determines whether the Checkbox is checked
+   * The id of the `input` element.
    */
-  isDefaultChecked?: boolean;
+  id?: string;
+  /**
+   * Determines whether the Checkbox is disabled
+   */
+  isDisabled?: boolean;
   /**
    * Determines whether the Checkbox is in an indeterminate state
    */
@@ -49,10 +55,6 @@ export type CheckboxProps = {
    * The label text for the Checkbox
    */
   label?: string;
-  /**
-   * The change event handler for the Checkbox
-   */
-  onChange?: MuiCheckboxProps["onChange"];
   /**
    * The checkbox validity, if different from its enclosing group. Defaults to "inherit".
    */
@@ -62,13 +64,15 @@ export type CheckboxProps = {
    */
   value?: string;
 } & Pick<FieldComponentProps, "id" | "isDisabled" | "name"> &
+  CheckedFieldProps<MuiCheckboxProps> &
   SeleniumProps;
 
 const Checkbox = ({
   ariaLabel,
   ariaLabelledBy,
   id: idOverride,
-  isDefaultChecked = false,
+  isChecked,
+  isDefaultChecked,
   isDisabled,
   isIndeterminate,
   isRequired,
@@ -80,7 +84,10 @@ const Checkbox = ({
   value,
 }: CheckboxProps) => {
   const { t } = useTranslation();
-  const [isCheckedValue, setIsCheckedValue] = useState(isDefaultChecked);
+  const [isLocalChecked, setIsLocalChecked] = useControlledState({
+    controlledValue: isChecked,
+    uncontrolledValue: isDefaultChecked,
+  });
 
   const label = useMemo(() => {
     if (isRequired) {
@@ -97,19 +104,18 @@ const Checkbox = ({
     }
   }, [isRequired, labelProp, t]);
 
-  const onChange = useCallback(
+  const onChange = useCallback<NonNullable<MuiCheckboxProps["onChange"]>>(
     (event, checked) => {
-      setIsCheckedValue(event.target.checked);
+      setIsLocalChecked(checked);
       onChangeProp?.(event, checked);
     },
-    [onChangeProp]
+    [onChangeProp, setIsLocalChecked]
   );
 
   return (
     <FormControlLabel
       aria-label={ariaLabel}
       aria-labelledby={ariaLabelledBy}
-      checked={isCheckedValue}
       className={
         validity === "invalid"
           ? "Mui-error"
@@ -118,14 +124,18 @@ const Checkbox = ({
           : ""
       }
       control={
-        <MuiCheckbox indeterminate={isIndeterminate} required={isRequired} />
+        <MuiCheckbox
+          checked={isLocalChecked}
+          indeterminate={isIndeterminate}
+          onChange={onChange}
+          required={isRequired}
+        />
       }
       data-se={testId}
       disabled={isDisabled}
       id={idOverride}
       label={label}
       name={nameOverride ?? idOverride}
-      onChange={onChange}
       value={value}
       required={isRequired}
     />

package/src/FormCheckedProps.ts

@@ -0,0 +1,59 @@
+/*!
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { SwitchBaseProps } from "@mui/material/internal/SwitchBase";
+
+type SwitchOnChangeProp = Pick<SwitchBaseProps, "onChange">;
+
+export type ControlledCheckedFieldProps<
+  TogglableInputElement extends SwitchOnChangeProp
+> = {
+  /**
+   * Sets the checked state of the Checkbox
+   */
+  isChecked: boolean;
+  /**
+   * Determines whether the Checkbox is checked
+   * Should not be used if `isChecked` is used
+   */
+  isDefaultChecked?: never;
+  /**
+   * The change event handler for the Checkbox
+   * Must be used if `isChecked` is used
+   */
+  onChange: TogglableInputElement["onChange"];
+};
+
+export type UncontrolledCheckedFieldProps<
+  TogglableInputElement extends SwitchOnChangeProp
+> = {
+  /**
+   * Sets the checked state of the Checkbox
+   */
+  isChecked?: never;
+  /**
+   * Determines whether the Checkbox is checked
+   * Should not be used if `isChecked` is used
+   */
+  isDefaultChecked?: boolean;
+  /**
+   * The change event handler for the Checkbox
+   * Must be used if `isChecked` is used
+   */
+  onChange?: TogglableInputElement["onChange"];
+};
+
+export type CheckedFieldProps<
+  TogglableInputElement extends SwitchOnChangeProp
+> =
+  | ControlledCheckedFieldProps<TogglableInputElement>
+  | UncontrolledCheckedFieldProps<TogglableInputElement>;

package/src/Radio.tsx

@@ -10,10 +10,12 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { Radio as MuiRadio } from "@mui/material";
-import { memo } from "react";
-
-import { FormControlLabel } from "@mui/material";
+import {
+  FormControlLabel,
+  Radio as MuiRadio,
+  RadioProps as MuiRadioProps,
+} from "@mui/material";
+import { memo, useCallback } from "react";
 
 import { FieldComponentProps } from "./FieldComponentProps";
 import type { SeleniumProps } from "./SeleniumProps";
@@ -35,6 +37,10 @@ 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"];
 } & Pick<FieldComponentProps, "isDisabled" | "name"> &
   SeleniumProps;
 
@@ -46,18 +52,28 @@ const Radio = ({
   name,
   testId,
   value,
-}: RadioProps) => (
-  <FormControlLabel
-    checked={isChecked}
-    className={isInvalid ? "Mui-error" : ""}
-    control={<MuiRadio />}
-    data-se={testId}
-    disabled={isDisabled}
-    label={label}
-    name={name}
-    value={value}
-  />
-);
+  onChange: onChangeProp,
+}: RadioProps) => {
+  const onChange = useCallback<NonNullable<MuiRadioProps["onChange"]>>(
+    (event, checked) => {
+      onChangeProp?.(event, checked);
+    },
+    [onChangeProp]
+  );
+
+  return (
+    <FormControlLabel
+      checked={isChecked}
+      className={isInvalid ? "Mui-error" : ""}
+      control={<MuiRadio onChange={onChange} />}
+      data-se={testId}
+      disabled={isDisabled}
+      label={label}
+      name={name}
+      value={value}
+    />
+  );
+};
 
 const MemoizedRadio = memo(Radio);
 MemoizedRadio.displayName = "Radio";

package/src/RadioGroup.tsx

@@ -20,6 +20,7 @@ import { Radio, RadioProps } from "./Radio";
 import { Field } from "./Field";
 import { FieldComponentProps } from "./FieldComponentProps";
 import type { SeleniumProps } from "./SeleniumProps";
+import { useControlledState } from "./useControlledState";
 
 export type RadioGroupProps = {
   /**
@@ -57,10 +58,22 @@ const RadioGroup = ({
   isDisabled,
   label,
   name: nameOverride,
-  onChange,
+  onChange: onChangeProp,
   testId,
   value,
 }: RadioGroupProps) => {
+  const [localValue, setLocalValue] = useControlledState({
+    controlledValue: value,
+    uncontrolledValue: defaultValue,
+  });
+
+  const onChange = useCallback<NonNullable<MuiRadioGroupProps["onChange"]>>(
+    (event, value) => {
+      setLocalValue(value);
+      onChangeProp?.(event, value);
+    },
+    [onChangeProp, setLocalValue]
+  );
   const renderFieldComponent = useCallback(
     ({ ariaDescribedBy, errorMessageElementId, id, labelElementId }) => (
       <MuiRadioGroup
@@ -72,12 +85,12 @@ const RadioGroup = ({
         id={id}
         name={nameOverride ?? id}
         onChange={onChange}
-        value={value}
+        value={localValue}
       >
         {children}
       </MuiRadioGroup>
     ),
-    [children, defaultValue, nameOverride, onChange, testId, value]
+    [children, defaultValue, nameOverride, onChange, testId, localValue]
   );
 
   return (

package/src/useControlledState.ts

@@ -0,0 +1,56 @@
+/*!
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { useEffect, useRef, useState } from "react";
+
+type UseControlledStateProps<Value> = {
+  controlledValue?: Value; // isChecked
+  uncontrolledValue?: Value; // isDefaultChecked
+};
+
+/**
+ * Use the same way as `useState`. Returns a stateful value, and a function to update it.
+ * When `initialState` is passed, the returned function to update it does nothing. This is
+ * useful to handle values in components that may be controlled externally when that value is
+ * passed in props and thus wish to prevent internal updates of the same value.
+ *
+ * @param initialState
+ * @see https://react.dev/reference/react/useState
+ */
+export const useControlledState = <Value>({
+  controlledValue,
+  uncontrolledValue,
+}: UseControlledStateProps<Value>) => {
+  const isControlledMode = useRef(controlledValue !== undefined);
+  const [stateValue, setStateValue] = useState(
+    isControlledMode.current ? controlledValue : uncontrolledValue
+  );
+
+  useEffect(() => {
+    if (isControlledMode.current) {
+      setStateValue(controlledValue);
+    }
+  }, [controlledValue]);
+
+  const setState: typeof setStateValue = (value) => {
+    if (!isControlledMode.current) {
+      setStateValue(value);
+    }
+  };
+
+  return [
+    stateValue,
+    // If `value` is controlled externally, ignore calls to the setter.
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    setState,
+  ] as const;
+};