carbon-react 147.10.0 → 148.0.0

package/lib/components/help/help.component.js

@@ -95,7 +95,7 @@ exports.Help = Help;
 if (process.env.NODE_ENV !== "production") {
   Help.propTypes = {
     "ariaLabel": _propTypes.default.string,
-    "as": _propTypes.default.oneOf(["a", "abbr", "address", "animate", "animateMotion", "animateTransform", "area", "article", "aside", "audio", "b", "base", "bdi", "bdo", "big", "blockquote", "body", "br", "button", "canvas", "caption", "circle", "cite", "clipPath", "code", "col", "colgroup", "data", "datalist", "dd", "defs", "del", "desc", "details", "dfn", "dialog", "div", "dl", "dt", "ellipse", "em", "embed", "feBlend", "feColorMatrix", "feComponentTransfer", "feComposite", "feConvolveMatrix", "feDiffuseLighting", "feDisplacementMap", "feDistantLight", "feDropShadow", "feFlood", "feFuncA", "feFuncB", "feFuncG", "feFuncR", "feGaussianBlur", "feImage", "feMerge", "feMergeNode", "feMorphology", "feOffset", "fePointLight", "feSpecularLighting", "feSpotLight", "feTile", "feTurbulence", "fieldset", "figcaption", "figure", "filter", "footer", "foreignObject", "form", "g", "h1", "h2", "h3", "h4", "h5", "h6", "head", "header", "hgroup", "hr", "html", "i", "iframe", "image", "img", "input", "ins", "kbd", "keygen", "label", "legend", "li", "line", "linearGradient", "link", "main", "map", "mark", "marker", "mask", "menu", "menuitem", "meta", "metadata", "meter", "mpath", "nav", "noindex", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "path", "pattern", "picture", "polygon", "polyline", "pre", "progress", "q", "radialGradient", "rect", "rp", "rt", "ruby", "s", "samp", "script", "section", "select", "slot", "small", "source", "span", "stop", "strong", "style", "sub", "summary", "sup", "svg", "switch", "symbol", "table", "tbody", "td", "template", "text", "textarea", "textPath", "tfoot", "th", "thead", "time", "title", "tr", "track", "tspan", "u", "ul", "use", "var", "video", "view", "wbr", "webview"]),
+    "as": _propTypes.default.oneOf(["a", "abbr", "address", "animate", "animateMotion", "animateTransform", "area", "article", "aside", "audio", "b", "base", "bdi", "bdo", "big", "blockquote", "body", "br", "button", "canvas", "caption", "center", "circle", "cite", "clipPath", "code", "col", "colgroup", "data", "datalist", "dd", "defs", "del", "desc", "details", "dfn", "dialog", "div", "dl", "dt", "ellipse", "em", "embed", "feBlend", "feColorMatrix", "feComponentTransfer", "feComposite", "feConvolveMatrix", "feDiffuseLighting", "feDisplacementMap", "feDistantLight", "feDropShadow", "feFlood", "feFuncA", "feFuncB", "feFuncG", "feFuncR", "feGaussianBlur", "feImage", "feMerge", "feMergeNode", "feMorphology", "feOffset", "fePointLight", "feSpecularLighting", "feSpotLight", "feTile", "feTurbulence", "fieldset", "figcaption", "figure", "filter", "footer", "foreignObject", "form", "g", "h1", "h2", "h3", "h4", "h5", "h6", "head", "header", "hgroup", "hr", "html", "i", "iframe", "image", "img", "input", "ins", "kbd", "keygen", "label", "legend", "li", "line", "linearGradient", "link", "main", "map", "mark", "marker", "mask", "menu", "menuitem", "meta", "metadata", "meter", "mpath", "nav", "noindex", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "path", "pattern", "picture", "polygon", "polyline", "pre", "progress", "q", "radialGradient", "rect", "rp", "rt", "ruby", "s", "samp", "script", "search", "section", "select", "set", "slot", "small", "source", "span", "stop", "strong", "style", "sub", "summary", "sup", "svg", "switch", "symbol", "table", "tbody", "td", "template", "text", "textarea", "textPath", "tfoot", "th", "thead", "time", "title", "tr", "track", "tspan", "u", "ul", "use", "var", "video", "view", "wbr", "webview"]),
     "children": _propTypes.default.node,
     "helpId": _propTypes.default.string,
     "href": _propTypes.default.string,

package/lib/components/hr/hr.component.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { MarginProps } from "styled-system";
 export interface HrProps extends MarginProps {
     /** Set whether the component should be recognised by assistive technologies */

package/lib/components/image/image.style.d.ts

@@ -33,5 +33,5 @@ declare const StyledImage: import("styled-components").StyledComponent<"div", an
     bottom: string | undefined;
     left: string | undefined;
     as?: string | undefined;
-} & StyledImageProps, "hidden" | "children" | "as" | "left" | "right" | "top" | "bottom" | "src" | "position">;
+} & StyledImageProps, "hidden" | "children" | "left" | "right" | "top" | "bottom" | "src" | "as" | "position">;
 export { StyledImage };

package/lib/components/link/link.component.d.ts

@@ -24,8 +24,6 @@ export interface LinkProps extends StyledLinkProps, React.AriaAttributes {
     ariaLabel?: string;
     /** allows to set rel property in <a> tag */
     rel?: string;
-    /** @ignore @private internal prop to be set when no href or onClick passed */
-    placeholderTabIndex?: boolean;
     /** @ignore @private internal prop to be set when no aria-label should be specified */
     removeAriaLabelOnIcon?: boolean;
     /**
@@ -35,5 +33,5 @@ export interface LinkProps extends StyledLinkProps, React.AriaAttributes {
      * Sets className for component. INTERNAL USE ONLY. */
     className?: string;
 }
-export declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLButtonElement | HTMLLinkElement>>;
+export declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 export default Link;

package/lib/components/link/link.component.js

@@ -33,7 +33,6 @@ const Link = exports.Link = /*#__PURE__*/_react.default.forwardRef(({
   target,
   variant = "default",
   isDarkBackground,
-  placeholderTabIndex,
   removeAriaLabelOnIcon,
   className,
   ...rest
@@ -91,9 +90,6 @@ const Link = exports.Link = /*#__PURE__*/_react.default.forwardRef(({
       ...buttonProps
     } : {
       ...componentProps,
-      ...(placeholderTabIndex && href === undefined && !onClick && {
-        tabIndex: -1
-      }),
       "data-role": "link-anchor"
     }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderLinkIcon(), /*#__PURE__*/_react.default.createElement(_link.StyledContent, null, isSkipLink ? l.link.skipLinkLabel() : children), renderLinkIcon("right")));
   };
@@ -122,14 +118,18 @@ if (process.env.NODE_ENV !== "production") {
     "aria-activedescendant": _propTypes.default.string,
     "aria-atomic": _propTypes.default.oneOfType([_propTypes.default.oneOf(["false", "true"]), _propTypes.default.bool]),
     "aria-autocomplete": _propTypes.default.oneOf(["both", "inline", "list", "none"]),
+    "aria-braillelabel": _propTypes.default.string,
+    "aria-brailleroledescription": _propTypes.default.string,
     "aria-busy": _propTypes.default.oneOfType([_propTypes.default.oneOf(["false", "true"]), _propTypes.default.bool]),
     "aria-checked": _propTypes.default.oneOfType([_propTypes.default.oneOf(["false", "mixed", "true"]), _propTypes.default.bool]),
     "aria-colcount": _propTypes.default.number,
     "aria-colindex": _propTypes.default.number,
+    "aria-colindextext": _propTypes.default.string,
     "aria-colspan": _propTypes.default.number,
     "aria-controls": _propTypes.default.string,
     "aria-current": _propTypes.default.oneOfType([_propTypes.default.oneOf(["date", "false", "location", "page", "step", "time", "true"]), _propTypes.default.bool]),
     "aria-describedby": _propTypes.default.string,
+    "aria-description": _propTypes.default.string,
     "aria-details": _propTypes.default.string,
     "aria-disabled": _propTypes.default.oneOfType([_propTypes.default.oneOf(["false", "true"]), _propTypes.default.bool]),
     "aria-dropeffect": _propTypes.default.oneOf(["copy", "execute", "link", "move", "none", "popup"]),
@@ -159,6 +159,7 @@ if (process.env.NODE_ENV !== "production") {
     "aria-roledescription": _propTypes.default.string,
     "aria-rowcount": _propTypes.default.number,
     "aria-rowindex": _propTypes.default.number,
+    "aria-rowindextext": _propTypes.default.string,
     "aria-rowspan": _propTypes.default.number,
     "aria-selected": _propTypes.default.oneOfType([_propTypes.default.oneOf(["false", "true"]), _propTypes.default.bool]),
     "aria-setsize": _propTypes.default.number,
@@ -180,7 +181,6 @@ if (process.env.NODE_ENV !== "production") {
     "onClick": _propTypes.default.func,
     "onKeyDown": _propTypes.default.func,
     "onMouseDown": _propTypes.default.func,
-    "placeholderTabIndex": _propTypes.default.bool,
     "rel": _propTypes.default.string,
     "removeAriaLabelOnIcon": _propTypes.default.bool,
     "target": _propTypes.default.string,

package/lib/components/link/link.style.js

@@ -138,6 +138,13 @@ const StyledLink = exports.StyledLink = _styledComponents.default.span`
         }
       `}
 
+      ${!disabled && (0, _styledComponents.css)`
+        > a:any-link:hover,
+        > button:hover {
+          cursor: pointer;
+        }
+      `}
+
       > a,
       > button {
         text-decoration: ${hasContent ? "underline" : "none"};
@@ -156,10 +163,6 @@ const StyledLink = exports.StyledLink = _styledComponents.default.span`
           `}
         }
 
-        &:hover {
-          cursor: pointer;
-        }
-
         &:focus {
           color: var(--colorsActionMajorYin090);
           outline: none;

package/lib/components/loader-star/internal/star.component.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface StarProps {
     starContainerClassName: "star-1" | "star-2" | "star-3";
     gradientId: "gradient1" | "gradient2" | "gradient3";

package/lib/components/loader-star/loader-star.component.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
 export interface LoaderStarProps extends Omit<TagProps, "data-component"> {
     /**

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

@@ -9,6 +9,7 @@ export interface MenuContextProps {
     registerItem?: (id: string) => void;
     unregisterItem?: (id: string) => void;
     focusId?: string;
+    updateFocusId?: (id: string) => void;
 }
 declare const _default: React.Context<MenuContextProps>;
 export default _default;

package/lib/components/menu/__internal__/submenu/submenu.component.d.ts

@@ -41,5 +41,5 @@ export interface SubmenuProps {
     /** Sets the max-width of the submenu container element */
     submenuMaxWidth?: string;
 }
-declare const Submenu: React.ForwardRefExoticComponent<SubmenuProps & React.RefAttributes<HTMLAnchorElement & HTMLButtonElement & HTMLDivElement>>;
+declare const Submenu: React.ForwardRefExoticComponent<SubmenuProps & React.RefAttributes<HTMLAnchorElement>>;
 export default Submenu;

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

@@ -12,11 +12,11 @@ var _events = _interopRequireDefault(require("../../../../__internal__/utils/hel
 var _menu = _interopRequireDefault(require("../menu.context"));
 var _keyboardNavigation = require("../keyboard-navigation");
 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");
 var _useStableCallback = _interopRequireDefault(require("../../../../hooks/__internal__/useStableCallback/useStableCallback"));
 var _fixedNavigationBar = _interopRequireDefault(require("../../../navigation-bar/__internal__/fixed-navigation-bar.context"));
+var _focusTrapUtils = require("../../../../__internal__/focus-trap/focus-trap-utils");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -55,7 +55,6 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
   const [characterString, setCharacterString] = (0, _react.useState)("");
   const [applyFocusRadius, setApplyFocusRadius] = (0, _react.useState)(false);
   const [applyFocusRadiusToLastItem, setApplyFocusRadiusToLastItem] = (0, _react.useState)(false);
-  const shiftTabPressed = (0, _react.useRef)(false);
   const focusFirstMenuItemOnOpen = (0, _react.useRef)(false);
   const numberOfChildren = submenuItemIds.length;
   const {
@@ -146,7 +145,6 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
     }
   }, [submenuOpen, onSubmenuOpen]);
   const closeSubmenu = (0, _react.useCallback)(() => {
-    shiftTabPressed.current = false;
     setSubmenuOpen(false);
     setSubmenuFocusId(null);
     if (onSubmenuClose) {
@@ -175,38 +173,20 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
       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)) {
+        if (_events.default.isDownKey(event) || _events.default.isUpKey(event)) {
           event.preventDefault();
           setSubmenuFocusId(submenuItemIds[0]);
           return;
         }
       }
-      if (_events.default.isTabKey(event) && !_events.default.isShiftKey(event)) {
-        if (nextIndex === numberOfChildren - 1) {
-          closeSubmenu();
-          return;
-        }
-        shiftTabPressed.current = false;
-        nextIndex += 1;
-      }
-      if (_events.default.isTabKey(event) && _events.default.isShiftKey(event)) {
-        if (nextIndex <= 0) {
-          closeSubmenu();
-          return;
-        }
-        shiftTabPressed.current = true;
-        nextIndex -= 1;
-      }
       if (_events.default.isDownKey(event)) {
         event.preventDefault();
-        shiftTabPressed.current = false;
         if (nextIndex < numberOfChildren - 1) {
           nextIndex += 1;
         }
       }
       if (_events.default.isUpKey(event)) {
         event.preventDefault();
-        shiftTabPressed.current = false;
         setApplyFocusRadius(false);
         if (nextIndex > 0) {
           nextIndex -= 1;
@@ -219,17 +199,16 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
       }
       if (_events.default.isHomeKey(event)) {
         event.preventDefault();
-        shiftTabPressed.current = false;
+        event.stopPropagation();
         nextIndex = 0;
       }
       if (_events.default.isEndKey(event)) {
         event.preventDefault();
-        shiftTabPressed.current = false;
+        event.stopPropagation();
         nextIndex = numberOfChildren - 1;
       }
       if (event.key.length === 1) {
         event.stopPropagation();
-        shiftTabPressed.current = false;
         if (characterTimer.current) {
           restartCharacterTimeout();
         } else {
@@ -239,7 +218,7 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
       } else {
         setCharacterString("");
       }
-      const eventIsFromInput = _events.default.composedPath(event).find(p => p.getAttribute("data-element") === "input" || p.getAttribute("data-element") === "input-icon-toggle");
+      const eventIsFromInput = _events.default.composedPath(event.nativeEvent).find(p => p instanceof HTMLElement && (p.getAttribute("data-element") === "input" || p.getAttribute("data-element") === "input-icon-toggle"));
       if (!eventIsFromInput) {
         if (_events.default.isEnterKey(event)) {
           /* timeout enforces that the "closeSubmenu" method will be run after 
@@ -259,7 +238,7 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
 
       /* istanbul ignore else */
       if (items) {
-        setSubmenuItemIds(Array.from(items).map(item => item.getAttribute("id")));
+        setSubmenuItemIds(Array.from(items).filter(item => item.querySelector(_focusTrapUtils.defaultFocusableSelectors)).map(item => item.getAttribute("id")));
       }
     }
   }, [children, submenuOpen, submenuRef]);
@@ -269,11 +248,6 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
       setSubmenuFocusId(submenuItemIds[0]);
     }
   }, [submenuOpen, submenuFocusId, submenuItemIds]);
-  const handleClickAway = () => {
-    document.removeEventListener("click", handleClickAway);
-    closeSubmenu();
-  };
-  const handleClickInside = (0, _useClickAwayListener.default)(handleClickAway);
   const handleClick = event => {
     openSubmenu();
     if (onClick) {
@@ -290,13 +264,17 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
       }
     }
   }, [submenuRef, characterString, submenuItemIds]);
+  const handleSubmenuBlur = event => {
+    if (!event.currentTarget.contains(event.relatedTarget)) {
+      closeSubmenu();
+    }
+  };
   if (inFullscreenView) {
     return /*#__PURE__*/_react.default.createElement(_submenu.StyledSubmenuWrapper, {
       "data-component": "submenu-wrapper",
       inFullscreenView: inFullscreenView,
       asPassiveItem: asPassiveItem,
-      menuType: menuContext.menuType,
-      onClick: handleClickInside
+      menuType: menuContext.menuType
     }, /*#__PURE__*/_react.default.createElement(_menuItem.default, _extends({}, rest, {
       onClick: asPassiveItem ? undefined : onClick,
       className: className,
@@ -328,7 +306,6 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
     onMouseOver: !clickToOpen ? () => openSubmenu() : undefined,
     onMouseLeave: () => closeSubmenu(),
     isSubmenuOpen: submenuOpen,
-    onClick: handleClickInside,
     ref: setSubmenuRef
   }, /*#__PURE__*/_react.default.createElement(_menuItem.default, _extends({}, rest, {
     className: className,
@@ -356,14 +333,14 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
     maxHeight: submenuMaxHeight,
     applyFocusRadiusStyling: applyFocusRadius,
     applyFocusRadiusStylingToLastItem: applyFocusRadiusToLastItem,
-    submenuMaxWidth: submenuMaxWidth
+    submenuMaxWidth: submenuMaxWidth,
+    onBlur: handleSubmenuBlur
   }, /*#__PURE__*/_react.default.createElement(_submenu2.default.Provider, {
     value: {
       submenuFocusId,
       handleKeyDown,
       blockIndex,
       updateFocusId: setSubmenuFocusId,
-      shiftTabPressed: shiftTabPressed.current,
       submenuHasMaxWidth: !!submenuMaxWidth
     }
   }, children)));

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

@@ -2,8 +2,7 @@ import React from "react";
 export interface SubmenuContextProps {
     submenuFocusId?: string | null;
     updateFocusId?: (id: string) => void;
-    handleKeyDown?: (event: React.KeyboardEvent<HTMLAnchorElement>) => void;
-    shiftTabPressed?: boolean;
+    handleKeyDown?: (event: React.KeyboardEvent<HTMLAnchorElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
     blockIndex?: number;
     submenuHasMaxWidth?: boolean;
 }

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

@@ -158,7 +158,6 @@ const StyledSubmenu = exports.StyledSubmenu = _styledComponents.default.ul`
       display: flex;
       align-items: center;
       white-space: nowrap;
-      cursor: pointer;
 
       ${inFullscreenView && (0, _styledComponents.css)`
         white-space: normal;
@@ -178,16 +177,6 @@ const StyledSubmenu = exports.StyledSubmenu = _styledComponents.default.ul`
           background-color: ${_menu2.default[menuType].submenuItemBackground};
         }
 
-        > a:hover,
-        > button:hover {
-          background-color: transparent;
-          color: var(--colorsComponentsMenuYang100);
-
-          > [data-component="icon"] {
-            color: var(--colorsComponentsMenuYang100);
-          }
-        }
-
         > a,
         > button {
           padding: 11px 16px 12px;

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

@@ -7,6 +7,7 @@ exports.default = exports.MenuItem = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _invariant = _interopRequireDefault(require("invariant"));
+var _focusTrapUtils = require("../../../__internal__/focus-trap/focus-trap-utils");
 var _utils = require("../../../style/utils");
 var _menuItem = _interopRequireDefault(require("./menu-item.style"));
 var _events = _interopRequireDefault(require("../../../__internal__/utils/helpers/events"));
@@ -48,6 +49,7 @@ const MenuItem = ({
   !(icon || children) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, "Either prop `icon` must be defined or this node must have `children`.") : (0, _invariant.default)(false) : void 0;
   !(children || ariaLabel || typeof submenu === "string") ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, "If no text is provided an `ariaLabel` should be given to facilitate accessibility.") : (0, _invariant.default)(false) : void 0;
   !(typeof submenu === "boolean" || submenu === undefined || children && typeof submenu === "string" && submenu.length) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, "You should not pass `children` when `submenu` is an empty string") : (0, _invariant.default)(false) : void 0;
+  const menuItemId = (0, _react.useRef)((0, _guid.default)());
   const {
     isChildOfSegment,
     overriddenVariant
@@ -57,24 +59,21 @@ const MenuItem = ({
     registerItem,
     unregisterItem,
     focusId,
-    menuType,
-    openSubmenuId
+    updateFocusId,
+    menuType
   } = (0, _react.useContext)(_menu.default);
-  const menuItemId = (0, _react.useRef)((0, _guid.default)());
   const submenuContext = (0, _react.useContext)(_submenu2.default);
+  const isInSubmenu = Object.keys(submenuContext).length > 0;
   const {
     submenuFocusId,
     updateFocusId: updateSubmenuFocusId,
     handleKeyDown: handleSubmenuKeyDown,
-    shiftTabPressed,
     submenuHasMaxWidth
   } = 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);
-  inputRef.current = ref.current ? ref.current.querySelector("[data-element='input']") : null;
-  const focusRef = inputRef.current ? inputRef : ref;
+  const ref = (0, _react.useRef)(null);
+  const firstFocusableChild = ref.current?.querySelector(_focusTrapUtils.defaultFocusableSelectors) ?? null;
   (0, _react.useEffect)(() => {
     const id = menuItemId.current;
 
@@ -90,41 +89,35 @@ const MenuItem = ({
     };
   }, [registerItem, unregisterItem]);
   (0, _react.useEffect)(() => {
-    const inputIcon = ref.current?.querySelector("[data-element='input-icon-toggle']");
-    if (!openSubmenuId && focusFromSubmenu === undefined && focusFromMenu) {
-      /* istanbul ignore else */
-      if (focusRef.current) {
-        focusRef.current?.focus();
-      }
-    } else if (focusFromSubmenu && !(shiftTabPressed && inputIcon?.getAttribute("tabindex") === "0")) {
-      /* istanbul ignore else */
-      if (focusRef.current) {
-        focusRef.current?.focus();
+    if (focusFromMenu && !focusFromSubmenu || focusFromSubmenu) {
+      if (firstFocusableChild) {
+        firstFocusableChild.focus();
+        return;
       }
+      ref.current?.focus();
     }
-  }, [openSubmenuId, focusFromMenu, focusFromSubmenu, shiftTabPressed, focusRef]);
-  const updateFocusOnClick = (0, _react.useCallback)(() => {
-    if (updateSubmenuFocusId) {
-      updateSubmenuFocusId(menuItemId.current);
-    }
-  }, [updateSubmenuFocusId]);
-  const handleKeyDown = (0, _react.useCallback)(event => {
-    if (onKeyDown) {
-      onKeyDown(event);
+  }, [firstFocusableChild, focusFromMenu, focusFromSubmenu]);
+  const handleFocus = event => {
+    if (isInSubmenu) {
+      event.stopPropagation();
+      updateSubmenuFocusId?.(menuItemId.current);
+    } else {
+      updateFocusId?.(menuItemId.current);
     }
-    if (ref.current && _events.default.isEscKey(event)) {
+  };
+  const handleKeyDown = event => {
+    onKeyDown?.(event);
+    if (_events.default.isEscKey(event)) {
       ref.current?.focus();
     }
-    if (handleSubmenuKeyDown) {
-      handleSubmenuKeyDown(event);
-    }
-  }, [onKeyDown, handleSubmenuKeyDown]);
+    handleSubmenuKeyDown?.(event);
+  };
   const elementProps = {
     className: href || onClick ? "carbon-menu-item--has-link" : "",
-    href,
+    href: firstFocusableChild ? undefined : href,
+    onClick: firstFocusableChild ? undefined : onClick,
     target,
     rel,
-    onClick,
     icon,
     removeAriaLabelOnIcon: true,
     selected,
@@ -137,8 +130,7 @@ const MenuItem = ({
   }
   const getTitle = title => maxWidth && typeof title === "string" ? title : undefined;
   const itemMaxWidth = !inFullscreenView ? maxWidth : undefined;
-  const asPassiveItem = !(onClick || href);
-  const hasInput = !!inputRef.current;
+  const asPassiveItem = !(onClick || href || firstFocusableChild);
   if (submenu) {
     return /*#__PURE__*/_react.default.createElement(_menu2.StyledMenuItem, _extends({
       "data-component": "menu-item",
@@ -146,12 +138,12 @@ const MenuItem = ({
       "data-role": dataRole,
       menuType: menuType,
       title: getTitle(submenu),
-      maxWidth: itemMaxWidth,
-      onClick: updateFocusOnClick
+      maxWidth: itemMaxWidth
     }, rest, {
       inFullscreenView: inFullscreenView,
       id: menuItemId.current,
-      as: as
+      as: as,
+      onFocus: handleFocus
     }), /*#__PURE__*/_react.default.createElement(_submenu.default, _extends({}, typeof submenu !== "boolean" && {
       title: submenu
     }, {
@@ -169,19 +161,20 @@ const MenuItem = ({
     }, rest), children));
   }
   const paddingProps = (0, _utils.filterStyledSystemPaddingProps)(rest);
+  const hasInput = !!ref.current?.querySelector("[data-element='input']");
   return /*#__PURE__*/_react.default.createElement(_menu2.StyledMenuItem, _extends({
     "data-component": "menu-item",
     "data-element": dataElement,
     "data-role": dataRole,
     menuType: menuType,
-    inSubmenu: !!handleSubmenuKeyDown,
+    inSubmenu: isInSubmenu,
     title: getTitle(children),
     maxWidth: itemMaxWidth
   }, rest, {
     inFullscreenView: inFullscreenView && !Object.keys(submenuContext).length,
     id: menuItemId.current,
-    onClick: updateFocusOnClick,
-    as: as
+    as: as,
+    onFocus: handleFocus
   }), /*#__PURE__*/_react.default.createElement(_menuItem.default, _extends({
     menuType: menuType,
     "data-role": "menu-item-wrapper"
@@ -190,12 +183,12 @@ const MenuItem = ({
     ariaLabel: ariaLabel,
     maxWidth: !submenuHasMaxWidth ? itemMaxWidth : undefined,
     inFullscreenView: inFullscreenView,
-    asPassiveItem: asPassiveItem,
-    placeholderTabIndex: asPassiveItem
+    asPassiveItem: asPassiveItem
   }, paddingProps, {
     asDiv: hasInput || as === "div",
+    hasFocusableChild: !!firstFocusableChild,
     hasInput: hasInput,
-    inSubmenu: !!handleSubmenuKeyDown
+    inSubmenu: isInSubmenu
   }), children));
 };
 exports.MenuItem = MenuItem;

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

@@ -9,15 +9,15 @@ interface StyledMenuItemWrapperProps extends Pick<MenuWithChildren, "href" | "sh
     isOpen?: boolean;
     inFullscreenView?: boolean;
     asPassiveItem?: boolean;
-    placeholderTabIndex?: boolean;
     icon?: string;
     ariaLabel?: string;
     asDiv?: boolean;
+    hasFocusableChild?: boolean;
     hasInput?: boolean;
     menuItemVariant?: Pick<MenuWithChildren, "variant">["variant"];
     inSubmenu?: boolean;
 }
 declare const StyledMenuItemWrapper: import("styled-components").StyledComponent<"a", any, {
-    as: import("react").ForwardRefExoticComponent<import("../../link").LinkProps & import("react").RefAttributes<HTMLButtonElement | HTMLLinkElement>>;
+    as: import("react").ForwardRefExoticComponent<import("../../link").LinkProps & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 } & StyledMenuItemWrapperProps, "as">;
 export default StyledMenuItemWrapper;