@vaadin/virtual-list 23.5.11 → 23.5.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/virtual-list",
-  "version": "23.5.11",
+  "version": "23.5.12",
   "publishConfig": {
     "access": "public"
   },
@@ -38,15 +38,15 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "~23.5.11",
-    "@vaadin/lit-renderer": "~23.5.11",
-    "@vaadin/vaadin-lumo-styles": "~23.5.11",
-    "@vaadin/vaadin-material-styles": "~23.5.11",
-    "@vaadin/vaadin-themable-mixin": "~23.5.11"
+    "@vaadin/component-base": "~23.5.12",
+    "@vaadin/lit-renderer": "~23.5.12",
+    "@vaadin/vaadin-lumo-styles": "~23.5.12",
+    "@vaadin/vaadin-material-styles": "~23.5.12",
+    "@vaadin/vaadin-themable-mixin": "~23.5.12"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/polymer-legacy-adapter": "~23.5.11",
+    "@vaadin/polymer-legacy-adapter": "~23.5.12",
     "@vaadin/testing-helpers": "^0.3.2",
     "lit": "^2.0.0",
     "sinon": "^13.0.2"
@@ -55,5 +55,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "fd8d4ef9a6ea67665827b6e712ede3aed53527c2"
+  "gitHead": "649d4656babb0403813ce4f797e1fc4484b0dd11"
 }

package/src/vaadin-virtual-list.js

@@ -112,7 +112,7 @@ class VirtualList extends ElementMixin(ControllerMixin(ThemableMixin(PolymerElem
 
   constructor() {
     super();
-    this.__onDragStart = this.__onDragStart.bind(this);
+    this.__onDocumentDragStart = this.__onDocumentDragStart.bind(this);
   }
 
   /** @protected */
@@ -136,17 +136,13 @@ class VirtualList extends ElementMixin(ControllerMixin(ThemableMixin(PolymerElem
   /** @protected */
   connectedCallback() {
     super.connectedCallback();
-    // Chromium based browsers cannot properly generate drag images for elements
-    // that have children with massive heights. This workaround prevents crashes
-    // and performance issues by excluding the items from the drag image.
-    // https://github.com/vaadin/web-components/issues/7985
-    document.addEventListener('dragstart', this.__onDragStart, { capture: true });
+    document.addEventListener('dragstart', this.__onDocumentDragStart, { capture: true });
   }
 
   /** @protected */
   disconnectedCallback() {
     super.disconnectedCallback();
-    document.removeEventListener('dragstart', this.__onDragStart, { capture: true });
+    document.removeEventListener('dragstart', this.__onDocumentDragStart, { capture: true });
   }
 
   /**
@@ -200,25 +196,24 @@ class VirtualList extends ElementMixin(ControllerMixin(ThemableMixin(PolymerElem
     }
   }
 
-  /** @private */
-  __onDragStart(e) {
-    // The dragged element can be the element itself or a parent of the element
-    if (!e.target.contains(this)) {
-      return;
-    }
-    // The threshold value 20000 provides a buffer to both
-    //   - avoid the crash and the performance issues
-    //   - unnecessarily avoid excluding items from the drag image
-    if (this.$.items.offsetHeight > 20000) {
-      const initialItemsMaxHeight = this.$.items.style.maxHeight;
-      const initialVirtualListOverflow = this.style.overflow;
-      // Momentarily hides the items until the browser starts generating the
-      // drag image.
-      this.$.items.style.maxHeight = '0';
-      this.style.overflow = 'hidden';
+  /**
+   * Webkit-based browsers have issues with generating drag images
+   * for elements that have children with massive heights. Chromium
+   * browsers crash, while Safari experiences significant performance
+   * issues. To mitigate these issues, we hide the items container
+   * when drag starts to remove it from the drag image.
+   *
+   * Related issues:
+   * - https://github.com/vaadin/web-components/issues/7985
+   * - https://issues.chromium.org/issues/383356871
+   *
+   * @private
+   */
+  __onDocumentDragStart(e) {
+    if (e.target.contains(this) && this.scrollHeight > 20000) {
+      this.$.items.style.display = 'none';
       requestAnimationFrame(() => {
-        this.$.items.style.maxHeight = initialItemsMaxHeight;
-        this.style.overflow = initialVirtualListOverflow;
+        this.$.items.style.display = '';
       });
     }
   }

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/virtual-list",
-  "version": "23.5.11",
+  "version": "23.5.12",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/web-types.lit.json

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