@navikt/ds-react 5.9.0 → 5.9.2

package/cjs/date/parts/DateWrapper.js

@@ -44,7 +44,10 @@ const DateWrapper = ({ open, children, onClose, anchor, locale, variant, popover
                 "navds-date": variant === "month",
             }), flip: false }, popoverProps), children));
     }
-    return (react_1.default.createElement(modal_1.Modal, { ref: modalRef, open: open, onClose: onClose, "aria-label": (0, labels_1.modalLabel)(locale, variant), className: (0, clsx_1.default)("navds-date__modal", {
+    return (react_1.default.createElement(modal_1.Modal, { ref: modalRef, open: open, onClose: (event) => {
+            event.stopPropagation();
+            onClose();
+        }, "aria-label": (0, labels_1.modalLabel)(locale, variant), className: (0, clsx_1.default)("navds-date__modal", {
             "navds-date__nested-modal": isInModal,
             "navds-date": variant === "month",
         }), closeOnBackdropClick: true },

package/esm/date/parts/DateWrapper.js

@@ -15,7 +15,10 @@ export const DateWrapper = ({ open, children, onClose, anchor, locale, variant,
                 "navds-date": variant === "month",
             }), flip: false }, popoverProps), children));
     }
-    return (React.createElement(Modal, { ref: modalRef, open: open, onClose: onClose, "aria-label": modalLabel(locale, variant), className: cl("navds-date__modal", {
+    return (React.createElement(Modal, { ref: modalRef, open: open, onClose: (event) => {
+            event.stopPropagation();
+            onClose();
+        }, "aria-label": modalLabel(locale, variant), className: cl("navds-date__modal", {
             "navds-date__nested-modal": isInModal,
             "navds-date": variant === "month",
         }), closeOnBackdropClick: true },

package/esm/date/parts/DateWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateWrapper.js","sourceRoot":"","sources":["../../../src/date/parts/DateWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,qBAAqB,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAepE,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAC1B,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,MAAM,EACN,MAAM,EACN,OAAO,EACP,YAAY,GACK,EAAE,EAAE;IACrB,MAAM,QAAQ,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IACjD,MAAM,SAAS,GAAG,UAAU,CAAC,YAAY,CAAC,KAAK,IAAI,CAAC;IACpD,MAAM,SAAS,GACb,QAAQ,CAAC,+BAA+B,EAAE,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC;IAEhE,IAAI,SAAS,EAAE;QACb,OAAO,CACL,oBAAC,OAAO,kBACN,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,MAAM,EAChB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,SAAS,EAAC,cAAc,EACxB,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE;gBACnC,YAAY,EAAE,OAAO,KAAK,OAAO;aAClC,CAAC,EACF,IAAI,EAAE,KAAK,IACP,YAAY,GAEf,QAAQ,CACD,CACX,CAAC;KACH;IACD,OAAO,CACL,oBAAC,KAAK,IACJ,GAAG,EAAE,QAAQ,EACb,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,gBACJ,UAAU,CAAC,MAAM,EAAE,OAAO,CAAC,EACvC,SAAS,EAAE,EAAE,CAAC,mBAAmB,EAAE;YACjC,0BAA0B,EAAE,SAAS;YACrC,YAAY,EAAE,OAAO,KAAK,OAAO;SAClC,CAAC,EACF,oBAAoB;QAEpB,6BAAK,SAAS,EAAC,wBAAwB;YACpC,QAAQ;YACT,oBAAC,MAAM,IACL,OAAO,EAAC,UAAU,EAClB,OAAO,EAAE,GAAG,EAAE,WAAC,OAAA,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,OAAO,0CAAE,KAAK,EAAE,CAAA,EAAA,EACzC,IAAI,EAAC,OAAO,IAEX,qBAAqB,CAAC,MAAM,CAAC,CACvB,CACL,CACA,CACT,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"DateWrapper.js","sourceRoot":"","sources":["../../../src/date/parts/DateWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,qBAAqB,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAepE,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAC1B,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,MAAM,EACN,MAAM,EACN,OAAO,EACP,YAAY,GACK,EAAE,EAAE;IACrB,MAAM,QAAQ,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IACjD,MAAM,SAAS,GAAG,UAAU,CAAC,YAAY,CAAC,KAAK,IAAI,CAAC;IACpD,MAAM,SAAS,GACb,QAAQ,CAAC,+BAA+B,EAAE,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC;IAEhE,IAAI,SAAS,EAAE;QACb,OAAO,CACL,oBAAC,OAAO,kBACN,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,MAAM,EAChB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,SAAS,EAAC,cAAc,EACxB,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE;gBACnC,YAAY,EAAE,OAAO,KAAK,OAAO;aAClC,CAAC,EACF,IAAI,EAAE,KAAK,IACP,YAAY,GAEf,QAAQ,CACD,CACX,CAAC;KACH;IACD,OAAO,CACL,oBAAC,KAAK,IACJ,GAAG,EAAE,QAAQ,EACb,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;YACjB,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,OAAO,EAAE,CAAC;QACZ,CAAC,gBACW,UAAU,CAAC,MAAM,EAAE,OAAO,CAAC,EACvC,SAAS,EAAE,EAAE,CAAC,mBAAmB,EAAE;YACjC,0BAA0B,EAAE,SAAS;YACrC,YAAY,EAAE,OAAO,KAAK,OAAO;SAClC,CAAC,EACF,oBAAoB;QAEpB,6BAAK,SAAS,EAAC,wBAAwB;YACpC,QAAQ;YACT,oBAAC,MAAM,IACL,OAAO,EAAC,UAAU,EAClB,OAAO,EAAE,GAAG,EAAE,WAAC,OAAA,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,OAAO,0CAAE,KAAK,EAAE,CAAA,EAAA,EACzC,IAAI,EAAC,OAAO,IAEX,qBAAqB,CAAC,MAAM,CAAC,CACvB,CACL,CACA,CACT,CAAC;AACJ,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "5.9.0",
+  "version": "5.9.2",
   "description": "Aksel react-components for NAV designsystem",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",
@@ -38,8 +38,8 @@
   },
   "dependencies": {
     "@floating-ui/react": "0.25.4",
-    "@navikt/aksel-icons": "^5.9.0",
-    "@navikt/ds-tokens": "^5.9.0",
+    "@navikt/aksel-icons": "^5.9.2",
+    "@navikt/ds-tokens": "^5.9.2",
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toggle-group": "1.0.0",
     "clsx": "^1.2.1",

package/src/date/datepicker/datepicker.stories.tsx

@@ -437,28 +437,36 @@ export const ModalDemo = () => {
     toDate: new Date("Feb 23 2024"),
     onDateChange: console.log,
   });
+  const [open, setOpen] = useState(true);
 
   return (
-    <Modal open header={{ heading: "Modal-demo" }}>
-      <Modal.Body style={{ position: "relative" }}>
-        <BodyLong spacing>
-          Lorem ipsum dolor sit, amet consectetur adipisicing elit.
-        </BodyLong>
-
-        <DatePicker {...datepickerProps} dropdownCaption>
-          <DatePicker.Input
-            {...inputProps}
-            label="Velg dato"
-            description="Format: dd.mm.yyyy"
-          />
-        </DatePicker>
-      </Modal.Body>
-      <Modal.Footer>
-        <Button>Neste</Button>
-        <Button variant="secondary">Tilbake</Button>
-        <Button variant="tertiary">Avbryt</Button>
-      </Modal.Footer>
-    </Modal>
+    <>
+      <Button onClick={() => setOpen(!open)}>Open modal</Button>
+      <Modal
+        open={open}
+        onClose={() => setOpen(false)}
+        header={{ heading: "Modal-demo" }}
+      >
+        <Modal.Body style={{ position: "relative" }}>
+          <BodyLong spacing>
+            Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+          </BodyLong>
+
+          <DatePicker {...datepickerProps} dropdownCaption>
+            <DatePicker.Input
+              {...inputProps}
+              label="Velg dato"
+              description="Format: dd.mm.yyyy"
+            />
+          </DatePicker>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button>Neste</Button>
+          <Button variant="secondary">Tilbake</Button>
+          <Button variant="tertiary">Avbryt</Button>
+        </Modal.Footer>
+      </Modal>
+    </>
   );
 };
 ModalDemo.parameters = { chromatic: { pauseAnimationAtEnd: true } };

package/src/date/parts/DateWrapper.tsx

@@ -57,7 +57,10 @@ export const DateWrapper = ({
     <Modal
       ref={modalRef}
       open={open}
-      onClose={onClose}
+      onClose={(event) => {
+        event.stopPropagation();
+        onClose();
+      }}
       aria-label={modalLabel(locale, variant)}
       className={cl("navds-date__modal", {
         "navds-date__nested-modal": isInModal,

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,
+        },
+      },
+    },
+  },
+};