@vaadin/combo-box 24.0.0-alpha12 → 24.0.0-alpha13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/combo-box",
-  "version": "24.0.0-alpha12",
+  "version": "24.0.0-alpha13",
   "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-alpha12",
-    "@vaadin/field-base": "24.0.0-alpha12",
-    "@vaadin/input-container": "24.0.0-alpha12",
-    "@vaadin/item": "24.0.0-alpha12",
-    "@vaadin/lit-renderer": "24.0.0-alpha12",
-    "@vaadin/overlay": "24.0.0-alpha12",
-    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha12",
-    "@vaadin/vaadin-material-styles": "24.0.0-alpha12",
-    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha12"
+    "@vaadin/component-base": "24.0.0-alpha13",
+    "@vaadin/field-base": "24.0.0-alpha13",
+    "@vaadin/input-container": "24.0.0-alpha13",
+    "@vaadin/item": "24.0.0-alpha13",
+    "@vaadin/lit-renderer": "24.0.0-alpha13",
+    "@vaadin/overlay": "24.0.0-alpha13",
+    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha13",
+    "@vaadin/vaadin-material-styles": "24.0.0-alpha13",
+    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha13"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.3.2",
-    "@vaadin/text-field": "24.0.0-alpha12",
+    "@vaadin/testing-helpers": "^0.4.0",
+    "@vaadin/text-field": "24.0.0-alpha13",
     "lit": "^2.0.0",
     "sinon": "^13.0.2"
   },
@@ -59,5 +59,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "7e29eee4d522fb7b03ac8e7e385e9057d71c79ce"
+  "gitHead": "a423ad309c12b4e4f847737ee9f491f83ea60ff0"
 }

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-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,

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

@@ -472,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);
 

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,17 @@ 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;
-  }
-
-  static get observers() {
-    return ['_setOverlayWidth(positionTarget, opened)'];
-  }
+      const overlay = memoizedTemplate.content.querySelector('[part~="overlay"]');
+      overlay.removeAttribute('tabindex');
 
-  connectedCallback() {
-    super.connectedCallback();
+      const loader = document.createElement('div');
+      loader.setAttribute('part', 'loader');
 
-    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();
-    }
-  }
-
-  _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();
-    }
+    return memoizedTemplate;
   }
 }