@vaadin/select 23.1.0 → 23.2.0-dev.53560527d

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/select",
-  "version": "23.1.0",
+  "version": "23.2.0-dev.53560527d",
   "publishConfig": {
     "access": "public"
   },
@@ -20,10 +20,10 @@
   "module": "vaadin-select.js",
   "type": "module",
   "files": [
+    "lit.d.ts",
+    "lit.js",
     "src",
     "theme",
-    "lit.js",
-    "lit.d.ts",
     "vaadin-*.d.ts",
     "vaadin-*.js"
   ],
@@ -36,25 +36,25 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.2.0",
-    "@vaadin/button": "^23.1.0",
-    "@vaadin/component-base": "^23.1.0",
-    "@vaadin/field-base": "^23.1.0",
-    "@vaadin/input-container": "^23.1.0",
-    "@vaadin/item": "^23.1.0",
-    "@vaadin/list-box": "^23.1.0",
-    "@vaadin/lit-renderer": "^23.1.0",
-    "@vaadin/vaadin-list-mixin": "^23.1.0",
-    "@vaadin/vaadin-lumo-styles": "^23.1.0",
-    "@vaadin/vaadin-material-styles": "^23.1.0",
-    "@vaadin/vaadin-overlay": "^23.1.0",
-    "@vaadin/vaadin-themable-mixin": "^23.1.0"
+    "@vaadin/button": "23.2.0-dev.53560527d",
+    "@vaadin/component-base": "23.2.0-dev.53560527d",
+    "@vaadin/field-base": "23.2.0-dev.53560527d",
+    "@vaadin/input-container": "23.2.0-dev.53560527d",
+    "@vaadin/item": "23.2.0-dev.53560527d",
+    "@vaadin/list-box": "23.2.0-dev.53560527d",
+    "@vaadin/lit-renderer": "23.2.0-dev.53560527d",
+    "@vaadin/vaadin-list-mixin": "23.2.0-dev.53560527d",
+    "@vaadin/vaadin-lumo-styles": "23.2.0-dev.53560527d",
+    "@vaadin/vaadin-material-styles": "23.2.0-dev.53560527d",
+    "@vaadin/vaadin-overlay": "23.2.0-dev.53560527d",
+    "@vaadin/vaadin-themable-mixin": "23.2.0-dev.53560527d"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/polymer-legacy-adapter": "^23.1.0",
+    "@vaadin/polymer-legacy-adapter": "23.2.0-dev.53560527d",
     "@vaadin/testing-helpers": "^0.3.2",
     "lit": "^2.0.0",
     "sinon": "^13.0.2"
   },
-  "gitHead": "322bba42b83f908a78cd972b06acadc5da95a69d"
+  "gitHead": "6c5c18369b09e22e76365d8a8a5e4bbb220f969b"
 }

package/src/vaadin-select.d.ts

@@ -4,7 +4,6 @@
  * 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';
-import { SlotMixin } from '@vaadin/component-base/src/slot-mixin.js';
 import { DelegateFocusMixin } from '@vaadin/field-base/src/delegate-focus-mixin.js';
 import { FieldMixin } from '@vaadin/field-base/src/field-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
@@ -164,7 +163,7 @@ export interface SelectEventMap extends HTMLElementEventMap, SelectCustomEventMa
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
  */
-declare class Select extends DelegateFocusMixin(FieldMixin(SlotMixin(ElementMixin(ThemableMixin(HTMLElement))))) {
+declare class Select extends DelegateFocusMixin(FieldMixin(ElementMixin(ThemableMixin(HTMLElement)))) {
   /**
    * An array containing items that will be rendered as the options of the select.
    *

package/src/vaadin-select.js

@@ -11,8 +11,9 @@ 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 { SlotController } from '@vaadin/component-base/src/slot-controller.js';
 import { processTemplates } from '@vaadin/component-base/src/templates.js';
+import { generateUniqueId } from '@vaadin/component-base/src/unique-id-utils.js';
 import { DelegateFocusMixin } from '@vaadin/field-base/src/delegate-focus-mixin.js';
 import { FieldMixin } from '@vaadin/field-base/src/field-mixin.js';
 import { fieldShared } from '@vaadin/field-base/src/styles/field-shared-styles.js';
@@ -128,11 +129,10 @@ registerStyles('vaadin-select', [fieldShared, inputFieldContainer], { moduleId:
  * @extends HTMLElement
  * @mixes ElementMixin
  * @mixes ThemableMixin
- * @mixes SlotMixin
  * @mixes FieldMixin
  * @mixes DelegateFocusMixin
  */
-class Select extends DelegateFocusMixin(FieldMixin(SlotMixin(ElementMixin(ThemableMixin(PolymerElement))))) {
+class Select extends DelegateFocusMixin(FieldMixin(ElementMixin(ThemableMixin(PolymerElement)))) {
   static get is() {
     return 'vaadin-select';
   }
@@ -311,56 +311,23 @@ class Select extends DelegateFocusMixin(FieldMixin(SlotMixin(ElementMixin(Themab
     ];
   }
 
-  /** @protected */
-  get slots() {
-    return {
-      ...super.slots,
-      value: () => {
-        const button = document.createElement('vaadin-select-value-button');
-        button.setAttribute('aria-haspopup', 'listbox');
-        return button;
-      },
-    };
-  }
-
   /** @protected */
   get _valueButton() {
-    return this._getDirectSlotChild('value');
+    return this._valueButtonController && this._valueButtonController.node;
   }
 
   constructor() {
     super();
 
-    // Ensure every instance has unique ID
-    const uniqueId = (Select._uniqueSelectId = 1 + Select._uniqueSelectId || 0);
-    this._fieldId = `${this.localName}-${uniqueId}`;
+    this._fieldId = `${this.localName}-${generateUniqueId()}`;
 
     this._boundOnKeyDown = this._onKeyDown.bind(this);
   }
 
-  /** @protected */
-  connectedCallback() {
-    super.connectedCallback();
-
-    if (this._valueButton) {
-      this._valueButton.setAttribute('aria-labelledby', `${this._labelId} ${this._fieldId}`);
-
-      this._updateAriaRequired(this.required);
-      this._updateAriaExpanded(this.opened);
-
-      this._setFocusElement(this._valueButton);
-      this.ariaTarget = this._valueButton;
-
-      this._valueButton.addEventListener('keydown', this._boundOnKeyDown);
-    }
-  }
-
   /** @protected */
   disconnectedCallback() {
     super.disconnectedCallback();
-    if (this._valueButton) {
-      this._valueButton.removeEventListener('keydown', this._boundOnKeyDown);
-    }
+
     // Making sure the select is closed and removed from DOM after detaching the select.
     this.opened = false;
   }
@@ -372,6 +339,25 @@ 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._valueButtonController = new SlotController(
+      this,
+      'value',
+      () => document.createElement('vaadin-select-value-button'),
+      (host, btn) => {
+        this._setFocusElement(btn);
+        this.ariaTarget = btn;
+
+        btn.setAttribute('aria-haspopup', 'listbox');
+        btn.setAttribute('aria-labelledby', `${this._labelId} ${this._fieldId}`);
+
+        this._updateAriaRequired(host.required);
+        this._updateAriaExpanded(host.opened);
+
+        btn.addEventListener('keydown', this._boundOnKeyDown);
+      },
+    );
+    this.addController(this._valueButtonController);
+
     this.addController(
       new MediaQueryController(this._phoneMediaQuery, (matches) => {
         this._phone = matches;