carbon-react 114.13.1 → 114.13.2

package/lib/components/menu/menu.component.js

@@ -19,11 +19,11 @@ var _propTypes2 = _interopRequireDefault(require("@styled-system/prop-types"));
 
 var _menu = require("./menu.style");
 
-var _keyboardNavigation = require("./__internal__/keyboard-navigation");
+var _menu2 = _interopRequireDefault(require("./menu.context"));
 
-var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/events"));
+var _keyboardNavigation = require("./__internal__/keyboard-navigation");
 
-var _menu2 = _interopRequireDefault(require("./menu.context"));
+var _locators = require("./__internal__/locators");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -38,52 +38,48 @@ const Menu = ({
   children,
   ...rest
 }) => {
-  const [focusedItemIndex, setFocusedItemIndex] = (0, _react.useState)(undefined);
-  const [openSubmenuIndex, setOpenSubmenuIndex] = (0, _react.useState)(null);
+  const [openSubmenuId, setOpenSubmenuId] = (0, _react.useState)(null);
   const ref = (0, _react.useRef)();
-  const handleKeyDown = (0, _react.useCallback)(event => {
-    const newIndex = (0, _keyboardNavigation.menuKeyboardNavigation)(event, _react.default.Children.toArray(children));
-    setFocusedItemIndex(newIndex);
-  }, [children]);
-  const onClickOutside = (0, _react.useCallback)(event => {
-    // Reset the state of the menu when clicking elsewhere
-    if (!_events.default.composedPath(event).includes(ref.current)) {
-      setFocusedItemIndex(undefined);
-      document.removeEventListener("click", onClickOutside);
-    }
+  const [focusId, setFocusId] = (0, _react.useState)(undefined);
+  const [itemIds, setItemIds] = (0, _react.useState)([]);
+  const registerItem = (0, _react.useCallback)(id => {
+    setItemIds(prevState => {
+      return [...prevState, id];
+    });
+  }, []);
+  const unregisterItem = (0, _react.useCallback)(id => {
+    setItemIds(prevState => {
+      return prevState.filter(itemId => itemId !== id);
+    });
   }, []);
-  (0, _react.useEffect)(() => {
-    document.addEventListener("click", onClickOutside);
-    return function cleanup() {
-      document.removeEventListener("click", onClickOutside);
-    };
-  });
+
+  const handleKeyDown = event => {
+    /* istanbul ignore else */
+    if (ref.current) {
+      const focusableItems = Array.from(ref.current.querySelectorAll(_locators.MENU_ITEM_CHILDREN_LOCATOR));
+      const newIndex = (0, _keyboardNavigation.menuKeyboardNavigation)(event, focusableItems);
+      setFocusId(itemIds[newIndex]);
+    }
+  };
+
   return /*#__PURE__*/_react.default.createElement(_menu.StyledMenuWrapper, _extends({
     "data-component": "menu",
     menuType: menuType
   }, rest, {
     ref: ref,
-    role: "list"
+    role: "list",
+    onKeyDown: handleKeyDown
   }), /*#__PURE__*/_react.default.createElement(_menu2.default.Provider, {
     value: {
       menuType,
-      handleKeyDown,
       inMenu: true,
-      openSubmenuIndex,
-      setOpenSubmenuIndex
+      openSubmenuId,
+      setOpenSubmenuId,
+      focusId,
+      registerItem,
+      unregisterItem
     }
-  }, _react.default.Children.map(children, (child, index) => {
-    const isFocused = focusedItemIndex === index;
-
-    if ( /*#__PURE__*/_react.default.isValidElement(child) && child.type.displayName === "MenuItem" && child.props.submenu) {
-      return /*#__PURE__*/_react.default.cloneElement(child, {
-        isFocused,
-        indexInMenu: index
-      });
-    }
-
-    return child;
-  })));
+  }, children));
 };
 
 Menu.propTypes = {

package/lib/components/menu/menu.context.d.ts

@@ -1,8 +1,8 @@
 declare var _default: React.Context<{
     menuType: string;
     inMenu: boolean;
-    openSubmenuIndex: null;
-    setOpenSubmenuIndex: () => void;
+    openSubmenuId: null;
+    setOpenSubmenuId: () => void;
 }>;
 export default _default;
 import React from "react";

package/lib/components/menu/menu.context.js

@@ -12,8 +12,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var _default = /*#__PURE__*/_react.default.createContext({
   menuType: "light",
   inMenu: false,
-  openSubmenuIndex: null,
-  setOpenSubmenuIndex:
+  openSubmenuId: null,
+  setOpenSubmenuId:
   /* istanbul ignore next */
   () => {}
 });

package/lib/components/menu/scrollable-block/scrollable-block.component.js

@@ -13,8 +13,6 @@ var _menu = _interopRequireDefault(require("../menu.context"));
 
 var _menuItem = _interopRequireDefault(require("../menu-item"));
 
-var _submenu = _interopRequireDefault(require("../__internal__/submenu/submenu.context"));
-
 var _scrollableBlock = _interopRequireDefault(require("./scrollable-block.style"));
 
 var _box = _interopRequireDefault(require("../../box"));
@@ -35,13 +33,9 @@ const ScrollableBlock = ({
   parentVariant,
   ...rest
 }) => {
-  const menuContext = (0, _react.useContext)(_menu.default);
-  const submenuContext = (0, _react.useContext)(_submenu.default);
   const {
-    blockIndex,
-    focusIndex,
-    handleKeyDown
-  } = submenuContext;
+    menuType
+  } = (0, _react.useContext)(_menu.default);
   const scrollVariants = {
     light: "light",
     dark: "dark",
@@ -50,35 +44,22 @@ const ScrollableBlock = ({
   };
   return /*#__PURE__*/_react.default.createElement(_scrollableBlock.default, _extends({
     "data-component": "submenu-scrollable-block",
-    menuType: menuContext.menuType,
+    menuType: menuType,
     variant: variant
   }, rest), parent && /*#__PURE__*/_react.default.createElement(_menuItem.default, {
+    "data-component": "scrollable-block-parent",
     overrideColor: true,
     variant: parentVariant,
     as: "div",
     href: "#"
   }, parent), /*#__PURE__*/_react.default.createElement(_box.default, {
     overflowY: "scroll",
-    scrollVariant: scrollVariants[menuContext.menuType],
+    scrollVariant: scrollVariants[menuType],
     height: height,
     p: 0,
     as: "ul",
     role: "list"
-  }, _react.default.Children.map(children, (child, index) => {
-    let isFocused = false;
-    const blockItemFocused = focusIndex >= blockIndex;
-
-    if (blockItemFocused) {
-      isFocused = focusIndex - blockIndex === index;
-    }
-
-    return /*#__PURE__*/_react.default.createElement(_submenu.default.Provider, {
-      value: {
-        isFocused,
-        handleKeyDown
-      }
-    }, child);
-  })));
+  }, children));
 };
 
 ScrollableBlock.propTypes = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "114.13.1",
+  "version": "114.13.2",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",