@vaadin/component-base - npm Package Compare versions

Comparing version 22.0.0-beta1 to 22.0.0-beta2

package.json

 {
   "name": "@vaadin/component-base",
-  "version": "22.0.0-beta1",
+  "version": "22.0.0-beta2",
   "publishConfig": {
@@ -33,2 +33,3 @@ "access": "public"
   "dependencies": {
+    "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
@@ -44,3 +45,3 @@ "@vaadin/vaadin-development-mode-detector": "^2.0.0",
   },
-  "gitHead": "4cf8a9d0504994200c610e44b3676114fef49c1e"
+  "gitHead": "f13833683e6667f6ca6678452db14aa6b7eac4a4"
 }

README.md

 # @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
@@ -9,2 +13,3 @@
 
-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.

src/active-mixin.d.ts

@@ -6,4 +6,5 @@ /**
  */
-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';
 
@@ -19,10 +20,24 @@ /**
  */
-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;
+}

src/dir-mixin.d.ts

@@ -6,2 +6,3 @@ /**
  */
+import { Constructor } from '@open-wc/dedupe-mixin';
 
@@ -11,16 +12,8 @@ /**
  */
-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 };

src/disabled-mixin.d.ts

@@ -6,2 +6,3 @@ /**
  */
+import { Constructor } from '@open-wc/dedupe-mixin';
 
@@ -11,9 +12,5 @@ /**
  */
-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 {
   /**
@@ -23,4 +20,4 @@ * If true, the user cannot interact with this element.
   disabled: boolean;
+
+  protected _disabledChanged(disabled: boolean, oldDisabled: boolean): void;
 }
-
-export { DisabledMixinConstructor, DisabledMixin };

src/element-mixin.d.ts

@@ -6,18 +6,22 @@ /**
  */
-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 { ReactiveControllerHost } from 'lit';
+import { DirMixinClass } from './dir-mixin.js';
 
-declare function ElementMixin<T extends new (...args: any[]) => {}>(
-  base: T
-): T & ElementMixinConstructor & DirMixinConstructor;
+/**
+ * A mixin to provide common logic for Vaadin components.
+ */
+export declare function ElementMixin<T extends Constructor<HTMLElement>>(
+  superclass: T
+): T &
+  Constructor<DirMixinClass> &
+  Constructor<ElementMixinClass> &
+  Pick<ReactiveControllerHost, 'addController' | 'removeController'>;
 
-interface ElementMixinConstructor {
-  new (...args: any[]): ElementMixin;
-  finalize(): void;
+export declare class ElementMixinClass {
+  static version: string;
+
+  protected static finalize(): void;
 }
-
-interface ElementMixin extends Pick<ReactiveControllerHost, 'addController' | 'removeController'>, DirMixin {}
-
-export { ElementMixin, ElementMixinConstructor };

src/element-mixin.js

@@ -35,3 +35,3 @@ /**
     static get version() {
-      return '22.0.0-beta1';
+      return '22.0.0-beta2';
     }
@@ -38,0 +38,0 @@

src/focus-mixin.d.ts

@@ -6,2 +6,3 @@ /**
  */
+import { Constructor } from '@open-wc/dedupe-mixin';
 
@@ -11,13 +12,11 @@ /**
  */
-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;
 
@@ -27,3 +26,3 @@ /**
    */
-  _shouldSetFocus(event: FocusEvent): boolean;
+  protected _shouldSetFocus(event: FocusEvent): boolean;
 
@@ -33,5 +32,3 @@ /**
    */
-  _shouldRemoveFocus(event: FocusEvent): boolean;
+  protected _shouldRemoveFocus(event: FocusEvent): boolean;
 }
-
-export { FocusMixinConstructor, FocusMixin };

src/focus-mixin.js

@@ -38,2 +38,10 @@ /**
     class FocusMixinClass extends superclass {
+      /**
+       * @protected
+       * @return {boolean}
+       */
+      get _keyboardActive() {
+        return keyboardActive;
+      }
+
       /** @protected */
@@ -82,3 +90,3 @@ ready() {
         // Focus Ring [A11ycasts]: https://youtu.be/ilj2P5-5CjI
-        this.toggleAttribute('focus-ring', focused && keyboardActive);
+        this.toggleAttribute('focus-ring', focused && this._keyboardActive);
       }
@@ -89,3 +97,3 @@
        *
-       * @param {FocusEvent} event
+       * @param {FocusEvent} _event
        * @return {boolean}
@@ -101,3 +109,3 @@ * @protected
        *
-       * @param {FocusEvent} event
+       * @param {FocusEvent} _event
        * @return {boolean}
@@ -104,0 +112,0 @@ * @protected

src/iron-list-core.js

@@ -10,4 +10,4 @@ /**
  */
+import { animationFrame, idlePeriod, microTask } from '@vaadin/component-base/src/async.js';
 import { Debouncer, enqueueDebouncer, flush } from '@vaadin/component-base/src/debounce.js';
-import { animationFrame, idlePeriod, microTask } from '@vaadin/component-base/src/async.js';
 
@@ -14,0 +14,0 @@ const IOS = navigator.userAgent.match(/iP(?:hone|ad;(?: U;)? CPU) OS (\d+)/);

src/keyboard-mixin.d.ts

@@ -6,2 +6,3 @@ /**
  */
+import { Constructor } from '@open-wc/dedupe-mixin';
 
@@ -13,9 +14,5 @@ /**
  */
-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 {
   /**
@@ -25,3 +22,3 @@ * A handler for the `keydown` event. By default, it does nothing.
    */
-  _onKeyDown(event: KeyboardEvent): void;
+  protected _onKeyDown(event: KeyboardEvent): void;
 
@@ -32,5 +29,3 @@ /**
    */
-  _onKeyUp(event: KeyboardEvent): void;
+  protected _onKeyUp(event: KeyboardEvent): void;
 }
-
-export { KeyboardMixinConstructor, KeyboardMixin };

src/slot-mixin.d.ts

@@ -6,2 +6,3 @@ /**
  */
+import { Constructor } from '@open-wc/dedupe-mixin';
 
@@ -11,15 +12,9 @@ /**
  */
-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 };

src/tabindex-mixin.d.ts

@@ -6,6 +6,7 @@ /**
  */
-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.
  *
@@ -17,9 +18,7 @@ * By default, the attribute is set to 0 that makes the element focusable.
  */
-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 {
   /**
@@ -29,4 +28,9 @@ * Indicates whether the element can be focused and where it participates in sequential keyboard navigation.
   tabindex: number | undefined | null;
+
+  /**
+   * 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;
 }
-
-export { TabindexMixinConstructor, TabindexMixin };

src/tabindex-mixin.js

@@ -9,3 +9,3 @@ /**
 /**
- * A mixin to provide the `tabindex` attribute.
+ * A mixin to toggle the `tabindex` attribute.
  *
@@ -12,0 +12,0 @@ * By default, the attribute is set to 0 that makes the element focusable.

src/virtualizer-iron-list-adapter.js

@@ -1,2 +0,2 @@
-import { timeOut, animationFrame } from '@vaadin/component-base/src/async.js';
+import { animationFrame, timeOut } from '@vaadin/component-base/src/async.js';
 import { Debouncer, flush } from '@vaadin/component-base/src/debounce.js';
@@ -3,0 +3,0 @@ import { ironList } from './iron-list-core.js';

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

105707

increased by1.19%

Lines of code

2735

increased by0.66%

Number of lines in readme file

15

increased by50%

Worsened metrics

Dependency count

5

increased by25%

Dependency changes

• + Added@open-wc/dedupe-mixin@^1.3.0

• + Added@open-wc/dedupe-mixin@1.4.0(transitive)