Upgrade to React v19

e2e/pages/shared-lending-platform/Navigation.spec.ts

@@ -170,7 +170,7 @@ test('Navigation', async ({ page, navigateToFilingHome }) => {
       .getByRole('link', { name: 'Diversity & Inclusion' })
       .click();
     await expect(page.locator('h1')).toContainText(
-      'Diversity and inclusion at the Bureau',
+      'Office of Minority and Women Inclusion at the Bureau',
     );
     await page.goBack();
 

package.json

@@ -42,21 +42,21 @@
     "axios": "^1.7.4",
     "byte-size": "^8.1.1",
     "classnames": "^2.3.2",
-    "design-system-react": "https://github.com/cfpb/design-system-react",
+    "design-system-react": "https://github.com/cfpb/design-system-react#upgrade-to-react-19",
     "immer": "^10.0.2",
     "keycloak-js": "^21.1.1",
     "less": "^4.1.3",
     "luxon": "^3.4.4",
     "oidc-client-ts": "^3.0.1",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-error-boundary": "^4.0.13",
     "react-hook-form": "^7.45.4",
     "react-keycloak-js": "^1.0.3",
     "react-markdown": "^9.0.1",
     "react-oidc-context": "^3.1.0",
     "react-router-dom": "^6.11.1",
-    "react-scroll": "^1.8.9",
+    "react-scroll": "^1.9.0",
     "react-select": "^5.7.4",
     "regtech-regex": "https://github.com/cfpb/regtech-regex",
     "vite-plugin-svgr": "^3.2.0",
@@ -77,10 +77,10 @@
     "@types/css-mediaquery": "0.1.1",
     "@types/luxon": "^3",
     "@types/node": "^20.5.7",
-    "@types/react": "^18.2.20",
-    "@types/react-dom": "^18.2.7",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
     "@types/react-router-dom": "5.3.3",
-    "@types/react-scroll": "^1.8.7",
+    "@types/react-scroll": "^1.8.10",
     "@types/react-select": "^5.0.1",
     "@types/testing-library__jest-dom": "5.14.5",
     "@typescript-eslint/eslint-plugin": "^6.2.0",

src/components/CommonLinks.tsx

@@ -30,7 +30,7 @@ interface UpdateInstitutionProfileProperties {
 }
 
 function UpdateInstitutionProfile({
-  isCallToAction,
+  isCallToAction = false,
   className = 'font-normal',
 }: UpdateInstitutionProfileProperties): ReactElement {
   const { lei } = useParams();
@@ -44,8 +44,6 @@ function UpdateInstitutionProfile({
   );
 }
 
-UpdateInstitutionProfile.defaultProps = { isCallToAction: false };
-
 interface UpdateFilingDetailsProperties {
   // eslint-disable-next-line react/require-default-props
   label?: string;

src/components/CrumbTrail.tsx

@@ -8,11 +8,15 @@
 const separatorKeys = Array.from({ length }).map((_, index) => `key-${index}`);
 const INCREMENT_BY_ONE = 1;
 
+interface CrumbTrailProperties {
+  className?: string;
+}
+
 function CrumbTrail({
   id = 'crumbtrail',
   className = '',
   children,
-}: JSX.IntrinsicElements['div']): JSX.Element | null {
+}: React.PropsWithChildren<CrumbTrailProperties>): JSX.Element | null {
   let items: ReactNode[] = [];
 
   // eslint-disable-next-line unicorn/no-null
@@ -47,7 +51,7 @@
 
   return (
     <div
       id={id}
       className={`mx-auto my-[1.875rem] max-w-[48.125rem] font-normal ${className}`}
     >
       {items}

src/components/FormButtonGroup.tsx

@@ -7,22 +7,13 @@ interface FormButtonGroupProperties {
 
 function FormButtonGroup({
   className,
-  isFilingStep,
+  isFilingStep = false,
   children,
 }: FormButtonGroupProperties & JSX.IntrinsicElements['div']): JSX.Element {
-  return (
-    <div
-      className={`mt-[1.875rem] flex ${
-        isFilingStep ? 'gap-[1.125rem]' : 'gap-[0.625rem]'
-      } ${className}`}
-    >
-      {children}
-    </div>
-  );
+  const classnames = ['mt-[1.875rem] flex'];
+  classnames.push(isFilingStep ? 'gap-[1.125rem]' : 'gap-[0.625rem]');
+  if (className) classnames.push(className);
+  return <div className={classnames.join(' ')}>{children}</div>;
 }
 
-FormButtonGroup.defaultProps = {
-  isFilingStep: false,
-};
-
 export default FormButtonGroup;

src/components/FormErrorHeader.tsx

@@ -27,7 +27,7 @@
   M extends FieldValues,
   T extends Record<string, string>,
 >({
-  alertHeading,
+  alertHeading = 'There was a problem completing your user profile',
   errors,
   id,
   keyLogicFunc,
@@ -38,7 +38,7 @@
 
   return (
     <div className='mb-[2.8125rem] mt-[2.8125rem] w-full'>
       <Element name={id} id={id}>
         <Alert
           className='[&_div]:max-w-[41.875rem] [&_p]:max-w-[41.875rem]'
           message={alertHeading}
@@ -86,7 +86,7 @@
               return (
                 <ListItem key={key}>
                   {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
                   <Link
                     href='#'
                     className='m-list_link'
                     to={scrollKey}
@@ -120,10 +120,4 @@
   );
 }
 
-FormErrorHeader.defaultProps = {
-  alertHeading: 'There was a problem completing your user profile',
-  errors: null,
-  showKeyIndexNumber: false,
-};
-
 export default FormErrorHeader;

src/components/FormWrapper.tsx

@@ -7,7 +7,7 @@ interface FormWrapperProperties {
 
 function FormWrapper({
   children,
-  isMarginTop,
+  isMarginTop = true,
 }: FormWrapperProperties): JSX.Element {
   const marginTop = isMarginTop ? 'mt-[2.8125rem]' : '';
   return (
@@ -19,8 +19,4 @@ function FormWrapper({
   );
 }
 
-FormWrapper.defaultProps = {
-  isMarginTop: true,
-};
-
 export default FormWrapper;

src/components/GovBanner.tsx

@@ -33,7 +33,3 @@ export default function GovBanner(): JSX.Element {
     />
   );
 }
-
-GovBanner.defaultProps = {
-  currentLanguage: 'en',
-};

src/components/InputErrorMessage.tsx

@@ -9,7 +9,7 @@ interface InputErrorMessageProperties {
 
 function InputErrorMessage({
   children,
-  status,
+  status = 'error',
 }: InputErrorMessageProperties): JSX.Element {
   return (
     <div className='mt-[0.9375rem] max-w-[41.875rem]'>
@@ -21,8 +21,4 @@ function InputErrorMessage({
   );
 }
 
-InputErrorMessage.defaultProps = {
-  status: 'error',
-};
-
 export default InputErrorMessage;

src/components/Loading.tsx

@@ -4,8 +4,6 @@ import { useHeaderAuthLinks } from 'utils/useHeaderAuthLinks';
 import FooterCfGovWrapper from './FooterCfGovWrapper';
 
 export interface LoadingType {
-  // TODO: Do we need this rule? Adding Loading.defaultProps = {...} does not fix the error.
-  // eslint-disable-next-line react/require-default-props
   message?: ReactElement | string;
 }
 

src/components/RadioButtonGroup.tsx

@@ -48,10 +48,4 @@ function RadioButtonGroup({
   );
 }
 
-RadioButtonGroup.defaultProps = {
-  id: 'radio-button-group',
-  label: 'Radio Group',
-  onChange: undefined,
-};
-
 export default RadioButtonGroup;

src/components/SectionIntro.tsx

@@ -5,14 +5,16 @@ import type { ReactNode } from 'react';
 export interface SectionIntroProperties {
   heading?: ReactNode;
   children: ReactNode;
+  className?: string;
+  id?: string;
 }
 
 function SectionIntro({
   heading = null,
   children = '',
   className,
   ...other
-}: JSX.IntrinsicElements['div'] & SectionIntroProperties): JSX.Element {
+}: SectionIntroProperties): JSX.Element {
   return (
     <div
       className={`mb-[1.875rem] box-border max-w-[41.875rem] ${className}`}

src/components/TextInput.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import { useMemo, forwardRef } from 'react';
 
 import { TextInput as DSRTextInput } from 'design-system-react';
 import type { TextInputProperties } from 'design-system-react/dist/components/TextInput/TextInput';
@@ -11,7 +11,7 @@ import {
 
 export const TextInput = forwardRef<HTMLInputElement, TextInputProperties>(
   ({ id, name, type = 'text', maxLength, ...properties }, reference) => {
-    const innerMaxLength = React.useMemo(() => {
+    const innerMaxLength = useMemo(() => {
       if (maxLength && maxLength > 0) {
         return maxLength;
       }

src/pages/Filing/FilingApp/FieldEntry.tsx

@@ -178,8 +178,4 @@ function FieldEntry({
   );
 }
 
-FieldEntry.defaultProps = {
-  isWarning: false,
-};
-
 export default FieldEntry;

src/pages/Filing/FilingApp/FieldSummary.tsx

@@ -18,14 +18,14 @@ interface FieldProperties {
 function FieldSummary({
   heading,
   fieldArray,
-  bottomMargin,
+  bottomMargin = false,
   children,
   id,
   className = '',
   lei,
   submissionId,
   filingPeriod,
-  isWarning,
+  isWarning = false,
 }: FieldProperties & JSX.IntrinsicElements['div']): JSX.Element {
   return (
     <div
@@ -46,9 +46,4 @@ function FieldSummary({
   );
 }
 
-FieldSummary.defaultProps = {
-  bottomMargin: false,
-  isWarning: false,
-};
-
 export default FieldSummary;

src/pages/Filing/FilingApp/FilingErrors/FilingErrorsWarningsLimit.tsx

@@ -26,7 +26,7 @@ interface FilingErrorsWarningsLimitProperties {
 }
 
 function FilingErrorsWarningsLimit({
-  isWarning,
+  isWarning = false,
 }: FilingErrorsWarningsLimitProperties): JSX.Element {
   return (
     <div className='my-[1.875rem] max-w-[41.875rem]'>
@@ -52,8 +52,4 @@ function FilingErrorsWarningsLimit({
   );
 }
 
-FilingErrorsWarningsLimit.defaultProps = {
-  isWarning: false,
-};
-
 export default FilingErrorsWarningsLimit;

src/pages/Filing/FilingApp/FilingFieldLinks.tsx

@@ -10,6 +10,7 @@ interface FilingFieldLinksProperties {
   lei: string;
   submissionId: number;
   filingPeriod: FilingPeriodType;
+  className?: string;
 }
 
 function FilingFieldLinks({
@@ -19,7 +20,7 @@ function FilingFieldLinks({
   submissionId,
   className,
   ...others
-}: FilingFieldLinksProperties & JSX.IntrinsicElements['div']): JSX.Element {
+}: FilingFieldLinksProperties): JSX.Element {
   // download in-progress state
   const [downloadInProgress, setDownloadInProgress] = useState<boolean>(false);
   const auth = useSblAuth();

src/pages/Filing/FilingApp/InstitutionCard.tsx

@@ -182,15 +182,12 @@ function InstitutionCardDataWrapper({
  */
 export function InstitutionCard({
   lei,
+  name = '<NO NAME>',
+  status = '<NO STATUS>',
   ...others
 }: InstitutionDataType): JSXElement {
   if (!lei) return null;
-  return <InstitutionCardDataWrapper {...{ lei, ...others }} />;
+  return <InstitutionCardDataWrapper {...{ lei, name, status, ...others }} />;
 }
 
-InstitutionCard.defaultProps = {
-  name: '<NO NAME>',
-  status: '<NO STATUS>',
-};
-
 export default InstitutionCard;

src/pages/Filing/ProcessStep.tsx

@@ -5,12 +5,12 @@ import { ProcessStepNumber } from './ProcessStepNumber';
 interface ProcessStepProperties {
   heading: string;
   children: (JSX.Element | string)[] | JSX.Element | string;
-  size: string;
+  size?: string;
 }
 
 export default function ProcessStep({
   number,
-  size,
+  size = 'h4',
   heading,
   children,
 }: ProcessStepNumberProperties & ProcessStepProperties): JSX.Element {
@@ -24,7 +24,3 @@ export default function ProcessStep({
     </div>
   );
 }
-
-ProcessStep.defaultProps = {
-  ...ProcessStepNumber.defaultProps,
-};

src/pages/Filing/ProcessStepNumber.tsx

@@ -17,7 +17,7 @@ export interface ProcessStepNumberProperties {
 export function ProcessStepNumber({
   number,
   withBg,
-  size,
+  size = 'h4',
 }: ProcessStepNumberProperties): ReactElement {
   const StepIcons: Record<number | string, string> = {
     '1': 'one',
@@ -39,8 +39,3 @@ export function ProcessStepNumber({
     <Icon name={name} size={size} ariaLabel={`Step ${StepIcons[number]}`} />
   );
 }
-
-ProcessStepNumber.defaultProps = {
-  size: 'h4',
-  withBg: false,
-};

src/pages/Filing/UpdateFinancialProfile/UpdateAffiliateInformation.tsx

@@ -17,7 +17,7 @@ const parentRssd = 'parent_rssd_id';
 const topHolderRssd = 'top_holder_rssd_id';
 
 function UpdateAffiliateInformation({
-  heading,
+  heading = 'Update your financial institution affiliate information',
   register,
   formErrors,
   watch,
@@ -121,8 +121,4 @@ function UpdateAffiliateInformation({
   );
 }
 
-UpdateAffiliateInformation.defaultProps = {
-  heading: 'Update your financial institution affiliate information',
-};
-
 export default UpdateAffiliateInformation;

src/pages/Filing/ViewInstitutionProfile/AlertInstitutionApiUnreachable.tsx

@@ -11,7 +11,7 @@ export interface InstitutionApiErrorWrapperType {
 
 // Shared page-level alert for Institution API errors
 export function AlertInstitutionApiUnreachable({
-  isError,
+  isError = false,
   children,
 }: InstitutionApiErrorWrapperType): JSX.Element {
   if (isError)
@@ -31,8 +31,4 @@ export function AlertInstitutionApiUnreachable({
   return <>{children}</>;
 }
 
-AlertInstitutionApiUnreachable.defaultProps = {
-  isError: false,
-};
-
 export default AlertInstitutionApiUnreachable;