carbon-react 155.4.1 → 155.5.0

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 f,StyledIcon as v,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,K=k(o,["children","customIcon","icon","id","href","label","onClick","rel","target"]);const{activeMenuItem:A,containerRef:E,responsiveMode:F,setActiveMenuItem:q,reducedMotion:R}=j(),{expandItem:T,focusItem:z,getRegisteredItems:B,moveFocus:G,registerMenuItem:H}=g(),J=y(),L=(null==A?void 0:A.id)===I,N=r.Children.count(a)>0,Q=i(C),U=d((()=>F&&0===J),[J,F]),[V,W]=s(U&&N);l((()=>{H(I,c,Q)}),[I,Q,c,H]);const X=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="${J}"]`))||[],n=Array.from(t),0===J&&N&&(null==A?void 0:A.id)===I&&(e.preventDefault(),G(e.shiftKey?"lastChild":"firstChild")),1===J){const t=n.findIndex((e=>e.id===I)),r=0===t;t===n.length-1&&(!N||N&&!V)&&(e.shiftKey||(e.preventDefault(),G("parent"))),r&&e.shiftKey&&(e.preventDefault(),G("parent"))}if(2===J&&n.findIndex((e=>e.id===I))===n.length-1){const n=B(),t=n.find((e=>e.id===Q)),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="${J-1}"]`))||[]);n.findIndex((e=>e.id===Q))===n.length-1&&!e.shiftKey&&(e.preventDefault(),z(r.id))}}break;case"Enter":case" ":if(e.preventDefault(),U)return;if(N)if(0!==J||F)W(!V),T(I,!V);else{const e=(null==A?void 0:A.id)===I;q(e?null:{id:I,label:x,children:a})}else w&&"Enter"===e.key&&(window.location.href=w)}};return e(p,{children:N?n(t,{children:[n(u,P(_({active:L,"aria-expanded":L||V,"data-component":`responsive-vertical-menu-item-${I}`,"data-depth":J,"data-role":`responsive-vertical-menu-item-${I}`,depth:J,hasIcon:!!O||!!b,id:I,onClick:()=>{if(!U){if(0!==J||F)W(!V),T(I,!V);else{const e=(null==A?void 0:A.id)===I;q(e?null:{id:I,label:x,children:a})}z(I)}},onKeyDown:e=>{F||X(e)},onFocus:()=>z(I),ref:c,responsive:F,tabIndex:U?-1:0,type:"button"},K),{children:[e(D,{customIcon:b,depth:J,hasChildren:!0,icon:O,label:x,responsive:F}),!U&&e(v,{"data-component":"responsive-vertical-menu-expander-icon","data-role":"responsive-vertical-menu-expander-icon",depth:J,expanded:V||L,reduceMotion:!!R,type:J>=1?"chevron_down_thick":"chevron_right_thick"})]})),V&&e(h,{"data-component":`${I}-nested-menu-wrapper`,"data-role":`${I}-nested-menu-wrapper`,depth:J,hasIcon:!!O||!!b,responsive:F,children:e(m,{"data-component":`${I}-nested-menu`,"data-role":`${I}-nested-menu`,depth:J,hasIcon:!!O||!!b,id:`${I}-nested-menu`,responsive:F,children:e(C.Provider,{value:I,children:a})})})]}):e(f,P(_({"data-component":`responsive-vertical-menu-item-${I}`,"data-depth":J,"data-role":`responsive-vertical-menu-item-${I}`,depth:J,href:w,id:I,onClick:$,onFocus:()=>z(I),onKeyDown:e=>{F||X(e)},ref:c,rel:S,responsive:F,tabIndex:0,target:M},K),{children:e(D,{customIcon:b,depth:J,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{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((()=>{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};

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(),{activeMenuItem:I,buttonRef:R,containerRef:S,menuRef:D,responsiveMode:z,setActiveMenuItem:A,setReducedMotion:$,setResponsiveMode:q}=a(),[Q,V]=o(!1),[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}=D,{current:re}=R,ne=c((()=>{if(Q&&z){const e=ee||document.querySelector("[id='responsive-vertical-menu-primary']");e&&U(`${e.getBoundingClientRect().width}px`)}K(I&&ee?`${ee.getBoundingClientRect().right}px`:"auto"),X(I&&re?`${re.getBoundingClientRect().bottom}px`:"auto")}),[Q,ee,z,I,re]),te=c((e=>{S.current&&!S.current.contains(e.target)&&V(!1)}),[S]),oe=c((()=>{V((e=>!e)),A(null)}),[A]);s((()=>(ne(),window.addEventListener("resize",ne),()=>{var e;null===(e=window)||void 0===e||e.removeEventListener("resize",ne)})),[Q,ne,ee,z]);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})=>{S.current&&(S.current.contains(e)||null===e&&r!==R.current&&setTimeout((()=>{I||ie.current||V(!1)}),10))},r=e=>{"Escape"===e.key&&(e.preventDefault(),V(!1))},n=S.current;return Q&&!z&&(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)}}),[Q,I,R,S,te,z]),l((()=>{null==$||$(Z),null==q||q(!H)}),[H,Z,$,q]);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),A(null))}),[G,E,se,A]),r("div",{ref:S,children:[e(u,x({active:Q,"aria-controls":"responsive-vertical-menu-primary","aria-expanded":Q,"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:R},b("responsive-vertical-menu-launcher",x({"data-role":"responsive-vertical-menu-launcher"},B)))),z?e(f,{open:Q,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:()=>{V(!1),A(null)}})}),e(p,{height:L,id:"responsive-vertical-menu-primary",menu:"primary",reduceMotion:Z,ref:D,responsive:!0,tabIndex:-1,top:"48px",width:M,children:E})]})}):e(m,_(x({},C,b("responsive-vertical-menu",C)),{children:Q&&r(n,{children:[e(p,{childOpen:!!I,"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:D,responsive:!1,tabIndex:-1,top:W,width:M,children:E}),I?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:I.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 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};

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

@@ -1,4 +1,4 @@
-import React, { ReactNode, RefObject } from "react";
+import React, { Dispatch, ReactNode, RefObject, SetStateAction } from "react";
 import { IconType } from "../../icon/icon-type";
 export interface ResponsiveVerticalMenuButtonItem {
     children?: ReactNode;
@@ -10,12 +10,14 @@ export interface ResponsiveVerticalMenuButtonItem {
     label?: React.ReactNode;
 }
 export interface MenuContextType {
+    active: boolean;
     activeMenuItem: ResponsiveVerticalMenuButtonItem | null;
     buttonRef: RefObject<HTMLButtonElement>;
     containerRef: RefObject<HTMLDivElement>;
     menuRef: RefObject<HTMLUListElement>;
     reducedMotion?: boolean;
     responsiveMode?: boolean;
+    setActive: Dispatch<SetStateAction<boolean>>;
     setActiveMenuItem: (item: ResponsiveVerticalMenuButtonItem | null) => void;
     setReducedMotion?: (reducedMotion: boolean) => void;
     setResponsiveMode?: (responsiveMode: boolean) => void;

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 n,useState as t,useRef as r,useContext as o}from"react";const i=n(null),u=()=>{const e=o(i);if(null===e)throw new Error("useResponsiveVerticalMenu must be used within a ResponsiveVerticalMenuProvider");return e},s=({children:n})=>{const[o,u]=t(null),s=r(null),l=r(null),c=r(null),[d,m]=t(!1),[v,a]=t(!1);return e(i.Provider,{value:{activeMenuItem:o,buttonRef:s,containerRef:l,menuRef:c,reducedMotion:v,responsiveMode:d,setActiveMenuItem:u,setReducedMotion:a,setResponsiveMode:m},children:n})};export{i as ResponsiveVerticalMenuContext,s as ResponsiveVerticalMenuProvider,u as useResponsiveVerticalMenu};
+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};

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("./responsive-vertical-menu-item.style.js"),r=require("../__internal__/depth.context.js"),i=require("../__internal__/focus.context.js"),o=require("../responsive-vertical-menu.context.js"),s=require("../../../icon/icon.component.js"),c=require("../../../../__internal__/utils/helpers/guid/index.js");function l(e){return e&&e.__esModule?e:{default:e}}var d=l(t);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function u(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),r.forEach((function(t){a(e,t,n[t])}))}return e}function p(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t.push.apply(t,n)}return t}(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))})),e}function 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: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:_,setActiveMenuItem:C,reducedMotion:S}=o.useResponsiveVerticalMenu(),{expandItem:P,focusItem:D,getRegisteredItems:k,moveFocus:$,registerMenuItem:q}=i.useMenuFocus(),R=r.useDepth(),E=(null==M?void 0:M.id)===y,A=d.default.Children.count(l)>0,F=t.useContext(f),K=t.useMemo((()=>_&&0===R),[R,_]),[N,V]=t.useState(K&&A);t.useEffect((()=>{q(y,c,F)}),[y,F,c,q]);const L=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="${R}"]`))||[],t=Array.from(n),0===R&&A&&(null==M?void 0:M.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&&(!A||A&&!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===F)),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="${R-1}"]`))||[]);t.findIndex((e=>e.id===F))===t.length-1&&!e.shiftKey&&(e.preventDefault(),D(r.id))}}break;case"Enter":case" ":if(e.preventDefault(),K)return;if(A)if(0!==R||_)V(!N),P(y,!N);else{const e=(null==M?void 0:M.id)===y;C(e?null:{id:y,label:j,children:l})}else b&&"Enter"===e.key&&(window.location.href=b)}};return e.jsx(n.StyledResponsiveMenuListItem,{children:A?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||!!a,id:y,onClick:()=>{if(!K){if(0!==R||_)V(!N),P(y,!N);else{const e=(null==M?void 0:M.id)===y;C(e?null:{id:y,label:j,children:l})}D(y)}},onKeyDown:e=>{_||L(e)},onFocus:()=>D(y),ref:c,responsive:_,tabIndex:K?-1:0,type:"button"},g),{children:[e.jsx(h,{customIcon:a,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:!!S,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||!!a,responsive:_,children:e.jsx(n.StyledNestedMenu,{"data-component":`${y}-nested-menu`,"data-role":`${y}-nested-menu`,depth:R,hasIcon:!!m||!!a,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=>{_||L(e)},ref:c,rel:O,responsive:_,tabIndex:0,target:I},g),{children:e.jsx(h,{customIcon:a,depth:R,hasChildren:!1,icon:m,label:j,responsive:_})}))})})),y=n=>{var{children:o,id:s,label:l}=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||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},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-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);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;

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(),{activeMenuItem:_,buttonRef:M,containerRef:k,menuRef:E,responsiveMode:S,setActiveMenuItem:P,setReducedMotion:L,setResponsiveMode:R}=t.useResponsiveVerticalMenu(),[q,B]=r.useState(!1),[C,T]=r.useState(0),D=s.default(j),[I,z]=r.useState("auto"),[V,A]=r.useState("100%"),[$,F]=r.useState("auto"),G=r.useRef(null),Q=!u.default("screen and (prefers-reduced-motion: no-preference)"),{current:W}=E,{current:H}=M,J=r.useCallback((()=>{if(q&&S){const e=W||document.querySelector("[id='responsive-vertical-menu-primary']");e&&A(`${e.getBoundingClientRect().width}px`)}z(_&&W?`${W.getBoundingClientRect().right}px`:"auto"),F(_&&H?`${H.getBoundingClientRect().bottom}px`:"auto")}),[q,W,S,_,H]),K=r.useCallback((e=>{k.current&&!k.current.contains(e.target)&&B(!1)}),[k]),N=r.useCallback((()=>{B((e=>!e)),P(null)}),[P]);r.useLayoutEffect((()=>(J(),window.addEventListener("resize",J),()=>{var e;null===(e=window)||void 0===e||e.removeEventListener("resize",J)})),[q,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})=>{k.current&&(k.current.contains(e)||null===e&&r!==M.current&&setTimeout((()=>{_||U.current||B(!1)}),10))},r=e=>{"Escape"===e.key&&(e.preventDefault(),B(!1))},t=k.current;return q&&!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)}}),[q,_,M,k,K,S]),r.useEffect((()=>{null==L||L(Q),null==R||R(!D)}),[D,Q,L,R]);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),P(null))}),[C,f,Y,P]),e.jsxs("div",{ref:k,children:[e.jsx(n.StyledButton,m({active:q,"aria-controls":"responsive-vertical-menu-primary","aria-expanded":q,"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:M},l.default("responsive-vertical-menu-launcher",m({"data-role":"responsive-vertical-menu-launcher"},g)))),S?e.jsx(o.default,{open:q,children:e.jsxs(i.Box,{position:"fixed",top:0,width:V,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:()=>{B(!1),P(null)}})}),e.jsx(n.StyledResponsiveMenu,{height:b,id:"responsive-vertical-menu-primary",menu:"primary",reduceMotion:Q,ref:E,responsive:!0,tabIndex:-1,top:"48px",width:x,children:f})]})}):e.jsx(n.StyledGlobalVerticalMenuWrapper,y(m({},w,l.default("responsive-vertical-menu",w)),{children:q&&e.jsxs(e.Fragment,{children:[e.jsx(n.StyledResponsiveMenu,{childOpen:!!_,"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:E,responsive:!1,tabIndex:-1,top:$,width:x,children:f}),_?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:_.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"),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;

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

@@ -1,4 +1,4 @@
-import React, { ReactNode, RefObject } from "react";
+import React, { Dispatch, ReactNode, RefObject, SetStateAction } from "react";
 import { IconType } from "../../icon/icon-type";
 export interface ResponsiveVerticalMenuButtonItem {
     children?: ReactNode;
@@ -10,12 +10,14 @@ export interface ResponsiveVerticalMenuButtonItem {
     label?: React.ReactNode;
 }
 export interface MenuContextType {
+    active: boolean;
     activeMenuItem: ResponsiveVerticalMenuButtonItem | null;
     buttonRef: RefObject<HTMLButtonElement>;
     containerRef: RefObject<HTMLDivElement>;
     menuRef: RefObject<HTMLUListElement>;
     reducedMotion?: boolean;
     responsiveMode?: boolean;
+    setActive: Dispatch<SetStateAction<boolean>>;
     setActiveMenuItem: (item: ResponsiveVerticalMenuButtonItem | null) => void;
     setReducedMotion?: (reducedMotion: boolean) => void;
     setResponsiveMode?: (responsiveMode: boolean) => void;

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 n=t.createContext(null);exports.ResponsiveVerticalMenuContext=n,exports.ResponsiveVerticalMenuProvider=({children:s})=>{const[r,u]=t.useState(null),i=t.useRef(null),o=t.useRef(null),l=t.useRef(null),[c,a]=t.useState(!1),[v,R]=t.useState(!1);return e.jsx(n.Provider,{value:{activeMenuItem:r,buttonRef:i,containerRef:o,menuRef:l,reducedMotion:v,responsiveMode:c,setActiveMenuItem:u,setReducedMotion:R,setResponsiveMode:a},children:s})},exports.useResponsiveVerticalMenu=()=>{const e=t.useContext(n);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");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};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "155.4.1",
+  "version": "155.5.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",
@@ -145,7 +145,7 @@
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-ssr-friendly": "^1.3.0",
-    "eslint-plugin-testing-library": "^6.2.2",
+    "eslint-plugin-testing-library": "^7.6.0",
     "events": "~1.1.1",
     "fast-glob": "^3.3.2",
     "file-loader": "^6.2.0",