@vaadin/grid 22.0.0-beta1 → 22.0.1

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

@@ -3,14 +3,11 @@
  * Copyright (c) 2021 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';
 
-declare function ScrollMixin<T extends new (...args: any[]) => {}>(base: T): T & ScrollMixinConstructor;
+export declare function ScrollMixin<T extends Constructor<HTMLElement>>(base: T): T & Constructor<ScrollMixinClass>;
 
-interface ScrollMixinConstructor {
-  new (...args: any[]): ScrollMixin;
-}
-
-interface ScrollMixin {
+export declare class ScrollMixinClass {
   /**
    * Scroll to a specific row index in the virtual list. Note that the row index is
    * not always the same for any particular item. For example, sorting/filtering/expanding
@@ -20,5 +17,3 @@ interface ScrollMixin {
    */
   scrollToIndex(index: number): void;
 }
-
-export { ScrollMixin, ScrollMixinConstructor };

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

@@ -3,8 +3,8 @@
  * Copyright (c) 2021 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';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
-import { animationFrame, timeOut, microTask } from '@vaadin/component-base/src/async.js';
 
 const timeouts = {
   SCROLLING: 500

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

@@ -3,8 +3,8 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { GridColumn } from './vaadin-grid-column.js';
 import { GridDefaultItem } from './vaadin-grid.js';
+import { GridColumn } from './vaadin-grid-column.js';
 
 /**
  * Fired when the `selectAll` property changes.

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

@@ -3,8 +3,8 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { GridColumn } from './vaadin-grid-column.js';
 import '@vaadin/checkbox/src/vaadin-checkbox.js';
+import { GridColumn } from './vaadin-grid-column.js';
 
 /**
  * `<vaadin-grid-selection-column>` is a helper element for the `<vaadin-grid>`
@@ -184,7 +184,11 @@ class GridSelectionColumn extends GridColumn {
       return;
     }
 
-    this._grid.selectedItems = selectAll && Array.isArray(this._grid.items) ? this.__getRootLevelItems() : [];
+    if (selectAll && Array.isArray(this._grid.items)) {
+      this.__withFilteredItemsArray((items) => (this._grid.selectedItems = items));
+    } else {
+      this._grid.selectedItems = [];
+    }
   }
 
   /**
@@ -250,26 +254,22 @@ class GridSelectionColumn extends GridColumn {
     this.__previousActiveItem = activeItem;
   }
 
-  /** @private */
-  __getRootLevelItems() {
-    const rootCache = this._grid._cache;
-    return [...Array(rootCache.size)].map((_, idx) => rootCache.items[idx]);
-  }
-
   /** @private */
   __onSelectedItemsChanged() {
     this._selectAllChangeLock = true;
     if (Array.isArray(this._grid.items)) {
-      if (!this._grid.selectedItems.length) {
-        this.selectAll = false;
-        this.__indeterminate = false;
-      } else if (this.__arrayContains(this._grid.selectedItems, this.__getRootLevelItems())) {
-        this.selectAll = true;
-        this.__indeterminate = false;
-      } else {
-        this.selectAll = false;
-        this.__indeterminate = true;
-      }
+      this.__withFilteredItemsArray((items) => {
+        if (!this._grid.selectedItems.length) {
+          this.selectAll = false;
+          this.__indeterminate = false;
+        } else if (this.__arrayContains(this._grid.selectedItems, items)) {
+          this.selectAll = true;
+          this.__indeterminate = false;
+        } else {
+          this.selectAll = false;
+          this.__indeterminate = true;
+        }
+      });
     }
     this._selectAllChangeLock = false;
   }
@@ -278,6 +278,22 @@ class GridSelectionColumn extends GridColumn {
   __onDataProviderChanged() {
     this.__selectAllHidden = !Array.isArray(this._grid.items);
   }
+
+  /**
+   * Assuming the grid uses an items array data provider, fetches all the filtered items
+   * from the data provider and invokes the callback with the resulting array.
+   *
+   * @private
+   */
+  __withFilteredItemsArray(callback) {
+    const params = {
+      page: 0,
+      pageSize: Infinity,
+      sortOrders: [],
+      filters: this._grid._mapFilters()
+    };
+    this._grid.dataProvider(params, (items) => callback(items));
+  }
 }
 
 customElements.define(GridSelectionColumn.is, GridSelectionColumn);

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

@@ -3,16 +3,13 @@
  * Copyright (c) 2021 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';
 
-declare function SelectionMixin<TItem, T extends new (...args: any[]) => {}>(
+export declare function SelectionMixin<TItem, T extends Constructor<HTMLElement>>(
   base: T
-): T & SelectionMixinConstructor<TItem>;
+): T & Constructor<SelectionMixinClass<TItem>>;
 
-interface SelectionMixinConstructor<TItem> {
-  new (...args: any[]): SelectionMixin<TItem>;
-}
-
-interface SelectionMixin<TItem> {
+export declare class SelectionMixinClass<TItem> {
   /**
    * An array that contains the selected items.
    */
@@ -32,5 +29,3 @@ interface SelectionMixin<TItem> {
    */
   deselectItem(item: TItem): void;
 }
-
-export { SelectionMixin, SelectionMixinConstructor };

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

@@ -3,8 +3,8 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { GridColumn } from './vaadin-grid-column.js';
 import { GridDefaultItem } from './vaadin-grid.js';
+import { GridColumn } from './vaadin-grid-column.js';
 import { GridSorterDirection } from './vaadin-grid-sorter.js';
 
 /**

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

@@ -3,8 +3,8 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { GridColumn } from './vaadin-grid-column.js';
 import './vaadin-grid-sorter.js';
+import { GridColumn } from './vaadin-grid-column.js';
 
 /**
  * `<vaadin-grid-sort-column>` is a helper element for the `<vaadin-grid>`

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

@@ -3,19 +3,14 @@
  * Copyright (c) 2021 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';
 
-declare function SortMixin<T extends new (...args: any[]) => {}>(base: T): T & SortMixinConstructor;
+export declare function SortMixin<T extends Constructor<HTMLElement>>(base: T): T & Constructor<SortMixinClass>;
 
-interface SortMixinConstructor {
-  new (...args: any[]): SortMixin;
-}
-
-interface SortMixin {
+export declare class SortMixinClass {
   /**
    * When `true`, all `<vaadin-grid-sorter>` are applied for sorting.
    * @attr {boolean} multi-sort
    */
   multiSort: boolean;
 }
-
-export { SortMixin, SortMixinConstructor };

package/src/vaadin-grid-sorter.js

@@ -3,7 +3,7 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
+import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 

package/src/vaadin-grid-styles.js

@@ -3,7 +3,7 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 registerStyles(
   'vaadin-grid',

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

@@ -3,18 +3,17 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { GridColumn } from './vaadin-grid-column.js';
+import { Constructor } from '@open-wc/dedupe-mixin';
 import { GridItemModel } from './vaadin-grid.js';
+import { GridColumn } from './vaadin-grid-column.js';
 
 export type GridCellClassNameGenerator<TItem> = (column: GridColumn<TItem>, model: GridItemModel<TItem>) => string;
 
-declare function StylingMixin<TItem, T extends new (...args: any[]) => {}>(base: T): T & StylingMixinConstructor<TItem>;
+export declare function StylingMixin<TItem, T extends Constructor<HTMLElement>>(
+  base: T
+): T & Constructor<StylingMixinClass<TItem>>;
 
-interface StylingMixinConstructor<TItem> {
-  new (...args: any[]): StylingMixin<TItem>;
-}
-
-interface StylingMixin<TItem> {
+export declare class StylingMixinClass<TItem> {
   /**
    * A function that allows generating CSS class names for grid cells
    * based on their row and column. The return value should be the generated
@@ -41,5 +40,3 @@ interface StylingMixin<TItem> {
    */
   generateCellClassNames(): void;
 }
-
-export { StylingMixin, StylingMixinConstructor };

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

@@ -3,8 +3,8 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { GridColumn } from './vaadin-grid-column.js';
 import { GridDefaultItem } from './vaadin-grid.js';
+import { GridColumn } from './vaadin-grid-column.js';
 
 /**
  * `<vaadin-grid-tree-column>` is a helper element for the `<vaadin-grid>`

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

@@ -3,8 +3,8 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { GridColumn } from './vaadin-grid-column.js';
 import './vaadin-grid-tree-toggle.js';
+import { GridColumn } from './vaadin-grid-column.js';
 
 /**
  * `<vaadin-grid-tree-column>` is a helper element for the `<vaadin-grid>`

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

@@ -3,7 +3,7 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
+import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { isFocusable } from './vaadin-grid-active-item-mixin.js';

package/src/vaadin-grid.d.ts

@@ -3,14 +3,14 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { ActiveItemMixin } from './vaadin-grid-active-item-mixin.js';
-import { ArrayDataProviderMixin } from './vaadin-grid-array-data-provider-mixin.js';
-import { GridColumn, GridBodyRenderer, GridHeaderFooterRenderer } from './vaadin-grid-column.js';
-import { ColumnReorderingMixin } from './vaadin-grid-column-reordering-mixin.js';
+import { ElementMixinClass } from '@vaadin/component-base/src/element-mixin.js';
+import { ThemableMixinClass } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { ActiveItemMixinClass } from './vaadin-grid-active-item-mixin.js';
+import { ArrayDataProviderMixinClass } from './vaadin-grid-array-data-provider-mixin.js';
+import { GridBodyRenderer, GridColumn, GridHeaderFooterRenderer } from './vaadin-grid-column.js';
+import { ColumnReorderingMixinClass } from './vaadin-grid-column-reordering-mixin.js';
 import {
-  DataProviderMixin,
+  DataProviderMixinClass,
   GridDataProvider,
   GridDataProviderCallback,
   GridDataProviderParams,
@@ -19,17 +19,17 @@ import {
   GridSorterDirection
 } from './vaadin-grid-data-provider-mixin.js';
 import {
-  DragAndDropMixin,
+  DragAndDropMixinClass,
   GridDragAndDropFilter,
   GridDropLocation,
   GridDropMode
 } from './vaadin-grid-drag-and-drop-mixin.js';
-import { EventContextMixin, GridEventContext } from './vaadin-grid-event-context-mixin.js';
-import { RowDetailsMixin, GridRowDetailsRenderer } from './vaadin-grid-row-details-mixin.js';
-import { ScrollMixin } from './vaadin-grid-scroll-mixin.js';
-import { SelectionMixin } from './vaadin-grid-selection-mixin.js';
-import { SortMixin } from './vaadin-grid-sort-mixin.js';
-import { StylingMixin, GridCellClassNameGenerator } from './vaadin-grid-styling-mixin.js';
+import { EventContextMixinClass, GridEventContext } from './vaadin-grid-event-context-mixin.js';
+import { GridRowDetailsRenderer, RowDetailsMixinClass } from './vaadin-grid-row-details-mixin.js';
+import { ScrollMixinClass } from './vaadin-grid-scroll-mixin.js';
+import { SelectionMixinClass } from './vaadin-grid-selection-mixin.js';
+import { SortMixinClass } from './vaadin-grid-sort-mixin.js';
+import { GridCellClassNameGenerator, StylingMixinClass } from './vaadin-grid-styling-mixin.js';
 
 export {
   GridBodyRenderer,
@@ -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));
  * };
  * ```
  *
@@ -397,19 +388,19 @@ declare class Grid<TItem = GridDefaultItem> extends HTMLElement {
 }
 
 interface Grid<TItem = GridDefaultItem>
-  extends ElementMixin,
-    ThemableMixin,
-    ActiveItemMixin<TItem>,
-    ArrayDataProviderMixin<TItem>,
-    DataProviderMixin<TItem>,
-    RowDetailsMixin<TItem>,
-    ScrollMixin,
-    SelectionMixin<TItem>,
-    SortMixin,
-    ColumnReorderingMixin,
-    EventContextMixin<TItem>,
-    StylingMixin<TItem>,
-    DragAndDropMixin<TItem> {}
+  extends ElementMixinClass,
+    ThemableMixinClass,
+    ActiveItemMixinClass<TItem>,
+    ArrayDataProviderMixinClass<TItem>,
+    DataProviderMixinClass<TItem>,
+    RowDetailsMixinClass<TItem>,
+    ScrollMixinClass,
+    SelectionMixinClass<TItem>,
+    SortMixinClass,
+    ColumnReorderingMixinClass,
+    EventContextMixinClass<TItem>,
+    StylingMixinClass<TItem>,
+    DragAndDropMixinClass<TItem> {}
 
 declare global {
   interface HTMLElementTagNameMap {