@vaadin/grid 24.2.0-alpha1 → 24.2.0-alpha11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/grid",
-  "version": "24.2.0-alpha1",
+  "version": "24.2.0-alpha11",
   "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-alpha1",
-    "@vaadin/checkbox": "24.2.0-alpha1",
-    "@vaadin/component-base": "24.2.0-alpha1",
-    "@vaadin/lit-renderer": "24.2.0-alpha1",
-    "@vaadin/text-field": "24.2.0-alpha1",
-    "@vaadin/vaadin-lumo-styles": "24.2.0-alpha1",
-    "@vaadin/vaadin-material-styles": "24.2.0-alpha1",
-    "@vaadin/vaadin-themable-mixin": "24.2.0-alpha1"
+    "@vaadin/a11y-base": "24.2.0-alpha11",
+    "@vaadin/checkbox": "24.2.0-alpha11",
+    "@vaadin/component-base": "24.2.0-alpha11",
+    "@vaadin/lit-renderer": "24.2.0-alpha11",
+    "@vaadin/text-field": "24.2.0-alpha11",
+    "@vaadin/vaadin-lumo-styles": "24.2.0-alpha11",
+    "@vaadin/vaadin-material-styles": "24.2.0-alpha11",
+    "@vaadin/vaadin-themable-mixin": "24.2.0-alpha11"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.4.2",
+    "@vaadin/testing-helpers": "^0.5.0",
     "lit": "^2.0.0",
     "sinon": "^13.0.2"
   },
@@ -65,5 +65,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "0dbb118320203ab6c0c07450a3e718815367589f"
+  "gitHead": "a958207d5f6a09ca0e2dcf9f62194b3f92c8766a"
 }

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

@@ -7,6 +7,7 @@ import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { animationFrame } from '@vaadin/component-base/src/async.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
+import { get } from '@vaadin/component-base/src/path-utils.js';
 import { processTemplates } from '@vaadin/component-base/src/templates.js';
 import { updateCellState } from './vaadin-grid-helpers.js';
 
@@ -61,6 +62,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 +238,7 @@ export const ColumnBaseMixin = (superClass) =>
         '_resizableChanged(resizable, _headerCell)',
         '_reorderStatusChanged(_reorderStatus, _headerCell, _footerCell, _cells.*)',
         '_hiddenChanged(hidden, _headerCell, _footerCell, _cells.*)',
+        '_rowHeaderChanged(rowHeader, _cells.*)',
       ];
     }
 
@@ -407,6 +424,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}
@@ -686,7 +714,7 @@ export const ColumnBaseMixin = (superClass) =>
         return;
       }
 
-      this.__setTextContent(root, this.get(this.path, item));
+      this.__setTextContent(root, get(this.path, item));
     }
 
     /**

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

@@ -5,6 +5,7 @@
  */
 import { timeOut } from '@vaadin/component-base/src/async.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
+import { get } from '@vaadin/component-base/src/path-utils.js';
 import { getBodyRowCells, updateCellsPart, updateState } from './vaadin-grid-helpers.js';
 
 /**
@@ -25,8 +26,8 @@ export const ItemCache = class ItemCache {
     this.parentItem = parentItem;
     /** @type {object} */
     this.itemCaches = {};
-    /** @type {object} */
-    this.items = {};
+    /** @type {object[]} */
+    this.items = [];
     /** @type {number} */
     this.effectiveSize = 0;
     /** @type {number} */
@@ -307,7 +308,7 @@ export const DataProviderMixin = (superClass) =>
      * @return {!GridItem | !unknown}
      */
     getItemId(item) {
-      return this.itemIdPath ? this.get(this.itemIdPath, item) : item;
+      return this.itemIdPath ? get(this.itemIdPath, item) : item;
     }
 
     /**

package/src/vaadin-grid-helpers.js

@@ -6,20 +6,14 @@
 import { addValueToAttribute, removeValueFromAttribute } from '@vaadin/component-base/src/dom-utils.js';
 
 /**
+ * Returns the cells of the given row, excluding the details cell.
+ *
  * @param {HTMLTableRowElement} row the table row
  * @return {HTMLTableCellElement[]} array of cells
  */
 export function getBodyRowCells(row) {
-  if (row.parentElement && row.parentElement.localName === 'tbody') {
-    // In case dealing with an attached body row, use the cells cached in the
-    // column to make sure also any physically detached cells
-    // (due to lazy column rendering) are included
-    const grid = row.getRootNode().host;
-    const columns = grid._getColumnsInOrder();
-    return columns.flatMap((column) => (column._cells && column._cells.find((cell) => cell.__parentRow === row)) || []);
-  }
-  // In any other case, query the cells directly from the row
-  return Array.from(row.querySelectorAll('[part~="cell"]:not([part~="details-cell"])'));
+  // If available, return the cached cells. Otherwise, query the cells directly from the row.
+  return row.__cells || Array.from(row.querySelectorAll('[part~="cell"]:not([part~="details-cell"])'));
 }
 
 /**
@@ -39,7 +33,10 @@ export function iterateChildren(container, callback) {
  * @param {Function} callback function to call on each cell
  */
 export function iterateRowCells(row, callback) {
-  [...getBodyRowCells(row), ...row.querySelectorAll('[part~="details-cell"]')].forEach(callback);
+  getBodyRowCells(row).forEach(callback);
+  if (row.__detailsCell) {
+    callback(row.__detailsCell);
+  }
 }
 
 /**

package/src/vaadin-grid-keyboard-navigation-mixin.js

@@ -5,6 +5,7 @@
  */
 import { isKeyboardActive } from '@vaadin/a11y-base/src/focus-utils.js';
 import { addValueToAttribute, removeValueFromAttribute } from '@vaadin/component-base/src/dom-utils.js';
+import { get } from '@vaadin/component-base/src/path-utils.js';
 
 /**
  * @polymerMixin
@@ -266,7 +267,7 @@ export const KeyboardNavigationMixin = (superClass) =>
     __isRowExpandable(row) {
       if (this.itemHasChildrenPath) {
         const item = row._item;
-        return item && this.get(this.itemHasChildrenPath, item) && !this._isExpanded(item);
+        return item && get(this.itemHasChildrenPath, item) && !this._isExpanded(item);
       }
     }
 

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

@@ -3,6 +3,7 @@
  * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { isElementHidden } from '@vaadin/a11y-base';
 import { animationFrame, microTask, timeOut } from '@vaadin/component-base/src/async.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 import { getNormalizedScrollLeft } from '@vaadin/component-base/src/dir-utils.js';
@@ -136,6 +137,19 @@ export const ScrollMixin = (superClass) =>
     _onResize() {
       this._updateOverflow();
       this.__updateHorizontalScrollPosition();
+
+      // For Firefox, manually restore last scroll position when grid becomes
+      // visible again. This solves an issue where switching visibility of two
+      // grids causes Firefox trying to synchronize the scroll positions between
+      // the two grid's table elements.
+      // See https://github.com/vaadin/web-components/issues/5796
+      if (this._firefox) {
+        const isVisible = !isElementHidden(this);
+        if (isVisible && this.__previousVisible === false) {
+          this._scrollTop = this.__memorizedScrollTop || 0;
+        }
+        this.__previousVisible = isVisible;
+      }
     }
 
     /**
@@ -208,6 +222,14 @@ export const ScrollMixin = (superClass) =>
           }
         },
       );
+
+      // Memorize last scroll position in Firefox
+      if (this._firefox) {
+        const isVisible = !isElementHidden(this);
+        if (isVisible && this.__previousVisible !== false) {
+          this.__memorizedScrollTop = this._scrollTop;
+        }
+      }
     }
 
     /** @private */

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

@@ -0,0 +1,63 @@
+/**
+ * @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;
+
+  /**
+   * When true, rows can be selected by dragging over the selection column.
+   * @attr {boolean} drag-select
+   */
+  dragSelect: 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;
+}