Add button property mouse events

change/react-native-windows-c4c264df-7619-4559-b43f-9761d5d68d63.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Implement button property",
+  "packageName": "react-native-windows",
+  "email": "hmalothu@microsoft.com",
+  "dependentChangeType": "none"
+}

packages/@react-native-windows/tester/src/js/examples-win/Pointer/PointerButtonExample.windows.js

@@ -0,0 +1,115 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ * Licensed under the MIT License.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+'use strict';
+
+import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
+
+const React = require('react');
+const {StyleSheet, Text, View} = require('react-native');
+
+function buttonLabel(button: number): string {
+  switch (button) {
+    case 0:
+      return 'Left';
+    case 1:
+      return 'Middle';
+    case 2:
+      return 'Right';
+    case 3:
+      return 'X1';
+    case 4:
+      return 'X2';
+    default:
+      return `Unknown(${button})`;
+  }
+}
+
+function PointerDownButtonExample(): React.Node {
+  const [text, setText] = React.useState(
+    'Click the box to test pointer events',
+  );
+  return (
+    <View>
+      <Text accessible={true} testID="pointer-button-state">{text}</Text>
+      <View
+        accessible={true}
+        testID="pointer-button-target"
+        style={styles.targetBox}
+        onPointerDown={(e: any) => {
+          const {button, buttons} = e.nativeEvent;
+          setText(
+            `PointerDown: ${buttonLabel(button)} (button=${button}, buttons=${buttons})`,
+          );
+        }}
+      />
+    </View>
+  );
+}
+
+function PointerUpButtonExample(): React.Node {
+  const [text, setText] = React.useState(
+    'Click the box to test pointer up events',
+  );
+  return (
+    <View>
+      <Text accessible={true} testID="pointer-up-button-state">{text}</Text>
+      <View
+        accessible={true}
+        testID="pointer-up-button-target"
+        style={styles.targetBox}
+        onPointerUp={(e: any) => {
+          const {button, buttons} = e.nativeEvent;
+          setText(
+            `PointerUp: ${buttonLabel(button)} (button=${button}, buttons=${buttons})`,
+          );
+        }}
+      />
+    </View>
+  );
+}
+
+exports.displayName = 'PointerButtonExample';
+exports.framework = 'React';
+exports.category = 'Basic';
+exports.title = 'Pointer Button';
+exports.documentationURL =
+  'https://developer.mozilla.org/docs/Web/API/PointerEvent/button';
+exports.description =
+  'Tests that PointerEvent.button and PointerEvent.buttons are correctly populated.';
+
+exports.examples = [
+  {
+    title: 'onPointerDown button property',
+    description:
+      'Click the box to verify the button property on onPointerDown events.',
+    render: function (): React.Node {
+      return <PointerDownButtonExample />;
+    },
+  },
+  {
+    title: 'onPointerUp button property',
+    description:
+      'Click the box to verify the button property on onPointerUp events.',
+    render: function (): React.Node {
+      return <PointerUpButtonExample />;
+    },
+  },
+] as Array<RNTesterModuleExample>;
+
+const styles = StyleSheet.create({
+  targetBox: {
+    backgroundColor: 'magenta',
+    width: 200,
+    height: 200,
+    margin: 10,
+    borderRadius: 10,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

packages/@react-native-windows/tester/src/js/utils/RNTesterList.windows.js

@@ -389,6 +389,11 @@ const APIs: Array<RNTesterModuleInfo> = ([
     category: 'Basic',
     module: require('../examples/PointerEvents/PointerEventsExample'),
   },
+  {
+    key: 'PointerButtonExample',
+    category: 'Basic',
+    module: require('../examples-win/Pointer/PointerButtonExample'),
+  },
   {
     key: 'RTLExample',
     category: 'Basic',

packages/e2e-test-app-fabric/test/PointerButtonComponentTest.test.ts

@@ -0,0 +1,216 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ * Licensed under the MIT License.
+ *
+ * @format
+ */
+
+import {dumpVisualTree} from '@react-native-windows/automation-commands';
+import {goToApiExample} from './RNTesterNavigation';
+import {verifyNoErrorLogs} from './Helpers';
+import {app} from '@react-native-windows/automation';
+
+beforeAll(async () => {
+  // If window is partially offscreen, tests will fail to click on certain elements
+  await app.setWindowPosition(0, 0);
+  await app.setWindowSize(1000, 1250);
+  await goToApiExample('Pointer Button');
+});
+
+afterEach(async () => {
+  await verifyNoErrorLogs();
+});
+
+const searchBox = async (input: string) => {
+  const searchBox = await app.findElementByTestID('example_search');
+  await app.waitUntil(
+    async () => {
+      await searchBox.setValue(input);
+      if (input === '') {
+        return (await searchBox.getText()) === 'Search...';
+      } else {
+        return (await searchBox.getText()) === input;
+      }
+    },
+    {
+      interval: 1500,
+      timeout: 5000,
+      timeoutMsg: `Unable to enter correct search text into test searchbox.`,
+    },
+  );
+};
+
+describe('Pointer Button Tests', () => {
+  test('onPointerDown reports correct button property on left click', async () => {
+    await searchBox('onPointerDown');
+    const component = await app.findElementByTestID('pointer-button-target');
+    await component.waitForDisplayed({timeout: 5000});
+    const dump = await dumpVisualTree('pointer-button-target');
+    expect(dump).toMatchSnapshot();
+
+    // Left click triggers onPointerDown with button=0
+    await component.click();
+    const stateText = await app.findElementByTestID('pointer-button-state');
+
+    await app.waitUntil(
+      async () => {
+        const currentText = await stateText.getText();
+        return currentText.includes('button=0');
+      },
+      {
+        timeout: 5000,
+        timeoutMsg:
+          'State text not updated after onPointerDown with button property.',
+      },
+    );
+
+    const text = await stateText.getText();
+    expect(text).toContain('PointerDown');
+    expect(text).toContain('button=0');
+    expect(text).toContain('buttons=1');
+  });
+  test('onPointerDown reports correct button property on middle click', async () => {
+    await searchBox('onPointerDown');
+    const component = await app.findElementByTestID('pointer-button-target');
+    await component.waitForDisplayed({timeout: 5000});
+
+    // Middle click triggers onPointerDown with button=1
+    await component.click({button: 'middle'});
+    const stateText = await app.findElementByTestID('pointer-button-state');
+
+    await app.waitUntil(
+      async () => {
+        const currentText = await stateText.getText();
+        return currentText.includes('button=1');
+      },
+      {
+        timeout: 5000,
+        timeoutMsg:
+          'State text not updated after onPointerDown with middle button property.',
+      },
+    );
+
+    const text = await stateText.getText();
+    expect(text).toContain('PointerDown');
+    expect(text).toContain('button=1');
+    expect(text).toContain('buttons=4');
+  });
+  test('onPointerDown reports correct button property on right click', async () => {
+    await searchBox('onPointerDown');
+    const component = await app.findElementByTestID('pointer-button-target');
+    await component.waitForDisplayed({timeout: 5000});
+
+    // Right click triggers onPointerDown with button=2
+    await component.click({button: 'right'});
+    const stateText = await app.findElementByTestID('pointer-button-state');
+
+    await app.waitUntil(
+      async () => {
+        const currentText = await stateText.getText();
+        return currentText.includes('button=2');
+      },
+      {
+        timeout: 5000,
+        timeoutMsg:
+          'State text not updated after onPointerDown with right button property.',
+      },
+    );
+
+    const text = await stateText.getText();
+    expect(text).toContain('PointerDown');
+    expect(text).toContain('button=2');
+    expect(text).toContain('buttons=2');
+  });
+  test('onPointerUp reports correct button property on left click', async () => {
+    await searchBox('onPointerUp');
+    const component = await app.findElementByTestID(
+      'pointer-up-button-target',
+    );
+    await component.waitForDisplayed({timeout: 5000});
+    const dump = await dumpVisualTree('pointer-up-button-target');
+    expect(dump).toMatchSnapshot();
+
+    // Left click release triggers onPointerUp with button=0
+    await component.click();
+    const stateText = await app.findElementByTestID(
+      'pointer-up-button-state',
+    );
+
+    await app.waitUntil(
+      async () => {
+        const currentText = await stateText.getText();
+        return currentText.includes('button=0');
+      },
+      {
+        timeout: 5000,
+        timeoutMsg:
+          'State text not updated after onPointerUp with button property.',
+      },
+    );
+
+    const text = await stateText.getText();
+    expect(text).toContain('PointerUp');
+    expect(text).toContain('button=0');
+    expect(text).toContain('buttons=0');
+  });
+  test('onPointerUp reports correct button property on middle click', async () => {
+    await searchBox('onPointerUp');
+    const component = await app.findElementByTestID(
+      'pointer-up-button-target',
+    );
+    await component.waitForDisplayed({timeout: 5000});
+
+    // Middle click release triggers onPointerUp with button=1
+    await component.click({button: 'middle'});
+    const stateText = await app.findElementByTestID(
+      'pointer-up-button-state',
+    );
+
+    await app.waitUntil(
+      async () => {
+        const currentText = await stateText.getText();
+        return currentText.includes('button=1');
+      },
+      {
+        timeout: 5000,
+        timeoutMsg:
+          'State text not updated after onPointerUp with middle button property.',
+      },
+    );
+
+    const text = await stateText.getText();
+    expect(text).toContain('PointerUp');
+    expect(text).toContain('button=1');
+    expect(text).toContain('buttons=0');
+  });
+  test('onPointerUp reports correct button property on right click', async () => {
+    await searchBox('onPointerUp');
+    const component = await app.findElementByTestID(
+      'pointer-up-button-target',
+    );
+    await component.waitForDisplayed({timeout: 5000});
+
+    // Right click release triggers onPointerUp with button=2
+    await component.click({button: 'right'});
+    const stateText = await app.findElementByTestID(
+      'pointer-up-button-state',
+    );
+
+    await app.waitUntil(
+      async () => {
+        const currentText = await stateText.getText();
+        return currentText.includes('button=2');
+      },
+      {
+        timeout: 5000,
+        timeoutMsg:
+          'State text not updated after onPointerUp with right button property.',
+      },
+    );
+
+    const text = await stateText.getText();
+    expect(text).toContain('PointerUp');
+    expect(text).toContain('button=2');
+    expect(text).toContain('buttons=0');
+  });
+});