carbon-react 135.1.1 → 135.1.2

package/esm/__internal__/label/label.component.js

@@ -97,6 +97,7 @@ export const Label = ({
     }, help));
   };
   return /*#__PURE__*/React.createElement(StyledLabelContainer, {
+    "data-role": "label-container",
     align: align,
     inline: inline,
     width: width,

package/esm/__internal__/utils/helpers/tags/tags-specs/index.d.ts

@@ -1 +1 @@
-export { elementsTagTest, rootTagTest, rootTagTestRtl } from "./tags-specs";
+export { elementsTagTest, rootTagTest } from "./tags-specs";

package/esm/__internal__/utils/helpers/tags/tags-specs/index.js

@@ -1 +1 @@
-export { elementsTagTest, rootTagTest, rootTagTestRtl } from "./tags-specs";
+export { elementsTagTest, rootTagTest } from "./tags-specs";

package/esm/__internal__/utils/helpers/tags/tags-specs/tags-specs.d.ts

@@ -1,5 +1,3 @@
 import { ReactWrapper, ShallowWrapper } from "enzyme";
-declare const elementsTagTest: (wrapper: ReactWrapper | ShallowWrapper, elements: string[]) => void;
-declare const rootTagTest: (rootNode: ReactWrapper | ShallowWrapper, comp: string, elem?: string, role?: string) => void;
-declare const rootTagTestRtl: (rootNode: HTMLElement, comp: string, elem?: string, role?: string) => void;
-export { elementsTagTest, rootTagTest, rootTagTestRtl };
+export declare const elementsTagTest: (wrapper: ReactWrapper | ShallowWrapper, elements: string[]) => void;
+export declare const rootTagTest: (rootNode: ReactWrapper | ShallowWrapper, comp: string, elem?: string, role?: string) => void;

package/esm/__internal__/utils/helpers/tags/tags-specs/tags-specs.js

@@ -1,4 +1,4 @@
-const elementsTagTest = (wrapper, elements) => {
+export const elementsTagTest = (wrapper, elements) => {
   elements.forEach(element => {
     it(`include 'data-element="${element}"'`, () => {
       expect(wrapper.find({
@@ -7,16 +7,8 @@ const elementsTagTest = (wrapper, elements) => {
     });
   });
 };
-const rootTagTest = (rootNode, comp, elem, role) => {
+export const rootTagTest = (rootNode, comp, elem, role) => {
   expect(rootNode.prop("data-component")).toEqual(comp);
   expect(rootNode.prop("data-element")).toEqual(elem);
   expect(rootNode.prop("data-role")).toEqual(role);
-};
-const rootTagTestRtl = (rootNode, comp, elem, role) => {
-  expect(rootNode).toHaveAttribute("data-component", comp);
-  expect(rootNode).toHaveAttribute("data-element", elem);
-  expect(rootNode).toHaveAttribute("data-role", role);
-};
-
-// eslint-disable-next-line jest/no-export
-export { elementsTagTest, rootTagTest, rootTagTestRtl };
+};

package/esm/components/file-input/__internal__/file-upload-status/file-upload-status.component.js

@@ -64,6 +64,7 @@ export const FileUploadStatus = ({
     lowerPadding: true
   }, /*#__PURE__*/React.createElement(StyledFileLinkContainer, null, fileLink)) : null;
   return /*#__PURE__*/React.createElement(StyledFileUploadStatus, {
+    "data-role": "file-upload-status",
     hasError: status === "error"
   }, mainRow, secondRow, progressBar);
 };

package/esm/components/file-input/file-input.component.d.ts

@@ -4,7 +4,7 @@ import { ValidationProps } from "../../__internal__/validations";
 import { InputProps } from "../../__internal__/input";
 import { TagProps } from "../../__internal__/utils/helpers/tags";
 import { FileUploadStatusProps } from "./__internal__/file-upload-status";
-export interface FileInputProps extends Pick<ValidationProps, "error">, Pick<InputProps, "id" | "name" | "required">, TagProps, MarginProps {
+export interface FileInputProps extends Pick<ValidationProps, "error">, Pick<InputProps, "id" | "name" | "required">, Omit<TagProps, "data-component">, MarginProps {
     /** Which file format(s) to accept. Will be passed to the underlying HTML input.
      * See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept  */
     accept?: string;

package/esm/components/file-input/file-input.component.js

@@ -132,6 +132,7 @@ const FileInput = /*#__PURE__*/React.forwardRef(({
     onChange: onInputChange,
     type: "file"
   }, rest)), /*#__PURE__*/React.createElement(StyledFileInputPresentation, _extends({
+    "data-role": "file-input-presentation",
     isDraggedOver: isDraggedOver,
     isDraggingFile: isDraggingFile,
     error: error,
@@ -166,7 +167,6 @@ if (process.env.NODE_ENV !== "production") {
   FileInput.propTypes = {
     "accept": PropTypes.string,
     "buttonText": PropTypes.string,
-    "data-component": PropTypes.string,
     "data-element": PropTypes.string,
     "data-role": PropTypes.string,
     "dragAndDropText": PropTypes.string,

package/esm/components/link/link.component.js

@@ -79,7 +79,8 @@ const Link = /*#__PURE__*/React.forwardRef(({
       ...componentProps,
       ...(placeholderTabIndex && href === undefined && !onClick && {
         tabIndex: -1
-      })
+      }),
+      "data-role": "link-anchor"
     }, /*#__PURE__*/React.createElement(React.Fragment, null, renderLinkIcon(), /*#__PURE__*/React.createElement(StyledContent, null, isSkipLink ? l.link.skipLinkLabel() : children), renderLinkIcon("right")));
   };
   return /*#__PURE__*/React.createElement(StyledLink, _extends({

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

@@ -44,6 +44,7 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
   const [submenuItemIds, setSubmenuItemIds] = useState([]);
   const [characterString, setCharacterString] = useState("");
   const [applyFocusRadius, setApplyFocusRadius] = useState(false);
+  const [applyFocusRadiusToLastItem, setApplyFocusRadiusToLastItem] = useState(false);
   const shiftTabPressed = useRef(false);
   const focusFirstMenuItemOnOpen = useRef(false);
   const numberOfChildren = submenuItemIds.length;
@@ -94,19 +95,34 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
       // Get the last segment block
       const lastSegmentBlock = ulElements.pop();
 
+      // Check if the last segment block is a scrollable block
+      const isLastSegmentBlockScrollableBlock = Boolean(lastSegmentBlock?.parentElement?.dataset.component === SCROLLABLE_BLOCK);
+
       // Get all the menu items from the last segment block
       const segmentBlockMenuItems = Array.from(lastSegmentBlock?.querySelectorAll("[data-component='menu-item']") || /* istanbul ignore next */[]);
 
       // Get the last menu item in the last segment block
       const lastMenuItemInSegmentBlock = segmentBlockMenuItems.pop();
+
+      // Check to see if the last menu item in the last segment block is visible
+      let isLastMenuItemInSegmentBlockVisible = false;
+      if (lastMenuItemInSegmentBlock && lastSegmentBlock) {
+        isLastMenuItemInSegmentBlockVisible = lastMenuItemInSegmentBlock.getBoundingClientRect().bottom < lastSegmentBlock.getBoundingClientRect().bottom;
+      }
+
       // Check if the last item in the segment block is the same as the last MenuItem in the submenu
       const menuItemsMatch = !!lastMenuItemInSegmentBlock && lastMenuItemInSegmentBlock === lastMenuItem;
+
+      // Applies the focus radius to the StyledBox of the StyledScrollableBlock
       setApplyFocusRadius(menuItemsMatch);
+
+      // Applies border radius to the last item in the segment block
+      setApplyFocusRadiusToLastItem(menuItemsMatch && !isLastSegmentBlockScrollableBlock || menuItemsMatch && isLastSegmentBlockScrollableBlock && !isLastMenuItemInSegmentBlockVisible);
     };
     if (submenuOpen && submenuRef) {
       handleBorderRadiusStyling();
     }
-  }, [submenuOpen, submenuRef]);
+  }, [submenuOpen, submenuRef, numberOfChildren]);
   useEffect(() => {
     if (submenuOpen && onSubmenuOpen) {
       onSubmenuOpen();
@@ -283,7 +299,8 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
       menuType: menuType,
       inFullscreenView: inFullscreenView,
       ref: setSubmenuRef,
-      applyFocusRadiusStyling: false
+      applyFocusRadiusStyling: false,
+      applyFocusRadiusStylingToLastItem: applyFocusRadiusToLastItem
     }, /*#__PURE__*/React.createElement(SubmenuContext.Provider, {
       value: {
         handleKeyDown,
@@ -322,7 +339,8 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
     menuType: menuType,
     role: blockIndex === 0 ? "presentation" : "list",
     maxHeight: submenuMaxHeight,
-    applyFocusRadiusStyling: applyFocusRadius
+    applyFocusRadiusStyling: applyFocusRadius,
+    applyFocusRadiusStylingToLastItem: applyFocusRadiusToLastItem
   }, /*#__PURE__*/React.createElement(SubmenuContext.Provider, {
     value: {
       submenuFocusId,

package/esm/components/menu/__internal__/submenu/submenu.style.d.ts

@@ -12,6 +12,7 @@ interface StyledSubmenuProps extends SharedStyleProps, Pick<SubmenuProps, "varia
     submenuDirection?: string;
     maxHeight?: string;
     applyFocusRadiusStyling: boolean;
+    applyFocusRadiusStylingToLastItem: boolean;
 }
 declare const StyledSubmenuWrapper: import("styled-components").StyledComponent<"div", any, StyledSubmenuWrapperProps, never>;
 declare const StyledSubmenu: import("styled-components").StyledComponent<"ul", any, StyledSubmenuProps, never>;

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

@@ -42,7 +42,8 @@ const StyledSubmenu = styled.ul`
   variant,
   inFullscreenView,
   maxHeight,
-  applyFocusRadiusStyling
+  applyFocusRadiusStyling,
+  applyFocusRadiusStylingToLastItem
 }) => css`
     ${!inFullscreenView && menuType && css`
       box-shadow: var(--boxShadow100);
@@ -84,8 +85,8 @@ const StyledSubmenu = styled.ul`
         border-bottom-left-radius: var(--borderRadius000);
 
         :focus {
-          border-bottom-right-radius: ${applyFocusRadiusStyling ? "var(--borderRadius100)" : "var(--borderRadius000)"};
-          border-bottom-left-radius: ${applyFocusRadiusStyling ? "var(--borderRadius100)" : "var(--borderRadius000)"};
+          border-bottom-right-radius: ${applyFocusRadiusStylingToLastItem ? "var(--borderRadius100)" : "var(--borderRadius000)"};
+          border-bottom-left-radius: ${applyFocusRadiusStylingToLastItem ? "var(--borderRadius100)" : "var(--borderRadius000)"};
         }
       }
 
@@ -97,7 +98,7 @@ const StyledSubmenu = styled.ul`
           ${StyledMenuItem}:last-child ${StyledLink}, ${StyledMenuItem}:last-child a,
           ${StyledMenuItem}:last-child button {
             border-bottom-right-radius: var(--borderRadius000);
-            border-bottom-left-radius: ${applyFocusRadiusStyling ? "var(--borderRadius100)" : "var(--borderRadius000)"};
+            border-bottom-left-radius: ${applyFocusRadiusStylingToLastItem ? "var(--borderRadius100)" : "var(--borderRadius000)"};
           }
         }
       }

package/esm/components/menu/menu-item/menu-item.component.d.ts

@@ -3,7 +3,7 @@ import { FlexboxProps, LayoutProps, MaxWidthProps, PaddingProps } from "styled-s
 import { IconType } from "../../icon";
 import { TagProps } from "../../../__internal__/utils/helpers/tags";
 export declare type VariantType = "default" | "alternate";
-interface MenuItemBaseProps extends TagProps, LayoutProps, FlexboxProps, PaddingProps {
+interface MenuItemBaseProps extends Omit<TagProps, "data-component">, LayoutProps, FlexboxProps, PaddingProps {
     /** Custom className */
     className?: string;
     /** onClick handler */
@@ -38,8 +38,6 @@ interface MenuItemBaseProps extends TagProps, LayoutProps, FlexboxProps, Padding
       for other MenuItems inside the block
      */
     overrideColor?: boolean;
-    /** @private @ignore */
-    "data-component"?: string;
     /** When set the submenu opens by click instead of hover */
     clickToOpen?: boolean;
     /** Sets the maxWidth of the MenuItem */
@@ -61,7 +59,7 @@ export interface MenuWithIcon extends MenuItemBaseProps {
     children?: React.ReactNode;
 }
 export declare const MenuItem: {
-    ({ submenu, children, href, onClick, target, submenuDirection, icon, selected, onKeyDown, variant, showDropdownArrow, ariaLabel, clickToOpen, maxWidth, onSubmenuOpen, onSubmenuClose, overrideColor, rel, as, ...rest }: MenuWithChildren | MenuWithIcon): React.JSX.Element;
+    ({ submenu, children, href, onClick, target, submenuDirection, icon, selected, onKeyDown, variant, showDropdownArrow, ariaLabel, clickToOpen, maxWidth, onSubmenuOpen, onSubmenuClose, overrideColor, rel, as, "data-element": dataElement, "data-role": dataRole, ...rest }: MenuWithChildren | MenuWithIcon): React.JSX.Element;
     displayName: string;
 };
 export default MenuItem;

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

@@ -10,7 +10,6 @@ import Submenu from "../__internal__/submenu/submenu.component";
 import SubmenuContext from "../__internal__/submenu/submenu.context";
 import { StyledMenuItem } from "../menu.style";
 import guid from "../../../__internal__/utils/helpers/guid";
-import tagComponent from "../../../__internal__/utils/helpers/tags";
 export const MenuItem = ({
   submenu,
   children,
@@ -31,6 +30,8 @@ export const MenuItem = ({
   overrideColor,
   rel,
   as,
+  "data-element": dataElement,
+  "data-role": dataRole,
   ...rest
 }) => {
   !(icon || children) ? process.env.NODE_ENV !== "production" ? invariant(false, "Either prop `icon` must be defined or this node must have `children`.") : invariant(false) : void 0;
@@ -124,7 +125,10 @@ export const MenuItem = ({
   const asPassiveItem = !(onClick || href);
   const hasInput = !!inputRef.current;
   if (submenu) {
-    return /*#__PURE__*/React.createElement(StyledMenuItem, _extends({}, tagComponent("menu-item", rest), {
+    return /*#__PURE__*/React.createElement(StyledMenuItem, _extends({
+      "data-component": "menu-item",
+      "data-element": dataElement,
+      "data-role": dataRole,
       menuType: menuType,
       title: getTitle(submenu),
       maxWidth: itemMaxWidth,
@@ -147,7 +151,10 @@ export const MenuItem = ({
     }, elementProps, rest), children));
   }
   const paddingProps = filterStyledSystemPaddingProps(rest);
-  return /*#__PURE__*/React.createElement(StyledMenuItem, _extends({}, tagComponent("menu-item", rest), {
+  return /*#__PURE__*/React.createElement(StyledMenuItem, _extends({
+    "data-component": "menu-item",
+    "data-element": dataElement,
+    "data-role": dataRole,
     menuType: menuType,
     inSubmenu: !!handleSubmenuKeyDown,
     title: getTitle(children),

package/esm/components/step-flow/step-flow.component.js

@@ -47,6 +47,7 @@ const StepFlow = /*#__PURE__*/forwardRef(({
     return /*#__PURE__*/React.createElement(StyledProgressIndicator, {
       key: step,
       "aria-hidden": "true",
+      "data-role": "progress-indicator",
       "data-element": "progress-indicator",
       isCompleted: step < validatedCurrentStep,
       isInProgress: step === validatedCurrentStep,
@@ -68,6 +69,7 @@ const StepFlow = /*#__PURE__*/forwardRef(({
     }
   }), []);
   const stepFlowTitle = /*#__PURE__*/React.createElement(StyledTitleFocusWrapper, {
+    "data-role": "title-text-wrapper",
     "data-element": "title-text-wrapper",
     tabIndex: -1,
     ref: titleRef
@@ -102,7 +104,8 @@ const StepFlow = /*#__PURE__*/forwardRef(({
     "data-element": "category-text",
     "aria-hidden": "true"
   }, category), stepFlowTitle) : stepFlowTitle, showCloseIcon ? closeIcon : null), showProgressIndicator ? /*#__PURE__*/React.createElement(StyledStepLabelAndProgress, null, stepFlowLabel, /*#__PURE__*/React.createElement(StyledProgressIndicatorBar, {
-    "data-element": "progress-indicator-bar"
+    "data-element": "progress-indicator-bar",
+    "data-role": "progress-indicator-bar"
   }, progressIndicators)) : stepFlowLabel);
 });
 if (process.env.NODE_ENV !== "production") {

package/esm/components/tooltip/tooltip.component.js

@@ -176,6 +176,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(({
     type: type,
     ref: arrowReference,
     "data-element": "tooltip-pointer",
+    "data-role": "tooltip-pointer",
     bgColor: bgColor,
     style: arrowStyle
   }), message)) : null);

package/lib/__internal__/label/label.component.js

@@ -106,6 +106,7 @@ const Label = ({
     }, help));
   };
   return /*#__PURE__*/_react.default.createElement(_label.StyledLabelContainer, {
+    "data-role": "label-container",
     align: align,
     inline: inline,
     width: width,

package/lib/__internal__/utils/helpers/tags/tags-specs/index.d.ts

@@ -1 +1 @@
-export { elementsTagTest, rootTagTest, rootTagTestRtl } from "./tags-specs";
+export { elementsTagTest, rootTagTest } from "./tags-specs";

package/lib/__internal__/utils/helpers/tags/tags-specs/index.js

@@ -15,10 +15,4 @@ Object.defineProperty(exports, "rootTagTest", {
     return _tagsSpecs.rootTagTest;
   }
 });
-Object.defineProperty(exports, "rootTagTestRtl", {
-  enumerable: true,
-  get: function () {
-    return _tagsSpecs.rootTagTestRtl;
-  }
-});
 var _tagsSpecs = require("./tags-specs");

package/lib/__internal__/utils/helpers/tags/tags-specs/tags-specs.d.ts

@@ -1,5 +1,3 @@
 import { ReactWrapper, ShallowWrapper } from "enzyme";
-declare const elementsTagTest: (wrapper: ReactWrapper | ShallowWrapper, elements: string[]) => void;
-declare const rootTagTest: (rootNode: ReactWrapper | ShallowWrapper, comp: string, elem?: string, role?: string) => void;
-declare const rootTagTestRtl: (rootNode: HTMLElement, comp: string, elem?: string, role?: string) => void;
-export { elementsTagTest, rootTagTest, rootTagTestRtl };
+export declare const elementsTagTest: (wrapper: ReactWrapper | ShallowWrapper, elements: string[]) => void;
+export declare const rootTagTest: (rootNode: ReactWrapper | ShallowWrapper, comp: string, elem?: string, role?: string) => void;

package/lib/__internal__/utils/helpers/tags/tags-specs/tags-specs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.rootTagTestRtl = exports.rootTagTest = exports.elementsTagTest = void 0;
+exports.rootTagTest = exports.elementsTagTest = void 0;
 const elementsTagTest = (wrapper, elements) => {
   elements.forEach(element => {
     it(`include 'data-element="${element}"'`, () => {
@@ -19,12 +19,4 @@ const rootTagTest = (rootNode, comp, elem, role) => {
   expect(rootNode.prop("data-element")).toEqual(elem);
   expect(rootNode.prop("data-role")).toEqual(role);
 };
-exports.rootTagTest = rootTagTest;
-const rootTagTestRtl = (rootNode, comp, elem, role) => {
-  expect(rootNode).toHaveAttribute("data-component", comp);
-  expect(rootNode).toHaveAttribute("data-element", elem);
-  expect(rootNode).toHaveAttribute("data-role", role);
-};
-
-// eslint-disable-next-line jest/no-export
-exports.rootTagTestRtl = rootTagTestRtl;
+exports.rootTagTest = rootTagTest;

package/lib/components/file-input/__internal__/file-upload-status/file-upload-status.component.js

@@ -71,6 +71,7 @@ const FileUploadStatus = ({
     lowerPadding: true
   }, /*#__PURE__*/_react.default.createElement(_fileUploadStatus.StyledFileLinkContainer, null, fileLink)) : null;
   return /*#__PURE__*/_react.default.createElement(_fileUploadStatus.StyledFileUploadStatus, {
+    "data-role": "file-upload-status",
     hasError: status === "error"
   }, mainRow, secondRow, progressBar);
 };

package/lib/components/file-input/file-input.component.d.ts

@@ -4,7 +4,7 @@ import { ValidationProps } from "../../__internal__/validations";
 import { InputProps } from "../../__internal__/input";
 import { TagProps } from "../../__internal__/utils/helpers/tags";
 import { FileUploadStatusProps } from "./__internal__/file-upload-status";
-export interface FileInputProps extends Pick<ValidationProps, "error">, Pick<InputProps, "id" | "name" | "required">, TagProps, MarginProps {
+export interface FileInputProps extends Pick<ValidationProps, "error">, Pick<InputProps, "id" | "name" | "required">, Omit<TagProps, "data-component">, MarginProps {
     /** Which file format(s) to accept. Will be passed to the underlying HTML input.
      * See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept  */
     accept?: string;

package/lib/components/file-input/file-input.component.js

@@ -141,6 +141,7 @@ const FileInput = exports.FileInput = /*#__PURE__*/_react.default.forwardRef(({
     onChange: onInputChange,
     type: "file"
   }, rest)), /*#__PURE__*/_react.default.createElement(_fileInput.StyledFileInputPresentation, _extends({
+    "data-role": "file-input-presentation",
     isDraggedOver: isDraggedOver,
     isDraggingFile: isDraggingFile,
     error: error,
@@ -175,7 +176,6 @@ if (process.env.NODE_ENV !== "production") {
   FileInput.propTypes = {
     "accept": _propTypes.default.string,
     "buttonText": _propTypes.default.string,
-    "data-component": _propTypes.default.string,
     "data-element": _propTypes.default.string,
     "data-role": _propTypes.default.string,
     "dragAndDropText": _propTypes.default.string,

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

@@ -88,7 +88,8 @@ const Link = exports.Link = /*#__PURE__*/_react.default.forwardRef(({
       ...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")));
   };
   return /*#__PURE__*/_react.default.createElement(_link.StyledLink, _extends({

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

@@ -53,6 +53,7 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
   const [submenuItemIds, setSubmenuItemIds] = (0, _react.useState)([]);
   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;
@@ -103,19 +104,34 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
       // Get the last segment block
       const lastSegmentBlock = ulElements.pop();
 
+      // Check if the last segment block is a scrollable block
+      const isLastSegmentBlockScrollableBlock = Boolean(lastSegmentBlock?.parentElement?.dataset.component === _locators.SCROLLABLE_BLOCK);
+
       // Get all the menu items from the last segment block
       const segmentBlockMenuItems = Array.from(lastSegmentBlock?.querySelectorAll("[data-component='menu-item']") || /* istanbul ignore next */[]);
 
       // Get the last menu item in the last segment block
       const lastMenuItemInSegmentBlock = segmentBlockMenuItems.pop();
+
+      // Check to see if the last menu item in the last segment block is visible
+      let isLastMenuItemInSegmentBlockVisible = false;
+      if (lastMenuItemInSegmentBlock && lastSegmentBlock) {
+        isLastMenuItemInSegmentBlockVisible = lastMenuItemInSegmentBlock.getBoundingClientRect().bottom < lastSegmentBlock.getBoundingClientRect().bottom;
+      }
+
       // Check if the last item in the segment block is the same as the last MenuItem in the submenu
       const menuItemsMatch = !!lastMenuItemInSegmentBlock && lastMenuItemInSegmentBlock === lastMenuItem;
+
+      // Applies the focus radius to the StyledBox of the StyledScrollableBlock
       setApplyFocusRadius(menuItemsMatch);
+
+      // Applies border radius to the last item in the segment block
+      setApplyFocusRadiusToLastItem(menuItemsMatch && !isLastSegmentBlockScrollableBlock || menuItemsMatch && isLastSegmentBlockScrollableBlock && !isLastMenuItemInSegmentBlockVisible);
     };
     if (submenuOpen && submenuRef) {
       handleBorderRadiusStyling();
     }
-  }, [submenuOpen, submenuRef]);
+  }, [submenuOpen, submenuRef, numberOfChildren]);
   (0, _react.useEffect)(() => {
     if (submenuOpen && onSubmenuOpen) {
       onSubmenuOpen();
@@ -292,7 +308,8 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
       menuType: menuType,
       inFullscreenView: inFullscreenView,
       ref: setSubmenuRef,
-      applyFocusRadiusStyling: false
+      applyFocusRadiusStyling: false,
+      applyFocusRadiusStylingToLastItem: applyFocusRadiusToLastItem
     }, /*#__PURE__*/_react.default.createElement(_submenu2.default.Provider, {
       value: {
         handleKeyDown,
@@ -331,7 +348,8 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
     menuType: menuType,
     role: blockIndex === 0 ? "presentation" : "list",
     maxHeight: submenuMaxHeight,
-    applyFocusRadiusStyling: applyFocusRadius
+    applyFocusRadiusStyling: applyFocusRadius,
+    applyFocusRadiusStylingToLastItem: applyFocusRadiusToLastItem
   }, /*#__PURE__*/_react.default.createElement(_submenu2.default.Provider, {
     value: {
       submenuFocusId,

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

@@ -12,6 +12,7 @@ interface StyledSubmenuProps extends SharedStyleProps, Pick<SubmenuProps, "varia
     submenuDirection?: string;
     maxHeight?: string;
     applyFocusRadiusStyling: boolean;
+    applyFocusRadiusStylingToLastItem: boolean;
 }
 declare const StyledSubmenuWrapper: import("styled-components").StyledComponent<"div", any, StyledSubmenuWrapperProps, never>;
 declare const StyledSubmenu: import("styled-components").StyledComponent<"ul", any, StyledSubmenuProps, never>;

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

@@ -51,7 +51,8 @@ const StyledSubmenu = exports.StyledSubmenu = _styledComponents.default.ul`
   variant,
   inFullscreenView,
   maxHeight,
-  applyFocusRadiusStyling
+  applyFocusRadiusStyling,
+  applyFocusRadiusStylingToLastItem
 }) => (0, _styledComponents.css)`
     ${!inFullscreenView && menuType && (0, _styledComponents.css)`
       box-shadow: var(--boxShadow100);
@@ -93,8 +94,8 @@ const StyledSubmenu = exports.StyledSubmenu = _styledComponents.default.ul`
         border-bottom-left-radius: var(--borderRadius000);
 
         :focus {
-          border-bottom-right-radius: ${applyFocusRadiusStyling ? "var(--borderRadius100)" : "var(--borderRadius000)"};
-          border-bottom-left-radius: ${applyFocusRadiusStyling ? "var(--borderRadius100)" : "var(--borderRadius000)"};
+          border-bottom-right-radius: ${applyFocusRadiusStylingToLastItem ? "var(--borderRadius100)" : "var(--borderRadius000)"};
+          border-bottom-left-radius: ${applyFocusRadiusStylingToLastItem ? "var(--borderRadius100)" : "var(--borderRadius000)"};
         }
       }
 
@@ -106,7 +107,7 @@ const StyledSubmenu = exports.StyledSubmenu = _styledComponents.default.ul`
           ${_menu.StyledMenuItem}:last-child ${_link.StyledLink}, ${_menu.StyledMenuItem}:last-child a,
           ${_menu.StyledMenuItem}:last-child button {
             border-bottom-right-radius: var(--borderRadius000);
-            border-bottom-left-radius: ${applyFocusRadiusStyling ? "var(--borderRadius100)" : "var(--borderRadius000)"};
+            border-bottom-left-radius: ${applyFocusRadiusStylingToLastItem ? "var(--borderRadius100)" : "var(--borderRadius000)"};
           }
         }
       }

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

@@ -3,7 +3,7 @@ import { FlexboxProps, LayoutProps, MaxWidthProps, PaddingProps } from "styled-s
 import { IconType } from "../../icon";
 import { TagProps } from "../../../__internal__/utils/helpers/tags";
 export declare type VariantType = "default" | "alternate";
-interface MenuItemBaseProps extends TagProps, LayoutProps, FlexboxProps, PaddingProps {
+interface MenuItemBaseProps extends Omit<TagProps, "data-component">, LayoutProps, FlexboxProps, PaddingProps {
     /** Custom className */
     className?: string;
     /** onClick handler */
@@ -38,8 +38,6 @@ interface MenuItemBaseProps extends TagProps, LayoutProps, FlexboxProps, Padding
       for other MenuItems inside the block
      */
     overrideColor?: boolean;
-    /** @private @ignore */
-    "data-component"?: string;
     /** When set the submenu opens by click instead of hover */
     clickToOpen?: boolean;
     /** Sets the maxWidth of the MenuItem */
@@ -61,7 +59,7 @@ export interface MenuWithIcon extends MenuItemBaseProps {
     children?: React.ReactNode;
 }
 export declare const MenuItem: {
-    ({ submenu, children, href, onClick, target, submenuDirection, icon, selected, onKeyDown, variant, showDropdownArrow, ariaLabel, clickToOpen, maxWidth, onSubmenuOpen, onSubmenuClose, overrideColor, rel, as, ...rest }: MenuWithChildren | MenuWithIcon): React.JSX.Element;
+    ({ submenu, children, href, onClick, target, submenuDirection, icon, selected, onKeyDown, variant, showDropdownArrow, ariaLabel, clickToOpen, maxWidth, onSubmenuOpen, onSubmenuClose, overrideColor, rel, as, "data-element": dataElement, "data-role": dataRole, ...rest }: MenuWithChildren | MenuWithIcon): React.JSX.Element;
     displayName: string;
 };
 export default MenuItem;

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

@@ -15,7 +15,6 @@ var _submenu = _interopRequireDefault(require("../__internal__/submenu/submenu.c
 var _submenu2 = _interopRequireDefault(require("../__internal__/submenu/submenu.context"));
 var _menu2 = require("../menu.style");
 var _guid = _interopRequireDefault(require("../../../__internal__/utils/helpers/guid"));
-var _tags = _interopRequireDefault(require("../../../__internal__/utils/helpers/tags"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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; }
@@ -40,6 +39,8 @@ const MenuItem = ({
   overrideColor,
   rel,
   as,
+  "data-element": dataElement,
+  "data-role": dataRole,
   ...rest
 }) => {
   !(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;
@@ -133,7 +134,10 @@ const MenuItem = ({
   const asPassiveItem = !(onClick || href);
   const hasInput = !!inputRef.current;
   if (submenu) {
-    return /*#__PURE__*/_react.default.createElement(_menu2.StyledMenuItem, _extends({}, (0, _tags.default)("menu-item", rest), {
+    return /*#__PURE__*/_react.default.createElement(_menu2.StyledMenuItem, _extends({
+      "data-component": "menu-item",
+      "data-element": dataElement,
+      "data-role": dataRole,
       menuType: menuType,
       title: getTitle(submenu),
       maxWidth: itemMaxWidth,
@@ -156,7 +160,10 @@ const MenuItem = ({
     }, elementProps, rest), children));
   }
   const paddingProps = (0, _utils.filterStyledSystemPaddingProps)(rest);
-  return /*#__PURE__*/_react.default.createElement(_menu2.StyledMenuItem, _extends({}, (0, _tags.default)("menu-item", rest), {
+  return /*#__PURE__*/_react.default.createElement(_menu2.StyledMenuItem, _extends({
+    "data-component": "menu-item",
+    "data-element": dataElement,
+    "data-role": dataRole,
     menuType: menuType,
     inSubmenu: !!handleSubmenuKeyDown,
     title: getTitle(children),

package/lib/components/step-flow/step-flow.component.js

@@ -56,6 +56,7 @@ const StepFlow = exports.StepFlow = /*#__PURE__*/(0, _react.forwardRef)(({
     return /*#__PURE__*/_react.default.createElement(_stepFlow.StyledProgressIndicator, {
       key: step,
       "aria-hidden": "true",
+      "data-role": "progress-indicator",
       "data-element": "progress-indicator",
       isCompleted: step < validatedCurrentStep,
       isInProgress: step === validatedCurrentStep,
@@ -77,6 +78,7 @@ const StepFlow = exports.StepFlow = /*#__PURE__*/(0, _react.forwardRef)(({
     }
   }), []);
   const stepFlowTitle = /*#__PURE__*/_react.default.createElement(_stepFlow.StyledTitleFocusWrapper, {
+    "data-role": "title-text-wrapper",
     "data-element": "title-text-wrapper",
     tabIndex: -1,
     ref: titleRef
@@ -111,7 +113,8 @@ const StepFlow = exports.StepFlow = /*#__PURE__*/(0, _react.forwardRef)(({
     "data-element": "category-text",
     "aria-hidden": "true"
   }, category), stepFlowTitle) : stepFlowTitle, showCloseIcon ? closeIcon : null), showProgressIndicator ? /*#__PURE__*/_react.default.createElement(_stepFlow.StyledStepLabelAndProgress, null, stepFlowLabel, /*#__PURE__*/_react.default.createElement(_stepFlow.StyledProgressIndicatorBar, {
-    "data-element": "progress-indicator-bar"
+    "data-element": "progress-indicator-bar",
+    "data-role": "progress-indicator-bar"
   }, progressIndicators)) : stepFlowLabel);
 });
 if (process.env.NODE_ENV !== "production") {

package/lib/components/tooltip/tooltip.component.js

@@ -185,6 +185,7 @@ const Tooltip = exports.Tooltip = /*#__PURE__*/_react.default.forwardRef(({
     type: type,
     ref: arrowReference,
     "data-element": "tooltip-pointer",
+    "data-role": "tooltip-pointer",
     bgColor: bgColor,
     style: arrowStyle
   }), message)) : null);

package/package.json

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