@vaadin/grid 22.0.1 → 23.0.0-alpha3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/grid",
-  "version": "22.0.1",
+  "version": "23.0.0-alpha3",
   "publishConfig": {
     "access": "public"
   },
@@ -40,19 +40,19 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/checkbox": "^22.0.1",
-    "@vaadin/component-base": "^22.0.1",
-    "@vaadin/text-field": "^22.0.1",
-    "@vaadin/vaadin-lumo-styles": "^22.0.1",
-    "@vaadin/vaadin-material-styles": "^22.0.1",
-    "@vaadin/vaadin-themable-mixin": "^22.0.1"
+    "@vaadin/checkbox": "23.0.0-alpha3",
+    "@vaadin/component-base": "23.0.0-alpha3",
+    "@vaadin/text-field": "23.0.0-alpha3",
+    "@vaadin/vaadin-lumo-styles": "23.0.0-alpha3",
+    "@vaadin/vaadin-material-styles": "23.0.0-alpha3",
+    "@vaadin/vaadin-themable-mixin": "23.0.0-alpha3"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/polymer-legacy-adapter": "^22.0.1",
+    "@vaadin/polymer-legacy-adapter": "23.0.0-alpha3",
     "@vaadin/testing-helpers": "^0.3.2",
     "lit": "^2.0.0",
     "sinon": "^9.2.0"
   },
-  "gitHead": "2b0a2bff0369d6020f7cc33ad35506aa2d1f6f68"
+  "gitHead": "490037919a9e054cc002c1b3be0c94a1603e1a44"
 }

package/src/all-imports.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.js';

package/src/array-data-provider.js

@@ -22,7 +22,7 @@ function checkPaths(arrayToCheck, action, items) {
 
   let result = true;
 
-  for (let i in arrayToCheck) {
+  for (const i in arrayToCheck) {
     const path = arrayToCheck[i].path;
 
     // skip simple paths
@@ -73,9 +73,8 @@ function normalizeEmptyValue(value) {
     return '';
   } else if (isNaN(value)) {
     return value.toString();
-  } else {
-    return value;
   }
+  return value;
 }
 
 /**

package/src/vaadin-grid-a11y-mixin.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/
  */
 

package/src/vaadin-grid-active-item-mixin.d.ts

@@ -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 { Constructor } from '@open-wc/dedupe-mixin';

package/src/vaadin-grid-active-item-mixin.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/
  */
 

package/src/vaadin-grid-array-data-provider-mixin.d.ts

@@ -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 { Constructor } from '@open-wc/dedupe-mixin';

package/src/vaadin-grid-array-data-provider-mixin.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 { createArrayDataProvider } from './array-data-provider.js';

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

@@ -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 { GridDefaultItem } from './vaadin-grid.js';

package/src/vaadin-grid-column-group.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 { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
@@ -162,7 +162,7 @@ class GridColumnGroup extends ColumnBaseMixin(PolymerElement) {
       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);
+      const scope = 10 ** (trailingZeros - childCountDigits);
 
       if (_rootColumns[0] && _rootColumns[0]._order) {
         _rootColumns.sort((a, b) => a._order - b._order);

package/src/vaadin-grid-column-reordering-mixin.d.ts

@@ -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 { Constructor } from '@open-wc/dedupe-mixin';

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

@@ -1,17 +1,16 @@
 /**
  * @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 { GestureEventListeners } from '@polymer/polymer/lib/mixins/gesture-event-listeners.js';
-import { addListener } from '@polymer/polymer/lib/utils/gestures.js';
+import { addListener } from '@vaadin/component-base/src/gestures.js';
 import { updateColumnOrders } from './vaadin-grid-helpers.js';
 
 /**
  * @polymerMixin
  */
 export const ColumnReorderingMixin = (superClass) =>
-  class ColumnReorderingMixin extends GestureEventListeners(superClass) {
+  class ColumnReorderingMixin extends superClass {
     static get properties() {
       return {
         /**
@@ -339,9 +338,8 @@ export const ColumnReorderingMixin = (superClass) =>
       const targetRect = targetCell.getBoundingClientRect();
       if (targetRect.left > sourceCellRect.left) {
         return clientX > targetRect.right - sourceCellRect.width;
-      } else {
-        return clientX < targetRect.left + sourceCellRect.width;
       }
+      return clientX < targetRect.left + sourceCellRect.width;
     }
 
     /**
@@ -371,9 +369,8 @@ export const ColumnReorderingMixin = (superClass) =>
         }
         if (candidate.parentElement === draggedColumn.parentElement) {
           return candidate;
-        } else {
-          return targetCell._column;
         }
+        return targetCell._column;
       }
     }
 

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

@@ -1,16 +1,15 @@
 /**
  * @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 { GestureEventListeners } from '@polymer/polymer/lib/mixins/gesture-event-listeners.js';
-import { addListener } from '@polymer/polymer/lib/utils/gestures.js';
+import { addListener } from '@vaadin/component-base/src/gestures.js';
 
 /**
  * @polymerMixin
  */
 export const ColumnResizingMixin = (superClass) =>
-  class ColumnResizingMixin extends GestureEventListeners(superClass) {
+  class ColumnResizingMixin extends superClass {
     ready() {
       super.ready();
       const scroller = this.$.scroller;

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

@@ -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 { Constructor } from '@open-wc/dedupe-mixin';

package/src/vaadin-grid-column.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 { PolymerElement } from '@polymer/polymer/polymer-element.js';
@@ -30,9 +30,8 @@ export const ColumnBaseMixin = (superClass) =>
             const parent = this.parentNode;
             if (parent && parent.localName === 'vaadin-grid-column-group') {
               return parent.resizable || false;
-            } else {
-              return false;
             }
+            return false;
           }
         },
 
@@ -197,7 +196,9 @@ export const ColumnBaseMixin = (superClass) =>
       // Adds the column cells to the grid after the column is attached
       requestAnimationFrame(() => {
         // Skip if the column has been detached
-        if (!this._grid) return;
+        if (!this._grid) {
+          return;
+        }
 
         this._allCells.forEach((cell) => {
           if (!cell._content.parentNode) {
@@ -214,7 +215,9 @@ export const ColumnBaseMixin = (superClass) =>
       // Removes the column cells from the grid after the column is detached
       requestAnimationFrame(() => {
         // Skip if the column has been attached again
-        if (this._grid) return;
+        if (this._grid) {
+          return;
+        }
 
         this._allCells.forEach((cell) => {
           if (cell._content.parentNode) {
@@ -380,12 +383,10 @@ export const ColumnBaseMixin = (superClass) =>
         } else if (textAlign === 'end') {
           textAlignFallback = 'right';
         }
-      } else {
-        if (textAlign === 'start') {
-          textAlignFallback = 'right';
-        } else if (textAlign === 'end') {
-          textAlignFallback = 'left';
-        }
+      } else if (textAlign === 'start') {
+        textAlignFallback = 'right';
+      } else if (textAlign === 'end') {
+        textAlignFallback = 'left';
       }
 
       this._allCells.forEach((cell) => {
@@ -450,7 +451,9 @@ export const ColumnBaseMixin = (superClass) =>
       cells.forEach((cell) => {
         const model = this._grid.__getRowModel(cell.parentElement);
 
-        if (!renderer) return;
+        if (!renderer) {
+          return;
+        }
 
         if (cell._renderer !== renderer) {
           this._clearCellContent(cell);
@@ -558,7 +561,9 @@ export const ColumnBaseMixin = (superClass) =>
      * @protected
      */
     _defaultHeaderRenderer() {
-      if (!this.path) return;
+      if (!this.path) {
+        return;
+      }
 
       this.__setTextContent(this._headerCell._content, this._generateHeader(this.path));
     }
@@ -570,7 +575,9 @@ export const ColumnBaseMixin = (superClass) =>
      * @protected
      */
     _defaultRenderer(root, _owner, { item }) {
-      if (!this.path) return;
+      if (!this.path) {
+        return;
+      }
 
       this.__setTextContent(root, this.get(this.path, item));
     }

package/src/vaadin-grid-data-provider-mixin.d.ts

@@ -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 { Constructor } from '@open-wc/dedupe-mixin';

package/src/vaadin-grid-data-provider-mixin.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 { timeOut } from '@vaadin/component-base/src/async.js';
@@ -324,7 +324,7 @@ export const DataProviderMixin = (superClass) =>
       let level = 0;
       while (cache.parentCache) {
         cache = cache.parentCache;
-        level++;
+        level += 1;
       }
       return level;
     }
@@ -350,10 +350,8 @@ export const DataProviderMixin = (superClass) =>
         this.dataProvider(params, (items, size) => {
           if (size !== undefined) {
             cache.size = size;
-          } else {
-            if (params.parentItem) {
-              cache.size = items.length;
-            }
+          } else if (params.parentItem) {
+            cache.size = items.length;
           }
 
           const currentItems = Array.from(this.$.items.children).map((row) => row._item);

package/src/vaadin-grid-drag-and-drop-mixin.d.ts

@@ -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 { Constructor } from '@open-wc/dedupe-mixin';

package/src/vaadin-grid-drag-and-drop-mixin.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/
  */
 const DropMode = {

package/src/vaadin-grid-dynamic-columns-mixin.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 { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
@@ -54,9 +54,8 @@ export const DynamicColumnsMixin = (superClass) =>
         .map((col) => {
           if (col.localName === 'vaadin-grid-column-group') {
             return this._getChildColumns(col);
-          } else {
-            return [col];
           }
+          return [col];
         })
         .reduce((prev, curr) => {
           return prev.concat(curr);
@@ -66,14 +65,12 @@ export const DynamicColumnsMixin = (superClass) =>
     /** @private */
     _getColumnTree() {
       const rootColumns = FlattenedNodesObserver.getFlattenedNodes(this).filter(this._isColumnElement);
-      const columnTree = [];
+      const columnTree = [rootColumns];
 
-      for (let c = rootColumns; ; ) {
-        columnTree.push(c);
-        if (!this._hasColumnGroups(c)) {
-          break;
-        }
+      let c = rootColumns;
+      while (this._hasColumnGroups(c)) {
         c = this._flattenColumnGroups(c);
+        columnTree.push(c);
       }
 
       return columnTree;

package/src/vaadin-grid-event-context-mixin.d.ts

@@ -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 { Constructor } from '@open-wc/dedupe-mixin';

package/src/vaadin-grid-event-context-mixin.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/
  */
 

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

@@ -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 { GridDefaultItem } from './vaadin-grid.js';

package/src/vaadin-grid-filter-column.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-filter.js';

package/src/vaadin-grid-filter-mixin.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/
  */
 

package/src/vaadin-grid-filter.d.ts

@@ -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/
  */
 

package/src/vaadin-grid-filter.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/text-field/src/vaadin-text-field.js';

package/src/vaadin-grid-helpers.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/
  */
 
@@ -15,9 +15,9 @@ export function updateColumnOrders(columns, scope, baseOrder) {
     // 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++;
+      c += 1;
     }
     column._order = baseOrder + c * scope;
-    c++;
+    c += 1;
   });
 }

package/src/vaadin-grid-keyboard-navigation-mixin.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/
  */
 
@@ -160,6 +160,8 @@ export const KeyboardNavigationMixin = (superClass) =>
         case ' ':
           keyGroup = 'Space';
           break;
+        default:
+          break;
       }
 
       this._detectInteracting(e);
@@ -240,28 +242,24 @@ export const KeyboardNavigationMixin = (superClass) =>
           if (this.__rowFocusMode) {
             // "If focus is on a row, moves focus to the first row. If focus is in the first row, focus does not move."
             dy = -Infinity;
+          } else if (e.ctrlKey) {
+            // "If focus is on a cell, moves focus to the first cell in the column. If focus is in the first row, focus does not move."
+            dy = -Infinity;
           } else {
-            if (e.ctrlKey) {
-              // "If focus is on a cell, moves focus to the first cell in the column. If focus is in the first row, focus does not move."
-              dy = -Infinity;
-            } else {
-              // "If focus is on a cell, moves focus to the first cell in the row. If focus is in the first cell of the row, focus does not move."
-              dx = -Infinity;
-            }
+            // "If focus is on a cell, moves focus to the first cell in the row. If focus is in the first cell of the row, focus does not move."
+            dx = -Infinity;
           }
           break;
         case 'End':
           if (this.__rowFocusMode) {
             // "If focus is on a row, moves focus to the last row. If focus is in the last row, focus does not move."
             dy = Infinity;
+          } else if (e.ctrlKey) {
+            // "If focus is on a cell, moves focus to the last cell in the column. If focus is in the last row, focus does not move."
+            dy = Infinity;
           } else {
-            if (e.ctrlKey) {
-              // "If focus is on a cell, moves focus to the last cell in the column. If focus is in the last row, focus does not move."
-              dy = Infinity;
-            } else {
-              // "If focus is on a cell, moves focus to the last cell in the row. If focus is in the last cell of the row, focus does not move."
-              dx = Infinity;
-            }
+            // "If focus is on a cell, moves focus to the last cell in the row. If focus is in the last cell of the row, focus does not move."
+            dx = Infinity;
           }
           break;
         case 'ArrowDown':
@@ -276,6 +274,8 @@ export const KeyboardNavigationMixin = (superClass) =>
         case 'PageUp':
           dy = -visibleItemsCount;
           break;
+        default:
+          break;
       }
 
       const activeRow = e.composedPath().find((el) => this.__isRow(el));
@@ -296,13 +296,12 @@ export const KeyboardNavigationMixin = (superClass) =>
             // "If focus is on a collapsed row, expands the row."
             this.expandItem(activeRow._item);
             return;
-          } else {
-            // "If focus is on an expanded row or is on a row that does not have child rows,
-            // moves focus to the first cell in the row."
-            this.__rowFocusMode = false;
-            this._onCellNavigation(activeRow.firstElementChild, 0, 0);
-            return;
           }
+          // "If focus is on an expanded row or is on a row that does not have child rows,
+          // moves focus to the first cell in the row."
+          this.__rowFocusMode = false;
+          this._onCellNavigation(activeRow.firstElementChild, 0, 0);
+          return;
         }
       } else if (key === backwardsKey) {
         // "Left Arrow:"
@@ -354,14 +353,13 @@ export const KeyboardNavigationMixin = (superClass) =>
       // Body rows have index property, otherwise DOM child index of the row is used.
       if (rowGroup === this.$.items) {
         return bodyFallbackIndex !== undefined ? bodyFallbackIndex : row.index;
-      } else {
-        return this.__getIndexOfChildElement(row);
       }
+      return this.__getIndexOfChildElement(row);
     }
 
     /**
      * Returns the target row after navigating by the given dy offset.
-     * Also returns infromation whether the details cell should be the target on the target row.
+     * Also returns information whether the details cell should be the target on the target row.
      * If the row is not in the viewport, it is first scrolled to.
      * @private
      **/
@@ -381,62 +379,58 @@ export const KeyboardNavigationMixin = (superClass) =>
         // in vertical keyboard navigation.
         if (dstRowIndex > currentRowIndex) {
           while (dstRowIndex < maxRowIndex && activeRowGroup.children[dstRowIndex].hidden) {
-            dstRowIndex++;
+            dstRowIndex += 1;
           }
         } else if (dstRowIndex < currentRowIndex) {
           while (dstRowIndex > 0 && activeRowGroup.children[dstRowIndex].hidden) {
-            dstRowIndex--;
+            dstRowIndex -= 1;
           }
         }
 
         this.toggleAttribute('navigating', true);
 
         return { dstRow: activeRowGroup.children[dstRowIndex] };
-      } else {
-        // Navigating body rows
-
-        let dstIsRowDetails = false;
-        if (activeCell) {
-          const isRowDetails = this.__isDetailsCell(activeCell);
-          // Row details navigation logic
-          if (activeRowGroup === this.$.items) {
-            const item = activeRow._item;
-            const dstItem = this._cache.getItemForIndex(dstRowIndex);
-            // Should we navigate to row details?
-            if (isRowDetails) {
-              dstIsRowDetails = dy === 0;
-            } else {
-              dstIsRowDetails =
-                (dy === 1 && this._isDetailsOpened(item)) ||
-                (dy === -1 && dstRowIndex !== currentRowIndex && this._isDetailsOpened(dstItem));
-            }
-            // Should we navigate between details and regular cells of the same row?
-            if (
-              dstIsRowDetails !== isRowDetails &&
-              ((dy === 1 && dstIsRowDetails) || (dy === -1 && !dstIsRowDetails))
-            ) {
-              dstRowIndex = currentRowIndex;
-            }
+      }
+      // Navigating body rows
+
+      let dstIsRowDetails = false;
+      if (activeCell) {
+        const isRowDetails = this.__isDetailsCell(activeCell);
+        // Row details navigation logic
+        if (activeRowGroup === this.$.items) {
+          const item = activeRow._item;
+          const dstItem = this._cache.getItemForIndex(dstRowIndex);
+          // Should we navigate to row details?
+          if (isRowDetails) {
+            dstIsRowDetails = dy === 0;
+          } else {
+            dstIsRowDetails =
+              (dy === 1 && this._isDetailsOpened(item)) ||
+              (dy === -1 && dstRowIndex !== currentRowIndex && this._isDetailsOpened(dstItem));
+          }
+          // Should we navigate between details and regular cells of the same row?
+          if (dstIsRowDetails !== isRowDetails && ((dy === 1 && dstIsRowDetails) || (dy === -1 && !dstIsRowDetails))) {
+            dstRowIndex = currentRowIndex;
           }
         }
+      }
 
-        // Ensure correct vertical scroll position, destination row is visible
-        this._ensureScrolledToIndex(dstRowIndex);
+      // Ensure correct vertical scroll position, destination row is visible
+      this._ensureScrolledToIndex(dstRowIndex);
 
-        // When scrolling with repeated keydown, sometimes FocusEvent listeners
-        // are too late to update _focusedItemIndex. Ensure next keydown
-        // listener invocation gets updated _focusedItemIndex value.
-        this._focusedItemIndex = dstRowIndex;
+      // When scrolling with repeated keydown, sometimes FocusEvent listeners
+      // are too late to update _focusedItemIndex. Ensure next keydown
+      // listener invocation gets updated _focusedItemIndex value.
+      this._focusedItemIndex = dstRowIndex;
 
-        // This has to be set after scrolling, otherwise it can be removed by
-        // `_preventScrollerRotatingCellFocus(row, index)` during scrolling.
-        this.toggleAttribute('navigating', true);
+      // This has to be set after scrolling, otherwise it can be removed by
+      // `_preventScrollerRotatingCellFocus(row, index)` during scrolling.
+      this.toggleAttribute('navigating', true);
 
-        return {
-          dstRow: [...activeRowGroup.children].find((el) => !el.hidden && el.index === dstRowIndex),
-          dstIsRowDetails
-        };
-      }
+      return {
+        dstRow: [...activeRowGroup.children].find((el) => !el.hidden && el.index === dstRowIndex),
+        dstIsRowDetails
+      };
     }
 
     /**
@@ -499,7 +493,10 @@ export const KeyboardNavigationMixin = (superClass) =>
           this._focusedColumnOrder = undefined;
         }
 
-        const columnIndexByOrder = dstColumns.reduce((acc, col, i) => ((acc[col._order] = i), acc), {});
+        const columnIndexByOrder = dstColumns.reduce((acc, col, i) => {
+          acc[col._order] = i;
+          return acc;
+        }, {});
         const dstColumnIndex = columnIndexByOrder[dstSortedColumnOrders[dstOrderedColumnIndex]];
         const dstCell = dstRow.children[dstColumnIndex];
 
@@ -526,6 +523,8 @@ export const KeyboardNavigationMixin = (superClass) =>
         case 'F2':
           wantInteracting = !this.interacting;
           break;
+        default:
+          break;
       }
 
       const { cell } = this._getGridEventLocation(e);
@@ -730,7 +729,9 @@ export const KeyboardNavigationMixin = (superClass) =>
      * @param {HTMLElement} focusTarget
      */
     _updateGridSectionFocusTarget(focusTarget) {
-      if (!focusTarget) return;
+      if (!focusTarget) {
+        return;
+      }
 
       const section = this._getGridSectionFromFocusTarget(focusTarget);
       const isInteractingWithinActiveSection = this.interacting && section === this._activeRowGroup;
@@ -888,9 +889,15 @@ export const KeyboardNavigationMixin = (superClass) =>
      * @private
      */
     _getGridSectionFromFocusTarget(focusTarget) {
-      if (focusTarget === this._headerFocusable) return this.$.header;
-      if (focusTarget === this._itemsFocusable) return this.$.items;
-      if (focusTarget === this._footerFocusable) return this.$.footer;
+      if (focusTarget === this._headerFocusable) {
+        return this.$.header;
+      }
+      if (focusTarget === this._itemsFocusable) {
+        return this.$.items;
+      }
+      if (focusTarget === this._footerFocusable) {
+        return this.$.footer;
+      }
       return null;
     }
 

package/src/vaadin-grid-row-details-mixin.d.ts

@@ -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 { Constructor } from '@open-wc/dedupe-mixin';

package/src/vaadin-grid-row-details-mixin.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/
  */
 
@@ -106,7 +106,6 @@ export const RowDetailsMixin = (superClass) =>
         // Re-renders the row to open the details when a row details renderer is provided.
         if (rowDetailsRenderer && this._isDetailsOpened(row._item)) {
           this._updateItem(row, row._item);
-          return;
         }
       });
     }

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

@@ -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 { Constructor } from '@open-wc/dedupe-mixin';

package/src/vaadin-grid-scroll-mixin.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 { animationFrame, microTask, timeOut } from '@vaadin/component-base/src/async.js';
@@ -31,6 +31,11 @@ export const ScrollMixin = (superClass) =>
       };
     }
 
+    /** @private */
+    get _scrollTop() {
+      return this.$.table.scrollTop;
+    }
+
     /**
      * Override (from iron-scroll-target-behavior) to avoid document scroll
      * @private
@@ -39,11 +44,6 @@ export const ScrollMixin = (superClass) =>
       this.$.table.scrollTop = top;
     }
 
-    /** @private */
-    get _scrollTop() {
-      return this.$.table.scrollTop;
-    }
-
     /** @private */
     get _scrollLeft() {
       return this.$.table.scrollLeft;

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

@@ -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 { GridDefaultItem } from './vaadin-grid.js';

package/src/vaadin-grid-selection-column.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/checkbox/src/vaadin-checkbox.js';
@@ -235,7 +235,7 @@ class GridSelectionColumn extends GridColumn {
   }
 
   /**
-   * iOS needs indeterminated + checked at the same time
+   * iOS needs indeterminate + checked at the same time
    * @private
    */
   __isChecked(selectAll, indeterminate) {

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

@@ -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 { Constructor } from '@open-wc/dedupe-mixin';

package/src/vaadin-grid-selection-mixin.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/
  */
 

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

@@ -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 { GridDefaultItem } from './vaadin-grid.js';

package/src/vaadin-grid-sort-column.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-sorter.js';

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

@@ -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 { Constructor } from '@open-wc/dedupe-mixin';

package/src/vaadin-grid-sort-mixin.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/
  */
 
@@ -88,15 +88,13 @@ export const SortMixin = (superClass) =>
           this._sorters.unshift(sorter);
         }
         this.__updateSortOrders();
-      } else {
-        if (sorter.direction) {
-          const otherSorters = this._sorters.filter((s) => s != sorter);
-          this._sorters = [sorter];
-          otherSorters.forEach((sorter) => {
-            sorter._order = null;
-            sorter.direction = null;
-          });
-        }
+      } else if (sorter.direction) {
+        const otherSorters = this._sorters.filter((s) => s != sorter);
+        this._sorters = [sorter];
+        otherSorters.forEach((sorter) => {
+          sorter._order = null;
+          sorter.direction = null;
+        });
       }
     }
 

package/src/vaadin-grid-sorter.d.ts

@@ -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 { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';

package/src/vaadin-grid-sorter.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 { html, PolymerElement } from '@polymer/polymer/polymer-element.js';

package/src/vaadin-grid-styles.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 { 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) 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 { Constructor } from '@open-wc/dedupe-mixin';

package/src/vaadin-grid-styling-mixin.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/
  */
 

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

@@ -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 { GridDefaultItem } from './vaadin-grid.js';

package/src/vaadin-grid-tree-column.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-tree-toggle.js';

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

@@ -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 { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';

package/src/vaadin-grid-tree-toggle.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 { html, PolymerElement } from '@polymer/polymer/polymer-element.js';

package/src/vaadin-grid.d.ts

@@ -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 { ElementMixinClass } from '@vaadin/component-base/src/element-mixin.js';
@@ -308,7 +308,7 @@ export interface GridEventMap<TItem> extends HTMLElementEventMap, GridCustomEven
  * `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
@@ -316,6 +316,7 @@ export interface GridEventMap<TItem> extends HTMLElementEventMap, GridCustomEven
  * `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

@@ -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';
@@ -194,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
@@ -202,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
@@ -279,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>
@@ -489,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
@@ -543,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));
 
@@ -685,6 +689,7 @@ class Grid extends ElementMixin(
    * @param {boolean} noNotify
    * @protected
    */
+  // eslint-disable-next-line max-params
   _updateRow(row, columns, section, isColumnRow, noNotify) {
     section = section || 'body';
 
@@ -793,13 +798,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) {
@@ -819,6 +823,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;
     }