@vaadin/grid 23.1.0-alpha4 → 23.1.0-beta3

package/lit.d.ts

@@ -0,0 +1,2 @@
+export * from './src/lit/renderer-directives.js';
+export * from './src/lit/column-renderer-directives.js';

package/lit.js

@@ -0,0 +1,2 @@
+export * from './src/lit/renderer-directives.js';
+export * from './src/lit/column-renderer-directives.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/grid",
-  "version": "23.1.0-alpha4",
+  "version": "23.1.0-beta3",
   "publishConfig": {
     "access": "public"
   },
@@ -23,6 +23,8 @@
     "all-imports.js",
     "src",
     "theme",
+    "lit.js",
+    "lit.d.ts",
     "vaadin-*.d.ts",
     "vaadin-*.js"
   ],
@@ -41,19 +43,20 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/checkbox": "23.1.0-alpha4",
-    "@vaadin/component-base": "23.1.0-alpha4",
-    "@vaadin/text-field": "23.1.0-alpha4",
-    "@vaadin/vaadin-lumo-styles": "23.1.0-alpha4",
-    "@vaadin/vaadin-material-styles": "23.1.0-alpha4",
-    "@vaadin/vaadin-themable-mixin": "23.1.0-alpha4"
+    "@vaadin/checkbox": "23.1.0-beta3",
+    "@vaadin/component-base": "23.1.0-beta3",
+    "@vaadin/lit-renderer": "23.1.0-beta3",
+    "@vaadin/text-field": "23.1.0-beta3",
+    "@vaadin/vaadin-lumo-styles": "23.1.0-beta3",
+    "@vaadin/vaadin-material-styles": "23.1.0-beta3",
+    "@vaadin/vaadin-themable-mixin": "23.1.0-beta3"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/polymer-legacy-adapter": "23.1.0-alpha4",
+    "@vaadin/polymer-legacy-adapter": "23.1.0-beta3",
     "@vaadin/testing-helpers": "^0.3.2",
     "lit": "^2.0.0",
     "sinon": "^13.0.2"
   },
-  "gitHead": "aacdb7fe09811894751f0378ff7fb66071892c71"
+  "gitHead": "c787ceb8a312f88631c6d429ff320d5f89b1b838"
 }

package/src/array-data-provider.js

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

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

@@ -0,0 +1,152 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+/* eslint-disable max-classes-per-file */
+import { TemplateResult } from 'lit';
+import { DirectiveResult } from 'lit/directive';
+import { LitRenderer, LitRendererDirective } from '@vaadin/lit-renderer';
+import { GridItemModel } from '../vaadin-grid.js';
+import { GridColumn } from '../vaadin-grid-column.js';
+
+export type GridColumnBodyLitRenderer<TItem> = (
+  item: TItem,
+  model: GridItemModel<TItem>,
+  column: GridColumn,
+) => TemplateResult;
+
+export type GridColumnHeaderLitRenderer = (column: GridColumn) => TemplateResult;
+export type GridColumnFooterLitRenderer = (column: GridColumn) => TemplateResult;
+
+declare abstract class AbstractGridColumnRendererDirective<R extends LitRenderer> extends LitRendererDirective<
+  GridColumn,
+  R
+> {
+  /**
+   * A property to that the renderer callback will be assigned.
+   */
+  abstract rendererProperty: 'renderer' | 'headerRenderer' | 'footerRenderer';
+
+  /**
+   * Adds the renderer callback to the grid column.
+   */
+  addRenderer(): void;
+
+  /**
+   * Runs the renderer callback on the grid column.
+   */
+  runRenderer(): void;
+
+  /**
+   * Removes the renderer callback from the grid column.
+   */
+  removeRenderer(): void;
+}
+
+export declare class GridColumnBodyRendererDirective<TItem> extends AbstractGridColumnRendererDirective<
+  GridColumnBodyLitRenderer<TItem>
+> {
+  rendererProperty: 'renderer';
+}
+
+export declare class GridColumnHeaderRendererDirective extends AbstractGridColumnRendererDirective<GridColumnHeaderLitRenderer> {
+  rendererProperty: 'headerRenderer';
+}
+
+export declare class GridColumnFooterRendererDirective extends AbstractGridColumnRendererDirective<GridColumnFooterLitRenderer> {
+  rendererProperty: 'footerRenderer';
+}
+
+/**
+ * A Lit directive for rendering the content of the column's body cells.
+ *
+ * The directive accepts a renderer callback returning a Lit template and assigns it to the grid column
+ * via the `renderer` property. The renderer is called for each column's body cell when assigned and whenever
+ * a single dependency or an array of dependencies changes.
+ * It is not guaranteed that the renderer will be called immediately (synchronously) in both cases.
+ *
+ * Dependencies can be a single value or an array of values.
+ * Values are checked against previous values with strict equality (`===`),
+ * so the check won't detect nested property changes inside objects or arrays.
+ * When dependencies are provided as an array, each item is checked against the previous value
+ * at the same index with strict equality. Nested arrays are also checked only by strict
+ * equality.
+ *
+ * Example of usage:
+ * ```js
+ * `<vaadin-grid-column
+ *   ${columnBodyRenderer((item, model, column) => html`...`)}
+ * ></vaadin-grid-column>`
+ * ```
+ *
+ * @param renderer the renderer callback.
+ * @param dependencies a single dependency or an array of dependencies
+ *                     which trigger a re-render when changed.
+ */
+export declare function columnBodyRenderer<TItem>(
+  renderer: GridColumnBodyLitRenderer<TItem>,
+  dependencies?: unknown,
+): DirectiveResult<typeof GridColumnBodyRendererDirective>;
+
+/**
+ * A Lit directive for rendering the content of the column's header cell.
+ *
+ * The directive accepts a renderer callback returning a Lit template and assigns it to the grid column
+ * via the `headerRenderer` property. The renderer is called once when assigned and whenever
+ * a single dependency or an array of dependencies changes.
+ * It is not guaranteed that the renderer will be called immediately (synchronously) in both cases.
+ *
+ * Dependencies can be a single value or an array of values.
+ * Values are checked against previous values with strict equality (`===`),
+ * so the check won't detect nested property changes inside objects or arrays.
+ * When dependencies are provided as an array, each item is checked against the previous value
+ * at the same index with strict equality. Nested arrays are also checked only by strict
+ * equality.
+ *
+ * Example of usage:
+ * ```js
+ * `<vaadin-grid-column
+ *   ${columnHeaderRenderer((column) => html`...`)}
+ * ></vaadin-grid-column>`
+ * ```
+ *
+ * @param renderer the renderer callback.
+ * @param dependencies a single dependency or an array of dependencies
+ *                     which trigger a re-render when changed.
+ */
+export declare function columnHeaderRenderer(
+  renderer: GridColumnHeaderLitRenderer,
+  dependencies?: unknown,
+): DirectiveResult<typeof GridColumnHeaderRendererDirective>;
+
+/**
+ * A Lit directive for rendering the content of the column's footer cell.
+ *
+ * The directive accepts a renderer callback returning a Lit template and assigns it to the grid column
+ * via the `footerRenderer` property. The renderer is called once when assigned and whenever
+ * a single dependency or an array of dependencies changes.
+ * It is not guaranteed that the renderer will be called immediately (synchronously) in both cases.
+ *
+ * Dependencies can be a single value or an array of values.
+ * Values are checked against previous values with strict equality (`===`),
+ * so the check won't detect nested property changes inside objects or arrays.
+ * When dependencies are provided as an array, each item is checked against the previous value
+ * at the same index with strict equality. Nested arrays are also checked only by strict
+ * equality.
+ *
+ * Example of usage:
+ * ```js
+ * `<vaadin-grid-column
+ *   ${columnFooterRenderer((column) => html`...`)}
+ * ></vaadin-grid-column>`
+ * ```
+ *
+ * @param renderer the renderer callback.
+ * @param dependencies a single dependency or an array of dependencies
+ *                     which trigger a re-render when changed.
+ */
+export declare function columnFooterRenderer(
+  renderer: GridColumnFooterLitRenderer,
+  dependencies?: unknown,
+): DirectiveResult<typeof GridColumnFooterRendererDirective>;

package/src/lit/column-renderer-directives.js

@@ -0,0 +1,149 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+/* eslint-disable max-classes-per-file */
+import { directive } from 'lit/directive.js';
+import { microTask } from '@vaadin/component-base/src/async.js';
+import { Debouncer } from '@vaadin/component-base/src/debounce.js';
+import { LitRendererDirective } from '@vaadin/lit-renderer';
+import { CONTENT_UPDATE_DEBOUNCER } from './renderer-directives.js';
+
+class AbstractGridColumnRendererDirective extends LitRendererDirective {
+  /**
+   * A property to that the renderer callback will be assigned.
+   *
+   * @abstract
+   */
+  rendererProperty;
+
+  /**
+   * Adds the renderer callback to the grid column.
+   */
+  addRenderer() {
+    this.element[this.rendererProperty] = (root, column) => {
+      this.renderRenderer(root, column);
+    };
+  }
+
+  /**
+   * Runs the renderer callback on the grid column.
+   */
+  runRenderer() {
+    const grid = this.element._grid;
+
+    grid[CONTENT_UPDATE_DEBOUNCER] = Debouncer.debounce(grid[CONTENT_UPDATE_DEBOUNCER], microTask, () => {
+      grid.requestContentUpdate();
+    });
+  }
+
+  /**
+   * Removes the renderer callback from the grid column.
+   */
+  removeRenderer() {
+    this.element[this.rendererProperty] = null;
+  }
+}
+
+export class GridColumnBodyRendererDirective extends AbstractGridColumnRendererDirective {
+  rendererProperty = 'renderer';
+
+  addRenderer() {
+    this.element[this.rendererProperty] = (root, column, model) => {
+      this.renderRenderer(root, model.item, model, column);
+    };
+  }
+}
+
+export class GridColumnHeaderRendererDirective extends AbstractGridColumnRendererDirective {
+  rendererProperty = 'headerRenderer';
+}
+
+export class GridColumnFooterRendererDirective extends AbstractGridColumnRendererDirective {
+  rendererProperty = 'footerRenderer';
+}
+
+/**
+ * A Lit directive for rendering the content of the column's body cells.
+ *
+ * The directive accepts a renderer callback returning a Lit template and assigns it to the grid column
+ * via the `renderer` property. The renderer is called for each column's body cell when assigned and whenever
+ * a single dependency or an array of dependencies changes.
+ * It is not guaranteed that the renderer will be called immediately (synchronously) in both cases.
+ *
+ * Dependencies can be a single value or an array of values.
+ * Values are checked against previous values with strict equality (`===`),
+ * so the check won't detect nested property changes inside objects or arrays.
+ * When dependencies are provided as an array, each item is checked against the previous value
+ * at the same index with strict equality. Nested arrays are also checked only by strict
+ * equality.
+ *
+ * Example of usage:
+ * ```js
+ * `<vaadin-grid-column
+ *   ${columnBodyRenderer((item, model, column) => html`...`)}
+ * ></vaadin-grid-column>`
+ * ```
+ *
+ * @param renderer the renderer callback.
+ * @param dependencies a single dependency or an array of dependencies
+ *                     which trigger a re-render when changed.
+ */
+export const columnBodyRenderer = directive(GridColumnBodyRendererDirective);
+
+/**
+ * A Lit directive for rendering the content of the column's header cell.
+ *
+ * The directive accepts a renderer callback returning a Lit template and assigns it to the grid column
+ * via the `headerRenderer` property. The renderer is called once when assigned and whenever
+ * a single dependency or an array of dependencies changes.
+ * It is not guaranteed that the renderer will be called immediately (synchronously) in both cases.
+ *
+ * Dependencies can be a single value or an array of values.
+ * Values are checked against previous values with strict equality (`===`),
+ * so the check won't detect nested property changes inside objects or arrays.
+ * When dependencies are provided as an array, each item is checked against the previous value
+ * at the same index with strict equality. Nested arrays are also checked only by strict
+ * equality.
+ *
+ * Example of usage:
+ * ```js
+ * `<vaadin-grid-column
+ *   ${columnHeaderRenderer((column) => html`...`)}
+ * ></vaadin-grid-column>`
+ * ```
+ *
+ * @param renderer the renderer callback.
+ * @param dependencies a single dependency or an array of dependencies
+ *                     which trigger a re-render when changed.
+ */
+export const columnHeaderRenderer = directive(GridColumnHeaderRendererDirective);
+
+/**
+ * A Lit directive for rendering the content of the column's footer cell.
+ *
+ * The directive accepts a renderer callback returning a Lit template and assigns it to the grid column
+ * via the `footerRenderer` property. The renderer is called once when assigned and whenever
+ * a single dependency or an array of dependencies changes.
+ * It is not guaranteed that the renderer will be called immediately (synchronously) in both cases.
+ *
+ * Dependencies can be a single value or an array of values.
+ * Values are checked against previous values with strict equality (`===`),
+ * so the check won't detect nested property changes inside objects or arrays.
+ * When dependencies are provided as an array, each item is checked against the previous value
+ * at the same index with strict equality. Nested arrays are also checked only by strict
+ * equality.
+ *
+ * Example of usage:
+ * ```js
+ * `<vaadin-grid-column
+ *   ${columnFooterRenderer((column) => html`...`)}
+ * ></vaadin-grid-column>`
+ * ```
+ *
+ * @param renderer the renderer callback.
+ * @param dependencies a single dependency or an array of dependencies
+ *                     which trigger a re-render when changed.
+ */
+export const columnFooterRenderer = directive(GridColumnFooterRendererDirective);

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

@@ -0,0 +1,62 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { TemplateResult } from 'lit';
+import { DirectiveResult } from 'lit/directive';
+import { LitRendererDirective } from '@vaadin/lit-renderer';
+import { Grid, GridItemModel } from '../vaadin-grid.js';
+
+export type GridRowDetailsLitRenderer<TItem> = (item: TItem, model: GridItemModel<TItem>, grid: Grid) => TemplateResult;
+
+export declare class GridRowDetailsRendererDirective<TItem> extends LitRendererDirective<
+  Grid,
+  GridRowDetailsLitRenderer<TItem>
+> {
+  /**
+   * Adds the row details renderer callback to the grid.
+   */
+  addRenderer(): void;
+
+  /**
+   * Runs the row details renderer callback on the grid.
+   */
+  runRenderer(): void;
+
+  /**
+   * Removes the row details renderer callback from the grid.
+   */
+  removeRenderer(): void;
+}
+
+/**
+ * A Lit directive for rendering the content of the row details cell.
+ *
+ * The directive accepts a renderer callback returning a Lit template and assigns it to the grid
+ * via the `rowDetailsRenderer` property. The renderer is called for each grid item that is in `detailsOpened`
+ * when assigned and whenever a single dependency or an array of dependencies changes.
+ * It is not guaranteed that the renderer will be called immediately (synchronously) in both cases.
+ *
+ * Dependencies can be a single value or an array of values.
+ * Values are checked against previous values with strict equality (`===`),
+ * so the check won't detect nested property changes inside objects or arrays.
+ * When dependencies are provided as an array, each item is checked against the previous value
+ * at the same index with strict equality. Nested arrays are also checked only by strict
+ * equality.
+ *
+ * Example of usage:
+ * ```js
+ * `<vaadin-grid
+ *   ${gridRowDetailsRenderer((item, model, grid) => html`...`)}
+ * ></vaadin-grid>`
+ * ```
+ *
+ * @param renderer the renderer callback.
+ * @param dependencies a single dependency or an array of dependencies
+ *                     which trigger a re-render when changed.
+ */
+export declare function gridRowDetailsRenderer<TItem>(
+  renderer: GridRowDetailsLitRenderer<TItem>,
+  dependencies?: unknown,
+): DirectiveResult<typeof GridRowDetailsRendererDirective>;

package/src/lit/renderer-directives.js

@@ -0,0 +1,70 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { directive } from 'lit/directive.js';
+import { microTask } from '@vaadin/component-base/src/async.js';
+import { Debouncer } from '@vaadin/component-base/src/debounce.js';
+import { LitRendererDirective } from '@vaadin/lit-renderer';
+
+export const CONTENT_UPDATE_DEBOUNCER = Symbol('contentUpdateDebouncer');
+
+export class GridRowDetailsRendererDirective extends LitRendererDirective {
+  /**
+   * Adds the row details renderer callback to the grid.
+   */
+  addRenderer() {
+    this.element.rowDetailsRenderer = (root, grid, model) => {
+      this.renderRenderer(root, model.item, model, grid);
+    };
+  }
+
+  /**
+   * Runs the row details renderer callback on the grid.
+   */
+  runRenderer() {
+    this.element[CONTENT_UPDATE_DEBOUNCER] = Debouncer.debounce(
+      this.element[CONTENT_UPDATE_DEBOUNCER],
+      microTask,
+      () => {
+        this.element.requestContentUpdate();
+      },
+    );
+  }
+
+  /**
+   * Removes the row details renderer callback from the grid.
+   */
+  removeRenderer() {
+    this.element.rowDetailsRenderer = null;
+  }
+}
+
+/**
+ * A Lit directive for rendering the content of the row details cell.
+ *
+ * The directive accepts a renderer callback returning a Lit template and assigns it to the grid
+ * via the `rowDetailsRenderer` property. The renderer is called for each grid item that is in `detailsOpened`
+ * when assigned and whenever a single dependency or an array of dependencies changes.
+ * It is not guaranteed that the renderer will be called immediately (synchronously) in both cases.
+ *
+ * Dependencies can be a single value or an array of values.
+ * Values are checked against previous values with strict equality (`===`),
+ * so the check won't detect nested property changes inside objects or arrays.
+ * When dependencies are provided as an array, each item is checked against the previous value
+ * at the same index with strict equality. Nested arrays are also checked only by strict
+ * equality.
+ *
+ * Example of usage:
+ * ```js
+ * `<vaadin-grid
+ *   ${gridRowDetailsRenderer((item, model, grid) => html`...`)}
+ * ></vaadin-grid>`
+ * ```
+ *
+ * @param renderer the renderer callback.
+ * @param dependencies a single dependency or an array of dependencies
+ *                     which trigger a re-render when changed.
+ */
+export const gridRowDetailsRenderer = directive(GridRowDetailsRendererDirective);

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

@@ -50,7 +50,7 @@ class GridColumnGroup extends ColumnBaseMixin(PolymerElement) {
     return {
       /** @private */
       _childColumns: {
-        value: function () {
+        value() {
           return this._getChildColumns(this);
         },
       },
@@ -85,12 +85,9 @@ class GridColumnGroup extends ColumnBaseMixin(PolymerElement) {
 
   static get observers() {
     return [
-      '_updateVisibleChildColumns(_childColumns)',
-      '_childColumnsChanged(_childColumns)',
       '_groupFrozenChanged(frozen, _rootColumns)',
       '_groupFrozenToEndChanged(frozenToEnd, _rootColumns)',
-      '_groupHiddenChanged(hidden, _rootColumns)',
-      '_visibleChildColumnsChanged(_visibleChildColumns)',
+      '_groupHiddenChanged(hidden)',
       '_colSpanChanged(_colSpan, _headerCell, _footerCell)',
       '_groupOrderChanged(_order, _rootColumns)',
       '_groupReorderStatusChanged(_reorderStatus, _rootColumns)',
@@ -120,9 +117,12 @@ class GridColumnGroup extends ColumnBaseMixin(PolymerElement) {
    */
   _columnPropChanged(path, value) {
     if (path === 'hidden') {
-      this._preventHiddenCascade = true;
+      // Prevent synchronization of the hidden state to child columns.
+      // If the group is currently auto-hidden, and one column is made visible,
+      // we don't want the other columns to become visible as well.
+      this._preventHiddenSynchronization = true;
       this._updateVisibleChildColumns(this._childColumns);
-      this._preventHiddenCascade = false;
+      this._preventHiddenSynchronization = false;
     }
 
     if (/flexGrow|width|hidden|_childColumns/.test(path)) {
@@ -205,14 +205,8 @@ class GridColumnGroup extends ColumnBaseMixin(PolymerElement) {
   /** @private */
   _updateVisibleChildColumns(childColumns) {
     this._visibleChildColumns = Array.prototype.filter.call(childColumns, (col) => !col.hidden);
-  }
-
-  /** @private */
-  _childColumnsChanged(childColumns) {
-    if (!this._autoHidden && this.hidden) {
-      Array.prototype.forEach.call(childColumns, (column) => (column.hidden = true));
-      this._updateVisibleChildColumns(childColumns);
-    }
+    this._colSpan = this._visibleChildColumns.length;
+    this._updateAutoHidden();
   }
 
   /** @protected */
@@ -258,26 +252,31 @@ class GridColumnGroup extends ColumnBaseMixin(PolymerElement) {
   }
 
   /** @private */
-  _groupHiddenChanged(hidden, rootColumns) {
-    if (rootColumns && !this._preventHiddenCascade) {
-      this._ignoreVisibleChildColumns = true;
-      rootColumns.forEach((column) => (column.hidden = hidden));
-      this._ignoreVisibleChildColumns = false;
+  _groupHiddenChanged(hidden) {
+    // When initializing the hidden property, only sync hidden state to columns
+    // if group is actually hidden. Otherwise, we could override a hidden column
+    // to be visible.
+    // We always want to run this though if the property is actually changed.
+    if (hidden || this.__groupHiddenInitialized) {
+      this._synchronizeHidden();
     }
+    this.__groupHiddenInitialized = true;
+  }
 
-    this._columnPropChanged('hidden');
+  /** @private */
+  _updateAutoHidden() {
+    const wasAutoHidden = this._autoHidden;
+    this._autoHidden = (this._visibleChildColumns || []).length === 0;
+    // Only modify hidden state if group was auto-hidden, or becomes auto-hidden
+    if (wasAutoHidden || this._autoHidden) {
+      this.hidden = this._autoHidden;
+    }
   }
 
   /** @private */
-  _visibleChildColumnsChanged(visibleChildColumns) {
-    this._colSpan = visibleChildColumns.length;
-
-    if (!this._ignoreVisibleChildColumns) {
-      if (visibleChildColumns.length === 0) {
-        this._autoHidden = this.hidden = true;
-      } else if (this.hidden && this._autoHidden) {
-        this._autoHidden = this.hidden = false;
-      }
+  _synchronizeHidden() {
+    if (this._childColumns && !this._preventHiddenSynchronization) {
+      this._childColumns.forEach((column) => (column.hidden = this.hidden));
     }
   }
 
@@ -313,10 +312,14 @@ class GridColumnGroup extends ColumnBaseMixin(PolymerElement) {
         info.addedNodes.filter(this._isColumnElement).length > 0 ||
         info.removedNodes.filter(this._isColumnElement).length > 0
       ) {
-        this._preventHiddenCascade = true;
+        // Prevent synchronization of the hidden state to child columns.
+        // If the group is currently auto-hidden, and a visible column is added,
+        // we don't want the other columns to become visible as well.
+        this._preventHiddenSynchronization = true;
         this._rootColumns = this._getChildColumns(this);
         this._childColumns = this._rootColumns;
-        this._preventHiddenCascade = false;
+        this._updateVisibleChildColumns(this._childColumns);
+        this._preventHiddenSynchronization = false;
 
         // Update the column tree with microtask timing to avoid shady style scope issues
         microTask.run(() => {

package/src/vaadin-grid-column-reordering-mixin.js

@@ -318,8 +318,8 @@ export const ColumnReorderingMixin = (superClass) =>
         const differentColumns = column1 !== column2;
         const sameParent = column1.parentElement === column2.parentElement;
         const sameFrozen =
-          (column1.frozen && column2.frozen) || // both columns are frozen
-          (column1.frozenToEnd && column2.frozenToEnd) || // both columns are frozen to end
+          (column1.frozen && column2.frozen) || // Both columns are frozen
+          (column1.frozenToEnd && column2.frozenToEnd) || // Both columns are frozen to end
           (!column1.frozen && !column1.frozenToEnd && !column2.frozen && !column2.frozenToEnd);
         return differentColumns && sameParent && sameFrozen;
       }

package/src/vaadin-grid-column.js

@@ -22,7 +22,7 @@ export const ColumnBaseMixin = (superClass) =>
          */
         resizable: {
           type: Boolean,
-          value: function () {
+          value() {
             if (this.localName === 'vaadin-grid-column-group') {
               return;
             }

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

@@ -172,7 +172,7 @@ export const DataProviderMixin = (superClass) =>
          */
         _cache: {
           type: Object,
-          value: function () {
+          value() {
             const cache = new ItemCache(this);
             return cache;
           },
@@ -344,7 +344,7 @@ export const DataProviderMixin = (superClass) =>
      * @protected
      */
     _loadPage(page, cache) {
-      // make sure same page isn't requested multiple times.
+      // Make sure same page isn't requested multiple times.
       if (!cache.pendingRequests[page] && this.dataProvider) {
         this._setLoading(true);
         cache.pendingRequests[page] = true;
@@ -466,7 +466,7 @@ export const DataProviderMixin = (superClass) =>
     /** @protected */
     _ensureFirstPageLoaded() {
       if (!this._hasData) {
-        // load data before adding rows to make sure they have content when
+        // Load data before adding rows to make sure they have content when
         // rendered for the first time.
         this._loadPage(0, this._cache);
       }

package/src/vaadin-grid-dynamic-columns-mixin.js

@@ -16,7 +16,7 @@ function arrayEquals(arr1, arr2) {
   for (let i = 0, l = arr1.length; i < l; i++) {
     // Check if we have nested arrays
     if (arr1[i] instanceof Array && arr2[i] instanceof Array) {
-      // recurse into the nested arrays
+      // Recurse into the nested arrays
       if (!arrayEquals(arr1[i], arr2[i])) {
         return false;
       }

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

@@ -14,9 +14,7 @@ export const FilterMixin = (superClass) =>
         /** @private */
         _filters: {
           type: Array,
-          value: function () {
-            return [];
-          },
+          value: () => [],
         },
       };
     }

package/src/vaadin-grid-helpers.js

@@ -12,7 +12,7 @@
 export function updateColumnOrders(columns, scope, baseOrder) {
   let c = 1;
   columns.forEach((column) => {
-    // avoid multiples of 10 because they introduce and extra zero and
+    // Avoid multiples of 10 because they introduce and extra zero and
     // causes the underlying calculations for child order goes wrong
     if (c % 10 === 0) {
       c += 1;

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

@@ -617,6 +617,11 @@ export const KeyboardNavigationMixin = (superClass) =>
     _onTabKeyDown(e) {
       const focusTarget = this._predictFocusStepTarget(e.composedPath()[0], e.shiftKey ? -1 : 1);
 
+      // Can be undefined if grid has tabindex
+      if (!focusTarget) {
+        return;
+      }
+
       // Prevent focus-trap logic from intercepting the event.
       e.stopPropagation();
 
@@ -734,9 +739,7 @@ export const KeyboardNavigationMixin = (superClass) =>
         if (cell) {
           // Fire a public event for cell.
           const context = this.getEventContext(e);
-          cell.dispatchEvent(
-            new CustomEvent('cell-focus', { bubbles: true, composed: true, detail: { context: context } }),
-          );
+          cell.dispatchEvent(new CustomEvent('cell-focus', { bubbles: true, composed: true, detail: { context } }));
         }
       }
 

package/src/vaadin-grid-row-details-mixin.js

@@ -17,9 +17,7 @@ export const RowDetailsMixin = (superClass) =>
          */
         detailsOpenedItems: {
           type: Array,
-          value: function () {
-            return [];
-          },
+          value: () => [],
         },
 
         /**

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

@@ -63,9 +63,6 @@ export const ScrollMixin = (superClass) =>
     ready() {
       super.ready();
 
-      // Preserve accessor to the legacy scrolling functionality
-      this.$.outerscroller = document.createElement('div');
-
       this.scrollTarget = this.$.table;
 
       this.$.items.addEventListener('focusin', (e) => {

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

@@ -235,7 +235,7 @@ class GridSelectionColumn extends GridColumn {
   }
 
   /**
-   * iOS needs indeterminate + checked at the same time
+   * IOS needs indeterminate + checked at the same time
    * @private
    */
   __isChecked(selectAll, indeterminate) {

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

@@ -20,11 +20,20 @@ export const SelectionMixin = (superClass) =>
           notify: true,
           value: () => [],
         },
+
+        /**
+         * Set of selected item ids
+         * @private
+         */
+        __selectedKeys: {
+          type: Object,
+          value: () => new Set(),
+        },
       };
     }
 
     static get observers() {
-      return ['_selectedItemsChanged(selectedItems.*)'];
+      return ['_updateSelectedKeys(itemIdPath, selectedItems.*)'];
     }
 
     /**
@@ -33,7 +42,7 @@ export const SelectionMixin = (superClass) =>
      * @protected
      */
     _isSelected(item) {
-      return this.selectedItems && this._getItemIndexInArray(item, this.selectedItems) > -1;
+      return this.__selectedKeys.has(this.getItemId(item));
     }
 
     /**
@@ -68,8 +77,7 @@ export const SelectionMixin = (superClass) =>
      * @protected
      */
     _toggleItem(item) {
-      const index = this._getItemIndexInArray(item, this.selectedItems);
-      if (index === -1) {
+      if (!this._isSelected(item)) {
         this.selectItem(item);
       } else {
         this.deselectItem(item);
@@ -77,7 +85,13 @@ export const SelectionMixin = (superClass) =>
     }
 
     /** @private */
-    _selectedItemsChanged() {
+    _updateSelectedKeys() {
+      const selectedItems = this.selectedItems || [];
+      this.__selectedKeys = new Set();
+      selectedItems.forEach((item) => {
+        this.__selectedKeys.add(this.getItemId(item));
+      });
+
       this.requestContentUpdate();
     }
 

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

@@ -27,17 +27,13 @@ export const SortMixin = (superClass) =>
          */
         _sorters: {
           type: Array,
-          value: function () {
-            return [];
-          },
+          value: () => [],
         },
 
         /** @private */
         _previousSorters: {
           type: Array,
-          value: function () {
-            return [];
-          },
+          value: () => [],
         },
       };
     }

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

@@ -49,7 +49,7 @@ export const StylingMixin = (superClass) =>
      */
     generateCellClassNames() {
       Array.from(this.$.items.children)
-        .filter((row) => !row.hidden)
+        .filter((row) => !row.hidden && !row.hasAttribute('loading'))
         .forEach((row) => this._generateCellClassNames(row, this.__getRowModel(row)));
     }
 

package/src/vaadin-grid.d.ts

@@ -95,8 +95,8 @@ export type GridExpandedItemsChangedEvent<TItem> = CustomEvent<{ value: TItem[]
  */
 export type GridDragStartEvent<TItem> = CustomEvent<{
   draggedItems: TItem[];
-  setDraggedItemsCount: (count: number) => void;
-  setDragData: (type: string, data: string) => void;
+  setDraggedItemsCount(count: number): void;
+  setDragData(type: string, data: string): void;
 }>;
 
 /**

package/src/vaadin-grid.js

@@ -558,7 +558,7 @@ class Grid extends ElementMixin(
 
     const columnWidth = Math.max(this.__getIntrinsicWidth(col), this.__getDistributedWidth(col.parentElement, col));
 
-    // we're processing a regular grid-column and not a grid-column-group
+    // We're processing a regular grid-column and not a grid-column-group
     if (!innerColumn) {
       return columnWidth;
     }
@@ -897,7 +897,8 @@ class Grid extends ElementMixin(
   }
 
   __updateFooterPositioning() {
-    if (this._firefox) {
+    // TODO: fixed in Firefox 99, remove when we can drop Firefox ESR 91 support
+    if (this._firefox && parseFloat(navigator.userAgent.match(/Firefox\/(\d{2,3}.\d)/)[1]) < 99) {
       // Sticky (or translated) footer in a flexbox host doesn't get included in
       // the scroll height calculation on FF. This is a workaround for the issue.
       this.$.items.style.paddingBottom = 0;
@@ -989,14 +990,14 @@ class Grid extends ElementMixin(
    */
   requestContentUpdate() {
     if (this._columnTree) {
-      // header and footer renderers
+      // Header and footer renderers
       this._columnTree.forEach((level) => {
         level.forEach((column) => {
           column._renderHeaderAndFooter();
         });
       });
 
-      // body and row details renderers
+      // Body and row details renderers
       this.__updateVisibleRows();
     }
   }