@ultraviolet/ui 1.51.1 → 1.51.2

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

@@ -0,0 +1,31 @@
+import type { RefObject } from 'react';
+export type PopupPlacement = 'top' | 'right' | 'bottom' | 'left' | 'auto';
+export declare const ARROW_WIDTH = 8;
+export declare const DEFAULT_POSITIONS: {
+    arrowLeft: number;
+    arrowTop: number;
+    arrowTransform: string;
+    placement: string;
+    rotate: number;
+    popupInitialPosition: string;
+    popupPosition: string;
+};
+type ComputePositionsTypes = {
+    placement: PopupPlacement;
+    childrenRef: RefObject<HTMLDivElement>;
+    popupRef: RefObject<HTMLDivElement>;
+    popupPortalTarget: HTMLElement;
+};
+/**
+ * This function will compute the positions of popup and arrow based on children position and popup size
+ */
+export declare const computePositions: ({ placement, childrenRef, popupRef, popupPortalTarget, }: ComputePositionsTypes) => {
+    arrowLeft: number;
+    arrowTop: number;
+    arrowTransform: string;
+    placement: string;
+    rotate: number;
+    popupInitialPosition: string;
+    popupPosition: string;
+};
+export {};

package/dist/components/Popup/helpers.js

@@ -0,0 +1,204 @@
+const ARROW_WIDTH = 8;
+const SPACE = 4;
+const TOTAL_USED_SPACE = 0;
+const DEFAULT_POSITIONS = {
+  arrowLeft: 0,
+  arrowTop: 0,
+  arrowTransform: "translate(-50%, -50)",
+  placement: "top",
+  rotate: 135,
+  popupInitialPosition: "translate3d(0px, 0px, 0)",
+  popupPosition: "translate3d(0px, 0px, 0)"
+};
+const computePlacement = ({
+  childrenStructuredRef,
+  popupStructuredRef,
+  offsetParentRect,
+  offsetParent,
+  popupPortalTarget
+}) => {
+  const {
+    top: childrenTop,
+    left: childrenLeft,
+    right: childrenRight,
+    width: childrenWidth
+  } = childrenStructuredRef;
+  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 (overloadedChildrenTop - popupHeight - TOTAL_USED_SPACE < 0) {
+    return "bottom";
+  }
+  if (overloadedChildrenLeft - popupWidth - TOTAL_USED_SPACE < 0) {
+    return "right";
+  }
+  if (overloadedChildrenRight + popupWidth + TOTAL_USED_SPACE > window.innerWidth) {
+    return "left";
+  }
+  return "top";
+};
+const findOffsetParent = (element) => {
+  const offsetParent = element?.current?.offsetParent;
+  if (offsetParent && !["TH", "TD", "TABLE"].includes(offsetParent.tagName)) {
+    return offsetParent;
+  }
+  let currentElement = element?.current;
+  while (currentElement && currentElement.tagName !== "BODY") {
+    const { position } = window.getComputedStyle(currentElement);
+    if (position !== "static") {
+      return currentElement;
+    }
+    currentElement = currentElement.parentElement;
+  }
+  return document.body;
+};
+const getPopupOverflowFromParent = (position, offsetParentRect, childrenRect, popupStructuredRef) => {
+  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 - ARROW_WIDTH;
+  const popupHalfHeightWithArrow = popupHeight / 2 - ARROW_WIDTH;
+  if (position === "top" || position === "bottom") {
+    const popupOverflowRight = childrenRight - childrenWidth / 2 + popupWidth / 2;
+    const popupOverflowLeft = childrenLeft + childrenWidth / 2 - parentLeft - popupWidth / 2;
+    if (popupOverflowRight > parentRight) {
+      if (Math.abs(popupOverflowRight - parentRight) > popupHalfWidthWithArrow) {
+        return -popupHalfWidthWithArrow;
+      }
+      return parentRight - popupOverflowRight;
+    }
+    if (popupOverflowLeft < 0) {
+      if (Math.abs(popupOverflowLeft) > popupHalfWidthWithArrow) {
+        return popupHalfWidthWithArrow;
+      }
+      return Math.abs(popupOverflowLeft);
+    }
+  }
+  if (position === "left" || position === "right") {
+    const popupOverflowTop = childrenTop - parentTop - popupHeight / 2;
+    if (popupOverflowTop < 0) {
+      if (Math.abs(childrenTop - parentTop - popupHalfHeightWithArrow) > popupHalfHeightWithArrow) {
+        return popupHalfHeightWithArrow;
+      }
+      return Math.abs(popupOverflowTop);
+    }
+    if (childrenBottom + popupHeight > window.innerHeight) {
+      return -popupHalfHeightWithArrow;
+    }
+  }
+  return 0;
+};
+const computePositions = ({
+  placement,
+  childrenRef,
+  popupRef,
+  popupPortalTarget
+}) => {
+  const childrenRect = childrenRef.current.getBoundingClientRect();
+  const offsetParent = findOffsetParent(childrenRef);
+  const offsetParentRect = offsetParent?.getBoundingClientRect() ?? {
+    top: 0,
+    left: 0,
+    right: 0
+  };
+  const popupStructuredRef = popupRef.current.getBoundingClientRect();
+  const placementBasedOnWindowSize = placement === "auto" ? computePlacement({
+    childrenStructuredRef: childrenRect,
+    popupStructuredRef,
+    offsetParentRect,
+    popupPortalTarget,
+    offsetParent
+  }) : placement;
+  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
+  );
+  switch (placementBasedOnWindowSize) {
+    case "bottom": {
+      const positionX = overloadedChildrenLeft + childrenWidth / 2 - popupWidth / 2;
+      const positionY = overloadedChildrenTop + scrollTopValue + childrenHeight + ARROW_WIDTH + SPACE;
+      return {
+        arrowLeft: popupWidth / 2 + popupOverflow * -1,
+        arrowTop: -ARROW_WIDTH - 5,
+        arrowTransform: "",
+        placement: "bottom",
+        rotate: 180,
+        popupInitialPosition: `translate3d(${positionX + popupOverflow}px, ${positionY - TOTAL_USED_SPACE}px, 0)`,
+        popupPosition: `translate3d(${positionX + popupOverflow}px, ${positionY}px, 0)`
+      };
+    }
+    case "left": {
+      const positionX = overloadedChildrenLeft - popupWidth - ARROW_WIDTH - SPACE * 2;
+      const positionY = overloadedChildrenTop + scrollTopValue - popupHeight / 2 + childrenHeight / 2;
+      return {
+        arrowLeft: popupWidth + ARROW_WIDTH + 5,
+        arrowTop: popupHeight / 2 + popupOverflow * -1,
+        arrowTransform: "translate(-50%, -50%)",
+        placement: "left",
+        rotate: -90,
+        popupInitialPosition: `translate3d(${positionX + TOTAL_USED_SPACE}px, ${positionY + popupOverflow}px, 0)`,
+        popupPosition: `translate3d(${positionX}px, ${positionY + popupOverflow}px, 0)`
+      };
+    }
+    case "right": {
+      const positionX = overloadedChildrenRight + ARROW_WIDTH + SPACE * 2;
+      const positionY = overloadedChildrenTop + scrollTopValue - popupHeight / 2 + childrenHeight / 2;
+      return {
+        arrowLeft: -ARROW_WIDTH - 5,
+        arrowTop: popupHeight / 2 + popupOverflow * -1,
+        arrowTransform: "translate(50%, -50%)",
+        placement: "right",
+        rotate: 90,
+        popupInitialPosition: `translate3d(${positionX - TOTAL_USED_SPACE}px, ${positionY + popupOverflow}px, 0)`,
+        popupPosition: `translate3d(${positionX}px, ${positionY + popupOverflow}px, 0)`
+      };
+    }
+    default: {
+      const positionX = overloadedChildrenLeft + childrenWidth / 2 - popupWidth / 2;
+      const positionY = overloadedChildrenTop + scrollTopValue - popupHeight - ARROW_WIDTH - SPACE;
+      return {
+        arrowLeft: popupWidth / 2 + popupOverflow * -1,
+        arrowTop: popupHeight - 1,
+        arrowTransform: "",
+        placement: "top",
+        rotate: 0,
+        popupInitialPosition: `translate3d(${positionX + popupOverflow}px, ${positionY + TOTAL_USED_SPACE}px, 0)`,
+        popupPosition: `translate3d(${positionX + popupOverflow}px, ${positionY}px, 0)`
+      };
+    }
+  }
+};
+export {
+  ARROW_WIDTH,
+  DEFAULT_POSITIONS,
+  computePositions
+};

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

@@ -0,0 +1,72 @@
+import type { HTMLAttributes, KeyboardEventHandler, ReactNode, Ref, RefObject } from 'react';
+import type { PopupPlacement } from './helpers';
+type PopupProps = {
+    /**
+     * Id is automatically generated if not set. It is used for associating popup wrapper with popup portal.
+     */
+    id?: string;
+    children: ReactNode | ((renderProps: {
+        className?: string;
+        onBlur: () => void;
+        onFocus: () => void;
+        onPointerEnter: () => void;
+        onPointerLeave: () => void;
+        ref: RefObject<HTMLDivElement>;
+    }) => ReactNode);
+    maxWidth?: number | string;
+    /**
+     * `auto` placement will change the position of the popup if it doesn't fit in the viewport.
+     */
+    placement?: PopupPlacement;
+    /**
+     * Content of the popup, preferably text inside.
+     */
+    text?: ReactNode;
+    className?: string;
+    /**
+     * It will add `width: 100%` to the popup container.
+     */
+    containerFullWidth?: boolean;
+    /**
+     * It will force display popup. This can be useful if you need to always display the popup without hover needed.
+     */
+    visible?: boolean;
+    innerRef?: Ref<HTMLDivElement | null>;
+    role?: string;
+    'data-testid'?: string;
+    hasArrow?: boolean;
+    onClose?: () => void;
+    tabIndex?: number;
+    onKeyDown?: KeyboardEventHandler;
+    'aria-haspopup'?: HTMLAttributes<HTMLDivElement>['aria-haspopup'];
+    hideOnClickOutside?: boolean;
+    /**
+     * If you set debounceTime to false, the popup will not debounce the hover event and will be displayed instantly.
+     * If set to 0 it will disable debounce.
+     */
+    debounceDelay?: number;
+    /**
+     * If you set a max height keep in mind that the animation is disabled, or it will not work properly on some browsers.
+     */
+    maxHeight?: string | number;
+    /**
+     * Will remove the animation on the popup if set to false.
+     */
+    disableAnimation?: boolean;
+    /**
+     * By default, the portal target is children container or document.body if children is a function. You can override this
+     * behavior by setting a portalTarget prop.
+     */
+    portalTarget?: HTMLElement;
+    /**
+     * If you set this to true, the popup will be rendered in the DOM only when it is visible.
+     * When set to false, the popup will always be rendered in the DOM. By default this value is set to `true`, if for some
+     * reason you need to disable it, you can set it to `false`.
+     */
+    dynamicDomRendering?: boolean;
+};
+/**
+ * @experimental This component is experimental and may be subject to breaking changes in the future.
+ */
+export declare const Popup: import("react").ForwardRefExoticComponent<PopupProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/Popup/index.js

@@ -0,0 +1,385 @@
+import { jsx, Fragment, jsxs } from "@emotion/react/jsx-runtime";
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { forwardRef, useRef, useImperativeHandle, useMemo, useState, useId, useCallback, useEffect } from "react";
+import { createPortal } from "react-dom";
+import { animation, exitAnimation } from "./animations.js";
+import { ARROW_WIDTH, DEFAULT_POSITIONS, computePositions } from "./helpers.js";
+const DEFAULT_ANIMATION_DURATION = 230;
+const DEFAULT_DEBOUNCE_DURATION = 200;
+function noop() {
+}
+const StyledPopup = styled("div", {
+  shouldForwardProp: (prop) => ![
+    "maxWidth",
+    "positions",
+    "reverseAnimation",
+    "maxHeight",
+    "animationDuration",
+    "isDialog"
+  ].includes(prop)
+})`
+  background: ${({ theme }) => theme.colors.neutral.backgroundStronger};
+  color: ${({ theme }) => theme.colors.neutral.textStronger};
+  border-radius: ${({ theme }) => theme.radii.default};
+  padding: ${({ theme }) => `${theme.space["0.5"]} ${theme.space["1"]}`};
+  text-align: center;
+  position: absolute;
+  max-width: ${({ maxWidth }) => typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth};
+  max-height: ${({ maxHeight }) => typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight};
+  overflow: ${({ maxHeight }) => maxHeight ? "auto" : void 0};
+  overflow-wrap: break-word;
+  font-size: 0.8rem;
+  inset: 0 auto auto 0;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  z-index: 1;
+  transform: ${({ positions }) => positions.popupPosition};
+  animation: ${({
+  positions,
+  reverseAnimation,
+  maxHeight,
+  animationDuration
+}) => maxHeight || animationDuration === 0 || animationDuration === void 0 ? void 0 : css`
+          ${animationDuration}ms ${!reverseAnimation ? animation(positions) : exitAnimation(positions)} forwards
+        `};
+
+  &[data-has-arrow='true'] {
+    &::after {
+      content: ' ';
+      position: absolute;
+      top: ${({ positions }) => positions.arrowTop}px;
+      left: ${({ positions }) => positions.arrowLeft}px;
+      transform: ${({ positions }) => positions.arrowTransform}
+        rotate(${({ positions }) => positions.rotate}deg);
+      margin-left: -${ARROW_WIDTH}px;
+      border-width: ${ARROW_WIDTH}px;
+      border-style: solid;
+      border-color: ${({ theme }) => theme.colors.neutral.backgroundStronger}
+        transparent transparent transparent;
+      pointer-events: none;
+    }
+  }
+
+  &[data-visible-in-dom='false'] {
+    display: none;
+  }
+`;
+const StyledChildrenContainer = styled.div`
+  display: inherit;
+
+  &[data-container-full-width='true'] {
+    width: 100%;
+  }
+`;
+const Popup = forwardRef(
+  ({
+    children,
+    text = "",
+    placement = "auto",
+    id,
+    className,
+    containerFullWidth,
+    maxWidth = 232,
+    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
+  }, ref) => {
+    const childrenRef = useRef(null);
+    useImperativeHandle(innerRef, () => childrenRef.current);
+    const innerPopupRef = useRef(null);
+    useImperativeHandle(ref, () => innerPopupRef.current);
+    const timer = useRef();
+    const popupPortalTarget = useMemo(() => {
+      if (portalTarget)
+        return portalTarget;
+      if (role === "dialog") {
+        if (childrenRef.current)
+          return childrenRef.current;
+        if (typeof window !== "undefined")
+          return document.body;
+        return null;
+      }
+      if (typeof window !== "undefined") {
+        return document.body;
+      }
+      return null;
+    }, [portalTarget, role, childrenRef.current]);
+    const animationDuration = disableAnimation || maxHeight ? 0 : DEFAULT_ANIMATION_DURATION;
+    const debounceTimer = useRef();
+    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 generatePopupPositions = useCallback(() => {
+      if (childrenRef.current && innerPopupRef.current) {
+        setPositions(
+          computePositions({
+            childrenRef,
+            placement,
+            popupRef: innerPopupRef,
+            popupPortalTarget
+          })
+        );
+      }
+    }, [placement, 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(() => {
+      debounceTimer.current = setTimeout(
+        () => {
+          setReverseAnimation(true);
+          timer.current = setTimeout(() => {
+            unmountPopupFromDom();
+            onClose?.();
+          }, animationDuration);
+        },
+        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 {
+            setVisibleInDom(true);
+          }
+        }
+      },
+      [closePopup, debounceDelay, visible]
+    );
+    useEffect(() => {
+      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
+    ]);
+    useEffect(
+      () => {
+        if (visibleInDom && innerPopupRef.current) {
+          innerPopupRef.current.style.opacity = "1";
+        }
+      },
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [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) {
+          if (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();
+      }
+      const firstFocusableEl = focusableEls[0];
+      const lastFocusableEl = focusableEls[focusableEls.length - 1];
+      if (event.shiftKey) {
+        if (document.activeElement === firstFocusableEl || document.activeElement === innerPopupRef.current) {
+          lastFocusableEl.focus();
+          event.preventDefault();
+        }
+      } else if (document.activeElement === lastFocusableEl || document.activeElement === innerPopupRef.current) {
+        firstFocusableEl.focus();
+        event.preventDefault();
+      }
+    }, []);
+    const renderChildren = useCallback(() => {
+      if (typeof children === "function") {
+        return children({
+          onBlur: !isControlled ? onPointerEvent(false) : noop,
+          onFocus: !isControlled ? onPointerEvent(true) : noop,
+          onPointerEnter: !isControlled ? onPointerEvent(true) : noop,
+          onPointerLeave: !isControlled ? onPointerEvent(false) : noop,
+          ref: childrenRef
+        });
+      }
+      return /* @__PURE__ */ jsx(
+        StyledChildrenContainer,
+        {
+          "aria-describedby": generatedId,
+          "aria-controls": generatedId,
+          onBlur: !isControlled ? onPointerEvent(false) : noop,
+          onFocus: !isControlled ? onPointerEvent(true) : noop,
+          onPointerEnter: !isControlled ? onPointerEvent(true) : noop,
+          onPointerLeave: !isControlled ? onPointerEvent(false) : noop,
+          ref: childrenRef,
+          tabIndex,
+          onKeyDown: (event) => {
+            onKeyDown?.(event);
+          },
+          "data-container-full-width": containerFullWidth,
+          "aria-haspopup": ariaHasPopup,
+          children
+        }
+      );
+    }, [
+      ariaHasPopup,
+      children,
+      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 /* @__PURE__ */ jsx(Fragment, { children });
+    }
+    const stopClickPropagation = (event) => {
+      event.nativeEvent.stopImmediatePropagation();
+    };
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      renderChildren(),
+      shouldRender ? createPortal(
+        /* @__PURE__ */ jsx(
+          StyledPopup,
+          {
+            ref: innerPopupRef,
+            positions,
+            maxWidth,
+            maxHeight,
+            role,
+            id: generatedId,
+            className,
+            reverseAnimation,
+            "data-testid": dataTestId,
+            "data-has-arrow": hasArrow,
+            onClick: stopClickPropagation,
+            onPointerEnter: !isControlled ? onPointerEvent(true) : noop,
+            onPointerLeave: !isControlled ? onPointerEvent(false) : noop,
+            animationDuration,
+            onKeyDown: role === "dialog" ? handleFocusTrap : void 0,
+            isDialog: role === "dialog",
+            "data-visible-in-dom": !dynamicDomRendering ? visibleInDom : void 0,
+            children: text
+          }
+        ),
+        popupPortalTarget
+      ) : null
+    ] });
+  }
+);
+export {
+  Popup
+};