Move callout into the native directory

.changeset/calm-bees-brush.md

@@ -0,0 +1,13 @@
+---
+"@uifabricshared/foundation-compose": patch
+"@fluentui-react-native/contextual-menu": patch
+"@fluentui-react-native/dropdown": patch
+"@fluentui-react-native/tooltip": patch
+"@fluentui-react-native/components": patch
+"@fluentui-react-native/menu": patch
+"@fluentui/react-native": patch
+"@fluentui-react-native/callout": patch
+"@fluentui-react-native/tester": patch
+---
+
+Moved the location of callout, with links to new location

.oxfmtrc.json

@@ -10,7 +10,7 @@
     "**/*.generated.*",
     "**/lib-commonjs/**",
     "**/dist/**",
-    "packages/components/Callout/windows/Callout/codegen/**",
+    "packages/native/Callout/windows/Callout/codegen/**",
     "**/esrp-npm-release-temp/**",
     "**/CHANGELOG.*",
     "**/CODE_OF_CONDUCT.md",

AGENTS.md

@@ -18,6 +18,7 @@ This is the **FluentUI React Native** repository, a monorepo containing React Na
   /component-generator/ - Tool to generate new components
 /packages/       - Core library packages
   /components/   - UI component implementations (Button, Checkbox, Avatar, etc.)
+  /native/       - Standalone native-backed component packages (Callout, etc.)
   /framework/    - Core theming and composition framework
     /composition/ - Component composition factory (current approach)
     /theme/      - Theme system
@@ -165,7 +166,8 @@ The composition framework uses precise types for better type safety:
 
 ### Component Development
 
-**Component Location**: Components are in `/packages/components/` (stable) or `/packages/experimental/` (under development).
+**Component Location**: Stable JavaScript components are in `/packages/components/`, standalone native-backed components are in
+`/packages/native/`, and components under development are in `/packages/experimental/`.
 
 **Component Structure**: Each component typically has:
 
@@ -199,7 +201,8 @@ The composition framework uses precise types for better type safety:
 
 - **Do not use barrel exports (`export * from '...'`)** - wildcard re-exports break tree-shaking because bundlers cannot statically determine which symbols are used, so unused code is retained in consumers' bundles. Always use explicit named re-exports instead, e.g. `export { Foo, Bar } from './module'` and `export type { Baz } from './module'`.
 
-**Native Modules**: Components with native code (iOS/Android/Windows):
+**Native Modules**: Standalone native-backed component packages, such as Callout, live in `/packages/native/`. Components with
+native code (iOS/Android/Windows):
 
 - Typically have one root slot wrapping the native component
 - Use `codegenNativeComponent` for new architecture compatibility
@@ -209,7 +212,8 @@ The composition framework uses precise types for better type safety:
 
 ### Creating a New Component
 
-1. Create directory: `/packages/components/<ComponentName>` or `/packages/experimental/<ComponentName>`
+1. Create the package under `/packages/components/<ComponentName>`, `/packages/native/<ComponentName>` for a standalone
+   native-backed component, or `/packages/experimental/<ComponentName>` while it is under development
 2. Copy structure from existing component (e.g., Shimmer, Button)
 3. Update `package.json` with correct name and dependencies (use `workspace:*` for internal packages)
 4. Add the new package's `tsconfig.json` to the root `tsconfig.json` `references` so it joins the unified build

apps/fluent-tester/tsconfig.json

@@ -11,7 +11,7 @@
   "include": ["src"],
   "references": [
     {
-      "path": "../../packages/components/Callout/tsconfig.json"
+      "path": "../../packages/native/Callout/tsconfig.json"
     },
     {
       "path": "../../packages/experimental/AppearanceAdditions/tsconfig.json"

apps/storybook/src/main.ts

@@ -7,7 +7,7 @@ import type { StorybookConfig } from '@storybook/react-native';
  * that are linked into this application.
  */
 const main: StorybookConfig = {
-  stories: ['../../src/**/*.stories.?(ts|tsx)', '../../../components/Callout/src/**/*.stories.?(ts|tsx)'],
+  stories: ['../../src/**/*.stories.?(ts|tsx)', '../../../native/Callout/src/**/*.stories.?(ts|tsx)'],
   addons: [],
   deviceAddons: ['@storybook/addon-ondevice-controls', '@storybook/addon-ondevice-actions'],
 };

apps/storybook/tsconfig.json

@@ -15,7 +15,7 @@
   "exclude": ["node_modules", "dist", ".cache"],
   "references": [
     {
-      "path": "../../packages/components/Callout/tsconfig.json"
+      "path": "../../packages/native/Callout/tsconfig.json"
     },
     {
       "path": "../../packages/agentic-components/tsconfig.json"

apps/tester-core/tsconfig.json

@@ -29,7 +29,7 @@
       "path": "../../packages/components/Button/tsconfig.json"
     },
     {
-      "path": "../../packages/components/Callout/tsconfig.json"
+      "path": "../../packages/native/Callout/tsconfig.json"
     },
     {
       "path": "../../packages/components/Chip/tsconfig.json"

packages/agentic-components/specs/popover/blockers.md

@@ -15,7 +15,7 @@ Reviewed:
 - `specs/popover/accessibility.md`
 - `specs/popover/tokens.yaml`
 - canonical authoring references for tests, rendering, and state/accessibility
-- comparable overlay implementations in `packages/components/Menu` and `packages/components/Callout`
+- comparable overlay implementations in `packages/components/Menu` and `packages/native/Callout`
 
 ## Blockers
 

packages/agentic-components/storybook/src/storybook.requires.ts

@@ -0,0 +1,54 @@
+/* do not change this file, it is auto generated by storybook. */
+/// <reference types="@storybook/react-native/metro-env" />
+import { start, updateView, type View, type Features } from '@storybook/react-native';
+
+import '@storybook/addon-ondevice-controls/register';
+import '@storybook/addon-ondevice-actions/register';
+
+const normalizedStories = [
+  {
+    titlePrefix: '',
+    directory: '../src',
+    files: '**/*.stories.?(ts|tsx)',
+    importPathMatcher: /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx)?)$/,
+    req: require.context('../../src', true, /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx)?)$/),
+  },
+  {
+    titlePrefix: '',
+    directory: '../../native/Callout/src',
+    files: '**/*.stories.?(ts|tsx)',
+    importPathMatcher: /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx)?)$/,
+    req: require.context(
+      '../../../native/Callout/src',
+      true,
+      /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx)?)$/,
+    ),
+  },
+];
+
+declare global {
+  var view: View;
+  var STORIES: typeof normalizedStories;
+  var STORYBOOK_WEBSOCKET: { host?: string; port?: number; secured?: boolean } | undefined;
+  var FEATURES: Features;
+}
+
+const annotations = [require('./preview'), require('@storybook/react-native/preview')];
+
+globalThis.STORIES = normalizedStories;
+
+module?.hot?.accept?.();
+
+const options = {};
+
+if (!globalThis.view) {
+  globalThis.view = start({
+    annotations,
+    storyEntries: normalizedStories,
+    options,
+  });
+} else {
+  updateView(globalThis.view, annotations, normalizedStories, options);
+}
+
+export const view: View = globalThis.view;

packages/agentic-components/tsconfig.json

@@ -10,7 +10,7 @@
   "exclude": ["**/*.stories.ts", "**/*.stories.tsx"],
   "references": [
     {
-      "path": "../components/Callout/tsconfig.json"
+      "path": "../native/Callout/tsconfig.json"
     },
     {
       "path": "../agentic-design/tsconfig.json"

packages/components/ContextualMenu/tsconfig.json

@@ -12,7 +12,7 @@
       "path": "../../utils/adapters/tsconfig.json"
     },
     {
-      "path": "../Callout/tsconfig.json"
+      "path": "../../native/Callout/tsconfig.json"
     },
     {
       "path": "../FocusZone/tsconfig.json"

packages/components/Menu/tsconfig.json

@@ -15,7 +15,7 @@
       "path": "../Button/tsconfig.json"
     },
     {
-      "path": "../Callout/tsconfig.json"
+      "path": "../../native/Callout/tsconfig.json"
     },
     {
       "path": "../../agentic-design/tsconfig.json"

packages/deprecated/foundation-compose/AGENTS.md

@@ -147,7 +147,7 @@ automatically.
   `ref` during preparation, commonly with `useViewCommandFocus`; type ref-bearing
   roots with `React.PropsWithRef<...>`. For imperative native APIs, use an
   internal native ref plus `useImperativeHandle`, as in
-  `packages/components/Callout/src/Callout.tsx`.
+  `packages/native/Callout/src/Callout.tsx`.
 - Do not introduce `forwardRef` or a new public `ref` convention into an
   established v0 API without an explicit migration requirement.
 

packages/experimental/Dropdown/tsconfig.json

@@ -15,7 +15,7 @@
       "path": "../../components/Button/tsconfig.json"
     },
     {
-      "path": "../../components/Callout/tsconfig.json"
+      "path": "../../native/Callout/tsconfig.json"
     },
     {
       "path": "../../agentic-design/tsconfig.json"

packages/experimental/Tooltip/tsconfig.json

@@ -12,7 +12,7 @@
       "path": "../../components/Button/tsconfig.json"
     },
     {
-      "path": "../../components/Callout/tsconfig.json"
+      "path": "../../native/Callout/tsconfig.json"
     },
     {
       "path": "../../framework-base/tsconfig.json"

packages/libraries/core/tsconfig.json

@@ -21,7 +21,7 @@
       "path": "../../components/Button/tsconfig.json"
     },
     {
-      "path": "../../components/Callout/tsconfig.json"
+      "path": "../../native/Callout/tsconfig.json"
     },
     {
       "path": "../../components/Checkbox/tsconfig.json"

packages/components/Callout/package.json → packages/native/Callout/package.json

@@ -8,7 +8,7 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/microsoft/fluentui-react-native.git",
-    "directory": "packages/components/Callout"
+    "directory": "packages/native/Callout"
   },
   "type": "module",
   "main": "lib/index.js",

packages/components/Callout/windows/Callout/codegen/.clang-format → packages/native/Callout/windows/Callout/codegen/.clang-format

@@ -1,2 +1,2 @@
 DisableFormat: true
-SortIncludes: false
+SortIncludes: false

tsconfig.json

@@ -34,9 +34,6 @@
     {
       "path": "packages/components/Button/tsconfig.json"
     },
-    {
-      "path": "packages/components/Callout/tsconfig.json"
-    },
     {
       "path": "packages/components/Checkbox/tsconfig.json"
     },
@@ -202,6 +199,9 @@
     {
       "path": "packages/libraries/core/tsconfig.json"
     },
+    {
+      "path": "packages/native/Callout/tsconfig.json"
+    },
     {
       "path": "packages/theming/android-theme/tsconfig.json"
     },

yarn.lock

@@ -2872,9 +2872,9 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@fluentui-react-native/callout@workspace:*, @fluentui-react-native/callout@workspace:packages/components/Callout":
+"@fluentui-react-native/callout@workspace:*, @fluentui-react-native/callout@workspace:packages/native/Callout":
   version: 0.0.0-use.local
-  resolution: "@fluentui-react-native/callout@workspace:packages/components/Callout"
+  resolution: "@fluentui-react-native/callout@workspace:packages/native/Callout"
   dependencies:
     "@babel/core": "catalog:"
     "@fluentui-react-native/framework-base": "workspace:*"