refactor!: update confirm-dialog to not use dialog extension (#9736)

Author: web-padawan

packages/confirm-dialog/src/vaadin-confirm-dialog-mixin.d.ts

@@ -4,6 +4,8 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { OverlayClassMixinClass } from '@vaadin/component-base/src/overlay-class-mixin.js';
+import type { DialogSizeMixinClass } from '@vaadin/dialog/src/vaadin-dialog-size-mixin.js';
 
 /*
  * Fired when the `opened` property changes.
@@ -31,7 +33,7 @@ export type ConfirmDialogEventMap = ConfirmDialogCustomEventMap & HTMLElementEve
 
 export declare function ConfirmDialogMixin<T extends Constructor<HTMLElement>>(
   base: T,
-): Constructor<ConfirmDialogMixinClass> & T;
+): Constructor<ConfirmDialogMixinClass> & Constructor<DialogSizeMixinClass> & Constructor<OverlayClassMixinClass> & T;
 
 export declare class ConfirmDialogMixinClass {
   /**
@@ -121,24 +123,4 @@ export declare class ConfirmDialogMixinClass {
    * @attr {string} cancel-theme
    */
   cancelTheme: string;
-
-  /**
-   * A space-delimited list of CSS class names
-   * to set on the underlying overlay element.
-   *
-   * @attr {string} overlay-class
-   */
-  overlayClass: string;
-
-  /**
-   * Set the width of the overlay.
-   * If a unitless number is provided, pixels are assumed.
-   */
-  width: string | null;
-
-  /**
-   * Set the height of the overlay.
-   * If a unitless number is provided, pixels are assumed.
-   */
-  height: string | null;
 }

packages/confirm-dialog/src/vaadin-confirm-dialog-mixin.js

@@ -4,14 +4,18 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { setAriaIDReference } from '@vaadin/a11y-base/src/aria-id-reference.js';
+import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
 import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
 import { generateUniqueId } from '@vaadin/component-base/src/unique-id-utils.js';
+import { DialogSizeMixin } from '@vaadin/dialog/src/vaadin-dialog-size-mixin.js';
 
 /**
  * @polymerMixin
+ * @mixes DialogSizeMixin
+ * @mixes OverlayClassMixin
  */
 export const ConfirmDialogMixin = (superClass) =>
-  class ConfirmDialogMixinClass extends superClass {
+  class ConfirmDialogMixinClass extends OverlayClassMixin(DialogSizeMixin(superClass)) {
     static get properties() {
       return {
         /**
@@ -154,32 +158,6 @@ export const ConfirmDialogMixin = (superClass) =>
           value: 'tertiary',
         },
 
-        /**
-         * A space-delimited list of CSS class names
-         * to set on the underlying overlay element.
-         *
-         * @attr {string} overlay-class
-         */
-        overlayClass: {
-          type: String,
-        },
-
-        /**
-         * Set the height of the overlay.
-         * If a unitless number is provided, pixels are assumed.
-         */
-        height: {
-          type: String,
-        },
-
-        /**
-         * Set the width of the overlay.
-         * If a unitless number is provided, pixels are assumed.
-         */
-        width: {
-          type: String,
-        },
-
         /**
          * A reference to the "Cancel" button which will be teleported to the overlay.
          * @private
@@ -213,15 +191,6 @@ export const ConfirmDialogMixin = (superClass) =>
           value: () => [],
         },
 
-        /**
-         * A reference to the overlay element.
-         * @private
-         */
-        _overlayElement: {
-          type: Object,
-          sync: true,
-        },
-
         /**
          * A reference to the "Reject" button which will be teleported to the overlay.
          * @private
@@ -255,6 +224,29 @@ export const ConfirmDialogMixin = (superClass) =>
       return [this._headerNode, ...this._messageNodes, this._cancelButton, this._confirmButton, this._rejectButton];
     }
 
+    /** @protected */
+    connectedCallback() {
+      super.connectedCallback();
+      // Restore opened state if overlay was opened when disconnecting
+      if (this.__restoreOpened) {
+        this.opened = true;
+      }
+    }
+
+    /** @protected */
+    disconnectedCallback() {
+      super.disconnectedCallback();
+      // Automatically close the overlay when dialog is removed from DOM
+      // Using a timeout to avoid toggling opened state, and dispatching change
+      // events, when just moving the dialog in the DOM
+      setTimeout(() => {
+        if (!this.isConnected) {
+          this.__restoreOpened = this.opened;
+          this.opened = false;
+        }
+      });
+    }
+
     /** @protected */
     ready() {
       super.ready();
@@ -304,20 +296,10 @@ export const ConfirmDialogMixin = (superClass) =>
       });
       this.addController(this._confirmController);
 
-      this._overlayElement = this.$.dialog.$.overlay;
-
-      this._initOverlay(this._overlayElement);
+      this._overlayElement = this.$.overlay;
     }
 
     /** @protected */
-    _initOverlay(overlay) {
-      overlay.addEventListener('vaadin-overlay-escape-press', this._escPressed.bind(this));
-      overlay.addEventListener('vaadin-overlay-open', () => this.__onDialogOpened());
-      overlay.addEventListener('vaadin-overlay-closed', () => this.__onDialogClosed());
-      overlay.setAttribute('role', 'alertdialog');
-    }
-
-    /** @private */
     __onDialogOpened() {
       const overlay = this._overlayElement;
 
@@ -332,7 +314,7 @@ export const ConfirmDialogMixin = (superClass) =>
       }
     }
 
-    /** @private */
+    /** @protected */
     __onDialogClosed() {
       // Move nodes from the overlay back to the host.
       this.__slottedNodes.forEach((node) => {
@@ -425,13 +407,20 @@ export const ConfirmDialogMixin = (superClass) =>
       }
     }
 
-    /** @private */
-    _escPressed(event) {
-      if (!event.defaultPrevented) {
+    /** @protected */
+    _onOverlayEscapePress(event) {
+      if (this.noCloseOnEsc) {
+        event.preventDefault();
+      } else {
         this.__cancel();
       }
     }
 
+    /** @protected */
+    _onOverlayOutsideClick(event) {
+      event.preventDefault();
+    }
+
     /** @private */
     __confirm() {
       this.dispatchEvent(new CustomEvent('confirm'));
@@ -450,11 +439,6 @@ export const ConfirmDialogMixin = (superClass) =>
       this.opened = false;
     }
 
-    /** @private */
-    _getAriaLabel(header) {
-      return header || 'confirmation';
-    }
-
     /**
      * Fired when the confirm dialog is closed.
      *

packages/confirm-dialog/src/vaadin-confirm-dialog-overlay.js

@@ -3,18 +3,13 @@
  * Copyright (c) 2018 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { css, html, LitElement } from 'lit';
-import { ifDefined } from 'lit/directives/if-defined.js';
+import { html, LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
-import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
-import { DialogBaseMixin } from '@vaadin/dialog/src/vaadin-dialog-base-mixin.js';
-import { DialogSizeMixin } from '@vaadin/dialog/src/vaadin-dialog-size-mixin.js';
 import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
 import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
 import { confirmDialogOverlayStyles } from './styles/vaadin-confirm-dialog-overlay-core-styles.js';
 
 /**
@@ -90,70 +85,3 @@ class ConfirmDialogOverlay extends OverlayMixin(DirMixin(ThemableMixin(PolylitMi
 }
 
 defineCustomElement(ConfirmDialogOverlay);
-
-/**
- * An element used internally by `<vaadin-confirm-dialog>`. Not intended to be used separately.
- * @private
- */
-class ConfirmDialogDialog extends DialogSizeMixin(
-  DialogBaseMixin(OverlayClassMixin(ThemePropertyMixin(PolylitMixin(LitElement)))),
-) {
-  static get is() {
-    return 'vaadin-confirm-dialog-dialog';
-  }
-
-  static get styles() {
-    return css`
-      :host {
-        display: none;
-      }
-    `;
-  }
-
-  static get properties() {
-    return {
-      /**
-       * Set the `aria-label` attribute for assistive technologies like
-       * screen readers. An empty string value for this property (the
-       * default) means that the `aria-label` attribute is not present.
-       */
-      ariaLabel: {
-        type: String,
-        value: '',
-      },
-
-      cancelButtonVisible: {
-        type: Boolean,
-      },
-
-      rejectButtonVisible: {
-        type: Boolean,
-      },
-    };
-  }
-
-  /** @protected */
-  render() {
-    return html`
-      <vaadin-confirm-dialog-overlay
-        id="overlay"
-        .owner="${this}"
-        .opened="${this.opened}"
-        @opened-changed="${this._onOverlayOpened}"
-        @mousedown="${this._bringOverlayToFront}"
-        @touchstart="${this._bringOverlayToFront}"
-        theme="${ifDefined(this._theme)}"
-        .modeless="${this.modeless}"
-        .withBackdrop="${!this.modeless}"
-        ?resizable="${this.resizable}"
-        aria-label="${this.ariaLabel}"
-        .cancelButtonVisible="${this.cancelButtonVisible}"
-        .rejectButtonVisible="${this.rejectButtonVisible}"
-        restore-focus-on-close
-        focus-trap
-      ></vaadin-confirm-dialog-overlay>
-    `;
-  }
-}
-
-defineCustomElement(ConfirmDialogDialog);

packages/confirm-dialog/src/vaadin-confirm-dialog.js

@@ -85,20 +85,24 @@ class ConfirmDialog extends ConfirmDialogMixin(ElementMixin(ThemePropertyMixin(P
   /** @protected */
   render() {
     return html`
-      <vaadin-confirm-dialog-dialog
-        id="dialog"
+      <vaadin-confirm-dialog-overlay
+        id="overlay"
+        role="alertdialog"
+        .owner="${this}"
         .opened="${this.opened}"
-        .overlayClass="${this.overlayClass}"
+        theme="${ifDefined(this._theme)}"
+        .ariaLabel="${this.header || 'confirmation'}"
         .cancelButtonVisible="${this.cancelButtonVisible}"
         .rejectButtonVisible="${this.rejectButtonVisible}"
-        aria-label="${this.header || 'confirmation'}"
-        theme="${ifDefined(this._theme)}"
-        no-close-on-outside-click
-        .noCloseOnEsc="${this.noCloseOnEsc}"
-        .height="${this.height}"
-        .width="${this.width}"
+        with-backdrop
+        restore-focus-on-close
+        focus-trap
         @opened-changed="${this._onOpenedChanged}"
-      ></vaadin-confirm-dialog-dialog>
+        @vaadin-overlay-open="${this.__onDialogOpened}"
+        @vaadin-overlay-closed="${this.__onDialogClosed}"
+        @vaadin-overlay-outside-click="${this._onOverlayOutsideClick}"
+        @vaadin-overlay-escape-press="${this._onOverlayEscapePress}"
+      ></vaadin-confirm-dialog-overlay>
 
       <div hidden>
         <slot name="header"></slot>