Merge pull request #64 from internxt/feat/add-stop-propagation-modal

[PB-4903]: add stopMouseDownPropagation prop to Modal component

Author: terrerox

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",

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);
@@ -73,6 +78,12 @@ const Modal = ({
     }
   };
 
+  const handleMouseDown = (e: React.MouseEvent) => {
+    if (stopMouseDownPropagation) {
+      e.stopPropagation();
+    }
+  };
+
   useEffect(() => {
     if (isOpen) {
       const timeout = setTimeout(() => {
@@ -128,7 +139,7 @@ const Modal = ({
   return (
     <>
       {showContent && (
-        <div className="m-0">
+        <div className="m-0" onMouseDown={handleMouseDown} role="dialog" aria-modal="true">
           <div
             className={`
               fixed

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="dialog"]');
+    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="dialog"]');
+    expect(modalWrapper).toBeInTheDocument();
+
+    fireEvent.mouseDown(modalWrapper!);
+
+    expect(parentHandler).toHaveBeenCalled();
+  });
 });

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

@@ -3,7 +3,9 @@
 exports[`Modal Component > should match snapshot when isOpen is true 1`] = `
 <div>
   <div
+    aria-modal="true"
     class="m-0"
+    role="dialog"
   >
     <div
       class="