@vaadin/grid 23.2.0-dev.8a7678b70 → 23.3.0-alpha1

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.3.0-alpha1",
   "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.3.0-alpha1",
+    "@vaadin/component-base": "23.3.0-alpha1",
+    "@vaadin/lit-renderer": "23.3.0-alpha1",
+    "@vaadin/text-field": "23.3.0-alpha1",
+    "@vaadin/vaadin-lumo-styles": "23.3.0-alpha1",
+    "@vaadin/vaadin-material-styles": "23.3.0-alpha1",
+    "@vaadin/vaadin-themable-mixin": "23.3.0-alpha1"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/polymer-legacy-adapter": "23.2.0-dev.8a7678b70",
+    "@vaadin/polymer-legacy-adapter": "23.3.0-alpha1",
     "@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": "beabc527d4b1274eb798ff701d406fed45cfe638"
 }

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

@@ -32,7 +32,7 @@ export const ColumnReorderingMixin = (superClass) =>
     }
 
     static get observers() {
-      return ['_updateOrders(_columnTree, _columnTree.*)'];
+      return ['_updateOrders(_columnTree)'];
     }
 
     /** @protected */
@@ -120,12 +120,12 @@ export const ColumnReorderingMixin = (superClass) =>
 
       // Cancel reordering if there are draggable nodes on the event path
       const path = e.composedPath && e.composedPath();
-      if (path && path.filter((node) => node.hasAttribute && node.hasAttribute('draggable'))[0]) {
+      if (path && path.some((node) => node.hasAttribute && node.hasAttribute('draggable'))) {
         return;
       }
 
       const headerCell = this._cellFromPoint(e.detail.x, e.detail.y);
-      if (!headerCell || headerCell.getAttribute('part').indexOf('header-cell') === -1) {
+      if (!headerCell || !headerCell.getAttribute('part').includes('header-cell')) {
         return;
       }
 
@@ -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 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,18 +278,22 @@ export const ColumnReorderingMixin = (superClass) =>
         'border',
         'flex-direction',
         'overflow',
-      ].forEach((propertyName) => (ghost.style[propertyName] = style[propertyName]));
+      ].forEach((propertyName) => {
+        ghost.style[propertyName] = style[propertyName];
+      });
       return ghost;
     }
 
     /** @private */
-    _updateOrders(columnTree, splices) {
-      if (columnTree === undefined || splices === undefined) {
+    _updateOrders(columnTree) {
+      if (columnTree === undefined) {
         return;
       }
 
       // 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 */
@@ -333,9 +354,9 @@ export const ColumnReorderingMixin = (superClass) =>
      * @protected
      */
     _isSwappableByPosition(targetColumn, clientX) {
-      const targetCell = Array.from(this.$.header.querySelectorAll('tr:not([hidden]) [part~="cell"]')).filter((cell) =>
+      const targetCell = Array.from(this.$.header.querySelectorAll('tr:not([hidden]) [part~="cell"]')).find((cell) =>
         targetColumn.contains(cell._column),
-      )[0];
+      );
       const sourceCellRect = this.$.header
         .querySelector('tr:not([hidden]) [reorder-status=dragging]')
         .getBoundingClientRect();
@@ -352,9 +373,7 @@ export const ColumnReorderingMixin = (superClass) =>
      * @protected
      */
     _swapColumnOrders(column1, column2) {
-      const _order = column1._order;
-      column1._order = column2._order;
-      column2._order = _order;
+      [column1._order, column2._order] = [column2._order, column1._order];
       this._updateFrozenColumn();
       this._updateFirstAndLastColumn();
     }

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

@@ -52,7 +52,7 @@ export const ColumnResizingMixin = (superClass) =>
 
         const eventX = e.detail.x;
         const columnRowCells = Array.from(this.$.header.querySelectorAll('[part~="row"]:last-child [part~="cell"]'));
-        const targetCell = columnRowCells.filter((cell) => cell._column === column)[0];
+        const targetCell = columnRowCells.find((cell) => cell._column === column);
         // Resize the target column
         if (targetCell.offsetWidth) {
           const style = getComputedStyle(targetCell._content);

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

@@ -196,7 +196,7 @@ export const DragAndDropMixin = (superClass) =>
           return;
         }
 
-        let row = e.composedPath().filter((node) => node.localName === 'tr')[0];
+        let row = e.composedPath().find((node) => node.localName === 'tr');
 
         if (!this._effectiveSize || this.dropMode === DropMode.ON_GRID) {
           // The grid is empty or "on-grid" drop mode was used, always default to "empty"
@@ -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-event-context-mixin.js

@@ -42,9 +42,9 @@ export const EventContextMixin = (superClass) =>
         return context;
       }
 
-      context.section = ['body', 'header', 'footer', 'details'].filter(
+      context.section = ['body', 'header', 'footer', 'details'].find(
         (section) => cell.getAttribute('part').indexOf(section) > -1,
-      )[0];
+      );
 
       if (cell._column) {
         context.column = cell._column;

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;
 }