@vaadin/grid 23.0.0-alpha1 → 23.0.0-alpha5

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';
@@ -253,20 +253,16 @@ export interface GridEventMap<TItem> extends HTMLElementEventMap, GridCustomEven
  * 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);
+ *     });
  * };
  * ```
  *
@@ -274,17 +270,12 @@ export interface GridEventMap<TItem> extends HTMLElementEventMap, GridCustomEven
  *
  * ```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));
  * };
  * ```
  *
@@ -317,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
@@ -325,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