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

package/custom_typings/vaadin.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/component-base",
-  "version": "23.1.0-alpha3",
+  "version": "23.1.0-beta2",
   "publishConfig": {
     "access": "public"
   },
@@ -42,5 +42,5 @@
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^13.0.2"
   },
-  "gitHead": "8c9e64e8dfa158dd52a9bf6da351ff038c88ca85"
+  "gitHead": "f11f9245a0b5e6bf912725a501c27c24b74e7c8d"
 }

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.d.ts

@@ -0,0 +1,114 @@
+/**
+ * @license
+ * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
+ * This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+ * The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+ * The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+ * 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
+ */
+
+export interface AsyncInterface {
+  run(fn: Function, delay?: number): number;
+  cancel(handle: number): void;
+}
+
+/**
+ * Not defined in the TypeScript DOM library.
+ * See https://developer.mozilla.org/en-US/docs/Web/API/IdleDeadline
+ */
+export interface IdleDeadline {
+  didTimeout: boolean;
+  timeRemaining(): number;
+}
+
+/**
+ * Async interface wrapper around `setTimeout`.
+ */
+declare namespace timeOut {
+  /**
+   * Returns a sub-module with the async interface providing the provided
+   * delay.
+   *
+   * @returns An async timeout interface
+   */
+  function after(delay?: number): AsyncInterface;
+
+  /**
+   * Enqueues a function called in the next task.
+   *
+   * @returns Handle used for canceling task
+   */
+  function run(fn: Function, delay?: number): number;
+
+  /**
+   * Cancels a previously enqueued `timeOut` callback.
+   */
+  function cancel(handle: number): void;
+}
+
+export { timeOut };
+
+/**
+ * Async interface wrapper around `requestAnimationFrame`.
+ */
+declare namespace animationFrame {
+  /**
+   * Enqueues a function called at `requestAnimationFrame` timing.
+   *
+   * @returns Handle used for canceling task
+   */
+  function run(fn: (p0: number) => void): number;
+
+  /**
+   * Cancels a previously enqueued `animationFrame` callback.
+   */
+  function cancel(handle: number): void;
+}
+
+export { animationFrame };
+
+/**
+ * Async interface wrapper around `requestIdleCallback`. Falls back to
+ * `setTimeout` on browsers that do not support `requestIdleCallback`.
+ */
+declare namespace idlePeriod {
+  /**
+   * Enqueues a function called at `requestIdleCallback` timing.
+   *
+   * @returns Handle used for canceling task
+   */
+  function run(fn: (p0: IdleDeadline) => void): number;
+
+  /**
+   * Cancels a previously enqueued `idlePeriod` callback.
+   */
+  function cancel(handle: number): void;
+}
+
+export { idlePeriod };
+
+/**
+ * Async interface for enqueuing callbacks that run at microtask timing.
+ *
+ * Note that microtask timing is achieved via a single `MutationObserver`,
+ * and thus callbacks enqueued with this API will all run in a single
+ * batch, and not interleaved with other microtasks such as promises.
+ * Promises are avoided as an implementation choice for the time being
+ * due to Safari bugs that cause Promises to lack microtask guarantees.
+ */
+declare namespace microTask {
+  /**
+   * Enqueues a function called at microtask timing.
+   *
+   * @returns Handle used for canceling task
+   */
+  function run(callback?: Function): number;
+
+  /**
+   * Cancels a previously enqueued `microTask` callback.
+   */
+  function cancel(handle: number): void;
+}
+
+export { microTask };

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 };
 
@@ -153,8 +153,12 @@ const idlePeriod = {
    * @return {void}
    */
   cancel(handle) {
-    window.cancelIdleCallback ? window.cancelIdleCallback(handle) : window.clearTimeout(handle);
-  }
+    if (window.cancelIdleCallback) {
+      window.cancelIdleCallback(handle);
+    } else {
+      window.clearTimeout(handle);
+    }
+  },
 };
 export { idlePeriod };
 
@@ -202,10 +206,10 @@ const microTask = {
     const idx = handle - microtaskLastHandle;
     if (idx >= 0) {
       if (!microtaskCallbacks[idx]) {
-        throw new Error('invalid async handle: ' + handle);
+        throw new Error(`invalid async handle: ${handle}`);
       }
       microtaskCallbacks[idx] = null;
     }
-  }
+  },
 };
 export { microTask };

package/src/browser-utils.js

@@ -16,7 +16,7 @@ export const isChrome = testUserAgent(/Chrome/) && testVendor(/Google Inc/);
 
 export const isFirefox = testUserAgent(/Firefox/);
 
-// iPadOS 13 lies and says it's a Mac, but we can distinguish by detecting touch support.
+// IPadOS 13 lies and says it's a Mac, but we can distinguish by detecting touch support.
 export const isIPad = testPlatform(/^iPad/) || (testPlatform(/^Mac/) && navigator.maxTouchPoints > 1);
 
 export const isIPhone = testPlatform(/^iPhone/);

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

@@ -27,7 +27,9 @@ export const ControllerMixin = dedupingMixin(
         super.connectedCallback();
 
         this.__controllers.forEach((c) => {
-          c.hostConnected && c.hostConnected();
+          if (c.hostConnected) {
+            c.hostConnected();
+          }
         });
       }
 
@@ -36,7 +38,9 @@ export const ControllerMixin = dedupingMixin(
         super.disconnectedCallback();
 
         this.__controllers.forEach((c) => {
-          c.hostDisconnected && c.hostDisconnected();
+          if (c.hostDisconnected) {
+            c.hostDisconnected();
+          }
         });
       }
 
@@ -63,5 +67,5 @@ export const ControllerMixin = dedupingMixin(
       removeController(controller) {
         this.__controllers.delete(controller);
       }
-    }
+    },
 );

package/src/debounce.d.ts

@@ -0,0 +1,101 @@
+/**
+ * @license
+ * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
+ * This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+ * The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+ * The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+ * 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';
+
+export declare class Debouncer {
+  constructor();
+
+  /**
+   * Creates a debouncer if no debouncer is passed as a parameter
+   * or it cancels an active debouncer otherwise. The following
+   * example shows how a debouncer can be called multiple times within a
+   * microtask and "debounced" such that the provided callback function is
+   * called once. Add this method to a custom element:
+   *
+   * ```js
+   * import {microTask} from '@vaadin/component-base/src/async.js';
+   * import {Debouncer} from '@vaadin/component-base/src/debounce.js';
+   * // ...
+   *
+   * _debounceWork() {
+   *   this._debounceJob = Debouncer.debounce(this._debounceJob,
+   *       microTask, () => this._doWork());
+   * }
+   * ```
+   *
+   * If the `_debounceWork` method is called multiple times within the same
+   * microtask, the `_doWork` function will be called only once at the next
+   * microtask checkpoint.
+   *
+   * Note: In testing it is often convenient to avoid asynchrony. To accomplish
+   * this with a debouncer, you can use `enqueueDebouncer` and
+   * `flush`. For example, extend the above example by adding
+   * `enqueueDebouncer(this._debounceJob)` at the end of the
+   * `_debounceWork` method. Then in a test, call `flush` to ensure
+   * the debouncer has completed.
+   *
+   * @param debouncer Debouncer object.
+   * @param asyncModule Object with Async interface
+   * @param callback Callback to run.
+   * @returns Returns a debouncer object.
+   */
+  static debounce(debouncer: Debouncer | null, asyncModule: AsyncInterface, callback: () => any): Debouncer;
+
+  /**
+   * Sets the scheduler; that is, a module with the Async interface,
+   * a callback and optional arguments to be passed to the run function
+   * from the async module.
+   *
+   * @param asyncModule Object with Async interface.
+   * @param callback Callback to run.
+   */
+  setConfig(asyncModule: AsyncInterface, callback: () => any): void;
+
+  /**
+   * Cancels an active debouncer and returns a reference to itself.
+   */
+  cancel(): void;
+
+  /**
+   * Cancels a debouncer's async callback.
+   */
+  _cancelAsync(): void;
+
+  /**
+   * Flushes an active debouncer and returns a reference to itself.
+   */
+  flush(): void;
+
+  /**
+   * Returns true if the debouncer is active.
+   *
+   * @returns True if active.
+   */
+  isActive(): boolean;
+}
+
+/**
+ * Adds a `Debouncer` to a list of globally flushable tasks.
+ */
+export declare function enqueueDebouncer(debouncer: Debouncer): void;
+
+/**
+ * Flushes any enqueued debouncers.
+ *
+ * @returns Returns whether any debouncers were flushed
+ */
+export declare function flushDebouncers(): boolean;
+
+/**
+ * Forces debouncers added via `enqueueDebouncer` to flush.
+ *
+ * @return {void}
+ */
+export declare function flush(): void;

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,16 @@ export const DirMixin = (superClass) =>
         dir: {
           type: String,
           value: '',
-          reflectToAttribute: true
-        }
+          reflectToAttribute: true,
+          converter: {
+            fromAttribute: (attr) => {
+              return !attr ? '' : attr;
+            },
+            toAttribute: (prop) => {
+              return prop === '' ? null : prop;
+            },
+          },
+        },
       };
     }
 
@@ -127,9 +135,11 @@ export const DirMixin = (superClass) =>
     /** @private */
     __subscribe(push = true) {
       if (push) {
-        directionSubscribers.indexOf(this) === -1 && directionSubscribers.push(this);
-      } else {
-        directionSubscribers.indexOf(this) > -1 && directionSubscribers.splice(directionSubscribers.indexOf(this), 1);
+        if (!directionSubscribers.includes(this)) {
+          directionSubscribers.push(this);
+        }
+      } else if (directionSubscribers.includes(this)) {
+        directionSubscribers.splice(directionSubscribers.indexOf(this), 1);
       }
     }
 

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/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.1.0-alpha3';
+      return '23.1.0-beta2';
     }
 
     /** @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 },
 );
 
 /**
@@ -68,7 +68,7 @@ export const FocusMixin = dedupingMixin(
       disconnectedCallback() {
         super.disconnectedCallback();
 
-        // in non-Chrome browsers, blur does not fire on the element when it is disconnected.
+        // In non-Chrome browsers, blur does not fire on the element when it is disconnected.
         // reproducible in `<vaadin-date-picker>` when closing on `Cancel` or `Today` click.
         if (this.hasAttribute('focused')) {
           this._setFocused(false);
@@ -84,7 +84,7 @@ export const FocusMixin = dedupingMixin(
       _setFocused(focused) {
         this.toggleAttribute('focused', focused);
 
-        // focus-ring is true when the element was focused from the keyboard.
+        // Focus-ring is true when the element was focused from the keyboard.
         // Focus Ring [A11ycasts]: https://youtu.be/ilj2P5-5CjI
         this.toggleAttribute('focus-ring', focused && this._keyboardActive);
       }
@@ -110,5 +110,5 @@ export const FocusMixin = dedupingMixin(
       _shouldRemoveFocus(_event) {
         return true;
       }
-    }
+    },
 );

package/src/gestures.d.ts

@@ -65,12 +65,12 @@ export { prevent };
 declare function prevent(evName: string): void;
 
 export interface GestureRecognizer {
-  reset: () => void;
-  mousedown?: (e: MouseEvent) => void;
-  mousemove?: (e: MouseEvent) => void;
-  mouseup?: (e: MouseEvent) => void;
-  touchstart?: (e: TouchEvent) => void;
-  touchmove?: (e: TouchEvent) => void;
-  touchend?: (e: TouchEvent) => void;
-  click?: (e: MouseEvent) => void;
+  reset(): void;
+  mousedown?(e: MouseEvent): void;
+  mousemove?(e: MouseEvent): void;
+  mouseup?(e: MouseEvent): void;
+  touchstart?(e: TouchEvent): void;
+  touchmove?(e: TouchEvent): void;
+  touchend?(e: TouchEvent): void;
+  click?(e: MouseEvent): void;
 }