@fluentui-react-native/menu 0.14.4 → 0.14.7

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

@@ -1 +1 @@
-{"version":3,"file":"useMenuTrigger.js","sourceRoot":"","sources":["../../src/MenuTrigger/useMenuTrigger.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"useMenuTrigger.js","sourceRoot":"","sources":["../../src/MenuTrigger/useMenuTrigger.ts"],"names":[],"mappings":";;;;AAAA,sDAAwD;AAGxD,6CAA2F;AAC3F,6DAA0B;AAC1B,oCAAiE;AAEjE,IAAM,oBAAoB,GACxB,uBAAQ,CAAC,EAAE,KAAM,OAAe,CAAC,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,QAAmC,EAAE,EAAE,EAAE,IAAI,EAAE,UAAqC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;AAC3I,IAAM,aAAa,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AACzC,IAAM,cAAc,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC;AAEpC,IAAM,cAAc,GAAG;IAC5B,IAAM,OAAO,GAAG,IAAA,4BAAc,GAAE,CAAC;IACzB,IAAA,IAAI,GAA4G,OAAO,KAAnH,EAAE,WAAW,GAA+F,OAAO,YAAtG,EAAE,oBAAoB,GAAyE,OAAO,qBAAhF,EAAE,OAAO,GAAgE,OAAO,QAAvE,EAAE,uBAAuB,GAAuC,OAAO,wBAA9C,EAAE,oBAAoB,GAAiB,OAAO,qBAAxB,EAAE,UAAU,GAAK,OAAO,WAAZ,CAAa;IAEhI,IAAM,kBAAkB,GAAG,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,cAAc,CAAC;IAEjE,IAAM,qBAAqB,GAAG,eAAK,CAAC,WAAW,CAC7C,UAAC,CAA2B;QAC1B,IAAI,uBAAQ,CAAC,EAAE,KAAM,OAAe,EAAE;YACpC,QAAQ,CAAC,CAAC,WAAW,CAAC,UAAU,EAAE;gBAChC,KAAK,QAAQ;oBACX,OAAO,CAAC,CAAC,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;oBAC9B,MAAM;gBAER,KAAK,UAAU;oBACb,OAAO,CAAC,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC;oBAC/B,MAAM;aACT;SACF;IACH,CAAC,EACD,CAAC,OAAO,CAAC,CACV,CAAC;IAEF,IAAM,SAAS,GAAG,eAAK,CAAC,WAAW,CACjC,UAAC,CAAmB;QAClB,IAAI,WAAW,EAAE;YACf,YAAY,CAAC,oBAAoB,CAAC,CAAC;YACnC,YAAY,CAAC,oBAAoB,CAAC,CAAC;YACnC,CAAC,CAAC,OAAO,EAAE,CAAC;YACZ,UAAU,CAAC;gBACT,OAAO,CAAC,CAAC,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;YAChC,CAAC,EAAE,mBAAU,CAAC,CAAC;SAChB;IACH,CAAC,EACD,CAAC,WAAW,EAAE,OAAO,EAAE,oBAAoB,EAAE,oBAAoB,CAAC,CACnE,CAAC;IAEF,IAAM,UAAU,GAAG,eAAK,CAAC,WAAW,CAClC,UAAC,CAAmB;QAClB,IAAI,WAAW,EAAE;YACf,CAAC,CAAC,OAAO,EAAE,CAAC;YACZ,IAAM,KAAK,GAAG,UAAU,CAAC;gBACvB,OAAO,CAAC,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC;YACjC,CAAC,EAAE,mBAAU,CAAC,CAAC;YACf,uBAAuB,CAAC,KAAK,CAAC,CAAC;SAChC;IACH,CAAC,EACD,CAAC,WAAW,EAAE,OAAO,EAAE,uBAAuB,CAAC,CAChD,CAAC;IAEF,IAAM,OAAO,GAAG,eAAK,CAAC,WAAW,CAC/B,UAAC,CAAmB;QAClB,OAAO,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC;IACpB,CAAC,EACD,CAAC,IAAI,EAAE,OAAO,CAAC,CAChB,CAAC;IAEF,OAAO;QACL,KAAK,EAAE;YACL,OAAO,SAAA;YACP,SAAS,WAAA;YACT,UAAU,EAAE,iCAAwB,IAAI,UAAU;YAClD,YAAY,EAAE,UAAU;YACxB,kBAAkB,oBAAA;YAClB,oBAAoB,sBAAA;YACpB,qBAAqB,uBAAA;SACtB;QACD,UAAU,EAAE,OAAO,CAAC,SAAS;KAC9B,CAAC;AACJ,CAAC,CAAC;AArEW,QAAA,cAAc,kBAqEzB"}

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,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"}
+{"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,iCAWtB,CAAC;AAEH,eAAO,MAAM,YAAY,kCAAuB,CAAC;AACjD,eAAO,MAAM,cAAc,wBAAsC,CAAC"}

package/lib-commonjs/context/menuContext.js

@@ -12,6 +12,7 @@ exports.MenuContext = React.createContext({
     open: false,
     onCheckedChange: function () { return false; },
     setOpen: function () { return false; },
+    shouldFocusOnContainer: false,
     triggerRef: null,
 });
 exports.MenuProvider = exports.MenuContext.Provider;

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;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"}
+{"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,sBAAsB,EAAE,KAAK;IAC7B,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.14.4",
+  "version": "0.14.7",
   "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.6 <1.0.0",
+    "@fluentui-react-native/callout": ">=0.20.7 <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.2 <1.0.0",
+    "@fluentui-react-native/interactive-hooks": ">=0.16.3 <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,7 +34,7 @@
     "tslib": "^2.3.1"
   },
   "devDependencies": {
-    "@fluentui-react-native/button": ">=0.22.27 <1.0.0",
+    "@fluentui-react-native/button": ">=0.22.29 <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",

package/src/Menu/Menu.types.ts

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

package/src/Menu/useMenu.ts

@@ -1,5 +1,6 @@
-import { InteractionEvent } from '@fluentui-react-native/interactive-hooks';
+import { InteractionEvent, isMouseEvent } from '@fluentui-react-native/interactive-hooks';
 import React from 'react';
+import { Platform } from 'react-native';
 import { useMenuContext } from '../context/menuContext';
 import { MenuProps, MenuState } from './Menu.types';
 
@@ -15,7 +16,7 @@ export const useMenu = (props: MenuProps): MenuState => {
   const context = useMenuContext();
   const isSubmenu = context.triggerRef !== null;
   const isOpenControlled = typeof props.open !== 'undefined';
-  const [open, setOpen] = useMenuOpenState(isOpenControlled, props, context.setOpen);
+  const [open, shouldFocusOnContainer, setOpen] = useMenuOpenState(isOpenControlled, props, context.setOpen);
 
   const [checked, onCheckedChange] = useMenuCheckedState(props);
 
@@ -35,6 +36,7 @@ export const useMenu = (props: MenuProps): MenuState => {
     ...props,
     open,
     setOpen,
+    shouldFocusOnContainer,
     checked,
     onCheckedChange,
     triggerRef,
@@ -48,25 +50,30 @@ const useMenuOpenState = (
   isControlled: boolean,
   props: MenuProps,
   parentSetOpen: (e: InteractionEvent, isOpen: boolean, bubble?: boolean) => void,
-): [boolean, (e: InteractionEvent, isOpen: boolean, bubble?: boolean) => void] => {
+): [boolean, boolean, (e: InteractionEvent, isOpen: boolean, bubble?: boolean) => void] => {
   const { defaultOpen, onOpenChange, open } = props;
   const initialState = typeof defaultOpen !== 'undefined' ? defaultOpen : !!open;
   const [openInternal, setOpenInternal] = React.useState<boolean>(initialState);
+  const [shouldFocusOnContainer, setShouldFocusOnContainer] = React.useState<boolean>(false);
 
   const state = isControlled ? open : openInternal;
 
   const setOpen = React.useCallback(
     (e: InteractionEvent, isOpen: boolean, bubble?: boolean) => {
       const openPrev = state;
-      if (!isControlled) {
-        if (!isOpen || lastCloseTimestamp + delayOpen <= Date.now()) {
-          setOpenInternal(isOpen);
-        }
+      if (!isControlled && (!isOpen || lastCloseTimestamp + delayOpen <= Date.now())) {
+        setOpenInternal(isOpen);
+      }
 
-        if (!isOpen) {
-          lastCloseTimestamp = Date.now();
-        }
+      if (isOpen && Platform.OS === ('win32' as any) && isMouseEvent(e)) {
+        setShouldFocusOnContainer(true);
       }
+
+      if (!isOpen) {
+        setShouldFocusOnContainer(false);
+        lastCloseTimestamp = Date.now();
+      }
+
       if (onOpenChange && openPrev !== isOpen) {
         onOpenChange(e, isOpen);
       }
@@ -78,7 +85,7 @@ const useMenuOpenState = (
     [isControlled, state, onOpenChange, setOpenInternal, parentSetOpen],
   );
 
-  return [state, setOpen];
+  return [state, shouldFocusOnContainer, setOpen];
 };
 
 const useMenuCheckedState = (props: MenuProps): [string[], (e: InteractionEvent, checked: string[]) => void] => {

package/src/MenuDivider/MenuDividerTokens.macos.ts

@@ -0,0 +1,10 @@
+import { Theme } from '@fluentui-react-native/framework';
+import { globalTokens } from '@fluentui-react-native/theme-tokens';
+import { TokenSettings } from '@fluentui-react-native/use-styling';
+import { MenuDividerTokens } from './MenuDivider.types';
+
+export const defaultMenuDividerTokens: TokenSettings<MenuDividerTokens, Theme> = (t: Theme): MenuDividerTokens => ({
+  backgroundColor: t.colors.neutralStroke2,
+  height: globalTokens.stroke.width.thin,
+  margin: globalTokens.spacing.xxs,
+});

package/src/MenuItem/MenuItem.styling.ts

@@ -1,5 +1,5 @@
 import { Theme, UseStylingOptions, buildProps } from '@fluentui-react-native/framework';
-import { fontStyles, layoutStyles } from '@fluentui-react-native/tokens';
+import { borderStyles, fontStyles, layoutStyles } from '@fluentui-react-native/tokens';
 import { defaultMenuItemTokens } from './MenuItemTokens';
 import { menuItemName, MenuItemProps, MenuItemTokens, MenuItemSlotProps } from './MenuItem.types';
 
@@ -17,6 +17,7 @@ export const stylingSettings: UseStylingOptions<MenuItemProps, MenuItemSlotProps
           display: 'flex',
           flexDirection: 'row',
           ...layoutStyles.from(tokens, theme),
+          ...borderStyles.from(tokens, theme),
         },
       }),
       ['backgroundColor', ...layoutStyles.keys],
@@ -47,8 +48,8 @@ export const stylingSettings: UseStylingOptions<MenuItemProps, MenuItemSlotProps
       (tokens: MenuItemTokens) => {
         return {
           color: tokens.color,
-          height: 16,
-          width: 16,
+          height: tokens.submenuIndicatorSize,
+          width: tokens.submenuIndicatorSize,
           viewBox:
             '0 0 ' +
             (tokens.submenuIndicatorSize - tokens.submenuIndicatorPadding * 2) +

package/src/MenuItem/MenuItemTokens.macos.ts

@@ -0,0 +1,31 @@
+import { FontWeightValue, Theme } from '@fluentui-react-native/framework';
+import { globalTokens } from '@fluentui-react-native/theme-tokens';
+import { TokenSettings } from '@fluentui-react-native/use-styling';
+import { MenuItemTokens } from './MenuItem.types';
+
+export const defaultMenuItemTokens: TokenSettings<MenuItemTokens, Theme> = (t: Theme): MenuItemTokens => ({
+  backgroundColor: t.colors.transparentBackground,
+  borderRadius: 5, // hardcoded for now to match ContextualMenu
+  checkmarkSize: 16,
+  submenuIndicatorPadding: globalTokens.spacing.none,
+  submenuIndicatorSize: 16,
+  color: t.colors.neutralForeground2,
+  fontFamily: t.typography.families.primary,
+  fontSize: globalTokens.font.size[300],
+  fontWeight: globalTokens.font.weight.regular as FontWeightValue,
+  gap: globalTokens.spacing.xs,
+  paddingHorizontal: 5, // hardcoded for now to match ContextualMenu
+  paddingVertical: 3, // hardcoded for now to match ContextualMenu
+  focused: {
+    backgroundColor: t.colors.brandBackground,
+    color: t.colors.brandedContent,
+  },
+  pressed: {
+    backgroundColor: t.colors.brandBackgroundPressed,
+    color: t.colors.brandedPressedContent,
+  },
+  disabled: {
+    backgroundColor: t.colors.transparentBackground,
+    color: t.colors.neutralForegroundDisabled,
+  },
+});

package/src/MenuItem/useMenuItem.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { AccessibilityState, I18nManager } from 'react-native';
+import { AccessibilityState, I18nManager, Platform } from 'react-native';
 import { MenuItemProps, MenuItemState } from './MenuItem.types';
 import { memoize } from '@fluentui-react-native/framework';
 import { InteractionEvent, isKeyPressEvent, useAsPressable, useKeyDownProps } from '@fluentui-react-native/interactive-hooks';
@@ -70,8 +70,14 @@ export const useMenuItem = (props: MenuItemProps): MenuItemState => {
       onAccessibilityTap: props.onAccessibilityTap || onInvoke,
       accessibilityLabel: props.accessibilityLabel || props.content,
       accessibilityState: getAccessibilityState(disabled, accessibilityState),
-      enableFocusRing: true,
-      focusable: true,
+      enableFocusRing: Platform.select({
+        macos: false,
+        default: true, // win32
+      }),
+      focusable: Platform.select({
+        macos: !disabled,
+        default: true, // win32
+      }),
       ref: componentRef,
       ...onKeyDownProps,
     },

package/src/MenuItemCheckbox/MenuItemCheckbox.styling.ts

@@ -1,5 +1,5 @@
 import { Theme, UseStylingOptions, buildProps } from '@fluentui-react-native/framework';
-import { fontStyles, layoutStyles } from '@fluentui-react-native/tokens';
+import { borderStyles, fontStyles, layoutStyles } from '@fluentui-react-native/tokens';
 import { defaultMenuItemCheckboxTokens } from './MenuItemCheckboxTokens';
 import { menuItemCheckboxName, MenuItemCheckboxProps, MenuItemCheckboxTokens, MenuItemCheckboxSlotProps } from './MenuItemCheckbox.types';
 
@@ -17,6 +17,7 @@ export const stylingSettings: UseStylingOptions<MenuItemCheckboxProps, MenuItemC
           display: 'flex',
           flexDirection: 'row',
           ...layoutStyles.from(tokens, theme),
+          ...borderStyles.from(tokens, theme),
         },
       }),
       ['backgroundColor', ...layoutStyles.keys],

package/src/MenuItemCheckbox/MenuItemCheckboxTokens.macos.ts

@@ -0,0 +1,47 @@
+import { FontWeightValue, Theme } from '@fluentui-react-native/framework';
+import { globalTokens } from '@fluentui-react-native/theme-tokens';
+import { TokenSettings } from '@fluentui-react-native/use-styling';
+import { MenuItemCheckboxTokens } from './MenuItemCheckbox.types';
+
+export const defaultMenuItemCheckboxTokens: TokenSettings<MenuItemCheckboxTokens, Theme> = (t: Theme): MenuItemCheckboxTokens => ({
+  backgroundColor: t.colors.transparentBackground,
+  borderRadius: 5,
+  checkmarkPadding: globalTokens.spacing.none,
+  checkmarkSize: 16,
+  checkmarkVisibility: 0,
+  color: t.colors.neutralForeground2,
+  fontFamily: t.typography.families.primary,
+  fontSize: globalTokens.font.size[300],
+  fontWeight: globalTokens.font.weight.regular as FontWeightValue,
+  gap: globalTokens.spacing.xs,
+  paddingHorizontal: 5,
+  paddingVertical: 3,
+  focused: {
+    backgroundColor: t.colors.brandBackground,
+    color: t.colors.brandedContent,
+    checked: {
+      checkmarkColor: t.colors.neutralForeground2Hover,
+      checkmarkVisibility: 1,
+    },
+  },
+  pressed: {
+    backgroundColor: t.colors.brandBackgroundPressed,
+    color: t.colors.brandedPressedContent,
+    checked: {
+      checkmarkColor: t.colors.brandedPressedContent,
+      checkmarkVisibility: 1,
+    },
+  },
+  disabled: {
+    backgroundColor: t.colors.transparentBackground,
+    color: t.colors.brandForeground1Disabled,
+    checked: {
+      checkmarkColor: t.colors.brandForeground1Disabled,
+      checkmarkVisibility: 1,
+    },
+  },
+  checked: {
+    checkmarkColor: t.colors.neutralForeground2,
+    checkmarkVisibility: 1,
+  },
+});

package/src/MenuItemCheckbox/useMenuItemCheckbox.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { AccessibilityActionEvent, AccessibilityState } from 'react-native';
+import { AccessibilityActionEvent, AccessibilityState, Platform } from 'react-native';
 import { MenuItemCheckboxProps, MenuItemCheckboxState } from './MenuItemCheckbox.types';
 import { memoize } from '@fluentui-react-native/framework';
 import {
@@ -67,7 +67,7 @@ export const useMenuCheckboxInteraction = (
   // Ensure focus is placed on checkbox after click
   const toggleCheckedWithFocus = useOnPressWithFocus(componentRef, toggleCallback);
 
-  const pressable = useAsPressable({ onPress: toggleCheckedWithFocus, ...rest });
+  const pressable = useAsPressable({ ...rest, disabled, onPress: toggleCheckedWithFocus });
   const buttonRef = useViewCommandFocus(componentRef);
 
   const onKeyProps = useKeyProps(toggleCallback, ' ');
@@ -100,8 +100,14 @@ export const useMenuCheckboxInteraction = (
       accessibilityLabel: props.accessibilityLabel || props.content,
       accessibilityRole: 'menuitem',
       accessibilityState: getAccessibilityState(disabled, state.checked, accessibilityState),
-      enableFocusRing: true,
-      focusable: true,
+      enableFocusRing: Platform.select({
+        macos: false,
+        default: true, // win32
+      }),
+      focusable: Platform.select({
+        macos: !disabled,
+        default: true, // win32
+      }),
       onAccessibilityAction: onAccessibilityActionProp,
       ref: buttonRef,
       ...onKeyProps,

package/src/MenuList/MenuList.types.ts

@@ -1,6 +1,7 @@
 import type { IViewProps } from '@fluentui-react-native/adapters';
 import { InteractionEvent } from '@fluentui-react-native/interactive-hooks';
 import { IBackgroundColorTokens, LayoutTokens } from '@fluentui-react-native/tokens';
+import React from 'react';
 
 export const menuListName = 'MenuList';
 

package/src/MenuList/MenuListTokens.macos.ts

@@ -0,0 +1,10 @@
+import { Theme } from '@fluentui-react-native/framework';
+import { globalTokens } from '@fluentui-react-native/theme-tokens';
+import { TokenSettings } from '@fluentui-react-native/use-styling';
+import { MenuListTokens } from './MenuList.types';
+
+export const defaultMenuListTokens: TokenSettings<MenuListTokens, Theme> = (t: Theme): MenuListTokens => ({
+  padding: 5, // hardcoded for now to match ContextualMenu
+  backgroundColor: t.colors.transparentBackground,
+  gap: globalTokens.spacing.xxs,
+});

package/src/MenuPopover/useMenuPopover.ts

@@ -18,6 +18,7 @@ export const useMenuPopover = (_props: MenuPopoverProps): MenuPopoverState => {
     parentPopoverHoverOutTimer,
     popoverHoverOutTimer,
     setPopoverHoverOutTimer,
+    shouldFocusOnContainer,
     triggerHoverOutTimer,
   } = context;
 
@@ -60,6 +61,8 @@ export const useMenuPopover = (_props: MenuPopoverProps): MenuPopoverState => {
     innerView: {
       onMouseEnter,
       onMouseLeave: isCloseOnHoverOutEnabled && onMouseLeave,
+      accessible: shouldFocusOnContainer,
+      focusable: shouldFocusOnContainer,
     },
   };
 };

package/src/MenuTrigger/useMenuTrigger.ts

@@ -38,6 +38,7 @@ export const useMenuTrigger = (): MenuTriggerState => {
       if (openOnHover) {
         clearTimeout(popoverHoverOutTimer);
         clearTimeout(triggerHoverOutTimer);
+        e.persist();
         setTimeout(() => {
           setOpen(e, true /* isOpen */);
         }, delayHover);
@@ -49,6 +50,7 @@ export const useMenuTrigger = (): MenuTriggerState => {
   const onHoverOut = React.useCallback(
     (e: InteractionEvent) => {
       if (openOnHover) {
+        e.persist();
         const timer = setTimeout(() => {
           setOpen(e, false /* isOpen */);
         }, delayHover);

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

@@ -153,6 +153,8 @@ Array [
     }
   >
     <View
+      accessible={false}
+      focusable={false}
       onMouseEnter={[Function]}
       onMouseLeave={false}
     >
@@ -194,6 +196,7 @@ Array [
             Object {
               "alignItems": "center",
               "backgroundColor": "#ffffff",
+              "borderRadius": 4,
               "display": "flex",
               "flexDirection": "row",
               "maxWidth": 300,
@@ -248,6 +251,7 @@ Array [
             Object {
               "alignItems": "center",
               "backgroundColor": "#ffffff",
+              "borderRadius": 4,
               "display": "flex",
               "flexDirection": "row",
               "marginTop": 2,
@@ -371,6 +375,8 @@ Array [
     }
   >
     <View
+      accessible={false}
+      focusable={false}
       onMouseEnter={[Function]}
       onMouseLeave={false}
     >
@@ -412,6 +418,7 @@ Array [
             Object {
               "alignItems": "center",
               "backgroundColor": "#ffffff",
+              "borderRadius": 4,
               "display": "flex",
               "flexDirection": "row",
               "maxWidth": 300,
@@ -534,6 +541,8 @@ Array [
     }
   >
     <View
+      accessible={false}
+      focusable={false}
       onMouseEnter={[Function]}
       onMouseLeave={false}
     >
@@ -583,6 +592,7 @@ Array [
             Object {
               "alignItems": "center",
               "backgroundColor": "#ffffff",
+              "borderRadius": 4,
               "display": "flex",
               "flexDirection": "row",
               "maxWidth": 300,
@@ -691,6 +701,7 @@ Array [
           }
           accessible={true}
           content="Option 2"
+          disabled={true}
           enableFocusRing={true}
           focusable={true}
           onAccessibilityAction={[Function]}
@@ -708,6 +719,7 @@ Array [
             Object {
               "alignItems": "center",
               "backgroundColor": "#ffffff",
+              "borderRadius": 4,
               "display": "flex",
               "flexDirection": "row",
               "marginTop": 2,
@@ -883,6 +895,8 @@ Array [
     }
   >
     <View
+      accessible={false}
+      focusable={false}
       onMouseEnter={[Function]}
       onMouseLeave={false}
     >
@@ -932,6 +946,7 @@ Array [
             Object {
               "alignItems": "center",
               "backgroundColor": "#ffffff",
+              "borderRadius": 4,
               "display": "flex",
               "flexDirection": "row",
               "maxWidth": 300,
@@ -1057,6 +1072,7 @@ Array [
             Object {
               "alignItems": "center",
               "backgroundColor": "#ffffff",
+              "borderRadius": 4,
               "display": "flex",
               "flexDirection": "row",
               "marginTop": 2,
@@ -1232,6 +1248,8 @@ Array [
     }
   >
     <View
+      accessible={false}
+      focusable={false}
       onMouseEnter={[Function]}
       onMouseLeave={false}
     >
@@ -1281,6 +1299,7 @@ Array [
             Object {
               "alignItems": "center",
               "backgroundColor": "#ffffff",
+              "borderRadius": 4,
               "display": "flex",
               "flexDirection": "row",
               "maxWidth": 300,
@@ -1406,6 +1425,7 @@ Array [
             Object {
               "alignItems": "center",
               "backgroundColor": "#ffffff",
+              "borderRadius": 4,
               "display": "flex",
               "flexDirection": "row",
               "marginTop": 2,
@@ -1581,6 +1601,8 @@ Array [
     }
   >
     <View
+      accessible={false}
+      focusable={false}
       onMouseEnter={[Function]}
       onMouseLeave={false}
     >
@@ -1630,6 +1652,7 @@ Array [
             Object {
               "alignItems": "center",
               "backgroundColor": "#ffffff",
+              "borderRadius": 4,
               "display": "flex",
               "flexDirection": "row",
               "maxWidth": 300,
@@ -1743,6 +1766,7 @@ Array [
             Object {
               "alignItems": "center",
               "backgroundColor": "#ffffff",
+              "borderRadius": 4,
               "display": "flex",
               "flexDirection": "row",
               "marginTop": 2,
@@ -1918,6 +1942,8 @@ Array [
     }
   >
     <View
+      accessible={false}
+      focusable={false}
       onMouseEnter={[Function]}
       onMouseLeave={false}
     >
@@ -1959,6 +1985,7 @@ Array [
             Object {
               "alignItems": "center",
               "backgroundColor": "#ffffff",
+              "borderRadius": 4,
               "display": "flex",
               "flexDirection": "row",
               "maxWidth": 300,
@@ -2017,6 +2044,7 @@ Array [
             Object {
               "alignItems": "center",
               "backgroundColor": "#ffffff",
+              "borderRadius": 4,
               "display": "flex",
               "flexDirection": "row",
               "maxWidth": 300,

package/src/context/menuContext.ts

@@ -20,6 +20,7 @@ export const MenuContext = React.createContext<MenuContextValue>({
   open: false,
   onCheckedChange: () => false,
   setOpen: () => false,
+  shouldFocusOnContainer: false,
   triggerRef: null,
 });