carbon-react 156.3.2 → 156.3.4

package/esm/components/menu/menu-segment-title/menu-segment-title.component.d.ts

@@ -10,6 +10,8 @@ export interface MenuTitleProps extends TagProps {
     variant?: VariantType;
     /** Set the heading level for the segment title */
     as?: AllowedAsValues;
+    /** Data tag prop bag for segmented children */
+    segmentWrapperProps?: TagProps;
 }
 declare const MenuSegmentTitle: React.ForwardRefExoticComponent<MenuTitleProps & React.RefAttributes<HTMLDivElement>>;
 export default MenuSegmentTitle;

package/esm/components/menu/menu-segment-title/menu-segment-title.component.js

@@ -1 +1 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import r,{useContext as n,useMemo as o}from"react";import{StyledTitle as i,StyledSegmentChildren as l}from"./menu-segment-title.style.js";import{useStrictMenuContext as a}from"../__internal__/strict-menu.context.js";import{StyledMenuItem as c}from"../menu.style.js";import u from"../../../__internal__/utils/helpers/tags/tags.js";import s from"../__internal__/submenu/submenu.context.js";import{MenuSegmentContext as m}from"./menu-segment-title.context.js";function f(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function p(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){f(e,t,r[t])}))}return e}const b=["h2","h3","h4","h5","h6"],y=r.forwardRef(((r,f)=>{var{children:y,variant:O="default",text:d,as:h="h2"}=r,j=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(r,["children","variant","text","as"]);const{menuType:g,inFullscreenView:v}=a(),{submenuHasMaxWidth:w}=n(s),P=!!v,_=o((()=>P&&"alternate"===O&&["white","black"].includes(g)?"default":O),[P,g,O]);return e(c,{inSubmenu:!0,children:[t(i,(x=p({as:b.includes(h)?h:"h2"},u("menu-segment-title",j)),S={menuType:g,ref:f,variant:_,shouldWrap:w,children:d},S=null!=S?S:{},Object.getOwnPropertyDescriptors?Object.defineProperties(x,Object.getOwnPropertyDescriptors(S)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(S)).forEach((function(e){Object.defineProperty(x,e,Object.getOwnPropertyDescriptor(S,e))})),x)),y&&t(l,{"data-role":"menu-segment-children",menuType:g,variant:_,children:t(m.Provider,{value:{isChildOfSegment:!0,overriddenVariant:_},children:y})})]});var x,S}));y.displayName="MenuSegmentTitle";export{y as default};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import r,{useContext as n,useMemo as o}from"react";import{StyledTitle as i,StyledSegmentChildren as l}from"./menu-segment-title.style.js";import{useStrictMenuContext as u}from"../__internal__/strict-menu.context.js";import{StyledMenuItem as a}from"../menu.style.js";import c from"../../../__internal__/utils/helpers/tags/tags.js";import s from"../__internal__/submenu/submenu.context.js";import{MenuSegmentContext as m}from"./menu-segment-title.context.js";function p(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function f(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){p(e,t,r[t])}))}return e}function b(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}const y=["h2","h3","h4","h5","h6"],O=r.forwardRef(((r,p)=>{var{children:O,variant:d="default",text:g,as:h="h2",segmentWrapperProps:j}=r,v=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(r,["children","variant","text","as","segmentWrapperProps"]);const{menuType:P,inFullscreenView:w}=u(),{submenuHasMaxWidth:_}=n(s),x=!!w,S=o((()=>x&&"alternate"===d&&["white","black"].includes(P)?"default":d),[x,P,d]);return e(a,{inSubmenu:!0,children:[t(i,b(f({as:y.includes(h)?h:"h2"},c("menu-segment-title",v)),{menuType:P,ref:p,variant:S,shouldWrap:_,children:g})),O&&t(l,b(f({menuType:P,variant:S},c("menu-segment-title",f({"data-role":"menu-segment-children"},j))),{children:t(m.Provider,{value:{isChildOfSegment:!0,overriddenVariant:S},children:O})}))]})}));O.displayName="MenuSegmentTitle";export{O as default};

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

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

package/esm/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu.component.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 p,useResponsiveVerticalMenu as d}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:p,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}=d(),[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(p);e!==r&&(N(r),V(null))}),[K,p,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-haspopup":"dialog","aria-controls":"responsive-vertical-menu-dialog","aria-label":null===(r=R.verticalMenu.ariaLabels)||void 0===r?void 0:r.responsiveMenuLauncher()}:{"aria-expanded":I,"aria-haspopup":"menu","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:p})]}))})}):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:p})})}))]})},B=r=>{var{children:n,width:t,height:i}=r,o=E(r,["children","width","height"]);return e(s,{children:e(u,{children:e(p,{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 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};

package/lib/components/menu/menu-segment-title/menu-segment-title.component.d.ts

@@ -10,6 +10,8 @@ export interface MenuTitleProps extends TagProps {
     variant?: VariantType;
     /** Set the heading level for the segment title */
     as?: AllowedAsValues;
+    /** Data tag prop bag for segmented children */
+    segmentWrapperProps?: TagProps;
 }
 declare const MenuSegmentTitle: React.ForwardRefExoticComponent<MenuTitleProps & React.RefAttributes<HTMLDivElement>>;
 export default MenuSegmentTitle;

package/lib/components/menu/menu-segment-title/menu-segment-title.component.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("./menu-segment-title.style.js"),n=require("../__internal__/strict-menu.context.js"),u=require("../menu.style.js"),i=require("../../../__internal__/utils/helpers/tags/tags.js"),l=require("../__internal__/submenu/submenu.context.js"),s=require("./menu-segment-title.context.js");function o(e){return e&&e.__esModule?e:{default:e}}function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function c(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){a(e,t,r[t])}))}return e}const f=["h2","h3","h4","h5","h6"],d=o(t).default.forwardRef(((o,a)=>{var{children:d,variant:b="default",text:y,as:m="h2"}=o,p=function(e,t){if(null==e)return{};var r,n,u=function(e,t){if(null==e)return{};var r,n,u={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(u[r]=e[r]);return u}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(u[r]=e[r])}return u}(o,["children","variant","text","as"]);const{menuType:O,inFullscreenView:j}=n.useStrictMenuContext(),{submenuHasMaxWidth:h}=t.useContext(l.default),g=!!j,v=t.useMemo((()=>g&&"alternate"===b&&["white","black"].includes(O)?"default":b),[g,O,b]);return e.jsxs(u.StyledMenuItem,{inSubmenu:!0,children:[e.jsx(r.StyledTitle,(x=c({as:f.includes(m)?m:"h2"},i.default("menu-segment-title",p)),_={menuType:O,ref:a,variant:v,shouldWrap:h,children:y},_=null!=_?_:{},Object.getOwnPropertyDescriptors?Object.defineProperties(x,Object.getOwnPropertyDescriptors(_)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(_)).forEach((function(e){Object.defineProperty(x,e,Object.getOwnPropertyDescriptor(_,e))})),x)),d&&e.jsx(r.StyledSegmentChildren,{"data-role":"menu-segment-children",menuType:O,variant:v,children:e.jsx(s.MenuSegmentContext.Provider,{value:{isChildOfSegment:!0,overriddenVariant:v},children:d})})]});var x,_}));d.displayName="MenuSegmentTitle",exports.default=d;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("./menu-segment-title.style.js"),n=require("../__internal__/strict-menu.context.js"),u=require("../menu.style.js"),i=require("../../../__internal__/utils/helpers/tags/tags.js"),l=require("../__internal__/submenu/submenu.context.js"),s=require("./menu-segment-title.context.js");function o(e){return e&&e.__esModule?e:{default:e}}function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function c(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){a(e,t,r[t])}))}return e}function f(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}const p=["h2","h3","h4","h5","h6"],d=o(t).default.forwardRef(((o,a)=>{var{children:d,variant:m="default",text:b,as:y="h2",segmentWrapperProps:O}=o,j=function(e,t){if(null==e)return{};var r,n,u=function(e,t){if(null==e)return{};var r,n,u={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(u[r]=e[r]);return u}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(u[r]=e[r])}return u}(o,["children","variant","text","as","segmentWrapperProps"]);const{menuType:g,inFullscreenView:h}=n.useStrictMenuContext(),{submenuHasMaxWidth:v}=t.useContext(l.default),x=!!h,P=t.useMemo((()=>x&&"alternate"===m&&["white","black"].includes(g)?"default":m),[x,g,m]);return e.jsxs(u.StyledMenuItem,{inSubmenu:!0,children:[e.jsx(r.StyledTitle,f(c({as:p.includes(y)?y:"h2"},i.default("menu-segment-title",j)),{menuType:g,ref:a,variant:P,shouldWrap:v,children:b})),d&&e.jsx(r.StyledSegmentChildren,f(c({menuType:g,variant:P},i.default("menu-segment-title",c({"data-role":"menu-segment-children"},O))),{children:e.jsx(s.MenuSegmentContext.Provider,{value:{isChildOfSegment:!0,overriddenVariant:P},children:d})}))]})}));d.displayName="MenuSegmentTitle",exports.default=d;

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

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

package/lib/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu.component.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"),a=require("../../modal/modal.component.js"),u=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=u.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-haspopup":"dialog","aria-controls":"responsive-vertical-menu-dialog","aria-label":null===(r=O.verticalMenu.ariaLabels)||void 0===r?void 0:r.responsiveMenuLauncher()}:{"aria-expanded":_,"aria-haspopup":"menu","aria-controls":"responsive-vertical-menu-primary","aria-label":null===(e=O.verticalMenu.ariaLabels)||void 0===e?void 0:e.responsiveMenuLauncher()}})())),P?e.jsx(a.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:a}=r,u=y(r,["children","width","height"]);return e.jsx(t.DepthProvider,{children:e.jsx(n.MenuFocusProvider,{children:e.jsx(i.ResponsiveVerticalMenuProvider,{width:s,height:a,children:e.jsx(j,b(m({width:s,height:a},u),{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"),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;

package/package.json

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