refactor: move dialog setBounds logic to overlay mixin (#9643)

Author: web-padawan

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

@@ -86,23 +86,6 @@ class ConfirmDialogOverlay extends OverlayMixin(DirMixin(ThemableMixin(LumoInjec
     this.setAttribute('has-header', '');
     this.setAttribute('has-footer', '');
   }
-
-  /**
-   * Updates the coordinates of the overlay.
-   */
-  setBounds(bounds) {
-    const overlay = this.$.overlay;
-    const parsedBounds = { ...bounds };
-
-    Object.keys(parsedBounds).forEach((arg) => {
-      // Allow setting width or height to `null`
-      if (parsedBounds[arg] !== null && !isNaN(parsedBounds[arg])) {
-        parsedBounds[arg] = `${parsedBounds[arg]}px`;
-      }
-    });
-
-    Object.assign(overlay.style, parsedBounds);
-  }
 }
 
 defineCustomElement(ConfirmDialogOverlay);

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

@@ -14,15 +14,6 @@ export type DialogOverlayBounds = {
   height: number;
 };
 
-export type DialogOverlayBoundsParam =
-  | DialogOverlayBounds
-  | {
-      top?: number | string;
-      left?: number | string;
-      width?: number | string;
-      height?: number | string;
-    };
-
 export declare function DialogOverlayMixin<T extends Constructor<HTMLElement>>(
   base: T,
 ): Constructor<DialogOverlayMixinClass> & Constructor<OverlayMixinClass> & T;
@@ -48,9 +39,4 @@ export declare class DialogOverlayMixinClass {
    * Retrieves the coordinates of the overlay.
    */
   getBounds(): DialogOverlayBounds;
-
-  /**
-   * Updates the coordinates of the overlay.
-   */
-  setBounds(bounds: DialogOverlayBoundsParam, absolute: boolean): void;
 }

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

@@ -193,29 +193,6 @@ export const DialogOverlayMixin = (superClass) =>
       this.__updateOverflow();
     }
 
-    /**
-     * Updates the coordinates of the overlay.
-     * @param {!DialogOverlayBoundsParam} bounds
-     * @param {boolean} absolute
-     */
-    setBounds(bounds, absolute = true) {
-      const overlay = this.$.overlay;
-      const parsedBounds = { ...bounds };
-
-      if (absolute && overlay.style.position !== 'absolute') {
-        overlay.style.position = 'absolute';
-      }
-
-      Object.keys(parsedBounds).forEach((arg) => {
-        // Allow setting width or height to `null`
-        if (parsedBounds[arg] !== null && !isNaN(parsedBounds[arg])) {
-          parsedBounds[arg] = `${parsedBounds[arg]}px`;
-        }
-      });
-
-      Object.assign(overlay.style, parsedBounds);
-    }
-
     /**
      * Retrieves the coordinates of the overlay.
      * @return {!DialogOverlayBounds}

packages/dialog/src/vaadin-dialog-overlay.d.ts

@@ -7,7 +7,7 @@ import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { DialogOverlayMixin } from './vaadin-dialog-overlay-mixin.js';
 
-export { DialogOverlayBounds, DialogOverlayBoundsParam } from './vaadin-dialog-overlay-mixin.js';
+export { DialogOverlayBounds } from './vaadin-dialog-overlay-mixin.js';
 
 /**
  * An element used internally by `<vaadin-dialog>`. Not intended to be used separately.

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

@@ -11,7 +11,7 @@ import { DialogDraggableMixin } from './vaadin-dialog-draggable-mixin.js';
 import { DialogRendererMixin } from './vaadin-dialog-renderer-mixin.js';
 import { DialogResizableMixin } from './vaadin-dialog-resizable-mixin.js';
 
-export { DialogOverlay, DialogOverlayBounds, DialogOverlayBoundsParam } from './vaadin-dialog-overlay.js';
+export { DialogOverlay, DialogOverlayBounds } from './vaadin-dialog-overlay.js';
 
 export type DialogRenderer = (root: HTMLElement, dialog: Dialog) => void;
 

packages/overlay/src/vaadin-overlay-mixin.d.ts

@@ -7,6 +7,13 @@ import type { Constructor } from '@open-wc/dedupe-mixin';
 import type { OverlayFocusMixinClass } from './vaadin-overlay-focus-mixin.js';
 import type { OverlayStackMixinClass } from './vaadin-overlay-stack-mixin.js';
 
+export type OverlayBounds = {
+  top?: number | string;
+  left?: number | string;
+  width?: number | string;
+  height?: number | string;
+};
+
 export type OverlayRenderer = (root: HTMLElement, owner: HTMLElement, model?: object) => void;
 
 export declare function OverlayMixin<T extends Constructor<HTMLElement>>(
@@ -58,6 +65,11 @@ export declare class OverlayMixinClass {
 
   close(sourceEvent?: Event | null): void;
 
+  /**
+   * Updates the coordinates of the overlay.
+   */
+  setBounds(bounds: OverlayBounds, absolute?: boolean): void;
+
   /**
    * Requests an update for the content of the overlay.
    * While performing the update, it invokes the renderer passed in the `renderer` property.

packages/overlay/src/vaadin-overlay-mixin.js

@@ -182,6 +182,29 @@ export const OverlayMixin = (superClass) =>
       }
     }
 
+    /**
+     * Updates the coordinates of the overlay.
+     * @param {!OverlayBoundsParam} bounds
+     * @param {boolean} absolute
+     */
+    setBounds(bounds, absolute = true) {
+      const overlay = this.$.overlay;
+      const parsedBounds = { ...bounds };
+
+      if (absolute && overlay.style.position !== 'absolute') {
+        overlay.style.position = 'absolute';
+      }
+
+      Object.keys(parsedBounds).forEach((arg) => {
+        // Allow setting width or height to `null`
+        if (parsedBounds[arg] !== null && !isNaN(parsedBounds[arg])) {
+          parsedBounds[arg] = `${parsedBounds[arg]}px`;
+        }
+      });
+
+      Object.assign(overlay.style, parsedBounds);
+    }
+
     /** @private */
     _detectIosNavbar() {
       /* c8 ignore next 15 */