@dhis2-ui/menu 9.10.3 → 9.11.1-beta.1

package/build/cjs/flyout-menu/__tests__/flyout-menu.test.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+var _react2 = _interopRequireDefault(require("react"));
+var _menuItem = require("../../menu-item/menu-item.js");
+var _flyoutMenu = require("../flyout-menu.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+describe('Flyout Menu Component', () => {
+  it('can handle navigation of submenus', () => {
+    const {
+      getByText,
+      queryByText,
+      getAllByRole
+    } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_flyoutMenu.FlyoutMenu, null, /*#__PURE__*/_react2.default.createElement(_menuItem.MenuItem, {
+      label: "Item 1"
+    }), /*#__PURE__*/_react2.default.createElement(_menuItem.MenuItem, {
+      label: "Item 2"
+    }, /*#__PURE__*/_react2.default.createElement(_menuItem.MenuItem, {
+      label: "Item 2 a"
+    }))));
+    const itemOne = getByText(/Item 1/i);
+    const itemTwo = getByText(/Item 2/i);
+    let submenuChild = queryByText(/Item 2 a/i);
+    const menuItems = getAllByRole('menuitem');
+    expect(menuItems.length).toBe(2);
+    expect(menuItems[0]).toBe(itemOne.parentNode);
+    expect(menuItems[1]).toBe(itemTwo.parentNode);
+    expect(submenuChild).not.toBeInTheDocument();
+    _userEvent.default.tab();
+    expect(menuItems[0].parentNode).toHaveFocus();
+    expect(menuItems[1].parentNode).not.toHaveFocus();
+    _userEvent.default.keyboard('{ArrowDown}');
+    expect(menuItems[0].parentNode).not.toHaveFocus();
+    expect(menuItems[1].parentNode).toHaveFocus();
+    _userEvent.default.keyboard('{ArrowRight}');
+    submenuChild = getByText(/Item 2 a/i);
+    expect(submenuChild).toBeInTheDocument();
+    expect(submenuChild.parentElement.parentElement).toHaveFocus();
+    _userEvent.default.keyboard('{ArrowLeft}');
+    expect(queryByText(/Item 2 a/i)).not.toBeInTheDocument();
+    expect(menuItems[1].parentNode).toHaveFocus();
+  });
+});

package/build/cjs/flyout-menu/features/accepts_children/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('a FlyoutMenu with children is rendered', () => {
   cy.visitStory('FlyoutMenu', 'With Children');
   cy.get('[data-test="dhis2-uicore-menu"]').should('be.visible');

package/build/cjs/flyout-menu/features/position/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 const CLOSE_TO_DELTA = 1;
 (0, _cypressCucumberPreprocessor.Given)('there is enough space to the right of the MenuItem to fit the SubMenu', () => {
   cy.visitStory('FlyoutMenu', 'Default Position');
@@ -30,8 +29,10 @@ const CLOSE_TO_DELTA = 1;
 (0, _cypressCucumberPreprocessor.Then)('the SubMenu is rendered on top of the MenuItem', () => {
   getMenuItemAndSubMenuRects().should(_ref3 => {
     let [menuItemRect, subMenuRect] = _ref3;
-    expect(subMenuRect.left).to.be.at.most(menuItemRect.left);
-    expect(subMenuRect.right).to.be.at.least(menuItemRect.right);
+    expect(subMenuRect.left).to.be.at.most(menuItemRect.right);
+    expect(subMenuRect.right).to.be.at.least(menuItemRect.left);
+    expect(subMenuRect.top).to.be.at.most(menuItemRect.bottom);
+    expect(subMenuRect.bottom).to.be.at.least(menuItemRect.top);
   });
 });
 (0, _cypressCucumberPreprocessor.Then)('the top of the MenuItem is aligned with the top of the SubMenu wrapper', () => {
@@ -40,7 +41,6 @@ const CLOSE_TO_DELTA = 1;
     expect(menuItemRect.top).to.closeTo(popperRect.top, CLOSE_TO_DELTA);
   });
 });
-
 function getMenuItemAndSubMenuRects() {
   return cy.getPositionsBySelectors('[data-test="dhis2-uicore-menuitem"]', '[data-test="dhis2-uicore-popper"]');
 }

package/build/cjs/flyout-menu/features/toggles_submenus/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('a FlyoutMenu with two SubMenus is rendered', () => {
   cy.visitStory('FlyoutMenu', 'Toggles Sub Menus');
   cy.get('[data-test="dhis2-uicore-menu"]').should('be.visible');

package/build/cjs/flyout-menu/{flyout-menu.stories.e2e.js → flyout-menu.e2e.stories.js}

@@ -4,23 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.WithChildren = exports.TogglesSubMenus = exports.ShiftIntoView = exports.FlippedPosition = exports.DefaultPosition = void 0;
-
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-
 var _menu = require("@dhis2-ui/menu");
-
 var _react = _interopRequireDefault(require("react"));
-
 var _flyoutMenu = require("./flyout-menu.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var _default = {
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = {
   title: 'FlyoutMenu',
   component: _flyoutMenu.FlyoutMenu
 };
-exports.default = _default;
-
 const MenuItemSubMenuPositions = () => /*#__PURE__*/_react.default.createElement(_flyoutMenu.FlyoutMenu, null, /*#__PURE__*/_react.default.createElement(_menu.MenuItem, {
   label: "Item 1"
 }, /*#__PURE__*/_react.default.createElement("div", {
@@ -28,35 +20,25 @@ const MenuItemSubMenuPositions = () => /*#__PURE__*/_react.default.createElement
     padding: 30
   }
 }, "SubMenu 1")));
-
 const WithChildren = () => /*#__PURE__*/_react.default.createElement(_flyoutMenu.FlyoutMenu, null, "I am a child");
-
 exports.WithChildren = WithChildren;
-
 const TogglesSubMenus = () => /*#__PURE__*/_react.default.createElement(_flyoutMenu.FlyoutMenu, null, /*#__PURE__*/_react.default.createElement(_menu.MenuItem, {
   label: "Item 1"
 }, "SubMenu 1"), /*#__PURE__*/_react.default.createElement(_menu.MenuItem, {
   label: "Item 2"
 }, "SubMenu 2"));
-
 exports.TogglesSubMenus = TogglesSubMenus;
-
 const DefaultPosition = () => /*#__PURE__*/_react.default.createElement(MenuItemSubMenuPositions, null);
-
 exports.DefaultPosition = DefaultPosition;
-
 const FlippedPosition = () => /*#__PURE__*/_react.default.createElement("div", {
   className: "jsx-2297277891"
 }, /*#__PURE__*/_react.default.createElement(MenuItemSubMenuPositions, null), /*#__PURE__*/_react.default.createElement(_style.default, {
   id: "2297277891"
 }, ["div.jsx-2297277891{text-align:right;}"]));
-
 exports.FlippedPosition = FlippedPosition;
-
 const ShiftIntoView = () => /*#__PURE__*/_react.default.createElement("div", {
   className: "jsx-3052292650"
 }, /*#__PURE__*/_react.default.createElement(MenuItemSubMenuPositions, null), /*#__PURE__*/_react.default.createElement(_style.default, {
   id: "3052292650"
 }, ["html,body,#root{position:relative;width:200px;max-width:200px;overflow:hidden;}", "#root{border:3px dashed grey;}"]));
-
 exports.ShiftIntoView = ShiftIntoView;

package/build/cjs/flyout-menu/flyout-menu.js

@@ -4,23 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FlyoutMenu = void 0;
-
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-
 var _uiConstants = require("@dhis2/ui-constants");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireWildcard(require("react"));
-
-var _index = require("../index.js");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+var _index = require("../menu/index.js");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const FlyoutMenu = _ref => {
   let {
     children,
@@ -28,17 +19,44 @@ const FlyoutMenu = _ref => {
     dataTest,
     dense,
     maxHeight,
-    maxWidth
+    maxWidth,
+    closeMenu
   } = _ref;
   const [openedSubMenu, setOpenedSubMenu] = (0, _react.useState)(null);
-
   const toggleSubMenu = index => {
     const toggleValue = index === openedSubMenu ? null : index;
     setOpenedSubMenu(toggleValue);
   };
-
+  const divRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    if (!divRef.current) {
+      return;
+    }
+    const div = divRef.current;
+    const handleFocus = event => {
+      if (event.target === div) {
+        if (div !== null && div !== void 0 && div.children && div.children.length > 0) {
+          div.children[0].focus();
+        }
+      }
+    };
+    const handleKeyDown = event => {
+      if (event.key === 'Escape') {
+        event.preventDefault();
+        closeMenu && closeMenu();
+      }
+    };
+    div.addEventListener('focus', handleFocus);
+    div.addEventListener('keydown', handleKeyDown);
+    return () => {
+      div.removeEventListener('focus', handleFocus);
+      div.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [closeMenu]);
   return /*#__PURE__*/_react.default.createElement("div", {
     "data-test": dataTest,
+    tabIndex: 0,
+    ref: divRef,
     className: _style.default.dynamic([["3833750986", [_uiConstants.colors.white, _uiConstants.colors.grey200, _uiConstants.elevations.e300, dense ? '128' : '180', maxWidth, maxHeight, _uiConstants.spacers.dp4]]]) + " " + (className || "")
   }, /*#__PURE__*/_react.default.createElement(_index.Menu, {
     dense: dense
@@ -48,9 +66,8 @@ const FlyoutMenu = _ref => {
   }) : child)), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "3833750986",
     dynamic: [_uiConstants.colors.white, _uiConstants.colors.grey200, _uiConstants.elevations.e300, dense ? '128' : '180', maxWidth, maxHeight, _uiConstants.spacers.dp4]
-  }, ["div.__jsx-style-dynamic-selector{background:".concat(_uiConstants.colors.white, ";border:1px solid ").concat(_uiConstants.colors.grey200, ";border-radius:3px;box-shadow:").concat(_uiConstants.elevations.e300, ";display:inline-block;min-width:").concat(dense ? '128' : '180', "px;max-width:").concat(maxWidth, ";max-height:").concat(maxHeight, ";padding:").concat(_uiConstants.spacers.dp4, " 0;overflow:auto;}")]));
+  }, [`div.__jsx-style-dynamic-selector{background:${_uiConstants.colors.white};border:1px solid ${_uiConstants.colors.grey200};border-radius:3px;box-shadow:${_uiConstants.elevations.e300};display:inline-block;min-width:${dense ? '128' : '180'}px;max-width:${maxWidth};max-height:${maxHeight};padding:${_uiConstants.spacers.dp4} 0;overflow:auto;}`]));
 };
-
 exports.FlyoutMenu = FlyoutMenu;
 FlyoutMenu.defaultProps = {
   dataTest: 'dhis2-uicore-menu',
@@ -61,8 +78,9 @@ FlyoutMenu.propTypes = {
   /** Typically, but not limited to, `MenuItem` components */
   children: _propTypes.default.node,
   className: _propTypes.default.string,
+  /** when Escape key is pressed, this function is called to close the flyout menu */
+  closeMenu: _propTypes.default.func,
   dataTest: _propTypes.default.string,
-
   /** Menu uses smaller dimensions */
   dense: _propTypes.default.bool,
   maxHeight: _propTypes.default.string,

package/build/cjs/flyout-menu/{flyout-menu.stories.js → flyout-menu.prod.stories.js}

@@ -4,27 +4,34 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.WithVariousChildren = exports.WithSubMenus = exports.WithCustomMenuItem = exports.MaxWidth = exports.MaxHeight = exports.DropDownMenu = exports.Dense = exports.Default = void 0;
-
+var _uiIcons = require("@dhis2/ui-icons");
 var _layer = require("@dhis2-ui/layer");
-
 var _menu = require("@dhis2-ui/menu");
-
 var _popper = require("@dhis2-ui/popper");
-
-var _uiIcons = require("@dhis2/ui-icons");
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _flyoutMenu = require("./flyout-menu.js");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const description = `
+Use menus to provide access to options and actions where space is limited and displaying all the options would be impractical. For example, providing access to a range of actions for every dashboard item displayed. Containing all those actions in menus keeps the page manageable.
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+The menu component is flexible in where it can be used and its contents can be flexible too. However, the most common use case is a menu containing menu items.
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+Make sure the menu item labels are short and easy to understand. One word is often enough to describe an action or option. Do not use sentences as labels. Some examples of good menu item labels:
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+- "Save"
+- "Open as map"
+- "Export PDF"
+- "Duplicate"
 
-const description = "\nUse menus to provide access to options and actions where space is limited and displaying all the options would be impractical. For example, providing access to a range of actions for every dashboard item displayed. Containing all those actions in menus keeps the page manageable.\n\nThe menu component is flexible in where it can be used and its contents can be flexible too. However, the most common use case is a menu containing menu items.\n\nMake sure the menu item labels are short and easy to understand. One word is often enough to describe an action or option. Do not use sentences as labels. Some examples of good menu item labels:\n\n- \"Save\"\n- \"Open as map\"\n- \"Export PDF\"\n- \"Duplicate\"\n\nSee more about how to use menus at the [design system](https://github.com/dhis2/design-system/blob/master/molecules/menu.md).\n\n```js\nimport { FlyoutMenu } from 'dhis2/ui'\n```\n";
-var _default = {
+See more about how to use menus at the [design system](https://github.com/dhis2/design-system/blob/master/molecules/menu.md).
+
+\`\`\`js
+import { FlyoutMenu } from 'dhis2/ui'
+\`\`\`
+`;
+var _default = exports.default = {
   title: 'Flyout Menu',
   component: _flyoutMenu.FlyoutMenu,
   parameters: {
@@ -35,21 +42,16 @@ var _default = {
     }
   }
 };
-exports.default = _default;
-
 const Default = args => /*#__PURE__*/_react.default.createElement(_flyoutMenu.FlyoutMenu, args, /*#__PURE__*/_react.default.createElement(_menu.MenuItem, {
   label: "Item 1"
 }), /*#__PURE__*/_react.default.createElement(_menu.MenuItem, {
   label: "Item 2"
 }));
-
 exports.Default = Default;
-const Dense = Default.bind({});
-exports.Dense = Dense;
+const Dense = exports.Dense = Default.bind({});
 Dense.args = {
   dense: true
 };
-
 const MaxHeight = args => /*#__PURE__*/_react.default.createElement(_flyoutMenu.FlyoutMenu, args, /*#__PURE__*/_react.default.createElement(_menu.MenuItem, {
   label: "Item 1"
 }), /*#__PURE__*/_react.default.createElement(_menu.MenuItem, {
@@ -71,12 +73,10 @@ const MaxHeight = args => /*#__PURE__*/_react.default.createElement(_flyoutMenu.
 }), /*#__PURE__*/_react.default.createElement(_menu.MenuItem, {
   label: "Item 10"
 }));
-
 exports.MaxHeight = MaxHeight;
 MaxHeight.args = {
   maxHeight: '250px'
 };
-
 const MaxWidth = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_flyoutMenu.FlyoutMenu, null, /*#__PURE__*/_react.default.createElement(_menu.MenuItem, {
   label: "Short item 1"
 }), /*#__PURE__*/_react.default.createElement(_menu.MenuItem, {
@@ -86,16 +86,16 @@ const MaxWidth = args => /*#__PURE__*/_react.default.createElement(_react.defaul
 }), /*#__PURE__*/_react.default.createElement(_menu.MenuItem, {
   label: "Item 2 - with a lot of text and using a default maxWidth value of 380px"
 })), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_flyoutMenu.FlyoutMenu, args, /*#__PURE__*/_react.default.createElement(_menu.MenuItem, {
-  label: "Item 1 - with a lot of text and using a custom maxWidth value of\n                ".concat(args.maxWidth)
+  label: `Item 1 - with a lot of text and using a custom maxWidth value of
+                ${args.maxWidth}`
 }), /*#__PURE__*/_react.default.createElement(_menu.MenuItem, {
-  label: "Item 2 - with a lot of text and using a custom maxWidth value of\n                ".concat(args.maxWidth)
+  label: `Item 2 - with a lot of text and using a custom maxWidth value of
+                ${args.maxWidth}`
 })));
-
 exports.MaxWidth = MaxWidth;
 MaxWidth.args = {
   maxWidth: '300px'
 };
-
 const WithSubMenus = args => /*#__PURE__*/_react.default.createElement(_flyoutMenu.FlyoutMenu, args, /*#__PURE__*/_react.default.createElement(_menu.MenuItem, {
   label: "Item 1"
 }), /*#__PURE__*/_react.default.createElement(_menu.MenuItem, {
@@ -127,7 +127,6 @@ const WithSubMenus = args => /*#__PURE__*/_react.default.createElement(_flyoutMe
 })), /*#__PURE__*/_react.default.createElement(_menu.MenuItem, {
   label: "Item 5"
 }));
-
 exports.WithSubMenus = WithSubMenus;
 WithSubMenus.parameters = {
   docs: {
@@ -136,7 +135,6 @@ WithSubMenus.parameters = {
     }
   }
 };
-
 const WithVariousChildren = args => /*#__PURE__*/_react.default.createElement(_flyoutMenu.FlyoutMenu, args, /*#__PURE__*/_react.default.createElement(_menu.MenuSectionHeader, {
   label: "Section with sub-menus"
 }), /*#__PURE__*/_react.default.createElement(_menu.MenuItem, {
@@ -178,7 +176,6 @@ const WithVariousChildren = args => /*#__PURE__*/_react.default.createElement(_f
 }), /*#__PURE__*/_react.default.createElement(_menu.MenuDivider, null), /*#__PURE__*/_react.default.createElement(_menu.MenuItem, {
   label: "Item 3"
 }));
-
 exports.WithVariousChildren = WithVariousChildren;
 WithVariousChildren.parameters = {
   docs: {
@@ -187,13 +184,10 @@ WithVariousChildren.parameters = {
     }
   }
 };
-
 const DropDownMenu = args => {
   const ref = (0, _react.useRef)();
   const [open, setOpen] = (0, _react.useState)(false);
-
   const toggle = () => setOpen(!open);
-
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
     ref: ref,
     onClick: toggle
@@ -202,13 +196,14 @@ const DropDownMenu = args => {
   }, /*#__PURE__*/_react.default.createElement(_popper.Popper, {
     reference: ref,
     placement: "bottom-start"
-  }, /*#__PURE__*/_react.default.createElement(_flyoutMenu.FlyoutMenu, args, /*#__PURE__*/_react.default.createElement(_menu.MenuItem, {
+  }, /*#__PURE__*/_react.default.createElement(_flyoutMenu.FlyoutMenu, _extends({}, args, {
+    closeMenu: toggle
+  }), /*#__PURE__*/_react.default.createElement(_menu.MenuItem, {
     label: "Item 1"
   }), /*#__PURE__*/_react.default.createElement(_menu.MenuItem, {
     label: "Item 2"
   })))));
 };
-
 exports.DropDownMenu = DropDownMenu;
 DropDownMenu.parameters = {
   docs: {
@@ -220,7 +215,6 @@ DropDownMenu.parameters = {
     }
   }
 };
-
 const WithCustomMenuItem = args => {
   // You should not create custom components in the render cycle
   // this is just for demo purposes
@@ -234,20 +228,16 @@ const WithCustomMenuItem = args => {
     const WIDTH = 1400;
     const centerY = (window.screen.height - HEIGHT) / 2;
     const centerX = (window.screen.width - WIDTH) / 2;
-
-    const onClick = () => window.open(to, 'Popup', ['menubar=no', 'location=no', 'resizable=no', 'scrollbars=no', 'status=no', "width=".concat(WIDTH), "height=".concat(HEIGHT), "top=".concat(centerY), "left=".concat(centerX)].join());
-
+    const onClick = () => window.open(to, 'Popup', ['menubar=no', 'location=no', 'resizable=no', 'scrollbars=no', 'status=no', `width=${WIDTH}`, `height=${HEIGHT}`, `top=${centerY}`, `left=${centerX}`].join());
     return /*#__PURE__*/_react.default.createElement(_menu.MenuItem, _extends({
       onClick: onClick,
       label: children
     }, rest));
   };
-
   return /*#__PURE__*/_react.default.createElement(_flyoutMenu.FlyoutMenu, args, /*#__PURE__*/_react.default.createElement(_menu.MenuItem, {
     label: "A normal menu item"
   }), /*#__PURE__*/_react.default.createElement(PopupWindowMenuItem, {
     to: "http://dhis2.org"
   }, "A custom menu item (popup window)"));
 };
-
 exports.WithCustomMenuItem = WithCustomMenuItem;

package/build/cjs/flyout-menu/index.js

@@ -9,5 +9,4 @@ Object.defineProperty(exports, "FlyoutMenu", {
     return _flyoutMenu.FlyoutMenu;
   }
 });
-
 var _flyoutMenu = require("./flyout-menu.js");

package/build/cjs/index.js

@@ -33,13 +33,8 @@ Object.defineProperty(exports, "MenuSectionHeader", {
     return _index3.MenuSectionHeader;
   }
 });
-
 var _index = require("./menu-divider/index.js");
-
 var _index2 = require("./menu-item/index.js");
-
 var _index3 = require("./menu-section-header/index.js");
-
 var _index4 = require("./menu/index.js");
-
 var _index5 = require("./flyout-menu/index.js");

package/build/cjs/menu/__tests__/menu.test.js

@@ -1,25 +1,15 @@
 "use strict";
 
 var _input = require("@dhis2-ui/input");
-
 var _react = require("@testing-library/react");
-
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
-
 var _enzyme = require("enzyme");
-
 var _react2 = _interopRequireDefault(require("react"));
-
 var _menuDivider = require("../../menu-divider/menu-divider.js");
-
 var _menuItem = require("../../menu-item/menu-item.js");
-
 var _menuSectionHeader = require("../../menu-section-header/menu-section-header.js");
-
 var _menu = require("../menu.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 describe('Menu Component', () => {
   const menuDataTest = 'data-test-menu';
   const menuItemDataTest = 'data-test-menu-item';
@@ -85,11 +75,9 @@ describe('Menu Component', () => {
     const menuItem1 = getByText(/Menu item 1/i);
     const menuItem2 = getByText(/Menu item 2/i);
     expect(menu).not.toHaveFocus();
-
-    _userEvent.default.tab(); // check if LI parent node has focus or not
+    _userEvent.default.tab();
+    // check if LI parent node has focus or not
     // headers and dividers do not receive focus
-
-
     expect(header.parentNode.parentNode).not.toHaveFocus();
     expect(divider.parentNode.parentNode).not.toHaveFocus();
     expect(menuItem2.parentNode.parentNode).not.toHaveFocus();
@@ -114,18 +102,13 @@ describe('Menu Component', () => {
     })));
     const menuItem1 = getByText(/Menu item 1/i);
     const menuItem2 = getByText(/Menu item 2/i);
-
     _userEvent.default.tab();
-
-    expect(menuItem1.parentNode.parentNode).toHaveFocus(); // simulate arrowDown press
-
+    expect(menuItem1.parentNode.parentNode).toHaveFocus();
+    // simulate arrowDown press
     _userEvent.default.keyboard('{ArrowDown}');
-
     expect(menuItem1.parentNode.parentNode).not.toHaveFocus();
     expect(menuItem2.parentNode.parentNode).toHaveFocus();
-
     _userEvent.default.keyboard('{ArrowDown}');
-
     expect(menuItem1.parentNode.parentNode).toHaveFocus();
     expect(menuItem2.parentNode.parentNode).not.toHaveFocus();
   });
@@ -148,18 +131,14 @@ describe('Menu Component', () => {
     })));
     const menuItem1 = getByText(/Menu item 1/i);
     const menuItem2 = getByText(/Menu item 2/i);
-
     _userEvent.default.tab();
+    expect(menuItem1.parentNode.parentNode).toHaveFocus();
 
-    expect(menuItem1.parentNode.parentNode).toHaveFocus(); // simulate arrowUp press
-
+    // simulate arrowUp press
     _userEvent.default.keyboard('{ArrowUp}');
-
     expect(menuItem1.parentNode.parentNode).not.toHaveFocus();
     expect(menuItem2.parentNode.parentNode).toHaveFocus();
-
     _userEvent.default.keyboard('{ArrowUp}');
-
     expect(menuItem1.parentNode.parentNode).toHaveFocus();
     expect(menuItem2.parentNode.parentNode).not.toHaveFocus();
   });
@@ -176,17 +155,11 @@ describe('Menu Component', () => {
       label: "Click menu item"
     })));
     const clickableItem = getByText(/Click menu item/i);
-
     _userEvent.default.tab();
-
     expect(clickableItem.parentNode.parentNode).toHaveFocus();
-
     _userEvent.default.keyboard('[Space]');
-
     expect(onClick).toHaveBeenCalledTimes(1);
-
     _userEvent.default.keyboard('{Enter}');
-
     expect(onClick).toHaveBeenCalledTimes(2);
   });
   it('can handle non MenuItem components', () => {
@@ -209,28 +182,21 @@ describe('Menu Component', () => {
     }, "Span 2"))));
     const nonListMenuItem = getByText(/span 1/i);
     const listMenuItem = getByText(/link 2/i);
-    const plainListItem = getByText(/span 2/i); // all children must be list items
+    const plainListItem = getByText(/span 2/i);
 
+    // all children must be list items
     expect(nonListMenuItem.parentElement.nodeName).toBe('LI');
-
     _userEvent.default.tab();
-
     expect(nonListMenuItem.parentElement).toHaveFocus();
     expect(nonListMenuItem.parentElement.tabIndex).toBe(0);
     expect(onClick).toHaveBeenCalledTimes(0);
-
     _userEvent.default.keyboard('[Space]');
-
     expect(onClick).toHaveBeenCalledTimes(1);
-
     _userEvent.default.keyboard('{ArrowDown}');
-
     expect(listMenuItem.parentElement).toHaveFocus();
-
     _userEvent.default.keyboard('{ArrowDown}');
-
-    expect(nonListMenuItem.parentElement).toHaveFocus(); // non menu items do not receive focus
-
+    expect(nonListMenuItem.parentElement).toHaveFocus();
+    // non menu items do not receive focus
     expect(plainListItem.parentElement).not.toHaveFocus();
   });
   it('does not hijack input change value if space entered [bug]', () => {
@@ -249,15 +215,10 @@ describe('Menu Component', () => {
     })));
     const inputField = getByPlaceholderText('test');
     inputField.focus();
-
     _userEvent.default.keyboard('t');
-
     _userEvent.default.keyboard('e');
-
     _userEvent.default.keyboard(' ');
-
     _userEvent.default.keyboard('st');
-
     expect(inputField.value).toBe('te st');
     expect(onChange).toHaveBeenCalled();
   });

package/build/cjs/menu/features/accepts_children/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('a Menu with children is rendered', () => {
   cy.visitStory('Menu', 'With children');
   cy.get('[data-test="dhis2-uicore-menulist"]').should('be.visible');