@userflow-tech/react-native 0.1.0

package/lib/commonjs/surfaces/TooltipSurface.js

@@ -0,0 +1,638 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TooltipSurface = TooltipSurface;
+var React = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _AnchorRegistry = require("../anchors/AnchorRegistry.js");
+var _animationFrame = require("../anchors/animationFrame.js");
+var _FiberScanRoot = require("../anchors/fiber/FiberScanRoot.js");
+var _resolveAnchorHost = require("../anchors/resolveAnchorHost.js");
+var _resolveManualAnchorId = require("../anchors/resolveManualAnchorId.js");
+var _scrollAnchorIntoView = require("../anchors/scrollAnchorIntoView.js");
+var _scrollConfig = require("../anchors/scrollConfig.js");
+var _targetPressMonitor = require("../anchors/targetPressMonitor.js");
+var _RichContentRenderer = require("../content/RichContentRenderer.js");
+var _CloseButton = require("./CloseButton.js");
+var _resolveCloseButtonColor = require("./resolveCloseButtonColor.js");
+var _MadeWithUserflow = require("./MadeWithUserflow.js");
+var _ProgressBar = require("./ProgressBar.js");
+var _absoluteFill = require("./absoluteFill.js");
+var _parseBackdropOpacity = require("./parseBackdropOpacity.js");
+var _progress = require("./progress.js");
+var _safeArea = require("./safeArea.js");
+var _themeChrome = require("./themeChrome.js");
+var _TooltipBubble = require("./tooltip/TooltipBubble.js");
+var _TooltipCutout = require("./tooltip/TooltipCutout.js");
+var _computeTooltipPosition = require("./tooltip/computeTooltipPosition.js");
+var _inferTooltipPlacement = require("./tooltip/inferTooltipPlacement.js");
+var _parseBackdropPadding = require("./tooltip/parseBackdropPadding.js");
+var _rect = require("./tooltip/rect.js");
+var _resolveTooltipLayout = require("./resolveTooltipLayout.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/** 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.
+ */
+function TooltipSurface({
+  engine,
+  session,
+  currentStep,
+  theme,
+  lookupAttribute
+}) {
+  const version = session.version;
+  const chrome = (0, _themeChrome.resolveBubbleChrome)(theme, 'tooltip');
+  const progress = (0, _progress.resolveStepProgress)(version, currentStep.id);
+  const showClose = !version.closeDisabled;
+  const backdropOpacity = (0, _parseBackdropOpacity.parseBackdropOpacity)(theme.backdropOpacity);
+  const backdropPadding = (0, _parseBackdropPadding.parseBackdropPadding)(currentStep.backdropPadding);
+  const anchorId = (0, _resolveManualAnchorId.resolveManualAnchorId)(currentStep.selector?.css);
+  const desiredPlacement = normalizePlacement(currentStep.tooltipPlacement);
+  const behavior = missingBehavior(theme);
+  const insets = (0, _safeArea.useUserflowSafeAreaInsets)();
+  const centerPaddingStyle = (0, _resolveTooltipLayout.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.anchorRegistry.subscribe(bump);
+    const unsubScan = _FiberScanRoot.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 ((0, _rect.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 = _reactNative.Dimensions.get('window');
+    const scrollPadding = (0, _scrollConfig.getScrollPadding)();
+    return (0, _rect.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 ((0, _rect.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
+        } : {})
+      };
+      (0, _scrollAnchorIntoView.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 = (0, _resolveAnchorHost.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) {
+        (0, _resolveAnchorHost.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) (0, _resolveAnchorHost.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 = _reactNative.Dimensions.addEventListener('change', resolveTarget);
+    const onKeyboardShow = event => {
+      setKeyboardBottomInset(Math.max(0, event.endCoordinates?.height ?? 0));
+      resolveTarget();
+    };
+    const onKeyboardHide = () => {
+      setKeyboardBottomInset(0);
+      resolveTarget();
+    };
+    const kbShow = _reactNative.Keyboard.addListener('keyboardDidShow', onKeyboardShow);
+    const kbHide = _reactNative.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;
+    }
+    (0, _animationFrame.addAnimationFrameCallback)(remeasureResolvedHost);
+    return () => {
+      (0, _animationFrame.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 = _reactNative.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 = (0, _resolveTooltipLayout.resolveTooltipCardMaxWidth)(theme, currentStep.width, windowSize.width);
+  const cardLayoutStyle = (0, _resolveTooltipLayout.resolveTooltipCardLayout)(cardMaxWidth, windowSize.width);
+  const buttonsAlign = (0, _resolveTooltipLayout.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 = (0, _inferTooltipPlacement.inferTooltipPlacement)({
+      target,
+      bubbleSize,
+      notchSize: chrome.notchSize,
+      windowSize,
+      currentPlacement: placementRef.current,
+      desiredPlacement
+    });
+    return {
+      placement: nextPlacement,
+      ...(0, _computeTooltipPosition.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.targetPressMonitor.clear();
+      return;
+    }
+    _targetPressMonitor.targetPressMonitor.set({
+      getRect: () => targetRef.current,
+      onPress: () => {
+        void engine.handleActions(targetActions);
+      }
+    });
+    return () => {
+      _targetPressMonitor.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__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.root,
+      testID: "userflow-tooltip-surface",
+      pointerEvents: "box-none",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [styles.center, centerPaddingStyle],
+        pointerEvents: "box-none",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          testID: "userflow-tooltip-waiting",
+          accessibilityViewIsModal: true,
+          pointerEvents: "auto",
+          style: [chrome.shadowStyle, styles.waitingCard, cardLayoutStyle, {
+            borderRadius: chrome.borderRadius,
+            backgroundColor: chrome.backgroundColor
+          }],
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: [chrome.fillStyle, {
+              padding: chrome.contentPadding,
+              alignItems: 'center'
+            }],
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
+              color: theme.fontColor
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [showClose ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CloseButton.CloseButton, {
+      onPress: endAsUserClosed,
+      color: (0, _resolveCloseButtonColor.resolveCloseButtonColor)(theme)
+    }) : null, progressTop ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressBar.ProgressBar, {
+      ...progressBarProps,
+      position: "TOP"
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+      testID: "userflow-flow-scroll",
+      style: styles.scroll,
+      contentContainerStyle: [styles.scrollContent, {
+        paddingHorizontal: contentPadding,
+        paddingTop: contentPadding,
+        paddingBottom: showBranding ? _MadeWithUserflow.MADE_WITH_USERFLOW_GAP : contentPadding
+      }],
+      keyboardShouldPersistTaps: "handled",
+      nestedScrollEnabled: true,
+      bounces: false,
+      children: showMissingUi ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        testID: "userflow-tooltip-missing",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.missingTitle, {
+            color: theme.fontColor,
+            fontSize: theme.fontSize
+          }],
+          children: "Target not found"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_RichContentRenderer.RichContentRenderer, {
+        content: currentStep.content,
+        buttons: currentStep.buttons,
+        theme: theme,
+        sessionData: session.data,
+        lookupAttribute: lookupAttribute,
+        defaultButtonsAlign: buttonsAlign,
+        onActions: actions => {
+          void engine.handleActions(actions);
+        }
+      })
+    }), progressBottom ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressBar.ProgressBar, {
+      ...progressBarProps,
+      position: "BOTTOM"
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_MadeWithUserflow.MadeWithUserflow, {
+      company: session.flow.company,
+      color: theme.fontColor,
+      contentPadding: contentPadding
+    })]
+  });
+  if (showAsBubbleFallback || showMissingUi) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.root,
+      testID: "userflow-tooltip-surface",
+      pointerEvents: "box-none",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [styles.center, centerPaddingStyle],
+        pointerEvents: "box-none",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: [chrome.fillStyle, styles.fallbackFill],
+            children: cardBody
+          })
+        })
+      })
+    });
+  }
+  if (!layout || !target) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.root,
+    testID: "userflow-tooltip-surface",
+    pointerEvents: "box-none",
+    children: [currentStep.backdrop ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipCutout.TooltipCutout, {
+      targetRect: layout.targetHighlightRect,
+      backdropColor: theme.backdropColor,
+      backdropOpacity: backdropOpacity,
+      targetBlocked: currentStep.tooltipTargetBlocked
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipBubble.TooltipBubble, {
+      chrome: chrome,
+      notchPosition: layout.notchPosition,
+      onLayout: onCardLayout,
+      style: {
+        position: 'absolute',
+        left: layout.cardPosition.x,
+        top: layout.cardPosition.y,
+        ...cardLayoutStyle
+      },
+      children: cardBody
+    })]
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  root: {
+    ..._absoluteFill.ABSOLUTE_FILL
+  },
+  center: {
+    ..._absoluteFill.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