@fluentui-react-native/menu 0.13.0 → 0.14.1

package/lib-commonjs/__tests__/Menu.test.js

@@ -0,0 +1,148 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var React = (0, tslib_1.__importStar)(require("react"));
+var renderer = (0, tslib_1.__importStar)(require("react-test-renderer"));
+var Menu_1 = require("../Menu/Menu");
+var test_tools_1 = require("@fluentui-react-native/test-tools");
+var MenuTrigger_1 = (0, tslib_1.__importDefault)(require("../MenuTrigger/MenuTrigger"));
+var button_1 = require("@fluentui-react-native/button");
+var MenuPopover_1 = (0, tslib_1.__importDefault)(require("../MenuPopover/MenuPopover"));
+var MenuList_1 = require("../MenuList/MenuList");
+var MenuItem_1 = require("../MenuItem/MenuItem");
+var MenuItemCheckbox_1 = require("../MenuItemCheckbox/MenuItemCheckbox");
+var MenuDivider_1 = require("../MenuDivider/MenuDivider");
+var MenuItemRadio_1 = require("../MenuItemRadio/MenuItemRadio");
+describe('Checkbox component tests', function () {
+    it('Menu default', function () {
+        var tree = renderer
+            .create(React.createElement(Menu_1.Menu, null,
+            React.createElement(MenuTrigger_1.default, null,
+                React.createElement(button_1.ButtonV1, null, "Default")),
+            React.createElement(MenuPopover_1.default, null,
+                React.createElement(MenuList_1.MenuList, null,
+                    React.createElement(MenuItem_1.MenuItem, { content: "Option 1" })))))
+            .toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+    it('Menu open', function () {
+        var tree = renderer
+            .create(React.createElement(Menu_1.Menu, { open: true },
+            React.createElement(MenuTrigger_1.default, null,
+                React.createElement(button_1.ButtonV1, null, "Open")),
+            React.createElement(MenuPopover_1.default, null,
+                React.createElement(MenuList_1.MenuList, null,
+                    React.createElement(MenuItem_1.MenuItem, { content: "Option 1" })))))
+            .toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+    it('Menu defaultOpen', function () {
+        var tree = renderer
+            .create(React.createElement(Menu_1.Menu, { defaultOpen: true },
+            React.createElement(MenuTrigger_1.default, null,
+                React.createElement(button_1.ButtonV1, null, "Open")),
+            React.createElement(MenuPopover_1.default, null,
+                React.createElement(MenuList_1.MenuList, null,
+                    React.createElement(MenuItem_1.MenuItem, { content: "Option 1" }),
+                    React.createElement(MenuItem_1.MenuItem, { disabled: true, content: "Option 2" })))))
+            .toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+    it('Menu open checkbox and divider', function () {
+        var tree = renderer
+            .create(React.createElement(Menu_1.Menu, { open: true },
+            React.createElement(MenuTrigger_1.default, null,
+                React.createElement(button_1.ButtonV1, null, "Open")),
+            React.createElement(MenuPopover_1.default, null,
+                React.createElement(MenuList_1.MenuList, null,
+                    React.createElement(MenuItemCheckbox_1.MenuItemCheckbox, { content: "Option 1", name: "Option 1" }),
+                    React.createElement(MenuDivider_1.MenuDivider, null),
+                    React.createElement(MenuItemCheckbox_1.MenuItemCheckbox, { disabled: true, content: "Option 2", name: "Option 2" })))))
+            .toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+    it('Menu open radio', function () {
+        var tree = renderer
+            .create(React.createElement(Menu_1.Menu, { open: true },
+            React.createElement(MenuTrigger_1.default, null,
+                React.createElement(button_1.ButtonV1, null, "Open")),
+            React.createElement(MenuPopover_1.default, null,
+                React.createElement(MenuList_1.MenuList, null,
+                    React.createElement(MenuItemRadio_1.MenuItemRadio, { content: "Option 1", name: "Option 1" }),
+                    React.createElement(MenuItemRadio_1.MenuItemRadio, { content: "Option 2", name: "Option 2" })))))
+            .toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+    it('Menu open checkbox defaultChecked', function () {
+        var tree = renderer
+            .create(React.createElement(Menu_1.Menu, { open: true, defaultChecked: { 'Option 1': true } },
+            React.createElement(MenuTrigger_1.default, null,
+                React.createElement(button_1.ButtonV1, null, "Open")),
+            React.createElement(MenuPopover_1.default, null,
+                React.createElement(MenuList_1.MenuList, null,
+                    React.createElement(MenuItemCheckbox_1.MenuItemCheckbox, { content: "Option 1", name: "Option 1" }),
+                    React.createElement(MenuDivider_1.MenuDivider, null),
+                    React.createElement(MenuItemCheckbox_1.MenuItemCheckbox, { content: "Option 2", name: "Option 2" })))))
+            .toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+    it('Menu open checkbox checked', function () {
+        var tree = renderer
+            .create(React.createElement(Menu_1.Menu, { open: true, checked: { 'Option 1': true } },
+            React.createElement(MenuTrigger_1.default, null,
+                React.createElement(button_1.ButtonV1, null, "Open")),
+            React.createElement(MenuPopover_1.default, null,
+                React.createElement(MenuList_1.MenuList, null,
+                    React.createElement(MenuItemCheckbox_1.MenuItemCheckbox, { content: "Option 1", name: "Option 1" }),
+                    React.createElement(MenuDivider_1.MenuDivider, null),
+                    React.createElement(MenuItemCheckbox_1.MenuItemCheckbox, { content: "Option 2", name: "Option 2" })))))
+            .toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+    it('Menu submenu', function () {
+        var tree = renderer
+            .create(React.createElement(Menu_1.Menu, { open: true },
+            React.createElement(MenuTrigger_1.default, null,
+                React.createElement(button_1.ButtonV1, null, "Default")),
+            React.createElement(MenuPopover_1.default, null,
+                React.createElement(MenuList_1.MenuList, null,
+                    React.createElement(MenuItem_1.MenuItem, { content: "Option 1" }),
+                    React.createElement(Menu_1.Menu, null,
+                        React.createElement(MenuTrigger_1.default, null,
+                            React.createElement(MenuItem_1.MenuItem, { content: "Option 2" })),
+                        React.createElement(MenuPopover_1.default, null,
+                            React.createElement(MenuList_1.MenuList, null,
+                                React.createElement(MenuItem_1.MenuItem, { content: "Option 1" }))))))))
+            .toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+});
+describe('Menu rerender tests', function () {
+    it('Menu re-renders correctly', function () {
+        (0, test_tools_1.checkReRender)(function () { return (React.createElement(Menu_1.Menu, { open: true },
+            React.createElement(MenuTrigger_1.default, null,
+                React.createElement(button_1.ButtonV1, null, "Rerender twice")),
+            React.createElement(MenuPopover_1.default, null,
+                React.createElement(MenuList_1.MenuList, null,
+                    React.createElement(MenuItem_1.MenuItem, { content: "Option 1" }))))); }, 3);
+    });
+    it('Menu re-renders correctly with style', function () {
+        var style = { backgroundColor: 'black' };
+        (0, test_tools_1.checkReRender)(function () { return (React.createElement(Menu_1.Menu, null,
+            React.createElement(MenuTrigger_1.default, null,
+                React.createElement(button_1.ButtonV1, { style: style }, "Rerender twice")),
+            React.createElement(MenuPopover_1.default, null,
+                React.createElement(MenuList_1.MenuList, null,
+                    React.createElement(MenuItem_1.MenuItem, { content: "Option 1" }))))); }, 3);
+    });
+    it('Menu re-renders correctly with accessibilityAction', function () {
+        var action = [{ name: 'Expand' }];
+        (0, test_tools_1.checkReRender)(function () { return (React.createElement(Menu_1.Menu, null,
+            React.createElement(MenuTrigger_1.default, null,
+                React.createElement(button_1.ButtonV1, null, "Rerender twice")),
+            React.createElement(MenuPopover_1.default, null,
+                React.createElement(MenuList_1.MenuList, null,
+                    React.createElement(MenuItem_1.MenuItem, { accessibilityActions: action, content: "Option 1" }))))); }, 3);
+    });
+});
+//# sourceMappingURL=Menu.test.js.map

package/lib-commonjs/__tests__/Menu.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.test.js","sourceRoot":"","sources":["../../src/__tests__/Menu.test.tsx"],"names":[],"mappings":"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"}

package/lib-commonjs/consts.d.ts

@@ -0,0 +1,3 @@
+export declare const delayHover: number;
+export declare const isCloseOnHoverOutEnabled: boolean;
+//# sourceMappingURL=consts.d.ts.map

package/lib-commonjs/consts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"consts.d.ts","sourceRoot":"","sources":["../src/consts.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,QAGrB,CAAC;AAEH,eAAO,MAAM,wBAAwB,SAAmC,CAAC"}

package/lib-commonjs/consts.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isCloseOnHoverOutEnabled = exports.delayHover = void 0;
+var react_native_1 = require("react-native");
+exports.delayHover = react_native_1.Platform.select({
+    macos: 100,
+    default: 500, // win32
+});
+exports.isCloseOnHoverOutEnabled = react_native_1.Platform.OS === 'win32';
+//# sourceMappingURL=consts.js.map

package/lib-commonjs/consts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"consts.js","sourceRoot":"","sources":["../src/consts.ts"],"names":[],"mappings":";;;AAAA,6CAAwC;AAE3B,QAAA,UAAU,GAAG,uBAAQ,CAAC,MAAM,CAAC;IACxC,KAAK,EAAE,GAAG;IACV,OAAO,EAAE,GAAG,EAAE,QAAQ;CACvB,CAAC,CAAC;AAEU,QAAA,wBAAwB,GAAG,uBAAQ,CAAC,EAAE,KAAM,OAAe,CAAC"}

package/lib-commonjs/context/menuContext.d.ts

@@ -1,10 +1,16 @@
+/// <reference types="node" />
 import * as React from 'react';
 import type { MenuState } from '../Menu/Menu.types';
 /**
  * Context shared between Menu and its child components
  */
-export declare type MenuContextValue = MenuState;
-export declare const MenuContext: React.Context<MenuState>;
-export declare const MenuProvider: React.Provider<MenuState>;
-export declare const useMenuContext: () => MenuState;
+export interface MenuContextValue extends MenuState {
+    popoverHoverOutTimer?: NodeJS.Timeout;
+    triggerHoverOutTimer?: NodeJS.Timeout;
+    setPopoverHoverOutTimer?: (timer: NodeJS.Timeout) => void;
+    setTriggerHoverOutTimer?: (timer: NodeJS.Timeout) => void;
+}
+export declare const MenuContext: React.Context<MenuContextValue>;
+export declare const MenuProvider: React.Provider<MenuContextValue>;
+export declare const useMenuContext: () => MenuContextValue;
 //# sourceMappingURL=menuContext.d.ts.map

package/lib-commonjs/context/menuContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menuContext.d.ts","sourceRoot":"","sources":["../../src/context/menuContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAEpD;;GAEG;AACH,oBAAY,gBAAgB,GAAG,SAAS,CAAC;AAEzC,eAAO,MAAM,WAAW,0BAUtB,CAAC;AAEH,eAAO,MAAM,YAAY,2BAAuB,CAAC;AACjD,eAAO,MAAM,cAAc,iBAAsC,CAAC"}
+{"version":3,"file":"menuContext.d.ts","sourceRoot":"","sources":["../../src/context/menuContext.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAEpD;;GAEG;AACH,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD,oBAAoB,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC;IACtC,oBAAoB,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC;IACtC,uBAAuB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,OAAO,KAAK,IAAI,CAAC;IAC1D,uBAAuB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,OAAO,KAAK,IAAI,CAAC;CAC3D;AAED,eAAO,MAAM,WAAW,iCAUtB,CAAC;AAEH,eAAO,MAAM,YAAY,kCAAuB,CAAC;AACjD,eAAO,MAAM,cAAc,wBAAsC,CAAC"}

package/lib-commonjs/context/menuContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"menuContext.js","sourceRoot":"","sources":["../../src/context/menuContext.ts"],"names":[],"mappings":";;;;AAAA,wDAA+B;AAQlB,QAAA,WAAW,GAAG,KAAK,CAAC,aAAa,CAAmB;IAC/D,YAAY,EAAE,KAAK;IACnB,OAAO,EAAE,EAAE;IACX,cAAc,EAAE,EAAE;IAClB,aAAa,EAAE,KAAK;IACpB,SAAS,EAAE,KAAK;IAChB,IAAI,EAAE,KAAK;IACX,eAAe,EAAE,cAAM,OAAA,KAAK,EAAL,CAAK;IAC5B,OAAO,EAAE,cAAM,OAAA,KAAK,EAAL,CAAK;IACpB,UAAU,EAAE,IAAI;CACjB,CAAC,CAAC;AAEU,QAAA,YAAY,GAAG,mBAAW,CAAC,QAAQ,CAAC;AAC1C,IAAM,cAAc,GAAG,cAAM,OAAA,KAAK,CAAC,UAAU,CAAC,mBAAW,CAAC,EAA7B,CAA6B,CAAC;AAArD,QAAA,cAAc,kBAAuC"}
+{"version":3,"file":"menuContext.js","sourceRoot":"","sources":["../../src/context/menuContext.ts"],"names":[],"mappings":";;;;AAAA,wDAA+B;AAalB,QAAA,WAAW,GAAG,KAAK,CAAC,aAAa,CAAmB;IAC/D,YAAY,EAAE,KAAK;IACnB,OAAO,EAAE,EAAE;IACX,cAAc,EAAE,EAAE;IAClB,aAAa,EAAE,KAAK;IACpB,SAAS,EAAE,KAAK;IAChB,IAAI,EAAE,KAAK;IACX,eAAe,EAAE,cAAM,OAAA,KAAK,EAAL,CAAK;IAC5B,OAAO,EAAE,cAAM,OAAA,KAAK,EAAL,CAAK;IACpB,UAAU,EAAE,IAAI;CACjB,CAAC,CAAC;AAEU,QAAA,YAAY,GAAG,mBAAW,CAAC,QAAQ,CAAC;AAC1C,IAAM,cAAc,GAAG,cAAM,OAAA,KAAK,CAAC,UAAU,CAAC,mBAAW,CAAC,EAA7B,CAA6B,CAAC;AAArD,QAAA,cAAc,kBAAuC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/menu",
-  "version": "0.13.0",
+  "version": "0.14.1",
   "description": "A cross-platform Menu component using the Fluent Design System",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "@fluentui-react-native/adapters": ">=0.8.5 <1.0.0",
-    "@fluentui-react-native/callout": ">=0.20.5 <1.0.0",
+    "@fluentui-react-native/callout": ">=0.20.6 <1.0.0",
     "@fluentui-react-native/experimental-text": ">=0.9.0 <1.0.0",
     "@fluentui-react-native/framework": "0.7.30",
-    "@fluentui-react-native/interactive-hooks": ">=0.16.1 <1.0.0",
+    "@fluentui-react-native/interactive-hooks": ">=0.16.2 <1.0.0",
     "@fluentui-react-native/theme-tokens": ">=0.18.0 <1.0.0",
     "@fluentui-react-native/tokens": ">=0.14.0 <1.0.0",
     "@fluentui-react-native/use-styling": ">=0.8.3 <1.0.0",
@@ -34,8 +34,10 @@
     "tslib": "^2.3.1"
   },
   "devDependencies": {
+    "@fluentui-react-native/button": ">=0.22.27 <1.0.0",
     "@fluentui-react-native/eslint-config-rules": "^0.1.1",
     "@fluentui-react-native/scripts": "^0.1.1",
+    "@fluentui-react-native/test-tools": ">=0.1.1 <1.0.0",
     "@types/react-native": "^0.64.0",
     "react-native": "^0.64.3"
   },

package/src/Menu/Menu.types.ts

@@ -14,6 +14,7 @@ export interface MenuProps extends MenuListProps {
 export interface MenuState extends MenuProps {
   isControlled: boolean;
   isSubmenu: boolean;
+  parentPopoverHoverOutTimer?: NodeJS.Timeout;
   setOpen: (e: InteractionEvent, isOpen: boolean) => void;
   triggerRef: React.RefObject<React.Component>;
 }

package/src/Menu/useMenu.ts

@@ -4,17 +4,23 @@ import { useMenuContext } from '../context/menuContext';
 import { MenuProps, MenuState } from './Menu.types';
 
 export const useMenu = (props: MenuProps): MenuState => {
-  const triggerRef = React.useRef(null);
+  const triggerRef = React.useRef();
   const context = useMenuContext();
   const isSubmenu = context.triggerRef !== null;
   const isControlled = typeof props.open !== 'undefined';
   const [open, setOpen] = useMenuOpenState(isControlled, props);
 
-  // Default behaviot for submenu is to open on hover
+  // Default behavior for submenu is to open on hover
   // the ...props line below will override this behavior for a submenu
   // or apply openOnHover if passed into a root Menu.
   const openOnHover = isSubmenu;
 
+  // We need to be able to cancel the timer that gets set on
+  // hover out of the parent popover if the parent popover
+  // is also set to open/close on hover out. Otherwise
+  // the parent menu will close when the timeout passes.
+  const parentPopoverHoverOutTimer = isSubmenu ? context.popoverHoverOutTimer : undefined;
+
   return {
     openOnHover,
     ...props,
@@ -23,6 +29,7 @@ export const useMenu = (props: MenuProps): MenuState => {
     triggerRef,
     isSubmenu,
     isControlled,
+    parentPopoverHoverOutTimer,
   };
 };
 

package/src/Menu/useMenuContextValue.ts

@@ -1,6 +1,9 @@
+import React from 'react';
 import { MenuContextValue } from '../context/menuContext';
 import { MenuState } from './Menu.types';
 
 export const useMenuContextValue = (state: MenuState): MenuContextValue => {
-  return { ...state };
+  const [triggerHoverOutTimer, setTriggerHoverOutTimer] = React.useState<NodeJS.Timeout | undefined>();
+  const [popoverHoverOutTimer, setPopoverHoverOutTimer] = React.useState<NodeJS.Timeout>();
+  return { ...state, popoverHoverOutTimer, triggerHoverOutTimer, setPopoverHoverOutTimer, setTriggerHoverOutTimer };
 };

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,