Devex upgrade react to v19.

package.json

@@ -37,7 +37,7 @@
     "@aws-sdk/s3-presigned-post": "3.738.0",
     "@aws-sdk/s3-request-presigner": "3.738.0",
     "@aws-sdk/util-dynamodb": "3.738.0",
-    "@cerebral/react": "4.2.1",
+    "@cerebral/react": "github:zachrog/cerebral#next",
     "@fortawesome/fontawesome-svg-core": "1.2.36",
     "@fortawesome/free-regular-svg-icons": "5.15.4",
     "@fortawesome/free-solid-svg-icons": "5.15.4",
@@ -88,12 +88,12 @@
     "promise-retry": "2.0.1",
     "pug": "3.0.3",
     "qs": "6.14.0",
+    "quill": "1.3.7",
     "quill-delta-to-html": "0.12.1",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "react-idle-timer": "5.7.2",
     "react-number-format": "5.4.3",
-    "react-quill": "2.0.0",
     "react-responsive": "10.0.0",
     "react-select": "5.10.0",
     "riot-route": "3.1.4",
@@ -273,8 +273,8 @@
     "@types/luxon": "3.4.2",
     "@types/node": "22.12.0",
     "@types/promise-retry": "1.1.6",
-    "@types/react-dom": "18.3.1",
-    "@types/react": "18.3.12",
+    "@types/react": "19.0.0",
+    "@types/react-dom": "19.0.0",
     "@types/uuid": "10.0.0",
     "@types/websocket": "1.0.10",
     "@vendia/serverless-express": "4.12.6",

web-client/src/ustc-ui/DateInput/DateRangePickerComponent.tsx

@@ -197,7 +197,7 @@ export const DateRangePickerComponent = ({
   return (
     <FormGroup
       className={formGroupCls}
-      formGroupRef={dateRangePickerRef}
+      ref={dateRangePickerRef}
       omitFormGroupClass={omitFormGroupClass}
     >
       <div
@@ -208,7 +208,7 @@ export const DateRangePickerComponent = ({
         <div className={startPickerCls} data-testid={`${startName}-date-start`}>
           <FormGroup
             errorText={startDateErrorText}
-            formGroupRef={startDatePickerRef}
+            ref={startDatePickerRef}
           >
             <label
               className="usa-label"
@@ -236,7 +236,7 @@ export const DateRangePickerComponent = ({
         <div className={endPickerCls} data-testid={`${endName}-date-end}`}>
           <FormGroup
             errorText={endDateErrorText}
-            formGroupRef={endDatePickerRef}
+            ref={endDatePickerRef}
           >
             <label
               className="usa-label"

web-client/src/ustc-ui/DateInput/DateSelector.tsx

@@ -34,7 +34,7 @@ export const DateSelector = ({
   showDateHint?: boolean;
 }) => {
   const datePickerId = `#${id}-picker.usa-date-picker__external-input`;
-  const formGroupInputRef = useRef<HTMLInputElement>(null);
+  const formGroupInputRef = useRef<HTMLDivElement>(null);
   const defaultMinDate = '0000-01-01';
 
   useEffect(() => {
@@ -83,7 +83,7 @@ export const DateSelector = ({
     <FormGroup
       className={formGroupClassNames}
       errorText={errorText}
-      formGroupRef={formGroupInputRef}
+      ref={formGroupInputRef}
     >
       <label
         className="usa-label"

web-client/src/ustc-ui/FormGroup/FormGroup.tsx

@@ -1,87 +1,90 @@
-import React from 'react';
+import React, { forwardRef, Ref } from 'react';
 import classNames from 'classnames';
 
-export const FormGroup = ({
-  children,
-  className,
-  confirmationText,
-  errorMessageId,
-  errorText,
-  formGroupRef,
-  grow,
-  id,
-  omitFormGroupClass,
-}: {
-  children: React.ReactNode;
-  className?: string;
-  confirmationText?: string;
-  errorText?: string | string[];
-  errorMessageId?: string;
-  formGroupRef?: React.RefObject<HTMLInputElement>;
-  id?: string;
-  grow?: boolean;
-  omitFormGroupClass?: boolean;
-}) => {
-  let hasError = false;
-  const hasConfirmation = !!confirmationText;
+export const FormGroup = forwardRef(
+  (
+    {
+      children,
+      className,
+      confirmationText,
+      errorMessageId,
+      errorText,
+      grow,
+      id,
+      omitFormGroupClass,
+    }: {
+      children: React.ReactNode;
+      className?: string;
+      confirmationText?: string;
+      errorText?: string | string[];
+      errorMessageId?: string;
+      id?: string;
+      grow?: boolean;
+      omitFormGroupClass?: boolean;
+    },
+    ref: Ref<HTMLDivElement>,
+  ) => {
+    let hasError = false;
+    const hasConfirmation = !!confirmationText;
 
-  if (Array.isArray(errorText)) {
-    hasError = errorText.some(text => !!text);
-  } else {
-    hasError = !!errorText;
-  }
+    if (Array.isArray(errorText)) {
+      hasError = errorText.some(text => !!text);
+    } else {
+      hasError = !!errorText;
+    }
 
-  const renderMultipleErrors = (errorTextArr: string[]) => {
-    return errorTextArr.map((text: string, index: number) => {
+    const renderMultipleErrors = (errorTextArr: string[]) => {
+      return errorTextArr.map((text: string, index: number) => {
+        return (
+          text && (
+            <span
+              className="usa-error-message"
+              data-testid={`${errorMessageId}-${index}`}
+              key={text}
+            >
+              {text}
+            </span>
+          )
+        );
+      });
+    };
+
+    const renderSingleError = () => {
       return (
-        text && (
-          <span
-            className="usa-error-message"
-            data-testid={`${errorMessageId}-${index}`}
-            key={text}
-          >
-            {text}
+        errorText && (
+          <span className="usa-error-message" data-testid={errorMessageId}>
+            {errorText}
           </span>
         )
       );
-    });
-  };
+    };
+    const renderSingleConfirmation = () => {
+      return (
+        confirmationText && (
+          <span className="ustc-confirmation-message">{confirmationText}</span>
+        )
+      );
+    };
 
-  const renderSingleError = () => {
     return (
-      errorText && (
-        <span className="usa-error-message" data-testid={errorMessageId}>
-          {errorText}
-        </span>
-      )
+      <div
+        className={classNames(
+          !omitFormGroupClass && 'usa-form-group',
+          hasConfirmation && 'ustc-form-group--confirmation',
+          hasError && 'usa-form-group--error',
+          grow && 'maxw-none',
+          className,
+        )}
+        id={id}
+        ref={ref}
+      >
+        {children}
+        {Array.isArray(errorText) && renderMultipleErrors(errorText)}
+        {!Array.isArray(errorText) && renderSingleError()}
+        {hasConfirmation && renderSingleConfirmation()}
+      </div>
     );
-  };
-  const renderSingleConfirmation = () => {
-    return (
-      confirmationText && (
-        <span className="ustc-confirmation-message">{confirmationText}</span>
-      )
-    );
-  };
-
-  return (
-    <div
-      className={classNames(
-        !omitFormGroupClass && 'usa-form-group',
-        hasConfirmation && 'ustc-form-group--confirmation',
-        hasError && 'usa-form-group--error',
-        grow && 'maxw-none',
-        className,
-      )}
-      id={id}
-      ref={formGroupRef}
-    >
-      {children}
-      {Array.isArray(errorText) && renderMultipleErrors(errorText)}
-      {!Array.isArray(errorText) && renderSingleError()}
-      {hasConfirmation && renderSingleConfirmation()}
-    </div>
-  );
-};
+  },
+);
 
 FormGroup.displayName = 'FormGroup';