Use "FRN" prefix over "RCT" for macOS Callout native code (#1120)

* remap some colors

* use FRN for macOS

* Change files

* fix typo

* fix typo

change/@fluentui-react-native-callout-e466300f-3584-45f9-aefc-029a85841cb2.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Use \"FRN\" prefix over \"RCT\" for macOS Callout native code",
+  "packageName": "@fluentui-react-native/callout",
+  "email": "sanajmi@microsoft.com",
+  "dependentChangeType": "patch"
+}

package.nuspec

@@ -19,7 +19,7 @@
 
     <!-- macOS ship -->
     <file src="DerivedData\Build\Products\Release\FRNAvatar\libFRNAvatar.a" target="Ship-macosx"/>
-    <file src="DerivedData\Build\Products\Release\FRNMenuButton\libFRNCallout.a" target="Ship-macosx"/>
+    <file src="DerivedData\Build\Products\Release\FRNCallout\libFRNCallout.a" target="Ship-macosx"/>
     <file src="DerivedData\Build\Products\Release\FRNCheckbox\libFRNCheckbox.a" target="Ship-macosx"/>
     <file src="DerivedData\Build\Products\Release\FRNMenuButton\libFRNMenuButton.a" target="Ship-macosx"/>
     <file src="DerivedData\Build\Products\Release\FRNRadioButton\libFRNRadioButton.a" target="Ship-macosx"/>

packages/components/Callout/macos/Callout.swift

@@ -1,7 +1,7 @@
 import Foundation
 import AppKit
 
-@objc(RCTCalloutView)
+@objc(FRNCalloutView)
 class CalloutView: RCTView, CalloutWindowLifeCycleDelegate {
 
 	@objc public var target: NSNumber? {
@@ -297,7 +297,7 @@ class CalloutView: RCTView, CalloutWindowLifeCycleDelegate {
 		window.level = .popUpMenu
 		window.backgroundColor = .clear
 		window.isMovableByWindowBackground = false
-	
+
 		let visualEffect = NSVisualEffectView()
 		visualEffect.translatesAutoresizingMaskIntoConstraints = false
 		visualEffect.material = .menu
@@ -308,7 +308,7 @@ class CalloutView: RCTView, CalloutWindowLifeCycleDelegate {
 		guard let contentView = window.contentView else {
 			preconditionFailure("Callout window has no content view")
 		}
-	
+
 		contentView.addSubview(visualEffect)
 		NSLayoutConstraint.activate([
 			visualEffect.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),

packages/components/Callout/macos/CalloutManager.swift

@@ -1,6 +1,6 @@
 import Foundation
 
-@objc(RCTCalloutManager)
+@objc(FRNCalloutManager)
 class CalloutManager: RCTViewManager {
 	override func view()->NSView! {
 		return CalloutView(bridge: bridge)

packages/components/Callout/macos/FRNCalloutManager.m

@@ -1,6 +1,6 @@
-#import <RCTCalloutManager.h>
+#import <FRNCalloutManager.h>
 
-@implementation RCTConvert (RCTCalloutAdditions)
+@implementation RCTConvert (FRNCalloutAdditions)
 
 // RCTConvert does not properly convert a JS screenRect into a native CGRect/NSRect,
 // due to the mismatch of x/y and screenX/screenY. Let's do it manually.
@@ -34,7 +34,7 @@ RCT_ENUM_CONVERTER(NSRectEdge, (@{
 
 @end
 
-@interface RCT_EXTERN_MODULE(RCTCalloutManager, RCTViewManager)
+@interface RCT_EXTERN_MODULE(FRNCalloutManager, RCTViewManager)
 
 RCT_EXPORT_VIEW_PROPERTY(target, NSNumber)
 

packages/components/Callout/src/Callout.tsx

@@ -3,12 +3,15 @@ import { backgroundColorTokens, borderTokens } from '@fluentui-react-native/toke
 import { compose, IUseComposeStyling } from '@uifabricshared/foundation-compose';
 import { mergeSettings } from '@uifabricshared/foundation-settings';
 import * as React from 'react';
-import { findNodeHandle } from 'react-native';
+import { findNodeHandle, Platform } from 'react-native';
 import { settings } from './Callout.settings';
 import { calloutName, ICalloutProps, ICalloutSlotProps, ICalloutType } from './Callout.types';
 import { ensureNativeComponent } from '@fluentui-react-native/component-cache';
 
-const RCTCallout = ensureNativeComponent('RCTCallout');
+const NativeCalloutView = Platform.select({
+  macos: ensureNativeComponent('FRNCallout'),
+  default: ensureNativeComponent('RCTCallout'), // win32
+});
 
 export const Callout = compose<ICalloutType>({
   displayName: calloutName,
@@ -39,7 +42,7 @@ export const Callout = compose<ICalloutType>({
   },
   settings: settings,
   slots: {
-    root: RCTCallout,
+    root: NativeCalloutView,
   },
   styles: {
     root: [backgroundColorTokens, borderTokens],