@fluentui-react-native/callout 0.17.29 → 0.19.1

package/.eslintrc.js

@@ -1,5 +1,3 @@
 module.exports = {
-  extends: [
-    "@uifabricshared/eslint-config-rules"
-  ]
-}
+  extends: ['@fluentui-react-native/eslint-config-rules'],
+};

package/CHANGELOG.json

@@ -2,7 +2,185 @@
   "name": "@fluentui-react-native/callout",
   "entries": [
     {
-      "date": "Mon, 01 Nov 2021 18:51:49 GMT",
+      "date": "Thu, 16 Dec 2021 06:26:41 GMT",
+      "tag": "@fluentui-react-native/callout_v0.19.1",
+      "version": "0.19.1",
+      "comments": {
+        "patch": [
+          {
+            "author": "sanajmi@microsoft.com",
+            "package": "@fluentui-react-native/callout",
+            "commit": "dd2f47a0a2d6aab7361301a16407c76497b45ce7",
+            "comment": "remove focus style overrides for macOS contextual menu items"
+          },
+          {
+            "author": "sanajmi@microsoft.com",
+            "package": "@fluentui-react-native/callout",
+            "commit": "e597717b14dce4916740076786391449dd4a7c69",
+            "comment": "Rename Jest snapshots to be platform agnostic "
+          },
+          {
+            "author": "sanajmi@microsoft.com",
+            "package": "@fluentui-react-native/callout",
+            "commit": "51cbf7c64d5c52feeec2e845cd4dbd4e23c96e1e",
+            "comment": "Add up/down arrow key support to macOS ContextualMenu"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui-react-native/callout",
+            "comment": "Bump @fluentui-react-native/adapters to v0.8.1",
+            "commit": "841d2998e8b97fabe0b6dac9c74c3d63d2b3bbd4"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui-react-native/callout",
+            "comment": "Bump @fluentui-react-native/interactive-hooks to v0.11.1",
+            "commit": "841d2998e8b97fabe0b6dac9c74c3d63d2b3bbd4"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui-react-native/callout",
+            "comment": "Bump @fluentui-react-native/tokens to v0.11.1",
+            "commit": "841d2998e8b97fabe0b6dac9c74c3d63d2b3bbd4"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui-react-native/callout",
+            "comment": "Bump @uifabricshared/foundation-compose to v1.11.1",
+            "commit": "841d2998e8b97fabe0b6dac9c74c3d63d2b3bbd4"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 17 Nov 2021 19:28:07 GMT",
+      "tag": "@fluentui-react-native/callout_v0.19.0",
+      "version": "0.19.0",
+      "comments": {
+        "minor": [
+          {
+            "comment": "Update to react-native 0.64",
+            "author": "afoxman@microsoft.com",
+            "commit": "f16d742b5c2d5b97e49ac1ef7b740cbf89fc42e6",
+            "package": "@fluentui-react-native/callout"
+          }
+        ],
+        "patch": [
+          {
+            "comment": "Bump @fluentui-react-native/interactive-hooks to v0.11.0",
+            "author": "afoxman@microsoft.com",
+            "commit": "f16d742b5c2d5b97e49ac1ef7b740cbf89fc42e6",
+            "package": "@fluentui-react-native/callout"
+          },
+          {
+            "comment": "Bump @fluentui-react-native/tokens to v0.11.0",
+            "author": "afoxman@microsoft.com",
+            "commit": "f16d742b5c2d5b97e49ac1ef7b740cbf89fc42e6",
+            "package": "@fluentui-react-native/callout"
+          },
+          {
+            "comment": "Bump @fluentui-react-native/component-cache to v1.3.0",
+            "author": "afoxman@microsoft.com",
+            "commit": "f16d742b5c2d5b97e49ac1ef7b740cbf89fc42e6",
+            "package": "@fluentui-react-native/callout"
+          },
+          {
+            "comment": "Bump @uifabricshared/foundation-compose to v1.11.0",
+            "author": "afoxman@microsoft.com",
+            "commit": "f16d742b5c2d5b97e49ac1ef7b740cbf89fc42e6",
+            "package": "@fluentui-react-native/callout"
+          },
+          {
+            "comment": "Bump @uifabricshared/foundation-composable to v0.10.0",
+            "author": "afoxman@microsoft.com",
+            "commit": "f16d742b5c2d5b97e49ac1ef7b740cbf89fc42e6",
+            "package": "@fluentui-react-native/callout"
+          },
+          {
+            "comment": "Bump @uifabricshared/foundation-settings to v0.11.0",
+            "author": "afoxman@microsoft.com",
+            "commit": "f16d742b5c2d5b97e49ac1ef7b740cbf89fc42e6",
+            "package": "@fluentui-react-native/callout"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 12 Nov 2021 16:07:20 GMT",
+      "tag": "@fluentui-react-native/callout_v0.18.1",
+      "version": "0.18.1",
+      "comments": {
+        "none": [
+          {
+            "comment": "Bump @fluentui-react-native/interactive-hooks to v0.10.54",
+            "author": "4123478+tido64@users.noreply.github.com",
+            "commit": "25673699e6c6c064b41f1246c2c995baa67a74ad",
+            "package": "@fluentui-react-native/callout"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 11 Nov 2021 23:17:41 GMT",
+      "tag": "@fluentui-react-native/callout_v0.18.1",
+      "version": "0.18.1",
+      "comments": {
+        "none": [
+          {
+            "comment": "Rename uifabricshared/eslint-config-rules to fluentui-react-native/eslint-config-rules",
+            "author": "ruaraki@microsoft.com",
+            "commit": "110fba2a1721a914501404f6040f07656307549e",
+            "package": "@fluentui-react-native/callout"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 09 Nov 2021 23:04:33 GMT",
+      "tag": "@fluentui-react-native/callout_v0.18.1",
+      "version": "0.18.1",
+      "comments": {
+        "patch": [
+          {
+            "comment": "Bump @uifabricshared/foundation-compose to v1.10.22",
+            "author": "67026167+chiuam@users.noreply.github.com",
+            "commit": "8baa72ed4ec06f90a51cf757e1924e946f76a537",
+            "package": "@fluentui-react-native/callout"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 08 Nov 2021 20:52:15 GMT",
+      "tag": "@fluentui-react-native/callout_v0.18.0",
+      "version": "0.18.0",
+      "comments": {
+        "patch": [
+          {
+            "comment": "Bump macOS minimum version to 10.15",
+            "author": "sanajmi@microsoft.com",
+            "commit": "f6e7e6523713e641227f91113728da3d9816ef22",
+            "package": "@fluentui-react-native/callout"
+          },
+          {
+            "comment": "Use \"FRN\" prefix over \"RCT\" for macOS Callout native code",
+            "author": "sanajmi@microsoft.com",
+            "commit": "10d9d09b2af1bf71ff4253cc17e536dd6d8bfae1",
+            "package": "@fluentui-react-native/callout"
+          }
+        ],
+        "minor": [
+          {
+            "comment": "Added macOS support",
+            "author": "sanajmi@microsoft.com",
+            "commit": "ae20d8c84bb0f87703d2fa4d16b54abbea4c5b90",
+            "package": "@fluentui-react-native/callout"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 01 Nov 2021 18:53:37 GMT",
       "tag": "@fluentui-react-native/callout_v0.17.29",
       "version": "0.17.29",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,64 @@
 # Change Log - @fluentui-react-native/callout
 
-This log was last generated on Mon, 01 Nov 2021 18:51:49 GMT and should not be manually modified.
+This log was last generated on Thu, 16 Dec 2021 06:26:41 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 0.19.1
+
+Thu, 16 Dec 2021 06:26:41 GMT
+
+### Patches
+
+- remove focus style overrides for macOS contextual menu items (sanajmi@microsoft.com)
+- Rename Jest snapshots to be platform agnostic  (sanajmi@microsoft.com)
+- Add up/down arrow key support to macOS ContextualMenu (sanajmi@microsoft.com)
+- Bump @fluentui-react-native/adapters to v0.8.1
+- Bump @fluentui-react-native/interactive-hooks to v0.11.1
+- Bump @fluentui-react-native/tokens to v0.11.1
+- Bump @uifabricshared/foundation-compose to v1.11.1
+
+## 0.19.0
+
+Wed, 17 Nov 2021 19:28:07 GMT
+
+### Minor changes
+
+- Update to react-native 0.64 (afoxman@microsoft.com)
+
+### Patches
+
+- Bump @fluentui-react-native/interactive-hooks to v0.11.0 (afoxman@microsoft.com)
+- Bump @fluentui-react-native/tokens to v0.11.0 (afoxman@microsoft.com)
+- Bump @fluentui-react-native/component-cache to v1.3.0 (afoxman@microsoft.com)
+- Bump @uifabricshared/foundation-compose to v1.11.0 (afoxman@microsoft.com)
+- Bump @uifabricshared/foundation-composable to v0.10.0 (afoxman@microsoft.com)
+- Bump @uifabricshared/foundation-settings to v0.11.0 (afoxman@microsoft.com)
+
+## 0.18.1
+
+Tue, 09 Nov 2021 23:04:33 GMT
+
+### Patches
+
+- Bump @uifabricshared/foundation-compose to v1.10.22 (67026167+chiuam@users.noreply.github.com)
+
+## 0.18.0
+
+Mon, 08 Nov 2021 20:52:15 GMT
+
+### Minor changes
+
+- Added macOS support (sanajmi@microsoft.com)
+
+### Patches
+
+- Bump macOS minimum version to 10.15 (sanajmi@microsoft.com)
+- Use "FRN" prefix over "RCT" for macOS Callout native code (sanajmi@microsoft.com)
+
 ## 0.17.29
 
-Mon, 01 Nov 2021 18:51:49 GMT
+Mon, 01 Nov 2021 18:53:37 GMT
 
 ### Patches
 

package/FRNCallout.podspec

@@ -0,0 +1,23 @@
+require 'json'
+
+package = JSON.parse(File.read(File.join(__dir__, 'package.json')))
+
+Pod::Spec.new do |s|
+  s.name         = 'FRNCallout'
+  s.version      = package['version']
+  s.summary      = package['description']
+  s.license      = package['license']
+
+  s.authors      = package['author']
+  s.homepage     = "https://github.com/microsoft/fluentui-react-native"
+
+  s.source           = { :git => "https://github.com/microsoft/fluentui-react-native.git", :tag => "#{s.version}" }
+  s.swift_version    = "5"
+
+  s.pod_target_xcconfig = { 'BUILD_LIBRARY_FOR_DISTRIBUTION' => 'YES', 'OTHER_SWIFT_FLAGS' => '-gline-tables-only' }
+
+  s.osx.deployment_target = "10.15"
+  s.osx.source_files      = "macos/*.{swift,h,m}"
+
+  s.dependency 'React'
+end

package/lib/Callout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Callout.d.ts","sourceRoot":"","sources":["../src/Callout.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAe,aAAa,EAAE,iBAAiB,EAAgB,MAAM,iBAAiB,CAAC;AAK9F,eAAO,MAAM,OAAO,6JAkClB,CAAC;AAEH,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Callout.d.ts","sourceRoot":"","sources":["../src/Callout.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAe,aAAa,EAAE,iBAAiB,EAAgB,MAAM,iBAAiB,CAAC;AAQ9F,eAAO,MAAM,OAAO,6JAkClB,CAAC;AAEH,eAAe,OAAO,CAAC"}

package/lib/Callout.js

@@ -25,11 +25,14 @@ import { backgroundColorTokens, borderTokens } from '@fluentui-react-native/toke
 import { compose } 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 } from './Callout.types';
 import { ensureNativeComponent } from '@fluentui-react-native/component-cache';
-var RCTCallout = ensureNativeComponent('RCTCallout');
+var NativeCalloutView = Platform.select({
+    macos: ensureNativeComponent('FRNCallout'),
+    default: ensureNativeComponent('RCTCallout'),
+});
 export var Callout = compose({
     displayName: calloutName,
     usePrepareProps: function (props, useStyling) {
@@ -53,7 +56,7 @@ export var Callout = compose({
     },
     settings: settings,
     slots: {
-        root: RCTCallout,
+        root: NativeCalloutView,
     },
     styles: {
         root: [backgroundColorTokens, borderTokens],

package/lib/Callout.js.map

@@ -1 +1 @@
-{"version":3,"file":"Callout.js","sourceRoot":"","sources":["../src/Callout.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,0CAA0C,CAAC;AAC/E,OAAO,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AACpF,OAAO,EAAE,OAAO,EAAsB,MAAM,oCAAoC,CAAC;AACjF,OAAO,EAAE,aAAa,EAAE,MAAM,qCAAqC,CAAC;AACpE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAkD,MAAM,iBAAiB,CAAC;AAC9F,OAAO,EAAE,qBAAqB,EAAE,MAAM,wCAAwC,CAAC;AAE/E,IAAM,UAAU,GAAG,qBAAqB,CAAC,YAAY,CAAC,CAAC;AAEvD,MAAM,CAAC,IAAM,OAAO,GAAG,OAAO,CAAe;IAC3C,WAAW,EAAE,WAAW;IACxB,eAAe,EAAE,UAAC,KAAoB,EAAE,UAA4C;QAC1E,IAAA,iCAAY,EAAE,qBAAM,EAAE,gDAAO,CAAW;QAChD,IAAM,UAAU,GAAG,mBAAmB,CAAC,YAAY,CAAC,CAAC;QAC/C,IAAA,yBAA8E,EAA7E,oBAAY,EAAE,uBAA+D,CAAC;QAErF,KAAK,CAAC,eAAe,CAAC;YACpB,IAAI,OAAO,MAAM,KAAK,QAAQ,EAAE;gBAC9B,qCAAqC;gBACrC,eAAe,CAAC,MAAM,CAAC,CAAC;aACzB;iBAAM,IAAI,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,OAAO,EAAE;gBAC1B,0CAA0C;gBAC1C,eAAe,CAAC,cAAc,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;aACjD;QACH,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;QAEb,IAAM,SAAS,GAAG,aAAa,CAAoB,UAAU,CAAC,KAAK,CAAC,EAAE;YACpE,IAAI,sBACF,GAAG,EAAE,UAAU,IACZ,CAAC,YAAY,IAAI,EAAE,MAAM,EAAE,YAAY,EAAE,CAAC,GAC1C,IAAI,CACR;SACF,CAAC,CAAC;QAEH,OAAO,EAAE,SAAS,WAAA,EAAE,CAAC;IACvB,CAAC;IACD,QAAQ,EAAE,QAAQ;IAClB,KAAK,EAAE;QACL,IAAI,EAAE,UAAU;KACjB;IACD,MAAM,EAAE;QACN,IAAI,EAAE,CAAC,qBAAqB,EAAE,YAAY,CAAC;KAC5C;CACF,CAAC,CAAC;AAEH,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Callout.js","sourceRoot":"","sources":["../src/Callout.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,0CAA0C,CAAC;AAC/E,OAAO,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AACpF,OAAO,EAAE,OAAO,EAAsB,MAAM,oCAAoC,CAAC;AACjF,OAAO,EAAE,aAAa,EAAE,MAAM,qCAAqC,CAAC;AACpE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAkD,MAAM,iBAAiB,CAAC;AAC9F,OAAO,EAAE,qBAAqB,EAAE,MAAM,wCAAwC,CAAC;AAE/E,IAAM,iBAAiB,GAAG,QAAQ,CAAC,MAAM,CAAC;IACxC,KAAK,EAAE,qBAAqB,CAAC,YAAY,CAAC;IAC1C,OAAO,EAAE,qBAAqB,CAAC,YAAY,CAAC;CAC7C,CAAC,CAAC;AAEH,MAAM,CAAC,IAAM,OAAO,GAAG,OAAO,CAAe;IAC3C,WAAW,EAAE,WAAW;IACxB,eAAe,EAAE,UAAC,KAAoB,EAAE,UAA4C;QAC1E,IAAA,iCAAY,EAAE,qBAAM,EAAE,gDAAO,CAAW;QAChD,IAAM,UAAU,GAAG,mBAAmB,CAAC,YAAY,CAAC,CAAC;QAC/C,IAAA,yBAA8E,EAA7E,oBAAY,EAAE,uBAA+D,CAAC;QAErF,KAAK,CAAC,eAAe,CAAC;YACpB,IAAI,OAAO,MAAM,KAAK,QAAQ,EAAE;gBAC9B,qCAAqC;gBACrC,eAAe,CAAC,MAAM,CAAC,CAAC;aACzB;iBAAM,IAAI,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,OAAO,EAAE;gBAC1B,0CAA0C;gBAC1C,eAAe,CAAC,cAAc,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;aACjD;QACH,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;QAEb,IAAM,SAAS,GAAG,aAAa,CAAoB,UAAU,CAAC,KAAK,CAAC,EAAE;YACpE,IAAI,sBACF,GAAG,EAAE,UAAU,IACZ,CAAC,YAAY,IAAI,EAAE,MAAM,EAAE,YAAY,EAAE,CAAC,GAC1C,IAAI,CACR;SACF,CAAC,CAAC;QAEH,OAAO,EAAE,SAAS,WAAA,EAAE,CAAC;IACvB,CAAC;IACD,QAAQ,EAAE,QAAQ;IAClB,KAAK,EAAE;QACL,IAAI,EAAE,iBAAiB;KACxB;IACD,MAAM,EAAE;QACN,IAAI,EAAE,CAAC,qBAAqB,EAAE,YAAY,CAAC;KAC5C;CACF,CAAC,CAAC;AAEH,eAAe,OAAO,CAAC"}

package/lib/Callout.settings.macos.d.ts

@@ -0,0 +1,4 @@
+import { ICalloutType } from './Callout.types';
+import { IComposeSettings } from '@uifabricshared/foundation-compose';
+export declare const settings: IComposeSettings<ICalloutType>;
+//# sourceMappingURL=Callout.settings.macos.d.ts.map

package/lib/Callout.settings.macos.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Callout.settings.macos.d.ts","sourceRoot":"","sources":["../src/Callout.settings.macos.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oCAAoC,CAAC;AAEtE,eAAO,MAAM,QAAQ,EAAE,gBAAgB,CAAC,YAAY,CAkBnD,CAAC"}

package/lib/Callout.settings.macos.js

@@ -0,0 +1,21 @@
+import { calloutName } from './Callout.types';
+export var settings = [
+    {
+        tokens: {
+            backgroundColor: 'bodyStandoutBackground',
+            beakWidth: 20,
+            borderColor: 'bodyFrameBackground',
+            borderWidth: 1,
+            directionalHint: 'bottonLeftEdge',
+            gapSpace: 0,
+            minPadding: 0,
+        },
+        root: {
+            style: {
+                position: 'absolute',
+            },
+        },
+    },
+    calloutName,
+];
+//# sourceMappingURL=Callout.settings.macos.js.map

package/lib/Callout.settings.macos.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Callout.settings.macos.js","sourceRoot":"","sources":["../src/Callout.settings.macos.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAgB,MAAM,iBAAiB,CAAC;AAG5D,MAAM,CAAC,IAAM,QAAQ,GAAmC;IACtD;QACE,MAAM,EAAE;YACN,eAAe,EAAE,wBAAwB;YACzC,SAAS,EAAE,EAAE;YACb,WAAW,EAAE,qBAAqB;YAClC,WAAW,EAAE,CAAC;YACd,eAAe,EAAE,gBAAgB;YACjC,QAAQ,EAAE,CAAC;YACX,UAAU,EAAE,CAAC;SACd;QACD,IAAI,EAAE;YACJ,KAAK,EAAE;gBACL,QAAQ,EAAE,UAAU;aACrB;SACF;KACF;IACD,WAAW;CACZ,CAAC"}

package/lib/Callout.types.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { ScreenRect, ViewStyle } from 'react-native';
+import { IViewProps } from '@fluentui-react-native/adapters';
 import { IRenderData } from '@uifabricshared/foundation-composable';
 import { IBackgroundColorTokens, IBorderTokens } from '@fluentui-react-native/tokens';
 import { IFocusable } from '@fluentui-react-native/interactive-hooks';
@@ -68,15 +69,18 @@ export interface ICalloutTokens extends IBackgroundColorTokens, CalloutBorderTok
      */
     minPadding?: number;
 }
-export interface ICalloutProps extends ICalloutTokens {
-    accessibilityLabel?: string;
+export interface ICalloutProps extends IViewProps, ICalloutTokens {
+    /**
+     * @platform win32
+     * A string that should be announced when the callout is shown.
+     */
     accessibilityOnShowAnnouncement?: string;
-    accessibilityRole?: string;
     /**
      * A RefObject to access the IFocusable interface. Use this to access the public methods and properties of the component.
      */
     componentRef?: React.RefObject<IFocusable>;
     /**
+     * @platform win32
      * Adds a beak to the Callout, pointing to the anchor target.
      * Notable Win32 limitation: Beak rendering currently limits the border width to its default, and the
      * border width prop will not be honored.
@@ -87,6 +91,7 @@ export interface ICalloutProps extends ICalloutTokens {
      */
     onDismiss?: () => void;
     /**
+     * @platform win32
      * Callback invoked during callout dismissal; if set, focus will not be restored by the callout and onRestoreFocus must
      * result in focus being moved to the appropriate focusable target.
      *
@@ -102,6 +107,7 @@ export interface ICalloutProps extends ICalloutTokens {
      */
     onShow?: () => void;
     /**
+     * @platform win32
      * If true then the callout will attempt to focus the first focusable element that it contains.
      * If it doesn't find an element, no focus will be set. This means that it's the contents responsibility
      * to either set focus or have focusable items.

package/lib/Callout.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Callout.types.d.ts","sourceRoot":"","sources":["../src/Callout.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AACpE,OAAO,EAAE,sBAAsB,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AACtF,OAAO,EAAE,UAAU,EAAE,MAAM,0CAA0C,CAAC;AAEtE,eAAO,MAAM,WAAW,YAAY,CAAC;AAErC;;GAEG;AAEH,oBAAY,eAAe,GACvB,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,CAAC;AAEtB,oBAAY,gBAAgB,GAAG,yBAAyB,GAAG,8BAA8B,CAAC;AAE1F,MAAM,WAAW,iBAAiB;IAChC,WAAW,EAAE;QACX;;WAEG;QACH,aAAa,EAAE,OAAO,CAAC;KACxB,CAAC;CACH;AAED,UAAU,mBAAmB;IAC3B,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,WAAW,CAAC,EAAE,SAAS,CAAC,aAAa,CAAC,CAAC;CACxC;AAED,aAAK,mBAAmB,GAAG,IAAI,CAAC,aAAa,EAAE,MAAM,mBAAmB,CAAC,CAAC;AAE1E,MAAM,WAAW,cAAe,SAAQ,sBAAsB,EAAE,mBAAmB;IACjF;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IAExB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,eAAe,CAAC,EAAE,eAAe,CAAC;IAElC;;;;;;;;;;;OAWG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAEtC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE5B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE3B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc;IAInD,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAK5B,+BAA+B,CAAC,EAAE,MAAM,CAAC;IAKzC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;IAE3C;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IAEvB;;;;;;;;;OASG;IACH,cAAc,CAAC,EAAE,CAAC,iBAAiB,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAEhE;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;;OAIG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,MAAM,CAAC;CACpD;AAED,oBAAY,iBAAiB,GAAG;IAC9B,IAAI,EAAE,aAAa,CAAC;CACrB,CAAC;AAEF,oBAAY,kBAAkB,GAAG,WAAW,CAAC,iBAAiB,CAAC,CAAC;AAEhE,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,aAAa,CAAC;IACrB,SAAS,EAAE,iBAAiB,CAAC;IAC7B,MAAM,EAAE,cAAc,CAAC;CACxB"}
+{"version":3,"file":"Callout.types.d.ts","sourceRoot":"","sources":["../src/Callout.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AACpE,OAAO,EAAE,sBAAsB,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AACtF,OAAO,EAAE,UAAU,EAAE,MAAM,0CAA0C,CAAC;AACtE,eAAO,MAAM,WAAW,YAAY,CAAC;AAErC;;GAEG;AAEH,oBAAY,eAAe,GACvB,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,CAAC;AAEtB,oBAAY,gBAAgB,GAAG,yBAAyB,GAAG,8BAA8B,CAAC;AAE1F,MAAM,WAAW,iBAAiB;IAChC,WAAW,EAAE;QACX;;WAEG;QACH,aAAa,EAAE,OAAO,CAAC;KACxB,CAAC;CACH;AAED,UAAU,mBAAmB;IAC3B,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,WAAW,CAAC,EAAE,SAAS,CAAC,aAAa,CAAC,CAAC;CACxC;AAED,aAAK,mBAAmB,GAAG,IAAI,CAAC,aAAa,EAAE,MAAM,mBAAmB,CAAC,CAAC;AAE1E,MAAM,WAAW,cAAe,SAAQ,sBAAsB,EAAE,mBAAmB;IACjF;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IAExB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,eAAe,CAAC,EAAE,eAAe,CAAC;IAElC;;;;;;;;;;;OAWG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAEtC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE5B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE3B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,aAAc,SAAQ,UAAU,EAAE,cAAc;IAC/D;;;OAGG;IACH,+BAA+B,CAAC,EAAE,MAAM,CAAC;IAEzC;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;IAE3C;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IAEvB;;;;;;;;;;OAUG;IACH,cAAc,CAAC,EAAE,CAAC,iBAAiB,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAEhE;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;;;OAKG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;;OAIG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,MAAM,CAAC;CACpD;AAED,oBAAY,iBAAiB,GAAG;IAC9B,IAAI,EAAE,aAAa,CAAC;CACrB,CAAC;AAEF,oBAAY,kBAAkB,GAAG,WAAW,CAAC,iBAAiB,CAAC,CAAC;AAEhE,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,aAAa,CAAC;IACrB,SAAS,EAAE,iBAAiB,CAAC;IAC7B,MAAM,EAAE,cAAc,CAAC;CACxB"}

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

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

package/lib/__tests__/Callout.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Callout.test.d.ts","sourceRoot":"","sources":["../../src/__tests__/Callout.test.tsx"],"names":[],"mappings":""}

package/lib/__tests__/{Callout.test.win32.js → Callout.test.js}

@@ -5,4 +5,4 @@ it('Callout default props', function () {
     var tree = renderer.create(React.createElement(Callout, null)).toJSON();
     expect(tree).toMatchSnapshot();
 });
-//# sourceMappingURL=Callout.test.win32.js.map
+//# sourceMappingURL=Callout.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Callout.test.js","sourceRoot":"","sources":["../../src/__tests__/Callout.test.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC;AAC7B,OAAO,KAAK,QAAQ,MAAM,qBAAqB,CAAC;AAEhD,EAAE,CAAC,uBAAuB,EAAE;IAC1B,IAAM,IAAI,GAAG,QAAQ,CAAC,MAAM,CAAC,oBAAC,OAAO,OAAG,CAAC,CAAC,MAAM,EAAE,CAAC;IACnD,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;AACjC,CAAC,CAAC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Callout.d.ts","sourceRoot":"","sources":["../src/Callout.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAe,aAAa,EAAE,iBAAiB,EAAgB,MAAM,iBAAiB,CAAC;AAK9F,eAAO,MAAM,OAAO,6JAkClB,CAAC;AAEH,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Callout.d.ts","sourceRoot":"","sources":["../src/Callout.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAe,aAAa,EAAE,iBAAiB,EAAgB,MAAM,iBAAiB,CAAC;AAQ9F,eAAO,MAAM,OAAO,6JAkClB,CAAC;AAEH,eAAe,OAAO,CAAC"}

package/lib-commonjs/Callout.js

@@ -38,7 +38,10 @@ var react_native_1 = require("react-native");
 var Callout_settings_1 = require("./Callout.settings");
 var Callout_types_1 = require("./Callout.types");
 var component_cache_1 = require("@fluentui-react-native/component-cache");
-var RCTCallout = component_cache_1.ensureNativeComponent('RCTCallout');
+var NativeCalloutView = react_native_1.Platform.select({
+    macos: component_cache_1.ensureNativeComponent('FRNCallout'),
+    default: component_cache_1.ensureNativeComponent('RCTCallout'),
+});
 exports.Callout = foundation_compose_1.compose({
     displayName: Callout_types_1.calloutName,
     usePrepareProps: function (props, useStyling) {
@@ -62,7 +65,7 @@ exports.Callout = foundation_compose_1.compose({
     },
     settings: Callout_settings_1.settings,
     slots: {
-        root: RCTCallout,
+        root: NativeCalloutView,
     },
     styles: {
         root: [tokens_1.backgroundColorTokens, tokens_1.borderTokens],

package/lib-commonjs/Callout.js.map

@@ -1 +1 @@
-{"version":3,"file":"Callout.js","sourceRoot":"","sources":["../src/Callout.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,8EAA+E;AAC/E,wDAAoF;AACpF,yEAAiF;AACjF,2EAAoE;AACpE,2CAA+B;AAC/B,6CAA8C;AAC9C,uDAA8C;AAC9C,iDAA8F;AAC9F,0EAA+E;AAE/E,IAAM,UAAU,GAAG,uCAAqB,CAAC,YAAY,CAAC,CAAC;AAE1C,QAAA,OAAO,GAAG,4BAAO,CAAe;IAC3C,WAAW,EAAE,2BAAW;IACxB,eAAe,EAAE,UAAC,KAAoB,EAAE,UAA4C;QAC1E,IAAA,iCAAY,EAAE,qBAAM,EAAE,gDAAO,CAAW;QAChD,IAAM,UAAU,GAAG,uCAAmB,CAAC,YAAY,CAAC,CAAC;QAC/C,IAAA,yBAA8E,EAA7E,oBAAY,EAAE,uBAA+D,CAAC;QAErF,KAAK,CAAC,eAAe,CAAC;YACpB,IAAI,OAAO,MAAM,KAAK,QAAQ,EAAE;gBAC9B,qCAAqC;gBACrC,eAAe,CAAC,MAAM,CAAC,CAAC;aACzB;iBAAM,IAAI,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,OAAO,EAAE;gBAC1B,0CAA0C;gBAC1C,eAAe,CAAC,6BAAc,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;aACjD;QACH,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;QAEb,IAAM,SAAS,GAAG,mCAAa,CAAoB,UAAU,CAAC,KAAK,CAAC,EAAE;YACpE,IAAI,sBACF,GAAG,EAAE,UAAU,IACZ,CAAC,YAAY,IAAI,EAAE,MAAM,EAAE,YAAY,EAAE,CAAC,GAC1C,IAAI,CACR;SACF,CAAC,CAAC;QAEH,OAAO,EAAE,SAAS,WAAA,EAAE,CAAC;IACvB,CAAC;IACD,QAAQ,EAAE,2BAAQ;IAClB,KAAK,EAAE;QACL,IAAI,EAAE,UAAU;KACjB;IACD,MAAM,EAAE;QACN,IAAI,EAAE,CAAC,8BAAqB,EAAE,qBAAY,CAAC;KAC5C;CACF,CAAC,CAAC;AAEH,kBAAe,eAAO,CAAC"}
+{"version":3,"file":"Callout.js","sourceRoot":"","sources":["../src/Callout.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,8EAA+E;AAC/E,wDAAoF;AACpF,yEAAiF;AACjF,2EAAoE;AACpE,2CAA+B;AAC/B,6CAAwD;AACxD,uDAA8C;AAC9C,iDAA8F;AAC9F,0EAA+E;AAE/E,IAAM,iBAAiB,GAAG,uBAAQ,CAAC,MAAM,CAAC;IACxC,KAAK,EAAE,uCAAqB,CAAC,YAAY,CAAC;IAC1C,OAAO,EAAE,uCAAqB,CAAC,YAAY,CAAC;CAC7C,CAAC,CAAC;AAEU,QAAA,OAAO,GAAG,4BAAO,CAAe;IAC3C,WAAW,EAAE,2BAAW;IACxB,eAAe,EAAE,UAAC,KAAoB,EAAE,UAA4C;QAC1E,IAAA,iCAAY,EAAE,qBAAM,EAAE,gDAAO,CAAW;QAChD,IAAM,UAAU,GAAG,uCAAmB,CAAC,YAAY,CAAC,CAAC;QAC/C,IAAA,yBAA8E,EAA7E,oBAAY,EAAE,uBAA+D,CAAC;QAErF,KAAK,CAAC,eAAe,CAAC;YACpB,IAAI,OAAO,MAAM,KAAK,QAAQ,EAAE;gBAC9B,qCAAqC;gBACrC,eAAe,CAAC,MAAM,CAAC,CAAC;aACzB;iBAAM,IAAI,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,OAAO,EAAE;gBAC1B,0CAA0C;gBAC1C,eAAe,CAAC,6BAAc,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;aACjD;QACH,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;QAEb,IAAM,SAAS,GAAG,mCAAa,CAAoB,UAAU,CAAC,KAAK,CAAC,EAAE;YACpE,IAAI,sBACF,GAAG,EAAE,UAAU,IACZ,CAAC,YAAY,IAAI,EAAE,MAAM,EAAE,YAAY,EAAE,CAAC,GAC1C,IAAI,CACR;SACF,CAAC,CAAC;QAEH,OAAO,EAAE,SAAS,WAAA,EAAE,CAAC;IACvB,CAAC;IACD,QAAQ,EAAE,2BAAQ;IAClB,KAAK,EAAE;QACL,IAAI,EAAE,iBAAiB;KACxB;IACD,MAAM,EAAE;QACN,IAAI,EAAE,CAAC,8BAAqB,EAAE,qBAAY,CAAC;KAC5C;CACF,CAAC,CAAC;AAEH,kBAAe,eAAO,CAAC"}

package/lib-commonjs/Callout.settings.macos.d.ts

@@ -0,0 +1,4 @@
+import { ICalloutType } from './Callout.types';
+import { IComposeSettings } from '@uifabricshared/foundation-compose';
+export declare const settings: IComposeSettings<ICalloutType>;
+//# sourceMappingURL=Callout.settings.macos.d.ts.map

package/lib-commonjs/Callout.settings.macos.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Callout.settings.macos.d.ts","sourceRoot":"","sources":["../src/Callout.settings.macos.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oCAAoC,CAAC;AAEtE,eAAO,MAAM,QAAQ,EAAE,gBAAgB,CAAC,YAAY,CAkBnD,CAAC"}

package/lib-commonjs/Callout.settings.macos.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var Callout_types_1 = require("./Callout.types");
+exports.settings = [
+    {
+        tokens: {
+            backgroundColor: 'bodyStandoutBackground',
+            beakWidth: 20,
+            borderColor: 'bodyFrameBackground',
+            borderWidth: 1,
+            directionalHint: 'bottonLeftEdge',
+            gapSpace: 0,
+            minPadding: 0,
+        },
+        root: {
+            style: {
+                position: 'absolute',
+            },
+        },
+    },
+    Callout_types_1.calloutName,
+];
+//# sourceMappingURL=Callout.settings.macos.js.map

package/lib-commonjs/Callout.settings.macos.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Callout.settings.macos.js","sourceRoot":"","sources":["../src/Callout.settings.macos.ts"],"names":[],"mappings":";;AAAA,iDAA4D;AAG/C,QAAA,QAAQ,GAAmC;IACtD;QACE,MAAM,EAAE;YACN,eAAe,EAAE,wBAAwB;YACzC,SAAS,EAAE,EAAE;YACb,WAAW,EAAE,qBAAqB;YAClC,WAAW,EAAE,CAAC;YACd,eAAe,EAAE,gBAAgB;YACjC,QAAQ,EAAE,CAAC;YACX,UAAU,EAAE,CAAC;SACd;QACD,IAAI,EAAE;YACJ,KAAK,EAAE;gBACL,QAAQ,EAAE,UAAU;aACrB;SACF;KACF;IACD,2BAAW;CACZ,CAAC"}

package/lib-commonjs/Callout.types.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { ScreenRect, ViewStyle } from 'react-native';
+import { IViewProps } from '@fluentui-react-native/adapters';
 import { IRenderData } from '@uifabricshared/foundation-composable';
 import { IBackgroundColorTokens, IBorderTokens } from '@fluentui-react-native/tokens';
 import { IFocusable } from '@fluentui-react-native/interactive-hooks';
@@ -68,15 +69,18 @@ export interface ICalloutTokens extends IBackgroundColorTokens, CalloutBorderTok
      */
     minPadding?: number;
 }
-export interface ICalloutProps extends ICalloutTokens {
-    accessibilityLabel?: string;
+export interface ICalloutProps extends IViewProps, ICalloutTokens {
+    /**
+     * @platform win32
+     * A string that should be announced when the callout is shown.
+     */
     accessibilityOnShowAnnouncement?: string;
-    accessibilityRole?: string;
     /**
      * A RefObject to access the IFocusable interface. Use this to access the public methods and properties of the component.
      */
     componentRef?: React.RefObject<IFocusable>;
     /**
+     * @platform win32
      * Adds a beak to the Callout, pointing to the anchor target.
      * Notable Win32 limitation: Beak rendering currently limits the border width to its default, and the
      * border width prop will not be honored.
@@ -87,6 +91,7 @@ export interface ICalloutProps extends ICalloutTokens {
      */
     onDismiss?: () => void;
     /**
+     * @platform win32
      * Callback invoked during callout dismissal; if set, focus will not be restored by the callout and onRestoreFocus must
      * result in focus being moved to the appropriate focusable target.
      *
@@ -102,6 +107,7 @@ export interface ICalloutProps extends ICalloutTokens {
      */
     onShow?: () => void;
     /**
+     * @platform win32
      * If true then the callout will attempt to focus the first focusable element that it contains.
      * If it doesn't find an element, no focus will be set. This means that it's the contents responsibility
      * to either set focus or have focusable items.

package/lib-commonjs/Callout.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Callout.types.d.ts","sourceRoot":"","sources":["../src/Callout.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AACpE,OAAO,EAAE,sBAAsB,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AACtF,OAAO,EAAE,UAAU,EAAE,MAAM,0CAA0C,CAAC;AAEtE,eAAO,MAAM,WAAW,YAAY,CAAC;AAErC;;GAEG;AAEH,oBAAY,eAAe,GACvB,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,CAAC;AAEtB,oBAAY,gBAAgB,GAAG,yBAAyB,GAAG,8BAA8B,CAAC;AAE1F,MAAM,WAAW,iBAAiB;IAChC,WAAW,EAAE;QACX;;WAEG;QACH,aAAa,EAAE,OAAO,CAAC;KACxB,CAAC;CACH;AAED,UAAU,mBAAmB;IAC3B,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,WAAW,CAAC,EAAE,SAAS,CAAC,aAAa,CAAC,CAAC;CACxC;AAED,aAAK,mBAAmB,GAAG,IAAI,CAAC,aAAa,EAAE,MAAM,mBAAmB,CAAC,CAAC;AAE1E,MAAM,WAAW,cAAe,SAAQ,sBAAsB,EAAE,mBAAmB;IACjF;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IAExB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,eAAe,CAAC,EAAE,eAAe,CAAC;IAElC;;;;;;;;;;;OAWG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAEtC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE5B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE3B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc;IAInD,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAK5B,+BAA+B,CAAC,EAAE,MAAM,CAAC;IAKzC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;IAE3C;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IAEvB;;;;;;;;;OASG;IACH,cAAc,CAAC,EAAE,CAAC,iBAAiB,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAEhE;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;;OAIG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,MAAM,CAAC;CACpD;AAED,oBAAY,iBAAiB,GAAG;IAC9B,IAAI,EAAE,aAAa,CAAC;CACrB,CAAC;AAEF,oBAAY,kBAAkB,GAAG,WAAW,CAAC,iBAAiB,CAAC,CAAC;AAEhE,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,aAAa,CAAC;IACrB,SAAS,EAAE,iBAAiB,CAAC;IAC7B,MAAM,EAAE,cAAc,CAAC;CACxB"}
+{"version":3,"file":"Callout.types.d.ts","sourceRoot":"","sources":["../src/Callout.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AACpE,OAAO,EAAE,sBAAsB,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AACtF,OAAO,EAAE,UAAU,EAAE,MAAM,0CAA0C,CAAC;AACtE,eAAO,MAAM,WAAW,YAAY,CAAC;AAErC;;GAEG;AAEH,oBAAY,eAAe,GACvB,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,CAAC;AAEtB,oBAAY,gBAAgB,GAAG,yBAAyB,GAAG,8BAA8B,CAAC;AAE1F,MAAM,WAAW,iBAAiB;IAChC,WAAW,EAAE;QACX;;WAEG;QACH,aAAa,EAAE,OAAO,CAAC;KACxB,CAAC;CACH;AAED,UAAU,mBAAmB;IAC3B,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,WAAW,CAAC,EAAE,SAAS,CAAC,aAAa,CAAC,CAAC;CACxC;AAED,aAAK,mBAAmB,GAAG,IAAI,CAAC,aAAa,EAAE,MAAM,mBAAmB,CAAC,CAAC;AAE1E,MAAM,WAAW,cAAe,SAAQ,sBAAsB,EAAE,mBAAmB;IACjF;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IAExB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,eAAe,CAAC,EAAE,eAAe,CAAC;IAElC;;;;;;;;;;;OAWG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAEtC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE5B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE3B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,aAAc,SAAQ,UAAU,EAAE,cAAc;IAC/D;;;OAGG;IACH,+BAA+B,CAAC,EAAE,MAAM,CAAC;IAEzC;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;IAE3C;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IAEvB;;;;;;;;;;OAUG;IACH,cAAc,CAAC,EAAE,CAAC,iBAAiB,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAEhE;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;;;OAKG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;;OAIG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,MAAM,CAAC;CACpD;AAED,oBAAY,iBAAiB,GAAG;IAC9B,IAAI,EAAE,aAAa,CAAC;CACrB,CAAC;AAEF,oBAAY,kBAAkB,GAAG,WAAW,CAAC,iBAAiB,CAAC,CAAC;AAEhE,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,aAAa,CAAC;IACrB,SAAS,EAAE,iBAAiB,CAAC;IAC7B,MAAM,EAAE,cAAc,CAAC;CACxB"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Callout.test.d.ts","sourceRoot":"","sources":["../../src/__tests__/Callout.test.tsx"],"names":[],"mappings":""}

package/lib-commonjs/__tests__/{Callout.test.win32.js → Callout.test.js}

@@ -14,4 +14,4 @@ it('Callout default props', function () {
     var tree = renderer.create(React.createElement(__1.Callout, null)).toJSON();
     expect(tree).toMatchSnapshot();
 });
-//# sourceMappingURL=Callout.test.win32.js.map
+//# sourceMappingURL=Callout.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Callout.test.js","sourceRoot":"","sources":["../../src/__tests__/Callout.test.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,2CAA+B;AAC/B,wBAA6B;AAC7B,4DAAgD;AAEhD,EAAE,CAAC,uBAAuB,EAAE;IAC1B,IAAM,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"}

package/macos/Callout.swift

@@ -0,0 +1,320 @@
+import Foundation
+import AppKit
+
+@objc(FRNCalloutView)
+class CalloutView: RCTView, CalloutWindowLifeCycleDelegate {
+
+	@objc public var target: NSNumber? {
+		didSet {
+			guard let targetView = bridge?.uiManager.view(forReactTag: target) else {
+				preconditionFailure("Invalid target react tag")
+			}
+			anchorView = targetView
+			updateCalloutFrameToAnchor()
+		}
+	}
+
+	@objc public var anchorRect: NSRect = .null {
+		didSet {
+			updateCalloutFrameToAnchor()
+		}
+	}
+
+	@objc public var directionalHint: NSRectEdge = .maxY {
+		didSet {
+			updateCalloutFrameToAnchor()
+		}
+	}
+
+	@objc public var onShow: RCTBubblingEventBlock?
+
+	@objc public var onDismiss: RCTBubblingEventBlock?
+
+	public weak var bridge: RCTBridge?
+
+	private init() {
+		super.init(frame: .zero)
+	}
+
+	required init?(coder: NSCoder) {
+		preconditionFailure()
+	}
+
+	convenience init(bridge: RCTBridge) {
+		self.init()
+		self.bridge = bridge
+	}
+
+	override func viewDidMoveToWindow() {
+		super.viewDidMoveToWindow()
+		if (window != nil) {
+			showCallout()
+		} else {
+			dismissCallout()
+		}
+	}
+
+
+	// MARK: RCTComponent Overrides
+
+	override func insertReactSubview(_ subview: NSView!, at atIndex: Int) {
+		/*
+		  If we attach a touch handler to the proxy view directly, the touch coordinates
+		  are incorrect and the wrong subview recieves the touch event, most likely
+		  because macOS screen coordinates have a flipped Y axis. The workaround is to
+		  attach a separate touch handler to each subview
+		 */
+		guard let touchHandler = RCTTouchHandler(bridge: bridge) else {
+			preconditionFailure("Callout could not create RCTTouchHandler")
+		}
+		touchHandler.attach(to: subview as? RCTUIView)
+
+		proxyView.insertReactSubview(subview, at: atIndex)
+	}
+
+	override func didUpdateReactSubviews() {
+		proxyView.didUpdateReactSubviews()
+	}
+
+	override func reactSetFrame(_ frame: CGRect) {
+		proxyView.reactSetFrame(frame)
+		updateCalloutFrameToAnchor()
+	}
+
+	// MARK: WindowLifeCycleDelegate
+
+	func didDetectHitOutsideCallout(calloutWindow: CalloutWindow) {
+		 dismissCallout()
+	}
+
+	func applicationDidResignActiveForCalloutWindow(calloutWindow: CalloutWindow) {
+		 dismissCallout()
+	}
+
+	// MARK: Private methods
+
+	private func showCallout() {
+		updateCalloutFrameToAnchor()
+		calloutWindow.makeKeyAndOrderFront(self)
+		didShowCallout()
+	}
+
+	private func dismissCallout() {
+		calloutWindow.close()
+		didDismissCallout()
+	}
+
+	/// Sets the frame of the Callout Window (in screen coordinates to be off of the Anchor on the preferred edge
+	private func updateCalloutFrameToAnchor() {
+		guard window != nil else {
+			return
+		}
+
+		// Prefer anchorRect over anchorView if available
+		let anchorScreenRect = anchorRect.equalTo(.null) ? calculateAnchorViewScreenRect() : calculateAnchorRectScreenRect()
+		let calloutScreenRect = bestCalloutRect(relativeTo: anchorScreenRect)
+
+		calloutWindow.setFrame(calloutScreenRect, display: false)
+	}
+
+	/// Calculates the NSRect of the Anchor Rect in screen coordinates
+	private func calculateAnchorRectScreenRect() -> NSRect {
+		guard let window = window  else {
+			preconditionFailure("No window found")
+		}
+
+		guard let screenFrame = window.screen?.visibleFrame ?? NSScreen.main?.visibleFrame else {
+			preconditionFailure("No screen Available")
+		}
+
+		// The anchor Rect is given in the coordinate space of the root view.
+		// Find the root view to convert to screen coordinates
+		var rootView: NSView = self
+		while (!rootView.isReactRootView()) {
+			rootView = rootView.reactSuperview()
+		}
+		let rootViewBoundsInWindow = rootView.convert(rootView.bounds, to: nil)
+		let rootViewRectInScreenCoordinates = window.convertToScreen(rootViewBoundsInWindow)
+
+		// macOS uses a flipped Y coordinate (I.E: (0,0) is on the bottom left of the screen). However,
+		// React Native assumes a standard Y coordinate. Let's flip the Y coordinate of our rect to match
+		let anchorScreenRectOrigin = NSPoint(
+			x: rootViewRectInScreenCoordinates.origin.x + self.anchorRect.origin.x,
+			y: screenFrame.height - (rootViewRectInScreenCoordinates.origin.y + self.anchorRect.origin.y)
+		)
+		let anchorRectInScreenCoordinates = NSRect(origin: anchorScreenRectOrigin, size: anchorRect.size)
+
+		return anchorRectInScreenCoordinates
+	}
+
+	/// Calculates the NSRect of the anchorView in the coordinate space of the current screen
+	private func calculateAnchorViewScreenRect() -> NSRect {
+		guard let anchorView = anchorView else {
+			preconditionFailure("No anchor view provided to position the Callout")
+		}
+
+		guard let window = window  else {
+			preconditionFailure("No window found")
+		}
+
+		let anchorBoundsInWindow = anchorView.convert(anchorView.bounds, to: nil)
+		let anchorFrameInScreenCoordinates = window.convertToScreen(anchorBoundsInWindow)
+
+		return anchorFrameInScreenCoordinates
+	}
+
+	/// Calculates the rect in screen coordinates the callout should be positioned in relative to the anchor rect, adjusting if we are close to a screen edge
+	private func bestCalloutRect(relativeTo anchorScreenRect: NSRect) -> NSRect {
+
+		guard let screenFrame = window?.screen?.visibleFrame ?? NSScreen.main?.visibleFrame else {
+			preconditionFailure("No Screen Available")
+		}
+
+		let calloutFrame = proxyView.frame
+
+		// Find our preferred origin based on the directional hint
+		let calloutOrigin: NSPoint = {
+			var origin = NSPoint()
+
+			switch(directionalHint) {
+			case .minX:
+				origin.x = NSMinX(anchorScreenRect) - calloutFrame.size.width
+				origin.y = NSMaxY(anchorScreenRect) - calloutFrame.size.height
+			case .minY:
+				origin.x = NSMinX(anchorScreenRect)
+				origin.y = NSMaxY(anchorScreenRect)
+			case .maxX:
+				origin.x = NSMaxX(anchorScreenRect)
+				origin.y = NSMaxY(anchorScreenRect) - calloutFrame.size.height
+			case .maxY:
+				// When in RTL mode, align the right edges of the menu and flyout anchor
+				if (NSApp.userInterfaceLayoutDirection == .rightToLeft) {
+					origin.x = NSMaxX(anchorScreenRect) - calloutFrame.size.width
+				} else {
+					origin.x = NSMinX(anchorScreenRect);
+				}
+				origin.y = NSMinY(anchorScreenRect) - calloutFrame.size.height
+			@unknown default:
+				preconditionFailure("Unknown directional hint")
+			}
+			return origin
+		}()
+
+		var calloutScreenRect = NSRect(origin: calloutOrigin, size: calloutFrame.size)
+
+		// Reposition the callout if it doesn't fit on screen
+		if (!NSContainsRect(screenFrame, calloutScreenRect)) {
+			switch(directionalHint) {
+			case .minX:
+				// If we go off the left edge, we may need to flip to presenting rightward from the rightEdge of anchorScreenRect
+				if (NSMinX(calloutScreenRect) < NSMinX(screenFrame)) {
+					let maxXEdgeSpace = NSMaxX(screenFrame) - NSMaxX(anchorScreenRect)
+					let minXEdgeSpace = NSMinX(anchorScreenRect) - NSMinX(screenFrame)
+					if (maxXEdgeSpace > minXEdgeSpace) {
+						calloutScreenRect.origin.x = NSMaxX(anchorScreenRect);
+					}
+				}
+				// If we go off the bottom of the screen, just slide up until we fit
+				if (NSMinY(calloutScreenRect) < NSMinY(screenFrame)) {
+					calloutScreenRect.origin.y = NSMinY(screenFrame)
+				}
+			case .minY:
+				// If we go off the top of the screen, check if there's more room on screen below the anchorScreenRect.
+				if (NSMaxY(calloutScreenRect) > NSMaxY(screenFrame)) {
+					let maxYEdgeSpace = NSMaxY(screenFrame) - NSMaxY(anchorScreenRect)
+					let minYEdgeSpace = NSMinY(anchorScreenRect) - NSMinY(screenFrame)
+
+					// Flip to presenting below anchorScreenRect
+					if (minYEdgeSpace > maxYEdgeSpace) {
+						calloutScreenRect.origin.y = NSMinY(anchorScreenRect) - NSHeight(calloutScreenRect)
+					}
+				}
+				// If we go off the right edge, just slide to the left until we fit
+				if (NSMaxX(calloutScreenRect) > NSMaxX(screenFrame)) {
+					calloutScreenRect.origin.x = NSMaxY(screenFrame) - NSWidth(calloutScreenRect)
+				}
+			case .maxX:
+				// If we go off the right edge, we may need to flip to presenting leftward from the leftEdge of anchorScreenRect
+				if (NSMaxX(calloutScreenRect) > NSMaxX(screenFrame)) {
+					let maxXEdgeSpace = NSMaxX(screenFrame) - NSMaxX(anchorScreenRect)
+					let minXEdgeSpace = NSMinX(anchorScreenRect) - NSMinX(screenFrame)
+					if (minXEdgeSpace > maxXEdgeSpace) {
+						calloutScreenRect.origin.x = NSMinX(anchorScreenRect) - NSWidth(calloutScreenRect)
+					}
+				}
+				// If we go off the bottom of the screen, just slide up until we fit
+				if (NSMinY(calloutScreenRect) < NSMinY(screenFrame)) {
+					calloutScreenRect.origin.y = NSMinY(screenFrame);
+				}
+			case .maxY:
+				// If we go off the bottom of the screen, check if there's more room on screen above the anchorScreenRect.
+				if (NSMinY(calloutScreenRect) < NSMinY(screenFrame)) {
+					let maxYEdgeSpace = NSMaxY(screenFrame) - NSMaxY(anchorScreenRect)
+					let minYEdgeSpace = NSMinY(anchorScreenRect) - NSMinY(screenFrame)
+
+					// Flip to presenting above anchorScreenRect
+					if (maxYEdgeSpace > minYEdgeSpace) {
+						calloutScreenRect.origin.y = NSMaxY(anchorScreenRect)
+					}
+				}
+				// If we go off the right edge, just slide to the left until we fit
+				if (NSMaxX(calloutScreenRect) > NSMaxX(screenFrame)) {
+					calloutScreenRect.origin.x = NSMaxX(screenFrame) - NSWidth(calloutScreenRect)
+				}
+			@unknown default:
+				preconditionFailure("Unknown directional hint")
+			}
+		}
+		return calloutScreenRect
+	}
+
+	private func didShowCallout() {
+		onShow?([:])
+	}
+
+	private func didDismissCallout() {
+		if let onDismiss = onDismiss {
+			guard let reactTag = reactTag else {
+				preconditionFailure("React Tag missing")
+			}
+			let event: [AnyHashable: Any] = ["target": reactTag]
+			onDismiss(event)
+		}
+	}
+
+	// MARK: Private variables
+
+	private var anchorView: NSView?
+
+	private var proxyView: RCTView = RCTView()
+
+	private lazy var calloutWindow: CalloutWindow = {
+		let window = CalloutWindow()
+		window.windowLifeCycleDelegate = self
+
+		let visualEffect = NSVisualEffectView()
+		visualEffect.translatesAutoresizingMaskIntoConstraints = false
+		visualEffect.material = .menu
+		visualEffect.state = .active
+		visualEffect.wantsLayer = true
+		visualEffect.layer?.cornerRadius = calloutWindowCornerRadius
+
+		guard let contentView = window.contentView else {
+			preconditionFailure("Callout window has no content view")
+		}
+
+		contentView.addSubview(visualEffect)
+		NSLayoutConstraint.activate([
+			visualEffect.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
+			visualEffect.trailingAnchor.constraint(equalTo: contentView.trailingAnchor),
+			visualEffect.topAnchor.constraint(equalTo: contentView.topAnchor),
+			visualEffect.bottomAnchor.constraint(equalTo: contentView.bottomAnchor),
+		])
+
+		visualEffect.addSubview(proxyView)
+
+		return window
+	}()
+}
+
+private var calloutWindowCornerRadius: CGFloat = 5.0

package/macos/CalloutManager.swift

@@ -0,0 +1,12 @@
+import Foundation
+
+@objc(FRNCalloutManager)
+class CalloutManager: RCTViewManager {
+	override func view()->NSView! {
+		return CalloutView(bridge: bridge)
+	}
+
+	override class func requiresMainQueueSetup() -> Bool {
+		return true
+	}
+}

package/macos/CalloutWindow.swift

@@ -0,0 +1,52 @@
+import Foundation
+import AppKit
+
+protocol CalloutWindowLifeCycleDelegate {
+	/*
+	 * Notify the CalloutWindowLifeCycle object that the user touched/clicked outside the bounds of the callout.
+	 */
+	func didDetectHitOutsideCallout(calloutWindow: CalloutWindow)
+
+	/*
+	 * Notify the CalloutWindowLifeCycle object that the window the callout is in is no longer active.
+	 */
+	func applicationDidResignActiveForCalloutWindow(calloutWindow: CalloutWindow)
+}
+
+class CalloutWindow: NSWindow {
+
+	public var windowLifeCycleDelegate: CalloutWindowLifeCycleDelegate?
+
+	override init(contentRect: NSRect, styleMask style: NSWindow.StyleMask, backing backingStoreType: NSWindow.BackingStoreType, defer flag: Bool) {
+		super.init(contentRect: contentRect, styleMask: style, backing: backingStoreType, defer: flag)
+		isReleasedWhenClosed = true
+
+		styleMask = .borderless
+		level = .popUpMenu
+		backgroundColor = .clear
+		isMovable = false
+
+		NotificationCenter.default.addObserver(self, selector: #selector(appDidChangeActive(notification:)), name: NSApplication.didResignActiveNotification, object: nil)
+
+		mouseEventMonitor = NSEvent.addLocalMonitorForEvents(matching: .leftMouseUp, handler: { (event) -> NSEvent? in
+			if (event.window != self) {
+				self.windowLifeCycleDelegate?.didDetectHitOutsideCallout(calloutWindow: self)
+			}
+			return event
+		})
+	}
+
+	override var canBecomeKey: Bool {
+		return true
+	}
+
+	override var canBecomeMain: Bool {
+		return false
+	}
+
+	@objc func appDidChangeActive(notification: NSNotification) {
+		windowLifeCycleDelegate?.applicationDidResignActiveForCalloutWindow(calloutWindow: self)
+	}
+
+	private var mouseEventMonitor: Any?
+}

package/macos/FRNCalloutManager.h

@@ -0,0 +1,4 @@
+#import <React/RCTTouchHandler.h>
+#import <React/RCTUIManager.h>
+#import <React/RCTView.h>
+#import <React/RCTViewManager.h>

package/macos/FRNCalloutManager.m

@@ -0,0 +1,49 @@
+#import <FRNCalloutManager.h>
+
+@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.
+// Note this does not take into account that macOS uses a flipped Y axis.
++ (NSRect)screenRect:(id)json
+{
+	CGFloat x = [RCTConvert CGFloat:json[@"screenX"]];
+	CGFloat y = [RCTConvert CGFloat:json[@"screenX"]];
+	CGFloat width = [RCTConvert CGFloat:json[@"width"]];
+	CGFloat height = [RCTConvert CGFloat:json[@"height"]];
+	return NSMakeRect(x, y, width, height);
+}
+
+// Collapse the directional hint options to the 4 NSRectEdge options
+RCT_ENUM_CONVERTER(NSRectEdge, (@{
+	@"leftTopEdge": @(NSRectEdgeMinX),
+	@"leftCenter": @(NSRectEdgeMinX),
+	@"leftBottomEdge": @(NSRectEdgeMinX),
+	@"topLeftEdge": @(NSRectEdgeMaxY),
+	@"topAutoEdge": @(NSRectEdgeMaxY),
+	@"topCenter": @(NSRectEdgeMaxY),
+	@"topRightEdge": @(NSRectEdgeMaxY),
+	@"rightTopEdge": @(NSRectEdgeMaxX),
+	@"rightCenter": @(NSRectEdgeMaxX),
+	@"rightBottomEdge": @(NSRectEdgeMaxX),
+	@"bottonLeftEdge": @(NSRectEdgeMinY),
+	@"bottomAutoEdge": @(NSRectEdgeMinY),
+	@"bottomCenter": @(NSRectEdgeMinY),
+	@"bottomRightEdge": @(NSRectEdgeMinY),
+}), NSRectEdgeMaxY, integerValue);
+
+@end
+
+@interface RCT_EXTERN_MODULE(FRNCalloutManager, RCTViewManager)
+
+RCT_EXPORT_VIEW_PROPERTY(target, NSNumber)
+
+RCT_EXPORT_VIEW_PROPERTY(anchorRect, screenRect)
+
+RCT_EXPORT_VIEW_PROPERTY(directionalHint, NSRectEdge)
+
+RCT_EXPORT_VIEW_PROPERTY(onShow, RCTBubblingEventBlock)
+
+RCT_EXPORT_VIEW_PROPERTY(onDismiss, RCTBubblingEventBlock)
+
+@end

package/package.json

@@ -1,7 +1,10 @@
 {
   "name": "@fluentui-react-native/callout",
-  "version": "0.17.29",
+  "version": "0.19.1",
   "description": "A cross-platform Callout component using the Fluent Design System",
+  "license": "MIT",
+  "author": "",
+  "homepage": "https://github.com/microsoft/fluentui-react-native",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -17,23 +20,22 @@
     "prettier-fix": "fluentui-scripts prettier --fix true"
   },
   "dependencies": {
-    "@uifabricshared/foundation-compose": "^1.10.21",
-    "@fluentui-react-native/component-cache": "^1.2.3",
-    "@fluentui-react-native/interactive-hooks": ">=0.10.53 <1.0.0",
-    "@fluentui-react-native/tokens": ">=0.10.3 <1.0.0",
-    "@uifabricshared/foundation-composable": ">=0.9.3 <1.0.0",
-    "@uifabricshared/foundation-settings": ">=0.10.3 <1.0.0"
+    "@fluentui-react-native/adapters": "^0.8.1",
+    "@fluentui-react-native/component-cache": "^1.3.0",
+    "@fluentui-react-native/interactive-hooks": ">=0.11.1 <1.0.0",
+    "@fluentui-react-native/tokens": ">=0.11.1 <1.0.0",
+    "@uifabricshared/foundation-composable": ">=0.10.0 <1.0.0",
+    "@uifabricshared/foundation-compose": "^1.11.1",
+    "@uifabricshared/foundation-settings": ">=0.11.0 <1.0.0"
   },
   "devDependencies": {
-    "@types/react-native": "^0.63.0",
+    "@fluentui-react-native/eslint-config-rules": "^0.1.1",
+    "@types/react-native": "^0.64.0",
     "@uifabricshared/build-native": "^0.1.1",
-    "@uifabricshared/eslint-config-rules": "^0.1.1",
-    "react-native": "^0.63.4"
+    "react-native": "^0.64.3"
   },
   "peerDependencies": {
-    "react": ">=16.13.1",
-    "react-native": ">=0.63.4"
-  },
-  "author": "",
-  "license": "MIT"
+    "react": ">=17.0.1",
+    "react-native": ">=0.64.3"
+  }
 }

package/src/Callout.settings.macos.ts

@@ -0,0 +1,22 @@
+import { calloutName, ICalloutType } from './Callout.types';
+import { IComposeSettings } from '@uifabricshared/foundation-compose';
+
+export const settings: IComposeSettings<ICalloutType> = [
+  {
+    tokens: {
+      backgroundColor: 'bodyStandoutBackground',
+      beakWidth: 20,
+      borderColor: 'bodyFrameBackground',
+      borderWidth: 1,
+      directionalHint: 'bottonLeftEdge',
+      gapSpace: 0,
+      minPadding: 0,
+    },
+    root: {
+      style: {
+        position: 'absolute',
+      },
+    },
+  },
+  calloutName,
+];

package/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],

package/src/Callout.types.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { ScreenRect, ViewStyle } from 'react-native';
+import { IViewProps } from '@fluentui-react-native/adapters';
 import { IRenderData } from '@uifabricshared/foundation-composable';
 import { IBackgroundColorTokens, IBorderTokens } from '@fluentui-react-native/tokens';
 import { IFocusable } from '@fluentui-react-native/interactive-hooks';
-
 export const calloutName = 'Callout';
 
 /**
@@ -98,28 +98,20 @@ export interface ICalloutTokens extends IBackgroundColorTokens, CalloutBorderTok
   minPadding?: number;
 }
 
-export interface ICalloutProps extends ICalloutTokens {
-  /*
-   * Used by screen readers to inform the user about the control.
-   */
-  accessibilityLabel?: string;
-
-  /*
+export interface ICalloutProps extends IViewProps, ICalloutTokens {
+  /**
+   * @platform win32
    * A string that should be announced when the callout is shown.
    */
   accessibilityOnShowAnnouncement?: string;
 
-  /*
-   * Used by screen readers to inform the user about the purpose of the control.
-   */
-  accessibilityRole?: string;
-
   /**
    * A RefObject to access the IFocusable interface. Use this to access the public methods and properties of the component.
    */
   componentRef?: React.RefObject<IFocusable>;
 
   /**
+   * @platform win32
    * Adds a beak to the Callout, pointing to the anchor target.
    * Notable Win32 limitation: Beak rendering currently limits the border width to its default, and the
    * border width prop will not be honored.
@@ -132,6 +124,7 @@ export interface ICalloutProps extends ICalloutTokens {
   onDismiss?: () => void;
 
   /**
+   * @platform win32
    * Callback invoked during callout dismissal; if set, focus will not be restored by the callout and onRestoreFocus must
    * result in focus being moved to the appropriate focusable target.
    *
@@ -149,6 +142,7 @@ export interface ICalloutProps extends ICalloutTokens {
   onShow?: () => void;
 
   /**
+   * @platform win32
    * If true then the callout will attempt to focus the first focusable element that it contains.
    * If it doesn't find an element, no focus will be set. This means that it's the contents responsibility
    * to either set focus or have focusable items.

package/lib/__tests__/Callout.test.win32.d.ts

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

package/lib/__tests__/Callout.test.win32.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Callout.test.win32.d.ts","sourceRoot":"","sources":["../../src/__tests__/Callout.test.win32.tsx"],"names":[],"mappings":""}

package/lib/__tests__/Callout.test.win32.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Callout.test.win32.js","sourceRoot":"","sources":["../../src/__tests__/Callout.test.win32.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC;AAC7B,OAAO,KAAK,QAAQ,MAAM,qBAAqB,CAAC;AAEhD,EAAE,CAAC,uBAAuB,EAAE;IAC1B,IAAM,IAAI,GAAG,QAAQ,CAAC,MAAM,CAAC,oBAAC,OAAO,OAAG,CAAC,CAAC,MAAM,EAAE,CAAC;IACnD,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;AACjC,CAAC,CAAC,CAAC"}

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"Callout.test.win32.d.ts","sourceRoot":"","sources":["../../src/__tests__/Callout.test.win32.tsx"],"names":[],"mappings":""}

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

@@ -1 +0,0 @@
-{"version":3,"file":"Callout.test.win32.js","sourceRoot":"","sources":["../../src/__tests__/Callout.test.win32.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,2CAA+B;AAC/B,wBAA6B;AAC7B,4DAAgD;AAEhD,EAAE,CAAC,uBAAuB,EAAE;IAC1B,IAAM,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"}