carbon-react 154.8.0 → 154.10.0

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

@@ -15,7 +15,7 @@ export interface SubmenuProps {
     /** Defines which direction the submenu will hang eg. left/right */
     submenuDirection?: string;
     /** A title for the menu item that has a submenu. */
-    title?: string;
+    title?: React.ReactNode;
     /** onKeyDown handler */
     onKeyDown?: (event: React.KeyboardEvent<HTMLAnchorElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
     /** set the colour variant for a menuType */

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

@@ -11,7 +11,7 @@ interface MenuItemBaseProps extends TagProps, Pick<LayoutProps, "width" | "maxWi
     /** Is the menu item the currently selected item. */
     selected?: boolean;
     /** A title for the menu item that has a submenu. */
-    submenu?: string | boolean;
+    submenu?: React.ReactNode;
     /** The href to use for the menu item. */
     href?: string;
     /** onKeyDown handler */

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

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import{useRef as t,useContext as n,useState as r,useLayoutEffect as o,useEffect as i}from"react";import u from"invariant";import{defaultFocusableSelectors as l}from"../../../__internal__/focus-trap/focus-trap-utils.js";import s from"../../../style/utils/filter-styled-system-padding-props.js";import a from"./menu-item.style.js";import c from"../../../__internal__/utils/helpers/events/events.js";import{useStrictMenuContext as m}from"../__internal__/strict-menu.context.js";import d from"../__internal__/submenu/submenu.component.js";import p from"../__internal__/submenu/submenu.context.js";import{MenuSegmentContext as b}from"../menu-segment-title/menu-segment-title.context.js";import{StyledMenuItem as f}from"../menu.style.js";import h from"../../../__internal__/utils/helpers/guid/index.js";function y(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function v(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){y(e,t,n[t])}))}return e}function O(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}const g=y=>{var{submenu:g,submenuMaxWidth:j,submenuMinWidth:w,children:_,href:x,onClick:S,target:P,submenuDirection:D="right",icon:k,selected:I,onKeyDown:W,variant:C="default",showDropdownArrow:F=!0,ariaLabel:M,clickToOpen:T,maxWidth:L,onSubmenuOpen:V,onSubmenuClose:E,overrideColor:K,rel:A,as:q,"data-element":H,"data-role":N}=y,Y=function(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(y,["submenu","submenuMaxWidth","submenuMinWidth","children","href","onClick","target","submenuDirection","icon","selected","onKeyDown","variant","showDropdownArrow","ariaLabel","clickToOpen","maxWidth","onSubmenuOpen","onSubmenuClose","overrideColor","rel","as","data-element","data-role"]);u(k||_,"Either prop `icon` must be defined or this node must have `children`."),u(_||M||"string"==typeof g,"If no text is provided an `ariaLabel` should be given to facilitate accessibility."),u("boolean"==typeof g||void 0===g||_&&"string"==typeof g&&g.length,"You should not pass `children` when `submenu` is an empty string");const z=t(h()),{isChildOfSegment:B,overriddenVariant:G}=n(b),{inFullscreenView:J,registerItem:Q,unregisterItem:R,focusId:U,updateFocusId:X,menuType:Z}=m(),$=n(p),ee=Object.keys($).length>0,{submenuFocusId:te,updateFocusId:ne,handleKeyDown:re,submenuHasMaxWidth:oe}=$,ie=U===z.current,ue=te?te===z.current:void 0,[le,se]=r(null),[ae,ce]=r(null);o((()=>{var e;const t=null!==(e=null==le?void 0:le.querySelector(l))&&void 0!==e?e:null;t!==ae&&ce(t)}),[ae,le]),i((()=>{const e=z.current;return Q&&Q(e),()=>{R&&R(e)}}),[Q,R]),i((()=>{if(ie&&!ue||ue){if(ae)return void ae.focus();null==le||le.focus()}}),[ae,ie,ue,le]);const me=e=>{ee?(e.stopPropagation(),null==ne||ne(z.current)):null==X||X(z.current)},de={className:x||S?"carbon-menu-item--has-link":"",href:ae?void 0:x,onClick:ae?void 0:S,target:P,rel:A,icon:k,removeAriaLabelOnIcon:!0,selected:I,onKeyDown:J?void 0:e=>{null==W||W(e),c.isEscKey(e)&&(null==le||le.focus()),null==re||re(e)},overrideColor:K,ref:se};"alternate"===G&&B&&"alternate"===C&&["white","black"].includes(Z)&&(de.overrideColor=!0);const pe=e=>L&&"string"==typeof e?e:void 0,be=J?void 0:L,fe=!(S||x||ae);if(g)return e(f,O(v({"data-component":"menu-item","data-element":H,"data-role":N,menuType:Z,title:pe(g),maxWidth:be},Y),{inFullscreenView:J,id:z.current,as:q,onFocus:me,children:e(d,O(v(O(v(O(v({},"boolean"!=typeof g&&{title:g}),{submenuDirection:D,showDropdownArrow:F,clickToOpen:T,maxWidth:L,asPassiveItem:fe,ariaLabel:M,onSubmenuOpen:V,onSubmenuClose:E,submenuMaxWidth:j,submenuMinWidth:w}),de),{variant:C}),Y),{children:_}))}));const he=s(Y),ye=!!(null==le?void 0:le.querySelector("[data-element='input']"));return e(f,O(v({"data-component":"menu-item","data-element":H,"data-role":N,menuType:Z,inSubmenu:ee,title:pe(_),maxWidth:be},Y),{inFullscreenView:J&&!Object.keys($).length,id:z.current,as:q,onFocus:me,children:e(a,O(v(O(v({menuType:Z,"data-role":"menu-item-wrapper"},de),{menuItemVariant:C,ariaLabel:M,maxWidth:oe?void 0:be,inFullscreenView:J,asPassiveItem:fe}),he),{asDiv:ye||"div"===q,hasFocusableChild:!!ae,hasInput:ye,inSubmenu:ee,children:_}))}))};export{g as MenuItem,g as default};
+import{jsx as e}from"react/jsx-runtime";import t,{useRef as n,useContext as r,useState as o,useLayoutEffect as i,useEffect as u}from"react";import l from"invariant";import{defaultFocusableSelectors as s}from"../../../__internal__/focus-trap/focus-trap-utils.js";import a from"../../../style/utils/filter-styled-system-padding-props.js";import c from"./menu-item.style.js";import m from"../../../__internal__/utils/helpers/events/events.js";import{useStrictMenuContext as d}from"../__internal__/strict-menu.context.js";import p from"../__internal__/submenu/submenu.component.js";import b from"../__internal__/submenu/submenu.context.js";import{MenuSegmentContext as f}from"../menu-segment-title/menu-segment-title.context.js";import{StyledMenuItem as h}from"../menu.style.js";import y from"../../../__internal__/utils/helpers/guid/index.js";function v(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function O(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){v(e,t,n[t])}))}return e}function g(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}const j=v=>{var{submenu:j,submenuMaxWidth:w,submenuMinWidth:_,children:x,href:S,onClick:P,target:D,submenuDirection:k="right",icon:I,selected:W,onKeyDown:C,variant:F="default",showDropdownArrow:M=!0,ariaLabel:T,clickToOpen:V,maxWidth:E,onSubmenuOpen:L,onSubmenuClose:K,overrideColor:A,rel:q,as:H,"data-element":N,"data-role":Y}=v,z=function(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(v,["submenu","submenuMaxWidth","submenuMinWidth","children","href","onClick","target","submenuDirection","icon","selected","onKeyDown","variant","showDropdownArrow","ariaLabel","clickToOpen","maxWidth","onSubmenuOpen","onSubmenuClose","overrideColor","rel","as","data-element","data-role"]);l(I||x,"Either prop `icon` must be defined or this node must have `children`."),l(x||T||j||"string"==typeof j&&j.length,"If no text or node is provided via the `submenu` prop, an `ariaLabel` should be given to facilitate accessibility."),l("boolean"==typeof j||void 0===j||t.isValidElement(j)||x&&"string"==typeof j&&j.length,"You should not pass `children` when `submenu` is an empty string");const B=n(y()),{isChildOfSegment:G,overriddenVariant:J}=r(f),{inFullscreenView:Q,registerItem:R,unregisterItem:U,focusId:X,updateFocusId:Z,menuType:$}=d(),ee=r(b),te=Object.keys(ee).length>0,{submenuFocusId:ne,updateFocusId:re,handleKeyDown:oe,submenuHasMaxWidth:ie}=ee,ue=X===B.current,le=ne?ne===B.current:void 0,[se,ae]=o(null),[ce,me]=o(null);i((()=>{var e;const t=null!==(e=null==se?void 0:se.querySelector(s))&&void 0!==e?e:null;t!==ce&&me(t)}),[ce,se]),u((()=>{const e=B.current;return R&&R(e),()=>{U&&U(e)}}),[R,U]),u((()=>{if(ue&&!le||le){if(ce)return void ce.focus();null==se||se.focus()}}),[ce,ue,le,se]);const de=e=>{te?(e.stopPropagation(),null==re||re(B.current)):null==Z||Z(B.current)},pe={className:S||P?"carbon-menu-item--has-link":"",href:ce?void 0:S,onClick:ce?void 0:P,target:D,rel:q,icon:I,removeAriaLabelOnIcon:!0,selected:W,onKeyDown:Q?void 0:e=>{null==C||C(e),m.isEscKey(e)&&(null==se||se.focus()),null==oe||oe(e)},overrideColor:A,ref:ae};"alternate"===J&&G&&"alternate"===F&&["white","black"].includes($)&&(pe.overrideColor=!0);const be=e=>E&&"string"==typeof e?e:void 0,fe=Q?void 0:E,he=!(P||S||ce);if(j)return e(h,g(O({"data-component":"menu-item","data-element":N,"data-role":Y,menuType:$,title:be(j),maxWidth:fe},z),{inFullscreenView:Q,id:B.current,as:H,onFocus:de,children:e(p,g(O(g(O(g(O({},"boolean"!=typeof j&&{title:j}),{submenuDirection:k,showDropdownArrow:M,clickToOpen:V,maxWidth:E,asPassiveItem:he,ariaLabel:T,onSubmenuOpen:L,onSubmenuClose:K,submenuMaxWidth:w,submenuMinWidth:_}),pe),{variant:F}),z),{children:x}))}));const ye=a(z),ve=!!(null==se?void 0:se.querySelector("[data-element='input']"));return e(h,g(O({"data-component":"menu-item","data-element":N,"data-role":Y,menuType:$,inSubmenu:te,title:be(x),maxWidth:fe},z),{inFullscreenView:Q&&!Object.keys(ee).length,id:B.current,as:H,onFocus:de,children:e(c,g(O(g(O({menuType:$,"data-role":"menu-item-wrapper"},pe),{menuItemVariant:F,ariaLabel:T,maxWidth:ie?void 0:fe,inFullscreenView:Q,asPassiveItem:he}),ye),{asDiv:ve||"div"===H,hasFocusableChild:!!ce,hasInput:ve,inSubmenu:te,children:x}))}))};export{j as MenuItem,j as default};

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 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};
+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((()=>{const e=h.current;p(e,s,u)}),[u,p]),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.component.js

@@ -1 +1 @@
-import{jsx as e,jsxs as r,Fragment as n}from"react/jsx-runtime";import{useState as t,useRef as o,useCallback as i,useLayoutEffect as c,useEffect as s}from"react";import{useResponsiveVerticalMenu as a}from"./responsive-vertical-menu.context.js";import{StyledButton as l,StyledCloseButton as u,StyledResponsiveMenu as p,StyledGlobalVerticalMenuWrapper as d}from"./responsive-vertical-menu.style.js";import{Box as m}from"../../box/box.component.js";import v from"../../modal/modal.component.js";import f from"../../../hooks/__internal__/useIsAboveBreakpoint/useIsAboveBreakpoint.js";import y from"../../../hooks/useMediaQuery/useMediaQuery.js";import h from"../../../__internal__/utils/helpers/tags/tags.js";import{DepthProvider as b}from"./__internal__/depth.context.js";import{MenuFocusProvider as O}from"./__internal__/focus.context.js";import g from"../../../hooks/__internal__/useLocale/useLocale.js";function j(e,r,n){return r in e?Object.defineProperty(e,r,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[r]=n,e}function w(e){for(var r=1;r<arguments.length;r++){var n=null!=arguments[r]?arguments[r]:{},t=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(t=t.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),t.forEach((function(r){j(e,r,n[r])}))}return e}function _(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r.push.apply(r,n)}return r}(Object(r)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))})),e}function x(e,r){if(null==e)return{};var n,t,o=function(e,r){if(null==e)return{};var n,t,o={},i=Object.keys(e);for(t=0;t<i.length;t++)n=i[t],r.indexOf(n)>=0||(o[n]=e[n]);return o}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(t=0;t<i.length;t++)n=i[t],r.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}const k=b=>{var O,j,{children:k,height:M,responsiveBreakpoint:P=700,width:E}=b,L=x(b,["children","height","responsiveBreakpoint","width"]);const B=g(),{activeMenuItem:C,buttonRef:I,containerRef:R,menuRef:S,responsiveMode:D,setActiveMenuItem:T,setReducedMotion:A,setResponsiveMode:q}=a(),[Q,$]=t(!1),z=f(P),[G,F]=t("auto"),[H,J]=t("100%"),[K,N]=t("auto"),U=o(null),V=!y("screen and (prefers-reduced-motion: no-preference)"),{current:W}=S,{current:X}=I,Y=i((()=>{if(Q&&D){const e=W||document.querySelector("[id='responsive-vertical-menu-primary']");e&&J(e.getBoundingClientRect().width-16+"px")}F(C&&W?`${W.getBoundingClientRect().right}px`:"auto"),N(C&&X?`${X.getBoundingClientRect().bottom}px`:"auto")}),[Q,W,D,C,X]),Z=i((e=>{R.current&&!R.current.contains(e.target)&&$(!1)}),[R]),ee=i((()=>{$((e=>!e)),T(null)}),[T]);return c((()=>{Y()}),[Q,Y,W,D]),s((()=>{const e=()=>{setTimeout((()=>{R.current&&!R.current.contains(document.activeElement)&&$(!1)}),0)},r=e=>{"Escape"===e.key&&(e.preventDefault(),$(!1))},n=R.current;return Q&&!D&&(document.addEventListener("keydown",r),window.addEventListener("click",Z),null==n||n.addEventListener("focusout",e)),()=>{document.removeEventListener("keydown",r),window.removeEventListener("click",Z),null==n||n.removeEventListener("focusout",e)}}),[Q,R,Z,D]),s((()=>{null==A||A(V),null==q||q(!z)}),[z,V,A,q]),r("div",{ref:R,children:[e(l,{active:Q,"aria-controls":"responsive-vertical-menu-primary","aria-expanded":Q,"aria-label":null===(O=B.verticalMenu.ariaLabels)||void 0===O?void 0:O.responsiveMenuLauncher(),buttonType:"tertiary","data-component":"responsive-vertical-menu-launcher","data-role":"responsive-vertical-menu-launcher",iconType:"squares_nine",id:"responsive-vertical-menu-launcher",onClick:ee,ref:I}),D?e(v,{open:Q,children:r(m,{position:"fixed",top:0,width:H,children:[e(m,{display:"flex",justifyContent:"flex-end",width:"100%",backgroundColor:"var(--colorsGray850)",p:1,children:e(u,{"aria-label":null===(j=B.verticalMenu.ariaLabels)||void 0===j?void 0:j.responsiveMenuCloseButton(),"data-component":"responsive-vertical-menu-close","data-role":"responsive-vertical-menu-close",iconType:"close",size:"small",buttonType:"tertiary",onClick:()=>{$(!1),T(null)}})}),e(p,{height:M,id:"responsive-vertical-menu-primary",menu:"primary",reduceMotion:V,ref:S,responsive:!0,tabIndex:-1,top:"48px",width:E,children:k})]})}):e(d,_(w({},L,h("responsive-vertical-menu",L)),{children:Q&&r(n,{children:[e(p,{childOpen:!!C,"data-component":"responsive-vertical-menu-primary","data-role":"responsive-vertical-menu-primary",height:M||"100%",id:"responsive-vertical-menu-primary",menu:"primary",reduceMotion:V,ref:S,responsive:!1,tabIndex:-1,top:K,width:E,children:k}),C?e(p,{"data-component":"responsive-vertical-menu-secondary","data-role":"responsive-vertical-menu-secondary",height:M||"100%",id:"responsive-vertical-menu-secondary",left:G,menu:"secondary",reduceMotion:V,ref:U,responsive:!1,tabIndex:-1,top:K,width:E,children:C.children}):null]})}))]})},M=r=>{var{children:n}=r,t=x(r,["children"]);return e(b,{children:e(O,{children:e(k,_(w({},t),{children:n}))})})};export{M as ResponsiveVerticalMenu,M as default};
+import{jsx as e,jsxs as r,Fragment as n}from"react/jsx-runtime";import t,{useState as o,useRef as i,useCallback as c,useLayoutEffect as s,useEffect as l}from"react";import{useResponsiveVerticalMenu as a}from"./responsive-vertical-menu.context.js";import{StyledButton as u,StyledCloseButton as p,StyledResponsiveMenu as d,StyledGlobalVerticalMenuWrapper as m}from"./responsive-vertical-menu.style.js";import{Box as v}from"../../box/box.component.js";import f from"../../modal/modal.component.js";import h from"../../../hooks/__internal__/useIsAboveBreakpoint/useIsAboveBreakpoint.js";import y from"../../../hooks/useMediaQuery/useMediaQuery.js";import b from"../../../__internal__/utils/helpers/tags/tags.js";import{DepthProvider as g}from"./__internal__/depth.context.js";import{MenuFocusProvider as O}from"./__internal__/focus.context.js";import j from"../../../hooks/__internal__/useLocale/useLocale.js";function w(e,r,n){return r in e?Object.defineProperty(e,r,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[r]=n,e}function _(e){for(var r=1;r<arguments.length;r++){var n=null!=arguments[r]?arguments[r]:{},t=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(t=t.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),t.forEach((function(r){w(e,r,n[r])}))}return e}function x(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r.push.apply(r,n)}return r}(Object(r)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))})),e}function k(e,r){if(null==e)return{};var n,t,o=function(e,r){if(null==e)return{};var n,t,o={},i=Object.keys(e);for(t=0;t<i.length;t++)n=i[t],r.indexOf(n)>=0||(o[n]=e[n]);return o}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(t=0;t<i.length;t++)n=i[t],r.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}const M=g=>{var O,w,{children:M,height:E,responsiveBreakpoint:P=700,width:L}=g,C=k(g,["children","height","responsiveBreakpoint","width"]);const B=j(),{activeMenuItem:I,buttonRef:R,containerRef:S,menuRef:D,responsiveMode:T,setActiveMenuItem:A,setReducedMotion:q,setResponsiveMode:Q}=a(),[V,$]=o(!1),[z,G]=o(0),F=h(P),[H,J]=o("auto"),[K,N]=o("100%"),[U,W]=o("auto"),X=i(null),Y=!y("screen and (prefers-reduced-motion: no-preference)"),{current:Z}=D,{current:ee}=R,re=c((()=>{if(V&&T){const e=Z||document.querySelector("[id='responsive-vertical-menu-primary']");e&&N(e.getBoundingClientRect().width-16+"px")}J(I&&Z?`${Z.getBoundingClientRect().right}px`:"auto"),W(I&&ee?`${ee.getBoundingClientRect().bottom}px`:"auto")}),[V,Z,T,I,ee]),ne=c((e=>{S.current&&!S.current.contains(e.target)&&$(!1)}),[S]),te=c((()=>{$((e=>!e)),A(null)}),[A]);s((()=>{re()}),[V,re,Z,T]),l((()=>{const e=()=>{setTimeout((()=>{S.current&&!S.current.contains(document.activeElement)&&$(!1)}),0)},r=e=>{"Escape"===e.key&&(e.preventDefault(),$(!1))},n=S.current;return V&&!T&&(document.addEventListener("keydown",r),window.addEventListener("click",ne),null==n||n.addEventListener("focusout",e)),()=>{document.removeEventListener("keydown",r),window.removeEventListener("click",ne),null==n||n.removeEventListener("focusout",e)}}),[V,S,ne,T]),l((()=>{null==q||q(Y),null==Q||Q(!F)}),[F,Y,q,Q]);const oe=c((e=>{if(!e)return 0;if(t.isValidElement(e))return 1+oe(e.props.children);const r=t.Children.toArray(e);return r.length?r.reduce(((e,r)=>t.isValidElement(r)?e+1+oe(r.props.children):e),0):0}),[]);return l((()=>{const e=z,r=oe(M);e!==r&&(G(r),A(null))}),[z,M,oe,A]),r("div",{ref:S,children:[e(u,{active:V,"aria-controls":"responsive-vertical-menu-primary","aria-expanded":V,"aria-label":null===(O=B.verticalMenu.ariaLabels)||void 0===O?void 0:O.responsiveMenuLauncher(),buttonType:"tertiary","data-component":"responsive-vertical-menu-launcher","data-role":"responsive-vertical-menu-launcher",iconType:"squares_nine",id:"responsive-vertical-menu-launcher",onClick:te,ref:R}),T?e(f,{open:V,children:r(v,{position:"fixed",top:0,width:K,children:[e(v,{display:"flex",justifyContent:"flex-end",width:"100%",backgroundColor:"var(--colorsGray850)",p:1,children:e(p,{"aria-label":null===(w=B.verticalMenu.ariaLabels)||void 0===w?void 0:w.responsiveMenuCloseButton(),"data-component":"responsive-vertical-menu-close","data-role":"responsive-vertical-menu-close",iconType:"close",size:"small",buttonType:"tertiary",onClick:()=>{$(!1),A(null)}})}),e(d,{height:E,id:"responsive-vertical-menu-primary",menu:"primary",reduceMotion:Y,ref:D,responsive:!0,tabIndex:-1,top:"48px",width:L,children:M})]})}):e(m,x(_({},C,b("responsive-vertical-menu",C)),{children:V&&r(n,{children:[e(d,{childOpen:!!I,"data-component":"responsive-vertical-menu-primary","data-role":"responsive-vertical-menu-primary",height:E||"100%",id:"responsive-vertical-menu-primary",menu:"primary",reduceMotion:Y,ref:D,responsive:!1,tabIndex:-1,top:U,width:L,children:M}),I?e(d,{"data-component":"responsive-vertical-menu-secondary","data-role":"responsive-vertical-menu-secondary",height:E||"100%",id:"responsive-vertical-menu-secondary",left:H,menu:"secondary",reduceMotion:Y,ref:X,responsive:!1,tabIndex:-1,top:U,width:L,children:I.children}):null]})}))]})},E=r=>{var{children:n}=r,t=k(r,["children"]);return e(g,{children:e(O,{children:e(M,x(_({},t),{children:n}))})})};export{E as ResponsiveVerticalMenu,E as default};

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

@@ -15,7 +15,7 @@ export interface SubmenuProps {
     /** Defines which direction the submenu will hang eg. left/right */
     submenuDirection?: string;
     /** A title for the menu item that has a submenu. */
-    title?: string;
+    title?: React.ReactNode;
     /** onKeyDown handler */
     onKeyDown?: (event: React.KeyboardEvent<HTMLAnchorElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
     /** set the colour variant for a menuType */

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

@@ -11,7 +11,7 @@ interface MenuItemBaseProps extends TagProps, Pick<LayoutProps, "width" | "maxWi
     /** Is the menu item the currently selected item. */
     selected?: boolean;
     /** A title for the menu item that has a submenu. */
-    submenu?: string | boolean;
+    submenu?: React.ReactNode;
     /** The href to use for the menu item. */
     href?: string;
     /** onKeyDown handler */

package/lib/components/menu/menu-item/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("invariant"),r=require("../../../__internal__/focus-trap/focus-trap-utils.js"),u=require("../../../style/utils/filter-styled-system-padding-props.js"),i=require("./menu-item.style.js"),o=require("../../../__internal__/utils/helpers/events/events.js"),l=require("../__internal__/strict-menu.context.js"),s=require("../__internal__/submenu/submenu.component.js"),a=require("../__internal__/submenu/submenu.context.js"),c=require("../menu-segment-title/menu-segment-title.context.js"),d=require("../menu.style.js"),m=require("../../../__internal__/utils/helpers/guid/index.js");function b(e){return e&&e.__esModule?e:{default:e}}var f=b(n);function p(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function y(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){p(e,t,n[t])}))}return e}function h(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}const v=n=>{var{submenu:b,submenuMaxWidth:p,submenuMinWidth:v,children:O,href:j,onClick:g,target:w,submenuDirection:x="right",icon:_,selected:S,onKeyDown:P,variant:C="default",showDropdownArrow:I=!0,ariaLabel:q,clickToOpen:D,maxWidth:M,onSubmenuOpen:k,onSubmenuClose:W,overrideColor:F,rel:E,as:L,"data-element":T,"data-role":V}=n,K=function(e,t){if(null==e)return{};var n,r,u=function(e,t){if(null==e)return{};var n,r,u={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(u[n]=e[n]);return u}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(u[n]=e[n])}return u}(n,["submenu","submenuMaxWidth","submenuMinWidth","children","href","onClick","target","submenuDirection","icon","selected","onKeyDown","variant","showDropdownArrow","ariaLabel","clickToOpen","maxWidth","onSubmenuOpen","onSubmenuClose","overrideColor","rel","as","data-element","data-role"]);f.default(_||O,"Either prop `icon` must be defined or this node must have `children`."),f.default(O||q||"string"==typeof b,"If no text is provided an `ariaLabel` should be given to facilitate accessibility."),f.default("boolean"==typeof b||void 0===b||O&&"string"==typeof b&&b.length,"You should not pass `children` when `submenu` is an empty string");const A=t.useRef(m.default()),{isChildOfSegment:H,overriddenVariant:N}=t.useContext(c.MenuSegmentContext),{inFullscreenView:R,registerItem:Y,unregisterItem:z,focusId:B,updateFocusId:G,menuType:J}=l.useStrictMenuContext(),Q=t.useContext(a.default),U=Object.keys(Q).length>0,{submenuFocusId:X,updateFocusId:Z,handleKeyDown:$,submenuHasMaxWidth:ee}=Q,te=B===A.current,ne=X?X===A.current:void 0,[re,ue]=t.useState(null),[ie,oe]=t.useState(null);t.useLayoutEffect((()=>{var e;const t=null!==(e=null==re?void 0:re.querySelector(r.defaultFocusableSelectors))&&void 0!==e?e:null;t!==ie&&oe(t)}),[ie,re]),t.useEffect((()=>{const e=A.current;return Y&&Y(e),()=>{z&&z(e)}}),[Y,z]),t.useEffect((()=>{if(te&&!ne||ne){if(ie)return void ie.focus();null==re||re.focus()}}),[ie,te,ne,re]);const le=e=>{U?(e.stopPropagation(),null==Z||Z(A.current)):null==G||G(A.current)},se={className:j||g?"carbon-menu-item--has-link":"",href:ie?void 0:j,onClick:ie?void 0:g,target:w,rel:E,icon:_,removeAriaLabelOnIcon:!0,selected:S,onKeyDown:R?void 0:e=>{null==P||P(e),o.default.isEscKey(e)&&(null==re||re.focus()),null==$||$(e)},overrideColor:F,ref:ue};"alternate"===N&&H&&"alternate"===C&&["white","black"].includes(J)&&(se.overrideColor=!0);const ae=e=>M&&"string"==typeof e?e:void 0,ce=R?void 0:M,de=!(g||j||ie);if(b)return e.jsx(d.StyledMenuItem,h(y({"data-component":"menu-item","data-element":T,"data-role":V,menuType:J,title:ae(b),maxWidth:ce},K),{inFullscreenView:R,id:A.current,as:L,onFocus:le,children:e.jsx(s.default,h(y(h(y(h(y({},"boolean"!=typeof b&&{title:b}),{submenuDirection:x,showDropdownArrow:I,clickToOpen:D,maxWidth:M,asPassiveItem:de,ariaLabel:q,onSubmenuOpen:k,onSubmenuClose:W,submenuMaxWidth:p,submenuMinWidth:v}),se),{variant:C}),K),{children:O}))}));const me=u.default(K),be=!!(null==re?void 0:re.querySelector("[data-element='input']"));return e.jsx(d.StyledMenuItem,h(y({"data-component":"menu-item","data-element":T,"data-role":V,menuType:J,inSubmenu:U,title:ae(O),maxWidth:ce},K),{inFullscreenView:R&&!Object.keys(Q).length,id:A.current,as:L,onFocus:le,children:e.jsx(i.default,h(y(h(y({menuType:J,"data-role":"menu-item-wrapper"},se),{menuItemVariant:C,ariaLabel:q,maxWidth:ee?void 0:ce,inFullscreenView:R,asPassiveItem:de}),me),{asDiv:be||"div"===L,hasFocusableChild:!!ie,hasInput:be,inSubmenu:U,children:O}))}))};exports.MenuItem=v,exports.default=v;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("invariant"),r=require("../../../__internal__/focus-trap/focus-trap-utils.js"),u=require("../../../style/utils/filter-styled-system-padding-props.js"),i=require("./menu-item.style.js"),o=require("../../../__internal__/utils/helpers/events/events.js"),l=require("../__internal__/strict-menu.context.js"),s=require("../__internal__/submenu/submenu.component.js"),a=require("../__internal__/submenu/submenu.context.js"),c=require("../menu-segment-title/menu-segment-title.context.js"),d=require("../menu.style.js"),m=require("../../../__internal__/utils/helpers/guid/index.js");function b(e){return e&&e.__esModule?e:{default:e}}var f=b(t),p=b(n);function h(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function y(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){h(e,t,n[t])}))}return e}function v(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}const O=n=>{var{submenu:b,submenuMaxWidth:h,submenuMinWidth:O,children:g,href:j,onClick:w,target:x,submenuDirection:_="right",icon:S,selected:P,onKeyDown:C,variant:I="default",showDropdownArrow:q=!0,ariaLabel:D,clickToOpen:M,maxWidth:k,onSubmenuOpen:W,onSubmenuClose:F,overrideColor:E,rel:L,as:T,"data-element":V,"data-role":K}=n,A=function(e,t){if(null==e)return{};var n,r,u=function(e,t){if(null==e)return{};var n,r,u={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(u[n]=e[n]);return u}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(u[n]=e[n])}return u}(n,["submenu","submenuMaxWidth","submenuMinWidth","children","href","onClick","target","submenuDirection","icon","selected","onKeyDown","variant","showDropdownArrow","ariaLabel","clickToOpen","maxWidth","onSubmenuOpen","onSubmenuClose","overrideColor","rel","as","data-element","data-role"]);p.default(S||g,"Either prop `icon` must be defined or this node must have `children`."),p.default(g||D||b||"string"==typeof b&&b.length,"If no text or node is provided via the `submenu` prop, an `ariaLabel` should be given to facilitate accessibility."),p.default("boolean"==typeof b||void 0===b||f.default.isValidElement(b)||g&&"string"==typeof b&&b.length,"You should not pass `children` when `submenu` is an empty string");const H=t.useRef(m.default()),{isChildOfSegment:N,overriddenVariant:R}=t.useContext(c.MenuSegmentContext),{inFullscreenView:Y,registerItem:z,unregisterItem:B,focusId:G,updateFocusId:J,menuType:Q}=l.useStrictMenuContext(),U=t.useContext(a.default),X=Object.keys(U).length>0,{submenuFocusId:Z,updateFocusId:$,handleKeyDown:ee,submenuHasMaxWidth:te}=U,ne=G===H.current,re=Z?Z===H.current:void 0,[ue,ie]=t.useState(null),[oe,le]=t.useState(null);t.useLayoutEffect((()=>{var e;const t=null!==(e=null==ue?void 0:ue.querySelector(r.defaultFocusableSelectors))&&void 0!==e?e:null;t!==oe&&le(t)}),[oe,ue]),t.useEffect((()=>{const e=H.current;return z&&z(e),()=>{B&&B(e)}}),[z,B]),t.useEffect((()=>{if(ne&&!re||re){if(oe)return void oe.focus();null==ue||ue.focus()}}),[oe,ne,re,ue]);const se=e=>{X?(e.stopPropagation(),null==$||$(H.current)):null==J||J(H.current)},ae={className:j||w?"carbon-menu-item--has-link":"",href:oe?void 0:j,onClick:oe?void 0:w,target:x,rel:L,icon:S,removeAriaLabelOnIcon:!0,selected:P,onKeyDown:Y?void 0:e=>{null==C||C(e),o.default.isEscKey(e)&&(null==ue||ue.focus()),null==ee||ee(e)},overrideColor:E,ref:ie};"alternate"===R&&N&&"alternate"===I&&["white","black"].includes(Q)&&(ae.overrideColor=!0);const ce=e=>k&&"string"==typeof e?e:void 0,de=Y?void 0:k,me=!(w||j||oe);if(b)return e.jsx(d.StyledMenuItem,v(y({"data-component":"menu-item","data-element":V,"data-role":K,menuType:Q,title:ce(b),maxWidth:de},A),{inFullscreenView:Y,id:H.current,as:T,onFocus:se,children:e.jsx(s.default,v(y(v(y(v(y({},"boolean"!=typeof b&&{title:b}),{submenuDirection:_,showDropdownArrow:q,clickToOpen:M,maxWidth:k,asPassiveItem:me,ariaLabel:D,onSubmenuOpen:W,onSubmenuClose:F,submenuMaxWidth:h,submenuMinWidth:O}),ae),{variant:I}),A),{children:g}))}));const be=u.default(A),fe=!!(null==ue?void 0:ue.querySelector("[data-element='input']"));return e.jsx(d.StyledMenuItem,v(y({"data-component":"menu-item","data-element":V,"data-role":K,menuType:Q,inSubmenu:X,title:ce(g),maxWidth:de},A),{inFullscreenView:Y&&!Object.keys(U).length,id:H.current,as:T,onFocus:se,children:e.jsx(i.default,v(y(v(y({menuType:Q,"data-role":"menu-item-wrapper"},ae),{menuItemVariant:I,ariaLabel:D,maxWidth:te?void 0:de,inFullscreenView:Y,asPassiveItem:me}),be),{asDiv:fe||"div"===T,hasFocusableChild:!!oe,hasInput:fe,inSubmenu:X,children:g}))}))};exports.MenuItem=O,exports.default=O;

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 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;
+"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((()=>{const e=j.current;y(e,h,b)}),[b,y]),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.component.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("./responsive-vertical-menu.context.js"),n=require("./responsive-vertical-menu.style.js"),i=require("../../box/box.component.js"),o=require("../../modal/modal.component.js"),s=require("../../../hooks/__internal__/useIsAboveBreakpoint/useIsAboveBreakpoint.js"),u=require("../../../hooks/useMediaQuery/useMediaQuery.js"),a=require("../../../__internal__/utils/helpers/tags/tags.js"),c=require("./__internal__/depth.context.js"),l=require("./__internal__/focus.context.js"),d=require("../../../hooks/__internal__/useLocale/useLocale.js");function p(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function v(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},n=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),n.forEach((function(r){p(e,r,t[r])}))}return e}function m(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})),e}function f(e,r){if(null==e)return{};var t,n,i=function(e,r){if(null==e)return{};var t,n,i={},o=Object.keys(e);for(n=0;n<o.length;n++)t=o[n],r.indexOf(t)>=0||(i[t]=e[t]);return i}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)t=o[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(i[t]=e[t])}return i}const y=c=>{var l,p,{children:y,height:h,responsiveBreakpoint:b=700,width:j}=c,x=f(c,["children","height","responsiveBreakpoint","width"]);const O=d.default(),{activeMenuItem:g,buttonRef:w,containerRef:_,menuRef:M,responsiveMode:k,setActiveMenuItem:S,setReducedMotion:P,setResponsiveMode:q}=t.useResponsiveVerticalMenu(),[E,R]=r.useState(!1),B=s.default(b),[C,L]=r.useState("auto"),[I,D]=r.useState("100%"),[T,A]=r.useState("auto"),V=r.useRef(null),F=!u.default("screen and (prefers-reduced-motion: no-preference)"),{current:G}=M,{current:Q}=w,$=r.useCallback((()=>{if(E&&k){const e=G||document.querySelector("[id='responsive-vertical-menu-primary']");e&&D(e.getBoundingClientRect().width-16+"px")}L(g&&G?`${G.getBoundingClientRect().right}px`:"auto"),A(g&&Q?`${Q.getBoundingClientRect().bottom}px`:"auto")}),[E,G,k,g,Q]),z=r.useCallback((e=>{_.current&&!_.current.contains(e.target)&&R(!1)}),[_]),W=r.useCallback((()=>{R((e=>!e)),S(null)}),[S]);return r.useLayoutEffect((()=>{$()}),[E,$,G,k]),r.useEffect((()=>{const e=()=>{setTimeout((()=>{_.current&&!_.current.contains(document.activeElement)&&R(!1)}),0)},r=e=>{"Escape"===e.key&&(e.preventDefault(),R(!1))},t=_.current;return E&&!k&&(document.addEventListener("keydown",r),window.addEventListener("click",z),null==t||t.addEventListener("focusout",e)),()=>{document.removeEventListener("keydown",r),window.removeEventListener("click",z),null==t||t.removeEventListener("focusout",e)}}),[E,_,z,k]),r.useEffect((()=>{null==P||P(F),null==q||q(!B)}),[B,F,P,q]),e.jsxs("div",{ref:_,children:[e.jsx(n.StyledButton,{active:E,"aria-controls":"responsive-vertical-menu-primary","aria-expanded":E,"aria-label":null===(l=O.verticalMenu.ariaLabels)||void 0===l?void 0:l.responsiveMenuLauncher(),buttonType:"tertiary","data-component":"responsive-vertical-menu-launcher","data-role":"responsive-vertical-menu-launcher",iconType:"squares_nine",id:"responsive-vertical-menu-launcher",onClick:W,ref:w}),k?e.jsx(o.default,{open:E,children:e.jsxs(i.Box,{position:"fixed",top:0,width:I,children:[e.jsx(i.Box,{display:"flex",justifyContent:"flex-end",width:"100%",backgroundColor:"var(--colorsGray850)",p:1,children:e.jsx(n.StyledCloseButton,{"aria-label":null===(p=O.verticalMenu.ariaLabels)||void 0===p?void 0:p.responsiveMenuCloseButton(),"data-component":"responsive-vertical-menu-close","data-role":"responsive-vertical-menu-close",iconType:"close",size:"small",buttonType:"tertiary",onClick:()=>{R(!1),S(null)}})}),e.jsx(n.StyledResponsiveMenu,{height:h,id:"responsive-vertical-menu-primary",menu:"primary",reduceMotion:F,ref:M,responsive:!0,tabIndex:-1,top:"48px",width:j,children:y})]})}):e.jsx(n.StyledGlobalVerticalMenuWrapper,m(v({},x,a.default("responsive-vertical-menu",x)),{children:E&&e.jsxs(e.Fragment,{children:[e.jsx(n.StyledResponsiveMenu,{childOpen:!!g,"data-component":"responsive-vertical-menu-primary","data-role":"responsive-vertical-menu-primary",height:h||"100%",id:"responsive-vertical-menu-primary",menu:"primary",reduceMotion:F,ref:M,responsive:!1,tabIndex:-1,top:T,width:j,children:y}),g?e.jsx(n.StyledResponsiveMenu,{"data-component":"responsive-vertical-menu-secondary","data-role":"responsive-vertical-menu-secondary",height:h||"100%",id:"responsive-vertical-menu-secondary",left:C,menu:"secondary",reduceMotion:F,ref:V,responsive:!1,tabIndex:-1,top:T,width:j,children:g.children}):null]})}))]})},h=r=>{var{children:t}=r,n=f(r,["children"]);return e.jsx(c.DepthProvider,{children:e.jsx(l.MenuFocusProvider,{children:e.jsx(y,m(v({},n),{children:t}))})})};exports.ResponsiveVerticalMenu=h,exports.default=h;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("./responsive-vertical-menu.context.js"),n=require("./responsive-vertical-menu.style.js"),i=require("../../box/box.component.js"),o=require("../../modal/modal.component.js"),s=require("../../../hooks/__internal__/useIsAboveBreakpoint/useIsAboveBreakpoint.js"),u=require("../../../hooks/useMediaQuery/useMediaQuery.js"),l=require("../../../__internal__/utils/helpers/tags/tags.js"),a=require("./__internal__/depth.context.js"),c=require("./__internal__/focus.context.js"),d=require("../../../hooks/__internal__/useLocale/useLocale.js");function p(e){return e&&e.__esModule?e:{default:e}}var v=p(r);function f(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function m(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},n=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),n.forEach((function(r){f(e,r,t[r])}))}return e}function y(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})),e}function h(e,r){if(null==e)return{};var t,n,i=function(e,r){if(null==e)return{};var t,n,i={},o=Object.keys(e);for(n=0;n<o.length;n++)t=o[n],r.indexOf(t)>=0||(i[t]=e[t]);return i}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)t=o[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(i[t]=e[t])}return i}const b=a=>{var c,p,{children:f,height:b,responsiveBreakpoint:j=700,width:x}=a,g=h(a,["children","height","responsiveBreakpoint","width"]);const O=d.default(),{activeMenuItem:w,buttonRef:_,containerRef:M,menuRef:k,responsiveMode:S,setActiveMenuItem:E,setReducedMotion:P,setResponsiveMode:q}=t.useResponsiveVerticalMenu(),[C,R]=r.useState(!1),[B,L]=r.useState(0),I=s.default(j),[D,T]=r.useState("auto"),[V,A]=r.useState("100%"),[F,G]=r.useState("auto"),Q=r.useRef(null),$=!u.default("screen and (prefers-reduced-motion: no-preference)"),{current:z}=k,{current:W}=_,H=r.useCallback((()=>{if(C&&S){const e=z||document.querySelector("[id='responsive-vertical-menu-primary']");e&&A(e.getBoundingClientRect().width-16+"px")}T(w&&z?`${z.getBoundingClientRect().right}px`:"auto"),G(w&&W?`${W.getBoundingClientRect().bottom}px`:"auto")}),[C,z,S,w,W]),J=r.useCallback((e=>{M.current&&!M.current.contains(e.target)&&R(!1)}),[M]),K=r.useCallback((()=>{R((e=>!e)),E(null)}),[E]);r.useLayoutEffect((()=>{H()}),[C,H,z,S]),r.useEffect((()=>{const e=()=>{setTimeout((()=>{M.current&&!M.current.contains(document.activeElement)&&R(!1)}),0)},r=e=>{"Escape"===e.key&&(e.preventDefault(),R(!1))},t=M.current;return C&&!S&&(document.addEventListener("keydown",r),window.addEventListener("click",J),null==t||t.addEventListener("focusout",e)),()=>{document.removeEventListener("keydown",r),window.removeEventListener("click",J),null==t||t.removeEventListener("focusout",e)}}),[C,M,J,S]),r.useEffect((()=>{null==P||P($),null==q||q(!I)}),[I,$,P,q]);const N=r.useCallback((e=>{if(!e)return 0;if(v.default.isValidElement(e))return 1+N(e.props.children);const r=v.default.Children.toArray(e);return r.length?r.reduce(((e,r)=>v.default.isValidElement(r)?e+1+N(r.props.children):e),0):0}),[]);return r.useEffect((()=>{const e=B,r=N(f);e!==r&&(L(r),E(null))}),[B,f,N,E]),e.jsxs("div",{ref:M,children:[e.jsx(n.StyledButton,{active:C,"aria-controls":"responsive-vertical-menu-primary","aria-expanded":C,"aria-label":null===(c=O.verticalMenu.ariaLabels)||void 0===c?void 0:c.responsiveMenuLauncher(),buttonType:"tertiary","data-component":"responsive-vertical-menu-launcher","data-role":"responsive-vertical-menu-launcher",iconType:"squares_nine",id:"responsive-vertical-menu-launcher",onClick:K,ref:_}),S?e.jsx(o.default,{open:C,children:e.jsxs(i.Box,{position:"fixed",top:0,width:V,children:[e.jsx(i.Box,{display:"flex",justifyContent:"flex-end",width:"100%",backgroundColor:"var(--colorsGray850)",p:1,children:e.jsx(n.StyledCloseButton,{"aria-label":null===(p=O.verticalMenu.ariaLabels)||void 0===p?void 0:p.responsiveMenuCloseButton(),"data-component":"responsive-vertical-menu-close","data-role":"responsive-vertical-menu-close",iconType:"close",size:"small",buttonType:"tertiary",onClick:()=>{R(!1),E(null)}})}),e.jsx(n.StyledResponsiveMenu,{height:b,id:"responsive-vertical-menu-primary",menu:"primary",reduceMotion:$,ref:k,responsive:!0,tabIndex:-1,top:"48px",width:x,children:f})]})}):e.jsx(n.StyledGlobalVerticalMenuWrapper,y(m({},g,l.default("responsive-vertical-menu",g)),{children:C&&e.jsxs(e.Fragment,{children:[e.jsx(n.StyledResponsiveMenu,{childOpen:!!w,"data-component":"responsive-vertical-menu-primary","data-role":"responsive-vertical-menu-primary",height:b||"100%",id:"responsive-vertical-menu-primary",menu:"primary",reduceMotion:$,ref:k,responsive:!1,tabIndex:-1,top:F,width:x,children:f}),w?e.jsx(n.StyledResponsiveMenu,{"data-component":"responsive-vertical-menu-secondary","data-role":"responsive-vertical-menu-secondary",height:b||"100%",id:"responsive-vertical-menu-secondary",left:D,menu:"secondary",reduceMotion:$,ref:Q,responsive:!1,tabIndex:-1,top:F,width:x,children:w.children}):null]})}))]})},j=r=>{var{children:t}=r,n=h(r,["children"]);return e.jsx(a.DepthProvider,{children:e.jsx(c.MenuFocusProvider,{children:e.jsx(b,y(m({},n),{children:t}))})})};exports.ResponsiveVerticalMenu=j,exports.default=j;

package/package.json

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