@vaadin/component-base 24.4.0-dev.4b20a0c55.3 → 24.4.0-rc1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/component-base",
-  "version": "24.4.0-dev.4b20a0c55.3",
+  "version": "24.4.0-rc1",
   "publishConfig": {
     "access": "public"
   },
@@ -42,5 +42,5 @@
     "@vaadin/testing-helpers": "^0.6.0",
     "sinon": "^13.0.2"
   },
-  "gitHead": "41cf17453d7506fb635c088a0425e20b6e82b89b"
+  "gitHead": "a81e3b927d44c56613fa4e1307494a2acc81005f"
 }

package/src/data-provider-controller/cache.js

@@ -16,6 +16,13 @@ export class Cache {
    */
   context;
 
+  /**
+   * The number of items.
+   *
+   * @type {number}
+   */
+  size = 0;
+
   /**
    * The number of items to display per page.
    *
@@ -51,14 +58,6 @@ export class Cache {
    */
   __subCacheByIndex = {};
 
-  /**
-   * The number of items.
-   *
-   * @type {number}
-   * @private
-   */
-  __size = 0;
-
   /**
    * The total number of items, including items from expanded sub-caches.
    *
@@ -137,44 +136,6 @@ export class Cache {
     return this.flatSize;
   }
 
-  /**
-   * The number of items.
-   *
-   * @return {number}
-   */
-  get size() {
-    return this.__size;
-  }
-
-  /**
-   * Sets the number of items.
-   *
-   * @param {number} size
-   */
-  set size(size) {
-    const oldSize = this.__size;
-    if (oldSize === size) {
-      return;
-    }
-
-    this.__size = size;
-
-    if (this.context.placeholder !== undefined) {
-      this.items.length = size;
-      for (let i = 0; i < size; i++) {
-        // eslint-disable-next-line logical-assignment-operators
-        this.items[i] = this.items[i] || this.context.placeholder;
-      }
-    }
-
-    Object.keys(this.pendingRequests).forEach((page) => {
-      const startIndex = parseInt(page) * this.pageSize;
-      if (startIndex >= this.size) {
-        delete this.pendingRequests[page];
-      }
-    });
-  }
-
   /**
    * Recalculates the flattened size for the cache and its descendant caches recursively.
    */

package/src/data-provider-controller/data-provider-controller.js

@@ -65,20 +65,12 @@ export class DataProviderController extends EventTarget {
    */
   rootCache;
 
-  /**
-   * A placeholder item that is used to indicate that the item is not loaded yet.
-   *
-   * @type {undefined | object}
-   */
-  placeholder;
-
-  constructor(host, { size, pageSize, isExpanded, getItemId, placeholder, dataProvider, dataProviderParams }) {
+  constructor(host, { size, pageSize, isExpanded, getItemId, dataProvider, dataProviderParams }) {
     super();
     this.host = host;
     this.pageSize = pageSize;
     this.getItemId = getItemId;
     this.isExpanded = isExpanded;
-    this.placeholder = placeholder;
     this.dataProvider = dataProvider;
     this.dataProviderParams = dataProviderParams;
     this.rootCache = this.__createRootCache(size);
@@ -95,7 +87,6 @@ export class DataProviderController extends EventTarget {
   get __cacheContext() {
     return {
       isExpanded: this.isExpanded,
-      placeholder: this.placeholder,
       // The controller instance is needed to ensure deprecated cache methods work.
       __controller: this,
     };
@@ -196,7 +187,7 @@ export class DataProviderController extends EventTarget {
   ensureFlatIndexLoaded(flatIndex) {
     const { cache, page, item } = this.getFlatIndexContext(flatIndex);
 
-    if (this.__isPlaceholder(item)) {
+    if (!item) {
       this.__loadCachePage(cache, page);
     }
   }
@@ -211,7 +202,7 @@ export class DataProviderController extends EventTarget {
   ensureFlatIndexHierarchy(flatIndex) {
     const { cache, item, index } = this.getFlatIndexContext(flatIndex);
 
-    if (!this.__isPlaceholder(item) && this.isExpanded(item) && !cache.getSubCache(index)) {
+    if (item && this.isExpanded(item) && !cache.getSubCache(index)) {
       const subCache = cache.createSubCache(index);
       this.__loadCachePage(subCache, 0);
     }
@@ -250,14 +241,14 @@ export class DataProviderController extends EventTarget {
         return;
       }
 
-      cache.setPage(page, items);
-
       if (size !== undefined) {
         cache.size = size;
       } else if (params.parentItem) {
         cache.size = items.length;
       }
 
+      cache.setPage(page, items);
+
       this.recalculateFlatSize();
 
       this.dispatchEvent(new CustomEvent('page-received'));
@@ -273,9 +264,4 @@ export class DataProviderController extends EventTarget {
 
     this.dataProvider(params, callback);
   }
-
-  /** @private */
-  __isPlaceholder(item) {
-    return this.placeholder ? item === this.placeholder : !item;
-  }
 }

package/src/define.js

@@ -9,7 +9,7 @@ export function defineCustomElement(CustomElement) {
   if (!defined) {
     Object.defineProperty(CustomElement, 'version', {
       get() {
-        return '24.4.0-dev.4b20a0c55.3';
+        return '24.4.0-rc1';
       },
     });
 

package/src/overlay-class-mixin.js

@@ -69,7 +69,7 @@ export const OverlayClassMixin = (superclass) =>
       }
 
       // Add new classes based on the overlayClass
-      const classesToAdd = typeof overlayClass === 'string' ? overlayClass.split(' ') : [];
+      const classesToAdd = typeof overlayClass === 'string' ? overlayClass.split(' ').filter(Boolean) : [];
       if (classesToAdd.length > 0) {
         classList.add(...classesToAdd);
       }

package/src/virtualizer-iron-list-adapter.js

@@ -5,7 +5,7 @@
  */
 /* eslint-disable @typescript-eslint/member-ordering */
 // https://github.com/vaadin/eslint-config-vaadin/issues/33
-import { animationFrame, timeOut } from './async.js';
+import { animationFrame, microTask, timeOut } from './async.js';
 import { isSafari } from './browser-utils.js';
 import { Debouncer, flush } from './debounce.js';
 import { ironList } from './iron-list-core.js';
@@ -353,6 +353,9 @@ export class IronListAdapter {
     // Schedule and flush a resize handler
     this._resizeHandler();
     flush();
+    // Schedule an update to ensure item positions are correct after subsequent size changes
+    // Fix for https://github.com/vaadin/flow-components/issues/6269
+    this._debounce('_update', this._update, microTask);
   }
 
   /** @private */
@@ -797,7 +800,7 @@ export class IronListAdapter {
       this.__skipNextVirtualIndexAdjust = false;
     } else if (Math.abs(delta) > 10000) {
       // Process a large scroll position change
-      const scale = this._scrollTop / (this.scrollTarget.scrollHeight - this.scrollTarget.offsetHeight);
+      const scale = this._scrollTop / (this.scrollTarget.scrollHeight - this.scrollTarget.clientHeight);
       this._vidxOffset = Math.round(scale * maxOffset);
     } else {
       // Make sure user can always swipe/wheel scroll to the start and end