diff --git a/Libraries/Components/Pressable/Pressable.js b/Libraries/Components/Pressable/Pressable.js index 34d3c8ccf716a3..c9046c2cabb889 100644 --- a/Libraries/Components/Pressable/Pressable.js +++ b/Libraries/Components/Pressable/Pressable.js @@ -25,10 +25,9 @@ import type { import {PressabilityDebugView} from '../../Pressability/PressabilityDebug'; import usePressability from '../../Pressability/usePressability'; import {normalizeRect, type RectOrSize} from '../../StyleSheet/Rect'; -import type {ColorValue} from '../../StyleSheet/StyleSheet'; import type { LayoutEvent, - MouseEvent, // TODO(macOS GH#774) + MouseEvent, PressEvent, } from '../../Types/CoreEventTypes'; import type {DraggedTypesType} from '../View/DraggedType'; // TODO(macOS GH#774) @@ -65,6 +64,16 @@ type Props = $ReadOnly<{| */ children: React.Node | ((state: StateCallbackType) => React.Node), + /** + * Duration to wait after hover in before calling `onHoverIn`. + */ + delayHoverIn?: ?number, + + /** + * Duration to wait after hover out before calling `onHoverOut`. + */ + delayHoverOut?: ?number, + /** * Duration (in milliseconds) from `onPressIn` before `onLongPress` is called. */ @@ -91,6 +100,16 @@ type Props = $ReadOnly<{| */ onLayout?: ?(event: LayoutEvent) => void, + /** + * Called when the hover is activated to provide visual feedback. + */ + onHoverIn?: ?(event: MouseEvent) => mixed, + + /** + * Called when the hover is deactivated to undo visual feedback. + */ + onHoverOut?: ?(event: MouseEvent) => mixed, + /** * Called when a long-tap gesture is detected. */ @@ -167,11 +186,13 @@ function Pressable(props: Props, forwardedRef): React.Node { android_disableSound, android_ripple, children, + delayHoverIn, + delayHoverOut, delayLongPress, disabled, focusable, - onMouseEnter, // [TODO(macOS GH#774) - onMouseLeave, // ]TODO(macOS GH#774) + onHoverIn, + onHoverOut, onLongPress, onPress, onPressIn, @@ -208,10 +229,12 @@ function Pressable(props: Props, forwardedRef): React.Node { hitSlop, pressRectOffset: pressRetentionOffset, android_disableSound, + delayHoverIn, + delayHoverOut, delayLongPress, delayPressIn: unstable_pressDelay, - onHoverIn: onMouseEnter, // [TODO(macOS GH#774) - onHoverOut: onMouseLeave, // ]TODO(macOS GH#774) + onHoverIn, + onHoverOut, onLongPress, onPress, onPressIn(event: PressEvent): void { @@ -237,11 +260,13 @@ function Pressable(props: Props, forwardedRef): React.Node { [ android_disableSound, android_rippleConfig, + delayHoverIn, + delayHoverOut, delayLongPress, disabled, hitSlop, - onMouseEnter, // [TODO(macOS GH#774) - onMouseLeave, // ]TODO(macOS GH#774) + onHoverIn, + onHoverOut, onLongPress, onPress, onPressIn, diff --git a/packages/rn-tester/Podfile.lock b/packages/rn-tester/Podfile.lock index eeb7e7185aad73..1517b6063081f9 100644 --- a/packages/rn-tester/Podfile.lock +++ b/packages/rn-tester/Podfile.lock @@ -508,7 +508,7 @@ SPEC CHECKSUMS: CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99 DoubleConversion: 0ea4559a49682230337df966e735d6cc7760108e FBLazyVector: c5de505838fe71cd49ad8a0a647e9e506ba0fccf - FBReactNativeSpec: 84b776b54e14dec317a4525eed6e37a7de350c4b + FBReactNativeSpec: fb1b52da62c8f1cc4c1bcc5e30d13e9ba6009d99 Flipper: d3da1aa199aad94455ae725e9f3aa43f3ec17021 Flipper-DoubleConversion: 38631e41ef4f9b12861c67d17cb5518d06badc41 Flipper-Folly: 755929a4f851b2fb2c347d533a23f191b008554c diff --git a/packages/rn-tester/js/examples/Pressable/PressableExample.js b/packages/rn-tester/js/examples/Pressable/PressableExample.js index 6c8764654ea56e..b592a2b0e6d7f1 100644 --- a/packages/rn-tester/js/examples/Pressable/PressableExample.js +++ b/packages/rn-tester/js/examples/Pressable/PressableExample.js @@ -99,8 +99,8 @@ function PressableFeedbackEvents() { testID="pressable_feedback_events_button" accessibilityLabel="pressable feedback events" accessibilityRole="button" - onMouseEnter={() => appendEvent('mouseEnter')} // [TODO(macOS GH#774) - onMouseLeave={() => appendEvent('mouseLeave')} // ]TODO(macOS GH#774) + onHoverIn={() => appendEvent('hoverIn')} // [TODO(macOS GH#774) + onHoverOut={() => appendEvent('hoverOut')} // ]TODO(macOS GH#774) onPress={() => appendEvent('press')} onPressIn={() => appendEvent('pressIn')} onPressOut={() => appendEvent('pressOut')}