OPHJOD-1178: Update React to version 19

package.json

@@ -23,9 +23,8 @@
     "i18next": "^24.2.0",
     "openapi-fetch": "^0.13.3",
     "openapi-typescript-fetch": "^2.0.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-helmet-async": "^2.0.5",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-hook-form": "^7.54.2",
     "react-i18next": "^15.4.0",
     "react-icons": "^5.4.0",
@@ -43,8 +42,8 @@
     "@testing-library/react": "^16.1.0",
     "@types/eslint__js": "^8.42.3",
     "@types/node": "^22.9.0",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
+    "@types/react": "^19.0.3",
+    "@types/react-dom": "^19.0.2",
     "@vitejs/plugin-react-swc": "^3.7.2",
     "@vitest/coverage-v8": "^2.1.4",
     "autoprefixer": "^10.4.20",

src/components/NavigationBar/NavigationBar.tsx

@@ -22,7 +22,7 @@ export interface NavigationBarProps {
 
   /** HTML Element refs */
   refs?: {
-    langMenuButtonRef: React.RefObject<HTMLLIElement>;
+    langMenuButtonRef: React.RefObject<HTMLLIElement | null>;
   };
 }
 

src/components/OpportunityDetails/OpportunityDetails.tsx

@@ -13,7 +13,7 @@ import { useEnvironment } from '@/hooks/useEnvironment';
 import { type MahdollisuusTyyppi } from '@/routes/types';
 import { useToolStore } from '@/stores/useToolStore';
 import { getLocalizedText } from '@/utils';
-import React from 'react';
+import React, { JSX } from 'react';
 import { useTranslation } from 'react-i18next';
 import { MdCompareArrows, MdOutlinePrint, MdOutlineRoute, MdOutlineShare } from 'react-icons/md';
 

src/components/OsaamisSuosittelija/OsaamisSuosittelija.tsx

@@ -77,7 +77,7 @@ export const OsaamisSuosittelija = ({
     });
   }, [value]);
 
-  const abortController = React.useRef<AbortController>();
+  const abortController = React.useRef<AbortController | null>(null);
 
   React.useEffect(() => {
     abortController.current?.abort();

src/components/ScrollHeading/ScrollHeading.tsx

@@ -1,4 +1,5 @@
 import { tidyClasses as tc } from '@jod/design-system';
+import { JSX } from 'react';
 
 export interface ScrollHeadingProps {
   title: string;

src/components/Title/Title.test.tsx

@@ -1,19 +1,10 @@
 import { render, waitFor } from '@testing-library/react';
 import { expect, test } from 'vitest';
 
-import { HelmetProvider } from 'react-helmet-async';
 import { Title } from './Title';
 
-const Wrapper = ({ children }: React.PropsWithChildren) => {
-  return <HelmetProvider>{children}</HelmetProvider>;
-};
-
 test('document should have given title', async () => {
-  render(
-    <Wrapper>
-      <Title value="Given Title" />
-    </Wrapper>,
-  );
+  render(<Title value="Given Title" />);
   await waitFor(() => {
     expect(document.title).toEqual('Given Title');
   });

src/components/Title/Title.tsx

@@ -1,11 +1,5 @@
-import { Helmet } from 'react-helmet-async';
-
 interface TitleProps {
   value: string;
 }
 
-export const Title = ({ value }: TitleProps) => (
-  <Helmet>
-    <title>{value}</title>
-  </Helmet>
-);
+export const Title = ({ value }: TitleProps) => <title>{value}</title>;

src/hooks/useMenuClickHandler/index.ts

@@ -3,10 +3,9 @@ import React from 'react';
 export const useMenuClickHandler = (
   handleOutsideClick: (event: MouseEvent) => void,
   menuButtonRef:
-    | React.RefObject<HTMLButtonElement>
-    | React.RefObject<HTMLLIElement>
-    | React.RefObject<HTMLDivElement>
-    | null,
+    | React.RefObject<HTMLButtonElement | null>
+    | React.RefObject<HTMLLIElement | null>
+    | React.RefObject<HTMLDivElement | null>,
 ) => {
   const ref = React.useRef<HTMLDivElement>(null);
 

src/index.css

@@ -1,5 +1,5 @@
 @import 'tailwindcss/base';
-@import '@jod/design-system/dist/style.css';
+@import '@jod/design-system/dist/main.css';
 @tailwind components;
 @tailwind utilities;
 

src/main.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
-import { HelmetProvider } from 'react-helmet-async';
 import { createBrowserRouter, RouterProvider } from 'react-router';
 import { Metric } from 'web-vitals';
 import { ErrorNoteProvider } from './components/ErrorNote';
@@ -35,10 +34,8 @@ if (process.env.NODE_ENV !== 'production') {
 
 root.render(
   <React.StrictMode>
-    <HelmetProvider>
-      <ErrorNoteProvider>
-        <RouterProvider router={router} />
-      </ErrorNoteProvider>
-    </HelmetProvider>
+    <ErrorNoteProvider>
+      <RouterProvider router={router} />
+    </ErrorNoteProvider>
   </React.StrictMode>,
 );

src/routes/Profile/utils.tsx

@@ -1,5 +1,6 @@
 import { components } from '@/api/schema';
 import { type RoutesNavigationListProps } from '@/components';
+import { JSX } from 'react';
 import { Link, LinkProps } from 'react-router';
 
 export const mapNavigationRoutes = (routes: RoutesNavigationListProps['routes']) =>

src/routes/Root/Root.tsx

@@ -13,10 +13,10 @@ import { ErrorNote, useErrorNote } from '@/components/ErrorNote';
 import { MegaMenu } from '@/components/MegaMenu/MegaMenu';
 import { ActionBarContext } from '@/hooks/useActionBar';
 import { useMenuClickHandler } from '@/hooks/useMenuClickHandler';
+import i18n from '@/i18n/config';
 import { useToolStore } from '@/stores/useToolStore';
 import { Footer, SkipLink, useMediaQueries } from '@jod/design-system';
 import React from 'react';
-import { Helmet } from 'react-helmet-async';
 import { useTranslation } from 'react-i18next';
 import { MdMenu } from 'react-icons/md';
 import { NavLink, Outlet, ScrollRestoration, useLoaderData } from 'react-router';
@@ -170,13 +170,14 @@ const Root = () => {
     logoutForm.current?.submit();
   };
 
+  React.useEffect(() => {
+    document.documentElement.setAttribute('lang', i18n.language);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [i18n.language]);
+
   return (
-    <>
-      <Helmet>
-        <html lang={language} />
-        <link rel="manifest" href={`/yksilo/manifest-${language}.json`} crossOrigin="use-credentials" />
-        <body className="bg-bg-gray" />
-      </Helmet>
+    <div className="bg-bg-gray">
+      <link rel="manifest" href={`/yksilo/manifest-${language}.json`} crossOrigin="use-credentials" />
       <header role="banner" className="sticky top-0 z-30 print:hidden">
         <SkipLink hash="#jod-main" label={t('skiplinks.main')} />
         <form action="/yksilo/logout" method="POST" hidden ref={logoutForm}>
@@ -259,7 +260,7 @@ const Root = () => {
         className={!sm ? 'py-7' : undefined}
       />
       <ScrollRestoration />
-    </>
+    </div>
   );
 };
 

src/routes/Tool/Tool.tsx

@@ -161,7 +161,7 @@ const YourOpportunitiesPagination = ({
   className,
   ariaLabel,
 }: {
-  scrollRef: React.RefObject<HTMLUListElement>;
+  scrollRef: React.RefObject<HTMLUListElement | null>;
   className?: string;
   ariaLabel?: string;
 }) => {