carbon-react 154.13.7 → 154.13.8

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

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

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

@@ -24,11 +24,12 @@ export declare const StyledNestedMenuWrapper: import("styled-components").Styled
     hasIcon?: boolean | undefined;
     responsive?: boolean | undefined;
 }, never>;
-export declare const StyledNestedMenu: import("styled-components").StyledComponent<"div", any, {
+export declare const StyledNestedMenu: import("styled-components").StyledComponent<"ul", any, {
     depth: number;
     hasIcon?: boolean | undefined;
     responsive?: boolean | undefined;
 }, never>;
+export declare const StyledResponsiveMenuListItem: import("styled-components").StyledComponent<"li", any, {}, never>;
 export declare const StyledResponsiveMenuItem: import("styled-components").StyledComponent<"button", any, StyledResponsiveMenuItemProps, never>;
 export declare const StyledResponsiveMenuAction: import("styled-components").StyledComponent<"a", any, {
     depth: number;

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

@@ -1 +1 @@
-import e,{css as t}from"styled-components";import{margin as i,padding as o}from"styled-system";import n from"../../../icon/icon.component.js";import r from"../../../../style/utils/add-focus-styling.js";const s=(e,t)=>e&&t?"180deg":"0deg",a=t(["align-items:center;background-color:transparent;border:none;border-radius:var(--borderRadius100);box-sizing:border-box;color:var(--colorsUtilityYang100);cursor:pointer;display:flex;flex-direction:row;font-size:14px;font-weight:500;justify-content:space-between;min-height:var(--sizing500);padding:0 var(--spacing200);width:100%;max-width:340px;"," ",' &:hover{background-color:var(--colorsActionMajor500);color:var(--colorsUtilityYang100);text-decoration:none;}[data-component="icon"]{color:var(--colorsUtilityYang100);margin-right:var(--spacing100);}&:focus{',"}"],i,o,r(!0)),d=e(n).withConfig({displayName:"responsive-vertical-menu-item.style__StyledIcon",componentId:"sc-986e9f33-0"})(["rotate:",";transition:rotate "," ease-in;",";"],(({depth:e,expanded:t})=>s(e,t)),(({reduceMotion:e})=>e?0:"0.2s"),(({depth:e,expanded:i,reduceMotion:o})=>i&&t(["rotate:",";transition:rotate "," ease-out;"],s(e,i),o?0:"0.2s"))),c=e.span.withConfig({displayName:"responsive-vertical-menu-item.style__StyledMenuItemContent",componentId:"sc-986e9f33-1"})(["align-items:center;display:flex;flex-direction:row;gap:var(--spacing100);svg{margin-right:var(--spacing100);max-width:var(--sizing300);min-width:var(--sizing300);}"]),p=e.div.withConfig({displayName:"responsive-vertical-menu-item.style__StyledNestedMenuWrapper",componentId:"sc-986e9f33-2"})(["box-sizing:border-box;display:flex;justify-content:",";padding:0 16px;width:100%;",""],(({hasIcon:e,responsive:t})=>e&&t?"flex-end":"flex-start"),(({depth:e,responsive:i})=>1===e&&i&&t(["padding:0 0 0 16px;"]))),l=e.div.withConfig({displayName:"responsive-vertical-menu-item.style__StyledNestedMenu",componentId:"sc-986e9f33-3"})([""," > a{","}"],(({depth:e,hasIcon:i})=>t(["width:",";"],e<2&&!i?"100%":"88%")),(({depth:e})=>t(["font-weight:var(--fontWeights500);",";"],1===e&&t(["font-weight:var(--fontWeights400);margin-left:var(--spacing200);margin-right:var(--spacing200);"])))),g=e.button.withConfig({displayName:"responsive-vertical-menu-item.style__StyledResponsiveMenuItem",componentId:"sc-986e9f33-4"})([""," "," ",""],a,(({active:e,responsive:i})=>e&&!i&&t(["background-color:var(--colorsGray850);"])),(({depth:e,responsive:i})=>0===e&&i&&t(["color:var(--colorsUtilityYang080);cursor:default;"]))),m=e.a.withConfig({displayName:"responsive-vertical-menu-item.style__StyledResponsiveMenuAction",componentId:"sc-986e9f33-5"})([""," height:40px;text-decoration:none;"],a);export{d as StyledIcon,c as StyledMenuItemContent,l as StyledNestedMenu,p as StyledNestedMenuWrapper,m as StyledResponsiveMenuAction,g as StyledResponsiveMenuItem};
+import e,{css as t}from"styled-components";import{margin as i,padding as n}from"styled-system";import o from"../../../icon/icon.component.js";import s from"../../../../style/utils/add-focus-styling.js";const r=(e,t)=>e&&t?"180deg":"0deg",a=t(["align-items:center;background-color:transparent;border:none;border-radius:var(--borderRadius100);box-sizing:border-box;color:var(--colorsUtilityYang100);cursor:pointer;display:flex;flex-direction:row;font-size:14px;font-weight:500;justify-content:space-between;min-height:var(--sizing500);padding:0 var(--spacing200);width:100%;"," ",' &:hover{background-color:var(--colorsActionMajor500);color:var(--colorsUtilityYang100);text-decoration:none;}[data-component="icon"]{color:var(--colorsUtilityYang100);margin-right:var(--spacing100);}&:focus{',"}"],i,n,s(!0)),d=e(o).withConfig({displayName:"responsive-vertical-menu-item.style__StyledIcon",componentId:"sc-1b4b87cd-0"})(["rotate:",";transition:rotate "," ease-in;",";"],(({depth:e,expanded:t})=>r(e,t)),(({reduceMotion:e})=>e?0:"0.2s"),(({depth:e,expanded:i,reduceMotion:n})=>i&&t(["rotate:",";transition:rotate "," ease-out;"],r(e,i),n?0:"0.2s"))),c=e.span.withConfig({displayName:"responsive-vertical-menu-item.style__StyledMenuItemContent",componentId:"sc-1b4b87cd-1"})(["align-items:center;display:flex;flex-direction:row;gap:var(--spacing100);svg{margin-right:var(--spacing100);max-width:var(--sizing300);min-width:var(--sizing300);}"]),l=e.div.withConfig({displayName:"responsive-vertical-menu-item.style__StyledNestedMenuWrapper",componentId:"sc-1b4b87cd-2"})(["box-sizing:border-box;display:flex;justify-content:",";width:100%;",""],(({hasIcon:e,responsive:t})=>e&&t?"flex-end":"flex-start"),(({depth:e,responsive:i})=>1===e&&i&&t(["padding:0 0 0 16px;"]))),p=e.ul.withConfig({displayName:"responsive-vertical-menu-item.style__StyledNestedMenu",componentId:"sc-1b4b87cd-3"})(["padding:0;",""],(({depth:e,hasIcon:i,responsive:n})=>t(["width:",";margin-left:var(--spacing400);"," li > a{font-weight:",";}"],e<2&&!i?"100%":"88%",n&&t(["margin-left:",";"],i||1===e?"var(--spacing200)":"0"),1===e?"var(--fontWeights400)":"var(--fontWeights500)"))),m=e.li.withConfig({displayName:"responsive-vertical-menu-item.style__StyledResponsiveMenuListItem",componentId:"sc-1b4b87cd-4"})(["list-style:none;margin:0;padding:0;width:100%;max-width:340px;"]),g=e.button.withConfig({displayName:"responsive-vertical-menu-item.style__StyledResponsiveMenuItem",componentId:"sc-1b4b87cd-5"})([""," "," ",""],a,(({active:e,responsive:i})=>e&&!i&&t(["background-color:var(--colorsGray850);"])),(({depth:e,responsive:i})=>0===e&&i&&t(["color:var(--colorsUtilityYang080);cursor:default;"]))),v=e.a.withConfig({displayName:"responsive-vertical-menu-item.style__StyledResponsiveMenuAction",componentId:"sc-1b4b87cd-6"})([""," height:40px;text-decoration:none;"],a);export{d as StyledIcon,c as StyledMenuItemContent,p as StyledNestedMenu,l as StyledNestedMenuWrapper,v as StyledResponsiveMenuAction,g as StyledResponsiveMenuItem,m as StyledResponsiveMenuListItem};

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

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

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

@@ -13,7 +13,7 @@ export interface MenuContextType {
     activeMenuItem: ResponsiveVerticalMenuButtonItem | null;
     buttonRef: RefObject<HTMLButtonElement>;
     containerRef: RefObject<HTMLDivElement>;
-    menuRef: RefObject<HTMLDivElement>;
+    menuRef: RefObject<HTMLUListElement>;
     reducedMotion?: boolean;
     responsiveMode?: boolean;
     setActiveMenuItem: (item: ResponsiveVerticalMenuButtonItem | null) => void;

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

@@ -16,5 +16,5 @@ interface StyledButtonProps {
 export declare const StyledButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../button").ButtonProps & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>, any, StyledButtonProps, never>;
 export declare const StyledCloseButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../button").ButtonProps & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>, any, {}, never>;
 export declare const StyledGlobalVerticalMenuWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledResponsiveMenu: import("styled-components").StyledComponent<"div", any, StyledResponsiveMenuProps, never>;
+export declare const StyledResponsiveMenu: import("styled-components").StyledComponent<"ul", any, StyledResponsiveMenuProps, never>;
 export {};

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

@@ -1 +1 @@
-import o,{css as e}from"styled-components";import i from"../../button/button.component.js";import t from"../../../style/utils/add-focus-styling.js";const n=o(i).withConfig({displayName:"responsive-vertical-menu.style__StyledButton",componentId:"sc-b8ef4e13-0"})(["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)),r=o(i).withConfig({displayName:"responsive-vertical-menu.style__StyledCloseButton",componentId:"sc-b8ef4e13-1"})(['border-radius:0;[data-component="icon"]{color:var(--colorsUtilityYang100);}']),a=o.div.withConfig({displayName:"responsive-vertical-menu.style__StyledGlobalVerticalMenuWrapper",componentId:"sc-b8ef4e13-2"})(["background-color:black;color:white;display:flex;flex-direction:row;position:absolute;width:fit-content;"]),s=o.div.withConfig({displayName:"responsive-vertical-menu.style__StyledResponsiveMenu",componentId:"sc-b8ef4e13-3"})(["align-items:center;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;top:",";width:",";max-width:375px;z-index:1000;border-right:",";& > :last-child{margin-bottom:40px;}"," ",""],(({height:o})=>o||"100%"),(({responsive:o})=>!o&&e(["padding-left:var(--spacing200);padding-right:var(--spacing200);"])),(({top:o})=>o),(({width:o})=>o||"100%"),(({childOpen:o,menu:e})=>"secondary"===e||!o&&"primary"===e?"2px solid var(--colorsGray850)":"1px solid var(--colorsGray850)"),(({childOpen:o})=>o&&e(["padding-right:calc(var(--spacing200) + 1px);"])),(({height:o,left:i,menu:t})=>"secondary"===t&&e(["left:",";min-height:",";"],i,o)));export{n as StyledButton,r as StyledCloseButton,a as StyledGlobalVerticalMenuWrapper,s as StyledResponsiveMenu};
+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(t).withConfig({displayName:"responsive-vertical-menu.style__StyledButton",componentId:"sc-6194750b-0"})(["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-6194750b-1"})(['border-radius:0;[data-component="icon"]{color:var(--colorsUtilityYang100);}']),a=o.div.withConfig({displayName:"responsive-vertical-menu.style__StyledGlobalVerticalMenuWrapper",componentId:"sc-6194750b-2"})(["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-6194750b-3"})(["margin:0;padding:0;align-items:center;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;top:",";width:",";max-width:375px;z-index:1000;border-right:",";& > :last-child{margin-bottom:40px;}"," ",""],(({height:o})=>o||"100%"),(({responsive:o})=>!o&&i(["padding-left:var(--spacing200);padding-right:var(--spacing200);"])),(({top:o})=>o),(({width:o})=>o||"100%"),(({childOpen:o,menu:i})=>"secondary"===i||!o&&"primary"===i?"2px solid var(--colorsGray850)":"1px solid var(--colorsGray850)"),(({childOpen:o})=>o&&i(["padding-right:calc(var(--spacing200) + 1px);"])),(({height:o,left:t,menu:e})=>"secondary"===e&&i(["left:",";min-height:",";"],t,o)));export{n as StyledButton,r as StyledCloseButton,a as StyledGlobalVerticalMenuWrapper,l as StyledResponsiveMenu};

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime");require("react");var r=require("./responsive-vertical-menu-divider.style.js");require("../../../../style/utils/filter-styled-system-padding-props.js");var t=require("../../../../style/utils/filter-styled-system-margin-props.js"),i=require("../__internal__/depth.context.js"),n=require("../responsive-vertical-menu.context.js");function s(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function o(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},i=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),i.forEach((function(r){s(e,r,t[r])}))}return e}const u=s=>{const u=i.useDepth(),{responsiveMode:l}=n.useResponsiveVerticalMenu();return e.jsx(r.StyledResponsiveVerticalMenuDivider,{"data-component":"responsive-vertical-menu-divider","data-element":"responsive-vertical-menu-divider","data-role":"responsive-vertical-menu-divider",depth:u,responsive:l,children:e.jsx(r.StyledHr,o({},t.default(s)))})};exports.ResponsiveVerticalMenuDivider=u,exports.default=u;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime");require("react");var r=require("./responsive-vertical-menu-divider.style.js");require("../../../../style/utils/filter-styled-system-padding-props.js");var t=require("../../../../style/utils/filter-styled-system-margin-props.js"),i=require("../__internal__/depth.context.js"),n=require("../responsive-vertical-menu.context.js");function s(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function o(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},i=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),i.forEach((function(r){s(e,r,t[r])}))}return e}const u=s=>{const u=i.useDepth(),{responsiveMode:l}=n.useResponsiveVerticalMenu();return e.jsx(r.StyledResponsiveVerticalMenuDivider,{"data-component":"responsive-vertical-menu-divider","data-element":"responsive-vertical-menu-divider","data-role":"responsive-vertical-menu-divider",depth:u,responsive:l,"aria-hidden":"true",children:e.jsx(r.StyledHr,o({},t.default(s)))})};exports.ResponsiveVerticalMenuDivider=u,exports.default=u;

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

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

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

@@ -24,11 +24,12 @@ export declare const StyledNestedMenuWrapper: import("styled-components").Styled
     hasIcon?: boolean | undefined;
     responsive?: boolean | undefined;
 }, never>;
-export declare const StyledNestedMenu: import("styled-components").StyledComponent<"div", any, {
+export declare const StyledNestedMenu: import("styled-components").StyledComponent<"ul", any, {
     depth: number;
     hasIcon?: boolean | undefined;
     responsive?: boolean | undefined;
 }, never>;
+export declare const StyledResponsiveMenuListItem: import("styled-components").StyledComponent<"li", any, {}, never>;
 export declare const StyledResponsiveMenuItem: import("styled-components").StyledComponent<"button", any, StyledResponsiveMenuItemProps, never>;
 export declare const StyledResponsiveMenuAction: import("styled-components").StyledComponent<"a", any, {
     depth: number;

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

@@ -1 +1 @@
-"use strict";var e=require("styled-components"),t=require("styled-system"),n=require("../../../icon/icon.component.js"),i=require("../../../../style/utils/add-focus-styling.js");function o(e){return e&&e.__esModule?e:{default:e}}var s=o(e);const r=(e,t)=>e&&t?"180deg":"0deg",a=e.css(["align-items:center;background-color:transparent;border:none;border-radius:var(--borderRadius100);box-sizing:border-box;color:var(--colorsUtilityYang100);cursor:pointer;display:flex;flex-direction:row;font-size:14px;font-weight:500;justify-content:space-between;min-height:var(--sizing500);padding:0 var(--spacing200);width:100%;max-width:340px;"," ",' &:hover{background-color:var(--colorsActionMajor500);color:var(--colorsUtilityYang100);text-decoration:none;}[data-component="icon"]{color:var(--colorsUtilityYang100);margin-right:var(--spacing100);}&:focus{',"}"],t.margin,t.padding,i.default(!0)),d=s.default(n.default).withConfig({displayName:"responsive-vertical-menu-item.style__StyledIcon",componentId:"sc-986e9f33-0"})(["rotate:",";transition:rotate "," ease-in;",";"],(({depth:e,expanded:t})=>r(e,t)),(({reduceMotion:e})=>e?0:"0.2s"),(({depth:t,expanded:n,reduceMotion:i})=>n&&e.css(["rotate:",";transition:rotate "," ease-out;"],r(t,n),i?0:"0.2s"))),c=s.default.span.withConfig({displayName:"responsive-vertical-menu-item.style__StyledMenuItemContent",componentId:"sc-986e9f33-1"})(["align-items:center;display:flex;flex-direction:row;gap:var(--spacing100);svg{margin-right:var(--spacing100);max-width:var(--sizing300);min-width:var(--sizing300);}"]),l=s.default.div.withConfig({displayName:"responsive-vertical-menu-item.style__StyledNestedMenuWrapper",componentId:"sc-986e9f33-2"})(["box-sizing:border-box;display:flex;justify-content:",";padding:0 16px;width:100%;",""],(({hasIcon:e,responsive:t})=>e&&t?"flex-end":"flex-start"),(({depth:t,responsive:n})=>1===t&&n&&e.css(["padding:0 0 0 16px;"]))),p=s.default.div.withConfig({displayName:"responsive-vertical-menu-item.style__StyledNestedMenu",componentId:"sc-986e9f33-3"})([""," > a{","}"],(({depth:t,hasIcon:n})=>e.css(["width:",";"],t<2&&!n?"100%":"88%")),(({depth:t})=>e.css(["font-weight:var(--fontWeights500);",";"],1===t&&e.css(["font-weight:var(--fontWeights400);margin-left:var(--spacing200);margin-right:var(--spacing200);"])))),g=s.default.button.withConfig({displayName:"responsive-vertical-menu-item.style__StyledResponsiveMenuItem",componentId:"sc-986e9f33-4"})([""," "," ",""],a,(({active:t,responsive:n})=>t&&!n&&e.css(["background-color:var(--colorsGray850);"])),(({depth:t,responsive:n})=>0===t&&n&&e.css(["color:var(--colorsUtilityYang080);cursor:default;"]))),u=s.default.a.withConfig({displayName:"responsive-vertical-menu-item.style__StyledResponsiveMenuAction",componentId:"sc-986e9f33-5"})([""," height:40px;text-decoration:none;"],a);exports.StyledIcon=d,exports.StyledMenuItemContent=c,exports.StyledNestedMenu=p,exports.StyledNestedMenuWrapper=l,exports.StyledResponsiveMenuAction=u,exports.StyledResponsiveMenuItem=g;
+"use strict";var e=require("styled-components"),t=require("styled-system"),n=require("../../../icon/icon.component.js"),i=require("../../../../style/utils/add-focus-styling.js");function s(e){return e&&e.__esModule?e:{default:e}}var o=s(e);const r=(e,t)=>e&&t?"180deg":"0deg",a=e.css(["align-items:center;background-color:transparent;border:none;border-radius:var(--borderRadius100);box-sizing:border-box;color:var(--colorsUtilityYang100);cursor:pointer;display:flex;flex-direction:row;font-size:14px;font-weight:500;justify-content:space-between;min-height:var(--sizing500);padding:0 var(--spacing200);width:100%;"," ",' &:hover{background-color:var(--colorsActionMajor500);color:var(--colorsUtilityYang100);text-decoration:none;}[data-component="icon"]{color:var(--colorsUtilityYang100);margin-right:var(--spacing100);}&:focus{',"}"],t.margin,t.padding,i.default(!0)),d=o.default(n.default).withConfig({displayName:"responsive-vertical-menu-item.style__StyledIcon",componentId:"sc-1b4b87cd-0"})(["rotate:",";transition:rotate "," ease-in;",";"],(({depth:e,expanded:t})=>r(e,t)),(({reduceMotion:e})=>e?0:"0.2s"),(({depth:t,expanded:n,reduceMotion:i})=>n&&e.css(["rotate:",";transition:rotate "," ease-out;"],r(t,n),i?0:"0.2s"))),c=o.default.span.withConfig({displayName:"responsive-vertical-menu-item.style__StyledMenuItemContent",componentId:"sc-1b4b87cd-1"})(["align-items:center;display:flex;flex-direction:row;gap:var(--spacing100);svg{margin-right:var(--spacing100);max-width:var(--sizing300);min-width:var(--sizing300);}"]),l=o.default.div.withConfig({displayName:"responsive-vertical-menu-item.style__StyledNestedMenuWrapper",componentId:"sc-1b4b87cd-2"})(["box-sizing:border-box;display:flex;justify-content:",";width:100%;",""],(({hasIcon:e,responsive:t})=>e&&t?"flex-end":"flex-start"),(({depth:t,responsive:n})=>1===t&&n&&e.css(["padding:0 0 0 16px;"]))),p=o.default.ul.withConfig({displayName:"responsive-vertical-menu-item.style__StyledNestedMenu",componentId:"sc-1b4b87cd-3"})(["padding:0;",""],(({depth:t,hasIcon:n,responsive:i})=>e.css(["width:",";margin-left:var(--spacing400);"," li > a{font-weight:",";}"],t<2&&!n?"100%":"88%",i&&e.css(["margin-left:",";"],n||1===t?"var(--spacing200)":"0"),1===t?"var(--fontWeights400)":"var(--fontWeights500)"))),u=o.default.li.withConfig({displayName:"responsive-vertical-menu-item.style__StyledResponsiveMenuListItem",componentId:"sc-1b4b87cd-4"})(["list-style:none;margin:0;padding:0;width:100%;max-width:340px;"]),g=o.default.button.withConfig({displayName:"responsive-vertical-menu-item.style__StyledResponsiveMenuItem",componentId:"sc-1b4b87cd-5"})([""," "," ",""],a,(({active:t,responsive:n})=>t&&!n&&e.css(["background-color:var(--colorsGray850);"])),(({depth:t,responsive:n})=>0===t&&n&&e.css(["color:var(--colorsUtilityYang080);cursor:default;"]))),m=o.default.a.withConfig({displayName:"responsive-vertical-menu-item.style__StyledResponsiveMenuAction",componentId:"sc-1b4b87cd-6"})([""," height:40px;text-decoration:none;"],a);exports.StyledIcon=d,exports.StyledMenuItemContent=c,exports.StyledNestedMenu=p,exports.StyledNestedMenuWrapper=l,exports.StyledResponsiveMenuAction=m,exports.StyledResponsiveMenuItem=g,exports.StyledResponsiveMenuListItem=u;

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

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

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

@@ -13,7 +13,7 @@ export interface MenuContextType {
     activeMenuItem: ResponsiveVerticalMenuButtonItem | null;
     buttonRef: RefObject<HTMLButtonElement>;
     containerRef: RefObject<HTMLDivElement>;
-    menuRef: RefObject<HTMLDivElement>;
+    menuRef: RefObject<HTMLUListElement>;
     reducedMotion?: boolean;
     responsiveMode?: boolean;
     setActiveMenuItem: (item: ResponsiveVerticalMenuButtonItem | null) => void;

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

@@ -16,5 +16,5 @@ interface StyledButtonProps {
 export declare const StyledButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../button").ButtonProps & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>, any, StyledButtonProps, never>;
 export declare const StyledCloseButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../button").ButtonProps & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>, any, {}, never>;
 export declare const StyledGlobalVerticalMenuWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledResponsiveMenu: import("styled-components").StyledComponent<"div", any, StyledResponsiveMenuProps, never>;
+export declare const StyledResponsiveMenu: import("styled-components").StyledComponent<"ul", any, StyledResponsiveMenuProps, never>;
 export {};

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

@@ -1 +1 @@
-"use strict";var e=require("styled-components"),o=require("../../button/button.component.js"),t=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(o.default).withConfig({displayName:"responsive-vertical-menu.style__StyledButton",componentId:"sc-b8ef4e13-0"})(["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"),t.default(!0),t.default(!0)),r=n.default(o.default).withConfig({displayName:"responsive-vertical-menu.style__StyledCloseButton",componentId:"sc-b8ef4e13-1"})(['border-radius:0;[data-component="icon"]{color:var(--colorsUtilityYang100);}']),l=n.default.div.withConfig({displayName:"responsive-vertical-menu.style__StyledGlobalVerticalMenuWrapper",componentId:"sc-b8ef4e13-2"})(["background-color:black;color:white;display:flex;flex-direction:row;position:absolute;width:fit-content;"]),s=n.default.div.withConfig({displayName:"responsive-vertical-menu.style__StyledResponsiveMenu",componentId:"sc-b8ef4e13-3"})(["align-items:center;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;top:",";width:",";max-width:375px;z-index:1000;border-right:",";& > :last-child{margin-bottom:40px;}"," ",""],(({height:e})=>e||"100%"),(({responsive:o})=>!o&&e.css(["padding-left:var(--spacing200);padding-right:var(--spacing200);"])),(({top:e})=>e),(({width:e})=>e||"100%"),(({childOpen:e,menu:o})=>"secondary"===o||!e&&"primary"===o?"2px solid var(--colorsGray850)":"1px solid var(--colorsGray850)"),(({childOpen:o})=>o&&e.css(["padding-right:calc(var(--spacing200) + 1px);"])),(({height:o,left:t,menu:i})=>"secondary"===i&&e.css(["left:",";min-height:",";"],t,o)));exports.StyledButton=a,exports.StyledCloseButton=r,exports.StyledGlobalVerticalMenuWrapper=l,exports.StyledResponsiveMenu=s;
+"use strict";var e=require("styled-components"),o=require("../../button/button.component.js"),t=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(o.default).withConfig({displayName:"responsive-vertical-menu.style__StyledButton",componentId:"sc-6194750b-0"})(["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"),t.default(!0),t.default(!0)),r=n.default(o.default).withConfig({displayName:"responsive-vertical-menu.style__StyledCloseButton",componentId:"sc-6194750b-1"})(['border-radius:0;[data-component="icon"]{color:var(--colorsUtilityYang100);}']),l=n.default.div.withConfig({displayName:"responsive-vertical-menu.style__StyledGlobalVerticalMenuWrapper",componentId:"sc-6194750b-2"})(["background-color:black;color:white;display:flex;flex-direction:row;position:absolute;width:fit-content;"]),s=n.default.ul.withConfig({displayName:"responsive-vertical-menu.style__StyledResponsiveMenu",componentId:"sc-6194750b-3"})(["margin:0;padding:0;align-items:center;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;top:",";width:",";max-width:375px;z-index:1000;border-right:",";& > :last-child{margin-bottom:40px;}"," ",""],(({height:e})=>e||"100%"),(({responsive:o})=>!o&&e.css(["padding-left:var(--spacing200);padding-right:var(--spacing200);"])),(({top:e})=>e),(({width:e})=>e||"100%"),(({childOpen:e,menu:o})=>"secondary"===o||!e&&"primary"===o?"2px solid var(--colorsGray850)":"1px solid var(--colorsGray850)"),(({childOpen:o})=>o&&e.css(["padding-right:calc(var(--spacing200) + 1px);"])),(({height:o,left:t,menu:i})=>"secondary"===i&&e.css(["left:",";min-height:",";"],t,o)));exports.StyledButton=a,exports.StyledCloseButton=r,exports.StyledGlobalVerticalMenuWrapper=l,exports.StyledResponsiveMenu=s;

package/package.json

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