@getuserfeedback/react-native 3.0.56 → 3.0.58

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

@@ -1,5 +1,5 @@
-import { planWidgetLayoutTransition, toInstantWidgetLayoutSizeUpdate, } from "@getuserfeedback/protocol/host";
-import { createElement, useCallback, useEffect, useMemo, useRef, } from "react";
+import { areWidgetFrameAppearancesEqual, planWidgetLayoutTransition, toInstantWidgetLayoutSizeUpdate, } from "@getuserfeedback/protocol/host";
+import { createElement, useCallback, useEffect, useMemo, useRef, useState, } from "react";
 import { toProviderWidgetFrameAppearance } from "./provider-widget-frame-appearance.js";
 const HIDDEN_WIDGET_HOST_STYLE = {
     bottom: 0,
@@ -298,6 +298,14 @@ function useProviderWidgetSheetPresentation(input) {
     const animationRuntime = useMemo(resolveNativeAnimationRuntime, []);
     const animatedValuesRef = useRef(null);
     const animationRef = useRef([]);
+    const presentationAttemptRef = useRef(0);
+    // Border and shadow stay static across RN capability levels; this clock
+    // settles their swap on the same schedule as the numeric frame animation.
+    const presentationProgressRef = useRef(null);
+    const pendingFrameAppearanceRef = useRef(undefined);
+    const presentedFrameAppearanceRef = useRef(input.frameAppearance);
+    const presentedSurfaceStylesRef = useRef(input.surfaceStyles);
+    const [, setPresentationRevision] = useState(0);
     const consumedTransitionSequenceRef = useRef(undefined);
     const previousFrameRef = useRef(undefined);
     const animatedSurfaceView = useMemo(() => animationRuntime
@@ -312,11 +320,14 @@ function useProviderWidgetSheetPresentation(input) {
         typeof topRightRadius === "number"
         ? { height, topLeftRadius, topRightRadius }
         : undefined, [height, topLeftRadius, topRightRadius]);
+    const hasPendingTimedTransition = input.transitionSequence !== undefined &&
+        consumedTransitionSequenceRef.current !== input.transitionSequence;
     const shouldUseAnimatedStyle = animationRuntime !== null &&
         input.isVisible &&
         frame !== undefined &&
         previousFrameRef.current !== undefined &&
-        ((_b = input.sheetHostLayoutUpdate) === null || _b === void 0 ? void 0 : _b.transition.kind) === "timed";
+        ((_b = input.sheetHostLayoutUpdate) === null || _b === void 0 ? void 0 : _b.transition.kind) === "timed" &&
+        (hasPendingTimedTransition || animationRef.current.length > 0);
     const surfaceView = animationRuntime ? animatedSurfaceView : input.nativeView;
     if (animationRuntime && frame && animatedValuesRef.current === null) {
         animatedValuesRef.current = {
@@ -324,6 +335,7 @@ function useProviderWidgetSheetPresentation(input) {
             topLeftRadius: new animationRuntime.Animated.Value(frame.topLeftRadius),
             topRightRadius: new animationRuntime.Animated.Value(frame.topRightRadius),
         };
+        presentationProgressRef.current = new animationRuntime.Animated.Value(0);
     }
     useEffect(() => {
         var _a, _b, _c;
@@ -341,8 +353,12 @@ function useProviderWidgetSheetPresentation(input) {
             animationRef.current = retained;
         };
         if (!animationRuntime || !frame || !input.isVisible) {
+            presentationAttemptRef.current += 1;
+            pendingFrameAppearanceRef.current = undefined;
             stopAnimations();
             previousFrameRef.current = undefined;
+            presentedFrameAppearanceRef.current = input.frameAppearance;
+            presentedSurfaceStylesRef.current = input.surfaceStyles;
             return;
         }
         const animatedValues = animatedValuesRef.current;
@@ -359,7 +375,11 @@ function useProviderWidgetSheetPresentation(input) {
             consumedTransitionSequenceRef.current = input.transitionSequence;
         }
         if (previousFrame === undefined || (transition === null || transition === void 0 ? void 0 : transition.kind) === "instant") {
+            presentationAttemptRef.current += 1;
+            pendingFrameAppearanceRef.current = undefined;
             stopAnimations();
+            presentedFrameAppearanceRef.current = input.frameAppearance;
+            presentedSurfaceStylesRef.current = input.surfaceStyles;
             animatedValues.height.setValue(frame.height);
             animatedValues.topLeftRadius.setValue(frame.topLeftRadius);
             animatedValues.topRightRadius.setValue(frame.topRightRadius);
@@ -371,6 +391,23 @@ function useProviderWidgetSheetPresentation(input) {
             topRightRadius: animatedValues.topRightRadius,
         };
         if (!shouldAnimate) {
+            const hasActiveAppearanceTransition = animationRef.current.some((animation) => animation.property === "appearance");
+            const didUncoordinatedAppearanceChange = hasActiveAppearanceTransition &&
+                !areWidgetFrameAppearancesEqual(pendingFrameAppearanceRef.current, input.frameAppearance);
+            if (didUncoordinatedAppearanceChange) {
+                presentationAttemptRef.current += 1;
+                pendingFrameAppearanceRef.current = undefined;
+                stopAnimations("appearance");
+                presentedSurfaceStylesRef.current = input.surfaceStyles;
+                presentedFrameAppearanceRef.current = input.frameAppearance;
+                setPresentationRevision((revision) => revision + 1);
+            }
+            else if (!hasActiveAppearanceTransition &&
+                !areWidgetFrameAppearancesEqual(presentedFrameAppearanceRef.current, input.frameAppearance)) {
+                presentedSurfaceStylesRef.current = input.surfaceStyles;
+                presentedFrameAppearanceRef.current = input.frameAppearance;
+                setPresentationRevision((revision) => revision + 1);
+            }
             for (const property of [
                 "height",
                 "topLeftRadius",
@@ -383,6 +420,28 @@ function useProviderWidgetSheetPresentation(input) {
             }
             return;
         }
+        const targetSurfaceStyles = input.surfaceStyles;
+        const targetFrameAppearance = input.frameAppearance;
+        const didFrameAppearanceChange = !areWidgetFrameAppearancesEqual(presentedFrameAppearanceRef.current, targetFrameAppearance);
+        const hasActiveAppearanceTransition = animationRef.current.some((animation) => animation.property === "appearance");
+        const shouldReplaceAppearanceTransition = didFrameAppearanceChange || hasActiveAppearanceTransition;
+        const presentationAttempt = shouldReplaceAppearanceTransition
+            ? presentationAttemptRef.current + 1
+            : presentationAttemptRef.current;
+        if (shouldReplaceAppearanceTransition) {
+            presentationAttemptRef.current = presentationAttempt;
+            pendingFrameAppearanceRef.current = undefined;
+            stopAnimations("appearance");
+        }
+        const presentTargetSurfaceStyles = () => {
+            if (presentationAttemptRef.current !== presentationAttempt) {
+                return;
+            }
+            presentedFrameAppearanceRef.current = targetFrameAppearance;
+            presentedSurfaceStylesRef.current = targetSurfaceStyles;
+            pendingFrameAppearanceRef.current = undefined;
+            setPresentationRevision((revision) => revision + 1);
+        };
         const easing = transition.easing.kind === "cubic-bezier"
             ? (_c = (_b = animationRuntime.Easing) === null || _b === void 0 ? void 0 : _b.bezier) === null || _c === void 0 ? void 0 : _c.call(_b, ...transition.easing.points)
             : undefined;
@@ -408,17 +467,37 @@ function useProviderWidgetSheetPresentation(input) {
                 animations.push(animate(property, values[property], frame[property]));
             }
         }
+        if (didFrameAppearanceChange && presentationProgressRef.current !== null) {
+            presentationProgressRef.current.setValue(0);
+            pendingFrameAppearanceRef.current = targetFrameAppearance;
+            animations.push(animate("appearance", presentationProgressRef.current, 1));
+        }
+        if (animations.length === 0) {
+            pendingFrameAppearanceRef.current = undefined;
+            presentedFrameAppearanceRef.current = targetFrameAppearance;
+            presentedSurfaceStylesRef.current = targetSurfaceStyles;
+            return;
+        }
         animationRef.current.push(...animations);
         for (const animation of animations) {
-            animation.handle.start(() => {
+            animation.handle.start((result) => {
                 animationRef.current = animationRef.current.filter((candidate) => candidate !== animation);
+                if (animation.property !== "appearance") {
+                    return;
+                }
+                if ((result === null || result === void 0 ? void 0 : result.finished) !== false &&
+                    presentationAttemptRef.current === presentationAttempt) {
+                    presentTargetSurfaceStyles();
+                }
             });
         }
     }, [
         animationRuntime,
         frame,
+        input.frameAppearance,
         input.isVisible,
         (_c = input.sheetHostLayoutUpdate) === null || _c === void 0 ? void 0 : _c.transition,
+        input.surfaceStyles,
         input.transitionSequence,
     ]);
     useEffect(() => () => {
@@ -432,14 +511,15 @@ function useProviderWidgetSheetPresentation(input) {
     if (!shouldUseAnimatedStyle || animatedValues === null) {
         return Object.assign(Object.assign({}, input.surfaceStyles), { surfaceView });
     }
+    const presentedSurfaceStyles = presentedSurfaceStylesRef.current;
     const animatedRadiusStyle = {
         borderTopLeftRadius: animatedValues.topLeftRadius,
         borderTopRightRadius: animatedValues.topRightRadius,
     };
     return {
-        contentStyle: Object.assign(Object.assign({}, input.surfaceStyles.contentStyle), animatedRadiusStyle),
-        frameStyle: Object.assign(Object.assign({}, input.surfaceStyles.frameStyle), animatedRadiusStyle),
-        sheetStyle: Object.assign(Object.assign(Object.assign({}, input.surfaceStyles.sheetStyle), animatedRadiusStyle), { height: animatedValues.height }),
+        contentStyle: Object.assign(Object.assign({}, presentedSurfaceStyles.contentStyle), animatedRadiusStyle),
+        frameStyle: Object.assign(Object.assign({}, presentedSurfaceStyles.frameStyle), animatedRadiusStyle),
+        sheetStyle: Object.assign(Object.assign(Object.assign({}, presentedSurfaceStyles.sheetStyle), animatedRadiusStyle), { height: animatedValues.height }),
         surfaceView,
     };
 }
@@ -498,13 +578,14 @@ export function ProviderWidgetHostOverlay({ children, frameAppearance, isVisible
     const isSheetVisible = isVisible && sheetHostViewport !== undefined;
     const pointerEvents = isSheetVisible ? "auto" : "none";
     const nativeBoxShadowSupport = useMemo(resolveNativeBoxShadowSupport, []);
-    const surfaceStyles = toProviderWidgetSheetSurfaceStyles({
+    const surfaceStyles = useMemo(() => toProviderWidgetSheetSurfaceStyles({
         frameAppearance,
         isVisible,
         sheetHostLayoutUpdate,
         nativeBoxShadowSupport,
-    });
+    }), [frameAppearance, isVisible, nativeBoxShadowSupport, sheetHostLayoutUpdate]);
     const sheetPresentation = useProviderWidgetSheetPresentation({
+        frameAppearance,
         isVisible,
         nativeView,
         sheetHostLayoutUpdate,

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getuserfeedback/react-native",
-  "version": "3.0.56",
+  "version": "3.0.58",
   "description": "getuserfeedback React Native SDK",
   "keywords": [
     "getuserfeedback",
@@ -44,8 +44,8 @@
     "lint": "biome check ."
   },
   "dependencies": {
-    "@getuserfeedback/protocol": "^3.15.0",
-    "@getuserfeedback/sdk": "^0.10.18",
+    "@getuserfeedback/protocol": "^3.16.0",
+    "@getuserfeedback/sdk": "^0.10.20",
     "robot3": "^1.2.0"
   },
   "peerDependencies": {