refactor: deprecate effectiveSize in favor of flatSize (#6566)

packages/component-base/src/data-provider-controller/cache.d.ts

@@ -56,6 +56,14 @@ export class Cache<TItem> {
   /**
    * The total number of items, including items from expanded sub-caches.
    */
+  get flatSize(): number;
+
+  /**
+   * The total number of items, including items from expanded sub-caches.
+   *
+   * @protected
+   * @deprecated since 24.3 and will be removed in Vaadin 25.
+   */
   get effectiveSize(): number;
 
   constructor(
@@ -67,9 +75,9 @@ export class Cache<TItem> {
   );
 
   /**
-   * Recalculates the effective size for the cache and its descendant caches recursively.
+   * Recalculates the flattened size for the cache and its descendant caches recursively.
    */
-  recalculateEffectiveSize(): void;
+  recalculateFlatSize(): void;
 
   /**
    * Adds an array of items corresponding to the given page

packages/component-base/src/data-provider-controller/cache.js

@@ -64,7 +64,7 @@ export class Cache {
    * @type {number}
    * @private
    */
-  __effectiveSize = 0;
+  __flatSize = 0;
 
   /**
    * @param {Cache['context']} context
@@ -79,7 +79,7 @@ export class Cache {
     this.size = size || 0;
     this.parentCache = parentCache;
     this.parentCacheIndex = parentCacheIndex;
-    this.__effectiveSize = size || 0;
+    this.__flatSize = size || 0;
   }
 
   /**
@@ -119,20 +119,33 @@ export class Cache {
    *
    * @return {number}
    */
+  get flatSize() {
+    return this.__flatSize;
+  }
+
+  /**
+   * The total number of items, including items from expanded sub-caches.
+   *
+   * @protected
+   * @deprecated since 24.3 and will be removed in Vaadin 25.
+   */
   get effectiveSize() {
-    return this.__effectiveSize;
+    console.warn(
+      '<vaadin-grid> The `effectiveSize` property of ItemCache is deprecated and will be removed in Vaadin 25.',
+    );
+    return this.flatSize;
   }
 
   /**
-   * Recalculates the effective size for the cache and its descendant caches recursively.
+   * Recalculates the flattened size for the cache and its descendant caches recursively.
    */
-  recalculateEffectiveSize() {
-    this.__effectiveSize =
+  recalculateFlatSize() {
+    this.__flatSize =
       !this.parentItem || this.context.isExpanded(this.parentItem)
         ? this.size +
           this.subCaches.reduce((total, subCache) => {
-            subCache.recalculateEffectiveSize();
-            return total + subCache.effectiveSize;
+            subCache.recalculateFlatSize();
+            return total + subCache.flatSize;
           }, 0)
         : 0;
   }
@@ -204,7 +217,7 @@ export class Cache {
 
     return this.subCaches.reduce((prev, subCache) => {
       const index = subCache.parentCacheIndex;
-      return clampedIndex > index ? prev + subCache.effectiveSize : prev;
+      return clampedIndex > index ? prev + subCache.flatSize : prev;
     }, clampedIndex);
   }
 
@@ -235,7 +248,7 @@ export class Cache {
    */
   updateSize() {
     console.warn('<vaadin-grid> The `updateSize` method of ItemCache is deprecated and will be removed in Vaadin 25.');
-    this.recalculateEffectiveSize();
+    this.recalculateFlatSize();
   }
 
   /**

packages/component-base/src/data-provider-controller/data-provider-controller.d.ts

@@ -76,7 +76,7 @@ export class DataProviderController<TItem, TDataProviderParams extends Record<st
   /**
    * The total number of items, including items from expanded sub-caches.
    */
-  get effectiveSize(): number;
+  get flatSize(): number;
 
   hostConnected(): void;
 
@@ -88,7 +88,7 @@ export class DataProviderController<TItem, TDataProviderParams extends Record<st
   isLoading(): boolean;
 
   /**
-   * Sets the size for the root cache and recalculates the effective size.
+   * Sets the size for the root cache and recalculates the flattened size.
    */
   setSize(size: number): void;
 
@@ -103,9 +103,9 @@ export class DataProviderController<TItem, TDataProviderParams extends Record<st
   setDataProvider(dataProvider: DataProvider<TItem, TDataProviderParams>): void;
 
   /**
-   * Recalculates the effective size.
+   * Recalculates the flattened size.
    */
-  recalculateEffectiveSize(): void;
+  recalculateFlatSize(): void;
 
   /**
    * Clears the cache.

packages/component-base/src/data-provider-controller/data-provider-controller.js

@@ -71,8 +71,8 @@ export class DataProviderController extends EventTarget {
   /**
    * The total number of items, including items from expanded sub-caches.
    */
-  get effectiveSize() {
-    return this.rootCache.effectiveSize;
+  get flatSize() {
+    return this.rootCache.flatSize;
   }
 
   /** @private */
@@ -94,14 +94,14 @@ export class DataProviderController extends EventTarget {
   }
 
   /**
-   * Sets the size for the root cache and recalculates the effective size.
+   * Sets the size for the root cache and recalculates the flattened size.
    *
    * @param {number} size
    */
   setSize(size) {
     this.size = size;
     this.rootCache.size = size;
-    this.recalculateEffectiveSize();
+    this.recalculateFlatSize();
   }
 
   /**
@@ -125,10 +125,10 @@ export class DataProviderController extends EventTarget {
   }
 
   /**
-   * Recalculates the effective size.
+   * Recalculates the flattened size.
    */
-  recalculateEffectiveSize() {
-    this.rootCache.recalculateEffectiveSize();
+  recalculateFlatSize() {
+    this.rootCache.recalculateFlatSize();
   }
 
   /**
@@ -227,7 +227,7 @@ export class DataProviderController extends EventTarget {
 
       cache.setPage(page, items);
 
-      this.recalculateEffectiveSize();
+      this.recalculateFlatSize();
 
       this.dispatchEvent(new CustomEvent('page-received'));
 

packages/component-base/src/data-provider-controller/helpers.js

@@ -23,10 +23,10 @@ export function getFlatIndexContext(cache, flatIndex, level = 0) {
     const index = subCache.parentCacheIndex;
     if (levelIndex <= index) {
       break;
-    } else if (levelIndex <= index + subCache.effectiveSize) {
+    } else if (levelIndex <= index + subCache.flatSize) {
       return getFlatIndexContext(subCache, levelIndex - index - 1, level + 1);
     }
-    levelIndex -= subCache.effectiveSize;
+    levelIndex -= subCache.flatSize;
   }
 
   return {
@@ -56,7 +56,7 @@ export function getFlatIndexByPath(cache, [levelIndex, ...subIndexes], flatIndex
 
   const flatIndexOnLevel = cache.getFlatIndex(levelIndex);
   const subCache = cache.getSubCache(levelIndex);
-  if (subCache && subCache.effectiveSize > 0 && subIndexes.length) {
+  if (subCache && subCache.flatSize > 0 && subIndexes.length) {
     return getFlatIndexByPath(subCache, subIndexes, flatIndex + flatIndexOnLevel + 1);
   }
   return flatIndex + flatIndexOnLevel;

packages/component-base/test/typings/data-provider-controller/cache.types.ts

@@ -32,7 +32,7 @@ assertType<Record<number, DataProviderCallback<TestItem>>>(cache.pendingRequests
 
 // Methods
 assertType<(page: number, items: unknown[]) => void>(cache.setPage);
-assertType<() => void>(cache.recalculateEffectiveSize);
+assertType<() => void>(cache.recalculateFlatSize);
 assertType<(index: number) => number>(cache.getFlatIndex);
 assertType<(index: number) => Cache<TestItem> | undefined>(cache.getSubCache);
 assertType<(index: number) => void>(cache.removeSubCache);

packages/component-base/test/typings/data-provider-controller/data-provider-controller.types.ts

@@ -55,11 +55,11 @@ assertType<number>(dataProviderController.pageSize);
 assertType<(item: TestItem) => boolean>(dataProviderController.isExpanded);
 assertType<() => TestDataProviderParams>(dataProviderController.dataProviderParams);
 assertType<DataProvider<TestItem, TestDataProviderParams>>(dataProviderController.dataProvider);
-assertType<number>(dataProviderController.effectiveSize);
+assertType<number>(dataProviderController.flatSize);
 
 // Methods
 assertType<() => void>(dataProviderController.clearCache);
-assertType<() => void>(dataProviderController.recalculateEffectiveSize);
+assertType<() => void>(dataProviderController.recalculateFlatSize);
 assertType<(flatIndex: number) => void>(dataProviderController.ensureFlatIndexLoaded);
 assertType<(flatIndex: number) => void>(dataProviderController.ensureFlatIndexHierarchy);
 assertType<

packages/crud/src/vaadin-crud.js

@@ -1223,7 +1223,7 @@ class Crud extends ControllerMixin(ElementMixin(ThemableMixin(PolymerElement)))
 
   /** @private */
   __restoreFocusOnDelete() {
-    if (this._grid._effectiveSize === 1) {
+    if (this._grid._flatSize === 1) {
       this._newButton.focus();
     } else {
       this._grid._focusFirstVisibleRow();

packages/grid/src/vaadin-grid-array-data-provider-mixin.js

@@ -62,7 +62,7 @@ export const ArrayDataProviderMixin = (superClass) =>
         } else if (this._arrayDataProvider.__items === items) {
           // The items array was modified
           this.clearCache();
-          this.size = this._effectiveSize;
+          this.size = this._flatSize;
         } else {
           // The items array was replaced
           this.__setArrayDataProvider(items);

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

@@ -158,10 +158,19 @@ export const DataProviderMixin = (superClass) =>
       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._flatSize = this._dataProviderController.flatSize;
     }
 
     /** @private */
@@ -179,7 +188,7 @@ export const DataProviderMixin = (superClass) =>
      * @protected
      */
     _getItem(index, el) {
-      if (index >= this._effectiveSize) {
+      if (index >= this._flatSize) {
         return;
       }
 
@@ -234,8 +243,8 @@ export const DataProviderMixin = (superClass) =>
 
     /** @private */
     _expandedItemsChanged() {
-      this._dataProviderController.recalculateEffectiveSize();
-      this._effectiveSize = this._dataProviderController.effectiveSize;
+      this._dataProviderController.recalculateFlatSize();
+      this._flatSize = this._dataProviderController.flatSize;
       this.__updateVisibleRows();
     }
 
@@ -299,7 +308,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) => {
@@ -339,7 +348,7 @@ export const DataProviderMixin = (superClass) =>
       this._hasData = false;
       this.__updateVisibleRows();
 
-      if (!this._effectiveSize) {
+      if (!this._flatSize) {
         this._dataProviderController.loadFirstPage();
       }
     }
@@ -355,7 +364,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' +

packages/grid/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._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) {

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

@@ -443,7 +443,7 @@ export const KeyboardNavigationMixin = (superClass) =>
     __navigateRows(dy, activeRow, activeCell) {
       const currentRowIndex = this.__getIndexInGroup(activeRow, this._focusedItemIndex);
       const activeRowGroup = activeRow.parentNode;
-      const maxRowIndex = (activeRowGroup === this.$.items ? this._effectiveSize : activeRowGroup.children.length) - 1;
+      const maxRowIndex = (activeRowGroup === this.$.items ? this._flatSize : activeRowGroup.children.length) - 1;
 
       // Index of the destination row
       let dstRowIndex = Math.max(0, Math.min(currentRowIndex + dy, maxRowIndex));

packages/grid/src/vaadin-grid-mixin.js

@@ -88,7 +88,7 @@ export const GridMixin = (superClass) =>
     static get observers() {
       return [
         '_columnTreeChanged(_columnTree, _columnTree.*)',
-        '_effectiveSizeChanged(_effectiveSize, __virtualizer, _hasData, _columnTree)',
+        '_flatSizeChanged(_flatSize, __virtualizer, _hasData, _columnTree)',
       ];
     }
 
@@ -294,20 +294,20 @@ export const GridMixin = (superClass) =>
     }
 
     /** @private */
-    _effectiveSizeChanged(effectiveSize, virtualizer, hasData, columnTree) {
+    _flatSizeChanged(flatSize, virtualizer, hasData, columnTree) {
       if (virtualizer && hasData && columnTree) {
         // Changing the virtualizer size may result in the row with focus getting hidden
         const cell = this.shadowRoot.activeElement;
         const cellCoordinates = this.__getBodyCellCoordinates(cell);
 
         const previousSize = virtualizer.size || 0;
-        virtualizer.size = effectiveSize;
+        virtualizer.size = flatSize;
 
         // Request an update for the previous last row to have the "last" state removed
         virtualizer.update(previousSize - 1, previousSize - 1);
-        if (effectiveSize < previousSize) {
+        if (flatSize < previousSize) {
           // Size was decreased, so the new last row requires an explicit update
-          virtualizer.update(effectiveSize - 1, effectiveSize - 1);
+          virtualizer.update(flatSize - 1, flatSize - 1);
         }
 
         // If the focused cell's parent row got hidden by the size change, focus the corresponding new cell
@@ -801,7 +801,7 @@ export const GridMixin = (superClass) =>
     _updateRowOrderParts(row, index = row.index) {
       updateBooleanRowStates(row, {
         first: index === 0,
-        last: index === this._effectiveSize - 1,
+        last: index === this._flatSize - 1,
         odd: index % 2 !== 0,
         even: index % 2 === 0,
       });

packages/grid/src/vaadin-grid-scroll-mixin.js

@@ -160,7 +160,7 @@ export const ScrollMixin = (superClass) =>
      * @protected
      */
     _scrollToFlatIndex(index) {
-      index = Math.min(this._effectiveSize - 1, Math.max(0, index));
+      index = Math.min(this._flatSize - 1, Math.max(0, index));
       this.__virtualizer.scrollToIndex(index);
       this.__scrollIntoViewport(index);
     }