carbon-react 158.10.0 → 158.11.0

package/esm/components/tabs/__next__/tabs.component.js

@@ -1 +1 @@
-import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import{forwardRef as n,useState as i,useEffect as o,useRef as l,useImperativeHandle as a,useCallback as c}from"react";import{Typography as s}from"../../typography/typography.component.js";import{TabsProvider as d,useTabs as b}from"./tabs.context.js";import{StyledTabs as u,StyledTab as f,StyledTabListWrapper as h,StyledTabList as p,Spacer as g,StyledTabPanel as m,StyledScrollButton as v,StyledScrollButtonPlaceholder as y}from"./tabs.style.js";import I from"../../../__internal__/utils/logger/index.js";import w from"../../../hooks/__internal__/useResizeObserver/useResizeObserver.js";import x from"../../icon/icon.component.js";import{TabProvider as k}from"./tab.context.js";const z=({children:t,id:r,tabId:n})=>{const{activeTab:i}=b();return e(k,{tabId:n,visible:n===i,children:e(m,{id:r,role:"tabpanel","aria-labelledby":n,children:t})})};let T=!1;const j=({controls:r,error:n=!1,id:l,label:a,leftSlot:c,rightSlot:s,warning:d=!1,info:u=!1})=>{const[h,p]=i(n),[g,m]=i(d),[v,y]=i(u),{activeTab:w,focusIndex:z,orientation:j,setActiveTab:S,setCurrentTabId:_,setFocusIndex:A,size:L,errors:O,warnings:R,infos:C}=b(),N=w===l;o((()=>{N&&_(l)}),[l,N,_]),!c&&!s||"string"==typeof a||T||(I.warn("[WARNING] Using `leftSlot` and/or `rightSlot` is not supported when `label` is not a string. Please use `leftSlot` and/or `rightSlot` alongside a string `label`, or use the `label` prop exclusively."),T=!0),o((()=>{if(z===l){const e=document.getElementById(l);null==e||e.focus()}}),[z,l,_]),o((()=>{let e=O[l],t=R[l],r=C[l];if(n&&!e&&(e={static:n}),d&&!t&&(t={static:d}),u&&!r&&(r={static:u}),!e)return void p(!1);const i=Object.keys(e).map((t=>e[t])).filter((e=>!1!==e)),o=n||i.length>0;if(p(o),!t)return void m(!1);const a=Object.keys(t).map((e=>t[e])).filter((e=>!1!==e)),c=d||a.length>0;if(m(c),!r)return void y(!1);const s=Object.keys(r).map((e=>r[e])).filter((e=>!1!==e)),b=u||s.length>0;y(b)}),[n,l,O,R,d,C,u]);const B=()=>{if(h||g||v){if(h)return e(x,{"data-role":"icon-error",type:"error",color:"#db004e"});if(g)return e(x,{"data-role":"icon-warning",type:"warning",color:"#d64309"});if(v)return e(x,{"data-role":"icon-info",type:"info",color:"#0060a7ff"})}return null};return e(k,{tabId:l,visible:!0,children:e(f,{activeTab:w===l,"aria-controls":r,"aria-selected":N?"true":"false",error:h,info:v,id:l,onClick:()=>{S(l),A(l)},orientation:j,role:"tab",size:L,type:"button",tabIndex:w===l?0:-1,warning:g,children:t("span","string"==typeof a?{className:"tab-title-content-wrapper",children:[c,a,s,B()]}:{className:"tab-title-content-wrapper",children:[a,B()]})})})},S=n((({ariaLabel:n,children:d},u)=>{const f=l(null),{activeTab:m,focusIndex:I,orientation:k,selectedTabId:z,setFocusIndex:T,setActiveTab:j,size:S}=b();a(u,(()=>({focusTab:e=>{var t;const r=null===(t=f.current)||void 0===t?void 0:t.querySelector(`#${e}`);null==r||r.focus(),T(e),j(e)}})));const _=c((()=>{var e;const t=(null===(e=f.current)||void 0===e?void 0:e.querySelectorAll("[role='tab']"))||[];return Array.from(t).map((e=>e.id)).filter((e=>e))}),[]);o((()=>{if(z)j(z);else if(!m){const e=_()[0];j(e)}}),[m,_,z,j]);const[A,L]=i(!1),[O,R]=i(!1),[C,N]=i(!1),B=c((()=>{if(f.current){const e=f.current.scrollWidth-f.current.clientWidth-20;L(e>0),R(f.current.scrollLeft>=20),N(f.current.scrollLeft<=e)}}),[]);w(f,(()=>{B()})),o((()=>{f.current&&B()}),[B]);const E=e=>{f.current&&("left"===e?f.current.scrollLeft-=200:f.current.scrollLeft+=200,B())};return t(r,{children:[e(s,{id:"tablist-aria-label",screenReaderOnly:!0,children:n}),t(h,{children:["vertical"!==k&&A?O?e(v,{"data-role":"tab-navigation-button-left",id:"tab-navigation-button-left",onClick:()=>E("left"),size:S,tabIndex:-1,title:"Scroll Tabs Left",type:"button",children:e(x,{type:"chevron_left"})}):e(y,{size:S}):null,t(p,{ariaLabel:n,"aria-labelledby":"tablist-aria-label",id:"tablist",onKeyDown:e=>{const t=_(),r=t.indexOf(I||m),n=t.length-1;if(-1===r)return;let i=r;switch(e.key){case"Home":i=0;break;case"End":i=n;break;case"ArrowRight":i=(r+1)%t.length;break;case"ArrowLeft":i=(r-1+t.length)%t.length;break;case"ArrowUp":"vertical"===k&&(i=(r-1+t.length)%t.length);break;case"ArrowDown":"vertical"===k&&(i=(r+1)%t.length);break;case"Enter":case" ":return void j(m);default:return}T(t[i])},orientation:k,ref:f,role:"tablist",size:S,tabIndex:-1,children:[d,e(g,{})]}),"vertical"!==k&&A?C?e(v,{"data-role":"tab-navigation-button-right",id:"tab-navigation-button-right",onClick:()=>E("right"),size:S,tabIndex:-1,title:"Scroll Tabs Right",type:"button",children:e(x,{type:"chevron_right"})}):e(y,{size:S}):null]})]})})),_=({children:t,labelledBy:r="",orientation:n="horizontal",selectedTabId:i,size:o="medium"})=>e(d,{labelledBy:r,orientation:n,selectedTabId:i,size:o,children:e(u,{id:"tabs-container",orientation:n,children:t})});export{j as Tab,S as TabList,z as TabPanel,_ as Tabs,_ as default};
+import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import{forwardRef as n,useState as i,useEffect as o,useRef as l,useImperativeHandle as a,useCallback as s}from"react";import{Typography as c}from"../../typography/typography.component.js";import{TabsProvider as d,useTabs as b}from"./tabs.context.js";import{StyledTabs as u,StyledTab as f,StyledTabListWrapper as h,StyledTabList as p,Spacer as g,StyledTabPanel as m,StyledScrollButton as v,StyledScrollButtonPlaceholder as y}from"./tabs.style.js";import I from"../../../__internal__/utils/logger/index.js";import w from"../../../hooks/__internal__/useResizeObserver/useResizeObserver.js";import x from"../../icon/icon.component.js";import{TabProvider as k}from"./tab.context.js";import T from"../../../hooks/__internal__/usePrevious/index.js";const _=({children:t,id:r,tabId:n})=>{const{activeTab:i}=b();return e(k,{tabId:n,visible:n===i,children:e(m,{id:r,role:"tabpanel","aria-labelledby":n,children:t})})};let z=!1;const j=({controls:r,error:n=!1,id:l,label:a,leftSlot:s,rightSlot:c,warning:d=!1,info:u=!1})=>{const[h,p]=i(n),[g,m]=i(d),[v,y]=i(u),{activeTab:w,focusIndex:T,orientation:_,setActiveTab:j,setCurrentTabId:S,setFocusIndex:A,size:L,errors:O,warnings:R,infos:C}=b(),N=w===l;o((()=>{N&&S(l)}),[l,N,S]),!s&&!c||"string"==typeof a||z||(I.warn("[WARNING] Using `leftSlot` and/or `rightSlot` is not supported when `label` is not a string. Please use `leftSlot` and/or `rightSlot` alongside a string `label`, or use the `label` prop exclusively."),z=!0),o((()=>{if(T===l){const e=document.getElementById(l);null==e||e.focus()}}),[T,l,S]),o((()=>{let e=O[l],t=R[l],r=C[l];if(n&&!e&&(e={static:n}),d&&!t&&(t={static:d}),u&&!r&&(r={static:u}),!e)return void p(!1);const i=Object.keys(e).map((t=>e[t])).filter((e=>!1!==e)),o=n||i.length>0;if(p(o),!t)return void m(!1);const a=Object.keys(t).map((e=>t[e])).filter((e=>!1!==e)),s=d||a.length>0;if(m(s),!r)return void y(!1);const c=Object.keys(r).map((e=>r[e])).filter((e=>!1!==e)),b=u||c.length>0;y(b)}),[n,l,O,R,d,C,u]);const B=()=>{if(h||g||v){if(h)return e(x,{"data-role":"icon-error",type:"error",color:"#db004e"});if(g)return e(x,{"data-role":"icon-warning",type:"warning",color:"#d64309"});if(v)return e(x,{"data-role":"icon-info",type:"info",color:"#0060a7ff"})}return null};return e(k,{tabId:l,visible:!0,children:e(f,{activeTab:w===l,"aria-controls":r,"aria-selected":N?"true":"false",error:h,info:v,id:l,onClick:()=>{j(l),A(l)},orientation:_,role:"tab",size:L,type:"button",tabIndex:w===l?0:-1,warning:g,children:t("span","string"==typeof a?{className:"tab-title-content-wrapper",children:[s,a,c,B()]}:{className:"tab-title-content-wrapper",children:[a,B()]})})})},S=n((({ariaLabel:n,children:d,onTabChange:u},f)=>{const m=l(null),{activeTab:I,focusIndex:k,orientation:_,selectedTabId:z,setFocusIndex:j,setActiveTab:S,size:A}=b();a(f,(()=>({focusTab:e=>{var t;const r=null===(t=m.current)||void 0===t?void 0:t.querySelector(`#${e}`);null==r||r.focus(),j(e),S(e)}})));const L=s((()=>{var e;const t=(null===(e=m.current)||void 0===e?void 0:e.querySelectorAll("[role='tab']"))||[];return Array.from(t).map((e=>e.id)).filter((e=>e))}),[]);o((()=>{if(z)S(z);else if(!I){const e=L()[0];S(e)}}),[I,L,z,S]);const O=T(I);o((()=>{O&&O!==I&&(null==u||u(I))}),[I,u,O]);const[R,C]=i(!1),[N,B]=i(!1),[E,W]=i(!1),q=s((()=>{if(m.current){const e=m.current.scrollWidth-m.current.clientWidth-20;C(e>0),B(m.current.scrollLeft>=20),W(m.current.scrollLeft<=e)}}),[]);w(m,(()=>{q()})),o((()=>{m.current&&q()}),[q]);const D=e=>{m.current&&("left"===e?m.current.scrollLeft-=200:m.current.scrollLeft+=200,q())};return t(r,{children:[e(c,{id:"tablist-aria-label",screenReaderOnly:!0,children:n}),t(h,{children:["vertical"!==_&&R?N?e(v,{"data-role":"tab-navigation-button-left",id:"tab-navigation-button-left",onClick:()=>D("left"),size:A,tabIndex:-1,title:"Scroll Tabs Left",type:"button",children:e(x,{type:"chevron_left"})}):e(y,{size:A}):null,t(p,{ariaLabel:n,"aria-labelledby":"tablist-aria-label",id:"tablist",onKeyDown:e=>{const t=L(),r=t.indexOf(k||I),n=t.length-1;if(-1===r)return;let i=r;switch(e.key){case"Home":i=0;break;case"End":i=n;break;case"ArrowRight":i=(r+1)%t.length;break;case"ArrowLeft":i=(r-1+t.length)%t.length;break;case"ArrowUp":"vertical"===_&&(i=(r-1+t.length)%t.length);break;case"ArrowDown":"vertical"===_&&(i=(r+1)%t.length);break;case"Enter":case" ":return void S(I);default:return}j(t[i])},orientation:_,ref:m,role:"tablist",size:A,tabIndex:-1,children:[d,e(g,{})]}),"vertical"!==_&&R?E?e(v,{"data-role":"tab-navigation-button-right",id:"tab-navigation-button-right",onClick:()=>D("right"),size:A,tabIndex:-1,title:"Scroll Tabs Right",type:"button",children:e(x,{type:"chevron_right"})}):e(y,{size:A}):null]})]})})),A=({children:t,labelledBy:r="",orientation:n="horizontal",selectedTabId:i,size:o="medium"})=>e(d,{labelledBy:r,orientation:n,selectedTabId:i,size:o,children:e(u,{id:"tabs-container",orientation:n,children:t})});export{j as Tab,S as TabList,_ as TabPanel,A as Tabs,A as default};

package/esm/components/tabs/__next__/tabs.types.d.ts

@@ -43,6 +43,8 @@ export interface TabListProps {
     ariaLabel: string;
     /** The tabs to be shown in the tab list */
     children?: React.ReactNode;
+    /** A callback for when the active tab is changed */
+    onTabChange?: (tabId: string) => void;
 }
 export interface TabProps {
     /** The tab panel that this tab controls */

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

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

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

package/lib/components/tabs/__next__/tabs.component.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("../../typography/typography.component.js"),a=require("./tabs.context.js"),l=require("./tabs.style.js"),n=require("../../../__internal__/utils/logger/index.js"),i=require("../../../hooks/__internal__/useResizeObserver/useResizeObserver.js"),s=require("../../icon/icon.component.js"),o=require("./tab.context.js");let c=!1;const d=t.forwardRef((({ariaLabel:n,children:o},c)=>{const d=t.useRef(null),{activeTab:u,focusIndex:b,orientation:f,selectedTabId:h,setFocusIndex:p,setActiveTab:x,size:y}=a.useTabs();t.useImperativeHandle(c,(()=>({focusTab:e=>{var t;const r=null===(t=d.current)||void 0===t?void 0:t.querySelector(`#${e}`);null==r||r.focus(),p(e),x(e)}})));const g=t.useCallback((()=>{var e;const t=(null===(e=d.current)||void 0===e?void 0:e.querySelectorAll("[role='tab']"))||[];return Array.from(t).map((e=>e.id)).filter((e=>e))}),[]);t.useEffect((()=>{if(h)x(h);else if(!u){const e=g()[0];x(e)}}),[u,g,h,x]);const[v,j]=t.useState(!1),[S,T]=t.useState(!1),[I,m]=t.useState(!1),w=t.useCallback((()=>{if(d.current){const e=d.current.scrollWidth-d.current.clientWidth-20;j(e>0),T(d.current.scrollLeft>=20),m(d.current.scrollLeft<=e)}}),[]);i.default(d,(()=>{w()})),t.useEffect((()=>{d.current&&w()}),[w]);const k=e=>{d.current&&("left"===e?d.current.scrollLeft-=200:d.current.scrollLeft+=200,w())};return e.jsxs(e.Fragment,{children:[e.jsx(r.Typography,{id:"tablist-aria-label",screenReaderOnly:!0,children:n}),e.jsxs(l.StyledTabListWrapper,{children:["vertical"!==f&&v?S?e.jsx(l.StyledScrollButton,{"data-role":"tab-navigation-button-left",id:"tab-navigation-button-left",onClick:()=>k("left"),size:y,tabIndex:-1,title:"Scroll Tabs Left",type:"button",children:e.jsx(s.default,{type:"chevron_left"})}):e.jsx(l.StyledScrollButtonPlaceholder,{size:y}):null,e.jsxs(l.StyledTabList,{ariaLabel:n,"aria-labelledby":"tablist-aria-label",id:"tablist",onKeyDown:e=>{const t=g(),r=t.indexOf(b||u),a=t.length-1;if(-1===r)return;let l=r;switch(e.key){case"Home":l=0;break;case"End":l=a;break;case"ArrowRight":l=(r+1)%t.length;break;case"ArrowLeft":l=(r-1+t.length)%t.length;break;case"ArrowUp":"vertical"===f&&(l=(r-1+t.length)%t.length);break;case"ArrowDown":"vertical"===f&&(l=(r+1)%t.length);break;case"Enter":case" ":return void x(u);default:return}p(t[l])},orientation:f,ref:d,role:"tablist",size:y,tabIndex:-1,children:[o,e.jsx(l.Spacer,{})]}),"vertical"!==f&&v?I?e.jsx(l.StyledScrollButton,{"data-role":"tab-navigation-button-right",id:"tab-navigation-button-right",onClick:()=>k("right"),size:y,tabIndex:-1,title:"Scroll Tabs Right",type:"button",children:e.jsx(s.default,{type:"chevron_right"})}):e.jsx(l.StyledScrollButtonPlaceholder,{size:y}):null]})]})})),u=({children:t,labelledBy:r="",orientation:n="horizontal",selectedTabId:i,size:s="medium"})=>e.jsx(a.TabsProvider,{labelledBy:r,orientation:n,selectedTabId:i,size:s,children:e.jsx(l.StyledTabs,{id:"tabs-container",orientation:n,children:t})});exports.Tab=({controls:r,error:i=!1,id:d,label:u,leftSlot:b,rightSlot:f,warning:h=!1,info:p=!1})=>{const[x,y]=t.useState(i),[g,v]=t.useState(h),[j,S]=t.useState(p),{activeTab:T,focusIndex:I,orientation:m,setActiveTab:w,setCurrentTabId:k,setFocusIndex:z,size:_,errors:q,warnings:L,infos:A}=a.useTabs(),P=T===d;t.useEffect((()=>{P&&k(d)}),[d,P,k]),!b&&!f||"string"==typeof u||c||(n.default.warn("[WARNING] Using `leftSlot` and/or `rightSlot` is not supported when `label` is not a string. Please use `leftSlot` and/or `rightSlot` alongside a string `label`, or use the `label` prop exclusively."),c=!0),t.useEffect((()=>{if(I===d){const e=document.getElementById(d);null==e||e.focus()}}),[I,d,k]),t.useEffect((()=>{let e=q[d],t=L[d],r=A[d];if(i&&!e&&(e={static:i}),h&&!t&&(t={static:h}),p&&!r&&(r={static:p}),!e)return void y(!1);const a=Object.keys(e).map((t=>e[t])).filter((e=>!1!==e)),l=i||a.length>0;if(y(l),!t)return void v(!1);const n=Object.keys(t).map((e=>t[e])).filter((e=>!1!==e)),s=h||n.length>0;if(v(s),!r)return void S(!1);const o=Object.keys(r).map((e=>r[e])).filter((e=>!1!==e)),c=p||o.length>0;S(c)}),[i,d,q,L,h,A,p]);const E=()=>{if(x||g||j){if(x)return e.jsx(s.default,{"data-role":"icon-error",type:"error",color:"#db004e"});if(g)return e.jsx(s.default,{"data-role":"icon-warning",type:"warning",color:"#d64309"});if(j)return e.jsx(s.default,{"data-role":"icon-info",type:"info",color:"#0060a7ff"})}return null};return e.jsx(o.TabProvider,{tabId:d,visible:!0,children:e.jsx(l.StyledTab,{activeTab:T===d,"aria-controls":r,"aria-selected":P?"true":"false",error:x,info:j,id:d,onClick:()=>{w(d),z(d)},orientation:m,role:"tab",size:_,type:"button",tabIndex:T===d?0:-1,warning:g,children:"string"==typeof u?e.jsxs("span",{className:"tab-title-content-wrapper",children:[b,u,f,E()]}):e.jsxs("span",{className:"tab-title-content-wrapper",children:[u,E()]})})})},exports.TabList=d,exports.TabPanel=({children:t,id:r,tabId:n})=>{const{activeTab:i}=a.useTabs();return e.jsx(o.TabProvider,{tabId:n,visible:n===i,children:e.jsx(l.StyledTabPanel,{id:r,role:"tabpanel","aria-labelledby":n,children:t})})},exports.Tabs=u,exports.default=u;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("../../typography/typography.component.js"),a=require("./tabs.context.js"),l=require("./tabs.style.js"),n=require("../../../__internal__/utils/logger/index.js"),i=require("../../../hooks/__internal__/useResizeObserver/useResizeObserver.js"),s=require("../../icon/icon.component.js"),o=require("./tab.context.js"),c=require("../../../hooks/__internal__/usePrevious/index.js");let u=!1;const d=t.forwardRef((({ariaLabel:n,children:o,onTabChange:u},d)=>{const b=t.useRef(null),{activeTab:f,focusIndex:h,orientation:p,selectedTabId:x,setFocusIndex:g,setActiveTab:y,size:v}=a.useTabs();t.useImperativeHandle(d,(()=>({focusTab:e=>{var t;const r=null===(t=b.current)||void 0===t?void 0:t.querySelector(`#${e}`);null==r||r.focus(),g(e),y(e)}})));const j=t.useCallback((()=>{var e;const t=(null===(e=b.current)||void 0===e?void 0:e.querySelectorAll("[role='tab']"))||[];return Array.from(t).map((e=>e.id)).filter((e=>e))}),[]);t.useEffect((()=>{if(x)y(x);else if(!f){const e=j()[0];y(e)}}),[f,j,x,y]);const S=c.default(f);t.useEffect((()=>{S&&S!==f&&(null==u||u(f))}),[f,u,S]);const[T,I]=t.useState(!1),[k,m]=t.useState(!1),[w,_]=t.useState(!1),z=t.useCallback((()=>{if(b.current){const e=b.current.scrollWidth-b.current.clientWidth-20;I(e>0),m(b.current.scrollLeft>=20),_(b.current.scrollLeft<=e)}}),[]);i.default(b,(()=>{z()})),t.useEffect((()=>{b.current&&z()}),[z]);const q=e=>{b.current&&("left"===e?b.current.scrollLeft-=200:b.current.scrollLeft+=200,z())};return e.jsxs(e.Fragment,{children:[e.jsx(r.Typography,{id:"tablist-aria-label",screenReaderOnly:!0,children:n}),e.jsxs(l.StyledTabListWrapper,{children:["vertical"!==p&&T?k?e.jsx(l.StyledScrollButton,{"data-role":"tab-navigation-button-left",id:"tab-navigation-button-left",onClick:()=>q("left"),size:v,tabIndex:-1,title:"Scroll Tabs Left",type:"button",children:e.jsx(s.default,{type:"chevron_left"})}):e.jsx(l.StyledScrollButtonPlaceholder,{size:v}):null,e.jsxs(l.StyledTabList,{ariaLabel:n,"aria-labelledby":"tablist-aria-label",id:"tablist",onKeyDown:e=>{const t=j(),r=t.indexOf(h||f),a=t.length-1;if(-1===r)return;let l=r;switch(e.key){case"Home":l=0;break;case"End":l=a;break;case"ArrowRight":l=(r+1)%t.length;break;case"ArrowLeft":l=(r-1+t.length)%t.length;break;case"ArrowUp":"vertical"===p&&(l=(r-1+t.length)%t.length);break;case"ArrowDown":"vertical"===p&&(l=(r+1)%t.length);break;case"Enter":case" ":return void y(f);default:return}g(t[l])},orientation:p,ref:b,role:"tablist",size:v,tabIndex:-1,children:[o,e.jsx(l.Spacer,{})]}),"vertical"!==p&&T?w?e.jsx(l.StyledScrollButton,{"data-role":"tab-navigation-button-right",id:"tab-navigation-button-right",onClick:()=>q("right"),size:v,tabIndex:-1,title:"Scroll Tabs Right",type:"button",children:e.jsx(s.default,{type:"chevron_right"})}):e.jsx(l.StyledScrollButtonPlaceholder,{size:v}):null]})]})})),b=({children:t,labelledBy:r="",orientation:n="horizontal",selectedTabId:i,size:s="medium"})=>e.jsx(a.TabsProvider,{labelledBy:r,orientation:n,selectedTabId:i,size:s,children:e.jsx(l.StyledTabs,{id:"tabs-container",orientation:n,children:t})});exports.Tab=({controls:r,error:i=!1,id:c,label:d,leftSlot:b,rightSlot:f,warning:h=!1,info:p=!1})=>{const[x,g]=t.useState(i),[y,v]=t.useState(h),[j,S]=t.useState(p),{activeTab:T,focusIndex:I,orientation:k,setActiveTab:m,setCurrentTabId:w,setFocusIndex:_,size:z,errors:q,warnings:L,infos:P}=a.useTabs(),A=T===c;t.useEffect((()=>{A&&w(c)}),[c,A,w]),!b&&!f||"string"==typeof d||u||(n.default.warn("[WARNING] Using `leftSlot` and/or `rightSlot` is not supported when `label` is not a string. Please use `leftSlot` and/or `rightSlot` alongside a string `label`, or use the `label` prop exclusively."),u=!0),t.useEffect((()=>{if(I===c){const e=document.getElementById(c);null==e||e.focus()}}),[I,c,w]),t.useEffect((()=>{let e=q[c],t=L[c],r=P[c];if(i&&!e&&(e={static:i}),h&&!t&&(t={static:h}),p&&!r&&(r={static:p}),!e)return void g(!1);const a=Object.keys(e).map((t=>e[t])).filter((e=>!1!==e)),l=i||a.length>0;if(g(l),!t)return void v(!1);const n=Object.keys(t).map((e=>t[e])).filter((e=>!1!==e)),s=h||n.length>0;if(v(s),!r)return void S(!1);const o=Object.keys(r).map((e=>r[e])).filter((e=>!1!==e)),u=p||o.length>0;S(u)}),[i,c,q,L,h,P,p]);const E=()=>{if(x||y||j){if(x)return e.jsx(s.default,{"data-role":"icon-error",type:"error",color:"#db004e"});if(y)return e.jsx(s.default,{"data-role":"icon-warning",type:"warning",color:"#d64309"});if(j)return e.jsx(s.default,{"data-role":"icon-info",type:"info",color:"#0060a7ff"})}return null};return e.jsx(o.TabProvider,{tabId:c,visible:!0,children:e.jsx(l.StyledTab,{activeTab:T===c,"aria-controls":r,"aria-selected":A?"true":"false",error:x,info:j,id:c,onClick:()=>{m(c),_(c)},orientation:k,role:"tab",size:z,type:"button",tabIndex:T===c?0:-1,warning:y,children:"string"==typeof d?e.jsxs("span",{className:"tab-title-content-wrapper",children:[b,d,f,E()]}):e.jsxs("span",{className:"tab-title-content-wrapper",children:[d,E()]})})})},exports.TabList=d,exports.TabPanel=({children:t,id:r,tabId:n})=>{const{activeTab:i}=a.useTabs();return e.jsx(o.TabProvider,{tabId:n,visible:n===i,children:e.jsx(l.StyledTabPanel,{id:r,role:"tabpanel","aria-labelledby":n,children:t})})},exports.Tabs=b,exports.default=b;

package/lib/components/tabs/__next__/tabs.types.d.ts

@@ -43,6 +43,8 @@ export interface TabListProps {
     ariaLabel: string;
     /** The tabs to be shown in the tab list */
     children?: React.ReactNode;
+    /** A callback for when the active tab is changed */
+    onTabChange?: (tabId: string) => void;
 }
 export interface TabProps {
     /** The tab panel that this tab controls */

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");require("../../../../style/utils/filter-styled-system-padding-props.js");var i=require("../../../../style/utils/filter-styled-system-margin-props.js"),o=require("../__internal__/depth.context.js"),s=require("../__internal__/focus.context.js"),l=require("../responsive-vertical-menu.context.js"),c=require("../../../icon/icon.component.js"),d=require("../../../../__internal__/utils/helpers/guid/index.js");function a(e){return e&&e.__esModule?e:{default:e}}var u=a(t);function p(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function v(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){p(e,t,n[t])}))}return e}function h(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 f(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 m=t.createContext(void 0),y=({customIcon:t,depth:n,hasChildren:i,icon:o,label:s,responsive:l})=>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:l,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:l,children:[o&&e.jsx(c.default,{type:o}),s]}),j=t.forwardRef(((c,d)=>{var{children:a,customIcon:p,icon:j,id:b,href:x,label:g,onClick:O,rel:I,target:w}=c,M=f(c,["children","customIcon","icon","id","href","label","onClick","rel","target"]);const{activeMenuItem:_,containerRef:S,responsiveMode:C,setActive:P,setActiveMenuItem:k,reducedMotion:D,left:q,top:R,width:$,height:A}=l.useResponsiveVerticalMenu(),{expandItem:E,focusItem:F,getRegisteredItems:K,moveFocus:L,registerMenuItem:N}=s.useMenuFocus(),V=o.useDepth(),B=(null==_?void 0:_.id)===b,T=u.default.Children.count(a)>0,W=t.useContext(m),z=t.useRef(null),G=t.useMemo((()=>C&&0===V),[V,C]),[H,J]=t.useState(G&&T||V>=2);t.useEffect((()=>{N(b,d,W)}),[b,W,d,N]);const Q=e=>{let t,n;switch(e.key){case"Tab":var r;if(n=(null===(r=S.current)||void 0===r?void 0:r.querySelectorAll(`[data-depth="${V}"]`))||[],t=Array.from(n),0===V&&T&&(null==_?void 0:_.id)===b&&e.shiftKey&&(e.preventDefault(),L("lastChild")),1===V&&t.findIndex((e=>e.id===b))===t.length-1&&(!T||T&&!H)&&(e.shiftKey||(e.preventDefault(),L("parent"))),2===V&&t.findIndex((e=>e.id===b))===t.length-1&&(!T||T&&!H)){const t=K(),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=S.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(),F(r.id))}}break;case"Enter":case" ":if(T&&e.preventDefault(),O||" "!==e.key||e.preventDefault(),G)return;if(T)if(0!==V||C)J(!H),E(b,!H);else{const e=(null==_?void 0:_.id)===b;k(e?null:{id:b,label:g,children:a})}else x&&"Enter"===e.key&&(window.location.href=x)}},U=e=>{null==O||O(e),P(!1)};return e.jsx(r.StyledResponsiveMenuListItem,h(v({},i.default(M)),{children:T?e.jsxs(e.Fragment,{children:[e.jsxs(r.StyledResponsiveMenuItem,h(v({active:B,"aria-expanded":C&&0===V?void 0:B||H,"aria-controls":B||H?C?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:!!j||!!p,id:b,onClick:()=>{if(!G){if(0!==V||C)J(!H),E(b,!H);else{const e=(null==_?void 0:_.id)===b;k(e?null:{id:b,label:g,children:a})}F(b)}},onKeyDown:e=>{C||Q(e)},onFocus:()=>F(b),ref:d,responsive:C,tabIndex:G?-1:0,type:"button"},M),{children:[e.jsx(y,{customIcon:p,depth:V,hasChildren:!0,icon:j,label:g,responsive:C}),!G&&e.jsx(r.StyledIcon,{"data-component":"responsive-vertical-menu-expander-icon","data-role":"responsive-vertical-menu-expander-icon",depth:V,expanded:H||B,reduceMotion:!!D,type:V>=1?"chevron_down_thick":"chevron_right_thick"})]})),H&&e.jsx(r.StyledNestedMenuWrapper,{"data-component":`${b}-nested-menu-wrapper`,"data-role":`${b}-nested-menu-wrapper`,depth:V,hasIcon:!!j||!!p,id:`${b}-nested-menu-wrapper`,responsive:C,children:e.jsx(r.StyledNestedMenu,{"data-component":`${b}-nested-menu`,"data-role":`${b}-nested-menu`,depth:V,hasIcon:!!j||!!p,id:`${b}-nested-menu`,responsive:C,children:e.jsx(m.Provider,{value:b,children:a})})}),B&&!C&&e.jsx(n.StyledResponsiveMenu,{"data-component":"responsive-vertical-menu-secondary","data-role":"responsive-vertical-menu-secondary",height:A||"100%",id:"responsive-vertical-menu-secondary",left:q,menu:"secondary",reduceMotion:!1,ref:z,responsive:!1,tabIndex:-1,top:R,width:$,children:_.children})]}):(()=>{const t=v({"data-component":`responsive-vertical-menu-item-${b}`,"data-depth":V,"data-role":`responsive-vertical-menu-item-${b}`,depth:V,href:x,id:b,onClick:U,onFocus:()=>F(b),onKeyDown:e=>{C||Q(e)},rel:I,responsive:C,tabIndex:0,target:w},M),n=e.jsx(y,{customIcon:p,depth:V,hasChildren:!1,icon:j,label:g,responsive:C});return O&&!x?e.jsx(r.StyledResponsiveMenuActionButton,h(v({ref:d},t),{children:n})):e.jsx(r.StyledResponsiveMenuActionLink,h(v({ref:d},t),{children:n}))})()}))})),b=n=>{var{children:r,id:i,label:l}=n,c=f(n,["children","id","label"]);const a=o.useDepth(),u=t.useRef(null),{registerMenuItem:p}=s.useMenuFocus(),y=t.useContext(m),b=t.useRef(i||d.default());return t.useEffect((()=>{const e=b.current;p(e,u,y)}),[y,p]),e.jsx(j,h(v({id:b.current,label:l},c),{"data-depth":a,ref:u,children:r&&e.jsx(m.Provider,{value:i,children:e.jsx(o.IncreaseDepth,{children:r})})}))};exports.ResponsiveVerticalMenuItem=b,exports.default=b;
+"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");require("../../../../style/utils/filter-styled-system-padding-props.js");var i=require("../../../../style/utils/filter-styled-system-margin-props.js"),s=require("../__internal__/depth.context.js"),o=require("../responsive-vertical-menu.context.js"),l=require("../../../icon/icon.component.js"),c=require("../../../../__internal__/utils/helpers/guid/index.js"),a=require("../../../../__internal__/utils/helpers/events/events.js");function d(e){return e&&e.__esModule?e:{default:e}}var u=d(t);function p(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function v(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){p(e,t,n[t])}))}return e}function h(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 m(e,t){if(null==e)return{};var n,r,i=function(e,t){if(null==e)return{};var n,r,i={},s=Object.keys(e);for(r=0;r<s.length;r++)n=s[r],t.indexOf(n)>=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(r=0;r<s.length;r++)n=s[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}const f=t.createContext(void 0),y=({customIcon:t,depth:n,hasChildren:i,icon:s,label:o,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,o]}):e.jsxs(r.StyledMenuItemContent,{"data-component":"responsive-vertical-menu-icon","data-role":"responsive-vertical-menu-icon",depth:n,hasChildren:i,icon:!!s,responsive:c,children:[s&&e.jsx(l.default,{type:s}),o]}),j=t.forwardRef(((l,c)=>{var{children:d,customIcon:p,icon:j,id:b,href:x,label:O,onClick:g,rel:w,target:I}=l,M=m(l,["children","customIcon","icon","id","href","label","onClick","rel","target"]);const{activeMenuItem:_,responsiveMode:S,setActive:P,setActiveMenuItem:C,reducedMotion:q,left:D,top:R,width:$,height:k}=o.useResponsiveVerticalMenu(),K=s.useDepth(),A=(null==_?void 0:_.id)===b,E=u.default.Children.count(d)>0,L=t.useRef(null),N=t.useMemo((()=>S&&0===K),[K,S]),[V,B]=t.useState(N&&E||K>=2),F=e=>{if(a.default.isEnterKey(e)||a.default.isSpaceKey(e)){if(E&&e.preventDefault(),!g&&a.default.isSpaceKey(e)&&e.preventDefault(),N)return;if(E)if(0!==K||S)B(!V);else{const e=(null==_?void 0:_.id)===b;C(e?null:{id:b,label:O,children:d})}}},W=e=>{null==g||g(e),P(!1)};return e.jsx(r.StyledResponsiveMenuListItem,h(v({},i.default(M)),{children:E?e.jsxs(e.Fragment,{children:[e.jsxs(r.StyledResponsiveMenuItem,h(v({active:A,"aria-expanded":S&&0===K?void 0:A||V,"aria-controls":A||V?S?0===K?void 0:`${b}-nested-menu-wrapper`:"responsive-vertical-menu-secondary":void 0,"data-component":`responsive-vertical-menu-item-${b}`,"data-depth":K,"data-role":`responsive-vertical-menu-item-${b}`,depth:K,hasIcon:!!j||!!p,id:b,onClick:()=>{if(!N)if(0!==K||S)B(!V);else{const e=(null==_?void 0:_.id)===b;C(e?null:{id:b,label:O,children:d})}},onKeyDown:e=>{S||F(e)},ref:c,responsive:S,tabIndex:N?-1:0,type:"button"},M),{children:[e.jsx(y,{customIcon:p,depth:K,hasChildren:!0,icon:j,label:O,responsive:S}),!N&&e.jsx(r.StyledIcon,{"data-component":"responsive-vertical-menu-expander-icon","data-role":"responsive-vertical-menu-expander-icon",depth:K,expanded:V||A,reduceMotion:!!q,type:K>=1?"chevron_down_thick":"chevron_right_thick"})]})),V&&e.jsx(r.StyledNestedMenuWrapper,{"data-component":`${b}-nested-menu-wrapper`,"data-role":`${b}-nested-menu-wrapper`,depth:K,hasIcon:!!j||!!p,id:`${b}-nested-menu-wrapper`,responsive:S,children:e.jsx(r.StyledNestedMenu,{"data-component":`${b}-nested-menu`,"data-role":`${b}-nested-menu`,depth:K,hasIcon:!!j||!!p,id:`${b}-nested-menu`,responsive:S,children:e.jsx(f.Provider,{value:b,children:d})})}),A&&!S&&e.jsx(n.StyledResponsiveMenu,{"data-component":"responsive-vertical-menu-secondary","data-role":"responsive-vertical-menu-secondary",height:k||"100%",id:"responsive-vertical-menu-secondary",left:D,menu:"secondary",reduceMotion:!1,ref:L,responsive:!1,tabIndex:-1,top:R,width:$,children:_.children})]}):(()=>{const t=v({"data-component":`responsive-vertical-menu-item-${b}`,"data-depth":K,"data-role":`responsive-vertical-menu-item-${b}`,depth:K,href:x,id:b,onClick:W,onKeyDown:e=>{S||F(e)},rel:w,responsive:S,tabIndex:0,target:I},M),n=e.jsx(y,{customIcon:p,depth:K,hasChildren:!1,icon:j,label:O,responsive:S});return g&&!x?e.jsx(r.StyledResponsiveMenuActionButton,h(v({ref:c},t),{children:n})):e.jsx(r.StyledResponsiveMenuActionLink,h(v({ref:c},t),{children:n}))})()}))})),b=n=>{var{children:r,id:i,label:o}=n,l=m(n,["children","id","label"]);const a=s.useDepth(),d=t.useRef(null),u=t.useRef(i||c.default());return e.jsx(j,h(v({id:u.current,label:o},l),{"data-depth":a,ref:d,children:r&&e.jsx(f.Provider,{value:i,children:e.jsx(s.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("../../../__internal__/modal/modal.component.js"),l=require("../../../hooks/__internal__/useIsAboveBreakpoint/useIsAboveBreakpoint.js"),u=require("../../../hooks/useMediaQuery/useMediaQuery.js"),c=require("../../../hooks/__internal__/useLocale/useLocale.js"),d=require("../../../__internal__/focus-trap/focus-trap.component.js"),p=require("../../../__internal__/utils/helpers/tags/tags.js");function v(e){return e&&e.__esModule?e:{default:e}}var f=v(r);function h(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function m(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},n=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),n.forEach((function(r){h(e,r,t[r])}))}return e}function y(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})),e}function b(e,r){if(null==e)return{};var t,n,i=function(e,r){if(null==e)return{};var t,n,i={},o=Object.keys(e);for(n=0;n<o.length;n++)t=o[n],r.indexOf(t)>=0||(i[t]=e[t]);return i}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)t=o[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(i[t]=e[t])}return i}const j=r.forwardRef(((t,n)=>{var v,{children:h,height:j,responsiveBreakpoint:x=700,width:g,launcherButtonDataProps:O}=t,_=b(t,["children","height","responsiveBreakpoint","width","launcherButtonDataProps"]);const w=c.default(),{active:M,activeMenuItem:k,buttonRef:P,containerRef:L,menuRef:R,responsiveMode:S,setActive:E,setActiveMenuItem:q,setReducedMotion:B,setResponsiveMode:C,setLeft:D,setTop:I}=i.useResponsiveVerticalMenu(),[A,T]=r.useState(0),V=l.default(x),[z,$]=r.useState("100%"),G=!u.default("screen and (prefers-reduced-motion: no-preference)"),Q=r.useRef(null),{current:F}=R,{current:H}=P;r.useImperativeHandle(n,(()=>({focusLaunchButton(){null==H||H.focus({preventScroll:!0})}})),[H]);const W=r.useCallback((()=>{if(M&&S){const e=F||document.querySelector("[id='responsive-vertical-menu-primary']");e&&$(`${e.getBoundingClientRect().width}px`)}D(k&&F?`${F.getBoundingClientRect().right}px`:"auto"),I(k&&H?`${H.getBoundingClientRect().bottom}px`:"auto")}),[M,S,k,F,H,D,I]);r.useLayoutEffect((()=>(W(),window.addEventListener("resize",W),()=>{var e;null===(e=window)||void 0===e||e.removeEventListener("resize",W)})),[M,W,F,S]),r.useEffect((()=>{const e=L.current,r=r=>{!M||S||(null==e?void 0:e.contains(r.relatedTarget))||E(!1)},t=e=>{M&&!S&&"Escape"===e.key&&(e.preventDefault(),E(!1))};return null==e||e.addEventListener("focusout",r),document.addEventListener("keydown",t),()=>{null==e||e.removeEventListener("focusout",r),document.removeEventListener("keydown",t)}}),[M,L,S,E]),r.useEffect((()=>{null==B||B(G),null==C||C(!V)}),[V,G,B,C]);const J=r.useCallback((e=>{if(!e)return 0;if(f.default.isValidElement(e))return 1+J(e.props.children);const r=f.default.Children.toArray(e);return r.length?r.reduce(((e,r)=>f.default.isValidElement(r)?e+1+J(r.props.children):e),0):0}),[]);return r.useEffect((()=>{const e=A,r=J(h);e!==r&&(T(r),q(null))}),[A,h,J,q]),e.jsxs("div",{ref:L,children:[M&&!S&&e.jsx(o.StyledBackdrop,{onMouseDown:e=>{e.preventDefault(),E(!1)}}),e.jsx(o.StyledButton,m({active:M,buttonType:"tertiary",iconType:"squares_nine",id:"responsive-vertical-menu-launcher",onClick:()=>{E((e=>!e)),q(null)},ref:P},p.default("responsive-vertical-menu-launcher",m({"data-role":"responsive-vertical-menu-launcher"},O)),(()=>{var e,r;return S?{"aria-label":null===(r=w.verticalMenu.ariaLabels)||void 0===r?void 0:r.responsiveMenuLauncher()}:{"aria-expanded":M,"aria-controls":"responsive-vertical-menu-primary","aria-label":null===(e=w.verticalMenu.ariaLabels)||void 0===e?void 0:e.responsiveMenuLauncher()}})())),S&&e.jsx(a.default,{open:M,children:e.jsx(d.default,{wrapperRef:Q,isOpen:M,children:e.jsxs(o.ModalContainer,y(m({ref:Q,width:z,tabIndex:-1,id:"responsive-vertical-menu-dialog"},(()=>{var e;return{role:"dialog","aria-modal":!0,"aria-label":null===(e=w.verticalMenu.ariaLabels)||void 0===e?void 0:e.responsiveMenuAria()}})()),{children:[e.jsx(s.Box,{boxSizing:"border-box",display:"flex",justifyContent:"flex-end",width:"100%",backgroundColor:"var(--colorsGray850)",p:1,children:e.jsx(o.StyledCloseButton,{"aria-label":null===(v=w.verticalMenu.ariaLabels)||void 0===v?void 0:v.responsiveMenuCloseButton(),"data-component":"responsive-vertical-menu-close","data-role":"responsive-vertical-menu-close",iconType:"close",size:"small",buttonType:"tertiary",onClick:()=>{E(!1),q(null)}})}),e.jsx(o.StyledResponsiveMenu,{height:j,id:"responsive-vertical-menu-primary",menu:"primary",reduceMotion:G,ref:R,responsive:!0,tabIndex:-1,top:"48px",width:g,children:h})]}))})}),M&&!S&&e.jsx(o.StyledGlobalVerticalMenuWrapper,y(m({},_,p.default("responsive-vertical-menu",_)),{children:e.jsx(o.StyledResponsiveMenu,{childOpen:!!k,"data-component":"responsive-vertical-menu-primary","data-role":"responsive-vertical-menu-primary",height:j||"100%",id:"responsive-vertical-menu-primary",menu:"primary",reduceMotion:G,ref:R,responsive:!1,tabIndex:-1,width:g,children:h})}))]})})),x=r.forwardRef(((r,o)=>{var{children:s,width:a,height:l}=r,u=b(r,["children","width","height"]);return e.jsx(t.DepthProvider,{children:e.jsx(n.MenuFocusProvider,{children:e.jsx(i.ResponsiveVerticalMenuProvider,{width:a,height:l,children:e.jsx(j,y(m({ref:o,width:a,height:l},u),{children:s}))})})})}));exports.ResponsiveVerticalMenu=x,exports.default=x;
+"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("./responsive-vertical-menu.context.js"),i=require("./responsive-vertical-menu.style.js"),o=require("../../box/box.component.js"),s=require("../../../__internal__/modal/modal.component.js"),a=require("../../../hooks/__internal__/useIsAboveBreakpoint/useIsAboveBreakpoint.js"),l=require("../../../hooks/useMediaQuery/useMediaQuery.js"),u=require("../../../hooks/__internal__/useLocale/useLocale.js"),c=require("../../../__internal__/focus-trap/focus-trap.component.js"),d=require("../../../__internal__/utils/helpers/tags/tags.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 h(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 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 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 b=r.forwardRef(((t,p)=>{var f,{children:b,height:j,responsiveBreakpoint:g=700,width:x,launcherButtonDataProps:O}=t,w=y(t,["children","height","responsiveBreakpoint","width","launcherButtonDataProps"]);const _=u.default(),{active:M,activeMenuItem:k,buttonRef:P,containerRef:L,menuRef:R,responsiveMode:S,setActive:E,setActiveMenuItem:B,setReducedMotion:q,setResponsiveMode:C,setLeft:D,setTop:I}=n.useResponsiveVerticalMenu(),[A,T]=r.useState(0),V=a.default(g),[z,$]=r.useState("100%"),G=!l.default("screen and (prefers-reduced-motion: no-preference)"),Q=r.useRef(null),{current:H}=R,{current:W}=P;r.useImperativeHandle(p,(()=>({focusLaunchButton(){null==W||W.focus({preventScroll:!0})}})),[W]);const F=r.useCallback((()=>{if(M&&S){const e=H||document.querySelector("[id='responsive-vertical-menu-primary']");e&&$(`${e.getBoundingClientRect().width}px`)}D(k&&H?`${H.getBoundingClientRect().right}px`:"auto"),I(k&&W?`${W.getBoundingClientRect().bottom}px`:"auto")}),[M,S,k,H,W,D,I]);r.useLayoutEffect((()=>(F(),window.addEventListener("resize",F),()=>{var e;null===(e=window)||void 0===e||e.removeEventListener("resize",F)})),[M,F,H,S]),r.useEffect((()=>{const e=L.current,r=r=>{!M||S||(null==e?void 0:e.contains(r.relatedTarget))||E(!1)},t=e=>{M&&!S&&"Escape"===e.key&&(e.preventDefault(),E(!1))};return null==e||e.addEventListener("focusout",r),document.addEventListener("keydown",t),()=>{null==e||e.removeEventListener("focusout",r),document.removeEventListener("keydown",t)}}),[M,L,S,E]),r.useEffect((()=>{null==q||q(G),null==C||C(!V)}),[V,G,q,C]);const J=r.useCallback((e=>{if(!e)return 0;if(v.default.isValidElement(e))return 1+J(e.props.children);const r=v.default.Children.toArray(e);return r.length?r.reduce(((e,r)=>v.default.isValidElement(r)?e+1+J(r.props.children):e),0):0}),[]);return r.useEffect((()=>{const e=A,r=J(b);e!==r&&(T(r),B(null))}),[A,b,J,B]),e.jsxs("div",{ref:L,children:[M&&!S&&e.jsx(i.StyledBackdrop,{onMouseDown:e=>{e.preventDefault(),E(!1)}}),e.jsx(i.StyledButton,h({active:M,buttonType:"tertiary",iconType:"squares_nine",id:"responsive-vertical-menu-launcher",onClick:()=>{E((e=>!e)),B(null)},ref:P},d.default("responsive-vertical-menu-launcher",h({"data-role":"responsive-vertical-menu-launcher"},O)),(()=>{var e,r;return S?{"aria-label":null===(r=_.verticalMenu.ariaLabels)||void 0===r?void 0:r.responsiveMenuLauncher()}:{"aria-expanded":M,"aria-controls":"responsive-vertical-menu-primary","aria-label":null===(e=_.verticalMenu.ariaLabels)||void 0===e?void 0:e.responsiveMenuLauncher()}})())),S&&e.jsx(s.default,{open:M,children:e.jsx(c.default,{wrapperRef:Q,isOpen:M,children:e.jsxs(i.ModalContainer,m(h({ref:Q,width:z,tabIndex:-1,id:"responsive-vertical-menu-dialog"},(()=>{var e;return{role:"dialog","aria-modal":!0,"aria-label":null===(e=_.verticalMenu.ariaLabels)||void 0===e?void 0:e.responsiveMenuAria()}})()),{children:[e.jsx(o.Box,{boxSizing:"border-box",display:"flex",justifyContent:"flex-end",width:"100%",backgroundColor:"var(--colorsGray850)",p:1,children:e.jsx(i.StyledCloseButton,{"aria-label":null===(f=_.verticalMenu.ariaLabels)||void 0===f?void 0:f.responsiveMenuCloseButton(),"data-component":"responsive-vertical-menu-close","data-role":"responsive-vertical-menu-close",iconType:"close",size:"small",buttonType:"tertiary",onClick:()=>{E(!1),B(null)}})}),e.jsx(i.StyledResponsiveMenu,{height:j,id:"responsive-vertical-menu-primary",menu:"primary",reduceMotion:G,ref:R,responsive:!0,tabIndex:-1,top:"48px",width:x,children:b})]}))})}),M&&!S&&e.jsx(i.StyledGlobalVerticalMenuWrapper,m(h({},w,d.default("responsive-vertical-menu",w)),{children:e.jsx(i.StyledResponsiveMenu,{childOpen:!!k,"data-component":"responsive-vertical-menu-primary","data-role":"responsive-vertical-menu-primary",height:j||"100%",id:"responsive-vertical-menu-primary",menu:"primary",reduceMotion:G,ref:R,responsive:!1,tabIndex:-1,width:x,children:b})}))]})})),j=r.forwardRef(((r,i)=>{var{children:o,width:s,height:a}=r,l=y(r,["children","width","height"]);return e.jsx(t.DepthProvider,{children:e.jsx(n.ResponsiveVerticalMenuProvider,{width:s,height:a,children:e.jsx(b,m(h({ref:i,width:s,height:a},l),{children:o}))})})}));exports.ResponsiveVerticalMenu=j,exports.default=j;

package/package.json

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

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

@@ -1,24 +0,0 @@
-/**
- * Provides context for managing focus within a menu component.
- * This context allows for tracking expanded items, focusing on specific items,
- * and moving focus in various directions (next, previous, parent, first child, last child).
- */
-import React, { ReactNode, RefObject } from "react";
-interface MenuFocusContextType {
-    expandedItems: string[];
-    expandItem: (id: string, expand: boolean) => void;
-    focusedItemId: string | null;
-    getRegisteredItems: () => Array<{
-        id: string;
-        ref: RefObject<HTMLElement>;
-        parentId?: string;
-    }>;
-    focusItem: (id: string) => void;
-    moveFocus: (direction: "next" | "prev" | "parent" | "lastChild") => void;
-    registerMenuItem: (id: string, ref: RefObject<HTMLElement>, parentId?: string) => void;
-}
-export declare const useMenuFocus: () => MenuFocusContextType;
-export declare const MenuFocusProvider: ({ children }: {
-    children: ReactNode;
-}) => React.JSX.Element;
-export {};

package/esm/components/vertical-menu/responsive-vertical-menu/__internal__/focus.context.js

@@ -1 +0,0 @@
-import{jsx as e}from"react/jsx-runtime";import{useContext as r,createContext as t,useState as n,useRef as d,useCallback as s}from"react";import i from"../../../../__internal__/utils/logger/index.js";const c=t(void 0),u=()=>r(c)||(i.error("useMenuFocus must be used within a MenuFocusProvider"),{expandedItems:[],expandItem:()=>{},focusedItemId:null,getRegisteredItems:()=>[],focusItem:()=>{},moveFocus:()=>{},registerMenuItem:()=>{}}),l=({children:r})=>{const[t,i]=n([]),[u,l]=n(null),o=d(new Map),I=s(((e,r,t)=>{if(o.current.set(e,{ref:r,parentId:t,childIds:[]}),t){const r=o.current.get(t);null==r||r.childIds.push(e)}}),[]),a=s((()=>Array.from(o.current.entries()).map((([e,{ref:r,parentId:t,childIds:n}])=>({id:e,ref:r,parentId:t,childIds:n})))),[]),f=s((e=>{var r;const t=o.current.get(e);(null==t||null===(r=t.ref)||void 0===r?void 0:r.current)&&(t.ref.current.focus(),l(e))}),[]),m=s(((e,r)=>{i(r?r=>[...r,e]:r=>r.filter((r=>r!==e)))}),[]),h=s((e=>{if(!u)return;const r=o.current.get(u);if(!r)return;let n=[],d=[],s=-1;switch(e){case"parent":r.parentId&&f(r.parentId);break;case"lastChild":if(r.childIds.length>0){const e=r.childIds[r.childIds.length-1];if(e)if(t.includes(e)){const r=a().find((r=>r.id===e));r&&f(r.childIds[r.childIds.length-1])}else f(e)}break;default:if(n=Array.from(o.current.keys()),d=n.filter((e=>{const r=o.current.get(e);return!r||!r.parentId||t.includes(r.parentId)})),s=d.indexOf(u),-1!==s){const r="next"===e?(s+1)%d.length:(s-1+d.length)%d.length;f(d[r])}}}),[u,f,t,m,a]),p={expandedItems:t,expandItem:m,focusedItemId:u,focusItem:f,getRegisteredItems:a,registerMenuItem:I,moveFocus:h};return e(c.Provider,{value:p,children:r})};export{l as MenuFocusProvider,u as useMenuFocus};

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

@@ -1,24 +0,0 @@
-/**
- * Provides context for managing focus within a menu component.
- * This context allows for tracking expanded items, focusing on specific items,
- * and moving focus in various directions (next, previous, parent, first child, last child).
- */
-import React, { ReactNode, RefObject } from "react";
-interface MenuFocusContextType {
-    expandedItems: string[];
-    expandItem: (id: string, expand: boolean) => void;
-    focusedItemId: string | null;
-    getRegisteredItems: () => Array<{
-        id: string;
-        ref: RefObject<HTMLElement>;
-        parentId?: string;
-    }>;
-    focusItem: (id: string) => void;
-    moveFocus: (direction: "next" | "prev" | "parent" | "lastChild") => void;
-    registerMenuItem: (id: string, ref: RefObject<HTMLElement>, parentId?: string) => void;
-}
-export declare const useMenuFocus: () => MenuFocusContextType;
-export declare const MenuFocusProvider: ({ children }: {
-    children: ReactNode;
-}) => React.JSX.Element;
-export {};

package/lib/components/vertical-menu/responsive-vertical-menu/__internal__/focus.context.js

@@ -1 +0,0 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("react"),r=require("../../../../__internal__/utils/logger/index.js");const s=t.createContext(void 0);exports.MenuFocusProvider=({children:r})=>{const[n,u]=t.useState([]),[d,c]=t.useState(null),l=t.useRef(new Map),i=t.useCallback(((e,t,r)=>{if(l.current.set(e,{ref:t,parentId:r,childIds:[]}),r){const t=l.current.get(r);null==t||t.childIds.push(e)}}),[]),a=t.useCallback((()=>Array.from(l.current.entries()).map((([e,{ref:t,parentId:r,childIds:s}])=>({id:e,ref:t,parentId:r,childIds:s})))),[]),o=t.useCallback((e=>{var t;const r=l.current.get(e);(null==r||null===(t=r.ref)||void 0===t?void 0:t.current)&&(r.ref.current.focus(),c(e))}),[]),I=t.useCallback(((e,t)=>{u(t?t=>[...t,e]:t=>t.filter((t=>t!==e)))}),[]),f=t.useCallback((e=>{if(!d)return;const t=l.current.get(d);if(!t)return;let r=[],s=[],u=-1;switch(e){case"parent":t.parentId&&o(t.parentId);break;case"lastChild":if(t.childIds.length>0){const e=t.childIds[t.childIds.length-1];if(e)if(n.includes(e)){const t=a().find((t=>t.id===e));t&&o(t.childIds[t.childIds.length-1])}else o(e)}break;default:if(r=Array.from(l.current.keys()),s=r.filter((e=>{const t=l.current.get(e);return!t||!t.parentId||n.includes(t.parentId)})),u=s.indexOf(d),-1!==u){const t="next"===e?(u+1)%s.length:(u-1+s.length)%s.length;o(s[t])}}}),[d,o,n,I,a]),h={expandedItems:n,expandItem:I,focusedItemId:d,focusItem:o,getRegisteredItems:a,registerMenuItem:i,moveFocus:f};return e.jsx(s.Provider,{value:h,children:r})},exports.useMenuFocus=()=>t.useContext(s)||(r.default.error("useMenuFocus must be used within a MenuFocusProvider"),{expandedItems:[],expandItem:()=>{},focusedItemId:null,getRegisteredItems:()=>[],focusItem:()=>{},moveFocus:()=>{},registerMenuItem:()=>{}});