@vaadin/component-base 24.4.0-dev.b3e1d14600 → 24.4.0-rc2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/component-base",
-  "version": "24.4.0-dev.b3e1d14600",
+  "version": "24.4.0-rc2",
   "publishConfig": {
     "access": "public"
   },
@@ -42,5 +42,5 @@
     "@vaadin/testing-helpers": "^0.6.0",
     "sinon": "^13.0.2"
   },
-  "gitHead": "502d4f5b03f770a83d270d98078cde230254dd0e"
+  "gitHead": "ea3d99e8cf67a337e959d5cab849f80464c7c7e5"
 }

package/src/browser-utils.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 

package/src/controller-mixin.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2024 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';

package/src/controller-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';

package/src/data-provider-controller/cache.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { DataProviderCallback } from './data-provider-controller.js';

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { getFlatIndexContext } from './helpers.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,46 +136,6 @@ export class Cache {
     return this.flatSize;
   }
 
-  /**
-   * The number of items.
-   *
-   * @type {number}
-   * @private
-   */
-  get size() {
-    return this.__size;
-  }
-
-  /**
-   * Sets the number of items.
-   *
-   * @type {number}
-   * @private
-   */
-  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.
    */
@@ -201,10 +160,7 @@ export class Cache {
   setPage(page, items) {
     const startIndex = page * this.pageSize;
     items.forEach((item, i) => {
-      const itemIndex = startIndex + i;
-      if (itemIndex < this.size) {
-        this.items[itemIndex] = item;
-      }
+      this.items[startIndex + i] = item;
     });
   }
 

package/src/data-provider-controller/data-provider-controller.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { ReactiveController } from 'lit';

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { Cache } from './cache.js';
@@ -65,27 +65,12 @@ export class DataProviderController extends EventTarget {
    */
   rootCache;
 
-  /**
-   * Indicates whether any data has been loaded since the last cache clear.
-   *
-   * @type {boolean}
-   */
-  hasData = false;
-
-  /**
-   * 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);
@@ -102,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,
     };
@@ -149,7 +133,6 @@ export class DataProviderController extends EventTarget {
    */
   clearCache() {
     this.rootCache = this.__createRootCache(this.rootCache.size);
-    this.hasData = false;
   }
 
   /**
@@ -204,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);
     }
   }
@@ -219,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);
     }
@@ -268,8 +251,6 @@ export class DataProviderController extends EventTarget {
 
       this.recalculateFlatSize();
 
-      this.hasData = true;
-
       this.dispatchEvent(new CustomEvent('page-received'));
 
       delete cache.pendingRequests[page];
@@ -283,9 +264,4 @@ export class DataProviderController extends EventTarget {
 
     this.dataProvider(params, callback);
   }
-
-  /** @private */
-  __isPlaceholder(item) {
-    return item === this.placeholder;
-  }
 }

package/src/data-provider-controller/helpers.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { Cache } from './cache.js';

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 

package/src/define.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 export interface CustomElementType extends CustomElementConstructor {

package/src/define.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
@@ -9,7 +9,7 @@ export function defineCustomElement(CustomElement) {
   if (!defined) {
     Object.defineProperty(CustomElement, 'version', {
       get() {
-        return '24.4.0-alpha1';
+        return '24.4.0-rc2';
       },
     });
 

package/src/delegate-state-mixin.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2024 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';

package/src/delegate-state-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';

package/src/dir-mixin.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2024 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';

package/src/dir-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 

package/src/dir-utils.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 

package/src/dir-utils.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 

package/src/dom-utils.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 

package/src/dom-utils.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 

package/src/element-mixin.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import '../custom_typings/vaadin-usage-statistics.js';

package/src/element-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { setCancelSyntheticClickEvents } from '@polymer/polymer/lib/utils/settings.js';

package/src/media-query-controller.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { ReactiveController } from 'lit';

package/src/media-query-controller.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 

package/src/overflow-controller.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { ReactiveController } from 'lit';

package/src/overflow-controller.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { animationFrame } from './async.js';

package/src/overlay-class-mixin.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2023 Vaadin Ltd.
+ * Copyright (c) 2023 - 2024 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';

package/src/overlay-class-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2023 Vaadin Ltd.
+ * Copyright (c) 2023 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
@@ -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/path-utils.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2023 Vaadin Ltd.
+ * Copyright (c) 2023 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 

package/src/path-utils.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2023 Vaadin Ltd.
+ * Copyright (c) 2023 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 

package/src/polylit-mixin.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2024 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';

package/src/polylit-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { dedupeMixin } from '@open-wc/dedupe-mixin';
@@ -93,6 +93,9 @@ const PolylitMixinImplementation = (superclass) => {
 
       let result = defaultDescriptor;
 
+      // Set the key for this property
+      this.getOrCreateMap('__propKeys').set(name, key);
+
       if (options.sync) {
         result = {
           get: defaultDescriptor.get,
@@ -232,6 +235,26 @@ const PolylitMixinImplementation = (superclass) => {
       }
     }
 
+    /**
+     * Set several properties at once and perform synchronous update.
+     * @protected
+     */
+    setProperties(props) {
+      Object.entries(props).forEach(([name, value]) => {
+        // Use private key and not setter to not trigger
+        // update for properties marked as `sync: true`.
+        const key = this.constructor.__propKeys.get(name);
+        const oldValue = this[key];
+        this[key] = value;
+        this.requestUpdate(name, oldValue);
+      });
+
+      // Perform sync update
+      if (this.hasUpdated) {
+        this.performUpdate();
+      }
+    }
+
     /** @protected */
     _createMethodObserver(observer) {
       const dynamicObservers = getOrCreateMap(this, '__dynamicObservers');

package/src/resize-mixin.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2024 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';

package/src/resize-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';

package/src/slot-child-observe-controller.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2022 - 2023 Vaadin Ltd.
+ * Copyright (c) 2022 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { SlotController } from './slot-controller.js';

package/src/slot-child-observe-controller.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2022 - 2023 Vaadin Ltd.
+ * Copyright (c) 2022 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { SlotController } from './slot-controller.js';

package/src/slot-controller.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { ReactiveController } from 'lit';

package/src/slot-controller.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { isEmptyTextNode } from './dom-utils.js';
@@ -111,12 +111,12 @@ export class SlotController extends EventTarget {
         if (slotName !== '') {
           node.setAttribute('slot', slotName);
         }
-        this.node = node;
         this.defaultNode = node;
       }
     }
 
     if (node) {
+      this.node = node;
       host.appendChild(node);
     }
 

package/src/slot-observer.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2023 Vaadin Ltd.
+ * Copyright (c) 2023 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 

package/src/slot-observer.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2023 Vaadin Ltd.
+ * Copyright (c) 2023 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 

package/src/slot-styles-mixin.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2024 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';

package/src/slot-styles-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';

package/src/templates.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 

package/src/tooltip-controller.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2022 - 2023 Vaadin Ltd.
+ * Copyright (c) 2022 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { SlotController } from './slot-controller.js';

package/src/tooltip-controller.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2022 - 2023 Vaadin Ltd.
+ * Copyright (c) 2022 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { SlotController } from './slot-controller.js';

package/src/unique-id-utils.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 

package/src/unique-id-utils.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 

package/src/url-utils.d.ts

@@ -1,11 +1,15 @@
 /**
  * @license
- * Copyright (c) 2023 Vaadin Ltd.
+ * Copyright (c) 2023 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
 /**
- * Check if two paths can be resolved as URLs
- * with the same origin and pathname.
+ * Checks if two paths match based on their origin, pathname, and query parameters.
+ *
+ * The function matches an actual URL against an expected URL to see if they share
+ * the same base origin (like https://example.com), the same path (like /path/to/page),
+ * and if the actual URL contains at least all the query parameters with the same values
+ * from the expected URL.
  */
-export declare function matchPaths(path1: string, path2: string): boolean;
+export declare function matchPaths(actual: string, expected: string): boolean;

package/src/url-utils.js

@@ -1,19 +1,41 @@
 /**
  * @license
- * Copyright (c) 2023 Vaadin Ltd.
+ * Copyright (c) 2023 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
 /**
- * Check if two paths can be resolved as URLs
- * with the same origin and pathname.
+ * Checks if one set of URL parameters contains all the parameters
+ * with the same values from another set.
  *
- * @param {string} path1
- * @param {string} path2
+ * @param {URLSearchParams} actual
+ * @param {URLSearchParams} expected
  */
-export function matchPaths(path1, path2) {
+function containsQueryParams(actual, expected) {
+  return [...expected.entries()].every(([key, value]) => {
+    return actual.getAll(key).includes(value);
+  });
+}
+
+/**
+ * Checks if two paths match based on their origin, pathname, and query parameters.
+ *
+ * The function matches an actual URL against an expected URL to see if they share
+ * the same base origin (like https://example.com), the same path (like /path/to/page),
+ * and if the actual URL contains at least all the query parameters with the same values
+ * from the expected URL.
+ *
+ * @param {string} actual The actual URL to match.
+ * @param {string} expected The expected URL to match.
+ */
+export function matchPaths(actual, expected) {
   const base = document.baseURI;
-  const url1 = new URL(path1, base);
-  const url2 = new URL(path2, base);
-  return url1.origin === url2.origin && url1.pathname === url2.pathname;
+  const actualUrl = new URL(actual, base);
+  const expectedUrl = new URL(expected, base);
+
+  return (
+    actualUrl.origin === expectedUrl.origin &&
+    actualUrl.pathname === expectedUrl.pathname &&
+    containsQueryParams(actualUrl.searchParams, expectedUrl.searchParams)
+  );
 }

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

@@ -1,11 +1,11 @@
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 /* 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';
@@ -55,6 +55,13 @@ export class IronListAdapter {
     this._scrollLineHeight = this._getScrollLineHeight();
     this.scrollTarget.addEventListener('wheel', (e) => this.__onWheel(e));
 
+    this.scrollTarget.addEventListener('virtualizer-element-focused', (e) => this.__onElementFocused(e));
+    this.elementsContainer.addEventListener('focusin', (e) => {
+      this.scrollTarget.dispatchEvent(
+        new CustomEvent('virtualizer-element-focused', { detail: { element: this.__getFocusedElement() } }),
+      );
+    });
+
     if (this.reorderElements) {
       // Reordering the physical elements cancels the user's grab of the scroll bar handle on Safari.
       // Need to defer reordering until the user lets go of the scroll bar handle.
@@ -82,6 +89,10 @@ export class IronListAdapter {
     return this.lastVisibleIndex + this._vidxOffset;
   }
 
+  get _maxVirtualIndexOffset() {
+    return this.size - this._virtualCount;
+  }
+
   __hasPlaceholders() {
     return this.__getVisibleElements().some((el) => el.__virtualizerPlaceholder);
   }
@@ -106,7 +117,7 @@ export class IronListAdapter {
     let targetVirtualIndex = Math.floor((index / this.size) * this._virtualCount);
     if (this._virtualCount - targetVirtualIndex < visibleElementCount) {
       targetVirtualIndex = this._virtualCount - (this.size - index);
-      this._vidxOffset = this.size - this._virtualCount;
+      this._vidxOffset = this._maxVirtualIndexOffset;
     } else if (targetVirtualIndex < visibleElementCount) {
       if (index < OFFSET_ADJUST_MIN_THRESHOLD) {
         targetVirtualIndex = index;
@@ -136,7 +147,6 @@ export class IronListAdapter {
   }
 
   flush() {
-    const startPhysicalCount = this._physicalCount;
     // The scroll target is hidden.
     if (this.scrollTarget.offsetHeight === 0) {
       return;
@@ -154,11 +164,6 @@ export class IronListAdapter {
     if (this.__debouncerWheelAnimationFrame) {
       this.__debouncerWheelAnimationFrame.flush();
     }
-
-    if (this._physicalCount !== startPhysicalCount) {
-      // Flushing again until physical count stabilizes fixes https://github.com/vaadin/flow-components/issues/5595#issuecomment-1770278913
-      this.flush();
-    }
   }
 
   update(startIndex = 0, endIndex = this.size - 1) {
@@ -227,6 +232,7 @@ export class IronListAdapter {
     // Clean up temporary placeholder sizing
     if (el.__virtualizerPlaceholder) {
       el.style.paddingTop = '';
+      el.style.opacity = '';
       el.__virtualizerPlaceholder = false;
     }
 
@@ -251,6 +257,7 @@ export class IronListAdapter {
         // Assign a temporary placeholder sizing to elements that would otherwise end up having
         // no height.
         el.style.paddingTop = `${this.__placeholderHeight}px`;
+        el.style.opacity = '0';
         el.__virtualizerPlaceholder = true;
 
         // Manually schedule the resize handler to make sure the placeholder padding is
@@ -297,24 +304,41 @@ export class IronListAdapter {
       this._debouncers._increasePoolIfNeeded.cancel();
     }
 
+    // Prevent element update while the scroll position is being restored
+    this.__preventElementUpdates = true;
+
+    // Record the scroll position before changing the size
+    let fvi; // First visible index
+    let fviOffsetBefore; // Scroll offset of the first visible index
+    if (size > 0) {
+      fvi = this.adjustedFirstVisibleIndex;
+      fviOffsetBefore = this.__getIndexScrollOffset(fvi);
+    }
+
     // Change the size
     this.__size = size;
 
-    if (!this._physicalItems) {
-      // Not initialized yet
-      this._itemsChanged({
-        path: 'items',
-      });
-      this.__preventElementUpdates = true;
-      flush();
-      this.__preventElementUpdates = false;
-    } else {
-      // Already initialized, just update _virtualCount
-      this._updateScrollerSize();
-      this._virtualCount = this.items.length;
-      this._render();
+    this._itemsChanged({
+      path: 'items',
+    });
+    flush();
+
+    // Try to restore the scroll position if the new size is larger than 0
+    if (size > 0) {
+      fvi = Math.min(fvi, size - 1);
+      // Note, calling scrollToIndex also updates the virtual index offset,
+      // causing the virtualizer to add more items when size is increased,
+      // and remove exceeding items when size is decreased.
+      this.scrollToIndex(fvi);
+
+      const fviOffsetAfter = this.__getIndexScrollOffset(fvi);
+      if (fviOffsetBefore !== undefined && fviOffsetAfter !== undefined) {
+        this._scrollTop += fviOffsetBefore - fviOffsetAfter;
+      }
     }
 
+    this.__preventElementUpdates = false;
+
     // When reducing size while invisible, iron-list does not update items, so
     // their hidden state is not updated and their __lastUpdatedIndex is not
     // reset. In that case force an update here.
@@ -326,10 +350,12 @@ export class IronListAdapter {
       requestAnimationFrame(() => this._resizeHandler());
     }
 
-    // Schedule and flush a resize handler. This will cause a
-    // re-render for the elements.
+    // 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 */
@@ -425,6 +451,75 @@ export class IronListAdapter {
   /** @private */
   toggleScrollListener() {}
 
+  /** @private */
+  __getFocusedElement(visibleElements = this.__getVisibleElements()) {
+    return visibleElements.find(
+      (element) =>
+        element.contains(this.elementsContainer.getRootNode().activeElement) ||
+        element.contains(this.scrollTarget.getRootNode().activeElement),
+    );
+  }
+
+  /** @private */
+  __nextFocusableSiblingMissing(focusedElement, visibleElements) {
+    return (
+      // Check if focused element is the last visible DOM element
+      visibleElements.indexOf(focusedElement) === visibleElements.length - 1 &&
+      // ...while there are more items available
+      this.size > focusedElement.__virtualIndex + 1
+    );
+  }
+
+  /** @private */
+  __previousFocusableSiblingMissing(focusedElement, visibleElements) {
+    return (
+      // Check if focused element is the first visible DOM element
+      visibleElements.indexOf(focusedElement) === 0 &&
+      // ...while there are preceding items available
+      focusedElement.__virtualIndex > 0
+    );
+  }
+
+  /** @private */
+  __onElementFocused(e) {
+    if (!this.reorderElements) {
+      return;
+    }
+
+    const focusedElement = e.detail.element;
+    if (!focusedElement) {
+      return;
+    }
+
+    // User has tabbed to or within a virtualizer element.
+    // Check if a next or previous focusable sibling is missing while it should be there (so the user can continue tabbing).
+    // The focusable sibling might be missing due to the elements not yet being in the correct DOM order.
+    // First try flushing (which also flushes any active __scrollReorderDebouncer).
+    const visibleElements = this.__getVisibleElements();
+    if (
+      this.__previousFocusableSiblingMissing(focusedElement, visibleElements) ||
+      this.__nextFocusableSiblingMissing(focusedElement, visibleElements)
+    ) {
+      this.flush();
+    }
+
+    // If the focusable sibling is still missing (because the focused element is at the edge of the viewport and
+    // the virtual scrolling logic hasn't had the need to recycle elements), scroll the virtualizer just enough to
+    // have the focusable sibling inside the visible viewport to force the virtualizer to recycle.
+    const reorderedVisibleElements = this.__getVisibleElements();
+    if (this.__nextFocusableSiblingMissing(focusedElement, reorderedVisibleElements)) {
+      this._scrollTop +=
+        Math.ceil(focusedElement.getBoundingClientRect().bottom) -
+        Math.floor(this.scrollTarget.getBoundingClientRect().bottom - 1);
+      this.flush();
+    } else if (this.__previousFocusableSiblingMissing(focusedElement, reorderedVisibleElements)) {
+      this._scrollTop -=
+        Math.ceil(this.scrollTarget.getBoundingClientRect().top + 1) -
+        Math.floor(focusedElement.getBoundingClientRect().top);
+      this.flush();
+    }
+  }
+
   _scrollHandler() {
     // The scroll target is hidden.
     if (this.scrollTarget.offsetHeight === 0) {
@@ -662,13 +757,7 @@ export class IronListAdapter {
 
     // Which row to use as a target?
     const visibleElements = this.__getVisibleElements();
-
-    const elementWithFocus = visibleElements.find(
-      (element) =>
-        element.contains(this.elementsContainer.getRootNode().activeElement) ||
-        element.contains(this.scrollTarget.getRootNode().activeElement),
-    );
-    const targetElement = elementWithFocus || visibleElements[0];
+    const targetElement = this.__getFocusedElement(visibleElements) || visibleElements[0];
     if (!targetElement) {
       // All elements are hidden, don't reorder
       return;
@@ -703,15 +792,16 @@ export class IronListAdapter {
 
   /** @private */
   _adjustVirtualIndexOffset(delta) {
+    const maxOffset = this._maxVirtualIndexOffset;
+
     if (this._virtualCount >= this.size) {
       this._vidxOffset = 0;
     } else if (this.__skipNextVirtualIndexAdjust) {
       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 offset = scale * this.size;
-      this._vidxOffset = Math.round(offset - scale * this._virtualCount);
+      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
       const oldOffset = this._vidxOffset;
@@ -730,7 +820,6 @@ export class IronListAdapter {
       }
 
       // Near end
-      const maxOffset = this.size - this._virtualCount;
       if (this._scrollTop >= this._maxScrollTop && this._maxScrollTop > 0) {
         this._vidxOffset = maxOffset;
         if (oldOffset !== this._vidxOffset) {