@fluentui-react-native/menu 0.11.1 → 0.13.1

package/src/MenuTrigger/MenuTrigger.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import { stagedComponent } from '@fluentui-react-native/framework';
-import { menuTriggerName, MenuTriggerProps } from './MenuTrigger.types';
+import { memoize, stagedComponent } from '@fluentui-react-native/framework';
+import { menuTriggerName, MenuTriggerProps, MenuTriggerState } from './MenuTrigger.types';
 import { useMenuTrigger } from './useMenuTrigger';
+import { AccessibilityActionEvent } from 'react-native';
 import { MenuTriggerProvider } from '../context/menuTriggerContext';
 
 export const MenuTrigger = stagedComponent((props: MenuTriggerProps) => {
@@ -16,12 +17,37 @@ export const MenuTrigger = stagedComponent((props: MenuTriggerProps) => {
       }
     }
 
+    // In order to properly support accessibility without erasing props set on the
+    // child component which may affect accessibility, we need to modify the
+    // state in the inner render so we can access the child component and its props.
     const child = childrenArray[0];
-    const revised = React.cloneElement(child, menuTrigger.props);
+    const revisedProps = getRevisedState(menuTrigger, child.props);
+    const revised = React.cloneElement(child, revisedProps);
 
     return <MenuTriggerProvider value={menuTrigger.hasSubmenu}>{revised}</MenuTriggerProvider>;
   };
 });
 MenuTrigger.displayName = menuTriggerName;
 
+const getRevisedState = memoize(getRevisedStateWorker);
+function getRevisedStateWorker(state: MenuTriggerState, props: any): MenuTriggerProps {
+  const revisedProps = { ...state.props };
+  if (props.accessibilityState) {
+    revisedProps.accessibilityState = { ...state.props.accessibilityState, ...props.accessibilityState };
+  }
+
+  if (props.accessibilityActions) {
+    revisedProps.accessibilityActions = { ...state.props.accessibilityActions, ...props.accessibilityActions };
+  }
+
+  if (props.onAccessibilityAction) {
+    revisedProps.onAccessibilityAction = (e: AccessibilityActionEvent) => {
+      state.props.onAccessibilityAction(e);
+      props.onAccessibilityAction(e);
+    };
+  }
+
+  return revisedProps;
+}
+
 export default MenuTrigger;

package/src/MenuTrigger/MenuTrigger.types.ts

@@ -9,6 +9,9 @@ export interface MenuTriggerProps extends Omit<IWithPressableOptions<ViewProps>,
    */
   componentRef?: React.RefObject<React.Component>;
 
+  /**
+   * A callback to call on button click event
+   */
   onClick?: (e: InteractionEvent) => void;
 }
 

package/src/MenuTrigger/useMenuTrigger.ts

@@ -1,39 +1,78 @@
 import { useMenuContext } from '../context/menuContext';
 import { InteractionEvent } from '@fluentui-react-native/interactive-hooks';
 import { MenuTriggerProps, MenuTriggerState } from './MenuTrigger.types';
-import { Platform } from 'react-native';
+import { AccessibilityActionEvent, AccessibilityActionName, Platform } from 'react-native';
+import React from 'react';
+import { delayHover, isCloseOnHoverOutEnabled } from '../consts';
+
+const accessibilityActions =
+  Platform.OS === ('win32' as any) ? [{ name: 'Expand' as AccessibilityActionName }, { name: 'Collapse' as AccessibilityActionName }] : [];
 
 export const useMenuTrigger = (_props: MenuTriggerProps): MenuTriggerState => {
   const context = useMenuContext();
+  const { open, openOnHover, popoverHoverOutTimer, setOpen, setTriggerHoverOutTimer, triggerHoverOutTimer, triggerRef } = context;
 
-  const setOpen = context.setOpen;
-  const open = context.open;
-  const openOnHover = context.openOnHover;
-  const triggerRef = context.triggerRef;
+  const accessibilityState = open ? { expanded: true } : { expanded: false };
 
-  const delayHover = Platform.select({
-    macos: 100,
-    default: 500, // win32
-  });
+  const onAccessibilityAction = React.useCallback(
+    (e: AccessibilityActionEvent) => {
+      if (Platform.OS === ('win32' as any)) {
+        switch (e.nativeEvent.actionName) {
+          case 'Expand':
+            setOpen(e, true /* isOpen */);
+            break;
 
-  const onHoverIn = (e: InteractionEvent) => {
-    if (openOnHover) {
-      setOpen(e, true /* isOpen */);
-    }
-  };
+          case 'Collapse':
+            setOpen(e, false /* isOpen */);
+            break;
+        }
+      }
+    },
+    [setOpen],
+  );
 
-  const onHoverOut = (e: InteractionEvent) => {
-    if (openOnHover) {
-      setOpen(e, false /* isOpen */);
-    }
-  };
+  const onHoverIn = React.useCallback(
+    (e: InteractionEvent) => {
+      if (openOnHover) {
+        clearTimeout(popoverHoverOutTimer);
+        clearTimeout(triggerHoverOutTimer);
+        setTimeout(() => {
+          setOpen(e, true /* isOpen */);
+        }, delayHover);
+      }
+    },
+    [openOnHover, setOpen, triggerHoverOutTimer, popoverHoverOutTimer],
+  );
 
-  const onClick = (e: InteractionEvent) => {
-    setOpen(e, !open);
-  };
+  const onHoverOut = React.useCallback(
+    (e: InteractionEvent) => {
+      if (openOnHover) {
+        const timer = setTimeout(() => {
+          setOpen(e, false /* isOpen */);
+        }, delayHover);
+        setTriggerHoverOutTimer(timer);
+      }
+    },
+    [openOnHover, setOpen, setTriggerHoverOutTimer],
+  );
+
+  const onClick = React.useCallback(
+    (e: InteractionEvent) => {
+      setOpen(e, !open);
+    },
+    [open, setOpen],
+  );
 
   return {
-    props: { onClick, onHoverIn, onHoverOut, componentRef: triggerRef, delayHoverIn: delayHover, delayHoverOut: delayHover },
+    props: {
+      onClick,
+      onHoverIn,
+      onHoverOut: isCloseOnHoverOutEnabled && onHoverOut,
+      componentRef: triggerRef,
+      accessibilityState,
+      accessibilityActions,
+      onAccessibilityAction,
+    },
     hasSubmenu: context.isSubmenu,
   };
 };

package/src/consts.ts

@@ -0,0 +1,8 @@
+import { Platform } from 'react-native';
+
+export const delayHover = Platform.select({
+  macos: 100,
+  default: 500, // win32
+});
+
+export const isCloseOnHoverOutEnabled = Platform.OS === ('win32' as any);

package/src/context/menuContext.ts

@@ -4,7 +4,12 @@ import type { MenuState } from '../Menu/Menu.types';
 /**
  * Context shared between Menu and its child components
  */
-export type MenuContextValue = MenuState;
+export interface MenuContextValue extends MenuState {
+  popoverHoverOutTimer?: NodeJS.Timeout;
+  triggerHoverOutTimer?: NodeJS.Timeout;
+  setPopoverHoverOutTimer?: (timer: NodeJS.Timeout) => void;
+  setTriggerHoverOutTimer?: (timer: NodeJS.Timeout) => void;
+}
 
 export const MenuContext = React.createContext<MenuContextValue>({
   isControlled: false,