@fluentui-react-native/menu 0.9.2 → 0.11.0

package/src/MenuList/MenuList.types.ts

@@ -4,7 +4,9 @@ import { IBackgroundColorTokens, LayoutTokens } from '@fluentui-react-native/tok
 
 export const menuListName = 'MenuList';
 
-export interface MenuListTokens extends LayoutTokens, IBackgroundColorTokens {}
+export interface MenuListTokens extends LayoutTokens, IBackgroundColorTokens {
+  gap?: number;
+}
 
 export interface MenuListProps extends Omit<IViewProps, 'onPress'> {
   checked?: Record<string, boolean>;
@@ -15,10 +17,11 @@ export interface MenuListProps extends Omit<IViewProps, 'onPress'> {
 
 export interface MenuListState extends MenuListProps {
   isCheckedControlled: boolean;
+  selectRadio?: (e: InteractionEvent, name: string, isChecked: boolean) => void;
 }
 
 export interface MenuListSlotProps {
-  root: React.PropsWithRef<IViewProps>;
+  root: React.PropsWithRef<IViewProps> & { gap?: number };
 }
 export interface MenuListType {
   props: MenuListProps;

package/src/MenuList/MenuListTokens.ts

@@ -8,4 +8,5 @@ export const defaultMenuListTokens: TokenSettings<MenuListTokens, Theme> = (t: T
   minWidth: 128,
   maxWidth: 300,
   backgroundColor: t.colors.neutralBackground1,
+  gap: globalTokens.spacing.xxs,
 });

package/src/MenuList/useMenuList.ts

@@ -9,20 +9,25 @@ 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 isCheckedControlled = typeof context.checked !== 'undefined';
-  const [checked, onCheckedChange] = useMenuCheckedState(isCheckedControlled, context);
+  const [checked, onCheckedChange, selectRadio] = useMenuCheckedState(isCheckedControlled, context);
 
   return {
     ...context,
     isCheckedControlled,
     checked,
     onCheckedChange,
+    selectRadio,
   };
 };
 
 const useMenuCheckedState = (
   isControlled: boolean,
   props: MenuListProps,
-): [Record<string, boolean>, (e: InteractionEvent, name: string, isChecked: boolean) => void] => {
+): [
+  Record<string, boolean>,
+  (e: InteractionEvent, name: string, isChecked: boolean) => void,
+  (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);
@@ -45,5 +50,19 @@ const useMenuCheckedState = (
     [isControlled, state, onCheckedChange, setCheckedInternal],
   );
 
-  return [state, setChecked];
+  const selectRadio = React.useCallback(
+    (e: InteractionEvent, name: string, isChecked: boolean) => {
+      if (!isControlled) {
+        const updatedChecked = { [name]: true };
+        setCheckedInternal(updatedChecked);
+      }
+
+      if (onCheckedChange) {
+        onCheckedChange(e, name, isChecked);
+      }
+    },
+    [isControlled, onCheckedChange, setCheckedInternal],
+  );
+
+  return [state, setChecked, selectRadio];
 };

package/src/MenuPopover/MenuPopover.tsx

@@ -16,6 +16,9 @@ export const MenuPopover = stagedComponent((props: MenuPopoverProps) => {
         target={state.triggerRef}
         onDismiss={state.onDismiss}
         dismissBehaviors={state.dismissBehaviors}
+        setInitialFocus={state.setInitialFocus}
+        directionalHint={state.directionalHint}
+        doNotTakePointerCapture={state.doNotTakePointerCapture}
       >
         {children}
       </Callout>

package/src/MenuPopover/MenuPopover.types.ts

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

package/src/MenuPopover/useMenuPopover.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-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';
 
@@ -12,6 +13,24 @@ export const useMenuPopover = (_props: MenuPopoverProps): MenuPopoverState => {
   const dismissBehaviors = context.isControlled
     ? (['preventDismissOnKeyDown', 'preventDismissOnClickOutside'] as DismissBehaviors[])
     : undefined;
+  const directionalHint = getDirectionalHint(context.isSubmenu, I18nManager.isRTL);
 
-  return { triggerRef, onDismiss, dismissBehaviors };
+  // 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;
+
+  return { 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

@@ -2,9 +2,10 @@ import React from 'react';
 import { stagedComponent } from '@fluentui-react-native/framework';
 import { menuTriggerName, MenuTriggerProps } from './MenuTrigger.types';
 import { useMenuTrigger } from './useMenuTrigger';
+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[];
@@ -16,9 +17,9 @@ export const MenuTrigger = stagedComponent((props: MenuTriggerProps) => {
     }
 
     const child = childrenArray[0];
-    const revised = React.cloneElement(child, state);
+    const revised = React.cloneElement(child, menuTrigger.props);
 
-    return <>{revised}</>;
+    return <MenuTriggerProvider value={menuTrigger.hasSubmenu}>{revised}</MenuTriggerProvider>;
   };
 });
 MenuTrigger.displayName = menuTriggerName;

package/src/MenuTrigger/MenuTrigger.types.ts

@@ -1,7 +1,18 @@
-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 {}
+  onClick?: (e: InteractionEvent) => void;
+}
+
+export interface MenuTriggerState {
+  props: MenuTriggerProps;
+  hasSubmenu: boolean;
+}

package/src/MenuTrigger/useMenuTrigger.ts

@@ -1,8 +1,9 @@
 import { useMenuContext } from '../context/menuContext';
 import { InteractionEvent } from '@fluentui-react-native/interactive-hooks';
-import { MenuTriggerProps } from './MenuTrigger.types';
+import { MenuTriggerProps, MenuTriggerState } from './MenuTrigger.types';
+import { Platform } from 'react-native';
 
-export const useMenuTrigger = (_props: MenuTriggerProps) => {
+export const useMenuTrigger = (_props: MenuTriggerProps): MenuTriggerState => {
   const context = useMenuContext();
 
   const setOpen = context.setOpen;
@@ -10,15 +11,29 @@ export const useMenuTrigger = (_props: MenuTriggerProps) => {
   const openOnHover = context.openOnHover;
   const triggerRef = context.triggerRef;
 
+  const delayHover = Platform.select({
+    macos: 100,
+    default: 500, // win32
+  });
+
   const onHoverIn = (e: InteractionEvent) => {
     if (openOnHover) {
       setOpen(e, true /* isOpen */);
     }
   };
 
+  const onHoverOut = (e: InteractionEvent) => {
+    if (openOnHover) {
+      setOpen(e, false /* isOpen */);
+    }
+  };
+
   const onClick = (e: InteractionEvent) => {
     setOpen(e, !open);
   };
 
-  return { onClick, onHoverIn, componentRef: triggerRef };
+  return {
+    props: { onClick, onHoverIn, onHoverOut, componentRef: triggerRef, delayHoverIn: delayHover, delayHoverOut: delayHover },
+    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);

package/src/index.ts

@@ -3,5 +3,6 @@ export { MenuTrigger } from './MenuTrigger/MenuTrigger';
 export { MenuPopover } from './MenuPopover/MenuPopover';
 export { MenuItem } from './MenuItem/MenuItem';
 export { MenuItemCheckbox } from './MenuItemCheckbox/MenuItemCheckbox';
+export { MenuItemRadio } from './MenuItemRadio/MenuItemRadio';
 export { MenuList } from './MenuList/MenuList';
 export { MenuDivider } from './MenuDivider/MenuDivider';

package/lib/MenuList/useMenuContextValue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useMenuContextValue.d.ts","sourceRoot":"","sources":["../../src/MenuList/useMenuContextValue.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,eAAO,MAAM,uBAAuB,UAAW,aAAa,KAAG,oBAE9D,CAAC"}

package/lib/MenuList/useMenuContextValue.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useMenuContextValue.js","sourceRoot":"","sources":["../../src/MenuList/useMenuContextValue.ts"],"names":[],"mappings":";AAGA,MAAM,CAAC,IAAM,uBAAuB,GAAG,UAAC,KAAoB;IAC1D,oBAAY,KAAK,EAAG;AACtB,CAAC,CAAC"}

package/lib-commonjs/MenuList/useMenuContextValue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useMenuContextValue.d.ts","sourceRoot":"","sources":["../../src/MenuList/useMenuContextValue.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,eAAO,MAAM,uBAAuB,UAAW,aAAa,KAAG,oBAE9D,CAAC"}

package/lib-commonjs/MenuList/useMenuContextValue.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useMenuContextValue.js","sourceRoot":"","sources":["../../src/MenuList/useMenuContextValue.ts"],"names":[],"mappings":";;;;AAGO,IAAM,uBAAuB,GAAG,UAAC,KAAoB;IAC1D,iCAAY,KAAK,EAAG;AACtB,CAAC,CAAC;AAFW,QAAA,uBAAuB,2BAElC"}