npm - @vaadin/component-base - Versions diffs - 23.2.0-alpha2 → 23.2.0-alpha5 - Mend

@vaadin/component-base 23.2.0-alpha2 → 23.2.0-alpha5

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 (24) hide show

package/custom_typings/vaadin.d.ts +0 -1
package/package.json +2 -2
package/src/a11y-announcer.d.ts +1 -1
package/src/active-mixin.d.ts +4 -4
package/src/controller-mixin.d.ts +3 -3
package/src/debounce.d.ts +1 -1
package/src/dir-mixin.d.ts +2 -2
package/src/disabled-mixin.d.ts +1 -1
package/src/element-mixin.d.ts +3 -3
package/src/element-mixin.js +1 -1
package/src/focus-mixin.d.ts +2 -2
package/src/focus-trap-controller.d.ts +1 -1
package/src/gestures.js +1 -1
package/src/keyboard-mixin.d.ts +2 -2
package/src/media-query-controller.d.ts +1 -1
package/src/overflow-controller.d.ts +34 -0
package/src/overflow-controller.js +115 -0
package/src/polylit-mixin.d.ts +3 -3
package/src/polylit-mixin.js +2 -1
package/src/resize-mixin.d.ts +2 -2
package/src/slot-controller.d.ts +1 -1
package/src/slot-mixin.d.ts +2 -2
package/src/tabindex-mixin.d.ts +6 -6
package/src/virtualizer-iron-list-adapter.js +15 -5

package/custom_typings/vaadin.d.ts CHANGED Viewed

@@ -1,7 +1,6 @@
 interface Vaadin {
   developmentModeCallback?: {
     'usage-statistics'?(): void;
-    'vaadin-license-checker'?(): void;
   };
   registrations?: Array<{ is: string; version: string }>;
   usageStatsChecker?: {

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/component-base",
-  "version": "23.2.0-alpha2",
+  "version": "23.2.0-alpha5",
   "publishConfig": {
     "access": "public"
   },
@@ -42,5 +42,5 @@
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^13.0.2"
   },
-  "gitHead": "c9b8113d0fa9a602f8b9cb915c1826355af2e8df"
+  "gitHead": "c6247fd741d61096d75a71feda4a1faf88b6f0ce"
 }

package/src/a11y-announcer.d.ts CHANGED Viewed

@@ -7,4 +7,4 @@
 /**
  * Cause a text string to be announced by screen readers.
  */
-export function announce(text: string, options?: { mode?: 'polite' | 'assertive' | 'alert'; timeout?: number }): void;
+export function announce(text: string, options?: { mode?: 'alert' | 'assertive' | 'polite'; timeout?: number }): void;

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

@@ -3,9 +3,9 @@
  * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { Constructor } from '@open-wc/dedupe-mixin';
-import { DisabledMixinClass } from './disabled-mixin.js';
-import { KeyboardMixinClass } from './keyboard-mixin.js';
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { DisabledMixinClass } from './disabled-mixin.js';
+import type { KeyboardMixinClass } from './keyboard-mixin.js';
 /**
  * A mixin to toggle the `active` attribute.
@@ -18,7 +18,7 @@ import { KeyboardMixinClass } from './keyboard-mixin.js';
  */
 export declare function ActiveMixin<T extends Constructor<HTMLElement>>(
   base: T,
-): T & Constructor<ActiveMixinClass> & Constructor<DisabledMixinClass> & Constructor<KeyboardMixinClass>;
+): Constructor<ActiveMixinClass> & Constructor<DisabledMixinClass> & Constructor<KeyboardMixinClass> & T;
 export declare class ActiveMixinClass {
   /**

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

@@ -3,15 +3,15 @@
  * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { Constructor } from '@open-wc/dedupe-mixin';
-import { ReactiveController, ReactiveControllerHost } from 'lit';
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
 /**
  * A mixin for connecting controllers to the element.
  */
 export declare function ControllerMixin<T extends Constructor<HTMLElement>>(
   superclass: T,
-): T & Constructor<ControllerMixinClass>;
+): Constructor<ControllerMixinClass> & T;
 export declare class ControllerMixinClass
   implements Pick<ReactiveControllerHost, 'addController' | 'removeController'>

package/src/debounce.d.ts CHANGED Viewed

@@ -7,7 +7,7 @@
  * Code distributed by Google as part of the polymer project is also
  * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
  */
-import { AsyncInterface } from './async.js';
+import type { AsyncInterface } from './async.js';
 export declare class Debouncer {
   /**

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

@@ -3,12 +3,12 @@
  * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { Constructor } from '@open-wc/dedupe-mixin';
+import type { Constructor } from '@open-wc/dedupe-mixin';
 /**
  * A mixin to handle `dir` attribute based on the one set on the `<html>` element.
  */
-export declare function DirMixin<T extends Constructor<HTMLElement>>(base: T): T & Constructor<DirMixinClass>;
+export declare function DirMixin<T extends Constructor<HTMLElement>>(base: T): Constructor<DirMixinClass> & T;
 export declare class DirMixinClass {
   protected __getNormalizedScrollLeft(element: Element | null): number;

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

@@ -3,7 +3,7 @@
  * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { Constructor } from '@open-wc/dedupe-mixin';
+import type { Constructor } from '@open-wc/dedupe-mixin';
 /**
  * A mixin to provide disabled property for field components.

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

@@ -5,15 +5,15 @@
  */
 import '../custom_typings/vaadin-usage-statistics.js';
 import '../custom_typings/vaadin.js';
-import { Constructor } from '@open-wc/dedupe-mixin';
-import { DirMixinClass } from './dir-mixin.js';
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { DirMixinClass } from './dir-mixin.js';
 /**
  * A mixin providing common logic for Vaadin components.
  */
 export declare function ElementMixin<T extends Constructor<HTMLElement>>(
   superclass: T,
-): T & Constructor<DirMixinClass> & Constructor<ElementMixinClass>;
+): Constructor<DirMixinClass> & Constructor<ElementMixinClass> & T;
 export declare class ElementMixinClass {
   static version: string;

package/src/element-mixin.js CHANGED Viewed

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

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

@@ -3,12 +3,12 @@
  * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { Constructor } from '@open-wc/dedupe-mixin';
+import type { Constructor } from '@open-wc/dedupe-mixin';
 /**
  * A mixin to handle `focused` and `focus-ring` attributes based on focus.
  */
-export declare function FocusMixin<T extends Constructor<HTMLElement>>(base: T): T & Constructor<FocusMixinClass>;
+export declare function FocusMixin<T extends Constructor<HTMLElement>>(base: T): Constructor<FocusMixinClass> & T;
 export declare class FocusMixinClass {
   protected readonly _keyboardActive: boolean;

package/src/focus-trap-controller.d.ts CHANGED Viewed

@@ -3,7 +3,7 @@
  * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { ReactiveController } from 'lit';
+import type { ReactiveController } from 'lit';
 /**
  * A controller for trapping focus within a DOM node.

package/src/gestures.js CHANGED Viewed

@@ -277,7 +277,7 @@ function _handleNative(ev) {
   }
   if (!ev[HANDLED_OBJ]) {
     ev[HANDLED_OBJ] = {};
-    if (type.slice(0, 5) === 'touch') {
+    if (type.startsWith('touch')) {
       const t = ev.changedTouches[0];
       if (type === 'touchstart') {
         // Only handle the first finger

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

@@ -3,14 +3,14 @@
  * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { Constructor } from '@open-wc/dedupe-mixin';
+import type { Constructor } from '@open-wc/dedupe-mixin';
 /**
  * A mixin that manages keyboard handling.
  * The mixin subscribes to the keyboard events while an actual implementation
  * for the event handlers is left to the client (a component or another mixin).
  */
-export declare function KeyboardMixin<T extends Constructor<HTMLElement>>(base: T): T & Constructor<KeyboardMixinClass>;
+export declare function KeyboardMixin<T extends Constructor<HTMLElement>>(base: T): Constructor<KeyboardMixinClass> & T;
 export declare class KeyboardMixinClass {
   /**

package/src/media-query-controller.d.ts CHANGED Viewed

@@ -3,7 +3,7 @@
  * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { ReactiveController } from 'lit';
+import type { ReactiveController } from 'lit';
 /**
  * A controller for listening on media query changes.

package/src/overflow-controller.d.ts ADDED Viewed

@@ -0,0 +1,34 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { ReactiveController } from 'lit';
+/**
+ * A controller that detects if content inside the element overflows its scrolling viewport,
+ * and sets the `overflow` attribute on the host with a value that indicates the directions
+ * where content is overflowing. Supported values are: `top`, `bottom`, `start`, `end`.
+ */
+export class OverflowController implements ReactiveController {
+  /**
+   * The controller host element.
+   */
+  host: HTMLElement;
+  /**
+   * The element that wraps scrollable content.
+   * If not set, the host element is used.
+   */
+  scrollTarget: HTMLElement;
+  constructor(host: HTMLElement, scrollTarget?: HTMLElement);
+  hostConnected(): void;
+  /**
+   * Setup a scroll listener and observers to update overflow.
+   * Also performs one-time update synchronously when called.
+   */
+  protected observe(): void;
+}

package/src/overflow-controller.js ADDED Viewed

@@ -0,0 +1,115 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
+import { animationFrame } from './async.js';
+import { Debouncer } from './debounce.js';
+/**
+ * A controller that detects if content inside the element overflows its scrolling viewport,
+ * and sets the `overflow` attribute on the host with a value that indicates the directions
+ * where content is overflowing. Supported values are: `top`, `bottom`, `start`, `end`.
+ */
+export class OverflowController {
+  constructor(host, scrollTarget) {
+    /**
+     * The controller host element.
+     *
+     * @type {HTMLElement}
+     */
+    this.host = host;
+    /**
+     * The element that wraps scrollable content.
+     * If not set, the host element is used.
+     *
+     * @type {HTMLElement}
+     */
+    this.scrollTarget = scrollTarget || host;
+    /** @private */
+    this.__boundOnScroll = this.__onScroll.bind(this);
+  }
+  hostConnected() {
+    if (!this.initialized) {
+      this.initialized = true;
+      this.observe();
+    }
+  }
+  /**
+   * Setup scroll listener and observers to update overflow.
+   * Also performs one-time update synchronously when called.
+   * @protected
+   */
+  observe() {
+    this.__resizeObserver = new ResizeObserver(() => {
+      this.__debounceOverflow = Debouncer.debounce(this.__debounceOverflow, animationFrame, () => {
+        this.__updateOverflow();
+      });
+    });
+    this.__resizeObserver.observe(this.host);
+    this.__childObserver = new FlattenedNodesObserver(this.host, (info) => {
+      info.addedNodes.forEach((node) => {
+        if (node.nodeType === Node.ELEMENT_NODE) {
+          this.__resizeObserver.observe(node);
+        }
+      });
+      info.removedNodes.forEach((node) => {
+        if (node.nodeType === Node.ELEMENT_NODE) {
+          this.__resizeObserver.unobserve(node);
+        }
+      });
+      this.__updateOverflow();
+    });
+    // Update overflow attribute on scroll
+    this.scrollTarget.addEventListener('scroll', this.__boundOnScroll);
+    this.__updateOverflow();
+  }
+  /** @private */
+  __onScroll() {
+    this.__updateOverflow();
+  }
+  /** @private */
+  __updateOverflow() {
+    const target = this.scrollTarget;
+    let overflow = '';
+    if (target.scrollTop > 0) {
+      overflow += ' top';
+    }
+    if (target.scrollTop < target.scrollHeight - target.clientHeight) {
+      overflow += ' bottom';
+    }
+    const scrollLeft = Math.abs(target.scrollLeft);
+    if (scrollLeft > 0) {
+      overflow += ' start';
+    }
+    if (scrollLeft < target.scrollWidth - target.clientWidth) {
+      overflow += ' end';
+    }
+    overflow = overflow.trim();
+    if (overflow.length > 0 && this.host.getAttribute('overflow') !== overflow) {
+      this.host.setAttribute('overflow', overflow);
+    } else if (overflow.length === 0 && this.host.hasAttribute('overflow')) {
+      this.host.removeAttribute('overflow');
+    }
+  }
+}

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

@@ -3,10 +3,10 @@
  * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { Constructor } from '@open-wc/dedupe-mixin';
-import { LitElement } from 'lit';
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { LitElement } from 'lit';
-export declare function PolylitMixin<T extends Constructor<LitElement>>(base: T): T & Constructor<PolylitMixinClass>;
+export declare function PolylitMixin<T extends Constructor<LitElement>>(base: T): Constructor<PolylitMixinClass> & T;
 export declare class PolylitMixinClass {
   ready(): void;

package/src/polylit-mixin.js CHANGED Viewed

@@ -10,7 +10,8 @@ const caseMap = {};
 const CAMEL_TO_DASH = /([A-Z])/g;
 function camelToDash(camel) {
-  return caseMap[camel] || (caseMap[camel] = camel.replace(CAMEL_TO_DASH, '-$1').toLowerCase());
+  caseMap[camel] = caseMap[camel] || camel.replace(CAMEL_TO_DASH, '-$1').toLowerCase();
+  return caseMap[camel];
 }
 function upper(name) {

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

@@ -3,12 +3,12 @@
  * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { Constructor } from '@open-wc/dedupe-mixin';
+import type { Constructor } from '@open-wc/dedupe-mixin';
 /**
  * A mixin that uses a ResizeObserver to listen to host size changes.
  */
-export declare function ResizeMixin<T extends Constructor<HTMLElement>>(base: T): T & Constructor<ResizeMixinClass>;
+export declare function ResizeMixin<T extends Constructor<HTMLElement>>(base: T): Constructor<ResizeMixinClass> & T;
 export declare class ResizeMixinClass {
   /**

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

@@ -3,7 +3,7 @@
  * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { ReactiveController } from 'lit';
+import type { ReactiveController } from 'lit';
 export class SlotController extends EventTarget implements ReactiveController {
   /**

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

@@ -3,12 +3,12 @@
  * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { Constructor } from '@open-wc/dedupe-mixin';
+import type { Constructor } from '@open-wc/dedupe-mixin';
 /**
  * A mixin to provide content for named slots defined by component.
  */
-export declare function SlotMixin<T extends Constructor<HTMLElement>>(base: T): T & Constructor<SlotMixinClass>;
+export declare function SlotMixin<T extends Constructor<HTMLElement>>(base: T): Constructor<SlotMixinClass> & T;
 export declare class SlotMixinClass {
   /**

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

@@ -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 { Constructor } from '@open-wc/dedupe-mixin';
-import { DisabledMixinClass } from './disabled-mixin.js';
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { DisabledMixinClass } from './disabled-mixin.js';
 /**
  * A mixin to toggle the `tabindex` attribute.
@@ -14,23 +14,23 @@ import { DisabledMixinClass } from './disabled-mixin.js';
  */
 export declare function TabindexMixin<T extends Constructor<HTMLElement>>(
   base: T,
-): T & Constructor<DisabledMixinClass> & Constructor<TabindexMixinClass>;
+): Constructor<DisabledMixinClass> & Constructor<TabindexMixinClass> & T;
 export declare class TabindexMixinClass {
   /**
    * Indicates whether the element can be focused and where it participates in sequential keyboard navigation.
    */
-  tabindex: number | undefined | null;
+  tabindex: number | null | undefined;
   /**
    * Stores the last known tabindex since the element has been disabled.
    */
-  protected _lastTabIndex: number | undefined | null;
+  protected _lastTabIndex: number | null | undefined;
   /**
    * When the user has changed tabindex while the element is disabled,
    * the observer reverts tabindex to -1 and rather saves the new tabindex value to apply it later.
    * The new value will be applied as soon as the element becomes enabled.
    */
-  protected _tabindexChanged(tabindex: number | undefined | null): void;
+  protected _tabindexChanged(tabindex: number | null | undefined): void;
 }

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

@@ -55,7 +55,9 @@ export class IronListAdapter {
     if (this.reorderElements) {
       // Reordering the physical elements cancels the user's grab of the scroll bar handle on Safari.
       // Need to defer reordering until the user lets go of the scroll bar handle.
-      this.scrollTarget.addEventListener('mousedown', () => (this.__mouseDown = true));
+      this.scrollTarget.addEventListener('mousedown', () => {
+        this.__mouseDown = true;
+      });
       this.scrollTarget.addEventListener('mouseup', () => {
         this.__mouseDown = false;
         if (this.__pendingReorder) {
@@ -298,7 +300,9 @@ export class IronListAdapter {
   /** @private */
   _isClientFull() {
     // Workaround an issue in iron-list that can cause it to freeze on fast scroll
-    setTimeout(() => (this.__clientFull = true));
+    setTimeout(() => {
+      this.__clientFull = true;
+    });
     return this.__clientFull || super._isClientFull();
   }
@@ -378,7 +382,9 @@ 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);
@@ -394,7 +400,9 @@ 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();
@@ -494,7 +502,9 @@ export class IronListAdapter {
     if (isSafari) {
       const { transform } = this.scrollTarget.style;
       this.scrollTarget.style.transform = 'translateZ(0)';
-      setTimeout(() => (this.scrollTarget.style.transform = transform));
+      setTimeout(() => {
+        this.scrollTarget.style.transform = transform;
+      });
     }
   }