@vaadin/grid 22.0.13 → 22.0.16

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,
         },
 
         /**
@@ -175,7 +175,7 @@ export const DataProviderMixin = (superClass) =>
           value: function () {
             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) =>
          */
         itemIdPath: {
           type: String,
-          value: null
+          value: null,
         },
 
         /**
@@ -202,7 +202,7 @@ export const DataProviderMixin = (superClass) =>
         expandedItems: {
           type: Object,
           notify: true,
-          value: () => []
+          value: () => [],
         },
 
         /**
@@ -210,8 +210,8 @@ export const DataProviderMixin = (superClass) =>
          */
         __expandedKeys: {
           type: Object,
-          value: () => new Set()
-        }
+          value: () => new Set(),
+        },
       };
     }
 
@@ -344,7 +344,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) => {
@@ -436,7 +436,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.',
         );
       }
     }
@@ -452,7 +452,7 @@ export const DataProviderMixin = (superClass) =>
       this._debouncerCheckSize = Debouncer.debounce(
         this._debouncerCheckSize,
         timeOut.after(2000),
-        this._checkSize.bind(this)
+        this._checkSize.bind(this),
       );
     }
 

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

@@ -18,7 +18,7 @@ export const DynamicColumnsMixin = (superClass) =>
         /**
          * @protected
          */
-        _columnTree: Object
+        _columnTree: Object,
       };
     }
 
@@ -104,7 +104,7 @@ export const DynamicColumnsMixin = (superClass) =>
         this._debouncerCheckImports = Debouncer.debounce(
           this._debouncerCheckImports,
           timeOut.after(2000),
-          this._checkImports.bind(this)
+          this._checkImports.bind(this),
         );
 
         this._ensureFirstPageLoaded();
@@ -140,7 +140,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

@@ -16,8 +16,8 @@ export const FilterMixin = (superClass) =>
           type: Array,
           value: function () {
             return [];
-          }
-        }
+          },
+        },
       };
     }
 
@@ -69,7 +69,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-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',
+        },
       };
     }
 
@@ -222,7 +222,7 @@ export const KeyboardNavigationMixin = (superClass) =>
     __isRowExpandable(row) {
       const treeToggle = [...row.children].reduce(
         (value, cell) => value || cell._content.querySelector('vaadin-grid-tree-toggle'),
-        null
+        null,
       );
       return treeToggle && !treeToggle.expanded && !treeToggle.leaf;
     }
@@ -468,7 +468,7 @@ export const KeyboardNavigationMixin = (superClass) =>
 
         return {
           dstRow: [...activeRowGroup.children].find((el) => !el.hidden && el.index === dstRowIndex),
-          dstIsRowDetails
+          dstIsRowDetails,
         };
       }
     }
@@ -519,7 +519,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
@@ -594,7 +594,7 @@ export const KeyboardNavigationMixin = (superClass) =>
         this._headerFocusable,
         this._itemsFocusable,
         this._footerFocusable,
-        this.$.focusexit
+        this.$.focusexit,
       ];
 
       let index = tabOrder.indexOf(srcElement);
@@ -620,6 +620,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();
 
@@ -639,7 +644,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];
@@ -665,9 +670,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),
+            },
+          }),
         );
       }
     }
@@ -738,7 +743,7 @@ export const KeyboardNavigationMixin = (superClass) =>
           // Fire a public event for cell.
           const context = this.getEventContext(e);
           cell.dispatchEvent(
-            new CustomEvent('cell-focus', { bubbles: true, composed: true, detail: { context: context } })
+            new CustomEvent('cell-focus', { bubbles: true, composed: true, detail: { context: context } }),
           );
         }
       }
@@ -920,7 +925,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

@@ -19,7 +19,7 @@ export const RowDetailsMixin = (superClass) =>
           type: Array,
           value: function () {
             return [];
-          }
+          },
         },
 
         /**
@@ -45,15 +45,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

@@ -7,7 +7,7 @@ import { animationFrame, microTask, timeOut } from '@vaadin/component-base/src/a
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 
 const timeouts = {
-  SCROLLING: 500
+  SCROLLING: 500,
 };
 
 /**
@@ -23,11 +23,11 @@ export const ScrollMixin = (superClass) =>
          */
         _frozenCells: {
           type: Array,
-          value: () => []
+          value: () => [],
         },
 
         /** @private */
-        _rowWithFocusedElement: Element
+        _rowWithFocusedElement: Element,
       };
     }
 

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;
 }
 

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

@@ -42,7 +42,7 @@ class GridSelectionColumn extends GridColumn {
        */
       width: {
         type: String,
-        value: '58px'
+        value: '58px',
       },
 
       /**
@@ -52,7 +52,7 @@ class GridSelectionColumn extends GridColumn {
        */
       flexGrow: {
         type: Number,
-        value: 0
+        value: 0,
       },
 
       /**
@@ -63,7 +63,7 @@ class GridSelectionColumn extends GridColumn {
       selectAll: {
         type: Boolean,
         value: false,
-        notify: true
+        notify: true,
       },
 
       /**
@@ -73,7 +73,7 @@ class GridSelectionColumn extends GridColumn {
        */
       autoSelect: {
         type: Boolean,
-        value: false
+        value: false,
       },
 
       /** @private */
@@ -87,14 +87,14 @@ class GridSelectionColumn extends GridColumn {
       __previousActiveItem: Object,
 
       /** @private */
-      __selectAllHidden: Boolean
+      __selectAllHidden: Boolean,
     };
   }
 
   static get observers() {
     return [
       '__onSelectAllChanged(selectAll)',
-      '_onHeaderRendererOrBindingChanged(_headerRenderer, _headerCell, path, header, selectAll, __indeterminate, __selectAllHidden)'
+      '_onHeaderRendererOrBindingChanged(_headerRenderer, _headerCell, path, header, selectAll, __indeterminate, __selectAllHidden)',
     ];
   }
 
@@ -290,7 +290,7 @@ class GridSelectionColumn extends GridColumn {
       page: 0,
       pageSize: Infinity,
       sortOrders: [],
-      filters: this._grid._mapFilters()
+      filters: this._grid._mapFilters(),
     };
     this._grid.dataProvider(params, (items) => callback(items));
   }

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

@@ -6,7 +6,7 @@
 import { Constructor } from '@open-wc/dedupe-mixin';
 
 export declare function SelectionMixin<TItem, T extends Constructor<HTMLElement>>(
-  base: T
+  base: T,
 ): T & Constructor<SelectionMixinClass<TItem>>;
 
 export declare class SelectionMixinClass<TItem> {

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

@@ -18,13 +18,22 @@ export const SelectionMixin = (superClass) =>
         selectedItems: {
           type: Object,
           notify: true,
-          value: () => []
-        }
+          value: () => [],
+        },
+
+        /**
+         * Set of selected item ids
+         * @private
+         */
+        __selectedKeys: {
+          type: Object,
+          value: () => new Set(),
+        },
       };
     }
 
     static get observers() {
-      return ['_selectedItemsChanged(selectedItems.*)'];
+      return ['_updateSelectedKeys(itemIdPath, selectedItems.*)'];
     }
 
     /**
@@ -33,7 +42,7 @@ export const SelectionMixin = (superClass) =>
      * @protected
      */
     _isSelected(item) {
-      return this.selectedItems && this._getItemIndexInArray(item, this.selectedItems) > -1;
+      return this.__selectedKeys.has(this.getItemId(item));
     }
 
     /**
@@ -68,8 +77,7 @@ export const SelectionMixin = (superClass) =>
      * @protected
      */
     _toggleItem(item) {
-      const index = this._getItemIndexInArray(item, this.selectedItems);
-      if (index === -1) {
+      if (!this._isSelected(item)) {
         this.selectItem(item);
       } else {
         this.deselectItem(item);
@@ -77,7 +85,13 @@ export const SelectionMixin = (superClass) =>
     }
 
     /** @private */
-    _selectedItemsChanged() {
+    _updateSelectedKeys() {
+      const selectedItems = this.selectedItems || [];
+      this.__selectedKeys = new Set();
+      selectedItems.forEach((item) => {
+        this.__selectedKeys.add(this.getItemId(item));
+      });
+
       this.requestContentUpdate();
     }
 

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

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

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

@@ -41,8 +41,8 @@ class GridSortColumn extends GridColumn {
        */
       direction: {
         type: String,
-        notify: true
-      }
+        notify: true,
+      },
     };
   }