@dhis2-ui/menu 9.11.0 → 9.11.1-beta.2

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

@@ -2,8 +2,7 @@ import _JSXStyle from "styled-jsx/style";
 import { colors, elevations, spacers } from '@dhis2/ui-constants';
 import PropTypes from 'prop-types';
 import React, { Children, cloneElement, isValidElement, useEffect, useRef, useState } from 'react';
-import { Menu } from '../index.js';
-
+import { Menu } from '../menu/index.js';
 const FlyoutMenu = _ref => {
   let {
     children,
@@ -15,20 +14,16 @@ const FlyoutMenu = _ref => {
     closeMenu
   } = _ref;
   const [openedSubMenu, setOpenedSubMenu] = useState(null);
-
   const toggleSubMenu = index => {
     const toggleValue = index === openedSubMenu ? null : index;
     setOpenedSubMenu(toggleValue);
   };
-
   const divRef = useRef(null);
   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) {
@@ -36,14 +31,12 @@ const FlyoutMenu = _ref => {
         }
       }
     };
-
     const handleKeyDown = event => {
       if (event.key === 'Escape') {
         event.preventDefault();
         closeMenu && closeMenu();
       }
     };
-
     div.addEventListener('focus', handleFocus);
     div.addEventListener('keydown', handleKeyDown);
     return () => {
@@ -64,9 +57,8 @@ const FlyoutMenu = _ref => {
   }) : child)), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "3833750986",
     dynamic: [colors.white, colors.grey200, elevations.e300, dense ? '128' : '180', maxWidth, maxHeight, spacers.dp4]
-  }, ["div.__jsx-style-dynamic-selector{background:".concat(colors.white, ";border:1px solid ").concat(colors.grey200, ";border-radius:3px;box-shadow:").concat(elevations.e300, ";display:inline-block;min-width:").concat(dense ? '128' : '180', "px;max-width:").concat(maxWidth, ";max-height:").concat(maxHeight, ";padding:").concat(spacers.dp4, " 0;overflow:auto;}")]));
+  }, [`div.__jsx-style-dynamic-selector{background:${colors.white};border:1px solid ${colors.grey200};border-radius:3px;box-shadow:${elevations.e300};display:inline-block;min-width:${dense ? '128' : '180'}px;max-width:${maxWidth};max-height:${maxHeight};padding:${spacers.dp4} 0;overflow:auto;}`]));
 };
-
 FlyoutMenu.defaultProps = {
   dataTest: 'dhis2-uicore-menu',
   maxWidth: '380px',
@@ -76,11 +68,9 @@ FlyoutMenu.propTypes = {
   /** Typically, but not limited to, `MenuItem` components */
   children: PropTypes.node,
   className: PropTypes.string,
-
   /** when Escape key is pressed, this function is called to close the flyout menu */
   closeMenu: PropTypes.func,
   dataTest: PropTypes.string,
-
   /** Menu uses smaller dimensions */
   dense: PropTypes.bool,
   maxHeight: PropTypes.string,

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

@@ -1,12 +1,28 @@
-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); }
-
+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); }
+import { IconChevronDown16 } from '@dhis2/ui-icons';
 import { Layer } from '@dhis2-ui/layer';
 import { MenuDivider, MenuItem, MenuSectionHeader } from '@dhis2-ui/menu';
 import { Popper } from '@dhis2-ui/popper';
-import { IconChevronDown16 } from '@dhis2/ui-icons';
 import React, { useState, useRef } from 'react';
 import { FlyoutMenu } from './flyout-menu.js';
-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";
+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.
+
+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.
+
+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:
+
+- "Save"
+- "Open as map"
+- "Export PDF"
+- "Duplicate"
+
+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'
+\`\`\`
+`;
 export default {
   title: 'Flyout Menu',
   component: FlyoutMenu,
@@ -60,9 +76,11 @@ export const MaxWidth = args => /*#__PURE__*/React.createElement(React.Fragment,
 }), /*#__PURE__*/React.createElement(MenuItem, {
   label: "Item 2 - with a lot of text and using a default maxWidth value of 380px"
 })), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(FlyoutMenu, args, /*#__PURE__*/React.createElement(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.createElement(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}`
 })));
 MaxWidth.args = {
   maxWidth: '300px'
@@ -156,9 +174,7 @@ WithVariousChildren.parameters = {
 export const DropDownMenu = args => {
   const ref = useRef();
   const [open, setOpen] = useState(false);
-
   const toggle = () => setOpen(!open);
-
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
     ref: ref,
     onClick: toggle
@@ -198,15 +214,12 @@ export 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.createElement(MenuItem, _extends({
       onClick: onClick,
       label: children
     }, rest));
   };
-
   return /*#__PURE__*/React.createElement(FlyoutMenu, args, /*#__PURE__*/React.createElement(MenuItem, {
     label: "A normal menu item"
   }), /*#__PURE__*/React.createElement(PopupWindowMenuItem, {

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

@@ -72,9 +72,9 @@ describe('Menu Component', () => {
     const menuItem1 = getByText(/Menu item 1/i);
     const menuItem2 = getByText(/Menu item 2/i);
     expect(menu).not.toHaveFocus();
-    userEvent.tab(); // check if LI parent node has focus or not
+    userEvent.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();
@@ -100,8 +100,8 @@ describe('Menu Component', () => {
     const menuItem1 = getByText(/Menu item 1/i);
     const menuItem2 = getByText(/Menu item 2/i);
     userEvent.tab();
-    expect(menuItem1.parentNode.parentNode).toHaveFocus(); // simulate arrowDown press
-
+    expect(menuItem1.parentNode.parentNode).toHaveFocus();
+    // simulate arrowDown press
     userEvent.keyboard('{ArrowDown}');
     expect(menuItem1.parentNode.parentNode).not.toHaveFocus();
     expect(menuItem2.parentNode.parentNode).toHaveFocus();
@@ -129,8 +129,9 @@ describe('Menu Component', () => {
     const menuItem1 = getByText(/Menu item 1/i);
     const menuItem2 = getByText(/Menu item 2/i);
     userEvent.tab();
-    expect(menuItem1.parentNode.parentNode).toHaveFocus(); // simulate arrowUp press
+    expect(menuItem1.parentNode.parentNode).toHaveFocus();
 
+    // simulate arrowUp press
     userEvent.keyboard('{ArrowUp}');
     expect(menuItem1.parentNode.parentNode).not.toHaveFocus();
     expect(menuItem2.parentNode.parentNode).toHaveFocus();
@@ -178,8 +179,9 @@ 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.tab();
     expect(nonListMenuItem.parentElement).toHaveFocus();
@@ -190,8 +192,8 @@ describe('Menu Component', () => {
     userEvent.keyboard('{ArrowDown}');
     expect(listMenuItem.parentElement).toHaveFocus();
     userEvent.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]', () => {

package/build/es/menu/helpers.js

@@ -1,26 +1,23 @@
 const isMenuItem = role => {
   return ['menuitem', 'menuitemcheckbox', 'menuitemradio'].includes(role);
 };
-
 const isValidMenuItemNode = node => {
   if (node.nodeName === 'LI' && node.firstElementChild) {
     return isValidMenuItemNode(node.firstElementChild);
   }
+  const role = node.getAttribute('role');
 
-  const role = node.getAttribute('role'); // for h1 - h6 headings since their heading role is not explicitly set
+  // for h1 - h6 headings since their heading role is not explicitly set
   // style elements do not have roles
-
   if (node.nodeName.startsWith('H') || node.nodeName === 'STYLE') {
     return false;
   }
-
   if (role) {
     return isMenuItem(role);
   } else {
     console.warn('Missing: role attribute on the menu child');
   }
 };
-
 export const getFocusableItemsIndices = elements => {
   const focusableIndices = [];
   elements.forEach((node, index) => {
@@ -32,6 +29,5 @@ export const getFocusableItemsIndices = elements => {
 };
 export const hasMenuItemRole = component => {
   var _component$props;
-
   return isMenuItem(component === null || component === void 0 ? void 0 : (_component$props = component.props) === null || _component$props === void 0 ? void 0 : _component$props['role']);
 };

package/build/es/menu/menu.e2e.stories.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Menu } from './index.js';
+export default {
+  title: 'Menu'
+};
+export const WithChildren = () => /*#__PURE__*/React.createElement(Menu, null, "I am a child");

package/build/es/menu/menu.js

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import React, { Children, cloneElement, isValidElement, useMemo } from 'react';
 import { hasMenuItemRole } from './helpers.js';
 import { useMenuNavigation } from './use-menu.js';
-
 const Menu = _ref => {
   let {
     children,
@@ -19,18 +18,20 @@ const Menu = _ref => {
     if (! /*#__PURE__*/isValidElement(child)) {
       return child;
     }
-
     const tabIndex = index === focusedIndex ? 0 : -1;
-    const childProps = { ...child.props
-    }; // this check is based on the type of child.
+    const childProps = {
+      ...child.props
+    };
+
+    // this check is based on the type of child.
     // if it is a native HTML element, like li, a, span, only apply its child props
     // if it is a functional (React) component, it applies custom props, like dense, hideDivider, etc
-
     if (typeof child.type === 'string') {
       // if the native HTML element child is not li, then wrap it in an li tag
       // apply the tabindex prop if a child has the menuitem role to make it focusable
       if (child.type === 'li') {
-        return hasMenuItemRole(child.props.children[0]) ? /*#__PURE__*/cloneElement(child, { ...childProps,
+        return hasMenuItemRole(child.props.children[0]) ? /*#__PURE__*/cloneElement(child, {
+          ...childProps,
           tabIndex
         }) : /*#__PURE__*/cloneElement(child, childProps);
       } else {
@@ -41,7 +42,8 @@ const Menu = _ref => {
     } else {
       childProps.dense = typeof child.props.dense === 'boolean' ? child.props.dense : dense;
       childProps.hideDivider = typeof child.props.hideDivider !== 'boolean' && index === 0 ? true : child.props.hideDivider;
-      return /*#__PURE__*/cloneElement(child, { ...childProps,
+      return /*#__PURE__*/cloneElement(child, {
+        ...childProps,
         tabIndex
       });
     }
@@ -56,7 +58,6 @@ const Menu = _ref => {
     id: "1636612837"
   }, ["ul.jsx-1636612837{display:block;position:relative;width:100%;margin:0;padding:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}"]));
 };
-
 Menu.defaultProps = {
   dataTest: 'dhis2-uicore-menulist'
 };
@@ -65,7 +66,6 @@ Menu.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
   dataTest: PropTypes.string,
-
   /** Applies `dense` property to all child components unless already specified */
   dense: PropTypes.bool
 };

package/build/es/menu/{menu.stories.js → menu.prod.stories.js}

@@ -1,7 +1,24 @@
 import React from 'react';
 import { MenuItem, MenuSectionHeader } from '../index.js';
 import { Menu } from './index.js';
-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\nTypical children are Menu Items, Menu Dividers, and Menu Section Headers.\n\n```js\nimport { Menu } from '@dhis2/ui'\n```\n";
+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.
+
+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.
+
+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:
+
+- "Save"
+- "Open as map"
+- "Export PDF"
+- "Duplicate"
+
+Typical children are Menu Items, Menu Dividers, and Menu Section Headers.
+
+\`\`\`js
+import { Menu } from '@dhis2/ui'
+\`\`\`
+`;
 export default {
   title: 'Menu',
   component: Menu,

package/build/es/menu/use-menu.js

@@ -3,17 +3,19 @@ import { getFocusableItemsIndices } from './helpers.js';
 export const useMenuNavigation = children => {
   const menuRef = useRef(null);
   const [focusableItemsIndices, setFocusableItemsIndices] = useState(null);
-  const [activeItemIndex, setActiveItemIndex] = useState(-1); // Initializes the indices for focusable items
-  // focusable items have the role of menuitem || menuitemcheckbox || menuitemradio
+  const [activeItemIndex, setActiveItemIndex] = useState(-1);
 
+  // Initializes the indices for focusable items
+  // focusable items have the role of menuitem || menuitemcheckbox || menuitemradio
   useEffect(() => {
     if (menuRef) {
       const menuItems = Array.from(menuRef.current.children);
       const itemsIndices = getFocusableItemsIndices(menuItems);
       setFocusableItemsIndices(itemsIndices);
     }
-  }, [children]); // Focus the active menu child
+  }, [children]);
 
+  // Focus the active menu child
   useEffect(() => {
     if (menuRef) {
       if (focusableItemsIndices !== null && focusableItemsIndices !== void 0 && focusableItemsIndices.length && activeItemIndex > -1) {
@@ -21,50 +23,45 @@ export const useMenuNavigation = children => {
         menuRef.current.children[currentIndex].focus();
       }
     }
-  }, [activeItemIndex, focusableItemsIndices]); // Navigate through focusable children using arrow keys
-  // Trigger actionable items
+  }, [activeItemIndex, focusableItemsIndices]);
 
+  // Navigate through focusable children using arrow keys
+  // Trigger actionable items
   const handleKeyDown = useCallback(event => {
     const totalFocusablePositions = focusableItemsIndices === null || focusableItemsIndices === void 0 ? void 0 : focusableItemsIndices.length;
-
     if (totalFocusablePositions) {
       const lastIndex = totalFocusablePositions - 1;
-
       switch (event.key) {
         case 'ArrowUp':
           event.preventDefault();
           setActiveItemIndex(activeItemIndex > 0 ? activeItemIndex - 1 : lastIndex);
           break;
-
         case 'ArrowDown':
           event.preventDefault();
           setActiveItemIndex(activeItemIndex >= lastIndex ? 0 : activeItemIndex + 1);
           break;
-
         case 'Enter':
         case ' ':
           if (event.target.nodeName === 'LI') {
             var _event$target$childre, _event$target$childre2;
-
             event.preventDefault();
             (_event$target$childre = event.target.children) === null || _event$target$childre === void 0 ? void 0 : (_event$target$childre2 = _event$target$childre[0]) === null || _event$target$childre2 === void 0 ? void 0 : _event$target$childre2.click();
           }
-
           break;
-
         default:
           break;
       }
     }
-  }, [activeItemIndex, focusableItemsIndices === null || focusableItemsIndices === void 0 ? void 0 : focusableItemsIndices.length]); // Event listeners for menu focus and key handling
+  }, [activeItemIndex, focusableItemsIndices === null || focusableItemsIndices === void 0 ? void 0 : focusableItemsIndices.length]);
 
+  // Event listeners for menu focus and key handling
   useEffect(() => {
     if (!menuRef) {
       return;
     }
+    const menu = menuRef.current;
 
-    const menu = menuRef.current; // Focus the first menu item when the menu receives focus
-
+    // Focus the first menu item when the menu receives focus
     const handleFocus = event => {
       if (event.target === menuRef.current) {
         const firstItemIndex = focusableItemsIndices === null || focusableItemsIndices === void 0 ? void 0 : focusableItemsIndices[0];
@@ -72,7 +69,6 @@ export const useMenuNavigation = children => {
         setActiveItemIndex(0);
       }
     };
-
     menu.addEventListener('focus', handleFocus);
     menu.addEventListener('keydown', handleKeyDown);
     return () => {

package/build/es/menu-divider/menu-divider.js

@@ -1,9 +1,8 @@
 import _JSXStyle from "styled-jsx/style";
-import { Divider } from '@dhis2-ui/divider';
 import { colors } from '@dhis2/ui-constants';
+import { Divider } from '@dhis2-ui/divider';
 import PropTypes from 'prop-types';
 import React from 'react';
-
 const MenuDivider = _ref => {
   let {
     className,
@@ -18,9 +17,8 @@ const MenuDivider = _ref => {
   }), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "591815244",
     dynamic: [colors.white]
-  }, ["li.__jsx-style-dynamic-selector{list-style:none;background-color:".concat(colors.white, ";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;padding:0;line-height:0;}")]));
+  }, [`li.__jsx-style-dynamic-selector{list-style:none;background-color:${colors.white};-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;padding:0;line-height:0;}`]));
 };
-
 MenuDivider.defaultProps = {
   dataTest: 'dhis2-uicore-menudivider'
 };

package/build/es/menu-divider/{menu-divider.stories.js → menu-divider.prod.stories.js}

@@ -1,7 +1,13 @@
 import React from 'react';
 import { Menu, MenuItem } from '../index.js';
 import { MenuDivider } from './menu-divider.js';
-const description = "\nItems in a menu can be split into separate sections by using dividers. Group relevant menu items together to help the user understand the options quickly. A divider can be used alone. If using a MenuSectionHeader, a divider will be automatically included. Try not to group single menu items together. An exception to this is a critical destructive menu item, like 'Delete', which can be separated from other menu items.\n\n```js\nimport { MenuDivider } from '@dhis2/ui'\n```\n";
+const description = `
+Items in a menu can be split into separate sections by using dividers. Group relevant menu items together to help the user understand the options quickly. A divider can be used alone. If using a MenuSectionHeader, a divider will be automatically included. Try not to group single menu items together. An exception to this is a critical destructive menu item, like 'Delete', which can be separated from other menu items.
+
+\`\`\`js
+import { MenuDivider } from '@dhis2/ui'
+\`\`\`
+`;
 export default {
   title: 'Menu Divider',
   component: MenuDivider,
@@ -13,13 +19,11 @@ export default {
     }
   }
 };
-
 const Template = args => /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement(MenuItem, {
   label: "Item above divider"
 }), /*#__PURE__*/React.createElement(MenuDivider, args), /*#__PURE__*/React.createElement(MenuItem, {
   label: "Item below divider"
 }));
-
 export const Default = Template.bind({});
 export const Dense = Template.bind({});
 Dense.args = {

package/build/es/menu-item/features/accepts_href/index.js

@@ -3,5 +3,5 @@ Given('a MenuItem with href is rendered', () => {
   cy.visitStory('MenuItem', 'With Href');
 });
 Then('a link is rendered with the href', () => {
-  cy.get('a').should('have.attr', 'href').and('include', 'url.test');
+  cy.get('#storybook-root a').should('have.attr', 'href').and('include', 'url.test');
 });

package/build/es/menu-item/features/accepts_label/index.js

@@ -4,5 +4,5 @@ Given('a MenuItem supplied with a label is rendered', () => {
   cy.get('[data-test="dhis2-uicore-menuitem"]').should('be.visible');
 });
 Then('the label is visible', () => {
-  cy.contains('label').should('be.visible');
+  cy.get(':contains("label")').should('be.visible');
 });

package/build/es/menu-item/features/accepts_target/index.js

@@ -3,5 +3,5 @@ Given('a MenuItem with target is rendered', () => {
   cy.visitStory('MenuItem', 'With Target');
 });
 Then('a link is rendered with the target', () => {
-  cy.get('a').should('have.attr', 'target').and('include', '_blank');
+  cy.get('#storybook-root a').should('have.attr', 'target').and('include', '_blank');
 });

package/build/es/menu-item/menu-item.js

@@ -1,15 +1,13 @@
 import _JSXStyle from "styled-jsx/style";
+import { IconChevronRight24 } from '@dhis2/ui-icons';
 import { Popper } from '@dhis2-ui/popper';
 import { Portal } from '@dhis2-ui/portal';
-import { IconChevronRight24 } from '@dhis2/ui-icons';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React, { useEffect, useRef, useState } from 'react';
-import { FlyoutMenu } from '../index.js';
+import { FlyoutMenu } from '../flyout-menu/index.js';
 import styles from './menu-item.styles.js';
-
 const isModifiedEvent = evt => evt.metaKey || evt.altKey || evt.ctrlKey || evt.shiftKey;
-
 const createOnClickHandler = _ref => {
   let {
     onClick,
@@ -21,7 +19,6 @@ const createOnClickHandler = _ref => {
     if (isLink && isModifiedEvent(evt) || !(onClick || toggleSubMenu)) {
       return;
     }
-
     evt.preventDefault();
     evt.stopPropagation();
     onClick && onClick({
@@ -30,7 +27,6 @@ const createOnClickHandler = _ref => {
     toggleSubMenu && toggleSubMenu();
   };
 };
-
 const MenuItem = _ref2 => {
   let {
     href,
@@ -64,26 +60,19 @@ const MenuItem = _ref2 => {
     if (!menuItemRef.current) {
       return;
     }
-
     const menuItem = menuItemRef.current;
-
     const handleKeyDown = event => {
       var _openSubMenus, _openSubMenus2;
-
       const firstChild = event.target.children[0];
       const hasSubMenu = firstChild === null || firstChild === void 0 ? void 0 : firstChild.getAttribute('aria-haspopup');
-
       switch (event.key) {
         // for submenus
         case 'ArrowRight':
           event.preventDefault();
-
           if (hasSubMenu) {
             firstChild.click();
           }
-
           break;
-
         case 'ArrowLeft':
         case 'Escape':
           // close flyout menu
@@ -93,7 +82,6 @@ const MenuItem = _ref2 => {
           break;
       }
     };
-
     menuItem.addEventListener('keydown', handleKeyDown);
     return () => {
       menuItem.removeEventListener('keydown', handleKeyDown);
@@ -105,7 +93,7 @@ const MenuItem = _ref2 => {
     role: "presentation",
     tabIndex: tabIndex,
     "data-submenu-open": children && showSubMenu,
-    className: "jsx-".concat(styles.__hash) + " " + (cx(className, {
+    className: `jsx-${styles.__hash}` + " " + (cx(className, {
       destructive,
       disabled,
       dense,
@@ -127,15 +115,15 @@ const MenuItem = _ref2 => {
     "aria-haspopup": children && 'menu',
     "aria-expanded": showSubMenu,
     "aria-label": label,
-    className: "jsx-".concat(styles.__hash)
+    className: `jsx-${styles.__hash}`
   }, icon && /*#__PURE__*/React.createElement("span", {
-    className: "jsx-".concat(styles.__hash) + " " + "icon"
+    className: `jsx-${styles.__hash}` + " " + "icon"
   }, icon), /*#__PURE__*/React.createElement("span", {
-    className: "jsx-".concat(styles.__hash) + " " + "label"
+    className: `jsx-${styles.__hash}` + " " + "label"
   }, label), suffix && /*#__PURE__*/React.createElement("span", {
-    className: "jsx-".concat(styles.__hash) + " " + "suffix"
+    className: `jsx-${styles.__hash}` + " " + "suffix"
   }, suffix), (chevron || children) && /*#__PURE__*/React.createElement("span", {
-    className: "jsx-".concat(styles.__hash) + " " + "chevron"
+    className: `jsx-${styles.__hash}` + " " + "chevron"
   }, /*#__PURE__*/React.createElement(IconChevronRight24, null))), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: styles.__hash
   }, styles)), children && showSubMenu && /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(Popper, {
@@ -145,7 +133,6 @@ const MenuItem = _ref2 => {
     dense: dense
   }, children))));
 };
-
 MenuItem.defaultProps = {
   dataTest: 'dhis2-uicore-menuitem'
 };
@@ -154,7 +141,6 @@ MenuItem.propTypes = {
   checkbox: PropTypes.bool,
   checked: PropTypes.bool,
   chevron: PropTypes.bool,
-
   /**
    * Nested menu items can become submenus.
    * See `showSubMenu` and `toggleSubMenu` props, and 'Children' demo
@@ -165,32 +151,23 @@ MenuItem.propTypes = {
   dense: PropTypes.bool,
   destructive: PropTypes.bool,
   disabled: PropTypes.bool,
-
   /** For using menu item as a link */
   href: PropTypes.string,
-
   /** An icon for the left side of the menu item */
   icon: PropTypes.node,
-
   /** Text in the menu item */
   label: PropTypes.node,
-
   /** When true, nested menu items are shown in a Popper */
   showSubMenu: PropTypes.bool,
-
   /** A supporting element shown at the end of the menu item */
   suffix: PropTypes.node,
   tabIndex: PropTypes.number,
-
   /** For using menu item as a link */
   target: PropTypes.string,
-
   /** On click, this function is called (without args) */
   toggleSubMenu: PropTypes.func,
-
   /** Value associated with item. Passed as an argument to onClick handler. */
   value: PropTypes.string,
-
   /** Click handler called with signature `({ value: string }, event)` */
   onClick: PropTypes.func
 };