@okta/odyssey-react-mui 1.8.0 → 1.8.2

package/src/SearchField.tsx

@@ -10,7 +10,6 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { useState, useEffect } from "react";
 import { InputAdornment, InputBase, IconButton } from "@mui/material";
 import {
   ChangeEventHandler,
@@ -19,12 +18,14 @@ import {
   InputHTMLAttributes,
   memo,
   useCallback,
+  useRef,
 } from "react";
 
 import { CloseCircleFilledIcon, SearchIcon } from "./icons.generated";
 import { Field } from "./Field";
 import { FieldComponentProps } from "./FieldComponentProps";
 import type { SeleniumProps } from "./SeleniumProps";
+import { getControlState, useInputValues } from "./inputUtils";
 
 export type SearchFieldProps = {
   /**
@@ -33,6 +34,10 @@ export type SearchFieldProps = {
    * You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).
    */
   autoCompleteType?: InputHTMLAttributes<HTMLInputElement>["autoComplete"];
+  /**
+   * The value of the `input` element to use when uncontrolled.
+   */
+  defaultValue?: string;
   /**
    * If `true`, the component will receive focus automatically.
    */
@@ -70,19 +75,21 @@ export type SearchFieldProps = {
    */
   placeholder?: string;
   /**
-   * The value of the `input` element, required for a controlled component.
+   * The value of the `input` element, to use when controlled.
    */
   value?: string;
-} & Pick<FieldComponentProps, "id" | "isDisabled" | "name"> &
+} & Pick<FieldComponentProps, "id" | "isDisabled" | "name" | "isFullWidth"> &
   SeleniumProps;
 
 const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
   (
     {
       autoCompleteType,
+      defaultValue,
       hasInitialFocus,
       id: idOverride,
       isDisabled = false,
+      isFullWidth = false,
       label,
       name: nameOverride,
       onChange: onChangeProp,
@@ -91,42 +98,45 @@ const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
       onClear: onClearProp,
       placeholder,
       testId,
-      value: controlledValue,
+      value,
     },
     ref
   ) => {
-    const [uncontrolledValue, setUncontrolledValue] = useState("");
-
     const onChange: ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement> =
       useCallback(
         (event) => {
-          setUncontrolledValue(event.currentTarget.value);
           onChangeProp?.(event);
         },
         [onChangeProp]
       );
 
     const onClear = useCallback(() => {
-      setUncontrolledValue("");
       onClearProp?.();
     }, [onClearProp]);
 
-    useEffect(() => {
-      if (controlledValue !== undefined) {
-        setUncontrolledValue(controlledValue);
-      }
-    }, [controlledValue]);
+    const controlledStateRef = useRef(
+      getControlState({
+        controlledValue: value,
+        uncontrolledValue: defaultValue,
+      })
+    );
+    const inputValues = useInputValues({
+      defaultValue,
+      value,
+      controlState: controlledStateRef.current,
+    });
 
     const renderFieldComponent = useCallback(
       ({ ariaDescribedBy, id }) => (
         <InputBase
+          {...inputValues}
           aria-describedby={ariaDescribedBy}
           autoComplete={autoCompleteType}
           /* eslint-disable-next-line jsx-a11y/no-autofocus */
           autoFocus={hasInitialFocus}
           data-se={testId}
           endAdornment={
-            uncontrolledValue && (
+            defaultValue && (
               <InputAdornment position="end">
                 <IconButton
                   aria-label="Clear"
@@ -152,15 +162,13 @@ const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
             </InputAdornment>
           }
           type="search"
-          value={
-            controlledValue === undefined ? uncontrolledValue : controlledValue
-          }
         />
       ),
       [
         autoCompleteType,
-        controlledValue,
+        defaultValue,
         hasInitialFocus,
+        inputValues,
         isDisabled,
         nameOverride,
         onBlur,
@@ -170,7 +178,6 @@ const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
         placeholder,
         ref,
         testId,
-        uncontrolledValue,
       ]
     );
 
@@ -180,6 +187,7 @@ const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
         hasVisibleLabel={false}
         id={idOverride}
         isDisabled={isDisabled}
+        isFullWidth={isFullWidth}
         isOptional={true}
         label={label}
         renderFieldComponent={renderFieldComponent}

package/src/Select.tsx

@@ -10,7 +10,7 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { memo, useCallback, useMemo, useState } from "react";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
   Box,
   Checkbox as MuiCheckbox,
@@ -26,6 +26,11 @@ import { Field } from "./Field";
 import { FieldComponentProps } from "./FieldComponentProps";
 import { CheckIcon } from "./icons.generated";
 import type { SeleniumProps } from "./SeleniumProps";
+import {
+  ComponentControlledState,
+  useInputValues,
+  getControlState,
+} from "./inputUtils";
 
 export type SelectOption = {
   text: string;
@@ -40,6 +45,10 @@ export type SelectProps<
   Value extends SelectValueType<HasMultipleChoices>,
   HasMultipleChoices extends boolean
 > = {
+  /**
+   * The default value. Use when the component is not controlled.
+   */
+  defaultValue?: MuiSelectProps<Value>["defaultValue"];
   /**
    * If `true`, the Select allows multiple selections
    */
@@ -75,7 +84,13 @@ export type SelectProps<
   value?: Value;
 } & Pick<
   FieldComponentProps,
-  "errorMessage" | "hint" | "id" | "isDisabled" | "isOptional" | "name"
+  | "errorMessage"
+  | "hint"
+  | "id"
+  | "isDisabled"
+  | "isOptional"
+  | "name"
+  | "isFullWidth"
 > &
   SeleniumProps;
 
@@ -94,15 +109,18 @@ export type SelectProps<
  *   - { text: string, type: "heading" } — Used to display a group heading with the text
  */
 
+const { CONTROLLED } = ComponentControlledState;
 const Select = <
   Value extends SelectValueType<HasMultipleChoices>,
   HasMultipleChoices extends boolean
 >({
+  defaultValue,
   errorMessage,
   hasMultipleChoices: hasMultipleChoicesProp,
   hint,
   id: idOverride,
   isDisabled = false,
+  isFullWidth = false,
   isMultiSelect,
   isOptional = false,
   label,
@@ -121,32 +139,38 @@ const Select = <
         : hasMultipleChoicesProp,
     [hasMultipleChoicesProp, isMultiSelect]
   );
+  const controlledStateRef = useRef(
+    getControlState({ controlledValue: value, uncontrolledValue: defaultValue })
+  );
+  const [internalSelectedValues, setInternalSelectedValues] = useState(
+    controlledStateRef.current === CONTROLLED ? value : defaultValue
+  );
 
-  const formattedValueForMultiSelect = isMultiSelect
-    ? ([] as string[] as Value)
-    : ("" as string as Value);
+  useEffect(() => {
+    if (controlledStateRef.current === CONTROLLED) {
+      setInternalSelectedValues(value);
+    }
+  }, [value]);
 
-  const [selectedValue, setSelectedValue] = useState(
-    value === undefined ? formattedValueForMultiSelect : value
-  );
+  const inputValues = useInputValues({
+    defaultValue,
+    value,
+    controlState: controlledStateRef.current,
+  });
 
   const onChange = useCallback<NonNullable<MuiSelectProps<Value>["onChange"]>>(
     (event, child) => {
-      const valueFromEvent = event.target.value;
-
-      if (typeof valueFromEvent === "string") {
-        if (hasMultipleChoices) {
-          setSelectedValue(valueFromEvent.split(",") as Value);
-        } else {
-          setSelectedValue(valueFromEvent as Value);
-        }
-      } else {
-        setSelectedValue(valueFromEvent);
+      const {
+        target: { value },
+      } = event;
+      if (controlledStateRef.current !== CONTROLLED) {
+        setInternalSelectedValues(
+          (typeof value === "string" ? value.split(",") : value) as Value
+        );
       }
-
       onChangeProp?.(event, child);
     },
-    [hasMultipleChoices, onChangeProp, setSelectedValue]
+    [onChangeProp]
   );
 
   // Normalize the options array to accommodate the various
@@ -207,14 +231,15 @@ const Select = <
         if (option.type === "heading") {
           return <ListSubheader key={option.text}>{option.text}</ListSubheader>;
         }
-
         return (
           <MenuItem key={option.value} value={option.value}>
             {hasMultipleChoices && (
-              <MuiCheckbox checked={selectedValue.includes(option.value)} />
+              <MuiCheckbox
+                checked={internalSelectedValues?.includes(option.value)}
+              />
             )}
             {option.text}
-            {selectedValue == option.value && (
+            {internalSelectedValues === option.value && (
               <ListItemSecondaryAction>
                 <CheckIcon />
               </ListItemSecondaryAction>
@@ -222,12 +247,13 @@ const Select = <
           </MenuItem>
         );
       }),
-    [hasMultipleChoices, normalizedOptions, selectedValue]
+    [hasMultipleChoices, normalizedOptions, internalSelectedValues]
   );
 
   const renderFieldComponent = useCallback(
     ({ ariaDescribedBy, errorMessageElementId, id, labelElementId }) => (
       <MuiSelect
+        {...inputValues}
         aria-describedby={ariaDescribedBy}
         aria-errormessage={errorMessageElementId}
         children={children}
@@ -240,18 +266,17 @@ const Select = <
         onChange={onChange}
         onFocus={onFocus}
         renderValue={hasMultipleChoices ? renderValue : undefined}
-        value={selectedValue}
       />
     ),
     [
       children,
+      inputValues,
       hasMultipleChoices,
       nameOverride,
       onBlur,
       onChange,
       onFocus,
       renderValue,
-      selectedValue,
       testId,
     ]
   );
@@ -264,6 +289,7 @@ const Select = <
       hint={hint}
       id={idOverride}
       isDisabled={isDisabled}
+      isFullWidth={isFullWidth}
       isOptional={isOptional}
       label={label}
       renderFieldComponent={renderFieldComponent}

package/src/TextField.tsx

@@ -18,12 +18,14 @@ import {
   memo,
   ReactElement,
   useCallback,
+  useRef,
 } from "react";
 import { InputAdornment, InputBase } from "@mui/material";
 
 import { FieldComponentProps } from "./FieldComponentProps";
 import { Field } from "./Field";
 import { SeleniumProps } from "./SeleniumProps";
+import { useInputValues, getControlState } from "./inputUtils";
 
 export const textFieldTypeValues = [
   "email",
@@ -40,6 +42,10 @@ export type TextFieldProps = {
    * You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).
    */
   autoCompleteType?: InputHTMLAttributes<HTMLInputElement>["autoComplete"];
+  /**
+   * The default value. Use when the component is not controlled.
+   */
+  defaultValue?: string;
   /**
    * End `InputAdornment` for this component.
    */
@@ -91,31 +97,55 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
   (
     {
       autoCompleteType,
+      defaultValue,
       hasInitialFocus,
       endAdornment,
       errorMessage,
       hint,
       id: idOverride,
       isDisabled = false,
+      isFullWidth = false,
       isMultiline = false,
       isOptional = false,
       isReadOnly,
       label,
       name: nameOverride,
       onBlur,
-      onChange,
+      onChange: onChangeProp,
       onFocus,
       placeholder,
       startAdornment,
       testId,
       type = "text",
-      value,
+      value: value,
     },
     ref
   ) => {
+    const controlledStateRef = useRef(
+      getControlState({
+        controlledValue: value,
+        uncontrolledValue: defaultValue,
+      })
+    );
+    const inputValues = useInputValues({
+      defaultValue,
+      value,
+      controlState: controlledStateRef.current,
+    });
+
+    const onChange = useCallback<
+      NonNullable<ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>>
+    >(
+      (event) => {
+        onChangeProp?.(event);
+      },
+      [onChangeProp]
+    );
+
     const renderFieldComponent = useCallback(
       ({ ariaDescribedBy, errorMessageElementId, id, labelElementId }) => (
         <InputBase
+          {...inputValues}
           inputProps={{
             "aria-errormessage": errorMessageElementId,
             "aria-labelledby": labelElementId,
@@ -146,18 +176,18 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
             )
           }
           type={type}
-          value={value}
         />
       ),
       [
         autoCompleteType,
+        inputValues,
         hasInitialFocus,
         endAdornment,
         isMultiline,
         nameOverride,
+        onBlur,
         onChange,
         onFocus,
-        onBlur,
         placeholder,
         isOptional,
         isReadOnly,
@@ -165,7 +195,6 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
         startAdornment,
         testId,
         type,
-        value,
       ]
     );
 
@@ -177,6 +206,7 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
         hint={hint}
         id={idOverride}
         isDisabled={isDisabled}
+        isFullWidth={isFullWidth}
         isOptional={isOptional}
         label={label}
         renderFieldComponent={renderFieldComponent}

package/src/inputUtils.ts

@@ -0,0 +1,76 @@
+/*!
+ * 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 { useMemo } from "react";
+
+type UseControlledStateProps<Value> = {
+  controlledValue?: Value;
+  uncontrolledValue?: Value;
+};
+
+export const ComponentControlledState = {
+  CONTROLLED: "CONTROLLED",
+  UNCONTROLLED: "UNCONTROLLED",
+};
+
+export type ModeType = keyof typeof ComponentControlledState;
+export type ModeTypeValue = (typeof ComponentControlledState)[ModeType];
+
+export const getControlState = <Value>({
+  controlledValue,
+  uncontrolledValue,
+}: UseControlledStateProps<Value>): ModeTypeValue => {
+  if (uncontrolledValue !== undefined || controlledValue === undefined) {
+    return ComponentControlledState.UNCONTROLLED;
+  }
+  return ComponentControlledState.CONTROLLED;
+};
+
+type InputValueProps<Value> = {
+  defaultValue?: Value;
+  value?: Value;
+  controlState: ModeTypeValue;
+};
+
+type InputValue<Value> =
+  | {
+      defaultValue: Value | undefined;
+      value?: undefined;
+    }
+  | {
+      value: Value | undefined;
+      defaultValue?: undefined;
+    };
+
+/**
+ * In components that support being used in a controlled or uncontrolled way, the defaultValue and value props need
+ * to be suppled values in a mutually exclusive way.
+ * If a `value` is being provided to the component, then it is being used in a controlled manner and `defaultValue` needs to be undefined.
+ * If `value` is undefined, then that means the component is being used in an uncontrolled way and `defaultValue` is either Value or undefined.
+ * This helper helps ensure this mutual exclusivity between the 2 props so the component can operate as expected.
+ *
+ * @param {InputValueProps<Value>}: { defaultValue: Value | undefined, value: Value | undefined }
+ * @returns {InputValue<Value>}: { defaultValue: Value | undefined, value?: undefined } | { defaultValue?: undefined, value: Value }
+ */
+export const useInputValues = <Value>({
+  defaultValue,
+  value,
+  controlState,
+}: InputValueProps<Value>): InputValue<Value> => {
+  const inputValues = useMemo(() => {
+    if (controlState === ComponentControlledState.CONTROLLED) {
+      return { value };
+    }
+    return { defaultValue };
+  }, [defaultValue, value]);
+  return inputValues;
+};

package/src/labs/VirtualizedAutocomplete.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,
+  getControlState,
+  useInputValues,
+} from "../inputUtils";
 
 export type AutocompleteProps<
   OptionType,
@@ -196,6 +200,44 @@ const VirtualizedAutocomplete = <
   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) {
+      return defaultValue === undefined
+        ? ([] as AutocompleteValue<
+            OptionType,
+            HasMultipleChoices,
+            undefined,
+            IsCustomValueAllowed
+          >)
+        : defaultValue;
+    }
+    return defaultValue ?? undefined;
+  }, [defaultValue, hasMultipleChoices]);
+
+  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
@@ -230,39 +272,6 @@ const VirtualizedAutocomplete = <
     ),
     [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<
@@ -274,10 +283,9 @@ const VirtualizedAutocomplete = <
     >
   >(
     (event, value, reason, details) => {
-      setLocalValue(value);
       onChangeProp?.(event, value, reason, details);
     },
-    [onChangeProp, setLocalValue]
+    [onChangeProp]
   );
 
   const onInputChange = useCallback<
@@ -291,18 +299,18 @@ const VirtualizedAutocomplete = <
     >
   >(
     (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}
@@ -318,8 +326,6 @@ const VirtualizedAutocomplete = <
       options={options}
       readOnly={isReadOnly}
       renderInput={renderInput}
-      value={localValue}
-      inputValue={localInputValue}
       isOptionEqualToValue={getIsOptionEqualToValue}
     />
   );

package/dist/src/useControlledState.d.ts

@@ -1,28 +0,0 @@
-/*!
- * 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.
- */
-/// <reference types="react" />
-type UseControlledStateProps<Value> = {
-    controlledValue?: Value;
-    uncontrolledValue?: Value;
-};
-/**
- * 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 declare const useControlledState: <Value>({ controlledValue, uncontrolledValue, }: UseControlledStateProps<Value>) => readonly [Value | undefined, import("react").Dispatch<import("react").SetStateAction<Value | undefined>>];
-export {};
-//# sourceMappingURL=useControlledState.d.ts.map