@fluentui-react-native/menu 0.5.2 → 0.8.0

package/src/MenuItem/MenuItem.types.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ViewProps } from 'react-native';
-import { SvgProps, XmlProps } from 'react-native-svg';
+import { XmlProps } from 'react-native-svg';
 import type { IViewProps } from '@fluentui-react-native/adapters';
 import { TextProps } from '@fluentui-react-native/experimental-text';
 import { IFocusable, InteractionEvent, IPressableHooks, IWithPressableOptions } from '@fluentui-react-native/interactive-hooks';
@@ -9,6 +9,9 @@ import { FontTokens, IBorderTokens, IColorTokens, LayoutTokens } from '@fluentui
 export const menuItemName = 'MenuItem';
 
 export interface MenuItemTokens extends LayoutTokens, FontTokens, IBorderTokens, IColorTokens {
+  checkmarkSize?: number;
+  gap?: number;
+
   disabled?: MenuItemTokens;
   focused?: MenuItemTokens;
   hovered?: MenuItemTokens;
@@ -28,23 +31,26 @@ export interface MenuItemProps extends Omit<IWithPressableOptions<ViewProps>, 'o
    */
   componentRef?: React.RefObject<IFocusable>;
 
-  /**
-   * If the menu item is a trigger for a submenu
-   */
-  hasSubmenu?: boolean;
-
   /**
    * A callback to call on button click event
    */
   onClick?: (e: InteractionEvent) => void;
 }
 
-export type MenuItemState = IPressableHooks<MenuItemProps & React.ComponentPropsWithRef<any>>;
+export interface MenuItemState extends IPressableHooks<MenuItemProps & React.ComponentPropsWithRef<any>> {
+  hasCheckmarks?: boolean;
+
+  /**
+   * If the menu item is a trigger for a submenu
+   */
+  hasSubmenu?: boolean;
+}
 
 export interface MenuItemSlotProps {
   root: React.PropsWithRef<IViewProps>;
   content?: TextProps;
-  submenuIndicator?: SvgProps | XmlProps;
+  checkmark?: React.PropsWithRef<IViewProps>;
+  submenuIndicator?: XmlProps;
 }
 
 export interface MenuItemType {

package/src/MenuItem/MenuItemTokens.ts

@@ -6,10 +6,12 @@ import { MenuItemTokens } from './MenuItem.types';
 export const defaultMenuItemTokens: TokenSettings<MenuItemTokens, Theme> = (t: Theme): MenuItemTokens => ({
   backgroundColor: t.colors.neutralBackground1,
   borderRadius: globalTokens.corner.radius.medium,
+  checkmarkSize: 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,
   minHeight: 32,
   minWidth: 160,
   maxWidth: 300,

package/src/MenuItem/MenuItemTokens.win32.ts

@@ -6,10 +6,12 @@ import { MenuItemTokens } from './MenuItem.types';
 export const defaultMenuItemTokens: TokenSettings<MenuItemTokens, Theme> = (t: Theme): MenuItemTokens => ({
   backgroundColor: t.colors.neutralBackground1,
   borderRadius: globalTokens.corner.radius.none,
+  checkmarkSize: 16,
   color: t.colors.neutralForeground1,
   fontFamily: t.typography.families.primary,
   fontSize: globalTokens.font.size[200],
   fontWeight: globalTokens.font.weight.regular as FontWeightValue,
+  gap: globalTokens.spacing.xs,
   minHeight: 24,
   minWidth: 160,
   maxWidth: 300,

package/src/MenuItem/useMenuItem.ts

@@ -4,6 +4,7 @@ import { MenuItemProps, MenuItemState } from './MenuItem.types';
 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';
 
 export const useMenuItem = (props: MenuItemProps): MenuItemState => {
   // attach the pressable state handlers
@@ -12,22 +13,24 @@ export const useMenuItem = (props: MenuItemProps): MenuItemState => {
   const pressable = useAsPressable({ ...rest, disabled, onPress: onClick });
   const onKeyProps = useKeyProps(onClick, ' ', 'Enter');
   const hasSubmenu = useMenuContext().isSubmenu;
+  const hasCheckmarks = useMenuListContext().hasCheckmarks;
 
   return {
     props: {
       ...pressable.props,
       accessible: true,
-      accessibilityRole: 'button',
+      accessibilityRole: 'menuitem',
       onAccessibilityTap: props.onAccessibilityTap || props.onClick,
       accessibilityLabel: props.accessibilityLabel,
       accessibilityState: getAccessibilityState(disabled, accessibilityState),
       enableFocusRing: true,
       focusable: !disabled,
-      hasSubmenu,
       ref: componentRef,
       ...onKeyProps,
     },
     state: pressable.state,
+    hasSubmenu,
+    hasCheckmarks,
   };
 };
 

package/src/MenuItemCheckbox/MenuItemCheckbox.styling.ts

@@ -3,7 +3,7 @@ import { fontStyles, layoutStyles } from '@fluentui-react-native/tokens';
 import { defaultMenuItemCheckboxTokens } from './MenuItemCheckboxTokens';
 import { menuItemCheckboxName, MenuItemCheckboxProps, MenuItemCheckboxTokens, MenuItemCheckboxSlotProps } from './MenuItemCheckbox.types';
 
-export const menuItemCheckboxStates: (keyof MenuItemCheckboxTokens)[] = ['hovered', 'focused', 'pressed', 'disabled'];
+export const menuItemCheckboxStates: (keyof MenuItemCheckboxTokens)[] = ['hovered', 'focused', 'pressed', 'disabled', 'checked'];
 
 export const stylingSettings: UseStylingOptions<MenuItemCheckboxProps, MenuItemCheckboxSlotProps, MenuItemCheckboxTokens> = {
   tokens: [defaultMenuItemCheckboxTokens, menuItemCheckboxName],
@@ -21,16 +21,25 @@ export const stylingSettings: UseStylingOptions<MenuItemCheckboxProps, MenuItemC
       }),
       ['backgroundColor', ...layoutStyles.keys],
     ),
+    checkmark: buildProps(
+      (tokens: MenuItemCheckboxTokens) => ({
+        opacity: tokens.checkmarkVisibility,
+        color: tokens.color,
+        height: tokens.checkmarkSize,
+        width: tokens.checkmarkSize,
+        viewBox: '0 0 ' + (tokens.checkmarkSize - tokens.checkmarkPadding * 2) + ' ' + (tokens.checkmarkSize - tokens.checkmarkPadding * 2),
+        style: { marginEnd: tokens.gap },
+      }),
+      ['checkmarkSize', 'gap', 'color'],
+    ),
     content: buildProps(
-      (tokens: MenuItemCheckboxTokens, theme: Theme) => {
-        return {
-          style: {
-            flexGrow: 1,
-            color: tokens.color,
-            ...fontStyles.from(tokens, theme),
-          },
-        };
-      },
+      (tokens: MenuItemCheckboxTokens, theme: Theme) => ({
+        style: {
+          flexGrow: 1,
+          color: tokens.color,
+          ...fontStyles.from(tokens, theme),
+        },
+      }),
       ['color', ...fontStyles.keys],
     ),
   },

package/src/MenuItemCheckbox/MenuItemCheckbox.tsx

@@ -1,5 +1,6 @@
 /** @jsx withSlots */
 import { 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';
 import { menuItemCheckboxName, MenuItemCheckboxProps, MenuItemCheckboxType } from './MenuItemCheckbox.types';
@@ -11,6 +12,7 @@ export const MenuItemCheckbox = compose<MenuItemCheckboxType>({
   ...stylingSettings,
   slots: {
     root: View,
+    checkmark: SvgXml,
     content: Text,
   },
   useRender: (userProps: MenuItemCheckboxProps, useSlots: UseSlots<MenuItemCheckboxType>) => {
@@ -19,8 +21,17 @@ export const MenuItemCheckbox = compose<MenuItemCheckboxType>({
 
     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}>{mergedProps.content && <Slots.content>{mergedProps.content}</Slots.content>}</Slots.root>;
+      return (
+        <Slots.root {...mergedProps}>
+          <Slots.checkmark xml={chevronXml} />
+          {mergedProps.content && <Slots.content>{mergedProps.content}</Slots.content>}
+        </Slots.root>
+      );
     };
   },
 });

package/src/MenuItemCheckbox/MenuItemCheckbox.types.ts

@@ -1,13 +1,21 @@
 import * as React from 'react';
-import { ViewProps } from 'react-native';
+import { ColorValue, ViewProps } from 'react-native';
+import { XmlProps } from 'react-native-svg';
 import type { IViewProps } from '@fluentui-react-native/adapters';
 import { TextProps } from '@fluentui-react-native/experimental-text';
-import { IFocusable, InteractionEvent, IPressableHooks, IWithPressableOptions } from '@fluentui-react-native/interactive-hooks';
+import { IFocusable, IPressableHooks, IWithPressableOptions } from '@fluentui-react-native/interactive-hooks';
 import { FontTokens, IBorderTokens, IColorTokens, LayoutTokens } from '@fluentui-react-native/tokens';
 
 export const menuItemCheckboxName = 'MenuItemCheckbox';
 
 export interface MenuItemCheckboxTokens extends LayoutTokens, FontTokens, IBorderTokens, IColorTokens {
+  checkmarkColor?: ColorValue;
+  checkmarkPadding?: number;
+  checkmarkSize?: number;
+  checkmarkVisibility?: number;
+  gap?: number;
+
+  checked?: MenuItemCheckboxTokens;
   disabled?: MenuItemCheckboxTokens;
   focused?: MenuItemCheckboxTokens;
   hovered?: MenuItemCheckboxTokens;
@@ -28,20 +36,16 @@ export interface MenuItemCheckboxProps extends Omit<IWithPressableOptions<ViewPr
   componentRef?: React.RefObject<IFocusable>;
 
   /**
-   * If the menu item is a trigger for a submenu
-   */
-  hasSubmenu?: boolean;
-
-  /**
-   * A callback to call on button click event
+   * Identifier for the control
    */
-  onClick?: (e: InteractionEvent) => void;
+  name: string;
 }
 
-export type MenuItemCheckboxState = IPressableHooks<MenuItemCheckboxProps & React.ComponentPropsWithRef<any>>;
+export interface MenuItemCheckboxState extends IPressableHooks<MenuItemCheckboxProps & React.ComponentPropsWithRef<any>> {}
 
 export interface MenuItemCheckboxSlotProps {
   root: React.PropsWithRef<IViewProps>;
+  checkmark?: XmlProps;
   content?: TextProps;
 }
 

package/src/MenuItemCheckbox/MenuItemCheckboxTokens.ts

@@ -6,10 +6,14 @@ import { MenuItemCheckboxTokens } from './MenuItemCheckbox.types';
 export const defaultMenuItemCheckboxTokens: TokenSettings<MenuItemCheckboxTokens, Theme> = (t: Theme): MenuItemCheckboxTokens => ({
   backgroundColor: t.colors.neutralBackground1,
   borderRadius: globalTokens.corner.radius.medium,
+  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,
   minHeight: 32,
   minWidth: 160,
   maxWidth: 300,
@@ -17,13 +21,29 @@ export const defaultMenuItemCheckboxTokens: TokenSettings<MenuItemCheckboxTokens
   hovered: {
     backgroundColor: t.colors.neutralBackground1Hover,
     color: t.colors.neutralForeground2Hover,
+    checked: {
+      checkmarkColor: t.colors.neutralForeground2Hover,
+      checkmarkVisibility: 1,
+    },
   },
   pressed: {
     backgroundColor: t.colors.neutralBackground1Pressed,
     color: t.colors.neutralForeground2Pressed,
+    checked: {
+      checkmarkColor: t.colors.neutralForeground2Pressed,
+      checkmarkVisibility: 1,
+    },
   },
   disabled: {
     backgroundColor: t.colors.neutralBackground1,
     color: t.colors.neutralForegroundDisabled,
+    checked: {
+      checkmarkColor: t.colors.neutralForegroundDisabled,
+      checkmarkVisibility: 1,
+    },
+  },
+  checked: {
+    checkmarkColor: t.colors.neutralForeground2,
+    checkmarkVisibility: 1,
   },
 });

package/src/MenuItemCheckbox/MenuItemCheckboxTokens.win32.ts

@@ -6,10 +6,14 @@ import { MenuItemCheckboxTokens } from './MenuItemCheckbox.types';
 export const defaultMenuItemCheckboxTokens: TokenSettings<MenuItemCheckboxTokens, Theme> = (t: Theme): MenuItemCheckboxTokens => ({
   backgroundColor: t.colors.neutralBackground1,
   borderRadius: globalTokens.corner.radius.none,
+  checkmarkPadding: globalTokens.spacing.xxs,
+  checkmarkSize: 16,
+  checkmarkVisibility: 0,
   color: t.colors.neutralForeground1,
   fontFamily: t.typography.families.primary,
   fontSize: globalTokens.font.size[200],
   fontWeight: globalTokens.font.weight.regular as FontWeightValue,
+  gap: globalTokens.spacing.xs,
   minHeight: 24,
   minWidth: 160,
   maxWidth: 300,
@@ -18,13 +22,29 @@ export const defaultMenuItemCheckboxTokens: TokenSettings<MenuItemCheckboxTokens
   hovered: {
     backgroundColor: t.colors.neutralBackground1Hover,
     color: t.colors.neutralForeground1Hover,
+    checked: {
+      checkmarkColor: t.colors.neutralForeground1Hover,
+      checkmarkVisibility: 1,
+    },
   },
   pressed: {
     backgroundColor: t.colors.neutralBackground1Pressed,
     color: t.colors.neutralForeground1Pressed,
+    checked: {
+      checkmarkColor: t.colors.neutralForeground1Pressed,
+      checkmarkVisibility: 1,
+    },
   },
   disabled: {
     backgroundColor: t.colors.neutralBackground1,
     color: t.colors.neutralForegroundDisabled,
+    checked: {
+      checkmarkColor: t.colors.neutralForegroundDisabled,
+      checkmarkVisibility: 1,
+    },
+  },
+  checked: {
+    checkmarkColor: t.colors.neutralForeground1,
+    checkmarkVisibility: 1,
   },
 });

package/src/MenuItemCheckbox/useMenuItemCheckbox.ts

@@ -1,40 +1,88 @@
 import * as React from 'react';
-import { AccessibilityState } from 'react-native';
+import { AccessibilityActionEvent, AccessibilityState } from 'react-native';
 import { MenuItemCheckboxProps, MenuItemCheckboxState } from './MenuItemCheckbox.types';
 import { memoize } from '@fluentui-react-native/framework';
-import { useAsPressable, useKeyProps } from '@fluentui-react-native/interactive-hooks';
-import { useMenuContext } from '../context/menuContext';
+import {
+  InteractionEvent,
+  useAsPressable,
+  useKeyProps,
+  useOnPressWithFocus,
+  useViewCommandFocus,
+} from '@fluentui-react-native/interactive-hooks';
+import { useMenuListContext } from '../context/menuListContext';
+
+const defaultAccessibilityActions = [{ name: 'Toggle' }];
 
 export const useMenuItemCheckbox = (props: MenuItemCheckboxProps): MenuItemCheckboxState => {
   // attach the pressable state handlers
   const defaultComponentRef = React.useRef(null);
-  const { onClick, accessibilityState, componentRef = defaultComponentRef, disabled, ...rest } = props;
-  const pressable = useAsPressable({ ...rest, disabled, onPress: onClick });
-  const onKeyProps = useKeyProps(onClick, ' ', 'Enter');
-  const hasSubmenu = useMenuContext().isSubmenu;
+  const {
+    accessibilityActions,
+    accessibilityState,
+    componentRef = defaultComponentRef,
+    disabled,
+    name,
+    onAccessibilityAction,
+    ...rest
+  } = 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 pressable = useAsPressable({ onPress: toggleCheckedWithFocus, ...rest });
+  const buttonRef = useViewCommandFocus(componentRef);
+
+  const onKeyProps = useKeyProps(toggleChecked, ' ');
+  const accessibilityActionsProp = accessibilityActions
+    ? [...defaultAccessibilityActions, ...accessibilityActions]
+    : defaultAccessibilityActions;
+  const onAccessibilityActionProp = React.useCallback(
+    (event: AccessibilityActionEvent) => {
+      if (event.nativeEvent.actionName === 'Toggle') {
+        toggleChecked(event);
+      }
+      onAccessibilityAction && onAccessibilityAction(event);
+    },
+    [toggleChecked, onAccessibilityAction],
+  );
+
+  const state = {
+    ...pressable.state,
+    disabled: !!props.disabled,
+    checked: checked,
+  };
 
   return {
     props: {
       ...pressable.props,
       accessible: true,
-      accessibilityRole: 'button',
-      onAccessibilityTap: props.onAccessibilityTap || props.onClick,
+      accessibilityActions: accessibilityActionsProp,
       accessibilityLabel: props.accessibilityLabel,
-      accessibilityState: getAccessibilityState(disabled, accessibilityState),
+      accessibilityRole: 'menuitem',
+      accessibilityState: getAccessibilityState(disabled, state.checked, accessibilityState),
       enableFocusRing: true,
       focusable: !disabled,
-      hasSubmenu,
-      ref: componentRef,
+      onAccessibilityAction: onAccessibilityActionProp,
+      ref: buttonRef,
       ...onKeyProps,
     },
-    state: pressable.state,
+    state: state,
   };
 };
 
 const getAccessibilityState = memoize(getAccessibilityStateWorker);
-function getAccessibilityStateWorker(disabled: boolean, accessibilityState?: AccessibilityState) {
+function getAccessibilityStateWorker(disabled: boolean, checked: boolean, accessibilityState?: AccessibilityState) {
   if (accessibilityState) {
-    return { disabled, ...accessibilityState };
+    return { disabled, checked, ...accessibilityState };
   }
-  return { disabled };
+  return { disabled, checked };
 }

package/src/MenuList/MenuList.tsx

@@ -4,6 +4,9 @@ import { View } from 'react-native';
 import { compose, 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';
 
 export const MenuList = compose<MenuListType>({
   displayName: menuListName,
@@ -12,10 +15,16 @@ export const MenuList = compose<MenuListType>({
     root: View,
   },
   useRender: (userProps: MenuListProps, useSlots: UseSlots<MenuListType>) => {
-    const Slots = useSlots(userProps);
+    const menuList = useMenuList(userProps);
+    const contextValue = useMenuListContextValue(menuList);
+    const Slots = useSlots(menuList);
 
     return (_final: MenuListProps, children: React.ReactNode) => {
-      return <Slots.root>{children}</Slots.root>;
+      return (
+        <MenuListProvider value={contextValue}>
+          <Slots.root>{children}</Slots.root>
+        </MenuListProvider>
+      );
     };
   },
 });

package/src/MenuList/MenuList.types.ts

@@ -1,11 +1,21 @@
 import type { IViewProps } from '@fluentui-react-native/adapters';
+import { InteractionEvent } from '@fluentui-react-native/interactive-hooks';
 import { IBackgroundColorTokens, LayoutTokens } from '@fluentui-react-native/tokens';
 
 export const menuListName = 'MenuList';
 
 export interface MenuListTokens extends LayoutTokens, IBackgroundColorTokens {}
 
-export interface MenuListProps extends Omit<IViewProps, 'onPress'> {}
+export interface MenuListProps extends Omit<IViewProps, 'onPress'> {
+  checked?: Record<string, boolean>;
+  defaultChecked?: Record<string, boolean>;
+  hasCheckmarks?: boolean;
+  onCheckedChange?: (e: InteractionEvent, name: string, isChecked: boolean) => void;
+}
+
+export interface MenuListState extends MenuListProps {
+  isCheckedControlled: boolean;
+}
 
 export interface MenuListSlotProps {
   root: React.PropsWithRef<IViewProps>;

package/src/MenuList/useMenuContextValue.ts

@@ -0,0 +1,6 @@
+import { MenuListContextValue } from '../context/menuListContext';
+import { MenuListState } from './MenuList.types';
+
+export const useMenuListContextValue = (state: MenuListState): MenuListContextValue => {
+  return { ...state };
+};

package/src/MenuList/useMenuList.ts

@@ -0,0 +1,49 @@
+import { InteractionEvent } from '@fluentui-react-native/interactive-hooks';
+import React from 'react';
+import { useMenuContext } from '../context/menuContext';
+import { MenuListProps, MenuListState } from './MenuList.types';
+
+export const useMenuList = (_props: MenuListProps): MenuListState => {
+  const context = useMenuContext();
+
+  // 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);
+
+  return {
+    ...context,
+    isCheckedControlled,
+    checked,
+    onCheckedChange,
+  };
+};
+
+const useMenuCheckedState = (
+  isControlled: boolean,
+  props: MenuListProps,
+): [Record<string, boolean>, (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);
+
+  const state = isControlled ? checked : checkedInternal;
+
+  const setChecked = React.useCallback(
+    (e: InteractionEvent, name: string, isChecked: boolean) => {
+      if (!isControlled) {
+        const curChecked = state;
+        curChecked[name] = isChecked;
+        const updatedChecked = { ...curChecked };
+        setCheckedInternal(updatedChecked);
+      }
+
+      if (onCheckedChange) {
+        onCheckedChange(e, name, isChecked);
+      }
+    },
+    [isControlled, state, onCheckedChange, setCheckedInternal],
+  );
+
+  return [state, setChecked];
+};

package/src/MenuPopover/MenuPopover.tsx

@@ -10,7 +10,13 @@ export const MenuPopover = stagedComponent((props: MenuPopoverProps) => {
 
   return (_rest: MenuPopoverProps, children: React.ReactNode) => {
     return (
-      <Callout target={state.triggerRef} borderWidth={1} borderColor={theme.colors.neutralStrokeAccessible}>
+      <Callout
+        borderWidth={1}
+        borderColor={theme.colors.neutralStrokeAccessible}
+        target={state.triggerRef}
+        onDismiss={state.onDismiss}
+        dismissBehaviors={state.dismissBehaviors}
+      >
         {children}
       </Callout>
     );

package/src/MenuPopover/MenuPopover.types.ts

@@ -1,9 +1,12 @@
 import type { IViewProps } from '@fluentui-react-native/adapters';
+import { DismissBehaviors } from '@fluentui-react-native/callout';
 
 export const menuPopoverName = 'MenuPopover';
 
 export interface MenuPopoverProps extends Omit<IViewProps, 'onPress'> {}
 
 export interface MenuPopoverState {
+  dismissBehaviors: DismissBehaviors[];
+  onDismiss: () => void;
   triggerRef: React.RefObject<React.Component>;
 }

package/src/MenuPopover/useMenuPopover.ts

@@ -1,10 +1,17 @@
+import React from 'react';
+import { DismissBehaviors } from '@fluentui-react-native/callout';
 import { useMenuContext } from '../context/menuContext';
 import { MenuPopoverProps, MenuPopoverState } from './MenuPopover.types';
 
 export const useMenuPopover = (_props: MenuPopoverProps): MenuPopoverState => {
   const context = useMenuContext();
+  const setOpen = context.setOpen;
 
   const triggerRef = context.triggerRef;
+  const onDismiss = React.useCallback(() => setOpen(undefined, false /* isOpen */), [setOpen]);
+  const dismissBehaviors = context.isControlled
+    ? (['preventDismissOnKeyDown', 'preventDismissOnClickOutside'] as DismissBehaviors[])
+    : undefined;
 
-  return { triggerRef };
+  return { triggerRef, onDismiss, dismissBehaviors };
 };

package/src/MenuTrigger/useMenuTrigger.ts

@@ -7,11 +7,18 @@ export const useMenuTrigger = (_props: MenuTriggerProps) => {
 
   const setOpen = context.setOpen;
   const open = context.open;
+  const openOnHover = context.openOnHover;
   const triggerRef = context.triggerRef;
 
-  const onClick = (_e: InteractionEvent) => {
-    setOpen(!open);
+  const onHoverIn = (e: InteractionEvent) => {
+    if (openOnHover) {
+      setOpen(e, true /* isOpen */);
+    }
   };
 
-  return { onClick, componentRef: triggerRef };
+  const onClick = (e: InteractionEvent) => {
+    setOpen(e, !open);
+  };
+
+  return { onClick, onHoverIn, componentRef: triggerRef };
 };

package/src/context/menuContext.ts

@@ -7,8 +7,13 @@ import type { MenuState } from '../Menu/Menu.types';
 export type MenuContextValue = MenuState;
 
 export const MenuContext = React.createContext<MenuContextValue>({
+  isControlled: false,
+  checked: {},
+  defaultChecked: {},
+  hasCheckmarks: false,
   isSubmenu: false,
   open: false,
+  onCheckedChange: () => false,
   setOpen: () => false,
   triggerRef: null,
 });

package/src/context/menuListContext.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import type { MenuListState } from '../MenuList/MenuList.types';
+
+/**
+ * Context shared between Menu and its child components
+ */
+export type MenuListContextValue = MenuListState;
+
+export const MenuListContext = React.createContext<MenuListContextValue>({
+  isCheckedControlled: false,
+  checked: {},
+  defaultChecked: {},
+  hasCheckmarks: false,
+  onCheckedChange: () => false,
+});
+
+export const MenuListProvider = MenuListContext.Provider;
+export const useMenuListContext = () => React.useContext(MenuListContext);

package/src/index.ts

@@ -2,4 +2,5 @@ export { Menu } from './Menu/Menu';
 export { MenuTrigger } from './MenuTrigger/MenuTrigger';
 export { MenuPopover } from './MenuPopover/MenuPopover';
 export { MenuItem } from './MenuItem/MenuItem';
+export { MenuItemCheckbox } from './MenuItemCheckbox/MenuItemCheckbox';
 export { MenuList } from './MenuList/MenuList';

package/lib/context/menuTriggerContext.d.ts

@@ -1 +0,0 @@
-//# sourceMappingURL=menuTriggerContext.d.ts.map