@vaadin/combo-box 24.4.0-alpha8 → 24.4.0-beta1

package/README.md

@@ -5,7 +5,6 @@ A web component for choosing a value from a filterable list of options presented
 [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)
 
 ```html
 <vaadin-combo-box

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/combo-box",
-  "version": "24.4.0-alpha8",
+  "version": "24.4.0-beta1",
   "publishConfig": {
     "access": "public"
   },
@@ -26,7 +26,9 @@
     "vaadin-*.d.ts",
     "vaadin-*.js",
     "web-types.json",
-    "web-types.lit.json"
+    "web-types.lit.json",
+    "!vaadin-lit-*.d.ts",
+    "!vaadin-lit-*.js"
   ],
   "keywords": [
     "Vaadin",
@@ -38,21 +40,21 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.4.0-alpha8",
-    "@vaadin/component-base": "24.4.0-alpha8",
-    "@vaadin/field-base": "24.4.0-alpha8",
-    "@vaadin/input-container": "24.4.0-alpha8",
-    "@vaadin/item": "24.4.0-alpha8",
-    "@vaadin/lit-renderer": "24.4.0-alpha8",
-    "@vaadin/overlay": "24.4.0-alpha8",
-    "@vaadin/vaadin-lumo-styles": "24.4.0-alpha8",
-    "@vaadin/vaadin-material-styles": "24.4.0-alpha8",
-    "@vaadin/vaadin-themable-mixin": "24.4.0-alpha8"
+    "@vaadin/a11y-base": "24.4.0-beta1",
+    "@vaadin/component-base": "24.4.0-beta1",
+    "@vaadin/field-base": "24.4.0-beta1",
+    "@vaadin/input-container": "24.4.0-beta1",
+    "@vaadin/item": "24.4.0-beta1",
+    "@vaadin/lit-renderer": "24.4.0-beta1",
+    "@vaadin/overlay": "24.4.0-beta1",
+    "@vaadin/vaadin-lumo-styles": "24.4.0-beta1",
+    "@vaadin/vaadin-material-styles": "24.4.0-beta1",
+    "@vaadin/vaadin-themable-mixin": "24.4.0-beta1"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
     "@vaadin/testing-helpers": "^0.6.0",
-    "@vaadin/text-field": "24.4.0-alpha8",
+    "@vaadin/text-field": "24.4.0-beta1",
     "lit": "^3.0.0",
     "sinon": "^13.0.2"
   },
@@ -60,5 +62,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "a26ec541cd39218eb2af1fe5f627c9ddd9f2df69"
+  "gitHead": "504787f741d677467ae93ca7cd31d84489366a9c"
 }

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

@@ -21,6 +21,7 @@ export const ComboBoxDataProviderMixin = (superClass) =>
           type: Number,
           value: 50,
           observer: '_pageSizeChanged',
+          sync: true,
         },
 
         /**
@@ -30,6 +31,7 @@ export const ComboBoxDataProviderMixin = (superClass) =>
         size: {
           type: Number,
           observer: '_sizeChanged',
+          sync: true,
         },
 
         /**
@@ -49,6 +51,7 @@ export const ComboBoxDataProviderMixin = (superClass) =>
         dataProvider: {
           type: Object,
           observer: '_dataProviderChanged',
+          sync: true,
         },
 
         /** @private */
@@ -82,18 +85,11 @@ export const ComboBoxDataProviderMixin = (superClass) =>
     ready() {
       super.ready();
       this._scroller.addEventListener('index-requested', (e) => {
-        const index = e.detail.index;
-        const currentScrollerPos = e.detail.currentScrollerPos;
-        const allowedIndexRange = Math.floor(this.pageSize * 1.5);
-
-        // Ignores the indexes, which are being re-sent during scrolling reset,
-        // if the corresponding page is around the current scroller position.
-        // Otherwise, there might be a last pages duplicates, which cause the
-        // loading indicator hanging and blank items
-        if (this._shouldSkipIndex(index, allowedIndexRange, currentScrollerPos)) {
+        if (!this._shouldFetchData()) {
           return;
         }
 
+        const index = e.detail.index;
         if (index !== undefined) {
           const page = this._getPageForIndex(index);
           if (this._shouldLoadPage(page)) {
@@ -113,19 +109,15 @@ export const ComboBoxDataProviderMixin = (superClass) =>
       if (this.__previousDataProviderFilter !== filter) {
         this.__previousDataProviderFilter = filter;
 
+        this.__keepOverlayOpened = 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;
-
         this.clearCache();
+        this.__keepOverlayOpened = false;
       }
     }
 
-    /** @private */
+    /** @protected */
     _shouldFetchData() {
       if (!this.dataProvider) {
         return false;
@@ -136,23 +128,18 @@ export const ComboBoxDataProviderMixin = (superClass) =>
 
     /** @private */
     _ensureFirstPage(opened) {
+      if (!this._shouldFetchData()) {
+        return;
+      }
+
       if (opened && this._shouldLoadPage(0)) {
         this._loadPage(0);
       }
     }
 
-    /** @private */
-    _shouldSkipIndex(index, allowedIndexRange, currentScrollerPos) {
-      return (
-        currentScrollerPos !== 0 &&
-        index >= currentScrollerPos - allowedIndexRange &&
-        index <= currentScrollerPos + allowedIndexRange
-      );
-    }
-
     /** @private */
     _shouldLoadPage(page) {
-      if (!this.filteredItems || this._forceNextRequest) {
+      if (this._forceNextRequest) {
         this._forceNextRequest = false;
         return true;
       }

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

@@ -60,7 +60,7 @@ export const ComboBoxItemMixin = (superClass) =>
     }
 
     static get observers() {
-      return ['__rendererOrItemChanged(renderer, index, item.*, selected, focused)', '__updateLabel(label, renderer)'];
+      return ['__rendererOrItemChanged(renderer, index, item, selected, focused)', '__updateLabel(label, renderer)'];
     }
 
     static get observedAttributes() {

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

@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright (c) 2015 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { ValidateMixinClass } from '@vaadin/field-base/src/validate-mixin.js';
+import type { ComboBoxDataProviderMixinClass } from './vaadin-combo-box-data-provider-mixin.js';
+import type { ComboBoxMixinClass } from './vaadin-combo-box-mixin.js';
+
+export declare function ComboBoxLightMixin<TItem, T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<ComboBoxDataProviderMixinClass<TItem>> &
+  Constructor<ComboBoxLightMixinClass> &
+  Constructor<ComboBoxMixinClass<TItem>> &
+  Constructor<ValidateMixinClass> &
+  T;
+
+export declare class ComboBoxLightMixinClass {
+  /**
+   * Name of the two-way data-bindable property representing the
+   * value of the custom input field.
+   * @attr {string} attr-for-value
+   */
+  attrForValue: string;
+}

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

@@ -0,0 +1,140 @@
+/**
+ * @license
+ * Copyright (c) 2015 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { dashToCamelCase } from '@polymer/polymer/lib/utils/case-map.js';
+import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
+import { ValidateMixin } from '@vaadin/field-base/src/validate-mixin.js';
+import { ComboBoxDataProviderMixin } from './vaadin-combo-box-data-provider-mixin.js';
+import { ComboBoxMixin } from './vaadin-combo-box-mixin.js';
+
+/**
+ * @polymerMixin
+ * @mixes ComboBoxDataProviderMixin
+ * @mixes ComboBoxMixin
+ * @mixes ValidateMixin
+ */
+export const ComboBoxLightMixin = (superClass) =>
+  class ComboBoxLightMixinClass extends ComboBoxDataProviderMixin(ComboBoxMixin(ValidateMixin(superClass))) {
+    static get properties() {
+      return {
+        /**
+         * Name of the two-way data-bindable property representing the
+         * value of the custom input field.
+         * @attr {string} attr-for-value
+         * @type {string}
+         */
+        attrForValue: {
+          type: String,
+          value: 'value',
+        },
+      };
+    }
+
+    /**
+     * Used by `InputControlMixin` as a reference to the clear button element.
+     * @protected
+     * @return {!HTMLElement}
+     */
+    get clearElement() {
+      return this.querySelector('.clear-button');
+    }
+
+    /**
+     * Override this getter from `InputMixin` to allow using
+     * an arbitrary property name instead of `value`
+     * for accessing the input element's value.
+     *
+     * @protected
+     * @override
+     * @return {string}
+     */
+    get _inputElementValueProperty() {
+      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 */
+    ready() {
+      super.ready();
+
+      this._toggleElement = this.querySelector('.toggle-button');
+
+      // Wait until the slotted input DOM is ready
+      afterNextRender(this, () => {
+        this._setInputElement(this.querySelector('vaadin-text-field,.input'));
+        this._revertInputValue();
+      });
+    }
+
+    /**
+     * Returns true if the current input value satisfies all constraints (if any).
+     * @return {boolean}
+     */
+    checkValidity() {
+      if (this.inputElement && this.inputElement.validate) {
+        return this.inputElement.validate();
+      }
+      return super.checkValidity();
+    }
+
+    /**
+     * @protected
+     * @override
+     */
+    _isClearButton(event) {
+      return (
+        super._isClearButton(event) ||
+        (event.type === 'input' && !event.isTrusted) || // Fake input event dispatched by clear button
+        event.composedPath()[0].getAttribute('part') === 'clear-button'
+      );
+    }
+
+    /**
+     * @protected
+     * @override
+     */
+    _shouldRemoveFocus(event) {
+      const isBlurringControlButtons = event.target === this._toggleElement || event.target === this.clearElement;
+      const isFocusingInputElement = event.relatedTarget && event.relatedTarget === this._nativeInput;
+
+      // prevent closing the overlay when moving focus from clear or toggle buttons to the internal input
+      if (isBlurringControlButtons && isFocusingInputElement) {
+        return false;
+      }
+
+      return super._shouldRemoveFocus(event);
+    }
+  };

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

@@ -11,6 +11,7 @@ import type { ValidateMixinClass } from '@vaadin/field-base/src/validate-mixin.j
 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 { ComboBoxLightMixinClass } from './vaadin-combo-box-light-mixin.js';
 import type { ComboBoxDefaultItem, ComboBoxMixinClass } from './vaadin-combo-box-mixin.js';
 export {
   ComboBoxDataProvider,
@@ -126,13 +127,6 @@ export interface ComboBoxLightEventMap<TItem> extends HTMLElementEventMap {
  * @fires {CustomEvent} validated - Fired whenever the field is validated.
  */
 declare class ComboBoxLight<TItem = ComboBoxDefaultItem> extends HTMLElement {
-  /**
-   * Name of the two-way data-bindable property representing the
-   * value of the custom input field.
-   * @attr {string} attr-for-value
-   */
-  attrForValue: string;
-
   addEventListener<K extends keyof ComboBoxLightEventMap<TItem>>(
     type: K,
     listener: (this: ComboBoxLight<TItem>, ev: ComboBoxLightEventMap<TItem>[K]) => void,
@@ -148,6 +142,7 @@ declare class ComboBoxLight<TItem = ComboBoxDefaultItem> extends HTMLElement {
 
 interface ComboBoxLight<TItem = ComboBoxDefaultItem>
   extends ComboBoxDataProviderMixinClass<TItem>,
+    ComboBoxLightMixinClass,
     ComboBoxMixinClass<TItem>,
     KeyboardMixinClass,
     InputMixinClass,

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

@@ -6,14 +6,10 @@
 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 { defineCustomElement } from '@vaadin/component-base/src/define.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';
+import { ComboBoxLightMixin } from './vaadin-combo-box-light-mixin.js';
 
 /**
  * `<vaadin-combo-box-light>` is a customizable version of the `<vaadin-combo-box>` providing
@@ -63,12 +59,10 @@ import { ComboBoxMixin } from './vaadin-combo-box-mixin.js';
  *
  * @customElement
  * @extends HTMLElement
- * @mixes ComboBoxDataProviderMixin
- * @mixes ComboBoxMixin
+ * @mixes ComboBoxLightMixin
  * @mixes ThemableMixin
- * @mixes ValidateMixin
  */
-class ComboBoxLight extends ComboBoxDataProviderMixin(ComboBoxMixin(ValidateMixin(ThemableMixin(PolymerElement)))) {
+class ComboBoxLight extends ComboBoxLightMixin(ThemableMixin(PolymerElement)) {
   static get is() {
     return 'vaadin-combo-box-light';
   }
@@ -94,124 +88,6 @@ class ComboBoxLight extends ComboBoxDataProviderMixin(ComboBoxMixin(ValidateMixi
       ></vaadin-combo-box-overlay>
     `;
   }
-
-  static get properties() {
-    return {
-      /**
-       * Name of the two-way data-bindable property representing the
-       * value of the custom input field.
-       * @attr {string} attr-for-value
-       * @type {string}
-       */
-      attrForValue: {
-        type: String,
-        value: 'value',
-      },
-    };
-  }
-
-  /**
-   * Used by `InputControlMixin` as a reference to the clear button element.
-   * @protected
-   * @return {!HTMLElement}
-   */
-  get clearElement() {
-    return this.querySelector('.clear-button');
-  }
-
-  /**
-   * Override this getter from `InputMixin` to allow using
-   * an arbitrary property name instead of `value`
-   * for accessing the input element's value.
-   *
-   * @protected
-   * @override
-   * @return {string}
-   */
-  get _inputElementValueProperty() {
-    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 */
-  ready() {
-    super.ready();
-
-    this._toggleElement = this.querySelector('.toggle-button');
-
-    // Wait until the slotted input DOM is ready
-    afterNextRender(this, () => {
-      this._setInputElement(this.querySelector('vaadin-text-field,.input'));
-      this._revertInputValue();
-    });
-  }
-
-  /**
-   * Returns true if the current input value satisfies all constraints (if any).
-   * @return {boolean}
-   */
-  checkValidity() {
-    if (this.inputElement && this.inputElement.validate) {
-      return this.inputElement.validate();
-    }
-    return super.checkValidity();
-  }
-
-  /** @protected */
-  _isClearButton(event) {
-    return (
-      super._isClearButton(event) ||
-      (event.type === 'input' && !event.isTrusted) || // Fake input event dispatched by clear button
-      event.composedPath()[0].getAttribute('part') === 'clear-button'
-    );
-  }
-
-  /**
-   * @protected
-   * @override
-   */
-  _shouldRemoveFocus(event) {
-    const isBlurringControlButtons = event.target === this._toggleElement || event.target === this.clearElement;
-    const isFocusingInputElement = event.relatedTarget && event.relatedTarget === this._nativeInput;
-
-    // prevent closing the overlay when moving focus from clear or toggle buttons to the internal input
-    if (isBlurringControlButtons && isFocusingInputElement) {
-      return false;
-    }
-
-    return super._shouldRemoveFocus(event);
-  }
 }
 
 defineCustomElement(ComboBoxLight);