@fluentui-react-native/callout 0.19.32 → 0.19.35

package/CHANGELOG.json

@@ -2,7 +2,58 @@
   "name": "@fluentui-react-native/callout",
   "entries": [
     {
-      "date": "Fri, 11 Mar 2022 00:34:24 GMT",
+      "date": "Wed, 23 Mar 2022 17:22:10 GMT",
+      "tag": "@fluentui-react-native/callout_v0.19.35",
+      "version": "0.19.35",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui-react-native/callout",
+            "comment": "Bump @fluentui-react-native/interactive-hooks to v0.14.4",
+            "commit": "f9260dc63f46f9b1fe54f6b2ab4babbfccc0c8b0"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui-react-native/callout",
+            "comment": "Bump @uifabricshared/foundation-compose to v1.11.12",
+            "commit": "f9260dc63f46f9b1fe54f6b2ab4babbfccc0c8b0"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 21 Mar 2022 01:47:54 GMT",
+      "tag": "@fluentui-react-native/callout_v0.19.34",
+      "version": "0.19.34",
+      "comments": {
+        "patch": [
+          {
+            "author": "sanajmi@microsoft.com",
+            "package": "@fluentui-react-native/callout",
+            "commit": "b772dfe4542b7032f216bf5c2faa807c695fa2a7",
+            "comment": "width -> maxWidth"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 18 Mar 2022 07:19:17 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,37 @@
 # 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 Wed, 23 Mar 2022 17:22:10 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 0.19.35
+
+Wed, 23 Mar 2022 17:22:10 GMT
+
+### Patches
+
+- Bump @fluentui-react-native/interactive-hooks to v0.14.4
+- Bump @uifabricshared/foundation-compose to v1.11.12
+
+## 0.19.34
+
+Mon, 21 Mar 2022 01:47:54 GMT
+
+### Patches
+
+- width -> maxWidth (sanajmi@microsoft.com)
+
+## 0.19.33
+
+Fri, 18 Mar 2022 07:19:17 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,76 @@ 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: .leftMouseDown, handler: { [weak self] (event) -> NSEvent? in
+			func isClickInsideWindowHierarchy(window: NSWindow?, event: NSEvent) -> Bool {
+				guard let window = window else {
+					return false
+				}
+				guard let clickedWindow = event.window else {
+					return false
+				}
+
+				var isClickInHierarchy = false
+
+				if (window.isEqual(to: clickedWindow)) {
+					isClickInHierarchy = true
+				} else {
+					if let childWindows = window.childWindows {
+						for childWindow in childWindows {
+							isClickInHierarchy = isClickInsideWindowHierarchy(window: childWindow, event: event)
+						}
+					}
+				}
+
+				return isClickInHierarchy
+			}
+
+			var window: NSWindow? = self?.calloutWindow
+			while (window?.parent as? CalloutWindow != nil) {
+				window = window?.parent
+			}
+
+			if (!isClickInsideWindowHierarchy(window: window, event: event)) {
+				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
@@ -274,7 +336,7 @@ class CalloutView: RCTView, CalloutWindowLifeCycleDelegate {
 	private var anchorView: NSView?
 
 	/// 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.
+	/// view hierarchy, ensuring our React Views are not placed in the main window.
 	private lazy var proxyView: NSView = {
 		let visualEffectView = FlippedVisualEffectView()
 		visualEffectView.translatesAutoresizingMaskIntoConstraints = false
@@ -307,18 +369,14 @@ class CalloutView: RCTView, CalloutWindowLifeCycleDelegate {
 		if let parentWindow = self.window {
 			parentWindow.addChildWindow(window, ordered: .above)
 		}
-
 		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 mouseEventMonitor = GuardedEventMonitor()
+
+	private var isCalloutWindowShown = false
 }
 
+
+
 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,28 @@
+
+
+/// 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
+/// we set the reference to nil after `removeMonitor` so that subsequent calls don't cause an over release.
+/// One instance should only be used to allocate and manage one NSEvent monitor.
+/// https://developer.apple.com/documentation/appkit/nsevent/1533709-removemonitor
+internal class GuardedEventMonitor: Any {
+
+	private var allocatedMonitor: Any?
+
+	func addLocalMonitorForEvents(matching mask: NSEvent.EventTypeMask, handler block: @escaping (NSEvent) -> NSEvent?) {
+		if (allocatedMonitor == nil) {
+			allocatedMonitor = NSEvent.addLocalMonitorForEvents(matching: mask, handler: block)
+		}
+	}
+
+	func removeMonitor() {
+		if let monitor = allocatedMonitor {
+			NSEvent.removeMonitor(monitor)
+			allocatedMonitor = nil
+		}
+	}
+
+	deinit {
+		removeMonitor()
+	}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/callout",
-  "version": "0.19.32",
+  "version": "0.19.35",
   "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.4",
     "@fluentui-react-native/component-cache": "^1.3.1",
-    "@fluentui-react-native/interactive-hooks": ">=0.14.3 <1.0.0",
+    "@fluentui-react-native/interactive-hooks": ">=0.14.4 <1.0.0",
     "@fluentui-react-native/tokens": ">=0.11.8 <1.0.0",
     "@uifabricshared/foundation-composable": ">=0.10.2 <1.0.0",
-    "@uifabricshared/foundation-compose": "^1.11.11",
+    "@uifabricshared/foundation-compose": "^1.11.12",
     "@uifabricshared/foundation-settings": ">=0.11.2 <1.0.0"
   },
   "devDependencies": {