@fluentui-react-native/menu 0.9.3 → 0.10.0

package/src/MenuItemCheckbox/useMenuItemCheckbox.ts

@@ -14,7 +14,41 @@ import { useMenuListContext } from '../context/menuListContext';
 const defaultAccessibilityActions = [{ name: 'Toggle' }];
 
 export const useMenuItemCheckbox = (props: MenuItemCheckboxProps): MenuItemCheckboxState => {
-  // attach the pressable state handlers
+  const { name } = props;
+  const context = useMenuListContext();
+  const checked = context.checked?.[name];
+  const onCheckedChange = context.onCheckedChange;
+
+  const toggleChecked = React.useCallback(
+    (e: InteractionEvent) => {
+      onCheckedChange(e, name, !checked);
+    },
+    [checked, name, onCheckedChange],
+  );
+
+  return useMenuCheckboxInteraction(props, toggleChecked);
+};
+
+const getAccessibilityState = memoize(getAccessibilityStateWorker);
+function getAccessibilityStateWorker(disabled: boolean, checked: boolean, accessibilityState?: AccessibilityState) {
+  if (accessibilityState) {
+    return { disabled, checked, ...accessibilityState };
+  }
+  return { disabled, checked };
+}
+
+/**
+ * Create interactivity and accessibility props to be passed into the inner render.
+ * This logic is shared between Checkbox and Radio versions of MenuItem.
+ *
+ * @param props Props passed into the outer compoennt
+ * @param toggleCallback Function to be called when item is toggled
+ * @returns Props and additional state needed to render the component
+ */
+export const useMenuCheckboxInteraction = (
+  props: MenuItemCheckboxProps,
+  toggleCallback: (e: InteractionEvent) => void,
+): MenuItemCheckboxState => {
   const defaultComponentRef = React.useRef(null);
   const {
     accessibilityActions,
@@ -27,32 +61,25 @@ export const useMenuItemCheckbox = (props: MenuItemCheckboxProps): MenuItemCheck
   } = props;
   const context = useMenuListContext();
   const checked = context.checked?.[name];
-  const onCheckedChange = context.onCheckedChange;
 
-  const toggleChecked = React.useCallback(
-    (e: InteractionEvent) => {
-      onCheckedChange(e, name, !checked);
-    },
-    [checked, name, onCheckedChange],
-  );
   // Ensure focus is placed on checkbox after click
-  const toggleCheckedWithFocus = useOnPressWithFocus(componentRef, toggleChecked);
+  const toggleCheckedWithFocus = useOnPressWithFocus(componentRef, toggleCallback);
 
   const pressable = useAsPressable({ onPress: toggleCheckedWithFocus, ...rest });
   const buttonRef = useViewCommandFocus(componentRef);
 
-  const onKeyProps = useKeyProps(toggleChecked, ' ');
+  const onKeyProps = useKeyProps(toggleCallback, ' ');
   const accessibilityActionsProp = accessibilityActions
     ? [...defaultAccessibilityActions, ...accessibilityActions]
     : defaultAccessibilityActions;
   const onAccessibilityActionProp = React.useCallback(
     (event: AccessibilityActionEvent) => {
       if (event.nativeEvent.actionName === 'Toggle') {
-        toggleChecked(event);
+        toggleCallback(event);
       }
       onAccessibilityAction && onAccessibilityAction(event);
     },
-    [toggleChecked, onAccessibilityAction],
+    [toggleCallback, onAccessibilityAction],
   );
 
   const state = {
@@ -78,11 +105,3 @@ export const useMenuItemCheckbox = (props: MenuItemCheckboxProps): MenuItemCheck
     state: state,
   };
 };
-
-const getAccessibilityState = memoize(getAccessibilityStateWorker);
-function getAccessibilityStateWorker(disabled: boolean, checked: boolean, accessibilityState?: AccessibilityState) {
-  if (accessibilityState) {
-    return { disabled, checked, ...accessibilityState };
-  }
-  return { disabled, checked };
-}

package/src/MenuItemRadio/MenuItemRadio.tsx

@@ -0,0 +1,16 @@
+import { UseSlots } from '@fluentui-react-native/framework';
+import { useMenuItemRadio } from './useMenuItemRadio';
+import { MenuItemCheckbox, menuItemFinalRender } from '../MenuItemCheckbox/MenuItemCheckbox';
+import { MenuItemCheckboxProps, MenuItemCheckboxType } from '../MenuItemCheckbox/MenuItemCheckbox.types';
+
+export const menuItemRadioName = 'MenuItemRadio';
+
+export const MenuItemRadio = MenuItemCheckbox.compose({
+  displayName: menuItemRadioName,
+  useRender: (userProps: MenuItemCheckboxProps, useSlots: UseSlots<MenuItemCheckboxType>) => {
+    const menuItem = useMenuItemRadio(userProps);
+    const Slots = useSlots(userProps, (layer): boolean => menuItem.state[layer]);
+
+    return menuItemFinalRender(menuItem, Slots);
+  },
+});

package/src/MenuItemRadio/useMenuItemRadio.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+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';
+
+export const useMenuItemRadio = (props: MenuItemCheckboxProps): MenuItemCheckboxState => {
+  const { name } = props;
+  const context = useMenuListContext();
+  const checked = context.checked?.[name];
+  const selectRadio = context.selectRadio;
+
+  const toggleChecked = React.useCallback(
+    (e: InteractionEvent) => {
+      selectRadio(e, name, !checked);
+    },
+    [checked, name, selectRadio],
+  );
+
+  return useMenuCheckboxInteraction(props, toggleChecked);
+};

package/src/MenuList/MenuList.types.ts

@@ -17,6 +17,7 @@ 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 {

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,8 @@ export const MenuPopover = stagedComponent((props: MenuPopoverProps) => {
         target={state.triggerRef}
         onDismiss={state.onDismiss}
         dismissBehaviors={state.dismissBehaviors}
+        setInitialFocus={state.setInitialFocus}
+        doNotTakePointerCapture={state.doNotTakePointerCapture}
       >
         {children}
       </Callout>

package/src/MenuPopover/MenuPopover.types.ts

@@ -7,6 +7,8 @@ export interface MenuPopoverProps extends Omit<IViewProps, 'onPress'> {}
 
 export interface MenuPopoverState {
   dismissBehaviors: DismissBehaviors[];
+  doNotTakePointerCapture: boolean;
   onDismiss: () => void;
+  setInitialFocus: boolean;
   triggerRef: React.RefObject<React.Component>;
 }

package/src/MenuPopover/useMenuPopover.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Platform } from 'react-native';
 import { DismissBehaviors } from '@fluentui-react-native/callout';
 import { useMenuContext } from '../context/menuContext';
 import { MenuPopoverProps, MenuPopoverState } from './MenuPopover.types';
@@ -13,5 +14,10 @@ export const useMenuPopover = (_props: MenuPopoverProps): MenuPopoverState => {
     ? (['preventDismissOnKeyDown', 'preventDismissOnClickOutside'] as DismissBehaviors[])
     : undefined;
 
-  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, dismissBehaviors, doNotTakePointerCapture, setInitialFocus };
 };

package/src/MenuTrigger/useMenuTrigger.ts

@@ -1,6 +1,7 @@
 import { useMenuContext } from '../context/menuContext';
 import { InteractionEvent } from '@fluentui-react-native/interactive-hooks';
 import { MenuTriggerProps } from './MenuTrigger.types';
+import { Platform } from 'react-native';
 
 export const useMenuTrigger = (_props: MenuTriggerProps) => {
   const context = useMenuContext();
@@ -10,15 +11,26 @@ 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 { onClick, onHoverIn, onHoverOut, componentRef: triggerRef, delayHoverIn: delayHover, delayHoverOut: delayHover };
 };

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';