@fluentui-react-native/menu 1.0.53 → 1.0.55

package/src/MenuItem/MenuItem.types.ts

@@ -3,7 +3,7 @@ import { ColorValue } 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 { IFocusable, InteractionEvent, IPressableHooks, IWithPressableOptions } from '@fluentui-react-native/interactive-hooks';
+import { IFocusable, InteractionEvent, PressablePropsExtended, PressableState } from '@fluentui-react-native/interactive-hooks';
 import { FontTokens, IBorderTokens, IColorTokens, LayoutTokens } from '@fluentui-react-native/tokens';
 
 export const menuItemName = 'MenuItem';
@@ -43,7 +43,7 @@ export interface MenuItemTokens extends LayoutTokens, FontTokens, IBorderTokens,
   pressed?: MenuItemTokens;
 }
 
-export interface MenuItemProps extends Omit<IWithPressableOptions<IViewProps>, 'onPress'> {
+export interface MenuItemProps extends Omit<PressablePropsExtended, 'onPress'> {
   /**
    * A RefObject to access the IButton interface. Use this to access the public methods and properties of the component.
    */
@@ -60,7 +60,7 @@ export interface MenuItemProps extends Omit<IWithPressableOptions<IViewProps>, '
   persistOnClick?: boolean;
 }
 
-export interface MenuItemState extends IPressableHooks<MenuItemProps & React.ComponentPropsWithRef<any>> {
+export interface MenuItemState extends PressableState {
   hasCheckmarks?: boolean;
 
   /**
@@ -69,8 +69,13 @@ export interface MenuItemState extends IPressableHooks<MenuItemProps & React.Com
   hasSubmenu?: boolean;
 }
 
+export interface MenuItemInfo {
+  props: MenuItemProps & React.ComponentPropsWithRef<any>;
+  state: MenuItemState;
+}
+
 export interface MenuItemSlotProps {
-  root: React.PropsWithRef<IViewProps>;
+  root: React.PropsWithRef<PressablePropsExtended>;
   content?: TextProps;
   checkmark?: React.PropsWithRef<IViewProps>;
   submenuIndicator?: XmlProps;

package/src/MenuItem/index.ts

@@ -1,4 +1,4 @@
 export { MenuItem } from './MenuItem';
 export { menuItemName } from './MenuItem.types';
-export type { MenuItemProps, MenuItemState, MenuItemTokens, MenuItemSlotProps, MenuItemType } from './MenuItem.types';
+export type { MenuItemProps, MenuItemState, MenuItemInfo, MenuItemTokens, MenuItemSlotProps, MenuItemType } from './MenuItem.types';
 export { useMenuItem } from './useMenuItem';

package/src/MenuItem/useMenuItem.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { AccessibilityState, I18nManager, Platform } from 'react-native';
-import { MenuItemProps, MenuItemState } from './MenuItem.types';
+import { MenuItemProps, MenuItemInfo } from './MenuItem.types';
 import { memoize } from '@fluentui-react-native/framework';
 import {
   InteractionEvent,
   isKeyPressEvent,
-  useAsPressable,
+  usePressableState,
   useKeyDownProps,
   useViewCommandFocus,
 } from '@fluentui-react-native/interactive-hooks';
@@ -16,7 +16,7 @@ import { useMenuTriggerContext } from '../context/menuTriggerContext';
 export const triggerKeys = [' ', 'Enter'];
 export const submenuTriggerKeys = [...triggerKeys, 'ArrowLeft', 'ArrowRight'];
 
-export const useMenuItem = (props: MenuItemProps): MenuItemState => {
+export const useMenuItem = (props: MenuItemProps): MenuItemInfo => {
   // attach the pressable state handlers
   const defaultComponentRef = React.useRef(null);
   const { onClick, accessibilityState, componentRef = defaultComponentRef, disabled, persistOnClick, ...rest } = props;
@@ -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, onPress: onInvoke });
   const itemRef = useViewCommandFocus(componentRef);
   const keys = isSubmenu ? submenuTriggerKeys : triggerKeys;
 
@@ -70,6 +70,7 @@ export const useMenuItem = (props: MenuItemProps): MenuItemState => {
       accessibilityRole: 'menuitem',
       onAccessibilityTap: props.onAccessibilityTap || onInvoke,
       accessibilityState: getAccessibilityState(disabled, accessibilityState),
+      disabled,
       enableFocusRing: Platform.select({
         macos: false,
         default: !pressable.state.hovered, // win32
@@ -81,9 +82,11 @@ export const useMenuItem = (props: MenuItemProps): MenuItemState => {
       ref: itemRef,
       ...onKeyDownProps,
     },
-    state: pressable.state,
-    hasSubmenu,
-    hasCheckmarks,
+    state: {
+      ...pressable.state,
+      hasSubmenu,
+      hasCheckmarks,
+    },
   };
 };
 

package/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';
@@ -7,7 +7,7 @@ import {
   menuItemCheckboxName,
   MenuItemCheckboxProps,
   MenuItemCheckboxSlotProps,
-  MenuItemCheckboxState,
+  MenuItemCheckboxInfo,
   MenuItemCheckboxType,
 } from './MenuItemCheckbox.types';
 import { useMenuItemCheckbox } from './useMenuItemCheckbox';
@@ -19,7 +19,7 @@ export const MenuItemCheckbox = compose<MenuItemCheckboxType>({
   displayName: menuItemCheckboxName,
   ...stylingSettings,
   slots: {
-    root: View,
+    root: Pressable,
     checkmark: SvgXml,
     content: Text,
   },
@@ -32,7 +32,7 @@ export const MenuItemCheckbox = compose<MenuItemCheckboxType>({
 });
 
 export const menuItemFinalRender = (
-  menuItem: MenuItemCheckboxState,
+  menuItem: MenuItemCheckboxInfo,
   Slots: Slots<MenuItemCheckboxSlotProps>,
 ): React.FunctionComponent<MenuItemCheckboxProps> => {
   return (final: MenuItemCheckboxProps, children: React.ReactNode) => {

package/src/MenuItemCheckbox/MenuItemCheckbox.types.ts

@@ -1,9 +1,8 @@
 import * as React from 'react';
 import { ColorValue } 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 { PressablePropsExtended, PressableState } from '@fluentui-react-native/interactive-hooks';
 import { MenuItemProps, MenuItemTokens } from '../MenuItem/MenuItem.types';
 
 export const menuItemCheckboxName = 'MenuItemCheckbox';
@@ -41,11 +40,13 @@ export interface MenuItemCheckboxProps extends MenuItemProps {
    */
   name: string;
 }
-
-export interface MenuItemCheckboxState extends IPressableHooks<MenuItemCheckboxProps & React.ComponentPropsWithRef<any>> {}
+export interface MenuItemCheckboxInfo {
+  props: MenuItemCheckboxProps & React.ComponentPropsWithRef<any>;
+  state: PressableState;
+}
 
 export interface MenuItemCheckboxSlotProps {
-  root: React.PropsWithRef<IViewProps>;
+  root: React.PropsWithRef<PressablePropsExtended>;
   checkmark?: XmlProps;
   content?: TextProps;
 }

package/src/MenuItemCheckbox/index.ts

@@ -2,7 +2,7 @@ export { MenuItemCheckbox } from './MenuItemCheckbox';
 export { menuItemCheckboxName } from './MenuItemCheckbox.types';
 export type {
   MenuItemCheckboxProps,
-  MenuItemCheckboxState,
+  MenuItemCheckboxInfo,
   MenuItemCheckboxTokens,
   MenuItemCheckboxSlotProps,
   MenuItemCheckboxType,

package/src/MenuItemCheckbox/useMenuItemCheckbox.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { AccessibilityActionEvent, AccessibilityState, I18nManager, Platform } from 'react-native';
-import { MenuItemCheckboxProps, MenuItemCheckboxState } from './MenuItemCheckbox.types';
+import { MenuItemCheckboxProps, MenuItemCheckboxInfo } from './MenuItemCheckbox.types';
 import { memoize } from '@fluentui-react-native/framework';
 import {
   InteractionEvent,
   KeyPressEvent,
-  useAsPressable,
+  usePressableState,
   useKeyDownProps,
   useOnPressWithFocus,
   useViewCommandFocus,
@@ -16,7 +16,7 @@ import { useMenuContext } from '../context/menuContext';
 
 const defaultAccessibilityActions = [{ name: 'Toggle' }];
 
-export const useMenuItemCheckbox = (props: MenuItemCheckboxProps): MenuItemCheckboxState => {
+export const useMenuItemCheckbox = (props: MenuItemCheckboxProps): MenuItemCheckboxInfo => {
   const { disabled, name } = props;
   const context = useMenuListContext();
   const checked = context.checked?.[name];
@@ -53,7 +53,7 @@ function getAccessibilityStateWorker(disabled: boolean, checked: boolean, access
 export const useMenuCheckboxInteraction = (
   props: MenuItemCheckboxProps,
   toggleCallback: (e: InteractionEvent) => void,
-): MenuItemCheckboxState => {
+): MenuItemCheckboxInfo => {
   const defaultComponentRef = React.useRef(null);
   const {
     accessibilityActions,
@@ -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, onPress: toggleCheckedWithFocus });
   const buttonRef = useViewCommandFocus(componentRef);
 
   const onKeysPressed = React.useCallback(
@@ -117,8 +117,8 @@ export const useMenuCheckboxInteraction = (
 
   const state = {
     ...pressable.state,
-    disabled: !!props.disabled,
     checked: isChecked,
+    disabled,
   };
 
   return {
@@ -129,6 +129,7 @@ export const useMenuCheckboxInteraction = (
       accessibilityLabel,
       accessibilityRole: 'menuitem',
       accessibilityState: getAccessibilityState(disabled, state.checked, accessibilityState),
+      disabled,
       enableFocusRing: Platform.select({
         macos: false,
         default: !pressable.state.hovered, // win32

package/src/MenuItemRadio/useMenuItemRadio.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { InteractionEvent } from '@fluentui-react-native/interactive-hooks';
 import { useMenuListContext } from '../context/menuListContext';
-import { MenuItemCheckboxProps, MenuItemCheckboxState } from '../MenuItemCheckbox/MenuItemCheckbox.types';
+import { MenuItemCheckboxProps, MenuItemCheckboxInfo } from '../MenuItemCheckbox/MenuItemCheckbox.types';
 import { useMenuCheckboxInteraction } from '../MenuItemCheckbox/useMenuItemCheckbox';
 import { useMenuContext } from '../context/menuContext';
 
-export const useMenuItemRadio = (props: MenuItemCheckboxProps): MenuItemCheckboxState => {
+export const useMenuItemRadio = (props: MenuItemCheckboxProps): MenuItemCheckboxInfo => {
   const { disabled, name, persistOnClick } = props;
   const context = useMenuContext();
   const listContext = useMenuListContext();

package/src/MenuTrigger/MenuTrigger.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { memoize, stagedComponent } from '@fluentui-react-native/framework';
-import { menuTriggerName, MenuTriggerChildProps, MenuTriggerState } from './MenuTrigger.types';
+import { stagedComponent } from '@fluentui-react-native/framework';
+import { menuTriggerName } from './MenuTrigger.types';
 import { useMenuTrigger } from './useMenuTrigger';
-import { AccessibilityActionEvent } from 'react-native';
 import { MenuTriggerProvider } from '../context/menuTriggerContext';
+import { getRevisedProps } from './getRevisedProps';
 
 export const MenuTrigger = stagedComponent((_props: React.PropsWithChildren<Record<never, any>>) => {
   const menuTrigger = useMenuTrigger();
@@ -29,25 +29,4 @@ export const MenuTrigger = stagedComponent((_props: React.PropsWithChildren<Reco
 });
 MenuTrigger.displayName = menuTriggerName;
 
-const getRevisedProps = memoize(getRevisedPropsWorker);
-function getRevisedPropsWorker(state: MenuTriggerState, props: any): MenuTriggerChildProps {
-  const revisedProps = state.props;
-  if (props.accessibilityState) {
-    revisedProps.accessibilityState = { ...revisedProps.accessibilityState, ...props.accessibilityState };
-  }
-
-  if (props.accessibilityActions) {
-    revisedProps.accessibilityActions = [...revisedProps.accessibilityActions, ...props.accessibilityActions];
-  }
-
-  if (props.onAccessibilityAction) {
-    revisedProps.onAccessibilityAction = (e: AccessibilityActionEvent) => {
-      revisedProps.onAccessibilityAction(e);
-      props.onAccessibilityAction(e);
-    };
-  }
-
-  return revisedProps;
-}
-
 export default MenuTrigger;

package/src/MenuTrigger/getRevisedProps.ts

@@ -0,0 +1,54 @@
+import { AccessibilityActionEvent } from 'react-native';
+import { memoize } from '@fluentui-react-native/framework';
+import { InteractionEvent, isMouseEvent } from '@fluentui-react-native/interactive-hooks';
+import { MenuTriggerChildProps, MenuTriggerState } from './MenuTrigger.types';
+
+/**
+ * Creates a merged set of props between the MenuTrigger's child component's props
+ * and the props that the MenuTrigger wants its child to have.
+ *
+ * Because children are not accessible in the outer render, we deal with the merge in this function.
+ */
+export const getRevisedProps = memoize(getRevisedPropsWorker);
+function getRevisedPropsWorker(state: MenuTriggerState, props: any): MenuTriggerChildProps {
+  const revisedProps = { ...state.props };
+  if (props.accessibilityState) {
+    revisedProps.accessibilityState = { ...state.props.accessibilityState, ...props.accessibilityState };
+  }
+
+  if (props.accessibilityActions) {
+    revisedProps.accessibilityActions = [...state.props.accessibilityActions, ...props.accessibilityActions];
+  }
+
+  if (props.onAccessibilityAction) {
+    revisedProps.onAccessibilityAction = (e: AccessibilityActionEvent) => {
+      state.props.onAccessibilityAction(e);
+      props.onAccessibilityAction(e);
+    };
+  }
+
+  if (props.onClick) {
+    revisedProps.onClick = (e: InteractionEvent) => {
+      state.props.onClick(e);
+      props.onClick(e);
+    };
+  }
+
+  let onHoverIn = undefined;
+  if (props.onHoverIn) {
+    onHoverIn = (e: InteractionEvent) => {
+      state.props.onHoverIn(isMouseEvent(e) && e);
+      props.onHoverIn(e);
+    };
+  }
+
+  let onHoverOut = undefined;
+  if (props.onHoverOut) {
+    onHoverOut = (e: InteractionEvent) => {
+      state.props.onHoverOut(isMouseEvent(e) && e);
+      props.onHoverOut(e);
+    };
+  }
+
+  return { ...revisedProps, onHoverIn, onHoverOut };
+}

package/src/__tests__/__snapshots__/Menu.test.tsx.snap

@@ -171,13 +171,13 @@ Array [
             }
           }
           accessible={true}
+          collapsable={false}
           enableFocusRing={true}
           focusable={true}
           onAccessibilityTap={[Function]}
           onBlur={[Function]}
           onClick={[Function]}
           onFocus={[Function]}
-          onPress={[Function]}
           onResponderGrant={[Function]}
           onResponderMove={[Function]}
           onResponderRelease={[Function]}
@@ -224,14 +224,13 @@ Array [
             }
           }
           accessible={true}
-          disabled={true}
+          collapsable={false}
           enableFocusRing={true}
           focusable={true}
           onAccessibilityTap={[Function]}
           onBlur={[Function]}
           onClick={[Function]}
           onFocus={[Function]}
-          onPress={[Function]}
           onResponderGrant={[Function]}
           onResponderMove={[Function]}
           onResponderRelease={[Function]}
@@ -388,13 +387,13 @@ Array [
             }
           }
           accessible={true}
+          collapsable={false}
           enableFocusRing={true}
           focusable={true}
           onAccessibilityTap={[Function]}
           onBlur={[Function]}
           onClick={[Function]}
           onFocus={[Function]}
-          onPress={[Function]}
           onResponderGrant={[Function]}
           onResponderMove={[Function]}
           onResponderRelease={[Function]}
@@ -558,13 +557,13 @@ Array [
             }
           }
           accessible={true}
+          collapsable={false}
           enableFocusRing={true}
           focusable={true}
           onAccessibilityAction={[Function]}
           onBlur={[Function]}
           onClick={[Function]}
           onFocus={[Function]}
-          onPress={[Function]}
           onResponderGrant={[Function]}
           onResponderMove={[Function]}
           onResponderRelease={[Function]}
@@ -683,14 +682,13 @@ Array [
             }
           }
           accessible={true}
-          disabled={true}
+          collapsable={false}
           enableFocusRing={true}
           focusable={true}
           onAccessibilityAction={[Function]}
           onBlur={[Function]}
           onClick={[Function]}
           onFocus={[Function]}
-          onPress={[Function]}
           onResponderGrant={[Function]}
           onResponderMove={[Function]}
           onResponderRelease={[Function]}
@@ -907,13 +905,13 @@ Array [
             }
           }
           accessible={true}
+          collapsable={false}
           enableFocusRing={true}
           focusable={true}
           onAccessibilityAction={[Function]}
           onBlur={[Function]}
           onClick={[Function]}
           onFocus={[Function]}
-          onPress={[Function]}
           onResponderGrant={[Function]}
           onResponderMove={[Function]}
           onResponderRelease={[Function]}
@@ -1032,13 +1030,13 @@ Array [
             }
           }
           accessible={true}
+          collapsable={false}
           enableFocusRing={true}
           focusable={true}
           onAccessibilityAction={[Function]}
           onBlur={[Function]}
           onClick={[Function]}
           onFocus={[Function]}
-          onPress={[Function]}
           onResponderGrant={[Function]}
           onResponderMove={[Function]}
           onResponderRelease={[Function]}
@@ -1255,13 +1253,13 @@ Array [
             }
           }
           accessible={true}
+          collapsable={false}
           enableFocusRing={true}
           focusable={true}
           onAccessibilityAction={[Function]}
           onBlur={[Function]}
           onClick={[Function]}
           onFocus={[Function]}
-          onPress={[Function]}
           onResponderGrant={[Function]}
           onResponderMove={[Function]}
           onResponderRelease={[Function]}
@@ -1380,13 +1378,13 @@ Array [
             }
           }
           accessible={true}
+          collapsable={false}
           enableFocusRing={true}
           focusable={true}
           onAccessibilityAction={[Function]}
           onBlur={[Function]}
           onClick={[Function]}
           onFocus={[Function]}
-          onPress={[Function]}
           onResponderGrant={[Function]}
           onResponderMove={[Function]}
           onResponderRelease={[Function]}
@@ -1603,13 +1601,13 @@ Array [
             }
           }
           accessible={true}
+          collapsable={false}
           enableFocusRing={true}
           focusable={true}
           onAccessibilityAction={[Function]}
           onBlur={[Function]}
           onClick={[Function]}
           onFocus={[Function]}
-          onPress={[Function]}
           onResponderGrant={[Function]}
           onResponderMove={[Function]}
           onResponderRelease={[Function]}
@@ -1716,13 +1714,13 @@ Array [
             }
           }
           accessible={true}
+          collapsable={false}
           enableFocusRing={true}
           focusable={true}
           onAccessibilityAction={[Function]}
           onBlur={[Function]}
           onClick={[Function]}
           onFocus={[Function]}
-          onPress={[Function]}
           onResponderGrant={[Function]}
           onResponderMove={[Function]}
           onResponderRelease={[Function]}
@@ -1931,13 +1929,13 @@ Array [
             }
           }
           accessible={true}
+          collapsable={false}
           enableFocusRing={true}
           focusable={true}
           onAccessibilityTap={[Function]}
           onBlur={[Function]}
           onClick={[Function]}
           onFocus={[Function]}
-          onPress={[Function]}
           onResponderGrant={[Function]}
           onResponderMove={[Function]}
           onResponderRelease={[Function]}
@@ -1986,6 +1984,7 @@ Array [
             }
           }
           accessible={true}
+          collapsable={false}
           enableFocusRing={true}
           focusable={true}
           onAccessibilityAction={[Function]}
@@ -1993,9 +1992,6 @@ Array [
           onBlur={[Function]}
           onClick={[Function]}
           onFocus={[Function]}
-          onHoverIn={[Function]}
-          onHoverOut={[Function]}
-          onPress={[Function]}
           onResponderGrant={[Function]}
           onResponderMove={[Function]}
           onResponderRelease={[Function]}

package/src/index.ts

@@ -18,8 +18,9 @@ export {
   MenuItem,
   menuItemName,
   MenuItemProps,
-  MenuItemSlotProps,
   MenuItemState,
+  MenuItemInfo,
+  MenuItemSlotProps,
   MenuItemTokens,
   MenuItemType,
   useMenuItem,
@@ -28,8 +29,8 @@ export {
   MenuItemCheckbox,
   menuItemCheckboxName,
   MenuItemCheckboxProps,
+  MenuItemCheckboxInfo,
   MenuItemCheckboxSlotProps,
-  MenuItemCheckboxState,
   MenuItemCheckboxTokens,
   MenuItemCheckboxType,
   useMenuCheckboxInteraction,