carbon-react 162.12.0-beta.1 → 162.13.0

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

@@ -0,0 +1,8 @@
+import { MarginProps } from "styled-system";
+interface StyledResponsiveVerticalMenuDividerProps {
+    depth: number;
+    responsive?: boolean;
+}
+export declare const StyledResponsiveVerticalMenuDivider: import("styled-components").StyledComponent<"div", any, StyledResponsiveVerticalMenuDividerProps, never>;
+export declare const StyledHr: import("styled-components").StyledComponent<"hr", any, MarginProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>, never>;
+export {};

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

@@ -0,0 +1 @@
+import e from"styled-components";import{margin as o}from"styled-system";const i=e.div.withConfig({displayName:"responsive-vertical-menu-divider.style__StyledResponsiveVerticalMenuDivider",componentId:"carbon_v162_12_0__sc-681f134d-0"})([""," ",";"],o,(({depth:e,responsive:o})=>e>0&&o&&"max-width: 88%")),r=e.hr.withConfig({displayName:"responsive-vertical-menu-divider.style__StyledHr",componentId:"carbon_v162_12_0__sc-681f134d-1"})(["border-color:#ffffff33;border-bottom:1px;"]);export{r as StyledHr,i as StyledResponsiveVerticalMenuDivider};

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

@@ -0,0 +1,2 @@
+export { default as ResponsiveVerticalMenuItem } from "./responsive-vertical-menu-item.component";
+export type { ResponsiveVerticalMenuItemProps, ResponsiveVerticalMenuItemClickEvent, } from "./responsive-vertical-menu-item.component";

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

@@ -0,0 +1 @@
+export{ResponsiveVerticalMenuItem}from"./responsive-vertical-menu-item.component.js";

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

@@ -0,0 +1,33 @@
+import React, { ReactNode } from "react";
+import { MarginProps, PaddingProps } from "styled-system";
+import { IconType } from "../../../icon";
+type AriaCurrent = Pick<React.HTMLAttributes<HTMLElement>, "aria-current">["aria-current"];
+export type ResponsiveVerticalMenuItemClickEvent = React.MouseEvent<HTMLButtonElement | HTMLAnchorElement> | React.KeyboardEvent<HTMLButtonElement | HTMLAnchorElement>;
+interface BaseItemProps extends MarginProps, PaddingProps {
+    /** The content of the menu item. This will render the menu item as a parent menu. */
+    children?: ReactNode;
+    /** Custom icon to be displayed. Takes precedence over `icon` if both are specified. */
+    customIcon?: ReactNode;
+    /** External URL or anchor link for standard HTML navigation. Providing this will render the menu item as an anchor link. */
+    href?: string;
+    /** The Carbon icon to be displayed. Defers to `customIcon` if both are defined. */
+    icon?: IconType;
+    /** The unique identifier for the menu item. */
+    id: string;
+    /** The label for the menu item. */
+    label: React.ReactNode;
+    /** A custom click handler to run when an anchor link is clicked */
+    onClick?: (event: ResponsiveVerticalMenuItemClickEvent) => void;
+    /** The rel attribute to be used for the underlying <a> tag */
+    rel?: string;
+    /** The target to use for the menu item. */
+    target?: string;
+    /** Marks the element as the current item within a navigation context. */
+    ariaCurrent?: AriaCurrent;
+}
+export interface ResponsiveVerticalMenuItemProps extends Omit<BaseItemProps, "id"> {
+    /** The unique identifier for the menu item. */
+    id?: string;
+}
+export declare const ResponsiveVerticalMenuItem: ({ children, id, label, ...props }: ResponsiveVerticalMenuItemProps) => React.JSX.Element;
+export default ResponsiveVerticalMenuItem;

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

@@ -0,0 +1 @@
+import{jsx as e,jsxs as n,Fragment as r}from"react/jsx-runtime";import t,{useRef as i,forwardRef as o,useMemo as c,useState as l,createContext 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"../../../icon/icon.style.js";import _ from"../../../../__internal__/utils/helpers/guid/index.js";import P from"../../../../__internal__/utils/helpers/events/events.js";function x(e,n,r){return n in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,e}function I(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{},t=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(t=t.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),t.forEach((function(n){x(e,n,r[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 r=Object.getOwnPropertySymbols(e);n.push.apply(n,r)}return n}(Object(n)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(n,r))})),e}function $(e,n){if(null==e)return{};var r,t,i=function(e,n){if(null==e)return{};var r,t,i={},o=Object.keys(e);for(t=0;t<o.length;t++)r=o[t],n.indexOf(r)>=0||(i[r]=e[r]);return i}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(t=0;t<o.length;t++)r=o[t],n.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}const k=s(void 0),D=({customIcon:r,depth:t,hasChildren:i,icon:o,label:c,responsive:l})=>n(h,r?{"data-component":"responsive-vertical-menu-custom-icon","data-role":"responsive-vertical-menu-custom-icon",depth:t,hasChildren:i,icon:!0,responsive:l,children:[r,c]}:{"data-component":"responsive-vertical-menu-icon","data-role":"responsive-vertical-menu-icon",depth:t,hasChildren:i,icon:!!o,responsive:l,children:[o&&e(w,{type:o}),c]}),S=o(((o,s)=>{var{children:h,customIcon:j,icon:w,id:_,href:x,label:S,onClick:M,rel:K,target:E,ariaCurrent:A}=o,q=$(o,["children","customIcon","icon","id","href","label","onClick","rel","target","ariaCurrent"]);const{activeMenuItem:z,responsiveMode:B,setActive:F,setActiveMenuItem:G,reducedMotion:H,left:J,top:L,width:N,height:Q}=g(),R=O(),T=(null==z?void 0:z.id)===_,U=t.Children.count(h)>0,V=i(null),W=c((()=>B&&0===R),[R,B]),[X,Y]=l(W&&U||R>=2),Z=e=>{if(P.isEnterKey(e)||P.isSpaceKey(e)){if(U&&e.preventDefault(),!M&&P.isSpaceKey(e)&&e.preventDefault(),W)return;if(U)if(0!==R||B)Y(!X);else{const e=(null==z?void 0:z.id)===_;G(e?null:{id:_,label:S,children:h})}}},ee=e=>{null==M||M(e),F(!1)};return e(d,C(I({},b(q)),{children:U?n(r,{children:[n(p,C(I({active:T,"aria-expanded":B&&0===R?void 0:T||X,"aria-controls":T||X?B?0===R?void 0:`${_}-nested-menu-wrapper`:"responsive-vertical-menu-secondary":void 0,"data-component":`responsive-vertical-menu-item-${_}`,"data-depth":R,"data-role":`responsive-vertical-menu-item-${_}`,depth:R,hasIcon:!!w||!!j,id:_,onClick:()=>{if(!W)if(0!==R||B)Y(!X);else{const e=(null==z?void 0:z.id)===_;G(e?null:{id:_,label:S,children:h})}},onKeyDown:e=>{B||Z(e)},ref:s,responsive:B,tabIndex:W?-1:0,type:"button"},q),{children:[e(D,{customIcon:j,depth:R,hasChildren:!0,icon:w,label:S,responsive:B}),!W&&e(u,{"data-component":"responsive-vertical-menu-expander-icon","data-role":"responsive-vertical-menu-expander-icon",depth:R,expanded:X||T,reduceMotion:!!H,type:R>=1?"chevron_down_thick":"chevron_right_thick"})]})),X&&e(m,{"data-component":`${_}-nested-menu-wrapper`,"data-role":`${_}-nested-menu-wrapper`,depth:R,hasIcon:!!w||!!j,id:`${_}-nested-menu-wrapper`,responsive:B,children:e(v,{"data-component":`${_}-nested-menu`,"data-role":`${_}-nested-menu`,depth:R,hasIcon:!!w||!!j,id:`${_}-nested-menu`,responsive:B,children:e(k.Provider,{value:_,children:h})})}),T&&!B&&e(a,{"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:V,responsive:!1,tabIndex:-1,top:L,width:N,children:z.children})]}):(()=>{const n=I({"data-component":`responsive-vertical-menu-item-${_}`,"data-depth":R,"data-role":`responsive-vertical-menu-item-${_}`,"aria-current":A,depth:R,href:x,id:_,onClick:ee,onKeyDown:e=>{B||Z(e)},rel:K,responsive:B,tabIndex:0,target:E},q),r=e(D,{customIcon:j,depth:R,hasChildren:!1,icon:w,label:S,responsive:B});return e(M&&!x?f:y,C(I({ref:s},n),{children:r}))})()}))})),M=n=>{var{children:r,id:t,label:o}=n,c=$(n,["children","id","label"]);const l=O(),s=i(null),a=i(t||_());return e(S,C(I({id:a.current,label:o},c),{"data-depth":l,ref:s,children:r&&e(k.Provider,{value:t,children:e(j,{children:r})})}))};export{M as ResponsiveVerticalMenuItem,M as default};

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

@@ -0,0 +1,41 @@
+interface StyledMenuItemContentProps {
+    customIcon?: boolean;
+    depth: number;
+    hasChildren?: boolean;
+    icon?: boolean;
+    responsive?: boolean;
+}
+interface StyledResponsiveMenuItemProps {
+    active?: boolean;
+    depth: number;
+    hasIcon?: boolean;
+    responsive?: boolean;
+}
+interface StyledIconProps {
+    depth: number;
+    expanded: boolean;
+    reduceMotion: boolean;
+}
+export declare const StyledIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, StyledIconProps, never>;
+export declare const StyledMenuItemContent: import("styled-components").StyledComponent<"span", any, StyledMenuItemContentProps, never>;
+export declare const StyledNestedMenuWrapper: import("styled-components").StyledComponent<"div", any, {
+    depth: number;
+    hasIcon?: boolean;
+    responsive?: boolean;
+}, never>;
+export declare const StyledNestedMenu: import("styled-components").StyledComponent<"ul", any, {
+    depth: number;
+    hasIcon?: boolean;
+    responsive?: boolean;
+}, 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 StyledResponsiveMenuActionLink: import("styled-components").StyledComponent<"a", any, {
+    depth: number;
+    responsive?: boolean;
+}, never>;
+export declare const StyledResponsiveMenuActionButton: import("styled-components").StyledComponent<"button", any, {
+    depth: number;
+    responsive?: boolean;
+}, never>;
+export {};

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

@@ -0,0 +1 @@
+import e,{css as t}from"styled-components";import{padding as o,margin as n}from"styled-system";import i from"../../../icon/icon.component.js";import"../../../icon/icon.style.js";import a from"../../../../style/utils/add-focus-styling.js";const r=(e,t)=>e&&t?"180deg":"0deg",s=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:var(--spacing100) 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{',"}"],o,a(!0)),c=e(i).withConfig({displayName:"responsive-vertical-menu-item.style__StyledIcon",componentId:"carbon_v162_12_0__sc-ffae1a5b-0"})(["rotate:",";transition:rotate "," ease-in;",";"],(({depth:e,expanded:t})=>r(e,t)),(({reduceMotion:e})=>e?0:"0.2s"),(({depth:e,expanded:o,reduceMotion:n})=>o&&t(["rotate:",";transition:rotate "," ease-out;"],r(e,o),n?0:"0.2s"))),l=e.span.withConfig({displayName:"responsive-vertical-menu-item.style__StyledMenuItemContent",componentId:"carbon_v162_12_0__sc-ffae1a5b-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);}"]),d=e.div.withConfig({displayName:"responsive-vertical-menu-item.style__StyledNestedMenuWrapper",componentId:"carbon_v162_12_0__sc-ffae1a5b-2"})(["box-sizing:border-box;display:flex;justify-content:",";width:100%;",""],(({hasIcon:e,responsive:t})=>e&&t?"flex-end":"flex-start"),(({depth:e,responsive:o})=>1===e&&o&&t(["padding:0 0 0 16px;"]))),p=e.ul.withConfig({displayName:"responsive-vertical-menu-item.style__StyledNestedMenu",componentId:"carbon_v162_12_0__sc-ffae1a5b-3"})(["padding:0;",""],(({depth:e,hasIcon:o,responsive:n})=>t(["width:",";margin-left:var(--spacing400);"," li > a{font-weight:",";}"],e<2&&!o?"100%":"88%",n&&t(["margin-left:",";"],o||1===e?"var(--spacing200)":"0"),1===e?"var(--fontWeights400)":"var(--fontWeights500)"))),v=e.li.withConfig({displayName:"responsive-vertical-menu-item.style__StyledResponsiveMenuListItem",componentId:"carbon_v162_12_0__sc-ffae1a5b-4"})(["list-style:none;"," padding:0;"],n),g=e.button.withConfig({displayName:"responsive-vertical-menu-item.style__StyledResponsiveMenuItem",componentId:"carbon_v162_12_0__sc-ffae1a5b-5"})([""," "," "," ",""],s,(({active:e,responsive:o})=>e&&!o&&t(["background-color:var(--colorsGray850);"])),(({depth:e,responsive:o})=>0===e&&o&&t(["color:var(--colorsUtilityYang080);cursor:default;"])),(({depth:e})=>e>=2&&t(['&{color:var(--colorsUtilityYang080);font-weight:var(--fontWeights400);[data-component="icon"]{color:var(--colorsUtilityYang080);}}']))),m=e.a.withConfig({displayName:"responsive-vertical-menu-item.style__StyledResponsiveMenuActionLink",componentId:"carbon_v162_12_0__sc-ffae1a5b-6"})([""," min-height:40px;text-decoration:none;",""],s,(({depth:e,responsive:o})=>e>=2&&t(["&&{color:var(--colorsUtilityYang080);font-weight:var(--fontWeights400);","}"],o&&e>=3&&t(["margin-left:var(--spacing300);"])))),_=e.button.withConfig({displayName:"responsive-vertical-menu-item.style__StyledResponsiveMenuActionButton",componentId:"carbon_v162_12_0__sc-ffae1a5b-7"})([""," min-height:40px;text-decoration:none;",""],s,(({depth:e,responsive:o})=>e>=2&&t(["&&{color:var(--colorsUtilityYang080);font-weight:var(--fontWeights400);","}"],o&&e>=3&&t(["margin-left:var(--spacing300);"]))));export{c as StyledIcon,l as StyledMenuItemContent,p as StyledNestedMenu,d as StyledNestedMenuWrapper,_ as StyledResponsiveMenuActionButton,m as StyledResponsiveMenuActionLink,g as StyledResponsiveMenuItem,v as StyledResponsiveMenuListItem};

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

@@ -0,0 +1,20 @@
+import React, { ReactNode } from "react";
+import { TagProps } from "../../../__internal__/utils/helpers/tags";
+export interface ResponsiveVerticalMenuProps extends TagProps {
+    /** The content of the menu */
+    children?: ReactNode;
+    /** The height of the primary and secondary menus */
+    height?: string;
+    /** The value (in pixels) at which the ResponsiveVerticalMenu will become responsive/modal */
+    responsiveBreakpoint?: number;
+    /** The width of the primary and secondary menus when in default mode */
+    width?: string;
+    /** Set Menu launcher button data tag props */
+    launcherButtonDataProps?: TagProps;
+}
+export type ResponsiveVerticalMenuHandle = {
+    /** Programmatically focus on the launcher button. */
+    focusLaunchButton: () => void;
+} | null;
+export declare const ResponsiveVerticalMenu: React.ForwardRefExoticComponent<ResponsiveVerticalMenuProps & React.RefAttributes<ResponsiveVerticalMenuHandle>>;
+export default ResponsiveVerticalMenu;

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

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

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

@@ -0,0 +1,40 @@
+import React, { Dispatch, ReactNode, RefObject, SetStateAction } from "react";
+import { IconType } from "../../icon/icon-type";
+export interface ResponsiveVerticalMenuButtonItem {
+    children?: ReactNode;
+    customIcon?: ReactNode;
+    divider?: boolean;
+    href?: string;
+    icon?: IconType;
+    id: string;
+    label?: React.ReactNode;
+}
+export interface MenuContextType {
+    active: boolean;
+    activeMenuItem: ResponsiveVerticalMenuButtonItem | null;
+    buttonRef: RefObject<HTMLButtonElement>;
+    containerRef: RefObject<HTMLDivElement>;
+    menuRef: RefObject<HTMLUListElement>;
+    reducedMotion?: boolean;
+    responsiveMode?: boolean;
+    left: string;
+    top: string;
+    width?: string;
+    height?: string;
+    setActive: Dispatch<SetStateAction<boolean>>;
+    setActiveMenuItem: (item: ResponsiveVerticalMenuButtonItem | null) => void;
+    setReducedMotion?: (reducedMotion: boolean) => void;
+    setResponsiveMode?: (responsiveMode: boolean) => void;
+    setLeft: (left: string) => void;
+    setTop: (top: string) => void;
+}
+export declare const ResponsiveVerticalMenuContext: React.Context<MenuContextType | null>;
+export declare const useResponsiveVerticalMenu: () => MenuContextType;
+export interface ResponsiveVerticalMenuProviderProps {
+    children: ReactNode;
+    /** @private @internal @ignore */
+    width?: string;
+    /** @private @internal @ignore */
+    height?: string;
+}
+export declare const ResponsiveVerticalMenuProvider: ({ children, width, height, }: ResponsiveVerticalMenuProviderProps) => React.JSX.Element;

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

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import{useContext as t,useState as n,useRef as i,createContext as r}from"react";import o from"../../../__internal__/utils/logger/index.js";const s=r(null),u=()=>{const e=t(s);if(null===e)throw new Error("useResponsiveVerticalMenu must be used within a ResponsiveVerticalMenuProvider");return e};let l=!1;const c=({children:r,width:u,height:c})=>{const d=t(s);!l&&null!==d&&(l=!0,o.deprecate("`ResponsiveVerticalMenuProvider` is deprecated and no longer needed for `ResponsiveVerticalMenu`. You can use `ResponsiveVerticalMenu` directly without wrapping it in a provider."));const[a,p]=n(!1),[v,h]=n(null),m=i(null),M=i(null),f=i(null),[R,w]=n(!1),[g,V]=n(!1),[_,x]=n("auto"),[P,b]=n("auto");return e(s.Provider,{value:{active:a,activeMenuItem:v,buttonRef:m,containerRef:M,menuRef:f,reducedMotion:g,responsiveMode:R,left:_,top:P,width:u,height:c,setActive:p,setActiveMenuItem:h,setReducedMotion:V,setResponsiveMode:w,setLeft:x,setTop:b},children:r})};export{s as ResponsiveVerticalMenuContext,c as ResponsiveVerticalMenuProvider,u as useResponsiveVerticalMenu};

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

@@ -0,0 +1,23 @@
+interface StyledResponsiveMenuProps {
+    childOpen?: boolean;
+    height?: string;
+    iconsVisible?: boolean;
+    left?: string;
+    reduceMotion: boolean;
+    responsive?: boolean;
+    menu: "primary" | "secondary" | "tertiary";
+    top?: string;
+    width?: string;
+}
+interface StyledButtonProps {
+    active?: boolean;
+}
+export declare const StyledBackdrop: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ModalContainer: import("styled-components").StyledComponent<"div", any, {
+    width: string;
+}, never>;
+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<"ul", any, StyledResponsiveMenuProps, never>;
+export {};

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

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

package/esm/components/vertical-menu/vertical-menu-full-screen/vertical-menu-full-screen.component.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import { TagProps } from "../../../__internal__/utils/helpers/tags";
+export interface VerticalMenuFullScreenProps extends TagProps {
+    /** An aria-label attribute for the menu */
+    "aria-label"?: string;
+    /** An aria-labelledby attribute for the menu */
+    "aria-labelledby"?: string;
+    /**  Content of the menu - VerticalMenuItem */
+    children: React.ReactNode;
+    /** Whether the menu is open or not */
+    isOpen: boolean;
+    /** A callback to be called when the close icon is clicked or enter is pressed when focused */
+    onClose: (ev: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement> | KeyboardEvent) => void;
+}
+export declare const VerticalMenuFullScreen: ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children, isOpen, onClose, ...rest }: VerticalMenuFullScreenProps) => React.JSX.Element;
+export default VerticalMenuFullScreen;

package/esm/components/vertical-menu/vertical-menu-full-screen/vertical-menu-full-screen.component.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useRef as t,useCallback as o}from"react";import n from"../../../__internal__/utils/helpers/tags/tags.js";import l from"../../../hooks/__internal__/useLocale/useLocale.js";import{Portal as i}from"../../portal/portal.js";import a from"../../../__internal__/focus-trap/focus-trap.component.js";import c from"../../icon-button/icon-button.component.js";import s from"../../icon/icon.component.js";import"../../icon/icon.style.js";import{Box as p}from"../../box/box.component.js";import{StyledVerticalMenuFullScreen as u,StyledList as f}from"../vertical-menu.style.js";import{VerticalMenuProvider as m}from"../__internal__/vertical-menu.context.js";import{getDocument as b}from"../../../__internal__/dom/globals.js";import d from"../../../__internal__/utils/helpers/events/events.js";import y from"../../../hooks/__internal__/useModalManager/useModalManager.js";import O from"../../../hooks/useMediaQuery/useMediaQuery.js";function j(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function _(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},o=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),o.forEach((function(r){j(e,r,t[r])}))}return e}const g=j=>{var{"aria-label":g,"aria-labelledby":h,children:v,isOpen:x,onClose:P}=j,w=function(e,r){if(null==e)return{};var t,o,n=function(e,r){if(null==e)return{};var t,o,n={},l=Object.keys(e);for(o=0;o<l.length;o++)t=l[o],r.indexOf(t)>=0||(n[t]=e[t]);return n}(e,r);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(o=0;o<l.length;o++)t=l[o],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(n[t]=e[t])}return n}(j,["aria-label","aria-labelledby","children","isOpen","onClose"]);const M=l(),S=t(null),k=!O("screen and (prefers-reduced-motion: no-preference)"),C=o((e=>{d.isEscKey(e)&&P(e)}),[P]),E=b();return y({open:x,closeModal:C,modalRef:S,topModalOverride:!0,focusCallToActionElement:null==E?void 0:E.activeElement}),e(i,{children:e(a,{isOpen:x,wrapperRef:S,children:r(u,(D=_({ref:S,isOpen:x,prefersReducedMotion:k,"aria-label":g,"aria-labelledby":h},n("vertical-menu-full-screen",w)),L={children:[e(p,{display:"flex",justifyContent:"flex-end",height:"60px",alignItems:"flex-start",px:"20px",pt:"20px",boxSizing:"border-box",children:e(c,{"aria-label":M.verticalMenuFullScreen.ariaLabels.close(),onClick:P,"data-element":"close",children:e(s,{type:"close",color:"var(--colorsComponentsLeftnavWinterStandardContent)"})})}),e(m,{value:{isFullScreen:!0},children:e(f,{children:v})})]},L=null!=L?L:{},Object.getOwnPropertyDescriptors?Object.defineProperties(D,Object.getOwnPropertyDescriptors(L)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(L)).forEach((function(e){Object.defineProperty(D,e,Object.getOwnPropertyDescriptor(L,e))})),D))})});var D,L};export{g as VerticalMenuFullScreen,g as default};

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

@@ -0,0 +1,5 @@
+import React from "react";
+declare const _default: React.Context<{
+    level: number;
+}>;
+export default _default;

package/esm/components/vertical-menu/vertical-menu-item/__internal__/menu-item.context.js

@@ -0,0 +1 @@
+import e from"react";var t=e.createContext({level:0});export{t as default};

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

@@ -0,0 +1,35 @@
+import React, { ReactNode } from "react";
+import { PaddingProps, MarginProps } from "styled-system";
+import { TagProps } from "../../../__internal__/utils/helpers/tags";
+import { IconType } from "../../icon";
+type AriaCurrent = Pick<React.HTMLAttributes<HTMLElement>, "aria-current">["aria-current"];
+export type VerticalMenuItemClickEvent = React.MouseEvent<HTMLButtonElement | HTMLAnchorElement> | React.KeyboardEvent<HTMLButtonElement | HTMLAnchorElement>;
+export interface VerticalMenuItemProps<T = React.ElementType> extends PaddingProps, MarginProps, TagProps {
+    /** Children of the menu item - another level of VerticalMenuItems */
+    children?: React.ReactNode;
+    /** Custom icon to be displayed. Takes precedence over `iconType` if both are specified. */
+    customIcon?: ReactNode;
+    /** Default open state of the component */
+    defaultOpen?: boolean;
+    /** Title of the menu item */
+    title: string;
+    /** Adornment of the menu item meant to be rendered on the right side */
+    adornment?: React.ReactNode | ((isOpen: boolean) => React.ReactNode);
+    /** The Carbon icon to be displayed. Defers to `customIcon` if both are defined. */
+    iconType?: IconType;
+    /** Whether the menu item is active or not */
+    active?: boolean | ((isOpen: boolean) => boolean);
+    /** Height of the menu item */
+    height?: string;
+    /**  Href, when passed the menu item will be rendered as an anchor tag */
+    href?: string;
+    /** A custom click handler to run when the menu item is clicked */
+    onClick?: (event: VerticalMenuItemClickEvent) => void;
+    /** Optional component to render instead of the default div, useful for rendering router link components */
+    component?: T;
+    /** Marks the element as the current item within a navigation context. */
+    ariaCurrent?: AriaCurrent;
+}
+type InferredComponentProps<T extends React.ElementType> = Omit<React.ComponentProps<T>, keyof VerticalMenuItemProps<T>>;
+export declare const VerticalMenuItem: <T>({ defaultOpen, title, iconType, adornment, children, customIcon, component, active, height, href, onClick, ariaCurrent, ...rest }: T extends React.ElementType ? InferredComponentProps<T> & VerticalMenuItemProps<T> : VerticalMenuItemProps) => React.JSX.Element;
+export default VerticalMenuItem;

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

@@ -0,0 +1 @@
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as r,useContext as n}from"react";import o from"../../../__internal__/utils/helpers/tags/tags.js";import i from"../../../style/utils/filter-styled-system-padding-props.js";import c from"../../../style/utils/filter-styled-system-margin-props.js";import{StyledListItem as l,StyledVerticalMenuItem as a,StyledCustomIconWrapper as p,StyledTitleIcon as s,StyledTitle as u,StyledAdornment as f,StyledChevronIcon as m,StyledList as y}from"../vertical-menu.style.js";import b from"./__internal__/menu-item.context.js";import{useVerticalMenuContext as O}from"../__internal__/vertical-menu.context.js";function h(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function d(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){h(e,t,r[t])}))}return e}function j(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}const g=h=>{var{defaultOpen:g=!1,title:v,iconType:_,adornment:P,children:w,customIcon:x,component:k,active:S,height:C="56px",href:D,onClick:I,ariaCurrent:E}=h,T=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(h,["defaultOpen","title","iconType","adornment","children","customIcon","component","active","height","href","onClick","ariaCurrent"]);const[F,$]=r(g),{level:q}=n(b),{isFullScreen:z}=O(),A="function"==typeof S?S(F):S,B=d(j(d({},D&&{as:"a",href:D},!D&&k&&{as:k,tabIndex:0},!D&&!k&&(w||I)&&{as:"button",type:"button","aria-expanded":F},(D||!k)&&{onClick:e=>{$((e=>!e)),I&&I(e)}}),{"aria-current":E}),T),G=`calc(var(--spacing500) + (${q} * var(--spacing400)))`;return e(l,j(d({},c(T)),{children:[e(a,j(d({height:C,px:G,py:2,active:A},B,i(T),o("vertical-menu-item",T)),{children:[(_||x)&&(x?t(p,{children:x}):_&&t(s,{type:_})),t(u,{children:v}),P&&t(f,{children:"function"==typeof P?P(F):P}),w&&!z&&t(m,{type:F?"chevron_up_thick":"chevron_down_thick"})]})),(F||z)&&t(b.Provider,{value:{level:q+1},children:t(y,{children:w})})]}))};export{g as VerticalMenuItem,g as default};

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

@@ -0,0 +1,13 @@
+import React from "react";
+import { PaddingProps } from "styled-system";
+import { TagProps } from "../../../__internal__/utils/helpers/tags";
+export interface VerticalMenuTriggerProps extends PaddingProps, TagProps {
+    /** Height of the menu trigger */
+    height?: string;
+    /** Title of the menu trigger */
+    children: string;
+    /** Callback passed to the menu trigger */
+    onClick: (ev: React.MouseEvent<HTMLButtonElement>) => void;
+}
+export declare const VerticalMenuTrigger: ({ height, px, py, onClick, children, ...rest }: VerticalMenuTriggerProps) => React.JSX.Element;
+export default VerticalMenuTrigger;

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

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import"react";import t from"../../../__internal__/utils/helpers/tags/tags.js";import r from"../../../style/utils/filter-styled-system-padding-props.js";import{StyledVerticalMenuItem as n,StyledTitle as o}from"../vertical-menu.style.js";function i(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}const c=c=>{var{height:l="40px",px:p=2,py:s=1,onClick:u,children:a}=c,f=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(c,["height","px","py","onClick","children"]);const y=r(f);return e(n,(b=function(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){i(e,t,r[t])}))}return e}({onClick:u,as:"button",height:l,px:p,py:s,tabIndex:0},y,t("vertical-menu-trigger",f)),O=null!=(O={children:e(o,{children:a})})?O:{},Object.getOwnPropertyDescriptors?Object.defineProperties(b,Object.getOwnPropertyDescriptors(O)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(O)).forEach((function(e){Object.defineProperty(b,e,Object.getOwnPropertyDescriptor(O,e))})),b));var b,O};export{c as VerticalMenuTrigger,c as default};

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

@@ -0,0 +1,16 @@
+import React from "react";
+import { TagProps } from "../../__internal__/utils/helpers/tags";
+export interface VerticalMenuProps extends TagProps {
+    /** An aria-label attribute for the menu */
+    "aria-label"?: string;
+    /** An aria-labelledby attribute for the menu */
+    "aria-labelledby"?: string;
+    /** Width of the menu */
+    width?: string;
+    /** Content of the menu - VerticalMenuItem */
+    children: React.ReactNode;
+    /** Height of the menu */
+    height?: string;
+}
+export declare const VerticalMenu: ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, width, children, height, ...rest }: VerticalMenuProps) => React.JSX.Element;
+export default VerticalMenu;

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

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import"react";import r from"../../__internal__/utils/helpers/tags/tags.js";import{StyledVerticalMenu as t,StyledList as n}from"./vertical-menu.style.js";import{VerticalMenuProvider as l}from"./__internal__/vertical-menu.context.js";function i(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}const o=o=>{var c,a,{"aria-label":b,"aria-labelledby":u,width:p="322px",children:f,height:s="100%"}=o,O=function(e,r){if(null==e)return{};var t,n,l=function(e,r){if(null==e)return{};var t,n,l={},i=Object.keys(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||(l[t]=e[t]);return l}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(l[t]=e[t])}return l}(o,["aria-label","aria-labelledby","width","children","height"]);return e(t,(c=function(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){i(e,r,t[r])}))}return e}({$width:p,$height:s,"aria-label":b,"aria-labelledby":u},r("vertical-menu",O)),a=null!=(a={children:e(n,{children:e(l,{value:{isFullScreen:!1},children:f})})})?a:{},Object.getOwnPropertyDescriptors?Object.defineProperties(c,Object.getOwnPropertyDescriptors(a)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(a)).forEach((function(e){Object.defineProperty(c,e,Object.getOwnPropertyDescriptor(a,e))})),c))};export{o as VerticalMenu,o as default};

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

@@ -0,0 +1,31 @@
+import { PaddingProps } from "styled-system";
+export declare const StyledList: import("styled-components").StyledComponent<"ul", any, {}, never>;
+export declare const StyledListItem: import("styled-components").StyledComponent<"li", any, {
+    theme: object;
+}, "theme">;
+interface StyledVerticalMenuProps extends PaddingProps {
+    active?: boolean;
+    height: string;
+}
+export declare const StyledVerticalMenuItem: import("styled-components").StyledComponent<"div", any, {
+    theme: object;
+} & StyledVerticalMenuProps, "theme">;
+export declare const StyledTitle: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const StyledAdornment: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledTitleIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
+export declare const StyledCustomIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledChevronIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
+export declare const StyledVerticalMenu: import("styled-components").StyledComponent<"nav", any, {
+    theme: object;
+} & {
+    $height: string;
+    $width: string;
+}, "theme">;
+interface FullScreenProps {
+    isOpen: boolean;
+    prefersReducedMotion?: boolean;
+}
+export declare const StyledVerticalMenuFullScreen: import("styled-components").StyledComponent<"nav", any, {
+    theme: object;
+} & FullScreenProps, "theme">;
+export {};

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

@@ -0,0 +1 @@
+import e,{css as t}from"styled-components";import{margin as o,padding as n}from"styled-system";import r from"../../style/utils/add-focus-styling.js";import i from"../../style/themes/apply-base-theme.js";import a from"../icon/icon.style.js";import l from"../icon/icon.component.js";const c=e.ul.withConfig({displayName:"vertical-menu.style__StyledList",componentId:"carbon_v162_12_0__sc-f6b4614a-0"})(["display:flex;flex:1;flex-direction:column;min-height:0;list-style:none;margin:0;padding:0;"]),s=e.li.attrs(i).withConfig({displayName:"vertical-menu.style__StyledListItem",componentId:"carbon_v162_12_0__sc-f6b4614a-1"})(["",""],o),d=e.div.attrs(i).withConfig({displayName:"vertical-menu.style__StyledVerticalMenuItem",componentId:"carbon_v162_12_0__sc-f6b4614a-2"})(["min-height:",";width:100%;display:flex;border:none;align-items:center;font-weight:500;font-size:14px;cursor:pointer;color:var(--colorsComponentsLeftnavWinterStandardContent);position:relative;box-sizing:border-box;text-decoration:none;background-color:var(--colorsComponentsLeftnavWinterStandardBackground);"," &:hover{background-color:var(--colorsComponentsLeftnavWinterStandardHover);}&:focus{","}"," ","{width:20px;}"],(({height:e})=>e),n,r(!0),(({active:e})=>e&&t(['&:before{background:var(--colorsComponentsLeftnavWinterStandardSelected);border-radius:var(--borderRadius100);content:"";height:calc(100% - 16px);left:24px;position:absolute;top:8px;width:calc(100% - 48px);z-index:0;}&:hover{&:before{background:var(--colorsComponentsLeftnavWinterStandardHover);}}'])),a),b=e.span.withConfig({displayName:"vertical-menu.style__StyledTitle",componentId:"carbon_v162_12_0__sc-f6b4614a-3"})(["font-weight:500;font-size:14px;line-height:21px;margin:0;z-index:1;text-align:left;"]),p=e.div.withConfig({displayName:"vertical-menu.style__StyledAdornment",componentId:"carbon_v162_12_0__sc-f6b4614a-4"})(["display:flex;align-items:center;justify-content:flex-end;flex:1;"]),m=e(l).withConfig({displayName:"vertical-menu.style__StyledTitleIcon",componentId:"carbon_v162_12_0__sc-f6b4614a-5"})(["margin-right:12px;width:20px;color:var(--colorsComponentsLeftnavWinterStandardContent);"]),_=e.div.withConfig({displayName:"vertical-menu.style__StyledCustomIconWrapper",componentId:"carbon_v162_12_0__sc-f6b4614a-6"})(["margin-right:12px;width:20px;"]),f=e(l).withConfig({displayName:"vertical-menu.style__StyledChevronIcon",componentId:"carbon_v162_12_0__sc-f6b4614a-7"})(["margin-left:auto;padding-left:12px;width:20px;color:var(--colorsComponentsLeftnavWinterStandardContent);"]),g=e.nav.attrs(i).withConfig({displayName:"vertical-menu.style__StyledVerticalMenu",componentId:"carbon_v162_12_0__sc-f6b4614a-8"})(["background-color:rgb(38,38,38);box-sizing:border-box;display:flex;height:",";overflow:auto;padding-block:var(--global-space-layout-3-xs);scrollbar-color:rgb(179,179,179) rgb(77,77,77);width:",";&::-webkit-scrollbar{width:12px;}&::-webkit-scrollbar-track{background-color:rgb(77,77,77);}&::-webkit-scrollbar-thumb{background-color:rgb(179,179,179);}"],(({$height:e})=>e),(({$width:e})=>e)),v=e.nav.attrs(i).withConfig({displayName:"vertical-menu.style__StyledVerticalMenuFullScreen",componentId:"carbon_v162_12_0__sc-f6b4614a-9"})(["display:flex;flex-direction:column;position:fixed;top:0;bottom:0;height:100vh;width:100%;outline:none;padding:var(--global-space-layout-3-xs) 0;overflow:auto;background-color:rgb(38,38,38);box-sizing:border-box;scrollbar-color:rgb(102,132,148) rgb(242,245,246);z-index:",";&::-webkit-scrollbar{width:8px;}&::-webkit-scrollbar-track{background-color:rgb(242,245,246);}&::-webkit-scrollbar-thumb{background-color:rgb(102,132,148);}"," "," "," &::-webkit-scrollbar{width:12px;}"],(({theme:e})=>e.zIndex.fullScreenModal),(({prefersReducedMotion:e})=>!e&&t(["transition:all 0.3s ease;"])),(({isOpen:e})=>e&&t(["visibility:visible;transform:translateX(0);"])),(({isOpen:e})=>!e&&t(["transform:translateX(-100%);visibility:hidden;"])));export{p as StyledAdornment,f as StyledChevronIcon,_ as StyledCustomIconWrapper,c as StyledList,s as StyledListItem,b as StyledTitle,m as StyledTitleIcon,g as StyledVerticalMenu,v as StyledVerticalMenuFullScreen,d as StyledVerticalMenuItem};

package/esm/global.d.ts

@@ -0,0 +1,28 @@
+import { type ModalList } from "./__internal__/modal/modal-manager";
+import { type QueryEntry } from "./hooks/useMediaQuery/useMediaQuery";
+
+declare global {
+  module "*.png";
+  module "*.svg";
+  module "*.txt";
+  interface Window {
+    __CARBON_INTERNALS_MODAL_LIST?: ModalList;
+    __CARBON_INTERNALS_MODAL_SETTER_LIST?: ((
+      topModal: HTMLElement | null,
+    ) => void)[];
+    __CARBON_INTERNALS_SCROLL_BLOCKERS?: {
+      components: {
+        [key: string]: boolean;
+      };
+      originalValues: string[];
+      restoreValues?: (() => void) | null;
+    };
+    __CARBON_INTERNALS_MEDIA_QUERY_CACHE?: Map<string, QueryEntry>;
+  }
+}
+
+declare module "react" {
+  interface HTMLAttributes {
+    inert?: "" | "true" | string;
+  }
+}

package/esm/hooks/__internal__/useAdaptiveSidebarModalFocus/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./useAdaptiveSidebarModalFocus";

package/esm/hooks/__internal__/useAdaptiveSidebarModalFocus/index.js

@@ -0,0 +1 @@
+export{default}from"./useAdaptiveSidebarModalFocus.js";

package/esm/hooks/__internal__/useAdaptiveSidebarModalFocus/useAdaptiveSidebarModalFocus.d.ts

@@ -0,0 +1,2 @@
+declare const useAdaptiveSidebarModalFocus: (closeFunction: () => void) => void;
+export default useAdaptiveSidebarModalFocus;

package/esm/hooks/__internal__/useAdaptiveSidebarModalFocus/useAdaptiveSidebarModalFocus.js

@@ -0,0 +1 @@
+import{useEffect as e}from"react";const t=t=>{e((()=>{const e=()=>t();return document.addEventListener("adaptiveSidebarModalFocusIn",e),()=>{document.removeEventListener("adaptiveSidebarModalFocusIn",e)}}),[t])};export{t as default};

package/esm/hooks/__internal__/useChildButtons/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./useChildButtons";

package/esm/hooks/__internal__/useChildButtons/index.js

@@ -0,0 +1 @@
+export{default}from"./useChildButtons.js";

package/esm/hooks/__internal__/useChildButtons/useChildButtons.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+declare const useChildButtons: (toggleButtonRef: React.RefObject<HTMLButtonElement>, widthRatio?: number) => {
+    showAdditionalButtons: boolean;
+    showButtons: () => void;
+    hideButtons: () => void;
+    buttonNode: React.RefObject<HTMLDivElement>;
+    handleToggleButtonKeyDown: (ev: React.KeyboardEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+    wrapperProps: {
+        "data-element": string;
+        role: string;
+        onKeyDown: (ev: React.KeyboardEvent<HTMLElement>) => void;
+        onBlur: (ev: React.FocusEvent<HTMLElement>) => void;
+        minWidth: number;
+        ref: React.RefObject<HTMLUListElement>;
+    };
+    contextValue: {
+        inSplitButton: boolean;
+        onChildButtonClick: (childOnClick?: React.MouseEventHandler<HTMLButtonElement>) => (ev: React.MouseEvent<HTMLButtonElement>) => void;
+    };
+};
+export default useChildButtons;

package/esm/hooks/__internal__/useChildButtons/useChildButtons.js

@@ -0,0 +1 @@
+import{useState as t,useRef as e,useCallback as n}from"react";import o from"../../../__internal__/utils/helpers/events/events.js";import r from"../useMenuKeyboardNavigation/useMenuKeyboardNavigation.js";const l=(l,u=1)=>{const[i,a]=t(!1),[s,d]=t(0),c=e(null),v=e(null),p=n((()=>{a(!1)}),[]);function f(){a(!0),c.current&&d(u*c.current.getBoundingClientRect().width)}const m=n((()=>{var t;return null===(t=v.current)||void 0===t?void 0:t.querySelectorAll('[data-component="button"]')}),[]),y={"data-element":"additional-buttons",role:"list",onKeyDown:r(l,m,p,i),onBlur:t=>{t.currentTarget.contains(t.relatedTarget)||p()},minWidth:s,ref:v},g={inSplitButton:!0,onChildButtonClick:t=>e=>{var n;null==t||t(e),p(),null===(n=l.current)||void 0===n||n.focus()}};return{showAdditionalButtons:i,showButtons:f,hideButtons:p,buttonNode:c,handleToggleButtonKeyDown:t=>{const e=o.isEnterKey(t)||o.isSpaceKey(t);var n,r;!e&&!o.isDownKey(t)||i||(t.preventDefault(),f()),o.isDownKey(t)&&i&&(t.preventDefault(),null===(r=m())||void 0===r||null===(n=r[0])||void 0===n||n.focus({preventScroll:!0})),e&&i&&(t.preventDefault(),p())},wrapperProps:y,contextValue:g}};export{l as default};

package/esm/hooks/__internal__/useClickAwayListener/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./useClickAwayListener";

package/esm/hooks/__internal__/useClickAwayListener/index.js

@@ -0,0 +1 @@
+export{default}from"./useClickAwayListener.js";

package/esm/hooks/__internal__/useClickAwayListener/useClickAwayListener.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (handleClickAway: (ev: Event) => void, eventTypeId?: "mousedown" | "click") => () => void;
+export default _default;

package/esm/hooks/__internal__/useClickAwayListener/useClickAwayListener.js

@@ -0,0 +1 @@
+import{useRef as e,useCallback as r,useEffect as t}from"react";var n=(n,c="click")=>{const o=e(!1),u=r((e=>{o.current?o.current=!1:n(e)}),[n]),a=r((()=>{o.current=!0}),[]);return t((()=>(document.addEventListener(c,u),function(){document.removeEventListener(c,u)})),[u,c]),a};export{n as default};

package/esm/hooks/__internal__/useDebounce/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./useDebounce";

package/esm/hooks/__internal__/useDebounce/index.js

@@ -0,0 +1 @@
+export{default}from"./useDebounce.js";

package/esm/hooks/__internal__/useDebounce/useDebounce.d.ts

@@ -0,0 +1,4 @@
+import { DebouncedFunc } from "lodash";
+type Callback = (...args: any[]) => void;
+declare const useDebounce: <T extends Callback>(callback: T, delay: number) => DebouncedFunc<T>;
+export default useDebounce;

package/esm/hooks/__internal__/useDebounce/useDebounce.js

@@ -0,0 +1 @@
+import{useRef as r,useEffect as t,useMemo as o}from"react";import c from"lodash/debounce";const e=(e,n)=>{const a=r(e);t((()=>{a.current=e}));const s=o((()=>c(a.current,n)),[n]);return t((()=>()=>{s.cancel()})),s};export{e as default};

package/esm/hooks/__internal__/useFloating/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./useFloating";

package/esm/hooks/__internal__/useFloating/index.js

@@ -0,0 +1 @@
+export{default}from"./useFloating.js";

package/esm/hooks/__internal__/useFloating/useFloating.d.ts

@@ -0,0 +1,13 @@
+import { RefObject } from "react";
+import { Strategy, Middleware, Placement } from "@floating-ui/dom";
+export interface UseFloatingProps {
+    isOpen?: boolean;
+    reference: RefObject<HTMLElement | null>;
+    floating: React.RefObject<HTMLElement | null>;
+    strategy?: Strategy;
+    middleware?: Middleware[];
+    placement?: Placement;
+    animationFrame?: boolean;
+}
+declare const useFloating: ({ isOpen, reference, floating, strategy, placement, middleware, animationFrame, }: UseFloatingProps) => void;
+export default useFloating;

package/esm/hooks/__internal__/useFloating/useFloating.js

@@ -0,0 +1 @@
+import{useRef as t,useLayoutEffect as e}from"react";import{autoUpdate as n,computePosition as i}from"@floating-ui/dom";const o=({isOpen:o,reference:a,floating:r,strategy:l="absolute",placement:s,middleware:c,animationFrame:p})=>{const m=t(null);e((()=>{let t;const e=a.current,f=r.current;if(e&&f&&o){const{left:o,top:a,position:r,width:u,height:g}=f.style;m.current={left:o,top:a,position:r,width:u,height:g},Object.assign(f.style,{position:l,top:0,left:0});const d=()=>{i(e,f,{strategy:l,middleware:c,placement:s}).then((({x:t,y:e,placement:n})=>{Object.assign(f.style,{left:`${t}px`,top:`${e}px`,position:l}),f.setAttribute("data-floating-placement",n)}))};t=n(e,f,d,{animationFrame:p})}return()=>{t&&f&&(t(),t=null,Object.assign(f.style,m.current),f.removeAttribute("data-floating-placement"))}}),[o,a,r,l,c,s,p])};export{o as default};

package/esm/hooks/__internal__/useFocusPortalContent/index.d.ts

@@ -0,0 +1 @@
+export { default, nextElementToFocus } from "./useFocusPortalContent";

package/esm/hooks/__internal__/useFocusPortalContent/index.js

@@ -0,0 +1 @@
+export{default,nextElementToFocus}from"./useFocusPortalContent.js";

package/esm/hooks/__internal__/useFocusPortalContent/useFocusPortalContent.d.ts

@@ -0,0 +1,4 @@
+import { RefObject } from "react";
+export declare const nextElementToFocus: (target: HTMLElement, container: HTMLElement) => Element | undefined;
+declare const _default: (container?: RefObject<HTMLElement>, target?: RefObject<HTMLElement>, focusCallback?: (ev: KeyboardEvent) => void) => void;
+export default _default;

package/esm/hooks/__internal__/useFocusPortalContent/useFocusPortalContent.js

@@ -0,0 +1 @@
+import{useEffect as e}from"react";import t from"../../../__internal__/utils/helpers/events/events.js";import{defaultFocusableSelectors as r}from"../../../__internal__/focus-trap/focus-trap-utils.js";const n=(e,t)=>{const n=Array.from(document.querySelectorAll(r)||[]).filter((e=>-1!==Number(e.tabIndex)&&!e.hasAttribute("data-focus-guard"))),o=n.indexOf(e);return n.slice(o+1).find((e=>!t.contains(e)))};var o=(o,u,i)=>{e((()=>{const e=e=>{if((null==o?void 0:o.current)&&(null==u?void 0:u.current)){var l;const c=Array.from(null===(l=o.current)||void 0===l?void 0:l.querySelectorAll(r)).filter((e=>-1!==Number(e.tabIndex)));if(!c.length)return;const s=c[c.length-1]===document.activeElement,a=c[0]===document.activeElement;if(t.isTabKey(e)){if(s&&!t.isShiftKey(e)){null==i||i(e);const t=n(u.current,o.current);return e.preventDefault(),void(null!=t?t:u.current).focus()}a&&t.isShiftKey(e)&&(null==i||i(e))}}};return document.addEventListener("keydown",e),()=>{document.removeEventListener("keydown",e)}}),[u,o,i])};export{o as default,n as nextElementToFocus};

package/esm/hooks/__internal__/useInputAccessibility/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./useInputAccessibility";

package/esm/hooks/__internal__/useInputAccessibility/index.js

@@ -0,0 +1 @@
+export{default}from"./useInputAccessibility.js";