Story/FCT2 - 20995 UI dependency update

src/ui-spa/package.json

@@ -34,12 +34,12 @@
     "date-fns": "^4.1.0",
     "date-fns-tz": "^3.2.0",
     "govuk-react-jsx": "^7.1.0",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
     "react-error-boundary": "^6.0.0",
-    "react-router": "^7.9.1",
+    "react-router": "^8.1.0",
     "sass": "^1.92.1",
-    "uuid": "^13.0.0",
+    "uuid": "^14.0.1",
     "zod": "^4.3.6"
   },
   "devDependencies": {
@@ -51,12 +51,12 @@
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/node": "^24.9.1",
-    "@types/react": "^19.1.10",
-    "@types/react-dom": "^19.1.7",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
     "@typescript-eslint/eslint-plugin": "^8.44.0",
     "@typescript-eslint/parser": "^8.44.0",
-    "@vitejs/plugin-react": "^5.0.0",
-    "@vitest/coverage-v8": "^3.2.4",
+    "@vitejs/plugin-react": "^6.0.0",
+    "@vitest/coverage-v8": "^4.1.10",
     "cross-env": "^10.0.0",
     "dotenv": "^17.0.0",
     "eslint": "^9.33.0",
@@ -74,14 +74,17 @@
     "rimraf": "^6.0.1",
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.39.1",
-    "vite": "^7.1.12",
-    "vite-plugin-istanbul": "^7.2.0",
-    "vite-plugin-svgr": "^4.5.0",
-    "vitest": "^3.2.4"
+    "vite": "^8.1.4",
+    "vite-plugin-istanbul": "^9.0.1",
+    "vite-plugin-svgr": "^5.2.0",
+    "vitest": "^4.1.10"
   },
   "msw": {
     "workerDirectory": [
       "public"
     ]
+  },
+  "overrides": {
+    "react-router": "^8.1.0"
   }
 }

src/ui-spa/src/common/hooks/useRouteDocumentTitle.test.tsx

@@ -1,5 +1,5 @@
 import { render, screen, cleanup, act } from "@testing-library/react";
-import { MemoryRouter } from "react-router-dom";
+import { MemoryRouter } from "react-router";
 import useRouteDocumentTitle from "./useRouteDocumentTitle";
 
 afterEach(() => {

src/ui-spa/src/common/hooks/useRouteDocumentTitle.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { useLocation } from "react-router-dom";
+import { useLocation } from "react-router";
 
 const routeTitles: Record<string, string> = {
   "/case-registration": "Home",

src/ui-spa/src/components/ProtectedRoutes.tsx

@@ -1,4 +1,4 @@
-import { Outlet, Navigate } from "react-router-dom";
+import { Outlet, Navigate } from "react-router";
 import { useContext } from "react";
 import { CaseRegistrationFormContext } from "../common/providers/CaseRegistrationProvider";
 const ProtectedRoutes = () => {

src/ui-spa/src/components/case-registration/add-charge-details/index.tsx

@@ -13,7 +13,7 @@ import { type GeneralRadioValue } from "../../../common/reducers/caseRegistratio
 import { formatNameUtil } from "../../../common/utils/formatNameUtil";
 import { isChargedWithAdultWarningActive } from "../../../common/utils/isChargedWithAdultWarningActive";
 import { isValidOnOrBeforeDate } from "../../../common/utils/isValidOnOrBeforeDate";
-import { useNavigate, useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router";
 import SaveAndCancel from "../../common/SaveAndCancel";
 import PageContentWrapper from "../../common/PageContentWrapper";
 import styles from "../index.module.scss";

src/ui-spa/src/components/case-registration/add-charge-suspect/index.tsx

@@ -9,7 +9,7 @@ import {
 import { Radios, ErrorSummary, BackLink } from "../../govuk";
 import SaveAndCancel from "../../common/SaveAndCancel";
 import { CaseRegistrationFormContext } from "../../../common/providers/CaseRegistrationProvider";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import useChargesCount from "../../../common/hooks/useChargesCount";
 import { formatNameUtil } from "../../../common/utils/formatNameUtil";
 import PageContentWrapper from "../../common/PageContentWrapper";

src/ui-spa/src/components/case-registration/add-charge-victim/index.tsx

@@ -13,7 +13,7 @@ import { type VictimAdditionalDetailsValue } from "../../../common/reducers/case
 import { formatNameUtil } from "../../../common/utils/formatNameUtil";
 import { sanitizeNameText } from "../../../common/utils/sanitizeNameText";
 import { DEFAULT_VICTIM_ADDITIONAL_DETAIL_VALUE } from "../../../common/constants/general";
-import { useNavigate, useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router";
 import { v4 as uuidv4 } from "uuid";
 import PageContentWrapper from "../../common/PageContentWrapper";
 import styles from "../index.module.scss";

src/ui-spa/src/components/case-registration/add-suspect/index.tsx

@@ -15,7 +15,7 @@ import {
 } from "../../../common/reducers/caseRegistrationReducer";
 import { getNextSuspectJourneyRoute } from "../../../common/utils/getSuspectJourneyRoutes";
 import { sanitizeNameText } from "../../../common/utils/sanitizeNameText";
-import { useNavigate, useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router";
 import PageContentWrapper from "../../common/PageContentWrapper";
 import styles from "../index.module.scss";
 

src/ui-spa/src/components/case-registration/cancel-case-registration-confirmation/index.tsx

@@ -2,7 +2,7 @@ import { useRef, useEffect, useState, useCallback, useMemo } from "react";
 import { Radios, Button, ErrorSummary } from "../../govuk";
 import { type GeneralRadioValue } from "../../../common/reducers/caseRegistrationReducer";
 import { HOME_PAGE_URL } from "../../../config";
-import { useNavigate, useLocation } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router";
 import PageContentWrapper from "../../common/PageContentWrapper";
 import styles from "../index.module.scss";
 

src/ui-spa/src/components/case-registration/case-areas-page/index.tsx

@@ -5,7 +5,7 @@ import { CaseRegistrationFormContext } from "../../../common/providers/CaseRegis
 import { getAreasOrDivisions } from "../../../common/utils/getAreasOrDivisions";
 import { getSelectedUnit } from "../../../common/utils/getSelectedUnit";
 import useErrorSummaryList from "../../../common/hooks/useErrorSummaryList";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import PageContentWrapper from "../../common/PageContentWrapper";
 import styles from "../index.module.scss";
 import pageStyles from "./index.module.scss";

src/ui-spa/src/components/case-registration/case-assignee/index.tsx

@@ -21,7 +21,7 @@ import {
 } from "../../../apis/gateway-api";
 import { useQuery } from "@tanstack/react-query";
 import useErrorSummaryList from "../../../common/hooks/useErrorSummaryList";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import PageContentWrapper from "../../common/PageContentWrapper";
 import pageStyles from "./index.module.scss";
 import styles from "../index.module.scss";

src/ui-spa/src/components/case-registration/case-complexity-page/index.tsx

@@ -5,7 +5,7 @@ import { CaseRegistrationFormContext } from "../../../common/providers/CaseRegis
 import { getCaseComplexities } from "../../../apis/gateway-api";
 import { useQuery } from "@tanstack/react-query";
 import useErrorSummaryList from "../../../common/hooks/useErrorSummaryList";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import PageContentWrapper from "../../common/PageContentWrapper";
 import styles from "../index.module.scss";
 

src/ui-spa/src/components/case-registration/case-details-page/index.tsx

@@ -9,7 +9,7 @@ import { getSelectedUnit } from "../../../common/utils/getSelectedUnit";
 import { useQuery } from "@tanstack/react-query";
 import { validateUrn } from "../../../apis/gateway-api";
 import useErrorSummaryList from "../../../common/hooks/useErrorSummaryList";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import PageContentWrapper from "../../common/PageContentWrapper";
 import styles from "../index.module.scss";
 import pageStyles from "./index.module.scss";

src/ui-spa/src/components/case-registration/case-monitoring-codes/index.tsx

@@ -4,7 +4,7 @@ import SaveAndCancel from "../../common/SaveAndCancel";
 import { CaseRegistrationFormContext } from "../../../common/providers/CaseRegistrationProvider";
 import { getCaseMonitoringCodes } from "../../../apis/gateway-api";
 import { useQuery } from "@tanstack/react-query";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { type CaseMonitoringCodes } from "../../../schemas";
 import { isMonitoringCodeOptional } from "../../../common/utils/isMonitoringCodeOptional";
 import useChargesCount from "../../../common/hooks/useChargesCount";

src/ui-spa/src/components/case-registration/case-summary-page/index.tsx

@@ -21,7 +21,7 @@ import { useMutation, useQuery } from "@tanstack/react-query";
 import { submitCaseRegistration, validateUrn } from "../../../apis/gateway-api";
 import { getPoliceUnit } from "../../../common/utils/getPoliceUnit";
 import SuspectSummary from "../suspect-summary/SuspectSummary";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import PageContentWrapper from "../../common/PageContentWrapper";
 import { useIsAreaSensitive } from "../../../common/hooks/useIsAreaSensitive";
 import styles from "./index.module.scss";

src/ui-spa/src/components/case-registration/case-summary-page/utils/getSummaryListRows.tsx

@@ -4,7 +4,7 @@ import {
   type CaseRegistrationActions,
 } from "../../../../common/reducers/caseRegistrationReducer";
 import { Tag } from "../../../../components/govuk";
-import { type NavigateFunction } from "react-router-dom";
+import { type NavigateFunction } from "react-router";
 import type { CaseMonitoringCodes, PoliceUnit } from "../../../../schemas";
 
 export const getCaseDetailsSummaryListRows = (

src/ui-spa/src/components/case-registration/change-area-confirmation/index.tsx

@@ -1,6 +1,6 @@
 import { useContext } from "react";
 import { Button, BackLink } from "../../govuk";
-import { useNavigate, useLocation, Link } from "react-router-dom";
+import { useNavigate, useLocation, Link } from "react-router";
 import { CaseRegistrationFormContext } from "../../../common/providers/CaseRegistrationProvider";
 import PageContentWrapper from "../../common/PageContentWrapper";
 import pageStyles from "./index.module.scss";

src/ui-spa/src/components/case-registration/change-registering-unit-confirmation/index.tsx

@@ -1,6 +1,6 @@
 import { useContext } from "react";
 import { Button, BackLink } from "../../govuk";
-import { useNavigate, useLocation, Link } from "react-router-dom";
+import { useNavigate, useLocation, Link } from "react-router";
 import { CaseRegistrationFormContext } from "../../../common/providers/CaseRegistrationProvider";
 import PageContentWrapper from "../../common/PageContentWrapper";
 import pageStyles from "./index.module.scss";

src/ui-spa/src/components/case-registration/charge-remove-confirmation/index.tsx

@@ -1,6 +1,6 @@
 import { useContext } from "react";
 import { Button, BackLink } from "../../govuk";
-import { useNavigate, useLocation, Link } from "react-router-dom";
+import { useNavigate, useLocation, Link } from "react-router";
 import { CaseRegistrationFormContext } from "../../../common/providers/CaseRegistrationProvider";
 import PageContentWrapper from "../../common/PageContentWrapper";
 import pageStyles from "./index.module.scss";

src/ui-spa/src/components/case-registration/charges-offence-search/index.tsx

@@ -10,7 +10,7 @@ import {
 import { CaseRegistrationFormContext } from "../../../common/providers/CaseRegistrationProvider";
 import { getOffences } from "../../../apis/gateway-api";
 import { useQuery } from "@tanstack/react-query";
-import { Link, useParams, useNavigate } from "react-router-dom";
+import { Link, useParams, useNavigate } from "react-router";
 import { formatNameUtil } from "../../../common/utils/formatNameUtil";
 import useChargesCount from "../../../common/hooks/useChargesCount";
 import useErrorSummaryList from "../../../common/hooks/useErrorSummaryList";

src/ui-spa/src/components/case-registration/charges-summary/index.tsx

@@ -2,7 +2,7 @@ import { useState, useContext, useCallback, useMemo } from "react";
 import { Radios, ErrorSummary, BackLink } from "../../govuk";
 import SaveAndCancel from "../../common/SaveAndCancel";
 import { CaseRegistrationFormContext } from "../../../common/providers/CaseRegistrationProvider";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import useChargesCount from "../../../common/hooks/useChargesCount";
 import ChargesSummary from "./ChargesSummary";
 import useErrorSummaryList from "../../../common/hooks/useErrorSummaryList";

src/ui-spa/src/components/case-registration/charges-victim-duplicate-confirmation/index.tsx

@@ -1,6 +1,6 @@
 import { useContext } from "react";
 import { Button, BackLink } from "../../govuk";
-import { useNavigate, useLocation, Link } from "react-router-dom";
+import { useNavigate, useLocation, Link } from "react-router";
 import { CaseRegistrationFormContext } from "../../../common/providers/CaseRegistrationProvider";
 import { type VictimAdditionalDetailsValue } from "../../../common/reducers/caseRegistrationReducer";
 import { formatNameUtil } from "../../../common/utils/formatNameUtil";

src/ui-spa/src/components/case-registration/first-hearing-page/index.tsx

@@ -6,7 +6,7 @@ import { CaseRegistrationFormContext } from "../../../common/providers/CaseRegis
 import { getSelectedUnit } from "../../../common/utils/getSelectedUnit";
 import { getCourtsByUnitId } from "../../../apis/gateway-api";
 import { useQuery } from "@tanstack/react-query";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { isOnOrAfterChargeDates } from "../../../common/utils/chargeDatesUtil";
 import { isMonitoringCodeOptional } from "../../../common/utils/isMonitoringCodeOptional";
 import { PRE_CHARGE_DECISION_CODE } from "../../../common/constants/general";

src/ui-spa/src/components/case-registration/index.tsx

@@ -13,7 +13,7 @@ import { useIsAreaSensitive } from "../../common/hooks/useIsAreaSensitive";
 import { sanitizeOperationNameText } from "../../common/utils/sanitizeOperationNameText";
 import { DEFAULT_COMPLEXITY_DESCRIPTION } from "../../common/constants/general";
 import useErrorSummaryList from "../../common/hooks/useErrorSummaryList";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import PageContentWrapper from "../common/PageContentWrapper";
 import styles from "./index.module.scss";
 

src/ui-spa/src/components/case-registration/remove-all-suspects-confirmation/index.tsx

@@ -1,6 +1,6 @@
 import { useContext } from "react";
 import { Button, BackLink } from "../../govuk";
-import { useNavigate, useLocation, Link } from "react-router-dom";
+import { useNavigate, useLocation, Link } from "react-router";
 import { CaseRegistrationFormContext } from "../../../common/providers/CaseRegistrationProvider";
 import { type GeneralRadioValue } from "../../../common/reducers/caseRegistrationReducer";
 import PageContentWrapper from "../../common/PageContentWrapper";

src/ui-spa/src/components/case-registration/suspect-aliases-summary/index.tsx

@@ -6,7 +6,7 @@ import { formatNameUtil } from "../../../common/utils/formatNameUtil";
 import useErrorSummaryList from "../../../common/hooks/useErrorSummaryList";
 import useGetSuspectRoute from "../../../common/hooks/useGetSuspectRoute";
 import ErrorSummaryWrapper from "../../common/ErrorSummaryWrapper";
-import { useNavigate, useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router";
 import PageContentWrapper from "../../common/PageContentWrapper";
 import styles from "../index.module.scss";
 import pageStyles from "./index.module.scss";

src/ui-spa/src/components/case-registration/suspect-aliases/index.tsx

@@ -6,7 +6,7 @@ import { getPreviousSuspectJourneyRoute } from "../../../common/utils/getSuspect
 import { formatNameUtil } from "../../../common/utils/formatNameUtil";
 import { sanitizeNameText } from "../../../common/utils/sanitizeNameText";
 import useErrorSummaryList from "../../../common/hooks/useErrorSummaryList";
-import { useNavigate, useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router";
 import ErrorSummaryWrapper from "../../common/ErrorSummaryWrapper";
 import PageContentWrapper from "../../common/PageContentWrapper";
 import styles from "../index.module.scss";

src/ui-spa/src/components/case-registration/suspect-asn/index.tsx

@@ -2,7 +2,7 @@ import { useState, useContext, useCallback, useMemo } from "react";
 import { Input, BackLink } from "../../govuk";
 import SaveAndCancel from "../../common/SaveAndCancel";
 import { CaseRegistrationFormContext } from "../../../common/providers/CaseRegistrationProvider";
-import { useNavigate, useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router";
 import { sanitizeASNText } from "../../../common/utils/sanitizeASNText";
 import useErrorSummaryList from "../../../common/hooks/useErrorSummaryList";
 import useGetSuspectRoute from "../../../common/hooks/useGetSuspectRoute";

src/ui-spa/src/components/case-registration/suspect-disability/index.tsx

@@ -4,7 +4,7 @@ import SaveAndCancel from "../../common/SaveAndCancel";
 import { CaseRegistrationFormContext } from "../../../common/providers/CaseRegistrationProvider";
 import { type GeneralRadioValue } from "../../../common/reducers/caseRegistrationReducer";
 import { formatNameUtil } from "../../../common/utils/formatNameUtil";
-import { useNavigate, useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router";
 import useErrorSummaryList from "../../../common/hooks/useErrorSummaryList";
 import useGetSuspectRoute from "../../../common/hooks/useGetSuspectRoute";
 import ErrorSummaryWrapper from "../../common/ErrorSummaryWrapper";

src/ui-spa/src/components/case-registration/suspect-dob/index.tsx

@@ -8,7 +8,7 @@ import { dobValidationConstants } from "../../../common/constants/dobValidationC
 import useErrorSummaryList from "../../../common/hooks/useErrorSummaryList";
 import useGetSuspectRoute from "../../../common/hooks/useGetSuspectRoute";
 import ErrorSummaryWrapper from "../../common/ErrorSummaryWrapper";
-import { useNavigate, useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router";
 import PageContentWrapper from "../../common/PageContentWrapper";
 import styles from "../index.module.scss";
 

src/ui-spa/src/components/case-registration/suspect-ethnicity/index.tsx

@@ -4,7 +4,7 @@ import SaveAndCancel from "../../common/SaveAndCancel";
 import { CaseRegistrationFormContext } from "../../../common/providers/CaseRegistrationProvider";
 import { getEthnicities } from "../../../apis/gateway-api";
 import { useQuery } from "@tanstack/react-query";
-import { useNavigate, useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router";
 import { formatNameUtil } from "../../../common/utils/formatNameUtil";
 import useErrorSummaryList from "../../../common/hooks/useErrorSummaryList";
 import useGetSuspectRoute from "../../../common/hooks/useGetSuspectRoute";

src/ui-spa/src/components/case-registration/suspect-gender/index.tsx

@@ -5,7 +5,7 @@ import { CaseRegistrationFormContext } from "../../../common/providers/CaseRegis
 import { getGenders } from "../../../apis/gateway-api";
 import { useQuery } from "@tanstack/react-query";
 import { formatNameUtil } from "../../../common/utils/formatNameUtil";
-import { useNavigate, useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router";
 import useErrorSummaryList from "../../../common/hooks/useErrorSummaryList";
 import useGetSuspectRoute from "../../../common/hooks/useGetSuspectRoute";
 import ErrorSummaryWrapper from "../../common/ErrorSummaryWrapper";

src/ui-spa/src/components/case-registration/suspect-offender/index.tsx

@@ -5,7 +5,7 @@ import DateInputNative from "../../common/DateInputNative";
 import { CaseRegistrationFormContext } from "../../../common/providers/CaseRegistrationProvider";
 import { getOffenderTypes } from "../../../apis/gateway-api";
 import { useQuery } from "@tanstack/react-query";
-import { useNavigate, useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router";
 import { formatNameUtil } from "../../../common/utils/formatNameUtil";
 import { isValidOnOrBeforeDate } from "../../../common/utils/isValidOnOrBeforeDate";
 import { isChargedWithAdultWarningActive } from "../../../common/utils/isChargedWithAdultWarningActive";

src/ui-spa/src/components/case-registration/suspect-religion/index.tsx

@@ -4,7 +4,7 @@ import SaveAndCancel from "../../common/SaveAndCancel";
 import { CaseRegistrationFormContext } from "../../../common/providers/CaseRegistrationProvider";
 import { getReligions } from "../../../apis/gateway-api";
 import { useQuery } from "@tanstack/react-query";
-import { useNavigate, useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router";
 import { formatNameUtil } from "../../../common/utils/formatNameUtil";
 import useErrorSummaryList from "../../../common/hooks/useErrorSummaryList";
 import useGetSuspectRoute from "../../../common/hooks/useGetSuspectRoute";

src/ui-spa/src/components/case-registration/suspect-remove-confirmation/index.tsx

@@ -1,6 +1,6 @@
 import { useMemo, useContext } from "react";
 import { Button, BackLink } from "../../govuk";
-import { useNavigate, useLocation, Link } from "react-router-dom";
+import { useNavigate, useLocation, Link } from "react-router";
 import { CaseRegistrationFormContext } from "../../../common/providers/CaseRegistrationProvider";
 import { formatNameUtil } from "../../../common/utils/formatNameUtil";
 import PageContentWrapper from "../../common/PageContentWrapper";

src/ui-spa/src/components/case-registration/suspect-summary/SuspectSummary.tsx

@@ -8,7 +8,7 @@ import { getSuspectDetailsSummaryListRows } from "./utils/getSuspectDetailsSumma
 import { getChargesSummaryListRows } from "../charges-summary/utils/getChargesSummaryListRows";
 import { isYouthSuspect } from "../../../common/utils/isYouthSuspect";
 import { formatNameUtil } from "../../../common/utils/formatNameUtil";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import styles from "./SuspectSummary.module.scss";
 
 type SuspectSummaryProps = {