@applicaster/zapp-react-native-ui-components 15.0.0-alpha.2239032089 → 15.0.0-alpha.2882475305

package/Components/Cell/FocusableWrapper.tsx

@@ -0,0 +1,44 @@
+import * as React from "react";
+import { Focusable } from "@applicaster/zapp-react-native-ui-components/Components/Focusable/FocusableTvOS";
+import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
+
+type Props = {
+  id: string;
+  groupId: string;
+  isParallaxDisabled: boolean;
+  applyWrapper: boolean;
+  children: (focused: boolean) => React.ReactNode;
+  onFocus: (arg1: any, index?: number) => void;
+  onBlur: Callback;
+};
+
+export const FocusableWrapper = ({
+  id,
+  groupId,
+  isParallaxDisabled,
+  children,
+  applyWrapper,
+  onFocus,
+  onBlur,
+}: Props) => {
+  if (applyWrapper) {
+    return (
+      <Focusable
+        id={id}
+        groupId={groupId}
+        isParallaxDisabled={isParallaxDisabled}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        willReceiveFocus={noop}
+        hasReceivedFocus={noop}
+        // @ts-ignore
+        offsetUpdater={noop}
+        isFocusable
+      >
+        {(focused) => children(focused)}
+      </Focusable>
+    );
+  }
+
+  return <>{children(false)}</>;
+};

package/Components/Cell/TvOSCellComponent.tsx

@@ -1,6 +1,9 @@
 import * as React from "react";
 import * as R from "ramda";
 import { View, StyleSheet } from "react-native";
+import { first, filter } from "rxjs/operators";
+
+import { compose } from "@applicaster/zapp-react-native-utils/utils";
 
 import { Focusable } from "@applicaster/zapp-react-native-ui-components/Components/Focusable/FocusableTvOS";
 import { FocusableCell } from "@applicaster/zapp-react-native-ui-components/Components/FocusableCell";
@@ -9,7 +12,11 @@ import { SCREEN_TYPES } from "@applicaster/zapp-react-native-utils/navigationUti
 import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focusManager";
 import { sendSelectCellEvent } from "@applicaster/zapp-react-native-utils/analyticsUtils";
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
+import { toBooleanWithDefaultTrue } from "@applicaster/zapp-react-native-utils/booleanUtils";
 import { CellWithFocusable } from "./CellWithFocusable";
+import { FocusableWrapper } from "./FocusableWrapper";
+
+import { focusableButtonsRegistration$ } from "@applicaster/zapp-react-native-utils/appUtils/focusManagerAux/utils/utils.ios";
 
 type Props = {
   item: ZappEntry;
@@ -66,6 +73,8 @@ type Props = {
   shouldUpdate: boolean;
   behavior: Behavior;
   componentsMapOffset: number;
+  applyFocusableWrapper: boolean;
+  hasFocusableInside: boolean;
 };
 
 type State = {
@@ -82,7 +91,7 @@ const baseCellStyles = {
   flex: 1,
 } as const;
 
-export class TvOSCellComponent extends React.Component<Props, State> {
+class TvOSCell extends React.Component<Props, State> {
   cell: any;
   target: any;
   layout: any;
@@ -239,6 +248,8 @@ export class TvOSCellComponent extends React.Component<Props, State> {
       groupId,
       isFocusable,
       behavior,
+      applyFocusableWrapper,
+      hasFocusableInside,
     } = this.props;
 
     const { id } = item;
@@ -254,24 +265,33 @@ export class TvOSCellComponent extends React.Component<Props, State> {
       this.onFocus(arg1, index);
     };
 
-    const hasFocusableInside = CellRenderer.hasFocusableInside?.(item);
-
     if (hasFocusableInside) {
       return (
         <View onLayout={this.onLayout}>
-          <CellWithFocusable
-            CellRenderer={CellRenderer}
-            item={item}
+          <FocusableWrapper
             id={focusableId}
-            groupId={(groupId || component?.id).toString()}
+            groupId={String(groupId || component?.id)}
+            isParallaxDisabled={this.layout?.width > 1740}
             onFocus={handleFocus}
-            index={index}
-            scrollTo={this.scrollTo}
-            preferredFocus={preferredFocus}
-            focused={this.props.focused}
-            behavior={behavior}
-            isFocusable={isFocusable}
-          />
+            onBlur={onBlur || this.onBlur}
+            applyWrapper={applyFocusableWrapper}
+          >
+            {(focused) => (
+              <CellWithFocusable
+                CellRenderer={CellRenderer}
+                item={item}
+                id={focusableId}
+                groupId={(groupId || component?.id).toString()}
+                onFocus={handleFocus}
+                index={index}
+                scrollTo={this.scrollTo}
+                preferredFocus={preferredFocus}
+                focused={focused || this.props.focused}
+                behavior={behavior}
+                isFocusable={isFocusable}
+              />
+            )}
+          </FocusableWrapper>
         </View>
       );
     }
@@ -309,3 +329,49 @@ export class TvOSCellComponent extends React.Component<Props, State> {
     );
   }
 }
+
+export function withFocusableWrapperHOC(Component) {
+  return function WrappedComponent(props) {
+    const [focusableViewIsRendered, setFocusableViewIsRendered] =
+      React.useState(false);
+
+    const { CellRenderer, item, groupId, component } = props;
+
+    const isFocusable = toBooleanWithDefaultTrue(props?.isFocusable);
+
+    const focusableGroupId = String(groupId || component?.id);
+
+    const hasFocusableInside = CellRenderer.hasFocusableInside?.(item);
+
+    React.useEffect(() => {
+      // start waiting any first registration of FocusableButton inside this focusableGroup
+      // after it we could get rid of applying focusable-wrapper
+      const subscription = focusableButtonsRegistration$(focusableGroupId)
+        .pipe(
+          filter(() => isFocusable),
+          first()
+        )
+        .subscribe(() => {
+          setFocusableViewIsRendered(true);
+        });
+
+      return () => {
+        subscription.unsubscribe();
+      };
+    }, [isFocusable, focusableGroupId]);
+
+    const applyFocusableWrapper = React.useMemo(() => {
+      return isFocusable && hasFocusableInside && !focusableViewIsRendered;
+    }, [isFocusable, hasFocusableInside, focusableViewIsRendered]);
+
+    return (
+      <Component
+        {...props}
+        applyFocusableWrapper={applyFocusableWrapper}
+        hasFocusableInside={hasFocusableInside}
+      />
+    );
+  };
+}
+
+export const TvOSCellComponent = compose(withFocusableWrapperHOC)(TvOSCell);

package/Components/Focusable/Focusable.tsx

@@ -8,8 +8,6 @@ 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/search-screen/src/tv/utils";
-
 type Props = {
   initialFocus?: boolean;
   id: string;
@@ -108,7 +106,7 @@ class Focusable extends BaseFocusable<Props> {
   onMouseEnter() {
     const { id } = this.props;
 
-    if (!isSearchInputId(id)) {
+    if (id !== "search_input_group_id") {
       this.mouse = true;
       this.props?.handleFocus?.({ mouse: true });
 
@@ -122,7 +120,7 @@ class Focusable extends BaseFocusable<Props> {
   onMouseLeave() {
     const { id } = this.props;
 
-    if (!isSearchInputId(id)) {
+    if (id !== "search_input_group_id") {
       this.mouse = false;
       this.blur(null);
     }

package/Components/Focusable/FocusableTvOS.tsx

@@ -10,9 +10,8 @@ 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";
 
-import { emitFocused } from "@applicaster/zapp-react-native-utils/appUtils/focusManagerAux/utils/utils.ios";
+function noop() {}
 
 type Props = {
   id: string;
@@ -85,9 +84,6 @@ export class Focusable extends BaseFocusable<Props> {
       });
     }
 
-    const id: string = nativeEvent.itemID;
-    emitFocused(id);
-
     onFocus(nativeEvent);
   }
 

package/Components/FocusableGroup/FocusableTvOS.tsx

@@ -34,11 +34,6 @@ type Props = {
 };
 
 export class FocusableGroup extends BaseFocusable<Props> {
-  constructor(props) {
-    super(props);
-    this.isGroup = true;
-  }
-
   render() {
     const {
       children,

package/Components/GeneralContentScreen/utils/useCurationAPI.ts

@@ -142,17 +142,15 @@ export const useCurationAPI = (
       const url = path(SOURCE_PATH, component);
       const mapping = path(MAPPING_PATH, component);
 
-      map[component.id] = mapping
-        ? getInflatedDataSourceUrl({
-            source: url,
-            contexts: {
-              entry: entryContext,
-              screen: screenContext,
-              search: getSearchContext(searchContext, mapping),
-            },
-            mapping,
-          })
-        : url;
+      map[component.id] = getInflatedDataSourceUrl({
+        source: url,
+        contexts: {
+          entry: entryContext,
+          screen: screenContext,
+          search: getSearchContext(searchContext, mapping),
+        },
+        mapping,
+      });
     });
 
     return map;

package/Components/River/TV/River.tsx

@@ -4,7 +4,6 @@ import * as React from "react";
 import { Text } from "react-native";
 import * as R from "ramda";
 
-import { isNil } from "@applicaster/zapp-react-native-utils/utils";
 import { GeneralContentScreen } from "../../GeneralContentScreen";
 import { ScreenResolver } from "@applicaster/zapp-react-native-ui-components/Components/ScreenResolver";
 import { utilsLogger } from "@applicaster/zapp-react-native-utils/logger";
@@ -25,7 +24,6 @@ type Props = {
   isInsideContainer?: boolean;
   extraAnchorPointYOffset: number;
   river?: ZappRiver | ZappEntry;
-  groupId: string;
 };
 
 export const River = (props: Props) => {
@@ -37,7 +35,6 @@ export const River = (props: Props) => {
     componentsMapExtraProps,
     isInsideContainer,
     extraAnchorPointYOffset,
-    groupId,
   } = props;
 
   const { title: screenTitle, summary: screenSummary } = useNavbarState();
@@ -55,7 +52,7 @@ export const River = (props: Props) => {
   );
 
   const stringOrEmpty = (value: string | number | undefined): string =>
-    isNil(value) ? "" : String(value);
+    R.isNil(value) ? "" : String(value);
 
   React.useEffect(() => {
     if (!isInsideContainer) {
@@ -95,10 +92,8 @@ export const River = (props: Props) => {
       <ScreenResolver
         screenType={river.type}
         screenId={screenId}
-        screenData={Object.assign(river || {}, { groupId: extraData?.groupId })}
-        componentsMapExtraProps={Object.assign(componentsMapExtraProps || {}, {
-          groupId,
-        })}
+        screenData={R.merge(river, { groupId: extraData?.groupId })}
+        componentsMapExtraProps={componentsMapExtraProps}
         {...extraData}
       />
     );
@@ -111,7 +106,6 @@ export const River = (props: Props) => {
       isScreenWrappedInContainer={isInsideContainer}
       extraAnchorPointYOffset={extraAnchorPointYOffset}
       componentsMapExtraProps={componentsMapExtraProps}
-      groupId={groupId}
     />
   );
 };

package/Components/River/TV/index.tsx

@@ -1,11 +1,11 @@
 import { compose } from "ramda";
 import { River as RiverComponent } from "./River";
+import { withTvEventHandler } from "./withTVEventHandler";
 import { withComponentsMapOffsetContext } from "../../../Contexts/ComponentsMapOffsetContext";
 import { withRiverDataLoader } from "./withRiverDataLoader";
-import { withFocusableGroupForContent } from "./withFocusableGroupForContent";
 
 export const River = compose(
+  withTvEventHandler,
   withComponentsMapOffsetContext,
-  withRiverDataLoader,
-  withFocusableGroupForContent
+  withRiverDataLoader
 )(RiverComponent);

package/Components/River/TV/withTVEventHandler.tsx

@@ -0,0 +1,27 @@
+/* eslint max-len: off */
+
+import React from "react";
+import { TVEventHandlerComponent } from "@applicaster/zapp-react-native-tvos-ui-components/Components/TVEventHandlerComponent";
+import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
+
+export const withTvEventHandler = (Component) => {
+  return function WithTVEventHandler(props) {
+    const navigator = useNavigation();
+
+    const remoteHandler = (event) => {
+      const { eventType } = event;
+
+      const canGoBack = navigator.canGoBack();
+
+      if (eventType === "menu" && canGoBack) {
+        navigator.goBack();
+      }
+    };
+
+    return (
+      <TVEventHandlerComponent tvEventHandler={remoteHandler}>
+        <Component {...props} />
+      </TVEventHandlerComponent>
+    );
+  };
+};

package/Components/Screen/TV/hooks/useInitialFocus.ts

@@ -10,6 +10,8 @@ import {
   setFocusOnMenu,
 } from "@applicaster/zapp-react-native-utils/appUtils/focusManagerAux";
 
+import { waitUntilScreenRevealManagerIsReady } from "@applicaster/zapp-react-native-ui-components/Components/ScreenRevealManager/utils";
+
 type Return =
   | {
       onContent: true;
@@ -57,14 +59,22 @@ export const useInitialFocus = (): void => {
   React.useEffect(() => {
     const initialFocus = getInitialFocus(focusOnContent, isNavBarVisible);
 
-    if (initialFocus.onContent) {
-      setFocusOnContent(currentRoute);
+    if (initialFocus.onMenu) {
+      setFocusOnMenu(currentRoute);
 
       return;
     }
 
-    if (initialFocus.onMenu) {
-      setFocusOnMenu(currentRoute);
+    if (initialFocus.onContent) {
+      const subscription = waitUntilScreenRevealManagerIsReady().subscribe(
+        () => {
+          setFocusOnContent(currentRoute);
+        }
+      );
+
+      return () => {
+        subscription.unsubscribe();
+      };
     }
   }, []);
 };

package/Components/Screen/__tests__/__snapshots__/Screen.test.tsx.snap

@@ -2,6 +2,7 @@
 
 exports[`<Screen Component /> when the navbar should be hidden renders correctly 1`] = `
 <View
+  importantForAccessibility="yes"
   style={
     {
       "backgroundColor": "blue",
@@ -34,6 +35,7 @@ exports[`<Screen Component /> when the navbar should be hidden renders correctly
 
 exports[`<Screen Component /> when the navbar should show renders correctly 1`] = `
 <View
+  importantForAccessibility="yes"
   style={
     {
       "backgroundColor": "blue",

package/Components/Screen/index.tsx

@@ -1,6 +1,6 @@
 /// <reference types="@applicaster/applicaster-types" />
 import React from "react";
-import { View } from "react-native";
+import { AccessibilityInfo, findNodeHandle, View } from "react-native";
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
@@ -12,6 +12,7 @@ import {
 } from "@applicaster/zapp-react-native-utils/navigationUtils";
 import {
   useCurrentScreenData,
+  useIsScreenActive,
   useNavbarState,
   useNavigation,
   useRoute,
@@ -57,8 +58,8 @@ export function Screen(_props: Props) {
   const hasMenu = shouldNavBarDisplayMenu(currentRiver, plugins);
 
   const navBarProps = React.useMemo<MobileNavBarPluginProps | null>(
-    getNavBarProps(currentRiver, pathname, title),
-    [currentRiver, pathname]
+    () => getNavBarProps(currentRiver, pathname, title),
+    [currentRiver, pathname, title]
   );
 
   const NavBar = React.useMemo(
@@ -89,13 +90,29 @@ export function Screen(_props: Props) {
     [theme.app_background_color, backgroundColor]
   );
 
-  // Set ready state when screen is rotated to desired orientation
+  const isActive = useIsScreenActive();
+
+  const ref = React.useRef(null);
   const isReady = useWaitForValidOrientation();
 
+  React.useEffect(() => {
+    if (ref.current && isActive && isReady) {
+      const nodeHandle = findNodeHandle(ref.current);
+
+      if (nodeHandle != null) {
+        AccessibilityInfo.setAccessibilityFocus(nodeHandle);
+      }
+    }
+  }, [isActive, isReady]);
+
   // We prevent rendering of the screen until UI is actually rotated to screen desired orientation.
   // This saves unnecessary re-renders and user will not see distorted aspect screen.
   return (
-    <View style={style}>
+    <View
+      ref={ref}
+      style={style}
+      importantForAccessibility={!isActive ? "no-hide-descendants" : "yes"}
+    >
       {isReady ? (
         <>
           {navBarProps ? <NavBar {...navBarProps} hasMenu={hasMenu} /> : null}

package/Components/ScreenResolver/index.tsx

@@ -16,6 +16,7 @@ import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { useScreenAnalytics } from "@applicaster/zapp-react-native-utils/analyticsUtils/helpers/hooks";
 
 import { useCallbackActions } from "@applicaster/zapp-react-native-utils/zappFrameworkUtils/HookCallback/useCallbackActions";
+import { ScreenResultCallback } from "@applicaster/zapp-react-native-utils/zappFrameworkUtils/HookCallback/callbackNavigationAction";
 
 const logger = componentsLogger.addSubsystem("ScreenResolver");
 
@@ -26,6 +27,7 @@ type Props = {
   feedId?: string;
   feedTitle?: string;
   focused?: boolean;
+  resultCallback?: ScreenResultCallback;
   parentFocus?: {
     nextFocusDown?: React.Ref<any>;
     nextFocusRight?: React.Ref<any>;
@@ -61,13 +63,17 @@ export function ScreenResolverComponent(props: Props) {
 
   React.useEffect(() => {
     setScreenContext(rivers[screenId]);
-  }, [screenId]);
+  }, [rivers, screenId, setScreenContext]);
 
-  const callbackAction = useCallbackActions(
+  const parentCallback = props.resultCallback;
+
+  const screenAction = useCallbackActions(
     hookPlugin || screenData,
     screenData.callback
   );
 
+  const callbackAction = parentCallback || screenAction;
+
   const ScreenPlugin =
     findPluginByType(screenType, plugins, { skipWarning: true }) ||
     findPluginByIdentifier(screenType, plugins) ||

package/Components/ScreenRevealManager/utils/index.ts

@@ -0,0 +1,23 @@
+import { ReplaySubject } from "rxjs";
+import { pairwise, filter, first } from "rxjs/operators";
+
+// we are interested in last 2 events, because we wait transition from <false> to <true>
+const screenRevealManagerSubject$ = new ReplaySubject<boolean>(2);
+
+export const emitScreenRevealManagerIsReadyToShow = () => {
+  screenRevealManagerSubject$.next(true);
+};
+
+export const emitScreenRevealManagerIsNotReadyToShow = () => {
+  screenRevealManagerSubject$.next(false);
+};
+
+export const waitUntilScreenRevealManagerIsReady = () => {
+  return screenRevealManagerSubject$.pipe(
+    pairwise(), // emit consecutive pairs: [prev, curr]
+    filter(
+      ([previousIsReady, currentIsReady]) => !previousIsReady && currentIsReady
+    ), // detect transition from not_ready to ready
+    first()
+  );
+};

package/Components/ScreenRevealManager/withScreenRevealManager.tsx

@@ -5,6 +5,10 @@ import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils"
 import { useRefWithInitialValue } from "@applicaster/zapp-react-native-utils/reactHooks/state/useRefWithInitialValue";
 
 import { ScreenRevealManager } from "./ScreenRevealManager";
+import {
+  emitScreenRevealManagerIsReadyToShow,
+  emitScreenRevealManagerIsNotReadyToShow,
+} from "./utils";
 
 const flex = platformSelect({
   tvos: 1,
@@ -43,6 +47,14 @@ export const withScreenRevealManager = (Component) => {
       () => new Animated.Value(HIDDEN)
     );
 
+    React.useEffect(() => {
+      if (!isReadyToShow) {
+        emitScreenRevealManagerIsNotReadyToShow();
+      } else {
+        emitScreenRevealManagerIsReadyToShow();
+      }
+    }, [isReadyToShow]);
+
     React.useEffect(() => {
       if (isReadyToShow) {
         Animated.timing(opacityRef.current, {

package/Components/ZappFrameworkComponents/BarView/BarView.tsx

@@ -1,6 +1,5 @@
 import React from "react";
-import { StyleSheet } from "react-native";
-import { SafeAreaView } from "react-native-safe-area-context";
+import { StyleSheet, View } from "react-native";
 
 import { useIsRTL } from "@applicaster/zapp-react-native-utils/localizationUtils";
 import CloseButton from "./Buttons/CloseButton";
@@ -45,15 +44,14 @@ const BarView = ({ screenStyles, barState = defaultState }: Props) => {
   );
 
   return (
-    <SafeAreaView
-      edges={["top", "left", "right"]}
+    <View
       style={[style.view, isRTL ? style.rtlStyle : {}]}
-      testID="BarView-safeAreaView"
+      testID="BarView-Container"
     >
       {backButton}
       <BarTitle title={barState.title} screenStyles={screenStyles} />
       {closeButton}
-    </SafeAreaView>
+    </View>
   );
 };
 

package/Components/ZappFrameworkComponents/BarView/__tests__/BarView.test.tsx

@@ -46,7 +46,7 @@ describe("BarView", () => {
       <BarView screenStyles={screenStyles} barState={barState} />
     );
 
-    expect(getByTestId("BarView-safeAreaView").props.style).toContainEqual({
+    expect(getByTestId("BarView-Container").props.style).toContainEqual({
       transform: [{ scaleX: -1 }],
     });
   });
@@ -58,7 +58,7 @@ describe("BarView", () => {
       <BarView screenStyles={screenStyles} barState={barState} />
     );
 
-    expect(getByTestId("BarView-safeAreaView").props.style).not.toContainEqual({
+    expect(getByTestId("BarView-Container").props.style).not.toContainEqual({
       transform: [{ scaleX: -1 }],
     });
   });

package/Decorators/RiverFeedLoader/utils/getDatasourceUrl.ts

@@ -24,16 +24,12 @@ export const getDatasourceUrl: (
   ) => {
     const { source, mapping } = R.propOr({}, ["data"], component);
 
-    if (mapping) {
-      const contexts = {
-        entry: entryContext,
-        screen: screenContext || screenData,
-        search: getSearchContext(searchContext, mapping),
-      };
+    const contexts = {
+      entry: entryContext,
+      screen: screenContext || screenData,
+      search: getSearchContext(searchContext, mapping),
+    };
 
-      return getInflatedDataSourceUrl({ source, mapping, contexts });
-    }
-
-    return source;
+    return getInflatedDataSourceUrl({ source, mapping, contexts });
   }
 );

package/events/index.ts

@@ -5,6 +5,4 @@ export enum QBUIComponentEvents {
   scrollVerticallyToInitialOffset = "scrollVerticallyToInitialOffset",
   focusOnSelectedTab = "focusOnSelectedTab",
   focusOnSelectedTopMenuItem = "focusOnSelectedTopMenuItem",
-  focusOnHomeTopMenuItem = "focusOnHomeTopMenuItem",
-  topMenuBarTV_onLayout = "topMenuBarTV_onLayout",
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "15.0.0-alpha.2239032089",
+  "version": "15.0.0-alpha.2882475305",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,10 +28,10 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "15.0.0-alpha.2239032089",
-    "@applicaster/zapp-react-native-bridge": "15.0.0-alpha.2239032089",
-    "@applicaster/zapp-react-native-redux": "15.0.0-alpha.2239032089",
-    "@applicaster/zapp-react-native-utils": "15.0.0-alpha.2239032089",
+    "@applicaster/applicaster-types": "15.0.0-alpha.2882475305",
+    "@applicaster/zapp-react-native-bridge": "15.0.0-alpha.2882475305",
+    "@applicaster/zapp-react-native-redux": "15.0.0-alpha.2882475305",
+    "@applicaster/zapp-react-native-utils": "15.0.0-alpha.2882475305",
     "promise": "^8.3.0",
     "url": "^0.11.0",
     "uuid": "^3.3.2"

package/Components/River/TV/withFocusableGroupForContent.tsx

@@ -1,60 +0,0 @@
-import * as React from "react";
-import { View } from "react-native";
-
-import { FocusableGroup } from "@applicaster/zapp-react-native-ui-components/Components/FocusableGroup";
-import { riverFocusManager } from "@applicaster/zapp-react-native-utils/appUtils/RiverFocusManager";
-import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
-
-import { useSubscriberFor } from "@applicaster/zapp-react-native-utils/reactHooks/useSubscriberFor";
-import { QBUIComponentEvents } from "@applicaster/zapp-react-native-ui-components/events";
-
-import { QUICK_BRICK_TOP_CONTAINER } from "@applicaster/quick-brick-core/const";
-
-const useTopMenuLayout = () => {
-  const [layout, setLayout] = React.useState(undefined);
-
-  const handleLayout = React.useCallback((layout) => {
-    setLayout(layout);
-  }, []);
-
-  useSubscriberFor(QBUIComponentEvents.topMenuBarTV_onLayout, handleLayout);
-
-  return layout;
-};
-
-export const withFocusableGroupForContent = (Component) => {
-  return function (props) {
-    const { screenId, isInsideContainer } = props;
-
-    const topMenuLayout = useTopMenuLayout();
-
-    const focusableId = React.useMemo(
-      () =>
-        riverFocusManager.screenFocusableGroupId({
-          screenId,
-          isInsideContainer,
-        }),
-      [screenId, isInsideContainer]
-    );
-
-    if (isInsideContainer) {
-      return <Component {...props} />;
-    }
-
-    const topMenuHeight = toNumberWithDefaultZero(topMenuLayout?.height);
-
-    return (
-      <FocusableGroup
-        key={focusableId}
-        id={focusableId}
-        // workaround to avoid intersection between FocusableGroup for content and FocusableGroup for top-menu
-        style={{ flex: 1, marginTop: topMenuHeight }}
-        groupId={QUICK_BRICK_TOP_CONTAINER}
-      >
-        <View style={{ flex: 1, marginTop: -1 * topMenuHeight }}>
-          <Component {...props} groupId={focusableId} />
-        </View>
-      </FocusableGroup>
-    );
-  };
-};