@vaadin/grid 24.2.0-alpha9 → 24.2.0-beta2

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

@@ -4,6 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import '@vaadin/checkbox/src/vaadin-checkbox.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { GridColumn } from './vaadin-grid-column.js';
 import { GridSelectionColumnBaseMixin } from './vaadin-grid-selection-column-base-mixin.js';
 
@@ -29,6 +30,8 @@ import { GridSelectionColumnBaseMixin } from './vaadin-grid-selection-column-bas
  *
  * __The default content can also be overridden__
  *
+ * @customElement
+ * @extends GridColumn
  * @mixes GridSelectionColumnBaseMixin
  * @fires {CustomEvent} select-all-changed - Fired when the `selectAll` property changes.
  */
@@ -220,6 +223,6 @@ class GridSelectionColumn extends GridSelectionColumnBaseMixin(GridColumn) {
   }
 }
 
-customElements.define(GridSelectionColumn.is, GridSelectionColumn);
+defineCustomElement(GridSelectionColumn);
 
 export { GridSelectionColumn };

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

@@ -4,6 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import './vaadin-grid-sorter.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { GridColumn } from './vaadin-grid-column.js';
 
 /**
@@ -20,6 +21,9 @@ import { GridColumn } from './vaadin-grid-column.js';
  * ```
  *
  * @fires {CustomEvent} direction-changed - Fired when the `direction` property changes.
+ *
+ * @customElement
+ * @extends GridColumn
  */
 class GridSortColumn extends GridColumn {
   static get is() {
@@ -113,6 +117,6 @@ class GridSortColumn extends GridColumn {
   }
 }
 
-customElements.define(GridSortColumn.is, GridSortColumn);
+defineCustomElement(GridSortColumn);
 
 export { GridSortColumn };

package/src/vaadin-grid-sorter.js

@@ -4,6 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
@@ -61,6 +62,7 @@ document.head.appendChild(template.content);
  * @fires {CustomEvent} direction-changed - Fired when the `direction` property changes.
  * @fires {CustomEvent} sorter-changed - Fired when the `path` or `direction` property changes.
  *
+ * @customElement
  * @extends HTMLElement
  */
 class GridSorter extends ThemableMixin(DirMixin(PolymerElement)) {
@@ -245,6 +247,6 @@ class GridSorter extends ThemableMixin(DirMixin(PolymerElement)) {
   }
 }
 
-customElements.define(GridSorter.is, GridSorter);
+defineCustomElement(GridSorter);
 
 export { GridSorter };

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

@@ -4,6 +4,8 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import './vaadin-grid-tree-toggle.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { get } from '@vaadin/component-base/src/path-utils.js';
 import { GridColumn } from './vaadin-grid-column.js';
 
 /**
@@ -18,6 +20,8 @@ import { GridColumn } from './vaadin-grid-column.js';
  *  <vaadin-grid-column>
  *    ...
  * ```
+ * @customElement
+ * @extends GridColumn
  */
 class GridTreeColumn extends GridColumn {
   static get is() {
@@ -101,10 +105,10 @@ class GridTreeColumn extends GridColumn {
 
   /** @private */
   __getToggleContent(path, item) {
-    return path && this.get(path, item);
+    return path && get(path, item);
   }
 }
 
-customElements.define(GridTreeColumn.is, GridTreeColumn);
+defineCustomElement(GridTreeColumn);
 
 export { GridTreeColumn };

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

@@ -4,6 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.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';
@@ -71,6 +72,7 @@ document.head.appendChild(template.content);
  *
  * @fires {CustomEvent} expanded-changed - Fired when the `expanded` property changes.
  *
+ * @customElement
  * @extends HTMLElement
  * @mixes ThemableMixin
  */
@@ -207,6 +209,6 @@ class GridTreeToggle extends ThemableMixin(DirMixin(PolymerElement)) {
   }
 }
 
-customElements.define(GridTreeToggle.is, GridTreeToggle);
+defineCustomElement(GridTreeToggle);
 
 export { GridTreeToggle };

package/src/vaadin-grid.d.ts

@@ -4,165 +4,16 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { DisabledMixinClass } from '@vaadin/a11y-base/src/disabled-mixin.js';
+import type { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
 import type { ElementMixinClass } from '@vaadin/component-base/src/element-mixin.js';
 import type { ThemableMixinClass } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import type { ThemePropertyMixinClass } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
-import type { ActiveItemMixinClass } from './vaadin-grid-active-item-mixin.js';
-import type { ArrayDataProviderMixinClass } from './vaadin-grid-array-data-provider-mixin.js';
-import type { GridColumn } from './vaadin-grid-column.js';
-import { GridBodyRenderer, GridHeaderFooterRenderer } from './vaadin-grid-column.js';
-import type { ColumnReorderingMixinClass } from './vaadin-grid-column-reordering-mixin.js';
-import type { DataProviderMixinClass } from './vaadin-grid-data-provider-mixin.js';
-import {
-  GridDataProvider,
-  GridDataProviderCallback,
-  GridDataProviderParams,
-  GridFilterDefinition,
-  GridSorterDefinition,
-  GridSorterDirection,
-} from './vaadin-grid-data-provider-mixin.js';
-import type { DragAndDropMixinClass } from './vaadin-grid-drag-and-drop-mixin.js';
-import { GridDragAndDropFilter, GridDropLocation, GridDropMode } from './vaadin-grid-drag-and-drop-mixin.js';
-import type { EventContextMixinClass } from './vaadin-grid-event-context-mixin.js';
-import { GridEventContext } from './vaadin-grid-event-context-mixin.js';
-import type { RowDetailsMixinClass } from './vaadin-grid-row-details-mixin.js';
-import { GridRowDetailsRenderer } from './vaadin-grid-row-details-mixin.js';
-import type { ScrollMixinClass } from './vaadin-grid-scroll-mixin.js';
-import type { SelectionMixinClass } from './vaadin-grid-selection-mixin.js';
-import type { SortMixinClass } from './vaadin-grid-sort-mixin.js';
-import type {
-  GridCellClassNameGenerator,
-  GridCellPartNameGenerator,
-  StylingMixinClass,
-} from './vaadin-grid-styling-mixin.js';
+import type { GridEventMap, GridMixinClass } from './vaadin-grid-mixin.js';
 
-export {
-  GridBodyRenderer,
-  GridCellClassNameGenerator,
-  GridCellPartNameGenerator,
-  GridDataProvider,
-  GridDataProviderCallback,
-  GridDataProviderParams,
-  GridDragAndDropFilter,
-  GridDropLocation,
-  GridDropMode,
-  GridEventContext,
-  GridFilterDefinition,
-  GridHeaderFooterRenderer,
-  GridRowDetailsRenderer,
-  GridSorterDefinition,
-  GridSorterDirection,
-};
+export * from './vaadin-grid-mixin.js';
 
 export type GridDefaultItem = any;
 
-export interface GridItemModel<TItem> {
-  index: number;
-  item: TItem;
-  selected?: boolean;
-  expanded?: boolean;
-  level?: number;
-  detailsOpened?: boolean;
-}
-
-/**
- * Fired when the `activeItem` property changes.
- */
-export type GridActiveItemChangedEvent<TItem> = CustomEvent<{ value: TItem | null | undefined }>;
-
-/**
- * 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: Array<GridColumn<TItem>> }>;
-
-/**
- * Fired when the grid column resize is finished.
- */
-export type GridColumnResizeEvent<TItem> = CustomEvent<{ resizedColumn: GridColumn<TItem> }>;
-
-/**
- * Fired when the `dataProvider` property changes.
- */
-export type GridDataProviderChangedEvent<TItem> = CustomEvent<{ value: GridDataProvider<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[] }>;
-
-/**
- * Fired when the `size` property changes.
- */
-export type GridSizeChangedEvent = CustomEvent<{ value: number }>;
-
-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>;
-
-  'data-provider-changed': GridDataProviderChangedEvent<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>;
-
-  'size-changed': GridSizeChangedEvent;
-}
-
-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.
@@ -400,33 +251,6 @@ export interface GridEventMap<TItem> extends HTMLElementEventMap, GridCustomEven
  * @fires {CustomEvent} size-changed - Fired when the `size` 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;
-
   addEventListener<K extends keyof GridEventMap<TItem>>(
     type: K,
     listener: (this: Grid<TItem>, ev: GridEventMap<TItem>[K]) => void,
@@ -445,17 +269,8 @@ interface Grid<TItem = GridDefaultItem>
     ElementMixinClass,
     ThemableMixinClass,
     ThemePropertyMixinClass,
-    ActiveItemMixinClass<TItem>,
-    ArrayDataProviderMixinClass<TItem>,
-    DataProviderMixinClass<TItem>,
-    RowDetailsMixinClass<TItem>,
-    ScrollMixinClass,
-    SelectionMixinClass<TItem>,
-    SortMixinClass,
-    ColumnReorderingMixinClass,
-    EventContextMixinClass<TItem>,
-    StylingMixinClass<TItem>,
-    DragAndDropMixinClass<TItem> {}
+    ControllerMixinClass,
+    GridMixinClass<TItem> {}
 
 declare global {
   interface HTMLElementTagNameMap {