@ultraviolet/ui 3.11.1 → 3.12.0

package/dist/components/Popup/helpers.js

@@ -1,224 +1,185 @@
-import { __name } from "../../_virtual/_rolldown/runtime.js";
+import { __esmMin, __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
-};
-const getOrderOfPlacement = (autoPlacement) => {
-	if (autoPlacement === "auto-bottom") return [
-		"bottom",
+var PLACEMENTS, isGenericPlacement, DEFAULT_ARROW_WIDTH, SPACE, TOTAL_USED_SPACE, DEFAULT_POSITIONS, getOrderOfPlacement, computePlacement, findOffsetParent, getPopupOverflowFromParent, computePositions;
+var init_helpers = __esmMin(() => {
+	PLACEMENTS = [
 		"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"
+		"nested-menu"
 	];
-};
-/**
-* 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
+	isGenericPlacement = (placement) => PLACEMENTS.includes(placement);
+	DEFAULT_ARROW_WIDTH = 8;
+	SPACE = 4;
+	TOTAL_USED_SPACE = 0;
+	DEFAULT_POSITIONS = {
+		arrowLeft: 0,
+		arrowTop: 0,
+		arrowTransform: "translate(-50%, -50)",
+		placement: "top",
+		popupInitialPosition: "translate3d(0px, 0px, 0)",
+		popupPosition: "translate3d(0px, 0px, 0)",
+		rotate: 135
 	};
-	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) => {
-	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);
+	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"
+		];
+	};
+	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";
 		}
-		if (childrenBottom + popupHeight > window.innerHeight) return -popupHalfHeightWithArrow;
-	}
-	return 0;
-};
-/**
-* 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 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];
 	};
-	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
-			};
+	findOffsetParent = (element) => {
+		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;
 		}
-		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
-			};
+		return document.body;
+	};
+	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);
+			}
 		}
-		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
-			};
+		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;
 		}
-		case "nested-menu": {
-			if (computePlacement({
-				childrenStructuredRef: childrenRect,
-				isNestedMenu: true,
-				offsetParent,
-				offsetParentRect,
-				popupPortalTarget,
-				popupStructuredRef
-			}) === "right") {
+		return 0;
+	};
+	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 / 8;
+				const positionY = isAligned ? overloadedChildrenTop + scrollTopValue : overloadedChildrenTop + scrollTopValue - popupHeight / 2 + childrenHeight / 2;
 				return {
 					arrowLeft: -arrowWidth - 5,
 					arrowTop: "50%",
@@ -229,50 +190,73 @@ const computePositions = ({ placement, childrenRef, popupRef, popupPortalTarget,
 					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
-			};
+			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 };
+init_helpers();
+export { DEFAULT_POSITIONS, computePositions, init_helpers };

package/dist/components/Popup/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Popup/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACV,aAAa,EACb,cAAc,EACd,oBAAoB,EAEpB,SAAS,EACT,GAAG,EACH,SAAS,EACV,MAAM,OAAO,CAAA;AAed,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,WAAW,CAAA;AAwB3D,MAAM,MAAM,aAAa,GAAG;IAC1B,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,MAAM,GAAG,MAAM,CAAA;IACzB,cAAc,EAAE,MAAM,CAAA;IACtB,SAAS,EAAE,MAAM,CAAA;IACjB,MAAM,EAAE,MAAM,CAAA;IACd,oBAAoB,EAAE,MAAM,CAAA;IAC5B,aAAa,EAAE,MAAM,CAAA;CACtB,CAAA;AAUD,KAAK,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,CAAA;AAEnE,KAAK,UAAU,GAAG;IAChB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,QAAQ,EACJ,SAAS,GACT,CAAC,CAAC,WAAW,EAAE;QACb,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,MAAM,EAAE,MAAM,IAAI,CAAA;QAClB,OAAO,EAAE,MAAM,IAAI,CAAA;QACnB,cAAc,EAAE,MAAM,IAAI,CAAA;QAC1B,cAAc,EAAE,MAAM,IAAI,CAAA;QAC1B,GAAG,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;KACtC,KAAK,SAAS,CAAC,CAAA;IACpB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,cAAc,CAAA;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,GAAG,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IACrC,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,oBAAoB,CAAA;IAChC,eAAe,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC,eAAe,CAAC,CAAA;IACjE,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC3B;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B;;;OAGG;IACH,YAAY,CAAC,EAAE,WAAW,CAAA;IAC1B;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,CAAA;AAkCD;;GAEG;AACH,eAAO,MAAM,KAAK,uGAifjB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Popup/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACV,aAAa,EACb,cAAc,EACd,oBAAoB,EAEpB,SAAS,EACT,GAAG,EACH,SAAS,EACV,MAAM,OAAO,CAAA;AAed,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,WAAW,CAAA;AAmB3D,MAAM,MAAM,aAAa,GAAG;IAC1B,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,MAAM,GAAG,MAAM,CAAA;IACzB,cAAc,EAAE,MAAM,CAAA;IACtB,SAAS,EAAE,MAAM,CAAA;IACjB,MAAM,EAAE,MAAM,CAAA;IACd,oBAAoB,EAAE,MAAM,CAAA;IAC5B,aAAa,EAAE,MAAM,CAAA;CACtB,CAAA;AAUD,KAAK,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,CAAA;AAEnE,KAAK,UAAU,GAAG;IAChB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,QAAQ,EACJ,SAAS,GACT,CAAC,CAAC,WAAW,EAAE;QACb,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,MAAM,EAAE,MAAM,IAAI,CAAA;QAClB,OAAO,EAAE,MAAM,IAAI,CAAA;QACnB,cAAc,EAAE,MAAM,IAAI,CAAA;QAC1B,cAAc,EAAE,MAAM,IAAI,CAAA;QAC1B,GAAG,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;KACtC,KAAK,SAAS,CAAC,CAAA;IACpB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,cAAc,CAAA;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,GAAG,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IACrC,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,oBAAoB,CAAA;IAChC,eAAe,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC,eAAe,CAAC,CAAA;IACjE,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC3B;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B;;;OAGG;IACH,YAAY,CAAC,EAAE,WAAW,CAAA;IAC1B;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,CAAA;AAkCD;;GAEG;AACH,eAAO,MAAM,KAAK,uGAkfjB,CAAA"}