@ultraviolet/ui 1.24.2 → 1.26.0

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

@@ -1,57 +1,75 @@
 const ARROW_WIDTH = 8; // in px
 const SPACE = 4; // in px
-const TOTAL_USED_SPACE = ARROW_WIDTH + SPACE; // in px
+const TOTAL_USED_SPACE = 0; // in px
 const DEFAULT_POSITIONS = {
   arrowLeft: -999,
   arrowTop: -999,
   arrowTransform: 'translate(-50%, -50)',
   placement: 'top',
   rotate: 135,
-  tooltipInitialPosition: 'translate3d(-999px, -999px, 0)',
-  tooltipPosition: 'translate3d(-999px, -999px, 0)'
+  popupInitialPosition: 'translate3d(-999px, -999px, 0)',
+  popupPosition: 'translate3d(-999px, -999px, 0)'
 };
 /**
- * This function will find the best placement in a window for tooltip based on children position and tooltip size
+ * This function will find the best placement in a window for popup based on children position and popup size
  */
 const computePlacement = _ref => {
   let {
     childrenStructuredRef,
-    tooltipStructuredRef
+    popupStructuredRef,
+    offsetParentRect,
+    popupPortalTarget
   } = _ref;
   const {
-    top: childrenX,
-    left: childrenY,
+    top: childrenTop,
+    left: childrenLeft,
     right: childrenRight
   } = childrenStructuredRef;
   const {
-    width: tooltipWidth,
-    height: tooltipHeight
-  } = tooltipStructuredRef;
-  if (childrenX - tooltipHeight - TOTAL_USED_SPACE < 0) {
+    top: parentTop,
+    left: parentLeft,
+    right: parentRight
+  } = offsetParentRect;
+  const overloadedChildrenLeft = popupPortalTarget === document.body ? childrenLeft : childrenLeft - parentLeft;
+  const overloadedChildrenTop = popupPortalTarget === document.body ? childrenTop : childrenTop - parentTop;
+  const overloadedChildrenRight = popupPortalTarget === document.body ? childrenRight : childrenRight - parentRight;
+  const {
+    width: popupWidth,
+    height: popupHeight
+  } = popupStructuredRef;
+  if (overloadedChildrenTop - popupHeight - TOTAL_USED_SPACE < 0) {
     return 'bottom';
   }
-  if (childrenY - tooltipWidth - TOTAL_USED_SPACE < 0) {
+  if (overloadedChildrenLeft - popupWidth - TOTAL_USED_SPACE < 0) {
     return 'right';
   }
-  if (childrenRight + tooltipWidth + TOTAL_USED_SPACE > window.innerWidth) {
+  if (overloadedChildrenRight + popupWidth + TOTAL_USED_SPACE > window.innerWidth) {
     return 'left';
   }
   return 'top';
 };
 /**
- * This function will compute the positions of tooltip and arrow based on children position and tooltip size
+ * This function will compute the positions of popup and arrow based on children position and popup size
  */
 const computePositions = _ref2 => {
   let {
     placement,
     childrenRef,
-    tooltipRef
+    popupRef,
+    popupPortalTarget
   } = _ref2;
   const childrenStructuredRef = childrenRef.current.getBoundingClientRect();
-  const tooltipStructuredRef = tooltipRef.current.getBoundingClientRect();
+  const offsetParentRect = childrenRef?.current?.offsetParent?.getBoundingClientRect() ?? {
+    top: 0,
+    left: 0,
+    right: 0
+  };
+  const popupStructuredRef = popupRef.current.getBoundingClientRect();
   const placementBasedOnWindowSize = placement === 'auto' ? computePlacement({
     childrenStructuredRef,
-    tooltipStructuredRef
+    popupStructuredRef,
+    offsetParentRect: offsetParentRect,
+    popupPortalTarget
   }) : placement;
   const {
     top: childrenTop,
@@ -61,68 +79,78 @@ const computePositions = _ref2 => {
     height: childrenHeight
   } = childrenStructuredRef;
   const {
-    width: tooltipWidth,
-    height: tooltipHeight
-  } = tooltipStructuredRef;
+    top: parentTop,
+    left: parentLeft,
+    right: parentRight
+  } = offsetParentRect;
+  const {
+    width: popupWidth,
+    height: popupHeight
+  } = popupStructuredRef;
+
+  // It will get how much scroll is done on the page to compute the position of the popup
+  const scrollTopValue = popupPortalTarget === document.body ? document.documentElement.scrollTop : 0;
 
-  // It will get how much scroll is done on the page to compute the position of the tooltip
-  const scrollTopValue = document.documentElement.scrollTop;
+  // We need to compute the position of the popup based on the parent element in the case the popup is not in the body
+  const overloadedChildrenLeft = popupPortalTarget === document.body ? childrenLeft : childrenLeft - parentLeft;
+  const overloadedChildrenTop = popupPortalTarget === document.body ? childrenTop : childrenTop - parentTop;
+  const overloadedChildrenRight = popupPortalTarget === document.body ? childrenRight : childrenRight + childrenWidth + ARROW_WIDTH + SPACE - parentRight / 2;
   switch (placementBasedOnWindowSize) {
     case 'bottom':
       {
-        const positionX = childrenLeft + childrenWidth / 2 - tooltipWidth / 2;
-        const positionY = childrenTop + scrollTopValue + childrenHeight + ARROW_WIDTH + SPACE;
+        const positionX = overloadedChildrenLeft + childrenWidth / 2 - popupWidth / 2;
+        const positionY = overloadedChildrenTop + scrollTopValue + childrenHeight + ARROW_WIDTH + SPACE;
         return {
-          arrowLeft: tooltipWidth / 2,
+          arrowLeft: popupWidth / 2,
           arrowTop: -ARROW_WIDTH - 5,
           arrowTransform: '',
           placement: 'bottom',
           rotate: 180,
-          tooltipInitialPosition: `translate3d(${positionX}px, ${positionY - TOTAL_USED_SPACE}px, 0)`,
-          tooltipPosition: `translate3d(${positionX}px, ${positionY}px, 0)`
+          popupInitialPosition: `translate3d(${positionX}px, ${positionY - TOTAL_USED_SPACE}px, 0)`,
+          popupPosition: `translate3d(${positionX}px, ${positionY}px, 0)`
         };
       }
     case 'left':
       {
-        const positionX = childrenLeft - tooltipWidth - ARROW_WIDTH - SPACE * 2;
-        const positionY = childrenTop + scrollTopValue - tooltipHeight / 2 + childrenHeight / 2;
+        const positionX = overloadedChildrenLeft - popupWidth - ARROW_WIDTH - SPACE * 2;
+        const positionY = overloadedChildrenTop + scrollTopValue - popupHeight / 2 + childrenHeight / 2;
         return {
-          arrowLeft: tooltipWidth + ARROW_WIDTH + 5,
-          arrowTop: tooltipHeight / 2,
+          arrowLeft: popupWidth + ARROW_WIDTH + 5,
+          arrowTop: popupHeight / 2,
           arrowTransform: 'translate(-50%, -50%)',
           placement: 'left',
           rotate: -90,
-          tooltipInitialPosition: `translate3d(${positionX + TOTAL_USED_SPACE}px, ${positionY}px, 0)`,
-          tooltipPosition: `translate3d(${positionX}px, ${positionY}px, 0)`
+          popupInitialPosition: `translate3d(${positionX + TOTAL_USED_SPACE}px, ${positionY}px, 0)`,
+          popupPosition: `translate3d(${positionX}px, ${positionY}px, 0)`
         };
       }
     case 'right':
       {
-        const positionX = childrenRight + ARROW_WIDTH + SPACE * 2;
-        const positionY = childrenTop + scrollTopValue - tooltipHeight / 2 + childrenHeight / 2;
+        const positionX = overloadedChildrenRight + ARROW_WIDTH + SPACE * 2;
+        const positionY = overloadedChildrenTop + scrollTopValue - popupHeight / 2 + childrenHeight / 2;
         return {
           arrowLeft: -ARROW_WIDTH - 5,
-          arrowTop: tooltipHeight / 2,
+          arrowTop: popupHeight / 2,
           arrowTransform: 'translate(50%, -50%)',
           placement: 'right',
           rotate: 90,
-          tooltipInitialPosition: `translate3d(${positionX - TOTAL_USED_SPACE}px, ${positionY}px, 0)`,
-          tooltipPosition: `translate3d(${positionX}px, ${positionY}px, 0)`
+          popupInitialPosition: `translate3d(${positionX - TOTAL_USED_SPACE}px, ${positionY}px, 0)`,
+          popupPosition: `translate3d(${positionX}px, ${positionY}px, 0)`
         };
       }
     default:
       {
         // top placement is default value
-        const positionX = childrenLeft + childrenWidth / 2 - tooltipWidth / 2;
-        const positionY = childrenTop + scrollTopValue - tooltipHeight - ARROW_WIDTH - SPACE;
+        const positionX = overloadedChildrenLeft + childrenWidth / 2 - popupWidth / 2;
+        const positionY = overloadedChildrenTop + scrollTopValue - popupHeight - ARROW_WIDTH - SPACE;
         return {
-          arrowLeft: tooltipWidth / 2,
-          arrowTop: tooltipHeight - 1,
+          arrowLeft: popupWidth / 2,
+          arrowTop: popupHeight - 1,
           arrowTransform: '',
           placement: 'top',
           rotate: 0,
-          tooltipInitialPosition: `translate3d(${positionX}px, ${positionY + TOTAL_USED_SPACE}px, 0)`,
-          tooltipPosition: `translate3d(${positionX}px, ${positionY}px, 0)`
+          popupInitialPosition: `translate3d(${positionX}px, ${positionY + TOTAL_USED_SPACE}px, 0)`,
+          popupPosition: `translate3d(${positionX}px, ${positionY}px, 0)`
         };
       }
   }

package/dist/src/components/Popup/index.js

@@ -1,36 +1,18 @@
 import _styled from '@emotion/styled/base';
-import { css, keyframes } from '@emotion/react';
-import { forwardRef, useRef, useImperativeHandle, useState, useId, useCallback, useEffect } from 'react';
+import { css } from '@emotion/react';
+import { forwardRef, useRef, useImperativeHandle, useMemo, useState, useId, useCallback, useEffect } from 'react';
 import { createPortal } from 'react-dom';
+import { animation, exitAnimation } from './animations.js';
 import { DEFAULT_POSITIONS, computePositions, ARROW_WIDTH } from './helpers.js';
 import { jsx, Fragment, jsxs } from '@emotion/react/jsx-runtime';
 
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 const DEFAULT_ANIMATION_DURATION = 230; // in ms
-const DEFAULT_DEBOUNCE_DURATION = 200;
+const DEFAULT_DEBOUNCE_DURATION = 200; // in ms
+
 function noop() {}
-const animation = positions => keyframes`
-  0% {
-    opacity: 0;
-    transform: ${positions.tooltipInitialPosition};
-  }
-  100% {
-    opacity: 1;
-    transform: ${positions.tooltipPosition};
-  }
-`;
-const exitAnimation = positions => keyframes`
-  0% {
-    opacity: 1;
-    transform: ${positions.tooltipPosition};
-  }
-  100% {
-    opacity: 0;
-    transform: ${positions.tooltipInitialPosition};
-  }
-`;
-const StyledTooltip = /*#__PURE__*/_styled('div', {
-  shouldForwardProp: prop => !['maxWidth', 'positions', 'reverseAnimation', 'maxHeight', 'animationDuration'].includes(prop),
+const StyledPopup = /*#__PURE__*/_styled('div', {
+  shouldForwardProp: prop => !['maxWidth', 'positions', 'reverseAnimation', 'maxHeight', 'animationDuration', 'isDialog'].includes(prop),
   target: "e4h1g861"
 })("background:", _ref => {
   let {
@@ -67,11 +49,11 @@ const StyledTooltip = /*#__PURE__*/_styled('div', {
     maxHeight
   } = _ref7;
   return maxHeight ? 'auto' : undefined;
-}, ";overflow-wrap:break-word;font-size:0.8rem;inset:0 auto auto 0;top:0;left:0;transform:", _ref8 => {
+}, ";overflow-wrap:break-word;font-size:0.8rem;inset:0 auto auto 0;top:0;left:0;z-index:1;transform:", _ref8 => {
   let {
     positions
   } = _ref8;
-  return positions.tooltipPosition;
+  return positions.popupPosition;
 }, ";animation:", _ref9 => {
   let {
     positions,
@@ -131,7 +113,7 @@ const Popup = /*#__PURE__*/forwardRef((_ref15, ref) => {
     maxHeight,
     visible,
     innerRef,
-    role = 'tooltip',
+    role = 'popup',
     'data-testid': dataTestId,
     hasArrow = true,
     onClose,
@@ -140,18 +122,34 @@ const Popup = /*#__PURE__*/forwardRef((_ref15, ref) => {
     'aria-haspopup': ariaHasPopup,
     hideOnClickOutside = false,
     needDebounce = true,
-    disableAnimation = false
+    disableAnimation = false,
+    portalTarget
   } = _ref15;
   const childrenRef = useRef(null);
   useImperativeHandle(innerRef, () => childrenRef.current);
-  const innerTooltipRef = useRef(null);
-  useImperativeHandle(ref, () => innerTooltipRef.current);
+  const innerPopupRef = useRef(null);
+  useImperativeHandle(ref, () => innerPopupRef.current);
   const timer = useRef();
+  const popupPortalTarget = useMemo(() => {
+    if (role === 'dialog') {
+      if (portalTarget) return portalTarget;
+      if (childrenRef.current) return childrenRef.current;
+      if (typeof window !== 'undefined') return document.body;
+      return null;
+    }
+
+    // We check if window exists for SSR
+    if (typeof window !== 'undefined') {
+      return document.body;
+    }
+    return null;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [portalTarget, role, childrenRef.current]);
 
   // There are some issue when mixing animation and maxHeight on some browsers, so we disable animation if maxHeight is set.
   const animationDuration = disableAnimation || maxHeight ? 0 : DEFAULT_ANIMATION_DURATION;
 
-  // Debounce timer will be used to prevent the tooltip from flickering when the user moves the mouse out and in the children element.
+  // Debounce timer will be used to prevent the popup from flickering when the user moves the mouse out and in the children element.
   const debounceTimer = useRef();
   const [visibleInDom, setVisibleInDom] = useState(false);
   const [reverseAnimation, setReverseAnimation] = useState(false);
@@ -161,70 +159,71 @@ const Popup = /*#__PURE__*/forwardRef((_ref15, ref) => {
   const uniqueId = useId();
   const generatedId = id ?? uniqueId;
   const isControlled = visible !== undefined;
-  const generatePositions = useCallback(() => {
-    if (childrenRef.current && innerTooltipRef.current) {
+  const generatePopupPositions = useCallback(() => {
+    if (childrenRef.current && innerPopupRef.current) {
       setPositions(computePositions({
         childrenRef,
         placement,
-        tooltipRef: innerTooltipRef
+        popupRef: innerPopupRef,
+        popupPortalTarget: popupPortalTarget
       }));
     }
-  }, [innerTooltipRef, placement]);
+  }, [placement, popupPortalTarget]);
 
   /**
-   * This function is called when we need to recompute positions of tooltip due to window scroll or resize.
+   * This function is called when we need to recompute positions of popup due to window scroll or resize.
    */
   const onWindowChangeDetected = useCallback(() => {
     // We remove animation on scroll or the animation will restart on every scroll
-    if (innerTooltipRef.current) {
-      innerTooltipRef.current.style.animation = 'none';
+    if (innerPopupRef.current) {
+      innerPopupRef.current.style.animation = 'none';
     }
-    generatePositions();
-  }, [generatePositions, innerTooltipRef]);
+    generatePopupPositions();
+  }, [generatePopupPositions, innerPopupRef]);
 
   /**
-   * This function is called when we need to remove tooltip portal from DOM and remove event listener to it.
+   * This function is called when we need to remove popup portal from DOM and remove event listener to it.
    */
-  const unmountTooltip = useCallback(() => {
+  const unmountPopupFromDom = useCallback(() => {
     setVisibleInDom(false);
     setReverseAnimation(false);
     window.removeEventListener('scroll', onWindowChangeDetected, true);
   }, [onWindowChangeDetected]);
 
   /**
-   * This function is called when we need to hide tooltip. A timeout is set to allow animation end, then remove
-   * tooltip from dom.
+   * This function is called when we need to hide popup. A timeout is set to allow animation end, then remove
+   * popup from dom.
    */
-  const hideTooltip = useCallback(() => {
+  const closePopup = useCallback(() => {
     debounceTimer.current = setTimeout(() => {
       setReverseAnimation(true);
       timer.current = setTimeout(() => {
-        unmountTooltip();
+        unmountPopupFromDom();
         onClose?.();
       }, animationDuration);
     }, needDebounce && !disableAnimation ? DEFAULT_DEBOUNCE_DURATION : 0);
-  }, [animationDuration, disableAnimation, needDebounce, onClose, unmountTooltip]);
+  }, [animationDuration, disableAnimation, needDebounce, onClose, unmountPopupFromDom]);
 
   /**
-   * When mouse hover or stop hovering children this function display or hide tooltip. A timeout is set to allow animation
-   * end, then remove tooltip from dom.
+   * 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 => () => {
-    // This condition is for when we want to unmount the tooltip
-    // There is debounce in order to avoid tooltip to flicker when we move the mouse from children to tooltip
+    // This condition is for when we want to unmount the popup
+    // There is debounce in order to avoid popup to flicker when we move the mouse from children to popup
     // Timer is used to follow the animation duration
-    if (!isVisible && innerTooltipRef.current && !debounceTimer.current) {
-      hideTooltip();
+    if (!isVisible && innerPopupRef.current && !debounceTimer.current) {
+      closePopup();
     } else if (isVisible) {
-      // This condition is for when we want to mount the tooltip
-      // If the timer exists it means the tooltip was about to umount, but we hovered the children again,
-      // so we clear the timer and the tooltip will not be unmounted
+      // This condition is for when we want to mount the popup
+      // If the timer exists it means the popup was about to umount, but we hovered the children again,
+      // so we clear the timer and the popup will not be unmounted
       if (timer.current) {
         setReverseAnimation(false);
         clearTimeout(timer.current);
         timer.current = undefined;
       }
-      // And here is when we currently are in a debounce timer, it means tooltip was hovered during
+      // And here is when we currently are in a debounce timer, it means popup was hovered during
       // that period, and so we can clear debounce timer
       if (debounceTimer.current) {
         clearTimeout(debounceTimer.current);
@@ -232,20 +231,21 @@ const Popup = /*#__PURE__*/forwardRef((_ref15, ref) => {
       }
       setVisibleInDom(true);
     }
-  }, [hideTooltip, innerTooltipRef]);
+  }, [closePopup, innerPopupRef]);
 
   /**
-   * Once tooltip is visible in the dom we can compute positions, then set it visible on screen and add event to
+   * 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.
    */
   useEffect(() => {
     if (visibleInDom) {
-      generatePositions();
-
-      // We want to detect scroll and resize in order to recompute positions of tooltip
-      // Adding true as third parameter to event listener will detect nested scrolls.
-      window.addEventListener('scroll', onWindowChangeDetected, true);
-      window.addEventListener('resize', onWindowChangeDetected, true);
+      generatePopupPositions();
+      if (popupPortalTarget === document.body) {
+        // We want to detect scroll and resize in order to recompute positions of popup
+        // Adding true as third parameter to event listener will detect nested scrolls.
+        window.addEventListener('scroll', onWindowChangeDetected, true);
+        window.addEventListener('resize', onWindowChangeDetected, true);
+      }
     }
     return () => {
       window.removeEventListener('scroll', onWindowChangeDetected, true);
@@ -255,22 +255,17 @@ const Popup = /*#__PURE__*/forwardRef((_ref15, ref) => {
         timer.current = undefined;
       }
     };
-  }, [generatePositions, onWindowChangeDetected, visibleInDom, maxWidth]);
+  }, [generatePopupPositions, onWindowChangeDetected, visibleInDom, maxWidth, popupPortalTarget]);
 
   /**
-   * If tooltip has `visible` prop it means the tooltip is manually controlled through this prop.
-   * In this cas we don't want to display tooltip on hover, but only when `visible` is true.
+   * 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]);
-  const onLocalKeyDown = useCallback(event => {
-    if (event.code === 'Escape') {
-      unmountTooltip();
-    }
-  }, [unmountTooltip]);
 
   // Handle hide on esc press and hide on click outside
   useEffect(() => {
@@ -278,17 +273,17 @@ const Popup = /*#__PURE__*/forwardRef((_ref15, ref) => {
       if (event.key === 'Escape') {
         event.preventDefault();
         event.stopPropagation();
-        hideTooltip();
+        closePopup();
       }
     };
     const handleClickOutside = event => {
-      const tooltipCurrent = innerTooltipRef.current;
+      const popupCurrent = innerPopupRef.current;
       const childrenCurrent = childrenRef.current;
-      if (tooltipCurrent && hideOnClickOutside && !event.defaultPrevented) {
-        if (event.target && event.target !== tooltipCurrent && event.target !== childrenCurrent && !childrenCurrent?.contains(event.target) && !tooltipCurrent.contains(event.target)) {
+      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();
-          hideTooltip();
+          closePopup();
         }
       }
     };
@@ -300,7 +295,35 @@ const Popup = /*#__PURE__*/forwardRef((_ref15, ref) => {
       document.body.removeEventListener('keyup', handleEscPress);
       document.body.removeEventListener('click', handleClickOutside);
     };
-  }, [hideTooltip, visibleInDom, innerTooltipRef, childrenRef, hideOnClickOutside]);
+  }, [closePopup, visibleInDom, innerPopupRef, childrenRef, hideOnClickOutside]);
+
+  /**
+   * This event will occur only for dialog and will trap focus inside the dialog.
+   */
+  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])') ?? [];
+
+    // Handle case when no interactive element are within the modal (including close icon)
+    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();
+    }
+  }, []);
 
   /**
    * Will render children conditionally if children is a function or not.
@@ -326,13 +349,12 @@ const Popup = /*#__PURE__*/forwardRef((_ref15, ref) => {
       tabIndex: tabIndex,
       onKeyDown: event => {
         onKeyDown?.(event);
-        onLocalKeyDown(event);
       },
       "data-container-full-width": containerFullWidth,
       "aria-haspopup": ariaHasPopup,
       children: children
     });
-  }, [ariaHasPopup, children, containerFullWidth, generatedId, isControlled, onKeyDown, onLocalKeyDown, onPointerEvent, tabIndex]);
+  }, [ariaHasPopup, children, containerFullWidth, generatedId, isControlled, onKeyDown, onPointerEvent, tabIndex]);
   if (!text) {
     if (typeof children === 'function') return null;
     return jsx(Fragment, {
@@ -347,8 +369,8 @@ const Popup = /*#__PURE__*/forwardRef((_ref15, ref) => {
     event.nativeEvent.stopImmediatePropagation();
   };
   return jsxs(Fragment, {
-    children: [renderChildren(), visibleInDom ? /*#__PURE__*/createPortal(jsx(StyledTooltip, {
-      ref: innerTooltipRef,
+    children: [renderChildren(), visibleInDom ? /*#__PURE__*/createPortal(jsx(StyledPopup, {
+      ref: innerPopupRef,
       positions: positions,
       maxWidth: maxWidth,
       maxHeight: maxHeight,
@@ -360,8 +382,10 @@ const Popup = /*#__PURE__*/forwardRef((_ref15, ref) => {
       "data-has-arrow": hasArrow,
       onClick: stopClickPropagation,
       animationDuration: animationDuration,
+      onKeyDown: role === 'dialog' ? handleFocusTrap : undefined,
+      isDialog: role === 'dialog',
       children: text
-    }), document.body) : null]
+    }), popupPortalTarget) : null]
   });
 });
 

package/dist/src/components/Snippet/index.js

@@ -1,6 +1,6 @@
 import _styled from '@emotion/styled/base';
 import { Icon } from '@ultraviolet/icons';
-import { useState, Children } from 'react';
+import { useReducer, Children } from 'react';
 import { CopyButton } from '../CopyButton/index.js';
 import { Expandable } from '../Expandable/index.js';
 import { Stack } from '../Stack/index.js';
@@ -196,9 +196,10 @@ const Snippet = _ref19 => {
     hideText = 'Hide',
     prefix,
     className,
-    'data-testid': dataTestId
+    'data-testid': dataTestId,
+    initiallyExpanded
   } = _ref19;
-  const [showMore, setShowMore] = useState(false);
+  const [showMore, setShowMore] = useReducer(value => !value, initiallyExpanded ?? false);
   const lines = children.split(LINES_BREAK_REGEX).filter(Boolean);
   const numberOfLines = lines.length;
   const multiline = numberOfLines > 1;
@@ -235,7 +236,7 @@ const Snippet = _ref19 => {
         showMore: showMore,
         children: jsx(StyledButton, {
           type: "button",
-          onClick: () => setShowMore(!showMore),
+          onClick: setShowMore,
           "aria-expanded": showMore,
           children: jsxs(AlignCenterText, {
             as: "span",