@dhis2-ui/menu 9.9.1 → 9.10.1

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

@@ -1,5 +1,7 @@
 "use strict";
 
+var _input = require("@dhis2-ui/input");
+
 var _react = require("@testing-library/react");
 
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
@@ -46,7 +48,7 @@ describe('Menu Component', () => {
     expect(menuElement.prop('role')).toBe('menu');
     expect(menuItem.childAt(0).props().role).toBe('menuitem');
     expect(menuItem.childAt(0).prop('aria-label')).toBe('Menu item');
-    expect(menuDivider.prop('role')).toBe('separator');
+    expect(menuDivider.find('[role="separator"]').exists()).toBe(true);
   });
   it('Empty menu has role menu', () => {
     const menuDataTest = 'data-test-menu';
@@ -231,4 +233,32 @@ describe('Menu Component', () => {
 
     expect(plainListItem.parentElement).not.toHaveFocus();
   });
+  it('does not hijack input change value if space entered [bug]', () => {
+    const onChange = jest.fn();
+    const {
+      getByPlaceholderText
+    } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_menu.Menu, {
+      dataTest: menuDataTest,
+      dense: false
+    }, /*#__PURE__*/_react2.default.createElement(_menuItem.MenuItem, {
+      value: "myValue",
+      label: "Click menu item"
+    }), /*#__PURE__*/_react2.default.createElement(_input.Input, {
+      onChange: onChange,
+      placeholder: "test"
+    })));
+    const inputField = getByPlaceholderText('test');
+    inputField.focus();
+
+    _userEvent.default.keyboard('t');
+
+    _userEvent.default.keyboard('e');
+
+    _userEvent.default.keyboard(' ');
+
+    _userEvent.default.keyboard('st');
+
+    expect(inputField.value).toBe('te st');
+    expect(onChange).toHaveBeenCalled();
+  });
 });

package/build/cjs/menu/helpers.js

@@ -14,8 +14,18 @@ const isValidMenuItemNode = node => {
     return isValidMenuItemNode(node.firstElementChild);
   }
 
-  const role = node.getAttribute('role');
-  return role && isMenuItem(role);
+  const role = node.getAttribute('role'); // for h1 - h6 headings since their heading role is not explicitly set
+  // style elements do not have roles
+
+  if (node.nodeName.startsWith('H') || node.nodeName === 'STYLE') {
+    return false;
+  }
+
+  if (role) {
+    return isMenuItem(role);
+  } else {
+    console.warn('Missing: role attribute on the menu child');
+  }
 };
 
 const getFocusableItemsIndices = elements => {

package/build/cjs/menu/menu.js

@@ -32,23 +32,20 @@ const Menu = _ref => {
     menuRef,
     focusedIndex
   } = (0, _useMenu.useMenuNavigation)(children);
-
-  const childrenToRender = _react.Children.map(children, (child, index) => {
+  const childrenToRender = (0, _react.useMemo)(() => _react.Children.map(children, (child, index) => {
     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.
+    // 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') {
-      // remove non-native props from native HTML elements
-      delete childProps.hideDivider;
-      delete childProps.dense;
-      delete childProps.active; // all ul children must be li elements
-      // add tabindex for focus to those elements that are/contain a menuitem
-
+      // 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,
           tabIndex
@@ -59,15 +56,13 @@ const Menu = _ref => {
         }, /*#__PURE__*/(0, _react.cloneElement)(child, childProps));
       }
     } else {
-      // assign non-native props to custom elements
       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,
         tabIndex
       });
     }
-  });
-
+  }), [children, dense, focusedIndex]);
   return /*#__PURE__*/_react.default.createElement("ul", {
     "data-test": dataTest,
     role: "menu",

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

@@ -13,6 +13,7 @@ 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
 
   (0, _react.useEffect)(() => {
     if (menuRef) {
@@ -51,10 +52,11 @@ const useMenuNavigation = children => {
 
         case 'Enter':
         case ' ':
-          event.preventDefault();
-
           if (event.target.nodeName === 'LI') {
-            event.target.children[0].click();
+            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;

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

@@ -25,7 +25,6 @@ const MenuDivider = _ref => {
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("li", {
     "data-test": dataTest,
-    role: "separator",
     className: _style.default.dynamic([["591815244", [_uiConstants.colors.white]]]) + " " + (className || "")
   }, /*#__PURE__*/_react.default.createElement(_divider.Divider, {
     dense: dense

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

@@ -1,3 +1,4 @@
+import { Input } from '@dhis2-ui/input';
 import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { mount } from 'enzyme';
@@ -34,7 +35,7 @@ describe('Menu Component', () => {
     expect(menuElement.prop('role')).toBe('menu');
     expect(menuItem.childAt(0).props().role).toBe('menuitem');
     expect(menuItem.childAt(0).prop('aria-label')).toBe('Menu item');
-    expect(menuDivider.prop('role')).toBe('separator');
+    expect(menuDivider.find('[role="separator"]').exists()).toBe(true);
   });
   it('Empty menu has role menu', () => {
     const menuDataTest = 'data-test-menu';
@@ -193,4 +194,27 @@ describe('Menu Component', () => {
 
     expect(plainListItem.parentElement).not.toHaveFocus();
   });
+  it('does not hijack input change value if space entered [bug]', () => {
+    const onChange = jest.fn();
+    const {
+      getByPlaceholderText
+    } = render( /*#__PURE__*/React.createElement(Menu, {
+      dataTest: menuDataTest,
+      dense: false
+    }, /*#__PURE__*/React.createElement(MenuItem, {
+      value: "myValue",
+      label: "Click menu item"
+    }), /*#__PURE__*/React.createElement(Input, {
+      onChange: onChange,
+      placeholder: "test"
+    })));
+    const inputField = getByPlaceholderText('test');
+    inputField.focus();
+    userEvent.keyboard('t');
+    userEvent.keyboard('e');
+    userEvent.keyboard(' ');
+    userEvent.keyboard('st');
+    expect(inputField.value).toBe('te st');
+    expect(onChange).toHaveBeenCalled();
+  });
 });

package/build/es/menu/helpers.js

@@ -7,8 +7,18 @@ const isValidMenuItemNode = node => {
     return isValidMenuItemNode(node.firstElementChild);
   }
 
-  const role = node.getAttribute('role');
-  return role && isMenuItem(role);
+  const role = node.getAttribute('role'); // for h1 - h6 headings since their heading role is not explicitly set
+  // style elements do not have roles
+
+  if (node.nodeName.startsWith('H') || node.nodeName === 'STYLE') {
+    return false;
+  }
+
+  if (role) {
+    return isMenuItem(role);
+  } else {
+    console.warn('Missing: role attribute on the menu child');
+  }
 };
 
 export const getFocusableItemsIndices = elements => {

package/build/es/menu/menu.js

@@ -1,6 +1,6 @@
 import _JSXStyle from "styled-jsx/style";
 import PropTypes from 'prop-types';
-import React, { Children, cloneElement, isValidElement } from 'react';
+import React, { Children, cloneElement, isValidElement, useMemo } from 'react';
 import { hasMenuItemRole } from './helpers.js';
 import { useMenuNavigation } from './use-menu.js';
 
@@ -15,22 +15,20 @@ const Menu = _ref => {
     menuRef,
     focusedIndex
   } = useMenuNavigation(children);
-  const childrenToRender = Children.map(children, (child, index) => {
+  const childrenToRender = useMemo(() => Children.map(children, (child, index) => {
     if (! /*#__PURE__*/isValidElement(child)) {
       return child;
     }
 
     const tabIndex = index === focusedIndex ? 0 : -1;
     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') {
-      // remove non-native props from native HTML elements
-      delete childProps.hideDivider;
-      delete childProps.dense;
-      delete childProps.active; // all ul children must be li elements
-      // add tabindex for focus to those elements that are/contain a menuitem
-
+      // 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 hasMenuItemRole(child.props.children[0]) ? /*#__PURE__*/cloneElement(child, { ...childProps,
           tabIndex
@@ -41,14 +39,13 @@ const Menu = _ref => {
         }, /*#__PURE__*/cloneElement(child, childProps));
       }
     } else {
-      // assign non-native props to custom elements
       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__*/cloneElement(child, { ...childProps,
         tabIndex
       });
     }
-  });
+  }), [children, dense, focusedIndex]);
   return /*#__PURE__*/React.createElement("ul", {
     "data-test": dataTest,
     role: "menu",

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

@@ -4,6 +4,7 @@ export const useMenuNavigation = children => {
   const menuRef = useRef(null);
   const [focusableItemsIndices, setFocusableItemsIndices] = useState(null);
   const [activeItemIndex, setActiveItemIndex] = useState(-1); // Initializes the indices for focusable items
+  // focusable items have the role of menuitem || menuitemcheckbox || menuitemradio
 
   useEffect(() => {
     if (menuRef) {
@@ -42,10 +43,11 @@ export const useMenuNavigation = children => {
 
         case 'Enter':
         case ' ':
-          event.preventDefault();
-
           if (event.target.nodeName === 'LI') {
-            event.target.children[0].click();
+            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;

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

@@ -12,7 +12,6 @@ const MenuDivider = _ref => {
   } = _ref;
   return /*#__PURE__*/React.createElement("li", {
     "data-test": dataTest,
-    role: "separator",
     className: _JSXStyle.dynamic([["591815244", [colors.white]]]) + " " + (className || "")
   }, /*#__PURE__*/React.createElement(Divider, {
     dense: dense

package/package.json

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