@likable-hair/svelte 3.3.30 → 3.3.32

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

@@ -1,371 +1,494 @@
-<script>import { createId } from "@paralleldrive/cuid2";
-import {
-  fly
-} from "svelte/transition";
-import { sidebarOpened } from "../../../stores/layouts/unstableSidebarOpened";
-export let _top = void 0, _left = void 0, _width = "auto", _height = "auto", _maxHeight = void 0, _minWidth = void 0, _overflow = "auto", _boxShadow = void 0, _borderRadius = void 0, _activatorGap = 5;
-export let open = false, refreshPosition = false, activator = void 0, anchor = "bottom", closeOnClickOutside = false, inAnimation = fly, inAnimationConfig = {
-  duration: 100,
-  y: 10
-}, outAnimation = fly, outAnimationConfig = {
-  duration: 100,
-  y: 10
-}, menuElement = void 0, flipOnOverflow = false, stayInViewport = false, openingId = void 0;
-let zIndex = 50, currentUid = createId(), closeController;
-function calculateMenuPosition(params) {
-  if (params.menuElement) {
-    if (params.activator) {
-      if (anchor == "bottom") {
-        let { left: activatorLeft, top: activatorTop } = params.activator.getBoundingClientRect();
-        let activatorHeight = params.activator.offsetHeight;
-        _top = activatorTop + activatorHeight + _activatorGap;
-        _left = activatorLeft;
-        let { top: fixedParentTop, left: fixedParentLeft, fixedParent, validStickyParent } = getParentInstanceFromViewport(activator?.parentElement);
-        if (!!fixedParent) {
-          _top = _top - fixedParentTop;
-          _left = _left - fixedParentLeft;
-        } else if (!validStickyParent && !fixedParent) {
-          _top = _top + window.scrollY;
-          _left = _left + window.scrollX;
-        }
-      } else if (anchor == "bottom-center") {
-        let { left: activatorLeft, top: activatorTop } = params.activator.getBoundingClientRect();
-        let activatorHeight = params.activator.offsetHeight;
-        let activatorWidth = params.activator.offsetWidth;
-        let menuWidth = params.menuElement.offsetWidth;
-        _top = activatorTop + activatorHeight + _activatorGap;
-        _left = activatorLeft;
-        let { top: fixedParentTop, left: fixedParentLeft, fixedParent, validStickyParent } = getParentInstanceFromViewport(activator?.parentElement);
-        if (!!fixedParent) {
-          _top = _top - fixedParentTop;
-          _left = _left - fixedParentLeft;
-        } else if (!validStickyParent && !fixedParent) {
-          _top = _top + window.scrollY;
-          _left = _left + window.scrollX;
+<script lang="ts">
+  import { createId } from '@paralleldrive/cuid2';
+
+  import {
+    fly,
+    type FadeParams,
+    type FlyParams,
+    type SlideParams,
+    type TransitionConfig,
+  } from "svelte/transition";
+
+  import { sidebarOpened } from '../../../stores/layouts/unstableSidebarOpened';
+
+  export let _top: number | undefined = undefined,
+    _left: number | undefined = undefined,
+    _width: string = 'auto',
+    _height: string = 'auto',
+    _maxHeight: string | undefined = undefined,
+    _minWidth: string | undefined = undefined,
+    _overflow = "auto",
+    _boxShadow: string | undefined = undefined,
+    _borderRadius: string | undefined = undefined,
+    _activatorGap: number = 5
+
+  export let open = false,
+    refreshPosition = false,
+    activator: HTMLElement | undefined = undefined,
+    anchor: "bottom" | "bottom-center" | "right-center" | "left-center" | "up" | "left" | "right" | "up-center" = "bottom",
+    closeOnClickOutside = false,
+    inAnimation: (
+      node: Element,
+      params?: SlideParams | FlyParams | FadeParams
+    ) => TransitionConfig = fly,
+    inAnimationConfig: SlideParams | FlyParams | FadeParams = {
+      duration: 100,
+      y: 10,
+    },
+    outAnimation: (
+      node: Element,
+      params?: SlideParams | FlyParams | FadeParams
+    ) => TransitionConfig = fly,
+    outAnimationConfig: SlideParams | FlyParams | FadeParams = {
+      duration: 100,
+      y: 10,
+    },
+    menuElement: HTMLElement | undefined = undefined,
+    flipOnOverflow: boolean = false,
+    stayInViewport: boolean = false,
+    openingId: string | undefined = undefined;
+
+  let zIndex = 50,
+    currentUid: string = createId(),
+    closeController: HTMLElement;
+
+  function calculateMenuPosition(params: {
+    activator: HTMLElement;
+    menuElement: HTMLElement;
+  }) {
+    if (params.menuElement) {
+      if (params.activator) {
+        if (anchor == "bottom") {
+          let { left: activatorLeft, top: activatorTop } =
+            params.activator.getBoundingClientRect();
+          let activatorHeight = params.activator.offsetHeight;
+          _top = activatorTop + activatorHeight + _activatorGap;
+          _left = activatorLeft;
+
+          let { top: fixedParentTop, left: fixedParentLeft, fixedParent, validStickyParent } = getParentInstanceFromViewport(activator?.parentElement);
+          if(!!fixedParent) {
+            _top = _top - fixedParentTop
+            _left = _left - fixedParentLeft
+          } else if(!validStickyParent && !fixedParent) {
+            _top = _top + window.scrollY
+            _left = _left + window.scrollX
+          }
+
+        } else if (anchor == "bottom-center") {
+          let { left: activatorLeft, top: activatorTop } =
+            params.activator.getBoundingClientRect();
+          let activatorHeight = params.activator.offsetHeight;
+          let activatorWidth = params.activator.offsetWidth;
+          let menuWidth = params.menuElement.offsetWidth;
+          _top = activatorTop + activatorHeight + _activatorGap;
+          _left = activatorLeft;
+
+          let { top: fixedParentTop, left: fixedParentLeft, fixedParent, validStickyParent } = getParentInstanceFromViewport(activator?.parentElement);
+          if(!!fixedParent) {
+            _top = _top - fixedParentTop
+            _left = _left - fixedParentLeft
+          } else if(!validStickyParent && !fixedParent) {
+            _top = _top + window.scrollY
+            _left = _left + window.scrollX
+          }
+
+          if (menuWidth > activatorWidth) {
+            _left = _left - (menuWidth - activatorWidth) / 2;
+          } else {
+            _left = _left + (activatorWidth - menuWidth) / 2;
+          }
+        } else if (anchor == 'right-center') {
+          let { left: activatorLeft, top: activatorTop } =
+            params.activator.getBoundingClientRect();
+          let activatorHeight = params.activator.offsetHeight;
+          let activatorWidth = params.activator.offsetWidth;
+          let menuHeight = params.menuElement.offsetHeight;
+          let { top: fixedParentTop, left: fixedParentLeft } = getParentInstanceFromViewport(activator?.parentElement);
+
+          _top = activatorTop + window.scrollY + (activatorHeight / 2) - (menuHeight / 2) - fixedParentTop;
+          _left = activatorLeft + window.scrollX + activatorWidth + _activatorGap - fixedParentLeft;
+        } else if (anchor == 'left-center') {
+          let { left: activatorLeft, top: activatorTop } =
+            params.activator.getBoundingClientRect();
+          let activatorHeight = params.activator.offsetHeight;
+          let menuHeight = params.menuElement.offsetHeight;
+          let menuWidth = params.menuElement.offsetWidth;
+          let { top: fixedParentTop, left: fixedParentLeft, fixedParent, validStickyParent } = getParentInstanceFromViewport(activator?.parentElement);
+
+          _top = activatorTop + (activatorHeight / 2) - (menuHeight / 2);
+          _left = activatorLeft - menuWidth - _activatorGap;
+
+          if(!!fixedParent) {
+            _top = _top - fixedParentTop
+            _left = _left - fixedParentLeft
+          } else if(!validStickyParent && !fixedParent) {
+            _top = _top + window.scrollY
+            _left = _left + window.scrollX
+          }
+        } else if (anchor == 'up') {
+          let { left: activatorLeft, top: activatorTop } =
+            params.activator.getBoundingClientRect();
+          let menuHeight = params.menuElement.offsetHeight;
+          _top = activatorTop - menuHeight - _activatorGap;
+          _left = activatorLeft;
+
+          let { top: fixedParentTop, left: fixedParentLeft, fixedParent, validStickyParent } = getParentInstanceFromViewport(activator?.parentElement);
+          if(!!fixedParent) {
+            _top = _top - fixedParentTop
+            _left = _left - fixedParentLeft
+          } else if(!validStickyParent && !fixedParent) {
+            _top = _top + window.scrollY
+            _left = _left + window.scrollX
+          }
+        } else if (anchor == 'left') {
+          let { left: activatorLeft, top: activatorTop } =
+            params.activator.getBoundingClientRect();
+          let menuWidth = params.menuElement.offsetWidth;
+          _top = activatorTop;
+          _left = activatorLeft - menuWidth - _activatorGap;
+
+          let { top: fixedParentTop, left: fixedParentLeft, fixedParent, validStickyParent } = getParentInstanceFromViewport(activator?.parentElement);
+          if(!!fixedParent) {
+            _top = _top - fixedParentTop
+            _left = _left - fixedParentLeft
+          } else if(!validStickyParent && !fixedParent) {
+            _top = _top + window.scrollY
+            _left = _left + window.scrollX
+          }
+        } else if (anchor == 'right') {
+          let { left: activatorLeft, top: activatorTop } =
+            params.activator.getBoundingClientRect();
+          let activatorWidth = params.activator.offsetWidth;
+          _top = activatorTop;
+          _left = activatorLeft + activatorWidth + _activatorGap;
+
+          let { top: fixedParentTop, left: fixedParentLeft, fixedParent, validStickyParent } = getParentInstanceFromViewport(activator?.parentElement);
+          if(!!fixedParent) {
+            _top = _top - fixedParentTop
+            _left = _left - fixedParentLeft
+          } else if(!validStickyParent && !fixedParent) {
+            _top = _top + window.scrollY
+            _left = _left + window.scrollX
+          }
+        } else if (anchor == 'up-center') {
+          let { left: activatorLeft, top: activatorTop } =
+            params.activator.getBoundingClientRect();
+          let activatorWidth = params.activator.offsetWidth;
+          let menuHeight = params.menuElement.offsetHeight;
+          let menuWidth = params.menuElement.offsetWidth;
+          _top = activatorTop - menuHeight - _activatorGap;
+          _left = activatorLeft;
+
+          let { top: fixedParentTop, left: fixedParentLeft, fixedParent, validStickyParent } = getParentInstanceFromViewport(activator?.parentElement);
+          if(!!fixedParent) {
+            _top = _top - fixedParentTop
+            _left = _left - fixedParentLeft
+          } else if(!validStickyParent && !fixedParent) {
+            _top = _top + window.scrollY
+            _left = _left + window.scrollX
+          }
+
+          if (menuWidth > activatorWidth) {
+            _left = _left - (menuWidth - activatorWidth) / 2;
+          } else {
+            _left = _left + (activatorWidth - menuWidth) / 2;
+          }
         }
-        if (menuWidth > activatorWidth) {
-          _left = _left - (menuWidth - activatorWidth) / 2;
-        } else {
-          _left = _left + (activatorWidth - menuWidth) / 2;
+      }
+
+      if(flipOnOverflow && !!params.activator) {
+        let { top: activatorTopDistance } = params.activator.getBoundingClientRect()
+        if (window.innerHeight < activatorTopDistance + (menuElement?.offsetHeight || 0) + ((menuElement?.offsetHeight || 0) * 0.1)) {
+          _top = getTopDistance(params.activator) - _activatorGap - (menuElement?.offsetHeight || 0)
         }
-      } else if (anchor == "right-center") {
-        let { left: activatorLeft, top: activatorTop } = params.activator.getBoundingClientRect();
-        let activatorHeight = params.activator.offsetHeight;
-        let activatorWidth = params.activator.offsetWidth;
-        let menuHeight = params.menuElement.offsetHeight;
-        let { top: fixedParentTop, left: fixedParentLeft } = getParentInstanceFromViewport(activator?.parentElement);
-        _top = activatorTop + window.scrollY + activatorHeight / 2 - menuHeight / 2 - fixedParentTop;
-        _left = activatorLeft + window.scrollX + activatorWidth + _activatorGap - fixedParentLeft;
-      } else if (anchor == "left-center") {
-        let { left: activatorLeft, top: activatorTop } = params.activator.getBoundingClientRect();
-        let activatorHeight = params.activator.offsetHeight;
-        let menuHeight = params.menuElement.offsetHeight;
-        let menuWidth = params.menuElement.offsetWidth;
-        let { top: fixedParentTop, left: fixedParentLeft, fixedParent, validStickyParent } = getParentInstanceFromViewport(activator?.parentElement);
-        _top = activatorTop + activatorHeight / 2 - menuHeight / 2;
-        _left = activatorLeft - menuWidth - _activatorGap;
-        if (!!fixedParent) {
-          _top = _top - fixedParentTop;
-          _left = _left - fixedParentLeft;
-        } else if (!validStickyParent && !fixedParent) {
-          _top = _top + window.scrollY;
-          _left = _left + window.scrollX;
+
+        if (
+          anchor == 'right-center' &&
+          window.innerWidth + window.scrollX <
+          (_left || 0) + (menuElement?.offsetWidth || 0)
+        ) {
+          let { left: activatorLeft } = params.activator.getBoundingClientRect();
+          _left = activatorLeft + window.scrollX - _activatorGap - (menuElement?.offsetWidth || 0)
         }
-      } else if (anchor == "up") {
-        let { left: activatorLeft, top: activatorTop } = params.activator.getBoundingClientRect();
-        let menuHeight = params.menuElement.offsetHeight;
-        _top = activatorTop - menuHeight - _activatorGap;
-        _left = activatorLeft;
-        let { top: fixedParentTop, left: fixedParentLeft, fixedParent, validStickyParent } = getParentInstanceFromViewport(activator?.parentElement);
-        if (!!fixedParent) {
-          _top = _top - fixedParentTop;
-          _left = _left - fixedParentLeft;
-        } else if (!validStickyParent && !fixedParent) {
-          _top = _top + window.scrollY;
-          _left = _left + window.scrollX;
+        
+        if (
+          anchor == 'left-center' &&
+          (_left || 0) < 0
+        ) {
+          let { left: activatorLeft } = params.activator.getBoundingClientRect();
+          let activatorWidth = params.activator.offsetWidth;
+          _left = activatorLeft + window.scrollX + activatorWidth + _activatorGap
         }
-      } else if (anchor == "left") {
-        let { left: activatorLeft, top: activatorTop } = params.activator.getBoundingClientRect();
-        let menuWidth = params.menuElement.offsetWidth;
-        _top = activatorTop;
-        _left = activatorLeft - menuWidth - _activatorGap;
-        let { top: fixedParentTop, left: fixedParentLeft, fixedParent, validStickyParent } = getParentInstanceFromViewport(activator?.parentElement);
-        if (!!fixedParent) {
-          _top = _top - fixedParentTop;
-          _left = _left - fixedParentLeft;
-        } else if (!validStickyParent && !fixedParent) {
-          _top = _top + window.scrollY;
-          _left = _left + window.scrollX;
+
+        if (
+          anchor == 'left' &&
+          (_left || 0) < 0
+        ) {
+          let { left: activatorLeft } = params.activator.getBoundingClientRect();
+          let activatorWidth = params.activator.offsetWidth;
+          _left = activatorLeft + window.scrollX + activatorWidth + _activatorGap
         }
-      } else if (anchor == "right") {
-        let { left: activatorLeft, top: activatorTop } = params.activator.getBoundingClientRect();
-        let activatorWidth = params.activator.offsetWidth;
-        _top = activatorTop;
-        _left = activatorLeft + activatorWidth + _activatorGap;
-        let { top: fixedParentTop, left: fixedParentLeft, fixedParent, validStickyParent } = getParentInstanceFromViewport(activator?.parentElement);
-        if (!!fixedParent) {
-          _top = _top - fixedParentTop;
-          _left = _left - fixedParentLeft;
-        } else if (!validStickyParent && !fixedParent) {
-          _top = _top + window.scrollY;
-          _left = _left + window.scrollX;
+
+        if (
+          anchor == 'right' &&
+          window.innerWidth + window.scrollX <
+          (_left || 0) + (menuElement?.offsetWidth || 0)
+        ) {
+          let { left: activatorLeft } = params.activator.getBoundingClientRect();
+          let menuWidth = params.menuElement.offsetWidth;
+          _left = activatorLeft + window.scrollX - menuWidth - _activatorGap
         }
-      } else if (anchor == "up-center") {
-        let { left: activatorLeft, top: activatorTop } = params.activator.getBoundingClientRect();
-        let activatorWidth = params.activator.offsetWidth;
-        let menuHeight = params.menuElement.offsetHeight;
-        let menuWidth = params.menuElement.offsetWidth;
-        _top = activatorTop - menuHeight - _activatorGap;
-        _left = activatorLeft;
-        let { top: fixedParentTop, left: fixedParentLeft, fixedParent, validStickyParent } = getParentInstanceFromViewport(activator?.parentElement);
-        if (!!fixedParent) {
-          _top = _top - fixedParentTop;
-          _left = _left - fixedParentLeft;
-        } else if (!validStickyParent && !fixedParent) {
-          _top = _top + window.scrollY;
-          _left = _left + window.scrollX;
+
+        if (
+          anchor == 'up' &&
+          (_top || 0) < window.scrollY
+        ) {
+          let { top: activatorTop } = params.activator.getBoundingClientRect();
+          let activatorHeight = params.activator.offsetHeight;
+          _top = activatorTop + window.scrollY + activatorHeight + _activatorGap
         }
-        if (menuWidth > activatorWidth) {
-          _left = _left - (menuWidth - activatorWidth) / 2;
-        } else {
-          _left = _left + (activatorWidth - menuWidth) / 2;
+
+        if (
+          anchor == 'up-center' &&
+          (_top || 0) < window.scrollY
+        ) {
+          let { top: activatorTop } = params.activator.getBoundingClientRect();
+          let activatorHeight = params.activator.offsetHeight;
+          _top = activatorTop + window.scrollY + activatorHeight + _activatorGap
         }
       }
-    }
-    if (flipOnOverflow && !!params.activator) {
-      let { top: activatorTopDistance } = params.activator.getBoundingClientRect();
-      if (window.innerHeight < activatorTopDistance + (menuElement?.offsetHeight || 0) + (menuElement?.offsetHeight || 0) * 0.1) {
-        _top = getTopDistance(params.activator) - _activatorGap - (menuElement?.offsetHeight || 0);
-      }
-      if (anchor == "right-center" && window.innerWidth + window.scrollX < (_left || 0) + (menuElement?.offsetWidth || 0)) {
-        let { left: activatorLeft } = params.activator.getBoundingClientRect();
-        _left = activatorLeft + window.scrollX - _activatorGap - (menuElement?.offsetWidth || 0);
-      }
-      if (anchor == "left-center" && (_left || 0) < 0) {
-        let { left: activatorLeft } = params.activator.getBoundingClientRect();
-        let activatorWidth = params.activator.offsetWidth;
-        _left = activatorLeft + window.scrollX + activatorWidth + _activatorGap;
-      }
-      if (anchor == "left" && (_left || 0) < 0) {
-        let { left: activatorLeft } = params.activator.getBoundingClientRect();
-        let activatorWidth = params.activator.offsetWidth;
-        _left = activatorLeft + window.scrollX + activatorWidth + _activatorGap;
-      }
-      if (anchor == "right" && window.innerWidth + window.scrollX < (_left || 0) + (menuElement?.offsetWidth || 0)) {
-        let { left: activatorLeft } = params.activator.getBoundingClientRect();
-        let menuWidth = params.menuElement.offsetWidth;
-        _left = activatorLeft + window.scrollX - menuWidth - _activatorGap;
-      }
-      if (anchor == "up" && (_top || 0) < window.scrollY) {
-        let { top: activatorTop } = params.activator.getBoundingClientRect();
-        let activatorHeight = params.activator.offsetHeight;
-        _top = activatorTop + window.scrollY + activatorHeight + _activatorGap;
-      }
-      if (anchor == "up-center" && (_top || 0) < window.scrollY) {
-        let { top: activatorTop } = params.activator.getBoundingClientRect();
-        let activatorHeight = params.activator.offsetHeight;
-        _top = activatorTop + window.scrollY + activatorHeight + _activatorGap;
-      }
-    }
-    if (stayInViewport) {
-      if (window.innerWidth + window.scrollX < (_left || 0) + (menuElement?.offsetWidth || 0)) {
-        _left = Math.max(
-          window.innerWidth + window.scrollX - (menuElement?.offsetWidth || 0),
-          0
-        );
-      }
-      if ((_left || 0) < window.scrollX) {
-        _left = window.scrollX;
+
+      if(stayInViewport) {
+        if (
+          window.innerWidth + window.scrollX <
+          (_left || 0) + (menuElement?.offsetWidth || 0)
+        ) {
+          _left = Math.max(
+            window.innerWidth + window.scrollX - (menuElement?.offsetWidth || 0),
+            0
+          );
+        }
+
+        if ((_left || 0) < window.scrollX) {
+          _left = window.scrollX;
+        }
       }
-    }
-    if (!!positionedAncestor) {
-      let { left: positionedAncestorLeft, top: positionedAncestorTop } = positionedAncestor.getBoundingClientRect();
-      if (!_left)
-        _left = 0;
-      if (!_top)
-        _top = 0;
-      _left = _left - (positionedAncestorLeft + window.scrollX);
-      _top = _top - (positionedAncestorTop + window.scrollY);
-      if (!!activator) {
-        let { validStickyParent, fixedParent } = getParentInstanceFromViewport(activator?.parentElement);
-        if (!!validStickyParent || !!fixedParent) {
-          _left = _left + window.scrollX;
-          _top = _top + window.scrollY;
+
+      if(!!positionedAncestor) {
+        let { left: positionedAncestorLeft, top: positionedAncestorTop } = positionedAncestor.getBoundingClientRect();
+
+        if(!_left) _left = 0
+        if(!_top) _top = 0
+
+        _left = _left - (positionedAncestorLeft + window.scrollX)
+        _top = _top - (positionedAncestorTop + window.scrollY)
+
+        if(!!activator) {
+          let { validStickyParent, fixedParent } = getParentInstanceFromViewport(activator?.parentElement)
+          if(!!validStickyParent || !!fixedParent) {
+            _left = _left + window.scrollX
+            _top = _top + window.scrollY
+          }
         }
       }
     }
   }
-}
-function getTopDistance(elem) {
-  let positionedAncestor2 = getPositionedAncestor(elem);
-  if (!!positionedAncestor2) {
-    let top = parseInt(getComputedStyle(positionedAncestor2).top);
-    return (isNaN(top) ? 0 : top) + elem.offsetTop - calcScrollY(elem);
+
+  function getTopDistance(elem: HTMLElement): number {
+    let positionedAncestor = getPositionedAncestor(elem)
+    if(!!positionedAncestor) {
+      let top: number = parseInt(getComputedStyle(positionedAncestor).top)
+      return (isNaN(top) ? 0 : top) + elem.offsetTop - calcScrollY(elem)
+    }
+    return window.scrollY + elem.getBoundingClientRect().top
   }
-  return window.scrollY + elem.getBoundingClientRect().top;
-}
-function calcScrollY(elem) {
-  let parent = elem.parentElement;
-  let scroll = 0;
-  while (!!parent) {
-    scroll += parent.scrollTop;
-    let parentPosition = getComputedStyle(parent).position;
-    if (parentPosition === "absolute" || parentPosition === "fixed" || parentPosition === "relative")
-      break;
-    parent = parent.parentElement;
+
+  function calcScrollY(elem: HTMLElement): number {
+    let parent = elem.parentElement
+    let scroll = 0
+    while(!!parent) {
+      scroll += parent.scrollTop
+      let parentPosition = getComputedStyle(parent).position
+      if(parentPosition === 'absolute' || parentPosition === 'fixed' || parentPosition === 'relative') break
+      parent = parent.parentElement
+    }
+    return scroll
   }
-  return scroll;
-}
-$:
-  if (open) {
-    if (!!activator) {
-      let parent = activator.parentElement;
-      while (!!parent) {
-        let parentPosition = getComputedStyle(parent).position;
-        parent.addEventListener("scroll", refreshMenuPosition);
-        if (parentPosition == "absolute" || parentPosition == "fixed" || parentPosition === "relative")
-          break;
-        parent = parent.parentElement;
+
+
+  $: if (open) {
+    if(!!activator) {
+      let parent = activator.parentElement
+      while(!!parent) {
+        let parentPosition = getComputedStyle(parent).position
+        parent.addEventListener('scroll', refreshMenuPosition)
+        if(parentPosition == 'absolute' || parentPosition == 'fixed' || parentPosition === 'relative') break
+        parent = parent.parentElement
       }
     }
-    if (!!openingId) {
-      const controllers = document.querySelectorAll(`[data-operation="close"][data-opening-id="${openingId}"]`);
-      for (let k = 0; k < controllers.length; k += 1) {
-        if (controllers[k] !== closeController) {
-          const clickEvent = new MouseEvent("click", {
+
+    if(!!openingId) {
+      const controllers = document.querySelectorAll(`[data-operation="close"][data-opening-id="${openingId}"]`)
+      for(let k = 0; k < controllers.length; k += 1) {
+        if(controllers[k] !== closeController) {
+          const clickEvent = new MouseEvent('click', {
             bubbles: true,
             cancelable: true,
             view: window
-          });
-          controllers[k].dispatchEvent(clickEvent);
+          })
+
+          controllers[k].dispatchEvent(clickEvent)
         }
       }
     }
-    let otherMenus = document.querySelectorAll("[data-menu]");
-    let otherDialogs = document.querySelectorAll("[data-dialog]");
-    let maxZIndex = void 0;
+
+    let otherMenus: NodeListOf<HTMLElement> =
+      document.querySelectorAll("[data-menu]");
+    let otherDialogs: NodeListOf<HTMLElement> =
+      document.querySelectorAll("[data-dialog]");
+
+    let maxZIndex: number | undefined = undefined;
     if (otherDialogs.length > 0) {
       otherDialogs.forEach((dialog) => {
         if (!maxZIndex || maxZIndex < Number(dialog.style.zIndex))
           maxZIndex = Number(dialog.style.zIndex);
       });
     }
+
     if (otherMenus.length > 0) {
       otherMenus.forEach((menu) => {
         if (!maxZIndex || maxZIndex < Number(menu.style.zIndex))
           maxZIndex = Number(menu.style.zIndex);
       });
     }
+
     if (!!activator && !!menuElement)
       calculateMenuPosition({ activator, menuElement });
-    if (maxZIndex)
-      zIndex = maxZIndex + 2;
+
+    if (maxZIndex) zIndex = maxZIndex + 2;
   }
-$:
-  if (!!_width && !!activator && !!menuElement) {
+  $: if (!!_width && !!activator && !!menuElement) {
     setTimeout(() => {
-      if (!!activator && !!menuElement)
+      if(!!activator && !!menuElement)
         calculateMenuPosition({ activator, menuElement });
-    }, 1);
+    }, 1)
   }
-$:
-  if (refreshPosition && !!activator && !!menuElement) {
+  $: if (refreshPosition && !!activator && !!menuElement) {
     calculateMenuPosition({ activator, menuElement });
     refreshPosition = false;
   }
-$:
-  if (closeOnClickOutside && !!menuElement) {
+  $: if (closeOnClickOutside && !!menuElement) {
     window.addEventListener("mousedown", () => {
       open = false;
     });
+
     window.addEventListener("touchstart", () => {
       open = false;
     });
+
     if (activator) {
       activator.addEventListener("mousedown", (event) => {
         event.stopPropagation();
       });
+
       activator.addEventListener("touchstart", (event) => {
         event.stopPropagation();
       });
     }
+
     menuElement.addEventListener("mousedown", (event) => {
       event.stopPropagation();
     });
+
     menuElement.addEventListener("touchstart", (event) => {
       event.stopPropagation();
     });
   }
-let positionedAncestor = void 0;
-$:
-  if (!!menuElement && !!activator) {
-    let elem = getPositionedAncestor(menuElement.parentElement);
-    positionedAncestor = elem == null ? void 0 : elem;
-    calculateMenuPosition({ menuElement, activator });
+
+
+  let positionedAncestor: HTMLElement | undefined = undefined
+
+  $: if(!!menuElement && !!activator) {
+    let elem = getPositionedAncestor(menuElement.parentElement)
+    positionedAncestor = elem == null ? undefined : elem
+    calculateMenuPosition({menuElement, activator})
   }
-function getPositionedAncestor(elem) {
-  if (!elem)
-    return null;
-  if (["fixed", "absolute", "sticky", "relative"].includes(getComputedStyle(elem).position))
-    return elem;
-  return getPositionedAncestor(elem.parentElement);
-}
-function handleCloseControllerClick() {
-  open = false;
-}
-function getParentInstanceFromViewport(activatorParent) {
-  let top = 0;
-  let left = 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)
-      break;
-    const computedStyle = getComputedStyle(currentParent);
-    const position = computedStyle.position;
-    const display = computedStyle.display;
-    if ((position === "fixed" || position === "absolute" || position === "relative") && display === "flex") {
-      const boundingClientRect = activatorParent.getBoundingClientRect();
-      top = top + boundingClientRect.top;
-      left = left + boundingClientRect.left;
-      fixedParent = activatorParent;
-    }
-    if (position === "sticky") {
-      stickyParent = activatorParent;
-    }
-    if (position === "relative" && !!stickyParent) {
-      isStickyValid = true;
-    }
-    activatorParent = activatorParent.parentElement;
+
+  function getPositionedAncestor(elem: HTMLElement | null): HTMLElement | null {
+    if (!elem) return null
+    if (['fixed', 'absolute', 'sticky', 'relative'].includes(getComputedStyle(elem).position)) return elem
+    return getPositionedAncestor(elem.parentElement)
+  }
+
+  function handleCloseControllerClick() {
+    open = false
   }
-  return { top, left, fixedParent, validStickyParent: isStickyValid ? stickyParent : void 0 };
-}
-function refreshMenuPosition() {
-  if (open && !!menuElement && !!activator)
-    calculateMenuPosition({ menuElement, activator });
-}
-function handleMenuClick(e, zIndex2) {
-  let otherMenus = document.querySelectorAll(`[data-menu]`);
-  otherMenus.forEach((m) => {
-    let uid = m.getAttribute("data-uid");
-    if (uid !== currentUid && Number(m.style.zIndex) > zIndex2) {
-      let controller = document.querySelector(`[data-operation="close"][data-uid="${uid}"]`);
-      if (!!controller) {
-        const clickEvent = new MouseEvent("click", {
-          bubbles: false,
-          cancelable: true,
-          view: window
-        });
-        controller.dispatchEvent(clickEvent);
+
+  function getParentInstanceFromViewport(activatorParent: HTMLElement | undefined | null): {
+    top: number
+    left: number
+    fixedParent?: HTMLElement,
+    validStickyParent?: HTMLElement
+  } {
+    let top = 0
+    let left = 0
+    let fixedParent: HTMLElement | undefined = undefined
+    let stickyParent: HTMLElement | undefined = !!activatorParent && getComputedStyle(activatorParent).position === 'sticky' ? activatorParent : undefined
+    let isStickyValid: boolean = false
+
+    while(!!activatorParent && activatorParent.nodeName.toLowerCase() !== 'html' && activatorParent.nodeName.toLowerCase() !== 'body') {
+      const currentParent = activatorParent.parentElement
+      if(!currentParent) break
+
+      const computedStyle = getComputedStyle(currentParent)
+      const position = computedStyle.position;
+      const display = computedStyle.display;
+
+      if((position === 'fixed' || position === 'absolute' || position === 'relative') && display === "flex") {
+        const boundingClientRect = activatorParent.getBoundingClientRect();
+        top = top + boundingClientRect.top
+        left = left + boundingClientRect.left
+        fixedParent = activatorParent
+      }
+
+      if(position === 'sticky') {
+        stickyParent = activatorParent
+      }
+
+      if(position === 'relative' && !!stickyParent) {
+        isStickyValid = true
       }
+
+      activatorParent = activatorParent.parentElement
+
     }
-  });
-}
-$:
-  if ($sidebarOpened !== void 0)
-    setTimeout(refreshMenuPosition, 300);
+    return { top, left, fixedParent, validStickyParent: isStickyValid ? stickyParent : undefined }
+  }
+
+  function refreshMenuPosition() {
+    if(open && !!menuElement && !!activator) calculateMenuPosition({ menuElement, activator })
+  }
+
+  function handleMenuClick(e: MouseEvent, zIndex: number) {
+    let otherMenus: NodeListOf<HTMLElement> = document.querySelectorAll(`[data-menu]`)
+    otherMenus.forEach(m => {
+      let uid = m.getAttribute('data-uid')
+      if(uid !== currentUid && Number(m.style.zIndex) > zIndex) {
+        let controller = document.querySelector(`[data-operation="close"][data-uid="${uid}"]`)
+        if(!!controller) {
+          const clickEvent = new MouseEvent('click', {
+              bubbles: false,
+              cancelable: true,
+              view: window
+            })
+          controller.dispatchEvent(clickEvent)
+        }
+      }
+    })
+  }
+
+  // TODO find a better way to update menu positions with animations
+  $: if($sidebarOpened !== undefined) setTimeout(refreshMenuPosition, 300)
 </script>
 
 <svelte:window on:scroll={refreshMenuPosition} on:resize={refreshMenuPosition} ></svelte:window>