@vaadin/component-base 23.1.0-alpha3 → 23.1.0-beta2

package/src/resize-mixin.js

@@ -8,7 +8,14 @@ import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';
 const observer = new ResizeObserver((entries) => {
   setTimeout(() => {
     entries.forEach((entry) => {
-      entry.target._onResize(entry.contentRect);
+      // Notify child resizables, if any
+      if (entry.target.resizables) {
+        entry.target.resizables.forEach((resizable) => {
+          resizable._onResize(entry.contentRect);
+        });
+      } else {
+        entry.target._onResize(entry.contentRect);
+      }
     });
   });
 });
@@ -25,12 +32,49 @@ export const ResizeMixin = dedupingMixin(
       connectedCallback() {
         super.connectedCallback();
         observer.observe(this);
+
+        if (this._observeParent) {
+          const parent = this.parentNode instanceof ShadowRoot ? this.parentNode.host : this.parentNode;
+
+          if (!parent.resizables) {
+            parent.resizables = new Set();
+            observer.observe(parent);
+          }
+
+          parent.resizables.add(this);
+          this.__parent = parent;
+        }
       }
 
       /** @protected */
       disconnectedCallback() {
         super.disconnectedCallback();
         observer.unobserve(this);
+
+        const parent = this.__parent;
+        if (this._observeParent && parent) {
+          const resizables = parent.resizables;
+
+          if (resizables) {
+            resizables.delete(this);
+
+            if (resizables.size === 0) {
+              observer.unobserve(parent);
+            }
+          }
+
+          this.__parent = null;
+        }
+      }
+
+      /**
+       * When true, the parent element resize will be also observed.
+       * Override this getter and return `true` to enable this.
+       *
+       * @protected
+       */
+      get _observeParent() {
+        return false;
       }
 
       /**
@@ -49,8 +93,8 @@ export const ResizeMixin = dedupingMixin(
        */
       notifyResize() {
         console.warn(
-          `WARNING: Since Vaadin 23, notifyResize() is deprecated. The component uses a ResizeObserver internally and doesn't need to be explicitly notified of resizes.`
+          `WARNING: Since Vaadin 23, notifyResize() is deprecated. The component uses a ResizeObserver internally and doesn't need to be explicitly notified of resizes.`,
         );
       }
-    }
+    },
 );

package/src/slot-controller.d.ts

@@ -10,7 +10,7 @@ export class SlotController extends EventTarget implements ReactiveController {
     host: HTMLElement,
     slotName: string,
     slotFactory?: () => HTMLElement,
-    slotInitializer?: (host: HTMLElement, node: HTMLElement) => void
+    slotInitializer?: (host: HTMLElement, node: HTMLElement) => void,
   );
 
   hostConnected(): void;

package/src/slot-mixin.js

@@ -56,5 +56,5 @@ export const SlotMixin = dedupingMixin(
           );
         });
       }
-    }
+    },
 );

package/src/tabindex-mixin.d.ts

@@ -13,7 +13,7 @@ import { DisabledMixinClass } from './disabled-mixin.js';
  * and restored with the last known value once the element is enabled.
  */
 export declare function TabindexMixin<T extends Constructor<HTMLElement>>(
-  base: T
+  base: T,
 ): T & Constructor<DisabledMixinClass> & Constructor<TabindexMixinClass>;
 
 export declare class TabindexMixinClass {

package/src/tabindex-mixin.js

@@ -26,7 +26,7 @@ export const TabindexMixin = (superclass) =>
         tabindex: {
           type: Number,
           reflectToAttribute: true,
-          observer: '_tabindexChanged'
+          observer: '_tabindexChanged',
         },
 
         /**
@@ -35,8 +35,8 @@ export const TabindexMixin = (superclass) =>
          * @protected
          */
         _lastTabIndex: {
-          type: Number
-        }
+          type: Number,
+        },
       };
     }
 

package/src/templates.js

@@ -18,7 +18,7 @@ export function processTemplates(component) {
 
   if (component.querySelector('template')) {
     console.warn(
-      `WARNING: <template> inside <${component.localName}> is no longer supported. Import @vaadin/polymer-legacy-adapter/template-renderer.js to enable compatibility.`
+      `WARNING: <template> inside <${component.localName}> is no longer supported. Import @vaadin/polymer-legacy-adapter/template-renderer.js to enable compatibility.`,
     );
   }
 }

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

@@ -8,7 +8,7 @@ import { isSafari } from './browser-utils.js';
 import { Debouncer, flush } from './debounce.js';
 import { ironList } from './iron-list-core.js';
 
-// iron-list can by default handle sizes up to around 100000.
+// Iron-list can by default handle sizes up to around 100000.
 // When the size is larger than MAX_VIRTUAL_COUNT _vidxOffset is used
 const MAX_VIRTUAL_COUNT = 100000;
 const OFFSET_ADJUST_MIN_THRESHOLD = 1000;
@@ -28,7 +28,7 @@ export class IronListAdapter {
 
     this.timeouts = {
       SCROLL_REORDER: 500,
-      IGNORE_WHEEL: 500
+      IGNORE_WHEEL: 500,
     };
 
     this.__resizeObserver = new ResizeObserver(() => this._resizeHandler());
@@ -118,8 +118,12 @@ export class IronListAdapter {
     this._resizeHandler();
     flush();
     this._scrollHandler();
-    this.__scrollReorderDebouncer && this.__scrollReorderDebouncer.flush();
-    this.__debouncerWheelAnimationFrame && this.__debouncerWheelAnimationFrame.flush();
+    if (this.__scrollReorderDebouncer) {
+      this.__scrollReorderDebouncer.flush();
+    }
+    if (this.__debouncerWheelAnimationFrame) {
+      this.__debouncerWheelAnimationFrame.flush();
+    }
   }
 
   update(startIndex = 0, endIndex = this.size - 1) {
@@ -168,8 +172,8 @@ export class IronListAdapter {
     this.__preventElementUpdates = true;
 
     // Record the scroll position before changing the size
-    let fvi; // first visible index
-    let fviOffsetBefore; // scroll offset of the first visible index
+    let fvi; // First visible index
+    let fviOffsetBefore; // Scroll offset of the first visible index
     if (size > 0) {
       fvi = this.adjustedFirstVisibleIndex;
       fviOffsetBefore = this.__getIndexScrollOffset(fvi);
@@ -183,7 +187,7 @@ export class IronListAdapter {
     flush();
 
     this._itemsChanged({
-      path: 'items'
+      path: 'items',
     });
     flush();
 
@@ -221,7 +225,7 @@ export class IronListAdapter {
   /** @private */
   get items() {
     return {
-      length: Math.min(this.size, MAX_VIRTUAL_COUNT)
+      length: Math.min(this.size, MAX_VIRTUAL_COUNT),
     };
   }
 
@@ -233,7 +237,7 @@ export class IronListAdapter {
   /** @private */
   get $() {
     return {
-      items: this.scrollContainer
+      items: this.scrollContainer,
     };
   }
 
@@ -245,7 +249,9 @@ export class IronListAdapter {
     this._viewportWidth = this.elementsContainer.offsetWidth;
     this._viewportHeight = this.scrollTarget.offsetHeight;
     this._scrollPageHeight = this._viewportHeight - this._scrollLineHeight;
-    this.grid && this._updateGridMetrics();
+    if (this.grid) {
+      this._updateGridMetrics();
+    }
   }
 
   /** @private */
@@ -298,11 +304,20 @@ export class IronListAdapter {
 
     super._scrollHandler();
 
+    if (this._physicalCount !== 0) {
+      // After running super._scrollHandler, fix _virtualStart to workaround an iron-list issue.
+      // See https://github.com/vaadin/web-components/issues/1691
+      const reusables = this._getReusables(true);
+      this._physicalTop = reusables.physicalTop;
+      this._virtualStart += reusables.indexes.length;
+      this._physicalStart += reusables.indexes.length;
+    }
+
     if (this.reorderElements) {
       this.__scrollReorderDebouncer = Debouncer.debounce(
         this.__scrollReorderDebouncer,
         timeOut.after(this.timeouts.SCROLL_REORDER),
-        () => this.__reorderElements()
+        () => this.__reorderElements(),
       );
     }
 
@@ -340,7 +355,7 @@ export class IronListAdapter {
     this.__debouncerWheelAnimationFrame = Debouncer.debounce(
       this.__debouncerWheelAnimationFrame,
       animationFrame,
-      () => (this._wheelAnimationFrame = false)
+      () => (this._wheelAnimationFrame = false),
     );
 
     const momentum = Math.abs(e.deltaX) + Math.abs(deltaY);
@@ -356,7 +371,7 @@ export class IronListAdapter {
       this._debouncerIgnoreNewWheel = Debouncer.debounce(
         this._debouncerIgnoreNewWheel,
         timeOut.after(this.timeouts.IGNORE_WHEEL),
-        () => (this._ignoreNewWheel = false)
+        () => (this._ignoreNewWheel = false),
       );
     } else if ((this._hasResidualMomentum && momentum <= this._previousMomentum) || this._ignoreNewWheel) {
       e.preventDefault();
@@ -427,7 +442,7 @@ export class IronListAdapter {
     const elementWithFocus = visibleElements.find(
       (element) =>
         element.contains(this.elementsContainer.getRootNode().activeElement) ||
-        element.contains(this.scrollTarget.getRootNode().activeElement)
+        element.contains(this.scrollTarget.getRootNode().activeElement),
     );
     const targetElement = elementWithFocus || visibleElements[0];
     if (!targetElement) {