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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/combo-box",
-  "version": "24.0.0-alpha9",
+  "version": "24.0.0-beta1",
   "publishConfig": {
     "access": "public"
   },
@@ -38,20 +38,20 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "24.0.0-alpha9",
-    "@vaadin/field-base": "24.0.0-alpha9",
-    "@vaadin/input-container": "24.0.0-alpha9",
-    "@vaadin/item": "24.0.0-alpha9",
-    "@vaadin/lit-renderer": "24.0.0-alpha9",
-    "@vaadin/overlay": "24.0.0-alpha9",
-    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha9",
-    "@vaadin/vaadin-material-styles": "24.0.0-alpha9",
-    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha9"
+    "@vaadin/component-base": "24.0.0-beta1",
+    "@vaadin/field-base": "24.0.0-beta1",
+    "@vaadin/input-container": "24.0.0-beta1",
+    "@vaadin/item": "24.0.0-beta1",
+    "@vaadin/lit-renderer": "24.0.0-beta1",
+    "@vaadin/overlay": "24.0.0-beta1",
+    "@vaadin/vaadin-lumo-styles": "24.0.0-beta1",
+    "@vaadin/vaadin-material-styles": "24.0.0-beta1",
+    "@vaadin/vaadin-themable-mixin": "24.0.0-beta1"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.3.2",
-    "@vaadin/text-field": "24.0.0-alpha9",
+    "@vaadin/testing-helpers": "^0.4.0",
+    "@vaadin/text-field": "24.0.0-beta1",
     "lit": "^2.0.0",
     "sinon": "^13.0.2"
   },
@@ -59,5 +59,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "cc3f747164041566b300bde4b105d2475649e93f"
+  "gitHead": "c5b48921a62482746df8e46994b37e1490fec27e"
 }

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

@@ -311,13 +311,11 @@ export const ComboBoxDataProviderMixin = (superClass) =>
     _flushPendingRequests(size) {
       if (this._pendingRequests) {
         const lastPage = Math.ceil(size / this.pageSize);
-        const pendingRequestsKeys = Object.keys(this._pendingRequests);
-        for (let reqIdx = 0; reqIdx < pendingRequestsKeys.length; reqIdx++) {
-          const page = parseInt(pendingRequestsKeys[reqIdx]);
-          if (page >= lastPage) {
-            this._pendingRequests[page]([], size);
+        Object.entries(this._pendingRequests).forEach(([page, callback]) => {
+          if (parseInt(page) >= lastPage) {
+            callback([], size);
           }
-        }
+        });
       }
     }
   };

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

@@ -0,0 +1,65 @@
+/**
+ * @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';
+
+export type ComboBoxDefaultItem = any;
+
+export interface ComboBoxItemModel<TItem> {
+  index: number;
+  item: TItem;
+  selected: boolean;
+  focused: boolean;
+}
+
+export type ComboBoxItemRenderer<TItem, TOwner> = (
+  root: HTMLElement,
+  owner: TOwner,
+  model: ComboBoxItemModel<TItem>,
+) => void;
+
+export declare function ComboBoxItemMixin<TItem, TOwner, T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<ComboBoxItemMixinClass<TItem, TOwner>> & T;
+
+export declare class ComboBoxItemMixinClass<TItem, TOwner> {
+  /**
+   * The item to render.
+   */
+  index: number;
+
+  /**
+   * The item to render.
+   */
+  item: TItem;
+
+  /**
+   * The text to render in the item.
+   */
+  label: string;
+
+  /**
+   * True when item is selected.
+   */
+  selected: boolean;
+
+  /**
+   * True when item is focused.
+   */
+  focused: boolean;
+
+  /**
+   * Custom function for rendering the item content.
+   */
+  renderer: ComboBoxItemRenderer<TItem, TOwner>;
+
+  /**
+   * Requests an update for the content of the item.
+   * While performing the update, it invokes the renderer passed in the `renderer` property.
+   *
+   * It is not guaranteed that the update happens immediately (synchronously) after it is requested.
+   */
+  requestContentUpdate(): void;
+}

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

@@ -0,0 +1,127 @@
+/**
+ * @license
+ * Copyright (c) 2015 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * @polymerMixin
+ */
+export const ComboBoxItemMixin = (superClass) =>
+  class ComboBoxItemMixinClass extends superClass {
+    static get properties() {
+      return {
+        /**
+         * The index of the item.
+         */
+        index: {
+          type: Number,
+        },
+
+        /**
+         * The item to render.
+         */
+        item: {
+          type: Object,
+        },
+
+        /**
+         * The text to render in the item.
+         */
+        label: {
+          type: String,
+        },
+
+        /**
+         * True when item is selected.
+         */
+        selected: {
+          type: Boolean,
+          value: false,
+          reflectToAttribute: true,
+        },
+
+        /**
+         * True when item is focused.
+         */
+        focused: {
+          type: Boolean,
+          value: false,
+          reflectToAttribute: true,
+        },
+
+        /**
+         * Custom function for rendering the item content.
+         */
+        renderer: {
+          type: Function,
+        },
+      };
+    }
+
+    static get observers() {
+      return ['__rendererOrItemChanged(renderer, index, item.*, selected, focused)', '__updateLabel(label, renderer)'];
+    }
+
+    /** @protected */
+    connectedCallback() {
+      super.connectedCallback();
+
+      this._owner = this.parentNode.owner;
+
+      const hostDir = this._owner.getAttribute('dir');
+      if (hostDir) {
+        this.setAttribute('dir', hostDir);
+      }
+    }
+
+    /**
+     * Requests an update for the content of the item.
+     * While performing the update, it invokes the renderer passed in the `renderer` property.
+     *
+     * It is not guaranteed that the update happens immediately (synchronously) after it is requested.
+     */
+    requestContentUpdate() {
+      if (!this.renderer) {
+        return;
+      }
+
+      const model = {
+        index: this.index,
+        item: this.item,
+        focused: this.focused,
+        selected: this.selected,
+      };
+
+      this.renderer(this, this._owner, model);
+    }
+
+    /** @private */
+    __rendererOrItemChanged(renderer, index, item) {
+      if (item === undefined || index === undefined) {
+        return;
+      }
+
+      if (this._oldRenderer !== renderer) {
+        this.innerHTML = '';
+        // Whenever a Lit-based renderer is used, it assigns a Lit part to the node it was rendered into.
+        // When clearing the rendered content, this part needs to be manually disposed of.
+        // Otherwise, using a Lit-based renderer on the same node will throw an exception or render nothing afterward.
+        delete this._$litPart$;
+      }
+
+      if (renderer) {
+        this._oldRenderer = renderer;
+        this.requestContentUpdate();
+      }
+    }
+
+    /** @private */
+    __updateLabel(label, renderer) {
+      if (renderer) {
+        return;
+      }
+
+      this.textContent = label;
+    }
+  };

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

@@ -0,0 +1,45 @@
+/**
+ * @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 { DirMixinClass } from '@vaadin/component-base/src/dir-mixin.js';
+import type { ThemableMixinClass } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import type { ComboBox } from './vaadin-combo-box.js';
+import type { ComboBoxDefaultItem, ComboBoxItemMixinClass } from './vaadin-combo-box-item-mixin.js';
+
+/**
+ * An item element used by the `<vaadin-combo-box>` dropdown.
+ *
+ * ### Styling
+ *
+ * The following shadow DOM parts are available for styling:
+ *
+ * Part name   | Description
+ * ------------|--------------
+ * `checkmark` | The graphical checkmark shown for a selected item
+ * `content`   | The element that wraps the item content
+ *
+ * The following state attributes are exposed for styling:
+ *
+ * Attribute    | Description
+ * -------------|-------------
+ * `selected`   | Set when the item is selected
+ * `focused`    | Set when the item is focused
+ *
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
+ */
+declare class ComboBoxItem extends HTMLElement {}
+
+interface ComboBoxItem<TItem = ComboBoxDefaultItem>
+  extends ComboBoxItemMixinClass<TItem, ComboBox>,
+    DirMixinClass,
+    ThemableMixinClass {}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vaadin-combo-box-item': ComboBoxItem;
+  }
+}
+
+export { ComboBoxItem };

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

@@ -6,6 +6,7 @@
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { ComboBoxItemMixin } from './vaadin-combo-box-item-mixin.js';
 
 /**
  * An item element used by the `<vaadin-combo-box>` dropdown.
@@ -28,11 +29,12 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
  *
+ * @mixes ComboBoxItemMixin
  * @mixes ThemableMixin
  * @mixes DirMixin
  * @private
  */
-export class ComboBoxItem extends ThemableMixin(DirMixin(PolymerElement)) {
+export class ComboBoxItem extends ComboBoxItemMixin(ThemableMixin(DirMixin(PolymerElement))) {
   static get template() {
     return html`
       <style>
@@ -54,119 +56,6 @@ export class ComboBoxItem extends ThemableMixin(DirMixin(PolymerElement)) {
   static get is() {
     return 'vaadin-combo-box-item';
   }
-
-  static get properties() {
-    return {
-      /**
-       * The index of the item
-       */
-      index: Number,
-
-      /**
-       * The item to render
-       * @type {(String|Object)}
-       */
-      item: Object,
-
-      /**
-       * The text label corresponding to the item
-       */
-      label: String,
-
-      /**
-       * True when item is selected
-       */
-      selected: {
-        type: Boolean,
-        value: false,
-        reflectToAttribute: true,
-      },
-
-      /**
-       * True when item is focused
-       */
-      focused: {
-        type: Boolean,
-        value: false,
-        reflectToAttribute: true,
-      },
-
-      /**
-       * Custom function for rendering the content of the `<vaadin-combo-box-item>` propagated from the combo box element.
-       */
-      renderer: Function,
-
-      /**
-       * Saved instance of a custom renderer function.
-       */
-      _oldRenderer: Function,
-    };
-  }
-
-  static get observers() {
-    return ['__rendererOrItemChanged(renderer, index, item.*, selected, focused)', '__updateLabel(label, renderer)'];
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-
-    this._comboBox = this.parentNode.comboBox;
-
-    const hostDir = this._comboBox.getAttribute('dir');
-    if (hostDir) {
-      this.setAttribute('dir', hostDir);
-    }
-  }
-
-  /**
-   * Requests an update for the content of the item.
-   * While performing the update, it invokes the renderer passed in the `renderer` property.
-   *
-   * It is not guaranteed that the update happens immediately (synchronously) after it is requested.
-   */
-  requestContentUpdate() {
-    if (!this.renderer) {
-      return;
-    }
-
-    const model = {
-      index: this.index,
-      item: this.item,
-      focused: this.focused,
-      selected: this.selected,
-    };
-
-    this.renderer(this, this._comboBox, model);
-  }
-
-  /** @private */
-  __rendererOrItemChanged(renderer, index, item) {
-    if (item === undefined || index === undefined) {
-      return;
-    }
-
-    if (this._oldRenderer !== renderer) {
-      this.innerHTML = '';
-      // Whenever a Lit-based renderer is used, it assigns a Lit part to the node it was rendered into.
-      // When clearing the rendered content, this part needs to be manually disposed of.
-      // Otherwise, using a Lit-based renderer on the same node will throw an exception or render nothing afterward.
-      delete this._$litPart$;
-    }
-
-    if (renderer) {
-      this._oldRenderer = renderer;
-      this.requestContentUpdate();
-    }
-  }
-
-  /** @private */
-  __updateLabel(label, renderer) {
-    if (renderer) {
-      return;
-    }
-
-    this.textContent = label;
-  }
 }
 
 customElements.define(ComboBoxItem.is, ComboBoxItem);

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

@@ -117,30 +117,6 @@ class ComboBoxLight extends ComboBoxDataProviderMixin(ComboBoxMixin(ValidateMixi
     return this.querySelector('.clear-button');
   }
 
-  /** @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.validate) {
-      return this.inputElement.validate();
-    }
-    return super.checkValidity();
-  }
-
   /**
    * @return {string}
    * @protected
@@ -181,6 +157,30 @@ class ComboBoxLight extends ComboBoxDataProviderMixin(ComboBoxMixin(ValidateMixi
     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.validate) {
+      return this.inputElement.validate();
+    }
+    return super.checkValidity();
+  }
+
   /** @protected */
   _isClearButton(event) {
     return (

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

@@ -9,19 +9,11 @@ import type { KeyboardMixinClass } from '@vaadin/component-base/src/keyboard-mix
 import type { OverlayClassMixinClass } from '@vaadin/component-base/src/overlay-class-mixin.js';
 import type { InputMixinClass } from '@vaadin/field-base/src/input-mixin.js';
 import type { ComboBox } from './vaadin-combo-box.js';
+import type { ComboBoxDefaultItem, ComboBoxItemModel, ComboBoxItemRenderer } from './vaadin-combo-box-item-mixin.js';
 
-export type ComboBoxDefaultItem = any;
+export type { ComboBoxDefaultItem, ComboBoxItemModel };
 
-export interface ComboBoxItemModel<TItem> {
-  index: number;
-  item: TItem;
-}
-
-export type ComboBoxRenderer<TItem> = (
-  root: HTMLElement,
-  comboBox: ComboBox<TItem>,
-  model: ComboBoxItemModel<TItem>,
-) => void;
+export type ComboBoxRenderer<TItem> = ComboBoxItemRenderer<TItem, ComboBox<TItem>>;
 
 export declare function ComboBoxMixin<TItem, T extends Constructor<HTMLElement>>(
   base: T,
@@ -87,7 +79,7 @@ export declare class ComboBoxMixinClass<TItem> {
   /**
    * The `String` value for the selected item of the combo box.
    *
-   * When there’s no item selected, the value is an empty string.
+   * When there is no item selected, the value is an empty string.
    *
    * Use `selectedItem` property to get the raw selected item from
    * the `items` array.

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);
 
@@ -954,14 +962,6 @@ export const ComboBoxMixin = (subclass) =>
       this.filter = '';
     }
 
-    /**
-     * @return {string}
-     * @protected
-     */
-    get _propertyForValue() {
-      return 'value';
-    }
-
     /**
      * Override an event listener from `InputMixin`.
      * @param {!Event} event

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