carbon-react 154.5.0 → 154.6.0

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

@@ -6,14 +6,20 @@ interface BaseItemProps extends MarginProps, PaddingProps {
     children?: ReactNode;
     /** Custom icon to be displayed. Takes precedence over `icon` if both are specified. */
     customIcon?: ReactNode;
-    /** The destination URL. Providing this will render the menu item as an anchor link. */
+    /** External URL or anchor link for standard HTML navigation. Providing this will render the menu item as an anchor link. */
     href?: string;
     /** The Carbon icon to be displayed. Defers to `customIcon` if both are defined. */
     icon?: IconType;
     /** The unique identifier for the menu item. */
     id: string;
     /** The label for the menu item. */
-    label: string;
+    label: React.ReactNode;
+    /** A custom click handler to run when an anchor link is clicked */
+    onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
+    /** The rel attribute to be used for the underlying <a> tag */
+    rel?: string;
+    /** The target to use for the menu item. */
+    target?: string;
 }
 export interface ResponsiveVerticalMenuItemProps extends Omit<BaseItemProps, "id"> {
     /** The unique identifier for the menu item. */

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

@@ -1 +1 @@
-import{jsx as e,Fragment as n,jsxs as t}from"react/jsx-runtime";import r,{useRef as i,useContext as o,useEffect as c,createContext as l,forwardRef as d,useMemo as a,useState as s}from"react";import{StyledResponsiveMenuItem as p,StyledIcon as u,StyledNestedMenu as f,StyledResponsiveMenuAction as h,StyledMenuItemContent as m}from"./responsive-vertical-menu-item.style.js";import{useDepth as v,IncreaseDepth as b}from"../__internal__/depth.context.js";import{useMenuFocus as y}from"../__internal__/focus.context.js";import{useResponsiveVerticalMenu as O}from"../responsive-vertical-menu.context.js";import j from"../../../icon/icon.component.js";import g from"../../../../__internal__/utils/helpers/guid/index.js";function I(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function x(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{},r=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),r.forEach((function(n){I(e,n,t[n])}))}return e}function w(e,n){return n=null!=n?n:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):function(e){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);n.push.apply(n,t)}return n}(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})),e}function _(e,n){if(null==e)return{};var t,r,i=function(e,n){if(null==e)return{};var t,r,i={},o=Object.keys(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=0||(i[t]=e[t]);return i}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(i[t]=e[t])}return i}const P=l(void 0),D=({customIcon:n,depth:r,hasChildren:i,icon:o,label:c,responsive:l})=>t(m,n?{"data-component":"responsive-vertical-menu-custom-icon","data-role":"responsive-vertical-menu-custom-icon",depth:r,hasChildren:i,icon:!0,responsive:l,children:[n,c]}:{"data-component":"responsive-vertical-menu-icon","data-role":"responsive-vertical-menu-icon",depth:r,hasChildren:i,icon:!!o,responsive:l,children:[o&&e(j,{type:o}),c]}),k=d(((i,l)=>{var{children:d,customIcon:m,icon:b,id:j,href:g,label:I}=i,k=_(i,["children","customIcon","icon","id","href","label"]);const{activeMenuItem:C,containerRef:$,responsiveMode:S,setActiveMenuItem:M,reducedMotion:K}=O(),{expandItem:A,focusItem:E,getRegisteredItems:F,moveFocus:q,registerMenuItem:R}=y(),T=v(),z=(null==C?void 0:C.id)===j,B=r.Children.count(d)>0,G=o(P),H=a((()=>S&&0===T),[T,S]),[J,L]=s(H&&B);c((()=>{R(j,l,G)}),[j,G,l,R]);const N=e=>{let n,t;switch(e.key){case"Tab":var r;if(t=(null===(r=$.current)||void 0===r?void 0:r.querySelectorAll(`[data-depth="${T}"]`))||[],n=Array.from(t),0===T&&B&&(null==C?void 0:C.id)===j&&(e.preventDefault(),q(e.shiftKey?"lastChild":"firstChild")),1===T){const t=n.findIndex((e=>e.id===j)),r=0===t;t===n.length-1&&(!B||B&&!J)&&(e.shiftKey||(e.preventDefault(),q("parent"))),r&&e.shiftKey&&(e.preventDefault(),q("parent"))}if(2===T&&n.findIndex((e=>e.id===j))===n.length-1){const n=F(),t=n.find((e=>e.id===G)),r=n.find((e=>e.id===(null==t?void 0:t.parentId)));if(r){var i;const n=Array.from((null===(i=$.current)||void 0===i?void 0:i.querySelectorAll(`[data-depth="${T-1}"]`))||[]);n.findIndex((e=>e.id===G))===n.length-1&&!e.shiftKey&&(e.preventDefault(),E(r.id))}}break;case"Enter":case" ":if(e.preventDefault(),H)return;if(B)if(0!==T||S)L(!J),A(j,!J);else{const e=(null==C?void 0:C.id)===j;M(e?null:{id:j,label:I,children:d})}else g&&"Enter"===e.key&&(window.location.href=g)}};return e(n,{children:B?t(n,{children:[t(p,w(x({active:z,"aria-expanded":z||J,"data-component":`responsive-vertical-menu-item-${j}`,"data-depth":T,"data-role":`responsive-vertical-menu-item-${j}`,depth:T,hasIcon:!!b||!!m,id:j,onClick:()=>{if(!H){if(0!==T||S)L(!J),A(j,!J);else{const e=(null==C?void 0:C.id)===j;M(e?null:{id:j,label:I,children:d})}E(j)}},onKeyDown:e=>{S||N(e)},onFocus:()=>E(j),ref:l,responsive:S,tabIndex:H?-1:0,type:"button"},k),{children:[e(D,{customIcon:m,depth:T,hasChildren:!0,icon:b,label:I,responsive:S}),!H&&e(u,{"data-component":"responsive-vertical-menu-expander-icon","data-role":"responsive-vertical-menu-expander-icon",depth:T,expanded:J||z,reduceMotion:!!K,type:T>=1?"chevron_down_thick":"chevron_right_thick"})]})),J&&e(f,{"data-component":`${j}-nested-menu`,"data-role":`${j}-nested-menu`,depth:T,hasIcon:!!b||!!m,id:`${j}-nested-menu`,responsive:S,children:e(P.Provider,{value:j,children:d})})]}):e(h,w(x({"data-component":`responsive-vertical-menu-item-${j}`,"data-depth":T,"data-role":`responsive-vertical-menu-item-${j}`,depth:T,href:g,id:j,onFocus:()=>E(j),onKeyDown:e=>{S||N(e)},ref:l,responsive:S,tabIndex:0},k),{children:e(D,{customIcon:m,depth:T,hasChildren:!1,icon:b,label:I,responsive:S})}))})})),C=n=>{var{children:t,id:r,label:l}=n,d=_(n,["children","id","label"]);const a=v(),s=i(null),{registerMenuItem:p}=y(),u=o(P),f=i(r||g());return c((()=>{p(f.current,s,u)}),[r,p,u]),e(k,w(x({id:f.current,label:l},d),{"data-depth":a,ref:s,children:t&&e(P.Provider,{value:r,children:e(b,{children:t})})}))};export{C as ResponsiveVerticalMenuItem,C as default};
+import{jsx as e,Fragment as n,jsxs as t}from"react/jsx-runtime";import r,{useRef as o,useContext as i,useEffect as c,createContext as l,forwardRef as a,useMemo as d,useState as s}from"react";import{StyledResponsiveMenuItem as p,StyledIcon as u,StyledNestedMenuWrapper as h,StyledNestedMenu as m,StyledResponsiveMenuAction as f,StyledMenuItemContent as v}from"./responsive-vertical-menu-item.style.js";import{useDepth as b,IncreaseDepth as y}from"../__internal__/depth.context.js";import{useMenuFocus as O}from"../__internal__/focus.context.js";import{useResponsiveVerticalMenu as g}from"../responsive-vertical-menu.context.js";import j from"../../../icon/icon.component.js";import I from"../../../../__internal__/utils/helpers/guid/index.js";function w(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function x(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{},r=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),r.forEach((function(n){w(e,n,t[n])}))}return e}function _(e,n){return n=null!=n?n:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):function(e){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);n.push.apply(n,t)}return n}(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})),e}function P(e,n){if(null==e)return{};var t,r,o=function(e,n){if(null==e)return{};var t,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}const k=l(void 0),C=({customIcon:n,depth:r,hasChildren:o,icon:i,label:c,responsive:l})=>t(v,n?{"data-component":"responsive-vertical-menu-custom-icon","data-role":"responsive-vertical-menu-custom-icon",depth:r,hasChildren:o,icon:!0,responsive:l,children:[n,c]}:{"data-component":"responsive-vertical-menu-icon","data-role":"responsive-vertical-menu-icon",depth:r,hasChildren:o,icon:!!i,responsive:l,children:[i&&e(j,{type:i}),c]}),D=a(((o,l)=>{var{children:a,customIcon:v,icon:y,id:j,href:I,label:w,onClick:D,rel:$,target:S}=o,M=P(o,["children","customIcon","icon","id","href","label","onClick","rel","target"]);const{activeMenuItem:K,containerRef:A,responsiveMode:E,setActiveMenuItem:F,reducedMotion:q}=g(),{expandItem:R,focusItem:T,getRegisteredItems:z,moveFocus:B,registerMenuItem:G}=O(),H=b(),J=(null==K?void 0:K.id)===j,L=r.Children.count(a)>0,N=i(k),Q=d((()=>E&&0===H),[H,E]),[U,V]=s(Q&&L);c((()=>{G(j,l,N)}),[j,N,l,G]);const W=e=>{let n,t;switch(e.key){case"Tab":var r;if(t=(null===(r=A.current)||void 0===r?void 0:r.querySelectorAll(`[data-depth="${H}"]`))||[],n=Array.from(t),0===H&&L&&(null==K?void 0:K.id)===j&&(e.preventDefault(),B(e.shiftKey?"lastChild":"firstChild")),1===H){const t=n.findIndex((e=>e.id===j)),r=0===t;t===n.length-1&&(!L||L&&!U)&&(e.shiftKey||(e.preventDefault(),B("parent"))),r&&e.shiftKey&&(e.preventDefault(),B("parent"))}if(2===H&&n.findIndex((e=>e.id===j))===n.length-1){const n=z(),t=n.find((e=>e.id===N)),r=n.find((e=>e.id===(null==t?void 0:t.parentId)));if(r){var o;const n=Array.from((null===(o=A.current)||void 0===o?void 0:o.querySelectorAll(`[data-depth="${H-1}"]`))||[]);n.findIndex((e=>e.id===N))===n.length-1&&!e.shiftKey&&(e.preventDefault(),T(r.id))}}break;case"Enter":case" ":if(e.preventDefault(),Q)return;if(L)if(0!==H||E)V(!U),R(j,!U);else{const e=(null==K?void 0:K.id)===j;F(e?null:{id:j,label:w,children:a})}else I&&"Enter"===e.key&&(window.location.href=I)}};return e(n,{children:L?t(n,{children:[t(p,_(x({active:J,"aria-expanded":J||U,"data-component":`responsive-vertical-menu-item-${j}`,"data-depth":H,"data-role":`responsive-vertical-menu-item-${j}`,depth:H,hasIcon:!!y||!!v,id:j,onClick:()=>{if(!Q){if(0!==H||E)V(!U),R(j,!U);else{const e=(null==K?void 0:K.id)===j;F(e?null:{id:j,label:w,children:a})}T(j)}},onKeyDown:e=>{E||W(e)},onFocus:()=>T(j),ref:l,responsive:E,tabIndex:Q?-1:0,type:"button"},M),{children:[e(C,{customIcon:v,depth:H,hasChildren:!0,icon:y,label:w,responsive:E}),!Q&&e(u,{"data-component":"responsive-vertical-menu-expander-icon","data-role":"responsive-vertical-menu-expander-icon",depth:H,expanded:U||J,reduceMotion:!!q,type:H>=1?"chevron_down_thick":"chevron_right_thick"})]})),U&&e(h,{"data-component":`${j}-nested-menu-wrapper`,"data-role":`${j}-nested-menu-wrapper`,depth:H,hasIcon:!!y||!!v,responsive:E,children:e(m,{"data-component":`${j}-nested-menu`,"data-role":`${j}-nested-menu`,depth:H,hasIcon:!!y||!!v,id:`${j}-nested-menu`,responsive:E,children:e(k.Provider,{value:j,children:a})})})]}):e(f,_(x({"data-component":`responsive-vertical-menu-item-${j}`,"data-depth":H,"data-role":`responsive-vertical-menu-item-${j}`,depth:H,href:I,id:j,onClick:D,onFocus:()=>T(j),onKeyDown:e=>{E||W(e)},ref:l,rel:$,responsive:E,tabIndex:0,target:S},M),{children:e(C,{customIcon:v,depth:H,hasChildren:!1,icon:y,label:w,responsive:E})}))})})),$=n=>{var{children:t,id:r,label:l}=n,a=P(n,["children","id","label"]);const d=b(),s=o(null),{registerMenuItem:p}=O(),u=i(k),h=o(r||I());return c((()=>{p(h.current,s,u)}),[r,p,u]),e(D,_(x({id:h.current,label:l},a),{"data-depth":d,ref:s,children:t&&e(k.Provider,{value:r,children:e(y,{children:t})})}))};export{$ as ResponsiveVerticalMenuItem,$ as default};

package/esm/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu-item/responsive-vertical-menu-item.style.d.ts

@@ -1,21 +1,27 @@
 /// <reference types="react" />
+interface StyledMenuItemContentProps {
+    customIcon?: boolean;
+    depth: number;
+    hasChildren?: boolean;
+    icon?: boolean;
+    responsive?: boolean;
+}
 interface StyledResponsiveMenuItemProps {
     active?: boolean;
     depth: number;
     hasIcon?: boolean;
     responsive?: boolean;
 }
-interface StyledMenuItemContentProps {
-    customIcon?: boolean;
+interface StyledIconProps {
     depth: number;
-    hasChildren?: boolean;
-    icon?: boolean;
-    responsive?: boolean;
+    expanded: boolean;
+    reduceMotion: boolean;
 }
+export declare const StyledIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, StyledIconProps, never>;
 export declare const StyledMenuItemContent: import("styled-components").StyledComponent<"span", any, StyledMenuItemContentProps, never>;
-export declare const StyledResponsiveMenuItem: import("styled-components").StyledComponent<"button", any, StyledResponsiveMenuItemProps, never>;
-export declare const StyledResponsiveMenuAction: import("styled-components").StyledComponent<"a", any, {
+export declare const StyledNestedMenuWrapper: import("styled-components").StyledComponent<"div", any, {
     depth: number;
+    hasIcon?: boolean | undefined;
     responsive?: boolean | undefined;
 }, never>;
 export declare const StyledNestedMenu: import("styled-components").StyledComponent<"div", any, {
@@ -23,9 +29,9 @@ export declare const StyledNestedMenu: import("styled-components").StyledCompone
     hasIcon?: boolean | undefined;
     responsive?: boolean | undefined;
 }, never>;
-export declare const StyledIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, {
+export declare const StyledResponsiveMenuItem: import("styled-components").StyledComponent<"button", any, StyledResponsiveMenuItemProps, never>;
+export declare const StyledResponsiveMenuAction: import("styled-components").StyledComponent<"a", any, {
     depth: number;
-    expanded: boolean;
-    reduceMotion: boolean;
+    responsive?: boolean | undefined;
 }, never>;
 export {};

package/esm/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu-item/responsive-vertical-menu-item.style.js

@@ -1 +1 @@
-import e,{css as t}from"styled-components";import{margin as i,padding as o}from"styled-system";import n from"../../../icon/icon.component.js";import r from"../../../../style/utils/add-focus-styling.js";const a=(e,t)=>e&&t?"180deg":"0deg",s=e.span.withConfig({displayName:"responsive-vertical-menu-item.style__StyledMenuItemContent",componentId:"sc-9874a804-0"})(["align-items:center;display:flex;flex-direction:row;gap:var(--spacing100);svg{margin-right:var(--spacing100);max-width:var(--sizing300);min-width:var(--sizing300);}",""],(({customIcon:e,depth:i,hasChildren:o,icon:n,responsive:r})=>t(i>0&&r?["width:100%;"]:0===i&&o&&r?["color:#ffffffcc;cursor:default;"]:e||n?["width:81%;"]:["width:92%;"]))),c=e.button.withConfig({displayName:"responsive-vertical-menu-item.style__StyledResponsiveMenuItem",componentId:"sc-9874a804-1"})(["align-items:center;background-color:transparent;border:none;border-radius:var(--borderRadius100);color:var(--colorsUtilityYang100);cursor:pointer;display:flex;flex-direction:row;font-size:14px;font-weight:500;justify-content:space-between;min-height:var(--sizing500);padding:0 15px;width:100%;max-width:340px;"," "," "," "," &:hover{background-color:var(--colorsActionMajor500);}",' [data-component="icon"]{color:var(--colorsUtilityYang100);margin-right:var(--spacing100);}&:focus{',"}"],i,o,(({depth:e,responsive:i})=>e>0&&i&&t(["cursor:default;justify-content:space-around;width:80%;"])),(({depth:e,responsive:i})=>0===e&&i&&t(["padding:0;"])),(({active:e,responsive:i})=>e&&!i&&t(["background-color:var(--colorsGray850);"])),r(!0)),d=e.a.withConfig({displayName:"responsive-vertical-menu-item.style__StyledResponsiveMenuAction",componentId:"sc-9874a804-2"})(["align-items:center;background-color:transparent;border:none;border-radius:var(--borderRadius100);color:var(--colorsUtilityYang100);cursor:pointer;display:flex;flex-direction:row;font-size:14px;font-weight:500;justify-content:space-between;min-height:var(--sizing500);padding:0 var(--spacing200);text-decoration:none;width:92%;max-width:92%;"," "," ",' &:hover{background-color:var(--colorsActionMajor500);}[data-component="icon"]{color:var(--colorsUtilityYang100);margin-right:var(--spacing100);}&:focus{',"}"],(({depth:e,responsive:i})=>e>0&&i&&t(["cursor:default;justify-content:space-around;width:",";"],1===e?"78%":"72%")),i,o,r(!0)),p=e.div.withConfig({displayName:"responsive-vertical-menu-item.style__StyledNestedMenu",componentId:"sc-9874a804-3"})(["width:",";",";"," a{font-weight:400;",";","}"],(({responsive:e})=>e?"72%":"92%"),(({hasIcon:e})=>e&&t(["margin-left:80px;width:100%;"])),(({responsive:e})=>e&&t(["align-items:center display:flex;flex-direction:column;width:100%;"])),(({hasIcon:e})=>e&&"width: 81%;"),(({depth:e,responsive:i})=>i&&t(["font-weight:500;width:70%;",""],e&&e>=1&&t(["font-weight:400;margin-left:var(--spacing200);margin-right:var(--spacing200);width:63%;"])))),l=e(n).withConfig({displayName:"responsive-vertical-menu-item.style__StyledIcon",componentId:"sc-9874a804-4"})(["rotate:",";transition:rotate "," ease-in;",";"],(({depth:e,expanded:t})=>a(e,t)),(({reduceMotion:e})=>e?0:"0.2s"),(({depth:e,expanded:i,reduceMotion:o})=>i&&t(["rotate:",";transition:rotate "," ease-out;"],a(e,i),o?0:"0.2s")));export{l as StyledIcon,s as StyledMenuItemContent,p as StyledNestedMenu,d as StyledResponsiveMenuAction,c as StyledResponsiveMenuItem};
+import e,{css as t}from"styled-components";import{margin as i,padding as o}from"styled-system";import n from"../../../icon/icon.component.js";import r from"../../../../style/utils/add-focus-styling.js";const s=(e,t)=>e&&t?"180deg":"0deg",a=t(["align-items:center;background-color:transparent;border:none;border-radius:var(--borderRadius100);box-sizing:border-box;color:var(--colorsUtilityYang100);cursor:pointer;display:flex;flex-direction:row;font-size:14px;font-weight:500;justify-content:space-between;min-height:var(--sizing500);padding:0 var(--spacing200);width:100%;max-width:340px;"," ",' &:hover{background-color:var(--colorsActionMajor500);}[data-component="icon"]{color:var(--colorsUtilityYang100);margin-right:var(--spacing100);}&:focus{',"}"],i,o,r(!0)),d=e(n).withConfig({displayName:"responsive-vertical-menu-item.style__StyledIcon",componentId:"sc-5a451979-0"})(["rotate:",";transition:rotate "," ease-in;",";"],(({depth:e,expanded:t})=>s(e,t)),(({reduceMotion:e})=>e?0:"0.2s"),(({depth:e,expanded:i,reduceMotion:o})=>i&&t(["rotate:",";transition:rotate "," ease-out;"],s(e,i),o?0:"0.2s"))),c=e.span.withConfig({displayName:"responsive-vertical-menu-item.style__StyledMenuItemContent",componentId:"sc-5a451979-1"})(["align-items:center;display:flex;flex-direction:row;gap:var(--spacing100);svg{margin-right:var(--spacing100);max-width:var(--sizing300);min-width:var(--sizing300);}"]),p=e.div.withConfig({displayName:"responsive-vertical-menu-item.style__StyledNestedMenuWrapper",componentId:"sc-5a451979-2"})(["box-sizing:border-box;display:flex;justify-content:",";padding:0 16px;width:100%;",""],(({hasIcon:e,responsive:t})=>e&&t?"flex-end":"flex-start"),(({depth:e,responsive:i})=>1===e&&i&&t(["padding:0 0 0 16px;"]))),l=e.div.withConfig({displayName:"responsive-vertical-menu-item.style__StyledNestedMenu",componentId:"sc-5a451979-3"})([""," > a{","}"],(({depth:e,hasIcon:i})=>t(["width:",";"],e<2&&!i?"100%":"88%")),(({depth:e})=>t(["font-weight:var(--fontWeights500);",";"],1===e&&t(["font-weight:var(--fontWeights400);margin-left:var(--spacing200);margin-right:var(--spacing200);"])))),m=e.button.withConfig({displayName:"responsive-vertical-menu-item.style__StyledResponsiveMenuItem",componentId:"sc-5a451979-4"})([""," "," ",""],a,(({active:e,responsive:i})=>e&&!i&&t(["background-color:var(--colorsGray850);"])),(({depth:e,responsive:i})=>0===e&&i&&t(["color:var(--colorsUtilityYang080);cursor:default;"]))),g=e.a.withConfig({displayName:"responsive-vertical-menu-item.style__StyledResponsiveMenuAction",componentId:"sc-5a451979-5"})([""," height:40px;text-decoration:none;"],a);export{d as StyledIcon,c as StyledMenuItemContent,l as StyledNestedMenu,p as StyledNestedMenuWrapper,g as StyledResponsiveMenuAction,m as StyledResponsiveMenuItem};

package/esm/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu.context.d.ts

@@ -7,7 +7,7 @@ export interface ResponsiveVerticalMenuButtonItem {
     href?: string;
     icon?: IconType;
     id: string;
-    label?: string;
+    label?: React.ReactNode;
 }
 export interface MenuContextType {
     activeMenuItem: ResponsiveVerticalMenuButtonItem | null;

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

@@ -6,14 +6,20 @@ interface BaseItemProps extends MarginProps, PaddingProps {
     children?: ReactNode;
     /** Custom icon to be displayed. Takes precedence over `icon` if both are specified. */
     customIcon?: ReactNode;
-    /** The destination URL. Providing this will render the menu item as an anchor link. */
+    /** External URL or anchor link for standard HTML navigation. Providing this will render the menu item as an anchor link. */
     href?: string;
     /** The Carbon icon to be displayed. Defers to `customIcon` if both are defined. */
     icon?: IconType;
     /** The unique identifier for the menu item. */
     id: string;
     /** The label for the menu item. */
-    label: string;
+    label: React.ReactNode;
+    /** A custom click handler to run when an anchor link is clicked */
+    onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
+    /** The rel attribute to be used for the underlying <a> tag */
+    rel?: string;
+    /** The target to use for the menu item. */
+    target?: string;
 }
 export interface ResponsiveVerticalMenuItemProps extends Omit<BaseItemProps, "id"> {
     /** The unique identifier for the menu item. */

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("./responsive-vertical-menu-item.style.js"),r=require("../__internal__/depth.context.js"),i=require("../__internal__/focus.context.js"),o=require("../responsive-vertical-menu.context.js"),s=require("../../../icon/icon.component.js"),c=require("../../../../__internal__/utils/helpers/guid/index.js");function l(e){return e&&e.__esModule?e:{default:e}}var d=l(t);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function u(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),r.forEach((function(t){a(e,t,n[t])}))}return e}function p(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t.push.apply(t,n)}return t}(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))})),e}function f(e,t){if(null==e)return{};var n,r,i=function(e,t){if(null==e)return{};var n,r,i={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}const v=t.createContext(void 0),h=({customIcon:t,depth:r,hasChildren:i,icon:o,label:c,responsive:l})=>t?e.jsxs(n.StyledMenuItemContent,{"data-component":"responsive-vertical-menu-custom-icon","data-role":"responsive-vertical-menu-custom-icon",depth:r,hasChildren:i,icon:!0,responsive:l,children:[t,c]}):e.jsxs(n.StyledMenuItemContent,{"data-component":"responsive-vertical-menu-icon","data-role":"responsive-vertical-menu-icon",depth:r,hasChildren:i,icon:!!o,responsive:l,children:[o&&e.jsx(s.default,{type:o}),c]}),m=t.forwardRef(((s,c)=>{var{children:l,customIcon:a,icon:m,id:y,href:b,label:j}=s,x=f(s,["children","customIcon","icon","id","href","label"]);const{activeMenuItem:O,containerRef:I,responsiveMode:g,setActiveMenuItem:_,reducedMotion:M}=o.useResponsiveVerticalMenu(),{expandItem:w,focusItem:P,getRegisteredItems:S,moveFocus:C,registerMenuItem:D}=i.useMenuFocus(),q=r.useDepth(),k=(null==O?void 0:O.id)===y,R=d.default.Children.count(l)>0,$=t.useContext(v),E=t.useMemo((()=>g&&0===q),[q,g]),[F,A]=t.useState(E&&R);t.useEffect((()=>{D(y,c,$)}),[y,$,c,D]);const K=e=>{let t,n;switch(e.key){case"Tab":var r;if(n=(null===(r=I.current)||void 0===r?void 0:r.querySelectorAll(`[data-depth="${q}"]`))||[],t=Array.from(n),0===q&&R&&(null==O?void 0:O.id)===y&&(e.preventDefault(),C(e.shiftKey?"lastChild":"firstChild")),1===q){const n=t.findIndex((e=>e.id===y)),r=0===n;n===t.length-1&&(!R||R&&!F)&&(e.shiftKey||(e.preventDefault(),C("parent"))),r&&e.shiftKey&&(e.preventDefault(),C("parent"))}if(2===q&&t.findIndex((e=>e.id===y))===t.length-1){const t=S(),n=t.find((e=>e.id===$)),r=t.find((e=>e.id===(null==n?void 0:n.parentId)));if(r){var i;const t=Array.from((null===(i=I.current)||void 0===i?void 0:i.querySelectorAll(`[data-depth="${q-1}"]`))||[]);t.findIndex((e=>e.id===$))===t.length-1&&!e.shiftKey&&(e.preventDefault(),P(r.id))}}break;case"Enter":case" ":if(e.preventDefault(),E)return;if(R)if(0!==q||g)A(!F),w(y,!F);else{const e=(null==O?void 0:O.id)===y;_(e?null:{id:y,label:j,children:l})}else b&&"Enter"===e.key&&(window.location.href=b)}};return e.jsx(e.Fragment,{children:R?e.jsxs(e.Fragment,{children:[e.jsxs(n.StyledResponsiveMenuItem,p(u({active:k,"aria-expanded":k||F,"data-component":`responsive-vertical-menu-item-${y}`,"data-depth":q,"data-role":`responsive-vertical-menu-item-${y}`,depth:q,hasIcon:!!m||!!a,id:y,onClick:()=>{if(!E){if(0!==q||g)A(!F),w(y,!F);else{const e=(null==O?void 0:O.id)===y;_(e?null:{id:y,label:j,children:l})}P(y)}},onKeyDown:e=>{g||K(e)},onFocus:()=>P(y),ref:c,responsive:g,tabIndex:E?-1:0,type:"button"},x),{children:[e.jsx(h,{customIcon:a,depth:q,hasChildren:!0,icon:m,label:j,responsive:g}),!E&&e.jsx(n.StyledIcon,{"data-component":"responsive-vertical-menu-expander-icon","data-role":"responsive-vertical-menu-expander-icon",depth:q,expanded:F||k,reduceMotion:!!M,type:q>=1?"chevron_down_thick":"chevron_right_thick"})]})),F&&e.jsx(n.StyledNestedMenu,{"data-component":`${y}-nested-menu`,"data-role":`${y}-nested-menu`,depth:q,hasIcon:!!m||!!a,id:`${y}-nested-menu`,responsive:g,children:e.jsx(v.Provider,{value:y,children:l})})]}):e.jsx(n.StyledResponsiveMenuAction,p(u({"data-component":`responsive-vertical-menu-item-${y}`,"data-depth":q,"data-role":`responsive-vertical-menu-item-${y}`,depth:q,href:b,id:y,onFocus:()=>P(y),onKeyDown:e=>{g||K(e)},ref:c,responsive:g,tabIndex:0},x),{children:e.jsx(h,{customIcon:a,depth:q,hasChildren:!1,icon:m,label:j,responsive:g})}))})})),y=n=>{var{children:o,id:s,label:l}=n,d=f(n,["children","id","label"]);const a=r.useDepth(),h=t.useRef(null),{registerMenuItem:y}=i.useMenuFocus(),b=t.useContext(v),j=t.useRef(s||c.default());return t.useEffect((()=>{y(j.current,h,b)}),[s,y,b]),e.jsx(m,p(u({id:j.current,label:l},d),{"data-depth":a,ref:h,children:o&&e.jsx(v.Provider,{value:s,children:e.jsx(r.IncreaseDepth,{children:o})})}))};exports.ResponsiveVerticalMenuItem=y,exports.default=y;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("./responsive-vertical-menu-item.style.js"),r=require("../__internal__/depth.context.js"),i=require("../__internal__/focus.context.js"),o=require("../responsive-vertical-menu.context.js"),s=require("../../../icon/icon.component.js"),c=require("../../../../__internal__/utils/helpers/guid/index.js");function l(e){return e&&e.__esModule?e:{default:e}}var a=l(t);function d(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function u(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),r.forEach((function(t){d(e,t,n[t])}))}return e}function p(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t.push.apply(t,n)}return t}(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))})),e}function v(e,t){if(null==e)return{};var n,r,i=function(e,t){if(null==e)return{};var n,r,i={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}const f=t.createContext(void 0),h=({customIcon:t,depth:r,hasChildren:i,icon:o,label:c,responsive:l})=>t?e.jsxs(n.StyledMenuItemContent,{"data-component":"responsive-vertical-menu-custom-icon","data-role":"responsive-vertical-menu-custom-icon",depth:r,hasChildren:i,icon:!0,responsive:l,children:[t,c]}):e.jsxs(n.StyledMenuItemContent,{"data-component":"responsive-vertical-menu-icon","data-role":"responsive-vertical-menu-icon",depth:r,hasChildren:i,icon:!!o,responsive:l,children:[o&&e.jsx(s.default,{type:o}),c]}),m=t.forwardRef(((s,c)=>{var{children:l,customIcon:d,icon:m,id:y,href:b,label:j,onClick:x,rel:O,target:g}=s,I=v(s,["children","customIcon","icon","id","href","label","onClick","rel","target"]);const{activeMenuItem:w,containerRef:M,responsiveMode:_,setActiveMenuItem:C,reducedMotion:P}=o.useResponsiveVerticalMenu(),{expandItem:S,focusItem:D,getRegisteredItems:k,moveFocus:$,registerMenuItem:q}=i.useMenuFocus(),R=r.useDepth(),E=(null==w?void 0:w.id)===y,F=a.default.Children.count(l)>0,A=t.useContext(f),K=t.useMemo((()=>_&&0===R),[R,_]),[N,V]=t.useState(K&&F);t.useEffect((()=>{q(y,c,A)}),[y,A,c,q]);const T=e=>{let t,n;switch(e.key){case"Tab":var r;if(n=(null===(r=M.current)||void 0===r?void 0:r.querySelectorAll(`[data-depth="${R}"]`))||[],t=Array.from(n),0===R&&F&&(null==w?void 0:w.id)===y&&(e.preventDefault(),$(e.shiftKey?"lastChild":"firstChild")),1===R){const n=t.findIndex((e=>e.id===y)),r=0===n;n===t.length-1&&(!F||F&&!N)&&(e.shiftKey||(e.preventDefault(),$("parent"))),r&&e.shiftKey&&(e.preventDefault(),$("parent"))}if(2===R&&t.findIndex((e=>e.id===y))===t.length-1){const t=k(),n=t.find((e=>e.id===A)),r=t.find((e=>e.id===(null==n?void 0:n.parentId)));if(r){var i;const t=Array.from((null===(i=M.current)||void 0===i?void 0:i.querySelectorAll(`[data-depth="${R-1}"]`))||[]);t.findIndex((e=>e.id===A))===t.length-1&&!e.shiftKey&&(e.preventDefault(),D(r.id))}}break;case"Enter":case" ":if(e.preventDefault(),K)return;if(F)if(0!==R||_)V(!N),S(y,!N);else{const e=(null==w?void 0:w.id)===y;C(e?null:{id:y,label:j,children:l})}else b&&"Enter"===e.key&&(window.location.href=b)}};return e.jsx(e.Fragment,{children:F?e.jsxs(e.Fragment,{children:[e.jsxs(n.StyledResponsiveMenuItem,p(u({active:E,"aria-expanded":E||N,"data-component":`responsive-vertical-menu-item-${y}`,"data-depth":R,"data-role":`responsive-vertical-menu-item-${y}`,depth:R,hasIcon:!!m||!!d,id:y,onClick:()=>{if(!K){if(0!==R||_)V(!N),S(y,!N);else{const e=(null==w?void 0:w.id)===y;C(e?null:{id:y,label:j,children:l})}D(y)}},onKeyDown:e=>{_||T(e)},onFocus:()=>D(y),ref:c,responsive:_,tabIndex:K?-1:0,type:"button"},I),{children:[e.jsx(h,{customIcon:d,depth:R,hasChildren:!0,icon:m,label:j,responsive:_}),!K&&e.jsx(n.StyledIcon,{"data-component":"responsive-vertical-menu-expander-icon","data-role":"responsive-vertical-menu-expander-icon",depth:R,expanded:N||E,reduceMotion:!!P,type:R>=1?"chevron_down_thick":"chevron_right_thick"})]})),N&&e.jsx(n.StyledNestedMenuWrapper,{"data-component":`${y}-nested-menu-wrapper`,"data-role":`${y}-nested-menu-wrapper`,depth:R,hasIcon:!!m||!!d,responsive:_,children:e.jsx(n.StyledNestedMenu,{"data-component":`${y}-nested-menu`,"data-role":`${y}-nested-menu`,depth:R,hasIcon:!!m||!!d,id:`${y}-nested-menu`,responsive:_,children:e.jsx(f.Provider,{value:y,children:l})})})]}):e.jsx(n.StyledResponsiveMenuAction,p(u({"data-component":`responsive-vertical-menu-item-${y}`,"data-depth":R,"data-role":`responsive-vertical-menu-item-${y}`,depth:R,href:b,id:y,onClick:x,onFocus:()=>D(y),onKeyDown:e=>{_||T(e)},ref:c,rel:O,responsive:_,tabIndex:0,target:g},I),{children:e.jsx(h,{customIcon:d,depth:R,hasChildren:!1,icon:m,label:j,responsive:_})}))})})),y=n=>{var{children:o,id:s,label:l}=n,a=v(n,["children","id","label"]);const d=r.useDepth(),h=t.useRef(null),{registerMenuItem:y}=i.useMenuFocus(),b=t.useContext(f),j=t.useRef(s||c.default());return t.useEffect((()=>{y(j.current,h,b)}),[s,y,b]),e.jsx(m,p(u({id:j.current,label:l},a),{"data-depth":d,ref:h,children:o&&e.jsx(f.Provider,{value:s,children:e.jsx(r.IncreaseDepth,{children:o})})}))};exports.ResponsiveVerticalMenuItem=y,exports.default=y;

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

@@ -1,21 +1,27 @@
 /// <reference types="react" />
+interface StyledMenuItemContentProps {
+    customIcon?: boolean;
+    depth: number;
+    hasChildren?: boolean;
+    icon?: boolean;
+    responsive?: boolean;
+}
 interface StyledResponsiveMenuItemProps {
     active?: boolean;
     depth: number;
     hasIcon?: boolean;
     responsive?: boolean;
 }
-interface StyledMenuItemContentProps {
-    customIcon?: boolean;
+interface StyledIconProps {
     depth: number;
-    hasChildren?: boolean;
-    icon?: boolean;
-    responsive?: boolean;
+    expanded: boolean;
+    reduceMotion: boolean;
 }
+export declare const StyledIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, StyledIconProps, never>;
 export declare const StyledMenuItemContent: import("styled-components").StyledComponent<"span", any, StyledMenuItemContentProps, never>;
-export declare const StyledResponsiveMenuItem: import("styled-components").StyledComponent<"button", any, StyledResponsiveMenuItemProps, never>;
-export declare const StyledResponsiveMenuAction: import("styled-components").StyledComponent<"a", any, {
+export declare const StyledNestedMenuWrapper: import("styled-components").StyledComponent<"div", any, {
     depth: number;
+    hasIcon?: boolean | undefined;
     responsive?: boolean | undefined;
 }, never>;
 export declare const StyledNestedMenu: import("styled-components").StyledComponent<"div", any, {
@@ -23,9 +29,9 @@ export declare const StyledNestedMenu: import("styled-components").StyledCompone
     hasIcon?: boolean | undefined;
     responsive?: boolean | undefined;
 }, never>;
-export declare const StyledIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, {
+export declare const StyledResponsiveMenuItem: import("styled-components").StyledComponent<"button", any, StyledResponsiveMenuItemProps, never>;
+export declare const StyledResponsiveMenuAction: import("styled-components").StyledComponent<"a", any, {
     depth: number;
-    expanded: boolean;
-    reduceMotion: boolean;
+    responsive?: boolean | undefined;
 }, never>;
 export {};

package/lib/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu-item/responsive-vertical-menu-item.style.js

@@ -1 +1 @@
-"use strict";var e=require("styled-components"),t=require("styled-system"),i=require("../../../icon/icon.component.js"),n=require("../../../../style/utils/add-focus-styling.js");function o(e){return e&&e.__esModule?e:{default:e}}var s=o(e);const r=(e,t)=>e&&t?"180deg":"0deg",a=s.default.span.withConfig({displayName:"responsive-vertical-menu-item.style__StyledMenuItemContent",componentId:"sc-9874a804-0"})(["align-items:center;display:flex;flex-direction:row;gap:var(--spacing100);svg{margin-right:var(--spacing100);max-width:var(--sizing300);min-width:var(--sizing300);}",""],(({customIcon:t,depth:i,hasChildren:n,icon:o,responsive:s})=>i>0&&s?e.css(["width:100%;"]):0===i&&n&&s?e.css(["color:#ffffffcc;cursor:default;"]):t||o?e.css(["width:81%;"]):e.css(["width:92%;"]))),d=s.default.button.withConfig({displayName:"responsive-vertical-menu-item.style__StyledResponsiveMenuItem",componentId:"sc-9874a804-1"})(["align-items:center;background-color:transparent;border:none;border-radius:var(--borderRadius100);color:var(--colorsUtilityYang100);cursor:pointer;display:flex;flex-direction:row;font-size:14px;font-weight:500;justify-content:space-between;min-height:var(--sizing500);padding:0 15px;width:100%;max-width:340px;"," "," "," "," &:hover{background-color:var(--colorsActionMajor500);}",' [data-component="icon"]{color:var(--colorsUtilityYang100);margin-right:var(--spacing100);}&:focus{',"}"],t.margin,t.padding,(({depth:t,responsive:i})=>t>0&&i&&e.css(["cursor:default;justify-content:space-around;width:80%;"])),(({depth:t,responsive:i})=>0===t&&i&&e.css(["padding:0;"])),(({active:t,responsive:i})=>t&&!i&&e.css(["background-color:var(--colorsGray850);"])),n.default(!0)),c=s.default.a.withConfig({displayName:"responsive-vertical-menu-item.style__StyledResponsiveMenuAction",componentId:"sc-9874a804-2"})(["align-items:center;background-color:transparent;border:none;border-radius:var(--borderRadius100);color:var(--colorsUtilityYang100);cursor:pointer;display:flex;flex-direction:row;font-size:14px;font-weight:500;justify-content:space-between;min-height:var(--sizing500);padding:0 var(--spacing200);text-decoration:none;width:92%;max-width:92%;"," "," ",' &:hover{background-color:var(--colorsActionMajor500);}[data-component="icon"]{color:var(--colorsUtilityYang100);margin-right:var(--spacing100);}&:focus{',"}"],(({depth:t,responsive:i})=>t>0&&i&&e.css(["cursor:default;justify-content:space-around;width:",";"],1===t?"78%":"72%")),t.margin,t.padding,n.default(!0)),l=s.default.div.withConfig({displayName:"responsive-vertical-menu-item.style__StyledNestedMenu",componentId:"sc-9874a804-3"})(["width:",";",";"," a{font-weight:400;",";","}"],(({responsive:e})=>e?"72%":"92%"),(({hasIcon:t})=>t&&e.css(["margin-left:80px;width:100%;"])),(({responsive:t})=>t&&e.css(["align-items:center display:flex;flex-direction:column;width:100%;"])),(({hasIcon:e})=>e&&"width: 81%;"),(({depth:t,responsive:i})=>i&&e.css(["font-weight:500;width:70%;",""],t&&t>=1&&e.css(["font-weight:400;margin-left:var(--spacing200);margin-right:var(--spacing200);width:63%;"])))),p=s.default(i.default).withConfig({displayName:"responsive-vertical-menu-item.style__StyledIcon",componentId:"sc-9874a804-4"})(["rotate:",";transition:rotate "," ease-in;",";"],(({depth:e,expanded:t})=>r(e,t)),(({reduceMotion:e})=>e?0:"0.2s"),(({depth:t,expanded:i,reduceMotion:n})=>i&&e.css(["rotate:",";transition:rotate "," ease-out;"],r(t,i),n?0:"0.2s")));exports.StyledIcon=p,exports.StyledMenuItemContent=a,exports.StyledNestedMenu=l,exports.StyledResponsiveMenuAction=c,exports.StyledResponsiveMenuItem=d;
+"use strict";var e=require("styled-components"),t=require("styled-system"),n=require("../../../icon/icon.component.js"),i=require("../../../../style/utils/add-focus-styling.js");function s(e){return e&&e.__esModule?e:{default:e}}var o=s(e);const r=(e,t)=>e&&t?"180deg":"0deg",a=e.css(["align-items:center;background-color:transparent;border:none;border-radius:var(--borderRadius100);box-sizing:border-box;color:var(--colorsUtilityYang100);cursor:pointer;display:flex;flex-direction:row;font-size:14px;font-weight:500;justify-content:space-between;min-height:var(--sizing500);padding:0 var(--spacing200);width:100%;max-width:340px;"," ",' &:hover{background-color:var(--colorsActionMajor500);}[data-component="icon"]{color:var(--colorsUtilityYang100);margin-right:var(--spacing100);}&:focus{',"}"],t.margin,t.padding,i.default(!0)),d=o.default(n.default).withConfig({displayName:"responsive-vertical-menu-item.style__StyledIcon",componentId:"sc-5a451979-0"})(["rotate:",";transition:rotate "," ease-in;",";"],(({depth:e,expanded:t})=>r(e,t)),(({reduceMotion:e})=>e?0:"0.2s"),(({depth:t,expanded:n,reduceMotion:i})=>n&&e.css(["rotate:",";transition:rotate "," ease-out;"],r(t,n),i?0:"0.2s"))),c=o.default.span.withConfig({displayName:"responsive-vertical-menu-item.style__StyledMenuItemContent",componentId:"sc-5a451979-1"})(["align-items:center;display:flex;flex-direction:row;gap:var(--spacing100);svg{margin-right:var(--spacing100);max-width:var(--sizing300);min-width:var(--sizing300);}"]),l=o.default.div.withConfig({displayName:"responsive-vertical-menu-item.style__StyledNestedMenuWrapper",componentId:"sc-5a451979-2"})(["box-sizing:border-box;display:flex;justify-content:",";padding:0 16px;width:100%;",""],(({hasIcon:e,responsive:t})=>e&&t?"flex-end":"flex-start"),(({depth:t,responsive:n})=>1===t&&n&&e.css(["padding:0 0 0 16px;"]))),p=o.default.div.withConfig({displayName:"responsive-vertical-menu-item.style__StyledNestedMenu",componentId:"sc-5a451979-3"})([""," > a{","}"],(({depth:t,hasIcon:n})=>e.css(["width:",";"],t<2&&!n?"100%":"88%")),(({depth:t})=>e.css(["font-weight:var(--fontWeights500);",";"],1===t&&e.css(["font-weight:var(--fontWeights400);margin-left:var(--spacing200);margin-right:var(--spacing200);"])))),u=o.default.button.withConfig({displayName:"responsive-vertical-menu-item.style__StyledResponsiveMenuItem",componentId:"sc-5a451979-4"})([""," "," ",""],a,(({active:t,responsive:n})=>t&&!n&&e.css(["background-color:var(--colorsGray850);"])),(({depth:t,responsive:n})=>0===t&&n&&e.css(["color:var(--colorsUtilityYang080);cursor:default;"]))),g=o.default.a.withConfig({displayName:"responsive-vertical-menu-item.style__StyledResponsiveMenuAction",componentId:"sc-5a451979-5"})([""," height:40px;text-decoration:none;"],a);exports.StyledIcon=d,exports.StyledMenuItemContent=c,exports.StyledNestedMenu=p,exports.StyledNestedMenuWrapper=l,exports.StyledResponsiveMenuAction=g,exports.StyledResponsiveMenuItem=u;

package/lib/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu.context.d.ts

@@ -7,7 +7,7 @@ export interface ResponsiveVerticalMenuButtonItem {
     href?: string;
     icon?: IconType;
     id: string;
-    label?: string;
+    label?: React.ReactNode;
 }
 export interface MenuContextType {
     activeMenuItem: ResponsiveVerticalMenuButtonItem | null;

package/package.json

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