chore(0.81): backport fixes (#2878, #2879, #2880)

.nx/version-plans/version-plan-1743631200000.md

@@ -0,0 +1,5 @@
+---
+__default__: patch
+---
+
+Backport fixes: default Text color to labelColor, Text overflow in ScrollView, validKeys compat layer

packages/react-native/Libraries/Components/Pressable/Pressable.js

@@ -381,7 +381,14 @@ function Pressable({
     // [macOS
     acceptsFirstMouse: acceptsFirstMouse !== false && !disabled,
     enableFocusRing: enableFocusRing !== false && !disabled,
-    keyDownEvents: keyDownEvents ?? [{key: ' '}, {key: 'Enter'}],
+    keyDownEvents:
+      keyDownEvents ??
+      // $FlowFixMe[unclear-type] Legacy props not in type definitions
+      (((props: any).validKeysDown: mixed) == null &&
+      // $FlowFixMe[unclear-type]
+      ((props: any).passthroughAllKeyEvents: mixed) !== true
+        ? [{key: ' '}, {key: 'Enter'}]
+        : undefined),
     mouseDownCanMoveWindow: false,
     // macOS]
   };

packages/react-native/Libraries/Components/TextInput/RCTTextInputViewConfig.js

@@ -52,6 +52,18 @@ const RCTTextInputViewConfig: PartialViewConfigWithoutName = {
         captured: 'onSubmitEditingCapture',
       },
     },
+    topKeyDown: {
+      phasedRegistrationNames: {
+        bubbled: 'onKeyDown',
+        captured: 'onKeyDownCapture',
+      },
+    },
+    topKeyUp: {
+      phasedRegistrationNames: {
+        bubbled: 'onKeyUp',
+        captured: 'onKeyUpCapture',
+      },
+    },
     topTouchCancel: {
       phasedRegistrationNames: {
         bubbled: 'onTouchCancel',
@@ -173,6 +185,8 @@ const RCTTextInputViewConfig: PartialViewConfigWithoutName = {
     clearTextOnSubmit: true,
     grammarCheck: true,
     hideVerticalScrollIndicator: true,
+    keyDownEvents: true,
+    keyUpEvents: true,
     pastedTypes: true,
     submitKeyEvents: true,
     tooltip: true,
@@ -191,6 +205,8 @@ const RCTTextInputViewConfig: PartialViewConfigWithoutName = {
       onAutoCorrectChange: true,
       onSpellCheckChange: true,
       onGrammarCheckChange: true,
+      onKeyDown: true,
+      onKeyUp: true,
       // macOS]
     }),
     disableKeyboardShortcuts: true,

packages/react-native/Libraries/Components/TextInput/TextInput.js

@@ -8,7 +8,7 @@
  * @format
  */
 
 import type {HostInstance} from '../../../src/private/types/HostInstance';
 import type {____TextStyle_Internal as TextStyleInternal} from '../../StyleSheet/StyleSheetTypes';
 import type {
   BlurEvent,
@@ -61,6 +61,12 @@
 import Text from '../../Text/Text';
 import TextAncestorContext from '../../Text/TextAncestorContext';
 import Platform from '../../Utilities/Platform';
+// [macOS
+import processLegacyKeyProps, {
+  hasLegacyKeyProps,
+  stripLegacyKeyProps,
+} from '../../Utilities/normalizeLegacyHandledKeyEvents';
+// macOS]
 import useMergeRefs from '../../Utilities/useMergeRefs';
 import TextInputState from './TextInputState';
 import invariant from 'invariant';
@@ -386,6 +392,23 @@
  *
  */
 function InternalTextInput(props: TextInputProps): React.Node {
+  // [macOS Legacy keyboard event compat — to remove, delete this block and its import
+  const usingLegacyKeyboardProps = hasLegacyKeyProps(props);
+  // $FlowFixMe[unclear-type]
+  const effectiveProps: any = usingLegacyKeyboardProps ? ({...props}: any) : props;
+  if (usingLegacyKeyboardProps) {
+    stripLegacyKeyProps(effectiveProps);
+    const legacy = processLegacyKeyProps(props);
+    effectiveProps.keyDownEvents = legacy.keyDownEvents;
+    effectiveProps.keyUpEvents = legacy.keyUpEvents;
+    if (legacy.onKeyDown != null) {
+      effectiveProps.onKeyDown = legacy.onKeyDown;
+    }
+    if (legacy.onKeyUp != null) {
+      effectiveProps.onKeyUp = legacy.onKeyUp;
+    }
+  }
+  // macOS]
   const {
     'aria-busy': ariaBusy,
     'aria-checked': ariaChecked,
@@ -400,7 +423,7 @@
     selectionHandleColor,
     cursorColor,
     ...otherProps
-  } = props;
+  } = effectiveProps;
 
   const inputRef = useRef<null | TextInputInstance>(null);
 
@@ -582,7 +605,7 @@
 
   // [macOS
   const _onKeyDown = (event: KeyEvent) => {
-    const keyDownEvents = props.keyDownEvents;
+    const keyDownEvents = effectiveProps.keyDownEvents;
     if (keyDownEvents != null && !event.isPropagationStopped()) {
       const isHandled = keyDownEvents.some(
         ({key, metaKey, ctrlKey, altKey, shiftKey}: HandledKeyEvent) => {
@@ -599,11 +622,11 @@
         event.stopPropagation();
       }
     }
-    props.onKeyDown?.(event);
+    effectiveProps.onKeyDown?.(event);
   };
 
   const _onKeyUp = (event: KeyEvent) => {
-    const keyUpEvents = props.keyUpEvents;
+    const keyUpEvents = effectiveProps.keyUpEvents;
     if (keyUpEvents != null && !event.isPropagationStopped()) {
       const isHandled = keyUpEvents.some(
         ({key, metaKey, ctrlKey, altKey, shiftKey}: HandledKeyEvent) => {
@@ -620,7 +643,7 @@
         event.stopPropagation();
       }
     }
-    props.onKeyUp?.(event);
+    effectiveProps.onKeyUp?.(event);
   };
   // macOS]
 

packages/react-native/Libraries/Components/View/View.js

@@ -13,6 +13,12 @@ import type {ViewProps} from './ViewPropTypes';
 
 import * as ReactNativeFeatureFlags from '../../../src/private/featureflags/ReactNativeFeatureFlags';
 import TextAncestorContext from '../../Text/TextAncestorContext';
+// [macOS
+import processLegacyKeyProps, {
+  hasLegacyKeyProps,
+  stripLegacyKeyProps,
+} from '../../Utilities/normalizeLegacyHandledKeyEvents';
+// macOS]
 import ViewNativeComponent from './ViewNativeComponent';
 import * as React from 'react';
 import {use} from 'react';
@@ -30,11 +36,29 @@ component View(
 ) {
   const hasTextAncestor = use(TextAncestorContext);
 
+  // [macOS Legacy keyboard event compat — to remove, delete this block and its import
+  const usingLegacyKeyboardProps = hasLegacyKeyProps(props);
+  // $FlowFixMe[unclear-type]
+  const effectiveProps: any = usingLegacyKeyboardProps ? ({...props}: any) : props;
+  if (usingLegacyKeyboardProps) {
+    stripLegacyKeyProps(effectiveProps);
+    const legacy = processLegacyKeyProps(props);
+    effectiveProps.keyDownEvents = legacy.keyDownEvents;
+    effectiveProps.keyUpEvents = legacy.keyUpEvents;
+    if (legacy.onKeyDown != null) {
+      effectiveProps.onKeyDown = legacy.onKeyDown;
+    }
+    if (legacy.onKeyUp != null) {
+      effectiveProps.onKeyUp = legacy.onKeyUp;
+    }
+  }
+  // macOS]
+
   let actualView;
 
   // [macOS
   const _onKeyDown = (event: KeyEvent) => {
-    const keyDownEvents = props.keyDownEvents;
+    const keyDownEvents = effectiveProps.keyDownEvents;
     if (keyDownEvents != null && !event.isPropagationStopped()) {
       const isHandled = keyDownEvents.some(
         ({key, metaKey, ctrlKey, altKey, shiftKey}: HandledKeyEvent) => {
@@ -51,11 +75,11 @@ component View(
         event.stopPropagation();
       }
     }
-    props.onKeyDown?.(event);
+    effectiveProps.onKeyDown?.(event);
   };
 
   const _onKeyUp = (event: KeyEvent) => {
-    const keyUpEvents = props.keyUpEvents;
+    const keyUpEvents = effectiveProps.keyUpEvents;
     if (keyUpEvents != null && !event.isPropagationStopped()) {
       const isHandled = keyUpEvents.some(
         ({key, metaKey, ctrlKey, altKey, shiftKey}: HandledKeyEvent) => {
@@ -72,7 +96,7 @@ component View(
         event.stopPropagation();
       }
     }
-    props.onKeyUp?.(event);
+    effectiveProps.onKeyUp?.(event);
   };
   // macOS]
 
@@ -96,7 +120,7 @@ component View(
       id,
       tabIndex,
       ...otherProps
-    } = props;
+    } = effectiveProps;
 
     // Since we destructured props, we can now treat it as mutable
     const processedProps = otherProps as {...ViewProps};
@@ -195,7 +219,7 @@ component View(
       nativeID,
       tabIndex,
       ...otherProps
-    } = props;
+    } = effectiveProps;
     const _accessibilityLabelledBy =
       ariaLabelledBy?.split(/\s*,\s*/g) ?? accessibilityLabelledBy;
 

packages/react-native/Libraries/Text/RCTTextAttributes.mm

@@ -277,7 +277,7 @@ - (CGFloat)effectiveFontSizeMultiplier
 
 - (RCTUIColor *)effectiveForegroundColor // [macOS]
 {
-  RCTUIColor *effectiveForegroundColor = _foregroundColor ?: [RCTUIColor blackColor]; // [macOS]
+  RCTUIColor *effectiveForegroundColor = _foregroundColor ?: [RCTTextAttributes defaultForegroundColor]; // [macOS]
 
   if (!isnan(_opacity)) {
     effectiveForegroundColor =

packages/react-native/Libraries/Text/TextInput/Multiline/RCTUITextView.mm

@@ -69,7 +69,7 @@ - (instancetype)initWithFrame:(CGRect)frame
     _textInputDelegateAdapter = [[RCTBackedTextViewDelegateAdapter alloc] initWithTextView:self];
 
     self.backgroundColor = [RCTUIColor clearColor]; // [macOS]
-    self.textColor = [RCTUIColor blackColor]; // [macOS]
+    self.textColor = [RCTUIColor labelColor]; // [macOS]
     // This line actually removes 5pt (default value) left and right padding in UITextView.
 #if !TARGET_OS_OSX // [macOS]
     self.textContainer.lineFragmentPadding = 0;

packages/react-native/Libraries/Text/TextInput/RCTBaseTextInputView.mm

@@ -127,7 +127,7 @@ - (void)enforceTextAttributesIfNeeded
 
   NSDictionary<NSAttributedStringKey, id> *textAttributes = [[_textAttributes effectiveTextAttributes] mutableCopy];
   if ([textAttributes valueForKey:NSForegroundColorAttributeName] == nil) {
-    [textAttributes setValue:[RCTUIColor blackColor] forKey:NSForegroundColorAttributeName]; // [macOS]
+    [textAttributes setValue:[RCTUIColor labelColor] forKey:NSForegroundColorAttributeName]; // [macOS]
   }
 
     backedTextInputView.defaultTextAttributes = textAttributes;