@userflow-tech/react-native 0.1.1 → 0.3.0

package/src/pairing/PreviewModeBanner.tsx

@@ -1,10 +1,38 @@
 import type { PairingEngineState } from '@userflow-tech/core';
 import * as React from 'react';
-import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
+
+import { ChromeBarTransition, useChromeBarMounted } from '../authoring/chrome/ChromeBarTransition';
+import { ChromeButton } from '../authoring/chrome/ChromeButton';
+import { ChromeDialog } from '../authoring/chrome/ChromeDialog';
+import { ChromeTooltip } from '../authoring/chrome/ChromeTooltip';
+import { ChromeTopBar } from '../authoring/chrome/ChromeTopBar';
+import { doubleTapMonitor } from '../authoring/chrome/doubleTapMonitor';
+import { useReportPreviewBannerHeight } from '../surfaces/surfaceLayoutInsets';
+
+import { resolvePreviewChrome, type PreviewChrome } from './resolvePreviewChrome';
+
+type VisiblePreviewChrome = Extract<PreviewChrome, { visible: true }>;
+type ConfirmingKind = 'exit' | 'restart';
+
+const ONBOARDING_COPY = 'Double tap anywhere to access the menu';
+/** A short blip stays quiet. Longer than this, the hidden bar comes back until the socket recovers. */
+export const RECONNECT_REVEAL_DELAY_MS = 2000;
 
 export interface PreviewModeBannerProps {
   state: PairingEngineState;
   onExit: () => void;
+  onRestart?: () => void;
+  /** True while a chrome confirm dialog is open, so the provider can trap host a11y. */
+  onConfirmingChange?: (open: boolean) => void;
+  /** Hide the preview bar while the element picker is using the same top slot. */
+  suppressed?: boolean | undefined;
+  /**
+   * Hide default-tone chrome without giving the top slot to the picker.
+   * Error tone still shows. Set for the brief intro after a new pairing and
+   * for the stretch after element selection until the Builder starts a preview.
+   */
+  held?: boolean | undefined;
 }
 
 /**
@@ -13,68 +41,283 @@ export interface PreviewModeBannerProps {
 export function PreviewModeBanner({
   state,
   onExit,
+  onRestart,
+  onConfirmingChange,
+  suppressed = false,
+  held = false,
 }: PreviewModeBannerProps): React.ReactElement | null {
-  if (!state.previewActive && state.status === 'idle') return null;
-  if (
-    !state.previewActive &&
-    state.status !== 'token_expired' &&
-    state.status !== 'device_already_paired' &&
-    state.status !== 'error'
-  ) {
-    return null;
+  const setBannerHeight = useReportPreviewBannerHeight();
+  const chrome = resolvePreviewChrome(state);
+  const [chromeShown, setChromeShown] = React.useState(true);
+  const [showOnboarding, setShowOnboarding] = React.useState(false);
+  const [barHeight, setBarHeight] = React.useState(0);
+  const [reconnectRevealed, setReconnectRevealed] = React.useState(false);
+  const reconnectRevealedRef = React.useRef(reconnectRevealed);
+  reconnectRevealedRef.current = reconnectRevealed;
+  const armedGenerationRef = React.useRef<number | null>(null);
+  const isError = chrome.visible && chrome.tone === 'error';
+  const visible =
+    chrome.visible && !suppressed && (isError || (!held && (chromeShown || reconnectRevealed)));
+  const [confirming, setConfirming] = React.useState<ConfirmingKind | null>(null);
+  const showRestart = Boolean(state.canRestartPreview) && !isError;
+  const showDialog = confirming != null && visible && !isError;
+  // Keep the bar mounted through its slide-out (double-tap hide, preview end,
+  // or picker suppression), rendering the last known chrome while it leaves.
+  const barMounted = useChromeBarMounted(visible);
+  const lastVisibleChromeRef = React.useRef<VisiblePreviewChrome | null>(null);
+  if (chrome.visible) {
+    lastVisibleChromeRef.current = chrome;
   }
+  const barChrome = chrome.visible ? chrome : lastVisibleChromeRef.current;
+
+  React.useEffect(() => {
+    if (!chrome.visible) {
+      armedGenerationRef.current = null;
+      setChromeShown(true);
+      setShowOnboarding(false);
+      setBarHeight(0);
+      setReconnectRevealed(false);
+      return;
+    }
+    if (isError) {
+      setChromeShown(true);
+      setShowOnboarding(false);
+      return;
+    }
+    if (armedGenerationRef.current !== state.pairingSessionGeneration) {
+      armedGenerationRef.current = state.pairingSessionGeneration;
+      setChromeShown(true);
+      setShowOnboarding(true);
+    }
+  }, [chrome.visible, isError, state.pairingSessionGeneration]);
+
+  React.useEffect(() => {
+    if (!chrome.visible || held || state.status !== 'reconnecting') return;
+    const timer = setTimeout(() => setReconnectRevealed(true), RECONNECT_REVEAL_DELAY_MS);
+    return () => clearTimeout(timer);
+  }, [chrome.visible, held, state.status]);
+
+  React.useEffect(() => {
+    if (chrome.visible && state.status === 'reconnecting') return;
+    // An exit dialog opened from the revealed bar must survive recovery.
+    // Dropping the reveal immediately would unmount that dialog.
+    if (chrome.visible && confirming != null) return;
+    setReconnectRevealed(false);
+  }, [chrome.visible, confirming, state.status]);
+
+  React.useEffect(() => {
+    if (!visible || isError) {
+      setConfirming(null);
+      return;
+    }
+    if (confirming === 'restart' && !state.canRestartPreview) {
+      setConfirming(null);
+    }
+  }, [confirming, isError, state.canRestartPreview, visible]);
+
+  React.useEffect(() => {
+    if (!chrome.visible) {
+      setBannerHeight(0);
+      return;
+    }
+    if (suppressed) return;
+    // Held chrome is absent, and nothing else is reporting this slot. An error
+    // bar still shows, so it keeps the inset.
+    if (held && !isError) {
+      setBannerHeight(0);
+      return;
+    }
+    if (!chromeShown && !isError && !reconnectRevealed) {
+      setBannerHeight(0);
+      return;
+    }
+    if (barHeight > 0) {
+      setBannerHeight(barHeight);
+    }
+  }, [
+    barHeight,
+    chrome.visible,
+    chromeShown,
+    held,
+    isError,
+    reconnectRevealed,
+    setBannerHeight,
+    suppressed,
+  ]);
+
+  React.useEffect(() => {
+    // Navigate-mode picking uses this same singleton. Only drop the subscription
+    // we installed — set(null) here would clear that owner when pairing chrome
+    // changes while this bar is already suppressed.
+    if (!chrome.visible || suppressed || isError || held) {
+      return;
+    }
+    const subscription = {
+      onDoubleTap: () => {
+        setShowOnboarding(false);
+        // The reveal keeps the bar up regardless of chromeShown, so toggling
+        // chromeShown alone would look like a no-op and then pin the bar on
+        // after recovery. A double tap on a revealed bar hides it.
+        if (reconnectRevealedRef.current) {
+          setReconnectRevealed(false);
+          setChromeShown(false);
+          return;
+        }
+        setChromeShown((shown) => !shown);
+      },
+    };
+    doubleTapMonitor.set(subscription);
+    return () => {
+      doubleTapMonitor.clearIfCurrent(subscription);
+    };
+  }, [chrome.visible, held, isError, suppressed]);
+
+  React.useEffect(() => {
+    onConfirmingChange?.(showDialog);
+  }, [showDialog, onConfirmingChange]);
+
+  React.useEffect(() => {
+    return () => {
+      onConfirmingChange?.(false);
+    };
+  }, [onConfirmingChange]);
+
+  const onMeasureHeight = React.useCallback((height: number) => {
+    setBarHeight(Math.max(0, height));
+  }, []);
+
+  const onLeftPress = React.useCallback(() => {
+    if (isError) {
+      onExit();
+      return;
+    }
+    setConfirming('exit');
+  }, [isError, onExit]);
+
+  const onRightPress = React.useCallback(() => {
+    if (isError || !state.canRestartPreview) return;
+    setConfirming('restart');
+  }, [isError, state.canRestartPreview]);
+
+  const closeDialog = React.useCallback(() => {
+    setConfirming(null);
+  }, []);
+
+  const confirmExit = React.useCallback(() => {
+    setConfirming(null);
+    onExit();
+  }, [onExit]);
 
-  const needsRescan = state.needsRescan;
-  // No pairing id means the session never started (e.g. init failed), so
-  // "Pairing ended" would misdescribe it.
-  const neverPaired = state.status === 'error' && !state.previewActive && state.pairingId === null;
-  const title = neverPaired
-    ? 'Preview unavailable'
-    : needsRescan
-      ? 'Pairing ended'
-      : 'Preview mode';
-  const detail =
-    state.lastError ??
-    (state.status === 'reconnecting'
-      ? 'Reconnecting…'
-      : state.status === 'connecting'
-        ? 'Connecting to Builder…'
-        : // Mirrors the Builder's own wording. Without this the banner reads
-          // "Paired" while the flow is absent, which looks like a broken preview
-          // rather than a condition that has not matched yet.
-          state.awaitingStartCondition
-          ? 'Waiting for auto-start condition to trigger…'
-          : 'Paired with Userflow Builder');
+  const confirmRestart = React.useCallback(() => {
+    setConfirming(null);
+    onRestart?.();
+  }, [onRestart]);
+
+  if (!barMounted && !showDialog) return null;
+
+  const tooltipVisible = visible && showOnboarding && !isError && !showDialog;
 
   return (
-    <View style={styles.wrap} pointerEvents="box-none">
-      <View style={[styles.banner, needsRescan ? styles.bannerWarn : styles.bannerActive]}>
-        <View style={styles.textCol}>
-          <Text style={styles.title}>{title}</Text>
-          <Text style={styles.detail} numberOfLines={2}>
-            {needsRescan ? `${detail} Re-scan the QR code to continue.` : detail}
-          </Text>
-        </View>
-        {!needsRescan ? (
-          <Pressable
-            accessibilityRole="button"
+    <View
+      accessibilityViewIsModal={showDialog}
+      pointerEvents="box-none"
+      style={[styles.wrap, showDialog ? styles.wrapConfirming : null]}
+      testID="userflow-preview-banner"
+    >
+      {showDialog && confirming === 'exit' ? (
+        // Dialog first so its scrim paints under the bar (Figma: Overlay then Button Sheet).
+        <ChromeDialog
+          body="You will need to pair your device again in Userflow to preview this flow."
+          onClose={closeDialog}
+          title="Exit preview mode?"
+        >
+          <ChromeButton
+            accessibilityLabel="Cancel"
+            flex
+            label="Cancel"
+            onPress={closeDialog}
+            testID="userflow-preview-exit-cancel"
+            variant="secondary"
+          />
+          <ChromeButton
             accessibilityLabel="Exit preview"
-            onPress={onExit}
-            style={styles.button}
-          >
-            <Text style={styles.buttonLabel}>Exit preview</Text>
-          </Pressable>
-        ) : (
-          <Pressable
-            accessibilityRole="button"
-            accessibilityLabel="Dismiss pairing message"
-            onPress={onExit}
-            style={styles.button}
+            flex
+            icon="arrow-left-from-bracket"
+            label="Exit"
+            onPress={confirmExit}
+            testID="userflow-preview-exit-confirm"
+          />
+        </ChromeDialog>
+      ) : null}
+      {showDialog && confirming === 'restart' ? (
+        <ChromeDialog
+          body="This will restart the flow from the first step."
+          onClose={closeDialog}
+          title="Restart flow?"
+        >
+          <ChromeButton
+            accessibilityLabel="Cancel"
+            flex
+            label="Cancel"
+            onPress={closeDialog}
+            testID="userflow-preview-restart-cancel"
+            variant="secondary"
+          />
+          <ChromeButton
+            accessibilityLabel="Restart flow"
+            flex
+            icon="arrow-rotate-left"
+            label="Restart"
+            onPress={confirmRestart}
+            testID="userflow-preview-restart-confirm"
+          />
+        </ChromeDialog>
+      ) : null}
+      {barMounted && barChrome ? (
+        <ChromeBarTransition edge="top" pointerEvents="box-none" visible={visible}>
+          <ChromeTopBar
+            accessibilityElementsHidden={showDialog}
+            importantForAccessibility={showDialog ? 'no-hide-descendants' : undefined}
+            label={barChrome.label}
+            numberOfLines={barChrome.numberOfLines}
+            onMeasureHeight={onMeasureHeight}
+            tone={barChrome.tone}
+            left={
+              <ChromeButton
+                accessibilityLabel={isError ? 'Dismiss pairing message' : 'Exit preview'}
+                icon="arrow-left-from-bracket"
+                onPress={onLeftPress}
+                testID="userflow-preview-exit"
+                variant="icon"
+              />
+            }
+            right={
+              showRestart ? (
+                <ChromeButton
+                  accessibilityLabel="Restart flow"
+                  icon="arrow-rotate-left"
+                  onPress={onRightPress}
+                  testID="userflow-preview-restart"
+                  variant="icon"
+                />
+              ) : undefined
+            }
+          />
+        </ChromeBarTransition>
+      ) : null}
+      {tooltipVisible ? (
+        <View pointerEvents="none" style={[styles.tooltip, { top: barHeight }]}>
+          <ChromeTooltip
+            key={state.pairingSessionGeneration}
+            onDismiss={() => {
+              setShowOnboarding(false);
+              setChromeShown(false);
+            }}
           >
-            <Text style={styles.buttonLabel}>Dismiss</Text>
-          </Pressable>
-        )}
-      </View>
+            {ONBOARDING_COPY}
+          </ChromeTooltip>
+        </View>
+      ) : null}
     </View>
   );
 }
@@ -85,46 +328,16 @@ const styles = StyleSheet.create({
     top: 0,
     left: 0,
     right: 0,
+    bottom: 0,
     zIndex: 1000,
   },
-  banner: {
-    marginTop: 48,
-    marginHorizontal: 12,
-    borderRadius: 10,
-    paddingHorizontal: 12,
-    paddingVertical: 10,
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 10,
-  },
-  bannerActive: {
-    backgroundColor: 'rgba(17, 24, 39, 0.92)',
-  },
-  bannerWarn: {
-    backgroundColor: 'rgba(127, 29, 29, 0.94)',
+  wrapConfirming: {
+    zIndex: 1200,
   },
-  textCol: {
-    flex: 1,
-  },
-  title: {
-    color: '#ffffff',
-    fontSize: 13,
-    fontWeight: '700',
-  },
-  detail: {
-    color: 'rgba(255,255,255,0.85)',
-    fontSize: 12,
-    marginTop: 2,
-  },
-  button: {
-    paddingHorizontal: 10,
-    paddingVertical: 8,
-    borderRadius: 8,
-    backgroundColor: 'rgba(255,255,255,0.14)',
-  },
-  buttonLabel: {
-    color: '#ffffff',
-    fontSize: 12,
-    fontWeight: '600',
+  tooltip: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    alignItems: 'center',
   },
 });

package/src/pairing/deepLink.ts

@@ -1,18 +1,35 @@
+import type { PairingPurpose } from '@userflow-tech/core';
+
 /**
  * Parse Builder pairing deep links:
- *   {scheme_id}://?pairing_token=<jwt>
+ *   {scheme_id}://?pairing_token=<jwt>[&purpose=preview|select_element]
  *
- * `scheme_id` is typically `userflow-<digits>`.
+ * `scheme_id` is `userflow-` followed by an opaque, backend-generated id.
  */
 
 export interface PairingDeepLink {
   scheme: string;
   pairingToken: string;
+  /** Absent when the link has no `purpose`, or one this SDK does not know. */
+  purpose?: PairingPurpose;
+}
+
+const PAIRING_PURPOSES: readonly PairingPurpose[] = ['preview', 'select_element'];
+
+export function parsePairingPurpose(value: string | null | undefined): PairingPurpose | null {
+  return PAIRING_PURPOSES.find((purpose) => purpose === value) ?? null;
 }
 
 /** Scheme prefix shared by preview and pairing links. */
 const USERFLOW_SCHEME_PREFIX = 'userflow-';
-const USERFLOW_SCHEME = /^userflow-\d+$/i;
+/**
+ * Environment scheme_id shape — must match Expo plugin registration
+ * (`packages/expo/plugin/withUserflow.ts`). Everything after `userflow-` is an
+ * opaque id owned by the backend (today 26 base32 chars), so only check that it
+ * is one or more alphanumeric segments joined by single hyphens. Digit-only ids
+ * used in local configs also pass.
+ */
+const USERFLOW_SCHEME = /^userflow-[a-z0-9]+(?:-[a-z0-9]+)*$/i;
 
 /**
  * Why a URL was not treated as a pairing link.
@@ -105,12 +122,13 @@ export function inspectPairingDeepLink(url: string | null | undefined): PairingD
   if (!isPair) return { ok: false, reason: 'not-pair-path' };
 
   // Only once the URL is known to target pairing does the scheme shape matter.
-  // Checking it earlier would misreport preview links on non-numeric schemes.
+  // Checking it earlier would misreport preview links on malformed schemes.
   if (!USERFLOW_SCHEME.test(scheme)) return { ok: false, reason: 'bad-scheme-shape' };
 
   if (!pairingToken) return { ok: false, reason: 'missing-token' };
 
-  return { ok: true, link: { scheme, pairingToken } };
+  const purpose = parsePairingPurpose(parsed.searchParams.get('purpose'));
+  return { ok: true, link: { scheme, pairingToken, ...(purpose ? { purpose } : {}) } };
 }
 
 /**

package/src/pairing/deviceId.ts

@@ -0,0 +1,43 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+import { uuid } from '../anonymousId';
+
+/**
+ * Stable id for this install on the pairing channel.
+ *
+ * The server allows one device per pairing topic and only the same id may
+ * rejoin while the previous presence lingers. The id identifies the device,
+ * not the user, so `reset()` and `exitPreview()` must not clear it.
+ */
+export const PAIRING_DEVICE_ID_STORAGE_KEY = 'userflow:pairingDeviceId';
+
+let memoized: string | null = null;
+
+export async function getOrCreatePairingDeviceId(): Promise<string> {
+  if (memoized !== null) return memoized;
+
+  try {
+    const stored = await AsyncStorage.getItem(PAIRING_DEVICE_ID_STORAGE_KEY);
+    if (typeof stored === 'string' && stored.length > 0) {
+      memoized = stored;
+      return stored;
+    }
+  } catch {
+    memoized = uuid();
+    return memoized;
+  }
+
+  const created = uuid();
+  memoized = created;
+  try {
+    await AsyncStorage.setItem(PAIRING_DEVICE_ID_STORAGE_KEY, created);
+  } catch {
+    // Keep the in-memory id for this process. A later launch may mint another.
+  }
+  return created;
+}
+
+/** @internal Clears the process memo so tests can simulate a new launch. */
+export function resetPairingDeviceIdForTests(): void {
+  memoized = null;
+}

package/src/pairing/diagnostics.ts

@@ -66,6 +66,14 @@ export function pairingConnectFailedMessage(reason: string): string {
   );
 }
 
+/**
+ * Engine-reported pairing failure (`lastError`). The preview top bar no longer
+ * has a second line for this, so it must reach Metro under the `[Userflow]` prefix.
+ */
+export function pairingPreviewErrorMessage(reason: string): string {
+  return `${PREFIX} Builder pairing: ${reason}`;
+}
+
 /** A pairing link arrived without the `pairing_token` query parameter. */
 export function pairingMissingTokenMessage(url: string): string {
   return (
@@ -83,7 +91,7 @@ export function pairingForeignSchemeMessage(url: string): string {
   return (
     `${PREFIX} Ignoring "${redactPairingToken(url)}": this is a Builder pairing ` +
     `link, but it was opened with a scheme Userflow does not own. Use your ` +
-    `environment's scheme_id ("userflow-" followed by digits) exactly as the ` +
+    `environment's scheme_id ("userflow-" followed by its id) exactly as the ` +
     `pairing QR code provides it — do not substitute your app's own scheme. ` +
     `Register it via the @userflow-tech/react-native plugin ({ schemeId: 'userflow-…' }) and ` +
     `rebuild the native app; a Metro reload is not enough.`
@@ -123,13 +131,15 @@ export function pairingListenerSetupFailedMessage(reason: string): string {
 
 /**
  * The URL used a `userflow-` scheme that is not a valid `scheme_id`. Pairing
- * requires `userflow-` followed by digits, so an arbitrary `userflow-*` scheme
- * can match preview links but not pairing ones.
+ * requires `userflow-` followed by one or more alphanumeric segments joined by
+ * single hyphens. A malformed `userflow-*` scheme can match preview links but
+ * not pairing ones.
  */
 export function pairingSchemeShapeMessage(url: string): string {
   return (
     `${PREFIX} Ignoring Builder pairing link "${redactPairingToken(url)}": the scheme must be your ` +
-    `environment's scheme_id — "userflow-" followed by digits (e.g. userflow-257587). ` +
+    `environment's scheme_id — "userflow-" followed by letters and digits, optionally ` +
+    `split by single hyphens (e.g. userflow-v7twv2fw2ja2jaco7kesvowmem). ` +
     `Check the schemeId passed to the @userflow-tech/react-native plugin.`
   );
 }

package/src/pairing/elementPickerRelay.ts

@@ -0,0 +1,100 @@
+import { isPairingPushAckTimeout } from '@userflow-tech/core';
+import type { PairingRelayEvent } from '@userflow-tech/protocol';
+
+import {
+  elementPickerController,
+  type ElementPickerResult,
+} from '../authoring/elementPickerController';
+
+export interface ElementPickerRelayEngine {
+  onRelay: (handler: (event: PairingRelayEvent, payload: unknown) => void) => () => void;
+  sendRelay: (event: PairingRelayEvent, payload: unknown) => Promise<unknown>;
+}
+
+function asRecord(payload: unknown): Record<string, unknown> {
+  return payload && typeof payload === 'object' ? (payload as Record<string, unknown>) : {};
+}
+
+function idempotencyKeyOf(payload: unknown): string | null {
+  const key = asRecord(payload)['idempotency_key'];
+  return typeof key === 'string' && key.length > 0 ? key : null;
+}
+
+function resultPayload(key: string, result: ElementPickerResult): Record<string, unknown> {
+  return {
+    idempotency_key: key,
+    ok: true,
+    autoData: result.autoData,
+    text: result.text ?? null,
+    ...(result.screenshot
+      ? {
+          screenshot: {
+            dataUrl: result.screenshot.dataUrl,
+            width: result.screenshot.width,
+            height: result.screenshot.height,
+            targetX1: result.screenshot.targetX1,
+            targetY1: result.screenshot.targetY1,
+            targetX2: result.screenshot.targetX2,
+            targetY2: result.screenshot.targetY2,
+          },
+        }
+      : {}),
+  };
+}
+
+/**
+ * Bridge pairing-channel `selectElement*` events onto {@link elementPickerController}.
+ * UI-free: the overlay (and QA harness) own the actual picking.
+ */
+export function bindElementPickerRelay(engine: ElementPickerRelayEngine): () => void {
+  if (typeof engine.onRelay !== 'function' || typeof engine.sendRelay !== 'function') {
+    return () => undefined;
+  }
+  let ignoreNextCancelSend = false;
+
+  /** Result delivery: ignore ack timeouts; surface connection failures. */
+  const sendResult = async (key: string, result: ElementPickerResult): Promise<void> => {
+    try {
+      await engine.sendRelay('selectElementResult', resultPayload(key, result));
+    } catch (error) {
+      if (typeof isPairingPushAckTimeout === 'function' && isPairingPushAckTimeout(error)) {
+        return;
+      }
+      throw error;
+    }
+  };
+
+  /** Cancel is best-effort: ignore timeout and disconnect. */
+  const sendCancel = (key: string): void => {
+    void engine.sendRelay('selectElementCancel', { idempotency_key: key }).catch(() => undefined);
+  };
+
+  const unsub = engine.onRelay((event, payload) => {
+    if (event === 'selectElement') {
+      const key = idempotencyKeyOf(payload);
+      if (!key) return;
+      elementPickerController.beginSelection({
+        requestId: key,
+        onResult: (result) => sendResult(key, result),
+        onCancel: () => {
+          if (ignoreNextCancelSend) return;
+          sendCancel(key);
+        },
+      });
+      return;
+    }
+
+    if (event === 'selectElementCancel') {
+      ignoreNextCancelSend = true;
+      elementPickerController.cancel();
+      ignoreNextCancelSend = false;
+    }
+  });
+
+  return () => {
+    unsub();
+    ignoreNextCancelSend = true;
+    elementPickerController.cancel();
+    ignoreNextCancelSend = false;
+  };
+}