carbon-react 158.26.4 → 158.27.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/esm/components/heading/heading.style.js +1 -1
  2. package/esm/components/menu/menu-item/menu-item.component.d.ts +3 -0
  3. package/esm/components/menu/menu-item/menu-item.component.js +1 -1
  4. package/esm/components/menu/menu-item/menu-item.style.d.ts +1 -1
  5. package/esm/components/menu/menu-item/menu-item.style.js +1 -1
  6. package/esm/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu-item/responsive-vertical-menu-item.component.d.ts +3 -0
  7. package/esm/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu-item/responsive-vertical-menu-item.component.js +1 -1
  8. package/esm/components/vertical-menu/vertical-menu-item/vertical-menu-item.component.d.ts +4 -1
  9. package/esm/components/vertical-menu/vertical-menu-item/vertical-menu-item.component.js +1 -1
  10. package/lib/components/heading/heading.style.js +1 -1
  11. package/lib/components/menu/menu-item/menu-item.component.d.ts +3 -0
  12. package/lib/components/menu/menu-item/menu-item.component.js +1 -1
  13. package/lib/components/menu/menu-item/menu-item.style.d.ts +1 -1
  14. package/lib/components/menu/menu-item/menu-item.style.js +1 -1
  15. package/lib/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu-item/responsive-vertical-menu-item.component.d.ts +3 -0
  16. package/lib/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu-item/responsive-vertical-menu-item.component.js +1 -1
  17. package/lib/components/vertical-menu/vertical-menu-item/vertical-menu-item.component.d.ts +4 -1
  18. package/lib/components/vertical-menu/vertical-menu-item/vertical-menu-item.component.js +1 -1
  19. package/package.json +1 -1
@@ -1 +1 @@
1
- import i,{css as o}from"styled-components";import{margin as e}from"styled-system";import t from"../icon/icon.component.js";import n from"../icon/icon.style.js";import a from"../../style/themes/apply-base-theme.js";import{Help as d}from"../help/help.component.js";import{Typography as r}from"../typography/typography.component.js";import"react/jsx-runtime";import"react";import{Hr as p}from"../hr/hr.component.js";import{Link as l}from"../link/link.component.js";import s from"../../style/utils/add-focus-styling.js";const m=i.div.attrs(a).withConfig({displayName:"heading.style__StyledHeading",componentId:"sc-c7b238d0-0"})(["width:100%;",""],e),c=i.div.withConfig({displayName:"heading.style__StyledHeaderContent",componentId:"sc-c7b238d0-1"})(["display:inline-flex;align-items:flex-end;"]),g=i.div.withConfig({displayName:"heading.style__StyledHeader",componentId:"sc-c7b238d0-2"})(["",""],(({divider:i,subheader:e,hasBackLink:t})=>o([""," "," "," ",""],e&&o(["margin-bottom:16px;"]),i&&o(["margin-bottom:15px;"]),i&&!e&&o(["margin-bottom:20px;"]),t&&o(["display:grid;grid-template-columns:min-content auto;"])))),y=i(l).withConfig({displayName:"heading.style__StyledHeadingBackButton",componentId:"sc-c7b238d0-3"})(["margin-right:5px;margin-top:2px;box-shadow:none;a,button{margin:0 1px 0 0;text-decoration:none;display:block;&:focus{background-color:transparent;","}&:hover{","{color:var(--colorsActionMinor600);}}","{margin-right:0;display:inline-flex;color:var(--colorsActionMinor500);}}"],s(),n,n),h=i(r).withConfig({displayName:"heading.style__StyledHeadingTitle",componentId:"sc-c7b238d0-4"})(["",""],(({withMargin:i})=>i?o(["margin-right:16px;"]):null)),f=i.span.withConfig({displayName:"heading.style__StyledHeadingPills",componentId:"sc-c7b238d0-5"})(["line-height:32px;display:inline-block;vertical-align:top;"]),x=i.div.withConfig({displayName:"heading.style__StyledSubHeader",componentId:"sc-c7b238d0-6"})(["margin-top:5px;grid-row:2;"," ",""],(({hasBackLink:i})=>i&&o(["grid-column:2;"])),(({hasSeparator:i})=>i&&o(["grid-row:3;margin-top:0px;"]))),b=i(t).withConfig({displayName:"heading.style__StyledHeadingIcon",componentId:"sc-c7b238d0-7"})(["height:30px;&:before,&",":before{font-size:24px;}"],n),_=i.hr.withConfig({displayName:"heading.style__StyledSeparator",componentId:"sc-c7b238d0-8"})(["border-top:2px;border-style:solid;border-color:var(--colorsUtilityMajor100);margin:10px 0 8px;text-align:left;width:50px;"]),w=i(p).withConfig({displayName:"heading.style__StyledDivider",componentId:"sc-c7b238d0-9"})(["margin:15px 0 20px;"]),S=i(d).withConfig({displayName:"heading.style__StyledHeaderHelp",componentId:"sc-c7b238d0-10"})(["display:inline-block;margin-left:-6px;margin-right:16px;position:relative;top:-4px;height:22px;"]);export{w as StyledDivider,g as StyledHeader,c as StyledHeaderContent,S as StyledHeaderHelp,m as StyledHeading,y as StyledHeadingBackButton,b as StyledHeadingIcon,f as StyledHeadingPills,h as StyledHeadingTitle,_ as StyledSeparator,x as StyledSubHeader};
1
+ import i,{css as o}from"styled-components";import{margin as e}from"styled-system";import t from"../icon/icon.component.js";import n from"../icon/icon.style.js";import a from"../../style/themes/apply-base-theme.js";import{Help as r}from"../help/help.component.js";import{Typography as d}from"../typography/typography.component.js";import"react/jsx-runtime";import"react";import{Hr as p}from"../hr/hr.component.js";import{Link as l}from"../link/link.component.js";import s from"../../style/utils/add-focus-styling.js";const m=i.div.attrs(a).withConfig({displayName:"heading.style__StyledHeading",componentId:"sc-64d920cb-0"})(["width:100%;",""],e),c=i.div.withConfig({displayName:"heading.style__StyledHeaderContent",componentId:"sc-64d920cb-1"})(["display:inline-flex;align-items:flex-end;"]),g=i.div.withConfig({displayName:"heading.style__StyledHeader",componentId:"sc-64d920cb-2"})(["",""],(({divider:i,subheader:e,hasBackLink:t})=>o([""," "," "," ",""],e&&o(["margin-bottom:16px;"]),i&&o(["margin-bottom:15px;"]),i&&!e&&o(["margin-bottom:20px;"]),t&&o(["display:grid;grid-template-columns:min-content auto;"])))),y=i(l).withConfig({displayName:"heading.style__StyledHeadingBackButton",componentId:"sc-64d920cb-3"})(["margin-right:5px;margin-top:2px;&&{box-shadow:none;background-color:transparent;}a,button{margin:0 1px 0 0;text-decoration:none;display:block;&:focus{background-color:transparent;","}&:hover{","{color:var(--colorsActionMinor600);}}","{margin-right:0;display:inline-flex;color:var(--colorsActionMinor500);}}"],s(),n,n),h=i(d).withConfig({displayName:"heading.style__StyledHeadingTitle",componentId:"sc-64d920cb-4"})(["",""],(({withMargin:i})=>i?o(["margin-right:16px;"]):null)),f=i.span.withConfig({displayName:"heading.style__StyledHeadingPills",componentId:"sc-64d920cb-5"})(["line-height:32px;display:inline-block;vertical-align:top;"]),x=i.div.withConfig({displayName:"heading.style__StyledSubHeader",componentId:"sc-64d920cb-6"})(["margin-top:5px;grid-row:2;"," ",""],(({hasBackLink:i})=>i&&o(["grid-column:2;"])),(({hasSeparator:i})=>i&&o(["grid-row:3;margin-top:0px;"]))),b=i(t).withConfig({displayName:"heading.style__StyledHeadingIcon",componentId:"sc-64d920cb-7"})(["height:30px;&:before,&",":before{font-size:24px;}"],n),_=i.hr.withConfig({displayName:"heading.style__StyledSeparator",componentId:"sc-64d920cb-8"})(["border-top:2px;border-style:solid;border-color:var(--colorsUtilityMajor100);margin:10px 0 8px;text-align:left;width:50px;"]),w=i(p).withConfig({displayName:"heading.style__StyledDivider",componentId:"sc-64d920cb-9"})(["margin:15px 0 20px;"]),u=i(r).withConfig({displayName:"heading.style__StyledHeaderHelp",componentId:"sc-64d920cb-10"})(["display:inline-block;margin-left:-6px;margin-right:16px;position:relative;top:-4px;height:22px;"]);export{w as StyledDivider,g as StyledHeader,c as StyledHeaderContent,u as StyledHeaderHelp,m as StyledHeading,y as StyledHeadingBackButton,b as StyledHeadingIcon,f as StyledHeadingPills,h as StyledHeadingTitle,_ as StyledSeparator,x as StyledSubHeader};
@@ -3,6 +3,7 @@ import { FlexboxProps, LayoutProps, MaxWidthProps, PaddingProps } from "styled-s
3
3
  import { IconType } from "../../icon";
4
4
  import { TagProps } from "../../../__internal__/utils/helpers/tags";
5
5
  export type VariantType = "default" | "alternate";
6
+ type AriaCurrent = Pick<React.HTMLAttributes<HTMLElement>, "aria-current">["aria-current"];
6
7
  interface MenuItemBaseProps extends TagProps, Pick<LayoutProps, "width" | "maxWidth" | "minWidth">, FlexboxProps, PaddingProps {
7
8
  /** onClick handler */
8
9
  onClick?: (event: React.MouseEvent<HTMLAnchorElement> | React.MouseEvent<HTMLButtonElement>) => void;
@@ -26,6 +27,8 @@ interface MenuItemBaseProps extends TagProps, Pick<LayoutProps, "width" | "maxWi
26
27
  showDropdownArrow?: boolean;
27
28
  /** If no text is provided an ariaLabel should be given to facilitate accessibility. */
28
29
  ariaLabel?: string;
30
+ /** Marks the element as the current item within a navigation context. */
31
+ ariaCurrent?: AriaCurrent;
29
32
  /** Callback triggered when submenu opens. Only valid with submenu prop */
30
33
  onSubmenuOpen?: () => void;
31
34
  /** Callback triggered when submenu closes. Only valid with submenu prop */
@@ -1 +1 @@
1
- import{jsx as e}from"react/jsx-runtime";import n,{forwardRef as t,useRef as r,useContext as o,useState as i,useLayoutEffect as u,useEffect as l,useImperativeHandle as s}from"react";import a from"invariant";import{defaultFocusableSelectors as c}from"../../../__internal__/focus-trap/focus-trap-utils.js";import m from"../../../style/utils/filter-styled-system-padding-props.js";import d from"./menu-item.style.js";import p from"../../../__internal__/utils/helpers/events/events.js";import{useStrictMenuContext as b}from"../__internal__/strict-menu.context.js";import f from"../__internal__/submenu/submenu.component.js";import h from"../__internal__/submenu/submenu.context.js";import{MenuSegmentContext as y}from"../menu-segment-title/menu-segment-title.context.js";import{StyledMenuItem as v}from"../menu.style.js";import O from"../../../__internal__/utils/helpers/guid/index.js";function g(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function j(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{},r=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),r.forEach((function(n){g(e,n,t[n])}))}return e}function w(e,n){return n=null!=n?n:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):function(e){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);n.push.apply(n,t)}return n}(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})),e}const _=t(((t,g)=>{var{submenu:_,submenuMaxWidth:x,submenuMinWidth:S,children:P,href:D,onClick:k,target:I,submenuDirection:W="right",icon:C,selected:F,onKeyDown:M,variant:T="default",showDropdownArrow:V=!0,ariaLabel:E,clickToOpen:L,maxWidth:K,onSubmenuOpen:A,onSubmenuClose:q,overrideColor:H,rel:N,as:Y,"data-element":z,"data-role":B}=t,G=function(e,n){if(null==e)return{};var t,r,o=function(e,n){if(null==e)return{};var t,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}(t,["submenu","submenuMaxWidth","submenuMinWidth","children","href","onClick","target","submenuDirection","icon","selected","onKeyDown","variant","showDropdownArrow","ariaLabel","clickToOpen","maxWidth","onSubmenuOpen","onSubmenuClose","overrideColor","rel","as","data-element","data-role"]);a(C||P,"Either prop `icon` must be defined or this node must have `children`."),a(P||E||_||"string"==typeof _&&_.length,"If no text or node is provided via the `submenu` prop, an `ariaLabel` should be given to facilitate accessibility."),a("boolean"==typeof _||void 0===_||n.isValidElement(_)||P&&"string"==typeof _&&_.length,"You should not pass `children` when `submenu` is an empty string");const J=r(O()),{isChildOfSegment:Q,overriddenVariant:R}=o(y),{inFullscreenView:U,registerItem:X,unregisterItem:Z,focusId:$,updateFocusId:ee,menuType:ne}=b(),te=o(h),re=Object.keys(te).length>0,{submenuFocusId:oe,updateFocusId:ie,handleKeyDown:ue,submenuHasMaxWidth:le,closeSubmenu:se}=te,ae=$===J.current,ce=oe?oe===J.current:void 0,[me,de]=i(null),[pe,be]=i(null);u((()=>{var e;const n=null!==(e=null==me?void 0:me.querySelector(c))&&void 0!==e?e:null;n!==pe&&be(n)}),[pe,me]),l((()=>{const e=J.current;return X&&X(e),()=>{Z&&Z(e)}}),[X,Z]),l((()=>{if(ae&&!ce||ce){if(pe)return void pe.focus();null==me||me.focus()}}),[pe,ae,ce,me]),s(g,(()=>({focus(){null==me||me.focus()}})),[me]);const fe=e=>{re?(e.stopPropagation(),null==ie||ie(J.current)):null==ee||ee(J.current)},he={className:D||k?"carbon-menu-item--has-link":"",href:pe?void 0:D,onClick:pe||!D&&!k?void 0:e=>{null==k||k(e),null==se||se()},target:I,rel:N,icon:C,removeAriaLabelOnIcon:!0,selected:F,onKeyDown:U?void 0:e=>{null==M||M(e),p.isEscKey(e)&&(null==me||me.focus()),null==ue||ue(e)},overrideColor:H,ref:de};"alternate"===R&&Q&&"alternate"===T&&["white","black"].includes(ne)&&(he.overrideColor=!0);const ye=e=>K&&"string"==typeof e?e:void 0,ve=U?void 0:K,Oe=!(k||D||pe);if(_)return e(v,w(j({"data-component":"menu-item","data-element":z,"data-role":B,menuType:ne,title:ye(_),maxWidth:ve},G),{inFullscreenView:U,id:J.current,as:Y,onFocus:fe,children:e(f,w(j(w(j(w(j({},"boolean"!=typeof _&&{title:_}),{submenuDirection:W,showDropdownArrow:V,clickToOpen:L,maxWidth:K,asPassiveItem:Oe,ariaLabel:E,onSubmenuOpen:A,onSubmenuClose:q,submenuMaxWidth:x,submenuMinWidth:S}),he),{variant:T}),G),{children:P}))}));const ge=m(G),je=!!(null==me?void 0:me.querySelector("[data-element='input']"));return e(v,w(j({"data-component":"menu-item","data-element":z,"data-role":B,menuType:ne,inSubmenu:re,title:ye(P),maxWidth:ve},G),{inFullscreenView:U&&!Object.keys(te).length,id:J.current,as:Y,onFocus:fe,children:e(d,w(j(w(j({menuType:ne,"data-role":"menu-item-wrapper"},he),{menuItemVariant:T,ariaLabel:E,maxWidth:le?void 0:ve,inFullscreenView:U,asPassiveItem:Oe}),ge),{asDiv:je||"div"===Y,hasFocusableChild:!!pe,hasInput:je,inSubmenu:re,children:P}))}))}));export{_ as MenuItem,_ as default};
1
+ import{jsx as e}from"react/jsx-runtime";import n,{forwardRef as t,useRef as r,useContext as o,useState as i,useLayoutEffect as u,useEffect as l,useImperativeHandle as a}from"react";import s from"invariant";import{defaultFocusableSelectors as c}from"../../../__internal__/focus-trap/focus-trap-utils.js";import m from"../../../style/utils/filter-styled-system-padding-props.js";import d from"./menu-item.style.js";import p from"../../../__internal__/utils/helpers/events/events.js";import{useStrictMenuContext as b}from"../__internal__/strict-menu.context.js";import f from"../__internal__/submenu/submenu.component.js";import h from"../__internal__/submenu/submenu.context.js";import{MenuSegmentContext as y}from"../menu-segment-title/menu-segment-title.context.js";import{StyledMenuItem as v}from"../menu.style.js";import O from"../../../__internal__/utils/helpers/guid/index.js";function g(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function j(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{},r=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),r.forEach((function(n){g(e,n,t[n])}))}return e}function w(e,n){return n=null!=n?n:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):function(e){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);n.push.apply(n,t)}return n}(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})),e}const _=t(((t,g)=>{var{submenu:_,submenuMaxWidth:x,submenuMinWidth:S,children:P,href:D,onClick:C,target:k,submenuDirection:I="right",icon:W,selected:F,onKeyDown:M,variant:T="default",showDropdownArrow:V=!0,ariaLabel:E,ariaCurrent:L,clickToOpen:K,maxWidth:A,onSubmenuOpen:q,onSubmenuClose:H,overrideColor:N,rel:Y,as:z,"data-element":B,"data-role":G}=t,J=function(e,n){if(null==e)return{};var t,r,o=function(e,n){if(null==e)return{};var t,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}(t,["submenu","submenuMaxWidth","submenuMinWidth","children","href","onClick","target","submenuDirection","icon","selected","onKeyDown","variant","showDropdownArrow","ariaLabel","ariaCurrent","clickToOpen","maxWidth","onSubmenuOpen","onSubmenuClose","overrideColor","rel","as","data-element","data-role"]);s(W||P,"Either prop `icon` must be defined or this node must have `children`."),s(P||E||_||"string"==typeof _&&_.length,"If no text or node is provided via the `submenu` prop, an `ariaLabel` should be given to facilitate accessibility."),s("boolean"==typeof _||void 0===_||n.isValidElement(_)||P&&"string"==typeof _&&_.length,"You should not pass `children` when `submenu` is an empty string");const Q=r(O()),{isChildOfSegment:R,overriddenVariant:U}=o(y),{inFullscreenView:X,registerItem:Z,unregisterItem:$,focusId:ee,updateFocusId:ne,menuType:te}=b(),re=o(h),oe=Object.keys(re).length>0,{submenuFocusId:ie,updateFocusId:ue,handleKeyDown:le,submenuHasMaxWidth:ae,closeSubmenu:se}=re,ce=ee===Q.current,me=ie?ie===Q.current:void 0,[de,pe]=i(null),[be,fe]=i(null);u((()=>{var e;const n=null!==(e=null==de?void 0:de.querySelector(c))&&void 0!==e?e:null;n!==be&&fe(n)}),[be,de]),l((()=>{const e=Q.current;return Z&&Z(e),()=>{$&&$(e)}}),[Z,$]),l((()=>{if(ce&&!me||me){if(be)return void be.focus();null==de||de.focus()}}),[be,ce,me,de]),a(g,(()=>({focus(){null==de||de.focus()}})),[de]);const he=e=>{oe?(e.stopPropagation(),null==ue||ue(Q.current)):null==ne||ne(Q.current)},ye={className:D||C?"carbon-menu-item--has-link":"",href:be?void 0:D,onClick:be||!D&&!C?void 0:e=>{null==C||C(e),null==se||se()},target:k,rel:Y,icon:W,removeAriaLabelOnIcon:!0,selected:F,onKeyDown:X?void 0:e=>{null==M||M(e),p.isEscKey(e)&&(null==de||de.focus()),null==le||le(e)},overrideColor:N,ref:pe};"alternate"===U&&R&&"alternate"===T&&["white","black"].includes(te)&&(ye.overrideColor=!0);const ve=e=>A&&"string"==typeof e?e:void 0,Oe=X?void 0:A,ge=!(C||D||be);if(_)return e(v,w(j({"data-component":"menu-item","data-element":B,"data-role":G,menuType:te,title:ve(_),maxWidth:Oe},J),{inFullscreenView:X,id:Q.current,as:z,onFocus:he,children:e(f,w(j(w(j(w(j({},"boolean"!=typeof _&&{title:_}),{submenuDirection:I,showDropdownArrow:V,clickToOpen:K,maxWidth:A,asPassiveItem:ge,ariaLabel:E,onSubmenuOpen:q,onSubmenuClose:H,submenuMaxWidth:x,submenuMinWidth:S}),ye),{variant:T}),J),{children:P}))}));const je=m(J),we=!!(null==de?void 0:de.querySelector("[data-element='input']"));return e(v,w(j({"data-component":"menu-item","data-element":B,"data-role":G,menuType:te,inSubmenu:oe,title:ve(P),maxWidth:Oe},J),{inFullscreenView:X&&!Object.keys(re).length,id:Q.current,as:z,onFocus:he,children:e(d,w(j(w(j({menuType:te,"data-role":"menu-item-wrapper"},ye),{menuItemVariant:T,ariaLabel:E,"aria-current":L,maxWidth:ae?void 0:Oe,inFullscreenView:X,asPassiveItem:ge}),je),{asDiv:we||"div"===z,hasFocusableChild:!!be,hasInput:we,inSubmenu:oe,children:P}))}))}));export{_ as MenuItem,_ as default};
@@ -1,7 +1,7 @@
1
1
  import { PaddingProps } from "styled-system";
2
2
  import { MenuWithChildren } from "./menu-item.component";
3
3
  import type { MenuType } from "../menu.types";
4
- interface StyledMenuItemWrapperProps extends Pick<MenuWithChildren, "href" | "showDropdownArrow" | "overrideColor" | "clickToOpen" | "maxWidth">, PaddingProps {
4
+ interface StyledMenuItemWrapperProps extends Pick<MenuWithChildren, "href" | "showDropdownArrow" | "overrideColor" | "clickToOpen" | "maxWidth" | "ariaCurrent">, PaddingProps {
5
5
  menuType: MenuType;
6
6
  selected?: boolean;
7
7
  hasSubmenu?: boolean;
@@ -1 +1 @@
1
- import o,{css as n}from"styled-components";import{padding as t}from"styled-system";import r from"../menu.config.js";import{Link as a}from"../../link/link.component.js";import e from"../../button/button.style.js";import i from"../../icon-button/icon-button.style.js";import c from"../../icon/icon.style.js";import{StyledContent as u,StyledLink as s}from"../../link/link.style.js";import p from"../../../style/themes/apply-base-theme.js";import d from"../../../style/utils/add-focus-styling.js";const l=o=>{var n,t;const{paddingRight:r}=o,a=null===(t=String(r))||void 0===t||null===(n=t.match(/\d+/))||void 0===n?void 0:n[0];if("var(--spacing000)"===r||"0"===a)return{padding:"var(--spacing200)",iconSpacing:"2px"};switch(r){case"var(--spacing100)":return{padding:"var(--spacing300)",iconSpacing:r};case"var(--spacing200)":return{padding:"var(--spacing400)",iconSpacing:r};case"var(--spacing300)":return{padding:"var(--spacing500)",iconSpacing:r};case"var(--spacing400)":return{padding:"var(--spacing600)",iconSpacing:r};case"var(--spacing500)":return{padding:"var(--spacing700)",iconSpacing:r};case"var(--spacing600)":return{padding:"var(--spacing800)",iconSpacing:r};case"var(--spacing700)":return{padding:"var(--spacing900)",iconSpacing:r};case"var(--spacing800)":return{padding:"var(--spacing1000)",iconSpacing:r};default:return a?{padding:`${16+Number(a)}px`,iconSpacing:`${a}px`}:{padding:"var(--spacing400)",iconSpacing:"var(--spacing200)"}}},g=o.a.attrs(p).attrs({as:a}).withConfig({displayName:"menu-item.style__StyledMenuItemWrapper",componentId:"sc-39c6a74b-0"})([""," &&&{> a,> button{","}}"],(({menuType:o,selected:a,hasSubmenu:p,isOpen:g,menuItemVariant:b,showDropdownArrow:m,href:h,clickToOpen:v,maxWidth:f,inFullscreenView:x,overrideColor:k,asPassiveItem:w,asDiv:y,hasFocusableChild:S,hasInput:C,inSubmenu:M})=>n(["display:flex;align-items:center;min-height:40px;position:relative;box-shadow:none;a,button{min-height:40px;height:100%;box-sizing:border-box;font-size:14px;font-weight:500;&:not(.search-button) > ","{margin-right:var(--spacing050);}}&& a:focus,&& button:focus{",'}:has([data-element="input"]) ',"{width:100%;}"," "," "," "," "," button,"," button,a,"," a{margin:0px;text-align:left;",'}&&&{a,button,[data-component="icon"],'," a,"," button,",' [data-component="icon"]{font-weight:500;text-decoration:none;',"}","}"," "," "," "," ",""],c,d(!0),u,!k&&n(["background-color:",';&:has([data-popover-container-button="true"]){background-color:var(--colorsActionMajor500);}'],r[o].background),k&&n(["&&&&{background-color:",";}"],"alternate"===b?r[o].alternate:r[o].submenuItemBackground),!x&&n(["max-width:inherit;width:inherit;height:inherit;> a,> button{display:flex;align-items:center;"," width:inherit;max-width:inherit;}&&{a:focus,button:focus{background-color:",";color:",';z-index:1;position:relative;}}&:has([data-popover-container-button="true"]){&&{a:focus,button:focus{background-color:var(--colorsActionMajor500);}}}&&&{a,button{',"}a:hover,button:hover{","{border-radius:0;background-color:transparent;}"," ::before{border-top-color:var(--colorsComponentsMenuYang100);}}}"],M?"":"justify-content: center;",r[o].background,r[o].color,f&&n(["box-sizing:border-box;max-width:inherit;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;vertical-align:bottom;display:block;"]),e,!y&&!w&&n(['background-color:var(--colorsComponentsMenuAutumnStandard600);color:var(--colorsComponentsMenuYang100);[data-component="icon"]{color:var(--colorsComponentsMenuYang100);}'])),S&&n(["&& "," ",'{> span{display:inline-flex;margin-right:0;}:focus{outline:none;[data-component="icon"]{color:',";}}}"],!x&&n(["&& > a:not(:has(button)){padding:11px 16px;}> a:has(",":not(.search-button)){height:100%;","{height:inherit;div{height:inherit;}}","{min-height:40px;padding:10px 0px;box-sizing:border-box;height:100%;}}"],e,u,e),i,r[o].color),!S&&!x&&n(["",""],p||f?n(["> a,> button{padding:11px 16px ",";}"],p&&f?"12px":"10px"):n(["> a,> button{padding:11px 16px;}"])),s,s,x&&n(["height:auto;white-space:normal;","{top:-2px;}"],c),s,s,s,!C&&`color: ${r[o].color};`,!x&&n(["a > ",",button > ","{display:inline-block;height:18px;top:-2px;}"],c,c),a&&n(["background-color:",";a:focus,button:focus{background-color:",";}a:hover,button:hover{background-color:var(--colorsComponentsMenuAutumnStandard600);}"],r[o].selected,r[o].selected),"alternate"===b&&!x&&n(["&&&{background-color:",";}&&& a:focus,&&& button:focus{background-color:",";}",""],r[o].alternate,r[o].alternate,!C&&n(["&&& a:hover,&&& button:hover{background-color:",";}"],r[o].alternateHover)),g&&n(["a,button{background-color:",";color:",";}"],r[o].submenuItemBackground,r[o].color),p&&n(["background-color:",";a:focus,button:focus{background-color:",";color:",';[data-component="icon"]{color:',";}","}a:hover,button:hover{background-color:",";color:var(--colorsComponentsMenuYang100);",' [data-component="icon"]{color:',";}}"," ",""],r[o].submenuBackground,r[o].submenuBackground,r[o].color,r[o].color,v&&g&&n(["background-color:",";"],r[o].submenuOpenedBackground),r[o].submenuOpenedBackground,!(h||v)&&n(["cursor:default;background-color:",";color:",";"],r[o].submenuItemBackground,r[o].color),r[o].color,a&&n(["background-color:",";a:focus,button:focus{background-color:",";}a:hover,button:hover{background-color:var(--colorsComponentsMenuAutumnStandard600);color:var(--colorsComponentsMenuYang100);}"],r[o].submenuSelected,r[o].submenuSelected),m&&n(["&&&{> a,> button:not(","){padding-right:",";}}a::before,button::before{display:block;margin-top:-1px;pointer-events:none;position:absolute;right:",';top:50%;z-index:2;content:"";width:0;height:0;border-width:5px 4px 4px;border-style:solid;border-top-color:initial;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}'],i,(o=>l(t(o)).padding),(o=>l(t(o)).iconSpacing))),x&&n([""," > a,> button{min-height:40px;line-height:40px;padding:0px 16px;width:100vw;box-sizing:border-box;}a:focus,button:focus{z-index:1;position:relative;}","}"],y&&n(["&&&{> a,> button{color:",";outline:none;}> button:hover,> a:hover{background-color:transparent;cursor:default;outline:none;color:",";}}"],r[o].title,r[o].title),!w&&n(["&&{> a:focus,> a:hover,> button:focus,> button:hover{background-color:var(--colorsComponentsMenuAutumnStandard600);color:var(--colorsComponentsMenuYang100);","}}"],!C&&n(['[data-component="icon"]{color:var(--colorsComponentsMenuYang100);}']))))),t);export{g as default};
1
+ import o,{css as n}from"styled-components";import{padding as t}from"styled-system";import r from"../menu.config.js";import{Link as a}from"../../link/link.component.js";import e from"../../button/button.style.js";import i from"../../icon-button/icon-button.style.js";import c from"../../icon/icon.style.js";import{StyledContent as u,StyledLink as s}from"../../link/link.style.js";import p from"../../../style/themes/apply-base-theme.js";import d from"../../../style/utils/add-focus-styling.js";const l=o=>{var n,t;const{paddingRight:r}=o,a=null===(t=String(r))||void 0===t||null===(n=t.match(/\d+/))||void 0===n?void 0:n[0];if("var(--spacing000)"===r||"0"===a)return{padding:"var(--spacing200)",iconSpacing:"2px"};switch(r){case"var(--spacing100)":return{padding:"var(--spacing300)",iconSpacing:r};case"var(--spacing200)":return{padding:"var(--spacing400)",iconSpacing:r};case"var(--spacing300)":return{padding:"var(--spacing500)",iconSpacing:r};case"var(--spacing400)":return{padding:"var(--spacing600)",iconSpacing:r};case"var(--spacing500)":return{padding:"var(--spacing700)",iconSpacing:r};case"var(--spacing600)":return{padding:"var(--spacing800)",iconSpacing:r};case"var(--spacing700)":return{padding:"var(--spacing900)",iconSpacing:r};case"var(--spacing800)":return{padding:"var(--spacing1000)",iconSpacing:r};default:return a?{padding:`${16+Number(a)}px`,iconSpacing:`${a}px`}:{padding:"var(--spacing400)",iconSpacing:"var(--spacing200)"}}},g=o.a.attrs(p).attrs({as:a}).withConfig({displayName:"menu-item.style__StyledMenuItemWrapper",componentId:"sc-2b8f9da8-0"})([""," &&&{> a,> button{","}}"],(({menuType:o,selected:a,hasSubmenu:p,isOpen:g,menuItemVariant:b,showDropdownArrow:m,href:h,clickToOpen:v,maxWidth:f,inFullscreenView:x,overrideColor:k,asPassiveItem:w,asDiv:y,hasFocusableChild:S,hasInput:C,inSubmenu:M})=>n(["display:flex;align-items:center;min-height:40px;position:relative;box-shadow:none;a,button{min-height:40px;height:100%;box-sizing:border-box;font-size:14px;font-weight:500;&:not(.search-button) > ","{margin-right:var(--spacing050);}}&& a:focus,&& button:focus{",'}:has([data-element="input"]) ',"{width:100%;}"," "," "," "," "," button,"," button,a,"," a{margin:0px;text-align:left;",'}&&&{a,button,[data-component="icon"],'," a,"," button,",' [data-component="icon"]{font-weight:500;text-decoration:none;',"}","}"," "," "," "," ",""],c,d(!0),u,!k&&n(["background-color:",';&:has([data-popover-container-button="true"]){background-color:var(--colorsActionMajor500);}'],r[o].background),k&&n(["&&&&{background-color:",";}"],"alternate"===b?r[o].alternate:r[o].submenuItemBackground),!x&&n(["max-width:inherit;width:inherit;height:inherit;> a,> button{display:flex;align-items:center;"," width:inherit;max-width:inherit;}&&{a:focus,button:focus{background-color:",";color:",';z-index:1;position:relative;}}&:has([data-popover-container-button="true"]){&&{a:focus,button:focus{background-color:var(--colorsActionMajor500);}}}&&&{a,button{',"}a:hover,button:hover{","{border-radius:0;background-color:transparent;}"," ::before{border-top-color:var(--colorsComponentsMenuYang100);}}}"],M?"":"justify-content: center;",r[o].background,r[o].color,f&&n(["box-sizing:border-box;max-width:inherit;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;vertical-align:bottom;display:block;"]),e,!y&&!w&&n(['background-color:var(--colorsComponentsMenuAutumnStandard600);color:var(--colorsComponentsMenuYang100);[data-component="icon"]{color:var(--colorsComponentsMenuYang100);}'])),S&&n(["&& "," ",'{> span{display:inline-flex;margin-right:0;}:focus{outline:none;[data-component="icon"]{color:',";}}}"],!x&&n(["&& > a:not(:has(button)){padding:11px 16px;}> a:has(",":not(.search-button)){height:100%;","{height:inherit;div{height:inherit;}}","{min-height:40px;padding:10px 0px;box-sizing:border-box;height:100%;}}"],e,u,e),i,r[o].color),!S&&!x&&n(["",""],p||f?n(["> a,> button{padding:11px 16px ",";}"],p&&f?"12px":"10px"):n(["> a,> button{padding:11px 16px;}"])),s,s,x&&n(["height:auto;white-space:normal;","{top:-2px;}"],c),s,s,s,!C&&`color: ${r[o].color};`,!x&&n(["a > ",",button > ","{display:inline-block;height:18px;top:-2px;}"],c,c),a&&n(["background-color:",";a:focus,button:focus{background-color:",";}a:hover,button:hover{background-color:var(--colorsComponentsMenuAutumnStandard600);}"],r[o].selected,r[o].selected),"alternate"===b&&!x&&n(["&&&{background-color:",";}&&& a:focus,&&& button:focus{background-color:",";}",""],r[o].alternate,r[o].alternate,!C&&n(["&&& a:hover,&&& button:hover{background-color:",";}"],r[o].alternateHover)),g&&n(["a,button{background-color:",";color:",";}"],r[o].submenuItemBackground,r[o].color),p&&n(["background-color:",";a:focus,button:focus{background-color:",";color:",';[data-component="icon"]{color:',";}","}a:hover,button:hover{background-color:",";color:var(--colorsComponentsMenuYang100);",' [data-component="icon"]{color:',";}}"," ",""],r[o].submenuBackground,r[o].submenuBackground,r[o].color,r[o].color,v&&g&&n(["background-color:",";"],r[o].submenuOpenedBackground),r[o].submenuOpenedBackground,!(h||v)&&n(["cursor:default;background-color:",";color:",";"],r[o].submenuItemBackground,r[o].color),r[o].color,a&&n(["background-color:",";a:focus,button:focus{background-color:",";}a:hover,button:hover{background-color:var(--colorsComponentsMenuAutumnStandard600);color:var(--colorsComponentsMenuYang100);}"],r[o].submenuSelected,r[o].submenuSelected),m&&n(["&&&{> a,> button:not(","){padding-right:",";}}a::before,button::before{display:block;margin-top:-1px;pointer-events:none;position:absolute;right:",';top:50%;z-index:2;content:"";width:0;height:0;border-width:5px 4px 4px;border-style:solid;border-top-color:initial;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}'],i,(o=>l(t(o)).padding),(o=>l(t(o)).iconSpacing))),x&&n([""," > a,> button{min-height:40px;line-height:40px;padding:0px 16px;width:100vw;box-sizing:border-box;}a:focus,button:focus{z-index:1;position:relative;}","}"],y&&n(["&&&{> a,> button{color:",";outline:none;}> button:hover,> a:hover{background-color:transparent;cursor:default;outline:none;color:",";}}"],r[o].title,r[o].title),!w&&n(["&&{> a:focus,> a:hover,> button:focus,> button:hover{background-color:var(--colorsComponentsMenuAutumnStandard600);color:var(--colorsComponentsMenuYang100);","}}"],!C&&n(['[data-component="icon"]{color:var(--colorsComponentsMenuYang100);}']))))),t);export{g as default};
@@ -1,6 +1,7 @@
1
1
  import React, { ReactNode } from "react";
2
2
  import { MarginProps, PaddingProps } from "styled-system";
3
3
  import { IconType } from "../../../icon";
4
+ type AriaCurrent = Pick<React.HTMLAttributes<HTMLElement>, "aria-current">["aria-current"];
4
5
  export type ResponsiveVerticalMenuItemClickEvent = React.MouseEvent<HTMLButtonElement | HTMLAnchorElement> | React.KeyboardEvent<HTMLButtonElement | HTMLAnchorElement>;
5
6
  interface BaseItemProps extends MarginProps, PaddingProps {
6
7
  /** The content of the menu item. This will render the menu item as a parent menu. */
@@ -21,6 +22,8 @@ interface BaseItemProps extends MarginProps, PaddingProps {
21
22
  rel?: string;
22
23
  /** The target to use for the menu item. */
23
24
  target?: string;
25
+ /** Marks the element as the current item within a navigation context. */
26
+ ariaCurrent?: AriaCurrent;
24
27
  }
25
28
  export interface ResponsiveVerticalMenuItemProps extends Omit<BaseItemProps, "id"> {
26
29
  /** The unique identifier for the menu item. */
@@ -1 +1 @@
1
- import{jsx as e,jsxs as n,Fragment as t}from"react/jsx-runtime";import r,{useRef as o,forwardRef as i,createContext as c,useMemo as l,useState as s}from"react";import{StyledResponsiveMenu as a}from"../responsive-vertical-menu.style.js";import{StyledResponsiveMenuListItem as d,StyledResponsiveMenuItem as p,StyledIcon as u,StyledNestedMenuWrapper as m,StyledNestedMenu as v,StyledMenuItemContent as h,StyledResponsiveMenuActionButton as f,StyledResponsiveMenuActionLink as y}from"./responsive-vertical-menu-item.style.js";import"../../../../style/utils/filter-styled-system-padding-props.js";import b from"../../../../style/utils/filter-styled-system-margin-props.js";import{useDepth as O,IncreaseDepth as j}from"../__internal__/depth.context.js";import{useResponsiveVerticalMenu as g}from"../responsive-vertical-menu.context.js";import w from"../../../icon/icon.component.js";import _ from"../../../../__internal__/utils/helpers/guid/index.js";import P from"../../../../__internal__/utils/helpers/events/events.js";function x(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function I(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{},r=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),r.forEach((function(n){x(e,n,t[n])}))}return e}function $(e,n){return n=null!=n?n:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):function(e){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);n.push.apply(n,t)}return n}(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})),e}function C(e,n){if(null==e)return{};var t,r,o=function(e,n){if(null==e)return{};var t,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}const k=c(void 0),D=({customIcon:t,depth:r,hasChildren:o,icon:i,label:c,responsive:l})=>n(h,t?{"data-component":"responsive-vertical-menu-custom-icon","data-role":"responsive-vertical-menu-custom-icon",depth:r,hasChildren:o,icon:!0,responsive:l,children:[t,c]}:{"data-component":"responsive-vertical-menu-icon","data-role":"responsive-vertical-menu-icon",depth:r,hasChildren:o,icon:!!i,responsive:l,children:[i&&e(w,{type:i}),c]}),S=i(((i,c)=>{var{children:h,customIcon:j,icon:w,id:_,href:x,label:S,onClick:M,rel:K,target:E}=i,A=C(i,["children","customIcon","icon","id","href","label","onClick","rel","target"]);const{activeMenuItem:q,responsiveMode:z,setActive:B,setActiveMenuItem:F,reducedMotion:G,left:H,top:J,width:L,height:N}=g(),Q=O(),R=(null==q?void 0:q.id)===_,T=r.Children.count(h)>0,U=o(null),V=l((()=>z&&0===Q),[Q,z]),[W,X]=s(V&&T||Q>=2),Y=e=>{if(P.isEnterKey(e)||P.isSpaceKey(e)){if(T&&e.preventDefault(),!M&&P.isSpaceKey(e)&&e.preventDefault(),V)return;if(T)if(0!==Q||z)X(!W);else{const e=(null==q?void 0:q.id)===_;F(e?null:{id:_,label:S,children:h})}}},Z=e=>{null==M||M(e),B(!1)};return e(d,$(I({},b(A)),{children:T?n(t,{children:[n(p,$(I({active:R,"aria-expanded":z&&0===Q?void 0:R||W,"aria-controls":R||W?z?0===Q?void 0:`${_}-nested-menu-wrapper`:"responsive-vertical-menu-secondary":void 0,"data-component":`responsive-vertical-menu-item-${_}`,"data-depth":Q,"data-role":`responsive-vertical-menu-item-${_}`,depth:Q,hasIcon:!!w||!!j,id:_,onClick:()=>{if(!V)if(0!==Q||z)X(!W);else{const e=(null==q?void 0:q.id)===_;F(e?null:{id:_,label:S,children:h})}},onKeyDown:e=>{z||Y(e)},ref:c,responsive:z,tabIndex:V?-1:0,type:"button"},A),{children:[e(D,{customIcon:j,depth:Q,hasChildren:!0,icon:w,label:S,responsive:z}),!V&&e(u,{"data-component":"responsive-vertical-menu-expander-icon","data-role":"responsive-vertical-menu-expander-icon",depth:Q,expanded:W||R,reduceMotion:!!G,type:Q>=1?"chevron_down_thick":"chevron_right_thick"})]})),W&&e(m,{"data-component":`${_}-nested-menu-wrapper`,"data-role":`${_}-nested-menu-wrapper`,depth:Q,hasIcon:!!w||!!j,id:`${_}-nested-menu-wrapper`,responsive:z,children:e(v,{"data-component":`${_}-nested-menu`,"data-role":`${_}-nested-menu`,depth:Q,hasIcon:!!w||!!j,id:`${_}-nested-menu`,responsive:z,children:e(k.Provider,{value:_,children:h})})}),R&&!z&&e(a,{"data-component":"responsive-vertical-menu-secondary","data-role":"responsive-vertical-menu-secondary",height:N||"100%",id:"responsive-vertical-menu-secondary",left:H,menu:"secondary",reduceMotion:!1,ref:U,responsive:!1,tabIndex:-1,top:J,width:L,children:q.children})]}):(()=>{const n=I({"data-component":`responsive-vertical-menu-item-${_}`,"data-depth":Q,"data-role":`responsive-vertical-menu-item-${_}`,depth:Q,href:x,id:_,onClick:Z,onKeyDown:e=>{z||Y(e)},rel:K,responsive:z,tabIndex:0,target:E},A),t=e(D,{customIcon:j,depth:Q,hasChildren:!1,icon:w,label:S,responsive:z});return e(M&&!x?f:y,$(I({ref:c},n),{children:t}))})()}))})),M=n=>{var{children:t,id:r,label:i}=n,c=C(n,["children","id","label"]);const l=O(),s=o(null),a=o(r||_());return e(S,$(I({id:a.current,label:i},c),{"data-depth":l,ref:s,children:t&&e(k.Provider,{value:r,children:e(j,{children:t})})}))};export{M as ResponsiveVerticalMenuItem,M as default};
1
+ import{jsx as e,jsxs as n,Fragment as r}from"react/jsx-runtime";import t,{useRef as i,forwardRef as o,createContext as c,useMemo as l,useState as s}from"react";import{StyledResponsiveMenu as a}from"../responsive-vertical-menu.style.js";import{StyledResponsiveMenuListItem as d,StyledResponsiveMenuItem as p,StyledIcon as u,StyledNestedMenuWrapper as m,StyledNestedMenu as v,StyledMenuItemContent as h,StyledResponsiveMenuActionButton as f,StyledResponsiveMenuActionLink as y}from"./responsive-vertical-menu-item.style.js";import"../../../../style/utils/filter-styled-system-padding-props.js";import b from"../../../../style/utils/filter-styled-system-margin-props.js";import{useDepth as O,IncreaseDepth as j}from"../__internal__/depth.context.js";import{useResponsiveVerticalMenu as g}from"../responsive-vertical-menu.context.js";import w from"../../../icon/icon.component.js";import _ from"../../../../__internal__/utils/helpers/guid/index.js";import P from"../../../../__internal__/utils/helpers/events/events.js";function x(e,n,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=c(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,c)=>{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=l((()=>B&&0===R),[R,B]),[X,Y]=s(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:c,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:c},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};
@@ -2,6 +2,7 @@ import React, { ReactNode } from "react";
2
2
  import { PaddingProps } from "styled-system";
3
3
  import { TagProps } from "../../../__internal__/utils/helpers/tags";
4
4
  import { IconType } from "../../icon";
5
+ type AriaCurrent = Pick<React.HTMLAttributes<HTMLElement>, "aria-current">["aria-current"];
5
6
  export type VerticalMenuItemClickEvent = React.MouseEvent<HTMLButtonElement | HTMLAnchorElement> | React.KeyboardEvent<HTMLButtonElement | HTMLAnchorElement>;
6
7
  export interface VerticalMenuItemProps<T = React.ElementType> extends PaddingProps, TagProps {
7
8
  /** Children of the menu item - another level of VerticalMenuItems */
@@ -26,7 +27,9 @@ export interface VerticalMenuItemProps<T = React.ElementType> extends PaddingPro
26
27
  onClick?: (event: VerticalMenuItemClickEvent) => void;
27
28
  /** Optional component to render instead of the default div, useful for rendering router link components */
28
29
  component?: T;
30
+ /** Marks the element as the current item within a navigation context. */
31
+ ariaCurrent?: AriaCurrent;
29
32
  }
30
33
  type InferredComponentProps<T extends React.ElementType> = Omit<React.ComponentProps<T>, keyof VerticalMenuItemProps<T>>;
31
- 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;
34
+ 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;
32
35
  export default VerticalMenuItem;
@@ -1 +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 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};
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};
@@ -1 +1 @@
1
- "use strict";var e=require("styled-components"),t=require("styled-system"),i=require("../icon/icon.component.js"),n=require("../icon/icon.style.js"),d=require("../../style/themes/apply-base-theme.js"),a=require("../help/help.component.js"),o=require("../typography/typography.component.js");require("react/jsx-runtime"),require("react");var r=require("../hr/hr.component.js"),l=require("../link/link.component.js"),s=require("../../style/utils/add-focus-styling.js");function p(e){return e&&e.__esModule?e:{default:e}}var c=p(e);const g=c.default.div.attrs(d.default).withConfig({displayName:"heading.style__StyledHeading",componentId:"sc-c7b238d0-0"})(["width:100%;",""],t.margin),y=c.default.div.withConfig({displayName:"heading.style__StyledHeaderContent",componentId:"sc-c7b238d0-1"})(["display:inline-flex;align-items:flex-end;"]),m=c.default.div.withConfig({displayName:"heading.style__StyledHeader",componentId:"sc-c7b238d0-2"})(["",""],(({divider:t,subheader:i,hasBackLink:n})=>e.css([""," "," "," ",""],i&&e.css(["margin-bottom:16px;"]),t&&e.css(["margin-bottom:15px;"]),t&&!i&&e.css(["margin-bottom:20px;"]),n&&e.css(["display:grid;grid-template-columns:min-content auto;"])))),h=c.default(l.Link).withConfig({displayName:"heading.style__StyledHeadingBackButton",componentId:"sc-c7b238d0-3"})(["margin-right:5px;margin-top:2px;box-shadow:none;a,button{margin:0 1px 0 0;text-decoration:none;display:block;&:focus{background-color:transparent;","}&:hover{","{color:var(--colorsActionMinor600);}}","{margin-right:0;display:inline-flex;color:var(--colorsActionMinor500);}}"],s.default(),n.default,n.default),u=c.default(o.Typography).withConfig({displayName:"heading.style__StyledHeadingTitle",componentId:"sc-c7b238d0-4"})(["",""],(({withMargin:t})=>t?e.css(["margin-right:16px;"]):null)),f=c.default.span.withConfig({displayName:"heading.style__StyledHeadingPills",componentId:"sc-c7b238d0-5"})(["line-height:32px;display:inline-block;vertical-align:top;"]),x=c.default.div.withConfig({displayName:"heading.style__StyledSubHeader",componentId:"sc-c7b238d0-6"})(["margin-top:5px;grid-row:2;"," ",""],(({hasBackLink:t})=>t&&e.css(["grid-column:2;"])),(({hasSeparator:t})=>t&&e.css(["grid-row:3;margin-top:0px;"]))),b=c.default(i.default).withConfig({displayName:"heading.style__StyledHeadingIcon",componentId:"sc-c7b238d0-7"})(["height:30px;&:before,&",":before{font-size:24px;}"],n.default),S=c.default.hr.withConfig({displayName:"heading.style__StyledSeparator",componentId:"sc-c7b238d0-8"})(["border-top:2px;border-style:solid;border-color:var(--colorsUtilityMajor100);margin:10px 0 8px;text-align:left;width:50px;"]),_=c.default(r.Hr).withConfig({displayName:"heading.style__StyledDivider",componentId:"sc-c7b238d0-9"})(["margin:15px 0 20px;"]),H=c.default(a.Help).withConfig({displayName:"heading.style__StyledHeaderHelp",componentId:"sc-c7b238d0-10"})(["display:inline-block;margin-left:-6px;margin-right:16px;position:relative;top:-4px;height:22px;"]);exports.StyledDivider=_,exports.StyledHeader=m,exports.StyledHeaderContent=y,exports.StyledHeaderHelp=H,exports.StyledHeading=g,exports.StyledHeadingBackButton=h,exports.StyledHeadingIcon=b,exports.StyledHeadingPills=f,exports.StyledHeadingTitle=u,exports.StyledSeparator=S,exports.StyledSubHeader=x;
1
+ "use strict";var e=require("styled-components"),t=require("styled-system"),i=require("../icon/icon.component.js"),n=require("../icon/icon.style.js"),a=require("../../style/themes/apply-base-theme.js"),d=require("../help/help.component.js"),o=require("../typography/typography.component.js");require("react/jsx-runtime"),require("react");var r=require("../hr/hr.component.js"),l=require("../link/link.component.js"),s=require("../../style/utils/add-focus-styling.js");function p(e){return e&&e.__esModule?e:{default:e}}var c=p(e);const g=c.default.div.attrs(a.default).withConfig({displayName:"heading.style__StyledHeading",componentId:"sc-64d920cb-0"})(["width:100%;",""],t.margin),y=c.default.div.withConfig({displayName:"heading.style__StyledHeaderContent",componentId:"sc-64d920cb-1"})(["display:inline-flex;align-items:flex-end;"]),m=c.default.div.withConfig({displayName:"heading.style__StyledHeader",componentId:"sc-64d920cb-2"})(["",""],(({divider:t,subheader:i,hasBackLink:n})=>e.css([""," "," "," ",""],i&&e.css(["margin-bottom:16px;"]),t&&e.css(["margin-bottom:15px;"]),t&&!i&&e.css(["margin-bottom:20px;"]),n&&e.css(["display:grid;grid-template-columns:min-content auto;"])))),h=c.default(l.Link).withConfig({displayName:"heading.style__StyledHeadingBackButton",componentId:"sc-64d920cb-3"})(["margin-right:5px;margin-top:2px;&&{box-shadow:none;background-color:transparent;}a,button{margin:0 1px 0 0;text-decoration:none;display:block;&:focus{background-color:transparent;","}&:hover{","{color:var(--colorsActionMinor600);}}","{margin-right:0;display:inline-flex;color:var(--colorsActionMinor500);}}"],s.default(),n.default,n.default),u=c.default(o.Typography).withConfig({displayName:"heading.style__StyledHeadingTitle",componentId:"sc-64d920cb-4"})(["",""],(({withMargin:t})=>t?e.css(["margin-right:16px;"]):null)),f=c.default.span.withConfig({displayName:"heading.style__StyledHeadingPills",componentId:"sc-64d920cb-5"})(["line-height:32px;display:inline-block;vertical-align:top;"]),x=c.default.div.withConfig({displayName:"heading.style__StyledSubHeader",componentId:"sc-64d920cb-6"})(["margin-top:5px;grid-row:2;"," ",""],(({hasBackLink:t})=>t&&e.css(["grid-column:2;"])),(({hasSeparator:t})=>t&&e.css(["grid-row:3;margin-top:0px;"]))),b=c.default(i.default).withConfig({displayName:"heading.style__StyledHeadingIcon",componentId:"sc-64d920cb-7"})(["height:30px;&:before,&",":before{font-size:24px;}"],n.default),S=c.default.hr.withConfig({displayName:"heading.style__StyledSeparator",componentId:"sc-64d920cb-8"})(["border-top:2px;border-style:solid;border-color:var(--colorsUtilityMajor100);margin:10px 0 8px;text-align:left;width:50px;"]),_=c.default(r.Hr).withConfig({displayName:"heading.style__StyledDivider",componentId:"sc-64d920cb-9"})(["margin:15px 0 20px;"]),H=c.default(d.Help).withConfig({displayName:"heading.style__StyledHeaderHelp",componentId:"sc-64d920cb-10"})(["display:inline-block;margin-left:-6px;margin-right:16px;position:relative;top:-4px;height:22px;"]);exports.StyledDivider=_,exports.StyledHeader=m,exports.StyledHeaderContent=y,exports.StyledHeaderHelp=H,exports.StyledHeading=g,exports.StyledHeadingBackButton=h,exports.StyledHeadingIcon=b,exports.StyledHeadingPills=f,exports.StyledHeadingTitle=u,exports.StyledSeparator=S,exports.StyledSubHeader=x;
@@ -3,6 +3,7 @@ import { FlexboxProps, LayoutProps, MaxWidthProps, PaddingProps } from "styled-s
3
3
  import { IconType } from "../../icon";
4
4
  import { TagProps } from "../../../__internal__/utils/helpers/tags";
5
5
  export type VariantType = "default" | "alternate";
6
+ type AriaCurrent = Pick<React.HTMLAttributes<HTMLElement>, "aria-current">["aria-current"];
6
7
  interface MenuItemBaseProps extends TagProps, Pick<LayoutProps, "width" | "maxWidth" | "minWidth">, FlexboxProps, PaddingProps {
7
8
  /** onClick handler */
8
9
  onClick?: (event: React.MouseEvent<HTMLAnchorElement> | React.MouseEvent<HTMLButtonElement>) => void;
@@ -26,6 +27,8 @@ interface MenuItemBaseProps extends TagProps, Pick<LayoutProps, "width" | "maxWi
26
27
  showDropdownArrow?: boolean;
27
28
  /** If no text is provided an ariaLabel should be given to facilitate accessibility. */
28
29
  ariaLabel?: string;
30
+ /** Marks the element as the current item within a navigation context. */
31
+ ariaCurrent?: AriaCurrent;
29
32
  /** Callback triggered when submenu opens. Only valid with submenu prop */
30
33
  onSubmenuOpen?: () => void;
31
34
  /** Callback triggered when submenu closes. Only valid with submenu prop */
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("invariant"),r=require("../../../__internal__/focus-trap/focus-trap-utils.js"),u=require("../../../style/utils/filter-styled-system-padding-props.js"),o=require("./menu-item.style.js"),i=require("../../../__internal__/utils/helpers/events/events.js"),l=require("../__internal__/strict-menu.context.js"),s=require("../__internal__/submenu/submenu.component.js"),a=require("../__internal__/submenu/submenu.context.js"),c=require("../menu-segment-title/menu-segment-title.context.js"),d=require("../menu.style.js"),m=require("../../../__internal__/utils/helpers/guid/index.js");function f(e){return e&&e.__esModule?e:{default:e}}var b=f(t),p=f(n);function h(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function y(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),r.forEach((function(t){h(e,t,n[t])}))}return e}function v(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t.push.apply(t,n)}return t}(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))})),e}const O=t.forwardRef(((n,f)=>{var{submenu:h,submenuMaxWidth:O,submenuMinWidth:g,children:j,href:w,onClick:x,target:_,submenuDirection:S="right",icon:I,selected:P,onKeyDown:C,variant:q="default",showDropdownArrow:D=!0,ariaLabel:M,clickToOpen:k,maxWidth:W,onSubmenuOpen:F,onSubmenuClose:E,overrideColor:L,rel:T,as:V,"data-element":K,"data-role":A}=n,H=function(e,t){if(null==e)return{};var n,r,u=function(e,t){if(null==e)return{};var n,r,u={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(u[n]=e[n]);return u}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(u[n]=e[n])}return u}(n,["submenu","submenuMaxWidth","submenuMinWidth","children","href","onClick","target","submenuDirection","icon","selected","onKeyDown","variant","showDropdownArrow","ariaLabel","clickToOpen","maxWidth","onSubmenuOpen","onSubmenuClose","overrideColor","rel","as","data-element","data-role"]);p.default(I||j,"Either prop `icon` must be defined or this node must have `children`."),p.default(j||M||h||"string"==typeof h&&h.length,"If no text or node is provided via the `submenu` prop, an `ariaLabel` should be given to facilitate accessibility."),p.default("boolean"==typeof h||void 0===h||b.default.isValidElement(h)||j&&"string"==typeof h&&h.length,"You should not pass `children` when `submenu` is an empty string");const R=t.useRef(m.default()),{isChildOfSegment:N,overriddenVariant:Y}=t.useContext(c.MenuSegmentContext),{inFullscreenView:z,registerItem:B,unregisterItem:G,focusId:J,updateFocusId:Q,menuType:U}=l.useStrictMenuContext(),X=t.useContext(a.default),Z=Object.keys(X).length>0,{submenuFocusId:$,updateFocusId:ee,handleKeyDown:te,submenuHasMaxWidth:ne,closeSubmenu:re}=X,ue=J===R.current,oe=$?$===R.current:void 0,[ie,le]=t.useState(null),[se,ae]=t.useState(null);t.useLayoutEffect((()=>{var e;const t=null!==(e=null==ie?void 0:ie.querySelector(r.defaultFocusableSelectors))&&void 0!==e?e:null;t!==se&&ae(t)}),[se,ie]),t.useEffect((()=>{const e=R.current;return B&&B(e),()=>{G&&G(e)}}),[B,G]),t.useEffect((()=>{if(ue&&!oe||oe){if(se)return void se.focus();null==ie||ie.focus()}}),[se,ue,oe,ie]),t.useImperativeHandle(f,(()=>({focus(){null==ie||ie.focus()}})),[ie]);const ce=e=>{Z?(e.stopPropagation(),null==ee||ee(R.current)):null==Q||Q(R.current)},de={className:w||x?"carbon-menu-item--has-link":"",href:se?void 0:w,onClick:se||!w&&!x?void 0:e=>{null==x||x(e),null==re||re()},target:_,rel:T,icon:I,removeAriaLabelOnIcon:!0,selected:P,onKeyDown:z?void 0:e=>{null==C||C(e),i.default.isEscKey(e)&&(null==ie||ie.focus()),null==te||te(e)},overrideColor:L,ref:le};"alternate"===Y&&N&&"alternate"===q&&["white","black"].includes(U)&&(de.overrideColor=!0);const me=e=>W&&"string"==typeof e?e:void 0,fe=z?void 0:W,be=!(x||w||se);if(h)return e.jsx(d.StyledMenuItem,v(y({"data-component":"menu-item","data-element":K,"data-role":A,menuType:U,title:me(h),maxWidth:fe},H),{inFullscreenView:z,id:R.current,as:V,onFocus:ce,children:e.jsx(s.default,v(y(v(y(v(y({},"boolean"!=typeof h&&{title:h}),{submenuDirection:S,showDropdownArrow:D,clickToOpen:k,maxWidth:W,asPassiveItem:be,ariaLabel:M,onSubmenuOpen:F,onSubmenuClose:E,submenuMaxWidth:O,submenuMinWidth:g}),de),{variant:q}),H),{children:j}))}));const pe=u.default(H),he=!!(null==ie?void 0:ie.querySelector("[data-element='input']"));return e.jsx(d.StyledMenuItem,v(y({"data-component":"menu-item","data-element":K,"data-role":A,menuType:U,inSubmenu:Z,title:me(j),maxWidth:fe},H),{inFullscreenView:z&&!Object.keys(X).length,id:R.current,as:V,onFocus:ce,children:e.jsx(o.default,v(y(v(y({menuType:U,"data-role":"menu-item-wrapper"},de),{menuItemVariant:q,ariaLabel:M,maxWidth:ne?void 0:fe,inFullscreenView:z,asPassiveItem:be}),pe),{asDiv:he||"div"===V,hasFocusableChild:!!se,hasInput:he,inSubmenu:Z,children:j}))}))}));exports.MenuItem=O,exports.default=O;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("invariant"),r=require("../../../__internal__/focus-trap/focus-trap-utils.js"),u=require("../../../style/utils/filter-styled-system-padding-props.js"),i=require("./menu-item.style.js"),o=require("../../../__internal__/utils/helpers/events/events.js"),l=require("../__internal__/strict-menu.context.js"),a=require("../__internal__/submenu/submenu.component.js"),s=require("../__internal__/submenu/submenu.context.js"),c=require("../menu-segment-title/menu-segment-title.context.js"),d=require("../menu.style.js"),m=require("../../../__internal__/utils/helpers/guid/index.js");function f(e){return e&&e.__esModule?e:{default:e}}var b=f(t),p=f(n);function h(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function y(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),r.forEach((function(t){h(e,t,n[t])}))}return e}function v(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t.push.apply(t,n)}return t}(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))})),e}const O=t.forwardRef(((n,f)=>{var{submenu:h,submenuMaxWidth:O,submenuMinWidth:g,children:j,href:w,onClick:x,target:_,submenuDirection:S="right",icon:C,selected:I,onKeyDown:P,variant:q="default",showDropdownArrow:D=!0,ariaLabel:M,ariaCurrent:k,clickToOpen:W,maxWidth:F,onSubmenuOpen:E,onSubmenuClose:L,overrideColor:T,rel:V,as:K,"data-element":A,"data-role":H}=n,R=function(e,t){if(null==e)return{};var n,r,u=function(e,t){if(null==e)return{};var n,r,u={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(u[n]=e[n]);return u}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(u[n]=e[n])}return u}(n,["submenu","submenuMaxWidth","submenuMinWidth","children","href","onClick","target","submenuDirection","icon","selected","onKeyDown","variant","showDropdownArrow","ariaLabel","ariaCurrent","clickToOpen","maxWidth","onSubmenuOpen","onSubmenuClose","overrideColor","rel","as","data-element","data-role"]);p.default(C||j,"Either prop `icon` must be defined or this node must have `children`."),p.default(j||M||h||"string"==typeof h&&h.length,"If no text or node is provided via the `submenu` prop, an `ariaLabel` should be given to facilitate accessibility."),p.default("boolean"==typeof h||void 0===h||b.default.isValidElement(h)||j&&"string"==typeof h&&h.length,"You should not pass `children` when `submenu` is an empty string");const N=t.useRef(m.default()),{isChildOfSegment:Y,overriddenVariant:z}=t.useContext(c.MenuSegmentContext),{inFullscreenView:B,registerItem:G,unregisterItem:J,focusId:Q,updateFocusId:U,menuType:X}=l.useStrictMenuContext(),Z=t.useContext(s.default),$=Object.keys(Z).length>0,{submenuFocusId:ee,updateFocusId:te,handleKeyDown:ne,submenuHasMaxWidth:re,closeSubmenu:ue}=Z,ie=Q===N.current,oe=ee?ee===N.current:void 0,[le,ae]=t.useState(null),[se,ce]=t.useState(null);t.useLayoutEffect((()=>{var e;const t=null!==(e=null==le?void 0:le.querySelector(r.defaultFocusableSelectors))&&void 0!==e?e:null;t!==se&&ce(t)}),[se,le]),t.useEffect((()=>{const e=N.current;return G&&G(e),()=>{J&&J(e)}}),[G,J]),t.useEffect((()=>{if(ie&&!oe||oe){if(se)return void se.focus();null==le||le.focus()}}),[se,ie,oe,le]),t.useImperativeHandle(f,(()=>({focus(){null==le||le.focus()}})),[le]);const de=e=>{$?(e.stopPropagation(),null==te||te(N.current)):null==U||U(N.current)},me={className:w||x?"carbon-menu-item--has-link":"",href:se?void 0:w,onClick:se||!w&&!x?void 0:e=>{null==x||x(e),null==ue||ue()},target:_,rel:V,icon:C,removeAriaLabelOnIcon:!0,selected:I,onKeyDown:B?void 0:e=>{null==P||P(e),o.default.isEscKey(e)&&(null==le||le.focus()),null==ne||ne(e)},overrideColor:T,ref:ae};"alternate"===z&&Y&&"alternate"===q&&["white","black"].includes(X)&&(me.overrideColor=!0);const fe=e=>F&&"string"==typeof e?e:void 0,be=B?void 0:F,pe=!(x||w||se);if(h)return e.jsx(d.StyledMenuItem,v(y({"data-component":"menu-item","data-element":A,"data-role":H,menuType:X,title:fe(h),maxWidth:be},R),{inFullscreenView:B,id:N.current,as:K,onFocus:de,children:e.jsx(a.default,v(y(v(y(v(y({},"boolean"!=typeof h&&{title:h}),{submenuDirection:S,showDropdownArrow:D,clickToOpen:W,maxWidth:F,asPassiveItem:pe,ariaLabel:M,onSubmenuOpen:E,onSubmenuClose:L,submenuMaxWidth:O,submenuMinWidth:g}),me),{variant:q}),R),{children:j}))}));const he=u.default(R),ye=!!(null==le?void 0:le.querySelector("[data-element='input']"));return e.jsx(d.StyledMenuItem,v(y({"data-component":"menu-item","data-element":A,"data-role":H,menuType:X,inSubmenu:$,title:fe(j),maxWidth:be},R),{inFullscreenView:B&&!Object.keys(Z).length,id:N.current,as:K,onFocus:de,children:e.jsx(i.default,v(y(v(y({menuType:X,"data-role":"menu-item-wrapper"},me),{menuItemVariant:q,ariaLabel:M,"aria-current":k,maxWidth:re?void 0:be,inFullscreenView:B,asPassiveItem:pe}),he),{asDiv:ye||"div"===K,hasFocusableChild:!!se,hasInput:ye,inSubmenu:$,children:j}))}))}));exports.MenuItem=O,exports.default=O;
@@ -1,7 +1,7 @@
1
1
  import { PaddingProps } from "styled-system";
2
2
  import { MenuWithChildren } from "./menu-item.component";
3
3
  import type { MenuType } from "../menu.types";
4
- interface StyledMenuItemWrapperProps extends Pick<MenuWithChildren, "href" | "showDropdownArrow" | "overrideColor" | "clickToOpen" | "maxWidth">, PaddingProps {
4
+ interface StyledMenuItemWrapperProps extends Pick<MenuWithChildren, "href" | "showDropdownArrow" | "overrideColor" | "clickToOpen" | "maxWidth" | "ariaCurrent">, PaddingProps {
5
5
  menuType: MenuType;
6
6
  selected?: boolean;
7
7
  hasSubmenu?: boolean;
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var o=require("styled-components"),n=require("styled-system"),t=require("../menu.config.js"),e=require("../../link/link.component.js"),a=require("../../button/button.style.js"),r=require("../../icon-button/icon-button.style.js"),c=require("../../icon/icon.style.js"),i=require("../../link/link.style.js"),s=require("../../../style/themes/apply-base-theme.js"),u=require("../../../style/utils/add-focus-styling.js");function d(o){return o&&o.__esModule?o:{default:o}}const l=o=>{var n,t;const{paddingRight:e}=o,a=null===(t=String(e))||void 0===t||null===(n=t.match(/\d+/))||void 0===n?void 0:n[0];if("var(--spacing000)"===e||"0"===a)return{padding:"var(--spacing200)",iconSpacing:"2px"};switch(e){case"var(--spacing100)":return{padding:"var(--spacing300)",iconSpacing:e};case"var(--spacing200)":return{padding:"var(--spacing400)",iconSpacing:e};case"var(--spacing300)":return{padding:"var(--spacing500)",iconSpacing:e};case"var(--spacing400)":return{padding:"var(--spacing600)",iconSpacing:e};case"var(--spacing500)":return{padding:"var(--spacing700)",iconSpacing:e};case"var(--spacing600)":return{padding:"var(--spacing800)",iconSpacing:e};case"var(--spacing700)":return{padding:"var(--spacing900)",iconSpacing:e};case"var(--spacing800)":return{padding:"var(--spacing1000)",iconSpacing:e};default:return a?{padding:`${16+Number(a)}px`,iconSpacing:`${a}px`}:{padding:"var(--spacing400)",iconSpacing:"var(--spacing200)"}}},p=d(o).default.a.attrs(s.default).attrs({as:e.Link}).withConfig({displayName:"menu-item.style__StyledMenuItemWrapper",componentId:"sc-39c6a74b-0"})([""," &&&{> a,> button{","}}"],(({menuType:e,selected:s,hasSubmenu:d,isOpen:p,menuItemVariant:g,showDropdownArrow:b,href:h,clickToOpen:f,maxWidth:m,inFullscreenView:v,overrideColor:x,asPassiveItem:k,asDiv:y,hasFocusableChild:S,hasInput:w,inSubmenu:C})=>o.css(["display:flex;align-items:center;min-height:40px;position:relative;box-shadow:none;a,button{min-height:40px;height:100%;box-sizing:border-box;font-size:14px;font-weight:500;&:not(.search-button) > ","{margin-right:var(--spacing050);}}&& a:focus,&& button:focus{",'}:has([data-element="input"]) ',"{width:100%;}"," "," "," "," "," button,"," button,a,"," a{margin:0px;text-align:left;",'}&&&{a,button,[data-component="icon"],'," a,"," button,",' [data-component="icon"]{font-weight:500;text-decoration:none;',"}","}"," "," "," "," ",""],c.default,u.default(!0),i.StyledContent,!x&&o.css(["background-color:",';&:has([data-popover-container-button="true"]){background-color:var(--colorsActionMajor500);}'],t.default[e].background),x&&o.css(["&&&&{background-color:",";}"],"alternate"===g?t.default[e].alternate:t.default[e].submenuItemBackground),!v&&o.css(["max-width:inherit;width:inherit;height:inherit;> a,> button{display:flex;align-items:center;"," width:inherit;max-width:inherit;}&&{a:focus,button:focus{background-color:",";color:",';z-index:1;position:relative;}}&:has([data-popover-container-button="true"]){&&{a:focus,button:focus{background-color:var(--colorsActionMajor500);}}}&&&{a,button{',"}a:hover,button:hover{","{border-radius:0;background-color:transparent;}"," ::before{border-top-color:var(--colorsComponentsMenuYang100);}}}"],C?"":"justify-content: center;",t.default[e].background,t.default[e].color,m&&o.css(["box-sizing:border-box;max-width:inherit;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;vertical-align:bottom;display:block;"]),a.default,!y&&!k&&o.css(['background-color:var(--colorsComponentsMenuAutumnStandard600);color:var(--colorsComponentsMenuYang100);[data-component="icon"]{color:var(--colorsComponentsMenuYang100);}'])),S&&o.css(["&& "," ",'{> span{display:inline-flex;margin-right:0;}:focus{outline:none;[data-component="icon"]{color:',";}}}"],!v&&o.css(["&& > a:not(:has(button)){padding:11px 16px;}> a:has(",":not(.search-button)){height:100%;","{height:inherit;div{height:inherit;}}","{min-height:40px;padding:10px 0px;box-sizing:border-box;height:100%;}}"],a.default,i.StyledContent,a.default),r.default,t.default[e].color),!S&&!v&&o.css(["",""],d||m?o.css(["> a,> button{padding:11px 16px ",";}"],d&&m?"12px":"10px"):o.css(["> a,> button{padding:11px 16px;}"])),i.StyledLink,i.StyledLink,v&&o.css(["height:auto;white-space:normal;","{top:-2px;}"],c.default),i.StyledLink,i.StyledLink,i.StyledLink,!w&&`color: ${t.default[e].color};`,!v&&o.css(["a > ",",button > ","{display:inline-block;height:18px;top:-2px;}"],c.default,c.default),s&&o.css(["background-color:",";a:focus,button:focus{background-color:",";}a:hover,button:hover{background-color:var(--colorsComponentsMenuAutumnStandard600);}"],t.default[e].selected,t.default[e].selected),"alternate"===g&&!v&&o.css(["&&&{background-color:",";}&&& a:focus,&&& button:focus{background-color:",";}",""],t.default[e].alternate,t.default[e].alternate,!w&&o.css(["&&& a:hover,&&& button:hover{background-color:",";}"],t.default[e].alternateHover)),p&&o.css(["a,button{background-color:",";color:",";}"],t.default[e].submenuItemBackground,t.default[e].color),d&&o.css(["background-color:",";a:focus,button:focus{background-color:",";color:",';[data-component="icon"]{color:',";}","}a:hover,button:hover{background-color:",";color:var(--colorsComponentsMenuYang100);",' [data-component="icon"]{color:',";}}"," ",""],t.default[e].submenuBackground,t.default[e].submenuBackground,t.default[e].color,t.default[e].color,f&&p&&o.css(["background-color:",";"],t.default[e].submenuOpenedBackground),t.default[e].submenuOpenedBackground,!(h||f)&&o.css(["cursor:default;background-color:",";color:",";"],t.default[e].submenuItemBackground,t.default[e].color),t.default[e].color,s&&o.css(["background-color:",";a:focus,button:focus{background-color:",";}a:hover,button:hover{background-color:var(--colorsComponentsMenuAutumnStandard600);color:var(--colorsComponentsMenuYang100);}"],t.default[e].submenuSelected,t.default[e].submenuSelected),b&&o.css(["&&&{> a,> button:not(","){padding-right:",";}}a::before,button::before{display:block;margin-top:-1px;pointer-events:none;position:absolute;right:",';top:50%;z-index:2;content:"";width:0;height:0;border-width:5px 4px 4px;border-style:solid;border-top-color:initial;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}'],r.default,(o=>l(n.padding(o)).padding),(o=>l(n.padding(o)).iconSpacing))),v&&o.css([""," > a,> button{min-height:40px;line-height:40px;padding:0px 16px;width:100vw;box-sizing:border-box;}a:focus,button:focus{z-index:1;position:relative;}","}"],y&&o.css(["&&&{> a,> button{color:",";outline:none;}> button:hover,> a:hover{background-color:transparent;cursor:default;outline:none;color:",";}}"],t.default[e].title,t.default[e].title),!k&&o.css(["&&{> a:focus,> a:hover,> button:focus,> button:hover{background-color:var(--colorsComponentsMenuAutumnStandard600);color:var(--colorsComponentsMenuYang100);","}}"],!w&&o.css(['[data-component="icon"]{color:var(--colorsComponentsMenuYang100);}']))))),n.padding);exports.default=p;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var o=require("styled-components"),n=require("styled-system"),t=require("../menu.config.js"),e=require("../../link/link.component.js"),a=require("../../button/button.style.js"),r=require("../../icon-button/icon-button.style.js"),c=require("../../icon/icon.style.js"),i=require("../../link/link.style.js"),s=require("../../../style/themes/apply-base-theme.js"),u=require("../../../style/utils/add-focus-styling.js");function d(o){return o&&o.__esModule?o:{default:o}}const l=o=>{var n,t;const{paddingRight:e}=o,a=null===(t=String(e))||void 0===t||null===(n=t.match(/\d+/))||void 0===n?void 0:n[0];if("var(--spacing000)"===e||"0"===a)return{padding:"var(--spacing200)",iconSpacing:"2px"};switch(e){case"var(--spacing100)":return{padding:"var(--spacing300)",iconSpacing:e};case"var(--spacing200)":return{padding:"var(--spacing400)",iconSpacing:e};case"var(--spacing300)":return{padding:"var(--spacing500)",iconSpacing:e};case"var(--spacing400)":return{padding:"var(--spacing600)",iconSpacing:e};case"var(--spacing500)":return{padding:"var(--spacing700)",iconSpacing:e};case"var(--spacing600)":return{padding:"var(--spacing800)",iconSpacing:e};case"var(--spacing700)":return{padding:"var(--spacing900)",iconSpacing:e};case"var(--spacing800)":return{padding:"var(--spacing1000)",iconSpacing:e};default:return a?{padding:`${16+Number(a)}px`,iconSpacing:`${a}px`}:{padding:"var(--spacing400)",iconSpacing:"var(--spacing200)"}}},p=d(o).default.a.attrs(s.default).attrs({as:e.Link}).withConfig({displayName:"menu-item.style__StyledMenuItemWrapper",componentId:"sc-2b8f9da8-0"})([""," &&&{> a,> button{","}}"],(({menuType:e,selected:s,hasSubmenu:d,isOpen:p,menuItemVariant:g,showDropdownArrow:b,href:h,clickToOpen:f,maxWidth:m,inFullscreenView:v,overrideColor:x,asPassiveItem:k,asDiv:y,hasFocusableChild:S,hasInput:w,inSubmenu:C})=>o.css(["display:flex;align-items:center;min-height:40px;position:relative;box-shadow:none;a,button{min-height:40px;height:100%;box-sizing:border-box;font-size:14px;font-weight:500;&:not(.search-button) > ","{margin-right:var(--spacing050);}}&& a:focus,&& button:focus{",'}:has([data-element="input"]) ',"{width:100%;}"," "," "," "," "," button,"," button,a,"," a{margin:0px;text-align:left;",'}&&&{a,button,[data-component="icon"],'," a,"," button,",' [data-component="icon"]{font-weight:500;text-decoration:none;',"}","}"," "," "," "," ",""],c.default,u.default(!0),i.StyledContent,!x&&o.css(["background-color:",';&:has([data-popover-container-button="true"]){background-color:var(--colorsActionMajor500);}'],t.default[e].background),x&&o.css(["&&&&{background-color:",";}"],"alternate"===g?t.default[e].alternate:t.default[e].submenuItemBackground),!v&&o.css(["max-width:inherit;width:inherit;height:inherit;> a,> button{display:flex;align-items:center;"," width:inherit;max-width:inherit;}&&{a:focus,button:focus{background-color:",";color:",';z-index:1;position:relative;}}&:has([data-popover-container-button="true"]){&&{a:focus,button:focus{background-color:var(--colorsActionMajor500);}}}&&&{a,button{',"}a:hover,button:hover{","{border-radius:0;background-color:transparent;}"," ::before{border-top-color:var(--colorsComponentsMenuYang100);}}}"],C?"":"justify-content: center;",t.default[e].background,t.default[e].color,m&&o.css(["box-sizing:border-box;max-width:inherit;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;vertical-align:bottom;display:block;"]),a.default,!y&&!k&&o.css(['background-color:var(--colorsComponentsMenuAutumnStandard600);color:var(--colorsComponentsMenuYang100);[data-component="icon"]{color:var(--colorsComponentsMenuYang100);}'])),S&&o.css(["&& "," ",'{> span{display:inline-flex;margin-right:0;}:focus{outline:none;[data-component="icon"]{color:',";}}}"],!v&&o.css(["&& > a:not(:has(button)){padding:11px 16px;}> a:has(",":not(.search-button)){height:100%;","{height:inherit;div{height:inherit;}}","{min-height:40px;padding:10px 0px;box-sizing:border-box;height:100%;}}"],a.default,i.StyledContent,a.default),r.default,t.default[e].color),!S&&!v&&o.css(["",""],d||m?o.css(["> a,> button{padding:11px 16px ",";}"],d&&m?"12px":"10px"):o.css(["> a,> button{padding:11px 16px;}"])),i.StyledLink,i.StyledLink,v&&o.css(["height:auto;white-space:normal;","{top:-2px;}"],c.default),i.StyledLink,i.StyledLink,i.StyledLink,!w&&`color: ${t.default[e].color};`,!v&&o.css(["a > ",",button > ","{display:inline-block;height:18px;top:-2px;}"],c.default,c.default),s&&o.css(["background-color:",";a:focus,button:focus{background-color:",";}a:hover,button:hover{background-color:var(--colorsComponentsMenuAutumnStandard600);}"],t.default[e].selected,t.default[e].selected),"alternate"===g&&!v&&o.css(["&&&{background-color:",";}&&& a:focus,&&& button:focus{background-color:",";}",""],t.default[e].alternate,t.default[e].alternate,!w&&o.css(["&&& a:hover,&&& button:hover{background-color:",";}"],t.default[e].alternateHover)),p&&o.css(["a,button{background-color:",";color:",";}"],t.default[e].submenuItemBackground,t.default[e].color),d&&o.css(["background-color:",";a:focus,button:focus{background-color:",";color:",';[data-component="icon"]{color:',";}","}a:hover,button:hover{background-color:",";color:var(--colorsComponentsMenuYang100);",' [data-component="icon"]{color:',";}}"," ",""],t.default[e].submenuBackground,t.default[e].submenuBackground,t.default[e].color,t.default[e].color,f&&p&&o.css(["background-color:",";"],t.default[e].submenuOpenedBackground),t.default[e].submenuOpenedBackground,!(h||f)&&o.css(["cursor:default;background-color:",";color:",";"],t.default[e].submenuItemBackground,t.default[e].color),t.default[e].color,s&&o.css(["background-color:",";a:focus,button:focus{background-color:",";}a:hover,button:hover{background-color:var(--colorsComponentsMenuAutumnStandard600);color:var(--colorsComponentsMenuYang100);}"],t.default[e].submenuSelected,t.default[e].submenuSelected),b&&o.css(["&&&{> a,> button:not(","){padding-right:",";}}a::before,button::before{display:block;margin-top:-1px;pointer-events:none;position:absolute;right:",';top:50%;z-index:2;content:"";width:0;height:0;border-width:5px 4px 4px;border-style:solid;border-top-color:initial;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}'],r.default,(o=>l(n.padding(o)).padding),(o=>l(n.padding(o)).iconSpacing))),v&&o.css([""," > a,> button{min-height:40px;line-height:40px;padding:0px 16px;width:100vw;box-sizing:border-box;}a:focus,button:focus{z-index:1;position:relative;}","}"],y&&o.css(["&&&{> a,> button{color:",";outline:none;}> button:hover,> a:hover{background-color:transparent;cursor:default;outline:none;color:",";}}"],t.default[e].title,t.default[e].title),!k&&o.css(["&&{> a:focus,> a:hover,> button:focus,> button:hover{background-color:var(--colorsComponentsMenuAutumnStandard600);color:var(--colorsComponentsMenuYang100);","}}"],!w&&o.css(['[data-component="icon"]{color:var(--colorsComponentsMenuYang100);}']))))),n.padding);exports.default=p;
@@ -1,6 +1,7 @@
1
1
  import React, { ReactNode } from "react";
2
2
  import { MarginProps, PaddingProps } from "styled-system";
3
3
  import { IconType } from "../../../icon";
4
+ type AriaCurrent = Pick<React.HTMLAttributes<HTMLElement>, "aria-current">["aria-current"];
4
5
  export type ResponsiveVerticalMenuItemClickEvent = React.MouseEvent<HTMLButtonElement | HTMLAnchorElement> | React.KeyboardEvent<HTMLButtonElement | HTMLAnchorElement>;
5
6
  interface BaseItemProps extends MarginProps, PaddingProps {
6
7
  /** The content of the menu item. This will render the menu item as a parent menu. */
@@ -21,6 +22,8 @@ interface BaseItemProps extends MarginProps, PaddingProps {
21
22
  rel?: string;
22
23
  /** The target to use for the menu item. */
23
24
  target?: string;
25
+ /** Marks the element as the current item within a navigation context. */
26
+ ariaCurrent?: AriaCurrent;
24
27
  }
25
28
  export interface ResponsiveVerticalMenuItemProps extends Omit<BaseItemProps, "id"> {
26
29
  /** The unique identifier for the menu item. */
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("../responsive-vertical-menu.style.js"),r=require("./responsive-vertical-menu-item.style.js");require("../../../../style/utils/filter-styled-system-padding-props.js");var i=require("../../../../style/utils/filter-styled-system-margin-props.js"),s=require("../__internal__/depth.context.js"),o=require("../responsive-vertical-menu.context.js"),l=require("../../../icon/icon.component.js"),c=require("../../../../__internal__/utils/helpers/guid/index.js"),a=require("../../../../__internal__/utils/helpers/events/events.js");function d(e){return e&&e.__esModule?e:{default:e}}var u=d(t);function p(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function v(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),r.forEach((function(t){p(e,t,n[t])}))}return e}function h(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t.push.apply(t,n)}return t}(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))})),e}function m(e,t){if(null==e)return{};var n,r,i=function(e,t){if(null==e)return{};var n,r,i={},s=Object.keys(e);for(r=0;r<s.length;r++)n=s[r],t.indexOf(n)>=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(r=0;r<s.length;r++)n=s[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}const f=t.createContext(void 0),y=({customIcon:t,depth:n,hasChildren:i,icon:s,label:o,responsive:c})=>t?e.jsxs(r.StyledMenuItemContent,{"data-component":"responsive-vertical-menu-custom-icon","data-role":"responsive-vertical-menu-custom-icon",depth:n,hasChildren:i,icon:!0,responsive:c,children:[t,o]}):e.jsxs(r.StyledMenuItemContent,{"data-component":"responsive-vertical-menu-icon","data-role":"responsive-vertical-menu-icon",depth:n,hasChildren:i,icon:!!s,responsive:c,children:[s&&e.jsx(l.default,{type:s}),o]}),j=t.forwardRef(((l,c)=>{var{children:d,customIcon:p,icon:j,id:b,href:x,label:O,onClick:g,rel:w,target:I}=l,M=m(l,["children","customIcon","icon","id","href","label","onClick","rel","target"]);const{activeMenuItem:_,responsiveMode:S,setActive:P,setActiveMenuItem:C,reducedMotion:q,left:D,top:R,width:$,height:k}=o.useResponsiveVerticalMenu(),K=s.useDepth(),A=(null==_?void 0:_.id)===b,E=u.default.Children.count(d)>0,L=t.useRef(null),N=t.useMemo((()=>S&&0===K),[K,S]),[V,B]=t.useState(N&&E||K>=2),F=e=>{if(a.default.isEnterKey(e)||a.default.isSpaceKey(e)){if(E&&e.preventDefault(),!g&&a.default.isSpaceKey(e)&&e.preventDefault(),N)return;if(E)if(0!==K||S)B(!V);else{const e=(null==_?void 0:_.id)===b;C(e?null:{id:b,label:O,children:d})}}},W=e=>{null==g||g(e),P(!1)};return e.jsx(r.StyledResponsiveMenuListItem,h(v({},i.default(M)),{children:E?e.jsxs(e.Fragment,{children:[e.jsxs(r.StyledResponsiveMenuItem,h(v({active:A,"aria-expanded":S&&0===K?void 0:A||V,"aria-controls":A||V?S?0===K?void 0:`${b}-nested-menu-wrapper`:"responsive-vertical-menu-secondary":void 0,"data-component":`responsive-vertical-menu-item-${b}`,"data-depth":K,"data-role":`responsive-vertical-menu-item-${b}`,depth:K,hasIcon:!!j||!!p,id:b,onClick:()=>{if(!N)if(0!==K||S)B(!V);else{const e=(null==_?void 0:_.id)===b;C(e?null:{id:b,label:O,children:d})}},onKeyDown:e=>{S||F(e)},ref:c,responsive:S,tabIndex:N?-1:0,type:"button"},M),{children:[e.jsx(y,{customIcon:p,depth:K,hasChildren:!0,icon:j,label:O,responsive:S}),!N&&e.jsx(r.StyledIcon,{"data-component":"responsive-vertical-menu-expander-icon","data-role":"responsive-vertical-menu-expander-icon",depth:K,expanded:V||A,reduceMotion:!!q,type:K>=1?"chevron_down_thick":"chevron_right_thick"})]})),V&&e.jsx(r.StyledNestedMenuWrapper,{"data-component":`${b}-nested-menu-wrapper`,"data-role":`${b}-nested-menu-wrapper`,depth:K,hasIcon:!!j||!!p,id:`${b}-nested-menu-wrapper`,responsive:S,children:e.jsx(r.StyledNestedMenu,{"data-component":`${b}-nested-menu`,"data-role":`${b}-nested-menu`,depth:K,hasIcon:!!j||!!p,id:`${b}-nested-menu`,responsive:S,children:e.jsx(f.Provider,{value:b,children:d})})}),A&&!S&&e.jsx(n.StyledResponsiveMenu,{"data-component":"responsive-vertical-menu-secondary","data-role":"responsive-vertical-menu-secondary",height:k||"100%",id:"responsive-vertical-menu-secondary",left:D,menu:"secondary",reduceMotion:!1,ref:L,responsive:!1,tabIndex:-1,top:R,width:$,children:_.children})]}):(()=>{const t=v({"data-component":`responsive-vertical-menu-item-${b}`,"data-depth":K,"data-role":`responsive-vertical-menu-item-${b}`,depth:K,href:x,id:b,onClick:W,onKeyDown:e=>{S||F(e)},rel:w,responsive:S,tabIndex:0,target:I},M),n=e.jsx(y,{customIcon:p,depth:K,hasChildren:!1,icon:j,label:O,responsive:S});return g&&!x?e.jsx(r.StyledResponsiveMenuActionButton,h(v({ref:c},t),{children:n})):e.jsx(r.StyledResponsiveMenuActionLink,h(v({ref:c},t),{children:n}))})()}))})),b=n=>{var{children:r,id:i,label:o}=n,l=m(n,["children","id","label"]);const a=s.useDepth(),d=t.useRef(null),u=t.useRef(i||c.default());return e.jsx(j,h(v({id:u.current,label:o},l),{"data-depth":a,ref:d,children:r&&e.jsx(f.Provider,{value:i,children:e.jsx(s.IncreaseDepth,{children:r})})}))};exports.ResponsiveVerticalMenuItem=b,exports.default=b;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("../responsive-vertical-menu.style.js"),r=require("./responsive-vertical-menu-item.style.js");require("../../../../style/utils/filter-styled-system-padding-props.js");var i=require("../../../../style/utils/filter-styled-system-margin-props.js"),s=require("../__internal__/depth.context.js"),o=require("../responsive-vertical-menu.context.js"),l=require("../../../icon/icon.component.js"),c=require("../../../../__internal__/utils/helpers/guid/index.js"),a=require("../../../../__internal__/utils/helpers/events/events.js");function d(e){return e&&e.__esModule?e:{default:e}}var u=d(t);function p(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function v(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),r.forEach((function(t){p(e,t,n[t])}))}return e}function h(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t.push.apply(t,n)}return t}(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))})),e}function m(e,t){if(null==e)return{};var n,r,i=function(e,t){if(null==e)return{};var n,r,i={},s=Object.keys(e);for(r=0;r<s.length;r++)n=s[r],t.indexOf(n)>=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(r=0;r<s.length;r++)n=s[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}const f=t.createContext(void 0),y=({customIcon:t,depth:n,hasChildren:i,icon:s,label:o,responsive:c})=>t?e.jsxs(r.StyledMenuItemContent,{"data-component":"responsive-vertical-menu-custom-icon","data-role":"responsive-vertical-menu-custom-icon",depth:n,hasChildren:i,icon:!0,responsive:c,children:[t,o]}):e.jsxs(r.StyledMenuItemContent,{"data-component":"responsive-vertical-menu-icon","data-role":"responsive-vertical-menu-icon",depth:n,hasChildren:i,icon:!!s,responsive:c,children:[s&&e.jsx(l.default,{type:s}),o]}),j=t.forwardRef(((l,c)=>{var{children:d,customIcon:p,icon:j,id:b,href:x,label:O,onClick:g,rel:w,target:I,ariaCurrent:M}=l,_=m(l,["children","customIcon","icon","id","href","label","onClick","rel","target","ariaCurrent"]);const{activeMenuItem:S,responsiveMode:P,setActive:C,setActiveMenuItem:q,reducedMotion:D,left:R,top:$,width:k,height:K}=o.useResponsiveVerticalMenu(),A=s.useDepth(),E=(null==S?void 0:S.id)===b,L=u.default.Children.count(d)>0,N=t.useRef(null),V=t.useMemo((()=>P&&0===A),[A,P]),[B,F]=t.useState(V&&L||A>=2),W=e=>{if(a.default.isEnterKey(e)||a.default.isSpaceKey(e)){if(L&&e.preventDefault(),!g&&a.default.isSpaceKey(e)&&e.preventDefault(),V)return;if(L)if(0!==A||P)F(!B);else{const e=(null==S?void 0:S.id)===b;q(e?null:{id:b,label:O,children:d})}}},z=e=>{null==g||g(e),C(!1)};return e.jsx(r.StyledResponsiveMenuListItem,h(v({},i.default(_)),{children:L?e.jsxs(e.Fragment,{children:[e.jsxs(r.StyledResponsiveMenuItem,h(v({active:E,"aria-expanded":P&&0===A?void 0:E||B,"aria-controls":E||B?P?0===A?void 0:`${b}-nested-menu-wrapper`:"responsive-vertical-menu-secondary":void 0,"data-component":`responsive-vertical-menu-item-${b}`,"data-depth":A,"data-role":`responsive-vertical-menu-item-${b}`,depth:A,hasIcon:!!j||!!p,id:b,onClick:()=>{if(!V)if(0!==A||P)F(!B);else{const e=(null==S?void 0:S.id)===b;q(e?null:{id:b,label:O,children:d})}},onKeyDown:e=>{P||W(e)},ref:c,responsive:P,tabIndex:V?-1:0,type:"button"},_),{children:[e.jsx(y,{customIcon:p,depth:A,hasChildren:!0,icon:j,label:O,responsive:P}),!V&&e.jsx(r.StyledIcon,{"data-component":"responsive-vertical-menu-expander-icon","data-role":"responsive-vertical-menu-expander-icon",depth:A,expanded:B||E,reduceMotion:!!D,type:A>=1?"chevron_down_thick":"chevron_right_thick"})]})),B&&e.jsx(r.StyledNestedMenuWrapper,{"data-component":`${b}-nested-menu-wrapper`,"data-role":`${b}-nested-menu-wrapper`,depth:A,hasIcon:!!j||!!p,id:`${b}-nested-menu-wrapper`,responsive:P,children:e.jsx(r.StyledNestedMenu,{"data-component":`${b}-nested-menu`,"data-role":`${b}-nested-menu`,depth:A,hasIcon:!!j||!!p,id:`${b}-nested-menu`,responsive:P,children:e.jsx(f.Provider,{value:b,children:d})})}),E&&!P&&e.jsx(n.StyledResponsiveMenu,{"data-component":"responsive-vertical-menu-secondary","data-role":"responsive-vertical-menu-secondary",height:K||"100%",id:"responsive-vertical-menu-secondary",left:R,menu:"secondary",reduceMotion:!1,ref:N,responsive:!1,tabIndex:-1,top:$,width:k,children:S.children})]}):(()=>{const t=v({"data-component":`responsive-vertical-menu-item-${b}`,"data-depth":A,"data-role":`responsive-vertical-menu-item-${b}`,"aria-current":M,depth:A,href:x,id:b,onClick:z,onKeyDown:e=>{P||W(e)},rel:w,responsive:P,tabIndex:0,target:I},_),n=e.jsx(y,{customIcon:p,depth:A,hasChildren:!1,icon:j,label:O,responsive:P});return g&&!x?e.jsx(r.StyledResponsiveMenuActionButton,h(v({ref:c},t),{children:n})):e.jsx(r.StyledResponsiveMenuActionLink,h(v({ref:c},t),{children:n}))})()}))})),b=n=>{var{children:r,id:i,label:o}=n,l=m(n,["children","id","label"]);const a=s.useDepth(),d=t.useRef(null),u=t.useRef(i||c.default());return e.jsx(j,h(v({id:u.current,label:o},l),{"data-depth":a,ref:d,children:r&&e.jsx(f.Provider,{value:i,children:e.jsx(s.IncreaseDepth,{children:r})})}))};exports.ResponsiveVerticalMenuItem=b,exports.default=b;
@@ -2,6 +2,7 @@ import React, { ReactNode } from "react";
2
2
  import { PaddingProps } from "styled-system";
3
3
  import { TagProps } from "../../../__internal__/utils/helpers/tags";
4
4
  import { IconType } from "../../icon";
5
+ type AriaCurrent = Pick<React.HTMLAttributes<HTMLElement>, "aria-current">["aria-current"];
5
6
  export type VerticalMenuItemClickEvent = React.MouseEvent<HTMLButtonElement | HTMLAnchorElement> | React.KeyboardEvent<HTMLButtonElement | HTMLAnchorElement>;
6
7
  export interface VerticalMenuItemProps<T = React.ElementType> extends PaddingProps, TagProps {
7
8
  /** Children of the menu item - another level of VerticalMenuItems */
@@ -26,7 +27,9 @@ export interface VerticalMenuItemProps<T = React.ElementType> extends PaddingPro
26
27
  onClick?: (event: VerticalMenuItemClickEvent) => void;
27
28
  /** Optional component to render instead of the default div, useful for rendering router link components */
28
29
  component?: T;
30
+ /** Marks the element as the current item within a navigation context. */
31
+ ariaCurrent?: AriaCurrent;
29
32
  }
30
33
  type InferredComponentProps<T extends React.ElementType> = Omit<React.ComponentProps<T>, keyof VerticalMenuItemProps<T>>;
31
- 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;
34
+ 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;
32
35
  export default VerticalMenuItem;
@@ -1 +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"),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;
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;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "158.26.4",
3
+ "version": "158.27.0",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "files": [
6
6
  "lib",