@fluentui-react-native/menu 0.10.0 → 0.12.0

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

@@ -0,0 +1,9 @@
+import React from 'react';
+/**
+ * This context keeps track of whether a trigger component is for a submenu.
+ * This allows the trigger to show a submenu indicator.
+ */
+export declare const MenuTriggerContext: React.Context<boolean>;
+export declare const MenuTriggerProvider: React.Provider<boolean>;
+export declare const useMenuTriggerContext: () => boolean;
+//# sourceMappingURL=menuTriggerContext.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"menuTriggerContext.d.ts","sourceRoot":"","sources":["../../src/context/menuTriggerContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;GAGG;AACH,eAAO,MAAM,kBAAkB,wBAAsC,CAAC;AAEtE,eAAO,MAAM,mBAAmB,yBAA8B,CAAC;AAC/D,eAAO,MAAM,qBAAqB,eAA6C,CAAC"}

package/lib-commonjs/context/menuTriggerContext.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMenuTriggerContext = exports.MenuTriggerProvider = exports.MenuTriggerContext = void 0;
+var tslib_1 = require("tslib");
+var react_1 = (0, tslib_1.__importDefault)(require("react"));
+/**
+ * This context keeps track of whether a trigger component is for a submenu.
+ * This allows the trigger to show a submenu indicator.
+ */
+exports.MenuTriggerContext = react_1.default.createContext(false);
+exports.MenuTriggerProvider = exports.MenuTriggerContext.Provider;
+var useMenuTriggerContext = function () { return react_1.default.useContext(exports.MenuTriggerContext); };
+exports.useMenuTriggerContext = useMenuTriggerContext;
+//# sourceMappingURL=menuTriggerContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"menuTriggerContext.js","sourceRoot":"","sources":["../../src/context/menuTriggerContext.ts"],"names":[],"mappings":";;;;AAAA,6DAA0B;AAE1B;;;GAGG;AACU,QAAA,kBAAkB,GAAG,eAAK,CAAC,aAAa,CAAU,KAAK,CAAC,CAAC;AAEzD,QAAA,mBAAmB,GAAG,0BAAkB,CAAC,QAAQ,CAAC;AACxD,IAAM,qBAAqB,GAAG,cAAM,OAAA,eAAK,CAAC,UAAU,CAAC,0BAAkB,CAAC,EAApC,CAAoC,CAAC;AAAnE,QAAA,qBAAqB,yBAA8C"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/menu",
-  "version": "0.10.0",
+  "version": "0.12.0",
   "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.3 <1.0.0",
+    "@fluentui-react-native/callout": ">=0.20.5 <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.15.10 <1.0.0",
+    "@fluentui-react-native/interactive-hooks": ">=0.16.1 <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",

package/src/Menu/useMenu.ts

@@ -10,7 +10,13 @@ export const useMenu = (props: MenuProps): MenuState => {
   const isControlled = typeof props.open !== 'undefined';
   const [open, setOpen] = useMenuOpenState(isControlled, props);
 
+  // Default behaviot for submenu is to open on hover
+  // the ...props line below will override this behavior for a submenu
+  // or apply openOnHover if passed into a root Menu.
+  const openOnHover = isSubmenu;
+
   return {
+    openOnHover,
     ...props,
     open,
     setOpen,

package/src/MenuItem/MenuItem.styling.ts

@@ -47,6 +47,13 @@ export const stylingSettings: UseStylingOptions<MenuItemProps, MenuItemSlotProps
       (tokens: MenuItemTokens) => {
         return {
           color: tokens.color,
+          height: 16,
+          width: 16,
+          viewBox:
+            '0 0 ' +
+            (tokens.submenuIndicatorSize - tokens.submenuIndicatorPadding * 2) +
+            ' ' +
+            (tokens.submenuIndicatorSize - tokens.submenuIndicatorPadding * 2),
         };
       },
       ['color'],

package/src/MenuItem/MenuItem.tsx

@@ -1,5 +1,5 @@
 /** @jsx withSlots */
-import { View } from 'react-native';
+import { I18nManager, 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';
@@ -22,10 +22,15 @@ export const MenuItem = compose<MenuItemType>({
 
     return (final: MenuItemProps) => {
       const mergedProps = mergeProps(menuItem.props, final);
-      const chevronXml = `
-      <svg width="12" height="16" viewBox="0 0 11 6">
-        <path fill='currentColor' d='M0.646447 0.646447C0.841709 0.451184 1.15829 0.451184 1.35355 0.646447L5.5 4.79289L9.64645 0.646447C9.84171 0.451185 10.1583 0.451185 10.3536 0.646447C10.5488 0.841709 10.5488 1.15829 10.3536 1.35355L5.85355 5.85355C5.65829 6.04882 5.34171 6.04882 5.14645 5.85355L0.646447 1.35355C0.451184 1.15829 0.451184 0.841709 0.646447 0.646447Z' />
-      </svg>`;
+      const chevronXml = I18nManager.isRTL
+        ? `
+          <svg>
+            <path fill='currentColor' d='M7.35355 2.14645C7.54882 2.34171 7.54882 2.65829 7.35355 2.85355L4.20711 6L7.35355 9.14645C7.54882 9.34171 7.54882 9.65829 7.35355 9.85355C7.15829 10.0488 6.84171 10.0488 6.64645 9.85355L3.14645 6.35355C2.95118 6.15829 2.95118 5.84171 3.14645 5.64645L6.64645 2.14645C6.84171 1.95118 7.15829 1.95118 7.35355 2.14645Z' />
+          </svg>`
+        : `
+          <svg>
+            <path fill='currentColor' d='M4.64645 2.14645C4.45118 2.34171 4.45118 2.65829 4.64645 2.85355L7.79289 6L4.64645 9.14645C4.45118 9.34171 4.45118 9.65829 4.64645 9.85355C4.84171 10.0488 5.15829 10.0488 5.35355 9.85355L8.85355 6.35355C9.04882 6.15829 9.04882 5.84171 8.85355 5.64645L5.35355 2.14645C5.15829 1.95118 4.84171 1.95118 4.64645 2.14645Z' />
+          </svg>`;
 
       return (
         <Slots.root {...mergedProps}>

package/src/MenuItem/MenuItem.types.ts

@@ -10,6 +10,8 @@ export const menuItemName = 'MenuItem';
 
 export interface MenuItemTokens extends LayoutTokens, FontTokens, IBorderTokens, IColorTokens {
   checkmarkSize?: number;
+  submenuIndicatorPadding?: number;
+  submenuIndicatorSize?: number;
   gap?: number;
 
   disabled?: MenuItemTokens;

package/src/MenuItem/MenuItemTokens.ts

@@ -7,6 +7,8 @@ export const defaultMenuItemTokens: TokenSettings<MenuItemTokens, Theme> = (t: T
   backgroundColor: t.colors.neutralBackground1,
   borderRadius: globalTokens.corner.radius.medium,
   checkmarkSize: 16,
+  submenuIndicatorPadding: globalTokens.spacing.none,
+  submenuIndicatorSize: 16,
   color: t.colors.neutralForeground2,
   fontFamily: t.typography.families.primary,
   fontSize: globalTokens.font.size[300],

package/src/MenuItem/MenuItemTokens.win32.ts

@@ -7,6 +7,8 @@ export const defaultMenuItemTokens: TokenSettings<MenuItemTokens, Theme> = (t: T
   backgroundColor: t.colors.neutralBackground1,
   borderRadius: globalTokens.corner.radius.none,
   checkmarkSize: 16,
+  submenuIndicatorPadding: globalTokens.spacing.xxs,
+  submenuIndicatorSize: 16,
   color: t.colors.neutralForeground1,
   fontFamily: t.typography.families.primary,
   fontSize: globalTokens.font.size[200],

package/src/MenuItem/useMenuItem.ts

@@ -5,6 +5,7 @@ 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';
+import { useMenuTriggerContext } from '../context/menuTriggerContext';
 
 export const useMenuItem = (props: MenuItemProps): MenuItemState => {
   // attach the pressable state handlers
@@ -12,7 +13,8 @@ export const useMenuItem = (props: MenuItemProps): MenuItemState => {
   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 isTrigger = useMenuTriggerContext();
+  const hasSubmenu = useMenuContext().isSubmenu && isTrigger;
   const hasCheckmarks = useMenuListContext().hasCheckmarks;
 
   return {
@@ -21,7 +23,7 @@ export const useMenuItem = (props: MenuItemProps): MenuItemState => {
       accessible: true,
       accessibilityRole: 'menuitem',
       onAccessibilityTap: props.onAccessibilityTap || props.onClick,
-      accessibilityLabel: props.accessibilityLabel,
+      accessibilityLabel: props.accessibilityLabel || props.content,
       accessibilityState: getAccessibilityState(disabled, accessibilityState),
       enableFocusRing: true,
       focusable: !disabled,

package/src/MenuItemCheckbox/useMenuItemCheckbox.ts

@@ -93,7 +93,7 @@ export const useMenuCheckboxInteraction = (
       ...pressable.props,
       accessible: true,
       accessibilityActions: accessibilityActionsProp,
-      accessibilityLabel: props.accessibilityLabel,
+      accessibilityLabel: props.accessibilityLabel || props.content,
       accessibilityRole: 'menuitem',
       accessibilityState: getAccessibilityState(disabled, state.checked, accessibilityState),
       enableFocusRing: true,

package/src/MenuPopover/MenuPopover.tsx

@@ -11,12 +11,14 @@ export const MenuPopover = stagedComponent((props: MenuPopoverProps) => {
   return (_rest: MenuPopoverProps, children: React.ReactNode) => {
     return (
       <Callout
+        accessibilityRole={state.accessibilityRole}
         borderWidth={1}
         borderColor={theme.colors.neutralStrokeAccessible}
         target={state.triggerRef}
         onDismiss={state.onDismiss}
         dismissBehaviors={state.dismissBehaviors}
         setInitialFocus={state.setInitialFocus}
+        directionalHint={state.directionalHint}
         doNotTakePointerCapture={state.doNotTakePointerCapture}
       >
         {children}

package/src/MenuPopover/MenuPopover.types.ts

@@ -1,11 +1,13 @@
-import type { IViewProps } from '@fluentui-react-native/adapters';
-import { DismissBehaviors } from '@fluentui-react-native/callout';
+import { DirectionalHint, DismissBehaviors, ICalloutProps } from '@fluentui-react-native/callout';
+import { AccessibilityRole } from 'react-native';
 
 export const menuPopoverName = 'MenuPopover';
 
-export interface MenuPopoverProps extends Omit<IViewProps, 'onPress'> {}
+export type MenuPopoverProps = ICalloutProps;
 
 export interface MenuPopoverState {
+  accessibilityRole: AccessibilityRole;
+  directionalHint?: DirectionalHint;
   dismissBehaviors: DismissBehaviors[];
   doNotTakePointerCapture: boolean;
   onDismiss: () => void;

package/src/MenuPopover/useMenuPopover.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Platform } from 'react-native';
-import { DismissBehaviors } from '@fluentui-react-native/callout';
+import { I18nManager, Platform } from 'react-native';
+import { DirectionalHint, DismissBehaviors } from '@fluentui-react-native/callout';
 import { useMenuContext } from '../context/menuContext';
 import { MenuPopoverProps, MenuPopoverState } from './MenuPopover.types';
 
@@ -13,11 +13,25 @@ export const useMenuPopover = (_props: MenuPopoverProps): MenuPopoverState => {
   const dismissBehaviors = context.isControlled
     ? (['preventDismissOnKeyDown', 'preventDismissOnClickOutside'] as DismissBehaviors[])
     : undefined;
+  const directionalHint = getDirectionalHint(context.isSubmenu, I18nManager.isRTL);
 
   // Initial focus behavior differs per platform, Windows platforms move focus
   // automatically onto first element of Callout
   const setInitialFocus = Platform.OS === ('win32' as any) || Platform.OS === 'windows';
   const doNotTakePointerCapture = context.openOnHover;
+  const accessibilityRole = 'menu';
 
-  return { triggerRef, onDismiss, dismissBehaviors, doNotTakePointerCapture, setInitialFocus };
+  return { accessibilityRole, triggerRef, onDismiss, directionalHint, dismissBehaviors, doNotTakePointerCapture, setInitialFocus };
+};
+
+const getDirectionalHint = (isSubmenu: boolean, isRtl: boolean): DirectionalHint | undefined => {
+  if (!isSubmenu) {
+    return undefined;
+  }
+
+  if (isRtl) {
+    return 'leftTopEdge';
+  }
+
+  return 'rightTopEdge';
 };

package/src/MenuTrigger/MenuTrigger.tsx

@@ -1,10 +1,12 @@
 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) => {
-  const state = useMenuTrigger(props);
+  const menuTrigger = useMenuTrigger(props);
 
   return (_rest: MenuTriggerProps, children: React.ReactNode) => {
     const childrenArray = React.Children.toArray(children) as React.ReactElement[];
@@ -15,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, state);
+    const revisedState = getRevisedState(menuTrigger, child.props);
+    const revised = React.cloneElement(child, revisedState);
 
-    return <>{revised}</>;
+    return <MenuTriggerProvider value={menuTrigger.hasSubmenu}>{revised}</MenuTriggerProvider>;
   };
 });
 MenuTrigger.displayName = menuTriggerName;
 
+const getRevisedState = memoize(getRevisedStateWorker);
+function getRevisedStateWorker(state: MenuTriggerState, props: any): MenuTriggerState {
+  const revisedState = { ...state };
+  if (props.accessibilityState) {
+    revisedState.props.accessibilityState = { ...state.props.accessibilityState, ...props.accessibilityState };
+  }
+
+  if (props.accessibilityActions) {
+    revisedState.props.accessibilityActions = { ...state.props.accessibilityActions, ...props.accessibilityActions };
+  }
+
+  if (props.onAccessibilityAction) {
+    revisedState.props.onAccessibilityAction = (e: AccessibilityActionEvent) => {
+      state.props.onAccessibilityAction(e);
+      props.onAccessibilityAction(e);
+    };
+  }
+
+  return revisedState;
+}
+
 export default MenuTrigger;

package/src/MenuTrigger/MenuTrigger.types.ts

@@ -1,7 +1,21 @@
-import type { IViewProps } from '@fluentui-react-native/adapters';
+import { InteractionEvent, IWithPressableOptions } from '@fluentui-react-native/interactive-hooks';
+import { ViewProps } from 'react-native';
 
 export const menuTriggerName = 'MenuTrigger';
 
-export interface MenuTriggerProps extends Omit<IViewProps, 'onPress'> {}
+export interface MenuTriggerProps extends Omit<IWithPressableOptions<ViewProps>, 'onPress'> {
+  /**
+   * A RefObject to refer to the trigger component.
+   */
+  componentRef?: React.RefObject<React.Component>;
 
-export interface MenuTriggerState {}
+  /**
+   * A callback to call on button click event
+   */
+  onClick?: (e: InteractionEvent) => void;
+}
+
+export interface MenuTriggerState {
+  props: MenuTriggerProps;
+  hasSubmenu: boolean;
+}

package/src/MenuTrigger/useMenuTrigger.ts

@@ -1,15 +1,36 @@
 import { useMenuContext } from '../context/menuContext';
 import { InteractionEvent } from '@fluentui-react-native/interactive-hooks';
-import { MenuTriggerProps } from './MenuTrigger.types';
-import { Platform } from 'react-native';
+import { MenuTriggerProps, MenuTriggerState } from './MenuTrigger.types';
+import { AccessibilityActionEvent, AccessibilityActionName, Platform } from 'react-native';
+import React from 'react';
 
-export const useMenuTrigger = (_props: MenuTriggerProps) => {
+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 setOpen = context.setOpen;
   const open = context.open;
   const openOnHover = context.openOnHover;
   const triggerRef = context.triggerRef;
+  const accessibilityState = context.open ? { expanded: true } : { expanded: false };
+  const onAccessibilityAction = React.useCallback(
+    (e: AccessibilityActionEvent) => {
+      if (Platform.OS === ('win32' as any)) {
+        switch (e.nativeEvent.actionName) {
+          case 'Expand':
+            setOpen(e, true /* isOpen */);
+            break;
+
+          case 'Collapse':
+            setOpen(e, false /* isOpen */);
+            break;
+        }
+      }
+    },
+    [setOpen],
+  );
 
   const delayHover = Platform.select({
     macos: 100,
@@ -32,5 +53,18 @@ export const useMenuTrigger = (_props: MenuTriggerProps) => {
     setOpen(e, !open);
   };
 
-  return { onClick, onHoverIn, onHoverOut, componentRef: triggerRef, delayHoverIn: delayHover, delayHoverOut: delayHover };
+  return {
+    props: {
+      onClick,
+      onHoverIn,
+      onHoverOut: Platform.OS === ('win32' as any) && onHoverOut,
+      componentRef: triggerRef,
+      delayHoverIn: delayHover,
+      delayHoverOut: Platform.OS === ('win32' as any) && delayHover,
+      accessibilityState,
+      accessibilityActions,
+      onAccessibilityAction,
+    },
+    hasSubmenu: context.isSubmenu,
+  };
 };

package/src/context/menuTriggerContext.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+
+/**
+ * This context keeps track of whether a trigger component is for a submenu.
+ * This allows the trigger to show a submenu indicator.
+ */
+export const MenuTriggerContext = React.createContext<boolean>(false);
+
+export const MenuTriggerProvider = MenuTriggerContext.Provider;
+export const useMenuTriggerContext = () => React.useContext(MenuTriggerContext);