@vaadin/grid 22.0.0-alpha9 → 22.0.0

package/README.md

@@ -1,13 +1,10 @@
-# <vaadin-grid>
+# @vaadin/grid
 
-[Live Demo ↗](https://vaadin.com/components/vaadin-grid/html-examples)
-|
-[API documentation ↗](https://vaadin.com/components/vaadin-grid/html-api)
+A web component for showing tabular data.
 
-[<vaadin-grid>](https://vaadin.com/components/vaadin-grid) is a free, high quality data grid / data table Web Component, part of the [Vaadin components](https://vaadin.com/components).
+[Documentation + Live Demo ↗](https://vaadin.com/docs/latest/ds/components/grid)
 
 [![npm version](https://badgen.net/npm/v/@vaadin/grid)](https://www.npmjs.com/package/@vaadin/grid)
-[![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/vaadinvaadin-grid)
 [![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)
 
 ```html
@@ -15,12 +12,12 @@
   <vaadin-grid-selection-column auto-select frozen></vaadin-grid-selection-column>
   <vaadin-grid-sort-column width="9em" path="firstName"></vaadin-grid-sort-column>
   <vaadin-grid-sort-column width="9em" path="lastName"></vaadin-grid-sort-column>
-  <vaadin-grid-column id="addresscolumn" width="15em" flex-grow="2" header="Address"></vaadin-grid-column>
+  <vaadin-grid-column id="address" width="15em" flex-grow="2" header="Address"></vaadin-grid-column>
 </vaadin-grid>
 
 <script>
   // Customize the "Address" column's renderer
-  document.querySelector('#addresscolumn').renderer = (root, grid, model) => {
+  document.querySelector('#address').renderer = (root, grid, model) => {
     root.textContent = `${model.item.address.street}, ${model.item.address.city}`;
   };
 
@@ -32,41 +29,62 @@
 </script>
 ```
 
-[<img src="https://raw.githubusercontent.com/vaadin/vaadin-grid/master/screenshot.png" alt="Screenshot of vaadin-grid, using the default Lumo theme">](https://vaadin.com/components/vaadin-grid)
+[<img src="https://raw.githubusercontent.com/vaadin/web-components/master/packages/grid/screenshot.png" alt="Screenshot of vaadin-grid">](https://vaadin.com/docs/latest/ds/components/grid)
 
 ## Installation
 
-Install `vaadin-grid`:
+Install the component:
 
 ```sh
-npm i @vaadin/grid --save
+npm i @vaadin/grid
 ```
 
-Once installed, import it in your application:
+Once installed, import the components in your application:
 
 ```js
-import '@vaadin/grid/vaadin-grid.js';
+import '@vaadin/grid';
+import '@vaadin/grid/vaadin-grid-column-group.js';
+import '@vaadin/grid/vaadin-grid-filter-column.js';
+import '@vaadin/grid/vaadin-grid-selection-column.js';
+import '@vaadin/grid/vaadin-grid-sort-column.js';
+import '@vaadin/grid/vaadin-grid-tree-column.js';
 ```
 
-## Getting started
+## Themes
 
-Vaadin components use the Lumo theme by default.
+Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/ds/customization/using-themes), Lumo and Material.
+The [main entrypoint](https://github.com/vaadin/web-components/blob/master/packages/grid/vaadin-grid.js) of the package uses the Lumo theme.
 
-To use the Material theme, import the correspondent file from the `theme/material` folder.
+To use the Material theme, import the components from the `theme/material` folder:
 
-## Entry points
-
-- The component with the Lumo theme:
-
-  `theme/lumo/vaadin-grid.js`
+```js
+import '@vaadin/grid/theme/material/vaadin-grid.js';
+import '@vaadin/grid/theme/material/vaadin-grid-filter-column.js';
+import '@vaadin/grid/theme/material/vaadin-grid-selection-column.js';
+import '@vaadin/grid/theme/material/vaadin-grid-sort-column.js';
+import '@vaadin/grid/theme/material/vaadin-grid-tree-column.js';
+```
 
-- The component with the Material theme:
+You can also import the Lumo version of the components explicitly:
 
-  `theme/material/vaadin-grid.js`
+```js
+import '@vaadin/grid/theme/lumo/vaadin-grid.js';
+import '@vaadin/grid/theme/lumo/vaadin-grid-filter-column.js';
+import '@vaadin/grid/theme/lumo/vaadin-grid-selection-column.js';
+import '@vaadin/grid/theme/lumo/vaadin-grid-sort-column.js';
+import '@vaadin/grid/theme/lumo/vaadin-grid-tree-column.js';
+```
 
-- Alias for `theme/lumo/vaadin-grid.js`:
+Finally, you can import the un-themed components from the `src` folder to get a minimal starting point:
 
-  `vaadin-grid.js`
+```js
+import '@vaadin/grid/src/vaadin-grid.js';
+import '@vaadin/grid/src/vaadin-grid-column-group.js';
+import '@vaadin/grid/src/vaadin-grid-filter-column.js';
+import '@vaadin/grid/src/vaadin-grid-selection-column.js';
+import '@vaadin/grid/src/vaadin-grid-sort-column.js';
+import '@vaadin/grid/src/vaadin-grid-tree-column.js';
+```
 
 ## Contributing
 
@@ -76,4 +94,5 @@ Read the [contributing guide](https://vaadin.com/docs/latest/guide/contributing/
 
 Apache License 2.0
 
-Vaadin collects development time usage statistics to improve this product. For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.
+Vaadin collects usage statistics at development time to improve this product.
+For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/grid",
-  "version": "22.0.0-alpha9",
+  "version": "22.0.0",
   "publishConfig": {
     "access": "public"
   },
@@ -38,21 +38,21 @@
     "data-table"
   ],
   "dependencies": {
+    "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/checkbox": "22.0.0-alpha9",
-    "@vaadin/component-base": "22.0.0-alpha9",
-    "@vaadin/text-field": "22.0.0-alpha9",
-    "@vaadin/vaadin-lumo-styles": "22.0.0-alpha9",
-    "@vaadin/vaadin-material-styles": "22.0.0-alpha9",
-    "@vaadin/vaadin-themable-mixin": "22.0.0-alpha9",
-    "@vaadin/virtual-list": "22.0.0-alpha9"
+    "@vaadin/checkbox": "^22.0.0",
+    "@vaadin/component-base": "^22.0.0",
+    "@vaadin/text-field": "^22.0.0",
+    "@vaadin/vaadin-lumo-styles": "^22.0.0",
+    "@vaadin/vaadin-material-styles": "^22.0.0",
+    "@vaadin/vaadin-themable-mixin": "^22.0.0"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/polymer-legacy-adapter": "22.0.0-alpha9",
-    "@vaadin/testing-helpers": "^0.3.0",
+    "@vaadin/polymer-legacy-adapter": "^22.0.0",
+    "@vaadin/testing-helpers": "^0.3.2",
     "lit": "^2.0.0",
     "sinon": "^9.2.0"
   },
-  "gitHead": "6e8c899dc65918f97e3c0acb2076122c4b2ef274"
+  "gitHead": "b668e9b1a975227fbe34beb70d1cd5b03dce2348"
 }

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

@@ -3,16 +3,13 @@
  * Copyright (c) 2021 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';
 
-declare function ActiveItemMixin<TItem, T extends new (...args: any[]) => {}>(
+export declare function ActiveItemMixin<TItem, T extends Constructor<HTMLElement>>(
   base: T
-): T & ActiveItemMixinConstructor<TItem>;
+): T & Constructor<ActiveItemMixinClass<TItem>>;
 
-interface ActiveItemMixinConstructor<TItem> {
-  new (...args: any[]): ActiveItemMixin<TItem>;
-}
-
-interface ActiveItemMixin<TItem> {
+export declare class ActiveItemMixinClass<TItem> {
   /**
    * The item user has last interacted with. Turns to `null` after user deactivates
    * the item by re-interacting with the currently active item.
@@ -20,6 +17,4 @@ interface ActiveItemMixin<TItem> {
   activeItem: TItem | null;
 }
 
-declare function isFocusable(target: Element): boolean;
-
-export { ActiveItemMixin, ActiveItemMixinConstructor, isFocusable };
+export declare function isFocusable(target: Element): boolean;

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

@@ -3,20 +3,15 @@
  * Copyright (c) 2021 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';
 
-declare function ArrayDataProviderMixin<TItem, T extends new (...args: any[]) => {}>(
+export declare function ArrayDataProviderMixin<TItem, T extends Constructor<HTMLElement>>(
   base: T
-): T & ArrayDataProviderMixinConstructor<TItem>;
+): T & Constructor<ArrayDataProviderMixinClass<TItem>>;
 
-interface ArrayDataProviderMixinConstructor<TItem> {
-  new (...args: any[]): ArrayDataProviderMixin<TItem>;
-}
-
-declare interface ArrayDataProviderMixin<TItem> {
+export declare class ArrayDataProviderMixinClass<TItem> {
   /**
    * An array containing the items which will be passed to renderer functions.
    */
   items: TItem[] | null | undefined;
 }
-
-export { ArrayDataProviderMixin, ArrayDataProviderMixinConstructor };

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

@@ -3,8 +3,8 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { ColumnBaseMixin } from './vaadin-grid-column.js';
 import { GridDefaultItem } from './vaadin-grid.js';
+import { ColumnBaseMixinClass } from './vaadin-grid-column.js';
 
 /**
  * A `<vaadin-grid-column-group>` is used to make groups of columns in `<vaadin-grid>` and
@@ -48,7 +48,7 @@ declare class GridColumnGroup extends HTMLElement {
   readonly width: string | null | undefined;
 }
 
-interface GridColumnGroup<TItem = GridDefaultItem> extends ColumnBaseMixin<TItem> {}
+interface GridColumnGroup<TItem = GridDefaultItem> extends ColumnBaseMixinClass<TItem> {}
 
 declare global {
   interface HTMLElementTagNameMap {

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

@@ -3,8 +3,8 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
+import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { microTask } from '@vaadin/component-base/src/async.js';
 import { ColumnBaseMixin } from './vaadin-grid-column.js';
 import { updateColumnOrders } from './vaadin-grid-helpers.js';

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

@@ -3,23 +3,16 @@
  * Copyright (c) 2021 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';
 
-declare function ColumnReorderingMixin<T extends new (...args: any[]) => {}>(
+export declare function ColumnReorderingMixin<T extends Constructor<HTMLElement>>(
   base: T
-): T & ColumnReorderingMixinConstructor;
+): T & Constructor<ColumnReorderingMixinClass>;
 
-interface ColumnReorderingMixinConstructor {
-  new (...args: any[]): ColumnReorderingMixin;
-}
-
-export { ColumnReorderingMixinConstructor };
-
-interface ColumnReorderingMixin {
+export declare class ColumnReorderingMixinClass {
   /**
    * Set to true to allow column reordering.
    * @attr {boolean} column-reordering-allowed
    */
   columnReorderingAllowed: boolean;
 }
-
-export { ColumnReorderingMixin };

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

@@ -3,6 +3,7 @@
  * Copyright (c) 2021 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 { GridDefaultItem, GridItemModel } from './vaadin-grid.js';
 
 export type GridBodyRenderer<TItem> = (
@@ -15,15 +16,11 @@ export type GridColumnTextAlign = 'start' | 'center' | 'end' | null;
 
 export type GridHeaderFooterRenderer<TItem> = (root: HTMLElement, column: GridColumn<TItem>) => void;
 
-declare function ColumnBaseMixin<TItem, T extends new (...args: any[]) => {}>(
+export declare function ColumnBaseMixin<TItem, T extends Constructor<HTMLElement>>(
   base: T
-): T & ColumnBaseMixinConstructor<TItem>;
+): T & Constructor<ColumnBaseMixinClass<TItem>>;
 
-export interface ColumnBaseMixinConstructor<TItem> {
-  new (...args: any[]): ColumnBaseMixin<TItem>;
-}
-
-interface ColumnBaseMixin<TItem> {
+export declare class ColumnBaseMixinClass<TItem> {
   /**
    * When set to true, the column is user-resizable.
    */
@@ -132,7 +129,7 @@ declare class GridColumn<TItem = GridDefaultItem> extends HTMLElement {
   autoWidth: boolean;
 }
 
-interface GridColumn<TItem = GridDefaultItem> extends ColumnBaseMixin<TItem> {}
+interface GridColumn<TItem = GridDefaultItem> extends ColumnBaseMixinClass<TItem> {}
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -140,4 +137,4 @@ declare global {
   }
 }
 
-export { ColumnBaseMixin, GridColumn };
+export { GridColumn };

package/src/vaadin-grid-column.js

@@ -4,10 +4,10 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 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 { processTemplates } from '@vaadin/component-base/src/templates.js';
-import { Debouncer } from '@vaadin/component-base/src/debounce.js';
-import { animationFrame } from '@vaadin/component-base/src/async.js';
 
 /**
  * @polymerMixin

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

@@ -3,6 +3,7 @@
  * Copyright (c) 2021 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 { GridSorterDirection } from './vaadin-grid-sorter.js';
 
 export { GridSorterDirection };
@@ -32,7 +33,7 @@ export type GridDataProvider<TItem> = (
   callback: GridDataProviderCallback<TItem>
 ) => void;
 
-declare class ItemCache<TItem> {
+export declare class ItemCache<TItem> {
   grid: HTMLElement;
   parentCache: ItemCache<TItem> | undefined;
   parentItem: TItem | undefined;
@@ -55,15 +56,11 @@ declare class ItemCache<TItem> {
   getCacheAndIndex(index: number): { cache: ItemCache<TItem>; scaledIndex: number };
 }
 
-declare function DataProviderMixin<TItem, T extends new (...args: any[]) => {}>(
+export declare function DataProviderMixin<TItem, T extends Constructor<HTMLElement>>(
   base: T
-): T & DataProviderMixinConstructor<TItem>;
+): T & Constructor<DataProviderMixinClass<TItem>>;
 
-interface DataProviderMixinConstructor<TItem> {
-  new (...args: any[]): DataProviderMixin<TItem>;
-}
-
-interface DataProviderMixin<TItem> {
+export declare class DataProviderMixinClass<TItem> {
   /**
    * Number of items fetched at a time from the dataprovider.
    * @attr {number} page-size
@@ -136,5 +133,3 @@ interface DataProviderMixin<TItem> {
    */
   clearCache(): void;
 }
-
-export { DataProviderMixin, DataProviderMixinConstructor, ItemCache };

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

@@ -3,8 +3,8 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 import { timeOut } from '@vaadin/component-base/src/async.js';
+import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 
 /**
  * @private

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

@@ -3,6 +3,7 @@
  * Copyright (c) 2021 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';
 
 export type GridDragAndDropFilter<TItem> = (model: GridItemModel<TItem>) => boolean;
@@ -11,15 +12,11 @@ export type GridDropLocation = 'above' | 'on-top' | 'below' | 'empty';
 
 export type GridDropMode = 'between' | 'on-top' | 'on-top-or-between' | 'on-grid';
 
-declare function DragAndDropMixin<TItem, T extends new (...args: any[]) => {}>(
+export declare function DragAndDropMixin<TItem, T extends Constructor<HTMLElement>>(
   base: T
-): T & DragAndDropMixinConstructor<TItem>;
+): T & Constructor<DragAndDropMixinClass<TItem>>;
 
-interface DragAndDropMixinConstructor<TItem> {
-  new (...args: any[]): DragAndDropMixin<TItem>;
-}
-
-interface DragAndDropMixin<TItem> {
+export declare class DragAndDropMixinClass<TItem> {
   /**
    * Defines the locations within the Grid row where an element can be dropped.
    *
@@ -76,5 +73,3 @@ interface DragAndDropMixin<TItem> {
    */
   filterDragAndDrop(): void;
 }
-
-export { DragAndDropMixin, DragAndDropMixinConstructor };

package/src/vaadin-grid-drag-and-drop-mixin.js

@@ -85,7 +85,7 @@ export const DragAndDropMixin = (superClass) =>
     }
 
     static get observers() {
-      return ['_dragDropAccessChanged(rowsDraggable, dropMode, dragFilter, dropFilter)'];
+      return ['_dragDropAccessChanged(rowsDraggable, dropMode, dragFilter, dropFilter, loading)'];
     }
 
     /** @protected */
@@ -374,8 +374,9 @@ export const DragAndDropMixin = (superClass) =>
      * @protected
      */
     _filterDragAndDrop(row, model) {
-      const dragDisabled = !this.rowsDraggable || (this.dragFilter && !this.dragFilter(model));
-      const dropDisabled = !this.dropMode || (this.dropFilter && !this.dropFilter(model));
+      const loading = this.loading || row.hasAttribute('loading');
+      const dragDisabled = !this.rowsDraggable || loading || (this.dragFilter && !this.dragFilter(model));
+      const dropDisabled = !this.dropMode || loading || (this.dropFilter && !this.dropFilter(model));
 
       const draggableElements = Array.from(row.children).map((cell) => cell._content);
 

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

@@ -3,10 +3,10 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
-import { Debouncer } from '@vaadin/component-base/src/debounce.js';
+import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { timeOut } from '@vaadin/component-base/src/async.js';
+import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 
 /**
  * @polymerMixin

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

@@ -3,6 +3,7 @@
  * Copyright (c) 2021 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 { GridColumn } from './vaadin-grid-column.js';
 
 export interface GridEventContext<TItem> {
@@ -16,15 +17,11 @@ export interface GridEventContext<TItem> {
   level?: number;
 }
 
-declare function EventContextMixin<TItem, T extends new (...args: any[]) => {}>(
+export declare function EventContextMixin<TItem, T extends Constructor<HTMLElement>>(
   base: T
-): T & EventContextMixinConstructor<TItem>;
+): T & Constructor<EventContextMixinClass<TItem>>;
 
-interface EventContextMixinConstructor<TItem> {
-  new (...args: any[]): EventContextMixin<TItem>;
-}
-
-interface EventContextMixin<TItem> {
+export declare class EventContextMixinClass<TItem> {
   /**
    * Returns an object with context information about the event target:
    * - `item`: the data object corresponding to the targeted row (not specified when targeting header or footer)
@@ -45,5 +42,3 @@ interface EventContextMixin<TItem> {
    */
   getEventContext(event: Event): GridEventContext<TItem>;
 }
-
-export { EventContextMixin, EventContextMixinConstructor };

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

@@ -3,8 +3,8 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { GridColumn } from './vaadin-grid-column.js';
 import { GridDefaultItem } from './vaadin-grid.js';
+import { GridColumn } from './vaadin-grid-column.js';
 
 /**
  * `<vaadin-grid-filter-column>` is a helper element for the `<vaadin-grid>`

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

@@ -3,8 +3,8 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { GridColumn } from './vaadin-grid-column.js';
 import './vaadin-grid-filter.js';
+import { GridColumn } from './vaadin-grid-column.js';
 
 /**
  * `<vaadin-grid-filter-column>` is a helper element for the `<vaadin-grid>`

package/src/vaadin-grid-filter.js

@@ -3,10 +3,10 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
-import { Debouncer } from '@vaadin/component-base/src/debounce.js';
-import { timeOut } from '@vaadin/component-base/src/async.js';
 import '@vaadin/text-field/src/vaadin-text-field.js';
+import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { timeOut } from '@vaadin/component-base/src/async.js';
+import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 
 /**
  * `<vaadin-grid-filter>` is a helper element for the `<vaadin-grid>` that provides out-of-the-box UI controls,

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

@@ -97,7 +97,9 @@ export const KeyboardNavigationMixin = (superClass) =>
 
     /** @private */
     get __rowFocusMode() {
-      return this.__isRow(this._itemsFocusable);
+      return (
+        this.__isRow(this._itemsFocusable) || this.__isRow(this._headerFocusable) || this.__isRow(this._footerFocusable)
+      );
     }
 
     set __rowFocusMode(value) {
@@ -561,7 +563,10 @@ export const KeyboardNavigationMixin = (superClass) =>
 
       index += step;
       while (index >= 0 && index <= tabOrder.length - 1) {
-        const rowElement = this.__rowFocusMode ? tabOrder[index] : tabOrder[index].parentNode;
+        let rowElement = tabOrder[index];
+        if (rowElement && !this.__rowFocusMode) {
+          rowElement = tabOrder[index].parentNode;
+        }
 
         if (!rowElement || rowElement.hidden) {
           index += step;
@@ -592,9 +597,9 @@ export const KeyboardNavigationMixin = (superClass) =>
           // assigned with a new index since last focus, probably because of
           // scrolling. Focus the row for the stored focused item index instead.
           const columnIndex = Array.from(targetRow.children).indexOf(this._itemsFocusable);
-          const focusedItemRow = Array.from(this.$.items.children).filter(
-            (row) => row.index === this._focusedItemIndex
-          )[0];
+          const focusedItemRow = Array.from(this.$.items.children).find(
+            (row) => !row.hidden && row.index === this._focusedItemIndex
+          );
           if (focusedItemRow) {
             itemsFocusTarget = focusedItemRow.children[columnIndex];
           }
@@ -778,19 +783,27 @@ export const KeyboardNavigationMixin = (superClass) =>
 
     /** @protected */
     _resetKeyboardNavigation() {
-      if (!this.__isValidFocusable(this._headerFocusable) && this.$.header.firstElementChild) {
-        this._headerFocusable = Array.from(this.$.header.firstElementChild.children).filter((el) => !el.hidden)[0];
-      }
+      // Header / footer
+      ['header', 'footer'].forEach((section) => {
+        if (!this.__isValidFocusable(this[`_${section}Focusable`])) {
+          const firstVisibleRow = [...this.$[section].children].find((row) => row.offsetHeight);
+          const firstVisibleCell = firstVisibleRow ? [...firstVisibleRow.children].find((cell) => !cell.hidden) : null;
+          if (firstVisibleRow && firstVisibleCell) {
+            this[`_${section}Focusable`] = this.__rowFocusMode ? firstVisibleRow : firstVisibleCell;
+          }
+        }
+      });
 
+      // Body
       if (!this.__isValidFocusable(this._itemsFocusable) && this.$.items.firstElementChild) {
-        const firstVisibleIndexRow = this.__getFirstVisibleItem();
-        if (firstVisibleIndexRow) {
-          this._itemsFocusable = Array.from(firstVisibleIndexRow.children).filter((el) => !el.hidden)[0];
-        }
-      }
+        const firstVisibleRow = this.__getFirstVisibleItem();
+        const firstVisibleCell = firstVisibleRow ? [...firstVisibleRow.children].find((cell) => !cell.hidden) : null;
 
-      if (!this.__isValidFocusable(this._footerFocusable) && this.$.footer.firstElementChild) {
-        this._footerFocusable = Array.from(this.$.footer.firstElementChild.children).filter((el) => !el.hidden)[0];
+        if (firstVisibleCell && firstVisibleRow) {
+          // Reset memoized column
+          delete this._focusedColumnOrder;
+          this._itemsFocusable = this.__rowFocusMode ? firstVisibleRow : firstVisibleCell;
+        }
       }
     }
 

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

@@ -3,6 +3,7 @@
  * Copyright (c) 2021 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 { Grid, GridItemModel } from './vaadin-grid.js';
 
 export type GridRowDetailsRenderer<TItem> = (
@@ -11,15 +12,11 @@ export type GridRowDetailsRenderer<TItem> = (
   model?: GridItemModel<TItem>
 ) => void;
 
-declare function RowDetailsMixin<TItem, T extends new (...args: any[]) => {}>(
+export declare function RowDetailsMixin<TItem, T extends Constructor<HTMLElement>>(
   base: T
-): T & RowDetailsMixinConstructor<TItem>;
+): T & Constructor<RowDetailsMixinClass<TItem>>;
 
-interface RowDetailsMixinConstructor<TItem> {
-  new (...args: any[]): RowDetailsMixin<TItem>;
-}
-
-interface RowDetailsMixin<TItem> {
+export declare class RowDetailsMixinClass<TItem> {
   /**
    * An array containing references to items with open row details.
    */
@@ -51,5 +48,3 @@ interface RowDetailsMixin<TItem> {
    */
   closeItemDetails(item: TItem): void;
 }
-
-export { RowDetailsMixin, RowDetailsMixinConstructor };