From 023ca3ccc969cef3868e6221152ca88925473942 Mon Sep 17 00:00:00 2001
From: H7GhosT <nord.doogee@gmail.com>
Date: Tue, 15 Mar 2022 22:34:50 +0200
Subject: [PATCH 1/2] Don't close modal when click mousedown is triggered
 inside modal

---
 src/components/organisms/Modal/Modal.tsx | 27 +++++++++---------------
 src/hooks/index.ts                       |  1 +
 src/hooks/usePopupClose.tsx              | 26 +++++++++++++++++++++++
 3 files changed, 37 insertions(+), 17 deletions(-)
 create mode 100644 src/hooks/usePopupClose.tsx

diff --git a/src/components/organisms/Modal/Modal.tsx b/src/components/organisms/Modal/Modal.tsx
index 6adecc97..1f51aa2a 100644
--- a/src/components/organisms/Modal/Modal.tsx
+++ b/src/components/organisms/Modal/Modal.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import cn from 'classnames';
-import { usePortal, useScrollToggler } from 'hooks';
+import { usePopupClose, usePortal, useScrollToggler } from 'hooks';
 import { Mask, Button } from 'components/atoms';
 import { ModalContent } from './ModalContent';
 import { ModalFooter } from './ModalFooter';
@@ -38,6 +38,14 @@ const Modal: React.FC<ModalProps> = ({
   const createPortal = usePortal('modal-portal');
   useScrollToggler(open);
 
+  const overlayRef = React.useRef<HTMLDivElement>(null);
+  usePopupClose(overlayRef, () => {
+    if (closeOnClickOutside) {
+      props.onClose?.();
+      setOpen(false);
+    }
+  });
+
   React.useEffect(() => setOpen(isOpen), [isOpen]);
 
   React.useEffect(() => {
@@ -54,18 +62,6 @@ const Modal: React.FC<ModalProps> = ({
     };
   }, []);
 
-  const onClickOutside = (ev: React.MouseEvent<HTMLDivElement, MouseEvent>): void => {
-    const target = ev.target as HTMLDivElement;
-
-    if (target && target.classList.contains('ebs-modal__wrapper')) {
-      if (props.onClose !== undefined) {
-        props.onClose();
-      }
-
-      setOpen(false);
-    }
-  };
-
   const showHeader = React.useMemo(() => header || title, [header, title]);
 
   return (
@@ -75,10 +71,7 @@ const Modal: React.FC<ModalProps> = ({
           <>
             <Mask />
 
-            <div
-              className={cn(`ebs-modal__wrapper`, className)}
-              {...(mask ? { ...props, onClick: closeOnClickOutside ? onClickOutside : undefined } : props)}
-            >
+            <div className={cn(`ebs-modal__wrapper`, className)} ref={overlayRef} {...props}>
               <div className={cn(`ebs-modal`, `ebs-modal__size--${size}`, { 'hide-header': !showHeader })}>
                 {showHeader ? (
                   <div className="ebs-modal__header">
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
index 0ee5f378..1783941e 100644
--- a/src/hooks/index.ts
+++ b/src/hooks/index.ts
@@ -3,3 +3,4 @@ export * from './useScrollToggler';
 export * from './useNotify';
 export * from './usePortal';
 export * from './useTheme';
+export * from './usePopupClose';
diff --git a/src/hooks/usePopupClose.tsx b/src/hooks/usePopupClose.tsx
new file mode 100644
index 00000000..9adf315a
--- /dev/null
+++ b/src/hooks/usePopupClose.tsx
@@ -0,0 +1,26 @@
+import React, { useRef } from 'react';
+
+export function usePopupClose(overlayRef: React.RefObject<Element>, callback: () => void): void {
+  // Need a ref to callback so it calls the up to date argument
+  const callbackRef = useRef(callback);
+  callbackRef.current = callback;
+
+  React.useEffect(() => {
+    let mousedownTarget: EventTarget | null = null;
+
+    const mouseDownListener = (e: Event): void => {
+      mousedownTarget = e.target;
+    };
+    const mouseUpListener = (e: Event): void => {
+      if (e.target === overlayRef.current && mousedownTarget === e.target) callbackRef.current();
+      mousedownTarget = null;
+    };
+    document.addEventListener('mousedown', mouseDownListener);
+    document.addEventListener('mouseup', mouseUpListener);
+
+    return () => {
+      document.removeEventListener('mousedown', mouseDownListener);
+      document.removeEventListener('mouseup', mouseUpListener);
+    };
+  }, []);
+}

From ca367dbc3d00ca2f5482f5248553d31aa9fd5980 Mon Sep 17 00:00:00 2001
From: H7GhosT <nord.doogee@gmail.com>
Date: Wed, 23 Mar 2022 17:58:41 +0200
Subject: [PATCH 2/2] Increment ebs-design version

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 795452fc..90ed5c7e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ebs-design",
-  "version": "0.0.1-beta.125",
+  "version": "0.0.1-beta.126",
   "description": "EBS Design System React UI elements.",
   "author": "EBS Integrator <contact@ebs-integrator.com> (https://ebs-integrator.com/)",
   "maintainers": [