@vaadin/grid 23.2.0-alpha3 → 23.2.0-alpha6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/grid",
-  "version": "23.2.0-alpha3",
+  "version": "23.2.0-alpha6",
   "publishConfig": {
     "access": "public"
   },
@@ -26,7 +26,9 @@
     "src",
     "theme",
     "vaadin-*.d.ts",
-    "vaadin-*.js"
+    "vaadin-*.js",
+    "web-types.json",
+    "web-types.lit.json"
   ],
   "keywords": [
     "vaadin",
@@ -43,20 +45,24 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/checkbox": "23.2.0-alpha3",
-    "@vaadin/component-base": "23.2.0-alpha3",
-    "@vaadin/lit-renderer": "23.2.0-alpha3",
-    "@vaadin/text-field": "23.2.0-alpha3",
-    "@vaadin/vaadin-lumo-styles": "23.2.0-alpha3",
-    "@vaadin/vaadin-material-styles": "23.2.0-alpha3",
-    "@vaadin/vaadin-themable-mixin": "23.2.0-alpha3"
+    "@vaadin/checkbox": "23.2.0-alpha6",
+    "@vaadin/component-base": "23.2.0-alpha6",
+    "@vaadin/lit-renderer": "23.2.0-alpha6",
+    "@vaadin/text-field": "23.2.0-alpha6",
+    "@vaadin/vaadin-lumo-styles": "23.2.0-alpha6",
+    "@vaadin/vaadin-material-styles": "23.2.0-alpha6",
+    "@vaadin/vaadin-themable-mixin": "23.2.0-alpha6"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/polymer-legacy-adapter": "23.2.0-alpha3",
+    "@vaadin/polymer-legacy-adapter": "23.2.0-alpha6",
     "@vaadin/testing-helpers": "^0.3.2",
     "lit": "^2.0.0",
     "sinon": "^13.0.2"
   },
-  "gitHead": "06e5875be93ca50da2846dafc65a8531010c0576"
+  "web-types": [
+    "web-types.json",
+    "web-types.lit.json"
+  ],
+  "gitHead": "61f1fb56953434e97d34a8819640064301dd3d8a"
 }

package/src/array-data-provider.js

@@ -22,12 +22,10 @@ function checkPaths(arrayToCheck, action, items) {
 
   let result = true;
 
-  for (const i in arrayToCheck) {
-    const path = arrayToCheck[i].path;
-
+  arrayToCheck.forEach(({ path }) => {
     // Skip simple paths
     if (!path || path.indexOf('.') === -1) {
-      continue;
+      return;
     }
 
     const parentProperty = path.replace(/\.[^.]*$/, ''); // A.b.c -> a.b
@@ -35,7 +33,7 @@ function checkPaths(arrayToCheck, action, items) {
       console.warn(`Path "${path}" used for ${action} does not exist in all of the items, ${action} is disabled.`);
       result = false;
     }
-  }
+  });
 
   return result;
 }

package/src/lit/column-renderer-directives.d.ts

@@ -27,7 +27,7 @@ declare abstract class AbstractGridColumnRendererDirective<R extends LitRenderer
   /**
    * A property to that the renderer callback will be assigned.
    */
-  abstract rendererProperty: 'renderer' | 'headerRenderer' | 'footerRenderer';
+  abstract rendererProperty: 'footerRenderer' | 'headerRenderer' | 'renderer';
 
   /**
    * Adds the renderer callback to the grid column.

package/src/vaadin-grid-active-item-mixin.d.ts

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

package/src/vaadin-grid-array-data-provider-mixin.d.ts

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

package/src/vaadin-grid-column-reordering-mixin.d.ts

@@ -7,7 +7,7 @@ import type { Constructor } from '@open-wc/dedupe-mixin';
 
 export declare function ColumnReorderingMixin<T extends Constructor<HTMLElement>>(
   base: T,
-): T & Constructor<ColumnReorderingMixinClass>;
+): Constructor<ColumnReorderingMixinClass> & T;
 
 export declare class ColumnReorderingMixinClass {
   /**

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

@@ -12,13 +12,13 @@ export type GridBodyRenderer<TItem> = (
   model: GridItemModel<TItem>,
 ) => void;
 
-export type GridColumnTextAlign = 'start' | 'center' | 'end' | null;
+export type GridColumnTextAlign = 'center' | 'end' | 'start' | null;
 
 export type GridHeaderFooterRenderer<TItem> = (root: HTMLElement, column: GridColumn<TItem>) => void;
 
 export declare function ColumnBaseMixin<TItem, T extends Constructor<HTMLElement>>(
   base: T,
-): T & Constructor<ColumnBaseMixinClass<TItem>>;
+): Constructor<ColumnBaseMixinClass<TItem>> & T;
 
 export declare class ColumnBaseMixinClass<TItem> {
   /**

package/src/vaadin-grid-data-provider-mixin.d.ts

@@ -58,7 +58,7 @@ export declare class ItemCache<TItem> {
 
 export declare function DataProviderMixin<TItem, T extends Constructor<HTMLElement>>(
   base: T,
-): T & Constructor<DataProviderMixinClass<TItem>>;
+): Constructor<DataProviderMixinClass<TItem>> & T;
 
 export declare class DataProviderMixinClass<TItem> {
   /**

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

@@ -8,13 +8,13 @@ import type { GridItemModel } from './vaadin-grid.js';
 
 export type GridDragAndDropFilter<TItem> = (model: GridItemModel<TItem>) => boolean;
 
-export type GridDropLocation = 'above' | 'on-top' | 'below' | 'empty';
+export type GridDropLocation = 'above' | 'below' | 'empty' | 'on-top';
 
-export type GridDropMode = 'between' | 'on-top' | 'on-top-or-between' | 'on-grid';
+export type GridDropMode = 'between' | 'on-grid' | 'on-top-or-between' | 'on-top';
 
 export declare function DragAndDropMixin<TItem, T extends Constructor<HTMLElement>>(
   base: T,
-): T & Constructor<DragAndDropMixinClass<TItem>>;
+): Constructor<DragAndDropMixinClass<TItem>> & T;
 
 export declare class DragAndDropMixinClass<TItem> {
   /**

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

@@ -7,7 +7,7 @@ import type { Constructor } from '@open-wc/dedupe-mixin';
 import type { GridColumn } from './vaadin-grid-column.js';
 
 export interface GridEventContext<TItem> {
-  section?: 'body' | 'header' | 'footer' | 'details';
+  section?: 'body' | 'details' | 'footer' | 'header';
   item?: TItem;
   column?: GridColumn<TItem>;
   index?: number;
@@ -19,7 +19,7 @@ export interface GridEventContext<TItem> {
 
 export declare function EventContextMixin<TItem, T extends Constructor<HTMLElement>>(
   base: T,
-): T & Constructor<EventContextMixinClass<TItem>>;
+): Constructor<EventContextMixinClass<TItem>> & T;
 
 export declare class EventContextMixinClass<TItem> {
   /**

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

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

@@ -14,7 +14,7 @@ export type GridRowDetailsRenderer<TItem> = (
 
 export declare function RowDetailsMixin<TItem, T extends Constructor<HTMLElement>>(
   base: T,
-): T & Constructor<RowDetailsMixinClass<TItem>>;
+): Constructor<RowDetailsMixinClass<TItem>> & T;
 
 export declare class RowDetailsMixinClass<TItem> {
   /**

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

@@ -5,7 +5,7 @@
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';
 
-export declare function ScrollMixin<T extends Constructor<HTMLElement>>(base: T): T & Constructor<ScrollMixinClass>;
+export declare function ScrollMixin<T extends Constructor<HTMLElement>>(base: T): Constructor<ScrollMixinClass> & T;
 
 export declare class ScrollMixinClass {
   /**

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?: 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,7 +184,7 @@ class GridSelectionColumn extends GridColumn {
       return;
     }
 
-    if (selectAll && Array.isArray(this._grid.items)) {
+    if (selectAll && this.__hasArrayDataProvider()) {
       this.__withFilteredItemsArray((items) => {
         this._grid.selectedItems = items;
       });
@@ -256,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

@@ -7,7 +7,7 @@ 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

@@ -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

@@ -5,7 +5,7 @@
  */
 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 {
   /**
@@ -28,5 +28,5 @@ export declare class SortMixinClass {
    *
    * @attr {string} multi-sort-priority
    */
-  multiSortPriority: 'prepend' | 'append';
+  multiSortPriority: 'append' | 'prepend';
 }

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

@@ -4,6 +4,12 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
+let multiSortAppend = false;
+
+export const setDefaultMultiSortPriorityAppend = (priority) => {
+  multiSortAppend = priority;
+};
+
 /**
  * @polymerMixin
  */
@@ -37,7 +43,7 @@ export const SortMixin = (superClass) =>
          */
         multiSortPriority: {
           type: String,
-          value: 'prepend',
+          value: () => (multiSortAppend ? 'append' : 'prepend'),
         },
 
         /**

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,

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

@@ -11,7 +11,7 @@ export type GridCellClassNameGenerator<TItem> = (column: GridColumn<TItem>, mode
 
 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-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

@@ -6,6 +6,7 @@
 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';
@@ -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
@@ -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

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' },
-);