@fluentui-react-native/callout 0.19.18 → 0.19.22

package/CHANGELOG.json

@@ -2,7 +2,73 @@
   "name": "@fluentui-react-native/callout",
   "entries": [
     {
-      "date": "Tue, 25 Jan 2022 21:54:01 GMT",
+      "date": "Wed, 02 Feb 2022 02:26:23 GMT",
+      "tag": "@fluentui-react-native/callout_v0.19.22",
+      "version": "0.19.22",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui-react-native/callout",
+            "comment": "Bump @fluentui-react-native/interactive-hooks to v0.12.2",
+            "commit": "c42dec6d24b24ded9a85dd11076e49d9b92980aa"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui-react-native/callout",
+            "comment": "Bump @uifabricshared/foundation-compose to v1.11.9",
+            "commit": "c42dec6d24b24ded9a85dd11076e49d9b92980aa"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 28 Jan 2022 20:52:39 GMT",
+      "tag": "@fluentui-react-native/callout_v0.19.21",
+      "version": "0.19.21",
+      "comments": {
+        "patch": [
+          {
+            "author": "sanajmi@microsoft.com",
+            "package": "@fluentui-react-native/callout",
+            "commit": "de0a37f48e525af8a22a37be8234731308e585c5",
+            "comment": "ContextualMenu macOS: fix focus shifting on click"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 26 Jan 2022 20:31:04 GMT",
+      "tag": "@fluentui-react-native/callout_v0.19.20",
+      "version": "0.19.20",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui-react-native/callout",
+            "comment": "Bump @fluentui-react-native/interactive-hooks to v0.12.1",
+            "commit": "1f6a66699e8a06bfd55a613ee9019ba8ca27d0b4"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 26 Jan 2022 17:02:27 GMT",
+      "tag": "@fluentui-react-native/callout_v0.19.19",
+      "version": "0.19.19",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui-react-native/callout",
+            "comment": "Bump @fluentui-react-native/interactive-hooks to v0.12.0",
+            "commit": "883ef66b94a1efb5d429c5ecad015f312be3b4c3"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 25 Jan 2022 21:55:31 GMT",
       "tag": "@fluentui-react-native/callout_v0.19.18",
       "version": "0.19.18",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,45 @@
 # Change Log - @fluentui-react-native/callout
 
-This log was last generated on Tue, 25 Jan 2022 21:54:01 GMT and should not be manually modified.
+This log was last generated on Wed, 02 Feb 2022 02:26:23 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 0.19.22
+
+Wed, 02 Feb 2022 02:26:23 GMT
+
+### Patches
+
+- Bump @fluentui-react-native/interactive-hooks to v0.12.2
+- Bump @uifabricshared/foundation-compose to v1.11.9
+
+## 0.19.21
+
+Fri, 28 Jan 2022 20:52:39 GMT
+
+### Patches
+
+- ContextualMenu macOS: fix focus shifting on click (sanajmi@microsoft.com)
+
+## 0.19.20
+
+Wed, 26 Jan 2022 20:31:04 GMT
+
+### Patches
+
+- Bump @fluentui-react-native/interactive-hooks to v0.12.1
+
+## 0.19.19
+
+Wed, 26 Jan 2022 17:02:27 GMT
+
+### Patches
+
+- Bump @fluentui-react-native/interactive-hooks to v0.12.0
+
 ## 0.19.18
 
-Tue, 25 Jan 2022 21:54:01 GMT
+Tue, 25 Jan 2022 21:55:31 GMT
 
 ### Patches
 

package/macos/Callout.swift

@@ -58,17 +58,6 @@ class CalloutView: RCTView, CalloutWindowLifeCycleDelegate {
 	// 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)
 	}
 
@@ -281,37 +270,53 @@ class CalloutView: RCTView, CalloutWindowLifeCycleDelegate {
 
 	// MARK: Private variables
 
+	/// The view the Callout is presented from, if anchorRect is nil.
 	private var anchorView: NSView?
 
-	private var proxyView = RCTView()
+	/// The  view we forward Callout's Children to. It's hosted within the CalloutWindow's
+	/// view heirarchy, ensuring our React Views are not placed in the main window.
+	private lazy var proxyView: NSView = {
+		let visualEffectView = FlippedVisualEffectView()
+		visualEffectView.translatesAutoresizingMaskIntoConstraints = false
+		visualEffectView.material = .menu
+		visualEffectView.state = .active
+		visualEffectView.wantsLayer = true
+		visualEffectView.layer?.cornerRadius = calloutWindowCornerRadius
+
+		/**
+		 * We can't directly call touchHandler.attach(to:) because `visualEffectView` is not an RCTUIView.
+		 * We get around this limitation by just replicating what `attach` did internally: add a gestureRecognizer.
+		 */
+		guard let touchHandler = RCTTouchHandler(bridge: bridge) else {
+			preconditionFailure("Callout could not create RCTTouchHandler")
+		}
+		visualEffectView.addGestureRecognizer(touchHandler)
+
+		return visualEffectView
+	}()
 
 	private lazy var calloutWindow: CalloutWindow = {
 		let window = CalloutWindow()
 		window.lifeCycleDelegate = 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)
+		contentView.addSubview(proxyView)
+		window.initialFirstResponder = proxyView
 
 		return window
 	}()
 }
 
+/// React Native macOS uses a flipped coordinate space by default. Let's stay consistent and
+/// ensure any views hosting React Native views are also flipped. This helps RCTTouchHandler
+/// register clicks in the right location.
+private class FlippedVisualEffectView: NSVisualEffectView {
+	override var isFlipped: Bool {
+		return true
+	}
+}
+
 private var calloutWindowCornerRadius: CGFloat = 5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/callout",
-  "version": "0.19.18",
+  "version": "0.19.22",
   "description": "A cross-platform Callout component using the Fluent Design System",
   "license": "MIT",
   "author": "",
@@ -27,10 +27,10 @@
   "dependencies": {
     "@fluentui-react-native/adapters": "^0.8.2",
     "@fluentui-react-native/component-cache": "^1.3.1",
-    "@fluentui-react-native/interactive-hooks": ">=0.11.15 <1.0.0",
+    "@fluentui-react-native/interactive-hooks": ">=0.12.2 <1.0.0",
     "@fluentui-react-native/tokens": ">=0.11.5 <1.0.0",
     "@uifabricshared/foundation-composable": ">=0.10.2 <1.0.0",
-    "@uifabricshared/foundation-compose": "^1.11.8",
+    "@uifabricshared/foundation-compose": "^1.11.9",
     "@uifabricshared/foundation-settings": ">=0.11.2 <1.0.0"
   },
   "devDependencies": {