@fluentui-react-native/menu 1.14.42 → 1.15.0

package/src/MenuCallout/MenuCallout.android.tsx

@@ -1,8 +1,6 @@
-import React from 'react';
 import { Animated, Modal, TouchableWithoutFeedback, View, StyleSheet, ScrollView } from 'react-native';
 
-import { stagedComponent } from '@fluentui-react-native/framework';
-import { mergeProps } from '@fluentui-react-native/framework';
+import { mergeProps, phasedComponent, directComponent } from '@fluentui-react-native/framework-base';
 
 import type { MenuCalloutProps } from './MenuCallout.types';
 import { menuCalloutName } from './MenuCallout.types';
@@ -10,11 +8,12 @@ import { useMenuContext } from '../context';
 
 const AnimatedScrollView = Animated.createAnimatedComponent(ScrollView);
 
-export const MenuCallout = stagedComponent((props: MenuCalloutProps) => {
+export const MenuCallout = phasedComponent((props: MenuCalloutProps) => {
   const context = useMenuContext();
 
-  return (_rest: MenuCalloutProps, children: React.ReactNode) => {
-    const mergedProps = mergeProps(props, _rest);
+  return directComponent<MenuCalloutProps>((innerProps: MenuCalloutProps) => {
+    const { children, ...rest } = mergeProps<MenuCalloutProps>(props, innerProps);
+    const mergedProps = mergeProps(props, rest);
     const tokens = props.tokens;
 
     return (
@@ -41,8 +40,8 @@ export const MenuCallout = stagedComponent((props: MenuCalloutProps) => {
                 },
               ]}
             >
-              {context.menuHeight + tokens.minPadding >= tokens.maxHeight ||
-              context.menuHeight + tokens.minPadding >= mergedProps.maxHeight ? (
+              {context.menuHeight + tokens.minPadding >= (tokens.maxHeight as number) ||
+              context.menuHeight + tokens.minPadding >= (mergedProps.maxHeight as number) ? (
                 <AnimatedScrollView style={[context.animationStarted && context.menuSize]}>{children}</AnimatedScrollView>
               ) : (
                 <Animated.View style={[context.animationStarted && context.menuSize]}>{children}</Animated.View>
@@ -52,7 +51,7 @@ export const MenuCallout = stagedComponent((props: MenuCalloutProps) => {
         </TouchableWithoutFeedback>
       </Modal>
     );
-  };
+  });
 });
 
 MenuCallout.displayName = menuCalloutName;

package/src/MenuCallout/MenuCallout.tsx

@@ -1,18 +1,16 @@
-import React from 'react';
-
 import { Callout } from '@fluentui-react-native/callout';
-import { stagedComponent } from '@fluentui-react-native/framework';
-import { mergeProps } from '@fluentui-react-native/framework';
+import { mergeProps, phasedComponent, directComponent } from '@fluentui-react-native/framework-base';
 
 import type { MenuCalloutProps } from './MenuCallout.types';
 import { menuCalloutName } from './MenuCallout.types';
 
-export const MenuCallout = stagedComponent((props: MenuCalloutProps) => {
-  return (_rest: MenuCalloutProps, children: React.ReactNode) => {
-    const mergedProps = mergeProps(props, _rest);
+export const MenuCallout = phasedComponent((props: MenuCalloutProps) => {
+  return directComponent<MenuCalloutProps>((innerProps: MenuCalloutProps) => {
+    const { children, ...rest } = innerProps;
+    const mergedProps = mergeProps(props, rest);
 
     return <Callout {...mergedProps}>{children}</Callout>;
-  };
+  });
 });
 
 MenuCallout.displayName = menuCalloutName;

package/src/MenuCallout/MenuCallout.types.ts

@@ -12,7 +12,7 @@ export type MenuCalloutTokens =
        * The token for the corner radius for the Modal MenuPopover
        * @platform android macos
        */
-      borderRadius?: AnimatableNumericValue;
+      borderRadius?: AnimatableNumericValue | string;
 
       /**
        * Shadown elevation token for the Modal MenuPopover

package/src/MenuDivider/MenuDivider.tsx

@@ -1,9 +1,8 @@
-/** @jsxRuntime classic */
-/** @jsx withSlots */
+/** @jsxImportSource @fluentui-react-native/framework-base */
 import { View } from 'react-native';
 
 import type { UseSlots } from '@fluentui-react-native/framework';
-import { compose, withSlots } from '@fluentui-react-native/framework';
+import { compose } from '@fluentui-react-native/framework';
 
 import { stylingSettings } from './MenuDivider.styling';
 import type { MenuDividerProps, MenuDividerType } from './MenuDivider.types';

package/src/MenuGroup/MenuGroup.tsx

@@ -1,10 +1,11 @@
-/** @jsxRuntime classic */
-/** @jsx withSlots */
+/** @jsxImportSource @fluentui-react-native/framework-base */
 import React from 'react';
 import { Platform, View } from 'react-native';
+import type { IViewProps } from '@fluentui-react-native/adapters';
 
 import { FocusZone } from '@fluentui-react-native/focus-zone';
-import { compose, mergeProps, withSlots } from '@fluentui-react-native/framework';
+import { compose, mergeProps } from '@fluentui-react-native/framework';
+import { extractChildren, extractProps } from '@fluentui-react-native/framework-base';
 import type { UseSlots } from '@fluentui-react-native/framework';
 
 import type { MenuGroupProps, MenuGroupType } from './MenuGroup.types';
@@ -40,8 +41,8 @@ export const MenuGroup = compose<MenuGroupType>({
           return React.cloneElement(
             child as React.ReactElement<unknown, string | React.JSXElementConstructor<any>>,
             {
-              accessibilityPositionInSet: child.props.accessibilityPositionInSet ?? itemPosition, // win32
-              accessibilitySetSize: child.props.accessibilitySetSize ?? itemCount, //win32
+              accessibilityPosInSet: extractProps<IViewProps>(child)?.accessibilityPosInSet ?? itemPosition, // win32
+              accessibilitySetSize: extractProps<IViewProps>(child)?.accessibilitySetSize ?? itemCount, //win32
             } as any,
           );
         }
@@ -58,8 +59,9 @@ export const MenuGroup = compose<MenuGroupType>({
       // we use a string with a space as the default accessibilityLabel for MenuGroup.
       // If an empty string was used, the group context would not be read.
       let menuGroupA11yLabel = ' ';
-      if (menuGroupHeader && typeof (menuGroupHeader as React.ReactElement).props.children === 'string') {
-        menuGroupA11yLabel = (menuGroupHeader as React.ReactElement).props.children;
+      const menuGroupHeaderChild = extractChildren(menuGroupHeader as React.ReactElement);
+      if (menuGroupHeader && typeof menuGroupHeaderChild === 'string') {
+        menuGroupA11yLabel = menuGroupHeaderChild;
       }
 
       return (

package/src/MenuGroupHeader/MenuGroupHeader.tsx

@@ -1,8 +1,7 @@
-/** @jsxRuntime classic */
-/** @jsx withSlots */
+/** @jsxImportSource @fluentui-react-native/framework-base */
 import React from 'react';
 
-import { compose, mergeProps, withSlots } from '@fluentui-react-native/framework';
+import { compose, mergeProps } from '@fluentui-react-native/framework';
 import type { UseSlots } from '@fluentui-react-native/framework';
 import { TextV1 as Text } from '@fluentui-react-native/text';
 

package/src/MenuItem/MenuItem.tsx

@@ -1,10 +1,9 @@
-/** @jsxRuntime classic */
-/** @jsx withSlots */
+/** @jsxImportSource @fluentui-react-native/framework-base */
 import React from 'react';
 import { I18nManager, Image, Pressable, View } from 'react-native';
 
 import type { UseSlots } from '@fluentui-react-native/framework';
-import { compose, memoize, mergeProps, withSlots } from '@fluentui-react-native/framework';
+import { compose, memoize, mergeProps } from '@fluentui-react-native/framework';
 import { IconV1 as Icon } from '@fluentui-react-native/icon';
 import { TextV1 as Text } from '@fluentui-react-native/text';
 import { SvgXml } from 'react-native-svg';

package/src/MenuItemCheckbox/MenuItemCheckbox.tsx

@@ -1,10 +1,9 @@
-/** @jsxRuntime classic */
-/** @jsx withSlots */
+/** @jsxImportSource @fluentui-react-native/framework-base */
 import React from 'react';
 import { Image, Platform, Pressable, View } from 'react-native';
 
-import type { Slots, UseSlots } from '@fluentui-react-native/framework';
-import { compose, mergeProps, withSlots } from '@fluentui-react-native/framework';
+import type { Slots, UseSlots, FinalRender } from '@fluentui-react-native/framework';
+import { compose, mergeProps } from '@fluentui-react-native/framework';
 import { IconV1 as Icon } from '@fluentui-react-native/icon';
 import { TextV1 as Text } from '@fluentui-react-native/text';
 import { SvgXml } from 'react-native-svg';
@@ -43,8 +42,8 @@ export const MenuItemCheckbox = compose<MenuItemCheckboxType>({
 export const menuItemFinalRender = (
   menuItem: MenuItemCheckboxInfo,
   Slots: Slots<MenuItemCheckboxSlotProps>,
-): React.FunctionComponent<MenuItemCheckboxProps> => {
-  return (final: MenuItemCheckboxProps, children: React.ReactNode) => {
+): FinalRender<MenuItemCheckboxProps> => {
+  return (final: MenuItemCheckboxProps, ...children: React.ReactNode[]) => {
     const { accessibilityLabel, icon, tooltip, ...mergedProps } = mergeProps(menuItem.props, final);
 
     const checkmarkXml = `

package/src/MenuItemCheckbox/MenuItemCheckbox.types.ts

@@ -1,5 +1,5 @@
 import type * as React from 'react';
-import type { ColorValue, ImageProps } from 'react-native';
+import type { ColorValue, ImageProps, AnimatableNumericValue } from 'react-native';
 
 import type { IViewProps } from '@fluentui-react-native/adapters';
 import type { IconPropsV1 as IconProps } from '@fluentui-react-native/icon';
@@ -54,7 +54,7 @@ export interface MenuItemCheckboxTokens
    * Border radius of the box containing the checkmark.
    * @platform android
    */
-  checkboxBorderRadius?: number;
+  checkboxBorderRadius?: AnimatableNumericValue | string;
 
   /**
    * Width of the border around the box containing the checkmark.

package/src/MenuItemRadio/MenuItemRadio.tsx

@@ -1,10 +1,9 @@
-/** @jsxRuntime classic */
-/** @jsx withSlots */
+/** @jsxImportSource @fluentui-react-native/framework-base */
 import React from 'react';
 import { Image, Platform, Pressable, View } from 'react-native';
 
-import type { Slots, UseSlots } from '@fluentui-react-native/framework';
-import { compose, mergeProps, withSlots } from '@fluentui-react-native/framework';
+import type { Slots, UseSlots, FinalRender } from '@fluentui-react-native/framework';
+import { compose, mergeProps } from '@fluentui-react-native/framework';
 import { IconV1 as Icon } from '@fluentui-react-native/icon';
 import { TextV1 as Text } from '@fluentui-react-native/text';
 import { SvgXml } from 'react-native-svg';
@@ -39,8 +38,8 @@ export const MenuItemRadio = compose<MenuItemRadioType>({
 export const menuItemRadioFinalRender = (
   menuItem: MenuItemRadioInfo,
   Slots: Slots<MenuItemRadioSlotProps>,
-): React.FunctionComponent<MenuItemRadioProps> => {
-  return (final: MenuItemRadioProps, children: React.ReactNode) => {
+): FinalRender<MenuItemRadioProps> => {
+  return (final: MenuItemRadioProps, ...children: React.ReactNode[]) => {
     const { accessibilityLabel, icon, tooltip, ...mergedProps } = mergeProps(menuItem.props, final);
 
     const checkmarkXml = `

package/src/MenuItemRadio/MenuItemRadio.types.ts

@@ -1,5 +1,5 @@
 import type * as React from 'react';
-import type { ColorValue, ImageProps, ViewStyle } from 'react-native';
+import type { ColorValue, ImageProps, ViewStyle, AnimatableNumericValue } from 'react-native';
 
 import type { IViewProps } from '@fluentui-react-native/adapters';
 import type { IconPropsV1 as IconProps } from '@fluentui-react-native/icon';
@@ -62,7 +62,7 @@ export interface MenuItemRadioTokens
    * Border radius of the box containing the radio.
    * @platform android
    */
-  radioBorderRadius?: number;
+  radioBorderRadius?: AnimatableNumericValue | string;
 
   /**
    * Height and width of the box containing the radio.

package/src/MenuItemRadio/useMenuItemRadio.ts

@@ -35,7 +35,7 @@ export const useMenuItemRadio = (props: MenuItemRadioProps): MenuItemRadioInfo =
     return () => {
       listContext.removeRadioItem(name);
     };
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+  }, []);
 
   return useMenuCheckboxInteraction(props, toggleChecked);
 };

package/src/MenuList/MenuList.tsx

@@ -1,11 +1,12 @@
-/** @jsxRuntime classic */
-/** @jsx withSlots */
+/** @jsxImportSource @fluentui-react-native/framework-base */
 import React from 'react';
 import { Platform, ScrollView, View } from 'react-native';
 
+import type { IViewProps } from '@fluentui-react-native/adapters';
 import { FocusZone } from '@fluentui-react-native/focus-zone';
 import type { UseSlots } from '@fluentui-react-native/framework';
-import { compose, withSlots } from '@fluentui-react-native/framework';
+import { compose } from '@fluentui-react-native/framework';
+import { extractProps } from '@fluentui-react-native/framework-base';
 
 import { stylingSettings } from './MenuList.styling';
 import type { MenuListProps, MenuListState, MenuListType } from './MenuList.types';
@@ -47,12 +48,13 @@ export const MenuList = compose<MenuListType>({
             itemPosition++;
           }
 
+          const childProps = extractProps<IViewProps>(child);
           return React.cloneElement(
             child as React.ReactElement<unknown, string | React.JSXElementConstructor<any>>,
             {
-              accessibilityPositionInSet: child.props.accessibilityPositionInSet ?? itemPosition, // win32
-              accessibilitySetSize: child.props.accessibilitySetSize ?? itemCount, //win32
-              ...(child.props.tooltip && { alwaysShowToolTip: true }),
+              accessibilityPosInSet: childProps?.accessibilityPosInSet ?? itemPosition, // win32
+              accessibilitySetSize: childProps?.accessibilitySetSize ?? itemCount, //win32
+              ...(childProps?.tooltip && { alwaysShowToolTip: true }),
             } as any,
           );
         }

package/src/MenuList/MenuList.types.ts

@@ -1,5 +1,5 @@
 import type React from 'react';
-import type { ScrollViewProps, View } from 'react-native';
+import type { ScrollViewProps, View, AnimatableNumericValue } from 'react-native';
 
 import type { IViewProps } from '@fluentui-react-native/adapters';
 import type { FocusZoneProps } from '@fluentui-react-native/focus-zone';
@@ -23,7 +23,7 @@ export interface MenuListTokens extends LayoutTokens, IBackgroundColorTokens {
    * Border radius of the menu list
    * @platform android macos
    */
-  borderRadius?: number;
+  borderRadius?: AnimatableNumericValue | string;
 }
 
 export interface MenuListProps extends Omit<IViewProps, 'onPress'> {

package/src/MenuList/useMenuList.ts

@@ -3,6 +3,7 @@ import { Platform } from 'react-native';
 import type { View } from 'react-native';
 
 import type { InteractionEvent } from '@fluentui-react-native/interactive-hooks';
+import type { NativeKeyEvent } from '@fluentui-react-native/adapters';
 
 import type { MenuListProps, MenuListState, TrackedMenuItem } from './MenuList.types';
 import { useMenuContext } from '../context/menuContext';
@@ -137,7 +138,7 @@ export const useMenuList = (_props: MenuListProps): MenuListState => {
     [trackedMenuItems],
   );
 
-  const onListKeyDown = (e: InteractionEvent) => {
+  const onListKeyDown = (e: NativeKeyEvent) => {
     const key = e.nativeEvent.key;
     if (handledKeys.includes(key)) {
       // For iOS and macOS, 'Home' and 'End' must set focus on the first and last enabled item.
@@ -164,7 +165,7 @@ export const useMenuList = (_props: MenuListProps): MenuListState => {
   });
 
   // focus management
-  const focusZoneRef = React.useRef<View>();
+  const focusZoneRef = React.useRef<View>(null);
   const setFocusZoneFocus = () => {
     focusZoneRef?.current?.focus();
   };
@@ -209,6 +210,5 @@ export const useMenuItemTracking = (ref: React.RefObject<View>, disabled: boolea
   React.useEffect(() => {
     trackMenuItem(item);
     return () => untrackMenuItem(item);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 };

package/src/MenuPopover/MenuPopover.types.ts

@@ -13,7 +13,7 @@ export type MenuPopoverTokens =
        * The props for the corner radius for the Modal MenuPopover
        * @platform android macos
        */
-      borderRadius?: AnimatableNumericValue;
+      borderRadius?: AnimatableNumericValue | string;
 
       /**
        * Shadown elevation for the Modal MenuPopover

package/src/MenuPopover/useMenuPopover.ts

@@ -29,7 +29,6 @@ export const useMenuPopover = (props: MenuPopoverProps): MenuPopoverState => {
   const onDismiss = React.useCallback(() => {
     props.onDismiss?.();
     setOpen(undefined, false /* isOpen */), [setOpen];
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props.onDismiss, setOpen]);
   const dismissBehaviors = isControlled ? controlledDismissBehaviors : undefined;
   const directionalHint = props.directionalHint ?? getDirectionalHint(isSubmenu, I18nManager.isRTL);

package/src/MenuTrigger/MenuTrigger.tsx

@@ -4,6 +4,8 @@ import type { MenuTriggerProps } from './MenuTrigger.types';
 import { menuTriggerName } from './MenuTrigger.types';
 import { useMenuTrigger } from './useMenuTrigger';
 import { MenuTriggerProvider } from '../context/menuTriggerContext';
+import type { IViewProps } from '@fluentui-react-native/adapters';
+import { extractProps } from '@fluentui-react-native/framework-base';
 
 export const MenuTrigger: React.FunctionComponent<MenuTriggerProps> = (props: MenuTriggerProps) => {
   if (__DEV__) {
@@ -12,13 +14,14 @@ export const MenuTrigger: React.FunctionComponent<MenuTriggerProps> = (props: Me
     }
   }
 
-  const menuTrigger = useMenuTrigger(props.children.props);
+  const childrenProps = extractProps<IViewProps>(props.children);
+  const menuTrigger = useMenuTrigger(childrenProps);
 
   // 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 revised = React.cloneElement(props.children, {
-    ...(props.children.props.tooltip && { alwaysShowToolTip: true }),
+    ...(childrenProps?.tooltip && { alwaysShowToolTip: true }),
     ...menuTrigger.props,
   });
 

package/src/MenuTrigger/MenuTrigger.types.ts

@@ -1,6 +1,7 @@
 import type * as React from 'react';
 
-import type { InteractionEvent, PressablePropsExtended } from '@fluentui-react-native/interactive-hooks';
+import type { MouseEvent } from 'react-native';
+import type { PressablePropsExtended } from '@fluentui-react-native/interactive-hooks';
 
 export const menuTriggerName = 'MenuTrigger';
 
@@ -24,7 +25,7 @@ export interface MenuTriggerChildProps extends Omit<PressablePropsExtended, 'onP
   /**
    * A callback to call on button click event
    */
-  onClick?: (e: InteractionEvent) => void;
+  onClick?: (e: MouseEvent) => void;
 }
 
 export interface MenuTriggerState {

package/src/MenuTrigger/useMenuTrigger.ts

@@ -1,9 +1,7 @@
 import React from 'react';
-import type { AccessibilityActionEvent, AccessibilityActionName } from 'react-native';
+import type { AccessibilityActionEvent, AccessibilityActionName, MouseEvent } from 'react-native';
 import { Platform } from 'react-native';
 
-import type { InteractionEvent } from '@fluentui-react-native/interactive-hooks';
-
 import type { MenuTriggerChildProps, MenuTriggerState } from './MenuTrigger.types';
 import { useMergedRefs } from './useMergeRefs';
 import { hoverDelayDefault } from '../consts';
@@ -31,7 +29,7 @@ export const useMenuTrigger = (childProps: MenuTriggerChildProps): MenuTriggerSt
     accessibilityActions: childAccessibilityActions,
     accessibilityState: childAccessibilityState,
     onAccessibilityAction: childOnAccessibilityAction,
-    accessibilityPositionInSet: childAccessibilityPositionInSet, // win32
+    accessibilityPosInSet: childaccessibilityPosInSet, // win32
     accessibilitySetSize: childAccessibilitySetSize, // win32
     onClick: childOnClick,
     onHoverIn: childOnHoverIn,
@@ -76,7 +74,7 @@ export const useMenuTrigger = (childProps: MenuTriggerChildProps): MenuTriggerSt
   );
 
   const onHoverIn = React.useCallback(
-    (e: InteractionEvent) => {
+    (e: MouseEvent) => {
       if (openOnHover) {
         clearTimeout(popoverHoverOutTimer);
         clearTimeout(triggerHoverOutTimer);
@@ -92,7 +90,7 @@ export const useMenuTrigger = (childProps: MenuTriggerChildProps): MenuTriggerSt
   );
 
   const onHoverOut = React.useCallback(
-    (e: InteractionEvent) => {
+    (e: MouseEvent) => {
       if (openOnHover) {
         e.persist();
         const timer = setTimeout(() => {
@@ -107,7 +105,7 @@ export const useMenuTrigger = (childProps: MenuTriggerChildProps): MenuTriggerSt
   );
 
   const onClick = React.useCallback(
-    (e: InteractionEvent) => {
+    (e: MouseEvent) => {
       setOpen(e, !open);
       childOnClick && childOnClick(e);
     },
@@ -125,7 +123,7 @@ export const useMenuTrigger = (childProps: MenuTriggerChildProps): MenuTriggerSt
       accessibilityState,
       accessibilityActions,
       onAccessibilityAction,
-      accessibilityPositionInSet: childAccessibilityPositionInSet ?? context.accessibilityPositionInSet, // win32
+      accessibilityPosInSet: childaccessibilityPosInSet ?? context.accessibilityPosInSet, // win32
       accessibilitySetSize: childAccessibilitySetSize ?? context.accessibilitySetSize, // win32
     },
     hasSubmenu: context.isSubmenu,

package/src/MenuTrigger/useMergeRefs.ts

@@ -34,7 +34,6 @@ export function useMergedRefs<T>(...refs: (React.Ref<T> | undefined)[]): RefObje
         }
       }
     },
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- already exhaustive
     [...refs],
   ) as unknown as RefObjectFunction<T>;