@applicaster/zapp-react-native-ui-components 15.1.0-rc.1 → 16.0.0-alpha.9803580571

package/Components/BaseFocusable/index.ios.ts

@@ -22,6 +22,7 @@ type Props = {
   onFocus?: FocusManager.FocusEventCB;
   onBlur?: FocusManager.FocusEventCB;
   selected?: boolean;
+  skipFocusManagerRegistration?: boolean;
 };
 
 export class BaseFocusable<
@@ -61,10 +62,14 @@ export class BaseFocusable<
   }
 
   componentDidMount() {
-    const { id } = this.props;
+    const { id, skipFocusManagerRegistration } = this.props;
     const component = this;
     this.node = this.ref.current;
 
+    if (skipFocusManagerRegistration) {
+      return;
+    }
+
     focusManager.register({
       id,
       component: component,
@@ -118,7 +123,12 @@ export class BaseFocusable<
 
   componentWillUnmount() {
     this._isMounted = false;
-    const { id } = this.props;
+    const { id, skipFocusManagerRegistration } = this.props;
+
+    if (skipFocusManagerRegistration) {
+      return;
+    }
+
     focusManager.unregister(id, { group: this.isGroup || false });
   }
 

package/Components/Cell/FocusableWrapper.tsx

@@ -10,6 +10,7 @@ type Props = {
   children: (focused: boolean) => React.ReactNode;
   onFocus: (arg1: any, index?: number) => void;
   onBlur: Callback;
+  skipFocusManagerRegistration?: boolean;
 };
 
 export const FocusableWrapper = ({
@@ -20,6 +21,7 @@ export const FocusableWrapper = ({
   applyWrapper,
   onFocus,
   onBlur,
+  skipFocusManagerRegistration,
 }: Props) => {
   if (applyWrapper) {
     return (
@@ -34,6 +36,7 @@ export const FocusableWrapper = ({
         // @ts-ignore
         offsetUpdater={noop}
         isFocusable
+        skipFocusManagerRegistration={skipFocusManagerRegistration}
       >
         {(focused) => children(focused)}
       </Focusable>

package/Components/Cell/TvOSCellComponent.tsx

@@ -80,6 +80,7 @@ type Props = {
   componentsMapOffset: number;
   applyFocusableWrapper: boolean;
   hasFocusableInside: boolean;
+  skipFocusManagerRegistration?: boolean;
 };
 
 type State = {
@@ -194,7 +195,6 @@ class TvOSCell extends React.Component<Props, State> {
       groupId,
       component,
       index,
-      componentsMapOffset,
     } = this.props;
 
     this.setScreenLayout(componentAnchorPointY, screenLayout);
@@ -221,8 +221,7 @@ class TvOSCell extends React.Component<Props, State> {
       const totalOffset =
         headerOffset +
         toNumberWithDefaultZero(componentAnchorPointY) +
-        extraAnchorPointYOffset -
-        toNumberWithDefaultZero(componentsMapOffset) +
+        extraAnchorPointYOffset +
         componentMarginTop +
         componentPaddingTop;
 
@@ -266,6 +265,7 @@ class TvOSCell extends React.Component<Props, State> {
       behavior,
       applyFocusableWrapper,
       hasFocusableInside,
+      skipFocusManagerRegistration,
     } = this.props;
 
     const { id } = item;
@@ -291,6 +291,7 @@ class TvOSCell extends React.Component<Props, State> {
             onFocus={handleFocus}
             onBlur={onBlur || this.onBlur}
             applyWrapper={applyFocusableWrapper}
+            skipFocusManagerRegistration={skipFocusManagerRegistration}
           >
             {(focused) => (
               <CellWithFocusable
@@ -305,6 +306,7 @@ class TvOSCell extends React.Component<Props, State> {
                 focused={focused || this.props.focused}
                 behavior={behavior}
                 isFocusable={isFocusable}
+                skipFocusManagerRegistration={skipFocusManagerRegistration}
               />
             )}
           </FocusableWrapper>
@@ -327,6 +329,7 @@ class TvOSCell extends React.Component<Props, State> {
           offsetUpdater={offsetUpdater}
           style={baseCellStyles}
           isFocusable={isFocusable}
+          skipFocusManagerRegistration={skipFocusManagerRegistration}
         >
           {(focused) => (
             <FocusableCell

package/Components/Focusable/Focusable.tsx

@@ -8,6 +8,8 @@ import { withFocusableContext } from "../../Contexts/FocusableGroupContext/withF
 import { StyleSheet, ViewStyle } from "react-native";
 import { AccessibilityManager } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager";
 
+import { isSearchInputId } from "@applicaster/zapp-react-native-utils/searchUtils";
+
 type Props = {
   initialFocus?: boolean;
   id: string;
@@ -106,7 +108,7 @@ class Focusable extends BaseFocusable<Props> {
   onMouseEnter() {
     const { id } = this.props;
 
-    if (id !== "search_input_group_id") {
+    if (!isSearchInputId(id)) {
       this.mouse = true;
       this.props?.handleFocus?.({ mouse: true });
 
@@ -120,7 +122,7 @@ class Focusable extends BaseFocusable<Props> {
   onMouseLeave() {
     const { id } = this.props;
 
-    if (id !== "search_input_group_id") {
+    if (!isSearchInputId(id)) {
       this.mouse = false;
       this.blur(null);
     }

package/Components/Focusable/FocusableTvOS.tsx

@@ -10,8 +10,12 @@ import {
   forceFocusableFocus,
 } from "@applicaster/zapp-react-native-utils/appUtils/focusManager/index.ios";
 import { findNodeHandle, ViewStyle } from "react-native";
+import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 
-function noop() {}
+import {
+  emitFocused,
+  emitNativeRegistered,
+} from "@applicaster/zapp-react-native-utils/appUtils/focusManagerAux/utils/utils.ios";
 
 type Props = {
   id: string;
@@ -39,6 +43,7 @@ type Props = {
   hasReceivedFocus: () => void;
   offsetUpdater: (arg1: string, arg2: number) => number;
   style: ViewStyle;
+  skipFocusManagerRegistration?: boolean;
 };
 
 export class Focusable extends BaseFocusable<Props> {
@@ -53,6 +58,7 @@ export class Focusable extends BaseFocusable<Props> {
     this.nextFocusableReactTags = {};
     this.preferredFocus = this.preferredFocus.bind(this);
     this.measureView = this.measureView.bind(this);
+    this.onRegistered = this.onRegistered.bind(this);
   }
 
   /**
@@ -84,6 +90,9 @@ export class Focusable extends BaseFocusable<Props> {
       });
     }
 
+    const id: string = nativeEvent.itemID;
+    emitFocused(id);
+
     onFocus(nativeEvent);
   }
 
@@ -169,6 +178,13 @@ export class Focusable extends BaseFocusable<Props> {
     });
   }
 
+  onRegistered({ nativeEvent }) {
+    const groupId = nativeEvent?.groupId;
+    const id = nativeEvent?.itemId;
+
+    emitNativeRegistered({ id, groupId, isGroup: false });
+  }
+
   render() {
     const {
       children,
@@ -203,6 +219,7 @@ export class Focusable extends BaseFocusable<Props> {
         focusable={isFocusable}
         {...this.nextFocusableReactTags}
         {...otherProps}
+        onRegistered={this.onRegistered}
       >
         {typeof children === "function" ? children(focused) : children}
       </FocusableItemNative>

package/Components/Focusable/__tests__/__snapshots__/FocusableTvOS.test.tsx.snap

@@ -5,6 +5,7 @@ exports[`FocusableTvOS should render correctly 1`] = `
   groupId={null}
   itemId={null}
   onLayout={[Function]}
+  onRegistered={[Function]}
   onViewBlur={[Function]}
   onViewFocus={[Function]}
   onViewPress={[Function]}

package/Components/FocusableGroup/FocusableTvOS.tsx

@@ -2,6 +2,10 @@ import * as React from "react";
 import { FocusableGroupNative } from "@applicaster/zapp-react-native-ui-components/Components/NativeFocusables";
 import { BaseFocusable } from "@applicaster/zapp-react-native-ui-components/Components/BaseFocusable";
 import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
+import { LayoutContext } from "@applicaster/zapp-react-native-tvos-app/Context/LayoutContext";
+import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useRoute";
+import { isScreenPlayable } from "@applicaster/zapp-react-native-utils/navigationUtils/itemTypes";
+import { emitNativeRegistered } from "@applicaster/zapp-react-native-utils/appUtils/focusManagerAux/utils/utils.ios";
 
 const { log_verbose } = createLogger({
   subsystem: "General",
@@ -33,9 +37,16 @@ type Props = {
   screenData: { screenId: string; parentScreenId: string };
 };
 
-export class FocusableGroup extends BaseFocusable<Props> {
+class FocusableGroupComponent extends BaseFocusable<Props> {
   public readonly isGroup: boolean = true;
 
+  onRegistered = ({ nativeEvent }) => {
+    const groupId = nativeEvent?.groupId;
+    const id = nativeEvent?.itemId;
+
+    emitNativeRegistered({ id, groupId, isGroup: true });
+  };
+
   render() {
     const {
       children,
@@ -68,9 +79,27 @@ export class FocusableGroup extends BaseFocusable<Props> {
         onGroupBlur={onGroupBlur}
         style={style}
         {...otherProps}
+        onRegistered={this.onRegistered}
       >
         {children}
       </FocusableGroupNative>
     );
   }
 }
+
+export const withFocusDisabled = (Component) => {
+  return function WithFocusDisabled(props) {
+    // @ts-ignore
+    const { screenFocusBlocked } = React.useContext(LayoutContext.ReactContext);
+
+    const { pathname } = useRoute();
+
+    const isPlayerPresented = isScreenPlayable(pathname);
+
+    const blockScreenFocus = isPlayerPresented === false && screenFocusBlocked;
+
+    return <Component {...props} isFocusDisabled={blockScreenFocus} />;
+  };
+};
+
+export const FocusableGroup = withFocusDisabled(FocusableGroupComponent);

package/Components/GeneralContentScreen/utils/__tests__/useCurationAPI.test.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react-native";
 
 import {
   getTransformedPreset,

package/Components/HandlePlayable/HandlePlayable.tsx

@@ -1,6 +1,13 @@
 import * as React from "react";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
-import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
+import {
+  useAppData,
+  useContentTypes,
+  usePlugins,
+} from "@applicaster/zapp-react-native-redux/hooks";
+import {
+  useNavigation,
+  useRivers,
+} from "@applicaster/zapp-react-native-utils/reactHooks";
 
 import { BufferAnimation } from "../PlayerContainer/BufferAnimation";
 import { PlayerContainer } from "../PlayerContainer";
@@ -28,12 +35,10 @@ export function HandlePlayable({
   mode,
   groupId,
 }: Props): React.ReactElement | null {
-  const { plugins, contentTypes, rivers, appData } = usePickFromState([
-    "plugins",
-    "contentTypes",
-    "rivers",
-    "appData",
-  ]);
+  const plugins = usePlugins();
+  const contentTypes = useContentTypes();
+  const rivers = useRivers();
+  const appData = useAppData();
 
   const { closeVideoModal } = useNavigation();
 

package/Components/Layout/TV/LayoutBackground.tsx

@@ -1,7 +1,10 @@
 import React from "react";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { getBackgroundImageUrl } from "../utils";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
+import {
+  selectRemoteConfigurations,
+  useAppSelector,
+} from "@applicaster/zapp-react-native-redux";
 
 export const LayoutBackground = ({
   Background,
@@ -12,7 +15,7 @@ export const LayoutBackground = ({
 }) => {
   const theme = useTheme();
 
-  const { remoteConfigurations } = usePickFromState(["remoteConfigurations"]);
+  const remoteConfigurations = useAppSelector(selectRemoteConfigurations);
 
   const backgroundColor = theme.app_background_color;
   const backgroundImageUrl = getBackgroundImageUrl(remoteConfigurations);

package/Components/Layout/TV/NavBarContainer.tsx

@@ -15,12 +15,6 @@ const styles = StyleSheet.create({
     flex: 1,
     width: "100%",
   },
-  themeStyles: {
-    // limits the height of the focusable container of the TopMenuBarTV component
-    // to prevent it from being overlapped by the screen content,
-    // as it makes TopMenuBarTV unfocusable on tvOS
-    maxHeight: 1,
-  },
 });
 
 export const NavBarContainer = ({ children, isVisible, onReady }: Props) => {
@@ -31,10 +25,7 @@ export const NavBarContainer = ({ children, isVisible, onReady }: Props) => {
   }, [onReady]);
 
   return isVisible ? (
-    <View
-      testID="nav-bar-container"
-      style={[styles.container, styles.themeStyles]}
-    >
+    <View testID="nav-bar-container" style={styles.container}>
       {children}
     </View>
   ) : null;

package/Components/Layout/TV/ScreenContainer.tsx

@@ -18,7 +18,7 @@ import {
   routeIsPlayerScreen,
 } from "@applicaster/zapp-react-native-utils/navigationUtils";
 import { isApplePlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import { usePlugins } from "@applicaster/zapp-react-native-redux/hooks";
 import { NavBarContainer } from "./NavBarContainer";
 
 type ComponentsExtraProps = {
@@ -111,11 +111,7 @@ export const ScreenContainer = React.memo(function ScreenContainer({
   const { activeRiver } = navigator;
   const { title, visible } = useNavbarState();
 
-  const { plugins = [] } = usePickFromState([
-    "appState",
-    "remoteConfigurations",
-    "plugins",
-  ]);
+  const plugins = usePlugins();
 
   const navigationProps = getNavigationProps({
     navigator,

package/Components/Layout/TV/__tests__/__snapshots__/NavBarContainer.test.tsx.snap

@@ -3,18 +3,13 @@
 exports[`NavBarContainer renders 1`] = `
 <View
   style={
-    [
-      {
-        "flex": 1,
-        "position": "absolute",
-        "top": 0,
-        "width": "100%",
-        "zIndex": 10,
-      },
-      {
-        "maxHeight": 1,
-      },
-    ]
+    {
+      "flex": 1,
+      "position": "absolute",
+      "top": 0,
+      "width": "100%",
+      "zIndex": 10,
+    }
   }
   testID="nav-bar-container"
 >

package/Components/Layout/TV/__tests__/__snapshots__/ScreenContainer.test.tsx.snap

@@ -14,18 +14,13 @@ exports[`ScreenContainer renders 1`] = `
 >
   <View
     style={
-      [
-        {
-          "flex": 1,
-          "position": "absolute",
-          "top": 0,
-          "width": "100%",
-          "zIndex": 10,
-        },
-        {
-          "maxHeight": 1,
-        },
-      ]
+      {
+        "flex": 1,
+        "position": "absolute",
+        "top": 0,
+        "width": "100%",
+        "zIndex": 10,
+      }
     }
     testID="nav-bar-container"
   >

package/Components/Layout/TV/index.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import { useAppSelector } from "@applicaster/zapp-react-native-redux/hooks";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
 
 import { LayoutContainer } from "./LayoutContainer";
@@ -10,6 +10,7 @@ import { PathnameContext } from "../../../Contexts/PathnameContext";
 import { ScreenDataContext } from "../../../Contexts/ScreenDataContext";
 import { ScreenContextProvider } from "../../../Contexts/ScreenContext";
 import { LayoutBackground } from "./LayoutBackground";
+import { selectAppReady } from "@applicaster/zapp-react-native-redux";
 
 type Components = {
   NavBar: React.ComponentType<any>;
@@ -29,9 +30,7 @@ type Props = {
 const Layout = ({ Components, ComponentsExtraProps, children }: Props) => {
   const navigator = useNavigation();
 
-  const { appState: { appReady = false } = {} } = usePickFromState([
-    "appState",
-  ]);
+  const appReady = useAppSelector(selectAppReady);
 
   if (!appReady) {
     return null;

package/Components/Layout/TV/index.web.tsx

@@ -1,11 +1,11 @@
 import * as React from "react";
-import { pathOr } from "ramda";
 
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import { useAppSelector } from "@applicaster/zapp-react-native-redux/hooks";
 
 import { ScreenLayoutContextProvider } from "./ScreenLayoutContextProvider";
 import { StackNavigator } from "../../Navigator";
 import { LayoutBackground } from "./LayoutBackground";
+import { selectAppReady } from "@applicaster/zapp-react-native-redux";
 
 type Components = {
   NavBar: React.ComponentType<any>;
@@ -17,8 +17,7 @@ type Props = {
 };
 
 const Layout = ({ Components }: Props) => {
-  const { appState } = usePickFromState(["appState"]);
-  const appReady = pathOr(false, ["appReady"], appState);
+  const appReady = useAppSelector(selectAppReady);
 
   if (!appReady) {
     return null;

package/Components/LinkHandler/LinkHandler.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import * as R from "ramda";
 
 import { findPluginByIdentifier } from "@applicaster/zapp-react-native-utils/pluginUtils";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import { usePlugins } from "@applicaster/zapp-react-native-redux/hooks";
 import {
   inflateString,
   objectToReadableString,
@@ -40,7 +40,7 @@ export async function inflateUrl(url) {
 
 export function LinkHandler(props: Props) {
   const screenData = props?.screenData;
-  const { plugins } = usePickFromState(["rivers", "plugins"]);
+  const plugins = usePlugins();
 
   const ScreenPlugin = findPluginByIdentifier(
     WEBVIEW_SCREEN_IDENTIFIER,

package/Components/MasterCell/CONFIG_BUILDER_TO_REACT_COMPONENT.md

@@ -0,0 +1,144 @@
+# Config Builder -> React Component Migration Guide
+
+This guide explains how to migrate MasterCell config-builders to React components incrementally, without breaking existing config-node rendering.
+
+## Why This Exists
+
+MasterCell currently supports config-node builders such as:
+
+```ts
+{
+  type: "View",
+  style: {},
+  additionalProps: {},
+  data: [],
+  elements: []
+}
+```
+
+This is still valid and should continue to work.
+
+For incremental migration, MasterCell also supports inline React nodes:
+
+```ts
+{
+  type: "ReactComponent",
+  style: {},
+  additionalProps: {
+    component: MyComponent
+  }
+}
+```
+
+This lets you migrate one builder at a time.
+
+## Rendering Pipeline
+
+1. Builder returns node config (`type`, `style`, `additionalProps`, `data`, `elements`).
+2. `configInflater` converts `additionalProps` into runtime `props` and resolves `data`.
+3. `elementMapper` renders:
+4. String `type` nodes via component registry (`components[type]`).
+5. `type: "ReactComponent"` nodes via `props.component`.
+
+## Migration Pattern
+
+1. Keep existing builder API unchanged.
+2. Add a dedicated React component for the node being migrated.
+3. Change builder output from string `type` to `type: "ReactComponent"`.
+4. Pass component reference through `additionalProps.component`.
+5. Keep behavioral props unchanged (`testID`, roles, accessibility props).
+6. Set `renderChildren` explicitly:
+7. `false` when React component renders everything itself.
+8. `true` (or omit) when builder still provides `elements` children.
+9. Set `requiresCellUUID: true` only if the component needs `cellUUID`.
+10. Update builder-shape tests and rendering tests together.
+
+## Example Using `TextLabelsContainer.ts`
+
+Current builder (config-node only):
+
+```ts
+export const TextLabelsContainer = ({ actionIdentifier, testID, style, extraProps }) => ({
+  type: "View",
+  additionalProps: {
+    mobileActionRole: "label_container",
+  },
+  elements: [
+    {
+      type: "Text",
+      style,
+      additionalProps: {
+        label: { context: actionIdentifier, name: "label_1" },
+        state: "default",
+        mobileActionRole: "label",
+        testID: testID ? `${testID}-label` : undefined,
+        ...extraProps,
+      },
+    },
+  ],
+});
+```
+
+Incremental migration target:
+
+```ts
+import { TextLabelsContainerView } from "./TextLabelsContainerView";
+
+export const TextLabelsContainer = ({ actionIdentifier, testID, style, extraProps }) => ({
+  type: "ReactComponent",
+  additionalProps: {
+    component: TextLabelsContainerView,
+    renderChildren: false,
+    mobileActionRole: "label_container",
+    actionIdentifier,
+    testID,
+    textStyle: style,
+    textProps: extraProps,
+  },
+});
+```
+
+And React component:
+
+```tsx
+export const TextLabelsContainerView = ({
+  actionIdentifier,
+  testID,
+  textStyle,
+  textProps,
+  mobileActionRole,
+}) => (
+  <View mobileActionRole={mobileActionRole}>
+    <Text
+      style={textStyle}
+      label={{ context: actionIdentifier, name: "label_1" }}
+      state="default"
+      mobileActionRole="label"
+      testID={testID ? `${testID}-label` : undefined}
+      {...textProps}
+    />
+  </View>
+);
+```
+
+This keeps external behavior and props contract intact while moving implementation to React.
+
+## Rules for Safe Incremental Migration
+
+1. Do not change role markers used by parent logic (for example `mobileActionRole`).
+2. Do not rename `testID` contracts during migration.
+3. Keep output shape stable for parent builders (`null` handling, `elements` presence).
+4. Keep data-mapping semantics identical (`label`, `state`, `entry`, etc.).
+5. Migrate one node per PR where possible.
+
+## Testing Checklist
+
+1. Builder test: node type and required props (`component`, role, `testID`) are correct.
+2. Rendering test: `configInflater + elementMapper` still renders expected UI.
+3. Behavior test: parent container logic that clones/filters children still works.
+4. Regression test: hidden/empty states still return `null` as before.
+
+## Important Limitation
+
+`additionalProps.component` is a function reference and is suitable for local JS-built trees.
+If a tree must be fully serialized JSON, use a string `componentKey` and resolve it in a registry instead of storing a function directly.