@vaadin/grid 23.0.0-alpha1 → 23.0.0-alpha5

package/src/vaadin-grid.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2016 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import './vaadin-grid-column.js';
@@ -139,20 +139,16 @@ import { StylingMixin } from './vaadin-grid-styling-mixin.js';
  * in the second argument of the data provider callback:__
  *
  * ```javascript
- * grid.dataProvider = function(params, callback) {
- *   const url = 'https://api.example/data' +
- *       '?page=' + params.page +        // the requested page index
- *       '&per_page=' + params.pageSize; // number of items on the page
- *   const xhr = new XMLHttpRequest();
- *   xhr.onload = function() {
- *     const response = JSON.parse(xhr.responseText);
- *     callback(
- *       response.employees, // requested page of items
- *       response.totalSize  // total number of items
- *     );
- *   };
- *   xhr.open('GET', url, true);
- *   xhr.send();
+ * grid.dataProvider = ({page, pageSize}, callback) => {
+ *   // page: the requested page index
+ *   // pageSize: number of items on one page
+ *   const url = `https://api.example/data?page=${page}&per_page=${pageSize}`;
+ *
+ *   fetch(url)
+ *     .then((res) => res.json())
+ *     .then(({ employees, totalSize }) => {
+ *       callback(employees, totalSize);
+ *     });
  * };
  * ```
  *
@@ -160,17 +156,12 @@ import { StylingMixin } from './vaadin-grid-styling-mixin.js';
  *
  * ```javascript
  * grid.size = 200; // The total number of items
- * grid.dataProvider = function(params, callback) {
- *   const url = 'https://api.example/data' +
- *       '?page=' + params.page +        // the requested page index
- *       '&per_page=' + params.pageSize; // number of items on the page
- *   const xhr = new XMLHttpRequest();
- *   xhr.onload = function() {
- *     const response = JSON.parse(xhr.responseText);
- *     callback(response.employees);
- *   };
- *   xhr.open('GET', url, true);
- *   xhr.send();
+ * grid.dataProvider = ({page, pageSize}, callback) => {
+ *   const url = `https://api.example/data?page=${page}&per_page=${pageSize}`;
+ *
+ *   fetch(url)
+ *     .then((res) => res.json())
+ *     .then((resJson) => callback(resJson.employees));
  * };
  * ```
  *
@@ -203,7 +194,7 @@ import { StylingMixin } from './vaadin-grid-styling-mixin.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
@@ -211,6 +202,7 @@ import { StylingMixin } from './vaadin-grid-styling-mixin.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
@@ -288,7 +280,7 @@ class Grid extends ElementMixin(
         loading$="[[loading]]"
         column-reordering-allowed$="[[columnReorderingAllowed]]"
       >
-        <table id="table" role="grid" aria-multiselectable="true" tabindex="0">
+        <table id="table" role="treegrid" aria-multiselectable="true" tabindex="0">
           <caption id="sizer" part="row"></caption>
           <thead id="header" role="rowgroup"></thead>
           <tbody id="items" role="rowgroup"></tbody>
@@ -498,6 +490,7 @@ class Grid extends ElementMixin(
       const cellCoordinates = this.__getBodyCellCoordinates(cell);
 
       virtualizer.size = effectiveSize;
+      virtualizer.update();
       virtualizer.flush();
 
       // If the focused cell's parent row got hidden by the size change, focus the corresponding new cell
@@ -552,7 +545,9 @@ class Grid extends ElementMixin(
 
   /** @private */
   __getDistributedWidth(col, innerColumn) {
-    if (col == null || col === this) return 0;
+    if (col == null || col === this) {
+      return 0;
+    }
 
     const columnWidth = Math.max(this.__getIntrinsicWidth(col), this.__getDistributedWidth(col.parentElement, col));
 
@@ -589,6 +584,9 @@ class Grid extends ElementMixin(
    * @private
    */
   _recalculateColumnWidths(cols) {
+    // Flush to make sure DOM is up-to-date when measuring the column widths
+    this.__virtualizer.flush();
+
     cols.forEach((col) => {
       col.width = `${this.__getDistributedWidth(col)}px`;
     });
@@ -694,6 +692,7 @@ class Grid extends ElementMixin(
    * @param {boolean} noNotify
    * @protected
    */
+  // eslint-disable-next-line max-params
   _updateRow(row, columns, section, isColumnRow, noNotify) {
     section = section || 'body';
 
@@ -802,13 +801,12 @@ class Grid extends ElementMixin(
           // -> row should be visible
           return true;
         }
-      } else {
-        if (column.footerRenderer) {
-          // The cell is the footer cell of a column that has a footer renderer
-          // -> row should be visible
-          return true;
-        }
+      } else if (column.footerRenderer) {
+        // The cell is the footer cell of a column that has a footer renderer
+        // -> row should be visible
+        return true;
       }
+      return false;
     });
 
     if (row.hidden !== !visibleRowCells.length) {
@@ -828,6 +826,7 @@ class Grid extends ElementMixin(
     }
 
     row.toggleAttribute('first', index === 0);
+    row.toggleAttribute('last', index === this._effectiveSize - 1);
     row.toggleAttribute('odd', index % 2);
     this._a11yUpdateRowRowindex(row, index);
     this._getItem(index, row);

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

@@ -133,6 +133,10 @@ registerStyles(
       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

@@ -183,6 +183,10 @@ registerStyles(
       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%;
@@ -200,8 +204,6 @@ registerStyles(
     }
 
     [part~='row'][dragstart] {
-      /* Add bottom-space to the row so the drag number doesn't get clipped. Needed for IE/Edge */
-      border-bottom: 100px solid transparent;
       z-index: 100 !important;
       opacity: 0.9;
     }