[Menu] Revert N of M implementation for submenus (#2725)

* Revert n of m implementation for submenus

* Change files

* Add test to catch render error for custom menutrigger

* Change files

apps/fluent-tester/src/TestComponents/Menu/MenuTest.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleSheet } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 
 import { ButtonV1 as Button } from '@fluentui/react-native';
 import type { MenuProps } from '@fluentui-react-native/menu';
@@ -275,6 +275,39 @@ const MenuNofM: React.FunctionComponent = () => {
   );
 };
 
+const CustomMenuTrigger: React.FunctionComponent = () => {
+  return (
+    <View style={{ borderColor: 'purple', borderWidth: 3 }}>
+      <MenuTrigger>
+        <Button>Test</Button>
+      </MenuTrigger>
+    </View>
+  );
+};
+
+const MenuWithCustomMenuTrigger: React.FunctionComponent = () => {
+  return (
+    <Stack style={stackStyle}>
+      <Menu>
+        <CustomMenuTrigger />
+        <MenuPopover>
+          <MenuList>
+            <MenuItem>A plain MenuItem</MenuItem>
+            <MenuItem disabled>A disabled MenuItem</MenuItem>
+            <MenuItem accessibilityPositionInSet={9}>A plain MenuItem</MenuItem>
+            <MenuDivider />
+            <Submenu accessibilityPositionInSet={16} accessibilitySetSize={7} />
+            <MenuItem disabled accessibilitySetSize={2}>
+              A disabled MenuItem
+            </MenuItem>
+            <MenuItem>A plain MenuItem</MenuItem>
+          </MenuList>
+        </MenuPopover>
+      </Menu>
+    </Stack>
+  );
+};
+
 const menuSections: TestSection[] = [
   {
     name: 'Menu Default',
@@ -333,6 +366,10 @@ const menuSections: TestSection[] = [
     name: 'Menu N of M Override',
     component: MenuNofM,
   },
+  {
+    name: 'Menu with custom MenuTrigger',
+    component: MenuWithCustomMenuTrigger,
+  },
 ];
 
 const e2eSections: TestSection[] = [

change/@fluentui-react-native-menu-93415e40-0a7d-4b33-8192-d8ff235e1745.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Revert n of m implementation for submenus",
+  "packageName": "@fluentui-react-native/menu",
+  "email": "krsiler@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-tester-b2d2ebf9-cfb1-4572-b20f-9ce8ff6c938a.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Add test to catch render error for custom menutrigger",
+  "packageName": "@fluentui-react-native/tester",
+  "email": "krsiler@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/components/Menu/src/Menu/Menu.tsx

@@ -14,7 +14,6 @@ export const Menu = stagedComponent((props: MenuProps) => {
 
   return (_rest: MenuProps, children: React.ReactNode) => {
     const childrenArray = React.Children.toArray(children) as React.ReactElement[];
-    const { accessibilityPositionInSet, accessibilitySetSize } = state;
 
     if (__DEV__) {
       if (childrenArray.length !== 2) {
@@ -26,25 +25,9 @@ export const Menu = stagedComponent((props: MenuProps) => {
     const menuTrigger = childrenArray[0];
     const menuPopover = childrenArray[1];
 
-    const menuTriggerChild = menuTrigger.props.children;
-
-    const menuTriggerChildWithSet = React.cloneElement(
-      menuTriggerChild as React.ReactElement<unknown, string | React.JSXElementConstructor<any>>,
-      {
-        accessibilityPositionInSet: menuTriggerChild.props.accessibilityPositionInSet ?? accessibilityPositionInSet, // win32
-        accessibilitySetSize: menuTriggerChild.props.accessibilitySetSize ?? accessibilitySetSize, //win32
-      } as any,
-    );
-
-    const menuTriggerWithSet = React.cloneElement(
-      menuTrigger as React.ReactElement<unknown, string | React.JSXElementConstructor<any>>,
-      {} as any,
-      menuTriggerChildWithSet,
-    );
-
     return (
       <MenuProvider value={contextValue}>
-        {menuTriggerWithSet}
+        {menuTrigger}
         {/* GH#2661: Make sure that shouldFocusOnContainer is defined before initializing
             the popover so that focus is put in the correct place */}
         {state.open && state.shouldFocusOnContainer !== undefined && menuPopover}