@vaadin/field-highlighter 23.1.0-beta2 → 23.1.0-beta3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/field-highlighter",
-  "version": "23.1.0-beta2",
+  "version": "23.1.0-beta3",
   "publishConfig": {
     "access": "public"
   },
@@ -34,27 +34,27 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "23.1.0-beta2",
-    "@vaadin/vaadin-lumo-styles": "23.1.0-beta2",
-    "@vaadin/vaadin-material-styles": "23.1.0-beta2",
-    "@vaadin/vaadin-overlay": "23.1.0-beta2",
-    "@vaadin/vaadin-themable-mixin": "23.1.0-beta2",
+    "@vaadin/component-base": "23.1.0-beta3",
+    "@vaadin/vaadin-lumo-styles": "23.1.0-beta3",
+    "@vaadin/vaadin-material-styles": "23.1.0-beta3",
+    "@vaadin/vaadin-overlay": "23.1.0-beta3",
+    "@vaadin/vaadin-themable-mixin": "23.1.0-beta3",
     "lit": "^2.0.0"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/checkbox": "23.1.0-beta2",
-    "@vaadin/combo-box": "23.1.0-beta2",
-    "@vaadin/date-picker": "23.1.0-beta2",
-    "@vaadin/date-time-picker": "23.1.0-beta2",
-    "@vaadin/item": "23.1.0-beta2",
-    "@vaadin/list-box": "23.1.0-beta2",
-    "@vaadin/radio-group": "23.1.0-beta2",
-    "@vaadin/select": "23.1.0-beta2",
+    "@vaadin/checkbox": "23.1.0-beta3",
+    "@vaadin/combo-box": "23.1.0-beta3",
+    "@vaadin/date-picker": "23.1.0-beta3",
+    "@vaadin/date-time-picker": "23.1.0-beta3",
+    "@vaadin/item": "23.1.0-beta3",
+    "@vaadin/list-box": "23.1.0-beta3",
+    "@vaadin/radio-group": "23.1.0-beta3",
+    "@vaadin/select": "23.1.0-beta3",
     "@vaadin/testing-helpers": "^0.3.2",
-    "@vaadin/text-field": "23.1.0-beta2",
-    "@vaadin/time-picker": "23.1.0-beta2",
+    "@vaadin/text-field": "23.1.0-beta3",
+    "@vaadin/time-picker": "23.1.0-beta3",
     "sinon": "^13.0.2"
   },
-  "gitHead": "f11f9245a0b5e6bf912725a501c27c24b74e7c8d"
+  "gitHead": "c787ceb8a312f88631c6d429ff320d5f89b1b838"
 }

package/src/vaadin-user-tags-overlay.js

@@ -4,17 +4,15 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { OverlayElement } from '@vaadin/vaadin-overlay/src/vaadin-overlay.js';
+import { PositionMixin } from '@vaadin/vaadin-overlay/src/vaadin-overlay-position-mixin.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 registerStyles(
   'vaadin-user-tags-overlay',
   css`
     :host {
-      align-items: stretch;
-      justify-content: flex-start;
       background: transparent;
       box-shadow: none;
-      bottom: auto;
     }
 
     [part='overlay'] {
@@ -42,14 +40,6 @@ registerStyles(
       padding: 0;
     }
 
-    :host([dir='rtl']) {
-      left: auto;
-    }
-
-    :host(:not([dir='rtl'])) {
-      right: auto;
-    }
-
     :host([opening]),
     :host([closing]) {
       animation: 0.14s user-tags-overlay-dummy-animation;
@@ -73,7 +63,7 @@ registerStyles(
  * @extends OverlayElement
  * @private
  */
-class UserTagsOverlay extends OverlayElement {
+class UserTagsOverlay extends PositionMixin(OverlayElement) {
   static get is() {
     return 'vaadin-user-tags-overlay';
   }

package/src/vaadin-user-tags.js

@@ -45,6 +45,7 @@ export class UserTags extends PolymerElement {
         id="overlay"
         modeless
         opened="[[opened]]"
+        no-vertical-overlap
         on-vaadin-overlay-open="_onOverlayOpen"
       ></vaadin-user-tags-overlay>
     `;
@@ -68,7 +69,6 @@ export class UserTags extends PolymerElement {
       opened: {
         type: Boolean,
         value: false,
-        observer: '_openedChanged',
       },
 
       /**
@@ -85,6 +85,7 @@ export class UserTags extends PolymerElement {
        */
       target: {
         type: Object,
+        observer: '__targetChanged',
       },
 
       /**
@@ -103,23 +104,9 @@ export class UserTags extends PolymerElement {
     };
   }
 
-  constructor() {
-    super();
-    this._boundSetPosition = this._debounceSetPosition.bind(this);
-  }
-
-  /** @protected */
-  connectedCallback() {
-    super.connectedCallback();
-    window.addEventListener('resize', this._boundSetPosition);
-    window.addEventListener('scroll', this._boundSetPosition);
-  }
-
   /** @protected */
   disconnectedCallback() {
     super.disconnectedCallback();
-    window.removeEventListener('resize', this._boundSetPosition);
-    window.removeEventListener('scroll', this._boundSetPosition);
     this.opened = false;
   }
 
@@ -138,15 +125,8 @@ export class UserTags extends PolymerElement {
   }
 
   /** @private */
-  _debounceSetPosition() {
-    this._debouncePosition = Debouncer.debounce(this._debouncePosition, timeOut.after(16), () => this._setPosition());
-  }
-
-  /** @private */
-  _openedChanged(opened) {
-    if (opened) {
-      this._setPosition();
-    }
+  __targetChanged(target) {
+    this.$.overlay.positionTarget = target;
   }
 
   /** @private */
@@ -156,34 +136,6 @@ export class UserTags extends PolymerElement {
     }
   }
 
-  /**
-   * Set position of the user tags overlay.
-   * TODO: use PositionMixin instead.
-   *
-   * @private
-   */
-  _setPosition() {
-    if (!this.opened) {
-      return;
-    }
-
-    const targetRect = this.target.getBoundingClientRect();
-
-    const overlayRect = this.$.overlay.getBoundingClientRect();
-
-    this._translateX =
-      this.getAttribute('dir') === 'rtl'
-        ? targetRect.right - overlayRect.right + (this._translateX || 0)
-        : targetRect.left - overlayRect.left + (this._translateX || 0);
-    this._translateY = targetRect.top - overlayRect.top + (this._translateY || 0) + targetRect.height;
-
-    const devicePixelRatio = window.devicePixelRatio || 1;
-    this._translateX = Math.round(this._translateX * devicePixelRatio) / devicePixelRatio;
-    this._translateY = Math.round(this._translateY * devicePixelRatio) / devicePixelRatio;
-
-    this.$.overlay.style.transform = `translate3d(${this._translateX}px, ${this._translateY}px, 0)`;
-  }
-
   get wrapper() {
     return this.$.overlay.content.querySelector('[part="tags"]');
   }