From 72243da10c06706afca4adf2424a7561fc538c4d Mon Sep 17 00:00:00 2001
From: aurimasmi <aurimasmickys@gmail.com>
Date: Fri, 22 Sep 2023 15:28:37 +0300
Subject: [PATCH 1/4] feat: focus viewgroup childs by focus group key

---
 .../src/screens/tests/viewGroup.tsx           |  4 +--
 .../create/src/focusManager/model/view.ts     | 11 ++++++
 .../src/focusManager/model/viewGroup.ts       | 35 +++++++++++++++++--
 .../create/src/focusManager/service/core.ts   | 21 +++++++++--
 packages/create/src/focusManager/types.ts     |  2 ++
 5 files changed, 67 insertions(+), 6 deletions(-)

diff --git a/packages/app-harness/src/screens/tests/viewGroup.tsx b/packages/app-harness/src/screens/tests/viewGroup.tsx
index 55d7e749..e0ad4bbf 100644
--- a/packages/app-harness/src/screens/tests/viewGroup.tsx
+++ b/packages/app-harness/src/screens/tests/viewGroup.tsx
@@ -11,7 +11,7 @@ const ViewGroup = () => {
         <Screen style={{ backgroundColor: '#222222' }}>
             <View
                 style={{ top: Ratio(20), flex: 1 }}
-                focusOptions={{ nextFocusDown: 'test-group-btn2', focusKey: 'test-group', group: 'test-group' }}
+                focusOptions={{ nextFocusDown: 'test-group2', focusKey: 'test-group', group: 'test-group' }}
             >
                 <Button
                     focusOptions={{ focusKey: 'test-group-btn' }}
@@ -22,7 +22,7 @@ const ViewGroup = () => {
             </View>
             <View
                 style={{ top: Ratio(20), flex: 1 }}
-                focusOptions={{ nextFocusUp: 'test-group-btn', group: 'test-group2' }}
+                focusOptions={{ nextFocusUp: 'test-group', group: 'test-group2', focusKey: 'test-group2' }}
             >
                 <Button
                     focusOptions={{ focusKey: 'test-group-btn2' }}
diff --git a/packages/create/src/focusManager/model/view.ts b/packages/create/src/focusManager/model/view.ts
index 4cd23fdf..8edb8f60 100644
--- a/packages/create/src/focusManager/model/view.ts
+++ b/packages/create/src/focusManager/model/view.ts
@@ -197,6 +197,17 @@ class View extends FocusModel {
             }
         }
 
+        if (value) {
+            let parent = this.getParent();
+            while (parent) {
+                if (parent instanceof ViewGroup) {
+                    parent.setCurrentFocus(this);
+                    break;
+                }
+                parent = parent?.getParent();
+            }
+        }
+
         return this;
     }
 
diff --git a/packages/create/src/focusManager/model/viewGroup.ts b/packages/create/src/focusManager/model/viewGroup.ts
index 4daaf509..1118a26e 100644
--- a/packages/create/src/focusManager/model/viewGroup.ts
+++ b/packages/create/src/focusManager/model/viewGroup.ts
@@ -1,13 +1,15 @@
-import { View } from 'react-native';
-import FocusModel from './abstractFocusModel';
+import FocusModel, { MODEL_TYPES } from './abstractFocusModel';
 import Event, { EVENT_TYPES } from '../events';
 import { CoreManager } from '../..';
 import { MutableRefObject } from 'react';
 import { ViewGroupProps } from '../types';
+import View from './view';
+import RecyclerView from './recycler';
 
 class ViewGroup extends FocusModel {
     private _group?: string;
     private _focusKey?: string;
+    private _currentFocus: View | null = null;
 
     constructor(params: Omit<ViewGroupProps & ViewGroupProps['focusOptions'], 'ref' | 'focusOptions'>) {
         super(params);
@@ -48,6 +50,24 @@ class ViewGroup extends FocusModel {
 
     // END EVENTS
 
+    public getFirstFocusableInViewGroup = (): View | null => {
+        if (CoreManager.isFocusManagerEnabled()) {
+            if (this._currentFocus) return this._currentFocus;
+
+            const firstChildren = this._children.find((ch) => [MODEL_TYPES.ROW, MODEL_TYPES.GRID, MODEL_TYPES.VIEW].includes(ch.getType() as never))
+
+            if (firstChildren && firstChildren.getType() === MODEL_TYPES.VIEW) {
+                return firstChildren as View;
+            } else if (firstChildren) {
+                const recycler = firstChildren as RecyclerView;
+                if (recycler.getFocusedView()) return recycler.getFocusedView();
+                return recycler.getChildren[0];
+            }
+        }
+
+        return null;
+    };
+
     public getGroup() {
         return this._group;
     }
@@ -71,6 +91,17 @@ class ViewGroup extends FocusModel {
     public getNode(): MutableRefObject<View> {
         return this.node;
     }
+
+    public setCurrentFocus(model: View | null): this {
+        this._currentFocus = model;
+
+        return this;
+    }
+
+    public getCurrentFocus(): View | null {
+        return this._currentFocus;
+    }
+
 }
 
 export default ViewGroup;
diff --git a/packages/create/src/focusManager/service/core.ts b/packages/create/src/focusManager/service/core.ts
index 6333ead6..17f8392e 100644
--- a/packages/create/src/focusManager/service/core.ts
+++ b/packages/create/src/focusManager/service/core.ts
@@ -5,11 +5,12 @@ import Scroller from './scroller';
 import Logger from './logger';
 import FocusModel, { MODEL_TYPES } from '../model/abstractFocusModel';
 import { DIRECTIONS } from '../constants';
-import { ClosestNodeOutput, FocusDirection, ScreenType, ViewType } from '../types';
+import { ClosestNodeOutput, FocusDirection, ScreenType, ViewType, ViewGroupType } from '../types';
 
 class CoreManager {
     private _focusAwareElements: Record<string, FocusModel> = {};
     private _views: Record<string, ViewType> = {};
+    private _viewGroups: Record<string, ViewGroupType> = {};
     private _screens: Record<string, ScreenType> = {};
     private _currentFocus: ViewType | null = null;
     private _debuggerEnabled = false;
@@ -60,6 +61,8 @@ class CoreManager {
             this._screens[model.getId()] = model as ScreenType;
         } else if (model.getType() === MODEL_TYPES.VIEW) {
             this._views[model.getId()] = model as ViewType;
+        } else if (model.getType() === MODEL_TYPES.VIEW_GROUP) {
+            this._viewGroups[model.getId()] = model as ViewGroupType;
         }
 
         Object.keys(this._focusAwareElements).forEach((k) => {
@@ -150,8 +153,21 @@ class CoreManager {
             const screen = Object.values(this._screens).find(
                 (model) => model.getFocusKey() === focusKey && model.isInForeground()
             );
+            
             if (screen) {
                 screen.setFocus(screen.getFirstFocusableOnScreen());
+                return;
+            }
+
+            const viewGroup = Object.values(this._viewGroups).find(
+                (model) => model.getFocusKey() === focusKey && model.isInForeground()
+            );
+
+            if (viewGroup) {
+                const element = viewGroup.getFirstFocusableInViewGroup();
+                if (element) {
+                    this.executeFocus(element);
+                }
             }
         }
     };
@@ -270,6 +286,7 @@ class CoreManager {
             for (const key in parents) {
                 const p = parents[key];
                 const _nextForcedFocusKey = this.getNextForcedFocusKey(p, direction);
+                console.log({_nextForcedFocusKey})
                 if (_nextForcedFocusKey) {
                     this.setFocus(_nextForcedFocusKey);
                     return null;
@@ -310,7 +327,7 @@ class CoreManager {
 
     public pickActiveForcedFocusContext(nextForcedFocusKey: string | string[]): string | null {
         const isActive = (focusKey: string) =>
-            Object.values({ ...this._views, ...this._screens }).find(
+            Object.values({ ...this._views, ...this._screens, ...this._viewGroups }).find(
                 (model) => model.getFocusKey() === focusKey && model.isInForeground()
             );
 
diff --git a/packages/create/src/focusManager/types.ts b/packages/create/src/focusManager/types.ts
index ec8391ec..19998334 100644
--- a/packages/create/src/focusManager/types.ts
+++ b/packages/create/src/focusManager/types.ts
@@ -17,6 +17,7 @@ import View from './model/view';
 import { SCREEN_STATES, VIEWPORT_ALIGNMENT } from './model/screen';
 import Screen from './model/screen';
 import { DIRECTIONS } from './constants';
+import ViewGroup from './model/viewGroup';
 
 export type FocusDirection = typeof DIRECTIONS[keyof typeof DIRECTIONS];
 export type WindowAlignment = 'both-edge' | 'low-edge';
@@ -24,6 +25,7 @@ export type ScreenStates = 'background' | 'foreground';
 export type FocusContext = FocusModel;
 export type ScreenType = Screen;
 export type ViewType = View;
+export type ViewGroupType = ViewGroup;
 type AnimatorTypeScale = 'scale';
 type AnimatorTypeScaleWithBorder = 'scale_with_border';
 type AnimatorTypeAnimatorBorder = 'border';

From 48ff6e9e26fbcac5b626326c7587e6c152bfe906 Mon Sep 17 00:00:00 2001
From: aurimasmi <aurimasmickys@gmail.com>
Date: Fri, 22 Sep 2023 15:38:23 +0300
Subject: [PATCH 2/4] remove console logs

---
 packages/app-harness/src/screens/tests/viewGroup.tsx | 7 +++++++
 packages/create/src/focusManager/service/core.ts     | 1 -
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/app-harness/src/screens/tests/viewGroup.tsx b/packages/app-harness/src/screens/tests/viewGroup.tsx
index e0ad4bbf..d421858f 100644
--- a/packages/app-harness/src/screens/tests/viewGroup.tsx
+++ b/packages/app-harness/src/screens/tests/viewGroup.tsx
@@ -31,6 +31,13 @@ const ViewGroup = () => {
                     textStyle={styles.buttonTextStyle}
                 />
             </View>
+
+            <Button
+                focusOptions={{ nextFocusUp: 'test-group2' }}
+                style={{ ...styles.button, ...styles.button2 }}
+                title="Button something"
+                textStyle={styles.buttonTextStyle}
+            />
         </Screen>
     );
 };
diff --git a/packages/create/src/focusManager/service/core.ts b/packages/create/src/focusManager/service/core.ts
index 17f8392e..b29ccbd6 100644
--- a/packages/create/src/focusManager/service/core.ts
+++ b/packages/create/src/focusManager/service/core.ts
@@ -286,7 +286,6 @@ class CoreManager {
             for (const key in parents) {
                 const p = parents[key];
                 const _nextForcedFocusKey = this.getNextForcedFocusKey(p, direction);
-                console.log({_nextForcedFocusKey})
                 if (_nextForcedFocusKey) {
                     this.setFocus(_nextForcedFocusKey);
                     return null;

From 0ce595ac8fd32bc76112bac3f76e5e62ea6aea0c Mon Sep 17 00:00:00 2001
From: aurimasmi <aurimasmickys@gmail.com>
Date: Fri, 22 Sep 2023 15:45:33 +0300
Subject: [PATCH 3/4] allow optionally for focus to go out of group

---
 .../app-harness/src/screens/tests/viewGroup.tsx  | 16 +++++++++++++---
 packages/create/src/focusManager/model/view.ts   |  2 +-
 .../create/src/focusManager/model/viewGroup.ts   |  8 +++++++-
 packages/create/src/focusManager/types.ts        |  2 ++
 4 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/packages/app-harness/src/screens/tests/viewGroup.tsx b/packages/app-harness/src/screens/tests/viewGroup.tsx
index d421858f..d9318ebc 100644
--- a/packages/app-harness/src/screens/tests/viewGroup.tsx
+++ b/packages/app-harness/src/screens/tests/viewGroup.tsx
@@ -11,7 +11,12 @@ const ViewGroup = () => {
         <Screen style={{ backgroundColor: '#222222' }}>
             <View
                 style={{ top: Ratio(20), flex: 1 }}
-                focusOptions={{ nextFocusDown: 'test-group2', focusKey: 'test-group', group: 'test-group' }}
+                focusOptions={{
+                    nextFocusDown: 'test-group2',
+                    focusKey: 'test-group',
+                    group: 'test-group',
+                    allowFocusOutsideGroup: false,
+                }}
             >
                 <Button
                     focusOptions={{ focusKey: 'test-group-btn' }}
@@ -22,7 +27,12 @@ const ViewGroup = () => {
             </View>
             <View
                 style={{ top: Ratio(20), flex: 1 }}
-                focusOptions={{ nextFocusUp: 'test-group', group: 'test-group2', focusKey: 'test-group2' }}
+                focusOptions={{
+                    nextFocusUp: 'test-group',
+                    group: 'test-group2',
+                    focusKey: 'test-group2',
+                    allowFocusOutsideGroup: true,
+                }}
             >
                 <Button
                     focusOptions={{ focusKey: 'test-group-btn2' }}
@@ -33,7 +43,7 @@ const ViewGroup = () => {
             </View>
 
             <Button
-                focusOptions={{ nextFocusUp: 'test-group2' }}
+                // focusOptions={{ nextFocusUp: 'test-group' }}
                 style={{ ...styles.button, ...styles.button2 }}
                 title="Button something"
                 textStyle={styles.buttonTextStyle}
diff --git a/packages/create/src/focusManager/model/view.ts b/packages/create/src/focusManager/model/view.ts
index 8edb8f60..006a9522 100644
--- a/packages/create/src/focusManager/model/view.ts
+++ b/packages/create/src/focusManager/model/view.ts
@@ -272,7 +272,7 @@ class View extends FocusModel {
         let group;
 
         while (parent) {
-            if (parent instanceof ViewGroup) {
+            if (parent instanceof ViewGroup && !parent.isFocusAllowedOutsideGroup()) {
                 group = parent.getGroup();
                 parent = null;
             } else {
diff --git a/packages/create/src/focusManager/model/viewGroup.ts b/packages/create/src/focusManager/model/viewGroup.ts
index 1118a26e..72c32bd5 100644
--- a/packages/create/src/focusManager/model/viewGroup.ts
+++ b/packages/create/src/focusManager/model/viewGroup.ts
@@ -10,11 +10,12 @@ class ViewGroup extends FocusModel {
     private _group?: string;
     private _focusKey?: string;
     private _currentFocus: View | null = null;
+    private _allowFocusOutsideGroup = false;
 
     constructor(params: Omit<ViewGroupProps & ViewGroupProps['focusOptions'], 'ref' | 'focusOptions'>) {
         super(params);
 
-        const { focusContext, group, focusKey } = params;
+        const { focusContext, group, focusKey, allowFocusOutsideGroup = false } = params;
 
         const id = CoreManager.generateID(8);
         this._id = focusContext?.getId() ? `${focusContext.getId()}:viewGroup-${id}` : `viewGroup-${id}`;
@@ -22,6 +23,7 @@ class ViewGroup extends FocusModel {
         this._type = 'viewGroup';
         this._group = group;
         this._focusKey = focusKey;
+        this._allowFocusOutsideGroup = allowFocusOutsideGroup;
 
         this._onMount = this._onMount.bind(this);
         this._onUnmount = this._onUnmount.bind(this);
@@ -102,6 +104,10 @@ class ViewGroup extends FocusModel {
         return this._currentFocus;
     }
 
+    public isFocusAllowedOutsideGroup(): boolean {
+        return this._allowFocusOutsideGroup;
+    }
+
 }
 
 export default ViewGroup;
diff --git a/packages/create/src/focusManager/types.ts b/packages/create/src/focusManager/types.ts
index 19998334..fb997f79 100644
--- a/packages/create/src/focusManager/types.ts
+++ b/packages/create/src/focusManager/types.ts
@@ -134,6 +134,7 @@ export interface ViewProps extends RNViewProps, MouseEvents {
         nextFocusRight?: string | string[];
         nextFocusUp?: string | string[];
         nextFocusDown?: string | string[];
+        allowFocusOutsideGroup?: boolean;
     };
     focusContext?: FocusModel;
     focusRepeatContext?: CreateListRenderItemInfo<any>['focusRepeatContext'];
@@ -148,6 +149,7 @@ export interface ViewGroupProps extends RNViewProps {
         nextFocusRight?: string | string[];
         nextFocusUp?: string | string[];
         nextFocusDown?: string | string[];
+        allowFocusOutsideGroup?: boolean;
     };
     focusContext?: FocusContext;
     ref?: React.ForwardedRef<RNView> | React.MutableRefObject<RNView>;

From 224ae794a8a7197f13ca60347ad9fe0e828b9041 Mon Sep 17 00:00:00 2001
From: aurimasmi <aurimasmickys@gmail.com>
Date: Fri, 22 Sep 2023 16:01:12 +0300
Subject: [PATCH 4/4] fix: getting first child fromr recycler in view group

---
 packages/create/src/focusManager/model/viewGroup.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/create/src/focusManager/model/viewGroup.ts b/packages/create/src/focusManager/model/viewGroup.ts
index 72c32bd5..6a6d1c46 100644
--- a/packages/create/src/focusManager/model/viewGroup.ts
+++ b/packages/create/src/focusManager/model/viewGroup.ts
@@ -63,7 +63,7 @@ class ViewGroup extends FocusModel {
             } else if (firstChildren) {
                 const recycler = firstChildren as RecyclerView;
                 if (recycler.getFocusedView()) return recycler.getFocusedView();
-                return recycler.getChildren[0];
+                return recycler.getChildren()[0] as View | null;
             }
         }