@applicaster/zapp-react-native-ui-components 15.0.0-alpha.7809066324 → 15.0.0-alpha.8111467956

package/Components/GeneralContentScreen/utils/__tests__/useCurationAPI.test.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react-native";
 
 import {
   getTransformedPreset,

package/Components/GeneralContentScreen/utils/useCurationAPI.ts

@@ -9,10 +9,9 @@ import {
 import { isEmptyOrNil } from "@applicaster/zapp-react-native-utils/cellUtils";
 import { Categories } from "./logger";
 import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
-import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useRoute";
+import { useScreenContext } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
 
 import {
-  ZappPipesEntryContext,
   ZappPipesScreenContext,
   ZappPipesSearchContext,
 } from "@applicaster/zapp-react-native-ui-components/Contexts";
@@ -136,7 +135,6 @@ export const useCurationAPI = (
     [components]
   );
 
-  const { pathname } = useRoute();
   const [searchContext] = ZappPipesSearchContext.useZappPipesContext();
   const [screenContext] = ZappPipesScreenContext.useZappPipesContext();
 
@@ -146,10 +144,12 @@ export const useCurationAPI = (
     screenContextType === TABS_SCREEN_TYPE ||
     screenContextType === QB_TABS_SCREEN_TYPE;
 
-  const [entryContext] = ZappPipesEntryContext.useZappPipesContext(
-    pathname,
-    isNestedScreen
-  );
+  const screenContextData = useScreenContext();
+
+  const entryContext = ((isNestedScreen && screenContextData?.nested?.entry
+    ? screenContextData?.nested?.entry
+    : (screenContextData?.entry?.payload ?? screenContextData?.entry)) ||
+    {}) as ZappEntry;
 
   const urlsMap = useMemo<{ [key: string]: string }>(() => {
     const map = {};

package/Components/MasterCell/DefaultComponents/SecondaryImage/Image.tsx

@@ -3,8 +3,8 @@ import { isNil } from "ramda";
 import { ImageStyle, View } from "react-native";
 import {
   FIT_POSITION,
-  IMAGE_SIZING_FIT,
   IMAGE_SIZING_FILL,
+  IMAGE_SIZING_FIT,
 } from "@applicaster/zapp-react-native-utils/manifestUtils/secondaryImage";
 import { QBImage as Image } from "@applicaster/zapp-react-native-ui-components/Components/Image";
 
@@ -25,49 +25,51 @@ interface Props {
   fitPosition: typeof FIT_POSITION;
   fixedWidth: number;
   fixedHeight: number;
-  onAsyncRender: () => void;
+  onAsyncRender?: () => void;
 }
 
 /** Secondary Image Dynamic does not render until the image is loaded */
-const SecondaryImageDynamic = (props: Props) => {
-  const { uri, style, displayMode, imageSizing, fitPosition, onAsyncRender } =
-    props;
+const SecondaryImageDynamic = withAsyncRenderHOC(
+  (props: Props & { onAsyncRender: () => void }) => {
+    const { uri, style, displayMode, imageSizing, fitPosition, onAsyncRender } =
+      props;
 
-  const imageDimension = useGetImageDimensions(
-    uri,
-    style.width as number,
-    isImageSizingFit(imageSizing) ? undefined : (style.height as number)
-  );
+    const imageDimension = useGetImageDimensions(
+      uri,
+      style.width as number,
+      isImageSizingFit(imageSizing) ? undefined : (style.height as number)
+    );
 
-  const containerHeight = imageDimension?.height;
+    const containerHeight = imageDimension?.height;
 
-  const containerWidth = style?.width;
+    const containerWidth = style?.width;
 
-  if (isNil(imageDimension?.aspectRatio)) {
-    return null;
-  }
+    if (isNil(imageDimension?.aspectRatio)) {
+      return null;
+    }
 
-  return (
-    <View style={style} onLayout={onAsyncRender}>
-      <Image
-        {...props}
-        source={{ uri }}
-        style={{
-          ...getStyle({
-            imageSizing,
-            fitPosition,
-            displayMode,
-            imageDimension,
-            containerHeight,
-            containerWidth,
-          }),
-          borderRadius: style.borderRadius,
-          aspectRatio: imageDimension.aspectRatio,
-        }}
-      />
-    </View>
-  );
-};
+    return (
+      <View style={style} onLayout={onAsyncRender}>
+        <Image
+          {...props}
+          source={{ uri }}
+          style={{
+            ...getStyle({
+              imageSizing,
+              fitPosition,
+              displayMode,
+              imageDimension,
+              containerHeight,
+              containerWidth,
+            }),
+            borderRadius: style.borderRadius,
+            aspectRatio: imageDimension.aspectRatio,
+          }}
+        />
+      </View>
+    );
+  }
+);
 
 /** Secondary Image Fixed does not render  the image until the image is loaded, but keep container rendered */
 const SecondaryImageFixed = (props: Props) => {
@@ -79,7 +81,6 @@ const SecondaryImageFixed = (props: Props) => {
     fitPosition,
     fixedHeight,
     fixedWidth,
-    onAsyncRender,
   } = props;
 
   const imageDimension = useGetImageDimensions(
@@ -89,7 +90,7 @@ const SecondaryImageFixed = (props: Props) => {
   );
 
   return (
-    <View style={style} onLayout={onAsyncRender}>
+    <View style={style}>
       {isNil(imageDimension?.aspectRatio) ? null : (
         <Image
           {...props}
@@ -128,4 +129,4 @@ const SecondaryImageComponent = (props: Props) => {
   );
 };
 
-export const SecondaryImage = withAsyncRenderHOC(SecondaryImageComponent);
+export const SecondaryImage = SecondaryImageComponent;

package/Components/MasterCell/DefaultComponents/SecondaryImage/hooks/__tests__/useGetImageDimensions.test.ts

@@ -1,4 +1,4 @@
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook, waitFor } from "@testing-library/react-native";
 import { Image } from "react-native";
 
 import { useGetImageDimensions } from "../useGetImageDimensions";
@@ -13,15 +13,16 @@ jest.spyOn(Image, "getSize").mockImplementation((_uri, success) => {
 
 describe("useGetImageDimensions", () => {
   it("should return aspect ration initially when known dimensions", async () => {
-    const { result, waitForNextUpdate } = renderHook(() =>
+    const { result } = renderHook(() =>
       useGetImageDimensions("https://some_url.com", WIDTH, undefined)
     );
 
     expect(result.current).toBeUndefined();
-    await waitForNextUpdate();
 
-    expect(result.current).toEqual(
-      getDimension({ width: WIDTH, height: HEIGTH })
-    );
+    await waitFor(() => {
+      expect(result.current).toEqual(
+        getDimension({ width: WIDTH, height: HEIGTH })
+      );
+    });
   });
 });

package/Components/MasterCell/DefaultComponents/SecondaryImage/index.ts

@@ -103,7 +103,7 @@ export const SecondaryImage = ({ value, currentPosition, state }: Props) => {
         data: [
           {
             func: "image_src_from_media_item",
-            args: [imageKey],
+            args: [imageKey, false],
             propName: "uri",
           },
         ],

package/Components/MasterCell/DefaultComponents/tv/TvActionButtons/index.ts

@@ -4,7 +4,7 @@ import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/nu
 import { Button } from "./Button";
 import {
   getButtonsCount,
-  getPluginIdentifier,
+  memoizedGetPluginIdentifier,
   mapSelfAlignment,
 } from "./utils";
 
@@ -80,7 +80,11 @@ export const TvActionButtons = ({
           prefix: independentStyles ? prefixSpecificButton : buttonId(1),
           value,
           platformValue,
-          pluginIdentifier: getPluginIdentifier(configuration, PREFIX, index),
+          pluginIdentifier: memoizedGetPluginIdentifier(
+            configuration,
+            PREFIX,
+            index
+          ),
           suffixId: prefixSpecificButton,
           preferredFocus: index === 0,
         });

package/Components/MasterCell/DefaultComponents/tv/TvActionButtons/utils/__tests__/getPluginIdentifier.test.ts

@@ -3,7 +3,7 @@ import { getPluginIdentifier } from "..";
 describe("getPluginIdentifier", () => {
   const prefix = "tv_buttons";
 
-  it("get first plugin identifier", () => {
+  it("returns the first valid plugin identifier", () => {
     const configuration = {
       tv_buttons_button_1_other: "value",
       tv_buttons_button_1_assign_action:
@@ -13,13 +13,12 @@ describe("getPluginIdentifier", () => {
     };
 
     const index = 0;
-
     const result = getPluginIdentifier(configuration, prefix, index);
 
     expect(result).toEqual(configuration.tv_buttons_button_1_assign_action);
   });
 
-  it("get second plugin identifier", () => {
+  it("returns the second valid plugin identifier", () => {
     const configuration = {
       tv_buttons_button_1_other: "value_1",
       tv_buttons_button_1_assign_action:
@@ -30,24 +29,123 @@ describe("getPluginIdentifier", () => {
     };
 
     const index = 1;
-
     const result = getPluginIdentifier(configuration, prefix, index);
 
     expect(result).toEqual(configuration.tv_buttons_button_2_assign_action);
   });
 
-  it("get undefined if no assign_actions at all", () => {
+  it("returns undefined when there are no assign_action keys", () => {
     const configuration = {};
+    const index = 0;
+
+    const result = getPluginIdentifier(configuration, prefix, index);
+
+    expect(result).toBeUndefined();
+  });
+
+  it("skips undefined values and returns the correct plugin identifier", () => {
+    const configuration = {
+      tv_buttons_button_1_assign_action: "tv_buttons_button_1_assign_action",
+      tv_buttons_button_2_assign_action: undefined,
+      tv_buttons_button_3_assign_action: "tv_buttons_button_3_assign_action",
+    };
+
+    const index = 1;
+    const result = getPluginIdentifier(configuration, prefix, index);
+
+    expect(result).toEqual(configuration.tv_buttons_button_3_assign_action);
+  });
+
+  it("handles missing intermediate keys and returns the correct plugin identifier", () => {
+    const configuration = {
+      tv_buttons_button_1_assign_action: "tv_buttons_button_1_assign_action",
+      tv_buttons_button_3_assign_action: "tv_buttons_button_3_assign_action",
+    };
+
+    const index = 1;
+    const result = getPluginIdentifier(configuration, prefix, index);
+
+    expect(result).toEqual(configuration.tv_buttons_button_3_assign_action);
+  });
+
+  it("skips empty string values and returns the first non-empty assign_action", () => {
+    const configuration = {
+      tv_buttons_button_1_assign_action: "",
+      tv_buttons_button_2_assign_action: "tv_buttons_button_2_assign_action",
+    };
 
     const index = 0;
+    const result = getPluginIdentifier(configuration, prefix, index);
+
+    expect(result).toEqual(configuration.tv_buttons_button_2_assign_action);
+  });
+
+  it("returns undefined for negative index", () => {
+    const configuration = {
+      tv_buttons_button_1_assign_action: "a",
+      tv_buttons_button_2_assign_action: "b",
+    };
 
+    const index = -1;
     const result = getPluginIdentifier(configuration, prefix, index);
 
     expect(result).toBeUndefined();
   });
+
+  it("returns undefined for out-of-bounds index", () => {
+    const configuration = {
+      tv_buttons_button_1_assign_action: "a",
+      tv_buttons_button_2_assign_action: "b",
+    };
+
+    const index = 5;
+    const result = getPluginIdentifier(configuration, prefix, index);
+
+    expect(result).toBeUndefined();
+  });
+
+  it("ignores keys with wrong prefix or format", () => {
+    const configuration = {
+      tv_buttons_button_1_assign_action: "a",
+      tv_buttons_wrongprefix_2_assign_action: "b",
+      tv_buttons_button_x_assign_action: "c",
+    };
+
+    const index = 1;
+    const result = getPluginIdentifier(configuration, prefix, index);
+
+    expect(result).toBeUndefined();
+  });
+
+  it("returns undefined if all assign_actions are null or empty", () => {
+    const configuration = {
+      tv_buttons_button_1_assign_action: null,
+      tv_buttons_button_2_assign_action: undefined,
+      tv_buttons_button_3_assign_action: "",
+    };
+
+    const index = 0;
+    const result = getPluginIdentifier(configuration, prefix, index);
+
+    expect(result).toBeUndefined();
+  });
+
+  it("handles non-string values correctly", () => {
+    const configuration = {
+      tv_buttons_button_1_assign_action: 123,
+      tv_buttons_button_2_assign_action: true,
+      tv_buttons_button_3_assign_action: { nested: "value" },
+    };
+
+    expect(getPluginIdentifier(configuration, prefix, 0)).toEqual(123);
+    expect(getPluginIdentifier(configuration, prefix, 1)).toEqual(true);
+    expect(getPluginIdentifier(configuration, prefix, 2)).toEqual({
+      nested: "value",
+    });
+  });
 });
 
-describe("getPluginIdentifier - when configuration has same values for different keys", () => {
+describe("getPluginIdentifier - when configuration has duplicate values", () => {
   const prefix = "tv_buttons";
 
   const configuration = {
@@ -55,17 +153,15 @@ describe("getPluginIdentifier - when configuration has same values for different
     tv_buttons_button_2_assign_action: "navigation_action",
   };
 
-  it("get first plugin identifier", () => {
+  it("returns the first plugin identifier when values are identical", () => {
     const index = 0;
-
     const result = getPluginIdentifier(configuration, prefix, index);
 
     expect(result).toEqual(configuration.tv_buttons_button_1_assign_action);
   });
 
-  it("get second plugin identifier", () => {
+  it("returns the second plugin identifier when values are identical", () => {
     const index = 1;
-
     const result = getPluginIdentifier(configuration, prefix, index);
 
     expect(result).toEqual(configuration.tv_buttons_button_2_assign_action);

package/Components/MasterCell/DefaultComponents/tv/TvActionButtons/utils/index.ts

@@ -1,7 +1,7 @@
 import * as R from "ramda";
+import memoizee from "memoizee";
 
 import { isWeb } from "@applicaster/zapp-react-native-utils/reactUtils";
-import { isNotNil } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
 
 export const getButtonsCount = (
   configuration: Record<string, unknown>,
@@ -21,23 +21,29 @@ export const getPluginIdentifier = (
   configuration: Record<string, unknown>,
   prefix: string,
   index: number
-): string => {
-  const match = `${prefix}_button_\\d_assign_action`;
-  const re = new RegExp(match);
-
-  const rejectNils = R.compose(R.path([index]), R.filter(isNotNil));
-
-  return rejectNils(
-    R.toPairs(configuration)
-      .filter(([key]) => R.startsWith(`${prefix}_button`, key))
-      .map(([key, value]) => {
-        const matched = key.match(re);
+): string | undefined => {
+  const re = new RegExp(`${prefix}_button_\\d_assign_action`);
+  let count = 0;
+
+  for (const [key, value] of Object.entries(configuration)) {
+    if (
+      key.startsWith(`${prefix}_button`) &&
+      re.test(key) &&
+      value != null &&
+      value !== ""
+    ) {
+      if (count === index) return value as string;
+      count++;
+    }
+  }
 
-        return matched ? value : undefined;
-      })
-  );
+  return undefined;
 };
 
+export const memoizedGetPluginIdentifier = memoizee(getPluginIdentifier, {
+  primitive: true,
+});
+
 type Label = {
   name: string;
 };

package/Components/MasterCell/hoc/withAsyncRender.tsx

@@ -6,12 +6,12 @@ type withAsyncRenderHOCProps = {
   emitAsyncElementLayout?: () => void;
 };
 
-type withAsyncRenderHOCT = (
-  Component: React.ComponentType<{ onAsyncRender: () => void }>
-) => React.FC<withAsyncRenderHOCProps>;
-
-export const withAsyncRenderHOC: withAsyncRenderHOCT = (Component) => {
-  const WithAsyncRender = (props: withAsyncRenderHOCProps) => {
+export const withAsyncRenderHOC = <P extends { onAsyncRender: () => void }>(
+  Component: React.ComponentType<P>
+): React.FC<Omit<P, "onAsyncRender"> & withAsyncRenderHOCProps> => {
+  const WithAsyncRender = (
+    props: Omit<P, "onAsyncRender"> & withAsyncRenderHOCProps
+  ) => {
     const { emitAsyncElementRegistrate = noop, emitAsyncElementLayout = noop } =
       props;
 
@@ -27,7 +27,9 @@ export const withAsyncRenderHOC: withAsyncRenderHOCT = (Component) => {
       }
     }, [emitAsyncElementLayout]);
 
-    return <Component {...props} onAsyncRender={onAsyncRender} />;
+    return (
+      <Component {...(props as unknown as P)} onAsyncRender={onAsyncRender} />
+    );
   };
 
   return WithAsyncRender;

package/Components/River/ComponentsMap/hooks/__tests__/useLoadingState.test.ts

@@ -1,4 +1,4 @@
-import { renderHook, act } from "@testing-library/react-hooks";
+import { renderHook, act } from "@testing-library/react-native";
 import { BehaviorSubject } from "rxjs";
 import { useLoadingState } from "../useLoadingState";
 

package/Components/Screen/orientationHandler.ts

@@ -1,18 +1,16 @@
-import React, { useLayoutEffect } from "react";
+import { useLayoutEffect } from "react";
 
 import {
   allowedOrientationsForScreen,
-  ORIENTATIONS,
   getOrientation,
+  ORIENTATIONS,
   useGetScreenOrientation,
 } from "@applicaster/zapp-react-native-utils/appUtils/orientationHelper";
 import { usePrevious } from "@applicaster/zapp-react-native-utils/reactHooks/utils";
 import { usePlugins, useAppData } from "@applicaster/zapp-react-native-redux";
 import { findPluginByType } from "@applicaster/zapp-react-native-utils/pluginUtils";
 import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
-
-import { ZappHookModalContext } from "../../Contexts";
-import { HookModalContextT } from "../../Contexts/ZappHookModalContext";
+import { zappHookModalStore } from "../../Contexts/ZappHookModalContext";
 
 /**
  * This function calls the native module needed to set orientation
@@ -89,10 +87,6 @@ type Props = {
 };
 
 export function useScreenOrientationHandler({ screenData, isActive }: Props) {
-  const { isHooksExecutionInProgress } = React.useContext<HookModalContextT>(
-    ZappHookModalContext.ReactContext
-  );
-
   const prevIsActive = usePrevious(isActive);
 
   const newOrientation = useNewOrientationForScreenData({
@@ -105,6 +99,9 @@ export function useScreenOrientationHandler({ screenData, isActive }: Props) {
       return;
     }
 
+    // TODO: make sure it can be static getter and subscription is not needed
+    const { isHooksExecutionInProgress } = zappHookModalStore.getState();
+
     // If modal hook presented we need to skip
     // Change orientation for presenter screen
     if (isHooksExecutionInProgress) {
@@ -116,7 +113,7 @@ export function useScreenOrientationHandler({ screenData, isActive }: Props) {
 
       setOrientation(newOrientation);
     }
-  }, [newOrientation, isHooksExecutionInProgress, prevIsActive, isActive]);
+  }, [newOrientation, prevIsActive, isActive]);
 }
 
 export function useOrientationHandler({ screenData }: OrientationHookArgs) {

package/Components/VideoModal/hooks/__tests__/useDelayedPlayerDetails.test.ts

@@ -1,4 +1,4 @@
-import { renderHook } from "@testing-library/react-hooks";
+import { act, renderHook, waitFor } from "@testing-library/react-native";
 import { useDelayedPlayerDetails } from "../useDelayedPlayerDetails";
 import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
 
@@ -13,16 +13,20 @@ describe("useDelayedPlayerDetails", () => {
     jest.clearAllMocks();
   });
 
-  it("should return false initially, that changes after 1 second", () => {
+  it("should return false initially, that changes after 1 second", async () => {
     const { result } = renderHook(() =>
       useDelayedPlayerDetails({ isInline: true, isDocked: false, isPip: false })
     );
 
     expect(result.current).toBe(false);
 
-    jest.advanceTimersByTime(1000);
+    act(() => {
+      jest.advanceTimersByTime(1000);
+    });
 
-    expect(result.current).toBe(true);
+    await waitFor(() => {
+      expect(result.current).toBe(true);
+    });
   });
 
   it("should return false when isPip is true", () => {
@@ -41,7 +45,7 @@ describe("useDelayedPlayerDetails", () => {
     expect(result.current).toBe(false);
   });
 
-  it("should return true for tablet regardless of other flags", () => {
+  it("should return true for tablet regardless of other flags", async () => {
     (useIsTablet as jest.Mock).mockReturnValue(true);
 
     const { result } = renderHook(() =>
@@ -52,8 +56,12 @@ describe("useDelayedPlayerDetails", () => {
       })
     );
 
-    jest.advanceTimersByTime(1000);
+    act(() => {
+      jest.advanceTimersByTime(1000);
+    });
 
-    expect(result.current).toBe(true);
+    await waitFor(() => {
+      expect(result.current).toBe(true);
+    });
   });
 });

package/Components/Viewport/ViewportEvents/__tests__/viewportEvents.test.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react-native";
 import {
   ViewportEvents,
   useViewportEventsContext,

package/Contexts/ScreenTrackedViewPositionsContext/__tests__/index.test.tsx

@@ -1,4 +1,4 @@
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react-native";
 import {
   useScreenTrackedViewPositionsContext,
   ScreenTrackedViewPositionsContext,

package/Contexts/ZappHookModalContext/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import { create } from "zustand";
 
 type HookModalState = {
   path: string;
@@ -10,11 +10,12 @@ export type HookModalContextT = {
   setIsHooksExecutionInProgress: (hookExecutionState?: boolean) => void;
   isRunningInBackground: boolean;
   isPresentationFullScreen: boolean;
-  setIsRunningInBackground: (hookBackgroundProcessState?: boolean) => void;
-  setIsPresentingFullScreen: (hookBackgroundProcessState?: boolean) => void;
+  setIsRunningInBackground: () => void;
+  setIsPresentingFullScreen: () => void;
   state: HookModalState;
   setState: (state: HookModalState) => void;
   resetState: () => void;
+  hookPresentationMode: HookPresentationMode;
 };
 
 const initialState = {
@@ -24,68 +25,43 @@ const initialState = {
 
 type HookPresentationMode = "background" | "fullScreen";
 
-const ReactContext = React.createContext<HookModalContextT>({
-  isHooksExecutionInProgress: false,
-  setIsHooksExecutionInProgress: () => {},
-  isRunningInBackground: null,
-  setIsRunningInBackground: () => {},
-  setIsPresentingFullScreen: () => {},
-  isPresentationFullScreen: null,
+// Use useZappHookModalStore() in React components (hooks)
+// Use zappHookModalStore.getState() in non-React functions (utility functions, etc.)
+export const useZappHookModalStore = create<HookModalContextT>()((set) => ({
   state: initialState,
-  setState: () => null,
-  resetState: () => null,
-});
-
-const Provider = ({ children }: { children: React.ReactNode }) => {
-  const [state, setState] = React.useState<HookModalState>(initialState);
-
-  const [hookPresentationMode, setHookPresentationMode] =
-    React.useState<HookPresentationMode>(null);
-
-  const resetState = useCallback(() => {
-    setState(initialState);
-  }, [setState]);
-
-  const [isHooksExecutionInProgress, setIsHooksExecutionInProgress] =
-    React.useState(false);
+  isHooksExecutionInProgress: false,
+  hookPresentationMode: null as HookPresentationMode,
+  isRunningInBackground: false,
+  isPresentationFullScreen: false,
 
-  const setIsRunningInBackground = () => {
-    setHookPresentationMode("background");
-  };
+  setState: (newState: HookModalState) => {
+    set({ state: newState });
+  },
 
-  const setIsPresentingFullScreen = () => {
-    setHookPresentationMode("fullScreen");
-  };
+  setIsHooksExecutionInProgress: (hookExecutionState?: boolean) => {
+    set({ isHooksExecutionInProgress: hookExecutionState ?? false });
+  },
 
-  return (
-    <ReactContext.Provider
-      value={{
-        isRunningInBackground: hookPresentationMode === "background",
-        setIsRunningInBackground,
-        setIsPresentingFullScreen,
-        isPresentationFullScreen: hookPresentationMode === "fullScreen",
-        isHooksExecutionInProgress,
-        setIsHooksExecutionInProgress,
-        state,
-        setState,
-        resetState,
-      }}
-    >
-      {children}
-    </ReactContext.Provider>
-  );
-};
+  setIsRunningInBackground: () => {
+    set({
+      hookPresentationMode: "background",
+      isRunningInBackground: true,
+      isPresentationFullScreen: false,
+    });
+  },
 
-const withProvider = (Component) => {
-  const WithProvider = (props) => {
-    return (
-      <Provider>
-        <Component {...props} />
-      </Provider>
-    );
-  };
+  setIsPresentingFullScreen: () => {
+    set({
+      hookPresentationMode: "fullScreen",
+      isRunningInBackground: false,
+      isPresentationFullScreen: true,
+    });
+  },
 
-  return WithProvider;
-};
+  resetState: () => {
+    set({ state: initialState });
+  },
+}));
 
-export const ZappHookModalContext = { withProvider, ReactContext };
+// Export an alias for clearer non-React usage (utility functions, etc.)
+export const zappHookModalStore = useZappHookModalStore;

package/Contexts/index.ts

@@ -12,8 +12,6 @@ export { HorizontalScrollContext } from "./HorizontalScrollContext";
 
 export { RiverOffsetContext } from "./RiverOffsetContext";
 
-export { ZappHookModalContext } from "./ZappHookModalContext";
-
 export { MeasurementContext } from "./MeasurementContext";
 
 export * from "./ZappPipesContext";

package/events/index.ts

@@ -5,4 +5,5 @@ export enum QBUIComponentEvents {
   scrollVerticallyToInitialOffset = "scrollVerticallyToInitialOffset",
   focusOnSelectedTab = "focusOnSelectedTab",
   focusOnSelectedTopMenuItem = "focusOnSelectedTopMenuItem",
+  scrollToTopForScreenWrappedInContainer = "scrollToTopForScreenWrappedInContainer",
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "15.0.0-alpha.7809066324",
+  "version": "15.0.0-alpha.8111467956",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,10 +28,10 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "15.0.0-alpha.7809066324",
-    "@applicaster/zapp-react-native-bridge": "15.0.0-alpha.7809066324",
-    "@applicaster/zapp-react-native-redux": "15.0.0-alpha.7809066324",
-    "@applicaster/zapp-react-native-utils": "15.0.0-alpha.7809066324",
+    "@applicaster/applicaster-types": "15.0.0-alpha.8111467956",
+    "@applicaster/zapp-react-native-bridge": "15.0.0-alpha.8111467956",
+    "@applicaster/zapp-react-native-redux": "15.0.0-alpha.8111467956",
+    "@applicaster/zapp-react-native-utils": "15.0.0-alpha.8111467956",
     "fast-json-stable-stringify": "^2.1.0",
     "promise": "^8.3.0",
     "url": "^0.11.0",