carbon-react 119.7.2 → 119.9.0

package/esm/components/action-popover/action-popover-context.d.ts

@@ -1,7 +1,9 @@
 import React from "react";
+export declare type Alignment = "left" | "right";
 declare type ActionPopoverContextType = {
     setOpenPopover: (isOpen: boolean) => void;
     focusButton: () => void;
+    submenuPosition: Alignment;
     isOpenPopover: boolean;
 };
 declare const ActionPopoverContext: React.Context<ActionPopoverContextType | null>;

package/esm/components/action-popover/action-popover-item/action-popover-item.component.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import { Alignment } from "../action-popover-context";
 import { IconType } from "../../icon";
 export interface ActionPopoverItemProps {
     /** The text label to display for this Item */
@@ -20,10 +21,24 @@ export interface ActionPopoverItemProps {
     /** @ignore @private */
     focusItem?: boolean;
     /** @ignore @private */
-    horizontalAlignment?: "left" | "right";
+    horizontalAlignment?: Alignment;
+    /** @ignore @private */
+    childHasSubmenu?: boolean;
+    /** @ignore @private */
+    childHasIcon?: boolean;
+    /** @ignore @private */
+    currentSubmenuPosition?: Alignment;
+    /** @ignore @private */
+    setChildHasSubmenu?: (value: boolean) => void;
+    /** @ignore @private */
+    setChildHasIcon?: (value: boolean) => void;
+    /** @ignore @private */
+    setCurrentSubmenuPosition?: (value: Alignment) => void;
+    /** @ignore @private */
+    isASubmenu?: boolean;
 }
 export declare const ActionPopoverItem: {
-    ({ children, icon, disabled, onClick: onClickProp, submenu, placement, focusItem, download, href, horizontalAlignment, ...rest }: ActionPopoverItemProps): React.JSX.Element;
+    ({ children, icon, disabled, onClick: onClickProp, submenu, placement, focusItem, download, href, horizontalAlignment, childHasSubmenu, childHasIcon, currentSubmenuPosition, setChildHasSubmenu, setChildHasIcon, setCurrentSubmenuPosition, isASubmenu, ...rest }: ActionPopoverItemProps): React.JSX.Element;
     displayName: string;
 };
 export default ActionPopoverItem;

package/esm/components/action-popover/action-popover-item/action-popover-item.component.js

@@ -2,7 +2,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import React, { useCallback, useEffect, useRef, useState, useContext } from "react";
 import PropTypes from "prop-types";
 import invariant from "invariant";
-import { MenuItemIcon, SubMenuItemIcon, StyledMenuItem, StyledMenuItemWrapper } from "../action-popover.style";
+import { MenuItemIcon, SubMenuItemIcon, StyledMenuItem, StyledMenuItemInnerText, StyledMenuItemOuterContainer, StyledMenuItemWrapper } from "../action-popover.style";
 import Events from "../../../__internal__/utils/helpers/events";
 import createGuid from "../../../__internal__/utils/helpers/guid";
 import ActionPopoverContext from "../action-popover-context";
@@ -12,33 +12,22 @@ const INTERVAL = 150;
 function checkRef(ref) {
   return Boolean(ref && ref.current);
 }
-function leftAlignSubmenu(ref, submenuRef) {
+function calculateSubmenuPosition(ref, submenuRef, submenuPosition, currentSubmenuPosition) {
   /* istanbul ignore if */
-  if (!ref.current || !submenuRef.current) return true;
+
+  if (!ref.current || !submenuRef.current) return currentSubmenuPosition || submenuPosition;
   const {
-    left
+    left,
+    right
   } = ref.current.getBoundingClientRect();
   const {
     offsetWidth
   } = submenuRef.current;
-  return left >= offsetWidth;
-}
-function getContainerPosition(itemRef, submenuRef, placement) {
-  /* istanbul ignore if */
-  if (!itemRef.current || !submenuRef.current) return undefined;
-  const {
-    offsetWidth: parentWidth
-  } = itemRef.current;
-  const {
-    offsetWidth: submenuWidth
-  } = submenuRef.current;
-  const xPositionValue = leftAlignSubmenu(itemRef, submenuRef) ? -submenuWidth : parentWidth;
-  const yPositionName = placement === "top" ? "bottom" : "top";
-  return {
-    left: xPositionValue,
-    [yPositionName]: "calc(-1 * var(--spacing100))",
-    right: "auto"
-  };
+  const windowWidth = document.body.clientWidth;
+  if (submenuPosition === "left") {
+    return left >= offsetWidth ? "left" : "right";
+  }
+  return windowWidth >= right + offsetWidth ? "right" : "left";
 }
 export const ActionPopoverItem = _ref => {
   let {
@@ -52,6 +41,13 @@ export const ActionPopoverItem = _ref => {
     download,
     href,
     horizontalAlignment,
+    childHasSubmenu,
+    childHasIcon,
+    currentSubmenuPosition,
+    setChildHasSubmenu,
+    setChildHasIcon,
+    setCurrentSubmenuPosition,
+    isASubmenu = false,
     ...rest
   } = _ref;
   const l = useLocale();
@@ -61,14 +57,14 @@ export const ActionPopoverItem = _ref => {
   const {
     setOpenPopover,
     isOpenPopover,
-    focusButton
+    focusButton,
+    submenuPosition
   } = context;
   const isHref = !!href;
   const [containerPosition, setContainerPosition] = useState(undefined);
   const [guid] = useState(createGuid());
   const [isOpen, setOpen] = useState(false);
   const [focusIndex, setFocusIndex] = useState(0);
-  const [isLeftAligned, setIsLeftAligned] = useState(true);
   const submenuRef = useRef(null);
   const ref = useRef(null);
   const mouseEnterTimer = useRef(null);
@@ -78,19 +74,48 @@ export const ActionPopoverItem = _ref => {
       setOpen(false);
     }
   }, [isOpenPopover]);
+  useEffect(() => {
+    if (icon) {
+      setChildHasIcon?.(true);
+    }
+    if (submenu) {
+      setChildHasSubmenu?.(true);
+    }
+  }, [icon, setChildHasSubmenu, setChildHasIcon, submenu]);
   const alignSubmenu = useCallback(() => {
-    if (checkRef(ref) && checkRef(submenuRef) && submenu) {
-      const align = leftAlignSubmenu(ref, submenuRef);
-      setIsLeftAligned(align);
-      setContainerPosition(getContainerPosition(ref, submenuRef, placement));
+    const checkCalculatedSubmenuPosition = calculateSubmenuPosition(ref, submenuRef, submenuPosition, currentSubmenuPosition);
+    setCurrentSubmenuPosition?.(checkCalculatedSubmenuPosition);
+    return checkRef(ref) && checkRef(submenuRef) && submenu;
+  }, [submenu, setCurrentSubmenuPosition, submenuPosition, currentSubmenuPosition]);
+  useEffect(() => {
+    const getContainerPosition = () => {
+      /* istanbul ignore if */
+      if (!ref.current || !submenuRef.current) return undefined;
+      const {
+        offsetWidth: submenuWidth
+      } = submenuRef.current;
+      const leftAlignedSubmenu = currentSubmenuPosition === "left";
+      const leftValue = leftAlignedSubmenu ? -submenuWidth : "auto";
+      const rightValue = leftAlignedSubmenu ? "auto" : -submenuWidth;
+      const yPositionName = placement === "top" ? "bottom" : "top";
+      return {
+        left: leftValue,
+        [yPositionName]: "calc(-1 * var(--spacing100))",
+        right: rightValue
+      };
+    };
+    setContainerPosition(getContainerPosition);
+  }, [submenu, currentSubmenuPosition, placement]);
+  useEffect(() => {
+    if (submenu) {
+      alignSubmenu();
     }
-  }, [submenu, placement]);
+  }, [alignSubmenu, submenu]);
   useEffect(() => {
-    alignSubmenu();
     if (focusItem) {
       ref.current?.focus();
     }
-  }, [alignSubmenu, focusItem]);
+  }, [focusItem]);
   useEffect(() => {
     return function cleanup() {
       if (mouseEnterTimer.current) clearTimeout(mouseEnterTimer.current);
@@ -123,7 +148,7 @@ export const ActionPopoverItem = _ref => {
       e.stopPropagation();
     } else if (!disabled) {
       if (submenu) {
-        if (isLeftAligned) {
+        if (currentSubmenuPosition === "left") {
           // LEFT: open if has submenu and left aligned otherwise close submenu
           if (Events.isLeftKey(e) || Events.isEnterKey(e)) {
             setOpen(true);
@@ -159,7 +184,7 @@ export const ActionPopoverItem = _ref => {
     } else if (Events.isEnterKey(e)) {
       e.stopPropagation();
     }
-  }, [disabled, download, isHref, isLeftAligned, onClick, submenu]);
+  }, [disabled, download, isHref, onClick, submenu, currentSubmenuPosition]);
   const itemSubmenuProps = {
     ...(!disabled && {
       onClick: e => {
@@ -195,8 +220,15 @@ export const ActionPopoverItem = _ref => {
   };
   const renderMenuItemIcon = () => {
     return icon && /*#__PURE__*/React.createElement(MenuItemIcon, {
-      as: undefined,
-      type: icon
+      type: icon,
+      "data-element": "action-popover-menu-item-icon",
+      horizontalAlignment: horizontalAlignment,
+      submenuPosition: currentSubmenuPosition,
+      childHasIcon: childHasIcon,
+      childHasSubmenu: childHasSubmenu,
+      hasIcon: !!icon,
+      hasSubmenu: !!submenu,
+      isASubmenu: isASubmenu
     });
   };
   return /*#__PURE__*/React.createElement(StyledMenuItemWrapper, submenu && wrapperDivProps, /*#__PURE__*/React.createElement("div", {
@@ -209,17 +241,31 @@ export const ActionPopoverItem = _ref => {
     role: "menuitem",
     tabIndex: 0,
     isDisabled: disabled,
-    horizontalAlignment: horizontalAlignment
+    horizontalAlignment: horizontalAlignment,
+    submenuPosition: currentSubmenuPosition,
+    hasSubmenu: !!submenu,
+    childHasSubmenu: childHasSubmenu
   }, disabled && {
     "aria-disabled": true
   }, isHref && {
     as: "a",
     download,
     href
-  }, submenu && itemSubmenuProps), submenu && checkRef(ref) && isLeftAligned ? /*#__PURE__*/React.createElement(SubMenuItemIcon, {
-    type: "chevron_left"
-  }) : null, horizontalAlignment === "left" ? renderMenuItemIcon() : null, children, horizontalAlignment === "right" ? renderMenuItemIcon() : null, submenu && checkRef(ref) && !isLeftAligned ? /*#__PURE__*/React.createElement(SubMenuItemIcon, {
-    type: "chevron_right"
+  }, submenu && itemSubmenuProps), submenu && checkRef(ref) && currentSubmenuPosition === "left" ? /*#__PURE__*/React.createElement(SubMenuItemIcon, {
+    "data-element": "action-popover-menu-item-chevron",
+    type: "chevron_left_thick"
+  }) : null, /*#__PURE__*/React.createElement(StyledMenuItemOuterContainer, null, horizontalAlignment === "left" ? renderMenuItemIcon() : null, /*#__PURE__*/React.createElement(StyledMenuItemInnerText, {
+    "data-element": "action-popover-menu-item-inner-text",
+    horizontalAlignment: horizontalAlignment,
+    submenuPosition: currentSubmenuPosition,
+    isASubmenu: isASubmenu,
+    childHasSubmenu: childHasSubmenu,
+    childHasIcon: childHasIcon,
+    hasIcon: !!icon,
+    hasSubmenu: !!submenu
+  }, children), horizontalAlignment === "right" ? renderMenuItemIcon() : null), submenu && checkRef(ref) && currentSubmenuPosition === "right" ? /*#__PURE__*/React.createElement(SubMenuItemIcon, {
+    "data-element": "action-popover-menu-item-chevron",
+    type: "chevron_right_thick"
   }) : null), /*#__PURE__*/React.isValidElement(submenu) ? /*#__PURE__*/React.cloneElement(submenu, {
     parentID: `ActionPopoverItem_${guid}`,
     menuID: `ActionPopoverMenu_${guid}`,
@@ -229,7 +275,9 @@ export const ActionPopoverItem = _ref => {
     style: containerPosition,
     setOpen,
     setFocusIndex,
-    focusIndex
+    focusIndex,
+    isASubmenu: true,
+    horizontalAlignment
   }) : null));
 };
 ActionPopoverItem.displayName = "ActionPopoverItem";

package/esm/components/action-popover/action-popover-menu/action-popover-menu.component.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import { Alignment } from "../action-popover-context";
 export interface ActionPopoverMenuBaseProps {
     /** Children for the menu */
     children?: React.ReactNode;
@@ -15,19 +16,21 @@ export interface ActionPopoverMenuBaseProps {
     /** Unique ID for the menu's parent */
     parentID?: string;
     /** Horizontal alignment of menu items content */
-    horizontalAlignment?: "left" | "right";
+    horizontalAlignment?: Alignment;
     /** Set whether the menu should open above or below the button */
     placement?: "bottom" | "top";
     /** @ignore @private */
     role?: string;
     /** @ignore @private */
+    isASubmenu?: boolean;
+    /** @ignore @private */
     "data-element"?: string;
     /** @ignore @private */
     style?: {
-        left: number;
+        left: string | number;
         top?: string;
         bottom?: string;
-        right: "auto";
+        right: string | number;
     };
 }
 export interface ActionPopoverMenuProps extends ActionPopoverMenuBaseProps, React.RefAttributes<HTMLDivElement> {

package/esm/components/action-popover/action-popover-menu/action-popover-menu.component.js

@@ -1,5 +1,5 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React, { useCallback, useMemo, useContext } from "react";
+import React, { useCallback, useMemo, useContext, useState } from "react";
 import PropTypes from "prop-types";
 import invariant from "invariant";
 import { Menu } from "../action-popover.style";
@@ -18,12 +18,14 @@ const ActionPopoverMenu = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     setFocusIndex,
     placement = "bottom",
     horizontalAlignment,
+    isASubmenu,
     ...rest
   } = _ref;
   const context = useContext(ActionPopoverContext);
   !context ? process.env.NODE_ENV !== "production" ? invariant(false, "ActionPopoverMenu must be used within an ActionPopover component") : invariant(false) : void 0;
   const {
-    focusButton
+    focusButton,
+    submenuPosition
   } = context;
   !(setOpen && setFocusIndex && typeof focusIndex !== "undefined") ? process.env.NODE_ENV !== "production" ? invariant(false, "ActionPopoverMenu must be used within an ActionPopover or ActionPopoverItem component") : invariant(false) : void 0;
   const hasProperChildren = useMemo(() => {
@@ -92,6 +94,9 @@ const ActionPopoverMenu = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       }
     }
   }, [focusButton, setOpen, focusIndex, items, setFocusIndex]);
+  const [childHasSubmenu, setChildHasSubmenu] = useState(false);
+  const [childHasIcon, setChildHasIcon] = useState(false);
+  const [currentSubmenuPosition, setCurrentSubmenuPosition] = useState(submenuPosition);
   const clonedChildren = useMemo(() => {
     let index = 0;
     return React.Children.map(children, child => {
@@ -100,12 +105,19 @@ const ActionPopoverMenu = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         return /*#__PURE__*/React.cloneElement(child, {
           focusItem: isOpen && focusIndex === index - 1,
           placement: child.props.submenu ? placement : undefined,
-          horizontalAlignment
+          horizontalAlignment,
+          childHasSubmenu,
+          setChildHasSubmenu,
+          childHasIcon,
+          setChildHasIcon,
+          currentSubmenuPosition,
+          setCurrentSubmenuPosition,
+          isASubmenu
         });
       }
       return child;
     });
-  }, [children, focusIndex, isOpen, placement, horizontalAlignment]);
+  }, [children, focusIndex, isOpen, placement, horizontalAlignment, childHasSubmenu, childHasIcon, currentSubmenuPosition, isASubmenu]);
   return /*#__PURE__*/React.createElement(Menu, _extends({
     "data-component": "action-popover",
     isOpen: isOpen,
@@ -121,6 +133,7 @@ ActionPopoverMenu.propTypes = {
   "data-element": PropTypes.string,
   "focusIndex": PropTypes.number,
   "horizontalAlignment": PropTypes.oneOf(["left", "right"]),
+  "isASubmenu": PropTypes.bool,
   "isOpen": PropTypes.bool,
   "menuID": PropTypes.string,
   "parentID": PropTypes.string,
@@ -130,8 +143,8 @@ ActionPopoverMenu.propTypes = {
   "setOpen": PropTypes.func,
   "style": PropTypes.shape({
     "bottom": PropTypes.string,
-    "left": PropTypes.number.isRequired,
-    "right": PropTypes.oneOf(["auto"]).isRequired,
+    "left": PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    "right": PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
     "top": PropTypes.string
   })
 };

package/esm/components/action-popover/action-popover.component.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import { MarginProps } from "styled-system";
+import { Alignment } from "./action-popover-context";
 export interface RenderButtonProps {
     tabIndex: number;
     "data-element": string;
@@ -14,7 +15,9 @@ export interface ActionPopoverProps extends MarginProps {
     /** Children for popover component */
     children?: React.ReactNode;
     /** Horizontal alignment of menu items content */
-    horizontalAlignment?: "left" | "right";
+    horizontalAlignment?: Alignment;
+    /** Sets submenu position */
+    submenuPosition?: Alignment;
     /** Unique ID */
     id?: string;
     /** Callback to be called on menu open */
@@ -28,5 +31,5 @@ export interface ActionPopoverProps extends MarginProps {
     /** Boolean to control whether menu should align to right */
     rightAlignMenu?: boolean;
 }
-export declare const ActionPopover: ({ children, id, onOpen, onClose, rightAlignMenu, renderButton, placement, horizontalAlignment, ...rest }: ActionPopoverProps) => React.JSX.Element;
+export declare const ActionPopover: ({ children, id, onOpen, onClose, rightAlignMenu, renderButton, placement, horizontalAlignment, submenuPosition, ...rest }: ActionPopoverProps) => React.JSX.Element;
 export default ActionPopover;

package/esm/components/action-popover/action-popover.component.js

@@ -24,6 +24,7 @@ export const ActionPopover = _ref => {
     renderButton,
     placement = "bottom",
     horizontalAlignment = "left",
+    submenuPosition = "left",
     ...rest
   } = _ref;
   const l = useLocale();
@@ -185,6 +186,7 @@ export const ActionPopover = _ref => {
     value: {
       setOpenPopover: setOpen,
       focusButton,
+      submenuPosition,
       isOpenPopover: isOpen
     }
   }, isOpen && /*#__PURE__*/React.createElement(Popover, {

package/esm/components/action-popover/action-popover.style.d.ts

@@ -4,9 +4,17 @@ declare const Menu: import("styled-components").StyledComponent<"div", any, {
 }, never>;
 declare type StyledMenuItemProps = {
     isDisabled: boolean;
-    horizontalAlignment: "left" | "right";
+    horizontalAlignment?: "left" | "right";
+    submenuPosition?: "left" | "right";
+    childHasSubmenu?: boolean;
+    childHasIcon?: boolean;
+    hasSubmenu?: boolean;
+    hasIcon?: boolean;
+    isASubmenu?: boolean;
 };
-declare const StyledMenuItem: import("styled-components").StyledComponent<"button", any, StyledMenuItemProps, never>;
+declare const StyledMenuItemInnerText: import("styled-components").StyledComponent<"div", any, Omit<StyledMenuItemProps, "isDisabled">, never>;
+declare const StyledMenuItemOuterContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledMenuItem: import("styled-components").StyledComponent<"button", any, Omit<StyledMenuItemProps, "variant">, never>;
 declare const StyledMenuItemWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const MenuItemDivider: import("styled-components").StyledComponent<"div", any, {
     "data-element": string;
@@ -14,7 +22,7 @@ declare const MenuItemDivider: import("styled-components").StyledComponent<"div"
 declare const MenuButton: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const ButtonIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
 declare const StyledButtonIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare const MenuItemIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
+declare const MenuItemIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, Omit<StyledMenuItemProps, "isDisabled">, never>;
 declare const SubMenuItemIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
 declare const MenuButtonOverrideWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export { Menu, MenuButton, ButtonIcon, StyledButtonIcon, MenuItemIcon, MenuItemDivider, SubMenuItemIcon, MenuButtonOverrideWrapper, StyledMenuItem, StyledMenuItemWrapper, };
+export { Menu, MenuButton, ButtonIcon, StyledButtonIcon, MenuItemIcon, MenuItemDivider, SubMenuItemIcon, MenuButtonOverrideWrapper, StyledMenuItemInnerText, StyledMenuItemOuterContainer, StyledMenuItem, StyledMenuItemWrapper, };

package/esm/components/action-popover/action-popover.style.js

@@ -24,7 +24,85 @@ const Menu = styled.div`
   return `${theme.zIndex?.popover}`;
 }}; // TODO (tokens): implement elevation tokens - FE-4437
 `;
+function getPaddingValues(childHasSubmenu, childHasIcon, hasIcon, hasSubmenu) {
+  if (!childHasIcon && childHasSubmenu && !hasIcon && !hasSubmenu) {
+    return "var(--spacing400)";
+  }
+  if (childHasIcon && childHasSubmenu && !hasIcon && hasSubmenu) {
+    return "var(--spacing600)";
+  }
+  if (childHasIcon && childHasSubmenu && !hasIcon && !hasSubmenu) {
+    return "var(--spacing900)";
+  }
+  return "var(--spacing100)";
+}
+function getIconPaddingValues(index, horizontalAlignment, submenuPosition, siblingsHaveIconAndSubmenu, isASubmenu) {
+  const sameAlignment = horizontalAlignment === "left" && submenuPosition === "left" || horizontalAlignment === "right" && submenuPosition === "right";
+  if (siblingsHaveIconAndSubmenu && sameAlignment) {
+    if (horizontalAlignment === "left") {
+      return index === 1 ? "var(--spacing100)" : "var(--spacing400)";
+    }
+    return index === 1 ? "var(--spacing400)" : "var(--spacing100)";
+  }
+  if (isASubmenu) {
+    if (horizontalAlignment === "left") {
+      return index === 1 ? "var(--spacing100)" : "var(--spacing000)";
+    }
+    return index === 1 ? "var(--spacing000)" : "var(--spacing100)";
+  }
+  return "var(--spacing100)";
+}
+const StyledMenuItemInnerText = styled.div`
+  ${_ref3 => {
+  let {
+    childHasSubmenu,
+    childHasIcon,
+    hasIcon,
+    hasSubmenu,
+    submenuPosition,
+    horizontalAlignment,
+    isASubmenu
+  } = _ref3;
+  return css`
+    padding-left: ${isASubmenu ? `var(--spacing000)` : `var(--spacing100)`};
+    padding-right: ${isASubmenu ? `var(--spacing000)` : `var(--spacing100)`};
+
+    ${horizontalAlignment === "left" && submenuPosition === "left" && !isASubmenu && css`
+      padding-left: ${getPaddingValues(childHasSubmenu, childHasIcon, hasIcon, hasSubmenu)};
+    `}
+
+    ${horizontalAlignment === "right" && submenuPosition === "right" && !isASubmenu && css`
+      padding-right: ${getPaddingValues(childHasSubmenu, childHasIcon, hasIcon, hasSubmenu)};
+    `}
+  `;
+}}
+`;
+const StyledMenuItemOuterContainer = styled.div`
+  display: inherit;
+`;
 const StyledMenuItem = styled.button`
+  ${_ref4 => {
+  let {
+    horizontalAlignment,
+    submenuPosition,
+    childHasSubmenu,
+    hasSubmenu
+  } = _ref4;
+  return css`
+      justify-content: ${horizontalAlignment === "left" ? "flex-start" : "flex-end"};
+
+      ${horizontalAlignment === "left" && submenuPosition === "right" && css`
+        justify-content: space-between;
+      `}
+
+      ${horizontalAlignment === "right" && submenuPosition === "left" && css`
+        ${childHasSubmenu && hasSubmenu && css`
+          justify-content: space-between;
+        `}
+      `}
+    `;
+}}
+
   text-decoration: none;
   background-color: var(--colorsActionMajorYang100);
   cursor: pointer;
@@ -41,12 +119,6 @@ const StyledMenuItem = styled.button`
   color: var(--colorsUtilityYin090);
   font-size: 14px;
   font-weight: 700;
-  justify-content: ${_ref3 => {
-  let {
-    horizontalAlignment
-  } = _ref3;
-  return horizontalAlignment === "left" ? "flex-start" : "flex-end";
-}};
 
   &:focus {
     outline: var(--borderWidth300) solid var(--colorsSemanticFocus500);
@@ -54,10 +126,10 @@ const StyledMenuItem = styled.button`
     border-radius: var(--borderRadius000);
   }
 
-  ${_ref4 => {
+  ${_ref5 => {
   let {
     isDisabled
-  } = _ref4;
+  } = _ref5;
   return isDisabled && css`
       color: var(--colorsUtilityYin030);
       cursor: not-allowed;
@@ -69,10 +141,10 @@ const StyledMenuItem = styled.button`
     `;
 }}
 
-  ${_ref5 => {
+  ${_ref6 => {
   let {
     isDisabled
-  } = _ref5;
+  } = _ref6;
   return !isDisabled && css`
       &:focus,
       &:hover {
@@ -117,21 +189,37 @@ const StyledButtonIcon = styled.div`
   }
 `;
 const MenuItemIcon = styled(Icon)`
-  padding: var(--spacing100);
-  color: var(--colorsUtilityYin065);
+  ${_ref7 => {
+  let {
+    horizontalAlignment,
+    submenuPosition,
+    childHasIcon,
+    childHasSubmenu,
+    hasIcon,
+    hasSubmenu,
+    isASubmenu
+  } = _ref7;
+  return css`
+    justify-content: ${horizontalAlignment};
+    padding: var(--spacing100)
+      ${getIconPaddingValues(1, horizontalAlignment, submenuPosition, childHasIcon && childHasSubmenu && hasIcon && !hasSubmenu, isASubmenu)}
+      var(--spacing100)
+      ${getIconPaddingValues(2, horizontalAlignment, submenuPosition, childHasIcon && childHasSubmenu && hasIcon && !hasSubmenu, isASubmenu)};
+    color: var(--colorsUtilityYin065);
+  `;
+}}
 `;
 const SubMenuItemIcon = styled(ButtonIcon)`
-  ${_ref6 => {
+  ${_ref8 => {
   let {
     type
-  } = _ref6;
+  } = _ref8;
   return css`
-    position: absolute;
-    ${type === "chevron_left" && css`
-      left: -2px;
+    ${type === "chevron_left_thick" && css`
+      left: -5px;
     `}
 
-    ${type === "chevron_right" && css`
+    ${type === "chevron_right_thick" && css`
       right: -5px;
       ${isSafari(navigator) && css`
         top: var(--sizing100);
@@ -156,4 +244,4 @@ const MenuButtonOverrideWrapper = styled.div`
     }
   }
 `;
-export { Menu, MenuButton, ButtonIcon, StyledButtonIcon, MenuItemIcon, MenuItemDivider, SubMenuItemIcon, MenuButtonOverrideWrapper, StyledMenuItem, StyledMenuItemWrapper };
+export { Menu, MenuButton, ButtonIcon, StyledButtonIcon, MenuItemIcon, MenuItemDivider, SubMenuItemIcon, MenuButtonOverrideWrapper, StyledMenuItemInnerText, StyledMenuItemOuterContainer, StyledMenuItem, StyledMenuItemWrapper };

package/esm/components/select/option/option.component.d.ts

@@ -1,5 +1,11 @@
 import React from "react";
-export interface OptionProps extends Omit<React.InputHTMLAttributes<HTMLLIElement>, "value" | "onSelect" | "onClick"> {
+import { TagProps } from "__internal__/utils/helpers/tags";
+export interface OptionProps extends Omit<React.InputHTMLAttributes<HTMLLIElement>, "value" | "onSelect" | "onClick">, TagProps {
+    /**
+     * Unique identifier for the component.
+     * Will use a randomly generated GUID if none is provided.
+     */
+    id?: string;
     /** The option's visible text, displayed within <Textbox> of <Select>, and used for filtering */
     text: string;
     /** Optional: alternative rendered content, displayed within <SelectList> of <Select> (eg: an icon, an image, etc) */

package/esm/components/select/option/option.component.js

@@ -116,6 +116,9 @@ Option.propTypes = {
   "dangerouslySetInnerHTML": PropTypes.shape({
     "__html": PropTypes.oneOfType([PropTypes.object, PropTypes.string]).isRequired
   }),
+  "data-component": PropTypes.string,
+  "data-element": PropTypes.string,
+  "data-role": PropTypes.string,
   "datatype": PropTypes.string,
   "defaultChecked": PropTypes.bool,
   "defaultValue": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.number, PropTypes.string]),

package/esm/components/select/option-group-header/option-group-header.component.d.ts

@@ -1,7 +1,13 @@
 import React from "react";
 import { CSSProperties } from "styled-components";
+import { TagProps } from "__internal__/utils/helpers/tags";
 import { IconProps } from "../../icon";
-export interface OptionGroupHeaderProps {
+export interface OptionGroupHeaderProps extends TagProps {
+    /**
+     * Unique identifier for the component.
+     * Will use a randomly generated GUID if none is provided.
+     */
+    id?: string;
     /** Heading text */
     label: string;
     /** Any valid Carbon icon name */