react 19 (#6965)

* react 19

* act er flyttet til react

* resolution på types

* codemod preset-19 https://github.com/eps1lon/types-react-codemod

* Fikse ts-errors i stories

* label er alltid ReactNode her

* regner med rendreFakta returnerer ReactNode og ikke void

* Select har ingen placeholder-prop. Kikket i Q og øverste valget i lista vises når komponenten først rendres

* @ts-expect-error, ser ut som vi forventer string, men typen er noe annet

* fikse diverse ts-errors

* legge på type i stedet for implicit any

* resolutions

* teste react19 i ft-frontend-saksbehandling

* bruk beta-versjon av fp-pakkene

* teste versjooner

package.json

@@ -47,8 +47,8 @@
     "@navikt/ds-css": "7.6.0",
     "@navikt/ds-react": "7.6.0",
     "@navikt/ds-tailwind": "^7.6.0",
-    "@navikt/familie-endringslogg": "13.1.5",
-    "@navikt/ft-plattform-komponenter": "5.3.1",
+    "@navikt/familie-endringslogg": "14.0.0",
+    "@navikt/ft-plattform-komponenter": "^7.0.3-react19beta.0",
     "@popperjs/core": "2.11.8",
     "@sentry/browser": "8.46.0",
     "@sentry/react": "^8.46.0",
@@ -59,9 +59,9 @@
     "i18n-iso-countries": "7.13.0",
     "node-cache": "5.1.2",
     "postcss-import": "^16.1.0",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "react-router": "7.0.2",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "react-router": "7.1.1",
     "vite-plugin-svgr": "4.3.0"
   },
   "devDependencies": {
@@ -85,7 +85,7 @@
     "@types/history": "5.0.0",
     "@types/object-hash": "^3.0.6",
     "@types/prop-types": "15.7.14",
-    "@types/react": "18.3.17",
+    "@types/react": "19.0.3",
     "@types/react-collapse": "5.0.4",
     "@types/redux-form": "8.3.11",
     "@vitejs/plugin-react": "^4.3.4",
@@ -121,7 +121,7 @@
   "resolutions": {
     "postcss": "8.4.49",
     "parse-url": "8.1.0",
-    "@types/react": "17"
+    "@types/react": "19.0.3"
   },
   "msw": {
     "workerDirectory": "public"

packages/behandling-anke/package.json

@@ -17,7 +17,7 @@
     "@k9-sak-web/rest-api": "1.0.0",
     "@k9-sak-web/rest-api-hooks": "1.0.0",
     "@k9-sak-web/types": "1.0.0",
-    "react": "18.3.1",
-    "react-intl": "7.0.1"
+    "react": "19.0.0",
+    "react-intl": "7.1.0"
   }
 }

packages/behandling-felles/package.json

@@ -15,10 +15,10 @@
     "@k9-sak-web/modal-sett-pa-vent": "1.0.0",
     "@k9-sak-web/rest-api-hooks": "1.0.0",
     "@k9-sak-web/types": "1.0.0",
-    "@navikt/ft-plattform-komponenter": "5.3.1",
+    "@navikt/ft-plattform-komponenter": "^7.0.3-react19beta.0",
     "classnames": "2.5.1",
-    "react": "18.3.1",
-    "react-intl": "7.0.1",
+    "react": "19.0.0",
+    "react-intl": "7.1.0",
     "react-redux": "9.2.0",
     "redux-form": "8.3.10"
   }

packages/behandling-felles/src/components/ReduxFormStateCleaner.tsx

@@ -12,7 +12,7 @@ interface OwnProps {
 
 const ReduxFormStateCleaner = ({ behandlingId, behandlingVersjon }: OwnProps) => {
   const dispatch = useDispatch();
-  const ref = useRef<number>();
+  const ref = useRef<number>(undefined);
 
   useEffect(() => {
     if (ref.current && ref.current !== behandlingVersjon) {

packages/behandling-frisinn/package.json

@@ -18,9 +18,9 @@
     "@k9-sak-web/rest-api": "1.0.0",
     "@k9-sak-web/rest-api-hooks": "1.0.0",
     "@k9-sak-web/types": "1.0.0",
-    "@navikt/ft-fakta-beregning": "7.1.10",
-    "@navikt/ft-prosess-beregningsgrunnlag": "7.1.10",
-    "react": "18.3.1",
-    "react-intl": "7.0.1"
+    "@navikt/ft-fakta-beregning": "^8.0.3-react19beta.0",
+    "@navikt/ft-prosess-beregningsgrunnlag": "^8.0.3-react19beta.0",
+    "react": "19.0.0",
+    "react-intl": "7.1.0"
   }
 }

packages/behandling-klage/package.json

@@ -17,7 +17,7 @@
     "@k9-sak-web/rest-api": "1.0.0",
     "@k9-sak-web/rest-api-hooks": "1.0.0",
     "@k9-sak-web/types": "1.0.0",
-    "react": "18.3.1",
-    "react-intl": "7.0.1"
+    "react": "19.0.0",
+    "react-intl": "7.1.0"
   }
 }

packages/behandling-omsorgspenger/package.json

@@ -29,10 +29,10 @@
     "@k9-sak-web/rest-api": "1.0.0",
     "@k9-sak-web/rest-api-hooks": "1.0.0",
     "@k9-sak-web/types": "1.0.0",
-    "@navikt/ft-fakta-beregning": "7.1.10",
-    "@navikt/ft-fakta-fordel-beregningsgrunnlag": "8.1.10",
-    "@navikt/ft-prosess-beregningsgrunnlag": "7.1.10",
-    "react": "18.3.1",
-    "react-intl": "7.0.1"
+    "@navikt/ft-fakta-beregning": "^8.0.3-react19beta.0",
+    "@navikt/ft-fakta-fordel-beregningsgrunnlag": "^9.0.3-react19beta.0",
+    "@navikt/ft-prosess-beregningsgrunnlag": "^8.0.3-react19beta.0",
+    "react": "19.0.0",
+    "react-intl": "7.1.0"
   }
 }

packages/behandling-opplaeringspenger/package.json

@@ -33,11 +33,11 @@
     "@k9-sak-web/rest-api-hooks": "1.0.0",
     "@k9-sak-web/sak-app": "1.0.0",
     "@k9-sak-web/types": "1.0.0",
-    "@navikt/ft-fakta-beregning": "7.1.10",
-    "@navikt/ft-fakta-fordel-beregningsgrunnlag": "8.1.10",
-    "@navikt/ft-prosess-beregningsgrunnlag": "7.1.10",
+    "@navikt/ft-fakta-beregning": "^8.0.3-react19beta.0",
+    "@navikt/ft-fakta-fordel-beregningsgrunnlag": "^9.0.3-react19beta.0",
+    "@navikt/ft-prosess-beregningsgrunnlag": "^8.0.3-react19beta.0",
     "axios": "1.7.9",
-    "react": "18.3.1",
-    "react-intl": "7.0.1"
+    "react": "19.0.0",
+    "react-intl": "7.1.0"
   }
 }

packages/behandling-pleiepenger-sluttfase/package.json

@@ -29,11 +29,11 @@
     "@k9-sak-web/rest-api-hooks": "1.0.0",
     "@k9-sak-web/sak-app": "1.0.0",
     "@k9-sak-web/types": "1.0.0",
-    "@navikt/ft-fakta-beregning": "7.1.10",
-    "@navikt/ft-fakta-fordel-beregningsgrunnlag": "8.1.10",
-    "@navikt/ft-prosess-beregningsgrunnlag": "7.1.10",
+    "@navikt/ft-fakta-beregning": "^8.0.3-react19beta.0",
+    "@navikt/ft-fakta-fordel-beregningsgrunnlag": "^9.0.3-react19beta.0",
+    "@navikt/ft-prosess-beregningsgrunnlag": "^8.0.3-react19beta.0",
     "axios": "1.7.9",
-    "react": "18.3.1",
-    "react-intl": "7.0.1"
+    "react": "19.0.0",
+    "react-intl": "7.1.0"
   }
 }

packages/behandling-pleiepenger/package.json

@@ -34,11 +34,11 @@
     "@k9-sak-web/sak-app": "1.0.0",
     "@k9-sak-web/types": "1.0.0",
     "@navikt/diagnosekoder": "^1.2025.0",
-    "@navikt/ft-fakta-beregning": "7.1.10",
-    "@navikt/ft-fakta-fordel-beregningsgrunnlag": "8.1.10",
-    "@navikt/ft-prosess-beregningsgrunnlag": "7.1.10",
+    "@navikt/ft-fakta-beregning": "^8.0.3-react19beta.0",
+    "@navikt/ft-fakta-fordel-beregningsgrunnlag": "^9.0.3-react19beta.0",
+    "@navikt/ft-prosess-beregningsgrunnlag": "^8.0.3-react19beta.0",
     "axios": "1.7.9",
-    "react": "18.3.1",
-    "react-intl": "7.0.1"
+    "react": "19.0.0",
+    "react-intl": "7.1.0"
   }
 }

packages/behandling-tilbakekreving/package.json

@@ -16,9 +16,9 @@
     "@k9-sak-web/rest-api": "1.0.0",
     "@k9-sak-web/rest-api-hooks": "1.0.0",
     "@k9-sak-web/types": "1.0.0",
-    "@navikt/ft-kodeverk": "^2.5.10",
-    "@navikt/ft-prosess-tilbakekreving-foreldelse": "3.5.10",
-    "react": "18.3.1",
-    "react-intl": "7.0.1"
+    "@navikt/ft-kodeverk": "^2.5.14-react19beta.0",
+    "@navikt/ft-prosess-tilbakekreving-foreldelse": "^4.0.3-react19beta.0",
+    "react": "19.0.0",
+    "react-intl": "7.1.0"
   }
 }

packages/behandling-unntak/package.json

@@ -28,8 +28,8 @@
     "@k9-sak-web/rest-api": "1.0.0",
     "@k9-sak-web/rest-api-hooks": "1.0.0",
     "@k9-sak-web/types": "1.0.0",
-    "react": "18.3.1",
-    "react-intl": "7.0.1",
+    "react": "19.0.0",
+    "react-intl": "7.1.0",
     "react-redux": "9.2.0",
     "redux": "5.0.1",
     "redux-form": "8.3.10",

packages/behandling-utvidet-rett/package.json

@@ -18,6 +18,6 @@
     "@k9-sak-web/rest-api": "1.0.0",
     "@k9-sak-web/rest-api-hooks": "1.0.0",
     "@k9-sak-web/types": "1.0.0",
-    "react": "18.3.1"
+    "react": "19.0.0"
   }
 }

packages/fakta-arbeidsforhold/package.json

@@ -12,8 +12,8 @@
     "@fpsak-frontend/utils": "1.0.0",
     "@k9-sak-web/types": "1.0.0",
     "moment": "2.30.1",
-    "react": "18.3.1",
-    "react-intl": "7.0.1",
+    "react": "19.0.0",
+    "react-intl": "7.1.0",
     "react-redux": "9.2.0",
     "redux": "5.0.1",
     "redux-form": "8.3.10",

packages/fakta-arbeidsforhold/src/components/arbeidsforholdTabell/IngenArbeidsforholdRegistrert.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 interface OwnProps {
-  headerColumnContent: React.ReactElement[];
+  headerColumnContent: React.ReactElement<any>[];
 }
 
 const IngenArbeidsforholdRegistrert = ({ headerColumnContent }: OwnProps) => (

packages/fakta-arbeidsforhold/src/util/BehandlingFormFieldCleaner.tsx

@@ -9,23 +9,23 @@ import { getBehandlingFormName } from '@fpsak-frontend/form';
 const findAllNames = children =>
   children
     ? React.Children.map(children, child => {
-      let all = [];
-      if (child && child.props && child.props.children) {
-        all = findAllNames(child.props.children);
-      }
-      if (child && child.props && child.props.name) {
-        all.push(child.props.name);
-      }
-      return all;
-    })
+        let all = [];
+        if (child && child.props && child.props.children) {
+          all = findAllNames(child.props.children);
+        }
+        if (child && child.props && child.props.name) {
+          all.push(child.props.name);
+        }
+        return all;
+      })
     : [];
 
 interface PureOwnProps {
   formName: string;
   behandlingId: number;
   behandlingVersjon: number;
   fieldNames: string[];
-  children: ReactNode | ReactElement;
+  children: ReactNode | ReactElement<any>;
 }
 
 interface MappedOwnProps {

packages/fakta-barn-og-overfoeringsdager/package.json

@@ -12,8 +12,8 @@
     "classnames": "2.5.1",
     "just-is-empty": "3.4.1",
     "moment": "2.30.1",
-    "react": "18.3.1",
-    "react-intl": "7.0.1",
+    "react": "19.0.0",
+    "react-intl": "7.1.0",
     "react-redux": "9.2.0",
     "redux-form": "8.3.10"
   },

packages/fakta-barn-oms/package.json

@@ -13,8 +13,8 @@
     "@k9-sak-web/prosess-aarskvantum-oms": "1.0.0",
     "@k9-sak-web/types": "1.0.0",
     "moment": "2.30.1",
-    "react": "18.3.1",
-    "react-intl": "7.0.1",
+    "react": "19.0.0",
+    "react-intl": "7.1.0",
     "uuid": "11.0.3"
   },
   "devDependencies": {

packages/fakta-bosted-soker/package.json

@@ -9,7 +9,7 @@
     "@fpsak-frontend/kodeverk": "1.0.0",
     "@fpsak-frontend/utils": "1.0.0",
     "@k9-sak-web/types": "1.0.0",
-    "react": "18.3.1"
+    "react": "19.0.0"
   },
   "devDependencies": {
     "@fpsak-frontend/utils-test": "1.0.0"

packages/fakta-bosted-soker/src/BostedSokerFaktaIndex.tsx

@@ -4,6 +4,8 @@ import { KodeverkMedNavn } from '@k9-sak-web/types';
 import BostedSokerView from './components/BostedSokerView';
 import { BostedSokerPersonopplysninger } from './types';
 
+import type { JSX } from 'react';
+
 interface OwnProps {
   personopplysninger: BostedSokerPersonopplysninger;
   sokerTypeText?: string;

packages/fakta-direkte-overgang/package.json

@@ -9,8 +9,8 @@
     "@fpsak-frontend/shared-components": "1.0.0",
     "dayjs": "1.11.13",
     "formik": "2.4.6",
-    "react": "18.3.1",
-    "react-intl": "7.0.1",
+    "react": "19.0.0",
+    "react-intl": "7.1.0",
     "yup": "1.6.1"
   },
   "peerDependencies": {

packages/fakta-etablert-tilsyn/package.json

@@ -17,14 +17,14 @@
     "@navikt/ds-css": "7.6.0",
     "@navikt/ds-icons": "3.4.3",
     "@navikt/ds-react": "7.6.0",
-    "@navikt/ft-plattform-komponenter": "5.3.1",
+    "@navikt/ft-plattform-komponenter": "^7.0.3-react19beta.0",
     "@popperjs/core": "2.11.8",
     "classnames": "2.5.1",
     "dayjs": "1.11.13",
     "lodash": "4.17.21",
-    "react": "18.3.1",
+    "react": "19.0.0",
     "react-collapse": "5.1.1",
-    "react-dom": "18.3.1",
+    "react-dom": "19.0.0",
     "react-hook-form": "7.53.2"
   },
   "msw": {

packages/fakta-etablert-tilsyn/src/ui/components/beredskap/beredskapsperiode-vurderingsdetaljer/BeredskapsperiodeVurderingsdetaljer.tsx

@@ -1,5 +1,5 @@
 import { Box, Margin, DetailView, LabelledContent, LinkButton, AssessedBy } from '@navikt/ft-plattform-komponenter';
-import React from 'react';
+import React, { type JSX } from 'react';
 import Beskrivelse from '../../../../types/Beskrivelse';
 import Vurderingsperiode from '../../../../types/Vurderingsperiode';
 import Vurderingsresultat from '../../../../types/Vurderingsresultat';

packages/fakta-etablert-tilsyn/src/ui/components/beredskap/vurdering-av-beredskapsperioder-form/VurderingAvBeredskapsperioderForm.tsx

@@ -2,7 +2,7 @@ import { PeriodpickerListRHF, RadioGroupPanelRHF, TextAreaRHF } from '@fpsak-fro
 import { Period } from '@fpsak-frontend/utils';
 import { Alert } from '@navikt/ds-react';
 import { Box, DetailView, Form, LabelledContent, Margin } from '@navikt/ft-plattform-komponenter';
-import React from 'react';
+import React, { type JSX } from 'react';
 import { FormProvider, useForm, useWatch } from 'react-hook-form';
 import Beskrivelse from '../../../../types/Beskrivelse';
 import Vurderingsperiode from '../../../../types/Vurderingsperiode';

packages/fakta-etablert-tilsyn/src/ui/components/beskrivelser-for-perioden/BeskrivelserForPerioden.tsx

@@ -9,7 +9,7 @@ import {
   OnePersonIconGray,
   OnePersonOutlineGray,
 } from '@navikt/ft-plattform-komponenter';
-import { useState } from 'react';
+import { useState, type JSX } from 'react';
 import Beskrivelse from '../../../types/Beskrivelse';
 import Kilde from '../../../types/Kilde';
 import { prettifyDate } from '../../../util/formats';

packages/fakta-etablert-tilsyn/src/ui/components/etablertTilsyn/EtablertTilsynMedSmoring.tsx

@@ -2,7 +2,7 @@ import { isDayAfter, Period } from '@fpsak-frontend/utils';
 import { Table } from '@navikt/ds-react';
 import dayjs from 'dayjs';
 import uniq from 'lodash/uniq';
-import React from 'react';
+import React, { type JSX } from 'react';
 import EtablertTilsynType from '../../../types/EtablertTilsynType';
 import EtablertTilsynRowContent from './EtablertTilsynRowContent';
 import PartIkon from './PartIkon';

packages/fakta-etablert-tilsyn/src/ui/components/nattevåk/vurdering-av-nattevåksperioder-form/VurderingAvNattevåksperioderForm.tsx

@@ -2,7 +2,7 @@ import { PeriodpickerListRHF, RadioGroupPanelRHF, TextAreaRHF } from '@fpsak-fro
 import { Period } from '@fpsak-frontend/utils';
 import { Alert } from '@navikt/ds-react';
 import { Box, DetailView, Form, LabelledContent, Margin } from '@navikt/ft-plattform-komponenter';
-import React from 'react';
+import React, { type JSX } from 'react';
 import { FormProvider, useForm, useWatch } from 'react-hook-form';
 import Beskrivelse from '../../../../types/Beskrivelse';
 import Vurderingsperiode from '../../../../types/Vurderingsperiode';

packages/fakta-etablert-tilsyn/src/ui/components/periodenavigasjon/Periodenavigasjon.tsx

@@ -1,6 +1,6 @@
 import { Heading, Label } from '@navikt/ds-react';
 import { Box, InteractiveList, Margin } from '@navikt/ft-plattform-komponenter';
-import React, { useEffect } from 'react';
+import React, { useEffect, type JSX } from 'react';
 import Vurderingsperiode from '../../../types/Vurderingsperiode';
 import { usePrevious } from '../../../util/hooks';
 import PeriodeSomSkalVurderes from '../periode-som-skal-vurderes/PeriodeSomSkalVurderes';

packages/fakta-etablert-tilsyn/src/ui/components/vurderingsperiode/VurderingsperiodeElement.tsx

@@ -1,5 +1,5 @@
 import { Period } from '@fpsak-frontend/utils';
-import React from 'react';
+import React, { type JSX } from 'react';
 import {
   ContentWithTooltip,
   GreenCheckIconFilled,

packages/fakta-etablert-tilsyn/src/ui/components/write-access-bound-content/WriteAccessBoundContent.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 import ContainerContext from '../../context/ContainerContext';
 
 interface WriteAccessBoundContentProps {

packages/fakta-etablert-tilsyn/src/util/hooks.ts

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react';
 
 export const usePrevious = value => {
-  const ref = useRef();
+  const ref = useRef(undefined);
   useEffect(() => {
     ref.current = value;
   });