@dhis2-ui/menu 9.9.1 → 9.10.0

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

@@ -46,7 +46,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';

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) {

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

@@ -34,7 +34,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';

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) {

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.0",
     "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.0",
+        "@dhis2-ui/divider": "9.10.0",
+        "@dhis2-ui/layer": "9.10.0",
+        "@dhis2-ui/popper": "9.10.0",
+        "@dhis2-ui/portal": "9.10.0",
+        "@dhis2/ui-constants": "9.10.0",
+        "@dhis2/ui-icons": "9.10.0",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },