@vaadin/combo-box 24.4.0-alpha9 → 24.4.0-dev.4b20a0c55

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-alpha9",
+  "version": "24.4.0-dev.4b20a0c55",
   "publishConfig": {
     "access": "public"
   },
@@ -38,21 +38,21 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.4.0-alpha9",
-    "@vaadin/component-base": "24.4.0-alpha9",
-    "@vaadin/field-base": "24.4.0-alpha9",
-    "@vaadin/input-container": "24.4.0-alpha9",
-    "@vaadin/item": "24.4.0-alpha9",
-    "@vaadin/lit-renderer": "24.4.0-alpha9",
-    "@vaadin/overlay": "24.4.0-alpha9",
-    "@vaadin/vaadin-lumo-styles": "24.4.0-alpha9",
-    "@vaadin/vaadin-material-styles": "24.4.0-alpha9",
-    "@vaadin/vaadin-themable-mixin": "24.4.0-alpha9"
+    "@vaadin/a11y-base": "24.4.0-dev.4b20a0c55",
+    "@vaadin/component-base": "24.4.0-dev.4b20a0c55",
+    "@vaadin/field-base": "24.4.0-dev.4b20a0c55",
+    "@vaadin/input-container": "24.4.0-dev.4b20a0c55",
+    "@vaadin/item": "24.4.0-dev.4b20a0c55",
+    "@vaadin/lit-renderer": "24.4.0-dev.4b20a0c55",
+    "@vaadin/overlay": "24.4.0-dev.4b20a0c55",
+    "@vaadin/vaadin-lumo-styles": "24.4.0-dev.4b20a0c55",
+    "@vaadin/vaadin-material-styles": "24.4.0-dev.4b20a0c55",
+    "@vaadin/vaadin-themable-mixin": "24.4.0-dev.4b20a0c55"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
     "@vaadin/testing-helpers": "^0.6.0",
-    "@vaadin/text-field": "24.4.0-alpha9",
+    "@vaadin/text-field": "24.4.0-dev.4b20a0c55",
     "lit": "^3.0.0",
     "sinon": "^13.0.2"
   },
@@ -60,5 +60,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "effb81abe3c6283a6ec620cc0cee56069af58226"
+  "gitHead": "b79c81e5f6fd24684b34ee0dc434e94d943ea13e"
 }

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

@@ -3,6 +3,8 @@
  * Copyright (c) 2015 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { DataProviderController } from '@vaadin/component-base/src/data-provider-controller/data-provider-controller.js';
+import { get } from '@vaadin/component-base/src/path-utils.js';
 import { ComboBoxPlaceholder } from './vaadin-combo-box-placeholder.js';
 
 /**
@@ -51,13 +53,6 @@ export const ComboBoxDataProviderMixin = (superClass) =>
           observer: '_dataProviderChanged',
         },
 
-        /** @private */
-        _pendingRequests: {
-          value: () => {
-            return {};
-          },
-        },
-
         /** @private */
         __placeHolder: {
           value: new ComboBoxPlaceholder(),
@@ -67,6 +62,12 @@ export const ComboBoxDataProviderMixin = (superClass) =>
         __previousDataProviderFilter: {
           type: String,
         },
+
+        /** @private */
+        _hasData: {
+          type: Boolean,
+          value: false,
+        },
       };
     }
 
@@ -78,10 +79,32 @@ export const ComboBoxDataProviderMixin = (superClass) =>
       ];
     }
 
+    constructor() {
+      super();
+
+      /** @type {DataProviderController} */
+      this._dataProviderController = new DataProviderController(this, {
+        size: this.size,
+        pageSize: this.pageSize,
+        getItemId: (item) => get(this.itemIdPath, item),
+        placeholder: this.__placeHolder,
+        dataProvider: this.dataProvider ? this.dataProvider.bind(this) : null,
+        dataProviderParams: () => ({ filter: this.filter }),
+      });
+    }
+
     /** @protected */
     ready() {
       super.ready();
+
+      this._dataProviderController.addEventListener('page-requested', this.__onDataProviderPageRequested.bind(this));
+      this._dataProviderController.addEventListener('page-loaded', this.__onDataProviderPageLoaded.bind(this));
+
       this._scroller.addEventListener('index-requested', (e) => {
+        if (!this._shouldFetchData()) {
+          return;
+        }
+
         const index = e.detail.index;
         const currentScrollerPos = e.detail.currentScrollerPos;
         const allowedIndexRange = Math.floor(this.pageSize * 1.5);
@@ -95,10 +118,7 @@ export const ComboBoxDataProviderMixin = (superClass) =>
         }
 
         if (index !== undefined) {
-          const page = this._getPageForIndex(index);
-          if (this._shouldLoadPage(page)) {
-            this._loadPage(page);
-          }
+          this._dataProviderController.ensureFlatIndexLoaded(index);
         }
       });
     }
@@ -113,19 +133,14 @@ export const ComboBoxDataProviderMixin = (superClass) =>
       if (this.__previousDataProviderFilter !== filter) {
         this.__previousDataProviderFilter = filter;
 
-        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._keepOverlayOpened = true;
         this.size = undefined;
-
         this.clearCache();
+        this._keepOverlayOpened = false;
       }
     }
 
-    /** @private */
+    /** @protected */
     _shouldFetchData() {
       if (!this.dataProvider) {
         return false;
@@ -136,8 +151,12 @@ export const ComboBoxDataProviderMixin = (superClass) =>
 
     /** @private */
     _ensureFirstPage(opened) {
-      if (opened && this._shouldLoadPage(0)) {
-        this._loadPage(0);
+      if (!this._shouldFetchData()) {
+        return;
+      }
+
+      if (opened && !this._hasData) {
+        this._dataProviderController.loadFirstPage();
       }
     }
 
@@ -151,104 +170,99 @@ export const ComboBoxDataProviderMixin = (superClass) =>
     }
 
     /** @private */
-    _shouldLoadPage(page) {
-      if (!this.filteredItems || this._forceNextRequest) {
-        this._forceNextRequest = false;
-        return true;
-      }
-
-      const loadedItem = this.filteredItems[page * this.pageSize];
-      if (loadedItem !== undefined) {
-        return loadedItem instanceof ComboBoxPlaceholder;
-      }
-      return this.size === undefined;
+    __onDataProviderPageRequested() {
+      this.loading = true;
     }
 
     /** @private */
-    _loadPage(page) {
-      // Make sure same page isn't requested multiple times.
-      if (this._pendingRequests[page] || !this.dataProvider) {
-        return;
-      }
+    __onDataProviderPageLoaded() {
+      this._hasData = true;
 
-      const params = {
-        page,
-        pageSize: this.pageSize,
-        filter: this.filter,
-      };
-
-      const callback = (items, size) => {
-        if (this._pendingRequests[page] !== callback) {
-          return;
-        }
+      this.requestContentUpdate();
 
-        const filteredItems = this.filteredItems ? [...this.filteredItems] : [];
-        filteredItems.splice(params.page * params.pageSize, items.length, ...items);
-        this.filteredItems = filteredItems;
+      if (!this.opened && !this._isInputFocused()) {
+        this._commitValue();
+      }
+    }
 
-        if (!this.opened && !this._isInputFocused()) {
-          this._commitValue();
-        }
+    /**
+     * Clears the cached pages and reloads data from dataprovider when needed.
+     */
+    clearCache() {
+      if (!this.dataProvider) {
+        return;
+      }
 
-        if (size !== undefined) {
-          this.size = size;
-        }
+      this._dataProviderController.clearCache();
 
-        delete this._pendingRequests[page];
+      this._hasData = false;
 
-        if (Object.keys(this._pendingRequests).length === 0) {
-          this.loading = false;
-        }
-      };
+      this.requestContentUpdate();
 
-      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);
+      if (this._shouldFetchData()) {
+        this._dataProviderController.loadFirstPage();
+      }
     }
 
     /** @private */
-    _getPageForIndex(index) {
-      return Math.floor(index / this.pageSize);
+    _sizeChanged(size = 0) {
+      const { rootCache } = this._dataProviderController;
+      // When the size update originates from the developer,
+      // sync the new size with the controller and trigger
+      // a content update to re-render the scroller.
+      if (rootCache.size !== size) {
+        rootCache.size = size;
+        this.requestContentUpdate();
+      }
     }
 
     /**
-     * Clears the cached pages and reloads data from dataprovider when needed.
+     * @private
+     * @override
      */
-    clearCache() {
+    _filteredItemsChanged(items) {
       if (!this.dataProvider) {
-        return;
+        return super._filteredItemsChanged(items);
       }
 
-      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;
+      const { rootCache } = this._dataProviderController;
+      // When the items update originates from the developer,
+      // sync the new items with the controller and trigger
+      // a content update to re-render the scroller.
+      if (rootCache.items !== items) {
+        rootCache.items = items;
+        this.requestContentUpdate();
       }
     }
 
-    /** @private */
-    _sizeChanged(size = 0) {
-      const filteredItems = (this.filteredItems || []).slice(0, size);
-      for (let i = 0; i < size; i++) {
-        filteredItems[i] = filteredItems[i] !== undefined ? filteredItems[i] : this.__placeHolder;
+    /** @override */
+    requestContentUpdate() {
+      if (this.dataProvider) {
+        const { rootCache } = this._dataProviderController;
+
+        // Sync the controller's size with the component.
+        // They can be out of sync after, for example,
+        // the controller received new data.
+        if ((this.size || 0) !== rootCache.size) {
+          this.size = rootCache.size;
+        }
+
+        // Sync the controller's items with the component.
+        // They can be out of sync after, for example,
+        // the controller received new data.
+        if (this.filteredItems !== rootCache.items) {
+          this.filteredItems = rootCache.items;
+        }
+
+        // Sync the controller's loading state with the component.
+        this.loading = this._dataProviderController.isLoading();
+
+        // Set a copy of the controller's items as the dropdown items
+        // to trigger an update of the focused index in _setDropdownItems.
+        this._setDropdownItems([...this.filteredItems]);
       }
-      this.filteredItems = filteredItems;
 
-      // Cleans up the redundant pending requests for pages > size
-      // Refers to https://github.com/vaadin/vaadin-flow-components/issues/229
-      this._flushPendingRequests(size);
+      super.requestContentUpdate();
     }
 
     /** @private */
@@ -257,6 +271,8 @@ export const ComboBoxDataProviderMixin = (superClass) =>
         this.pageSize = oldPageSize;
         throw new Error('`pageSize` value must be an integer > 0');
       }
+
+      this._dataProviderController.setPageSize(pageSize);
       this.clearCache();
     }
 
@@ -266,6 +282,7 @@ export const ComboBoxDataProviderMixin = (superClass) =>
         this.dataProvider = oldDataProvider;
       });
 
+      this._dataProviderController.setDataProvider(dataProvider);
       this.clearCache();
     }
 
@@ -274,8 +291,6 @@ export const ComboBoxDataProviderMixin = (superClass) =>
       if (this.items !== undefined && this.dataProvider !== undefined) {
         restoreOldValueCallback();
         throw new Error('Using `items` and `dataProvider` together is not supported');
-      } else if (this.dataProvider && !this.filteredItems) {
-        this.filteredItems = [];
       }
     }
 
@@ -294,28 +309,4 @@ export const ComboBoxDataProviderMixin = (superClass) =>
         }
       }
     }
-
-    /**
-     * This method cleans up the page callbacks which refers to the
-     * non-existing pages, i.e. which item indexes are greater than the
-     * changed size.
-     * This case is basically happens when:
-     * 1. Users scroll fast to the bottom and combo box generates the
-     * redundant page request/callback
-     * 2. Server side uses undefined size lazy loading and suddenly reaches
-     * the exact size which is on the range edge
-     * (for default page size = 50, it will be 100, 200, 300, ...).
-     * @param size the new size of items
-     * @private
-     */
-    _flushPendingRequests(size) {
-      if (this._pendingRequests) {
-        const lastPage = Math.ceil(size / this.pageSize);
-        Object.entries(this._pendingRequests).forEach(([page, callback]) => {
-          if (parseInt(page) >= lastPage) {
-            callback([], size);
-          }
-        });
-      }
-    }
   };

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,