@applicaster/zapp-react-native-utils 14.0.0-alpha.3552323332 → 14.0.0-alpha.3652810444

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

@@ -7,6 +7,16 @@ import { TreeNode } from "./TreeNode";
 import { Tree } from "./Tree";
 import { subscriber } from "../functionUtils";
 import { getFocusableId, toFocusDirection } from "./utils";
+import {
+  isCurrentFocusOnMenu,
+  isCurrentFocusOnContent,
+  findSelectedMenuId,
+  isTabsScreenContentFocused,
+  findSelectedTabId,
+  contextWithoutScrolling,
+} from "./aux";
+
+export { contextWithoutScrolling } from "./aux";
 
 export {
   toFocusDirection,
@@ -176,18 +186,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 +231,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 +261,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 +290,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 +302,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 +328,7 @@ class FocusManager {
       }
 
       if (newFocusRef) {
-        FocusManager.instance.setNextFocus(newFocusRef, options);
+        FocusManager.instance.setNextFocus(newFocusRef, options, context);
       }
     }
   }
@@ -341,6 +363,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 +434,48 @@ class FocusManager {
       throw new Error(`Group with id ${id} not found`);
     }
   }
+
+  isFocusOnMenu(): boolean {
+    return isCurrentFocusOnMenu(this.tree, FocusManager.instance.focusedId);
+  }
+
+  isFocusOnContent(): boolean {
+    return isCurrentFocusOnContent(this.tree, FocusManager.instance.focusedId);
+  }
+
+  // Move focus to appropriate top navigation tab with context
+  focusTopNavigation(isTabsScreen: boolean, item: ZappEntry): void {
+    const landFocusTo = (id) => {
+      if (id) {
+        // set focus on selected menu item
+        const direction = undefined;
+
+        const context: FocusManager.FocusContext =
+          contextWithoutScrolling("back");
+
+        logger.log({ message: "landFocusTo", data: { id } });
+
+        this.setFocus(id, direction, context);
+      }
+    };
+
+    if (
+      isTabsScreen &&
+      isTabsScreenContentFocused(this.tree, FocusManager.instance.focusedId)
+    ) {
+      const selectedTabId = findSelectedTabId(this.tree, item);
+
+      // Set focus with back button context to tabs-menu
+      landFocusTo(selectedTabId);
+
+      return;
+    }
+
+    const selectedMenuItemId = findSelectedMenuId(this.tree);
+
+    // Set focus with back button context to top-menu
+    landFocusTo(selectedMenuItemId);
+  }
 }
 
 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)

package/focusManager/aux/index.ts

@@ -0,0 +1,167 @@
+import {
+  isNil,
+  startsWith,
+  find,
+  pathOr,
+} from "@applicaster/zapp-react-native-utils/utils";
+
+import {
+  QUICK_BRICK_CONTENT,
+  QUICK_BRICK_NAVBAR,
+  QUICK_BRICK_NAVBAR_SECTIONS,
+} from "@applicaster/quick-brick-core/const";
+
+const isNavBar = (node) => startsWith(QUICK_BRICK_NAVBAR, node?.id);
+const isContent = (node) => startsWith(QUICK_BRICK_CONTENT, node?.id);
+
+// SCREEN_PICKER_SELECTOR_CONTAINER(we assume there is only one SCREEN_PICKER)
+let screenPickerSelectorContainerId;
+
+export const onRegisterScreenPickerSelectorContainer = (id) => {
+  screenPickerSelectorContainerId = id;
+};
+
+export const onUnregisterScreenPickerSelectorContainer = (id) => {
+  // reset screenSelectorId on unregistration
+  if (screenPickerSelectorContainerId === id) {
+    screenPickerSelectorContainerId = undefined;
+  }
+};
+// SCREEN_PICKER_SELECTOR_CONTAINER
+
+// SCREEN_PICKER_CONTENT_CONTAINER(we assume there is only one SCREEN_PICKER)
+let screenPickerContentContainerId;
+
+export const onRegisterScreenPickerContentContainer = (id) => {
+  screenPickerContentContainerId = id;
+};
+
+export const onUnregisterScreenPickerContentContainer = (id) => {
+  // reset screenSelectorId on unregistration
+  if (screenPickerContentContainerId === id) {
+    screenPickerContentContainerId = undefined;
+  }
+};
+
+const isScreenPickerContentContainer = (node) =>
+  screenPickerContentContainerId === node?.id;
+
+// SCREEN_PICKER_CONTENT_CONTAINER
+
+const findSelectedMenuIdInSection = (focusableTree, section) => {
+  const children = pathOr([], ["children"], focusableTree.find(section));
+
+  return find((child) => child.component.current.props.isSelected(), children)
+    ?.id;
+};
+
+export const findSelectedMenuId = (focusableTree) => {
+  const selectedMenuItemIdInLeftSection = findSelectedMenuIdInSection(
+    focusableTree,
+    QUICK_BRICK_NAVBAR_SECTIONS.left
+  );
+
+  if (selectedMenuItemIdInLeftSection) {
+    return selectedMenuItemIdInLeftSection;
+  }
+
+  const selectedMenuItemIdInMenuSection = findSelectedMenuIdInSection(
+    focusableTree,
+    QUICK_BRICK_NAVBAR_SECTIONS.menu
+  );
+
+  if (selectedMenuItemIdInMenuSection) {
+    return selectedMenuItemIdInMenuSection;
+  }
+
+  const selectedMenuItemIdInRightSection = findSelectedMenuIdInSection(
+    focusableTree,
+    QUICK_BRICK_NAVBAR_SECTIONS.right
+  );
+
+  if (selectedMenuItemIdInRightSection) {
+    return selectedMenuItemIdInRightSection;
+  }
+
+  return undefined;
+};
+
+export const findSelectedTabId = (focusableTree, item: ZappEntry): string => {
+  const screenSelectorContainerNode = focusableTree.find(
+    screenPickerSelectorContainerId
+  );
+
+  const selectedTabId = find(
+    (child) => child.component.current.props.isSelected(item.id),
+    screenSelectorContainerNode.children
+  )?.id;
+
+  return selectedTabId;
+};
+
+export const isTabsScreenContentFocused = (focusableTree, id) => {
+  const node = focusableTree.find(id);
+
+  if (isNil(node)) {
+    return false;
+  }
+
+  if (isNavBar(node)) {
+    return false;
+  }
+
+  if (isContent(node)) {
+    return false;
+  }
+
+  if (isScreenPickerContentContainer(node)) {
+    return true;
+  }
+
+  return isTabsScreenContentFocused(focusableTree, node.parentId);
+};
+
+export const isCurrentFocusOnMenu = (focusableTree, id): boolean => {
+  const node = focusableTree.find(id);
+
+  if (isNil(node)) {
+    return false;
+  }
+
+  if (isNavBar(node)) {
+    return true;
+  }
+
+  if (isContent(node)) {
+    return false;
+  }
+
+  return isCurrentFocusOnMenu(focusableTree, node.parentId);
+};
+
+export const isCurrentFocusOnContent = (focusableTree, id) => {
+  const node = focusableTree.find(id);
+
+  if (isNil(node)) {
+    return false;
+  }
+
+  if (isNavBar(node)) {
+    return false;
+  }
+
+  if (isContent(node)) {
+    return true;
+  }
+
+  return isCurrentFocusOnContent(focusableTree, node.parentId);
+};
+
+export const contextWithoutScrolling = (
+  source: FocusManager.FocusContext["source"]
+): FocusManager.FocusContext => {
+  return {
+    source,
+    preserveScroll: true,
+  };
+};

package/focusManager/utils.ts

@@ -4,11 +4,11 @@ import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/he
 
 export const getFocusableId = (ref) => ref?.current?.props.id;
 
-type Direction = "up" | "down" | "left" | "right";
-
 const normalizeDirection = (direction) => direction.toLowerCase();
 
-const checkDirection = (direction: Direction) => {
+const checkDirection = (
+  direction: FocusManager.Android.FocusNavigationDirections
+) => {
   invariant(!isNilOrEmpty(direction), "direction should not be empty");
 
   invariant(
@@ -17,19 +17,25 @@ const checkDirection = (direction: Direction) => {
   );
 };
 
-export const toFocusDirection = (direction: Direction) => {
+export const toFocusDirection = (
+  direction: FocusManager.Android.FocusNavigationDirections
+) => {
   checkDirection(direction);
 
   return `nextFocus${capitalize(normalizeDirection(direction))}`;
 };
 
-export const isHorizontalDirection = (direction: Direction) => {
+export const isHorizontalDirection = (
+  direction: FocusManager.Android.FocusNavigationDirections
+) => {
   checkDirection(direction);
 
   return ["left", "right"].includes(normalizeDirection(direction));
 };
 
-export const isVerticalDirection = (direction: Direction) => {
+export const isVerticalDirection = (
+  direction: FocusManager.Android.FocusNavigationDirections
+) => {
   checkDirection(direction);
 
   return ["up", "down"].includes(normalizeDirection(direction));

package/index.d.ts

@@ -137,12 +137,3 @@ declare type AccessibilityState = {
   reduceMotionEnabled: boolean;
   boldTextEnabled: boolean;
 };
-
-declare type AccessibilityProps = {
-  accessibilityLabel?: string;
-  accessibilityHint?: string;
-  "aria-label"?: string;
-  "aria-description"?: string;
-  accessibilityRole?: string;
-  "aria-role"?: string;
-};