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

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

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

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

@@ -1,12 +1,23 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import { Tag } from '@dhis2/ui';
 import { colors } from '@dhis2/ui-constants';
 import { IconApps24, IconVisualizationColumn24, IconLaunch16 } from '@dhis2/ui-icons';
 import React, { useState } from 'react';
 import { Menu } from '../index.js';
 import { MenuItem } from './menu-item.js';
-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";
+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'
+\`\`\`
+`;
 export default {
   title: 'Menu Item',
   component: MenuItem,
@@ -21,9 +32,7 @@ export default {
     }
   }
 };
-
 const Template = args => /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement(MenuItem, args));
-
 export const Default = Template.bind({});
 export const Active = Template.bind({});
 Active.args = {
@@ -121,9 +130,7 @@ OnClick.args = {
 };
 export const ToggleMenuItem = args => {
   const [on, setOn] = useState(false);
-
   const toggleOn = () => setOn(!on);
-
   const checkMarkStyle = {
     fontSize: '24px',
     lineHeight: '24px'
@@ -148,9 +155,7 @@ ToggleMenuItem.parameters = {
 };
 export const SubMenus = args => {
   const [showSubMenu, setShowSubMenu] = React.useState(false);
-
   const toggleSubMenu = () => setShowSubMenu(!showSubMenu);
-
   return /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement(MenuItem, _extends({
     showSubMenu: showSubMenu,
     toggleSubMenu: toggleSubMenu

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

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

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

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

@@ -1,10 +1,9 @@
 import _JSXStyle from "styled-jsx/style";
-import { Divider } from '@dhis2-ui/divider';
 import { colors, spacers } from '@dhis2/ui-constants';
+import { Divider } from '@dhis2-ui/divider';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
-
 const MenuSectionHeader = _ref => {
   let {
     className,
@@ -25,9 +24,8 @@ const MenuSectionHeader = _ref => {
   }, label), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "1160864328",
     dynamic: [colors.white, spacers.dp8, spacers.dp16, spacers.dp8, spacers.dp16, colors.grey700, spacers.dp8, spacers.dp12, spacers.dp4, spacers.dp12]
-  }, ["li.__jsx-style-dynamic-selector{list-style:none;background-color:".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.dp16, " ").concat(spacers.dp8, " ").concat(spacers.dp16, ";font-size:13px;line-height:16px;font-weight:500;color:").concat(colors.grey700, ";}"), "li.dense.__jsx-style-dynamic-selector h6.__jsx-style-dynamic-selector{padding:".concat(spacers.dp8, " ").concat(spacers.dp12, " ").concat(spacers.dp4, " ").concat(spacers.dp12, ";}")]));
+  }, [`li.__jsx-style-dynamic-selector{list-style:none;background-color:${colors.white};-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;padding:0;line-height:0;}`, `h6.__jsx-style-dynamic-selector{margin:0;padding:${spacers.dp8} ${spacers.dp16} ${spacers.dp8} ${spacers.dp16};font-size:13px;line-height:16px;font-weight:500;color:${colors.grey700};}`, `li.dense.__jsx-style-dynamic-selector h6.__jsx-style-dynamic-selector{padding:${spacers.dp8} ${spacers.dp12} ${spacers.dp4} ${spacers.dp12};}`]));
 };
-
 MenuSectionHeader.defaultProps = {
   dataTest: 'dhis2-uicore-menusectionheader'
 };

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

@@ -2,7 +2,13 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { Menu, MenuItem } from '../index.js';
 import { MenuSectionHeader } from './menu-section-header.js';
-const description = "\nItems in a menu can be split into separate sections by using Dividers. Group relevant menu items together to help the user understand the options quickly. A Divider can be used alone. If using a 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";
+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'
+\`\`\`
+`;
 export default {
   title: 'Menu Section Header',
   component: MenuSectionHeader,
@@ -17,7 +23,6 @@ export default {
     }
   }
 };
-
 const Template = _ref => {
   let {
     menuArgs,
@@ -29,7 +34,6 @@ const Template = _ref => {
     label: "Menu item below"
   }));
 };
-
 Template.propTypes = {
   menuArgs: PropTypes.shape()
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/menu",
-    "version": "9.10.3",
+    "version": "9.11.1-beta.1",
     "description": "UI Menu",
     "repository": {
         "type": "git",
@@ -22,24 +22,24 @@
         "access": "public"
     },
     "scripts": {
-        "start": "start-storybook -c ../../storybook/config --port 5000",
+        "start": "storybook dev -c ../../storybook/config --port 5000",
         "build": "d2-app-scripts build",
         "test": "d2-app-scripts test --jestConfig ../../jest.config.shared.js"
     },
     "peerDependencies": {
-        "react": "^16.8",
-        "react-dom": "^16.8",
+        "react": "^16.13",
+        "react-dom": "^16.13",
         "styled-jsx": "^4"
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/card": "9.10.3",
-        "@dhis2-ui/divider": "9.10.3",
-        "@dhis2-ui/layer": "9.10.3",
-        "@dhis2-ui/popper": "9.10.3",
-        "@dhis2-ui/portal": "9.10.3",
-        "@dhis2/ui-constants": "9.10.3",
-        "@dhis2/ui-icons": "9.10.3",
+        "@dhis2-ui/card": "9.11.1-beta.1",
+        "@dhis2-ui/divider": "9.11.1-beta.1",
+        "@dhis2-ui/layer": "9.11.1-beta.1",
+        "@dhis2-ui/popper": "9.11.1-beta.1",
+        "@dhis2-ui/portal": "9.11.1-beta.1",
+        "@dhis2/ui-constants": "9.11.1-beta.1",
+        "@dhis2/ui-icons": "9.11.1-beta.1",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },

package/types/index.d.ts

@@ -6,6 +6,10 @@ export interface FlyoutMenuProps {
      */
     children?: React.ReactNode
     className?: string
+    /**
+     * On Escape key press, this function is called
+     */
+    closeMenu?: () => void
     dataTest?: string
     /**
      * Menu uses smaller dimensions

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

@@ -1,11 +0,0 @@
-"use strict";
-
-var _react = require("@storybook/react");
-
-var _react2 = _interopRequireDefault(require("react"));
-
-var _index = require("./index.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-(0, _react.storiesOf)('Menu', module).add('With children', () => /*#__PURE__*/_react2.default.createElement(_index.Menu, null, "I am a child"));

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

@@ -1,4 +0,0 @@
-import { storiesOf } from '@storybook/react';
-import React from 'react';
-import { Menu } from './index.js';
-storiesOf('Menu', module).add('With children', () => /*#__PURE__*/React.createElement(Menu, null, "I am a child"));