carbon-react 155.0.3 → 155.1.0

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

@@ -9,6 +9,8 @@ export interface ResponsiveVerticalMenuProps extends TagProps {
     responsiveBreakpoint?: number;
     /** The width of the primary and secondary menus when in default mode */
     width?: string;
+    /** Set Menu launcher button data tag props */
+    launcherButtonDataProps?: TagProps;
 }
 export declare const ResponsiveVerticalMenu: ({ children, ...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:M=700,width:P}=w,C=k(w,["children","height","responsiveBreakpoint","width"]);const T=O(),{activeMenuItem:B,buttonRef:I,containerRef:R,menuRef:S,responsiveMode:z,setActiveMenuItem:D,setReducedMotion:A,setResponsiveMode:$}=a(),[q,Q]=o(!1),[V,G]=o(0),F=h(M),[H,J]=o("auto"),[K,N]=o("100%"),[U,W]=o("auto"),X=i(null),Y=!y("screen and (prefers-reduced-motion: no-preference)"),{current:Z}=S,{current:ee}=I,re=c((()=>{if(q&&z){const e=Z||document.querySelector("[id='responsive-vertical-menu-primary']");e&&N(`${e.getBoundingClientRect().width}px`)}J(B&&Z?`${Z.getBoundingClientRect().right}px`:"auto"),W(B&&ee?`${ee.getBoundingClientRect().bottom}px`:"auto")}),[q,Z,z,B,ee]),ne=c((e=>{R.current&&!R.current.contains(e.target)&&Q(!1)}),[R]),te=c((()=>{Q((e=>!e)),D(null)}),[D]);s((()=>(re(),window.addEventListener("resize",re),()=>{var e;null===(e=window)||void 0===e||e.removeEventListener("resize",re)})),[q,re,Z,z]);const oe=i(!1),ie=i(null);l((()=>{const e=()=>{oe.current=!0,null!==ie.current&&clearTimeout(ie.current),ie.current=window.setTimeout((()=>{oe.current=!1}),100)};return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e),null!==ie.current&&clearTimeout(ie.current)}}),[]),l((()=>{const e=({relatedTarget:e,target:r})=>{R.current&&(R.current.contains(e)||null===e&&r!==I.current&&setTimeout((()=>{B||oe.current||Q(!1)}),10))},r=e=>{"Escape"===e.key&&(e.preventDefault(),Q(!1))},n=R.current;return q&&!z&&(document.addEventListener("keydown",r),window.addEventListener("click",ne),null==n||n.addEventListener("focusout",e)),()=>{document.removeEventListener("keydown",r),window.removeEventListener("click",ne),null==n||n.removeEventListener("focusout",e)}}),[q,B,I,R,ne,z]),l((()=>{null==A||A(Y),null==$||$(!F)}),[F,Y,A,$]);const ce=c((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 l((()=>{const e=V,r=ce(E);e!==r&&(G(r),D(null))}),[V,E,ce,D]),r("div",{ref:R,children:[e(u,{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","data-component":"responsive-vertical-menu-launcher","data-role":"responsive-vertical-menu-launcher",iconType:"squares_nine",id:"responsive-vertical-menu-launcher",onClick:te,ref:I}),z?e(f,{open:q,children:r(v,{position:"fixed",top:0,width:K,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:()=>{Q(!1),D(null)}})}),e(p,{height:L,id:"responsive-vertical-menu-primary",menu:"primary",reduceMotion:Y,ref:S,responsive:!0,tabIndex:-1,top:"48px",width:P,children:E})]})}):e(m,_(x({},C,b("responsive-vertical-menu",C)),{children:q&&r(n,{children:[e(p,{childOpen:!!B,"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:S,responsive:!1,tabIndex:-1,top:U,width:P,children:E}),B?e(p,{"data-component":"responsive-vertical-menu-secondary","data-role":"responsive-vertical-menu-secondary",height:L||"100%",id:"responsive-vertical-menu-secondary",left:H,menu:"secondary",reduceMotion:Y,ref:X,responsive:!1,tabIndex:-1,top:U,width:P,children:B.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(),{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};

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

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

package/package.json

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