@vaadin/grid 24.3.0-alpha1 → 24.3.0-alpha11

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

@@ -4,6 +4,10 @@
  * 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 {
+  DataProvider,
+  DataProviderCallback,
+} from '@vaadin/component-base/src/data-provider-controller/data-provider-controller.js';
 import { GridSorterDirection } from './vaadin-grid-sorter.js';
 
 export { GridSorterDirection };
@@ -18,7 +22,7 @@ export interface GridSorterDefinition {
   direction: GridSorterDirection;
 }
 
-export type GridDataProviderCallback<TItem> = (items: TItem[], size?: number) => void;
+export type GridDataProviderCallback<TItem> = DataProviderCallback<TItem>;
 
 export type GridDataProviderParams<TItem> = {
   page: number;
@@ -28,10 +32,7 @@ export type GridDataProviderParams<TItem> = {
   parentItem?: TItem;
 };
 
-export type GridDataProvider<TItem> = (
-  params: GridDataProviderParams<TItem>,
-  callback: GridDataProviderCallback<TItem>,
-) => void;
+export type GridDataProvider<TItem> = DataProvider<TItem, GridDataProviderParams<TItem>>;
 
 export declare function DataProviderMixin<TItem, T extends Constructor<HTMLElement>>(
   base: T,

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

@@ -24,6 +24,16 @@ export const DataProviderMixin = (superClass) =>
         size: {
           type: Number,
           notify: true,
+          sync: true,
+        },
+
+        /**
+         * @type {number}
+         * @protected
+         */
+        _flatSize: {
+          type: Number,
+          sync: true,
         },
 
         /**
@@ -35,6 +45,7 @@ export const DataProviderMixin = (superClass) =>
           type: Number,
           value: 50,
           observer: '_pageSizeChanged',
+          sync: true,
         },
 
         /**
@@ -64,6 +75,7 @@ export const DataProviderMixin = (superClass) =>
           type: Object,
           notify: true,
           observer: '_dataProviderChanged',
+          sync: true,
         },
 
         /**
@@ -82,6 +94,7 @@ export const DataProviderMixin = (superClass) =>
         _hasData: {
           type: Boolean,
           value: false,
+          sync: true,
         },
 
         /**
@@ -92,6 +105,7 @@ export const DataProviderMixin = (superClass) =>
           type: String,
           value: 'children',
           observer: '__itemHasChildrenPathChanged',
+          sync: true,
         },
 
         /**
@@ -101,6 +115,7 @@ export const DataProviderMixin = (superClass) =>
         itemIdPath: {
           type: String,
           value: null,
+          sync: true,
         },
 
         /**
@@ -111,6 +126,7 @@ export const DataProviderMixin = (superClass) =>
           type: Object,
           notify: true,
           value: () => [],
+          sync: true,
         },
 
         /**
@@ -118,13 +134,13 @@ export const DataProviderMixin = (superClass) =>
          */
         __expandedKeys: {
           type: Object,
-          computed: '__computeExpandedKeys(itemIdPath, expandedItems.*)',
+          computed: '__computeExpandedKeys(itemIdPath, expandedItems)',
         },
       };
     }
 
     static get observers() {
-      return ['_sizeChanged(size)', '_expandedItemsChanged(expandedItems.*)'];
+      return ['_sizeChanged(size)', '_expandedItemsChanged(expandedItems)'];
     }
 
     constructor() {
@@ -134,6 +150,7 @@ export const DataProviderMixin = (superClass) =>
       this._dataProviderController = new DataProviderController(this, {
         size: this.size,
         pageSize: this.pageSize,
+        getItemId: this.getItemId.bind(this),
         isExpanded: this._isExpanded.bind(this),
         dataProvider: this.dataProvider ? this.dataProvider.bind(this) : null,
         dataProviderParams: () => {
@@ -149,10 +166,29 @@ export const DataProviderMixin = (superClass) =>
       this._dataProviderController.addEventListener('page-loaded', this._onDataProviderPageLoaded.bind(this));
     }
 
+    /**
+     * @protected
+     * @deprecated since 24.3 and will be removed in Vaadin 25.
+     */
+    get _cache() {
+      console.warn('<vaadin-grid> The `_cache` property is deprecated and will be removed in Vaadin 25.');
+      return this._dataProviderController.rootCache;
+    }
+
+    /**
+     * @protected
+     * @deprecated since 24.3 and will be removed in Vaadin 25.
+     */
+    get _effectiveSize() {
+      console.warn('<vaadin-grid> The `_effectiveSize` property is deprecated and will be removed in Vaadin 25.');
+      return this._flatSize;
+    }
+
     /** @private */
     _sizeChanged(size) {
-      this._dataProviderController.setSize(size);
-      this._effectiveSize = this._dataProviderController.effectiveSize;
+      this._dataProviderController.rootCache.size = size;
+      this._dataProviderController.recalculateFlatSize();
+      this._flatSize = this._dataProviderController.flatSize;
     }
 
     /** @private */
@@ -170,7 +206,7 @@ export const DataProviderMixin = (superClass) =>
      * @protected
      */
     _getItem(index, el) {
-      if (index >= this._effectiveSize) {
+      if (index >= this._flatSize) {
         return;
       }
 
@@ -220,19 +256,19 @@ export const DataProviderMixin = (superClass) =>
      * @protected
      */
     _isExpanded(item) {
-      return this.__expandedKeys.has(this.getItemId(item));
+      return this.__expandedKeys && this.__expandedKeys.has(this.getItemId(item));
     }
 
     /** @private */
     _expandedItemsChanged() {
-      this._dataProviderController.recalculateEffectiveSize();
-      this._effectiveSize = this._dataProviderController.effectiveSize;
+      this._dataProviderController.recalculateFlatSize();
+      this._flatSize = this._dataProviderController.flatSize;
       this.__updateVisibleRows();
     }
 
     /** @private */
     __computeExpandedKeys(itemIdPath, expandedItems) {
-      const expanded = expandedItems.base || [];
+      const expanded = expandedItems || [];
       const expandedKeys = new Set();
       expanded.forEach((item) => {
         expandedKeys.add(this.getItemId(item));
@@ -271,6 +307,17 @@ export const DataProviderMixin = (superClass) =>
       return level;
     }
 
+    /**
+     * @param {number} page
+     * @param {ItemCache} cache
+     * @protected
+     * @deprecated since 24.3 and will be removed in Vaadin 25.
+     */
+    _loadPage(page, cache) {
+      console.warn('<vaadin-grid> The `_loadPage` method is deprecated and will be removed in Vaadin 25.');
+      this._dataProviderController.__loadCachePage(cache, page);
+    }
+
     /** @protected */
     _onDataProviderPageRequested() {
       this._setLoading(true);
@@ -279,7 +326,7 @@ export const DataProviderMixin = (superClass) =>
     /** @protected */
     _onDataProviderPageReceived() {
       // With the new items added, update the cache size and the grid's effective size
-      this._effectiveSize = this._dataProviderController.effectiveSize;
+      this._flatSize = this._dataProviderController.flatSize;
 
       // After updating the cache, check if some of the expanded items should have sub-caches loaded
       this._getRenderedRows().forEach((row) => {
@@ -303,6 +350,7 @@ export const DataProviderMixin = (superClass) =>
         });
 
         this.__scrollToPendingIndexes();
+        this.__dispatchPendingBodyCellFocus();
       });
 
       // If the grid is not loading anything, flush the debouncer immediately
@@ -316,10 +364,12 @@ export const DataProviderMixin = (superClass) =>
      */
     clearCache() {
       this._dataProviderController.clearCache();
+      this._dataProviderController.rootCache.size = this.size;
+      this._dataProviderController.recalculateFlatSize();
       this._hasData = false;
       this.__updateVisibleRows();
 
-      if (!this._effectiveSize) {
+      if (!this._flatSize) {
         this._dataProviderController.loadFirstPage();
       }
     }
@@ -335,7 +385,7 @@ export const DataProviderMixin = (superClass) =>
 
     /** @protected */
     _checkSize() {
-      if (this.size === undefined && this._effectiveSize === 0) {
+      if (this.size === undefined && this._flatSize === 0) {
         console.warn(
           'The <vaadin-grid> needs the total number of items in' +
             ' order to display rows, which you can specify either by setting' +

package/src/vaadin-grid-drag-and-drop-mixin.js

@@ -45,13 +45,19 @@ export const DragAndDropMixin = (superClass) =>
          * @attr {between|on-top|on-top-or-between|on-grid} drop-mode
          * @type {GridDropMode | null | undefined}
          */
-        dropMode: String,
+        dropMode: {
+          type: String,
+          sync: true,
+        },
 
         /**
          * Marks the grid's rows to be available for dragging.
          * @attr {boolean} rows-draggable
          */
-        rowsDraggable: Boolean,
+        rowsDraggable: {
+          type: Boolean,
+          sync: true,
+        },
 
         /**
          * A function that filters dragging of specific grid rows. The return value should be false
@@ -68,7 +74,10 @@ export const DragAndDropMixin = (superClass) =>
          *
          * @type {GridDragAndDropFilter | null | undefined}
          */
-        dragFilter: Function,
+        dragFilter: {
+          type: Function,
+          sync: true,
+        },
 
         /**
          * A function that filters dropping on specific grid rows. The return value should be false
@@ -85,7 +94,10 @@ export const DragAndDropMixin = (superClass) =>
          *
          * @type {GridDragAndDropFilter | null | undefined}
          */
-        dropFilter: Function,
+        dropFilter: {
+          type: Function,
+          sync: true,
+        },
 
         /** @private */
         __dndAutoScrollThreshold: {
@@ -211,7 +223,7 @@ export const DragAndDropMixin = (superClass) =>
 
         let row = e.composedPath().find((node) => node.localName === 'tr');
 
-        if (!this._effectiveSize || this.dropMode === DropMode.ON_GRID) {
+        if (!this._flatSize || this.dropMode === DropMode.ON_GRID) {
           // The grid is empty or "on-grid" drop mode was used, always default to "empty"
           this._dropLocation = DropLocation.EMPTY;
         } else if (!row || row.parentNode !== this.$.items) {

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

@@ -3,11 +3,9 @@
  * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
-import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { microTask, timeOut } from '@vaadin/component-base/src/async.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
-import { updateCellState } from './vaadin-grid-helpers.js';
+import { ColumnObserver, updateCellState } from './vaadin-grid-helpers.js';
 
 function arrayEquals(arr1, arr2) {
   if (!arr1 || !arr2 || arr1.length !== arr2.length) {
@@ -59,7 +57,7 @@ export const DynamicColumnsMixin = (superClass) =>
      * @protected
      */
     _getChildColumns(el) {
-      return FlattenedNodesObserver.getFlattenedNodes(el).filter(this._isColumnElement);
+      return ColumnObserver.getColumns(el);
     }
 
     /** @private */
@@ -78,7 +76,7 @@ export const DynamicColumnsMixin = (superClass) =>
 
     /** @private */
     _getColumnTree() {
-      const rootColumns = FlattenedNodesObserver.getFlattenedNodes(this).filter(this._isColumnElement);
+      const rootColumns = ColumnObserver.getColumns(this);
       const columnTree = [rootColumns];
 
       let c = rootColumns;
@@ -100,24 +98,31 @@ export const DynamicColumnsMixin = (superClass) =>
     /** @protected */
     _updateColumnTree() {
       const columnTree = this._getColumnTree();
+
       if (!arrayEquals(columnTree, this._columnTree)) {
+        // Request a synchronoys update for each column
+        columnTree.forEach((columnArray) => {
+          columnArray.forEach((column) => {
+            if (column.performUpdate) {
+              column.performUpdate();
+            }
+          });
+        });
+
         this._columnTree = columnTree;
       }
     }
 
     /** @private */
     _addNodeObserver() {
-      this._observer = new FlattenedNodesObserver(this, (info) => {
-        const hasColumnElements = (nodeCollection) => nodeCollection.filter(this._isColumnElement).length > 0;
-        if (hasColumnElements(info.addedNodes) || hasColumnElements(info.removedNodes)) {
-          const allRemovedCells = info.removedNodes.flatMap((c) => c._allCells);
-          const filterNotConnected = (element) =>
-            allRemovedCells.filter((cell) => cell && cell._content.contains(element)).length;
-
-          this.__removeSorters(this._sorters.filter(filterNotConnected));
-          this.__removeFilters(this._filters.filter(filterNotConnected));
-          this._debounceUpdateColumnTree();
-        }
+      this._observer = new ColumnObserver(this, (_addedColumns, removedColumns) => {
+        const allRemovedCells = removedColumns.flatMap((c) => c._allCells);
+        const filterNotConnected = (element) =>
+          allRemovedCells.filter((cell) => cell && cell._content.contains(element)).length;
+
+        this.__removeSorters(this._sorters.filter(filterNotConnected));
+        this.__removeFilters(this._filters.filter(filterNotConnected));
+        this._debounceUpdateColumnTree();
 
         this._debouncerCheckImports = Debouncer.debounce(
           this._debouncerCheckImports,
@@ -141,7 +146,7 @@ export const DynamicColumnsMixin = (superClass) =>
         'vaadin-grid-sorter',
       ].forEach((elementName) => {
         const element = this.querySelector(elementName);
-        if (element && !(element instanceof PolymerElement)) {
+        if (element && !customElements.get(elementName)) {
           console.warn(`Make sure you have imported the required module for <${elementName}> element.`);
         }
       });

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

@@ -0,0 +1,22 @@
+/**
+ * @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';
+
+export declare function GridFilterColumnMixin<T extends Constructor<HTMLElement>>(
+  superclass: T,
+): Constructor<GridFilterColumnMixinClass> & T;
+
+export declare class GridFilterColumnMixinClass {
+  /**
+   * Text to display as the label of the column filter text-field.
+   */
+  header: string | null | undefined;
+
+  /**
+   * JS Path of the property in the item used for filtering the data.
+   */
+  path: string | null | undefined;
+}

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

@@ -0,0 +1,106 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * @polymerMixin
+ */
+export const GridFilterColumnMixin = (superClass) =>
+  class extends superClass {
+    static get properties() {
+      return {
+        /**
+         * JS Path of the property in the item used for filtering the data.
+         */
+        path: {
+          type: String,
+          sync: true,
+        },
+
+        /**
+         * Text to display as the label of the column filter text-field.
+         */
+        header: {
+          type: String,
+          sync: true,
+        },
+      };
+    }
+
+    static get observers() {
+      return ['_onHeaderRendererOrBindingChanged(_headerRenderer, _headerCell, path, header, _filterValue)'];
+    }
+
+    constructor() {
+      super();
+
+      this.__boundOnFilterValueChanged = this.__onFilterValueChanged.bind(this);
+    }
+
+    /**
+     * Renders the grid filter with the custom text field to the header cell.
+     *
+     * @override
+     */
+    _defaultHeaderRenderer(root, _column) {
+      let filter = root.firstElementChild;
+      let textField = filter ? filter.firstElementChild : undefined;
+
+      if (!filter) {
+        filter = document.createElement('vaadin-grid-filter');
+        textField = document.createElement('vaadin-text-field');
+        textField.setAttribute('theme', 'small');
+        textField.setAttribute('style', 'max-width: 100%;');
+        textField.setAttribute('focus-target', '');
+        textField.addEventListener('value-changed', this.__boundOnFilterValueChanged);
+        filter.appendChild(textField);
+        root.appendChild(filter);
+      }
+
+      filter.path = this.path;
+      filter.value = this._filterValue;
+
+      textField.__rendererValue = this._filterValue;
+      textField.value = this._filterValue;
+      textField.label = this.__getHeader(this.header, this.path);
+    }
+
+    /**
+     * The filter column doesn't allow to use a custom header renderer
+     * to override the header cell content.
+     * It always renders the grid filter to the header cell.
+     *
+     * @override
+     */
+    _computeHeaderRenderer() {
+      return this._defaultHeaderRenderer;
+    }
+
+    /**
+     * Updates the internal filter value once the filter text field is changed.
+     * The listener handles only user-fired events.
+     *
+     * @private
+     */
+    __onFilterValueChanged(e) {
+      // Skip if the value is changed by the renderer.
+      if (e.detail.value === e.target.__rendererValue) {
+        return;
+      }
+
+      this._filterValue = e.detail.value;
+    }
+
+    /** @private */
+    __getHeader(header, path) {
+      if (header) {
+        return header;
+      }
+
+      if (path) {
+        return this._generateHeader(path);
+      }
+    }
+  };

package/src/vaadin-grid-filter-column.d.ts

@@ -4,7 +4,10 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { GridDefaultItem } from './vaadin-grid.js';
-import { GridColumn } from './vaadin-grid-column.js';
+import type { GridColumn, GridColumnMixin } from './vaadin-grid-column.js';
+import type { GridFilterColumnMixinClass } from './vaadin-grid-filter-column-mixin.js';
+
+export * from './vaadin-grid-filter-column-mixin.js';
 
 /**
  * `<vaadin-grid-filter-column>` is a helper element for the `<vaadin-grid>`
@@ -19,17 +22,12 @@ import { GridColumn } from './vaadin-grid-column.js';
  *    ...
  * ```
  */
-declare class GridFilterColumn<TItem = GridDefaultItem> extends GridColumn<TItem> {
-  /**
-   * Text to display as the label of the column filter text-field.
-   */
-  header: string | null | undefined;
+declare class GridFilterColumn<TItem = GridDefaultItem> extends HTMLElement {}
 
-  /**
-   * JS Path of the property in the item used for filtering the data.
-   */
-  path: string | null | undefined;
-}
+interface GridFilterColumn<TItem = GridDefaultItem>
+  extends GridFilterColumnMixinClass,
+    GridColumnMixin<TItem, GridColumn<TItem>>,
+    GridColumn<TItem> {}
 
 declare global {
   interface HTMLElementTagNameMap {

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

@@ -6,6 +6,7 @@
 import './vaadin-grid-filter.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { GridColumn } from './vaadin-grid-column.js';
+import { GridFilterColumnMixin } from './vaadin-grid-filter-column-mixin.js';
 
 /**
  * `<vaadin-grid-filter-column>` is a helper element for the `<vaadin-grid>`
@@ -22,100 +23,12 @@ import { GridColumn } from './vaadin-grid-column.js';
  *
  * @customElement
  * @extends GridColumn
+ * @mixes GridFilterColumnMixin
  */
-class GridFilterColumn extends GridColumn {
+class GridFilterColumn extends GridFilterColumnMixin(GridColumn) {
   static get is() {
     return 'vaadin-grid-filter-column';
   }
-
-  static get properties() {
-    return {
-      /**
-       * JS Path of the property in the item used for filtering the data.
-       */
-      path: String,
-
-      /**
-       * Text to display as the label of the column filter text-field.
-       */
-      header: String,
-    };
-  }
-
-  static get observers() {
-    return ['_onHeaderRendererOrBindingChanged(_headerRenderer, _headerCell, path, header, _filterValue)'];
-  }
-
-  constructor() {
-    super();
-
-    this.__boundOnFilterValueChanged = this.__onFilterValueChanged.bind(this);
-  }
-
-  /**
-   * Renders the grid filter with the custom text field to the header cell.
-   *
-   * @override
-   */
-  _defaultHeaderRenderer(root, _column) {
-    let filter = root.firstElementChild;
-    let textField = filter ? filter.firstElementChild : undefined;
-
-    if (!filter) {
-      filter = document.createElement('vaadin-grid-filter');
-      textField = document.createElement('vaadin-text-field');
-      textField.setAttribute('theme', 'small');
-      textField.setAttribute('style', 'max-width: 100%;');
-      textField.setAttribute('focus-target', '');
-      textField.addEventListener('value-changed', this.__boundOnFilterValueChanged);
-      filter.appendChild(textField);
-      root.appendChild(filter);
-    }
-
-    filter.path = this.path;
-    filter.value = this._filterValue;
-
-    textField.__rendererValue = this._filterValue;
-    textField.value = this._filterValue;
-    textField.label = this.__getHeader(this.header, this.path);
-  }
-
-  /**
-   * The filter column doesn't allow to use a custom header renderer
-   * to override the header cell content.
-   * It always renders the grid filter to the header cell.
-   *
-   * @override
-   */
-  _computeHeaderRenderer() {
-    return this._defaultHeaderRenderer;
-  }
-
-  /**
-   * Updates the internal filter value once the filter text field is changed.
-   * The listener handles only user-fired events.
-   *
-   * @private
-   */
-  __onFilterValueChanged(e) {
-    // Skip if the value is changed by the renderer.
-    if (e.detail.value === e.target.__rendererValue) {
-      return;
-    }
-
-    this._filterValue = e.detail.value;
-  }
-
-  /** @private */
-  __getHeader(header, path) {
-    if (header) {
-      return header;
-    }
-
-    if (path) {
-      return this._generateHeader(path);
-    }
-  }
 }
 
 defineCustomElement(GridFilterColumn);

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

@@ -0,0 +1,34 @@
+/**
+ * @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 { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
+
+/**
+ * Fired when the `value` property changes.
+ */
+export type GridFilterValueChangedEvent = CustomEvent<{ value: string }>;
+
+export interface GridFilterCustomEventMap {
+  'value-changed': GridFilterValueChangedEvent;
+}
+
+export interface GridFilterEventMap extends HTMLElementEventMap, GridFilterCustomEventMap {}
+
+export declare function GridFilterElementMixin<T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<ControllerMixinClass> & Constructor<GridFilterElementMixinClass> & T;
+
+declare class GridFilterElementMixinClass {
+  /**
+   * JS Path of the property in the item used for filtering the data.
+   */
+  path: string | null | undefined;
+
+  /**
+   * Current filter value.
+   */
+  value: string | null | undefined;
+}