@fluentui-react-native/menu 0.13.1 → 0.14.2

package/src/MenuTrigger/MenuTrigger.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import { memoize, stagedComponent } from '@fluentui-react-native/framework';
-import { menuTriggerName, MenuTriggerProps, MenuTriggerState } from './MenuTrigger.types';
+import { menuTriggerName, MenuTriggerChildProps, 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 menuTrigger = useMenuTrigger(props);
+export const MenuTrigger = stagedComponent((_props: React.PropsWithChildren<Record<never, any>>) => {
+  const menuTrigger = useMenuTrigger();
 
-  return (_rest: MenuTriggerProps, children: React.ReactNode) => {
+  return (_rest: React.PropsWithChildren<Record<never, any>>, children: React.ReactNode) => {
     const childrenArray = React.Children.toArray(children) as React.ReactElement[];
 
     if (__DEV__) {
@@ -21,7 +21,7 @@ export const MenuTrigger = stagedComponent((props: MenuTriggerProps) => {
     // 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 revisedProps = getRevisedState(menuTrigger, child.props);
+    const revisedProps = getRevisedProps(menuTrigger, child.props);
     const revised = React.cloneElement(child, revisedProps);
 
     return <MenuTriggerProvider value={menuTrigger.hasSubmenu}>{revised}</MenuTriggerProvider>;
@@ -29,20 +29,20 @@ export const MenuTrigger = stagedComponent((props: MenuTriggerProps) => {
 });
 MenuTrigger.displayName = menuTriggerName;
 
-const getRevisedState = memoize(getRevisedStateWorker);
-function getRevisedStateWorker(state: MenuTriggerState, props: any): MenuTriggerProps {
-  const revisedProps = { ...state.props };
+const getRevisedProps = memoize(getRevisedPropsWorker);
+function getRevisedPropsWorker(state: MenuTriggerState, props: any): MenuTriggerChildProps {
+  const revisedProps = state.props;
   if (props.accessibilityState) {
-    revisedProps.accessibilityState = { ...state.props.accessibilityState, ...props.accessibilityState };
+    revisedProps.accessibilityState = { ...revisedProps.accessibilityState, ...props.accessibilityState };
   }
 
   if (props.accessibilityActions) {
-    revisedProps.accessibilityActions = { ...state.props.accessibilityActions, ...props.accessibilityActions };
+    revisedProps.accessibilityActions = { ...revisedProps.accessibilityActions, ...props.accessibilityActions };
   }
 
   if (props.onAccessibilityAction) {
     revisedProps.onAccessibilityAction = (e: AccessibilityActionEvent) => {
-      state.props.onAccessibilityAction(e);
+      revisedProps.onAccessibilityAction(e);
       props.onAccessibilityAction(e);
     };
   }

package/src/MenuTrigger/MenuTrigger.types.ts

@@ -3,7 +3,7 @@ import { ViewProps } from 'react-native';
 
 export const menuTriggerName = 'MenuTrigger';
 
-export interface MenuTriggerProps extends Omit<IWithPressableOptions<ViewProps>, 'onPress'> {
+export interface MenuTriggerChildProps extends Omit<IWithPressableOptions<ViewProps>, 'onPress'> {
   /**
    * A RefObject to refer to the trigger component.
    */
@@ -16,6 +16,6 @@ export interface MenuTriggerProps extends Omit<IWithPressableOptions<ViewProps>,
 }
 
 export interface MenuTriggerState {
-  props: MenuTriggerProps;
+  props: MenuTriggerChildProps;
   hasSubmenu: boolean;
 }

package/src/MenuTrigger/useMenuTrigger.ts

@@ -1,18 +1,20 @@
 import { useMenuContext } from '../context/menuContext';
 import { InteractionEvent } from '@fluentui-react-native/interactive-hooks';
-import { MenuTriggerProps, MenuTriggerState } from './MenuTrigger.types';
+import { MenuTriggerState } from './MenuTrigger.types';
 import { AccessibilityActionEvent, AccessibilityActionName, Platform } from 'react-native';
 import React from 'react';
 import { delayHover, isCloseOnHoverOutEnabled } from '../consts';
 
 const accessibilityActions =
   Platform.OS === ('win32' as any) ? [{ name: 'Expand' as AccessibilityActionName }, { name: 'Collapse' as AccessibilityActionName }] : [];
+const expandedState = { expanded: true };
+const collapsedState = { expanded: false };
 
-export const useMenuTrigger = (_props: MenuTriggerProps): MenuTriggerState => {
+export const useMenuTrigger = (): MenuTriggerState => {
   const context = useMenuContext();
   const { open, openOnHover, popoverHoverOutTimer, setOpen, setTriggerHoverOutTimer, triggerHoverOutTimer, triggerRef } = context;
 
-  const accessibilityState = open ? { expanded: true } : { expanded: false };
+  const accessibilityState = open ? expandedState : collapsedState;
 
   const onAccessibilityAction = React.useCallback(
     (e: AccessibilityActionEvent) => {

package/src/__tests__/Menu.test.tsx

@@ -0,0 +1,235 @@
+import * as React from 'react';
+import { AccessibilityActionName } from 'react-native';
+import * as renderer from 'react-test-renderer';
+import { Menu } from '../Menu/Menu';
+import { checkReRender } from '@fluentui-react-native/test-tools';
+import MenuTrigger from '../MenuTrigger/MenuTrigger';
+import { ButtonV1 as Button } from '@fluentui-react-native/button';
+import MenuPopover from '../MenuPopover/MenuPopover';
+import { MenuList } from '../MenuList/MenuList';
+import { MenuItem } from '../MenuItem/MenuItem';
+import { MenuItemCheckbox } from '../MenuItemCheckbox/MenuItemCheckbox';
+import { MenuDivider } from '../MenuDivider/MenuDivider';
+import { MenuItemRadio } from '../MenuItemRadio/MenuItemRadio';
+
+describe('Checkbox component tests', () => {
+  it('Menu default', () => {
+    const tree = renderer
+      .create(
+        <Menu>
+          <MenuTrigger>
+            <Button>Default</Button>
+          </MenuTrigger>
+          <MenuPopover>
+            <MenuList>
+              <MenuItem content="Option 1" />
+            </MenuList>
+          </MenuPopover>
+        </Menu>,
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('Menu open', () => {
+    const tree = renderer
+      .create(
+        <Menu open>
+          <MenuTrigger>
+            <Button>Open</Button>
+          </MenuTrigger>
+          <MenuPopover>
+            <MenuList>
+              <MenuItem content="Option 1" />
+            </MenuList>
+          </MenuPopover>
+        </Menu>,
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('Menu defaultOpen', () => {
+    const tree = renderer
+      .create(
+        <Menu defaultOpen>
+          <MenuTrigger>
+            <Button>Open</Button>
+          </MenuTrigger>
+          <MenuPopover>
+            <MenuList>
+              <MenuItem content="Option 1" />
+              <MenuItem disabled content="Option 2" />
+            </MenuList>
+          </MenuPopover>
+        </Menu>,
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('Menu open checkbox and divider', () => {
+    const tree = renderer
+      .create(
+        <Menu open>
+          <MenuTrigger>
+            <Button>Open</Button>
+          </MenuTrigger>
+          <MenuPopover>
+            <MenuList>
+              <MenuItemCheckbox content="Option 1" name="Option 1" />
+              <MenuDivider />
+              <MenuItemCheckbox disabled content="Option 2" name="Option 2" />
+            </MenuList>
+          </MenuPopover>
+        </Menu>,
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('Menu open radio', () => {
+    const tree = renderer
+      .create(
+        <Menu open>
+          <MenuTrigger>
+            <Button>Open</Button>
+          </MenuTrigger>
+          <MenuPopover>
+            <MenuList>
+              <MenuItemRadio content="Option 1" name="Option 1" />
+              <MenuItemRadio content="Option 2" name="Option 2" />
+            </MenuList>
+          </MenuPopover>
+        </Menu>,
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('Menu open checkbox defaultChecked', () => {
+    const tree = renderer
+      .create(
+        <Menu open defaultChecked={{ 'Option 1': true }}>
+          <MenuTrigger>
+            <Button>Open</Button>
+          </MenuTrigger>
+          <MenuPopover>
+            <MenuList>
+              <MenuItemCheckbox content="Option 1" name="Option 1" />
+              <MenuDivider />
+              <MenuItemCheckbox content="Option 2" name="Option 2" />
+            </MenuList>
+          </MenuPopover>
+        </Menu>,
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('Menu open checkbox checked', () => {
+    const tree = renderer
+      .create(
+        <Menu open checked={{ 'Option 1': true }}>
+          <MenuTrigger>
+            <Button>Open</Button>
+          </MenuTrigger>
+          <MenuPopover>
+            <MenuList>
+              <MenuItemCheckbox content="Option 1" name="Option 1" />
+              <MenuDivider />
+              <MenuItemCheckbox content="Option 2" name="Option 2" />
+            </MenuList>
+          </MenuPopover>
+        </Menu>,
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('Menu submenu', () => {
+    const tree = renderer
+      .create(
+        <Menu open>
+          <MenuTrigger>
+            <Button>Default</Button>
+          </MenuTrigger>
+          <MenuPopover>
+            <MenuList>
+              <MenuItem content="Option 1" />
+              <Menu>
+                <MenuTrigger>
+                  <MenuItem content="Option 2" />
+                </MenuTrigger>
+                <MenuPopover>
+                  <MenuList>
+                    <MenuItem content="Option 1" />
+                  </MenuList>
+                </MenuPopover>
+              </Menu>
+            </MenuList>
+          </MenuPopover>
+        </Menu>,
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});
+
+describe('Menu rerender tests', () => {
+  it('Menu re-renders correctly', () => {
+    checkReRender(
+      () => (
+        <Menu open>
+          <MenuTrigger>
+            <Button>Rerender twice</Button>
+          </MenuTrigger>
+          <MenuPopover>
+            <MenuList>
+              <MenuItem content="Option 1" />
+            </MenuList>
+          </MenuPopover>
+        </Menu>
+      ),
+      3,
+    );
+  });
+
+  it('Menu re-renders correctly with style', () => {
+    const style = { backgroundColor: 'black' };
+    checkReRender(
+      () => (
+        <Menu>
+          <MenuTrigger>
+            <Button style={style}>Rerender twice</Button>
+          </MenuTrigger>
+          <MenuPopover>
+            <MenuList>
+              <MenuItem content="Option 1" />
+            </MenuList>
+          </MenuPopover>
+        </Menu>
+      ),
+      3,
+    );
+  });
+
+  it('Menu re-renders correctly with accessibilityAction', () => {
+    const action = [{ name: 'Expand' as AccessibilityActionName }];
+    checkReRender(
+      () => (
+        <Menu>
+          <MenuTrigger>
+            <Button>Rerender twice</Button>
+          </MenuTrigger>
+          <MenuPopover>
+            <MenuList>
+              <MenuItem accessibilityActions={action} content="Option 1" />
+            </MenuList>
+          </MenuPopover>
+        </Menu>
+      ),
+      3,
+    );
+  });
+});