@skatteetaten/ds-overlays 0.8.0 → 1.1.0

package/Modal/index.esm.js

@@ -1,6 +1,6 @@
 import '../es.string.trim-9652bb40.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, useId, useRef, useImperativeHandle, useEffect } from 'react';
+import { forwardRef, useId, useRef, useImperativeHandle } from 'react';
 import { useTranslation } from 'react-i18next';
 import { IconButton } from '@skatteetaten/ds-buttons';
 import { dsI18n, SkatteetatenLogo, Separator, getCommonClassNameDefault } from '@skatteetaten/ds-core-utils';
@@ -31,6 +31,7 @@ const Modal = /*#__PURE__*/forwardRef(({
   padding: _padding = getModalPaddingDefault(),
   title,
   variant: _variant = getModalVariantDefault(),
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   shadowRootNode,
   onClose,
   children
@@ -42,29 +43,35 @@ const Modal = /*#__PURE__*/forwardRef(({
   } = useTranslation('ds_overlays', {
     i18n: dsI18n
   });
+  const statusFlagRef = useRef({
+    mouseDownCaptured: false
+  });
   const modalRef = useRef(null);
   useImperativeHandle(ref, () => modalRef == null ? void 0 : modalRef.current);
-  useEffect(() => {
-    if (!_dismissOnOutsideClick) {
+  const isClickOutside = event => {
+    if (!(event.target instanceof HTMLElement)) {
+      return true;
+    }
+    const rect = event.target.getBoundingClientRect();
+    return rect.left > event.clientX || rect.right < event.clientX || rect.top > event.clientY || rect.bottom < event.clientY;
+  };
+  const handleMouseEvent = event => {
+    if (!_dismissOnOutsideClick || !(event.target instanceof HTMLElement)) {
       return;
     }
-    const onClickOutside = event => {
-      const element = shadowRootNode ? shadowRootNode == null ? void 0 : shadowRootNode.activeElement : event.target;
-      if (!(event.target instanceof HTMLElement) || (element == null ? void 0 : element.tagName) !== 'DIALOG') {
-        return;
-      }
-      const rect = event.target.getBoundingClientRect();
-      if (rect.left > event.clientX || rect.right < event.clientX || rect.top > event.clientY || rect.bottom < event.clientY) {
+    if (event.type === 'mousedown') {
+      statusFlagRef.current.mouseDownCaptured = false;
+    }
+    if (isClickOutside(event)) {
+      if (event.type === 'mouseup' && statusFlagRef.current.mouseDownCaptured) {
         var _modalRef$current;
         onClose == null || onClose();
         (_modalRef$current = modalRef.current) == null || _modalRef$current.close();
+      } else {
+        statusFlagRef.current.mouseDownCaptured = true;
       }
-    };
-    document.addEventListener('click', onClickOutside, true);
-    return () => {
-      document.removeEventListener('click', onClickOutside, true);
-    };
-  }, [modalRef, _dismissOnOutsideClick, onClose, shadowRootNode]);
+    }
+  };
   const hideTitleClassName = hideTitle ? styles.srOnly : '';
   const hideOutlineClassName = _variant === 'plain' || _variant === 'important' ? styles.modalNoBorder : '';
   const paddingClassName = styles[`modalPadding${_padding.toUpperCase()}`];
@@ -78,12 +85,16 @@ const Modal = /*#__PURE__*/forwardRef(({
     "data-testid": dataTestId,
     "aria-labelledby": headingId,
     autoFocus: true,
-    onCancel: e => {
-      if (!_dismissOnEsc) {
+    /* Merk at onCancel kan ikke brukes til å hindre lukking fordi to trykk på esc lukker allikevel i chrome  */
+    onKeyDown: e => {
+      if (!_dismissOnEsc && e.key === 'Escape') {
         e.preventDefault();
+      } else {
+        onClose == null || onClose();
       }
-      onClose == null || onClose();
     },
+    onMouseUp: handleMouseEvent,
+    onMouseDown: handleMouseEvent,
     children: jsxs("div", {
       tabIndex: -1,
       className: styles.modalContainer,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@skatteetaten/ds-overlays",
   "groupId": "no.skatteetaten.aurora",
-  "version": "0.8.0",
+  "version": "1.1.0",
   "main": "./index.esm.js",
   "type": "module",
   "module": "./index.esm.js",
@@ -13,13 +13,13 @@
   "peerDependencies": {
     "i18next": "^23",
     "react": "^18",
-    "react-i18next": "^13",
-    "@skatteetaten/ds-core-utils": "*",
-    "@skatteetaten/ds-buttons": "*",
-    "@skatteetaten/ds-icons": "*",
-    "@skatteetaten/ds-typography": "*",
-    "@skatteetaten/ds-progress": "*",
-    "@floating-ui/react": "0.26.9"
+    "react-i18next": "^14",
+    "@skatteetaten/ds-core-utils": "1.1.0",
+    "@skatteetaten/ds-buttons": "1.1.0",
+    "@skatteetaten/ds-icons": "1.1.0",
+    "@skatteetaten/ds-typography": "1.1.0",
+    "@skatteetaten/ds-progress": "1.1.0",
+    "@floating-ui/react": "0.26.17"
   },
   "scripts": {}
 }