@vaadin/virtual-list 24.6.0 → 24.6.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/virtual-list",
-  "version": "24.6.0",
+  "version": "24.6.2",
   "publishConfig": {
     "access": "public"
   },
@@ -39,21 +39,21 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "~24.6.0",
-    "@vaadin/lit-renderer": "~24.6.0",
-    "@vaadin/vaadin-lumo-styles": "~24.6.0",
-    "@vaadin/vaadin-material-styles": "~24.6.0",
-    "@vaadin/vaadin-themable-mixin": "~24.6.0",
+    "@vaadin/component-base": "~24.6.2",
+    "@vaadin/lit-renderer": "~24.6.2",
+    "@vaadin/vaadin-lumo-styles": "~24.6.2",
+    "@vaadin/vaadin-material-styles": "~24.6.2",
+    "@vaadin/vaadin-themable-mixin": "~24.6.2",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "~24.6.0",
-    "@vaadin/testing-helpers": "^1.0.0",
+    "@vaadin/chai-plugins": "~24.6.2",
+    "@vaadin/testing-helpers": "^1.1.0",
     "sinon": "^18.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "c0b38aa981494d04fac64da35aa3890ad72551ea"
+  "gitHead": "ee2ea01a17d888403adb141515a0a3cef82b8b65"
 }

package/src/vaadin-virtual-list-mixin.js

@@ -65,7 +65,7 @@ export const VirtualListMixin = (superClass) =>
 
     constructor() {
       super();
-      this.__onDragStart = this.__onDragStart.bind(this);
+      this.__onDocumentDragStart = this.__onDocumentDragStart.bind(this);
     }
 
     /** @protected */
@@ -89,17 +89,13 @@ export const VirtualListMixin = (superClass) =>
     /** @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 });
     }
 
     /**
@@ -153,25 +149,24 @@ export const VirtualListMixin = (superClass) =>
       }
     }
 
-    /** @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": "24.6.0",
+  "version": "24.6.2",
   "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": "24.6.0",
+  "version": "24.6.2",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {