@fluentui-react-native/callout 0.27.16 → 0.28.0

package/lib-commonjs/CalloutNativeComponent.types.macos.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalloutNativeComponent.types.macos.d.ts","sourceRoot":"","sources":["../src/CalloutNativeComponent.types.macos.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,2CAA2C,CAAC;AACpF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAEvD,MAAM,WAAW,WAAY,SAAQ,eAAe;IAClD,eAAe,CAAC,EAAE,WAAW,CACzB,aAAa,GACb,YAAY,GACZ,gBAAgB,GAChB,aAAa,GACb,aAAa,GACb,WAAW,GACX,cAAc,GACd,cAAc,GACd,aAAa,GACb,iBAAiB,GACjB,gBAAgB,GAChB,gBAAgB,GAChB,cAAc,GACd,iBAAiB,EACnB,aAAa,CACd,CAAC;IACF,MAAM,CAAC,EAAE,KAAK,CAAC;CAChB;AAGD,MAAM,MAAM,oBAAoB,GAAG,aAAa,CAAC,WAAW,CAAC,CAAC;AAC9D,MAAM,MAAM,qBAAqB,GAAG;IAClC,WAAW,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,UAAU,CAAC,oBAAoB,CAAC,KAAK,IAAI,CAAC;IACvE,UAAU,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,UAAU,CAAC,oBAAoB,CAAC,KAAK,IAAI,CAAC;CACvE,CAAC"}

package/lib-commonjs/CalloutNativeComponent.types.macos.js

@@ -0,0 +1,3 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+//# sourceMappingURL=CalloutNativeComponent.types.macos.js.map

package/lib-commonjs/CalloutNativeComponent.types.macos.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalloutNativeComponent.types.macos.js","sourceRoot":"","sources":["../src/CalloutNativeComponent.types.macos.ts"],"names":[],"mappings":""}

package/lib-commonjs/CalloutNativeComponent.win32.d.ts

@@ -0,0 +1,5 @@
+import type { CalloutComponentType, CalloutNativeCommands } from './CalloutNativeComponent.types';
+export declare const Commands: CalloutNativeCommands;
+declare const _default: CalloutComponentType;
+export default _default;
+//# sourceMappingURL=CalloutNativeComponent.win32.d.ts.map

package/lib-commonjs/CalloutNativeComponent.win32.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalloutNativeComponent.win32.d.ts","sourceRoot":"","sources":["../src/CalloutNativeComponent.win32.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAe,oBAAoB,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAE/G,eAAO,MAAM,QAAQ,EAAE,qBAErB,CAAC;;AAGH,wBAAyF"}

package/lib-commonjs/CalloutNativeComponent.win32.js

@@ -0,0 +1,16 @@
+'use strict';
+var __importDefault =
+  (this && this.__importDefault) ||
+  function (mod) {
+    return mod && mod.__esModule ? mod : { default: mod };
+  };
+Object.defineProperty(exports, '__esModule', { value: true });
+exports.Commands = void 0;
+const codegenNativeCommands_1 = __importDefault(require('react-native/Libraries/Utilities/codegenNativeCommands'));
+const react_native_1 = require('react-native');
+exports.Commands = (0, codegenNativeCommands_1.default)({
+  supportedCommands: ['blurWindow', 'focusWindow'],
+});
+// no fabric for Win32, just use requireNativeComponent
+exports.default = (0, react_native_1.requireNativeComponent)('RCTCallout');
+//# sourceMappingURL=CalloutNativeComponent.win32.js.map

package/lib-commonjs/CalloutNativeComponent.win32.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalloutNativeComponent.win32.js","sourceRoot":"","sources":["../src/CalloutNativeComponent.win32.ts"],"names":[],"mappings":";;;;;;AAAA,mHAA2F;AAC3F,+CAAsD;AAIzC,QAAA,QAAQ,GAA0B,IAAA,+BAAqB,EAAwB;IAC1F,iBAAiB,EAAE,CAAC,YAAY,EAAE,aAAa,CAAC;CACjD,CAAC,CAAC;AAEH,uDAAuD;kBACxC,IAAA,qCAAsB,EAAc,YAAY,CAAyB"}

package/lib-commonjs/__tests__/Callout.test.d.ts

@@ -1,2 +1,2 @@
 export {};
-//# sourceMappingURL=Callout.test.d.ts.map
+//# sourceMappingURL=Callout.test.d.ts.map

package/lib-commonjs/__tests__/Callout.test.js

@@ -1,33 +1,64 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const React = __importStar(require("react"));
-const renderer = __importStar(require("react-test-renderer"));
-const __1 = require("..");
+'use strict';
+var __createBinding =
+  (this && this.__createBinding) ||
+  (Object.create
+    ? function (o, m, k, k2) {
+        if (k2 === undefined) k2 = k;
+        var desc = Object.getOwnPropertyDescriptor(m, k);
+        if (!desc || ('get' in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+          desc = {
+            enumerable: true,
+            get: function () {
+              return m[k];
+            },
+          };
+        }
+        Object.defineProperty(o, k2, desc);
+      }
+    : function (o, m, k, k2) {
+        if (k2 === undefined) k2 = k;
+        o[k2] = m[k];
+      });
+var __setModuleDefault =
+  (this && this.__setModuleDefault) ||
+  (Object.create
+    ? function (o, v) {
+        Object.defineProperty(o, 'default', { enumerable: true, value: v });
+      }
+    : function (o, v) {
+        o['default'] = v;
+      });
+var __importStar =
+  (this && this.__importStar) ||
+  (function () {
+    var ownKeys = function (o) {
+      ownKeys =
+        Object.getOwnPropertyNames ||
+        function (o) {
+          var ar = [];
+          for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+          return ar;
+        };
+      return ownKeys(o);
+    };
+    return function (mod) {
+      if (mod && mod.__esModule) return mod;
+      var result = {};
+      if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== 'default') __createBinding(result, mod, k[i]);
+      __setModuleDefault(result, mod);
+      return result;
+    };
+  })();
+Object.defineProperty(exports, '__esModule', { value: true });
+const jsx_runtime_1 = require('react/jsx-runtime');
+const react_1 = require('react');
+const renderer = __importStar(require('react-test-renderer'));
+const __1 = require('..');
 it('Callout default props', () => {
-    const tree = renderer.create(React.createElement(__1.Callout, null)).toJSON();
-    expect(tree).toMatchSnapshot();
+  let component;
+  (0, react_1.act)(() => {
+    component = renderer.create(jsx_runtime_1.jsx(__1.Callout, {}));
+  });
+  expect(component.toJSON()).toMatchSnapshot();
 });
-//# sourceMappingURL=Callout.test.js.map
+//# sourceMappingURL=Callout.test.js.map

package/lib-commonjs/__tests__/Callout.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"Callout.test.js","sourceRoot":"","sources":["../../src/__tests__/Callout.test.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAE/B,8DAAgD;AAEhD,0BAA6B;AAE7B,EAAE,CAAC,uBAAuB,EAAE,GAAG,EAAE;IAC/B,MAAM,IAAI,GAAG,QAAQ,CAAC,MAAM,CAAC,oBAAC,WAAO,OAAG,CAAC,CAAC,MAAM,EAAE,CAAC;IACnD,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;AACjC,CAAC,CAAC,CAAC"}
+{"version":3,"file":"Callout.test.js","sourceRoot":"","sources":["../../src/__tests__/Callout.test.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,iCAA4B;AAE5B,MAAY,QAAQ,gDAA4B;AAEhD,0BAA6B;AAE7B,EAAE,CAAC,uBAAuB,EAAE,GAAG,EAAE,CAAC;IAChC,IAAI,SAAqC,CAAC;IAC1C,IAAA,WAAG,EAAC,GAAG,EAAE,CAAC;QACR,SAAS,GAAG,QAAQ,CAAC,MAAM,CAAC,kBAAC,WAAO,KAAG,CAAC,CAAC;IAAA,CAC1C,CAAC,CAAC;IACH,MAAM,CAAC,SAAU,CAAC,MAAM,EAAE,CAAC,CAAC,eAAe,EAAE,CAAC;AAAA,CAC/C,CAAC,CAAC"}

package/lib-commonjs/index.d.ts

@@ -1,5 +1,14 @@
 export { calloutName } from './Callout.types';
-export type { DirectionalHint, DismissBehaviors, ICalloutProps, ICalloutRenderData, ICalloutSlotProps, ICalloutTokens, ICalloutType, RestoreFocusEvent, } from './Callout.types';
-export type { CalloutNativeCommands } from './CalloutNativeCommands.types';
+export type {
+  DirectionalHint,
+  DismissBehaviors,
+  ICalloutProps,
+  ICalloutRenderData,
+  ICalloutSlotProps,
+  ICalloutTokens,
+  ICalloutType,
+  RestoreFocusEvent,
+} from './Callout.types';
+export type { CalloutNativeCommands } from './CalloutNativeComponent.types';
 export { Callout } from './Callout';
-//# sourceMappingURL=index.d.ts.map
+//# sourceMappingURL=index.d.ts.map

package/lib-commonjs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,YAAY,EACV,eAAe,EACf,gBAAgB,EAChB,aAAa,EACb,kBAAkB,EAClB,iBAAiB,EACjB,cAAc,EACd,YAAY,EACZ,iBAAiB,GAClB,MAAM,iBAAiB,CAAC;AACzB,YAAY,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAC3E,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,YAAY,EACV,eAAe,EACf,gBAAgB,EAChB,aAAa,EACb,kBAAkB,EAClB,iBAAiB,EACjB,cAAc,EACd,YAAY,EACZ,iBAAiB,GAClB,MAAM,iBAAiB,CAAC;AACzB,YAAY,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAC5E,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC"}

package/lib-commonjs/index.js

@@ -1,8 +1,18 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.Callout = exports.calloutName = void 0;
-var Callout_types_1 = require("./Callout.types");
-Object.defineProperty(exports, "calloutName", { enumerable: true, get: function () { return Callout_types_1.calloutName; } });
-var Callout_1 = require("./Callout");
-Object.defineProperty(exports, "Callout", { enumerable: true, get: function () { return Callout_1.Callout; } });
-//# sourceMappingURL=index.js.map
+const Callout_types_1 = require('./Callout.types');
+Object.defineProperty(exports, 'calloutName', {
+  enumerable: true,
+  get: function () {
+    return Callout_types_1.calloutName;
+  },
+});
+const Callout_1 = require('./Callout');
+Object.defineProperty(exports, 'Callout', {
+  enumerable: true,
+  get: function () {
+    return Callout_1.Callout;
+  },
+});
+//# sourceMappingURL=index.js.map

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AAAA,iDAA8C;AAArC,4GAAA,WAAW,OAAA;AAYpB,qCAAoC;AAA3B,kGAAA,OAAO,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AAAA,mDAA8C;AAArC,4GAAA,WAAW,OAAA;AAYpB,uCAAoC;AAA3B,kGAAA,OAAO,OAAA"}

package/package.json

@@ -1,97 +1,80 @@
 {
   "name": "@fluentui-react-native/callout",
-  "version": "0.27.16",
+  "version": "0.28.0",
   "description": "A cross-platform Callout component using the Fluent Design System",
+  "homepage": "https://github.com/microsoft/fluentui-react-native",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/microsoft/fluentui-react-native.git",
+    "directory": "packages/components/Callout"
+  },
   "license": "MIT",
   "author": "",
-  "homepage": "https://github.com/microsoft/fluentui-react-native",
-  "main": "lib-commonjs/index.js",
-  "module": "lib/index.js",
-  "react-native": "src/index.ts",
   "exports": {
     ".": {
+      "types": "./lib/index.d.ts",
       "import": "./lib/index.js",
-      "require": "./lib-commonjs/index.js",
-      "types": "./lib/index.d.ts"
+      "require": "./lib-commonjs/index.js"
     }
   },
-  "typings": "lib/index.d.ts",
+  "main": "lib-commonjs/index.js",
+  "module": "lib/index.js",
+  "types": "lib/index.d.ts",
   "scripts": {
     "build": "fluentui-scripts build",
+    "build-cjs": "tsgo --outDir lib-commonjs",
+    "build-esm": "tsgo --outDir lib --module esnext --moduleResolution bundler",
     "clean": "fluentui-scripts clean",
     "depcheck": "fluentui-scripts depcheck",
-    "just": "fluentui-scripts",
     "lint": "fluentui-scripts eslint",
-    "test": "fluentui-scripts jest",
-    "update-snapshots": "fluentui-scripts jest -u",
+    "lint-package": "fluentui-scripts lint-package",
     "prettier": "fluentui-scripts prettier",
-    "prettier-fix": "fluentui-scripts prettier --fix true"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/microsoft/fluentui-react-native.git",
-    "directory": "packages/components/Callout"
+    "test": "fluentui-scripts jest",
+    "update-snapshots": "fluentui-scripts jest -u"
   },
   "dependencies": {
-    "@fluentui-react-native/adapters": "0.13.5",
-    "@fluentui-react-native/tokens": "0.23.10",
-    "@uifabricshared/foundation-composable": "0.13.11",
-    "@uifabricshared/foundation-compose": "1.15.16",
-    "@uifabricshared/foundation-settings": "0.15.11"
+    "@fluentui-react-native/adapters": "0.14.0",
+    "@fluentui-react-native/tokens": "0.24.0",
+    "@uifabricshared/foundation-composable": "0.14.0",
+    "@uifabricshared/foundation-compose": "1.16.0",
+    "@uifabricshared/foundation-settings": "0.16.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
     "@fluentui-react-native/babel-config": "0.1.1",
     "@fluentui-react-native/eslint-config-rules": "0.1.1",
     "@fluentui-react-native/jest-config": "0.1.1",
-    "@fluentui-react-native/scripts": "0.1.1",
+    "@fluentui-react-native/kit-config": "0.1.2",
+    "@fluentui-react-native/scripts": "0.1.2",
     "@office-iss/react-native-win32": "^0.74.0",
-    "@react-native/babel-preset": "^0.74.0",
-    "@react-native/metro-config": "^0.74.0",
-    "@types/react": "~18.2.0",
-    "react": "18.2.0",
-    "react-native": "^0.74.0",
-    "react-native-macos": "^0.74.0",
-    "react-native-windows": "^0.74.0",
-    "react-test-renderer": "18.2.0"
+    "@react-native-community/cli": "^20.0.0",
+    "@react-native-community/cli-platform-android": "^20.0.0",
+    "@react-native-community/cli-platform-ios": "^20.0.0",
+    "@react-native/babel-preset": "^0.81.0",
+    "@react-native/metro-config": "^0.81.0",
+    "@types/react": "~19.1.0",
+    "@types/react-test-renderer": "^19.1.0",
+    "react": "19.1.0",
+    "react-native": "^0.81.0",
+    "react-native-macos": "^0.81.0",
+    "react-native-windows": "^0.81.0",
+    "react-test-renderer": "19.1.0"
   },
   "peerDependencies": {
     "@office-iss/react-native-win32": "^0.74.0",
-    "react": "18.2.0",
-    "react-native": "^0.73.0 || ^0.74.0",
-    "react-native-macos": "^0.73.0 || ^0.74.0",
-    "react-native-windows": "^0.73.0 || ^0.74.0"
-  },
-  "rnx-kit": {
-    "kitType": "library",
-    "alignDeps": {
-      "presets": [
-        "microsoft/react-native"
-      ],
-      "requirements": {
-        "development": [
-          "react-native@0.74"
-        ],
-        "production": [
-          "react-native@0.73 || 0.74"
-        ]
-      },
-      "capabilities": [
-        "babel-preset-react-native",
-        "core",
-        "core-android",
-        "core-ios",
-        "core-macos",
-        "core-windows",
-        "react",
-        "react-test-renderer"
-      ]
-    }
+    "@types/react": "~18.2.0 || ~19.0.0 || ~19.1.0",
+    "react": "18.2.0 || 19.0.0 || 19.1.0",
+    "react-native": "^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0",
+    "react-native-macos": "^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0",
+    "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
+    },
     "react-native-macos": {
       "optional": true
     },
@@ -103,5 +86,23 @@
     "name": "FRNCalloutSpec",
     "type": "components",
     "jsSrcsDir": "lib"
+  },
+  "rnx-kit": {
+    "kitType": "library",
+    "alignDeps": {
+      "capabilities": [
+        "babel-preset-react-native",
+        "core",
+        "core-android",
+        "core-ios",
+        "core-macos",
+        "core-windows",
+        "react",
+        "react-test-renderer",
+        "tools-core",
+        "tools-jest"
+      ]
+    },
+    "extends": "@fluentui-react-native/kit-config"
   }
-}
+}

package/src/Callout.tsx

@@ -5,8 +5,7 @@
  */
 
 import * as React from 'react';
-import { findNodeHandle, Platform } from 'react-native';
-import type { HostComponent } from 'react-native';
+import { findNodeHandle } from 'react-native';
 
 import { backgroundColorTokens, borderTokens } from '@fluentui-react-native/tokens';
 import type { IUseComposeStyling } from '@uifabricshared/foundation-compose';
@@ -16,16 +15,9 @@ import { mergeSettings } from '@uifabricshared/foundation-settings';
 import { settings } from './Callout.settings';
 import type { ICalloutProps, ICalloutSlotProps, ICalloutType } from './Callout.types';
 import { calloutName } from './Callout.types';
-import type { NativeProps as CalloutNativeProps } from './CalloutNativeComponent';
-import CalloutNativeComponent from './CalloutNativeComponent';
-import type { NativeProps as FRNCalloutNativeProps } from './MacOSCalloutNativeComponent';
-import FRNCalloutNativeComponent from './MacOSCalloutNativeComponent';
-import { Commands } from './MacOSCalloutNativeComponent';
 
-const NativeCalloutView = Platform.select<HostComponent<FRNCalloutNativeProps> | HostComponent<CalloutNativeProps>>({
-  macos: FRNCalloutNativeComponent,
-  default: CalloutNativeComponent, // win32
-});
+import NativeCalloutView from './CalloutNativeComponent';
+import { Commands } from './CalloutNativeComponent';
 
 export const Callout = compose<ICalloutType>({
   displayName: calloutName,

package/src/Callout.types.ts

@@ -1,13 +1,15 @@
 import type * as React from 'react';
-import type { KeyboardMetrics, ViewStyle } from 'react-native';
+import type { KeyboardMetrics, ViewStyle, ViewProps } from 'react-native';
 
 import type { IViewProps } from '@fluentui-react-native/adapters';
 import type { IBackgroundColorTokens, IBorderTokens } from '@fluentui-react-native/tokens';
 import type { IRenderData } from '@uifabricshared/foundation-composable';
 
-import type { CalloutNativeCommands } from './CalloutNativeCommands.types';
+import type { CalloutNativeCommands } from './CalloutNativeComponent.types';
 export const calloutName = 'Callout';
 
+import type { DirectEventHandler, Double, Int32 } from 'react-native/Libraries/Types/CodegenTypes';
+
 /**
  * Properties and Tokens for FluentUI React Native Callout
  */
@@ -225,3 +227,34 @@ export interface ICalloutType {
   slotProps: ICalloutSlotProps;
   tokens: ICalloutTokens;
 }
+
+type AnchorRect = {
+  screenX: Double;
+  screenY: Double;
+  width: Double;
+  height: Double;
+};
+
+/**
+ * Shared native props specific to Callout native component
+ */
+export interface NativePropsBase extends ViewProps {
+  accessibilityLabel?: string;
+  accessibilityOnShowAnnouncement?: string;
+  anchorRect?: AnchorRect;
+
+  dismissBehaviors?: string[];
+  doNotTakePointerCapture?: boolean;
+  focusable?: boolean;
+  isBeakVisible?: boolean;
+  maxHeight?: Int32;
+  maxWidth?: Int32;
+  setInitialFocus?: boolean;
+
+  // targetAnchor?: string; // Win32 only Callout can target an anchor registered in the anchor registry // Can be a node id or an anchor ID - This need to be reworked as Mixed types are not supported going forward
+  testID?: string;
+
+  onRestoreFocus?: DirectEventHandler<{ target: Int32; containsFocus: boolean }>;
+  onDismiss?: DirectEventHandler<{ target: Int32 }>;
+  onShow?: DirectEventHandler<{ target: Int32 }>;
+}

package/src/CalloutNativeComponent.macos.ts

@@ -0,0 +1,12 @@
+import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands';
+import { requireNativeComponent } from 'react-native';
+
+import type { NativeProps, CalloutComponentType, CalloutNativeCommands } from './CalloutNativeComponent.types.macos';
+
+export const Commands: CalloutNativeCommands = codegenNativeCommands<CalloutNativeCommands>({
+  supportedCommands: ['blurWindow', 'focusWindow'],
+});
+
+// no fabric for macOS, just use requireNativeComponent
+// macOS uses FRNCallout (registered by FRNCalloutManager), not RCTCallout
+export default requireNativeComponent<NativeProps>('FRNCallout') as CalloutComponentType;

package/src/CalloutNativeComponent.ts

@@ -1,68 +1,7 @@
-/**
- * Copyright (c) Microsoft Corporation.
- * Licensed under the MIT License.
- * @format
- */
-
-import type { HostComponent, ViewProps } from 'react-native';
-
-import type { WithDefault, DirectEventHandler, Double, Int32 } from 'react-native/Libraries/Types/CodegenTypes';
 import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands';
 import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
 
-import type { UnsafeMixed } from './codegenTypes';
-// Should be:
-// import type {UnsafeMixed} from 'react-native/Libraries/Types/CodegenTypes';
-
-type AnchorRect = {
-  screenX: Double;
-  screenY: Double;
-  width: Double;
-  height: Double;
-};
-
-export interface NativeProps extends ViewProps {
-  accessibilityLabel?: string;
-  accessibilityOnShowAnnouncement?: string;
-  anchorRect?: AnchorRect;
-  directionalHint?: WithDefault<
-    | 'leftTopEdge'
-    | 'leftCenter'
-    | 'leftBottomEdge'
-    | 'topLeftEdge'
-    | 'topAutoEdge'
-    | 'topCenter'
-    | 'topRightEdge'
-    | 'rightTopEdge'
-    | 'rightCenter'
-    | 'rightBottomEdge'
-    | 'bottonLeftEdge'
-    | 'bottomAutoEdge'
-    | 'bottomCenter'
-    | 'bottomRightEdge',
-    'bottonLeftEdge'
-  >;
-  dismissBehaviors?: string[];
-  doNotTakePointerCapture?: boolean;
-  focusable?: boolean;
-  isBeakVisible?: boolean;
-  maxHeight?: Int32;
-  maxWidth?: Int32;
-  setInitialFocus?: boolean;
-  target?: UnsafeMixed;
-  // targetAnchor?: string; // Win32 only Callout can target an anchor registered in the anchor registry // Can be a node id or an anchor ID - This need to be reworked as Mixed types are not supported going forward
-  testID?: string;
-
-  onRestoreFocus?: DirectEventHandler<{ target: Int32; containsFocus: boolean }>;
-  onDismiss?: DirectEventHandler<{ target: Int32 }>;
-  onShow?: DirectEventHandler<{ target: Int32 }>;
-}
-
-export type CalloutComponentType = HostComponent<NativeProps>;
-export interface CalloutNativeCommands {
-  focusWindow: (viewRef: React.ElementRef<CalloutComponentType>) => void;
-  blurWindow: (viewRef: React.ElementRef<CalloutComponentType>) => void;
-}
+import type { NativeProps, CalloutComponentType, CalloutNativeCommands } from './CalloutNativeComponent.types';
 
 export const Commands: CalloutNativeCommands = codegenNativeCommands<CalloutNativeCommands>({
   supportedCommands: ['blurWindow', 'focusWindow'],

package/src/CalloutNativeComponent.types.macos.ts

@@ -0,0 +1,31 @@
+import type { HostComponent } from 'react-native';
+import type { WithDefault, Int32 } from 'react-native/Libraries/Types/CodegenTypes';
+import type { NativePropsBase } from './Callout.types';
+
+export interface NativeProps extends NativePropsBase {
+  directionalHint?: WithDefault<
+    | 'leftTopEdge'
+    | 'leftCenter'
+    | 'leftBottomEdge'
+    | 'topLeftEdge'
+    | 'topAutoEdge'
+    | 'topCenter'
+    | 'topRightEdge'
+    | 'rightTopEdge'
+    | 'rightCenter'
+    | 'rightBottomEdge'
+    | 'bottonLeftEdge'
+    | 'bottomAutoEdge'
+    | 'bottomCenter'
+    | 'bottomRightEdge',
+    'topLeftEdge'
+  >;
+  target?: Int32;
+}
+
+// making these explicit as codegen can't always handle complex typescript types and fails silently
+export type CalloutComponentType = HostComponent<NativeProps>;
+export type CalloutNativeCommands = {
+  focusWindow: (viewRef: React.ElementRef<CalloutComponentType>) => void;
+  blurWindow: (viewRef: React.ElementRef<CalloutComponentType>) => void;
+};

package/src/CalloutNativeComponent.types.ts

@@ -0,0 +1,31 @@
+import type { HostComponent } from 'react-native';
+import type { WithDefault } from 'react-native/Libraries/Types/CodegenTypes';
+import type { UnsafeMixed } from './codegenTypes';
+import type { NativePropsBase } from './Callout.types';
+
+export interface NativeProps extends NativePropsBase {
+  directionalHint?: WithDefault<
+    | 'leftTopEdge'
+    | 'leftCenter'
+    | 'leftBottomEdge'
+    | 'topLeftEdge'
+    | 'topAutoEdge'
+    | 'topCenter'
+    | 'topRightEdge'
+    | 'rightTopEdge'
+    | 'rightCenter'
+    | 'rightBottomEdge'
+    | 'bottonLeftEdge'
+    | 'bottomAutoEdge'
+    | 'bottomCenter'
+    | 'bottomRightEdge',
+    'bottonLeftEdge'
+  >;
+  target?: UnsafeMixed;
+}
+
+export type CalloutComponentType = HostComponent<NativeProps>;
+export type CalloutNativeCommands = {
+  focusWindow: (viewRef: React.ElementRef<CalloutComponentType>) => void;
+  blurWindow: (viewRef: React.ElementRef<CalloutComponentType>) => void;
+};

package/src/CalloutNativeComponent.win32.ts

@@ -0,0 +1,11 @@
+import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands';
+import { requireNativeComponent } from 'react-native';
+
+import type { NativeProps, CalloutComponentType, CalloutNativeCommands } from './CalloutNativeComponent.types';
+
+export const Commands: CalloutNativeCommands = codegenNativeCommands<CalloutNativeCommands>({
+  supportedCommands: ['blurWindow', 'focusWindow'],
+});
+
+// no fabric for Win32, just use requireNativeComponent
+export default requireNativeComponent<NativeProps>('RCTCallout') as CalloutComponentType;

package/src/__tests__/Callout.test.tsx

@@ -1,10 +1,13 @@
-import * as React from 'react';
+import { act } from 'react';
 
 import * as renderer from 'react-test-renderer';
 
 import { Callout } from '..';
 
 it('Callout default props', () => {
-  const tree = renderer.create(<Callout />).toJSON();
-  expect(tree).toMatchSnapshot();
+  let component: renderer.ReactTestRenderer;
+  act(() => {
+    component = renderer.create(<Callout />);
+  });
+  expect(component!.toJSON()).toMatchSnapshot();
 });

package/src/index.ts

@@ -9,5 +9,5 @@ export type {
   ICalloutType,
   RestoreFocusEvent,
 } from './Callout.types';
-export type { CalloutNativeCommands } from './CalloutNativeCommands.types';
+export type { CalloutNativeCommands } from './CalloutNativeComponent.types';
 export { Callout } from './Callout';