Switch Menu components to Pressable

change/@fluentui-react-native-contextual-menu-b6aa60f1-4542-40b7-87c4-de5c389f1f51.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Switch Menu to Pressable",
+  "packageName": "@fluentui-react-native/contextual-menu",
+  "email": "sanajmi@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-menu-4450317e-74ce-4f02-b4fb-c2d1904a3bd6.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Switch Menu to Pressable",
+  "packageName": "@fluentui-react-native/menu",
+  "email": "sanajmi@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/components/ContextualMenu/src/ContextualMenuItem.tsx

@@ -1,6 +1,6 @@
 /** @jsx withSlots */
 import * as React from 'react';
-import { View } from 'react-native';
+import { Pressable, View } from 'react-native';
 import {
   ContextualMenuItemSlotProps,
   ContextualMenuItemState,
@@ -15,7 +15,7 @@ import { Text } from '@fluentui-react-native/text';
 import { settings } from './ContextualMenuItem.settings';
 import { backgroundColorTokens, borderTokens, textTokens, foregroundColorTokens, getPaletteFromTheme } from '@fluentui-react-native/tokens';
 import { mergeSettings } from '@uifabricshared/foundation-settings';
-import { useAsPressable, useKeyProps, useViewCommandFocus } from '@fluentui-react-native/interactive-hooks';
+import { usePressableState, useKeyProps, useViewCommandFocus } from '@fluentui-react-native/interactive-hooks';
 import { CMContext } from './ContextualMenu';
 import { Icon } from '@fluentui-react-native/icon';
 import { createIconProps } from '@fluentui-react-native/interactive-hooks';
@@ -64,7 +64,7 @@ export const ContextualMenuItem = compose<ContextualMenuItemType>({
       }
     }, [componentRef, disabled, context]);
 
-    const pressable = useAsPressable({ ...rest, onPress: onItemClick, onHoverIn: onItemHoverIn });
+    const pressable = usePressableState({ ...rest, onPress: onItemClick, onHoverIn: onItemHoverIn });
 
     const onKeyUpProps = useKeyProps(onItemClick, ' ', 'Enter');
 
@@ -80,9 +80,11 @@ export const ContextualMenuItem = compose<ContextualMenuItemType>({
     /**
      * On Desktop, focus gets moved to the root of the menu, so hovering off the menu does not automatically call onBlur as we expect it to.
      * onMouseLeave is overridden to explicitly call onBlur to simulate removing focus
-     * To achieve this, we override the onMouseLEave handler returned by useAsPressable, and replace it with our own. Inside our own
-     * onMouseLeave handler, we call useAsPressable's onMouseLEave handler,
+     * To achieve this, we override the onMouseLeave handler returned by usePressableState, and replace it with our own. Inside our own
+     * onMouseLeave handler, we call usePressableState's onMouseLEave handler,
      */
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore onMouseLeave not in PressableProps but is supported on desktop
     const { onBlur, onMouseLeave, ...restPressableProps } = pressable.props;
     const onMouseLeaveModified = React.useCallback(
       (e) => {
@@ -136,7 +138,7 @@ export const ContextualMenuItem = compose<ContextualMenuItemType>({
     );
   },
   slots: {
-    root: View,
+    root: Pressable,
     stack: { slotType: View },
     icon: { slotType: Icon as React.ComponentType },
     content: Text,

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { PressableProps } from 'react-native';
 import { IViewProps } from '@fluentui-react-native/adapters';
 import { IRenderData } from '@uifabricshared/foundation-composable';
 import { ITextProps } from '@fluentui-react-native/text';
@@ -80,7 +81,7 @@ export interface ContextualMenuItemProps extends Omit<IPressableProps, 'onPress'
 }
 
 export interface ContextualMenuItemSlotProps {
-  root: React.PropsWithRef<IViewProps>;
+  root: React.PropsWithRef<PressableProps>;
   stack: IViewProps;
   icon: IconProps;
   content: ITextProps;

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 { useAsPressable, useKeyDownProps, useViewCommandFocus } from '@fluentui-react-native/interactive-hooks';
+import { usePressableState, useKeyDownProps, useViewCommandFocus } from '@fluentui-react-native/interactive-hooks';
 import { CMContext } from './ContextualMenu';
 import { Icon, SvgIconProps } from '@fluentui-react-native/icon';
 import { createIconProps } from '@fluentui-react-native/interactive-hooks';
@@ -64,7 +64,7 @@ export const SubmenuItem = compose<SubmenuItemType>({
       }
     }, [context, disabled, itemKey, onClick]);
 
-    const pressable = useAsPressable({
+    const pressable = usePressableState({
       ...rest,
       onPress: onItemPress,
       onHoverIn: onItemHoverIn,
@@ -75,25 +75,27 @@ export const SubmenuItem = compose<SubmenuItemType>({
     /**
      * 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.
-     * To achieve this, we override the onMouseEnter handler returned by useAsPressable, and replace it with our own. Inside our own
-     * onMouseEnter handler, we call useAsPressable's onMouseEnter handler, which incorporates the delay passed to delayHoverIn
+     * To achieve this, we override the onMouseEnter handler returned by usePressableState, and replace it with our own. Inside our own
+     * onMouseEnter handler, we call usePressableState's onMouseEnter handler, which incorporates the delay passed to delayHoverIn
      * In the future, we can avoid needing to override onMouseEnter by handling submenu rendering internally rather than depending on the
      * client to conditionally render it with onHoverIn.
      */
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore onMouseLeave not in PressableProps but is supported on desktop
     const { onBlur, onMouseEnter, onMouseLeave, ...restPressableProps } = pressable.props;
     const onMouseEnterModified = React.useCallback(
       (e) => {
         componentRef.current.focus();
         onMouseEnter && onMouseEnter(e);
       },
-      [onMouseEnter],
+      [componentRef, onMouseEnter],
     );
     const onMouseLeaveModified = React.useCallback(
       (e) => {
         onBlur(e);
         onMouseLeave && onMouseLeave(e);
       },
-      [onMouseLeave],
+      [onBlur, onMouseLeave],
     );
     const pressablePropsModified = {
       onBlur: onBlur,
@@ -182,7 +184,7 @@ export const SubmenuItem = compose<SubmenuItemType>({
     );
   },
   slots: {
-    root: View,
+    root: Pressable,
     startstack: View,
     icon: Icon as React.ComponentType,
     content: Text,

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { PressableProps } from 'react-native';
 import { IViewProps } from '@fluentui-react-native/adapters';
 import { IRenderData } from '@uifabricshared/foundation-composable';
 import { ITextProps } from '@fluentui-react-native/text';
@@ -14,7 +15,7 @@ export type SubmenuItemProps = ContextualMenuItemProps;
 export type SubmenuItemState = ContextualMenuItemState;
 
 export interface SubmenuItemSlotProps {
-  root: React.PropsWithRef<IViewProps>;
+  root: React.PropsWithRef<PressableProps>;
   startstack: IViewProps;
   icon: IconProps;
   content: ITextProps;

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

@@ -1,5 +1,5 @@
 /** @jsx withSlots */
-import { I18nManager, View } from 'react-native';
+import { I18nManager, Pressable, View } from 'react-native';
 import { SvgXml } from 'react-native-svg';
 import { compose, memoize, mergeProps, UseSlots, withSlots } from '@fluentui-react-native/framework';
 import { TextV1 as Text } from '@fluentui-react-native/text';
@@ -12,7 +12,7 @@ export const MenuItem = compose<MenuItemType>({
   displayName: menuItemName,
   ...stylingSettings,
   slots: {
-    root: View,
+    root: Pressable,
     checkmark: View,
     content: Text,
     submenuIndicator: SvgXml,

packages/components/Menu/src/MenuItem/MenuItem.types.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ColorValue } from 'react-native';
+import { ColorValue, PressableProps } from 'react-native';
 import { XmlProps } from 'react-native-svg';
 import type { IViewProps } from '@fluentui-react-native/adapters';
 import { TextProps } from '@fluentui-react-native/text';
@@ -70,7 +70,7 @@ export interface MenuItemState extends IPressableHooks<MenuItemProps & React.Com
 }
 
 export interface MenuItemSlotProps {
-  root: React.PropsWithRef<IViewProps>;
+  root: React.PropsWithRef<PressableProps>;
   content?: TextProps;
   checkmark?: React.PropsWithRef<IViewProps>;
   submenuIndicator?: XmlProps;

packages/components/Menu/src/MenuItem/useMenuItem.ts

@@ -5,7 +5,7 @@ import { memoize } from '@fluentui-react-native/framework';
 import {
   InteractionEvent,
   isKeyPressEvent,
-  useAsPressable,
+  usePressableState,
   useKeyDownProps,
   useViewCommandFocus,
 } from '@fluentui-react-native/interactive-hooks';
@@ -54,7 +54,7 @@ export const useMenuItem = (props: MenuItemProps): MenuItemState => {
     [disabled, hasSubmenu, onArrowClose, onClick, setOpen, shouldPersist],
   );
 
-  const pressable = useAsPressable({ ...rest, disabled, onPress: onInvoke });
+  const pressable = usePressableState({ ...rest, disabled, onPress: onInvoke });
   const itemRef = useViewCommandFocus(componentRef);
   const keys = isSubmenu ? submenuTriggerKeys : triggerKeys;
 

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

@@ -1,5 +1,5 @@
 /** @jsx withSlots */
-import { View } from 'react-native';
+import { Pressable } from 'react-native';
 import { SvgXml } from 'react-native-svg';
 import { compose, mergeProps, Slots, UseSlots, withSlots } from '@fluentui-react-native/framework';
 import { TextV1 as Text } from '@fluentui-react-native/text';
@@ -19,7 +19,7 @@ export const MenuItemCheckbox = compose<MenuItemCheckboxType>({
   displayName: menuItemCheckboxName,
   ...stylingSettings,
   slots: {
-    root: View,
+    root: Pressable,
     checkmark: SvgXml,
     content: Text,
   },

packages/components/Menu/src/MenuItemCheckbox/MenuItemCheckbox.types.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
-import { ColorValue } from 'react-native';
+import { ColorValue, PressableProps } from 'react-native';
 import { XmlProps } from 'react-native-svg';
-import type { IViewProps } from '@fluentui-react-native/adapters';
 import { TextProps } from '@fluentui-react-native/text';
 import { IPressableHooks } from '@fluentui-react-native/interactive-hooks';
 import { MenuItemProps, MenuItemTokens } from '../MenuItem/MenuItem.types';
@@ -45,7 +44,7 @@ export interface MenuItemCheckboxProps extends MenuItemProps {
 export interface MenuItemCheckboxState extends IPressableHooks<MenuItemCheckboxProps & React.ComponentPropsWithRef<any>> {}
 
 export interface MenuItemCheckboxSlotProps {
-  root: React.PropsWithRef<IViewProps>;
+  root: React.PropsWithRef<PressableProps>;
   checkmark?: XmlProps;
   content?: TextProps;
 }

packages/components/Menu/src/MenuItemCheckbox/useMenuItemCheckbox.ts

@@ -5,7 +5,7 @@ import { memoize } from '@fluentui-react-native/framework';
 import {
   InteractionEvent,
   KeyPressEvent,
-  useAsPressable,
+  usePressableState,
   useKeyDownProps,
   useOnPressWithFocus,
   useViewCommandFocus,
@@ -74,7 +74,7 @@ export const useMenuCheckboxInteraction = (
   // Ensure focus is placed on checkbox after click
   const toggleCheckedWithFocus = useOnPressWithFocus(componentRef, toggleCallback);
 
-  const pressable = useAsPressable({ ...rest, disabled, onPress: toggleCheckedWithFocus });
+  const pressable = usePressableState({ ...rest, disabled, onPress: toggleCheckedWithFocus });
   const buttonRef = useViewCommandFocus(componentRef);
 
   const onKeysPressed = React.useCallback(