@getuserfeedback/react-native 1.3.2 → 1.3.4

package/dist/index.js

@@ -13,6 +13,8 @@ import { assertNoSegmentExternalIdsInValueArgument, CommandSettlementError, Comm
 import { parseWebViewTransportNativeMessage } from "@getuserfeedback/protocol/webview-transport";
 import { createContext, createElement, useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react";
 import { useResolvedHostViewport } from "./host-viewport.js";
+import { applyProviderOverlayFlowState, applyProviderOverlayHandleInvalidated, createDefaultProviderOverlayState, DEFAULT_PROVIDER_OVERLAY_VISIBILITY, updateProviderOverlayReadySequence, } from "./provider-overlay-state.js";
+import { ProviderWidgetHostOverlay, toProviderWidgetHostStyle, toProviderWidgetSheetHostViewport, } from "./provider-widget-host-overlay.js";
 import { REACT_NATIVE_SDK_VERSION } from "./version.js";
 import { WidgetHost, } from "./widget-host.js";
 export { REACT_NATIVE_SDK_VERSION } from "./version.js";
@@ -28,88 +30,6 @@ const CLIENT_META = {
     loader: "sdk",
     transport: "loader",
 };
-const HIDDEN_WIDGET_HOST_STYLE = {
-    height: 1,
-    left: -1,
-    opacity: 0,
-    position: "absolute",
-    top: -1,
-    width: 1,
-};
-const WIDGET_SHEET_OVERLAY_STYLE = {
-    bottom: 0,
-    left: 0,
-    position: "absolute",
-    right: 0,
-    top: 0,
-    zIndex: 2147483647,
-};
-const WIDGET_SHEET_BACKDROP_STYLE = {
-    backgroundColor: "rgba(15, 23, 42, 0.36)",
-    bottom: 0,
-    left: 0,
-    position: "absolute",
-    right: 0,
-    top: 0,
-};
-const WIDGET_SHEET_STYLE = {
-    backgroundColor: "#ffffff",
-    borderTopLeftRadius: 24,
-    borderTopRightRadius: 24,
-    bottom: 0,
-    left: 0,
-    overflow: "hidden",
-    position: "absolute",
-    right: 0,
-    shadowColor: "#000000",
-    shadowOffset: { height: -4, width: 0 },
-    shadowOpacity: 0.16,
-    shadowRadius: 18,
-    elevation: 18,
-};
-const VISIBLE_WIDGET_HOST_STYLE = {
-    flex: 1,
-};
-const VISIBLE_WIDGET_HOST_LAYOUT_STYLE_KEYS = new Set([
-    "alignSelf",
-    "bottom",
-    "display",
-    "end",
-    "flex",
-    "flexBasis",
-    "flexGrow",
-    "flexShrink",
-    "height",
-    "left",
-    "margin",
-    "marginBottom",
-    "marginEnd",
-    "marginHorizontal",
-    "marginLeft",
-    "marginRight",
-    "marginStart",
-    "marginTop",
-    "marginVertical",
-    "maxHeight",
-    "maxWidth",
-    "minHeight",
-    "minWidth",
-    "position",
-    "right",
-    "start",
-    "top",
-    "width",
-]);
-const DEFAULT_WIDGET_SHEET_HEIGHT_RATIO = 0.86;
-const DEFAULT_WIDGET_SHEET_MIN_HEIGHT = 320;
-const DEFAULT_WIDGET_HOST_VISIBILITY = {
-    flowHandleId: null,
-    hostSourceVersion: null,
-    isVisible: false,
-    origin: null,
-    readySequence: null,
-    sourceKey: null,
-};
 const createUniqueId = (prefix) => {
     if (typeof globalThis.crypto !== "undefined" &&
         typeof globalThis.crypto.randomUUID === "function") {
@@ -157,39 +77,6 @@ function resolveNativeView() {
         return FallbackNativeView;
     }
 }
-function toSheetHostViewport(viewport) {
-    if (!viewport) {
-        return undefined;
-    }
-    const desiredHeight = Math.max(DEFAULT_WIDGET_SHEET_MIN_HEIGHT, Math.round(viewport.height * DEFAULT_WIDGET_SHEET_HEIGHT_RATIO));
-    return {
-        width: viewport.width,
-        height: Math.min(viewport.height, desiredHeight),
-    };
-}
-function toVisibleWidgetHostPresentationStyle(style) {
-    if (style === undefined || style === null) {
-        return undefined;
-    }
-    if (Array.isArray(style)) {
-        const styles = style
-            .map(toVisibleWidgetHostPresentationStyle)
-            .filter((entry) => entry !== undefined && entry !== null);
-        return styles.length > 0 ? styles : undefined;
-    }
-    if (typeof style !== "object") {
-        return style;
-    }
-    const presentationStyle = {};
-    for (const [key, value] of Object.entries(style)) {
-        if (!VISIBLE_WIDGET_HOST_LAYOUT_STYLE_KEYS.has(key)) {
-            presentationStyle[key] = value;
-        }
-    }
-    return Object.keys(presentationStyle).length > 0
-        ? presentationStyle
-        : undefined;
-}
 const toIdentifyCommandPayload = (identifyInput, traitsOrOptions, options) => {
     if (typeof identifyInput === "string") {
         assertNoSegmentExternalIdsInValueArgument({
@@ -254,11 +141,11 @@ const toCommandSettlementError = (event) => {
     });
 };
 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, _c;
+    var _a, _b;
     const NativeView = useMemo(resolveNativeView, []);
     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_WIDGET_HOST_VISIBILITY);
+    const [widgetHostVisibility, setWidgetHostVisibility] = useState(DEFAULT_PROVIDER_OVERLAY_VISIBILITY);
     const resolvedHostViewport = useResolvedHostViewport(hostViewport);
     const nativeMessagesRef = useRef([]);
     const pendingCommandsRef = useRef(new Map());
@@ -266,7 +153,7 @@ export function GetUserFeedbackProvider({ autoInit = true, children, commandTime
     const flowHandleCacheEpochRef = useRef(0);
     const flowHandleIdsByFlowIdRef = useRef(new Map());
     const flowCommandSequencesByFlowIdRef = useRef(new Map());
-    const visibleFlowHandleIdsRef = useRef(new Set());
+    const providerOverlayStateRef = useRef(createDefaultProviderOverlayState());
     const initOptionsRef = useRef(initOptions);
     const configureOptionsRef = useRef(configureOptions);
     const initOptionsKey = useMemo(() => toJsonKey(initOptions), [initOptions]);
@@ -293,7 +180,7 @@ export function GetUserFeedbackProvider({ autoInit = true, children, commandTime
         startupQueuedKeyRef.current = null;
         flowHandleCacheEpochRef.current += 1;
         flowHandleIdsByFlowIdRef.current.clear();
-        visibleFlowHandleIdsRef.current.clear();
+        providerOverlayStateRef.current = createDefaultProviderOverlayState();
     }
     initOptionsRef.current = initOptions;
     configureOptionsRef.current = configureOptions;
@@ -528,14 +415,16 @@ export function GetUserFeedbackProvider({ autoInit = true, children, commandTime
             didReissueDeliveredCommands = reissueDeliveredPendingActionCommands();
         }
         lastReadyRef.current = Object.assign(Object.assign({}, event), { hostEpoch: hostEpochRef.current });
-        setWidgetHostVisibility((visibility) => {
-            if (!visibility.isVisible ||
-                visibility.sourceKey !== event.sourceKey ||
-                visibility.hostSourceVersion !== hostSourceVersionRef.current) {
-                return visibility;
-            }
-            return Object.assign(Object.assign({}, visibility), { readySequence: event.readySequence });
+        const nextVisibility = updateProviderOverlayReadySequence({
+            ready: {
+                hostSourceVersion: hostSourceVersionRef.current,
+                readySequence: event.readySequence,
+                sourceKey: event.sourceKey,
+            },
+            visibility: providerOverlayStateRef.current.visibility,
         });
+        providerOverlayStateRef.current = Object.assign(Object.assign({}, providerOverlayStateRef.current), { visibility: nextVisibility });
+        setWidgetHostVisibility(nextVisibility);
         enqueueStartupCommands({ force: previous !== null });
         startPendingCommandTimeouts();
         return didReissueDeliveredCommands;
@@ -562,8 +451,8 @@ export function GetUserFeedbackProvider({ autoInit = true, children, commandTime
             reissueDeliveredPendingActionCommands();
         }
         lastReadyRef.current = null;
-        setWidgetHostVisibility(DEFAULT_WIDGET_HOST_VISIBILITY);
-        visibleFlowHandleIdsRef.current.clear();
+        providerOverlayStateRef.current = createDefaultProviderOverlayState();
+        setWidgetHostVisibility(providerOverlayStateRef.current.visibility);
         pausePendingCommandTimeouts();
     }, [
         handleWidgetReady,
@@ -580,26 +469,14 @@ export function GetUserFeedbackProvider({ autoInit = true, children, commandTime
     }, []);
     const handleFlowHandleInvalidated = useCallback((flowHandleId) => {
         deleteCachedFlowHandleId(flowHandleId);
-        visibleFlowHandleIdsRef.current.delete(flowHandleId);
-        if (visibleFlowHandleIdsRef.current.size > 0) {
-            return;
-        }
-        setWidgetHostVisibility((visibility) => {
-            if (visibility.origin !== "handle") {
-                return visibility;
-            }
-            return {
-                flowHandleId: null,
-                hostSourceVersion: visibility.hostSourceVersion,
-                isVisible: false,
-                origin: null,
-                readySequence: visibility.readySequence,
-                sourceKey: visibility.sourceKey,
-            };
+        const nextState = applyProviderOverlayHandleInvalidated({
+            flowHandleId,
+            state: providerOverlayStateRef.current,
         });
+        providerOverlayStateRef.current = nextState;
+        setWidgetHostVisibility(nextState.visibility);
     }, [deleteCachedFlowHandleId]);
     const handleFlowStateChanged = useCallback((detail, options) => {
-        var _a, _b;
         if (detail.instanceId !== instanceId) {
             return;
         }
@@ -607,83 +484,18 @@ export function GetUserFeedbackProvider({ autoInit = true, children, commandTime
         if (!readyState) {
             return;
         }
-        const isVisible = detail.isOpen || detail.isLoading;
-        if (options.origin === "aggregate") {
-            if (isVisible) {
-                visibleFlowHandleIdsRef.current.clear();
-            }
-            else if (visibleFlowHandleIdsRef.current.size > 0) {
-                const flowHandleId = (_a = visibleFlowHandleIdsRef.current.values().next().value) !== null && _a !== void 0 ? _a : null;
-                setWidgetHostVisibility({
-                    flowHandleId,
-                    hostSourceVersion: hostSourceVersionRef.current,
-                    isVisible: true,
-                    origin: "handle",
-                    readySequence: readyState.readySequence,
-                    sourceKey: readyState.sourceKey,
-                });
-                return;
-            }
-        }
-        if (options.origin === "handle") {
-            if (detail.flowHandleId === undefined) {
-                return;
-            }
-            if (isVisible) {
-                visibleFlowHandleIdsRef.current.add(detail.flowHandleId);
-            }
-            else {
-                visibleFlowHandleIdsRef.current.delete(detail.flowHandleId);
-            }
-        }
-        if (!isVisible && options.origin === "handle") {
-            if (visibleFlowHandleIdsRef.current.size > 0) {
-                return;
-            }
-            setWidgetHostVisibility((visibility) => {
-                if (visibility.origin !== "handle") {
-                    return visibility;
-                }
-                return {
-                    flowHandleId: null,
-                    hostSourceVersion: hostSourceVersionRef.current,
-                    isVisible: false,
-                    origin: null,
-                    readySequence: readyState.readySequence,
-                    sourceKey: readyState.sourceKey,
-                };
-            });
-            return;
-        }
-        if (isVisible && options.origin === "handle") {
-            setWidgetHostVisibility((visibility) => {
-                var _a;
-                if (visibility.isVisible &&
-                    visibility.origin === "aggregate" &&
-                    visibility.hostSourceVersion === hostSourceVersionRef.current &&
-                    visibility.readySequence === readyState.readySequence &&
-                    visibility.sourceKey === readyState.sourceKey) {
-                    return visibility;
-                }
-                return {
-                    flowHandleId: (_a = detail.flowHandleId) !== null && _a !== void 0 ? _a : null,
-                    hostSourceVersion: hostSourceVersionRef.current,
-                    isVisible: true,
-                    origin: "handle",
-                    readySequence: readyState.readySequence,
-                    sourceKey: readyState.sourceKey,
-                };
-            });
-            return;
-        }
-        setWidgetHostVisibility({
-            flowHandleId: options.origin === "handle" ? ((_b = detail.flowHandleId) !== null && _b !== void 0 ? _b : null) : null,
-            hostSourceVersion: hostSourceVersionRef.current,
-            isVisible,
+        const nextState = applyProviderOverlayFlowState({
+            detail,
             origin: options.origin,
-            readySequence: readyState.readySequence,
-            sourceKey: readyState.sourceKey,
+            ready: {
+                hostSourceVersion: hostSourceVersionRef.current,
+                readySequence: readyState.readySequence,
+                sourceKey: readyState.sourceKey,
+            },
+            state: providerOverlayStateRef.current,
         });
+        providerOverlayStateRef.current = nextState;
+        setWidgetHostVisibility(nextState.visibility);
     }, [instanceId]);
     const handleWebMessage = useCallback((message) => {
         var _a;
@@ -778,7 +590,8 @@ export function GetUserFeedbackProvider({ autoInit = true, children, commandTime
             return;
         }
         visibilitySourceKeyRef.current = hostSourceKey;
-        setWidgetHostVisibility(DEFAULT_WIDGET_HOST_VISIBILITY);
+        providerOverlayStateRef.current = createDefaultProviderOverlayState();
+        setWidgetHostVisibility(providerOverlayStateRef.current.visibility);
     }, [hostSourceKey]);
     const contextValue = useMemo(() => ({
         instanceId,
@@ -845,23 +658,14 @@ export function GetUserFeedbackProvider({ autoInit = true, children, commandTime
         widgetHostVisibility.hostSourceVersion === hostSourceVersionRef.current &&
         widgetHostVisibility.sourceKey === ((_a = lastReadyRef.current) === null || _a === void 0 ? void 0 : _a.sourceKey) &&
         widgetHostVisibility.readySequence === ((_b = lastReadyRef.current) === null || _b === void 0 ? void 0 : _b.readySequence);
-    const sheetHostViewport = toSheetHostViewport(hostViewport !== null && hostViewport !== void 0 ? hostViewport : resolvedHostViewport);
+    const sheetHostViewport = toProviderWidgetSheetHostViewport(hostViewport !== null && hostViewport !== void 0 ? hostViewport : resolvedHostViewport);
     const widgetHostViewport = isWidgetHostVisible
         ? sheetHostViewport
         : (hostViewport !== null && hostViewport !== void 0 ? hostViewport : resolvedHostViewport);
-    const widgetSheetStyle = sheetHostViewport
-        ? Object.assign(Object.assign({}, WIDGET_SHEET_STYLE), { height: sheetHostViewport.height }) : Object.assign(Object.assign({}, WIDGET_SHEET_STYLE), { height: "86%" });
-    const widgetHostStyle = isWidgetHostVisible
-        ? VISIBLE_WIDGET_HOST_STYLE
-        : HIDDEN_WIDGET_HOST_STYLE;
-    const visiblePresentationStyle = isWidgetHostVisible
-        ? toVisibleWidgetHostPresentationStyle(webViewProps === null || webViewProps === void 0 ? void 0 : webViewProps.style)
-        : undefined;
-    const composedWebViewStyle = isWidgetHostVisible
-        ? visiblePresentationStyle !== undefined
-            ? [visiblePresentationStyle, widgetHostStyle]
-            : widgetHostStyle
-        : ((_c = webViewProps === null || webViewProps === void 0 ? void 0 : webViewProps.style) !== null && _c !== void 0 ? _c : widgetHostStyle);
+    const composedWebViewStyle = toProviderWidgetHostStyle({
+        isVisible: isWidgetHostVisible,
+        webViewStyle: webViewProps === null || webViewProps === void 0 ? void 0 : webViewProps.style,
+    });
     const widgetHost = createElement(WidgetHost, {
         hostViewport: widgetHostViewport,
         instanceId,
@@ -876,25 +680,11 @@ export function GetUserFeedbackProvider({ autoInit = true, children, commandTime
     });
     return createElement(GetUserFeedbackNativeContext.Provider, {
         value: contextValue,
-    }, children, createElement(NativeView, {
-        pointerEvents: isWidgetHostVisible ? "auto" : "none",
-        style: isWidgetHostVisible
-            ? WIDGET_SHEET_OVERLAY_STYLE
-            : HIDDEN_WIDGET_HOST_STYLE,
-        testID: "gx-widget-host-overlay",
-    }, createElement(NativeView, {
-        pointerEvents: isWidgetHostVisible ? "auto" : "none",
-        style: isWidgetHostVisible
-            ? WIDGET_SHEET_BACKDROP_STYLE
-            : HIDDEN_WIDGET_HOST_STYLE,
-        testID: "gx-widget-host-backdrop",
-    }), createElement(NativeView, {
-        pointerEvents: isWidgetHostVisible ? "auto" : "none",
-        style: isWidgetHostVisible
-            ? widgetSheetStyle
-            : HIDDEN_WIDGET_HOST_STYLE,
-        testID: "gx-widget-host-sheet",
-    }, widgetHost)));
+    }, children, createElement(ProviderWidgetHostOverlay, {
+        isVisible: isWidgetHostVisible,
+        nativeView: NativeView,
+        sheetHostViewport,
+    }, widgetHost));
 }
 export function useGetUserFeedbackNative() {
     const context = useContext(GetUserFeedbackNativeContext);

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

@@ -0,0 +1,43 @@
+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

@@ -0,0 +1,134 @@
+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),
+    };
+}

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

@@ -0,0 +1,15 @@
+import { type ComponentType, type ReactElement, type ReactNode } from "react";
+import type { WidgetHostProps } from "./widget-host.js";
+type NativeViewComponent = 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, }: {
+    children?: ReactNode;
+    isVisible: boolean;
+    nativeView: NativeViewComponent;
+    sheetHostViewport: WidgetHostProps["hostViewport"];
+}): ReactElement;
+export {};

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

@@ -0,0 +1,135 @@
+import { createElement, } from "react";
+const HIDDEN_WIDGET_HOST_STYLE = {
+    height: 1,
+    left: -1,
+    opacity: 0,
+    position: "absolute",
+    top: -1,
+    width: 1,
+};
+const WIDGET_SHEET_OVERLAY_STYLE = {
+    bottom: 0,
+    left: 0,
+    position: "absolute",
+    right: 0,
+    top: 0,
+    zIndex: 2147483647,
+};
+const WIDGET_SHEET_BACKDROP_STYLE = {
+    backgroundColor: "rgba(15, 23, 42, 0.36)",
+    bottom: 0,
+    left: 0,
+    position: "absolute",
+    right: 0,
+    top: 0,
+};
+const WIDGET_SHEET_STYLE = {
+    backgroundColor: "#ffffff",
+    borderTopLeftRadius: 24,
+    borderTopRightRadius: 24,
+    bottom: 0,
+    left: 0,
+    overflow: "hidden",
+    position: "absolute",
+    right: 0,
+    shadowColor: "#000000",
+    shadowOffset: { height: -4, width: 0 },
+    shadowOpacity: 0.16,
+    shadowRadius: 18,
+    elevation: 18,
+};
+const VISIBLE_WIDGET_HOST_STYLE = {
+    flex: 1,
+};
+const VISIBLE_WIDGET_HOST_LAYOUT_STYLE_KEYS = new Set([
+    "alignSelf",
+    "bottom",
+    "display",
+    "end",
+    "flex",
+    "flexBasis",
+    "flexGrow",
+    "flexShrink",
+    "height",
+    "left",
+    "margin",
+    "marginBottom",
+    "marginEnd",
+    "marginHorizontal",
+    "marginLeft",
+    "marginRight",
+    "marginStart",
+    "marginTop",
+    "marginVertical",
+    "maxHeight",
+    "maxWidth",
+    "minHeight",
+    "minWidth",
+    "position",
+    "right",
+    "start",
+    "top",
+    "width",
+]);
+const DEFAULT_WIDGET_SHEET_HEIGHT_RATIO = 0.86;
+const DEFAULT_WIDGET_SHEET_MIN_HEIGHT = 320;
+export function toProviderWidgetSheetHostViewport(viewport) {
+    if (!viewport) {
+        return undefined;
+    }
+    const desiredHeight = Math.max(DEFAULT_WIDGET_SHEET_MIN_HEIGHT, Math.round(viewport.height * DEFAULT_WIDGET_SHEET_HEIGHT_RATIO));
+    return {
+        width: viewport.width,
+        height: Math.min(viewport.height, desiredHeight),
+    };
+}
+function toVisibleWidgetHostPresentationStyle(style) {
+    if (style === undefined || style === null) {
+        return undefined;
+    }
+    if (Array.isArray(style)) {
+        const styles = style
+            .map(toVisibleWidgetHostPresentationStyle)
+            .filter((entry) => entry !== undefined && entry !== null);
+        return styles.length > 0 ? styles : undefined;
+    }
+    if (typeof style !== "object") {
+        return style;
+    }
+    const presentationStyle = {};
+    for (const [key, value] of Object.entries(style)) {
+        if (!VISIBLE_WIDGET_HOST_LAYOUT_STYLE_KEYS.has(key)) {
+            presentationStyle[key] = value;
+        }
+    }
+    return Object.keys(presentationStyle).length > 0
+        ? presentationStyle
+        : undefined;
+}
+export function toProviderWidgetHostStyle({ isVisible, webViewStyle, }) {
+    if (!isVisible) {
+        return webViewStyle !== null && webViewStyle !== void 0 ? webViewStyle : HIDDEN_WIDGET_HOST_STYLE;
+    }
+    const visiblePresentationStyle = toVisibleWidgetHostPresentationStyle(webViewStyle);
+    return visiblePresentationStyle !== undefined
+        ? [visiblePresentationStyle, VISIBLE_WIDGET_HOST_STYLE]
+        : VISIBLE_WIDGET_HOST_STYLE;
+}
+export function ProviderWidgetHostOverlay({ children, isVisible, nativeView, 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";
+    return createElement(nativeView, {
+        pointerEvents,
+        style: isVisible ? WIDGET_SHEET_OVERLAY_STYLE : HIDDEN_WIDGET_HOST_STYLE,
+        testID: "gx-widget-host-overlay",
+    }, createElement(nativeView, {
+        pointerEvents,
+        style: isVisible ? WIDGET_SHEET_BACKDROP_STYLE : HIDDEN_WIDGET_HOST_STYLE,
+        testID: "gx-widget-host-backdrop",
+    }), createElement(nativeView, {
+        pointerEvents,
+        style: isVisible ? widgetSheetStyle : HIDDEN_WIDGET_HOST_STYLE,
+        testID: "gx-widget-host-sheet",
+    }, children));
+}

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.2";
+export const REACT_NATIVE_SDK_VERSION = reactNativeSdkVersion.length > 0 ? reactNativeSdkVersion : "1.3.4";

package/package.json

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