@vaadin/select 22.0.2 → 23.0.0-alpha4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/select",
-  "version": "22.0.2",
+  "version": "23.0.0-alpha4",
   "publishConfig": {
     "access": "public"
   },
@@ -18,6 +18,7 @@
   },
   "main": "vaadin-select.js",
   "module": "vaadin-select.js",
+  "type": "module",
   "files": [
     "src",
     "theme",
@@ -34,24 +35,24 @@
   "dependencies": {
     "@polymer/iron-media-query": "^3.0.0",
     "@polymer/polymer": "^3.2.0",
-    "@vaadin/button": "^22.0.2",
-    "@vaadin/component-base": "^22.0.2",
-    "@vaadin/field-base": "^22.0.2",
-    "@vaadin/input-container": "^22.0.2",
-    "@vaadin/item": "^22.0.2",
-    "@vaadin/list-box": "^22.0.2",
-    "@vaadin/vaadin-list-mixin": "^22.0.2",
-    "@vaadin/vaadin-lumo-styles": "^22.0.2",
-    "@vaadin/vaadin-material-styles": "^22.0.2",
-    "@vaadin/vaadin-overlay": "^22.0.2",
-    "@vaadin/vaadin-themable-mixin": "^22.0.2"
+    "@vaadin/button": "23.0.0-alpha4",
+    "@vaadin/component-base": "23.0.0-alpha4",
+    "@vaadin/field-base": "23.0.0-alpha4",
+    "@vaadin/input-container": "23.0.0-alpha4",
+    "@vaadin/item": "23.0.0-alpha4",
+    "@vaadin/list-box": "23.0.0-alpha4",
+    "@vaadin/vaadin-list-mixin": "23.0.0-alpha4",
+    "@vaadin/vaadin-lumo-styles": "23.0.0-alpha4",
+    "@vaadin/vaadin-material-styles": "23.0.0-alpha4",
+    "@vaadin/vaadin-overlay": "23.0.0-alpha4",
+    "@vaadin/vaadin-themable-mixin": "23.0.0-alpha4"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/polymer-legacy-adapter": "^22.0.2",
+    "@vaadin/polymer-legacy-adapter": "23.0.0-alpha4",
     "@vaadin/testing-helpers": "^0.3.2",
     "lit": "^2.0.0",
     "sinon": "^9.2.0"
   },
-  "gitHead": "df21370c4a655a38eac11f79686021ab3b0887ad"
+  "gitHead": "81e2deee5147bb7c1f4884760f4598613306f1fb"
 }

package/src/vaadin-select-item.js

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { Item } from '@vaadin/item/src/vaadin-item.js';
+
+/**
+ * An element used internally by `<vaadin-select>`. Not intended to be used separately.
+ *
+ * @extends Item
+ * @protected
+ */
+class SelectItem extends Item {
+  static get is() {
+    return 'vaadin-select-item';
+  }
+}
+
+customElements.define(SelectItem.is, SelectItem);

package/src/vaadin-select-list-box.js

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { ListBox } from '@vaadin/list-box/src/vaadin-list-box.js';
+
+/**
+ * An element used internally by `<vaadin-select>`. Not intended to be used separately.
+ *
+ * @extends ListBox
+ * @protected
+ */
+class SelectListBox extends ListBox {
+  static get is() {
+    return 'vaadin-select-list-box';
+  }
+}
+
+customElements.define(SelectListBox.is, SelectListBox);

package/src/vaadin-select-overlay.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { OverlayElement } from '@vaadin/vaadin-overlay/src/vaadin-overlay.js';
@@ -28,6 +28,21 @@ class SelectOverlay extends PositionMixin(OverlayElement) {
   static get is() {
     return 'vaadin-select-overlay';
   }
+
+  requestContentUpdate() {
+    super.requestContentUpdate();
+
+    if (this.owner) {
+      // Ensure menuElement reference is correct.
+      const menuElement = this._getMenuElement();
+      this.owner._assignMenuElement(menuElement);
+    }
+  }
+
+  /** @protected */
+  _getMenuElement() {
+    return Array.from(this.children).find((el) => el.localName !== 'style');
+  }
 }
 
 customElements.define(SelectOverlay.is, SelectOverlay);

package/src/vaadin-select-value-button.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { Button } from '@vaadin/button/src/vaadin-button.js';
@@ -14,14 +14,14 @@ registerStyles(
       min-width: 0;
     }
 
-    ::slotted(vaadin-item) {
+    ::slotted(:not([slot])) {
       padding-left: 0;
       padding-right: 0;
       flex: auto;
     }
 
     /* placeholder styles */
-    ::slotted(:not([selected])) {
+    ::slotted(:not([slot]):not([selected])) {
       line-height: normal;
     }
 

package/src/vaadin-select.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
@@ -9,6 +9,19 @@ import { DelegateFocusMixin } from '@vaadin/field-base/src/delegate-focus-mixin.
 import { FieldMixin } from '@vaadin/field-base/src/field-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
+export interface SelectItem {
+  label?: string;
+  component?: string;
+  disabled?: boolean;
+}
+
+/**
+ * Fired when the user commits a value change.
+ */
+export type SelectChangeEvent = Event & {
+  target: Select;
+};
+
 /**
  * Function for rendering the content of the `<vaadin-select>`.
  * Receives two arguments:
@@ -42,22 +55,41 @@ export interface SelectCustomEventMap {
   'value-changed': SelectValueChangedEvent;
 }
 
-export interface SelectEventMap extends HTMLElementEventMap, SelectCustomEventMap {}
+export interface SelectEventMap extends HTMLElementEventMap, SelectCustomEventMap {
+  change: SelectChangeEvent;
+}
 
 /**
  * `<vaadin-select>` is a Web Component for selecting values from a list of items.
  *
+ * ### Items
+ *
+ * Use the `items` property to define possible options for the select:
+ *
+ * ```html
+ * <vaadin-select id="select"></vaadin-select>
+ * ```
+ * ```js
+ * const select = document.querySelector('#select');
+ * select.items = [
+ *   { label: 'Most recent first', value: 'recent' },
+ *   { component: 'hr' },
+ *   { label: 'Rating: low to high', value: 'rating-asc' },
+ *   { label: 'Rating: high to low', value: 'rating-desc' },
+ *   { component: 'hr' },
+ *   { label: 'Price: low to high', value: 'price-asc', disabled: true },
+ *   { label: 'Price: high to low', value: 'price-desc', disabled: true }
+ * ];
+ * ```
+ *
  * ### Rendering
  *
- * The content of the select can be populated by using the renderer callback function.
+ * Alternatively, the content of the select can be populated by using the renderer callback function.
  *
  * The renderer function provides `root`, `select` arguments.
  * Generate DOM content, append it to the `root` element and control the state
  * of the host element by accessing `select`.
  *
- * ```html
- * <vaadin-select id="select"></vaadin-select>
- * ```
  * ```js
  * const select = document.querySelector('#select');
  * select.renderer = function(root, select) {
@@ -132,6 +164,29 @@ export interface SelectEventMap extends HTMLElementEventMap, SelectCustomEventMa
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
  */
 declare class Select extends DelegateFocusMixin(FieldMixin(SlotMixin(ElementMixin(ThemableMixin(HTMLElement))))) {
+  /**
+   * An array containing items that will be rendered as the options of the select.
+   *
+   * #### Example
+   * ```js
+   * select.items = [
+   *   { label: 'Most recent first', value: 'recent' },
+   *   { component: 'hr' },
+   *   { label: 'Rating: low to high', value: 'rating-asc' },
+   *   { label: 'Rating: high to low', value: 'rating-desc' },
+   *   { component: 'hr' },
+   *   { label: 'Price: low to high', value: 'price-asc', disabled: true },
+   *   { label: 'Price: high to low', value: 'price-desc', disabled: true }
+   * ];
+   * ```
+   *
+   * Note: each item is rendered by default as the internal `<vaadin-select-item>` that is an extension of `<vaadin-item>`.
+   * To render the item with a custom component, provide a tag name by the `component` property.
+   *
+   * @type {!Array<!SelectItem>}
+   */
+  items: SelectItem[] | null | undefined;
+
   /**
    * Set when the select is open
    */

package/src/vaadin-select.js

@@ -1,10 +1,12 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import '@polymer/iron-media-query/iron-media-query.js';
 import '@vaadin/input-container/src/vaadin-input-container.js';
+import './vaadin-select-item.js';
+import './vaadin-select-list-box.js';
 import './vaadin-select-overlay.js';
 import './vaadin-select-value-button.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
@@ -22,17 +24,34 @@ registerStyles('vaadin-select', [fieldShared, inputFieldContainer], { moduleId:
 /**
  * `<vaadin-select>` is a Web Component for selecting values from a list of items.
  *
+ * ### Items
+ *
+ * Use the `items` property to define possible options for the select:
+ *
+ * ```html
+ * <vaadin-select id="select"></vaadin-select>
+ * ```
+ * ```js
+ * const select = document.querySelector('#select');
+ * select.items = [
+ *   { label: 'Most recent first', value: 'recent' },
+ *   { component: 'hr' },
+ *   { label: 'Rating: low to high', value: 'rating-asc' },
+ *   { label: 'Rating: high to low', value: 'rating-desc' },
+ *   { component: 'hr' },
+ *   { label: 'Price: low to high', value: 'price-asc', disabled: true },
+ *   { label: 'Price: high to low', value: 'price-desc', disabled: true }
+ * ];
+ * ```
+ *
  * ### Rendering
  *
- * The content of the select can be populated by using the renderer callback function.
+ * Alternatively, the content of the select can be populated by using the renderer callback function.
  *
  * The renderer function provides `root`, `select` arguments.
  * Generate DOM content, append it to the `root` element and control the state
  * of the host element by accessing `select`.
  *
- * ```html
- * <vaadin-select id="select"></vaadin-select>
- * ```
  * ```js
  * const select = document.querySelector('#select');
  * select.renderer = function(root, select) {
@@ -169,6 +188,32 @@ class Select extends DelegateFocusMixin(FieldMixin(SlotMixin(ElementMixin(Themab
 
   static get properties() {
     return {
+      /**
+       * An array containing items that will be rendered as the options of the select.
+       *
+       * #### Example
+       * ```js
+       * select.items = [
+       *   { label: 'Most recent first', value: 'recent' },
+       *   { component: 'hr' },
+       *   { label: 'Rating: low to high', value: 'rating-asc' },
+       *   { label: 'Rating: high to low', value: 'rating-desc' },
+       *   { component: 'hr' },
+       *   { label: 'Price: low to high', value: 'price-asc', disabled: true },
+       *   { label: 'Price: high to low', value: 'price-desc', disabled: true }
+       * ];
+       * ```
+       *
+       * Note: each item is rendered by default as the internal `<vaadin-select-item>` that is an extension of `<vaadin-item>`.
+       * To render the item with a custom component, provide a tag name by the `component` property.
+       *
+       * @type {!Array<!SelectItem>}
+       */
+      items: {
+        type: Array,
+        observer: '__itemsChanged'
+      },
+
       /**
        * Set when the select is open
        * @type {boolean}
@@ -349,33 +394,42 @@ class Select extends DelegateFocusMixin(FieldMixin(SlotMixin(ElementMixin(Themab
 
     this._overlayElement.requestContentUpdate();
 
-    // Ensure menu element is set
-    this._assignMenuElement();
-
     if (this._menuElement && this._menuElement.items) {
       this._updateSelectedItem(this.value, this._menuElement.items);
     }
   }
 
-  /** @private */
+  /**
+   * @param {SelectRenderer | undefined | null} renderer
+   * @param {SelectOverlay | undefined} overlay
+   * @private
+   */
   _rendererChanged(renderer, overlay) {
     if (!overlay) {
       return;
     }
 
-    overlay.setProperties({ owner: this, renderer });
+    overlay.setProperties({ owner: this, renderer: renderer || this.__defaultRenderer });
 
     this.requestContentUpdate();
+  }
 
-    if (renderer) {
-      this._assignMenuElement();
+  /**
+   * @param {SelectItem[] | undefined | null} newItems
+   * @param {SelectItem[] | undefined | null} oldItems
+   * @private
+   */
+  __itemsChanged(newItems, oldItems) {
+    if (newItems || oldItems) {
+      this.requestContentUpdate();
     }
   }
 
-  /** @private */
-  _assignMenuElement() {
-    const menuElement = this.__getMenuElement();
-
+  /**
+   * @param {HTMLElement} menuElement
+   * @protected
+   */
+  _assignMenuElement(menuElement) {
     if (menuElement && menuElement !== this.__lastMenuElement) {
       this._menuElement = menuElement;
       menuElement.addEventListener('items-changed', () => {
@@ -402,12 +456,6 @@ class Select extends DelegateFocusMixin(FieldMixin(SlotMixin(ElementMixin(Themab
     }
   }
 
-  /** @private */
-  __getMenuElement() {
-    const content = this._overlayElement && this._overlayElement.content;
-    return content ? Array.from(content.children).find((el) => el.localName !== 'style') : null;
-  }
-
   /** @private */
   _valueChanged(value, oldValue) {
     this.toggleAttribute('has-value', Boolean(value));
@@ -528,7 +576,7 @@ class Select extends DelegateFocusMixin(FieldMixin(SlotMixin(ElementMixin(Themab
 
     const label = selected.getAttribute('label');
     if (label) {
-      labelItem = this.__createItem(label);
+      labelItem = this.__createItemElement({ label });
     } else {
       labelItem = selected.cloneNode(true);
     }
@@ -536,26 +584,40 @@ class Select extends DelegateFocusMixin(FieldMixin(SlotMixin(ElementMixin(Themab
     // store reference to the original item
     labelItem._sourceItem = selected;
 
-    this.__appendItem(labelItem);
+    this.__appendValueItemElement(labelItem);
 
     // ensure the item gets proper styles
     labelItem.selected = true;
   }
 
-  /** @private */
-  __createItem(text) {
-    const item = document.createElement('vaadin-item');
-    item.textContent = text;
-    return item;
+  /**
+   * @param {!SelectItem} item
+   * @private
+   */
+  __createItemElement(item) {
+    const itemElement = document.createElement(item.component || 'vaadin-select-item');
+    if (item.label) {
+      itemElement.textContent = item.label;
+    }
+    if (item.value) {
+      itemElement.value = item.value;
+    }
+    if (item.disabled) {
+      itemElement.disabled = item.disabled;
+    }
+    return itemElement;
   }
 
-  /** @private */
-  __appendItem(item) {
-    item.removeAttribute('tabindex');
-    item.removeAttribute('role');
-    item.setAttribute('id', this._fieldId);
+  /**
+   * @param {!HTMLElement} itemElement
+   * @private
+   */
+  __appendValueItemElement(itemElement) {
+    itemElement.removeAttribute('tabindex');
+    itemElement.removeAttribute('role');
+    itemElement.setAttribute('id', this._fieldId);
 
-    this._valueButton.appendChild(item);
+    this._valueButton.appendChild(itemElement);
   }
 
   /** @private */
@@ -572,8 +634,8 @@ class Select extends DelegateFocusMixin(FieldMixin(SlotMixin(ElementMixin(Themab
 
     if (!selected) {
       if (this.placeholder) {
-        const item = this.__createItem(this.placeholder);
-        this.__appendItem(item);
+        const item = this.__createItemElement({ label: this.placeholder });
+        this.__appendValueItemElement(item);
         this._valueButton.setAttribute('placeholder', '');
       }
     } else {
@@ -640,6 +702,30 @@ class Select extends DelegateFocusMixin(FieldMixin(SlotMixin(ElementMixin(Themab
     return !(this.invalid = !(this.disabled || !this.required || this.value));
   }
 
+  /**
+   * Renders items when they are provided by the `items` property and clears the content otherwise.
+   * @param {!HTMLElement} root
+   * @param {!Select} _select
+   * @private
+   */
+  __defaultRenderer(root, _select) {
+    if (!this.items || this.items.length === 0) {
+      root.textContent = '';
+      return;
+    }
+
+    let listBox = root.firstElementChild;
+    if (!listBox) {
+      listBox = document.createElement('vaadin-select-list-box');
+      root.appendChild(listBox);
+    }
+
+    listBox.textContent = '';
+    this.items.forEach((item) => {
+      listBox.appendChild(this.__createItemElement(item));
+    });
+  }
+
   /**
    * Fired when the user commits a value change.
    *

package/theme/lumo/vaadin-select-styles.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import '@vaadin/vaadin-lumo-styles/sizing.js';
@@ -67,7 +67,7 @@ registerStyles(
       box-shadow: none;
     }
 
-    ::slotted(vaadin-item:hover) {
+    ::slotted(:not([slot]):hover) {
       background-color: transparent;
     }
   `,

package/theme/lumo/vaadin-select.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import '@vaadin/button/theme/lumo/vaadin-button.js';

package/theme/material/vaadin-select-styles.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import '@vaadin/vaadin-material-styles/font-icons.js';
@@ -54,12 +54,12 @@ registerStyles(
       display: none;
     }
 
-    ::slotted(vaadin-item) {
+    ::slotted(:not([slot])) {
       font: inherit;
       padding: 4px 0;
     }
 
-    ::slotted(vaadin-item:hover) {
+    ::slotted(:not([slot]):hover) {
       background-color: transparent;
     }
   `,

package/theme/material/vaadin-select.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import '@vaadin/button/theme/material/vaadin-button.js';