@likable-hair/svelte 3.0.69 → 3.0.71

package/dist/components/simple/common/Menu.svelte

@@ -19,11 +19,11 @@ function calculateMenuPosition(params) {
         let activatorHeight = params.activator.offsetHeight;
         _top = activatorTop + activatorHeight + _activatorGap;
         _left = activatorLeft;
-        let { top: fixedParentTop, left: fixedParentLeft, element } = getParentInstanceFromViewport(activator?.parentElement);
-        if (!!element) {
+        let { top: fixedParentTop, left: fixedParentLeft, fixedParent, validStickyParent } = getParentInstanceFromViewport(activator?.parentElement);
+        if (!!fixedParent) {
           _top = _top - fixedParentTop;
           _left = _left - fixedParentLeft;
-        } else {
+        } else if (!validStickyParent) {
           _top = _top + window.scrollY;
           _left = _left + window.scrollX;
         }
@@ -34,11 +34,11 @@ function calculateMenuPosition(params) {
         let menuWidth = params.menuElement.offsetWidth;
         _top = activatorTop + activatorHeight + _activatorGap;
         _left = activatorLeft;
-        let { top: fixedParentTop, left: fixedParentLeft, element } = getParentInstanceFromViewport(activator?.parentElement);
-        if (!!element) {
+        let { top: fixedParentTop, left: fixedParentLeft, fixedParent, validStickyParent } = getParentInstanceFromViewport(activator?.parentElement);
+        if (!!fixedParent) {
           _top = _top - fixedParentTop;
           _left = _left - fixedParentLeft;
-        } else {
+        } else if (!validStickyParent) {
           _top = _top + window.scrollY;
           _left = _left + window.scrollX;
         }
@@ -81,8 +81,15 @@ function calculateMenuPosition(params) {
         _left = 0;
       if (!_top)
         _top = 0;
-      _left = _left - positionedAncestorLeft;
-      _top = _top - positionedAncestorTop;
+      _left = _left - (positionedAncestorLeft + window.scrollX);
+      _top = _top - (positionedAncestorTop + window.scrollY);
+      if (!!activator) {
+        let { validStickyParent } = getParentInstanceFromViewport(activator?.parentElement);
+        if (!!validStickyParent) {
+          _left = _left + window.scrollX;
+          _top = _top + window.scrollY;
+        }
+      }
     }
   }
 }
@@ -173,7 +180,9 @@ function handleCloseControllerClick() {
 function getParentInstanceFromViewport(activatorParent) {
   let top = 0;
   let left = 0;
-  let fixedParentElement = void 0;
+  let fixedParent = void 0;
+  let stickyParent = !!activatorParent && getComputedStyle(activatorParent).position === "sticky" ? activatorParent : void 0;
+  let isStickyValid = false;
   while (!!activatorParent && activatorParent.nodeName.toLowerCase() !== "html" && activatorParent.nodeName.toLowerCase() !== "body") {
     const currentParent = activatorParent.parentElement;
     if (!currentParent)
@@ -185,19 +194,21 @@ function getParentInstanceFromViewport(activatorParent) {
       const boundingClientRect = activatorParent.getBoundingClientRect();
       top = top + boundingClientRect.top;
       left = left + boundingClientRect.left;
-      fixedParentElement = activatorParent;
+      fixedParent = activatorParent;
+    }
+    if (position === "sticky") {
+      stickyParent = activatorParent;
+    }
+    if (position === "relative" && !!stickyParent) {
+      isStickyValid = true;
     }
     activatorParent = activatorParent.parentElement;
   }
-  return { top, left, element: fixedParentElement };
+  return { top, left, fixedParent, validStickyParent: isStickyValid ? stickyParent : void 0 };
 }
 function handleWindowScrollOrResize() {
-  if (open && !!menuElement && !!activator) {
-    let elem = getPositionedAncestor(menuElement.parentElement);
-    if (!!elem && getComputedStyle(elem).position == "sticky")
-      return;
+  if (open && !!menuElement && !!activator)
     calculateMenuPosition({ menuElement, activator });
-  }
 }
 function handleMenuClick(e, zIndex2) {
   let otherMenus = document.querySelectorAll(`[data-menu]`);
@@ -235,7 +246,7 @@ function handleMenuClick(e, zIndex2) {
     data-menu
     data-uid={currentUid}
     style:z-index={zIndex}
-    style:position={!!positionedAncestor && getComputedStyle(positionedAncestor).position == 'sticky' ? 'sticky' : 'absolute'}
+    style:position="absolute"
     style:top={_top + "px"}
     style:box-shadow={_boxShadow}
     style:border-radius={_borderRadius}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@likable-hair/svelte",
   "description": "A Svelte component for likablehair",
-  "version": "3.0.69",
+  "version": "3.0.71",
   "scripts": {
     "host": "vite --host",
     "dev": "vite dev",