@okta/odyssey-react-mui 1.8.0 → 1.8.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okta/odyssey-react-mui",
-  "version": "1.8.0",
+  "version": "1.8.2",
   "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.8.0",
+    "@okta/odyssey-design-tokens": "1.8.2",
     "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": "279ce97d18cf87719c03592ff66e341441b51c10"
+  "gitHead": "0b0034e9fa97a5dd852f01249aa5093484040ec9"
 }

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

@@ -0,0 +1,19 @@
+/*!
+ * 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 { FC } from "react";
+
+export interface ForwardRefWithType extends FC<WithForwardRefProps<Option>> {
+  <T extends Option>(props: WithForwardRefProps<T>): ReturnType<
+    FC<WithForwardRefProps<T>>
+  >;
+}

package/src/Autocomplete.tsx

@@ -17,12 +17,16 @@ import {
   UseAutocompleteProps,
   AutocompleteValue,
 } from "@mui/material";
-import { memo, useCallback, useMemo } from "react";
+import { memo, useCallback, useMemo, useRef } from "react";
 
 import { Field } from "./Field";
 import { FieldComponentProps } from "./FieldComponentProps";
 import type { SeleniumProps } from "./SeleniumProps";
-import { useControlledState } from "./useControlledState";
+import {
+  ComponentControlledState,
+  useInputValues,
+  getControlState,
+} from "./inputUtils";
 
 export type AutocompleteProps<
   OptionType,
@@ -31,7 +35,6 @@ export type AutocompleteProps<
 > = {
   /**
    * The default value. Use when the component is not controlled.
-   * @default props.multiple ? [] : null
    */
   defaultValue?: UseAutocompleteProps<
     OptionType,
@@ -158,7 +161,7 @@ export type AutocompleteProps<
   getIsOptionEqualToValue?: (option: OptionType, value: OptionType) => boolean;
 } & Pick<
   FieldComponentProps,
-  "errorMessage" | "hint" | "id" | "isOptional" | "name"
+  "errorMessage" | "hint" | "id" | "isOptional" | "name" | "isFullWidth"
 > &
   SeleniumProps;
 
@@ -174,6 +177,7 @@ const Autocomplete = <
   inputValue,
   isCustomValueAllowed,
   isDisabled,
+  isFullWidth = false,
   isLoading,
   isOptional = false,
   isReadOnly,
@@ -189,6 +193,45 @@ const Autocomplete = <
   getIsOptionEqualToValue,
   testId,
 }: AutocompleteProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>) => {
+  const controlledStateRef = useRef(
+    getControlState({ controlledValue: value, uncontrolledValue: defaultValue })
+  );
+  const defaultValueProp = useMemo<
+    | AutocompleteValue<
+        OptionType,
+        HasMultipleChoices,
+        undefined,
+        IsCustomValueAllowed
+      >
+    | undefined
+  >(() => {
+    if (hasMultipleChoices) {
+      if (value === undefined) {
+        return defaultValue;
+      }
+      return [] as AutocompleteValue<
+        OptionType,
+        HasMultipleChoices,
+        undefined,
+        IsCustomValueAllowed
+      >;
+    }
+    return value === undefined ? defaultValue : undefined;
+  }, [defaultValue, hasMultipleChoices, value]);
+
+  const valueProps = useInputValues({
+    defaultValue: defaultValueProp,
+    value: value,
+    controlState: controlledStateRef.current,
+  });
+
+  const inputValueProp = useMemo(() => {
+    if (controlledStateRef.current === ComponentControlledState.CONTROLLED) {
+      return { inputValue };
+    }
+    return undefined;
+  }, [inputValue]);
+
   const renderInput = useCallback(
     ({ InputLabelProps, InputProps, ...params }) => (
       <Field
@@ -223,39 +266,6 @@ const Autocomplete = <
     ),
     [errorMessage, hint, isOptional, label, nameOverride]
   );
-
-  const defaultValuesProp = useMemo<
-    | AutocompleteValue<
-        OptionType,
-        HasMultipleChoices,
-        undefined,
-        IsCustomValueAllowed
-      >
-    | undefined
-  >(() => {
-    if (hasMultipleChoices) {
-      return defaultValue === undefined
-        ? ([] as AutocompleteValue<
-            OptionType,
-            HasMultipleChoices,
-            undefined,
-            IsCustomValueAllowed
-          >)
-        : defaultValue;
-    }
-    return defaultValue ?? undefined;
-  }, [defaultValue, hasMultipleChoices]);
-
-  const [localValue, setLocalValue] = useControlledState({
-    controlledValue: value,
-    uncontrolledValue: defaultValuesProp,
-  });
-
-  const [localInputValue, setLocalInputValue] = useControlledState({
-    controlledValue: inputValue,
-    uncontrolledValue: undefined,
-  });
-
   const onChange = useCallback<
     NonNullable<
       UseAutocompleteProps<
@@ -267,10 +277,9 @@ const Autocomplete = <
     >
   >(
     (event, value, reason, details) => {
-      setLocalValue(value);
       onChangeProp?.(event, value, reason, details);
     },
-    [onChangeProp, setLocalValue]
+    [onChangeProp]
   );
 
   const onInputChange = useCallback<
@@ -284,23 +293,24 @@ const Autocomplete = <
     >
   >(
     (event, value, reason) => {
-      setLocalInputValue(value);
       onInputChangeProp?.(event, value, reason);
     },
-    [onInputChangeProp, setLocalInputValue]
+    [onInputChangeProp]
   );
 
   return (
     <MuiAutocomplete
+      {...valueProps}
+      {...inputValueProp}
       // AutoComplete is wrapped in a div within MUI which does not get the disabled attr. So this aria-disabled gets set in the div
       aria-disabled={isDisabled}
       data-se={testId}
-      defaultValue={defaultValuesProp}
       disableCloseOnSelect={hasMultipleChoices}
       disabled={isDisabled}
       freeSolo={isCustomValueAllowed}
       filterSelectedOptions={true}
       id={idOverride}
+      fullWidth={isFullWidth}
       loading={isLoading}
       multiple={hasMultipleChoices}
       onBlur={onBlur}
@@ -310,8 +320,6 @@ const Autocomplete = <
       options={options}
       readOnly={isReadOnly}
       renderInput={renderInput}
-      value={localValue}
-      inputValue={localInputValue}
       isOptionEqualToValue={getIsOptionEqualToValue}
     />
   );

package/src/Checkbox.tsx

@@ -11,7 +11,7 @@
  */
 
 import { useTranslation } from "react-i18next";
-import { memo, useCallback, useMemo } from "react";
+import { memo, useCallback, useMemo, useRef } from "react";
 import {
   Checkbox as MuiCheckbox,
   CheckboxProps as MuiCheckboxProps,
@@ -22,7 +22,7 @@ import {
 import { FieldComponentProps } from "./FieldComponentProps";
 import { Typography } from "./Typography";
 import type { SeleniumProps } from "./SeleniumProps";
-import { useControlledState } from "./useControlledState";
+import { ComponentControlledState, getControlState } from "./inputUtils";
 import { CheckedFieldProps } from "./FormCheckedProps";
 
 export const checkboxValidityValues = ["valid", "invalid", "inherit"] as const;
@@ -90,10 +90,18 @@ const Checkbox = ({
   value,
 }: CheckboxProps) => {
   const { t } = useTranslation();
-  const [isLocalChecked, setIsLocalChecked] = useControlledState({
-    controlledValue: isChecked,
-    uncontrolledValue: isDefaultChecked,
-  });
+  const controlledStateRef = useRef(
+    getControlState({
+      controlledValue: isChecked,
+      uncontrolledValue: isDefaultChecked,
+    })
+  );
+  const inputValues = useMemo(() => {
+    if (controlledStateRef.current === ComponentControlledState.CONTROLLED) {
+      return { checked: isChecked };
+    }
+    return { defaultChecked: isDefaultChecked };
+  }, [isDefaultChecked, isChecked]);
 
   const label = useMemo(() => {
     return (
@@ -114,10 +122,9 @@ const Checkbox = ({
 
   const onChange = useCallback<NonNullable<MuiCheckboxProps["onChange"]>>(
     (event, checked) => {
-      setIsLocalChecked(checked);
       onChangeProp?.(event, checked);
     },
-    [onChangeProp, setIsLocalChecked]
+    [onChangeProp]
   );
 
   return (
@@ -134,7 +141,7 @@ const Checkbox = ({
       }
       control={
         <MuiCheckbox
-          checked={isLocalChecked}
+          {...inputValues}
           indeterminate={isIndeterminate}
           onChange={onChange}
           required={isRequired}

package/src/Field.tsx

@@ -59,6 +59,10 @@ export type FieldProps = {
    * If `true`, the component is disabled.
    */
   isDisabled?: boolean;
+  /**
+   * If `true`, the component can stretch to fill the width of the container.
+   */
+  isFullWidth?: boolean;
   /**
    * If `true`, the `input` element is not required.
    */
@@ -96,6 +100,7 @@ const Field = ({
   hint,
   id: idOverride,
   isDisabled: isDisabledProp = false,
+  isFullWidth = false,
   isRadioGroup = false,
   isOptional = false,
   label,
@@ -126,6 +131,7 @@ const Field = ({
       disabled={isDisabled}
       error={Boolean(errorMessage)}
       role={isRadioGroup ? "radiogroup" : undefined}
+      fullWidth={isFullWidth}
     >
       {fieldType === "group" ? (
         <MuiFormLabel component="legend">

package/src/FieldComponentProps.ts

@@ -27,6 +27,10 @@ export type FieldComponentProps = {
    * If `true`, the component is disabled.
    */
   isDisabled?: boolean;
+  /**
+   * If `true`, the component can stretch to fill the width of the container.
+   */
+  isFullWidth?: boolean;
   /**
    * If `true`, the `input` element is not required.
    */

package/src/NativeSelect.tsx

@@ -10,12 +10,23 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { ReactElement, forwardRef, memo, useCallback } from "react";
-import { Select as MuiSelect } from "@mui/material";
-import { SelectProps as MuiSelectProps } from "@mui/material";
+import React, {
+  ReactElement,
+  forwardRef,
+  memo,
+  useCallback,
+  useMemo,
+  useRef,
+} from "react";
+import {
+  Select as MuiSelect,
+  SelectProps as MuiSelectProps,
+} from "@mui/material";
 import { Field } from "./Field";
 import { FieldComponentProps } from "./FieldComponentProps";
 import type { SeleniumProps } from "./SeleniumProps";
+import { getControlState, useInputValues } from "./inputUtils";
+import { ForwardRefWithType } from "./@types/react-augment";
 
 export type NativeSelectOption = {
   text: string;
@@ -23,19 +34,30 @@ export type NativeSelectOption = {
   type?: "heading" | "option";
 };
 
-export type NativeSelectProps = {
+export type NativeSelectValueType<HasMultipleChoices> =
+  HasMultipleChoices extends true ? string[] : string;
+
+export type NativeSelectProps<
+  Value extends NativeSelectValueType<HasMultipleChoices>,
+  HasMultipleChoices extends boolean
+> = {
   /**
    * The options or optgroup elements within the NativeSelect
    */
   children?: ReactElement<"option"> | ReactElement<"optgroup">;
   /**
-   * The default value of the NativeSelect. Only applicable if `value` is not provided
+   * The default value of the NativeSelect. Use when component is uncontrolled
+   */
+  defaultValue?: Value;
+  /**
+   * If `true`, the Select allows multiple selections
    */
-  defaultValue?: string;
+  hasMultipleChoices?: HasMultipleChoices;
   /**
-   * If `true`, the NativeSelect allows multiple selections
+   * @deprecated Use `hasMultipleChoices` instead
    */
-  isMultiSelect?: boolean;
+  /** **Deprecated:** use `hasMultipleChoices` */
+  isMultiSelect?: HasMultipleChoices;
   /**
    * The label text for the NativeSelect
    */
@@ -43,78 +65,110 @@ export type NativeSelectProps = {
   /**
    * Callback fired when the NativeSelect loses focus
    */
-  onBlur?: MuiSelectProps["onBlur"];
+  onBlur?: MuiSelectProps<Value>["onBlur"];
   /**
    * Callback fired when the value of the NativeSelect changes
    */
-  onChange?: MuiSelectProps["onChange"];
+  onChange?: MuiSelectProps<Value>["onChange"];
   /**
    * Callback fired when the NativeSelect gains focus
    */
-  onFocus?: MuiSelectProps["onFocus"];
+  onFocus?: MuiSelectProps<Value>["onFocus"];
+  options: Value;
   /**
-   * The value or values selected in the NativeSelect
+   * The value or values selected in the NativeSelect. Use when component is controlled
    */
-  value?: string | string[];
+  value?: Value;
 } & Pick<
   FieldComponentProps,
-  "errorMessage" | "hint" | "id" | "isDisabled" | "isOptional"
+  "errorMessage" | "hint" | "id" | "isDisabled" | "isOptional" | "isFullWidth"
 > &
   SeleniumProps;
 
-const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
-  (
+const NativeSelect: ForwardRefWithType = forwardRef(
+  <
+    Value extends NativeSelectValueType<HasMultipleChoices>,
+    HasMultipleChoices extends boolean
+  >(
     {
       defaultValue,
       errorMessage,
+      hasMultipleChoices: hasMultipleChoicesProp,
       hint,
       id: idOverride,
       isDisabled = false,
-      isMultiSelect = false,
+      isFullWidth = false,
+      isMultiSelect,
       isOptional = false,
       label,
       onBlur,
-      onChange,
+      onChange: onChangeProp,
       onFocus,
       testId,
       value,
       children,
-    },
-    ref
+    }: NativeSelectProps<Value, HasMultipleChoices>,
+    ref?: React.Ref<ReactElement>
   ) => {
+    const controlledStateRef = useRef(
+      getControlState({
+        controlledValue: value,
+        uncontrolledValue: defaultValue,
+      })
+    );
+    const inputValues = useInputValues({
+      defaultValue,
+      value,
+      controlState: controlledStateRef.current,
+    });
+
+    const onChange = useCallback<
+      NonNullable<MuiSelectProps<Value>["onChange"]>
+    >(
+      (event, child) => {
+        onChangeProp?.(event, child);
+      },
+      [onChangeProp]
+    );
+
+    const hasMultipleChoices = useMemo(
+      () =>
+        hasMultipleChoicesProp === undefined
+          ? isMultiSelect
+          : hasMultipleChoicesProp,
+      [hasMultipleChoicesProp, isMultiSelect]
+    );
     const renderFieldComponent = useCallback(
       ({ ariaDescribedBy, errorMessageElementId, labelElementId }) => (
         <MuiSelect
+          {...inputValues}
           aria-describedby={ariaDescribedBy}
           children={children}
           data-se={testId}
-          defaultValue={defaultValue}
           id={idOverride}
           inputProps={{
             "aria-errormessage": errorMessageElementId,
             "aria-labelledby": labelElementId,
           }}
           name={idOverride}
-          multiple={isMultiSelect}
+          multiple={hasMultipleChoices}
           native={true}
           onBlur={onBlur}
           onChange={onChange}
           onFocus={onFocus}
           ref={ref}
-          value={value}
         />
       ),
       [
         children,
-        defaultValue,
         idOverride,
-        isMultiSelect,
+        inputValues,
+        hasMultipleChoices,
         onBlur,
         onChange,
         onFocus,
         ref,
         testId,
-        value,
       ]
     );
 
@@ -126,6 +180,7 @@ const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
         hint={hint}
         id={idOverride}
         isDisabled={isDisabled}
+        isFullWidth={isFullWidth}
         isOptional={isOptional}
         label={label}
         renderFieldComponent={renderFieldComponent}

package/src/PasswordField.tsx

@@ -17,6 +17,7 @@ import {
   forwardRef,
   memo,
   useCallback,
+  useRef,
   useState,
 } from "react";
 
@@ -25,6 +26,7 @@ import { Field } from "./Field";
 import { FieldComponentProps } from "./FieldComponentProps";
 import type { SeleniumProps } from "./SeleniumProps";
 import { useTranslation } from "react-i18next";
+import { getControlState, useInputValues } from "./inputUtils";
 
 export type PasswordFieldProps = {
   /**
@@ -33,6 +35,10 @@ export type PasswordFieldProps = {
    * You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).
    */
   autoCompleteType?: "current-password" | "new-password";
+  /**
+   * initial value for input. Use when component in uncontrolled.
+   */
+  defaultValue?: string;
   /**
    * If `true`, the component will receive focus automatically.
    */
@@ -62,7 +68,7 @@ export type PasswordFieldProps = {
    */
   placeholder?: string;
   /**
-   * The value of the `input` element, required for a controlled component.
+   * The value of the `input` element. Use when component is controlled.
    */
   value?: string;
 } & FieldComponentProps &
@@ -72,17 +78,19 @@ const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
   (
     {
       autoCompleteType,
+      defaultValue,
       errorMessage,
       hasInitialFocus,
       hint,
       id: idOverride,
       isDisabled = false,
+      isFullWidth = false,
       isOptional = false,
       hasShowPassword = true,
       isReadOnly,
       label,
       name: nameOverride,
-      onChange,
+      onChange: onChangeProp,
       onFocus,
       onBlur,
       placeholder,
@@ -100,9 +108,31 @@ const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
       );
     }, []);
 
+    const controlledStateRef = useRef(
+      getControlState({
+        controlledValue: value,
+        uncontrolledValue: defaultValue,
+      })
+    );
+    const inputValues = useInputValues({
+      defaultValue,
+      value,
+      controlState: controlledStateRef.current,
+    });
+
+    const onChange = useCallback<
+      ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>
+    >(
+      (event) => {
+        onChangeProp?.(event);
+      },
+      [onChangeProp]
+    );
+
     const renderFieldComponent = useCallback(
       ({ ariaDescribedBy, errorMessageElementId, id, labelElementId }) => (
         <InputBase
+          {...inputValues}
           aria-describedby={ariaDescribedBy}
           autoComplete={inputType === "password" ? autoCompleteType : "off"}
           /* eslint-disable-next-line jsx-a11y/no-autofocus */
@@ -140,12 +170,12 @@ const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
           ref={ref}
           required={!isOptional}
           type={inputType}
-          value={value}
         />
       ),
       [
         autoCompleteType,
         hasInitialFocus,
+        inputValues,
         t,
         togglePasswordVisibility,
         inputType,
@@ -159,7 +189,6 @@ const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
         hasShowPassword,
         ref,
         testId,
-        value,
       ]
     );
 
@@ -171,6 +200,7 @@ const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
         hint={hint}
         id={idOverride}
         isDisabled={isDisabled}
+        isFullWidth={isFullWidth}
         isOptional={isOptional}
         label={label}
         renderFieldComponent={renderFieldComponent}

package/src/RadioGroup.tsx

@@ -14,13 +14,13 @@ import {
   RadioGroup as MuiRadioGroup,
   type RadioGroupProps as MuiRadioGroupProps,
 } from "@mui/material";
-import { memo, ReactElement, useCallback } from "react";
+import { memo, ReactElement, useCallback, useRef } from "react";
 
 import { Radio, RadioProps } from "./Radio";
 import { Field } from "./Field";
 import { FieldComponentProps } from "./FieldComponentProps";
 import type { SeleniumProps } from "./SeleniumProps";
-import { useControlledState } from "./useControlledState";
+import { getControlState, useInputValues } from "./inputUtils";
 
 export type RadioGroupProps = {
   /**
@@ -62,35 +62,37 @@ const RadioGroup = ({
   testId,
   value,
 }: RadioGroupProps) => {
-  const [localValue, setLocalValue] = useControlledState({
-    controlledValue: value,
-    uncontrolledValue: defaultValue,
+  const controlledStateRef = useRef(
+    getControlState({ controlledValue: value, uncontrolledValue: defaultValue })
+  );
+  const inputValues = useInputValues({
+    defaultValue,
+    value,
+    controlState: controlledStateRef.current,
   });
 
   const onChange = useCallback<NonNullable<MuiRadioGroupProps["onChange"]>>(
     (event, value) => {
-      setLocalValue(value);
       onChangeProp?.(event, value);
     },
-    [onChangeProp, setLocalValue]
+    [onChangeProp]
   );
   const renderFieldComponent = useCallback(
     ({ ariaDescribedBy, errorMessageElementId, id, labelElementId }) => (
       <MuiRadioGroup
+        {...inputValues}
         aria-describedby={ariaDescribedBy}
         aria-errormessage={errorMessageElementId}
         aria-labelledby={labelElementId}
         data-se={testId}
-        defaultValue={defaultValue}
         id={id}
         name={nameOverride ?? id}
         onChange={onChange}
-        value={localValue}
       >
         {children}
       </MuiRadioGroup>
     ),
-    [children, defaultValue, nameOverride, onChange, testId, localValue]
+    [children, inputValues, nameOverride, onChange, testId]
   );
 
   return (