@vaadin/grid 23.2.0-dev.8a7678b70 → 23.2.1

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

@@ -3,7 +3,7 @@
  * 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';
+import type { GridDefaultItem } from './vaadin-grid.js';
 import { GridColumn } from './vaadin-grid-column.js';
 
 /**
@@ -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?: AddEventListenerOptions | boolean,
   ): void;
 
   removeEventListener<K extends keyof GridSelectionColumnEventMap>(
     type: K,
     listener: (this: GridSelectionColumn<TItem>, ev: GridSelectionColumnEventMap[K]) => void,
-    options?: boolean | EventListenerOptions,
+    options?: EventListenerOptions | boolean,
   ): void;
 }
 

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

@@ -184,8 +184,10 @@ class GridSelectionColumn extends GridColumn {
       return;
     }
 
-    if (selectAll && Array.isArray(this._grid.items)) {
-      this.__withFilteredItemsArray((items) => (this._grid.selectedItems = items));
+    if (selectAll && this.__hasArrayDataProvider()) {
+      this.__withFilteredItemsArray((items) => {
+        this._grid.selectedItems = items;
+      });
     } else {
       this._grid.selectedItems = [];
     }
@@ -254,10 +256,15 @@ class GridSelectionColumn extends GridColumn {
     this.__previousActiveItem = activeItem;
   }
 
+  /** @private */
+  __hasArrayDataProvider() {
+    return Array.isArray(this._grid.items) && !!this._grid.dataProvider;
+  }
+
   /** @private */
   __onSelectedItemsChanged() {
     this._selectAllChangeLock = true;
-    if (Array.isArray(this._grid.items)) {
+    if (this.__hasArrayDataProvider()) {
       this.__withFilteredItemsArray((items) => {
         if (!this._grid.selectedItems.length) {
           this.selectAll = false;

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

@@ -3,11 +3,11 @@
  * 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';
+import type { Constructor } from '@open-wc/dedupe-mixin';
 
 export declare function SelectionMixin<TItem, T extends Constructor<HTMLElement>>(
   base: T,
-): T & Constructor<SelectionMixinClass<TItem>>;
+): Constructor<SelectionMixinClass<TItem>> & T;
 
 export declare class SelectionMixinClass<TItem> {
   /**

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

@@ -3,9 +3,9 @@
  * 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';
+import type { GridDefaultItem } from './vaadin-grid.js';
 import { GridColumn } from './vaadin-grid-column.js';
-import { GridSorterDirection } from './vaadin-grid-sorter.js';
+import type { GridSorterDirection } from './vaadin-grid-sorter.js';
 
 /**
  * Fired when the `direction` property changes.
@@ -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?: AddEventListenerOptions | boolean,
   ): void;
 
   removeEventListener<K extends keyof GridSortColumnEventMap>(
     type: K,
     listener: (this: GridSortColumn<TItem>, ev: GridSortColumnEventMap[K]) => void,
-    options?: boolean | EventListenerOptions,
+    options?: EventListenerOptions | boolean,
   ): void;
 }
 

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

@@ -3,14 +3,37 @@
  * 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';
+import type { Constructor } from '@open-wc/dedupe-mixin';
 
-export declare function SortMixin<T extends Constructor<HTMLElement>>(base: T): T & Constructor<SortMixinClass>;
+export declare function SortMixin<T extends Constructor<HTMLElement>>(base: T): Constructor<SortMixinClass> & T;
 
 export declare class SortMixinClass {
+  /**
+   * Sets the default multi-sort priority to use for all grid instances.
+   * This method should be called before creating any grid instances.
+   * Changing this setting does not affect the default for existing grids.
+   */
+  static setDefaultMultiSortPriority(priority: 'append' | 'prepend'): void;
+
   /**
    * When `true`, all `<vaadin-grid-sorter>` are applied for sorting.
    * @attr {boolean} multi-sort
    */
   multiSort: boolean;
+
+  /**
+   * Controls how columns are added to the sort order when using multi-sort.
+   * The sort order is visually indicated by numbers in grid sorters placed in column headers.
+   *
+   * By default, whenever an unsorted column is sorted, or the sort-direction of a column is
+   * changed, that column gets sort priority 1, thus affecting the priority for all the other
+   * sorted columns. This is identical to using `multi-sort-priority="prepend"`.
+   *
+   * Using this property allows to change this behavior so that sorting an unsorted column
+   * would add it to the "end" of the sort, and changing column's sort direction would retain
+   * it's previous priority. To set this, use `multi-sort-priority="append"`.
+   *
+   * @attr {string} multi-sort-priority
+   */
+  multiSortPriority: 'append' | 'prepend';
 }

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

@@ -4,6 +4,8 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
+let defaultMultiSortPriority = 'prepend';
+
 /**
  * @polymerMixin
  */
@@ -21,6 +23,25 @@ export const SortMixin = (superClass) =>
           value: false,
         },
 
+        /**
+         * Controls how columns are added to the sort order when using multi-sort.
+         * The sort order is visually indicated by numbers in grid sorters placed in column headers.
+         *
+         * By default, whenever an unsorted column is sorted, or the sort-direction of a column is
+         * changed, that column gets sort priority 1, thus affecting the priority for all the other
+         * sorted columns. This is identical to using `multi-sort-priority="prepend"`.
+         *
+         * Using this property allows to change this behavior so that sorting an unsorted column
+         * would add it to the "end" of the sort, and changing column's sort direction would retain
+         * it's previous priority. To set this, use `multi-sort-priority="append"`.
+         *
+         * @attr {string} multi-sort-priority
+         */
+        multiSortPriority: {
+          type: String,
+          value: () => defaultMultiSortPriority,
+        },
+
         /**
          * @type {!Array<!GridSorterDefinition>}
          * @protected
@@ -38,6 +59,17 @@ export const SortMixin = (superClass) =>
       };
     }
 
+    /**
+     * Sets the default multi-sort priority to use for all grid instances.
+     * This method should be called before creating any grid instances.
+     * Changing this setting does not affect the default for existing grids.
+     *
+     * @param {string} priority
+     */
+    static setDefaultMultiSortPriority(priority) {
+      defaultMultiSortPriority = ['append', 'prepend'].includes(priority) ? priority : 'prepend';
+    }
+
     /** @protected */
     ready() {
       super.ready();
@@ -48,6 +80,7 @@ export const SortMixin = (superClass) =>
     _onSorterChanged(e) {
       const sorter = e.target;
       e.stopPropagation();
+      sorter._grid = this;
       this.__updateSorter(sorter);
       this.__applySorters();
     }
@@ -67,7 +100,29 @@ export const SortMixin = (superClass) =>
 
     /** @private */
     __updateSortOrders() {
-      this._sorters.forEach((sorter, index) => (sorter._order = this._sorters.length > 1 ? index : null), this);
+      this._sorters.forEach((sorter, index) => {
+        sorter._order = this._sorters.length > 1 ? index : null;
+      });
+    }
+
+    /** @private */
+    __appendSorter(sorter) {
+      if (!sorter.direction) {
+        this._removeArrayItem(this._sorters, sorter);
+      } else if (!this._sorters.includes(sorter)) {
+        this._sorters.push(sorter);
+      }
+
+      this.__updateSortOrders();
+    }
+
+    /** @private */
+    __prependSorter(sorter) {
+      this._removeArrayItem(this._sorters, sorter);
+      if (sorter.direction) {
+        this._sorters.unshift(sorter);
+      }
+      this.__updateSortOrders();
     }
 
     /** @private */
@@ -79,11 +134,11 @@ export const SortMixin = (superClass) =>
       sorter._order = null;
 
       if (this.multiSort) {
-        this._removeArrayItem(this._sorters, sorter);
-        if (sorter.direction) {
-          this._sorters.unshift(sorter);
+        if (this.multiSortPriority === 'append') {
+          this.__appendSorter(sorter);
+        } else {
+          this.__prependSorter(sorter);
         }
-        this.__updateSortOrders();
       } else if (sorter.direction) {
         const otherSorters = this._sorters.filter((s) => s !== sorter);
         this._sorters = [sorter];

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?: AddEventListenerOptions | boolean,
   ): void;
 
   removeEventListener<K extends keyof GridSorterEventMap>(
     type: K,
     listener: (this: GridSorter, ev: GridSorterEventMap[K]) => void,
-    options?: boolean | EventListenerOptions,
+    options?: EventListenerOptions | boolean,
   ): void;
 }
 

package/src/vaadin-grid-sorter.js

@@ -7,9 +7,9 @@ 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';
 
-const $_documentContainer = document.createElement('template');
+const template = document.createElement('template');
 
-$_documentContainer.innerHTML = `
+template.innerHTML = `
   <style>
     @font-face {
       font-family: 'vaadin-grid-sorter-icons';
@@ -20,7 +20,7 @@ $_documentContainer.innerHTML = `
   </style>
 `;
 
-document.head.appendChild($_documentContainer.content);
+document.head.appendChild(template.content);
 
 /**
  * `<vaadin-grid-sorter>` is a helper element for the `<vaadin-grid>` that provides out-of-the-box UI controls,
@@ -176,6 +176,10 @@ class GridSorter extends ThemableMixin(DirMixin(PolymerElement)) {
   disconnectedCallback() {
     super.disconnectedCallback();
     this._isConnected = false;
+
+    if (!this.parentNode && this._grid) {
+      this._grid.__removeSorters([this]);
+    }
   }
 
   /** @private */

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

@@ -3,15 +3,15 @@
  * 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';
-import { GridItemModel } from './vaadin-grid.js';
-import { GridColumn } from './vaadin-grid-column.js';
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { GridItemModel } from './vaadin-grid.js';
+import type { 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,
-): T & Constructor<StylingMixinClass<TItem>>;
+): Constructor<StylingMixinClass<TItem>> & T;
 
 export declare class StylingMixinClass<TItem> {
   /**

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

@@ -3,7 +3,7 @@
  * 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';
+import type { GridDefaultItem } from './vaadin-grid.js';
 import { GridColumn } from './vaadin-grid-column.js';
 
 /**

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?: AddEventListenerOptions | boolean,
   ): void;
 
   removeEventListener<K extends keyof GridTreeToggleEventMap>(
     type: K,
     listener: (this: GridTreeToggle, ev: GridTreeToggleEventMap[K]) => void,
-    options?: boolean | EventListenerOptions,
+    options?: EventListenerOptions | boolean,
   ): void;
 }
 

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

@@ -8,9 +8,9 @@ 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';
 
-const $_documentContainer = document.createElement('template');
+const template = document.createElement('template');
 
-$_documentContainer.innerHTML = `
+template.innerHTML = `
   <style>
     @font-face {
       font-family: "vaadin-grid-tree-icons";
@@ -21,7 +21,7 @@ $_documentContainer.innerHTML = `
   </style>
 `;
 
-document.head.appendChild($_documentContainer.content);
+document.head.appendChild(template.content);
 
 /**
  * `<vaadin-grid-tree-toggle>` is a helper element for the `<vaadin-grid>`

package/src/vaadin-grid.d.ts

@@ -3,15 +3,17 @@
  * Copyright (c) 2016 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { DisabledMixinClass } from '@vaadin/component-base/src/disabled-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 type { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
+import type { ElementMixinClass } from '@vaadin/component-base/src/element-mixin.js';
+import type { ThemableMixinClass } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import type { ThemePropertyMixinClass } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
+import type { ActiveItemMixinClass } from './vaadin-grid-active-item-mixin.js';
+import type { ArrayDataProviderMixinClass } from './vaadin-grid-array-data-provider-mixin.js';
+import type { GridColumn } from './vaadin-grid-column.js';
+import { GridBodyRenderer, GridHeaderFooterRenderer } from './vaadin-grid-column.js';
+import type { ColumnReorderingMixinClass } from './vaadin-grid-column-reordering-mixin.js';
+import type { DataProviderMixinClass } from './vaadin-grid-data-provider-mixin.js';
 import {
-  DataProviderMixinClass,
   GridDataProvider,
   GridDataProviderCallback,
   GridDataProviderParams,
@@ -19,18 +21,17 @@ import {
   GridSorterDefinition,
   GridSorterDirection,
 } from './vaadin-grid-data-provider-mixin.js';
-import {
-  DragAndDropMixinClass,
-  GridDragAndDropFilter,
-  GridDropLocation,
-  GridDropMode,
-} from './vaadin-grid-drag-and-drop-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';
+import type { DragAndDropMixinClass } from './vaadin-grid-drag-and-drop-mixin.js';
+import { GridDragAndDropFilter, GridDropLocation, GridDropMode } from './vaadin-grid-drag-and-drop-mixin.js';
+import type { EventContextMixinClass } from './vaadin-grid-event-context-mixin.js';
+import { GridEventContext } from './vaadin-grid-event-context-mixin.js';
+import type { RowDetailsMixinClass } from './vaadin-grid-row-details-mixin.js';
+import { GridRowDetailsRenderer } from './vaadin-grid-row-details-mixin.js';
+import type { ScrollMixinClass } from './vaadin-grid-scroll-mixin.js';
+import type { SelectionMixinClass } from './vaadin-grid-selection-mixin.js';
+import type { SortMixinClass } from './vaadin-grid-sort-mixin.js';
+import type { StylingMixinClass } from './vaadin-grid-styling-mixin.js';
+import { GridCellClassNameGenerator } from './vaadin-grid-styling-mixin.js';
 
 export {
   GridBodyRenderer,
@@ -305,7 +306,7 @@ export interface GridEventMap<TItem> extends HTMLElementEventMap, GridCustomEven
  * `overflow` | Set when rows are overflowing the grid viewport. Possible values: `top`, `bottom`, `start`, `end` | :host
  * `reordering` | Set when the grid's columns are being reordered | :host
  * `dragover` | Set when the grid (not a specific row) is dragged over | :host
- * `dragging-rows` : Set when grid rows are dragged  | :host
+ * `dragging-rows` | Set when grid rows are dragged  | :host
  * `reorder-status` | Reflects the status of a cell while columns are being reordered | cell
  * `frozen` | Frozen cell | cell
  * `last-frozen` | Last frozen cell | cell
@@ -323,7 +324,7 @@ export interface GridEventMap<TItem> extends HTMLElementEventMap, GridCustomEven
  * `drag-disabled` | Set to a row that isn't available for dragging | row
  * `drop-disabled` | Set to a row that can't be dropped on top of | row
  *
- * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
  *
  * @fires {CustomEvent} active-item-changed - Fired when the `activeItem` property changes.
  * @fires {CustomEvent} cell-activate - Fired when the cell is activated with click or keyboard.
@@ -379,13 +380,13 @@ declare class Grid<TItem = GridDefaultItem> extends HTMLElement {
   addEventListener<K extends keyof GridEventMap<TItem>>(
     type: K,
     listener: (this: Grid<TItem>, ev: GridEventMap<TItem>[K]) => void,
-    options?: boolean | AddEventListenerOptions,
+    options?: AddEventListenerOptions | boolean,
   ): void;
 
   removeEventListener<K extends keyof GridEventMap<TItem>>(
     type: K,
     listener: (this: Grid<TItem>, ev: GridEventMap<TItem>[K]) => void,
-    options?: boolean | EventListenerOptions,
+    options?: EventListenerOptions | boolean,
   ): void;
 }
 
@@ -393,6 +394,7 @@ interface Grid<TItem = GridDefaultItem>
   extends DisabledMixinClass,
     ElementMixinClass,
     ThemableMixinClass,
+    ThemePropertyMixinClass,
     ActiveItemMixinClass<TItem>,
     ArrayDataProviderMixinClass<TItem>,
     DataProviderMixinClass<TItem>,

package/src/vaadin-grid.js

@@ -191,7 +191,7 @@ import { StylingMixin } from './vaadin-grid-styling-mixin.js';
  * `overflow` | Set when rows are overflowing the grid viewport. Possible values: `top`, `bottom`, `start`, `end` | :host
  * `reordering` | Set when the grid's columns are being reordered | :host
  * `dragover` | Set when the grid (not a specific row) is dragged over | :host
- * `dragging-rows` : Set when grid rows are dragged  | :host
+ * `dragging-rows` | Set when grid rows are dragged  | :host
  * `reorder-status` | Reflects the status of a cell while columns are being reordered | cell
  * `frozen` | Frozen cell | cell
  * `last-frozen` | Last frozen cell | cell
@@ -209,7 +209,7 @@ import { StylingMixin } from './vaadin-grid-styling-mixin.js';
  * `drag-disabled` | Set to a row that isn't available for dragging | row
  * `drop-disabled` | Set to a row that can't be dropped on top of | row
  *
- * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
  *
  * @fires {CustomEvent} active-item-changed - Fired when the `activeItem` property changes.
  * @fires {CustomEvent} cell-activate - Fired when the cell is activated with click or keyboard.
@@ -594,6 +594,11 @@ class Grid extends ElementMixin(
     // Flush to make sure DOM is up-to-date when measuring the column widths
     this.__virtualizer.flush();
 
+    // Flush to account for any changes to the visibility of the columns
+    if (this._debouncerHiddenChanged) {
+      this._debouncerHiddenChanged.flush();
+    }
+
     cols.forEach((col) => {
       col.width = `${this.__getDistributedWidth(col)}px`;
     });
@@ -708,7 +713,9 @@ class Grid extends ElementMixin(
 
     const contentsFragment = document.createDocumentFragment();
 
-    Array.from(row.children).forEach((cell) => (cell._vacant = true));
+    Array.from(row.children).forEach((cell) => {
+      cell._vacant = true;
+    });
     row.innerHTML = '';
 
     columns
@@ -993,7 +1000,9 @@ class Grid extends ElementMixin(
       // Header and footer renderers
       this._columnTree.forEach((level) => {
         level.forEach((column) => {
-          column._renderHeaderAndFooter();
+          if (column._renderHeaderAndFooter) {
+            column._renderHeaderAndFooter();
+          }
         });
       });
 

package/theme/lumo/vaadin-grid-styles.js

@@ -395,13 +395,3 @@ registerStyles(
   `,
   { moduleId: 'lumo-grid' },
 );
-
-registerStyles(
-  'vaadin-checkbox',
-  css`
-    :host(.vaadin-grid-select-all-checkbox) {
-      font-size: var(--lumo-font-size-m);
-    }
-  `,
-  { moduleId: 'vaadin-grid-select-all-checkbox-lumo' },
-);