@vaadin/grid 24.2.0-dev.f254716fe → 24.3.0-alpha1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/grid",
-  "version": "24.2.0-dev.f254716fe",
+  "version": "24.3.0-alpha1",
   "publishConfig": {
     "access": "public"
   },
@@ -46,18 +46,18 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.2.0-dev.f254716fe",
-    "@vaadin/checkbox": "24.2.0-dev.f254716fe",
-    "@vaadin/component-base": "24.2.0-dev.f254716fe",
-    "@vaadin/lit-renderer": "24.2.0-dev.f254716fe",
-    "@vaadin/text-field": "24.2.0-dev.f254716fe",
-    "@vaadin/vaadin-lumo-styles": "24.2.0-dev.f254716fe",
-    "@vaadin/vaadin-material-styles": "24.2.0-dev.f254716fe",
-    "@vaadin/vaadin-themable-mixin": "24.2.0-dev.f254716fe"
+    "@vaadin/a11y-base": "24.3.0-alpha1",
+    "@vaadin/checkbox": "24.3.0-alpha1",
+    "@vaadin/component-base": "24.3.0-alpha1",
+    "@vaadin/lit-renderer": "24.3.0-alpha1",
+    "@vaadin/text-field": "24.3.0-alpha1",
+    "@vaadin/vaadin-lumo-styles": "24.3.0-alpha1",
+    "@vaadin/vaadin-material-styles": "24.3.0-alpha1",
+    "@vaadin/vaadin-themable-mixin": "24.3.0-alpha1"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.4.3",
+    "@vaadin/testing-helpers": "^0.5.0",
     "lit": "^2.0.0",
     "sinon": "^13.0.2"
   },
@@ -65,5 +65,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "da54950b9f8c14c6451ede0d426e16a489c7fb9b"
+  "gitHead": "9ca6f3ca220a777e8eea181a1f5717e39a732240"
 }

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

@@ -7,6 +7,7 @@ import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nod
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { animationFrame } from '@vaadin/component-base/src/async.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ColumnBaseMixin } from './vaadin-grid-column.js';
 import { updateColumnOrders } from './vaadin-grid-helpers.js';
 
@@ -39,6 +40,7 @@ import { updateColumnOrders } from './vaadin-grid-helpers.js';
  * column2.renderer = (root, column, model) => { ... };
  * ```
  *
+ * @customElement
  * @extends HTMLElement
  * @mixes ColumnBaseMixin
  */
@@ -396,6 +398,6 @@ class GridColumnGroup extends ColumnBaseMixin(PolymerElement) {
   }
 }
 
-customElements.define(GridColumnGroup.is, GridColumnGroup);
+defineCustomElement(GridColumnGroup);
 
 export { GridColumnGroup };

package/src/vaadin-grid-column.js

@@ -6,7 +6,9 @@
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { animationFrame } from '@vaadin/component-base/src/async.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
+import { get } from '@vaadin/component-base/src/path-utils.js';
 import { processTemplates } from '@vaadin/component-base/src/templates.js';
 import { updateCellState } from './vaadin-grid-helpers.js';
 
@@ -713,7 +715,7 @@ export const ColumnBaseMixin = (superClass) =>
         return;
       }
 
-      this.__setTextContent(root, this.get(this.path, item));
+      this.__setTextContent(root, get(this.path, item));
     }
 
     /**
@@ -783,6 +785,7 @@ export const ColumnBaseMixin = (superClass) =>
  * See [`<vaadin-grid>`](#/elements/vaadin-grid) documentation for instructions on how
  * to configure the `<vaadin-grid-column>`.
  *
+ * @customElement
  * @extends HTMLElement
  * @mixes ColumnBaseMixin
  */
@@ -894,6 +897,6 @@ class GridColumn extends ColumnBaseMixin(DirMixin(PolymerElement)) {
   }
 }
 
-customElements.define(GridColumn.is, GridColumn);
+defineCustomElement(GridColumn);
 
 export { GridColumn };

package/src/vaadin-grid-data-provider-mixin.js

@@ -4,8 +4,9 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { timeOut } from '@vaadin/component-base/src/async.js';
-import { DataProviderController } from '@vaadin/component-base/src/data-provider-controller.js';
+import { DataProviderController } from '@vaadin/component-base/src/data-provider-controller/data-provider-controller.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
+import { get } from '@vaadin/component-base/src/path-utils.js';
 import { getBodyRowCells, updateCellsPart, updateState } from './vaadin-grid-helpers.js';
 
 /**
@@ -175,12 +176,12 @@ export const DataProviderMixin = (superClass) =>
 
       el.index = index;
 
-      const { item } = this._dataProviderController.getFlatIndexInfo(index);
+      const { item } = this._dataProviderController.getFlatIndexContext(index);
       if (item) {
         this.__updateLoading(el, false);
         this._updateItem(el, item);
         if (this._isExpanded(item)) {
-          this._dataProviderController.ensureFlatIndexChildrenLoaded(index);
+          this._dataProviderController.ensureFlatIndexHierarchy(index);
         }
       } else {
         this.__updateLoading(el, true);
@@ -210,7 +211,7 @@ export const DataProviderMixin = (superClass) =>
      * @return {!GridItem | !unknown}
      */
     getItemId(item) {
-      return this.itemIdPath ? this.get(this.itemIdPath, item) : item;
+      return this.itemIdPath ? get(this.itemIdPath, item) : item;
     }
 
     /**
@@ -266,7 +267,7 @@ export const DataProviderMixin = (superClass) =>
      * @protected
      */
     _getIndexLevel(index = 0) {
-      const { level } = this._dataProviderController.getFlatIndexInfo(index);
+      const { level } = this._dataProviderController.getFlatIndexContext(index);
       return level;
     }
 
@@ -282,7 +283,7 @@ export const DataProviderMixin = (superClass) =>
 
       // After updating the cache, check if some of the expanded items should have sub-caches loaded
       this._getRenderedRows().forEach((row) => {
-        this._dataProviderController.ensureFlatIndexChildrenLoaded(row.index);
+        this._dataProviderController.ensureFlatIndexHierarchy(row.index);
       });
 
       this._hasData = true;
@@ -295,7 +296,7 @@ export const DataProviderMixin = (superClass) =>
         this._setLoading(false);
 
         this._getRenderedRows().forEach((row) => {
-          const { item } = this._dataProviderController.getFlatIndexInfo(row.index);
+          const { item } = this._dataProviderController.getFlatIndexContext(row.index);
           if (item) {
             this._getItem(row.index, row);
           }
@@ -317,16 +318,18 @@ export const DataProviderMixin = (superClass) =>
       this._dataProviderController.clearCache();
       this._hasData = false;
       this.__updateVisibleRows();
-      this._ensureFirstPageLoaded();
+
+      if (!this._effectiveSize) {
+        this._dataProviderController.loadFirstPage();
+      }
     }
 
     /** @private */
     _pageSizeChanged(pageSize, oldPageSize) {
       this._dataProviderController.setPageSize(pageSize);
+
       if (oldPageSize !== undefined && pageSize !== oldPageSize) {
-        this._hasData = false;
-        this.__updateVisibleRows();
-        this._ensureFirstPageLoaded();
+        this.clearCache();
       }
     }
 
@@ -347,8 +350,7 @@ export const DataProviderMixin = (superClass) =>
       this._dataProviderController.setDataProvider(dataProvider ? dataProvider.bind(this) : null);
 
       if (oldDataProvider !== undefined) {
-        this._hasData = false;
-        this.__updateVisibleRows();
+        this.clearCache();
       }
 
       this._ensureFirstPageLoaded();
@@ -365,7 +367,7 @@ export const DataProviderMixin = (superClass) =>
       if (!this._hasData) {
         // Load data before adding rows to make sure they have content when
         // rendered for the first time.
-        this._dataProviderController.ensureFirstPageLoaded();
+        this._dataProviderController.loadFirstPage();
       }
     }
 

package/src/vaadin-grid-dynamic-columns-mixin.js

@@ -112,7 +112,7 @@ export const DynamicColumnsMixin = (superClass) =>
         if (hasColumnElements(info.addedNodes) || hasColumnElements(info.removedNodes)) {
           const allRemovedCells = info.removedNodes.flatMap((c) => c._allCells);
           const filterNotConnected = (element) =>
-            allRemovedCells.filter((cell) => cell._content.contains(element)).length;
+            allRemovedCells.filter((cell) => cell && cell._content.contains(element)).length;
 
           this.__removeSorters(this._sorters.filter(filterNotConnected));
           this.__removeFilters(this._filters.filter(filterNotConnected));

package/src/vaadin-grid-filter-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-filter.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { GridColumn } from './vaadin-grid-column.js';
 
 /**
@@ -18,6 +19,9 @@ import { GridColumn } from './vaadin-grid-column.js';
  *  <vaadin-grid-column>
  *    ...
  * ```
+ *
+ * @customElement
+ * @extends GridColumn
  */
 class GridFilterColumn extends GridColumn {
   static get is() {
@@ -114,6 +118,6 @@ class GridFilterColumn extends GridColumn {
   }
 }
 
-customElements.define(GridFilterColumn.is, GridFilterColumn);
+defineCustomElement(GridFilterColumn);
 
 export { GridFilterColumn };

package/src/vaadin-grid-filter.js

@@ -8,6 +8,7 @@ import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { timeOut } from '@vaadin/component-base/src/async.js';
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
 
 /**
@@ -35,6 +36,7 @@ import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
  *
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
  *
+ * @customElement
  * @extends HTMLElement
  */
 class GridFilter extends ControllerMixin(PolymerElement) {
@@ -125,6 +127,6 @@ class GridFilter extends ControllerMixin(PolymerElement) {
   }
 }
 
-customElements.define(GridFilter.is, GridFilter);
+defineCustomElement(GridFilter);
 
 export { GridFilter };

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

@@ -5,6 +5,7 @@
  */
 import { isKeyboardActive } from '@vaadin/a11y-base/src/focus-utils.js';
 import { addValueToAttribute, removeValueFromAttribute } from '@vaadin/component-base/src/dom-utils.js';
+import { get } from '@vaadin/component-base/src/path-utils.js';
 
 /**
  * @polymerMixin
@@ -266,7 +267,7 @@ export const KeyboardNavigationMixin = (superClass) =>
     __isRowExpandable(row) {
       if (this.itemHasChildrenPath) {
         const item = row._item;
-        return item && this.get(this.itemHasChildrenPath, item) && !this._isExpanded(item);
+        return item && get(this.itemHasChildrenPath, item) && !this._isExpanded(item);
       }
     }
 
@@ -475,7 +476,7 @@ export const KeyboardNavigationMixin = (superClass) =>
         // Row details navigation logic
         if (activeRowGroup === this.$.items) {
           const item = activeRow._item;
-          const { item: dstItem } = this._dataProviderController.getFlatIndexInfo(dstRowIndex);
+          const { item: dstItem } = this._dataProviderController.getFlatIndexContext(dstRowIndex);
           // Should we navigate to row details?
           if (isRowDetails) {
             dstIsRowDetails = dy === 0;
@@ -681,7 +682,26 @@ export const KeyboardNavigationMixin = (superClass) =>
         }
       }
 
-      return tabOrder[index];
+      let focusStepTarget = tabOrder[index];
+
+      // If the target focusable is tied to a column that is not visible,
+      // find the first visible column and update the target in order to
+      // prevent scrolling to the start of the row.
+      if (focusStepTarget && focusStepTarget._column && !this.__isColumnInViewport(focusStepTarget._column)) {
+        const firstVisibleColumn = this._getColumnsInOrder().find((column) => this.__isColumnInViewport(column));
+        if (firstVisibleColumn) {
+          if (focusStepTarget === this._headerFocusable) {
+            focusStepTarget = firstVisibleColumn._headerCell;
+          } else if (focusStepTarget === this._itemsFocusable) {
+            const rowIndex = focusStepTarget._column._cells.indexOf(focusStepTarget);
+            focusStepTarget = firstVisibleColumn._cells[rowIndex];
+          } else if (focusStepTarget === this._footerFocusable) {
+            focusStepTarget = firstVisibleColumn._footerCell;
+          }
+        }
+      }
+
+      return focusStepTarget;
     }
 
     /** @private */

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

@@ -0,0 +1,218 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { DisabledMixinClass } from '@vaadin/a11y-base/src/disabled-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';
+
+export {
+  GridBodyRenderer,
+  GridCellClassNameGenerator,
+  GridCellPartNameGenerator,
+  GridDataProvider,
+  GridDataProviderCallback,
+  GridDataProviderParams,
+  GridDragAndDropFilter,
+  GridDropLocation,
+  GridDropMode,
+  GridEventContext,
+  GridFilterDefinition,
+  GridHeaderFooterRenderer,
+  GridRowDetailsRenderer,
+  GridSorterDefinition,
+  GridSorterDirection,
+};
+
+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> {}
+
+export declare function GridMixin<TItem, T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<ActiveItemMixinClass<TItem>> &
+  Constructor<ArrayDataProviderMixinClass<TItem>> &
+  Constructor<ColumnReorderingMixinClass> &
+  Constructor<DataProviderMixinClass<TItem>> &
+  Constructor<DisabledMixinClass> &
+  Constructor<DragAndDropMixinClass<TItem>> &
+  Constructor<EventContextMixinClass<TItem>> &
+  Constructor<GridMixinClass<TItem>> &
+  Constructor<RowDetailsMixinClass<TItem>> &
+  Constructor<ScrollMixinClass> &
+  Constructor<SelectionMixinClass<TItem>> &
+  Constructor<SortMixinClass> &
+  Constructor<StylingMixinClass<TItem>> &
+  T;
+
+export interface GridMixinClass<TItem>
+  extends DisabledMixinClass,
+    ActiveItemMixinClass<TItem>,
+    ArrayDataProviderMixinClass<TItem>,
+    DataProviderMixinClass<TItem>,
+    RowDetailsMixinClass<TItem>,
+    ScrollMixinClass,
+    SelectionMixinClass<TItem>,
+    SortMixinClass,
+    ColumnReorderingMixinClass,
+    EventContextMixinClass<TItem>,
+    StylingMixinClass<TItem>,
+    DragAndDropMixinClass<TItem> {
+  /**
+   * 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;
+}