@vaadin/grid 23.1.7 → 23.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/grid",
-  "version": "23.1.7",
+  "version": "23.1.9",
   "publishConfig": {
     "access": "public"
   },
@@ -43,20 +43,20 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/checkbox": "~23.1.7",
-    "@vaadin/component-base": "~23.1.7",
-    "@vaadin/lit-renderer": "~23.1.7",
-    "@vaadin/text-field": "~23.1.7",
-    "@vaadin/vaadin-lumo-styles": "~23.1.7",
-    "@vaadin/vaadin-material-styles": "~23.1.7",
-    "@vaadin/vaadin-themable-mixin": "~23.1.7"
+    "@vaadin/checkbox": "~23.1.9",
+    "@vaadin/component-base": "~23.1.9",
+    "@vaadin/lit-renderer": "~23.1.9",
+    "@vaadin/text-field": "~23.1.9",
+    "@vaadin/vaadin-lumo-styles": "~23.1.9",
+    "@vaadin/vaadin-material-styles": "~23.1.9",
+    "@vaadin/vaadin-themable-mixin": "~23.1.9"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/polymer-legacy-adapter": "~23.1.7",
+    "@vaadin/polymer-legacy-adapter": "~23.1.9",
     "@vaadin/testing-helpers": "^0.3.2",
     "lit": "^2.0.0",
     "sinon": "^13.0.2"
   },
-  "gitHead": "879a4e5e6a245809bafa0ef2b5cdb24aef72565d"
+  "gitHead": "ad8461e09f049c3f04f50278d38d0f5a98604904"
 }

package/src/vaadin-grid-column-reordering-mixin.js

@@ -161,7 +161,23 @@ export const ColumnReorderingMixin = (superClass) =>
         this._isSwapAllowed(this._draggedColumn, targetColumn) &&
         this._isSwappableByPosition(targetColumn, e.detail.x)
       ) {
-        this._swapColumnOrders(this._draggedColumn, targetColumn);
+        // Get the column header level of the target column (and the dragged column)
+        const columnTreeLevel = this._columnTree.findIndex((level) => level.includes(targetColumn));
+        // Get the columns on that level in visual order
+        const levelColumnsInOrder = this._getColumnsInOrder(columnTreeLevel);
+
+        // Index of the column being dragged
+        const startIndex = levelColumnsInOrder.indexOf(this._draggedColumn);
+        // Index of the column being dragged over
+        const endIndex = levelColumnsInOrder.indexOf(targetColumn);
+
+        // Direction of iteration
+        const direction = startIndex < endIndex ? 1 : -1;
+
+        // Iteratively swap all the columns from the dragged column to the target column
+        for (let i = startIndex; i !== endIndex; i += direction) {
+          this._swapColumnOrders(this._draggedColumn, levelColumnsInOrder[i + direction]);
+        }
       }
 
       this._updateGhostPosition(e.detail.x, this._touchDevice ? e.detail.y - 50 : e.detail.y);
@@ -192,15 +208,14 @@ export const ColumnReorderingMixin = (superClass) =>
     }
 
     /**
+     * Returns the columns (or column groups) on the specified header level in visual order.
+     * By default, the bottom level is used.
+     *
      * @return {!Array<!GridColumn>}
      * @protected
      */
-    _getColumnsInOrder() {
-      return this._columnTree
-        .slice(0)
-        .pop()
-        .filter((c) => !c.hidden)
-        .sort((b, a) => b._order - a._order);
+    _getColumnsInOrder(headerLevel = this._columnTree.length - 1) {
+      return this._columnTree[headerLevel].filter((c) => !c.hidden).sort((b, a) => b._order - a._order);
     }
 
     /**

package/src/vaadin-grid-drag-and-drop-mixin.js

@@ -17,6 +17,9 @@ const DropLocation = {
   EMPTY: 'empty',
 };
 
+// Detects if the browser doesn't support HTML5 Drag & Drop API (and falls back to the @vaadin/vaadin-mobile-drag-drop polyfill)
+const usesDnDPolyfill = !('draggable' in document.createElement('div'));
+
 /**
  * @polymerMixin
  */
@@ -133,9 +136,11 @@ export const DragAndDropMixin = (superClass) =>
 
         const rowRect = row.getBoundingClientRect();
 
-        if (this._ios) {
+        if (usesDnDPolyfill) {
+          // The polyfill drag image is automatically centered so there is no need to adjust the position
           e.dataTransfer.setDragImage(row);
         } else {
+          // The native drag image needs to be shifted manually to compensate for the touch position offset
           e.dataTransfer.setDragImage(row, e.clientX - rowRect.left, e.clientY - rowRect.top);
         }
 

package/src/vaadin-grid.js

@@ -998,7 +998,9 @@ class Grid extends ElementMixin(
       // Header and footer renderers
       this._columnTree.forEach((level) => {
         level.forEach((column) => {
-          column._renderHeaderAndFooter();
+          if (column._renderHeaderAndFooter) {
+            column._renderHeaderAndFooter();
+          }
         });
       });
 

package/theme/lumo/vaadin-grid-styles.js

@@ -170,11 +170,7 @@ registerStyles(
       border-radius: var(--lumo-border-radius-s) 0 0 var(--lumo-border-radius-s);
     }
 
-    [ios] [part~='row'][dragstart] [part~='cell'] {
-      background: var(--lumo-primary-color-50pct);
-    }
-
-    #scroller:not([ios]) [part~='row'][dragstart]:not([dragstart=''])::after {
+    #scroller [part~='row'][dragstart]:not([dragstart=''])::after {
       display: block;
       position: absolute;
       left: var(--_grid-drag-start-x);

package/theme/lumo/vaadin-grid-tree-toggle-styles.js

@@ -10,7 +10,7 @@ registerStyles(
       --vaadin-grid-tree-toggle-level-offset: 2em;
       align-items: center;
       vertical-align: middle;
-      margin-left: calc(var(--lumo-space-s) * -1);
+      transform: translateX(calc(var(--lumo-space-s) * -1));
       -webkit-tap-highlight-color: transparent;
     }
 

package/theme/material/vaadin-grid-styles.js

@@ -221,11 +221,7 @@ registerStyles(
       box-shadow: none !important;
     }
 
-    [ios] [part~='row'][dragstart] [part~='cell'] {
-      background: var(--material-primary-color);
-    }
-
-    #scroller:not([ios]) [part~='row'][dragstart]:not([dragstart=''])::after {
+    #scroller [part~='row'][dragstart]:not([dragstart=''])::after {
       display: block;
       position: absolute;
       left: var(--_grid-drag-start-x);
@@ -262,7 +258,7 @@ registerStyles(
       border-left: 1px solid var(--material-divider-color);
     }
 
-    :host([dir='rtl']) #scroller:not([ios]) [part~='row'][dragstart]:not([dragstart=''])::after {
+    :host([dir='rtl']) #scroller [part~='row'][dragstart]:not([dragstart=''])::after {
       left: auto;
       right: var(--_grid-drag-start-x);
     }