@vaadin/grid 23.0.8 → 23.0.11

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,
       };
     }
 
@@ -101,7 +101,7 @@ export const DynamicColumnsMixin = (superClass) =>
         this._debouncerCheckImports = Debouncer.debounce(
           this._debouncerCheckImports,
           timeOut.after(2000),
-          this._checkImports.bind(this)
+          this._checkImports.bind(this),
         );
 
         this._ensureFirstPageLoaded();
@@ -137,7 +137,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',
+        },
       };
     }
 
@@ -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);
@@ -641,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];
@@ -667,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),
+            },
+          }),
         );
       }
     }
@@ -740,7 +740,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 } }),
           );
         }
       }
@@ -924,7 +924,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,
+          computed: '__computeSelectedKeys(itemIdPath, selectedItems.*)',
+        },
       };
     }
 
     static get observers() {
-      return ['_selectedItemsChanged(selectedItems.*)'];
+      return ['__selectedItemsChanged(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,10 +85,21 @@ export const SelectionMixin = (superClass) =>
     }
 
     /** @private */
-    _selectedItemsChanged() {
+    __selectedItemsChanged() {
       this.requestContentUpdate();
     }
 
+    /** @private */
+    __computeSelectedKeys(itemIdPath, selectedItems) {
+      const selected = selectedItems.base || [];
+      const selectedKeys = new Set();
+      selected.forEach((item) => {
+        selectedKeys.add(this.getItemId(item));
+      });
+
+      return selectedKeys;
+    }
+
     /**
      * Fired when the `selectedItems` property changes.
      *

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

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

@@ -18,7 +18,7 @@ export const SortMixin = (superClass) =>
          */
         multiSort: {
           type: Boolean,
-          value: false
+          value: false,
         },
 
         /**
@@ -29,7 +29,7 @@ export const SortMixin = (superClass) =>
           type: Array,
           value: function () {
             return [];
-          }
+          },
         },
 
         /** @private */
@@ -37,8 +37,8 @@ export const SortMixin = (superClass) =>
           type: Array,
           value: function () {
             return [];
-          }
-        }
+          },
+        },
       };
     }
 
@@ -122,7 +122,7 @@ export const SortMixin = (superClass) =>
       return this._sorters.map((sorter) => {
         return {
           path: sorter.path,
-          direction: sorter.direction
+          direction: sorter.direction,
         };
       });
     }

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

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

package/src/vaadin-grid-sorter.js

@@ -136,7 +136,7 @@ class GridSorter extends ThemableMixin(DirMixin(PolymerElement)) {
         type: String,
         reflectToAttribute: true,
         notify: true,
-        value: null
+        value: null,
       },
 
       /**
@@ -145,14 +145,14 @@ class GridSorter extends ThemableMixin(DirMixin(PolymerElement)) {
        */
       _order: {
         type: Number,
-        value: null
+        value: null,
       },
 
       /** @private */
       _isConnected: {
         type: Boolean,
-        observer: '__isConnectedChanged'
-      }
+        observer: '__isConnectedChanged',
+      },
     };
   }
 

package/src/vaadin-grid-styles.js

@@ -297,5 +297,5 @@ registerStyles(
       right: auto;
     }
   `,
-  { moduleId: 'vaadin-grid-styles' }
+  { moduleId: 'vaadin-grid-styles' },
 );

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

@@ -10,7 +10,7 @@ import { GridColumn } from './vaadin-grid-column.js';
 export type GridCellClassNameGenerator<TItem> = (column: GridColumn<TItem>, model: GridItemModel<TItem>) => string;
 
 export declare function StylingMixin<TItem, T extends Constructor<HTMLElement>>(
-  base: T
+  base: T,
 ): T & Constructor<StylingMixinClass<TItem>>;
 
 export declare class StylingMixinClass<TItem> {

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

@@ -29,7 +29,7 @@ export const StylingMixin = (superClass) =>
          *
          * @type {GridCellClassNameGenerator | null | undefined}
          */
-        cellClassNameGenerator: Function
+        cellClassNameGenerator: Function,
       };
     }
 

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

@@ -38,8 +38,8 @@ class GridTreeColumn extends GridColumn {
        */
       itemHasChildrenPath: {
         type: String,
-        observer: '_itemHasChildrenPathChanged'
-      }
+        observer: '_itemHasChildrenPathChanged',
+      },
     };
   }
 
@@ -89,7 +89,7 @@ class GridTreeColumn extends GridColumn {
   _itemHasChildrenPathChanged(itemHasChildrenPath) {
     if (itemHasChildrenPath) {
       console.warn(
-        `WARNING: Since Vaadin 23, itemHasChildrenPath on <vaadin-grid-tree-column> is deprecated. Please set this property on the <vaadin-grid> instead.`
+        `WARNING: Since Vaadin 23, itemHasChildrenPath on <vaadin-grid-tree-column> is deprecated. Please set this property on the <vaadin-grid> instead.`,
       );
 
       if (this._grid) {

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

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