@nectary/components 5.41.0 → 5.41.2

package/bundle.js

@@ -364,7 +364,7 @@ const typeValues$7 = ["m", "s", "xs", "xxs"];
 const templateHTML$1k = '<style>:host{text-align:var(--sinch-comp-text-align);display:block;font:var(--sinch-comp-text-font);color:var(--sinch-global-color-text,var(--sinch-sys-color-text-default));--sinch-comp-text-font:var(--sinch-sys-font-body-m);--sinch-comp-text-align:unset}:host([inline]){display:inline}:host([type="s"]){--sinch-comp-text-font:var(--sinch-sys-font-body-s)}:host([type=xs]){--sinch-comp-text-font:var(--sinch-sys-font-body-xs)}:host([type=xxs]){--sinch-comp-text-font:var(--sinch-sys-font-body-xxs)}:host([type="m"][emphasized]){--sinch-comp-text-font:var(--sinch-sys-font-body-emphasize)}:host([type="s"][emphasized]){--sinch-comp-text-font:var(--sinch-sys-font-body-emphasize-s)}:host([type=xs][emphasized]){--sinch-comp-text-font:var(--sinch-sys-font-body-emphasize-xs)}:host([ellipsis]){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--sinch-global-text-white-space:nowrap}</style><slot></slot>';
 const template$1k = document.createElement("template");
 template$1k.innerHTML = templateHTML$1k;
-class Text extends NectaryElement {
+let Text$1 = class Text2 extends NectaryElement {
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -423,8 +423,8 @@ class Text extends NectaryElement {
       getBooleanAttribute(this, "inline") ? "text" : "paragraph"
     );
   }
-}
-defineCustomElement("sinch-text", Text);
+};
+defineCustomElement("sinch-text", Text$1);
 const typeValues$6 = ["xl", "l", "m", "s", "xs"];
 const templateHTML$1j = '<style>:host{display:block;--sinch-comp-title-font:var(--sinch-sys-font-desktop-title-m)}:host([type=xl]){--sinch-comp-title-font:var(--sinch-sys-font-desktop-title-xl)}:host([type="l"]){--sinch-comp-title-font:var(--sinch-sys-font-desktop-title-l)}:host([type="m"]){--sinch-comp-title-font:var(--sinch-sys-font-desktop-title-m)}:host([type="s"]){--sinch-comp-title-font:var(--sinch-sys-font-desktop-title-s)}:host([type=xs]){--sinch-comp-title-font:var(--sinch-sys-font-desktop-title-xs)}#text{letter-spacing:-2%;color:var(--sinch-global-color-text,var(--sinch-sys-color-text-default));font:var(--sinch-comp-title-font)}:host([ellipsis]) #text{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}</style><span id="text"></span>';
 const template$1j = document.createElement("template");
@@ -3851,22 +3851,8 @@ class Pop extends NectaryElement {
     const clampedPosition = shouldClamp ? clampPosition({ x: xPos, y: yPos, ...localViewportInfos }) : { x: xPos, y: yPos };
     const clampedXPos = clampedPosition.x;
     const clampedYPos = clampedPosition.y;
-    if (this.hideOutsideViewport) {
-      const viewportPosition = getAnchorPosition(targetRectViewport, modalWidthViewport, modalHeightViewport, orient);
-      const visibilityViewportInfos = {
-        boundsWidth: window.innerWidth,
-        boundsHeight: window.innerHeight,
-        insetX: inset,
-        insetY: inset,
-        modalWidth: modalWidthViewport,
-        modalHeight: modalHeightViewport
-      };
-      const isOutOfViewport = this.#isOutsideViewport(viewportPosition.x, viewportPosition.y, visibilityViewportInfos);
-      if (isOutOfViewport) {
-        this.#$dialog.style.setProperty("visibility", "hidden");
-      } else {
-        this.#$dialog.style.removeProperty("visibility");
-      }
+    if (this.hideOutsideViewport && this.#isTargetOutsideViewport(targetRectViewport, inset)) {
+      this.#$dialog.style.setProperty("visibility", "hidden");
     } else {
       this.#$dialog.style.removeProperty("visibility");
     }
@@ -3951,10 +3937,8 @@ class Pop extends NectaryElement {
       this.#updateOrientation();
     }
   };
-  #isOutsideViewport(x, y, viewportInfos) {
-    const { boundsWidth, boundsHeight, insetX, insetY, modalWidth, modalHeight } = viewportInfos;
-    const clampedPosition = clampPosition({ x, y, boundsWidth, boundsHeight, insetX, insetY, modalWidth, modalHeight });
-    return Math.abs(clampedPosition.x - x) > 2 || Math.abs(clampedPosition.y - y) > 2;
+  #isTargetOutsideViewport(targetRect, inset) {
+    return targetRect.x + targetRect.width <= inset || targetRect.y + targetRect.height <= inset || targetRect.x >= window.innerWidth - inset || targetRect.y >= window.innerHeight - inset;
   }
 }
 defineCustomElement("sinch-pop", Pop);
@@ -4122,6 +4106,7 @@ const SHOW_DELAY_FAST = 250;
 const HIDE_DELAY = 0;
 const ANIMATION_DURATION = 100;
 const FOCUSABLE_OUTSIDE_TARGET_SELECTOR = 'a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"]), [contenteditable=""], [contenteditable="true"]';
+const OPEN_FLOATING_LAYER_SELECTOR = "sinch-popover[open], sinch-pop[open], dialog[open]";
 const OVERLAP_TOLERANCE = 1;
 const MAX_ZERO_DIMENSION_PLACEMENT_RETRIES = 8;
 const MIN_FIRST_REVEAL_STABILITY_FRAMES = 3;
@@ -4150,13 +4135,14 @@ class Tooltip extends NectaryElement {
   #isSuspendedByHover = false;
   #isSubscribed = false;
   #controller;
+  #childObserver = null;
   #placementScheduled = false;
   #zeroDimensionPlacementRetries = 0;
   #revealRequestId = 0;
   #hasCompletedFirstReveal = false;
   constructor() {
     super();
-    const shadowRoot = this.attachShadow();
+    const shadowRoot = this.attachShadow({ slotAssignment: "manual" });
     shadowRoot.appendChild(template$Y.content.cloneNode(true));
     this.#$pop = shadowRoot.querySelector("#pop");
     this.#$tooltipText = shadowRoot.querySelector("#text");
@@ -4185,6 +4171,11 @@ class Tooltip extends NectaryElement {
     this.setAttribute("role", "tooltip");
     this.#$pop.addEventListener("-close", this.#onPopClose, options);
     this.#$target.addEventListener("slotchange", this.#onTargetSlotChange, options);
+    this.#assignTargetNodes();
+    this.#childObserver = new MutationObserver(() => {
+      this.#assignTargetNodes();
+    });
+    this.#childObserver.observe(this, { childList: true });
     this.addEventListener("-show", this.#onShowReactHandler, options);
     this.addEventListener("-hide", this.#onHideReactHandler, options);
     this.#resizeObserver = new ResizeObserver(() => {
@@ -4216,6 +4207,8 @@ class Tooltip extends NectaryElement {
     this.#controller = null;
     this.#resizeObserver?.disconnect();
     this.#resizeObserver = null;
+    this.#childObserver?.disconnect();
+    this.#childObserver = null;
   }
   static get observedAttributes() {
     return [
@@ -4332,12 +4325,18 @@ class Tooltip extends NectaryElement {
     this.#tooltipState.destroy();
   };
   #onMouseEnter = () => {
+    if (this.#targetOwnsOpenFloatingLayer()) {
+      return;
+    }
     this.#claimHoverOwnership();
     this.#suspendFocusedTooltip();
     this.#closeActiveTooltip();
     this.#tooltipState.show();
   };
   #onContentMouseEnter = () => {
+    if (this.#targetOwnsOpenFloatingLayer()) {
+      return;
+    }
     this.#claimHoverOwnership();
     if (this.#hasFocus) {
       return;
@@ -4357,6 +4356,9 @@ class Tooltip extends NectaryElement {
     this.#tooltipState.show();
   };
   #shouldOpenForFocus() {
+    if (this.#targetOwnsOpenFloatingLayer()) {
+      return false;
+    }
     const activeEl = getDeepActiveElement(this.ownerDocument);
     if (!(activeEl instanceof HTMLElement) || !this.#targetContains(activeEl)) {
       return false;
@@ -4472,6 +4474,12 @@ class Tooltip extends NectaryElement {
       this.#tooltipState.hide();
     });
   };
+  #assignTargetNodes() {
+    const nodes = Array.from(this.childNodes).filter(
+      (node) => node instanceof Element || node instanceof Text
+    );
+    this.#$target.assign(...nodes);
+  }
   #targetContains(node) {
     return this.#$target.assignedElements().some((el) => composedContains(el, node));
   }
@@ -4487,6 +4495,13 @@ class Tooltip extends NectaryElement {
   #isFocusInFloatingLayer(el) {
     return el.tagName === "SINCH-POP" || el.tagName === "SINCH-TOOLTIP";
   }
+  // Suppress while a target-owned floating layer (e.g. a sinch-popover triggered by the
+  // target) is open, so the tooltip doesn't flicker over it or steal its focus.
+  #targetOwnsOpenFloatingLayer() {
+    return this.#getTargetElements().some((el) => {
+      return el.matches(OPEN_FLOATING_LAYER_SELECTOR) || el.querySelector(OPEN_FLOATING_LAYER_SELECTOR) !== null;
+    });
+  }
   #clearFocusSuppression() {
     this.#suppressFocusIn = false;
     this.#isSuspendedByHover = false;
@@ -4561,6 +4576,10 @@ class Tooltip extends NectaryElement {
   };
   // SHOW_DELAY ended, tooltip can be shown with animation
   #onStateShowEnd = () => {
+    if (this.#targetOwnsOpenFloatingLayer()) {
+      this.#tooltipState.destroy();
+      return;
+    }
     const revealRequestId = ++this.#revealRequestId;
     activeTooltip = this;
     this.#dispatchShowEvent();
@@ -9013,6 +9032,7 @@ const applyCountPlaceholder = (template2, count) => {
   return template2.replaceAll("{count}", count);
 };
 const sanitizeAttr = (value) => value.replaceAll("&", "&amp;").replaceAll('"', "&quot;").replaceAll("<", "&lt;");
+const toReactCamelCaseHandlerName = (eventSuffix) => `on${eventSuffix.split("-").map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join("")}`;
 const isValidAction = (value) => {
   if (typeof value !== "object" || value === null) {
     return false;
@@ -9083,9 +9103,9 @@ class FloatingPanel extends NectaryElement {
       this.#resizeThrottle?.fn();
     });
     this.#resizeObserver.observe(this.#$dialog);
-    this.addEventListener("-close", this.#onCloseReact, { signal });
-    this.addEventListener("-select-all", this.#onSelectAllReact, { signal });
-    this.addEventListener("-action", this.#onActionReact, { signal });
+    this.addEventListener("-close", this.#onCloseReactHandler, { signal });
+    this.addEventListener("-select-all", this.#onSelectAllReactHandler, { signal });
+    this.addEventListener("-action", this.#onActionReactHandler, { signal });
     if (!this.hasAttribute("actions")) {
       this.#renderActions(null);
     }
@@ -9286,7 +9306,7 @@ class FloatingPanel extends NectaryElement {
    * `-${action}` convenience event. The per-action event lets consumers bind
    * directly to a specific action (e.g. `on-archive`) without switching on
    * `e.detail` — and it works for any user-defined action, not just the
-   * built-in defaults. React handlers are forwarded by `#onActionReact`.
+   * built-in defaults. React handlers are forwarded by `#onActionReactHandler`.
    */
   #dispatchAction(action) {
     this.dispatchEvent(new CustomEvent("-action", { detail: action }));
@@ -9392,16 +9412,20 @@ class FloatingPanel extends NectaryElement {
   #onActionsPopoverClose = () => {
     this.#closeOverflowMenu();
   };
-  #onCloseReact = (e) => {
+  #onCloseReactHandler = (e) => {
     getReactEventHandler(this, "on-close")?.(e);
+    getReactEventHandler(this, "onClose")?.(e);
   };
-  #onSelectAllReact = (e) => {
+  #onSelectAllReactHandler = (e) => {
     getReactEventHandler(this, "on-select-all")?.(e);
+    getReactEventHandler(this, "onSelectAll")?.(e);
   };
-  #onActionReact = (e) => {
+  #onActionReactHandler = (e) => {
     getReactEventHandler(this, "on-action")?.(e);
+    getReactEventHandler(this, "onAction")?.(e);
     if (e instanceof CustomEvent && typeof e.detail === "string") {
       getReactEventHandler(this, `on-${e.detail}`)?.(e);
+      getReactEventHandler(this, toReactCamelCaseHandlerName(e.detail))?.(e);
     }
   };
   get panelRect() {
@@ -17882,7 +17906,7 @@ export {
   TabsIconOption,
   TabsOption,
   Tag,
-  Text,
+  Text$1 as Text,
   Textarea,
   TimePicker,
   Title,

package/floating-panel/index.js

@@ -29,6 +29,7 @@ const applyCountPlaceholder = (template2, count) => {
   return template2.replaceAll("{count}", count);
 };
 const sanitizeAttr = (value) => value.replaceAll("&", "&amp;").replaceAll('"', "&quot;").replaceAll("<", "&lt;");
+const toReactCamelCaseHandlerName = (eventSuffix) => `on${eventSuffix.split("-").map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join("")}`;
 const isValidAction = (value) => {
   if (typeof value !== "object" || value === null) {
     return false;
@@ -99,9 +100,9 @@ class FloatingPanel extends NectaryElement {
       this.#resizeThrottle?.fn();
     });
     this.#resizeObserver.observe(this.#$dialog);
-    this.addEventListener("-close", this.#onCloseReact, { signal });
-    this.addEventListener("-select-all", this.#onSelectAllReact, { signal });
-    this.addEventListener("-action", this.#onActionReact, { signal });
+    this.addEventListener("-close", this.#onCloseReactHandler, { signal });
+    this.addEventListener("-select-all", this.#onSelectAllReactHandler, { signal });
+    this.addEventListener("-action", this.#onActionReactHandler, { signal });
     if (!this.hasAttribute("actions")) {
       this.#renderActions(null);
     }
@@ -302,7 +303,7 @@ class FloatingPanel extends NectaryElement {
    * `-${action}` convenience event. The per-action event lets consumers bind
    * directly to a specific action (e.g. `on-archive`) without switching on
    * `e.detail` — and it works for any user-defined action, not just the
-   * built-in defaults. React handlers are forwarded by `#onActionReact`.
+   * built-in defaults. React handlers are forwarded by `#onActionReactHandler`.
    */
   #dispatchAction(action) {
     this.dispatchEvent(new CustomEvent("-action", { detail: action }));
@@ -408,16 +409,20 @@ class FloatingPanel extends NectaryElement {
   #onActionsPopoverClose = () => {
     this.#closeOverflowMenu();
   };
-  #onCloseReact = (e) => {
+  #onCloseReactHandler = (e) => {
     getReactEventHandler(this, "on-close")?.(e);
+    getReactEventHandler(this, "onClose")?.(e);
   };
-  #onSelectAllReact = (e) => {
+  #onSelectAllReactHandler = (e) => {
     getReactEventHandler(this, "on-select-all")?.(e);
+    getReactEventHandler(this, "onSelectAll")?.(e);
   };
-  #onActionReact = (e) => {
+  #onActionReactHandler = (e) => {
     getReactEventHandler(this, "on-action")?.(e);
+    getReactEventHandler(this, "onAction")?.(e);
     if (e instanceof CustomEvent && typeof e.detail === "string") {
       getReactEventHandler(this, `on-${e.detail}`)?.(e);
+      getReactEventHandler(this, toReactCamelCaseHandlerName(e.detail))?.(e);
     }
   };
   get panelRect() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "5.41.0",
+  "version": "5.41.2",
   "files": [
     "**/*/*.css",
     "**/*/*.json",

package/pop/index.js

@@ -381,22 +381,8 @@ class Pop extends NectaryElement {
     const clampedPosition = shouldClamp ? clampPosition({ x: xPos, y: yPos, ...localViewportInfos }) : { x: xPos, y: yPos };
     const clampedXPos = clampedPosition.x;
     const clampedYPos = clampedPosition.y;
-    if (this.hideOutsideViewport) {
-      const viewportPosition = getAnchorPosition(targetRectViewport, modalWidthViewport, modalHeightViewport, orient);
-      const visibilityViewportInfos = {
-        boundsWidth: window.innerWidth,
-        boundsHeight: window.innerHeight,
-        insetX: inset,
-        insetY: inset,
-        modalWidth: modalWidthViewport,
-        modalHeight: modalHeightViewport
-      };
-      const isOutOfViewport = this.#isOutsideViewport(viewportPosition.x, viewportPosition.y, visibilityViewportInfos);
-      if (isOutOfViewport) {
-        this.#$dialog.style.setProperty("visibility", "hidden");
-      } else {
-        this.#$dialog.style.removeProperty("visibility");
-      }
+    if (this.hideOutsideViewport && this.#isTargetOutsideViewport(targetRectViewport, inset)) {
+      this.#$dialog.style.setProperty("visibility", "hidden");
     } else {
       this.#$dialog.style.removeProperty("visibility");
     }
@@ -481,10 +467,8 @@ class Pop extends NectaryElement {
       this.#updateOrientation();
     }
   };
-  #isOutsideViewport(x, y, viewportInfos) {
-    const { boundsWidth, boundsHeight, insetX, insetY, modalWidth, modalHeight } = viewportInfos;
-    const clampedPosition = clampPosition({ x, y, boundsWidth, boundsHeight, insetX, insetY, modalWidth, modalHeight });
-    return Math.abs(clampedPosition.x - x) > 2 || Math.abs(clampedPosition.y - y) > 2;
+  #isTargetOutsideViewport(targetRect, inset) {
+    return targetRect.x + targetRect.width <= inset || targetRect.y + targetRect.height <= inset || targetRect.x >= window.innerWidth - inset || targetRect.y >= window.innerHeight - inset;
   }
 }
 defineCustomElement("sinch-pop", Pop);

package/tooltip/index.js

@@ -14,6 +14,7 @@ const SHOW_DELAY_FAST = 250;
 const HIDE_DELAY = 0;
 const ANIMATION_DURATION = 100;
 const FOCUSABLE_OUTSIDE_TARGET_SELECTOR = 'a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"]), [contenteditable=""], [contenteditable="true"]';
+const OPEN_FLOATING_LAYER_SELECTOR = "sinch-popover[open], sinch-pop[open], dialog[open]";
 const OVERLAP_TOLERANCE = 1;
 const MAX_ZERO_DIMENSION_PLACEMENT_RETRIES = 8;
 const MIN_FIRST_REVEAL_STABILITY_FRAMES = 3;
@@ -42,13 +43,14 @@ class Tooltip extends NectaryElement {
   #isSuspendedByHover = false;
   #isSubscribed = false;
   #controller;
+  #childObserver = null;
   #placementScheduled = false;
   #zeroDimensionPlacementRetries = 0;
   #revealRequestId = 0;
   #hasCompletedFirstReveal = false;
   constructor() {
     super();
-    const shadowRoot = this.attachShadow();
+    const shadowRoot = this.attachShadow({ slotAssignment: "manual" });
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$pop = shadowRoot.querySelector("#pop");
     this.#$tooltipText = shadowRoot.querySelector("#text");
@@ -77,6 +79,11 @@ class Tooltip extends NectaryElement {
     this.setAttribute("role", "tooltip");
     this.#$pop.addEventListener("-close", this.#onPopClose, options);
     this.#$target.addEventListener("slotchange", this.#onTargetSlotChange, options);
+    this.#assignTargetNodes();
+    this.#childObserver = new MutationObserver(() => {
+      this.#assignTargetNodes();
+    });
+    this.#childObserver.observe(this, { childList: true });
     this.addEventListener("-show", this.#onShowReactHandler, options);
     this.addEventListener("-hide", this.#onHideReactHandler, options);
     this.#resizeObserver = new ResizeObserver(() => {
@@ -108,6 +115,8 @@ class Tooltip extends NectaryElement {
     this.#controller = null;
     this.#resizeObserver?.disconnect();
     this.#resizeObserver = null;
+    this.#childObserver?.disconnect();
+    this.#childObserver = null;
   }
   static get observedAttributes() {
     return [
@@ -224,12 +233,18 @@ class Tooltip extends NectaryElement {
     this.#tooltipState.destroy();
   };
   #onMouseEnter = () => {
+    if (this.#targetOwnsOpenFloatingLayer()) {
+      return;
+    }
     this.#claimHoverOwnership();
     this.#suspendFocusedTooltip();
     this.#closeActiveTooltip();
     this.#tooltipState.show();
   };
   #onContentMouseEnter = () => {
+    if (this.#targetOwnsOpenFloatingLayer()) {
+      return;
+    }
     this.#claimHoverOwnership();
     if (this.#hasFocus) {
       return;
@@ -249,6 +264,9 @@ class Tooltip extends NectaryElement {
     this.#tooltipState.show();
   };
   #shouldOpenForFocus() {
+    if (this.#targetOwnsOpenFloatingLayer()) {
+      return false;
+    }
     const activeEl = getDeepActiveElement(this.ownerDocument);
     if (!(activeEl instanceof HTMLElement) || !this.#targetContains(activeEl)) {
       return false;
@@ -364,6 +382,12 @@ class Tooltip extends NectaryElement {
       this.#tooltipState.hide();
     });
   };
+  #assignTargetNodes() {
+    const nodes = Array.from(this.childNodes).filter(
+      (node) => node instanceof Element || node instanceof Text
+    );
+    this.#$target.assign(...nodes);
+  }
   #targetContains(node) {
     return this.#$target.assignedElements().some((el) => composedContains(el, node));
   }
@@ -379,6 +403,13 @@ class Tooltip extends NectaryElement {
   #isFocusInFloatingLayer(el) {
     return el.tagName === "SINCH-POP" || el.tagName === "SINCH-TOOLTIP";
   }
+  // Suppress while a target-owned floating layer (e.g. a sinch-popover triggered by the
+  // target) is open, so the tooltip doesn't flicker over it or steal its focus.
+  #targetOwnsOpenFloatingLayer() {
+    return this.#getTargetElements().some((el) => {
+      return el.matches(OPEN_FLOATING_LAYER_SELECTOR) || el.querySelector(OPEN_FLOATING_LAYER_SELECTOR) !== null;
+    });
+  }
   #clearFocusSuppression() {
     this.#suppressFocusIn = false;
     this.#isSuspendedByHover = false;
@@ -453,6 +484,10 @@ class Tooltip extends NectaryElement {
   };
   // SHOW_DELAY ended, tooltip can be shown with animation
   #onStateShowEnd = () => {
+    if (this.#targetOwnsOpenFloatingLayer()) {
+      this.#tooltipState.destroy();
+      return;
+    }
     const revealRequestId = ++this.#revealRequestId;
     activeTooltip = this;
     this.#dispatchShowEvent();