Remove validKeysDown, validKeysUp, and passThroughAllKeyEvents

Saadnajmi · Saadnajmi · commit da197bd8dec5 · 2024-08-22T00:58:28.000-07:00
diff --git a/packages/react-native/Libraries/Components/Button.js b/packages/react-native/Libraries/Components/Button.js
@@ -176,42 +176,29 @@ type ButtonProps = $ReadOnly<{|
    */
   onKeyUp?: ?(e: KeyEvent) => void,
 
-  /*
-   * @deprecated use `keyDownEvents` or `keyUpEvents` instead
-   * Array of keys to receive key down events for
-   * For arrow keys, add "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown",
-   */
-  validKeysDown?: ?Array<string>,
-
-  /*
-   * @deprecated use `keyDownEvents` or `keyUpEvents` instead
-   * Array of keys to receive key up events for
-   * For arrow keys, add "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown",
+  /**
+   * Array of keys to receive key down events for. These events have their default native behavior prevented.
+   *
+   * @platform macos
    */
-  validKeysUp?: ?Array<string>,
-
+  keyDownEvents?: ?Array<HandledKeyboardEvent>,
 
   /**
-   * @deprecated use `keyDownEvents` or `keyUpEvents` instead
-   * When `true`, allows `onKeyDown` and `onKeyUp` to receive events not specified in
-   * `validKeysDown` and `validKeysUp`, respectively. Events matching `validKeysDown` and `validKeysUp`
-   * are still removed from the event queue, but the others are not.
+   * Array of keys to receive key up events for. These events have their default native behavior prevented.
    *
    * @platform macos
    */
-  passthroughAllKeyEvents?: ?boolean,
+  keyUpEvents?: ?Array<HandledKeyboardEvent>,
 
   /**
    * Array of keys to receive key down events for. These events have their default native behavior prevented.
-   * Overrides the props `validKeysDown`, `validKeysUp` and `passthroughAllKeyEvents`
    *
    * @platform macos
    */
   keyDownEvents?: ?Array<HandledKeyboardEvent>,
 
   /**
    * Array of keys to receive key up events for. These events have their default native behavior prevented.
-   * Overrides the props `validKeysDown`, `validKeysUp` and `passthroughAllKeyEvents`
    *
    * @platform macos
    */
@@ -394,9 +381,6 @@ const Button: React.AbstractComponent<ButtonProps> = (props: ButtonProps) => {
     onBlur,
     onKeyDown,
     onKeyUp,
-    validKeysDown,
-    validKeysUp,
-    passthroughAllKeyEvents,
     keyDownEvents,
     keyUpEvents,
     tooltip,
@@ -475,6 +459,8 @@ const Button: React.AbstractComponent<ButtonProps> = (props: ButtonProps) => {
       onBlur={onBlur}
       onKeyDown={onKeyDown}
       onKeyUp={onKeyUp}
+      keyDownEvents={keyDownEvents}
+      keyUpEvents={keyUpEvents}
       tooltip={tooltip}
       // macOS]
       touchSoundDisabled={touchSoundDisabled}>
diff --git a/packages/react-native/Libraries/Components/Pressable/Pressable.js b/packages/react-native/Libraries/Components/Pressable/Pressable.js
@@ -191,36 +191,10 @@ type Props = $ReadOnly<{|
    *
    * @platform macos
    */
-  validKeysDown?: ?Array<string | HandledKeyboardEvent>,
-
-  /**
-   * Array of keys to receive key up events for. These events have their default native behavior prevented.
-   *
-   * @platform macos
-   */
-  validKeysUp?: ?Array<string | HandledKeyboardEvent>,
-
-  /**
-   * @deprecated use `keyDownEvents` or `keyUpEvents` instead
-   * When `true`, allows `onKeyDown` and `onKeyUp` to receive events not specified in
-   * `validKeysDown` and `validKeysUp`, respectively. Events matching `validKeysDown` and `validKeysUp`
-   * are still removed from the event queue, but the others are not.
-   *
-   * @platform macos
-   */
-  passthroughAllKeyEvents?: ?boolean,
-
-  /**
-   * Array of keys to receive key down events for. These events have their default native behavior prevented.
-   * Overrides the props `validKeysDown`, `validKeysUp` and `passthroughAllKeyEvents`
-   *
-   * @platform macos
-   */
   keyDownEvents?: ?Array<HandledKeyboardEvent>,
 
   /**
    * Array of keys to receive key up events for. These events have their default native behavior prevented.
-   * Overrides the props `validKeysDown`, `validKeysUp` and `passthroughAllKeyEvents`
    *
    * @platform macos
    */
@@ -374,7 +348,6 @@ function Pressable(props: Props, forwardedRef): React.Node {
     onBlur,
     onKeyDown,
     onKeyUp,
-    passthroughAllKeyEvents,
     keyDownEvents,
     keyUpEvents,
     acceptsFirstMouse,
diff --git a/packages/react-native/Libraries/Components/Touchable/TouchableWithoutFeedback.js b/packages/react-native/Libraries/Components/Touchable/TouchableWithoutFeedback.js
@@ -135,6 +135,10 @@ const PASSTHROUGH_PROPS = [
   'onDragLeave',
   'onDrop',
   'draggedTypes',
+  'onKeyDown',
+  'onKeyUp',
+  'keyDownEvents',
+  'keyUpEvents',
   'tooltip', // macOS]
   'testID',
 ];
diff --git a/packages/react-native/Libraries/Components/View/ReactNativeViewAttributes.js b/packages/react-native/Libraries/Components/View/ReactNativeViewAttributes.js
@@ -48,9 +48,6 @@ const UIView = {
   onDrop: true,
   onKeyDown: true,
   onKeyUp: true,
-  validKeysDown: true,
-  validKeysUp: true,
-  passthroughAllKeyEvents: true,
   keyDownEvents: true,
   keyUpEvents: true,
   draggedTypes: true,
diff --git a/packages/react-native/Libraries/Components/View/View.js b/packages/react-native/Libraries/Components/View/View.js
@@ -55,13 +55,6 @@ const View: React.AbstractComponent<
       nativeID,
       pointerEvents,
       tabIndex,
-      // [macOS
-      passthroughAllKeyEvents,
-      validKeysDown,
-      validKeysUp,
-      keyDownEvents,
-      keyUpEvents,
-      // macOS]
       ...otherProps
     }: ViewProps,
     forwardedRef,
@@ -109,17 +102,6 @@ const View: React.AbstractComponent<
     // $FlowFixMe[sketchy-null-mixed]
     const newPointerEvents = style?.pointerEvents || pointerEvents;
 
-    // [macOS
-    let _passthroughAllKeyEvents = passthroughAllKeyEvents;
-    let _validKeysDown = validKeysDown;
-    let _validKeysUp = validKeysUp;
-    if (keyDownEvents || keyUpEvents) {
-      _passthroughAllKeyEvents = true;
-      _validKeysDown = keyDownEvents;
-      _validKeysUp = keyUpEvents;
-    }
-    // macOS]
-
     const actualView = (
       <ViewNativeComponent
         {...otherProps}
@@ -141,11 +123,6 @@ const View: React.AbstractComponent<
         style={style}
         // $FlowFixMe[incompatible-type]
         pointerEvents={newPointerEvents}
-        // [macOS
-        passthroughAllKeyEvents={_passthroughAllKeyEvents}
-        validKeysDown={_validKeysDown}
-        validKeysUp={_validKeysUp}
-        // macOS]
         ref={forwardedRef}
       />
     );
diff --git a/packages/react-native/Libraries/Components/View/ViewPropTypes.d.ts b/packages/react-native/Libraries/Components/View/ViewPropTypes.d.ts
@@ -166,6 +166,14 @@ export interface ViewPropsAndroid {
 export type DraggedType = 'fileUrl';
 export type DraggedTypesType = DraggedType | DraggedType[];
 
+export type HandledKeyboardEvent = {
+  altKey?: boolean | undefined;
+  ctrlKey?: boolean | undefined;
+  metaKey?: boolean | undefined;
+  shiftKey?: boolean | undefined;
+  key: string;
+};
+
 export interface ViewPropsMacOS {
   acceptsFirstMouse?: boolean | undefined;
   allowsVibrancy?: boolean | undefined;
@@ -178,11 +186,8 @@ export interface ViewPropsMacOS {
   onDrop?: ((event: MouseEvent) => void) | undefined;
   onKeyDown?: ((event: KeyEvent) => void) | undefined;
   onKeyUp?: ((event: KeyEvent) => void) | undefined;
-  validKeysDown?: Array<HandledKeyEvent | string> | undefined;
-  validKeysUp?: Array<HandledKeyEvent | string> | undefined;
-  passthroughAllKeyEvents?: boolean | undefined;
-  keyDownEvents?: Array<HandledKeyEvent> | undefined;
-  keyUpEvents?: Array<HandledKeyEvent> | undefined;
+  keyDownEvents?: HandledKeyboardEvent[] | undefined;
+  keyUpEvents?: HandledKeyboardEvent[] | undefined;
   draggedTypes?: DraggedTypesType | undefined;
 }
 
diff --git a/packages/react-native/Libraries/Components/View/ViewPropTypes.js b/packages/react-native/Libraries/Components/View/ViewPropTypes.js
@@ -101,7 +101,7 @@ type DirectEventProps = $ReadOnly<{|
 
 // [macOS
 /**
- * Represents a key that could be passed to `validKeysDown` and `validKeysUp`.
+ * Represents a key that could be passed to `keyDownEvents` and `keyUpEvents`.
  *
  * `key` is the actual key, such as "a", or one of the special values:
  * "Tab", "Escape", "Enter", "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown",
@@ -135,36 +135,10 @@ export type KeyboardEventProps = $ReadOnly<{|
    *
    * @platform macos
    */
-  validKeysDown?: ?Array<string | HandledKeyboardEvent>,
-
-  /**
-   * Array of keys to receive key up events for. These events have their default native behavior prevented.
-   *
-   * @platform macos
-   */
-  validKeysUp?: ?Array<string | HandledKeyboardEvent>,
-
-  /**
-   * @deprecated use `keyDownEvents` or `keyUpEvents` instead
-   * When `true`, allows `onKeyDown` and `onKeyUp` to receive events not specified in
-   * `validKeysDown` and `validKeysUp`, respectively. Events matching `validKeysDown` and `validKeysUp`
-   * are still removed from the event queue, but the others are not.
-   *
-   * @platform macos
-   */
-  passthroughAllKeyEvents?: ?boolean,
-
-  /**
-   * Array of keys to receive key down events for. These events have their default native behavior prevented.
-   * Overrides the props `validKeysDown`, `validKeysUp` and `passthroughAllKeyEvents`
-   *
-   * @platform macos
-   */
   keyDownEvents?: ?Array<HandledKeyboardEvent>,
 
   /**
    * Array of keys to receive key up events for. These events have their default native behavior prevented.
-   * Overrides the props `validKeysDown`, `validKeysUp` and `passthroughAllKeyEvents`
    *
    * @platform macos
    */
diff --git a/packages/react-native/Libraries/NativeComponent/BaseViewConfig.macos.js b/packages/react-native/Libraries/NativeComponent/BaseViewConfig.macos.js
@@ -53,9 +53,6 @@ const validAttributesForNonEventProps = {
   draggedTypes: true,
   enableFocusRing: true,
   tooltip: true,
-  validKeysDown: true,
-  validKeysUp: true,
-  passthroughAllKeyEvents: true,
   keyDownEvents: true,
   keyUpEvents: true,
   mouseDownCanMoveWindow: true,
diff --git a/packages/react-native/Libraries/Pressability/Pressability.js b/packages/react-native/Libraries/Pressability/Pressability.js
@@ -101,11 +101,15 @@ export type PressabilityConfig = $ReadOnly<{|
   // [macOS
   /*
    * Called after a key down event is detected.
+   *
+   * @platform macos
    */
   onKeyDown?: ?(event: KeyEvent) => void,
 
   /*
    * Called after a key up event is detected.
+   *
+   * @platform macos
    */
   onKeyUp?: ?(event: KeyEvent) => void,
   // macOS]
diff --git a/packages/react-native/Libraries/Text/TextInput/RCTBackedTextInputDelegate.h b/packages/react-native/Libraries/Text/TextInput/RCTBackedTextInputDelegate.h
@@ -48,7 +48,7 @@ NS_ASSUME_NONNULL_BEGIN
 #if TARGET_OS_OSX // [macOS
 - (BOOL)textInputShouldHandleDeleteForward:(id<RCTBackedTextInputViewProtocol>)sender; // Return `YES` to have the deleteForward event handled normally. Return `NO` to disallow it and handle it yourself.
 - (BOOL)textInputShouldHandleKeyEvent:(NSEvent *)event; // Return `YES` to have the key event handled normally. Return `NO` to disallow it and handle it yourself.
-- (BOOL)hasValidKeyDownOrValidKeyUp:(NSString *)key;
+- (BOOL)hasKeyDownEventOrKeyUpEvent:(NSString *)key;
 - (NSDragOperation)textInputDraggingEntered:(id<NSDraggingInfo>)draggingInfo;
 - (void)textInputDraggingExited:(id<NSDraggingInfo>)draggingInfo;
 - (BOOL)textInputShouldHandleDragOperation:(id<NSDraggingInfo>)draggingInfo;
diff --git a/packages/react-native/Libraries/Text/TextInput/RCTBackedTextInputDelegateAdapter.mm b/packages/react-native/Libraries/Text/TextInput/RCTBackedTextInputDelegateAdapter.mm
@@ -228,7 +228,7 @@ - (BOOL)control:(NSControl *)control textView:(NSTextView *)fieldEditor doComman
     //escape
   } else if (commandSelector == @selector(cancelOperation:)) {
     [textInputDelegate textInputDidCancel];
-    if (![textInputDelegate hasValidKeyDownOrValidKeyUp:@"Escape"]) {
+    if (![textInputDelegate hasKeyDownEventOrKeyUpEvent:@"Escape"]) {
       [[_backedTextInputView window] makeFirstResponder:nil];
     }
     commandHandled = YES;
@@ -450,7 +450,7 @@ - (BOOL)textView:(NSTextView *)textView doCommandBySelector:(SEL)commandSelector
     //escape
   } else if (commandSelector == @selector(cancelOperation:)) {
     [textInputDelegate textInputDidCancel];
-    if (![textInputDelegate hasValidKeyDownOrValidKeyUp:@"Escape"]) {
+    if (![textInputDelegate hasKeyDownEventOrKeyUpEvent:@"Escape"]) {
       [[_backedTextInputView window] makeFirstResponder:nil];
     }
     commandHandled = YES;
diff --git a/packages/react-native/Libraries/Text/TextInput/RCTBaseTextInputView.mm b/packages/react-native/Libraries/Text/TextInput/RCTBaseTextInputView.mm
@@ -749,9 +749,9 @@ - (BOOL)textInputShouldHandleDeleteForward:(__unused id)sender {
   return YES;
 }
 
-- (BOOL)hasValidKeyDownOrValidKeyUp:(NSString *)key {
-  return [RCTHandledKey key:key matchesFilter:self.validKeysDown]
-	||  [RCTHandledKey key:key matchesFilter:self.validKeysUp];
+- (BOOL)hasKeyDownEventOrKeyUpEvent:(NSString *)key {
+  return [RCTHandledKey key:key matchesFilter:self.keyDownEvents]
+     ||  [RCTHandledKey key:key matchesFilter:self.keyUpEvents];
 }
 
 - (NSDragOperation)textInputDraggingEntered:(id<NSDraggingInfo>)draggingInfo
diff --git a/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap b/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap
@@ -1708,9 +1708,6 @@ exports[`public API should not change unintentionally Libraries/Components/Butto
   onFocus?: ?(e: FocusEvent) => void,
   onKeyDown?: ?(e: KeyEvent) => void,
   onKeyUp?: ?(e: KeyEvent) => void,
-  validKeysDown?: ?Array<string>,
-  validKeysUp?: ?Array<string>,
-  passthroughAllKeyEvents?: ?boolean,
   keyDownEvents?: ?Array<HandledKeyboardEvent>,
   keyUpEvents?: ?Array<HandledKeyboardEvent>,
   tooltip?: string,
@@ -1904,9 +1901,6 @@ type Props = $ReadOnly<{|
   onBlur?: ?(event: BlurEvent) => void,
   onKeyDown?: ?(event: KeyEvent) => void,
   onKeyUp?: ?(event: KeyEvent) => void,
-  validKeysDown?: ?Array<string | HandledKeyboardEvent>,
-  validKeysUp?: ?Array<string | HandledKeyboardEvent>,
-  passthroughAllKeyEvents?: ?boolean,
   keyDownEvents?: ?Array<HandledKeyboardEvent>,
   keyUpEvents?: ?Array<HandledKeyboardEvent>,
   acceptsFirstMouse?: ?boolean,
@@ -3574,6 +3568,8 @@ type Props = $ReadOnly<{|
   activeOpacity?: ?number,
   style?: ?ViewStyleProp,
   hostRef?: ?React.Ref<typeof Animated.View>,
+  keyDownEvents?: ?Array<HandledKeyboardEvent>,
+  keyUpEvents?: ?Array<HandledKeyboardEvent>,
 |}>;
 declare const Touchable: React.AbstractComponent<
   Props,
@@ -3639,9 +3635,6 @@ exports[`public API should not change unintentionally Libraries/Components/View/
   onDrop: true,
   onKeyDown: true,
   onKeyUp: true,
-  validKeysDown: true,
-  validKeysUp: true,
-  passthroughAllKeyEvents: true,
   keyDownEvents: true,
   keyUpEvents: true,
   draggedTypes: true,
@@ -3838,9 +3831,6 @@ export type HandledKeyboardEvent = $ReadOnly<{|
 export type KeyboardEventProps = $ReadOnly<{|
   onKeyDown?: ?(event: KeyEvent) => void,
   onKeyUp?: ?(event: KeyEvent) => void,
-  validKeysDown?: ?Array<string | HandledKeyboardEvent>,
-  validKeysUp?: ?Array<string | HandledKeyboardEvent>,
-  passthroughAllKeyEvents?: ?boolean,
   keyDownEvents?: ?Array<HandledKeyboardEvent>,
   keyUpEvents?: ?Array<HandledKeyboardEvent>,
 |}>;
@@ -6450,6 +6440,8 @@ exports[`public API should not change unintentionally Libraries/Pressability/Pre
   onFocus?: ?(event: FocusEvent) => void,
   onKeyDown?: ?(event: KeyEvent) => void,
   onKeyUp?: ?(event: KeyEvent) => void,
+  keyDownEvents?: ?Array<HandledKeyboardEvent>,
+  keyUpEvents?: ?Array<HandledKeyboardEvent>,
   onHoverIn?: ?(event: MouseEvent) => mixed,
   onHoverOut?: ?(event: MouseEvent) => mixed,
   onLongPress?: ?(event: PressEvent) => mixed,
diff --git a/packages/react-native/React/Fabric/Mounting/ComponentViews/TextInput/RCTTextInputComponentView.mm b/packages/react-native/React/Fabric/Mounting/ComponentViews/TextInput/RCTTextInputComponentView.mm
@@ -446,7 +446,7 @@ - (void)continuousSpellCheckingDidChange:(BOOL)enabled {}
 - (void)grammarCheckingDidChange:(BOOL)enabled {}
 
 
-- (BOOL)hasValidKeyDownOrValidKeyUp:(nonnull NSString *)key {
+- (BOOL)hasKeyDownEventOrKeyUpEvent:(nonnull NSString *)key {
   return YES;
 }
 
diff --git a/packages/react-native/React/Views/RCTHandledKey.h b/packages/react-native/React/Views/RCTHandledKey.h
@@ -10,7 +10,7 @@
 #if TARGET_OS_OSX
 #import <React/RCTConvert.h>
 
-// This class is used for specifying key filtering e.g. for -[RCTView validKeysDown] and -[RCTView validKeysUp]
+// This class is used for specifying key filtering e.g. for -[RCTView keyDownEvents] and -[RCTView keyUpEvents]
 // Also see RCTViewKeyboardEvent, which is a React representation of an actual NSEvent that is dispatched to JS.
 @interface RCTHandledKey : NSObject
 
diff --git a/packages/react-native/React/Views/RCTHandledKey.m b/packages/react-native/React/Views/RCTHandledKey.m
diff --git a/packages/react-native/React/Views/RCTView.h b/packages/react-native/React/Views/RCTView.h
diff --git a/packages/react-native/React/Views/RCTView.m b/packages/react-native/React/Views/RCTView.m
diff --git a/packages/react-native/React/Views/RCTViewManager.m b/packages/react-native/React/Views/RCTViewManager.m
diff --git a/packages/react-native/React/Views/ScrollView/RCTScrollView.m b/packages/react-native/React/Views/ScrollView/RCTScrollView.m
diff --git a/packages/rn-tester/js/examples/KeyboardEventsExample/KeyboardEventsExample.js b/packages/rn-tester/js/examples/KeyboardEventsExample/KeyboardEventsExample.js
diff --git a/packages/rn-tester/js/examples/TextInput/TextInputSharedExamples.js b/packages/rn-tester/js/examples/TextInput/TextInputSharedExamples.js
