@vaadin/component-base 23.6.3 → 23.6.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/component-base",
-  "version": "23.6.3",
+  "version": "23.6.5",
   "publishConfig": {
     "access": "public"
   },
@@ -42,5 +42,5 @@
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^13.0.2"
   },
-  "gitHead": "4addcb881465a37108f64abc59d7219c7187a432"
+  "gitHead": "d55853f02f62ce8a506a3ffd4f4a91dfb5cc66a2"
 }

package/src/element-mixin.js

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

package/src/object-utils.d.ts

@@ -0,0 +1,44 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+
+/**
+ * Recursively copies own properties of `source` into `target` and returns
+ * `target`. Plain objects are merged, other values are assigned as they are.
+ * An object is plain when it inherits from `Object.prototype` or from nothing,
+ * so values such as a `Date` or a class instance are assigned, not merged.
+ *
+ * Merges a single source. Use `deepMergePartials()` to merge several objects,
+ * or to merge objects that only provide some of the properties.
+ *
+ * Both arguments are expected to be plain objects. When either of them is not,
+ * `target` is returned without changes. A property of the target that is not a
+ * plain object is replaced with the merged object, unlike the arguments.
+ *
+ * Keys that would modify `Object.prototype`, such as `__proto__`, are ignored.
+ */
+export function deepMerge<T extends object>(target: T, source: object): T;
+
+/**
+ * Recursively merges partial objects into `target` in order and returns
+ * `target`, so that a later source overrides an earlier one.
+ *
+ * Values that are `null` or `undefined` are skipped, so a source that only
+ * provides some of the properties does not remove the others. For the same
+ * reason, a property that the target already has is not replaced with an
+ * object when the source has one for the same key. Arrays are copied one level
+ * deep, so that the result does not share an array with any of the sources.
+ *
+ * Sources that are not plain objects are ignored. When `target` is not a plain
+ * object, it is returned without changes.
+ *
+ * Keys that would modify `Object.prototype`, such as `__proto__`, are ignored.
+ */
+export function deepMergePartials<T extends object>(target: T, ...sources: object[]): T;

package/src/object-utils.js

@@ -0,0 +1,116 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+
+/**
+ * Keys that are not copied while merging, as assigning them would modify
+ * `Object.prototype` instead of the merge target, and so affect every
+ * object in the application.
+ */
+const IGNORED_KEYS = ['__proto__', 'constructor', 'prototype'];
+
+const { hasOwnProperty } = Object.prototype;
+
+const isPlainObject = (value) => {
+  if (!value || typeof value !== 'object') {
+    return false;
+  }
+  const prototype = Object.getPrototypeOf(value);
+  return prototype === Object.prototype || prototype === null;
+};
+
+/**
+ * Merges `source` into `target`. With `partial`, the source is treated as an
+ * object that may provide only some of the properties: nullish values are
+ * skipped and arrays are copied instead of shared.
+ */
+function merge(target, source, partial) {
+  if (!isPlainObject(target) || !isPlainObject(source)) {
+    return target;
+  }
+
+  Object.keys(source).forEach((key) => {
+    if (IGNORED_KEYS.includes(key)) {
+      return;
+    }
+
+    const value = source[key];
+
+    if (isPlainObject(value)) {
+      // Only merge into an own plain object, so that the merge can never
+      // continue into an object inherited from the prototype chain.
+      if (!hasOwnProperty.call(target, key) || !isPlainObject(target[key])) {
+        // With `partial`, a value that the target already has is kept, so that
+        // a source property of an unexpected type does not remove a default.
+        if (partial && hasOwnProperty.call(target, key) && target[key]) {
+          return;
+        }
+
+        target[key] = {};
+      }
+
+      merge(target[key], value, partial);
+    } else if (partial && Array.isArray(value)) {
+      target[key] = [...value];
+    } else if (!partial || (value !== undefined && value !== null)) {
+      target[key] = value;
+    }
+  });
+
+  return target;
+}
+
+/**
+ * Recursively copies own properties of `source` into `target` and returns
+ * `target`. Plain objects are merged, other values are assigned as they are.
+ * An object is plain when it inherits from `Object.prototype` or from nothing,
+ * so values such as a `Date` or a class instance are assigned, not merged.
+ *
+ * Merges a single source. Use `deepMergePartials()` to merge several objects,
+ * or to merge objects that only provide some of the properties.
+ *
+ * Both arguments are expected to be plain objects. When either of them is not,
+ * `target` is returned without changes. A property of the target that is not a
+ * plain object is replaced with the merged object, unlike the arguments.
+ *
+ * Keys that would modify `Object.prototype`, such as `__proto__`, are ignored.
+ *
+ * @param {object} target the object to merge into, modified in place
+ * @param {object} source the object to copy the properties from
+ * @return {object} the `target` object
+ */
+export function deepMerge(target, source) {
+  return merge(target, source, false);
+}
+
+/**
+ * Recursively merges partial objects into `target` in order and returns
+ * `target`, so that a later source overrides an earlier one.
+ *
+ * Values that are `null` or `undefined` are skipped, so a source that only
+ * provides some of the properties does not remove the others. For the same
+ * reason, a property that the target already has is not replaced with an
+ * object when the source has one for the same key. Arrays are copied one level
+ * deep, so that the result does not share an array with any of the sources.
+ *
+ * Sources that are not plain objects are ignored. When `target` is not a plain
+ * object, it is returned without changes.
+ *
+ * Keys that would modify `Object.prototype`, such as `__proto__`, are ignored.
+ *
+ * @param {object} target the object to merge into, modified in place
+ * @param {...object} sources the objects to copy the properties from
+ * @return {object} the `target` object
+ */
+export function deepMergePartials(target, ...sources) {
+  sources.forEach((source) => merge(target, source, true));
+
+  return target;
+}

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

@@ -139,11 +139,15 @@ export class IronListAdapter {
   }
 
   update(startIndex = 0, endIndex = this.size - 1) {
+    const updatedElements = [];
     this.__getVisibleElements().forEach((el) => {
       if (el.__virtualIndex >= startIndex && el.__virtualIndex <= endIndex) {
         this.__updateElement(el, el.__virtualIndex, true);
+        updatedElements.push(el);
       }
     });
+
+    this.__afterElementsUpdated(updatedElements);
   }
 
   /**
@@ -206,28 +210,40 @@ export class IronListAdapter {
       this.updateElement(el, index);
       el.__lastUpdatedIndex = index;
     }
+  }
 
-    const elementHeight = el.offsetHeight;
-    if (elementHeight === 0) {
-      // If the elements have 0 height after update (for example due to lazy rendering),
-      // it results in iron-list requesting to create an unlimited count of elements.
-      // Assign a temporary placeholder sizing to elements that would otherwise end up having
-      // no height.
-      el.style.paddingTop = `${this.__placeholderHeight}px`;
-
-      // Manually schedule the resize handler to make sure the placeholder padding is
-      // cleared in case the resize observer never triggers.
-      requestAnimationFrame(() => this._resizeHandler());
-    } else {
-      // Add element height to the queue
-      this.__elementHeightQueue.push(elementHeight);
-      this.__elementHeightQueue.shift();
-
-      // Calcualte new placeholder height based on the average of the defined values in the
-      // element height queue
-      const filteredHeights = this.__elementHeightQueue.filter((h) => h !== undefined);
-      this.__placeholderHeight = Math.round(filteredHeights.reduce((a, b) => a + b, 0) / filteredHeights.length);
-    }
+  /**
+   * Called synchronously right after elements have been updated.
+   * This is a good place to do any post-update work.
+   *
+   * @param {!Array<!HTMLElement>} updatedElements
+   */
+  __afterElementsUpdated(updatedElements) {
+    updatedElements.forEach((el) => {
+      const elementHeight = el.offsetHeight;
+      if (elementHeight === 0) {
+        // If the elements have 0 height after update (for example due to lazy rendering),
+        // it results in iron-list requesting to create an unlimited count of elements.
+        // Assign a temporary placeholder sizing to elements that would otherwise end up having
+        // no height.
+        el.style.paddingTop = `${this.__placeholderHeight}px`;
+
+        // Manually schedule the resize handler to make sure the placeholder padding is
+        // cleared in case the resize observer never triggers.
+        this.__placeholderClearDebouncer = Debouncer.debounce(this.__placeholderClearDebouncer, animationFrame, () =>
+          this._resizeHandler(),
+        );
+      } else {
+        // Add element height to the queue
+        this.__elementHeightQueue.push(elementHeight);
+        this.__elementHeightQueue.shift();
+
+        // Calculate new placeholder height based on the average of the defined values in the
+        // element height queue
+        const filteredHeights = this.__elementHeightQueue.filter((h) => h !== undefined);
+        this.__placeholderHeight = Math.round(filteredHeights.reduce((a, b) => a + b, 0) / filteredHeights.length);
+      }
+    });
   }
 
   __getIndexScrollOffset(index) {
@@ -352,16 +368,20 @@ export class IronListAdapter {
 
   /** @private */
   _assignModels(itemSet) {
+    const updatedElements = [];
     this._iterateItems((pidx, vidx) => {
       const el = this._physicalItems[pidx];
       el.hidden = vidx >= this.size;
       if (!el.hidden) {
         el.__virtualIndex = vidx + (this._vidxOffset || 0);
         this.__updateElement(el, el.__virtualIndex);
+        updatedElements.push(el);
       } else {
         delete el.__lastUpdatedIndex;
       }
     }, itemSet);
+
+    this.__afterElementsUpdated(updatedElements);
   }
 
   /** @private */