carbon-react 156.0.0 → 156.0.2

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

@@ -14,7 +14,7 @@ interface MenuFocusContextType {
         parentId?: string;
     }>;
     focusItem: (id: string) => void;
-    moveFocus: (direction: "next" | "prev" | "parent" | "firstChild" | "lastChild") => void;
+    moveFocus: (direction: "next" | "prev" | "parent" | "lastChild") => void;
     registerMenuItem: (id: string, ref: RefObject<HTMLElement>, parentId?: string) => void;
 }
 export declare const useMenuFocus: () => MenuFocusContextType;

package/esm/components/vertical-menu/responsive-vertical-menu/__internal__/focus.context.js

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import{useContext as r,createContext as t,useState as n,useRef as d,useCallback as s}from"react";import i from"../../../../__internal__/utils/logger/index.js";const c=t(void 0),l=()=>r(c)||(i.error("useMenuFocus must be used within a MenuFocusProvider"),{expandedItems:[],expandItem:()=>{},focusedItemId:null,getRegisteredItems:()=>[],focusItem:()=>{},moveFocus:()=>{},registerMenuItem:()=>{}}),u=({children:r})=>{const[t,i]=n([]),[l,u]=n(null),o=d(new Map),I=s(((e,r,t)=>{if(o.current.set(e,{ref:r,parentId:t,childIds:[]}),t){const r=o.current.get(t);null==r||r.childIds.push(e)}}),[]),a=s((()=>Array.from(o.current.entries()).map((([e,{ref:r,parentId:t,childIds:n}])=>({id:e,ref:r,parentId:t,childIds:n})))),[]),f=s((e=>{var r;const t=o.current.get(e);(null==t||null===(r=t.ref)||void 0===r?void 0:r.current)&&(t.ref.current.focus(),u(e))}),[]),h=s(((e,r)=>{i(r?r=>[...r,e]:r=>r.filter((r=>r!==e)))}),[]),m=s((e=>{if(!l)return;const r=o.current.get(l);if(!r)return;let n=[],d=[],s=-1;switch(e){case"parent":r.parentId&&f(r.parentId);break;case"firstChild":r.childIds.length>0&&(t.includes(l)||h(l,!0),f(r.childIds[0]));break;case"lastChild":if(r.childIds.length>0){const e=r.childIds[r.childIds.length-1];if(e)if(t.includes(e)){const r=a().find((r=>r.id===e));r&&f(r.childIds[r.childIds.length-1])}else f(e)}break;default:if(n=Array.from(o.current.keys()),d=n.filter((e=>{const r=o.current.get(e);return!r||!r.parentId||t.includes(r.parentId)})),s=d.indexOf(l),-1!==s){const r="next"===e?(s+1)%d.length:(s-1+d.length)%d.length;f(d[r])}}}),[l,f,t,h,a]),g={expandedItems:t,expandItem:h,focusedItemId:l,focusItem:f,getRegisteredItems:a,registerMenuItem:I,moveFocus:m};return e(c.Provider,{value:g,children:r})};export{u as MenuFocusProvider,l as useMenuFocus};
+import{jsx as e}from"react/jsx-runtime";import{useContext as r,createContext as t,useState as n,useRef as d,useCallback as s}from"react";import i from"../../../../__internal__/utils/logger/index.js";const c=t(void 0),u=()=>r(c)||(i.error("useMenuFocus must be used within a MenuFocusProvider"),{expandedItems:[],expandItem:()=>{},focusedItemId:null,getRegisteredItems:()=>[],focusItem:()=>{},moveFocus:()=>{},registerMenuItem:()=>{}}),l=({children:r})=>{const[t,i]=n([]),[u,l]=n(null),o=d(new Map),I=s(((e,r,t)=>{if(o.current.set(e,{ref:r,parentId:t,childIds:[]}),t){const r=o.current.get(t);null==r||r.childIds.push(e)}}),[]),a=s((()=>Array.from(o.current.entries()).map((([e,{ref:r,parentId:t,childIds:n}])=>({id:e,ref:r,parentId:t,childIds:n})))),[]),f=s((e=>{var r;const t=o.current.get(e);(null==t||null===(r=t.ref)||void 0===r?void 0:r.current)&&(t.ref.current.focus(),l(e))}),[]),m=s(((e,r)=>{i(r?r=>[...r,e]:r=>r.filter((r=>r!==e)))}),[]),h=s((e=>{if(!u)return;const r=o.current.get(u);if(!r)return;let n=[],d=[],s=-1;switch(e){case"parent":r.parentId&&f(r.parentId);break;case"lastChild":if(r.childIds.length>0){const e=r.childIds[r.childIds.length-1];if(e)if(t.includes(e)){const r=a().find((r=>r.id===e));r&&f(r.childIds[r.childIds.length-1])}else f(e)}break;default:if(n=Array.from(o.current.keys()),d=n.filter((e=>{const r=o.current.get(e);return!r||!r.parentId||t.includes(r.parentId)})),s=d.indexOf(u),-1!==s){const r="next"===e?(s+1)%d.length:(s-1+d.length)%d.length;f(d[r])}}}),[u,f,t,m,a]),p={expandedItems:t,expandItem:m,focusedItemId:u,focusItem:f,getRegisteredItems:a,registerMenuItem:I,moveFocus:h};return e(c.Provider,{value:p,children:r})};export{l as MenuFocusProvider,u as useMenuFocus};

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

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

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

@@ -12,5 +12,5 @@ export interface ResponsiveVerticalMenuProps extends TagProps {
     /** Set Menu launcher button data tag props */
     launcherButtonDataProps?: TagProps;
 }
-export declare const ResponsiveVerticalMenu: ({ children, ...props }: ResponsiveVerticalMenuProps) => React.JSX.Element;
+export declare const ResponsiveVerticalMenu: ({ children, width, height, ...props }: ResponsiveVerticalMenuProps) => React.JSX.Element;
 export default ResponsiveVerticalMenu;

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

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

@@ -17,14 +17,24 @@ export interface MenuContextType {
     menuRef: RefObject<HTMLUListElement>;
     reducedMotion?: boolean;
     responsiveMode?: boolean;
+    left: string;
+    top: string;
+    width?: string;
+    height?: string;
     setActive: Dispatch<SetStateAction<boolean>>;
     setActiveMenuItem: (item: ResponsiveVerticalMenuButtonItem | null) => void;
     setReducedMotion?: (reducedMotion: boolean) => void;
     setResponsiveMode?: (responsiveMode: boolean) => void;
+    setLeft: (left: string) => void;
+    setTop: (top: string) => void;
 }
 export declare const ResponsiveVerticalMenuContext: React.Context<MenuContextType | null>;
 export declare const useResponsiveVerticalMenu: () => MenuContextType;
 export interface ResponsiveVerticalMenuProviderProps {
     children: ReactNode;
+    /** @private @internal @ignore */
+    width?: string;
+    /** @private @internal @ignore */
+    height?: string;
 }
-export declare const ResponsiveVerticalMenuProvider: ({ children, }: ResponsiveVerticalMenuProviderProps) => React.JSX.Element;
+export declare const ResponsiveVerticalMenuProvider: ({ children, width, height, }: ResponsiveVerticalMenuProviderProps) => React.JSX.Element;

package/esm/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu.context.js

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import{createContext as t,useState as n,useRef as r,useContext as o}from"react";const i=t(null),u=()=>{const e=o(i);if(null===e)throw new Error("useResponsiveVerticalMenu must be used within a ResponsiveVerticalMenuProvider");return e},s=({children:t})=>{const[o,u]=n(!1),[s,l]=n(null),c=r(null),d=r(null),v=r(null),[a,m]=n(!1),[M,p]=n(!1);return e(i.Provider,{value:{active:o,activeMenuItem:s,buttonRef:c,containerRef:d,menuRef:v,reducedMotion:M,responsiveMode:a,setActive:u,setActiveMenuItem:l,setReducedMotion:p,setResponsiveMode:m},children:t})};export{i as ResponsiveVerticalMenuContext,s as ResponsiveVerticalMenuProvider,u as useResponsiveVerticalMenu};
+import{jsx as e}from"react/jsx-runtime";import{createContext as t,useContext as n,useState as i,useRef as r}from"react";import o from"../../../__internal__/utils/logger/index.js";const s=t(null),u=()=>{const e=n(s);if(null===e)throw new Error("useResponsiveVerticalMenu must be used within a ResponsiveVerticalMenuProvider");return e};let l=!1;const c=({children:t,width:u,height:c})=>{const d=n(s);!l&&null!==d&&(l=!0,o.deprecate("`ResponsiveVerticalMenuProvider` is deprecated and no longer needed for `ResponsiveVerticalMenu`. You can use `ResponsiveVerticalMenu` directly without wrapping it in a provider."));const[a,p]=i(!1),[v,h]=i(null),m=r(null),M=r(null),f=r(null),[R,w]=i(!1),[g,V]=i(!1),[_,x]=i("auto"),[P,b]=i("auto");return e(s.Provider,{value:{active:a,activeMenuItem:v,buttonRef:m,containerRef:M,menuRef:f,reducedMotion:g,responsiveMode:R,left:_,top:P,width:u,height:c,setActive:p,setActiveMenuItem:h,setReducedMotion:V,setResponsiveMode:w,setLeft:x,setTop:b},children:t})};export{s as ResponsiveVerticalMenuContext,c as ResponsiveVerticalMenuProvider,u as useResponsiveVerticalMenu};

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

@@ -14,7 +14,7 @@ interface MenuFocusContextType {
         parentId?: string;
     }>;
     focusItem: (id: string) => void;
-    moveFocus: (direction: "next" | "prev" | "parent" | "firstChild" | "lastChild") => void;
+    moveFocus: (direction: "next" | "prev" | "parent" | "lastChild") => void;
     registerMenuItem: (id: string, ref: RefObject<HTMLElement>, parentId?: string) => void;
 }
 export declare const useMenuFocus: () => MenuFocusContextType;

package/lib/components/vertical-menu/responsive-vertical-menu/__internal__/focus.context.js

@@ -1 +1 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("react"),r=require("../../../../__internal__/utils/logger/index.js");const s=t.createContext(void 0);exports.MenuFocusProvider=({children:r})=>{const[n,d]=t.useState([]),[u,c]=t.useState(null),l=t.useRef(new Map),i=t.useCallback(((e,t,r)=>{if(l.current.set(e,{ref:t,parentId:r,childIds:[]}),r){const t=l.current.get(r);null==t||t.childIds.push(e)}}),[]),a=t.useCallback((()=>Array.from(l.current.entries()).map((([e,{ref:t,parentId:r,childIds:s}])=>({id:e,ref:t,parentId:r,childIds:s})))),[]),o=t.useCallback((e=>{var t;const r=l.current.get(e);(null==r||null===(t=r.ref)||void 0===t?void 0:t.current)&&(r.ref.current.focus(),c(e))}),[]),I=t.useCallback(((e,t)=>{d(t?t=>[...t,e]:t=>t.filter((t=>t!==e)))}),[]),f=t.useCallback((e=>{if(!u)return;const t=l.current.get(u);if(!t)return;let r=[],s=[],d=-1;switch(e){case"parent":t.parentId&&o(t.parentId);break;case"firstChild":t.childIds.length>0&&(n.includes(u)||I(u,!0),o(t.childIds[0]));break;case"lastChild":if(t.childIds.length>0){const e=t.childIds[t.childIds.length-1];if(e)if(n.includes(e)){const t=a().find((t=>t.id===e));t&&o(t.childIds[t.childIds.length-1])}else o(e)}break;default:if(r=Array.from(l.current.keys()),s=r.filter((e=>{const t=l.current.get(e);return!t||!t.parentId||n.includes(t.parentId)})),d=s.indexOf(u),-1!==d){const t="next"===e?(d+1)%s.length:(d-1+s.length)%s.length;o(s[t])}}}),[u,o,n,I,a]),h={expandedItems:n,expandItem:I,focusedItemId:u,focusItem:o,getRegisteredItems:a,registerMenuItem:i,moveFocus:f};return e.jsx(s.Provider,{value:h,children:r})},exports.useMenuFocus=()=>t.useContext(s)||(r.default.error("useMenuFocus must be used within a MenuFocusProvider"),{expandedItems:[],expandItem:()=>{},focusedItemId:null,getRegisteredItems:()=>[],focusItem:()=>{},moveFocus:()=>{},registerMenuItem:()=>{}});
+"use strict";var e=require("react/jsx-runtime"),t=require("react"),r=require("../../../../__internal__/utils/logger/index.js");const s=t.createContext(void 0);exports.MenuFocusProvider=({children:r})=>{const[n,u]=t.useState([]),[d,c]=t.useState(null),l=t.useRef(new Map),i=t.useCallback(((e,t,r)=>{if(l.current.set(e,{ref:t,parentId:r,childIds:[]}),r){const t=l.current.get(r);null==t||t.childIds.push(e)}}),[]),a=t.useCallback((()=>Array.from(l.current.entries()).map((([e,{ref:t,parentId:r,childIds:s}])=>({id:e,ref:t,parentId:r,childIds:s})))),[]),o=t.useCallback((e=>{var t;const r=l.current.get(e);(null==r||null===(t=r.ref)||void 0===t?void 0:t.current)&&(r.ref.current.focus(),c(e))}),[]),I=t.useCallback(((e,t)=>{u(t?t=>[...t,e]:t=>t.filter((t=>t!==e)))}),[]),f=t.useCallback((e=>{if(!d)return;const t=l.current.get(d);if(!t)return;let r=[],s=[],u=-1;switch(e){case"parent":t.parentId&&o(t.parentId);break;case"lastChild":if(t.childIds.length>0){const e=t.childIds[t.childIds.length-1];if(e)if(n.includes(e)){const t=a().find((t=>t.id===e));t&&o(t.childIds[t.childIds.length-1])}else o(e)}break;default:if(r=Array.from(l.current.keys()),s=r.filter((e=>{const t=l.current.get(e);return!t||!t.parentId||n.includes(t.parentId)})),u=s.indexOf(d),-1!==u){const t="next"===e?(u+1)%s.length:(u-1+s.length)%s.length;o(s[t])}}}),[d,o,n,I,a]),h={expandedItems:n,expandItem:I,focusedItemId:d,focusItem:o,getRegisteredItems:a,registerMenuItem:i,moveFocus:f};return e.jsx(s.Provider,{value:h,children:r})},exports.useMenuFocus=()=>t.useContext(s)||(r.default.error("useMenuFocus must be used within a MenuFocusProvider"),{expandedItems:[],expandItem:()=>{},focusedItemId:null,getRegisteredItems:()=>[],focusItem:()=>{},moveFocus:()=>{},registerMenuItem:()=>{}});

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

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

@@ -12,5 +12,5 @@ export interface ResponsiveVerticalMenuProps extends TagProps {
     /** Set Menu launcher button data tag props */
     launcherButtonDataProps?: TagProps;
 }
-export declare const ResponsiveVerticalMenu: ({ children, ...props }: ResponsiveVerticalMenuProps) => React.JSX.Element;
+export declare const ResponsiveVerticalMenu: ({ children, width, height, ...props }: ResponsiveVerticalMenuProps) => React.JSX.Element;
 export default ResponsiveVerticalMenu;

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"),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,launcherButtonDataProps:g}=a,w=h(a,["children","height","responsiveBreakpoint","width","launcherButtonDataProps"]);const O=d.default(),{active:_,activeMenuItem:M,buttonRef:k,containerRef:E,menuRef:P,responsiveMode:S,setActive:L,setActiveMenuItem:R,setReducedMotion:q,setResponsiveMode:B}=t.useResponsiveVerticalMenu(),[C,T]=r.useState(0),D=s.default(j),[I,z]=r.useState("auto"),[A,V]=r.useState("100%"),[$,F]=r.useState("auto"),G=r.useRef(null),Q=!u.default("screen and (prefers-reduced-motion: no-preference)"),{current:W}=P,{current:H}=k,J=r.useCallback((()=>{if(_&&S){const e=W||document.querySelector("[id='responsive-vertical-menu-primary']");e&&V(`${e.getBoundingClientRect().width}px`)}z(M&&W?`${W.getBoundingClientRect().right}px`:"auto"),F(M&&H?`${H.getBoundingClientRect().bottom}px`:"auto")}),[_,W,S,M,H]),K=r.useCallback((e=>{E.current&&!E.current.contains(e.target)&&L(!1)}),[E]),N=r.useCallback((()=>{L((e=>!e)),R(null)}),[_,L,R]);r.useLayoutEffect((()=>(J(),window.addEventListener("resize",J),()=>{var e;null===(e=window)||void 0===e||e.removeEventListener("resize",J)})),[_,J,W,S]);const U=r.useRef(!1),X=r.useRef(null);r.useEffect((()=>{const e=()=>{U.current=!0,null!==X.current&&clearTimeout(X.current),X.current=window.setTimeout((()=>{U.current=!1}),100)};return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e),null!==X.current&&clearTimeout(X.current)}}),[]),r.useEffect((()=>{const e=({relatedTarget:e,target:r})=>{E.current&&(E.current.contains(e)||null===e&&r!==k.current&&setTimeout((()=>{M||U.current||L(!1)}),10))},r=e=>{"Escape"===e.key&&(e.preventDefault(),L(!1))},t=E.current;return _&&!S&&(document.addEventListener("keydown",r),window.addEventListener("click",K),null==t||t.addEventListener("focusout",e)),()=>{document.removeEventListener("keydown",r),window.removeEventListener("click",K),null==t||t.removeEventListener("focusout",e)}}),[_,M,k,E,K,S]),r.useEffect((()=>{null==q||q(Q),null==B||B(!D)}),[D,Q,q,B]);const Y=r.useCallback((e=>{if(!e)return 0;if(v.default.isValidElement(e))return 1+Y(e.props.children);const r=v.default.Children.toArray(e);return r.length?r.reduce(((e,r)=>v.default.isValidElement(r)?e+1+Y(r.props.children):e),0):0}),[]);return r.useEffect((()=>{const e=C,r=Y(f);e!==r&&(T(r),R(null))}),[C,f,Y,R]),e.jsxs("div",{ref:E,children:[e.jsx(n.StyledButton,m({active:_,"aria-controls":"responsive-vertical-menu-primary","aria-expanded":_,"aria-label":null===(c=O.verticalMenu.ariaLabels)||void 0===c?void 0:c.responsiveMenuLauncher(),buttonType:"tertiary",iconType:"squares_nine",id:"responsive-vertical-menu-launcher",onClick:N,ref:k},l.default("responsive-vertical-menu-launcher",m({"data-role":"responsive-vertical-menu-launcher"},g)))),S?e.jsx(o.default,{open:_,children:e.jsxs(i.Box,{position:"fixed",top:0,width:A,children:[e.jsx(i.Box,{boxSizing:"border-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:()=>{L(!1),R(null)}})}),e.jsx(n.StyledResponsiveMenu,{height:b,id:"responsive-vertical-menu-primary",menu:"primary",reduceMotion:Q,ref:P,responsive:!0,tabIndex:-1,top:"48px",width:x,children:f})]})}):e.jsx(n.StyledGlobalVerticalMenuWrapper,y(m({},w,l.default("responsive-vertical-menu",w)),{children:_&&e.jsxs(e.Fragment,{children:[e.jsx(n.StyledResponsiveMenu,{childOpen:!!M,"data-component":"responsive-vertical-menu-primary","data-role":"responsive-vertical-menu-primary",height:b||"100%",id:"responsive-vertical-menu-primary",menu:"primary",reduceMotion:Q,ref:P,responsive:!1,tabIndex:-1,top:$,width:x,children:f}),M?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:I,menu:"secondary",reduceMotion:Q,ref:G,responsive:!1,tabIndex:-1,top:$,width:x,children:M.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;
+"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"),c=require("./__internal__/depth.context.js"),a=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 h(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 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 y(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=c=>{var a,p,{children:f,height:b,responsiveBreakpoint:j=700,width:x,launcherButtonDataProps:g}=c,w=y(c,["children","height","responsiveBreakpoint","width","launcherButtonDataProps"]);const O=d.default(),{active:_,activeMenuItem:k,buttonRef:M,containerRef:E,menuRef:P,responsiveMode:L,top:R,setActive:S,setActiveMenuItem:q,setReducedMotion:B,setResponsiveMode:C,setLeft:T,setTop:D}=t.useResponsiveVerticalMenu(),[I,z]=r.useState(0),V=s.default(j),[A,$]=r.useState("100%"),F=!u.default("screen and (prefers-reduced-motion: no-preference)"),{current:G}=P,{current:Q}=M,W=r.useCallback((()=>{if(_&&L){const e=G||document.querySelector("[id='responsive-vertical-menu-primary']");e&&$(`${e.getBoundingClientRect().width}px`)}T(k&&G?`${G.getBoundingClientRect().right}px`:"auto"),D(k&&Q?`${Q.getBoundingClientRect().bottom}px`:"auto")}),[_,G,L,k,Q]),H=r.useCallback((e=>{E.current&&!E.current.contains(e.target)&&S(!1)}),[E]),J=r.useCallback((()=>{S((e=>!e)),q(null)}),[_,S,q]);r.useLayoutEffect((()=>(W(),window.addEventListener("resize",W),()=>{var e;null===(e=window)||void 0===e||e.removeEventListener("resize",W)})),[_,W,G,L]);const K=r.useRef(!1),N=r.useRef(null);r.useEffect((()=>{const e=()=>{K.current=!0,null!==N.current&&clearTimeout(N.current),N.current=window.setTimeout((()=>{K.current=!1}),100)};return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e),null!==N.current&&clearTimeout(N.current)}}),[]),r.useEffect((()=>{const e=({relatedTarget:e,target:r})=>{E.current&&(E.current.contains(e)||null===e&&r!==M.current&&setTimeout((()=>{k||K.current||S(!1)}),10))},r=e=>{"Escape"===e.key&&(e.preventDefault(),S(!1))},t=E.current;return _&&!L&&(document.addEventListener("keydown",r),window.addEventListener("click",H),null==t||t.addEventListener("focusout",e)),()=>{document.removeEventListener("keydown",r),window.removeEventListener("click",H),null==t||t.removeEventListener("focusout",e)}}),[_,k,M,E,H,L]),r.useEffect((()=>{null==B||B(F),null==C||C(!V)}),[V,F,B,C]);const U=r.useCallback((e=>{if(!e)return 0;if(v.default.isValidElement(e))return 1+U(e.props.children);const r=v.default.Children.toArray(e);return r.length?r.reduce(((e,r)=>v.default.isValidElement(r)?e+1+U(r.props.children):e),0):0}),[]);return r.useEffect((()=>{const e=I,r=U(f);e!==r&&(z(r),q(null))}),[I,f,U,q]),e.jsxs("div",{ref:E,children:[e.jsx(n.StyledButton,h({active:_,"aria-controls":"responsive-vertical-menu-primary","aria-expanded":_,"aria-label":null===(a=O.verticalMenu.ariaLabels)||void 0===a?void 0:a.responsiveMenuLauncher(),buttonType:"tertiary",iconType:"squares_nine",id:"responsive-vertical-menu-launcher",onClick:J,ref:M},l.default("responsive-vertical-menu-launcher",h({"data-role":"responsive-vertical-menu-launcher"},g)))),L?e.jsx(o.default,{open:_,children:e.jsxs(i.Box,{position:"fixed",top:0,width:A,children:[e.jsx(i.Box,{boxSizing:"border-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:()=>{S(!1),q(null)}})}),e.jsx(n.StyledResponsiveMenu,{height:b,id:"responsive-vertical-menu-primary",menu:"primary",reduceMotion:F,ref:P,responsive:!0,tabIndex:-1,top:"48px",width:x,children:f})]})}):e.jsx(n.StyledGlobalVerticalMenuWrapper,m(h({},w,l.default("responsive-vertical-menu",w)),{children:_&&e.jsx(e.Fragment,{children:e.jsx(n.StyledResponsiveMenu,{childOpen:!!k,"data-component":"responsive-vertical-menu-primary","data-role":"responsive-vertical-menu-primary",height:b||"100%",id:"responsive-vertical-menu-primary",menu:"primary",reduceMotion:F,ref:P,responsive:!1,tabIndex:-1,top:R,width:x,children:f})})}))]})},j=r=>{var{children:n,width:i,height:o}=r,s=y(r,["children","width","height"]);return e.jsx(c.DepthProvider,{children:e.jsx(a.MenuFocusProvider,{children:e.jsx(t.ResponsiveVerticalMenuProvider,{width:i,height:o,children:e.jsx(b,m(h({width:i,height:o},s),{children:n}))})})})};exports.ResponsiveVerticalMenu=j,exports.default=j;

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

@@ -17,14 +17,24 @@ export interface MenuContextType {
     menuRef: RefObject<HTMLUListElement>;
     reducedMotion?: boolean;
     responsiveMode?: boolean;
+    left: string;
+    top: string;
+    width?: string;
+    height?: string;
     setActive: Dispatch<SetStateAction<boolean>>;
     setActiveMenuItem: (item: ResponsiveVerticalMenuButtonItem | null) => void;
     setReducedMotion?: (reducedMotion: boolean) => void;
     setResponsiveMode?: (responsiveMode: boolean) => void;
+    setLeft: (left: string) => void;
+    setTop: (top: string) => void;
 }
 export declare const ResponsiveVerticalMenuContext: React.Context<MenuContextType | null>;
 export declare const useResponsiveVerticalMenu: () => MenuContextType;
 export interface ResponsiveVerticalMenuProviderProps {
     children: ReactNode;
+    /** @private @internal @ignore */
+    width?: string;
+    /** @private @internal @ignore */
+    height?: string;
 }
-export declare const ResponsiveVerticalMenuProvider: ({ children, }: ResponsiveVerticalMenuProviderProps) => React.JSX.Element;
+export declare const ResponsiveVerticalMenuProvider: ({ children, width, height, }: ResponsiveVerticalMenuProviderProps) => React.JSX.Element;

package/lib/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu.context.js

@@ -1 +1 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("react");const s=t.createContext(null);exports.ResponsiveVerticalMenuContext=s,exports.ResponsiveVerticalMenuProvider=({children:n})=>{const[r,u]=t.useState(!1),[i,o]=t.useState(null),c=t.useRef(null),l=t.useRef(null),a=t.useRef(null),[v,R]=t.useState(!1),[d,M]=t.useState(!1);return e.jsx(s.Provider,{value:{active:r,activeMenuItem:i,buttonRef:c,containerRef:l,menuRef:a,reducedMotion:d,responsiveMode:v,setActive:u,setActiveMenuItem:o,setReducedMotion:M,setResponsiveMode:R},children:n})},exports.useResponsiveVerticalMenu=()=>{const e=t.useContext(s);if(null===e)throw new Error("useResponsiveVerticalMenu must be used within a ResponsiveVerticalMenuProvider");return e};
+"use strict";var e=require("react/jsx-runtime"),t=require("react"),n=require("../../../__internal__/utils/logger/index.js");const s=t.createContext(null);let r=!1;exports.ResponsiveVerticalMenuContext=s,exports.ResponsiveVerticalMenuProvider=({children:i,width:u,height:o})=>{const a=t.useContext(s);!r&&null!==a&&(r=!0,n.default.deprecate("`ResponsiveVerticalMenuProvider` is deprecated and no longer needed for `ResponsiveVerticalMenu`. You can use `ResponsiveVerticalMenu` directly without wrapping it in a provider."));const[l,c]=t.useState(!1),[d,v]=t.useState(null),p=t.useRef(null),R=t.useRef(null),M=t.useRef(null),[f,h]=t.useState(!1),[x,V]=t.useState(!1),[w,g]=t.useState("auto"),[S,m]=t.useState("auto");return e.jsx(s.Provider,{value:{active:l,activeMenuItem:d,buttonRef:p,containerRef:R,menuRef:M,reducedMotion:x,responsiveMode:f,left:w,top:S,width:u,height:o,setActive:c,setActiveMenuItem:v,setReducedMotion:V,setResponsiveMode:h,setLeft:g,setTop:m},children:i})},exports.useResponsiveVerticalMenu=()=>{const e=t.useContext(s);if(null===e)throw new Error("useResponsiveVerticalMenu must be used within a ResponsiveVerticalMenuProvider");return e};

package/package.json

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