@getuserfeedback/react-native 1.3.3 → 1.3.4

package/dist/index.js

@@ -14,6 +14,7 @@ import { parseWebViewTransportNativeMessage } from "@getuserfeedback/protocol/we
 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";
@@ -29,80 +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 createUniqueId = (prefix) => {
     if (typeof globalThis.crypto !== "undefined" &&
         typeof globalThis.crypto.randomUUID === "function") {
@@ -150,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({
@@ -247,7 +141,7 @@ 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([]);
@@ -764,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,
@@ -795,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-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.3";
+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.3",
+  "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": {