@vaadin/multi-select-combo-box 24.2.0-dev.e9803eea7 → 24.3.0-alpha1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/multi-select-combo-box",
-  "version": "24.2.0-dev.e9803eea7",
+  "version": "24.3.0-alpha1",
   "publishConfig": {
     "access": "public"
   },
@@ -37,21 +37,21 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.2.0-dev.e9803eea7",
-    "@vaadin/combo-box": "24.2.0-dev.e9803eea7",
-    "@vaadin/component-base": "24.2.0-dev.e9803eea7",
-    "@vaadin/field-base": "24.2.0-dev.e9803eea7",
-    "@vaadin/input-container": "24.2.0-dev.e9803eea7",
-    "@vaadin/item": "24.2.0-dev.e9803eea7",
-    "@vaadin/lit-renderer": "24.2.0-dev.e9803eea7",
-    "@vaadin/overlay": "24.2.0-dev.e9803eea7",
-    "@vaadin/vaadin-lumo-styles": "24.2.0-dev.e9803eea7",
-    "@vaadin/vaadin-material-styles": "24.2.0-dev.e9803eea7",
-    "@vaadin/vaadin-themable-mixin": "24.2.0-dev.e9803eea7"
+    "@vaadin/a11y-base": "24.3.0-alpha1",
+    "@vaadin/combo-box": "24.3.0-alpha1",
+    "@vaadin/component-base": "24.3.0-alpha1",
+    "@vaadin/field-base": "24.3.0-alpha1",
+    "@vaadin/input-container": "24.3.0-alpha1",
+    "@vaadin/item": "24.3.0-alpha1",
+    "@vaadin/lit-renderer": "24.3.0-alpha1",
+    "@vaadin/overlay": "24.3.0-alpha1",
+    "@vaadin/vaadin-lumo-styles": "24.3.0-alpha1",
+    "@vaadin/vaadin-material-styles": "24.3.0-alpha1",
+    "@vaadin/vaadin-themable-mixin": "24.3.0-alpha1"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.4.3",
+    "@vaadin/testing-helpers": "^0.5.0",
     "lit": "^2.0.0",
     "sinon": "^13.0.2"
   },
@@ -59,5 +59,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "a065b79b9d5a189e457fab312cc8aff0d7f2f910"
+  "gitHead": "9ca6f3ca220a777e8eea181a1f5717e39a732240"
 }

package/src/vaadin-multi-select-combo-box-chip.js

@@ -4,6 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 /**
@@ -20,6 +21,7 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
+ * @customElement
  * @extends HTMLElement
  * @private
  */
@@ -99,4 +101,4 @@ class MultiSelectComboBoxChip extends ThemableMixin(PolymerElement) {
   }
 }
 
-customElements.define(MultiSelectComboBoxChip.is, MultiSelectComboBoxChip);
+defineCustomElement(MultiSelectComboBoxChip);

package/src/vaadin-multi-select-combo-box-container.js

@@ -3,6 +3,7 @@
  * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { InputContainer } from '@vaadin/input-container/src/vaadin-input-container.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
@@ -24,6 +25,7 @@ let memoizedTemplate;
 /**
  * An element used internally by `<vaadin-multi-select-combo-box>`. Not intended to be used separately.
  *
+ * @customElement
  * @extends InputContainer
  * @private
  */
@@ -49,4 +51,4 @@ class MultiSelectComboBoxContainer extends InputContainer {
   }
 }
 
-customElements.define(MultiSelectComboBoxContainer.is, MultiSelectComboBoxContainer);
+defineCustomElement(MultiSelectComboBoxContainer);

package/src/vaadin-multi-select-combo-box-internal.js

@@ -10,11 +10,13 @@ import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { ComboBoxDataProviderMixin } from '@vaadin/combo-box/src/vaadin-combo-box-data-provider-mixin.js';
 import { ComboBoxMixin } from '@vaadin/combo-box/src/vaadin-combo-box-mixin.js';
 import { ComboBoxPlaceholder } from '@vaadin/combo-box/src/vaadin-combo-box-placeholder.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 /**
  * An element used internally by `<vaadin-multi-select-combo-box>`. Not intended to be used separately.
  *
+ * @customElement
  * @extends HTMLElement
  * @mixes ComboBoxDataProviderMixin
  * @mixes ComboBoxMixin
@@ -160,33 +162,44 @@ class MultiSelectComboBoxInternal extends ComboBoxDataProviderMixin(ComboBoxMixi
    * @override
    */
   _onEnter(event) {
-    this.__enterPressed = true;
+    if (this.opened) {
+      // Do not submit the surrounding form.
+      event.preventDefault();
+      // Do not trigger global listeners.
+      event.stopPropagation();
+
+      if (this.readonly) {
+        this.close();
+      } else {
+        // Keep selected item focused after committing on Enter.
+        const focusedItem = this.filteredItems[this._focusedIndex];
+        this._commitValue();
+        this._focusedIndex = this.filteredItems.indexOf(focusedItem);
+      }
+
+      return;
+    }
 
     super._onEnter(event);
   }
 
   /**
+   * Override Escape handler to not clear
+   * selected items when readonly.
+   * @param {!Event} event
    * @protected
    * @override
    */
-  _closeOrCommit() {
+  _onEscape(event) {
     if (this.readonly) {
-      this.close();
-      return;
-    }
-
-    if (this.__enterPressed) {
-      this.__enterPressed = null;
-
-      // Keep selected item focused after committing on Enter.
-      const focusedItem = this.filteredItems[this._focusedIndex];
-      this._commitValue();
-      this._focusedIndex = this.filteredItems.indexOf(focusedItem);
-
+      event.stopPropagation();
+      if (this.opened) {
+        this.close();
+      }
       return;
     }
 
-    super._closeOrCommit();
+    super._onEscape(event);
   }
 
   /**
@@ -331,4 +344,4 @@ class MultiSelectComboBoxInternal extends ComboBoxDataProviderMixin(ComboBoxMixi
   }
 }
 
-customElements.define(MultiSelectComboBoxInternal.is, MultiSelectComboBoxInternal);
+defineCustomElement(MultiSelectComboBoxInternal);

package/src/vaadin-multi-select-combo-box-item.js

@@ -5,6 +5,7 @@
  */
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { ComboBoxItemMixin } from '@vaadin/combo-box/src/vaadin-combo-box-item-mixin.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
@@ -29,6 +30,7 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
+ * @customElement
  * @mixes ComboBoxItemMixin
  * @mixes ThemableMixin
  * @mixes DirMixin
@@ -58,4 +60,4 @@ export class MultiSelectComboBoxItem extends ComboBoxItemMixin(ThemableMixin(Dir
   }
 }
 
-customElements.define(MultiSelectComboBoxItem.is, MultiSelectComboBoxItem);
+defineCustomElement(MultiSelectComboBoxItem);

package/src/vaadin-multi-select-combo-box-overlay.js

@@ -4,6 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { ComboBoxOverlayMixin } from '@vaadin/combo-box/src/vaadin-combo-box-overlay-mixin.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { Overlay } from '@vaadin/overlay/src/vaadin-overlay.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
@@ -31,6 +32,7 @@ let memoizedTemplate;
 /**
  * An element used internally by `<vaadin-multi-select-combo-box>`. Not intended to be used separately.
  *
+ * @customElement
  * @extends ComboBoxOverlay
  * @private
  */
@@ -56,4 +58,4 @@ class MultiSelectComboBoxOverlay extends ComboBoxOverlayMixin(Overlay) {
   }
 }
 
-customElements.define(MultiSelectComboBoxOverlay.is, MultiSelectComboBoxOverlay);
+defineCustomElement(MultiSelectComboBoxOverlay);

package/src/vaadin-multi-select-combo-box-scroller.js

@@ -6,10 +6,12 @@
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { ComboBoxPlaceholder } from '@vaadin/combo-box/src/vaadin-combo-box-placeholder.js';
 import { ComboBoxScrollerMixin } from '@vaadin/combo-box/src/vaadin-combo-box-scroller-mixin.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 
 /**
  * An element used internally by `<vaadin-multi-select-combo-box>`. Not intended to be used separately.
  *
+ * @customElement
  * @extends HTMLElement
  * @mixes ComboBoxScrollerMixin
  * @private
@@ -86,4 +88,4 @@ export class MultiSelectComboBoxScroller extends ComboBoxScrollerMixin(PolymerEl
   }
 }
 
-customElements.define(MultiSelectComboBoxScroller.is, MultiSelectComboBoxScroller);
+defineCustomElement(MultiSelectComboBoxScroller);

package/src/vaadin-multi-select-combo-box.d.ts

@@ -16,13 +16,13 @@ import type { ControllerMixinClass } from '@vaadin/component-base/src/controller
 import type { DelegateStateMixinClass } from '@vaadin/component-base/src/delegate-state-mixin.js';
 import type { ElementMixinClass } from '@vaadin/component-base/src/element-mixin.js';
 import type { ResizeMixinClass } from '@vaadin/component-base/src/resize-mixin.js';
+import type { SlotStylesMixinClass } from '@vaadin/component-base/src/slot-styles-mixin.js';
 import type { ClearButtonMixinClass } from '@vaadin/field-base/src/clear-button-mixin.js';
 import type { FieldMixinClass } from '@vaadin/field-base/src/field-mixin.js';
 import type { InputConstraintsMixinClass } from '@vaadin/field-base/src/input-constraints-mixin.js';
 import type { InputControlMixinClass } from '@vaadin/field-base/src/input-control-mixin.js';
 import type { InputMixinClass } from '@vaadin/field-base/src/input-mixin.js';
 import type { LabelMixinClass } from '@vaadin/field-base/src/label-mixin.js';
-import type { SlotStylesMixinClass } from '@vaadin/field-base/src/slot-styles-mixin.js';
 import type { ValidateMixinClass } from '@vaadin/field-base/src/validate-mixin.js';
 import type { ThemableMixinClass } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import type { ThemePropertyMixinClass } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
@@ -53,6 +53,11 @@ export type MultiSelectComboBoxChangeEvent<TItem> = Event & {
  */
 export type MultiSelectComboBoxCustomValueSetEvent = CustomEvent<string>;
 
+/**
+ * Fired when the `dirty` property changes.
+ */
+export type MultiSelectComboBoxDirtyChangedEvent = CustomEvent<{ value: boolean }>;
+
 /**
  * Fired when the `filter` property changes.
  */
@@ -63,6 +68,11 @@ export type MultiSelectComboBoxFilterChangedEvent = CustomEvent<{ value: string
  */
 export type MultiSelectComboBoxInvalidChangedEvent = CustomEvent<{ value: boolean }>;
 
+/**
+ * Fired when the `opened` property changes.
+ */
+export type MultiSelectComboBoxOpenedChangedEvent = CustomEvent<{ value: boolean }>;
+
 /**
  * Fired when the `selectedItems` property changes.
  */
@@ -78,10 +88,14 @@ export interface MultiSelectComboBoxEventMap<TItem> extends HTMLElementEventMap
 
   'custom-value-set': MultiSelectComboBoxCustomValueSetEvent;
 
+  'dirty-changed': MultiSelectComboBoxDirtyChangedEvent;
+
   'filter-changed': MultiSelectComboBoxFilterChangedEvent;
 
   'invalid-changed': MultiSelectComboBoxInvalidChangedEvent;
 
+  'opened-changed': MultiSelectComboBoxOpenedChangedEvent;
+
   'selected-items-changed': MultiSelectComboBoxSelectedItemsChangedEvent<TItem>;
 
   validated: MultiSelectComboBoxValidatedEvent;
@@ -157,8 +171,10 @@ export interface MultiSelectComboBoxEventMap<TItem> extends HTMLElementEventMap
  *
  * @fires {Event} change - Fired when the user commits a value change.
  * @fires {CustomEvent} custom-value-set - Fired when the user sets a custom value.
+ * @fires {CustomEvent} dirty-changed - Fired when the `dirty` property changes.
  * @fires {CustomEvent} filter-changed - Fired when the `filter` property changes.
  * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
+ * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
  * @fires {CustomEvent} selected-items-changed - Fired when the `selectedItems` property changes.
  * @fires {CustomEvent} validated - Fired whenever the field is validated.
  */

package/src/vaadin-multi-select-combo-box.js

@@ -8,6 +8,7 @@ import './vaadin-multi-select-combo-box-container.js';
 import './vaadin-multi-select-combo-box-internal.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { announce } from '@vaadin/a11y-base/src/announce.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
 import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
@@ -120,11 +121,14 @@ registerStyles('vaadin-multi-select-combo-box', [inputFieldShared, multiSelectCo
  *
  * @fires {Event} change - Fired when the user commits a value change.
  * @fires {CustomEvent} custom-value-set - Fired when the user sets a custom value.
+ * @fires {CustomEvent} dirty-changed - Fired when the `dirty` property changes.
  * @fires {CustomEvent} filter-changed - Fired when the `filter` property changes.
  * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
+ * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
  * @fires {CustomEvent} selected-items-changed - Fired when the `selectedItems` property changes.
  * @fires {CustomEvent} validated - Fired whenever the field is validated.
  *
+ * @customElement
  * @extends HTMLElement
  * @mixes ElementMixin
  * @mixes ThemableMixin
@@ -527,6 +531,7 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
     this._tooltipController = new TooltipController(this);
     this.addController(this._tooltipController);
     this._tooltipController.setPosition('top');
+    this._tooltipController.setAriaTarget(this.inputElement);
     this._tooltipController.setShouldShow((target) => !target.opened);
 
     this._inputField = this.shadowRoot.querySelector('[part="input-field"]');
@@ -812,6 +817,7 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
 
   /** @private */
   __updateSelection(selectedItems) {
+    this.dirty = true;
     this.selectedItems = selectedItems;
 
     this.validate();
@@ -1144,6 +1150,6 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
   }
 }
 
-customElements.define(MultiSelectComboBox.is, MultiSelectComboBox);
+defineCustomElement(MultiSelectComboBox);
 
 export { MultiSelectComboBox };