@vaadin/grid 23.2.0-dev.8a7678b70 → 23.2.1

package/README.md

@@ -2,7 +2,7 @@
 
 A web component for showing tabular data.
 
-[Documentation + Live Demo ↗](https://vaadin.com/docs/latest/ds/components/grid)
+[Documentation + Live Demo ↗](https://vaadin.com/docs/latest/components/grid)
 
 [![npm version](https://badgen.net/npm/v/@vaadin/grid)](https://www.npmjs.com/package/@vaadin/grid)
 [![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)
@@ -29,7 +29,7 @@ A web component for showing tabular data.
 </script>
 ```
 
-[<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)
+[<img src="https://raw.githubusercontent.com/vaadin/web-components/master/packages/grid/screenshot.png" alt="Screenshot of vaadin-grid">](https://vaadin.com/docs/latest/components/grid)
 
 ## Installation
 
@@ -52,7 +52,7 @@ import '@vaadin/grid/vaadin-grid-tree-column.js';
 
 ## Themes
 
-Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/ds/customization/using-themes), Lumo and Material.
+Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), 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 components from the `theme/material` folder:
@@ -88,7 +88,7 @@ import '@vaadin/grid/src/vaadin-grid-tree-column.js';
 
 ## Contributing
 
-Read the [contributing guide](https://vaadin.com/docs/latest/guide/contributing/overview) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
+Read the [contributing guide](https://vaadin.com/docs/latest/contributing/overview) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
 
 ## License
 

package/package.json

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

package/src/array-data-provider.js

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

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

@@ -4,11 +4,12 @@
  * 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';
+import type { TemplateResult } from 'lit';
+import type { DirectiveResult } from 'lit/directive';
+import type { LitRenderer } 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';
 
 export type GridColumnBodyLitRenderer<TItem> = (
   item: TItem,
@@ -26,7 +27,7 @@ declare abstract class AbstractGridColumnRendererDirective<R extends LitRenderer
   /**
    * A property to that the renderer callback will be assigned.
    */
-  abstract rendererProperty: 'renderer' | 'headerRenderer' | 'footerRenderer';
+  abstract rendererProperty: 'footerRenderer' | 'headerRenderer' | 'renderer';
 
   /**
    * Adds the renderer callback to the grid column.

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

@@ -3,10 +3,10 @@
  * 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 type { TemplateResult } from 'lit';
+import type { DirectiveResult } from 'lit/directive';
 import { LitRendererDirective } from '@vaadin/lit-renderer';
-import { Grid, GridItemModel } from '../vaadin-grid.js';
+import type { Grid, GridItemModel } from '../vaadin-grid.js';
 
 export type GridRowDetailsLitRenderer<TItem> = (item: TItem, model: GridItemModel<TItem>, grid: Grid) => TemplateResult;
 

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

@@ -3,11 +3,11 @@
  * Copyright (c) 2016 - 2022 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 type { Constructor } from '@open-wc/dedupe-mixin';
 
 export declare function ActiveItemMixin<TItem, T extends Constructor<HTMLElement>>(
   base: T,
-): T & Constructor<ActiveItemMixinClass<TItem>>;
+): Constructor<ActiveItemMixinClass<TItem>> & T;
 
 export declare class ActiveItemMixinClass<TItem> {
   /**

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

@@ -3,11 +3,11 @@
  * Copyright (c) 2016 - 2022 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 type { Constructor } from '@open-wc/dedupe-mixin';
 
 export declare function ArrayDataProviderMixin<TItem, T extends Constructor<HTMLElement>>(
   base: T,
-): T & Constructor<ArrayDataProviderMixinClass<TItem>>;
+): Constructor<ArrayDataProviderMixinClass<TItem>> & T;
 
 export declare class ArrayDataProviderMixinClass<TItem> {
   /**

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

@@ -3,8 +3,8 @@
  * Copyright (c) 2016 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { GridDefaultItem } from './vaadin-grid.js';
-import { ColumnBaseMixinClass } from './vaadin-grid-column.js';
+import type { GridDefaultItem } from './vaadin-grid.js';
+import type { ColumnBaseMixinClass } from './vaadin-grid-column.js';
 
 /**
  * A `<vaadin-grid-column-group>` is used to make groups of columns in `<vaadin-grid>` and

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

@@ -156,7 +156,9 @@ class GridColumnGroup extends ColumnBaseMixin(PolymerElement) {
       const _rootColumns = rootColumns.slice(0);
 
       if (!order) {
-        _rootColumns.forEach((column) => (column._order = 0));
+        _rootColumns.forEach((column) => {
+          column._order = 0;
+        });
         return;
       }
       // The parent column order number cascades downwards to it's children
@@ -190,7 +192,9 @@ class GridColumnGroup extends ColumnBaseMixin(PolymerElement) {
       return;
     }
 
-    rootColumns.forEach((column) => (column._reorderStatus = reorderStatus));
+    rootColumns.forEach((column) => {
+      column._reorderStatus = reorderStatus;
+    });
   }
 
   /** @private */
@@ -199,7 +203,9 @@ class GridColumnGroup extends ColumnBaseMixin(PolymerElement) {
       return;
     }
 
-    rootColumns.forEach((column) => (column.resizable = resizable));
+    rootColumns.forEach((column) => {
+      column.resizable = resizable;
+    });
   }
 
   /** @private */
@@ -217,7 +223,10 @@ class GridColumnGroup extends ColumnBaseMixin(PolymerElement) {
 
     if (this._visibleChildColumns.length > 0) {
       const width = this._visibleChildColumns
-        .reduce((prev, curr) => (prev += ` + ${(curr.width || '0px').replace('calc', '')}`), '')
+        .reduce((prev, curr) => {
+          prev += ` + ${(curr.width || '0px').replace('calc', '')}`;
+          return prev;
+        }, '')
         .substring(3);
       this._setWidth(`calc(${width})`);
     } else {
@@ -235,7 +244,9 @@ class GridColumnGroup extends ColumnBaseMixin(PolymerElement) {
 
     // Don’t propagate the default `false` value.
     if (frozen !== false) {
-      Array.from(rootColumns).forEach((col) => (col.frozen = frozen));
+      Array.from(rootColumns).forEach((col) => {
+        col.frozen = frozen;
+      });
     }
   }
 
@@ -247,7 +258,9 @@ class GridColumnGroup extends ColumnBaseMixin(PolymerElement) {
 
     // Don’t propagate the default `false` value.
     if (frozenToEnd !== false) {
-      Array.from(rootColumns).forEach((col) => (col.frozenToEnd = frozenToEnd));
+      Array.from(rootColumns).forEach((col) => {
+        col.frozenToEnd = frozenToEnd;
+      });
     }
   }
 
@@ -276,7 +289,9 @@ class GridColumnGroup extends ColumnBaseMixin(PolymerElement) {
   /** @private */
   _synchronizeHidden() {
     if (this._childColumns && !this._preventHiddenSynchronization) {
-      this._childColumns.forEach((column) => (column.hidden = this.hidden));
+      this._childColumns.forEach((column) => {
+        column.hidden = this.hidden;
+      });
     }
   }
 

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

@@ -3,11 +3,11 @@
  * Copyright (c) 2016 - 2022 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 type { Constructor } from '@open-wc/dedupe-mixin';
 
 export declare function ColumnReorderingMixin<T extends Constructor<HTMLElement>>(
   base: T,
-): T & Constructor<ColumnReorderingMixinClass>;
+): Constructor<ColumnReorderingMixinClass> & T;
 
 export declare class ColumnReorderingMixinClass {
   /**

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

@@ -161,7 +161,23 @@ export const ColumnReorderingMixin = (superClass) =>
         this._isSwapAllowed(this._draggedColumn, targetColumn) &&
         this._isSwappableByPosition(targetColumn, e.detail.x)
       ) {
-        this._swapColumnOrders(this._draggedColumn, targetColumn);
+        // Get the column header level of the target column (and the dragged column)
+        const columnTreeLevel = this._columnTree.findIndex((level) => level.includes(targetColumn));
+        // Get the columns on that level in visual order
+        const levelColumnsInOrder = this._getColumnsInOrder(columnTreeLevel);
+
+        // Index of the column being dragged
+        const startIndex = levelColumnsInOrder.indexOf(this._draggedColumn);
+        // Index of the column being dragged over
+        const endIndex = levelColumnsInOrder.indexOf(targetColumn);
+
+        // Direction of iteration
+        const direction = startIndex < endIndex ? 1 : -1;
+
+        // Iteratively swap all the columns from the dragged column to the target column
+        for (let i = startIndex; i !== endIndex; i += direction) {
+          this._swapColumnOrders(this._draggedColumn, levelColumnsInOrder[i + direction]);
+        }
       }
 
       this._updateGhostPosition(e.detail.x, this._touchDevice ? e.detail.y - 50 : e.detail.y);
@@ -192,15 +208,14 @@ export const ColumnReorderingMixin = (superClass) =>
     }
 
     /**
+     * Returns the columns (or column groups) on the specified header level in visual order.
+     * By default, the bottom level is used.
+     *
      * @return {!Array<!GridColumn>}
      * @protected
      */
-    _getColumnsInOrder() {
-      return this._columnTree
-        .slice(0)
-        .pop()
-        .filter((c) => !c.hidden)
-        .sort((b, a) => b._order - a._order);
+    _getColumnsInOrder(headerLevel = this._columnTree.length - 1) {
+      return this._columnTree[headerLevel].filter((c) => !c.hidden).sort((b, a) => b._order - a._order);
     }
 
     /**
@@ -263,7 +278,9 @@ export const ColumnReorderingMixin = (superClass) =>
         'border',
         'flex-direction',
         'overflow',
-      ].forEach((propertyName) => (ghost.style[propertyName] = style[propertyName]));
+      ].forEach((propertyName) => {
+        ghost.style[propertyName] = style[propertyName];
+      });
       return ghost;
     }
 
@@ -274,7 +291,9 @@ export const ColumnReorderingMixin = (superClass) =>
       }
 
       // Reset all column orders
-      columnTree[0].forEach((column) => (column._order = 0));
+      columnTree[0].forEach((column) => {
+        column._order = 0;
+      });
       // Set order numbers to top-level columns
       updateColumnOrders(columnTree[0], this._orderBaseScope, 0);
     }
@@ -287,7 +306,9 @@ export const ColumnReorderingMixin = (superClass) =>
     _setSiblingsReorderStatus(column, status) {
       Array.from(column.parentNode.children)
         .filter((child) => /column/.test(child.localName) && this._isSwapAllowed(child, column))
-        .forEach((sibling) => (sibling._reorderStatus = status));
+        .forEach((sibling) => {
+          sibling._reorderStatus = status;
+        });
     }
 
     /** @protected */

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

@@ -3,8 +3,8 @@
  * Copyright (c) 2016 - 2022 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';
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { GridDefaultItem, GridItemModel } from './vaadin-grid.js';
 
 export type GridBodyRenderer<TItem> = (
   root: HTMLElement,
@@ -12,13 +12,13 @@ export type GridBodyRenderer<TItem> = (
   model: GridItemModel<TItem>,
 ) => void;
 
-export type GridColumnTextAlign = 'start' | 'center' | 'end' | null;
+export type GridColumnTextAlign = 'center' | 'end' | 'start' | null;
 
 export type GridHeaderFooterRenderer<TItem> = (root: HTMLElement, column: GridColumn<TItem>) => void;
 
 export declare function ColumnBaseMixin<TItem, T extends Constructor<HTMLElement>>(
   base: T,
-): T & Constructor<ColumnBaseMixinClass<TItem>>;
+): Constructor<ColumnBaseMixinClass<TItem>> & T;
 
 export declare class ColumnBaseMixinClass<TItem> {
   /**

package/src/vaadin-grid-column.js

@@ -312,12 +312,16 @@ export const ColumnBaseMixin = (superClass) =>
         this.parentElement._columnPropChanged('flexGrow');
       }
 
-      this._allCells.forEach((cell) => (cell.style.flexGrow = flexGrow));
+      this._allCells.forEach((cell) => {
+        cell.style.flexGrow = flexGrow;
+      });
     }
 
     /** @private */
     _orderChanged(order) {
-      this._allCells.forEach((cell) => (cell.style.order = order));
+      this._allCells.forEach((cell) => {
+        cell.style.order = order;
+      });
     }
 
     /** @private */
@@ -326,7 +330,9 @@ export const ColumnBaseMixin = (superClass) =>
         this.parentElement._columnPropChanged('width');
       }
 
-      this._allCells.forEach((cell) => (cell.style.width = width));
+      this._allCells.forEach((cell) => {
+        cell.style.width = width;
+      });
     }
 
     /** @private */

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

@@ -3,7 +3,7 @@
  * Copyright (c) 2016 - 2022 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 type { Constructor } from '@open-wc/dedupe-mixin';
 import { GridSorterDirection } from './vaadin-grid-sorter.js';
 
 export { GridSorterDirection };
@@ -58,7 +58,7 @@ export declare class ItemCache<TItem> {
 
 export declare function DataProviderMixin<TItem, T extends Constructor<HTMLElement>>(
   base: T,
-): T & Constructor<DataProviderMixinClass<TItem>>;
+): Constructor<DataProviderMixinClass<TItem>> & T;
 
 export declare class DataProviderMixinClass<TItem> {
   /**

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

@@ -3,18 +3,18 @@
  * Copyright (c) 2016 - 2022 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';
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { GridItemModel } from './vaadin-grid.js';
 
 export type GridDragAndDropFilter<TItem> = (model: GridItemModel<TItem>) => boolean;
 
-export type GridDropLocation = 'above' | 'on-top' | 'below' | 'empty';
+export type GridDropLocation = 'above' | 'below' | 'empty' | 'on-top';
 
-export type GridDropMode = 'between' | 'on-top' | 'on-top-or-between' | 'on-grid';
+export type GridDropMode = 'between' | 'on-grid' | 'on-top-or-between' | 'on-top';
 
 export declare function DragAndDropMixin<TItem, T extends Constructor<HTMLElement>>(
   base: T,
-): T & Constructor<DragAndDropMixinClass<TItem>>;
+): Constructor<DragAndDropMixinClass<TItem>> & T;
 
 export declare class DragAndDropMixinClass<TItem> {
   /**

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

@@ -280,7 +280,9 @@ export const DragAndDropMixin = (superClass) =>
         if (scrollTopChanged) {
           this.__dndAutoScrolling = true;
           // Disallow more auto-scrolls within 20ms
-          setTimeout(() => (this.__dndAutoScrolling = false), 20);
+          setTimeout(() => {
+            this.__dndAutoScrolling = false;
+          }, 20);
           return true;
         }
       }

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

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

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

@@ -3,7 +3,7 @@
  * Copyright (c) 2016 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { GridDefaultItem } from './vaadin-grid.js';
+import type { GridDefaultItem } from './vaadin-grid.js';
 import { GridColumn } from './vaadin-grid-column.js';
 
 /**

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

@@ -54,13 +54,13 @@ declare class GridFilter extends HTMLElement {
   addEventListener<K extends keyof GridFilterEventMap>(
     type: K,
     listener: (this: GridFilter, ev: GridFilterEventMap[K]) => void,
-    options?: boolean | AddEventListenerOptions,
+    options?: AddEventListenerOptions | boolean,
   ): void;
 
   removeEventListener<K extends keyof GridFilterEventMap>(
     type: K,
     listener: (this: GridFilter, ev: GridFilterEventMap[K]) => void,
-    options?: boolean | EventListenerOptions,
+    options?: EventListenerOptions | boolean,
   ): void;
 }
 

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

@@ -95,7 +95,9 @@ export const KeyboardNavigationMixin = (superClass) =>
         // Reset stored order when moving focus with mouse.
         this._focusedColumnOrder = undefined;
       });
-      this.addEventListener('mouseup', () => (this._isMousedown = false));
+      this.addEventListener('mouseup', () => {
+        this._isMousedown = false;
+      });
     }
 
     /** @private */
@@ -370,7 +372,7 @@ export const KeyboardNavigationMixin = (superClass) =>
      * Focuses the target row after navigating by the given dy offset.
      * If the row is not in the viewport, it is first scrolled to.
      * @private
-     **/
+     */
     _onRowNavigation(activeRow, dy) {
       const { dstRow } = this.__navigateRows(dy, activeRow);
 
@@ -394,7 +396,7 @@ export const KeyboardNavigationMixin = (superClass) =>
      * Also returns information whether the details cell should be the target on the target row.
      * If the row is not in the viewport, it is first scrolled to.
      * @private
-     **/
+     */
     __navigateRows(dy, activeRow, activeCell) {
       const currentRowIndex = this.__getIndexInGroup(activeRow, this._focusedItemIndex);
       const activeRowGroup = activeRow.parentNode;
@@ -469,7 +471,7 @@ export const KeyboardNavigationMixin = (superClass) =>
      * Focuses the target cell after navigating by the given dx and dy offset.
      * If the cell is not in the viewport, it is first scrolled to.
      * @private
-     **/
+     */
     _onCellNavigation(activeCell, dx, dy) {
       const activeRow = activeCell.parentNode;
       const { dstRow, dstIsRowDetails } = this.__navigateRows(dy, activeRow, activeCell);
@@ -746,10 +748,11 @@ export const KeyboardNavigationMixin = (superClass) =>
       this._detectFocusedItemIndex(e);
     }
 
-    /** @private
+    /**
      * Enables interaction mode if a cells descendant receives focus or keyboard
      * input. Disables it if the event is not related to cell content.
      * @param {!KeyboardEvent|!FocusEvent} e
+     * @private
      */
     _detectInteracting(e) {
       const isInteracting = e.composedPath().some((el) => el.localName === 'vaadin-grid-cell-content');
@@ -765,11 +768,12 @@ export const KeyboardNavigationMixin = (superClass) =>
       }
     }
 
-    /** @private
+    /**
      * Enables or disables the focus target of the containing section of the
      * grid from receiving focus, based on whether the user is interacting with
      * that section of the grid.
      * @param {HTMLElement} focusTarget
+     * @private
      */
     _updateGridSectionFocusTarget(focusTarget) {
       if (!focusTarget) {

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

@@ -3,8 +3,8 @@
  * Copyright (c) 2016 - 2022 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';
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { Grid, GridItemModel } from './vaadin-grid.js';
 
 export type GridRowDetailsRenderer<TItem> = (
   root: HTMLElement,
@@ -14,7 +14,7 @@ export type GridRowDetailsRenderer<TItem> = (
 
 export declare function RowDetailsMixin<TItem, T extends Constructor<HTMLElement>>(
   base: T,
-): T & Constructor<RowDetailsMixinClass<TItem>>;
+): Constructor<RowDetailsMixinClass<TItem>> & T;
 
 export declare class RowDetailsMixinClass<TItem> {
   /**

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

@@ -3,9 +3,9 @@
  * Copyright (c) 2016 - 2022 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 type { Constructor } from '@open-wc/dedupe-mixin';
 
-export declare function ScrollMixin<T extends Constructor<HTMLElement>>(base: T): T & Constructor<ScrollMixinClass>;
+export declare function ScrollMixin<T extends Constructor<HTMLElement>>(base: T): Constructor<ScrollMixinClass> & T;
 
 export declare class ScrollMixinClass {
   /**

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

@@ -69,7 +69,9 @@ export const ScrollMixin = (superClass) =>
         const itemsIndex = e.composedPath().indexOf(this.$.items);
         this._rowWithFocusedElement = e.composedPath()[itemsIndex - 1];
       });
-      this.$.items.addEventListener('focusout', () => (this._rowWithFocusedElement = undefined));
+      this.$.items.addEventListener('focusout', () => {
+        this._rowWithFocusedElement = undefined;
+      });
 
       this.$.table.addEventListener('scroll', () => this._afterScroll());
     }