@navikt/ds-react 7.32.3 → 7.32.5

package/src/form/combobox/__tests__/combobox.test.tsx

@@ -1,5 +1,4 @@
-/* eslint-disable testing-library/no-unnecessary-act -- https://kentcdodds.com/blog/fix-the-not-wrapped-in-act-warning */
-import { act, render, screen } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import React from "react";
 import { describe, expect, test, vi } from "vitest";
@@ -40,34 +39,20 @@ describe("Render combobox", () => {
     test("Should be able to search, select and remove selections", async () => {
       render(<App isMultiSelect options={options} />);
 
-      await act(async () => {
-        await userEvent.click(
-          screen.getByRole("combobox", {
-            name: "Hva er dine favorittfrukter?",
-          }),
-        );
-      });
-      await act(async () => {
-        await userEvent.type(
-          screen.getByRole("combobox", {
-            name: "Hva er dine favorittfrukter?",
-          }),
-          "apple",
-        );
-      });
-      await act(async () => {
-        await userEvent.click(
-          await screen.findByRole("option", { name: "apple" }),
-        );
+      const input = screen.getByRole("combobox", {
+        name: "Hva er dine favorittfrukter?",
       });
+      await userEvent.click(input);
+      await userEvent.type(input, "apple");
+      await userEvent.click(
+        await screen.findByRole("option", { name: "apple" }),
+      );
       expect(
         await screen.findByRole("option", { name: "apple", selected: true }),
       ).toBeInTheDocument();
-      await act(async () => {
-        await userEvent.click(
-          await screen.findByRole("button", { name: "apple slett" }),
-        );
-      });
+      await userEvent.click(
+        await screen.findByRole("button", { name: "apple slett" }),
+      );
     });
   });
 
@@ -81,24 +66,14 @@ describe("Render combobox", () => {
     test("Should not select previous focused element when closes", async () => {
       render(<App options={options} />);
 
-      await act(async () => {
-        await userEvent.click(
-          screen.getByRole("combobox", {
-            name: "Hva er dine favorittfrukter?",
-          }),
-        );
-      });
-      await act(async () => {
-        await userEvent.type(
-          screen.getByRole("combobox", {
-            name: "Hva er dine favorittfrukter?",
-          }),
-          "ban",
-        );
-        await userEvent.keyboard("{ArrowDown}");
-        await userEvent.keyboard("{ArrowUp}");
-        await userEvent.keyboard("{Enter}");
+      const input = screen.getByRole("combobox", {
+        name: "Hva er dine favorittfrukter?",
       });
+      await userEvent.click(input);
+      await userEvent.type(input, "ban");
+      await userEvent.keyboard("{ArrowDown}");
+      await userEvent.keyboard("{ArrowUp}");
+      await userEvent.keyboard("{Enter}");
 
       expect(screen.queryByRole("button", { name: "banana slett" })).toBeNull();
     });
@@ -106,24 +81,14 @@ describe("Render combobox", () => {
     test("Should reset list when resetting input (ESC)", async () => {
       render(<App options={options} />);
 
-      await act(async () => {
-        await userEvent.click(
-          screen.getByRole("combobox", {
-            name: "Hva er dine favorittfrukter?",
-          }),
-        );
-      });
-      await act(async () => {
-        await userEvent.type(
-          screen.getByRole("combobox", {
-            name: "Hva er dine favorittfrukter?",
-          }),
-          "apple",
-        );
-        await userEvent.keyboard("{ArrowDown}");
-        await userEvent.keyboard("{Escape}");
-        await userEvent.keyboard("{ArrowDown}");
+      const input = screen.getByRole("combobox", {
+        name: "Hva er dine favorittfrukter?",
       });
+      await userEvent.click(input);
+      await userEvent.type(input, "apple");
+      await userEvent.keyboard("{ArrowDown}");
+      await userEvent.keyboard("{Escape}");
+      await userEvent.keyboard("{ArrowDown}");
 
       expect(
         await screen.findByRole("option", { name: "banana" }),
@@ -145,13 +110,11 @@ describe("Render combobox", () => {
       );
 
       expect(screen.getByRole("combobox")).toBeInTheDocument();
-      const bananaOption = screen.getByRole("option", {
+      const option = screen.getByRole("option", {
         name: "Hjelpemidler [HJE]",
         selected: false,
       });
-      await act(async () => {
-        await userEvent.click(bananaOption);
-      });
+      await userEvent.click(option);
       expect(onToggleSelected).toHaveBeenCalledWith("HJE", true, false);
       expect(
         screen.getByRole("option", {
@@ -175,10 +138,8 @@ describe("Render combobox", () => {
       const combobox = screen.getByRole("combobox");
       expect(combobox).toBeInTheDocument();
 
-      await act(async () => {
-        await userEvent.click(combobox);
-        await userEvent.type(combobox, "Lemon");
-      });
+      await userEvent.click(combobox);
+      await userEvent.type(combobox, "Lemon");
       expect(onChange).toHaveBeenNthCalledWith(1, "L");
       expect(onChange).toHaveBeenNthCalledWith(2, "Le");
       expect(onChange).toHaveBeenNthCalledWith(3, "Lem");
@@ -205,13 +166,11 @@ describe("Render combobox", () => {
       const combobox = screen.getByRole("combobox");
       expect(combobox).toBeInTheDocument();
 
-      await act(async () => {
-        await userEvent.click(combobox);
-        await userEvent.type(combobox, "Syke");
-        await userEvent.keyboard("{ArrowRight}");
-        await userEvent.keyboard("{ArrowDown}");
-        await userEvent.keyboard("{Enter}");
-      });
+      await userEvent.click(combobox);
+      await userEvent.type(combobox, "Syke");
+      await userEvent.keyboard("{ArrowRight}");
+      await userEvent.keyboard("{ArrowDown}");
+      await userEvent.keyboard("{Enter}");
       expect(onChange).toHaveBeenNthCalledWith(1, "S");
       expect(onChange).toHaveBeenNthCalledWith(2, "Sy");
       expect(onChange).toHaveBeenNthCalledWith(3, "Syk");
@@ -228,18 +187,14 @@ describe("Render combobox", () => {
   });
 
   describe("search", () => {
-    test("should find matched anywhere in the label", async () => {
+    test("should find matches anywhere in the label", async () => {
       render(<App options={options} />);
 
       const combobox = screen.getByRole("combobox", {
         name: "Hva er dine favorittfrukter?",
       });
-
-      await act(async () => {
-        await userEvent.click(combobox);
-
-        await userEvent.type(combobox, "p");
-      });
+      await userEvent.click(combobox);
+      await userEvent.type(combobox, "p");
 
       const searchHits = [
         "apple",
@@ -273,18 +228,12 @@ describe("Render combobox", () => {
       const combobox = screen.getByRole("combobox", {
         name: "Hva er dine favorittfrukter?",
       });
-
-      await act(async () => {
-        await userEvent.click(combobox);
-
-        await userEvent.type(combobox, "p");
-      });
+      await userEvent.click(combobox);
+      await userEvent.type(combobox, "p");
 
       expect(combobox.getAttribute("value")).toBe("passion fruit");
 
-      await act(async () => {
-        await userEvent.keyboard("{Enter}");
-      });
+      await userEvent.keyboard("{Enter}");
 
       expect(onToggleSelected).toHaveBeenCalledWith(
         "passion fruit",
@@ -310,20 +259,14 @@ describe("Render combobox", () => {
       const combobox = screen.getByRole("combobox", {
         name: "Hva er dine favorittfrukter?",
       });
-
-      await act(async () => {
-        await userEvent.click(combobox);
-
-        await userEvent.type(combobox, "p");
-      });
+      await userEvent.click(combobox);
+      await userEvent.type(combobox, "p");
 
       expect(combobox.getAttribute("value")).toBe(
         "passion fruit (passion fruit)",
       );
 
-      await act(async () => {
-        await userEvent.keyboard("{Enter}");
-      });
+      await userEvent.keyboard("{Enter}");
 
       expect(onToggleSelected).toHaveBeenCalledWith(
         "passion fruit",
@@ -342,9 +285,7 @@ describe("Render combobox", () => {
       });
 
       const pressKey = async (key: string) => {
-        await act(async () => {
-          await userEvent.keyboard(`{${key}}`);
-        });
+        await userEvent.keyboard(`{${key}}`);
       };
 
       const hasVirtualFocus = (option: string) =>
@@ -352,9 +293,7 @@ describe("Render combobox", () => {
           screen.getByRole("option", { name: option }).id,
         );
 
-      await act(async () => {
-        await userEvent.click(combobox);
-      });
+      await userEvent.click(combobox);
 
       await pressKey("ArrowDown");
       hasVirtualFocus("apple");

package/src/modal/Modal.test.tsx

@@ -2,7 +2,6 @@ import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import React, { useState } from "react";
 import { describe, expect, test } from "vitest";
 import { Button, Modal } from "..";
-import { BODY_CLASS, BODY_CLASS_LEGACY } from "./ModalUtils";
 
 const Test = () => {
   const [open, setOpen] = useState(true);
@@ -29,35 +28,25 @@ describe("Modal", () => {
     expect(screen.getByText("Foobar")).not.toBeVisible();
   });
 
-  test("should toggle body class", async () => {
+  test("should toggle scroll lock", async () => {
     render(<Test />);
-    expect(document.body.classList).toContain(BODY_CLASS);
-    expect(document.body.classList).toContain(BODY_CLASS_LEGACY);
 
-    fireEvent.click(screen.getByText("Close"));
     await waitFor(() => {
-      expect(document.body.classList).not.toContain(BODY_CLASS);
+      expect(document.documentElement.style.overflowX).toBe("hidden");
     });
     await waitFor(() => {
-      expect(document.body.classList).not.toContain(BODY_CLASS_LEGACY);
+      expect(document.documentElement.style.overflowY).toBe("hidden");
+    });
+    await waitFor(() => {
+      expect(document.documentElement.style.scrollBehavior).toBe("unset");
+    });
+    await waitFor(() => {
+      expect(document.documentElement.style.scrollbarGutter).toBe("stable");
     });
-  });
-
-  test("should toggle body class when using portal", async () => {
-    render(
-      <Modal portal open onClose={() => null} aria-label="Test">
-        <Modal.Header />
-      </Modal>,
-    );
-    expect(document.body.classList).toContain(BODY_CLASS);
-    expect(document.body.classList).toContain(BODY_CLASS_LEGACY);
 
-    fireEvent.click(screen.getByRole("button"));
-    await waitFor(() =>
-      expect(document.body.classList).not.toContain(BODY_CLASS),
-    );
-    await waitFor(() =>
-      expect(document.body.classList).not.toContain(BODY_CLASS_LEGACY),
-    );
+    fireEvent.click(screen.getByText("Close"));
+    await waitFor(() => {
+      expect(document.documentElement.style.cssText).toBe("");
+    });
   });
 });

package/src/modal/Modal.tsx

@@ -8,6 +8,7 @@ import { Detail, Heading } from "../typography";
 import { composeEventHandlers } from "../util/composeEventHandlers";
 import { useId } from "../util/hooks";
 import { useMergeRefs } from "../util/hooks/useMergeRefs";
+import { useScrollLock } from "../util/hooks/useScrollLock";
 import { ModalContextProvider, useModalContext } from "./Modal.context";
 import ModalBody from "./ModalBody";
 import ModalFooter from "./ModalFooter";
@@ -17,6 +18,7 @@ import {
   coordsAreInside,
   getCloseHandler,
   useBodyScrollLock,
+  useIsModalOpen,
 } from "./ModalUtils";
 import dialogPolyfill, { needPolyfill } from "./dialog-polyfill";
 import { ModalProps } from "./types";
@@ -110,6 +112,9 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
 
     const dateContext = useDateInputContext(false);
     const isNested = useModalContext(false) !== undefined;
+
+    const isModalOpen = useIsModalOpen(modalRef.current);
+
     if (isNested && !dateContext) {
       console.error("Modals should not be nested");
     }
@@ -144,6 +149,17 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
       }
     }, [portalNode, open]);
 
+    useScrollLock({
+      enabled: isModalOpen,
+      mounted: isModalOpen,
+      open: isModalOpen,
+      referenceElement: modalRef.current,
+    });
+
+    /**
+     * TODO: Kept for legacy support.
+     * - Remove utility in v8 and deprecate body-classes in ModalUtils.ts
+     */
     useBodyScrollLock(modalRef, portalNode, isNested);
 
     const isWidthPreset =

package/src/modal/ModalUtils.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { ownerDocument } from "../util/owner";
 import type { ModalProps } from "./types";
 
@@ -28,10 +28,36 @@ export function getCloseHandler(
   return () => modalRef.current?.close();
 }
 
+function useIsModalOpen(modalRef: HTMLDialogElement | null) {
+  const [isOpen, setIsOpen] = React.useState<boolean>(false);
+
+  useEffect(() => {
+    if (!modalRef) {
+      return;
+    }
+
+    setIsOpen(modalRef.open);
+
+    const observer = new MutationObserver(() => {
+      setIsOpen(modalRef.open);
+    });
+
+    observer.observe(modalRef, {
+      attributes: true,
+      attributeFilter: ["open"],
+    });
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [modalRef]);
+
+  return isOpen;
+}
+
 export const BODY_CLASS_LEGACY = "navds-modal__document-body";
-export const BODY_CLASS = "aksel-modal__document-body";
 
-export function useBodyScrollLock(
+function useBodyScrollLock(
   modalRef: React.RefObject<HTMLDialogElement | null>,
   portalNode: HTMLElement | null,
   isNested: boolean,
@@ -50,14 +76,14 @@ export function useBodyScrollLock(
 
     // In case `open` is true initially
     if (modalRef.current.open) {
-      ownerDoc.body.classList.add(BODY_CLASS, BODY_CLASS_LEGACY);
+      ownerDoc.body.classList.add(BODY_CLASS_LEGACY);
     }
 
     const observer = new MutationObserver(() => {
       if (modalRef.current?.open) {
-        ownerDoc.body.classList.add(BODY_CLASS, BODY_CLASS_LEGACY);
+        ownerDoc.body.classList.add(BODY_CLASS_LEGACY);
       } else {
-        ownerDoc.body.classList.remove(BODY_CLASS, BODY_CLASS_LEGACY);
+        ownerDoc.body.classList.remove(BODY_CLASS_LEGACY);
       }
     });
 
@@ -69,7 +95,9 @@ export function useBodyScrollLock(
     return () => {
       observer.disconnect();
       // In case modal is unmounted before it's closed
-      ownerDoc.body.classList.remove(BODY_CLASS, BODY_CLASS_LEGACY);
+      ownerDoc.body.classList.remove(BODY_CLASS_LEGACY);
     };
   }, [modalRef, portalNode, isNested]);
 }
+
+export { useIsModalOpen, useBodyScrollLock };

package/src/util/__tests__/hideNonTargetElements.test.ts

@@ -0,0 +1,147 @@
+import { beforeEach, describe, expect, test } from "vitest";
+import { hideNonTargetElements } from "../hideNonTargetElements";
+
+describe("hideNonTargetElements util", () => {
+  beforeEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  test("marks non-avoided siblings with marker and cleans up on undo", () => {
+    document.body.innerHTML = `
+      <div id="root">
+        <div id="target"></div>
+        <div id="hidden-1"></div>
+        <div aria-live="polite" id="live-region"></div>
+        <script id="script-el"></script>
+      </div>
+    `;
+    const target = document.getElementById("target") as Element;
+    const hidden1 = document.getElementById("hidden-1") as Element;
+    const live = document.getElementById("live-region") as Element;
+    const script = document.getElementById("script-el") as Element;
+
+    const undo = hideNonTargetElements([target]);
+
+    expect(hidden1.hasAttribute("data-aksel-hidden")).toBe(true);
+    expect(live.hasAttribute("data-aksel-hidden")).toBe(false);
+    expect(script.hasAttribute("data-aksel-hidden")).toBe(false);
+    expect(target.hasAttribute("data-aksel-hidden")).toBe(false);
+
+    undo();
+
+    expect(hidden1.hasAttribute("data-aksel-hidden")).toBe(false);
+    expect(live.hasAttribute("data-aksel-hidden")).toBe(false);
+    expect(script.hasAttribute("data-aksel-hidden")).toBe(false);
+    expect(target.hasAttribute("data-aksel-hidden")).toBe(false);
+  });
+
+  test("nested: marks non-avoided siblings with marker and cleans up on undo", () => {
+    document.body.innerHTML = `
+      <div id="root">
+        <div id="inner">
+          <div id="target"></div>
+          <div id="hidden-1"></div>
+        </div>
+        <div id="hidden-2"></div>
+      </div>
+    `;
+    const target = document.getElementById("target") as Element;
+    const hidden1 = document.getElementById("hidden-1") as Element;
+    const hidden2 = document.getElementById("hidden-2") as Element;
+
+    const undo = hideNonTargetElements([target]);
+
+    expect(hidden1.hasAttribute("data-aksel-hidden")).toBe(true);
+    expect(hidden2.hasAttribute("data-aksel-hidden")).toBe(true);
+    expect(target.hasAttribute("data-aksel-hidden")).toBe(false);
+
+    undo();
+
+    expect(hidden1.hasAttribute("data-aksel-hidden")).toBe(false);
+    expect(hidden2.hasAttribute("data-aksel-hidden")).toBe(false);
+    expect(target.hasAttribute("data-aksel-hidden")).toBe(false);
+  });
+
+  test("applies aria-hidden when requested and restores previous state", () => {
+    document.body.innerHTML = `
+      <div id="root">
+        <div id="target"></div>
+        <div id="hidden-2"></div>
+        <div id="pre-hidden" aria-hidden="true"></div>
+      </div>
+    `;
+    const target = document.getElementById("target") as Element;
+    const hidden2 = document.getElementById("hidden-2") as Element;
+    const preHidden = document.getElementById("pre-hidden") as Element;
+
+    const undo = hideNonTargetElements([target]);
+
+    expect(hidden2.getAttribute("aria-hidden")).toBe("true");
+    expect(preHidden.getAttribute("aria-hidden")).toBe("true");
+    expect(hidden2.hasAttribute("data-aksel-hidden")).toBe(true);
+    expect(preHidden.hasAttribute("data-aksel-hidden")).toBe(true);
+
+    undo();
+
+    expect(hidden2.hasAttribute("aria-hidden")).toBe(false);
+    expect(preHidden.getAttribute("aria-hidden")).toBe("true");
+    expect(hidden2.hasAttribute("data-aksel-hidden")).toBe(false);
+    expect(preHidden.hasAttribute("data-aksel-hidden")).toBe(false);
+  });
+
+  test("treats shadow-hosted avoid elements as connected to host", () => {
+    document.body.innerHTML = `
+      <div id="root"></div>
+    `;
+    const root = document.getElementById("root") as HTMLElement;
+
+    const host = document.createElement("div");
+    host.id = "shadow-host";
+    const shadow = host.attachShadow({ mode: "open" });
+    const shadowTarget = document.createElement("button");
+    shadowTarget.id = "shadow-target";
+    shadow.appendChild(shadowTarget);
+
+    const sibling = document.createElement("div");
+    sibling.id = "outside";
+
+    root.append(host, sibling);
+
+    const undo = hideNonTargetElements([shadowTarget]);
+
+    expect(sibling.hasAttribute("data-aksel-hidden")).toBe(true);
+    expect(host.hasAttribute("data-aksel-hidden")).toBe(false);
+
+    undo();
+
+    expect(sibling.hasAttribute("data-aksel-hidden")).toBe(false);
+    expect(host.hasAttribute("data-aksel-hidden")).toBe(false);
+  });
+
+  test("maintains counters across nested calls until final undo", () => {
+    document.body.innerHTML = `
+      <div id="root">
+        <div id="target-a"></div>
+        <div id="target-b"></div>
+        <div id="shared"></div>
+      </div>
+    `;
+    const targetA = document.getElementById("target-a") as Element;
+    const targetB = document.getElementById("target-b") as Element;
+    const shared = document.getElementById("shared") as Element;
+
+    const undoA = hideNonTargetElements([targetA]);
+    expect(shared.hasAttribute("data-aksel-hidden")).toBe(true);
+
+    const undoB = hideNonTargetElements([targetB]);
+    expect(shared.hasAttribute("data-aksel-hidden")).toBe(true);
+
+    undoB();
+    expect(shared.hasAttribute("data-aksel-hidden")).toBe(true);
+    expect(shared.getAttribute("aria-hidden")).toBe("true");
+
+    undoA();
+    expect(shared.hasAttribute("data-aksel-hidden")).toBe(false);
+    expect(shared.hasAttribute("aria-hidden")).toBe(false);
+  });
+});

package/src/util/detectBrowser.ts

@@ -1,5 +1,45 @@
 const hasNavigator = typeof navigator !== "undefined";
 
+interface NavigatorUAData {
+  brands: { brand: string; version: string }[];
+  mobile: boolean;
+  platform: string;
+}
+
+function getNavigatorData(): { platform: string; maxTouchPoints: number } {
+  if (!hasNavigator) {
+    return { platform: "", maxTouchPoints: -1 };
+  }
+
+  const uaData = (navigator as any).userAgentData as
+    | NavigatorUAData
+    | undefined;
+
+  if (uaData?.platform) {
+    return {
+      platform: uaData.platform,
+      maxTouchPoints: navigator.maxTouchPoints,
+    };
+  }
+
+  return {
+    platform: navigator.platform ?? "",
+    maxTouchPoints: navigator.maxTouchPoints ?? -1,
+  };
+}
+
+const nav = getNavigatorData();
+
 const isSafari = hasNavigator && /apple/i.test(navigator.vendor);
 
-export { isSafari };
+const isWebKit =
+  typeof CSS === "undefined" || !CSS.supports
+    ? false
+    : CSS.supports("-webkit-backdrop-filter:none");
+
+const isIOS =
+  nav.platform === "MacIntel" && nav.maxTouchPoints > 1
+    ? true
+    : /iP(hone|ad|od)|iOS/.test(nav.platform);
+
+export { isSafari, isWebKit, isIOS };