@fluentui-react-native/menu 0.15.7 → 1.0.1

package/src/Menu/Menu.types.ts

@@ -29,6 +29,11 @@ export interface MenuProps extends MenuListProps {
    * Opens the menu on hovering over the trigger
    */
   openOnHover?: boolean;
+
+  /**
+   * Do not dismiss the menu when a menu item is clicked
+   */
+  persistOnItemClick?: boolean;
 }
 
 export interface MenuState extends MenuProps {

package/src/MenuItem/MenuItem.types.ts

@@ -48,6 +48,11 @@ export interface MenuItemProps extends Omit<IWithPressableOptions<ViewProps>, 'o
    * A callback to call on button click event
    */
   onClick?: (e: InteractionEvent) => void;
+
+  /**
+   * Do not dismiss the menu when a menu item is clicked
+   */
+  persistOnClick?: boolean;
 }
 
 export interface MenuItemState extends IPressableHooks<MenuItemProps & React.ComponentPropsWithRef<any>> {

package/src/MenuItem/useMenuItem.ts

@@ -13,53 +13,45 @@ import { useMenuContext } from '../context/menuContext';
 import { useMenuListContext } from '../context/menuListContext';
 import { useMenuTriggerContext } from '../context/menuTriggerContext';
 
-const triggerKeys = [' ', 'Enter'];
-const submenuTriggerKeys = [...triggerKeys, 'ArrowLeft', 'ArrowRight'];
+export const triggerKeys = [' ', 'Enter'];
+export const submenuTriggerKeys = [...triggerKeys, 'ArrowLeft', 'ArrowRight'];
 
 export const useMenuItem = (props: MenuItemProps): MenuItemState => {
   // attach the pressable state handlers
   const defaultComponentRef = React.useRef(null);
-  const { onClick, accessibilityState, componentRef = defaultComponentRef, disabled, ...rest } = props;
+  const { onClick, accessibilityState, componentRef = defaultComponentRef, disabled, persistOnClick, ...rest } = props;
+  const { isSubmenu, persistOnItemClick, setOpen } = useMenuContext();
+  const { hasCheckmarks, onArrowClose } = useMenuListContext();
   const isTrigger = useMenuTriggerContext();
-  const isSubmenu = useMenuContext().isSubmenu;
-  const hasSubmenu = isSubmenu && isTrigger;
-  const isInSubmenu = isSubmenu && !isTrigger;
+  const shouldPersist = persistOnClick ?? persistOnItemClick;
 
-  const setOpen = useMenuContext().setOpen;
+  const hasSubmenu = isSubmenu && isTrigger;
 
   const onInvoke = React.useCallback(
     (e: InteractionEvent) => {
-      if (disabled) {
-        return;
-      }
-
       const isRtl = I18nManager.isRTL;
-      if (
-        isKeyPressEvent(e) &&
+
+      const isArrowKey = isKeyPressEvent(e) && (e.nativeEvent.key === 'ArrowLeft' || e.nativeEvent.key === 'ArrowRight');
+      const isArrowOpen =
         hasSubmenu &&
-        ((isRtl && e.nativeEvent.key === 'ArrowRight') || (!isRtl && e.nativeEvent.key === 'ArrowLeft'))
-      ) {
-        return;
-      }
-      if (
         isKeyPressEvent(e) &&
-        isInSubmenu &&
-        ((isRtl && e.nativeEvent.key === 'ArrowLeft') || (!isRtl && e.nativeEvent.key === 'ArrowRight'))
-      ) {
-        return;
+        ((isRtl && e.nativeEvent.key === 'ArrowLeft') || (!isRtl && e.nativeEvent.key === 'ArrowRight'));
+
+      if (!disabled && (!isArrowKey || isArrowOpen)) {
+        onClick?.(e);
       }
 
-      onClick?.(e);
-      if (!hasSubmenu) {
-        const isArrowClose =
-          isKeyPressEvent(e) &&
-          isInSubmenu &&
-          ((isRtl && e.nativeEvent.key === 'ArrowRight') || (!isRtl && e.nativeEvent.key === 'ArrowLeft'));
+      if (!hasSubmenu && !isArrowKey && !shouldPersist) {
+        setOpen(e, false /*isOpen*/, false /*bubble*/);
+      }
 
-        setOpen(e, false /*isOpen*/, !isArrowClose /*bubble*/);
+      const isArrowClose =
+        isKeyPressEvent(e) && ((isRtl && e.nativeEvent.key === 'ArrowRight') || (!isRtl && e.nativeEvent.key === 'ArrowLeft'));
+      if (isArrowClose) {
+        onArrowClose?.(e);
       }
     },
-    [disabled, hasSubmenu, isInSubmenu, onClick, setOpen],
+    [disabled, hasSubmenu, onArrowClose, onClick, setOpen, shouldPersist],
   );
 
   const pressable = useAsPressable({ ...rest, disabled, onPress: onInvoke });
@@ -68,7 +60,6 @@ export const useMenuItem = (props: MenuItemProps): MenuItemState => {
 
   // Explicitly override onKeyDown to override the native behavior of moving focus with arrow keys.
   const onKeyDownProps = useKeyDownProps(onInvoke, ...keys);
-  const hasCheckmarks = useMenuListContext().hasCheckmarks;
 
   useHoverFocusEffect(pressable.state.hovered, componentRef);
 

package/src/MenuItemCheckbox/useMenuItemCheckbox.ts

@@ -1,16 +1,18 @@
 import * as React from 'react';
-import { AccessibilityActionEvent, AccessibilityState, Platform } from 'react-native';
+import { AccessibilityActionEvent, AccessibilityState, I18nManager, Platform } from 'react-native';
 import { MenuItemCheckboxProps, MenuItemCheckboxState } from './MenuItemCheckbox.types';
 import { memoize } from '@fluentui-react-native/framework';
 import {
   InteractionEvent,
+  KeyPressEvent,
   useAsPressable,
-  useKeyProps,
+  useKeyDownProps,
   useOnPressWithFocus,
   useViewCommandFocus,
 } from '@fluentui-react-native/interactive-hooks';
 import { useMenuListContext } from '../context/menuListContext';
-import { useHoverFocusEffect } from '../MenuItem/useMenuItem';
+import { submenuTriggerKeys, triggerKeys, useHoverFocusEffect } from '../MenuItem/useMenuItem';
+import { useMenuContext } from '../context/menuContext';
 
 const defaultAccessibilityActions = [{ name: 'Toggle' }];
 
@@ -63,8 +65,11 @@ export const useMenuCheckboxInteraction = (
     onAccessibilityAction,
     ...rest
   } = props;
-  const context = useMenuListContext();
-  const checked = context.checked?.[name];
+
+  const isSubmenu = useMenuContext().isSubmenu;
+
+  const { checked, onArrowClose } = useMenuListContext();
+  const isChecked = checked?.[name];
 
   // Ensure focus is placed on checkbox after click
   const toggleCheckedWithFocus = useOnPressWithFocus(componentRef, toggleCallback);
@@ -72,7 +77,27 @@ export const useMenuCheckboxInteraction = (
   const pressable = useAsPressable({ ...rest, disabled, onPress: toggleCheckedWithFocus });
   const buttonRef = useViewCommandFocus(componentRef);
 
-  const onKeyProps = useKeyProps(toggleCallback, ' ', 'Enter');
+  const onKeysPressed = React.useCallback(
+    (e: KeyPressEvent) => {
+      const invokeKey = e.nativeEvent.key === ' ' || e.nativeEvent.key === 'Enter';
+      if (!disabled && invokeKey) {
+        toggleCallback(e);
+        return;
+      }
+
+      const isRtl = I18nManager.isRTL;
+      const isArrowClose = isSubmenu && ((isRtl && e.nativeEvent.key === 'ArrowRight') || (!isRtl && e.nativeEvent.key === 'ArrowLeft'));
+
+      if (isArrowClose) {
+        onArrowClose?.(e);
+      }
+    },
+    [disabled, isSubmenu, onArrowClose, toggleCallback],
+  );
+
+  const keys = isSubmenu ? submenuTriggerKeys : triggerKeys;
+  const onKeyProps = useKeyDownProps(onKeysPressed, ...keys);
+
   const accessibilityActionsProp = accessibilityActions
     ? [...defaultAccessibilityActions, ...accessibilityActions]
     : defaultAccessibilityActions;
@@ -93,7 +118,7 @@ export const useMenuCheckboxInteraction = (
   const state = {
     ...pressable.state,
     disabled: !!props.disabled,
-    checked: checked,
+    checked: isChecked,
   };
 
   return {

package/src/MenuItemRadio/useMenuItemRadio.ts

@@ -3,27 +3,35 @@ 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';
+import { useMenuContext } from '../context/menuContext';
 
 export const useMenuItemRadio = (props: MenuItemCheckboxProps): MenuItemCheckboxState => {
-  const { disabled, name } = props;
-  const context = useMenuListContext();
-  const selectRadio = context.selectRadio;
+  const { disabled, name, persistOnClick } = props;
+  const context = useMenuContext();
+  const listContext = useMenuListContext();
+  const selectRadio = listContext.selectRadio;
+  const setOpen = context.setOpen;
+  let shouldPersist = context.persistOnItemClick;
+  shouldPersist = persistOnClick ?? shouldPersist;
 
   const toggleChecked = React.useCallback(
     (e: InteractionEvent) => {
       if (!disabled) {
         selectRadio(e, name);
+        if (!shouldPersist) {
+          setOpen(e, false /*isOpen*/, true /*bubble*/);
+        }
       }
     },
-    [disabled, name, selectRadio],
+    [disabled, name, selectRadio, setOpen, shouldPersist],
   );
 
   // Explicitly only run on mount and unmount
   React.useEffect(() => {
-    context.addRadioItem(name);
+    listContext.addRadioItem(name);
 
     return () => {
-      context.removeRadioItem(name);
+      listContext.removeRadioItem(name);
     };
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 

package/src/MenuList/MenuList.types.ts

@@ -40,6 +40,7 @@ export interface MenuListState extends Omit<MenuListProps, 'checked' | 'onChecke
   props: MenuListProps;
   checked?: Record<string, boolean>;
   isCheckedControlled: boolean;
+  onArrowClose?: (e: InteractionEvent) => void;
   onCheckedChange?: (e: InteractionEvent, name: string, isChecked: boolean) => void;
   selectRadio?: (e: InteractionEvent, name: string) => void;
   addRadioItem: (name: string) => void;

package/src/MenuList/useMenuList.ts

@@ -20,7 +20,7 @@ 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 { defaultChecked, onCheckedChange: onCheckedChangeOriginal, checked: checkedOriginal } = context;
+  const { defaultChecked, onCheckedChange: onCheckedChangeOriginal, checked: checkedOriginal, isSubmenu, setOpen } = context;
 
   // Convert passed in array to map so that i's easier to look up checked state
   const checkedMap = React.useMemo(() => {
@@ -93,12 +93,29 @@ export const useMenuList = (_props: MenuListProps): MenuListState => {
     [isCheckedControlled, onCheckedChangeOriginal, setCheckedInternal, checked],
   );
 
+  // The close arrow key must be handled at this level so that close arrow is responsive when arrowing
+  // on a submenu trigger inside a submenu. Otherwise the arrowing event gets "swallowed up" by the trigger,
+  // because it is considered to be inside the submenu due to the Menu component wrapping both the
+  // trigger and popover. Listening to key events directly here to handle this case doesn't work
+  // since left and right arrow key events are already handled and swallowed by native behavior
+  const onArrowClose = React.useCallback(
+    (e: InteractionEvent) => {
+      if (!isSubmenu) {
+        return;
+      }
+
+      setOpen(e, false /* isOpen */, false /* bubble */);
+    },
+    [isSubmenu, setOpen],
+  );
+
   return {
     props: {
       ...context,
     },
     isCheckedControlled,
     checked,
+    onArrowClose,
     onCheckedChange,
     selectRadio,
     addRadioItem,

package/src/MenuTrigger/MenuTrigger.tsx

@@ -13,7 +13,7 @@ export const MenuTrigger = stagedComponent((_props: React.PropsWithChildren<Reco
 
     if (__DEV__) {
       if (childrenArray.length !== 1) {
-        console.log('Only expecting one child for MenuTrigger');
+        console.warn('Only expecting one child for MenuTrigger');
       }
     }
 

package/src/context/menuListContext.ts

@@ -13,6 +13,7 @@ export const MenuListContext = React.createContext<MenuListContextValue>({
   checked: {},
   hasCheckmarks: false,
   onCheckedChange: () => false,
+  onArrowClose: () => false,
   addRadioItem: () => false,
   removeRadioItem: () => false,
 });