@vaadin/field-highlighter 23.0.9 → 23.0.12

package/package.json

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

package/src/fields/vaadin-component-observer.js

@@ -109,8 +109,8 @@ export class ComponentObserver {
       new CustomEvent(`vaadin-highlight-${action}`, {
         bubbles: true,
         composed: true,
-        detail: { fieldIndex: this.getFieldIndex(field) }
-      })
+        detail: { fieldIndex: this.getFieldIndex(field) },
+      }),
     );
   }
 

package/src/vaadin-field-outline.js

@@ -54,8 +54,8 @@ export class FieldOutline extends ThemableMixin(DirMixin(PolymerElement)) {
       user: {
         type: Object,
         value: null,
-        observer: '_userChanged'
-      }
+        observer: '_userChanged',
+      },
     };
   }
 

package/src/vaadin-user-tag.js

@@ -66,14 +66,14 @@ export class UserTag extends ThemableMixin(DirMixin(PolymerElement)) {
        * Name of the user.
        */
       name: {
-        type: String
+        type: String,
       },
 
       /**
        * Id of the user.
        */
       uid: {
-        type: String
+        type: String,
       },
 
       /**
@@ -81,8 +81,8 @@ export class UserTag extends ThemableMixin(DirMixin(PolymerElement)) {
        */
       colorIndex: {
         type: Number,
-        observer: '_colorIndexChanged'
-      }
+        observer: '_colorIndexChanged',
+      },
     };
   }
 
@@ -114,9 +114,9 @@ export class UserTag extends ThemableMixin(DirMixin(PolymerElement)) {
         bubbles: true,
         composed: true,
         detail: {
-          name: this.name
-        }
-      })
+          name: this.name,
+        },
+      }),
     );
   }
 }

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;
@@ -64,7 +54,7 @@ registerStyles(
         opacity: 1;
       }
     }
-  `
+  `,
 );
 
 /**
@@ -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

@@ -10,9 +10,6 @@ import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { timeOut } from '@vaadin/component-base/src/async.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 
-const DURATION = 200;
-const DELAY = 2000;
-
 const listenOnce = (elem, type) => {
   return new Promise((resolve) => {
     const listener = () => {
@@ -45,6 +42,7 @@ export class UserTags extends PolymerElement {
         id="overlay"
         modeless
         opened="[[opened]]"
+        no-vertical-overlap
         on-vaadin-overlay-open="_onOverlayOpen"
       ></vaadin-user-tags-overlay>
     `;
@@ -59,7 +57,7 @@ export class UserTags extends PolymerElement {
       hasFocus: {
         type: Boolean,
         value: false,
-        observer: '_hasFocusChanged'
+        observer: '_hasFocusChanged',
       },
 
       /**
@@ -68,7 +66,6 @@ export class UserTags extends PolymerElement {
       opened: {
         type: Boolean,
         value: false,
-        observer: '_openedChanged'
       },
 
       /**
@@ -77,14 +74,15 @@ export class UserTags extends PolymerElement {
        */
       flashing: {
         type: Boolean,
-        value: false
+        value: false,
       },
 
       /**
        * A target element that the overlay is positioned to.
        */
       target: {
-        type: Object
+        type: Object,
+        observer: '__targetChanged',
       },
 
       /**
@@ -92,37 +90,63 @@ export class UserTags extends PolymerElement {
        */
       users: {
         type: Array,
-        value: () => []
+        value: () => [],
+      },
+
+      duration: {
+        type: Number,
+        value: 200,
+      },
+
+      delay: {
+        type: Number,
+        value: 2000,
       },
 
       /** @private */
-      _flashQueue: {
+      __flashQueue: {
         type: Array,
-        value: () => []
-      }
+        value: () => [],
+      },
+
+      /** @private */
+      __isTargetVisible: {
+        type: Boolean,
+        value: false,
+      },
     };
   }
 
   constructor() {
     super();
-    this._boundSetPosition = this._debounceSetPosition.bind(this);
+
+    this.__targetVisibilityObserver = new IntersectionObserver(
+      ([entry]) => {
+        this.__onTargetVisibilityChange(entry.isIntersecting);
+      },
+      { threshold: 1 },
+    );
   }
 
   /** @protected */
   connectedCallback() {
     super.connectedCallback();
-    window.addEventListener('resize', this._boundSetPosition);
-    window.addEventListener('scroll', this._boundSetPosition);
+
+    if (this.target) {
+      this.__targetVisibilityObserver.observe(this.target);
+    }
   }
 
   /** @protected */
   disconnectedCallback() {
     super.disconnectedCallback();
-    window.removeEventListener('resize', this._boundSetPosition);
-    window.removeEventListener('scroll', this._boundSetPosition);
     this.opened = false;
+    if (this.target) {
+      this.__targetVisibilityObserver.unobserve(this.target);
+    }
   }
 
+  /** @protected */
   ready() {
     super.ready();
 
@@ -138,14 +162,42 @@ export class UserTags extends PolymerElement {
   }
 
   /** @private */
-  _debounceSetPosition() {
-    this._debouncePosition = Debouncer.debounce(this._debouncePosition, timeOut.after(16), () => this._setPosition());
+  __onTargetVisibilityChange(isVisible) {
+    this.__isTargetVisible = isVisible;
+
+    // Open the overlay and run the flashing animation for the user tags
+    // that have been enqueued (if any) during a `.setUsers()` call
+    // because the field was not visible at that point.
+    if (isVisible && this.__flashQueue.length > 0 && !this.flashing) {
+      this.flashTags(this.__flashQueue.shift());
+      return;
+    }
+
+    // Open the overlay when the field is visible and focused.
+    // - opens the overlay in the case it was not opened during a `.show()` call because the field was not visible at that point.
+    // - re-opens the overlay in the case it was closed because the focused field became not visible for a while (see the below check).
+    if (isVisible && this.hasFocus) {
+      this.opened = true;
+      return;
+    }
+
+    // Close the overlay when the field is not visible.
+    // The focused field will be re-opened once it becomes visible again (see the above check).
+    if (!isVisible && this.opened) {
+      this.opened = false;
+    }
   }
 
   /** @private */
-  _openedChanged(opened) {
-    if (opened) {
-      this._setPosition();
+  __targetChanged(newTarget, oldTarget) {
+    this.$.overlay.positionTarget = newTarget;
+
+    if (oldTarget) {
+      this.__targetVisibilityObserver.unobserve(oldTarget);
+    }
+
+    if (newTarget) {
+      this.__targetVisibilityObserver.observe(newTarget);
     }
   }
 
@@ -156,34 +208,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"]');
   }
@@ -264,13 +288,13 @@ export class UserTags extends PolymerElement {
 
     const changedTags = this.getChangedTags(addedUsers, removedUsers);
 
-    // check if flash queue contains pending tags for removed users
-    if (this._flashQueue.length > 0) {
+    // Check if flash queue contains pending tags for removed users
+    if (this.__flashQueue.length > 0) {
       for (let i = 0; i < removedUsers.length; i++) {
         if (changedTags.removed[i] === null) {
-          for (let j = 0; j < this._flashQueue.length; j++) {
-            if (this._flashQueue[j].some((tag) => tag.uid === removedUsers[i].id)) {
-              this.splice('_flashQueue', i, 1);
+          for (let j = 0; j < this.__flashQueue.length; j++) {
+            if (this.__flashQueue[j].some((tag) => tag.uid === removedUsers[i].id)) {
+              this.splice('__flashQueue', i, 1);
             }
           }
         }
@@ -279,16 +303,25 @@ export class UserTags extends PolymerElement {
 
     if (this.opened && this.hasFocus) {
       this.updateTags(users, changedTags);
-    } else if (addedUsers.length && document.visibilityState !== 'hidden') {
+    } else if (addedUsers.length > 0 && document.visibilityState !== 'hidden') {
       // Avoid adding to queue if window is not visible.
-      const tags = changedTags.added;
-      if (this.flashing) {
-        // schedule next flash later
-        this.push('_flashQueue', tags);
+
+      const addedTags = changedTags.added;
+      const removedTags = changedTags.removed;
+
+      // Only sync the removed user tags.
+      // The added tags are handled by the `flashTags` method.
+      this.updateTagsSync(users, {
+        added: [],
+        removed: removedTags,
+      });
+
+      if (this.flashing || !this.__isTargetVisible) {
+        // Schedule next flash later
+        this.push('__flashQueue', addedTags);
       } else {
-        this.flashTags(tags);
+        this.flashTags(addedTags);
       }
-      this.set('users', users);
     } else {
       this.updateTagsSync(users, changedTags);
     }
@@ -319,36 +352,40 @@ export class UserTags extends PolymerElement {
 
     this.flashPromise = new Promise((resolve) => {
       listenOnce(this.$.overlay, 'vaadin-overlay-open').then(() => {
-        this._debounceFlashStart = Debouncer.debounce(this._debounceFlashStart, timeOut.after(DURATION + DELAY), () => {
-          // animate disappearing
-          if (!this.hasFocus) {
-            added.forEach((tag) => tag.classList.remove('show'));
-          }
-          this._debounceFlashEnd = Debouncer.debounce(this._debounceFlashEnd, timeOut.after(DURATION), () => {
-            // show all tags
-            const finishFlash = () => {
-              hidden.forEach((tag) => (tag.style.display = 'block'));
-              this.flashing = false;
-              resolve();
-            };
-
-            if (this.hasFocus) {
-              finishFlash();
-            } else {
-              // wait for overlay closing animation to complete
-              listenOnce(this.$.overlay, 'animationend').then(() => {
-                finishFlash();
-              });
-
-              this.opened = false;
+        this._debounceFlashStart = Debouncer.debounce(
+          this._debounceFlashStart,
+          timeOut.after(this.duration + this.delay),
+          () => {
+            // Animate disappearing
+            if (!this.hasFocus) {
+              added.forEach((tag) => tag.classList.remove('show'));
             }
-          });
-        });
+            this._debounceFlashEnd = Debouncer.debounce(this._debounceFlashEnd, timeOut.after(this.duration), () => {
+              // Show all tags
+              const finishFlash = () => {
+                hidden.forEach((tag) => (tag.style.display = 'block'));
+                this.flashing = false;
+                resolve();
+              };
+
+              if (this.hasFocus) {
+                finishFlash();
+              } else {
+                // Wait for overlay closing animation to complete
+                listenOnce(this.$.overlay, 'animationend').then(() => {
+                  finishFlash();
+                });
+
+                this.opened = false;
+              }
+            });
+          },
+        );
       });
     }).then(() => {
-      if (this._flashQueue.length > 0) {
-        const tags = this._flashQueue[0];
-        this.splice('_flashQueue', 0, 1);
+      if (this.__flashQueue.length > 0) {
+        const tags = this.__flashQueue[0];
+        this.splice('__flashQueue', 0, 1);
         this.flashTags(tags);
       }
     });
@@ -365,7 +402,7 @@ export class UserTags extends PolymerElement {
   updateTags(users, changed) {
     this.applyTagsStart(changed);
 
-    this._debounceRender = Debouncer.debounce(this._debounceRender, timeOut.after(DURATION), () => {
+    this._debounceRender = Debouncer.debounce(this._debounceRender, timeOut.after(this.duration), () => {
       this.set('users', users);
 
       this.applyTagsEnd(changed);
@@ -384,7 +421,9 @@ export class UserTags extends PolymerElement {
 
   show() {
     this.hasFocus = true;
-    this.opened = true;
+    if (this.__isTargetVisible) {
+      this.opened = true;
+    }
   }
 
   hide() {

package/theme/lumo/vaadin-field-outline-styles.js

@@ -41,5 +41,5 @@ registerStyles(
       box-shadow: inset 0 0 0 2px var(--_active-user-color);
     }
   `,
-  { moduleId: 'lumo-field-outline' }
+  { moduleId: 'lumo-field-outline' },
 );

package/theme/lumo/vaadin-user-tags-styles.js

@@ -37,8 +37,8 @@ registerStyles(
     }
   `,
   {
-    moduleId: 'lumo-user-tags-overlay'
-  }
+    moduleId: 'lumo-user-tags-overlay',
+  },
 );
 
 registerStyles(
@@ -60,5 +60,5 @@ registerStyles(
       min-width: calc(var(--lumo-line-height-xs) * 1em + 0.45em);
     }
   `,
-  { moduleId: 'lumo-user-tag' }
+  { moduleId: 'lumo-user-tag' },
 );

package/theme/lumo/vaadin-user-tags.js

@@ -3,5 +3,6 @@
  * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import '@vaadin/vaadin-overlay/theme/lumo/vaadin-overlay.js';
 import './vaadin-user-tags-styles.js';
 import '../../src/vaadin-user-tags.js';

package/theme/material/vaadin-field-outline-styles.js

@@ -39,5 +39,5 @@ registerStyles(
       box-shadow: inset 0 0 0 2px var(--_active-user-color);
     }
   `,
-  { moduleId: 'material-field-outline' }
+  { moduleId: 'material-field-outline' },
 );

package/theme/material/vaadin-user-tags-styles.js

@@ -27,5 +27,5 @@ registerStyles(
       min-width: 1.75em;
     }
   `,
-  { moduleId: 'material-user-tag' }
+  { moduleId: 'material-user-tag' },
 );

package/theme/material/vaadin-user-tags.js

@@ -3,5 +3,6 @@
  * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import '@vaadin/vaadin-overlay/theme/material/vaadin-overlay.js';
 import './vaadin-user-tags-styles.js';
 import '../../src/vaadin-user-tags.js';