@applicaster/zapp-react-native-utils 14.0.0-rc.9 → 15.0.0-rc.2

package/configurationUtils/index.ts

@@ -1,6 +1,12 @@
 /// <reference types="@applicaster/applicaster-types" />
 import * as R from "ramda";
 import { Platform } from "react-native";
+import {
+  isFilledArray,
+  isEmptyArray,
+} from "@applicaster/zapp-react-native-utils/arrayUtils";
+import { isEmpty } from "@applicaster/zapp-react-native-utils/utils";
+
 import { applyTransform } from "../transform";
 import { ManifestField } from "../types";
 import { isNilOrEmpty } from "../reactUtils/helpers";
@@ -122,54 +128,77 @@ export function flattenFields(
 }
 
 /**
- * Retrieves the value of the "src" in the first media_item
- * that has the matching key provided in args.
- * Fallbacks: "image_base" key, or first media_item that has any "src"
- * @param {Object} entry    Single entry from a feed
- * @param {Array} arg      Array with a single element - the key of the media item
- *                          from which the "src" should be retrieved
- * @returns {?String}       Value of "src", usually a URI
+ * Retrieves all media items from the entry's media_group that are of type "image" or "thumbnail".
+ *
+ * @param {ZappEntry} entry - The entry object containing the media_group array.
+ * @returns {Option<ZappMediaItem[]>} An array of media items of type "image" or "thumbnail", or undefined if no media_group is present.
+ */
+export function getMediaItems(entry: ZappEntry): Option<ZappMediaItem[]> {
+  const mediaGroup = entry?.media_group || [];
+
+  if (isEmptyArray(mediaGroup)) {
+    return undefined;
+  }
+
+  const mediaItems = mediaGroup
+    .filter((group) => ["image", "thumbnail"].includes(group.type))
+    .flatMap((group) =>
+      Array.isArray(group.media_item) ? group.media_item : [group.media_item]
+    );
+
+  if (isFilledArray(mediaItems)) {
+    return mediaItems;
+  }
+
+  return undefined;
+}
+
+/**
+ * Retrieves the "src" value from a media item in the entry's media group,
+ * based on a provided key, with fallback logic.
+ *
+ * Fallback order:
+ *   1. Attempts to find a media item with the specified key (or "image_base" if none provided).
+ *   2. If not found, attempts to find a media item with the key "image_base".
+ *   3. If still not found, falls back to the first available media item.
+ *
+ * Special handling: If the resolved item's "src" is an empty string, returns undefined,
+ * since empty URIs are invalid in some platforms (e.g., React Native).
+ *
+ * @param {ZappEntry} entry - The entry object containing a media group.
+ * @param {string[] | unknown} arg - A single-element array containing the key to look up, or any unknown value.
+ * @returns {?string} The "src" URI from the matched media item, or undefined if not found or empty.
  */
 export function imageSrcFromMediaItem(
   entry: ZappEntry,
   arg: string[] | unknown
-) {
+): Option<string> {
   const args: unknown = R.unless(Array.isArray, Array)(arg || []);
   const imageKey: string = args?.[0] || "image_base"; // always a single key in this function
-  const mediaGroup = R.path<ZappMediaGroup[]>(["media_group"], entry);
 
-  if (!mediaGroup) {
+  const mediaItems = getMediaItems(entry);
+
+  if (!mediaItems) {
     return undefined;
   }
 
-  const hasTypeImageOrThumbnail = R.either(
-    R.propEq("type", "image"),
-    R.propEq("type", "thumbnail")
-  );
-
-  const pickMediaItemProp = R.prop<ZappMediaItem>("media_item");
+  // Try to find the item with the given key
+  let foundItem = mediaItems.find((item) => item.key === imageKey);
 
-  const mediaItems = R.compose(
-    R.flatten,
-    R.map(pickMediaItemProp),
-    R.filter(hasTypeImageOrThumbnail)
-  )(mediaGroup);
+  // If not found and key was not "image_base", try to find "image_base"
+  if (!foundItem && imageKey !== "image_base") {
+    foundItem = mediaItems.find((item) => item.key === "image_base");
+  }
 
-  if (!mediaItems) {
-    return undefined;
+  // If still not found, default to first item
+  if (!foundItem) {
+    foundItem = mediaItems[0];
   }
 
-  const src = R.compose(
-    R.prop("src"),
-    R.defaultTo(R.head(mediaItems)),
-    R.when(R.isNil, () => R.find(R.propEq("key", "image_base"), mediaItems)),
-    R.find(R.propEq("key", imageKey))
-  )(mediaItems);
-
-  // Special case for react native - uri cannot be an empty string (yellow warning).
-  // R.isEmpty is tailored specifically for checks like these,
-  // it returns false for undefined values.
-  return R.isEmpty(src) ? undefined : src;
+  const src = foundItem?.src;
+
+  // React Native quirk: empty string is invalid for URIs
+  return isEmpty(src) ? undefined : src;
 }
 
 /**
@@ -370,7 +399,7 @@ export const populateConfigurationValues =
       flattenAndPopulateFields(fields, configuration, skipDefaults)
   );
 
-export const getAccesabilityProps = (item: ZappEntry) => ({
+export const getAccessibilityProps = (item: ZappEntry) => ({
   accessible: item?.extensions?.accessibility,
   accessibilityLabel: item?.extensions?.accessibility?.label || item?.title,
   accessibilityHint: item?.extensions?.accessibility?.hint,

package/configurationUtils/manifestKeyParser.ts

@@ -11,8 +11,11 @@ const currentPlatform = platformSelect({
   android_tv: "android",
 });
 
-const stateSuffixes = ["pressed", "focused"];
+// Do not change the order, focused_selected should be first
+const states = ["focused_selected", "pressed", "focused", "selected"];
+
 const platformSuffixes = ["ios", "tvos", "samsung", "lg", "android"];
+type StateKey = (typeof states)[number] | "default";
 
 export type GetAllSpecificStylesProps = {
   componentName: string;
@@ -33,39 +36,47 @@ export const getAllSpecificStyles = ({
   subComponentName,
   outStyles,
 }: GetAllSpecificStylesProps) => {
-  if (!outStyles) {
-    throw new Error("outStyles is required");
-  }
+  if (!outStyles) throw new Error("outStyles is required");
+  if (!componentName) throw new Error("componentName is required");
 
-  // Pressed, platform specific styles are not supported
-  const prefix = `${componentName}_style_${subComponentName}_`;
+  const prefix =
+    subComponentName?.length > 0
+      ? `${componentName}_style_${subComponentName}_`
+      : `${componentName}_style_`;
 
   const defaultKey = "default";
 
-  if (!outStyles[defaultKey]) {
-    outStyles[defaultKey] = {};
-  }
+  if (!outStyles[defaultKey]) outStyles[defaultKey] = {};
+
+  const tmpGenericDict: Record<StateKey, Record<string, any>> = {};
+  const tmpPlatformDict: Record<StateKey, Record<string, any>> = {};
 
-  Object.keys(configuration).forEach((key) => {
+  const parseKey = (key: string, value: any) => {
     if (!key.startsWith(prefix)) {
       return;
     }
 
     let styleName = key.slice(prefix.length);
+    if (!styleName || styleName.startsWith("_")) return;
 
-    const platform = platformSuffixes.find((suffix) =>
-      styleName.startsWith(suffix)
+    const platform = platformSuffixes.find((prefix) =>
+      styleName.startsWith(prefix)
     );
 
+    let tmpDict = tmpGenericDict;
+
     if (platform) {
       if (currentPlatform !== platform) {
-        return; // Continue
+        return;
       }
 
+      tmpDict = tmpPlatformDict;
       styleName = styleName.slice(platform.length + 1);
     }
 
-    let state = stateSuffixes.find((suffix) => styleName.startsWith(suffix));
+    let state = states.find((prefix) => styleName.startsWith(prefix)) as
+      | StateKey
+      | undefined;
 
     if (state) {
       styleName = styleName.slice(state.length + 1);
@@ -73,30 +84,44 @@ export const getAllSpecificStyles = ({
       state = defaultKey;
     }
 
-    const camelCaseKey = toCamelCase(styleName);
+    if (!styleName) return;
 
-    let stateOverrides = outStyles[state];
+    const camelCaseKey = toCamelCase(styleName);
 
-    if (!stateOverrides) {
-      stateOverrides = {};
-      outStyles[state] = stateOverrides;
-    }
+    if (!tmpDict[state]) tmpDict[state] = {};
+    tmpDict[state][camelCaseKey] = value;
+  };
 
-    if (stateOverrides[camelCaseKey]) {
-      // Add warning, key is already defined
-    }
+  for (const [key, value] of Object.entries(configuration)) {
+    parseKey(key, value);
+  }
 
-    stateOverrides[camelCaseKey] = configuration[key];
-  });
+  const allStates = Array.from(
+    new Set<StateKey>([
+      defaultKey,
+      ...(Object.keys(tmpGenericDict) as StateKey[]),
+      ...(Object.keys(tmpPlatformDict) as StateKey[]),
+      ...(Object.keys(outStyles) as StateKey[]),
+    ])
+  );
+
+  for (const state of allStates) {
+    outStyles[state] = Object.assign(
+      {},
+      outStyles[state] || {},
+      tmpGenericDict[state] || {},
+      tmpPlatformDict[state] || {}
+    );
+  }
 
   // Merge default styles with state specific styles
-  if (Object.keys(outStyles).length > 1) {
-    Object.keys(outStyles).forEach((key) => {
-      if (key === defaultKey) {
-        return;
-      }
+  for (const state of Object.keys(outStyles)) {
+    if (state === defaultKey) continue;
 
-      outStyles[key] = Object.assign({}, outStyles[defaultKey], outStyles[key]);
-    });
+    outStyles[state] = Object.assign(
+      {},
+      outStyles[defaultKey],
+      outStyles[state]
+    );
   }
 };

package/focusManager/FocusManager.ts

@@ -2,11 +2,24 @@ import { path } from "ramda";
 import { isString } from "@applicaster/zapp-react-native-utils/stringUtils";
 import * as FOCUS_EVENTS from "@applicaster/zapp-react-native-utils/appUtils/focusManager/events";
 
+import {
+  QUICK_BRICK_CONTENT,
+  QUICK_BRICK_NAVBAR,
+} from "@applicaster/quick-brick-core/const";
+
 import { logger } from "./logger";
 import { TreeNode } from "./TreeNode";
 import { Tree } from "./Tree";
 import { subscriber } from "../functionUtils";
 import { getFocusableId, toFocusDirection } from "./utils";
+import {
+  findSelectedMenuId,
+  isTabsScreenContentFocused,
+  findSelectedTabId,
+  contextWithoutScrolling,
+} from "./aux";
+
+export { contextWithoutScrolling } from "./aux";
 
 export {
   toFocusDirection,
@@ -176,18 +189,30 @@ class FocusManager {
     }
   }
 
-  registerFocusable(
-    component: FocusManager.TouchableReactRef,
-    parentFocusable: FocusManager.TouchableReactRef,
-    isFocusableCell: boolean
-  ) {
-    const focusableId = getFocusableId(component);
+  registerFocusable({
+    touchableRef,
+    parentFocusableRef,
+    isFocusableCell,
+    parentFocusableId,
+  }: {
+    touchableRef: FocusManager.TouchableReactRef;
+    parentFocusableRef: FocusManager.TouchableReactRef;
+    isFocusableCell: boolean;
+    parentFocusableId: string;
+  }) {
+    const focusableId = getFocusableId(touchableRef);
+
     const focusableComponent = FocusManager.findFocusable(focusableId);
 
-    if (!focusableComponent && component) {
-      this.focusableComponents.push(component);
+    if (!focusableComponent && touchableRef) {
+      this.focusableComponents.push(touchableRef);
 
-      this.tree.add(component, parentFocusable, isFocusableCell);
+      this.tree.add(
+        touchableRef,
+        parentFocusableRef,
+        isFocusableCell,
+        parentFocusableId
+      );
     } else {
       logger.warning("Focusable component already registered", {
         id: focusableId,
@@ -209,7 +234,8 @@ class FocusManager {
 
   private setNextFocus(
     nextFocus: FocusManager.TouchableReactRef,
-    options?: FocusManager.Android.CallbackOptions
+    options?: FocusManager.Android.CallbackOptions,
+    context?: FocusManager.FocusContext
   ) {
     if (nextFocus?.current?.props?.blockFocus) {
       return;
@@ -238,17 +264,15 @@ class FocusManager {
 
       FocusManager.instance.setPreviousNavigationDirection(options ?? null);
 
-      nextFocus?.current?.onFocus?.(nextFocus.current, options ?? {});
+      nextFocus?.current?.onFocus?.(nextFocus.current, options ?? {}, context);
     }
   }
 
   blurPrevious(options?: FocusManager.Android.CallbackOptions) {
-    if (options) {
-      FocusManager.instance.prevFocused?.onBlur?.(
-        FocusManager.instance.prevFocused,
-        options
-      );
-    }
+    FocusManager.instance.prevFocused?.onBlur?.(
+      FocusManager.instance.prevFocused,
+      options ?? {} // Adding fallback to avoid potential regression caused by #7509
+    );
   }
 
   onDisableFocusChange = (id) => {
@@ -269,7 +293,7 @@ class FocusManager {
 
       if (nextFocus) {
         // HACK: hack to fix the hack below
-        // HACK: putting call to the end of the event loop so the next component has a chane to be registered
+        // HACK: putting call to the end of the event loop so the next component has a chance to be registered
         setTimeout(() => {
           FocusManager.instance.setFocus(nextFocus, {
             direction: "down",
@@ -281,7 +305,8 @@ class FocusManager {
 
   setFocus(
     newFocus: FocusManager.TouchableReactRef | string,
-    options?: FocusManager.Android.CallbackOptions
+    options?: FocusManager.Android.CallbackOptions,
+    context?: FocusManager.FocusContext
   ) {
     // Checks if element is focusable
     const { isFocusable, error } = FocusManager.isFocusable(newFocus);
@@ -306,7 +331,7 @@ class FocusManager {
       }
 
       if (newFocusRef) {
-        FocusManager.instance.setNextFocus(newFocusRef, options);
+        FocusManager.instance.setNextFocus(newFocusRef, options, context);
       }
     }
   }
@@ -341,6 +366,11 @@ class FocusManager {
       FocusManager.instance.focused.onBlur(FocusManager.instance.focused, {});
     }
 
+    // send reset event to some handler to reset their internal state, before real reset happens
+    this.eventHandler?.invokeHandler?.(FOCUS_EVENTS.RESET, {
+      focusedId: FocusManager.instance.focusedId,
+    });
+
     FocusManager.instance.setFocusLocal({ current: null });
   }
 
@@ -407,6 +437,60 @@ class FocusManager {
       throw new Error(`Group with id ${id} not found`);
     }
   }
+
+  isFocusOnMenu(): boolean {
+    return this.isFocusableChildOf(
+      FocusManager.instance.focusedId,
+      QUICK_BRICK_NAVBAR
+    );
+  }
+
+  isFocusOnContent(): boolean {
+    return this.isFocusableChildOf(
+      FocusManager.instance.focusedId,
+      QUICK_BRICK_CONTENT
+    );
+  }
+
+  private landFocusToWithoutScrolling = (id) => {
+    if (id) {
+      // set focus on selected menu item
+      const direction = undefined;
+
+      const context: FocusManager.FocusContext =
+        contextWithoutScrolling("back");
+
+      logger.log({ message: "landFocusToWithoutScrolling", data: { id } });
+
+      this.setFocus(id, direction, context);
+    }
+  };
+
+  // Move focus to appropriate top navigation tab with context
+  focusOnSelectedTab(index: number): void {
+    const selectedTabId = findSelectedTabId(this.tree, index);
+
+    // Set focus with back button context to tabs-menu
+    this.landFocusToWithoutScrolling(selectedTabId);
+  }
+
+  // Move focus to appropriate top navigation tab with context
+  focusOnSelectedTopMenuItem(index: number, sectionKey: string): void {
+    const selectedMenuItemId = findSelectedMenuId(this.tree, {
+      index,
+      sectionKey,
+    });
+
+    // Set focus with back button context to top-menu
+    this.landFocusToWithoutScrolling(selectedMenuItemId);
+  }
+
+  isTabsScreenContentFocused(): boolean {
+    return isTabsScreenContentFocused(
+      this.tree,
+      FocusManager.instance.focusedId
+    );
+  }
 }
 
 export const focusManager = FocusManager.getInstance();

package/focusManager/Tree.ts

@@ -8,37 +8,41 @@ export class Tree {
     this.tree = focusManagerTree;
   }
 
-  add(component, parentFocusable, isFocusableCell) {
-    const focusableId = getFocusableId(component);
-    const parentId = getFocusableId(parentFocusable);
+  add(
+    touchableRef: FocusManager.TouchableReactRef,
+    parentFocusableRef: FocusManager.TouchableReactRef,
+    isFocusableCell: boolean,
+    parentFocusableId: string
+  ) {
+    const focusableId = getFocusableId(touchableRef);
+    const parentId = getFocusableId(parentFocusableRef) || parentFocusableId;
     const focusableComponentInTree = this.find(focusableId);
 
     // update node if it already exists
     if (focusableComponentInTree) {
-      focusableComponentInTree.updateNode(component);
+      focusableComponentInTree.updateNode(touchableRef);
     }
 
-    if (parentFocusable?.current) {
-      if (!this.find(parentId)) {
-        this.tree.push(new TreeNode(null, parentId, null, isFocusableCell));
-      }
+    if (!this.find(parentId)) {
+      // create temporary node to the root of the tree
+      this.tree.push(new TreeNode(null, parentId, null, isFocusableCell));
+    }
 
-      const parentNode = this.find(parentId);
+    const parentNode = this.find(parentId);
 
-      if (parentNode) {
-        if (focusableComponentInTree) {
-          focusableComponentInTree.isFocusableCell = isFocusableCell;
-          focusableComponentInTree.parentId = parentNode.id;
+    if (parentNode) {
+      if (focusableComponentInTree) {
+        focusableComponentInTree.isFocusableCell = isFocusableCell;
+        focusableComponentInTree.parentId = parentNode.id;
 
-          parentNode.addChild(focusableComponentInTree);
+        parentNode.addChild(focusableComponentInTree);
 
-          // remove root object from the list
-          this.tree = this.tree.filter(
-            (node) => node !== focusableComponentInTree
-          );
-        } else {
-          parentNode.addChild(component, focusableId, isFocusableCell);
-        }
+        // remove root object from the list
+        this.tree = this.tree.filter(
+          (node) => node !== focusableComponentInTree
+        );
+      } else {
+        parentNode.addChild(touchableRef, focusableId, isFocusableCell);
       }
     }
   }

package/focusManager/__tests__/FocusManager.test.ts

@@ -1,5 +1,8 @@
 import { focusManager } from "../FocusManager";
 
+const isFocusableCell = true;
+const parentFocusableId = "parentFocusableId";
+
 const group = {
   current: {
     props: {
@@ -62,13 +65,47 @@ jest.useFakeTimers();
 
 describe("FocusManager", () => {
   beforeAll(() => {
-    focusManager.registerFocusable(group, { current: null });
-    focusManager.registerFocusable(child1, group);
-    focusManager.registerFocusable(child2, group);
-    focusManager.registerFocusable(child3, child2);
-
-    focusManager.registerFocusable(child4, child2);
-    focusManager.registerFocusable(child5, child2);
+    focusManager.registerFocusable({
+      touchableRef: group,
+      parentFocusableRef: { current: null },
+      isFocusableCell,
+      parentFocusableId,
+    });
+
+    focusManager.registerFocusable({
+      touchableRef: child1,
+      parentFocusableRef: group,
+      isFocusableCell,
+      parentFocusableId,
+    });
+
+    focusManager.registerFocusable({
+      touchableRef: child2,
+      parentFocusableRef: group,
+      isFocusableCell,
+      parentFocusableId,
+    });
+
+    focusManager.registerFocusable({
+      touchableRef: child3,
+      parentFocusableRef: child2,
+      isFocusableCell,
+      parentFocusableId,
+    });
+
+    focusManager.registerFocusable({
+      touchableRef: child4,
+      parentFocusableRef: child2,
+      isFocusableCell,
+      parentFocusableId,
+    });
+
+    focusManager.registerFocusable({
+      touchableRef: child5,
+      parentFocusableRef: child2,
+      isFocusableCell,
+      parentFocusableId,
+    });
   });
 
   it("focusManager should be defined", () => {
@@ -199,7 +236,12 @@ describe("FocusManager", () => {
   });
 
   it("focusManager registerFocusable should register", () => {
-    focusManager.registerFocusable(child5, child2);
+    focusManager.registerFocusable({
+      touchableRef: child5,
+      parentFocusableRef: child2,
+      isFocusableCell,
+      parentFocusableId,
+    });
 
     expect(
       focusManager.isFocusableChildOf(child5.current.props.id, child2)