Make FocusZone a TurboModule

Author: JunielKatarn

packages/components/FocusZone/macos/FocusZoneViewManager.swift

@@ -0,0 +1,20 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import AppKit
+import Foundation
+#if USE_REACT_AS_MODULE
+import React
+#endif // USE_REACT_AS_MODULE
+
+@objc(FocusZoneViewManager)
+class FocusZoneViewManager: RCTViewManager {
+
+	override func view() -> NSView! {
+		return RCTFocusZone()
+	}
+
+	override class func requiresMainQueueSetup() -> Bool {
+		return true
+	}
+}

packages/components/FocusZone/macos/RCTFocusZoneManager.h

@@ -1,6 +1,2 @@
-#pragma once
-
-#import <React/RCTViewManager.h>
-
-@interface RCTFocusZoneManager : RCTViewManager
-@end
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.

packages/components/FocusZone/macos/RCTFocusZoneManager.m

@@ -1,11 +1,12 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
 #import "RCTFocusZone.h"
-#import "RCTFocusZoneManager.h"
 #import <React/RCTConvert.h>
 #import <React/RCTUIManager.h>
+#import <React/RCTViewManager.h>
 
-@implementation RCTFocusZoneManager
-
-RCT_EXPORT_MODULE()
+@interface RCT_EXTERN_MODULE(FocusZoneViewManager, RCTViewManager)
 
 RCT_EXPORT_VIEW_PROPERTY(disabled, BOOL)
 
@@ -50,9 +51,4 @@ @implementation RCTFocusZoneManager
 	[view setDefaultResponder:defaultResponder];
 }
 
-- (RCTView *)view
-{
-  return [RCTFocusZone new];
-}
-
 @end

packages/components/FocusZone/package.json

@@ -34,9 +34,8 @@
   },
   "dependencies": {
     "@fluentui-react-native/adapters": "workspace:*",
-    "@fluentui-react-native/interactive-hooks": "workspace:*",
-    "@uifabricshared/foundation-composable": "workspace:*",
-    "@uifabricshared/foundation-settings": "workspace:*"
+    "@fluentui-react-native/framework": "workspace:*",
+    "@fluentui-react-native/interactive-hooks": "workspace:*"
   },
   "devDependencies": {
     "@babel/core": "catalog:",

packages/components/FocusZone/src/FocusZone.ts

@@ -7,18 +7,26 @@
 import * as React from 'react';
 import { findNodeHandle } from 'react-native';
 
+import type { UseSlots } from '@fluentui-react-native/framework';
+import { compose, mergeProps } from '@fluentui-react-native/framework';
 import { useViewCommandFocus } from '@fluentui-react-native/interactive-hooks';
-import type { IUseStyling } from '@uifabricshared/foundation-composable';
-import { composable } from '@uifabricshared/foundation-composable';
-import { mergeSettings } from '@uifabricshared/foundation-settings';
 
-import type { FocusZoneProps, FocusZoneSlotProps, FocusZoneType } from './FocusZone.types';
+import type { FocusZoneProps, FocusZoneState, FocusZoneTokens } from './FocusZone.types';
+import { focusZoneName } from './FocusZone.types';
 import RCTFocusZone from './FocusZoneNativeComponent';
-
-const filterOutComponentRef = (propName) => propName !== 'componentRef';
-
-export const FocusZone = composable<FocusZoneType>({
-  usePrepareProps: (userProps: FocusZoneProps, useStyling: IUseStyling<FocusZoneType>) => {
+import type { NativeProps } from './FocusZoneNativeComponent';
+
+interface FocusZoneTypeInternal {
+  props: FocusZoneProps;
+  tokens: FocusZoneTokens;
+  slotProps: { root: React.PropsWithRef<NativeProps> };
+  state: FocusZoneState;
+}
+
+export const FocusZone = compose<FocusZoneTypeInternal>({
+  displayName: focusZoneName,
+  slots: { root: RCTFocusZone },
+  useRender: (userProps: FocusZoneProps, useSlots: UseSlots<FocusZoneTypeInternal>) => {
     const { componentRef, defaultTabbableElement, isCircularNavigation, ...rest } = userProps;
 
     const ftzRef = useViewCommandFocus(componentRef);
@@ -34,18 +42,18 @@ export const FocusZone = composable<FocusZoneType>({
       }
     }, [defaultTabbableElement]);
 
-    return {
-      slotProps: mergeSettings<FocusZoneSlotProps>(useStyling(userProps), {
-        root: {
-          navigateAtEnd: isCircularNavigation ? 'NavigateWrap' : 'NavigateStopAtEnds', // let rest override
-          ...rest,
-          defaultTabbableElement: targetFirstFocus,
-          ref: ftzRef,
-        },
-      }),
+    const rootProps = {
+      navigateAtEnd: isCircularNavigation ? 'NavigateWrap' : 'NavigateStopAtEnds',
+      ...rest,
+    } as NativeProps;
+
+    const Root = useSlots(userProps).root;
+    return (restProps: FocusZoneProps) => {
+      return React.createElement(Root, {
+        ...mergeProps(rootProps, restProps as NativeProps),
+        defaultTabbableElement: targetFirstFocus,
+        ref: ftzRef,
+      });
     };
   },
-  slots: {
-    root: { slotType: RCTFocusZone, filter: filterOutComponentRef },
-  },
 });

packages/components/FocusZone/src/FocusZone.types.ts

@@ -2,7 +2,6 @@ import type * as React from 'react';
 
 import type { IViewProps } from '@fluentui-react-native/adapters';
 import type { IFocusable } from '@fluentui-react-native/interactive-hooks';
-import type { IRenderData } from '@uifabricshared/foundation-composable';
 
 export const focusZoneName = 'FocusZone';
 
@@ -113,8 +112,6 @@ export interface FocusZoneSlotProps {
   root: NativeProps;
 }
 
-export type FocusZoneRenderData = IRenderData<FocusZoneSlotProps, FocusZoneState>;
-
 export interface FocusZoneType {
   props: FocusZoneProps;
   tokens: FocusZoneTokens;

packages/components/FocusZone/src/FocusZoneNativeComponent.ts

@@ -19,6 +19,7 @@ export interface NativeProps extends ViewProps {
   tabKeyNavigation?: WithDefault<'None' | 'NavigateWrap' | 'NavigateStopAtEnds' | 'Normal', 'None'>;
   disabled?: boolean;
   isTabNavigation?: boolean;
+  navigationOrderInRenderOrder?: boolean;
 }
 
 export default codegenNativeComponent<NativeProps>('RCTFocusZone');