feat: add onPressIn, onPressOut, onHoverIn, onHoverOut to FAB and Button

src/components/Button/Button.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import {
   Animated,
   GestureResponderEvent,
+  MouseEvent,
   StyleProp,
   StyleSheet,
   TextStyle,
@@ -101,6 +102,14 @@ export type Props = React.ComponentProps<typeof Surface> & {
    * The number of milliseconds a user must touch the element before executing `onLongPress`.
    */
   delayLongPress?: number;
+  /**
+   * Called when the hover is activated to provide visual feedback.
+   */
+  onHoverIn?: (e: MouseEvent) => void;
+  /**
+   * Called when the hover is deactivated to undo visual feedback.
+   */
+  onHoverOut?: (e: MouseEvent) => void;
   /**
    * Style of button's inner content.
    * Use this prop to apply custom height and width and to set the icon on the right with `flexDirection: 'row-reverse'`.
@@ -176,6 +185,8 @@ const Button = ({
   onPress,
   onPressIn,
   onPressOut,
+  onHoverOut,
+  onHoverIn,
   onLongPress,
   delayLongPress,
   style,
@@ -310,6 +321,8 @@ const Button = ({
         onLongPress={onLongPress}
         onPressIn={handlePressIn}
         onPressOut={handlePressOut}
+        onHoverIn={onHoverIn}
+        onHoverOut={onHoverOut}
         delayLongPress={delayLongPress}
         accessibilityLabel={accessibilityLabel}
         accessibilityHint={accessibilityHint}

src/components/FAB/FAB.tsx

@@ -3,6 +3,7 @@ import {
   AccessibilityState,
   Animated,
   GestureResponderEvent,
+  MouseEvent,
   StyleProp,
   StyleSheet,
   View,
@@ -88,14 +89,30 @@ export type Props = $RemoveChildren<typeof Surface> & {
    * 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?: () => void;
+  onLongPress?: (e: GestureResponderEvent) => void;
   /**
    * The number of milliseconds a user must touch the element before executing `onLongPress`.
    */
   delayLongPress?: number;
+  /**
+   * Called when the hover is activated to provide visual feedback.
+   */
+  onHoverIn?: (e: MouseEvent) => void;
+  /**
+   * Called when the hover is deactivated to undo visual feedback.
+   */
+  onHoverOut?: (e: MouseEvent) => void;
   /**
    * @supported Available in v5.x with theme version 3
    *
@@ -179,6 +196,10 @@ const FAB = forwardRef<View, Props>(
       disabled,
       onPress,
       onLongPress,
+      onPressIn,
+      onPressOut,
+      onHoverOut,
+      onHoverIn,
       delayLongPress,
       theme: themeOverrides,
       style,
@@ -279,6 +300,10 @@ const FAB = forwardRef<View, Props>(
           borderless
           onPress={onPress}
           onLongPress={onLongPress}
+          onPressIn={onPressIn}
+          onPressOut={onPressOut}
+          onHoverOut={onHoverOut}
+          onHoverIn={onHoverIn}
           delayLongPress={delayLongPress}
           rippleColor={rippleColor}
           disabled={disabled}

src/components/IconButton/IconButton.tsx

@@ -65,6 +65,7 @@ export type Props = $RemoveChildren<typeof TouchableRipple> & {
    * Function to execute on press.
    */
   onPress?: (e: GestureResponderEvent) => void;
+
   style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
   ref?: React.RefObject<View>;
   /**