@vaadin/component-base 24.0.0-beta1 → 24.0.0-beta2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/component-base",
-  "version": "24.0.0-beta1",
+  "version": "24.0.0-beta2",
   "publishConfig": {
     "access": "public"
   },
@@ -42,5 +42,5 @@
     "@vaadin/testing-helpers": "^0.4.0",
     "sinon": "^13.0.2"
   },
-  "gitHead": "c5b48921a62482746df8e46994b37e1490fec27e"
+  "gitHead": "00086f1f6d487f042f189c9b9ecd7ba736960888"
 }

package/src/element-mixin.js

@@ -45,7 +45,7 @@ const registered = new Set();
 export const ElementMixin = (superClass) =>
   class VaadinElementMixin extends DirMixin(superClass) {
     static get version() {
-      return '24.0.0-beta1';
+      return '24.0.0-beta2';
     }
 
     /** @protected */

package/src/iron-list-core.js

@@ -23,6 +23,7 @@ const DEFAULT_PHYSICAL_COUNT = 3;
  * If something in the scrolling engine needs to be changed
  * for the virtualizer's purposes, override a function
  * in virtualizer-iron-list-adapter.js instead of changing it here.
+ * If a function on this file is no longer needed, the code can be safely deleted.
  *
  * This will allow us to keep the iron-list code here as close to
  * the original as possible.
@@ -563,39 +564,6 @@ export const ironList = {
     return this._virtualStart + (this._physicalCount - this._physicalStart) + pidx;
   },
 
-  /**
-   * Updates the height for a given set of items.
-   *
-   * @param {!Array<number>=} itemSet
-   */
-  _updateMetrics(itemSet) {
-    // Make sure we distributed all the physical items
-    // so we can measure them.
-    flush();
-
-    let newPhysicalSize = 0;
-    let oldPhysicalSize = 0;
-    const prevAvgCount = this._physicalAverageCount;
-    const prevPhysicalAvg = this._physicalAverage;
-
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    this._iterateItems((pidx, vidx) => {
-      oldPhysicalSize += this._physicalSizes[pidx];
-      this._physicalSizes[pidx] = this._physicalItems[pidx].offsetHeight;
-      newPhysicalSize += this._physicalSizes[pidx];
-      this._physicalAverageCount += this._physicalSizes[pidx] ? 1 : 0;
-    }, itemSet);
-
-    this._physicalSize = this._physicalSize + newPhysicalSize - oldPhysicalSize;
-
-    // Update the average if it measured something.
-    if (this._physicalAverageCount !== prevAvgCount) {
-      this._physicalAverage = Math.round(
-        (prevPhysicalAvg * prevAvgCount + newPhysicalSize) / this._physicalAverageCount,
-      );
-    }
-  },
-
   /**
    * Updates the position of the physical items.
    */

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

@@ -143,6 +143,56 @@ export class IronListAdapter {
     });
   }
 
+  /**
+   * Updates the height for a given set of items.
+   *
+   * @param {!Array<number>=} itemSet
+   */
+  _updateMetrics(itemSet) {
+    // Make sure we distributed all the physical items
+    // so we can measure them.
+    flush();
+
+    let newPhysicalSize = 0;
+    let oldPhysicalSize = 0;
+    const prevAvgCount = this._physicalAverageCount;
+    const prevPhysicalAvg = this._physicalAverage;
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    this._iterateItems((pidx, vidx) => {
+      oldPhysicalSize += this._physicalSizes[pidx];
+      this._physicalSizes[pidx] = Math.ceil(this.__getBorderBoxHeight(this._physicalItems[pidx]));
+      newPhysicalSize += this._physicalSizes[pidx];
+      this._physicalAverageCount += this._physicalSizes[pidx] ? 1 : 0;
+    }, itemSet);
+
+    this._physicalSize = this._physicalSize + newPhysicalSize - oldPhysicalSize;
+
+    // Update the average if it measured something.
+    if (this._physicalAverageCount !== prevAvgCount) {
+      this._physicalAverage = Math.round(
+        (prevPhysicalAvg * prevAvgCount + newPhysicalSize) / this._physicalAverageCount,
+      );
+    }
+  }
+
+  __getBorderBoxHeight(el) {
+    const style = getComputedStyle(el);
+
+    const itemHeight = parseFloat(style.height) || 0;
+
+    if (style.boxSizing === 'border-box') {
+      return itemHeight;
+    }
+
+    const paddingBottom = parseFloat(style.paddingBottom) || 0;
+    const paddingTop = parseFloat(style.paddingTop) || 0;
+    const borderBottomWidth = parseFloat(style.borderBottomWidth) || 0;
+    const borderTopWidth = parseFloat(style.borderTopWidth) || 0;
+
+    return itemHeight + paddingBottom + paddingTop + borderBottomWidth + borderTopWidth;
+  }
+
   __updateElement(el, index, forceSameIndexUpdates) {
     // Clean up temporary placeholder sizing
     if (el.style.paddingTop) {