@telefonica/mistica 17.6.0 → 17.7.0

package/src/menu.tsx

@@ -270,8 +270,14 @@ export const MenuSection = ({children}: MenuSectionProps): JSX.Element => {
     );
 };
 
-const MARGIN_THRESHOLD = 12;
 const MENU_OFFSET_FROM_TARGET = 8;
+const REFLECTED_PLACEMENT = {top: 'bottom', bottom: 'top', left: 'right', right: 'left'} as const;
+const TRANSFORM_ORIGINS = {
+    top: 'center bottom',
+    bottom: 'center top',
+    left: 'right center',
+    right: 'left center',
+} as const;
 
 type MenuRenderProps = {
     ref: (element: HTMLElement | null) => void;
@@ -286,19 +292,36 @@ type TargetRenderProps = {
 };
 
 export type MenuProps = {
+    /**
+     * Width in pixels. Values are clamped to the range 136–280.
+     * The final width never exceeds the viewport width, even if that
+     * means going below the 136px minimum.
+     *
+     * Examples: 100 → 136, 200 → 200, 500 → 280.
+     */
     width?: number;
     renderTarget: (props: TargetRenderProps) => React.ReactNode;
     renderMenu: (props: MenuRenderProps) => React.ReactNode;
     children?: void;
-    position?: 'left' | 'right';
     dataAttributes?: DataAttributes;
-};
+} & ExclusifyUnion<
+    | {
+          /** @deprecated Use placement and alignment instead. */
+          position?: 'left' | 'right';
+      }
+    | {
+          placement?: 'top' | 'bottom' | 'left' | 'right';
+          alignment?: 'start' | 'middle' | 'end';
+      }
+>;
 
 export const Menu = ({
     renderTarget,
     renderMenu,
     width,
     position = 'left',
+    placement = 'bottom',
+    alignment = position === 'left' ? 'start' : 'end',
     dataAttributes,
 }: MenuProps): JSX.Element => {
     const [isMenuOpen, setIsMenuOpen] = React.useState(false);
@@ -309,11 +332,9 @@ export const Menu = ({
     const menuRef = React.useRef<HTMLDivElement | null>(null);
 
     const [itemsComputedProps, setItemsComputedProps] = React.useState<{
-        left?: number;
-        right?: number;
-        top: string;
-        bottom: string;
-        maxHeight?: number;
+        left: number;
+        top: number;
+        maxHeight: number;
         transformOrigin: string;
     } | null>(null);
 
@@ -326,44 +347,52 @@ export const Menu = ({
             return;
         }
 
-        const {top: topTarget, right: rightTarget, left: leftTarget, bottom: bottomTarget} = targetRect;
-
-        const heightMenu = menu.scrollHeight;
-
-        const leftDirection = position === 'left' ? leftTarget : undefined;
-        const rightDirection = position === 'right' ? windowSize.width - rightTarget : undefined;
-
-        const topTargetWithOffset = topTarget - MENU_OFFSET_FROM_TARGET;
-        const bottomTargetWithOffset = bottomTarget + MENU_OFFSET_FROM_TARGET;
-
-        const availableSpaceOnBottom = windowSize.height - bottomTargetWithOffset - MARGIN_THRESHOLD;
-        const availableSpaceOnTop = topTargetWithOffset - MARGIN_THRESHOLD;
-        const menuFitsOnBottom = availableSpaceOnBottom > heightMenu;
-        const menuFitsOnTop = availableSpaceOnTop > heightMenu;
-
-        const isMenuOnBottom =
-            menuFitsOnBottom || (!menuFitsOnTop && availableSpaceOnBottom > availableSpaceOnTop);
-
-        if (isMenuOnBottom) {
-            setItemsComputedProps({
-                left: leftDirection,
-                right: rightDirection,
-                top: `${bottomTargetWithOffset}px`,
-                bottom: 'auto',
-                maxHeight: menuFitsOnBottom ? undefined : availableSpaceOnBottom,
-                transformOrigin: 'center top',
-            });
-        } else {
-            setItemsComputedProps({
-                left: leftDirection,
-                right: rightDirection,
-                top: 'auto',
-                bottom: `${windowSize.height - topTargetWithOffset}px`,
-                maxHeight: menuFitsOnTop ? undefined : availableSpaceOnTop,
-                transformOrigin: 'center bottom',
-            });
+        const availableSpace = {
+            top: targetRect.top - MENU_OFFSET_FROM_TARGET,
+            bottom: windowSize.height - targetRect.bottom - MENU_OFFSET_FROM_TARGET,
+            left: targetRect.left - MENU_OFFSET_FROM_TARGET,
+            right: windowSize.width - targetRect.right - MENU_OFFSET_FROM_TARGET,
+        };
+        const menuSize = placement === 'top' || placement === 'bottom' ? menu.scrollHeight : menu.offsetWidth;
+        const candidateReflectedPlacement = REFLECTED_PLACEMENT[placement];
+        let finalPlacement =
+            availableSpace[placement] < menuSize &&
+            availableSpace[candidateReflectedPlacement] > availableSpace[placement]
+                ? candidateReflectedPlacement
+                : placement;
+        if (
+            (finalPlacement === 'left' || finalPlacement === 'right') &&
+            availableSpace[finalPlacement] < menu.offsetWidth
+        ) {
+            finalPlacement = availableSpace.bottom >= availableSpace.top ? 'bottom' : 'top';
         }
-    }, [position, isMenuOpen, menu, target, width, windowSize]);
+
+        const isVertical = finalPlacement === 'top' || finalPlacement === 'bottom';
+        const maxHeight = Math.max(0, isVertical ? availableSpace[finalPlacement] : windowSize.height);
+        const heightMenu = Math.min(menu.scrollHeight, maxHeight);
+        const widthMenu = menu.offsetWidth;
+        const targetStart = isVertical ? targetRect.left : targetRect.top;
+        const targetSize = isVertical ? targetRect.width : targetRect.height;
+        const alignmentSize = isVertical ? widthMenu : heightMenu;
+        const alignmentOffset = alignment === 'start' ? 0 : alignment === 'end' ? 1 : 0.5;
+        const alignedPosition = targetStart + (targetSize - alignmentSize) * alignmentOffset;
+        const shiftedPosition = Math.max(
+            0,
+            Math.min(alignedPosition, (isVertical ? windowSize.width : windowSize.height) - alignmentSize)
+        );
+        const positions = {
+            top: {left: shiftedPosition, top: targetRect.top - MENU_OFFSET_FROM_TARGET - heightMenu},
+            bottom: {left: shiftedPosition, top: targetRect.bottom + MENU_OFFSET_FROM_TARGET},
+            left: {left: targetRect.left - MENU_OFFSET_FROM_TARGET - widthMenu, top: shiftedPosition},
+            right: {left: targetRect.right + MENU_OFFSET_FROM_TARGET, top: shiftedPosition},
+        };
+
+        setItemsComputedProps({
+            ...positions[finalPlacement],
+            maxHeight,
+            transformOrigin: TRANSFORM_ORIGINS[finalPlacement],
+        });
+    }, [placement, alignment, isMenuOpen, menu, target, width, windowSize]);
 
     const targetProps = React.useMemo(
         () => ({
@@ -504,29 +533,18 @@ export const Menu = ({
                         <div
                             style={{
                                 ...applyCssVars({
+                                    [styles.vars.maxWidth]:
+                                        `${Math.min(styles.MENU_MAX_WIDTH, Math.max(0, windowSize.width))}px`,
+                                    ...(width && {
+                                        [styles.vars.width]: `${width}px`,
+                                    }),
                                     ...(itemsComputedProps
                                         ? {
-                                              [styles.vars.top]: itemsComputedProps.top,
-                                              [styles.vars.bottom]: itemsComputedProps.bottom,
+                                              [styles.vars.top]: `${itemsComputedProps.top}px`,
+                                              [styles.vars.left]: `${itemsComputedProps.left}px`,
+                                              [styles.vars.maxHeight]: `${itemsComputedProps.maxHeight}px`,
                                               [styles.vars.transformOrigin]:
                                                   itemsComputedProps.transformOrigin,
-
-                                              ...(itemsComputedProps.left !== undefined && {
-                                                  [styles.vars.left]: `${itemsComputedProps.left}px`,
-                                              }),
-
-                                              ...(itemsComputedProps.right !== undefined && {
-                                                  [styles.vars.right]: `${itemsComputedProps.right}px`,
-                                              }),
-
-                                              ...(itemsComputedProps.maxHeight !== undefined && {
-                                                  [styles.vars.maxHeight]:
-                                                      `${itemsComputedProps.maxHeight}px`,
-                                              }),
-
-                                              ...(width !== undefined && {
-                                                  [styles.vars.width]: width ? `${width}px` : '',
-                                              }),
                                           }
                                         : {}),
                                 }),

package/src/package-version.tsx

@@ -1,2 +1,2 @@
 // DO NOT EDIT THIS FILE. It's autogenerated by set-version.js
-export const PACKAGE_VERSION = '17.6.0' as string;
+export const PACKAGE_VERSION = '17.7.0' as string;

package/src/popover.tsx

@@ -21,6 +21,7 @@ type Props = {
     onClose?: () => void;
     closeButtonLabel?: string;
     position?: Position;
+    alignment?: 'start' | 'middle' | 'end';
     width?: number;
     trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
     open?: boolean;

package/src/sidenav-bar.tsx

@@ -446,8 +446,15 @@ const SidenavBar = ({
     const footerDividerSentinelRef = React.useRef<HTMLDivElement>(null);
     const bodyRef = React.useRef<HTMLDivElement>(null);
 
+    // The mobile treatment replaces the whole rail, so a trip to a narrow screen unmounts the body and
+    // its sentinels. Both dividers go back to their rest state, and the observers of the new body decide
+    // again: a divider earned by a scroll before the trip does not belong to the body that comes back.
     React.useEffect(() => {
-        if (!bodyRef.current) return;
+        if (!bodyRef.current) {
+            setShowHeaderDivider(false);
+            setShowFooterDivider(false);
+            return;
+        }
 
         // The sentinels have no height, and at rest they sit exactly on the edge of the scrollport. A
         // fractional layout (a boxed sidenav measures 100vh minus its margins) can leave them half a
@@ -478,7 +485,7 @@ const SidenavBar = ({
             headerObserver.disconnect();
             footerObserver.disconnect();
         };
-    }, []);
+    }, [isTabletOrSmaller]);
 
     // The rail is travelling between its two widths. See `columnsWhileMoving`.
     const isMoving = isSidenavMoving(collapseState);

package/src/tooltip.css.ts

@@ -53,6 +53,7 @@ export const contentContainer = style([
         overflow: 'hidden',
     }),
     {
+        overflowY: 'auto',
         minWidth: CONTENT_MIN_WIDTH - 2 * BORDER_SIZE, // border is not included in this container
     },
 ]);

package/src/tooltip.tsx

@@ -6,7 +6,6 @@ import {Transition} from 'react-transition-group';
 import * as styles from './tooltip.css';
 import Stack from './stack';
 import {Text2} from './text';
-import {getCssVarValue} from './utils/dom';
 import {ESC, TAB} from './utils/keys';
 import {isTouchableDevice} from './utils/environment';
 import {isEqual} from './utils/helpers';
@@ -41,7 +40,9 @@ const TOOLTIP_ENTER_TRANSITION_DELAY_IN_MS = 500;
 const TOOLTIP_EXIT_TRANSITION_DURATION_IN_MS = 100;
 const ARROW_SIZE = 20;
 const TOOLTIP_OFFSET_FROM_TARGET = 6;
-const TOOLTIP_PADDING_FROM_TARGET = TOOLTIP_OFFSET_FROM_TARGET + ARROW_SIZE / 2 + 1;
+const TOOLTIP_BORDER_SIZE = 1;
+const TOOLTIP_PADDING_FROM_TARGET = TOOLTIP_OFFSET_FROM_TARGET + ARROW_SIZE / 2 + TOOLTIP_BORDER_SIZE;
+const REFLECTED_POSITION = {top: 'bottom', bottom: 'top', left: 'right', right: 'left'} as const;
 
 type Position = 'top' | 'bottom' | 'left' | 'right';
 
@@ -79,62 +80,36 @@ const getFinalPosition = (
     tooltip: HTMLElement | undefined | null,
     position: Position,
     windowHeight: number,
-    windowWidth: number
+    windowWidth: number,
+    contentHeight?: number
 ): Position | undefined => {
     if (!targetRect || !tooltip) {
         return undefined;
     }
-    const {top, bottom, left, right} = targetRect;
-
-    const availableSpaceOnBottom = windowHeight - bottom;
-    const availableSpaceOnRight = windowWidth - right;
-    const availableSpaceOnTop = top;
-    const availableSpaceOnLeft = left;
-
-    const {width, height} = getElementDimensionsWithoutPadding(tooltip);
-
-    const tooltipWidth = width + TOOLTIP_PADDING_FROM_TARGET;
-    const tooltipHeight = height + TOOLTIP_PADDING_FROM_TARGET;
-
-    const fitsHorizontal = tooltipWidth <= Math.max(availableSpaceOnLeft, availableSpaceOnRight);
-    const fitsVertical = tooltipHeight <= Math.max(availableSpaceOnBottom, availableSpaceOnTop);
-
-    if (!fitsVertical && !fitsHorizontal) {
-        return undefined;
+    const availableSpace = {
+        top: targetRect.top,
+        bottom: windowHeight - targetRect.bottom,
+        left: targetRect.left,
+        right: windowWidth - targetRect.right,
+    };
+    const dimensions = getElementDimensionsWithoutPadding(tooltip);
+    const width = dimensions.width;
+    const height = contentHeight === undefined ? dimensions.height : contentHeight + 2 * TOOLTIP_BORDER_SIZE;
+    const size = (position === 'top' || position === 'bottom' ? height : width) + TOOLTIP_PADDING_FROM_TARGET;
+    const reflected = REFLECTED_POSITION[position];
+    const candidateFinalPosition =
+        availableSpace[position] < size && availableSpace[reflected] > availableSpace[position]
+            ? reflected
+            : position;
+
+    if (
+        (candidateFinalPosition === 'left' || candidateFinalPosition === 'right') &&
+        availableSpace[candidateFinalPosition] < size
+    ) {
+        return availableSpace.bottom > availableSpace.top ? 'bottom' : 'top';
     }
 
-    switch (position) {
-        case 'left':
-            if (fitsHorizontal) {
-                return tooltipWidth <= availableSpaceOnLeft ? 'left' : 'right';
-            } else {
-                return availableSpaceOnBottom > availableSpaceOnTop ? 'bottom' : 'top';
-            }
-
-        case 'right':
-            if (fitsHorizontal) {
-                return tooltipWidth <= availableSpaceOnRight ? 'right' : 'left';
-            } else {
-                return availableSpaceOnBottom > availableSpaceOnTop ? 'bottom' : 'top';
-            }
-
-        case 'top':
-            if (fitsVertical) {
-                return tooltipHeight <= availableSpaceOnTop ? 'top' : 'bottom';
-            } else {
-                return availableSpaceOnLeft > availableSpaceOnRight ? 'left' : 'right';
-            }
-
-        case 'bottom':
-            if (fitsVertical) {
-                return tooltipHeight <= availableSpaceOnBottom ? 'bottom' : 'top';
-            } else {
-                return availableSpaceOnLeft > availableSpaceOnRight ? 'left' : 'right';
-            }
-
-        default:
-            return undefined;
-    }
+    return candidateFinalPosition;
 };
 
 type Props = {
@@ -145,6 +120,7 @@ type Props = {
     targetStyle?: React.CSSProperties;
     title?: string;
     position?: Position;
+    alignment?: 'start' | 'middle' | 'end';
     width?: number;
     delay?: boolean;
     dataAttributes?: DataAttributes;
@@ -157,6 +133,7 @@ type BaseTooltipProps = {
     target: React.ReactNode;
     targetStyle?: React.CSSProperties;
     position?: Position;
+    alignment?: 'start' | 'middle' | 'end';
     width?: number;
     delay?: boolean;
     dataAttributes?: DataAttributes;
@@ -174,6 +151,7 @@ export const BaseTooltip = ({
     targetStyle,
     width,
     position = 'top',
+    alignment = 'middle',
     dataAttributes,
     delay = true,
     centerContent,
@@ -183,7 +161,12 @@ export const BaseTooltip = ({
     hasPointerInteractionOnly = false,
     trackingEvent,
 }: BaseTooltipProps): JSX.Element => {
-    const {texts, t} = useTheme();
+    const {texts, t, borderRadii} = useTheme();
+    const arrowOffsetFromBorder = parseFloat(borderRadii.popup);
+    const minSize = Math.max(
+        styles.CONTENT_MIN_WIDTH,
+        2 * (arrowOffsetFromBorder + TOOLTIP_BORDER_SIZE) + ARROW_SIZE
+    );
     const tooltipId = React.useId();
     const {openTooltipId} = useTooltipState();
     const {openTooltip, closeTooltip} = useSetTooltipState();
@@ -194,6 +177,7 @@ export const BaseTooltip = ({
 
     const targetRef = React.useRef<Element | null>(null);
     const tooltipRef = React.useRef<HTMLDivElement | null>(null);
+    const contentRef = React.useRef<HTMLDivElement | null>(null);
     const [tooltip, setTooltip] = React.useState<HTMLElement | null>(null);
     const isTouchable = isTouchableDevice();
     const tooltipEnterDelay = delay ? TOOLTIP_ENTER_TRANSITION_DELAY_IN_MS : 0;
@@ -208,7 +192,26 @@ export const BaseTooltip = ({
 
     const targetRect = useBoundingRect(targetRef, isTooltipOpen);
     const tooltipRect = useBoundingRect(tooltipRef, isTooltipOpen, true);
+    const contentRect = useBoundingRect(contentRef, isTooltipOpen, true);
     const windowSize = useWindowSize();
+    const currentPosition = getFinalPosition(
+        targetRect,
+        tooltip,
+        position,
+        windowSize.height,
+        windowSize.width,
+        contentRect?.height
+    );
+    const maxHeight = Math.max(
+        0,
+        (currentPosition === 'top'
+            ? targetRect?.top ?? windowSize.height
+            : currentPosition === 'bottom'
+              ? windowSize.height - (targetRect?.bottom ?? 0)
+              : windowSize.height) -
+            (currentPosition === 'top' || currentPosition === 'bottom' ? TOOLTIP_PADDING_FROM_TARGET : 0) -
+            2 * TOOLTIP_BORDER_SIZE
+    );
 
     const resetTooltipInteractions = React.useCallback(() => {
         setIsFocused(false);
@@ -227,15 +230,7 @@ export const BaseTooltip = ({
             return;
         }
 
-        const finalPosition = getFinalPosition(
-            targetRect,
-            tooltip,
-            position,
-            windowSize.height,
-            windowSize.width
-        );
-
-        if (!finalPosition || !targetRect) {
+        if (!currentPosition || !targetRect) {
             setTooltipComputedStyles(undefined);
             setArrowComputedStyles(undefined);
             resetTooltipInteractions();
@@ -250,22 +245,29 @@ export const BaseTooltip = ({
 
         const maxLeftOffset = windowSize.width - tooltipWidth;
         const maxTopOffset = windowSize.height - tooltipHeight;
+        const alignmentRatio = alignment === 'start' ? 0 : alignment === 'end' ? 1 : 0.5;
+        const leftPropInPx = Math.max(
+            0,
+            Math.min(maxLeftOffset, left + (right - left - tooltipWidth) * alignmentRatio)
+        );
+        const topPropInPx = Math.max(
+            0,
+            Math.min(maxTopOffset, top + (bottom - top - tooltipHeight) * alignmentRatio)
+        );
 
-        const arrowOffsetFromViewport = parseInt(getCssVarValue(vars.borderRadii.popup)) ?? 8;
-
-        switch (finalPosition) {
+        switch (currentPosition) {
             case 'top':
                 tooltipStyles = {
-                    left: Math.max(0, Math.min(maxLeftOffset, (left + right - tooltipWidth) / 2)),
+                    left: leftPropInPx,
                     top: top - tooltipHeight - ARROW_SIZE / 2,
                     padding: `0px 0px ${TOOLTIP_PADDING_FROM_TARGET}px 0px`,
                 };
 
                 arrowStyles = {
                     left: Math.max(
-                        arrowOffsetFromViewport,
+                        leftPropInPx + arrowOffsetFromBorder,
                         Math.min(
-                            windowSize.width - arrowOffsetFromViewport - ARROW_SIZE,
+                            leftPropInPx + tooltipWidth - arrowOffsetFromBorder - ARROW_SIZE,
                             (left + right - ARROW_SIZE) / 2
                         )
                     ),
@@ -276,16 +278,16 @@ export const BaseTooltip = ({
 
             case 'bottom':
                 tooltipStyles = {
-                    left: Math.max(0, Math.min(maxLeftOffset, (left + right - tooltipWidth) / 2)),
+                    left: leftPropInPx,
                     top: bottom - TOOLTIP_OFFSET_FROM_TARGET,
                     padding: `${TOOLTIP_PADDING_FROM_TARGET}px 0px 0px 0px`,
                 };
 
                 arrowStyles = {
                     left: Math.max(
-                        arrowOffsetFromViewport,
+                        leftPropInPx + arrowOffsetFromBorder,
                         Math.min(
-                            windowSize.width - arrowOffsetFromViewport - ARROW_SIZE,
+                            leftPropInPx + tooltipWidth - arrowOffsetFromBorder - ARROW_SIZE,
                             (left + right - ARROW_SIZE) / 2
                         )
                     ),
@@ -298,15 +300,15 @@ export const BaseTooltip = ({
             case 'left':
                 tooltipStyles = {
                     left: left - tooltipWidth - ARROW_SIZE / 2,
-                    top: Math.max(0, Math.min(maxTopOffset, (top + bottom - tooltipHeight) / 2)),
+                    top: topPropInPx,
                     padding: `0px ${TOOLTIP_PADDING_FROM_TARGET}px 0px 0px`,
                 };
 
                 arrowStyles = {
                     top: Math.max(
-                        arrowOffsetFromViewport,
+                        topPropInPx + arrowOffsetFromBorder,
                         Math.min(
-                            windowSize.height - arrowOffsetFromViewport - ARROW_SIZE,
+                            topPropInPx + tooltipHeight - arrowOffsetFromBorder - ARROW_SIZE,
                             (top + bottom - ARROW_SIZE) / 2
                         )
                     ),
@@ -318,18 +320,17 @@ export const BaseTooltip = ({
                 break;
 
             case 'right':
-            default:
                 tooltipStyles = {
                     left: right - TOOLTIP_OFFSET_FROM_TARGET,
-                    top: Math.max(0, Math.min(maxTopOffset, (top + bottom - tooltipHeight) / 2)),
+                    top: topPropInPx,
                     padding: `0px 0px 0px ${TOOLTIP_PADDING_FROM_TARGET}px`,
                 };
 
                 arrowStyles = {
                     top: Math.max(
-                        arrowOffsetFromViewport,
+                        topPropInPx + arrowOffsetFromBorder,
                         Math.min(
-                            windowSize.height - arrowOffsetFromViewport - ARROW_SIZE,
+                            topPropInPx + tooltipHeight - arrowOffsetFromBorder - ARROW_SIZE,
                             (top + bottom - ARROW_SIZE) / 2
                         )
                     ),
@@ -339,6 +340,10 @@ export const BaseTooltip = ({
                 };
 
                 break;
+            default: {
+                const exhaustiveCheck: never = currentPosition;
+                throw new Error(`Invalid tooltip position: ${exhaustiveCheck}`);
+            }
         }
 
         /**
@@ -366,10 +371,12 @@ export const BaseTooltip = ({
         targetRect,
         tooltipRect,
         isTooltipOpen,
-        position,
+        currentPosition,
+        alignment,
         windowSize,
         tooltipComputedStyles,
         arrowComputedStyles,
+        arrowOffsetFromBorder,
         isTouchable,
         tooltipId,
         resetTooltipInteractions,
@@ -438,17 +445,8 @@ export const BaseTooltip = ({
         hasControlledValue,
     ]);
 
-    const currentPosition = getFinalPosition(
-        targetRect,
-        tooltip,
-        position,
-        windowSize.height,
-        windowSize.width
-    );
-
     // by default, center content only if tooltip has minimum possible width
-    const hasCenteredContent =
-        centerContent !== undefined ? centerContent : tooltipRect?.width === styles.CONTENT_MIN_WIDTH;
+    const hasCenteredContent = centerContent !== undefined ? centerContent : tooltipRect?.width === minSize;
 
     return (
         <>
@@ -568,17 +566,23 @@ export const BaseTooltip = ({
                                         className={styles.tooltip}
                                         style={{
                                             width,
+                                            minWidth: minSize,
+                                            minHeight:
+                                                currentPosition === 'left' || currentPosition === 'right'
+                                                    ? minSize
+                                                    : undefined,
                                             ...getBorderStyle(themeVariant),
                                             maxWidth: Math.min(TOOLTIP_MAX_WIDTH, windowSize.width),
                                         }}
                                     >
                                         <div
+                                            style={{maxHeight}}
                                             className={classNames(styles.contentContainer, {
                                                 [styles.tooltipCenter]: hasCenteredContent,
                                             })}
                                         >
                                             <ThemeVariant variant="default">
-                                                {content}
+                                                <div ref={contentRef}>{content}</div>
 
                                                 {onClose && (
                                                     <div className={styles.closeButtonIcon}>