@getuserfeedback/react-native 1.3.8 → 1.3.9

package/dist/index.js

@@ -16,7 +16,6 @@ import { useResolvedHostViewport } from "./host-viewport.js";
 import { toCommandFlowId, toCommandSettlementError, toRetryWithoutFlowHandle, } from "./provider-command-helpers.js";
 import { clearProviderFlowHandleCache, createProviderFlowHandleCache, deleteCachedProviderFlowHandleId, deleteCachedProviderFlowId, getCachedProviderFlowHandleId, snapshotProviderFlowCommand, writeSettledProviderFlowHandleId, } from "./provider-flow-handle-cache.js";
 import { enqueueProviderNativeMessage, removeProviderNativeMessageId, removeProviderNativeMessageIds, replaceProviderNativeMessages, } from "./provider-message-queue.js";
-import { applyProviderOverlayFlowState, applyProviderOverlayHandleInvalidated, createDefaultProviderOverlayState, DEFAULT_PROVIDER_OVERLAY_VISIBILITY, updateProviderOverlayReadySequence, } from "./provider-overlay-state.js";
 import { cancelProviderStartupCommands, clearProviderPendingCommands, createProviderPendingCommandRegistry, getProviderPendingCommand, getProviderPendingCommandEntries, getProviderPendingCommands, hasDeliveredProviderPendingCommands, isProviderPendingMessageStartup, registerProviderPendingCommand, reissueProviderPendingCommand, takeProviderPendingCommand, } from "./provider-pending-commands.js";
 import { ProviderWidgetHostOverlay, toProviderWidgetHostStyle, toProviderWidgetSheetHostViewport, } from "./provider-widget-host-overlay.js";
 import { REACT_NATIVE_SDK_VERSION } from "./version.js";
@@ -34,6 +33,12 @@ const CLIENT_META = {
     loader: "sdk",
     transport: "loader",
 };
+const HIDDEN_PROVIDER_WIDGET_HOST_VISIBILITY = {
+    hostSourceVersion: null,
+    isVisible: false,
+    readySequence: null,
+    sourceKey: null,
+};
 const createUniqueId = (prefix) => {
     if (typeof globalThis.crypto !== "undefined" &&
         typeof globalThis.crypto.randomUUID === "function") {
@@ -71,14 +76,24 @@ const FallbackNativeView = (_a) => {
     var { children } = _a, props = __rest(_a, ["children"]);
     return createElement("div", props, children);
 };
-function resolveNativeView() {
-    var _a;
+const FallbackNativePressable = FallbackNativeView;
+const FallbackNativeText = FallbackNativeView;
+function resolveReactNativeComponents() {
+    var _a, _b, _c;
     try {
         const reactNativeModule = require("react-native");
-        return (_a = reactNativeModule.View) !== null && _a !== void 0 ? _a : FallbackNativeView;
+        return {
+            Pressable: (_a = reactNativeModule.Pressable) !== null && _a !== void 0 ? _a : FallbackNativePressable,
+            Text: (_b = reactNativeModule.Text) !== null && _b !== void 0 ? _b : FallbackNativeText,
+            View: (_c = reactNativeModule.View) !== null && _c !== void 0 ? _c : FallbackNativeView,
+        };
     }
-    catch (_b) {
-        return FallbackNativeView;
+    catch (_d) {
+        return {
+            Pressable: FallbackNativePressable,
+            Text: FallbackNativeText,
+            View: FallbackNativeView,
+        };
     }
 }
 const toIdentifyCommandPayload = (identifyInput, traitsOrOptions, options) => {
@@ -110,16 +125,15 @@ const toIdentifyCommandPayload = (identifyInput, traitsOrOptions, options) => {
 };
 export function GetUserFeedbackProvider({ autoInit = true, children, commandTimeoutMs = DEFAULT_COMMAND_TIMEOUT_MS, configureOptions, hostViewport, instanceId: instanceIdProp, initOptions, loaderUrl, onCommandError, onInvalidWebMessage, onWebMessage, source, webViewComponent, webViewProps, }) {
     var _a, _b;
-    const NativeView = useMemo(resolveNativeView, []);
+    const { Pressable: NativePressable, Text: NativeText, View: NativeView, } = useMemo(resolveReactNativeComponents, []);
     const [instanceId] = useState(() => { var _a; return (_a = normalizeOptionalString(instanceIdProp)) !== null && _a !== void 0 ? _a : createUniqueId("rn"); });
     const [nativeMessages, setNativeMessages] = useState([]);
-    const [widgetHostVisibility, setWidgetHostVisibility] = useState(DEFAULT_PROVIDER_OVERLAY_VISIBILITY);
+    const [widgetHostVisibility, setWidgetHostVisibility] = useState(HIDDEN_PROVIDER_WIDGET_HOST_VISIBILITY);
     const resolvedHostViewport = useResolvedHostViewport(hostViewport);
     const nativeMessagesRef = useRef([]);
     const pendingCommandsRef = useRef(createProviderPendingCommandRegistry());
     const hostEpochRef = useRef(0);
     const flowHandleCacheRef = useRef(createProviderFlowHandleCache());
-    const providerOverlayStateRef = useRef(createDefaultProviderOverlayState());
     const initOptionsRef = useRef(initOptions);
     const configureOptionsRef = useRef(configureOptions);
     const initOptionsKey = useMemo(() => toJsonKey(initOptions), [initOptions]);
@@ -145,7 +159,6 @@ export function GetUserFeedbackProvider({ autoInit = true, children, commandTime
         lastReadyRef.current = null;
         startupQueuedKeyRef.current = null;
         clearProviderFlowHandleCache(flowHandleCacheRef.current);
-        providerOverlayStateRef.current = createDefaultProviderOverlayState();
     }
     initOptionsRef.current = initOptions;
     configureOptionsRef.current = configureOptions;
@@ -357,16 +370,14 @@ export function GetUserFeedbackProvider({ autoInit = true, children, commandTime
             didReissueDeliveredCommands = reissueDeliveredPendingActionCommands();
         }
         lastReadyRef.current = Object.assign(Object.assign({}, event), { hostEpoch: hostEpochRef.current });
-        const nextVisibility = updateProviderOverlayReadySequence({
-            ready: {
-                hostSourceVersion: hostSourceVersionRef.current,
-                readySequence: event.readySequence,
-                sourceKey: event.sourceKey,
-            },
-            visibility: providerOverlayStateRef.current.visibility,
+        setWidgetHostVisibility((visibility) => {
+            if (!visibility.isVisible ||
+                visibility.sourceKey !== event.sourceKey ||
+                visibility.hostSourceVersion !== hostSourceVersionRef.current) {
+                return visibility;
+            }
+            return Object.assign(Object.assign({}, visibility), { readySequence: event.readySequence });
         });
-        providerOverlayStateRef.current = Object.assign(Object.assign({}, providerOverlayStateRef.current), { visibility: nextVisibility });
-        setWidgetHostVisibility(nextVisibility);
         enqueueStartupCommands({ force: previous !== null });
         startPendingCommandTimeouts();
         return didReissueDeliveredCommands;
@@ -392,8 +403,7 @@ export function GetUserFeedbackProvider({ autoInit = true, children, commandTime
             reissueDeliveredPendingActionCommands();
         }
         lastReadyRef.current = null;
-        providerOverlayStateRef.current = createDefaultProviderOverlayState();
-        setWidgetHostVisibility(providerOverlayStateRef.current.visibility);
+        setWidgetHostVisibility(HIDDEN_PROVIDER_WIDGET_HOST_VISIBILITY);
         pausePendingCommandTimeouts();
     }, [
         handleWidgetReady,
@@ -405,14 +415,10 @@ export function GetUserFeedbackProvider({ autoInit = true, children, commandTime
     }, []);
     const handleFlowHandleInvalidated = useCallback((flowHandleId) => {
         deleteCachedFlowHandleId(flowHandleId);
-        const nextState = applyProviderOverlayHandleInvalidated({
-            flowHandleId,
-            state: providerOverlayStateRef.current,
-        });
-        providerOverlayStateRef.current = nextState;
-        setWidgetHostVisibility(nextState.visibility);
+        setWidgetHostVisibility((visibility) => visibility.flowHandleId === flowHandleId
+            ? Object.assign(Object.assign({}, visibility), { flowHandleId: undefined }) : visibility);
     }, [deleteCachedFlowHandleId]);
-    const handleFlowStateChanged = useCallback((detail, options) => {
+    const handleInstanceFlowStateChanged = useCallback((detail) => {
         if (detail.instanceId !== instanceId) {
             return;
         }
@@ -420,32 +426,25 @@ export function GetUserFeedbackProvider({ autoInit = true, children, commandTime
         if (!readyState) {
             return;
         }
-        const nextState = applyProviderOverlayFlowState({
-            detail,
-            origin: options.origin,
-            ready: {
-                hostSourceVersion: hostSourceVersionRef.current,
-                readySequence: readyState.readySequence,
-                sourceKey: readyState.sourceKey,
-            },
-            state: providerOverlayStateRef.current,
+        const isVisible = detail.isOpen || detail.isLoading;
+        setWidgetHostVisibility({
+            flowHandleId: detail.flowHandleId,
+            hostSourceVersion: hostSourceVersionRef.current,
+            isVisible,
+            readySequence: readyState.readySequence,
+            sourceKey: readyState.sourceKey,
         });
-        providerOverlayStateRef.current = nextState;
-        setWidgetHostVisibility(nextState.visibility);
     }, [instanceId]);
     const handleWebMessage = useCallback((message) => {
         var _a;
         if (message.kind === "hostEvent" &&
-            message.event.name === "instance:handle:invalidated") {
+            message.event.name === "instance:handle:invalidated" &&
+            message.event.detail.handleKind === "flow") {
             handleFlowHandleInvalidated(message.event.detail.handleId);
         }
-        if (message.kind === "hostEvent" &&
-            message.event.name === "instance:flow:state-changed") {
-            handleFlowStateChanged(message.event.detail, { origin: "handle" });
-        }
         if (message.kind === "hostEvent" &&
             message.event.name === "instance:flow:state-changed:instance") {
-            handleFlowStateChanged(message.event.detail, { origin: "aggregate" });
+            handleInstanceFlowStateChanged(message.event.detail);
         }
         if (message.kind === "hostEvent" &&
             message.event.name === "instance:command:settled") {
@@ -502,7 +501,7 @@ export function GetUserFeedbackProvider({ autoInit = true, children, commandTime
         onWebMessage === null || onWebMessage === void 0 ? void 0 : onWebMessage(message);
     }, [
         enqueueTransportCommand,
-        handleFlowStateChanged,
+        handleInstanceFlowStateChanged,
         handleFlowHandleInvalidated,
         onWebMessage,
     ]);
@@ -520,8 +519,7 @@ export function GetUserFeedbackProvider({ autoInit = true, children, commandTime
             return;
         }
         visibilitySourceKeyRef.current = hostSourceKey;
-        providerOverlayStateRef.current = createDefaultProviderOverlayState();
-        setWidgetHostVisibility(providerOverlayStateRef.current.visibility);
+        setWidgetHostVisibility(HIDDEN_PROVIDER_WIDGET_HOST_VISIBILITY);
     }, [hostSourceKey]);
     const contextValue = useMemo(() => ({
         instanceId,
@@ -608,11 +606,20 @@ export function GetUserFeedbackProvider({ autoInit = true, children, commandTime
         webViewComponent,
         webViewProps: Object.assign(Object.assign({}, webViewProps), { pointerEvents: isWidgetHostVisible ? "auto" : "none", style: composedWebViewStyle }),
     });
+    const handleWidgetHostClose = useCallback(() => {
+        enqueueCommand(Object.assign({ kind: "close" }, (widgetHostVisibility.flowHandleId === undefined
+            ? {}
+            : { flowHandleId: widgetHostVisibility.flowHandleId }))).catch(reportCommandError);
+    }, [enqueueCommand, reportCommandError, widgetHostVisibility.flowHandleId]);
     return createElement(GetUserFeedbackNativeContext.Provider, {
         value: contextValue,
     }, children, createElement(ProviderWidgetHostOverlay, {
         isVisible: isWidgetHostVisible,
+        isCloseVisible: true,
+        nativePressable: NativePressable,
+        nativeText: NativeText,
         nativeView: NativeView,
+        onRequestClose: handleWidgetHostClose,
         sheetHostViewport,
     }, widgetHost));
 }

package/dist/provider-widget-host-overlay.d.ts

@@ -1,15 +1,21 @@
 import { type ComponentType, type ReactElement, type ReactNode } from "react";
 import type { WidgetHostProps } from "./widget-host.js";
 type NativeViewComponent = ComponentType<Record<string, unknown>>;
+type NativePressableComponent = ComponentType<Record<string, unknown>>;
+type NativeTextComponent = ComponentType<Record<string, unknown>>;
 export declare function toProviderWidgetSheetHostViewport(viewport: WidgetHostProps["hostViewport"]): WidgetHostProps["hostViewport"];
 export declare function toProviderWidgetHostStyle({ isVisible, webViewStyle, }: {
     isVisible: boolean;
     webViewStyle: unknown;
 }): unknown;
-export declare function ProviderWidgetHostOverlay({ children, isVisible, nativeView, sheetHostViewport, }: {
+export declare function ProviderWidgetHostOverlay({ children, isVisible, isCloseVisible, nativeView, nativePressable, nativeText, onRequestClose, sheetHostViewport, }: {
     children?: ReactNode;
+    isCloseVisible: boolean;
     isVisible: boolean;
+    nativePressable: NativePressableComponent;
+    nativeText: NativeTextComponent;
     nativeView: NativeViewComponent;
+    onRequestClose: () => void;
     sheetHostViewport: WidgetHostProps["hostViewport"];
 }): ReactElement;
 export {};

package/dist/provider-widget-host-overlay.js

@@ -38,6 +38,23 @@ const WIDGET_SHEET_STYLE = {
     shadowRadius: 18,
     elevation: 18,
 };
+const WIDGET_SHEET_CLOSE_STYLE = {
+    alignItems: "center",
+    backgroundColor: "rgba(15, 23, 42, 0.08)",
+    borderRadius: 18,
+    height: 36,
+    justifyContent: "center",
+    position: "absolute",
+    right: 12,
+    top: 12,
+    width: 72,
+    zIndex: 1,
+};
+const WIDGET_SHEET_CLOSE_TEXT_STYLE = {
+    color: "#0f172a",
+    fontSize: 14,
+    fontWeight: "600",
+};
 const VISIBLE_WIDGET_HOST_STYLE = {
     flex: 1,
 };
@@ -115,7 +132,7 @@ export function toProviderWidgetHostStyle({ isVisible, webViewStyle, }) {
         ? [visiblePresentationStyle, VISIBLE_WIDGET_HOST_STYLE]
         : VISIBLE_WIDGET_HOST_STYLE;
 }
-export function ProviderWidgetHostOverlay({ children, isVisible, nativeView, sheetHostViewport, }) {
+export function ProviderWidgetHostOverlay({ children, isVisible, isCloseVisible, nativeView, nativePressable, nativeText, onRequestClose, sheetHostViewport, }) {
     const widgetSheetStyle = sheetHostViewport
         ? Object.assign(Object.assign({}, WIDGET_SHEET_STYLE), { height: sheetHostViewport.height }) : Object.assign(Object.assign({}, WIDGET_SHEET_STYLE), { height: "86%" });
     const pointerEvents = isVisible ? "auto" : "none";
@@ -131,5 +148,15 @@ export function ProviderWidgetHostOverlay({ children, isVisible, nativeView, she
         pointerEvents,
         style: isVisible ? widgetSheetStyle : HIDDEN_WIDGET_HOST_STYLE,
         testID: "gx-widget-host-sheet",
-    }, children));
+    }, children, isVisible && isCloseVisible
+        ? createElement(nativePressable, {
+            accessibilityLabel: "Close widget",
+            accessibilityRole: "button",
+            onPress: onRequestClose,
+            style: WIDGET_SHEET_CLOSE_STYLE,
+            testID: "gx-widget-host-close",
+        }, createElement(nativeText, {
+            style: WIDGET_SHEET_CLOSE_TEXT_STYLE,
+        }, "Close"))
+        : null));
 }

package/dist/version.js

@@ -3,4 +3,4 @@ const reactNativeSdkVersion = typeof __GX_REACT_NATIVE_SDK_VERSION__ === "string
     : "";
 // Build scripts patch this fallback to the package version for published artifacts.
 // Source-linked workspace usage keeps the local fallback.
-export const REACT_NATIVE_SDK_VERSION = reactNativeSdkVersion.length > 0 ? reactNativeSdkVersion : "1.3.8";
+export const REACT_NATIVE_SDK_VERSION = reactNativeSdkVersion.length > 0 ? reactNativeSdkVersion : "1.3.9";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getuserfeedback/react-native",
-  "version": "1.3.8",
+  "version": "1.3.9",
   "description": "getuserfeedback React Native SDK",
   "keywords": [
     "getuserfeedback",
@@ -44,8 +44,8 @@
     "lint": "ultracite check ."
   },
   "dependencies": {
-    "@getuserfeedback/protocol": "^1.3.0",
-    "@getuserfeedback/sdk": "^0.7.1",
+    "@getuserfeedback/protocol": "^1.3.1",
+    "@getuserfeedback/sdk": "^0.7.2",
     "robot3": "^1.2.0"
   },
   "peerDependencies": {

package/dist/provider-overlay-state.d.ts

@@ -1,43 +0,0 @@
-export type ProviderOverlayVisibilityOrigin = "aggregate" | "handle";
-export type ProviderOverlayVisibility = {
-    flowHandleId: string | null;
-    hostSourceVersion: number | null;
-    isVisible: boolean;
-    origin: ProviderOverlayVisibilityOrigin | null;
-    readySequence: number | null;
-    sourceKey: string | null;
-};
-export type ProviderOverlayReadyIdentity = {
-    hostSourceVersion: number;
-    readySequence: number;
-    sourceKey: string;
-};
-export type ProviderOverlayFlowStateDetail = {
-    flowHandleId?: string;
-    isLoading: boolean;
-    isOpen: boolean;
-};
-export type ProviderOverlayState = {
-    visibility: ProviderOverlayVisibility;
-    visibleFlowHandleIds: Set<string>;
-};
-export type ProviderOverlayStateInput = {
-    visibility: ProviderOverlayVisibility;
-    visibleFlowHandleIds: ReadonlySet<string>;
-};
-export declare const DEFAULT_PROVIDER_OVERLAY_VISIBILITY: ProviderOverlayVisibility;
-export declare const createDefaultProviderOverlayState: () => ProviderOverlayState;
-export declare function updateProviderOverlayReadySequence({ ready, visibility, }: {
-    ready: ProviderOverlayReadyIdentity;
-    visibility: ProviderOverlayVisibility;
-}): ProviderOverlayVisibility;
-export declare function applyProviderOverlayFlowState({ detail, origin, ready, state, }: {
-    detail: ProviderOverlayFlowStateDetail;
-    origin: ProviderOverlayVisibilityOrigin;
-    ready: ProviderOverlayReadyIdentity;
-    state: ProviderOverlayStateInput;
-}): ProviderOverlayState;
-export declare function applyProviderOverlayHandleInvalidated({ flowHandleId, state, }: {
-    flowHandleId: string;
-    state: ProviderOverlayStateInput;
-}): ProviderOverlayState;

package/dist/provider-overlay-state.js

@@ -1,134 +0,0 @@
-export const DEFAULT_PROVIDER_OVERLAY_VISIBILITY = {
-    flowHandleId: null,
-    hostSourceVersion: null,
-    isVisible: false,
-    origin: null,
-    readySequence: null,
-    sourceKey: null,
-};
-export const createDefaultProviderOverlayState = () => ({
-    visibility: DEFAULT_PROVIDER_OVERLAY_VISIBILITY,
-    visibleFlowHandleIds: new Set(),
-});
-const toVisibleProviderOverlayVisibility = ({ flowHandleId, origin, ready, }) => ({
-    flowHandleId,
-    hostSourceVersion: ready.hostSourceVersion,
-    isVisible: true,
-    origin,
-    readySequence: ready.readySequence,
-    sourceKey: ready.sourceKey,
-});
-const toHiddenProviderOverlayVisibility = (visibility) => ({
-    flowHandleId: null,
-    hostSourceVersion: visibility.hostSourceVersion,
-    isVisible: false,
-    origin: null,
-    readySequence: visibility.readySequence,
-    sourceKey: visibility.sourceKey,
-});
-const isVisibilityForReadyIdentity = (visibility, ready) => visibility.hostSourceVersion === ready.hostSourceVersion &&
-    visibility.readySequence === ready.readySequence &&
-    visibility.sourceKey === ready.sourceKey;
-export function updateProviderOverlayReadySequence({ ready, visibility, }) {
-    if (!visibility.isVisible ||
-        visibility.sourceKey !== ready.sourceKey ||
-        visibility.hostSourceVersion !== ready.hostSourceVersion) {
-        return visibility;
-    }
-    return Object.assign(Object.assign({}, visibility), { readySequence: ready.readySequence });
-}
-export function applyProviderOverlayFlowState({ detail, origin, ready, state, }) {
-    var _a;
-    const isVisible = detail.isOpen || detail.isLoading;
-    const visibleFlowHandleIds = new Set(state.visibleFlowHandleIds);
-    if (origin === "aggregate") {
-        if (isVisible) {
-            visibleFlowHandleIds.clear();
-            return {
-                visibleFlowHandleIds,
-                visibility: toVisibleProviderOverlayVisibility({
-                    flowHandleId: null,
-                    origin,
-                    ready,
-                }),
-            };
-        }
-        if (visibleFlowHandleIds.size > 0) {
-            return {
-                visibleFlowHandleIds,
-                visibility: toVisibleProviderOverlayVisibility({
-                    flowHandleId: (_a = visibleFlowHandleIds.values().next().value) !== null && _a !== void 0 ? _a : null,
-                    origin: "handle",
-                    ready,
-                }),
-            };
-        }
-        return {
-            visibleFlowHandleIds,
-            visibility: {
-                flowHandleId: null,
-                hostSourceVersion: ready.hostSourceVersion,
-                isVisible: false,
-                origin,
-                readySequence: ready.readySequence,
-                sourceKey: ready.sourceKey,
-            },
-        };
-    }
-    if (detail.flowHandleId === undefined) {
-        return {
-            visibleFlowHandleIds,
-            visibility: state.visibility,
-        };
-    }
-    if (isVisible) {
-        visibleFlowHandleIds.add(detail.flowHandleId);
-        if (state.visibility.isVisible &&
-            state.visibility.origin === "aggregate" &&
-            isVisibilityForReadyIdentity(state.visibility, ready)) {
-            return {
-                visibleFlowHandleIds,
-                visibility: state.visibility,
-            };
-        }
-        return {
-            visibleFlowHandleIds,
-            visibility: toVisibleProviderOverlayVisibility({
-                flowHandleId: detail.flowHandleId,
-                origin,
-                ready,
-            }),
-        };
-    }
-    visibleFlowHandleIds.delete(detail.flowHandleId);
-    if (visibleFlowHandleIds.size > 0) {
-        return {
-            visibleFlowHandleIds,
-            visibility: state.visibility,
-        };
-    }
-    if (state.visibility.origin !== "handle") {
-        return {
-            visibleFlowHandleIds,
-            visibility: state.visibility,
-        };
-    }
-    return {
-        visibleFlowHandleIds,
-        visibility: toHiddenProviderOverlayVisibility(state.visibility),
-    };
-}
-export function applyProviderOverlayHandleInvalidated({ flowHandleId, state, }) {
-    const visibleFlowHandleIds = new Set(state.visibleFlowHandleIds);
-    visibleFlowHandleIds.delete(flowHandleId);
-    if (visibleFlowHandleIds.size > 0 || state.visibility.origin !== "handle") {
-        return {
-            visibleFlowHandleIds,
-            visibility: state.visibility,
-        };
-    }
-    return {
-        visibleFlowHandleIds,
-        visibility: toHiddenProviderOverlayVisibility(state.visibility),
-    };
-}