Merge branch 'main' into perf-artifact-hidden-files

Author: iamAbhi-916

.github/workflows/move-issues-milestones.yml

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add onAuxClick event",
+  "packageName": "react-native-windows",
+  "email": "30809111+acoates-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/react-native-windows-36cdef53-4ccd-460d-ba0c-d4a17cbf7452.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Fix NativeModule templates to work with clang",
+  "packageName": "react-native-windows",
+  "email": "30809111+acoates-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/react-native-windows-660aa91b-ff55-4316-a3db-b8910ba99e8c.json

@@ -0,0 +1,72 @@
+/**
+ * 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');
+import {Pressable, StyleSheet, View} from 'react-native';
+import RNTesterText from '../../components/RNTesterText';
+
+function PointerClickEventsExample(): React.Node {
+  const [text, setText] = React.useState(
+    'onClick should cause the box to go red, onAuxClick will cause it go green',
+  );
+  const [bgColor, setBgColor]= React.useState('gray');
+  return (
+    <View>
+      <View
+        accessible
+        testID="pointer-click-target"
+        style={[styles.targetBox, {backgroundColor: bgColor}]}
+        onClick={(e) => {
+          setBgColor('red');
+          setText('onClick.nativeEvent: ' + JSON.stringify(e.nativeEvent, null, 2));
+        }}
+        onAuxClick={(e) => {
+          setBgColor('green');
+          setText('onAuxClick.nativeEvent: ' + JSON.stringify(e.nativeEvent, null, 2));
+        }}
+      />
+     <RNTesterText accessible testID='pointer-click-text'>{text}</RNTesterText>
+    </View>
+
+  );
+}
+
+exports.displayName = 'PointerClickExample';
+exports.framework = 'React';
+exports.category = 'Basic';
+exports.title = 'Pointer Clicks';
+exports.documentationURL =
+  'https://developer.mozilla.org/en-US/docs/Web/API/Element/auxclick_event';
+exports.description =
+  'Tests that onClick and onAuxClick work.';
+
+exports.examples = [
+  {
+    title: 'onClick/onAuxClick test',
+    description:
+      'Click the box with different pointers/buttons to test pointer click events.',
+    render: function (): React.Node {
+      return <PointerClickEventsExample />;
+    },
+  },
+] as Array<RNTesterModuleExample>;
+
+const styles = StyleSheet.create({
+  targetBox: {
+    width: 200,
+    height: 200,
+    margin: 10,
+    borderRadius: 10,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

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

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

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

@@ -0,0 +1,95 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ * Licensed under the MIT License.
+ *
+ * @format
+ */
+
+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 Clicks');
+});
+
+afterEach(async () => {
+  await verifyNoErrorLogs();
+});
+
+
+describe('Pointer onClick Test', () => {
+  test('onClick reports correct native event properties on left click', async () => {
+    const component = await app.findElementByTestID('pointer-click-target');
+    await component.waitForDisplayed({ timeout: 5000 });
+
+    // Left click triggers onPointerDown with button=0
+    await component.click();
+    const stateText = await app.findElementByTestID('pointer-click-text');
+
+    await app.waitUntil(
+      async () => {
+        const currentText = await stateText.getText();
+        return currentText.includes('"button": 0') && currentText.includes('onClick');
+      },
+      {
+        timeout: 5000,
+        timeoutMsg:
+          'State text not updated after onClick with button property.',
+      },
+    );
+
+    const text = await stateText.getText();
+    expect(text).toMatchSnapshot();
+  });
+  test('onAuxClick reports correct native event properties on middle click', async () => {
+    const component = await app.findElementByTestID('pointer-click-target');
+    await component.waitForDisplayed({ timeout: 5000 });
+
+    // Middle click triggers onPointerDown with button=1
+    await component.click({ button: 'middle' });
+    const stateText = await app.findElementByTestID('pointer-click-text');
+
+    await app.waitUntil(
+      async () => {
+        const currentText = await stateText.getText();
+        return currentText.includes('"button": 1') && currentText.includes('onAuxClick');
+      },
+      {
+        timeout: 5000,
+        timeoutMsg:
+          'State text not updated after onAuxClick with middle button property.',
+      },
+    );
+
+    const text = await stateText.getText();
+    expect(text).toMatchSnapshot();
+  });
+  test('onAuxClick reports correct native event properties on right click', async () => {
+    const component = await app.findElementByTestID('pointer-click-target');
+    await component.waitForDisplayed({ timeout: 5000 });
+
+    // Middle click triggers onPointerDown with button=2
+    await component.click({ button: 'right' });
+    const stateText = await app.findElementByTestID('pointer-click-text');
+
+    await app.waitUntil(
+      async () => {
+        const currentText = await stateText.getText();
+        return currentText.includes('"button": 2') && currentText.includes('onAuxClick');
+      },
+      {
+        timeout: 5000,
+        timeoutMsg:
+          'State text not updated after onAuxClick with right button property.',
+      },
+    );
+
+    const text = await stateText.getText();
+    expect(text).toMatchSnapshot();
+  });
+
+});