@vaadin/component-base 25.2.6 → 25.2.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/component-base",
-  "version": "25.2.6",
+  "version": "25.2.8",
   "publishConfig": {
     "access": "public"
   },
@@ -38,11 +38,11 @@
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "~25.2.6",
-    "@vaadin/test-runner-commands": "~25.2.6",
+    "@vaadin/chai-plugins": "~25.2.8",
+    "@vaadin/test-runner-commands": "~25.2.8",
     "@vaadin/testing-helpers": "^2.0.0",
     "sinon": "^22.0.0"
   },
   "customElements": "custom-elements.json",
-  "gitHead": "c352225ff025e6163c5e290d6028a42003696441"
+  "gitHead": "46ec4be23967061d203ca4dad6e7b8291d4edd9c"
 }

package/src/define.js

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

package/src/slot-observer.d.ts

@@ -14,12 +14,18 @@
  * bubbling to it and diffs the **union** of `assignedNodes({ flatten: true })`
  * every descendant `<slot>`. Cross-slot reassignment of the same node does
  * not change the union and therefore fires no callback.
+ *
+ * The initial pass runs in a microtask by default. Use the `syncInitial` option
+ * when the callback sets state that affects the layout of the component, so that
+ * it has its final size once connected. Otherwise consumers that measure it
+ * synchronously, such as auto-width columns in `<vaadin-grid>`, would measure the
+ * component before that state is applied.
  */
 export class SlotObserver {
   constructor(
     target: HTMLSlotElement | DocumentFragment,
     callback: (info: { addedNodes: Node[]; currentNodes: Node[]; movedNodes: Node[]; removedNodes: Node[] }) => void,
-    forceInitial?: boolean,
+    options?: { forceInitial?: boolean; syncInitial?: boolean },
   );
 
   readonly target: HTMLSlotElement | DocumentFragment;

package/src/slot-observer.js

@@ -14,9 +14,20 @@
  * bubbling to it and diffs the **union** of `assignedNodes({ flatten: true })`
  * across every descendant `<slot>`. Cross-slot reassignment of the same node
  * does not change the union and therefore fires no callback.
+ *
+ * The initial pass runs in a microtask by default. Use the `syncInitial` option
+ * when the callback sets state that affects the layout of the component, so that
+ * it has its final size once connected. Otherwise consumers that measure it
+ * synchronously, such as auto-width columns in `<vaadin-grid>`, would measure the
+ * component before that state is applied.
  */
 export class SlotObserver {
-  constructor(target, callback, forceInitial) {
+  /**
+   * @param {HTMLSlotElement | DocumentFragment} target
+   * @param {Function} callback
+   * @param {{ forceInitial?: boolean, syncInitial?: boolean }} options
+   */
+  constructor(target, callback, options = {}) {
     /** @type {HTMLSlotElement | DocumentFragment} */
     this.target = target;
 
@@ -24,7 +35,7 @@ export class SlotObserver {
     this.callback = callback;
 
     /** @type {boolean} */
-    this.forceInitial = forceInitial;
+    this.forceInitial = options.forceInitial;
 
     /** @type {Node[]} */
     this._storedNodes = [];
@@ -40,7 +51,12 @@ export class SlotObserver {
     };
 
     this.connect();
-    this._schedule();
+
+    if (options.syncInitial) {
+      this.flush();
+    } else {
+      this._schedule();
+    }
   }
 
   /**
@@ -69,7 +85,11 @@ export class SlotObserver {
       this._scheduled = true;
 
       queueMicrotask(() => {
-        this.flush();
+        // Skip if the nodes have already been processed by an explicit `flush()`
+        // in the meantime, to avoid running the diff a second time for nothing.
+        if (this._scheduled) {
+          this.flush();
+        }
       });
     }
   }

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

@@ -22,7 +22,6 @@ export class IronListAdapter {
     reorderElements,
     elementsContainer,
     __disableHeightPlaceholder,
-    __alwaysUpdateScrollerSize,
   }) {
     this.isAttached = true;
     this._vidxOffset = 0;
@@ -38,12 +37,6 @@ export class IronListAdapter {
     // elements with a non-zero height. Not for public use.
     this.__disableHeightPlaceholder = __disableHeightPlaceholder ?? false;
 
-    // Internal option: a predicate that, when it returns true, makes the scroller
-    // height always be applied instead of amortized (see `_updateScrollerSize`).
-    // Used by components whose height tracks the content exactly (e.g. the grid's
-    // `allRowsVisible` mode). Not for public use.
-    this.__alwaysUpdateScrollerSize = __alwaysUpdateScrollerSize;
-
     // Iron-list uses this value to determine how many pages of elements to render
     this._maxPages = 1.3;
 
@@ -223,11 +216,6 @@ export class IronListAdapter {
     this.__afterElementsUpdated(updatedElements);
   }
 
-  /** @override */
-  _updateScrollerSize(forceUpdate) {
-    super._updateScrollerSize(forceUpdate || !!this.__alwaysUpdateScrollerSize?.());
-  }
-
   /**
    * Updates the height for a given set of items.
    *
@@ -426,6 +414,8 @@ export class IronListAdapter {
       requestAnimationFrame(() => this._resizeHandler());
     }
 
+    this._updateScrollerSize(true);
+
     // 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