feat: fire closed event when Confirm Dialog is closed (#7472)

* feat: fire `closed` event when Confirm Dialog is closed * test: add tests for closed event * Update packages/confirm-dialog/src/vaadin-confirm-dialog-mixin.d.ts Co-authored-by: Serhii Kulykov <[email protected]> * doc: add @fires about `closed` event in component jsdoc * test: use addEventListener instead of listenOnce * test: add typing test --------- Co-authored-by: Serhii Kulykov <[email protected]>
vaadin · Jun 4, 2024 · c55d17c · c55d17c
1 parent 953ad79
commit c55d17c
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 2 deletions.
diff --git a/packages/confirm-dialog/src/vaadin-confirm-dialog-mixin.d.ts b/packages/confirm-dialog/src/vaadin-confirm-dialog-mixin.d.ts
@@ -10,9 +10,16 @@ import type { Constructor } from '@open-wc/dedupe-mixin';
  */
 export type ConfirmDialogOpenedChangedEvent = CustomEvent<{ value: boolean }>;
 
+/**
+ * Fired when the confirm dialog is closed.
+ */
+export type ConfirmDialogClosedEvent = CustomEvent;
+
 export interface ConfirmDialogCustomEventMap {
   'opened-changed': ConfirmDialogOpenedChangedEvent;
 
+  closed: ConfirmDialogClosedEvent;
+
   confirm: Event;
 
   cancel: Event;

diff --git a/packages/confirm-dialog/src/vaadin-confirm-dialog-mixin.js b/packages/confirm-dialog/src/vaadin-confirm-dialog-mixin.js
@@ -333,6 +333,7 @@ export const ConfirmDialogMixin = (superClass) =>
       this.__slottedNodes.forEach((node) => {
         this.appendChild(node);
       });
+      this.dispatchEvent(new CustomEvent('closed'));
     }
 
     /** @private */

diff --git a/packages/confirm-dialog/src/vaadin-confirm-dialog.d.ts b/packages/confirm-dialog/src/vaadin-confirm-dialog.d.ts
@@ -57,6 +57,7 @@ export * from './vaadin-confirm-dialog-mixin.js';
  * @fires {Event} cancel - Fired when Cancel button or Escape key was pressed.
  * @fires {Event} reject - Fired when Reject button was pressed.
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
+ * @fires {CustomEvent} closed - Fired when the confirm dialog is closed.
  */
 declare class ConfirmDialog extends ConfirmDialogMixin(ElementMixin(ThemePropertyMixin(ControllerMixin(HTMLElement)))) {
   addEventListener<K extends keyof ConfirmDialogEventMap>(

diff --git a/packages/confirm-dialog/src/vaadin-confirm-dialog.js b/packages/confirm-dialog/src/vaadin-confirm-dialog.js
@@ -59,6 +59,7 @@ import { ConfirmDialogMixin } from './vaadin-confirm-dialog-mixin.js';
  * @fires {Event} cancel - Fired when Cancel button or Escape key was pressed.
  * @fires {Event} reject - Fired when Reject button was pressed.
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
+ * @fires {CustomEvent} closed - Fired when the confirm dialog is closed.
  *
  * @customElement
  * @extends HTMLElement

diff --git a/packages/confirm-dialog/test/confirm-dialog.common.js b/packages/confirm-dialog/test/confirm-dialog.common.js
@@ -1,5 +1,14 @@
 import { expect } from '@esm-bundle/chai';
-import { aTimeout, esc, fixtureSync, nextFrame, nextRender, nextUpdate, oneEvent } from '@vaadin/testing-helpers';
+import {
+  aTimeout,
+  esc,
+  fixtureSync,
+  listenOnce,
+  nextFrame,
+  nextRender,
+  nextUpdate,
+  oneEvent,
+} from '@vaadin/testing-helpers';
 import sinon from 'sinon';
 import { getDeepActiveElement } from '@vaadin/a11y-base/src/focus-utils.js';
 
@@ -518,6 +527,29 @@ describe('vaadin-confirm-dialog', () => {
       overlay.querySelector('[slot="reject-button"]').click();
       expect(spy.calledOnce).to.be.true;
     });
+
+    it('should dispatch closed event', async () => {
+      const spy = sinon.spy();
+      confirm.addEventListener('closed', spy);
+      confirm.opened = false;
+      await nextRender();
+      expect(spy.calledOnce).to.be.true;
+      confirm.removeEventListener('closed', spy);
+    });
+
+    it('closed event should be called after overlay is closed', async () => {
+      const closedPromise = new Promise((resolve) => {
+        const closedListener = () => {
+          expect(confirm._overlayElement.parentElement).to.be.not.ok;
+          resolve();
+        };
+        listenOnce(confirm, 'closed', closedListener);
+      });
+
+      confirm.opened = false;
+      await nextRender();
+      await closedPromise;
+    });
   });
 
   describe('Esc key', () => {

diff --git a/packages/confirm-dialog/test/typings/confirm-dialog.types.ts b/packages/confirm-dialog/test/typings/confirm-dialog.types.ts
@@ -1,7 +1,7 @@
 import '../../vaadin-confirm-dialog.js';
 import type { ElementMixinClass } from '@vaadin/component-base/src/element-mixin.js';
 import type { ThemePropertyMixinClass } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
-import type { ConfirmDialogOpenedChangedEvent } from '../../vaadin-confirm-dialog.js';
+import type { ConfirmDialogClosedEvent, ConfirmDialogOpenedChangedEvent } from '../../vaadin-confirm-dialog.js';
 
 const assertType = <TExpected>(actual: TExpected) => actual;
 
@@ -43,3 +43,7 @@ dialog.addEventListener('cancel', (event) => {
 dialog.addEventListener('reject', (event) => {
   assertType<Event>(event);
 });
+
+dialog.addEventListener('closed', (event) => {
+  assertType<ConfirmDialogClosedEvent>(event);
+});