fix(fab): forward long press props so Tooltip works on FAB

src/components/FAB/Extended.tsx

@@ -68,6 +68,18 @@ export type Props = {
    * Function to execute on press.
    */
   onPress?: (e: GestureResponderEvent) => void;
+  /**
+   * Function to execute on long press.
+   */
+  onLongPress?: (e: GestureResponderEvent) => void;
+  /**
+   * Function to execute as soon as the touch is released.
+   */
+  onPressOut?: (e: GestureResponderEvent) => void;
+  /**
+   * The number of milliseconds a user must touch the element before executing `onLongPress`.
+   */
+  delayLongPress?: number;
   /**
    * Accessibility label. Falls back to `label` if unset.
    */
@@ -161,6 +173,9 @@ const Extended = ({
   expanded,
   visible = true,
   onPress,
+  onLongPress,
+  onPressOut,
+  delayLongPress,
   'aria-label': ariaLabel = label,
   'aria-checked': ariaChecked,
   'aria-selected': ariaSelected,
@@ -266,6 +281,9 @@ const Extended = ({
         size={size}
         visible={visible}
         onPress={onPress}
+        onLongPress={onLongPress}
+        onPressOut={onPressOut}
+        delayLongPress={delayLongPress}
         aria-label={ariaLabel}
         aria-checked={ariaChecked}
         aria-selected={ariaSelected}

src/components/FAB/FAB.tsx

@@ -45,6 +45,18 @@ export type Props = {
    * Function to execute on press.
    */
   onPress?: (e: GestureResponderEvent) => void;
+  /**
+   * Function to execute on long press.
+   */
+  onLongPress?: (e: GestureResponderEvent) => void;
+  /**
+   * Function to execute as soon as the touch is released.
+   */
+  onPressOut?: (e: GestureResponderEvent) => void;
+  /**
+   * The number of milliseconds a user must touch the element before executing `onLongPress`.
+   */
+  delayLongPress?: number;
   /**
    * Accessibility label. Falls back to nothing if unset.
    */
@@ -122,6 +134,9 @@ const FAB = ({
   size = 'default',
   visible = true,
   onPress,
+  onLongPress,
+  onPressOut,
+  delayLongPress,
   containerColor,
   contentColor,
   'aria-label': ariaLabel,
@@ -142,6 +157,9 @@ const FAB = ({
     size={size}
     visible={visible}
     onPress={onPress}
+    onLongPress={onLongPress}
+    onPressOut={onPressOut}
+    delayLongPress={delayLongPress}
     containerColor={containerColor}
     contentColor={contentColor}
     aria-label={ariaLabel}

src/components/FAB/Shell.tsx

@@ -91,6 +91,18 @@ export type ShellProps = {
    * Function to execute on press.
    */
   onPress?: (e: GestureResponderEvent) => void;
+  /**
+   * Function to execute on long press.
+   */
+  onLongPress?: (e: GestureResponderEvent) => void;
+  /**
+   * Function to execute as soon as the touch is released.
+   */
+  onPressOut?: (e: GestureResponderEvent) => void;
+  /**
+   * The number of milliseconds a user must touch the element before executing `onLongPress`.
+   */
+  delayLongPress?: number;
   /**
    * Accessibility label. Falls back to `label` if unset.
    */
@@ -197,6 +209,9 @@ const Shell = ({
   elevation = Tokens.stateElevation.enabled,
   visible = true,
   onPress,
+  onLongPress,
+  onPressOut,
+  delayLongPress,
   'aria-label': ariaLabel = label,
   'aria-checked': ariaChecked,
   'aria-selected': ariaSelected,
@@ -327,6 +342,9 @@ const Shell = ({
           borderless
           background={background}
           onPress={onPress}
+          onLongPress={onLongPress}
+          onPressOut={onPressOut}
+          delayLongPress={delayLongPress}
           onFocus={onFocus}
           onBlur={onBlur}
           aria-label={ariaLabel}

src/components/__tests__/FAB.test.tsx

@@ -1,8 +1,10 @@
 import { expect, it, jest } from '@jest/globals';
 import { fireEvent, userEvent } from '@testing-library/react-native';
 
+import PaperProvider from '../../core/PaperProvider';
 import { render, screen } from '../../test-utils';
 import FAB from '../FAB';
+import Tooltip from '../Tooltip/Tooltip';
 
 it('renders FAB with default props', async () => {
   const tree = (await render(<FAB icon="plus" />)).toJSON();
@@ -101,3 +103,36 @@ it('forwards event object to onPress', async () => {
   });
   expect(onPress).toHaveBeenCalledWith({ key: 'value' });
 });
+
+it('calls onLongPress and onPressOut when FAB is long pressed', async () => {
+  const user = userEvent.setup();
+  const onLongPress = jest.fn();
+  const onPressOut = jest.fn();
+  await render(
+    <FAB
+      icon="plus"
+      aria-label="Add item"
+      onLongPress={onLongPress}
+      onPressOut={onPressOut}
+      delayLongPress={300}
+    />
+  );
+  await user.longPress(screen.getByRole('button', { name: 'Add item' }), {
+    duration: 400,
+  });
+  expect(onLongPress).toHaveBeenCalledTimes(1);
+  expect(onPressOut).toHaveBeenCalledTimes(1);
+});
+
+it('shows Tooltip when FAB is long pressed', async () => {
+  const user = userEvent.setup();
+  await render(
+    <PaperProvider>
+      <Tooltip title="Press Me">
+        <FAB icon="plus" aria-label="Add item" onPress={() => {}} />
+      </Tooltip>
+    </PaperProvider>
+  );
+  await user.longPress(screen.getByRole('button', { name: 'Add item' }));
+  expect(screen.getByText('Press Me')).toBeOnTheScreen();
+});