@vaadin/select 23.1.2 → 23.2.0-alpha3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/select",
-  "version": "23.1.2",
+  "version": "23.2.0-alpha3",
   "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.2",
-    "@vaadin/component-base": "^23.1.2",
-    "@vaadin/field-base": "^23.1.2",
-    "@vaadin/input-container": "^23.1.2",
-    "@vaadin/item": "^23.1.2",
-    "@vaadin/list-box": "^23.1.2",
-    "@vaadin/lit-renderer": "^23.1.2",
-    "@vaadin/vaadin-list-mixin": "^23.1.2",
-    "@vaadin/vaadin-lumo-styles": "^23.1.2",
-    "@vaadin/vaadin-material-styles": "^23.1.2",
-    "@vaadin/vaadin-overlay": "^23.1.2",
-    "@vaadin/vaadin-themable-mixin": "^23.1.2"
+    "@vaadin/button": "23.2.0-alpha3",
+    "@vaadin/component-base": "23.2.0-alpha3",
+    "@vaadin/field-base": "23.2.0-alpha3",
+    "@vaadin/input-container": "23.2.0-alpha3",
+    "@vaadin/item": "23.2.0-alpha3",
+    "@vaadin/list-box": "23.2.0-alpha3",
+    "@vaadin/lit-renderer": "23.2.0-alpha3",
+    "@vaadin/vaadin-list-mixin": "23.2.0-alpha3",
+    "@vaadin/vaadin-lumo-styles": "23.2.0-alpha3",
+    "@vaadin/vaadin-material-styles": "23.2.0-alpha3",
+    "@vaadin/vaadin-overlay": "23.2.0-alpha3",
+    "@vaadin/vaadin-themable-mixin": "23.2.0-alpha3"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/polymer-legacy-adapter": "^23.1.2",
+    "@vaadin/polymer-legacy-adapter": "23.2.0-alpha3",
     "@vaadin/testing-helpers": "^0.3.2",
     "lit": "^2.0.0",
     "sinon": "^13.0.2"
   },
-  "gitHead": "6fb205c6e9a761feadfb779dd5d7af96d3102e56"
+  "gitHead": "06e5875be93ca50da2846dafc65a8531010c0576"
 }

package/src/lit/renderer-directives.d.ts

@@ -3,10 +3,10 @@
  * Copyright (c) 2017 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { TemplateResult } from 'lit';
-import { DirectiveResult } from 'lit/directive.js';
+import type { TemplateResult } from 'lit';
+import type { DirectiveResult } from 'lit/directive.js';
 import { LitRendererDirective } from '@vaadin/lit-renderer';
-import { Select } from '../vaadin-select.js';
+import type { Select } from '../vaadin-select.js';
 
 export type SelectLitRenderer = (select: Select) => TemplateResult;
 

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';
@@ -48,12 +47,19 @@ export type SelectInvalidChangedEvent = CustomEvent<{ value: boolean }>;
  */
 export type SelectValueChangedEvent = CustomEvent<{ value: string }>;
 
+/**
+ * Fired whenever the field is validated.
+ */
+export type SelectValidatedEvent = CustomEvent<{ valid: boolean }>;
+
 export interface SelectCustomEventMap {
   'opened-changed': SelectOpenedChangedEvent;
 
   'invalid-changed': SelectInvalidChangedEvent;
 
   'value-changed': SelectValueChangedEvent;
+
+  validated: SelectValidatedEvent;
 }
 
 export interface SelectEventMap extends HTMLElementEventMap, SelectCustomEventMap {
@@ -163,8 +169,9 @@ export interface SelectEventMap extends HTMLElementEventMap, SelectCustomEventMa
  * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
+ * @fires {CustomEvent} validated - Fired whenever the field is validated.
  */
-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';
@@ -124,15 +125,15 @@ registerStyles('vaadin-select', [fieldShared, inputFieldContainer], { moduleId:
  * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
+ * @fires {CustomEvent} validated - Fired whenever the field is validated.
  *
  * @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 +312,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 +340,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;