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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/combo-box",
-  "version": "24.2.0-dev.e9803eea7",
+  "version": "24.3.0-alpha1",
   "publishConfig": {
     "access": "public"
   },
@@ -38,21 +38,21 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "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/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/text-field": "24.2.0-dev.e9803eea7",
+    "@vaadin/testing-helpers": "^0.5.0",
+    "@vaadin/text-field": "24.3.0-alpha1",
     "lit": "^2.0.0",
     "sinon": "^13.0.2"
   },
@@ -60,5 +60,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "a065b79b9d5a189e457fab312cc8aff0d7f2f910"
+  "gitHead": "9ca6f3ca220a777e8eea181a1f5717e39a732240"
 }

package/src/vaadin-combo-box-item.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 { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { ComboBoxItemMixin } from './vaadin-combo-box-item-mixin.js';
@@ -29,6 +30,7 @@ import { ComboBoxItemMixin } from './vaadin-combo-box-item-mixin.js';
  *
  * 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 ComboBoxItem extends ComboBoxItemMixin(ThemableMixin(DirMixin(Polym
   }
 }
 
-customElements.define(ComboBoxItem.is, ComboBoxItem);
+defineCustomElement(ComboBoxItem);

package/src/vaadin-combo-box-light.d.ts

@@ -41,6 +41,11 @@ export type ComboBoxLightOpenedChangedEvent = CustomEvent<{ value: boolean }>;
  */
 export type ComboBoxLightInvalidChangedEvent = CustomEvent<{ value: boolean }>;
 
+/**
+ * Fired when the `dirty` property changes.
+ */
+export type ComboBoxLightDirtyChangedEvent = CustomEvent<{ value: boolean }>;
+
 /**
  * Fired when the `value` property changes.
  */
@@ -72,6 +77,8 @@ export interface ComboBoxLightEventMap<TItem> extends HTMLElementEventMap {
 
   'invalid-changed': ComboBoxLightInvalidChangedEvent;
 
+  'dirty-changed': ComboBoxLightDirtyChangedEvent;
+
   'value-changed': ComboBoxLightValueChangedEvent;
 
   'selected-item-changed': ComboBoxLightSelectedItemChangedEvent<TItem>;
@@ -122,6 +129,7 @@ export interface ComboBoxLightEventMap<TItem> extends HTMLElementEventMap {
  * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
  * @fires {CustomEvent} selected-item-changed - Fired when the `selectedItem` property changes.
+ * @fires {CustomEvent} dirty-changed - Fired when the `dirty` property changes.
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
  * @fires {CustomEvent} validated - Fired whenever the field is validated.
  */

package/src/vaadin-combo-box-light.js

@@ -9,6 +9,7 @@ import './vaadin-combo-box-scroller.js';
 import { dashToCamelCase } from '@polymer/polymer/lib/utils/case-map.js';
 import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ValidateMixin } from '@vaadin/field-base/src/validate-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { ComboBoxDataProviderMixin } from './vaadin-combo-box-data-provider-mixin.js';
@@ -60,6 +61,7 @@ import { ComboBoxMixin } from './vaadin-combo-box-mixin.js';
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
  * @fires {CustomEvent} validated - Fired whenever the field is validated.
  *
+ * @customElement
  * @extends HTMLElement
  * @mixes ComboBoxDataProviderMixin
  * @mixes ComboBoxMixin
@@ -212,6 +214,6 @@ class ComboBoxLight extends ComboBoxDataProviderMixin(ComboBoxMixin(ValidateMixi
   }
 }
 
-customElements.define(ComboBoxLight.is, ComboBoxLight);
+defineCustomElement(ComboBoxLight);
 
 export { ComboBoxLight };

package/src/vaadin-combo-box-mixin.js

@@ -10,6 +10,7 @@ import { KeyboardMixin } from '@vaadin/a11y-base/src/keyboard-mixin.js';
 import { isTouch } from '@vaadin/component-base/src/browser-utils.js';
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
+import { get } from '@vaadin/component-base/src/path-utils.js';
 import { processTemplates } from '@vaadin/component-base/src/templates.js';
 import { InputMixin } from '@vaadin/field-base/src/input-mixin.js';
 import { ValidateMixin } from '@vaadin/field-base/src/validate-mixin.js';
@@ -661,7 +662,7 @@ export const ComboBoxMixin = (subclass) =>
 
     /** @private */
     _getItemLabel(item) {
-      let label = item && this.itemLabelPath ? this.get(this.itemLabelPath, item) : undefined;
+      let label = item && this.itemLabelPath ? get(this.itemLabelPath, item) : undefined;
       if (label === undefined || label === null) {
         label = item ? item.toString() : '';
       }
@@ -670,7 +671,7 @@ export const ComboBoxMixin = (subclass) =>
 
     /** @private */
     _getItemValue(item) {
-      let value = item && this.itemValuePath ? this.get(this.itemValuePath, item) : undefined;
+      let value = item && this.itemValuePath ? get(this.itemValuePath, item) : undefined;
       if (value === undefined) {
         value = item ? item.toString() : '';
       }
@@ -1086,13 +1087,18 @@ export const ComboBoxMixin = (subclass) =>
 
     /** @private */
     _detectAndDispatchChange() {
+      const isValueChanged = this.value !== this._lastCommittedValue;
+      if (isValueChanged) {
+        this.dirty = true;
+      }
+
       // Do not validate when focusout is caused by document
       // losing focus, which happens on browser tab switch.
       if (document.hasFocus()) {
         this.validate();
       }
 
-      if (this.value !== this._lastCommittedValue) {
+      if (isValueChanged) {
         this.dispatchEvent(new CustomEvent('change', { bubbles: true }));
         this._lastCommittedValue = this.value;
       }

package/src/vaadin-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 { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
 import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.js';
@@ -29,6 +30,7 @@ registerStyles('vaadin-combo-box-overlay', [overlayStyles, comboBoxOverlayStyles
 /**
  * An element used internally by `<vaadin-combo-box>`. Not intended to be used separately.
  *
+ * @customElement
  * @extends HTMLElement
  * @mixes ComboBoxOverlayMixin
  * @mixes DirMixin
@@ -52,4 +54,4 @@ export class ComboBoxOverlay extends ComboBoxOverlayMixin(OverlayMixin(DirMixin(
   }
 }
 
-customElements.define(ComboBoxOverlay.is, ComboBoxOverlay);
+defineCustomElement(ComboBoxOverlay);

package/src/vaadin-combo-box-scroller-mixin.js

@@ -3,6 +3,7 @@
  * Copyright (c) 2015 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { get } from '@vaadin/component-base/src/path-utils.js';
 import { generateUniqueId } from '@vaadin/component-base/src/unique-id-utils.js';
 import { Virtualizer } from '@vaadin/component-base/src/virtualizer.js';
 import { ComboBoxPlaceholder } from './vaadin-combo-box-placeholder.js';
@@ -202,7 +203,7 @@ export const ComboBoxScrollerMixin = (superClass) =>
       if (item instanceof ComboBoxPlaceholder) {
         return false;
       } else if (itemIdPath && item !== undefined && selectedItem !== undefined) {
-        return this.get(itemIdPath, item) === this.get(itemIdPath, selectedItem);
+        return get(itemIdPath, item) === get(itemIdPath, selectedItem);
       }
       return item === selectedItem;
     }

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

@@ -4,11 +4,13 @@
  * 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 { ComboBoxScrollerMixin } from './vaadin-combo-box-scroller-mixin.js';
 
 /**
  * An element used internally by `<vaadin-combo-box>`. Not intended to be used separately.
  *
+ * @customElement
  * @extends HTMLElement
  * @mixes ComboBoxScrollerMixin
  * @private
@@ -50,4 +52,4 @@ export class ComboBoxScroller extends ComboBoxScrollerMixin(PolymerElement) {
   }
 }
 
-customElements.define(ComboBoxScroller.is, ComboBoxScroller);
+defineCustomElement(ComboBoxScroller);

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

@@ -53,6 +53,11 @@ export type ComboBoxOpenedChangedEvent = CustomEvent<{ value: boolean }>;
  */
 export type ComboBoxInvalidChangedEvent = CustomEvent<{ value: boolean }>;
 
+/**
+ * Fired when the `dirty` property changes.
+ */
+export type ComboBoxDirtyChangedEvent = CustomEvent<{ value: boolean }>;
+
 /**
  * Fired when the `value` property changes.
  */
@@ -84,6 +89,8 @@ export interface ComboBoxEventMap<TItem> extends HTMLElementEventMap {
 
   'invalid-changed': ComboBoxInvalidChangedEvent;
 
+  'dirty-changed': ComboBoxDirtyChangedEvent;
+
   'value-changed': ComboBoxValueChangedEvent;
 
   'selected-item-changed': ComboBoxSelectedItemChangedEvent<TItem>;
@@ -212,6 +219,7 @@ export interface ComboBoxEventMap<TItem> extends HTMLElementEventMap {
  * @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} dirty-changed - Fired when the `dirty` property changes.
  * @fires {CustomEvent} selected-item-changed - Fired when the `selectedItem` property changes.
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
  * @fires {CustomEvent} validated - Fired whenever the field is validated.

package/src/vaadin-combo-box.js

@@ -8,6 +8,7 @@ import './vaadin-combo-box-item.js';
 import './vaadin-combo-box-overlay.js';
 import './vaadin-combo-box-scroller.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
 import { InputControlMixin } from '@vaadin/field-base/src/input-control-mixin.js';
@@ -146,6 +147,7 @@ registerStyles('vaadin-combo-box', inputFieldShared, { moduleId: 'vaadin-combo-b
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
  * @fires {CustomEvent} validated - Fired whenever the field is validated.
  *
+ * @customElement
  * @extends HTMLElement
  * @mixes ElementMixin
  * @mixes ThemableMixin
@@ -248,6 +250,7 @@ class ComboBox extends ComboBoxDataProviderMixin(
     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._positionTarget = this.shadowRoot.querySelector('[part="input-field"]');
@@ -282,6 +285,6 @@ class ComboBox extends ComboBoxDataProviderMixin(
   }
 }
 
-customElements.define(ComboBox.is, ComboBox);
+defineCustomElement(ComboBox);
 
 export { ComboBox };