@fluentui-react-native/menu 0.5.1 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/menu",
-  "version": "0.5.1",
+  "version": "0.7.0",
   "description": "A cross-platform Menu component using the Fluent Design System",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",

package/src/Menu/Menu.types.ts

@@ -1,14 +1,19 @@
-import type { IViewProps } from '@fluentui-react-native/adapters';
+import { InteractionEvent } from '@fluentui-react-native/interactive-hooks';
 import React from 'react';
+import type { MenuListProps } from '../MenuList/MenuList.types';
 
 export const menuName = 'Menu';
 
-export interface MenuProps extends Omit<IViewProps, 'onPress'> {
+export interface MenuProps extends MenuListProps {
+  defaultOpen?: boolean;
   open?: boolean;
+  onOpenChange?: (e: InteractionEvent, isOpen: boolean) => void;
+  openOnHover?: boolean;
 }
 
 export interface MenuState extends MenuProps {
+  isControlled: boolean;
   isSubmenu: boolean;
-  setOpen: (isOpen: boolean) => void;
+  setOpen: (e: InteractionEvent, isOpen: boolean) => void;
   triggerRef: React.RefObject<React.Component>;
 }

package/src/Menu/useMenu.ts

@@ -1,21 +1,44 @@
+import { InteractionEvent } from '@fluentui-react-native/interactive-hooks';
 import React from 'react';
 import { useMenuContext } from '../context/menuContext';
 import { MenuProps, MenuState } from './Menu.types';
 
 export const useMenu = (props: MenuProps): MenuState => {
-  const [open, setOpen] = useMenuOpenState(props);
   const triggerRef = React.useRef(null);
   const context = useMenuContext();
   const isSubmenu = context.triggerRef !== null;
+  const isControlled = typeof props.open !== 'undefined';
+  const [open, setOpen] = useMenuOpenState(isControlled, props);
 
   return {
+    ...props,
     open,
     setOpen,
     triggerRef,
     isSubmenu,
+    isControlled,
   };
 };
 
-const useMenuOpenState = (props: MenuProps) => {
-  return React.useState<boolean>(props.open);
+const useMenuOpenState = (isControlled: boolean, props: MenuProps): [boolean, (e: InteractionEvent, isOpen: boolean) => void] => {
+  const { defaultOpen, onOpenChange, open } = props;
+  const initialState = typeof defaultOpen !== 'undefined' ? defaultOpen : !!open;
+  const [openInternal, setOpenInternal] = React.useState<boolean>(initialState);
+
+  const state = isControlled ? open : openInternal;
+
+  const setOpen = React.useCallback(
+    (e: InteractionEvent, isOpen: boolean) => {
+      const openPrev = state;
+      if (!isControlled) {
+        setOpenInternal(isOpen);
+      }
+      if (onOpenChange && openPrev !== isOpen) {
+        onOpenChange(e, isOpen);
+      }
+    },
+    [isControlled, state, onOpenChange, setOpenInternal],
+  );
+
+  return [state, setOpen];
 };

package/src/Menu/useMenuContextValue.ts

@@ -2,5 +2,5 @@ import { MenuContextValue } from '../context/menuContext';
 import { MenuState } from './Menu.types';
 
 export const useMenuContextValue = (state: MenuState): MenuContextValue => {
-  return { open: state.open, setOpen: state.setOpen, triggerRef: state.triggerRef, isSubmenu: state.isSubmenu };
+  return { ...state };
 };

package/src/MenuItem/MenuItem.styling.ts

@@ -21,6 +21,16 @@ export const stylingSettings: UseStylingOptions<MenuItemProps, MenuItemSlotProps
       }),
       ['backgroundColor', ...layoutStyles.keys],
     ),
+    checkmark: buildProps(
+      (tokens: MenuItemTokens) => ({
+        style: {
+          height: tokens.checkmarkSize,
+          width: tokens.checkmarkSize,
+          marginEnd: tokens.gap,
+        },
+      }),
+      ['checkmarkSize', 'gap'],
+    ),
     content: buildProps(
       (tokens: MenuItemTokens, theme: Theme) => {
         return {

package/src/MenuItem/MenuItem.tsx

@@ -12,6 +12,7 @@ export const MenuItem = compose<MenuItemType>({
   ...stylingSettings,
   slots: {
     root: View,
+    checkmark: View,
     content: Text,
     submenuIndicator: SvgXml,
   },
@@ -28,8 +29,9 @@ export const MenuItem = compose<MenuItemType>({
 
       return (
         <Slots.root {...mergedProps}>
+          {menuItem.hasCheckmarks && <Slots.checkmark />}
           {mergedProps.content && <Slots.content>{mergedProps.content}</Slots.content>}
-          {mergedProps.hasSubmenu && <Slots.submenuIndicator xml={chevronXml} />}
+          {menuItem.hasSubmenu && <Slots.submenuIndicator xml={chevronXml} />}
         </Slots.root>
       );
     };

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

@@ -12,6 +12,7 @@ export const useMenuItem = (props: MenuItemProps): MenuItemState => {
   const pressable = useAsPressable({ ...rest, disabled, onPress: onClick });
   const onKeyProps = useKeyProps(onClick, ' ', 'Enter');
   const hasSubmenu = useMenuContext().isSubmenu;
+  const hasCheckmarks = useMenuContext().hasCheckmarks;
 
   return {
     props: {
@@ -23,11 +24,12 @@ export const useMenuItem = (props: MenuItemProps): MenuItemState => {
       accessibilityState: getAccessibilityState(disabled, accessibilityState),
       enableFocusRing: true,
       focusable: !disabled,
-      hasSubmenu,
       ref: componentRef,
       ...onKeyProps,
     },
     state: pressable.state,
+    hasSubmenu,
+    hasCheckmarks,
   };
 };
 

package/src/MenuItemCheckbox/MenuItemCheckbox.styling.ts

@@ -0,0 +1,45 @@
+import { Theme, UseStylingOptions, buildProps } from '@fluentui-react-native/framework';
+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', 'checked'];
+
+export const stylingSettings: UseStylingOptions<MenuItemCheckboxProps, MenuItemCheckboxSlotProps, MenuItemCheckboxTokens> = {
+  tokens: [defaultMenuItemCheckboxTokens, menuItemCheckboxName],
+  states: menuItemCheckboxStates,
+  slotProps: {
+    root: buildProps(
+      (tokens: MenuItemCheckboxTokens, theme: Theme) => ({
+        style: {
+          alignItems: 'center',
+          backgroundColor: tokens.backgroundColor,
+          display: 'flex',
+          flexDirection: 'row',
+          ...layoutStyles.from(tokens, theme),
+        },
+      }),
+      ['backgroundColor', ...layoutStyles.keys],
+    ),
+    checkmark: buildProps(
+      (tokens: MenuItemCheckboxTokens) => ({
+        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) => ({
+        style: {
+          flexGrow: 1,
+          color: tokens.color,
+          ...fontStyles.from(tokens, theme),
+        },
+      }),
+      ['color', ...fontStyles.keys],
+    ),
+  },
+};

package/src/MenuItemCheckbox/MenuItemCheckbox.tsx

@@ -0,0 +1,37 @@
+/** @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';
+import { useMenuItemCheckbox } from './useMenuItemCheckbox';
+import { stylingSettings } from './MenuItemCheckbox.styling';
+
+export const MenuItemCheckbox = compose<MenuItemCheckboxType>({
+  displayName: menuItemCheckboxName,
+  ...stylingSettings,
+  slots: {
+    root: View,
+    checkmark: SvgXml,
+    content: Text,
+  },
+  useRender: (userProps: MenuItemCheckboxProps, useSlots: UseSlots<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>
+      );
+    };
+  },
+});

package/src/MenuItemCheckbox/MenuItemCheckbox.types.ts

@@ -0,0 +1,58 @@
+import * as React from 'react';
+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 { 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;
+  pressed?: MenuItemCheckboxTokens;
+}
+
+export interface MenuItemCheckboxProps extends Omit<IWithPressableOptions<ViewProps>, 'onPress'> {
+  content: string;
+
+  /**
+   * Applies disabled styles to menu item but remains focusable
+   */
+  disabled?: boolean;
+
+  /**
+   * A RefObject to access the IButton interface. Use this to access the public methods and properties of the component.
+   */
+  componentRef?: React.RefObject<IFocusable>;
+
+  /**
+   * A callback to call on button click event
+   */
+  onClick?: (e: InteractionEvent) => void;
+}
+
+export interface MenuItemCheckboxState extends IPressableHooks<MenuItemCheckboxProps & React.ComponentPropsWithRef<any>> {
+  hasCheckmarks?: boolean;
+}
+
+export interface MenuItemCheckboxSlotProps {
+  root: React.PropsWithRef<IViewProps>;
+  checkmark?: XmlProps;
+  content?: TextProps;
+}
+
+export interface MenuItemCheckboxType {
+  props: MenuItemCheckboxProps;
+  tokens: MenuItemCheckboxTokens;
+  slotProps: MenuItemCheckboxSlotProps;
+}

package/src/MenuItemCheckbox/MenuItemCheckboxTokens.ts

@@ -0,0 +1,49 @@
+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.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,
+  padding: globalTokens.spacing.sNudge,
+  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

@@ -0,0 +1,50 @@
+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.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,
+  padding: globalTokens.spacing.xs,
+  paddingHorizontal: globalTokens.spacing.s,
+  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

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { 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';
+
+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 hasCheckmarks = useMenuContext().hasCheckmarks;
+
+  return {
+    props: {
+      ...pressable.props,
+      accessible: true,
+      accessibilityRole: 'button',
+      onAccessibilityTap: props.onAccessibilityTap || props.onClick,
+      accessibilityLabel: props.accessibilityLabel,
+      accessibilityState: getAccessibilityState(disabled, accessibilityState),
+      enableFocusRing: true,
+      focusable: !disabled,
+      ref: componentRef,
+      ...onKeyProps,
+    },
+    state: pressable.state,
+    hasCheckmarks,
+  };
+};
+
+const getAccessibilityState = memoize(getAccessibilityStateWorker);
+function getAccessibilityStateWorker(disabled: boolean, accessibilityState?: AccessibilityState) {
+  if (accessibilityState) {
+    return { disabled, ...accessibilityState };
+  }
+  return { disabled };
+}

package/src/MenuList/MenuList.types.ts

@@ -5,7 +5,9 @@ export const menuListName = 'MenuList';
 
 export interface MenuListTokens extends LayoutTokens, IBackgroundColorTokens {}
 
-export interface MenuListProps extends Omit<IViewProps, 'onPress'> {}
+export interface MenuListProps extends Omit<IViewProps, 'onPress'> {
+  hasCheckmarks?: boolean;
+}
 
 export interface MenuListSlotProps {
   root: React.PropsWithRef<IViewProps>;

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,6 +7,7 @@ import type { MenuState } from '../Menu/Menu.types';
 export type MenuContextValue = MenuState;
 
 export const MenuContext = React.createContext<MenuContextValue>({
+  isControlled: false,
   isSubmenu: false,
   open: false,
   setOpen: () => false,

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"menuTriggerContext.d.ts","sourceRoot":"","sources":["../../src/context/menuTriggerContext.ts"],"names":[],"mappings":""}

package/lib/context/menuTriggerContext.js

@@ -1,2 +0,0 @@
-"use strict";
-//# sourceMappingURL=menuTriggerContext.js.map

package/lib/context/menuTriggerContext.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"menuTriggerContext.js","sourceRoot":"","sources":["../../src/context/menuTriggerContext.ts"],"names":[],"mappings":""}

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"menuTriggerContext.d.ts","sourceRoot":"","sources":["../../src/context/menuTriggerContext.ts"],"names":[],"mappings":""}

package/lib-commonjs/context/menuTriggerContext.js

@@ -1,2 +0,0 @@
-"use strict";
-//# sourceMappingURL=menuTriggerContext.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"menuTriggerContext.js","sourceRoot":"","sources":["../../src/context/menuTriggerContext.ts"],"names":[],"mappings":""}