@vaadin/component-base 23.3.0-alpha2 → 24.0.0-alpha1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/component-base",
-  "version": "23.3.0-alpha2",
+  "version": "24.0.0-alpha1",
   "publishConfig": {
     "access": "public"
   },
@@ -42,5 +42,5 @@
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^13.0.2"
   },
-  "gitHead": "ae61027c62ffa7f7d70cfc50e43f333addfc74b6"
+  "gitHead": "427527c27c4b27822d61fd41d38d7b170134770b"
 }

package/src/a11y-announcer.js

@@ -3,9 +3,8 @@
  * Copyright (c) 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-
-import { animationFrame } from '@vaadin/component-base/src/async.js';
-import { Debouncer } from '@vaadin/component-base/src/debounce.js';
+import { animationFrame } from './async.js';
+import { Debouncer } from './debounce.js';
 
 const region = document.createElement('div');
 

package/src/active-mixin.js

@@ -3,8 +3,8 @@
  * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { addListener } from '@vaadin/component-base/src/gestures.js';
 import { DisabledMixin } from './disabled-mixin.js';
+import { addListener } from './gestures.js';
 import { KeyboardMixin } from './keyboard-mixin.js';
 
 /**

package/src/dir-mixin.js

@@ -9,6 +9,7 @@ import { DirHelper } from './dir-helper.js';
  * Array of Vaadin custom element classes that have been subscribed to the dir changes.
  */
 const directionSubscribers = [];
+
 function directionUpdater() {
   const documentDir = getDocumentDir();
   directionSubscribers.forEach((element) => {
@@ -74,7 +75,7 @@ export const DirMixin = (superClass) =>
     connectedCallback() {
       super.connectedCallback();
 
-      if (!this.hasAttribute('dir')) {
+      if (!this.hasAttribute('dir') || this.__restoreSubscription) {
         this.__subscribe();
         alignDirs(this, getDocumentDir(), null);
       }
@@ -100,15 +101,15 @@ export const DirMixin = (superClass) =>
         this.__subscribe();
         alignDirs(this, documentDir, newValue);
       } else if (newDiffValue) {
-        this.__subscribe(false);
+        this.__unsubscribe();
       }
     }
 
     /** @protected */
     disconnectedCallback() {
       super.disconnectedCallback();
-      this.__subscribe(false);
-      this.removeAttribute('dir');
+      this.__restoreSubscription = directionSubscribers.includes(this);
+      this.__unsubscribe();
     }
 
     /** @protected */
@@ -133,12 +134,15 @@ export const DirMixin = (superClass) =>
     }
 
     /** @private */
-    __subscribe(push = true) {
-      if (push) {
-        if (!directionSubscribers.includes(this)) {
-          directionSubscribers.push(this);
-        }
-      } else if (directionSubscribers.includes(this)) {
+    __subscribe() {
+      if (!directionSubscribers.includes(this)) {
+        directionSubscribers.push(this);
+      }
+    }
+
+    /** @private */
+    __unsubscribe() {
+      if (directionSubscribers.includes(this)) {
         directionSubscribers.splice(directionSubscribers.indexOf(this), 1);
       }
     }

package/src/element-mixin.js

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

package/src/tooltip-controller.d.ts

@@ -67,7 +67,9 @@ export class TooltipController extends SlotController {
   setOpened(opened: boolean): void;
 
   /**
-   * Set position on the slotted tooltip.
+   * Set default position for the slotted tooltip.
+   * This can be overridden by setting the position
+   * using corresponding property or attribute.
    */
   setPosition(position: TooltipPosition): void;
 

package/src/tooltip-controller.js

@@ -39,7 +39,7 @@ export class TooltipController extends SlotController {
     }
 
     if (this.position !== undefined) {
-      this.__updatePosition(tooltipNode, this.position);
+      tooltipNode._position = this.position;
     }
 
     if (this.shouldShow !== undefined) {
@@ -87,13 +87,18 @@ export class TooltipController extends SlotController {
   }
 
   /**
-   * Set position on the slotted tooltip.
+   * Set default position for the slotted tooltip.
+   * This can be overridden by setting the position
+   * using corresponding property or attribute.
    * @param {string} position
    */
   setPosition(position) {
     this.position = position;
 
-    this.__updatePosition(this.node, position);
+    const tooltipNode = this.node;
+    if (tooltipNode) {
+      tooltipNode._position = position;
+    }
   }
 
   /**
@@ -122,11 +127,4 @@ export class TooltipController extends SlotController {
       tooltipNode.target = target;
     }
   }
-
-  /** @private */
-  __updatePosition(node, position) {
-    if (node && !node.hasAttribute('position')) {
-      node.position = position;
-    }
-  }
 }

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

@@ -155,6 +155,10 @@ export class IronListAdapter {
       // 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);
@@ -349,6 +353,12 @@ export class IronListAdapter {
     }
 
     this.__previousScrollTop = this._scrollTop;
+
+    // If the first visible index is not 0 when scrolled to the top,
+    // add some scroll offset to enable the user to continue scrolling.
+    if (this._scrollTop === 0 && this.firstVisibleIndex !== 0) {
+      this._scrollTop = 1;
+    }
   }
 
   /** @private */