@applicaster/zapp-react-native-utils 13.0.0-alpha.1692038547 → 13.0.0-alpha.1802439822

package/appUtils/platform/platformUtils.ts

@@ -77,6 +77,12 @@ export class ClosedCaptioningManager {
 
   private constructor() {
     this.initialize();
+
+    window["vizioDebug"] = {
+      setCCEnabled: (isCCEnabled: boolean) => {
+        this.ccState$.next(isCCEnabled);
+      },
+    };
   }
 
   static getInstance(): ClosedCaptioningManager {

package/equalUtils/index.ts

@@ -49,9 +49,16 @@ export const isEqual =
     }
 
     if (compareRemainingKeysBySameValue) {
-      const undeclaredKeys = R.difference(
-        [...byValue, ...byReference, byComparator.keys],
-        Object.keys(prev)
+      const allKeys = new Set([...Object.keys(prev), ...Object.keys(next)]);
+
+      const declaredKeys = new Set([
+        ...byValue,
+        ...byReference,
+        ...byComparator.keys,
+      ]);
+
+      const undeclaredKeys = Array.from(allKeys).filter(
+        (key) => !declaredKeys.has(key)
       );
 
       const isRestKeysEqualAllBySameValue = undeclaredKeys.every((key) =>

package/focusManager/FocusManager.ts

@@ -227,14 +227,7 @@ class FocusManager {
 
       const nextNextFocus = FocusManager.getNextFocusable(direction, nextFocus);
 
-      if (!nextNextFocus) {
-        const nextNextFocusForParent =
-          FocusManager.instance.getNextFocusableForParent(direction, nextFocus);
-
-        FocusManager.instance.setFocus(nextNextFocusForParent, options);
-      } else {
-        FocusManager.instance.setFocus(nextNextFocus, options);
-      }
+      FocusManager.instance.setFocus(nextNextFocus, options);
     } else {
       FocusManager.instance.setFocusLocal(nextFocus);
 
@@ -257,7 +250,10 @@ class FocusManager {
   }
 
   onDisableFocusChange = (id) => {
-    if (FocusManager.instance.isFocused(id)) {
+    if (
+      FocusManager.instance.isFocused(id) ||
+      FocusManager.instance.hasFocusedChildren(id)
+    ) {
       // Move focus to next one
       const nextFocus = FocusManager.instance.focused?.props
         ?.nextFocusDown as string;
@@ -274,6 +270,12 @@ class FocusManager {
     }
   };
 
+  hasFocusedChildren = (id) => {
+    return this.tree
+      .find(id)
+      ?.children?.some((item) => item?.id === this.focusedId);
+  };
+
   setFocus(
     newFocus: FocusManager.TouchableReactRef | string,
     options?: FocusManager.Android.CallbackOptions
@@ -314,26 +316,9 @@ class FocusManager {
     return FocusManager.getNextFocusable(direction);
   }
 
-  getNextFocusableForParent(
-    direction,
-    focusable?: FocusManager.TouchableReactRef
-  ) {
-    const focusableId = focusable
-      ? getFocusableId(focusable)
-      : FocusManager.instance.focusedId;
-
+  getNextFocusableForParent(direction) {
     const focusDirection = toFocusDirection(direction);
-    const parentNode = this.tree.findParent(focusableId);
-
-    const parentNodeParent = this.tree.findParent(parentNode?.id);
-
-    const hasNextFocusable = this.tree.find(
-      parentNode?.component?.current?.props[focusDirection]
-    );
-
-    if (!hasNextFocusable) {
-      return parentNodeParent?.component?.current?.props[focusDirection];
-    }
+    const parentNode = this.tree.findParent(FocusManager.instance.focusedId);
 
     return parentNode?.component?.current?.props[focusDirection];
   }

package/numberUtils/index.ts

@@ -3,7 +3,7 @@ import { logger } from "@applicaster/zapp-react-native-utils/logger";
 
 const numberUtilsLogger = logger?.addSubsystem("NumberUtils");
 
-export const toNumber = (value: any): number | undefined => {
+export const toNumber = (value: unknown): number | undefined => {
   if (R.isNil(value) || R.isEmpty(value)) {
     return undefined;
   }
@@ -17,10 +17,12 @@ export const toNumber = (value: any): number | undefined => {
   return undefined;
 };
 
-export const toNumberWithDefault = (defaultValue: number, value: any): number =>
-  toNumber(value) ?? defaultValue;
+export const toNumberWithDefault = (
+  defaultValue: number,
+  value: unknown
+): number => toNumber(value) ?? defaultValue;
 
-export const toNumberWithDefaultZero = (value: any): number =>
+export const toNumberWithDefaultZero = (value: unknown): number =>
   toNumberWithDefault(0, value);
 
 export const requireNumber = (obj, key: string) => {
@@ -39,7 +41,7 @@ export const requireNumber = (obj, key: string) => {
 
 export const toFiniteNumberWithDefault = (
   defaultValue: number,
-  value: any
+  value: unknown
 ): number => {
   const possibleNumber = toNumberWithDefault(defaultValue, value);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "13.0.0-alpha.1692038547",
+  "version": "13.0.0-alpha.1802439822",
   "description": "Applicaster Zapp React Native utilities package",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,7 +28,7 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "13.0.0-alpha.1692038547",
+    "@applicaster/applicaster-types": "13.0.0-alpha.1802439822",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "create-react-context": "^0.2.3",

package/reactHooks/autoscrolling/__tests__/useTrackedView.test.tsx

@@ -35,25 +35,23 @@ const Wrapper = ({ children }: { children: React.ReactChild }) => (
 const { useTrackedView } = require("../useTrackedView");
 
 describe("useTrackCurrentAutoScrollingElement", () => {
-  it("should update position for selected component", async () => {
+  it("should update position for selected component - onViewportEnter", () => {
     const { result } = renderHook(() => useTrackedView("123"), {
       wrapper: Wrapper,
     });
 
-    // Fast-forward until all timers have been executed
-    jest.advanceTimersByTime(3000);
-
     expect(result.current.inViewPort).toBe(false);
 
     const mockRect = {
       rect: { left: 1, right: 1, top: 1, bottom: 1 },
     };
 
-    act(() => {
-      result.current.onPositionUpdated(mockRect);
+    act(async () => {
+      await result.current.onPositionUpdated(mockRect);
     });
 
-    jest.advanceTimersByTime(3000);
+    // Fast-forward until all timers have been executed
+    jest.runAllTimers();
 
     expect(result.current.inViewPort).toBe(true);
 

package/reactHooks/autoscrolling/useTrackedView.ts

@@ -2,6 +2,10 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import { useScreenTrackedViewPositionsContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenTrackedViewPositionsContext";
 import { useDimensions } from "@applicaster/zapp-react-native-utils/reactHooks/layout";
 import { findTrackedView } from "./utils/findTrackedView";
+import { isNil } from "ramda";
+import { withTimeout } from "@applicaster/zapp-react-native-utils/idleUtils";
+
+const TIMEOUT_FOR_DELAY_ON_VIEWPORT_ENTER_EVENT = 500; // ms
 
 const getNormalizedRect = (rect, componentId, screenWidth, screenHeight) => {
   if (!rect) {
@@ -37,9 +41,16 @@ export const useTrackedView = (componentId: string) => {
   );
 
   const onPositionUpdated = useCallback(
-    ({ rect }) => {
+    async ({ rect }) => {
       const currentPosition = normalizedRect(componentId, rect);
 
+      // There is an issue on the native side where they are unable to guarantee
+      // that the order of onViewportLeave and onViewportEnter events is always correct.
+      // This workaround/hack delays the onViewportEnter event to ensure it is received last.
+      if (!isNil(currentPosition)) {
+        await withTimeout(TIMEOUT_FOR_DELAY_ON_VIEWPORT_ENTER_EVENT);
+      }
+
       updateComponentsPositions(componentId, currentPosition as any);
 
       setInViewPort(!!currentPosition);