npm - @vaadin/component-base - Versions diffs - 25.3.0-alpha9 → 25.3.0-beta1 - Mend

@vaadin/component-base 25.3.0-alpha9 → 25.3.0-beta1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/custom-elements.json +2 -1
package/package.json +5 -4
package/src/define.js +1 -1
package/src/dir-mixin.d.ts +14 -0
package/src/dir-mixin.js +10 -0
package/src/dom-utils.d.ts +7 -0
package/src/dom-utils.js +19 -0
package/src/gestures.d.ts +12 -0
package/src/i18n-mixin.js +3 -30
package/src/object-utils.d.ts +39 -0
package/src/object-utils.js +109 -0
package/src/slot-child-observe-controller.js +2 -19
package/src/slot-observer.d.ts +7 -1
package/src/slot-observer.js +24 -4
package/src/virtualizer-iron-list-adapter.js +8 -34

package/custom-elements.json CHANGED Viewed

@@ -50,7 +50,8 @@
             {
               "name": "superClass"
             }
-          ]
+          ],
+          "deprecated": "This mixin is deprecated and will be removed in Vaadin 26,\nafter which components will no longer set the `dir` attribute on themselves.\nUse the `:dir(rtl)` CSS selector to style components in right-to-left mode,\nand `element.matches(':dir(rtl)')` to detect it in JavaScript."
         }
       ],
       "exports": [

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/component-base",
-  "version": "25.3.0-alpha9",
+  "version": "25.3.0-beta1",
   "publishConfig": {
     "access": "public"
   },
@@ -38,11 +38,12 @@
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.3.0-alpha9",
-    "@vaadin/test-runner-commands": "25.3.0-alpha9",
+    "@polymer/polymer": "^3.0.0",
+    "@vaadin/chai-plugins": "25.3.0-beta1",
+    "@vaadin/test-runner-commands": "25.3.0-beta1",
     "@vaadin/testing-helpers": "^2.0.0",
     "sinon": "^22.0.0"
   },
   "customElements": "custom-elements.json",
-  "gitHead": "cb915ebde095ec5b94a87af93dd4530f51984c52"
+  "gitHead": "295432e44a6967e1aff36462b2e3e1d0e64eb8cc"
 }

package/src/define.js CHANGED Viewed

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

package/src/dir-mixin.d.ts CHANGED Viewed

@@ -7,9 +7,23 @@ import type { Constructor } from '@open-wc/dedupe-mixin';
 /**
  * A mixin to handle `dir` attribute based on the one set on the `<html>` element.
+ *
+ * @deprecated This mixin is deprecated and will be removed in Vaadin 26,
+ * after which components will no longer set the `dir` attribute on themselves.
+ * Use the `:dir(rtl)` CSS selector to style components in right-to-left mode,
+ * and `element.matches(':dir(rtl)')` to detect it in JavaScript.
  */
 export declare function DirMixin<T extends Constructor<HTMLElement>>(base: T): Constructor<DirMixinClass> & T;
+/**
+ * @deprecated This mixin is deprecated and will be removed in Vaadin 26,
+ * after which components will no longer set the `dir` attribute on themselves.
+ * Use the `:dir(rtl)` CSS selector to style components in right-to-left mode,
+ * and `element.matches(':dir(rtl)')` to detect it in JavaScript.
+ */
 export declare class DirMixinClass {
+  /**
+   * @deprecated Use `this.matches(':dir(rtl)')` instead.
+   */
   protected readonly __isRTL: boolean;
 }

package/src/dir-mixin.js CHANGED Viewed

@@ -33,6 +33,11 @@ directionObserver.observe(document.documentElement, { attributes: true, attribut
 /**
  * A mixin to handle `dir` attribute based on the one set on the `<html>` element.
+ *
+ * @deprecated This mixin is deprecated and will be removed in Vaadin 26,
+ * after which components will no longer set the `dir` attribute on themselves.
+ * Use the `:dir(rtl)` CSS selector to style components in right-to-left mode,
+ * and `element.matches(':dir(rtl)')` to detect it in JavaScript.
  */
 export const DirMixin = (superClass) =>
   class VaadinDirMixin extends superClass {
@@ -60,6 +65,7 @@ export const DirMixin = (superClass) =>
     /**
      * @return {boolean}
      * @protected
+     * @deprecated Use `this.matches(':dir(rtl)')` instead.
      */
     get __isRTL() {
       return this.getAttribute('dir') === 'rtl';
@@ -106,6 +112,10 @@ export const DirMixin = (superClass) =>
       this.__unsubscribe();
     }
+    // The two overrides below are only invoked by Polymer's property reflection.
+    // Vaadin components no longer extend `PolymerElement`, but some add-ons still
+    // apply this mixin to `PolymerElement`, so the overrides are kept for them.
     /** @protected */
     _valueToNodeAttribute(node, value, attribute) {
       // Override default Polymer attribute reflection to match native behavior of HTMLElement.dir property

package/src/dom-utils.d.ts CHANGED Viewed

@@ -62,3 +62,10 @@ export function removeValuesFromAttribute(element: HTMLElement, attr: string, va
  * Returns true if the given node is an empty text node, false otherwise.
  */
 export function isEmptyTextNode(node: Node): boolean;
+/**
+ * Returns true if the given node has content of its own: an element with
+ * children, a defined custom element — which may render content in its
+ * shadow root — or a node with non-empty text.
+ */
+export function hasNodeContent(node: Node | null | undefined): boolean;

package/src/dom-utils.js CHANGED Viewed

@@ -168,3 +168,22 @@ export function removeValuesFromAttribute(element, attr, valuesToRemove) {
 export function isEmptyTextNode(node) {
   return node.nodeType === Node.TEXT_NODE && node.textContent.trim() === '';
 }
+/**
+ * Returns true if the given node has content of its own: an element with
+ * children, a defined custom element — which may render content in its
+ * shadow root — or a node with non-empty text.
+ *
+ * @param {Node | null | undefined} node
+ * @return {boolean}
+ */
+export function hasNodeContent(node) {
+  if (!node) {
+    return false;
+  }
+  return Boolean(
+    (node.nodeType === Node.ELEMENT_NODE && (customElements.get(node.localName) || node.children.length > 0)) ||
+    node.textContent?.trim(),
+  );
+}

package/src/gestures.d.ts CHANGED Viewed

@@ -43,6 +43,18 @@ export { removeListener };
 declare function register(recog: GestureRecognizer): void;
 export { register };
+/**
+ * The registered gesture event recognizers by their event type.
+ */
+declare const gestures: Record<string, GestureRecognizer | undefined>;
+export { gestures };
+/**
+ * The registered gesture event recognizers.
+ */
+declare const recognizers: GestureRecognizer[];
+export { recognizers };
 /**
  * Sets scrolling direction on node.
  *

package/src/i18n-mixin.js CHANGED Viewed

@@ -3,34 +3,7 @@
  * Copyright (c) 2025 - 2026 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-function deepMerge(target, ...sources) {
-  const isArray = (item) => Array.isArray(item);
-  const isObject = (item) => item && typeof item === 'object' && !isArray(item);
-  const merge = (target, source) => {
-    if (isObject(source) && isObject(target)) {
-      Object.keys(source).forEach((key) => {
-        const sourceValue = source[key];
-        if (isObject(sourceValue)) {
-          if (!target[key]) {
-            target[key] = {};
-          }
-          merge(target[key], sourceValue);
-        } else if (isArray(sourceValue)) {
-          target[key] = [...sourceValue];
-        } else if (sourceValue !== undefined && sourceValue !== null) {
-          target[key] = sourceValue;
-        }
-      });
-    }
-  };
-  sources.forEach((source) => {
-    merge(target, source);
-  });
-  return target;
-}
+import { deepMergePartials } from './object-utils.js';
 /**
  * A mixin that allows to set partial I18N properties.
@@ -75,7 +48,7 @@ export const I18nMixin = (superClass) =>
     constructor() {
       super();
-      this.i18n = deepMerge({}, this.constructor.defaultI18n);
+      this.i18n = deepMergePartials({}, this.constructor.defaultI18n);
     }
     /**
@@ -97,6 +70,6 @@ export const I18nMixin = (superClass) =>
         return;
       }
       this.__customI18n = value;
-      this.__effectiveI18n = deepMerge({}, this.constructor.defaultI18n, this.__customI18n);
+      this.__effectiveI18n = deepMergePartials({}, this.constructor.defaultI18n, this.__customI18n);
     }
   };

package/src/object-utils.d.ts ADDED Viewed

@@ -0,0 +1,39 @@
+/**
+ * @license
+ * Copyright (c) 2026 - 2026 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/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 ADDED Viewed

@@ -0,0 +1,109 @@
+/**
+ * @license
+ * Copyright (c) 2026 - 2026 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/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 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 (!Object.hasOwn(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 && Object.hasOwn(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/slot-child-observe-controller.js CHANGED Viewed

@@ -3,6 +3,7 @@
  * Copyright (c) 2022 - 2026 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { hasNodeContent } from './dom-utils.js';
 import { SlotController } from './slot-controller.js';
 /**
@@ -130,24 +131,6 @@ export class SlotChildObserveController extends SlotController {
     });
   }
-  /**
-   * Returns true if a node is an HTML element with children,
-   * or is a defined custom element, or has non-empty text.
-   *
-   * @param {Node} node
-   * @return {boolean}
-   */
-  #hasContent(node) {
-    if (!node) {
-      return false;
-    }
-    return (
-      (node.nodeType === Node.ELEMENT_NODE && (customElements.get(node.localName) || node.children.length > 0)) ||
-      (node.textContent && node.textContent.trim() !== '')
-    );
-  }
   /**
    * Fire an event to notify the controller host about node changes.
    *
@@ -157,7 +140,7 @@ export class SlotChildObserveController extends SlotController {
   _notifyChange(node) {
     this.dispatchEvent(
       new CustomEvent('slot-content-changed', {
-        detail: { hasContent: this.#hasContent(node), node },
+        detail: { hasContent: hasNodeContent(node), node },
       }),
     );
   }

package/src/slot-observer.d.ts CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -78,12 +78,7 @@ export class IronListAdapter {
     });
     attachObserver.observe(this.scrollTarget);
-    this.scrollTarget.addEventListener('virtualizer-element-focused', (e) => this.__onElementFocused(e));
-    this.elementsContainer.addEventListener('focusin', () => {
-      this.scrollTarget.dispatchEvent(
-        new CustomEvent('virtualizer-element-focused', { detail: { element: this.__getFocusedElement() } }),
-      );
-    });
+    this.elementsContainer.addEventListener('focusin', () => this.__onElementFocused());
     if (this.reorderElements) {
       // Reordering the physical elements cancels the user's grab of the scroll bar handle on Safari.
@@ -161,7 +156,7 @@ export class IronListAdapter {
     this.__skipNextVirtualIndexAdjust = true;
     super.scrollToIndex(targetVirtualIndex);
-    if (this.adjustedFirstVisibleIndex !== index && this._scrollTop < this._maxScrollTop && !this.grid) {
+    if (this.adjustedFirstVisibleIndex !== index && this._scrollTop < this._maxScrollTop) {
       // Workaround an iron-list issue by manually adjusting the scroll position
       this._scrollTop -= this.__getIndexScrollOffset(index) || 0;
     }
@@ -189,9 +184,6 @@ export class IronListAdapter {
     if (this.__scrollReorderDebouncer) {
       this.__scrollReorderDebouncer.flush();
     }
-    if (this.__debouncerWheelAnimationFrame) {
-      this.__debouncerWheelAnimationFrame.flush();
-    }
   }
   hostConnected() {
@@ -462,16 +454,10 @@ export class IronListAdapter {
   /** @private */
   updateViewportBoundaries() {
-    const styles = window.getComputedStyle(this.scrollTarget);
-    this._scrollerPaddingTop = this.scrollTarget === this ? 0 : parseInt(styles['padding-top'], 10);
-    this._isRTL = Boolean(styles.direction === 'rtl');
-    this._viewportWidth = this.elementsContainer.offsetWidth;
+    this._scrollerPaddingTop = parseInt(window.getComputedStyle(this.scrollTarget)['padding-top'], 10);
     this._viewportHeight = this.scrollTarget.offsetHeight;
   }
-  /** @private */
-  setAttribute() {}
   /** @private */
   _createPool(size) {
     const physicalItems = this.createElements(size);
@@ -521,20 +507,8 @@ export class IronListAdapter {
   toggleScrollListener() {}
   /** @private */
-  __getFocusedElement(visibleElements = this.__getVisibleElements()) {
-    // `document.activeElement` retargets to the outermost shadow host when
-    // focus lives in a nested shadow tree. Descend through nested shadow
-    // roots' `activeElement`s to reach the real focused node, then walk up
-    // the flattened tree (via `assignedSlot`/`parentNode`/`host`) until a
-    // visible row is reached.
-    let node = document.activeElement;
-    while (node?.shadowRoot?.activeElement) {
-      node = node.shadowRoot.activeElement;
-    }
-    while (node && !visibleElements.includes(node)) {
-      node = node.assignedSlot || node.parentNode || node.host;
-    }
-    return node;
+  __getFocusedElement() {
+    return this.__getVisibleElements().find((element) => element.matches(':focus-within'));
   }
   /** @private */
@@ -558,12 +532,12 @@ export class IronListAdapter {
   }
   /** @private */
-  __onElementFocused(e) {
+  __onElementFocused() {
     if (!this.reorderElements) {
       return;
     }
-    const focusedElement = e.detail.element;
+    const focusedElement = this.__getFocusedElement();
     if (!focusedElement) {
       return;
     }
@@ -805,7 +779,7 @@ export class IronListAdapter {
     // Which row to use as a target?
     const visibleElements = this.__getVisibleElements();
-    const targetElement = this.__getFocusedElement(visibleElements) || visibleElements[0];
+    const targetElement = this.__getFocusedElement() || visibleElements[0];
     if (!targetElement) {
       // All elements are hidden, don't reorder
       return;