@ultraviolet/ui 3.24.3 → 3.25.0

package/dist/components/Overlay/Modal/useDelayUnmount.js

@@ -0,0 +1,27 @@
+import { __esmMin, __name } from "../../../_virtual/_rolldown/runtime.js";
+import { useEffect, useState } from "react";
+
+//#region src/components/Overlay/Modal/useDelayUnmount.ts
+var useDelayUnmount;
+function init_useDelayUnmount() {
+	return (init_useDelayUnmount = __esmMin(() => {
+		useDelayUnmount = (open, delayTime) => {
+			const [shouldRender, setShouldRender] = useState(open);
+			useEffect(() => {
+				let timeoutId;
+				if (open && !shouldRender) setShouldRender(true);
+				else if (!open && shouldRender) timeoutId = setTimeout(() => setShouldRender(false), delayTime);
+				return () => clearTimeout(timeoutId);
+			}, [
+				open,
+				delayTime,
+				shouldRender
+			]);
+			return shouldRender;
+		};
+	}))();
+}
+
+//#endregion
+init_useDelayUnmount();
+export { init_useDelayUnmount, useDelayUnmount };

package/dist/components/Overlay/Popover/ContentWrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentWrapper.d.ts","sourceRoot":"","sources":["../../../../src/components/Overlay/Popover/ContentWrapper.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAGlD,eAAO,MAAM,cAAc,4CAA6C,mBAAmB,gCAkC1F,CAAA"}

package/dist/components/Overlay/Popover/ContentWrapper.js

@@ -0,0 +1,51 @@
+'use client';
+import { __esmMin, __name } from "../../../_virtual/_rolldown/runtime.js";
+import { Stack, init_Stack } from "../../Layout/Stack/index.js";
+import { Text, init_Text } from "../../Typography/Text/index.js";
+import { Button, init_Button } from "../../Action/Button/index.js";
+import { init_styles_css, popoverStyle } from "./styles.css.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CloseIcon } from "@ultraviolet/icons/CloseIcon";
+
+//#region src/components/Overlay/Popover/ContentWrapper.tsx
+var ContentWrapper;
+function init_ContentWrapper() {
+	return (init_ContentWrapper = __esmMin(() => {
+		init_Button();
+		init_Stack();
+		init_Text();
+		init_styles_css();
+		ContentWrapper = ({ title, onClose, children, sentiment }) => /* @__PURE__ */ jsxs(Stack, {
+			className: popoverStyle.stack,
+			gap: 1,
+			children: [/* @__PURE__ */ jsxs(Stack, {
+				direction: "row",
+				justifyContent: "space-between",
+				children: [/* @__PURE__ */ jsx(Text, {
+					as: "h3",
+					prominence: sentiment === "neutral" ? "strong" : "stronger",
+					sentiment: sentiment === "neutral" ? "neutral" : "white",
+					variant: "bodyStrong",
+					children: title
+				}), /* @__PURE__ */ jsx(Button, {
+					accessibleLabel: "close",
+					onClick: onClose,
+					sentiment: sentiment === "neutral" ? "neutral" : "primary",
+					size: "small",
+					variant: sentiment === "neutral" ? "ghost" : "filled",
+					children: /* @__PURE__ */ jsx(CloseIcon, {})
+				})]
+			}), typeof children === "string" ? /* @__PURE__ */ jsx(Text, {
+				as: "p",
+				prominence: sentiment === "neutral" ? "strong" : "stronger",
+				sentiment: sentiment === "neutral" ? "neutral" : "white",
+				variant: "bodySmall",
+				children
+			}) : children]
+		});
+	}))();
+}
+
+//#endregion
+init_ContentWrapper();
+export { ContentWrapper, init_ContentWrapper };

package/dist/components/Overlay/Popover/constant.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constant.d.ts","sourceRoot":"","sources":["../../../../src/components/Overlay/Popover/constant.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW;IACtB,KAAK;IACL,MAAM;IACN,KAAK;CACN,CAAA"}

package/dist/components/Overlay/Popover/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Overlay/Popover/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAEhC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAKhC;;;GAGG;AACH,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;8IA6EnB,CAAA"}

package/dist/components/Overlay/Popover/index.js

@@ -0,0 +1,71 @@
+'use client';
+import { __esmMin, __name } from "../../../_virtual/_rolldown/runtime.js";
+import { Popup, init_Popup } from "../Popup/index.js";
+import { ModalContext, init_ModalProvider } from "../Modal/ModalProvider.js";
+import { init_styles_css, popoverStyle } from "./styles.css.js";
+import { ContentWrapper, init_ContentWrapper } from "./ContentWrapper.js";
+import { forwardRef, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { cn } from "@ultraviolet/utils";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/Overlay/Popover/index.tsx
+var Popover;
+function init_Popover() {
+	return (init_Popover = __esmMin(() => {
+		init_ModalProvider();
+		init_Popup();
+		init_ContentWrapper();
+		init_styles_css();
+		Popover = forwardRef(({ visible = false, children, placement, content, title, sentiment = "neutral", size = "medium", onClose, className, maxWidth, maxHeight, "data-testid": dataTestId, portalTarget, dynamicDomRendering, align, style }, ref) => {
+			const innerRef = useRef(null);
+			const isInsideModal = useContext(ModalContext);
+			const [localVisible, setLocalVisible] = useState(visible);
+			useEffect(() => {
+				setLocalVisible(visible);
+			}, [visible]);
+			const localOnClose = useCallback(() => {
+				setLocalVisible(false);
+				onClose === null || onClose === void 0 || onClose();
+			}, [onClose]);
+			const smartPortalTarget = useMemo(() => {
+				if (!portalTarget && isInsideModal) return;
+				if (!(portalTarget || isInsideModal)) return document.body;
+				return portalTarget;
+			}, [isInsideModal, portalTarget]);
+			return /* @__PURE__ */ jsx(Popup, {
+				align,
+				className: cn(className, popoverStyle.popover({
+					sentiment,
+					size
+				})),
+				"data-testid": dataTestId,
+				debounceDelay: 0,
+				dynamicDomRendering,
+				hideOnClickOutside: true,
+				innerRef,
+				maxHeight,
+				maxWidth,
+				onClose: localOnClose,
+				placement,
+				portalTarget: smartPortalTarget,
+				ref,
+				role: "dialog",
+				style,
+				tabIndex: -1,
+				text: /* @__PURE__ */ jsx(ContentWrapper, {
+					onClose: localOnClose,
+					sentiment,
+					title,
+					children: content
+				}),
+				visible: localVisible,
+				children
+			});
+		});
+		Popover.displayName = "Popover";
+	}))();
+}
+
+//#endregion
+init_Popover();
+export { Popover, init_Popover };

package/dist/components/Overlay/Popover/styles.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../../src/components/Overlay/Popover/styles.css.ts"],"names":[],"mappings":"AAgDA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;YAXnB,KAAK;;;;YACL,MAAM;;;;YACN,KAAK;;;;;;;CASmC,CAAA"}

package/dist/components/Overlay/Popover/styles.css.js

@@ -0,0 +1,34 @@
+import { __esmMin } from "../../../_virtual/_rolldown/runtime.js";
+import { init_styles_css_ts_vanilla } from "./styles.css.ts.vanilla.js";
+import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
+
+//#region src/components/Overlay/Popover/styles.css.ts
+var popoverStyle;
+function init_styles_css() {
+	return (init_styles_css = __esmMin(() => {
+		/* @__PURE__ */ init_styles_css_ts_vanilla();
+		popoverStyle = {
+			popover: createRuntimeFn({
+				defaultClassName: "uv_fuj67w0",
+				variantClassNames: {
+					sentiment: {
+						neutral: "uv_fuj67w1",
+						primary: "uv_fuj67w2"
+					},
+					size: {
+						large: "uv_fuj67w3",
+						medium: "uv_fuj67w4",
+						small: "uv_fuj67w5"
+					}
+				},
+				defaultVariants: {},
+				compoundVariants: []
+			}),
+			stack: "uv_fuj67w6"
+		};
+	}))();
+}
+
+//#endregion
+init_styles_css();
+export { init_styles_css, popoverStyle };

package/dist/components/Overlay/Popover/styles.css.ts.vanilla.js

@@ -0,0 +1,10 @@
+import { __esmMin } from "../../../_virtual/_rolldown/runtime.js";
+
+//#region src/components/Overlay/Popover/styles.css.ts.vanilla.css
+function init_styles_css_ts_vanilla() {
+	return (init_styles_css_ts_vanilla = __esmMin(() => {}))();
+}
+
+//#endregion
+init_styles_css_ts_vanilla();
+export { init_styles_css_ts_vanilla };

package/dist/components/Overlay/Popover/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/Overlay/Popover/types.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AACrC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAE7C,KAAK,aAAa,GAAG,SAAS,GAAG,SAAS,CAAA;AAE1C,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,EAAE,SAAS,CAAA;IACnB,OAAO,EAAE,SAAS,CAAA;IAClB,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,aAAa,CAAA;IACzB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,MAAM,OAAO,WAAW,CAAA;IAC/B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;OAGG;IACH,YAAY,CAAC,EAAE,WAAW,CAAA;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,CAAC,WAAW,CAAC,EAAE,aAAa,CAAC,CAAA;CAC9E,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,EAAE,qBAAqB,GAAG,OAAO,GAAG,OAAO,CAAC,CAAA;AAEjF,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,YAAY,EAAE,OAAO,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC,CAAA"}

package/dist/components/Overlay/Popup/helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../src/components/Overlay/Popup/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,QAAA,MAAM,UAAU,YAAI,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,aAAa,CAAU,CAAA;AAE7E,KAAK,UAAU,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAA;AAE7C,KAAK,gBAAgB,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,MAAM,IAAI,CAAC,SAAS,MAAM,GAAG,GAAG,CAAC,GAAG,CAAC,EAAE,GAAG,KAAK,CAAA;AAEjG,KAAK,cAAc,GAAG,gBAAgB,CAAC,OAAO,CAAC,UAAU,EAAE,aAAa,CAAC,EAAE,OAAO,CAAC,GAAG,MAAM,CAAA;AAE5F,MAAM,MAAM,cAAc,GAAG,cAAc,GAAG,UAAU,CAAA;AACxD,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,CAAA;AAO3C,eAAO,MAAM,mBAAmB,IAAI,CAAA;AAEpC,eAAO,MAAM,iBAAiB;IAC5B,SAAS;IACT,QAAQ;IACR,cAAc;IACd,SAAS;IACT,oBAAoB;IACpB,aAAa;IACb,MAAM;CACP,CAAA;AAqND,KAAK,qBAAqB,GAAG;IAC3B,SAAS,EAAE,cAAc,CAAA;IACzB,WAAW,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IAC7C,QAAQ,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IAC1C,iBAAiB,EAAE,WAAW,CAAA;IAC9B,QAAQ,EAAE,OAAO,CAAA;IACjB,KAAK,EAAE,UAAU,CAAA;CAClB,CAAA;AA6LD;;GAEG;AACH,eAAO,MAAM,gBAAgB,8EAO1B,qBAAqB;;;;;;;;CAqJvB,CAAA"}

package/dist/components/Overlay/Popup/helpers.js

@@ -0,0 +1,273 @@
+import { __esmMin, __name } from "../../../_virtual/_rolldown/runtime.js";
+
+//#region src/components/Overlay/Popup/helpers.ts
+var PLACEMENTS, isGenericPlacement, DEFAULT_ARROW_WIDTH, SPACE, DEFAULT_POSITIONS, getOrderOfPlacement, getHorizontalSpacing, getVerticalSpacing, computePlacement, findOffsetParent, getVerticalOverflow, getHorizontalOverflow, getPopupOverflowFromParent, placementBottom, placementLeft, placementRight, placementNested, placementTop, computePositions;
+function init_helpers() {
+	return (init_helpers = __esmMin(() => {
+		PLACEMENTS = [
+			"top",
+			"right",
+			"bottom",
+			"left",
+			"nested-menu"
+		];
+		isGenericPlacement = (placement) => PLACEMENTS.includes(placement);
+		DEFAULT_ARROW_WIDTH = 8;
+		SPACE = 4;
+		DEFAULT_POSITIONS = {
+			arrowLeft: 0,
+			arrowTop: 0,
+			arrowTransform: "translate(-50%, -50)",
+			placement: "top",
+			popupInitialPosition: "translate3d(0px, 0px, 0)",
+			popupPosition: "translate3d(0px, 0px, 0)",
+			rotate: 135
+		};
+		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"
+			];
+		};
+		getHorizontalSpacing = (arrowWidth) => arrowWidth + 8;
+		getVerticalSpacing = (arrowWidth) => arrowWidth + SPACE;
+		computePlacement = ({ childrenStructuredRef, popupStructuredRef, offsetParentRect, offsetParent, popupPortalTarget, isNestedMenu, autoPlacement, arrowWidth }) => {
+			const { top: childrenTop, bottom: childrenBottom, left: childrenLeft, right: childrenRight, width: childrenWidth, height: childrenHeight } = 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 overloadedChildrenBottom = isPopupPortalTargetBody ? childrenBottom : childrenTop - parentTop + childrenHeight;
+			const overloadedChildrenRight = isPopupPortalTargetBody ? childrenRight : childrenLeft - parentLeft + childrenWidth;
+			const { width: popupWidth, height: popupHeight } = popupStructuredRef;
+			if (isNestedMenu) {
+				if (overloadedChildrenRight + popupWidth > window.innerWidth) return "left";
+				return "right";
+			}
+			const conditionsOfPlacement = {
+				bottom: overloadedChildrenBottom + getVerticalSpacing(arrowWidth) + popupHeight <= window.innerHeight,
+				left: overloadedChildrenLeft - getHorizontalSpacing(arrowWidth) - popupWidth >= 0,
+				right: overloadedChildrenRight + getHorizontalSpacing(arrowWidth) + popupWidth <= window.innerWidth,
+				top: overloadedChildrenTop - getVerticalSpacing(arrowWidth) - popupHeight >= 0
+			};
+			return orderOfPlacement.find((placement) => conditionsOfPlacement[placement]) || orderOfPlacement[3];
+		};
+		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;
+		};
+		getVerticalOverflow = (childrenRect, offsetParentRect, popupHalfWidthWithArrow, popupWidth) => {
+			const { left: parentLeft, right: parentRight } = offsetParentRect;
+			const { left: childrenLeft, width: childrenWidth } = childrenRect;
+			const popupLeft = childrenLeft + childrenWidth / 2 - popupWidth / 2;
+			const popupRight = popupLeft + popupWidth;
+			if (popupRight > parentRight) {
+				if (Math.abs(popupRight - parentRight) > popupHalfWidthWithArrow) return -popupHalfWidthWithArrow;
+				return parentRight - popupRight;
+			}
+			if (popupLeft < parentLeft) {
+				if (Math.abs(popupLeft - parentLeft) > popupHalfWidthWithArrow) return popupHalfWidthWithArrow;
+				return Math.abs(popupLeft - parentLeft);
+			}
+		};
+		getHorizontalOverflow = (childrenRect, offsetParentRect, popupHeight, popupHalfHeightWithArrow) => {
+			const { top: parentTop, bottom: parentBottom } = offsetParentRect;
+			const { top: childrenTop, height: childrenHeight } = childrenRect;
+			const popupTop = childrenTop + childrenHeight / 2 - popupHeight / 2;
+			const popupBottom = popupTop + popupHeight;
+			if (popupTop < parentTop) {
+				if (Math.abs(popupTop - parentTop) > popupHalfHeightWithArrow) return popupHalfHeightWithArrow;
+				return Math.abs(popupTop - parentTop);
+			}
+			if (popupBottom > parentBottom) {
+				if (Math.abs(popupBottom - parentBottom) > popupHalfHeightWithArrow) return -popupHalfHeightWithArrow;
+				return parentBottom - popupBottom;
+			}
+		};
+		getPopupOverflowFromParent = (position, offsetParentRect, childrenRect, popupStructuredRef, arrowWidth) => {
+			const { width: popupWidth, height: popupHeight } = popupStructuredRef;
+			const popupHalfWidthWithArrow = popupWidth / 2 - arrowWidth - 1;
+			const popupHalfHeightWithArrow = popupHeight / 2 - arrowWidth - 1;
+			if (position === "top" || position === "bottom") {
+				const overflow = getVerticalOverflow(childrenRect, offsetParentRect, popupHalfWidthWithArrow, popupWidth);
+				if (overflow) return overflow;
+			}
+			if (position === "left" || position === "right") {
+				const overflow = getHorizontalOverflow(childrenRect, offsetParentRect, popupHeight, popupHalfHeightWithArrow);
+				if (overflow) return overflow;
+			}
+			return 0;
+		};
+		placementBottom = (isAligned, overloadedChildrenLeft, childrenWidth, popupWidth, overloadedChildrenTop, scrollTopValue, childrenHeight, arrowWidth, popupOverflow, isPopupPortalTargetBody) => {
+			const positionX = isAligned ? overloadedChildrenLeft : overloadedChildrenLeft + childrenWidth / 2 - popupWidth / 2;
+			const positionY = overloadedChildrenTop + scrollTopValue + childrenHeight + getVerticalSpacing(arrowWidth);
+			const computedPositionX = isAligned ? positionX : positionX + popupOverflow;
+			const finalPositionX = isPopupPortalTargetBody ? Math.max(computedPositionX, 0) : computedPositionX;
+			return {
+				arrowLeft: overloadedChildrenLeft + childrenWidth / 2 - finalPositionX,
+				arrowTop: -arrowWidth - 5,
+				arrowTransform: "",
+				placement: "bottom",
+				popupInitialPosition: `translate3d(${finalPositionX}px, ${positionY}px, 0)`,
+				popupPosition: `translate3d(${finalPositionX}px, ${positionY}px, 0)`,
+				rotate: 180
+			};
+		};
+		placementLeft = (isAligned, overloadedChildrenLeft, popupWidth, overloadedChildrenTop, scrollTopValue, childrenHeight, arrowWidth, popupOverflow, popupHeight) => {
+			const positionX = overloadedChildrenLeft - popupWidth - getHorizontalSpacing(arrowWidth);
+			const positionY = isAligned ? overloadedChildrenTop + scrollTopValue : overloadedChildrenTop + scrollTopValue - popupHeight / 2 + childrenHeight / 2;
+			return {
+				arrowLeft: popupWidth + arrowWidth + 5,
+				arrowTop: isAligned ? childrenHeight / 2 - arrowWidth : popupHeight / 2 - popupOverflow,
+				arrowTransform: "translate(-50%, -50%)",
+				placement: "left",
+				popupInitialPosition: `translate3d(${positionX}px, ${positionY + popupOverflow}px, 0)`,
+				popupPosition: `translate3d(${positionX}px, ${positionY + popupOverflow}px, 0)`,
+				rotate: -90
+			};
+		};
+		placementRight = (isAligned, overloadedChildrenTop, scrollTopValue, childrenHeight, arrowWidth, popupOverflow, popupHeight, overloadedChildrenRight) => {
+			const positionX = overloadedChildrenRight + getHorizontalSpacing(arrowWidth);
+			const positionY = isAligned ? overloadedChildrenTop + scrollTopValue : overloadedChildrenTop + scrollTopValue - popupHeight / 2 + childrenHeight / 2;
+			return {
+				arrowLeft: -arrowWidth - 5,
+				arrowTop: isAligned ? childrenHeight / 2 - arrowWidth : popupHeight / 2 - popupOverflow,
+				arrowTransform: "translate(50%, -50%)",
+				placement: "right",
+				popupInitialPosition: `translate3d(${positionX}px, ${positionY + popupOverflow}px, 0)`,
+				popupPosition: `translate3d(${positionX}px, ${positionY + popupOverflow}px, 0)`,
+				rotate: 90
+			};
+		};
+		placementNested = (isAligned, overloadedChildrenTop, scrollTopValue, childrenHeight, arrowWidth, popupOverflow, popupHeight, overloadedChildrenRight, childrenRect, offsetParent, offsetParentRect, popupStructuredRef, overloadedChildrenLeft, popupWidth, popupPortalTarget) => {
+			if (computePlacement({
+				childrenStructuredRef: childrenRect,
+				isNestedMenu: true,
+				offsetParent,
+				offsetParentRect,
+				popupPortalTarget,
+				popupStructuredRef,
+				arrowWidth
+			}) === "right") {
+				const positionX = overloadedChildrenRight + getHorizontalSpacing(arrowWidth);
+				const positionY = isAligned ? overloadedChildrenTop + scrollTopValue : overloadedChildrenTop + scrollTopValue - popupHeight / 8;
+				return {
+					arrowLeft: -arrowWidth - 5,
+					arrowTop: isAligned ? childrenHeight / 2 - arrowWidth : popupHeight / 2 - popupOverflow,
+					arrowTransform: "translate(50%, -50%)",
+					placement: "right",
+					popupInitialPosition: `translate3d(${positionX}px, ${positionY + popupOverflow}px, 0)`,
+					popupPosition: `translate3d(${positionX}px, ${positionY + popupOverflow}px, 0)`,
+					rotate: 90
+				};
+			}
+			const positionX = overloadedChildrenLeft - popupWidth - getHorizontalSpacing(arrowWidth);
+			const positionY = isAligned ? overloadedChildrenTop + scrollTopValue : overloadedChildrenTop + scrollTopValue - popupHeight / 2 + childrenHeight / 2;
+			return {
+				arrowLeft: popupWidth + arrowWidth + 5,
+				arrowTop: isAligned ? childrenHeight / 2 - arrowWidth : popupHeight / 2 - popupOverflow,
+				arrowTransform: "translate(-50%, -50%)",
+				placement: "left",
+				popupInitialPosition: `translate3d(${positionX}px, ${positionY + popupOverflow}px, 0)`,
+				popupPosition: `translate3d(${positionX}px, ${positionY + popupOverflow}px, 0)`,
+				rotate: -90
+			};
+		};
+		placementTop = (isAligned, overloadedChildrenTop, scrollTopValue, arrowWidth, popupOverflow, popupHeight, overloadedChildrenLeft, popupWidth, childrenWidth, isPopupPortalTargetBody) => {
+			const positionX = isAligned ? overloadedChildrenLeft : overloadedChildrenLeft + childrenWidth / 2 - popupWidth / 2;
+			const positionY = overloadedChildrenTop + scrollTopValue - popupHeight - getVerticalSpacing(arrowWidth);
+			const computedPositionX = isAligned ? positionX : positionX + popupOverflow;
+			const finalPositionX = isPopupPortalTargetBody ? Math.max(computedPositionX, 0) : computedPositionX;
+			return {
+				arrowLeft: overloadedChildrenLeft + childrenWidth / 2 - finalPositionX,
+				arrowTop: popupHeight - 1,
+				arrowTransform: "",
+				placement: "top",
+				popupInitialPosition: `translate3d(${finalPositionX}px, ${positionY}px, 0)`,
+				popupPosition: `translate3d(${finalPositionX}px, ${positionY}px, 0)`,
+				rotate: 0
+			};
+		};
+		computePositions = ({ placement, childrenRef, popupRef, popupPortalTarget, hasArrow, align }) => {
+			var _offsetParent$getBoun;
+			var _window$innerWidth;
+			var _window;
+			var _window$innerHeight;
+			var _window2;
+			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,
+				bottom: (_window$innerHeight = (_window2 = window) === null || _window2 === void 0 ? void 0 : _window2.innerHeight) !== null && _window$innerHeight !== void 0 ? _window$innerHeight : 0
+			};
+			const popupStructuredRef = popupRef.current.getBoundingClientRect();
+			const placementBasedOnWindowSize = isGenericPlacement(placement) ? placement : computePlacement({
+				autoPlacement: placement,
+				childrenStructuredRef: childrenRect,
+				offsetParent,
+				offsetParentRect,
+				popupPortalTarget,
+				popupStructuredRef,
+				arrowWidth
+			});
+			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": return placementBottom(isAligned, overloadedChildrenLeft, childrenWidth, popupWidth, overloadedChildrenTop, scrollTopValue, childrenHeight, arrowWidth, popupOverflow, isPopupPortalTargetBody);
+				case "left": return placementLeft(isAligned, overloadedChildrenLeft, popupWidth, overloadedChildrenTop, scrollTopValue, childrenHeight, arrowWidth, popupOverflow, popupHeight);
+				case "right": return placementRight(isAligned, overloadedChildrenTop, scrollTopValue, childrenHeight, arrowWidth, popupOverflow, popupHeight, overloadedChildrenRight);
+				case "nested-menu": return placementNested(isAligned, overloadedChildrenTop, scrollTopValue, childrenHeight, arrowWidth, popupOverflow, popupHeight, overloadedChildrenRight, childrenRect, offsetParent, offsetParentRect, popupStructuredRef, overloadedChildrenLeft, popupWidth, popupPortalTarget);
+				case "top": return placementTop(isAligned, overloadedChildrenTop, scrollTopValue, arrowWidth, popupOverflow, popupHeight, overloadedChildrenLeft, popupWidth, childrenWidth, isPopupPortalTargetBody);
+				default: return placementTop(isAligned, overloadedChildrenTop, scrollTopValue, arrowWidth, popupOverflow, popupHeight, overloadedChildrenLeft, popupWidth, childrenWidth, isPopupPortalTargetBody);
+			}
+		};
+	}))();
+}
+
+//#endregion
+init_helpers();
+export { DEFAULT_POSITIONS, computePositions, init_helpers };

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Overlay/Popup/index.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EACV,aAAa,EACb,cAAc,EACd,oBAAoB,EAEpB,SAAS,EACT,GAAG,EACH,SAAS,EACV,MAAM,OAAO,CAAA;AAId,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,WAAW,CAAA;AAkB3D,MAAM,MAAM,aAAa,GAAG;IAC1B,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,MAAM,CAAA;IAChB,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,uGAgdjB,CAAA"}