carbon-react 132.2.0 → 133.0.0

package/esm/components/confirm/confirm.component.d.ts

@@ -3,10 +3,10 @@ import { DialogProps } from "../dialog";
 import { IconType } from "../icon";
 import { TagProps } from "../../__internal__/utils/helpers/tags";
 export interface ConfirmProps extends Omit<DialogProps, "className" | "disableFocusTrap" | "bespokeFocusTrap" | "focusableSelectors" | "help" | "role" | "contentPadding" | "focusableContainers" | "ariaRole" | "timeout" | "enableBackgroundUI" | "disableClose"> {
-    /** Color variants for new business themes: "primary" | "secondary" | "tertiary" | "dashed" | "darkBackground" */
-    cancelButtonType?: "primary" | "secondary" | "tertiary" | "dashed" | "darkBackground";
-    /** Color variants for new business themes: "primary" | "secondary" | "tertiary" | "dashed" | "darkBackground" */
-    confirmButtonType?: "primary" | "secondary" | "tertiary" | "dashed" | "darkBackground";
+    /** Color variants for new business themes: "primary" | "secondary" | "tertiary" | "darkBackground" */
+    cancelButtonType?: "primary" | "secondary" | "tertiary" | "darkBackground";
+    /** Color variants for new business themes: "primary" | "secondary" | "tertiary" | "darkBackground" */
+    confirmButtonType?: "primary" | "secondary" | "tertiary" | "darkBackground";
     /** Customise the cancel button label */
     cancelLabel?: string;
     /** Customise the confirm button label */

package/esm/components/date/date.component.js

@@ -11,10 +11,8 @@ import Textbox from "../textbox";
 import DatePicker from "./__internal__/date-picker";
 import DateRangeContext from "../date-range/date-range.context";
 import useClickAwayListener from "../../hooks/__internal__/useClickAwayListener";
-import Logger from "../../__internal__/utils/logger";
 import useFormSpacing from "../../hooks/__internal__/useFormSpacing";
 import guid from "../../__internal__/utils/helpers/guid";
-let deprecateInputRefWarnTriggered = false;
 const DateInput = /*#__PURE__*/React.forwardRef(({
   adaptiveLabelBreakpoint,
   allowEmptyValue,
@@ -38,7 +36,6 @@ const DateInput = /*#__PURE__*/React.forwardRef(({
   size = "medium",
   tooltipPosition,
   value,
-  inputRef,
   inputWidth,
   labelWidth,
   maxWidth,
@@ -67,10 +64,6 @@ const DateInput = /*#__PURE__*/React.forwardRef(({
   const [selectedDays, setSelectedDays] = useState(checkISOFormatAndLength(value) ? parseISODate(value) : parseDate(format, value));
   const isInitialValue = useRef(true);
   const pickerTabGuardId = useRef(guid());
-  if (!deprecateInputRefWarnTriggered && inputRef) {
-    deprecateInputRefWarnTriggered = true;
-    Logger.deprecate("The `inputRef` prop in `DateInput` component is deprecated and will soon be removed. Please use `ref` instead.");
-  }
   const computeInvalidRawValue = inputValue => allowEmptyValue && !inputValue.length ? inputValue : null;
   const buildCustomEvent = ev => {
     const {
@@ -286,7 +279,6 @@ const DateInput = /*#__PURE__*/React.forwardRef(({
     maxWidth: maxWidth,
     inputWidth: inputWidth
   }), /*#__PURE__*/React.createElement(Textbox, _extends({}, filterOutStyledSystemSpacingProps(rest), {
-    inputRef: inputRef,
     value: computedValue(),
     onBlur: handleBlur,
     onChange: handleChange,
@@ -428,7 +420,6 @@ if (process.env.NODE_ENV !== "production") {
     "inputHint": PropTypes.string,
     "inputMode": PropTypes.oneOf(["decimal", "email", "none", "numeric", "search", "tel", "text", "url"]),
     "inputName": PropTypes.oneOf(["end", "start"]),
-    "inputRef": PropTypes.func,
     "inputWidth": PropTypes.number,
     "is": PropTypes.string,
     "isOptional": PropTypes.bool,

package/esm/components/decimal/decimal.component.js

@@ -6,7 +6,6 @@ import Textbox from "../textbox";
 import LocaleContext from "../../__internal__/i18n-context";
 import usePrevious from "../../hooks/__internal__/usePrevious";
 import Logger from "../../__internal__/utils/logger";
-let deprecateInputRefWarnTriggered = false;
 let deprecateUncontrolledWarnTriggered = false;
 const Decimal = /*#__PURE__*/React.forwardRef(({
   align = "right",
@@ -22,14 +21,9 @@ const Decimal = /*#__PURE__*/React.forwardRef(({
   allowEmptyValue = false,
   locale,
   value,
-  inputRef,
   ...rest
 }, ref) => {
   const l = useContext(LocaleContext);
-  if (!deprecateInputRefWarnTriggered && inputRef) {
-    deprecateInputRefWarnTriggered = true;
-    Logger.deprecate("The `inputRef` prop in `Decimal` component is deprecated and will soon be removed. Please use `ref` instead.");
-  }
   const getSeparator = useCallback(separatorType => {
     const numberWithGroupAndDecimalSeparator = 10000.1;
     return Intl.NumberFormat(locale || l.locale()).formatToParts(numberWithGroupAndDecimalSeparator).find(part => part.type === separatorType)?.value;
@@ -182,8 +176,7 @@ const Decimal = /*#__PURE__*/React.forwardRef(({
     value: stateValue,
     "data-component": "decimal",
     id: id,
-    ref: ref,
-    inputRef: inputRef
+    ref: ref
   }, rest)), /*#__PURE__*/React.createElement("input", {
     name: name,
     value: toStandardDecimal(stateValue),
@@ -299,7 +292,6 @@ if (process.env.NODE_ENV !== "production") {
     "inputHint": PropTypes.string,
     "inputIcon": PropTypes.oneOf(["accessibility_web", "add", "admin", "alert_on", "alert", "analysis", "app_facebook", "app_instagram", "app_tiktok", "app_twitter", "app_youtube", "apps", "arrow_bottom_right_circle", "arrow_down", "arrow_left_boxed", "arrow_left_right_small", "arrow_left_small", "arrow_left", "arrow_right_small", "arrow_right", "arrow_top_left_circle", "arrow_up", "arrow", "arrows_left_right", "attach", "bank_with_card", "bank", "basket_with_squares", "basket", "bed", "bill_paid", "bill_unpaid", "bin", "block_arrow_right", "blocked_square", "blocked", "bold", "box_arrow_left", "box_arrow_right", "boxed_shapes", "bulk_destroy", "bullet_list_dotted", "bullet_list_numbers", "bullet_list", "business", "calendar_pay_date", "calendar_today", "calendar", "call", "camera", "car_lock", "car_money", "car_repair", "card_view", "card_wallet", "caret_down", "caret_large_down", "caret_large_left", "caret_large_right", "caret_large_up", "caret_left", "caret_right", "caret_up", "cart", "cash", "chart_bar", "chart_line", "chart_pie", "chat_notes", "chat", "check_all", "check_none", "chevron_down_thick", "chevron_down", "chevron_left_thick", "chevron_left", "chevron_right_thick", "chevron_right", "chevron_up_thick", "chevron_up", "circle_with_dots", "circles_connection", "clock", "close", "cloud_co2", "coins", "collaborate", "computer_clock", "connect_off", "connect", "construction", "contact_card", "contacts", "copy", "create", "credit_card_slash", "credit_card", "cross_circle", "cross", "csv", "dashboard", "delete", "delivery", "disconnect", "disputed", "document_right_align", "document_tick", "document_vertical_lines", "download", "draft", "drag_vertical", "drag", "drill", "dropdown", "duplicate", "edit", "edited", "ellipsis_horizontal", "ellipsis_vertical", "email_switch", "email", "entry", "envelope_dollar", "envelope_euro", "error_square", "error", "euro", "expand", "factory", "favourite_lined", "favourite", "fax", "feedback", "file_excel", "file_generic", "file_image", "file_pdf", "file_word", "files_leaning", "filter_new", "filter", "fit_height", "fit_width", "flag", "folder", "form_refresh", "gift", "go", "graduation_hat", "graph", "grid", "hand_cash_coins", "hand_cash_note", "heart_pulse", "help", "hide", "home", "image", "in_progress", "in_transit", "individual", "info", "intranet", "italic", "job_seeked", "key", "laptop", "leaf", "ledger_arrow_left", "ledger_arrow_right", "ledger", "lightbulb_off", "lightbulb_on", "like_no", "like", "link_cloud", "link_on", "link", "list_view", "location", "locked", "logout", "lookup", "marker", "message", "microphone", "minimise", "minus_large", "minus", "mobile", "money_bag", "none", "old_warning", "palm_tree", "pause_circle", "pause", "pdf", "people_switch", "people", "percentage_boxed", "person_info", "person_tick", "person", "petrol_pump", "phone", "piggy_bank", "pin", "plane", "play_circle", "play", "plus_large", "plus", "pound", "print", "progress", "progressed", "protect", "question_hollow", "question_mark", "question", "recruiting", "refresh_clock", "refresh", "remove", "sage_coin", "save", "scan", "search", "send", "services", "settings_old", "settings", "share", "shop", "sort_down", "sort_up", "spanner", "split_container", "split", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "submitted", "support_online", "sync", "tag", "talk", "target_man", "target", "theatre_masks", "three_boxes", "tick_circle", "tick_thick", "tick", "true_tick", "u_turn_left", "u_turn_right", "undo", "unlocked", "upload", "uploaded", "video", "view", "volunteering", "warning", "website", "welfare"]),
     "inputMode": PropTypes.oneOf(["decimal", "email", "none", "numeric", "search", "tel", "text", "url"]),
-    "inputRef": PropTypes.func,
     "inputWidth": PropTypes.number,
     "is": PropTypes.string,
     "isOptional": PropTypes.bool,

package/esm/components/grouped-character/grouped-character.component.js

@@ -21,7 +21,6 @@ const buildCustomTarget = ({
     value
   };
 };
-let deprecateInputRefWarnTriggered = false;
 let deprecateUncontrolledWarnTriggered = false;
 const GroupedCharacter = /*#__PURE__*/React.forwardRef(({
   defaultValue,
@@ -30,7 +29,6 @@ const GroupedCharacter = /*#__PURE__*/React.forwardRef(({
   onChange,
   separator: rawSeparator,
   value: externalValue,
-  inputRef,
   ...rest
 }, ref) => {
   const [internalValue, setInternalValue] = useState(defaultValue || "");
@@ -38,10 +36,6 @@ const GroupedCharacter = /*#__PURE__*/React.forwardRef(({
   const separator = rawSeparator.substring(0, 1); // Ensure max length is 1
 
   const maxRawLength = groups.reduce(toSum);
-  if (!deprecateInputRefWarnTriggered && inputRef) {
-    deprecateInputRefWarnTriggered = true;
-    Logger.deprecate("The `inputRef` prop in `GroupedCharacter` component is deprecated and will soon be removed. Please use `ref` instead.");
-  }
   if (!deprecateUncontrolledWarnTriggered && !isControlled) {
     deprecateUncontrolledWarnTriggered = true;
     Logger.deprecate("Uncontrolled behaviour in `Grouped Character` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
@@ -114,7 +108,6 @@ const GroupedCharacter = /*#__PURE__*/React.forwardRef(({
     onChange: handleChange,
     onBlur: handleBlur,
     onKeyPress: handleKeyPress,
-    inputRef: inputRef,
     ref: ref
   }));
 });
@@ -227,7 +220,6 @@ if (process.env.NODE_ENV !== "production") {
     "inputHint": PropTypes.string,
     "inputIcon": PropTypes.oneOf(["accessibility_web", "add", "admin", "alert_on", "alert", "analysis", "app_facebook", "app_instagram", "app_tiktok", "app_twitter", "app_youtube", "apps", "arrow_bottom_right_circle", "arrow_down", "arrow_left_boxed", "arrow_left_right_small", "arrow_left_small", "arrow_left", "arrow_right_small", "arrow_right", "arrow_top_left_circle", "arrow_up", "arrow", "arrows_left_right", "attach", "bank_with_card", "bank", "basket_with_squares", "basket", "bed", "bill_paid", "bill_unpaid", "bin", "block_arrow_right", "blocked_square", "blocked", "bold", "box_arrow_left", "box_arrow_right", "boxed_shapes", "bulk_destroy", "bullet_list_dotted", "bullet_list_numbers", "bullet_list", "business", "calendar_pay_date", "calendar_today", "calendar", "call", "camera", "car_lock", "car_money", "car_repair", "card_view", "card_wallet", "caret_down", "caret_large_down", "caret_large_left", "caret_large_right", "caret_large_up", "caret_left", "caret_right", "caret_up", "cart", "cash", "chart_bar", "chart_line", "chart_pie", "chat_notes", "chat", "check_all", "check_none", "chevron_down_thick", "chevron_down", "chevron_left_thick", "chevron_left", "chevron_right_thick", "chevron_right", "chevron_up_thick", "chevron_up", "circle_with_dots", "circles_connection", "clock", "close", "cloud_co2", "coins", "collaborate", "computer_clock", "connect_off", "connect", "construction", "contact_card", "contacts", "copy", "create", "credit_card_slash", "credit_card", "cross_circle", "cross", "csv", "dashboard", "delete", "delivery", "disconnect", "disputed", "document_right_align", "document_tick", "document_vertical_lines", "download", "draft", "drag_vertical", "drag", "drill", "dropdown", "duplicate", "edit", "edited", "ellipsis_horizontal", "ellipsis_vertical", "email_switch", "email", "entry", "envelope_dollar", "envelope_euro", "error_square", "error", "euro", "expand", "factory", "favourite_lined", "favourite", "fax", "feedback", "file_excel", "file_generic", "file_image", "file_pdf", "file_word", "files_leaning", "filter_new", "filter", "fit_height", "fit_width", "flag", "folder", "form_refresh", "gift", "go", "graduation_hat", "graph", "grid", "hand_cash_coins", "hand_cash_note", "heart_pulse", "help", "hide", "home", "image", "in_progress", "in_transit", "individual", "info", "intranet", "italic", "job_seeked", "key", "laptop", "leaf", "ledger_arrow_left", "ledger_arrow_right", "ledger", "lightbulb_off", "lightbulb_on", "like_no", "like", "link_cloud", "link_on", "link", "list_view", "location", "locked", "logout", "lookup", "marker", "message", "microphone", "minimise", "minus_large", "minus", "mobile", "money_bag", "none", "old_warning", "palm_tree", "pause_circle", "pause", "pdf", "people_switch", "people", "percentage_boxed", "person_info", "person_tick", "person", "petrol_pump", "phone", "piggy_bank", "pin", "plane", "play_circle", "play", "plus_large", "plus", "pound", "print", "progress", "progressed", "protect", "question_hollow", "question_mark", "question", "recruiting", "refresh_clock", "refresh", "remove", "sage_coin", "save", "scan", "search", "send", "services", "settings_old", "settings", "share", "shop", "sort_down", "sort_up", "spanner", "split_container", "split", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "submitted", "support_online", "sync", "tag", "talk", "target_man", "target", "theatre_masks", "three_boxes", "tick_circle", "tick_thick", "tick", "true_tick", "u_turn_left", "u_turn_right", "undo", "unlocked", "upload", "uploaded", "video", "view", "volunteering", "warning", "website", "welfare"]),
     "inputMode": PropTypes.oneOf(["decimal", "email", "none", "numeric", "search", "tel", "text", "url"]),
-    "inputRef": PropTypes.func,
     "inputWidth": PropTypes.number,
     "is": PropTypes.string,
     "isOptional": PropTypes.bool,

package/esm/components/icon/icon.component.d.ts

@@ -1,10 +1,11 @@
 import React from "react";
 import { MarginProps } from "styled-system";
+import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
 import { StyledIconProps } from "./icon.style";
 import { IconType } from "./icon-type";
 import { TooltipPositions } from "../tooltip/tooltip.config";
 export declare type LegacyIconTypes = "help" | "maintenance" | "new" | "success" | "messages";
-export interface IconProps extends Omit<StyledIconProps, "type">, MarginProps {
+export interface IconProps extends Omit<StyledIconProps, "type">, MarginProps, Omit<TagProps, "data-component"> {
     /** Set whether icon should be recognised by assistive technologies */
     "aria-hidden"?: boolean;
     /** Aria label for accessibility purposes */

package/esm/components/icon/icon.component.js

@@ -4,7 +4,6 @@ import invariant from "invariant";
 import Tooltip from "../tooltip";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import { TooltipContext } from "../../__internal__/tooltip-provider";
-import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import StyledIcon from "./icon.style";
 import { ICON_TOOLTIP_POSITIONS } from "./icon-config";
 import { TabTitleContext } from "../tabs/__internal__/tab-title";
@@ -18,6 +17,8 @@ const Icon = /*#__PURE__*/React.forwardRef(({
   bgSize,
   className,
   color,
+  "data-element": dataElement,
+  "data-role": dataRole,
   disabled,
   focusable = true,
   fontSize = "small",
@@ -91,7 +92,9 @@ const Icon = /*#__PURE__*/React.forwardRef(({
     bgShape,
     className: className || undefined,
     color,
-    "data-element": iconType,
+    "data-component": "icon",
+    "data-element": dataElement ?? iconType,
+    "data-role": dataRole ?? "icon",
     disabled: disabledFromContext || disabled,
     fontSize,
     hasTooltip,
@@ -102,7 +105,6 @@ const Icon = /*#__PURE__*/React.forwardRef(({
     role,
     tabIndex: computedTabIndex,
     type: iconType,
-    ...tagComponent("icon", rest),
     ...filterStyledSystemMarginProps(rest)
   };
   const shouldShowTooltip = () => {
@@ -135,6 +137,8 @@ if (process.env.NODE_ENV !== "production") {
     "bgSize": PropTypes.oneOf(["extra-large", "extra-small", "large", "medium", "small"]),
     "className": PropTypes.string,
     "color": PropTypes.string,
+    "data-element": PropTypes.string,
+    "data-role": PropTypes.string,
     "disabled": PropTypes.bool,
     "focusable": PropTypes.bool,
     "fontSize": PropTypes.oneOf(["extra-large", "large", "medium", "small"]),

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

@@ -30,7 +30,7 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
   onClick,
   ...rest
 }, ref) => {
-  const submenuRef = useRef(null);
+  const [submenuRef, setSubmenuRef] = useState(null);
   const submenuId = useRef(guid());
   const menuContext = useContext(MenuContext);
   const {
@@ -43,6 +43,7 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
   const [submenuFocusId, setSubmenuFocusId] = useState(null);
   const [submenuItemIds, setSubmenuItemIds] = useState([]);
   const [characterString, setCharacterString] = useState("");
+  const [applyFocusRadius, setApplyFocusRadius] = useState(false);
   const shiftTabPressed = useRef(false);
   const focusFirstMenuItemOnOpen = useRef(false);
   const numberOfChildren = submenuItemIds.length;
@@ -51,15 +52,15 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
   } = useContext(FixedNavigationBarContext);
   const onSubmenuOpen = useStableCallback(onSubmenuOpenProp);
   const blockIndex = useMemo(() => {
-    const items = submenuRef.current?.querySelectorAll(BLOCK_INDEX_SELECTOR);
+    const items = submenuRef?.querySelectorAll(BLOCK_INDEX_SELECTOR);
     if (items && submenuOpen && numberOfChildren) {
       const childrenArray = Array.from(items);
-      const scrollableBlock = submenuRef.current?.querySelector(`[data-component='${SCROLLABLE_BLOCK}']`);
+      const scrollableBlock = submenuRef?.querySelector(`[data-component='${SCROLLABLE_BLOCK}']`);
       const index = scrollableBlock ? childrenArray.indexOf(scrollableBlock) : -1;
       return scrollableBlock?.querySelector(`[data-component='${SCROLLABLE_BLOCK_PARENT}']`) ? index + 1 : index;
     }
     return -1;
-  }, [submenuOpen, numberOfChildren]);
+  }, [submenuOpen, numberOfChildren, submenuRef]);
   const characterTimer = useRef(null);
   const startCharacterTimeout = useCallback(() => {
     characterTimer.current = setTimeout(() => {
@@ -77,6 +78,35 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
     setSubmenuOpen(true);
     setOpenSubmenuId(submenuId.current);
   }, [setOpenSubmenuId]);
+  const lastMenuItemElement = useRef();
+  useEffect(() => {
+    const handleBorderRadiusStyling = () => {
+      // Finds all ul elements that are not submenus
+      const ulElements = Array.from(submenuRef?.querySelectorAll("ul:not([data-component='submenu'])") || /* istanbul ignore next */[]);
+
+      // Terminate early if there are no ul elements as we have nothing we need to apply styles to.
+      if (ulElements.length === 0) return;
+
+      // Get the last menu item in the submenu
+      const lastMenuItem = Array.from(submenuRef?.querySelectorAll("[data-component='menu-item']") || /* istanbul ignore next */[]).pop();
+      lastMenuItemElement.current = lastMenuItem;
+
+      // Get the last segment block
+      const lastSegmentBlock = ulElements.pop();
+
+      // 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 if the last item in the segment block is the same as the last MenuItem in the submenu
+      const menuItemsMatch = !!lastMenuItemInSegmentBlock && lastMenuItemInSegmentBlock === lastMenuItem;
+      setApplyFocusRadius(menuItemsMatch);
+    };
+    if (submenuOpen && submenuRef) {
+      handleBorderRadiusStyling();
+    }
+  }, [submenuOpen, submenuRef]);
   useEffect(() => {
     if (submenuOpen && onSubmenuOpen) {
       onSubmenuOpen();
@@ -144,6 +174,7 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
       if (Events.isUpKey(event)) {
         event.preventDefault();
         shiftTabPressed.current = false;
+        setApplyFocusRadius(false);
         if (nextIndex > 0) {
           nextIndex -= 1;
         }
@@ -194,15 +225,15 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
   }, [submenuItemIds, submenuOpen, href, numberOfChildren, submenuFocusId, findCurrentIndex, openSubmenu, closeSubmenu, onKeyDown, characterString, restartCharacterTimeout, startCharacterTimeout]);
   useEffect(() => {
     /* istanbul ignore else */
-    if (submenuRef.current && children) {
-      const items = submenuRef.current?.querySelectorAll(ALL_CHILDREN_SELECTOR);
+    if (submenuRef && children) {
+      const items = submenuRef?.querySelectorAll(ALL_CHILDREN_SELECTOR);
 
       /* istanbul ignore else */
       if (items) {
         setSubmenuItemIds(Array.from(items).map(item => item.getAttribute("id")));
       }
     }
-  }, [children, submenuOpen]);
+  }, [children, submenuOpen, submenuRef]);
   useEffect(() => {
     if (focusFirstMenuItemOnOpen.current && submenuOpen && !submenuFocusId && submenuItemIds.length) {
       focusFirstMenuItemOnOpen.current = false;
@@ -221,7 +252,7 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
     }
   };
   useEffect(() => {
-    const items = submenuRef.current?.querySelectorAll(ALL_CHILDREN_SELECTOR);
+    const items = submenuRef?.querySelectorAll(ALL_CHILDREN_SELECTOR);
     if (items && characterString !== "") {
       const submenuChildren = Array.from(items);
       const nextItem = characterNavigation(characterString, submenuChildren);
@@ -229,7 +260,7 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
         setSubmenuFocusId(nextItem.id);
       }
     }
-  }, [characterString, submenuItemIds]);
+  }, [submenuRef, characterString, submenuItemIds]);
   if (inFullscreenView) {
     return /*#__PURE__*/React.createElement(StyledSubmenuWrapper, {
       "data-component": "submenu-wrapper",
@@ -251,7 +282,8 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
       variant: variant,
       menuType: menuType,
       inFullscreenView: inFullscreenView,
-      ref: submenuRef
+      ref: setSubmenuRef,
+      applyFocusRadiusStyling: false
     }, /*#__PURE__*/React.createElement(SubmenuContext.Provider, {
       value: {
         handleKeyDown,
@@ -266,7 +298,7 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
     onMouseLeave: () => closeSubmenu(),
     isSubmenuOpen: submenuOpen,
     onClick: handleClickInside,
-    ref: submenuRef
+    ref: setSubmenuRef
   }, /*#__PURE__*/React.createElement(StyledMenuItemWrapper, _extends({}, rest, {
     className: className,
     menuType: menuType,
@@ -289,7 +321,8 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
     variant: variant,
     menuType: menuType,
     role: blockIndex === 0 ? "presentation" : "list",
-    maxHeight: submenuMaxHeight
+    maxHeight: submenuMaxHeight,
+    applyFocusRadiusStyling: applyFocusRadius
   }, /*#__PURE__*/React.createElement(SubmenuContext.Provider, {
     value: {
       submenuFocusId,

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

@@ -11,6 +11,7 @@ interface StyledSubmenuWrapperProps extends SharedStyleProps {
 interface StyledSubmenuProps extends SharedStyleProps, Pick<SubmenuProps, "variant"> {
     submenuDirection?: string;
     maxHeight?: string;
+    applyFocusRadiusStyling: 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

@@ -1,10 +1,13 @@
 import styled, { css } from "styled-components";
+import StyledScrollableBlock from "../../../menu/scrollable-block/scrollable-block.style";
 import { baseTheme } from "../../../../style/themes";
 import { StyledLink } from "../../../link/link.style";
 import { StyledMenuItem } from "../../menu.style";
+import StyledBox from "../../../box/box.style";
 import StyledMenuItemWrapper from "../../menu-item/menu-item.style";
 import StyledIcon from "../../../icon/icon.style";
 import menuConfigVariants from "../../menu.config";
+import { StyledSegmentChildren } from "../../menu-segment-title/menu-segment-title.style";
 const StyledSubmenuWrapper = styled.div`
   position: relative;
   width: fit-content;
@@ -38,7 +41,8 @@ const StyledSubmenu = styled.ul`
   submenuDirection,
   variant,
   inFullscreenView,
-  maxHeight
+  maxHeight,
+  applyFocusRadiusStyling
 }) => css`
     ${!inFullscreenView && menuType && css`
       box-shadow: var(--boxShadow100);
@@ -71,6 +75,32 @@ const StyledSubmenu = styled.ul`
         border-bottom-left-radius: var(--borderRadius100);
         border-bottom-right-radius: var(--borderRadius100);
       }
+
+      & ${StyledSegmentChildren} > ${StyledMenuItem}:last-of-type a,
+      ${StyledSegmentChildren} > ${StyledMenuItem}:last-of-type button,
+      ${StyledSegmentChildren} > ${StyledMenuItem}:last-of-type > span,
+      ${StyledSegmentChildren} > ${StyledMenuItem}:last-of-type > div {
+        border-bottom-right-radius: var(--borderRadius000);
+        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)"};
+        }
+      }
+
+      &&&& ${StyledScrollableBlock} {
+        ${StyledBox} {
+          border-bottom-right-radius: var(--borderRadius000);
+          border-bottom-left-radius: ${applyFocusRadiusStyling ? "var(--borderRadius100)" : "var(--borderRadius000)"};
+
+          ${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)"};
+          }
+        }
+      }
     `}
 
     display: block;

package/esm/components/modal/__internal__/modal-manager.js

@@ -2,7 +2,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 let ModalManagerInstance = /*#__PURE__*/function () {
   function ModalManagerInstance() {
@@ -34,7 +34,7 @@ let ModalManagerInstance = /*#__PURE__*/function () {
     }
     this.modalList = window.__CARBON_INTERNALS_MODAL_LIST;
   }
-  _createClass(ModalManagerInstance, [{
+  return _createClass(ModalManagerInstance, [{
     key: "getTopModal",
     value: function getTopModal() {
       if (!this.modalList.length) {
@@ -93,7 +93,6 @@ let ModalManagerInstance = /*#__PURE__*/function () {
       }
     }
   }]);
-  return ModalManagerInstance;
 }();
 const ModalManager = new ModalManagerInstance();
 export { ModalManagerInstance };

package/esm/components/number/number.component.js

@@ -4,7 +4,6 @@ import PropTypes from "prop-types";
 import Textbox from "../textbox";
 import Logger from "../../__internal__/utils/logger";
 import { ALIGN_DEFAULT, LABEL_VALIDATION_DEFAULT, LABEL_WIDTH_DEFAULT, SIZE_DEFAULT } from "../textbox/textbox.component";
-let deprecateInputRefWarnTriggered = false;
 let deprecateUncontrolledWarnTriggered = false;
 function isValidNumber(value) {
   const regex = new RegExp("^[-]?[0-9]*$");
@@ -15,7 +14,6 @@ const Number = /*#__PURE__*/React.forwardRef(({
   onChange,
   onKeyDown,
   value,
-  inputRef,
   align = ALIGN_DEFAULT,
   labelWidth = LABEL_WIDTH_DEFAULT,
   size = SIZE_DEFAULT,
@@ -24,10 +22,6 @@ const Number = /*#__PURE__*/React.forwardRef(({
 }, ref) => {
   const selectionStart = useRef(null);
   const selectionEnd = useRef(null);
-  if (!deprecateInputRefWarnTriggered && inputRef) {
-    deprecateInputRefWarnTriggered = true;
-    Logger.deprecate("The `inputRef` prop in `Number` component is deprecated and will soon be removed. Please use `ref` instead.");
-  }
   if (!deprecateUncontrolledWarnTriggered && !onChange) {
     deprecateUncontrolledWarnTriggered = true;
     Logger.deprecate("Uncontrolled behaviour in `Number` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
@@ -52,7 +46,6 @@ const Number = /*#__PURE__*/React.forwardRef(({
     onChange: handleOnChange,
     onKeyDown: handleKeyDown,
     ref: ref,
-    inputRef: inputRef,
     align: align,
     labelWidth: labelWidth,
     size: size,
@@ -167,7 +160,6 @@ if (process.env.NODE_ENV !== "production") {
     "inputHint": PropTypes.string,
     "inputIcon": PropTypes.oneOf(["accessibility_web", "add", "admin", "alert_on", "alert", "analysis", "app_facebook", "app_instagram", "app_tiktok", "app_twitter", "app_youtube", "apps", "arrow_bottom_right_circle", "arrow_down", "arrow_left_boxed", "arrow_left_right_small", "arrow_left_small", "arrow_left", "arrow_right_small", "arrow_right", "arrow_top_left_circle", "arrow_up", "arrow", "arrows_left_right", "attach", "bank_with_card", "bank", "basket_with_squares", "basket", "bed", "bill_paid", "bill_unpaid", "bin", "block_arrow_right", "blocked_square", "blocked", "bold", "box_arrow_left", "box_arrow_right", "boxed_shapes", "bulk_destroy", "bullet_list_dotted", "bullet_list_numbers", "bullet_list", "business", "calendar_pay_date", "calendar_today", "calendar", "call", "camera", "car_lock", "car_money", "car_repair", "card_view", "card_wallet", "caret_down", "caret_large_down", "caret_large_left", "caret_large_right", "caret_large_up", "caret_left", "caret_right", "caret_up", "cart", "cash", "chart_bar", "chart_line", "chart_pie", "chat_notes", "chat", "check_all", "check_none", "chevron_down_thick", "chevron_down", "chevron_left_thick", "chevron_left", "chevron_right_thick", "chevron_right", "chevron_up_thick", "chevron_up", "circle_with_dots", "circles_connection", "clock", "close", "cloud_co2", "coins", "collaborate", "computer_clock", "connect_off", "connect", "construction", "contact_card", "contacts", "copy", "create", "credit_card_slash", "credit_card", "cross_circle", "cross", "csv", "dashboard", "delete", "delivery", "disconnect", "disputed", "document_right_align", "document_tick", "document_vertical_lines", "download", "draft", "drag_vertical", "drag", "drill", "dropdown", "duplicate", "edit", "edited", "ellipsis_horizontal", "ellipsis_vertical", "email_switch", "email", "entry", "envelope_dollar", "envelope_euro", "error_square", "error", "euro", "expand", "factory", "favourite_lined", "favourite", "fax", "feedback", "file_excel", "file_generic", "file_image", "file_pdf", "file_word", "files_leaning", "filter_new", "filter", "fit_height", "fit_width", "flag", "folder", "form_refresh", "gift", "go", "graduation_hat", "graph", "grid", "hand_cash_coins", "hand_cash_note", "heart_pulse", "help", "hide", "home", "image", "in_progress", "in_transit", "individual", "info", "intranet", "italic", "job_seeked", "key", "laptop", "leaf", "ledger_arrow_left", "ledger_arrow_right", "ledger", "lightbulb_off", "lightbulb_on", "like_no", "like", "link_cloud", "link_on", "link", "list_view", "location", "locked", "logout", "lookup", "marker", "message", "microphone", "minimise", "minus_large", "minus", "mobile", "money_bag", "none", "old_warning", "palm_tree", "pause_circle", "pause", "pdf", "people_switch", "people", "percentage_boxed", "person_info", "person_tick", "person", "petrol_pump", "phone", "piggy_bank", "pin", "plane", "play_circle", "play", "plus_large", "plus", "pound", "print", "progress", "progressed", "protect", "question_hollow", "question_mark", "question", "recruiting", "refresh_clock", "refresh", "remove", "sage_coin", "save", "scan", "search", "send", "services", "settings_old", "settings", "share", "shop", "sort_down", "sort_up", "spanner", "split_container", "split", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "submitted", "support_online", "sync", "tag", "talk", "target_man", "target", "theatre_masks", "three_boxes", "tick_circle", "tick_thick", "tick", "true_tick", "u_turn_left", "u_turn_right", "undo", "unlocked", "upload", "uploaded", "video", "view", "volunteering", "warning", "website", "welfare"]),
     "inputMode": PropTypes.oneOf(["decimal", "email", "none", "numeric", "search", "tel", "text", "url"]),
-    "inputRef": PropTypes.func,
     "inputWidth": PropTypes.number,
     "is": PropTypes.string,
     "isOptional": PropTypes.bool,

package/esm/components/radio-button/radio-button.component.d.ts

@@ -19,8 +19,6 @@ export interface RadioButtonProps extends Omit<CommonCheckableInputProps, "requi
     tooltipPosition?: "top" | "bottom" | "left" | "right";
     /** Aria label for rendered help component */
     helpAriaLabel?: string;
-    /** A callback to retrieve the input reference (deprecated) */
-    inputRef?: React.Ref<HTMLInputElement>;
 }
 export declare const RadioButton: React.ForwardRefExoticComponent<RadioButtonProps & InternalRadioButtonProps & React.RefAttributes<HTMLInputElement>>;
 declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<RadioButtonProps & InternalRadioButtonProps & React.RefAttributes<HTMLInputElement>>>;

package/esm/components/radio-button/radio-button.component.js

@@ -7,9 +7,7 @@ import CheckableInput from "../../__internal__/checkable-input/checkable-input.c
 import RadioButtonSvg from "./radio-button-svg.component";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import { TooltipProvider } from "../../__internal__/tooltip-provider";
-import Logger from "../../__internal__/utils/logger";
 import { NewValidationContext } from "../carbon-provider/carbon-provider.component";
-let deprecateInputRefWarnTriggered = false;
 const RadioButton = /*#__PURE__*/React.forwardRef(({
   autoFocus,
   checked,
@@ -38,7 +36,6 @@ const RadioButton = /*#__PURE__*/React.forwardRef(({
   "data-element": dataElement,
   "data-role": dataRole,
   helpAriaLabel,
-  inputRef,
   ...props
 }, ref) => {
   const {
@@ -54,10 +51,6 @@ const RadioButton = /*#__PURE__*/React.forwardRef(({
     // trigger focus, as Safari doesn't focus radioButtons on click by default
     event.target.focus();
   }, [onChange]);
-  if (!deprecateInputRefWarnTriggered && inputRef) {
-    deprecateInputRefWarnTriggered = true;
-    Logger.deprecate("The `inputRef` prop in `RadioButton` component is deprecated and will soon be removed. Please use `ref` instead.");
-  }
   const validationProps = {
     disabled,
     inputWidth,
@@ -96,7 +89,7 @@ const RadioButton = /*#__PURE__*/React.forwardRef(({
      * opposite way around by default)
      */
     reverse: !reverse,
-    ref: ref || inputRef,
+    ref,
     ...props
   };
   !!props.children ? process.env.NODE_ENV !== "production" ? invariant(false, "This component is meant to be used as a self-closing tag. " + "You should probably use the label prop instead.") : invariant(false) : void 0;
@@ -218,9 +211,6 @@ if (process.env.NODE_ENV !== "production") {
     "inline": PropTypes.bool,
     "inlist": PropTypes.any,
     "inputMode": PropTypes.oneOf(["decimal", "email", "none", "numeric", "search", "tel", "text", "url"]),
-    "inputRef": PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-      "current": PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.object]).isRequired
-    })]),
     "inputWidth": PropTypes.number,
     "is": PropTypes.string,
     "isOptional": PropTypes.bool,