not-react-native-macos 0.87.1-rc.3 → 0.87.1-rc.4

package/Libraries/Components/View/ViewPropTypes.js

@@ -128,6 +128,63 @@ type FocusEventProps = Readonly<{
   onFocusCapture?: ?(event: FocusEvent) => void,
 }>;
 
+// [macOS] Props that only exist on macOS. They are declared here rather than in
+// a .macos file because ViewPropTypes is shared, and a prop that is simply
+// absent on other platforms costs them nothing. The native side is
+// HostPlatformViewProps under components/view/platform/macos. macOS]
+type MacOSViewProps = Readonly<{
+  /**
+   * The view's help tag, shown when the pointer rests over it.
+   *
+   * @platform macos
+   */
+  tooltip?: ?string,
+
+  /**
+   * Receive the click that activates a background window, rather than letting
+   * it be swallowed to bring the window forward.
+   *
+   * @platform macos
+   */
+  acceptsFirstMouse?: ?boolean,
+
+  /**
+   * Let the view blend with what is behind it when inside a vibrancy effect.
+   *
+   * @platform macos
+   */
+  allowsVibrancy?: ?boolean,
+
+  /**
+   * Draw the focus ring while the view is first responder. Defaults to true.
+   *
+   * @platform macos
+   */
+  enableFocusRing?: ?boolean,
+
+  /**
+   * Whether dragging the view moves the window. AppKit defaults this to true;
+   * set it false for a view that should handle its own drags.
+   *
+   * @platform macos
+   */
+  mouseDownCanMoveWindow?: ?boolean,
+
+  /**
+   * Called on a double click.
+   *
+   * @platform macos
+   */
+  onDoubleClick?: ?(event: MouseEvent) => void,
+
+  /**
+   * Called on a secondary (right) click.
+   *
+   * @platform macos
+   */
+  onAuxClick?: ?(event: MouseEvent) => void,
+}>;
+
 type KeyEventProps = Readonly<{
   onKeyDown?: ?(event: KeyDownEvent) => void,
   onKeyDownCapture?: ?(event: KeyDownEvent) => void,
@@ -566,6 +623,7 @@ export type ViewProps = Readonly<{
   ...DirectEventProps,
   ...GestureResponderHandlers,
   ...MouseEventProps,
+  ...MacOSViewProps, // [macOS]
   ...PointerEventProps,
   ...FocusEventProps,
   ...KeyEventProps,

package/Libraries/NativeComponent/BaseViewConfig.macos.js

@@ -1,4 +1,4 @@
-/*
+/**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
  * This source code is licensed under the MIT license found in the
@@ -8,16 +8,71 @@
  * @format
  */
 
-// [macOS] macOS resolves as `.macos` -> `.native` -> shared, so without this
-// file `BaseViewConfig` re-exports itself: the shared file is a
-// stub that expects a platform-suffixed sibling to answer. Point it at the iOS
-// implementation, which is what this fork uses on macOS wherever upstream has
-// no platform-neutral one. macOS]
+// [macOS] The view config decides which props reach native at all: anything
+// missing from `validAttributes` is dropped before it ever gets to C++. So the
+// macOS-only props declared in HostPlatformViewProps have to be listed here as
+// well, or setting them does nothing.
+//
+// Everything iOS declares still applies, so this extends that config rather
+// than replacing it. Names match microsoft/react-native-macos. macOS]
 
-// NOTE: This file supports backwards compatibility of subpath (deep) imports
-// from 'react-native' with platform-specific extensions. It can be deleted
-// once we remove the "./*" mapping from package.json "exports".
+import type {PartialViewConfigWithoutName} from './PlatformBaseViewConfig';
 
-import BaseViewConfig from './BaseViewConfig.ios';
+// $FlowFixMe[cannot-resolve-module] macOS shares the iOS base config.
+import PlatformBaseViewConfigIOS from './BaseViewConfig.ios';
+import {ConditionallyIgnoredEventHandlers} from './ViewConfigIgnore';
 
-export default BaseViewConfig;
+const bubblingEventTypes = {
+  ...PlatformBaseViewConfigIOS.bubblingEventTypes,
+  topKeyDown: {
+    phasedRegistrationNames: {
+      captured: 'onKeyDownCapture',
+      bubbled: 'onKeyDown',
+    },
+  },
+  topKeyUp: {
+    phasedRegistrationNames: {
+      captured: 'onKeyUpCapture',
+      bubbled: 'onKeyUp',
+    },
+  },
+};
+
+const directEventTypes = {
+  ...PlatformBaseViewConfigIOS.directEventTypes,
+  topDoubleClick: {registrationName: 'onDoubleClick'},
+  topAuxClick: {registrationName: 'onAuxClick'},
+  topMouseEnter: {registrationName: 'onMouseEnter'},
+  topMouseLeave: {registrationName: 'onMouseLeave'},
+};
+
+const validAttributesForNonEventProps = {
+  acceptsFirstMouse: true,
+  allowsVibrancy: true,
+  enableFocusRing: true,
+  focusable: true,
+  mouseDownCanMoveWindow: true,
+  tooltip: true,
+};
+
+const validAttributesForEventProps = ConditionallyIgnoredEventHandlers({
+  onAuxClick: true,
+  onDoubleClick: true,
+  onKeyDown: true,
+  onKeyUp: true,
+  onMouseEnter: true,
+  onMouseLeave: true,
+});
+
+const PlatformBaseViewConfigMacOS: PartialViewConfigWithoutName = {
+  bubblingEventTypes,
+  directEventTypes,
+  validAttributes: {
+    ...PlatformBaseViewConfigIOS.validAttributes,
+    ...validAttributesForNonEventProps,
+    // $FlowFixMe[exponential-spread]
+    ...validAttributesForEventProps,
+  },
+};
+
+export default PlatformBaseViewConfigMacOS;

package/Libraries/NativeComponent/ViewConfigIgnore.js

@@ -39,7 +39,11 @@ export function DynamicallyInjectedByGestureHandler<T extends {...}>(
 export function ConditionallyIgnoredEventHandlers<
   const T extends {readonly [name: string]: true},
 >(value: T): T | void {
-  if (Platform.OS === 'ios') {
+  // [macOS] macOS declares its view props the same way iOS does, so it keeps
+  // these too. Reporting Platform.OS as 'macos' without this drops every event
+  // handler in the base view config -- including iOS's own -- and nothing that
+  // depends on them ever fires. macOS]
+  if (Platform.OS === 'ios' || Platform.OS === 'macos') {
     return value;
   }
   return undefined;

package/Libraries/StyleSheet/PlatformColorValueTypes.macos.js

@@ -1,4 +1,4 @@
-/*
+/**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
  * This source code is licensed under the MIT license found in the
@@ -8,14 +8,151 @@
  * @format
  */
 
-// [macOS] macOS resolves as `.macos` -> `.native` -> shared, so without this
-// file `PlatformColorValueTypes` re-exports itself: the shared file is a
-// stub that expects a platform-suffixed sibling to answer. Point it at the iOS
-// implementation, which is what this fork uses on macOS wherever upstream has
-// no platform-neutral one. macOS]
+// [macOS] The macOS colour types.
+//
+// `semantic` and `dynamic` carry over from iOS unchanged -- RCTConvert resolves
+// both on this platform, and semantic names are looked up on NSColor, so
+// AppKit's whole vocabulary (labelColor, windowBackgroundColor,
+// controlAccentColor, ...) works. What iOS has no equivalent for is
+// `colorWithSystemEffect`, AppKit's pressed / disabled / rollover variants of a
+// colour, so that is added here. macOS]
 
-// NOTE: This file supports backwards compatibility of subpath (deep) imports
-// from 'react-native' with platform-specific extensions. It can be deleted
-// once we remove the "./*" mapping from package.json "exports".
 
-export * from './PlatformColorValueTypes.ios';
+import type {ProcessedColorValue} from './processColor';
+import type {ColorValue, NativeColorValue} from './StyleSheet';
+
+/** The actual type of the opaque NativeColorValue on macOS platform */
+type LocalNativeColorValue = {
+  semantic?: Array<string>,
+  colorWithSystemEffect?: {
+    baseColor: ?(ColorValue | ProcessedColorValue),
+    systemEffect: string,
+  },
+  dynamic?: {
+    light: ?(ColorValue | ProcessedColorValue),
+    dark: ?(ColorValue | ProcessedColorValue),
+    highContrastLight?: ?(ColorValue | ProcessedColorValue),
+    highContrastDark?: ?(ColorValue | ProcessedColorValue),
+  },
+};
+
+export const PlatformColor = (...names: Array<string>): NativeColorValue => {
+  // $FlowExpectedError[incompatible-type] LocalNativeColorValue is the iOS LocalNativeColorValue type
+  return {semantic: names} as LocalNativeColorValue;
+};
+
+export type DynamicColorMacOSTuplePrivate = {
+  light: ColorValue,
+  dark: ColorValue,
+  highContrastLight?: ColorValue,
+  highContrastDark?: ColorValue,
+};
+
+export const DynamicColorMacOSPrivate = (
+  tuple: DynamicColorMacOSTuplePrivate,
+): ColorValue => {
+  return {
+    dynamic: {
+      light: tuple.light,
+      dark: tuple.dark,
+      highContrastLight: tuple.highContrastLight,
+      highContrastDark: tuple.highContrastDark,
+    },
+    /* $FlowExpectedError[incompatible-type]
+     * LocalNativeColorValue is the actual type of the opaque NativeColorValue on macOS platform */
+  } as LocalNativeColorValue;
+};
+
+export type SystemEffectMacOSPrivate =
+  | 'none'
+  | 'pressed'
+  | 'deepPressed'
+  | 'disabled'
+  | 'rollover';
+
+export const ColorWithSystemEffectMacOSPrivate = (
+  color: ColorValue,
+  effect: SystemEffectMacOSPrivate,
+): ColorValue => {
+  return {
+    colorWithSystemEffect: {
+      baseColor: color,
+      systemEffect: effect,
+    },
+    /* $FlowExpectedError[incompatible-type]
+     * LocalNativeColorValue is the actual type of the opaque NativeColorValue */
+  } as LocalNativeColorValue;
+};
+
+const _normalizeColorObject = (
+  color: LocalNativeColorValue,
+): ?LocalNativeColorValue => {
+  if ('colorWithSystemEffect' in color && color.colorWithSystemEffect !== undefined) {
+    const normalizeColor = require('./normalizeColor').default;
+    const spec = color.colorWithSystemEffect;
+    return {
+      colorWithSystemEffect: {
+        // $FlowFixMe[incompatible-call]
+        baseColor: normalizeColor(spec.baseColor),
+        systemEffect: spec.systemEffect,
+      },
+    };
+  } else if ('semantic' in color) {
+    // an AppKit or iOS semantic colour
+    return color;
+  } else if ('dynamic' in color && color.dynamic !== undefined) {
+    const normalizeColor = require('./normalizeColor').default;
+
+    // a dynamic, appearance aware color
+    const dynamic = color.dynamic;
+    const dynamicColor: LocalNativeColorValue = {
+      dynamic: {
+        // $FlowFixMe[incompatible-use]
+        light: normalizeColor(dynamic.light),
+        // $FlowFixMe[incompatible-use]
+        dark: normalizeColor(dynamic.dark),
+        // $FlowFixMe[incompatible-use]
+        highContrastLight: normalizeColor(dynamic.highContrastLight),
+        // $FlowFixMe[incompatible-use]
+        highContrastDark: normalizeColor(dynamic.highContrastDark),
+      },
+    };
+    return dynamicColor;
+  }
+  return null;
+};
+
+export const normalizeColorObject: (
+  color: NativeColorValue,
+  /* $FlowExpectedError[incompatible-type]
+   * LocalNativeColorValue is the actual type of the opaque NativeColorValue on macOS platform */
+) => ?ProcessedColorValue = _normalizeColorObject;
+
+const _processColorObject = (
+  color: LocalNativeColorValue,
+): ?LocalNativeColorValue => {
+  if ('dynamic' in color && color.dynamic != null) {
+    const processColor = require('./processColor').default;
+    const dynamic = color.dynamic;
+    const dynamicColor: LocalNativeColorValue = {
+      dynamic: {
+        // $FlowFixMe[incompatible-use]
+        light: processColor(dynamic.light),
+        // $FlowFixMe[incompatible-use]
+        dark: processColor(dynamic.dark),
+        // $FlowFixMe[incompatible-use]
+        highContrastLight: processColor(dynamic.highContrastLight),
+        // $FlowFixMe[incompatible-use]
+        highContrastDark: processColor(dynamic.highContrastDark),
+      },
+    };
+    return dynamicColor;
+  }
+  return color;
+};
+
+export const processColorObject: (
+  color: NativeColorValue,
+  /* $FlowExpectedError[incompatible-type]
+   * LocalNativeColorValue is the actual type of the opaque NativeColorValue on macOS platform */
+) => ?NativeColorValue = _processColorObject;

package/Libraries/StyleSheet/PlatformColorValueTypesMacOS.js

@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+// [macOS] The off-macOS stand-in, matching how PlatformColorValueTypesIOS.js
+// behaves elsewhere: importing is fine, calling is not.
+
+import type {ColorValue} from './StyleSheet';
+
+export type DynamicColorMacOSTuple = {
+  light: ColorValue,
+  dark: ColorValue,
+  highContrastLight?: ColorValue,
+  highContrastDark?: ColorValue,
+};
+
+export const DynamicColorMacOS = (_tuple: DynamicColorMacOSTuple): ColorValue => {
+  throw new Error('DynamicColorMacOS is not available on this platform.');
+};
+
+export type SystemEffectMacOS = 'none' | 'pressed' | 'deepPressed' | 'disabled' | 'rollover';
+
+export const ColorWithSystemEffectMacOS = (
+  _color: ColorValue,
+  _effect: SystemEffectMacOS,
+): ColorValue => {
+  throw new Error('ColorWithSystemEffectMacOS is not available on this platform.');
+};

package/Libraries/StyleSheet/PlatformColorValueTypesMacOS.macos.js

@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+// [macOS] The public macOS colour API, mirroring PlatformColorValueTypesIOS.
+
+'use strict';
+
+import type {ColorValue} from './StyleSheet';
+
+import {
+  ColorWithSystemEffectMacOSPrivate,
+  DynamicColorMacOSPrivate,
+  // $FlowFixMe[cannot-resolve-module] resolved by the macOS platform extension
+} from './PlatformColorValueTypes.macos';
+
+export type DynamicColorMacOSTuple = {
+  light: ColorValue,
+  dark: ColorValue,
+  highContrastLight?: ColorValue,
+  highContrastDark?: ColorValue,
+};
+
+/**
+ * A colour that follows the system appearance, the macOS counterpart of
+ * `DynamicColorIOS`.
+ */
+export const DynamicColorMacOS = (tuple: DynamicColorMacOSTuple): ColorValue => {
+  return DynamicColorMacOSPrivate({
+    light: tuple.light,
+    dark: tuple.dark,
+    highContrastLight: tuple.highContrastLight,
+    highContrastDark: tuple.highContrastDark,
+  });
+};
+
+export type SystemEffectMacOS = 'none' | 'pressed' | 'deepPressed' | 'disabled' | 'rollover';
+
+/**
+ * A colour with one of AppKit's system effects applied. There is no iOS
+ * equivalent: UIKit expects the caller to supply the pressed or disabled
+ * colour, where AppKit derives it.
+ */
+export const ColorWithSystemEffectMacOS = (
+  color: ColorValue,
+  effect: SystemEffectMacOS,
+): ColorValue => {
+  return ColorWithSystemEffectMacOSPrivate(color, effect);
+};

package/React/Base/RCTConvert.mm

@@ -850,6 +850,26 @@ static UIColor *RCTColorFromSemanticColorName(NSString *semanticColorName)
   NSDictionary<NSString *, NSDictionary *> *colorMap = RCTSemanticColorsMap();
   UIColor *color = nil;
   NSDictionary<NSString *, id> *colorInfo = colorMap[semanticColorName];
+
+#if TARGET_OS_OSX // [macOS
+  // The map above is iOS's vocabulary. AppKit has its own -- labelColor,
+  // windowBackgroundColor, controlAccentColor and the rest -- and they are all
+  // class properties on NSColor, so asking NSColor directly covers every one of
+  // them without a second table to keep in sync. Only reached for names iOS
+  // does not define, so iOS names keep their mapping and their fallbacks.
+  if (colorInfo == nil) {
+    SEL appKitSelector = NSSelectorFromString(semanticColorName);
+    if (appKitSelector != nil && [UIColor respondsToSelector:appKitSelector]) {
+      IMP imp = [[UIColor class] methodForSelector:appKitSelector];
+      id (*getColor)(id, SEL) = (id (*)(id, SEL))imp;
+      id candidate = getColor([UIColor class], appKitSelector);
+      if ([candidate isKindOfClass:[UIColor class]]) {
+        return candidate;
+      }
+    }
+  }
+#endif // macOS]
+
   if (colorInfo) {
     NSString *semanticColorSelector = colorInfo[RCTSelector];
     if (semanticColorSelector == nil) {
@@ -1040,6 +1060,35 @@ void RCTSetDefaultColorSpace(RCTColorSpace colorSpace)
         RCTLogConvertError(json, @"a UIColor. Expected an iOS dynamic appearance aware color.");
         return nil;
       }
+#if TARGET_OS_OSX // [macOS
+    } else if ((value = [dictionary objectForKey:@"colorWithSystemEffect"])) {
+      // AppKit's pressed / disabled / rollover variants of a colour. There is
+      // no UIKit equivalent, so this arm exists only on macOS.
+      NSDictionary *spec = value;
+      UIColor *baseColor = [RCTConvert UIColor:[spec objectForKey:@"baseColor"]];
+      NSString *effect = [RCTConvert NSString:[spec objectForKey:@"systemEffect"]];
+      if (baseColor == nil) {
+        RCTLogConvertError(json, @"a UIColor. colorWithSystemEffect needs a baseColor.");
+        return nil;
+      }
+      static NSDictionary<NSString *, NSNumber *> *effects;
+      static dispatch_once_t onceToken;
+      dispatch_once(&onceToken, ^{
+        effects = @{
+          @"none" : @(NSColorSystemEffectNone),
+          @"pressed" : @(NSColorSystemEffectPressed),
+          @"deepPressed" : @(NSColorSystemEffectDeepPressed),
+          @"disabled" : @(NSColorSystemEffectDisabled),
+          @"rollover" : @(NSColorSystemEffectRollover),
+        };
+      });
+      NSNumber *resolved = effects[effect ?: @"none"];
+      if (resolved == nil) {
+        RCTLogConvertError(json, @"a UIColor. Unknown system effect.");
+        return nil;
+      }
+      return [baseColor colorWithSystemEffect:(NSColorSystemEffect)resolved.integerValue];
+#endif // macOS]
     } else {
       RCTLogConvertError(json, @"a UIColor. Expected an iOS semantic color or dynamic appearance aware color.");
       return nil;

package/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm

@@ -55,6 +55,13 @@ const CGFloat BACKGROUND_COLOR_ZPOSITION = -1024.0f;
   NSMutableSet<NSString *> *_accessibilityOrderNativeIDs;
   RCTSwiftUIContainerViewWrapper *_swiftUIWrapper;
   BOOL _focusable;
+#if TARGET_OS_OSX // [macOS
+  // AppKit reads these rather than being told them, so they are answered from
+  // stored values by the overrides further down.
+  BOOL _allowsVibrancy;
+  BOOL _mouseDownCanMoveWindow;
+  NSTrackingArea *_mouseTrackingArea;
+#endif // macOS]
 }
 
 #ifdef RCT_DYNAMIC_FRAMEWORKS
@@ -69,6 +76,10 @@ const CGFloat BACKGROUND_COLOR_ZPOSITION = -1024.0f;
   if (self = [super initWithFrame:frame]) {
     _props = ViewShadowNode::defaultSharedProps();
     _reactSubviews = [NSMutableArray new];
+#if TARGET_OS_OSX // [macOS] mirror HostPlatformViewProps' defaults
+    _mouseDownCanMoveWindow = YES;
+    _allowsVibrancy = NO;
+#endif // macOS]
 #if !TARGET_OS_TV
     self.multipleTouchEnabled = YES;
 #endif
@@ -608,9 +619,148 @@ static BOOL RCTLayerTransformCollapsesAxis(CALayer *layer)
 
   _needsInvalidateLayer = _needsInvalidateLayer || needsInvalidateLayer;
 
+#if TARGET_OS_OSX // [macOS
+  [self _updateMacOSProps:oldViewProps newProps:newViewProps];
+#endif // macOS]
+
   _props = std::static_pointer_cast<const ViewProps>(props);
 }
 
+#if TARGET_OS_OSX // [macOS
+/**
+ * The props AppKit has and UIKit does not. They are declared in
+ * HostPlatformViewProps, so `ViewProps` already carries them on this platform.
+ */
+- (void)_updateMacOSProps:(const ViewProps &)oldViewProps newProps:(const ViewProps &)newViewProps
+{
+  if (oldViewProps.tooltip != newViewProps.tooltip) {
+    self.toolTip = newViewProps.tooltip.has_value() ? RCTNSStringFromString(*newViewProps.tooltip) : nil;
+  }
+
+  if (oldViewProps.acceptsFirstMouse != newViewProps.acceptsFirstMouse) {
+    self.acceptsFirstMouse = newViewProps.acceptsFirstMouse;
+  }
+
+  if (oldViewProps.mouseDownCanMoveWindow != newViewProps.mouseDownCanMoveWindow) {
+    _mouseDownCanMoveWindow = newViewProps.mouseDownCanMoveWindow;
+  }
+
+  if (oldViewProps.enableFocusRing != newViewProps.enableFocusRing) {
+    self.enableFocusRing = newViewProps.enableFocusRing;
+  }
+
+  // -allowsVibrancy and -canBecomeKeyView are read by AppKit rather than set,
+  // so the values are stored and the overrides below answer from them.
+  if (oldViewProps.allowsVibrancy != newViewProps.allowsVibrancy) {
+    _allowsVibrancy = newViewProps.allowsVibrancy;
+    self.needsDisplay = YES;
+  }
+
+  if (oldViewProps.focusable != newViewProps.focusable) {
+    _focusable = newViewProps.focusable;
+  }
+
+  if (oldViewProps.hostPlatformEvents != newViewProps.hostPlatformEvents) {
+    [self _updateMouseTracking:newViewProps.hostPlatformEvents.wantsMouseTracking()];
+  }
+}
+
+/**
+ * A view only tracks the mouse while something is listening. Tracking every
+ * view would cost a dispatch per view per mouse move.
+ */
+- (void)_updateMouseTracking:(BOOL)wanted
+{
+  if (wanted == (_mouseTrackingArea != nil)) {
+    return;
+  }
+
+  if (!wanted) {
+    [self removeTrackingArea:_mouseTrackingArea];
+    _mouseTrackingArea = nil;
+    return;
+  }
+
+  _mouseTrackingArea = [[NSTrackingArea alloc]
+      initWithRect:NSZeroRect
+           options:NSTrackingMouseEnteredAndExited | NSTrackingActiveInKeyWindow | NSTrackingInVisibleRect
+             owner:self
+          userInfo:nil];
+  [self addTrackingArea:_mouseTrackingArea];
+}
+
+- (HostPlatformViewEventEmitter::MouseEvent)_mouseEventFromNSEvent:(NSEvent *)event
+{
+  NSPoint inWindow = event.locationInWindow;
+  NSPoint inView = [self convertPoint:inWindow fromView:nil];
+  NSPoint onScreen = self.window != nil ? [self.window convertPointToScreen:inWindow] : inWindow;
+
+  HostPlatformViewEventEmitter::MouseEvent mouseEvent = {};
+  mouseEvent.clientX = inView.x;
+  mouseEvent.clientY = inView.y;
+  mouseEvent.pageX = inWindow.x;
+  mouseEvent.pageY = inWindow.y;
+  mouseEvent.screenX = onScreen.x;
+  mouseEvent.screenY = onScreen.y;
+  return mouseEvent;
+}
+
+- (void)mouseEntered:(NSEvent *)event
+{
+  [super mouseEntered:event];
+  if (_eventEmitter != nullptr) {
+    _eventEmitter->onMouseEnter([self _mouseEventFromNSEvent:event]);
+  }
+}
+
+- (void)mouseExited:(NSEvent *)event
+{
+  [super mouseExited:event];
+  if (_eventEmitter != nullptr) {
+    _eventEmitter->onMouseLeave([self _mouseEventFromNSEvent:event]);
+  }
+}
+
+- (void)mouseUp:(NSEvent *)event
+{
+  [super mouseUp:event];
+  const auto &viewProps = static_cast<const ViewProps &>(*_props);
+  if (_eventEmitter != nullptr && event.clickCount == 2 &&
+      viewProps.hostPlatformEvents[HostPlatformViewEvents::Offset::DoubleClick]) {
+    _eventEmitter->onDoubleClick([self _mouseEventFromNSEvent:event]);
+  }
+}
+
+- (void)rightMouseUp:(NSEvent *)event
+{
+  [super rightMouseUp:event];
+  const auto &viewProps = static_cast<const ViewProps &>(*_props);
+  if (_eventEmitter != nullptr && viewProps.hostPlatformEvents[HostPlatformViewEvents::Offset::AuxClick]) {
+    _eventEmitter->onAuxClick([self _mouseEventFromNSEvent:event]);
+  }
+}
+
+- (BOOL)allowsVibrancy
+{
+  return _allowsVibrancy;
+}
+
+- (BOOL)mouseDownCanMoveWindow
+{
+  return _mouseDownCanMoveWindow;
+}
+
+- (BOOL)canBecomeKeyView
+{
+  return _focusable;
+}
+
+- (BOOL)acceptsFirstResponder
+{
+  return _focusable || [super acceptsFirstResponder];
+}
+#endif // macOS]
+
 - (void)updateEventEmitter:(const EventEmitter::Shared &)eventEmitter
 {
   assert(std::dynamic_pointer_cast<const ViewEventEmitter>(eventEmitter));

package/ReactCommon/React-Fabric.podspec

@@ -102,6 +102,10 @@ Pod::Spec.new do |s|
         "\"$(PODS_TARGET_SRCROOT)/react/renderer/components/legacyviewmanagerinterop/platform/ios\"",
         "\"$(PODS_TARGET_SRCROOT)/react/renderer/components/text/platform/cxx\"",
         "\"$(PODS_TARGET_SRCROOT)/react/renderer/components/textinput/platform/ios\"",
+        # [macOS] macOS has its own HostPlatformViewProps -- tooltip, focus ring,
+        # first mouse and the rest. Its directory has to come first so it wins
+        # over the shared C++ one. macOS]
+        "\"$(PODS_TARGET_SRCROOT)/react/renderer/components/view/platform/macos\"",
         "\"$(PODS_TARGET_SRCROOT)/react/renderer/components/view/platform/cxx\"",
       ]
     end
@@ -135,6 +139,11 @@ Pod::Spec.new do |s|
       sss.dependency             "React-renderercss"
       sss.dependency             "Yoga"
       sss.source_files         = podspec_sources(["react/renderer/components/view/*.{m,mm,cpp,h}", "react/renderer/components/view/platform/cxx/**/*.{m,mm,cpp,h}"], ["react/renderer/components/view/*.{h}", "react/renderer/components/view/platform/cxx/**/*.{h}"])
+      # [macOS] Swap the shared C++ host-platform view files for the macOS ones.
+      # Both define the same symbols, so this is a replacement, not an addition.
+      sss.osx.source_files     = podspec_sources(["react/renderer/components/view/*.{m,mm,cpp,h}", "react/renderer/components/view/platform/macos/**/*.{m,mm,cpp,h}"], ["react/renderer/components/view/*.{h}", "react/renderer/components/view/platform/macos/**/*.{h}"])
+      sss.osx.exclude_files    = "react/renderer/components/view/platform/cxx/**/*"
+      # macOS]
       sss.header_dir           = "react/renderer/components/view"
     end
 

package/ReactCommon/react/renderer/components/view/platform/macos/react/renderer/components/view/HostPlatformTouch.h

@@ -0,0 +1,16 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// [macOS] Touch is the shared one; a mouse is reported through the same path.
+
+#pragma once
+
+#include <react/renderer/components/view/BaseTouch.h>
+
+namespace facebook::react {
+using HostPlatformTouch = BaseTouch;
+} // namespace facebook::react

package/ReactCommon/react/renderer/components/view/platform/macos/react/renderer/components/view/HostPlatformViewEventEmitter.cpp

@@ -0,0 +1,39 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// [macOS] See HostPlatformViewEventEmitter.h.
+
+#include "HostPlatformViewEventEmitter.h"
+
+namespace facebook::react {
+
+static jsi::Value mouseEventPayload(jsi::Runtime &runtime, const HostPlatformViewEventEmitter::MouseEvent &event)
+{
+  auto payload = jsi::Object(runtime);
+  payload.setProperty(runtime, "clientX", event.clientX);
+  payload.setProperty(runtime, "clientY", event.clientY);
+  payload.setProperty(runtime, "screenX", event.screenX);
+  payload.setProperty(runtime, "screenY", event.screenY);
+  payload.setProperty(runtime, "pageX", event.pageX);
+  payload.setProperty(runtime, "pageY", event.pageY);
+  return payload;
+}
+
+#define RCT_MACOS_MOUSE_EVENT(name)                                                   \
+  void HostPlatformViewEventEmitter::name(const MouseEvent &event) const              \
+  {                                                                                   \
+    dispatchEvent(#name, [event](jsi::Runtime &runtime) {                             \
+      return mouseEventPayload(runtime, event);                                       \
+    });                                                                               \
+  }
+
+RCT_MACOS_MOUSE_EVENT(onMouseEnter)
+RCT_MACOS_MOUSE_EVENT(onMouseLeave)
+RCT_MACOS_MOUSE_EVENT(onDoubleClick)
+RCT_MACOS_MOUSE_EVENT(onAuxClick)
+
+} // namespace facebook::react

package/ReactCommon/react/renderer/components/view/platform/macos/react/renderer/components/view/HostPlatformViewEventEmitter.h

@@ -0,0 +1,39 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// [macOS] Adds the pointer events AppKit can report and UIKit cannot.
+
+#pragma once
+
+#include <react/renderer/components/view/BaseViewEventEmitter.h>
+
+namespace facebook::react {
+
+class HostPlatformViewEventEmitter : public BaseViewEventEmitter {
+ public:
+  using BaseViewEventEmitter::BaseViewEventEmitter;
+
+  /**
+   * A mouse crossing into or out of the view. There is no touch equivalent, so
+   * these have no counterpart in BaseViewEventEmitter.
+   */
+  struct MouseEvent {
+    Float clientX{};
+    Float clientY{};
+    Float screenX{};
+    Float screenY{};
+    Float pageX{};
+    Float pageY{};
+  };
+
+  void onMouseEnter(const MouseEvent &event) const;
+  void onMouseLeave(const MouseEvent &event) const;
+  void onDoubleClick(const MouseEvent &event) const;
+  void onAuxClick(const MouseEvent &event) const;
+};
+
+} // namespace facebook::react

package/ReactCommon/react/renderer/components/view/platform/macos/react/renderer/components/view/HostPlatformViewEvents.h

@@ -0,0 +1,59 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// [macOS] Which macOS-only handlers a view actually has.
+//
+// Installing an NSTrackingArea on every view to find out later would cost a
+// mouse-moved dispatch per view per move. The props carry a bitset instead, so
+// the view only tracks the mouse when something is listening -- the same
+// arrangement BaseViewProps uses for pointer and responder events.
+
+#pragma once
+
+#include <bitset>
+#include <cstddef>
+
+namespace facebook::react {
+
+struct HostPlatformViewEvents {
+  std::bitset<8> bits{};
+
+  enum class Offset : std::size_t {
+    MouseEnter = 0,
+    MouseLeave = 1,
+    DoubleClick = 2,
+    AuxClick = 3,
+  };
+
+  constexpr bool operator[](Offset offset) const
+  {
+    return bits[static_cast<std::size_t>(offset)];
+  }
+
+  std::bitset<8>::reference operator[](Offset offset)
+  {
+    return bits[static_cast<std::size_t>(offset)];
+  }
+
+  /** True when any macOS mouse handler is present. */
+  bool wantsMouseTracking() const
+  {
+    return (*this)[Offset::MouseEnter] || (*this)[Offset::MouseLeave];
+  }
+};
+
+inline bool operator==(const HostPlatformViewEvents &lhs, const HostPlatformViewEvents &rhs)
+{
+  return lhs.bits == rhs.bits;
+}
+
+inline bool operator!=(const HostPlatformViewEvents &lhs, const HostPlatformViewEvents &rhs)
+{
+  return lhs.bits != rhs.bits;
+}
+
+} // namespace facebook::react

package/ReactCommon/react/renderer/components/view/platform/macos/react/renderer/components/view/HostPlatformViewProps.cpp

@@ -0,0 +1,113 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// [macOS] See HostPlatformViewProps.h.
+
+#include "HostPlatformViewProps.h"
+
+#include <react/featureflags/ReactNativeFeatureFlags.h>
+#include <react/renderer/core/propsConversions.h>
+
+namespace facebook::react {
+
+// The whole-map parsing path (feature flag off) needs a converter for the
+// bitset, mirroring the one propsConversions.h provides for ViewEvents.
+static inline HostPlatformViewEvents convertRawProp(
+    const PropsParserContext &context,
+    const RawProps &rawProps,
+    const HostPlatformViewEvents &sourceValue,
+    const HostPlatformViewEvents &defaultValue)
+{
+  HostPlatformViewEvents result{};
+  using Offset = HostPlatformViewEvents::Offset;
+
+#define RCT_MACOS_CONVERT_EVENT(name, offset)         \
+  result[Offset::offset] = convertRawProp(            \
+      context, rawProps, name, sourceValue[Offset::offset], defaultValue[Offset::offset])
+
+  RCT_MACOS_CONVERT_EVENT("onMouseEnter", MouseEnter);
+  RCT_MACOS_CONVERT_EVENT("onMouseLeave", MouseLeave);
+  RCT_MACOS_CONVERT_EVENT("onDoubleClick", DoubleClick);
+  RCT_MACOS_CONVERT_EVENT("onAuxClick", AuxClick);
+
+#undef RCT_MACOS_CONVERT_EVENT
+
+  return result;
+}
+
+// Two parsing paths exist and both have to be fed. With the iterator setter
+// feature flag on, props arrive one at a time through setProp and the
+// constructor just carries the previous value forward; with it off, the
+// constructor parses the whole RawProps map itself.
+#define RCT_MACOS_PROP(name)                                    \
+  name(ReactNativeFeatureFlags::enableCppPropsIteratorSetter()  \
+           ? sourceProps.name                                   \
+           : convertRawProp(context, rawProps, #name, sourceProps.name, {}))
+
+HostPlatformViewProps::HostPlatformViewProps(
+    const PropsParserContext &context,
+    const HostPlatformViewProps &sourceProps,
+    const RawProps &rawProps)
+    : BaseViewProps(context, sourceProps, rawProps),
+      hostPlatformEvents(
+          ReactNativeFeatureFlags::enableCppPropsIteratorSetter()
+              ? sourceProps.hostPlatformEvents
+              : convertRawProp(context, rawProps, sourceProps.hostPlatformEvents, {})),
+      RCT_MACOS_PROP(focusable),
+      RCT_MACOS_PROP(enableFocusRing),
+      RCT_MACOS_PROP(tooltip),
+      RCT_MACOS_PROP(acceptsFirstMouse),
+      RCT_MACOS_PROP(allowsVibrancy),
+      RCT_MACOS_PROP(mouseDownCanMoveWindow)
+{
+}
+
+#undef RCT_MACOS_PROP
+
+void HostPlatformViewProps::setProp(
+    const PropsParserContext &context,
+    RawPropsPropNameHash hash,
+    const char *propName,
+    const RawValue &value)
+{
+  // Every Props struct must call super unconditionally: several structs can
+  // share the same raw value, and skipping the call drops it for all of them.
+  BaseViewProps::setProp(context, hash, propName, value);
+
+  static auto defaults = HostPlatformViewProps{};
+
+// An `onX` prop is stored as a bit rather than a value: all the view needs to
+// know is whether anything is listening.
+#define RCT_MACOS_EVENT_CASE(eventType)                                \
+  case CONSTEXPR_RAW_PROPS_KEY_HASH("on" #eventType): {                \
+    const auto offset = HostPlatformViewEvents::Offset::eventType;     \
+    HostPlatformViewEvents defaultEvents{};                            \
+    bool listening = defaultEvents[offset];                            \
+    if (value.hasValue()) {                                            \
+      fromRawValue(context, value, listening);                         \
+    }                                                                  \
+    hostPlatformEvents[offset] = listening;                            \
+    return;                                                            \
+  }
+
+  switch (hash) {
+    RCT_MACOS_EVENT_CASE(MouseEnter);
+    RCT_MACOS_EVENT_CASE(MouseLeave);
+    RCT_MACOS_EVENT_CASE(DoubleClick);
+    RCT_MACOS_EVENT_CASE(AuxClick);
+    RAW_SET_PROP_SWITCH_CASE_BASIC(focusable);
+    RAW_SET_PROP_SWITCH_CASE_BASIC(enableFocusRing);
+    RAW_SET_PROP_SWITCH_CASE_BASIC(tooltip);
+    RAW_SET_PROP_SWITCH_CASE_BASIC(acceptsFirstMouse);
+    RAW_SET_PROP_SWITCH_CASE_BASIC(allowsVibrancy);
+    RAW_SET_PROP_SWITCH_CASE_BASIC(mouseDownCanMoveWindow);
+  }
+
+#undef RCT_MACOS_EVENT_CASE
+}
+
+} // namespace facebook::react

package/ReactCommon/react/renderer/components/view/platform/macos/react/renderer/components/view/HostPlatformViewProps.h

@@ -0,0 +1,66 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// [macOS] The props a Mac view has and an iOS one does not.
+//
+// React Native reaches platform-specific view props through this class -- see
+// the sibling directories under components/view/platform. Adding them here
+// means no shared C++ changes at all, and the names match
+// microsoft/react-native-macos so code written against that fork type-checks
+// and behaves the same.
+
+#pragma once
+
+#include <react/renderer/components/view/BaseViewProps.h>
+#include <react/renderer/core/PropsParserContext.h>
+
+#include <optional>
+#include <string>
+
+#include "HostPlatformViewEvents.h"
+
+namespace facebook::react {
+
+class HostPlatformViewProps : public BaseViewProps {
+ public:
+  HostPlatformViewProps() = default;
+  HostPlatformViewProps(
+      const PropsParserContext &context,
+      const HostPlatformViewProps &sourceProps,
+      const RawProps &rawProps);
+
+  void
+  setProp(const PropsParserContext &context, RawPropsPropNameHash hash, const char *propName, const RawValue &value);
+
+  /** Which macOS-only handlers are attached; see HostPlatformViewEvents. */
+  HostPlatformViewEvents hostPlatformEvents{};
+
+#pragma mark - Props
+
+  /** Participates in the key view loop, i.e. reachable by Tab. */
+  bool focusable{false};
+
+  /** Draws the focus ring while first responder. On by default, as in AppKit. */
+  bool enableFocusRing{true};
+
+  /** The view's help tag. std::nullopt leaves any inherited tooltip alone. */
+  std::optional<std::string> tooltip{};
+
+  /** Take the click that activates a background window, rather than swallowing it. */
+  bool acceptsFirstMouse{false};
+
+  /** Let the view sit in an NSVisualEffectView and blend with what is behind it. */
+  bool allowsVibrancy{false};
+
+  /**
+   * Whether dragging the view moves the window. AppKit's default is true, and
+   * that is kept here: a view that opts out is the interesting case.
+   */
+  bool mouseDownCanMoveWindow{true};
+};
+
+} // namespace facebook::react

package/ReactCommon/react/renderer/components/view/platform/macos/react/renderer/components/view/HostPlatformViewTraitsInitializer.h

@@ -0,0 +1,37 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// [macOS] Keyboard focus is a real thing on macOS, so unlike the shared C++
+// initializer this reports `focusable` views as keyboard-focusable.
+
+#pragma once
+
+#include <react/renderer/components/view/ViewProps.h>
+#include <react/renderer/core/ShadowNodeTraits.h>
+
+namespace facebook::react::HostPlatformViewTraitsInitializer {
+
+inline bool formsStackingContext(const ViewProps & /*props*/)
+{
+  return false;
+}
+
+inline bool formsView(const ViewProps &props)
+{
+  // These all need a backing NSView, so a view carrying any of them must not be
+  // flattened away: a focusable view has to join the key view loop, a tooltip
+  // has to attach to something, and mouse tracking needs an NSTrackingArea
+  // owner. Flattening is otherwise invisible -- the handler simply never fires.
+  return props.focusable || props.tooltip.has_value() || props.hostPlatformEvents.bits.any();
+}
+
+inline bool isKeyboardFocusable(const ViewProps &props)
+{
+  return props.focusable;
+}
+
+} // namespace facebook::react::HostPlatformViewTraitsInitializer

package/ReactCommon/react/renderer/graphics/platform/ios/react/renderer/graphics/HostPlatformColor.h

@@ -30,6 +30,12 @@ struct Color {
 
   static Color createSemanticColor(std::vector<std::string> &semanticItems);
 
+#if TARGET_OS_OSX // [macOS] Wrap an already-resolved NSColor. AppKit derives some
+  // colours from others -- colorWithSystemEffect: -- so the parser needs a way
+  // to hand back a colour it built itself. macOS]
+  static Color createFromHostPlatformColor(std::shared_ptr<void> hostPlatformColor);
+#endif
+
   std::shared_ptr<void> getUIColor() const
   {
     return uiColor_;

package/ReactCommon/react/renderer/graphics/platform/ios/react/renderer/graphics/HostPlatformColor.mm

@@ -95,6 +95,13 @@ int32_t ColorFromColorComponents(const facebook::react::ColorComponents &compone
 int32_t ColorFromUIColor(UIColor *color)
 {
   CGFloat rgba[4];
+#if TARGET_OS_OSX // [macOS] catalog colours need converting first; see Color::getChannel
+  NSColor *rgbColor = [color colorUsingColorSpace:NSColorSpace.sRGBColorSpace];
+  if (rgbColor == nil) {
+    return 0;
+  }
+  color = rgbColor;
+#endif // macOS]
   [color getRed:&rgba[0] green:&rgba[1] blue:&rgba[2] alpha:&rgba[3]];
   return ColorFromColorComponents(
       {.red = (float)rgba[0], .green = (float)rgba[1], .blue = (float)rgba[2], .alpha = (float)rgba[3]});
@@ -226,6 +233,23 @@ float Color::getChannel(int channelId) const
 {
   CGFloat rgba[4];
   UIColor *color = (__bridge UIColor *)getUIColor().get();
+#if TARGET_OS_OSX // [macOS
+  // AppKit's named colours -- everything PlatformColor() resolves to, plus the
+  // system palette -- live in the Catalog colour space, and asking one for its
+  // RGBA components without converting first raises:
+  //
+  //   -getRed:green:blue:alpha: not valid for the NSColor Catalog color
+  //
+  // sRGB is the right target: it is what the components are interpreted as
+  // everywhere else in the renderer.
+  NSColor *rgbColor = [color colorUsingColorSpace:NSColorSpace.sRGBColorSpace];
+  if (rgbColor == nil) {
+    // A pattern or otherwise unconvertible colour. Treat it as transparent
+    // rather than raising, which would take the whole app down.
+    return 0;
+  }
+  color = rgbColor;
+#endif // macOS]
   [color getRed:&rgba[0] green:&rgba[1] blue:&rgba[2] alpha:&rgba[3]];
   return static_cast<float>(rgba[channelId]);
 }
@@ -235,6 +259,13 @@ std::size_t Color::getUIColorHash() const
   return uiColorHashValue_;
 }
 
+#if TARGET_OS_OSX // [macOS
+Color Color::createFromHostPlatformColor(std::shared_ptr<void> hostPlatformColor)
+{
+  return Color(std::move(hostPlatformColor));
+}
+#endif // macOS]
+
 Color Color::createSemanticColor(std::vector<std::string> &semanticItems)
 {
   auto semanticColor = RCTPlatformColorFromSemanticItems(semanticItems);

package/ReactCommon/react/renderer/graphics/platform/ios/react/renderer/graphics/PlatformColorParser.mm

@@ -63,6 +63,40 @@ SharedColor parsePlatformColor(const ContextContainer &contextContainer, int32_t
         items.at("dynamic").hasType<std::unordered_map<std::string, RawValue>>()) {
       auto dynamicItems = (std::unordered_map<std::string, RawValue>)items.at("dynamic");
       return RCTPlatformColorComponentsFromDynamicItems(contextContainer, surfaceId, dynamicItems);
+#if TARGET_OS_OSX // [macOS
+    } else if (
+        items.find("colorWithSystemEffect") != items.end() &&
+        items.at("colorWithSystemEffect").hasType<std::unordered_map<std::string, RawValue>>()) {
+      // AppKit derives the pressed / disabled / rollover variant of a colour
+      // rather than making the caller supply it. UIKit has no equivalent, so
+      // this arm only exists here.
+      auto effectItems = (std::unordered_map<std::string, RawValue>)items.at("colorWithSystemEffect");
+      if (effectItems.count("baseColor") == 0u || effectItems.count("systemEffect") == 0u) {
+        return clearColor();
+      }
+
+      SharedColor baseSharedColor;
+      fromRawValue(contextContainer, surfaceId, effectItems.at("baseColor"), baseSharedColor);
+      auto effectName = (std::string)effectItems.at("systemEffect");
+
+      static const std::unordered_map<std::string, NSColorSystemEffect> effects = {
+          {"none", NSColorSystemEffectNone},
+          {"pressed", NSColorSystemEffectPressed},
+          {"deepPressed", NSColorSystemEffectDeepPressed},
+          {"disabled", NSColorSystemEffectDisabled},
+          {"rollover", NSColorSystemEffectRollover}};
+
+      auto effect = effects.find(effectName);
+      if (effect == effects.end()) {
+        return clearColor();
+      }
+
+      NSColor *baseColor = RCTPlatformColorFromColor(*baseSharedColor);
+      if (baseColor == nil) {
+        return clearColor();
+      }
+      return SharedColor(Color::createFromHostPlatformColor(wrapManagedObject([baseColor colorWithSystemEffect:effect->second])));
+#endif // macOS]
     }
   }
 

package/ReactCommon/react/renderer/graphics/platform/ios/react/renderer/graphics/RCTPlatformColorUtils.mm

@@ -183,6 +183,13 @@ static inline NSString *_NSStringFromCString(
 static inline facebook::react::ColorComponents _ColorComponentsFromUIColor(UIColor *color)
 {
   CGFloat rgba[4];
+#if TARGET_OS_OSX // [macOS] catalog colours need converting first
+  NSColor *rgbColor = [color colorUsingColorSpace:NSColorSpace.sRGBColorSpace];
+  if (rgbColor == nil) {
+    return {.red = 0, .green = 0, .blue = 0, .alpha = 0};
+  }
+  color = rgbColor;
+#endif // macOS]
   [color getRed:&rgba[0] green:&rgba[1] blue:&rgba[2] alpha:&rgba[3]];
   return {.red = (float)rgba[0], .green = (float)rgba[1], .blue = (float)rgba[2], .alpha = (float)rgba[3]};
 }
@@ -204,6 +211,22 @@ UIColor *RCTPlatformColorFromSemanticItems(std::vector<std::string> &semanticIte
     if (uiColor != nil) {
       return uiColor;
     }
+#if TARGET_OS_OSX // [macOS
+    // _UIColorFromSemanticString only knows UIKit's vocabulary. AppKit's own --
+    // labelColor, controlAccentColor, windowBackgroundColor and the rest -- are
+    // class properties on NSColor, so asking NSColor directly covers all of
+    // them without a second table. Without this a macOS-only name silently
+    // resolves to clearColor and the view just renders transparent.
+    SEL appKitSelector = NSSelectorFromString(semanticNSString);
+    if (appKitSelector != nil && [UIColor respondsToSelector:appKitSelector]) {
+      IMP imp = [[UIColor class] methodForSelector:appKitSelector];
+      id (*getColor)(id, SEL) = (id (*)(id, SEL))imp;
+      id candidate = getColor([UIColor class], appKitSelector);
+      if ([candidate isKindOfClass:[UIColor class]]) {
+        return candidate;
+      }
+    }
+#endif // macOS]
   }
 
   return UIColor.clearColor;

package/index.js

@@ -270,6 +270,16 @@ module.exports = {
     return require('./Libraries/StyleSheet/PlatformColorValueTypesIOS')
       .DynamicColorIOS;
   },
+  // [macOS] AppKit's appearance-aware and system-effect colours.
+  get DynamicColorMacOS() {
+    return require('./Libraries/StyleSheet/PlatformColorValueTypesMacOS')
+      .DynamicColorMacOS;
+  },
+  get ColorWithSystemEffectMacOS() {
+    return require('./Libraries/StyleSheet/PlatformColorValueTypesMacOS')
+      .ColorWithSystemEffectMacOS;
+  },
+  // macOS]
   get Easing() {
     return require('./Libraries/Animated/Easing').default;
   },

package/macos/UIKitCompat/UIKit/UIColor.m

@@ -7,6 +7,7 @@
  */
 
 #import "UIColor.h"
+#import "UITraitCollection.h"
 
 @implementation NSColor (UIKitCompat)
 
@@ -14,7 +15,12 @@
 {
   return [NSColor colorWithName:nil
                 dynamicProvider:^NSColor *(NSAppearance *appearance) {
-                  return provider(appearance);
+                  // UIKit hands the provider a UITraitCollection and callers
+                  // read -userInterfaceStyle and -accessibilityContrast off it.
+                  // AppKit hands out an NSAppearance, which answers neither, so
+                  // passing it straight through raises "unrecognized selector"
+                  // the first time a dynamic colour is resolved.
+                  return provider([UITraitCollection traitCollectionWithAppearance:appearance]);
                 }];
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "not-react-native-macos",
-  "version": "0.87.1-rc.3",
+  "version": "0.87.1-rc.4",
   "description": "A framework for building native apps using React",
   "license": "MIT",
   "repository": {