Revert PR #3744 (#3785)

* Revert "chore(deps): Bump the react-aria group with 2 updates" This reverts commit bf80247b4b. * Revert "Align with updated react-aria props" This reverts commit 069d2fff30.
2023-11-21 11:56:40 -08:00 · 2023-11-21 11:56:40 -08:00 · 1f76ea4f44
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -76,10 +76,10 @@
    "patch-package": "^8.0.0",
    "pg": "^8.11.3",
    "react": "^18.2.0",
-    "react-aria": "^3.30.0",
+    "react-aria": "^3.29.1",
    "react-cookie": "^6.1.1",
    "react-dom": "^18.2.0",
-    "react-stately": "^3.28.0",
+    "react-stately": "^3.27.1",
    "uuid": "^9.0.1",
    "winston": "^3.11.0"
  },
--- a/src/app/(proper_react)/redesign/(authenticated)/user/welcome/EnterInfo.tsx
+++ b/src/app/(proper_react)/redesign/(authenticated)/user/welcome/EnterInfo.tsx
@ -94,6 +94,9 @@ export const EnterInfo = ({
      ),
      value: firstName,
      displayValue: firstName,
+      errorMessage: l10n.getString(
+        "onboarding-enter-details-input-error-message-generic",
+      ),
      isValid: firstName.trim() !== "",
      onChange: setFirstName,
    },
@ -106,6 +109,9 @@ export const EnterInfo = ({
      ),
      value: lastName,
      displayValue: lastName,
+      errorMessage: l10n.getString(
+        "onboarding-enter-details-input-error-message-generic",
+      ),
      isValid: lastName.trim() !== "",
      onChange: setLastName,
    },
@ -118,6 +124,9 @@ export const EnterInfo = ({
      ),
      value: location,
      displayValue: location,
+      errorMessage: l10n.getString(
+        "onboarding-enter-details-input-error-message-location",
+      ),
      isValid: location.trim() !== "",
      onChange: setLocation,
    },
@ -131,6 +140,9 @@ export const EnterInfo = ({
        dateStyle: "medium",
        timeZone: "UTC",
      }),
+      errorMessage: l10n.getString(
+        "onboarding-enter-details-input-error-message-generic",
+      ),
      isValid: meetsAgeRequirement(dateOfBirth),
      onChange: setDateOfBirth,
    },
@ -314,28 +326,34 @@ export const EnterInfo = ({
      <form onSubmit={handleOnSubmit}>
        <div className={styles.inputContainer}>
          {userDetailsData.map(
-            ({ key, label, onChange, placeholder, isValid, type, value }) => {
+            ({
+              key,
+              errorMessage,
+              label,
+              onChange,
+              placeholder,
+              isValid,
+              type,
+              value,
+            }) => {
              const validationState =
                !isValid && invalidInputs.includes(key) ? "invalid" : "valid";
              return key === "location" ? (
                <LocationAutocompleteInput
                  key={key}
-                  errorMessage={l10n.getString(
-                    "onboarding-enter-details-input-error-message-location",
-                  )}
+                  errorMessage={errorMessage}
                  label={label}
                  isRequired={true}
-                  onInputChange={onChange}
+                  onChange={onChange}
                  placeholder={placeholder}
+                  type={type}
                  validationState={validationState}
-                  inputValue={value}
+                  value={value}
                />
              ) : (
                <InputField
                  key={key}
-                  errorMessage={l10n.getString(
-                    "onboarding-enter-details-input-error-message-generic",
-                  )}
+                  errorMessage={errorMessage}
                  label={label}
                  isRequired={true}
                  onChange={onChange}
--- a/src/app/components/client/ComboBox.tsx
+++ b/src/app/components/client/ComboBox.tsx
@ -16,27 +16,23 @@ interface ComboBoxProps extends ComboBoxStateOptions<object> {
 }

 function ComboBox(props: ComboBoxProps) {
-  const { label, isRequired, validationState } = props;
+  const { errorMessage, label, isRequired, validationState } = props;
  const inputRef = useRef(null);
  const listBoxRef = useRef(null);
  const popoverRef = useRef(null);
  const state = useComboBoxState({ ...props });
-  const {
-    inputProps,
-    listBoxProps,
-    labelProps,
-    errorMessageProps,
-    validationErrors,
-  } = useComboBox(
-    {
-      ...props,
-      inputRef,
-      listBoxRef,
-      popoverRef,
-    },
-    state,
-  );
+  const { inputProps, listBoxProps, labelProps, errorMessageProps } =
+    useComboBox(
+      {
+        ...props,
+        inputRef,
+        listBoxRef,
+        popoverRef,
+      },
+      state,
+    );
  const isInvalid = validationState === "invalid";
+  const showError = errorMessage && isInvalid;

  return (
    <>
@ -58,16 +54,9 @@ function ComboBox(props: ComboBoxProps) {
            !inputProps.value ? styles.noValue : ""
          } ${isInvalid ? styles.hasError : ""}`}
        />
-        {isInvalid && (
+        {showError && (
          <div {...errorMessageProps} className={styles.inputMessage}>
-            {
-              // We always pass in a string at the time of writing, so we can't
-              // hit the "else" path with tests:
-              /* c8 ignore next 3 */
-              typeof props.errorMessage === "string"
-                ? props.errorMessage
-                : validationErrors.join(" ")
-            }
+            {errorMessage}
          </div>
        )}
      </div>
--- a/src/app/components/client/InputField.tsx
+++ b/src/app/components/client/InputField.tsx
@ -9,11 +9,14 @@ import { AriaTextFieldProps, useTextField } from "react-aria";
 import styles from "./InputField.module.scss";

 export const InputField = (props: AriaTextFieldProps) => {
-  const { isRequired, label, validationState, value } = props;
+  const { errorMessage, isRequired, label, validationState, value } = props;
  const inputRef = useRef(null);
-  const { errorMessageProps, validationErrors, inputProps, labelProps } =
-    useTextField(props, inputRef);
+  const { errorMessageProps, inputProps, labelProps } = useTextField(
+    props,
+    inputRef,
+  );
  const isInvalid = validationState === "invalid";
+  const showError = errorMessage && isInvalid;

  return (
    <div className={styles.input}>
@ -32,16 +35,9 @@ export const InputField = (props: AriaTextFieldProps) => {
          isInvalid ? styles.hasError : ""
        }`}
      />
-      {isInvalid && (
+      {showError && (
        <div {...errorMessageProps} className={styles.inputMessage}>
-          {
-            // We always pass in a string at the time of writing, so we can't
-            // hit the "else" path with tests:
-            /* c8 ignore next 3 */
-            typeof props.errorMessage === "string"
-              ? props.errorMessage
-              : validationErrors.join(" ")
-          }
+          {errorMessage}
        </div>
      )}
    </div>
--- a/src/app/components/client/ListBox.tsx
+++ b/src/app/components/client/ListBox.tsx
@ -4,7 +4,7 @@

 "use client";

-import { ReactNode, RefObject, useRef } from "react";
+import { Key, ReactNode, RefObject, useRef } from "react";
 import { AriaListBoxOptions, useListBox, useOption } from "react-aria";
 import { ListState } from "react-stately";
 import { useElementWidth } from "../../hooks/useElementWidth";
@ -12,7 +12,7 @@ import styles from "./ListBox.module.scss";

 export interface OptionProps extends AriaListBoxOptions<unknown> {
  item: {
-    key: Parameters<typeof useOption>[0]["key"];
+    key: Key;
    rendered: ReactNode;
  };
  state: ListState<object>;
--- a/src/app/components/client/LocationAutocompleteInput.tsx
+++ b/src/app/components/client/LocationAutocompleteInput.tsx
@ -4,8 +4,9 @@

 "use client";

-import { useDeferredValue, useEffect, useState } from "react";
-import { ComboBoxStateOptions, Item } from "react-stately";
+import { Key, useDeferredValue, useEffect, useState } from "react";
+import { AriaTextFieldProps } from "react-aria";
+import { Item } from "react-stately";
 import { ComboBox } from "./ComboBox";
 import {
  MatchingLocations,
@ -60,26 +61,20 @@ function getLocationString(location: RelevantLocation) {
  return `${name}, ${stateCode}, ${countryCode}`;
 }

-function getLocationStringByKey(
-  locations: Array<RelevantLocation>,
-  key: ComboBoxStateOptions<object>["selectedKey"],
-) {
+function getLocationStringByKey(locations: Array<RelevantLocation>, key: Key) {
  const location = locations.find(({ id }) => id === key);
  // TODO: Add unit test when changing this code:
  /* c8 ignore next */
  return location ? getLocationString(location) : "";
 }

-export const LocationAutocompleteInput = (
-  props: ComboBoxStateOptions<object>,
-) => {
+export const LocationAutocompleteInput = (props: AriaTextFieldProps) => {
  const [searchQuery, setSearchQuery] = useState("");
  const deferredSearchQuery = useDeferredValue(searchQuery);

  const [locationSuggestions, setLocationSuggestions] =
    useState<MatchingLocations>([]);
-  const [selectedKey, setSelectedKey] =
-    useState<ComboBoxStateOptions<object>["selectedKey"]>("");
+  const [selectedKey, setSelectedKey] = useState<Key>("");

  useEffect(() => {
    const abortController = new AbortController();
@ -142,14 +137,12 @@ export const LocationAutocompleteInput = (
    }

    setSearchQuery(inputValue);
-    props.onInputChange?.(inputValue);
+    props.onChange?.(inputValue);
  };

  // TODO: Add unit test when changing this code:
-  /* c8 ignore next 5 */
-  const handleOnSelectionChange = (
-    key: ComboBoxStateOptions<object>["selectedKey"],
-  ) => {
+  /* c8 ignore next 3 */
+  const handleOnSelectionChange = (key: Key) => {
    setSelectedKey(key);
  };

--- a/src/app/components/client/TabList.tsx
+++ b/src/app/components/client/TabList.tsx
@ -27,7 +27,7 @@ export type TabListProps = TabsProps & {

 export interface TabParams {
  item: {
-    key: Parameters<typeof useTab>[0]["key"];
+    key: Key;
    rendered: ReactNode;
  };
  state: TabListState<object>;