@applicaster/zapp-react-native-ui-components 15.0.0-alpha.4429053208 → 15.0.0-alpha.4920595583

package/Components/Cell/CellWithFocusable.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
+import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 
 import { useCellState } from "../MasterCell/utils";
 import { FocusableGroup } from "../FocusableGroup";
@@ -26,6 +27,13 @@ type Props = {
 
 const addPrefix = (id: string) => `focusable-cell-wrapper-${id}`;
 
+const wrapperStyles = {
+  flex: platformSelect({
+    tvos: 1,
+    default: undefined,
+  }),
+};
+
 export function CellWithFocusable(props: Props) {
   const {
     index,
@@ -94,6 +102,7 @@ export function CellWithFocusable(props: Props) {
       onFocus={onGroupFocus}
       onBlur={onGroupBlur}
       skipFocusManagerRegistration={skipFocusManagerRegistration}
+      style={wrapperStyles}
     >
       <CellWrapper style={styles.cellWrapper}>
         <CellRenderer

package/Components/Focusable/FocusableTvOS.tsx

@@ -13,7 +13,7 @@ import { findNodeHandle, ViewStyle } from "react-native";
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 
 import {
-  emitDidFocused,
+  emitFocused,
   emitNativeRegistered,
 } from "@applicaster/zapp-react-native-utils/appUtils/focusManagerAux/utils/utils.ios";
 
@@ -91,7 +91,7 @@ export class Focusable extends BaseFocusable<Props> {
     }
 
     const id: string = nativeEvent.itemID;
-    emitDidFocused(id);
+    emitFocused(id);
 
     onFocus(nativeEvent);
   }

package/Components/FocusableGroup/FocusableTvOS.tsx

@@ -1,5 +1,4 @@
 import * as React from "react";
-import { compose } from "@applicaster/zapp-react-native-utils/utils";
 import { FocusableGroupNative } from "@applicaster/zapp-react-native-ui-components/Components/NativeFocusables";
 import { BaseFocusable } from "@applicaster/zapp-react-native-ui-components/Components/BaseFocusable";
 import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
@@ -7,9 +6,6 @@ import { LayoutContext } from "@applicaster/zapp-react-native-tvos-app/Context/L
 import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useRoute";
 import { isScreenPlayable } from "@applicaster/zapp-react-native-utils/navigationUtils/itemTypes";
 import { emitNativeRegistered } from "@applicaster/zapp-react-native-utils/appUtils/focusManagerAux/utils/utils.ios";
-import { withAboveTabsScreenContextConsumer } from "@applicaster/zapp-react-native-ui-components/Contexts/AboveTabsScreenContext";
-
-import { useIsFocusEnabled } from "./hooks";
 
 const { log_verbose } = createLogger({
   subsystem: "General",
@@ -91,8 +87,8 @@ class FocusableGroupComponent extends BaseFocusable<Props> {
   }
 }
 
-export const withFocusDisabledHOC = (Component) => {
-  return function WithFocusDisabledHOC(props) {
+export const withFocusDisabled = (Component) => {
+  return function WithFocusDisabled(props) {
     // @ts-ignore
     const { screenFocusBlocked } = React.useContext(LayoutContext.ReactContext);
 
@@ -102,27 +98,8 @@ export const withFocusDisabledHOC = (Component) => {
 
     const blockScreenFocus = isPlayerPresented === false && screenFocusBlocked;
 
-    return (
-      <Component
-        {...props}
-        isFocusDisabled={blockScreenFocus || props.isFocusDisabled}
-      />
-    );
-  };
-};
-
-const withAboveTabsScreenHOC = (Component) => {
-  return function WithAboveTabsScreenHOC(props) {
-    const { aboveTabsScreen } = props;
-
-    const isFocusEnabled = useIsFocusEnabled(aboveTabsScreen);
-
-    return <Component {...props} isFocusDisabled={!isFocusEnabled} />;
+    return <Component {...props} isFocusDisabled={blockScreenFocus} />;
   };
 };
 
-export const FocusableGroup = compose(
-  withAboveTabsScreenContextConsumer,
-  withAboveTabsScreenHOC,
-  withFocusDisabledHOC
-)(FocusableGroupComponent);
+export const FocusableGroup = withFocusDisabled(FocusableGroupComponent);

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/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/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,124 @@ 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 +154,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/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/Tabs/TabContent.tsx

@@ -1,11 +1,10 @@
 import React from "react";
-import { View, ViewStyle } from "react-native";
+import { View, StyleSheet } from "react-native";
 
 import { River } from "@applicaster/zapp-react-native-ui-components/Components";
 import { withNestedNavigationContextProvider } from "@applicaster/zapp-react-native-ui-components/Contexts/NestedNavigationContext";
 
 type Props = {
-  styles: Record<string, ViewStyle>;
   minHeight: number;
   changingTab: boolean;
   feedUrl: string;
@@ -14,9 +13,14 @@ type Props = {
   backgroundColor: string;
 };
 
+const styles = StyleSheet.create({
+  riverWrapper: {
+    flex: 1,
+  },
+});
+
 function TabContentComponent(props: Props) {
   const {
-    styles,
     minHeight,
     backgroundColor,
     changingTab,
@@ -29,7 +33,6 @@ function TabContentComponent(props: Props) {
     <View
       style={[
         styles.riverWrapper,
-
         {
           backgroundColor,
           minHeight,

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/ScreenContext/index.tsx

@@ -16,6 +16,7 @@ import { useNestedNavigationContext } from "@applicaster/zapp-react-native-ui-co
 import { create } from "zustand";
 import { subscribeWithSelector } from "zustand/middleware";
 import { useShallow } from "zustand/react/shallow";
+
 import { Animated } from "react-native";
 
 interface NavBarStoreState {
@@ -29,6 +30,8 @@ interface NavBarStoreState {
   scrollState: number;
   contentPosition: string;
   scrollYAnimated: Animated.Value;
+  hideOnScrollAnimated: Animated.Value;
+  hideOnScroll: boolean;
 }
 
 interface NavBarState {
@@ -62,24 +65,28 @@ const createStateStore = () =>
   );
 
 const createStore = () =>
-  create<NavBarStoreState>((set) => ({
-    title: "",
-    summary: "",
-    visible: true,
-    height: 0,
-    scrollState: 0,
-    contentPosition: "",
-    scrollYAnimated: new Animated.Value(0),
-    setTitle(title) {
-      set({ title });
-    },
-    setSummary(summary) {
-      set({ summary });
-    },
-    setVisible(visible) {
-      set({ visible });
-    },
-  }));
+  create(
+    subscribeWithSelector<NavBarStoreState>((set) => ({
+      title: "",
+      summary: "",
+      visible: true,
+      height: 0,
+      scrollState: 0,
+      contentPosition: "",
+      scrollYAnimated: new Animated.Value(0),
+      hideOnScrollAnimated: new Animated.Value(0),
+      hideOnScroll: false,
+      setTitle(title) {
+        set({ title });
+      },
+      setSummary(summary) {
+        set({ summary });
+      },
+      setVisible(visible) {
+        set({ visible });
+      },
+    }))
+  );
 
 type ScreenContextType = {
   _navBarStore: ReturnType<typeof createStore>;

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.4429053208",
+  "version": "15.0.0-alpha.4920595583",
   "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.4429053208",
-    "@applicaster/zapp-react-native-bridge": "15.0.0-alpha.4429053208",
-    "@applicaster/zapp-react-native-redux": "15.0.0-alpha.4429053208",
-    "@applicaster/zapp-react-native-utils": "15.0.0-alpha.4429053208",
+    "@applicaster/applicaster-types": "15.0.0-alpha.4920595583",
+    "@applicaster/zapp-react-native-bridge": "15.0.0-alpha.4920595583",
+    "@applicaster/zapp-react-native-redux": "15.0.0-alpha.4920595583",
+    "@applicaster/zapp-react-native-utils": "15.0.0-alpha.4920595583",
     "fast-json-stable-stringify": "^2.1.0",
     "promise": "^8.3.0",
     "url": "^0.11.0",

package/Components/FocusableGroup/hooks/__tests__/useIsFocusEnabled.test.ts

@@ -1,113 +0,0 @@
-import { act, renderHook } from "@testing-library/react-native";
-
-import { useIsFocusEnabled } from "../useIsFocusEnabled";
-
-// ----------------- MOCKS -----------------
-jest.mock(
-  "@applicaster/zapp-react-native-utils/appUtils/focusManager/index.ios",
-  () => ({
-    focusManager: {
-      isFocusOnMenu: jest.fn(),
-      isFocusOnTabsScreen: jest.fn(),
-    },
-  })
-);
-
-jest.mock(
-  "@applicaster/zapp-react-native-utils/appUtils/focusManagerAux/utils/utils.ios",
-  () => {
-    const { Subject } = require("rxjs");
-
-    return {
-      willFocused$: new Subject<void>(),
-      didFocused$: new Subject<void>(),
-      TabsScreenScreenSelectorContainerRegistry: {
-        observable$: new Subject<string>(),
-      },
-    };
-  }
-);
-
-import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focusManager/index.ios";
-import {
-  willFocused$,
-  didFocused$,
-  TabsScreenScreenSelectorContainerRegistry,
-} from "@applicaster/zapp-react-native-utils/appUtils/focusManagerAux/utils/utils.ios";
-
-// ----------------- TESTS -----------------
-describe("useIsFocusEnabled", () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it("returns true by default", () => {
-    const { result } = renderHook(() => useIsFocusEnabled(true));
-
-    expect(result.current).toBe(true);
-  });
-
-  it("disables focus when focus moves to menu", () => {
-    (focusManager.isFocusOnMenu as jest.Mock).mockReturnValue(true);
-
-    const { result } = renderHook(() => useIsFocusEnabled(true));
-
-    act(() => {
-      willFocused$.next();
-      didFocused$.next();
-    });
-
-    expect(result.current).toBe(false);
-  });
-
-  it("re-enables focus when focus lands on tabs screen", () => {
-    (focusManager.isFocusOnMenu as jest.Mock).mockReturnValue(true);
-    (focusManager.isFocusOnTabsScreen as jest.Mock).mockReturnValue(true);
-
-    const { result } = renderHook(() => useIsFocusEnabled(true));
-
-    // Disable focus first
-    act(() => {
-      willFocused$.next();
-      didFocused$.next();
-    });
-
-    expect(result.current).toBe(false);
-
-    // Enable focus again
-    act(() => {
-      didFocused$.next();
-      TabsScreenScreenSelectorContainerRegistry.observable$.next("tabs-id");
-    });
-
-    expect(result.current).toBe(true);
-  });
-
-  it("does nothing when not above tabs screen", () => {
-    const { result } = renderHook(() => useIsFocusEnabled(false));
-
-    act(() => {
-      willFocused$.next();
-      didFocused$.next();
-      TabsScreenScreenSelectorContainerRegistry.observable$.next("id");
-    });
-
-    expect(result.current).toBe(true);
-  });
-
-  it("cleans up subscriptions on unmount", () => {
-    (focusManager.isFocusOnMenu as jest.Mock).mockReturnValue(true);
-
-    const { unmount, result } = renderHook(() => useIsFocusEnabled(true));
-
-    unmount();
-
-    act(() => {
-      willFocused$.next();
-      didFocused$.next();
-    });
-
-    // State should not change after unmount
-    expect(result.current).toBe(true);
-  });
-});

package/Components/FocusableGroup/hooks/index.ts

@@ -1 +0,0 @@
-export { useIsFocusEnabled } from "./useIsFocusEnabled";

package/Components/FocusableGroup/hooks/useIsFocusEnabled.ts

@@ -1,68 +0,0 @@
-import * as React from "react";
-import { switchMap, first, filter, repeat } from "rxjs/operators";
-import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focusManager/index.ios";
-
-import {
-  willFocused$,
-  didFocused$,
-  TabsScreenScreenSelectorContainerRegistry,
-} from "@applicaster/zapp-react-native-utils/appUtils/focusManagerAux/utils/utils.ios";
-
-export const useIsFocusEnabled = (isAboveTabsScreen: boolean): boolean => {
-  const [isFocusEnabled, setIsFocusedEnabled] = React.useState(true);
-
-  const enableFocus = React.useCallback(() => {
-    setIsFocusedEnabled(true);
-  }, []);
-
-  const disableFocus = React.useCallback(() => {
-    setIsFocusedEnabled(false);
-  }, []);
-
-  React.useEffect(() => {
-    const subscription = didFocused$
-      .pipe(
-        filter(() => isAboveTabsScreen && !isFocusEnabled),
-
-        switchMap(() => TabsScreenScreenSelectorContainerRegistry.observable$),
-        filter((id) => id && focusManager.isFocusOnTabsScreen(id)),
-
-        // run only once, then re-subscribe on didFocused$ again
-        first(),
-        repeat()
-      )
-      .subscribe(() => {
-        enableFocus();
-      });
-
-    return () => {
-      subscription.unsubscribe();
-    };
-  }, [enableFocus, isFocusEnabled, isAboveTabsScreen]);
-
-  React.useEffect(() => {
-    const subscription = willFocused$
-      .pipe(
-        filter(() => isAboveTabsScreen && isFocusEnabled),
-
-        // start waiting onFocus event
-        switchMap(() => didFocused$),
-
-        // focus is landed on top-menu
-        filter(() => focusManager.isFocusOnMenu()),
-
-        // run only once, then re-subscribe on willFocused$ again
-        first(),
-        repeat()
-      )
-      .subscribe(() => {
-        disableFocus();
-      });
-
-    return () => {
-      subscription.unsubscribe();
-    };
-  }, [disableFocus, isFocusEnabled, isAboveTabsScreen]);
-
-  return isFocusEnabled;
-};

package/Contexts/AboveTabsScreenContext/index.tsx

@@ -1,33 +0,0 @@
-import React, { useMemo } from "react";
-import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
-
-export const AboveTabsScreenContext = React.createContext({
-  aboveTabsScreen: false,
-});
-
-export const withAboveTabsScreenContext = (Component) =>
-  function AbovetabsScreenContextProviderWrapper(props) {
-    const aboveTabsScreen = toBooleanWithDefaultFalse(
-      props?.item?.above_tabs_screen
-    );
-
-    const contextValue = useMemo(
-      () => ({
-        aboveTabsScreen,
-      }),
-      [aboveTabsScreen]
-    );
-
-    return (
-      <AboveTabsScreenContext.Provider value={contextValue}>
-        <Component {...props} />
-      </AboveTabsScreenContext.Provider>
-    );
-  };
-
-export const withAboveTabsScreenContextConsumer = (Component) =>
-  function AboveTabsScreenContextConsumerWrapper(props) {
-    const { aboveTabsScreen } = React.useContext(AboveTabsScreenContext);
-
-    return <Component {...props} aboveTabsScreen={aboveTabsScreen} />;
-  };