@vaadin/component-base 22.0.0-beta1 → 22.0.1

package/README.md

@@ -1,9 +1,14 @@
 # @vaadin/component-base
 
-A set of mixins used by Vaadin components.
+A set of helpers and mixins used by Vaadin components.
+
+## Contributing
+
+Read the [contributing guide](https://vaadin.com/docs/latest/guide/contributing/overview) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
 
 ## License
 
 Apache License 2.0
 
-Vaadin collects development time usage statistics to improve this product. For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.
+Vaadin collects usage statistics at development time to improve this product.
+For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.

package/index.d.ts

@@ -1,4 +1,5 @@
 export { ActiveMixin } from './src/active-mixin.js';
+export { ControllerMixin } from './src/controller-mixin.js';
 export { DirMixin } from './src/dir-mixin.js';
 export { DisabledMixin } from './src/disabled-mixin.js';
 export { ElementMixin } from './src/element-mixin.js';

package/index.js

@@ -1,4 +1,5 @@
 export { ActiveMixin } from './src/active-mixin.js';
+export { ControllerMixin } from './src/controller-mixin.js';
 export { DirMixin } from './src/dir-mixin.js';
 export { DisabledMixin } from './src/disabled-mixin.js';
 export { ElementMixin } from './src/element-mixin.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/component-base",
-  "version": "22.0.0-beta1",
+  "version": "22.0.1",
   "publishConfig": {
     "access": "public"
   },
@@ -30,6 +30,7 @@
     "web-component"
   ],
   "dependencies": {
+    "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
     "@vaadin/vaadin-development-mode-detector": "^2.0.0",
     "@vaadin/vaadin-usage-statistics": "^2.1.0",
@@ -37,8 +38,8 @@
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.3.0",
+    "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^9.2.4"
   },
-  "gitHead": "4cf8a9d0504994200c610e44b3676114fef49c1e"
+  "gitHead": "2b0a2bff0369d6020f7cc33ad35506aa2d1f6f68"
 }

package/src/active-mixin.d.ts

@@ -3,8 +3,9 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { DisabledMixin } from './disabled-mixin.js';
-import { KeyboardMixin } from './keyboard-mixin.js';
+import { Constructor } from '@open-wc/dedupe-mixin';
+import { DisabledMixinClass } from './disabled-mixin.js';
+import { KeyboardMixinClass } from './keyboard-mixin.js';
 
 /**
  * A mixin to toggle the `active` attribute.
@@ -15,12 +16,26 @@ import { KeyboardMixin } from './keyboard-mixin.js';
  * The attribute is removed as soon as the element is deactivated
  * by the pointer or by releasing the activation key.
  */
-declare function ActiveMixin<T extends new (...args: any[]) => {}>(base: T): T & ActiveMixinConstructor;
+export declare function ActiveMixin<T extends Constructor<HTMLElement>>(
+  base: T
+): T & Constructor<ActiveMixinClass> & Constructor<DisabledMixinClass> & Constructor<KeyboardMixinClass>;
 
-interface ActiveMixinConstructor {
-  new (...args: any[]): ActiveMixin;
-}
+export declare class ActiveMixinClass {
+  /**
+   * An array of activation keys.
+   *
+   * See possible values here:
+   * https://developer.mozilla.org/ru/docs/Web/API/KeyboardEvent/key/Key_Values
+   */
+  protected readonly _activeKeys: string[];
 
-interface ActiveMixin extends DisabledMixin, KeyboardMixin {}
+  /**
+   * Override to define if the component needs to be activated.
+   */
+  protected _shouldSetFocus(event: KeyboardEvent | MouseEvent): boolean;
 
-export { ActiveMixinConstructor, ActiveMixin };
+  /**
+   * Toggles the `active` attribute on the element.
+   */
+  protected _setActive(active: boolean): void;
+}

package/src/browser-utils.js

@@ -0,0 +1,35 @@
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+const testUserAgent = (regexp) => regexp.test(navigator.userAgent);
+
+const testPlatform = (regexp) => regexp.test(navigator.platform);
+
+const testVendor = (regexp) => regexp.test(navigator.vendor);
+
+export const isAndroid = testUserAgent(/Android/);
+
+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.
+export const isIPad = testPlatform(/^iPad/) || (testPlatform(/^Mac/) && navigator.maxTouchPoints > 1);
+
+export const isIPhone = testPlatform(/^iPhone/);
+
+export const isIOS = isIPhone || isIPad;
+
+export const isSafari = testUserAgent(/^((?!chrome|android).)*safari/i);
+
+export const isTouch = (() => {
+  try {
+    document.createEvent('TouchEvent');
+    return true;
+  } catch (e) {
+    return false;
+  }
+})();

package/src/controller-mixin.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @license
+ * Copyright (c) 2021 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';
+
+/**
+ * A mixin for connecting controllers to the element.
+ */
+export declare function ControllerMixin<T extends Constructor<HTMLElement>>(
+  superclass: T
+): T & Constructor<ControllerMixinClass>;
+
+export declare class ControllerMixinClass
+  implements Pick<ReactiveControllerHost, 'addController' | 'removeController'>
+{
+  /**
+   * Registers a controller to participate in the element update cycle.
+   */
+  addController(controller: ReactiveController): void;
+
+  /**
+   * Removes a controller from the element.
+   */
+  removeController(controller: ReactiveController): void;
+}

package/src/controller-mixin.js

@@ -0,0 +1,67 @@
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';
+
+/**
+ * A mixin for connecting controllers to the element.
+ *
+ * @polymerMixin
+ */
+export const ControllerMixin = dedupingMixin(
+  (superClass) =>
+    class ControllerMixinClass extends superClass {
+      constructor() {
+        super();
+
+        /**
+         * @type {Set<import('lit').ReactiveController>}
+         */
+        this.__controllers = new Set();
+      }
+
+      /** @protected */
+      connectedCallback() {
+        super.connectedCallback();
+
+        this.__controllers.forEach((c) => {
+          c.hostConnected && c.hostConnected();
+        });
+      }
+
+      /** @protected */
+      disconnectedCallback() {
+        super.disconnectedCallback();
+
+        this.__controllers.forEach((c) => {
+          c.hostDisconnected && c.hostDisconnected();
+        });
+      }
+
+      /**
+       * Registers a controller to participate in the element update cycle.
+       *
+       * @param {import('lit').ReactiveController} controller
+       * @protected
+       */
+      addController(controller) {
+        this.__controllers.add(controller);
+        // Call hostConnected if a controller is added after the element is attached.
+        if (this.$ !== undefined && this.isConnected && controller.hostConnected) {
+          controller.hostConnected();
+        }
+      }
+
+      /**
+       * Removes a controller from the element.
+       *
+       * @param {import('lit').ReactiveController} controller
+       * @protected
+       */
+      removeController(controller) {
+        this.__controllers.delete(controller);
+      }
+    }
+);

package/src/dir-mixin.d.ts

@@ -3,22 +3,15 @@
  * Copyright (c) 2021 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';
 
 /**
  * A mixin to handle `dir` attribute based on the one set on the `<html>` element.
  */
-declare function DirMixin<T extends new (...args: any[]) => {}>(base: T): T & DirMixinConstructor;
+export declare function DirMixin<T extends Constructor<HTMLElement>>(base: T): T & Constructor<DirMixinClass>;
 
-interface DirMixinConstructor {
-  new (...args: any[]): DirMixin;
+export declare class DirMixinClass {
+  protected __getNormalizedScrollLeft(element: Element | null): number;
 
-  finalize(): void;
+  protected __setNormalizedScrollLeft(element: Element | null, scrollLeft: number): void;
 }
-
-interface DirMixin {
-  __getNormalizedScrollLeft(element: Element | null): number;
-
-  __setNormalizedScrollLeft(element: Element | null, scrollLeft: number): void;
-}
-
-export { DirMixin, DirMixinConstructor };

package/src/disabled-mixin.d.ts

@@ -3,21 +3,18 @@
  * Copyright (c) 2021 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';
 
 /**
  * A mixin to provide disabled property for field components.
  */
-declare function DisabledMixin<T extends new (...args: any[]) => {}>(base: T): T & DisabledMixinConstructor;
+export declare function DisabledMixin<T extends Constructor<HTMLElement>>(base: T): Constructor<DisabledMixinClass> & T;
 
-interface DisabledMixinConstructor {
-  new (...args: any[]): DisabledMixin;
-}
-
-interface DisabledMixin {
+export declare class DisabledMixinClass {
   /**
    * If true, the user cannot interact with this element.
    */
   disabled: boolean;
-}
 
-export { DisabledMixinConstructor, DisabledMixin };
+  protected _disabledChanged(disabled: boolean, oldDisabled: boolean): void;
+}

package/src/element-mixin.d.ts

@@ -3,20 +3,20 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { ReactiveControllerHost } from 'lit';
 import '../custom_typings/vaadin-usage-statistics.js';
 import '../custom_typings/vaadin.js';
-import { DirMixin, DirMixinConstructor } from './dir-mixin.js';
+import { Constructor } from '@open-wc/dedupe-mixin';
+import { DirMixinClass } from './dir-mixin.js';
 
-declare function ElementMixin<T extends new (...args: any[]) => {}>(
-  base: T
-): T & ElementMixinConstructor & DirMixinConstructor;
-
-interface ElementMixinConstructor {
-  new (...args: any[]): ElementMixin;
-  finalize(): void;
-}
+/**
+ * A mixin providing common logic for Vaadin components.
+ */
+export declare function ElementMixin<T extends Constructor<HTMLElement>>(
+  superclass: T
+): T & Constructor<DirMixinClass> & Constructor<ElementMixinClass>;
 
-interface ElementMixin extends Pick<ReactiveControllerHost, 'addController' | 'removeController'>, DirMixin {}
+export declare class ElementMixinClass {
+  static version: string;
 
-export { ElementMixin, ElementMixinConstructor };
+  protected static finalize(): void;
+}

package/src/element-mixin.js

@@ -32,7 +32,7 @@ const registered = new Set();
 export const ElementMixin = (superClass) =>
   class VaadinElementMixin extends DirMixin(superClass) {
     static get version() {
-      return '22.0.0-beta1';
+      return '22.0.1';
     }
 
     /** @protected */
@@ -58,50 +58,10 @@ export const ElementMixin = (superClass) =>
     constructor() {
       super();
 
-      this.__controllers = new Set();
-
       if (document.doctype === null) {
         console.warn(
           'Vaadin components require the "standards mode" declaration. Please add <!DOCTYPE html> to the HTML document.'
         );
       }
     }
-
-    /** @protected */
-    connectedCallback() {
-      super.connectedCallback();
-
-      this.__controllers.forEach((c) => {
-        c.hostConnected && c.hostConnected();
-      });
-    }
-
-    /** @protected */
-    disconnectedCallback() {
-      super.disconnectedCallback();
-
-      this.__controllers.forEach((c) => {
-        c.hostDisconnected && c.hostDisconnected();
-      });
-    }
-
-    /**
-     * Registers a controller to participate in the element update cycle.
-     * @protected
-     */
-    addController(controller) {
-      this.__controllers.add(controller);
-      // Call hostConnected if a controller is added after the element is attached.
-      if (this.$ !== undefined && this.isConnected && controller.hostConnected) {
-        controller.hostConnected();
-      }
-    }
-
-    /**
-     * Removes a controller from the element.
-     * @protected
-     */
-    removeController(controller) {
-      this.__controllers.delete(controller);
-    }
   };

package/src/focus-mixin.d.ts

@@ -3,31 +3,28 @@
  * Copyright (c) 2021 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';
 
 /**
  * A mixin to handle `focused` and `focus-ring` attributes based on focus.
  */
-declare function FocusMixin<T extends new (...args: any[]) => {}>(base: T): T & FocusMixinConstructor;
+export declare function FocusMixin<T extends Constructor<HTMLElement>>(base: T): T & Constructor<FocusMixinClass>;
 
-interface FocusMixinConstructor {
-  new (...args: any[]): FocusMixin;
-}
+export declare class FocusMixinClass {
+  protected readonly _keyboardActive: boolean;
 
-interface FocusMixin {
   /**
    * Override to change how focused and focus-ring attributes are set.
    */
-  _setFocused(focused: boolean): void;
+  protected _setFocused(focused: boolean): void;
 
   /**
    * Override to define if the field receives focus based on the event.
    */
-  _shouldSetFocus(event: FocusEvent): boolean;
+  protected _shouldSetFocus(event: FocusEvent): boolean;
 
   /**
    * Override to define if the field loses focus based on the event.
    */
-  _shouldRemoveFocus(event: FocusEvent): boolean;
+  protected _shouldRemoveFocus(event: FocusEvent): boolean;
 }
-
-export { FocusMixinConstructor, FocusMixin };

package/src/focus-mixin.js

@@ -35,6 +35,14 @@ window.addEventListener(
 export const FocusMixin = dedupingMixin(
   (superclass) =>
     class FocusMixinClass extends superclass {
+      /**
+       * @protected
+       * @return {boolean}
+       */
+      get _keyboardActive() {
+        return keyboardActive;
+      }
+
       /** @protected */
       ready() {
         this.addEventListener('focusin', (e) => {
@@ -78,13 +86,13 @@ export const FocusMixin = dedupingMixin(
 
         // 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 && keyboardActive);
+        this.toggleAttribute('focus-ring', focused && this._keyboardActive);
       }
 
       /**
        * Override to define if the field receives focus based on the event.
        *
-       * @param {FocusEvent} event
+       * @param {FocusEvent} _event
        * @return {boolean}
        * @protected
        */
@@ -95,7 +103,7 @@ export const FocusMixin = dedupingMixin(
       /**
        * Override to define if the field loses focus based on the event.
        *
-       * @param {FocusEvent} event
+       * @param {FocusEvent} _event
        * @return {boolean}
        * @protected
        */

package/src/iron-list-core.js

@@ -7,8 +7,8 @@
  * 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 { Debouncer, enqueueDebouncer, flush } from '@vaadin/component-base/src/debounce.js';
-import { animationFrame, idlePeriod, microTask } from '@vaadin/component-base/src/async.js';
+import { animationFrame, idlePeriod, microTask } from './async.js';
+import { Debouncer, enqueueDebouncer, flush } from './debounce.js';
 
 const IOS = navigator.userAgent.match(/iP(?:hone|ad;(?: U;)? CPU) OS (\d+)/);
 const IOS_TOUCH_SCROLLING = IOS && IOS[1] >= 8;

package/src/keyboard-mixin.d.ts

@@ -3,30 +3,25 @@
  * Copyright (c) 2021 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';
 
 /**
  * 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).
  */
-declare function KeyboardMixin<T extends new (...args: any[]) => {}>(base: T): T & KeyboardMixinConstructor;
+export declare function KeyboardMixin<T extends Constructor<HTMLElement>>(base: T): T & Constructor<KeyboardMixinClass>;
 
-interface KeyboardMixinConstructor {
-  new (...args: any[]): KeyboardMixin;
-}
-
-interface KeyboardMixin {
+export declare class KeyboardMixinClass {
   /**
    * A handler for the `keydown` event. By default, it does nothing.
    * Override the method to implement your own behavior.
    */
-  _onKeyDown(event: KeyboardEvent): void;
+  protected _onKeyDown(event: KeyboardEvent): void;
 
   /**
    * A handler for the `keyup` event. By default, it does nothing.
    * Override the method to implement your own behavior.
    */
-  _onKeyUp(event: KeyboardEvent): void;
+  protected _onKeyUp(event: KeyboardEvent): void;
 }
-
-export { KeyboardMixinConstructor, KeyboardMixin };

package/src/slot-mixin.d.ts

@@ -3,21 +3,16 @@
  * Copyright (c) 2021 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';
 
 /**
  * A mixin to provide content for named slots defined by component.
  */
-declare function SlotMixin<T extends new (...args: any[]) => {}>(base: T): T & SlotMixinConstructor;
+export declare function SlotMixin<T extends Constructor<HTMLElement>>(base: T): T & Constructor<SlotMixinClass>;
 
-interface SlotMixinConstructor {
-  new (...args: any[]): SlotMixin;
-}
-
-interface SlotMixin {
+export declare class SlotMixinClass {
   /**
    * List of named slots to initialize.
    */
-  readonly slots: Record<string, () => HTMLElement>;
+  protected readonly slots: Record<string, () => HTMLElement>;
 }
-
-export { SlotMixinConstructor, SlotMixin };

package/src/tabindex-mixin.d.ts

@@ -3,27 +3,31 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { DisabledMixin } from './disabled-mixin.js';
+import { Constructor } from '@open-wc/dedupe-mixin';
+import { DisabledMixinClass } from './disabled-mixin.js';
 
 /**
- * A mixin to provide the `tabindex` attribute.
+ * A mixin to toggle the `tabindex` attribute.
  *
  * By default, the attribute is set to 0 that makes the element focusable.
  *
  * The attribute is set to -1 whenever the user disables the element
  * and restored with the last known value once the element is enabled.
  */
-declare function TabindexMixin<T extends new (...args: any[]) => {}>(base: T): T & TabindexMixinConstructor;
+export declare function TabindexMixin<T extends Constructor<HTMLElement>>(
+  base: T
+): T & Constructor<DisabledMixinClass> & Constructor<TabindexMixinClass>;
 
-interface TabindexMixinConstructor {
-  new (...args: any[]): TabindexMixin;
-}
-
-interface TabindexMixin extends DisabledMixin {
+export declare class TabindexMixinClass {
   /**
    * Indicates whether the element can be focused and where it participates in sequential keyboard navigation.
    */
   tabindex: number | undefined | null;
-}
 
-export { TabindexMixinConstructor, TabindexMixin };
+  /**
+   * 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;
+}

package/src/tabindex-mixin.js

@@ -6,7 +6,7 @@
 import { DisabledMixin } from './disabled-mixin.js';
 
 /**
- * A mixin to provide the `tabindex` attribute.
+ * A mixin to toggle the `tabindex` attribute.
  *
  * By default, the attribute is set to 0 that makes the element focusable.
  *

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

@@ -1,5 +1,11 @@
-import { timeOut, animationFrame } from '@vaadin/component-base/src/async.js';
-import { Debouncer, flush } from '@vaadin/component-base/src/debounce.js';
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { animationFrame, timeOut } from './async.js';
+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.
@@ -20,8 +26,6 @@ export class IronListAdapter {
     // Iron-list uses this value to determine how many pages of elements to render
     this._maxPages = 1.3;
 
-    this.__safari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
-
     this.timeouts = {
       SCROLL_REORDER: 500,
       IGNORE_WHEEL: 500
@@ -268,6 +272,8 @@ export class IronListAdapter {
       if (!el.hidden) {
         el.__virtualIndex = vidx + (this._vidxOffset || 0);
         this.__updateElement(el, el.__virtualIndex);
+      } else {
+        delete el.__lastUpdatedIndex;
       }
     }, itemSet);
   }
@@ -447,7 +453,7 @@ export class IronListAdapter {
     // Due to a rendering bug, reordering the rows can make parts of the scroll target disappear
     // on Safari when using sticky positioning in case the scroll target is inside a flexbox.
     // This issue manifests with grid (the header can disappear if grid is used inside a flexbox)
-    if (this.__safari) {
+    if (isSafari) {
       const { transform } = this.scrollTarget.style;
       this.scrollTarget.style.transform = 'translateZ(0)';
       setTimeout(() => (this.scrollTarget.style.transform = transform));