@userflow-tech/react-native 0.1.0

package/lib/module/surfaces/TooltipSurface.js

@@ -0,0 +1,633 @@
+"use strict";
+
+import * as React from 'react';
+import { ActivityIndicator, Dimensions, Keyboard, ScrollView, StyleSheet, Text, View } from 'react-native';
+import { anchorRegistry } from "../anchors/AnchorRegistry.js";
+import { addAnimationFrameCallback, removeAnimationFrameCallback } from "../anchors/animationFrame.js";
+import { fiberScanRoot } from "../anchors/fiber/FiberScanRoot.js";
+import { invalidateFiberAnchor, resolveAnchorHost } from "../anchors/resolveAnchorHost.js";
+import { resolveManualAnchorId } from "../anchors/resolveManualAnchorId.js";
+import { scrollAnchorIntoView } from "../anchors/scrollAnchorIntoView.js";
+import { getScrollPadding } from "../anchors/scrollConfig.js";
+import { targetPressMonitor } from "../anchors/targetPressMonitor.js";
+import { RichContentRenderer } from "../content/RichContentRenderer.js";
+import { CloseButton } from "./CloseButton.js";
+import { resolveCloseButtonColor } from "./resolveCloseButtonColor.js";
+import { MADE_WITH_USERFLOW_GAP, MadeWithUserflow } from "./MadeWithUserflow.js";
+import { ProgressBar } from "./ProgressBar.js";
+import { ABSOLUTE_FILL } from "./absoluteFill.js";
+import { parseBackdropOpacity } from "./parseBackdropOpacity.js";
+import { resolveStepProgress } from "./progress.js";
+import { useUserflowSafeAreaInsets } from "./safeArea.js";
+import { resolveBubbleChrome } from "./themeChrome.js";
+import { TooltipBubble } from "./tooltip/TooltipBubble.js";
+import { TooltipCutout } from "./tooltip/TooltipCutout.js";
+import { computeTooltipPosition } from "./tooltip/computeTooltipPosition.js";
+import { inferTooltipPlacement } from "./tooltip/inferTooltipPlacement.js";
+import { parseBackdropPadding } from "./tooltip/parseBackdropPadding.js";
+import { buildEffectiveViewport, isRectFullyVisible, rectsEqual } from "./tooltip/rect.js";
+import { resolveTooltipButtonsAlign, resolveTooltipCardLayout, resolveTooltipCardMaxWidth, resolveTooltipCenterPadding } from "./resolveTooltipLayout.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/** Interval for re-resolving a missing / remounted anchor (not for live measure). */
+const RESOLVE_MS = 250;
+/** Slower resolve poll after FLAG/ERROR report so a late-mounting target can recover. */
+const RESOLVE_SLOW_MS = 1000;
+/**
+ * Max scroll-into-view attempts per step while the target stays partially
+ * clipped. Only a safety net for targets that can never become fully visible —
+ * the usual stop condition is the target coming into view.
+ */
+const MAX_SCROLL_ATTEMPTS = 8;
+function normalizePlacement(value) {
+  if (value == null) return null;
+  const upper = String(value).toUpperCase();
+  if (upper === 'ABOVE' || upper === 'BELOW' || upper === 'LEFT' || upper === 'RIGHT') {
+    return upper;
+  }
+  return null;
+}
+function parseToleranceMs(raw) {
+  const seconds = typeof raw === 'number' ? raw : parseFloat(String(raw));
+  if (!Number.isFinite(seconds) || seconds < 0) return 5000;
+  return Math.max(0, seconds * 1000);
+}
+function missingBehavior(theme) {
+  return String(theme.tooltipMissingBehavior ?? 'FLAG').toUpperCase();
+}
+
+/**
+ * Anchored tooltip chrome: measure manual / fiber anchor, place with web flip/shift,
+ * optional cutout backdrop, missing-target report + theme fallbacks.
+ */
+export function TooltipSurface({
+  engine,
+  session,
+  currentStep,
+  theme,
+  lookupAttribute
+}) {
+  const version = session.version;
+  const chrome = resolveBubbleChrome(theme, 'tooltip');
+  const progress = resolveStepProgress(version, currentStep.id);
+  const showClose = !version.closeDisabled;
+  const backdropOpacity = parseBackdropOpacity(theme.backdropOpacity);
+  const backdropPadding = parseBackdropPadding(currentStep.backdropPadding);
+  const anchorId = resolveManualAnchorId(currentStep.selector?.css);
+  const desiredPlacement = normalizePlacement(currentStep.tooltipPlacement);
+  const behavior = missingBehavior(theme);
+  const insets = useUserflowSafeAreaInsets();
+  const centerPaddingStyle = resolveTooltipCenterPadding(insets);
+  const [keyboardBottomInset, setKeyboardBottomInset] = React.useState(0);
+  const [target, setTarget] = React.useState(null);
+  const [bubbleSize, setBubbleSize] = React.useState({
+    width: 280,
+    height: 160
+  });
+  const [placement, setPlacement] = React.useState(desiredPlacement ?? 'BELOW');
+  const [missingMode, setMissingMode] = React.useState('waiting');
+  const [registryTick, setRegistryTick] = React.useState(0);
+  /** True after at least one *failed* measure for the current step/anchor. */
+  const [measureAttempted, setMeasureAttempted] = React.useState(false);
+  const reportedRef = React.useRef(false);
+  const placementRef = React.useRef(placement);
+  placementRef.current = placement;
+  const mountedRef = React.useRef(true);
+  const targetRef = React.useRef(null);
+  /** Bounded scroll-into-view attempts for the current step. */
+  const scrollAttemptsRef = React.useRef(0);
+  /**
+   * True once the target has been seen fully visible for this step. From then
+   * on the user owns the scroll position — rAF keeps tracking the target, but
+   * scrolling it back would fight a deliberate scroll away from it.
+   */
+  const scrollSettledRef = React.useRef(false);
+  /** In-flight measureInWindow guard for the rAF loop. */
+  const measureInFlightRef = React.useRef(false);
+  /** Latest resolved host fiber (for scroll-ancestor walk + rAF remeasure). */
+  const hostFiberRef = React.useRef(null);
+  const hostMeasureRef = React.useRef(null);
+  const hostScrollIntoViewRef = React.useRef(undefined);
+  const keyboardBottomInsetRef = React.useRef(keyboardBottomInset);
+  keyboardBottomInsetRef.current = keyboardBottomInset;
+  const insetsRef = React.useRef(insets);
+  insetsRef.current = insets;
+  const missingModeRef = React.useRef(missingMode);
+  missingModeRef.current = missingMode;
+  const behaviorRef = React.useRef(behavior);
+  behaviorRef.current = behavior;
+  const draftModeRef = React.useRef(session.draftMode);
+  draftModeRef.current = session.draftMode;
+  const endAsUserClosed = React.useCallback(() => {
+    void engine.endFlow('USER_CLOSED');
+  }, [engine]);
+  React.useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+  React.useEffect(() => {
+    const bump = () => setRegistryTick(n => n + 1);
+    const unsubRegistry = anchorRegistry.subscribe(bump);
+    const unsubScan = fiberScanRoot.subscribe(bump);
+    return () => {
+      unsubRegistry();
+      unsubScan();
+    };
+  }, []);
+  React.useEffect(() => {
+    reportedRef.current = false;
+    scrollAttemptsRef.current = 0;
+    scrollSettledRef.current = false;
+    measureInFlightRef.current = false;
+    hostFiberRef.current = null;
+    hostMeasureRef.current = null;
+    hostScrollIntoViewRef.current = undefined;
+    targetRef.current = null;
+    setMissingMode('waiting');
+    setMeasureAttempted(false);
+    setTarget(null);
+  }, [currentStep.id, anchorId]);
+  const applyTarget = React.useCallback(next => {
+    if (!mountedRef.current) return;
+    if (rectsEqual(targetRef.current, next)) return;
+    if (next == null) {
+      // The anchor went away (unmount / navigation), so whatever scroll position
+      // the user had settled on no longer applies. Treat its next appearance as
+      // a fresh one and allow scrolling to it again.
+      scrollAttemptsRef.current = 0;
+      scrollSettledRef.current = false;
+    }
+    targetRef.current = next;
+    setTarget(next);
+  }, []);
+  const markMeasureAttempted = React.useCallback(() => {
+    if (!mountedRef.current) return;
+    setMeasureAttempted(prev => prev ? prev : true);
+  }, []);
+  const effectiveViewport = React.useCallback(() => {
+    const windowSize = Dimensions.get('window');
+    const scrollPadding = getScrollPadding();
+    return buildEffectiveViewport({
+      width: windowSize.width,
+      height: Math.max(0, windowSize.height - keyboardBottomInsetRef.current)
+    }, {
+      top: (insetsRef.current.top ?? 0) + (scrollPadding?.top ?? 0),
+      right: (insetsRef.current.right ?? 0) + (scrollPadding?.right ?? 0),
+      bottom: (insetsRef.current.bottom ?? 0) + (scrollPadding?.bottom ?? 0),
+      left: (insetsRef.current.left ?? 0) + (scrollPadding?.left ?? 0)
+    });
+  }, []);
+  const maybeScrollIntoView = React.useCallback(rect => {
+    if (scrollSettledRef.current) return;
+    if (isRectFullyVisible(rect, effectiveViewport())) {
+      scrollSettledRef.current = true;
+      return;
+    }
+    if (scrollAttemptsRef.current >= MAX_SCROLL_ATTEMPTS) return;
+    scrollAttemptsRef.current += 1;
+    const measure = hostMeasureRef.current;
+    if (!measure) return;
+    try {
+      const host = {
+        measureInWindow: measure,
+        ...(hostScrollIntoViewRef.current ? {
+          scrollIntoView: hostScrollIntoViewRef.current
+        } : {})
+      };
+      scrollAnchorIntoView({
+        rect,
+        host,
+        fiber: hostFiberRef.current
+      });
+    } catch {
+      // Best-effort only — missing-target path still applies if never visible.
+    }
+  }, [effectiveViewport]);
+
+  /**
+   * Resolve the anchor host (registry / fiber scan). Used by the interval and
+   * on registry ticks — intentionally NOT on every animation frame.
+   */
+  const resolveTarget = React.useCallback(() => {
+    if (!mountedRef.current) return;
+    if (!anchorId) {
+      hostFiberRef.current = null;
+      hostMeasureRef.current = null;
+      hostScrollIntoViewRef.current = undefined;
+      markMeasureAttempted();
+      applyTarget(null);
+      return;
+    }
+    const resolution = resolveAnchorHost(anchorId);
+    if (resolution.status !== 'found') {
+      hostFiberRef.current = null;
+      hostMeasureRef.current = null;
+      hostScrollIntoViewRef.current = undefined;
+      markMeasureAttempted();
+      applyTarget(null);
+      return;
+    }
+    hostFiberRef.current = resolution.fiber ?? null;
+    hostMeasureRef.current = resolution.host.measureInWindow;
+    hostScrollIntoViewRef.current = resolution.host.scrollIntoView;
+
+    // Kick an immediate measure after resolve so the first paint isn't waiting
+    // on the next rAF (and so missing targets still mark attempted).
+    if (measureInFlightRef.current) return;
+    measureInFlightRef.current = true;
+    resolution.host.measureInWindow((x, y, width, height) => {
+      measureInFlightRef.current = false;
+      if (!mountedRef.current) return;
+      if (width <= 0 || height <= 0) {
+        invalidateFiberAnchor(anchorId);
+        hostFiberRef.current = null;
+        hostMeasureRef.current = null;
+        markMeasureAttempted();
+        applyTarget(null);
+        return;
+      }
+      const rect = {
+        x,
+        y,
+        width,
+        height
+      };
+      maybeScrollIntoView(rect);
+      applyTarget(rect);
+    });
+  }, [anchorId, applyTarget, markMeasureAttempted, maybeScrollIntoView]);
+
+  /**
+   * Live re-measure of an already-resolved host. Driven by the shared rAF hub
+   * so the bubble / cutout track finger scrolls without a 250ms lag.
+   */
+  const remeasureResolvedHost = React.useCallback(() => {
+    if (!mountedRef.current) return;
+    if (measureInFlightRef.current) return;
+    const measure = hostMeasureRef.current;
+    if (!measure) return;
+    measureInFlightRef.current = true;
+    measure((x, y, width, height) => {
+      measureInFlightRef.current = false;
+      if (!mountedRef.current) return;
+      if (width <= 0 || height <= 0) {
+        if (anchorId) invalidateFiberAnchor(anchorId);
+        hostFiberRef.current = null;
+        hostMeasureRef.current = null;
+        markMeasureAttempted();
+        applyTarget(null);
+        return;
+      }
+      const rect = {
+        x,
+        y,
+        width,
+        height
+      };
+      maybeScrollIntoView(rect);
+      applyTarget(rect);
+    });
+  }, [anchorId, applyTarget, markMeasureAttempted, maybeScrollIntoView]);
+  React.useEffect(() => {
+    resolveTarget();
+  }, [resolveTarget, registryTick]);
+
+  // Resolve poll: recover missing / remounted anchors. Live measurement is on rAF.
+  React.useEffect(() => {
+    const allowsRecovery = behavior === 'FLAG' || behavior === 'ERROR' || behavior === 'END' && session.draftMode;
+    const pauseAfterReport = missingMode === 'reported' && !allowsRecovery;
+    if (pauseAfterReport) {
+      return;
+    }
+    resolveTarget();
+    const intervalMs = missingMode === 'reported' ? RESOLVE_SLOW_MS : RESOLVE_MS;
+    const handle = setInterval(resolveTarget, intervalMs);
+    const dimSub = Dimensions.addEventListener('change', resolveTarget);
+    const onKeyboardShow = event => {
+      setKeyboardBottomInset(Math.max(0, event.endCoordinates?.height ?? 0));
+      resolveTarget();
+    };
+    const onKeyboardHide = () => {
+      setKeyboardBottomInset(0);
+      resolveTarget();
+    };
+    const kbShow = Keyboard.addListener('keyboardDidShow', onKeyboardShow);
+    const kbHide = Keyboard.addListener('keyboardDidHide', onKeyboardHide);
+    return () => {
+      clearInterval(handle);
+      dimSub.remove();
+      kbShow.remove();
+      kbHide.remove();
+    };
+  }, [resolveTarget, missingMode, behavior, session.draftMode]);
+
+  // rAF tracking while a host is resolved (and we are not paused after report).
+  React.useEffect(() => {
+    const allowsRecovery = behavior === 'FLAG' || behavior === 'ERROR' || behavior === 'END' && session.draftMode;
+    const pauseAfterReport = missingMode === 'reported' && !allowsRecovery;
+    if (pauseAfterReport || !target) {
+      return;
+    }
+    addAnimationFrameCallback(remeasureResolvedHost);
+    return () => {
+      removeAnimationFrameCallback(remeasureResolvedHost);
+    };
+  }, [target, missingMode, behavior, session.draftMode, remeasureResolvedHost]);
+
+  // Missing-target tolerance → report once, then theme fallback.
+  // Only start after a failed measure so a slow measureInWindow cannot
+  // false-report while the target is still loading.
+  React.useEffect(() => {
+    if (target) {
+      // FLAG/ERROR (and draft END) may recover; BUBBLE/live END stay on their fallback.
+      const allowsRecovery = behaviorRef.current === 'FLAG' || behaviorRef.current === 'ERROR' || behaviorRef.current === 'END' && draftModeRef.current;
+      if (missingModeRef.current === 'reported' && !allowsRecovery) {
+        return;
+      }
+      reportedRef.current = false;
+      setMissingMode('waiting');
+      return;
+    }
+    if (!measureAttempted) {
+      return;
+    }
+    const ms = parseToleranceMs(theme.tooltipMissingToleranceSeconds);
+    const timer = setTimeout(() => {
+      if (!mountedRef.current || reportedRef.current) return;
+      reportedRef.current = true;
+      setMissingMode('reported');
+      void engine.reportTooltipTargetMissing(currentStep.id);
+    }, ms);
+    return () => clearTimeout(timer);
+  }, [target, measureAttempted, engine, currentStep.id, theme.tooltipMissingBehavior, theme.tooltipMissingToleranceSeconds]);
+  const onCardLayout = React.useCallback(event => {
+    const {
+      width,
+      height
+    } = event.nativeEvent.layout;
+    if (width > 0 && height > 0) {
+      setBubbleSize(prev => prev.width === width && prev.height === height ? prev : {
+        width,
+        height
+      });
+    }
+  }, []);
+  const windowDims = Dimensions.get('window');
+  const windowSize = React.useMemo(() => ({
+    width: windowDims.width,
+    // Treat the keyboard as covering the bottom of the window so placement /
+    // flip / clamp keep the card in the visible region above it.
+    height: Math.max(0, windowDims.height - keyboardBottomInset)
+  }), [windowDims.width, windowDims.height, keyboardBottomInset]);
+  const cardMaxWidth = resolveTooltipCardMaxWidth(theme, currentStep.width, windowSize.width);
+  const cardLayoutStyle = resolveTooltipCardLayout(cardMaxWidth, windowSize.width);
+  const buttonsAlign = resolveTooltipButtonsAlign(theme);
+  const progressBarProps = {
+    enabled: theme.progressBarEnabled,
+    fraction: progress.fraction,
+    theme,
+    totalSteps: progress.total,
+    contentPadding: chrome.contentPadding
+  };
+  const isMissing = target == null;
+  const showAsBubbleFallback = isMissing && missingMode === 'reported' && behavior === 'BUBBLE';
+  const showMissingUi = isMissing && missingMode === 'reported' && (behavior === 'FLAG' || behavior === 'ERROR' || behavior === 'END' && session.draftMode);
+  // END: engine ends the flow only when !draftMode — hide only then.
+  const hideAfterEnd = isMissing && missingMode === 'reported' && behavior === 'END' && !session.draftMode;
+  const showWaitingUi = isMissing && missingMode === 'waiting' && measureAttempted;
+  const layout = React.useMemo(() => {
+    if (!target) return null;
+    const nextPlacement = inferTooltipPlacement({
+      target,
+      bubbleSize,
+      notchSize: chrome.notchSize,
+      windowSize,
+      currentPlacement: placementRef.current,
+      desiredPlacement
+    });
+    return {
+      placement: nextPlacement,
+      ...computeTooltipPosition({
+        target,
+        bubbleSize,
+        placement: nextPlacement,
+        notchSize: chrome.notchSize,
+        backdropPadding,
+        windowSize,
+        bubbleBorderRadius: chrome.borderRadius,
+        bubbleBorderWidth: chrome.borderWidth
+      })
+    };
+  }, [target, bubbleSize, chrome.notchSize, chrome.borderRadius, chrome.borderWidth, windowSize, desiredPlacement, backdropPadding]);
+  React.useEffect(() => {
+    if (layout && layout.placement !== placement) {
+      setPlacement(layout.placement);
+    }
+  }, [layout, placement]);
+
+  // Web parity: "When target element is clicked" → step.actions.
+  // Observe taps via TargetPressBridge (pass-through); do not steal the press.
+  const hasTarget = target != null;
+  const targetActions = currentStep.actions;
+  React.useEffect(() => {
+    if (!hasTarget || currentStep.tooltipTargetBlocked || targetActions.length === 0) {
+      targetPressMonitor.clear();
+      return;
+    }
+    targetPressMonitor.set({
+      getRect: () => targetRef.current,
+      onPress: () => {
+        void engine.handleActions(targetActions);
+      }
+    });
+    return () => {
+      targetPressMonitor.clear();
+    };
+  }, [hasTarget, currentStep.tooltipTargetBlocked, targetActions, engine]);
+  if (hideAfterEnd) {
+    return null;
+  }
+
+  // Still pending the first measure attempt — stay invisible briefly.
+  if (isMissing && missingMode === 'waiting' && !measureAttempted) {
+    return null;
+  }
+  if (showWaitingUi) {
+    return /*#__PURE__*/_jsx(View, {
+      style: styles.root,
+      testID: "userflow-tooltip-surface",
+      pointerEvents: "box-none",
+      children: /*#__PURE__*/_jsx(View, {
+        style: [styles.center, centerPaddingStyle],
+        pointerEvents: "box-none",
+        children: /*#__PURE__*/_jsx(View, {
+          testID: "userflow-tooltip-waiting",
+          accessibilityViewIsModal: true,
+          pointerEvents: "auto",
+          style: [chrome.shadowStyle, styles.waitingCard, cardLayoutStyle, {
+            borderRadius: chrome.borderRadius,
+            backgroundColor: chrome.backgroundColor
+          }],
+          children: /*#__PURE__*/_jsxs(View, {
+            style: [chrome.fillStyle, {
+              padding: chrome.contentPadding,
+              alignItems: 'center'
+            }],
+            children: [/*#__PURE__*/_jsx(ActivityIndicator, {
+              color: theme.fontColor
+            }), /*#__PURE__*/_jsx(Text, {
+              style: {
+                color: theme.fontColor,
+                fontSize: theme.fontSize,
+                marginTop: 12,
+                textAlign: 'center'
+              },
+              children: "Looking for target\u2026"
+            })]
+          })
+        })
+      })
+    });
+  }
+  const progressTop = theme.progressBarEnabled && theme.progressBarPosition === 'TOP';
+  const progressBottom = theme.progressBarEnabled && theme.progressBarPosition === 'BOTTOM';
+  const showBranding = session.flow.company.flowBranding;
+  const contentPadding = chrome.contentPadding;
+  const cardBody = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [showClose ? /*#__PURE__*/_jsx(CloseButton, {
+      onPress: endAsUserClosed,
+      color: resolveCloseButtonColor(theme)
+    }) : null, progressTop ? /*#__PURE__*/_jsx(ProgressBar, {
+      ...progressBarProps,
+      position: "TOP"
+    }) : null, /*#__PURE__*/_jsx(ScrollView, {
+      testID: "userflow-flow-scroll",
+      style: styles.scroll,
+      contentContainerStyle: [styles.scrollContent, {
+        paddingHorizontal: contentPadding,
+        paddingTop: contentPadding,
+        paddingBottom: showBranding ? MADE_WITH_USERFLOW_GAP : contentPadding
+      }],
+      keyboardShouldPersistTaps: "handled",
+      nestedScrollEnabled: true,
+      bounces: false,
+      children: showMissingUi ? /*#__PURE__*/_jsxs(View, {
+        testID: "userflow-tooltip-missing",
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: [styles.missingTitle, {
+            color: theme.fontColor,
+            fontSize: theme.fontSize
+          }],
+          children: "Target not found"
+        }), /*#__PURE__*/_jsx(Text, {
+          style: {
+            color: theme.fontColor,
+            fontSize: theme.fontSize,
+            opacity: 0.8
+          },
+          children: "This step's anchor is missing. Close to continue, or wait if the screen is still loading."
+        })]
+      }) : /*#__PURE__*/_jsx(RichContentRenderer, {
+        content: currentStep.content,
+        buttons: currentStep.buttons,
+        theme: theme,
+        sessionData: session.data,
+        lookupAttribute: lookupAttribute,
+        defaultButtonsAlign: buttonsAlign,
+        onActions: actions => {
+          void engine.handleActions(actions);
+        }
+      })
+    }), progressBottom ? /*#__PURE__*/_jsx(ProgressBar, {
+      ...progressBarProps,
+      position: "BOTTOM"
+    }) : null, /*#__PURE__*/_jsx(MadeWithUserflow, {
+      company: session.flow.company,
+      color: theme.fontColor,
+      contentPadding: contentPadding
+    })]
+  });
+  if (showAsBubbleFallback || showMissingUi) {
+    return /*#__PURE__*/_jsx(View, {
+      style: styles.root,
+      testID: "userflow-tooltip-surface",
+      pointerEvents: "box-none",
+      children: /*#__PURE__*/_jsx(View, {
+        style: [styles.center, centerPaddingStyle],
+        pointerEvents: "box-none",
+        children: /*#__PURE__*/_jsx(View, {
+          testID: "userflow-tooltip-card",
+          accessibilityViewIsModal: true,
+          pointerEvents: "auto",
+          onLayout: onCardLayout,
+          style: [chrome.shadowStyle, styles.fallbackCard, cardLayoutStyle, {
+            borderRadius: chrome.borderRadius,
+            backgroundColor: chrome.backgroundColor
+          }],
+          children: /*#__PURE__*/_jsx(View, {
+            style: [chrome.fillStyle, styles.fallbackFill],
+            children: cardBody
+          })
+        })
+      })
+    });
+  }
+  if (!layout || !target) {
+    return null;
+  }
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.root,
+    testID: "userflow-tooltip-surface",
+    pointerEvents: "box-none",
+    children: [currentStep.backdrop ? /*#__PURE__*/_jsx(TooltipCutout, {
+      targetRect: layout.targetHighlightRect,
+      backdropColor: theme.backdropColor,
+      backdropOpacity: backdropOpacity,
+      targetBlocked: currentStep.tooltipTargetBlocked
+    }) : null, /*#__PURE__*/_jsx(TooltipBubble, {
+      chrome: chrome,
+      notchPosition: layout.notchPosition,
+      onLayout: onCardLayout,
+      style: {
+        position: 'absolute',
+        left: layout.cardPosition.x,
+        top: layout.cardPosition.y,
+        ...cardLayoutStyle
+      },
+      children: cardBody
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  root: {
+    ...ABSOLUTE_FILL
+  },
+  center: {
+    ...ABSOLUTE_FILL,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  fallbackCard: {
+    maxHeight: '80%',
+    flexShrink: 1
+  },
+  fallbackFill: {
+    flexShrink: 1
+  },
+  waitingCard: {
+    width: '100%'
+  },
+  scroll: {
+    flexGrow: 0,
+    flexShrink: 1
+  },
+  scrollContent: {
+    flexGrow: 1
+  },
+  missingTitle: {
+    fontWeight: '700',
+    marginBottom: 8
+  }
+});
+//# sourceMappingURL=TooltipSurface.js.map