@vaadin/grid 24.2.0-alpha3 → 24.2.0-alpha5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/grid",
-  "version": "24.2.0-alpha3",
+  "version": "24.2.0-alpha5",
   "publishConfig": {
     "access": "public"
   },
@@ -46,18 +46,18 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.2.0-alpha3",
-    "@vaadin/checkbox": "24.2.0-alpha3",
-    "@vaadin/component-base": "24.2.0-alpha3",
-    "@vaadin/lit-renderer": "24.2.0-alpha3",
-    "@vaadin/text-field": "24.2.0-alpha3",
-    "@vaadin/vaadin-lumo-styles": "24.2.0-alpha3",
-    "@vaadin/vaadin-material-styles": "24.2.0-alpha3",
-    "@vaadin/vaadin-themable-mixin": "24.2.0-alpha3"
+    "@vaadin/a11y-base": "24.2.0-alpha5",
+    "@vaadin/checkbox": "24.2.0-alpha5",
+    "@vaadin/component-base": "24.2.0-alpha5",
+    "@vaadin/lit-renderer": "24.2.0-alpha5",
+    "@vaadin/text-field": "24.2.0-alpha5",
+    "@vaadin/vaadin-lumo-styles": "24.2.0-alpha5",
+    "@vaadin/vaadin-material-styles": "24.2.0-alpha5",
+    "@vaadin/vaadin-themable-mixin": "24.2.0-alpha5"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.4.2",
+    "@vaadin/testing-helpers": "^0.4.3",
     "lit": "^2.0.0",
     "sinon": "^13.0.2"
   },
@@ -65,5 +65,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "e5d1e1ed2d01b56d5922e18a3fcb7cd306351954"
+  "gitHead": "73db22a5e8993e3ce48d1e6540d30eff9cb5c257"
 }

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

@@ -4,9 +4,8 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 /* eslint-disable max-classes-per-file */
-import type { TemplateResult } from 'lit';
 import type { DirectiveResult } from 'lit/directive';
-import type { LitRenderer } from '@vaadin/lit-renderer';
+import type { LitRenderer, LitRendererResult } from '@vaadin/lit-renderer';
 import { LitRendererDirective } from '@vaadin/lit-renderer';
 import type { GridItemModel } from '../vaadin-grid.js';
 import type { GridColumn } from '../vaadin-grid-column.js';
@@ -15,10 +14,10 @@ export type GridColumnBodyLitRenderer<TItem> = (
   item: TItem,
   model: GridItemModel<TItem>,
   column: GridColumn,
-) => TemplateResult;
+) => LitRendererResult;
 
-export type GridColumnHeaderLitRenderer = (column: GridColumn) => TemplateResult;
-export type GridColumnFooterLitRenderer = (column: GridColumn) => TemplateResult;
+export type GridColumnHeaderLitRenderer = (column: GridColumn) => LitRendererResult;
+export type GridColumnFooterLitRenderer = (column: GridColumn) => LitRendererResult;
 
 declare abstract class AbstractGridColumnRendererDirective<R extends LitRenderer> extends LitRendererDirective<
   GridColumn,

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

@@ -3,12 +3,16 @@
  * Copyright (c) 2017 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import type { TemplateResult } from 'lit';
 import type { DirectiveResult } from 'lit/directive';
+import type { LitRendererResult } from '@vaadin/lit-renderer';
 import { LitRendererDirective } from '@vaadin/lit-renderer';
 import type { Grid, GridItemModel } from '../vaadin-grid.js';
 
-export type GridRowDetailsLitRenderer<TItem> = (item: TItem, model: GridItemModel<TItem>, grid: Grid) => TemplateResult;
+export type GridRowDetailsLitRenderer<TItem> = (
+  item: TItem,
+  model: GridItemModel<TItem>,
+  grid: Grid,
+) => LitRendererResult;
 
 export declare class GridRowDetailsRendererDirective<TItem> extends LitRendererDirective<
   Grid,

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

@@ -43,6 +43,17 @@ export declare class ColumnBaseMixinClass<TItem> {
    */
   frozenToEnd: boolean;
 
+  /**
+   * When true, the cells for this column will be rendered with the `role` attribute
+   * set as `rowheader`, instead of the `gridcell` role value used by default.
+   *
+   * When a column is set as row header, its cells will be announced by screen readers
+   * while navigating to help user identify the current row as uniquely as possible.
+   *
+   * @attr {boolean} row-header
+   */
+  rowHeader: boolean;
+
   /**
    * When set to true, the cells for this column are hidden.
    */

package/src/vaadin-grid-column.js

@@ -61,6 +61,21 @@ export const ColumnBaseMixin = (superClass) =>
           value: false,
         },
 
+        /**
+         * When true, the cells for this column will be rendered with the `role` attribute
+         * set as `rowheader`, instead of the `gridcell` role value used by default.
+         *
+         * When a column is set as row header, its cells will be announced by screen readers
+         * while navigating to help user identify the current row as uniquely as possible.
+         *
+         * @attr {boolean} row-header
+         * @type {boolean}
+         */
+        rowHeader: {
+          type: Boolean,
+          value: false,
+        },
+
         /**
          * When set to true, the cells for this column are hidden.
          */
@@ -222,6 +237,7 @@ export const ColumnBaseMixin = (superClass) =>
         '_resizableChanged(resizable, _headerCell)',
         '_reorderStatusChanged(_reorderStatus, _headerCell, _footerCell, _cells.*)',
         '_hiddenChanged(hidden, _headerCell, _footerCell, _cells.*)',
+        '_rowHeaderChanged(rowHeader, _cells.*)',
       ];
     }
 
@@ -407,6 +423,17 @@ export const ColumnBaseMixin = (superClass) =>
       }
     }
 
+    /** @private */
+    _rowHeaderChanged(rowHeader, cells) {
+      if (!cells.value) {
+        return;
+      }
+
+      cells.value.forEach((cell) => {
+        cell.setAttribute('role', rowHeader ? 'rowheader' : 'gridcell');
+      });
+    }
+
     /**
      * @param {string} path
      * @return {string}

package/src/vaadin-grid-data-provider-mixin.js

@@ -398,7 +398,10 @@ export const DataProviderMixin = (superClass) =>
           }
 
           // Populate the cache with new items
-          cache.items.splice(page * this.pageSize, items.length, ...items);
+          items.forEach((item, itemsIndex) => {
+            const itemIndex = page * this.pageSize + itemsIndex;
+            cache.items[itemIndex] = item;
+          });
 
           // With the new items added, update the cache size and the grid's effective size
           this._cache.updateSize();

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

@@ -0,0 +1,57 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { Constructor } from '@open-wc/dedupe-mixin';
+
+export declare function GridSelectionColumnBaseMixin<TItem, T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<GridSelectionColumnBaseMixinClass<TItem>> & T;
+
+/**
+ * A mixin that provides basic functionality for the
+ * `<vaadin-grid-selection-column>`. This includes properties, cell rendering,
+ * and overridable methods for handling changes to the selection state.
+ *
+ * **NOTE**: This mixin is re-used by the Flow component, and as such must not
+ * implement any selection state updates for the column element or the grid.
+ * Web component-specific selection state updates must be implemented in the
+ * `<vaadin-grid-selection-column>` itself, by overriding the protected methods
+ * provided by this mixin.
+ *
+ * @polymerMixin
+ */
+export declare class GridSelectionColumnBaseMixinClass<TItem> {
+  /**
+   * When true, all the items are selected.
+   * @attr {boolean} select-all
+   */
+  selectAll: boolean;
+
+  /**
+   * When true, the active gets automatically selected.
+   * @attr {boolean} auto-select
+   */
+  autoSelect: boolean;
+
+  /**
+   * Override to handle the user selecting all items.
+   */
+  protected _selectAll(): void;
+
+  /**
+   * Override to handle the user deselecting all items.
+   */
+  protected _deselectAll(): void;
+
+  /**
+   * Override to handle the user selecting an item.
+   */
+  protected _selectItem(item: TItem): void;
+
+  /**
+   * Override to handle the user deselecting an item.
+   */
+  protected _deselectItem(item: TItem): void;
+}

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

@@ -0,0 +1,191 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * A mixin that provides basic functionality for the
+ * `<vaadin-grid-selection-column>`. This includes properties, cell rendering,
+ * and overridable methods for handling changes to the selection state.
+ *
+ * **NOTE**: This mixin is re-used by the Flow component, and as such must not
+ * implement any selection state updates for the column element or the grid.
+ * Web component-specific selection state updates must be implemented in the
+ * `<vaadin-grid-selection-column>` itself, by overriding the protected methods
+ * provided by this mixin.
+ *
+ * @polymerMixin
+ */
+export const GridSelectionColumnBaseMixin = (superClass) =>
+  class GridSelectionColumnBaseMixin extends superClass {
+    static get properties() {
+      return {
+        /**
+         * Width of the cells for this column.
+         */
+        width: {
+          type: String,
+          value: '58px',
+        },
+
+        /**
+         * Flex grow ratio for the cell widths. When set to 0, cell width is fixed.
+         * @attr {number} flex-grow
+         * @type {number}
+         */
+        flexGrow: {
+          type: Number,
+          value: 0,
+        },
+
+        /**
+         * When true, all the items are selected.
+         * @attr {boolean} select-all
+         * @type {boolean}
+         */
+        selectAll: {
+          type: Boolean,
+          value: false,
+          notify: true,
+        },
+
+        /**
+         * When true, the active gets automatically selected.
+         * @attr {boolean} auto-select
+         * @type {boolean}
+         */
+        autoSelect: {
+          type: Boolean,
+          value: false,
+        },
+
+        /** @protected */
+        _indeterminate: Boolean,
+
+        /** @protected */
+        _selectAllHidden: Boolean,
+      };
+    }
+
+    static get observers() {
+      return [
+        '_onHeaderRendererOrBindingChanged(_headerRenderer, _headerCell, path, header, selectAll, _indeterminate, _selectAllHidden)',
+      ];
+    }
+
+    /**
+     * Renders the Select All checkbox to the header cell.
+     *
+     * @override
+     */
+    _defaultHeaderRenderer(root, _column) {
+      let checkbox = root.firstElementChild;
+      if (!checkbox) {
+        checkbox = document.createElement('vaadin-checkbox');
+        checkbox.setAttribute('aria-label', 'Select All');
+        checkbox.classList.add('vaadin-grid-select-all-checkbox');
+        root.appendChild(checkbox);
+        // Add listener after appending, so we can skip the initial change event
+        checkbox.addEventListener('checked-changed', this.__onSelectAllCheckedChanged.bind(this));
+      }
+
+      const checked = this.__isChecked(this.selectAll, this._indeterminate);
+      checkbox.__rendererChecked = checked;
+      checkbox.checked = checked;
+      checkbox.hidden = this._selectAllHidden;
+      checkbox.indeterminate = this._indeterminate;
+    }
+
+    /**
+     * Renders the Select Row checkbox to the body cell.
+     *
+     * @override
+     */
+    _defaultRenderer(root, _column, { item, selected }) {
+      let checkbox = root.firstElementChild;
+      if (!checkbox) {
+        checkbox = document.createElement('vaadin-checkbox');
+        checkbox.setAttribute('aria-label', 'Select Row');
+        root.appendChild(checkbox);
+        // Add listener after appending, so we can skip the initial change event
+        checkbox.addEventListener('checked-changed', this.__onSelectRowCheckedChanged.bind(this));
+      }
+
+      checkbox.__item = item;
+      checkbox.__rendererChecked = selected;
+      checkbox.checked = selected;
+    }
+
+    /**
+     * Updates the select all state when the Select All checkbox is switched.
+     * The listener handles only user-fired events.
+     *
+     * @private
+     */
+    __onSelectAllCheckedChanged(e) {
+      // Skip if the state is changed by the renderer.
+      if (e.target.checked === e.target.__rendererChecked) {
+        return;
+      }
+
+      if (this._indeterminate || e.target.checked) {
+        this._selectAll();
+      } else {
+        this._deselectAll();
+      }
+    }
+
+    /**
+     * Selects or deselects the row when the Select Row checkbox is switched.
+     * The listener handles only user-fired events.
+     *
+     * @private
+     */
+    __onSelectRowCheckedChanged(e) {
+      // Skip if the state is changed by the renderer.
+      if (e.target.checked === e.target.__rendererChecked) {
+        return;
+      }
+
+      if (e.target.checked) {
+        this._selectItem(e.target.__item);
+      } else {
+        this._deselectItem(e.target.__item);
+      }
+    }
+
+    /**
+     * Override to handle the user selecting all items.
+     * @protected
+     */
+    _selectAll() {}
+
+    /**
+     * Override to handle the user deselecting all items.
+     * @protected
+     */
+    _deselectAll() {}
+
+    /**
+     * Override to handle the user selecting an item.
+     * @param {Object} item the item to select
+     * @protected
+     */
+    _selectItem(item) {}
+
+    /**
+     * Override to handle the user deselecting an item.
+     * @param {Object} item the item to deselect
+     * @protected
+     */
+    _deselectItem(item) {}
+
+    /**
+     * IOS needs indeterminate + checked at the same time
+     * @private
+     */
+    __isChecked(selectAll, indeterminate) {
+      return indeterminate || selectAll;
+    }
+  };

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

@@ -5,6 +5,7 @@
  */
 import type { GridDefaultItem } from './vaadin-grid.js';
 import { GridColumn } from './vaadin-grid-column.js';
+import type { GridSelectionColumnBaseMixinClass } from './vaadin-grid-selection-column-base-mixin.js';
 
 /**
  * Fired when the `selectAll` property changes.
@@ -42,18 +43,6 @@ export interface GridSelectionColumnEventMap extends HTMLElementEventMap, GridSe
  * @fires {CustomEvent} select-all-changed - Fired when the `selectAll` property changes.
  */
 declare class GridSelectionColumn<TItem = GridDefaultItem> extends GridColumn<TItem> {
-  /**
-   * When true, all the items are selected.
-   * @attr {boolean} select-all
-   */
-  selectAll: boolean;
-
-  /**
-   * When true, the active gets automatically selected.
-   * @attr {boolean} auto-select
-   */
-  autoSelect: boolean;
-
   addEventListener<K extends keyof GridSelectionColumnEventMap>(
     type: K,
     listener: (this: GridSelectionColumn<TItem>, ev: GridSelectionColumnEventMap[K]) => void,
@@ -67,6 +56,8 @@ declare class GridSelectionColumn<TItem = GridDefaultItem> extends GridColumn<TI
   ): void;
 }
 
+interface GridSelectionColumn<TItem = GridDefaultItem> extends GridSelectionColumnBaseMixinClass<TItem> {}
+
 declare global {
   interface HTMLElementTagNameMap {
     'vaadin-grid-selection-column': GridSelectionColumn<GridDefaultItem>;

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

@@ -5,6 +5,7 @@
  */
 import '@vaadin/checkbox/src/vaadin-checkbox.js';
 import { GridColumn } from './vaadin-grid-column.js';
+import { GridSelectionColumnBaseMixin } from './vaadin-grid-selection-column-base-mixin.js';
 
 /**
  * `<vaadin-grid-selection-column>` is a helper element for the `<vaadin-grid>`
@@ -28,74 +29,27 @@ import { GridColumn } from './vaadin-grid-column.js';
  *
  * __The default content can also be overridden__
  *
+ * @mixes GridSelectionColumnBaseMixin
  * @fires {CustomEvent} select-all-changed - Fired when the `selectAll` property changes.
  */
-class GridSelectionColumn extends GridColumn {
+class GridSelectionColumn extends GridSelectionColumnBaseMixin(GridColumn) {
   static get is() {
     return 'vaadin-grid-selection-column';
   }
 
   static get properties() {
     return {
-      /**
-       * Width of the cells for this column.
-       */
-      width: {
-        type: String,
-        value: '58px',
-      },
-
-      /**
-       * Flex grow ratio for the cell widths. When set to 0, cell width is fixed.
-       * @attr {number} flex-grow
-       * @type {number}
-       */
-      flexGrow: {
-        type: Number,
-        value: 0,
-      },
-
-      /**
-       * When true, all the items are selected.
-       * @attr {boolean} select-all
-       * @type {boolean}
-       */
-      selectAll: {
-        type: Boolean,
-        value: false,
-        notify: true,
-      },
-
-      /**
-       * When true, the active gets automatically selected.
-       * @attr {boolean} auto-select
-       * @type {boolean}
-       */
-      autoSelect: {
-        type: Boolean,
-        value: false,
-      },
-
-      /** @private */
-      __indeterminate: Boolean,
-
       /**
        * The previous state of activeItem. When activeItem turns to `null`,
        * previousActiveItem will have an Object with just unselected activeItem
        * @private
        */
       __previousActiveItem: Object,
-
-      /** @private */
-      __selectAllHidden: Boolean,
     };
   }
 
   static get observers() {
-    return [
-      '__onSelectAllChanged(selectAll)',
-      '_onHeaderRendererOrBindingChanged(_headerRenderer, _headerCell, path, header, selectAll, __indeterminate, __selectAllHidden)',
-    ];
+    return ['__onSelectAllChanged(selectAll)'];
   }
 
   constructor() {
@@ -127,47 +81,6 @@ class GridSelectionColumn extends GridColumn {
     }
   }
 
-  /**
-   * Renders the Select All checkbox to the header cell.
-   *
-   * @override
-   */
-  _defaultHeaderRenderer(root, _column) {
-    let checkbox = root.firstElementChild;
-    if (!checkbox) {
-      checkbox = document.createElement('vaadin-checkbox');
-      checkbox.setAttribute('aria-label', 'Select All');
-      checkbox.classList.add('vaadin-grid-select-all-checkbox');
-      checkbox.addEventListener('checked-changed', this.__onSelectAllCheckedChanged.bind(this));
-      root.appendChild(checkbox);
-    }
-
-    const checked = this.__isChecked(this.selectAll, this.__indeterminate);
-    checkbox.__rendererChecked = checked;
-    checkbox.checked = checked;
-    checkbox.hidden = this.__selectAllHidden;
-    checkbox.indeterminate = this.__indeterminate;
-  }
-
-  /**
-   * Renders the Select Row checkbox to the body cell.
-   *
-   * @override
-   */
-  _defaultRenderer(root, _column, { item, selected }) {
-    let checkbox = root.firstElementChild;
-    if (!checkbox) {
-      checkbox = document.createElement('vaadin-checkbox');
-      checkbox.setAttribute('aria-label', 'Select Row');
-      checkbox.addEventListener('checked-changed', this.__onSelectRowCheckedChanged.bind(this));
-      root.appendChild(checkbox);
-    }
-
-    checkbox.__item = item;
-    checkbox.__rendererChecked = selected;
-    checkbox.checked = selected;
-  }
-
   /** @private */
   __onSelectAllChanged(selectAll) {
     if (selectAll === undefined || !this._grid) {
@@ -203,45 +116,49 @@ class GridSelectionColumn extends GridColumn {
   }
 
   /**
-   * Enables or disables the Select All mode once the Select All checkbox is switched.
-   * The listener handles only user-fired events.
+   * Override a method from `GridSelectionColumnBaseMixin` to handle the user
+   * selecting all items.
    *
-   * @private
+   * @protected
+   * @override
    */
-  __onSelectAllCheckedChanged(e) {
-    // Skip if the state is changed by the renderer.
-    if (e.target.checked === e.target.__rendererChecked) {
-      return;
-    }
-
-    this.selectAll = this.__indeterminate || e.target.checked;
+  _selectAll() {
+    this.selectAll = true;
   }
 
   /**
-   * Selects or deselects the row once the Select Row checkbox is switched.
-   * The listener handles only user-fired events.
+   * Override a method from `GridSelectionColumnBaseMixin` to handle the user
+   * deselecting all items.
    *
-   * @private
+   * @protected
+   * @override
    */
-  __onSelectRowCheckedChanged(e) {
-    // Skip if the state is changed by the renderer.
-    if (e.target.checked === e.target.__rendererChecked) {
-      return;
-    }
+  _deselectAll() {
+    this.selectAll = false;
+  }
 
-    if (e.target.checked) {
-      this._grid.selectItem(e.target.__item);
-    } else {
-      this._grid.deselectItem(e.target.__item);
-    }
+  /**
+   * Override a method from `GridSelectionColumnBaseMixin` to handle the user
+   * selecting an item.
+   *
+   * @param {Object} item the item to select
+   * @protected
+   * @override
+   */
+  _selectItem(item) {
+    this._grid.selectItem(item);
   }
 
   /**
-   * IOS needs indeterminate + checked at the same time
-   * @private
+   * Override a method from `GridSelectionColumnBaseMixin` to handle the user
+   * deselecting an item.
+   *
+   * @param {Object} item the item to deselect
+   * @protected
+   * @override
    */
-  __isChecked(selectAll, indeterminate) {
-    return indeterminate || selectAll;
+  _deselectItem(item) {
+    this._grid.deselectItem(item);
   }
 
   /** @private */
@@ -268,13 +185,13 @@ class GridSelectionColumn extends GridColumn {
       this.__withFilteredItemsArray((items) => {
         if (!this._grid.selectedItems.length) {
           this.selectAll = false;
-          this.__indeterminate = false;
+          this._indeterminate = false;
         } else if (this.__arrayContains(this._grid.selectedItems, items)) {
           this.selectAll = true;
-          this.__indeterminate = false;
+          this._indeterminate = false;
         } else {
           this.selectAll = false;
-          this.__indeterminate = true;
+          this._indeterminate = true;
         }
       });
     }
@@ -283,7 +200,7 @@ class GridSelectionColumn extends GridColumn {
 
   /** @private */
   __onDataProviderChanged() {
-    this.__selectAllHidden = !Array.isArray(this._grid.items);
+    this._selectAllHidden = !Array.isArray(this._grid.items);
   }
 
   /**