Stop modelClose and modelOpen event bubbling of SwirlPdfReader

.changeset/weak-crabs-battle.md

@@ -0,0 +1,5 @@
+---
+"@getflip/swirl-components": patch
+---
+
+Stop modelClose and modelOpen events of swirl-pdf-reader from bubbling

packages/swirl-components/src/components/swirl-pdf-reader/swirl-pdf-reader.spec.tsx

@@ -118,6 +118,45 @@ describe("swirl-pdf-reader", () => {
     `);
   });
 
+  it("emits modalOpen event that does not bubble when opened", async () => {
+    const page = await newSpecPage({
+      components: [SwirlPdfReader],
+      html: `<swirl-pdf-reader file="/sample.pdf" label="PDF Reader"></swirl-pdf-reader>`,
+    });
+
+    const modalOpenSpy = jest.fn();
+
+    page.root.addEventListener("modalOpen", modalOpenSpy);
+
+    await page.root.open();
+    await page.waitForChanges();
+
+    expect(modalOpenSpy).toHaveBeenCalledTimes(1);
+    expect(modalOpenSpy.mock.calls[0][0].bubbles).toBe(false);
+  });
+
+  it("emits modalClose event that does not bubble when closed", async () => {
+    const page = await newSpecPage({
+      components: [SwirlPdfReader],
+      html: `<swirl-pdf-reader file="/sample.pdf" label="PDF Reader"></swirl-pdf-reader>`,
+    });
+
+    const modalCloseSpy = jest.fn();
+
+    page.root.addEventListener("modalClose", modalCloseSpy);
+
+    await page.root.open();
+    await page.waitForChanges();
+
+    // Simulate the dialog's close event
+    const dialog = page.root.shadowRoot.querySelector("dialog");
+    dialog.dispatchEvent(new Event("close"));
+    await page.waitForChanges();
+
+    expect(modalCloseSpy).toHaveBeenCalledTimes(1);
+    expect(modalCloseSpy.mock.calls[0][0].bubbles).toBe(false);
+  });
+
   it("allows to zoom", async () => {
     const page = await newSpecPage({
       components: [SwirlPdfReader],

packages/swirl-components/src/components/swirl-pdf-reader/swirl-pdf-reader.tsx

@@ -11,9 +11,12 @@ import {
   State,
   Watch,
 } from "@stencil/core";
-import { disableBodyScroll, enableBodyScroll } from "../../utils/body-scroll-lock";
 import classnames from "classnames";
 import { isMobileViewport, querySelectorAllDeep } from "../../utils";
+import {
+  disableBodyScroll,
+  enableBodyScroll,
+} from "../../utils/body-scroll-lock";
 import {
   SwirlFileViewerPdfViewMode,
   SwirlFileViewerPdfZoom,
@@ -52,8 +55,8 @@ export class SwirlPdfReader {
   @Prop() zoomSelectLabel?: string = "Select zoom";
   @Prop() skipNativeDownload?: boolean = false;
 
-  @Event() modalClose: EventEmitter<void>;
-  @Event() modalOpen: EventEmitter<void>;
+  @Event({ bubbles: false }) modalClose: EventEmitter<void>;
+  @Event({ bubbles: false }) modalOpen: EventEmitter<void>;
 
   @State() active = false;
   @State() closing = false;