carbon-react 157.1.0 → 157.1.1

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

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

package/package.json

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