@vaadin/vaadin-grid 21.0.1 → 21.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/vaadin-grid",
-  "version": "21.0.1",
+  "version": "21.0.5",
   "description": "A free, flexible and high-quality Web Component for showing large amounts of tabular data",
   "main": "vaadin-grid.js",
   "module": "vaadin-grid.js",
@@ -32,23 +32,23 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/vaadin-checkbox": "^21.0.1",
-    "@vaadin/vaadin-element-mixin": "^21.0.1",
-    "@vaadin/vaadin-lumo-styles": "^21.0.1",
-    "@vaadin/vaadin-material-styles": "^21.0.1",
-    "@vaadin/vaadin-text-field": "^21.0.1",
-    "@vaadin/vaadin-themable-mixin": "^21.0.1",
-    "@vaadin/vaadin-virtual-list": "^21.0.1"
+    "@vaadin/vaadin-checkbox": "^21.0.5",
+    "@vaadin/vaadin-element-mixin": "^21.0.5",
+    "@vaadin/vaadin-lumo-styles": "^21.0.5",
+    "@vaadin/vaadin-material-styles": "^21.0.5",
+    "@vaadin/vaadin-text-field": "^21.0.5",
+    "@vaadin/vaadin-themable-mixin": "^21.0.5",
+    "@vaadin/vaadin-virtual-list": "^21.0.5"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.1.5",
     "@vaadin/testing-helpers": "^0.2.1",
-    "@vaadin/vaadin-template-renderer": "^21.0.1",
-    "lit": "^2.0.0-rc.1",
+    "@vaadin/vaadin-template-renderer": "^21.0.5",
+    "lit": "^2.0.0",
     "sinon": "^9.2.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "91e44dcfa63dc5e30e1e8d18be499b3e1e17b1c4"
+  "gitHead": "c79135f420e560fa566afc1377db9585757bc4c3"
 }

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

@@ -85,7 +85,7 @@ export const DragAndDropMixin = (superClass) =>
     }
 
     static get observers() {
-      return ['_dragDropAccessChanged(rowsDraggable, dropMode, dragFilter, dropFilter)'];
+      return ['_dragDropAccessChanged(rowsDraggable, dropMode, dragFilter, dropFilter, loading)'];
     }
 
     /** @protected */
@@ -376,8 +376,9 @@ export const DragAndDropMixin = (superClass) =>
      * @protected
      */
     _filterDragAndDrop(row, model) {
-      const dragDisabled = !this.rowsDraggable || (this.dragFilter && !this.dragFilter(model));
-      const dropDisabled = !this.dropMode || (this.dropFilter && !this.dropFilter(model));
+      const loading = this.loading || row.hasAttribute('loading');
+      const dragDisabled = !this.rowsDraggable || loading || (this.dragFilter && !this.dragFilter(model));
+      const dropDisabled = !this.dropMode || loading || (this.dropFilter && !this.dropFilter(model));
 
       const draggableElements = Array.from(row.children).map((cell) => cell._content);
 

package/src/vaadin-grid-selection-column.js

@@ -184,7 +184,11 @@ class GridSelectionColumnElement extends GridColumnElement {
       return;
     }
 
-    this._grid.selectedItems = selectAll && Array.isArray(this._grid.items) ? this.__getRootLevelItems() : [];
+    if (selectAll && Array.isArray(this._grid.items)) {
+      this.__withFilteredItemsArray((items) => (this._grid.selectedItems = items));
+    } else {
+      this._grid.selectedItems = [];
+    }
   }
 
   /**
@@ -251,26 +255,22 @@ class GridSelectionColumnElement extends GridColumnElement {
     this.__previousActiveItem = activeItem;
   }
 
-  /** @private */
-  __getRootLevelItems() {
-    const rootCache = this._grid._cache;
-    return [...Array(rootCache.size)].map((_, idx) => rootCache.items[idx]);
-  }
-
   /** @private */
   __onSelectedItemsChanged() {
     this._selectAllChangeLock = true;
     if (Array.isArray(this._grid.items)) {
-      if (!this._grid.selectedItems.length) {
-        this.selectAll = false;
-        this.__indeterminate = false;
-      } else if (this.__arrayContains(this._grid.selectedItems, this.__getRootLevelItems())) {
-        this.selectAll = true;
-        this.__indeterminate = false;
-      } else {
-        this.selectAll = false;
-        this.__indeterminate = true;
-      }
+      this.__withFilteredItemsArray((items) => {
+        if (!this._grid.selectedItems.length) {
+          this.selectAll = false;
+          this.__indeterminate = false;
+        } else if (this.__arrayContains(this._grid.selectedItems, items)) {
+          this.selectAll = true;
+          this.__indeterminate = false;
+        } else {
+          this.selectAll = false;
+          this.__indeterminate = true;
+        }
+      });
     }
     this._selectAllChangeLock = false;
   }
@@ -279,6 +279,22 @@ class GridSelectionColumnElement extends GridColumnElement {
   __onDataProviderChanged() {
     this.__selectAllHidden = !Array.isArray(this._grid.items);
   }
+
+  /**
+   * Assuming the grid uses an items array data provider, fetches all the filtered items
+   * from the data provider and invokes the callback with the resulting array.
+   *
+   * @private
+   */
+  __withFilteredItemsArray(callback) {
+    const params = {
+      page: 0,
+      pageSize: Infinity,
+      sortOrders: [],
+      filters: this._grid._mapFilters()
+    };
+    this._grid.dataProvider(params, (items) => callback(items));
+  }
 }
 
 customElements.define(GridSelectionColumnElement.is, GridSelectionColumnElement);

package/src/vaadin-grid.js

@@ -317,7 +317,7 @@ class GridElement extends ElementMixin(
   }
 
   static get version() {
-    return '21.0.1';
+    return '21.0.5';
   }
 
   static get observers() {
@@ -540,42 +540,72 @@ class GridElement extends ElementMixin(
     }
   }
 
+  /** @private */
+  __getIntrinsicWidth(col) {
+    const initialWidth = col.width;
+    const initialFlexGrow = col.flexGrow;
+
+    col.width = 'auto';
+    col.flexGrow = 0;
+
+    // Note: _allCells only contains cells which are currently rendered in DOM
+    const width = col._allCells
+      .filter((cell) => {
+        // Exclude body cells that are out of the visible viewport
+        return !this.$.items.contains(cell) || this._isInViewport(cell.parentElement);
+      })
+      .reduce((width, cell) => {
+        // Add 1px buffer to the offset width to avoid too narrow columns (sub-pixel rendering)
+        return Math.max(width, cell.offsetWidth + 1);
+      }, 0);
+
+    col.flexGrow = initialFlexGrow;
+    col.width = initialWidth;
+
+    return width;
+  }
+
+  /** @private */
+  __getDistributedWidth(col, innerColumn) {
+    if (col == null || col === this) return 0;
+
+    const columnWidth = Math.max(this.__getIntrinsicWidth(col), this.__getDistributedWidth(col.parentElement, col));
+
+    // we're processing a regular grid-column and not a grid-column-group
+    if (!innerColumn) {
+      return columnWidth;
+    }
+
+    // At the end, the width of each vaadin-grid-column-group is determined by the sum of the width of its children.
+    // Here we determine how much space the vaadin-grid-column-group actually needs to render properly and then we distribute that space
+    // to its children, so when we actually do the summation it will be rendered properly.
+    // Check out vaadin-grid-column-group:_updateFlexAndWidth
+    const columnGroup = col;
+    const columnGroupWidth = columnWidth;
+    const sumOfWidthOfAllChildColumns = columnGroup._visibleChildColumns
+      .map((col) => this.__getIntrinsicWidth(col))
+      .reduce((sum, curr) => sum + curr, 0);
+
+    const extraNecessarySpaceForGridColumnGroup = Math.max(0, columnGroupWidth - sumOfWidthOfAllChildColumns);
+
+    // The distribution of the extra necessary space is done according to the intrinsic width of each child column.
+    // Lets say we need 100 pixels of extra space for the grid-column-group to render properly
+    // it has two grid-column children, |100px|300px| in total 400px
+    // the first column gets 25px of the additional space (100/400)*100 = 25
+    // the second column gets the 75px of the additional space (300/400)*100 = 75
+    const proportionOfExtraSpace = this.__getIntrinsicWidth(innerColumn) / sumOfWidthOfAllChildColumns;
+    const shareOfInnerColumnFromNecessaryExtraSpace = proportionOfExtraSpace * extraNecessarySpaceForGridColumnGroup;
+
+    return this.__getIntrinsicWidth(innerColumn) + shareOfInnerColumnFromNecessaryExtraSpace;
+  }
+
   /**
    * @param {!Array<!GridColumnElement>} cols the columns to auto size based on their content width
    * @private
    */
   _recalculateColumnWidths(cols) {
-    // Note: The `cols.forEach()` loops below could be implemented as a single loop but this has been
-    // split for performance reasons to batch these similar actions [write/read] together to avoid
-    // unnecessary layout trashing.
-
-    // [write] Set automatic width for all cells (breaks column alignment)
-    cols.forEach((col) => {
-      col.width = 'auto';
-      col._origFlexGrow = col.flexGrow;
-      col.flexGrow = 0;
-    });
-    // [read] Measure max cell width in each column
-    cols.forEach((col) => {
-      col._currentWidth = 0;
-      // Note: _allCells only contains cells which are currently rendered in DOM
-      col._allCells
-        .filter((c) => {
-          // Exclude body cells that are out of the visible viewport
-          return !this.$.items.contains(c) || this._isInViewport(c.parentElement);
-        })
-        .forEach((c) => {
-          // Add 1px buffer to the offset width to avoid too narrow columns (sub-pixel rendering)
-          const cellWidth = c.offsetWidth + 1;
-          col._currentWidth = Math.max(col._currentWidth, cellWidth);
-        });
-    });
-    // [write] Set column widths to fit widest measured content
     cols.forEach((col) => {
-      col.width = `${col._currentWidth}px`;
-      col.flexGrow = col._origFlexGrow;
-      col._currentWidth = undefined;
-      col._origFlexGrow = undefined;
+      col.width = `${this.__getDistributedWidth(col)}px`;
     });
   }
 
@@ -864,6 +894,7 @@ class GridElement extends ElementMixin(
     this._a11yUpdateHeaderRows();
     this._a11yUpdateFooterRows();
     this.__updateFooterPositioning();
+    this.generateCellClassNames();
   }
 
   __updateFooterPositioning() {