Fix gap token on MenuList (#3945)

* Fix gap tokens on MenuList

* Change files

* remove console

Author: rurikoaraki

change/@fluentui-react-native-menu-81acb56e-ab1f-46a9-bce0-dc440e0aa15e.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fix gap tokens on MenuList",
+  "packageName": "@fluentui-react-native/menu",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/components/Menu/src/MenuList/MenuList.styling.ts

@@ -19,12 +19,22 @@ export const stylingSettings: UseStylingOptions<MenuListProps, MenuListSlotProps
         style: {
           backgroundColor: tokens.backgroundColor,
           display: 'flex',
+          gap: tokens.gap,
           ...layoutStyles.from(tokens, theme),
           ...(Platform.OS === 'android' && { borderRadius: tokens.borderRadius }),
         },
-        gap: tokens.gap,
       }),
-      ['backgroundColor', 'gap', ...layoutStyles.keys],
+      ['backgroundColor', 'borderRadius', 'gap', ...layoutStyles.keys],
+    ),
+    focusZone: buildProps(
+      (tokens: MenuListTokens) => ({
+        style: {
+          display: 'flex',
+          flexDirection: 'column',
+          gap: tokens.gap,
+        },
+      }),
+      ['gap'],
     ),
   },
 };

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

@@ -3,10 +3,9 @@
 import React from 'react';
 import { Platform, ScrollView, View } from 'react-native';
 
-import type { IViewProps } from '@fluentui-react-native/adapters';
 import { FocusZone } from '@fluentui-react-native/focus-zone';
 import type { UseSlots } from '@fluentui-react-native/framework';
-import { compose, mergeProps, stagedComponent, withSlots } from '@fluentui-react-native/framework';
+import { compose, withSlots } from '@fluentui-react-native/framework';
 
 import { stylingSettings } from './MenuList.styling';
 import type { MenuListProps, MenuListState, MenuListType } from './MenuList.types';
@@ -15,25 +14,6 @@ import { useMenuList } from './useMenuList';
 import { useMenuListContextValue } from './useMenuListContextValue';
 import { MenuListProvider } from '../context/menuListContext';
 
-const MenuStack = stagedComponent((props: React.PropsWithRef<IViewProps> & { gap?: number }) => {
-  const { gap, ...rest } = props;
-  return (final: React.PropsWithRef<IViewProps> & { gap?: number }, children: React.ReactNode) => {
-    if (gap && gap > 0 && children) {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore - GH:1684, fix typing error
-      children = React.Children.map(children, (child: React.ReactChild, index: number) => {
-        if (React.isValidElement(child) && index > 0) {
-          return React.cloneElement(child, mergeProps(child.props, { style: { marginTop: gap } }));
-        }
-        return child;
-      });
-    }
-
-    return <View {...mergeProps(rest, final)}>{children}</View>;
-  };
-});
-MenuStack.displayName = 'MenuStack';
-
 const shouldHaveFocusZone = ['macos', 'win32'].includes(Platform.OS as string);
 const focusLandsOnContainer = Platform.OS === 'macos';
 const hasCircularNavigation = Platform.OS === ('win32' as any);
@@ -46,9 +26,9 @@ export const MenuList = compose<MenuListType>({
   displayName: menuListName,
   ...stylingSettings,
   slots: {
-    root: MenuStack,
+    root: View,
     scrollView: ScrollView,
-    focusZone: shouldHaveFocusZone ? FocusZone : React.Fragment,
+    focusZone: shouldHaveFocusZone ? FocusZone : View,
   },
   useRender: (userProps: MenuListProps, useSlots: UseSlots<MenuListType>) => {
     const menuList = useMenuList(userProps);