@vaadin/component-base - npm Package Compare versions

Comparing version 25.2.0-alpha1 to 25.2.0-alpha10

custom-elements.json

@@ -10,5 +10,18 @@ {
         {
-          "kind": "variable",
+          "kind": "mixin",
+          "description": "",
           "name": "DelegateStateMixin",
-          "description": "A mixin to delegate properties and attributes to a target element."
+          "members": [],
+          "attributes": [],
+          "parameters": [
+            {
+              "name": "superclass"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "dedupeMixin",
+              "package": "@open-wc/dedupe-mixin"
+            }
+          ]
         }
@@ -227,5 +240,17 @@ ],
         {
-          "kind": "variable",
+          "kind": "mixin",
+          "description": "A mixin that uses a ResizeObserver to listen to host size changes.",
           "name": "ResizeMixin",
-          "description": "A mixin that uses a ResizeObserver to listen to host size changes."
+          "members": [],
+          "parameters": [
+            {
+              "name": "superclass"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "dedupeMixin",
+              "package": "@open-wc/dedupe-mixin"
+            }
+          ]
         }
@@ -249,5 +274,17 @@ ],
         {
-          "kind": "variable",
+          "kind": "mixin",
+          "description": "Mixin to insert styles into the outer scope to handle slotted components.\nThis is useful e.g. to hide native `<input type=\"number\">` controls.",
           "name": "SlotStylesMixin",
-          "description": "Mixin to insert styles into the outer scope to handle slotted components.\nThis is useful e.g. to hide native `<input type=\"number\">` controls."
+          "members": [],
+          "parameters": [
+            {
+              "name": "superclass"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "dedupeMixin",
+              "package": "@open-wc/dedupe-mixin"
+            }
+          ]
         }
@@ -254,0 +291,0 @@ ],

package.json

 {
   "name": "@vaadin/component-base",
-  "version": "25.2.0-alpha1",
+  "version": "25.2.0-alpha10",
   "publishConfig": {
@@ -41,4 +41,4 @@ "access": "public"
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.2.0-alpha1",
-    "@vaadin/test-runner-commands": "25.2.0-alpha1",
+    "@vaadin/chai-plugins": "25.2.0-alpha10",
+    "@vaadin/test-runner-commands": "25.2.0-alpha10",
     "@vaadin/testing-helpers": "^2.0.0",
@@ -48,3 +48,3 @@ "sinon": "^21.0.2"
   "customElements": "custom-elements.json",
-  "gitHead": "866f813f89655a351cbd25328eba1fcb317e267d"
+  "gitHead": "1303b6a3eeecb44a9d26f2b53cb56d9e906febdf"
 }

src/data-provider-controller/helpers.js

@@ -108,3 +108,3 @@ /**
   const subCache = cache.getSubCache(levelIndex);
-  if (subCache && subCache.flatSize > 0 && subIndexes.length) {
+  if (subCache?.flatSize > 0 && subIndexes.length) {
     return getFlatIndexByPath(subCache, subIndexes, flatIndex + flatIndexOnLevel + 1);
@@ -111,0 +111,0 @@ }

src/define.js

@@ -16,3 +16,3 @@ /**
 
-export function defineCustomElement(CustomElement, version = '25.2.0-alpha1') {
+export function defineCustomElement(CustomElement, version = '25.2.0-alpha10') {
   Object.defineProperty(CustomElement, 'version', {
@@ -19,0 +19,0 @@ get() {

src/delegate-state-mixin.js

@@ -13,114 +13,115 @@ /**
  */
-export const DelegateStateMixin = dedupeMixin(
-  (superclass) =>
-    class DelegateStateMixinClass extends superclass {
-      static get properties() {
-        return {
-          /**
-           * A target element to which attributes and properties are delegated.
-           * @protected
-           */
-          stateTarget: {
-            type: Object,
-            observer: '_stateTargetChanged',
-          },
-        };
-      }
+const DelegateStateMixinImplementation = (superclass) => {
+  return class DelegateStateMixinClass extends superclass {
+    static get properties() {
+      return {
+        /**
+         * A target element to which attributes and properties are delegated.
+         * @protected
+         */
+        stateTarget: {
+          type: Object,
+          observer: '_stateTargetChanged',
+        },
+      };
+    }
 
-      /**
-       * An array of the host attributes to delegate to the target element.
-       */
-      static get delegateAttrs() {
-        return [];
-      }
+    /**
+     * An array of the host attributes to delegate to the target element.
+     */
+    static get delegateAttrs() {
+      return [];
+    }
 
-      /**
-       * An array of the host properties to delegate to the target element.
-       */
-      static get delegateProps() {
-        return [];
-      }
+    /**
+     * An array of the host properties to delegate to the target element.
+     */
+    static get delegateProps() {
+      return [];
+    }
 
-      /** @protected */
-      ready() {
-        super.ready();
+    /** @protected */
+    ready() {
+      super.ready();
 
-        this._createDelegateAttrsObserver();
-        this._createDelegatePropsObserver();
-      }
+      this._createDelegateAttrsObserver();
+      this._createDelegatePropsObserver();
+    }
 
-      /** @protected */
-      _stateTargetChanged(target) {
-        if (target) {
-          this._ensureAttrsDelegated();
-          this._ensurePropsDelegated();
-        }
+    /** @protected */
+    _stateTargetChanged(target) {
+      if (target) {
+        this._ensureAttrsDelegated();
+        this._ensurePropsDelegated();
       }
+    }
 
-      /** @protected */
-      _createDelegateAttrsObserver() {
-        this._createMethodObserver(`_delegateAttrsChanged(${this.constructor.delegateAttrs.join(', ')})`);
-      }
+    /** @protected */
+    _createDelegateAttrsObserver() {
+      this._createMethodObserver(`_delegateAttrsChanged(${this.constructor.delegateAttrs.join(', ')})`);
+    }
 
-      /** @protected */
-      _createDelegatePropsObserver() {
-        this._createMethodObserver(`_delegatePropsChanged(${this.constructor.delegateProps.join(', ')})`);
-      }
+    /** @protected */
+    _createDelegatePropsObserver() {
+      this._createMethodObserver(`_delegatePropsChanged(${this.constructor.delegateProps.join(', ')})`);
+    }
 
-      /** @protected */
-      _ensureAttrsDelegated() {
-        this.constructor.delegateAttrs.forEach((name) => {
-          this._delegateAttribute(name, this[name]);
-        });
-      }
+    /** @protected */
+    _ensureAttrsDelegated() {
+      this.constructor.delegateAttrs.forEach((name) => {
+        this._delegateAttribute(name, this[name]);
+      });
+    }
 
-      /** @protected */
-      _ensurePropsDelegated() {
-        this.constructor.delegateProps.forEach((name) => {
-          this._delegateProperty(name, this[name]);
-        });
+    /** @protected */
+    _ensurePropsDelegated() {
+      this.constructor.delegateProps.forEach((name) => {
+        this._delegateProperty(name, this[name]);
+      });
+    }
+
+    /** @protected */
+    _delegateAttrsChanged(...values) {
+      this.constructor.delegateAttrs.forEach((name, index) => {
+        this._delegateAttribute(name, values[index]);
+      });
+    }
+
+    /** @protected */
+    _delegatePropsChanged(...values) {
+      this.constructor.delegateProps.forEach((name, index) => {
+        this._delegateProperty(name, values[index]);
+      });
+    }
+
+    /** @protected */
+    _delegateAttribute(name, value) {
+      if (!this.stateTarget) {
+        return;
       }
 
-      /** @protected */
-      _delegateAttrsChanged(...values) {
-        this.constructor.delegateAttrs.forEach((name, index) => {
-          this._delegateAttribute(name, values[index]);
-        });
+      if (name === 'invalid') {
+        this._delegateAttribute('aria-invalid', value ? 'true' : false);
       }
 
-      /** @protected */
-      _delegatePropsChanged(...values) {
-        this.constructor.delegateProps.forEach((name, index) => {
-          this._delegateProperty(name, values[index]);
-        });
+      if (typeof value === 'boolean') {
+        this.stateTarget.toggleAttribute(name, value);
+      } else if (value) {
+        this.stateTarget.setAttribute(name, value);
+      } else {
+        this.stateTarget.removeAttribute(name);
       }
+    }
 
-      /** @protected */
-      _delegateAttribute(name, value) {
-        if (!this.stateTarget) {
-          return;
-        }
-
-        if (name === 'invalid') {
-          this._delegateAttribute('aria-invalid', value ? 'true' : false);
-        }
-
-        if (typeof value === 'boolean') {
-          this.stateTarget.toggleAttribute(name, value);
-        } else if (value) {
-          this.stateTarget.setAttribute(name, value);
-        } else {
-          this.stateTarget.removeAttribute(name);
-        }
+    /** @protected */
+    _delegateProperty(name, value) {
+      if (!this.stateTarget) {
+        return;
       }
 
-      /** @protected */
-      _delegateProperty(name, value) {
-        if (!this.stateTarget) {
-          return;
-        }
+      this.stateTarget[name] = value;
+    }
+  };
+};
 
-        this.stateTarget[name] = value;
-      }
-    },
-);
+export const DelegateStateMixin = dedupeMixin(DelegateStateMixinImplementation);

src/dom-utils.js

@@ -77,3 +77,3 @@ /**
 
-  return node.closest(selector) || getClosestElement(selector, node.getRootNode().host);
+  return node.closest?.(selector) || getClosestElement(selector, node.getRootNode().host);
 }
@@ -80,0 +80,0 @@

src/gestures.js

@@ -235,3 +235,3 @@ /**
   // if there is not a shadowroot, exit the loop
-  while (next && next.shadowRoot && !window.ShadyDOM) {
+  while (next?.shadowRoot && !window.ShadyDOM) {
     // If there is a node at x/y in the shadowroot, look deeper
@@ -452,3 +452,3 @@ const oldNext = next;
       gd = gobj[dep];
-      if (gd && gd[name]) {
+      if (gd?.[name]) {
         gd[name] = (gd[name] || 1) - 1;
@@ -536,3 +536,3 @@ gd._count = (gd._count || 1) - 1;
     const preventer = detail.preventer || detail.sourceEvent;
-    if (preventer && preventer.preventDefault) {
+    if (preventer?.preventDefault) {
       preventer.preventDefault();
@@ -539,0 +539,0 @@ }

src/overflow-controller.js

@@ -6,4 +6,2 @@ /**
  */
-import { animationFrame } from './async.js';
-import { Debouncer } from './debounce.js';
 
@@ -52,8 +50,3 @@ /**
 
-    this.__resizeObserver = new ResizeObserver(() => {
-      this.__debounceOverflow = Debouncer.debounce(this.__debounceOverflow, animationFrame, () => {
-        this.__updateOverflow();
-      });
-    });
-
+    this.__resizeObserver = new ResizeObserver(() => this.__onResize());
     this.__resizeObserver.observe(host);
@@ -79,5 +72,7 @@
         });
+
+        if (addedNodes.length === 0 && removedNodes.length > 0) {
+          this.__updateState({ sync: true });
+        }
       });
-
-      this.__updateOverflow();
     });
@@ -89,4 +84,7 @@
     this.scrollTarget.addEventListener('scroll', this.__boundOnScroll);
+  }
 
-    this.__updateOverflow();
+  /** @private */
+  __onResize() {
+    this.__updateState({ sync: false });
   }
@@ -96,7 +94,19 @@
   __onScroll() {
-    this.__updateOverflow();
+    this.__updateState({ sync: true });
   }
 
   /** @private */
-  __updateOverflow() {
+  __updateState({ sync }) {
+    cancelAnimationFrame(this.__resizeRaf);
+
+    const state = this.__readState();
+    if (sync) {
+      this.__writeState(state);
+    } else {
+      this.__resizeRaf = requestAnimationFrame(() => this.__writeState(state));
+    }
+  }
+
+  /** @private */
+  __readState() {
     const target = this.scrollTarget;
@@ -123,6 +133,10 @@
 
-    overflow = overflow.trim();
-    if (overflow.length > 0 && this.host.getAttribute('overflow') !== overflow) {
+    return { overflow: overflow.trim() };
+  }
+
+  /** @private */
+  __writeState({ overflow }) {
+    if (overflow) {
       this.host.setAttribute('overflow', overflow);
-    } else if (overflow.length === 0 && this.host.hasAttribute('overflow')) {
+    } else {
       this.host.removeAttribute('overflow');
@@ -129,0 +143,0 @@ }

src/polylit-mixin.js

@@ -62,3 +62,3 @@ /**
 
-      if (options && options.reflectToAttribute) {
+      if (options?.reflectToAttribute) {
         options.reflect = true;
@@ -65,0 +65,0 @@ }

src/resize-mixin.js

@@ -32,64 +32,64 @@ /**
  */
-export const ResizeMixin = dedupeMixin(
-  (superclass) =>
-    class ResizeMixinClass extends superclass {
-      /**
-       * When true, the parent element resize will be also observed.
-       * Override this getter and return `true` to enable this.
-       *
-       * @protected
-       */
-      get _observeParent() {
-        return false;
-      }
+const ResizeMixinImplementation = (superclass) =>
+  class ResizeMixinClass extends superclass {
+    /**
+     * When true, the parent element resize will be also observed.
+     * Override this getter and return `true` to enable this.
+     *
+     * @protected
+     */
+    get _observeParent() {
+      return false;
+    }
 
-      /** @protected */
-      connectedCallback() {
-        super.connectedCallback();
-        observer.observe(this);
+    /** @protected */
+    connectedCallback() {
+      super.connectedCallback();
+      observer.observe(this);
 
-        if (this._observeParent) {
-          const parent = this.parentNode instanceof ShadowRoot ? this.parentNode.host : this.parentNode;
+      if (this._observeParent) {
+        const parent = this.parentNode instanceof ShadowRoot ? this.parentNode.host : this.parentNode;
 
-          if (!parent.resizables) {
-            parent.resizables = new Set();
-            observer.observe(parent);
-          }
+        if (!parent.resizables) {
+          parent.resizables = new Set();
+          observer.observe(parent);
+        }
 
-          parent.resizables.add(this);
-          this.__parent = parent;
-        }
+        parent.resizables.add(this);
+        this.__parent = parent;
       }
+    }
 
-      /** @protected */
-      disconnectedCallback() {
-        super.disconnectedCallback();
-        observer.unobserve(this);
+    /** @protected */
+    disconnectedCallback() {
+      super.disconnectedCallback();
+      observer.unobserve(this);
 
-        const parent = this.__parent;
-        if (this._observeParent && parent) {
-          const resizables = parent.resizables;
+      const parent = this.__parent;
+      if (this._observeParent && parent) {
+        const resizables = parent.resizables;
 
-          if (resizables) {
-            resizables.delete(this);
+        if (resizables) {
+          resizables.delete(this);
 
-            if (resizables.size === 0) {
-              observer.unobserve(parent);
-            }
+          if (resizables.size === 0) {
+            observer.unobserve(parent);
           }
+        }
 
-          this.__parent = null;
-        }
+        this.__parent = null;
       }
+    }
 
-      /**
-       * A handler invoked on host resize. By default, it does nothing.
-       * Override the method to implement your own behavior.
-       *
-       * @protected
-       */
-      _onResize(_contentRect) {
-        // To be implemented.
-      }
-    },
-);
+    /**
+     * A handler invoked on host resize. By default, it does nothing.
+     * Override the method to implement your own behavior.
+     *
+     * @protected
+     */
+    _onResize(_contentRect) {
+      // To be implemented.
+    }
+  };
+
+export const ResizeMixin = dedupeMixin(ResizeMixinImplementation);

src/slot-controller.js

@@ -226,3 +226,3 @@ /**
 
-      if (newNodes && newNodes.length > 0) {
+      if (newNodes?.length > 0) {
         if (this.multiple) {
@@ -229,0 +229,0 @@ // Remove default node if exists

src/slot-styles-mixin.js

@@ -45,33 +45,33 @@ /**
  */
-export const SlotStylesMixin = dedupeMixin(
-  (superclass) =>
-    class SlotStylesMixinClass extends superclass {
-      /**
-       * List of styles to insert into root.
-       * @protected
-       */
-      get slotStyles() {
-        return [];
-      }
+const SlotStylesMixinImplementation = (superclass) =>
+  class SlotStylesMixinClass extends superclass {
+    /**
+     * List of styles to insert into root.
+     * @protected
+     */
+    get slotStyles() {
+      return [];
+    }
 
-      /** @protected */
-      connectedCallback() {
-        super.connectedCallback();
+    /** @protected */
+    connectedCallback() {
+      super.connectedCallback();
 
-        this.__applySlotStyles();
-      }
+      this.__applySlotStyles();
+    }
 
-      /** @private */
-      __applySlotStyles() {
-        const root = this.getRootNode();
-        const rootStyles = getRootStyles(root);
+    /** @private */
+    __applySlotStyles() {
+      const root = this.getRootNode();
+      const rootStyles = getRootStyles(root);
 
-        this.slotStyles.forEach((styles) => {
-          if (!rootStyles.has(styles)) {
-            insertStyles(styles, root);
-            rootStyles.add(styles);
-          }
-        });
-      }
-    },
-);
+      this.slotStyles.forEach((styles) => {
+        if (!rootStyles.has(styles)) {
+          insertStyles(styles, root);
+          rootStyles.add(styles);
+        }
+      });
+    }
+  };
+
+export const SlotStylesMixin = dedupeMixin(SlotStylesMixinImplementation);

src/styles/style-props.js

@@ -122,2 +122,9 @@ /**
         --safe-area-inset-left: env(safe-area-inset-left, 0px);
+        --safe-area-inset-inline-start: var(--safe-area-inset-left);
+        --safe-area-inset-inline-end: var(--safe-area-inset-right);
+
+        &:dir(rtl) {
+          --safe-area-inset-inline-start: var(--safe-area-inset-right);
+          --safe-area-inset-inline-end: var(--safe-area-inset-left);
+        }
       }
@@ -124,0 +131,0 @@

src/tooltip-controller.d.ts

@@ -46,8 +46,2 @@ /**
   /**
-   * When true, the tooltip is opened programmatically.
-   * Only works if `manual` is set to `true`.
-   */
-  opened: boolean;
-
-  /**
    * Position of the tooltip with respect to its target.
@@ -79,7 +73,2 @@ */
   /**
-   * Toggle opened state on the slotted tooltip.
-   */
-  setOpened(opened: boolean): void;
-
-  /**
    * Set default position for the slotted tooltip.
@@ -101,2 +90,16 @@ * This can be overridden by setting the position
   setTarget(target: HTMLElement): void;
+
+  /**
+   * Schedule opening the slotted tooltip. Respects the tooltip's
+   * configured `hoverDelay` / `focusDelay` and the shared warm-up state.
+   * No-op when no tooltip is slotted.
+   */
+  open(options?: { hover?: boolean; focus?: boolean; immediate?: boolean }): void;
+
+  /**
+   * Schedule closing the slotted tooltip. Respects the tooltip's
+   * configured `hideDelay` unless `immediate` is true.
+   * No-op when no tooltip is slotted.
+   */
+  close(immediate?: boolean): void;
 }

src/tooltip-controller.js

@@ -42,6 +42,2 @@ /**
 
-    if (this.opened !== undefined) {
-      tooltipNode.opened = this.opened;
-    }
-
     if (this.position !== undefined) {
@@ -118,15 +114,2 @@ tooltipNode._position = this.position;
   /**
-   * Toggle opened state on the slotted tooltip.
-   * @param {boolean} opened
-   */
-  setOpened(opened) {
-    this.opened = opened;
-
-    const tooltipNode = this.node;
-    if (tooltipNode) {
-      tooltipNode.opened = opened;
-    }
-  }
-
-  /**
    * Set default position for the slotted tooltip.
@@ -173,2 +156,30 @@ * This can be overridden by setting the position
 
+  /**
+   * Schedule opening the slotted tooltip. Respects the tooltip's
+   * configured `hoverDelay` / `focusDelay` and the shared warm-up state.
+   * No-op when no tooltip is slotted.
+   *
+   * @param {{ hover?: boolean, focus?: boolean, immediate?: boolean }} [options]
+   */
+  open(options) {
+    const tooltipNode = this.node;
+    if (tooltipNode?.isConnected) {
+      tooltipNode._stateController.open(options);
+    }
+  }
+
+  /**
+   * Schedule closing the slotted tooltip. Respects the tooltip's
+   * configured `hideDelay` unless `immediate` is true.
+   * No-op when no tooltip is slotted.
+   *
+   * @param {boolean} [immediate]
+   */
+  close(immediate) {
+    const tooltipNode = this.node;
+    if (tooltipNode) {
+      tooltipNode._stateController.close(immediate);
+    }
+  }
+
   /** @private */
@@ -175,0 +186,0 @@ __onContentChange(event) {

src/virtualizer-iron-list-adapter.js

@@ -81,4 +81,2 @@ /**
 
-    this._scrollLineHeight = this._getScrollLineHeight();
-
     this.scrollTarget.addEventListener('virtualizer-element-focused', (e) => this.__onElementFocused(e));
@@ -466,6 +464,2 @@ this.elementsContainer.addEventListener('focusin', () => {
     this._viewportHeight = this.scrollTarget.offsetHeight;
-    this._scrollPageHeight = this._viewportHeight - this._scrollLineHeight;
-    if (this.grid) {
-      this._updateGridMetrics();
-    }
   }
@@ -785,16 +779,2 @@
 
-  /**
-   * @returns {Number|undefined} - The browser's default font-size in pixels
-   * @private
-   */
-  _getScrollLineHeight() {
-    const el = document.createElement('div');
-    el.style.fontSize = 'initial';
-    el.style.display = 'none';
-    document.body.appendChild(el);
-    const fontSize = window.getComputedStyle(el).fontSize;
-    document.body.removeChild(el);
-    return fontSize ? window.parseInt(fontSize) : undefined;
-  }
-
   __getVisibleElements() {
@@ -801,0 +781,0 @@ return Array.from(this.elementsContainer.children).filter((element) => !element.hidden);

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

249578

0.45%

Lines of code

7107

0.71%

Worsened metrics

Number of low supply chain risk alerts

14

7.69%

No dependency changes