@nectary/components 5.29.1 → 5.30.0

package/tooltip/index.js

@@ -4,6 +4,7 @@ import { shouldReduceMotion, updateAttribute, updateBooleanAttribute, getAttribu
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
 import { rectOverlap } from "../utils/rect.js";
 import { getReactEventHandler } from "../utils/get-react-event-handler.js";
+import { getPlacementContext, toLocalRect } from "../utils/placement.js";
 import { TooltipState } from "./tooltip-state.js";
 import { getPopOrientation, orientationValues, textAlignValues, typeValues } from "./utils.js";
 const templateHTML = '<style>:host{display:contents}#content-wrapper{padding-bottom:8px;filter:drop-shadow(var(--sinch-comp-tooltip-shadow))}:host([orientation=left]) #content-wrapper{padding-bottom:0;padding-right:8px}:host([orientation=right]) #content-wrapper{padding-bottom:0;padding-left:8px}:host([orientation^=bottom]) #content-wrapper{padding-bottom:0;padding-top:8px}#content{position:relative;display:block;max-width:300px;padding:2px 6px;box-sizing:border-box;background-color:var(--sinch-local-color-background);border-radius:var(--sinch-comp-tooltip-shape-radius);pointer-events:none;opacity:0;--sinch-local-color-background:var(--sinch-comp-tooltip-color-background);--sinch-global-color-text:var(--sinch-comp-tooltip-color-text)}#text{word-break:break-word;pointer-events:none;--sinch-comp-text-font:var(--sinch-comp-tooltip-font-body)}#tip{position:absolute;left:50%;top:100%;transform:translateX(-50%) rotate(0);transform-origin:top center;fill:var(--sinch-local-color-background);pointer-events:none}#tip.hidden{display:none}:host([orientation=left]) #tip{transform:translateX(-50%) rotate(270deg);top:50%;left:100%}:host([orientation=right]) #tip{transform:translateX(-50%) rotate(90deg);top:50%;left:0}:host([orientation^=bottom]) #tip{transform:translateX(-50%) rotate(180deg);top:0}:host([text-align=right]) #text{--sinch-comp-text-align:right}:host([text-align=center]) #text{--sinch-comp-text-align:center}:host([text-align=left]) #text{--sinch-comp-text-align:left}</style><sinch-pop id="pop"><slot id="target" slot="target"></slot><div id="content-wrapper" slot="content"><div id="content"><sinch-text id="text" type="s"></sinch-text><svg id="tip" width="8" height="4" aria-hidden="true"><path d="m4 4 4-4h-8l4 4Z"/></svg></div></div></sinch-pop>';
@@ -12,6 +13,10 @@ const SHOW_DELAY_SLOW = 1e3;
 const SHOW_DELAY_FAST = 250;
 const HIDE_DELAY = 0;
 const ANIMATION_DURATION = 100;
+const OVERLAP_TOLERANCE = 1;
+const MAX_ZERO_DIMENSION_PLACEMENT_RETRIES = 8;
+const MIN_FIRST_REVEAL_STABILITY_FRAMES = 3;
+const MAX_FIRST_REVEAL_STABILITY_FRAMES = 6;
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class Tooltip extends NectaryElement {
@@ -21,11 +26,16 @@ class Tooltip extends NectaryElement {
   #$contentWrapper;
   #$tip;
   #$target;
-  #controller = null;
+  #resizeObserver = null;
   #tooltipState;
   #animation = null;
   #shouldReduceMotion = false;
   #isSubscribed = false;
+  #controller;
+  #placementScheduled = false;
+  #zeroDimensionPlacementRetries = 0;
+  #revealRequestId = 0;
+  #hasCompletedFirstReveal = false;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -37,6 +47,7 @@ class Tooltip extends NectaryElement {
     this.#$tip = shadowRoot.querySelector("#tip");
     this.#$target = shadowRoot.querySelector("#target");
     this.#shouldReduceMotion = shouldReduceMotion();
+    this.#controller = null;
     this.#tooltipState = new TooltipState({
       showDelay: SHOW_DELAY_SLOW,
       hideDelay: this.#shouldReduceMotion ? HIDE_DELAY + ANIMATION_DURATION : HIDE_DELAY,
@@ -57,6 +68,10 @@ class Tooltip extends NectaryElement {
     this.#$pop.addEventListener("-close", this.#onPopClose, options);
     this.addEventListener("-show", this.#onShowReactHandler, options);
     this.addEventListener("-hide", this.#onHideReactHandler, options);
+    this.#resizeObserver = new ResizeObserver(() => {
+      this.#schedulePlacement();
+    });
+    this.#resizeObserver.observe(this.#$content);
     updateAttribute(this.#$pop, "orientation", getPopOrientation(this.orientation));
     updateBooleanAttribute(this.#$pop, "hide-outside-viewport", !this.showOutsideViewport);
     this.#updateText();
@@ -66,6 +81,8 @@ class Tooltip extends NectaryElement {
     this.#tooltipState.destroy();
     this.#controller.abort();
     this.#controller = null;
+    this.#resizeObserver?.disconnect();
+    this.#resizeObserver = null;
   }
   static get observedAttributes() {
     return [
@@ -197,9 +214,13 @@ class Tooltip extends NectaryElement {
   };
   // SHOW_DELAY ended, tooltip can be shown with animation
   #onStateShowEnd = () => {
+    const revealRequestId = ++this.#revealRequestId;
     this.#dispatchShowEvent();
     updateBooleanAttribute(this.#$pop, "open", true);
-    requestAnimationFrame(this.#updateTipOrientation);
+    this.#schedulePlacement();
+    this.#scheduleReveal(revealRequestId);
+  };
+  #playShowAnimation() {
     if (this.#animation !== null) {
       this.#animation.updatePlaybackRate(1);
       this.#animation.play();
@@ -212,20 +233,64 @@ class Tooltip extends NectaryElement {
         fill: "forwards"
       });
     }
-  };
+  }
+  #isRectStable(previousRect, nextRect) {
+    return Math.abs(previousRect.x - nextRect.x) < 0.5 && Math.abs(previousRect.y - nextRect.y) < 0.5 && Math.abs(previousRect.width - nextRect.width) < 0.5 && Math.abs(previousRect.height - nextRect.height) < 0.5;
+  }
+  #scheduleReveal(revealRequestId) {
+    const reveal = () => {
+      if (!this.isDomConnected || !this.#isOpen() || this.#revealRequestId !== revealRequestId) {
+        return;
+      }
+      this.#playShowAnimation();
+      this.#hasCompletedFirstReveal = true;
+    };
+    if (this.#hasCompletedFirstReveal) {
+      reveal();
+      return;
+    }
+    let previousRect = null;
+    let observedFrames = 0;
+    let remainingFrames = MAX_FIRST_REVEAL_STABILITY_FRAMES;
+    const waitForStableRect = () => {
+      if (!this.isDomConnected || !this.#isOpen() || this.#revealRequestId !== revealRequestId) {
+        return;
+      }
+      const nextRect = this.#$pop.popoverRect;
+      if (observedFrames >= MIN_FIRST_REVEAL_STABILITY_FRAMES && previousRect !== null && this.#isRectStable(previousRect, nextRect)) {
+        reveal();
+        return;
+      }
+      if (remainingFrames === 0) {
+        reveal();
+        return;
+      }
+      previousRect = nextRect;
+      observedFrames += 1;
+      remainingFrames -= 1;
+      requestAnimationFrame(waitForStableRect);
+    };
+    requestAnimationFrame(waitForStableRect);
+  }
   // HIDE_DELAY ended, begin tooltip hide animation
   #onStateHideStart = () => {
+    this.#revealRequestId += 1;
+    if (this.#animation === null) {
+      return;
+    }
     this.#animation.updatePlaybackRate(-1);
     this.#animation.play();
   };
   // Hide animation ended, tooltip can be hidden
   #onStateHideEnd = () => {
     if (this.#isOpen()) {
-      this.#animation.finish();
+      this.#animation?.finish();
       this.#dispatchHideEvent();
       updateBooleanAttribute(this.#$pop, "open", false);
     }
     this.#resetTipOrientation();
+    this.#resetContentOffset();
+    this.#zeroDimensionPlacementRetries = 0;
     this.#unsubscribeMouseLeaveEvents();
     this.#unsubscribeScroll();
   };
@@ -233,26 +298,125 @@ class Tooltip extends NectaryElement {
     this.#$tip.style.top = "";
     this.#$tip.style.left = "";
   }
-  #updateTipOrientation = () => {
+  #resetContentOffset() {
+    this.#$pop.style.removeProperty("--sinch-pop-offset-x");
+    this.#$pop.style.removeProperty("--sinch-pop-offset-y");
+  }
+  #schedulePlacement(resetZeroDimensionRetries = true) {
+    if (!this.#isOpen() || this.#placementScheduled) {
+      return;
+    }
+    if (resetZeroDimensionRetries) {
+      this.#zeroDimensionPlacementRetries = 0;
+    }
+    this.#placementScheduled = true;
+    requestAnimationFrame(() => {
+      this.#placementScheduled = false;
+      if (!this.isDomConnected || !this.#isOpen()) {
+        return;
+      }
+      this.#updatePlacement();
+    });
+  }
+  #applyContentOffset(offsetX, offsetY) {
+    if (offsetX === 0 && offsetY === 0) {
+      this.#$pop.style.removeProperty("--sinch-pop-offset-x");
+      this.#$pop.style.removeProperty("--sinch-pop-offset-y");
+      return;
+    }
+    this.#$pop.style.setProperty("--sinch-pop-offset-x", `${offsetX}px`);
+    this.#$pop.style.setProperty("--sinch-pop-offset-y", `${offsetY}px`);
+  }
+  #updatePlacement = () => {
+    if (!this.isDomConnected || !this.#isOpen()) {
+      return;
+    }
+    const popRect = this.#$pop.popoverRect;
+    if (popRect.width === 0 || popRect.height === 0) {
+      if (this.#zeroDimensionPlacementRetries >= MAX_ZERO_DIMENSION_PLACEMENT_RETRIES) {
+        return;
+      }
+      this.#zeroDimensionPlacementRetries += 1;
+      this.#schedulePlacement(false);
+      return;
+    }
+    this.#zeroDimensionPlacementRetries = 0;
+    const placementContext = getPlacementContext(this.#$pop);
+    this.#resetContentOffset();
+    this.#updateTipOrientation(placementContext);
+    const didOffset = this.#resolveOverlap(placementContext);
+    if (didOffset) {
+      requestAnimationFrame(() => {
+        if (!this.isDomConnected || !this.#isOpen()) {
+          return;
+        }
+        this.#updateTipOrientation(placementContext);
+      });
+    }
+  };
+  #resolveOverlap(placementContext) {
+    const orientation = this.orientation;
+    const targetRect = toLocalRect(this.#$pop.footprintRect, placementContext);
+    const contentRect = toLocalRect(this.#$content.getBoundingClientRect(), placementContext);
+    const tipRect = toLocalRect(this.#$tip.getBoundingClientRect(), placementContext);
+    const targetBottom = targetRect.y + targetRect.height;
+    const targetRight = targetRect.x + targetRect.width;
+    const bottomEdge = Math.max(contentRect.y + contentRect.height, tipRect.y + tipRect.height);
+    const topEdge = Math.min(contentRect.y, tipRect.y);
+    const rightEdge = Math.max(contentRect.x + contentRect.width, tipRect.x + tipRect.width);
+    const leftEdge = Math.min(contentRect.x, tipRect.x);
+    let offsetX = 0;
+    let offsetY = 0;
+    if (orientation.startsWith("top")) {
+      if (bottomEdge > targetRect.y + OVERLAP_TOLERANCE) {
+        offsetY = targetRect.y - bottomEdge;
+      }
+    } else if (orientation.startsWith("bottom")) {
+      if (topEdge < targetBottom - OVERLAP_TOLERANCE) {
+        offsetY = targetBottom - topEdge;
+      }
+    } else if (orientation === "left") {
+      if (rightEdge > targetRect.x + OVERLAP_TOLERANCE) {
+        offsetX = targetRect.x - rightEdge;
+      }
+    } else if (orientation === "right") {
+      if (leftEdge < targetRight - OVERLAP_TOLERANCE) {
+        offsetX = targetRight - leftEdge;
+      }
+    }
+    this.#applyContentOffset(offsetX, offsetY);
+    return offsetX !== 0 || offsetY !== 0;
+  }
+  #updateTipOrientation = (placementContext) => {
     const orient = this.orientation;
     if (!("footprintRect" in this.#$pop)) {
-      requestAnimationFrame(this.#updateTipOrientation);
+      requestAnimationFrame(() => {
+        if (!this.isDomConnected || !this.#isOpen()) {
+          return;
+        }
+        this.#updateTipOrientation();
+      });
       return;
     }
-    const targetRect = this.#$pop.footprintRect;
-    const contentRect = this.#$content.getBoundingClientRect();
+    const ctx = placementContext ?? getPlacementContext(this.#$pop);
+    const targetRect = toLocalRect(this.#$pop.footprintRect, ctx);
+    const contentRect = toLocalRect(this.#$content.getBoundingClientRect(), ctx);
     const diffX = targetRect.x - contentRect.x;
     const diffY = targetRect.y - contentRect.y;
+    const targetWidth = targetRect.width;
+    const targetHeight = targetRect.height;
+    const contentWidth = contentRect.width;
+    const contentHeight = contentRect.height;
     if (orient === "left" || orient === "right") {
-      const yPos = Math.max(TIP_SIZE, Math.min(diffY + targetRect.height / 2, contentRect.height - TIP_SIZE));
+      const yPos = Math.max(TIP_SIZE, Math.min(diffY + targetHeight / 2, contentHeight - TIP_SIZE));
       this.#$tip.style.top = `${yPos}px`;
     } else {
-      let xPos = Math.max(TIP_SIZE, Math.min(diffX + targetRect.width / 2, contentRect.width - TIP_SIZE));
+      let xPos = Math.max(TIP_SIZE, Math.min(diffX + targetWidth / 2, contentWidth - TIP_SIZE));
       if (orient === "bottom-left" || orient === "top-left") {
-        xPos = Math.max(xPos, contentRect.width * 0.75);
+        xPos = Math.max(xPos, contentWidth * 0.75);
       }
       if (orient === "bottom-right" || orient === "top-right") {
-        xPos = Math.min(xPos, contentRect.width * 0.25);
+        xPos = Math.min(xPos, contentWidth * 0.25);
       }
       this.#$tip.style.left = `${xPos}px`;
     }

package/utils/dom.d.ts

@@ -33,4 +33,6 @@ export declare const cloneNode: (el: Element, deep: boolean) => Element;
 export declare const shouldReduceMotion: () => boolean;
 export declare const isAttrEqual: (oldVal: string | null, newVal: string | null) => boolean;
 export declare const getScrollableParents: (node: HTMLElement | null) => (HTMLElement | Document)[];
+export declare const isTransformedElement: (element: HTMLElement | null) => element is HTMLElement;
+export declare const getTransformedAncestor: (node: HTMLElement | null) => HTMLElement | null;
 export {};

package/utils/dom.js

@@ -153,6 +153,38 @@ const getScrollableParents = (node) => {
   scrollableParents.push(document);
   return scrollableParents;
 };
+const isTransformedElement = (element) => {
+  if (element == null) {
+    return false;
+  }
+  const style = getComputedStyle(element);
+  const backdropFilter = style.getPropertyValue("backdrop-filter");
+  const hasTransform = style.transform !== "none" || style.perspective !== "none" || style.filter !== "none" || backdropFilter !== "" && backdropFilter !== "none";
+  const hasWillChange = style.willChange.split(",").map((value) => value.trim().toLowerCase()).some((value) => value === "transform" || value === "perspective" || value === "filter" || value === "backdrop-filter");
+  return hasTransform || hasWillChange;
+};
+const getTransformedAncestor = (node) => {
+  let current = node;
+  while (current != null) {
+    if (current !== node) {
+      if (isTransformedElement(current)) {
+        return current;
+      }
+    }
+    const parent = current.parentElement;
+    if (parent != null) {
+      current = parent;
+      continue;
+    }
+    const root = current.getRootNode();
+    if (root instanceof ShadowRoot && root.host instanceof HTMLElement) {
+      current = root.host;
+      continue;
+    }
+    break;
+  }
+  return null;
+};
 export {
   attrValueToInteger,
   attrValueToPixels,
@@ -165,10 +197,12 @@ export {
   getIntegerAttribute,
   getLiteralAttribute,
   getScrollableParents,
+  getTransformedAncestor,
   hasClass,
   isAttrEqual,
   isAttrTrue,
   isLiteralValue,
+  isTransformedElement,
   setClass,
   shouldReduceMotion,
   updateAttribute,

package/utils/index.js

@@ -1,6 +1,6 @@
 import { Context, subscribeContext } from "./context.js";
 import { CSV_DELIMITER, getFirstCsvValue, packCsv, unpackCsv, updateCsv } from "./csv.js";
-import { attrValueToInteger, attrValueToPixels, clampNumber, cloneNode, getAttribute, getBooleanAttribute, getCssVar, getCssVars, getIntegerAttribute, getLiteralAttribute, getScrollableParents, hasClass, isAttrEqual, isAttrTrue, isLiteralValue, setClass, shouldReduceMotion, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateIntegerAttribute, updateLiteralAttribute } from "./dom.js";
+import { attrValueToInteger, attrValueToPixels, clampNumber, cloneNode, getAttribute, getBooleanAttribute, getCssVar, getCssVars, getIntegerAttribute, getLiteralAttribute, getScrollableParents, getTransformedAncestor, hasClass, isAttrEqual, isAttrTrue, isLiteralValue, isTransformedElement, setClass, shouldReduceMotion, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateIntegerAttribute, updateLiteralAttribute } from "./dom.js";
 import { NectaryElement, defineCustomElement, pascalToKebabCase, registerComponent, resetNectaryRegistry, setNectaryRegistry } from "./element.js";
 import { getRect, getTargetRect, rectOverlap } from "./rect.js";
 import { getFirstFocusableElement, getFirstSlotElement, isElementFocused } from "./slot.js";
@@ -37,6 +37,7 @@ export {
   getTargetByAttribute,
   getTargetIndexInParent,
   getTargetRect,
+  getTransformedAncestor,
   getUid,
   hasClass,
   isAttrEqual,
@@ -45,6 +46,7 @@ export {
   isEmojiString,
   isLiteralValue,
   isTargetEqual,
+  isTransformedElement,
   packCsv,
   parseMarkdown,
   pascalToKebabCase,

package/utils/placement.d.ts

@@ -0,0 +1,13 @@
+import type { TRect } from '../types';
+export type TPlacementContext = {
+    transformedAncestor: HTMLElement | null;
+    ancestorRect: DOMRect | null;
+    scaleX: number;
+    scaleY: number;
+    boundsLeft: number;
+    boundsTop: number;
+    boundsWidth: number;
+    boundsHeight: number;
+};
+export declare const getPlacementContext: (node: HTMLElement | null, ancestorHint?: HTMLElement | null) => TPlacementContext;
+export declare const toLocalRect: (rect: TRect, placementContext: TPlacementContext) => TRect;

package/utils/placement.js

@@ -0,0 +1,78 @@
+import { isTransformedElement, getTransformedAncestor } from "./dom.js";
+const resolveTransformedAncestor = (node, ancestorHint) => {
+  if (node != null && ancestorHint != null && ancestorHint.isConnected && isTransformedElement(ancestorHint) && (ancestorHint === node || ancestorHint.contains(node))) {
+    return ancestorHint;
+  }
+  return getTransformedAncestor(node);
+};
+const getTransformedAncestorScale = (ancestor) => {
+  if (ancestor == null) {
+    return { scaleX: 1, scaleY: 1 };
+  }
+  const transform = getComputedStyle(ancestor).transform;
+  let matrixScaleX = null;
+  let matrixScaleY = null;
+  if (transform !== "none") {
+    try {
+      const matrix = new DOMMatrixReadOnly(transform);
+      matrixScaleX = Math.hypot(matrix.a, matrix.b);
+      matrixScaleY = Math.hypot(matrix.c, matrix.d);
+    } catch {
+      matrixScaleX = null;
+      matrixScaleY = null;
+    }
+  }
+  if (matrixScaleX !== null && matrixScaleY !== null) {
+    return {
+      scaleX: Number.isFinite(matrixScaleX) && matrixScaleX > 0 ? matrixScaleX : 1,
+      scaleY: Number.isFinite(matrixScaleY) && matrixScaleY > 0 ? matrixScaleY : 1
+    };
+  }
+  const rect = ancestor.getBoundingClientRect();
+  const baseWidth = ancestor.offsetWidth;
+  const baseHeight = ancestor.offsetHeight;
+  const scaleX = baseWidth > 0 ? rect.width / baseWidth : 1;
+  const scaleY = baseHeight > 0 ? rect.height / baseHeight : 1;
+  return {
+    scaleX: Number.isFinite(scaleX) && scaleX > 0 ? scaleX : 1,
+    scaleY: Number.isFinite(scaleY) && scaleY > 0 ? scaleY : 1
+  };
+};
+const getPlacementContext = (node, ancestorHint) => {
+  const transformedAncestor = resolveTransformedAncestor(node, ancestorHint);
+  const ancestorRect = transformedAncestor?.getBoundingClientRect() ?? null;
+  const ancestorClientLeft = transformedAncestor?.clientLeft ?? 0;
+  const ancestorClientTop = transformedAncestor?.clientTop ?? 0;
+  const ancestorClientWidth = transformedAncestor?.clientWidth ?? 0;
+  const ancestorClientHeight = transformedAncestor?.clientHeight ?? 0;
+  const { scaleX, scaleY } = getTransformedAncestorScale(transformedAncestor);
+  const boundsLeft = ancestorRect != null ? ancestorRect.x + ancestorClientLeft * scaleX : 0;
+  const boundsTop = ancestorRect != null ? ancestorRect.y + ancestorClientTop * scaleY : 0;
+  const boundsWidth = ancestorRect != null && ancestorClientWidth > 0 ? ancestorClientWidth : ancestorRect != null ? ancestorRect.width / scaleX : window.innerWidth;
+  const boundsHeight = ancestorRect != null && ancestorClientHeight > 0 ? ancestorClientHeight : ancestorRect != null ? ancestorRect.height / scaleY : window.innerHeight;
+  return {
+    transformedAncestor,
+    ancestorRect,
+    scaleX,
+    scaleY,
+    boundsLeft,
+    boundsTop,
+    boundsWidth,
+    boundsHeight
+  };
+};
+const toLocalRect = (rect, placementContext) => {
+  if (placementContext.transformedAncestor == null) {
+    return rect;
+  }
+  return {
+    x: (rect.x - placementContext.boundsLeft) / placementContext.scaleX,
+    y: (rect.y - placementContext.boundsTop) / placementContext.scaleY,
+    width: rect.width / placementContext.scaleX,
+    height: rect.height / placementContext.scaleY
+  };
+};
+export {
+  getPlacementContext,
+  toLocalRect
+};