@dhis2-ui/menu 8.1.10 → 8.2.1

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

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

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

@@ -21,14 +21,15 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const FlyoutMenu = ({
-  children,
-  className,
-  dataTest,
-  dense,
-  maxHeight,
-  maxWidth
-}) => {
+const FlyoutMenu = _ref => {
+  let {
+    children,
+    className,
+    dataTest,
+    dense,
+    maxHeight,
+    maxWidth
+  } = _ref;
   const [openedSubMenu, setOpenedSubMenu] = (0, _react.useState)(null);
 
   const toggleSubMenu = index => {
@@ -47,7 +48,7 @@ const FlyoutMenu = ({
   }) : child)), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "52281811",
     dynamic: [_uiConstants.colors.white, _uiConstants.colors.grey200, _uiConstants.elevations.e300, dense ? '128' : '180', maxWidth, maxHeight, _uiConstants.spacers.dp4]
-  }, [`div.__jsx-style-dynamic-selector{background:${_uiConstants.colors.white};border:1px solid ${_uiConstants.colors.grey200};border-radius:3px;box-shadow:${_uiConstants.elevations.e300};display:inline-block;min-width:${dense ? '128' : '180'}px;max-width:${maxWidth};max-height:${maxHeight};padding:${_uiConstants.spacers.dp4} 0;}`]));
+  }, ["div.__jsx-style-dynamic-selector{background:".concat(_uiConstants.colors.white, ";border:1px solid ").concat(_uiConstants.colors.grey200, ";border-radius:3px;box-shadow:").concat(_uiConstants.elevations.e300, ";display:inline-block;min-width:").concat(dense ? '128' : '180', "px;max-width:").concat(maxWidth, ";max-height:").concat(maxHeight, ";padding:").concat(_uiConstants.spacers.dp4, " 0;}")]));
 };
 
 exports.FlyoutMenu = FlyoutMenu;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ShiftIntoView = exports.FlippedPosition = exports.DefaultPosition = exports.TogglesSubMenus = exports.WithChildren = exports.default = void 0;
+exports.default = exports.WithChildren = exports.TogglesSubMenus = exports.ShiftIntoView = exports.FlippedPosition = exports.DefaultPosition = void 0;
 
 var _style = _interopRequireDefault(require("styled-jsx/style"));
 

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.WithCustomMenuItem = exports.DropDownMenu = exports.WithVariousChildren = exports.WithSubMenus = exports.MaxWidth = exports.MaxHeight = exports.Dense = exports.Default = exports.default = void 0;
+exports.default = exports.WithVariousChildren = exports.WithSubMenus = exports.WithCustomMenuItem = exports.MaxWidth = exports.MaxHeight = exports.DropDownMenu = exports.Dense = exports.Default = void 0;
 
 var _layer = require("@dhis2-ui/layer");
 
@@ -23,26 +23,9 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 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); }
 
-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'
-\`\`\`
-`;
+const description = "\nUse menus to provide access to options and actions where space is limited and displaying all the options would be impractical. For example, providing access to a range of actions for every dashboard item displayed. Containing all those actions in menus keeps the page manageable.\n\nThe menu component is flexible in where it can be used and its contents can be flexible too. However, the most common use case is a menu containing menu items.\n\nMake sure the menu item labels are short and easy to understand. One word is often enough to describe an action or option. Do not use sentences as labels. Some examples of good menu item labels:\n\n- \"Save\"\n- \"Open as map\"\n- \"Export PDF\"\n- \"Duplicate\"\n\nSee more about how to use menus at the [design system](https://github.com/dhis2/design-system/blob/master/molecules/menu.md).\n\n```js\nimport { FlyoutMenu } from 'dhis2/ui'\n```\n";
 var _default = {
-  title: 'Actions/Menu/Flyout Menu',
+  title: 'Flyout Menu',
   component: _flyoutMenu.FlyoutMenu,
   parameters: {
     docs: {
@@ -103,11 +86,9 @@ const MaxWidth = args => /*#__PURE__*/_react.default.createElement(_react.defaul
 }), /*#__PURE__*/_react.default.createElement(_menu.MenuItem, {
   label: "Item 2 - with a lot of text and using a default maxWidth value of 380px"
 })), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_flyoutMenu.FlyoutMenu, args, /*#__PURE__*/_react.default.createElement(_menu.MenuItem, {
-  label: `Item 1 - with a lot of text and using a custom maxWidth value of
-                ${args.maxWidth}`
+  label: "Item 1 - with a lot of text and using a custom maxWidth value of\n                ".concat(args.maxWidth)
 }), /*#__PURE__*/_react.default.createElement(_menu.MenuItem, {
-  label: `Item 2 - with a lot of text and using a custom maxWidth value of
-                ${args.maxWidth}`
+  label: "Item 2 - with a lot of text and using a custom maxWidth value of\n                ".concat(args.maxWidth)
 })));
 
 exports.MaxWidth = MaxWidth;
@@ -243,17 +224,18 @@ DropDownMenu.parameters = {
 const WithCustomMenuItem = args => {
   // You should not create custom components in the render cycle
   // this is just for demo purposes
-  const PopupWindowMenuItem = ({
-    to,
-    children,
-    ...rest
-  }) => {
+  const PopupWindowMenuItem = _ref => {
+    let {
+      to,
+      children,
+      ...rest
+    } = _ref;
     const HEIGHT = 1000;
     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=${WIDTH}`, `height=${HEIGHT}`, `top=${centerY}`, `left=${centerX}`].join());
+    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());
 
     return /*#__PURE__*/_react.default.createElement(_menu.MenuItem, _extends({
       onClick: onClick,

package/build/cjs/index.js

@@ -3,34 +3,34 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "MenuDivider", {
+Object.defineProperty(exports, "FlyoutMenu", {
   enumerable: true,
   get: function () {
-    return _index.MenuDivider;
+    return _index5.FlyoutMenu;
   }
 });
-Object.defineProperty(exports, "MenuItem", {
+Object.defineProperty(exports, "Menu", {
   enumerable: true,
   get: function () {
-    return _index2.MenuItem;
+    return _index4.Menu;
   }
 });
-Object.defineProperty(exports, "MenuSectionHeader", {
+Object.defineProperty(exports, "MenuDivider", {
   enumerable: true,
   get: function () {
-    return _index3.MenuSectionHeader;
+    return _index.MenuDivider;
   }
 });
-Object.defineProperty(exports, "Menu", {
+Object.defineProperty(exports, "MenuItem", {
   enumerable: true,
   get: function () {
-    return _index4.Menu;
+    return _index2.MenuItem;
   }
 });
-Object.defineProperty(exports, "FlyoutMenu", {
+Object.defineProperty(exports, "MenuSectionHeader", {
   enumerable: true,
   get: function () {
-    return _index5.FlyoutMenu;
+    return _index3.MenuSectionHeader;
   }
 });
 

package/build/cjs/menu/menu.js

@@ -17,20 +17,23 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const Menu = ({
-  children,
-  className,
-  dataTest,
-  dense
-}) => /*#__PURE__*/_react.default.createElement("ul", {
-  "data-test": dataTest,
-  className: "jsx-3549878755" + " " + (className || "")
-}, _react.Children.map(children, (child, index) => /*#__PURE__*/(0, _react.isValidElement)(child) ? /*#__PURE__*/(0, _react.cloneElement)(child, {
-  dense: typeof child.props.dense === 'boolean' ? child.props.dense : dense,
-  hideDivider: typeof child.props.hideDivider !== 'boolean' && index === 0 ? true : child.props.hideDivider
-}) : child), /*#__PURE__*/_react.default.createElement(_style.default, {
-  id: "3549878755"
-}, ["ul.jsx-3549878755{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;}"]));
+const Menu = _ref => {
+  let {
+    children,
+    className,
+    dataTest,
+    dense
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("ul", {
+    "data-test": dataTest,
+    className: "jsx-3549878755" + " " + (className || "")
+  }, _react.Children.map(children, (child, index) => /*#__PURE__*/(0, _react.isValidElement)(child) ? /*#__PURE__*/(0, _react.cloneElement)(child, {
+    dense: typeof child.props.dense === 'boolean' ? child.props.dense : dense,
+    hideDivider: typeof child.props.hideDivider !== 'boolean' && index === 0 ? true : child.props.hideDivider
+  }) : child), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "3549878755"
+  }, ["ul.jsx-3549878755{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;}"]));
+};
 
 exports.Menu = Menu;
 Menu.defaultProps = {

package/build/cjs/menu/menu.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SideBarMenu = exports.AutoHideFirstSectionHeaderDivider = exports.Dense = exports.Default = exports.default = void 0;
+exports.default = exports.SideBarMenu = exports.Dense = exports.Default = exports.AutoHideFirstSectionHeaderDivider = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -13,26 +13,9 @@ var _index2 = require("./index.js");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-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'
-\`\`\`
-`;
+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";
 var _default = {
-  title: 'Actions/Menu/Menu',
+  title: 'Menu',
   component: _index2.Menu,
   parameters: {
     docs: {

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

@@ -17,19 +17,22 @@ var _react = _interopRequireDefault(require("react"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const MenuDivider = ({
-  className,
-  dataTest,
-  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;}`]));
+const MenuDivider = _ref => {
+  let {
+    className,
+    dataTest,
+    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:".concat(_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.defaultProps = {

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Dense = exports.Default = exports.default = void 0;
+exports.default = exports.Dense = exports.Default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -13,15 +13,9 @@ var _menuDivider = require("./menu-divider.js");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-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'
-\`\`\`
-`;
+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";
 var _default = {
-  title: 'Actions/Menu/Menu Divider',
+  title: 'Menu Divider',
   component: _menuDivider.MenuDivider,
   parameters: {
     docs: {

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

@@ -31,47 +31,51 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 const isModifiedEvent = evt => evt.metaKey || evt.altKey || evt.ctrlKey || evt.shiftKey;
 
-const createOnClickHandler = ({
-  onClick,
-  toggleSubMenu,
-  isLink,
-  value
-}) => evt => {
-  if (isLink && isModifiedEvent(evt) || !(onClick || toggleSubMenu)) {
-    return;
-  }
-
-  evt.preventDefault();
-  evt.stopPropagation();
-  onClick && onClick({
+const createOnClickHandler = _ref => {
+  let {
+    onClick,
+    toggleSubMenu,
+    isLink,
     value
-  }, evt);
-  toggleSubMenu && toggleSubMenu();
+  } = _ref;
+  return evt => {
+    if (isLink && isModifiedEvent(evt) || !(onClick || toggleSubMenu)) {
+      return;
+    }
+
+    evt.preventDefault();
+    evt.stopPropagation();
+    onClick && onClick({
+      value
+    }, evt);
+    toggleSubMenu && toggleSubMenu();
+  };
 };
 
-const MenuItem = ({
-  href,
-  onClick,
-  children,
-  target,
-  icon,
-  className,
-  destructive,
-  disabled,
-  dense,
-  active,
-  dataTest,
-  chevron,
-  value,
-  label,
-  showSubMenu,
-  toggleSubMenu
-}) => {
+const MenuItem = _ref2 => {
+  let {
+    href,
+    onClick,
+    children,
+    target,
+    icon,
+    className,
+    destructive,
+    disabled,
+    dense,
+    active,
+    dataTest,
+    chevron,
+    value,
+    label,
+    showSubMenu,
+    toggleSubMenu
+  } = _ref2;
   const menuItemRef = (0, _react.useRef)();
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("li", {
     ref: menuItemRef,
     "data-test": dataTest,
-    className: `jsx-${_menuItemStyles.default.__hash}` + " " + ((0, _classnames.default)(className, {
+    className: "jsx-".concat(_menuItemStyles.default.__hash) + " " + ((0, _classnames.default)(className, {
       destructive,
       disabled,
       dense,
@@ -87,13 +91,13 @@ const MenuItem = ({
       isLink: !!href,
       value
     }) : undefined,
-    className: `jsx-${_menuItemStyles.default.__hash}`
+    className: "jsx-".concat(_menuItemStyles.default.__hash)
   }, icon && /*#__PURE__*/_react.default.createElement("span", {
-    className: `jsx-${_menuItemStyles.default.__hash}` + " " + "icon"
+    className: "jsx-".concat(_menuItemStyles.default.__hash) + " " + "icon"
   }, icon), /*#__PURE__*/_react.default.createElement("span", {
-    className: `jsx-${_menuItemStyles.default.__hash}` + " " + "label"
+    className: "jsx-".concat(_menuItemStyles.default.__hash) + " " + "label"
   }, label), (chevron || children) && /*#__PURE__*/_react.default.createElement("span", {
-    className: `jsx-${_menuItemStyles.default.__hash}` + " " + "chevron"
+    className: "jsx-".concat(_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, {

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.WithIcon = exports.WithTarget = exports.WithHref = exports.WithOnClickAndValue = exports.WithLabel = exports.default = void 0;
+exports.default = exports.WithTarget = exports.WithOnClickAndValue = exports.WithLabel = exports.WithIcon = exports.WithHref = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SubMenus = exports.ToggleMenuItem = exports.OnClick = exports.Icon = exports.Link = exports.Disabled = exports.Destructive = exports.Dense = exports.Chevron = exports.Active = exports.Default = exports.default = void 0;
+exports.default = exports.ToggleMenuItem = exports.SubMenus = exports.OnClick = exports.Link = exports.Icon = exports.Disabled = exports.Destructive = exports.Dense = exports.Default = exports.Chevron = exports.Active = void 0;
 
 var _uiIcons = require("@dhis2/ui-icons");
 
@@ -19,21 +19,9 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 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); }
 
-const description = `
-Menu Items are intended to be children of Menu and Flyout Menu components. They can be nested to create submenus.
-
-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.
-
-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.
-
-See the [design system](https://github.com/dhis2/design-system/blob/master/molecules/menu.md) for more information about menus.
-
-\`\`\`js
-import { MenuItem } from '@dhis2/ui'
-\`\`\`
-`;
+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 = {
-  title: 'Actions/Menu/Menu Item',
+  title: 'Menu Item',
   component: _menuItem.MenuItem,
   args: {
     label: 'Menu item'

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

@@ -7,7 +7,7 @@ exports.default = void 0;
 
 var _uiConstants = require("@dhis2/ui-constants");
 
-const _defaultExport = [`li.jsx-3508410433{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;-webkit-transition:background-color 150ms ease-in-out;transition:background-color 150ms ease-in-out;background-color:${_uiConstants.colors.white};color:${_uiConstants.colors.grey900};fill:${_uiConstants.colors.grey900};font-size:15px;line-height:18px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}`, "li.dense.jsx-3508410433{font-size:14px;line-height:16px;}", `li.jsx-3508410433:hover{background-color:${_uiConstants.colors.grey200};}`, `li.jsx-3508410433:active,li.active.jsx-3508410433{background-color:${_uiConstants.colors.grey400};}`, `li.destructive.jsx-3508410433{color:${_uiConstants.colors.red700};fill:${_uiConstants.colors.red600};}`, `li.destructive.jsx-3508410433:hover{background-color:${_uiConstants.colors.red050};}`, `li.destructive.jsx-3508410433:active,li.destructive.active.jsx-3508410433{background-color:${_uiConstants.colors.red100};}`, `li.disabled.jsx-3508410433{cursor:not-allowed;color:${_uiConstants.colors.grey500};fill:${_uiConstants.colors.grey500};}`, `li.disabled.jsx-3508410433:hover{background-color:${_uiConstants.colors.white};}`, `a.jsx-3508410433{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.dp24};min-height:48px;-webkit-text-decoration:none;text-decoration:none;color:inherit;}`, `a.jsx-3508410433:focus{outline:3px solid ${_uiConstants.theme.focus};outline-offset:-3px;}`, "a.jsx-3508410433:focus.jsx-3508410433:not(:focus-visible){outline:none;}", `li.with-chevron.jsx-3508410433 a.jsx-3508410433{padding-right:${_uiConstants.spacers.dp8};}`, `li.dense.jsx-3508410433 a.jsx-3508410433{padding:0 ${_uiConstants.spacers.dp12};min-height:32px;}`, `li.with-chevron.dense.jsx-3508410433 a.jsx-3508410433{padding-right:${_uiConstants.spacers.dp4};}`, ".label.jsx-3508410433{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;padding:15px 0;}", "li.dense.jsx-3508410433 .label.jsx-3508410433{padding:8px 0;}", `.icon.jsx-3508410433{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;margin-right:${_uiConstants.spacers.dp16};width:24px;height:24px;}`, `.chevron.jsx-3508410433{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;margin-left:${_uiConstants.spacers.dp48};}`, `li.dense.jsx-3508410433 .icon.jsx-3508410433{margin-right:${_uiConstants.spacers.dp8};width:16px;height:16px;}`, "li.jsx-3508410433 .icon.jsx-3508410433>svg{width:24px;height:24px;}", "li.dense.jsx-3508410433 .icon.jsx-3508410433>svg,li.jsx-3508410433 .chevron.jsx-3508410433>svg{width:16px;height:16px;}"];
+const _defaultExport = ["li.jsx-3508410433{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;-webkit-transition:background-color 150ms ease-in-out;transition:background-color 150ms ease-in-out;background-color:".concat(_uiConstants.colors.white, ";color:").concat(_uiConstants.colors.grey900, ";fill:").concat(_uiConstants.colors.grey900, ";font-size:15px;line-height:18px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}"), "li.dense.jsx-3508410433{font-size:14px;line-height:16px;}", "li.jsx-3508410433:hover{background-color:".concat(_uiConstants.colors.grey200, ";}"), "li.jsx-3508410433:active,li.active.jsx-3508410433{background-color:".concat(_uiConstants.colors.grey400, ";}"), "li.destructive.jsx-3508410433{color:".concat(_uiConstants.colors.red700, ";fill:").concat(_uiConstants.colors.red600, ";}"), "li.destructive.jsx-3508410433:hover{background-color:".concat(_uiConstants.colors.red050, ";}"), "li.destructive.jsx-3508410433:active,li.destructive.active.jsx-3508410433{background-color:".concat(_uiConstants.colors.red100, ";}"), "li.disabled.jsx-3508410433{cursor:not-allowed;color:".concat(_uiConstants.colors.grey500, ";fill:").concat(_uiConstants.colors.grey500, ";}"), "li.disabled.jsx-3508410433:hover{background-color:".concat(_uiConstants.colors.white, ";}"), "a.jsx-3508410433{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.dp24, ";min-height:48px;-webkit-text-decoration:none;text-decoration:none;color:inherit;}"), "a.jsx-3508410433:focus{outline:3px solid ".concat(_uiConstants.theme.focus, ";outline-offset:-3px;}"), "a.jsx-3508410433:focus.jsx-3508410433:not(:focus-visible){outline:none;}", "li.with-chevron.jsx-3508410433 a.jsx-3508410433{padding-right:".concat(_uiConstants.spacers.dp8, ";}"), "li.dense.jsx-3508410433 a.jsx-3508410433{padding:0 ".concat(_uiConstants.spacers.dp12, ";min-height:32px;}"), "li.with-chevron.dense.jsx-3508410433 a.jsx-3508410433{padding-right:".concat(_uiConstants.spacers.dp4, ";}"), ".label.jsx-3508410433{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;padding:15px 0;}", "li.dense.jsx-3508410433 .label.jsx-3508410433{padding:8px 0;}", ".icon.jsx-3508410433{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;margin-right:".concat(_uiConstants.spacers.dp16, ";width:24px;height:24px;}"), ".chevron.jsx-3508410433{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;margin-left:".concat(_uiConstants.spacers.dp48, ";}"), "li.dense.jsx-3508410433 .icon.jsx-3508410433{margin-right:".concat(_uiConstants.spacers.dp8, ";width:16px;height:16px;}"), "li.jsx-3508410433 .icon.jsx-3508410433>svg{width:24px;height:24px;}", "li.dense.jsx-3508410433 .icon.jsx-3508410433>svg,li.jsx-3508410433 .chevron.jsx-3508410433>svg{width:16px;height:16px;}"];
 _defaultExport.__hash = "3508410433";
 var _default = _defaultExport;
 exports.default = _default;

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

@@ -19,25 +19,28 @@ var _react = _interopRequireDefault(require("react"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const MenuSectionHeader = ({
-  className,
-  dataTest,
-  dense,
-  hideDivider,
-  label
-}) => /*#__PURE__*/_react.default.createElement("li", {
-  "data-test": dataTest,
-  className: _style.default.dynamic([["954853487", [_uiConstants.colors.white, _uiConstants.spacers.dp8, _uiConstants.spacers.dp24, _uiConstants.spacers.dp12, _uiConstants.spacers.dp24, _uiConstants.colors.grey600, _uiConstants.spacers.dp8, _uiConstants.spacers.dp12, _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([["954853487", [_uiConstants.colors.white, _uiConstants.spacers.dp8, _uiConstants.spacers.dp24, _uiConstants.spacers.dp12, _uiConstants.spacers.dp24, _uiConstants.colors.grey600, _uiConstants.spacers.dp8, _uiConstants.spacers.dp12, _uiConstants.spacers.dp12]]])
-}, label), /*#__PURE__*/_react.default.createElement(_style.default, {
-  id: "954853487",
-  dynamic: [_uiConstants.colors.white, _uiConstants.spacers.dp8, _uiConstants.spacers.dp24, _uiConstants.spacers.dp12, _uiConstants.spacers.dp24, _uiConstants.colors.grey600, _uiConstants.spacers.dp8, _uiConstants.spacers.dp12, _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.dp24} ${_uiConstants.spacers.dp12} ${_uiConstants.spacers.dp24};font-size:15px;line-height:16px;font-weight:500;color:${_uiConstants.colors.grey600};}`, `li.dense.__jsx-style-dynamic-selector h6.__jsx-style-dynamic-selector{font-size:14px;line-height:16px;padding:${_uiConstants.spacers.dp8} ${_uiConstants.spacers.dp12} 6px ${_uiConstants.spacers.dp12};}`]));
+const MenuSectionHeader = _ref => {
+  let {
+    className,
+    dataTest,
+    dense,
+    hideDivider,
+    label
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("li", {
+    "data-test": dataTest,
+    className: _style.default.dynamic([["954853487", [_uiConstants.colors.white, _uiConstants.spacers.dp8, _uiConstants.spacers.dp24, _uiConstants.spacers.dp12, _uiConstants.spacers.dp24, _uiConstants.colors.grey600, _uiConstants.spacers.dp8, _uiConstants.spacers.dp12, _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([["954853487", [_uiConstants.colors.white, _uiConstants.spacers.dp8, _uiConstants.spacers.dp24, _uiConstants.spacers.dp12, _uiConstants.spacers.dp24, _uiConstants.colors.grey600, _uiConstants.spacers.dp8, _uiConstants.spacers.dp12, _uiConstants.spacers.dp12]]])
+  }, label), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "954853487",
+    dynamic: [_uiConstants.colors.white, _uiConstants.spacers.dp8, _uiConstants.spacers.dp24, _uiConstants.spacers.dp12, _uiConstants.spacers.dp24, _uiConstants.colors.grey600, _uiConstants.spacers.dp8, _uiConstants.spacers.dp12, _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.dp24, " ").concat(_uiConstants.spacers.dp12, " ").concat(_uiConstants.spacers.dp24, ";font-size:15px;line-height:16px;font-weight:500;color:").concat(_uiConstants.colors.grey600, ";}"), "li.dense.__jsx-style-dynamic-selector h6.__jsx-style-dynamic-selector{font-size:14px;line-height:16px;padding:".concat(_uiConstants.spacers.dp8, " ").concat(_uiConstants.spacers.dp12, " 6px ").concat(_uiConstants.spacers.dp12, ";}")]));
+};
 
 exports.MenuSectionHeader = MenuSectionHeader;
 MenuSectionHeader.defaultProps = {

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.WithLabel = exports.default = void 0;
+exports.default = exports.WithLabel = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TopOfList = exports.WithoutDivider = exports.Dense = exports.Default = exports.default = void 0;
+exports.default = exports.WithoutDivider = exports.TopOfList = exports.Dense = exports.Default = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -15,15 +15,9 @@ var _menuSectionHeader = require("./menu-section-header.js");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-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.
-
-\`\`\`js
-import { MenuSectionHeader } from '@dhis2/ui'
-\`\`\`
-`;
+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 = {
-  title: 'Actions/Menu/Menu Section Header',
+  title: 'Menu Section Header',
   component: _menuSectionHeader.MenuSectionHeader,
   args: {
     label: 'Section header'
@@ -38,14 +32,17 @@ var _default = {
 };
 exports.default = _default;
 
-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"
-}));
+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"
+  }));
+};
 
 Template.propTypes = {
   menuArgs: _propTypes.default.shape()

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

@@ -13,23 +13,27 @@ 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(([menuItemRect, subMenuRect]) => {
+  getMenuItemAndSubMenuRects().should(_ref => {
+    let [menuItemRect, subMenuRect] = _ref;
     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(([menuItemRect, subMenuRect]) => {
+  getMenuItemAndSubMenuRects().should(_ref2 => {
+    let [menuItemRect, subMenuRect] = _ref2;
     expect(menuItemRect.left).to.closeTo(subMenuRect.right, CLOSE_TO_DELTA);
   });
 });
 Then('the SubMenu is rendered on top of the MenuItem', () => {
-  getMenuItemAndSubMenuRects().should(([menuItemRect, subMenuRect]) => {
+  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);
   });
 });
 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(([menuItemRect, popperRect]) => {
+  cy.getPositionsBySelectors('[data-test="dhis2-uicore-menuitem"]', '[data-test="dhis2-uicore-popper"]').should(_ref4 => {
+    let [menuItemRect, popperRect] = _ref4;
     expect(menuItemRect.top).to.closeTo(popperRect.top, CLOSE_TO_DELTA);
   });
 });

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

@@ -4,14 +4,15 @@ import PropTypes from 'prop-types';
 import React, { Children, cloneElement, isValidElement, useState } from 'react';
 import { Menu } from '../index.js';
 
-const FlyoutMenu = ({
-  children,
-  className,
-  dataTest,
-  dense,
-  maxHeight,
-  maxWidth
-}) => {
+const FlyoutMenu = _ref => {
+  let {
+    children,
+    className,
+    dataTest,
+    dense,
+    maxHeight,
+    maxWidth
+  } = _ref;
   const [openedSubMenu, setOpenedSubMenu] = useState(null);
 
   const toggleSubMenu = index => {
@@ -30,7 +31,7 @@ const FlyoutMenu = ({
   }) : child)), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "52281811",
     dynamic: [colors.white, colors.grey200, elevations.e300, dense ? '128' : '180', maxWidth, maxHeight, spacers.dp4]
-  }, [`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;}`]));
+  }, ["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;}")]));
 };
 
 FlyoutMenu.defaultProps = {

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

@@ -6,26 +6,9 @@ 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 = `
-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'
-\`\`\`
-`;
+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";
 export default {
-  title: 'Actions/Menu/Flyout Menu',
+  title: 'Flyout Menu',
   component: FlyoutMenu,
   parameters: {
     docs: {
@@ -77,11 +60,9 @@ 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
-                ${args.maxWidth}`
+  label: "Item 1 - with a lot of text and using a custom maxWidth value of\n                ".concat(args.maxWidth)
 }), /*#__PURE__*/React.createElement(MenuItem, {
-  label: `Item 2 - with a lot of text and using a custom maxWidth value of
-                ${args.maxWidth}`
+  label: "Item 2 - with a lot of text and using a custom maxWidth value of\n                ".concat(args.maxWidth)
 })));
 MaxWidth.args = {
   maxWidth: '300px'
@@ -205,17 +186,18 @@ DropDownMenu.parameters = {
 export const WithCustomMenuItem = args => {
   // You should not create custom components in the render cycle
   // this is just for demo purposes
-  const PopupWindowMenuItem = ({
-    to,
-    children,
-    ...rest
-  }) => {
+  const PopupWindowMenuItem = _ref => {
+    let {
+      to,
+      children,
+      ...rest
+    } = _ref;
     const HEIGHT = 1000;
     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=${WIDTH}`, `height=${HEIGHT}`, `top=${centerY}`, `left=${centerX}`].join());
+    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());
 
     return /*#__PURE__*/React.createElement(MenuItem, _extends({
       onClick: onClick,

package/build/es/menu/menu.js

@@ -2,20 +2,23 @@ import _JSXStyle from "styled-jsx/style";
 import PropTypes from 'prop-types';
 import React, { Children, cloneElement, isValidElement } from 'react';
 
-const Menu = ({
-  children,
-  className,
-  dataTest,
-  dense
-}) => /*#__PURE__*/React.createElement("ul", {
-  "data-test": dataTest,
-  className: "jsx-3549878755" + " " + (className || "")
-}, Children.map(children, (child, index) => /*#__PURE__*/isValidElement(child) ? /*#__PURE__*/cloneElement(child, {
-  dense: typeof child.props.dense === 'boolean' ? child.props.dense : dense,
-  hideDivider: typeof child.props.hideDivider !== 'boolean' && index === 0 ? true : child.props.hideDivider
-}) : child), /*#__PURE__*/React.createElement(_JSXStyle, {
-  id: "3549878755"
-}, ["ul.jsx-3549878755{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;}"]));
+const Menu = _ref => {
+  let {
+    children,
+    className,
+    dataTest,
+    dense
+  } = _ref;
+  return /*#__PURE__*/React.createElement("ul", {
+    "data-test": dataTest,
+    className: "jsx-3549878755" + " " + (className || "")
+  }, Children.map(children, (child, index) => /*#__PURE__*/isValidElement(child) ? /*#__PURE__*/cloneElement(child, {
+    dense: typeof child.props.dense === 'boolean' ? child.props.dense : dense,
+    hideDivider: typeof child.props.hideDivider !== 'boolean' && index === 0 ? true : child.props.hideDivider
+  }) : child), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "3549878755"
+  }, ["ul.jsx-3549878755{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'

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

@@ -1,26 +1,9 @@
 import React from 'react';
 import { MenuItem, MenuSectionHeader } from '../index.js';
 import { Menu } from './index.js';
-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'
-\`\`\`
-`;
+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";
 export default {
-  title: 'Actions/Menu/Menu',
+  title: 'Menu',
   component: Menu,
   parameters: {
     docs: {

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

@@ -4,19 +4,22 @@ import { colors } from '@dhis2/ui-constants';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-const MenuDivider = ({
-  className,
-  dataTest,
-  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;}`]));
+const MenuDivider = _ref => {
+  let {
+    className,
+    dataTest,
+    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:".concat(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

@@ -1,15 +1,9 @@
 import React from 'react';
 import { Menu, MenuItem } from '../index.js';
 import { MenuDivider } from './menu-divider.js';
-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'
-\`\`\`
-`;
+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";
 export default {
-  title: 'Actions/Menu/Menu Divider',
+  title: 'Menu Divider',
   component: MenuDivider,
   parameters: {
     docs: {

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

@@ -10,47 +10,51 @@ import styles from './menu-item.styles.js';
 
 const isModifiedEvent = evt => evt.metaKey || evt.altKey || evt.ctrlKey || evt.shiftKey;
 
-const createOnClickHandler = ({
-  onClick,
-  toggleSubMenu,
-  isLink,
-  value
-}) => evt => {
-  if (isLink && isModifiedEvent(evt) || !(onClick || toggleSubMenu)) {
-    return;
-  }
-
-  evt.preventDefault();
-  evt.stopPropagation();
-  onClick && onClick({
+const createOnClickHandler = _ref => {
+  let {
+    onClick,
+    toggleSubMenu,
+    isLink,
     value
-  }, evt);
-  toggleSubMenu && toggleSubMenu();
+  } = _ref;
+  return evt => {
+    if (isLink && isModifiedEvent(evt) || !(onClick || toggleSubMenu)) {
+      return;
+    }
+
+    evt.preventDefault();
+    evt.stopPropagation();
+    onClick && onClick({
+      value
+    }, evt);
+    toggleSubMenu && toggleSubMenu();
+  };
 };
 
-const MenuItem = ({
-  href,
-  onClick,
-  children,
-  target,
-  icon,
-  className,
-  destructive,
-  disabled,
-  dense,
-  active,
-  dataTest,
-  chevron,
-  value,
-  label,
-  showSubMenu,
-  toggleSubMenu
-}) => {
+const MenuItem = _ref2 => {
+  let {
+    href,
+    onClick,
+    children,
+    target,
+    icon,
+    className,
+    destructive,
+    disabled,
+    dense,
+    active,
+    dataTest,
+    chevron,
+    value,
+    label,
+    showSubMenu,
+    toggleSubMenu
+  } = _ref2;
   const menuItemRef = useRef();
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("li", {
     ref: menuItemRef,
     "data-test": dataTest,
-    className: `jsx-${styles.__hash}` + " " + (cx(className, {
+    className: "jsx-".concat(styles.__hash) + " " + (cx(className, {
       destructive,
       disabled,
       dense,
@@ -66,13 +70,13 @@ const MenuItem = ({
       isLink: !!href,
       value
     }) : undefined,
-    className: `jsx-${styles.__hash}`
+    className: "jsx-".concat(styles.__hash)
   }, icon && /*#__PURE__*/React.createElement("span", {
-    className: `jsx-${styles.__hash}` + " " + "icon"
+    className: "jsx-".concat(styles.__hash) + " " + "icon"
   }, icon), /*#__PURE__*/React.createElement("span", {
-    className: `jsx-${styles.__hash}` + " " + "label"
+    className: "jsx-".concat(styles.__hash) + " " + "label"
   }, label), (chevron || children) && /*#__PURE__*/React.createElement("span", {
-    className: `jsx-${styles.__hash}` + " " + "chevron"
+    className: "jsx-".concat(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, {

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

@@ -4,21 +4,9 @@ import { IconApps24 } from '@dhis2/ui-icons';
 import React, { useState } from 'react';
 import { Menu } from '../index.js';
 import { MenuItem } from './menu-item.js';
-const description = `
-Menu Items are intended to be children of Menu and Flyout Menu components. They can be nested to create submenus.
-
-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.
-
-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.
-
-See the [design system](https://github.com/dhis2/design-system/blob/master/molecules/menu.md) for more information about menus.
-
-\`\`\`js
-import { MenuItem } from '@dhis2/ui'
-\`\`\`
-`;
+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";
 export default {
-  title: 'Actions/Menu/Menu Item',
+  title: 'Menu Item',
   component: MenuItem,
   args: {
     label: 'Menu item'

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

@@ -1,4 +1,4 @@
 import { colors, spacers, theme } from '@dhis2/ui-constants';
-const _defaultExport = [`li.jsx-3508410433{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;-webkit-transition:background-color 150ms ease-in-out;transition:background-color 150ms ease-in-out;background-color:${colors.white};color:${colors.grey900};fill:${colors.grey900};font-size:15px;line-height:18px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}`, "li.dense.jsx-3508410433{font-size:14px;line-height:16px;}", `li.jsx-3508410433:hover{background-color:${colors.grey200};}`, `li.jsx-3508410433:active,li.active.jsx-3508410433{background-color:${colors.grey400};}`, `li.destructive.jsx-3508410433{color:${colors.red700};fill:${colors.red600};}`, `li.destructive.jsx-3508410433:hover{background-color:${colors.red050};}`, `li.destructive.jsx-3508410433:active,li.destructive.active.jsx-3508410433{background-color:${colors.red100};}`, `li.disabled.jsx-3508410433{cursor:not-allowed;color:${colors.grey500};fill:${colors.grey500};}`, `li.disabled.jsx-3508410433:hover{background-color:${colors.white};}`, `a.jsx-3508410433{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 ${spacers.dp24};min-height:48px;-webkit-text-decoration:none;text-decoration:none;color:inherit;}`, `a.jsx-3508410433:focus{outline:3px solid ${theme.focus};outline-offset:-3px;}`, "a.jsx-3508410433:focus.jsx-3508410433:not(:focus-visible){outline:none;}", `li.with-chevron.jsx-3508410433 a.jsx-3508410433{padding-right:${spacers.dp8};}`, `li.dense.jsx-3508410433 a.jsx-3508410433{padding:0 ${spacers.dp12};min-height:32px;}`, `li.with-chevron.dense.jsx-3508410433 a.jsx-3508410433{padding-right:${spacers.dp4};}`, ".label.jsx-3508410433{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;padding:15px 0;}", "li.dense.jsx-3508410433 .label.jsx-3508410433{padding:8px 0;}", `.icon.jsx-3508410433{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;margin-right:${spacers.dp16};width:24px;height:24px;}`, `.chevron.jsx-3508410433{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;margin-left:${spacers.dp48};}`, `li.dense.jsx-3508410433 .icon.jsx-3508410433{margin-right:${spacers.dp8};width:16px;height:16px;}`, "li.jsx-3508410433 .icon.jsx-3508410433>svg{width:24px;height:24px;}", "li.dense.jsx-3508410433 .icon.jsx-3508410433>svg,li.jsx-3508410433 .chevron.jsx-3508410433>svg{width:16px;height:16px;}"];
+const _defaultExport = ["li.jsx-3508410433{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;-webkit-transition:background-color 150ms ease-in-out;transition:background-color 150ms ease-in-out;background-color:".concat(colors.white, ";color:").concat(colors.grey900, ";fill:").concat(colors.grey900, ";font-size:15px;line-height:18px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}"), "li.dense.jsx-3508410433{font-size:14px;line-height:16px;}", "li.jsx-3508410433:hover{background-color:".concat(colors.grey200, ";}"), "li.jsx-3508410433:active,li.active.jsx-3508410433{background-color:".concat(colors.grey400, ";}"), "li.destructive.jsx-3508410433{color:".concat(colors.red700, ";fill:").concat(colors.red600, ";}"), "li.destructive.jsx-3508410433:hover{background-color:".concat(colors.red050, ";}"), "li.destructive.jsx-3508410433:active,li.destructive.active.jsx-3508410433{background-color:".concat(colors.red100, ";}"), "li.disabled.jsx-3508410433{cursor:not-allowed;color:".concat(colors.grey500, ";fill:").concat(colors.grey500, ";}"), "li.disabled.jsx-3508410433:hover{background-color:".concat(colors.white, ";}"), "a.jsx-3508410433{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(spacers.dp24, ";min-height:48px;-webkit-text-decoration:none;text-decoration:none;color:inherit;}"), "a.jsx-3508410433:focus{outline:3px solid ".concat(theme.focus, ";outline-offset:-3px;}"), "a.jsx-3508410433:focus.jsx-3508410433:not(:focus-visible){outline:none;}", "li.with-chevron.jsx-3508410433 a.jsx-3508410433{padding-right:".concat(spacers.dp8, ";}"), "li.dense.jsx-3508410433 a.jsx-3508410433{padding:0 ".concat(spacers.dp12, ";min-height:32px;}"), "li.with-chevron.dense.jsx-3508410433 a.jsx-3508410433{padding-right:".concat(spacers.dp4, ";}"), ".label.jsx-3508410433{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;padding:15px 0;}", "li.dense.jsx-3508410433 .label.jsx-3508410433{padding:8px 0;}", ".icon.jsx-3508410433{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;margin-right:".concat(spacers.dp16, ";width:24px;height:24px;}"), ".chevron.jsx-3508410433{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;margin-left:".concat(spacers.dp48, ";}"), "li.dense.jsx-3508410433 .icon.jsx-3508410433{margin-right:".concat(spacers.dp8, ";width:16px;height:16px;}"), "li.jsx-3508410433 .icon.jsx-3508410433>svg{width:24px;height:24px;}", "li.dense.jsx-3508410433 .icon.jsx-3508410433>svg,li.jsx-3508410433 .chevron.jsx-3508410433>svg{width:16px;height:16px;}"];
 _defaultExport.__hash = "3508410433";
 export default _defaultExport;

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

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

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

@@ -2,15 +2,9 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { Menu, MenuItem } from '../index.js';
 import { MenuSectionHeader } from './menu-section-header.js';
-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.
-
-\`\`\`js
-import { MenuSectionHeader } from '@dhis2/ui'
-\`\`\`
-`;
+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";
 export default {
-  title: 'Actions/Menu/Menu Section Header',
+  title: 'Menu Section Header',
   component: MenuSectionHeader,
   args: {
     label: 'Section header'
@@ -24,14 +18,17 @@ export default {
   }
 };
 
-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"
-}));
+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"
+  }));
+};
 
 Template.propTypes = {
   menuArgs: PropTypes.shape()

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/menu",
-    "version": "8.1.10",
+    "version": "8.2.1",
     "description": "UI Menu",
     "repository": {
         "type": "git",
@@ -32,13 +32,13 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.0.0-beta.1",
-        "@dhis2-ui/card": "8.1.10",
-        "@dhis2-ui/divider": "8.1.10",
-        "@dhis2-ui/layer": "8.1.10",
-        "@dhis2-ui/popper": "8.1.10",
-        "@dhis2-ui/portal": "8.1.10",
-        "@dhis2/ui-constants": "8.1.10",
-        "@dhis2/ui-icons": "8.1.10",
+        "@dhis2-ui/card": "8.2.1",
+        "@dhis2-ui/divider": "8.2.1",
+        "@dhis2-ui/layer": "8.2.1",
+        "@dhis2-ui/popper": "8.2.1",
+        "@dhis2-ui/portal": "8.2.1",
+        "@dhis2/ui-constants": "8.2.1",
+        "@dhis2/ui-icons": "8.2.1",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },