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

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

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithChildren = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _index = require("./index.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = {
+  title: 'Menu'
+};
+const WithChildren = () => /*#__PURE__*/_react.default.createElement(_index.Menu, null, "I am a child");
+exports.WithChildren = WithChildren;

package/build/cjs/menu/menu.js

@@ -4,23 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Menu = void 0;
-
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _helpers = require("./helpers.js");
-
 var _useMenu = require("./use-menu.js");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const Menu = _ref => {
   let {
     children,
@@ -36,18 +27,20 @@ const Menu = _ref => {
     if (! /*#__PURE__*/(0, _react.isValidElement)(child)) {
       return child;
     }
-
     const tabIndex = index === focusedIndex ? 0 : -1;
-    const childProps = { ...child.props
-    }; // this check is based on the type of child.
+    const childProps = {
+      ...child.props
+    };
+
+    // this check is based on the type of child.
     // if it is a native HTML element, like li, a, span, only apply its child props
     // if it is a functional (React) component, it applies custom props, like dense, hideDivider, etc
-
     if (typeof child.type === 'string') {
       // if the native HTML element child is not li, then wrap it in an li tag
       // apply the tabindex prop if a child has the menuitem role to make it focusable
       if (child.type === 'li') {
-        return (0, _helpers.hasMenuItemRole)(child.props.children[0]) ? /*#__PURE__*/(0, _react.cloneElement)(child, { ...childProps,
+        return (0, _helpers.hasMenuItemRole)(child.props.children[0]) ? /*#__PURE__*/(0, _react.cloneElement)(child, {
+          ...childProps,
           tabIndex
         }) : /*#__PURE__*/(0, _react.cloneElement)(child, childProps);
       } else {
@@ -58,7 +51,8 @@ const Menu = _ref => {
     } else {
       childProps.dense = typeof child.props.dense === 'boolean' ? child.props.dense : dense;
       childProps.hideDivider = typeof child.props.hideDivider !== 'boolean' && index === 0 ? true : child.props.hideDivider;
-      return /*#__PURE__*/(0, _react.cloneElement)(child, { ...childProps,
+      return /*#__PURE__*/(0, _react.cloneElement)(child, {
+        ...childProps,
         tabIndex
       });
     }
@@ -73,7 +67,6 @@ const Menu = _ref => {
     id: "1636612837"
   }, ["ul.jsx-1636612837{display:block;position:relative;width:100%;margin:0;padding:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}"]));
 };
-
 exports.Menu = Menu;
 Menu.defaultProps = {
   dataTest: 'dhis2-uicore-menulist'
@@ -83,7 +76,6 @@ Menu.propTypes = {
   children: _propTypes.default.node,
   className: _propTypes.default.string,
   dataTest: _propTypes.default.string,
-
   /** Applies `dense` property to all child components unless already specified */
   dense: _propTypes.default.bool
 };

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

@@ -4,17 +4,29 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.SideBarMenuRTL = exports.SideBarMenu = exports.Dense = exports.Default = exports.AutoHideFirstSectionHeaderDivider = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _index = require("../index.js");
-
 var _index2 = require("./index.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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.
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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:
 
-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 = {
+- "Save"
+- "Open as map"
+- "Export PDF"
+- "Duplicate"
+
+Typical children are Menu Items, Menu Dividers, and Menu Section Headers.
+
+\`\`\`js
+import { Menu } from '@dhis2/ui'
+\`\`\`
+`;
+var _default = exports.default = {
   title: 'Menu',
   component: _index2.Menu,
   parameters: {
@@ -25,22 +37,17 @@ var _default = {
     }
   }
 };
-exports.default = _default;
-
 const Default = args => /*#__PURE__*/_react.default.createElement(_index2.Menu, args, /*#__PURE__*/_react.default.createElement(_index.MenuItem, {
   label: "Menu item"
 }), /*#__PURE__*/_react.default.createElement(_index.MenuItem, {
   label: "Menu item"
 }));
-
 exports.Default = Default;
-
 const Dense = args => /*#__PURE__*/_react.default.createElement(_index2.Menu, args, /*#__PURE__*/_react.default.createElement(_index.MenuItem, {
   label: "Menu item"
 }), /*#__PURE__*/_react.default.createElement(_index.MenuItem, {
   label: "Menu item"
 }));
-
 exports.Dense = Dense;
 Dense.args = {
   dense: true
@@ -52,15 +59,12 @@ Dense.parameters = {
     }
   }
 };
-
 const AutoHideFirstSectionHeaderDivider = args => /*#__PURE__*/_react.default.createElement(_index2.Menu, args, /*#__PURE__*/_react.default.createElement(_index.MenuSectionHeader, {
   label: "First - no divider above"
 }), /*#__PURE__*/_react.default.createElement(_index.MenuSectionHeader, {
   label: "Second - with divider above"
 }));
-
 exports.AutoHideFirstSectionHeaderDivider = AutoHideFirstSectionHeaderDivider;
-
 const SideBarMenu = args => /*#__PURE__*/_react.default.createElement("main", {
   style: {
     display: 'flex',
@@ -85,14 +89,11 @@ const SideBarMenu = args => /*#__PURE__*/_react.default.createElement("main", {
     borderInlineStart: '1px solid grey'
   }
 }, "Main content"));
-
 exports.SideBarMenu = SideBarMenu;
-
 const SideBarMenuRTL = args => /*#__PURE__*/_react.default.createElement("div", {
   dir: "rtl",
   style: {
     height: '100%'
   }
 }, /*#__PURE__*/_react.default.createElement(SideBarMenu, args));
-
 exports.SideBarMenuRTL = SideBarMenuRTL;

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

@@ -4,25 +4,24 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useMenuNavigation = void 0;
-
 var _react = require("react");
-
 var _helpers = require("./helpers.js");
-
 const useMenuNavigation = children => {
   const menuRef = (0, _react.useRef)(null);
   const [focusableItemsIndices, setFocusableItemsIndices] = (0, _react.useState)(null);
-  const [activeItemIndex, setActiveItemIndex] = (0, _react.useState)(-1); // Initializes the indices for focusable items
-  // focusable items have the role of menuitem || menuitemcheckbox || menuitemradio
+  const [activeItemIndex, setActiveItemIndex] = (0, _react.useState)(-1);
 
+  // Initializes the indices for focusable items
+  // focusable items have the role of menuitem || menuitemcheckbox || menuitemradio
   (0, _react.useEffect)(() => {
     if (menuRef) {
       const menuItems = Array.from(menuRef.current.children);
       const itemsIndices = (0, _helpers.getFocusableItemsIndices)(menuItems);
       setFocusableItemsIndices(itemsIndices);
     }
-  }, [children]); // Focus the active menu child
+  }, [children]);
 
+  // Focus the active menu child
   (0, _react.useEffect)(() => {
     if (menuRef) {
       if (focusableItemsIndices !== null && focusableItemsIndices !== void 0 && focusableItemsIndices.length && activeItemIndex > -1) {
@@ -30,50 +29,45 @@ const useMenuNavigation = children => {
         menuRef.current.children[currentIndex].focus();
       }
     }
-  }, [activeItemIndex, focusableItemsIndices]); // Navigate through focusable children using arrow keys
-  // Trigger actionable items
+  }, [activeItemIndex, focusableItemsIndices]);
 
+  // Navigate through focusable children using arrow keys
+  // Trigger actionable items
   const handleKeyDown = (0, _react.useCallback)(event => {
     const totalFocusablePositions = focusableItemsIndices === null || focusableItemsIndices === void 0 ? void 0 : focusableItemsIndices.length;
-
     if (totalFocusablePositions) {
       const lastIndex = totalFocusablePositions - 1;
-
       switch (event.key) {
         case 'ArrowUp':
           event.preventDefault();
           setActiveItemIndex(activeItemIndex > 0 ? activeItemIndex - 1 : lastIndex);
           break;
-
         case 'ArrowDown':
           event.preventDefault();
           setActiveItemIndex(activeItemIndex >= lastIndex ? 0 : activeItemIndex + 1);
           break;
-
         case 'Enter':
         case ' ':
           if (event.target.nodeName === 'LI') {
             var _event$target$childre, _event$target$childre2;
-
             event.preventDefault();
             (_event$target$childre = event.target.children) === null || _event$target$childre === void 0 ? void 0 : (_event$target$childre2 = _event$target$childre[0]) === null || _event$target$childre2 === void 0 ? void 0 : _event$target$childre2.click();
           }
-
           break;
-
         default:
           break;
       }
     }
-  }, [activeItemIndex, focusableItemsIndices === null || focusableItemsIndices === void 0 ? void 0 : focusableItemsIndices.length]); // Event listeners for menu focus and key handling
+  }, [activeItemIndex, focusableItemsIndices === null || focusableItemsIndices === void 0 ? void 0 : focusableItemsIndices.length]);
 
+  // Event listeners for menu focus and key handling
   (0, _react.useEffect)(() => {
     if (!menuRef) {
       return;
     }
+    const menu = menuRef.current;
 
-    const menu = menuRef.current; // Focus the first menu item when the menu receives focus
-
+    // Focus the first menu item when the menu receives focus
     const handleFocus = event => {
       if (event.target === menuRef.current) {
         const firstItemIndex = focusableItemsIndices === null || focusableItemsIndices === void 0 ? void 0 : focusableItemsIndices[0];
@@ -81,7 +75,6 @@ const useMenuNavigation = children => {
         setActiveItemIndex(0);
       }
     };
-
     menu.addEventListener('focus', handleFocus);
     menu.addEventListener('keydown', handleKeyDown);
     return () => {
@@ -94,5 +87,4 @@ const useMenuNavigation = children => {
     focusedIndex: focusableItemsIndices === null || focusableItemsIndices === void 0 ? void 0 : focusableItemsIndices[activeItemIndex]
   };
 };
-
 exports.useMenuNavigation = useMenuNavigation;

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

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

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

@@ -4,19 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MenuDivider = void 0;
-
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-
-var _divider = require("@dhis2-ui/divider");
-
 var _uiConstants = require("@dhis2/ui-constants");
-
+var _divider = require("@dhis2-ui/divider");
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const MenuDivider = _ref => {
   let {
     className,
@@ -31,9 +24,8 @@ const MenuDivider = _ref => {
   }), /*#__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;}")]));
+  }, [`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.defaultProps = {
   dataTest: 'dhis2-uicore-menudivider'

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

@@ -4,17 +4,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Dense = exports.Default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _index = require("../index.js");
-
 var _menuDivider = require("./menu-divider.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const description = "\nItems in a menu can be split into separate sections by using dividers. Group relevant menu items together to help the user understand the options quickly. A divider can be used alone. If using a 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 = {
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const description = `
+Items in a menu can be split into separate sections by using dividers. Group relevant menu items together to help the user understand the options quickly. A divider can be used alone. If using a 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'
+\`\`\`
+`;
+var _default = exports.default = {
   title: 'Menu Divider',
   component: _menuDivider.MenuDivider,
   parameters: {
@@ -25,18 +26,13 @@ var _default = {
     }
   }
 };
-exports.default = _default;
-
 const Template = args => /*#__PURE__*/_react.default.createElement(_index.Menu, null, /*#__PURE__*/_react.default.createElement(_index.MenuItem, {
   label: "Item above divider"
 }), /*#__PURE__*/_react.default.createElement(_menuDivider.MenuDivider, args), /*#__PURE__*/_react.default.createElement(_index.MenuItem, {
   label: "Item below divider"
 }));
-
-const Default = Template.bind({});
-exports.Default = Default;
-const Dense = Template.bind({});
-exports.Dense = Dense;
+const Default = exports.Default = Template.bind({});
+const Dense = exports.Dense = Template.bind({});
 Dense.args = {
   dense: true
 };

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

@@ -1,13 +1,9 @@
 "use strict";
 
 var _enzyme = require("enzyme");
-
 var _react = _interopRequireDefault(require("react"));
-
 var _menuItem = require("../menu-item.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 describe('Menu Component', () => {
   it('Default menu item has role', () => {
     const menuItemDataTest = 'data-test-menu-item';

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

@@ -1,10 +1,9 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('a MenuItem with href is rendered', () => {
   cy.visitStory('MenuItem', 'With Href');
 });
 (0, _cypressCucumberPreprocessor.Then)('a link is rendered with the href', () => {
-  cy.get('a').should('have.attr', 'href').and('include', 'url.test');
+  cy.get('#storybook-root a').should('have.attr', 'href').and('include', 'url.test');
 });

package/build/cjs/menu-item/features/accepts_icon/index.js

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

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

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

package/build/cjs/menu-item/features/accepts_suffix/index.js

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

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

@@ -1,10 +1,9 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('a MenuItem with target is rendered', () => {
   cy.visitStory('MenuItem', 'With Target');
 });
 (0, _cypressCucumberPreprocessor.Then)('a link is rendered with the target', () => {
-  cy.get('a').should('have.attr', 'target').and('include', '_blank');
+  cy.get('#storybook-root a').should('have.attr', 'target').and('include', '_blank');
 });

package/build/cjs/menu-item/features/is_clickable/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('a MenuItem with onClick handler and value is rendered', () => {
   cy.visitStory('MenuItem', 'With On Click And Value');
 });

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

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

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

@@ -4,62 +4,44 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.WithTarget = exports.WithSuffix = exports.WithOnClickAndValue = exports.WithLabel = exports.WithIcon = exports.WithHref = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _index = require("../index.js");
-
 var _menuItem = require("./menu-item.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 window.onClick = window.Cypress && window.Cypress.cy.stub();
-var _default = {
+var _default = exports.default = {
   title: 'MenuItem',
   component: _menuItem.MenuItem,
   decorators: [story => /*#__PURE__*/_react.default.createElement(_index.Menu, null, story())]
 };
-exports.default = _default;
-
 const WithLabel = () => /*#__PURE__*/_react.default.createElement(_menuItem.MenuItem, {
   label: "label"
 });
-
 exports.WithLabel = WithLabel;
-
 const WithOnClickAndValue = () => /*#__PURE__*/_react.default.createElement(_menuItem.MenuItem, {
   value: "Value",
   onClick: window.onClick,
   label: "Menu item"
 });
-
 exports.WithOnClickAndValue = WithOnClickAndValue;
-
 const WithHref = () => /*#__PURE__*/_react.default.createElement(_menuItem.MenuItem, {
   href: "url.test",
   label: "Menu item"
 });
-
 exports.WithHref = WithHref;
-
 const WithTarget = () => /*#__PURE__*/_react.default.createElement(_menuItem.MenuItem, {
   href: "url.test",
   target: "_blank",
   label: "Menu item"
 });
-
 exports.WithTarget = WithTarget;
-
 const WithIcon = () => /*#__PURE__*/_react.default.createElement(_menuItem.MenuItem, {
   icon: /*#__PURE__*/_react.default.createElement("div", null, "Icon"),
   label: "Menu item"
 });
-
 exports.WithIcon = WithIcon;
-
 const WithSuffix = () => /*#__PURE__*/_react.default.createElement(_menuItem.MenuItem, {
   suffix: "Suffix",
   label: "Menu item"
 });
-
 exports.WithSuffix = WithSuffix;