From fb8b139a126ffa497431c14b24c1e45e0bac4d45 Mon Sep 17 00:00:00 2001
From: Francis Terrero <terrero0611@gmail.com>
Date: Mon, 6 Oct 2025 11:58:37 -0400
Subject: [PATCH 1/2] feat: update Modal component to include
 stopMouseDownPropagation prop and enhance tests

---
 package.json                                  |  2 +-
 src/components/modal/Modal.tsx                |  7 +++-
 src/components/modal/__test__/Modal.test.tsx  | 36 +++++++++++++++++++
 .../__snapshots__/Modal.test.tsx.snap         |  1 +
 4 files changed, 44 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 7a412d7..a27dc39 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@internxt/ui",
-  "version": "0.0.25",
+  "version": "0.0.26",
   "description": "Library of Internxt components",
   "repository": {
     "type": "git",
diff --git a/src/components/modal/Modal.tsx b/src/components/modal/Modal.tsx
index a0b4edb..f354e89 100644
--- a/src/components/modal/Modal.tsx
+++ b/src/components/modal/Modal.tsx
@@ -8,6 +8,7 @@ export interface ModalProps {
   className?: string;
   width?: string;
   preventClosing?: boolean;
+  stopMouseDownPropagation?: boolean;
 }
 
 /**
@@ -38,6 +39,9 @@ export interface ModalProps {
  * @property {boolean} [preventClosing=false]
  * - Optional flag to prevent the modal from closing when clicking outside or pressing the 'Escape' key.
  *
+ * @property {boolean} [stopMouseDownPropagation=false]
+ * - Optional flag to stop event propagation on mousedown events.
+ *
  * @returns {JSX.Element | null}
  * - The rendered Modal component, or `null` if `isOpen` is `false`.
  *
@@ -59,6 +63,7 @@ const Modal = ({
   className,
   width,
   preventClosing = false,
+  stopMouseDownPropagation = false,
 }: ModalProps): JSX.Element | null => {
   const modalRef = useRef<HTMLDivElement | null>(null);
   const [showContent, setShowContent] = useState(isOpen);
@@ -128,7 +133,7 @@ const Modal = ({
   return (
     <>
       {showContent && (
-        <div className="m-0">
+        <div className="m-0" onMouseDown={(e) => stopMouseDownPropagation && e.stopPropagation()} role='modal'>
           <div
             className={`
               fixed
diff --git a/src/components/modal/__test__/Modal.test.tsx b/src/components/modal/__test__/Modal.test.tsx
index 4322c5a..a5f3e18 100644
--- a/src/components/modal/__test__/Modal.test.tsx
+++ b/src/components/modal/__test__/Modal.test.tsx
@@ -207,4 +207,40 @@ describe('Modal Component', () => {
     expect(onClose1).not.toHaveBeenCalled();
     expect(onClose2).toHaveBeenCalled();
   });
+
+  it('should stop propagation when stopMouseDownPropagation is true', () => {
+    const parentHandler = vi.fn();
+    const { container } = render(
+      <div onMouseDown={parentHandler}>
+        <Modal isOpen={true} onClose={onCloseMock} stopMouseDownPropagation={true}>
+          <div>Modal Content</div>
+        </Modal>
+      </div>,
+    );
+
+    const modalWrapper = container.querySelector('[role="modal"]');
+    expect(modalWrapper).toBeInTheDocument();
+
+    fireEvent.mouseDown(modalWrapper!);
+
+    expect(parentHandler).not.toHaveBeenCalled();
+  });
+
+  it('should not stop propagation when stopMouseDownPropagation is false', () => {
+    const parentHandler = vi.fn();
+    const { container } = render(
+      <div onMouseDown={parentHandler}>
+        <Modal isOpen={true} onClose={onCloseMock} stopMouseDownPropagation={false}>
+          <div>Modal Content</div>
+        </Modal>
+      </div>,
+    );
+
+    const modalWrapper = container.querySelector('[role="modal"]');
+    expect(modalWrapper).toBeInTheDocument();
+
+    fireEvent.mouseDown(modalWrapper!);
+
+    expect(parentHandler).toHaveBeenCalled();
+  });
 });
diff --git a/src/components/modal/__test__/__snapshots__/Modal.test.tsx.snap b/src/components/modal/__test__/__snapshots__/Modal.test.tsx.snap
index 6a6c082..bad4e20 100644
--- a/src/components/modal/__test__/__snapshots__/Modal.test.tsx.snap
+++ b/src/components/modal/__test__/__snapshots__/Modal.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`Modal Component > should match snapshot when isOpen is true 1`] = `
 <div>
   <div
     class="m-0"
+    role="modal"
   >
     <div
       class="

From c090fb16acb2303d6559c777118751f0f9377198 Mon Sep 17 00:00:00 2001
From: Francis Terrero <terrero0611@gmail.com>
Date: Tue, 7 Oct 2025 20:56:45 -0400
Subject: [PATCH 2/2] refactor: optimize Modal mouseDown handler and improve
 ARIA compliance Extract inline mouseDown handler to prevent function
 recreation on each render and update role attribute from 'modal' to 'dialog'
 with aria-modal for proper accessibility standards.

---
 src/components/modal/Modal.tsx                            | 8 +++++++-
 src/components/modal/__test__/Modal.test.tsx              | 4 ++--
 .../modal/__test__/__snapshots__/Modal.test.tsx.snap      | 3 ++-
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/components/modal/Modal.tsx b/src/components/modal/Modal.tsx
index f354e89..d5d9921 100644
--- a/src/components/modal/Modal.tsx
+++ b/src/components/modal/Modal.tsx
@@ -78,6 +78,12 @@ const Modal = ({
     }
   };
 
+  const handleMouseDown = (e: React.MouseEvent) => {
+    if (stopMouseDownPropagation) {
+      e.stopPropagation();
+    }
+  };
+
   useEffect(() => {
     if (isOpen) {
       const timeout = setTimeout(() => {
@@ -133,7 +139,7 @@ const Modal = ({
   return (
     <>
       {showContent && (
-        <div className="m-0" onMouseDown={(e) => stopMouseDownPropagation && e.stopPropagation()} role='modal'>
+        <div className="m-0" onMouseDown={handleMouseDown} role="dialog" aria-modal="true">
           <div
             className={`
               fixed
diff --git a/src/components/modal/__test__/Modal.test.tsx b/src/components/modal/__test__/Modal.test.tsx
index a5f3e18..de90eac 100644
--- a/src/components/modal/__test__/Modal.test.tsx
+++ b/src/components/modal/__test__/Modal.test.tsx
@@ -218,7 +218,7 @@ describe('Modal Component', () => {
       </div>,
     );
 
-    const modalWrapper = container.querySelector('[role="modal"]');
+    const modalWrapper = container.querySelector('[role="dialog"]');
     expect(modalWrapper).toBeInTheDocument();
 
     fireEvent.mouseDown(modalWrapper!);
@@ -236,7 +236,7 @@ describe('Modal Component', () => {
       </div>,
     );
 
-    const modalWrapper = container.querySelector('[role="modal"]');
+    const modalWrapper = container.querySelector('[role="dialog"]');
     expect(modalWrapper).toBeInTheDocument();
 
     fireEvent.mouseDown(modalWrapper!);
diff --git a/src/components/modal/__test__/__snapshots__/Modal.test.tsx.snap b/src/components/modal/__test__/__snapshots__/Modal.test.tsx.snap
index bad4e20..ac071a2 100644
--- a/src/components/modal/__test__/__snapshots__/Modal.test.tsx.snap
+++ b/src/components/modal/__test__/__snapshots__/Modal.test.tsx.snap
@@ -3,8 +3,9 @@
 exports[`Modal Component > should match snapshot when isOpen is true 1`] = `
 <div>
   <div
+    aria-modal="true"
     class="m-0"
-    role="modal"
+    role="dialog"
   >
     <div
       class="