@ultraviolet/ui 3.9.0 → 3.10.0

package/dist/components/Popup/index.js

@@ -1,418 +1,351 @@
-"use client";
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+'use client';
+import { __name } from "../../_virtual/_rolldown/runtime.js";
+import { _objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.113.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 { cn } from "@ultraviolet/utils";
+import { forwardRef, startTransition, useCallback, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
-import { forwardRef, useRef, useImperativeHandle, useState, useId, useMemo, useCallback, startTransition, useLayoutEffect, useEffect } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
-import { isClientSide } from "../../helpers/isClientSide.js";
-import { DEFAULT_POSITIONS, computePositions } from "./helpers.js";
-import { childrenContainerPopup, containerPopup, popup, animationPopup } from "./styles.css.js";
-import { maxHeightPopup, maxWidthPopup, popupInitialPosition, animationDurationPopup, popupPosition, arrowTransform, arrowLeft, arrowTop } from "./variables.css.js";
+
+//#region src/components/Popup/index.tsx
 const DEFAULT_ANIMATION_DURATION = 230;
 const DEFAULT_DEBOUNCE_DURATION = 200;
-const noop = () => {
-};
+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;
-    }
-    return null;
-  }
-  if (typeof window !== "undefined") {
-    return document.body;
-  }
-  return null;
+	event.stopPropagation();
 };
-const Popup = forwardRef(
-  // oxlint-disable-next-line eslint/max-statements
-  ({
-    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({
-      ...DEFAULT_POSITIONS
-    });
-    const uniqueId = useId();
-    const generatedId = 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, align, popupPortalTarget]);
-    const onWindowChangeDetected = useCallback(() => {
-      if (innerPopupRef.current) {
-        innerPopupRef.current.style.animation = "none";
-      }
-      generatePopupPositions();
-    }, [generatePopupPositions, innerPopupRef]);
-    const unmountPopupFromDom = useCallback(() => {
-      setVisibleInDom(false);
-      setReverseAnimation(false);
-      window.removeEventListener("scroll", onWindowChangeDetected, true);
-    }, [onWindowChangeDetected]);
-    const closePopup = useCallback(() => {
-      const closeFunction = () => {
-        if (disableAnimation) {
-          onClose?.();
-          unmountPopupFromDom();
-        } else {
-          setReverseAnimation(true);
-          timer.current = setTimeout(() => {
-            onClose?.();
-            unmountPopupFromDom();
-          }, animationDuration);
-        }
-      };
-      if (disableAnimation) {
-        closeFunction();
-      } else {
-        debounceTimer.current = setTimeout(
-          () => {
-            closeFunction();
-          },
-          debounceDelay && !disableAnimation ? debounceDelay : 0
-        );
-      }
-    }, [
-      animationDuration,
-      disableAnimation,
-      debounceDelay,
-      onClose,
-      unmountPopupFromDom
-    ]);
-    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) {
-            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();
-      });
-      if (currentRef) {
-        resizeObserver.observe(currentRef);
-        mutationObserver.observe(currentRef, { characterData: true });
-      }
-      return () => {
-        if (currentRef) {
-          resizeObserver.unobserve(currentRef);
-          mutationObserver.disconnect();
-        }
-      };
-    }, [visibleInDom, generatePopupPositions]);
-    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;
-        }
-      };
-    }, [
-      generatePopupPositions,
-      onWindowChangeDetected,
-      visibleInDom,
-      maxWidth,
-      popupPortalTarget
-    ]);
-    useLayoutEffect(() => {
-      if (visibleInDom && innerPopupRef.current) {
-        innerPopupRef.current.style.opacity = "1";
-      }
-    }, [visibleInDom, positions]);
-    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?.contains(event.target) && !popupCurrent.contains(event.target)) {
-          event.preventDefault();
-          event.stopPropagation();
-          closePopup();
-        }
-      };
-      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
-    ]);
-    const handleFocusTrap = useCallback((event) => {
-      const isTabPressed = event.key === "Tab";
-      if (!isTabPressed) {
-        return;
-      }
-      event.stopPropagation();
-      const focusableEls = innerPopupRef.current?.querySelectorAll(
-        "a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled])"
-      );
-      if (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();
-        }
-      }
-    }, []);
-    useEffect(
-      () => () => {
-        if (timer.current) {
-          clearTimeout(timer.current);
-        }
-        if (debounceTimer.current) {
-          clearTimeout(debounceTimer.current);
-        }
-      },
-      []
-    );
-    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: childrenContainerPopup({
-            fullHeight: containerFullHeight,
-            fullWidth: containerFullWidth
-          }),
-          onBlur: isControlled ? noop : onPointerEvent(false),
-          onFocus: isControlled ? noop : onPointerEvent(true),
-          onKeyDown: (event) => {
-            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, { 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: {
-              ...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
-    ] });
-  }
-);
-export {
-  Popup
+const 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;
 };
+/**
+* @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,
+			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(() => {
+					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) {
+				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();
+		});
+		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;
+			}
+		};
+	}, [
+		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);
+		}
+		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();
+			}
+		}
+	}, []);
+	/**
+	* 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: 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] });
+});
+
+//#endregion
+export { Popup };