carbon-react 114.13.1 → 114.13.2

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

@@ -19,16 +19,16 @@ var _events = _interopRequireDefault(require("../../../../__internal__/utils/hel
 
 var _menu = _interopRequireDefault(require("../../menu.context"));
 
-var _menuItem2 = _interopRequireDefault(require("../../menu-item"));
-
 var _keyboardNavigation = require("../keyboard-navigation");
 
-var _scrollableBlock = _interopRequireDefault(require("../../scrollable-block"));
-
 var _submenu2 = _interopRequireDefault(require("./submenu.context"));
 
 var _useClickAwayListener = _interopRequireDefault(require("../../../../hooks/__internal__/useClickAwayListener"));
 
+var _guid = _interopRequireDefault(require("../../../../__internal__/utils/helpers/guid"));
+
+var _locators = require("../locators");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -53,50 +53,44 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
   onSubmenuOpen,
   onSubmenuClose,
   onClick,
-  indexInMenu,
   ...rest
 }, ref) => {
-  const [blockDoubleFocus, setBlockDoubleFocus] = (0, _react.useState)(false);
+  const submenuRef = (0, _react.useRef)(null);
+  const submenuId = (0, _react.useRef)((0, _guid.default)());
   const menuContext = (0, _react.useContext)(_menu.default);
   const {
     inFullscreenView,
-    openSubmenuIndex,
-    setOpenSubmenuIndex
+    openSubmenuId,
+    setOpenSubmenuId
   } = menuContext;
   const [submenuOpen, setSubmenuOpen] = (0, _react.useState)(false);
-  const [submenuFocusIndex, setSubmenuFocusIndex] = (0, _react.useState)(undefined);
+  const [submenuFocusId, setSubmenuFocusId] = (0, _react.useState)(null);
+  const [submenuItemIds, setSubmenuItemIds] = (0, _react.useState)([]);
   const [characterString, setCharacterString] = (0, _react.useState)("");
-
-  const formattedChildren = _react.default.Children.map(children, child => {
-    if (child.type === _scrollableBlock.default) {
-      const blockChildren = [...child.props.children];
-
-      if (child.props.parent) {
-        blockChildren.unshift( /*#__PURE__*/_react.default.createElement(_menuItem2.default, null, child.props.parent));
-      }
-
-      return blockChildren;
-    }
-
-    return child;
-  });
-
-  const arrayOfFormattedChildren = _react.default.Children.toArray(formattedChildren);
-
-  const numberOfChildren = (0, _react.useMemo)(() => _react.default.Children.count(formattedChildren), [formattedChildren]);
+  const shiftTabPressed = (0, _react.useRef)(false);
+  const registerItem = (0, _react.useCallback)(id => {
+    setSubmenuItemIds(prevState => {
+      return [...prevState, id];
+    });
+  }, []);
+  const unregisterItem = (0, _react.useCallback)(id => {
+    setSubmenuItemIds(prevState => {
+      return prevState.filter(itemId => itemId !== id);
+    });
+  }, []);
+  const numberOfChildren = submenuItemIds.length;
   const blockIndex = (0, _react.useMemo)(() => {
-    var _childrenArray$index;
-
-    const childrenArray = _react.default.Children.toArray(children);
+    if (submenuOpen && numberOfChildren) {
+      var _submenuRef$current, _submenuRef$current2;
 
-    let index = childrenArray.findIndex(item => item.type === _scrollableBlock.default);
-
-    if ((_childrenArray$index = childrenArray[index]) !== null && _childrenArray$index !== void 0 && _childrenArray$index.props.parent) {
-      index += 1;
+      const childrenArray = Array.from((_submenuRef$current = submenuRef.current) === null || _submenuRef$current === void 0 ? void 0 : _submenuRef$current.querySelectorAll(_locators.BLOCK_INDEX_SELECTOR));
+      const scrollableBlock = (_submenuRef$current2 = submenuRef.current) === null || _submenuRef$current2 === void 0 ? void 0 : _submenuRef$current2.querySelector(`[data-component='${_locators.SCROLLABLE_BLOCK}']`);
+      const index = childrenArray.indexOf(scrollableBlock);
+      return scrollableBlock !== null && scrollableBlock !== void 0 && scrollableBlock.querySelector(`[data-component='${_locators.SCROLLABLE_BLOCK_PARENT}']`) ? index + 1 : index;
     }
 
-    return index;
-  }, [children]);
+    return -1;
+  }, [submenuOpen, numberOfChildren]);
   const characterTimer = (0, _react.useRef)();
   const startCharacterTimeout = (0, _react.useCallback)(() => {
     characterTimer.current = setTimeout(() => {
@@ -109,83 +103,88 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
   }, [startCharacterTimeout]);
   const openSubmenu = (0, _react.useCallback)(() => {
     setSubmenuOpen(true);
-    setOpenSubmenuIndex(indexInMenu);
-    if (onSubmenuOpen) onSubmenuOpen();
-  }, [onSubmenuOpen, indexInMenu, setOpenSubmenuIndex]);
+    setOpenSubmenuId(submenuId.current);
+
+    if (onSubmenuOpen) {
+      onSubmenuOpen();
+    }
+  }, [onSubmenuOpen, setOpenSubmenuId]);
   const closeSubmenu = (0, _react.useCallback)(() => {
+    shiftTabPressed.current = false;
     setSubmenuOpen(false);
+    setSubmenuFocusId(null);
 
-    if (openSubmenuIndex === indexInMenu) {
-      setOpenSubmenuIndex(null);
+    if (onSubmenuClose) {
+      onSubmenuClose();
     }
 
-    if (onSubmenuClose) onSubmenuClose();
-    setSubmenuFocusIndex(undefined);
-    setBlockDoubleFocus(false);
     setCharacterString("");
-  }, [onSubmenuClose, setOpenSubmenuIndex, indexInMenu, openSubmenuIndex]);
+  }, [onSubmenuClose]);
   (0, _react.useEffect)(() => {
-    if (openSubmenuIndex !== indexInMenu) {
+    if (openSubmenuId && openSubmenuId !== submenuId.current) {
       closeSubmenu();
     }
-  }, [openSubmenuIndex, indexInMenu, closeSubmenu]);
-  const handleKeyDown = (0, _react.useCallback)((event, index = submenuFocusIndex) => {
+  }, [openSubmenuId, closeSubmenu]);
+  const findCurrentIndex = (0, _react.useCallback)(id => {
+    const index = submenuItemIds.findIndex(itemId => itemId === id);
+    return index === -1 ? 0 : index;
+  }, [submenuItemIds]);
+  const handleKeyDown = (0, _react.useCallback)(event => {
     if (!submenuOpen) {
       if (_events.default.isEnterKey(event) || _events.default.isSpaceKey(event) || _events.default.isDownKey(event) || _events.default.isUpKey(event)) {
         event.preventDefault();
         openSubmenu();
-
-        if (!href) {
-          setSubmenuFocusIndex(0);
-        }
-      }
-
-      if (!event.defaultPrevented) {
-        menuContext.handleKeyDown(event);
       }
     }
 
     if (submenuOpen) {
+      const index = findCurrentIndex(submenuFocusId);
       let nextIndex = index;
 
+      if (href && !submenuFocusId) {
+        if (_events.default.isDownKey(event) || _events.default.isUpKey(event) || _events.default.isTabKey(event) && !_events.default.isShiftKey(event)) {
+          event.preventDefault();
+          setSubmenuFocusId(submenuItemIds[0]);
+          return;
+        }
+      }
+
       if (_events.default.isTabKey(event) && !_events.default.isShiftKey(event)) {
-        if (index === numberOfChildren - 1) {
+        if (nextIndex === numberOfChildren - 1) {
           closeSubmenu();
           return;
         }
 
-        nextIndex = index + 1;
-        setBlockDoubleFocus(true);
+        shiftTabPressed.current = false;
+        nextIndex += 1;
       }
 
       if (_events.default.isTabKey(event) && _events.default.isShiftKey(event)) {
-        if (index === 0) {
+        if (nextIndex === 0) {
           closeSubmenu();
           return;
         }
 
-        nextIndex = index - 1;
-        setBlockDoubleFocus(true);
+        shiftTabPressed.current = true;
+        nextIndex -= 1;
       }
 
       if (_events.default.isDownKey(event)) {
         event.preventDefault();
+        shiftTabPressed.current = false;
 
-        if (index < numberOfChildren - 1) {
-          nextIndex = index + 1;
+        if (nextIndex < numberOfChildren - 1) {
+          nextIndex += 1;
         }
-
-        setBlockDoubleFocus(false);
       }
 
       if (_events.default.isUpKey(event)) {
         event.preventDefault();
+        shiftTabPressed.current = false;
 
-        if (index > 0) {
-          nextIndex = index - 1;
+        if (nextIndex > 0) {
+          nextIndex -= 1;
         }
-
-        setBlockDoubleFocus(false);
       }
 
       if (_events.default.isEscKey(event)) {
@@ -196,16 +195,19 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
 
       if (_events.default.isHomeKey(event)) {
         event.preventDefault();
+        shiftTabPressed.current = false;
         nextIndex = 0;
       }
 
       if (_events.default.isEndKey(event)) {
         event.preventDefault();
+        shiftTabPressed.current = false;
         nextIndex = numberOfChildren - 1;
       }
 
       if (event.key.length === 1) {
         event.stopPropagation();
+        shiftTabPressed.current = false;
 
         if (characterTimer.current) {
           restartCharacterTimeout();
@@ -224,31 +226,21 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
         setTimeout(() => closeSubmenu());
       }
 
-      if (href && index === undefined) {
-        if (_events.default.isEnterKey(event) || _events.default.isTabKey(event) && _events.default.isShiftKey(event)) {
-          closeSubmenu();
-          return;
-        }
-
-        if (_events.default.isSpaceKey(event) || _events.default.isDownKey(event) || _events.default.isUpKey(event) || _events.default.isTabKey(event)) {
-          nextIndex = 0;
-        }
-      } // Defensive check in case an unhandled key event from a child component
-      // has bubbled up
-
-
-      if (!nextIndex && nextIndex !== 0) return; // Check that next index contains a MenuItem
-      // If not, call handleKeyDown again
-
-      const nextChild = arrayOfFormattedChildren[nextIndex];
+      if (href && _events.default.isEnterKey(event)) {
+        closeSubmenu();
+        return;
+      }
 
-      if ((nextChild === null || nextChild === void 0 ? void 0 : nextChild.type) === _menuItem2.default) {
-        setSubmenuFocusIndex(nextIndex);
-      } else {
-        handleKeyDown(event, nextIndex);
+      if (nextIndex !== index) {
+        setSubmenuFocusId(submenuItemIds[nextIndex]);
       }
     }
-  }, [submenuFocusIndex, submenuOpen, href, menuContext, arrayOfFormattedChildren, numberOfChildren, openSubmenu, closeSubmenu, onKeyDown, characterString, restartCharacterTimeout, startCharacterTimeout]);
+  }, [submenuItemIds, submenuOpen, href, numberOfChildren, submenuFocusId, findCurrentIndex, openSubmenu, closeSubmenu, onKeyDown, characterString, restartCharacterTimeout, startCharacterTimeout]);
+  (0, _react.useEffect)(() => {
+    if (submenuOpen && !href && !submenuFocusId && submenuItemIds.length) {
+      setSubmenuFocusId(submenuItemIds[0]);
+    }
+  }, [submenuOpen, href, submenuFocusId, submenuItemIds]);
 
   const handleClickAway = () => {
     document.removeEventListener("click", handleClickAway);
@@ -265,11 +257,16 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
 
   (0, _react.useEffect)(() => {
     if (characterString !== "") {
-      const nextIndex = (0, _keyboardNavigation.characterNavigation)(characterString, _react.default.Children.toArray(formattedChildren), submenuFocusIndex);
-      setSubmenuFocusIndex(nextIndex);
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
+      var _submenuRef$current3;
 
-  }, [characterString]);
+      const submenuChildren = Array.from((_submenuRef$current3 = submenuRef.current) === null || _submenuRef$current3 === void 0 ? void 0 : _submenuRef$current3.querySelectorAll(_locators.ALL_CHILDREN_SELECTOR));
+      const nextItem = (0, _keyboardNavigation.characterNavigation)(characterString, submenuChildren);
+
+      if (nextItem) {
+        setSubmenuFocusId(nextItem.id);
+      }
+    }
+  }, [characterString, submenuItemIds]);
   const handleClickInside = (0, _useClickAwayListener.default)(handleClickAway);
 
   if (inFullscreenView) {
@@ -293,15 +290,17 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
       "data-component": "submenu",
       variant: variant,
       menuType: menuContext.menuType,
-      inFullscreenView: inFullscreenView
-    }, _react.default.Children.map(children, (child, index) => /*#__PURE__*/_react.default.createElement(_submenu2.default.Provider, {
+      inFullscreenView: inFullscreenView,
+      ref: submenuRef
+    }, /*#__PURE__*/_react.default.createElement(_submenu2.default.Provider, {
       value: {
-        isFocused: submenuFocusIndex === index,
-        focusIndex: submenuFocusIndex,
         handleKeyDown,
-        blockIndex
+        blockIndex,
+        registerItem,
+        unregisterItem,
+        updateFocusId: setSubmenuFocusId
       }
-    }, child))));
+    }, children)));
   }
 
   return /*#__PURE__*/_react.default.createElement(_submenu.StyledSubmenuWrapper, {
@@ -309,7 +308,8 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
     onMouseOver: !clickToOpen ? () => openSubmenu() : undefined,
     onMouseLeave: () => closeSubmenu(),
     isSubmenuOpen: submenuOpen,
-    onClick: handleClickInside
+    onClick: handleClickInside,
+    ref: submenuRef
   }, /*#__PURE__*/_react.default.createElement(_menuItem.default, _extends({}, rest, {
     className: className,
     menuType: menuContext.menuType,
@@ -333,16 +333,17 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
     variant: variant,
     menuType: menuContext.menuType,
     role: blockIndex === 0 ? "presentation" : "list"
-  }, _react.default.Children.map(children, (child, index) => /*#__PURE__*/_react.default.createElement(_submenu2.default.Provider, {
+  }, /*#__PURE__*/_react.default.createElement(_submenu2.default.Provider, {
     value: {
-      isFocused: !blockDoubleFocus && submenuFocusIndex === index,
-      focusIndex: submenuFocusIndex,
+      submenuFocusId,
       handleKeyDown,
       blockIndex,
-      updateFocusIndex: setSubmenuFocusIndex,
-      itemIndex: child.type === _menuItem2.default ? index : undefined
+      registerItem,
+      unregisterItem,
+      updateFocusId: setSubmenuFocusId,
+      shiftTabPressed: shiftTabPressed.current
     }
-  }, child))));
+  }, children)));
 });
 
 Submenu.propTypes = {
@@ -393,10 +394,7 @@ Submenu.propTypes = {
   onSubmenuClose: _propTypes.default.func,
 
   /** Callback triggered when the top-level menu item is clicked */
-  onClick: _propTypes.default.func,
-
-  /** index of child in the parent menu */
-  indexInMenu: _propTypes.default.number
+  onClick: _propTypes.default.func
 };
 var _default = Submenu;
 exports.default = _default;

package/lib/components/menu/menu-full-screen/menu-full-screen.component.js

@@ -109,8 +109,7 @@ const MenuFullscreen = ({
     value: {
       inFullscreenView: true,
       menuType,
-      inMenu: true,
-      setOpenSubmenuIndex: () => {}
+      inMenu: true
     }
   }, _react.default.Children.map(children, (child, index) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, child, index < _react.default.Children.count(children) - 1 && /*#__PURE__*/_react.default.createElement(_menuDivider.default, null))))))))));
 };

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 {