@vaadin/grid 24.2.0-beta3 → 24.2.0-beta4

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

@@ -4,10 +4,6 @@
  * 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 };
@@ -22,7 +18,7 @@ export interface GridSorterDefinition {
   direction: GridSorterDirection;
 }
 
-export type GridDataProviderCallback<TItem> = DataProviderCallback<TItem>;
+export type GridDataProviderCallback<TItem> = (items: TItem[], size?: number) => void;
 
 export type GridDataProviderParams<TItem> = {
   page: number;
@@ -32,7 +28,35 @@ export type GridDataProviderParams<TItem> = {
   parentItem?: TItem;
 };
 
-export type GridDataProvider<TItem> = DataProvider<TItem, GridDataProviderParams<TItem>>;
+export type GridDataProvider<TItem> = (
+  params: GridDataProviderParams<TItem>,
+  callback: GridDataProviderCallback<TItem>,
+) => void;
+
+export declare class ItemCache<TItem> {
+  grid: HTMLElement;
+  parentCache: ItemCache<TItem> | undefined;
+  parentItem: TItem | undefined;
+  itemCaches: object | null;
+  items: object | null;
+  effectiveSize: number;
+  size: number;
+  pendingRequests: object | null;
+
+  constructor(grid: HTMLElement, parentCache: ItemCache<TItem> | undefined, parentItem: TItem | undefined);
+
+  isLoading(): boolean;
+
+  getItemForIndex(index: number): TItem | undefined;
+
+  updateSize(): void;
+
+  ensureSubCacheForScaledIndex(scaledIndex: number): void;
+
+  getCacheAndIndex(index: number): { cache: ItemCache<TItem>; scaledIndex: number };
+
+  getFlatIndex(scaledIndex: number): number;
+}
 
 export declare function DataProviderMixin<TItem, T extends Constructor<HTMLElement>>(
   base: T,

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

@@ -4,11 +4,116 @@
  * 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/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';
 
+/**
+ * @private
+ */
+export const ItemCache = class ItemCache {
+  /**
+   * @param {!HTMLElement} grid
+   * @param {!ItemCache | undefined} parentCache
+   * @param {!GridItem | undefined} parentItem
+   */
+  constructor(grid, parentCache, parentItem) {
+    /** @type {!HTMLElement} */
+    this.grid = grid;
+    /** @type {!ItemCache | undefined} */
+    this.parentCache = parentCache;
+    /** @type {!GridItem | undefined} */
+    this.parentItem = parentItem;
+    /** @type {object} */
+    this.itemCaches = {};
+    /** @type {object[]} */
+    this.items = [];
+    /** @type {number} */
+    this.effectiveSize = 0;
+    /** @type {number} */
+    this.size = 0;
+    /** @type {object} */
+    this.pendingRequests = {};
+  }
+
+  /**
+   * @return {boolean}
+   */
+  isLoading() {
+    return Boolean(
+      Object.keys(this.pendingRequests).length ||
+        Object.keys(this.itemCaches).filter((index) => {
+          return this.itemCaches[index].isLoading();
+        })[0],
+    );
+  }
+
+  /**
+   * @param {number} index
+   * @return {!GridItem | undefined}
+   */
+  getItemForIndex(index) {
+    const { cache, scaledIndex } = this.getCacheAndIndex(index);
+    return cache.items[scaledIndex];
+  }
+
+  updateSize() {
+    this.effectiveSize =
+      !this.parentItem || this.grid._isExpanded(this.parentItem)
+        ? this.size +
+          Object.keys(this.itemCaches).reduce((prev, curr) => {
+            const subCache = this.itemCaches[curr];
+            subCache.updateSize();
+            return prev + subCache.effectiveSize;
+          }, 0)
+        : 0;
+  }
+
+  /**
+   * @param {number} scaledIndex
+   */
+  ensureSubCacheForScaledIndex(scaledIndex) {
+    if (!this.itemCaches[scaledIndex]) {
+      const subCache = new ItemCache(this.grid, this, this.items[scaledIndex]);
+      this.itemCaches[scaledIndex] = subCache;
+      this.grid._loadPage(0, subCache);
+    }
+  }
+
+  /**
+   * @param {number} index
+   * @return {{cache: !ItemCache, scaledIndex: number}}
+   */
+  getCacheAndIndex(index) {
+    let thisLevelIndex = index;
+    for (const [index, subCache] of Object.entries(this.itemCaches)) {
+      const numberIndex = Number(index);
+      if (thisLevelIndex <= numberIndex) {
+        return { cache: this, scaledIndex: thisLevelIndex };
+      } else if (thisLevelIndex <= numberIndex + subCache.effectiveSize) {
+        return subCache.getCacheAndIndex(thisLevelIndex - numberIndex - 1);
+      }
+      thisLevelIndex -= subCache.effectiveSize;
+    }
+    return { cache: this, scaledIndex: thisLevelIndex };
+  }
+
+  /**
+   * Gets the scaled index as flattened index on this cache level.
+   * In practice, this means that the effective size of any expanded
+   * subcaches preceding the index are added to the value.
+   * @param {number} scaledIndex
+   * @return {number} The flat index on this cache level.
+   */
+  getFlatIndex(scaledIndex) {
+    const clampedIndex = Math.max(0, Math.min(this.size - 1, scaledIndex));
+
+    return Object.entries(this.itemCaches).reduce((prev, [index, subCache]) => {
+      return clampedIndex > Number(index) ? prev + subCache.effectiveSize : prev;
+    }, clampedIndex);
+  }
+};
+
 /**
  * @polymerMixin
  */
@@ -76,6 +181,18 @@ export const DataProviderMixin = (superClass) =>
           reflectToAttribute: true,
         },
 
+        /**
+         * @type {!ItemCache}
+         * @protected
+         */
+        _cache: {
+          type: Object,
+          value() {
+            const cache = new ItemCache(this);
+            return cache;
+          },
+        },
+
         /**
          * @protected
          */
@@ -127,50 +244,12 @@ export const DataProviderMixin = (superClass) =>
       return ['_sizeChanged(size)', '_expandedItemsChanged(expandedItems.*)'];
     }
 
-    constructor() {
-      super();
-
-      /** @type {DataProviderController} */
-      this._dataProviderController = new DataProviderController(this, {
-        size: this.size,
-        pageSize: this.pageSize,
-        isExpanded: this._isExpanded.bind(this),
-        dataProvider: this.dataProvider ? this.dataProvider.bind(this) : null,
-        dataProviderParams: () => {
-          return {
-            sortOrders: this._mapSorters(),
-            filters: this._mapFilters(),
-          };
-        },
-      });
-
-      this._dataProviderController.addEventListener('page-requested', this._onDataProviderPageRequested.bind(this));
-      this._dataProviderController.addEventListener('page-received', this._onDataProviderPageReceived.bind(this));
-      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._flatSize = this._dataProviderController.flatSize;
+      const delta = size - this._cache.size;
+      this._cache.size += delta;
+      this._cache.effectiveSize += delta;
+      this._effectiveSize = this._cache.effectiveSize;
     }
 
     /** @private */
@@ -188,22 +267,22 @@ export const DataProviderMixin = (superClass) =>
      * @protected
      */
     _getItem(index, el) {
-      if (index >= this._flatSize) {
+      if (index >= this._effectiveSize) {
         return;
       }
 
       el.index = index;
-
-      const { item } = this._dataProviderController.getFlatIndexContext(index);
+      const { cache, scaledIndex } = this._cache.getCacheAndIndex(index);
+      const item = cache.items[scaledIndex];
       if (item) {
         this.__updateLoading(el, false);
         this._updateItem(el, item);
         if (this._isExpanded(item)) {
-          this._dataProviderController.ensureFlatIndexHierarchy(index);
+          cache.ensureSubCacheForScaledIndex(scaledIndex);
         }
       } else {
         this.__updateLoading(el, true);
-        this._dataProviderController.ensureFlatIndexLoaded(index);
+        this._loadPage(this._getPageForIndex(scaledIndex), cache);
       }
     }
 
@@ -243,8 +322,8 @@ export const DataProviderMixin = (superClass) =>
 
     /** @private */
     _expandedItemsChanged() {
-      this._dataProviderController.recalculateFlatSize();
-      this._flatSize = this._dataProviderController.flatSize;
+      this._cache.updateSize();
+      this._effectiveSize = this._cache.effectiveSize;
       this.__updateVisibleRows();
     }
 
@@ -284,8 +363,13 @@ export const DataProviderMixin = (superClass) =>
      * @return {number}
      * @protected
      */
-    _getIndexLevel(index = 0) {
-      const { level } = this._dataProviderController.getFlatIndexContext(index);
+    _getIndexLevel(index) {
+      let { cache } = this._cache.getCacheAndIndex(index);
+      let level = 0;
+      while (cache.parentCache) {
+        cache = cache.parentCache;
+        level += 1;
+      }
       return level;
     }
 
@@ -293,70 +377,105 @@ export const DataProviderMixin = (superClass) =>
      * @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);
-    }
-
-    /** @protected */
-    _onDataProviderPageReceived() {
-      // With the new items added, update the cache size and the grid's effective size
-      this._flatSize = this._dataProviderController.flatSize;
+      // Make sure same page isn't requested multiple times.
+      if (!cache.pendingRequests[page] && this.dataProvider) {
+        this._setLoading(true);
+        cache.pendingRequests[page] = true;
+        const params = {
+          page,
+          pageSize: this.pageSize,
+          sortOrders: this._mapSorters(),
+          filters: this._mapFilters(),
+          parentItem: cache.parentItem,
+        };
+
+        this.dataProvider(params, (items, size) => {
+          if (size !== undefined) {
+            cache.size = size;
+          } else if (params.parentItem) {
+            cache.size = items.length;
+          }
 
-      // After updating the cache, check if some of the expanded items should have sub-caches loaded
-      this._getRenderedRows().forEach((row) => {
-        this._dataProviderController.ensureFlatIndexHierarchy(row.index);
-      });
+          // Populate the cache with new items
+          items.forEach((item, itemsIndex) => {
+            const itemIndex = page * this.pageSize + itemsIndex;
+            cache.items[itemIndex] = item;
+          });
+
+          // With the new items added, update the cache size and the grid's effective size
+          this._cache.updateSize();
+          this._effectiveSize = this._cache.effectiveSize;
+
+          // After updating the cache, check if some of the expanded items should have sub-caches loaded
+          this._getRenderedRows().forEach((row) => {
+            const { cache, scaledIndex } = this._cache.getCacheAndIndex(row.index);
+            const item = cache.items[scaledIndex];
+            if (item && this._isExpanded(item)) {
+              cache.ensureSubCacheForScaledIndex(scaledIndex);
+            }
+          });
+
+          this._hasData = true;
+
+          // Remove the pending request
+          delete cache.pendingRequests[page];
+
+          // Schedule a debouncer to update the visible rows
+          this._debouncerApplyCachedData = Debouncer.debounce(this._debouncerApplyCachedData, timeOut.after(0), () => {
+            this._setLoading(false);
+
+            this._getRenderedRows().forEach((row) => {
+              const cachedItem = this._cache.getItemForIndex(row.index);
+              if (cachedItem) {
+                this._getItem(row.index, row);
+              }
+            });
+
+            this.__scrollToPendingIndexes();
+          });
+
+          // If the grid is not loading anything, flush the debouncer immediately
+          if (!this._cache.isLoading()) {
+            this._debouncerApplyCachedData.flush();
+          }
 
-      this._hasData = true;
+          // Notify that new data has been received
+          this._onDataProviderPageLoaded();
+        });
+      }
     }
 
     /** @protected */
-    _onDataProviderPageLoaded() {
-      // Schedule a debouncer to update the visible rows
-      this._debouncerApplyCachedData = Debouncer.debounce(this._debouncerApplyCachedData, timeOut.after(0), () => {
-        this._setLoading(false);
-
-        this._getRenderedRows().forEach((row) => {
-          const { item } = this._dataProviderController.getFlatIndexContext(row.index);
-          if (item) {
-            this._getItem(row.index, row);
-          }
-        });
-
-        this.__scrollToPendingIndexes();
-      });
+    _onDataProviderPageLoaded() {}
 
-      // If the grid is not loading anything, flush the debouncer immediately
-      if (!this._dataProviderController.isLoading()) {
-        this._debouncerApplyCachedData.flush();
-      }
+    /**
+     * @param {number} index
+     * @return {number}
+     * @private
+     */
+    _getPageForIndex(index) {
+      return Math.floor(index / this.pageSize);
     }
 
     /**
      * Clears the cached pages and reloads data from dataprovider when needed.
      */
     clearCache() {
-      this._dataProviderController.clearCache();
+      this._cache = new ItemCache(this);
+      this._cache.size = this.size || 0;
+      this._cache.updateSize();
       this._hasData = false;
       this.__updateVisibleRows();
 
-      if (!this._flatSize) {
-        this._dataProviderController.loadFirstPage();
+      if (!this._effectiveSize) {
+        this._loadPage(0, this._cache);
       }
     }
 
     /** @private */
     _pageSizeChanged(pageSize, oldPageSize) {
-      this._dataProviderController.setPageSize(pageSize);
-
       if (oldPageSize !== undefined && pageSize !== oldPageSize) {
         this.clearCache();
       }
@@ -364,7 +483,7 @@ export const DataProviderMixin = (superClass) =>
 
     /** @protected */
     _checkSize() {
-      if (this.size === undefined && this._flatSize === 0) {
+      if (this.size === undefined && this._effectiveSize === 0) {
         console.warn(
           'The <vaadin-grid> needs the total number of items in' +
             ' order to display rows, which you can specify either by setting' +
@@ -376,8 +495,6 @@ export const DataProviderMixin = (superClass) =>
 
     /** @private */
     _dataProviderChanged(dataProvider, oldDataProvider) {
-      this._dataProviderController.setDataProvider(dataProvider ? dataProvider.bind(this) : null);
-
       if (oldDataProvider !== undefined) {
         this.clearCache();
       }
@@ -396,7 +513,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.loadFirstPage();
+        this._loadPage(0, this._cache);
       }
     }
 
@@ -446,15 +563,39 @@ export const DataProviderMixin = (superClass) =>
       // ending up in a loading state. Try scrolling to the index until the target
       // index stabilizes.
       let targetIndex;
-      while (targetIndex !== (targetIndex = this._dataProviderController.getFlatIndexByPath(indexes))) {
+      while (targetIndex !== (targetIndex = this.__getGlobalFlatIndex(indexes))) {
         this._scrollToFlatIndex(targetIndex);
       }
 
-      if (this._dataProviderController.isLoading() || !this.clientHeight) {
+      if (this._cache.isLoading() || !this.clientHeight) {
         this.__pendingScrollToIndexes = indexes;
       }
     }
 
+    /**
+     * Recursively returns the globally flat index of the item the given indexes point to.
+     * Each index in the array points to a sub-item of the previous index.
+     * Using `Infinity` as an index will point to the last item on the level.
+     *
+     * @param {!Array<number>} indexes
+     * @param {!ItemCache} cache
+     * @param {number} flatIndex
+     * @return {number}
+     * @private
+     */
+    __getGlobalFlatIndex([levelIndex, ...subIndexes], cache = this._cache, flatIndex = 0) {
+      if (levelIndex === Infinity) {
+        // Treat Infinity as the last index on the level
+        levelIndex = cache.size - 1;
+      }
+      const flatIndexOnLevel = cache.getFlatIndex(levelIndex);
+      const subCache = cache.itemCaches[levelIndex];
+      if (subCache && subCache.effectiveSize && subIndexes.length) {
+        return this.__getGlobalFlatIndex(subIndexes, subCache, flatIndex + flatIndexOnLevel + 1);
+      }
+      return flatIndex + flatIndexOnLevel;
+    }
+
     /** @private */
     __scrollToPendingIndexes() {
       if (this.__pendingScrollToIndexes && this.$.items.children.length) {

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

@@ -211,7 +211,7 @@ export const DragAndDropMixin = (superClass) =>
 
         let row = e.composedPath().find((node) => node.localName === 'tr');
 
-        if (!this._flatSize || this.dropMode === DropMode.ON_GRID) {
+        if (!this._effectiveSize || 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-filter.d.ts

@@ -3,11 +3,18 @@
  * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin';
-import { GridFilterElementMixin, type GridFilterEventMap } from './vaadin-grid-filter-element-mixin.js';
+/**
+ * Fired when the `value` property changes.
+ */
+export type GridFilterValueChangedEvent = CustomEvent<{ value: string }>;
+
+export interface GridFilterCustomEventMap {
+  'value-changed': GridFilterValueChangedEvent;
+}
 
-export * from './vaadin-grid-filter-element-mixin.js';
+export interface GridFilterEventMap extends HTMLElementEventMap, GridFilterCustomEventMap {}
 
 /**
  * `<vaadin-grid-filter>` is a helper element for the `<vaadin-grid>` that provides out-of-the-box UI controls,
@@ -34,7 +41,17 @@ export * from './vaadin-grid-filter-element-mixin.js';
  *
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
  */
-declare class GridFilter extends GridFilterElementMixin(ThemableMixin(HTMLElement)) {
+declare class GridFilter extends ControllerMixin(HTMLElement) {
+  /**
+   * JS Path of the property in the item used for filtering the data.
+   */
+  path: string | null | undefined;
+
+  /**
+   * Current filter value.
+   */
+  value: string | null | undefined;
+
   addEventListener<K extends keyof GridFilterEventMap>(
     type: K,
     listener: (this: GridFilter, ev: GridFilterEventMap[K]) => void,

package/src/vaadin-grid-filter.js

@@ -5,9 +5,11 @@
  */
 import '@vaadin/text-field/src/vaadin-text-field.js';
 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 { ThemableMixin } from '@vaadin/vaadin-themable-mixin';
-import { GridFilterElementMixin } from './vaadin-grid-filter-element-mixin.js';
+import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
 
 /**
  * `<vaadin-grid-filter>` is a helper element for the `<vaadin-grid>` that provides out-of-the-box UI controls,
@@ -36,16 +38,93 @@ import { GridFilterElementMixin } from './vaadin-grid-filter-element-mixin.js';
  *
  * @customElement
  * @extends HTMLElement
- * @mixes GridFilterElementMixin
  */
-class GridFilter extends GridFilterElementMixin(ThemableMixin(PolymerElement)) {
+class GridFilter extends ControllerMixin(PolymerElement) {
   static get template() {
-    return html`<slot></slot>`;
+    return html`
+      <style>
+        :host {
+          display: inline-flex;
+          max-width: 100%;
+        }
+
+        ::slotted(*) {
+          width: 100%;
+          box-sizing: border-box;
+        }
+      </style>
+      <slot></slot>
+    `;
   }
 
   static get is() {
     return 'vaadin-grid-filter';
   }
+
+  static get properties() {
+    return {
+      /**
+       * JS Path of the property in the item used for filtering the data.
+       */
+      path: String,
+
+      /**
+       * Current filter value.
+       */
+      value: {
+        type: String,
+        notify: true,
+      },
+
+      /** @private */
+      _textField: {
+        type: Object,
+      },
+    };
+  }
+
+  static get observers() {
+    return ['_filterChanged(path, value, _textField)'];
+  }
+
+  /** @protected */
+  ready() {
+    super.ready();
+
+    this._filterController = new SlotController(this, '', 'vaadin-text-field', {
+      initializer: (field) => {
+        field.addEventListener('value-changed', (e) => {
+          this.value = e.detail.value;
+        });
+
+        this._textField = field;
+      },
+    });
+    this.addController(this._filterController);
+  }
+
+  /** @private */
+  _filterChanged(path, value, textField) {
+    if (path === undefined || value === undefined || !textField) {
+      return;
+    }
+    if (this._previousValue === undefined && value === '') {
+      return;
+    }
+
+    textField.value = value;
+    this._previousValue = value;
+
+    this._debouncerFilterChanged = Debouncer.debounce(this._debouncerFilterChanged, timeOut.after(200), () => {
+      this.dispatchEvent(new CustomEvent('filter-changed', { bubbles: true }));
+    });
+  }
+
+  focus() {
+    if (this._textField) {
+      this._textField.focus();
+    }
+  }
 }
 
 defineCustomElement(GridFilter);