carbon-react 158.20.0 → 158.21.0

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

@@ -1,7 +1,7 @@
 export { default as VerticalMenu } from "./vertical-menu.component";
 export type { VerticalMenuProps } from "./vertical-menu.component";
 export { default as VerticalMenuItem } from "./vertical-menu-item/vertical-menu-item.component";
-export type { VerticalMenuItemProps } from "./vertical-menu-item/vertical-menu-item.component";
+export type { VerticalMenuItemClickEvent, VerticalMenuItemProps, } from "./vertical-menu-item/vertical-menu-item.component";
 export { default as VerticalMenuFullScreen } from "./vertical-menu-full-screen/vertical-menu-full-screen.component";
 export type { VerticalMenuFullScreenProps } from "./vertical-menu-full-screen/vertical-menu-full-screen.component";
 export { default as VerticalMenuTrigger } from "./vertical-menu-trigger/vertical-menu-trigger.component";

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

@@ -1,17 +1,20 @@
-import React from "react";
+import React, { ReactNode } from "react";
 import { PaddingProps } from "styled-system";
 import { TagProps } from "../../../__internal__/utils/helpers/tags";
 import { IconType } from "../../icon";
+export type VerticalMenuItemClickEvent = React.MouseEvent<HTMLButtonElement | HTMLAnchorElement> | React.KeyboardEvent<HTMLButtonElement | HTMLAnchorElement>;
 export interface VerticalMenuItemProps<T = React.ElementType> extends PaddingProps, 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);
-    /** Icon meant to be rendered on the left side */
+    /** 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);
@@ -19,9 +22,11 @@ export interface VerticalMenuItemProps<T = React.ElementType> extends PaddingPro
     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;
 }
 type InferredComponentProps<T extends React.ElementType> = Omit<React.ComponentProps<T>, keyof VerticalMenuItemProps<T>>;
-export declare const VerticalMenuItem: <T>({ defaultOpen, title, iconType, adornment, children, component, active, height, href, ...rest }: T extends React.ElementType ? InferredComponentProps<T> & VerticalMenuItemProps<T> : VerticalMenuItemProps) => React.JSX.Element;
+export declare const VerticalMenuItem: <T>({ defaultOpen, title, iconType, adornment, children, customIcon, component, active, height, href, onClick, ...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

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

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

@@ -10,6 +10,7 @@ export declare const StyledVerticalMenuItem: import("styled-components").StyledC
 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<"div", any, {
     theme: object;

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

@@ -1 +1 @@
-import e,{css as t}from"styled-components";import{padding as o}from"styled-system";import n from"../../style/utils/add-focus-styling.js";import i from"../../style/themes/apply-base-theme.js";import r from"../icon/icon.style.js";import a from"../icon/icon.component.js";import l from"../box/box.style.js";const d=e.ul.withConfig({displayName:"vertical-menu.style__StyledList",componentId:"sc-b3a4d279-0"})(["list-style:none;margin:0;padding:0;"]),s=e.div.attrs(i).withConfig({displayName:"vertical-menu.style__StyledVerticalMenuItem",componentId:"sc-b3a4d279-1"})(["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),o,n(!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);}}'])),r),c=e.span.withConfig({displayName:"vertical-menu.style__StyledTitle",componentId:"sc-b3a4d279-2"})(["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:"sc-b3a4d279-3"})(["display:flex;align-items:center;justify-content:flex-end;flex:1;"]),m=e(a).withConfig({displayName:"vertical-menu.style__StyledTitleIcon",componentId:"sc-b3a4d279-4"})(["margin-right:12px;width:20px;color:var(--colorsComponentsLeftnavWinterStandardContent);"]),f=e(a).withConfig({displayName:"vertical-menu.style__StyledChevronIcon",componentId:"sc-b3a4d279-5"})(["margin-left:auto;padding-left:12px;width:20px;color:var(--colorsComponentsLeftnavWinterStandardContent);"]),v=e(l).withConfig({displayName:"vertical-menu.style__StyledVerticalMenu",componentId:"sc-b3a4d279-6"})(["&::-webkit-scrollbar{width:12px;}"]),y=e(l).withConfig({displayName:"vertical-menu.style__StyledVerticalMenuFullScreen",componentId:"sc-b3a4d279-7"})(["position:fixed;top:0;bottom:0;height:100vh;width:100%;outline:none;padding:8px 0px;overflow:auto;background-color:var(--colorsComponentsLeftnavWinterStandardBackground);box-sizing:border-box;z-index:",";"," "," "," &::-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,d as StyledList,c as StyledTitle,m as StyledTitleIcon,v as StyledVerticalMenu,y as StyledVerticalMenuFullScreen,s as StyledVerticalMenuItem};
+import e,{css as t}from"styled-components";import{padding as o}from"styled-system";import n from"../../style/utils/add-focus-styling.js";import i from"../../style/themes/apply-base-theme.js";import r from"../icon/icon.style.js";import a from"../icon/icon.component.js";import l from"../box/box.style.js";const s=e.ul.withConfig({displayName:"vertical-menu.style__StyledList",componentId:"sc-eb6582b7-0"})(["list-style:none;margin:0;padding:0;"]),d=e.div.attrs(i).withConfig({displayName:"vertical-menu.style__StyledVerticalMenuItem",componentId:"sc-eb6582b7-1"})(["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),o,n(!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);}}'])),r),c=e.span.withConfig({displayName:"vertical-menu.style__StyledTitle",componentId:"sc-eb6582b7-2"})(["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:"sc-eb6582b7-3"})(["display:flex;align-items:center;justify-content:flex-end;flex:1;"]),m=e(a).withConfig({displayName:"vertical-menu.style__StyledTitleIcon",componentId:"sc-eb6582b7-4"})(["margin-right:12px;width:20px;color:var(--colorsComponentsLeftnavWinterStandardContent);"]),f=e.div.withConfig({displayName:"vertical-menu.style__StyledCustomIconWrapper",componentId:"sc-eb6582b7-5"})(["margin-right:12px;width:20px;"]),b=e(a).withConfig({displayName:"vertical-menu.style__StyledChevronIcon",componentId:"sc-eb6582b7-6"})(["margin-left:auto;padding-left:12px;width:20px;color:var(--colorsComponentsLeftnavWinterStandardContent);"]),y=e(l).withConfig({displayName:"vertical-menu.style__StyledVerticalMenu",componentId:"sc-eb6582b7-7"})(["&::-webkit-scrollbar{width:12px;}"]),v=e(l).withConfig({displayName:"vertical-menu.style__StyledVerticalMenuFullScreen",componentId:"sc-eb6582b7-8"})(["position:fixed;top:0;bottom:0;height:100vh;width:100%;outline:none;padding:8px 0px;overflow:auto;background-color:var(--colorsComponentsLeftnavWinterStandardBackground);box-sizing:border-box;z-index:",";"," "," "," &::-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,b as StyledChevronIcon,f as StyledCustomIconWrapper,s as StyledList,c as StyledTitle,m as StyledTitleIcon,y as StyledVerticalMenu,v as StyledVerticalMenuFullScreen,d as StyledVerticalMenuItem};

package/lib/components/vertical-menu/index.d.ts

@@ -1,7 +1,7 @@
 export { default as VerticalMenu } from "./vertical-menu.component";
 export type { VerticalMenuProps } from "./vertical-menu.component";
 export { default as VerticalMenuItem } from "./vertical-menu-item/vertical-menu-item.component";
-export type { VerticalMenuItemProps } from "./vertical-menu-item/vertical-menu-item.component";
+export type { VerticalMenuItemClickEvent, VerticalMenuItemProps, } from "./vertical-menu-item/vertical-menu-item.component";
 export { default as VerticalMenuFullScreen } from "./vertical-menu-full-screen/vertical-menu-full-screen.component";
 export type { VerticalMenuFullScreenProps } from "./vertical-menu-full-screen/vertical-menu-full-screen.component";
 export { default as VerticalMenuTrigger } from "./vertical-menu-trigger/vertical-menu-trigger.component";

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

@@ -1,17 +1,20 @@
-import React from "react";
+import React, { ReactNode } from "react";
 import { PaddingProps } from "styled-system";
 import { TagProps } from "../../../__internal__/utils/helpers/tags";
 import { IconType } from "../../icon";
+export type VerticalMenuItemClickEvent = React.MouseEvent<HTMLButtonElement | HTMLAnchorElement> | React.KeyboardEvent<HTMLButtonElement | HTMLAnchorElement>;
 export interface VerticalMenuItemProps<T = React.ElementType> extends PaddingProps, 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);
-    /** Icon meant to be rendered on the left side */
+    /** 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);
@@ -19,9 +22,11 @@ export interface VerticalMenuItemProps<T = React.ElementType> extends PaddingPro
     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;
 }
 type InferredComponentProps<T extends React.ElementType> = Omit<React.ComponentProps<T>, keyof VerticalMenuItemProps<T>>;
-export declare const VerticalMenuItem: <T>({ defaultOpen, title, iconType, adornment, children, component, active, height, href, ...rest }: T extends React.ElementType ? InferredComponentProps<T> & VerticalMenuItemProps<T> : VerticalMenuItemProps) => React.JSX.Element;
+export declare const VerticalMenuItem: <T>({ defaultOpen, title, iconType, adornment, children, customIcon, component, active, height, href, onClick, ...rest }: T extends React.ElementType ? InferredComponentProps<T> & VerticalMenuItemProps<T> : VerticalMenuItemProps) => React.JSX.Element;
 export default VerticalMenuItem;

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

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

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

@@ -10,6 +10,7 @@ export declare const StyledVerticalMenuItem: import("styled-components").StyledC
 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<"div", any, {
     theme: object;

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

@@ -1 +1 @@
-"use strict";var e=require("styled-components"),t=require("styled-system"),n=require("../../style/utils/add-focus-styling.js"),o=require("../../style/themes/apply-base-theme.js"),i=require("../icon/icon.style.js"),r=require("../icon/icon.component.js"),a=require("../box/box.style.js");function l(e){return e&&e.__esModule?e:{default:e}}var d=l(e);const s=d.default.ul.withConfig({displayName:"vertical-menu.style__StyledList",componentId:"sc-b3a4d279-0"})(["list-style:none;margin:0;padding:0;"]),c=d.default.div.attrs(o.default).withConfig({displayName:"vertical-menu.style__StyledVerticalMenuItem",componentId:"sc-b3a4d279-1"})(["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),t.padding,n.default(!0),(({active:t})=>t&&e.css(['&: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);}}'])),i.default),p=d.default.span.withConfig({displayName:"vertical-menu.style__StyledTitle",componentId:"sc-b3a4d279-2"})(["font-weight:500;font-size:14px;line-height:21px;margin:0;z-index:1;text-align:left;"]),u=d.default.div.withConfig({displayName:"vertical-menu.style__StyledAdornment",componentId:"sc-b3a4d279-3"})(["display:flex;align-items:center;justify-content:flex-end;flex:1;"]),f=d.default(r.default).withConfig({displayName:"vertical-menu.style__StyledTitleIcon",componentId:"sc-b3a4d279-4"})(["margin-right:12px;width:20px;color:var(--colorsComponentsLeftnavWinterStandardContent);"]),m=d.default(r.default).withConfig({displayName:"vertical-menu.style__StyledChevronIcon",componentId:"sc-b3a4d279-5"})(["margin-left:auto;padding-left:12px;width:20px;color:var(--colorsComponentsLeftnavWinterStandardContent);"]),y=d.default(a.default).withConfig({displayName:"vertical-menu.style__StyledVerticalMenu",componentId:"sc-b3a4d279-6"})(["&::-webkit-scrollbar{width:12px;}"]),v=d.default(a.default).withConfig({displayName:"vertical-menu.style__StyledVerticalMenuFullScreen",componentId:"sc-b3a4d279-7"})(["position:fixed;top:0;bottom:0;height:100vh;width:100%;outline:none;padding:8px 0px;overflow:auto;background-color:var(--colorsComponentsLeftnavWinterStandardBackground);box-sizing:border-box;z-index:",";"," "," "," &::-webkit-scrollbar{width:12px;}"],(({theme:e})=>e.zIndex.fullScreenModal),(({prefersReducedMotion:t})=>!t&&e.css(["transition:all 0.3s ease;"])),(({isOpen:t})=>t&&e.css(["visibility:visible;transform:translateX(0);"])),(({isOpen:t})=>!t&&e.css(["transform:translateX(-100%);visibility:hidden;"])));exports.StyledAdornment=u,exports.StyledChevronIcon=m,exports.StyledList=s,exports.StyledTitle=p,exports.StyledTitleIcon=f,exports.StyledVerticalMenu=y,exports.StyledVerticalMenuFullScreen=v,exports.StyledVerticalMenuItem=c;
+"use strict";var e=require("styled-components"),t=require("styled-system"),n=require("../../style/utils/add-focus-styling.js"),o=require("../../style/themes/apply-base-theme.js"),i=require("../icon/icon.style.js"),r=require("../icon/icon.component.js"),l=require("../box/box.style.js");function a(e){return e&&e.__esModule?e:{default:e}}var d=a(e);const s=d.default.ul.withConfig({displayName:"vertical-menu.style__StyledList",componentId:"sc-eb6582b7-0"})(["list-style:none;margin:0;padding:0;"]),c=d.default.div.attrs(o.default).withConfig({displayName:"vertical-menu.style__StyledVerticalMenuItem",componentId:"sc-eb6582b7-1"})(["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),t.padding,n.default(!0),(({active:t})=>t&&e.css(['&: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);}}'])),i.default),p=d.default.span.withConfig({displayName:"vertical-menu.style__StyledTitle",componentId:"sc-eb6582b7-2"})(["font-weight:500;font-size:14px;line-height:21px;margin:0;z-index:1;text-align:left;"]),u=d.default.div.withConfig({displayName:"vertical-menu.style__StyledAdornment",componentId:"sc-eb6582b7-3"})(["display:flex;align-items:center;justify-content:flex-end;flex:1;"]),f=d.default(r.default).withConfig({displayName:"vertical-menu.style__StyledTitleIcon",componentId:"sc-eb6582b7-4"})(["margin-right:12px;width:20px;color:var(--colorsComponentsLeftnavWinterStandardContent);"]),m=d.default.div.withConfig({displayName:"vertical-menu.style__StyledCustomIconWrapper",componentId:"sc-eb6582b7-5"})(["margin-right:12px;width:20px;"]),y=d.default(r.default).withConfig({displayName:"vertical-menu.style__StyledChevronIcon",componentId:"sc-eb6582b7-6"})(["margin-left:auto;padding-left:12px;width:20px;color:var(--colorsComponentsLeftnavWinterStandardContent);"]),b=d.default(l.default).withConfig({displayName:"vertical-menu.style__StyledVerticalMenu",componentId:"sc-eb6582b7-7"})(["&::-webkit-scrollbar{width:12px;}"]),v=d.default(l.default).withConfig({displayName:"vertical-menu.style__StyledVerticalMenuFullScreen",componentId:"sc-eb6582b7-8"})(["position:fixed;top:0;bottom:0;height:100vh;width:100%;outline:none;padding:8px 0px;overflow:auto;background-color:var(--colorsComponentsLeftnavWinterStandardBackground);box-sizing:border-box;z-index:",";"," "," "," &::-webkit-scrollbar{width:12px;}"],(({theme:e})=>e.zIndex.fullScreenModal),(({prefersReducedMotion:t})=>!t&&e.css(["transition:all 0.3s ease;"])),(({isOpen:t})=>t&&e.css(["visibility:visible;transform:translateX(0);"])),(({isOpen:t})=>!t&&e.css(["transform:translateX(-100%);visibility:hidden;"])));exports.StyledAdornment=u,exports.StyledChevronIcon=y,exports.StyledCustomIconWrapper=m,exports.StyledList=s,exports.StyledTitle=p,exports.StyledTitleIcon=f,exports.StyledVerticalMenu=b,exports.StyledVerticalMenuFullScreen=v,exports.StyledVerticalMenuItem=c;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "158.20.0",
+  "version": "158.21.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",
@@ -126,7 +126,7 @@
     "@typescript-eslint/parser": "^8.35.1",
     "babel-jest": "^29.7.0",
     "babel-plugin-dev-expression": "^0.2.3",
-    "browserslist": "^4.26.3",
+    "browserslist": "^4.28.1",
     "chromatic": "13.3.3",
     "conventional-changelog-conventionalcommits": "^8.0.0",
     "core-js": "^3.45.1",