Hotfix modal (#1199)

* Proper unmount

package.json

@@ -24,12 +24,12 @@
   "dependencies": {
     "@amplitude/analytics-browser": "^2.2.0",
     "@hookform/resolvers": "^3.2.0",
-    "@navikt/aksel-icons": "^4.12.1",
+    "@navikt/aksel-icons": "^5.6.4",
     "@navikt/dab-spraksjekk": "^1.0.9",
-    "@navikt/ds-css": "^5.6.1",
-    "@navikt/ds-react": "^5.6.1",
-    "@navikt/ds-tailwind": "^5.6.1",
-    "@navikt/ds-tokens": "^5.6.1",
+    "@navikt/ds-css": "^5.6.4",
+    "@navikt/ds-react": "^5.6.4",
+    "@navikt/ds-tailwind": "^5.6.4",
+    "@navikt/ds-tokens": "^5.6.4",
     "@reduxjs/toolkit": "^1.9.5",
     "@sentry/integrations": "^7.64.0",
     "@sentry/react": "^7.64.0",
@@ -38,12 +38,12 @@
     "classnames": "^2.3.2",
     "date-fns": "^2.30.0",
     "prop-types": "^15.8.1",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
     "react-collapse": "^5.1.1",
     "react-custom-scrollbars-2": "^4.5.0",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
     "react-hook-form": "^7.45.4",
     "react-modal": "^3.16.1",
     "react-redux": "^8.1.2",
@@ -86,13 +86,13 @@
   "devDependencies": {
     "@swc/cli": "^0.1.62",
     "@swc/core": "^1.3.78",
-    "@testing-library/react": "^12.1.5",
-    "@testing-library/user-event": "^14.4.3",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.5.1",
     "@types/moment-duration-format": "^2.2.3",
     "@types/node": "^18.11.9",
-    "@types/react": "^17.0.45",
+    "@types/react": "^18.2.25",
     "@types/react-collapse": "^5.0.1",
-    "@types/react-dom": "^17.0.17",
+    "@types/react-dom": "^18.2.11",
     "@types/react-modal": "^3.16.0",
     "@types/react-redux": "^7.1.25",
     "@typescript-eslint/eslint-plugin": "^6.4.1",

src/Provider.tsx

@@ -20,10 +20,17 @@ export const useErVeileder = (): boolean => {
 export const FnrContext = React.createContext<undefined | string>(undefined);
 export const useFnr = () => useContext(FnrContext);
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const noOp = (_: string | undefined) => {};
 const Provider = ({ children, setFnrRef, fnr: propFnr }: Props) => {
     const [fnr, setFnr] = useState(propFnr);
     useEffect(() => {
         if (setFnrRef) setFnrRef(setFnr);
+        return () => {
+            if (setFnrRef) {
+                setFnrRef(noOp);
+            }
+        };
     }, []);
 
     const store = useMemo(createStore, [fnr]);

src/felles-komponenter/modal/Modal.tsx

@@ -32,8 +32,6 @@ const Modal = (props: Props) => {
         minstEnAvhengighet = false,
         feilmeldinger,
         tilbakeLenke,
-        // ariaLabelledby,
-        // contentLabel,
     } = props;
 
     const navigate = useNavigate();

src/rootWrapper.tsx

@@ -3,27 +3,21 @@ import '@navikt/ds-css';
 import './tailwind.css';
 import './index.less';
 
-import { Provider as AkselModalMountProvider } from '@navikt/ds-react';
 import * as Sentry from '@sentry/react';
 import React from 'react';
-import * as ReactDOM from 'react-dom';
 
 import App from './app';
 import { hash } from './felles-komponenter/utils/hash';
 import Provider from './Provider';
 import { SentryRoutes } from './sentry';
+import { createRoot } from 'react-dom/client';
 
 export const renderAsReactRoot = (appElement: HTMLElement, props?: { fnr?: string }) => {
-    const rootElement = document.getElementById('root') || undefined;
-    Sentry.setUser({
-        id: hash(props?.fnr),
-    });
-    ReactDOM.render(
-        <AkselModalMountProvider rootElement={rootElement} appElement={appElement}>
-            <Provider fnr={props?.fnr}>
-                <App Routes={SentryRoutes} key={'1'} />
-            </Provider>
-        </AkselModalMountProvider>,
-        appElement,
+    const rootElement = createRoot(appElement || document.getElementById('root')!);
+    Sentry.setUser({ id: hash(props?.fnr) });
+    rootElement.render(
+        <Provider fnr={props?.fnr}>
+            <App Routes={SentryRoutes} key={'1'} />
+        </Provider>,
     );
 };

src/setupTests.jsx

@@ -1,6 +1,7 @@
 // Ikkje bra!
 import.meta.env.VITE_API_URL_BASE = 'http://localhost:3000'; // Dette er det som ligger på window.location i jsdom
 
+HTMLDialogElement.prototype.showModal = () => {};
 window.IntersectionObserver = vi.fn();
 // Mocked because react-dnd uses es6 import and have to be transpiled to work in these tests
 vi.mock('react-dnd', () => ({

src/webcomponentWrapper.tsx

@@ -1,7 +1,5 @@
 import dsStyles from '@navikt/ds-css/dist/index.css?inline';
-import { Provider as ModalProvider } from '@navikt/ds-react';
 import React from 'react';
-import * as ReactDOM from 'react-dom';
 import { Routes } from 'react-router-dom';
 
 import App from './app';
@@ -10,9 +8,16 @@ import { LocalStorageElement, settLocalStorage } from './mocks/demo/localStorage
 import modulesCss from './moduler/aktivitet/aktivitet-kort/Aktivitetskort.module.less?inline';
 import Provider from './Provider';
 import tailwindCss from './tailwind.css?inline';
+import { createRoot, Root } from 'react-dom/client';
 
 export class DabAktivitetsplan extends HTMLElement {
     setFnr?: (fnr: string) => void;
+    root: Root | undefined;
+
+    disconnectedCallback() {
+        this.root?.unmount();
+    }
+
     connectedCallback() {
         // Cant mount on shadowRoot, create a extra div for mounting modal
         const shadowDomFirstChild = document.createElement('div');
@@ -29,14 +34,14 @@ export class DabAktivitetsplan extends HTMLElement {
         shadowRoot.appendChild(styleElem);
 
         const fnr = this.getAttribute('data-fnr') ?? undefined;
-        settLocalStorage(LocalStorageElement.FNR, fnr);
-        ReactDOM.render(
-            <ModalProvider appElement={appRoot} rootElement={shadowDomFirstChild}>
-                <Provider key={fnr} fnr={fnr} setFnrRef={(setFnr) => (this.setFnr = setFnr)}>
-                    <App Routes={Routes} key={'1'} />
-                </Provider>
-            </ModalProvider>,
-            appRoot,
+        if (fnr) {
+            settLocalStorage(LocalStorageElement.FNR, fnr);
+        }
+        this.root = createRoot(appRoot);
+        this.root.render(
+            <Provider key={fnr} fnr={fnr} setFnrRef={(setFnr) => (this.setFnr = setFnr)}>
+                <App Routes={Routes} key={'1'} />
+            </Provider>,
         );
     }