@vaadin/field-highlighter 25.0.0-alpha7 → 25.0.0-alpha9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/field-highlighter",
-  "version": "25.0.0-alpha7",
+  "version": "25.0.0-alpha9",
   "publishConfig": {
     "access": "public"
   },
@@ -33,29 +33,29 @@
     "field"
   ],
   "dependencies": {
-    "@vaadin/a11y-base": "25.0.0-alpha7",
-    "@vaadin/component-base": "25.0.0-alpha7",
-    "@vaadin/overlay": "25.0.0-alpha7",
-    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha7",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha7",
+    "@vaadin/a11y-base": "25.0.0-alpha9",
+    "@vaadin/component-base": "25.0.0-alpha9",
+    "@vaadin/overlay": "25.0.0-alpha9",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha9",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha9",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.0.0-alpha7",
-    "@vaadin/checkbox": "25.0.0-alpha7",
-    "@vaadin/checkbox-group": "25.0.0-alpha7",
-    "@vaadin/date-picker": "25.0.0-alpha7",
-    "@vaadin/date-time-picker": "25.0.0-alpha7",
-    "@vaadin/item": "25.0.0-alpha7",
-    "@vaadin/list-box": "25.0.0-alpha7",
-    "@vaadin/radio-group": "25.0.0-alpha7",
-    "@vaadin/select": "25.0.0-alpha7",
-    "@vaadin/test-runner-commands": "25.0.0-alpha7",
+    "@vaadin/chai-plugins": "25.0.0-alpha9",
+    "@vaadin/checkbox": "25.0.0-alpha9",
+    "@vaadin/checkbox-group": "25.0.0-alpha9",
+    "@vaadin/date-picker": "25.0.0-alpha9",
+    "@vaadin/date-time-picker": "25.0.0-alpha9",
+    "@vaadin/item": "25.0.0-alpha9",
+    "@vaadin/list-box": "25.0.0-alpha9",
+    "@vaadin/radio-group": "25.0.0-alpha9",
+    "@vaadin/select": "25.0.0-alpha9",
+    "@vaadin/test-runner-commands": "25.0.0-alpha9",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/text-area": "25.0.0-alpha7",
-    "@vaadin/text-field": "25.0.0-alpha7",
-    "@vaadin/time-picker": "25.0.0-alpha7",
+    "@vaadin/text-area": "25.0.0-alpha9",
+    "@vaadin/text-field": "25.0.0-alpha9",
+    "@vaadin/time-picker": "25.0.0-alpha9",
     "sinon": "^18.0.0"
   },
-  "gitHead": "87f72707ce6866892f8be5782fa0da008e87dcbc"
+  "gitHead": "bbe4720721e0955ffc87a79b412bee38b1f0eb1e"
 }

package/src/fields/vaadin-date-picker-observer.js

@@ -3,6 +3,7 @@
  * Copyright (c) 2021 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { isKeyboardActive } from '@vaadin/a11y-base/src/focus-utils.js';
 import { ComponentObserver } from './vaadin-component-observer.js';
 
 export class DatePickerObserver extends ComponentObserver {
@@ -10,7 +11,6 @@ export class DatePickerObserver extends ComponentObserver {
     super(datePicker);
 
     this.datePicker = datePicker;
-    this.fullscreenFocus = false;
     this.blurWhileOpened = false;
 
     this.addListeners(datePicker);
@@ -19,14 +19,6 @@ export class DatePickerObserver extends ComponentObserver {
   addListeners(datePicker) {
     this.overlay = datePicker.$.overlay;
 
-    // Fullscreen date picker calls blur() to avoid focusing of the input:
-    // 1. first time when focus event is fired (before opening the overlay),
-    // 2. second time after the overlay is open, see "_onOverlayOpened".
-    // Here we set the flag to ignore related focusout events and then to
-    // mark date picker as being edited by user (to show field highlight).
-    // We have to use capture phase in order to catch this event early.
-    datePicker.addEventListener('blur', (event) => this.onBlur(event), true);
-
     datePicker.addEventListener('opened-changed', (event) => this.onOpenedChanged(event));
 
     this.overlay.addEventListener('focusout', (event) => this.onOverlayFocusOut(event));
@@ -40,14 +32,17 @@ export class DatePickerObserver extends ComponentObserver {
     return this.datePicker._overlayContent && this.datePicker._overlayContent.contains(node);
   }
 
-  onBlur(event) {
+  isFullscreen() {
     const datePicker = this.datePicker;
-    if (datePicker._fullscreen && !this.isEventInOverlay(event.relatedTarget)) {
-      this.fullscreenFocus = true;
-    }
+    return datePicker._noInput && !isKeyboardActive();
   }
 
   onFocusIn(event) {
+    if (this.isEventInOverlay(event.target)) {
+      // Focus moves to the overlay, do nothing.
+      return;
+    }
+
     if (this.isEventInOverlay(event.relatedTarget)) {
       // Focus returns from the overlay, do nothing.
       return;
@@ -63,9 +58,17 @@ export class DatePickerObserver extends ComponentObserver {
   }
 
   onFocusOut(event) {
-    if (this.fullscreenFocus || this.isEventInOverlay(event.relatedTarget)) {
-      // Do nothing, overlay is opening.
-    } else if (!this.datePicker.opened) {
+    if (this.isEventInOverlay(event.target) && this.component.contains(event.relatedTarget)) {
+      // Focus returns from the overlay, do nothing.
+      return;
+    }
+
+    if (this.isEventInOverlay(event.relatedTarget)) {
+      // Focus moves to the overlay, do nothing.
+      return;
+    }
+
+    if (!this.datePicker.opened) {
       // Field blur when closed.
       this.hideOutline(this.datePicker);
     } else {
@@ -83,8 +86,7 @@ export class DatePickerObserver extends ComponentObserver {
   }
 
   onOpenedChanged(event) {
-    if (event.detail.value === true && this.fullscreenFocus) {
-      this.fullscreenFocus = false;
+    if (event.detail.value === true && this.isFullscreen()) {
       this.showOutline(this.datePicker);
     }
 

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

@@ -13,7 +13,12 @@ export class SelectObserver extends FieldObserver {
   }
 
   onFocusIn(event) {
-    if (this.overlay.contains(event.relatedTarget)) {
+    if (this.overlay._contentRoot.contains(event.target)) {
+      // Focus moves to the overlay item, do nothing.
+      return;
+    }
+
+    if (this.overlay._contentRoot.contains(event.relatedTarget)) {
       // Focus returns on item select, do nothing.
       return;
     }
@@ -22,10 +27,16 @@ export class SelectObserver extends FieldObserver {
   }
 
   onFocusOut(event) {
-    if (this.overlay.contains(event.relatedTarget)) {
-      // Do nothing, overlay is opening.
+    if (this.overlay._contentRoot.contains(event.relatedTarget)) {
+      // Focus moves to the overlay on opening, do nothing.
       return;
     }
+
+    if (this.overlay._contentRoot.contains(event.target) && this.component.contains(event.relatedTarget)) {
+      // Focus returns from the overlay on closing, do nothing.
+      return;
+    }
+
     super.onFocusOut(event);
   }
 }

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

@@ -15,7 +15,7 @@ const userTagsOverlay = css`
     overflow: visible;
   }
 
-  ::slotted([part='tags']) {
+  [part='content'] {
     display: flex;
     flex-direction: column;
     align-items: flex-start;

package/src/vaadin-field-outline.js

@@ -19,7 +19,7 @@ import { fieldOutlineStyles } from './styles/vaadin-field-outline-core-styles.js
  * @mixes ThemableMixin
  * @private
  */
-export class FieldOutline extends ThemableMixin(DirMixin(LumoInjectionMixin(PolylitMixin(LitElement)))) {
+export class FieldOutline extends ThemableMixin(DirMixin(PolylitMixin(LumoInjectionMixin(LitElement)))) {
   static get is() {
     return 'vaadin-field-outline';
   }

package/src/vaadin-user-tag.js

@@ -20,7 +20,7 @@ import { userTagStyles } from './styles/vaadin-user-tag-core-styles.js';
  * @mixes ThemableMixin
  * @private
  */
-export class UserTag extends ThemableMixin(DirMixin(LumoInjectionMixin(PolylitMixin(LitElement)))) {
+export class UserTag extends ThemableMixin(DirMixin(PolylitMixin(LumoInjectionMixin(LitElement)))) {
   static get is() {
     return 'vaadin-user-tag';
   }

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

@@ -25,7 +25,7 @@ import { userTagsOverlayStyles } from './styles/vaadin-user-tags-overlay-core-st
  * @private
  */
 class UserTagsOverlay extends PositionMixin(
-  OverlayMixin(DirMixin(ThemableMixin(LumoInjectionMixin(PolylitMixin(LitElement))))),
+  OverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))),
 ) {
   static get is() {
     return 'vaadin-user-tags-overlay';
@@ -38,7 +38,6 @@ class UserTagsOverlay extends PositionMixin(
   /** @protected */
   render() {
     return html`
-      <div id="backdrop" part="backdrop" ?hidden="${!this.withBackdrop}"></div>
       <div part="overlay" id="overlay">
         <div part="content" id="content">
           <slot></slot>

package/src/vaadin-user-tags.js

@@ -46,11 +46,14 @@ export class UserTags extends PolylitMixin(LitElement) {
     return html`
       <vaadin-user-tags-overlay
         id="overlay"
+        exportparts="overlay:user-tags-overlay, content:user-tags-content"
         modeless
         .opened="${this.opened}"
         no-vertical-overlap
         @vaadin-overlay-open="${this._onOverlayOpen}"
-      ></vaadin-user-tags-overlay>
+      >
+        <slot></slot>
+      </vaadin-user-tags-overlay>
     `;
   }
 
@@ -137,7 +140,8 @@ export class UserTags extends PolylitMixin(LitElement) {
 
   /** @protected */
   get wrapper() {
-    return this.$.overlay.querySelector('[part="tags"]');
+    // Used by Collaboration Kit util
+    return this;
   }
 
   /** @protected */
@@ -162,15 +166,8 @@ export class UserTags extends PolylitMixin(LitElement) {
   ready() {
     super.ready();
 
-    this.$.overlay.renderer = (root) => {
-      if (!root.firstChild) {
-        const tags = document.createElement('div');
-        tags.setAttribute('part', 'tags');
-        root.appendChild(tags);
-      }
-    };
-
-    this.$.overlay.requestContentUpdate();
+    // Export user tags overlay parts for styling
+    this.setAttribute('exportparts', 'user-tags-overlay, user-tags-content');
   }
 
   /** @private */
@@ -222,6 +219,7 @@ export class UserTags extends PolylitMixin(LitElement) {
 
   createUserTag(user) {
     const tag = document.createElement('vaadin-user-tag');
+    tag.setAttribute('part', 'user-tag');
     tag.name = user.name;
     tag.uid = user.id;
     tag.colorIndex = user.colorIndex;
@@ -229,7 +227,7 @@ export class UserTags extends PolylitMixin(LitElement) {
   }
 
   getTagForUser(user) {
-    return Array.from(this.wrapper.children).find((tag) => tag.uid === user.id);
+    return Array.from(this.children).find((tag) => tag.uid === user.id);
   }
 
   getChangedTags(addedUsers, removedUsers) {
@@ -239,21 +237,19 @@ export class UserTags extends PolylitMixin(LitElement) {
   }
 
   applyTagsStart({ added, removed }) {
-    const wrapper = this.wrapper;
     removed.forEach((tag) => {
       if (tag) {
         tag.classList.add('removing');
         tag.classList.remove('show');
       }
     });
-    added.forEach((tag) => wrapper.insertBefore(tag, wrapper.firstChild));
+    added.forEach((tag) => this.insertBefore(tag, this.firstChild));
   }
 
   applyTagsEnd({ added, removed }) {
-    const wrapper = this.wrapper;
     removed.forEach((tag) => {
-      if (tag && tag.parentNode === wrapper) {
-        wrapper.removeChild(tag);
+      if (tag && tag.parentNode === this) {
+        this.removeChild(tag);
       }
     });
     added.forEach((tag) => tag && tag.classList.add('show'));
@@ -329,7 +325,7 @@ export class UserTags extends PolylitMixin(LitElement) {
   /** @private */
   _onOverlayOpen() {
     // Animate all tags except removing ones
-    Array.from(this.wrapper.children).forEach((tag) => {
+    Array.from(this.children).forEach((tag) => {
       if (!tag.classList.contains('removing')) {
         tag.classList.add('show');
       }
@@ -338,17 +334,16 @@ export class UserTags extends PolylitMixin(LitElement) {
 
   flashTags(added) {
     this.flashing = true;
-    const wrapper = this.wrapper;
 
     // Hide existing tags
-    const hidden = Array.from(wrapper.children);
+    const hidden = Array.from(this.children);
     hidden.forEach((tag) => {
       tag.style.display = 'none';
     });
 
     // Render new tags
     added.forEach((tag) => {
-      wrapper.insertBefore(tag, wrapper.firstChild);
+      this.insertBefore(tag, this.firstChild);
     });
 
     this.flashPromise = new Promise((resolve) => {