@vaadin/vaadin-grid 5.9.5 → 5.9.7

package/package.json

@@ -15,7 +15,7 @@
   "repository": "vaadin/vaadin-grid",
   "homepage": "https://vaadin.com/components",
   "name": "@vaadin/vaadin-grid",
-  "version": "5.9.5",
+  "version": "5.9.7",
   "main": "vaadin-grid.js",
   "author": "Vaadin Ltd",
   "license": "Apache-2.0",

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

@@ -82,11 +82,8 @@ class GridColumnGroupElement extends ColumnBaseMixin(PolymerElement) {
 
   static get observers() {
     return [
-      '_updateVisibleChildColumns(_childColumns)',
-      '_childColumnsChanged(_childColumns)',
       '_groupFrozenChanged(frozen, _rootColumns)',
-      '_groupHiddenChanged(hidden, _rootColumns)',
-      '_visibleChildColumnsChanged(_visibleChildColumns)',
+      '_groupHiddenChanged(hidden)',
       '_colSpanChanged(_colSpan, _headerCell, _footerCell)',
       '_groupOrderChanged(_order, _rootColumns)',
       '_groupReorderStatusChanged(_reorderStatus, _rootColumns)',
@@ -114,9 +111,12 @@ class GridColumnGroupElement extends ColumnBaseMixin(PolymerElement) {
    */
   _columnPropChanged(path, value) {
     if (path === 'hidden') {
-      this._preventHiddenCascade = true;
+      // Prevent synchronization of the hidden state to child columns.
+      // If the group is currently auto-hidden, and one column is made visible,
+      // we don't want the other columns to become visible as well.
+      this._preventHiddenSynchronization = true;
       this._updateVisibleChildColumns(this._childColumns);
-      this._preventHiddenCascade = false;
+      this._preventHiddenSynchronization = false;
     }
 
     if (/flexGrow|width|hidden|_childColumns/.test(path)) {
@@ -188,15 +188,9 @@ class GridColumnGroupElement extends ColumnBaseMixin(PolymerElement) {
 
   /** @private */
   _updateVisibleChildColumns(childColumns) {
-    this._visibleChildColumns = Array.prototype.filter.call(childColumns, col => !col.hidden);
-  }
-
-  /** @private */
-  _childColumnsChanged(childColumns) {
-    if (!this._autoHidden && this.hidden) {
-      Array.prototype.forEach.call(childColumns, column => column.hidden = true);
-      this._updateVisibleChildColumns(childColumns);
-    }
+    this._visibleChildColumns = Array.prototype.filter.call(childColumns, (col) => !col.hidden);
+    this._colSpan = this._visibleChildColumns.length;
+    this._updateAutoHidden();
   }
 
   /** @protected */
@@ -230,26 +224,31 @@ class GridColumnGroupElement extends ColumnBaseMixin(PolymerElement) {
   }
 
   /** @private */
-  _groupHiddenChanged(hidden, rootColumns) {
-    if (rootColumns && !this._preventHiddenCascade) {
-      this._ignoreVisibleChildColumns = true;
-      rootColumns.forEach(column => column.hidden = hidden);
-      this._ignoreVisibleChildColumns = false;
+  _groupHiddenChanged(hidden) {
+    // When initializing the hidden property, only sync hidden state to columns
+    // if group is actually hidden. Otherwise, we could override a hidden column
+    // to be visible.
+    // We always want to run this though if the property is actually changed.
+    if (hidden || this.__groupHiddenInitialized) {
+      this._synchronizeHidden();
     }
+    this.__groupHiddenInitialized = true;
+  }
 
-    this._columnPropChanged('hidden');
+  /** @private */
+  _updateAutoHidden() {
+    const wasAutoHidden = this._autoHidden;
+    this._autoHidden = (this._visibleChildColumns || []).length === 0;
+    // Only modify hidden state if group was auto-hidden, or becomes auto-hidden
+    if (wasAutoHidden || this._autoHidden) {
+      this.hidden = this._autoHidden;
+    }
   }
 
   /** @private */
-  _visibleChildColumnsChanged(visibleChildColumns) {
-    this._colSpan = visibleChildColumns.length;
-
-    if (!this._ignoreVisibleChildColumns) {
-      if (visibleChildColumns.length === 0) {
-        this._autoHidden = this.hidden = true;
-      } else if (this.hidden && this._autoHidden) {
-        this._autoHidden = this.hidden = false;
-      }
+  _synchronizeHidden() {
+    if (this._childColumns && !this._preventHiddenSynchronization) {
+      this._childColumns.forEach((column) => (column.hidden = this.hidden));
     }
   }
 
@@ -280,10 +279,14 @@ class GridColumnGroupElement extends ColumnBaseMixin(PolymerElement) {
       if (info.addedNodes.filter(this._isColumnElement).length > 0 ||
         info.removedNodes.filter(this._isColumnElement).length > 0) {
 
-        this._preventHiddenCascade = true;
+        // Prevent synchronization of the hidden state to child columns.
+        // If the group is currently auto-hidden, and a visible column is added,
+        // we don't want the other columns to become visible as well.
+        this._preventHiddenSynchronization = true;
         this._rootColumns = this._getChildColumns(this);
         this._childColumns = this._rootColumns;
-        this._preventHiddenCascade = false;
+        this._updateVisibleChildColumns(this._childColumns);
+        this._preventHiddenSynchronization = false;
 
         // Update the column tree with microtask timing to avoid shady style scope issues
         microTask.run(() => {

package/src/vaadin-grid-column-reordering-mixin.d.ts

@@ -36,7 +36,12 @@ interface ColumnReorderingMixin {
    */
   columnReorderingAllowed: boolean;
   ready(): void;
-  _getColumnsInOrder(): GridColumnElement[];
+
+  /**
+   * Returns the columns (or column groups) on the specified header level in visual order.
+   * By default, the bottom level is used.
+   */
+  _getColumnsInOrder(headerLevel: any): GridColumnElement[];
   _cellFromPoint(x: number, y: number): HTMLElement|null|undefined;
   _updateGhostPosition(eventClientX: number, eventClientY: number): void;
   _getInnerText(e: Element): string;

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

@@ -165,7 +165,23 @@ export const ColumnReorderingMixin = superClass => class ColumnReorderingMixin e
     const targetColumn = this._getTargetColumn(targetCell, this._draggedColumn);
     if (this._isSwapAllowed(this._draggedColumn, targetColumn) &&
       this._isSwappableByPosition(targetColumn, e.detail.x)) {
-      this._swapColumnOrders(this._draggedColumn, targetColumn);
+      // Get the header level of the target column (and the dragged column)
+      const columnTreeLevel = this.__getColumnTreeLevel(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,13 +208,17 @@ export const ColumnReorderingMixin = superClass => class ColumnReorderingMixin e
   }
 
   /**
+   * Returns the columns (or column groups) on the specified header level in visual order.
+   * By default, the bottom level is used.
+   *
    * @return {!Array<!GridColumnElement>}
    * @protected
    */
-  _getColumnsInOrder() {
-    return this._columnTree.slice(0).pop()
-      .filter(c => !c.hidden)
-      .sort((b, a) => (b._order - a._order));
+  _getColumnsInOrder(headerLevel) {
+    if (!headerLevel && headerLevel !== 0) {
+      headerLevel = this._columnTree.length - 1;
+    }
+    return this._columnTree[headerLevel].filter((c) => !c.hidden).sort((b, a) => b._order - a._order);
   }
 
   /**
@@ -401,6 +421,16 @@ export const ColumnReorderingMixin = superClass => class ColumnReorderingMixin e
     }
   }
 
+  /** @private */
+  __getColumnTreeLevel(column) {
+    for (let level = 0; level < this._columnTree.length; level++) {
+      if (this._columnTree[level].indexOf(column) >= 0) {
+        return level;
+      }
+    }
+    return -1;
+  }
+
   /**
    * Fired when the columns in the grid are reordered.
    *

package/src/vaadin-grid-column.js

@@ -310,10 +310,6 @@ export const ColumnBaseMixin = superClass => class ColumnBaseMixin extends super
 
   /** @private */
   __setColumnTemplateOrRenderer(template, renderer, cells) {
-    // no renderer or template needed in a hidden column
-    if (this.hidden) {
-      return;
-    }
     if (template && renderer) {
       throw new Error('You should only use either a renderer or a template');
     }

package/src/vaadin-grid-scroller.js

@@ -277,6 +277,27 @@ class GridScrollerElement extends PolymerIronList {
   _scrollHandler() {
     const delta = this.$.table.scrollTop - this._scrollPosition;
     this._accessIronListAPI(super._scrollHandler);
+
+    if (this._physicalCount !== 0) {
+      const isScrollingDown = delta >= 0;
+      const reusables = this._getReusables(!isScrollingDown);
+
+      if (reusables.indexes.length) {
+        // After running super._scrollHandler, fix internal properties to workaround an iron-list issue.
+        // See https://github.com/vaadin/web-components/issues/1691
+        this._physicalTop = reusables.physicalTop;
+
+        if (isScrollingDown) {
+          this._virtualStart -= reusables.indexes.length;
+          this._physicalStart -= reusables.indexes.length;
+        } else {
+          this._virtualStart += reusables.indexes.length;
+          this._physicalStart += reusables.indexes.length;
+        }
+        this._update(reusables.indexes, !isScrollingDown);
+      }
+    }
+
     const oldOffset = this._vidxOffset;
     if (this._accessIronListAPI(() => this._maxScrollTop) && this._virtualCount < this._effectiveSize) {
       this._adjustVirtualIndexOffset(delta);

package/src/vaadin-grid.js

@@ -325,7 +325,7 @@ class GridElement extends
   }
 
   static get version() {
-    return '5.9.5';
+    return '5.9.7';
   }
 
   static get observers() {