fix: Modal close-end event, no more bubbling modal events (#598)

Co-authored-by: Niels Lyngsø <[email protected]>

Author: JesmoDev

packages/uui-modal/lib/uui-modal.element.ts

@@ -18,11 +18,11 @@ export class UUIModalElement extends LitElement {
 
   private _transitionDuration = 250;
 
-  @property()
+  @property({ type: Number, attribute: 'transition-duration' })
   public get transitionDuration() {
     return this._transitionDuration;
   }
-  public set transitionDuration(value) {
+  public set transitionDuration(value: number) {
     this._transitionDuration = value;
     this.style.setProperty(
       '--uui-modal-transition-duration',
@@ -45,7 +45,6 @@ export class UUIModalElement extends LitElement {
     event?.stopImmediatePropagation();
 
     const openEvent = new CustomEvent('open', {
-      bubbles: true,
       cancelable: true,
     });
 
@@ -60,7 +59,6 @@ export class UUIModalElement extends LitElement {
     event?.stopImmediatePropagation();
 
     const closeEvent = new CustomEvent('close', {
-      bubbles: true,
       cancelable: true,
     });
     this.dispatchEvent(closeEvent);
@@ -80,6 +78,9 @@ export class UUIModalElement extends LitElement {
     this.isClosing = true;
     this.isOpen = false;
     this._dialogElement?.close();
+
+    this.dispatchEvent(new CustomEvent('close-end'));
+
     this.remove();
   }
 

packages/uui-modal/lib/uui-modal.mdx

@@ -91,6 +91,10 @@ Dispatched on first render. This will set open to true and show the modal. Can b
 Dispatched when the modal is closed. Can be cancelled if you want to prevent the modal from closing. But then you'll have to manually call `_closeModal()` when you want to close the modal.
 This is used in the `uui-modal-sidebar` to wait for the animation to finish before removing the modal from the DOM.
 
+#### `close-end`
+
+This event is triggered before removing the component from the DOM, either after animations or delays or when `_closeModal()` is manually invoked.
+
 ### CSS Variables
 
 ---