feat: add props to FAB, Button and Chip to support prefetching

src/components/Button/Button.tsx

@@ -21,7 +21,9 @@ import { splitStyles } from '../../utils/splitStyles';
 import ActivityIndicator from '../ActivityIndicator';
 import Icon, { IconSource } from '../Icon';
 import Surface from '../Surface';
-import TouchableRipple from '../TouchableRipple/TouchableRipple';
+import TouchableRipple, {
+  MouseEventType,
+} from '../TouchableRipple/TouchableRipple';
 import Text from '../Typography/Text';
 
 export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
@@ -105,6 +107,15 @@ export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
    * Function to execute on long press.
    */
   onLongPress?: (e: GestureResponderEvent) => void;
+  /**
+   * Called when the hover is activated to provide visual feedback.
+   */
+  onHoverIn?: (e: MouseEventType) => void;
+
+  /**
+   * Called when the hover is deactivated to undo visual feedback.
+   */
+  onHoverOut?: (e: MouseEventType) => void;
   /**
    * The number of milliseconds a user must touch the element before executing `onLongPress`.
    */
@@ -168,6 +179,8 @@ const Button = (
     onPressIn,
     onPressOut,
     onLongPress,
+    onHoverIn,
+    onHoverOut,
     delayLongPress,
     style,
     theme: themeOverrides,
@@ -318,6 +331,8 @@ const Button = (
         onLongPress={onLongPress}
         onPressIn={hasPassedTouchHandler ? handlePressIn : undefined}
         onPressOut={hasPassedTouchHandler ? handlePressOut : undefined}
+        onHoverIn={onHoverIn}
+        onHoverOut={onHoverOut}
         delayLongPress={delayLongPress}
         accessibilityLabel={accessibilityLabel}
         accessibilityHint={accessibilityHint}

src/components/Chip/Chip.tsx

@@ -24,7 +24,9 @@ import type { IconSource } from '../Icon';
 import Icon from '../Icon';
 import MaterialCommunityIcon from '../MaterialCommunityIcon';
 import Surface from '../Surface';
-import TouchableRipple from '../TouchableRipple/TouchableRipple';
+import TouchableRipple, {
+  MouseEventType,
+} from '../TouchableRipple/TouchableRipple';
 import Text from '../Typography/Text';
 
 export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
@@ -90,10 +92,6 @@ export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
    * Function to execute on press.
    */
   onPress?: (e: GestureResponderEvent) => void;
-  /**
-   * Function to execute on long press.
-   */
-  onLongPress?: () => void;
   /**
    * Function to execute as soon as the touchable element is pressed and invoked even before onPress.
    */
@@ -102,6 +100,19 @@ export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
    * Function to execute as soon as the touch is released even before onPress.
    */
   onPressOut?: (e: GestureResponderEvent) => void;
+  /**
+   * Function to execute on long press.
+   */
+  onLongPress?: (e: GestureResponderEvent) => void;
+  /**
+   * Called when the hover is activated to provide visual feedback.
+   */
+  onHoverIn?: (e: MouseEventType) => void;
+
+  /**
+   * Called when the hover is deactivated to undo visual feedback.
+   */
+  onHoverOut?: (e: MouseEventType) => void;
   /**
    * Function to execute on close button press. The close button appears only when this prop is specified.
    */
@@ -176,9 +187,11 @@ const Chip = ({
   accessibilityLabel,
   closeIconAccessibilityLabel = 'Close',
   onPress,
-  onLongPress,
-  onPressOut,
   onPressIn,
+  onPressOut,
+  onLongPress,
+  onHoverIn,
+  onHoverOut,
   delayLongPress,
   onClose,
   closeIcon,
@@ -213,6 +226,7 @@ const Chip = ({
   const isOutlined = mode === 'outlined';
 
   const handlePressIn = useLatestCallback((e: GestureResponderEvent) => {
+    onPressIn?.(e);
     const { scale } = theme.animation;
     onPressIn?.(e);
     Animated.timing(elevation, {
@@ -223,6 +237,7 @@ const Chip = ({
   });
 
   const handlePressOut = useLatestCallback((e: GestureResponderEvent) => {
+    onPressOut?.(e);
     const { scale } = theme.animation;
     onPressOut?.(e);
     Animated.timing(elevation, {
@@ -307,6 +322,8 @@ const Chip = ({
         onLongPress={onLongPress}
         onPressIn={hasPassedTouchHandler ? handlePressIn : undefined}
         onPressOut={hasPassedTouchHandler ? handlePressOut : undefined}
+        onHoverIn={onHoverIn}
+        onHoverOut={onHoverOut}
         delayLongPress={delayLongPress}
         rippleColor={rippleColor}
         disabled={disabled}

src/components/FAB/FAB.tsx

@@ -18,7 +18,9 @@ import ActivityIndicator from '../ActivityIndicator';
 import CrossFadeIcon from '../CrossFadeIcon';
 import Icon, { IconSource } from '../Icon';
 import Surface from '../Surface';
-import TouchableRipple from '../TouchableRipple/TouchableRipple';
+import TouchableRipple, {
+  MouseEventType,
+} from '../TouchableRipple/TouchableRipple';
 import Text from '../Typography/Text';
 
 type FABSize = 'small' | 'medium' | 'large';
@@ -93,10 +95,27 @@ export type Props = $Omit<$RemoveChildren<typeof Surface>, 'mode'> & {
    * Function to execute on press.
    */
   onPress?: (e: GestureResponderEvent) => void;
+  /**
+   * Function to execute as soon as the touchable element is pressed and invoked even before onPress.
+   */
+  onPressIn?: (e: GestureResponderEvent) => void;
+  /**
+   * Function to execute as soon as the touch is released even before onPress.
+   */
+  onPressOut?: (e: GestureResponderEvent) => void;
   /**
    * Function to execute on long press.
    */
   onLongPress?: (e: GestureResponderEvent) => void;
+  /**
+   * Called when the hover is activated to provide visual feedback.
+   */
+  onHoverIn?: (e: MouseEventType) => void;
+
+  /**
+   * Called when the hover is deactivated to undo visual feedback.
+   */
+  onHoverOut?: (e: MouseEventType) => void;
   /**
    * The number of milliseconds a user must touch the element before executing `onLongPress`.
    */
@@ -185,6 +204,10 @@ const FAB = forwardRef<View, Props>(
       rippleColor: customRippleColor,
       disabled,
       onPress,
+      onPressIn,
+      onPressOut,
+      onHoverIn,
+      onHoverOut,
       onLongPress,
       delayLongPress,
       theme: themeOverrides,
@@ -286,6 +309,10 @@ const FAB = forwardRef<View, Props>(
         <TouchableRipple
           borderless
           onPress={onPress}
+          onPressIn={onPressIn}
+          onPressOut={onPressOut}
+          onHoverIn={onHoverIn}
+          onHoverOut={onHoverOut}
           onLongPress={onLongPress}
           delayLongPress={delayLongPress}
           rippleColor={rippleColor}

src/components/TouchableRipple/TouchableRipple.native.tsx

@@ -8,6 +8,7 @@ import {
   GestureResponderEvent,
   View,
   ColorValue,
+  MouseEvent,
 } from 'react-native';
 
 import type { PressableProps } from './Pressable';
@@ -22,6 +23,8 @@ import hasTouchHandler from '../../utils/hasTouchHandler';
 const ANDROID_VERSION_LOLLIPOP = 21;
 const ANDROID_VERSION_PIE = 28;
 
+export type MouseEventType = React.MouseEvent | MouseEvent;
+
 export type Props = PressableProps & {
   borderless?: boolean;
   background?: PressableAndroidRippleConfig;