@vaadin/vaadin-grid 22.0.0-alpha6 → 22.0.0-beta1

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

@@ -3,203 +3,11 @@
  * 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 { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { DirMixin } from '@vaadin/vaadin-element-mixin/vaadin-dir-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);
+import { GridTreeToggle } from '@vaadin/grid/src/vaadin-grid-tree-toggle.js';
 
 /**
- * `<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
+ * @deprecated Import `GridTreeToggle` from `@vaadin/grid/vaadin-grid-tree-toggle` instead.
  */
-class GridTreeToggleElement 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(GridTreeToggleElement.is, GridTreeToggleElement);
+export const GridTreeToggleElement = GridTreeToggle;
 
-export { GridTreeToggleElement };
+export * from '@vaadin/grid/src/vaadin-grid-tree-toggle.js';

package/src/vaadin-grid.d.ts

@@ -1,431 +1,19 @@
-import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
-
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-import { GridDefaultItem, GridDropLocation, GridEventContext, GridItemModel } from './interfaces';
-
-import { A11yMixin } from './vaadin-grid-a11y-mixin.js';
-
-import { ActiveItemMixin } from './vaadin-grid-active-item-mixin.js';
-
-import { ArrayDataProviderMixin } from './vaadin-grid-array-data-provider-mixin.js';
-
-import { ColumnResizingMixin } from './vaadin-grid-column-resizing-mixin.js';
-
-import { DataProviderMixin } from './vaadin-grid-data-provider-mixin.js';
-
-import { DynamicColumnsMixin } from './vaadin-grid-dynamic-columns-mixin.js';
-
-import { EventContextMixin } from './vaadin-grid-event-context-mixin.js';
-
-import { FilterMixin } from './vaadin-grid-filter-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 { KeyboardNavigationMixin } from './vaadin-grid-keyboard-navigation-mixin.js';
-
-import { ColumnReorderingMixin } from './vaadin-grid-column-reordering-mixin.js';
-
-import { GridColumnElement } 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: GridColumnElement<TItem>[] }>;
-
-/**
- * Fired when the grid column resize is finished.
- */
-export type GridColumnResizeEvent<TItem> = CustomEvent<{ resizedColumn: GridColumnElement<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.
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-export type GridDropEvent<TItem> = CustomEvent<{
-  dropTargetItem: TItem;
-  dropLocation: GridDropLocation;
-  dragData: Array<{ type: string; data: string }>;
-}>;
+import { GridDefaultItem } from '@vaadin/grid/src/vaadin-grid.js';
+import { Grid } from '@vaadin/grid/src/vaadin-grid.js';
 
 /**
- * Fired when the `loading` property changes.
+ * @deprecated Import `Grid` from `@vaadin/grid` instead.
  */
-export type GridLoadingChangedEvent = CustomEvent<{ value: boolean }>;
-
-/**
- * Fired when the `selectedItems` property changes.
- */
-export type GridSelectedItemsChangedEvent<TItem> = CustomEvent<{ value: TItem[] }>;
-
-export interface GridElementEventMap<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, GridElementEventMap<TItem> {}
+export type GridElement<TItem = GridDefaultItem> = Grid<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.
+ * @deprecated Import `Grid` from `@vaadin/grid` instead.
  */
-declare class GridElement<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;
-
-  __itemsReceived(): void;
-
-  /**
-   * Updates the `width` of all columns which have `autoWidth` set to `true`.
-   */
-  recalculateColumnWidths(): void;
-
-  _updateRow(
-    row: HTMLTableRowElement,
-    columns: GridColumnElement<TItem>[],
-    section: string | null,
-    isColumnRow: boolean,
-    noNotify: boolean
-  ): void;
-
-  __updateHeaderFooterRowVisibility(row: HTMLTableRowElement | null): void;
-
-  _renderColumnTree(columnTree: GridColumnElement<TItem>[]): void;
-
-  _updateItem(row: HTMLElement, item: TItem | null): void;
-
-  _toggleAttribute(name: string, bool: boolean, node: Element): void;
-
-  __getRowModel(row: HTMLTableRowElement): GridItemModel<TItem>;
-
-  /**
-   * Requests an update for the content of cells.
-   *
-   * While performing the update, the following renderers are invoked:
-   * - `GridElement.rowDetailsRenderer`
-   * - `GridColumnElement.renderer`
-   * - `GridColumnElement.headerRenderer`
-   * - `GridColumnElement.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).
-   */
-  notifyResize(): void;
-
-  __forceReflow(): void;
-
-  addEventListener<K extends keyof GridEventMap<TItem>>(
-    type: K,
-    listener: (this: GridElement<TItem>, ev: GridEventMap<TItem>[K]) => void,
-    options?: boolean | AddEventListenerOptions
-  ): void;
-
-  removeEventListener<K extends keyof GridEventMap<TItem>>(
-    type: K,
-    listener: (this: GridElement<TItem>, ev: GridEventMap<TItem>[K]) => void,
-    options?: boolean | EventListenerOptions
-  ): void;
-}
-
-interface GridElement<TItem = GridDefaultItem>
-  extends ElementMixin,
-    ThemableMixin,
-    A11yMixin,
-    ActiveItemMixin<TItem>,
-    ArrayDataProviderMixin<TItem>,
-    ColumnResizingMixin,
-    DataProviderMixin<TItem>,
-    DynamicColumnsMixin<TItem>,
-    FilterMixin,
-    RowDetailsMixin<TItem>,
-    ScrollMixin,
-    SelectionMixin<TItem>,
-    SortMixin,
-    KeyboardNavigationMixin<TItem>,
-    ColumnReorderingMixin<TItem>,
-    EventContextMixin<TItem>,
-    StylingMixin<TItem>,
-    DragAndDropMixin<TItem> {}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'vaadin-grid': GridElement<GridDefaultItem>;
-  }
-}
+export const GridElement: typeof Grid;
 
-export { GridElement };
+export * from '@vaadin/grid/src/vaadin-grid.js';