@vaadin/grid 23.1.6 → 23.1.8

package/package.json

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

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.js

@@ -594,6 +594,11 @@ class Grid extends ElementMixin(
     // Flush to make sure DOM is up-to-date when measuring the column widths
     this.__virtualizer.flush();
 
+    // Flush to account for any changes to the visibility of the columns
+    if (this._debouncerHiddenChanged) {
+      this._debouncerHiddenChanged.flush();
+    }
+
     cols.forEach((col) => {
       col.width = `${this.__getDistributedWidth(col)}px`;
     });
@@ -993,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();
+          }
         });
       });