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

package/src/vaadin-combo-box-light.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 { DisabledMixinClass } from '@vaadin/a11y-base/src/disabled-mixin.js';
@@ -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

@@ -1,19 +1,15 @@
 /**
  * @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 './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);

package/src/vaadin-combo-box-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';
@@ -64,6 +64,14 @@ export declare class ComboBoxMixinClass<TItem> {
    */
   items: TItem[] | undefined;
 
+  /**
+   * A function used to generate CSS class names for dropdown
+   * items based on the item. The return value should be the
+   * generated class name as a string, or multiple class names
+   * separated by whitespace characters.
+   */
+  itemClassNameGenerator: (item: TItem) => string;
+
   /**
    * If `true`, the user can input a value that is not present in the items list.
    * `value` property will be set to the input value in this case.

package/src/vaadin-combo-box-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/
  */
 import { DisabledMixin } from '@vaadin/a11y-base/src/disabled-mixin.js';
@@ -71,6 +71,7 @@ export const ComboBoxMixin = (subclass) =>
           notify: true,
           value: false,
           reflectToAttribute: true,
+          sync: true,
           observer: '_openedChanged',
         },
 
@@ -80,6 +81,7 @@ export const ComboBoxMixin = (subclass) =>
          */
         autoOpenDisabled: {
           type: Boolean,
+          sync: true,
         },
 
         /**
@@ -104,7 +106,10 @@ export const ComboBoxMixin = (subclass) =>
          *   - `model.item` The item.
          * @type {ComboBoxRenderer | undefined}
          */
-        renderer: Function,
+        renderer: {
+          type: Object,
+          sync: true,
+        },
 
         /**
          * A full set of items to filter the visible options from.
@@ -113,6 +118,7 @@ export const ComboBoxMixin = (subclass) =>
          */
         items: {
           type: Array,
+          sync: true,
           observer: '_itemsChanged',
         },
 
@@ -138,6 +144,7 @@ export const ComboBoxMixin = (subclass) =>
         filteredItems: {
           type: Array,
           observer: '_filteredItemsChanged',
+          sync: true,
         },
 
         /**
@@ -154,6 +161,7 @@ export const ComboBoxMixin = (subclass) =>
           type: Boolean,
           value: false,
           reflectToAttribute: true,
+          sync: true,
         },
 
         /**
@@ -164,6 +172,7 @@ export const ComboBoxMixin = (subclass) =>
           type: Number,
           observer: '_focusedIndexChanged',
           value: -1,
+          sync: true,
         },
 
         /**
@@ -174,6 +183,7 @@ export const ComboBoxMixin = (subclass) =>
           type: String,
           value: '',
           notify: true,
+          sync: true,
         },
 
         /**
@@ -183,6 +193,17 @@ export const ComboBoxMixin = (subclass) =>
         selectedItem: {
           type: Object,
           notify: true,
+          sync: true,
+        },
+
+        /**
+         * A function used to generate CSS class names for dropdown
+         * items based on the item. The return value should be the
+         * generated class name as a string, or multiple class names
+         * separated by whitespace characters.
+         */
+        itemClassNameGenerator: {
+          type: Object,
         },
 
         /**
@@ -199,6 +220,7 @@ export const ComboBoxMixin = (subclass) =>
           type: String,
           value: 'label',
           observer: '_itemLabelPathChanged',
+          sync: true,
         },
 
         /**
@@ -214,6 +236,7 @@ export const ComboBoxMixin = (subclass) =>
         itemValuePath: {
           type: String,
           value: 'value',
+          sync: true,
         },
 
         /**
@@ -223,7 +246,10 @@ export const ComboBoxMixin = (subclass) =>
          * `dataProvider` callback).
          * @attr {string} item-id-path
          */
-        itemIdPath: String,
+        itemIdPath: {
+          type: String,
+          sync: true,
+        },
 
         /**
          * @type {!HTMLElement | undefined}
@@ -240,27 +266,38 @@ export const ComboBoxMixin = (subclass) =>
          */
         _dropdownItems: {
           type: Array,
+          sync: true,
         },
 
         /** @private */
         _closeOnBlurIsPrevented: Boolean,
 
         /** @private */
-        _scroller: Object,
+        _scroller: {
+          type: Object,
+          sync: true,
+        },
 
         /** @private */
         _overlayOpened: {
           type: Boolean,
+          sync: true,
           observer: '_overlayOpenedChanged',
         },
+
+        /** @private */
+        __keepOverlayOpened: {
+          type: Boolean,
+          sync: true,
+        },
       };
     }
 
     static get observers() {
       return [
         '_selectedItemChanged(selectedItem, itemValuePath, itemLabelPath)',
-        '_openedOrItemsChanged(opened, _dropdownItems, loading, _keepOverlayOpened)',
-        '_updateScroller(_scroller, _dropdownItems, opened, loading, selectedItem, itemIdPath, _focusedIndex, renderer, theme)',
+        '_openedOrItemsChanged(opened, _dropdownItems, loading, __keepOverlayOpened)',
+        '_updateScroller(_scroller, _dropdownItems, opened, loading, selectedItem, itemIdPath, _focusedIndex, renderer, _theme, itemClassNameGenerator)',
       ];
     }
 
@@ -413,6 +450,18 @@ export const ComboBoxMixin = (subclass) =>
       }
     }
 
+    /**
+     * Override LitElement lifecycle callback to handle filter property change.
+     * @param {Object} props
+     */
+    updated(props) {
+      super.updated(props);
+
+      if (props.has('filter')) {
+        this._filterChanged(this.filter);
+      }
+    }
+
     /** @private */
     _initOverlay() {
       const overlay = this.$.overlay;
@@ -441,32 +490,41 @@ export const ComboBoxMixin = (subclass) =>
      * @protected
      */
     _initScroller(host) {
-      const scrollerTag = `${this._tagNamePrefix}-scroller`;
+      const scroller = document.createElement(`${this._tagNamePrefix}-scroller`);
+
+      scroller.owner = host || this;
+      scroller.getItemLabel = this._getItemLabel.bind(this);
+      scroller.addEventListener('selection-changed', this._boundOverlaySelectedItemChanged);
 
       const overlay = this._overlayElement;
 
       overlay.renderer = (root) => {
-        if (!root.firstChild) {
-          root.appendChild(document.createElement(scrollerTag));
+        if (!root.innerHTML) {
+          root.appendChild(scroller);
         }
       };
 
       // Ensure the scroller is rendered
       overlay.requestContentUpdate();
 
-      const scroller = overlay.querySelector(scrollerTag);
-
-      scroller.owner = host || this;
-      scroller.getItemLabel = this._getItemLabel.bind(this);
-      scroller.addEventListener('selection-changed', this._boundOverlaySelectedItemChanged);
-
       // Trigger the observer to set properties
       this._scroller = scroller;
     }
 
     /** @private */
     // eslint-disable-next-line max-params
-    _updateScroller(scroller, items, opened, loading, selectedItem, itemIdPath, focusedIndex, renderer, theme) {
+    _updateScroller(
+      scroller,
+      items,
+      opened,
+      loading,
+      selectedItem,
+      itemIdPath,
+      focusedIndex,
+      renderer,
+      theme,
+      itemClassNameGenerator,
+    ) {
       if (scroller) {
         if (opened) {
           scroller.style.maxHeight =
@@ -482,7 +540,19 @@ export const ComboBoxMixin = (subclass) =>
           focusedIndex,
           renderer,
           theme,
+          itemClassNameGenerator,
         });
+
+        // NOTE: in PolylitMixin, setProperties() waits for `hasUpdated` to be set.
+        // This means for the first opening, properties won't be set synchronously.
+        // Call `performUpdate()` in this case to mimic the Polymer version logic.
+        if (scroller.performUpdate && !scroller.hasUpdated) {
+          try {
+            scroller.performUpdate();
+          } catch (_) {
+            // Suppress errors in synchronous tests for pre-opened combo-box.
+          }
+        }
       }
     }
 
@@ -490,7 +560,7 @@ export const ComboBoxMixin = (subclass) =>
     _openedOrItemsChanged(opened, items, loading, keepOverlayOpened) {
       // Close the overlay if there are no items to display.
       // See https://github.com/vaadin/vaadin-combo-box/pull/964
-      this._overlayOpened = !!(opened && (keepOverlayOpened || loading || (items && items.length)));
+      this._overlayOpened = opened && (keepOverlayOpened || loading || !!(items && items.length));
     }
 
     /** @private */
@@ -542,7 +612,6 @@ export const ComboBoxMixin = (subclass) =>
       }
 
       if (opened) {
-        this._openedWithFocusRing = this.hasAttribute('focus-ring');
         // For touch devices, we don't want to popup virtual keyboard
         // unless input element is explicitly focused by the user.
         if (!this._isInputFocused() && !isTouch) {
@@ -554,9 +623,6 @@ export const ComboBoxMixin = (subclass) =>
         this._overlayElement.restoreFocusOnClose = true;
       } else {
         this._onClosed();
-        if (this._openedWithFocusRing && this._isInputFocused()) {
-          this.setAttribute('focus-ring', '');
-        }
       }
 
       const input = this._nativeInput;
@@ -772,11 +838,7 @@ export const ComboBoxMixin = (subclass) =>
       // Do not commit value when custom values are disallowed and input value is not a valid option
       // also stop propagation of the event, otherwise the user could submit a form while the input
       // still contains an invalid value
-      const hasInvalidOption =
-        this._focusedIndex < 0 &&
-        this._inputElementValue !== '' &&
-        this._getItemLabel(this.selectedItem) !== this._inputElementValue;
-      if (!this.allowCustomValue && hasInvalidOption) {
+      if (!this._hasValidInputValue()) {
         // Do not submit the surrounding form.
         e.preventDefault();
         // Do not trigger global listeners
@@ -796,6 +858,18 @@ export const ComboBoxMixin = (subclass) =>
       this._closeOrCommit();
     }
 
+    /**
+     * @protected
+     */
+    _hasValidInputValue() {
+      const hasInvalidOption =
+        this._focusedIndex < 0 &&
+        this._inputElementValue !== '' &&
+        this._getItemLabel(this.selectedItem) !== this._inputElementValue;
+
+      return this.allowCustomValue || !hasInvalidOption;
+    }
+
     /**
      * Override an event listener from `KeyboardMixin`.
      * Do not call `super` in order to override clear
@@ -867,6 +941,15 @@ export const ComboBoxMixin = (subclass) =>
       this._detectAndDispatchChange();
     }
 
+    /**
+     * Clears the current filter. Should be used instead of setting the property
+     * directly in order to allow overriding this in multi-select combo box.
+     * @protected
+     */
+    _clearFilter() {
+      this.filter = '';
+    }
+
     /**
      * Reverts back to original value.
      */
@@ -938,7 +1021,7 @@ export const ComboBoxMixin = (subclass) =>
           this.value = this._getItemValue(itemMatchingInputValue);
         } else {
           // Revert the input value
-          this._inputElementValue = this.selectedItem ? this._getItemLabel(this.selectedItem) : this.value || '';
+          this._revertInputValueToValue();
         }
       }
 
@@ -946,7 +1029,7 @@ export const ComboBoxMixin = (subclass) =>
 
       this._clearSelectionRange();
 
-      this.filter = '';
+      this._clearFilter();
     }
 
     /**
@@ -1087,7 +1170,7 @@ export const ComboBoxMixin = (subclass) =>
         this.selectedItem = null;
       }
 
-      this.filter = '';
+      this._clearFilter();
 
       // In the next _detectAndDispatchChange() call, the change detection should pass
       this._lastCommittedValue = undefined;
@@ -1113,10 +1196,6 @@ export const ComboBoxMixin = (subclass) =>
         this.items = oldItems;
       });
 
-      if (this.dataProvider) {
-        return;
-      }
-
       if (items) {
         this.filteredItems = items.slice(0);
       } else if (oldItems) {

package/src/vaadin-combo-box-overlay-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-overlay-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/
  */
 import { PositionMixin } from '@vaadin/overlay/src/vaadin-overlay-position-mixin.js';

package/src/vaadin-combo-box-overlay.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 { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';

package/src/vaadin-combo-box-overlay.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-placeholder.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/
  */
 

package/src/vaadin-combo-box-scroller-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';