@fluentui-react-native/callout 0.19.32 → 0.19.33

package/CHANGELOG.json

@@ -2,7 +2,22 @@
   "name": "@fluentui-react-native/callout",
   "entries": [
     {
-      "date": "Fri, 11 Mar 2022 00:34:24 GMT",
+      "date": "Fri, 18 Mar 2022 07:18:53 GMT",
+      "tag": "@fluentui-react-native/callout_v0.19.33",
+      "version": "0.19.33",
+      "comments": {
+        "patch": [
+          {
+            "author": "sanajmi@microsoft.com",
+            "package": "@fluentui-react-native/callout",
+            "commit": "be918e28dc086179801a25f9e664ceedbb81e85c",
+            "comment": "ContextualMenu macOS: Improve lifecycle management"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 11 Mar 2022 00:34:53 GMT",
       "tag": "@fluentui-react-native/callout_v0.19.32",
       "version": "0.19.32",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,20 @@
 # Change Log - @fluentui-react-native/callout
 
-This log was last generated on Fri, 11 Mar 2022 00:34:24 GMT and should not be manually modified.
+This log was last generated on Fri, 18 Mar 2022 07:18:53 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 0.19.33
+
+Fri, 18 Mar 2022 07:18:53 GMT
+
+### Patches
+
+- ContextualMenu macOS: Improve lifecycle management (sanajmi@microsoft.com)
+
 ## 0.19.32
 
-Fri, 11 Mar 2022 00:34:24 GMT
+Fri, 11 Mar 2022 00:34:53 GMT
 
 ### Patches
 

package/macos/Callout.swift

@@ -26,9 +26,9 @@ class CalloutView: RCTView, CalloutWindowLifeCycleDelegate {
 		}
 	}
 
-	@objc public var onShow: RCTBubblingEventBlock?
+	@objc public var onShow: RCTDirectEventBlock?
 
-	@objc public var onDismiss: RCTBubblingEventBlock?
+	@objc public var onDismiss: RCTDirectEventBlock?
 
 	public weak var bridge: RCTBridge?
 
@@ -79,14 +79,68 @@ class CalloutView: RCTView, CalloutWindowLifeCycleDelegate {
 	// MARK: Private methods
 
 	private func showCallout() {
+		guard !isCalloutWindowShown else {
+			return
+		}
+
 		updateCalloutFrameToAnchor()
 		calloutWindow.makeKeyAndOrderFront(self)
+		
+		// Dismiss the Callout if the window is no longer active.
+		NotificationCenter.default.addObserver(self, selector: #selector(dismissCallout), name: NSApplication.didResignActiveNotification, object: nil)
+
+		mouseEventMonitor.addLocalMonitorForEvents(matching: .leftMouseUp, handler: { [weak self] (event) -> NSEvent? in
+			guard let clickedWindow = event.window else {
+					return event
+				}
+
+				var shouldDismissCallout = true
+
+				// Did the click happened in our own window?
+				if (clickedWindow.isEqual(to: self) ) {
+					shouldDismissCallout = false
+	
+				// Are we a child window of a Callout (e.g: a ContextualMenu submenu), where the click happened in our parent?
+				} else if (clickedWindow.isEqual(to: self?.calloutWindow.parent as? CalloutWindow)) {
+					shouldDismissCallout = false
+
+				// Did the click happened in any of our child windows (e.g: our submenus)?
+				} else if (self?.calloutWindow.childWindows?.contains(clickedWindow) ?? false) {
+					shouldDismissCallout = false
+				}
+	
+				if (shouldDismissCallout) {
+					self?.dismissCallout()
+				}
+
+				return event
+			})
+		
+		isCalloutWindowShown = true
+		
 		onShowCallout()
 	}
 
-	private func dismissCallout() {
-		calloutWindow.close()
-		onDismissCallout()
+	@objc private func dismissCallout() {
+		guard isCalloutWindowShown else {
+			return
+		}
+
+		// Dismiss any children Callouts (I.E: Submenus) first
+		if let childWindows = calloutWindow.childWindows {
+			for childWindow in childWindows {
+				if let childCallout = childWindow as? CalloutWindow {
+					childCallout.dismissCallout()
+				}
+			}
+		}
+
+		calloutWindow.dismissCallout()
+
+		NotificationCenter.default.removeObserver(self)
+		mouseEventMonitor.removeMonitor()
+		
+		isCalloutWindowShown = false
 	}
 
 	/// Sets the frame of the Callout Window (in screen coordinates to be off of the Anchor on the preferred edge
@@ -307,18 +361,14 @@ class CalloutView: RCTView, CalloutWindowLifeCycleDelegate {
 		if let parentWindow = self.window {
 			parentWindow.addChildWindow(window, ordered: .above)
 		}
-
 		return window
 	}()
+	
+	private var mouseEventMonitor = GuardedEventMonitor()
+	
+	private var isCalloutWindowShown = false
 }
 
-/// 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/macos/CalloutWindow.swift

@@ -7,48 +7,15 @@ protocol CalloutWindowLifeCycleDelegate: AnyObject {
 }
 
 class CalloutWindow: NSWindow {
-
 	weak var lifeCycleDelegate: 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 = false
 
 		styleMask = .borderless
 		level = .popUpMenu
 		backgroundColor = .clear
 		isMovable = false
-
-		// Dismiss the Callout if the window is no longer active.
-		NotificationCenter.default.addObserver(self, selector: #selector(dismissCallout), name: NSApplication.didResignActiveNotification, object: nil)
-
-		// Dismiss the Callout if the user clicked outside the Callout Window or any of our child windows.
-		mouseEventMonitor = NSEvent.addLocalMonitorForEvents(matching: .leftMouseUp, handler: { [weak self] (event) -> NSEvent? in
-			guard let clickedWindow = event.window else {
-				return event
-			}
-
-			var shouldDismissCallout = true
-			
-			// Did the click happened in our own window?
-			if (clickedWindow.isEqual(to: self) ) {
-				shouldDismissCallout = false
-
-			// Are we a child window of a Callout (e.g: a ContextualMenu submenu), where the click happened in our parent?
-			} else if (clickedWindow.isEqual(to: self?.parent as? CalloutWindow)) {
-				shouldDismissCallout = false
-
-			// Did the click happened in any of our child windows (e.g: our submenus)?
-			} else if (self?.childWindows?.contains(clickedWindow) ?? false) {
-				shouldDismissCallout = false
-			}
-
-			if (shouldDismissCallout) {
-				self?.dismissCallout()
-			}
-
-			return event
-		})
 	}
 
 	// Required to get a key view loop in the window
@@ -65,16 +32,9 @@ class CalloutWindow: NSWindow {
 		dismissCallout()
 	}
 
-	@objc private func dismissCallout() {
+	@objc public func dismissCallout() {
 		lifeCycleDelegate?.calloutWillDismiss(window: self)
 		orderOut(self)
 	}
-	
-	deinit {
-		if let monitor = mouseEventMonitor {
-			NSEvent.removeMonitor(monitor)
-		}
-	}
-
-	private var mouseEventMonitor: Any?
 }
+

package/macos/FRNCalloutManager.m

@@ -42,8 +42,8 @@ RCT_EXPORT_VIEW_PROPERTY(anchorRect, screenRect)
 
 RCT_EXPORT_VIEW_PROPERTY(directionalHint, NSRectEdge)
 
-RCT_EXPORT_VIEW_PROPERTY(onShow, RCTBubblingEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onShow, RCTDirectEventBlock)
 
-RCT_EXPORT_VIEW_PROPERTY(onDismiss, RCTBubblingEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onDismiss, RCTDirectEventBlock)
 
 @end

package/macos/FlippedVisualEffectView.swift

@@ -0,0 +1,8 @@
+/// 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.
+internal class FlippedVisualEffectView: NSVisualEffectView {
+	override var isFlipped: Bool {
+		return true
+	}
+}

package/macos/GuardedEventMonitor.swift

@@ -0,0 +1,30 @@
+
+
+/// NSEvent localMonitors are an _old_ API that requires you to do some  memory management yourself.
+/// You _must_ call `removeMonitor`exactly once per monitor created from. This helper class enforces
+/// that with the use of an extra boolean to track whether we have already allocated/released our monitor.
+/// https://developer.apple.com/documentation/appkit/nsevent/1533709-removemonitor
+internal class GuardedEventMonitor: Any {
+	
+	private var isMonitorAllocated = false
+	private var allocatedMonitor: Any?
+	
+	
+	func addLocalMonitorForEvents(matching mask: NSEvent.EventTypeMask, handler block: @escaping (NSEvent) -> NSEvent?) {
+		if (!isMonitorAllocated) {
+			allocatedMonitor = NSEvent.addLocalMonitorForEvents(matching: mask, handler: block)
+			isMonitorAllocated = true
+		}
+	}
+	
+	func removeMonitor() {
+		if (isMonitorAllocated) {
+			NSEvent.removeMonitor(allocatedMonitor as Any)
+			isMonitorAllocated = false
+		}
+	}
+	
+	deinit {
+		removeMonitor()
+	}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/callout",
-  "version": "0.19.32",
+  "version": "0.19.33",
   "description": "A cross-platform Callout component using the Fluent Design System",
   "license": "MIT",
   "author": "",