@fluentui-react-native/callout 0.19.20 → 0.19.21

package/CHANGELOG.json

@@ -2,7 +2,22 @@
   "name": "@fluentui-react-native/callout",
   "entries": [
     {
-      "date": "Wed, 26 Jan 2022 20:29:31 GMT",
+      "date": "Fri, 28 Jan 2022 20:52:02 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": {

package/CHANGELOG.md

@@ -1,12 +1,20 @@
 # Change Log - @fluentui-react-native/callout
 
-This log was last generated on Wed, 26 Jan 2022 20:29:31 GMT and should not be manually modified.
+This log was last generated on Fri, 28 Jan 2022 20:52:02 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 0.19.21
+
+Fri, 28 Jan 2022 20:52:02 GMT
+
+### Patches
+
+- ContextualMenu macOS: fix focus shifting on click (sanajmi@microsoft.com)
+
 ## 0.19.20
 
-Wed, 26 Jan 2022 20:29:31 GMT
+Wed, 26 Jan 2022 20:31:04 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.20",
+  "version": "0.19.21",
   "description": "A cross-platform Callout component using the Fluent Design System",
   "license": "MIT",
   "author": "",