@vaadin/vaadin-grid 5.8.3 → 5.9.2

package/package.json

@@ -15,7 +15,7 @@
   "repository": "vaadin/vaadin-grid",
   "homepage": "https://vaadin.com/components",
   "name": "@vaadin/vaadin-grid",
-  "version": "5.8.3",
+  "version": "5.9.2",
   "main": "vaadin-grid.js",
   "author": "Vaadin Ltd",
   "license": "Apache-2.0",
@@ -45,32 +45,33 @@
   },
   "resolutions": {
 "@webcomponents/webcomponentsjs": "2.0.0",
-    "es-abstract": "1.17.6",
-    "@types/doctrine": "0.0.3",
     "inherits": "2.0.3",
     "samsam": "1.1.3",
     "supports-color": "3.1.2",
     "type-detect": "1.0.0"
   },
   "scripts": {
-  "generate-typings": "gen-typescript-declarations --outDir . --verify"
-},
-"devDependencies": {
-    "@webcomponents/webcomponentsjs": "^2.0.0",
-    "wct-browser-legacy": "^1.0.1",
+    "generate-typings": "gen-typescript-declarations --outDir . --verify",
+    "test": "wct --npm"
+  },
+  "devDependencies": {
+    "@web-padawan/gen-typescript-declarations": "^1.6.2",
+    "web-component-tester": "6.9.2",
+    "@polymer/app-localize-behavior": "^3.0.0",
+    "@polymer/iron-ajax": "^3.0.0",
+    "@polymer/iron-component-page": "^4.0.0",
+    "@polymer/iron-image": "^3.0.0",
+    "@polymer/iron-list": "^3.0.0",
+    "@polymer/iron-media-query": "^3.0.0",
     "@polymer/iron-test-helpers": "^3.0.0",
-    "@polymer/paper-input": "^3.0.0",
     "@polymer/paper-checkbox": "^3.0.0",
-    "@polymer/iron-flex-layout": "^3.0.0",
-    "@polymer/iron-image": "^3.0.0",
+    "@polymer/paper-input": "^3.0.0",
     "@polymer/paper-slider": "^3.0.0",
-    "@polymer/iron-media-query": "^3.0.0",
-    "@polymer/iron-component-page": "^4.0.0",
-    "@polymer/iron-ajax": "^3.0.0",
-    "@polymer/app-localize-behavior": "^3.0.0",
-    "@polymer/iron-list": "^3.0.0",
-    "@vaadin/vaadin-demo-helpers": "^3.1.0",
+    "@polymer/test-fixture": "^4.0.0",
     "@vaadin/vaadin-button": "^2.4.0",
-    "@vaadin/vaadin-context-menu": "^4.5.0"
+    "@vaadin/vaadin-context-menu": "^4.5.0",
+    "@vaadin/vaadin-demo-helpers": "^3.1.0",
+    "@webcomponents/webcomponentsjs": "^2.0.0",
+    "wct-browser-legacy": "^1.0.1"
   }
 }

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

@@ -8,6 +8,7 @@ import '@polymer/polymer/polymer-legacy.js';
 import { microTask } from '@polymer/polymer/lib/utils/async.js';
 import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
 import { ColumnBaseMixin } from './vaadin-grid-column.js';
+import { GridHelper } from './vaadin-grid-helpers.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 /**
  * A `<vaadin-grid-column-group>` is used to make groups of columns in `<vaadin-grid>` and
@@ -153,7 +154,7 @@ class GridColumnGroupElement extends ColumnBaseMixin(PolymerElement) {
 
       // In an unlikely situation where a group has more than 9 child columns,
       // the child scope must have 1 digit less...
-      const childCountDigits = ~~(Math.log(rootColumns.length) / Math.log(Math.LN10)) + 1;
+      const childCountDigits = ~~(Math.log(rootColumns.length) / Math.LN10) + 1;
 
       // Final scope for the child columns needs to mind both factors.
       const scope = Math.pow(10, trailingZeros - childCountDigits);
@@ -163,7 +164,7 @@ class GridColumnGroupElement extends ColumnBaseMixin(PolymerElement) {
         _rootColumns.sort((a, b) => a._order - b._order);
       }
 
-      _rootColumns.forEach((column, index) => column._order = order + ((index + 1) * scope));
+      GridHelper._updateColumnOrders(_rootColumns, scope, order);
     }
   }
 

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

@@ -5,9 +5,9 @@ This program is available under Apache License Version 2.0, available at https:/
 */
 import { GestureEventListeners } from '@polymer/polymer/lib/mixins/gesture-event-listeners.js';
 
+import { GridHelper } from './vaadin-grid-helpers.js';
 import { addListener } from '@polymer/polymer/lib/utils/gestures.js';
 import { dom } from '@polymer/polymer/lib/legacy/polymer.dom.js';
-import { useShadow } from '@polymer/polymer/lib/utils/settings.js';
 
 /**
  * @polymerMixin
@@ -213,15 +213,24 @@ export const ColumnReorderingMixin = superClass => class ColumnReorderingMixin e
     if (!this._draggedColumn) {
       this._toggleAttribute('no-content-pointer-events', true, this.$.scroller);
     }
+    // Workaround a ShadyDOM bug
+    this._reorderGhost.hidden = true;
+
     let cell;
-    if (useShadow) {
+    if (this.shadowRoot.elementFromPoint) {
       cell = this.shadowRoot.elementFromPoint(x, y);
     } else {
       cell = document.elementFromPoint(x, y);
+    }
 
-      // Workaround a FF58 bug
+    this._reorderGhost.hidden = false;
+
+    // Workaround FF58/ShadyDOM bugs
+    while (!cell._column && cell.parentElement) {
       if (cell.localName === 'vaadin-grid-cell-content') {
         cell = cell.assignedSlot.parentNode;
+      } else {
+        cell = cell.parentElement;
       }
 
     }
@@ -293,7 +302,7 @@ export const ColumnReorderingMixin = superClass => class ColumnReorderingMixin e
     // Reset all column orders
     columnTree[0].forEach((column, index) => column._order = 0);
     // Set order numbers to top-level columns
-    columnTree[0].forEach((column, index) => column._order = (index + 1) * this._orderBaseScope);
+    GridHelper._updateColumnOrders(columnTree[0], this._orderBaseScope, 0);
   }
 
   /**

package/src/vaadin-grid-column.js

@@ -319,7 +319,15 @@ export const ColumnBaseMixin = superClass => class ColumnBaseMixin extends super
     }
 
     cells.forEach(cell => {
-      const model = this._grid.__getRowModel(cell.parentElement);
+      const parent = cell.parentElement;
+
+      // When a column is made hidden and shown again, in some instances it breaks rendering of rows for grid
+      // this happens when parent element of cell is null, which might not be set correctly during rendering
+      // the newly shown column, this check simply avoid that case
+      if (!parent) {
+        return;
+      }
+      const model = this._grid.__getRowModel(parent);
 
       if (renderer) {
         cell._renderer = renderer;

package/src/vaadin-grid-data-provider-mixin.js

@@ -395,7 +395,7 @@ export const DataProviderMixin = superClass => class DataProviderMixin extends s
           this._debouncerApplyCachedData.flush();
         }
 
-        this.__itemsReceived();
+        this.__flushPendingRecalculateColumnWidths();
       });
     }
   }

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

@@ -87,7 +87,7 @@ export const DragAndDropMixin = superClass => class DragAndDropMixin extends sup
 
   static get observers() {
     return [
-      '_dragDropAccessChanged(rowsDraggable, dropMode, dragFilter, dropFilter)'
+      '_dragDropAccessChanged(rowsDraggable, dropMode, dragFilter, dropFilter, loading)'
     ];
   }
 
@@ -297,13 +297,17 @@ export const DragAndDropMixin = superClass => class DragAndDropMixin extends sup
 
   /** @private */
   __getViewportRows() {
-    const headerBottom = this.$.header.getBoundingClientRect().bottom;
-    const footerTop = this.$.footer.getBoundingClientRect().top;
-    return Array.from(this.$.items.children)
-      .filter(row => {
-        const rowRect = row.getBoundingClientRect();
-        return rowRect.bottom > headerBottom && rowRect.top < footerTop;
-      });
+    // Workaround an IE11 bug where the `getBoundingClientRect` for header/footer
+    // might return incorrect values
+    this.$.header.style.outline = '0px solid transparent';
+    const scrollerRect = this.$.scroller.getBoundingClientRect();
+    const headerBottom = Math.max(this.$.header.getBoundingClientRect().bottom, scrollerRect.top);
+    const footerTop = Math.min(this.$.footer.getBoundingClientRect().top, scrollerRect.bottom);
+
+    return Array.from(this.$.items.children).filter((row) => {
+      const rowRect = row.getBoundingClientRect();
+      return rowRect.bottom > headerBottom && rowRect.top < footerTop;
+    });
   }
 
   /** @protected */
@@ -382,8 +386,9 @@ export const DragAndDropMixin = superClass => class DragAndDropMixin extends sup
    * @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 = window.ShadyDOM
       ? [row]

package/src/vaadin-grid-helpers.js

@@ -0,0 +1,26 @@
+/**
+@license
+Copyright (c) 2017 Vaadin Ltd.
+This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+*/
+/** @private */
+export const GridHelper = class VaadinGridHelper {
+
+  /**
+    * @param {Array<Object>} columns array of columns to be modified
+    * @param {number} scope multiplier added to base order for each column
+    * @param {number} baseOrder base number used for order
+    */
+  static _updateColumnOrders(columns, scope, baseOrder) {
+    let c = 1;
+    columns.forEach((column) => {
+      // avoid multiples of 10 because they introduce and extra zero and
+      // causes the underlying calculations for child order goes wrong
+      if (c % 10 === 0) {
+        c++;
+      }
+      column._order = baseOrder + c * scope;
+      c++;
+    });
+  }
+};

package/src/vaadin-grid-keyboard-navigation-mixin.js

@@ -532,6 +532,12 @@ export const KeyboardNavigationMixin = superClass => class KeyboardNavigationMix
       }
       // Inform cell content of the focus (used in <vaadin-grid-sorter>)
       cell._content.dispatchEvent(new CustomEvent('cell-focusin', {bubbles: false}));
+
+      // Fire a public event for cell focus.
+      const context = this.getEventContext(e);
+      cell.dispatchEvent(
+        new CustomEvent('cell-focus', {bubbles: true, composed: true, detail: {context: context}})
+      );
     }
 
     this._detectFocusedItemIndex(e);
@@ -738,4 +744,12 @@ export const KeyboardNavigationMixin = superClass => class KeyboardNavigationMix
     }
     return null;
   }
+
+  /**
+   * Fired when a cell is focused with click or keyboard navigation.
+   *
+   * Use context property of @see {@link GridCellFocusEvent} to get detail information about the event.
+   *
+   * @event cell-focus
+   */
 };

package/src/vaadin-grid-scroller.js

@@ -79,7 +79,13 @@ class GridScrollerElement extends PolymerIronList {
     this._scrollingToIndex = true;
     index = Math.min(Math.max(index, 0), this._effectiveSize - 1);
     this.$.table.scrollTop = index / this._effectiveSize * (this.$.table.scrollHeight - this.$.table.offsetHeight);
+
+    // We need to run the iron-list scroll handler here in order to recalculate the scaling from effective size to
+    // virtual size after changing the scroll position. However we don't want to trigger updates to the items / rows
+    // in this step, which could result in data provider requests for the previous viewport
+    this._preventItemUpdates = true;
     this._scrollHandler();
+    this._preventItemUpdates = false;
 
     if (this._accessIronListAPI(() => this._maxScrollTop) && this._virtualCount < this._effectiveSize) {
       this._adjustVirtualIndexOffset(1000000);
@@ -209,6 +215,7 @@ class GridScrollerElement extends PolymerIronList {
             // Ensure the rows are in order after increasing pool
             this.__reorderChildNodes();
           }
+          this.__flushPendingRecalculateColumnWidths();
         });
     }
   }
@@ -255,6 +262,10 @@ class GridScrollerElement extends PolymerIronList {
    * @protected
    */
   _assignModels(itemSet) {
+    // Skip here if internal flag for preventing item updates is set
+    if (this._preventItemUpdates) {
+      return;
+    }
     this._iterateItems((pidx, vidx) => {
       const el = this._physicalItems[pidx];
       this._toggleAttribute('hidden', vidx >= this._effectiveSize, el);
@@ -430,6 +441,19 @@ class GridScrollerElement extends PolymerIronList {
     super._resizeHandler();
     flush();
   }
+
+  __isCreatingRows() {
+    // iron-list's _increasePoolIfNeeded function may have scheduled a debouncer
+    // that will re-invoke _increasePoolIfNeeded (in vaadin-grid-scroller)
+    const schedulingDebounceIncreasePool = this._debouncers
+      && this._debouncers._increasePoolIfNeeded
+      && this._debouncers._increasePoolIfNeeded.isActive();
+    // vaadin-grid-scroller's overridden _increasePoolIfNeeded may have scheduled a _debounceIncreasePool debouncer
+    const debouncingIncreasePoolActive = this._debounceIncreasePool && this._debounceIncreasePool.isActive();
+
+    // If either of the conditions are true, we consider the grid is still in the process of creating new rows
+    return schedulingDebounceIncreasePool || debouncingIncreasePoolActive;
+  }
 }
 
 customElements.define(GridScrollerElement.is, GridScrollerElement);

package/src/vaadin-grid-tree-toggle.js

@@ -197,7 +197,7 @@ class GridTreeToggleElement extends ThemableMixin(DirMixin(PolymerElement)) {
   /** @private */
   _levelChanged(level) {
     const value = Number(level).toString();
-    this.style['---level'] = value;
+    this.updateStyles({'---level': value});
     // Async is to make DOM updates applied before evaluating the style
     // update, required for polyfilled RTL support in MSIE and Edge.
     this._debouncerUpdateLevel = Debouncer.debounce(

package/src/vaadin-grid.d.ts

@@ -255,7 +255,7 @@ import {timeOut, animationFrame} from '@polymer/polymer/lib/utils/async.js';
  * `reorder-status` | Reflects the status of a cell while columns are being reordered | cell
  * `frozen` | Frozen cell | cell
  * `last-frozen` | Last frozen cell | cell
- * * `first-column` | First visible cell on a row | cell
+ * `first-column` | First visible cell on a row | cell
  * `last-column` | Last visible cell on a row | cell
  * `selected` | Selected row | row
  * `expanded` | Expanded row | row
@@ -263,6 +263,7 @@ import {timeOut, animationFrame} from '@polymer/polymer/lib/utils/async.js';
  * `loading` | Row that is waiting for data from data provider | row
  * `odd` | Odd row | row
  * `first` | The first body row | row
+ * `last` | The last body row | row
  * `dragstart` | Set for one frame when drag of a row is starting. The value is a number when multiple rows are dragged | row
  * `dragover` | Set when the row is dragged over | row
  * `drag-disabled` | Set to a row that isn't available for dragging | row
@@ -313,7 +314,7 @@ declare class GridElement extends
   allRowsVisible: boolean;
   connectedCallback(): void;
   attributeChangedCallback(name: string, oldValue: string|null, newValue: string|null): void;
-  __itemsReceived(): void;
+  __flushPendingRecalculateColumnWidths(): void;
 
   /**
    * Updates the `width` of all columns which have `autoWidth` set to `true`.

package/src/vaadin-grid.js

@@ -239,7 +239,7 @@ const TOUCH_DEVICE = (() => {
  * `reorder-status` | Reflects the status of a cell while columns are being reordered | cell
  * `frozen` | Frozen cell | cell
  * `last-frozen` | Last frozen cell | cell
-* * `first-column` | First visible cell on a row | cell
+ * `first-column` | First visible cell on a row | cell
  * `last-column` | Last visible cell on a row | cell
  * `selected` | Selected row | row
  * `expanded` | Expanded row | row
@@ -247,6 +247,7 @@ const TOUCH_DEVICE = (() => {
  * `loading` | Row that is waiting for data from data provider | row
  * `odd` | Odd row | row
  * `first` | The first body row | row
+ * `last` | The last body row | row
  * `dragstart` | Set for one frame when drag of a row is starting. The value is a number when multiple rows are dragged | row
  * `dragover` | Set when the row is dragged over | row
  * `drag-disabled` | Set to a row that isn't available for dragging | row
@@ -322,7 +323,7 @@ class GridElement extends
   }
 
   static get version() {
-    return '5.8.2';
+    return '5.9.2';
   }
 
   static get observers() {
@@ -451,46 +452,80 @@ class GridElement extends
   }
 
   /** @protected */
-  __itemsReceived() {
+  __flushPendingRecalculateColumnWidths() {
     if (this._recalculateColumnWidthOnceLoadingFinished
-      && !this._cache.isLoading()
-      && this.__hasRowsWithClientHeight()) {
+    && !this._cache.isLoading()
+    && this.__hasRowsWithClientHeight()
+    && !this.__isCreatingRows()) {
       this._recalculateColumnWidthOnceLoadingFinished = false;
       this.recalculateColumnWidths();
     }
   }
 
+  /** @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
+      .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.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;
+    cols.forEach((col) => {
+      col.width = `${this.__getDistributedWidth(col)}px`;
     });
   }
 
@@ -501,7 +536,7 @@ class GridElement extends
     if (!this._columnTree) {
       return; // No columns
     }
-    if (this._cache.isLoading()) {
+    if (this._cache.isLoading() || this.__isCreatingRows()) {
       this._recalculateColumnWidthOnceLoadingFinished = true;
     } else {
       const cols = this._getColumns().filter(col => !col.hidden && col.autoWidth);
@@ -730,6 +765,7 @@ class GridElement extends
     }
 
     this._toggleAttribute('first', index === 0, row);
+    this._toggleAttribute('last', index === this._effectiveSize - 1, row);
     this._toggleAttribute('odd', index % 2, row);
     this._a11yUpdateRowRowindex(row, index);
     this._getItem(index, row);
@@ -862,7 +898,7 @@ class GridElement extends
       this._render();
       e.stopPropagation();
       this.notifyResize();
-      this.__itemsReceived();
+      this.__flushPendingRecalculateColumnWidths();
 
       requestAnimationFrame(() => {
         this.__scrollToPendingIndex();

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

@@ -118,6 +118,10 @@ const $_documentContainer = html`<dom-module id="lumo-grid" theme-for="vaadin-gr
         margin-top: -1px;
       }
 
+      :host([all-rows-visible]) [part~="row"][last][dragover="below"] [part~="cell"]::after {
+        height: 1px;
+      }
+
       [part~="row"][dragover="above"] [part~="cell"]::after {
         top: auto;
         bottom: 100%;

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

@@ -161,6 +161,10 @@ const $_documentContainer = html`<dom-module id="material-grid" theme-for="vaadi
         margin-top: -1px;
       }
 
+      :host([all-rows-visible]) [part~="row"][last][dragover="below"] [part~="cell"]::after {
+        height: 1px;
+      }
+
       [part~="row"][dragover="above"] [part~="cell"]::after {
         top: auto;
         bottom: 100%;