@applicaster/zapp-react-native-ui-components 13.0.0-alpha.7210171818 → 13.0.0-alpha.7222542422

package/Components/AppContainer/__tests__/__snapshots__/AppContainer.test.js.snap

@@ -3,7 +3,7 @@
 exports[`<AppContainer /> renders correctly 1`] = `
 <View
   style={
-    Object {
+    {
       "backgroundColor": "rgba(255, 255, 255, 1)",
       "flex": 1,
     }

package/Components/AudioPlayer/__tests__/__snapshots__/Runtime.test.js.snap

@@ -3,7 +3,7 @@
 exports[`<Runtime /> LTR renders correctly 1`] = `
 <View
   style={
-    Object {
+    {
       "height": 40,
       "justifyContent": "flex-start",
       "width": 600,
@@ -12,7 +12,7 @@ exports[`<Runtime /> LTR renders correctly 1`] = `
 >
   <Text
     style={
-      Object {
+      {
         "alignItems": "flex-end",
         "color": "white",
         "flexDirection": "row",
@@ -32,7 +32,7 @@ exports[`<Runtime /> LTR renders correctly 1`] = `
 exports[`<Runtime /> RTL renders correctly 1`] = `
 <View
   style={
-    Object {
+    {
       "height": 40,
       "justifyContent": "flex-end",
       "width": 600,
@@ -41,7 +41,7 @@ exports[`<Runtime /> RTL renders correctly 1`] = `
 >
   <Text
     style={
-      Object {
+      {
         "alignItems": "flex-start",
         "color": "white",
         "flexDirection": "row-reverse",

package/Components/AudioPlayer/__tests__/__snapshots__/artWork.test.js.snap

@@ -3,7 +3,7 @@
 exports[`<Artwork /> renders correctly 1`] = `
 <View
   style={
-    Object {
+    {
       "marginHorizontal": 24,
     }
   }
@@ -12,12 +12,12 @@ exports[`<Artwork /> renders correctly 1`] = `
     fadeDuration={0}
     resizeMode="cover"
     source={
-      Object {
+      {
         "uri": "https://example.com",
       }
     }
     style={
-      Object {
+      {
         "height": 400,
         "width": 400,
       }

package/Components/AudioPlayer/__tests__/__snapshots__/audioPlayer.test.js.snap

@@ -3,7 +3,7 @@
 exports[`<AudioPlayer /> renders correctly 1`] = `
 <AudioPlayerLayout
   config={
-    Object {
+    {
       "artworkAspectRatio": "1:1",
       "audioPlayerBackgroundImageQuery": "",
       "backgroundColor": "black",
@@ -21,11 +21,11 @@ exports[`<AudioPlayer /> renders correctly 1`] = `
       "titleFontSize": undefined,
     }
   }
-  style={Object {}}
+  style={{}}
 >
   <Channel
     config={
-      Object {
+      {
         "artworkAspectRatio": "1:1",
         "audioPlayerBackgroundImageQuery": "",
         "backgroundColor": "black",
@@ -47,7 +47,7 @@ exports[`<AudioPlayer /> renders correctly 1`] = `
   />
   <Title
     config={
-      Object {
+      {
         "artworkAspectRatio": "1:1",
         "audioPlayerBackgroundImageQuery": "",
         "backgroundColor": "black",
@@ -69,7 +69,7 @@ exports[`<AudioPlayer /> renders correctly 1`] = `
   />
   <Summary
     config={
-      Object {
+      {
         "artworkAspectRatio": "1:1",
         "audioPlayerBackgroundImageQuery": "",
         "backgroundColor": "black",
@@ -98,7 +98,7 @@ exports[`<AudioPlayer /> renders correctly 1`] = `
     audio_player_summary_color="white"
     audio_player_title_color="white"
     config={
-      Object {
+      {
         "artworkAspectRatio": "1:1",
         "audioPlayerBackgroundImageQuery": "",
         "backgroundColor": "black",

package/Components/AudioPlayer/__tests__/__snapshots__/audioPlayerLayout.test.js.snap

@@ -4,7 +4,7 @@ exports[`<AudioPlayerLayout  /> renders correctly 1`] = `
 <View
   pointerEvents="none"
   style={
-    Object {
+    {
       "backgroundColor": "transparent",
       "overflow": "hidden",
     }
@@ -12,12 +12,12 @@ exports[`<AudioPlayerLayout  /> renders correctly 1`] = `
 >
   <ForwardRef(AnimatedComponentWrapper)
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "overflow": "hidden",
         },
-        Object {
+        {
           "opacity": 0,
         },
       ]
@@ -26,19 +26,19 @@ exports[`<AudioPlayerLayout  /> renders correctly 1`] = `
     <ImageBackground
       resizeMode="cover"
       source={
-        Object {
+        {
           "uri": "https://example.com",
         }
       }
       style={
-        Object {
+        {
           "flex": 1,
         }
       }
     >
       <View
         style={
-          Object {
+          {
             "backgroundColor": "transparent",
             "overflow": "hidden",
           }

package/Components/AudioPlayer/__tests__/__snapshots__/channel.test.js.snap

@@ -3,7 +3,7 @@
 exports[`<Channel /> renders correctly 1`] = `
 <View
   style={
-    Object {
+    {
       "height": 72,
       "marginBottom": 30,
       "width": 128,
@@ -13,12 +13,12 @@ exports[`<Channel /> renders correctly 1`] = `
   <Image
     fadeDuration={0}
     source={
-      Object {
+      {
         "uri": "https://example.com",
       }
     }
     style={
-      Object {
+      {
         "height": 72,
         "width": 128,
       }

package/Components/AudioPlayer/__tests__/__snapshots__/summary.test.js.snap

@@ -3,7 +3,7 @@
 exports[`<Summary /> renders correctly 1`] = `
 <View
   style={
-    Object {
+    {
       "height": 80,
       "marginBottom": 30,
       "width": 600,
@@ -13,7 +13,7 @@ exports[`<Summary /> renders correctly 1`] = `
   <Text
     numberOfLines={2}
     style={
-      Object {
+      {
         "color": "white",
         "fontFamily": null,
         "fontSize": 20,

package/Components/AudioPlayer/__tests__/__snapshots__/title.test.js.snap

@@ -3,7 +3,7 @@
 exports[`<Title /> renders correctly 1`] = `
 <View
   style={
-    Object {
+    {
       "height": 100,
       "marginBottom": 12,
       "width": 600,
@@ -13,7 +13,7 @@ exports[`<Title /> renders correctly 1`] = `
   <Text
     numberOfLines={2}
     style={
-      Object {
+      {
         "color": "white",
         "fontFamily": null,
         "fontSize": 38,

package/Components/BaseFocusable/index.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import * as R from "ramda";
 
 import {
   BaseFocusable as BaseFocusableInterface,
@@ -7,7 +8,6 @@ import {
 
 import { createReactRef } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focusManager";
-import * as FOCUS_EVENTS from "@applicaster/zapp-react-native-utils/appUtils/focusManager/events";
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 
 type ScrollDirection = FocusManager.IOS.Direction | FocusManager.Web.Direction;
@@ -131,12 +131,6 @@ export class BaseFocusable<
   willLoseFocus: FocusManager.FocusEventCB = (focusable, scrollDirection) => {
     const { willLoseFocus = noop } = this.props;
     willLoseFocus(focusable, scrollDirection);
-
-    focusManager.invokeHandler?.(
-      FOCUS_EVENTS.WILL_LOSE_FOCUS,
-      this,
-      scrollDirection
-    );
   };
 
   willReceiveFocus: FocusManager.FocusEventCB = (
@@ -145,12 +139,6 @@ export class BaseFocusable<
   ) => {
     const { willReceiveFocus = noop } = this.props;
     willReceiveFocus(focusable, scrollDirection);
-
-    focusManager.invokeHandler?.(
-      FOCUS_EVENTS.WILL_RECEIVE_FOCUS,
-      this,
-      scrollDirection
-    );
   };
 
   /**
@@ -163,8 +151,6 @@ export class BaseFocusable<
     const { onFocus = noop } = this.props;
     this.setFocusedState(true);
     onFocus(focusable, scrollDirection);
-
-    focusManager.invokeHandler?.(FOCUS_EVENTS.FOCUS, this, scrollDirection);
   };
 
   /**
@@ -179,12 +165,6 @@ export class BaseFocusable<
   ) => {
     const { hasReceivedFocus = noop } = this.props;
     hasReceivedFocus(focusable, scrollDirection);
-
-    focusManager.invokeHandler?.(
-      FOCUS_EVENTS.HAS_RECEIVED_FOCUS,
-      this,
-      scrollDirection
-    );
   };
 
   /**
@@ -196,12 +176,6 @@ export class BaseFocusable<
   hasLostFocus: FocusManager.FocusEventCB = (focusable, scrollDirection) => {
     const { hasLostFocus = noop } = this.props;
     hasLostFocus(focusable, scrollDirection);
-
-    focusManager.invokeHandler?.(
-      FOCUS_EVENTS.HAS_LOST_FOCUS,
-      this,
-      scrollDirection
-    );
   };
 
   /**
@@ -228,7 +202,6 @@ export class BaseFocusable<
     const { onBlur = noop } = this.props;
     this.setFocusedState(false);
     onBlur(focusable, scrollDirection);
-    focusManager.invokeHandler?.(FOCUS_EVENTS.BLUR, this, scrollDirection);
   };
 
   onPress = (keyEvent?: Nullable<React.MouseEvent>) => {
@@ -269,4 +242,68 @@ export class BaseFocusable<
       this.setState({ focused });
     }
   };
+
+  /**
+   * will invoke the underlying component's focus method
+   * @param {Object} scrollDirection
+   * @returns {Promise}
+   */
+  focus(_, scrollDirection) {
+    return this.onFocus(this, scrollDirection); // invokeComponentMethod(this, "onFocus", scrollDirection);
+  }
+
+  /**
+   * will invoke the underlying component's blur method
+   * @param {Object} scrollDirection
+   * @returns {Promise}
+   */
+  blur(
+    _,
+    scrollDirection?: FocusManager.Web.Direction | FocusManager.IOS.Direction
+  ) {
+    return this.onBlur(this, scrollDirection);
+  }
+
+  /**
+   * Sets the focus on this item. Will trigger sequentially a sequence of
+   * functions (willReceiveFocus, focus, hasReceivedFocus). If these functions (defined in the Focusable
+   * Item underlying component) return promises, execution will wait before it proceeds to the next. This
+   * is useful for triggering sequential operations that specifically require to fully run before or after
+   * focus is actually set on that item.
+   * @param {string} scrollDirection string representation of the direction of the navigation which landed
+   * to this item being focused
+   */
+  _executeFocusSequence(methodNames, scrollDirection) {
+    return R.reduce(
+      (sequence, methodName) => {
+        const method = this[methodName]; // Access the method by name
+
+        if (typeof method !== "function") {
+          throw new Error(
+            `Method '${methodName}' not found or not a function.`
+          );
+        }
+
+        return sequence
+          .then(() => method.call(this, scrollDirection))
+          .catch((e) => {
+            throw e; // Re-throw for consistent error handling
+          });
+      },
+      Promise.resolve(),
+      methodNames
+    );
+  }
+
+  setFocus(scrollDirection) {
+    const focusMethods = ["willReceiveFocus", "focus", "hasReceivedFocus"];
+
+    return this._executeFocusSequence(focusMethods, scrollDirection);
+  }
+
+  setBlur(scrollDirection) {
+    const blurMethods = ["willLoseFocus", "blur", "hasLostFocus"];
+
+    return this._executeFocusSequence(blurMethods, scrollDirection);
+  }
 }

package/Components/Cell/Cell.tsx

@@ -14,10 +14,7 @@ import { BaseFocusable } from "../BaseFocusable";
 import { AccessibilityManager } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager";
 
 type Props = {
-  item: {
-    id: string;
-    title: string;
-  };
+  item: ZappEntry;
   index: number;
   shouldScrollHorizontally: (arg1: [any]) => boolean | null | undefined;
   shouldScrollVertically: (...args: any) => boolean | null | undefined;
@@ -33,10 +30,9 @@ type Props = {
     id: string;
   };
   selected?: boolean;
-  CellRenderer: React.ComponentType<{
-    item: any;
-    state: string;
-  }> & { hasFocusableInside: (item: Record<string, string>) => boolean };
+  CellRenderer: React.FunctionComponent<any> & {
+    hasFocusableInside: (item: ZappEntry) => boolean;
+  };
   preferredFocus: boolean;
   navigator: {
     push: (arg1: Record<any, any>) => void;
@@ -65,6 +61,7 @@ type Props = {
   skipFocusManagerRegistration?: boolean;
   shouldUpdate: boolean;
   behavior: Behavior;
+  componentsMapOffset: number;
 };
 
 type State = {
@@ -276,7 +273,12 @@ export class CellComponent extends React.Component<Props, State> {
 
             if (isFocused) {
               const accessibilityManager = AccessibilityManager.getInstance();
-              accessibilityManager.readText({ text: item.title });
+
+              accessibilityManager.readText({
+                text: String(
+                  item.extensions?.accessibility?.label || item.title
+                ),
+              });
             }
 
             return (

package/Components/Cell/CellWithFocusable.tsx

@@ -46,7 +46,7 @@ const useCellFocusedState = (
 
 type Props = {
   item: ZappEntry;
-  CellRenderer: React.ComponentType<{ item: Object; state: string }>;
+  CellRenderer: React.FunctionComponent<any>;
   id: string;
   groupId: string;
   onFocus: Function;

package/Components/Cell/TvOSCellComponent.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import * as R from "ramda";
 import { View, StyleSheet } from "react-native";
 
-import { Focusable } from "@applicaster/zapp-react-native-ui-components/Components/Focusable";
+import { Focusable } from "@applicaster/zapp-react-native-ui-components/Components/Focusable/FocusableTvOS";
 import { FocusableCell } from "@applicaster/zapp-react-native-ui-components/Components/FocusableCell";
 import { getItemType } from "@applicaster/zapp-react-native-utils/navigationUtils";
 import { SCREEN_TYPES } from "@applicaster/zapp-react-native-utils/navigationUtils/itemTypes";
@@ -10,10 +10,6 @@ import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focu
 import { sendSelectCellEvent } from "@applicaster/zapp-react-native-utils/analyticsUtils";
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 import { CellWithFocusable } from "./CellWithFocusable";
-import { getCellState } from "./utils";
-
-const _getCellState = (focused, selected) =>
-  getCellState({ focused, selected });
 
 type Props = {
   item: ZappEntry;
@@ -36,10 +32,9 @@ type Props = {
     component_type: string;
   };
   selected: boolean;
-  CellRenderer: React.ComponentType<{
-    item: any;
-    state: string;
-  }> & { hasFocusableInside: (item: any) => boolean };
+  CellRenderer: React.FunctionComponent<any> & {
+    hasFocusableInside: (item: any) => boolean;
+  };
   preferredFocus: boolean;
   navigator: {
     push: (arg1: Record<any, any>) => void;
@@ -70,6 +65,7 @@ type Props = {
   isFocusable: boolean;
   shouldUpdate: boolean;
   behavior: Behavior;
+  componentsMapOffset: number;
 };
 
 type State = {
@@ -184,6 +180,7 @@ export class TvOSCellComponent extends React.Component<Props, State> {
       groupId,
       component,
       index,
+      componentsMapOffset,
     } = this.props;
 
     this.setScreenLayout(componentAnchorPointY, screenLayout);
@@ -198,13 +195,11 @@ export class TvOSCellComponent extends React.Component<Props, State> {
       const extraAnchorPointYOffset =
         screenLayout?.extraAnchorPointYOffset || 0;
 
-      const marginTop = screenLayout?.screenMarginTop || 0;
-
       const totalOffset =
         headerOffset +
-        (componentAnchorPointY || 0) +
-        extraAnchorPointYOffset -
-        marginTop;
+          (componentAnchorPointY || 0) +
+          extraAnchorPointYOffset -
+          componentsMapOffset || 0;
 
       mainOffsetUpdater?.(
         { tag: this.target },
@@ -252,7 +247,7 @@ export class TvOSCellComponent extends React.Component<Props, State> {
 
     const focusableId = R.join("-", [component?.id, id, index]);
 
-    const handleFocus = (arg1: any, index: number) => {
+    const handleFocus = (arg1: any, index?: number) => {
       const focusFn = onFocus || noop;
       focusFn(arg1, index);
 
@@ -285,7 +280,7 @@ export class TvOSCellComponent extends React.Component<Props, State> {
       <View onLayout={this.onLayout} style={styles.container}>
         <Focusable
           id={focusableId}
-          groupId={groupId || component?.id}
+          groupId={String(groupId || component?.id)}
           onFocus={handleFocus}
           onBlur={onBlur || this.onBlur}
           isParallaxDisabled={this.layout?.width > 1740}
@@ -297,20 +292,18 @@ export class TvOSCellComponent extends React.Component<Props, State> {
           style={baseCellStyles}
           isFocusable={isFocusable}
         >
-          {(focused) => {
-            return (
-              <FocusableCell
-                {...{
-                  index,
-                  CellRenderer,
-                  item,
-                  focused: this.props.focused || selectedCell || focused,
-                  scrollTo: this.scrollTo,
-                  behavior,
-                }}
-              />
-            );
-          }}
+          {(focused) => (
+            <FocusableCell
+              {...{
+                index,
+                CellRenderer,
+                item,
+                focused: !!(this.props.focused || selectedCell || focused),
+                scrollTo: this.scrollTo,
+                behavior,
+              }}
+            />
+          )}
         </Focusable>
       </View>
     );

package/Components/Cell/index.js

@@ -11,6 +11,7 @@ import { ScreenScrollingContext } from "../../Contexts/ScreenScrollingContext";
 
 import { ScreenLayoutContextConsumer } from "../../Contexts/ScreenLayoutContext";
 import { createContext } from "@applicaster/zapp-react-native-utils/reactUtils/createContext";
+import { withComponentsMapOffsetContextConsumer } from "../../Contexts/ComponentsMapOffsetContext";
 
 // TODO | Gallery QB | Extract this
 export const ScrollInterceptorContext = createContext(
@@ -30,5 +31,6 @@ export const Cell = R.compose(
   RiverOffsetContext.withConsumer,
   HorizontalScrollContext.withConsumer,
   withConsumer,
-  ScreenLayoutContextConsumer
+  ScreenLayoutContextConsumer,
+  withComponentsMapOffsetContextConsumer
 )(Component);

package/Components/CellRendererResolver/__tests__/__snapshots__/cellRendererResolver.test.js.snap

@@ -3,24 +3,24 @@
 exports[`CellRendererResolver renders correctly 1`] = `
 <View
   someProp={
-    Object {
-      "cellOptions": Object {},
-      "cellStyles": Object {
-        "ABCDE-123456": Object {
-          "configuration": Object {},
+    {
+      "cellOptions": {},
+      "cellStyles": {
+        "ABCDE-123456": {
+          "configuration": {},
           "plugin_identifier": "custom_renderer_plugin",
         },
-        "FGHIJ-123456": Object {
-          "configuration": Object {},
+        "FGHIJ-123456": {
+          "configuration": {},
           "plugin_identifier": "unknown_plugin",
         },
       },
-      "component": Object {
-        "styles": Object {
+      "component": {
+        "styles": {
           "cell_plugin_configuration_id": "ABCDE-123456",
         },
       },
-      "styles": Object {},
+      "styles": {},
     }
   }
 />
@@ -29,24 +29,24 @@ exports[`CellRendererResolver renders correctly 1`] = `
 exports[`CellRendererResolver with a default renderer plugin renders correctly 1`] = `
 <View
   someProp={
-    Object {
-      "cellOptions": Object {},
-      "cellStyles": Object {
-        "ABCDE-123456": Object {
-          "configuration": Object {},
+    {
+      "cellOptions": {},
+      "cellStyles": {
+        "ABCDE-123456": {
+          "configuration": {},
           "plugin_identifier": "custom_renderer_plugin",
         },
-        "FGHIJ-123456": Object {
-          "configuration": Object {},
+        "FGHIJ-123456": {
+          "configuration": {},
           "plugin_identifier": "unknown_plugin",
         },
       },
-      "component": Object {
-        "styles": Object {
+      "component": {
+        "styles": {
           "cell_plugin_configuration_id": "ABCDE-123456",
         },
       },
-      "styles": Object {},
+      "styles": {},
     }
   }
 />

package/Components/CellRendererResolver/__tests__/cellRendererResolver.test.js

@@ -2,9 +2,11 @@ import * as React from "react";
 import { View } from "react-native";
 import { shallow } from "enzyme";
 
-jest.mock("../../default-cell-renderer", () =>
-  jest.fn((prop) => <View whoAmI="default renderer" someProp={prop} />)
-);
+jest.mock("../../default-cell-renderer", () => {
+  const View = jest.requireActual("react-native").View;
+
+  return jest.fn((prop) => <View whoAmI="default renderer" someProp={prop} />);
+});
 
 const { CellRendererResolver } = require("../index");
 

package/Components/ComponentResolver/__tests__/__snapshots__/componentResolver.test.js.snap

@@ -5,22 +5,22 @@ exports[`ComponentResolver renders correctly 1`] = `
   value={null}
 >
   <Memo(ComponentResolver)
-    cellStyles={Object {}}
+    cellStyles={{}}
     component={
-      Object {
+      {
         "component_type": "some_component",
       }
     }
     components={
-      Object {
+      {
         "SomeComponent": [MockFunction],
       }
     }
     decorators={[MockFunction]}
     dispatch={[Function]}
-    plugins={Array []}
+    plugins={[]}
     store={
-      Object {
+      {
         "clearActions": [Function],
         "dispatch": [Function],
         "getActions": [Function],