@dhis2-ui/menu 9.10.3 → 9.11.0

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

@@ -0,0 +1,58 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+
+var _react2 = _interopRequireDefault(require("react"));
+
+var _menuItem = require("../../menu-item/menu-item.js");
+
+var _flyoutMenu = require("../flyout-menu.js");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+describe('Flyout Menu Component', () => {
+  it('can handle navigation of submenus', () => {
+    const {
+      getByText,
+      queryByText,
+      getAllByRole
+    } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_flyoutMenu.FlyoutMenu, null, /*#__PURE__*/_react2.default.createElement(_menuItem.MenuItem, {
+      label: "Item 1"
+    }), /*#__PURE__*/_react2.default.createElement(_menuItem.MenuItem, {
+      label: "Item 2"
+    }, /*#__PURE__*/_react2.default.createElement(_menuItem.MenuItem, {
+      label: "Item 2 a"
+    }))));
+    const itemOne = getByText(/Item 1/i);
+    const itemTwo = getByText(/Item 2/i);
+    let submenuChild = queryByText(/Item 2 a/i);
+    const menuItems = getAllByRole('menuitem');
+    expect(menuItems.length).toBe(2);
+    expect(menuItems[0]).toBe(itemOne.parentNode);
+    expect(menuItems[1]).toBe(itemTwo.parentNode);
+    expect(submenuChild).not.toBeInTheDocument();
+
+    _userEvent.default.tab();
+
+    expect(menuItems[0].parentNode).toHaveFocus();
+    expect(menuItems[1].parentNode).not.toHaveFocus();
+
+    _userEvent.default.keyboard('{ArrowDown}');
+
+    expect(menuItems[0].parentNode).not.toHaveFocus();
+    expect(menuItems[1].parentNode).toHaveFocus();
+
+    _userEvent.default.keyboard('{ArrowRight}');
+
+    submenuChild = getByText(/Item 2 a/i);
+    expect(submenuChild).toBeInTheDocument();
+    expect(submenuChild.parentElement.parentElement).toHaveFocus();
+
+    _userEvent.default.keyboard('{ArrowLeft}');
+
+    expect(queryByText(/Item 2 a/i)).not.toBeInTheDocument();
+    expect(menuItems[1].parentNode).toHaveFocus();
+  });
+});

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

@@ -28,7 +28,8 @@ const FlyoutMenu = _ref => {
     dataTest,
     dense,
     maxHeight,
-    maxWidth
+    maxWidth,
+    closeMenu
   } = _ref;
   const [openedSubMenu, setOpenedSubMenu] = (0, _react.useState)(null);
 
@@ -37,8 +38,40 @@ const FlyoutMenu = _ref => {
     setOpenedSubMenu(toggleValue);
   };
 
+  const divRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    if (!divRef.current) {
+      return;
+    }
+
+    const div = divRef.current;
+
+    const handleFocus = event => {
+      if (event.target === div) {
+        if (div !== null && div !== void 0 && div.children && div.children.length > 0) {
+          div.children[0].focus();
+        }
+      }
+    };
+
+    const handleKeyDown = event => {
+      if (event.key === 'Escape') {
+        event.preventDefault();
+        closeMenu && closeMenu();
+      }
+    };
+
+    div.addEventListener('focus', handleFocus);
+    div.addEventListener('keydown', handleKeyDown);
+    return () => {
+      div.removeEventListener('focus', handleFocus);
+      div.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [closeMenu]);
   return /*#__PURE__*/_react.default.createElement("div", {
     "data-test": dataTest,
+    tabIndex: 0,
+    ref: divRef,
     className: _style.default.dynamic([["3833750986", [_uiConstants.colors.white, _uiConstants.colors.grey200, _uiConstants.elevations.e300, dense ? '128' : '180', maxWidth, maxHeight, _uiConstants.spacers.dp4]]]) + " " + (className || "")
   }, /*#__PURE__*/_react.default.createElement(_index.Menu, {
     dense: dense
@@ -61,6 +94,9 @@ FlyoutMenu.propTypes = {
   /** Typically, but not limited to, `MenuItem` components */
   children: _propTypes.default.node,
   className: _propTypes.default.string,
+
+  /** when Escape key is pressed, this function is called to close the flyout menu */
+  closeMenu: _propTypes.default.func,
   dataTest: _propTypes.default.string,
 
   /** Menu uses smaller dimensions */

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

@@ -202,7 +202,9 @@ const DropDownMenu = args => {
   }, /*#__PURE__*/_react.default.createElement(_popper.Popper, {
     reference: ref,
     placement: "bottom-start"
-  }, /*#__PURE__*/_react.default.createElement(_flyoutMenu.FlyoutMenu, args, /*#__PURE__*/_react.default.createElement(_menu.MenuItem, {
+  }, /*#__PURE__*/_react.default.createElement(_flyoutMenu.FlyoutMenu, _extends({}, args, {
+    closeMenu: toggle
+  }), /*#__PURE__*/_react.default.createElement(_menu.MenuItem, {
     label: "Item 1"
   }), /*#__PURE__*/_react.default.createElement(_menu.MenuItem, {
     label: "Item 2"

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

@@ -65,7 +65,7 @@ const useMenuNavigation = children => {
           break;
       }
     }
-  }, [activeItemIndex, focusableItemsIndices]); // 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) {

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

@@ -76,11 +76,56 @@ const MenuItem = _ref2 => {
     tabIndex
   } = _ref2;
   const menuItemRef = (0, _react.useRef)();
+  const [openSubMenus, setOpenSubMenus] = (0, _react.useState)([]);
+  (0, _react.useEffect)(() => {
+    // track open submenus
+    setOpenSubMenus(document.querySelectorAll('[data-submenu-open=true]'));
+  }, []);
+  (0, _react.useEffect)(() => {
+    if (!menuItemRef.current) {
+      return;
+    }
+
+    const menuItem = menuItemRef.current;
+
+    const handleKeyDown = event => {
+      var _openSubMenus, _openSubMenus2;
+
+      const firstChild = event.target.children[0];
+      const hasSubMenu = firstChild === null || firstChild === void 0 ? void 0 : firstChild.getAttribute('aria-haspopup');
+
+      switch (event.key) {
+        // for submenus
+        case 'ArrowRight':
+          event.preventDefault();
+
+          if (hasSubMenu) {
+            firstChild.click();
+          }
+
+          break;
+
+        case 'ArrowLeft':
+        case 'Escape':
+          // close flyout menu
+          event.preventDefault();
+          (_openSubMenus = openSubMenus[openSubMenus.length - 1]) === null || _openSubMenus === void 0 ? void 0 : _openSubMenus.focus();
+          (_openSubMenus2 = openSubMenus[openSubMenus.length - 1]) === null || _openSubMenus2 === void 0 ? void 0 : _openSubMenus2.children[0].click();
+          break;
+      }
+    };
+
+    menuItem.addEventListener('keydown', handleKeyDown);
+    return () => {
+      menuItem.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [openSubMenus]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("li", {
     ref: menuItemRef,
     "data-test": dataTest,
     role: "presentation",
     tabIndex: tabIndex,
+    "data-submenu-open": children && showSubMenu,
     className: "jsx-".concat(_menuItemStyles.default.__hash) + " " + ((0, _classnames.default)(className, {
       destructive,
       disabled,

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

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

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

@@ -1,7 +1,7 @@
 import _JSXStyle from "styled-jsx/style";
 import { colors, elevations, spacers } from '@dhis2/ui-constants';
 import PropTypes from 'prop-types';
-import React, { Children, cloneElement, isValidElement, useState } from 'react';
+import React, { Children, cloneElement, isValidElement, useEffect, useRef, useState } from 'react';
 import { Menu } from '../index.js';
 
 const FlyoutMenu = _ref => {
@@ -11,7 +11,8 @@ const FlyoutMenu = _ref => {
     dataTest,
     dense,
     maxHeight,
-    maxWidth
+    maxWidth,
+    closeMenu
   } = _ref;
   const [openedSubMenu, setOpenedSubMenu] = useState(null);
 
@@ -20,8 +21,40 @@ const FlyoutMenu = _ref => {
     setOpenedSubMenu(toggleValue);
   };
 
+  const divRef = useRef(null);
+  useEffect(() => {
+    if (!divRef.current) {
+      return;
+    }
+
+    const div = divRef.current;
+
+    const handleFocus = event => {
+      if (event.target === div) {
+        if (div !== null && div !== void 0 && div.children && div.children.length > 0) {
+          div.children[0].focus();
+        }
+      }
+    };
+
+    const handleKeyDown = event => {
+      if (event.key === 'Escape') {
+        event.preventDefault();
+        closeMenu && closeMenu();
+      }
+    };
+
+    div.addEventListener('focus', handleFocus);
+    div.addEventListener('keydown', handleKeyDown);
+    return () => {
+      div.removeEventListener('focus', handleFocus);
+      div.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [closeMenu]);
   return /*#__PURE__*/React.createElement("div", {
     "data-test": dataTest,
+    tabIndex: 0,
+    ref: divRef,
     className: _JSXStyle.dynamic([["3833750986", [colors.white, colors.grey200, elevations.e300, dense ? '128' : '180', maxWidth, maxHeight, spacers.dp4]]]) + " " + (className || "")
   }, /*#__PURE__*/React.createElement(Menu, {
     dense: dense
@@ -43,6 +76,9 @@ FlyoutMenu.propTypes = {
   /** Typically, but not limited to, `MenuItem` components */
   children: PropTypes.node,
   className: PropTypes.string,
+
+  /** when Escape key is pressed, this function is called to close the flyout menu */
+  closeMenu: PropTypes.func,
   dataTest: PropTypes.string,
 
   /** Menu uses smaller dimensions */

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

@@ -167,7 +167,9 @@ export const DropDownMenu = args => {
   }, /*#__PURE__*/React.createElement(Popper, {
     reference: ref,
     placement: "bottom-start"
-  }, /*#__PURE__*/React.createElement(FlyoutMenu, args, /*#__PURE__*/React.createElement(MenuItem, {
+  }, /*#__PURE__*/React.createElement(FlyoutMenu, _extends({}, args, {
+    closeMenu: toggle
+  }), /*#__PURE__*/React.createElement(MenuItem, {
     label: "Item 1"
   }), /*#__PURE__*/React.createElement(MenuItem, {
     label: "Item 2"

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

@@ -56,7 +56,7 @@ export const useMenuNavigation = children => {
           break;
       }
     }
-  }, [activeItemIndex, focusableItemsIndices]); // 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
 
   useEffect(() => {
     if (!menuRef) {

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

@@ -4,7 +4,7 @@ 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 React, { useEffect, useRef, useState } from 'react';
 import { FlyoutMenu } from '../index.js';
 import styles from './menu-item.styles.js';
 
@@ -55,11 +55,56 @@ 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,
+    "data-submenu-open": children && showSubMenu,
     className: "jsx-".concat(styles.__hash) + " " + (cx(className, {
       destructive,
       disabled,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/menu",
-    "version": "9.10.3",
+    "version": "9.11.0",
     "description": "UI Menu",
     "repository": {
         "type": "git",
@@ -33,13 +33,13 @@
     },
     "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.0",
+        "@dhis2-ui/divider": "9.11.0",
+        "@dhis2-ui/layer": "9.11.0",
+        "@dhis2-ui/popper": "9.11.0",
+        "@dhis2-ui/portal": "9.11.0",
+        "@dhis2/ui-constants": "9.11.0",
+        "@dhis2/ui-icons": "9.11.0",
         "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