@vaadin/vaadin-grid 5.8.1 → 5.9.0

package/README.md

@@ -1,18 +1,18 @@
-[![npm version](https://badge.fury.io/js/%40vaadin%2Fvaadin-grid.svg)](https://badge.fury.io/js/%40vaadin%2Fvaadin-grid)
-[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/vaadin/vaadin-grid)
-[![Build Status](https://travis-ci.org/vaadin/vaadin-grid.svg?branch=master)](https://travis-ci.org/vaadin/vaadin-grid)
-[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/vaadin/web-components?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
+# <vaadin-grid>
 
-[![Published on Vaadin  Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/vaadinvaadin-grid)
-[![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/vaadinvaadin-grid.svg)](https://vaadin.com/directory/component/vaadinvaadin-grid)
+> ⚠️ Starting from Vaadin 20, the source code and issues for this component are migrated to the [`vaadin/web-components`](https://github.com/vaadin/web-components/tree/master/packages/vaadin-grid) monorepository.
+> This repository contains the source code and releases of `<vaadin-grid>` for the Vaadin versions 10 to 19.
 
-# &lt;vaadin-grid&gt;
+[&lt;vaadin-grid&gt;](https://vaadin.com/components/vaadin-grid) is a free, high quality data grid / data table Web Component, part of the [Vaadin components](https://vaadin.com/components).
 
 [Live Demo ↗](https://vaadin.com/components/vaadin-grid/html-examples)
 |
 [API documentation ↗](https://vaadin.com/components/vaadin-grid/html-api)
 
-[&lt;vaadin-grid&gt;](https://vaadin.com/components/vaadin-grid) is a free, high quality data grid / data table Web Component, part of the [Vaadin components](https://vaadin.com/components).
+[![npm version](https://badge.fury.io/js/%40vaadin%2Fvaadin-grid.svg)](https://badge.fury.io/js/%40vaadin%2Fvaadin-grid)
+[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/vaadin/vaadin-grid)
+[![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/vaadinvaadin-grid)
+[![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)
 
 <!---
 ```

package/package.json

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

package/src/iron-list.js

@@ -637,6 +637,16 @@ export const PolymerIronList = Class({
    * @param {!Array<number>=} itemSet
    */
   _updateMetrics: function(itemSet) {
+
+    // Sometimes the call is schedule before Grid is hidden
+    // but it happens when Grid is already hidden.
+    // When this happens, there might be some issues as described
+    // here https://github.com/vaadin/web-components/issues/2127.
+    // Skipping any calculation for a hidden Grid.
+    if (!this._isVisible) {
+      return;
+    }
+
     // Make sure we distributed all the physical items
     // so we can measure them.
     flush();

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,6 +5,7 @@ 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';
@@ -293,7 +294,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-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-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

@@ -209,6 +209,7 @@ class GridScrollerElement extends PolymerIronList {
             // Ensure the rows are in order after increasing pool
             this.__reorderChildNodes();
           }
+          this.__flushPendingRecalculateColumnWidths();
         });
     }
   }
@@ -430,6 +431,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

@@ -313,7 +313,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

@@ -322,7 +322,7 @@ class GridElement extends
   }
 
   static get version() {
-    return '5.8.0';
+    return '5.9.0';
   }
 
   static get observers() {
@@ -451,10 +451,11 @@ 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();
     }
@@ -501,7 +502,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);
@@ -862,7 +863,7 @@ class GridElement extends
       this._render();
       e.stopPropagation();
       this.notifyResize();
-      this.__itemsReceived();
+      this.__flushPendingRecalculateColumnWidths();
 
       requestAnimationFrame(() => {
         this.__scrollToPendingIndex();