@vaadin/combo-box 23.2.0-dev.8a7678b70 → 23.3.0-alpha1

package/README.md

@@ -2,7 +2,7 @@
 
 A web component for choosing a value from a filterable list of options presented in an overlay.
 
-[Documentation + Live Demo ↗](https://vaadin.com/docs/latest/ds/components/combo-box)
+[Documentation + Live Demo ↗](https://vaadin.com/docs/latest/components/combo-box)
 
 [![npm version](https://badgen.net/npm/v/@vaadin/combo-box)](https://www.npmjs.com/package/@vaadin/combo-box)
 [![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)
@@ -24,7 +24,7 @@ A web component for choosing a value from a filterable list of options presented
 </script>
 ```
 
-[<img src="https://raw.githubusercontent.com/vaadin/web-components/master/packages/combo-box/screenshot.png" width="208" alt="Screenshot of vaadin-combo-box">](https://vaadin.com/docs/latest/ds/components/combo-box)
+[<img src="https://raw.githubusercontent.com/vaadin/web-components/master/packages/combo-box/screenshot.png" width="208" alt="Screenshot of vaadin-combo-box">](https://vaadin.com/docs/latest/components/combo-box)
 
 ## Installation
 
@@ -42,7 +42,7 @@ import '@vaadin/combo-box';
 
 ## Themes
 
-Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/ds/customization/using-themes), Lumo and Material.
+Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material.
 The [main entrypoint](https://github.com/vaadin/web-components/blob/master/packages/combo-box/vaadin-combo-box.js) of the package uses the Lumo theme.
 
 To use the Material theme, import the component from the `theme/material` folder:
@@ -65,7 +65,7 @@ import '@vaadin/combo-box/src/vaadin-combo-box.js';
 
 ## 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.
+Read the [contributing guide](https://vaadin.com/docs/latest/contributing/overview) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
 
 ## License
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/combo-box",
-  "version": "23.2.0-dev.8a7678b70",
+  "version": "23.3.0-alpha1",
   "publishConfig": {
     "access": "public"
   },
@@ -24,7 +24,9 @@
     "src",
     "theme",
     "vaadin-*.d.ts",
-    "vaadin-*.js"
+    "vaadin-*.js",
+    "web-types.json",
+    "web-types.lit.json"
   ],
   "keywords": [
     "Vaadin",
@@ -36,23 +38,27 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "23.2.0-dev.8a7678b70",
-    "@vaadin/field-base": "23.2.0-dev.8a7678b70",
-    "@vaadin/input-container": "23.2.0-dev.8a7678b70",
-    "@vaadin/item": "23.2.0-dev.8a7678b70",
-    "@vaadin/lit-renderer": "23.2.0-dev.8a7678b70",
-    "@vaadin/vaadin-lumo-styles": "23.2.0-dev.8a7678b70",
-    "@vaadin/vaadin-material-styles": "23.2.0-dev.8a7678b70",
-    "@vaadin/vaadin-overlay": "23.2.0-dev.8a7678b70",
-    "@vaadin/vaadin-themable-mixin": "23.2.0-dev.8a7678b70"
+    "@vaadin/component-base": "23.3.0-alpha1",
+    "@vaadin/field-base": "23.3.0-alpha1",
+    "@vaadin/input-container": "23.3.0-alpha1",
+    "@vaadin/item": "23.3.0-alpha1",
+    "@vaadin/lit-renderer": "23.3.0-alpha1",
+    "@vaadin/vaadin-lumo-styles": "23.3.0-alpha1",
+    "@vaadin/vaadin-material-styles": "23.3.0-alpha1",
+    "@vaadin/vaadin-overlay": "23.3.0-alpha1",
+    "@vaadin/vaadin-themable-mixin": "23.3.0-alpha1"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/polymer-legacy-adapter": "23.2.0-dev.8a7678b70",
+    "@vaadin/polymer-legacy-adapter": "23.3.0-alpha1",
     "@vaadin/testing-helpers": "^0.3.2",
-    "@vaadin/text-field": "23.2.0-dev.8a7678b70",
+    "@vaadin/text-field": "23.3.0-alpha1",
     "lit": "^2.0.0",
     "sinon": "^13.0.2"
   },
-  "gitHead": "85b403f96d8282f262322b56c0ff4289f843d02a"
+  "web-types": [
+    "web-types.json",
+    "web-types.lit.json"
+  ],
+  "gitHead": "beabc527d4b1274eb798ff701d406fed45cfe638"
 }

package/src/lit/renderer-directives.d.ts

@@ -3,10 +3,10 @@
  * Copyright (c) 2017 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { TemplateResult } from 'lit';
-import { DirectiveResult } from 'lit/directive.js';
+import type { TemplateResult } from 'lit';
+import type { DirectiveResult } from 'lit/directive.js';
 import { LitRendererDirective } from '@vaadin/lit-renderer';
-import { ComboBox, ComboBoxItemModel } from '../vaadin-combo-box.js';
+import type { ComboBox, ComboBoxItemModel } from '../vaadin-combo-box.js';
 
 export type ComboBoxLitRenderer<TItem> = (
   item: TItem,

package/src/vaadin-combo-box-data-provider-mixin.d.ts

@@ -3,9 +3,9 @@
  * Copyright (c) 2015 - 2022 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 type { Constructor } from '@open-wc/dedupe-mixin';
 
-export type ComboBoxDataProviderCallback<TItem> = (items: TItem[], size: number) => void;
+export type ComboBoxDataProviderCallback<TItem> = (items: TItem[], size?: number) => void;
 
 export interface ComboBoxDataProviderParams {
   page: number;
@@ -20,7 +20,7 @@ export type ComboBoxDataProvider<TItem> = (
 
 export declare function ComboBoxDataProviderMixin<TItem, T extends Constructor<HTMLElement>>(
   base: T,
-): T & Constructor<ComboBoxDataProviderMixinClass<TItem>>;
+): Constructor<ComboBoxDataProviderMixinClass<TItem>> & T;
 
 export declare class ComboBoxDataProviderMixinClass<TItem> {
   /**

package/src/vaadin-combo-box-data-provider-mixin.js

@@ -62,13 +62,17 @@ export const ComboBoxDataProviderMixin = (superClass) =>
         __placeHolder: {
           value: new ComboBoxPlaceholder(),
         },
+
+        /** @private */
+        __previousDataProviderFilter: {
+          type: String,
+        },
       };
     }
 
     static get observers() {
       return [
-        '_dataProviderFilterChanged(filter, dataProvider)',
-        '_dataProviderClearFilter(dataProvider, opened, value)',
+        '_dataProviderFilterChanged(filter)',
         '_warnDataProviderValue(dataProvider, value)',
         '_ensureFirstPage(opened)',
       ];
@@ -77,7 +81,6 @@ export const ComboBoxDataProviderMixin = (superClass) =>
     /** @protected */
     ready() {
       super.ready();
-      this.clearCache();
       this._scroller.addEventListener('index-requested', (e) => {
         const index = e.detail.index;
         const currentScrollerPos = e.detail.currentScrollerPos;
@@ -101,38 +104,25 @@ export const ComboBoxDataProviderMixin = (superClass) =>
     }
 
     /** @private */
-    _dataProviderFilterChanged() {
-      if (!this._shouldFetchData()) {
+    _dataProviderFilterChanged(filter) {
+      if (this.__previousDataProviderFilter === undefined && filter === '') {
+        this.__previousDataProviderFilter = filter;
         return;
       }
 
-      this._refreshData();
-    }
+      if (this.__previousDataProviderFilter !== filter) {
+        this.__previousDataProviderFilter = filter;
 
-    /** @private */
-    _dataProviderClearFilter(dataProvider, opened, value) {
-      // Can't depend on filter in this observer as we don't want
-      // to clear the filter whenever it's set
-      if (dataProvider && !this.loading && this.filter && !(opened && this.autoOpenDisabled && value === this.filter)) {
-        this._refreshData(true);
-      }
-    }
+        this._pendingRequests = {};
+        // Immediately mark as loading if this refresh leads to re-fetching pages
+        // This prevents some issues with the properties below triggering
+        // observers that also rely on the loading state
+        this.loading = this._shouldFetchData();
+        // Reset size and internal loading state
+        this.size = undefined;
 
-    /** @private */
-    _refreshData(clearFilter) {
-      // Immediately mark as loading if this refresh leads to re-fetching pages
-      // This prevents some issues with the properties below triggering
-      // observers that also rely on the loading state
-      this.loading = this._shouldFetchData();
-      // Reset size and internal loading state
-      this.size = undefined;
-      this._pendingRequests = {};
-      // Clear filter if requested
-      if (clearFilter) {
-        this.filter = '';
+        this.clearCache();
       }
-      // Clear cached pages, and reload current page if we need the data
-      this.clearCache();
     }
 
     /** @private */
@@ -196,10 +186,13 @@ export const ComboBoxDataProviderMixin = (superClass) =>
         filteredItems.splice(params.page * params.pageSize, items.length, ...items);
         this.filteredItems = filteredItems;
 
-        if (!this.opened && !this.hasAttribute('focused')) {
+        if (!this.opened && !this._isInputFocused()) {
           this._commitValue();
         }
-        this.size = size;
+
+        if (size !== undefined) {
+          this.size = size;
+        }
 
         delete this._pendingRequests[page];
 
@@ -229,13 +222,16 @@ export const ComboBoxDataProviderMixin = (superClass) =>
       if (!this.dataProvider) {
         return;
       }
+
       this._pendingRequests = {};
       const filteredItems = [];
       for (let i = 0; i < (this.size || 0); i++) {
         filteredItems.push(this.__placeHolder);
       }
       this.filteredItems = filteredItems;
+
       if (this._shouldFetchData()) {
+        this._forceNextRequest = false;
         this._loadPage(0);
       } else {
         this._forceNextRequest = true;
@@ -269,6 +265,8 @@ export const ComboBoxDataProviderMixin = (superClass) =>
       this._ensureItemsOrDataProvider(() => {
         this.dataProvider = oldDataProvider;
       });
+
+      this.clearCache();
     }
 
     /** @private */

package/src/vaadin-combo-box-item.js

@@ -26,7 +26,7 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  * `selected`   | Set when the item is selected
  * `focused`    | Set when the item is focused
  *
- * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
  *
  * @mixes ThemableMixin
  * @mixes DirMixin

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

@@ -3,13 +3,14 @@
  * Copyright (c) 2015 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-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 { 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';
+import type { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
+import type { KeyboardMixinClass } from '@vaadin/component-base/src/keyboard-mixin.js';
+import type { InputMixinClass } from '@vaadin/field-base/src/input-mixin.js';
+import type { ValidateMixinClass } from '@vaadin/field-base/src/validate-mixin.js';
+import type { ThemableMixinClass } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import type { ThemePropertyMixinClass } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
+import type { ComboBoxDataProviderMixinClass } from './vaadin-combo-box-data-provider-mixin.js';
+import type { ComboBoxDefaultItem, ComboBoxMixinClass } from './vaadin-combo-box-mixin.js';
 export {
   ComboBoxDataProvider,
   ComboBoxDataProviderCallback,
@@ -54,6 +55,11 @@ export type ComboBoxLightFilterChangedEvent = CustomEvent<{ value: string }>;
  */
 export type ComboBoxLightSelectedItemChangedEvent<TItem> = CustomEvent<{ value: TItem | null | undefined }>;
 
+/**
+ * Fired whenever the field is validated.
+ */
+export type ComboBoxLightValidatedEvent = CustomEvent<{ valid: boolean }>;
+
 export interface ComboBoxLightEventMap<TItem> extends HTMLElementEventMap {
   change: ComboBoxLightChangeEvent<TItem>;
 
@@ -68,6 +74,8 @@ export interface ComboBoxLightEventMap<TItem> extends HTMLElementEventMap {
   'value-changed': ComboBoxLightValueChangedEvent;
 
   'selected-item-changed': ComboBoxLightSelectedItemChangedEvent<TItem>;
+
+  validated: ComboBoxLightValidatedEvent;
 }
 
 /**
@@ -114,6 +122,7 @@ export interface ComboBoxLightEventMap<TItem> extends HTMLElementEventMap {
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
  * @fires {CustomEvent} selected-item-changed - Fired when the `selectedItem` property changes.
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
+ * @fires {CustomEvent} validated - Fired whenever the field is validated.
  */
 declare class ComboBoxLight<TItem = ComboBoxDefaultItem> extends HTMLElement {
   /**
@@ -126,13 +135,13 @@ declare class ComboBoxLight<TItem = ComboBoxDefaultItem> extends HTMLElement {
   addEventListener<K extends keyof ComboBoxLightEventMap<TItem>>(
     type: K,
     listener: (this: ComboBoxLight<TItem>, ev: ComboBoxLightEventMap<TItem>[K]) => void,
-    options?: boolean | AddEventListenerOptions,
+    options?: AddEventListenerOptions | boolean,
   ): void;
 
   removeEventListener<K extends keyof ComboBoxLightEventMap<TItem>>(
     type: K,
     listener: (this: ComboBoxLight<TItem>, ev: ComboBoxLightEventMap<TItem>[K]) => void,
-    options?: boolean | EventListenerOptions,
+    options?: EventListenerOptions | boolean,
   ): void;
 }
 
@@ -142,7 +151,9 @@ interface ComboBoxLight<TItem = ComboBoxDefaultItem>
     KeyboardMixinClass,
     InputMixinClass,
     DisabledMixinClass,
-    ThemableMixinClass {}
+    ThemableMixinClass,
+    ThemePropertyMixinClass,
+    ValidateMixinClass {}
 
 declare global {
   interface HTMLElementTagNameMap {

package/src/vaadin-combo-box-light.js

@@ -7,7 +7,9 @@ import './vaadin-combo-box-item.js';
 import './vaadin-combo-box-overlay.js';
 import './vaadin-combo-box-scroller.js';
 import { dashToCamelCase } from '@polymer/polymer/lib/utils/case-map.js';
+import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { ValidateMixin } from '@vaadin/field-base/src/validate-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';
@@ -56,13 +58,15 @@ import { ComboBoxMixin } from './vaadin-combo-box-mixin.js';
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
  * @fires {CustomEvent} selected-item-changed - Fired when the `selectedItem` property changes.
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
+ * @fires {CustomEvent} validated - Fired whenever the field is validated.
  *
  * @extends HTMLElement
  * @mixes ComboBoxDataProviderMixin
  * @mixes ComboBoxMixin
  * @mixes ThemableMixin
+ * @mixes ValidateMixin
  */
-class ComboBoxLight extends ComboBoxDataProviderMixin(ComboBoxMixin(ThemableMixin(PolymerElement))) {
+class ComboBoxLight extends ComboBoxDataProviderMixin(ComboBoxMixin(ValidateMixin(ThemableMixin(PolymerElement)))) {
   static get is() {
     return 'vaadin-combo-box-light';
   }
@@ -79,7 +83,6 @@ class ComboBoxLight extends ComboBoxDataProviderMixin(ComboBoxMixin(ThemableMixi
 
       <vaadin-combo-box-overlay
         id="overlay"
-        hidden$="[[_isOverlayHidden(filteredItems, loading)]]"
         opened="[[_overlayOpened]]"
         loading$="[[loading]]"
         theme$="[[_theme]]"
@@ -117,14 +120,14 @@ class ComboBoxLight extends ComboBoxDataProviderMixin(ComboBoxMixin(ThemableMixi
   /** @protected */
   ready() {
     super.ready();
+
     this._toggleElement = this.querySelector('.toggle-button');
-  }
 
-  /** @protected */
-  connectedCallback() {
-    super.connectedCallback();
-    this._setInputElement(this.querySelector('vaadin-text-field,.input'));
-    this._revertInputValue();
+    // Wait until the slotted input DOM is ready
+    afterNextRender(this, () => {
+      this._setInputElement(this.querySelector('vaadin-text-field,.input'));
+      this._revertInputValue();
+    });
   }
 
   /**
@@ -146,6 +149,38 @@ class ComboBoxLight extends ComboBoxDataProviderMixin(ComboBoxMixin(ThemableMixi
     return dashToCamelCase(this.attrForValue);
   }
 
+  /**
+   * @protected
+   * @override
+   * @return {HTMLInputElement | undefined}
+   */
+  get _nativeInput() {
+    const input = this.inputElement;
+
+    if (input) {
+      // Support `<input class="input">`
+      if (input instanceof HTMLInputElement) {
+        return input;
+      }
+
+      // Support `<input>` in light DOM (e.g. `vaadin-text-field`)
+      const slottedInput = input.querySelector('input');
+      if (slottedInput) {
+        return slottedInput;
+      }
+
+      if (input.shadowRoot) {
+        // Support `<input>` in Shadow DOM (e.g. `mwc-textfield`)
+        const shadowInput = input.shadowRoot.querySelector('input');
+        if (shadowInput) {
+          return shadowInput;
+        }
+      }
+    }
+
+    return undefined;
+  }
+
   /** @protected */
   _isClearButton(event) {
     return (

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

@@ -3,11 +3,11 @@
  * Copyright (c) 2015 - 2022 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 { 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';
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
+import type { KeyboardMixinClass } from '@vaadin/component-base/src/keyboard-mixin.js';
+import type { InputMixinClass } from '@vaadin/field-base/src/input-mixin.js';
+import type { ComboBox } from './vaadin-combo-box.js';
 
 export type ComboBoxDefaultItem = any;
 
@@ -24,11 +24,11 @@ export type ComboBoxRenderer<TItem> = (
 
 export declare function ComboBoxMixin<TItem, T extends Constructor<HTMLElement>>(
   base: T,
-): T &
-  Constructor<ComboBoxMixinClass<TItem>> &
+): Constructor<ComboBoxMixinClass<TItem>> &
   Constructor<DisabledMixinClass> &
   Constructor<InputMixinClass> &
-  Constructor<KeyboardMixinClass>;
+  Constructor<KeyboardMixinClass> &
+  T;
 
 export declare class ComboBoxMixinClass<TItem> {
   /**
@@ -138,11 +138,6 @@ export declare class ComboBoxMixinClass<TItem> {
    */
   itemIdPath: string | null | undefined;
 
-  /**
-   * Set to true if the value is invalid.
-   */
-  invalid: boolean;
-
   protected readonly _propertyForValue: string;
 
   protected _inputElementValue: string | undefined;
@@ -170,16 +165,5 @@ export declare class ComboBoxMixinClass<TItem> {
    */
   close(): void;
 
-  /**
-   * Returns true if `value` is valid, and sets the `invalid` flag appropriately.
-   */
-  validate(): boolean;
-
-  /**
-   * Returns true if the current input value satisfies all constraints (if any).
-   * You can override this method for custom validations.
-   */
-  checkValidity(): boolean;
-
   protected _revertInputValue(): void;
 }