fix: align MSCB types to use combo-box mixin classes

Author: web-padawan

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

@@ -8,8 +8,12 @@ import type { DelegateFocusMixinClass } from '@vaadin/a11y-base/src/delegate-foc
 import type { DisabledMixinClass } from '@vaadin/a11y-base/src/disabled-mixin.js';
 import type { FocusMixinClass } from '@vaadin/a11y-base/src/focus-mixin.js';
 import type { KeyboardMixinClass } from '@vaadin/a11y-base/src/keyboard-mixin.js';
-import type { ComboBoxDataProvider, ComboBoxItemModel } from '@vaadin/combo-box/src/vaadin-combo-box.js';
+import type { ComboBoxItemModel } from '@vaadin/combo-box/src/vaadin-combo-box.js';
+import type { ComboBoxBaseMixinClass } from '@vaadin/combo-box/src/vaadin-combo-box-base-mixin.js';
+import type { ComboBoxDataProviderMixinClass } from '@vaadin/combo-box/src/vaadin-combo-box-data-provider-mixin.js';
+import type { ComboBoxItemsMixinClass } from '@vaadin/combo-box/src/vaadin-combo-box-items-mixin.js';
 import type { DelegateStateMixinClass } from '@vaadin/component-base/src/delegate-state-mixin.js';
+import type { OverlayClassMixinClass } from '@vaadin/component-base/src/overlay-class-mixin.js';
 import type { ResizeMixinClass } from '@vaadin/component-base/src/resize-mixin.js';
 import type { SlotStylesMixinClass } from '@vaadin/component-base/src/slot-styles-mixin.js';
 import type { ClearButtonMixinClass } from '@vaadin/field-base/src/clear-button-mixin.js';
@@ -38,6 +42,9 @@ export interface MultiSelectComboBoxI18n {
 export declare function MultiSelectComboBoxMixin<TItem, T extends Constructor<HTMLElement>>(
   base: T,
 ): Constructor<ClearButtonMixinClass> &
+  Constructor<ComboBoxBaseMixinClass> &
+  Constructor<ComboBoxDataProviderMixinClass<TItem>> &
+  Constructor<ComboBoxItemsMixinClass<TItem>> &
   Constructor<DelegateFocusMixinClass> &
   Constructor<DelegateStateMixinClass> &
   Constructor<DisabledMixinClass> &
@@ -49,6 +56,7 @@ export declare function MultiSelectComboBoxMixin<TItem, T extends Constructor<HT
   Constructor<KeyboardMixinClass> &
   Constructor<LabelMixinClass> &
   Constructor<MultiSelectComboBoxMixinClass<TItem>> &
+  Constructor<OverlayClassMixinClass> &
   Constructor<ResizeMixinClass> &
   Constructor<SlotStylesMixinClass> &
   Constructor<ValidateMixinClass> &
@@ -76,44 +84,6 @@ export declare class MultiSelectComboBoxMixinClass<TItem> {
    */
   allowCustomValue: boolean;
 
-  /**
-   * Set true to prevent the overlay from opening automatically.
-   * @attr {boolean} auto-open-disabled
-   */
-  autoOpenDisabled: boolean;
-
-  /**
-   * Function that provides items lazily. Receives two arguments:
-   *
-   * - `params` - Object with the following properties:
-   *   - `params.page` Requested page index
-   *   - `params.pageSize` Current page size
-   *   - `params.filter` Currently applied filter
-   *
-   * - `callback(items, size)` - Callback function with arguments:
-   *   - `items` Current page of items
-   *   - `size` Total number of items.
-   */
-  dataProvider: ComboBoxDataProvider<TItem> | null | undefined;
-
-  /**
-   * A subset of items, filtered based on the user input. Filtered items
-   * can be assigned directly to omit the internal filtering functionality.
-   * The items can be of either `String` or `Object` type.
-   */
-  filteredItems: TItem[] | undefined;
-
-  /**
-   * Filtering string the user has typed into the input field.
-   */
-  filter: string;
-
-  /**
-   * A full set of items to filter the visible options from.
-   * The items can be of either `String` or `Object` type.
-   */
-  items: TItem[] | undefined;
-
   /**
    * A function used to generate CSS class names for dropdown
    * items and selected chips based on the item. The return
@@ -122,25 +92,12 @@ export declare class MultiSelectComboBoxMixinClass<TItem> {
    */
   itemClassNameGenerator: (item: TItem) => string;
 
-  /**
-   * The item property used for a visual representation of the item.
-   * @attr {string} item-label-path
-   */
-  itemLabelPath: string;
-
   /**
    * Path for the id of the item, used to detect whether the item is selected.
    * @attr {string} item-id-path
    */
   itemIdPath: string;
 
-  /**
-   * Path for the value of the item. If `items` is an array of objects,
-   * this property is used as a string value for the selected item.
-   * @attr {string} item-value-path
-   */
-  itemValuePath: string;
-
   /**
    * The object used to localize this component.
    * To change the default localization, replace the entire
@@ -176,24 +133,6 @@ export declare class MultiSelectComboBoxMixinClass<TItem> {
    */
   loading: boolean;
 
-  /**
-   * A space-delimited list of CSS class names to set on the overlay element.
-   *
-   * @attr {string} overlay-class
-   */
-  overlayClass: string;
-
-  /**
-   * True if the dropdown is open, false otherwise.
-   */
-  opened: boolean;
-
-  /**
-   * Number of items fetched at a time from the data provider.
-   * @attr {number} page-size
-   */
-  pageSize: number;
-
   /**
    * A hint to the user of what can be entered in the control.
    * The placeholder will be only displayed in the case when
@@ -226,16 +165,6 @@ export declare class MultiSelectComboBoxMixinClass<TItem> {
    */
   selectedItemsOnTop: boolean;
 
-  /**
-   * Total number of items.
-   */
-  size: number | undefined;
-
-  /**
-   * Clears the cached pages and reloads data from data provider when needed.
-   */
-  clearCache(): void;
-
   /**
    * Clears the selected items.
    */

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

@@ -8,8 +8,12 @@ import type { DisabledMixinClass } from '@vaadin/a11y-base/src/disabled-mixin.js
 import type { FocusMixinClass } from '@vaadin/a11y-base/src/focus-mixin.js';
 import type { KeyboardMixinClass } from '@vaadin/a11y-base/src/keyboard-mixin.js';
 import type { ComboBoxDefaultItem } from '@vaadin/combo-box/src/vaadin-combo-box.js';
+import type { ComboBoxBaseMixinClass } from '@vaadin/combo-box/src/vaadin-combo-box-base-mixin.js';
+import type { ComboBoxDataProviderMixinClass } from '@vaadin/combo-box/src/vaadin-combo-box-data-provider-mixin.js';
+import type { ComboBoxItemsMixinClass } from '@vaadin/combo-box/src/vaadin-combo-box-items-mixin.js';
 import type { DelegateStateMixinClass } from '@vaadin/component-base/src/delegate-state-mixin.js';
 import type { ElementMixinClass } from '@vaadin/component-base/src/element-mixin.js';
+import type { OverlayClassMixinClass } from '@vaadin/component-base/src/overlay-class-mixin.js';
 import type { ResizeMixinClass } from '@vaadin/component-base/src/resize-mixin.js';
 import type { SlotStylesMixinClass } from '@vaadin/component-base/src/slot-styles-mixin.js';
 import type { ClearButtonMixinClass } from '@vaadin/field-base/src/clear-button-mixin.js';
@@ -169,7 +173,10 @@ declare class MultiSelectComboBox<TItem = ComboBoxDefaultItem> extends HTMLEleme
 }
 
 interface MultiSelectComboBox<TItem = ComboBoxDefaultItem>
-  extends ValidateMixinClass,
+  extends ComboBoxBaseMixinClass,
+    ComboBoxDataProviderMixinClass<TItem>,
+    ComboBoxItemsMixinClass<TItem>,
+    ValidateMixinClass,
     SlotStylesMixinClass,
     LabelMixinClass,
     KeyboardMixinClass,
@@ -183,6 +190,7 @@ interface MultiSelectComboBox<TItem = ComboBoxDefaultItem>
     DelegateStateMixinClass,
     DelegateFocusMixinClass,
     MultiSelectComboBoxMixinClass<TItem>,
+    OverlayClassMixinClass,
     ResizeMixinClass,
     ThemableMixinClass,
     ThemePropertyMixinClass,

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

@@ -2,13 +2,17 @@ import type { DelegateFocusMixinClass } from '@vaadin/a11y-base/src/delegate-foc
 import type { DisabledMixinClass } from '@vaadin/a11y-base/src/disabled-mixin.js';
 import type { FocusMixinClass } from '@vaadin/a11y-base/src/focus-mixin.js';
 import type { KeyboardMixinClass } from '@vaadin/a11y-base/src/keyboard-mixin.js';
+import type { ComboBoxBaseMixinClass } from '@vaadin/combo-box/src/vaadin-combo-box-base-mixin.js';
+import type { ComboBoxDataProviderMixinClass } from '@vaadin/combo-box/src/vaadin-combo-box-data-provider-mixin.js';
 import type {
   ComboBoxItemMixinClass,
   ComboBoxItemRenderer,
 } from '@vaadin/combo-box/src/vaadin-combo-box-item-mixin.js';
+import type { ComboBoxItemsMixinClass } from '@vaadin/combo-box/src/vaadin-combo-box-items-mixin.js';
 import type { DelegateStateMixinClass } from '@vaadin/component-base/src/delegate-state-mixin.js';
 import type { DirMixinClass } from '@vaadin/component-base/src/dir-mixin.js';
 import type { ElementMixinClass } from '@vaadin/component-base/src/element-mixin.js';
+import type { OverlayClassMixinClass } from '@vaadin/component-base/src/overlay-class-mixin.js';
 import type { SlotStylesMixinClass } from '@vaadin/component-base/src/slot-styles-mixin.js';
 import type { ClearButtonMixinClass } from '@vaadin/field-base/src/clear-button-mixin.js';
 import type { FieldMixinClass } from '@vaadin/field-base/src/field-mixin.js';
@@ -109,6 +113,9 @@ assertType<boolean>(narrowedComboBox.selectedItemsOnTop);
 assertType<boolean>(narrowedComboBox.autoExpandVertically);
 
 // Mixins
+assertType<ComboBoxBaseMixinClass>(narrowedComboBox);
+assertType<ComboBoxDataProviderMixinClass<TestComboBoxItem>>(narrowedComboBox);
+assertType<ComboBoxItemsMixinClass<TestComboBoxItem>>(narrowedComboBox);
 assertType<ElementMixinClass>(narrowedComboBox);
 assertType<DelegateFocusMixinClass>(narrowedComboBox);
 assertType<DelegateStateMixinClass>(narrowedComboBox);
@@ -122,6 +129,7 @@ assertType<Omit<InputMixinClass, 'value'>>(narrowedComboBox);
 assertType<KeyboardMixinClass>(narrowedComboBox);
 assertType<LabelMixinClass>(narrowedComboBox);
 assertType<MultiSelectComboBoxMixinClass<TestComboBoxItem>>(narrowedComboBox);
+assertType<OverlayClassMixinClass>(narrowedComboBox);
 assertType<SlotStylesMixinClass>(narrowedComboBox);
 assertType<ValidateMixinClass>(narrowedComboBox);
 assertType<ThemableMixinClass>(narrowedComboBox);