@vaadin/component-base 25.1.0-beta1 → 25.1.0-beta3

package/custom-elements.json

@@ -97,25 +97,22 @@
             {
               "kind": "field",
               "name": "i18n",
-              "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nShould be overridden by subclasses to provide a custom JSDoc with the\ndefault I18N properties.",
-              "return": {
-                "type": {
-                  "text": "Object"
-                }
+              "privacy": "public",
+              "type": {
+                "text": "Object"
               },
-              "parameters": [
-                {
-                  "name": "value",
-                  "type": {
-                    "text": "Object"
-                  }
-                }
-              ]
+              "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nShould be overridden by subclasses to provide a custom JSDoc with the\ndefault I18N properties.",
+              "attribute": "i18n"
             }
           ],
           "attributes": [
             {
-              "name": "i18n"
+              "name": "i18n",
+              "type": {
+                "text": "Object"
+              },
+              "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nShould be overridden by subclasses to provide a custom JSDoc with the\ndefault I18N properties.",
+              "fieldName": "i18n"
             }
           ],
           "parameters": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/component-base",
-  "version": "25.1.0-beta1",
+  "version": "25.1.0-beta3",
   "publishConfig": {
     "access": "public"
   },
@@ -38,11 +38,11 @@
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.1.0-beta1",
-    "@vaadin/test-runner-commands": "25.1.0-beta1",
+    "@vaadin/chai-plugins": "25.1.0-beta3",
+    "@vaadin/test-runner-commands": "25.1.0-beta3",
     "@vaadin/testing-helpers": "^2.0.0",
-    "sinon": "^21.0.0"
+    "sinon": "^21.0.2"
   },
   "customElements": "custom-elements.json",
-  "gitHead": "0ccf77c385fc6a92ac2a6344ce8804b94956226d"
+  "gitHead": "4251850231a42298fda23b83928da588831cdb5d"
 }

package/src/define.js

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

package/src/i18n-mixin.js

@@ -41,6 +41,12 @@ export const I18nMixin = (defaultI18n, superClass) =>
   class I18nMixinClass extends superClass {
     static get properties() {
       return {
+        // Even though the property is overridden by a custom getter/setter, it needs to be declared here to initialize
+        // __effectiveI18n properly if the i18n property is set before upgrading the element.
+        i18n: {
+          type: Object,
+        },
+
         /** @private */
         __effectiveI18n: {
           type: Object,
@@ -49,28 +55,12 @@ export const I18nMixin = (defaultI18n, superClass) =>
       };
     }
 
-    static get observedAttributes() {
-      return [...super.observedAttributes, 'i18n'];
-    }
-
     constructor() {
       super();
 
       this.i18n = deepMerge({}, defaultI18n);
     }
 
-    /** @protected */
-    attributeChangedCallback(name, oldValue, newValue) {
-      super.attributeChangedCallback(name, oldValue, newValue);
-      if (name === 'i18n') {
-        try {
-          this.i18n = JSON.parse(newValue);
-        } catch (_) {
-          // Invalid JSON, ignore
-        }
-      }
-    }
-
     /**
      * The object used to localize this component. To change the default
      * localization, replace this with an object that provides all properties, or
@@ -79,22 +69,12 @@ export const I18nMixin = (defaultI18n, superClass) =>
      * Should be overridden by subclasses to provide a custom JSDoc with the
      * default I18N properties.
      *
-     * @returns {Object}
+     * @type {Object}
      */
     get i18n() {
       return this.__customI18n;
     }
 
-    /**
-     * The object used to localize this component. To change the default
-     * localization, replace this with an object that provides all properties, or
-     * just the individual properties you want to change.
-     *
-     * Should be overridden by subclasses to provide a custom JSDoc with the
-     * default I18N properties.
-     *
-     * @param {Object} value
-     */
     set i18n(value) {
       if (value === this.__customI18n) {
         return;

package/src/styles/style-props.js

@@ -91,6 +91,7 @@ addGlobalStyles(
         --_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-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>');
         --_vaadin-icon-eye-slash: 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="M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88" /></svg>');
+        --_vaadin-icon-file: 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="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/></svg>');
         --_vaadin-icon-fullscreen: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15" /></svg>');
         --_vaadin-icon-image: 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"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>');
         --_vaadin-icon-link: 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="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>');

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

@@ -333,6 +333,19 @@ export class IronListAdapter {
     return element ? this.scrollTarget.getBoundingClientRect().top - element.getBoundingClientRect().top : undefined;
   }
 
+  /**
+   * Adjusts the scroll position to compensate for any offset change of a given index.
+   * @param {number} index - The index whose scroll offset to restore
+   * @param {number|undefined} offsetBefore - The scroll offset of the index before the change
+   * @private
+   */
+  __restoreScrollOffset(index, offsetBefore) {
+    const offsetAfter = this.__getIndexScrollOffset(index);
+    if (offsetBefore !== undefined && offsetAfter !== undefined) {
+      this._scrollTop += offsetBefore - offsetAfter;
+    }
+  }
+
   get size() {
     return this.__size;
   }
@@ -350,13 +363,12 @@ export class IronListAdapter {
       this._debouncers._increasePoolIfNeeded.cancel();
     }
 
-    // Prevent element update while the scroll position is being restored
-    this.__preventElementUpdates = true;
+    const shouldRestoreScrollPosition = size > 0 && this._scrollTop > 0;
 
     // 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) {
+    if (shouldRestoreScrollPosition) {
       fvi = this.adjustedFirstVisibleIndex;
       fviOffsetBefore = this.__getIndexScrollOffset(fvi);
     }
@@ -364,23 +376,26 @@ export class IronListAdapter {
     // Change the size
     this.__size = size;
 
+    // Attempts to update elements during _itemsChanged and the subsequent
+    // scrollToIndex should be skipped when the scroll position needs to be
+    // restored (scroll position > 0 before size change). Otherwise, these
+    // element updates can cause the component to make incorrect server
+    // requests in its updateElement callback.
+    this.__preventElementUpdates = shouldRestoreScrollPosition;
+
     this._itemsChanged({
       path: 'items',
     });
     flush();
 
-    // Try to restore the scroll position if the new size is larger than 0
-    if (size > 0) {
+    if (shouldRestoreScrollPosition) {
       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.__restoreScrollOffset(fvi, fviOffsetBefore);
     }
 
     this.__preventElementUpdates = false;
@@ -396,9 +411,16 @@ export class IronListAdapter {
       requestAnimationFrame(() => this._resizeHandler());
     }
 
-    // Schedule and flush a resize handler
+    // Re-render items once the scroll position has been restored.
+    // This call also updates the cached scrollTarget height and
+    // rechecks whether more virtual elements are needed, since the
+    // scrollTarget's height may change after the scrollContainer's
+    // height is determined and set, requiring more elements to fill
+    // the viewport (e.g., in combo-box, where the scroller height
+    // depends on the height of #selector element in the shadow DOM).
     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);
@@ -839,27 +861,43 @@ export class IronListAdapter {
       const threshold = OFFSET_ADJUST_MIN_THRESHOLD;
       const maxShift = 100;
 
+      // Lazily capture scroll state before the first offset change,
+      // so it can be restored afterwards.
+      let fvi, fviOffsetBefore;
+      const captureScrollState = () => {
+        fvi = this.adjustedFirstVisibleIndex;
+        fviOffsetBefore = this.__getIndexScrollOffset(fvi);
+      };
+
       // Near start
       if (this._scrollTop === 0) {
-        this._vidxOffset = 0;
-        if (oldOffset !== this._vidxOffset) {
+        if (oldOffset !== 0) {
+          captureScrollState();
+          this._vidxOffset = 0;
           super.scrollToIndex(0);
         }
       } else if (this.firstVisibleIndex < threshold && this._vidxOffset > 0) {
+        captureScrollState();
         this._vidxOffset -= Math.min(this._vidxOffset, maxShift);
         super.scrollToIndex(this.firstVisibleIndex + (oldOffset - this._vidxOffset));
       }
 
       // Near end
       if (this._scrollTop >= this._maxScrollTop && this._maxScrollTop > 0) {
-        this._vidxOffset = maxOffset;
-        if (oldOffset !== this._vidxOffset) {
+        if (oldOffset !== maxOffset) {
+          captureScrollState();
+          this._vidxOffset = maxOffset;
           super.scrollToIndex(this._virtualCount - 1);
         }
       } else if (this.firstVisibleIndex > this._virtualCount - threshold && this._vidxOffset < maxOffset) {
+        captureScrollState();
         this._vidxOffset += Math.min(maxOffset - this._vidxOffset, maxShift);
         super.scrollToIndex(this.firstVisibleIndex - (this._vidxOffset - oldOffset));
       }
+
+      if (fvi !== undefined) {
+        this.__restoreScrollOffset(fvi, fviOffsetBefore);
+      }
     }
   }
 }