@vaadin/select 22.0.0-rc1 → 23.0.0-alpha2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/select",
-  "version": "22.0.0-rc1",
+  "version": "23.0.0-alpha2",
   "publishConfig": {
     "access": "public"
   },
@@ -34,24 +34,24 @@
   "dependencies": {
     "@polymer/iron-media-query": "^3.0.0",
     "@polymer/polymer": "^3.2.0",
-    "@vaadin/button": "22.0.0-rc1",
-    "@vaadin/component-base": "22.0.0-rc1",
-    "@vaadin/field-base": "22.0.0-rc1",
-    "@vaadin/input-container": "22.0.0-rc1",
-    "@vaadin/item": "22.0.0-rc1",
-    "@vaadin/list-box": "22.0.0-rc1",
-    "@vaadin/vaadin-list-mixin": "22.0.0-rc1",
-    "@vaadin/vaadin-lumo-styles": "22.0.0-rc1",
-    "@vaadin/vaadin-material-styles": "22.0.0-rc1",
-    "@vaadin/vaadin-overlay": "22.0.0-rc1",
-    "@vaadin/vaadin-themable-mixin": "22.0.0-rc1"
+    "@vaadin/button": "23.0.0-alpha2",
+    "@vaadin/component-base": "23.0.0-alpha2",
+    "@vaadin/field-base": "23.0.0-alpha2",
+    "@vaadin/input-container": "23.0.0-alpha2",
+    "@vaadin/item": "23.0.0-alpha2",
+    "@vaadin/list-box": "23.0.0-alpha2",
+    "@vaadin/vaadin-list-mixin": "23.0.0-alpha2",
+    "@vaadin/vaadin-lumo-styles": "23.0.0-alpha2",
+    "@vaadin/vaadin-material-styles": "23.0.0-alpha2",
+    "@vaadin/vaadin-overlay": "23.0.0-alpha2",
+    "@vaadin/vaadin-themable-mixin": "23.0.0-alpha2"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/polymer-legacy-adapter": "22.0.0-rc1",
+    "@vaadin/polymer-legacy-adapter": "23.0.0-alpha2",
     "@vaadin/testing-helpers": "^0.3.2",
     "lit": "^2.0.0",
     "sinon": "^9.2.0"
   },
-  "gitHead": "7b6f44bcd2c0fd415028ace666feeb0fedb1d540"
+  "gitHead": "070f586dead02ca41b66717820c647f48bf1665f"
 }

package/src/vaadin-select-item.js

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright (c) 2021 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) 2021 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-value-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

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

@@ -5,6 +5,8 @@
  */
 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}
@@ -357,13 +402,17 @@ class Select extends DelegateFocusMixin(FieldMixin(SlotMixin(ElementMixin(Themab
     }
   }
 
-  /** @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();
 
@@ -372,6 +421,17 @@ class Select extends DelegateFocusMixin(FieldMixin(SlotMixin(ElementMixin(Themab
     }
   }
 
+  /**
+   * @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();
@@ -489,13 +549,9 @@ class Select extends DelegateFocusMixin(FieldMixin(SlotMixin(ElementMixin(Themab
 
       this._menuElement.focus();
     } else if (wasOpened) {
-      if (this._phone) {
-        this._setFocused(false);
-      } else {
-        this.focus();
-        if (this._openedWithFocusRing) {
-          this.setAttribute('focus-ring', '');
-        }
+      this.focus();
+      if (this._openedWithFocusRing) {
+        this.setAttribute('focus-ring', '');
       }
       this.validate();
     }
@@ -532,7 +588,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);
     }
@@ -540,26 +596,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 */
@@ -576,8 +646,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 {
@@ -644,6 +714,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

@@ -67,7 +67,7 @@ registerStyles(
       box-shadow: none;
     }
 
-    ::slotted(vaadin-item:hover) {
+    ::slotted(:not([slot]):hover) {
       background-color: transparent;
     }
   `,

package/theme/material/vaadin-select-styles.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;
     }
   `,