diff --git a/Libraries/Components/Touchable/TouchableBounce.js b/Libraries/Components/Touchable/TouchableBounce.js index 42b7e02c40acc6..74f3b65df133a3 100644 --- a/Libraries/Components/Touchable/TouchableBounce.js +++ b/Libraries/Components/Touchable/TouchableBounce.js @@ -151,40 +151,29 @@ class TouchableBounce extends React.Component { accessibilityLiveRegion={this.props.accessibilityLiveRegion} accessibilityViewIsModal={this.props.accessibilityViewIsModal} accessibilityElementsHidden={this.props.accessibilityElementsHidden} + nativeID={this.props.nativeID} + testID={this.props.testID} + hitSlop={this.props.hitSlop} + // [TODO(macOS GH#774) acceptsFirstMouse={ this.props.acceptsFirstMouse !== false && !this.props.disabled - } // TODO(macOS GH#774) + } enableFocusRing={ (this.props.enableFocusRing === undefined || this.props.enableFocusRing === true) && !this.props.disabled - } // TODO(macOS/win GH#774) - nativeID={this.props.nativeID} - testID={this.props.testID} - hitSlop={this.props.hitSlop} - // [macOS #656 We need to reconcile between focusable and acceptsKeyboardFocus - // (e.g. if one is explicitly disabled, we shouldn't implicitly enable the - // other on the underlying view). Prefer passing acceptsKeyboardFocus if - // passed explicitly to preserve original behavior, and trigger view warnings. - {...(this.props.acceptsKeyboardFocus !== undefined - ? { - acceptsKeyboardFocus: - this.props.acceptsKeyboardFocus === true && - !this.props.disabled, - } - : { - focusable: this.props.focusable !== false && !this.props.disabled, - })} - // macOS] - tooltip={this.props.tooltip} // TODO(macOS/win GH#774) - onMouseEnter={this.props.onMouseEnter} // [TODO(macOS GH#774) + } + focusable={this.props.focusable !== false && !this.props.disabled} + tooltip={this.props.tooltip} + onMouseEnter={this.props.onMouseEnter} onMouseLeave={this.props.onMouseLeave} onDragEnter={this.props.onDragEnter} onDragLeave={this.props.onDragLeave} onDrop={this.props.onDrop} onFocus={this.props.onFocus} onBlur={this.props.onBlur} - draggedTypes={this.props.draggedTypes} // ]TODO(macOS GH#774) + draggedTypes={this.props.draggedTypes} + // ]TODO(macOS GH#774) ref={this.props.hostRef} {...eventHandlersWithoutBlurAndFocus}> {this.props.children} diff --git a/Libraries/Components/Touchable/TouchableHighlight.js b/Libraries/Components/Touchable/TouchableHighlight.js index e2b262d2f43a07..aa3eadd9590aa4 100644 --- a/Libraries/Components/Touchable/TouchableHighlight.js +++ b/Libraries/Components/Touchable/TouchableHighlight.js @@ -283,8 +283,8 @@ class TouchableHighlight extends React.Component { const { onBlur, onFocus, - onMouseEnter, // [TODO(macOS/win GH#774) - onMouseLeave, // ]TODO(macOS/win GH#774) + onMouseEnter, // [TODO(macOS GH#774) + onMouseLeave, // ]TODO(macOS GH#774) ...eventHandlersWithoutBlurAndFocus } = this.state.pressability.getEventHandlers(); @@ -300,7 +300,7 @@ class TouchableHighlight extends React.Component { { accessibilityLiveRegion={this.props.accessibilityLiveRegion} accessibilityViewIsModal={this.props.accessibilityViewIsModal} accessibilityElementsHidden={this.props.accessibilityElementsHidden} - acceptsFirstMouse={ - this.props.acceptsFirstMouse !== false && !this.props.disabled - } // TODO(macOS GH#774) - enableFocusRing={ - (this.props.enableFocusRing === undefined || - this.props.enableFocusRing === true) && - !this.props.disabled - } // TODO(macOS/win GH#774) style={StyleSheet.compose( this.props.style, this.state.extraStyles?.underlay, @@ -330,31 +322,28 @@ class TouchableHighlight extends React.Component { nextFocusLeft={this.props.nextFocusLeft} nextFocusRight={this.props.nextFocusRight} nextFocusUp={this.props.nextFocusUp} - // [macOS #656 We need to reconcile between focusable and acceptsKeyboardFocus - // (e.g. if one is explicitly disabled, we shouldn't implicitly enable the - // other on the underlying view). Prefer passing acceptsKeyboardFocus if - // passed explicitly to preserve original behavior, and trigger view warnings. - {...(this.props.acceptsKeyboardFocus !== undefined - ? { - acceptsKeyboardFocus: - this.props.acceptsKeyboardFocus === true && - !this.props.disabled, - } - : { - focusable: this.props.focusable !== false && !this.props.disabled, - })} - // macOS] - tooltip={this.props.tooltip} // TODO(macOS/win GH#774) - onMouseEnter={this.props.onMouseEnter} // [TODO(macOS/win GH#774) + nativeID={this.props.nativeID} + testID={this.props.testID} + // [TODO(macOS GH#774) + acceptsFirstMouse={ + this.props.acceptsFirstMouse !== false && !this.props.disabled + } + enableFocusRing={ + (this.props.enableFocusRing === undefined || + this.props.enableFocusRing === true) && + !this.props.disabled + } + focusable={this.props.focusable !== false && !this.props.disabled} + tooltip={this.props.tooltip} + onMouseEnter={this.props.onMouseEnter} onMouseLeave={this.props.onMouseLeave} onDragEnter={this.props.onDragEnter} onDragLeave={this.props.onDragLeave} onDrop={this.props.onDrop} onFocus={this.props.onFocus} onBlur={this.props.onBlur} - draggedTypes={this.props.draggedTypes} // ]TODO(macOS/win GH#774) - nativeID={this.props.nativeID} - testID={this.props.testID} + draggedTypes={this.props.draggedTypes} + // ]TODO(macOS/win GH#774) ref={this.props.hostRef} {...eventHandlersWithoutBlurAndFocus}> {React.cloneElement(child, { diff --git a/Libraries/Components/Touchable/TouchableOpacity.js b/Libraries/Components/Touchable/TouchableOpacity.js index b440d7a52ef0dd..44c83c9f292474 100644 --- a/Libraries/Components/Touchable/TouchableOpacity.js +++ b/Libraries/Components/Touchable/TouchableOpacity.js @@ -266,14 +266,6 @@ class TouchableOpacity extends React.Component { accessibilityLiveRegion={this.props.accessibilityLiveRegion} accessibilityViewIsModal={this.props.accessibilityViewIsModal} accessibilityElementsHidden={this.props.accessibilityElementsHidden} - acceptsFirstMouse={ - this.props.acceptsFirstMouse !== false && !this.props.disabled - } // TODO(macOS GH#774) - enableFocusRing={ - (this.props.enableFocusRing === undefined || - this.props.enableFocusRing === true) && - !this.props.disabled - } // TODO(macOS GH#774) style={[this.props.style, {opacity: this.state.anim}]} nativeID={this.props.nativeID} testID={this.props.testID} @@ -285,33 +277,26 @@ class TouchableOpacity extends React.Component { nextFocusUp={this.props.nextFocusUp} hasTVPreferredFocus={this.props.hasTVPreferredFocus} hitSlop={this.props.hitSlop} - // [macOS #656 We need to reconcile between focusable and acceptsKeyboardFocus - // (e.g. if one is explicitly disabled, we shouldn't implicitly enable the - // other on the underlying view). Prefer passing acceptsKeyboardFocus if - // passed explicitly to preserve original behavior, and trigger view warnings. - {...(this.props.acceptsKeyboardFocus !== undefined - ? { - acceptsKeyboardFocus: - this.props.acceptsKeyboardFocus === true && - !this.props.disabled, - } - : { - focusable: this.props.focusable !== false && !this.props.disabled, - })} - // macOS] - tooltip={this.props.tooltip} // TODO(macOS/win GH#774) - onMouseEnter={this.props.onMouseEnter} // [TODO(macOS GH#774) + // [TODO(macOS GH#774) + acceptsFirstMouse={ + this.props.acceptsFirstMouse !== false && !this.props.disabled + } + enableFocusRing={ + (this.props.enableFocusRing === undefined || + this.props.enableFocusRing === true) && + !this.props.disabled + } + focusable={this.props.focusable !== false && !this.props.disabled} + tooltip={this.props.tooltip} + onMouseEnter={this.props.onMouseEnter} onMouseLeave={this.props.onMouseLeave} onDragEnter={this.props.onDragEnter} onDragLeave={this.props.onDragLeave} onDrop={this.props.onDrop} onFocus={this.props.onFocus} onBlur={this.props.onBlur} - onKeyDown={this.props.onKeyDown} - onKeyUp={this.props.onKeyUp} - validKeysDown={this.props.validKeysDown} - validKeysUp={this.props.validKeysUp} - draggedTypes={this.props.draggedTypes} // ]TODO(macOS GH#774) + draggedTypes={this.props.draggedTypes} + // ]TODO(macOS/win GH#774) ref={this.props.hostRef} {...eventHandlersWithoutBlurAndFocus}> {this.props.children} diff --git a/Libraries/Components/Touchable/TouchableWithoutFeedback.js b/Libraries/Components/Touchable/TouchableWithoutFeedback.js index 3082d96ccec552..49f83e987ab0f7 100755 --- a/Libraries/Components/Touchable/TouchableWithoutFeedback.js +++ b/Libraries/Components/Touchable/TouchableWithoutFeedback.js @@ -68,8 +68,8 @@ type Props = $ReadOnly<{| onPress?: ?(event: PressEvent) => mixed, onPressIn?: ?(event: PressEvent) => mixed, onPressOut?: ?(event: PressEvent) => mixed, - acceptsFirstMouse?: ?boolean, // [TODO(macOS GH#774) - acceptsKeyboardFocus?: ?boolean, + // [TODO(macOS GH#774) + acceptsFirstMouse?: ?boolean, enableFocusRing?: ?boolean, tooltip?: ?string, onMouseEnter?: (event: MouseEvent) => void, @@ -77,7 +77,8 @@ type Props = $ReadOnly<{| onDragEnter?: (event: MouseEvent) => void, onDragLeave?: (event: MouseEvent) => void, onDrop?: (event: MouseEvent) => void, - draggedTypes?: ?DraggedTypesType, // ]TODO(macOS GH#774) + draggedTypes?: ?DraggedTypesType, + // ]TODO(macOS GH#774) pressRetentionOffset?: ?EdgeInsetsProp, rejectResponderTermination?: ?boolean, testID?: ?string, @@ -157,23 +158,12 @@ class TouchableWithoutFeedback extends React.Component { : this.props.accessibilityState, focusable: this.props.focusable !== false && this.props.onPress !== undefined, + // [TODO(macOS GH#774) acceptsFirstMouse: - this.props.acceptsFirstMouse !== false && !this.props.disabled, // [TODO(macOS GH#774) - // [macOS #656 We need to reconcile between focusable and acceptsKeyboardFocus - // (e.g. if one is explicitly disabled, we shouldn't implicitly enable the - // other on the underlying view). Prefer passing acceptsKeyboardFocus if - // passed explicitly to preserve original behavior, and trigger view warnings. - ...(this.props.acceptsKeyboardFocus !== undefined - ? { - acceptsKeyboardFocus: - this.props.acceptsKeyboardFocus === true && !this.props.disabled, - } - : { - focusable: this.props.focusable !== false && !this.props.disabled, - }), - // macOS] + this.props.acceptsFirstMouse !== false && !this.props.disabled, enableFocusRing: - this.props.enableFocusRing !== false && !this.props.disabled, // ]TODO(macOS GH#774) + this.props.enableFocusRing !== false && !this.props.disabled, + // ]TODO(macOS GH#774) }; for (const prop of PASSTHROUGH_PROPS) { if (this.props[prop] !== undefined) { diff --git a/Libraries/Components/Touchable/__tests__/__snapshots__/TouchableWithoutFeedback-test.js.snap b/Libraries/Components/Touchable/__tests__/__snapshots__/TouchableWithoutFeedback-test.js.snap index 9dfeb4e6d44ce5..b6d2237d14dc84 100644 --- a/Libraries/Components/Touchable/__tests__/__snapshots__/TouchableWithoutFeedback-test.js.snap +++ b/Libraries/Components/Touchable/__tests__/__snapshots__/TouchableWithoutFeedback-test.js.snap @@ -5,7 +5,7 @@ exports[`TouchableWithoutFeedback renders correctly 1`] = ` acceptsFirstMouse={true} accessible={true} enableFocusRing={true} - focusable={true} + focusable={false} onClick={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} @@ -76,7 +76,7 @@ exports[`TouchableWithoutFeedback with disabled state should disable button when } accessible={true} enableFocusRing={true} - focusable={true} + focusable={false} onClick={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} diff --git a/Libraries/Components/View/ReactNativeViewAttributes.js b/Libraries/Components/View/ReactNativeViewAttributes.js index 2e5ffda73f9105..e78802152a0347 100644 --- a/Libraries/Components/View/ReactNativeViewAttributes.js +++ b/Libraries/Components/View/ReactNativeViewAttributes.js @@ -21,9 +21,6 @@ const UIView = { accessibilityState: true, accessibilityValue: true, accessibilityHint: true, - acceptsFirstMouse: true, // TODO(macOS GH#774) - acceptsKeyboardFocus: true, // TODO(macOS GH#774) - enableFocusRing: true, // TODO(macOS GH#774) importantForAccessibility: true, nativeID: true, testID: true, @@ -36,7 +33,11 @@ const UIView = { onAccessibilityEscape: true, collapsable: true, needsOffscreenAlphaCompositing: true, - onMouseEnter: true, // [TODO(macOS GH#774) + style: ReactNativeStyleAttributes, + // [TODO(macOS GH#774) + acceptsFirstMouse: true, + enableFocusRing: true, + onMouseEnter: true, onMouseLeave: true, onDragEnter: true, onDragLeave: true, @@ -45,9 +46,9 @@ const UIView = { onKeyUp: true, validKeysDown: true, validKeysUp: true, - draggedTypes: true, // ]TODO(macOS GH#774) - nextKeyViewTag: true, // TODO(macOS GH#768) - style: ReactNativeStyleAttributes, + draggedTypes: true, + nextKeyViewTag: true, + // ]TODO(macOS GH#774) }; const RCTView = { diff --git a/Libraries/Components/View/ReactNativeViewViewConfigMacOS.js b/Libraries/Components/View/ReactNativeViewViewConfigMacOS.js index c3a7995e6ce83c..306db82352f372 100644 --- a/Libraries/Components/View/ReactNativeViewViewConfigMacOS.js +++ b/Libraries/Components/View/ReactNativeViewViewConfigMacOS.js @@ -36,7 +36,6 @@ const ReactNativeViewViewConfigMacOS = { }, validAttributes: { acceptsFirstMouse: true, - acceptsKeyboardFocus: true, accessibilityTraits: true, draggedTypes: true, enableFocusRing: true, @@ -51,7 +50,7 @@ const ReactNativeViewViewConfigMacOS = { onKeyUp: true, validKeysDown: true, validKeysUp: true, - nextKeyViewTag: true, // TODO(macOS GH#768) + nextKeyViewTag: true, onMouseEnter: true, onMouseLeave: true, tooltip: true, diff --git a/Libraries/Components/View/View.js b/Libraries/Components/View/View.js index a1b7a7abb277ed..f90f91bd6da6f5 100644 --- a/Libraries/Components/View/View.js +++ b/Libraries/Components/View/View.js @@ -12,8 +12,8 @@ import type {ViewProps} from './ViewPropTypes'; import ViewNativeComponent from './ViewNativeComponent'; import TextAncestor from '../../Text/TextAncestor'; -import warnOnce from '../../Utilities/warnOnce'; // [macOS #656] import * as React from 'react'; +import invariant from 'invariant'; // TODO(macOS GH#774) export type Props = ViewProps; @@ -28,15 +28,13 @@ const View: React.AbstractComponent< ViewProps, React.ElementRef, > = React.forwardRef((props: ViewProps, forwardedRef) => { - // [macOS #656 Intercept props to warn about them going away - if (props.acceptsKeyboardFocus !== undefined) { - warnOnce( - 'deprecated-acceptsKeyboardFocus', - '"acceptsKeyboardFocus" has been deprecated in favor of "focusable" and will be removed in a future version of react-native-macos', - ); - } - // macOS] - + // [TODO(macOS GH#774) + invariant( + // $FlowFixMe Wanting to catch untyped usages + props.acceptsKeyboardFocus === undefined, + 'Support for the "acceptsKeyboardFocus" property has been removed in favor of "focusable"', + ); + // TODO(macOS GH#774)] return ( diff --git a/Libraries/Components/View/ViewPropTypes.js b/Libraries/Components/View/ViewPropTypes.js index 6771b98f59db65..e66d97ec907e36 100644 --- a/Libraries/Components/View/ViewPropTypes.js +++ b/Libraries/Components/View/ViewPropTypes.js @@ -77,7 +77,7 @@ type DirectEventProps = $ReadOnly<{| onPreferredScrollerStyleDidChange?: ?(event: ScrollEvent) => mixed, // TODO(macOS GH#774) /** - * When `acceptsKeyboardFocus` is true, the system will try to invoke this function + * When `focusable` is true, the system will try to invoke this function * when the user performs accessibility key down gesture. */ onScrollKeyDown?: ?(event: ScrollEvent) => mixed, // TODO(macOS GH#774) @@ -594,12 +594,6 @@ export type ViewProps = $ReadOnly<{| */ acceptsFirstMouse?: ?boolean, // TODO(macOS GH#774) - /** - * Specifies whether the view participates in the key view loop as user tabs - * through different controls. - */ - acceptsKeyboardFocus?: ?boolean, // TODO(macOS GH#774) - /** * The react tag of the view that follows the current view in the key view loop. */ diff --git a/React/Views/RCTViewManager.m b/React/Views/RCTViewManager.m index b51ab2dae1e5f5..5b4acc9c4616c0 100644 --- a/React/Views/RCTViewManager.m +++ b/React/Views/RCTViewManager.m @@ -385,12 +385,6 @@ - (RCTShadowView *)shadowView view.acceptsFirstMouse = json ? [RCTConvert BOOL:json] : defaultView.acceptsFirstMouse; } } -RCT_CUSTOM_VIEW_PROPERTY(acceptsKeyboardFocus, BOOL, RCTView) -{ - if ([view respondsToSelector:@selector(setFocusable:)]) { - view.focusable = json ? [RCTConvert BOOL:json] : defaultView.focusable; - } -} RCT_CUSTOM_VIEW_PROPERTY(focusable, BOOL, RCTView) { if ([view respondsToSelector:@selector(setFocusable:)]) { diff --git a/packages/rn-tester/js/examples/KeyboardEventsExample/KeyboardEventsExample.js b/packages/rn-tester/js/examples/KeyboardEventsExample/KeyboardEventsExample.js index 56767b861a564b..9442cbe2c7ed42 100644 --- a/packages/rn-tester/js/examples/KeyboardEventsExample/KeyboardEventsExample.js +++ b/packages/rn-tester/js/examples/KeyboardEventsExample/KeyboardEventsExample.js @@ -52,7 +52,7 @@ class KeyEventExample extends React.Component<{}, State> { {Platform.OS === 'macos' ? (