@fluentui-react-native/menu 0.12.0 → 0.14.0

package/src/MenuItem/useMenuItem.ts

@@ -1,20 +1,60 @@
 import * as React from 'react';
-import { AccessibilityState } from 'react-native';
+import { AccessibilityState, I18nManager } from 'react-native';
 import { MenuItemProps, MenuItemState } from './MenuItem.types';
 import { memoize } from '@fluentui-react-native/framework';
-import { useAsPressable, useKeyProps } from '@fluentui-react-native/interactive-hooks';
+import { InteractionEvent, isKeyPressEvent, useAsPressable, useKeyDownProps } from '@fluentui-react-native/interactive-hooks';
 import { useMenuContext } from '../context/menuContext';
 import { useMenuListContext } from '../context/menuListContext';
 import { useMenuTriggerContext } from '../context/menuTriggerContext';
 
+const triggerKeys = [' ', 'Enter'];
+const submenuTriggerKeys = [...triggerKeys, 'ArrowLeft', 'ArrowRight'];
+
 export const useMenuItem = (props: MenuItemProps): MenuItemState => {
   // attach the pressable state handlers
   const defaultComponentRef = React.useRef(null);
   const { onClick, accessibilityState, componentRef = defaultComponentRef, disabled, ...rest } = props;
-  const pressable = useAsPressable({ ...rest, disabled, onPress: onClick });
-  const onKeyProps = useKeyProps(onClick, ' ', 'Enter');
   const isTrigger = useMenuTriggerContext();
-  const hasSubmenu = useMenuContext().isSubmenu && isTrigger;
+  const isSubmenu = useMenuContext().isSubmenu;
+  const hasSubmenu = isSubmenu && isTrigger;
+  const isInSubmenu = isSubmenu && !isTrigger;
+
+  const setOpen = useMenuContext().setOpen;
+  const onInvoke = React.useCallback(
+    (e: InteractionEvent) => {
+      if (disabled) {
+        return;
+      }
+
+      const isRtl = I18nManager.isRTL;
+      if (
+        isKeyPressEvent(e) &&
+        hasSubmenu &&
+        ((isRtl && e.nativeEvent.key === 'ArrowRight') || (!isRtl && e.nativeEvent.key === 'ArrowLeft'))
+      ) {
+        return;
+      }
+      if (
+        isKeyPressEvent(e) &&
+        isInSubmenu &&
+        ((isRtl && e.nativeEvent.key === 'ArrowLeft') || (!isRtl && e.nativeEvent.key === 'ArrowRight'))
+      ) {
+        return;
+      }
+
+      onClick?.(e);
+      if (!hasSubmenu) {
+        setOpen(e, false /*isOpen*/);
+      }
+    },
+    [disabled, hasSubmenu, isInSubmenu, onClick, setOpen],
+  );
+
+  const pressable = useAsPressable({ ...rest, disabled, onPress: onInvoke });
+  const keys = isSubmenu ? submenuTriggerKeys : triggerKeys;
+
+  // Explicitly override onKeyDown to override the native behavior of moving focus with arrow keys.
+  const onKeyDownProps = useKeyDownProps(onInvoke, ...keys);
   const hasCheckmarks = useMenuListContext().hasCheckmarks;
 
   return {
@@ -22,13 +62,13 @@ export const useMenuItem = (props: MenuItemProps): MenuItemState => {
       ...pressable.props,
       accessible: true,
       accessibilityRole: 'menuitem',
-      onAccessibilityTap: props.onAccessibilityTap || props.onClick,
+      onAccessibilityTap: props.onAccessibilityTap || onInvoke,
       accessibilityLabel: props.accessibilityLabel || props.content,
       accessibilityState: getAccessibilityState(disabled, accessibilityState),
       enableFocusRing: true,
-      focusable: !disabled,
+      focusable: true,
       ref: componentRef,
-      ...onKeyProps,
+      ...onKeyDownProps,
     },
     state: pressable.state,
     hasSubmenu,

package/src/MenuItemCheckbox/MenuItemCheckbox.tsx

@@ -23,7 +23,7 @@ export const MenuItemCheckbox = compose<MenuItemCheckboxType>({
   },
   useRender: (userProps: MenuItemCheckboxProps, useSlots: UseSlots<MenuItemCheckboxType>) => {
     const menuItem = useMenuItemCheckbox(userProps);
-    const Slots = useSlots(userProps, (layer): boolean => menuItem.state[layer]);
+    const Slots = useSlots(userProps, (layer): boolean => menuItem.state[layer] || userProps[layer]);
 
     return menuItemFinalRender(menuItem, Slots);
   },

package/src/MenuItemCheckbox/useMenuItemCheckbox.ts

@@ -14,16 +14,18 @@ import { useMenuListContext } from '../context/menuListContext';
 const defaultAccessibilityActions = [{ name: 'Toggle' }];
 
 export const useMenuItemCheckbox = (props: MenuItemCheckboxProps): MenuItemCheckboxState => {
-  const { name } = props;
+  const { disabled, name } = props;
   const context = useMenuListContext();
   const checked = context.checked?.[name];
   const onCheckedChange = context.onCheckedChange;
 
   const toggleChecked = React.useCallback(
     (e: InteractionEvent) => {
-      onCheckedChange(e, name, !checked);
+      if (!disabled) {
+        onCheckedChange(e, name, !checked);
+      }
     },
-    [checked, name, onCheckedChange],
+    [checked, disabled, name, onCheckedChange],
   );
 
   return useMenuCheckboxInteraction(props, toggleChecked);
@@ -74,12 +76,14 @@ export const useMenuCheckboxInteraction = (
     : defaultAccessibilityActions;
   const onAccessibilityActionProp = React.useCallback(
     (event: AccessibilityActionEvent) => {
-      if (event.nativeEvent.actionName === 'Toggle') {
-        toggleCallback(event);
+      if (!disabled) {
+        if (event.nativeEvent.actionName === 'Toggle') {
+          toggleCallback(event);
+        }
+        onAccessibilityAction && onAccessibilityAction(event);
       }
-      onAccessibilityAction && onAccessibilityAction(event);
     },
-    [toggleCallback, onAccessibilityAction],
+    [disabled, toggleCallback, onAccessibilityAction],
   );
 
   const state = {
@@ -97,7 +101,7 @@ export const useMenuCheckboxInteraction = (
       accessibilityRole: 'menuitem',
       accessibilityState: getAccessibilityState(disabled, state.checked, accessibilityState),
       enableFocusRing: true,
-      focusable: !disabled,
+      focusable: true,
       onAccessibilityAction: onAccessibilityActionProp,
       ref: buttonRef,
       ...onKeyProps,

package/src/MenuItemRadio/useMenuItemRadio.ts

@@ -5,16 +5,18 @@ import { MenuItemCheckboxProps, MenuItemCheckboxState } from '../MenuItemCheckbo
 import { useMenuCheckboxInteraction } from '../MenuItemCheckbox/useMenuItemCheckbox';
 
 export const useMenuItemRadio = (props: MenuItemCheckboxProps): MenuItemCheckboxState => {
-  const { name } = props;
+  const { disabled, name } = props;
   const context = useMenuListContext();
   const checked = context.checked?.[name];
   const selectRadio = context.selectRadio;
 
   const toggleChecked = React.useCallback(
     (e: InteractionEvent) => {
-      selectRadio(e, name, !checked);
+      if (!disabled) {
+        selectRadio(e, name, !checked);
+      }
     },
-    [checked, name, selectRadio],
+    [checked, disabled, name, selectRadio],
   );
 
   return useMenuCheckboxInteraction(props, toggleChecked);

package/src/MenuPopover/MenuPopover.tsx

@@ -1,27 +1,20 @@
 import React from 'react';
-import { stagedComponent, useFluentTheme } from '@fluentui-react-native/framework';
+import { mergeProps, stagedComponent, useFluentTheme } from '@fluentui-react-native/framework';
 import { Callout } from '@fluentui-react-native/callout';
 import { menuPopoverName, MenuPopoverProps } from './MenuPopover.types';
 import { useMenuPopover } from './useMenuPopover';
+import { View } from 'react-native';
 
 export const MenuPopover = stagedComponent((props: MenuPopoverProps) => {
   const state = useMenuPopover(props);
   const theme = useFluentTheme();
 
-  return (_rest: MenuPopoverProps, children: React.ReactNode) => {
+  return (final: MenuPopoverProps, children: React.ReactNode) => {
+    const mergedProps = mergeProps(state.props, final);
+    const content = React.createElement(View, state.innerView, children);
     return (
-      <Callout
-        accessibilityRole={state.accessibilityRole}
-        borderWidth={1}
-        borderColor={theme.colors.neutralStrokeAccessible}
-        target={state.triggerRef}
-        onDismiss={state.onDismiss}
-        dismissBehaviors={state.dismissBehaviors}
-        setInitialFocus={state.setInitialFocus}
-        directionalHint={state.directionalHint}
-        doNotTakePointerCapture={state.doNotTakePointerCapture}
-      >
-        {children}
+      <Callout borderWidth={1} borderColor={theme.colors.neutralStrokeAccessible} {...mergedProps}>
+        {content}
       </Callout>
     );
   };

package/src/MenuPopover/MenuPopover.types.ts

@@ -1,16 +1,11 @@
-import { DirectionalHint, DismissBehaviors, ICalloutProps } from '@fluentui-react-native/callout';
-import { AccessibilityRole } from 'react-native';
+import { IViewProps } from '@fluentui-react-native/adapters';
+import { ICalloutProps } from '@fluentui-react-native/callout';
 
 export const menuPopoverName = 'MenuPopover';
 
 export type MenuPopoverProps = ICalloutProps;
 
 export interface MenuPopoverState {
-  accessibilityRole: AccessibilityRole;
-  directionalHint?: DirectionalHint;
-  dismissBehaviors: DismissBehaviors[];
-  doNotTakePointerCapture: boolean;
-  onDismiss: () => void;
-  setInitialFocus: boolean;
-  triggerRef: React.RefObject<React.Component>;
+  props: ICalloutProps;
+  innerView: IViewProps;
 }

package/src/MenuPopover/useMenuPopover.ts

@@ -3,25 +3,65 @@ import { I18nManager, Platform } from 'react-native';
 import { DirectionalHint, DismissBehaviors } from '@fluentui-react-native/callout';
 import { useMenuContext } from '../context/menuContext';
 import { MenuPopoverProps, MenuPopoverState } from './MenuPopover.types';
+import { isCloseOnHoverOutEnabled } from '../consts';
+
+const controlledDismissBehaviors = ['preventDismissOnKeyDown', 'preventDismissOnClickOutside'] as DismissBehaviors[];
 
 export const useMenuPopover = (_props: MenuPopoverProps): MenuPopoverState => {
   const context = useMenuContext();
-  const setOpen = context.setOpen;
+  const {
+    setOpen,
+    triggerRef,
+    isControlled,
+    isSubmenu,
+    openOnHover,
+    parentPopoverHoverOutTimer,
+    popoverHoverOutTimer,
+    setPopoverHoverOutTimer,
+    triggerHoverOutTimer,
+  } = context;
 
-  const triggerRef = context.triggerRef;
   const onDismiss = React.useCallback(() => setOpen(undefined, false /* isOpen */), [setOpen]);
-  const dismissBehaviors = context.isControlled
-    ? (['preventDismissOnKeyDown', 'preventDismissOnClickOutside'] as DismissBehaviors[])
-    : undefined;
-  const directionalHint = getDirectionalHint(context.isSubmenu, I18nManager.isRTL);
+  const dismissBehaviors = isControlled ? controlledDismissBehaviors : undefined;
+  const directionalHint = getDirectionalHint(isSubmenu, I18nManager.isRTL);
 
   // Initial focus behavior differs per platform, Windows platforms move focus
   // automatically onto first element of Callout
   const setInitialFocus = Platform.OS === ('win32' as any) || Platform.OS === 'windows';
-  const doNotTakePointerCapture = context.openOnHover;
+  const doNotTakePointerCapture = openOnHover;
   const accessibilityRole = 'menu';
 
-  return { accessibilityRole, triggerRef, onDismiss, directionalHint, dismissBehaviors, doNotTakePointerCapture, setInitialFocus };
+  const onMouseEnter = React.useCallback(() => {
+    clearTimeout(triggerHoverOutTimer);
+    clearTimeout(popoverHoverOutTimer);
+    clearTimeout(parentPopoverHoverOutTimer);
+  }, [parentPopoverHoverOutTimer, popoverHoverOutTimer, triggerHoverOutTimer]);
+  const onMouseLeave = React.useCallback(() => {
+    if (!openOnHover) {
+      return;
+    }
+
+    const timer = setTimeout(() => {
+      setOpen(undefined, false /* isOpen */);
+    }, 500);
+    setPopoverHoverOutTimer(timer);
+  }, [openOnHover, setOpen, setPopoverHoverOutTimer]);
+
+  return {
+    props: {
+      accessibilityRole,
+      target: triggerRef,
+      onDismiss,
+      directionalHint,
+      dismissBehaviors,
+      doNotTakePointerCapture,
+      setInitialFocus,
+    },
+    innerView: {
+      onMouseEnter,
+      onMouseLeave: isCloseOnHoverOutEnabled && onMouseLeave,
+    },
+  };
 };
 
 const getDirectionalHint = (isSubmenu: boolean, isRtl: boolean): DirectionalHint | undefined => {

package/src/MenuTrigger/MenuTrigger.tsx

@@ -21,8 +21,8 @@ export const MenuTrigger = stagedComponent((props: MenuTriggerProps) => {
     // child component which may affect accessibility, we need to modify the
     // state in the inner render so we can access the child component and its props.
     const child = childrenArray[0];
-    const revisedState = getRevisedState(menuTrigger, child.props);
-    const revised = React.cloneElement(child, revisedState);
+    const revisedProps = getRevisedState(menuTrigger, child.props);
+    const revised = React.cloneElement(child, revisedProps);
 
     return <MenuTriggerProvider value={menuTrigger.hasSubmenu}>{revised}</MenuTriggerProvider>;
   };
@@ -30,24 +30,24 @@ export const MenuTrigger = stagedComponent((props: MenuTriggerProps) => {
 MenuTrigger.displayName = menuTriggerName;
 
 const getRevisedState = memoize(getRevisedStateWorker);
-function getRevisedStateWorker(state: MenuTriggerState, props: any): MenuTriggerState {
-  const revisedState = { ...state };
+function getRevisedStateWorker(state: MenuTriggerState, props: any): MenuTriggerProps {
+  const revisedProps = state.props;
   if (props.accessibilityState) {
-    revisedState.props.accessibilityState = { ...state.props.accessibilityState, ...props.accessibilityState };
+    revisedProps.accessibilityState = { ...revisedProps.accessibilityState, ...props.accessibilityState };
   }
 
   if (props.accessibilityActions) {
-    revisedState.props.accessibilityActions = { ...state.props.accessibilityActions, ...props.accessibilityActions };
+    revisedProps.accessibilityActions = { ...revisedProps.accessibilityActions, ...props.accessibilityActions };
   }
 
   if (props.onAccessibilityAction) {
-    revisedState.props.onAccessibilityAction = (e: AccessibilityActionEvent) => {
-      state.props.onAccessibilityAction(e);
+    revisedProps.onAccessibilityAction = (e: AccessibilityActionEvent) => {
+      revisedProps.onAccessibilityAction(e);
       props.onAccessibilityAction(e);
     };
   }
 
-  return revisedState;
+  return revisedProps;
 }
 
 export default MenuTrigger;

package/src/MenuTrigger/useMenuTrigger.ts

@@ -3,18 +3,19 @@ import { InteractionEvent } from '@fluentui-react-native/interactive-hooks';
 import { MenuTriggerProps, MenuTriggerState } from './MenuTrigger.types';
 import { AccessibilityActionEvent, AccessibilityActionName, Platform } from 'react-native';
 import React from 'react';
+import { delayHover, isCloseOnHoverOutEnabled } from '../consts';
 
 const accessibilityActions =
   Platform.OS === ('win32' as any) ? [{ name: 'Expand' as AccessibilityActionName }, { name: 'Collapse' as AccessibilityActionName }] : [];
+const expandedState = { expanded: true };
+const collapsedState = { expanded: false };
 
 export const useMenuTrigger = (_props: MenuTriggerProps): MenuTriggerState => {
   const context = useMenuContext();
+  const { open, openOnHover, popoverHoverOutTimer, setOpen, setTriggerHoverOutTimer, triggerHoverOutTimer, triggerRef } = context;
+
+  const accessibilityState = open ? expandedState : collapsedState;
 
-  const setOpen = context.setOpen;
-  const open = context.open;
-  const openOnHover = context.openOnHover;
-  const triggerRef = context.triggerRef;
-  const accessibilityState = context.open ? { expanded: true } : { expanded: false };
   const onAccessibilityAction = React.useCallback(
     (e: AccessibilityActionEvent) => {
       if (Platform.OS === ('win32' as any)) {
@@ -32,35 +33,44 @@ export const useMenuTrigger = (_props: MenuTriggerProps): MenuTriggerState => {
     [setOpen],
   );
 
-  const delayHover = Platform.select({
-    macos: 100,
-    default: 500, // win32
-  });
-
-  const onHoverIn = (e: InteractionEvent) => {
-    if (openOnHover) {
-      setOpen(e, true /* isOpen */);
-    }
-  };
+  const onHoverIn = React.useCallback(
+    (e: InteractionEvent) => {
+      if (openOnHover) {
+        clearTimeout(popoverHoverOutTimer);
+        clearTimeout(triggerHoverOutTimer);
+        setTimeout(() => {
+          setOpen(e, true /* isOpen */);
+        }, delayHover);
+      }
+    },
+    [openOnHover, setOpen, triggerHoverOutTimer, popoverHoverOutTimer],
+  );
 
-  const onHoverOut = (e: InteractionEvent) => {
-    if (openOnHover) {
-      setOpen(e, false /* isOpen */);
-    }
-  };
+  const onHoverOut = React.useCallback(
+    (e: InteractionEvent) => {
+      if (openOnHover) {
+        const timer = setTimeout(() => {
+          setOpen(e, false /* isOpen */);
+        }, delayHover);
+        setTriggerHoverOutTimer(timer);
+      }
+    },
+    [openOnHover, setOpen, setTriggerHoverOutTimer],
+  );
 
-  const onClick = (e: InteractionEvent) => {
-    setOpen(e, !open);
-  };
+  const onClick = React.useCallback(
+    (e: InteractionEvent) => {
+      setOpen(e, !open);
+    },
+    [open, setOpen],
+  );
 
   return {
     props: {
       onClick,
       onHoverIn,
-      onHoverOut: Platform.OS === ('win32' as any) && onHoverOut,
+      onHoverOut: isCloseOnHoverOutEnabled && onHoverOut,
       componentRef: triggerRef,
-      delayHoverIn: delayHover,
-      delayHoverOut: Platform.OS === ('win32' as any) && delayHover,
       accessibilityState,
       accessibilityActions,
       onAccessibilityAction,

package/src/__tests__/Menu.test.tsx

@@ -0,0 +1,235 @@
+import * as React from 'react';
+import { AccessibilityActionName } from 'react-native';
+import * as renderer from 'react-test-renderer';
+import { Menu } from '../Menu/Menu';
+import { checkReRender } from '@fluentui-react-native/test-tools';
+import MenuTrigger from '../MenuTrigger/MenuTrigger';
+import { ButtonV1 as Button } from '@fluentui-react-native/button';
+import MenuPopover from '../MenuPopover/MenuPopover';
+import { MenuList } from '../MenuList/MenuList';
+import { MenuItem } from '../MenuItem/MenuItem';
+import { MenuItemCheckbox } from '../MenuItemCheckbox/MenuItemCheckbox';
+import { MenuDivider } from '../MenuDivider/MenuDivider';
+import { MenuItemRadio } from '../MenuItemRadio/MenuItemRadio';
+
+describe('Checkbox component tests', () => {
+  it('Menu default', () => {
+    const tree = renderer
+      .create(
+        <Menu>
+          <MenuTrigger>
+            <Button>Default</Button>
+          </MenuTrigger>
+          <MenuPopover>
+            <MenuList>
+              <MenuItem content="Option 1" />
+            </MenuList>
+          </MenuPopover>
+        </Menu>,
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('Menu open', () => {
+    const tree = renderer
+      .create(
+        <Menu open>
+          <MenuTrigger>
+            <Button>Open</Button>
+          </MenuTrigger>
+          <MenuPopover>
+            <MenuList>
+              <MenuItem content="Option 1" />
+            </MenuList>
+          </MenuPopover>
+        </Menu>,
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('Menu defaultOpen', () => {
+    const tree = renderer
+      .create(
+        <Menu defaultOpen>
+          <MenuTrigger>
+            <Button>Open</Button>
+          </MenuTrigger>
+          <MenuPopover>
+            <MenuList>
+              <MenuItem content="Option 1" />
+              <MenuItem disabled content="Option 2" />
+            </MenuList>
+          </MenuPopover>
+        </Menu>,
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('Menu open checkbox and divider', () => {
+    const tree = renderer
+      .create(
+        <Menu open>
+          <MenuTrigger>
+            <Button>Open</Button>
+          </MenuTrigger>
+          <MenuPopover>
+            <MenuList>
+              <MenuItemCheckbox content="Option 1" name="Option 1" />
+              <MenuDivider />
+              <MenuItemCheckbox disabled content="Option 2" name="Option 2" />
+            </MenuList>
+          </MenuPopover>
+        </Menu>,
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('Menu open radio', () => {
+    const tree = renderer
+      .create(
+        <Menu open>
+          <MenuTrigger>
+            <Button>Open</Button>
+          </MenuTrigger>
+          <MenuPopover>
+            <MenuList>
+              <MenuItemRadio content="Option 1" name="Option 1" />
+              <MenuItemRadio content="Option 2" name="Option 2" />
+            </MenuList>
+          </MenuPopover>
+        </Menu>,
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('Menu open checkbox defaultChecked', () => {
+    const tree = renderer
+      .create(
+        <Menu open defaultChecked={{ 'Option 1': true }}>
+          <MenuTrigger>
+            <Button>Open</Button>
+          </MenuTrigger>
+          <MenuPopover>
+            <MenuList>
+              <MenuItemCheckbox content="Option 1" name="Option 1" />
+              <MenuDivider />
+              <MenuItemCheckbox content="Option 2" name="Option 2" />
+            </MenuList>
+          </MenuPopover>
+        </Menu>,
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('Menu open checkbox checked', () => {
+    const tree = renderer
+      .create(
+        <Menu open checked={{ 'Option 1': true }}>
+          <MenuTrigger>
+            <Button>Open</Button>
+          </MenuTrigger>
+          <MenuPopover>
+            <MenuList>
+              <MenuItemCheckbox content="Option 1" name="Option 1" />
+              <MenuDivider />
+              <MenuItemCheckbox content="Option 2" name="Option 2" />
+            </MenuList>
+          </MenuPopover>
+        </Menu>,
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('Menu submenu', () => {
+    const tree = renderer
+      .create(
+        <Menu open>
+          <MenuTrigger>
+            <Button>Default</Button>
+          </MenuTrigger>
+          <MenuPopover>
+            <MenuList>
+              <MenuItem content="Option 1" />
+              <Menu>
+                <MenuTrigger>
+                  <MenuItem content="Option 2" />
+                </MenuTrigger>
+                <MenuPopover>
+                  <MenuList>
+                    <MenuItem content="Option 1" />
+                  </MenuList>
+                </MenuPopover>
+              </Menu>
+            </MenuList>
+          </MenuPopover>
+        </Menu>,
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});
+
+describe('Menu rerender tests', () => {
+  it('Menu re-renders correctly', () => {
+    checkReRender(
+      () => (
+        <Menu open>
+          <MenuTrigger>
+            <Button>Rerender twice</Button>
+          </MenuTrigger>
+          <MenuPopover>
+            <MenuList>
+              <MenuItem content="Option 1" />
+            </MenuList>
+          </MenuPopover>
+        </Menu>
+      ),
+      3,
+    );
+  });
+
+  it('Menu re-renders correctly with style', () => {
+    const style = { backgroundColor: 'black' };
+    checkReRender(
+      () => (
+        <Menu>
+          <MenuTrigger>
+            <Button style={style}>Rerender twice</Button>
+          </MenuTrigger>
+          <MenuPopover>
+            <MenuList>
+              <MenuItem content="Option 1" />
+            </MenuList>
+          </MenuPopover>
+        </Menu>
+      ),
+      3,
+    );
+  });
+
+  it('Menu re-renders correctly with accessibilityAction', () => {
+    const action = [{ name: 'Expand' as AccessibilityActionName }];
+    checkReRender(
+      () => (
+        <Menu>
+          <MenuTrigger>
+            <Button>Rerender twice</Button>
+          </MenuTrigger>
+          <MenuPopover>
+            <MenuList>
+              <MenuItem accessibilityActions={action} content="Option 1" />
+            </MenuList>
+          </MenuPopover>
+        </Menu>
+      ),
+      3,
+    );
+  });
+});