@navikt/ds-react 6.1.0 → 6.1.1

package/cjs/modal/Modal.js

@@ -102,7 +102,7 @@ const dialog_polyfill_1 = __importStar(require("./dialog-polyfill"));
  */
 exports.Modal = (0, react_2.forwardRef)((_a, ref) => {
     var _b, _c;
-    var { header, children, open, onBeforeClose, onCancel, closeOnBackdropClick, width, portal, className, "aria-labelledby": ariaLabelledby, style, onClick } = _a, rest = __rest(_a, ["header", "children", "open", "onBeforeClose", "onCancel", "closeOnBackdropClick", "width", "portal", "className", "aria-labelledby", "style", "onClick"]);
+    var { header, children, open, onBeforeClose, onCancel, closeOnBackdropClick, width, portal, className, "aria-labelledby": ariaLabelledby, style, onClick, onMouseDown } = _a, rest = __rest(_a, ["header", "children", "open", "onBeforeClose", "onCancel", "closeOnBackdropClick", "width", "portal", "className", "aria-labelledby", "style", "onClick", "onMouseDown"]);
     const modalRef = (0, react_2.useRef)(null);
     const mergedRef = (0, useMergeRefs_1.useMergeRefs)(modalRef, ref);
     const ariaLabelId = (0, hooks_1.useId)();
@@ -148,16 +148,30 @@ exports.Modal = (0, react_2.forwardRef)((_a, ref) => {
         [`navds-modal--${width}`]: isWidthPreset,
     });
     const mergedStyle = Object.assign(Object.assign({}, style), (!isWidthPreset ? { width } : {}));
+    const mouseClickStart = (0, react_2.useRef)({
+        clientX: 0,
+        clientY: 0,
+    });
+    const handleModalMouseDown = (event) => {
+        mouseClickStart.current = event;
+    };
+    const shouldHandleModalClick = closeOnBackdropClick && !dialog_polyfill_1.needPolyfill;
     /**
      * @note `closeOnBackdropClick` has issues on polyfill when nesting modals (DatePicker)
      */
-    const handleModalClick = (event) => {
-        if (closeOnBackdropClick &&
-            !dialog_polyfill_1.needPolyfill &&
-            event.target === modalRef.current &&
-            (!onBeforeClose || onBeforeClose() !== false)) {
-            modalRef.current.close();
+    const handleModalClick = (endEvent) => {
+        if (endEvent.target !== modalRef.current) {
+            return;
+        }
+        const modalRect = modalRef.current.getBoundingClientRect();
+        if ((0, ModalUtils_1.coordsAreInside)(mouseClickStart.current, modalRect) ||
+            (0, ModalUtils_1.coordsAreInside)(endEvent, modalRect)) {
+            return;
+        }
+        if (onBeforeClose !== undefined && onBeforeClose() === false) {
+            return;
         }
+        modalRef.current.close();
     };
     /**
      * @note onCancel fires when you press `Esc`
@@ -170,7 +184,11 @@ exports.Modal = (0, react_2.forwardRef)((_a, ref) => {
         : ariaLabelledby;
     const component = (
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
-    react_2.default.createElement("dialog", Object.assign({}, rest, { ref: mergedRef, className: mergedClassName, style: mergedStyle, onCancel: (0, composeEventHandlers_1.composeEventHandlers)(onCancel, handleModalCancel), onClick: (0, composeEventHandlers_1.composeEventHandlers)(onClick, handleModalClick), "aria-labelledby": mergedAriaLabelledBy }),
+    react_2.default.createElement("dialog", Object.assign({}, rest, { ref: mergedRef, className: mergedClassName, style: mergedStyle, onCancel: (0, composeEventHandlers_1.composeEventHandlers)(onCancel, handleModalCancel), onClick: shouldHandleModalClick
+            ? (0, composeEventHandlers_1.composeEventHandlers)(onClick, handleModalClick)
+            : onClick, onMouseDown: shouldHandleModalClick
+            ? (0, composeEventHandlers_1.composeEventHandlers)(onMouseDown, handleModalMouseDown)
+            : onMouseDown, "aria-labelledby": mergedAriaLabelledBy }),
         react_2.default.createElement(Modal_context_1.ModalContextProvider, { closeHandler: (0, ModalUtils_1.getCloseHandler)(modalRef, header, onBeforeClose), ref: modalRef },
             header && (react_2.default.createElement(ModalHeader_1.default, null,
                 header.label && (react_2.default.createElement(typography_1.Detail, { className: "navds-modal__label" }, header.label)),

package/cjs/modal/Modal.js.map

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

package/cjs/modal/ModalHeader.js

@@ -46,7 +46,7 @@ const ModalHeader = (0, react_1.forwardRef)((_a, ref) => {
     var { children, className, closeButton = true } = _a, rest = __rest(_a, ["children", "className", "closeButton"]);
     const context = (0, Modal_context_1.useModalContext)();
     return (react_1.default.createElement("div", Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-modal__header", className) }),
-        context.closeHandler && closeButton && (react_1.default.createElement(button_1.Button, { type: "button", className: "navds-modal__button", size: "small", variant: "tertiary-neutral", onClick: context.closeHandler, icon: react_1.default.createElement(aksel_icons_1.XMarkIcon, { title: "Lukk modalvindu" }) })),
+        context.closeHandler && closeButton && (react_1.default.createElement(button_1.Button, { type: "button", className: "navds-modal__button", size: "small", variant: "tertiary-neutral", onClick: context.closeHandler, icon: react_1.default.createElement(aksel_icons_1.XMarkIcon, { title: "Lukk" }) })),
         children));
 });
 exports.default = ModalHeader;

package/cjs/modal/ModalHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalHeader.js","sourceRoot":"","sources":["../../src/modal/ModalHeader.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAAsB;AACtB,+CAA0C;AAC1C,qDAAgD;AAChD,sCAAmC;AACnC,mDAAkD;AAWlD,MAAM,WAAW,GAAG,IAAA,kBAAU,EAC5B,CAAC,EAAoD,EAAE,GAAG,EAAE,EAAE;QAA7D,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,GAAG,IAAI,OAAW,EAAN,IAAI,cAAlD,wCAAoD,CAAF;IACjD,MAAM,OAAO,GAAG,IAAA,+BAAe,GAAE,CAAC;IAElC,OAAO,CACL,uDAAS,IAAI,IAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAA,cAAE,EAAC,qBAAqB,EAAE,SAAS,CAAC;QACrE,OAAO,CAAC,YAAY,IAAI,WAAW,IAAI,CACtC,8BAAC,eAAM,IACL,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,qBAAqB,EAC/B,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,kBAAkB,EAC1B,OAAO,EAAE,OAAO,CAAC,YAAY,EAC7B,IAAI,EAAE,8BAAC,uBAAS,IAAC,KAAK,EAAC,iBAAiB,GAAG,GAC3C,CACH;QACA,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,kBAAe,WAAW,CAAC"}
+{"version":3,"file":"ModalHeader.js","sourceRoot":"","sources":["../../src/modal/ModalHeader.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAAsB;AACtB,+CAA0C;AAC1C,qDAAgD;AAChD,sCAAmC;AACnC,mDAAkD;AAWlD,MAAM,WAAW,GAAG,IAAA,kBAAU,EAC5B,CAAC,EAAoD,EAAE,GAAG,EAAE,EAAE;QAA7D,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,GAAG,IAAI,OAAW,EAAN,IAAI,cAAlD,wCAAoD,CAAF;IACjD,MAAM,OAAO,GAAG,IAAA,+BAAe,GAAE,CAAC;IAElC,OAAO,CACL,uDAAS,IAAI,IAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAA,cAAE,EAAC,qBAAqB,EAAE,SAAS,CAAC;QACrE,OAAO,CAAC,YAAY,IAAI,WAAW,IAAI,CACtC,8BAAC,eAAM,IACL,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,qBAAqB,EAC/B,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,kBAAkB,EAC1B,OAAO,EAAE,OAAO,CAAC,YAAY,EAC7B,IAAI,EAAE,8BAAC,uBAAS,IAAC,KAAK,EAAC,MAAM,GAAG,GAChC,CACH;QACA,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,kBAAe,WAAW,CAAC"}

package/cjs/modal/ModalUtils.d.ts

@@ -1,5 +1,10 @@
 import React from "react";
 import type { ModalProps } from "./types";
+export interface MouseCoordinates {
+    clientX: number;
+    clientY: number;
+}
+export declare const coordsAreInside: ({ clientX, clientY }: MouseCoordinates, { left, top, right, bottom }: DOMRect) => boolean;
 export declare function getCloseHandler(modalRef: React.RefObject<HTMLDialogElement>, header: ModalProps["header"], onBeforeClose: ModalProps["onBeforeClose"]): (() => false | void | undefined) | undefined;
 export declare const BODY_CLASS = "navds-modal__document-body";
 export declare function useBodyScrollLock(modalRef: React.RefObject<HTMLDialogElement>, portalNode: HTMLElement | null, isNested: boolean): void;

package/cjs/modal/ModalUtils.js

@@ -3,8 +3,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useBodyScrollLock = exports.BODY_CLASS = exports.getCloseHandler = void 0;
+exports.useBodyScrollLock = exports.BODY_CLASS = exports.getCloseHandler = exports.coordsAreInside = void 0;
 const react_1 = __importDefault(require("react"));
+const coordsAreInside = ({ clientX, clientY }, { left, top, right, bottom }) => {
+    if (clientX < left || clientY < top)
+        return false;
+    if (clientX > right || clientY > bottom)
+        return false;
+    return true;
+};
+exports.coordsAreInside = coordsAreInside;
 function getCloseHandler(modalRef, header, onBeforeClose) {
     if (header && header.closeButton === false)
         return undefined;

package/cjs/modal/ModalUtils.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalUtils.js","sourceRoot":"","sources":["../../src/modal/ModalUtils.ts"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAG1B,SAAgB,eAAe,CAC7B,QAA4C,EAC5C,MAA4B,EAC5B,aAA0C;IAE1C,IAAI,MAAM,IAAI,MAAM,CAAC,WAAW,KAAK,KAAK;QAAE,OAAO,SAAS,CAAC;IAC7D,IAAI,aAAa,EAAE,CAAC;QAClB,OAAO,GAAG,EAAE,WAAC,OAAA,aAAa,EAAE,KAAK,KAAK,KAAI,MAAA,QAAQ,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAA,CAAA,EAAA,CAAC;IACtE,CAAC;IACD,OAAO,GAAG,EAAE,WAAC,OAAA,MAAA,QAAQ,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAA,EAAA,CAAC;AACzC,CAAC;AAVD,0CAUC;AAEY,QAAA,UAAU,GAAG,4BAA4B,CAAC;AAEvD,SAAgB,iBAAiB,CAC/B,QAA4C,EAC5C,UAA8B,EAC9B,QAAiB;IAEjB,eAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,QAAQ;YAAE,OAAO;QACrB,IAAI,CAAC,QAAQ,CAAC,OAAO,IAAI,CAAC,UAAU;YAAE,OAAO,CAAC,kEAAkE;QAChH,IAAI,QAAQ,CAAC,OAAO,CAAC,IAAI;YAAE,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,kBAAU,CAAC,CAAC,CAAC,mCAAmC;QAEvG,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE;;YACzC,IAAI,MAAA,QAAQ,CAAC,OAAO,0CAAE,IAAI;gBAAE,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,kBAAU,CAAC,CAAC;;gBAC/D,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,kBAAU,CAAC,CAAC;QAClD,CAAC,CAAC,CAAC;QACH,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,OAAO,EAAE;YACjC,UAAU,EAAE,IAAI;YAChB,eAAe,EAAE,CAAC,MAAM,CAAC;SAC1B,CAAC,CAAC;QACH,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,UAAU,EAAE,CAAC;YACtB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,kBAAU,CAAC,CAAC,CAAC,gDAAgD;QAC9F,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,QAAQ,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC;AACvC,CAAC;AAvBD,8CAuBC"}
+{"version":3,"file":"ModalUtils.js","sourceRoot":"","sources":["../../src/modal/ModalUtils.ts"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAQnB,MAAM,eAAe,GAAG,CAC7B,EAAE,OAAO,EAAE,OAAO,EAAoB,EACtC,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAW,EACrC,EAAE;IACF,IAAI,OAAO,GAAG,IAAI,IAAI,OAAO,GAAG,GAAG;QAAE,OAAO,KAAK,CAAC;IAClD,IAAI,OAAO,GAAG,KAAK,IAAI,OAAO,GAAG,MAAM;QAAE,OAAO,KAAK,CAAC;IACtD,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAPW,QAAA,eAAe,mBAO1B;AAEF,SAAgB,eAAe,CAC7B,QAA4C,EAC5C,MAA4B,EAC5B,aAA0C;IAE1C,IAAI,MAAM,IAAI,MAAM,CAAC,WAAW,KAAK,KAAK;QAAE,OAAO,SAAS,CAAC;IAC7D,IAAI,aAAa,EAAE,CAAC;QAClB,OAAO,GAAG,EAAE,WAAC,OAAA,aAAa,EAAE,KAAK,KAAK,KAAI,MAAA,QAAQ,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAA,CAAA,EAAA,CAAC;IACtE,CAAC;IACD,OAAO,GAAG,EAAE,WAAC,OAAA,MAAA,QAAQ,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAA,EAAA,CAAC;AACzC,CAAC;AAVD,0CAUC;AAEY,QAAA,UAAU,GAAG,4BAA4B,CAAC;AAEvD,SAAgB,iBAAiB,CAC/B,QAA4C,EAC5C,UAA8B,EAC9B,QAAiB;IAEjB,eAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,QAAQ;YAAE,OAAO;QACrB,IAAI,CAAC,QAAQ,CAAC,OAAO,IAAI,CAAC,UAAU;YAAE,OAAO,CAAC,kEAAkE;QAChH,IAAI,QAAQ,CAAC,OAAO,CAAC,IAAI;YAAE,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,kBAAU,CAAC,CAAC,CAAC,mCAAmC;QAEvG,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE;;YACzC,IAAI,MAAA,QAAQ,CAAC,OAAO,0CAAE,IAAI;gBAAE,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,kBAAU,CAAC,CAAC;;gBAC/D,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,kBAAU,CAAC,CAAC;QAClD,CAAC,CAAC,CAAC;QACH,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,OAAO,EAAE;YACjC,UAAU,EAAE,IAAI;YAChB,eAAe,EAAE,CAAC,MAAM,CAAC;SAC1B,CAAC,CAAC;QACH,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,UAAU,EAAE,CAAC;YACtB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,kBAAU,CAAC,CAAC,CAAC,gDAAgD;QAC9F,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,QAAQ,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC;AACvC,CAAC;AAvBD,8CAuBC"}

package/esm/modal/Modal.js

@@ -23,7 +23,7 @@ import { ModalContextProvider, useModalContext } from "./Modal.context.js";
 import ModalBody from "./ModalBody.js";
 import ModalFooter from "./ModalFooter.js";
 import ModalHeader from "./ModalHeader.js";
-import { getCloseHandler, useBodyScrollLock } from "./ModalUtils.js";
+import { coordsAreInside, getCloseHandler, useBodyScrollLock, } from "./ModalUtils.js";
 import dialogPolyfill, { needPolyfill } from "./dialog-polyfill.js";
 /**
  * A component that displays a modal dialog.
@@ -73,7 +73,7 @@ import dialogPolyfill, { needPolyfill } from "./dialog-polyfill.js";
  */
 export const Modal = forwardRef((_a, ref) => {
     var _b, _c;
-    var { header, children, open, onBeforeClose, onCancel, closeOnBackdropClick, width, portal, className, "aria-labelledby": ariaLabelledby, style, onClick } = _a, rest = __rest(_a, ["header", "children", "open", "onBeforeClose", "onCancel", "closeOnBackdropClick", "width", "portal", "className", "aria-labelledby", "style", "onClick"]);
+    var { header, children, open, onBeforeClose, onCancel, closeOnBackdropClick, width, portal, className, "aria-labelledby": ariaLabelledby, style, onClick, onMouseDown } = _a, rest = __rest(_a, ["header", "children", "open", "onBeforeClose", "onCancel", "closeOnBackdropClick", "width", "portal", "className", "aria-labelledby", "style", "onClick", "onMouseDown"]);
     const modalRef = useRef(null);
     const mergedRef = useMergeRefs(modalRef, ref);
     const ariaLabelId = useId();
@@ -119,16 +119,30 @@ export const Modal = forwardRef((_a, ref) => {
         [`navds-modal--${width}`]: isWidthPreset,
     });
     const mergedStyle = Object.assign(Object.assign({}, style), (!isWidthPreset ? { width } : {}));
+    const mouseClickStart = useRef({
+        clientX: 0,
+        clientY: 0,
+    });
+    const handleModalMouseDown = (event) => {
+        mouseClickStart.current = event;
+    };
+    const shouldHandleModalClick = closeOnBackdropClick && !needPolyfill;
     /**
      * @note `closeOnBackdropClick` has issues on polyfill when nesting modals (DatePicker)
      */
-    const handleModalClick = (event) => {
-        if (closeOnBackdropClick &&
-            !needPolyfill &&
-            event.target === modalRef.current &&
-            (!onBeforeClose || onBeforeClose() !== false)) {
-            modalRef.current.close();
+    const handleModalClick = (endEvent) => {
+        if (endEvent.target !== modalRef.current) {
+            return;
+        }
+        const modalRect = modalRef.current.getBoundingClientRect();
+        if (coordsAreInside(mouseClickStart.current, modalRect) ||
+            coordsAreInside(endEvent, modalRect)) {
+            return;
+        }
+        if (onBeforeClose !== undefined && onBeforeClose() === false) {
+            return;
         }
+        modalRef.current.close();
     };
     /**
      * @note onCancel fires when you press `Esc`
@@ -141,7 +155,11 @@ export const Modal = forwardRef((_a, ref) => {
         : ariaLabelledby;
     const component = (
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
-    React.createElement("dialog", Object.assign({}, rest, { ref: mergedRef, className: mergedClassName, style: mergedStyle, onCancel: composeEventHandlers(onCancel, handleModalCancel), onClick: composeEventHandlers(onClick, handleModalClick), "aria-labelledby": mergedAriaLabelledBy }),
+    React.createElement("dialog", Object.assign({}, rest, { ref: mergedRef, className: mergedClassName, style: mergedStyle, onCancel: composeEventHandlers(onCancel, handleModalCancel), onClick: shouldHandleModalClick
+            ? composeEventHandlers(onClick, handleModalClick)
+            : onClick, onMouseDown: shouldHandleModalClick
+            ? composeEventHandlers(onMouseDown, handleModalMouseDown)
+            : onMouseDown, "aria-labelledby": mergedAriaLabelledBy }),
         React.createElement(ModalContextProvider, { closeHandler: getCloseHandler(modalRef, header, onBeforeClose), ref: modalRef },
             header && (React.createElement(ModalHeader, null,
                 header.label && (React.createElement(Detail, { className: "navds-modal__label" }, header.label)),

package/esm/modal/Modal.js.map

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

package/esm/modal/ModalHeader.js

@@ -18,7 +18,7 @@ const ModalHeader = forwardRef((_a, ref) => {
     var { children, className, closeButton = true } = _a, rest = __rest(_a, ["children", "className", "closeButton"]);
     const context = useModalContext();
     return (React.createElement("div", Object.assign({}, rest, { ref: ref, className: cl("navds-modal__header", className) }),
-        context.closeHandler && closeButton && (React.createElement(Button, { type: "button", className: "navds-modal__button", size: "small", variant: "tertiary-neutral", onClick: context.closeHandler, icon: React.createElement(XMarkIcon, { title: "Lukk modalvindu" }) })),
+        context.closeHandler && closeButton && (React.createElement(Button, { type: "button", className: "navds-modal__button", size: "small", variant: "tertiary-neutral", onClick: context.closeHandler, icon: React.createElement(XMarkIcon, { title: "Lukk" }) })),
         children));
 });
 export default ModalHeader;

package/esm/modal/ModalHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalHeader.js","sourceRoot":"","sources":["../../src/modal/ModalHeader.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAWlD,MAAM,WAAW,GAAG,UAAU,CAC5B,CAAC,EAAoD,EAAE,GAAG,EAAE,EAAE;QAA7D,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,GAAG,IAAI,OAAW,EAAN,IAAI,cAAlD,wCAAoD,CAAF;IACjD,MAAM,OAAO,GAAG,eAAe,EAAE,CAAC;IAElC,OAAO,CACL,6CAAS,IAAI,IAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC;QACrE,OAAO,CAAC,YAAY,IAAI,WAAW,IAAI,CACtC,oBAAC,MAAM,IACL,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,qBAAqB,EAC/B,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,kBAAkB,EAC1B,OAAO,EAAE,OAAO,CAAC,YAAY,EAC7B,IAAI,EAAE,oBAAC,SAAS,IAAC,KAAK,EAAC,iBAAiB,GAAG,GAC3C,CACH;QACA,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ModalHeader.js","sourceRoot":"","sources":["../../src/modal/ModalHeader.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAWlD,MAAM,WAAW,GAAG,UAAU,CAC5B,CAAC,EAAoD,EAAE,GAAG,EAAE,EAAE;QAA7D,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,GAAG,IAAI,OAAW,EAAN,IAAI,cAAlD,wCAAoD,CAAF;IACjD,MAAM,OAAO,GAAG,eAAe,EAAE,CAAC;IAElC,OAAO,CACL,6CAAS,IAAI,IAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC;QACrE,OAAO,CAAC,YAAY,IAAI,WAAW,IAAI,CACtC,oBAAC,MAAM,IACL,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,qBAAqB,EAC/B,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,kBAAkB,EAC1B,OAAO,EAAE,OAAO,CAAC,YAAY,EAC7B,IAAI,EAAE,oBAAC,SAAS,IAAC,KAAK,EAAC,MAAM,GAAG,GAChC,CACH;QACA,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/esm/modal/ModalUtils.d.ts

@@ -1,5 +1,10 @@
 import React from "react";
 import type { ModalProps } from "./types.js";
+export interface MouseCoordinates {
+    clientX: number;
+    clientY: number;
+}
+export declare const coordsAreInside: ({ clientX, clientY }: MouseCoordinates, { left, top, right, bottom }: DOMRect) => boolean;
 export declare function getCloseHandler(modalRef: React.RefObject<HTMLDialogElement>, header: ModalProps["header"], onBeforeClose: ModalProps["onBeforeClose"]): (() => false | void | undefined) | undefined;
 export declare const BODY_CLASS = "navds-modal__document-body";
 export declare function useBodyScrollLock(modalRef: React.RefObject<HTMLDialogElement>, portalNode: HTMLElement | null, isNested: boolean): void;

package/esm/modal/ModalUtils.js

@@ -1,4 +1,11 @@
 import React from "react";
+export const coordsAreInside = ({ clientX, clientY }, { left, top, right, bottom }) => {
+    if (clientX < left || clientY < top)
+        return false;
+    if (clientX > right || clientY > bottom)
+        return false;
+    return true;
+};
 export function getCloseHandler(modalRef, header, onBeforeClose) {
     if (header && header.closeButton === false)
         return undefined;

package/esm/modal/ModalUtils.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalUtils.js","sourceRoot":"","sources":["../../src/modal/ModalUtils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,UAAU,eAAe,CAC7B,QAA4C,EAC5C,MAA4B,EAC5B,aAA0C;IAE1C,IAAI,MAAM,IAAI,MAAM,CAAC,WAAW,KAAK,KAAK;QAAE,OAAO,SAAS,CAAC;IAC7D,IAAI,aAAa,EAAE,CAAC;QAClB,OAAO,GAAG,EAAE,WAAC,OAAA,aAAa,EAAE,KAAK,KAAK,KAAI,MAAA,QAAQ,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAA,CAAA,EAAA,CAAC;IACtE,CAAC;IACD,OAAO,GAAG,EAAE,WAAC,OAAA,MAAA,QAAQ,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAA,EAAA,CAAC;AACzC,CAAC;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,4BAA4B,CAAC;AAEvD,MAAM,UAAU,iBAAiB,CAC/B,QAA4C,EAC5C,UAA8B,EAC9B,QAAiB;IAEjB,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,QAAQ;YAAE,OAAO;QACrB,IAAI,CAAC,QAAQ,CAAC,OAAO,IAAI,CAAC,UAAU;YAAE,OAAO,CAAC,kEAAkE;QAChH,IAAI,QAAQ,CAAC,OAAO,CAAC,IAAI;YAAE,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,mCAAmC;QAEvG,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE;;YACzC,IAAI,MAAA,QAAQ,CAAC,OAAO,0CAAE,IAAI;gBAAE,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;;gBAC/D,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;QAClD,CAAC,CAAC,CAAC;QACH,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,OAAO,EAAE;YACjC,UAAU,EAAE,IAAI;YAChB,eAAe,EAAE,CAAC,MAAM,CAAC;SAC1B,CAAC,CAAC;QACH,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,UAAU,EAAE,CAAC;YACtB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,gDAAgD;QAC9F,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,QAAQ,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC;AACvC,CAAC"}
+{"version":3,"file":"ModalUtils.js","sourceRoot":"","sources":["../../src/modal/ModalUtils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,MAAM,CAAC,MAAM,eAAe,GAAG,CAC7B,EAAE,OAAO,EAAE,OAAO,EAAoB,EACtC,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAW,EACrC,EAAE;IACF,IAAI,OAAO,GAAG,IAAI,IAAI,OAAO,GAAG,GAAG;QAAE,OAAO,KAAK,CAAC;IAClD,IAAI,OAAO,GAAG,KAAK,IAAI,OAAO,GAAG,MAAM;QAAE,OAAO,KAAK,CAAC;IACtD,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,MAAM,UAAU,eAAe,CAC7B,QAA4C,EAC5C,MAA4B,EAC5B,aAA0C;IAE1C,IAAI,MAAM,IAAI,MAAM,CAAC,WAAW,KAAK,KAAK;QAAE,OAAO,SAAS,CAAC;IAC7D,IAAI,aAAa,EAAE,CAAC;QAClB,OAAO,GAAG,EAAE,WAAC,OAAA,aAAa,EAAE,KAAK,KAAK,KAAI,MAAA,QAAQ,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAA,CAAA,EAAA,CAAC;IACtE,CAAC;IACD,OAAO,GAAG,EAAE,WAAC,OAAA,MAAA,QAAQ,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAA,EAAA,CAAC;AACzC,CAAC;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,4BAA4B,CAAC;AAEvD,MAAM,UAAU,iBAAiB,CAC/B,QAA4C,EAC5C,UAA8B,EAC9B,QAAiB;IAEjB,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,QAAQ;YAAE,OAAO;QACrB,IAAI,CAAC,QAAQ,CAAC,OAAO,IAAI,CAAC,UAAU;YAAE,OAAO,CAAC,kEAAkE;QAChH,IAAI,QAAQ,CAAC,OAAO,CAAC,IAAI;YAAE,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,mCAAmC;QAEvG,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE;;YACzC,IAAI,MAAA,QAAQ,CAAC,OAAO,0CAAE,IAAI;gBAAE,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;;gBAC/D,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;QAClD,CAAC,CAAC,CAAC;QACH,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,OAAO,EAAE;YACjC,UAAU,EAAE,IAAI;YAChB,eAAe,EAAE,CAAC,MAAM,CAAC;SAC1B,CAAC,CAAC;QACH,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,UAAU,EAAE,CAAC;YACtB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,gDAAgD;QAC9F,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,QAAQ,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC;AACvC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "6.1.0",
+  "version": "6.1.1",
   "description": "React components from the Norwegian Labour and Welfare Administration.",
   "author": "Aksel, a team part of the Norwegian Labour and Welfare Administration.",
   "license": "MIT",
@@ -552,8 +552,8 @@
   },
   "dependencies": {
     "@floating-ui/react": "0.25.4",
-    "@navikt/aksel-icons": "^6.1.0",
-    "@navikt/ds-tokens": "^6.1.0",
+    "@navikt/aksel-icons": "^6.1.1",
+    "@navikt/ds-tokens": "^6.1.1",
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toggle-group": "1.0.0",
     "clsx": "^2.1.0",
@@ -567,7 +567,6 @@
     "@testing-library/user-event": "^14.2.0",
     "@types/faker": "5.5.8",
     "concurrently": "7.2.1",
-    "copyfiles": "^2.4.1",
     "faker": "5.5.3",
     "fast-glob": "3.2.11",
     "jsdom": "24.0.0",

package/src/link/stories/link.stories.tsx

@@ -1,15 +1,22 @@
+import { Meta } from "@storybook/react";
 import React from "react";
 import { PlusCircleFillIcon } from "@navikt/aksel-icons";
 import { Alert } from "../../alert";
 import { ConfirmationPanel } from "../../form/confirmation-panel";
+import { Box } from "../../layout/box";
+import { VStack } from "../../layout/stack";
 import { BodyLong } from "../../typography";
 import Link from "../Link";
 import { RandomIcon } from "./RandomIcon";
 
-export default {
+const meta: Meta<typeof Link> = {
   title: "ds-react/Link",
   component: Link,
+  parameters: {
+    chromatic: { disable: true },
+  },
 };
+export default meta;
 
 const LinkWrapper = ({
   children = "Ex aliqua incididunt",
@@ -27,53 +34,38 @@ const LinkWrapper = ({
       variant={variant as "action" | "neutral" | "subtle"}
       inlineText={inlineText}
     >
-      {iconLeft && (
-        <>
-          <RandomIcon />{" "}
-        </>
-      )}
+      {iconLeft && <RandomIcon />}
       {children}
-      {iconRight && (
-        <>
-          {" "}
-          <RandomIcon />
-        </>
-      )}
+      {iconRight && <RandomIcon />}
     </Link>{" "}
   </>
 );
 
 export const Default = {
-  render: ({ icon, inline }) => {
+  render: ({ icon, inline, underline }) => {
     const LinkD = () => (
-      <>
-        {" "}
-        <Link href="#" underline={!inline} inlineText={inline}>
-          {icon && <PlusCircleFillIcon />}Ex aliqua incididunt
-          {icon && <PlusCircleFillIcon />}
-        </Link>{" "}
-      </>
+      <Link href="#" underline={underline} inlineText={inline}>
+        {icon && <PlusCircleFillIcon />}Ex aliqua incididunt
+        {icon && <PlusCircleFillIcon />}
+      </Link>
     );
 
     if (inline) {
       return (
-        <div
-          className="colgap"
-          style={{
-            width: "800px",
-            border: "1px solid black",
-            borderRadius: "8px",
-          }}
+        <Box
+          borderWidth="1"
+          borderRadius="large"
+          padding="4"
+          style={{ maxWidth: "800px" }}
         >
           <BodyLong>
-            Incididunt laborum nisi nisi Lorem
-            <LinkD />
-            in. Laborum aute fugiat officia adipisicing non veniam dolor nulla
-            non ex consectetur fugiat eiusmod aute. Culpa sit aute est duis
-            minim in in voluptate velit fugiat. Laboris est id deserunt ut ea
-            Lorem eu. Esse elit laboris aute commodo sint laborum fugiat aliqua.
+            Incididunt laborum nisi nisi Lorem <LinkD /> in. Laborum aute fugiat
+            officia adipisicing non veniam dolor nulla non ex consectetur fugiat
+            eiusmod aute. Culpa sit aute est duis minim in in voluptate velit
+            fugiat. Laboris est id deserunt ut ea Lorem eu. Esse elit laboris
+            aute commodo sint laborum fugiat aliqua.
           </BodyLong>
-        </div>
+        </Box>
       );
     }
     return <LinkD />;
@@ -82,22 +74,21 @@ export const Default = {
   args: {
     icon: false,
     inline: false,
+    underline: true,
   },
 };
 
 export const InlineInsideBodyLong = {
   render: ({ iconLeft, iconRight }) => {
     return (
-      <div
-        className="colgap"
-        style={{
-          width: "800px",
-          border: "1px solid black",
-          borderRadius: "8px",
-        }}
+      <Box
+        borderWidth="1"
+        borderRadius="large"
+        padding="4"
+        style={{ width: "800px" }}
       >
         <style>{`.storybook-custom-spacing { white-space: pre;}`}</style>
-        <BodyLong>
+        <BodyLong spacing>
           <LinkWrapper underline iconLeft={iconLeft} iconRight={iconRight} />
           Eiusmod aute.
           <LinkWrapper underline iconLeft={iconLeft} iconRight={iconRight} />
@@ -119,7 +110,7 @@ export const InlineInsideBodyLong = {
           </LinkWrapper>
           {"     "}spacing.
         </BodyLong>
-      </div>
+      </Box>
     );
   },
   args: {
@@ -128,86 +119,186 @@ export const InlineInsideBodyLong = {
   },
 };
 
-const DemoLink = () => (
+export const Varianter = {
+  render: ({ iconLeft, iconRight }) => {
+    return (
+      <VStack gap="3">
+        {["action", "neutral", "subtle"].map((variant) => (
+          <div key={variant}>
+            <LinkWrapper
+              iconLeft={iconLeft}
+              iconRight={iconRight}
+              variant={variant}
+            />
+          </div>
+        ))}
+      </VStack>
+    );
+  },
+  args: {
+    iconLeft: false,
+    iconRight: false,
+  },
+};
+
+const LinkWithIcon = () => (
   <Link href="#">
-    <PlusCircleFillIcon aria-hidden /> Ex aliqua incididunt{" "}
+    <PlusCircleFillIcon aria-hidden />
+    Ex aliqua incididunt
     <PlusCircleFillIcon aria-hidden />
   </Link>
 );
 
-export const Icon = () => <DemoLink />;
+export const Icon = () => <LinkWithIcon />;
+
+const Variants = () => (
+  <VStack gap="3">
+    {["action", "neutral", "subtle"].map((variant) => (
+      <div key={variant}>
+        <LinkWrapper variant={variant} />
+      </div>
+    ))}
+  </VStack>
+);
 
-export const InAlert = () => {
-  return (
+export const Chromatic = () => (
+  <>
+    <h2>Default</h2>
+    <Link href="#">Ex aliqua incididunt</Link>
+
+    <h2>With icon</h2>
+    <LinkWithIcon />
+
+    <h2>Variants (no underline)</h2>
+    <Variants />
+
+    <h2>Inline</h2>
+    <BodyLong style={{ width: 500 }}>
+      Culpa sit aute est duis minim in in voluptate{" "}
+      <Link href="#" inlineText>
+        dette er en veldig lang lenke som brekker over flere linjer
+        <PlusCircleFillIcon aria-hidden />
+      </Link>{" "}
+      Culpa sit aute est duis minim in in voluptate velit Incididunt laborum
+      nisi nisi{" "}
+      <Link href="#" inlineText>
+        dette er en veldig lang lenke som brekker over flere linjer
+      </Link>{" "}
+      Lorem officia adipisicing non veniam occaecat commodo id ad aliquip.
+    </BodyLong>
+
+    <h2>In Alert</h2>
     <div className="colgap">
       <Alert variant="info">
-        <DemoLink />
+        <LinkWithIcon />
       </Alert>
       <Alert variant="success">
-        <DemoLink />
+        <LinkWithIcon />
       </Alert>
       <Alert variant="warning">
-        <DemoLink />
+        <LinkWithIcon />
       </Alert>
       <Alert variant="error">
-        <DemoLink />
+        <LinkWithIcon />
       </Alert>
     </div>
-  );
-};
 
-export const InConfirmationPanel = () => {
-  return (
+    <h2>In ConfirmationPanel</h2>
     <div className="colgap">
       <ConfirmationPanel label="demo">
-        <DemoLink />
+        <LinkWithIcon />
       </ConfirmationPanel>
       <ConfirmationPanel checked label="demo">
-        <DemoLink />
+        <LinkWithIcon />
       </ConfirmationPanel>
       <ConfirmationPanel error="demo" label="demo">
-        <DemoLink />
+        <LinkWithIcon />
+      </ConfirmationPanel>
+    </div>
+  </>
+);
+Chromatic.parameters = { chromatic: { disable: false } };
+
+export const ChromaticHover = () => (
+  <>
+    <h2>With icon</h2>
+    <LinkWithIcon />
+
+    <h2>Variants (no underline)</h2>
+    <Variants />
+
+    <h2>In Alert</h2>
+    <div className="colgap">
+      <Alert variant="info">
+        <LinkWithIcon />
+      </Alert>
+    </div>
+
+    <h2>In ConfirmationPanel</h2>
+    <div className="colgap">
+      <ConfirmationPanel checked label="demo">
+        <LinkWithIcon />
       </ConfirmationPanel>
     </div>
-  );
+  </>
+);
+ChromaticHover.parameters = {
+  chromatic: { disable: false },
+  pseudo: { hover: true },
 };
 
-export const Variants = {
-  render: ({ iconLeft, iconRight }) => {
-    return (
-      <div className="colgap">
-        {["action", "neutral", "subtle"].map((variant) => (
-          <>
-            <div>
-              <LinkWrapper
-                iconLeft={iconLeft}
-                iconRight={iconRight}
-                variant={variant}
-              />
-            </div>
-          </>
-        ))}
-      </div>
-    );
-  },
-  args: {
-    iconLeft: false,
-    iconRight: false,
-  },
+export const ChromaticFocusVisible = () => (
+  <>
+    <h2>With icon</h2>
+    <LinkWithIcon />
+
+    <h2>Variants (no underline)</h2>
+    <Variants />
+
+    <h2>In Alert</h2>
+    <div className="colgap">
+      <Alert variant="info">
+        <LinkWithIcon />
+      </Alert>
+    </div>
+
+    <h2>In ConfirmationPanel</h2>
+    <div className="colgap">
+      <ConfirmationPanel checked label="demo">
+        <LinkWithIcon />
+      </ConfirmationPanel>
+    </div>
+  </>
+);
+ChromaticFocusVisible.parameters = {
+  chromatic: { disable: false },
+  pseudo: { focusVisible: true },
 };
 
-export const InlineLink = {
-  render: () => (
-    <BodyLong>
-      Officia incididunt Culpa sit aute est duis minim in in voluptate velit
-      Incididunt laborum nisi nisi Lorem officia adipisicing non veniam{" "}
-      <Link href="#" inlineText={true}>
-        lenke til ny side
-        <PlusCircleFillIcon aria-hidden />
-      </Link>{" "}
-      Culpa sit aute est duis minim in in voluptate velit Incididunt laborum
-      nisi nisi Lorem officia adipisicing non veniam occaecat commodo id ad
-      aliquip.
-    </BodyLong>
-  ),
+export const ChromaticActive = () => (
+  <>
+    <h2>With icon</h2>
+    <LinkWithIcon />
+
+    <h2>Variants (no underline)</h2>
+    <Variants />
+
+    <h2>In Alert</h2>
+    <div className="colgap">
+      <Alert variant="info">
+        <LinkWithIcon />
+      </Alert>
+    </div>
+
+    <h2>In ConfirmationPanel</h2>
+    <div className="colgap">
+      <ConfirmationPanel checked label="demo">
+        <LinkWithIcon />
+      </ConfirmationPanel>
+    </div>
+  </>
+);
+ChromaticActive.parameters = {
+  chromatic: { disable: false },
+  pseudo: { active: true },
 };

package/src/modal/Modal.tsx

@@ -12,7 +12,12 @@ import { ModalContextProvider, useModalContext } from "./Modal.context";
 import ModalBody from "./ModalBody";
 import ModalFooter from "./ModalFooter";
 import ModalHeader from "./ModalHeader";
-import { getCloseHandler, useBodyScrollLock } from "./ModalUtils";
+import {
+  MouseCoordinates,
+  coordsAreInside,
+  getCloseHandler,
+  useBodyScrollLock,
+} from "./ModalUtils";
 import dialogPolyfill, { needPolyfill } from "./dialog-polyfill";
 import { ModalProps } from "./types";
 
@@ -86,6 +91,7 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
       "aria-labelledby": ariaLabelledby,
       style,
       onClick,
+      onMouseDown,
       ...rest
     }: ModalProps,
     ref,
@@ -146,18 +152,42 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
       ...(!isWidthPreset ? { width } : {}),
     };
 
+    const mouseClickStart = useRef<MouseCoordinates>({
+      clientX: 0,
+      clientY: 0,
+    });
+    const handleModalMouseDown: React.MouseEventHandler<HTMLDialogElement> = (
+      event,
+    ) => {
+      mouseClickStart.current = event;
+    };
+
+    const shouldHandleModalClick = closeOnBackdropClick && !needPolyfill;
+
     /**
      * @note `closeOnBackdropClick` has issues on polyfill when nesting modals (DatePicker)
      */
-    const handleModalClick = (event: React.MouseEvent<HTMLDialogElement>) => {
+    const handleModalClick = (
+      endEvent: React.MouseEvent<HTMLDialogElement>,
+    ) => {
+      if (endEvent.target !== modalRef.current) {
+        return;
+      }
+
+      const modalRect = modalRef.current.getBoundingClientRect();
+
       if (
-        closeOnBackdropClick &&
-        !needPolyfill &&
-        event.target === modalRef.current &&
-        (!onBeforeClose || onBeforeClose() !== false)
+        coordsAreInside(mouseClickStart.current, modalRect) ||
+        coordsAreInside(endEvent, modalRect)
       ) {
-        modalRef.current.close();
+        return;
+      }
+
+      if (onBeforeClose !== undefined && onBeforeClose() === false) {
+        return;
       }
+
+      modalRef.current.close();
     };
 
     /**
@@ -182,7 +212,16 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
         className={mergedClassName}
         style={mergedStyle}
         onCancel={composeEventHandlers(onCancel, handleModalCancel)}
-        onClick={composeEventHandlers(onClick, handleModalClick)}
+        onClick={
+          shouldHandleModalClick
+            ? composeEventHandlers(onClick, handleModalClick)
+            : onClick
+        }
+        onMouseDown={
+          shouldHandleModalClick
+            ? composeEventHandlers(onMouseDown, handleModalMouseDown)
+            : onMouseDown
+        }
         aria-labelledby={mergedAriaLabelledBy}
       >
         <ModalContextProvider

package/src/modal/ModalHeader.tsx

@@ -26,7 +26,7 @@ const ModalHeader = forwardRef<HTMLDivElement, ModalHeaderProps>(
             size="small"
             variant="tertiary-neutral"
             onClick={context.closeHandler}
-            icon={<XMarkIcon title="Lukk modalvindu" />}
+            icon={<XMarkIcon title="Lukk" />}
           />
         )}
         {children}

package/src/modal/ModalUtils.ts

@@ -1,6 +1,20 @@
 import React from "react";
 import type { ModalProps } from "./types";
 
+export interface MouseCoordinates {
+  clientX: number;
+  clientY: number;
+}
+
+export const coordsAreInside = (
+  { clientX, clientY }: MouseCoordinates,
+  { left, top, right, bottom }: DOMRect,
+) => {
+  if (clientX < left || clientY < top) return false;
+  if (clientX > right || clientY > bottom) return false;
+  return true;
+};
+
 export function getCloseHandler(
   modalRef: React.RefObject<HTMLDialogElement>,
   header: ModalProps["header"],