@vaadin/component-base 25.3.0-alpha2 → 25.3.0-alpha4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/component-base",
-  "version": "25.3.0-alpha2",
+  "version": "25.3.0-alpha4",
   "publishConfig": {
     "access": "public"
   },
@@ -38,11 +38,11 @@
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.3.0-alpha2",
-    "@vaadin/test-runner-commands": "25.3.0-alpha2",
+    "@vaadin/chai-plugins": "25.3.0-alpha4",
+    "@vaadin/test-runner-commands": "25.3.0-alpha4",
     "@vaadin/testing-helpers": "^2.0.0",
     "sinon": "^22.0.0"
   },
   "customElements": "custom-elements.json",
-  "gitHead": "52eba6153ecf8bfaae44bcb727595e77d90b963c"
+  "gitHead": "ff0efcd52d3b8a081e8101d36cf7bef65ed71cb1"
 }

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

@@ -15,13 +15,6 @@ export class Cache {
    */
   context;
 
-  /**
-   * The number of items to display per page.
-   *
-   * @type {number}
-   */
-  pageSize;
-
   /**
    * An array of cached items.
    *
@@ -50,6 +43,14 @@ export class Cache {
    */
   #subCacheByIndex = {};
 
+  /**
+   * The number of items per page.
+   *
+   * @type {number}
+   * @private
+   */
+  #pageSize;
+
   /**
    * The number of items.
    *
@@ -123,6 +124,29 @@ export class Cache {
     return this.#flatSize;
   }
 
+  /**
+   * The number of items per page.
+   *
+   * @return {number}
+   */
+  get pageSize() {
+    return this.#pageSize;
+  }
+
+  /**
+   * Sets the number of items per page for this cache and its descendants.
+   * Changing the page size discards all pending page requests.
+   *
+   * @param {number} pageSize
+   */
+  set pageSize(pageSize) {
+    this.#pageSize = pageSize;
+    this.pendingRequests = {};
+    this.subCaches.forEach((subCache) => {
+      subCache.pageSize = pageSize;
+    });
+  }
+
   /**
    * The number of items.
    *

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

@@ -29,13 +29,6 @@ export class DataProviderController extends EventTarget {
    */
   dataProviderParams;
 
-  /**
-   * A number of items to display per page.
-   *
-   * @type {number}
-   */
-  pageSize;
-
   /**
    * A callback that returns whether the given item is expanded.
    *
@@ -78,14 +71,13 @@ export class DataProviderController extends EventTarget {
   ) {
     super();
     this.host = host;
-    this.pageSize = pageSize;
     this.getItemId = getItemId;
     this.isExpanded = isExpanded;
     this.placeholder = placeholder;
     this.isPlaceholder = isPlaceholder;
     this.dataProvider = dataProvider;
     this.dataProviderParams = dataProviderParams;
-    this.rootCache = this.#createRootCache(size);
+    this.rootCache = this.#createRootCache(pageSize, size);
   }
 
   /**
@@ -95,6 +87,13 @@ export class DataProviderController extends EventTarget {
     return this.rootCache.flatSize;
   }
 
+  /**
+   * The number of items per page in the root cache.
+   */
+  get pageSize() {
+    return this.rootCache.pageSize;
+  }
+
   /** @private */
   get #cacheContext() {
     return {
@@ -113,13 +112,12 @@ export class DataProviderController extends EventTarget {
   }
 
   /**
-   * Sets the page size and clears the cache.
+   * Sets the number of items per page in the root cache and any of its descendants.
    *
    * @param {number} pageSize
    */
   setPageSize(pageSize) {
-    this.pageSize = pageSize;
-    this.clearCache();
+    this.rootCache.pageSize = pageSize;
   }
 
   /**
@@ -129,7 +127,6 @@ export class DataProviderController extends EventTarget {
    */
   setDataProvider(dataProvider) {
     this.dataProvider = dataProvider;
-    this.clearCache();
   }
 
   /**
@@ -143,7 +140,7 @@ export class DataProviderController extends EventTarget {
    * Clears the cache.
    */
   clearCache() {
-    this.rootCache = this.#createRootCache(this.rootCache.size);
+    this.rootCache = this.#createRootCache(this.rootCache.pageSize, this.rootCache.size);
   }
 
   /**
@@ -238,8 +235,8 @@ export class DataProviderController extends EventTarget {
   }
 
   /** @private */
-  #createRootCache(size) {
-    return new Cache(this.#cacheContext, this.pageSize, size);
+  #createRootCache(pageSize, size) {
+    return new Cache(this.#cacheContext, pageSize, size);
   }
 
   /** @private */
@@ -250,7 +247,7 @@ export class DataProviderController extends EventTarget {
 
     let params = {
       page,
-      pageSize: this.pageSize,
+      pageSize: cache.pageSize,
       parentItem: cache.parentItem,
     };
 

package/src/define.js

@@ -13,7 +13,7 @@ function dashToCamelCase(dash) {
 
 const experimentalMap = {};
 
-export function defineCustomElement(CustomElement, version = '25.3.0-alpha2') {
+export function defineCustomElement(CustomElement, version = '25.3.0-alpha4') {
   Object.defineProperty(CustomElement, 'version', {
     get() {
       return version;

package/src/styles/style-props.js

@@ -83,10 +83,12 @@ addGlobalStyles(
         --_vaadin-icon-arrow-up: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>');
         --_vaadin-icon-calendar: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 2v4"/><path d="M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/></svg>');
         --_vaadin-icon-checkmark: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>');
+        --_vaadin-icon-checkmark-small: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>');
         --_vaadin-icon-chevron-down: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>');
         --_vaadin-icon-chevron-right: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>');
         --_vaadin-icon-clock: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 6v6l4 2"/><circle cx="12" cy="12" r="10"/></svg>');
         --_vaadin-icon-cross: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /></svg>');
+        --_vaadin-icon-cross-small: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /></svg>');
         --_vaadin-icon-drag: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M11 7c0 .82843-.6716 1.5-1.5 1.5C8.67157 8.5 8 7.82843 8 7s.67157-1.5 1.5-1.5c.8284 0 1.5.67157 1.5 1.5Zm0 5c0 .8284-.6716 1.5-1.5 1.5-.82843 0-1.5-.6716-1.5-1.5s.67157-1.5 1.5-1.5c.8284 0 1.5.6716 1.5 1.5Zm0 5c0 .8284-.6716 1.5-1.5 1.5-.82843 0-1.5-.6716-1.5-1.5s.67157-1.5 1.5-1.5c.8284 0 1.5.6716 1.5 1.5Zm5-10c0 .82843-.6716 1.5-1.5 1.5S13 7.82843 13 7s.6716-1.5 1.5-1.5S16 6.17157 16 7Zm0 5c0 .8284-.6716 1.5-1.5 1.5S13 12.8284 13 12s.6716-1.5 1.5-1.5 1.5.6716 1.5 1.5Zm0 5c0 .8284-.6716 1.5-1.5 1.5S13 17.8284 13 17s.6716-1.5 1.5-1.5 1.5.6716 1.5 1.5Z" fill="currentColor"/></svg>');
         --_vaadin-icon-ellipsis: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>');
         --_vaadin-icon-eye: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /></svg>');

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

@@ -88,7 +88,12 @@ export class IronListAdapter {
     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.
-      this.scrollTarget.addEventListener('mousedown', () => {
+      this.scrollTarget.addEventListener('mousedown', (event) => {
+        // Only handle clicks on the scroll target itself
+        if (event.target !== this.scrollTarget) {
+          return;
+        }
+
         this.__mouseDown = true;
       });
       this.scrollTarget.addEventListener('mouseup', () => {