@descope-ui/descope-tooltip 3.6.0 → 3.7.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope-ui/descope-tooltip",
-  "version": "3.6.0",
+  "version": "3.7.1",
   "files": [
     "src",
     "stories"
@@ -18,13 +18,14 @@
   },
   "devDependencies": {
     "@playwright/test": "1.58.2",
-    "e2e-utils": "3.6.0"
+    "e2e-utils": "3.7.1"
   },
   "dependencies": {
     "@vaadin/tooltip": "24.3.4",
-    "@descope-ui/common": "3.6.0",
-    "@descope-ui/theme-globals": "3.6.0",
-    "@descope-ui/descope-enriched-text": "3.6.0"
+    "@descope-ui/common": "3.7.1",
+    "@descope-ui/descope-enriched-text": "3.7.1",
+    "@descope-ui/theme-globals": "3.7.1",
+    "@descope-ui/descope-anchored": "3.7.1"
   },
   "publishConfig": {
     "link-workspace-packages": false

package/src/component/TooltipClass.js

@@ -6,6 +6,7 @@ import { compose } from '@descope-ui/common/utils';
 import {
   forwardAttrs,
   getComponentName,
+  injectStyle,
 } from '@descope-ui/common/components-helpers';
 import { createBaseClass } from '@descope-ui/common/base-classes';
 import { EnrichedTextClass } from '@descope-ui/descope-enriched-text/class';
@@ -20,14 +21,26 @@ const tooltipAttrs = [
   'opened',
 ];
 
-const BaseClass = createBaseClass({
+class RawTooltip extends createBaseClass({
   componentName,
   baseSelector: 'vaadin-tooltip',
-});
+}) {
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+      <descope-anchored>
+        <slot></slot>
+        <vaadin-tooltip slot="anchored"></vaadin-tooltip>
+      </descope-anchored>
+    `;
+
+    this.defaultSlot = this.shadowRoot.querySelector('slot:not([name])');
+    this.tooltip = this.shadowRoot.querySelector('vaadin-tooltip');
+  }
 
-class RawTooltip extends BaseClass {
   static get observedAttributes() {
-    return tooltipAttrs.concat(BaseClass.observedAttributes || []);
+    return tooltipAttrs.concat(super.observedAttributes || []);
   }
 
   get isOpened() {
@@ -50,51 +63,81 @@ class RawTooltip extends BaseClass {
     return this.getAttribute('static-display') === 'true';
   }
 
+  get srLabel() {
+    return this.tooltip?.querySelector('[slot="sr-label"]');
+  }
+
   // We use `static-display` for presentation purposes, to show the tooltip content.
   // This should be used only when `opened` is `true`. Once `static-display` is set,
-  // the overlay would become a `static` element, and will have layout in the presenting page.
-  // This is mainly aimed to solve the presentation problem on our Styles Page in the Console.
+  // the overlay flows in-line and has layout in the presenting page. Mainly aimed
+  // to solve the presentation problem on our Styles Page in the Console.
   #handleStaticDisplay() {
     if (this.isStaticDisplay) {
-      this.#revealWrappedParts();
+      this.#revealOverlay();
       this.setAttribute('inert', 'true');
     } else {
-      this.#hideWrappedParts();
       this.removeAttribute('inert');
     }
   }
 
-  init() {
-    super.init();
+  #revealOverlay() {
+    if (!this.overlay) return;
+    // Keep the overlay in vaadin-tooltip.shadowRoot so adopted stylesheets from
+    // portalMixin continue to apply (they are scoped to that shadow root).
+    // Layout is handled via CSS: anchored-root becomes a column, vaadin-tooltip
+    // becomes a visible block below the anchor, and the sr-label is hidden.
+    this.overlay.style.display = 'block';
+    this.overlay.style.position = 'static';
+  }
 
-    // Create the vaadin-tooltip here instead of constructor (for React compatibility)
-    this.style.display = 'contents';
-    this.insertAdjacentHTML('beforeend', '<vaadin-tooltip></vaadin-tooltip>');
-    this.tooltip = this.querySelector('vaadin-tooltip');
+  init() {
+    super.init?.();
 
-    this.#hideWrappedParts();
+    injectStyle(
+      `
+      :host {
+        display: inline-block;
+      }
+      vaadin-tooltip {
+        display: block;
+        position: absolute;
+        width: 0;
+        height: 0;
+        overflow: hidden;
+      }
+      /* Stack anchor above the anchored element so the tooltip flows below it inline. */
+      :host([static-display="true"]) descope-anchored::part(root) {
+        flex-direction: column;
+      }
+      :host([static-display="true"]) descope-anchored::part(anchored) {
+        position: static;
+        inset: unset;
+      }
+      :host([static-display="true"]) vaadin-tooltip {
+        position: static;
+        width: auto;
+        height: auto;
+        overflow: visible;
+      }
+      :host([static-display="true"]) vaadin-tooltip [slot="sr-label"] {
+        display: none;
+      }
+`,
+      this,
+    );
 
+    this.defaultSlot.addEventListener('slotchange', () =>
+      this.#setTooltipTarget(),
+    );
     this.#setTooltipTarget();
 
     setTimeout(() => this.#onOverlayReady());
   }
 
-  #hideWrappedParts() {
-    this.tooltip.style.width = '0';
-    this.tooltip.style.height = '0';
-    this.tooltip.style.display = 'block';
-    this.tooltip.style.overflow = 'hidden';
-    this.tooltip.style.position = 'absolute';
-  }
-
-  #revealWrappedParts() {
-    this.tooltip.style.width = '100%';
-    this.tooltip.style.height = '100%';
-    this.tooltip.style.position = 'static';
-    this.tooltip.style.overflow = 'visible';
-    this.tooltip.textContent = '';
-    this.overlay.style.display = 'block';
-    this.overlay.style.position = 'static';
+  #setTooltipTarget() {
+    const target = this.defaultSlot?.assignedElements()?.[0];
+    if (!target) return;
+    this.tooltip.target = target;
   }
 
   #onOverlayReady() {
@@ -108,16 +151,6 @@ class RawTooltip extends BaseClass {
     this.#handleTooltipVisibility();
   }
 
-  #setTooltipTarget() {
-    if (!this.children?.length) return;
-
-    let ele = Array.from(this.children).find((child) => child !== this.tooltip);
-
-    if (!ele) return;
-
-    this.tooltip.target = ele;
-  }
-
   #clearOverlayContentNode() {
     this.overlayContentNode.innerHTML = '';
   }
@@ -131,10 +164,6 @@ class RawTooltip extends BaseClass {
     return enrichedText;
   }
 
-  get srLabel() {
-    return this.tooltip?.querySelector('[slot="sr-label"]');
-  }
-
   #initTooltipTextComponent() {
     if (!this.overlayContentNode) return;
 
@@ -157,25 +186,35 @@ class RawTooltip extends BaseClass {
     });
   }
 
-  // the default vaadin behavior is to attach the overlay to the body when opened
-  // we do not want that because it's difficult to style the overlay in this way
-  // so we override it to open inside the shadow DOM
+  // The default vaadin behavior is to attach the overlay to the body when opened,
+  // which makes it hard to style. We move the overlay into our shadow root instead.
+  // Critical: vaadin computes position against the overlay's offsetParent — moving
+  // it changes that context, so we must call `_updatePosition()` afterwards.
+  // That's vaadin's own position-recompute method (the same one its resize/scroll
+  // listeners use internally), so we get the right reposition without dispatching
+  // global events.
   #overrideAttachOverlay() {
     if (!this.overlay) return;
 
-    if (this.isOpened) {
-      // When `opened` attr is used, vaadin doesn't execute `_attachOverlay`,
-      // and the overlay element is rendered outside the component, on the top
-      // level. We need to move it back to the local component's DOM.
+    const originalAttach = this.overlay._attachOverlay?.bind(this.overlay);
+
+    this.overlay._detachOverlay = () => {};
+    this.overlay._attachOverlay = () => {
+      originalAttach?.();
       setTimeout(() => {
         this.tooltip.shadowRoot.appendChild(this.overlay);
-        this.#handleStaticDisplay();
+        this.overlay._updatePosition?.();
       });
-    } else {
-      this.overlay._detachOverlay = () => {};
+    };
 
-      this.overlay._attachOverlay = () =>
+    if (this.isOpened) {
+      // When `opened` attr is set at init, vaadin renders the overlay at the top
+      // level without calling `_attachOverlay`. Move it back into our shadow root.
+      setTimeout(() => {
         this.tooltip.shadowRoot.appendChild(this.overlay);
+        this.#handleStaticDisplay();
+        this.overlay._updatePosition?.();
+      });
     }
   }
 
@@ -217,11 +256,6 @@ const { overlay, content } = {
   content: { selector: () => 'vaadin-tooltip-overlay::part(content)' },
 };
 
-/**
- * This component has no Shadow DOM of its own, so we can't add styles to it
- * (otherwise it would affect the rest of the DOM).
- * Note that all styles are within PortalMixin.
- */
 export const TooltipClass = compose(
   componentNameValidationMixin,
   portalMixin({

package/src/component/index.js

@@ -1,3 +1,4 @@
+import '@descope-ui/descope-anchored';
 import '@descope-ui/descope-enriched-text';
 import '@vaadin/tooltip';
 import { componentName, TooltipClass } from './TooltipClass';