@vaadin/combo-box 24.4.0-dev.b3e1d14600 → 24.5.0-alpha1

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-dev.b3e1d14600",
+  "version": "24.5.0-alpha1",
   "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-dev.b3e1d14600",
-    "@vaadin/component-base": "24.4.0-dev.b3e1d14600",
-    "@vaadin/field-base": "24.4.0-dev.b3e1d14600",
-    "@vaadin/input-container": "24.4.0-dev.b3e1d14600",
-    "@vaadin/item": "24.4.0-dev.b3e1d14600",
-    "@vaadin/lit-renderer": "24.4.0-dev.b3e1d14600",
-    "@vaadin/overlay": "24.4.0-dev.b3e1d14600",
-    "@vaadin/vaadin-lumo-styles": "24.4.0-dev.b3e1d14600",
-    "@vaadin/vaadin-material-styles": "24.4.0-dev.b3e1d14600",
-    "@vaadin/vaadin-themable-mixin": "24.4.0-dev.b3e1d14600"
+    "@vaadin/a11y-base": "24.5.0-alpha1",
+    "@vaadin/component-base": "24.5.0-alpha1",
+    "@vaadin/field-base": "24.5.0-alpha1",
+    "@vaadin/input-container": "24.5.0-alpha1",
+    "@vaadin/item": "24.5.0-alpha1",
+    "@vaadin/lit-renderer": "24.5.0-alpha1",
+    "@vaadin/overlay": "24.5.0-alpha1",
+    "@vaadin/vaadin-lumo-styles": "24.5.0-alpha1",
+    "@vaadin/vaadin-material-styles": "24.5.0-alpha1",
+    "@vaadin/vaadin-themable-mixin": "24.5.0-alpha1"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
     "@vaadin/testing-helpers": "^0.6.0",
-    "@vaadin/text-field": "24.4.0-dev.b3e1d14600",
+    "@vaadin/text-field": "24.5.0-alpha1",
     "lit": "^3.0.0",
     "sinon": "^13.0.2"
   },
@@ -60,5 +62,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "502d4f5b03f770a83d270d98078cde230254dd0e"
+  "gitHead": "57806caac5468532a3b4e3dbdda730cd0fca193a"
 }

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * Copyright (c) 2017 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { DirectiveResult } from 'lit/directive.js';

package/src/lit/renderer-directives.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * Copyright (c) 2017 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { directive } from 'lit/directive.js';

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2015 - 2023 Vaadin Ltd.
+ * 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';

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

@@ -1,10 +1,8 @@
 /**
  * @license
- * Copyright (c) 2015 - 2023 Vaadin Ltd.
+ * 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';
 
 /**
@@ -23,6 +21,7 @@ export const ComboBoxDataProviderMixin = (superClass) =>
           type: Number,
           value: 50,
           observer: '_pageSizeChanged',
+          sync: true,
         },
 
         /**
@@ -32,6 +31,7 @@ export const ComboBoxDataProviderMixin = (superClass) =>
         size: {
           type: Number,
           observer: '_sizeChanged',
+          sync: true,
         },
 
         /**
@@ -51,6 +51,14 @@ export const ComboBoxDataProviderMixin = (superClass) =>
         dataProvider: {
           type: Object,
           observer: '_dataProviderChanged',
+          sync: true,
+        },
+
+        /** @private */
+        _pendingRequests: {
+          value: () => {
+            return {};
+          },
         },
 
         /** @private */
@@ -73,47 +81,20 @@ 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-received', this.__onDataProviderPageReceived.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);
-
-        // 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)) {
-          return;
-        }
-
         if (index !== undefined) {
-          this._dataProviderController.ensureFlatIndexLoaded(index);
+          const page = this._getPageForIndex(index);
+          if (this._shouldLoadPage(page)) {
+            this._loadPage(page);
+          }
         }
       });
     }
@@ -128,10 +109,11 @@ export const ComboBoxDataProviderMixin = (superClass) =>
       if (this.__previousDataProviderFilter !== filter) {
         this.__previousDataProviderFilter = filter;
 
-        this._keepOverlayOpened = true;
+        this.__keepOverlayOpened = true;
+        this._pendingRequests = {};
         this.size = undefined;
         this.clearCache();
-        this._keepOverlayOpened = false;
+        this.__keepOverlayOpened = false;
       }
     }
 
@@ -150,39 +132,74 @@ export const ComboBoxDataProviderMixin = (superClass) =>
         return;
       }
 
-      if (opened && !this._dataProviderController.hasData) {
-        this._dataProviderController.loadFirstPage();
+      if (opened && this._shouldLoadPage(0)) {
+        this._loadPage(0);
       }
     }
 
     /** @private */
-    _shouldSkipIndex(index, allowedIndexRange, currentScrollerPos) {
-      return (
-        currentScrollerPos !== 0 &&
-        index >= currentScrollerPos - allowedIndexRange &&
-        index <= currentScrollerPos + allowedIndexRange
-      );
-    }
+    _shouldLoadPage(page) {
+      if (this._forceNextRequest) {
+        this._forceNextRequest = false;
+        return true;
+      }
 
-    /** @private */
-    __onDataProviderPageRequested() {
-      this.loading = true;
+      const loadedItem = this.filteredItems[page * this.pageSize];
+      if (loadedItem !== undefined) {
+        return loadedItem instanceof ComboBoxPlaceholder;
+      }
+      return this.size === undefined;
     }
 
     /** @private */
-    __onDataProviderPageReceived() {
-      this.requestContentUpdate();
+    _loadPage(page) {
+      // Make sure same page isn't requested multiple times.
+      if (this._pendingRequests[page] || !this.dataProvider) {
+        return;
+      }
+
+      const params = {
+        page,
+        pageSize: this.pageSize,
+        filter: this.filter,
+      };
+
+      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._isInputFocused()) {
+          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 */
-    __onDataProviderPageLoaded() {
-      if (!this.opened && !this._isInputFocused()) {
-        this._commitValue();
-      }
-
-      if (!this._dataProviderController.isLoading()) {
-        this.loading = false;
-      }
+    _getPageForIndex(index) {
+      return Math.floor(index / this.pageSize);
     }
 
     /**
@@ -193,74 +210,32 @@ export const ComboBoxDataProviderMixin = (superClass) =>
         return;
       }
 
-      this._dataProviderController.clearCache();
-
-      this.requestContentUpdate();
+      this._pendingRequests = {};
+      const filteredItems = [];
+      for (let i = 0; i < (this.size || 0); i++) {
+        filteredItems.push(this.__placeHolder);
+      }
+      this.filteredItems = filteredItems;
 
       if (this._shouldFetchData()) {
-        this._dataProviderController.loadFirstPage();
+        this._forceNextRequest = false;
+        this._loadPage(0);
+      } else {
+        this._forceNextRequest = true;
       }
     }
 
     /** @private */
     _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();
+      const filteredItems = (this.filteredItems || []).slice(0, size);
+      for (let i = 0; i < size; i++) {
+        filteredItems[i] = filteredItems[i] !== undefined ? filteredItems[i] : this.__placeHolder;
       }
-    }
+      this.filteredItems = filteredItems;
 
-    /**
-     * @private
-     * @override
-     */
-    _filteredItemsChanged(items) {
-      if (!this.dataProvider) {
-        return super._filteredItemsChanged(items);
-      }
-
-      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();
-      }
-    }
-
-    /** @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]);
-      }
-
-      super.requestContentUpdate();
+      // Cleans up the redundant pending requests for pages > size
+      // Refers to https://github.com/vaadin/vaadin-flow-components/issues/229
+      this._flushPendingRequests(size);
     }
 
     /** @private */
@@ -269,8 +244,6 @@ export const ComboBoxDataProviderMixin = (superClass) =>
         this.pageSize = oldPageSize;
         throw new Error('`pageSize` value must be an integer > 0');
       }
-
-      this._dataProviderController.setPageSize(pageSize);
       this.clearCache();
     }
 
@@ -280,7 +253,6 @@ export const ComboBoxDataProviderMixin = (superClass) =>
         this.dataProvider = oldDataProvider;
       });
 
-      this._dataProviderController.setDataProvider(dataProvider);
       this.clearCache();
     }
 
@@ -307,4 +279,28 @@ 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-item-mixin.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2015 - 2023 Vaadin Ltd.
+ * 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';

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2015 - 2023 Vaadin Ltd.
+ * Copyright (c) 2015 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
@@ -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-item.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2015 - 2023 Vaadin Ltd.
+ * Copyright (c) 2015 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { DirMixinClass } from '@vaadin/component-base/src/dir-mixin.js';

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2015 - 2023 Vaadin Ltd.
+ * Copyright (c) 2015 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';

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);
+    }
+  };