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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/combo-box",
-  "version": "24.0.0-alpha8",
+  "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-alpha8",
-    "@vaadin/field-base": "24.0.0-alpha8",
-    "@vaadin/input-container": "24.0.0-alpha8",
-    "@vaadin/item": "24.0.0-alpha8",
-    "@vaadin/lit-renderer": "24.0.0-alpha8",
-    "@vaadin/overlay": "24.0.0-alpha8",
-    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha8",
-    "@vaadin/vaadin-material-styles": "24.0.0-alpha8",
-    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha8"
+    "@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-alpha8",
+    "@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": "476752249bb12295c500980d98a3256ad3b22b73"
+  "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

@@ -6,21 +6,14 @@
 import type { Constructor } from '@open-wc/dedupe-mixin';
 import type { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
 import type { KeyboardMixinClass } from '@vaadin/component-base/src/keyboard-mixin.js';
+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,
@@ -28,6 +21,7 @@ export declare function ComboBoxMixin<TItem, T extends Constructor<HTMLElement>>
   Constructor<DisabledMixinClass> &
   Constructor<InputMixinClass> &
   Constructor<KeyboardMixinClass> &
+  Constructor<OverlayClassMixinClass> &
   T;
 
 export declare class ComboBoxMixinClass<TItem> {
@@ -85,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

@@ -8,6 +8,7 @@ import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js'
 import { DisabledMixin } from '@vaadin/component-base/src/disabled-mixin.js';
 import { isElementFocused } from '@vaadin/component-base/src/focus-utils.js';
 import { KeyboardMixin } from '@vaadin/component-base/src/keyboard-mixin.js';
+import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
 import { processTemplates } from '@vaadin/component-base/src/templates.js';
 import { InputMixin } from '@vaadin/field-base/src/input-mixin.js';
 import { VirtualKeyboardController } from '@vaadin/field-base/src/virtual-keyboard-controller.js';
@@ -43,10 +44,17 @@ function findItemIndex(items, callback) {
 
 /**
  * @polymerMixin
+ * @mixes ControllerMixin
+ * @mixes DisabledMixin
+ * @mixes InputMixin
+ * @mixes KeyboardMixin
+ * @mixes OverlayClassMixin
  * @param {function(new:HTMLElement)} subclass
  */
 export const ComboBoxMixin = (subclass) =>
-  class VaadinComboBoxMixinElement extends ControllerMixin(KeyboardMixin(InputMixin(DisabledMixin(subclass)))) {
+  class ComboBoxMixinClass extends OverlayClassMixin(
+    ControllerMixin(KeyboardMixin(InputMixin(DisabledMixin(subclass)))),
+  ) {
     static get properties() {
       return {
         /**
@@ -262,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
@@ -280,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.
@@ -339,7 +355,7 @@ export const ComboBoxMixin = (subclass) =>
 
       const bringToFrontListener = () => {
         requestAnimationFrame(() => {
-          this.$.overlay.bringToFront();
+          this._overlayElement.bringToFront();
         });
       };
 
@@ -430,6 +446,8 @@ export const ComboBoxMixin = (subclass) =>
       overlay.addEventListener('opened-changed', (e) => {
         this._overlayOpened = e.detail.value;
       });
+
+      this._overlayElement = overlay;
     }
 
     /**
@@ -441,7 +459,7 @@ export const ComboBoxMixin = (subclass) =>
     _initScroller(host) {
       const scrollerTag = `${this._tagNamePrefix}-scroller`;
 
-      const overlay = this.$.overlay;
+      const overlay = this._overlayElement;
 
       overlay.renderer = (root) => {
         if (!root.firstChild) {
@@ -454,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);
 
@@ -547,7 +565,7 @@ export const ComboBoxMixin = (subclass) =>
           this.focus();
         }
 
-        this.$.overlay.restoreFocusOnClose = true;
+        this._overlayElement.restoreFocusOnClose = true;
       } else {
         this._onClosed();
         if (this._openedWithFocusRing && this._isInputFocused()) {
@@ -646,7 +664,7 @@ export const ComboBoxMixin = (subclass) =>
       super._onKeyDown(e);
 
       if (e.key === 'Tab') {
-        this.$.overlay.restoreFocusOnClose = false;
+        this._overlayElement.restoreFocusOnClose = false;
       } else if (e.key === 'ArrowDown') {
         this._onArrowDown();
 
@@ -944,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
@@ -1271,7 +1281,7 @@ export const ComboBoxMixin = (subclass) =>
       }
 
       // Fixes the problem with `focusout` happening when clicking on the scroll bar on Edge
-      if (event.relatedTarget === this.$.overlay) {
+      if (event.relatedTarget === this._overlayElement) {
         event.composedPath()[0].focus();
         return;
       }