diff --git a/packages/calcite-components/src/components/alert/alert.e2e.ts b/packages/calcite-components/src/components/alert/alert.e2e.ts index aad265b893e..3c98f1d01bf 100644 --- a/packages/calcite-components/src/components/alert/alert.e2e.ts +++ b/packages/calcite-components/src/components/alert/alert.e2e.ts @@ -328,6 +328,77 @@ describe("calcite-alert", () => { expect(await container.isVisible()).toBe(false); }); + it("should update number of queued alerts with a calcite-chip when removing an alert", async () => { + const page = await newE2EPage(); + await page.setContent(html` + open alert + open alert + + open alert + + +
Title of alert Uno
+
Message text of the alert Uno
+ Retry +
+ + +
Title of alert Dos
+
Message text of the alert Dos
+ Retry +
+ + +
Title of alert Dos
+
Message text of the alert Dos
+ Retry +
+ `); + const buttonOne = await page.find("#buttonOne"); + const buttonTwo = await page.find("#buttonTwo"); + const buttonThree = await page.find("#buttonThree"); + const alertOne = await page.find("#first-open"); + const alertTwo = await page.find("#second-open"); + const alertThree = await page.find("#third-open"); + + await buttonOne.click(); + await page.waitForTimeout(animationDurationInMs); + expect(await alertOne.isVisible()).toBe(true); + + await buttonTwo.click(); + expect(await alertTwo.isVisible()).toBe(true); + + await buttonThree.click(); + expect(await alertThree.isVisible()).toBe(true); + + const chip = await page.find("calcite-alert[id='first-open'] >>> calcite-chip"); + const chipQueueCount2 = "+2"; + expect(await chip.getProperty("value")).toEqual(chipQueueCount2); + expect(chip.textContent).toEqual(chipQueueCount2); + + await page.$eval("#third-open", (alert: HTMLCalciteAlertElement) => { + alert.remove(); + }); + await page.waitForChanges(); + + const chipQueueCount1 = "+1"; + expect(await chip.getProperty("value")).toEqual(chipQueueCount1); + expect(chip.textContent).toEqual(chipQueueCount1); + + await page.$eval("#second-open", (alert: HTMLCalciteAlertElement) => { + alert.remove(); + }); + await page.waitForChanges(); + + expect(await page.find("calcite-alert[id='first-open'] >>> calcite-chip")).toBeNull(); + }); + describe("auto-close behavior on queued items", () => { it("should display number of queued alerts with a calcite-chip", async () => { const page = await newE2EPage(); diff --git a/packages/calcite-components/src/components/alert/alert.tsx b/packages/calcite-components/src/components/alert/alert.tsx index a5c84406150..c4f3acec46c 100644 --- a/packages/calcite-components/src/components/alert/alert.tsx +++ b/packages/calcite-components/src/components/alert/alert.tsx @@ -46,7 +46,7 @@ import { import { Kind, Scale } from "../interfaces"; import { KindIcons } from "../resources"; import { AlertMessages } from "./assets/alert/t9n"; -import { AlertDuration, Sync } from "./interfaces"; +import { AlertDuration, Sync, Unregister } from "./interfaces"; import { CSS, DURATIONS, SLOTS } from "./resources"; /** @@ -203,6 +203,11 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen } disconnectedCallback(): void { + window.dispatchEvent( + new CustomEvent("calciteInternalAlertUnregister", { + detail: { alert: this.el } + }) + ); window.clearTimeout(this.autoCloseTimeoutId); window.clearTimeout(this.queueTimeout); disconnectOpenCloseComponent(this); @@ -353,6 +358,19 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen this.determineActiveAlert(); } + // Event is dispatched on the window because the element is not in the DOM so bubbling won't occur. + @Listen("calciteInternalAlertUnregister", { target: "window" }) + alertUnregister(event: CustomEvent): void { + const queue = this.queue.filter((el) => el !== event.detail.alert); + this.queue = queue; + + window.dispatchEvent( + new CustomEvent("calciteInternalAlertSync", { + detail: { queue } + }) + ); + } + //-------------------------------------------------------------------------- // // Public Methods diff --git a/packages/calcite-components/src/components/alert/interfaces.ts b/packages/calcite-components/src/components/alert/interfaces.ts index 0ffe0b27966..f3ac1d8bb90 100644 --- a/packages/calcite-components/src/components/alert/interfaces.ts +++ b/packages/calcite-components/src/components/alert/interfaces.ts @@ -1,4 +1,9 @@ export type AlertDuration = "fast" | "medium" | "slow"; + export interface Sync { queue: HTMLCalciteAlertElement[]; } + +export interface Unregister { + alert: HTMLCalciteAlertElement; +}