refactor: hide internal API from TS definitions (#2960)

packages/checkbox/test/typings/checkbox.types.ts

@@ -1,8 +1,11 @@
-import { ActiveMixin } from '@vaadin/component-base/src/active-mixin.js';
-import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { CheckedMixin } from '@vaadin/field-base/src/checked-mixin.js';
-import { DelegateFocusMixin } from '@vaadin/field-base/src/delegate-focus-mixin.js';
-import { SlotLabelMixin } from '@vaadin/field-base/src/slot-label-mixin.js';
+import { ActiveMixinClass } from '@vaadin/component-base/src/active-mixin.js';
+import { ElementMixinClass } from '@vaadin/component-base/src/element-mixin.js';
+import { FocusMixinClass } from '@vaadin/component-base/src/focus-mixin.js';
+import { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
+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 '../../vaadin-checkbox.js';
 import { CheckboxCheckedChangedEvent, CheckboxIndeterminateChangedEvent } from '../../vaadin-checkbox.js';
@@ -21,11 +24,14 @@ assertType<string>(checkbox.name);
 assertType<string>(checkbox.value);
 
 // Mixins
-assertType<ActiveMixin>(checkbox);
-assertType<ElementMixin>(checkbox);
-assertType<CheckedMixin>(checkbox);
-assertType<DelegateFocusMixin>(checkbox);
-assertType<SlotLabelMixin>(checkbox);
+assertType<ActiveMixinClass>(checkbox);
+assertType<DisabledMixinClass>(checkbox);
+assertType<ElementMixinClass>(checkbox);
+assertType<FocusMixinClass>(checkbox);
+assertType<KeyboardMixinClass>(checkbox);
+assertType<CheckedMixinClass>(checkbox);
+assertType<DelegateFocusMixinClass>(checkbox);
+assertType<LabelMixinClass>(checkbox);
 assertType<ThemableMixin>(checkbox);
 
 // Events

packages/combo-box/package.json

@@ -31,6 +31,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",

packages/combo-box/src/vaadin-combo-box-data-provider-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';
 
 export type ComboBoxDataProviderCallback<TItem> = (items: Array<TItem>, size: number) => void;
 
@@ -17,15 +18,11 @@ export type ComboBoxDataProvider<TItem> = (
   callback: ComboBoxDataProviderCallback<TItem>
 ) => void;
 
-declare function ComboBoxDataProviderMixin<TItem, T extends new (...args: any[]) => {}>(
+export declare function ComboBoxDataProviderMixin<TItem, T extends Constructor<HTMLElement>>(
   base: T
-): T & ComboBoxDataProviderMixinConstructor<TItem>;
+): T & Constructor<ComboBoxDataProviderMixinClass<TItem>>;
 
-interface ComboBoxDataProviderMixinConstructor<TItem> {
-  new (...args: any[]): ComboBoxDataProviderMixin<TItem>;
-}
-
-interface ComboBoxDataProviderMixin<TItem> {
+export declare class ComboBoxDataProviderMixinClass<TItem> {
   /**
    * Number of items fetched at a time from the dataprovider.
    * @attr {number} page-size
@@ -57,5 +54,3 @@ interface ComboBoxDataProviderMixin<TItem> {
    */
   clearCache(): void;
 }
-
-export { ComboBoxDataProviderMixin, ComboBoxDataProviderMixinConstructor };

packages/combo-box/src/vaadin-combo-box-light.d.ts

@@ -4,8 +4,8 @@
  * 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 { ComboBoxMixin } from './vaadin-combo-box-mixin.js';
-import { ComboBoxDataProviderMixin } from './vaadin-combo-box-data-provider-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';
 export {
   ComboBoxDataProvider,
@@ -125,8 +125,8 @@ declare class ComboBoxLight<TItem = ComboBoxDefaultItem> extends HTMLElement {
 }
 
 interface ComboBoxLight<TItem = ComboBoxDefaultItem>
-  extends ComboBoxDataProviderMixin<TItem>,
-    ComboBoxMixin<TItem>,
+  extends ComboBoxDataProviderMixinClass<TItem>,
+    ComboBoxMixinClass<TItem>,
     ThemableMixin {}
 
 declare global {

packages/combo-box/src/vaadin-combo-box-mixin.d.ts

@@ -3,9 +3,10 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { DisabledMixin } from '@vaadin/component-base/src/disabled-mixin.js';
-import { KeyboardMixin } from '@vaadin/component-base/src/keyboard-mixin.js';
-import { InputMixin } from '@vaadin/field-base/src/input-mixin.js';
+import { Constructor } from '@open-wc/dedupe-mixin';
+import { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
+import { KeyboardMixinClass } from '@vaadin/component-base/src/keyboard-mixin.js';
+import { InputMixinClass } from '@vaadin/field-base/src/input-mixin.js';
 import { ComboBox } from './vaadin-combo-box.js';
 
 export type ComboBoxDefaultItem = any;
@@ -21,16 +22,22 @@ export type ComboBoxRenderer<TItem> = (
   model: ComboBoxItemModel<TItem>
 ) => void;
 
-declare function ComboBoxMixin<TItem, T extends new (...args: any[]) => {}>(
+export declare function ComboBoxMixin<TItem, T extends Constructor<HTMLElement>>(
   base: T
-): T & ComboBoxMixinConstructor<TItem>;
+): T &
+  Constructor<ComboBoxMixinClass<TItem>> &
+  Constructor<DisabledMixinClass> &
+  Constructor<InputMixinClass> &
+  Constructor<KeyboardMixinClass>;
 
-interface ComboBoxMixinConstructor<TItem> {
-  new (...args: any[]): ComboBoxMixin<TItem>;
-}
+export declare class ComboBoxMixinClass<TItem> {
+  protected readonly _propertyForValue: string;
+
+  protected _inputElementValue: string | undefined;
 
-interface ComboBoxMixin<TItem> extends DisabledMixin, InputMixin, KeyboardMixin {
-  readonly _propertyForValue: string;
+  protected _revertInputValue(): void;
+
+  protected _getItemElements(): HTMLElement[];
 
   /**
    * True if the dropdown is open, false otherwise.
@@ -173,5 +180,3 @@ interface ComboBoxMixin<TItem> extends DisabledMixin, InputMixin, KeyboardMixin
    */
   checkValidity(): boolean;
 }
-
-export { ComboBoxMixin, ComboBoxMixinConstructor };

packages/combo-box/src/vaadin-combo-box.d.ts

@@ -3,12 +3,12 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { InputControlMixin } from '@vaadin/field-base/src/input-control-mixin.js';
-import { PatternMixin } from '@vaadin/field-base/src/pattern-mixin.js';
+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 { ComboBoxDataProviderMixin } from './vaadin-combo-box-data-provider-mixin.js';
-import { ComboBoxMixin } from './vaadin-combo-box-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';
 export {
   ComboBoxDataProvider,
@@ -220,12 +220,12 @@ declare class ComboBox<TItem = ComboBoxDefaultItem> extends HTMLElement {
 }
 
 interface ComboBox<TItem = ComboBoxDefaultItem>
-  extends ComboBoxDataProviderMixin<TItem>,
-    ComboBoxMixin<TItem>,
-    PatternMixin,
-    InputControlMixin,
+  extends ComboBoxDataProviderMixinClass<TItem>,
+    ComboBoxMixinClass<TItem>,
+    PatternMixinClass,
+    InputControlMixinClass,
     ThemableMixin,
-    ElementMixin {}
+    ElementMixinClass {}
 
 declare global {
   interface HTMLElementTagNameMap {

packages/combo-box/test/typings/combo-box.types.ts

@@ -1,7 +1,7 @@
-import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { ElementMixinClass } from '@vaadin/component-base/src/element-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin';
-import { ComboBoxDataProviderMixin } from '../../src/vaadin-combo-box-data-provider-mixin';
-import { ComboBoxMixin } from '../../src/vaadin-combo-box-mixin';
+import { ComboBoxDataProviderMixinClass } from '../../src/vaadin-combo-box-data-provider-mixin';
+import { ComboBoxMixinClass } from '../../src/vaadin-combo-box-mixin';
 import {
   ComboBoxFilterChangedEvent,
   ComboBoxInvalidChangedEvent,
@@ -32,8 +32,9 @@ const genericComboBox = document.createElement('vaadin-combo-box');
 
 const narrowedComboBox = genericComboBox as ComboBox<TestComboBoxItem>;
 assertType<ComboBox>(narrowedComboBox);
-assertType<ElementMixin>(narrowedComboBox);
-assertType<ComboBoxDataProviderMixin<TestComboBoxItem>>(narrowedComboBox);
+assertType<ElementMixinClass>(narrowedComboBox);
+assertType<ComboBoxDataProviderMixinClass<TestComboBoxItem>>(narrowedComboBox);
+assertType<ComboBoxMixinClass<TestComboBoxItem>>(narrowedComboBox);
 assertType<ThemableMixin>(narrowedComboBox);
 
 narrowedComboBox.addEventListener('custom-value-set', (event) => {
@@ -71,8 +72,8 @@ const genericComboBoxLightElement = document.createElement('vaadin-combo-box-lig
 assertType<ComboBoxLight>(genericComboBoxLightElement);
 
 const narrowedComboBoxLightElement = genericComboBoxLightElement as ComboBoxLight<TestComboBoxItem>;
-assertType<ComboBoxDataProviderMixin<TestComboBoxItem>>(narrowedComboBoxLightElement);
-assertType<ComboBoxMixin<TestComboBoxItem>>(narrowedComboBoxLightElement);
+assertType<ComboBoxDataProviderMixinClass<TestComboBoxItem>>(narrowedComboBoxLightElement);
+assertType<ComboBoxMixinClass<TestComboBoxItem>>(narrowedComboBoxLightElement);
 assertType<ThemableMixin>(narrowedComboBoxLightElement);
 
 narrowedComboBoxLightElement.addEventListener('custom-value-set', (event) => {

packages/component-base/package.json

@@ -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",

packages/component-base/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 const 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;
+}

packages/component-base/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 const 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 };

packages/component-base/src/disabled-mixin.d.ts

@@ -3,21 +3,20 @@
  * 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 const 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;
+}

packages/component-base/src/element-mixin.d.ts

@@ -3,20 +3,24 @@
  * 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 { ReactiveControllerHost } from 'lit';
 import '../custom_typings/vaadin-usage-statistics.js';
 import '../custom_typings/vaadin.js';
-import { DirMixin, DirMixinConstructor } from './dir-mixin.js';
+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 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 ElementMixin extends Pick<ReactiveControllerHost, 'addController' | 'removeController'>, DirMixin {}
+export declare class ElementMixinClass {
+  static version: string;
 
-export { ElementMixin, ElementMixinConstructor };
+  protected static finalize(): void;
+}