@nectary/components 5.3.0 → 5.4.1

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() {
@@ -2846,6 +2862,7 @@ class Pop extends NectaryElement {
   #targetStyleValue = null;
   #modalWidth = 0;
   #modalHeight = 0;
+  #scrollableParents = [];
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -2896,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);
   }
@@ -2926,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;
@@ -2986,57 +3012,71 @@ 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() {
@@ -3045,17 +3085,18 @@ class Pop extends NectaryElement {
     }
     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");
@@ -3087,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;
@@ -3130,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`);
@@ -3147,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) {
@@ -3245,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 {
@@ -3261,6 +3287,9 @@ class TooltipState {
     };
   }
   show() {
+    if (this.#options.isOpened === false) {
+      return;
+    }
     switch (this.#state) {
       case "hide": {
         this.#switchToHideToShow();
@@ -3273,6 +3302,9 @@ class TooltipState {
     }
   }
   hide() {
+    if (this.#options.isOpened === true) {
+      return;
+    }
     switch (this.#state) {
       case "hide-to-show": {
         this.#onHideAnimationEnd();
@@ -3325,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);
@@ -3393,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;
@@ -3455,6 +3489,7 @@ class Tooltip extends NectaryElement {
   }
   static get observedAttributes() {
     return [
+      "is-opened",
       "text",
       "orientation",
       "text-align",
@@ -3492,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", "");
   }
@@ -3545,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 = () => {
@@ -5790,7 +5843,7 @@ class Popover extends NectaryElement {
     const slottedContent = this.#getFirstAssignedElementInSlot(this.#$contentSlot);
     const popoverIdReference = `popover-${(/* @__PURE__ */ new Date()).getMilliseconds()}-${Math.round(100 * Math.random())}`;
     if (slottedContent != null && slottedTarget != null) {
-      updateAttribute(slottedContent, "aria-lablledby", popoverIdReference);
+      updateAttribute(slottedContent, "aria-labelledby", popoverIdReference);
     }
     if (slottedTarget != null) {
       updateAttribute(slottedTarget, "aria-controls", popoverIdReference);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "5.3.0",
+  "version": "5.4.1",
   "files": [
     "**/*/*.css",
     "**/*/*.json",
@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.22.15",
-    "@nectary/assets": "3.1.1"
+    "@nectary/assets": "3.1.2"
   },
   "devDependencies": {
     "@babel/cli": "^7.22.15",

package/pop/index.d.ts

@@ -8,6 +8,8 @@ export declare class Pop extends NectaryElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     static get observedAttributes(): string[];
+    get allowScroll(): boolean;
+    get hideOutsideViewport(): boolean;
     set modal(isModal: boolean);
     get modal(): boolean;
     set open(isOpen: boolean);
@@ -18,5 +20,6 @@ export declare class Pop extends NectaryElement {
     get inset(): number;
     get footprintRect(): TRect;
     get popoverRect(): TRect;
+    get shouldCloseOnBackdropClick(): boolean;
     attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
 }

package/pop/index.js

@@ -1,5 +1,5 @@
 import { Context, subscribeContext } from "../utils/context.js";
-import { getBooleanAttribute, updateBooleanAttribute, getLiteralAttribute, updateLiteralAttribute, updateIntegerAttribute, getIntegerAttribute, isAttrEqual, isAttrTrue } from "../utils/dom.js";
+import { getBooleanAttribute, updateBooleanAttribute, getLiteralAttribute, updateLiteralAttribute, updateIntegerAttribute, getIntegerAttribute, isAttrEqual, getScrollableParents, isAttrTrue } from "../utils/dom.js";
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
 import { getRect } from "../utils/rect.js";
 import { getFirstSlotElement, getFirstFocusableElement, isElementFocused } from "../utils/slot.js";
@@ -27,6 +27,7 @@ class Pop extends NectaryElement {
   #targetStyleValue = null;
   #modalWidth = 0;
   #modalHeight = 0;
+  #scrollableParents = [];
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -77,6 +78,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);
   }
@@ -107,6 +114,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;
@@ -167,57 +177,71 @@ 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());
+      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");
       }
-      getFirstSlotElement(this.#$targetSlot)?.setAttribute("slot", "target-open");
-      this.#$targetOpenSlot.addEventListener("keydown", this.#onTargetKeydown);
+      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() {
@@ -226,17 +250,18 @@ class Pop extends NectaryElement {
     }
     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");
@@ -268,17 +293,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;
@@ -311,9 +342,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`);
@@ -328,49 +367,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) {
@@ -426,6 +428,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);
 export {

package/pop/types.d.ts

@@ -1,10 +1,13 @@
 import type { NectaryComponentReactByType, NectaryComponentVanillaByType, TRect, NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export type TSinchPopOrientation = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'bottom-center' | 'bottom-stretch' | 'top-center' | 'top-stretch' | 'center-right' | 'center-left';
 export type TSinchPopProps = {
+    /** Allow scrolling of the page when pop is open */
+    'allow-scroll'?: boolean;
     /** Open/close state */
     open: boolean;
     /** Orientation, where it *points to* from origin */
     orientation: TSinchPopOrientation;
+    'hide-outside-viewport'?: boolean;
     /** Modal/non-modal mode */
     modal?: boolean;
     inset?: number;

package/popover/index.js

@@ -38,7 +38,7 @@ class Popover extends NectaryElement {
     const slottedContent = this.#getFirstAssignedElementInSlot(this.#$contentSlot);
     const popoverIdReference = `popover-${(/* @__PURE__ */ new Date()).getMilliseconds()}-${Math.round(100 * Math.random())}`;
     if (slottedContent != null && slottedTarget != null) {
-      updateAttribute(slottedContent, "aria-lablledby", popoverIdReference);
+      updateAttribute(slottedContent, "aria-labelledby", popoverIdReference);
     }
     if (slottedTarget != null) {
       updateAttribute(slottedTarget, "aria-controls", popoverIdReference);

package/select-menu/types.d.ts

@@ -10,6 +10,8 @@ export type TSinchSelectMenuProps = {
     multiple?: boolean;
     /** Enforce the search bar appearing, by default it appears above a certain number of options  */
     searchable?: boolean | null;
+    /** Value for the search input */
+    'search-value'?: string;
     /** Controls the autocomplete of the search input */
     'search-autocomplete'?: HTMLInputElement['autocomplete'];
     /** Text for search bar's placeholder */

package/tooltip/index.d.ts

@@ -11,6 +11,7 @@ export declare class Tooltip extends NectaryElement {
     disconnectedCallback(): void;
     static get observedAttributes(): string[];
     attributeChangedCallback(name: string, _: string | null, newVal: string | null): void;
+    get isOpenedControlled(): boolean | undefined;
     get text(): string;
     set text(value: string);
     get orientation(): TSinchTooltipOrientation;

package/tooltip/index.js

@@ -1,12 +1,12 @@
 import "../text/index.js";
 import "../pop/index.js";
-import { shouldReduceMotion, updateAttribute, getAttribute, getLiteralAttribute, updateLiteralAttribute, updateBooleanAttribute, setClass } from "../utils/dom.js";
+import { shouldReduceMotion, updateAttribute, updateBooleanAttribute, getAttribute, getLiteralAttribute, updateLiteralAttribute, setClass } from "../utils/dom.js";
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
 import { rectOverlap } from "../utils/rect.js";
 import { getReactEventHandler } from "../utils/get-react-event-handler.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>';
+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" 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 = 8;
 const SHOW_DELAY_SLOW = 1e3;
 const SHOW_DELAY_FAST = 250;
@@ -68,6 +68,7 @@ class Tooltip extends NectaryElement {
   }
   static get observedAttributes() {
     return [
+      "is-opened",
       "text",
       "orientation",
       "text-align",
@@ -105,8 +106,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", "");
   }
@@ -158,8 +175,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 = () => {

package/tooltip/tooltip-state.d.ts

@@ -1,4 +1,5 @@
 type TTooltipStateOptions = {
+    isOpened?: boolean | undefined;
     showDelay: number;
     hideDelay: number;
     hideAnimationDuration: number;

package/tooltip/tooltip-state.js

@@ -12,6 +12,9 @@ class TooltipState {
     };
   }
   show() {
+    if (this.#options.isOpened === false) {
+      return;
+    }
     switch (this.#state) {
       case "hide": {
         this.#switchToHideToShow();
@@ -24,6 +27,9 @@ class TooltipState {
     }
   }
   hide() {
+    if (this.#options.isOpened === true) {
+      return;
+    }
     switch (this.#state) {
       case "hide-to-show": {
         this.#onHideAnimationEnd();
@@ -76,13 +82,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);

package/tooltip/types.d.ts

@@ -3,6 +3,7 @@ export type TSinchTooltipOrientation = 'top' | 'bottom' | 'left' | 'right' | 'to
 export type TSinchTooltipTextAlign = 'center' | 'right' | 'left';
 export type TSinchTooltipType = 'slow' | 'fast';
 export type TSinchTooltipProps = {
+    'is-opened'?: string;
     /** Text */
     text: string;
     /** Orientation, where it *points to* from origin */

package/utils/dom.d.ts

@@ -32,4 +32,5 @@ export declare const getCssVars: (element: Element, variableNames: string[]) =>
 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 {};

package/utils/dom.js

@@ -137,6 +137,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;
+};
 export {
   attrValueToInteger,
   attrValueToPixels,
@@ -148,6 +164,7 @@ export {
   getCssVars,
   getIntegerAttribute,
   getLiteralAttribute,
+  getScrollableParents,
   hasClass,
   isAttrEqual,
   isAttrTrue,

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, 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, hasClass, isAttrEqual, isAttrTrue, isLiteralValue, 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";
@@ -32,6 +32,7 @@ export {
   getLiteralAttribute,
   getReactEventHandler,
   getRect,
+  getScrollableParents,
   getTargetAttribute,
   getTargetByAttribute,
   getTargetIndexInParent,