@vaadin/grid 24.0.0-alpha7 → 24.0.0-alpha8

package/src/vaadin-grid-sorter.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';

package/src/vaadin-grid-styles.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';

package/src/vaadin-grid-styling-mixin.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { iterateChildren, updatePart } from './vaadin-grid-helpers.js';

package/src/vaadin-grid-tree-column.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { GridDefaultItem } from './vaadin-grid.js';

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import './vaadin-grid-tree-toggle.js';

package/src/vaadin-grid-tree-toggle.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';

package/src/vaadin-grid.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';

package/src/vaadin-grid.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import './vaadin-grid-column.js';
@@ -539,9 +539,15 @@ class Grid extends ElementMixin(
       const cell = this.shadowRoot.activeElement;
       const cellCoordinates = this.__getBodyCellCoordinates(cell);
 
+      const previousSize = virtualizer.size || 0;
       virtualizer.size = effectiveSize;
-      virtualizer.update();
-      virtualizer.flush();
+
+      // Request an update for the previous last row to have the "last" state removed
+      virtualizer.update(previousSize - 1, previousSize - 1);
+      if (effectiveSize < previousSize) {
+        // Size was decreased, so the new last row requires an explicit update
+        virtualizer.update(effectiveSize - 1, effectiveSize - 1);
+      }
 
       // If the focused cell's parent row got hidden by the size change, focus the corresponding new cell
       if (cellCoordinates && cell.parentElement.hidden) {
@@ -803,10 +809,7 @@ class Grid extends ElementMixin(
    * @param {boolean} noNotify
    * @protected
    */
-  // eslint-disable-next-line max-params
-  _updateRow(row, columns, section, isColumnRow, noNotify) {
-    section ||= 'body';
-
+  _updateRow(row, columns, section = 'body', isColumnRow = false, noNotify = false) {
     const contentsFragment = document.createDocumentFragment();
 
     iterateChildren(row, (cell) => {
@@ -821,7 +824,9 @@ class Grid extends ElementMixin(
 
         if (section === 'body') {
           // Body
-          column._cells ||= [];
+          if (!column._cells) {
+            column._cells = [];
+          }
           cell = column._cells.find((cell) => cell._vacant);
           if (!cell) {
             cell = this._createCell('td', column);
@@ -832,7 +837,9 @@ class Grid extends ElementMixin(
 
           if (index === cols.length - 1 && this.rowDetailsRenderer) {
             // Add details cell as last cell to body rows
-            this._detailsCells ||= [];
+            if (!this._detailsCells) {
+              this._detailsCells = [];
+            }
             const detailsCell = this._detailsCells.find((cell) => cell._vacant) || this._createCell('td');
             if (this._detailsCells.indexOf(detailsCell) === -1) {
               this._detailsCells.push(detailsCell);
@@ -858,7 +865,9 @@ class Grid extends ElementMixin(
             row.appendChild(cell);
             column[`_${section}Cell`] = cell;
           } else {
-            column._emptyCells ||= [];
+            if (!column._emptyCells) {
+              column._emptyCells = [];
+            }
             cell = column._emptyCells.find((cell) => cell._vacant) || this._createCell(tagName);
             cell._column = column;
             row.appendChild(cell);
@@ -970,7 +979,7 @@ class Grid extends ElementMixin(
     updateRowStates(row, {
       first: index === 0,
       last: index === this._effectiveSize - 1,
-      odd: index % 2,
+      odd: index % 2 !== 0,
       even: index % 2 === 0,
     });
   }
@@ -990,7 +999,7 @@ class Grid extends ElementMixin(
    */
   _renderColumnTree(columnTree) {
     iterateChildren(this.$.items, (row) => {
-      this._updateRow(row, columnTree[columnTree.length - 1], null, false, true);
+      this._updateRow(row, columnTree[columnTree.length - 1], 'body', false, true);
 
       const model = this.__getRowModel(row);
       this._updateRowOrderParts(row);
@@ -1049,7 +1058,7 @@ class Grid extends ElementMixin(
   /** @private */
   __updateFooterPositioning() {
     // TODO: fixed in Firefox 99, remove when we can drop Firefox ESR 91 support
-    if (this._firefox && parseFloat(navigator.userAgent.match(/Firefox\/(\d{2,3}.\d)/)[1]) < 99) {
+    if (this._firefox && parseFloat(navigator.userAgent.match(/Firefox\/(\d{2,3}.\d)/u)[1]) < 99) {
       // Sticky (or translated) footer in a flexbox host doesn't get included in
       // the scroll height calculation on FF. This is a workaround for the issue.
       this.$.items.style.paddingBottom = 0;

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

@@ -57,7 +57,7 @@ registerStyles(
     }
 
     /* Hide first body row top border */
-    :host(:not([theme~='no-row-borders'])) [part~='row'][first] [part~='cell']:not([part~='details-cell']) {
+    :host(:not([theme~='no-row-borders'])) [part~='first-row'] [part~='cell']:not([part~='details-cell']) {
       border-top: 0;
       min-height: calc(var(--lumo-size-m) - var(--_lumo-grid-border-width));
     }
@@ -137,7 +137,7 @@ registerStyles(
       margin-top: -1px;
     }
 
-    :host([all-rows-visible]) [part~='row'][last][dragover='below'] [part~='cell']::after {
+    :host([all-rows-visible]) [part~='last-row'][dragover='below'] [part~='cell']::after {
       height: 1px;
     }
 
@@ -309,8 +309,8 @@ registerStyles(
 
     /* Row stripes */
 
-    :host([theme~='row-stripes']) [part~='row']:not([odd]) [part~='body-cell'],
-    :host([theme~='row-stripes']) [part~='row']:not([odd]) [part~='details-cell'] {
+    :host([theme~='row-stripes']) [part~='even-row'] [part~='body-cell'],
+    :host([theme~='row-stripes']) [part~='even-row'] [part~='details-cell'] {
       background-image: linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));
       background-repeat: repeat-x;
     }
@@ -342,7 +342,7 @@ registerStyles(
       min-height: var(--lumo-size-s);
     }
 
-    :host([theme~='compact']) [part~='row'][first] [part~='cell']:not([part~='details-cell']) {
+    :host([theme~='compact']) [part~='first-row'] [part~='cell']:not([part~='details-cell']) {
       min-height: calc(var(--lumo-size-s) - var(--_lumo-grid-border-width));
     }
 

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

@@ -191,7 +191,7 @@ registerStyles(
       margin-top: -1px;
     }
 
-    :host([all-rows-visible]) [part~='row'][last][dragover='below'] [part~='cell']::after {
+    :host([all-rows-visible]) [part~='last-row'][dragover='below'] [part~='cell']::after {
       height: 1px;
     }