@vaadin/component-base 23.0.9 → 23.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/component-base",
-  "version": "23.0.9",
+  "version": "23.0.12",
   "publishConfig": {
     "access": "public"
   },
@@ -42,5 +42,5 @@
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^9.2.4"
   },
-  "gitHead": "4d687bdd48ba78d55f3371a78b70818e4dfca1a3"
+  "gitHead": "717908c222c1e241259e30b4144cd5ba32734819"
 }

package/src/active-mixin.d.ts

@@ -17,7 +17,7 @@ import { KeyboardMixinClass } from './keyboard-mixin.js';
  * by the pointer or by releasing the activation key.
  */
 export declare function ActiveMixin<T extends Constructor<HTMLElement>>(
-  base: T
+  base: T,
 ): T & Constructor<ActiveMixinClass> & Constructor<DisabledMixinClass> & Constructor<KeyboardMixinClass>;
 
 export declare class ActiveMixinClass {

package/src/async.js

@@ -70,7 +70,7 @@ const timeOut = {
       },
       cancel(handle) {
         window.clearTimeout(handle);
-      }
+      },
     };
   },
   /**
@@ -93,7 +93,7 @@ const timeOut = {
    */
   cancel(handle) {
     window.clearTimeout(handle);
-  }
+  },
 };
 export { timeOut };
 
@@ -123,7 +123,7 @@ const animationFrame = {
    */
   cancel(handle) {
     window.cancelAnimationFrame(handle);
-  }
+  },
 };
 export { animationFrame };
 
@@ -154,7 +154,7 @@ const idlePeriod = {
    */
   cancel(handle) {
     window.cancelIdleCallback ? window.cancelIdleCallback(handle) : window.clearTimeout(handle);
-  }
+  },
 };
 export { idlePeriod };
 
@@ -206,6 +206,6 @@ const microTask = {
       }
       microtaskCallbacks[idx] = null;
     }
-  }
+  },
 };
 export { microTask };

package/src/controller-mixin.d.ts

@@ -10,7 +10,7 @@ import { ReactiveController, ReactiveControllerHost } from 'lit';
  * A mixin for connecting controllers to the element.
  */
 export declare function ControllerMixin<T extends Constructor<HTMLElement>>(
-  superclass: T
+  superclass: T,
 ): T & Constructor<ControllerMixinClass>;
 
 export declare class ControllerMixinClass

package/src/controller-mixin.js

@@ -63,5 +63,5 @@ export const ControllerMixin = dedupingMixin(
       removeController(controller) {
         this.__controllers.delete(controller);
       }
-    }
+    },
 );

package/src/dir-helper.d.ts

@@ -35,7 +35,7 @@ declare class DirHelper {
     scrollType: string,
     direction: string,
     element: Element | null,
-    scrollLeft: number
+    scrollLeft: number,
   ): void;
 }
 

package/src/dir-mixin.js

@@ -48,8 +48,8 @@ export const DirMixin = (superClass) =>
         dir: {
           type: String,
           value: '',
-          reflectToAttribute: true
-        }
+          reflectToAttribute: true,
+        },
       };
     }
 

package/src/disabled-mixin.js

@@ -22,8 +22,8 @@ export const DisabledMixin = dedupingMixin(
             type: Boolean,
             value: false,
             observer: '_disabledChanged',
-            reflectToAttribute: true
-          }
+            reflectToAttribute: true,
+          },
         };
       }
 
@@ -58,5 +58,5 @@ export const DisabledMixin = dedupingMixin(
           super.click();
         }
       }
-    }
+    },
 );

package/src/dom-utils.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * Returns an array of ancestor root nodes for the given node.
+ *
+ * A root node is either a document node or a document fragment node (Shadow Root).
+ * The array is collected by a bottom-up DOM traversing that starts with the given node
+ * and involves both the light DOM and ancestor shadow DOM trees.
+ */
+export function getAncestorRootNodes(node: Node): Node[];

package/src/dom-utils.js

@@ -0,0 +1,41 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * Returns an array of ancestor root nodes for the given node.
+ *
+ * A root node is either a document node or a document fragment node (Shadow Root).
+ * The array is collected by a bottom-up DOM traversing that starts with the given node
+ * and involves both the light DOM and ancestor shadow DOM trees.
+ *
+ * @param {Node} node
+ * @return {Node[]}
+ */
+export function getAncestorRootNodes(node) {
+  const result = [];
+
+  while (node) {
+    if (node.nodeType === Node.DOCUMENT_NODE) {
+      result.push(node);
+      break;
+    }
+
+    if (node.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
+      result.push(node);
+      node = node.host;
+      continue;
+    }
+
+    if (node.assignedSlot) {
+      node = node.assignedSlot;
+      continue;
+    }
+
+    node = node.parentNode;
+  }
+
+  return result;
+}

package/src/element-mixin.d.ts

@@ -12,7 +12,7 @@ import { DirMixinClass } from './dir-mixin.js';
  * A mixin providing common logic for Vaadin components.
  */
 export declare function ElementMixin<T extends Constructor<HTMLElement>>(
-  superclass: T
+  superclass: T,
 ): T & Constructor<DirMixinClass> & Constructor<ElementMixinClass>;
 
 export declare class ElementMixinClass {

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.0.9';
+      return '23.0.12';
     }
 
     /** @protected */
@@ -67,7 +67,7 @@ export const ElementMixin = (superClass) =>
 
       if (document.doctype === null) {
         console.warn(
-          'Vaadin components require the "standards mode" declaration. Please add <!DOCTYPE html> to the HTML document.'
+          'Vaadin components require the "standards mode" declaration. Please add <!DOCTYPE html> to the HTML document.',
         );
       }
     }

package/src/focus-mixin.js

@@ -16,7 +16,7 @@ window.addEventListener(
   () => {
     keyboardActive = true;
   },
-  { capture: true }
+  { capture: true },
 );
 
 window.addEventListener(
@@ -24,7 +24,7 @@ window.addEventListener(
   () => {
     keyboardActive = false;
   },
-  { capture: true }
+  { capture: true },
 );
 
 /**
@@ -110,5 +110,5 @@ export const FocusMixin = dedupingMixin(
       _shouldRemoveFocus(_event) {
         return true;
       }
-    }
+    },
 );

package/src/gestures.js

@@ -65,7 +65,7 @@ let supportsPassive = false;
       // eslint-disable-next-line getter-return
       get() {
         supportsPassive = true;
-      }
+      },
     });
     window.addEventListener('test', null, opts);
     window.removeEventListener('test', null, opts);
@@ -103,7 +103,7 @@ const canBeDisabled = {
   optgroup: true,
   option: true,
   select: true,
-  textarea: true
+  textarea: true,
 };
 
 /**
@@ -161,14 +161,14 @@ function isSyntheticClick(ev) {
 const POINTERSTATE = {
   mouse: {
     target: null,
-    mouseIgnoreJob: null
+    mouseIgnoreJob: null,
   },
   touch: {
     x: 0,
     y: 0,
     id: -1,
-    scrollDecided: false
-  }
+    scrollDecided: false,
+  },
 };
 
 function firstTouchAction(ev) {
@@ -555,13 +555,13 @@ register({
   deps: ['mousedown', 'touchstart', 'touchend'],
   flow: {
     start: ['mousedown', 'touchstart'],
-    end: ['mouseup', 'touchend']
+    end: ['mouseup', 'touchend'],
   },
   emits: ['down', 'up'],
 
   info: {
     movefn: null,
-    upfn: null
+    upfn: null,
   },
 
   /**
@@ -616,7 +616,7 @@ register({
    */
   touchend: function (e) {
     downupFire('up', _findOriginalTarget(e), e.changedTouches[0], e);
-  }
+  },
 });
 
 /**
@@ -637,7 +637,7 @@ function downupFire(type, target, event, preventer) {
     preventer: preventer,
     prevent: function (e) {
       return prevent(e);
-    }
+    },
   });
 }
 
@@ -647,7 +647,7 @@ register({
   deps: ['mousedown', 'touchstart', 'touchmove', 'touchend'],
   flow: {
     start: ['mousedown', 'touchstart'],
-    end: ['mouseup', 'touchend']
+    end: ['mouseup', 'touchend'],
   },
   emits: ['track'],
 
@@ -666,7 +666,7 @@ register({
     },
     movefn: null,
     upfn: null,
-    prevent: false
+    prevent: false,
   },
 
   /**
@@ -779,7 +779,7 @@ register({
       this.info.addMove({ x: ct.clientX, y: ct.clientY });
       trackFire(this.info, t, ct);
     }
-  }
+  },
 });
 
 /**
@@ -831,7 +831,7 @@ function trackFire(info, target, touch) {
     sourceEvent: touch,
     hover: function () {
       return deepTargetFind(touch.clientX, touch.clientY);
-    }
+    },
   });
 }
 
@@ -840,13 +840,13 @@ register({
   deps: ['mousedown', 'click', 'touchstart', 'touchend'],
   flow: {
     start: ['mousedown', 'touchstart'],
-    end: ['click', 'touchend']
+    end: ['click', 'touchend'],
   },
   emits: ['tap'],
   info: {
     x: NaN,
     y: NaN,
-    prevent: false
+    prevent: false,
   },
 
   /**
@@ -900,7 +900,7 @@ register({
    */
   touchend: function (e) {
     trackForward(this.info, e.changedTouches[0], e);
-  }
+  },
 });
 
 /**
@@ -925,7 +925,7 @@ function trackForward(info, e, preventer) {
         x: e.clientX,
         y: e.clientY,
         sourceEvent: e,
-        preventer: preventer
+        preventer: preventer,
       });
     }
   }

package/src/iron-list-core.js

@@ -346,7 +346,7 @@ export const ironList = {
       // _increasePoolIfNeeded to run away creating items to try to fill it.
       this._physicalTop = Math.min(
         Math.floor(this._virtualStart / this._itemsPerRow) * this._physicalAverage,
-        this._scrollPosition
+        this._scrollPosition,
       );
       this._update();
     } else if (this._physicalCount > 0) {
@@ -467,7 +467,7 @@ export const ironList = {
     var nextPhysicalCount = this._clamp(
       this._physicalCount + count,
       DEFAULT_PHYSICAL_COUNT,
-      this._virtualCount - this._virtualStart
+      this._virtualCount - this._virtualStart,
     );
     nextPhysicalCount = this._convertIndexToCompleteRow(nextPhysicalCount);
     if (this.grid) {
@@ -520,7 +520,7 @@ export const ironList = {
       this._debounce(
         '_increasePoolIfNeeded',
         this._increasePoolIfNeeded.bind(this, this._clamp(Math.round(50 / this._templateCost), 1, nextIncrease)),
-        idlePeriod
+        idlePeriod,
       );
     }
   },
@@ -689,7 +689,7 @@ export const ironList = {
     // Update the average if it measured something.
     if (this._physicalAverageCount !== prevAvgCount) {
       this._physicalAverage = Math.round(
-        (prevPhysicalAvg * prevAvgCount + newPhysicalSize) / this._physicalAverageCount
+        (prevPhysicalAvg * prevAvgCount + newPhysicalSize) / this._physicalAverageCount,
       );
     }
   },
@@ -890,7 +890,7 @@ export const ironList = {
           this.toggleScrollListener(false);
         }
       },
-      animationFrame
+      animationFrame,
     );
   },
 
@@ -949,5 +949,5 @@ export const ironList = {
     this._debouncers = this._debouncers || {};
     this._debouncers[name] = Debouncer.debounce(this._debouncers[name], asyncModule, cb.bind(this));
     enqueueDebouncer(this._debouncers[name]);
-  }
+  },
 };

package/src/keyboard-mixin.js

@@ -49,5 +49,5 @@ export const KeyboardMixin = dedupingMixin(
       _onKeyUp(_event) {
         // To be implemented.
       }
-    }
+    },
 );

package/src/resize-mixin.js

@@ -93,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

@@ -28,7 +28,7 @@ export class IronListAdapter {
 
     this.timeouts = {
       SCROLL_REORDER: 500,
-      IGNORE_WHEEL: 500
+      IGNORE_WHEEL: 500,
     };
 
     this.__resizeObserver = new ResizeObserver(() => this._resizeHandler());
@@ -183,7 +183,7 @@ export class IronListAdapter {
     flush();
 
     this._itemsChanged({
-      path: 'items'
+      path: 'items',
     });
     flush();
 
@@ -221,7 +221,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 +233,7 @@ export class IronListAdapter {
   /** @private */
   get $() {
     return {
-      items: this.scrollContainer
+      items: this.scrollContainer,
     };
   }
 
@@ -311,7 +311,7 @@ export class IronListAdapter {
       this.__scrollReorderDebouncer = Debouncer.debounce(
         this.__scrollReorderDebouncer,
         timeOut.after(this.timeouts.SCROLL_REORDER),
-        () => this.__reorderElements()
+        () => this.__reorderElements(),
       );
     }
 
@@ -349,7 +349,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);
@@ -365,7 +365,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();
@@ -436,7 +436,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) {