@nectary/components 5.2.1 → 5.4.0

package/bundle.js

@@ -127,6 +127,22 @@ const shouldReduceMotion = () => window.matchMedia("(prefers-reduced-motion: red
 const isAttrEqual = (oldVal, newVal) => {
   return oldVal === newVal || newVal === null && oldVal === "false" || newVal === "" && oldVal === "true";
 };
+const getScrollableParents = (node) => {
+  const scrollableParents = [];
+  if (node == null) {
+    return scrollableParents;
+  }
+  let parent = node.parentElement;
+  while (parent != null) {
+    const computedStyle = getComputedStyle(parent);
+    if ((parent.scrollHeight > parent.clientHeight || parent.scrollWidth > parent.clientWidth) && (computedStyle.overflow === "auto" || computedStyle.overflow === "scroll" || computedStyle.overflowY === "auto" || computedStyle.overflowY === "scroll" || computedStyle.overflowX === "auto" || computedStyle.overflowX === "scroll")) {
+      scrollableParents.push(parent);
+    }
+    parent = parent.parentElement;
+  }
+  scrollableParents.push(document);
+  return scrollableParents;
+};
 class NectaryElementBase extends HTMLElement {
   static _isGlobal = false;
   static get elementName() {
@@ -2834,6 +2850,7 @@ class Pop extends NectaryElement {
   #$focus;
   #$dialog;
   #resizeThrottle;
+  #resizeObserver;
   #$targetSlot;
   #$targetOpenSlot;
   #$contentSlot;
@@ -2845,6 +2862,7 @@ class Pop extends NectaryElement {
   #targetStyleValue = null;
   #modalWidth = 0;
   #modalHeight = 0;
+  #scrollableParents = [];
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -2857,6 +2875,9 @@ class Pop extends NectaryElement {
     this.#$contentSlot = shadowRoot.querySelector('slot[name="content"]');
     this.#$targetOpenWrapper = shadowRoot.querySelector("#target-open");
     this.#resizeThrottle = throttleAnimationFrame(this.#updateOrientation);
+    this.#resizeObserver = new ResizeObserver(() => {
+      this.#resizeThrottle.fn();
+    });
     this.#keydownContext = new Context(this.#$contentSlot, "keydown");
     this.#visibilityContext = new Context(this.#$contentSlot, "visibility");
     this.#controller = new AbortController();
@@ -2883,6 +2904,7 @@ class Pop extends NectaryElement {
     this.#controller.abort();
     this.#controller = null;
     this.#resizeThrottle.cancel();
+    this.#resizeObserver.disconnect();
     this.#onCollapse();
   }
   static get observedAttributes() {
@@ -2891,6 +2913,12 @@ class Pop extends NectaryElement {
       "open"
     ];
   }
+  get allowScroll() {
+    return getBooleanAttribute(this, "allow-scroll");
+  }
+  get hideOutsideViewport() {
+    return getBooleanAttribute(this, "hide-outside-viewport");
+  }
   set modal(isModal) {
     updateBooleanAttribute(this, "modal", isModal);
   }
@@ -2921,6 +2949,9 @@ class Pop extends NectaryElement {
   get popoverRect() {
     return getRect(this.#$dialog);
   }
+  get shouldCloseOnBackdropClick() {
+    return !getBooleanAttribute(this, "disable-backdrop-close");
+  }
   attributeChangedCallback(name, oldVal, newVal) {
     if (isAttrEqual(oldVal, newVal)) {
       return;
@@ -2981,74 +3012,91 @@ class Pop extends NectaryElement {
     this.#$targetSlot.removeEventListener("blur", this.#stopEventPropagation, true);
     this.#$focus.removeAttribute("tabindex");
     this.#$focus.removeAttribute("style");
-    this.#$dialog.showModal();
+    if (this.modal || !this.allowScroll) {
+      this.#$dialog.showModal();
+    } else {
+      this.#$dialog.show();
+    }
     this.#$targetWrapper.setAttribute("aria-expanded", "true");
     this.#updateOrientation();
+    this.#resizeObserver.observe(this.#$dialog);
     if (this.modal) {
       getFirstFocusableElement(this.#$contentSlot)?.focus();
     } else {
-      const $targetEl = this.#getFirstTargetElement(this.#$targetSlot);
-      const targetElComputedStyle = getComputedStyle($targetEl);
-      const marginLeft = parseInt(targetElComputedStyle.marginLeft);
-      const marginRight = parseInt(targetElComputedStyle.marginRight);
-      const marginTop = parseInt(targetElComputedStyle.marginTop);
-      const marginBottom = parseInt(targetElComputedStyle.marginBottom);
-      const targetRect = this.#getTargetRect();
-      this.#$targetWrapper.style.setProperty("display", "block");
-      this.#$targetWrapper.style.setProperty("width", `${targetRect.width + marginLeft + marginRight}px`);
-      this.#$targetWrapper.style.setProperty("height", `${targetRect.height + marginTop + marginBottom}px`);
-      this.#$targetOpenWrapper.style.setProperty("width", `${targetRect.width}px`);
-      this.#$targetOpenWrapper.style.setProperty("height", `${targetRect.height}px`);
-      this.#targetStyleValue = $targetEl.getAttribute("style");
-      $targetEl.style.setProperty("margin", "0");
-      $targetEl.style.setProperty("position", "static");
-      if (targetElComputedStyle.transform !== "none") {
-        const matrix = new DOMMatrixReadOnly(targetElComputedStyle.transform);
-        $targetEl.style.setProperty("transform", matrix.translate(-matrix.e, -matrix.f).toString());
-      }
-      getFirstSlotElement(this.#$targetSlot)?.setAttribute("slot", "target-open");
-      this.#$targetOpenSlot.addEventListener("keydown", this.#onTargetKeydown);
+      if (!this.allowScroll) {
+        const $targetEl = this.#getFirstTargetElement(this.#$targetSlot);
+        const targetElComputedStyle = getComputedStyle($targetEl);
+        const marginLeft = parseInt(targetElComputedStyle.marginLeft);
+        const marginRight = parseInt(targetElComputedStyle.marginRight);
+        const marginTop = parseInt(targetElComputedStyle.marginTop);
+        const marginBottom = parseInt(targetElComputedStyle.marginBottom);
+        const targetRect = this.#getTargetRect();
+        this.#$targetWrapper.style.setProperty("display", "block");
+        this.#$targetWrapper.style.setProperty("width", `${targetRect.width + marginLeft + marginRight}px`);
+        this.#$targetWrapper.style.setProperty("height", `${targetRect.height + marginTop + marginBottom}px`);
+        this.#$targetOpenWrapper.style.setProperty("width", `${targetRect.width}px`);
+        this.#$targetOpenWrapper.style.setProperty("height", `${targetRect.height}px`);
+        this.#targetStyleValue = $targetEl.getAttribute("style");
+        $targetEl.style.setProperty("margin", "0");
+        $targetEl.style.setProperty("position", "static");
+        if (targetElComputedStyle.transform !== "none") {
+          const matrix = new DOMMatrixReadOnly(targetElComputedStyle.transform);
+          $targetEl.style.setProperty("transform", matrix.translate(-matrix.e, -matrix.f).toString());
+        }
+        getFirstSlotElement(this.#$targetSlot)?.setAttribute("slot", "target-open");
+      }
+      const activeSlot = this.allowScroll ? this.#$targetSlot : this.#$targetOpenSlot;
+      activeSlot.addEventListener("keydown", this.#onTargetKeydown);
       if (this.#targetActiveElement !== null) {
-        this.#$targetOpenSlot.addEventListener("focus", this.#stopEventPropagation, true);
+        activeSlot.addEventListener("focus", this.#stopEventPropagation, true);
         this.#targetActiveElement.focus();
-        this.#$targetOpenSlot.removeEventListener("focus", this.#stopEventPropagation, true);
+        activeSlot.removeEventListener("focus", this.#stopEventPropagation, true);
         if (!isElementFocused(this.#targetActiveElement)) {
           requestAnimationFrame(() => {
             if (this.isDomConnected && this.#$dialog.open) {
-              this.#$targetOpenSlot.addEventListener("focus", this.#stopEventPropagation, true);
+              activeSlot.addEventListener("focus", this.#stopEventPropagation, true);
               this.#targetActiveElement.focus();
-              this.#$targetOpenSlot.removeEventListener("focus", this.#stopEventPropagation, true);
+              activeSlot.removeEventListener("focus", this.#stopEventPropagation, true);
             }
           });
         }
       }
     }
-    disableOverscroll();
-    window.addEventListener("scroll", this.#updatePosition, { passive: false });
+    if (!this.allowScroll) {
+      disableOverscroll();
+    } else {
+      this.#scrollableParents = getScrollableParents(this.#getFirstTargetElement(this.#$targetSlot));
+      this.#scrollableParents.forEach((el) => {
+        el.addEventListener("scroll", () => this.#updatePosition(false), { passive: true, capture: true });
+      });
+    }
     window.addEventListener("resize", this.#onResize);
     requestAnimationFrame(() => {
       if (this.isDomConnected && this.#$dialog.open) {
         this.#$contentSlot.addEventListener("slotchange", this.#onContentSlotChange);
       }
     });
+    requestAnimationFrame(() => this.#updatePosition());
     this.#dispatchContentVisibility(true);
   }
   #onCollapse() {
     if (!this.#$dialog.open) {
       return;
     }
+    this.#resizeObserver.disconnect();
     const isNonModal = !this.modal;
+    const activeSlot = this.allowScroll ? this.#$targetSlot : this.#$targetOpenSlot;
     this.#dispatchContentVisibility(false);
-    this.#$targetOpenSlot.removeEventListener("keydown", this.#onTargetKeydown);
+    activeSlot.removeEventListener("keydown", this.#onTargetKeydown);
     if (isNonModal) {
-      this.#$targetOpenSlot.addEventListener("blur", this.#captureActiveElement, true);
+      activeSlot.addEventListener("blur", this.#captureActiveElement, true);
     }
     this.#$dialog.close();
     this.#$targetWrapper.setAttribute("aria-expanded", "false");
     if (isNonModal) {
-      this.#$targetOpenSlot.removeEventListener("blur", this.#captureActiveElement, true);
+      activeSlot.removeEventListener("blur", this.#captureActiveElement, true);
     }
-    if (isNonModal) {
+    if (isNonModal && !this.allowScroll) {
       const targetEl = this.#getFirstTargetElement(this.#$targetOpenSlot);
       targetEl.style.removeProperty("margin");
       targetEl.style.removeProperty("position");
@@ -3080,17 +3128,23 @@ class Pop extends NectaryElement {
         this.#targetActiveElement = null;
       }
     }
-    enableOverscroll();
+    if (!this.allowScroll) {
+      enableOverscroll();
+    } else {
+      this.#scrollableParents.forEach((el) => {
+        el.removeEventListener("scroll", () => this.#updatePosition(false), { capture: true });
+      });
+    }
     this.#resizeThrottle.cancel();
     window.removeEventListener("resize", this.#onResize);
-    window.removeEventListener("scroll", this.#updatePosition);
+    this.#scrollableParents = [];
     this.#$contentSlot.removeEventListener("slotchange", this.#onContentSlotChange);
   }
   #onResize = () => {
     this.#resizeThrottle.fn();
   };
-  #updatePosition = () => {
-    const targetRect = this.modal ? this.#getTargetRect() : this.#$targetWrapper.getBoundingClientRect();
+  #updatePosition = (updateWidth) => {
+    const targetRect = this.modal || this.allowScroll ? this.#getTargetRect() : this.#$targetWrapper.getBoundingClientRect();
     const orient = this.orientation;
     const modalWidth = this.#modalWidth;
     const modalHeight = this.#modalHeight;
@@ -3123,9 +3177,17 @@ class Pop extends NectaryElement {
     }
     const clampedXPos = Math.max(inset, Math.min(xPos, window.innerWidth - modalWidth - inset));
     const clampedYPos = Math.max(inset, Math.min(yPos, window.innerHeight - modalHeight - inset));
+    if (this.hideOutsideViewport && this.#isPopPointInViewport(xPos, yPos)) {
+      this.#$dialog.style.setProperty("visibility", "hidden");
+    } else {
+      this.#$dialog.style.removeProperty("visibility");
+    }
     this.#$dialog.style.setProperty("left", `${clampedXPos}px`);
     this.#$dialog.style.setProperty("top", `${clampedYPos}px`);
-    if (!this.modal) {
+    if (updateWidth === true) {
+      this.#$dialog.style.setProperty("width", `${modalWidth}px`);
+    }
+    if (!this.modal && !this.allowScroll) {
       const targetLeftPos = targetRect.x - clampedXPos;
       const targetTopPos = targetRect.y - clampedYPos;
       this.#$targetOpenWrapper.style.setProperty("left", `${targetLeftPos}px`);
@@ -3140,49 +3202,12 @@ class Pop extends NectaryElement {
     const shouldSetWidthToTarget = orient === "top-stretch" || orient === "bottom-stretch";
     const modalHeight = modalRect.height;
     const modalWidth = shouldSetWidthToTarget ? targetRect.width : modalRect.width;
-    const inset = this.inset;
-    let xPos = 0;
-    let yPos = 0;
     this.#modalHeight = modalHeight;
     this.#modalWidth = modalWidth;
-    if (orient === "bottom-right" || orient === "top-right" || orient === "top-stretch" || orient === "bottom-stretch") {
-      xPos = targetRect.x;
-    }
-    if (orient === "bottom-left" || orient === "top-left") {
-      xPos = targetRect.x + targetRect.width - modalWidth;
-    }
-    if (orient === "bottom-center" || orient === "top-center") {
-      xPos = targetRect.x + targetRect.width / 2 - modalWidth / 2;
-    }
-    if (orient === "center-right") {
-      xPos = targetRect.x + targetRect.width;
-    }
-    if (orient === "center-left") {
-      xPos = targetRect.x - modalWidth;
-    }
-    if (orient === "bottom-left" || orient === "bottom-right" || orient === "bottom-stretch" || orient === "bottom-center") {
-      yPos = targetRect.y + targetRect.height;
-    }
-    if (orient === "top-left" || orient === "top-right" || orient === "top-stretch" || orient === "top-center") {
-      yPos = targetRect.y - modalHeight;
-    }
-    if (orient === "center-left" || orient === "center-right") {
-      yPos = targetRect.y + targetRect.height / 2 - modalHeight / 2;
-    }
-    xPos = Math.round(Math.max(inset, Math.min(xPos, window.innerWidth - modalWidth - inset)));
-    yPos = Math.round(Math.max(inset, Math.min(yPos, window.innerHeight - modalHeight - inset)));
-    this.#$dialog.style.setProperty("left", `${xPos}px`);
-    this.#$dialog.style.setProperty("top", `${yPos}px`);
-    this.#$dialog.style.setProperty("width", `${modalWidth}px`);
-    if (!this.modal) {
-      const targetLeftPos = targetRect.x - xPos;
-      const targetTopPos = targetRect.y - yPos;
-      this.#$targetOpenWrapper.style.setProperty("left", `${targetLeftPos}px`);
-      this.#$targetOpenWrapper.style.setProperty("top", `${targetTopPos}px`);
-    }
+    this.#updatePosition(true);
   };
   #onBackdropMouseDown = (e) => {
-    if (isTargetEqual(e, this.#$dialog)) {
+    if (this.shouldCloseOnBackdropClick && isTargetEqual(e, this.#$dialog)) {
       const rect = this.popoverRect;
       const isInside = e.x >= rect.x && e.x < rect.x + rect.width && e.y >= rect.y && e.y < rect.y + rect.height;
       if (!isInside) {
@@ -3238,6 +3263,14 @@ class Pop extends NectaryElement {
       this.#updateOrientation();
     }
   };
+  #isPopPointInViewport(x, y) {
+    const inset = this.inset;
+    const modalWidth = this.#modalWidth;
+    const modalHeight = this.#modalHeight;
+    const clampedX = Math.max(inset, Math.min(x, window.innerWidth - modalWidth - inset));
+    const clampedY = Math.max(inset, Math.min(y, window.innerHeight - modalHeight - inset));
+    return Math.abs(clampedX - x) > 2 || Math.abs(clampedY - y) > 2;
+  }
 }
 defineCustomElement("sinch-pop", Pop);
 class TooltipState {
@@ -3254,6 +3287,9 @@ class TooltipState {
     };
   }
   show() {
+    if (this.#options.isOpened === false) {
+      return;
+    }
     switch (this.#state) {
       case "hide": {
         this.#switchToHideToShow();
@@ -3266,6 +3302,9 @@ class TooltipState {
     }
   }
   hide() {
+    if (this.#options.isOpened === true) {
+      return;
+    }
     switch (this.#state) {
       case "hide-to-show": {
         this.#onHideAnimationEnd();
@@ -3318,13 +3357,15 @@ class TooltipState {
     this.#options.onShowStart();
     if (this.#options.showDelay === 0) {
       this.#onSwitchToShow();
+    } else if (this.#options.isOpened !== void 0) {
+      this.#timerId = window.setTimeout(this.#onSwitchToShow, 100);
     } else {
       this.#timerId = window.setTimeout(this.#onSwitchToShow, this.#options.showDelay);
     }
   }
   #switchToShowToHide(skipDelay, skipHideAnimation) {
     this.#switchToState("show-to-hide");
-    if (skipDelay === true || this.#options.hideDelay === 0) {
+    if (skipDelay === true || this.#options.hideDelay === 0 || this.#options.isOpened !== void 0) {
       this.#onShowToHideEnd(skipHideAnimation);
     } else {
       this.#timerId = window.setTimeout(this.#onShowToHideEnd, this.#options.hideDelay);
@@ -3386,7 +3427,7 @@ const getPopOrientation$1 = (orientation) => {
   }
   return orientation;
 };
-const templateHTML$Q = '<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>';
+const templateHTML$Q = '<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" allow-scroll hide-outside-viewport><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>';
 const TIP_SIZE$1 = 8;
 const SHOW_DELAY_SLOW = 1e3;
 const SHOW_DELAY_FAST = 250;
@@ -3448,6 +3489,7 @@ class Tooltip extends NectaryElement {
   }
   static get observedAttributes() {
     return [
+      "is-opened",
       "text",
       "orientation",
       "text-align",
@@ -3485,8 +3527,24 @@ class Tooltip extends NectaryElement {
         updateAttribute(this.#$pop, name, newVal);
         break;
       }
+      case "is-opened": {
+        this.#tooltipState.updateOptions({
+          isOpened: this.isOpenedControlled
+        });
+        if (this.isOpenedControlled === true) {
+          updateBooleanAttribute(this.#$pop, "disable-backdrop-close", true);
+          this.#tooltipState.show();
+        } else if (this.isOpenedControlled === false) {
+          updateBooleanAttribute(this.#$pop, "disable-backdrop-close", false);
+          this.#tooltipState.hide();
+        }
+      }
     }
   }
+  get isOpenedControlled() {
+    const isOpenedAttr = getAttribute(this, "is-opened");
+    return isOpenedAttr === null ? void 0 : isOpenedAttr !== "false";
+  }
   get text() {
     return getAttribute(this, "text", "");
   }
@@ -3538,8 +3596,10 @@ class Tooltip extends NectaryElement {
   };
   // Tooltip begins to wait for SHOW_DELAY on mouseenter
   #onStateShowStart = () => {
-    this.#subscribeScroll();
-    this.#subscribeMouseLeaveEvents();
+    if (this.isOpenedControlled === void 0) {
+      this.#subscribeScroll();
+      this.#subscribeMouseLeaveEvents();
+    }
   };
   // SHOW_DELAY ended, tooltip can be shown with animation
   #onStateShowEnd = () => {