@navikt/ds-react 5.0.3 → 5.2.0

package/src/form/combobox/FilteredOptions/filteredOptionsContext.tsx

@@ -6,12 +6,13 @@ import React, {
   useContext,
   useCallback,
   useRef,
-  useLayoutEffect,
+  SetStateAction,
 } from "react";
 import cl from "clsx";
 import { useCustomOptionsContext } from "../customOptionsContext";
 import { useInputContext } from "../Input/inputContext";
 import usePrevious from "../../../util/usePrevious";
+import { useClientLayoutEffect } from "../../../util";
 
 const normalizeText = (text: string): string =>
   typeof text === "string" ? `${text}`.toLowerCase().trim() : "";
@@ -35,6 +36,8 @@ type FilteredOptionsContextType = {
   isListOpen: boolean;
   isLoading?: boolean;
   filteredOptions: string[];
+  isMouseLastUsedInputDevice: boolean;
+  setIsMouseLastUsedInputDevice: React.Dispatch<SetStateAction<boolean>>;
   isValueNew: boolean;
   toggleIsListOpen: (newState?: boolean) => void;
   currentOption: string | null;
@@ -84,7 +87,10 @@ export const FilteredOptionsProvider = ({ children, value: props }) => {
 
   const previousSearchTerm = usePrevious(searchTerm);
 
-  useLayoutEffect(() => {
+  const [isMouseLastUsedInputDevice, setIsMouseLastUsedInputDevice] =
+    useState(false);
+
+  useClientLayoutEffect(() => {
     if (
       shouldAutocomplete &&
       normalizeText(searchTerm) !== "" &&
@@ -246,6 +252,8 @@ export const FilteredOptionsProvider = ({ children, value: props }) => {
     isListOpen,
     isLoading,
     filteredOptions,
+    isMouseLastUsedInputDevice,
+    setIsMouseLastUsedInputDevice,
     isValueNew,
     toggleIsListOpen,
     currentOption,

package/src/form/combobox/Input/Input.tsx

@@ -42,6 +42,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
       moveFocusToInput,
       moveFocusToEnd,
       setFilteredOptionsIndex,
+      setIsMouseLastUsedInputDevice,
       shouldAutocomplete,
     } = useFilteredOptionsContext();
 
@@ -102,6 +103,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
 
     const handleKeyDown = useCallback(
       (e) => {
+        setIsMouseLastUsedInputDevice(false);
         if (e.key === "Backspace") {
           if (value === "") {
             const lastSelectedOption =
@@ -132,6 +134,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
         isListOpen,
         filteredOptionsIndex,
         moveFocusUp,
+        setIsMouseLastUsedInputDevice,
       ]
     );
 

package/src/form/combobox/Input/inputContext.tsx

@@ -4,12 +4,12 @@ import React, {
   createContext,
   useCallback,
   useContext,
-  useLayoutEffect,
   useMemo,
   useRef,
   useState,
 } from "react";
 import { useFormField, FormFieldType } from "../../useFormField";
+import { useClientLayoutEffect } from "../../../util";
 
 interface InputContextType extends FormFieldType {
   clearInput: (event: React.PointerEvent | React.KeyboardEvent) => void;
@@ -92,7 +92,7 @@ export const InputContextProvider = ({ children, value: props }) => {
     inputRef.current?.focus?.();
   }, []);
 
-  useLayoutEffect(() => {
+  useClientLayoutEffect(() => {
     if (shouldAutocomplete && inputRef && value !== searchTerm) {
       inputRef.current?.setSelectionRange?.(searchTerm.length, value.length);
     }

package/src/form/combobox/combobox.stories.tsx

@@ -509,3 +509,52 @@ export const TestThatCallbacksOnlyFireWhenExpected = {
     expect(args.onChange.mock.calls).toHaveLength(searchWord.length + 1);
   },
 };
+
+export const TestHoverAndFocusSwitching = {
+  render: (props) => {
+    return (
+      <DemoContainer dataTheme={props.darkMode}>
+        <UNSAFE_Combobox
+          options={options}
+          label="Hva er dine favorittfrukter?"
+          {...props}
+        />
+      </DemoContainer>
+    );
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await sleep(500);
+
+    const getInput = () =>
+      canvas.getByRole("combobox", {
+        name: "Hva er dine favorittfrukter?",
+      });
+
+    userEvent.click(getInput());
+    expect(getInput().getAttribute("aria-expanded")).toEqual("false");
+    expect(getInput().getAttribute("aria-activedescendant")).toBeNull();
+
+    await sleep(250);
+    userEvent.keyboard("{ArrowDown}");
+    await sleep(250);
+    const bananaOption = canvas.getByRole("option", { name: "banana" });
+    expect(getInput().getAttribute("aria-activedescendant")).toBe(
+      bananaOption.getAttribute("id")
+    );
+
+    userEvent.keyboard("{ArrowDown}");
+    await sleep(250);
+    const appleOption = canvas.getByRole("option", { name: "apple" });
+    expect(getInput().getAttribute("aria-activedescendant")).toBe(
+      appleOption.getAttribute("id")
+    );
+
+    userEvent.hover(bananaOption);
+    await sleep(250);
+    expect(getInput().getAttribute("aria-activedescendant")).toBe(
+      bananaOption.getAttribute("id")
+    );
+  },
+};

package/src/guide-panel/Illustration.tsx

@@ -54,21 +54,21 @@ export const DefaultIllustration: DefaultIllustrationType = ({
         fillRule="evenodd"
         clipRule="evenodd"
         d="M16.584 26.9976C15.7859 27.062 15.5625 25.8029 15.803 24.9807C15.8482 24.8249 16.1124 24.1154 16.5802 24.1154C17.0473 24.1154 17.2536 24.5032 17.2823 24.5699C17.6259 25.3715 17.4571 26.9268 16.584 26.9976"
-        fill="#262626"
+        fill="#23262a"
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M25.8405 26.9976C26.6386 27.062 26.862 25.8029 26.6215 24.9807C26.5763 24.8249 26.3121 24.1154 25.8444 24.1154C25.3772 24.1154 25.171 24.5032 25.1423 24.5699C24.7987 25.3715 24.9674 26.9268 25.8405 26.9976"
-        fill="#262626"
+        fill="#23262a"
       />
       <path
         d="M21.5081 28.2384C21.9854 28.157 22.3113 28.2081 22.428 28.3669C22.8687 28.9672 22.7277 29.6023 21.9718 30.1237C21.5744 30.3977 21.0273 30.4942 20.7377 30.3521C20.596 30.2826 20.4304 30.3536 20.3677 30.5106C20.3051 30.6676 20.3691 30.8512 20.5107 30.9207C20.9894 31.1555 21.7255 31.0257 22.268 30.6517C23.2953 29.9431 23.5304 28.8837 22.863 27.9743C22.5805 27.59 22.0806 27.5116 21.4228 27.6239C21.2697 27.65 21.1647 27.8088 21.1883 27.9784C21.2118 28.1481 21.355 28.2645 21.5081 28.2384Z"
-        fill="#262626"
+        fill="#23262a"
       />
       <path
         d="M24.9595 32.3642C24.9315 32.4234 24.8672 32.5367 24.7639 32.686C24.589 32.9386 24.3694 33.1919 24.1027 33.4281C23.3079 34.1319 22.2735 34.5389 20.9568 34.5017C19.673 34.4654 18.6432 34.0647 17.8358 33.4185C17.5393 33.1813 17.2946 32.9272 17.0989 32.6739C16.9836 32.5246 16.9115 32.4114 16.88 32.3523C16.8043 32.2104 16.618 32.152 16.464 32.2218C16.31 32.2917 16.2466 32.4634 16.3224 32.6053C16.3681 32.6908 16.4569 32.8304 16.5927 33.0062C16.8156 33.2948 17.0928 33.5826 17.4283 33.8511C18.3398 34.5805 19.5046 35.0338 20.9378 35.0743C22.4302 35.1165 23.6233 34.6471 24.5333 33.8412C24.8376 33.5717 25.0877 33.2832 25.2878 32.9941C25.4095 32.8183 25.4887 32.6787 25.5291 32.5934C25.5977 32.4485 25.5259 32.2796 25.3686 32.2163C25.2113 32.153 25.0282 32.2192 24.9595 32.3642Z"
-        fill="#262626"
+        fill="#23262a"
       />
       <path
         fillRule="evenodd"
@@ -80,7 +80,7 @@ export const DefaultIllustration: DefaultIllustrationType = ({
         fillRule="evenodd"
         clipRule="evenodd"
         d="M27.6207 51.8307H26.5502C26.4709 51.8307 26.407 51.7671 26.407 51.6882V51.5086C26.407 51.4303 26.4709 51.3661 26.5502 51.3661H27.6207C27.7 51.3661 27.764 51.4303 27.764 51.5086V51.6882C27.764 51.7671 27.7 51.8307 27.6207 51.8307"
-        fill="#262626"
+        fill="#23262a"
       />
       <path
         fillRule="evenodd"

package/src/loader/loader.stories.tsx

@@ -57,7 +57,7 @@ export const Variant = () => (
       <Loader size="3xlarge" variant="inverted" />
       <Loader size="3xlarge" variant="interaction" />
     </div>
-    <div style={{ backgroundColor: "#262626" }}>
+    <div style={{ backgroundColor: "#23262a" }}>
       <Loader size="3xlarge" variant="neutral" />
       <Loader size="3xlarge" variant="inverted" />
       <Loader size="3xlarge" variant="interaction" />
@@ -72,7 +72,7 @@ export const Transparent = () => (
       <Loader size="3xlarge" transparent variant="inverted" />
       <Loader size="3xlarge" transparent variant="interaction" />
     </div>
-    <div style={{ backgroundColor: "#262626" }}>
+    <div style={{ backgroundColor: "#23262a" }}>
       <Loader size="3xlarge" transparent variant="neutral" />
       <Loader size="3xlarge" transparent variant="inverted" />
       <Loader size="3xlarge" transparent variant="interaction" />

package/src/modal/Modal.test.tsx

@@ -0,0 +1,54 @@
+import React, { useState } from "react";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { Button, Modal } from "..";
+import { BODY_CLASS } from "./ModalUtils";
+
+const Test = () => {
+  const [open, setOpen] = useState(true);
+
+  return (
+    <Modal open={open}>
+      <Modal.Body>
+        <p>Foobar</p>
+        <Button onClick={() => setOpen(false)}>Close</Button>
+      </Modal.Body>
+    </Modal>
+  );
+};
+
+describe("Modal", () => {
+  test("should be visible", () => {
+    render(<Test />);
+    expect(screen.getByText("Foobar")).toBeVisible();
+  });
+
+  test("should be hidden after setting 'open' to false", async () => {
+    render(<Test />);
+    fireEvent.click(screen.getByText("Close"));
+    expect(screen.getByText("Foobar")).not.toBeVisible();
+  });
+
+  test("should toggle body class", async () => {
+    render(<Test />);
+    expect(document.body.classList).toContain(BODY_CLASS);
+
+    fireEvent.click(screen.getByText("Close"));
+    await waitFor(() =>
+      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)
+    );
+  });
+});

package/src/modal/Modal.tsx

@@ -5,18 +5,17 @@ import React, {
   useMemo,
   useRef,
 } from "react";
+import { createPortal } from "react-dom";
+import { useFloatingPortalNode } from "@floating-ui/react";
 import cl from "clsx";
-import dialogPolyfill from "./dialog-polyfill";
-import { Detail, Heading, mergeRefs, useId } from "..";
+import dialogPolyfill, { needPolyfill } from "./dialog-polyfill";
+import { Detail, Heading, mergeRefs, useId, useProvider } from "..";
 import ModalBody from "./ModalBody";
 import ModalHeader from "./ModalHeader";
 import ModalFooter from "./ModalFooter";
 import { getCloseHandler, useBodyScrollLock } from "./ModalUtils";
 import { ModalContext } from "./ModalContext";
 
-const needPolyfill =
-  typeof window !== "undefined" && window.HTMLDialogElement === undefined;
-
 export interface ModalProps
   extends React.DialogHTMLAttributes<HTMLDialogElement> {
   /**
@@ -65,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
    */
@@ -141,6 +145,7 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
       onBeforeClose,
       onCancel,
       width,
+      portal,
       className,
       "aria-labelledby": ariaLabelledby,
       style,
@@ -151,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, "navds-modal__document-body");
+    useBodyScrollLock(modalRef, portalNode);
 
     const isWidthPreset =
       typeof width === "string" && ["small", "medium"].includes(width);
 
-    return (
+    const component = (
       <dialog
         ref={mergedRef}
         className={cl("navds-modal", className, {
@@ -229,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;
 

package/src/modal/ModalUtils.ts

@@ -13,17 +13,19 @@ export function getCloseHandler(
   return () => modalRef.current?.close();
 }
 
+export const BODY_CLASS = "navds-modal__document-body";
+
 export function useBodyScrollLock(
   modalRef: React.RefObject<HTMLDialogElement>,
-  bodyClass: string
+  portalNode: HTMLElement | null
 ) {
   React.useEffect(() => {
-    if (!modalRef.current) return;
-    if (modalRef.current.open) document.body.classList.add(bodyClass); // In case `open` is true initially
+    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(() => {
-      if (modalRef.current?.open) document.body.classList.add(bodyClass);
-      else document.body.classList.remove(bodyClass);
+      if (modalRef.current?.open) document.body.classList.add(BODY_CLASS);
+      else document.body.classList.remove(BODY_CLASS);
     });
     observer.observe(modalRef.current, {
       attributes: true,
@@ -31,7 +33,7 @@ export function useBodyScrollLock(
     });
     return () => {
       observer.disconnect();
-      document.body.classList.remove(bodyClass); // In case modal is unmounted before it's closed
+      document.body.classList.remove(BODY_CLASS); // In case modal is unmounted before it's closed
     };
-  }, [modalRef, bodyClass]);
+  }, [modalRef, portalNode]);
 }

package/src/modal/dialog-polyfill.ts

@@ -1,5 +1,10 @@
 // @ts-nocheck
 
+export const needPolyfill =
+  typeof window !== "undefined" &&
+  (window.HTMLDialogElement === undefined ||
+    navigator.userAgent.includes("jsdom"));
+
 // Copyright (c) 2013 The Chromium Authors. All rights reserved.
 //
 // Redistribution and use in source and binary forms, with or without
@@ -44,35 +49,6 @@ function safeDispatchEvent(target, event) {
   return target.dispatchEvent(event);
 }
 
-/**
- * @param {Element} el to check for stacking context
- * @return {boolean} whether this el or its parents creates a stacking context
- */
-function createsStackingContext(el) {
-  while (el && el !== document.body) {
-    var s = window.getComputedStyle(el);
-    var invalid = function (k, ok) {
-      return !(s[k] === undefined || s[k] === ok);
-    };
-
-    if (
-      s.opacity < 1 ||
-      invalid("zIndex", "auto") ||
-      invalid("transform", "none") ||
-      invalid("mixBlendMode", "normal") ||
-      invalid("filter", "none") ||
-      invalid("perspective", "none") ||
-      s["isolation"] === "isolate" ||
-      s.position === "fixed" ||
-      s.webkitOverflowScrolling === "touch"
-    ) {
-      return true;
-    }
-    el = el.parentElement;
-  }
-  return false;
-}
-
 /**
  * Finds the nearest <dialog> from the passed element.
  *
@@ -476,14 +452,6 @@ dialogPolyfillInfo.prototype = /** @type {HTMLDialogElement.prototype} */ {
       );
     }
 
-    if (createsStackingContext(this.dialog_.parentElement)) {
-      console.warn(
-        "A dialog is being shown inside a stacking context. " +
-          "This may cause it to be unusable. For more information, see this link: " +
-          "https://github.com/GoogleChrome/dialog-polyfill/#stacking-context"
-      );
-    }
-
     this.setOpen(true);
     this.openAsModal_ = true;
 
@@ -602,7 +570,7 @@ dialogPolyfill.needsCentering = function (dialog) {
  * @param {!Element} element to force upgrade
  */
 dialogPolyfill.forceRegisterDialog = function (element) {
-  if (window.HTMLDialogElement || element.showModal) {
+  if (element.showModal) {
     console.warn(
       "This browser already supports <dialog>, the polyfill " +
         "may not work correctly",
@@ -847,7 +815,7 @@ dialogPolyfill.DialogManager.prototype.removeDialog = function (dpi) {
   this.updateStacking();
 };
 
-if (typeof window !== "undefined" && window.HTMLDialogElement === undefined) {
+if (needPolyfill) {
   dialogPolyfill.dm = new dialogPolyfill.DialogManager();
   dialogPolyfill.formSubmitter = null;
   dialogPolyfill.imagemapUseValue = null;
@@ -857,7 +825,7 @@ if (typeof window !== "undefined" && window.HTMLDialogElement === undefined) {
  * Installs global handlers, such as click listers and native method overrides. These are needed
  * even if a no dialog is registered, as they deal with <form method="dialog">.
  */
-if (typeof window !== "undefined" && window.HTMLDialogElement === undefined) {
+if (needPolyfill) {
   /**
    * If HTMLFormElement translates method="DIALOG" into 'get', then replace the descriptor with
    * one that returns the correct value.

package/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>
 );

package/src/timeline/timeline.stories.tsx

@@ -1,8 +1,8 @@
 import { CheckmarkCircleFillIcon } from "@navikt/aksel-icons";
-import { useState } from "@storybook/addons";
 import { Meta } from "@storybook/react";
 import * as React from "react";
 import Timeline from "./Timeline";
+import { useState } from "react";
 
 export default {
   title: "ds-react/Timeline",