Align cursor implementation to W3C cursors (microsoft#2162)

* Cherry-pick d3e3e2a

* Port the rest of code

* Support most cursors on paper

* remove unnecessary style

* Support Fabric as well

* Share Paper and Fabric implementation

* fix typos

* Remove SF Symbol cursors

* update snapshots

* lint --fix

* Add vertical text

* undo space

* update snapshot

* fixes

* Update macros

* Implement RCTCursorNone

* Mark vertical-text as a macOS diff

packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts

@@ -29,26 +29,43 @@ type AnimatableStringValue = string | Animated.AnimatedNode;
 
 // [macOS
 export type CursorValue =
-  | 'alias'
   | 'auto'
+  | 'alias'
+  | 'all-scroll'
+  | 'cell'
   | 'col-resize'
   | 'context-menu'
   | 'copy'
   | 'crosshair'
   | 'default'
-  | 'disappearing-item'
   | 'e-resize'
+  | 'ew-resize'
   | 'grab'
   | 'grabbing'
+  | 'help'
+  | 'move'
+  | 'ne-resize'
+  | 'nesw-resize'
   | 'n-resize'
+  | 'ns-resize'
+  | 'nw-resize'
+  | 'nwse-resize'
   | 'no-drop'
+  | 'none'
   | 'not-allowed'
   | 'pointer'
+  | 'progress'
   | 'row-resize'
   | 's-resize'
+  | 'se-resize'
+  | 'sw-resize'
   | 'text'
+  | 'url'
   | 'vertical-text'
-  | 'w-resize';
+  | 'w-resize'
+  | 'wait'
+  | 'zoom-in'
+  | 'zoom-out';
 // macOS]
 
 /**

packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js

@@ -39,26 +39,43 @@ export type AnimatableNumericValue = number | AnimatedNode;
 
 // [macOS
 export type CursorValue =
-  | 'alias'
   | 'auto'
+  | 'alias'
+  | 'all-scroll'
+  | 'cell'
   | 'col-resize'
   | 'context-menu'
   | 'copy'
   | 'crosshair'
   | 'default'
-  | 'disappearing-item'
   | 'e-resize'
+  | 'ew-resize'
   | 'grab'
   | 'grabbing'
+  | 'help'
+  | 'move'
+  | 'ne-rsize'
+  | 'nesw-resize'
   | 'n-resize'
+  | 'ns-resize'
+  | 'ns-resize'
+  | 'nwse-resize'
   | 'no-drop'
+  | 'none'
   | 'not-allowed'
   | 'pointer'
-  | 'row-resize'
+  | 'progress'
+  | 'row-esize'
   | 's-resize'
+  | 'se-resize'
+  | 'sw-resize'
   | 'text'
+  | 'url'
   | 'vertical-text'
-  | 'w-resize';
+  | 'w-resize'
+  | 'wait'
+  | 'zoom-in'
+  | 'zoom-out';
 // macOS]
 
 /**

packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap

@@ -7715,26 +7715,43 @@ export type EdgeInsetsValue = {
 export type DimensionValue = number | string | \\"auto\\" | AnimatedNode | null;
 export type AnimatableNumericValue = number | AnimatedNode;
 export type CursorValue =
-  | \\"alias\\"
   | \\"auto\\"
+  | \\"alias\\"
+  | \\"all-scroll\\"
+  | \\"cell\\"
   | \\"col-resize\\"
   | \\"context-menu\\"
   | \\"copy\\"
   | \\"crosshair\\"
   | \\"default\\"
-  | \\"disappearing-item\\"
   | \\"e-resize\\"
+  | \\"ew-resize\\"
   | \\"grab\\"
   | \\"grabbing\\"
+  | \\"help\\"
+  | \\"move\\"
+  | \\"ne-rsize\\"
+  | \\"nesw-resize\\"
   | \\"n-resize\\"
+  | \\"ns-resize\\"
+  | \\"ns-resize\\"
+  | \\"nwse-resize\\"
   | \\"no-drop\\"
+  | \\"none\\"
   | \\"not-allowed\\"
   | \\"pointer\\"
-  | \\"row-resize\\"
+  | \\"progress\\"
+  | \\"row-esize\\"
   | \\"s-resize\\"
+  | \\"se-resize\\"
+  | \\"sw-resize\\"
   | \\"text\\"
+  | \\"url\\"
   | \\"vertical-text\\"
-  | \\"w-resize\\";
+  | \\"w-resize\\"
+  | \\"wait\\"
+  | \\"zoom-in\\"
+  | \\"zoom-out\\";
 type ____LayoutStyle_Internal = $ReadOnly<{
   display?: \\"none\\" | \\"flex\\",
   width?: DimensionValue,

packages/react-native/React/Base/RCTConvert.mm

@@ -552,34 +552,51 @@ + (UIKeyboardType)UIKeyboardType:(id)json RCT_DYNAMIC
     integerValue)
 #endif // [macOS]
 
-// [macOS [visionOS]
+// [macOS
 RCT_ENUM_CONVERTER(
     RCTCursor,
     (@{
-      @"alias" : @(RCTCursorAlias),
       @"auto" : @(RCTCursorAuto),
-      @"col-resize" : @(RCTCursorColumnResize),
-      @"context-menu" : @(RCTCursorContextualMenu),
+      @"alias" : @(RCTCursorAlias),
+      @"all-scroll" : @(RCTCursorAllScroll),
+      @"cell" : @(RCTCursorCell),
+      @"col-resize" : @(RCTCursorColResize),
+      @"context-menu" : @(RCTCursorContextMenu),
       @"copy" : @(RCTCursorCopy),
       @"crosshair" : @(RCTCursorCrosshair),
       @"default" : @(RCTCursorDefault),
-      @"disappearing-item" : @(RCTCursorDisappearingItem),
-      @"e-resize" : @(RCTCursorEastResize),
+      @"e-resize" : @(RCTCursorEResize),
+      @"ew-resize" : @(RCTCursorEWResize),
       @"grab" : @(RCTCursorGrab),
       @"grabbing" : @(RCTCursorGrabbing),
-      @"n-resize" : @(RCTCursorNorthResize),
+      @"help" : @(RCTCursorHelp),
+      @"move" : @(RCTCursorMove),
+      @"ne-resize" : @(RCTCursorNEResize),
+      @"nesw-resize" : @(RCTCursorNESWResize),
+      @"n-resize" : @(RCTCursorNResize),
+      @"ns-resize" : @(RCTCursorNSResize),
+      @"nw-resize" : @(RCTCursorNWResize),
+      @"nwse-resize" : @(RCTCursorNWSEResize),
       @"no-drop" : @(RCTCursorNoDrop),
+      @"none" : @(RCTCursorNone),
       @"not-allowed" : @(RCTCursorNotAllowed),
       @"pointer" : @(RCTCursorPointer),
+      @"progress" : @(RCTCursorProgress),
       @"row-resize" : @(RCTCursorRowResize),
-      @"s-resize" : @(RCTCursorSouthResize),
+      @"s-resize" : @(RCTCursorSResize),
+      @"se-resize" : @(RCTCursorSEResize),
+      @"sw-resize" : @(RCTCursorSWResize),
       @"text" : @(RCTCursorText),
+      @"url" : @(RCTCursorUrl),
       @"vertical-text" : @(RCTCursorVerticalText),
-      @"w-resize" : @(RCTCursorWestResize),
+      @"w-resize" : @(RCTCursorWResize),
+      @"wait" : @(RCTCursorWait),
+      @"zoom-in" : @(RCTCursorZoomIn),
+      @"zoom-out" : @(RCTCursorZoomOut),
     }),
     RCTCursorAuto,
     integerValue)
-// macOS] [visionOS]
+// macOS]
 
 #if TARGET_OS_OSX // [macOS
 RCT_MULTI_ENUM_CONVERTER(NSTextCheckingTypes, (@{

packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm

@@ -14,7 +14,7 @@
 #import <React/RCTAssert.h>
 #import <React/RCTBorderDrawing.h>
 #import <React/RCTConversions.h>
-#import <React/RCTUtils.h> // [macOS]
+#import <React/RCTCursor.h> // [macOS]
 #import <React/RCTLocalizedString.h>
 #import <react/renderer/components/view/ViewComponentDescriptor.h>
 #import <react/renderer/components/view/ViewEventEmitter.h>
@@ -107,7 +107,7 @@ - (void)resetCursorRects
   [self discardCursorRects];
   if (_props->cursor != Cursor::Auto)
   {
-    NSCursor *cursor = NSCursorFromCursor(_props->cursor);
+    NSCursor *cursor = NSCursorFromRCTCursor(RCTCursorFromCursor(_props->cursor));
     [self addCursorRect:self.bounds cursor:cursor];
   }
 }
@@ -611,54 +611,87 @@ static RCTBorderStyle RCTBorderStyleFromBorderStyle(BorderStyle borderStyle)
 }
 
 #if TARGET_OS_OSX // [macOS
-  static NSCursor *NSCursorFromCursor(Cursor cursor)
+static RCTCursor RCTCursorFromCursor(Cursor cursor)
 {
   switch (cursor) {
     case Cursor::Auto:
-      return [NSCursor arrowCursor];
+      return RCTCursorAuto;
     case Cursor::Alias:
-      return [NSCursor dragLinkCursor];
-    case Cursor::ColumnResize:
-      return [NSCursor resizeLeftRightCursor];
-    case Cursor::ContextualMenu:
-      return [NSCursor contextualMenuCursor];
+      return RCTCursorAlias;
+    case Cursor::AllScroll:
+      return RCTCursorAllScroll;
+    case Cursor::Cell:
+      return RCTCursorCell;
+    case Cursor::ColResize:
+      return RCTCursorColResize;
+    case Cursor::ContextMenu:
+      return RCTCursorContextMenu;
     case Cursor::Copy:
-      return [NSCursor dragCopyCursor];
+      return RCTCursorCopy;
     case Cursor::Crosshair:
-      return [NSCursor crosshairCursor];
+      return RCTCursorCrosshair;
     case Cursor::Default:
-      return [NSCursor arrowCursor];
-    case Cursor::DisappearingItem:
-      return [NSCursor disappearingItemCursor];
-    case Cursor::EastResize:
-      return [NSCursor resizeRightCursor];
+      return RCTCursorDefault;
+    case Cursor::EResize:
+      return RCTCursorEResize;
+    case Cursor::EWResize:
+      return RCTCursorEWResize;
     case Cursor::Grab:
-      return [NSCursor openHandCursor];
+      return RCTCursorGrab;
     case Cursor::Grabbing:
-      return [NSCursor closedHandCursor];
-    case Cursor::NorthResize:
-      return [NSCursor resizeUpCursor];
+      return RCTCursorGrabbing;
+    case Cursor::Help:
+      return RCTCursorHelp;
+    case Cursor::Move:
+      return RCTCursorMove;
+    case Cursor::NEResize:
+      return RCTCursorNEResize;
+    case Cursor::NESWResize:
+      return RCTCursorNESWResize;
+    case Cursor::NResize:
+      return RCTCursorNResize;
+    case Cursor::NSResize:
+      return RCTCursorNSResize;
+    case Cursor::NWResize:
+      return RCTCursorNWResize;
+    case Cursor::NWSEResize:
+      return RCTCursorNWSEResize;
     case Cursor::NoDrop:
-      return [NSCursor operationNotAllowedCursor];
+      return RCTCursorNoDrop;
+    case Cursor::None:
+      return RCTCursorNone;
     case Cursor::NotAllowed:
-      return [NSCursor operationNotAllowedCursor];
+      return RCTCursorNotAllowed;
     case Cursor::Pointer:
-      return [NSCursor pointingHandCursor];
+      return RCTCursorPointer;
+    case Cursor::Progress:
+      return RCTCursorProgress;
     case Cursor::RowResize:
-      return [NSCursor resizeUpDownCursor];
-    case Cursor::SouthResize:
-      return [NSCursor resizeDownCursor];
+      return RCTCursorRowResize;
+    case Cursor::SResize:
+      return RCTCursorSResize;
+    case Cursor::SEResize:
+      return RCTCursorSEResize;
+    case Cursor::SWResize:
+      return RCTCursorSWResize;
     case Cursor::Text:
-      return [NSCursor IBeamCursor];
+      return RCTCursorText;
+    case Cursor::Url:
+      return RCTCursorUrl;
     case Cursor::VerticalText:
-      return [NSCursor IBeamCursorForVerticalLayout];
-    case Cursor::WestResize:
-      return [NSCursor resizeLeftCursor];
+      return RCTCursorVerticalText;
+    case Cursor::WResize:
+      return RCTCursorWResize;
+    case Cursor::Wait:
+      return RCTCursorWait;
+    case Cursor::ZoomIn:
+      return RCTCursorZoomIn;
+    case Cursor::ZoomOut:
+      return RCTCursorZoomOut;
   }
 }
 #endif // macOS]
 
-
 - (void)invalidateLayer
 {
   CALayer *layer = self.layer;