@fluentui-react-native/menu 0.9.1 → 0.10.0

package/lib-commonjs/MenuList/MenuListTokens.js

@@ -7,6 +7,7 @@ var defaultMenuListTokens = function (t) { return ({
     minWidth: 128,
     maxWidth: 300,
     backgroundColor: t.colors.neutralBackground1,
+    gap: theme_tokens_1.globalTokens.spacing.xxs,
 }); };
 exports.defaultMenuListTokens = defaultMenuListTokens;
 //# sourceMappingURL=MenuListTokens.js.map

package/lib-commonjs/MenuList/MenuListTokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuListTokens.js","sourceRoot":"","sources":["../../src/MenuList/MenuListTokens.ts"],"names":[],"mappings":";;;AACA,oEAAmE;AAI5D,IAAM,qBAAqB,GAAyC,UAAC,CAAQ,IAAqB,OAAA,CAAC;IACxG,OAAO,EAAE,2BAAY,CAAC,OAAO,CAAC,EAAE;IAChC,QAAQ,EAAE,GAAG;IACb,QAAQ,EAAE,GAAG;IACb,eAAe,EAAE,CAAC,CAAC,MAAM,CAAC,kBAAkB;CAC7C,CAAC,EALuG,CAKvG,CAAC;AALU,QAAA,qBAAqB,yBAK/B"}
+{"version":3,"file":"MenuListTokens.js","sourceRoot":"","sources":["../../src/MenuList/MenuListTokens.ts"],"names":[],"mappings":";;;AACA,oEAAmE;AAI5D,IAAM,qBAAqB,GAAyC,UAAC,CAAQ,IAAqB,OAAA,CAAC;IACxG,OAAO,EAAE,2BAAY,CAAC,OAAO,CAAC,EAAE;IAChC,QAAQ,EAAE,GAAG;IACb,QAAQ,EAAE,GAAG;IACb,eAAe,EAAE,CAAC,CAAC,MAAM,CAAC,kBAAkB;IAC5C,GAAG,EAAE,2BAAY,CAAC,OAAO,CAAC,GAAG;CAC9B,CAAC,EANuG,CAMvG,CAAC;AANU,QAAA,qBAAqB,yBAM/B"}

package/lib-commonjs/MenuList/useMenuList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useMenuList.d.ts","sourceRoot":"","sources":["../../src/MenuList/useMenuList.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEhE,eAAO,MAAM,WAAW,WAAY,aAAa,KAAG,aAcnD,CAAC"}
+{"version":3,"file":"useMenuList.d.ts","sourceRoot":"","sources":["../../src/MenuList/useMenuList.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEhE,eAAO,MAAM,WAAW,WAAY,aAAa,KAAG,aAenD,CAAC"}

package/lib-commonjs/MenuList/useMenuList.js

@@ -9,8 +9,8 @@ var useMenuList = function (_props) {
     // MenuList v2 needs to be able to be standalone, but this is not in scope for v1
     // Assuming that checked information will come from parent Menu
     var isCheckedControlled = typeof context.checked !== 'undefined';
-    var _a = useMenuCheckedState(isCheckedControlled, context), checked = _a[0], onCheckedChange = _a[1];
-    return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, context), { isCheckedControlled: isCheckedControlled, checked: checked, onCheckedChange: onCheckedChange });
+    var _a = useMenuCheckedState(isCheckedControlled, context), checked = _a[0], onCheckedChange = _a[1], selectRadio = _a[2];
+    return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, context), { isCheckedControlled: isCheckedControlled, checked: checked, onCheckedChange: onCheckedChange, selectRadio: selectRadio });
 };
 exports.useMenuList = useMenuList;
 var useMenuCheckedState = function (isControlled, props) {
@@ -30,6 +30,16 @@ var useMenuCheckedState = function (isControlled, props) {
             onCheckedChange(e, name, isChecked);
         }
     }, [isControlled, state, onCheckedChange, setCheckedInternal]);
-    return [state, setChecked];
+    var selectRadio = react_1.default.useCallback(function (e, name, isChecked) {
+        var _a;
+        if (!isControlled) {
+            var updatedChecked = (_a = {}, _a[name] = true, _a);
+            setCheckedInternal(updatedChecked);
+        }
+        if (onCheckedChange) {
+            onCheckedChange(e, name, isChecked);
+        }
+    }, [isControlled, onCheckedChange, setCheckedInternal]);
+    return [state, setChecked, selectRadio];
 };
 //# sourceMappingURL=useMenuList.js.map

package/lib-commonjs/MenuList/useMenuList.js.map

@@ -1 +1 @@
-{"version":3,"file":"useMenuList.js","sourceRoot":"","sources":["../../src/MenuList/useMenuList.ts"],"names":[],"mappings":";;;;AACA,6DAA0B;AAC1B,sDAAwD;AAGjD,IAAM,WAAW,GAAG,UAAC,MAAqB;IAC/C,IAAM,OAAO,GAAG,IAAA,4BAAc,GAAE,CAAC;IAEjC,iFAAiF;IACjF,+DAA+D;IAC/D,IAAM,mBAAmB,GAAG,OAAO,OAAO,CAAC,OAAO,KAAK,WAAW,CAAC;IAC7D,IAAA,KAA6B,mBAAmB,CAAC,mBAAmB,EAAE,OAAO,CAAC,EAA7E,OAAO,QAAA,EAAE,eAAe,QAAqD,CAAC;IAErF,uDACK,OAAO,KACV,mBAAmB,qBAAA,EACnB,OAAO,SAAA,EACP,eAAe,iBAAA,IACf;AACJ,CAAC,CAAC;AAdW,QAAA,WAAW,eActB;AAEF,IAAM,mBAAmB,GAAG,UAC1B,YAAqB,EACrB,KAAoB;;IAEZ,IAAA,cAAc,GAA+B,KAAK,eAApC,EAAE,eAAe,GAAc,KAAK,gBAAnB,EAAE,OAAO,GAAK,KAAK,QAAV,CAAW;IAC3D,IAAM,YAAY,GAAG,MAAA,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,OAAO,mCAAI,EAAE,CAAC;IAC/C,IAAA,KAAwC,eAAK,CAAC,QAAQ,CAA0B,YAAY,CAAC,EAA5F,eAAe,QAAA,EAAE,kBAAkB,QAAyD,CAAC;IAEpG,IAAM,KAAK,GAAG,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC;IAEvD,IAAM,UAAU,GAAG,eAAK,CAAC,WAAW,CAClC,UAAC,CAAmB,EAAE,IAAY,EAAE,SAAkB;QACpD,IAAI,CAAC,YAAY,EAAE;YACjB,IAAM,UAAU,GAAG,KAAK,CAAC;YACzB,UAAU,CAAC,IAAI,CAAC,GAAG,SAAS,CAAC;YAC7B,IAAM,cAAc,6BAAQ,UAAU,CAAE,CAAC;YACzC,kBAAkB,CAAC,cAAc,CAAC,CAAC;SACpC;QAED,IAAI,eAAe,EAAE;YACnB,eAAe,CAAC,CAAC,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC;SACrC;IACH,CAAC,EACD,CAAC,YAAY,EAAE,KAAK,EAAE,eAAe,EAAE,kBAAkB,CAAC,CAC3D,CAAC;IAEF,OAAO,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;AAC7B,CAAC,CAAC"}
+{"version":3,"file":"useMenuList.js","sourceRoot":"","sources":["../../src/MenuList/useMenuList.ts"],"names":[],"mappings":";;;;AACA,6DAA0B;AAC1B,sDAAwD;AAGjD,IAAM,WAAW,GAAG,UAAC,MAAqB;IAC/C,IAAM,OAAO,GAAG,IAAA,4BAAc,GAAE,CAAC;IAEjC,iFAAiF;IACjF,+DAA+D;IAC/D,IAAM,mBAAmB,GAAG,OAAO,OAAO,CAAC,OAAO,KAAK,WAAW,CAAC;IAC7D,IAAA,KAA0C,mBAAmB,CAAC,mBAAmB,EAAE,OAAO,CAAC,EAA1F,OAAO,QAAA,EAAE,eAAe,QAAA,EAAE,WAAW,QAAqD,CAAC;IAElG,uDACK,OAAO,KACV,mBAAmB,qBAAA,EACnB,OAAO,SAAA,EACP,eAAe,iBAAA,EACf,WAAW,aAAA,IACX;AACJ,CAAC,CAAC;AAfW,QAAA,WAAW,eAetB;AAEF,IAAM,mBAAmB,GAAG,UAC1B,YAAqB,EACrB,KAAoB;;IAMZ,IAAA,cAAc,GAA+B,KAAK,eAApC,EAAE,eAAe,GAAc,KAAK,gBAAnB,EAAE,OAAO,GAAK,KAAK,QAAV,CAAW;IAC3D,IAAM,YAAY,GAAG,MAAA,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,OAAO,mCAAI,EAAE,CAAC;IAC/C,IAAA,KAAwC,eAAK,CAAC,QAAQ,CAA0B,YAAY,CAAC,EAA5F,eAAe,QAAA,EAAE,kBAAkB,QAAyD,CAAC;IAEpG,IAAM,KAAK,GAAG,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC;IAEvD,IAAM,UAAU,GAAG,eAAK,CAAC,WAAW,CAClC,UAAC,CAAmB,EAAE,IAAY,EAAE,SAAkB;QACpD,IAAI,CAAC,YAAY,EAAE;YACjB,IAAM,UAAU,GAAG,KAAK,CAAC;YACzB,UAAU,CAAC,IAAI,CAAC,GAAG,SAAS,CAAC;YAC7B,IAAM,cAAc,6BAAQ,UAAU,CAAE,CAAC;YACzC,kBAAkB,CAAC,cAAc,CAAC,CAAC;SACpC;QAED,IAAI,eAAe,EAAE;YACnB,eAAe,CAAC,CAAC,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC;SACrC;IACH,CAAC,EACD,CAAC,YAAY,EAAE,KAAK,EAAE,eAAe,EAAE,kBAAkB,CAAC,CAC3D,CAAC;IAEF,IAAM,WAAW,GAAG,eAAK,CAAC,WAAW,CACnC,UAAC,CAAmB,EAAE,IAAY,EAAE,SAAkB;;QACpD,IAAI,CAAC,YAAY,EAAE;YACjB,IAAM,cAAc,aAAK,GAAC,IAAI,IAAG,IAAI,KAAE,CAAC;YACxC,kBAAkB,CAAC,cAAc,CAAC,CAAC;SACpC;QAED,IAAI,eAAe,EAAE;YACnB,eAAe,CAAC,CAAC,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC;SACrC;IACH,CAAC,EACD,CAAC,YAAY,EAAE,eAAe,EAAE,kBAAkB,CAAC,CACpD,CAAC;IAEF,OAAO,CAAC,KAAK,EAAE,UAAU,EAAE,WAAW,CAAC,CAAC;AAC1C,CAAC,CAAC"}

package/lib-commonjs/MenuList/{useMenuContextValue.d.ts → useMenuListContextValue.d.ts}

@@ -1,4 +1,4 @@
 import { MenuListContextValue } from '../context/menuListContext';
 import { MenuListState } from './MenuList.types';
 export declare const useMenuListContextValue: (state: MenuListState) => MenuListContextValue;
-//# sourceMappingURL=useMenuContextValue.d.ts.map
+//# sourceMappingURL=useMenuListContextValue.d.ts.map

package/lib-commonjs/MenuList/useMenuListContextValue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMenuListContextValue.d.ts","sourceRoot":"","sources":["../../src/MenuList/useMenuListContextValue.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,eAAO,MAAM,uBAAuB,UAAW,aAAa,KAAG,oBAE9D,CAAC"}

package/lib-commonjs/MenuList/{useMenuContextValue.js → useMenuListContextValue.js}

@@ -6,4 +6,4 @@ var useMenuListContextValue = function (state) {
     return (0, tslib_1.__assign)({}, state);
 };
 exports.useMenuListContextValue = useMenuListContextValue;
-//# sourceMappingURL=useMenuContextValue.js.map
+//# sourceMappingURL=useMenuListContextValue.js.map

package/lib-commonjs/MenuList/useMenuListContextValue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMenuListContextValue.js","sourceRoot":"","sources":["../../src/MenuList/useMenuListContextValue.ts"],"names":[],"mappings":";;;;AAGO,IAAM,uBAAuB,GAAG,UAAC,KAAoB;IAC1D,iCAAY,KAAK,EAAG;AACtB,CAAC,CAAC;AAFW,QAAA,uBAAuB,2BAElC"}

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

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

package/lib-commonjs/MenuPopover/MenuPopover.js

@@ -11,7 +11,7 @@ exports.MenuPopover = (0, framework_1.stagedComponent)(function (props) {
     var state = (0, useMenuPopover_1.useMenuPopover)(props);
     var theme = (0, framework_1.useFluentTheme)();
     return function (_rest, children) {
-        return (react_1.default.createElement(callout_1.Callout, { borderWidth: 1, borderColor: theme.colors.neutralStrokeAccessible, target: state.triggerRef, onDismiss: state.onDismiss, dismissBehaviors: state.dismissBehaviors }, children));
+        return (react_1.default.createElement(callout_1.Callout, { borderWidth: 1, borderColor: theme.colors.neutralStrokeAccessible, target: state.triggerRef, onDismiss: state.onDismiss, dismissBehaviors: state.dismissBehaviors, setInitialFocus: state.setInitialFocus, doNotTakePointerCapture: state.doNotTakePointerCapture }, children));
     };
 });
 exports.MenuPopover.displayName = MenuPopover_types_1.menuPopoverName;

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

@@ -1 +1 @@
-{"version":3,"file":"MenuPopover.js","sourceRoot":"","sources":["../../src/MenuPopover/MenuPopover.tsx"],"names":[],"mappings":";;;;AAAA,6DAA0B;AAC1B,8DAAmF;AACnF,0DAAyD;AACzD,yDAAwE;AACxE,mDAAkD;AAErC,QAAA,WAAW,GAAG,IAAA,2BAAe,EAAC,UAAC,KAAuB;IACjE,IAAM,KAAK,GAAG,IAAA,+BAAc,EAAC,KAAK,CAAC,CAAC;IACpC,IAAM,KAAK,GAAG,IAAA,0BAAc,GAAE,CAAC;IAE/B,OAAO,UAAC,KAAuB,EAAE,QAAyB;QACxD,OAAO,CACL,8BAAC,iBAAO,IACN,WAAW,EAAE,CAAC,EACd,WAAW,EAAE,KAAK,CAAC,MAAM,CAAC,uBAAuB,EACjD,MAAM,EAAE,KAAK,CAAC,UAAU,EACxB,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,gBAAgB,EAAE,KAAK,CAAC,gBAAgB,IAEvC,QAAQ,CACD,CACX,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,mBAAW,CAAC,WAAW,GAAG,mCAAe,CAAC;AAE1C,kBAAe,mBAAW,CAAC"}
+{"version":3,"file":"MenuPopover.js","sourceRoot":"","sources":["../../src/MenuPopover/MenuPopover.tsx"],"names":[],"mappings":";;;;AAAA,6DAA0B;AAC1B,8DAAmF;AACnF,0DAAyD;AACzD,yDAAwE;AACxE,mDAAkD;AAErC,QAAA,WAAW,GAAG,IAAA,2BAAe,EAAC,UAAC,KAAuB;IACjE,IAAM,KAAK,GAAG,IAAA,+BAAc,EAAC,KAAK,CAAC,CAAC;IACpC,IAAM,KAAK,GAAG,IAAA,0BAAc,GAAE,CAAC;IAE/B,OAAO,UAAC,KAAuB,EAAE,QAAyB;QACxD,OAAO,CACL,8BAAC,iBAAO,IACN,WAAW,EAAE,CAAC,EACd,WAAW,EAAE,KAAK,CAAC,MAAM,CAAC,uBAAuB,EACjD,MAAM,EAAE,KAAK,CAAC,UAAU,EACxB,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,gBAAgB,EAAE,KAAK,CAAC,gBAAgB,EACxC,eAAe,EAAE,KAAK,CAAC,eAAe,EACtC,uBAAuB,EAAE,KAAK,CAAC,uBAAuB,IAErD,QAAQ,CACD,CACX,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,mBAAW,CAAC,WAAW,GAAG,mCAAe,CAAC;AAE1C,kBAAe,mBAAW,CAAC"}

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

@@ -6,7 +6,9 @@ export interface MenuPopoverProps extends Omit<IViewProps, 'onPress'> {
 }
 export interface MenuPopoverState {
     dismissBehaviors: DismissBehaviors[];
+    doNotTakePointerCapture: boolean;
     onDismiss: () => void;
+    setInitialFocus: boolean;
     triggerRef: React.RefObject<React.Component>;
 }
 //# sourceMappingURL=MenuPopover.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"MenuPopover.types.d.ts","sourceRoot":"","sources":["../../src/MenuPopover/MenuPopover.types.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAClE,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAElE,eAAO,MAAM,eAAe,gBAAgB,CAAC;AAE7C,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC;CAAG;AAExE,MAAM,WAAW,gBAAgB;IAC/B,gBAAgB,EAAE,gBAAgB,EAAE,CAAC;IACrC,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;CAC9C"}
+{"version":3,"file":"MenuPopover.types.d.ts","sourceRoot":"","sources":["../../src/MenuPopover/MenuPopover.types.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAClE,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAElE,eAAO,MAAM,eAAe,gBAAgB,CAAC;AAE7C,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC;CAAG;AAExE,MAAM,WAAW,gBAAgB;IAC/B,gBAAgB,EAAE,gBAAgB,EAAE,CAAC;IACrC,uBAAuB,EAAE,OAAO,CAAC;IACjC,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,eAAe,EAAE,OAAO,CAAC;IACzB,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;CAC9C"}

package/lib-commonjs/MenuPopover/useMenuPopover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useMenuPopover.d.ts","sourceRoot":"","sources":["../../src/MenuPopover/useMenuPopover.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAEzE,eAAO,MAAM,cAAc,WAAY,gBAAgB,KAAG,gBAWzD,CAAC"}
+{"version":3,"file":"useMenuPopover.d.ts","sourceRoot":"","sources":["../../src/MenuPopover/useMenuPopover.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAEzE,eAAO,MAAM,cAAc,WAAY,gBAAgB,KAAG,gBAgBzD,CAAC"}

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,11 @@ var useMenuPopover = function (_props) {
     var dismissBehaviors = context.isControlled
         ? ['preventDismissOnKeyDown', 'preventDismissOnClickOutside']
         : undefined;
-    return { triggerRef: triggerRef, onDismiss: onDismiss, dismissBehaviors: dismissBehaviors };
+    // 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, dismissBehaviors: dismissBehaviors, doNotTakePointerCapture: doNotTakePointerCapture, setInitialFocus: setInitialFocus };
 };
 exports.useMenuPopover = useMenuPopover;
 //# 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,6CAAwC;AAExC,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,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,gBAAgB,kBAAA,EAAE,uBAAuB,yBAAA,EAAE,eAAe,iBAAA,EAAE,CAAC;AAC/F,CAAC,CAAC;AAhBW,QAAA,cAAc,kBAgBzB"}

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

@@ -4,6 +4,9 @@ import { MenuTriggerProps } from './MenuTrigger.types';
 export declare const useMenuTrigger: (_props: MenuTriggerProps) => {
     onClick: (e: InteractionEvent) => void;
     onHoverIn: (e: InteractionEvent) => void;
+    onHoverOut: (e: InteractionEvent) => void;
     componentRef: import("react").RefObject<import("react").Component<{}, {}, any>>;
+    delayHoverIn: number;
+    delayHoverOut: number;
 };
 //# 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":";AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AAC5E,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAGvD,eAAO,MAAM,cAAc,WAAY,gBAAgB;iBAyBjC,gBAAgB;mBAZd,gBAAgB;oBAMf,gBAAgB;;;;CAWxC,CAAC"}

package/lib-commonjs/MenuTrigger/useMenuTrigger.js

@@ -2,21 +2,31 @@
 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 { onClick: onClick, onHoverIn: onHoverIn, onHoverOut: onHoverOut, componentRef: triggerRef, delayHoverIn: delayHover, delayHoverOut: delayHover };
 };
 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,EAAE,OAAO,SAAA,EAAE,SAAS,WAAA,EAAE,UAAU,YAAA,EAAE,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE,UAAU,EAAE,CAAC;AAC3H,CAAC,CAAC;AA9BW,QAAA,cAAc,kBA8BzB"}

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.1",
+  "version": "0.10.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.1 <1.0.0",
-    "@fluentui-react-native/experimental-text": ">=0.7.27 <1.0.0",
-    "@fluentui-react-native/framework": "0.7.27",
-    "@fluentui-react-native/interactive-hooks": ">=0.15.7 <1.0.0",
-    "@fluentui-react-native/theme-tokens": ">=0.16.3 <1.0.0",
-    "@fluentui-react-native/tokens": ">=0.12.1 <1.0.0",
+    "@fluentui-react-native/callout": ">=0.20.3 <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.15.10 <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/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;

package/src/MenuList/MenuList.types.ts

@@ -4,7 +4,9 @@ import { IBackgroundColorTokens, LayoutTokens } from '@fluentui-react-native/tok
 
 export const menuListName = 'MenuList';
 
-export interface MenuListTokens extends LayoutTokens, IBackgroundColorTokens {}
+export interface MenuListTokens extends LayoutTokens, IBackgroundColorTokens {
+  gap?: number;
+}
 
 export interface MenuListProps extends Omit<IViewProps, 'onPress'> {
   checked?: Record<string, boolean>;
@@ -15,10 +17,11 @@ export interface MenuListProps extends Omit<IViewProps, 'onPress'> {
 
 export interface MenuListState extends MenuListProps {
   isCheckedControlled: boolean;
+  selectRadio?: (e: InteractionEvent, name: string, isChecked: boolean) => void;
 }
 
 export interface MenuListSlotProps {
-  root: React.PropsWithRef<IViewProps>;
+  root: React.PropsWithRef<IViewProps> & { gap?: number };
 }
 export interface MenuListType {
   props: MenuListProps;

package/src/MenuList/MenuListTokens.ts

@@ -8,4 +8,5 @@ export const defaultMenuListTokens: TokenSettings<MenuListTokens, Theme> = (t: T
   minWidth: 128,
   maxWidth: 300,
   backgroundColor: t.colors.neutralBackground1,
+  gap: globalTokens.spacing.xxs,
 });

package/src/MenuList/useMenuList.ts

@@ -9,20 +9,25 @@ export const useMenuList = (_props: MenuListProps): MenuListState => {
   // MenuList v2 needs to be able to be standalone, but this is not in scope for v1
   // Assuming that checked information will come from parent Menu
   const isCheckedControlled = typeof context.checked !== 'undefined';
-  const [checked, onCheckedChange] = useMenuCheckedState(isCheckedControlled, context);
+  const [checked, onCheckedChange, selectRadio] = useMenuCheckedState(isCheckedControlled, context);
 
   return {
     ...context,
     isCheckedControlled,
     checked,
     onCheckedChange,
+    selectRadio,
   };
 };
 
 const useMenuCheckedState = (
   isControlled: boolean,
   props: MenuListProps,
-): [Record<string, boolean>, (e: InteractionEvent, name: string, isChecked: boolean) => void] => {
+): [
+  Record<string, boolean>,
+  (e: InteractionEvent, name: string, isChecked: boolean) => void,
+  (e: InteractionEvent, name: string, isChecked: boolean) => void,
+] => {
   const { defaultChecked, onCheckedChange, checked } = props;
   const initialState = defaultChecked ?? checked ?? {};
   const [checkedInternal, setCheckedInternal] = React.useState<Record<string, boolean>>(initialState);
@@ -45,5 +50,19 @@ const useMenuCheckedState = (
     [isControlled, state, onCheckedChange, setCheckedInternal],
   );
 
-  return [state, setChecked];
+  const selectRadio = React.useCallback(
+    (e: InteractionEvent, name: string, isChecked: boolean) => {
+      if (!isControlled) {
+        const updatedChecked = { [name]: true };
+        setCheckedInternal(updatedChecked);
+      }
+
+      if (onCheckedChange) {
+        onCheckedChange(e, name, isChecked);
+      }
+    },
+    [isControlled, onCheckedChange, setCheckedInternal],
+  );
+
+  return [state, setChecked, selectRadio];
 };

package/src/MenuPopover/MenuPopover.tsx

@@ -16,6 +16,8 @@ export const MenuPopover = stagedComponent((props: MenuPopoverProps) => {
         target={state.triggerRef}
         onDismiss={state.onDismiss}
         dismissBehaviors={state.dismissBehaviors}
+        setInitialFocus={state.setInitialFocus}
+        doNotTakePointerCapture={state.doNotTakePointerCapture}
       >
         {children}
       </Callout>