feat: keepInViewport enhancements (#11199)

* adjust position when opening or resizing

* constrain dialog size to viewport

* handle viewport resize

* do not lock position if dialog is center positioned

* adjust position when moving programmatically

* move property, update JSDoc

* Update packages/dialog/test/dialog.test.js

Co-authored-by: Diego Cardoso <diego@vaadin.com>

* improve viewport cleanup

---------

Co-authored-by: Diego Cardoso <diego@vaadin.com>

Author: sissbruecker

packages/dialog/src/styles/vaadin-dialog-overlay-base-styles.js

@@ -124,6 +124,9 @@ const dialogResizableOverlay = css`
 
   :host([has-bounds-set]) [part='overlay'] {
     min-width: 0;
+  }
+
+  :host([has-bounds-set]:not([keep-in-viewport])) [part='overlay'] {
     max-width: none;
     max-height: none;
   }

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

@@ -63,4 +63,14 @@ export declare class DialogBaseMixinClass {
    * additional spacing, which can be overridden by the theme.
    */
   left: string;
+
+  /**
+   * Set to true to prevent the dialog from moving outside the viewport bounds.
+   * When enabled, all four edges of the dialog will remain visible, for example
+   * when dragging the dialog or when the viewport is resized. Note that the
+   * dialog will also adjust any programmatically configured size and position
+   * so that it stays within the viewport.
+   * @attr {boolean} keep-in-viewport
+   */
+  keepInViewport: boolean;
 }

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

@@ -93,6 +93,21 @@ export const DialogBaseMixin = (superClass) =>
         overlayRole: {
           type: String,
         },
+
+        /**
+         * Set to true to prevent the dialog from moving outside the viewport bounds.
+         * When enabled, all four edges of the dialog will remain visible, for example
+         * when dragging the dialog or when the viewport is resized. Note that the
+         * dialog will also adjust any programmatically configured size and position
+         * so that it stays within the viewport.
+         * @attr {boolean} keep-in-viewport
+         * @type {boolean}
+         */
+        keepInViewport: {
+          type: Boolean,
+          value: false,
+          reflectToAttribute: true,
+        },
       };
     }
 

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

@@ -21,12 +21,4 @@ export declare class DialogDraggableMixinClass {
    * "`draggable-leaf-only`" class name.
    */
   draggable: boolean;
-
-  /**
-   * Set to true to prevent dragging the dialog outside the viewport bounds.
-   * When enabled, all four edges of the dialog will remain visible during dragging.
-   * The dialog may still become partially hidden when the viewport is resized.
-   * @attr {boolean} keep-in-viewport
-   */
-  keepInViewport: boolean;
 }

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

@@ -31,19 +31,6 @@ export const DialogDraggableMixin = (superClass) =>
           reflectToAttribute: true,
         },
 
-        /**
-         * Set to true to prevent dragging the dialog outside the viewport bounds.
-         * When enabled, all four edges of the dialog will remain visible during dragging.
-         * The dialog may still become partially hidden when the viewport is resized.
-         * @attr {boolean} keep-in-viewport
-         * @type {boolean}
-         */
-        keepInViewport: {
-          type: Boolean,
-          value: false,
-          reflectToAttribute: true,
-        },
-
         /** @private */
         _touchDevice: {
           type: Boolean,

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

@@ -25,6 +25,11 @@ export declare class DialogOverlayMixinClass {
    */
   headerTitle: string;
 
+  /**
+   * Whether to keep the overlay within the viewport.
+   */
+  keepInViewport: boolean;
+
   /**
    * Custom function for rendering the dialog header.
    */

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

@@ -35,6 +35,14 @@ export const DialogOverlayMixin = (superClass) =>
         footerRenderer: {
           type: Object,
         },
+
+        /**
+         * Whether to keep the overlay within the viewport.
+         */
+        keepInViewport: {
+          type: Boolean,
+          reflectToAttribute: true,
+        },
       };
     }
 
@@ -77,6 +85,7 @@ export const DialogOverlayMixin = (superClass) =>
       // Update overflow attribute on resize
       this.__resizeObserver = new ResizeObserver(() => {
         requestAnimationFrame(() => {
+          this.__adjustPosition();
           this.__updateOverflow();
         });
       });
@@ -104,6 +113,20 @@ export const DialogOverlayMixin = (superClass) =>
         setOverlayStateAttribute(this, 'has-footer', currentNodes.length > 0);
         this.__updateOverflow();
       });
+
+      this.__handleWindowResize = this.__handleWindowResize.bind(this);
+    }
+
+    updated(props) {
+      super.updated(props);
+
+      if (props.has('opened') || props.has('keepInViewport')) {
+        if (this.opened && this.keepInViewport) {
+          window.addEventListener('resize', this.__handleWindowResize);
+        } else {
+          window.removeEventListener('resize', this.__handleWindowResize);
+        }
+      }
     }
 
     /** @private */
@@ -233,6 +256,15 @@ export const DialogOverlayMixin = (superClass) =>
       return { top, left, width, height };
     }
 
+    /**
+     * Override method from OverlayMixin to adjust the position of the overlay if `keepInViewport` is true.
+     * @override
+     */
+    setBounds(bounds, absolute = true) {
+      super.setBounds(bounds, absolute);
+      this.__adjustPosition();
+    }
+
     /** @private */
     __updateOverflow() {
       let overflow = '';
@@ -254,4 +286,45 @@ export const DialogOverlayMixin = (superClass) =>
         setOverlayStateAttribute(this, 'overflow', null);
       }
     }
+
+    /** @private */
+    __handleWindowResize() {
+      this.__adjustPosition();
+    }
+
+    /**
+     * Adjusts the position of the overlay to keep it within the viewport if `keepInViewport` is true.
+     * @private
+     */
+    __adjustPosition() {
+      if (!this.opened || !this.keepInViewport) {
+        return;
+      }
+
+      // Centered dialogs do not use absolute positioning and automatically adjust their position / size to fit the viewport
+      const style = getComputedStyle(this.$.overlay);
+      if (style.position !== 'absolute') {
+        return;
+      }
+
+      const overlayHostBounds = this.getBoundingClientRect();
+      const bounds = this.getBounds();
+      // Prefer dimensions from getComputedStyle, as bounding rect is affected
+      // by scale transform applied by opening animation in Lumo
+      const width = parseFloat(style.width) || bounds.width;
+      const height = parseFloat(style.height) || bounds.height;
+
+      const maxLeft = overlayHostBounds.right - overlayHostBounds.left - width;
+      const maxTop = overlayHostBounds.bottom - overlayHostBounds.top - height;
+
+      if (bounds.left > maxLeft || bounds.top > maxTop) {
+        const left = Math.max(0, Math.min(bounds.left, maxLeft));
+        const top = Math.max(0, Math.min(bounds.top, maxTop));
+
+        Object.assign(this.$.overlay.style, {
+          left: `${left}px`,
+          top: `${top}px`,
+        });
+      }
+    }
   };

packages/dialog/src/vaadin-dialog.js

@@ -148,6 +148,7 @@ class Dialog extends DialogSizeMixin(
         .renderer="${this.renderer}"
         .headerRenderer="${this.headerRenderer}"
         .footerRenderer="${this.footerRenderer}"
+        .keepInViewport="${this.keepInViewport}"
         @opened-changed="${this._onOverlayOpened}"
         @mousedown="${this._bringOverlayToFront}"
         @touchstart="${this._bringOverlayToFront}"