@vaadin/component-base - npm Package Compare versions

Comparing version 24.6.0-alpha2 to 24.6.0-alpha3

package.json

 {
   "name": "@vaadin/component-base",
-  "version": "24.6.0-alpha2",
+  "version": "24.6.0-alpha3",
   "publishConfig": {
@@ -41,7 +41,7 @@ "access": "public"
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.6.0-alpha2",
+    "@vaadin/chai-plugins": "24.6.0-alpha3",
     "@vaadin/testing-helpers": "^1.0.0",
     "sinon": "^18.0.0"
   },
-  "gitHead": "21fa9ea077a04949a90d00934bfefe3e346bd129"
+  "gitHead": "f917e587caaf86b3d55598233811409b0f34ff69"
 }

src/browser-utils.js

@@ -36,1 +36,4 @@ /**
 })();
+
+export const supportsAdoptingStyleSheets =
+  window.ShadowRoot && 'adoptedStyleSheets' in Document.prototype && 'replace' in CSSStyleSheet.prototype;

src/define.js

@@ -7,3 +7,3 @@ /**
 
-export function defineCustomElement(CustomElement, version = '24.6.0-alpha2') {
+export function defineCustomElement(CustomElement, version = '24.6.0-alpha3') {
   Object.defineProperty(CustomElement, 'version', {
@@ -10,0 +10,0 @@ get() {

src/virtualizer-iron-list-adapter.js

@@ -731,2 +731,49 @@ /**
   /**
+   * An optimal physical size such that we will have enough physical items
+   * to fill up the viewport and recycle when the user scrolls.
+   *
+   * This default value assumes that we will at least have the equivalent
+   * to a viewport of physical items above and below the user's viewport.
+   * @override
+   */
+  get _optPhysicalSize() {
+    const optPhysicalSize = super._optPhysicalSize;
+    // No need to adjust
+    if (optPhysicalSize <= 0 || this.__hasPlaceholders()) {
+      return optPhysicalSize;
+    }
+    // Item height buffer accounts for the cases where some items are much larger than the average.
+    // This can lead to some items not being rendered and leaving empty space in the viewport.
+    // https://github.com/vaadin/flow-components/issues/6651
+    return optPhysicalSize + this.__getItemHeightBuffer();
+  }
+
+  /**
+   * Extra item height buffer used when calculating optimal physical size.
+   *
+   * The iron list core uses the optimal physical size when determining whether to increase the item pool.
+   * For the cases where some items are much larger than the average, the iron list core might not increase item pool.
+   * This can lead to the large item not being rendered.
+   *
+   * @returns {Number} - Extra item height buffer
+   * @private
+   */
+  __getItemHeightBuffer() {
+    // No need for a buffer with no items
+    if (this._physicalCount === 0) {
+      return 0;
+    }
+    // The regular buffer zone height for either top or bottom
+    const bufferZoneHeight = Math.ceil((this._viewportHeight * (this._maxPages - 1)) / 2);
+    // The maximum height of the currently rendered items
+    const maxItemHeight = Math.max(...this._physicalSizes);
+    // Only add buffer if the item is larger that the other items
+    if (maxItemHeight > Math.min(...this._physicalSizes)) {
+      // Add a buffer height since the large item can still be in the viewport and out of the original buffer
+      return Math.max(0, maxItemHeight - bufferZoneHeight);
+    }
+    return 0;
+  }
+
+  /**
    * @returns {Number|undefined} - The browser's default font-size in pixels
@@ -733,0 +780,0 @@ * @private

No alert changes

Improved metrics

Total package byte prevSize

218537

1%

Lines of code

6456

0.73%

No dependency changes