@vaadin/combo-box 24.0.0-alpha9 → 24.0.0-beta2

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

@@ -270,6 +270,24 @@ export const ComboBoxMixin = (subclass) =>
       return 'vaadin-combo-box';
     }
 
+    /**
+     * Get a reference to the native `<input>` element.
+     * Override to provide a custom input.
+     * @protected
+     * @return {HTMLInputElement | undefined}
+     */
+    get _nativeInput() {
+      return this.inputElement;
+    }
+
+    /**
+     * @return {string}
+     * @protected
+     */
+    get _propertyForValue() {
+      return 'value';
+    }
+
     /**
      * @return {string | undefined}
      * @protected
@@ -288,16 +306,6 @@ export const ComboBoxMixin = (subclass) =>
       }
     }
 
-    /**
-     * Get a reference to the native `<input>` element.
-     * Override to provide a custom input.
-     * @protected
-     * @return {HTMLInputElement | undefined}
-     */
-    get _nativeInput() {
-      return this.inputElement;
-    }
-
     /**
      * Override method inherited from `InputMixin`
      * to customize the input element.
@@ -464,7 +472,7 @@ export const ComboBoxMixin = (subclass) =>
 
       const scroller = overlay.querySelector(scrollerTag);
 
-      scroller.comboBox = host || this;
+      scroller.owner = host || this;
       scroller.getItemLabel = this._getItemLabel.bind(this);
       scroller.addEventListener('selection-changed', this._boundOverlaySelectedItemChanged);
 
@@ -591,13 +599,19 @@ export const ComboBoxMixin = (subclass) =>
       return event.composedPath()[0] === this.clearElement;
     }
 
+    /** @private */
+    __onClearButtonMouseDown(event) {
+      event.preventDefault(); // Prevent native focusout event
+      this.inputElement.focus();
+    }
+
     /**
      * @param {Event} event
      * @protected
      */
-    _handleClearButtonClick(event) {
+    _onClearButtonClick(event) {
       event.preventDefault();
-      this._clear();
+      this._onClearAction();
 
       // De-select dropdown item
       if (this.opened) {
@@ -633,15 +647,13 @@ export const ComboBoxMixin = (subclass) =>
     }
 
     /** @private */
-    _onClick(e) {
-      const path = e.composedPath();
-
-      if (this._isClearButton(e)) {
-        this._handleClearButtonClick(e);
-      } else if (path.indexOf(this._toggleElement) > -1) {
-        this._onToggleButtonClick(e);
+    _onClick(event) {
+      if (this._isClearButton(event)) {
+        this._onClearButtonClick(event);
+      } else if (event.composedPath().includes(this._toggleElement)) {
+        this._onToggleButtonClick(event);
       } else {
-        this._onHostClick(e);
+        this._onHostClick(event);
       }
     }
 
@@ -774,7 +786,11 @@ 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
-      if (!this.allowCustomValue && this._inputElementValue !== '' && this._focusedIndex < 0) {
+      const hasInvalidOption =
+        this._focusedIndex < 0 &&
+        this._inputElementValue !== '' &&
+        this._getItemLabel(this.selectedItem) !== this._inputElementValue;
+      if (!this.allowCustomValue && hasInvalidOption) {
         // Do not submit the surrounding form.
         e.preventDefault();
         // Do not trigger global listeners
@@ -815,7 +831,7 @@ export const ComboBoxMixin = (subclass) =>
         } else if (this.clearButtonVisible && !this.opened && !!this.value) {
           e.stopPropagation();
           // The clear button is visible and the overlay is closed, so clear the value.
-          this._clear();
+          this._onClearAction();
         }
       } else if (this.opened) {
         // Auto-open is enabled
@@ -833,7 +849,7 @@ export const ComboBoxMixin = (subclass) =>
       } else if (this.clearButtonVisible && !!this.value) {
         e.stopPropagation();
         // The clear button is visible and the overlay is closed, so clear the value.
-        this._clear();
+        this._onClearAction();
       }
     }
 
@@ -855,7 +871,7 @@ export const ComboBoxMixin = (subclass) =>
      * Clears the current value.
      * @protected
      */
-    _clear() {
+    _onClearAction() {
       this.selectedItem = null;
 
       if (this.allowCustomValue) {
@@ -954,14 +970,6 @@ export const ComboBoxMixin = (subclass) =>
       this.filter = '';
     }
 
-    /**
-     * @return {string}
-     * @protected
-     */
-    get _propertyForValue() {
-      return 'value';
-    }
-
     /**
      * Override an event listener from `InputMixin`.
      * @param {!Event} event
@@ -1266,12 +1274,6 @@ export const ComboBoxMixin = (subclass) =>
       }
     }
 
-    /** @private */
-    __onClearButtonMouseDown(event) {
-      event.preventDefault(); // Prevent native focusout event
-      this.inputElement.focus();
-    }
-
     /** @private */
     _onFocusout(event) {
       // VoiceOver on iOS fires `focusout` event when moving focus to the item in the dropdown.
@@ -1304,7 +1306,7 @@ export const ComboBoxMixin = (subclass) =>
       }
 
       event.preventDefault();
-      this._clear();
+      this._onClearAction();
     }
 
     /**

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

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright (c) 2015 - 2023 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 { PositionMixinClass } from '@vaadin/overlay/src/vaadin-overlay-position-mixin.js';
+
+export declare function ComboBoxOverlayMixin<T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<PositionMixinClass> & T;

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

@@ -0,0 +1,60 @@
+/**
+ * @license
+ * Copyright (c) 2015 - 2023 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';
+
+/**
+ * @polymerMixin
+ * @mixes PositionMixin
+ */
+export const ComboBoxOverlayMixin = (superClass) =>
+  class ComboBoxOverlayMixin extends PositionMixin(superClass) {
+    static get observers() {
+      return ['_setOverlayWidth(positionTarget, opened)'];
+    }
+
+    /** @protected */
+    connectedCallback() {
+      super.connectedCallback();
+
+      const comboBox = this._comboBox;
+
+      const hostDir = comboBox && comboBox.getAttribute('dir');
+      if (hostDir) {
+        this.setAttribute('dir', hostDir);
+      }
+    }
+
+    /**
+     * Override method inherited from `Overlay`
+     * to not close on position target click.
+     *
+     * @param {Event} event
+     * @return {boolean}
+     * @protected
+     */
+    _shouldCloseOnOutsideClick(event) {
+      const eventPath = event.composedPath();
+      return !eventPath.includes(this.positionTarget) && !eventPath.includes(this);
+    }
+
+    /** @private */
+    _setOverlayWidth(positionTarget, opened) {
+      if (positionTarget && opened) {
+        const propPrefix = this.localName;
+        this.style.setProperty(`--_${propPrefix}-default-width`, `${positionTarget.clientWidth}px`);
+
+        const customWidth = getComputedStyle(this._comboBox).getPropertyValue(`--${propPrefix}-width`);
+
+        if (customWidth === '') {
+          this.style.removeProperty(`--${propPrefix}-width`);
+        } else {
+          this.style.setProperty(`--${propPrefix}-width`, customWidth);
+        }
+
+        this._updatePosition();
+      }
+    }
+  };

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

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright (c) 2015 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { Overlay } from '@vaadin/overlay/src/vaadin-overlay.js';
+import { ComboBoxOverlayMixin } from './vaadin-combo-box-overlay-mixin.js';
+
+/**
+ * An element used internally by `<vaadin-combo-box>`. Not intended to be used separately.
+ */
+declare class ComboBoxOverlay extends ComboBoxOverlayMixin(Overlay) {}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vaadin-combo-box-overlay': ComboBoxOverlay;
+  }
+}
+
+export { ComboBoxOverlay };

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

@@ -4,8 +4,8 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { Overlay } from '@vaadin/overlay/src/vaadin-overlay.js';
-import { PositionMixin } from '@vaadin/overlay/src/vaadin-overlay-position-mixin.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { ComboBoxOverlayMixin } from './vaadin-combo-box-overlay-mixin.js';
 
 registerStyles(
   'vaadin-combo-box-overlay',
@@ -29,9 +29,10 @@ let memoizedTemplate;
  * An element used internally by `<vaadin-combo-box>`. Not intended to be used separately.
  *
  * @extends Overlay
+ * @mixes ComboBoxOverlayMixin
  * @private
  */
-export class ComboBoxOverlay extends PositionMixin(Overlay) {
+export class ComboBoxOverlay extends ComboBoxOverlayMixin(Overlay) {
   static get is() {
     return 'vaadin-combo-box-overlay';
   }
@@ -39,57 +40,23 @@ export class ComboBoxOverlay extends PositionMixin(Overlay) {
   static get template() {
     if (!memoizedTemplate) {
       memoizedTemplate = super.template.cloneNode(true);
-      memoizedTemplate.content.querySelector('[part~="overlay"]').removeAttribute('tabindex');
-    }
 
-    return memoizedTemplate;
-  }
+      const overlay = memoizedTemplate.content.querySelector('[part~="overlay"]');
+      overlay.removeAttribute('tabindex');
 
-  static get observers() {
-    return ['_setOverlayWidth(positionTarget, opened)'];
-  }
+      const loader = document.createElement('div');
+      loader.setAttribute('part', 'loader');
 
-  connectedCallback() {
-    super.connectedCallback();
-
-    const comboBox = this._comboBox;
-
-    const hostDir = comboBox && comboBox.getAttribute('dir');
-    if (hostDir) {
-      this.setAttribute('dir', hostDir);
+      overlay.insertBefore(loader, overlay.firstElementChild);
     }
-  }
 
-  ready() {
-    super.ready();
-    const loader = document.createElement('div');
-    loader.setAttribute('part', 'loader');
-    const content = this.shadowRoot.querySelector('[part~="content"]');
-    content.parentNode.insertBefore(loader, content);
-  }
-
-  _outsideClickListener(event) {
-    const eventPath = event.composedPath();
-    if (!eventPath.includes(this.positionTarget) && !eventPath.includes(this)) {
-      this.close();
-    }
+    return memoizedTemplate;
   }
 
-  _setOverlayWidth(positionTarget, opened) {
-    if (positionTarget && opened) {
-      const propPrefix = this.localName;
-      this.style.setProperty(`--_${propPrefix}-default-width`, `${positionTarget.clientWidth}px`);
+  constructor() {
+    super();
 
-      const customWidth = getComputedStyle(this._comboBox).getPropertyValue(`--${propPrefix}-width`);
-
-      if (customWidth === '') {
-        this.style.removeProperty(`--${propPrefix}-width`);
-      } else {
-        this.style.setProperty(`--${propPrefix}-width`, customWidth);
-      }
-
-      this._updatePosition();
-    }
+    this.requiredVerticalSpace = 200;
   }
 }
 

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

@@ -0,0 +1,82 @@
+/**
+ * @license
+ * Copyright (c) 2015 - 2023 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 { ComboBoxItemRenderer } from './vaadin-combo-box-item-mixin.js';
+
+export declare function ComboBoxScrollerMixin<TItem, TOwner, T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<ComboBoxScrollerMixinClass<TItem, TOwner>> & T;
+
+export declare class ComboBoxScrollerMixinClass<TItem, TOwner> {
+  /**
+   * Index of an item that has focus outline and is scrolled into view.
+   * The actual focus still remains in the input field.
+   */
+  focusedIndex: number;
+
+  /**
+   * Path for the id of the item, used to detect whether the item is selected.
+   */
+  itemIdPath: string | null | undefined;
+
+  /**
+   * A full set of items to filter the visible options from.
+   * Set to an empty array when combo-box is not opened.
+   */
+  items: TItem[];
+
+  /**
+   * Set to true while combo-box fetches new page from the data provider.
+   */
+  loading: boolean;
+
+  /**
+   * Whether the combo-box is currently opened or not. If set to false,
+   * calling `scrollIntoView` does not have any effect.
+   */
+  opened: boolean;
+
+  /**
+   * Reference to the owner (combo-box owner), used by the item elements.
+   */
+  owner: TOwner;
+
+  /**
+   * Set true to prevent the overlay from opening automatically.
+   * @attr {boolean} auto-open-disabled
+   */
+  renderer: ComboBoxItemRenderer<TItem, TOwner> | null | undefined;
+
+  /**
+   * The selected item from the `items` array.
+   */
+  selectedItem: TItem;
+
+  /**
+   * Used to propagate the `theme` attribute from the host element.
+   */
+  theme: string;
+
+  /**
+   * Function used to set a label for every combo-box item.
+   */
+  getItemLabel: (item: TItem) => string;
+
+  /**
+   * Requests an update for the virtualizer to re-render items.
+   */
+  requestContentUpdate(): void;
+
+  /**
+   * Scrolls an item at given index into view and adjusts `scrollTop`
+   * so that the element gets fully visible on Arrow Down key press.
+   */
+  scrollIntoView(index: number): void;
+
+  protected _isItemSelected(item: TItem, selectedItem: TItem, itemIdPath: string | null | undefined): void;
+
+  protected _updateElement(el: HTMLElement, index: number): void;
+}