@getuserfeedback/react-native 2.0.19 → 2.0.21

package/dist/index.js

@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { assertNoSegmentExternalIdsInValueArgument, CommandSettlementError, CommandSettlementTimeoutError, createFlowCommandHandleController, getFlowHandleFromSettlementDetail, getWidgetLayoutPlanNowMs, } from "@getuserfeedback/protocol/host";
+import { assertNoSegmentExternalIdsInValueArgument, CommandSettlementError, CommandSettlementTimeoutError, createFlowCommandHandleController, getFlowHandleFromSettlementDetail, getWidgetLayoutPlanNowMs, REACT_NATIVE_WEBVIEW_TRANSPORT_CAPABILITIES, } from "@getuserfeedback/protocol/host";
 import { parseWebViewTransportNativeMessage } from "@getuserfeedback/protocol/webview-transport";
 import { createContext, createElement, useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react";
 import { useResolvedHostViewport } from "./host-viewport.js";
@@ -126,6 +126,9 @@ const CLIENT_META = {
     clientName: "@getuserfeedback/react-native",
     clientVersion: REACT_NATIVE_SDK_VERSION,
     loader: "sdk",
+    protocolCapabilities: [
+        REACT_NATIVE_WEBVIEW_TRANSPORT_CAPABILITIES.LAYOUT_TRANSITION_POLICY,
+    ],
     transport: "loader",
 };
 const createUniqueId = (prefix) => {
@@ -607,6 +610,7 @@ export function GetUserFeedbackProvider({ autoInit = true, children, commandTime
         handleWebMessage,
     }), [enqueueCommand, flow, getNativeMessages, handleWebMessage, instanceId]);
     const previousSheetHostLayoutUpdateRef = useRef(undefined);
+    const consumedTransitionPolicySequenceRef = useRef(undefined);
     useEffect(() => {
         resetStartupQueuedKeyIfChanged(startupOptionsKey);
         enqueueStartupCommands();
@@ -616,6 +620,11 @@ export function GetUserFeedbackProvider({ autoInit = true, children, commandTime
         startupOptionsKey,
     ]);
     const providerHostViewport = hostViewport !== null && hostViewport !== void 0 ? hostViewport : resolvedHostViewport;
+    const transitionPolicySequence = widgetHostVisibility.transitionPolicySequence;
+    const pendingTransitionPolicy = transitionPolicySequence !== undefined &&
+        consumedTransitionPolicySequenceRef.current !== transitionPolicySequence
+        ? widgetHostVisibility.transitionPolicy
+        : undefined;
     const sheetHostLayoutPlan = toProviderWidgetSheetHostLayoutPlan({
         previous: previousSheetHostLayoutUpdateRef.current,
         viewport: providerHostViewport,
@@ -623,7 +632,15 @@ export function GetUserFeedbackProvider({ autoInit = true, children, commandTime
             height: widgetHostVisibility.flowHeight,
         },
         nowMs: getWidgetLayoutPlanNowMs(),
+        transitionPolicy: pendingTransitionPolicy,
     });
+    useEffect(() => {
+        if (transitionPolicySequence !== undefined &&
+            pendingTransitionPolicy !== undefined &&
+            sheetHostLayoutPlan !== undefined) {
+            consumedTransitionPolicySequenceRef.current = transitionPolicySequence;
+        }
+    }, [pendingTransitionPolicy, sheetHostLayoutPlan, transitionPolicySequence]);
     let sheetHostLayoutUpdate;
     if (sheetHostLayoutPlan) {
         switch (sheetHostLayoutPlan.kind) {
@@ -631,7 +648,17 @@ export function GetUserFeedbackProvider({ autoInit = true, children, commandTime
                 sheetHostLayoutUpdate =
                     (_a = previousSheetHostLayoutUpdateRef.current) !== null && _a !== void 0 ? _a : sheetHostLayoutPlan.update;
                 break;
-            case "instant":
+            case "instant": {
+                const previousSheetHostLayoutUpdate = previousSheetHostLayoutUpdateRef.current;
+                sheetHostLayoutUpdate =
+                    pendingTransitionPolicy === undefined &&
+                        (previousSheetHostLayoutUpdate === null || previousSheetHostLayoutUpdate === void 0 ? void 0 : previousSheetHostLayoutUpdate.transition.kind) === "timed" &&
+                        previousSheetHostLayoutUpdate.size.height ===
+                            sheetHostLayoutPlan.size.height
+                        ? previousSheetHostLayoutUpdate
+                        : sheetHostLayoutPlan.update;
+                break;
+            }
             case "timed":
                 sheetHostLayoutUpdate = sheetHostLayoutPlan.update;
                 break;

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

@@ -1,3 +1,4 @@
+import { type WidgetLayoutTransitionPolicy } from "@getuserfeedback/protocol/host";
 type ProviderWidgetHostReadyState = {
     hostEpoch: number;
     readySequence: number;
@@ -10,6 +11,8 @@ export type ProviderWidgetHostVisibility = {
     isVisible: boolean;
     readySequence: number | null;
     sourceKey: string | null;
+    transitionPolicy?: WidgetLayoutTransitionPolicy;
+    transitionPolicySequence?: number;
 };
 type ProviderWidgetHostFlowState = {
     height?: number;
@@ -18,6 +21,7 @@ type ProviderWidgetHostFlowState = {
     isLoading: boolean;
     isOpen: boolean;
     shouldRender?: boolean;
+    transitionPolicy?: WidgetLayoutTransitionPolicy;
     width?: number;
 };
 type ProviderWidgetHostSnapshot = {
@@ -26,6 +30,7 @@ type ProviderWidgetHostSnapshot = {
     isLoading: boolean;
     isOpen: boolean;
     shouldRender: boolean;
+    transitionPolicy?: WidgetLayoutTransitionPolicy;
     width?: number;
 };
 export declare const HIDDEN_PROVIDER_WIDGET_HOST_VISIBILITY: ProviderWidgetHostVisibility;

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

@@ -1,4 +1,4 @@
-import { resolveInstanceFlowStateShouldRender } from "@getuserfeedback/protocol/host";
+import { resolveInstanceFlowStateShouldRender, } from "@getuserfeedback/protocol/host";
 export const HIDDEN_PROVIDER_WIDGET_HOST_VISIBILITY = {
     hostSourceVersion: null,
     isVisible: false,
@@ -15,6 +15,7 @@ export function toProviderWidgetHostSnapshot(detail, instanceId) {
         isLoading: detail.isLoading,
         isOpen: detail.isOpen,
         shouldRender: resolveInstanceFlowStateShouldRender(detail),
+        transitionPolicy: detail.transitionPolicy,
         width: detail.width,
     };
     return snapshot;
@@ -24,6 +25,7 @@ export function createProviderWidgetHostLifecycleController(initialHostSourceKey
     let hostSourceKey = initialHostSourceKey;
     let hostSourceVersion = 0;
     let lastReady = null;
+    let transitionPolicySequence = 0;
     return {
         clearFlowHandleFromVisibility: (visibility, flowHandleId) => visibility.flowHandleId === flowHandleId
             ? Object.assign(Object.assign({}, visibility), { flowHandleId: undefined }) : visibility,
@@ -76,6 +78,11 @@ export function createProviderWidgetHostLifecycleController(initialHostSourceKey
             if (lastReady === null) {
                 return null;
             }
+            let nextTransitionPolicySequence;
+            if (snapshot.transitionPolicy !== undefined) {
+                transitionPolicySequence += 1;
+                nextTransitionPolicySequence = transitionPolicySequence;
+            }
             return {
                 flowHeight: snapshot.height,
                 flowHandleId: snapshot.flowHandleId,
@@ -83,6 +90,8 @@ export function createProviderWidgetHostLifecycleController(initialHostSourceKey
                 isVisible: snapshot.shouldRender,
                 readySequence: lastReady.readySequence,
                 sourceKey: lastReady.sourceKey,
+                transitionPolicy: snapshot.transitionPolicy,
+                transitionPolicySequence: nextTransitionPolicySequence,
             };
         },
         toReadyVisibility: (visibility, event) => {

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

@@ -1,5 +1,5 @@
 import { planWidgetLayoutTransition, toInstantWidgetLayoutSizeUpdate, } from "@getuserfeedback/protocol/host";
-import { createElement, useCallback, useMemo, useRef, } from "react";
+import { createElement, useCallback, useEffect, useMemo, useRef, } from "react";
 const HIDDEN_WIDGET_HOST_STYLE = {
     bottom: 0,
     left: 0,
@@ -101,6 +101,20 @@ function resolveNativePanResponder() {
         return null;
     }
 }
+function resolveNativeAnimationRuntime() {
+    try {
+        const reactNativeModule = require("react-native");
+        return reactNativeModule.Animated
+            ? {
+                Animated: reactNativeModule.Animated,
+                Easing: reactNativeModule.Easing,
+            }
+            : null;
+    }
+    catch (_a) {
+        return null;
+    }
+}
 function toResponderPageY(event) {
     var _a, _b, _c;
     const nativeEvent = event === null || event === void 0 ? void 0 : event.nativeEvent;
@@ -182,6 +196,87 @@ export function toProviderWidgetSheetStyle(input) {
     return input.isVisible && sheetHostViewport !== undefined
         ? Object.assign(Object.assign({}, WIDGET_SHEET_STYLE), { height: sheetHostViewport.height }) : HIDDEN_WIDGET_HOST_STYLE;
 }
+function useProviderWidgetSheetPresentation(input) {
+    var _a, _b, _c, _d;
+    const animationRuntime = useMemo(resolveNativeAnimationRuntime, []);
+    const animatedHeightRef = useRef(null);
+    const animationRef = useRef(null);
+    const previousHeightRef = useRef(undefined);
+    const animatedSheetView = useMemo(() => animationRuntime
+        ? animationRuntime.Animated.createAnimatedComponent(input.nativeView)
+        : input.nativeView, [animationRuntime, input.nativeView]);
+    const staticStyle = toProviderWidgetSheetStyle({
+        isVisible: input.isVisible,
+        sheetHostLayoutUpdate: input.sheetHostLayoutUpdate,
+    });
+    const sheetHostViewport = (_a = input.sheetHostLayoutUpdate) === null || _a === void 0 ? void 0 : _a.size;
+    const height = sheetHostViewport === null || sheetHostViewport === void 0 ? void 0 : sheetHostViewport.height;
+    const shouldUseAnimatedStyle = animationRuntime !== null &&
+        input.isVisible &&
+        height !== undefined &&
+        ((_b = input.sheetHostLayoutUpdate) === null || _b === void 0 ? void 0 : _b.transition.kind) === "timed";
+    const sheetView = animationRuntime ? animatedSheetView : input.nativeView;
+    if (animationRuntime &&
+        height !== undefined &&
+        animatedHeightRef.current === null) {
+        animatedHeightRef.current = new animationRuntime.Animated.Value(height);
+    }
+    useEffect(() => {
+        var _a, _b, _c, _d, _e, _f;
+        if (!animationRuntime || height === undefined) {
+            (_b = (_a = animationRef.current) === null || _a === void 0 ? void 0 : _a.stop) === null || _b === void 0 ? void 0 : _b.call(_a);
+            animationRef.current = null;
+            previousHeightRef.current = height;
+            return;
+        }
+        const animatedHeight = animatedHeightRef.current;
+        if (!animatedHeight) {
+            return;
+        }
+        const previousHeight = previousHeightRef.current;
+        previousHeightRef.current = height;
+        const transition = (_c = input.sheetHostLayoutUpdate) === null || _c === void 0 ? void 0 : _c.transition;
+        const activeAnimation = animationRef.current;
+        (_d = activeAnimation === null || activeAnimation === void 0 ? void 0 : activeAnimation.stop) === null || _d === void 0 ? void 0 : _d.call(activeAnimation);
+        animationRef.current = null;
+        if (previousHeight === undefined || (transition === null || transition === void 0 ? void 0 : transition.kind) !== "timed") {
+            animatedHeight.setValue(height);
+            return;
+        }
+        if (previousHeight === height && !activeAnimation) {
+            animatedHeight.setValue(height);
+            return;
+        }
+        const easing = transition.easing.kind === "cubic-bezier"
+            ? (_f = (_e = animationRuntime.Easing) === null || _e === void 0 ? void 0 : _e.bezier) === null || _f === void 0 ? void 0 : _f.call(_e, ...transition.easing.points)
+            : undefined;
+        const animation = animationRuntime.Animated.timing(animatedHeight, {
+            toValue: height,
+            duration: transition.durationMs,
+            easing,
+            useNativeDriver: false,
+        });
+        animationRef.current = animation;
+        animation.start();
+        return () => {
+            var _a;
+            (_a = animation.stop) === null || _a === void 0 ? void 0 : _a.call(animation);
+            if (animationRef.current === animation) {
+                animationRef.current = null;
+            }
+        };
+    }, [animationRuntime, height, (_c = input.sheetHostLayoutUpdate) === null || _c === void 0 ? void 0 : _c.transition]);
+    if (!shouldUseAnimatedStyle) {
+        return {
+            sheetView,
+            style: staticStyle,
+        };
+    }
+    return {
+        sheetView,
+        style: Object.assign(Object.assign({}, staticStyle), { height: (_d = animatedHeightRef.current) !== null && _d !== void 0 ? _d : height }),
+    };
+}
 export function ProviderWidgetHostOverlay({ children, isVisible, nativeView, onRequestDismiss, sheetHostLayoutUpdate, }) {
     const dragStartYRef = useRef(undefined);
     const handleDragGrant = useCallback((event) => {
@@ -236,6 +331,11 @@ export function ProviderWidgetHostOverlay({ children, isVisible, nativeView, onR
     const sheetHostViewport = sheetHostLayoutUpdate === null || sheetHostLayoutUpdate === void 0 ? void 0 : sheetHostLayoutUpdate.size;
     const isSheetVisible = isVisible && sheetHostViewport !== undefined;
     const pointerEvents = isSheetVisible ? "auto" : "none";
+    const sheetPresentation = useProviderWidgetSheetPresentation({
+        isVisible,
+        nativeView,
+        sheetHostLayoutUpdate,
+    });
     return createElement(nativeView, {
         pointerEvents,
         style: isSheetVisible
@@ -248,12 +348,9 @@ export function ProviderWidgetHostOverlay({ children, isVisible, nativeView, onR
             ? WIDGET_SHEET_BACKDROP_STYLE
             : HIDDEN_WIDGET_HOST_STYLE,
         testID: "gx-widget-host-backdrop",
-    }), createElement(nativeView, {
+    }), createElement(sheetPresentation.sheetView, {
         pointerEvents,
-        style: toProviderWidgetSheetStyle({
-            isVisible,
-            sheetHostLayoutUpdate,
-        }),
+        style: sheetPresentation.style,
         testID: "gx-widget-host-sheet",
     }, children, isSheetVisible
         ? createElement(nativeView, Object.assign(Object.assign({}, dragHandleGestureProps), { style: WIDGET_SHEET_DRAG_HANDLE_TOUCH_STYLE, testID: "gx-widget-host-drag-handle" }), createElement(nativeView, {

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

package/dist/webview-bridge-script.js

@@ -3,6 +3,7 @@ const VIEW_SIZE_FLUSH_EVENT = "gx:view-size:flush";
 const HOST_VIEWPORT_VERSION_KEY = "__getuserfeedback_host_viewport_version";
 const HOST_EVENT_NAMES = [
     "instance:flow:state-changed:instance",
+    "instance:view-host:snapshots-changed",
     "instance:command:settled",
     "instance:handle:invalidated",
     "instance:command:unsupported",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getuserfeedback/react-native",
-  "version": "2.0.19",
+  "version": "2.0.21",
   "description": "getuserfeedback React Native SDK",
   "keywords": [
     "getuserfeedback",
@@ -44,8 +44,8 @@
     "lint": "biome check ."
   },
   "dependencies": {
-    "@getuserfeedback/protocol": "^3.1.7",
-    "@getuserfeedback/sdk": "^0.8.24",
+    "@getuserfeedback/protocol": "^3.1.9",
+    "@getuserfeedback/sdk": "^0.8.26",
     "robot3": "^1.2.0"
   },
   "peerDependencies": {