@navikt/ds-react 5.8.0 → 5.9.1

package/src/modal/modal.stories.tsx

@@ -1,17 +1,19 @@
 import { FileIcon } from "@navikt/aksel-icons";
+import { Meta, StoryFn } from "@storybook/react";
 import React, { useRef, useState } from "react";
 import { BodyLong, Button, Heading, Tooltip } from "..";
 import Modal from "./Modal";
 
-export default {
+const meta: Meta<typeof Modal> = {
   title: "ds-react/Modal",
   component: Modal,
   parameters: {
     chromatic: { pauseAnimationAtEnd: true },
   },
 };
+export default meta;
 
-export const WithUseRef = () => {
+export const WithUseRef: StoryFn = () => {
   const ref = useRef<HTMLDialogElement>(null);
   const ref2 = useRef<HTMLDialogElement>(null);
 
@@ -87,7 +89,7 @@ export const WithUseRef = () => {
 };
 WithUseRef.storyName = "With useRef";
 
-export const WithUseState = () => {
+export const WithUseState: StoryFn = () => {
   const [open, setOpen] = useState(true);
   const [open2, setOpen2] = useState(false);
 
@@ -140,36 +142,43 @@ export const WithUseState = () => {
 };
 WithUseState.storyName = "With useState";
 
-export const EmptyHeader = () => (
-  <div style={{ minWidth: "800px", minHeight: "600px" } /* For Chromatic */}>
-    <Modal open>
-      <Modal.Header />
-      <Modal.Body>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
-        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
-        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
-        mollit anim id est laborum.
-      </Modal.Body>
-    </Modal>
-  </div>
+export const EmptyHeader: StoryFn = () => (
+  <Modal open>
+    <Modal.Header />
+    <Modal.Body>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
+      est laborum.
+    </Modal.Body>
+  </Modal>
 );
 
-export const Small = () => (
+export const Small: StoryFn = () => (
   <Modal open width="small" header={{ heading: "Simple header" }}>
     <Modal.Body>Lorem ipsum dolor sit amet.</Modal.Body>
   </Modal>
 );
+Small.storyName = "Size = Small";
 
-export const MediumWithPortal = () => (
+export const MediumWithPortal: StoryFn = () => (
   <Modal open portal width="medium" header={{ heading: "Simple header" }}>
     <Modal.Body>Lorem ipsum dolor sit amet.</Modal.Body>
   </Modal>
 );
+MediumWithPortal.storyName = "Size = Medium (with portal)";
+
+export const Large800: StoryFn = () => (
+  <Modal open width={800} header={{ heading: "Simple header" }}>
+    <Modal.Body>Lorem ipsum dolor sit amet.</Modal.Body>
+  </Modal>
+);
+Large800.storyName = "Size = 800px";
 
-export const WithTooltip = () => {
+export const WithTooltip: StoryFn = () => {
   const ref = useRef<HTMLDialogElement>(null);
 
   return (
@@ -193,3 +202,66 @@ export const WithTooltip = () => {
     </div>
   );
 };
+
+export const ChromaticViewportTesting: StoryFn = () => (
+  <div id="modal-story-wrapper" style={{ width: "100vw", height: "100vh" }}>
+    <style>{`#storybook-root { padding: 0 !important }`}</style>
+    <Modal
+      open
+      header={{ heading: "Chromatic Viewports Testing", label: "Test" }}
+    >
+      <Modal.Body>
+        <BodyLong spacing>
+          This story is tailored for testing the breakpoints with Chromatic.
+        </BodyLong>
+        <BodyLong spacing>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat.
+        </BodyLong>
+        <BodyLong spacing>
+          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+          dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+          proident, sunt in culpa qui officia deserunt mollit anim id est
+          laborum.
+        </BodyLong>
+        <BodyLong>
+          Sed ut perspiciatis unde omnis iste natus error sit voluptatem
+          accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae
+          ab illo inventore veritatis et quasi architecto beatae vitae dicta
+          sunt explicabo.
+        </BodyLong>
+      </Modal.Body>
+      <Modal.Footer>
+        <Button>Primary</Button>
+        <Button variant="secondary">Secondary</Button>
+        <Button variant="tertiary">Tertiary</Button>
+      </Modal.Footer>
+    </Modal>
+  </div>
+);
+ChromaticViewportTesting.parameters = {
+  chromatic: {
+    modes: {
+      mobile_portrait: {
+        viewport: {
+          width: 400,
+          height: 850,
+        },
+      },
+      mobile_landscape: {
+        viewport: {
+          width: 850,
+          height: 400,
+        },
+      },
+      desktop: {
+        viewport: {
+          width: 1280,
+          height: 960,
+        },
+      },
+    },
+  },
+};

package/src/popover/Popover.tsx

@@ -18,6 +18,7 @@ import React, {
   useMemo,
   useRef,
 } from "react";
+import { DateContext } from "../date/context";
 import { ModalContext } from "../modal/ModalContext";
 import { mergeRefs, useClientLayoutEffect, useEventListener } from "../util";
 import PopoverContent, { PopoverContentType } from "./PopoverContent";
@@ -73,11 +74,6 @@ export interface PopoverProps extends HTMLAttributes<HTMLDivElement> {
    * @default "absolute"
    */
   strategy?: "absolute" | "fixed";
-  /**
-   * Bubbles Escape keydown-event up trough DOM-tree. This is set to false by default to prevent closing components like Modal on Escape
-   * @default false
-   */
-  bubbleEscape?: boolean;
   /**
    * Changes placement of the floating element in order to keep it in view.
    * @default true
@@ -124,7 +120,6 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
       placement = "top",
       offset,
       strategy: userStrategy,
-      bubbleEscape = false,
       flip: _flip = true,
       ...rest
     },
@@ -132,8 +127,9 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
   ) => {
     const arrowRef = useRef<HTMLDivElement | null>(null);
     const isInModal = useContext(ModalContext) !== null;
+    const isInDatepicker = useContext(DateContext) !== null;
     const chosenStrategy = userStrategy ?? (isInModal ? "fixed" : "absolute");
-    const chosenFlip = isInModal ? true : _flip;
+    const chosenFlip = isInDatepicker ? false : _flip;
 
     const {
       x,
@@ -160,11 +156,7 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
 
     const { getFloatingProps } = useInteractions([
       useClick(context),
-      useDismiss(context, {
-        bubbles: {
-          escapeKey: bubbleEscape,
-        },
-      }),
+      useDismiss(context),
     ]);
 
     useClientLayoutEffect(() => {

package/src/util/__tests__/useMedia.test.tsx

@@ -0,0 +1,19 @@
+import { render, screen } from "@testing-library/react";
+import React from "react";
+import { useMedia } from "../useMedia";
+
+function TestComponent({ fallback }: { fallback?: boolean }) {
+  const media = useMedia("screen and (min-width: 1024px)", fallback);
+  return <div data-testid="media-id">{`${media}`}</div>;
+}
+
+describe("useMedia", () => {
+  test("Should return 'undefined' when no fallback is given", async () => {
+    render(<TestComponent />);
+    expect(screen.getByTestId("media-id").innerHTML).toEqual("undefined");
+  });
+  test("Should return fallback", async () => {
+    render(<TestComponent fallback={true} />);
+    expect(screen.getByTestId("media-id").innerHTML).toEqual("true");
+  });
+});

package/src/util/useMedia.ts

@@ -0,0 +1,38 @@
+import { useEffect, useState } from "react";
+
+export const noMatchMedia =
+  typeof window !== "undefined" && window.matchMedia === undefined;
+
+/**
+ * @example useMedia("screen and (min-width: 1024px)")
+ * @param media string
+ * @param fallback boolean
+ * @returns boolean | undefined
+ */
+export const useMedia = (
+  media: string,
+  fallback?: boolean
+): boolean | undefined => {
+  const [matches, setMatches] = useState(fallback);
+
+  useEffect(() => {
+    if (noMatchMedia) {
+      return;
+    }
+    const mediaQueryList = window.matchMedia(media);
+
+    setMatches(mediaQueryList.matches);
+
+    const listener = (evt: MediaQueryListEvent) => {
+      setMatches(evt.matches);
+    };
+
+    mediaQueryList.addEventListener("change", listener);
+
+    return () => {
+      mediaQueryList.removeEventListener("change", listener);
+    };
+  }, [media]);
+
+  return matches;
+};

package/cjs/date/hooks/useEscape.js

@@ -1,23 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useEscape = void 0;
-const react_1 = require("react");
-const useEscape = (open, setOpen, focusRef) => {
-    const handleClose = (0, react_1.useCallback)(() => {
-        setOpen(false);
-        (focusRef === null || focusRef === void 0 ? void 0 : focusRef.current) && focusRef.current.focus();
-    }, [focusRef, setOpen]);
-    const escape = (0, react_1.useCallback)((event) => {
-        if (open && event.key === "Escape") {
-            event.preventDefault(); // This prevents modal from closing when using datepicker inside modal
-            handleClose();
-        }
-    }, [handleClose, open]);
-    (0, react_1.useEffect)(() => {
-        window.addEventListener("keydown", escape, false);
-        return () => {
-            window.removeEventListener("keydown", escape, false);
-        };
-    }, [escape]);
-};
-exports.useEscape = useEscape;

package/cjs/date/hooks/useOutsideClickHandler.js

@@ -1,26 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useOutsideClickHandler = void 0;
-const react_1 = require("react");
-const useOutsideClickHandler = (open, setOpen, refs) => {
-    const handleFocusIn = (0, react_1.useCallback)((e) => {
-        var _a, _b, _c;
-        const composed = (_b = (_a = e.composedPath) === null || _a === void 0 ? void 0 : _a.call(e)) === null || _b === void 0 ? void 0 : _b[0];
-        if (!(e === null || e === void 0 ? void 0 : e.target) || !((_c = e === null || e === void 0 ? void 0 : e.target) === null || _c === void 0 ? void 0 : _c.nodeType) || !composed) {
-            return;
-        }
-        if (!refs.some((element) => (element === null || element === void 0 ? void 0 : element.contains(e.target)) || (element === null || element === void 0 ? void 0 : element.contains(composed)))) {
-            open && setOpen(false);
-        }
-    }, [open, refs, setOpen]);
-    (0, react_1.useEffect)(() => {
-        window.addEventListener("focusin", handleFocusIn);
-        window.addEventListener("pointerdown", handleFocusIn);
-        return () => {
-            var _a, _b;
-            (_a = window === null || window === void 0 ? void 0 : window.removeEventListener) === null || _a === void 0 ? void 0 : _a.call(window, "focusin", handleFocusIn);
-            (_b = window === null || window === void 0 ? void 0 : window.removeEventListener) === null || _b === void 0 ? void 0 : _b.call(window, "pointerdown", handleFocusIn);
-        };
-    }, [handleFocusIn]);
-};
-exports.useOutsideClickHandler = useOutsideClickHandler;

package/esm/date/DateInput.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DateInput.js","sourceRoot":"","sources":["../../src/date/DateInput.tsx"],"names":[],"mappings":"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"}

package/esm/date/hooks/useEscape.d.ts

@@ -1,2 +0,0 @@
-import { RefObject } from "react";
-export declare const useEscape: (open: boolean, setOpen: (openState: boolean) => void, focusRef: RefObject<HTMLElement>) => void;

package/esm/date/hooks/useEscape.js

@@ -1,20 +0,0 @@
-import { useCallback, useEffect } from "react";
-export const useEscape = (open, setOpen, focusRef) => {
-    const handleClose = useCallback(() => {
-        setOpen(false);
-        (focusRef === null || focusRef === void 0 ? void 0 : focusRef.current) && focusRef.current.focus();
-    }, [focusRef, setOpen]);
-    const escape = useCallback((event) => {
-        if (open && event.key === "Escape") {
-            event.preventDefault(); // This prevents modal from closing when using datepicker inside modal
-            handleClose();
-        }
-    }, [handleClose, open]);
-    useEffect(() => {
-        window.addEventListener("keydown", escape, false);
-        return () => {
-            window.removeEventListener("keydown", escape, false);
-        };
-    }, [escape]);
-};
-//# sourceMappingURL=useEscape.js.map

package/esm/date/hooks/useEscape.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useEscape.js","sourceRoot":"","sources":["../../../src/date/hooks/useEscape.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAa,MAAM,OAAO,CAAC;AAE1D,MAAM,CAAC,MAAM,SAAS,GAAG,CACvB,IAAa,EACb,OAAqC,EACrC,QAAgC,EAChC,EAAE;IACF,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;QACnC,OAAO,CAAC,KAAK,CAAC,CAAC;QACf,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,OAAO,KAAI,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;IAChD,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC;IAExB,MAAM,MAAM,GAAG,WAAW,CACxB,CAAC,KAAoB,EAAE,EAAE;QACvB,IAAI,IAAI,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;YAClC,KAAK,CAAC,cAAc,EAAE,CAAC,CAAC,sEAAsE;YAC9F,WAAW,EAAE,CAAC;SACf;IACH,CAAC,EACD,CAAC,WAAW,EAAE,IAAI,CAAC,CACpB,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC;QAElD,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC;QACvD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;AACf,CAAC,CAAC"}

package/esm/date/hooks/useOutsideClickHandler.d.ts

@@ -1 +0,0 @@
-export declare const useOutsideClickHandler: (open: boolean, setOpen: (openState: boolean) => void, refs: Array<any>) => void;

package/esm/date/hooks/useOutsideClickHandler.js

@@ -1,23 +0,0 @@
-import { useCallback, useEffect } from "react";
-export const useOutsideClickHandler = (open, setOpen, refs) => {
-    const handleFocusIn = useCallback((e) => {
-        var _a, _b, _c;
-        const composed = (_b = (_a = e.composedPath) === null || _a === void 0 ? void 0 : _a.call(e)) === null || _b === void 0 ? void 0 : _b[0];
-        if (!(e === null || e === void 0 ? void 0 : e.target) || !((_c = e === null || e === void 0 ? void 0 : e.target) === null || _c === void 0 ? void 0 : _c.nodeType) || !composed) {
-            return;
-        }
-        if (!refs.some((element) => (element === null || element === void 0 ? void 0 : element.contains(e.target)) || (element === null || element === void 0 ? void 0 : element.contains(composed)))) {
-            open && setOpen(false);
-        }
-    }, [open, refs, setOpen]);
-    useEffect(() => {
-        window.addEventListener("focusin", handleFocusIn);
-        window.addEventListener("pointerdown", handleFocusIn);
-        return () => {
-            var _a, _b;
-            (_a = window === null || window === void 0 ? void 0 : window.removeEventListener) === null || _a === void 0 ? void 0 : _a.call(window, "focusin", handleFocusIn);
-            (_b = window === null || window === void 0 ? void 0 : window.removeEventListener) === null || _b === void 0 ? void 0 : _b.call(window, "pointerdown", handleFocusIn);
-        };
-    }, [handleFocusIn]);
-};
-//# sourceMappingURL=useOutsideClickHandler.js.map

package/esm/date/hooks/useOutsideClickHandler.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useOutsideClickHandler.js","sourceRoot":"","sources":["../../../src/date/hooks/useOutsideClickHandler.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE/C,MAAM,CAAC,MAAM,sBAAsB,GAAG,CACpC,IAAa,EACb,OAAqC,EACrC,IAAgB,EAChB,EAAE;IACF,MAAM,aAAa,GAAG,WAAW,CAC/B,CAAC,CAAC,EAAE,EAAE;;QACJ,MAAM,QAAQ,GAAG,MAAA,MAAA,CAAC,CAAC,YAAY,iDAAI,0CAAG,CAAC,CAAC,CAAC;QACzC,IAAI,CAAC,CAAA,CAAC,aAAD,CAAC,uBAAD,CAAC,CAAE,MAAM,CAAA,IAAI,CAAC,CAAA,MAAA,CAAC,aAAD,CAAC,uBAAD,CAAC,CAAE,MAAM,0CAAE,QAAQ,CAAA,IAAI,CAAC,QAAQ,EAAE;YACnD,OAAO;SACR;QACD,IACE,CAAC,IAAI,CAAC,IAAI,CACR,CAAC,OAAO,EAAE,EAAE,CACV,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,MAAI,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,CAAC,QAAQ,CAAC,CAAA,CAC7D,EACD;YACA,IAAI,IAAI,OAAO,CAAC,KAAK,CAAC,CAAC;SACxB;IACH,CAAC,EACD,CAAC,IAAI,EAAE,IAAI,EAAE,OAAO,CAAC,CACtB,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QAClD,MAAM,CAAC,gBAAgB,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC;QACtD,OAAO,GAAG,EAAE;;YACV,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,mBAAmB,uDAAG,SAAS,EAAE,aAAa,CAAC,CAAC;YACxD,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,mBAAmB,uDAAG,aAAa,EAAE,aAAa,CAAC,CAAC;QAC9D,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;AACtB,CAAC,CAAC"}

package/src/date/hooks/useEscape.tsx

@@ -1,30 +0,0 @@
-import { useCallback, useEffect, RefObject } from "react";
-
-export const useEscape = (
-  open: boolean,
-  setOpen: (openState: boolean) => void,
-  focusRef: RefObject<HTMLElement>
-) => {
-  const handleClose = useCallback(() => {
-    setOpen(false);
-    focusRef?.current && focusRef.current.focus();
-  }, [focusRef, setOpen]);
-
-  const escape = useCallback(
-    (event: KeyboardEvent) => {
-      if (open && event.key === "Escape") {
-        event.preventDefault(); // This prevents modal from closing when using datepicker inside modal
-        handleClose();
-      }
-    },
-    [handleClose, open]
-  );
-
-  useEffect(() => {
-    window.addEventListener("keydown", escape, false);
-
-    return () => {
-      window.removeEventListener("keydown", escape, false);
-    };
-  }, [escape]);
-};

package/src/date/hooks/useOutsideClickHandler.tsx

@@ -1,34 +0,0 @@
-import { useCallback, useEffect } from "react";
-
-export const useOutsideClickHandler = (
-  open: boolean,
-  setOpen: (openState: boolean) => void,
-  refs: Array<any>
-) => {
-  const handleFocusIn = useCallback(
-    (e) => {
-      const composed = e.composedPath?.()?.[0];
-      if (!e?.target || !e?.target?.nodeType || !composed) {
-        return;
-      }
-      if (
-        !refs.some(
-          (element) =>
-            element?.contains(e.target) || element?.contains(composed)
-        )
-      ) {
-        open && setOpen(false);
-      }
-    },
-    [open, refs, setOpen]
-  );
-
-  useEffect(() => {
-    window.addEventListener("focusin", handleFocusIn);
-    window.addEventListener("pointerdown", handleFocusIn);
-    return () => {
-      window?.removeEventListener?.("focusin", handleFocusIn);
-      window?.removeEventListener?.("pointerdown", handleFocusIn);
-    };
-  }, [handleFocusIn]);
-};