@fluentui-react-native/menu 0.13.1 → 0.14.0

package/lib-commonjs/__tests__/Menu.test.js

@@ -0,0 +1,148 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var React = (0, tslib_1.__importStar)(require("react"));
+var renderer = (0, tslib_1.__importStar)(require("react-test-renderer"));
+var Menu_1 = require("../Menu/Menu");
+var test_tools_1 = require("@fluentui-react-native/test-tools");
+var MenuTrigger_1 = (0, tslib_1.__importDefault)(require("../MenuTrigger/MenuTrigger"));
+var button_1 = require("@fluentui-react-native/button");
+var MenuPopover_1 = (0, tslib_1.__importDefault)(require("../MenuPopover/MenuPopover"));
+var MenuList_1 = require("../MenuList/MenuList");
+var MenuItem_1 = require("../MenuItem/MenuItem");
+var MenuItemCheckbox_1 = require("../MenuItemCheckbox/MenuItemCheckbox");
+var MenuDivider_1 = require("../MenuDivider/MenuDivider");
+var MenuItemRadio_1 = require("../MenuItemRadio/MenuItemRadio");
+describe('Checkbox component tests', function () {
+    it('Menu default', function () {
+        var tree = renderer
+            .create(React.createElement(Menu_1.Menu, null,
+            React.createElement(MenuTrigger_1.default, null,
+                React.createElement(button_1.ButtonV1, null, "Default")),
+            React.createElement(MenuPopover_1.default, null,
+                React.createElement(MenuList_1.MenuList, null,
+                    React.createElement(MenuItem_1.MenuItem, { content: "Option 1" })))))
+            .toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+    it('Menu open', function () {
+        var tree = renderer
+            .create(React.createElement(Menu_1.Menu, { open: true },
+            React.createElement(MenuTrigger_1.default, null,
+                React.createElement(button_1.ButtonV1, null, "Open")),
+            React.createElement(MenuPopover_1.default, null,
+                React.createElement(MenuList_1.MenuList, null,
+                    React.createElement(MenuItem_1.MenuItem, { content: "Option 1" })))))
+            .toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+    it('Menu defaultOpen', function () {
+        var tree = renderer
+            .create(React.createElement(Menu_1.Menu, { defaultOpen: true },
+            React.createElement(MenuTrigger_1.default, null,
+                React.createElement(button_1.ButtonV1, null, "Open")),
+            React.createElement(MenuPopover_1.default, null,
+                React.createElement(MenuList_1.MenuList, null,
+                    React.createElement(MenuItem_1.MenuItem, { content: "Option 1" }),
+                    React.createElement(MenuItem_1.MenuItem, { disabled: true, content: "Option 2" })))))
+            .toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+    it('Menu open checkbox and divider', function () {
+        var tree = renderer
+            .create(React.createElement(Menu_1.Menu, { open: true },
+            React.createElement(MenuTrigger_1.default, null,
+                React.createElement(button_1.ButtonV1, null, "Open")),
+            React.createElement(MenuPopover_1.default, null,
+                React.createElement(MenuList_1.MenuList, null,
+                    React.createElement(MenuItemCheckbox_1.MenuItemCheckbox, { content: "Option 1", name: "Option 1" }),
+                    React.createElement(MenuDivider_1.MenuDivider, null),
+                    React.createElement(MenuItemCheckbox_1.MenuItemCheckbox, { disabled: true, content: "Option 2", name: "Option 2" })))))
+            .toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+    it('Menu open radio', function () {
+        var tree = renderer
+            .create(React.createElement(Menu_1.Menu, { open: true },
+            React.createElement(MenuTrigger_1.default, null,
+                React.createElement(button_1.ButtonV1, null, "Open")),
+            React.createElement(MenuPopover_1.default, null,
+                React.createElement(MenuList_1.MenuList, null,
+                    React.createElement(MenuItemRadio_1.MenuItemRadio, { content: "Option 1", name: "Option 1" }),
+                    React.createElement(MenuItemRadio_1.MenuItemRadio, { content: "Option 2", name: "Option 2" })))))
+            .toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+    it('Menu open checkbox defaultChecked', function () {
+        var tree = renderer
+            .create(React.createElement(Menu_1.Menu, { open: true, defaultChecked: { 'Option 1': true } },
+            React.createElement(MenuTrigger_1.default, null,
+                React.createElement(button_1.ButtonV1, null, "Open")),
+            React.createElement(MenuPopover_1.default, null,
+                React.createElement(MenuList_1.MenuList, null,
+                    React.createElement(MenuItemCheckbox_1.MenuItemCheckbox, { content: "Option 1", name: "Option 1" }),
+                    React.createElement(MenuDivider_1.MenuDivider, null),
+                    React.createElement(MenuItemCheckbox_1.MenuItemCheckbox, { content: "Option 2", name: "Option 2" })))))
+            .toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+    it('Menu open checkbox checked', function () {
+        var tree = renderer
+            .create(React.createElement(Menu_1.Menu, { open: true, checked: { 'Option 1': true } },
+            React.createElement(MenuTrigger_1.default, null,
+                React.createElement(button_1.ButtonV1, null, "Open")),
+            React.createElement(MenuPopover_1.default, null,
+                React.createElement(MenuList_1.MenuList, null,
+                    React.createElement(MenuItemCheckbox_1.MenuItemCheckbox, { content: "Option 1", name: "Option 1" }),
+                    React.createElement(MenuDivider_1.MenuDivider, null),
+                    React.createElement(MenuItemCheckbox_1.MenuItemCheckbox, { content: "Option 2", name: "Option 2" })))))
+            .toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+    it('Menu submenu', function () {
+        var tree = renderer
+            .create(React.createElement(Menu_1.Menu, { open: true },
+            React.createElement(MenuTrigger_1.default, null,
+                React.createElement(button_1.ButtonV1, null, "Default")),
+            React.createElement(MenuPopover_1.default, null,
+                React.createElement(MenuList_1.MenuList, null,
+                    React.createElement(MenuItem_1.MenuItem, { content: "Option 1" }),
+                    React.createElement(Menu_1.Menu, null,
+                        React.createElement(MenuTrigger_1.default, null,
+                            React.createElement(MenuItem_1.MenuItem, { content: "Option 2" })),
+                        React.createElement(MenuPopover_1.default, null,
+                            React.createElement(MenuList_1.MenuList, null,
+                                React.createElement(MenuItem_1.MenuItem, { content: "Option 1" }))))))))
+            .toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+});
+describe('Menu rerender tests', function () {
+    it('Menu re-renders correctly', function () {
+        (0, test_tools_1.checkReRender)(function () { return (React.createElement(Menu_1.Menu, { open: true },
+            React.createElement(MenuTrigger_1.default, null,
+                React.createElement(button_1.ButtonV1, null, "Rerender twice")),
+            React.createElement(MenuPopover_1.default, null,
+                React.createElement(MenuList_1.MenuList, null,
+                    React.createElement(MenuItem_1.MenuItem, { content: "Option 1" }))))); }, 3);
+    });
+    it('Menu re-renders correctly with style', function () {
+        var style = { backgroundColor: 'black' };
+        (0, test_tools_1.checkReRender)(function () { return (React.createElement(Menu_1.Menu, null,
+            React.createElement(MenuTrigger_1.default, null,
+                React.createElement(button_1.ButtonV1, { style: style }, "Rerender twice")),
+            React.createElement(MenuPopover_1.default, null,
+                React.createElement(MenuList_1.MenuList, null,
+                    React.createElement(MenuItem_1.MenuItem, { content: "Option 1" }))))); }, 3);
+    });
+    it('Menu re-renders correctly with accessibilityAction', function () {
+        var action = [{ name: 'Expand' }];
+        (0, test_tools_1.checkReRender)(function () { return (React.createElement(Menu_1.Menu, null,
+            React.createElement(MenuTrigger_1.default, null,
+                React.createElement(button_1.ButtonV1, null, "Rerender twice")),
+            React.createElement(MenuPopover_1.default, null,
+                React.createElement(MenuList_1.MenuList, null,
+                    React.createElement(MenuItem_1.MenuItem, { accessibilityActions: action, content: "Option 1" }))))); }, 3);
+    });
+});
+//# sourceMappingURL=Menu.test.js.map

package/lib-commonjs/__tests__/Menu.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.test.js","sourceRoot":"","sources":["../../src/__tests__/Menu.test.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/menu",
-  "version": "0.13.1",
+  "version": "0.14.0",
   "description": "A cross-platform Menu component using the Fluent Design System",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -34,8 +34,10 @@
     "tslib": "^2.3.1"
   },
   "devDependencies": {
+    "@fluentui-react-native/button": ">=0.22.26 <1.0.0",
     "@fluentui-react-native/eslint-config-rules": "^0.1.1",
     "@fluentui-react-native/scripts": "^0.1.1",
+    "@fluentui-react-native/test-tools": ">=0.1.1 <1.0.0",
     "@types/react-native": "^0.64.0",
     "react-native": "^0.64.3"
   },

package/src/Menu/useMenu.ts

@@ -4,7 +4,7 @@ import { useMenuContext } from '../context/menuContext';
 import { MenuProps, MenuState } from './Menu.types';
 
 export const useMenu = (props: MenuProps): MenuState => {
-  const triggerRef = React.useRef(null);
+  const triggerRef = React.useRef();
   const context = useMenuContext();
   const isSubmenu = context.triggerRef !== null;
   const isControlled = typeof props.open !== 'undefined';

package/src/MenuPopover/useMenuPopover.ts

@@ -5,6 +5,8 @@ import { useMenuContext } from '../context/menuContext';
 import { MenuPopoverProps, MenuPopoverState } from './MenuPopover.types';
 import { isCloseOnHoverOutEnabled } from '../consts';
 
+const controlledDismissBehaviors = ['preventDismissOnKeyDown', 'preventDismissOnClickOutside'] as DismissBehaviors[];
+
 export const useMenuPopover = (_props: MenuPopoverProps): MenuPopoverState => {
   const context = useMenuContext();
   const {
@@ -20,7 +22,7 @@ export const useMenuPopover = (_props: MenuPopoverProps): MenuPopoverState => {
   } = context;
 
   const onDismiss = React.useCallback(() => setOpen(undefined, false /* isOpen */), [setOpen]);
-  const dismissBehaviors = isControlled ? (['preventDismissOnKeyDown', 'preventDismissOnClickOutside'] as DismissBehaviors[]) : undefined;
+  const dismissBehaviors = isControlled ? controlledDismissBehaviors : undefined;
   const directionalHint = getDirectionalHint(isSubmenu, I18nManager.isRTL);
 
   // Initial focus behavior differs per platform, Windows platforms move focus

package/src/MenuTrigger/MenuTrigger.tsx

@@ -31,18 +31,18 @@ MenuTrigger.displayName = menuTriggerName;
 
 const getRevisedState = memoize(getRevisedStateWorker);
 function getRevisedStateWorker(state: MenuTriggerState, props: any): MenuTriggerProps {
-  const revisedProps = { ...state.props };
+  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/useMenuTrigger.ts

@@ -7,12 +7,14 @@ 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 => {
   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,
+    );
+  });
+});