@applicaster/zapp-react-native-ui-components 13.0.0-alpha.9433330286 → 13.0.0-alpha.9814200105

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.ios.ts

@@ -25,7 +25,7 @@ type Props = {
 };
 
 export class BaseFocusable<
-  T extends Props = Props
+  T extends Props = Props,
 > extends BaseFocusableInterface<T> {
   constructor(props) {
     super(props);

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;
@@ -35,7 +35,7 @@ type Props = {
 };
 
 export class BaseFocusable<
-  T extends Props = Props
+  T extends Props = Props,
 > extends BaseFocusableInterface<T> {
   constructor(props) {
     super(props);
@@ -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

@@ -272,7 +272,16 @@ export class CellComponent extends React.Component<Props, State> {
 
             if (isFocused) {
               const accessibilityManager = AccessibilityManager.getInstance();
-              accessibilityManager.readText({ text: String(item.title) });
+
+              const accessibilityTitle =
+                item?.extensions?.accessibility?.label || item?.title || "";
+
+              const accessibilityHint =
+                item?.extensions?.accessibility?.hint || "";
+
+              accessibilityManager.readText({
+                text: `${accessibilityTitle} ${accessibilityHint}`,
+              });
             }
 
             return (

package/Components/Cell/CellWithFocusable.ios.tsx

@@ -0,0 +1,126 @@
+/** TODO: Remove this file when tvos FocusableGroup
+ * behaviour is aligned to the web one
+ * FocusableGroup should only send onFocus and onBlur events when
+ * Focus enters and leaves the Focusables inside the branch
+ */
+import * as React from "react";
+
+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";
+import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
+
+import { isAppleTV } from "../../Helpers/Platform";
+import { useCellState } from "../MasterCell/utils";
+
+const useCellFocusedState = (
+  skipFocusManagerRegistration: boolean,
+  groupId: string,
+  id: string
+) => {
+  const [currentCellFocused, setCurrentCellFocused] = React.useState(false);
+
+  React.useEffect(() => {
+    const isGroupItemFocused = () => {
+      if (!skipFocusManagerRegistration) {
+        const isFocused = focusManager.isGroupItemFocused(groupId, id);
+        setCurrentCellFocused(isFocused);
+      }
+    };
+
+    const handler = () => {
+      // tvOS hack for properly checking focus
+      if (isAppleTV()) {
+        setTimeout(() => {
+          isGroupItemFocused();
+        }, 0);
+      } else {
+        isGroupItemFocused();
+      }
+    };
+
+    focusManager.on(FOCUS_EVENTS.FOCUS, handler);
+
+    return () => {
+      focusManager.removeHandler(FOCUS_EVENTS.FOCUS, handler);
+    };
+  }, [groupId, skipFocusManagerRegistration]);
+
+  return currentCellFocused;
+};
+
+type Props = {
+  item: ZappEntry;
+  CellRenderer: React.FunctionComponent<any>;
+  id: string;
+  groupId: string;
+  onFocus: Function;
+  index: number;
+  scrollTo: Function;
+  preferredFocus?: boolean;
+  skipFocusManagerRegistration?: boolean;
+  isFocusable?: boolean;
+  behavior: Behavior;
+  focused?: boolean;
+};
+
+export function CellWithFocusable(props: Props) {
+  const {
+    index,
+    item,
+    CellRenderer,
+    id,
+    groupId,
+    onFocus,
+    scrollTo = noop,
+    preferredFocus,
+    skipFocusManagerRegistration,
+    isFocusable,
+    behavior,
+    focused,
+  } = props;
+
+  const isFocused = useCellFocusedState(
+    skipFocusManagerRegistration,
+    groupId,
+    id
+  );
+
+  const state = useCellState({
+    id: item.id,
+    behavior,
+    focused: isFocused || toBooleanWithDefaultFalse(focused),
+  });
+
+  const [focusedButtonId, setFocusedButtonId] = React.useState(undefined);
+
+  // for horizontal scrolling
+  React.useEffect(() => {
+    if (focusedButtonId) {
+      scrollTo(index);
+    }
+  }, [focusedButtonId]);
+
+  const handleToggleFocus = (value) => {
+    setFocusedButtonId(value.focusedButtonId);
+
+    if (value.focusable) {
+      onFocus(value.focusable, value.mouse);
+    }
+  };
+
+  return (
+    <CellRenderer
+      item={item}
+      groupId={groupId}
+      onToggleFocus={handleToggleFocus}
+      state={state}
+      prefixId={id}
+      focusedButtonId={focusedButtonId}
+      preferredFocus={preferredFocus}
+      skipFocusManagerRegistration={skipFocusManagerRegistration}
+      isFocusable={isFocusable}
+      focused={focused}
+    />
+  );
+}

package/Components/Cell/CellWithFocusable.tsx

@@ -1,48 +1,10 @@
 import * as React from "react";
 
-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";
 import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
 
-import { isAppleTV } from "../../Helpers/Platform";
 import { useCellState } from "../MasterCell/utils";
-
-const useCellFocusedState = (
-  skipFocusManagerRegistration: boolean,
-  groupId: string,
-  id: string
-) => {
-  const [currentCellFocused, setCurrentCellFocused] = React.useState(false);
-
-  React.useEffect(() => {
-    const isGroupItemFocused = () => {
-      if (!skipFocusManagerRegistration) {
-        const isFocused = focusManager.isGroupItemFocused(groupId, id);
-        setCurrentCellFocused(isFocused);
-      }
-    };
-
-    const handler = () => {
-      // tvOS hack for properly checking focus
-      if (isAppleTV()) {
-        setTimeout(() => {
-          isGroupItemFocused();
-        }, 0);
-      } else {
-        isGroupItemFocused();
-      }
-    };
-
-    focusManager.on(FOCUS_EVENTS.FOCUS, handler);
-
-    return () => {
-      focusManager.removeHandler(FOCUS_EVENTS.FOCUS, handler);
-    };
-  }, [groupId, skipFocusManagerRegistration]);
-
-  return currentCellFocused;
-};
+import { FocusableGroup } from "../FocusableGroup";
 
 type Props = {
   item: ZappEntry;
@@ -75,11 +37,7 @@ export function CellWithFocusable(props: Props) {
     focused,
   } = props;
 
-  const isFocused = useCellFocusedState(
-    skipFocusManagerRegistration,
-    groupId,
-    id
-  );
+  const [isFocused, setIsFocused] = React.useState(false);
 
   const state = useCellState({
     id: item.id,
@@ -96,26 +54,52 @@ export function CellWithFocusable(props: Props) {
     }
   }, [focusedButtonId]);
 
-  const handleToggleFocus = (value) => {
-    setFocusedButtonId(value.focusedButtonId);
+  const handleToggleFocus = React.useCallback(
+    (value) => {
+      setFocusedButtonId(value.focusedButtonId);
+
+      if (value.focusable) {
+        onFocus(value.focusable, value.mouse);
+      }
+    },
+    [onFocus]
+  );
+
+  const onGroupFocus = React.useCallback(() => {
+    if (!skipFocusManagerRegistration) {
+      setIsFocused(true);
+    }
+  }, [skipFocusManagerRegistration]);
 
-    if (value.focusable) {
-      onFocus(value.focusable, value.mouse);
+  const onGroupBlur = React.useCallback(() => {
+    if (!skipFocusManagerRegistration) {
+      setIsFocused(false);
     }
-  };
+  }, [skipFocusManagerRegistration]);
 
   return (
-    <CellRenderer
-      item={item}
+    <FocusableGroup
+      id={`focusable-cell-wrapper-${id}`}
+      testID={"cell-with-focusable-cell-renderer-focusable-group"}
       groupId={groupId}
-      onToggleFocus={handleToggleFocus}
-      state={state}
-      prefixId={id}
-      focusedButtonId={focusedButtonId}
       preferredFocus={preferredFocus}
-      skipFocusManagerRegistration={skipFocusManagerRegistration}
-      isFocusable={isFocusable}
-      focused={focused}
-    />
+      shouldUsePreferredFocus
+      onFocus={onGroupFocus}
+      onBlur={onGroupBlur}
+    >
+      <CellRenderer
+        testID={"cell-with-focusable-cell-renderer"}
+        item={item}
+        groupId={`focusable-cell-wrapper-${id}`}
+        onToggleFocus={handleToggleFocus}
+        state={state}
+        prefixId={id}
+        focusedButtonId={focusedButtonId}
+        preferredFocus={true}
+        skipFocusManagerRegistration={skipFocusManagerRegistration}
+        isFocusable={isFocusable}
+        focused={focused}
+      />
+    </FocusableGroup>
   );
 }

package/Components/Cell/TvOSCellComponent.tsx

@@ -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;