chore(deps): update to React v19

package.json

@@ -48,7 +48,7 @@
     "@canonical/jujulib": "7.0.0",
     "@canonical/macaroon-bakery": "1.3.2",
     "@canonical/react-components": "2.1.0",
-    "@canonical/rebac-admin": "0.0.1-alpha.9",
+    "@canonical/rebac-admin": "0.0.1-alpha.10",
     "@reduxjs/toolkit": "2.5.1",
     "@sentry/browser": "9.1.0",
     "@sentry/core": "9.1.0",
@@ -69,14 +69,13 @@
     "loglevel": "1.9.2",
     "prism-react-renderer": "2.4.1",
     "prismjs": "1.29.0",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "react-ga": "3.3.1",
     "react-hot-toast": "2.5.1",
     "react-json-tree": "0.19.0",
     "react-redux": "9.2.0",
     "react-router": "7.1.5",
-    "react-useportal": "1.0.19",
     "redux": "5.0.1",
     "vanilla-framework": "4.21.0",
     "yup": "1.6.1"
@@ -94,8 +93,8 @@
     "@types/lodash.mergewith": "4.6.9",
     "@types/node": "20.10.0",
     "@types/prismjs": "1.26.5",
-    "@types/react": "18.3.18",
-    "@types/react-dom": "18.3.5",
+    "@types/react": "19.0.8",
+    "@types/react-dom": "19.0.3",
     "@types/react-table": "7.7.20",
     "@types/redux-mock-store": "1.5.0",
     "@typescript-eslint/eslint-plugin": "8.24.0",
@@ -144,6 +143,8 @@
   },
   "packageManager": "[email protected]",
   "resolutions": {
-    "anchorme": "^3.0.8"
+    "anchorme": "^3.0.8",
+    "react": "19.0.0",
+    "@types/react": "19.0.8"
   }
 }

src/animations/FadeIn.tsx

@@ -1,5 +1,5 @@
 import { motion, AnimatePresence } from "framer-motion";
-import type { PropsWithChildren } from "react";
+import type { JSX, PropsWithChildren } from "react";
 
 type Props = {
   className?: string;

src/animations/FadeUpIn.tsx

@@ -1,4 +1,5 @@
 import { motion, AnimatePresence } from "framer-motion";
+import type { JSX } from "react";
 
 type Props = {
   children: JSX.Element;

src/animations/SlideDownFadeOut.tsx

@@ -1,4 +1,5 @@
 import { motion, AnimatePresence } from "framer-motion";
+import type { JSX } from "react";
 
 type Props = {
   children: JSX.Element;

src/components/AppLink/AppLink.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "react";
 import { type PropsWithChildren } from "react";
 import { Link } from "react-router";
 

src/components/Aside/Aside.tsx

@@ -6,6 +6,7 @@ import type {
 } from "@canonical/react-components";
 import classnames from "classnames";
 import { useAnimate, usePresence } from "framer-motion";
+import type { JSX } from "react";
 import { useEffect, type PropsWithChildren } from "react";
 
 import "./_aside.scss";

src/components/Banner/Banner.tsx

@@ -1,5 +1,5 @@
 import classnames from "classnames";
-import type { ReactNode } from "react";
+import type { JSX, ReactNode } from "react";
 import { useState, useEffect } from "react";
 
 import "./_banner.scss";

src/components/Breadcrumb/Breadcrumb.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import type { JSX, ReactNode } from "react";
 import { Link } from "react-router";
 
 import { useEntityDetailsParams } from "components/hooks";

src/components/CaptureRoutes/CaptureRoutes.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "react";
 import { useEffect } from "react";
 import { Outlet, useLocation } from "react-router";
 

src/components/ConnectionError/ConnectionError.tsx

@@ -3,6 +3,7 @@ import { useEffect, type PropsWithChildren } from "react";
 import reactHotToast from "react-hot-toast";
 
 import ToastCard from "components/ToastCard";
+import type { ToastInstance } from "components/ToastCard";
 import { getConnectionError } from "store/general/selectors";
 import { getAuditEventsErrors } from "store/juju/selectors";
 import { useAppSelector } from "store/store";
@@ -23,7 +24,7 @@ const ConnectionError = ({ children }: PropsWithChildren) => {
 
   useEffect(() => {
     if (auditLogsErrors) {
-      reactHotToast.custom((t) => (
+      reactHotToast.custom((t: ToastInstance) => (
         <ToastCard type="negative" toastInstance={t}>
           {generateErrorContent(auditLogsErrors)}
         </ToastCard>

src/components/ContentReveal/ContentReveal.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import type { JSX, ReactNode } from "react";
 import { useState } from "react";
 
 import "./_content-reveal.scss";

src/components/EntityInfo/EntityInfo.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import type { JSX, ReactNode } from "react";
 
 import TruncatedTooltip from "components/TruncatedTooltip";
 

src/components/FormikFormData/FormikFormData.tsx

@@ -1,5 +1,5 @@
 import { Form, useFormikContext } from "formik";
-import type { ReactNode } from "react";
+import type { JSX, ReactNode } from "react";
 import { useEffect } from "react";
 
 import type { SetFieldValue } from "./types";

src/components/InfoPanel/InfoPanel.tsx

@@ -1,7 +1,6 @@
-import { Modal } from "@canonical/react-components";
+import { usePortal, Modal } from "@canonical/react-components";
 import { useSelector } from "react-redux";
 import { useParams } from "react-router";
-import usePortal from "react-useportal";
 
 import type { EntityDetailsRoute } from "components/Routes";
 import Topology from "components/Topology";

src/components/LoadingHandler/LoadingHandler.tsx

@@ -1,5 +1,5 @@
 import { Spinner } from "@canonical/react-components";
-import type { ReactNode } from "react";
+import type { JSX, ReactNode } from "react";
 
 import "./_loading-handler.scss";
 import { TestId } from "./types";

src/components/LogIn/LogIn.tsx

@@ -8,6 +8,7 @@ import FadeUpIn from "animations/FadeUpIn";
 import AuthenticationButton from "components/AuthenticationButton";
 import Logo from "components/Logo";
 import ToastCard from "components/ToastCard";
+import type { ToastInstance } from "components/ToastCard";
 import {
   getConfig,
   getLoginError,
@@ -43,7 +44,7 @@ export default function LogIn() {
   useEffect(() => {
     visitURLs?.forEach((visitURL) => {
       if (!viewedAuthRequests.current.includes(visitURL)) {
-        reactHotToast.custom((t) => (
+        reactHotToast.custom((t: ToastInstance) => (
           <ToastCard toastInstance={t} type="caution">
             <p className="u-no-margin--top u-no-padding--top">
               Controller authentication required

src/components/MachineLink/MachineLink.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "react";
 import { type PropsWithChildren } from "react";
 import { Link } from "react-router";
 

src/components/NotFound/NotFound.tsx

@@ -1,3 +1,5 @@
+import type { JSX } from "react";
+
 type Props = {
   message: string;
   children: JSX.Element;

src/components/Panel/Panel.test.tsx

@@ -1,5 +1,6 @@
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import type { JSX } from "react";
 import { vi } from "vitest";
 
 import { usePanelQueryParams } from "panels/hooks";

src/components/RadioInputBox/OptionInputs/__snapshots__/OptionInputs.test.tsx.snap

@@ -17,7 +17,6 @@ exports[`OptionInputs > renders the supplied list of options 1`] = `
         id="MyAction-fruit"
         name="MyAction-fruit"
         type="text"
-        value=""
       />
       <span>
         yum
@@ -37,7 +36,6 @@ exports[`OptionInputs > renders the supplied list of options 1`] = `
         id="MyAction-veg"
         name="MyAction-veg"
         type="text"
-        value=""
       />
       <span>
         ehhh

src/components/RadioInputBox/RadioInputBox.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import type { JSX, ReactNode } from "react";
 import { useEffect, useRef, useState } from "react";
 
 import "./_radio-input-box.scss";

src/components/SegmentedControl/SegmentedControl.tsx

@@ -1,7 +1,7 @@
 import type { ButtonProps } from "@canonical/react-components";
 import { Button, type PropsWithSpread } from "@canonical/react-components";
 import classNames from "classnames";
-import type { ComponentType, ElementType, HTMLProps } from "react";
+import type { ComponentType, ElementType, HTMLProps, JSX } from "react";
 
 type Props<P = ButtonProps> = PropsWithSpread<
   {

src/components/ToastCard/ToastCard.test.tsx

@@ -5,6 +5,8 @@ import { Toaster } from "react-hot-toast";
 import reactHotToast from "react-hot-toast";
 import { vi } from "vitest";
 
+import type { ToastInstance } from "components/ToastCard";
+
 import ToastCard from "./ToastCard";
 
 describe("Toast Card", () => {
@@ -112,7 +114,7 @@ describe("Toast Card", () => {
   it("should remove the card when close is clicked", async () => {
     render(<Toaster />);
     await act(async () => {
-      reactHotToast.custom((t) => (
+      reactHotToast.custom((t: ToastInstance) => (
         <ToastCard type="negative" toastInstance={t}>
           I am a toast message
         </ToastCard>
@@ -128,7 +130,7 @@ describe("Toast Card", () => {
   it("should close the card using the keyboard", async () => {
     render(<Toaster />);
     await act(async () => {
-      reactHotToast.custom((t) => (
+      reactHotToast.custom((t: ToastInstance) => (
         <ToastCard type="negative" toastInstance={t}>
           I am a toast message
         </ToastCard>

src/components/ToastCard/ToastCard.tsx

@@ -4,7 +4,7 @@ import reactHotToast from "react-hot-toast";
 
 import "./_toast-card.scss";
 
-type ToastInstance = {
+export type ToastInstance = {
   createdAt: number;
   duration?: number | undefined;
   id: string;

src/components/ToastCard/index.ts

@@ -1 +1,2 @@
 export { default } from "./ToastCard";
+export { type ToastInstance } from "./ToastCard";

src/components/UnitLink/UnitLink.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "react";
 import { type PropsWithChildren } from "react";
 import { Link } from "react-router";
 

src/components/secrets/SecretForm/Fields/Fields.tsx

@@ -5,6 +5,7 @@ import {
   Textarea,
 } from "@canonical/react-components";
 import { FieldArray, useFormikContext } from "formik";
+import type { JSX } from "react";
 
 import type { FormFields } from "../types";
 

src/hooks/useLogout.tsx

@@ -3,6 +3,7 @@ import { unwrapResult } from "@reduxjs/toolkit";
 import reactHotToast from "react-hot-toast";
 
 import ToastCard from "components/ToastCard";
+import type { ToastInstance } from "components/ToastCard";
 import { thunks as appThunks } from "store/app";
 import { useAppDispatch } from "store/store";
 import { logger } from "utils/logger";
@@ -17,7 +18,7 @@ const useLogout = () => {
     dispatch(appThunks.logOut())
       .then(unwrapResult)
       .catch((error) => {
-        reactHotToast.custom((t) => (
+        reactHotToast.custom((t: ToastInstance) => (
           <ToastCard toastInstance={t} type="negative">
             <>
               {Label.LOGOUT_ERROR} Try{" "}

src/pages/AdvancedSearch/AdvancedSearch.tsx

@@ -1,3 +1,5 @@
+import type { JSX } from "react";
+
 import BaseLayout from "layout/BaseLayout/BaseLayout";
 
 import ErrorsBlock from "./ErrorsBlock";

src/pages/AdvancedSearch/CodeSnippetBlock/CodeSnippetBlock.tsx

@@ -4,6 +4,7 @@ import {
 } from "@canonical/react-components";
 import { Highlight } from "prism-react-renderer";
 import Prism from "prismjs/components/prism-core";
+import type { JSX } from "react";
 import { useState } from "react";
 import { JSONTree } from "react-json-tree";
 import "prismjs/components/prism-json";

src/pages/AdvancedSearch/ErrorsBlock/ErrorsBlock.tsx

@@ -1,4 +1,5 @@
 import fastDeepEqual from "fast-deep-equal/es6";
+import type { JSX } from "react";
 
 import type { CrossModelQueryResponse } from "juju/jimm/JIMMV4";
 import {

src/pages/AdvancedSearch/ResultsBlock/ResultsBlock.tsx

@@ -1,4 +1,5 @@
 import { Spinner } from "@canonical/react-components";
+import type { JSX } from "react";
 import { useEffect } from "react";
 
 import { actions as jujuActions } from "store/juju";

src/pages/AdvancedSearch/ResultsModelLink/ResultsModelLink.tsx

@@ -1,5 +1,5 @@
 import type { PropsWithSpread } from "@canonical/react-components";
-import type { PropsWithChildren } from "react";
+import type { JSX, PropsWithChildren } from "react";
 
 import ModelDetailsLink from "components/ModelDetailsLink";
 import type {

src/pages/AdvancedSearch/SearchForm/QueryLink/QueryLink.tsx

@@ -1,4 +1,5 @@
 import { Button } from "@canonical/react-components";
+import type { JSX } from "react";
 
 type Props = {
   handleQuery: (query: string) => Promise<void>;

src/pages/AdvancedSearch/SearchForm/SearchForm.tsx

@@ -1,6 +1,7 @@
 import { Button, Textarea } from "@canonical/react-components";
 import type { FormikProps } from "formik";
 import { Field, Form, Formik } from "formik";
+import type { JSX } from "react";
 import { useCallback, useEffect, useRef } from "react";
 
 import { copyToClipboard } from "components/utils";

src/pages/AdvancedSearch/SearchForm/SearchHelp/SearchHelp.tsx

@@ -1,4 +1,5 @@
 import { useFormikContext } from "formik";
+import type { JSX } from "react";
 
 import QueryLink from "../QueryLink";
 import type { FormFields } from "../types";

src/pages/AdvancedSearch/SearchForm/SearchHistoryMenu/SearchHistoryMenu.tsx

@@ -1,5 +1,6 @@
 import { ContextualMenu, Icon } from "@canonical/react-components";
 import { useFormikContext } from "formik";
+import type { JSX } from "react";
 
 import { getCrossModelQueryLoading } from "store/juju/selectors";
 import { useAppSelector } from "store/store";

src/pages/EntityDetails/App/App.tsx

@@ -1,7 +1,7 @@
 import { Button, MainTable, Icon } from "@canonical/react-components";
 import classNames from "classnames";
 import { Field, Formik } from "formik";
-import type { MouseEvent } from "react";
+import type { JSX, MouseEvent } from "react";
 import { useMemo, useRef, useState } from "react";
 import { useSelector } from "react-redux";
 import { Link, useParams } from "react-router";
@@ -56,7 +56,7 @@ export default function App(): JSX.Element {
     useState<boolean>(false);
 
   const tablesRef = useRef<HTMLDivElement>(null);
-  const setFieldsValues = useRef<SetFieldValue<FormData>>();
+  const setFieldsValues = useRef<SetFieldValue<FormData>>(null);
   const selectedUnits = useRef<string[]>([]);
   const selectAll = useRef<boolean>(false);
 

src/pages/EntityDetails/Model/Logs/ActionLogs/ActionPayloadModal/ActionPayloadModal.tsx

@@ -5,6 +5,7 @@ import {
   CodeSnippetBlockAppearance,
   Modal,
 } from "@canonical/react-components";
+import type { JSX } from "react";
 
 import { copyToClipboard } from "components/utils";
 

src/pages/EntityDetails/Model/Logs/AuditLogs/AuditLogs.tsx

@@ -1,3 +1,5 @@
+import type { JSX } from "react";
+
 import AuditLogsTable from "components/AuditLogsTable";
 
 const AuditLogs = (): JSX.Element => (

src/pages/EntityDetails/Model/Secrets/SecretContent/SecretContent.tsx

@@ -6,10 +6,10 @@ import {
   Tooltip,
   ActionButton,
   Notification,
+  usePortal,
 } from "@canonical/react-components";
 import { Form, Formik } from "formik";
 import { useParams } from "react-router";
-import usePortal from "react-useportal";
 
 import type { EntityDetailsRoute } from "components/Routes";
 import RevisionField from "components/secrets/RevisionField";

src/pages/Logs/Logs.tsx

@@ -1,3 +1,5 @@
+import type { JSX } from "react";
+
 import ActionBar from "components/ActionBar";
 import AuditLogsTable from "components/AuditLogsTable/AuditLogsTable";
 import AuditLogsTableActions from "components/AuditLogsTable/AuditLogsTableActions";