@dhis2-ui/menu 10.16.3-alpha.1 → 10.16.4

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

@@ -15,20 +15,17 @@ const CLOSE_TO_DELTA = 1;
   cy.get('[data-test="dhis2-uicore-menuitem"]').click();
 });
 (0, _cypressCucumberPreprocessor.Then)('the right of the MenuItem is aligned with the left of the SubMenu', () => {
-  getMenuItemAndSubMenuRects().should(_ref => {
-    let [menuItemRect, subMenuRect] = _ref;
+  getMenuItemAndSubMenuRects().should(([menuItemRect, subMenuRect]) => {
     expect(menuItemRect.right).to.closeTo(subMenuRect.left, CLOSE_TO_DELTA);
   });
 });
 (0, _cypressCucumberPreprocessor.Then)('the left of the MenuItem is aligned with the right of the SubMenu', () => {
-  getMenuItemAndSubMenuRects().should(_ref2 => {
-    let [menuItemRect, subMenuRect] = _ref2;
+  getMenuItemAndSubMenuRects().should(([menuItemRect, subMenuRect]) => {
     expect(menuItemRect.left).to.closeTo(subMenuRect.right, CLOSE_TO_DELTA);
   });
 });
 (0, _cypressCucumberPreprocessor.Then)('the SubMenu is rendered on top of the MenuItem', () => {
-  getMenuItemAndSubMenuRects().should(_ref3 => {
-    let [menuItemRect, subMenuRect] = _ref3;
+  getMenuItemAndSubMenuRects().should(([menuItemRect, subMenuRect]) => {
     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);
@@ -36,8 +33,7 @@ const CLOSE_TO_DELTA = 1;
   });
 });
 (0, _cypressCucumberPreprocessor.Then)('the top of the MenuItem is aligned with the top of the SubMenu wrapper', () => {
-  cy.getPositionsBySelectors('[data-test="dhis2-uicore-menuitem"]', '[data-test="dhis2-uicore-popper"]').should(_ref4 => {
-    let [menuItemRect, popperRect] = _ref4;
+  cy.getPositionsBySelectors('[data-test="dhis2-uicore-menuitem"]', '[data-test="dhis2-uicore-popper"]').should(([menuItemRect, popperRect]) => {
     expect(menuItemRect.top).to.closeTo(popperRect.top, CLOSE_TO_DELTA);
   });
 });

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

@@ -9,19 +9,17 @@ var _uiConstants = require("@dhis2/ui-constants");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireWildcard(require("react"));
 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 _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const FlyoutMenu = _ref => {
-  let {
-    children,
-    className,
-    dataTest = 'dhis2-uicore-menu',
-    dense,
-    maxHeight = 'auto',
-    maxWidth = '380px',
-    closeMenu
-  } = _ref;
+const FlyoutMenu = ({
+  children,
+  className,
+  dataTest = 'dhis2-uicore-menu',
+  dense,
+  maxHeight = 'auto',
+  maxWidth = '380px',
+  closeMenu
+}) => {
   const [openedSubMenu, setOpenedSubMenu] = (0, _react.useState)(null);
   const toggleSubMenu = index => {
     const toggleValue = index === openedSubMenu ? null : index;

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

@@ -10,8 +10,7 @@ var _menu = require("@dhis2-ui/menu");
 var _popper = require("@dhis2-ui/popper");
 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 _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 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.
@@ -218,12 +217,11 @@ DropDownMenu.parameters = {
 const WithCustomMenuItem = args => {
   // You should not create custom components in the render cycle
   // this is just for demo purposes
-  const PopupWindowMenuItem = _ref => {
-    let {
-      to,
-      children,
-      ...rest
-    } = _ref;
+  const PopupWindowMenuItem = ({
+    to,
+    children,
+    ...rest
+  }) => {
     const HEIGHT = 1000;
     const WIDTH = 1400;
     const centerY = (window.screen.height - HEIGHT) / 2;

package/build/cjs/menu/helpers.js

@@ -36,6 +36,6 @@ const getFocusableItemsIndices = elements => {
 exports.getFocusableItemsIndices = getFocusableItemsIndices;
 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']);
+  return isMenuItem(component === null || component === void 0 || (_component$props = component.props) === null || _component$props === void 0 ? void 0 : _component$props['role']);
 };
 exports.hasMenuItemRole = hasMenuItemRole;

package/build/cjs/menu/menu.js

@@ -9,16 +9,14 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireWildcard(require("react"));
 var _helpers = require("./helpers.js");
 var _useMenu = require("./use-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 _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const Menu = _ref => {
-  let {
-    children,
-    className,
-    dataTest = 'dhis2-uicore-menulist',
-    dense
-  } = _ref;
+const Menu = ({
+  children,
+  className,
+  dataTest = 'dhis2-uicore-menulist',
+  dense
+}) => {
   const {
     menuRef,
     focusedIndex

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

@@ -49,9 +49,9 @@ const useMenuNavigation = children => {
         case 'Enter':
         case ' ':
           if (event.target.nodeName === 'LI') {
-            var _event$target$childre, _event$target$childre2;
+            var _event$target$childre;
             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();
+            (_event$target$childre = event.target.children) === null || _event$target$childre === void 0 || (_event$target$childre = _event$target$childre[0]) === null || _event$target$childre === void 0 || _event$target$childre.click();
           }
           break;
         default:

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

@@ -10,22 +10,19 @@ var _divider = require("@dhis2-ui/divider");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireDefault(require("react"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const MenuDivider = _ref => {
-  let {
-    className,
-    dataTest = 'dhis2-uicore-menudivider',
-    dense
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement("li", {
-    "data-test": dataTest,
-    className: _style.default.dynamic([["591815244", [_uiConstants.colors.white]]]) + " " + (className || "")
-  }, /*#__PURE__*/_react.default.createElement(_divider.Divider, {
-    dense: dense
-  }), /*#__PURE__*/_react.default.createElement(_style.default, {
-    id: "591815244",
-    dynamic: [_uiConstants.colors.white]
-  }, [`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;}`]));
-};
+const MenuDivider = ({
+  className,
+  dataTest = 'dhis2-uicore-menudivider',
+  dense
+}) => /*#__PURE__*/_react.default.createElement("li", {
+  "data-test": dataTest,
+  className: _style.default.dynamic([["591815244", [_uiConstants.colors.white]]]) + " " + (className || "")
+}, /*#__PURE__*/_react.default.createElement(_divider.Divider, {
+  dense: dense
+}), /*#__PURE__*/_react.default.createElement(_style.default, {
+  id: "591815244",
+  dynamic: [_uiConstants.colors.white]
+}, [`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;}`]));
 exports.MenuDivider = MenuDivider;
 MenuDivider.propTypes = {
   className: _propTypes.default.string,

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

@@ -13,53 +13,48 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireWildcard(require("react"));
 var _index = require("../flyout-menu/index.js");
 var _menuItemStyles = _interopRequireDefault(require("./menu-item.styles.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 _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 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,
-    toggleSubMenu,
-    isLink,
+const createOnClickHandler = ({
+  onClick,
+  toggleSubMenu,
+  isLink,
+  value
+}) => evt => {
+  if (isLink && isModifiedEvent(evt) || !(onClick || toggleSubMenu)) {
+    return;
+  }
+  evt.preventDefault();
+  evt.stopPropagation();
+  onClick && onClick({
     value
-  } = _ref;
-  return evt => {
-    if (isLink && isModifiedEvent(evt) || !(onClick || toggleSubMenu)) {
-      return;
-    }
-    evt.preventDefault();
-    evt.stopPropagation();
-    onClick && onClick({
-      value
-    }, evt);
-    toggleSubMenu && toggleSubMenu();
-  };
+  }, evt);
+  toggleSubMenu && toggleSubMenu();
 };
-const MenuItem = _ref2 => {
-  let {
-    href,
-    onClick,
-    children,
-    target,
-    icon,
-    className,
-    destructive,
-    disabled,
-    dense,
-    active,
-    dataTest = 'dhis2-uicore-menuitem',
-    chevron,
-    value,
-    label,
-    ariaLabel,
-    showSubMenu,
-    toggleSubMenu,
-    suffix,
-    checkbox,
-    checked,
-    tabIndex
-  } = _ref2;
+const MenuItem = ({
+  href,
+  onClick,
+  children,
+  target,
+  icon,
+  className,
+  destructive,
+  disabled,
+  dense,
+  active,
+  dataTest = 'dhis2-uicore-menuitem',
+  chevron,
+  value,
+  label,
+  ariaLabel,
+  showSubMenu,
+  toggleSubMenu,
+  suffix,
+  checkbox,
+  checked,
+  tabIndex
+}) => {
   const menuItemRef = (0, _react.useRef)();
   const [openSubMenus, setOpenSubMenus] = (0, _react.useState)([]);
   (0, _react.useEffect)(() => {
@@ -87,8 +82,8 @@ const MenuItem = _ref2 => {
         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();
+          (_openSubMenus = openSubMenus[openSubMenus.length - 1]) === null || _openSubMenus === void 0 || _openSubMenus.focus();
+          (_openSubMenus2 = openSubMenus[openSubMenus.length - 1]) === null || _openSubMenus2 === void 0 || _openSubMenus2.children[0].click();
           break;
       }
     };

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

@@ -10,8 +10,7 @@ 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 _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 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.

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

@@ -11,28 +11,25 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireDefault(require("react"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const MenuSectionHeader = _ref => {
-  let {
-    className,
-    dataTest = 'dhis2-uicore-menusectionheader',
-    dense,
-    hideDivider,
-    label
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement("li", {
-    "data-test": dataTest,
-    className: _style.default.dynamic([["1160864328", [_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]]]) + " " + ((0, _classnames.default)(className, {
-      dense
-    }) || "")
-  }, !hideDivider && /*#__PURE__*/_react.default.createElement(_divider.Divider, {
-    dense: dense
-  }), /*#__PURE__*/_react.default.createElement("h6", {
-    className: _style.default.dynamic([["1160864328", [_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]]])
-  }, 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:${_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};}`]));
-};
+const MenuSectionHeader = ({
+  className,
+  dataTest = 'dhis2-uicore-menusectionheader',
+  dense,
+  hideDivider,
+  label
+}) => /*#__PURE__*/_react.default.createElement("li", {
+  "data-test": dataTest,
+  className: _style.default.dynamic([["1160864328", [_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]]]) + " " + ((0, _classnames.default)(className, {
+    dense
+  }) || "")
+}, !hideDivider && /*#__PURE__*/_react.default.createElement(_divider.Divider, {
+  dense: dense
+}), /*#__PURE__*/_react.default.createElement("h6", {
+  className: _style.default.dynamic([["1160864328", [_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]]])
+}, 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:${_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.propTypes = {
   className: _propTypes.default.string,

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

@@ -30,17 +30,14 @@ var _default = exports.default = {
     }
   }
 };
-const Template = _ref => {
-  let {
-    menuArgs,
-    ...args
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_index.Menu, menuArgs, /*#__PURE__*/_react.default.createElement(_index.MenuItem, {
-    label: "Menu item above"
-  }), /*#__PURE__*/_react.default.createElement(_menuSectionHeader.MenuSectionHeader, args), /*#__PURE__*/_react.default.createElement(_index.MenuItem, {
-    label: "Menu item below"
-  }));
-};
+const Template = ({
+  menuArgs,
+  ...args
+}) => /*#__PURE__*/_react.default.createElement(_index.Menu, menuArgs, /*#__PURE__*/_react.default.createElement(_index.MenuItem, {
+  label: "Menu item above"
+}), /*#__PURE__*/_react.default.createElement(_menuSectionHeader.MenuSectionHeader, args), /*#__PURE__*/_react.default.createElement(_index.MenuItem, {
+  label: "Menu item below"
+}));
 Template.propTypes = {
   menuArgs: _propTypes.default.shape()
 };

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

@@ -13,20 +13,17 @@ When('the user clicks on the MenuItem', () => {
   cy.get('[data-test="dhis2-uicore-menuitem"]').click();
 });
 Then('the right of the MenuItem is aligned with the left of the SubMenu', () => {
-  getMenuItemAndSubMenuRects().should(_ref => {
-    let [menuItemRect, subMenuRect] = _ref;
+  getMenuItemAndSubMenuRects().should(([menuItemRect, subMenuRect]) => {
     expect(menuItemRect.right).to.closeTo(subMenuRect.left, CLOSE_TO_DELTA);
   });
 });
 Then('the left of the MenuItem is aligned with the right of the SubMenu', () => {
-  getMenuItemAndSubMenuRects().should(_ref2 => {
-    let [menuItemRect, subMenuRect] = _ref2;
+  getMenuItemAndSubMenuRects().should(([menuItemRect, subMenuRect]) => {
     expect(menuItemRect.left).to.closeTo(subMenuRect.right, CLOSE_TO_DELTA);
   });
 });
 Then('the SubMenu is rendered on top of the MenuItem', () => {
-  getMenuItemAndSubMenuRects().should(_ref3 => {
-    let [menuItemRect, subMenuRect] = _ref3;
+  getMenuItemAndSubMenuRects().should(([menuItemRect, subMenuRect]) => {
     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);
@@ -34,8 +31,7 @@ Then('the SubMenu is rendered on top of the MenuItem', () => {
   });
 });
 Then('the top of the MenuItem is aligned with the top of the SubMenu wrapper', () => {
-  cy.getPositionsBySelectors('[data-test="dhis2-uicore-menuitem"]', '[data-test="dhis2-uicore-popper"]').should(_ref4 => {
-    let [menuItemRect, popperRect] = _ref4;
+  cy.getPositionsBySelectors('[data-test="dhis2-uicore-menuitem"]', '[data-test="dhis2-uicore-popper"]').should(([menuItemRect, popperRect]) => {
     expect(menuItemRect.top).to.closeTo(popperRect.top, CLOSE_TO_DELTA);
   });
 });

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

@@ -3,16 +3,15 @@ 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 '../menu/index.js';
-const FlyoutMenu = _ref => {
-  let {
-    children,
-    className,
-    dataTest = 'dhis2-uicore-menu',
-    dense,
-    maxHeight = 'auto',
-    maxWidth = '380px',
-    closeMenu
-  } = _ref;
+const FlyoutMenu = ({
+  children,
+  className,
+  dataTest = 'dhis2-uicore-menu',
+  dense,
+  maxHeight = 'auto',
+  maxWidth = '380px',
+  closeMenu
+}) => {
   const [openedSubMenu, setOpenedSubMenu] = useState(null);
   const toggleSubMenu = index => {
     const toggleValue = index === openedSubMenu ? null : index;

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

@@ -204,12 +204,11 @@ DropDownMenu.parameters = {
 export const WithCustomMenuItem = args => {
   // You should not create custom components in the render cycle
   // this is just for demo purposes
-  const PopupWindowMenuItem = _ref => {
-    let {
-      to,
-      children,
-      ...rest
-    } = _ref;
+  const PopupWindowMenuItem = ({
+    to,
+    children,
+    ...rest
+  }) => {
     const HEIGHT = 1000;
     const WIDTH = 1400;
     const centerY = (window.screen.height - HEIGHT) / 2;

package/build/es/menu/helpers.js

@@ -29,5 +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']);
+  return isMenuItem(component === null || component === void 0 || (_component$props = component.props) === null || _component$props === void 0 ? void 0 : _component$props['role']);
 };

package/build/es/menu/menu.js

@@ -3,13 +3,12 @@ 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,
-    className,
-    dataTest = 'dhis2-uicore-menulist',
-    dense
-  } = _ref;
+const Menu = ({
+  children,
+  className,
+  dataTest = 'dhis2-uicore-menulist',
+  dense
+}) => {
   const {
     menuRef,
     focusedIndex

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

@@ -43,9 +43,9 @@ export const useMenuNavigation = children => {
         case 'Enter':
         case ' ':
           if (event.target.nodeName === 'LI') {
-            var _event$target$childre, _event$target$childre2;
+            var _event$target$childre;
             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();
+            (_event$target$childre = event.target.children) === null || _event$target$childre === void 0 || (_event$target$childre = _event$target$childre[0]) === null || _event$target$childre === void 0 || _event$target$childre.click();
           }
           break;
         default:

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

@@ -3,22 +3,19 @@ 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,
-    dataTest = 'dhis2-uicore-menudivider',
-    dense
-  } = _ref;
-  return /*#__PURE__*/React.createElement("li", {
-    "data-test": dataTest,
-    className: _JSXStyle.dynamic([["591815244", [colors.white]]]) + " " + (className || "")
-  }, /*#__PURE__*/React.createElement(Divider, {
-    dense: dense
-  }), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "591815244",
-    dynamic: [colors.white]
-  }, [`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;}`]));
-};
+const MenuDivider = ({
+  className,
+  dataTest = 'dhis2-uicore-menudivider',
+  dense
+}) => /*#__PURE__*/React.createElement("li", {
+  "data-test": dataTest,
+  className: _JSXStyle.dynamic([["591815244", [colors.white]]]) + " " + (className || "")
+}, /*#__PURE__*/React.createElement(Divider, {
+  dense: dense
+}), /*#__PURE__*/React.createElement(_JSXStyle, {
+  id: "591815244",
+  dynamic: [colors.white]
+}, [`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.propTypes = {
   className: PropTypes.string,
   dataTest: PropTypes.string,

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

@@ -8,49 +8,45 @@ import React, { useEffect, useRef, useState, useMemo } from 'react';
 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,
-    toggleSubMenu,
-    isLink,
+const createOnClickHandler = ({
+  onClick,
+  toggleSubMenu,
+  isLink,
+  value
+}) => evt => {
+  if (isLink && isModifiedEvent(evt) || !(onClick || toggleSubMenu)) {
+    return;
+  }
+  evt.preventDefault();
+  evt.stopPropagation();
+  onClick && onClick({
     value
-  } = _ref;
-  return evt => {
-    if (isLink && isModifiedEvent(evt) || !(onClick || toggleSubMenu)) {
-      return;
-    }
-    evt.preventDefault();
-    evt.stopPropagation();
-    onClick && onClick({
-      value
-    }, evt);
-    toggleSubMenu && toggleSubMenu();
-  };
+  }, evt);
+  toggleSubMenu && toggleSubMenu();
 };
-const MenuItem = _ref2 => {
-  let {
-    href,
-    onClick,
-    children,
-    target,
-    icon,
-    className,
-    destructive,
-    disabled,
-    dense,
-    active,
-    dataTest = 'dhis2-uicore-menuitem',
-    chevron,
-    value,
-    label,
-    ariaLabel,
-    showSubMenu,
-    toggleSubMenu,
-    suffix,
-    checkbox,
-    checked,
-    tabIndex
-  } = _ref2;
+const MenuItem = ({
+  href,
+  onClick,
+  children,
+  target,
+  icon,
+  className,
+  destructive,
+  disabled,
+  dense,
+  active,
+  dataTest = 'dhis2-uicore-menuitem',
+  chevron,
+  value,
+  label,
+  ariaLabel,
+  showSubMenu,
+  toggleSubMenu,
+  suffix,
+  checkbox,
+  checked,
+  tabIndex
+}) => {
   const menuItemRef = useRef();
   const [openSubMenus, setOpenSubMenus] = useState([]);
   useEffect(() => {
@@ -78,8 +74,8 @@ const MenuItem = _ref2 => {
         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();
+          (_openSubMenus = openSubMenus[openSubMenus.length - 1]) === null || _openSubMenus === void 0 || _openSubMenus.focus();
+          (_openSubMenus2 = openSubMenus[openSubMenus.length - 1]) === null || _openSubMenus2 === void 0 || _openSubMenus2.children[0].click();
           break;
       }
     };

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

@@ -4,28 +4,25 @@ import { Divider } from '@dhis2-ui/divider';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
-const MenuSectionHeader = _ref => {
-  let {
-    className,
-    dataTest = 'dhis2-uicore-menusectionheader',
-    dense,
-    hideDivider,
-    label
-  } = _ref;
-  return /*#__PURE__*/React.createElement("li", {
-    "data-test": dataTest,
-    className: _JSXStyle.dynamic([["1160864328", [colors.white, spacers.dp8, spacers.dp16, spacers.dp8, spacers.dp16, colors.grey700, spacers.dp8, spacers.dp12, spacers.dp4, spacers.dp12]]]) + " " + (cx(className, {
-      dense
-    }) || "")
-  }, !hideDivider && /*#__PURE__*/React.createElement(Divider, {
-    dense: dense
-  }), /*#__PURE__*/React.createElement("h6", {
-    className: _JSXStyle.dynamic([["1160864328", [colors.white, spacers.dp8, spacers.dp16, spacers.dp8, spacers.dp16, colors.grey700, spacers.dp8, spacers.dp12, spacers.dp4, spacers.dp12]]])
-  }, label), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "1160864328",
-    dynamic: [colors.white, spacers.dp8, spacers.dp16, spacers.dp8, spacers.dp16, colors.grey700, spacers.dp8, spacers.dp12, spacers.dp4, spacers.dp12]
-  }, [`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;}`, `h6.__jsx-style-dynamic-selector{margin:0;padding:${spacers.dp8} ${spacers.dp16} ${spacers.dp8} ${spacers.dp16};font-size:13px;line-height:16px;font-weight:500;color:${colors.grey700};}`, `li.dense.__jsx-style-dynamic-selector h6.__jsx-style-dynamic-selector{padding:${spacers.dp8} ${spacers.dp12} ${spacers.dp4} ${spacers.dp12};}`]));
-};
+const MenuSectionHeader = ({
+  className,
+  dataTest = 'dhis2-uicore-menusectionheader',
+  dense,
+  hideDivider,
+  label
+}) => /*#__PURE__*/React.createElement("li", {
+  "data-test": dataTest,
+  className: _JSXStyle.dynamic([["1160864328", [colors.white, spacers.dp8, spacers.dp16, spacers.dp8, spacers.dp16, colors.grey700, spacers.dp8, spacers.dp12, spacers.dp4, spacers.dp12]]]) + " " + (cx(className, {
+    dense
+  }) || "")
+}, !hideDivider && /*#__PURE__*/React.createElement(Divider, {
+  dense: dense
+}), /*#__PURE__*/React.createElement("h6", {
+  className: _JSXStyle.dynamic([["1160864328", [colors.white, spacers.dp8, spacers.dp16, spacers.dp8, spacers.dp16, colors.grey700, spacers.dp8, spacers.dp12, spacers.dp4, spacers.dp12]]])
+}, label), /*#__PURE__*/React.createElement(_JSXStyle, {
+  id: "1160864328",
+  dynamic: [colors.white, spacers.dp8, spacers.dp16, spacers.dp8, spacers.dp16, colors.grey700, spacers.dp8, spacers.dp12, spacers.dp4, spacers.dp12]
+}, [`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;}`, `h6.__jsx-style-dynamic-selector{margin:0;padding:${spacers.dp8} ${spacers.dp16} ${spacers.dp8} ${spacers.dp16};font-size:13px;line-height:16px;font-weight:500;color:${colors.grey700};}`, `li.dense.__jsx-style-dynamic-selector h6.__jsx-style-dynamic-selector{padding:${spacers.dp8} ${spacers.dp12} ${spacers.dp4} ${spacers.dp12};}`]));
 MenuSectionHeader.propTypes = {
   className: PropTypes.string,
   dataTest: PropTypes.string,

package/build/es/menu-section-header/menu-section-header.prod.stories.js

@@ -23,17 +23,14 @@ export default {
     }
   }
 };
-const Template = _ref => {
-  let {
-    menuArgs,
-    ...args
-  } = _ref;
-  return /*#__PURE__*/React.createElement(Menu, menuArgs, /*#__PURE__*/React.createElement(MenuItem, {
-    label: "Menu item above"
-  }), /*#__PURE__*/React.createElement(MenuSectionHeader, args), /*#__PURE__*/React.createElement(MenuItem, {
-    label: "Menu item below"
-  }));
-};
+const Template = ({
+  menuArgs,
+  ...args
+}) => /*#__PURE__*/React.createElement(Menu, menuArgs, /*#__PURE__*/React.createElement(MenuItem, {
+  label: "Menu item above"
+}), /*#__PURE__*/React.createElement(MenuSectionHeader, args), /*#__PURE__*/React.createElement(MenuItem, {
+  label: "Menu item below"
+}));
 Template.propTypes = {
   menuArgs: PropTypes.shape()
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/menu",
-    "version": "10.16.3-alpha.1",
+    "version": "10.16.4",
     "description": "UI Menu",
     "repository": {
         "type": "git",
@@ -33,13 +33,13 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/card": "10.16.3-alpha.1",
-        "@dhis2-ui/divider": "10.16.3-alpha.1",
-        "@dhis2-ui/layer": "10.16.3-alpha.1",
-        "@dhis2-ui/popper": "10.16.3-alpha.1",
-        "@dhis2-ui/portal": "10.16.3-alpha.1",
-        "@dhis2/ui-constants": "10.16.3-alpha.1",
-        "@dhis2/ui-icons": "10.16.3-alpha.1",
+        "@dhis2-ui/card": "10.16.4",
+        "@dhis2-ui/divider": "10.16.4",
+        "@dhis2-ui/layer": "10.16.4",
+        "@dhis2-ui/popper": "10.16.4",
+        "@dhis2-ui/portal": "10.16.4",
+        "@dhis2/ui-constants": "10.16.4",
+        "@dhis2/ui-icons": "10.16.4",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },