@fluentui-react-native/menu 0.9.2 → 0.11.0

package/lib-commonjs/MenuPopover/useMenuPopover.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useMenuPopover = void 0;
 var tslib_1 = require("tslib");
 var react_1 = (0, tslib_1.__importDefault)(require("react"));
+var react_native_1 = require("react-native");
 var menuContext_1 = require("../context/menuContext");
 var useMenuPopover = function (_props) {
     var context = (0, menuContext_1.useMenuContext)();
@@ -12,7 +13,21 @@ var useMenuPopover = function (_props) {
     var dismissBehaviors = context.isControlled
         ? ['preventDismissOnKeyDown', 'preventDismissOnClickOutside']
         : undefined;
-    return { triggerRef: triggerRef, onDismiss: onDismiss, dismissBehaviors: dismissBehaviors };
+    var directionalHint = getDirectionalHint(context.isSubmenu, react_native_1.I18nManager.isRTL);
+    // Initial focus behavior differs per platform, Windows platforms move focus
+    // automatically onto first element of Callout
+    var setInitialFocus = react_native_1.Platform.OS === 'win32' || react_native_1.Platform.OS === 'windows';
+    var doNotTakePointerCapture = context.openOnHover;
+    return { triggerRef: triggerRef, onDismiss: onDismiss, directionalHint: directionalHint, dismissBehaviors: dismissBehaviors, doNotTakePointerCapture: doNotTakePointerCapture, setInitialFocus: setInitialFocus };
 };
 exports.useMenuPopover = useMenuPopover;
+var getDirectionalHint = function (isSubmenu, isRtl) {
+    if (!isSubmenu) {
+        return undefined;
+    }
+    if (isRtl) {
+        return 'leftTopEdge';
+    }
+    return 'rightTopEdge';
+};
 //# sourceMappingURL=useMenuPopover.js.map

package/lib-commonjs/MenuPopover/useMenuPopover.js.map

@@ -1 +1 @@
-{"version":3,"file":"useMenuPopover.js","sourceRoot":"","sources":["../../src/MenuPopover/useMenuPopover.ts"],"names":[],"mappings":";;;;AAAA,6DAA0B;AAE1B,sDAAwD;AAGjD,IAAM,cAAc,GAAG,UAAC,MAAwB;IACrD,IAAM,OAAO,GAAG,IAAA,4BAAc,GAAE,CAAC;IACjC,IAAM,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC;IAEhC,IAAM,UAAU,GAAG,OAAO,CAAC,UAAU,CAAC;IACtC,IAAM,SAAS,GAAG,eAAK,CAAC,WAAW,CAAC,cAAM,OAAA,OAAO,CAAC,SAAS,EAAE,KAAK,CAAC,YAAY,CAAC,EAAtC,CAAsC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAC7F,IAAM,gBAAgB,GAAG,OAAO,CAAC,YAAY;QAC3C,CAAC,CAAE,CAAC,yBAAyB,EAAE,8BAA8B,CAAwB;QACrF,CAAC,CAAC,SAAS,CAAC;IAEd,OAAO,EAAE,UAAU,YAAA,EAAE,SAAS,WAAA,EAAE,gBAAgB,kBAAA,EAAE,CAAC;AACrD,CAAC,CAAC;AAXW,QAAA,cAAc,kBAWzB"}
+{"version":3,"file":"useMenuPopover.js","sourceRoot":"","sources":["../../src/MenuPopover/useMenuPopover.ts"],"names":[],"mappings":";;;;AAAA,6DAA0B;AAC1B,6CAAqD;AAErD,sDAAwD;AAGjD,IAAM,cAAc,GAAG,UAAC,MAAwB;IACrD,IAAM,OAAO,GAAG,IAAA,4BAAc,GAAE,CAAC;IACjC,IAAM,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC;IAEhC,IAAM,UAAU,GAAG,OAAO,CAAC,UAAU,CAAC;IACtC,IAAM,SAAS,GAAG,eAAK,CAAC,WAAW,CAAC,cAAM,OAAA,OAAO,CAAC,SAAS,EAAE,KAAK,CAAC,YAAY,CAAC,EAAtC,CAAsC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAC7F,IAAM,gBAAgB,GAAG,OAAO,CAAC,YAAY;QAC3C,CAAC,CAAE,CAAC,yBAAyB,EAAE,8BAA8B,CAAwB;QACrF,CAAC,CAAC,SAAS,CAAC;IACd,IAAM,eAAe,GAAG,kBAAkB,CAAC,OAAO,CAAC,SAAS,EAAE,0BAAW,CAAC,KAAK,CAAC,CAAC;IAEjF,4EAA4E;IAC5E,8CAA8C;IAC9C,IAAM,eAAe,GAAG,uBAAQ,CAAC,EAAE,KAAM,OAAe,IAAI,uBAAQ,CAAC,EAAE,KAAK,SAAS,CAAC;IACtF,IAAM,uBAAuB,GAAG,OAAO,CAAC,WAAW,CAAC;IAEpD,OAAO,EAAE,UAAU,YAAA,EAAE,SAAS,WAAA,EAAE,eAAe,iBAAA,EAAE,gBAAgB,kBAAA,EAAE,uBAAuB,yBAAA,EAAE,eAAe,iBAAA,EAAE,CAAC;AAChH,CAAC,CAAC;AAjBW,QAAA,cAAc,kBAiBzB;AAEF,IAAM,kBAAkB,GAAG,UAAC,SAAkB,EAAE,KAAc;IAC5D,IAAI,CAAC,SAAS,EAAE;QACd,OAAO,SAAS,CAAC;KAClB;IAED,IAAI,KAAK,EAAE;QACT,OAAO,aAAa,CAAC;KACtB;IAED,OAAO,cAAc,CAAC;AACxB,CAAC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"MenuTrigger.d.ts","sourceRoot":"","sources":["../../src/MenuTrigger/MenuTrigger.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAmB,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAGxE,eAAO,MAAM,WAAW,iFAiBtB,CAAC;AAGH,eAAe,WAAW,CAAC"}
+{"version":3,"file":"MenuTrigger.d.ts","sourceRoot":"","sources":["../../src/MenuTrigger/MenuTrigger.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAmB,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAIxE,eAAO,MAAM,WAAW,iFAiBtB,CAAC;AAGH,eAAe,WAAW,CAAC"}

package/lib-commonjs/MenuTrigger/MenuTrigger.js

@@ -6,8 +6,9 @@ var react_1 = (0, tslib_1.__importDefault)(require("react"));
 var framework_1 = require("@fluentui-react-native/framework");
 var MenuTrigger_types_1 = require("./MenuTrigger.types");
 var useMenuTrigger_1 = require("./useMenuTrigger");
+var menuTriggerContext_1 = require("../context/menuTriggerContext");
 exports.MenuTrigger = (0, framework_1.stagedComponent)(function (props) {
-    var state = (0, useMenuTrigger_1.useMenuTrigger)(props);
+    var menuTrigger = (0, useMenuTrigger_1.useMenuTrigger)(props);
     return function (_rest, children) {
         var childrenArray = react_1.default.Children.toArray(children);
         if (__DEV__) {
@@ -16,8 +17,8 @@ exports.MenuTrigger = (0, framework_1.stagedComponent)(function (props) {
             }
         }
         var child = childrenArray[0];
-        var revised = react_1.default.cloneElement(child, state);
-        return react_1.default.createElement(react_1.default.Fragment, null, revised);
+        var revised = react_1.default.cloneElement(child, menuTrigger.props);
+        return react_1.default.createElement(menuTriggerContext_1.MenuTriggerProvider, { value: menuTrigger.hasSubmenu }, revised);
     };
 });
 exports.MenuTrigger.displayName = MenuTrigger_types_1.menuTriggerName;

package/lib-commonjs/MenuTrigger/MenuTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuTrigger.js","sourceRoot":"","sources":["../../src/MenuTrigger/MenuTrigger.tsx"],"names":[],"mappings":";;;;AAAA,6DAA0B;AAC1B,8DAAmE;AACnE,yDAAwE;AACxE,mDAAkD;AAErC,QAAA,WAAW,GAAG,IAAA,2BAAe,EAAC,UAAC,KAAuB;IACjE,IAAM,KAAK,GAAG,IAAA,+BAAc,EAAC,KAAK,CAAC,CAAC;IAEpC,OAAO,UAAC,KAAuB,EAAE,QAAyB;QACxD,IAAM,aAAa,GAAG,eAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAyB,CAAC;QAE/E,IAAI,OAAO,EAAE;YACX,IAAI,aAAa,CAAC,MAAM,KAAK,CAAC,EAAE;gBAC9B,OAAO,CAAC,GAAG,CAAC,0CAA0C,CAAC,CAAC;aACzD;SACF;QAED,IAAM,KAAK,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC;QAC/B,IAAM,OAAO,GAAG,eAAK,CAAC,YAAY,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;QAEjD,OAAO,8DAAG,OAAO,CAAI,CAAC;IACxB,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,mBAAW,CAAC,WAAW,GAAG,mCAAe,CAAC;AAE1C,kBAAe,mBAAW,CAAC"}
+{"version":3,"file":"MenuTrigger.js","sourceRoot":"","sources":["../../src/MenuTrigger/MenuTrigger.tsx"],"names":[],"mappings":";;;;AAAA,6DAA0B;AAC1B,8DAAmE;AACnE,yDAAwE;AACxE,mDAAkD;AAClD,oEAAoE;AAEvD,QAAA,WAAW,GAAG,IAAA,2BAAe,EAAC,UAAC,KAAuB;IACjE,IAAM,WAAW,GAAG,IAAA,+BAAc,EAAC,KAAK,CAAC,CAAC;IAE1C,OAAO,UAAC,KAAuB,EAAE,QAAyB;QACxD,IAAM,aAAa,GAAG,eAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAyB,CAAC;QAE/E,IAAI,OAAO,EAAE;YACX,IAAI,aAAa,CAAC,MAAM,KAAK,CAAC,EAAE;gBAC9B,OAAO,CAAC,GAAG,CAAC,0CAA0C,CAAC,CAAC;aACzD;SACF;QAED,IAAM,KAAK,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC;QAC/B,IAAM,OAAO,GAAG,eAAK,CAAC,YAAY,CAAC,KAAK,EAAE,WAAW,CAAC,KAAK,CAAC,CAAC;QAE7D,OAAO,8BAAC,wCAAmB,IAAC,KAAK,EAAE,WAAW,CAAC,UAAU,IAAG,OAAO,CAAuB,CAAC;IAC7F,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,mBAAW,CAAC,WAAW,GAAG,mCAAe,CAAC;AAE1C,kBAAe,mBAAW,CAAC"}

package/lib-commonjs/MenuTrigger/MenuTrigger.types.d.ts

@@ -1,7 +1,16 @@
-import type { IViewProps } from '@fluentui-react-native/adapters';
+/// <reference types="react" />
+import { InteractionEvent, IWithPressableOptions } from '@fluentui-react-native/interactive-hooks';
+import { ViewProps } from 'react-native';
 export declare const menuTriggerName = "MenuTrigger";
-export interface MenuTriggerProps extends Omit<IViewProps, 'onPress'> {
+export interface MenuTriggerProps extends Omit<IWithPressableOptions<ViewProps>, 'onPress'> {
+    /**
+     * A RefObject to refer to the trigger component.
+     */
+    componentRef?: React.RefObject<React.Component>;
+    onClick?: (e: InteractionEvent) => void;
 }
 export interface MenuTriggerState {
+    props: MenuTriggerProps;
+    hasSubmenu: boolean;
 }
 //# sourceMappingURL=MenuTrigger.types.d.ts.map

package/lib-commonjs/MenuTrigger/MenuTrigger.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuTrigger.types.d.ts","sourceRoot":"","sources":["../../src/MenuTrigger/MenuTrigger.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAElE,eAAO,MAAM,eAAe,gBAAgB,CAAC;AAE7C,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC;CAAG;AAExE,MAAM,WAAW,gBAAgB;CAAG"}
+{"version":3,"file":"MenuTrigger.types.d.ts","sourceRoot":"","sources":["../../src/MenuTrigger/MenuTrigger.types.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,MAAM,0CAA0C,CAAC;AACnG,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,eAAO,MAAM,eAAe,gBAAgB,CAAC;AAE7C,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,qBAAqB,CAAC,SAAS,CAAC,EAAE,SAAS,CAAC;IACzF;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;IAEhD,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,gBAAgB,KAAK,IAAI,CAAC;CACzC;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,gBAAgB,CAAC;IACxB,UAAU,EAAE,OAAO,CAAC;CACrB"}

package/lib-commonjs/MenuTrigger/MenuTrigger.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuTrigger.types.js","sourceRoot":"","sources":["../../src/MenuTrigger/MenuTrigger.types.ts"],"names":[],"mappings":";;;AAEa,QAAA,eAAe,GAAG,aAAa,CAAC"}
+{"version":3,"file":"MenuTrigger.types.js","sourceRoot":"","sources":["../../src/MenuTrigger/MenuTrigger.types.ts"],"names":[],"mappings":";;;AAGa,QAAA,eAAe,GAAG,aAAa,CAAC"}

package/lib-commonjs/MenuTrigger/useMenuTrigger.d.ts

@@ -1,9 +1,3 @@
-/// <reference types="react" />
-import { InteractionEvent } from '@fluentui-react-native/interactive-hooks';
-import { MenuTriggerProps } from './MenuTrigger.types';
-export declare const useMenuTrigger: (_props: MenuTriggerProps) => {
-    onClick: (e: InteractionEvent) => void;
-    onHoverIn: (e: InteractionEvent) => void;
-    componentRef: import("react").RefObject<import("react").Component<{}, {}, any>>;
-};
+import { MenuTriggerProps, MenuTriggerState } from './MenuTrigger.types';
+export declare const useMenuTrigger: (_props: MenuTriggerProps) => MenuTriggerState;
 //# sourceMappingURL=useMenuTrigger.d.ts.map

package/lib-commonjs/MenuTrigger/useMenuTrigger.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useMenuTrigger.d.ts","sourceRoot":"","sources":["../../src/MenuTrigger/useMenuTrigger.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AAC5E,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAEvD,eAAO,MAAM,cAAc,WAAY,gBAAgB;iBAcjC,gBAAgB;mBANd,gBAAgB;;CAWvC,CAAC"}
+{"version":3,"file":"useMenuTrigger.d.ts","sourceRoot":"","sources":["../../src/MenuTrigger/useMenuTrigger.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAGzE,eAAO,MAAM,cAAc,WAAY,gBAAgB,KAAG,gBAiCzD,CAAC"}

package/lib-commonjs/MenuTrigger/useMenuTrigger.js

@@ -2,21 +2,34 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useMenuTrigger = void 0;
 var menuContext_1 = require("../context/menuContext");
+var react_native_1 = require("react-native");
 var useMenuTrigger = function (_props) {
     var context = (0, menuContext_1.useMenuContext)();
     var setOpen = context.setOpen;
     var open = context.open;
     var openOnHover = context.openOnHover;
     var triggerRef = context.triggerRef;
+    var delayHover = react_native_1.Platform.select({
+        macos: 100,
+        default: 500, // win32
+    });
     var onHoverIn = function (e) {
         if (openOnHover) {
             setOpen(e, true /* isOpen */);
         }
     };
+    var onHoverOut = function (e) {
+        if (openOnHover) {
+            setOpen(e, false /* isOpen */);
+        }
+    };
     var onClick = function (e) {
         setOpen(e, !open);
     };
-    return { onClick: onClick, onHoverIn: onHoverIn, componentRef: triggerRef };
+    return {
+        props: { onClick: onClick, onHoverIn: onHoverIn, onHoverOut: onHoverOut, componentRef: triggerRef, delayHoverIn: delayHover, delayHoverOut: delayHover },
+        hasSubmenu: context.isSubmenu,
+    };
 };
 exports.useMenuTrigger = useMenuTrigger;
 //# sourceMappingURL=useMenuTrigger.js.map

package/lib-commonjs/MenuTrigger/useMenuTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"useMenuTrigger.js","sourceRoot":"","sources":["../../src/MenuTrigger/useMenuTrigger.ts"],"names":[],"mappings":";;;AAAA,sDAAwD;AAIjD,IAAM,cAAc,GAAG,UAAC,MAAwB;IACrD,IAAM,OAAO,GAAG,IAAA,4BAAc,GAAE,CAAC;IAEjC,IAAM,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC;IAChC,IAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;IAC1B,IAAM,WAAW,GAAG,OAAO,CAAC,WAAW,CAAC;IACxC,IAAM,UAAU,GAAG,OAAO,CAAC,UAAU,CAAC;IAEtC,IAAM,SAAS,GAAG,UAAC,CAAmB;QACpC,IAAI,WAAW,EAAE;YACf,OAAO,CAAC,CAAC,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;SAC/B;IACH,CAAC,CAAC;IAEF,IAAM,OAAO,GAAG,UAAC,CAAmB;QAClC,OAAO,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC;IACpB,CAAC,CAAC;IAEF,OAAO,EAAE,OAAO,SAAA,EAAE,SAAS,WAAA,EAAE,YAAY,EAAE,UAAU,EAAE,CAAC;AAC1D,CAAC,CAAC;AAnBW,QAAA,cAAc,kBAmBzB"}
+{"version":3,"file":"useMenuTrigger.js","sourceRoot":"","sources":["../../src/MenuTrigger/useMenuTrigger.ts"],"names":[],"mappings":";;;AAAA,sDAAwD;AAGxD,6CAAwC;AAEjC,IAAM,cAAc,GAAG,UAAC,MAAwB;IACrD,IAAM,OAAO,GAAG,IAAA,4BAAc,GAAE,CAAC;IAEjC,IAAM,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC;IAChC,IAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;IAC1B,IAAM,WAAW,GAAG,OAAO,CAAC,WAAW,CAAC;IACxC,IAAM,UAAU,GAAG,OAAO,CAAC,UAAU,CAAC;IAEtC,IAAM,UAAU,GAAG,uBAAQ,CAAC,MAAM,CAAC;QACjC,KAAK,EAAE,GAAG;QACV,OAAO,EAAE,GAAG,EAAE,QAAQ;KACvB,CAAC,CAAC;IAEH,IAAM,SAAS,GAAG,UAAC,CAAmB;QACpC,IAAI,WAAW,EAAE;YACf,OAAO,CAAC,CAAC,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;SAC/B;IACH,CAAC,CAAC;IAEF,IAAM,UAAU,GAAG,UAAC,CAAmB;QACrC,IAAI,WAAW,EAAE;YACf,OAAO,CAAC,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC;SAChC;IACH,CAAC,CAAC;IAEF,IAAM,OAAO,GAAG,UAAC,CAAmB;QAClC,OAAO,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC;IACpB,CAAC,CAAC;IAEF,OAAO;QACL,KAAK,EAAE,EAAE,OAAO,SAAA,EAAE,SAAS,WAAA,EAAE,UAAU,YAAA,EAAE,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE,UAAU,EAAE;QACxH,UAAU,EAAE,OAAO,CAAC,SAAS;KAC9B,CAAC;AACJ,CAAC,CAAC;AAjCW,QAAA,cAAc,kBAiCzB"}

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

@@ -0,0 +1,9 @@
+import React from 'react';
+/**
+ * This context keeps track of whether a trigger component is for a submenu.
+ * This allows the trigger to show a submenu indicator.
+ */
+export declare const MenuTriggerContext: React.Context<boolean>;
+export declare const MenuTriggerProvider: React.Provider<boolean>;
+export declare const useMenuTriggerContext: () => boolean;
+//# sourceMappingURL=menuTriggerContext.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"menuTriggerContext.d.ts","sourceRoot":"","sources":["../../src/context/menuTriggerContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;GAGG;AACH,eAAO,MAAM,kBAAkB,wBAAsC,CAAC;AAEtE,eAAO,MAAM,mBAAmB,yBAA8B,CAAC;AAC/D,eAAO,MAAM,qBAAqB,eAA6C,CAAC"}

package/lib-commonjs/context/menuTriggerContext.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMenuTriggerContext = exports.MenuTriggerProvider = exports.MenuTriggerContext = void 0;
+var tslib_1 = require("tslib");
+var react_1 = (0, tslib_1.__importDefault)(require("react"));
+/**
+ * This context keeps track of whether a trigger component is for a submenu.
+ * This allows the trigger to show a submenu indicator.
+ */
+exports.MenuTriggerContext = react_1.default.createContext(false);
+exports.MenuTriggerProvider = exports.MenuTriggerContext.Provider;
+var useMenuTriggerContext = function () { return react_1.default.useContext(exports.MenuTriggerContext); };
+exports.useMenuTriggerContext = useMenuTriggerContext;
+//# sourceMappingURL=menuTriggerContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"menuTriggerContext.js","sourceRoot":"","sources":["../../src/context/menuTriggerContext.ts"],"names":[],"mappings":";;;;AAAA,6DAA0B;AAE1B;;;GAGG;AACU,QAAA,kBAAkB,GAAG,eAAK,CAAC,aAAa,CAAU,KAAK,CAAC,CAAC;AAEzD,QAAA,mBAAmB,GAAG,0BAAkB,CAAC,QAAQ,CAAC;AACxD,IAAM,qBAAqB,GAAG,cAAM,OAAA,eAAK,CAAC,UAAU,CAAC,0BAAkB,CAAC,EAApC,CAAoC,CAAC;AAAnE,QAAA,qBAAqB,yBAA8C"}

package/lib-commonjs/index.d.ts

@@ -3,6 +3,7 @@ export { MenuTrigger } from './MenuTrigger/MenuTrigger';
 export { MenuPopover } from './MenuPopover/MenuPopover';
 export { MenuItem } from './MenuItem/MenuItem';
 export { MenuItemCheckbox } from './MenuItemCheckbox/MenuItemCheckbox';
+export { MenuItemRadio } from './MenuItemRadio/MenuItemRadio';
 export { MenuList } from './MenuList/MenuList';
 export { MenuDivider } from './MenuDivider/MenuDivider';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AACnC,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;AACvE,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AACnC,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;AACvE,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC"}

package/lib-commonjs/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MenuDivider = exports.MenuList = exports.MenuItemCheckbox = exports.MenuItem = exports.MenuPopover = exports.MenuTrigger = exports.Menu = void 0;
+exports.MenuDivider = exports.MenuList = exports.MenuItemRadio = exports.MenuItemCheckbox = exports.MenuItem = exports.MenuPopover = exports.MenuTrigger = exports.Menu = void 0;
 var Menu_1 = require("./Menu/Menu");
 Object.defineProperty(exports, "Menu", { enumerable: true, get: function () { return Menu_1.Menu; } });
 var MenuTrigger_1 = require("./MenuTrigger/MenuTrigger");
@@ -11,6 +11,8 @@ var MenuItem_1 = require("./MenuItem/MenuItem");
 Object.defineProperty(exports, "MenuItem", { enumerable: true, get: function () { return MenuItem_1.MenuItem; } });
 var MenuItemCheckbox_1 = require("./MenuItemCheckbox/MenuItemCheckbox");
 Object.defineProperty(exports, "MenuItemCheckbox", { enumerable: true, get: function () { return MenuItemCheckbox_1.MenuItemCheckbox; } });
+var MenuItemRadio_1 = require("./MenuItemRadio/MenuItemRadio");
+Object.defineProperty(exports, "MenuItemRadio", { enumerable: true, get: function () { return MenuItemRadio_1.MenuItemRadio; } });
 var MenuList_1 = require("./MenuList/MenuList");
 Object.defineProperty(exports, "MenuList", { enumerable: true, get: function () { return MenuList_1.MenuList; } });
 var MenuDivider_1 = require("./MenuDivider/MenuDivider");

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AAAA,oCAAmC;AAA1B,4FAAA,IAAI,OAAA;AACb,yDAAwD;AAA/C,0GAAA,WAAW,OAAA;AACpB,yDAAwD;AAA/C,0GAAA,WAAW,OAAA;AACpB,gDAA+C;AAAtC,oGAAA,QAAQ,OAAA;AACjB,wEAAuE;AAA9D,oHAAA,gBAAgB,OAAA;AACzB,gDAA+C;AAAtC,oGAAA,QAAQ,OAAA;AACjB,yDAAwD;AAA/C,0GAAA,WAAW,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AAAA,oCAAmC;AAA1B,4FAAA,IAAI,OAAA;AACb,yDAAwD;AAA/C,0GAAA,WAAW,OAAA;AACpB,yDAAwD;AAA/C,0GAAA,WAAW,OAAA;AACpB,gDAA+C;AAAtC,oGAAA,QAAQ,OAAA;AACjB,wEAAuE;AAA9D,oHAAA,gBAAgB,OAAA;AACzB,+DAA8D;AAArD,8GAAA,aAAa,OAAA;AACtB,gDAA+C;AAAtC,oGAAA,QAAQ,OAAA;AACjB,yDAAwD;AAA/C,0GAAA,WAAW,OAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/menu",
-  "version": "0.9.2",
+  "version": "0.11.0",
   "description": "A cross-platform Menu component using the Fluent Design System",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -23,12 +23,12 @@
   },
   "dependencies": {
     "@fluentui-react-native/adapters": ">=0.8.5 <1.0.0",
-    "@fluentui-react-native/callout": ">=0.20.2 <1.0.0",
-    "@fluentui-react-native/experimental-text": ">=0.7.28 <1.0.0",
-    "@fluentui-react-native/framework": "0.7.28",
-    "@fluentui-react-native/interactive-hooks": ">=0.15.8 <1.0.0",
-    "@fluentui-react-native/theme-tokens": ">=0.16.3 <1.0.0",
-    "@fluentui-react-native/tokens": ">=0.12.2 <1.0.0",
+    "@fluentui-react-native/callout": ">=0.20.4 <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.0 <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",
     "react-native-svg": "^12.3.0",
     "tslib": "^2.3.1"

package/src/Menu/useMenu.ts

@@ -10,7 +10,13 @@ export const useMenu = (props: MenuProps): MenuState => {
   const isControlled = typeof props.open !== 'undefined';
   const [open, setOpen] = useMenuOpenState(isControlled, props);
 
+  // Default behaviot 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;
+
   return {
+    openOnHover,
     ...props,
     open,
     setOpen,

package/src/MenuItem/MenuItem.styling.ts

@@ -47,6 +47,13 @@ export const stylingSettings: UseStylingOptions<MenuItemProps, MenuItemSlotProps
       (tokens: MenuItemTokens) => {
         return {
           color: tokens.color,
+          height: 16,
+          width: 16,
+          viewBox:
+            '0 0 ' +
+            (tokens.submenuIndicatorSize - tokens.submenuIndicatorPadding * 2) +
+            ' ' +
+            (tokens.submenuIndicatorSize - tokens.submenuIndicatorPadding * 2),
         };
       },
       ['color'],

package/src/MenuItem/MenuItem.tsx

@@ -1,5 +1,5 @@
 /** @jsx withSlots */
-import { View } from 'react-native';
+import { I18nManager, View } from 'react-native';
 import { SvgXml } from 'react-native-svg';
 import { compose, mergeProps, UseSlots, withSlots } from '@fluentui-react-native/framework';
 import { Text } from '@fluentui-react-native/experimental-text';
@@ -22,10 +22,15 @@ export const MenuItem = compose<MenuItemType>({
 
     return (final: MenuItemProps) => {
       const mergedProps = mergeProps(menuItem.props, final);
-      const chevronXml = `
-      <svg width="12" height="16" viewBox="0 0 11 6">
-        <path fill='currentColor' d='M0.646447 0.646447C0.841709 0.451184 1.15829 0.451184 1.35355 0.646447L5.5 4.79289L9.64645 0.646447C9.84171 0.451185 10.1583 0.451185 10.3536 0.646447C10.5488 0.841709 10.5488 1.15829 10.3536 1.35355L5.85355 5.85355C5.65829 6.04882 5.34171 6.04882 5.14645 5.85355L0.646447 1.35355C0.451184 1.15829 0.451184 0.841709 0.646447 0.646447Z' />
-      </svg>`;
+      const chevronXml = I18nManager.isRTL
+        ? `
+          <svg>
+            <path fill='currentColor' d='M7.35355 2.14645C7.54882 2.34171 7.54882 2.65829 7.35355 2.85355L4.20711 6L7.35355 9.14645C7.54882 9.34171 7.54882 9.65829 7.35355 9.85355C7.15829 10.0488 6.84171 10.0488 6.64645 9.85355L3.14645 6.35355C2.95118 6.15829 2.95118 5.84171 3.14645 5.64645L6.64645 2.14645C6.84171 1.95118 7.15829 1.95118 7.35355 2.14645Z' />
+          </svg>`
+        : `
+          <svg>
+            <path fill='currentColor' d='M4.64645 2.14645C4.45118 2.34171 4.45118 2.65829 4.64645 2.85355L7.79289 6L4.64645 9.14645C4.45118 9.34171 4.45118 9.65829 4.64645 9.85355C4.84171 10.0488 5.15829 10.0488 5.35355 9.85355L8.85355 6.35355C9.04882 6.15829 9.04882 5.84171 8.85355 5.64645L5.35355 2.14645C5.15829 1.95118 4.84171 1.95118 4.64645 2.14645Z' />
+          </svg>`;
 
       return (
         <Slots.root {...mergedProps}>

package/src/MenuItem/MenuItem.types.ts

@@ -10,6 +10,8 @@ export const menuItemName = 'MenuItem';
 
 export interface MenuItemTokens extends LayoutTokens, FontTokens, IBorderTokens, IColorTokens {
   checkmarkSize?: number;
+  submenuIndicatorPadding?: number;
+  submenuIndicatorSize?: number;
   gap?: number;
 
   disabled?: MenuItemTokens;

package/src/MenuItem/MenuItemTokens.ts

@@ -7,6 +7,8 @@ export const defaultMenuItemTokens: TokenSettings<MenuItemTokens, Theme> = (t: T
   backgroundColor: t.colors.neutralBackground1,
   borderRadius: globalTokens.corner.radius.medium,
   checkmarkSize: 16,
+  submenuIndicatorPadding: globalTokens.spacing.none,
+  submenuIndicatorSize: 16,
   color: t.colors.neutralForeground2,
   fontFamily: t.typography.families.primary,
   fontSize: globalTokens.font.size[300],

package/src/MenuItem/MenuItemTokens.win32.ts

@@ -7,6 +7,8 @@ export const defaultMenuItemTokens: TokenSettings<MenuItemTokens, Theme> = (t: T
   backgroundColor: t.colors.neutralBackground1,
   borderRadius: globalTokens.corner.radius.none,
   checkmarkSize: 16,
+  submenuIndicatorPadding: globalTokens.spacing.xxs,
+  submenuIndicatorSize: 16,
   color: t.colors.neutralForeground1,
   fontFamily: t.typography.families.primary,
   fontSize: globalTokens.font.size[200],

package/src/MenuItem/useMenuItem.ts

@@ -5,6 +5,7 @@ import { memoize } from '@fluentui-react-native/framework';
 import { useAsPressable, useKeyProps } from '@fluentui-react-native/interactive-hooks';
 import { useMenuContext } from '../context/menuContext';
 import { useMenuListContext } from '../context/menuListContext';
+import { useMenuTriggerContext } from '../context/menuTriggerContext';
 
 export const useMenuItem = (props: MenuItemProps): MenuItemState => {
   // attach the pressable state handlers
@@ -12,7 +13,8 @@ export const useMenuItem = (props: MenuItemProps): MenuItemState => {
   const { onClick, accessibilityState, componentRef = defaultComponentRef, disabled, ...rest } = props;
   const pressable = useAsPressable({ ...rest, disabled, onPress: onClick });
   const onKeyProps = useKeyProps(onClick, ' ', 'Enter');
-  const hasSubmenu = useMenuContext().isSubmenu;
+  const isTrigger = useMenuTriggerContext();
+  const hasSubmenu = useMenuContext().isSubmenu && isTrigger;
   const hasCheckmarks = useMenuListContext().hasCheckmarks;
 
   return {

package/src/MenuItemCheckbox/MenuItemCheckbox.tsx

@@ -1,9 +1,15 @@
 /** @jsx withSlots */
 import { View } from 'react-native';
 import { SvgXml } from 'react-native-svg';
-import { compose, mergeProps, UseSlots, withSlots } from '@fluentui-react-native/framework';
+import { compose, mergeProps, Slots, UseSlots, withSlots } from '@fluentui-react-native/framework';
 import { Text } from '@fluentui-react-native/experimental-text';
-import { menuItemCheckboxName, MenuItemCheckboxProps, MenuItemCheckboxType } from './MenuItemCheckbox.types';
+import {
+  menuItemCheckboxName,
+  MenuItemCheckboxProps,
+  MenuItemCheckboxSlotProps,
+  MenuItemCheckboxState,
+  MenuItemCheckboxType,
+} from './MenuItemCheckbox.types';
 import { useMenuItemCheckbox } from './useMenuItemCheckbox';
 import { stylingSettings } from './MenuItemCheckbox.styling';
 
@@ -19,19 +25,26 @@ export const MenuItemCheckbox = compose<MenuItemCheckboxType>({
     const menuItem = useMenuItemCheckbox(userProps);
     const Slots = useSlots(userProps, (layer): boolean => menuItem.state[layer]);
 
-    return (final: MenuItemCheckboxProps) => {
-      const mergedProps = mergeProps(menuItem.props, final);
-      const chevronXml = `
-      <svg>
-        <path fill='currentColor' d='M9.85355 3.14645C10.0488 3.34171 10.0488 3.65829 9.85355 3.85355L5.35355 8.35355C5.15829 8.54882 4.84171 8.54882 4.64645 8.35355L2.64645 6.35355C2.45118 6.15829 2.45118 5.84171 2.64645 5.64645C2.84171 5.45118 3.15829 5.45118 3.35355 5.64645L5 7.29289L9.14645 3.14645C9.34171 2.95118 9.65829 2.95118 9.85355 3.14645Z' />
-      </svg>`;
-
-      return (
-        <Slots.root {...mergedProps}>
-          <Slots.checkmark xml={chevronXml} />
-          {mergedProps.content && <Slots.content>{mergedProps.content}</Slots.content>}
-        </Slots.root>
-      );
-    };
+    return menuItemFinalRender(menuItem, Slots);
   },
 });
+
+export const menuItemFinalRender = (
+  menuItem: MenuItemCheckboxState,
+  Slots: Slots<MenuItemCheckboxSlotProps>,
+): React.FunctionComponent<MenuItemCheckboxProps> => {
+  return (final: MenuItemCheckboxProps) => {
+    const mergedProps = mergeProps(menuItem.props, final);
+    const checkmarkXml = `
+    <svg>
+      <path fill='currentColor' d='M9.85355 3.14645C10.0488 3.34171 10.0488 3.65829 9.85355 3.85355L5.35355 8.35355C5.15829 8.54882 4.84171 8.54882 4.64645 8.35355L2.64645 6.35355C2.45118 6.15829 2.45118 5.84171 2.64645 5.64645C2.84171 5.45118 3.15829 5.45118 3.35355 5.64645L5 7.29289L9.14645 3.14645C9.34171 2.95118 9.65829 2.95118 9.85355 3.14645Z' />
+    </svg>`;
+
+    return (
+      <Slots.root {...mergedProps}>
+        <Slots.checkmark xml={checkmarkXml} />
+        {mergedProps.content && <Slots.content>{mergedProps.content}</Slots.content>}
+      </Slots.root>
+    );
+  };
+};

package/src/MenuItemCheckbox/useMenuItemCheckbox.ts

@@ -14,7 +14,41 @@ import { useMenuListContext } from '../context/menuListContext';
 const defaultAccessibilityActions = [{ name: 'Toggle' }];
 
 export const useMenuItemCheckbox = (props: MenuItemCheckboxProps): MenuItemCheckboxState => {
-  // attach the pressable state handlers
+  const { name } = props;
+  const context = useMenuListContext();
+  const checked = context.checked?.[name];
+  const onCheckedChange = context.onCheckedChange;
+
+  const toggleChecked = React.useCallback(
+    (e: InteractionEvent) => {
+      onCheckedChange(e, name, !checked);
+    },
+    [checked, name, onCheckedChange],
+  );
+
+  return useMenuCheckboxInteraction(props, toggleChecked);
+};
+
+const getAccessibilityState = memoize(getAccessibilityStateWorker);
+function getAccessibilityStateWorker(disabled: boolean, checked: boolean, accessibilityState?: AccessibilityState) {
+  if (accessibilityState) {
+    return { disabled, checked, ...accessibilityState };
+  }
+  return { disabled, checked };
+}
+
+/**
+ * Create interactivity and accessibility props to be passed into the inner render.
+ * This logic is shared between Checkbox and Radio versions of MenuItem.
+ *
+ * @param props Props passed into the outer compoennt
+ * @param toggleCallback Function to be called when item is toggled
+ * @returns Props and additional state needed to render the component
+ */
+export const useMenuCheckboxInteraction = (
+  props: MenuItemCheckboxProps,
+  toggleCallback: (e: InteractionEvent) => void,
+): MenuItemCheckboxState => {
   const defaultComponentRef = React.useRef(null);
   const {
     accessibilityActions,
@@ -27,32 +61,25 @@ export const useMenuItemCheckbox = (props: MenuItemCheckboxProps): MenuItemCheck
   } = props;
   const context = useMenuListContext();
   const checked = context.checked?.[name];
-  const onCheckedChange = context.onCheckedChange;
 
-  const toggleChecked = React.useCallback(
-    (e: InteractionEvent) => {
-      onCheckedChange(e, name, !checked);
-    },
-    [checked, name, onCheckedChange],
-  );
   // Ensure focus is placed on checkbox after click
-  const toggleCheckedWithFocus = useOnPressWithFocus(componentRef, toggleChecked);
+  const toggleCheckedWithFocus = useOnPressWithFocus(componentRef, toggleCallback);
 
   const pressable = useAsPressable({ onPress: toggleCheckedWithFocus, ...rest });
   const buttonRef = useViewCommandFocus(componentRef);
 
-  const onKeyProps = useKeyProps(toggleChecked, ' ');
+  const onKeyProps = useKeyProps(toggleCallback, ' ');
   const accessibilityActionsProp = accessibilityActions
     ? [...defaultAccessibilityActions, ...accessibilityActions]
     : defaultAccessibilityActions;
   const onAccessibilityActionProp = React.useCallback(
     (event: AccessibilityActionEvent) => {
       if (event.nativeEvent.actionName === 'Toggle') {
-        toggleChecked(event);
+        toggleCallback(event);
       }
       onAccessibilityAction && onAccessibilityAction(event);
     },
-    [toggleChecked, onAccessibilityAction],
+    [toggleCallback, onAccessibilityAction],
   );
 
   const state = {
@@ -78,11 +105,3 @@ export const useMenuItemCheckbox = (props: MenuItemCheckboxProps): MenuItemCheck
     state: state,
   };
 };
-
-const getAccessibilityState = memoize(getAccessibilityStateWorker);
-function getAccessibilityStateWorker(disabled: boolean, checked: boolean, accessibilityState?: AccessibilityState) {
-  if (accessibilityState) {
-    return { disabled, checked, ...accessibilityState };
-  }
-  return { disabled, checked };
-}

package/src/MenuItemRadio/MenuItemRadio.tsx

@@ -0,0 +1,16 @@
+import { UseSlots } from '@fluentui-react-native/framework';
+import { useMenuItemRadio } from './useMenuItemRadio';
+import { MenuItemCheckbox, menuItemFinalRender } from '../MenuItemCheckbox/MenuItemCheckbox';
+import { MenuItemCheckboxProps, MenuItemCheckboxType } from '../MenuItemCheckbox/MenuItemCheckbox.types';
+
+export const menuItemRadioName = 'MenuItemRadio';
+
+export const MenuItemRadio = MenuItemCheckbox.compose({
+  displayName: menuItemRadioName,
+  useRender: (userProps: MenuItemCheckboxProps, useSlots: UseSlots<MenuItemCheckboxType>) => {
+    const menuItem = useMenuItemRadio(userProps);
+    const Slots = useSlots(userProps, (layer): boolean => menuItem.state[layer]);
+
+    return menuItemFinalRender(menuItem, Slots);
+  },
+});

package/src/MenuItemRadio/useMenuItemRadio.ts

@@ -0,0 +1,21 @@
+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 { useMenuCheckboxInteraction } from '../MenuItemCheckbox/useMenuItemCheckbox';
+
+export const useMenuItemRadio = (props: MenuItemCheckboxProps): MenuItemCheckboxState => {
+  const { name } = props;
+  const context = useMenuListContext();
+  const checked = context.checked?.[name];
+  const selectRadio = context.selectRadio;
+
+  const toggleChecked = React.useCallback(
+    (e: InteractionEvent) => {
+      selectRadio(e, name, !checked);
+    },
+    [checked, name, selectRadio],
+  );
+
+  return useMenuCheckboxInteraction(props, toggleChecked);
+};

package/src/MenuList/MenuList.styling.ts

@@ -13,8 +13,9 @@ export const stylingSettings: UseStylingOptions<MenuListProps, MenuListSlotProps
           display: 'flex',
           ...layoutStyles.from(tokens, theme),
         },
+        gap: tokens.gap,
       }),
-      ['backgroundColor', ...layoutStyles.keys],
+      ['backgroundColor', 'gap', ...layoutStyles.keys],
     ),
   },
 };

package/src/MenuList/MenuList.tsx

@@ -1,18 +1,38 @@
 /** @jsx withSlots */
 import React from 'react';
 import { View } from 'react-native';
-import { compose, UseSlots, withSlots } from '@fluentui-react-native/framework';
+import { compose, mergeProps, stagedComponent, UseSlots, withSlots } from '@fluentui-react-native/framework';
 import { menuListName, MenuListProps, MenuListType } from './MenuList.types';
 import { stylingSettings } from './MenuList.styling';
 import { MenuListProvider } from '../context/menuListContext';
 import { useMenuList } from './useMenuList';
-import { useMenuListContextValue } from './useMenuContextValue';
+import { useMenuListContextValue } from './useMenuListContextValue';
+import { IViewProps } from '@fluentui-react-native/adapters';
+
+const MenuStack = stagedComponent((props: React.PropsWithRef<IViewProps> & { gap?: number }) => {
+  const { gap, ...rest } = props;
+  return (final: React.PropsWithRef<IViewProps> & { gap?: number }, children: React.ReactNode) => {
+    if (gap && gap > 0 && children) {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore - GH:1684, fix typing error
+      children = React.Children.map(children, (child: React.ReactChild, index: number) => {
+        if (React.isValidElement(child) && index > 0) {
+          return React.cloneElement(child, mergeProps(child.props, { style: { marginTop: gap } }));
+        }
+        return child;
+      });
+    }
+
+    return <View {...mergeProps(rest, final)}>{children}</View>;
+  };
+});
+MenuStack.displayName = 'MenuStack';
 
 export const MenuList = compose<MenuListType>({
   displayName: menuListName,
   ...stylingSettings,
   slots: {
-    root: View,
+    root: MenuStack,
   },
   useRender: (userProps: MenuListProps, useSlots: UseSlots<MenuListType>) => {
     const menuList = useMenuList(userProps);
@@ -28,5 +48,3 @@ export const MenuList = compose<MenuListType>({
     };
   },
 });
-
-export default MenuList;