carbon-react 114.12.3 → 114.13.2

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

@@ -27,7 +27,7 @@ var _submenu2 = _interopRequireDefault(require("../__internal__/submenu/submenu.
 
 var _menu2 = require("../menu.style");
 
-var _search = _interopRequireDefault(require("../../search"));
+var _guid = _interopRequireDefault(require("../../../__internal__/utils/helpers/guid"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -57,43 +57,70 @@ const MenuItem = ({
   onSubmenuClose,
   overrideColor,
   rel,
-  isFocused,
   ...rest
 }) => {
-  const menuContext = (0, _react.useContext)(_menu.default);
+  var _ref$current, _ref$current2;
+
+  const {
+    inFullscreenView,
+    registerItem,
+    unregisterItem,
+    focusId,
+    menuType,
+    openSubmenuId
+  } = (0, _react.useContext)(_menu.default);
+  const menuItemId = (0, _react.useRef)((0, _guid.default)());
   const submenuContext = (0, _react.useContext)(_submenu2.default);
-  const ref = (0, _react.useRef)(null);
-  const focusFromMenu = isFocused;
-  const focusFromSubmenu = submenuContext.isFocused;
-  const isChildSearch = (0, _react.useRef)(false);
-  const childRef = (0, _react.useRef)();
   const {
-    inFullscreenView
-  } = menuContext;
+    registerItem: registerSubmenuItem,
+    unregisterItem: unregisterSubmenuItem,
+    submenuFocusId,
+    updateFocusId: updateSubmenuFocusId,
+    handleKeyDown: handleSubmenuKeyDown,
+    shiftTabPressed
+  } = submenuContext;
+  const ref = (0, _react.useRef)(null);
+  const focusFromMenu = focusId === menuItemId.current;
+  const focusFromSubmenu = submenuFocusId ? submenuFocusId === menuItemId.current : undefined;
+  const inputRef = (0, _react.useRef)(null);
+  const inputIcon = (0, _react.useRef)(null);
+  inputIcon.current = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.querySelector("[data-element='input-icon-toggle']");
+  inputRef.current = (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.querySelector("[data-element='input']");
+  const focusRef = inputRef.current ? inputRef : ref;
+  (0, _react.useEffect)(() => {
+    const id = menuItemId.current;
 
-  const childrenItems = _react.default.Children.map(children, child => {
-    if ((child === null || child === void 0 ? void 0 : child.type) === _search.default) {
-      isChildSearch.current = true;
+    if (registerSubmenuItem) {
+      registerSubmenuItem(id);
+    } else if (registerItem) {
+      registerItem(id);
     }
 
-    return child;
-  });
-
-  const focusRef = isChildSearch.current ? childRef : ref;
+    return () => {
+      if (unregisterSubmenuItem) {
+        unregisterSubmenuItem(id);
+      } else if (unregisterItem) {
+        unregisterItem(id);
+      }
+    };
+  }, [registerSubmenuItem, registerItem, unregisterSubmenuItem, unregisterItem]);
   (0, _react.useEffect)(() => {
-    if (focusFromSubmenu === undefined && focusFromMenu) {
+    var _inputIcon$current;
+
+    if (!openSubmenuId && focusFromSubmenu === undefined && focusFromMenu) {
       focusRef.current.focus();
-    } else if (focusFromSubmenu) {
+    } else if (focusFromSubmenu && !(shiftTabPressed && ((_inputIcon$current = inputIcon.current) === null || _inputIcon$current === void 0 ? void 0 : _inputIcon$current.getAttribute("tabindex")) === "0")) {
       focusRef.current.focus();
     }
-  }, [focusFromMenu, focusFromSubmenu, focusRef]);
+  }, [openSubmenuId, focusFromMenu, focusFromSubmenu, inputIcon, shiftTabPressed, focusRef]);
   const updateFocusOnClick = (0, _react.useCallback)(() => {
-    /* istanbul ignore else */
-    if (submenuContext.updateFocusIndex) {
-      submenuContext.updateFocusIndex(submenuContext.itemIndex);
+    if (updateSubmenuFocusId) {
+      updateSubmenuFocusId(menuItemId.current);
     }
-  }, [submenuContext]);
+  }, [updateSubmenuFocusId]);
   const handleKeyDown = (0, _react.useCallback)(event => {
+    var _inputIcon$current2, _inputRef$current;
+
     if (onKeyDown) {
       onKeyDown(event);
     }
@@ -102,16 +129,16 @@ const MenuItem = ({
       ref.current.focus();
     }
 
-    if (submenuContext.handleKeyDown !== undefined) {
-      var _focusRef$current;
+    const shouldFocusIcon = ((_inputIcon$current2 = inputIcon.current) === null || _inputIcon$current2 === void 0 ? void 0 : _inputIcon$current2.getAttribute("tabindex")) === "0" && document.activeElement === inputRef.current && ((_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value); // let natural tab order move focus if input icon is tabbable
 
-      if (!(isChildSearch.current && document.activeElement === focusRef.current && (_focusRef$current = focusRef.current) !== null && _focusRef$current !== void 0 && _focusRef$current.value)) {
-        submenuContext.handleKeyDown(event);
-      }
-    } else {
-      menuContext.handleKeyDown(event);
+    if (_events.default.isTabKey(event) && (!_events.default.isShiftKey(event) && shouldFocusIcon || _events.default.isShiftKey(event) && document.activeElement === inputIcon.current)) {
+      return;
     }
-  }, [focusRef, menuContext, onKeyDown, submenuContext]);
+
+    if (handleSubmenuKeyDown) {
+      handleSubmenuKeyDown(event);
+    }
+  }, [onKeyDown, handleSubmenuKeyDown, inputIcon]);
   const classes = (0, _react.useMemo)(() => (0, _classnames.default)({
     "carbon-menu-item--has-link": href || onClick
   }), [href, onClick]);
@@ -120,7 +147,7 @@ const MenuItem = ({
     href,
     target,
     rel,
-    onClick: onClick || (isChildSearch.current ? updateFocusOnClick : undefined),
+    onClick: onClick || (inputRef.current ? updateFocusOnClick : undefined),
     icon,
     selected,
     variant,
@@ -128,11 +155,8 @@ const MenuItem = ({
     overrideColor,
     ref
   };
-  const clonedChildren = isChildSearch.current ? childrenItems.map(child => /*#__PURE__*/_react.default.cloneElement(child, {
-    ref: childRef
-  })) : children;
 
-  const getTitle = title => maxWidth && typeof title === "string" ? title : "";
+  const getTitle = title => maxWidth && typeof title === "string" ? title : undefined;
 
   const itemMaxWidth = !inFullscreenView ? maxWidth : undefined;
   const asPassiveItem = !(onClick || href);
@@ -140,13 +164,14 @@ const MenuItem = ({
   if (submenu) {
     return /*#__PURE__*/_react.default.createElement(_menu2.StyledMenuItem, _extends({
       "data-component": "menu-item",
-      menuType: menuContext.menuType,
+      menuType: menuType,
       display: "inline-block",
       title: getTitle(submenu),
       maxWidth: itemMaxWidth,
       onClick: updateFocusOnClick
     }, rest, {
-      inFullscreenView: inFullscreenView
+      inFullscreenView: inFullscreenView,
+      id: menuItemId.current
     }), /*#__PURE__*/_react.default.createElement(_submenu.default, _extends({}, typeof submenu !== "boolean" && {
       title: submenu
     }, {
@@ -158,29 +183,31 @@ const MenuItem = ({
       ariaLabel: ariaLabel,
       onSubmenuOpen: onSubmenuOpen,
       onSubmenuClose: onSubmenuClose
-    }, elementProps, rest), childrenItems));
+    }, elementProps, rest), children));
   }
 
   return /*#__PURE__*/_react.default.createElement(_menu2.StyledMenuItem, _extends({
     "data-component": "menu-item",
-    menuType: menuContext.menuType,
-    inSubmenu: submenuContext.handleKeyDown !== undefined,
+    menuType: menuType,
+    inSubmenu: !!handleSubmenuKeyDown,
     display: "inline-block",
     title: getTitle(children),
     maxWidth: itemMaxWidth
   }, rest, {
     inFullscreenView: inFullscreenView && !Object.keys(submenuContext).length,
-    menuOpen: menuOpen
+    menuOpen: menuOpen,
+    id: menuItemId.current
   }), /*#__PURE__*/_react.default.createElement(_menuItem.default, _extends({
-    as: isChildSearch.current ? "div" : _link.default,
-    isSearch: isChildSearch.current,
-    menuType: menuContext.menuType
+    as: inputRef.current ? "div" : _link.default,
+    isSearch: inputRef.current,
+    menuType: menuType
   }, elementProps, {
     ariaLabel: ariaLabel,
     maxWidth: maxWidth,
     inFullscreenView: inFullscreenView,
-    asPassiveItem: asPassiveItem
-  }), clonedChildren));
+    asPassiveItem: asPassiveItem,
+    placeholderTabIndex: asPassiveItem
+  }), children));
 };
 
 MenuItem.propTypes = {
@@ -269,10 +296,7 @@ MenuItem.propTypes = {
   overrideColor: _propTypes.default.bool,
 
   /** @ignore @private */
-  isFocused: _propTypes.default.bool,
-
-  /** @ignore @private */
-  indexInMenu: _propTypes.default.number
+  "data-component": _propTypes.default.string
 };
 MenuItem.displayName = "MenuItem";
 var _default = MenuItem;

package/lib/components/menu/menu-item/menu-item.d.ts

@@ -31,10 +31,14 @@ export interface MenuItemBaseProps extends LayoutProps, FlexboxProps {
   onSubmenuOpen?: () => void;
   /** Callback triggered when submenu closes. Only valid with submenu prop */
   onSubmenuClose?: () => void;
-  /** @ignore @private
-  private prop, used inside ScrollableBlock to ensure the MenuItem's color variant overrides the CSS
-  for other MenuItems inside the block */
+  /** 
+    @ignore @private
+    private prop, used inside ScrollableBlock to ensure the MenuItem's color variant overrides the CSS
+    for other MenuItems inside the block
+   */
   overrideColor?: boolean;
+  /** @private @ignore */
+  "data-component"?: string;
 }
 
 export interface MenuWithChildren extends MenuItemBaseProps {

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.12.3",
+  "version": "114.13.2",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",