Merge pull request #49 from internxt/fix/PB-3511-close-modals

[PB-3511]:Fix/close multiple modals

Author: Jona-Internxt

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internxt/ui",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "description": "Library of Internxt components",
   "repository": {
     "type": "git",

src/components/modal/Modal.tsx

@@ -65,6 +65,14 @@ const Modal = ({
   const [transitionOpacity, setTransitionOpacity] = useState<string>('opacity-0');
   const [transitionScale, setTransitionScale] = useState<string>('scale-95');
 
+  const closeLastOpenModal = () => {
+    const openModals = document.querySelectorAll('[data-modal]');
+    const lastModal = openModals[openModals.length - 1];
+    if (modalRef.current === lastModal) {
+      onClose();
+    }
+  };
+
   useEffect(() => {
     if (isOpen) {
       const timeout = setTimeout(() => {
@@ -86,7 +94,8 @@ const Modal = ({
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
       if (modalRef.current && !modalRef.current.contains(event.target as Node) && !preventClosing) {
-        onClose();
+        event.preventDefault();
+        closeLastOpenModal();
       }
     };
 
@@ -102,7 +111,8 @@ const Modal = ({
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
       if (event.key === 'Escape' && !preventClosing) {
-        onClose();
+        event.preventDefault();
+        closeLastOpenModal();
       }
     };
 
@@ -116,14 +126,15 @@ const Modal = ({
   }, [isOpen, onClose, preventClosing]);
 
   return (
-    <>
+    <div className="m-0">
       {showContent && (
         <>
           <div
             className={`
               fixed
+              min-h-full
               inset-0
-              z-50
+              z-[9999]
               bg-highlight/40
               transition-opacity
               duration-150
@@ -136,7 +147,7 @@ const Modal = ({
             className={`
               fixed
               inset-0
-              z-50
+              z-[9999]
               flex
               min-h-full
               items-center
@@ -152,6 +163,7 @@ const Modal = ({
             <section
               data-testid={'ModalContent'}
               ref={modalRef}
+              data-modal
               className={`
                 ${width ?? 'w-full'}
                 ${maxWidth ?? 'max-w-lg'}
@@ -173,7 +185,7 @@ const Modal = ({
           </div>
         </>
       )}
-    </>
+    </div>
   );
 };
 

src/components/modal/__test__/Modal.test.tsx

@@ -186,4 +186,25 @@ describe('Modal Component', () => {
       expect(screen.queryByText('Modal Content')).not.toBeInTheDocument();
     });
   });
+
+  it('closeLastOpenModal should close only the last opened modal', () => {
+    const onClose1 = vi.fn();
+    const onClose2 = vi.fn();
+
+    render(
+      <>
+        <Modal isOpen={true} onClose={onClose1}>
+          <div data-testid="modal-1">Modal 1</div>
+        </Modal>
+        <Modal isOpen={true} onClose={onClose2}>
+          <div data-testid="modal-2">Modal 2</div>
+        </Modal>
+      </>,
+    );
+
+    fireEvent.mouseDown(document.body);
+
+    expect(onClose1).not.toHaveBeenCalled();
+    expect(onClose2).toHaveBeenCalled();
+  });
 });

src/components/modal/__test__/__snapshots__/Modal.test.tsx.snap

@@ -3,23 +3,27 @@
 exports[`Modal Component > should match snapshot when isOpen is true 1`] = `
 <div>
   <div
-    class="
+    class="m-0"
+  >
+    <div
+      class="
               fixed
+              min-h-full
               inset-0
-              z-50
+              z-[9999]
               bg-highlight/40
               transition-opacity
               duration-150
               ease-out
               opacity-0
               pointer-events-none           
             "
-  />
-  <div
-    class="
+    />
+    <div
+      class="
               fixed
               inset-0
-              z-50
+              z-[9999]
               flex
               min-h-full
               items-center
@@ -31,9 +35,9 @@ exports[`Modal Component > should match snapshot when isOpen is true 1`] = `
               opacity-0
               scale-95
             "
-  >
-    <section
-      class="
+    >
+      <section
+        class="
                 w-full
                 max-w-lg
                 p-5
@@ -48,28 +52,30 @@ exports[`Modal Component > should match snapshot when isOpen is true 1`] = `
                 opacity-0
                 scale-95
               "
-      data-testid="ModalContent"
-    >
-      <div
-        class="text-center"
+        data-modal="true"
+        data-testid="ModalContent"
       >
-        <h2
-          class="text-lg font-semibold"
-        >
-          Title
-        </h2>
-        <p
-          class="mt-2"
-        >
-          Modal Content
-        </p>
-        <button
-          class="mt-4 px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
+        <div
+          class="text-center"
         >
-          Close
-        </button>
-      </div>
-    </section>
+          <h2
+            class="text-lg font-semibold"
+          >
+            Title
+          </h2>
+          <p
+            class="mt-2"
+          >
+            Modal Content
+          </p>
+          <button
+            class="mt-4 px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
+          >
+            Close
+          </button>
+        </div>
+      </section>
+    </div>
   </div>
 </div>
 `;