@vaadin/combo-box 23.1.2 → 23.2.0-alpha3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/combo-box",
-  "version": "23.1.2",
+  "version": "23.2.0-alpha3",
   "publishConfig": {
     "access": "public"
   },
@@ -19,10 +19,10 @@
   "main": "vaadin-combo-box.js",
   "type": "module",
   "files": [
+    "lit.d.ts",
+    "lit.js",
     "src",
     "theme",
-    "lit.js",
-    "lit.d.ts",
     "vaadin-*.d.ts",
     "vaadin-*.js"
   ],
@@ -36,23 +36,23 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "^23.1.2",
-    "@vaadin/field-base": "^23.1.2",
-    "@vaadin/input-container": "^23.1.2",
-    "@vaadin/item": "^23.1.2",
-    "@vaadin/lit-renderer": "^23.1.2",
-    "@vaadin/vaadin-lumo-styles": "^23.1.2",
-    "@vaadin/vaadin-material-styles": "^23.1.2",
-    "@vaadin/vaadin-overlay": "^23.1.2",
-    "@vaadin/vaadin-themable-mixin": "^23.1.2"
+    "@vaadin/component-base": "23.2.0-alpha3",
+    "@vaadin/field-base": "23.2.0-alpha3",
+    "@vaadin/input-container": "23.2.0-alpha3",
+    "@vaadin/item": "23.2.0-alpha3",
+    "@vaadin/lit-renderer": "23.2.0-alpha3",
+    "@vaadin/vaadin-lumo-styles": "23.2.0-alpha3",
+    "@vaadin/vaadin-material-styles": "23.2.0-alpha3",
+    "@vaadin/vaadin-overlay": "23.2.0-alpha3",
+    "@vaadin/vaadin-themable-mixin": "23.2.0-alpha3"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/polymer-legacy-adapter": "^23.1.2",
+    "@vaadin/polymer-legacy-adapter": "23.2.0-alpha3",
     "@vaadin/testing-helpers": "^0.3.2",
-    "@vaadin/text-field": "^23.1.2",
+    "@vaadin/text-field": "23.2.0-alpha3",
     "lit": "^2.0.0",
     "sinon": "^13.0.2"
   },
-  "gitHead": "6fb205c6e9a761feadfb779dd5d7af96d3102e56"
+  "gitHead": "06e5875be93ca50da2846dafc65a8531010c0576"
 }

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;

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

@@ -81,7 +81,7 @@ export const ComboBoxDataProviderMixin = (superClass) =>
     /** @protected */
     ready() {
       super.ready();
-      this.$.dropdown.addEventListener('index-requested', (e) => {
+      this._scroller.addEventListener('index-requested', (e) => {
         const index = e.detail.index;
         const currentScrollerPos = e.detail.currentScrollerPos;
         const allowedIndexRange = Math.floor(this.pageSize * 1.5);
@@ -167,44 +167,47 @@ export const ComboBoxDataProviderMixin = (superClass) =>
     /** @private */
     _loadPage(page) {
       // Make sure same page isn't requested multiple times.
-      if (!this._pendingRequests[page] && this.dataProvider) {
-        this.loading = true;
-
-        const params = {
-          page,
-          pageSize: this.pageSize,
-          filter: this.filter,
-        };
-
-        const callback = (items, size) => {
-          if (this._pendingRequests[page] === callback) {
-            const filteredItems = this.filteredItems ? [...this.filteredItems] : [];
-            filteredItems.splice(params.page * params.pageSize, items.length, ...items);
-            this.filteredItems = filteredItems;
-
-            // Update selectedItem from filteredItems if value is set
-            if (this._isValidValue(this.value) && this._getItemValue(this.selectedItem) !== this.value) {
-              this._selectItemForValue(this.value);
-            }
-            if (!this.opened && !this.hasAttribute('focused')) {
-              this._commitValue();
-            }
-            this.size = size;
-
-            delete this._pendingRequests[page];
-
-            if (Object.keys(this._pendingRequests).length === 0) {
-              this.loading = false;
-            }
-          }
-        };
+      if (this._pendingRequests[page] || !this.dataProvider) {
+        return;
+      }
+
+      const params = {
+        page,
+        pageSize: this.pageSize,
+        filter: this.filter,
+      };
 
-        if (!this._pendingRequests[page]) {
-          // Don't request page if it's already being requested
-          this._pendingRequests[page] = callback;
-          this.dataProvider(params, callback);
+      const callback = (items, size) => {
+        if (this._pendingRequests[page] !== callback) {
+          return;
         }
-      }
+
+        const filteredItems = this.filteredItems ? [...this.filteredItems] : [];
+        filteredItems.splice(params.page * params.pageSize, items.length, ...items);
+        this.filteredItems = filteredItems;
+
+        if (!this.opened && !this.hasAttribute('focused')) {
+          this._commitValue();
+        }
+
+        if (size !== undefined) {
+          this.size = size;
+        }
+
+        delete this._pendingRequests[page];
+
+        if (Object.keys(this._pendingRequests).length === 0) {
+          this.loading = false;
+        }
+      };
+
+      this._pendingRequests[page] = callback;
+      // Set the `loading` flag only after marking the request as pending
+      // to prevent the same page from getting requested multiple times
+      // as a result of `__loadingChanged` in the scroller which requests
+      // a virtualizer update which in turn may trigger a data provider page request.
+      this.loading = true;
+      this.dataProvider(params, callback);
     }
 
     /** @private */
@@ -279,7 +282,7 @@ export const ComboBoxDataProviderMixin = (superClass) =>
     /** @private */
     _warnDataProviderValue(dataProvider, value) {
       if (dataProvider && value !== '' && (this.selectedItem === undefined || this.selectedItem === null)) {
-        const valueIndex = this._indexOfValue(value, this.filteredItems);
+        const valueIndex = this.__getItemIndexByValue(this.filteredItems, value);
         if (valueIndex < 0 || !this._getItemLabel(this.filteredItems[valueIndex])) {
           console.warn(
             'Warning: unable to determine the label for the provided `value`. ' +

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

@@ -3,13 +3,13 @@
  * 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 { ComboBoxDataProviderMixinClass } from './vaadin-combo-box-data-provider-mixin.js';
+import type { ComboBoxDefaultItem, ComboBoxMixinClass } from './vaadin-combo-box-mixin.js';
 export {
   ComboBoxDataProvider,
   ComboBoxDataProviderCallback,
@@ -54,6 +54,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 +73,8 @@ export interface ComboBoxLightEventMap<TItem> extends HTMLElementEventMap {
   'value-changed': ComboBoxLightValueChangedEvent;
 
   'selected-item-changed': ComboBoxLightSelectedItemChangedEvent<TItem>;
+
+  validated: ComboBoxLightValidatedEvent;
 }
 
 /**
@@ -114,6 +121,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 {
   /**
@@ -142,7 +150,8 @@ interface ComboBoxLight<TItem = ComboBoxDefaultItem>
     KeyboardMixinClass,
     InputMixinClass,
     DisabledMixinClass,
-    ThemableMixinClass {}
+    ThemableMixinClass,
+    ValidateMixinClass {}
 
 declare global {
   interface HTMLElementTagNameMap {

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

@@ -3,9 +3,12 @@
  * Copyright (c) 2015 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import './vaadin-combo-box-dropdown.js';
+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 { 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';
@@ -54,13 +57,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';
   }
@@ -75,19 +80,16 @@ class ComboBoxLight extends ComboBoxDataProviderMixin(ComboBoxMixin(ThemableMixi
 
       <slot></slot>
 
-      <vaadin-combo-box-dropdown
-        id="dropdown"
-        opened="[[opened]]"
+      <vaadin-combo-box-overlay
+        id="overlay"
+        hidden$="[[_isOverlayHidden(filteredItems, loading)]]"
+        opened="[[_overlayOpened]]"
+        loading$="[[loading]]"
+        theme$="[[_theme]]"
         position-target="[[inputElement]]"
-        restore-focus-on-close="[[__restoreFocusOnClose]]"
+        no-vertical-overlap
         restore-focus-node="[[inputElement]]"
-        renderer="[[renderer]]"
-        _focused-index="[[_focusedIndex]]"
-        _item-id-path="[[itemIdPath]]"
-        _item-label-path="[[itemLabelPath]]"
-        loading="[[loading]]"
-        theme="[[_theme]]"
-      ></vaadin-combo-box-dropdown>
+      ></vaadin-combo-box-overlay>
     `;
   }
 

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;
 
@@ -138,15 +138,15 @@ 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;
 
+  /**
+   * Tag name prefix used by scroller and items.
+   */
+  protected readonly _tagNamePrefix: string;
+
   /**
    * Requests an update for the content of items.
    * While performing the update, it invokes the renderer (passed in the `renderer` property) once an item.
@@ -177,6 +177,4 @@ export declare class ComboBoxMixinClass<TItem> {
   checkValidity(): boolean;
 
   protected _revertInputValue(): void;
-
-  protected _getItemElements(): HTMLElement[];
 }