@vaadin/combo-box 23.1.2 → 23.2.0-alpha3

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

@@ -52,9 +52,7 @@ export class ComboBoxOverlay extends PositionMixin(OverlayElement) {
   connectedCallback() {
     super.connectedCallback();
 
-    const dropdown = this.__dataHost;
-    const comboBox = dropdown && dropdown.getRootNode().host;
-    this._comboBox = comboBox;
+    const comboBox = this._comboBox;
 
     const hostDir = comboBox && comboBox.getAttribute('dir');
     if (hostDir) {

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

@@ -4,6 +4,7 @@
  * 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';
+import { generateUniqueId } from '@vaadin/component-base/src/unique-id-utils.js';
 import { Virtualizer } from '@vaadin/component-base/src/virtualizer.js';
 import { ComboBoxPlaceholder } from './vaadin-combo-box-placeholder.js';
 
@@ -90,6 +91,7 @@ export class ComboBoxScroller extends PolymerElement {
        */
       selectedItem: {
         type: Object,
+        observer: '__selectedItemChanged',
       },
 
       /**
@@ -145,6 +147,9 @@ export class ComboBoxScroller extends PolymerElement {
   ready() {
     super.ready();
 
+    // Ensure every instance has unique ID
+    this.id = `${this.localName}-${generateUniqueId()}`;
+
     // Allow extensions to customize tag name for the items
     this.__hostTagName = this.constructor.is.replace('-scroller', '');
 
@@ -218,7 +223,7 @@ export class ComboBoxScroller extends PolymerElement {
 
   /** @private */
   __isItemFocused(focusedIndex, itemIndex) {
-    return focusedIndex === itemIndex;
+    return !this.loading && focusedIndex === itemIndex;
   }
 
   /** @private */
@@ -243,12 +248,19 @@ export class ComboBoxScroller extends PolymerElement {
   }
 
   /** @private */
-  __loadingChanged(loading) {
-    if (this.__virtualizer && !loading) {
+  __loadingChanged() {
+    if (this.__virtualizer) {
       setTimeout(() => this.requestContentUpdate());
     }
   }
 
+  /** @private */
+  __selectedItemChanged() {
+    if (this.__virtualizer) {
+      this.requestContentUpdate();
+    }
+  }
+
   /** @private */
   __focusedIndexChanged(index, oldIndex) {
     if (!this.__virtualizer) {

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

@@ -3,24 +3,24 @@
  * Copyright (c) 2015 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
-import { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
-import { ElementMixinClass } from '@vaadin/component-base/src/element-mixin.js';
-import { FocusMixinClass } from '@vaadin/component-base/src/focus-mixin.js';
-import { KeyboardMixinClass } from '@vaadin/component-base/src/keyboard-mixin.js';
-import { DelegateFocusMixinClass } from '@vaadin/field-base/src/delegate-focus-mixin.js';
-import { DelegateStateMixinClass } from '@vaadin/field-base/src/delegate-state-mixin.js';
-import { FieldMixinClass } from '@vaadin/field-base/src/field-mixin.js';
-import { InputConstraintsMixinClass } from '@vaadin/field-base/src/input-constraints-mixin.js';
-import { InputControlMixinClass } from '@vaadin/field-base/src/input-control-mixin.js';
-import { InputMixinClass } from '@vaadin/field-base/src/input-mixin.js';
-import { LabelMixinClass } from '@vaadin/field-base/src/label-mixin.js';
-import { PatternMixinClass } from '@vaadin/field-base/src/pattern-mixin.js';
-import { ValidateMixinClass } from '@vaadin/field-base/src/validate-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 { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
+import type { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
+import type { ElementMixinClass } from '@vaadin/component-base/src/element-mixin.js';
+import type { FocusMixinClass } from '@vaadin/component-base/src/focus-mixin.js';
+import type { KeyboardMixinClass } from '@vaadin/component-base/src/keyboard-mixin.js';
+import type { DelegateFocusMixinClass } from '@vaadin/field-base/src/delegate-focus-mixin.js';
+import type { DelegateStateMixinClass } from '@vaadin/field-base/src/delegate-state-mixin.js';
+import type { FieldMixinClass } from '@vaadin/field-base/src/field-mixin.js';
+import type { InputConstraintsMixinClass } from '@vaadin/field-base/src/input-constraints-mixin.js';
+import type { InputControlMixinClass } from '@vaadin/field-base/src/input-control-mixin.js';
+import type { InputMixinClass } from '@vaadin/field-base/src/input-mixin.js';
+import type { LabelMixinClass } from '@vaadin/field-base/src/label-mixin.js';
+import type { PatternMixinClass } from '@vaadin/field-base/src/pattern-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 { ComboBoxMixinClass } from './vaadin-combo-box-mixin.js';
+import type { ComboBoxDefaultItem } from './vaadin-combo-box-mixin.js';
 export {
   ComboBoxDataProvider,
   ComboBoxDataProviderCallback,
@@ -65,6 +65,11 @@ export type ComboBoxFilterChangedEvent = CustomEvent<{ value: string }>;
  */
 export type ComboBoxSelectedItemChangedEvent<TItem> = CustomEvent<{ value: TItem | null | undefined }>;
 
+/**
+ * Fired whenever the field is validated.
+ */
+export type ComboBoxValidatedEvent = CustomEvent<{ valid: boolean }>;
+
 export interface ComboBoxEventMap<TItem> extends HTMLElementEventMap {
   change: ComboBoxChangeEvent<TItem>;
 
@@ -79,6 +84,8 @@ export interface ComboBoxEventMap<TItem> extends HTMLElementEventMap {
   'value-changed': ComboBoxValueChangedEvent;
 
   'selected-item-changed': ComboBoxSelectedItemChangedEvent<TItem>;
+
+  validated: ComboBoxValidatedEvent;
 }
 
 /**
@@ -165,6 +172,7 @@ export interface ComboBoxEventMap<TItem> extends HTMLElementEventMap {
  * Custom property                         | Description                | Default
  * ----------------------------------------|----------------------------|---------
  * `--vaadin-field-default-width`          | Default width of the field | `12em`
+ * `--vaadin-combo-box-overlay-width`      | Width of the overlay       | `auto`
  * `--vaadin-combo-box-overlay-max-height` | Max height of the overlay  | `65vh`
  *
  * `<vaadin-combo-box>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.
@@ -207,6 +215,7 @@ export interface ComboBoxEventMap<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 ComboBox<TItem = ComboBoxDefaultItem> extends HTMLElement {
   addEventListener<K extends keyof ComboBoxEventMap<TItem>>(

package/src/vaadin-combo-box.js

@@ -4,7 +4,9 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import '@vaadin/input-container/src/vaadin-input-container.js';
-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 { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { InputControlMixin } from '@vaadin/field-base/src/input-control-mixin.js';
@@ -102,6 +104,7 @@ registerStyles('vaadin-combo-box', inputFieldShared, { moduleId: 'vaadin-combo-b
  * Custom property                         | Description                | Default
  * ----------------------------------------|----------------------------|---------
  * `--vaadin-field-default-width`          | Default width of the field | `12em`
+ * `--vaadin-combo-box-overlay-width`      | Width of the overlay       | `auto`
  * `--vaadin-combo-box-overlay-max-height` | Max height of the overlay  | `65vh`
  *
  * `<vaadin-combo-box>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.
@@ -144,6 +147,7 @@ registerStyles('vaadin-combo-box', inputFieldShared, { moduleId: 'vaadin-combo-b
  * @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 ElementMixin
@@ -196,19 +200,16 @@ class ComboBox extends ComboBoxDataProviderMixin(
         </div>
       </div>
 
-      <vaadin-combo-box-dropdown
-        id="dropdown"
-        opened="[[opened]]"
-        renderer="[[renderer]]"
+      <vaadin-combo-box-overlay
+        id="overlay"
+        hidden$="[[_isOverlayHidden(filteredItems, loading)]]"
+        opened="[[_overlayOpened]]"
+        loading$="[[loading]]"
+        theme$="[[_theme]]"
         position-target="[[_positionTarget]]"
-        restore-focus-on-close="[[__restoreFocusOnClose]]"
+        no-vertical-overlap
         restore-focus-node="[[inputElement]]"
-        _focused-index="[[_focusedIndex]]"
-        _item-id-path="[[itemIdPath]]"
-        _item-label-path="[[itemLabelPath]]"
-        loading="[[loading]]"
-        theme="[[_theme]]"
-      ></vaadin-combo-box-dropdown>
+      ></vaadin-combo-box-overlay>
     `;
   }
 
@@ -273,7 +274,7 @@ class ComboBox extends ComboBoxDataProviderMixin(
    */
   _shouldRemoveFocus(event) {
     // Do not blur when focus moves to the overlay
-    if (event.relatedTarget === this.$.dropdown.$.overlay) {
+    if (event.relatedTarget === this.$.overlay) {
       event.composedPath()[0].focus();
       return false;
     }

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

@@ -1,287 +0,0 @@
-/**
- * @license
- * 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-item.js';
-import './vaadin-combo-box-overlay.js';
-import './vaadin-combo-box-scroller.js';
-import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
-
-/**
- * Element for internal use only.
- *
- * @extends HTMLElement
- * @private
- */
-export class ComboBoxDropdown extends PolymerElement {
-  static get is() {
-    return 'vaadin-combo-box-dropdown';
-  }
-
-  static get template() {
-    return html`
-      <vaadin-combo-box-overlay
-        id="overlay"
-        hidden$="[[_isOverlayHidden(_items.*, loading)]]"
-        loading$="[[loading]]"
-        opened="{{_overlayOpened}}"
-        theme$="[[theme]]"
-        position-target="[[positionTarget]]"
-        no-vertical-overlap
-        restore-focus-on-close="[[restoreFocusOnClose]]"
-        restore-focus-node="[[restoreFocusNode]]"
-      ></vaadin-combo-box-overlay>
-    `;
-  }
-
-  static get properties() {
-    return {
-      /**
-       * True if the combo-box has been activate by the user.
-       * The actual opened state depends on whether the dropdown has items.
-       */
-      opened: Boolean,
-
-      /**
-       * The element to position/align the dropdown by.
-       */
-      positionTarget: {
-        type: Object,
-      },
-
-      /**
-       * Custom function for rendering the content of the `<vaadin-combo-box-item>` propagated from the combo box element.
-       */
-      renderer: Function,
-
-      /**
-       * `true` when new items are being loaded.
-       */
-      loading: {
-        type: Boolean,
-        value: false,
-        reflectToAttribute: true,
-      },
-
-      /**
-       * Used to propagate the `theme` attribute from the host element.
-       */
-      theme: String,
-
-      _selectedItem: {
-        type: Object,
-      },
-
-      _items: {
-        type: Array,
-      },
-
-      _focusedIndex: {
-        type: Number,
-        value: -1,
-      },
-
-      focusedItem: {
-        type: String,
-        computed: '_getFocusedItem(_focusedIndex)',
-      },
-
-      _itemLabelPath: {
-        type: String,
-        value: 'label',
-      },
-
-      _itemValuePath: {
-        type: String,
-        value: 'value',
-      },
-
-      _scroller: Object,
-
-      _itemIdPath: String,
-
-      _overlayOpened: {
-        type: Boolean,
-        observer: '_openedChanged',
-      },
-    };
-  }
-
-  static get observers() {
-    return [
-      '_openedOrItemsChanged(opened, _items, loading)',
-      '__updateScroller(_scroller, _items, opened, loading, _selectedItem, _itemIdPath, _focusedIndex, renderer, theme)',
-    ];
-  }
-
-  constructor() {
-    super();
-
-    // Ensure every instance has unique ID
-    const uniqueId = (ComboBoxDropdown._uniqueId = 1 + ComboBoxDropdown._uniqueId || 0);
-    this.scrollerId = `${this.localName}-scroller-${uniqueId}`;
-  }
-
-  ready() {
-    super.ready();
-
-    // Allow extensions to customize tag name for the items
-    this.__hostTagName = this.constructor.is.replace('-dropdown', '');
-
-    const overlay = this.$.overlay;
-    const scrollerTag = `${this.__hostTagName}-scroller`;
-
-    overlay.renderer = (root) => {
-      if (!root.firstChild) {
-        const scroller = document.createElement(scrollerTag);
-        root.appendChild(scroller);
-      }
-    };
-
-    // Ensure the scroller is rendered
-    overlay.requestContentUpdate();
-
-    this._scroller = overlay.content.querySelector(scrollerTag);
-    this._scroller.id = this.scrollerId;
-
-    this._scroller.getItemLabel = this.getItemLabel.bind(this);
-    this._scroller.comboBox = this.getRootNode().host;
-
-    this._scroller.addEventListener('selection-changed', (e) => this._forwardScrollerEvent(e));
-    this._scroller.addEventListener('index-requested', (e) => this._forwardScrollerEvent(e));
-
-    overlay.addEventListener('touchend', (e) => this._fireTouchAction(e));
-    overlay.addEventListener('touchmove', (e) => this._fireTouchAction(e));
-
-    // Prevent blurring the input when clicking inside the overlay.
-    overlay.addEventListener('mousedown', (e) => e.preventDefault());
-
-    // Preventing the default modal behaviour of the overlay on input clicking
-    overlay.addEventListener('vaadin-overlay-outside-click', (e) => {
-      e.preventDefault();
-    });
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-
-    // Making sure the overlay is closed and removed from DOM after detaching the dropdown.
-    this._overlayOpened = false;
-  }
-
-  _fireTouchAction(sourceEvent) {
-    this.dispatchEvent(
-      new CustomEvent('vaadin-overlay-touch-action', {
-        detail: { sourceEvent },
-      }),
-    );
-  }
-
-  _forwardScrollerEvent(event) {
-    this.dispatchEvent(new CustomEvent(event.type, { detail: event.detail }));
-  }
-
-  _openedChanged(opened, wasOpened) {
-    if (opened) {
-      this._scroller.style.maxHeight =
-        getComputedStyle(this).getPropertyValue(`--${this.__hostTagName}-overlay-max-height`) || '65vh';
-
-      this.dispatchEvent(new CustomEvent('vaadin-combo-box-dropdown-opened', { bubbles: true, composed: true }));
-    } else if (wasOpened && !this.__emptyItems) {
-      this.dispatchEvent(new CustomEvent('vaadin-combo-box-dropdown-closed', { bubbles: true, composed: true }));
-    }
-  }
-
-  _openedOrItemsChanged(opened, items, loading) {
-    // See https://github.com/vaadin/vaadin-combo-box/pull/964
-    const hasItems = items && items.length;
-    if (!hasItems) {
-      this.__emptyItems = true;
-    }
-    this._overlayOpened = !!(opened && (loading || hasItems));
-    this.__emptyItems = false;
-  }
-
-  _getFocusedItem(focusedIndex) {
-    if (focusedIndex >= 0) {
-      return this._items[focusedIndex];
-    }
-  }
-
-  /**
-   * Gets the index of the item with the provided label.
-   * @return {number}
-   */
-  indexOfLabel(label) {
-    if (this._items && label) {
-      for (let i = 0; i < this._items.length; i++) {
-        if (this.getItemLabel(this._items[i]).toString().toLowerCase() === label.toString().toLowerCase()) {
-          return i;
-        }
-      }
-    }
-
-    return -1;
-  }
-
-  /**
-   * Gets the label string for the item based on the `_itemLabelPath`.
-   * @return {string}
-   */
-  getItemLabel(item, itemLabelPath) {
-    itemLabelPath = itemLabelPath || this._itemLabelPath;
-    let label = item && itemLabelPath ? this.get(itemLabelPath, item) : undefined;
-    if (label === undefined || label === null) {
-      label = item ? item.toString() : '';
-    }
-    return label;
-  }
-
-  _scrollIntoView(index) {
-    if (!this._scroller) {
-      return;
-    }
-    this._scroller.scrollIntoView(index);
-  }
-
-  adjustScrollPosition() {
-    if (this.opened && this._items) {
-      this._scrollIntoView(this._focusedIndex);
-    }
-  }
-
-  // eslint-disable-next-line max-params
-  __updateScroller(scroller, items, opened, loading, selectedItem, itemIdPath, focusedIndex, renderer, theme) {
-    if (scroller) {
-      scroller.setProperties({
-        items: opened ? items : [],
-        opened,
-        loading,
-        selectedItem,
-        itemIdPath,
-        focusedIndex,
-        renderer,
-        theme,
-      });
-    }
-  }
-
-  _isOverlayHidden() {
-    return !this.loading && !(this._items && this._items.length);
-  }
-
-  /**
-   * Fired after the `vaadin-combo-box-dropdown` opens.
-   *
-   * @event vaadin-combo-box-dropdown-opened
-   */
-
-  /**
-   * Fired after the `vaadin-combo-box-dropdown` closes.
-   *
-   * @event vaadin-combo-box-dropdown-closed
-   */
-}
-
-customElements.define(ComboBoxDropdown.is, ComboBoxDropdown);