Fork SubmenuItem pressable (#2435)

Author: chiuam

change/@fluentui-react-native-contextual-menu-59d1d1ea-40db-437d-80ab-b615797ee124.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fork SubmenuItem pressable",
+  "packageName": "@fluentui-react-native/contextual-menu",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/components/ContextualMenu/src/SubmenuItem.tsx

@@ -1,6 +1,6 @@
 /** @jsx withSlots */
 import * as React from 'react';
-import { I18nManager, Platform, View } from 'react-native';
+import { I18nManager, Platform, Pressable, View } from 'react-native';
 import {
   SubmenuItemSlotProps,
   SubmenuItemState,
@@ -15,7 +15,7 @@ import { Text } from '@fluentui-react-native/text';
 import { settings } from './SubmenuItem.settings';
 import { backgroundColorTokens, borderTokens, textTokens, foregroundColorTokens, getPaletteFromTheme } from '@fluentui-react-native/tokens';
 import { mergeSettings } from '@uifabricshared/foundation-settings';
-import { useKeyDownProps, useViewCommandFocus, useAsPressable } from '@fluentui-react-native/interactive-hooks';
+import { useKeyDownProps, useViewCommandFocus, useAsPressable, usePressableState } from '@fluentui-react-native/interactive-hooks';
 import { CMContext } from './ContextualMenu';
 import { Icon, SvgIconProps, createIconProps } from '@fluentui-react-native/icon';
 import { Svg, G, Path, SvgProps } from 'react-native-svg';
@@ -63,14 +63,24 @@ export const SubmenuItem = compose<SubmenuItemType>({
       }
     }, [context, disabled, itemKey, onClick]);
 
-    const pressable = useAsPressable({
+    const pressableWin32 = usePressableState({
       ...rest,
       onPress: onItemPress,
       onHoverIn: onItemHoverIn,
       delayHoverIn: onHoverInDelay,
       onHoverOut: onItemHoverOut,
     });
 
+    const pressableMacOS = useAsPressable({
+      ...rest,
+      onPress: onItemPress,
+      onHoverIn: onItemHoverIn,
+      delayHoverIn: onHoverInDelay,
+      onHoverOut: onItemHoverOut,
+    });
+
+    const pressable = Platform.OS === 'macos' ? pressableMacOS : pressableWin32;
+
     /**
      * GH #1267
      * We want onMouseEnter to fire right away to set focus, and then Pressable's onHoverIn to fire after a delay to show the submenu.
@@ -188,7 +198,7 @@ export const SubmenuItem = compose<SubmenuItemType>({
     );
   },
   slots: {
-    root: View,
+    root: Platform.OS === 'macos' ? View : Pressable,
     startstack: View,
     icon: Icon as React.ComponentType,
     content: Text,

packages/components/ContextualMenu/src/SubmenuItem.types.macos.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { IViewProps } from '@fluentui-react-native/adapters';
+import { IRenderData } from '@uifabricshared/foundation-composable';
+import { ITextProps } from '@fluentui-react-native/text';
+import { ContextualMenuItemProps, ContextualMenuItemTokens, ContextualMenuItemState } from './ContextualMenuItem.types';
+import { IconProps } from '@fluentui-react-native/icon';
+
+export const submenuItemName = 'SubmenuItem';
+export interface SubmenuItemTokens extends ContextualMenuItemTokens {
+  chevronColor?: string;
+}
+export type SubmenuItemProps = ContextualMenuItemProps;
+
+export type SubmenuItemState = ContextualMenuItemState;
+
+export interface SubmenuItemSlotProps {
+  root: React.PropsWithRef<IViewProps>;
+  startstack: IViewProps;
+  icon: IconProps;
+  content: ITextProps;
+  endstack: IViewProps;
+  chevron: IconProps;
+}
+
+export type SubmenuItemRenderData = IRenderData<SubmenuItemSlotProps, SubmenuItemState>;
+
+export interface SubmenuItemType {
+  props: SubmenuItemProps;
+  tokens: SubmenuItemTokens;
+  slotProps: SubmenuItemSlotProps;
+  state: SubmenuItemState;
+}

packages/components/ContextualMenu/src/SubmenuItem.types.ts

@@ -4,6 +4,7 @@ import { IRenderData } from '@uifabricshared/foundation-composable';
 import { ITextProps } from '@fluentui-react-native/text';
 import { ContextualMenuItemProps, ContextualMenuItemTokens, ContextualMenuItemState } from './ContextualMenuItem.types';
 import { IconProps } from '@fluentui-react-native/icon';
+import { PressablePropsExtended } from '@fluentui-react-native/interactive-hooks';
 
 export const submenuItemName = 'SubmenuItem';
 export interface SubmenuItemTokens extends ContextualMenuItemTokens {
@@ -14,7 +15,7 @@ export type SubmenuItemProps = ContextualMenuItemProps;
 export type SubmenuItemState = ContextualMenuItemState;
 
 export interface SubmenuItemSlotProps {
-  root: React.PropsWithRef<IViewProps>;
+  root: React.PropsWithRef<PressablePropsExtended>;
   startstack: IViewProps;
   icon: IconProps;
   content: ITextProps;