@fluentui-react-native/menu 1.14.42 → 1.15.1

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';
@@ -11,8 +11,10 @@ import type { MenuItemProps, MenuItemTokens } from '../MenuItem/MenuItem.types';
 
 export const menuItemCheckboxName = 'MenuItemCheckbox';
 
-export interface MenuItemCheckboxTokens
-  extends Omit<MenuItemTokens, 'submenuIndicatorPadding' | 'submenuIndicatorSize' | 'disabled' | 'focused' | 'hovered' | 'pressed'> {
+export interface MenuItemCheckboxTokens extends Omit<
+  MenuItemTokens,
+  'submenuIndicatorPadding' | 'submenuIndicatorSize' | 'disabled' | 'focused' | 'hovered' | 'pressed'
+> {
   /**
    * Color of the checkmark icon
    */
@@ -54,7 +56,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';
@@ -11,8 +11,10 @@ import type { MenuItemProps, MenuItemTokens } from '../MenuItem/MenuItem.types';
 
 export const menuItemRadioName = 'MenuItemRadio';
 
-export interface MenuItemRadioTokens
-  extends Omit<MenuItemTokens, 'submenuIndicatorPadding' | 'submenuIndicatorSize' | 'disabled' | 'focused' | 'hovered' | 'pressed'> {
+export interface MenuItemRadioTokens extends Omit<
+  MenuItemTokens,
+  'submenuIndicatorPadding' | 'submenuIndicatorSize' | 'disabled' | 'focused' | 'hovered' | 'pressed'
+> {
   /**
    * Color of the checkmark icon
    */
@@ -62,7 +64,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

@@ -7,20 +7,19 @@ export const menuPopoverName = 'MenuPopover';
 
 // Support for anchorRect and beakWidth will come at a later time.
 // Omitting dismissBehaviors as it doesn't seem to make sense as a token
-export type MenuPopoverTokens =
-  | Omit<ICalloutTokens, 'anchorRect' | 'beakWidth' | 'dismissBehaviors'> & {
-      /**
-       * The props for the corner radius for the Modal MenuPopover
-       * @platform android macos
-       */
-      borderRadius?: AnimatableNumericValue;
+export type MenuPopoverTokens = Omit<ICalloutTokens, 'anchorRect' | 'beakWidth' | 'dismissBehaviors'> & {
+  /**
+   * The props for the corner radius for the Modal MenuPopover
+   * @platform android macos
+   */
+  borderRadius?: AnimatableNumericValue | string;
 
-      /**
-       * Shadown elevation for the Modal MenuPopover
-       * @platform android
-       */
-      elevation?: number;
-    };
+  /**
+   * Shadown elevation for the Modal MenuPopover
+   * @platform android
+   */
+  elevation?: number;
+};
 
 export type MenuPopoverProps = ICalloutProps;
 

package/src/MenuPopover/MenuPopoverTokens.macos.ts

@@ -12,8 +12,8 @@ export const useMenuPopoverTokens = buildUseTokens<MenuPopoverTokens>(
     borderColor: isHighContrast()
       ? t.colors.neutralStroke1
       : getCurrentAppearance(t.host.appearance, 'light') === 'dark'
-      ? t.colors.neutralStroke3
-      : t.colors.transparentStroke,
+        ? t.colors.neutralStroke3
+        : t.colors.transparentStroke,
   }),
   menuPopoverName,
 );

package/src/MenuPopover/useMenuPopover.ts

@@ -28,8 +28,7 @@ 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
+    (setOpen(undefined, false /* isOpen */), [setOpen]);
   }, [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>;
 

package/src/__tests__/Menu.test.tsx

@@ -1,7 +1,6 @@
-import * as React from 'react';
-
 import { ButtonV1 as Button } from '@fluentui-react-native/button';
 import * as renderer from 'react-test-renderer';
+import { act } from 'react';
 
 import { Menu } from '../Menu/Menu';
 import { MenuDivider } from '../MenuDivider/MenuDivider';
@@ -16,8 +15,9 @@ import MenuTrigger from '../MenuTrigger/MenuTrigger';
 
 describe('Menu component tests', () => {
   it('Menu default', () => {
-    const tree = renderer
-      .create(
+    let component: renderer.ReactTestRenderer;
+    act(() => {
+      component = renderer.create(
         <Menu>
           <MenuTrigger>
             <Button>Default</Button>
@@ -28,14 +28,16 @@ describe('Menu component tests', () => {
             </MenuList>
           </MenuPopover>
         </Menu>,
-      )
-      .toJSON();
+      );
+    });
+    const tree = component!.toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   it('Menu open', () => {
-    const tree = renderer
-      .create(
+    let component: renderer.ReactTestRenderer;
+    act(() => {
+      component = renderer.create(
         <Menu open>
           <MenuTrigger>
             <Button>Open</Button>
@@ -46,14 +48,36 @@ describe('Menu component tests', () => {
             </MenuList>
           </MenuPopover>
         </Menu>,
-      )
-      .toJSON();
+      );
+    });
+    const tree = component!.toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   it('Menu defaultOpen', () => {
-    const tree = renderer
-      .create(
+    let component: renderer.ReactTestRenderer;
+    act(() => {
+      component = renderer.create(
+        <Menu defaultOpen>
+          <MenuTrigger>
+            <Button>Open</Button>
+          </MenuTrigger>
+          <MenuPopover>
+            <MenuList>
+              <MenuItem>Option 1</MenuItem>
+            </MenuList>
+          </MenuPopover>
+        </Menu>,
+      );
+    });
+    const tree = component!.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('Menu defaultOpen with disabled', () => {
+    let component: renderer.ReactTestRenderer;
+    act(() => {
+      component = renderer.create(
         <Menu defaultOpen>
           <MenuTrigger>
             <Button>Open</Button>
@@ -65,14 +89,16 @@ describe('Menu component tests', () => {
             </MenuList>
           </MenuPopover>
         </Menu>,
-      )
-      .toJSON();
+      );
+    });
+    const tree = component!.toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   it('Menu open checkbox and divider', () => {
-    const tree = renderer
-      .create(
+    let component: renderer.ReactTestRenderer;
+    act(() => {
+      component = renderer.create(
         <Menu open>
           <MenuTrigger>
             <Button>Open</Button>
@@ -87,14 +113,16 @@ describe('Menu component tests', () => {
             </MenuList>
           </MenuPopover>
         </Menu>,
-      )
-      .toJSON();
+      );
+    });
+    const tree = component!.toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   it('Menu open radio', () => {
-    const tree = renderer
-      .create(
+    let component: renderer.ReactTestRenderer;
+    act(() => {
+      component = renderer.create(
         <Menu open>
           <MenuTrigger>
             <Button>Open</Button>
@@ -106,14 +134,16 @@ describe('Menu component tests', () => {
             </MenuList>
           </MenuPopover>
         </Menu>,
-      )
-      .toJSON();
+      );
+    });
+    const tree = component!.toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   it('Menu open checkbox defaultChecked', () => {
-    const tree = renderer
-      .create(
+    let component: renderer.ReactTestRenderer;
+    act(() => {
+      component = renderer.create(
         <Menu open defaultChecked={['Option 1']}>
           <MenuTrigger>
             <Button>Open</Button>
@@ -126,14 +156,16 @@ describe('Menu component tests', () => {
             </MenuList>
           </MenuPopover>
         </Menu>,
-      )
-      .toJSON();
+      );
+    });
+    const tree = component!.toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   it('Menu open checkbox checked', () => {
-    const tree = renderer
-      .create(
+    let component: renderer.ReactTestRenderer;
+    act(() => {
+      component = renderer.create(
         <Menu open checked={['Option 1']}>
           <MenuTrigger>
             <Button>Open</Button>
@@ -146,14 +178,16 @@ describe('Menu component tests', () => {
             </MenuList>
           </MenuPopover>
         </Menu>,
-      )
-      .toJSON();
+      );
+    });
+    const tree = component!.toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   it('Menu submenu', () => {
-    const tree = renderer
-      .create(
+    let component: renderer.ReactTestRenderer;
+    act(() => {
+      component = renderer.create(
         <Menu open>
           <MenuTrigger>
             <Button>Default</Button>
@@ -174,16 +208,18 @@ describe('Menu component tests', () => {
             </MenuList>
           </MenuPopover>
         </Menu>,
-      )
-      .toJSON();
+      );
+    });
+    const tree = component!.toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   // Note the capital T the "Tip" (in the snapshot)
   // It is intentional as it matches the same prop in NetUI
   it('Menu alwaysShowToolTip', () => {
-    const tree = renderer
-      .create(
+    let component: renderer.ReactTestRenderer;
+    act(() => {
+      component = renderer.create(
         <Menu>
           <MenuTrigger>
             <Button tooltip="A Tooltip">Button</Button>
@@ -201,15 +237,17 @@ describe('Menu component tests', () => {
             </MenuList>
           </MenuPopover>
         </Menu>,
-      )
-      .toJSON();
+      );
+    });
+    const tree = component!.toJSON();
     expect(tree).toMatchSnapshot();
   });
 });
 
 it('Menu open menu group and menu header', () => {
-  const tree = renderer
-    .create(
+  let component: renderer.ReactTestRenderer;
+  act(() => {
+    component = renderer.create(
       <Menu open>
         <MenuTrigger>
           <Button>Open</Button>
@@ -228,7 +266,8 @@ it('Menu open menu group and menu header', () => {
           </MenuList>
         </MenuPopover>
       </Menu>,
-    )
-    .toJSON();
+    );
+  });
+  const tree = component!.toJSON();
   expect(tree).toMatchSnapshot();
 });