@vaadin/dialog 25.2.11 → 25.2.12

package/custom-elements.json

@@ -351,6 +351,16 @@
                 "package": "@vaadin/overlay/src/vaadin-overlay-mixin.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "containsFocus",
+              "description": "Returns true if the overlay contains focus, including nested shadow roots.",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              }
+            },
             {
               "kind": "field",
               "name": "focusTrap",
@@ -976,6 +986,60 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/vaadin-dialog-utils.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Remembers where a pointer gesture started, to tell a click from a drag once it ends.",
+          "name": "ClickTracker",
+          "members": [
+            {
+              "kind": "method",
+              "name": "isClick",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "!MouseEvent | !TouchEvent"
+                  }
+                }
+              ],
+              "description": "Returns true if the pointer hasn't moved since the gesture started.",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "start",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "!MouseEvent | !TouchEvent"
+                  }
+                }
+              ],
+              "description": "Stores the position where the gesture started."
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ClickTracker",
+          "declaration": {
+            "name": "ClickTracker",
+            "module": "src/vaadin-dialog-utils.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/vaadin-dialog.js",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/dialog",
-  "version": "25.2.11",
+  "version": "25.2.12",
   "publishConfig": {
     "access": "public"
   },
@@ -37,19 +37,20 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/component-base": "~25.2.11",
-    "@vaadin/lit-renderer": "~25.2.11",
-    "@vaadin/overlay": "~25.2.11",
-    "@vaadin/vaadin-themable-mixin": "~25.2.11",
+    "@vaadin/a11y-base": "~25.2.12",
+    "@vaadin/component-base": "~25.2.12",
+    "@vaadin/lit-renderer": "~25.2.12",
+    "@vaadin/overlay": "~25.2.12",
+    "@vaadin/vaadin-themable-mixin": "~25.2.12",
     "lit": "^3.0.0"
   },
   "devDependencies": {
     "@vaadin/a11y-base": "~25.2.11",
-    "@vaadin/aura": "~25.2.11",
-    "@vaadin/chai-plugins": "~25.2.11",
-    "@vaadin/test-runner-commands": "~25.2.11",
+    "@vaadin/aura": "~25.2.12",
+    "@vaadin/chai-plugins": "~25.2.12",
+    "@vaadin/test-runner-commands": "~25.2.12",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "~25.2.11",
+    "@vaadin/vaadin-lumo-styles": "~25.2.12",
     "sinon": "^22.0.0"
   },
   "customElements": "custom-elements.json",
@@ -57,5 +58,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "6b08306ffb11c5c7665b0af8050e4368e0c44a5a"
+  "gitHead": "7261133c2bc1c781f5b00037d896bac5443a4e00"
 }

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

@@ -3,8 +3,9 @@
  * Copyright (c) 2017 - 2026 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { isKeyboardActive } from '@vaadin/a11y-base/src/focus-utils.js';
 import { isTouch } from '@vaadin/component-base/src/browser-utils.js';
-import { eventInWindow, getMouseOrFirstTouchEvent } from './vaadin-dialog-utils.js';
+import { ClickTracker, eventInWindow, getMouseOrFirstTouchEvent } from './vaadin-dialog-utils.js';
 
 export const DialogDraggableMixin = (superClass) =>
   class VaadinDialogDraggableMixin extends superClass {
@@ -44,6 +45,7 @@ export const DialogDraggableMixin = (superClass) =>
       super.ready();
       this._originalBounds = {};
       this._originalMouseCoords = {};
+      this.__dragTracker = new ClickTracker();
       this._startDrag = this._startDrag.bind(this);
       this._drag = this._drag.bind(this);
       this._stopDrag = this._stopDrag.bind(this);
@@ -86,6 +88,8 @@ export const DialogDraggableMixin = (superClass) =>
         if ((isResizerContainer && !isResizerContainerScrollbar) || isContentPart || isDraggable) {
           // Signal that we're handling this drag event, so parent dialogs won't also drag
           e.preventDefault();
+          // `preventDefault()` above cancels the native focus change, restored in `_stopDrag()`
+          this.__dragTracker.start(e);
           this._originalBounds = this.$.overlay.getBounds();
           const event = getMouseOrFirstTouchEvent(e);
           this._originalMouseCoords = { top: event.pageY, left: event.pageX };
@@ -128,7 +132,12 @@ export const DialogDraggableMixin = (superClass) =>
     }
 
     /** @private */
-    _stopDrag() {
+    _stopDrag(e) {
+      // Focus on click, not on drag, so that moving the dialog doesn't interrupt editing
+      if (this.__dragTracker.isClick(e) && !this.$.overlay.containsFocus()) {
+        this.focus({ preventScroll: true, focusVisible: isKeyboardActive() });
+      }
+
       this.dispatchEvent(new CustomEvent('dragged', { detail: { top: this.top, left: this.left } }));
       window.removeEventListener('mouseup', this._stopDrag);
       window.removeEventListener('touchend', this._stopDrag);

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

@@ -44,4 +44,9 @@ export declare class DialogOverlayMixinClass {
    * Retrieves the coordinates of the overlay.
    */
   getBounds(): DialogOverlayBounds;
+
+  /**
+   * Returns true if the overlay contains focus, including nested shadow roots.
+   */
+  containsFocus(): boolean;
 }

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

@@ -3,6 +3,7 @@
  * Copyright (c) 2017 - 2026 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { getDeepActiveElement } from '@vaadin/a11y-base/src/focus-utils.js';
 import { SlotObserver } from '@vaadin/component-base/src/slot-observer.js';
 import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
 import { setOverlayStateAttribute } from '@vaadin/overlay/src/vaadin-overlay-utils.js';
@@ -59,6 +60,15 @@ export const DialogOverlayMixin = (superClass) =>
       return this.owner;
     }
 
+    /**
+     * Returns true if the overlay contains focus, including nested shadow roots.
+     *
+     * @return {boolean}
+     */
+    containsFocus() {
+      return this._deepContains(getDeepActiveElement());
+    }
+
     /**
      * Override method from OverlayMixin to use slotted div as a renderer root.
      * @protected

package/src/vaadin-dialog-resizable-mixin.js

@@ -3,7 +3,8 @@
  * Copyright (c) 2017 - 2026 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { eventInWindow, getMouseOrFirstTouchEvent } from './vaadin-dialog-utils.js';
+import { isKeyboardActive } from '@vaadin/a11y-base/src/focus-utils.js';
+import { ClickTracker, eventInWindow, getMouseOrFirstTouchEvent } from './vaadin-dialog-utils.js';
 export const DialogResizableMixin = (superClass) =>
   class VaadinDialogResizableMixin extends superClass {
     static get properties() {
@@ -24,6 +25,7 @@ export const DialogResizableMixin = (superClass) =>
       super.ready();
       this._originalBounds = {};
       this._originalMouseCoords = {};
+      this.__resizeTracker = new ClickTracker();
       this._resizeListeners = { start: {}, resize: {}, stop: {} };
       this._addResizeListeners();
     }
@@ -35,7 +37,7 @@ export const DialogResizableMixin = (superClass) =>
         const resizer = document.createElement('div');
         this._resizeListeners.start[direction] = (e) => this._startResize(e, direction);
         this._resizeListeners.resize[direction] = (e) => this._resize(e, direction);
-        this._resizeListeners.stop[direction] = () => this._stopResize(direction);
+        this._resizeListeners.stop[direction] = (e) => this._stopResize(e, direction);
         if (direction.length === 1) {
           resizer.classList.add('edge');
         }
@@ -60,6 +62,8 @@ export const DialogResizableMixin = (superClass) =>
 
       if (e.button === 0 || e.touches) {
         e.preventDefault();
+        // `preventDefault()` above cancels the native focus change, restored in `_stopResize()`
+        this.__resizeTracker.start(e);
 
         this._originalBounds = this.$.overlay.getBounds();
         const event = getMouseOrFirstTouchEvent(e);
@@ -127,10 +131,16 @@ export const DialogResizableMixin = (superClass) =>
     }
 
     /**
+     * @param {!MouseEvent | !TouchEvent} e
      * @param {!DialogResizableDirection} direction
      * @protected
      */
-    _stopResize(direction) {
+    _stopResize(e, direction) {
+      // Focus on click, not on resize, so that resizing the dialog doesn't interrupt editing
+      if (this.__resizeTracker.isClick(e) && !this.$.overlay.containsFocus()) {
+        this.focus({ preventScroll: true, focusVisible: isKeyboardActive() });
+      }
+
       window.removeEventListener('mousemove', this._resizeListeners.resize[direction]);
       window.removeEventListener('touchmove', this._resizeListeners.resize[direction]);
       window.removeEventListener('mouseup', this._resizeListeners.stop[direction]);

package/src/vaadin-dialog-utils.d.ts

@@ -6,6 +6,7 @@
 
 /**
  * Checks if the argument is a touch event and if so, returns a first touch.
+ * On `touchend`, `touches` is empty and the released point is in `changedTouches`.
  * Otherwise, if the mouse event was passed, returns it as is.
  */
 declare function getMouseOrFirstTouchEvent(e: MouseEvent | TouchEvent): MouseEvent | Touch;
@@ -18,3 +19,18 @@ export { getMouseOrFirstTouchEvent };
 declare function eventInWindow(e: MouseEvent | TouchEvent): boolean;
 
 export { eventInWindow };
+
+/**
+ * Remembers where a pointer gesture started, to tell a click from a drag once it ends.
+ */
+export declare class ClickTracker {
+  /**
+   * Stores the position where the gesture started.
+   */
+  start(e: MouseEvent | TouchEvent): void;
+
+  /**
+   * Returns true if the pointer hasn't moved since the gesture started.
+   */
+  isClick(e: MouseEvent | TouchEvent): boolean;
+}

package/src/vaadin-dialog-utils.js

@@ -6,13 +6,14 @@
 
 /**
  * Checks if the argument is a touch event and if so, returns a first touch.
+ * On `touchend`, `touches` is empty and the released point is in `changedTouches`.
  * Otherwise, if the mouse event was passed, returns it as is.
  * @param {!MouseEvent | !TouchEvent} e
  * @return {!MouseEvent | !Touch}
  * @protected
  */
 export function getMouseOrFirstTouchEvent(e) {
-  return e.touches ? e.touches[0] : e;
+  return e.touches ? e.touches[0] || e.changedTouches[0] : e;
 }
 
 /**
@@ -24,3 +25,35 @@ export function getMouseOrFirstTouchEvent(e) {
 export function eventInWindow(e) {
   return e.clientX >= 0 && e.clientX <= window.innerWidth && e.clientY >= 0 && e.clientY <= window.innerHeight;
 }
+
+// Pointer movement in pixels above which a gesture is a drag, not a click.
+// Same value as `TRACK_DISTANCE` in `@vaadin/component-base/src/gestures.js`.
+const DRAG_DISTANCE = 5;
+
+/**
+ * Remembers where a pointer gesture started, to tell a click from a drag once it ends.
+ */
+export class ClickTracker {
+  /** @type {{ x: number, y: number }} */
+  #start;
+
+  /**
+   * Stores the position where the gesture started.
+   * @param {!MouseEvent | !TouchEvent} e
+   */
+  start(e) {
+    // Viewport coordinates, so scrolling during the gesture doesn't count as movement
+    const { clientX, clientY } = getMouseOrFirstTouchEvent(e);
+    this.#start = { x: clientX, y: clientY };
+  }
+
+  /**
+   * Returns true if the pointer hasn't moved since the gesture started.
+   * @param {!MouseEvent | !TouchEvent} e
+   * @return {boolean}
+   */
+  isClick(e) {
+    const { clientX, clientY } = getMouseOrFirstTouchEvent(e);
+    return Math.abs(clientX - this.#start.x) < DRAG_DISTANCE && Math.abs(clientY - this.#start.y) < DRAG_DISTANCE;
+  }
+}

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/dialog",
-  "version": "25.2.11",
+  "version": "25.2.12",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/dialog",
-  "version": "25.2.11",
+  "version": "25.2.12",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {