@vaadin/grid 22.0.0-alpha7

package/src/vaadin-grid-tree-toggle.js

@@ -0,0 +1,205 @@
+/**
+ * @license
+ * 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 { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { isFocusable } from './vaadin-grid-active-item-mixin.js';
+
+const $_documentContainer = document.createElement('template');
+
+$_documentContainer.innerHTML = `
+  <style>
+    @font-face {
+      font-family: "vaadin-grid-tree-icons";
+      src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAQkAA0AAAAABrwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAECAAAABoAAAAcgHwa6EdERUYAAAPsAAAAHAAAAB4AJwAOT1MvMgAAAZQAAAA/AAAAYA8TBIJjbWFwAAAB8AAAAFUAAAFeGJvXWmdhc3AAAAPkAAAACAAAAAgAAAAQZ2x5ZgAAAlwAAABLAAAAhIrPOhFoZWFkAAABMAAAACsAAAA2DsJI02hoZWEAAAFcAAAAHQAAACQHAgPHaG10eAAAAdQAAAAZAAAAHAxVAgBsb2NhAAACSAAAABIAAAASAIAAVG1heHAAAAF8AAAAGAAAACAACgAFbmFtZQAAAqgAAAECAAACTwflzbdwb3N0AAADrAAAADYAAABZQ7Ajh3icY2BkYGAA4twv3Vfi+W2+MnCzMIDANSOmbGSa2YEZRHEwMIEoAAoiB6sAeJxjYGRgYD7w/wADAwsDCDA7MDAyoAI2AFEEAtIAAAB4nGNgZGBg4GBgZgDRDAxMDGgAAAGbABB4nGNgZp7JOIGBlYGBaSbTGQYGhn4IzfiawZiRkwEVMAqgCTA4MDA+38d84P8BBgdmIAapQZJVYGAEAGc/C54AeJxjYYAAxlAIzQTELAwMBxgZGB0ACy0BYwAAAHicY2BgYGaAYBkGRgYQiADyGMF8FgYbIM3FwMHABISMDArP9/3/+/8/WJXC8z0Q9v8nEp5gHVwMMMAIMo+RDYiZoQJMQIKJARUA7WBhGN4AACFKDtoAAAAAAAAAAAgACAAQABgAJgA0AEIAAHichYvBEYBADAKBVHBjBT4swl9KS2k05o0XHd/yW1hAfBFwCv9sIlJu3nZaNS3PXAaXXHI8Lge7DlzF7C1RgXc7xkK6+gvcD2URmQB4nK2RQWoCMRiFX3RUqtCli65yADModOMBLLgQSqHddRFnQghIAnEUvEA3vUUP0LP0Fj1G+yb8R5iEhO9/ef/7FwFwj28o9EthiVp4hBlehcfUP4Ur8o/wBAv8CU+xVFvhOR7UB7tUdUdlVRJ6HnHWTnhM/V24In8JT5j/KzzFSi2E53hUz7jCcrcIiDDwyKSW1JEct2HdIPH1DFytbUM0PofWdNk5E5oUqb/Q6HHBiVGZpfOXkyUMEj5IyBuNmYZQjBobfsuassvnkKLe1OuBBj0VQ8cRni2xjLWsHaM0jrjx3peYA0/vrdmUYqe9iy7bzrX6eNP7Jh1SijX+AaUVbB8AAHicY2BiwA84GBgYmRiYGJkZmBlZGFkZ2djScyoLMgzZS/MyDQwMwLSruZMzlHaB0q4A76kLlwAAAAEAAf//AA94nGNgZGBg4AFiMSBmYmAEQnYgZgHzGAAD6wA2eJxjYGBgZACCKxJigiD6mhFTNowGACmcA/8AAA==) format('woff');
+      font-weight: normal;
+      font-style: normal;
+    }
+  </style>
+`;
+
+document.head.appendChild($_documentContainer.content);
+
+/**
+ * `<vaadin-grid-tree-toggle>` is a helper element for the `<vaadin-grid>`
+ * that provides toggle and level display functionality for the item tree.
+ *
+ * #### Example:
+ * ```html
+ * <vaadin-grid-column id="column"></vaadin-grid-column>
+ * ```
+ * ```js
+ * const column = document.querySelector('#column');
+ * column.renderer = (root, column, model) => {
+ *   let treeToggle = root.firstElementChild;
+ *   if (!treeToggle) {
+ *     treeToggle = document.createElement('vaadin-grid-tree-toggle');
+ *     treeToggle.addEventListener('expanded-changed', () => { ... });
+ *     root.appendChild(treeToggle);
+ *   }
+ *   treeToggle.leaf = !model.item.hasChildren;
+ *   treeToggle.level = level;
+ *   treeToggle.expanded = expanded;
+ *   treeToggle.textContent = model.item.name;
+ * };
+ * ```
+ *
+ * ### Styling
+ *
+ * The following shadow DOM parts are available for styling:
+ *
+ * Part name | Description
+ * ---|---
+ * `toggle` | The tree toggle icon
+ *
+ * The following state attributes are available for styling:
+ *
+ * Attribute    | Description | Part name
+ * ---|---|---
+ * `expanded` | When present, the toggle is expanded | :host
+ * `leaf` | When present, the toggle is not expandable, i. e., the current item is a leaf | :host
+ *
+ * The following custom CSS properties are available on
+ * the `<vaadin-grid-tree-toggle>` element:
+ *
+ * Custom CSS property | Description | Default
+ * ---|---|---
+ * `--vaadin-grid-tree-toggle-level-offset` | Visual offset step for each tree sublevel | `1em`
+ *
+ * @fires {CustomEvent} expanded-changed - Fired when the `expanded` property changes.
+ *
+ * @extends HTMLElement
+ * @mixes ThemableMixin
+ */
+class GridTreeToggle extends ThemableMixin(DirMixin(PolymerElement)) {
+  static get template() {
+    return html`
+      <style>
+        :host {
+          display: inline-flex;
+          align-items: baseline;
+
+          /* CSS API for :host */
+          --vaadin-grid-tree-toggle-level-offset: 1em;
+          --_collapsed-icon: '\\e7be\\00a0';
+        }
+
+        :host([dir='rtl']) {
+          --_collapsed-icon: '\\e7bd\\00a0';
+        }
+
+        :host([hidden]) {
+          display: none !important;
+        }
+
+        :host(:not([leaf])) {
+          cursor: pointer;
+        }
+
+        #level-spacer,
+        [part='toggle'] {
+          flex: none;
+        }
+
+        #level-spacer {
+          display: inline-block;
+          width: calc(var(---level, '0') * var(--vaadin-grid-tree-toggle-level-offset));
+        }
+
+        [part='toggle']::before {
+          font-family: 'vaadin-grid-tree-icons';
+          line-height: 1em; /* make icon font metrics not affect baseline */
+        }
+
+        :host(:not([expanded])) [part='toggle']::before {
+          content: var(--_collapsed-icon);
+        }
+
+        :host([expanded]) [part='toggle']::before {
+          content: '\\e7bc\\00a0'; /* icon glyph + single non-breaking space */
+        }
+
+        :host([leaf]) [part='toggle'] {
+          visibility: hidden;
+        }
+      </style>
+
+      <span id="level-spacer"></span>
+      <span part="toggle"></span>
+      <slot></slot>
+    `;
+  }
+
+  static get is() {
+    return 'vaadin-grid-tree-toggle';
+  }
+
+  static get properties() {
+    return {
+      /**
+       * Current level of the tree represented with a horizontal offset
+       * of the toggle button.
+       * @type {number}
+       */
+      level: {
+        type: Number,
+        value: 0,
+        observer: '_levelChanged'
+      },
+
+      /**
+       * Hides the toggle icon and disables toggling a tree sublevel.
+       * @type {boolean}
+       */
+      leaf: {
+        type: Boolean,
+        value: false,
+        reflectToAttribute: true
+      },
+
+      /**
+       * Sublevel toggle state.
+       * @type {boolean}
+       */
+      expanded: {
+        type: Boolean,
+        value: false,
+        reflectToAttribute: true,
+        notify: true
+      }
+    };
+  }
+
+  /** @protected */
+  ready() {
+    super.ready();
+
+    this.addEventListener('click', (e) => this._onClick(e));
+  }
+
+  /** @private */
+  _onClick(e) {
+    if (this.leaf) {
+      return;
+    }
+    if (isFocusable(e.target)) {
+      return;
+    }
+
+    e.preventDefault();
+    this.expanded = !this.expanded;
+  }
+
+  /** @private */
+  _levelChanged(level) {
+    const value = Number(level).toString();
+    this.style.setProperty('---level', value);
+  }
+}
+
+customElements.define(GridTreeToggle.is, GridTreeToggle);
+
+export { GridTreeToggle };

package/src/vaadin-grid.d.ts

@@ -0,0 +1,397 @@
+import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+import { GridDefaultItem, GridDropLocation, GridEventContext, GridItemModel } from './interfaces';
+
+import { ActiveItemMixin } from './vaadin-grid-active-item-mixin.js';
+
+import { ArrayDataProviderMixin } from './vaadin-grid-array-data-provider-mixin.js';
+
+import { DataProviderMixin } from './vaadin-grid-data-provider-mixin.js';
+
+import { EventContextMixin } from './vaadin-grid-event-context-mixin.js';
+
+import { RowDetailsMixin } from './vaadin-grid-row-details-mixin.js';
+
+import { ScrollMixin } from './vaadin-grid-scroll-mixin.js';
+
+import { SelectionMixin } from './vaadin-grid-selection-mixin.js';
+
+import { SortMixin } from './vaadin-grid-sort-mixin.js';
+
+import { StylingMixin } from './vaadin-grid-styling-mixin.js';
+
+import { DragAndDropMixin } from './vaadin-grid-drag-and-drop-mixin.js';
+
+import { ColumnReorderingMixin } from './vaadin-grid-column-reordering-mixin.js';
+
+import { GridColumn } from './vaadin-grid-column.js';
+
+/**
+ * Fired when the `activeItem` property changes.
+ */
+export type GridActiveItemChangedEvent<TItem> = CustomEvent<{ value: TItem }>;
+
+/**
+ * Fired when the cell is activated with click or keyboard.
+ */
+export type GridCellActivateEvent<TItem> = CustomEvent<{ model: GridItemModel<TItem> }>;
+
+/**
+ * Fired when a cell is focused with click or keyboard navigation.
+ */
+export type GridCellFocusEvent<TItem> = CustomEvent<{ context: GridEventContext<TItem> }>;
+
+/**
+ * Fired when the columns in the grid are reordered.
+ */
+export type GridColumnReorderEvent<TItem> = CustomEvent<{ columns: GridColumn<TItem>[] }>;
+
+/**
+ * Fired when the grid column resize is finished.
+ */
+export type GridColumnResizeEvent<TItem> = CustomEvent<{ resizedColumn: GridColumn<TItem> }>;
+
+/**
+ * Fired when the `expandedItems` property changes.
+ */
+export type GridExpandedItemsChangedEvent<TItem> = CustomEvent<{ value: TItem[] }>;
+
+/**
+ * Fired when starting to drag grid rows.
+ */
+export type GridDragStartEvent<TItem> = CustomEvent<{
+  draggedItems: TItem[];
+  setDraggedItemsCount: (count: number) => void;
+  setDragData: (type: string, data: string) => void;
+}>;
+
+/**
+ * Fired when a drop occurs on top of the grid.
+ */
+export type GridDropEvent<TItem> = CustomEvent<{
+  dropTargetItem: TItem;
+  dropLocation: GridDropLocation;
+  dragData: Array<{ type: string; data: string }>;
+}>;
+
+/**
+ * Fired when the `loading` property changes.
+ */
+export type GridLoadingChangedEvent = CustomEvent<{ value: boolean }>;
+
+/**
+ * Fired when the `selectedItems` property changes.
+ */
+export type GridSelectedItemsChangedEvent<TItem> = CustomEvent<{ value: TItem[] }>;
+
+export interface GridCustomEventMap<TItem> {
+  'active-item-changed': GridActiveItemChangedEvent<TItem>;
+
+  'cell-activate': GridCellActivateEvent<TItem>;
+
+  'cell-focus': GridCellFocusEvent<TItem>;
+
+  'column-reorder': GridColumnReorderEvent<TItem>;
+
+  'column-resize': GridColumnResizeEvent<TItem>;
+
+  'expanded-items-changed': GridExpandedItemsChangedEvent<TItem>;
+
+  'grid-dragstart': GridDragStartEvent<TItem>;
+
+  'grid-dragend': Event;
+
+  'grid-drop': GridDropEvent<TItem>;
+
+  'loading-changed': GridLoadingChangedEvent;
+
+  'selected-items-changed': GridSelectedItemsChangedEvent<TItem>;
+}
+
+export interface GridEventMap<TItem> extends HTMLElementEventMap, GridCustomEventMap<TItem> {}
+
+/**
+ * `<vaadin-grid>` is a free, high quality data grid / data table Web Component. The content of the
+ * the grid can be populated by using renderer callback function.
+ *
+ * ### Quick Start
+ *
+ * Start with an assigning an array to the [`items`](#/elements/vaadin-grid#property-items) property to visualize your data.
+ *
+ * Use the [`<vaadin-grid-column>`](#/elements/vaadin-grid-column) element to configure the grid columns. Set `path` and `header`
+ * shorthand properties for the columns to define what gets rendered in the cells of the column.
+ *
+ * #### Example:
+ * ```html
+ * <vaadin-grid>
+ *   <vaadin-grid-column path="name.first" header="First name"></vaadin-grid-column>
+ *   <vaadin-grid-column path="name.last" header="Last name"></vaadin-grid-column>
+ *   <vaadin-grid-column path="email"></vaadin-grid-column>
+ * </vaadin-grid>
+ * ```
+ *
+ * For custom content `vaadin-grid-column` element provides you with three types of `renderer` callback functions: `headerRenderer`,
+ * `renderer` and `footerRenderer`.
+ *
+ * Each of those renderer functions provides `root`, `column`, `model` arguments when applicable.
+ * Generate DOM content, append it to the `root` element and control the state
+ * of the host element by accessing `column`. Before generating new content,
+ * users are able to check if there is already content in `root` for reusing it.
+ *
+ * Renderers are called on initialization of new column cells and each time the
+ * related row model is updated. DOM generated during the renderer call can be reused
+ * in the next renderer call and will be provided with the `root` argument.
+ * On first call it will be empty.
+ *
+ * #### Example:
+ * ```html
+ * <vaadin-grid>
+ *   <vaadin-grid-column></vaadin-grid-column>
+ *   <vaadin-grid-column></vaadin-grid-column>
+ *   <vaadin-grid-column></vaadin-grid-column>
+ * </vaadin-grid>
+ * ```
+ * ```js
+ * const grid = document.querySelector('vaadin-grid');
+ * grid.items = [{'name': 'John', 'surname': 'Lennon', 'role': 'singer'},
+ *               {'name': 'Ringo', 'surname': 'Starr', 'role': 'drums'}];
+ *
+ * const columns = grid.querySelectorAll('vaadin-grid-column');
+ *
+ * columns[0].headerRenderer = function(root) {
+ *   root.textContent = 'Name';
+ * };
+ * columns[0].renderer = function(root, column, model) {
+ *   root.textContent = model.item.name;
+ * };
+ *
+ * columns[1].headerRenderer = function(root) {
+ *   root.textContent = 'Surname';
+ * };
+ * columns[1].renderer = function(root, column, model) {
+ *   root.textContent = model.item.surname;
+ * };
+ *
+ * columns[2].headerRenderer = function(root) {
+ *   root.textContent = 'Role';
+ * };
+ * columns[2].renderer = function(root, column, model) {
+ *   root.textContent = model.item.role;
+ * };
+ * ```
+ *
+ * The following properties are available in the `model` argument:
+ *
+ * Property name | Type | Description
+ * --------------|------|------------
+ * `index`| Number | The index of the item.
+ * `item` | String or Object | The item.
+ * `level` | Number | Number of the item's tree sublevel, starts from 0.
+ * `expanded` | Boolean | True if the item's tree sublevel is expanded.
+ * `selected` | Boolean | True if the item is selected.
+ * `detailsOpened` | Boolean | True if the item's row details are open.
+ *
+ * The following helper elements can be used for further customization:
+ * - [`<vaadin-grid-column-group>`](#/elements/vaadin-grid-column-group)
+ * - [`<vaadin-grid-filter>`](#/elements/vaadin-grid-filter)
+ * - [`<vaadin-grid-sorter>`](#/elements/vaadin-grid-sorter)
+ * - [`<vaadin-grid-selection-column>`](#/elements/vaadin-grid-selection-column)
+ * - [`<vaadin-grid-tree-toggle>`](#/elements/vaadin-grid-tree-toggle)
+ *
+ * __Note that the helper elements must be explicitly imported.__
+ * If you want to import everything at once you can use the `all-imports.html` bundle.
+ *
+ * ### Lazy Loading with Function Data Provider
+ *
+ * In addition to assigning an array to the items property, you can alternatively
+ * provide the `<vaadin-grid>` data through the
+ * [`dataProvider`](#/elements/vaadin-grid#property-dataProvider) function property.
+ * The `<vaadin-grid>` calls this function lazily, only when it needs more data
+ * to be displayed.
+ *
+ * See the [`dataProvider`](#/elements/vaadin-grid#property-dataProvider) in
+ * the API reference below for the detailed data provider arguments description,
+ * and the “Assigning Data” page in the demos.
+ *
+ * __Note that expanding the tree grid's item will trigger a call to the `dataProvider`.__
+ *
+ * __Also, note that when using function data providers, the total number of items
+ * needs to be set manually. The total number of items can be returned
+ * in the second argument of the data provider callback:__
+ *
+ * ```javascript
+ * grid.dataProvider = function(params, callback) {
+ *   const url = 'https://api.example/data' +
+ *       '?page=' + params.page +        // the requested page index
+ *       '&per_page=' + params.pageSize; // number of items on the page
+ *   const xhr = new XMLHttpRequest();
+ *   xhr.onload = function() {
+ *     const response = JSON.parse(xhr.responseText);
+ *     callback(
+ *       response.employees, // requested page of items
+ *       response.totalSize  // total number of items
+ *     );
+ *   };
+ *   xhr.open('GET', url, true);
+ *   xhr.send();
+ * };
+ * ```
+ *
+ * __Alternatively, you can use the `size` property to set the total number of items:__
+ *
+ * ```javascript
+ * grid.size = 200; // The total number of items
+ * grid.dataProvider = function(params, callback) {
+ *   const url = 'https://api.example/data' +
+ *       '?page=' + params.page +        // the requested page index
+ *       '&per_page=' + params.pageSize; // number of items on the page
+ *   const xhr = new XMLHttpRequest();
+ *   xhr.onload = function() {
+ *     const response = JSON.parse(xhr.responseText);
+ *     callback(response.employees);
+ *   };
+ *   xhr.open('GET', url, true);
+ *   xhr.send();
+ * };
+ * ```
+ *
+ * ### Styling
+ *
+ * The following shadow DOM parts are available for styling:
+ *
+ * Part name | Description
+ * ----------------|----------------
+ * `row` | Row in the internal table
+ * `cell` | Cell in the internal table
+ * `header-cell` | Header cell in the internal table
+ * `body-cell` | Body cell in the internal table
+ * `footer-cell` | Footer cell in the internal table
+ * `details-cell` | Row details cell in the internal table
+ * `resize-handle` | Handle for resizing the columns
+ * `reorder-ghost` | Ghost element of the header cell being dragged
+ *
+ * The following state attributes are available for styling:
+ *
+ * Attribute    | Description | Part name
+ * -------------|-------------|------------
+ * `loading` | Set when the grid is loading data from data provider | :host
+ * `interacting` | Keyboard navigation in interaction mode | :host
+ * `navigating` | Keyboard navigation in navigation mode | :host
+ * `overflow` | Set when rows are overflowing the grid viewport. Possible values: `top`, `bottom`, `left`, `right` | :host
+ * `reordering` | Set when the grid's columns are being reordered | :host
+ * `dragover` | Set when the grid (not a specific row) is dragged over | :host
+ * `dragging-rows` : Set when grid rows are dragged  | :host
+ * `reorder-status` | Reflects the status of a cell while columns are being reordered | cell
+ * `frozen` | Frozen cell | cell
+ * `last-frozen` | Last frozen cell | cell
+ * * `first-column` | First visible cell on a row | cell
+ * `last-column` | Last visible cell on a row | cell
+ * `selected` | Selected row | row
+ * `expanded` | Expanded row | row
+ * `details-opened` | Row with details open | row
+ * `loading` | Row that is waiting for data from data provider | row
+ * `odd` | Odd row | row
+ * `first` | The first body row | row
+ * `dragstart` | Set for one frame when drag of a row is starting. The value is a number when multiple rows are dragged | row
+ * `dragover` | Set when the row is dragged over | row
+ * `drag-disabled` | Set to a row that isn't available for dragging | row
+ * `drop-disabled` | Set to a row that can't be dropped on top of | row
+ *
+ * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
+ *
+ * @fires {CustomEvent} active-item-changed - Fired when the `activeItem` property changes.
+ * @fires {CustomEvent} cell-activate - Fired when the cell is activated with click or keyboard.
+ * @fires {CustomEvent} cell-focus - Fired when a cell is focused with click or keyboard navigation.
+ * @fires {CustomEvent} column-reorder - Fired when the columns in the grid are reordered.
+ * @fires {CustomEvent} column-resize - Fired when the grid column resize is finished.
+ * @fires {CustomEvent} expanded-items-changed - Fired when the `expandedItems` property changes.
+ * @fires {CustomEvent} grid-dragstart - Fired when starting to drag grid rows.
+ * @fires {CustomEvent} grid-dragend - Fired when the dragging of the rows ends.
+ * @fires {CustomEvent} grid-drop - Fired when a drop occurs on top of the grid.
+ * @fires {CustomEvent} loading-changed - Fired when the `loading` property changes.
+ * @fires {CustomEvent} selected-items-changed - Fired when the `selectedItems` property changes.
+ */
+declare class Grid<TItem = GridDefaultItem> extends HTMLElement {
+  /**
+   * If true, the grid's height is defined by its rows.
+   *
+   * Effectively, this disables the grid's virtual scrolling so that all the rows are rendered in the DOM at once.
+   * If the grid has a large number of items, using the feature is discouraged to avoid performance issues.
+   * @attr {boolean} all-rows-visible
+   */
+  allRowsVisible: boolean;
+
+  /**
+   * Updates the `width` of all columns which have `autoWidth` set to `true`.
+   */
+  recalculateColumnWidths(): void;
+
+  /**
+   * Requests an update for the content of cells.
+   *
+   * While performing the update, the following renderers are invoked:
+   * - `Grid.rowDetailsRenderer`
+   * - `GridColumn.renderer`
+   * - `GridColumn.headerRenderer`
+   * - `GridColumn.footerRenderer`
+   *
+   * It is not guaranteed that the update happens immediately (synchronously) after it is requested.
+   */
+  requestContentUpdate(): void;
+
+  /**
+   * Manually invoke existing renderers for all the columns
+   * (header, footer and body cells) and opened row details.
+   *
+   * @deprecated Since Vaadin 21, `render()` is deprecated. Please use `requestContentUpdate()` instead.
+   */
+  render(): void;
+
+  /**
+   * Updates the computed metrics and positioning of internal grid parts
+   * (row/details cell positioning etc). Needs to be invoked whenever the sizing of grid
+   * content changes asynchronously to ensure consistent appearance (e.g. when a
+   * contained image whose bounds aren't known beforehand finishes loading).
+   *
+   * @deprecated Since Vaadin 22, `notifyResize()` is deprecated. The component uses a
+   * ResizeObserver internally and doesn't need to be explicitly notified of resizes.
+   */
+  notifyResize(): void;
+
+  addEventListener<K extends keyof GridEventMap<TItem>>(
+    type: K,
+    listener: (this: Grid<TItem>, ev: GridEventMap<TItem>[K]) => void,
+    options?: boolean | AddEventListenerOptions
+  ): void;
+
+  removeEventListener<K extends keyof GridEventMap<TItem>>(
+    type: K,
+    listener: (this: Grid<TItem>, ev: GridEventMap<TItem>[K]) => void,
+    options?: boolean | EventListenerOptions
+  ): void;
+}
+
+interface Grid<TItem = GridDefaultItem>
+  extends ElementMixin,
+    ThemableMixin,
+    ActiveItemMixin<TItem>,
+    ArrayDataProviderMixin<TItem>,
+    DataProviderMixin<TItem>,
+    RowDetailsMixin<TItem>,
+    ScrollMixin,
+    SelectionMixin<TItem>,
+    SortMixin,
+    ColumnReorderingMixin,
+    EventContextMixin<TItem>,
+    StylingMixin<TItem>,
+    DragAndDropMixin<TItem> {}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vaadin-grid': Grid<GridDefaultItem>;
+  }
+}
+
+export { Grid };