@vaadin/virtual-list 24.6.2 → 24.6.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/virtual-list",
-  "version": "24.6.2",
+  "version": "24.6.4",
   "publishConfig": {
     "access": "public"
   },
@@ -39,15 +39,16 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.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",
+    "@vaadin/component-base": "~24.6.4",
+    "@vaadin/lit-renderer": "~24.6.4",
+    "@vaadin/vaadin-lumo-styles": "~24.6.4",
+    "@vaadin/vaadin-material-styles": "~24.6.4",
+    "@vaadin/vaadin-themable-mixin": "~24.6.4",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "~24.6.2",
+    "@vaadin/chai-plugins": "~24.6.4",
+    "@vaadin/test-runner-commands": "~24.6.4",
     "@vaadin/testing-helpers": "^1.1.0",
     "sinon": "^18.0.0"
   },
@@ -55,5 +56,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "ee2ea01a17d888403adb141515a0a3cef82b8b65"
+  "gitHead": "02d8ac2c39bc2d27fe60acec7d7bac6bdb73d8a1"
 }

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

@@ -3,6 +3,7 @@
  * Copyright (c) 2021 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { isChrome, isSafari } from '@vaadin/component-base/src/browser-utils.js';
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { OverflowController } from '@vaadin/component-base/src/overflow-controller.js';
 import { processTemplates } from '@vaadin/component-base/src/templates.js';
@@ -156,17 +157,43 @@ export const VirtualListMixin = (superClass) =>
      * issues. To mitigate these issues, we hide the items container
      * when drag starts to remove it from the drag image.
      *
+     * Virtual lists with fewer rows also have issues on Chromium and Safari
+     * where the drag image is not properly clipped and may include
+     * content outside the virtual list. Temporary inline styles are applied
+     * to mitigate this issue.
+     *
      * Related issues:
      * - https://github.com/vaadin/web-components/issues/7985
      * - https://issues.chromium.org/issues/383356871
+     * - https://github.com/vaadin/web-components/issues/8386
      *
      * @private
      */
     __onDocumentDragStart(e) {
-      if (e.target.contains(this) && this.scrollHeight > 20000) {
-        this.$.items.style.display = 'none';
+      if (e.target.contains(this)) {
+        // Record the original inline styles to restore them later
+        const elements = [e.target, this.$.items];
+        const originalInlineStyles = elements.map((element) => element.style.cssText);
+
+        // With a large number of rows, hide the items
+        if (this.scrollHeight > 20000) {
+          this.$.items.style.display = 'none';
+        }
+
+        // Workaround content outside the virtual list ending up in the drag image on Chromium
+        if (isChrome) {
+          e.target.style.willChange = 'transform';
+        }
+
+        // Workaround text content outside the virtual list ending up in the drag image on Safari
+        if (isSafari) {
+          this.$.items.style.maxHeight = '100%';
+        }
+
         requestAnimationFrame(() => {
-          this.$.items.style.display = '';
+          elements.forEach((element, index) => {
+            element.style.cssText = originalInlineStyles[index];
+          });
         });
       }
     }

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/virtual-list",
-  "version": "24.6.2",
+  "version": "24.6.4",
   "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.2",
+  "version": "24.6.4",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {