@ultraviolet/ui 3.11.0 → 3.12.0

package/dist/components/Popup/index.js

@@ -1,351 +1,354 @@
 'use client';
-import { __name } from "../../_virtual/_rolldown/runtime.js";
-import { _objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.114.0/helpers/objectSpread2.js";
-import { isClientSide } from "../../helpers/isClientSide.js";
-import { DEFAULT_POSITIONS, computePositions } from "./helpers.js";
-import { animationPopup, childrenContainerPopup, containerPopup, popup } from "./styles.css.js";
-import { animationDurationPopup, arrowLeft, arrowTop, arrowTransform, maxHeightPopup, maxWidthPopup, popupInitialPosition, popupPosition } from "./variables.css.js";
+import { __esmMin, __name } from "../../_virtual/_rolldown/runtime.js";
+import { _objectSpread2, init_objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.115.0/helpers/objectSpread2.js";
+import { init_isClientSide, isClientSide } from "../../helpers/isClientSide.js";
+import { DEFAULT_POSITIONS, computePositions, init_helpers } from "./helpers.js";
+import { init_styles_css, popupStyle } from "./styles.css.js";
+import { animationDurationPopup, arrowLeft, arrowTop, arrowTransform, init_variables_css, maxHeightPopup, maxWidthPopup, popupInitialPosition, popupPosition } from "./variables.css.js";
 import { forwardRef, startTransition, useCallback, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { cn } from "@ultraviolet/utils";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { cn } from "@ultraviolet/utils";
 import { createPortal } from "react-dom";
 
 //#region src/components/Popup/index.tsx
-const DEFAULT_ANIMATION_DURATION = 230;
-const DEFAULT_DEBOUNCE_DURATION = 200;
-const noop = () => {};
-/**
-* This event handle allow us to not bubble the event to document.body like this react-select works fine
-*/
-const stopClickPropagation = (event) => {
-	event.stopPropagation();
-};
-const getPopupPortalTarget = ({ node, role, portalTarget }) => {
-	if (portalTarget) return portalTarget;
-	if (role === "dialog") {
-		if (node) return node;
-		if (isClientSide) return document.body;
+var DEFAULT_ANIMATION_DURATION, DEFAULT_DEBOUNCE_DURATION, noop, stopClickPropagation, getPopupPortalTarget, Popup;
+var init_Popup = __esmMin(() => {
+	init_isClientSide();
+	init_helpers();
+	init_styles_css();
+	init_variables_css();
+	init_objectSpread2();
+	DEFAULT_ANIMATION_DURATION = 230;
+	DEFAULT_DEBOUNCE_DURATION = 200;
+	noop = () => {};
+	stopClickPropagation = (event) => {
+		event.stopPropagation();
+	};
+	getPopupPortalTarget = ({ node, role, portalTarget }) => {
+		if (portalTarget) return portalTarget;
+		if (role === "dialog") {
+			if (node) return node;
+			if (isClientSide) return document.body;
+			return null;
+		}
+		if (typeof window !== "undefined") return document.body;
 		return null;
-	}
-	if (typeof window !== "undefined") return document.body;
-	return null;
-};
-/**
-* @experimental This component is experimental and may be subject to breaking changes in the future.
-*/
-const Popup = forwardRef(({ children, text = "", placement = "auto", align = "center", id, className, containerFullWidth, containerFullHeight, maxWidth = "14.5rem", maxHeight, visible, innerRef, role = "popup", "data-testid": dataTestId, hasArrow = true, onClose, tabIndex = 0, onKeyDown, "aria-haspopup": ariaHasPopup, hideOnClickOutside = false, debounceDelay = DEFAULT_DEBOUNCE_DURATION, disableAnimation = false, portalTarget, dynamicDomRendering = true, style }, ref) => {
-	const childrenRef = useRef(null);
-	useImperativeHandle(innerRef, () => childrenRef.current);
-	const innerPopupRef = useRef(null);
-	useImperativeHandle(ref, () => innerPopupRef.current);
-	const timer = useRef(void 0);
-	const popupPortalTarget = getPopupPortalTarget({
-		node: childrenRef.current,
-		portalTarget,
-		role
-	});
-	const animationDuration = disableAnimation || maxHeight ? 0 : DEFAULT_ANIMATION_DURATION;
-	const debounceTimer = useRef(void 0);
-	const [visibleInDom, setVisibleInDom] = useState(false);
-	const [reverseAnimation, setReverseAnimation] = useState(false);
-	const [positions, setPositions] = useState(_objectSpread2({}, DEFAULT_POSITIONS));
-	const uniqueId = useId();
-	const generatedId = id !== null && id !== void 0 ? id : uniqueId;
-	const isControlled = visible !== void 0;
-	const isAnimated = useMemo(() => animationDuration > 0 && !maxHeight, [animationDuration, maxHeight]);
-	const generatePopupPositions = useCallback(() => {
-		if (childrenRef.current && innerPopupRef.current && popupPortalTarget) setPositions(computePositions({
-			align,
-			childrenRef,
+	};
+	Popup = forwardRef(({ children, text = "", placement = "auto", align = "center", id, className, containerFullWidth, containerFullHeight, maxWidth = "14.5rem", maxHeight, visible, innerRef, role = "popup", "data-testid": dataTestId, hasArrow = true, onClose, tabIndex = 0, onKeyDown, "aria-haspopup": ariaHasPopup, hideOnClickOutside = false, debounceDelay = DEFAULT_DEBOUNCE_DURATION, disableAnimation = false, portalTarget, dynamicDomRendering = true, style }, ref) => {
+		const childrenRef = useRef(null);
+		useImperativeHandle(innerRef, () => childrenRef.current);
+		const innerPopupRef = useRef(null);
+		useImperativeHandle(ref, () => innerPopupRef.current);
+		const timer = useRef(void 0);
+		const popupPortalTarget = getPopupPortalTarget({
+			node: childrenRef.current,
+			portalTarget,
+			role
+		});
+		const animationDuration = disableAnimation || maxHeight ? 0 : DEFAULT_ANIMATION_DURATION;
+		const debounceTimer = useRef(void 0);
+		const [visibleInDom, setVisibleInDom] = useState(false);
+		const [reverseAnimation, setReverseAnimation] = useState(false);
+		const [positions, setPositions] = useState(_objectSpread2({}, DEFAULT_POSITIONS));
+		const uniqueId = useId();
+		const generatedId = id !== null && id !== void 0 ? id : uniqueId;
+		const isControlled = visible !== void 0;
+		const isAnimated = useMemo(() => animationDuration > 0 && !maxHeight, [animationDuration, maxHeight]);
+		const generatePopupPositions = useCallback(() => {
+			if (childrenRef.current && innerPopupRef.current && popupPortalTarget) setPositions(computePositions({
+				align,
+				childrenRef,
+				hasArrow,
+				placement,
+				popupPortalTarget,
+				popupRef: innerPopupRef
+			}));
+		}, [
 			hasArrow,
 			placement,
-			popupPortalTarget,
-			popupRef: innerPopupRef
-		}));
-	}, [
-		hasArrow,
-		placement,
-		align,
-		popupPortalTarget
-	]);
-	/**
-	* This function is called when we need to recompute positions of popup due to window scroll or resize.
-	*/
-	const onWindowChangeDetected = useCallback(() => {
-		if (innerPopupRef.current) innerPopupRef.current.style.animation = "none";
-		generatePopupPositions();
-	}, [generatePopupPositions, innerPopupRef]);
-	/**
-	* This function is called when we need to remove popup portal from DOM and remove event listener to it.
-	*/
-	const unmountPopupFromDom = useCallback(() => {
-		setVisibleInDom(false);
-		setReverseAnimation(false);
-		window.removeEventListener("scroll", onWindowChangeDetected, true);
-	}, [onWindowChangeDetected]);
-	/**
-	* This function is called when we need to hide popup. A timeout is set to allow animation end, then remove
-	* popup from dom.
-	*/
-	const closePopup = useCallback(() => {
-		const closeFunction = () => {
-			if (disableAnimation) {
-				onClose === null || onClose === void 0 || onClose();
-				unmountPopupFromDom();
-			} else {
-				setReverseAnimation(true);
-				timer.current = setTimeout(() => {
+			align,
+			popupPortalTarget
+		]);
+		/**
+		* This function is called when we need to recompute positions of popup due to window scroll or resize.
+		*/
+		const onWindowChangeDetected = useCallback(() => {
+			if (innerPopupRef.current) innerPopupRef.current.style.animation = "none";
+			generatePopupPositions();
+		}, [generatePopupPositions, innerPopupRef]);
+		/**
+		* This function is called when we need to remove popup portal from DOM and remove event listener to it.
+		*/
+		const unmountPopupFromDom = useCallback(() => {
+			setVisibleInDom(false);
+			setReverseAnimation(false);
+			window.removeEventListener("scroll", onWindowChangeDetected, true);
+		}, [onWindowChangeDetected]);
+		/**
+		* This function is called when we need to hide popup. A timeout is set to allow animation end, then remove
+		* popup from dom.
+		*/
+		const closePopup = useCallback(() => {
+			const closeFunction = () => {
+				if (disableAnimation) {
 					onClose === null || onClose === void 0 || onClose();
 					unmountPopupFromDom();
-				}, animationDuration);
-			}
-		};
-		if (disableAnimation) closeFunction();
-		else debounceTimer.current = setTimeout(() => {
-			closeFunction();
-		}, debounceDelay && !disableAnimation ? debounceDelay : 0);
-	}, [
-		animationDuration,
-		disableAnimation,
-		debounceDelay,
-		onClose,
-		unmountPopupFromDom
-	]);
-	/**
-	* When mouse hover or stop hovering children this function display or hide popup. A timeout is set to allow animation
-	* end, then remove popup from dom.
-	*/
-	const onPointerEvent = useCallback((isVisible) => () => {
-		if (!visible && debounceDelay > 0 && debounceTimer.current) {
-			clearTimeout(debounceTimer.current);
-			debounceTimer.current = void 0;
-		}
-		if (!isVisible && innerPopupRef.current && !debounceTimer.current) closePopup();
-		else if (isVisible) {
-			if (timer.current) {
-				setReverseAnimation(false);
-				clearTimeout(timer.current);
-				timer.current = void 0;
-			}
-			if (debounceTimer.current) {
+				} else {
+					setReverseAnimation(true);
+					timer.current = setTimeout(() => {
+						onClose === null || onClose === void 0 || onClose();
+						unmountPopupFromDom();
+					}, animationDuration);
+				}
+			};
+			if (disableAnimation) closeFunction();
+			else debounceTimer.current = setTimeout(() => {
+				closeFunction();
+			}, debounceDelay && !disableAnimation ? debounceDelay : 0);
+		}, [
+			animationDuration,
+			disableAnimation,
+			debounceDelay,
+			onClose,
+			unmountPopupFromDom
+		]);
+		/**
+		* When mouse hover or stop hovering children this function display or hide popup. A timeout is set to allow animation
+		* end, then remove popup from dom.
+		*/
+		const onPointerEvent = useCallback((isVisible) => () => {
+			if (!visible && debounceDelay > 0 && debounceTimer.current) {
 				clearTimeout(debounceTimer.current);
 				debounceTimer.current = void 0;
 			}
-			if (debounceDelay > 0) debounceTimer.current = setTimeout(() => {
-				setVisibleInDom(true);
-			}, debounceDelay);
-			else startTransition(() => {
-				setVisibleInDom(true);
+			if (!isVisible && innerPopupRef.current && !debounceTimer.current) closePopup();
+			else if (isVisible) {
+				if (timer.current) {
+					setReverseAnimation(false);
+					clearTimeout(timer.current);
+					timer.current = void 0;
+				}
+				if (debounceTimer.current) {
+					clearTimeout(debounceTimer.current);
+					debounceTimer.current = void 0;
+				}
+				if (debounceDelay > 0) debounceTimer.current = setTimeout(() => {
+					setVisibleInDom(true);
+				}, debounceDelay);
+				else startTransition(() => {
+					setVisibleInDom(true);
+				});
+			}
+		}, [
+			closePopup,
+			debounceDelay,
+			visible
+		]);
+		useLayoutEffect(() => {
+			const currentRef = childrenRef.current;
+			const mutationObserver = new MutationObserver(() => {
+				generatePopupPositions();
+			});
+			const resizeObserver = new ResizeObserver(() => {
+				generatePopupPositions();
 			});
-		}
-	}, [
-		closePopup,
-		debounceDelay,
-		visible
-	]);
-	useLayoutEffect(() => {
-		const currentRef = childrenRef.current;
-		const mutationObserver = new MutationObserver(() => {
-			generatePopupPositions();
-		});
-		const resizeObserver = new ResizeObserver(() => {
-			generatePopupPositions();
-		});
-		if (currentRef) {
-			resizeObserver.observe(currentRef);
-			mutationObserver.observe(currentRef, { characterData: true });
-		}
-		return () => {
 			if (currentRef) {
-				resizeObserver.unobserve(currentRef);
-				mutationObserver.disconnect();
-			}
-		};
-	}, [visibleInDom, generatePopupPositions]);
-	/**
-	* Once popup is visible in the dom we can compute positions, then set it visible on screen and add event to
-	* recompute positions on scroll or screen resize.
-	*/
-	useLayoutEffect(() => {
-		if (visibleInDom) {
-			generatePopupPositions();
-			if (popupPortalTarget === document.body) window.addEventListener("scroll", onWindowChangeDetected, true);
-			window.addEventListener("resize", onWindowChangeDetected, true);
-		}
-		return () => {
-			window.removeEventListener("scroll", onWindowChangeDetected, true);
-			window.removeEventListener("resize", onWindowChangeDetected, true);
-			if (timer.current) {
-				clearTimeout(timer.current);
-				timer.current = void 0;
+				resizeObserver.observe(currentRef);
+				mutationObserver.observe(currentRef, { characterData: true });
 			}
-		};
-	}, [
-		generatePopupPositions,
-		onWindowChangeDetected,
-		visibleInDom,
-		maxWidth,
-		popupPortalTarget
-	]);
-	useLayoutEffect(() => {
-		if (visibleInDom && innerPopupRef.current) innerPopupRef.current.style.opacity = "1";
-	}, [visibleInDom, positions]);
-	/**
-	* If popup has `visible` prop it means the popup is manually controlled through this prop.
-	* In this cas we don't want to display popup on hover, but only when `visible` is true.
-	*/
-	useEffect(() => {
-		if (isControlled) onPointerEvent(visible)();
-	}, [
-		isControlled,
-		onPointerEvent,
-		visible
-	]);
-	useEffect(() => {
-		const handleEscPress = (event) => {
-			if (event.key === "Escape") {
-				event.preventDefault();
-				event.stopPropagation();
-				closePopup();
+			return () => {
+				if (currentRef) {
+					resizeObserver.unobserve(currentRef);
+					mutationObserver.disconnect();
+				}
+			};
+		}, [visibleInDom, generatePopupPositions]);
+		/**
+		* Once popup is visible in the dom we can compute positions, then set it visible on screen and add event to
+		* recompute positions on scroll or screen resize.
+		*/
+		useLayoutEffect(() => {
+			if (visibleInDom) {
+				generatePopupPositions();
+				window.addEventListener("scroll", onWindowChangeDetected, true);
+				window.addEventListener("resize", onWindowChangeDetected, true);
 			}
-		};
-		const handleClickOutside = (event) => {
-			const popupCurrent = innerPopupRef.current;
-			const childrenCurrent = childrenRef.current;
-			if (popupCurrent && hideOnClickOutside && !event.defaultPrevented && event.target && event.target !== popupCurrent && event.target !== childrenCurrent && !(childrenCurrent === null || childrenCurrent === void 0 ? void 0 : childrenCurrent.contains(event.target)) && !popupCurrent.contains(event.target)) {
-				event.preventDefault();
-				event.stopPropagation();
-				closePopup();
+			return () => {
+				window.removeEventListener("scroll", onWindowChangeDetected, true);
+				window.removeEventListener("resize", onWindowChangeDetected, true);
+				if (timer.current) {
+					clearTimeout(timer.current);
+					timer.current = void 0;
+				}
+			};
+		}, [
+			generatePopupPositions,
+			onWindowChangeDetected,
+			visibleInDom,
+			maxWidth,
+			popupPortalTarget
+		]);
+		useLayoutEffect(() => {
+			if (visibleInDom && innerPopupRef.current) innerPopupRef.current.style.opacity = "1";
+		}, [visibleInDom, positions]);
+		/**
+		* If popup has `visible` prop it means the popup is manually controlled through this prop.
+		* In this cas we don't want to display popup on hover, but only when `visible` is true.
+		*/
+		useEffect(() => {
+			if (isControlled) onPointerEvent(visible)();
+		}, [
+			isControlled,
+			onPointerEvent,
+			visible
+		]);
+		useEffect(() => {
+			const handleEscPress = (event) => {
+				if (event.key === "Escape") {
+					event.preventDefault();
+					event.stopPropagation();
+					closePopup();
+				}
+			};
+			const handleClickOutside = (event) => {
+				const popupCurrent = innerPopupRef.current;
+				const childrenCurrent = childrenRef.current;
+				if (popupCurrent && hideOnClickOutside && !event.defaultPrevented && event.target && event.target !== popupCurrent && event.target !== childrenCurrent && !(childrenCurrent === null || childrenCurrent === void 0 ? void 0 : childrenCurrent.contains(event.target)) && !popupCurrent.contains(event.target)) {
+					event.preventDefault();
+					event.stopPropagation();
+					closePopup();
+				}
+			};
+			if (visibleInDom) {
+				document.body.addEventListener("keyup", handleEscPress);
+				document.body.addEventListener("click", handleClickOutside);
 			}
-		};
-		if (visibleInDom) {
-			document.body.addEventListener("keyup", handleEscPress);
-			document.body.addEventListener("click", handleClickOutside);
-		}
-		return () => {
-			document.body.removeEventListener("keyup", handleEscPress);
-			document.body.removeEventListener("click", handleClickOutside);
-		};
-	}, [
-		closePopup,
-		visibleInDom,
-		innerPopupRef,
-		childrenRef,
-		hideOnClickOutside
-	]);
-	/**
-	* This event will occur only for dialog and will trap focus inside the dialog.
-	*/
-	const handleFocusTrap = useCallback((event) => {
-		var _innerPopupRef$curren;
-		if (!(event.key === "Tab")) return;
-		event.stopPropagation();
-		const focusableEls = (_innerPopupRef$curren = innerPopupRef.current) === null || _innerPopupRef$curren === void 0 ? void 0 : _innerPopupRef$curren.querySelectorAll("a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled])");
-		if ((focusableEls === null || focusableEls === void 0 ? void 0 : focusableEls.length) === 0) event.preventDefault();
-		if (focusableEls) {
-			const elems = [...focusableEls];
-			const firstFocusableEl = elems[0];
-			const lastFocusableEl = elems.at(-1);
-			if (event.shiftKey) {
-				if (document.activeElement === firstFocusableEl || document.activeElement === innerPopupRef.current) {
-					if (lastFocusableEl instanceof HTMLElement) lastFocusableEl.focus();
+			return () => {
+				document.body.removeEventListener("keyup", handleEscPress);
+				document.body.removeEventListener("click", handleClickOutside);
+			};
+		}, [
+			closePopup,
+			visibleInDom,
+			innerPopupRef,
+			childrenRef,
+			hideOnClickOutside
+		]);
+		/**
+		* This event will occur only for dialog and will trap focus inside the dialog.
+		*/
+		const handleFocusTrap = useCallback((event) => {
+			var _innerPopupRef$curren;
+			if (!(event.key === "Tab")) return;
+			event.stopPropagation();
+			const focusableEls = (_innerPopupRef$curren = innerPopupRef.current) === null || _innerPopupRef$curren === void 0 ? void 0 : _innerPopupRef$curren.querySelectorAll("a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled])");
+			if ((focusableEls === null || focusableEls === void 0 ? void 0 : focusableEls.length) === 0) event.preventDefault();
+			if (focusableEls) {
+				const elems = [...focusableEls];
+				const firstFocusableEl = elems[0];
+				const lastFocusableEl = elems.at(-1);
+				if (event.shiftKey) {
+					if (document.activeElement === firstFocusableEl || document.activeElement === innerPopupRef.current) {
+						if (lastFocusableEl instanceof HTMLElement) lastFocusableEl.focus();
+						event.preventDefault();
+					}
+				} else if (document.activeElement === lastFocusableEl || document.activeElement === innerPopupRef.current) {
+					if (firstFocusableEl instanceof HTMLElement) firstFocusableEl.focus();
 					event.preventDefault();
 				}
-			} else if (document.activeElement === lastFocusableEl || document.activeElement === innerPopupRef.current) {
-				if (firstFocusableEl instanceof HTMLElement) firstFocusableEl.focus();
-				event.preventDefault();
 			}
+		}, []);
+		/**
+		* On unmount, clear all timers
+		*/
+		useEffect(() => () => {
+			if (timer.current) clearTimeout(timer.current);
+			if (debounceTimer.current) clearTimeout(debounceTimer.current);
+		}, []);
+		/**
+		* Will render children conditionally if children is a function or not.
+		*/
+		const renderChildren = useCallback(() => {
+			if (typeof children === "function") return children({
+				onBlur: isControlled ? noop : onPointerEvent(false),
+				onFocus: isControlled ? noop : onPointerEvent(true),
+				onPointerEnter: isControlled ? noop : onPointerEvent(true),
+				onPointerLeave: isControlled ? noop : onPointerEvent(false),
+				ref: childrenRef
+			});
+			return /* @__PURE__ */ jsx("div", {
+				"aria-controls": generatedId,
+				"aria-describedby": generatedId,
+				"aria-haspopup": ariaHasPopup,
+				className: popupStyle.childrenContainer({
+					fullHeight: containerFullHeight,
+					fullWidth: containerFullWidth
+				}),
+				onBlur: isControlled ? noop : onPointerEvent(false),
+				onFocus: isControlled ? noop : onPointerEvent(true),
+				onKeyDown: (event) => {
+					onKeyDown === null || onKeyDown === void 0 || onKeyDown(event);
+				},
+				onPointerEnter: isControlled ? noop : onPointerEvent(true),
+				onPointerLeave: isControlled ? noop : onPointerEvent(false),
+				ref: childrenRef,
+				tabIndex,
+				children
+			});
+		}, [
+			ariaHasPopup,
+			children,
+			containerFullHeight,
+			containerFullWidth,
+			generatedId,
+			isControlled,
+			onKeyDown,
+			onPointerEvent,
+			tabIndex
+		]);
+		const shouldRender = useMemo(() => {
+			if (!dynamicDomRendering) return true;
+			if (dynamicDomRendering && visibleInDom) return true;
+			return false;
+		}, [dynamicDomRendering, visibleInDom]);
+		if (!text) {
+			if (typeof children === "function") return null;
+			return children;
 		}
-	}, []);
-	/**
-	* On unmount, clear all timers
-	*/
-	useEffect(() => () => {
-		if (timer.current) clearTimeout(timer.current);
-		if (debounceTimer.current) clearTimeout(debounceTimer.current);
-	}, []);
-	/**
-	* Will render children conditionally if children is a function or not.
-	*/
-	const renderChildren = useCallback(() => {
-		if (typeof children === "function") return children({
-			onBlur: isControlled ? noop : onPointerEvent(false),
-			onFocus: isControlled ? noop : onPointerEvent(true),
+		return /* @__PURE__ */ jsxs(Fragment$1, { children: [renderChildren(), shouldRender ? createPortal(/* @__PURE__ */ jsx("div", {
+			className: cn(className, popupStyle.popup({
+				hasArrow,
+				visibleInDom: dynamicDomRendering ? void 0 : visibleInDom
+			}), isAnimated ? popupStyle.animation[reverseAnimation ? "reverse" : "notReverse"] : ""),
+			"data-testid": dataTestId,
+			"data-visible-in-dom": dynamicDomRendering ? void 0 : visibleInDom,
+			id: generatedId,
+			onClick: stopClickPropagation,
+			onKeyDown: role === "dialog" ? handleFocusTrap : void 0,
 			onPointerEnter: isControlled ? noop : onPointerEvent(true),
 			onPointerLeave: isControlled ? noop : onPointerEvent(false),
-			ref: childrenRef
-		});
-		return /* @__PURE__ */ jsx("div", {
-			"aria-controls": generatedId,
-			"aria-describedby": generatedId,
-			"aria-haspopup": ariaHasPopup,
-			className: childrenContainerPopup({
-				fullHeight: containerFullHeight,
-				fullWidth: containerFullWidth
-			}),
-			onBlur: isControlled ? noop : onPointerEvent(false),
-			onFocus: isControlled ? noop : onPointerEvent(true),
-			onKeyDown: (event) => {
-				onKeyDown === null || onKeyDown === void 0 || onKeyDown(event);
-			},
-			onPointerEnter: isControlled ? noop : onPointerEvent(true),
-			onPointerLeave: isControlled ? noop : onPointerEvent(false),
-			ref: childrenRef,
-			tabIndex,
-			children
-		});
-	}, [
-		ariaHasPopup,
-		children,
-		containerFullHeight,
-		containerFullWidth,
-		generatedId,
-		isControlled,
-		onKeyDown,
-		onPointerEvent,
-		tabIndex
-	]);
-	const shouldRender = useMemo(() => {
-		if (!dynamicDomRendering) return true;
-		if (dynamicDomRendering && visibleInDom) return true;
-		return false;
-	}, [dynamicDomRendering, visibleInDom]);
-	if (!text) {
-		if (typeof children === "function") return null;
-		return children;
-	}
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [renderChildren(), shouldRender ? createPortal(/* @__PURE__ */ jsx("div", {
-		className: cn(className, popup({
-			hasArrow,
-			visibleInDom: dynamicDomRendering ? void 0 : visibleInDom
-		}), isAnimated ? animationPopup[reverseAnimation ? "reverse" : "notReverse"] : ""),
-		"data-testid": dataTestId,
-		"data-visible-in-dom": dynamicDomRendering ? void 0 : visibleInDom,
-		id: generatedId,
-		onClick: stopClickPropagation,
-		onKeyDown: role === "dialog" ? handleFocusTrap : void 0,
-		onPointerEnter: isControlled ? noop : onPointerEvent(true),
-		onPointerLeave: isControlled ? noop : onPointerEvent(false),
-		ref: innerPopupRef,
-		role,
-		style: _objectSpread2(_objectSpread2({}, assignInlineVars({
-			[arrowTop]: `${positions.arrowTop}`,
-			[arrowLeft]: `${positions.arrowLeft}px`,
-			[arrowTransform]: `${positions.arrowTransform} rotate(${positions.rotate}deg)`,
-			[popupPosition]: positions.popupPosition,
-			[animationDurationPopup]: `${animationDuration}ms`,
-			[popupInitialPosition]: positions.popupInitialPosition,
-			[maxWidthPopup]: typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth,
-			[maxHeightPopup]: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight
-		})), style),
-		children: /* @__PURE__ */ jsx("div", {
-			className: containerPopup({ hasMaxHeight: !!maxHeight }),
-			style: assignInlineVars({ [maxHeightPopup]: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight }),
-			children: text
-		})
-	}), popupPortalTarget) : null] });
+			ref: innerPopupRef,
+			role,
+			style: _objectSpread2(_objectSpread2({}, assignInlineVars({
+				[arrowTop]: `${positions.arrowTop}`,
+				[arrowLeft]: `${positions.arrowLeft}px`,
+				[arrowTransform]: `${positions.arrowTransform} rotate(${positions.rotate}deg)`,
+				[popupPosition]: positions.popupPosition,
+				[animationDurationPopup]: `${animationDuration}ms`,
+				[popupInitialPosition]: positions.popupInitialPosition,
+				[maxWidthPopup]: typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth,
+				[maxHeightPopup]: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight
+			})), style),
+			children: /* @__PURE__ */ jsx("div", {
+				className: popupStyle.container({ hasMaxHeight: !!maxHeight }),
+				style: assignInlineVars({ [maxHeightPopup]: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight }),
+				children: text
+			})
+		}), popupPortalTarget) : null] });
+	});
 });
 
 //#endregion
-export { Popup };
+init_Popup();
+export { Popup, init_Popup };