@applicaster/zapp-react-native-utils 15.0.0-rc.97 → 15.0.0-rc.98

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "15.0.0-rc.97",
+  "version": "15.0.0-rc.98",
   "description": "Applicaster Zapp React Native utilities package",
   "main": "index.js",
   "types": "index.d.ts",
@@ -27,7 +27,7 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "15.0.0-rc.97",
+    "@applicaster/applicaster-types": "15.0.0-rc.98",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "dayjs": "^1.11.10",

package/reactHooks/analytics/__tests__/useSendAnalyticsOnPress.test.ts

@@ -0,0 +1,537 @@
+import { renderHook, act } from "@testing-library/react-native";
+import { useSendAnalyticsOnPress } from "../index";
+
+// Mock dependencies
+jest.mock("../../../analyticsUtils", () => ({
+  useAnalytics: jest.fn(),
+}));
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/analyticsUtils/helpers/hooks",
+  () => ({
+    useSendAnalyticsEventWithFunction: jest.fn(),
+  })
+);
+
+import { useAnalytics } from "../../../analyticsUtils";
+import { useSendAnalyticsEventWithFunction } from "@applicaster/zapp-react-native-utils/analyticsUtils/helpers/hooks";
+
+describe("useSendAnalyticsOnPress", () => {
+  const mockUseAnalytics = useAnalytics as jest.MockedFunction<
+    typeof useAnalytics
+  >;
+
+  const mockUseSendAnalyticsEventWithFunction =
+    useSendAnalyticsEventWithFunction as jest.MockedFunction<
+      typeof useSendAnalyticsEventWithFunction
+    >;
+
+  let mockSendOnClickEvent: jest.Mock;
+  let mockCallbackSendAnalyticsEvent: jest.Mock;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    mockSendOnClickEvent = jest.fn();
+    mockCallbackSendAnalyticsEvent = jest.fn();
+
+    mockUseAnalytics.mockReturnValue({
+      sendOnClickEvent: mockSendOnClickEvent,
+    } as any);
+
+    mockUseSendAnalyticsEventWithFunction.mockReturnValue(
+      mockCallbackSendAnalyticsEvent
+    );
+  });
+
+  describe("initialization", () => {
+    it("should return a callback function", () => {
+      const item = { id: "item-1" };
+      const component = { type: "button" };
+      const zappPipesData = { key: "value" };
+
+      const { result } = renderHook(() =>
+        useSendAnalyticsOnPress(item, component, zappPipesData)
+      );
+
+      expect(typeof result.current).toBe("function");
+    });
+
+    it("should call useAnalytics with correct parameters", () => {
+      const item = { id: "item-1", title: "Item 1" };
+      const component = { type: "cell", name: "MasterCell" };
+      const zappPipesData = { feeds: [], screens: [] };
+
+      renderHook(() => useSendAnalyticsOnPress(item, component, zappPipesData));
+
+      expect(mockUseAnalytics).toHaveBeenCalledWith({
+        item,
+        component,
+        zappPipesData,
+      });
+    });
+
+    it("should call useSendAnalyticsEventWithFunction", () => {
+      const item = { id: "item-2" };
+      const component = { type: "list" };
+      const zappPipesData = {};
+
+      renderHook(() => useSendAnalyticsOnPress(item, component, zappPipesData));
+
+      expect(mockUseSendAnalyticsEventWithFunction).toHaveBeenCalled();
+    });
+  });
+
+  describe("callback execution", () => {
+    it("should call analytics event when callback is invoked", () => {
+      const item = { id: "item-1" };
+      const component = { type: "button" };
+      const zappPipesData = { key: "value" };
+
+      const { result } = renderHook(() =>
+        useSendAnalyticsOnPress(item, component, zappPipesData)
+      );
+
+      const pressedItem = { id: "pressed-item" };
+      const index = 5;
+
+      act(() => {
+        result.current(pressedItem, index);
+      });
+
+      expect(mockCallbackSendAnalyticsEvent).toHaveBeenCalledWith({
+        sendAnalyticsFunction: mockSendOnClickEvent,
+        extraProps: {
+          item: pressedItem,
+          index,
+          component,
+          zappPipesData,
+        },
+      });
+    });
+
+    it("should handle different items on each press", () => {
+      const item = { id: "item-1" };
+      const component = { type: "list" };
+      const zappPipesData = {};
+
+      const { result } = renderHook(() =>
+        useSendAnalyticsOnPress(item, component, zappPipesData)
+      );
+
+      const item1 = { id: "item-a", title: "Item A" };
+      const item2 = { id: "item-b", title: "Item B" };
+
+      act(() => {
+        result.current(item1, 0);
+      });
+
+      expect(mockCallbackSendAnalyticsEvent).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          extraProps: expect.objectContaining({
+            item: item1,
+            index: 0,
+          }),
+        })
+      );
+
+      act(() => {
+        result.current(item2, 1);
+      });
+
+      expect(mockCallbackSendAnalyticsEvent).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          extraProps: expect.objectContaining({
+            item: item2,
+            index: 1,
+          }),
+        })
+      );
+    });
+
+    it("should handle different indices", () => {
+      const item = { id: "item-1" };
+      const component = { type: "grid" };
+      const zappPipesData = {};
+
+      const { result } = renderHook(() =>
+        useSendAnalyticsOnPress(item, component, zappPipesData)
+      );
+
+      const pressedItem = { id: "pressed" };
+
+      for (let i = 0; i < 5; i++) {
+        act(() => {
+          result.current(pressedItem, i);
+        });
+
+        expect(mockCallbackSendAnalyticsEvent).toHaveBeenLastCalledWith(
+          expect.objectContaining({
+            extraProps: expect.objectContaining({
+              index: i,
+            }),
+          })
+        );
+      }
+    });
+
+    it("should always use the current component from closure", () => {
+      const item = { id: "item-1" };
+      const component = { type: "carousel", name: "MainCarousel" };
+      const zappPipesData = { feeds: [] };
+
+      const { result } = renderHook(() =>
+        useSendAnalyticsOnPress(item, component, zappPipesData)
+      );
+
+      act(() => {
+        result.current({ id: "test" }, 0);
+      });
+
+      expect(mockCallbackSendAnalyticsEvent).toHaveBeenCalledWith(
+        expect.objectContaining({
+          extraProps: expect.objectContaining({
+            component,
+          }),
+        })
+      );
+    });
+
+    it("should always use the current zappPipesData from closure", () => {
+      const item = { id: "item-1" };
+      const component = { type: "button" };
+      const zappPipesData = { feeds: ["feed1"], screens: ["screen1"] };
+
+      const { result } = renderHook(() =>
+        useSendAnalyticsOnPress(item, component, zappPipesData)
+      );
+
+      act(() => {
+        result.current({ id: "test" }, 0);
+      });
+
+      expect(mockCallbackSendAnalyticsEvent).toHaveBeenCalledWith(
+        expect.objectContaining({
+          extraProps: expect.objectContaining({
+            zappPipesData,
+          }),
+        })
+      );
+    });
+  });
+
+  describe("memoization", () => {
+    it("should memoize callback based on dependencies", () => {
+      const item = { id: "item-1" };
+      const component = { type: "button" };
+      const zappPipesData = { key: "value" };
+
+      const { result, rerender } = renderHook(
+        ({ comp, data }) => useSendAnalyticsOnPress(item, comp, data),
+        {
+          initialProps: {
+            comp: component,
+            data: zappPipesData,
+          },
+        }
+      );
+
+      const firstCallback = result.current;
+
+      // Rerender without changing dependencies
+      rerender({
+        comp: component,
+        data: zappPipesData,
+      });
+
+      const secondCallback = result.current;
+
+      // Callback should be memoized
+      expect(firstCallback).toBe(secondCallback);
+    });
+
+    it("should create new callback when component changes", () => {
+      const item = { id: "item-1" };
+      const component1 = { type: "button" };
+      const component2 = { type: "list" };
+      const zappPipesData = {};
+
+      const { result, rerender } = renderHook(
+        ({ comp }) => useSendAnalyticsOnPress(item, comp, zappPipesData),
+        {
+          initialProps: { comp: component1 },
+        }
+      );
+
+      const firstCallback = result.current;
+
+      rerender({ comp: component2 });
+
+      const secondCallback = result.current;
+
+      // Callback should be different when component changes
+      expect(firstCallback).not.toBe(secondCallback);
+    });
+
+    it("should create new callback when zappPipesData changes", () => {
+      const item = { id: "item-1" };
+      const component = { type: "button" };
+      const zappPipesData1 = { feeds: [] as string[] };
+      const zappPipesData2 = { feeds: ["feed1"] };
+
+      const { result, rerender } = renderHook(
+        ({ data }) => useSendAnalyticsOnPress(item, component, data),
+        {
+          initialProps: { data: zappPipesData1 },
+        }
+      );
+
+      const firstCallback = result.current;
+
+      rerender({ data: zappPipesData2 });
+
+      const secondCallback = result.current;
+
+      expect(firstCallback).not.toBe(secondCallback);
+    });
+
+    it("should create new callback when callbackSendAnalyticsEvent changes", () => {
+      const item = { id: "item-1" };
+      const component = { type: "button" };
+      const zappPipesData = {};
+
+      const callback1 = jest.fn();
+      const callback2 = jest.fn();
+
+      mockUseSendAnalyticsEventWithFunction
+        .mockReturnValueOnce(callback1)
+        .mockReturnValueOnce(callback2);
+
+      const { result, rerender } = renderHook(
+        ({ item, component, zappPipesData }) =>
+          useSendAnalyticsOnPress(item, component, zappPipesData),
+        {
+          initialProps: {
+            item,
+            component,
+            zappPipesData,
+          },
+        }
+      );
+
+      const firstCallback = result.current;
+
+      rerender({ item, component, zappPipesData });
+
+      const secondCallback = result.current;
+
+      // Even though we didn't change inputs, if the underlying callback changes,
+      // our callback should change too
+      expect(firstCallback).not.toBe(secondCallback);
+    });
+  });
+
+  describe("edge cases", () => {
+    it("should handle null item", () => {
+      const component = { type: "button" };
+      const zappPipesData = {};
+
+      const { result } = renderHook(() =>
+        useSendAnalyticsOnPress(null, component, zappPipesData)
+      );
+
+      expect(() => {
+        act(() => {
+          result.current({ id: "test" }, 0);
+        });
+      }).not.toThrow();
+    });
+
+    it("should handle undefined item", () => {
+      const component = { type: "button" };
+      const zappPipesData = {};
+
+      const { result } = renderHook(() =>
+        useSendAnalyticsOnPress(undefined, component, zappPipesData)
+      );
+
+      expect(() => {
+        act(() => {
+          result.current({ id: "test" }, 0);
+        });
+      }).not.toThrow();
+    });
+
+    it("should handle null component", () => {
+      const item = { id: "item-1" };
+      const zappPipesData = {};
+
+      const { result } = renderHook(() =>
+        useSendAnalyticsOnPress(item, null, zappPipesData)
+      );
+
+      act(() => {
+        result.current({ id: "test" }, 0);
+      });
+
+      expect(mockCallbackSendAnalyticsEvent).toHaveBeenCalledWith(
+        expect.objectContaining({
+          extraProps: expect.objectContaining({
+            component: null,
+          }),
+        })
+      );
+    });
+
+    it("should handle null zappPipesData", () => {
+      const item = { id: "item-1" };
+      const component = { type: "button" };
+
+      const { result } = renderHook(() =>
+        useSendAnalyticsOnPress(item, component, null)
+      );
+
+      act(() => {
+        result.current({ id: "test" }, 0);
+      });
+
+      expect(mockCallbackSendAnalyticsEvent).toHaveBeenCalledWith(
+        expect.objectContaining({
+          extraProps: expect.objectContaining({
+            zappPipesData: null,
+          }),
+        })
+      );
+    });
+
+    it("should handle zero index", () => {
+      const item = { id: "item-1" };
+      const component = { type: "list" };
+      const zappPipesData = {};
+
+      const { result } = renderHook(() =>
+        useSendAnalyticsOnPress(item, component, zappPipesData)
+      );
+
+      act(() => {
+        result.current({ id: "test" }, 0);
+      });
+
+      expect(mockCallbackSendAnalyticsEvent).toHaveBeenCalledWith(
+        expect.objectContaining({
+          extraProps: expect.objectContaining({
+            index: 0,
+          }),
+        })
+      );
+    });
+
+    it("should handle negative index", () => {
+      const item = { id: "item-1" };
+      const component = { type: "list" };
+      const zappPipesData = {};
+
+      const { result } = renderHook(() =>
+        useSendAnalyticsOnPress(item, component, zappPipesData)
+      );
+
+      act(() => {
+        result.current({ id: "test" }, -1);
+      });
+
+      expect(mockCallbackSendAnalyticsEvent).toHaveBeenCalledWith(
+        expect.objectContaining({
+          extraProps: expect.objectContaining({
+            index: -1,
+          }),
+        })
+      );
+    });
+
+    it("should handle complex item structures", () => {
+      const item = { id: "item-1" };
+      const component = { type: "cell" };
+      const zappPipesData = {};
+
+      const { result } = renderHook(() =>
+        useSendAnalyticsOnPress(item, component, zappPipesData)
+      );
+
+      const complexItem = {
+        id: "complex",
+        nested: {
+          deep: {
+            structure: true,
+          },
+        },
+        array: [1, 2, 3],
+      };
+
+      act(() => {
+        result.current(complexItem, 5);
+      });
+
+      expect(mockCallbackSendAnalyticsEvent).toHaveBeenCalledWith(
+        expect.objectContaining({
+          extraProps: expect.objectContaining({
+            item: complexItem,
+          }),
+        })
+      );
+    });
+  });
+
+  describe("sendOnClickEvent integration", () => {
+    it("should pass sendOnClickEvent from useAnalytics", () => {
+      const item = { id: "item-1" };
+      const component = { type: "button" };
+      const zappPipesData = {};
+
+      const customSendOnClickEvent = jest.fn();
+
+      mockUseAnalytics.mockReturnValue({
+        sendOnClickEvent: customSendOnClickEvent,
+      } as any);
+
+      const { result } = renderHook(() =>
+        useSendAnalyticsOnPress(item, component, zappPipesData)
+      );
+
+      act(() => {
+        result.current({ id: "test" }, 0);
+      });
+
+      expect(mockCallbackSendAnalyticsEvent).toHaveBeenCalledWith(
+        expect.objectContaining({
+          sendAnalyticsFunction: customSendOnClickEvent,
+        })
+      );
+    });
+
+    it("should handle missing sendOnClickEvent gracefully", () => {
+      const item = { id: "item-1" };
+      const component = { type: "button" };
+      const zappPipesData = {};
+
+      mockUseAnalytics.mockReturnValue({
+        sendOnClickEvent: undefined,
+      } as any);
+
+      const { result } = renderHook(() =>
+        useSendAnalyticsOnPress(item, component, zappPipesData)
+      );
+
+      expect(() => {
+        act(() => {
+          result.current({ id: "test" }, 0);
+        });
+      }).not.toThrow();
+
+      expect(mockCallbackSendAnalyticsEvent).toHaveBeenCalledWith(
+        expect.objectContaining({
+          sendAnalyticsFunction: undefined,
+        })
+      );
+    });
+  });
+});

package/reactHooks/dev/__tests__/useReRenderLog.test.ts

@@ -0,0 +1,188 @@
+import { renderHook } from "@testing-library/react-native";
+import { useReRenderLog } from "../index";
+
+describe("useReRenderLog", () => {
+  let consoleLogSpy: jest.SpyInstance;
+
+  beforeEach(() => {
+    consoleLogSpy = jest.spyOn(console, "log").mockImplementation();
+  });
+
+  afterEach(() => {
+    consoleLogSpy.mockRestore();
+  });
+
+  it("should log on initial render", () => {
+    const message = "Test Component";
+
+    renderHook(() => useReRenderLog(message));
+
+    expect(consoleLogSpy).toHaveBeenCalledWith(
+      expect.stringContaining("<<RE-RENDERED>>")
+    );
+
+    expect(consoleLogSpy).toHaveBeenCalledWith(
+      expect.stringContaining("<<COUNT: 1>>")
+    );
+
+    expect(consoleLogSpy).toHaveBeenCalledWith(
+      expect.stringContaining(message)
+    );
+  });
+
+  it("should increment count on each re-render", () => {
+    const message = "Counter Test";
+
+    const { rerender } = renderHook(() => useReRenderLog(message));
+
+    expect(consoleLogSpy).toHaveBeenCalledWith(
+      expect.stringContaining("<<COUNT: 1>>")
+    );
+
+    rerender();
+
+    expect(consoleLogSpy).toHaveBeenCalledWith(
+      expect.stringContaining("<<COUNT: 2>>")
+    );
+
+    rerender();
+
+    expect(consoleLogSpy).toHaveBeenCalledWith(
+      expect.stringContaining("<<COUNT: 3>>")
+    );
+  });
+
+  it("should log correct message format", () => {
+    const message = "MyComponent";
+
+    renderHook(() => useReRenderLog(message));
+
+    expect(consoleLogSpy).toHaveBeenCalledWith(
+      "<<RE-RENDERED>><<COUNT: 1>>: MyComponent"
+    );
+  });
+
+  it("should track renders independently for different hook instances", () => {
+    const message1 = "Component1";
+    const message2 = "Component2";
+
+    const { rerender: rerender1 } = renderHook(() => useReRenderLog(message1));
+
+    const { rerender: rerender2 } = renderHook(() => useReRenderLog(message2));
+
+    consoleLogSpy.mockClear();
+
+    rerender1();
+
+    expect(consoleLogSpy).toHaveBeenLastCalledWith(
+      expect.stringContaining("Component1")
+    );
+
+    rerender2();
+
+    expect(consoleLogSpy).toHaveBeenLastCalledWith(
+      expect.stringContaining("Component2")
+    );
+  });
+
+  it("should handle empty string message", () => {
+    renderHook(() => useReRenderLog(""));
+
+    expect(consoleLogSpy).toHaveBeenCalledWith("<<RE-RENDERED>><<COUNT: 1>>: ");
+  });
+
+  it("should handle message with special characters", () => {
+    const message = "Test!@#$%^&*()";
+
+    renderHook(() => useReRenderLog(message));
+
+    expect(consoleLogSpy).toHaveBeenCalledWith(
+      expect.stringContaining(message)
+    );
+  });
+
+  it("should handle long messages", () => {
+    const message = "A".repeat(1000);
+
+    renderHook(() => useReRenderLog(message));
+
+    expect(consoleLogSpy).toHaveBeenCalledWith(
+      expect.stringContaining(message)
+    );
+  });
+
+  it("should persist count across multiple re-renders", () => {
+    const message = "Persistence Test";
+
+    const { rerender } = renderHook(() => useReRenderLog(message));
+
+    for (let i = 2; i <= 10; i++) {
+      rerender();
+
+      expect(consoleLogSpy).toHaveBeenLastCalledWith(
+        expect.stringContaining(`<<COUNT: ${i}>>`)
+      );
+    }
+  });
+
+  it("should log on every render without dependencies", () => {
+    const message = "Every Render";
+
+    const { rerender } = renderHook(() => useReRenderLog(message));
+
+    const initialCallCount = consoleLogSpy.mock.calls.length;
+
+    rerender();
+    rerender();
+    rerender();
+
+    // Should have 4 total calls (initial + 3 rerenders)
+    expect(consoleLogSpy).toHaveBeenCalledTimes(initialCallCount + 3);
+  });
+
+  it("should handle numeric messages", () => {
+    renderHook(() => useReRenderLog(123 as any));
+
+    expect(consoleLogSpy).toHaveBeenCalledWith(expect.stringContaining("123"));
+  });
+
+  it("should handle object messages", () => {
+    const obj = { key: "value" };
+
+    renderHook(() => useReRenderLog(obj as any));
+
+    expect(consoleLogSpy).toHaveBeenCalled();
+  });
+
+  it("should maintain separate refs for each instance", () => {
+    const { rerender: rerender1 } = renderHook(() =>
+      useReRenderLog("Instance1")
+    );
+
+    const { rerender: rerender2 } = renderHook(() =>
+      useReRenderLog("Instance2")
+    );
+
+    consoleLogSpy.mockClear();
+
+    // Render instance 1 twice more
+    rerender1();
+    rerender1();
+
+    // Render instance 2 once more
+    rerender2();
+
+    const calls = consoleLogSpy.mock.calls;
+
+    // Instance 1 should be at count 2 and 3
+    expect(calls[0][0]).toContain("Instance1");
+    expect(calls[0][0]).toContain("<<COUNT: 2>>");
+
+    expect(calls[1][0]).toContain("Instance1");
+    expect(calls[1][0]).toContain("<<COUNT: 3>>");
+
+    // Instance 2 should be at count 2
+    expect(calls[2][0]).toContain("Instance2");
+    expect(calls[2][0]).toContain("<<COUNT: 2>>");
+  });
+});

package/reactHooks/device/useIsTablet.tsx

@@ -1,28 +1,23 @@
 /* eslint react-native/split-platform-components: off */
 
 import { Platform, PlatformIOSStatic, NativeModules } from "react-native";
-import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
-import { F as alwaysFalse } from "ramda";
 import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
 
-const useIsTabletIos = (): boolean => {
-  const { isPad } = Platform as PlatformIOSStatic;
+export const useIsTablet = (): boolean => {
+  const platform = Platform.OS;
 
-  return isPad;
-};
+  if (platform === "ios") {
+    const { isPad } = Platform as PlatformIOSStatic;
 
-const useIsTabletAndroid = (): boolean => {
-  const { initialProps } = NativeModules.QuickBrickCommunicationModule;
+    return Boolean(isPad);
+  }
 
-  return toBooleanWithDefaultFalse(initialProps?.is_tablet);
-};
+  if (platform === "android") {
+    const initialProps =
+      NativeModules.QuickBrickCommunicationModule?.initialProps;
 
-export const useIsTablet = platformSelect({
-  ios: useIsTabletIos,
-  android: useIsTabletAndroid,
-  lg_tv: alwaysFalse,
-  samsung_tv: alwaysFalse,
-  android_tv: alwaysFalse,
-  tvos: alwaysFalse,
-  default: alwaysFalse,
-});
+    return toBooleanWithDefaultFalse(initialProps?.is_tablet);
+  }
+
+  return false;
+};

package/reactHooks/ui/__tests__/useFadeOutWhenBlurred.test.ts

@@ -0,0 +1,580 @@
+import { renderHook, act } from "@testing-library/react-native";
+import { useFadeOutWhenBlurred } from "../index";
+import { Animated } from "react-native";
+
+// Mock React Native Animated
+jest.mock("react-native", () => ({
+  Animated: {
+    Value: jest.fn((value) => ({
+      setValue: jest.fn(),
+      _value: value,
+    })),
+    timing: jest.fn((_value, _config) => ({
+      start: jest.fn(),
+    })),
+  },
+  Easing: {
+    in: jest.fn((fn) => fn),
+    bezier: jest.fn(() => jest.fn()),
+  },
+}));
+
+describe("useFadeOutWhenBlurred", () => {
+  let mockAnimatedValue: any;
+  let mockTiming: jest.Mock;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    mockAnimatedValue = {
+      setValue: jest.fn(),
+      _value: 1,
+    };
+
+    (Animated as any).Value = jest.fn().mockReturnValue(mockAnimatedValue);
+
+    mockTiming = jest.fn(() => ({
+      start: jest.fn(),
+    }));
+
+    (Animated as any).timing = mockTiming;
+  });
+
+  describe("initialization", () => {
+    it("should return opacity, willReceiveFocus, and hasLostFocus", () => {
+      const component = {
+        rules: { fade_out_when_blurred: true },
+      } as any;
+
+      const { result } = renderHook(() => useFadeOutWhenBlurred(component));
+
+      expect(result.current).toHaveProperty("opacity");
+      expect(result.current).toHaveProperty("willReceiveFocus");
+      expect(result.current).toHaveProperty("hasLostFocus");
+    });
+
+    it("should initialize with opacity 1", () => {
+      const component = {
+        rules: { fade_out_when_blurred: true },
+      } as any;
+
+      const { result } = renderHook(() => useFadeOutWhenBlurred(component));
+
+      expect(Animated.Value).toHaveBeenCalledWith(1);
+      expect(result.current.opacity).toBe(mockAnimatedValue);
+    });
+
+    it("should return callback functions", () => {
+      const component = {
+        rules: { fade_out_when_blurred: true },
+      } as any;
+
+      const { result } = renderHook(() => useFadeOutWhenBlurred(component));
+
+      expect(typeof result.current.willReceiveFocus).toBe("function");
+      expect(typeof result.current.hasLostFocus).toBe("function");
+    });
+
+    it("should handle component without fade_out_when_blurred rule", () => {
+      const component = {
+        rules: {},
+      } as any;
+
+      const { result } = renderHook(() => useFadeOutWhenBlurred(component));
+
+      expect(result.current.opacity).toBeDefined();
+      expect(result.current.willReceiveFocus).toBeDefined();
+      expect(result.current.hasLostFocus).toBeDefined();
+    });
+  });
+
+  describe("willReceiveFocus callback", () => {
+    it("should set visible to true when called while not visible", () => {
+      const component = {
+        rules: { fade_out_when_blurred: true },
+      } as any;
+
+      const { result } = renderHook(() => useFadeOutWhenBlurred(component));
+
+      // First lose focus
+      act(() => {
+        result.current.hasLostFocus(null, { value: "down" });
+      });
+
+      // Then receive focus
+      act(() => {
+        result.current.willReceiveFocus();
+      });
+
+      // Animation should be called to fade in
+      expect(mockTiming).toHaveBeenCalledWith(
+        mockAnimatedValue,
+        expect.objectContaining({
+          toValue: 1,
+        })
+      );
+    });
+
+    it("should not change visible state when already visible", () => {
+      const component = {
+        rules: { fade_out_when_blurred: true },
+      } as any;
+
+      const { result } = renderHook(() => useFadeOutWhenBlurred(component));
+
+      const initialCallCount = mockTiming.mock.calls.length;
+
+      act(() => {
+        result.current.willReceiveFocus();
+      });
+
+      // Should not trigger animation if already visible
+      expect(mockTiming.mock.calls.length).toBe(initialCallCount);
+    });
+
+    it("should be memoized", () => {
+      const component = {
+        rules: { fade_out_when_blurred: true },
+      } as any;
+
+      const { result, rerender } = renderHook(
+        ({ component }) => useFadeOutWhenBlurred(component),
+        {
+          initialProps: { component },
+        }
+      );
+
+      const firstCallback = result.current.willReceiveFocus;
+
+      rerender({ component });
+
+      const secondCallback = result.current.willReceiveFocus;
+
+      expect(firstCallback).toBe(secondCallback);
+    });
+  });
+
+  describe("hasLostFocus callback", () => {
+    it("should set visible to false when direction is down", () => {
+      const component = {
+        rules: { fade_out_when_blurred: true },
+      } as any;
+
+      const { result } = renderHook(() => useFadeOutWhenBlurred(component));
+
+      act(() => {
+        result.current.hasLostFocus(null, { value: "down" });
+      });
+
+      // Animation should be called to fade out
+      expect(mockTiming).toHaveBeenCalledWith(
+        mockAnimatedValue,
+        expect.objectContaining({
+          toValue: 0,
+        })
+      );
+    });
+
+    it("should not change visible state when direction is not down", () => {
+      const component = {
+        rules: { fade_out_when_blurred: true },
+      } as any;
+
+      const { result } = renderHook(() => useFadeOutWhenBlurred(component));
+
+      const initialCallCount = mockTiming.mock.calls.length;
+
+      act(() => {
+        result.current.hasLostFocus(null, { value: "up" });
+      });
+
+      expect(mockTiming.mock.calls.length).toBe(initialCallCount);
+
+      act(() => {
+        result.current.hasLostFocus(null, { value: "left" });
+      });
+
+      expect(mockTiming.mock.calls.length).toBe(initialCallCount);
+
+      act(() => {
+        result.current.hasLostFocus(null, { value: "right" });
+      });
+
+      expect(mockTiming.mock.calls.length).toBe(initialCallCount);
+    });
+
+    it("should handle missing direction gracefully", () => {
+      const component = {
+        rules: { fade_out_when_blurred: true },
+      } as any;
+
+      const { result } = renderHook(() => useFadeOutWhenBlurred(component));
+
+      expect(() => {
+        act(() => {
+          result.current.hasLostFocus(null, "left" as any);
+        });
+      }).not.toThrow();
+    });
+
+    it("should handle direction without value property", () => {
+      const component = {
+        rules: { fade_out_when_blurred: true },
+      } as any;
+
+      const { result } = renderHook(() => useFadeOutWhenBlurred(component));
+
+      expect(() => {
+        act(() => {
+          result.current.hasLostFocus(null, {} as any);
+        });
+      }).not.toThrow();
+    });
+
+    it("should be memoized", () => {
+      const component = {
+        rules: { fade_out_when_blurred: true },
+      } as any;
+
+      const { result, rerender } = renderHook(
+        ({ component }) => useFadeOutWhenBlurred(component),
+        {
+          initialProps: { component },
+        }
+      );
+
+      const firstCallback = result.current.hasLostFocus;
+
+      rerender({ component });
+
+      const secondCallback = result.current.hasLostFocus;
+
+      expect(firstCallback).toBe(secondCallback);
+    });
+  });
+
+  describe("animation behavior", () => {
+    it("should animate to opacity 0 when losing focus with down direction", () => {
+      const component = {
+        rules: { fade_out_when_blurred: true },
+      } as any;
+
+      const { result } = renderHook(() => useFadeOutWhenBlurred(component));
+
+      act(() => {
+        result.current.hasLostFocus(null, { value: "down" });
+      });
+
+      expect(mockTiming).toHaveBeenCalledWith(
+        mockAnimatedValue,
+        expect.objectContaining({
+          toValue: 0,
+          duration: 300,
+          useNativeDriver: true,
+        })
+      );
+    });
+
+    it("should animate to opacity 1 when receiving focus", () => {
+      const component = {
+        rules: { fade_out_when_blurred: true },
+      } as any;
+
+      const { result } = renderHook(() => useFadeOutWhenBlurred(component));
+
+      // First lose focus
+      act(() => {
+        result.current.hasLostFocus(null, { value: "down" });
+      });
+
+      // Then receive focus
+      act(() => {
+        result.current.willReceiveFocus();
+      });
+
+      expect(mockTiming).toHaveBeenLastCalledWith(
+        mockAnimatedValue,
+        expect.objectContaining({
+          toValue: 1,
+          duration: 300,
+          useNativeDriver: true,
+        })
+      );
+    });
+
+    it("should use custom animation options when provided", () => {
+      const component = {
+        rules: { fade_out_when_blurred: true },
+      } as any;
+
+      const animatedOptions = {
+        duration: 500,
+      };
+
+      const { result } = renderHook(() =>
+        useFadeOutWhenBlurred(component, animatedOptions)
+      );
+
+      act(() => {
+        result.current.hasLostFocus(null, { value: "down" });
+      });
+
+      expect(mockTiming).toHaveBeenCalledWith(
+        mockAnimatedValue,
+        expect.objectContaining({
+          duration: 500,
+        })
+      );
+    });
+
+    it("should not animate when fade_out_when_blurred is false", () => {
+      const component = {
+        rules: { fade_out_when_blurred: false },
+      } as any;
+
+      const { result } = renderHook(() => useFadeOutWhenBlurred(component));
+
+      const initialCallCount = mockTiming.mock.calls.length;
+
+      act(() => {
+        result.current.hasLostFocus(null, { value: "down" });
+      });
+
+      expect(mockTiming.mock.calls.length).toBe(initialCallCount);
+    });
+
+    it("should not animate when fade_out_when_blurred is undefined", () => {
+      const component = {
+        rules: {},
+      } as any;
+
+      const { result } = renderHook(() => useFadeOutWhenBlurred(component));
+
+      const initialCallCount = mockTiming.mock.calls.length;
+
+      act(() => {
+        result.current.hasLostFocus(null, { value: "down" });
+      });
+
+      expect(mockTiming.mock.calls.length).toBe(initialCallCount);
+    });
+
+    it("should start animation", () => {
+      const component = {
+        rules: { fade_out_when_blurred: true },
+      } as any;
+
+      const mockStart = jest.fn();
+
+      mockTiming.mockReturnValue({
+        start: mockStart,
+      });
+
+      const { result } = renderHook(() => useFadeOutWhenBlurred(component));
+
+      act(() => {
+        result.current.hasLostFocus(null, { value: "down" });
+      });
+
+      expect(mockStart).toHaveBeenCalled();
+    });
+  });
+
+  describe("focus state transitions", () => {
+    it("should handle multiple focus/blur cycles", () => {
+      const component = {
+        rules: { fade_out_when_blurred: true },
+      } as any;
+
+      const { result } = renderHook(() => useFadeOutWhenBlurred(component));
+
+      // Blur
+      act(() => {
+        result.current.hasLostFocus(null, { value: "down" });
+      });
+
+      expect(mockTiming).toHaveBeenLastCalledWith(
+        mockAnimatedValue,
+        expect.objectContaining({ toValue: 0 })
+      );
+
+      // Focus
+      act(() => {
+        result.current.willReceiveFocus();
+      });
+
+      expect(mockTiming).toHaveBeenLastCalledWith(
+        mockAnimatedValue,
+        expect.objectContaining({ toValue: 1 })
+      );
+
+      // Blur again
+      act(() => {
+        result.current.hasLostFocus(null, { value: "down" });
+      });
+
+      expect(mockTiming).toHaveBeenLastCalledWith(
+        mockAnimatedValue,
+        expect.objectContaining({ toValue: 0 })
+      );
+    });
+
+    it("should handle rapid focus changes", () => {
+      const component = {
+        rules: { fade_out_when_blurred: true },
+      } as any;
+
+      const { result } = renderHook(() => useFadeOutWhenBlurred(component));
+
+      act(() => {
+        result.current.hasLostFocus(null, { value: "down" });
+        result.current.willReceiveFocus();
+        result.current.hasLostFocus(null, { value: "down" });
+        result.current.willReceiveFocus();
+      });
+
+      // Should handle all transitions
+      expect(mockTiming.mock.calls.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe("edge cases", () => {
+    it("should handle null animatedOptions", () => {
+      const component = {
+        rules: { fade_out_when_blurred: true },
+      } as any;
+
+      const { result } = renderHook(() =>
+        useFadeOutWhenBlurred(component, null as any)
+      );
+
+      act(() => {
+        result.current.hasLostFocus(null, { value: "down" });
+      });
+
+      expect(mockTiming).toHaveBeenCalled();
+    });
+
+    it("should handle empty animatedOptions", () => {
+      const component = {
+        rules: { fade_out_when_blurred: true },
+      } as any;
+
+      const { result } = renderHook(() => useFadeOutWhenBlurred(component, {}));
+
+      act(() => {
+        result.current.hasLostFocus(null, { value: "down" });
+      });
+
+      expect(mockTiming).toHaveBeenCalled();
+    });
+  });
+
+  describe("return value memoization", () => {
+    it("should memoize return object", () => {
+      const component = {
+        rules: { fade_out_when_blurred: true },
+      } as any;
+
+      const { result, rerender } = renderHook(
+        ({ component }) => useFadeOutWhenBlurred(component),
+        {
+          initialProps: { component },
+        }
+      );
+
+      const firstResult = result.current;
+
+      rerender({ component });
+
+      const secondResult = result.current;
+
+      // The return object should be memoized
+      expect(firstResult).toBe(secondResult);
+    });
+
+    it("should keep same opacity reference across rerenders", () => {
+      const component = {
+        rules: { fade_out_when_blurred: true },
+      } as any;
+
+      const { result, rerender } = renderHook(
+        ({ component }) => useFadeOutWhenBlurred(component),
+        {
+          initialProps: { component },
+        }
+      );
+
+      const firstOpacity = result.current.opacity;
+
+      rerender({ component });
+
+      const secondOpacity = result.current.opacity;
+
+      expect(firstOpacity).toBe(secondOpacity);
+    });
+  });
+
+  describe("animation configuration", () => {
+    it("should use bezier easing", () => {
+      const component = {
+        rules: { fade_out_when_blurred: true },
+      } as any;
+
+      const { result } = renderHook(() => useFadeOutWhenBlurred(component));
+
+      act(() => {
+        result.current.hasLostFocus(null, { value: "down" });
+      });
+
+      const animationConfig = mockTiming.mock.calls[0][1];
+      expect(animationConfig.easing).toBeDefined();
+    });
+
+    it("should use native driver", () => {
+      const component = {
+        rules: { fade_out_when_blurred: true },
+      } as any;
+
+      const { result } = renderHook(() => useFadeOutWhenBlurred(component));
+
+      act(() => {
+        result.current.hasLostFocus(null, { value: "down" });
+      });
+
+      expect(mockTiming).toHaveBeenCalledWith(
+        mockAnimatedValue,
+        expect.objectContaining({
+          useNativeDriver: true,
+        })
+      );
+    });
+
+    it("should override animation config with custom options", () => {
+      const component = {
+        rules: { fade_out_when_blurred: true },
+      } as any;
+
+      const customOptions = {
+        duration: 1000,
+        useNativeDriver: false,
+      };
+
+      const { result } = renderHook(() =>
+        useFadeOutWhenBlurred(component, customOptions)
+      );
+
+      act(() => {
+        result.current.hasLostFocus(null, { value: "down" });
+      });
+
+      expect(mockTiming).toHaveBeenCalledWith(
+        mockAnimatedValue,
+        expect.objectContaining({
+          duration: 1000,
+          useNativeDriver: false,
+        })
+      );
+    });
+  });
+});

package/reactHooks/componentsMap/index.ts

@@ -1,55 +0,0 @@
-import * as React from "react";
-
-const layoutReducer = (state, { payload }) => {
-  return state.map((item, index, _state) => ({
-    height: index === payload.index ? payload.height : item.height,
-    y:
-      index > 0
-        ? _state.slice(0, index).reduce((acc, value) => acc + value.height, 0)
-        : 0,
-  }));
-};
-
-export const useComponentsLayout = (count, onFinishLoadingVisible) => {
-  const [itemsLayout, dispatchItemLayout] = React.useReducer(
-    layoutReducer,
-    Array.from({ length: count }, () => ({ height: 0, y: 0 }))
-  );
-
-  const notified = React.useRef(false);
-  const [listHeight, setListHeight] = React.useState<number>(0);
-
-  const onItemLayout = React.useCallback(
-    (index) => (event) => {
-      const { height } = event.nativeEvent.layout;
-      dispatchItemLayout({ payload: { index, height } });
-    },
-    []
-  );
-
-  const onListLayout = React.useCallback((event) => {
-    const { height } = event.nativeEvent.layout;
-    setListHeight(height);
-  }, []);
-
-  React.useEffect(() => {
-    if (!notified.current) {
-      const finishLoadingVisible = !!itemsLayout.find(
-        (item) => item.y > listHeight
-      );
-
-      if (finishLoadingVisible) {
-        notified.current = true;
-        onFinishLoadingVisible?.();
-      }
-    }
-  }, [itemsLayout, listHeight]);
-
-  return React.useMemo(
-    () => ({
-      onItemLayout,
-      onListLayout,
-    }),
-    []
-  );
-};