Forbedre lesbarhet og fjern behov for midlertidige objekter

@navikt/core/react/src/modal/Modal.tsx

@@ -13,7 +13,8 @@ import ModalBody from "./ModalBody";
 import ModalFooter from "./ModalFooter";
 import ModalHeader from "./ModalHeader";
 import {
-  clickWasOutside,
+  MouseCoordinates,
+  coordsAreInside,
   getCloseHandler,
   useBodyScrollLock,
 } from "./ModalUtils";
@@ -151,33 +152,34 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
       ...(!isWidthPreset ? { width } : {}),
     };
 
-    const mouseClickStart = useRef({ x: 0, y: 0 });
+    const mouseClickStart = useRef<MouseCoordinates>({
+      clientX: 0,
+      clientY: 0,
+    });
     const handleModalMouseDown: React.MouseEventHandler<HTMLDialogElement> = (
       event,
     ) => {
-      mouseClickStart.current.x = event.clientX;
-      mouseClickStart.current.y = event.clientY;
+      mouseClickStart.current = event;
     };
 
     const shouldHandleModalClick = closeOnBackdropClick && !needPolyfill;
 
     /**
      * @note `closeOnBackdropClick` has issues on polyfill when nesting modals (DatePicker)
      */
-    const handleModalClick = (event: React.MouseEvent<HTMLDialogElement>) => {
-      if (event.target !== modalRef.current) {
+    const handleModalClick = (
+      endEvent: React.MouseEvent<HTMLDialogElement>,
+    ) => {
+      if (endEvent.target !== modalRef.current) {
         return;
       }
 
       const modalRect = modalRef.current.getBoundingClientRect();
 
-      if (!clickWasOutside(mouseClickStart.current, modalRect)) {
-        return;
-      }
-
-      const end = { x: event.clientX, y: event.clientY };
-
-      if (!clickWasOutside(end, modalRect)) {
+      if (
+        coordsAreInside(mouseClickStart.current, modalRect) ||
+        coordsAreInside(endEvent, modalRect)
+      ) {
         return;
       }
 

@navikt/core/react/src/modal/ModalUtils.ts

@@ -1,14 +1,19 @@
 import React from "react";
 import type { ModalProps } from "./types";
 
-export const clickWasOutside = (
-  cords: { x: number; y: number },
-  rect: DOMRect,
-) =>
-  cords.x < rect.x ||
-  cords.y < rect.y ||
-  cords.x > rect.x + rect.width ||
-  cords.y > rect.y + rect.height;
+export interface MouseCoordinates {
+  clientX: number;
+  clientY: number;
+}
+
+export const coordsAreInside = (
+  { clientX, clientY }: MouseCoordinates,
+  { x, y, width, height }: DOMRect,
+) => {
+  if (clientX < x || clientY < y) return false;
+  if (clientX > x + width || clientY > y + height) return false;
+  return true;
+};
 
 export function getCloseHandler(
   modalRef: React.RefObject<HTMLDialogElement>,