carbon-react 158.31.1 → 158.32.0

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

@@ -1,10 +1,10 @@
 import React, { ReactNode } from "react";
-import { PaddingProps } from "styled-system";
+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, TagProps {
+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. */

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,StyledCustomIconWrapper as l,StyledTitleIcon as a,StyledTitle as p,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}function h(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var 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 d=b=>{var{defaultOpen:d=!1,title:j,iconType:v,adornment:g,children:_,customIcon:P,component:w,active:x,height:k="56px",href:S,onClick:C,ariaCurrent:D}=b,I=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}(b,["defaultOpen","title","iconType","adornment","children","customIcon","component","active","height","href","onClick","ariaCurrent"]);const[E,T]=r(d),{level:F}=n(m),{isFullScreen:$}=y(),q="function"==typeof x?x(E):x,z=O(h(O({},S&&{as:"a",href:S},!S&&w&&{as:w,tabIndex:0},!S&&!w&&(_||C)&&{as:"button",type:"button","aria-expanded":E},(S||!w)&&{onClick:e=>{T((e=>!e)),C&&C(e)}}),{"aria-current":D}),I);return e("li",{children:[e(c,h(O({height:k,px:`calc(var(--spacing500) + (${F} * var(--spacing400)))`,py:2,active:q},z,i(I),o("vertical-menu-item",I)),{children:[(v||P)&&(P?t(l,{children:P}):v&&t(a,{type:v})),t(p,{children:j}),g&&t(u,{children:"function"==typeof g?g(E):g}),_&&!$&&t(s,{type:E?"chevron_up_thick":"chevron_down_thick"})]})),(E||$)&&t(m.Provider,{value:{level:F+1},children:t(f,{children:_})})]})};export{d as VerticalMenuItem,d 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 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.style.d.ts

@@ -1,5 +1,8 @@
 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;

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 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};
+import e,{css as t}from"styled-components";import{margin as o,padding as n}from"styled-system";import i from"../../style/utils/add-focus-styling.js";import r from"../../style/themes/apply-base-theme.js";import l from"../icon/icon.style.js";import a from"../icon/icon.component.js";import s from"../box/box.style.js";const d=e.ul.withConfig({displayName:"vertical-menu.style__StyledList",componentId:"sc-44693e7f-0"})(["display:flex;flex:1;flex-direction:column;min-height:0;list-style:none;margin:0;padding:0;"]),c=e.li.attrs(r).withConfig({displayName:"vertical-menu.style__StyledListItem",componentId:"sc-44693e7f-1"})(["",""],o),p=e.div.attrs(r).withConfig({displayName:"vertical-menu.style__StyledVerticalMenuItem",componentId:"sc-44693e7f-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,i(!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);}}'])),l),m=e.span.withConfig({displayName:"vertical-menu.style__StyledTitle",componentId:"sc-44693e7f-3"})(["font-weight:500;font-size:14px;line-height:21px;margin:0;z-index:1;text-align:left;"]),f=e.div.withConfig({displayName:"vertical-menu.style__StyledAdornment",componentId:"sc-44693e7f-4"})(["display:flex;align-items:center;justify-content:flex-end;flex:1;"]),y=e(a).withConfig({displayName:"vertical-menu.style__StyledTitleIcon",componentId:"sc-44693e7f-5"})(["margin-right:12px;width:20px;color:var(--colorsComponentsLeftnavWinterStandardContent);"]),h=e.div.withConfig({displayName:"vertical-menu.style__StyledCustomIconWrapper",componentId:"sc-44693e7f-6"})(["margin-right:12px;width:20px;"]),v=e(a).withConfig({displayName:"vertical-menu.style__StyledChevronIcon",componentId:"sc-44693e7f-7"})(["margin-left:auto;padding-left:12px;width:20px;color:var(--colorsComponentsLeftnavWinterStandardContent);"]),x=e(s).withConfig({displayName:"vertical-menu.style__StyledVerticalMenu",componentId:"sc-44693e7f-8"})(["display:flex;&::-webkit-scrollbar{width:12px;}"]),g=e(s).withConfig({displayName:"vertical-menu.style__StyledVerticalMenuFullScreen",componentId:"sc-44693e7f-9"})(["display:flex;flex-direction:column;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{f as StyledAdornment,v as StyledChevronIcon,h as StyledCustomIconWrapper,d as StyledList,c as StyledListItem,m as StyledTitle,y as StyledTitleIcon,x as StyledVerticalMenu,g as StyledVerticalMenuFullScreen,p as StyledVerticalMenuItem};

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

@@ -1,10 +1,10 @@
 import React, { ReactNode } from "react";
-import { PaddingProps } from "styled-system";
+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, TagProps {
+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. */

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

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

@@ -1,5 +1,8 @@
 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;

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"),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;
+"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"),l=require("../icon/icon.component.js"),r=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-44693e7f-0"})(["display:flex;flex:1;flex-direction:column;min-height:0;list-style:none;margin:0;padding:0;"]),c=d.default.li.attrs(o.default).withConfig({displayName:"vertical-menu.style__StyledListItem",componentId:"sc-44693e7f-1"})(["",""],t.margin),p=d.default.div.attrs(o.default).withConfig({displayName:"vertical-menu.style__StyledVerticalMenuItem",componentId:"sc-44693e7f-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),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),f=d.default.span.withConfig({displayName:"vertical-menu.style__StyledTitle",componentId:"sc-44693e7f-3"})(["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-44693e7f-4"})(["display:flex;align-items:center;justify-content:flex-end;flex:1;"]),m=d.default(l.default).withConfig({displayName:"vertical-menu.style__StyledTitleIcon",componentId:"sc-44693e7f-5"})(["margin-right:12px;width:20px;color:var(--colorsComponentsLeftnavWinterStandardContent);"]),y=d.default.div.withConfig({displayName:"vertical-menu.style__StyledCustomIconWrapper",componentId:"sc-44693e7f-6"})(["margin-right:12px;width:20px;"]),x=d.default(l.default).withConfig({displayName:"vertical-menu.style__StyledChevronIcon",componentId:"sc-44693e7f-7"})(["margin-left:auto;padding-left:12px;width:20px;color:var(--colorsComponentsLeftnavWinterStandardContent);"]),v=d.default(r.default).withConfig({displayName:"vertical-menu.style__StyledVerticalMenu",componentId:"sc-44693e7f-8"})(["display:flex;&::-webkit-scrollbar{width:12px;}"]),h=d.default(r.default).withConfig({displayName:"vertical-menu.style__StyledVerticalMenuFullScreen",componentId:"sc-44693e7f-9"})(["display:flex;flex-direction:column;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=x,exports.StyledCustomIconWrapper=y,exports.StyledList=s,exports.StyledListItem=c,exports.StyledTitle=f,exports.StyledTitleIcon=m,exports.StyledVerticalMenu=v,exports.StyledVerticalMenuFullScreen=h,exports.StyledVerticalMenuItem=p;

package/package.json

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