@vaadin/vaadin-grid 5.8.4 → 5.9.3

package/package.json

@@ -15,7 +15,7 @@
   "repository": "vaadin/vaadin-grid",
   "homepage": "https://vaadin.com/components",
   "name": "@vaadin/vaadin-grid",
-  "version": "5.8.4",
+  "version": "5.9.3",
   "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",
+    "@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"
+  },
+  "scripts": {
+    "generate-typings": "gen-typescript-declarations --outDir . --verify",
+    "test": "wct --npm"
   }
 }

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

@@ -8,7 +8,6 @@ import { GestureEventListeners } from '@polymer/polymer/lib/mixins/gesture-event
 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
@@ -214,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;
       }
 
     }

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;
@@ -360,7 +368,9 @@ export const ColumnBaseMixin = superClass => class ColumnBaseMixin extends super
   _setFooterTemplateOrRenderer(footerTemplate, footerRenderer, footerCell) {
     if ((footerTemplate || footerRenderer) && footerCell) {
       this.__setColumnTemplateOrRenderer(footerTemplate, footerRenderer, [footerCell]);
-      this._grid.__updateHeaderFooterRowVisibility(footerCell.parentElement);
+      if (this._grid) {
+        this._grid.__updateHeaderFooterRowVisibility(footerCell.parentElement);
+      }
     }
   }
 
@@ -474,7 +484,7 @@ export const ColumnBaseMixin = superClass => class ColumnBaseMixin extends super
       }
     }
 
-    if (headerCell) {
+    if (headerCell && this._grid) {
       this._grid.__updateHeaderFooterRowVisibility(headerCell.parentElement);
     }
   }

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-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);
@@ -256,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);

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

@@ -80,11 +80,7 @@ export const SelectionMixin = superClass => class SelectionMixin extends superCl
 
   /** @private */
   _selectedItemsChanged(e) {
-    if (this.$.items.children.length && (e.path === 'selectedItems' || e.path === 'selectedItems.splices')) {
-      Array.from(this.$.items.children).forEach(row => {
-        this._updateItem(row, row._item);
-      });
-    }
+    this._assignModels();
   }
 
   /** @private */

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

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.4';
+    return '5.9.3';
   }
 
   static get observers() {
@@ -461,37 +462,70 @@ class GridElement extends
     }
   }
 
+  /** @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`;
     });
   }
 
@@ -731,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);

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%;