WIP - Fabric ScrollView fixes

packages/react-native/Libraries/Components/ScrollView/ScrollContentViewNativeComponent.js

@@ -8,25 +8,18 @@
  * @flow
  */
 
-import type {
-  HostComponent,
-  PartialViewConfig,
-} from '../../Renderer/shims/ReactNativeTypes';
-import type {ViewProps as Props} from '../View/ViewPropTypes';
+import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
+import type {ViewProps} from '../View/ViewPropTypes';
 
-import * as NativeComponentRegistry from '../../NativeComponent/NativeComponentRegistry';
+import codegenNativeComponent from '../../Utilities/codegenNativeComponent';
 
-export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = {
-  uiViewClassName: 'RCTScrollContentView',
-  bubblingEventTypes: {},
-  directEventTypes: {},
-  validAttributes: {},
-};
+type NativeProps = $ReadOnly<{|
+  ...ViewProps,
+  inverted?: ?boolean,
+|}>;
 
-const ScrollContentViewNativeComponent: HostComponent<Props> =
-  NativeComponentRegistry.get<Props>(
-    'RCTScrollContentView',
-    () => __INTERNAL_VIEW_CONFIG,
-  );
-
-export default ScrollContentViewNativeComponent;
+export default (codegenNativeComponent<NativeProps>('ScrollContentView', {
+  paperComponentName: 'RCTScrollContentView',
+  excludedPlatforms: ['android'],
+  interfaceOnly: true,
+}): HostComponent<NativeProps>);

packages/react-native/React/Fabric/Mounting/ComponentViews/RCTFabricComponentsPlugins.h

@@ -36,6 +36,9 @@ Class<RCTComponentViewProtocol> RCTParagraphCls(void) __attribute__((used));
 Class<RCTComponentViewProtocol> RCTPullToRefreshViewCls(void) __attribute__((used));
 Class<RCTComponentViewProtocol> RCTSafeAreaViewCls(void) __attribute__((used));
 Class<RCTComponentViewProtocol> RCTScrollViewCls(void) __attribute__((used));
+#if TARGET_OS_OSX // [macOS
+Class<RCTComponentViewProtocol> RCTScrollContentViewCls(void) __attribute__((used));
+#endif // macOS]
 Class<RCTComponentViewProtocol> RCTSwitchCls(void) __attribute__((used));
 Class<RCTComponentViewProtocol> RCTTextInputCls(void) __attribute__((used));
 Class<RCTComponentViewProtocol> RCTUnimplementedNativeViewCls(void) __attribute__((used));

packages/react-native/React/Fabric/Mounting/ComponentViews/RCTFabricComponentsPlugins.mm

@@ -24,6 +24,9 @@
     {"PullToRefreshView", RCTPullToRefreshViewCls},
     {"SafeAreaView", RCTSafeAreaViewCls},
     {"ScrollView", RCTScrollViewCls},
+#if TARGET_OS_OSX // [macOS
+    {"ScrollContentView", RCTScrollContentViewCls},
+#endif // macOS]
     {"Switch", RCTSwitchCls},
     {"TextInput", RCTTextInputCls},
     {"UnimplementedNativeView", RCTUnimplementedNativeViewCls},

packages/react-native/React/Fabric/Mounting/ComponentViews/ScrollView/RCTEnhancedScrollView.h

@@ -54,6 +54,14 @@ NS_ASSUME_NONNULL_BEGIN
 @property (nonatomic, assign) BOOL snapToEnd;
 @property (nonatomic, copy) NSArray<NSNumber *> *snapToOffsets;
 
+#if TARGET_OS_OSX // [macOS
+@property (nonatomic, assign) BOOL inverted;
+
+- (void)setContentOffset:(CGPoint)contentOffset animated:(BOOL)animated;
+- (void)zoomToRect:(CGRect)rect animated:(BOOL)animated;
+- (void)flashScrollIndicators;
+#endif // macOS]
+
 /*
  * Makes `setContentOffset:` method no-op when given `block` is executed.
  * The block is being executed synchronously.

packages/react-native/React/Fabric/Mounting/ComponentViews/ScrollView/RCTEnhancedScrollView.mm

@@ -58,12 +58,60 @@ - (instancetype)initWithFrame:(CGRect)frame
       [weakSelf setPrivateDelegate:delegate];
     }];
     [_delegateSplitter addDelegate:self];
-#endif // [macOS]
+#else // [macOS
+    self.hasHorizontalScroller = YES;
+    self.hasVerticalScroller = YES;
+    self.autohidesScrollers = YES;
+#endif // macOS]
   }
 
   return self;
 }
 
+#if TARGET_OS_OSX // [macOS
+- (void)setFrame:(NSRect)frame
+{
+  // Preserving and revalidating `contentOffset`.
+  CGPoint originalOffset = self.contentOffset;
+
+  [super setFrame:frame];
+
+  UIEdgeInsets contentInset = self.contentInset;
+  CGSize contentSize = self.contentSize;
+
+  // If contentSize has not been measured yet we can't check bounds.
+  if (CGSizeEqualToSize(contentSize, CGSizeZero)) {
+    self.contentOffset = originalOffset;
+  } else {
+    CGSize boundsSize = self.bounds.size;
+    CGFloat xMaxOffset = contentSize.width - boundsSize.width + contentInset.right;
+    CGFloat yMaxOffset = contentSize.height - boundsSize.height + contentInset.bottom;
+    // Make sure offset doesn't exceed bounds. This can happen on screen rotation.
+    if ((originalOffset.x >= -contentInset.left) && (originalOffset.x <= xMaxOffset) &&
+        (originalOffset.y >= -contentInset.top) && (originalOffset.y <= yMaxOffset)) {
+      return;
+    }
+    self.contentOffset = CGPointMake(
+        MAX(-contentInset.left, MIN(xMaxOffset, originalOffset.x)),
+        MAX(-contentInset.top, MIN(yMaxOffset, originalOffset.y)));
+  }
+}
+
+- (BOOL)isFlipped
+{
+  return !self.inverted;
+}
+
+- (NSSize)contentSize
+{
+  if (!self.documentView) {
+    return [super contentSize];
+  }
+
+  return self.documentView.frame.size;
+}
+#endif // macos]
+
 - (void)preserveContentOffsetWithBlock:(void (^)())block
 {
   if (!block) {
@@ -88,7 +136,11 @@ - (void)setContentOffset:(CGPoint)contentOffset
   }
 
   if (_centerContent && !CGSizeEqualToSize(self.contentSize, CGSizeZero)) {
+#if !TARGET_OS_OSX // [macOS]
     CGSize scrollViewSize = self.bounds.size;
+#else // [macOS
+    CGSize scrollViewSize = self.contentView.bounds.size;
+#endif // macOS]
     if (self.contentSize.width <= scrollViewSize.width) {
       contentOffset.x = -(scrollViewSize.width - self.contentSize.width) / 2.0;
     }
@@ -97,11 +149,42 @@ - (void)setContentOffset:(CGPoint)contentOffset
     }
   }
 
+#if !TARGET_OS_OSX // [macOS]
   super.contentOffset = CGPointMake(
       RCTSanitizeNaNValue(contentOffset.x, @"scrollView.contentOffset.x"),
       RCTSanitizeNaNValue(contentOffset.y, @"scrollView.contentOffset.y"));
+#else // [macOS
+  if (!NSEqualPoints(contentOffset, self.documentVisibleRect.origin)) {
+    [self.contentView scrollToPoint:contentOffset];
+    [self reflectScrolledClipView:self.contentView];
+  }
+#endif // macOS]
+}
+
+#if TARGET_OS_OSX // [macOS
+- (void)setContentOffset:(CGPoint)contentOffset animated:(BOOL)animated
+{
+  if (animated) {
+    [NSAnimationContext beginGrouping];
+    [[NSAnimationContext currentContext] setDuration:0.3];
+    [[self.contentView animator] setBoundsOrigin:contentOffset];
+    [NSAnimationContext endGrouping];
+  } else {
+    self.contentOffset = contentOffset;
+  } 
+}
+
+- (void)zoomToRect:(CGRect)rect animated:(BOOL)animated
+{
+  [self magnifyToFitRect:rect];
 }
 
+- (void)flashScrollIndicators
+{
+  [self flashScrollers];
+}
+#endif // macOS]
+
 #if !TARGET_OS_OSX // [macOS]
 - (BOOL)touchesShouldCancelInContentView:(RCTUIView *)view // [macOS]
 {

packages/react-native/React/Fabric/Mounting/ComponentViews/ScrollView/RCTScrollContentComponentView.h

@@ -0,0 +1,20 @@
+/*
+ * 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.
+ */
+
+#import <React/RCTUIKit.h> // [macOS]
+
+#import <React/RCTViewComponentView.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface RCTScrollContentComponentView : RCTViewComponentView
+
+@property (nonatomic, assign, getter=isInverted) BOOL inverted;
+
+@end
+
+NS_ASSUME_NONNULL_END

packages/react-native/React/Fabric/Mounting/ComponentViews/ScrollView/RCTScrollContentComponentView.mm

@@ -0,0 +1,54 @@
+/*
+ * 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.
+ */
+
+#import "RCTScrollContentComponentView.h"
+
+#import <react/renderer/components/scrollview/ScrollContentViewComponentDescriptor.h>
+#import <react/renderer/components/rncore/EventEmitters.h>
+#import <react/renderer/components/rncore/Props.h>
+
+#import "RCTFabricComponentsPlugins.h"
+
+using namespace facebook::react;
+
+@implementation RCTScrollContentComponentView
+
+ - (instancetype)init
+ {
+   if (self = [super init]) {
+     _props = std::make_shared<ScrollContentViewProps const>();
+   }
+
+   return self;
+ }
+
+- (void)updateProps:(Props::Shared const&)props oldProps:(Props::Shared const&)oldProps {
+  const auto& newViewProps = *std::static_pointer_cast<ScrollContentViewProps const>(props);
+
+  [self setInverted:newViewProps.inverted];
+
+  [super updateProps:props oldProps:oldProps];
+}
+
+- (BOOL)isFlipped
+{
+  return !self.inverted;
+}
+
+#pragma mark - RCTComponentViewProtocol
+
++ (ComponentDescriptorProvider)componentDescriptorProvider
+{
+  return concreteComponentDescriptorProvider<ScrollContentViewComponentDescriptor>();
+}
+
+Class<RCTComponentViewProtocol> RCTScrollContentViewCls(void)
+{
+  return RCTScrollContentComponentView.class;
+}
+
+@end

packages/react-native/React/Fabric/Mounting/ComponentViews/ScrollView/RCTScrollViewComponentView.h

@@ -50,6 +50,10 @@ NS_ASSUME_NONNULL_BEGIN
     RCTGenericDelegateSplitter<id<UIScrollViewDelegate>> *scrollViewDelegateSplitter;
 #endif // [macOS]
 
+#if TARGET_OS_OSX // [macOS
+@property (nonatomic, assign) UIEdgeInsets contentInset;
+#endif // macOS]
+
 @end
 
 /*