@vaadin/grid 23.1.0-alpha3 → 23.1.0-beta2

package/src/vaadin-grid-data-provider-mixin.js

@@ -42,7 +42,7 @@ export const ItemCache = class ItemCache {
       Object.keys(this.pendingRequests).length ||
         Object.keys(this.itemCaches).filter((index) => {
           return this.itemCaches[index].isLoading();
-        })[0]
+        })[0],
     );
   }
 
@@ -113,7 +113,7 @@ export const DataProviderMixin = (superClass) =>
          */
         size: {
           type: Number,
-          notify: true
+          notify: true,
         },
 
         /**
@@ -124,7 +124,7 @@ export const DataProviderMixin = (superClass) =>
         pageSize: {
           type: Number,
           value: 50,
-          observer: '_pageSizeChanged'
+          observer: '_pageSizeChanged',
         },
 
         /**
@@ -153,7 +153,7 @@ export const DataProviderMixin = (superClass) =>
         dataProvider: {
           type: Object,
           notify: true,
-          observer: '_dataProviderChanged'
+          observer: '_dataProviderChanged',
         },
 
         /**
@@ -163,7 +163,7 @@ export const DataProviderMixin = (superClass) =>
           type: Boolean,
           notify: true,
           readOnly: true,
-          reflectToAttribute: true
+          reflectToAttribute: true,
         },
 
         /**
@@ -172,10 +172,10 @@ export const DataProviderMixin = (superClass) =>
          */
         _cache: {
           type: Object,
-          value: function () {
+          value() {
             const cache = new ItemCache(this);
             return cache;
-          }
+          },
         },
 
         /**
@@ -183,7 +183,7 @@ export const DataProviderMixin = (superClass) =>
          */
         _hasData: {
           type: Boolean,
-          value: false
+          value: false,
         },
 
         /**
@@ -192,7 +192,7 @@ export const DataProviderMixin = (superClass) =>
          */
         itemHasChildrenPath: {
           type: String,
-          value: 'children'
+          value: 'children',
         },
 
         /**
@@ -201,7 +201,7 @@ export const DataProviderMixin = (superClass) =>
          */
         itemIdPath: {
           type: String,
-          value: null
+          value: null,
         },
 
         /**
@@ -211,7 +211,7 @@ export const DataProviderMixin = (superClass) =>
         expandedItems: {
           type: Object,
           notify: true,
-          value: () => []
+          value: () => [],
         },
 
         /**
@@ -219,8 +219,8 @@ export const DataProviderMixin = (superClass) =>
          */
         __expandedKeys: {
           type: Object,
-          value: () => new Set()
-        }
+          value: () => new Set(),
+        },
       };
     }
 
@@ -344,7 +344,7 @@ export const DataProviderMixin = (superClass) =>
      * @protected
      */
     _loadPage(page, cache) {
-      // make sure same page isn't requested multiple times.
+      // Make sure same page isn't requested multiple times.
       if (!cache.pendingRequests[page] && this.dataProvider) {
         this._setLoading(true);
         cache.pendingRequests[page] = true;
@@ -353,7 +353,7 @@ export const DataProviderMixin = (superClass) =>
           pageSize: this.pageSize,
           sortOrders: this._mapSorters(),
           filters: this._mapFilters(),
-          parentItem: cache.parentItem
+          parentItem: cache.parentItem,
         };
 
         this.dataProvider(params, (items, size) => {
@@ -443,7 +443,7 @@ export const DataProviderMixin = (superClass) =>
           'The <vaadin-grid> needs the total number of items' +
             ' in order to display rows. Set the total number of items' +
             ' to the `size` property, or provide the total number of items' +
-            ' in the second argument of the `dataProvider`’s `callback` call.'
+            ' in the second argument of the `dataProvider`’s `callback` call.',
         );
       }
     }
@@ -459,14 +459,14 @@ export const DataProviderMixin = (superClass) =>
       this._debouncerCheckSize = Debouncer.debounce(
         this._debouncerCheckSize,
         timeOut.after(2000),
-        this._checkSize.bind(this)
+        this._checkSize.bind(this),
       );
     }
 
     /** @protected */
     _ensureFirstPageLoaded() {
       if (!this._hasData) {
-        // load data before adding rows to make sure they have content when
+        // Load data before adding rows to make sure they have content when
         // rendered for the first time.
         this._loadPage(0, this._cache);
       }

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

@@ -13,7 +13,7 @@ export type GridDropLocation = 'above' | 'on-top' | 'below' | 'empty';
 export type GridDropMode = 'between' | 'on-top' | 'on-top-or-between' | 'on-grid';
 
 export declare function DragAndDropMixin<TItem, T extends Constructor<HTMLElement>>(
-  base: T
+  base: T,
 ): T & Constructor<DragAndDropMixinClass<TItem>>;
 
 export declare class DragAndDropMixinClass<TItem> {

package/src/vaadin-grid-drag-and-drop-mixin.js

@@ -7,14 +7,14 @@ const DropMode = {
   BETWEEN: 'between',
   ON_TOP: 'on-top',
   ON_TOP_OR_BETWEEN: 'on-top-or-between',
-  ON_GRID: 'on-grid'
+  ON_GRID: 'on-grid',
 };
 
 const DropLocation = {
   ON_TOP: 'on-top',
   ABOVE: 'above',
   BELOW: 'below',
-  EMPTY: 'empty'
+  EMPTY: 'empty',
 };
 
 /**
@@ -79,8 +79,8 @@ export const DragAndDropMixin = (superClass) =>
 
         /** @private */
         __dndAutoScrollThreshold: {
-          value: 50
-        }
+          value: 50,
+        },
       };
     }
 
@@ -162,8 +162,8 @@ export const DragAndDropMixin = (superClass) =>
           detail: {
             draggedItems: rows.map((row) => row._item),
             setDragData: (type, data) => e.dataTransfer.setData(type, data),
-            setDraggedItemsCount: (count) => row.setAttribute('dragstart', count)
-          }
+            setDraggedItemsCount: (count) => row.setAttribute('dragstart', count),
+          },
         });
         event.originalEvent = e;
         this.dispatchEvent(event);
@@ -313,7 +313,7 @@ export const DragAndDropMixin = (superClass) =>
           Array.from(e.dataTransfer.types).map((type) => {
             return {
               type,
-              data: e.dataTransfer.getData(type)
+              data: e.dataTransfer.getData(type),
             };
           });
 
@@ -325,8 +325,8 @@ export const DragAndDropMixin = (superClass) =>
           detail: {
             dropTargetItem: this._dragOverItem,
             dropLocation: this._dropLocation,
-            dragData
-          }
+            dragData,
+          },
         });
         event.originalEvent = e;
         this.dispatchEvent(event);

package/src/vaadin-grid-dynamic-columns-mixin.js

@@ -8,6 +8,25 @@ import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { timeOut } from '@vaadin/component-base/src/async.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 
+function arrayEquals(arr1, arr2) {
+  if (!arr1 || !arr2 || arr1.length !== arr2.length) {
+    return false;
+  }
+
+  for (let i = 0, l = arr1.length; i < l; i++) {
+    // Check if we have nested arrays
+    if (arr1[i] instanceof Array && arr2[i] instanceof Array) {
+      // Recurse into the nested arrays
+      if (!arrayEquals(arr1[i], arr2[i])) {
+        return false;
+      }
+    } else if (arr1[i] !== arr2[i]) {
+      return false;
+    }
+  }
+  return true;
+}
+
 /**
  * @polymerMixin
  */
@@ -18,7 +37,7 @@ export const DynamicColumnsMixin = (superClass) =>
         /**
          * @protected
          */
-        _columnTree: Object
+        _columnTree: Object,
       };
     }
 
@@ -79,7 +98,7 @@ export const DynamicColumnsMixin = (superClass) =>
     /** @protected */
     _updateColumnTree() {
       const columnTree = this._getColumnTree();
-      if (!this._arrayEquals(columnTree, this._columnTree)) {
+      if (!arrayEquals(columnTree, this._columnTree)) {
         this._columnTree = columnTree;
       }
     }
@@ -101,33 +120,13 @@ export const DynamicColumnsMixin = (superClass) =>
         this._debouncerCheckImports = Debouncer.debounce(
           this._debouncerCheckImports,
           timeOut.after(2000),
-          this._checkImports.bind(this)
+          this._checkImports.bind(this),
         );
 
         this._ensureFirstPageLoaded();
       });
     }
 
-    /** @private */
-    _arrayEquals(arr1, arr2) {
-      if (!arr1 || !arr2 || arr1.length != arr2.length) {
-        return false;
-      }
-
-      for (let i = 0, l = arr1.length; i < l; i++) {
-        // Check if we have nested arrays
-        if (arr1[i] instanceof Array && arr2[i] instanceof Array) {
-          // recurse into the nested arrays
-          if (!this._arrayEquals(arr1[i], arr2[i])) {
-            return false;
-          }
-        } else if (arr1[i] != arr2[i]) {
-          return false;
-        }
-      }
-      return true;
-    }
-
     /** @protected */
     _checkImports() {
       [
@@ -137,7 +136,7 @@ export const DynamicColumnsMixin = (superClass) =>
         'vaadin-grid-tree-toggle',
         'vaadin-grid-selection-column',
         'vaadin-grid-sort-column',
-        'vaadin-grid-sorter'
+        'vaadin-grid-sorter',
       ].forEach((elementName) => {
         const element = this.querySelector(elementName);
         if (element && !(element instanceof PolymerElement)) {

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

@@ -18,7 +18,7 @@ export interface GridEventContext<TItem> {
 }
 
 export declare function EventContextMixin<TItem, T extends Constructor<HTMLElement>>(
-  base: T
+  base: T,
 ): T & Constructor<EventContextMixinClass<TItem>>;
 
 export declare class EventContextMixinClass<TItem> {

package/src/vaadin-grid-event-context-mixin.js

@@ -41,7 +41,7 @@ export const EventContextMixin = (superClass) =>
       }
 
       context.section = ['body', 'header', 'footer', 'details'].filter(
-        (section) => cell.getAttribute('part').indexOf(section) > -1
+        (section) => cell.getAttribute('part').indexOf(section) > -1,
       )[0];
 
       if (cell._column) {

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

@@ -34,7 +34,7 @@ class GridFilterColumn extends GridColumn {
       /**
        * Text to display as the label of the column filter text-field.
        */
-      header: String
+      header: String,
     };
   }
 

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

@@ -14,10 +14,8 @@ export const FilterMixin = (superClass) =>
         /** @private */
         _filters: {
           type: Array,
-          value: function () {
-            return [];
-          }
-        }
+          value: () => [],
+        },
       };
     }
 
@@ -37,7 +35,7 @@ export const FilterMixin = (superClass) =>
 
     /** @private */
     __removeFilters(filtersToRemove) {
-      if (filtersToRemove.length == 0) {
+      if (filtersToRemove.length === 0) {
         return;
       }
 
@@ -69,7 +67,7 @@ export const FilterMixin = (superClass) =>
       return this._filters.map((filter) => {
         return {
           path: filter.path,
-          value: filter.value
+          value: filter.value,
         };
       });
     }

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

@@ -54,13 +54,13 @@ declare class GridFilter extends HTMLElement {
   addEventListener<K extends keyof GridFilterEventMap>(
     type: K,
     listener: (this: GridFilter, ev: GridFilterEventMap[K]) => void,
-    options?: boolean | AddEventListenerOptions
+    options?: boolean | AddEventListenerOptions,
   ): void;
 
   removeEventListener<K extends keyof GridFilterEventMap>(
     type: K,
     listener: (this: GridFilter, ev: GridFilterEventMap[K]) => void,
-    options?: boolean | EventListenerOptions
+    options?: boolean | EventListenerOptions,
   ): void;
 }
 

package/src/vaadin-grid-filter.js

@@ -71,11 +71,11 @@ class GridFilter extends class extends PolymerElement {} {
        */
       value: {
         type: String,
-        notify: true
+        notify: true,
       },
 
       /** @private */
-      _connected: Boolean
+      _connected: Boolean,
     };
   }
 

package/src/vaadin-grid-helpers.js

@@ -12,7 +12,7 @@
 export function updateColumnOrders(columns, scope, baseOrder) {
   let c = 1;
   columns.forEach((column) => {
-    // avoid multiples of 10 because they introduce and extra zero and
+    // 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 += 1;

package/src/vaadin-grid-keyboard-navigation-mixin.js

@@ -14,7 +14,7 @@ export const KeyboardNavigationMixin = (superClass) =>
         /** @private */
         _headerFocusable: {
           type: Object,
-          observer: '_focusableChanged'
+          observer: '_focusableChanged',
         },
 
         /**
@@ -23,13 +23,13 @@ export const KeyboardNavigationMixin = (superClass) =>
          */
         _itemsFocusable: {
           type: Object,
-          observer: '_focusableChanged'
+          observer: '_focusableChanged',
         },
 
         /** @private */
         _footerFocusable: {
           type: Object,
-          observer: '_focusableChanged'
+          observer: '_focusableChanged',
         },
 
         /** @private */
@@ -41,7 +41,7 @@ export const KeyboardNavigationMixin = (superClass) =>
          */
         _focusedItemIndex: {
           type: Number,
-          value: 0
+          value: 0,
         },
 
         /** @private */
@@ -64,8 +64,8 @@ export const KeyboardNavigationMixin = (superClass) =>
           value: false,
           reflectToAttribute: true,
           readOnly: true,
-          observer: '_interactingChanged'
-        }
+          observer: '_interactingChanged',
+        },
       };
     }
 
@@ -461,7 +461,7 @@ export const KeyboardNavigationMixin = (superClass) =>
 
       return {
         dstRow: [...activeRowGroup.children].find((el) => !el.hidden && el.index === dstRowIndex),
-        dstIsRowDetails
+        dstIsRowDetails,
       };
     }
 
@@ -511,7 +511,7 @@ export const KeyboardNavigationMixin = (superClass) =>
         const orderedColumnIndex = dstSortedColumnOrders.indexOf(
           dstSortedColumnOrders
             .slice(0)
-            .sort((b, a) => Math.abs(b - this._focusedColumnOrder) - Math.abs(a - this._focusedColumnOrder))[0]
+            .sort((b, a) => Math.abs(b - this._focusedColumnOrder) - Math.abs(a - this._focusedColumnOrder))[0],
         );
 
         // Index of the destination column order
@@ -591,7 +591,7 @@ export const KeyboardNavigationMixin = (superClass) =>
         this._headerFocusable,
         this._itemsFocusable,
         this._footerFocusable,
-        this.$.focusexit
+        this.$.focusexit,
       ];
 
       let index = tabOrder.indexOf(srcElement);
@@ -617,6 +617,11 @@ export const KeyboardNavigationMixin = (superClass) =>
     _onTabKeyDown(e) {
       const focusTarget = this._predictFocusStepTarget(e.composedPath()[0], e.shiftKey ? -1 : 1);
 
+      // Can be undefined if grid has tabindex
+      if (!focusTarget) {
+        return;
+      }
+
       // Prevent focus-trap logic from intercepting the event.
       e.stopPropagation();
 
@@ -636,7 +641,7 @@ export const KeyboardNavigationMixin = (superClass) =>
           // scrolling. Focus the row for the stored focused item index instead.
           const columnIndex = Array.from(targetRow.children).indexOf(this._itemsFocusable);
           const focusedItemRow = Array.from(this.$.items.children).find(
-            (row) => !row.hidden && row.index === this._focusedItemIndex
+            (row) => !row.hidden && row.index === this._focusedItemIndex,
           );
           if (focusedItemRow) {
             itemsFocusTarget = focusedItemRow.children[columnIndex];
@@ -662,9 +667,9 @@ export const KeyboardNavigationMixin = (superClass) =>
         this.dispatchEvent(
           new CustomEvent(isRow ? 'row-activate' : 'cell-activate', {
             detail: {
-              model: this.__getRowModel(isRow ? element : element.parentElement)
-            }
-          })
+              model: this.__getRowModel(isRow ? element : element.parentElement),
+            },
+          }),
         );
       }
     }
@@ -734,9 +739,7 @@ export const KeyboardNavigationMixin = (superClass) =>
         if (cell) {
           // Fire a public event for cell.
           const context = this.getEventContext(e);
-          cell.dispatchEvent(
-            new CustomEvent('cell-focus', { bubbles: true, composed: true, detail: { context: context } })
-          );
+          cell.dispatchEvent(new CustomEvent('cell-focus', { bubbles: true, composed: true, detail: { context } }));
         }
       }
 
@@ -920,7 +923,7 @@ export const KeyboardNavigationMixin = (superClass) =>
       return {
         section,
         row,
-        cell
+        cell,
       };
     }
 

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

@@ -9,11 +9,11 @@ import { Grid, GridItemModel } from './vaadin-grid.js';
 export type GridRowDetailsRenderer<TItem> = (
   root: HTMLElement,
   grid?: Grid<TItem>,
-  model?: GridItemModel<TItem>
+  model?: GridItemModel<TItem>,
 ) => void;
 
 export declare function RowDetailsMixin<TItem, T extends Constructor<HTMLElement>>(
-  base: T
+  base: T,
 ): T & Constructor<RowDetailsMixinClass<TItem>>;
 
 export declare class RowDetailsMixinClass<TItem> {

package/src/vaadin-grid-row-details-mixin.js

@@ -17,9 +17,7 @@ export const RowDetailsMixin = (superClass) =>
          */
         detailsOpenedItems: {
           type: Array,
-          value: function () {
-            return [];
-          }
+          value: () => [],
         },
 
         /**
@@ -45,15 +43,15 @@ export const RowDetailsMixin = (superClass) =>
          * @protected
          */
         _detailsCells: {
-          type: Array
-        }
+          type: Array,
+        },
       };
     }
 
     static get observers() {
       return [
         '_detailsOpenedItemsChanged(detailsOpenedItems.*, rowDetailsRenderer)',
-        '_rowDetailsRendererChanged(rowDetailsRenderer)'
+        '_rowDetailsRendererChanged(rowDetailsRenderer)',
       ];
     }
 

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

@@ -8,7 +8,7 @@ import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
 
 const timeouts = {
-  SCROLLING: 500
+  SCROLLING: 500,
 };
 
 /**
@@ -24,7 +24,7 @@ export const ScrollMixin = (superClass) =>
          */
         _frozenCells: {
           type: Array,
-          value: () => []
+          value: () => [],
         },
 
         /**
@@ -33,11 +33,11 @@ export const ScrollMixin = (superClass) =>
          */
         _frozenToEndCells: {
           type: Array,
-          value: () => []
+          value: () => [],
         },
 
         /** @private */
-        _rowWithFocusedElement: Element
+        _rowWithFocusedElement: Element,
       };
     }
 
@@ -63,9 +63,6 @@ export const ScrollMixin = (superClass) =>
     ready() {
       super.ready();
 
-      // Preserve accessor to the legacy scrolling functionality
-      this.$.outerscroller = document.createElement('div');
-
       this.scrollTarget = this.$.table;
 
       this.$.items.addEventListener('focusin', (e) => {
@@ -183,7 +180,7 @@ export const ScrollMixin = (superClass) =>
         const value = overflow.trim();
         if (value.length > 0 && this.getAttribute('overflow') !== value) {
           this.setAttribute('overflow', value);
-        } else if (value.length == 0 && this.hasAttribute('overflow')) {
+        } else if (value.length === 0 && this.hasAttribute('overflow')) {
           this.removeAttribute('overflow');
         }
       });
@@ -192,7 +189,7 @@ export const ScrollMixin = (superClass) =>
     /** @protected */
     _frozenCellsChanged() {
       this._debouncerCacheElements = Debouncer.debounce(this._debouncerCacheElements, microTask, () => {
-        Array.from(this.shadowRoot.querySelectorAll('[part~="cell"]')).forEach(function (cell) {
+        Array.from(this.shadowRoot.querySelectorAll('[part~="cell"]')).forEach((cell) => {
           cell.style.transform = '';
         });
         this._frozenCells = Array.prototype.slice.call(this.$.table.querySelectorAll('[frozen]'));
@@ -271,7 +268,7 @@ export const ScrollMixin = (superClass) =>
       // Only update the --_grid-horizontal-scroll-position custom property when navigating
       // on row focus mode to avoid performance issues.
       if (this.hasAttribute('navigating') && this.__rowFocusMode) {
-        this.$.table.style.setProperty('--_grid-horizontal-scroll-position', -x + 'px');
+        this.$.table.style.setProperty('--_grid-horizontal-scroll-position', `${-x}px`);
       }
     }
   };

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

@@ -57,13 +57,13 @@ declare class GridSelectionColumn<TItem = GridDefaultItem> extends GridColumn<TI
   addEventListener<K extends keyof GridSelectionColumnEventMap>(
     type: K,
     listener: (this: GridSelectionColumn<TItem>, ev: GridSelectionColumnEventMap[K]) => void,
-    options?: boolean | AddEventListenerOptions
+    options?: boolean | AddEventListenerOptions,
   ): void;
 
   removeEventListener<K extends keyof GridSelectionColumnEventMap>(
     type: K,
     listener: (this: GridSelectionColumn<TItem>, ev: GridSelectionColumnEventMap[K]) => void,
-    options?: boolean | EventListenerOptions
+    options?: boolean | EventListenerOptions,
   ): void;
 }