carbon-react 158.9.0 → 158.10.0

package/esm/__internal__/modal/modal.component.js

@@ -1 +1 @@
-import{jsx as e,jsxs as o}from"react/jsx-runtime";import{useRef as r,useState as t,useEffect as n,useCallback as l}from"react";import{TransitionGroup as a,CSSTransition as i}from"react-transition-group";import c from"../../hooks/__internal__/useScrollBlock/useScrollBlock.js";import{Portal as s}from"../../components/portal/portal.js";import{getDocument as d}from"../dom/globals.js";import m from"../utils/helpers/events/events.js";import p from"../../hooks/__internal__/useModalManager/useModalManager.js";import{StyledModal as u,StyledModalBackground as f}from"./modal.style.js";import b from"./modal.context.js";function O(e,o,r){return o in e?Object.defineProperty(e,o,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[o]=r,e}function g(e){for(var o=1;o<arguments.length;o++){var r=null!=arguments[o]?arguments[o]:{},t=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(t=t.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),t.forEach((function(o){O(e,o,r[o])}))}return e}const y=300,j=O=>{var{children:j,"data-element":v,"data-role":h="modal",open:P,onCancel:k,disableEscKey:w=!1,disableClose:E,enableBackgroundUI:M=!1,topModalOverride:S,restoreFocusOnClose:C=!0}=O,_=function(e,o){if(null==e)return{};var r,t,n=function(e,o){if(null==e)return{};var r,t,n={},l=Object.keys(e);for(t=0;t<l.length;t++)r=l[t],o.indexOf(r)>=0||(n[r]=e[r]);return n}(e,o);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(t=0;t<l.length;t++)r=l[t],o.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}(O,["children","data-element","data-role","open","onCancel","disableEscKey","disableClose","enableBackgroundUI","topModalOverride","restoreFocusOnClose"]);const x=r(null),I=r(null),R=r(null),[B,D]=t(!1),[F,N]=t(!1),{blockScroll:T,allowScroll:K}=c();n((()=>{M||(P?T():K())}),[K,T,M,P]),n((()=>()=>{M||K()}),[K,M]);const A=l((e=>{k&&!E&&!w&&m.isEscKey(e)&&(e.stopImmediatePropagation(),k(e))}),[E,w,k]),U=d();let q,z;return p({open:P,closeModal:A,modalRef:x,setTriggerRefocusFlag:N,topModalOverride:S,focusCallToActionElement:C&&U?U.activeElement:void 0}),P&&(q=M?null:e(f,{ref:I,"data-element":"modal-background","data-role":"modal-background",transitionName:"modal-background",transitionTime:y}),z=j),e(s,{children:o(u,(G=g({"data-component":"modal","data-element":v,"data-role":h,"data-state":P?"open":"closed",transitionName:"modal",transitionTime:y,topModalOverride:S,ref:x},_),H={children:[e(a,{children:q&&e(i,{nodeRef:I,appear:!0,classNames:"modal-background",timeout:y,onEntered:()=>D(!0),onExiting:()=>D(!1),children:q},"modal")}),e(a,{children:z&&e(i,{nodeRef:R,appear:!0,classNames:"modal",timeout:y,children:e(b.Provider,{value:{isAnimationComplete:B,triggerRefocusFlag:F,isInModal:!0},children:e("div",{ref:R,children:z})})})})]},H=null!=H?H:{},Object.getOwnPropertyDescriptors?Object.defineProperties(G,Object.getOwnPropertyDescriptors(H)):function(e){var o=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);o.push.apply(o,r)}return o}(Object(H)).forEach((function(e){Object.defineProperty(G,e,Object.getOwnPropertyDescriptor(H,e))})),G))});var G,H};export{j as default};
+import{jsx as e,jsxs as o}from"react/jsx-runtime";import{useRef as r,useState as t,useEffect as n,useCallback as l}from"react";import{TransitionGroup as a,CSSTransition as i}from"react-transition-group";import c from"../../hooks/__internal__/useScrollBlock/useScrollBlock.js";import{Portal as s}from"../../components/portal/portal.js";import{getDocument as d}from"../dom/globals.js";import m from"../utils/helpers/events/events.js";import p from"../../hooks/__internal__/useModalManager/useModalManager.js";import{StyledModal as u,StyledModalBackground as f}from"./modal.style.js";import b from"./modal.context.js";function O(e,o,r){return o in e?Object.defineProperty(e,o,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[o]=r,e}function g(e){for(var o=1;o<arguments.length;o++){var r=null!=arguments[o]?arguments[o]:{},t=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(t=t.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),t.forEach((function(o){O(e,o,r[o])}))}return e}const y=300,j=O=>{var{children:j,"data-element":v,"data-role":h="modal",open:P,onCancel:k,disableEscKey:w=!1,disableClose:E,enableBackgroundUI:M=!1,topModalOverride:S,restoreFocusOnClose:C=!0}=O,_=function(e,o){if(null==e)return{};var r,t,n=function(e,o){if(null==e)return{};var r,t,n={},l=Object.keys(e);for(t=0;t<l.length;t++)r=l[t],o.indexOf(r)>=0||(n[r]=e[r]);return n}(e,o);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(t=0;t<l.length;t++)r=l[t],o.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}(O,["children","data-element","data-role","open","onCancel","disableEscKey","disableClose","enableBackgroundUI","topModalOverride","restoreFocusOnClose"]);const x=r(null),I=r(null),R=r(null),[B,D]=t(!1),[F,N]=t(!1),{blockScroll:T,allowScroll:K}=c();n((()=>{M||(P?T():K())}),[K,T,M,P]),n((()=>()=>{M||K()}),[K,M]);const A=l((e=>{k&&!E&&!w&&m.isEscKey(e)&&(e.stopImmediatePropagation(),k(e))}),[E,w,k]),U=d();let q,z;return p({open:P,closeModal:A,modalRef:x,setTriggerRefocusFlag:N,topModalOverride:S,focusCallToActionElement:C&&U?U.activeElement:void 0}),P&&(q=M?null:e(f,{ref:I,"data-element":"modal-background","data-role":"modal-background",transitionName:"modal-background",transitionTime:y}),z=j),e(s,{children:o(u,(G=g({"data-component":"modal","data-element":v,"data-role":h,"data-state":P&&B?"open":"closed",transitionName:"modal",transitionTime:y,topModalOverride:S,ref:x},_),H={children:[e(a,{children:q&&e(i,{nodeRef:I,appear:!0,classNames:"modal-background",timeout:y,onEntered:()=>D(!0),onExiting:()=>D(!1),children:q},"modal")}),e(a,{children:z&&e(i,{nodeRef:R,appear:!0,classNames:"modal",timeout:y,children:e(b.Provider,{value:{isAnimationComplete:B,triggerRefocusFlag:F,isInModal:!0},children:e("div",{ref:R,children:z})})})})]},H=null!=H?H:{},Object.getOwnPropertyDescriptors?Object.defineProperties(G,Object.getOwnPropertyDescriptors(H)):function(e){var o=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);o.push.apply(o,r)}return o}(Object(H)).forEach((function(e){Object.defineProperty(G,e,Object.getOwnPropertyDescriptor(H,e))})),G))});var G,H};export{j 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,{forwardRef as i,useState as o,useRef as l,useImperativeHandle as c,useCallback as a,useLayoutEffect as s,useEffect as u}from"react";import{DepthProvider as p}from"./__internal__/depth.context.js";import{MenuFocusProvider as d}from"./__internal__/focus.context.js";import{ResponsiveVerticalMenuProvider as v,useResponsiveVerticalMenu as m}from"./responsive-vertical-menu.context.js";import{StyledButton as h,ModalContainer as f,StyledCloseButton as b,StyledResponsiveMenu as y,StyledGlobalVerticalMenuWrapper as w}from"./responsive-vertical-menu.style.js";import{Box as g}from"../../box/box.component.js";import _ from"../../../__internal__/modal/modal.component.js";import j from"../../../hooks/__internal__/useIsAboveBreakpoint/useIsAboveBreakpoint.js";import O from"../../../hooks/useMediaQuery/useMediaQuery.js";import x from"../../../hooks/__internal__/useLocale/useLocale.js";import L from"../../../__internal__/focus-trap/focus-trap.component.js";import k from"../../../__internal__/utils/helpers/tags/tags.js";import E from"../../../__internal__/utils/helpers/events/events.js";function M(e,r,n){return r in e?Object.defineProperty(e,r,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[r]=n,e}function P(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){M(e,r,n[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 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 T(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 C=i(((i,p)=>{var d,{children:v,height:M,responsiveBreakpoint:C=700,width:R,launcherButtonDataProps:S}=i,I=T(i,["children","height","responsiveBreakpoint","width","launcherButtonDataProps"]);const D=x(),{active:z,activeMenuItem:A,buttonRef:$,containerRef:q,menuRef:Q,responsiveMode:V,top:G,setActive:F,setActiveMenuItem:H,setReducedMotion:J,setResponsiveMode:K,setLeft:N,setTop:U}=m(),[W,X]=o(0),Y=j(C),[Z,ee]=o("100%"),re=!O("screen and (prefers-reduced-motion: no-preference)"),ne=l(null),{current:te}=Q,{current:ie}=$;c(p,(()=>({focusLaunchButton(){null==ie||ie.focus({preventScroll:!0})}})),[ie]);const oe=a((()=>{if(z&&V){const e=te||document.querySelector("[id='responsive-vertical-menu-primary']");e&&ee(`${e.getBoundingClientRect().width}px`)}N(A&&te?`${te.getBoundingClientRect().right}px`:"auto"),U(A&&ie?`${ie.getBoundingClientRect().bottom}px`:"auto")}),[z,te,V,A,ie]),le=a((e=>{q.current&&!q.current.contains(e.target)&&F(!1)}),[q]),ce=a((()=>{F((e=>!e)),H(null)}),[z,F,H]);s((()=>(oe(),window.addEventListener("resize",oe),()=>{var e;null===(e=window)||void 0===e||e.removeEventListener("resize",oe)})),[z,oe,te,V]);const ae=l(!1),se=l(null);u((()=>{const e=()=>{ae.current=!0,null!==se.current&&clearTimeout(se.current),se.current=window.setTimeout((()=>{ae.current=!1}),100)};return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e),null!==se.current&&clearTimeout(se.current)}}),[]),u((()=>{let e=null;const r=r=>{q.current&&(E.composedPath(r).includes($.current)||(e&&(clearTimeout(e),e=null),e=setTimeout((()=>{var e;(null===(e=q.current)||void 0===e?void 0:e.contains(document.activeElement))||F(!1)}),0)))},n=e=>{"Escape"===e.key&&(e.preventDefault(),F(!1))},t=q.current;return z&&!V&&(document.addEventListener("keydown",n),window.addEventListener("click",le),null==t||t.addEventListener("focusout",r)),()=>{document.removeEventListener("keydown",n),window.removeEventListener("click",le),null==t||t.removeEventListener("focusout",r),e&&clearTimeout(e),e=null}}),[z,A,$,q,le,V]),u((()=>{null==J||J(re),null==K||K(!Y)}),[Y,re,J,K]);const ue=a((e=>{if(!e)return 0;if(t.isValidElement(e))return 1+ue(e.props.children);const r=t.Children.toArray(e);return r.length?r.reduce(((e,r)=>t.isValidElement(r)?e+1+ue(r.props.children):e),0):0}),[]);return u((()=>{const e=W,r=ue(v);e!==r&&(X(r),H(null))}),[W,v,ue,H]),r("div",{ref:q,children:[e(h,P({active:z,buttonType:"tertiary",iconType:"squares_nine",id:"responsive-vertical-menu-launcher",onClick:ce,ref:$},k("responsive-vertical-menu-launcher",P({"data-role":"responsive-vertical-menu-launcher"},S)),(()=>{var e,r;return V?{"aria-label":null===(r=D.verticalMenu.ariaLabels)||void 0===r?void 0:r.responsiveMenuLauncher()}:{"aria-expanded":z,"aria-controls":"responsive-vertical-menu-primary","aria-label":null===(e=D.verticalMenu.ariaLabels)||void 0===e?void 0:e.responsiveMenuLauncher()}})())),V?e(_,{open:z,children:e(L,{wrapperRef:ne,isOpen:z,children:r(f,B(P({ref:ne,width:Z,tabIndex:-1,id:"responsive-vertical-menu-dialog"},(()=>{var e;return{role:"dialog","aria-modal":!0,"aria-label":null===(e=D.verticalMenu.ariaLabels)||void 0===e?void 0:e.responsiveMenuAria()}})()),{children:[e(g,{boxSizing:"border-box",display:"flex",justifyContent:"flex-end",width:"100%",backgroundColor:"var(--colorsGray850)",p:1,children:e(b,{"aria-label":null===(d=D.verticalMenu.ariaLabels)||void 0===d?void 0:d.responsiveMenuCloseButton(),"data-component":"responsive-vertical-menu-close","data-role":"responsive-vertical-menu-close",iconType:"close",size:"small",buttonType:"tertiary",onClick:()=>{F(!1),H(null)}})}),e(y,{height:M,id:"responsive-vertical-menu-primary",menu:"primary",reduceMotion:re,ref:Q,responsive:!0,tabIndex:-1,top:"48px",width:R,children:v})]}))})}):e(w,B(P({},I,k("responsive-vertical-menu",I)),{children:z&&e(n,{children:e(y,{childOpen:!!A,"data-component":"responsive-vertical-menu-primary","data-role":"responsive-vertical-menu-primary",height:M||"100%",id:"responsive-vertical-menu-primary",menu:"primary",reduceMotion:re,ref:Q,responsive:!1,tabIndex:-1,top:G,width:R,children:v})})}))]})})),R=i(((r,n)=>{var{children:t,width:i,height:o}=r,l=T(r,["children","width","height"]);return e(p,{children:e(d,{children:e(v,{width:i,height:o,children:e(C,B(P({ref:n,width:i,height:o},l),{children:t}))})})})}));export{R as ResponsiveVerticalMenu,R as default};
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import n,{forwardRef as t,useState as o,useRef as i,useImperativeHandle as a,useCallback as l,useLayoutEffect as s,useEffect as c}from"react";import{DepthProvider as u}from"./__internal__/depth.context.js";import{MenuFocusProvider as p}from"./__internal__/focus.context.js";import{ResponsiveVerticalMenuProvider as d,useResponsiveVerticalMenu as v}from"./responsive-vertical-menu.context.js";import{StyledBackdrop as m,StyledButton as f,ModalContainer as h,StyledCloseButton as b,StyledResponsiveMenu as y,StyledGlobalVerticalMenuWrapper as g}from"./responsive-vertical-menu.style.js";import{Box as O}from"../../box/box.component.js";import j from"../../../__internal__/modal/modal.component.js";import w from"../../../hooks/__internal__/useIsAboveBreakpoint/useIsAboveBreakpoint.js";import _ from"../../../hooks/useMediaQuery/useMediaQuery.js";import x from"../../../hooks/__internal__/useLocale/useLocale.js";import M from"../../../__internal__/focus-trap/focus-trap.component.js";import k 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 P(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 E(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 B(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 C=t(((t,u)=>{var p,{children:d,height:L,responsiveBreakpoint:C=700,width:D,launcherButtonDataProps:R}=t,S=B(t,["children","height","responsiveBreakpoint","width","launcherButtonDataProps"]);const I=x(),{active:A,activeMenuItem:T,buttonRef:z,containerRef:$,menuRef:q,responsiveMode:Q,setActive:V,setActiveMenuItem:G,setReducedMotion:F,setResponsiveMode:H,setLeft:J,setTop:K}=v(),[N,U]=o(0),W=w(C),[X,Y]=o("100%"),Z=!_("screen and (prefers-reduced-motion: no-preference)"),ee=i(null),{current:re}=q,{current:ne}=z;a(u,(()=>({focusLaunchButton(){null==ne||ne.focus({preventScroll:!0})}})),[ne]);const te=l((()=>{if(A&&Q){const e=re||document.querySelector("[id='responsive-vertical-menu-primary']");e&&Y(`${e.getBoundingClientRect().width}px`)}J(T&&re?`${re.getBoundingClientRect().right}px`:"auto"),K(T&&ne?`${ne.getBoundingClientRect().bottom}px`:"auto")}),[A,Q,T,re,ne,J,K]);s((()=>(te(),window.addEventListener("resize",te),()=>{var e;null===(e=window)||void 0===e||e.removeEventListener("resize",te)})),[A,te,re,Q]),c((()=>{const e=$.current,r=r=>{!A||Q||(null==e?void 0:e.contains(r.relatedTarget))||V(!1)},n=e=>{A&&!Q&&"Escape"===e.key&&(e.preventDefault(),V(!1))};return null==e||e.addEventListener("focusout",r),document.addEventListener("keydown",n),()=>{null==e||e.removeEventListener("focusout",r),document.removeEventListener("keydown",n)}}),[A,$,Q,V]),c((()=>{null==F||F(Z),null==H||H(!W)}),[W,Z,F,H]);const oe=l((e=>{if(!e)return 0;if(n.isValidElement(e))return 1+oe(e.props.children);const r=n.Children.toArray(e);return r.length?r.reduce(((e,r)=>n.isValidElement(r)?e+1+oe(r.props.children):e),0):0}),[]);return c((()=>{const e=N,r=oe(d);e!==r&&(U(r),G(null))}),[N,d,oe,G]),r("div",{ref:$,children:[A&&!Q&&e(m,{onMouseDown:e=>{e.preventDefault(),V(!1)}}),e(f,P({active:A,buttonType:"tertiary",iconType:"squares_nine",id:"responsive-vertical-menu-launcher",onClick:()=>{V((e=>!e)),G(null)},ref:z},k("responsive-vertical-menu-launcher",P({"data-role":"responsive-vertical-menu-launcher"},R)),(()=>{var e,r;return Q?{"aria-label":null===(r=I.verticalMenu.ariaLabels)||void 0===r?void 0:r.responsiveMenuLauncher()}:{"aria-expanded":A,"aria-controls":"responsive-vertical-menu-primary","aria-label":null===(e=I.verticalMenu.ariaLabels)||void 0===e?void 0:e.responsiveMenuLauncher()}})())),Q&&e(j,{open:A,children:e(M,{wrapperRef:ee,isOpen:A,children:r(h,E(P({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(O,{boxSizing:"border-box",display:"flex",justifyContent:"flex-end",width:"100%",backgroundColor:"var(--colorsGray850)",p:1,children:e(b,{"aria-label":null===(p=I.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:()=>{V(!1),G(null)}})}),e(y,{height:L,id:"responsive-vertical-menu-primary",menu:"primary",reduceMotion:Z,ref:q,responsive:!0,tabIndex:-1,top:"48px",width:D,children:d})]}))})}),A&&!Q&&e(g,E(P({},S,k("responsive-vertical-menu",S)),{children:e(y,{childOpen:!!T,"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:q,responsive:!1,tabIndex:-1,width:D,children:d})}))]})})),D=t(((r,n)=>{var{children:t,width:o,height:i}=r,a=B(r,["children","width","height"]);return e(u,{children:e(p,{children:e(d,{width:o,height:i,children:e(C,E(P({ref:n,width:o,height:i},a),{children:t}))})})})}));export{D as ResponsiveVerticalMenu,D as default};

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

@@ -12,6 +12,7 @@ interface StyledResponsiveMenuProps {
 interface StyledButtonProps {
     active?: boolean;
 }
+export declare const StyledBackdrop: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ModalContainer: import("styled-components").StyledComponent<"div", any, {
     width: string;
 }, never>;

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

@@ -1 +1 @@
-import o,{css as i}from"styled-components";import t from"../../button/button.component.js";import e from"../../../style/utils/add-focus-styling.js";const n=o.div.withConfig({displayName:"responsive-vertical-menu.style__ModalContainer",componentId:"sc-54b8b588-0"})(["position:fixed;top:0;",""],(({width:o})=>i(["width:",";"],o))),a=o(t).withConfig({displayName:"responsive-vertical-menu.style__StyledButton",componentId:"sc-54b8b588-1"})(["border-radius:0;background-color:var( ",' );[data-component="icon"]{color:var(--colorsUtilityYang100);}&:focus{appearance:none;-webkit-appearance:none;-webkit-box-shadow:',";box-shadow:",";border:1px solid black;outline:transparent 3px solid;}"],(({active:o})=>o?"--colorsActionMinorGray700":"--colorsUtilityYin100"),e(!0),e(!0)),r=o(t).withConfig({displayName:"responsive-vertical-menu.style__StyledCloseButton",componentId:"sc-54b8b588-2"})(['border-radius:0;[data-component="icon"]{color:var(--colorsUtilityYang100);}']),s=o.div.withConfig({displayName:"responsive-vertical-menu.style__StyledGlobalVerticalMenuWrapper",componentId:"sc-54b8b588-3"})(["background-color:black;color:white;display:flex;flex-direction:row;position:absolute;width:fit-content;"]),l=o.ul.withConfig({displayName:"responsive-vertical-menu.style__StyledResponsiveMenu",componentId:"sc-54b8b588-4"})(["margin:0;padding:0;align-items:stretch;background-color:var(--colorsUtilityYin100);box-sizing:border-box;display:flex;flex-direction:column;height:",";justify-content:flex-start;overflow-y:auto;padding-bottom:var(--spacing100);",";padding-top:var(--spacing100);position:fixed;width:",";max-width:375px;z-index:1000;border-right:",";"," "," ",""],(({height:o})=>o||"100%"),(({responsive:o})=>!o&&i(["padding-left:var(--spacing200);padding-right:var(--spacing200);"])),(({width:o})=>o||"100%"),(({childOpen:o,menu:i})=>"secondary"===i||!o&&"primary"===i?"2px solid var(--colorsGray850)":"1px solid var(--colorsGray850)"),(({top:o})=>i(["top:",";max-height:calc(100% - ",");"],o,"auto"===o?"40px":o)),(({childOpen:o})=>o&&i(["padding-right:calc(var(--spacing200) + 1px);"])),(({height:o,left:t,menu:e})=>"secondary"===e&&i(["left:",";height:",";"],t,o)));export{n as ModalContainer,a as StyledButton,r as StyledCloseButton,s as StyledGlobalVerticalMenuWrapper,l as StyledResponsiveMenu};
+import o,{css as i}from"styled-components";import e from"../../button/button.component.js";import t from"../../../style/utils/add-focus-styling.js";const n=o.div.withConfig({displayName:"responsive-vertical-menu.style__StyledBackdrop",componentId:"sc-fef5633f-0"})(["position:fixed;inset:0;"]),a=o.div.withConfig({displayName:"responsive-vertical-menu.style__ModalContainer",componentId:"sc-fef5633f-1"})(["position:fixed;top:0;",""],(({width:o})=>i(["width:",";"],o))),r=o(e).withConfig({displayName:"responsive-vertical-menu.style__StyledButton",componentId:"sc-fef5633f-2"})(["border-radius:0;background-color:var( ",' );[data-component="icon"]{color:var(--colorsUtilityYang100);}&:focus{appearance:none;-webkit-appearance:none;-webkit-box-shadow:',";box-shadow:",";border:1px solid black;outline:transparent 3px solid;}"],(({active:o})=>o?"--colorsActionMinorGray700":"--colorsUtilityYin100"),t(!0),t(!0)),s=o(e).withConfig({displayName:"responsive-vertical-menu.style__StyledCloseButton",componentId:"sc-fef5633f-3"})(['border-radius:0;[data-component="icon"]{color:var(--colorsUtilityYang100);}']),l=o.div.withConfig({displayName:"responsive-vertical-menu.style__StyledGlobalVerticalMenuWrapper",componentId:"sc-fef5633f-4"})(["background-color:black;color:white;display:flex;flex-direction:row;position:absolute;width:fit-content;"]),d=o.ul.withConfig({displayName:"responsive-vertical-menu.style__StyledResponsiveMenu",componentId:"sc-fef5633f-5"})(["margin:0;padding:0;align-items:stretch;background-color:var(--colorsUtilityYin100);box-sizing:border-box;display:flex;flex-direction:column;height:",";justify-content:flex-start;overflow-y:auto;padding-bottom:var(--spacing100);",";padding-top:var(--spacing100);position:fixed;width:",";max-width:375px;z-index:1000;border-right:",";"," "," ",""],(({height:o})=>o||"100%"),(({responsive:o})=>!o&&i(["padding-left:var(--spacing200);padding-right:var(--spacing200);"])),(({width:o})=>o||"100%"),(({childOpen:o,menu:i})=>"secondary"===i||!o&&"primary"===i?"2px solid var(--colorsGray850)":"1px solid var(--colorsGray850)"),(({top:o})=>i(["top:",";max-height:calc(100% - ",");"],o,"auto"===o?"40px":o)),(({childOpen:o})=>o&&i(["padding-right:calc(var(--spacing200) + 1px);"])),(({height:o,left:e,menu:t})=>"secondary"===t&&i(["left:",";height:",";"],e,o)));export{a as ModalContainer,n as StyledBackdrop,r as StyledButton,s as StyledCloseButton,l as StyledGlobalVerticalMenuWrapper,d as StyledResponsiveMenu};

package/lib/__internal__/modal/modal.component.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("react-transition-group"),o=require("../../hooks/__internal__/useScrollBlock/useScrollBlock.js"),n=require("../../components/portal/portal.js"),l=require("../dom/globals.js"),a=require("../utils/helpers/events/events.js"),s=require("../../hooks/__internal__/useModalManager/useModalManager.js"),i=require("./modal.style.js"),c=require("./modal.context.js");function u(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function d(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},o=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),o.forEach((function(r){u(e,r,t[r])}))}return e}const p=300;exports.default=u=>{var{children:f,"data-element":m,"data-role":b="modal",open:O,onCancel:j,disableEscKey:g=!1,disableClose:y,enableBackgroundUI:v=!1,topModalOverride:h,restoreFocusOnClose:S=!0}=u,P=function(e,r){if(null==e)return{};var t,o,n=function(e,r){if(null==e)return{};var t,o,n={},l=Object.keys(e);for(o=0;o<l.length;o++)t=l[o],r.indexOf(t)>=0||(n[t]=e[t]);return n}(e,r);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(o=0;o<l.length;o++)t=l[o],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(n[t]=e[t])}return n}(u,["children","data-element","data-role","open","onCancel","disableEscKey","disableClose","enableBackgroundUI","topModalOverride","restoreFocusOnClose"]);const k=r.useRef(null),x=r.useRef(null),M=r.useRef(null),[w,E]=r.useState(!1),[C,q]=r.useState(!1),{blockScroll:_,allowScroll:R}=o.default();r.useEffect((()=>{v||(O?_():R())}),[R,_,v,O]),r.useEffect((()=>()=>{v||R()}),[R,v]);const T=r.useCallback((e=>{j&&!y&&!g&&a.default.isEscKey(e)&&(e.stopImmediatePropagation(),j(e))}),[y,g,j]),B=l.getDocument();let D,I;return s.default({open:O,closeModal:T,modalRef:k,setTriggerRefocusFlag:q,topModalOverride:h,focusCallToActionElement:S&&B?B.activeElement:void 0}),O&&(D=v?null:e.jsx(i.StyledModalBackground,{ref:x,"data-element":"modal-background","data-role":"modal-background",transitionName:"modal-background",transitionTime:p}),I=f),e.jsx(n.Portal,{children:e.jsxs(i.StyledModal,(F=d({"data-component":"modal","data-element":m,"data-role":b,"data-state":O?"open":"closed",transitionName:"modal",transitionTime:p,topModalOverride:h,ref:k},P),N={children:[e.jsx(t.TransitionGroup,{children:D&&e.jsx(t.CSSTransition,{nodeRef:x,appear:!0,classNames:"modal-background",timeout:p,onEntered:()=>E(!0),onExiting:()=>E(!1),children:D},"modal")}),e.jsx(t.TransitionGroup,{children:I&&e.jsx(t.CSSTransition,{nodeRef:M,appear:!0,classNames:"modal",timeout:p,children:e.jsx(c.default.Provider,{value:{isAnimationComplete:w,triggerRefocusFlag:C,isInModal:!0},children:e.jsx("div",{ref:M,children:I})})})})]},N=null!=N?N:{},Object.getOwnPropertyDescriptors?Object.defineProperties(F,Object.getOwnPropertyDescriptors(N)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(N)).forEach((function(e){Object.defineProperty(F,e,Object.getOwnPropertyDescriptor(N,e))})),F))});var F,N};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("react-transition-group"),o=require("../../hooks/__internal__/useScrollBlock/useScrollBlock.js"),n=require("../../components/portal/portal.js"),l=require("../dom/globals.js"),a=require("../utils/helpers/events/events.js"),s=require("../../hooks/__internal__/useModalManager/useModalManager.js"),i=require("./modal.style.js"),c=require("./modal.context.js");function u(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function d(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},o=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),o.forEach((function(r){u(e,r,t[r])}))}return e}const p=300;exports.default=u=>{var{children:f,"data-element":m,"data-role":b="modal",open:O,onCancel:j,disableEscKey:g=!1,disableClose:y,enableBackgroundUI:v=!1,topModalOverride:h,restoreFocusOnClose:S=!0}=u,P=function(e,r){if(null==e)return{};var t,o,n=function(e,r){if(null==e)return{};var t,o,n={},l=Object.keys(e);for(o=0;o<l.length;o++)t=l[o],r.indexOf(t)>=0||(n[t]=e[t]);return n}(e,r);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(o=0;o<l.length;o++)t=l[o],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(n[t]=e[t])}return n}(u,["children","data-element","data-role","open","onCancel","disableEscKey","disableClose","enableBackgroundUI","topModalOverride","restoreFocusOnClose"]);const k=r.useRef(null),x=r.useRef(null),M=r.useRef(null),[w,E]=r.useState(!1),[C,q]=r.useState(!1),{blockScroll:_,allowScroll:R}=o.default();r.useEffect((()=>{v||(O?_():R())}),[R,_,v,O]),r.useEffect((()=>()=>{v||R()}),[R,v]);const T=r.useCallback((e=>{j&&!y&&!g&&a.default.isEscKey(e)&&(e.stopImmediatePropagation(),j(e))}),[y,g,j]),B=l.getDocument();let D,I;return s.default({open:O,closeModal:T,modalRef:k,setTriggerRefocusFlag:q,topModalOverride:h,focusCallToActionElement:S&&B?B.activeElement:void 0}),O&&(D=v?null:e.jsx(i.StyledModalBackground,{ref:x,"data-element":"modal-background","data-role":"modal-background",transitionName:"modal-background",transitionTime:p}),I=f),e.jsx(n.Portal,{children:e.jsxs(i.StyledModal,(F=d({"data-component":"modal","data-element":m,"data-role":b,"data-state":O&&w?"open":"closed",transitionName:"modal",transitionTime:p,topModalOverride:h,ref:k},P),N={children:[e.jsx(t.TransitionGroup,{children:D&&e.jsx(t.CSSTransition,{nodeRef:x,appear:!0,classNames:"modal-background",timeout:p,onEntered:()=>E(!0),onExiting:()=>E(!1),children:D},"modal")}),e.jsx(t.TransitionGroup,{children:I&&e.jsx(t.CSSTransition,{nodeRef:M,appear:!0,classNames:"modal",timeout:p,children:e.jsx(c.default.Provider,{value:{isAnimationComplete:w,triggerRefocusFlag:C,isInModal:!0},children:e.jsx("div",{ref:M,children:I})})})})]},N=null!=N?N:{},Object.getOwnPropertyDescriptors?Object.defineProperties(F,Object.getOwnPropertyDescriptors(N)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(N)).forEach((function(e){Object.defineProperty(F,e,Object.getOwnPropertyDescriptor(N,e))})),F))});var F,N};

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

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

@@ -12,6 +12,7 @@ interface StyledResponsiveMenuProps {
 interface StyledButtonProps {
     active?: boolean;
 }
+export declare const StyledBackdrop: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ModalContainer: import("styled-components").StyledComponent<"div", any, {
     width: string;
 }, never>;

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

@@ -1 +1 @@
-"use strict";var e=require("styled-components"),t=require("../../button/button.component.js"),o=require("../../../style/utils/add-focus-styling.js");function i(e){return e&&e.__esModule?e:{default:e}}var n=i(e);const a=n.default.div.withConfig({displayName:"responsive-vertical-menu.style__ModalContainer",componentId:"sc-54b8b588-0"})(["position:fixed;top:0;",""],(({width:t})=>e.css(["width:",";"],t))),r=n.default(t.default).withConfig({displayName:"responsive-vertical-menu.style__StyledButton",componentId:"sc-54b8b588-1"})(["border-radius:0;background-color:var( ",' );[data-component="icon"]{color:var(--colorsUtilityYang100);}&:focus{appearance:none;-webkit-appearance:none;-webkit-box-shadow:',";box-shadow:",";border:1px solid black;outline:transparent 3px solid;}"],(({active:e})=>e?"--colorsActionMinorGray700":"--colorsUtilityYin100"),o.default(!0),o.default(!0)),s=n.default(t.default).withConfig({displayName:"responsive-vertical-menu.style__StyledCloseButton",componentId:"sc-54b8b588-2"})(['border-radius:0;[data-component="icon"]{color:var(--colorsUtilityYang100);}']),l=n.default.div.withConfig({displayName:"responsive-vertical-menu.style__StyledGlobalVerticalMenuWrapper",componentId:"sc-54b8b588-3"})(["background-color:black;color:white;display:flex;flex-direction:row;position:absolute;width:fit-content;"]),d=n.default.ul.withConfig({displayName:"responsive-vertical-menu.style__StyledResponsiveMenu",componentId:"sc-54b8b588-4"})(["margin:0;padding:0;align-items:stretch;background-color:var(--colorsUtilityYin100);box-sizing:border-box;display:flex;flex-direction:column;height:",";justify-content:flex-start;overflow-y:auto;padding-bottom:var(--spacing100);",";padding-top:var(--spacing100);position:fixed;width:",";max-width:375px;z-index:1000;border-right:",";"," "," ",""],(({height:e})=>e||"100%"),(({responsive:t})=>!t&&e.css(["padding-left:var(--spacing200);padding-right:var(--spacing200);"])),(({width:e})=>e||"100%"),(({childOpen:e,menu:t})=>"secondary"===t||!e&&"primary"===t?"2px solid var(--colorsGray850)":"1px solid var(--colorsGray850)"),(({top:t})=>e.css(["top:",";max-height:calc(100% - ",");"],t,"auto"===t?"40px":t)),(({childOpen:t})=>t&&e.css(["padding-right:calc(var(--spacing200) + 1px);"])),(({height:t,left:o,menu:i})=>"secondary"===i&&e.css(["left:",";height:",";"],o,t)));exports.ModalContainer=a,exports.StyledButton=r,exports.StyledCloseButton=s,exports.StyledGlobalVerticalMenuWrapper=l,exports.StyledResponsiveMenu=d;
+"use strict";var e=require("styled-components"),t=require("../../button/button.component.js"),o=require("../../../style/utils/add-focus-styling.js");function i(e){return e&&e.__esModule?e:{default:e}}var n=i(e);const a=n.default.div.withConfig({displayName:"responsive-vertical-menu.style__StyledBackdrop",componentId:"sc-fef5633f-0"})(["position:fixed;inset:0;"]),s=n.default.div.withConfig({displayName:"responsive-vertical-menu.style__ModalContainer",componentId:"sc-fef5633f-1"})(["position:fixed;top:0;",""],(({width:t})=>e.css(["width:",";"],t))),r=n.default(t.default).withConfig({displayName:"responsive-vertical-menu.style__StyledButton",componentId:"sc-fef5633f-2"})(["border-radius:0;background-color:var( ",' );[data-component="icon"]{color:var(--colorsUtilityYang100);}&:focus{appearance:none;-webkit-appearance:none;-webkit-box-shadow:',";box-shadow:",";border:1px solid black;outline:transparent 3px solid;}"],(({active:e})=>e?"--colorsActionMinorGray700":"--colorsUtilityYin100"),o.default(!0),o.default(!0)),l=n.default(t.default).withConfig({displayName:"responsive-vertical-menu.style__StyledCloseButton",componentId:"sc-fef5633f-3"})(['border-radius:0;[data-component="icon"]{color:var(--colorsUtilityYang100);}']),d=n.default.div.withConfig({displayName:"responsive-vertical-menu.style__StyledGlobalVerticalMenuWrapper",componentId:"sc-fef5633f-4"})(["background-color:black;color:white;display:flex;flex-direction:row;position:absolute;width:fit-content;"]),c=n.default.ul.withConfig({displayName:"responsive-vertical-menu.style__StyledResponsiveMenu",componentId:"sc-fef5633f-5"})(["margin:0;padding:0;align-items:stretch;background-color:var(--colorsUtilityYin100);box-sizing:border-box;display:flex;flex-direction:column;height:",";justify-content:flex-start;overflow-y:auto;padding-bottom:var(--spacing100);",";padding-top:var(--spacing100);position:fixed;width:",";max-width:375px;z-index:1000;border-right:",";"," "," ",""],(({height:e})=>e||"100%"),(({responsive:t})=>!t&&e.css(["padding-left:var(--spacing200);padding-right:var(--spacing200);"])),(({width:e})=>e||"100%"),(({childOpen:e,menu:t})=>"secondary"===t||!e&&"primary"===t?"2px solid var(--colorsGray850)":"1px solid var(--colorsGray850)"),(({top:t})=>e.css(["top:",";max-height:calc(100% - ",");"],t,"auto"===t?"40px":t)),(({childOpen:t})=>t&&e.css(["padding-right:calc(var(--spacing200) + 1px);"])),(({height:t,left:o,menu:i})=>"secondary"===i&&e.css(["left:",";height:",";"],o,t)));exports.ModalContainer=s,exports.StyledBackdrop=a,exports.StyledButton=r,exports.StyledCloseButton=l,exports.StyledGlobalVerticalMenuWrapper=d,exports.StyledResponsiveMenu=c;

package/package.json

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