✨ Modal: mulighet for å rendre i portal

.changeset/real-donuts-check.md

@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": minor
+---
+
+:sparkles: Modal: mulighet for å rendre i portal

@navikt/core/react/src/modal/Modal.test.tsx

@@ -37,4 +37,18 @@ describe("Modal", () => {
       expect(document.body.classList).not.toContain(BODY_CLASS)
     );
   });
+
+  test("should toggle body class when using portal", async () => {
+    render(
+      <Modal portal open>
+        <Modal.Header />
+      </Modal>
+    );
+    expect(document.body.classList).toContain(BODY_CLASS);
+
+    fireEvent.click(screen.getByRole("button"));
+    await waitFor(() =>
+      expect(document.body.classList).not.toContain(BODY_CLASS)
+    );
+  });
 });

@navikt/core/react/src/modal/Modal.tsx

@@ -5,9 +5,11 @@ import React, {
   useMemo,
   useRef,
 } from "react";
+import { createPortal } from "react-dom";
+import { useFloatingPortalNode } from "@floating-ui/react";
 import cl from "clsx";
 import dialogPolyfill, { needPolyfill } from "./dialog-polyfill";
-import { Detail, Heading, mergeRefs, useId } from "..";
+import { Detail, Heading, mergeRefs, useId, useProvider } from "..";
 import ModalBody from "./ModalBody";
 import ModalHeader from "./ModalHeader";
 import ModalFooter from "./ModalFooter";
@@ -62,6 +64,11 @@ export interface ModalProps
    * @default fit-content (up to 700px)
    * */
   width?: "medium" | "small" | number | `${number}${string}`;
+  /**
+   * Lets you render the modal into a different part of the DOM.
+   * Will use `rootElement` from `Provider` if defined, otherwise `document.body`.
+   */
+  portal?: boolean;
   /**
    * User defined classname for modal
    */
@@ -138,6 +145,7 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
       onBeforeClose,
       onCancel,
       width,
+      portal,
       className,
       "aria-labelledby": ariaLabelledby,
       style,
@@ -148,35 +156,41 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
     const modalRef = useRef<HTMLDialogElement>(null);
     const mergedRef = useMemo(() => mergeRefs([modalRef, ref]), [ref]);
     const ariaLabelId = useId();
+    const rootElement = useProvider()?.rootElement;
+    const portalNode = useFloatingPortalNode({ root: rootElement });
 
     if (useContext(ModalContext)) {
       console.error("Modals should not be nested");
     }
 
     useEffect(() => {
-      if (needPolyfill && modalRef.current) {
+      // If using portal, modalRef.current will not be set before portalNode is set.
+      // If not using portal, modalRef.current is available first.
+      // We check both to avoid activating polyfill twice when not using portal.
+      if (needPolyfill && modalRef.current && portalNode) {
         dialogPolyfill.registerDialog(modalRef.current);
       }
-    }, [modalRef]);
+    }, [modalRef, portalNode]);
 
     useEffect(() => {
       // We need to have this in a useEffect so that the content renders before the modal is displayed,
       // and in case `open` is true initially.
-      if (modalRef.current && open !== undefined) {
+      // We need to check both modalRef.current and portalNode to make sure the polyfill has been activated.
+      if (modalRef.current && portalNode && open !== undefined) {
         if (open && !modalRef.current.open) {
           modalRef.current.showModal();
         } else if (!open && modalRef.current.open) {
           modalRef.current.close();
         }
       }
-    }, [modalRef, open]);
+    }, [modalRef, portalNode, open]);
 
-    useBodyScrollLock(modalRef);
+    useBodyScrollLock(modalRef, portalNode);
 
     const isWidthPreset =
       typeof width === "string" && ["small", "medium"].includes(width);
 
-    return (
+    const component = (
       <dialog
         ref={mergedRef}
         className={cl("navds-modal", className, {
@@ -226,6 +240,12 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
         </ModalContext.Provider>
       </dialog>
     );
+
+    if (portal) {
+      if (portalNode) return createPortal(component, portalNode);
+      return null;
+    }
+    return component;
   }
 ) as ModalComponent;
 

@navikt/core/react/src/modal/ModalUtils.ts

@@ -16,10 +16,11 @@ export function getCloseHandler(
 export const BODY_CLASS = "navds-modal__document-body";
 
 export function useBodyScrollLock(
-  modalRef: React.RefObject<HTMLDialogElement>
+  modalRef: React.RefObject<HTMLDialogElement>,
+  portalNode: HTMLElement | null
 ) {
   React.useEffect(() => {
-    if (!modalRef.current) return;
+    if (!modalRef.current || !portalNode) return; // We check both to avoid running this twice when not using portal
     if (modalRef.current.open) document.body.classList.add(BODY_CLASS); // In case `open` is true initially
 
     const observer = new MutationObserver(() => {
@@ -34,5 +35,5 @@ export function useBodyScrollLock(
       observer.disconnect();
       document.body.classList.remove(BODY_CLASS); // In case modal is unmounted before it's closed
     };
-  }, [modalRef]);
+  }, [modalRef, portalNode]);
 }

@navikt/core/react/src/modal/modal.stories.tsx

@@ -160,8 +160,8 @@ export const Small = () => (
   </Modal>
 );
 
-export const Medium = () => (
-  <Modal open width="medium" header={{ heading: "Simple header" }}>
+export const MediumWithPortal = () => (
+  <Modal open portal width="medium" header={{ heading: "Simple header" }}>
     <Modal.Body>Lorem ipsum dolor sit amet.</Modal.Body>
   </Modal>
 );

examples/shadow-dom/main.tsx

@@ -18,7 +18,7 @@ class CustomComponent extends HTMLElement {
     this.attachShadow({ mode: "closed" }).appendChild(rootElement);
 
     ReactDOM.createRoot(appElement).render(
-      <Provider rootElement={rootElement} appElement={appElement}>
+      <Provider rootElement={rootElement}>
         <style>{styles}</style>
         <Button>Click me!</Button>
         <CheckboxGroup legend="Legend" defaultValue={["tekst2"]}>
@@ -41,7 +41,7 @@ const ModalWrapper = () => {
   return (
     <>
       <Button onClick={() => setIsOpen(true)}>Open modal</Button>
-      <Modal open={isOpen} onClose={() => setIsOpen(false)}>
+      <Modal portal open={isOpen} onClose={() => setIsOpen(false)}>
         <Modal.Body>modal content</Modal.Body>
       </Modal>
     </>

examples/shadow-dom/open.tsx

@@ -11,7 +11,7 @@ class CustomComponent extends HTMLElement {
     this.attachShadow({ mode: "open" }).appendChild(rootElement);
 
     ReactDOM.createRoot(appElement).render(
-      <Provider rootElement={rootElement} appElement={appElement}>
+      <Provider rootElement={rootElement}>
         <style>{styles}</style>
         <DateWrapper />
       </Provider>