@vaadin/select 23.0.0-alpha4 → 23.0.0-beta3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/select",
-  "version": "23.0.0-alpha4",
+  "version": "23.0.0-beta3",
   "publishConfig": {
     "access": "public"
   },
@@ -33,26 +33,25 @@
     "polymer"
   ],
   "dependencies": {
-    "@polymer/iron-media-query": "^3.0.0",
     "@polymer/polymer": "^3.2.0",
-    "@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"
+    "@vaadin/button": "23.0.0-beta3",
+    "@vaadin/component-base": "23.0.0-beta3",
+    "@vaadin/field-base": "23.0.0-beta3",
+    "@vaadin/input-container": "23.0.0-beta3",
+    "@vaadin/item": "23.0.0-beta3",
+    "@vaadin/list-box": "23.0.0-beta3",
+    "@vaadin/vaadin-list-mixin": "23.0.0-beta3",
+    "@vaadin/vaadin-lumo-styles": "23.0.0-beta3",
+    "@vaadin/vaadin-material-styles": "23.0.0-beta3",
+    "@vaadin/vaadin-overlay": "23.0.0-beta3",
+    "@vaadin/vaadin-themable-mixin": "23.0.0-beta3"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/polymer-legacy-adapter": "23.0.0-alpha4",
+    "@vaadin/polymer-legacy-adapter": "23.0.0-beta3",
     "@vaadin/testing-helpers": "^0.3.2",
     "lit": "^2.0.0",
     "sinon": "^9.2.0"
   },
-  "gitHead": "81e2deee5147bb7c1f4884760f4598613306f1fb"
+  "gitHead": "4c87216666541f9eb58f56c475964727822aad53"
 }

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

@@ -12,6 +12,7 @@ registerStyles(
     :host {
       margin: 0;
       min-width: 0;
+      width: 0;
     }
 
     ::slotted(:not([slot])) {

package/src/vaadin-select.d.ts

@@ -11,6 +11,7 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
 
 export interface SelectItem {
   label?: string;
+  value?: string;
   component?: string;
   disabled?: boolean;
 }

package/src/vaadin-select.js

@@ -3,7 +3,6 @@
  * 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';
@@ -11,6 +10,7 @@ import './vaadin-select-overlay.js';
 import './vaadin-select-value-button.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { MediaQueryController } from '@vaadin/component-base/src/media-query-controller.js';
 import { SlotMixin } from '@vaadin/component-base/src/slot-mixin.js';
 import { processTemplates } from '@vaadin/component-base/src/templates.js';
 import { DelegateFocusMixin } from '@vaadin/field-base/src/delegate-focus-mixin.js';
@@ -162,7 +162,7 @@ class Select extends DelegateFocusMixin(FieldMixin(SlotMixin(ElementMixin(Themab
         >
           <slot name="prefix" slot="prefix"></slot>
           <slot name="value"></slot>
-          <div part="toggle-button" slot="suffix"></div>
+          <div part="toggle-button" slot="suffix" aria-hidden="true"></div>
         </vaadin-input-container>
 
         <div part="helper-text">
@@ -181,8 +181,6 @@ class Select extends DelegateFocusMixin(FieldMixin(SlotMixin(ElementMixin(Themab
         phone$="[[_phone]]"
         theme$="[[theme]]"
       ></vaadin-select-overlay>
-
-      <iron-media-query query="[[_phoneMediaQuery]]" query-matches="{{_phone}}"></iron-media-query>
     `;
   }
 
@@ -297,9 +295,6 @@ class Select extends DelegateFocusMixin(FieldMixin(SlotMixin(ElementMixin(Themab
       /** @private */
       _overlayElement: Object,
 
-      /** @private */
-      _inputElement: Object,
-
       /** @private */
       _inputContainer: Object,
 
@@ -378,6 +373,12 @@ class Select extends DelegateFocusMixin(FieldMixin(SlotMixin(ElementMixin(Themab
     this._overlayElement = this.shadowRoot.querySelector('vaadin-select-overlay');
     this._inputContainer = this.shadowRoot.querySelector('[part~="input-field"]');
 
+    this.addController(
+      new MediaQueryController(this._phoneMediaQuery, (matches) => {
+        this._phone = matches;
+      })
+    );
+
     processTemplates(this);
   }
 
@@ -432,10 +433,14 @@ class Select extends DelegateFocusMixin(FieldMixin(SlotMixin(ElementMixin(Themab
   _assignMenuElement(menuElement) {
     if (menuElement && menuElement !== this.__lastMenuElement) {
       this._menuElement = menuElement;
+
+      // Ensure items are initialized
+      this.__initMenuItems(menuElement);
+
       menuElement.addEventListener('items-changed', () => {
-        this._items = menuElement.items;
-        this._items.forEach((item) => item.setAttribute('role', 'option'));
+        this.__initMenuItems(menuElement);
       });
+
       menuElement.addEventListener('selected-changed', () => this.__updateValueButton());
       // Use capture phase to make it possible for `<vaadin-grid-pro-edit-select>`
       // to override and handle the keydown event before the value change happens.
@@ -456,6 +461,14 @@ class Select extends DelegateFocusMixin(FieldMixin(SlotMixin(ElementMixin(Themab
     }
   }
 
+  /** @private */
+  __initMenuItems(menuElement) {
+    if (menuElement.items) {
+      this._items = menuElement.items;
+      this._items.forEach((item) => item.setAttribute('role', 'option'));
+    }
+  }
+
   /** @private */
   _valueChanged(value, oldValue) {
     this.toggleAttribute('has-value', Boolean(value));