Very initial framework for RNW fabric callout implementation

.changeset/whole-keys-cry.md

@@ -0,0 +1,6 @@
+---
+"@fluentui-react-native/components": patch
+"@fluentui-react-native/callout": patch
+---
+
+Very initial framework for RNW fabric callout implementation

packages/agentic-components/package.json

@@ -30,6 +30,7 @@
     "update-snapshots": "fluentui-scripts jest -u"
   },
   "dependencies": {
+    "@fluentui-react-native/callout": "workspace:*",
     "@fluentui-react-native/design": "workspace:*",
     "@fluentui-react-native/framework-base": "workspace:*"
   },
@@ -50,6 +51,7 @@
     "test-renderer": "catalog:0.81"
   },
   "peerDependencies": {
+    "@office-iss/react-native-win32": "^0.74.0 || ^0.81.0",
     "@types/react": "~18.2.0 || ~19.0.0 || ~19.1.4",
     "react": "18.2.0 || 19.0.0 || 19.1.4",
     "react-native": "^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.6",
@@ -58,6 +60,9 @@
     "react-native-windows": "^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0"
   },
   "peerDependenciesMeta": {
+    "@office-iss/react-native-win32": {
+      "optional": true
+    },
     "@types/react": {
       "optional": true
     },
@@ -69,7 +74,12 @@
     }
   },
   "furn": {
-    "jestPlatform": "macos"
+    "jestPlatform": "macos",
+    "knip": {
+      "ignoreDependencies": [
+        "@fluentui-react-native/callout"
+      ]
+    }
   },
   "rnx-kit": {
     "kitType": "library",

packages/agentic-components/storybook/Directory.Build.props

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Project>
+  <PropertyGroup>
+
+    <!-- RNW needs to be updated to use yarn exec instead of npx when detecting a yarn repo, to correctly trigger auto-linking -->
+    <AutolinkCommand Condition="'$(AutolinkCommand)' == ''">yarn exec rnc-cli autolink-windows</AutolinkCommand>
+    <RunCodegenWindows>false</RunCodegenWindows>
+    <CodegenCommand Condition="'$(CodegenCommand)' == ''">yarn exec rnc-cli codegen-windows</CodegenCommand>
+  </PropertyGroup>
+
+</Project>

packages/agentic-components/tsconfig.json

@@ -9,6 +9,9 @@
   "include": ["src"],
   "exclude": ["**/*.stories.ts", "**/*.stories.tsx"],
   "references": [
+    {
+      "path": "../components/Callout/tsconfig.json"
+    },
     {
       "path": "../agentic-design/tsconfig.json"
     },

packages/components/Callout/react-native.config.cjs

@@ -0,0 +1,15 @@
+module.exports = {
+  dependency: {
+    platforms: {
+      windows: {
+        sourceDir: 'windows',
+        projects: [
+          {
+            projectFile: 'Callout/Callout.vcxproj',
+            directDependency: true,
+          },
+        ],
+      },
+    },
+  },
+};

packages/components/Callout/src/Callout.stories.tsx

@@ -66,7 +66,7 @@ const CalloutExample = ({ defaultVisible = false, onDismiss, onShow, showWindowC
       </Text>
       {visible && (
         <Callout {...props} componentRef={calloutRef} onDismiss={dismiss} onShow={show} target={anchorRef}>
-          <View style={styles.calloutContent}>
+          <View style={styles.calloutContent} collapsable={false}>
             <Text style={styles.heading}>Fabric Callout</Text>
             <Text style={styles.body}>This content is hosted in a separate native macOS window.</Text>
             {showWindowCommands && (
@@ -127,7 +127,7 @@ const PlacementExample = (props: CalloutProps) => {
           onDismiss={() => setSelectedIndex(undefined)}
           target={targetRefs[selectedIndex]}
         >
-          <View style={styles.calloutContent}>
+          <View style={styles.calloutContent} collapsable={false}>
             <Text style={styles.heading}>{placements[selectedIndex].label}</Text>
             <Text style={styles.body}>Click outside the native window to dismiss it.</Text>
           </View>