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

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

@@ -4,33 +4,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MenuItem = void 0;
-
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-
+var _uiIcons = require("@dhis2/ui-icons");
 var _popper = require("@dhis2-ui/popper");
-
 var _portal = require("@dhis2-ui/portal");
-
-var _uiIcons = require("@dhis2/ui-icons");
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireWildcard(require("react"));
-
-var _index = require("../index.js");
-
+var _index = require("../flyout-menu/index.js");
 var _menuItemStyles = _interopRequireDefault(require("./menu-item.styles.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 }; }
-
+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 isModifiedEvent = evt => evt.metaKey || evt.altKey || evt.ctrlKey || evt.shiftKey;
-
 const createOnClickHandler = _ref => {
   let {
     onClick,
@@ -42,7 +28,6 @@ const createOnClickHandler = _ref => {
     if (isLink && isModifiedEvent(evt) || !(onClick || toggleSubMenu)) {
       return;
     }
-
     evt.preventDefault();
     evt.stopPropagation();
     onClick && onClick({
@@ -51,7 +36,6 @@ const createOnClickHandler = _ref => {
     toggleSubMenu && toggleSubMenu();
   };
 };
-
 const MenuItem = _ref2 => {
   let {
     href,
@@ -76,12 +60,49 @@ const MenuItem = _ref2 => {
     tabIndex
   } = _ref2;
   const menuItemRef = (0, _react.useRef)();
+  const [openSubMenus, setOpenSubMenus] = (0, _react.useState)([]);
+  (0, _react.useEffect)(() => {
+    // track open submenus
+    setOpenSubMenus(document.querySelectorAll('[data-submenu-open=true]'));
+  }, []);
+  (0, _react.useEffect)(() => {
+    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
+          event.preventDefault();
+          (_openSubMenus = openSubMenus[openSubMenus.length - 1]) === null || _openSubMenus === void 0 ? void 0 : _openSubMenus.focus();
+          (_openSubMenus2 = openSubMenus[openSubMenus.length - 1]) === null || _openSubMenus2 === void 0 ? void 0 : _openSubMenus2.children[0].click();
+          break;
+      }
+    };
+    menuItem.addEventListener('keydown', handleKeyDown);
+    return () => {
+      menuItem.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [openSubMenus]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("li", {
     ref: menuItemRef,
     "data-test": dataTest,
     role: "presentation",
     tabIndex: tabIndex,
-    className: "jsx-".concat(_menuItemStyles.default.__hash) + " " + ((0, _classnames.default)(className, {
+    "data-submenu-open": children && showSubMenu,
+    className: `jsx-${_menuItemStyles.default.__hash}` + " " + ((0, _classnames.default)(className, {
       destructive,
       disabled,
       dense,
@@ -103,15 +124,15 @@ const MenuItem = _ref2 => {
     "aria-haspopup": children && 'menu',
     "aria-expanded": showSubMenu,
     "aria-label": label,
-    className: "jsx-".concat(_menuItemStyles.default.__hash)
+    className: `jsx-${_menuItemStyles.default.__hash}`
   }, icon && /*#__PURE__*/_react.default.createElement("span", {
-    className: "jsx-".concat(_menuItemStyles.default.__hash) + " " + "icon"
+    className: `jsx-${_menuItemStyles.default.__hash}` + " " + "icon"
   }, icon), /*#__PURE__*/_react.default.createElement("span", {
-    className: "jsx-".concat(_menuItemStyles.default.__hash) + " " + "label"
+    className: `jsx-${_menuItemStyles.default.__hash}` + " " + "label"
   }, label), suffix && /*#__PURE__*/_react.default.createElement("span", {
-    className: "jsx-".concat(_menuItemStyles.default.__hash) + " " + "suffix"
+    className: `jsx-${_menuItemStyles.default.__hash}` + " " + "suffix"
   }, suffix), (chevron || children) && /*#__PURE__*/_react.default.createElement("span", {
-    className: "jsx-".concat(_menuItemStyles.default.__hash) + " " + "chevron"
+    className: `jsx-${_menuItemStyles.default.__hash}` + " " + "chevron"
   }, /*#__PURE__*/_react.default.createElement(_uiIcons.IconChevronRight24, null))), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: _menuItemStyles.default.__hash
   }, _menuItemStyles.default)), children && showSubMenu && /*#__PURE__*/_react.default.createElement(_portal.Portal, null, /*#__PURE__*/_react.default.createElement(_popper.Popper, {
@@ -121,7 +142,6 @@ const MenuItem = _ref2 => {
     dense: dense
   }, children))));
 };
-
 exports.MenuItem = MenuItem;
 MenuItem.defaultProps = {
   dataTest: 'dhis2-uicore-menuitem'
@@ -131,7 +151,6 @@ MenuItem.propTypes = {
   checkbox: _propTypes.default.bool,
   checked: _propTypes.default.bool,
   chevron: _propTypes.default.bool,
-
   /**
    * Nested menu items can become submenus.
    * See `showSubMenu` and `toggleSubMenu` props, and 'Children' demo
@@ -142,32 +161,23 @@ MenuItem.propTypes = {
   dense: _propTypes.default.bool,
   destructive: _propTypes.default.bool,
   disabled: _propTypes.default.bool,
-
   /** For using menu item as a link */
   href: _propTypes.default.string,
-
   /** An icon for the left side of the menu item */
   icon: _propTypes.default.node,
-
   /** Text in the menu item */
   label: _propTypes.default.node,
-
   /** When true, nested menu items are shown in a Popper */
   showSubMenu: _propTypes.default.bool,
-
   /** A supporting element shown at the end of the menu item */
   suffix: _propTypes.default.node,
   tabIndex: _propTypes.default.number,
-
   /** For using menu item as a link */
   target: _propTypes.default.string,
-
   /** On click, this function is called (without args) */
   toggleSubMenu: _propTypes.default.func,
-
   /** Value associated with item. Passed as an argument to onClick handler. */
   value: _propTypes.default.string,
-
   /** Click handler called with signature `({ value: string }, event)` */
   onClick: _propTypes.default.func
 };

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

@@ -4,27 +4,29 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.ToggleMenuItem = exports.SuffixAndChevron = exports.Suffix = exports.SubMenus = exports.RTLSuffixAndChevron = exports.OnClick = exports.Link = exports.Icon = exports.Disabled = exports.Destructive = exports.Dense = exports.Default = exports.Chevron = exports.Active = void 0;
-
 var _ui = require("@dhis2/ui");
-
 var _uiConstants = require("@dhis2/ui-constants");
-
 var _uiIcons = require("@dhis2/ui-icons");
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _index = require("../index.js");
-
 var _menuItem = require("./menu-item.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 = `
+Menu Items are intended to be children of Menu and Flyout Menu components. They can be nested to create submenus.
 
-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); }
+Splitting menus into several levels with child menus makes sense when there are a lot of options that can be grouped together. An example may be an option in level 1 menu of 'Download' that has several different download formats as child menu items. Make sure that child menu items relate to their parent item, otherwise a user will struggle to discover them. A menu item with children is not selectable/actionable itself, it serves only as a container for the child elements. Try to keep menus to a maximum of 1, 2 or 3 levels, anything more than this can easily confuse the user.
 
-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; }
+There is no enforced ordering of menu items, they should be presented in order of relevance. Put the most commonly used items at the top of the menu for easy discovery and access.
 
-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); }
+See the [design system](https://github.com/dhis2/design-system/blob/master/molecules/menu.md) for more information about menus.
 
-const description = "\nMenu Items are intended to be children of Menu and Flyout Menu components. They can be nested to create submenus.\n\nSplitting menus into several levels with child menus makes sense when there are a lot of options that can be grouped together. An example may be an option in level 1 menu of 'Download' that has several different download formats as child menu items. Make sure that child menu items relate to their parent item, otherwise a user will struggle to discover them. A menu item with children is not selectable/actionable itself, it serves only as a container for the child elements. Try to keep menus to a maximum of 1, 2 or 3 levels, anything more than this can easily confuse the user.\n\nThere is no enforced ordering of menu items, they should be presented in order of relevance. Put the most commonly used items at the top of the menu for easy discovery and access.\n\nSee the [design system](https://github.com/dhis2/design-system/blob/master/molecules/menu.md) for more information about menus.\n\n```js\nimport { MenuItem } from '@dhis2/ui'\n```\n";
-var _default = {
+\`\`\`js
+import { MenuItem } from '@dhis2/ui'
+\`\`\`
+`;
+var _default = exports.default = {
   title: 'Menu Item',
   component: _menuItem.MenuItem,
   args: {
@@ -38,29 +40,21 @@ var _default = {
     }
   }
 };
-exports.default = _default;
-
 const Template = args => /*#__PURE__*/_react.default.createElement(_index.Menu, null, /*#__PURE__*/_react.default.createElement(_menuItem.MenuItem, args));
-
-const Default = Template.bind({});
-exports.Default = Default;
-const Active = Template.bind({});
-exports.Active = Active;
+const Default = exports.Default = Template.bind({});
+const Active = exports.Active = Template.bind({});
 Active.args = {
   active: true
 };
-const Chevron = Template.bind({});
-exports.Chevron = Chevron;
+const Chevron = exports.Chevron = Template.bind({});
 Chevron.args = {
   chevron: true
 };
-const Dense = Template.bind({});
-exports.Dense = Dense;
+const Dense = exports.Dense = Template.bind({});
 Dense.args = {
   dense: true
 };
-const Destructive = Template.bind({});
-exports.Destructive = Destructive;
+const Destructive = exports.Destructive = Template.bind({});
 Destructive.args = {
   destructive: true
 };
@@ -71,8 +65,7 @@ Destructive.parameters = {
     }
   }
 };
-const Disabled = Template.bind({});
-exports.Disabled = Disabled;
+const Disabled = exports.Disabled = Template.bind({});
 Disabled.args = {
   disabled: true
 };
@@ -83,13 +76,11 @@ Disabled.parameters = {
     }
   }
 };
-const Link = Template.bind({});
-exports.Link = Link;
+const Link = exports.Link = Template.bind({});
 Link.args = {
   target: '_blank',
   href: 'http://dhis2.org'
 };
-
 const Icon = args => {
   // import { IconApps24 } from '@dhis2/ui'
   return /*#__PURE__*/_react.default.createElement(_index.Menu, null, /*#__PURE__*/_react.default.createElement(_menuItem.MenuItem, _extends({}, args, {
@@ -102,7 +93,6 @@ const Icon = args => {
     label: "Menu item - with custom icon fill"
   }));
 };
-
 exports.Icon = Icon;
 Icon.parameters = {
   docs: {
@@ -114,8 +104,7 @@ Icon.parameters = {
     }
   }
 };
-const Suffix = Template.bind({});
-exports.Suffix = Suffix;
+const Suffix = exports.Suffix = Template.bind({});
 Suffix.args = {
   label: 'Open in Data Visualizer',
   icon: /*#__PURE__*/_react.default.createElement(_uiIcons.IconVisualizationColumn24, {
@@ -125,14 +114,12 @@ Suffix.args = {
     color: _uiConstants.colors.grey600
   })
 };
-const SuffixAndChevron = Template.bind({});
-exports.SuffixAndChevron = SuffixAndChevron;
+const SuffixAndChevron = exports.SuffixAndChevron = Template.bind({});
 SuffixAndChevron.args = {
   label: 'Security notifications',
   chevron: true,
   suffix: /*#__PURE__*/_react.default.createElement(_ui.Tag, null, "3")
 };
-
 const OnClick = args => /*#__PURE__*/_react.default.createElement(_index.Menu, null, /*#__PURE__*/_react.default.createElement(_menuItem.MenuItem, _extends({
   onClick: (payload, event) => {
     console.log(payload.value, event.target);
@@ -140,7 +127,6 @@ const OnClick = args => /*#__PURE__*/_react.default.createElement(_index.Menu, n
   value: "myValue",
   label: "Menu item"
 }, args)));
-
 exports.OnClick = OnClick;
 OnClick.parameters = {
   docs: {
@@ -152,12 +138,9 @@ OnClick.parameters = {
 OnClick.args = {
   onClick: console.log
 };
-
 const ToggleMenuItem = args => {
   const [on, setOn] = (0, _react.useState)(false);
-
   const toggleOn = () => setOn(!on);
-
   const checkMarkStyle = {
     fontSize: '24px',
     lineHeight: '24px'
@@ -173,7 +156,6 @@ const ToggleMenuItem = args => {
     checked: on
   })));
 };
-
 exports.ToggleMenuItem = ToggleMenuItem;
 ToggleMenuItem.parameters = {
   docs: {
@@ -182,12 +164,9 @@ ToggleMenuItem.parameters = {
     }
   }
 };
-
 const SubMenus = args => {
   const [showSubMenu, setShowSubMenu] = _react.default.useState(false);
-
   const toggleSubMenu = () => setShowSubMenu(!showSubMenu);
-
   return /*#__PURE__*/_react.default.createElement(_index.Menu, null, /*#__PURE__*/_react.default.createElement(_menuItem.MenuItem, _extends({
     showSubMenu: showSubMenu,
     toggleSubMenu: toggleSubMenu
@@ -201,7 +180,6 @@ const SubMenus = args => {
     label: "Regular item"
   })));
 };
-
 exports.SubMenus = SubMenus;
 SubMenus.parameters = {
   docs: {
@@ -213,11 +191,9 @@ SubMenus.parameters = {
     }
   }
 };
-
 const RTLSuffixAndChevron = args => /*#__PURE__*/_react.default.createElement("div", {
   dir: "rtl"
 }, /*#__PURE__*/_react.default.createElement(Template, args));
-
 exports.RTLSuffixAndChevron = RTLSuffixAndChevron;
 RTLSuffixAndChevron.args = {
   label: 'Security notifications',

package/build/cjs/menu-item/menu-item.styles.js

@@ -4,10 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _uiConstants = require("@dhis2/ui-constants");
-
-const _defaultExport = ["li.jsx-3192368000{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;padding:0;cursor:pointer;list-style:none;background-color:".concat(_uiConstants.colors.white, ";color:").concat(_uiConstants.colors.grey900, ";fill:").concat(_uiConstants.colors.grey900, ";font-size:14px;line-height:16px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}"), "li.jsx-3192368000:hover{background-color:".concat(_uiConstants.colors.grey200, ";}"), "li.jsx-3192368000:active,li.active.jsx-3192368000{background-color:".concat(_uiConstants.colors.grey300, ";}"), "li.destructive.jsx-3192368000{color:".concat(_uiConstants.colors.red700, ";fill:").concat(_uiConstants.colors.red600, ";}"), "li.destructive.jsx-3192368000:hover{background-color:".concat(_uiConstants.colors.red050, ";}"), "li.destructive.jsx-3192368000:active,li.destructive.active.jsx-3192368000{background-color:".concat(_uiConstants.colors.red100, ";}"), "li.disabled.jsx-3192368000{cursor:not-allowed;color:".concat(_uiConstants.colors.grey500, ";fill:").concat(_uiConstants.colors.grey500, ";}"), "li.disabled.jsx-3192368000:hover{background-color:".concat(_uiConstants.colors.white, ";}"), "a.jsx-3192368000{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0 ".concat(_uiConstants.spacers.dp16, ";min-height:40px;-webkit-text-decoration:none;text-decoration:none;color:inherit;}"), "a.jsx-3192368000:focus{outline:3px solid ".concat(_uiConstants.theme.focus, ";outline-offset:-3px;}"), "a.jsx-3192368000:focus.jsx-3192368000:not(:focus-visible){outline:none;}", "li.with-chevron.jsx-3192368000 a.jsx-3192368000{padding-inline-end:".concat(_uiConstants.spacers.dp8, ";}"), "li.dense.jsx-3192368000 a.jsx-3192368000{padding:0 ".concat(_uiConstants.spacers.dp12, ";min-height:32px;}"), "li.with-chevron.dense.jsx-3192368000 a.jsx-3192368000{padding-inline-end:".concat(_uiConstants.spacers.dp4, ";}"), ".label.jsx-3192368000{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;padding:".concat(_uiConstants.spacers.dp12, " 0;}"), "li.dense.jsx-3192368000 .label.jsx-3192368000{padding:".concat(_uiConstants.spacers.dp8, " 0;}"), ".icon.jsx-3192368000{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;margin-inline-end:".concat(_uiConstants.spacers.dp12, ";width:24px;height:24px;}"), ".suffix.jsx-3192368000{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-inline-start:".concat(_uiConstants.spacers.dp8, ";}"), ".chevron.jsx-3192368000{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;margin-inline-start:".concat(_uiConstants.spacers.dp24, ";}"), ".chevron.jsx-3192368000:dir(rtl){-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);}", "li.dense.jsx-3192368000 .icon.jsx-3192368000{margin-inline-end:".concat(_uiConstants.spacers.dp8, ";width:16px;height:16px;}"), "li.jsx-3192368000 .icon.jsx-3192368000>svg{width:24px;height:24px;}", "li.dense.jsx-3192368000 .icon.jsx-3192368000>svg,li.jsx-3192368000 .chevron.jsx-3192368000>svg{width:16px;height:16px;}"];
+const _defaultExport = [`li.jsx-3192368000{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;padding:0;cursor:pointer;list-style:none;background-color:${_uiConstants.colors.white};color:${_uiConstants.colors.grey900};fill:${_uiConstants.colors.grey900};font-size:14px;line-height:16px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}`, `li.jsx-3192368000:hover{background-color:${_uiConstants.colors.grey200};}`, `li.jsx-3192368000:active,li.active.jsx-3192368000{background-color:${_uiConstants.colors.grey300};}`, `li.destructive.jsx-3192368000{color:${_uiConstants.colors.red700};fill:${_uiConstants.colors.red600};}`, `li.destructive.jsx-3192368000:hover{background-color:${_uiConstants.colors.red050};}`, `li.destructive.jsx-3192368000:active,li.destructive.active.jsx-3192368000{background-color:${_uiConstants.colors.red100};}`, `li.disabled.jsx-3192368000{cursor:not-allowed;color:${_uiConstants.colors.grey500};fill:${_uiConstants.colors.grey500};}`, `li.disabled.jsx-3192368000:hover{background-color:${_uiConstants.colors.white};}`, `a.jsx-3192368000{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0 ${_uiConstants.spacers.dp16};min-height:40px;-webkit-text-decoration:none;text-decoration:none;color:inherit;}`, `a.jsx-3192368000:focus{outline:3px solid ${_uiConstants.theme.focus};outline-offset:-3px;}`, "a.jsx-3192368000:focus.jsx-3192368000:not(:focus-visible){outline:none;}", `li.with-chevron.jsx-3192368000 a.jsx-3192368000{padding-inline-end:${_uiConstants.spacers.dp8};}`, `li.dense.jsx-3192368000 a.jsx-3192368000{padding:0 ${_uiConstants.spacers.dp12};min-height:32px;}`, `li.with-chevron.dense.jsx-3192368000 a.jsx-3192368000{padding-inline-end:${_uiConstants.spacers.dp4};}`, `.label.jsx-3192368000{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;padding:${_uiConstants.spacers.dp12} 0;}`, `li.dense.jsx-3192368000 .label.jsx-3192368000{padding:${_uiConstants.spacers.dp8} 0;}`, `.icon.jsx-3192368000{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;margin-inline-end:${_uiConstants.spacers.dp12};width:24px;height:24px;}`, `.suffix.jsx-3192368000{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-inline-start:${_uiConstants.spacers.dp8};}`, `.chevron.jsx-3192368000{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;margin-inline-start:${_uiConstants.spacers.dp24};}`, ".chevron.jsx-3192368000:dir(rtl){-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);}", `li.dense.jsx-3192368000 .icon.jsx-3192368000{margin-inline-end:${_uiConstants.spacers.dp8};width:16px;height:16px;}`, "li.jsx-3192368000 .icon.jsx-3192368000>svg{width:24px;height:24px;}", "li.dense.jsx-3192368000 .icon.jsx-3192368000>svg,li.jsx-3192368000 .chevron.jsx-3192368000>svg{width:16px;height:16px;}"];
 _defaultExport.__hash = "3192368000";
-var _default = _defaultExport;
-exports.default = _default;
+var _default = exports.default = _defaultExport;

package/build/cjs/menu-section-header/features/accepts_label/index.js

@@ -1,11 +1,10 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('a MenuSectionHeader supplied with a label is rendered', () => {
   cy.visitStory('MenuSectionHeader', 'With Label');
   cy.get('[data-test="dhis2-uicore-menusectionheader"]').should('be.visible');
 });
 (0, _cypressCucumberPreprocessor.Then)('the label is visible', () => {
-  cy.contains('label').should('be.visible');
+  cy.get(':contains("label")').should('be.visible');
 });

package/build/cjs/menu-section-header/index.js

@@ -9,5 +9,4 @@ Object.defineProperty(exports, "MenuSectionHeader", {
     return _menuSectionHeader.MenuSectionHeader;
   }
 });
-
 var _menuSectionHeader = require("./menu-section-header.js");

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

@@ -4,24 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.WithLabel = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _index = require("../index.js");
-
 var _index2 = require("./index.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: 'MenuSectionHeader',
   component: _index2.MenuSectionHeader,
   decorators: [story => /*#__PURE__*/_react.default.createElement(_index.Menu, null, story())]
 };
-exports.default = _default;
-
 const WithLabel = () => /*#__PURE__*/_react.default.createElement(_index2.MenuSectionHeader, {
   label: "label"
 });
-
 exports.WithLabel = WithLabel;

package/build/cjs/menu-section-header/menu-section-header.js

@@ -4,21 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MenuSectionHeader = void 0;
-
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-
-var _divider = require("@dhis2-ui/divider");
-
 var _uiConstants = require("@dhis2/ui-constants");
-
+var _divider = require("@dhis2-ui/divider");
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const MenuSectionHeader = _ref => {
   let {
     className,
@@ -39,9 +31,8 @@ const MenuSectionHeader = _ref => {
   }, label), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "1160864328",
     dynamic: [_uiConstants.colors.white, _uiConstants.spacers.dp8, _uiConstants.spacers.dp16, _uiConstants.spacers.dp8, _uiConstants.spacers.dp16, _uiConstants.colors.grey700, _uiConstants.spacers.dp8, _uiConstants.spacers.dp12, _uiConstants.spacers.dp4, _uiConstants.spacers.dp12]
-  }, ["li.__jsx-style-dynamic-selector{list-style:none;background-color:".concat(_uiConstants.colors.white, ";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;padding:0;line-height:0;}"), "h6.__jsx-style-dynamic-selector{margin:0;padding:".concat(_uiConstants.spacers.dp8, " ").concat(_uiConstants.spacers.dp16, " ").concat(_uiConstants.spacers.dp8, " ").concat(_uiConstants.spacers.dp16, ";font-size:13px;line-height:16px;font-weight:500;color:").concat(_uiConstants.colors.grey700, ";}"), "li.dense.__jsx-style-dynamic-selector h6.__jsx-style-dynamic-selector{padding:".concat(_uiConstants.spacers.dp8, " ").concat(_uiConstants.spacers.dp12, " ").concat(_uiConstants.spacers.dp4, " ").concat(_uiConstants.spacers.dp12, ";}")]));
+  }, [`li.__jsx-style-dynamic-selector{list-style:none;background-color:${_uiConstants.colors.white};-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;padding:0;line-height:0;}`, `h6.__jsx-style-dynamic-selector{margin:0;padding:${_uiConstants.spacers.dp8} ${_uiConstants.spacers.dp16} ${_uiConstants.spacers.dp8} ${_uiConstants.spacers.dp16};font-size:13px;line-height:16px;font-weight:500;color:${_uiConstants.colors.grey700};}`, `li.dense.__jsx-style-dynamic-selector h6.__jsx-style-dynamic-selector{padding:${_uiConstants.spacers.dp8} ${_uiConstants.spacers.dp12} ${_uiConstants.spacers.dp4} ${_uiConstants.spacers.dp12};}`]));
 };
-
 exports.MenuSectionHeader = MenuSectionHeader;
 MenuSectionHeader.defaultProps = {
   dataTest: 'dhis2-uicore-menusectionheader'

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

@@ -4,19 +4,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.WithoutDivider = exports.TopOfList = exports.Dense = exports.Default = void 0;
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _index = require("../index.js");
-
 var _menuSectionHeader = require("./menu-section-header.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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 Menu Section Header, 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.
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-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 Menu Section Header, 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 { MenuSectionHeader } from '@dhis2/ui'\n```\n";
-var _default = {
+\`\`\`js
+import { MenuSectionHeader } from '@dhis2/ui'
+\`\`\`
+`;
+var _default = exports.default = {
   title: 'Menu Section Header',
   component: _menuSectionHeader.MenuSectionHeader,
   args: {
@@ -30,8 +30,6 @@ var _default = {
     }
   }
 };
-exports.default = _default;
-
 const Template = _ref => {
   let {
     menuArgs,
@@ -43,32 +41,26 @@ const Template = _ref => {
     label: "Menu item below"
   }));
 };
-
 Template.propTypes = {
   menuArgs: _propTypes.default.shape()
 };
-const Default = Template.bind({});
-exports.Default = Default;
-const Dense = Template.bind({});
-exports.Dense = Dense;
+const Default = exports.Default = Template.bind({});
+const Dense = exports.Dense = Template.bind({});
 Dense.args = {
   menuArgs: {
     dense: true
   },
   dense: true
 };
-const WithoutDivider = Template.bind({});
-exports.WithoutDivider = WithoutDivider;
+const WithoutDivider = exports.WithoutDivider = Template.bind({});
 WithoutDivider.args = {
   hideDivider: true
 };
-
 const TopOfList = args => /*#__PURE__*/_react.default.createElement(_index.Menu, null, /*#__PURE__*/_react.default.createElement(_menuSectionHeader.MenuSectionHeader, args), /*#__PURE__*/_react.default.createElement(_index.MenuItem, {
   label: "Item 1"
 }), /*#__PURE__*/_react.default.createElement(_index.MenuItem, {
   label: "Item 2"
 }));
-
 exports.TopOfList = TopOfList;
 TopOfList.args = {
   label: 'Top of list (so <Menu> hides divider)'

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

@@ -0,0 +1,41 @@
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+import { MenuItem } from '../../menu-item/menu-item.js';
+import { FlyoutMenu } from '../flyout-menu.js';
+describe('Flyout Menu Component', () => {
+  it('can handle navigation of submenus', () => {
+    const {
+      getByText,
+      queryByText,
+      getAllByRole
+    } = render( /*#__PURE__*/React.createElement(FlyoutMenu, null, /*#__PURE__*/React.createElement(MenuItem, {
+      label: "Item 1"
+    }), /*#__PURE__*/React.createElement(MenuItem, {
+      label: "Item 2"
+    }, /*#__PURE__*/React.createElement(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.tab();
+    expect(menuItems[0].parentNode).toHaveFocus();
+    expect(menuItems[1].parentNode).not.toHaveFocus();
+    userEvent.keyboard('{ArrowDown}');
+    expect(menuItems[0].parentNode).not.toHaveFocus();
+    expect(menuItems[1].parentNode).toHaveFocus();
+    userEvent.keyboard('{ArrowRight}');
+    submenuChild = getByText(/Item 2 a/i);
+    expect(submenuChild).toBeInTheDocument();
+    expect(submenuChild.parentElement.parentElement).toHaveFocus();
+    userEvent.keyboard('{ArrowLeft}');
+    expect(queryByText(/Item 2 a/i)).not.toBeInTheDocument();
+    expect(menuItems[1].parentNode).toHaveFocus();
+  });
+});

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

@@ -27,8 +27,10 @@ Then('the left of the MenuItem is aligned with the right of the SubMenu', () =>
 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);
   });
 });
 Then('the top of the MenuItem is aligned with the top of the SubMenu wrapper', () => {
@@ -37,7 +39,6 @@ Then('the top of the MenuItem is aligned with the top of the SubMenu wrapper', (
     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/es/flyout-menu/{flyout-menu.stories.e2e.js → flyout-menu.e2e.stories.js}

@@ -6,7 +6,6 @@ export default {
   title: 'FlyoutMenu',
   component: FlyoutMenu
 };
-
 const MenuItemSubMenuPositions = () => /*#__PURE__*/React.createElement(FlyoutMenu, null, /*#__PURE__*/React.createElement(MenuItem, {
   label: "Item 1"
 }, /*#__PURE__*/React.createElement("div", {
@@ -14,7 +13,6 @@ const MenuItemSubMenuPositions = () => /*#__PURE__*/React.createElement(FlyoutMe
     padding: 30
   }
 }, "SubMenu 1")));
-
 export const WithChildren = () => /*#__PURE__*/React.createElement(FlyoutMenu, null, "I am a child");
 export const TogglesSubMenus = () => /*#__PURE__*/React.createElement(FlyoutMenu, null, /*#__PURE__*/React.createElement(MenuItem, {
   label: "Item 1"