@ultraviolet/ui 3.9.0 → 3.10.0

package/dist/components/Popup/helpers.js

@@ -1,293 +1,278 @@
-const PLACEMENTS = ["top", "right", "bottom", "left", "nested-menu"];
+import { __name } from "../../_virtual/_rolldown/runtime.js";
+
+//#region src/components/Popup/helpers.ts
+const PLACEMENTS = [
+	"top",
+	"right",
+	"bottom",
+	"left",
+	"nested-menu"
+];
 const isGenericPlacement = (placement) => PLACEMENTS.includes(placement);
 const DEFAULT_ARROW_WIDTH = 8;
 const SPACE = 4;
 const TOTAL_USED_SPACE = 0;
 const DEFAULT_POSITIONS = {
-  arrowLeft: 0,
-  arrowTop: 0,
-  arrowTransform: "translate(-50%, -50)",
-  placement: "top",
-  popupInitialPosition: "translate3d(0px, 0px, 0)",
-  popupPosition: "translate3d(0px, 0px, 0)",
-  rotate: 135
+	arrowLeft: 0,
+	arrowTop: 0,
+	arrowTransform: "translate(-50%, -50)",
+	placement: "top",
+	popupInitialPosition: "translate3d(0px, 0px, 0)",
+	popupPosition: "translate3d(0px, 0px, 0)",
+	rotate: 135
 };
 const getOrderOfPlacement = (autoPlacement) => {
-  if (autoPlacement === "auto-bottom") {
-    return ["bottom", "top", "left", "right"];
-  }
-  if (autoPlacement === "auto-left") {
-    return ["left", "right", "top", "bottom"];
-  }
-  if (autoPlacement === "auto-right") {
-    return ["right", "left", "top", "bottom"];
-  }
-  return ["top", "bottom", "left", "right"];
+	if (autoPlacement === "auto-bottom") return [
+		"bottom",
+		"top",
+		"left",
+		"right"
+	];
+	if (autoPlacement === "auto-left") return [
+		"left",
+		"right",
+		"top",
+		"bottom"
+	];
+	if (autoPlacement === "auto-right") return [
+		"right",
+		"left",
+		"top",
+		"bottom"
+	];
+	return [
+		"top",
+		"bottom",
+		"left",
+		"right"
+	];
 };
-const computePlacement = ({
-  childrenStructuredRef,
-  popupStructuredRef,
-  offsetParentRect,
-  offsetParent,
-  popupPortalTarget,
-  isNestedMenu,
-  autoPlacement
-}) => {
-  const {
-    top: childrenTop,
-    left: childrenLeft,
-    right: childrenRight,
-    width: childrenWidth
-  } = childrenStructuredRef;
-  const orderOfPlacement = getOrderOfPlacement(autoPlacement ?? "auto");
-  const { top: parentTop, left: parentLeft } = offsetParentRect;
-  const isPopupPortalTargetBody = popupPortalTarget === document.body || offsetParent === document.body;
-  const overloadedChildrenLeft = isPopupPortalTargetBody ? childrenLeft : childrenLeft - parentLeft;
-  const overloadedChildrenTop = isPopupPortalTargetBody ? childrenTop : childrenTop - parentTop;
-  const overloadedChildrenRight = isPopupPortalTargetBody ? childrenRight : childrenLeft - parentLeft + childrenWidth;
-  const { width: popupWidth, height: popupHeight } = popupStructuredRef;
-  if (isNestedMenu) {
-    if (overloadedChildrenRight + popupWidth + TOTAL_USED_SPACE > window.innerWidth) {
-      return "left";
-    }
-    return "right";
-  }
-  const conditionsOfPlacement = {
-    bottom: window.innerHeight - overloadedChildrenTop - TOTAL_USED_SPACE >= popupHeight,
-    left: overloadedChildrenLeft - TOTAL_USED_SPACE >= popupWidth,
-    right: window.innerWidth - overloadedChildrenLeft - TOTAL_USED_SPACE >= popupWidth,
-    top: overloadedChildrenTop - popupHeight - TOTAL_USED_SPACE >= 0
-  };
-  if (conditionsOfPlacement[orderOfPlacement[0]]) {
-    return orderOfPlacement[0];
-  }
-  if (conditionsOfPlacement[orderOfPlacement[1]]) {
-    return orderOfPlacement[1];
-  }
-  if (conditionsOfPlacement[orderOfPlacement[2]]) {
-    return orderOfPlacement[2];
-  }
-  return orderOfPlacement[3];
+/**
+* This function will find the best placement in a window for popup based on children position and popup size
+*/
+const computePlacement = ({ childrenStructuredRef, popupStructuredRef, offsetParentRect, offsetParent, popupPortalTarget, isNestedMenu, autoPlacement }) => {
+	const { top: childrenTop, left: childrenLeft, right: childrenRight, width: childrenWidth } = childrenStructuredRef;
+	const orderOfPlacement = getOrderOfPlacement(autoPlacement !== null && autoPlacement !== void 0 ? autoPlacement : "auto");
+	const { top: parentTop, left: parentLeft } = offsetParentRect;
+	const isPopupPortalTargetBody = popupPortalTarget === document.body || offsetParent === document.body;
+	const overloadedChildrenLeft = isPopupPortalTargetBody ? childrenLeft : childrenLeft - parentLeft;
+	const overloadedChildrenTop = isPopupPortalTargetBody ? childrenTop : childrenTop - parentTop;
+	const overloadedChildrenRight = isPopupPortalTargetBody ? childrenRight : childrenLeft - parentLeft + childrenWidth;
+	const { width: popupWidth, height: popupHeight } = popupStructuredRef;
+	if (isNestedMenu) {
+		if (overloadedChildrenRight + popupWidth + TOTAL_USED_SPACE > window.innerWidth) return "left";
+		return "right";
+	}
+	const conditionsOfPlacement = {
+		bottom: window.innerHeight - overloadedChildrenTop - TOTAL_USED_SPACE >= popupHeight,
+		left: overloadedChildrenLeft - TOTAL_USED_SPACE >= popupWidth,
+		right: window.innerWidth - overloadedChildrenLeft - TOTAL_USED_SPACE >= popupWidth,
+		top: overloadedChildrenTop - popupHeight - TOTAL_USED_SPACE >= 0
+	};
+	if (conditionsOfPlacement[orderOfPlacement[0]]) return orderOfPlacement[0];
+	if (conditionsOfPlacement[orderOfPlacement[1]]) return orderOfPlacement[1];
+	if (conditionsOfPlacement[orderOfPlacement[2]]) return orderOfPlacement[2];
+	return orderOfPlacement[3];
 };
+/**
+* This function will check if the offset parent is usable for popup positioning
+* If not it will loop and search for a compatible parent until document.body is reached
+*/
 const findOffsetParent = (element) => {
-  const offsetParent = element?.current?.offsetParent;
-  if (offsetParent && !["TH", "TD", "TABLE"].includes(offsetParent.tagName)) {
-    return offsetParent;
-  }
-  let currentElement = element?.current;
-  while (currentElement && currentElement.tagName !== "BODY") {
-    const { position } = window.getComputedStyle(currentElement);
-    if (position !== "static") {
-      return currentElement;
-    }
-    currentElement = currentElement.parentElement;
-  }
-  return document.body;
+	var _element$current;
+	const offsetParent = element === null || element === void 0 || (_element$current = element.current) === null || _element$current === void 0 ? void 0 : _element$current.offsetParent;
+	if (offsetParent && ![
+		"TH",
+		"TD",
+		"TABLE"
+	].includes(offsetParent.tagName)) return offsetParent;
+	let currentElement = element === null || element === void 0 ? void 0 : element.current;
+	while (currentElement && currentElement.tagName !== "BODY") {
+		const { position } = window.getComputedStyle(currentElement);
+		if (position !== "static") return currentElement;
+		currentElement = currentElement.parentElement;
+	}
+	return document.body;
 };
+/**
+* This function will check if there is an overflow of the popup compared to the parent it is set in.
+* Depending on the position, for top and bottom the overflow will be on X axis and for left and right
+* the overflow will be Y axis. The function return the number of pixels the popup is overflowing
+* and that needs to be reajusted.
+* @param position the position of the popup
+* @param offsetParentRect the rect of the parent element where the children is located in
+* @param childrenRect the rect of the children element, the children element is the one that will trigger the popup
+* @param popupStructuredRef the rect of the popup, the popup itself
+*/
 const getPopupOverflowFromParent = (position, offsetParentRect, childrenRect, popupStructuredRef, arrowWidth) => {
-  const {
-    top: parentTop,
-    left: parentLeft,
-    right: parentRight
-  } = offsetParentRect;
-  const {
-    top: childrenTop,
-    bottom: childrenBottom,
-    left: childrenLeft,
-    right: childrenRight,
-    width: childrenWidth
-  } = childrenRect;
-  const { width: popupWidth, height: popupHeight } = popupStructuredRef;
-  const popupHalfWidthWithArrow = popupWidth / 2 - arrowWidth - 1;
-  const popupHalfHeightWithArrow = popupHeight / 2 - arrowWidth - 1;
-  if (position === "top" || position === "bottom") {
-    const popupOverflowRight = childrenRight - childrenWidth / 2 + popupWidth / 2;
-    const popupOverflowLeft = childrenLeft + childrenWidth / 2 - parentLeft - popupWidth / 2;
-    if (popupOverflowRight > parentRight) {
-      if (Math.abs(popupOverflowRight - parentRight) > popupHalfWidthWithArrow) {
-        return -popupHalfWidthWithArrow;
-      }
-      return parentRight - popupOverflowRight;
-    }
-    if (popupOverflowLeft < 0) {
-      if (Math.abs(popupOverflowLeft) > popupHalfWidthWithArrow) {
-        return popupHalfWidthWithArrow;
-      }
-      return Math.abs(popupOverflowLeft);
-    }
-  }
-  if (position === "left" || position === "right") {
-    const popupOverflowTop = childrenTop - parentTop - popupHeight / 2;
-    if (popupOverflowTop < 0) {
-      if (Math.abs(childrenTop - parentTop - popupHalfHeightWithArrow) > popupHalfHeightWithArrow) {
-        return popupHalfHeightWithArrow;
-      }
-      return Math.abs(popupOverflowTop);
-    }
-    if (childrenBottom + popupHeight > window.innerHeight) {
-      return -popupHalfHeightWithArrow;
-    }
-  }
-  return 0;
+	const { top: parentTop, left: parentLeft, right: parentRight } = offsetParentRect;
+	const { top: childrenTop, bottom: childrenBottom, left: childrenLeft, right: childrenRight, width: childrenWidth } = childrenRect;
+	const { width: popupWidth, height: popupHeight } = popupStructuredRef;
+	const popupHalfWidthWithArrow = popupWidth / 2 - arrowWidth - 1;
+	const popupHalfHeightWithArrow = popupHeight / 2 - arrowWidth - 1;
+	if (position === "top" || position === "bottom") {
+		const popupOverflowRight = childrenRight - childrenWidth / 2 + popupWidth / 2;
+		const popupOverflowLeft = childrenLeft + childrenWidth / 2 - parentLeft - popupWidth / 2;
+		if (popupOverflowRight > parentRight) {
+			if (Math.abs(popupOverflowRight - parentRight) > popupHalfWidthWithArrow) return -popupHalfWidthWithArrow;
+			return parentRight - popupOverflowRight;
+		}
+		if (popupOverflowLeft < 0) {
+			if (Math.abs(popupOverflowLeft) > popupHalfWidthWithArrow) return popupHalfWidthWithArrow;
+			return Math.abs(popupOverflowLeft);
+		}
+	}
+	if (position === "left" || position === "right") {
+		const popupOverflowTop = childrenTop - parentTop - popupHeight / 2;
+		if (popupOverflowTop < 0) {
+			if (Math.abs(childrenTop - parentTop - popupHalfHeightWithArrow) > popupHalfHeightWithArrow) return popupHalfHeightWithArrow;
+			return Math.abs(popupOverflowTop);
+		}
+		if (childrenBottom + popupHeight > window.innerHeight) return -popupHalfHeightWithArrow;
+	}
+	return 0;
 };
-const computePositions = ({
-  placement,
-  childrenRef,
-  popupRef,
-  popupPortalTarget,
-  hasArrow,
-  align
-}) => {
-  const arrowWidth = hasArrow ? DEFAULT_ARROW_WIDTH : 0;
-  const childrenRect = childrenRef.current.getBoundingClientRect();
-  const offsetParent = findOffsetParent(
-    childrenRef
-  );
-  const offsetParentRect = offsetParent?.getBoundingClientRect() ?? {
-    left: 0,
-    right: window?.innerWidth ?? 0,
-    top: 0
-  };
-  const popupStructuredRef = popupRef.current.getBoundingClientRect();
-  const placementBasedOnWindowSize = isGenericPlacement(placement) ? placement : computePlacement({
-    autoPlacement: placement,
-    childrenStructuredRef: childrenRect,
-    offsetParent,
-    offsetParentRect,
-    popupPortalTarget,
-    popupStructuredRef
-  });
-  const {
-    top: childrenTop,
-    left: childrenLeft,
-    right: childrenRight,
-    width: childrenWidth,
-    height: childrenHeight
-  } = childrenRect;
-  const { top: parentTop, left: parentLeft } = offsetParentRect;
-  const { width: popupWidth, height: popupHeight } = popupStructuredRef;
-  const isPopupPortalTargetBody = popupPortalTarget === document.body || offsetParent === document.body;
-  const scrollTopValue = isPopupPortalTargetBody ? document.documentElement.scrollTop : offsetParent.scrollTop;
-  const overloadedChildrenLeft = isPopupPortalTargetBody ? childrenLeft : childrenLeft - parentLeft;
-  const overloadedChildrenTop = isPopupPortalTargetBody ? childrenTop : childrenTop - parentTop;
-  const overloadedChildrenRight = isPopupPortalTargetBody ? childrenRight : childrenLeft - parentLeft + childrenWidth;
-  const popupOverflow = getPopupOverflowFromParent(
-    placementBasedOnWindowSize,
-    offsetParentRect,
-    childrenRect,
-    popupStructuredRef,
-    arrowWidth
-  );
-  const isAligned = align === "start";
-  switch (placementBasedOnWindowSize) {
-    case "bottom": {
-      const positionX = isAligned ? overloadedChildrenLeft : overloadedChildrenLeft + childrenWidth / 2 - popupWidth / 2;
-      const positionY = overloadedChildrenTop + scrollTopValue + childrenHeight + arrowWidth + SPACE;
-      const computedPositionX = isAligned ? positionX : positionX + popupOverflow;
-      const finalPositionX = isPopupPortalTargetBody ? Math.max(computedPositionX, 0) : computedPositionX;
-      return {
-        arrowLeft: isAligned ? childrenWidth / 2 - arrowWidth : popupWidth / 2 + popupOverflow * -1,
-        arrowTop: `${-arrowWidth - 5}px`,
-        arrowTransform: "",
-        placement: "bottom",
-        popupInitialPosition: `translate3d(${finalPositionX}px, ${positionY - TOTAL_USED_SPACE}px, 0)`,
-        popupPosition: `translate3d(${finalPositionX}px, ${positionY}px, 0)`,
-        rotate: 180
-      };
-    }
-    case "left": {
-      const positionX = overloadedChildrenLeft - popupWidth - arrowWidth - SPACE * 2;
-      const positionY = isAligned ? overloadedChildrenTop + scrollTopValue : overloadedChildrenTop + scrollTopValue - popupHeight / 2 + childrenHeight / 2;
-      return {
-        arrowLeft: popupWidth + arrowWidth + 5,
-        arrowTop: "50%",
-        arrowTransform: "translate(-50%, -50%)",
-        placement: "left",
-        popupInitialPosition: `translate3d(${positionX + TOTAL_USED_SPACE}px, ${positionY + popupOverflow}px, 0)`,
-        popupPosition: `translate3d(${positionX}px, ${positionY + popupOverflow}px, 0)`,
-        rotate: -90
-      };
-    }
-    case "right": {
-      const positionX = overloadedChildrenRight + arrowWidth + SPACE * 2;
-      const positionY = isAligned ? overloadedChildrenTop + scrollTopValue : overloadedChildrenTop + scrollTopValue - popupHeight / 2 + childrenHeight / 2;
-      return {
-        arrowLeft: -arrowWidth - 5,
-        arrowTop: "50%",
-        arrowTransform: "translate(50%, -50%)",
-        placement: "right",
-        popupInitialPosition: `translate3d(${positionX - TOTAL_USED_SPACE}px, ${positionY + popupOverflow}px, 0)`,
-        popupPosition: `translate3d(${positionX}px, ${positionY + popupOverflow}px, 0)`,
-        rotate: 90
-      };
-    }
-    case "nested-menu": {
-      if (computePlacement({
-        childrenStructuredRef: childrenRect,
-        isNestedMenu: true,
-        offsetParent,
-        offsetParentRect,
-        popupPortalTarget,
-        popupStructuredRef
-      }) === "right") {
-        const positionX2 = overloadedChildrenRight + arrowWidth + SPACE * 2;
-        const positionY2 = isAligned ? overloadedChildrenTop + scrollTopValue : overloadedChildrenTop + scrollTopValue - popupHeight / 8;
-        return {
-          arrowLeft: -arrowWidth - 5,
-          arrowTop: "50%",
-          arrowTransform: "translate(50%, -50%)",
-          placement: "right",
-          popupInitialPosition: `translate3d(${positionX2 - TOTAL_USED_SPACE}px, ${positionY2 + popupOverflow}px, 0)`,
-          popupPosition: `translate3d(${positionX2}px, ${positionY2 + popupOverflow}px, 0)`,
-          rotate: 90
-        };
-      }
-      const positionX = overloadedChildrenLeft - popupWidth - arrowWidth - SPACE * 2;
-      const positionY = isAligned ? overloadedChildrenTop + scrollTopValue : overloadedChildrenTop + scrollTopValue - popupHeight / 2 + childrenHeight / 2;
-      return {
-        arrowLeft: popupWidth + arrowWidth + 5,
-        arrowTop: "50%",
-        arrowTransform: "translate(-50%, -50%)",
-        placement: "left",
-        popupInitialPosition: `translate3d(${positionX + TOTAL_USED_SPACE}px, ${positionY + popupOverflow}px, 0)`,
-        popupPosition: `translate3d(${positionX}px, ${positionY + popupOverflow}px, 0)`,
-        rotate: -90
-      };
-    }
-    case "top": {
-      const positionX = isAligned ? overloadedChildrenLeft : overloadedChildrenLeft + childrenWidth / 2 - popupWidth / 2;
-      const positionY = overloadedChildrenTop + scrollTopValue - popupHeight - arrowWidth - SPACE;
-      const computedPositionX = isAligned ? positionX : positionX + popupOverflow;
-      const finalPositionX = isPopupPortalTargetBody ? Math.max(computedPositionX, 0) : computedPositionX;
-      return {
-        arrowLeft: isAligned ? childrenWidth / 2 - arrowWidth : popupWidth / 2 + popupOverflow * -1,
-        arrowTop: `${popupHeight - 1}px`,
-        arrowTransform: "",
-        placement: "top",
-        popupInitialPosition: `translate3d(${finalPositionX}px, ${positionY + TOTAL_USED_SPACE}px, 0)`,
-        popupPosition: `translate3d(${finalPositionX}px, ${positionY}px, 0)`,
-        rotate: 0
-      };
-    }
-    default: {
-      const positionX = isAligned ? overloadedChildrenLeft : overloadedChildrenLeft + childrenWidth / 2 - popupWidth / 2;
-      const positionY = overloadedChildrenTop + scrollTopValue - popupHeight - arrowWidth - SPACE;
-      const computedPositionX = isAligned ? positionX : positionX + popupOverflow;
-      const finalPositionX = isPopupPortalTargetBody ? Math.max(computedPositionX, 0) : computedPositionX;
-      return {
-        arrowLeft: isAligned ? childrenWidth / 2 - arrowWidth : popupWidth / 2 + popupOverflow * -1,
-        arrowTop: `${popupHeight - 1}px`,
-        arrowTransform: "",
-        placement: "top",
-        popupInitialPosition: `translate3d(${finalPositionX}px, ${positionY + TOTAL_USED_SPACE}px, 0)`,
-        popupPosition: `translate3d(${finalPositionX}px, ${positionY}px, 0)`,
-        rotate: 0
-      };
-    }
-  }
-};
-export {
-  DEFAULT_ARROW_WIDTH,
-  DEFAULT_POSITIONS,
-  computePositions
+/**
+* This function will compute the positions of popup and arrow based on children position and popup size
+*/
+const computePositions = ({ placement, childrenRef, popupRef, popupPortalTarget, hasArrow, align }) => {
+	var _offsetParent$getBoun;
+	var _window$innerWidth;
+	var _window;
+	const arrowWidth = hasArrow ? 8 : 0;
+	const childrenRect = childrenRef.current.getBoundingClientRect();
+	const offsetParent = findOffsetParent(childrenRef);
+	const offsetParentRect = (_offsetParent$getBoun = offsetParent === null || offsetParent === void 0 ? void 0 : offsetParent.getBoundingClientRect()) !== null && _offsetParent$getBoun !== void 0 ? _offsetParent$getBoun : {
+		left: 0,
+		right: (_window$innerWidth = (_window = window) === null || _window === void 0 ? void 0 : _window.innerWidth) !== null && _window$innerWidth !== void 0 ? _window$innerWidth : 0,
+		top: 0
+	};
+	const popupStructuredRef = popupRef.current.getBoundingClientRect();
+	const placementBasedOnWindowSize = isGenericPlacement(placement) ? placement : computePlacement({
+		autoPlacement: placement,
+		childrenStructuredRef: childrenRect,
+		offsetParent,
+		offsetParentRect,
+		popupPortalTarget,
+		popupStructuredRef
+	});
+	const { top: childrenTop, left: childrenLeft, right: childrenRight, width: childrenWidth, height: childrenHeight } = childrenRect;
+	const { top: parentTop, left: parentLeft } = offsetParentRect;
+	const { width: popupWidth, height: popupHeight } = popupStructuredRef;
+	const isPopupPortalTargetBody = popupPortalTarget === document.body || offsetParent === document.body;
+	const scrollTopValue = isPopupPortalTargetBody ? document.documentElement.scrollTop : offsetParent.scrollTop;
+	const overloadedChildrenLeft = isPopupPortalTargetBody ? childrenLeft : childrenLeft - parentLeft;
+	const overloadedChildrenTop = isPopupPortalTargetBody ? childrenTop : childrenTop - parentTop;
+	const overloadedChildrenRight = isPopupPortalTargetBody ? childrenRight : childrenLeft - parentLeft + childrenWidth;
+	const popupOverflow = getPopupOverflowFromParent(placementBasedOnWindowSize, offsetParentRect, childrenRect, popupStructuredRef, arrowWidth);
+	const isAligned = align === "start";
+	switch (placementBasedOnWindowSize) {
+		case "bottom": {
+			const positionX = isAligned ? overloadedChildrenLeft : overloadedChildrenLeft + childrenWidth / 2 - popupWidth / 2;
+			const positionY = overloadedChildrenTop + scrollTopValue + childrenHeight + arrowWidth + SPACE;
+			const computedPositionX = isAligned ? positionX : positionX + popupOverflow;
+			const finalPositionX = isPopupPortalTargetBody ? Math.max(computedPositionX, 0) : computedPositionX;
+			return {
+				arrowLeft: isAligned ? childrenWidth / 2 - arrowWidth : popupWidth / 2 + popupOverflow * -1,
+				arrowTop: `${-arrowWidth - 5}px`,
+				arrowTransform: "",
+				placement: "bottom",
+				popupInitialPosition: `translate3d(${finalPositionX}px, ${positionY - TOTAL_USED_SPACE}px, 0)`,
+				popupPosition: `translate3d(${finalPositionX}px, ${positionY}px, 0)`,
+				rotate: 180
+			};
+		}
+		case "left": {
+			const positionX = overloadedChildrenLeft - popupWidth - arrowWidth - SPACE * 2;
+			const positionY = isAligned ? overloadedChildrenTop + scrollTopValue : overloadedChildrenTop + scrollTopValue - popupHeight / 2 + childrenHeight / 2;
+			return {
+				arrowLeft: popupWidth + arrowWidth + 5,
+				arrowTop: "50%",
+				arrowTransform: "translate(-50%, -50%)",
+				placement: "left",
+				popupInitialPosition: `translate3d(${positionX + TOTAL_USED_SPACE}px, ${positionY + popupOverflow}px, 0)`,
+				popupPosition: `translate3d(${positionX}px, ${positionY + popupOverflow}px, 0)`,
+				rotate: -90
+			};
+		}
+		case "right": {
+			const positionX = overloadedChildrenRight + arrowWidth + SPACE * 2;
+			const positionY = isAligned ? overloadedChildrenTop + scrollTopValue : overloadedChildrenTop + scrollTopValue - popupHeight / 2 + childrenHeight / 2;
+			return {
+				arrowLeft: -arrowWidth - 5,
+				arrowTop: "50%",
+				arrowTransform: "translate(50%, -50%)",
+				placement: "right",
+				popupInitialPosition: `translate3d(${positionX - TOTAL_USED_SPACE}px, ${positionY + popupOverflow}px, 0)`,
+				popupPosition: `translate3d(${positionX}px, ${positionY + popupOverflow}px, 0)`,
+				rotate: 90
+			};
+		}
+		case "nested-menu": {
+			if (computePlacement({
+				childrenStructuredRef: childrenRect,
+				isNestedMenu: true,
+				offsetParent,
+				offsetParentRect,
+				popupPortalTarget,
+				popupStructuredRef
+			}) === "right") {
+				const positionX = overloadedChildrenRight + arrowWidth + SPACE * 2;
+				const positionY = isAligned ? overloadedChildrenTop + scrollTopValue : overloadedChildrenTop + scrollTopValue - popupHeight / 8;
+				return {
+					arrowLeft: -arrowWidth - 5,
+					arrowTop: "50%",
+					arrowTransform: "translate(50%, -50%)",
+					placement: "right",
+					popupInitialPosition: `translate3d(${positionX - TOTAL_USED_SPACE}px, ${positionY + popupOverflow}px, 0)`,
+					popupPosition: `translate3d(${positionX}px, ${positionY + popupOverflow}px, 0)`,
+					rotate: 90
+				};
+			}
+			const positionX = overloadedChildrenLeft - popupWidth - arrowWidth - SPACE * 2;
+			const positionY = isAligned ? overloadedChildrenTop + scrollTopValue : overloadedChildrenTop + scrollTopValue - popupHeight / 2 + childrenHeight / 2;
+			return {
+				arrowLeft: popupWidth + arrowWidth + 5,
+				arrowTop: "50%",
+				arrowTransform: "translate(-50%, -50%)",
+				placement: "left",
+				popupInitialPosition: `translate3d(${positionX + TOTAL_USED_SPACE}px, ${positionY + popupOverflow}px, 0)`,
+				popupPosition: `translate3d(${positionX}px, ${positionY + popupOverflow}px, 0)`,
+				rotate: -90
+			};
+		}
+		case "top": {
+			const positionX = isAligned ? overloadedChildrenLeft : overloadedChildrenLeft + childrenWidth / 2 - popupWidth / 2;
+			const positionY = overloadedChildrenTop + scrollTopValue - popupHeight - arrowWidth - SPACE;
+			const computedPositionX = isAligned ? positionX : positionX + popupOverflow;
+			const finalPositionX = isPopupPortalTargetBody ? Math.max(computedPositionX, 0) : computedPositionX;
+			return {
+				arrowLeft: isAligned ? childrenWidth / 2 - arrowWidth : popupWidth / 2 + popupOverflow * -1,
+				arrowTop: `${popupHeight - 1}px`,
+				arrowTransform: "",
+				placement: "top",
+				popupInitialPosition: `translate3d(${finalPositionX}px, ${positionY + TOTAL_USED_SPACE}px, 0)`,
+				popupPosition: `translate3d(${finalPositionX}px, ${positionY}px, 0)`,
+				rotate: 0
+			};
+		}
+		default: {
+			const positionX = isAligned ? overloadedChildrenLeft : overloadedChildrenLeft + childrenWidth / 2 - popupWidth / 2;
+			const positionY = overloadedChildrenTop + scrollTopValue - popupHeight - arrowWidth - SPACE;
+			const computedPositionX = isAligned ? positionX : positionX + popupOverflow;
+			const finalPositionX = isPopupPortalTargetBody ? Math.max(computedPositionX, 0) : computedPositionX;
+			return {
+				arrowLeft: isAligned ? childrenWidth / 2 - arrowWidth : popupWidth / 2 + popupOverflow * -1,
+				arrowTop: `${popupHeight - 1}px`,
+				arrowTransform: "",
+				placement: "top",
+				popupInitialPosition: `translate3d(${finalPositionX}px, ${positionY + TOTAL_USED_SPACE}px, 0)`,
+				popupPosition: `translate3d(${finalPositionX}px, ${positionY}px, 0)`,
+				rotate: 0
+			};
+		}
+	}
 };
+
+//#endregion
+export { DEFAULT_POSITIONS, computePositions };