Add new macOS View prop allowsVibrancy (microsoft#1889)

* Add new macOS View prop `allowsVibrancy`

* fix lint

* small fixes

* fix lint

* no super

Author: Saadnajmi

Libraries/Components/Pressable/Pressable.js

@@ -232,6 +232,16 @@ type Props = $ReadOnly<{|
    */
   enableFocusRing?: ?boolean,
 
+  /**
+   * Specifies whether the view ensures it is vibrant on top of other content.
+   * For more information, see the following apple documentation:
+   * https://developer.apple.com/documentation/appkit/nsview/1483793-allowsvibrancy
+   * https://developer.apple.com/documentation/appkit/nsvisualeffectview#1674177
+   *
+   * @platform macos
+   */
+  allowsVibrancy?: ?boolean,
+
   /**
    * Specifies the Tooltip for the Pressable.
    * @platform macos

Libraries/Components/View/ViewPropTypes.d.ts

@@ -173,6 +173,7 @@ export type DraggedTypesType = DraggedType | DraggedType[];
 
 export interface ViewPropsMacOS {
   acceptsFirstMouse?: boolean | undefined;
+  allowsVibrancy?: boolean | undefined;
   mouseDownCanMoveWindow?: boolean | undefined;
   enableFocusRing?: boolean | undefined;
   onMouseEnter?: ((event: MouseEvent) => void) | undefined;

Libraries/Components/View/ViewPropTypes.js

@@ -553,6 +553,16 @@ type MacOSViewProps = $ReadOnly<{|
    */
   mouseDownCanMoveWindow?: ?boolean,
 
+  /**
+   * Specifies whether the view ensures it is vibrant on top of other content.
+   * For more information, see the following apple documentation:
+   * https://developer.apple.com/documentation/appkit/nsview/1483793-allowsvibrancy
+   * https://developer.apple.com/documentation/appkit/nsvisualeffectview#1674177
+   *
+   * @platform macos
+   */
+  allowsVibrancy?: ?boolean,
+
   /**
    * Specifies whether system focus ring should be drawn when the view has keyboard focus.
    *

Libraries/NativeComponent/BaseViewConfig.macos.js

@@ -48,6 +48,7 @@ const directEventTypes = {
 const validAttributesForNonEventProps = {
   acceptsFirstMouse: true,
   accessibilityTraits: true,
+  allowsVibrancy: true,
   cursor: true,
   draggedTypes: true,
   enableFocusRing: true,

React/Views/RCTView.h

@@ -156,6 +156,10 @@ extern const UIAccessibilityTraits SwitchAccessibilityTrait;
 
 @property (nonatomic, assign) CATransform3D transform3D;
 
+// `allowsVibrancy` is readonly on NSView, so let's create a new property to make it assignable
+// that we can set through JS and the getter for `allowsVibrancy` can read in RCTView.
+@property (nonatomic, assign) BOOL allowsVibrancyInternal;
+
 @property (nonatomic, copy) RCTDirectEventBlock onMouseEnter;
 @property (nonatomic, copy) RCTDirectEventBlock onMouseLeave;
 @property (nonatomic, copy) RCTDirectEventBlock onDragEnter;

React/Views/RCTView.m

@@ -1519,6 +1519,9 @@ - (void)setMouseDownCanMoveWindow:(BOOL)mouseDownCanMoveWindow{
 	_mouseDownCanMoveWindow = mouseDownCanMoveWindow;
 }
 
+- (BOOL)allowsVibrancy {
+  return _allowsVibrancyInternal;
+}
 
 - (NSDictionary*)locationInfoFromEvent:(NSEvent*)event
 {

React/Views/RCTViewManager.m

@@ -430,6 +430,8 @@ - (RCTShadowView *)shadowView
 
 RCT_EXPORT_VIEW_PROPERTY(mouseDownCanMoveWindow, BOOL)
 
+RCT_REMAP_VIEW_PROPERTY(allowsVibrancy, allowsVibrancyInternal, BOOL)
+
 RCT_CUSTOM_VIEW_PROPERTY(focusable, BOOL, RCTView)
 {
   if ([view respondsToSelector:@selector(setFocusable:)]) {