@vaadin/combo-box 24.2.0-dev.f254716fe → 24.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/combo-box",
-  "version": "24.2.0-dev.f254716fe",
+  "version": "24.2.0",
   "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.f254716fe",
-    "@vaadin/component-base": "24.2.0-dev.f254716fe",
-    "@vaadin/field-base": "24.2.0-dev.f254716fe",
-    "@vaadin/input-container": "24.2.0-dev.f254716fe",
-    "@vaadin/item": "24.2.0-dev.f254716fe",
-    "@vaadin/lit-renderer": "24.2.0-dev.f254716fe",
-    "@vaadin/overlay": "24.2.0-dev.f254716fe",
-    "@vaadin/vaadin-lumo-styles": "24.2.0-dev.f254716fe",
-    "@vaadin/vaadin-material-styles": "24.2.0-dev.f254716fe",
-    "@vaadin/vaadin-themable-mixin": "24.2.0-dev.f254716fe"
+    "@vaadin/a11y-base": "~24.2.0",
+    "@vaadin/component-base": "~24.2.0",
+    "@vaadin/field-base": "~24.2.0",
+    "@vaadin/input-container": "~24.2.0",
+    "@vaadin/item": "~24.2.0",
+    "@vaadin/lit-renderer": "~24.2.0",
+    "@vaadin/overlay": "~24.2.0",
+    "@vaadin/vaadin-lumo-styles": "~24.2.0",
+    "@vaadin/vaadin-material-styles": "~24.2.0",
+    "@vaadin/vaadin-themable-mixin": "~24.2.0"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.4.3",
-    "@vaadin/text-field": "24.2.0-dev.f254716fe",
+    "@vaadin/testing-helpers": "^0.5.0",
+    "@vaadin/text-field": "~24.2.0",
     "lit": "^2.0.0",
     "sinon": "^13.0.2"
   },
@@ -60,5 +60,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "da54950b9f8c14c6451ede0d426e16a489c7fb9b"
+  "gitHead": "8b9e860d53fc0132d05d3e8701eeded2dca74eba"
 }

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

@@ -63,6 +63,21 @@ export const ComboBoxItemMixin = (superClass) =>
       return ['__rendererOrItemChanged(renderer, index, item.*, selected, focused)', '__updateLabel(label, renderer)'];
     }
 
+    static get observedAttributes() {
+      return [...super.observedAttributes, 'hidden'];
+    }
+
+    attributeChangedCallback(name, oldValue, newValue) {
+      if (name === 'hidden' && newValue !== null) {
+        // The element is being hidden (by virtualizer). Mark one of the __rendererOrItemChanged
+        // dependencies as undefined to make sure it's called when the element is shown again
+        // and assigned properties with possibly identical values as before hiding.
+        this.index = undefined;
+      } else {
+        super.attributeChangedCallback(name, oldValue, newValue);
+      }
+    }
+
     /** @protected */
     connectedCallback() {
       super.connectedCallback();

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.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() : '';
       }

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.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 };