refactor: align type definitions for all mixins (#2971)

vaadin · Nov 3, 2021 · 8f90b60 · 8f90b60
1 parent 025f601
commit 8f90b60
Show file tree

Hide file tree

Showing 55 changed files with 219 additions and 330 deletions.
diff --git a/packages/checkbox/test/typings/checkbox.types.ts b/packages/checkbox/test/typings/checkbox.types.ts
@@ -6,7 +6,7 @@ import { KeyboardMixinClass } from '@vaadin/component-base/src/keyboard-mixin.js
 import { CheckedMixinClass } from '@vaadin/field-base/src/checked-mixin.js';
 import { DelegateFocusMixinClass } from '@vaadin/field-base/src/delegate-focus-mixin.js';
 import { LabelMixinClass } from '@vaadin/field-base/src/label-mixin.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { ThemableMixinClass } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import '../../vaadin-checkbox.js';
 import { CheckboxCheckedChangedEvent, CheckboxIndeterminateChangedEvent } from '../../vaadin-checkbox.js';
 
@@ -32,7 +32,7 @@ assertType<KeyboardMixinClass>(checkbox);
 assertType<CheckedMixinClass>(checkbox);
 assertType<DelegateFocusMixinClass>(checkbox);
 assertType<LabelMixinClass>(checkbox);
-assertType<ThemableMixin>(checkbox);
+assertType<ThemableMixinClass>(checkbox);
 
 // Events
 checkbox.addEventListener('checked-changed', (event) => {

diff --git a/packages/combo-box/src/vaadin-combo-box-light.d.ts b/packages/combo-box/src/vaadin-combo-box-light.d.ts
@@ -3,7 +3,7 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { ThemableMixinClass } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { ComboBoxDataProviderMixinClass } from './vaadin-combo-box-data-provider-mixin.js';
 import { ComboBoxMixinClass } from './vaadin-combo-box-mixin.js';
 import { ComboBoxDefaultItem } from './vaadin-combo-box-mixin.js';
@@ -127,7 +127,7 @@ declare class ComboBoxLight<TItem = ComboBoxDefaultItem> extends HTMLElement {
 interface ComboBoxLight<TItem = ComboBoxDefaultItem>
   extends ComboBoxDataProviderMixinClass<TItem>,
     ComboBoxMixinClass<TItem>,
-    ThemableMixin {}
+    ThemableMixinClass {}
 
 declare global {
   interface HTMLElementTagNameMap {

diff --git a/packages/combo-box/src/vaadin-combo-box.d.ts b/packages/combo-box/src/vaadin-combo-box.d.ts
@@ -6,7 +6,7 @@
 import { ElementMixinClass } from '@vaadin/component-base/src/element-mixin.js';
 import { InputControlMixinClass } from '@vaadin/field-base/src/input-control-mixin.js';
 import { PatternMixinClass } from '@vaadin/field-base/src/pattern-mixin.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { ThemableMixinClass } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { ComboBoxDataProviderMixinClass } from './vaadin-combo-box-data-provider-mixin.js';
 import { ComboBoxMixinClass } from './vaadin-combo-box-mixin.js';
 import { ComboBoxDefaultItem } from './vaadin-combo-box-mixin.js';
@@ -224,7 +224,7 @@ interface ComboBox<TItem = ComboBoxDefaultItem>
     ComboBoxMixinClass<TItem>,
     PatternMixinClass,
     InputControlMixinClass,
-    ThemableMixin,
+    ThemableMixinClass,
     ElementMixinClass {}
 
 declare global {

diff --git a/packages/combo-box/test/typings/combo-box.types.ts b/packages/combo-box/test/typings/combo-box.types.ts
@@ -1,5 +1,5 @@
 import { ElementMixinClass } from '@vaadin/component-base/src/element-mixin.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin';
+import { ThemableMixinClass } from '@vaadin/vaadin-themable-mixin';
 import { ComboBoxDataProviderMixinClass } from '../../src/vaadin-combo-box-data-provider-mixin';
 import { ComboBoxMixinClass } from '../../src/vaadin-combo-box-mixin';
 import {
@@ -35,7 +35,7 @@ assertType<ComboBox>(narrowedComboBox);
 assertType<ElementMixinClass>(narrowedComboBox);
 assertType<ComboBoxDataProviderMixinClass<TestComboBoxItem>>(narrowedComboBox);
 assertType<ComboBoxMixinClass<TestComboBoxItem>>(narrowedComboBox);
-assertType<ThemableMixin>(narrowedComboBox);
+assertType<ThemableMixinClass>(narrowedComboBox);
 
 narrowedComboBox.addEventListener('custom-value-set', (event) => {
   assertType<ComboBoxCustomValueSetEvent>(event);
@@ -74,7 +74,7 @@ assertType<ComboBoxLight>(genericComboBoxLightElement);
 const narrowedComboBoxLightElement = genericComboBoxLightElement as ComboBoxLight<TestComboBoxItem>;
 assertType<ComboBoxDataProviderMixinClass<TestComboBoxItem>>(narrowedComboBoxLightElement);
 assertType<ComboBoxMixinClass<TestComboBoxItem>>(narrowedComboBoxLightElement);
-assertType<ThemableMixin>(narrowedComboBoxLightElement);
+assertType<ThemableMixinClass>(narrowedComboBoxLightElement);
 
 narrowedComboBoxLightElement.addEventListener('custom-value-set', (event) => {
   assertType<ComboBoxLightCustomValueSetEvent>(event);

diff --git a/packages/component-base/src/active-mixin.d.ts b/packages/component-base/src/active-mixin.d.ts
@@ -16,9 +16,9 @@ import { KeyboardMixinClass } from './keyboard-mixin.js';
  * The attribute is removed as soon as the element is deactivated
  * by the pointer or by releasing the activation key.
  */
-export declare const ActiveMixin: <T extends Constructor<HTMLElement>>(
+export declare function ActiveMixin<T extends Constructor<HTMLElement>>(
   base: T
-) => T & Constructor<ActiveMixinClass> & Constructor<DisabledMixinClass> & Constructor<KeyboardMixinClass>;
+): T & Constructor<ActiveMixinClass> & Constructor<DisabledMixinClass> & Constructor<KeyboardMixinClass>;
 
 export declare class ActiveMixinClass {
   /**

diff --git a/packages/component-base/src/dir-mixin.d.ts b/packages/component-base/src/dir-mixin.d.ts
@@ -8,7 +8,7 @@ import { Constructor } from '@open-wc/dedupe-mixin';
 /**
  * A mixin to handle `dir` attribute based on the one set on the `<html>` element.
  */
-export declare const DirMixin: <T extends Constructor<HTMLElement>>(base: T) => T & Constructor<DirMixinClass>;
+export declare function DirMixin<T extends Constructor<HTMLElement>>(base: T): T & Constructor<DirMixinClass>;
 
 export declare class DirMixinClass {
   protected __getNormalizedScrollLeft(element: Element | null): number;

diff --git a/packages/component-base/src/disabled-mixin.d.ts b/packages/component-base/src/disabled-mixin.d.ts
@@ -8,9 +8,7 @@ import { Constructor } from '@open-wc/dedupe-mixin';
 /**
  * A mixin to provide disabled property for field components.
  */
-export declare const DisabledMixin: <T extends Constructor<HTMLElement>>(
-  base: T
-) => Constructor<DisabledMixinClass> & T;
+export declare function DisabledMixin<T extends Constructor<HTMLElement>>(base: T): Constructor<DisabledMixinClass> & T;
 
 export declare class DisabledMixinClass {
   /**

diff --git a/packages/component-base/src/focus-mixin.d.ts b/packages/component-base/src/focus-mixin.d.ts
@@ -8,7 +8,7 @@ import { Constructor } from '@open-wc/dedupe-mixin';
 /**
  * A mixin to handle `focused` and `focus-ring` attributes based on focus.
  */
-export declare const FocusMixin: <T extends Constructor<HTMLElement>>(base: T) => T & Constructor<FocusMixinClass>;
+export declare function FocusMixin<T extends Constructor<HTMLElement>>(base: T): T & Constructor<FocusMixinClass>;
 
 export declare class FocusMixinClass {
   protected readonly _keyboardActive: boolean;

diff --git a/packages/component-base/src/keyboard-mixin.d.ts b/packages/component-base/src/keyboard-mixin.d.ts
@@ -10,9 +10,7 @@ import { Constructor } from '@open-wc/dedupe-mixin';
  * 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 const KeyboardMixin: <T extends Constructor<HTMLElement>>(
-  base: T
-) => T & Constructor<KeyboardMixinClass>;
+export declare function KeyboardMixin<T extends Constructor<HTMLElement>>(base: T): T & Constructor<KeyboardMixinClass>;
 
 export declare class KeyboardMixinClass {
   /**

diff --git a/packages/component-base/src/slot-mixin.d.ts b/packages/component-base/src/slot-mixin.d.ts
@@ -8,7 +8,7 @@ import { Constructor } from '@open-wc/dedupe-mixin';
 /**
  * A mixin to provide content for named slots defined by component.
  */
-export declare const SlotMixin: <T extends Constructor<HTMLElement>>(base: T) => T & Constructor<SlotMixinClass>;
+export declare function SlotMixin<T extends Constructor<HTMLElement>>(base: T): T & Constructor<SlotMixinClass>;
 
 export declare class SlotMixinClass {
   /**

diff --git a/packages/component-base/src/tabindex-mixin.d.ts b/packages/component-base/src/tabindex-mixin.d.ts
@@ -14,9 +14,9 @@ import { DisabledMixinClass } from './disabled-mixin.js';
  * The attribute is set to -1 whenever the user disables the element
  * and restored with the last known value once the element is enabled.
  */
-export declare const TabindexMixin: <T extends Constructor<HTMLElement>>(
+export declare function TabindexMixin<T extends Constructor<HTMLElement>>(
   base: T
-) => T & Constructor<DisabledMixinClass> & Constructor<TabindexMixinClass>;
+): T & Constructor<DisabledMixinClass> & Constructor<TabindexMixinClass>;
 
 export declare class TabindexMixinClass {
   /**

diff --git a/packages/context-menu/package.json b/packages/context-menu/package.json
@@ -32,6 +32,7 @@
     "polymer"
   ],
   "dependencies": {
+    "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/iron-media-query": "^3.0.0",
     "@polymer/polymer": "^3.0.0",
     "@vaadin/component-base": "22.0.0-beta1",

diff --git a/packages/context-menu/src/vaadin-contextmenu-items-mixin.d.ts b/packages/context-menu/src/vaadin-contextmenu-items-mixin.d.ts
@@ -3,6 +3,7 @@
  * 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 { Item } from '@vaadin/item/src/vaadin-item.js';
 import { ListBox } from '@vaadin/list-box/src/vaadin-list-box.js';
 
@@ -36,14 +37,10 @@ declare global {
  */
 declare class ContextMenuListBox extends ListBox {}
 
-declare function ItemsMixin<T extends new (...args: any[]) => {}>(base: T): T & ItemsMixinConstructor;
+export declare function ItemsMixin<T extends Constructor<HTMLElement>>(base: T): T & Constructor<ItemsMixinClass>;
 
-interface ItemsMixinConstructor {
-  new (...args: any[]): ItemsMixin;
-}
-
-interface ItemsMixin {
-  readonly __isRTL: boolean;
+export declare class ItemsMixinClass {
+  protected readonly __isRTL: boolean;
 
   /**
    * Defines a (hierarchical) menu structure for the component.
@@ -75,5 +72,3 @@ interface ItemsMixin {
    */
   items: ContextMenuItem[] | undefined;
 }
-
-export { ItemsMixin, ItemsMixinConstructor };
diff --git a/packages/crud/package.json b/packages/crud/package.json
@@ -32,6 +32,7 @@
     "polymer"
   ],
   "dependencies": {
+    "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/iron-media-query": "^3.0.0",
     "@polymer/polymer": "^3.0.0",
     "@vaadin/button": "22.0.0-beta1",

diff --git a/packages/crud/src/vaadin-crud-include-mixin.d.ts b/packages/crud/src/vaadin-crud-include-mixin.d.ts
@@ -3,14 +3,11 @@
  * 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';
 
-declare function IncludedMixin<T extends new (...args: any[]) => {}>(base: T): T & IncludedMixinConstructor;
+export declare function IncludedMixin<T extends Constructor<HTMLElement>>(base: T): T & Constructor<IncludedMixinClass>;
 
-interface IncludedMixinConstructor {
-  new (...args: any[]): IncludedMixin;
-}
-
-interface IncludedMixin {
+export declare class IncludedMixinClass {
   /**
    * A list of item fields that should not be mapped to form fields.
    *
@@ -27,5 +24,3 @@ interface IncludedMixin {
    */
   include: string | string[] | undefined;
 }
-
-export { IncludedMixin, IncludedMixinConstructor };
diff --git a/packages/date-picker/test/typings/date-picker.types.ts b/packages/date-picker/test/typings/date-picker.types.ts
@@ -8,7 +8,7 @@ import { InputConstraintsMixinClass } from '@vaadin/field-base/src/input-constra
 import { InputControlMixinClass } from '@vaadin/field-base/src/input-control-mixin.js';
 import { InputMixinClass } from '@vaadin/field-base/src/input-mixin.js';
 import { ValidateMixinClass } from '@vaadin/field-base/src/validate-mixin.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { ThemableMixinClass } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import '../../vaadin-date-picker.js';
 import {
   DatePicker,
@@ -29,7 +29,6 @@ const assertType = <TExpected>(actual: TExpected) => actual;
 const datePicker = document.createElement('vaadin-date-picker');
 
 assertType<DatePicker>(datePicker);
-assertType<ThemableMixin>(datePicker);
 
 datePicker.addEventListener('opened-changed', (event) => {
   assertType<DatePickerOpenedChangedEvent>(event);
@@ -81,14 +80,13 @@ assertType<InputConstraintsMixinClass>(datePicker);
 assertType<InputControlMixinClass>(datePicker);
 assertType<InputMixinClass>(datePicker);
 assertType<ValidateMixinClass>(datePicker);
-assertType<ThemableMixin>(datePicker);
+assertType<ThemableMixinClass>(datePicker);
 assertType<DatePickerMixinClass>(datePicker);
 
 /* DatePickerLight */
 const datePickerLight = document.createElement('vaadin-date-picker-light');
 
 assertType<DatePickerLight>(datePickerLight);
-assertType<ThemableMixin>(datePickerLight);
 
 datePickerLight.addEventListener('opened-changed', (event) => {
   assertType<DatePickerLightOpenedChangedEvent>(event);
@@ -126,5 +124,5 @@ assertType<DisabledMixinClass>(datePickerLight);
 assertType<KeyboardMixinClass>(datePickerLight);
 assertType<DelegateFocusMixinClass>(datePickerLight);
 assertType<InputMixinClass>(datePickerLight);
-assertType<ThemableMixin>(datePickerLight);
+assertType<ThemableMixinClass>(datePickerLight);
 assertType<DatePickerMixinClass>(datePickerLight);
diff --git a/packages/dialog/package.json b/packages/dialog/package.json
@@ -32,6 +32,7 @@
     "polymer"
   ],
   "dependencies": {
+    "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/iron-resizable-behavior": "^3.0.0",
     "@polymer/polymer": "^3.0.0",
     "@vaadin/component-base": "22.0.0-beta1",

diff --git a/packages/dialog/src/vaadin-dialog-draggable-mixin.d.ts b/packages/dialog/src/vaadin-dialog-draggable-mixin.d.ts
@@ -3,16 +3,13 @@
  * 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';
 
-declare function DialogDraggableMixin<T extends new (...args: any[]) => {}>(
+export declare function DialogDraggableMixin<T extends Constructor<HTMLElement>>(
   base: T
-): T & DialogDraggableMixinConstructor;
+): T & Constructor<DialogDraggableMixinClass>;
 
-interface DialogDraggableMixinConstructor {
-  new (...args: any[]): DialogDraggableMixin;
-}
-
-interface DialogDraggableMixin {
+export declare class DialogDraggableMixinClass {
   /**
    * Set to true to enable repositioning the dialog by clicking and dragging.
    *
@@ -25,5 +22,3 @@ interface DialogDraggableMixin {
    */
   draggable: boolean;
 }
-
-export { DialogDraggableMixin, DialogDraggableMixinConstructor };
diff --git a/packages/dialog/src/vaadin-dialog-resizable-mixin.d.ts b/packages/dialog/src/vaadin-dialog-resizable-mixin.d.ts
@@ -3,20 +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';
 
-declare function DialogResizableMixin<T extends new (...args: any[]) => {}>(
+export declare function DialogResizableMixin<T extends Constructor<HTMLElement>>(
   base: T
-): T & DialogResizableMixinConstructor;
+): T & Constructor<DialogResizableMixinClass>;
 
-interface DialogResizableMixinConstructor {
-  new (...args: any[]): DialogResizableMixin;
-}
-
-interface DialogResizableMixin {
+export declare class DialogResizableMixinClass {
   /**
    * Set to true to enable resizing the dialog by dragging the corners and edges.
    */
   resizable: boolean;
 }
-
-export { DialogResizableMixin, DialogResizableMixinConstructor };
diff --git a/packages/grid-pro/package.json b/packages/grid-pro/package.json
@@ -32,6 +32,7 @@
     "polymer"
   ],
   "dependencies": {
+    "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
     "@vaadin/checkbox": "22.0.0-beta1",
     "@vaadin/component-base": "22.0.0-beta1",

diff --git a/packages/grid-pro/src/vaadin-grid-pro-inline-editing-mixin.d.ts b/packages/grid-pro/src/vaadin-grid-pro-inline-editing-mixin.d.ts
@@ -4,14 +4,13 @@
  * This program is available under Commercial Vaadin Developer License 4.0 (CVDLv4).
  * See <a href="https://vaadin.com/license/cvdl-4.0">the website</a> for the complete license.
  */
+import { Constructor } from '@open-wc/dedupe-mixin';
 
-declare function InlineEditingMixin<T extends new (...args: any[]) => {}>(base: T): T & InlineEditingMixinConstructor;
+export declare function InlineEditingMixin<T extends Constructor<HTMLElement>>(
+  base: T
+): T & Constructor<InlineEditingMixinClass>;
 
-interface InlineEditingMixinConstructor {
-  new (...args: any[]): InlineEditingMixin;
-}
-
-interface InlineEditingMixin {
+export declare class InlineEditingMixinClass {
   /**
    * When true, pressing Enter while in cell edit mode
    * will move focus to the editable cell in the next row
@@ -37,11 +36,7 @@ interface InlineEditingMixin {
    */
   editOnClick: boolean | null | undefined;
 
-  _checkImports(): void;
+  protected _stopEdit(shouldCancel?: boolean, shouldRestoreFocus?: boolean): void;
 
-  _stopEdit(shouldCancel?: boolean, shouldRestoreFocus?: boolean): void;
-
-  _switchEditCell(e: KeyboardEvent): void;
+  protected _switchEditCell(e: KeyboardEvent): void;
 }
-
-export { InlineEditingMixin, InlineEditingMixinConstructor };
diff --git a/packages/grid-pro/src/vaadin-grid-pro.d.ts b/packages/grid-pro/src/vaadin-grid-pro.d.ts
@@ -5,8 +5,7 @@
  * See <a href="https://vaadin.com/license/cvdl-4.0">the website</a> for the complete license.
  */
 import { GridDefaultItem, Grid, GridCustomEventMap } from '@vaadin/grid/src/vaadin-grid.js';
-import { InlineEditingMixin } from './vaadin-grid-pro-inline-editing-mixin.js';
-
+import { InlineEditingMixinClass } from './vaadin-grid-pro-inline-editing-mixin.js';
 export { GridProEditorType } from './vaadin-grid-pro-edit-column.js';
 
 /**
@@ -91,7 +90,7 @@ declare class GridPro<TItem = GridDefaultItem> extends Grid<TItem> {
   ): void;
 }
 
-interface GridPro extends InlineEditingMixin {}
+interface GridPro extends InlineEditingMixinClass {}
 
 declare global {
   interface HTMLElementTagNameMap {