carbon-react 157.9.0 → 158.0.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 (13) hide show
  1. package/esm/components/vertical-menu/responsive-vertical-menu/index.d.ts +1 -1
  2. package/esm/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu-item/index.d.ts +1 -1
  3. package/esm/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu-item/responsive-vertical-menu-item.component.d.ts +2 -1
  4. package/esm/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu-item/responsive-vertical-menu-item.component.js +1 -1
  5. package/esm/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu-item/responsive-vertical-menu-item.style.d.ts +5 -1
  6. package/esm/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu-item/responsive-vertical-menu-item.style.js +1 -1
  7. package/lib/components/vertical-menu/responsive-vertical-menu/index.d.ts +1 -1
  8. package/lib/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu-item/index.d.ts +1 -1
  9. package/lib/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu-item/responsive-vertical-menu-item.component.d.ts +2 -1
  10. package/lib/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu-item/responsive-vertical-menu-item.component.js +1 -1
  11. package/lib/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu-item/responsive-vertical-menu-item.style.d.ts +5 -1
  12. package/lib/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu-item/responsive-vertical-menu-item.style.js +1 -1
  13. package/package.json +3 -3
@@ -2,6 +2,6 @@ export { ResponsiveVerticalMenuProvider } from "./responsive-vertical-menu.conte
2
2
  export { ResponsiveVerticalMenu } from "./responsive-vertical-menu.component";
3
3
  export type { ResponsiveVerticalMenuProps, ResponsiveVerticalMenuHandle, } from "./responsive-vertical-menu.component";
4
4
  export { ResponsiveVerticalMenuItem } from "./responsive-vertical-menu-item";
5
- export type { ResponsiveVerticalMenuItemProps } from "./responsive-vertical-menu-item";
5
+ export type { ResponsiveVerticalMenuItemProps, ResponsiveVerticalMenuItemClickEvent, } from "./responsive-vertical-menu-item";
6
6
  export { ResponsiveVerticalMenuDivider } from "./responsive-vertical-menu-divider";
7
7
  export type { ResponsiveVerticalMenuDividerProps } from "./responsive-vertical-menu-divider";
@@ -1,2 +1,2 @@
1
1
  export { default as ResponsiveVerticalMenuItem } from "./responsive-vertical-menu-item.component";
2
- export type { ResponsiveVerticalMenuItemProps } from "./responsive-vertical-menu-item.component";
2
+ export type { ResponsiveVerticalMenuItemProps, ResponsiveVerticalMenuItemClickEvent, } from "./responsive-vertical-menu-item.component";
@@ -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
+ export type ResponsiveVerticalMenuItemClickEvent = React.MouseEvent<HTMLButtonElement | HTMLAnchorElement> | React.KeyboardEvent<HTMLButtonElement | HTMLAnchorElement>;
4
5
  interface BaseItemProps extends MarginProps, PaddingProps {
5
6
  /** The content of the menu item. This will render the menu item as a parent menu. */
6
7
  children?: ReactNode;
@@ -15,7 +16,7 @@ interface BaseItemProps extends MarginProps, PaddingProps {
15
16
  /** The label for the menu item. */
16
17
  label: React.ReactNode;
17
18
  /** A custom click handler to run when an anchor link is clicked */
18
- onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
19
+ onClick?: (event: ResponsiveVerticalMenuItemClickEvent) => void;
19
20
  /** The rel attribute to be used for the underlying <a> tag */
20
21
  rel?: string;
21
22
  /** The target to use 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,useContext as i,createContext as l,useEffect as c,forwardRef as s,useMemo as d,useState as a}from"react";import{StyledResponsiveMenu as p}from"../responsive-vertical-menu.style.js";import{StyledResponsiveMenuListItem as u,StyledResponsiveMenuItem as m,StyledIcon as v,StyledNestedMenuWrapper as h,StyledNestedMenu as f,StyledResponsiveMenuAction as y,StyledMenuItemContent as b}from"./responsive-vertical-menu-item.style.js";import"../../../../style/utils/filter-styled-system-padding-props.js";import g from"../../../../style/utils/filter-styled-system-margin-props.js";import{useDepth as O,IncreaseDepth as j}from"../__internal__/depth.context.js";import{useMenuFocus as w}from"../__internal__/focus.context.js";import{useResponsiveVerticalMenu as I}from"../responsive-vertical-menu.context.js";import x from"../../../icon/icon.component.js";import _ from"../../../../__internal__/utils/helpers/guid/index.js";function P(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function $(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{},r=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),r.forEach((function(n){P(e,n,t[n])}))}return e}function k(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 D=l(void 0),M=({customIcon:t,depth:r,hasChildren:o,icon:i,label:l,responsive:c})=>n(b,t?{"data-component":"responsive-vertical-menu-custom-icon","data-role":"responsive-vertical-menu-custom-icon",depth:r,hasChildren:o,icon:!0,responsive:c,children:[t,l]}:{"data-component":"responsive-vertical-menu-icon","data-role":"responsive-vertical-menu-icon",depth:r,hasChildren:o,icon:!!i,responsive:c,children:[i&&e(x,{type:i}),l]}),S=s(((l,s)=>{var{children:b,customIcon:j,icon:x,id:_,href:P,label:S,onClick:A,rel:E,target:K}=l,F=C(l,["children","customIcon","icon","id","href","label","onClick","rel","target"]);const{activeMenuItem:q,containerRef:R,responsiveMode:T,setActive:z,setActiveMenuItem:B,reducedMotion:G,left:H,top:J,width:L,height:N}=I(),{expandItem:Q,focusItem:U,getRegisteredItems:V,moveFocus:W,registerMenuItem:X}=w(),Y=O(),Z=(null==q?void 0:q.id)===_,ee=r.Children.count(b)>0,ne=i(D),te=o(null),re=d((()=>T&&0===Y),[Y,T]),[oe,ie]=a(re&&ee||Y>=2);c((()=>{X(_,s,ne)}),[_,ne,s,X]);const le=e=>{let n,t;switch(e.key){case"Tab":var r;if(t=(null===(r=R.current)||void 0===r?void 0:r.querySelectorAll(`[data-depth="${Y}"]`))||[],n=Array.from(t),0===Y&&ee&&(null==q?void 0:q.id)===_&&e.shiftKey&&(e.preventDefault(),W("lastChild")),1===Y&&n.findIndex((e=>e.id===_))===n.length-1&&(!ee||ee&&!oe)&&(e.shiftKey||(e.preventDefault(),W("parent"))),2===Y&&n.findIndex((e=>e.id===_))===n.length-1&&(!ee||ee&&!oe)){const n=V(),t=n.find((e=>e.id===ne)),r=n.find((e=>e.id===(null==t?void 0:t.parentId)));if(r){var o;const n=Array.from((null===(o=R.current)||void 0===o?void 0:o.querySelectorAll(`[data-depth="${Y-1}"]`))||[]);n.findIndex((e=>e.id===ne))===n.length-1&&!e.shiftKey&&(e.preventDefault(),U(r.id))}}break;case"Enter":case" ":if(e.preventDefault(),re)return;if(ee)if(0!==Y||T)ie(!oe),Q(_,!oe);else{const e=(null==q?void 0:q.id)===_;B(e?null:{id:_,label:S,children:b})}else P&&"Enter"===e.key&&(window.location.href=P)}};return e(u,k($({},g(F)),{children:ee?n(t,{children:[n(m,k($({active:Z,"aria-expanded":T&&0===Y?void 0:Z||oe,"aria-controls":Z||oe?T?0===Y?void 0:`${_}-nested-menu-wrapper`:"responsive-vertical-menu-secondary":void 0,"data-component":`responsive-vertical-menu-item-${_}`,"data-depth":Y,"data-role":`responsive-vertical-menu-item-${_}`,depth:Y,hasIcon:!!x||!!j,id:_,onClick:()=>{if(!re){if(0!==Y||T)ie(!oe),Q(_,!oe);else{const e=(null==q?void 0:q.id)===_;B(e?null:{id:_,label:S,children:b})}U(_)}},onKeyDown:e=>{T||le(e)},onFocus:()=>U(_),ref:s,responsive:T,tabIndex:re?-1:0,type:"button"},F),{children:[e(M,{customIcon:j,depth:Y,hasChildren:!0,icon:x,label:S,responsive:T}),!re&&e(v,{"data-component":"responsive-vertical-menu-expander-icon","data-role":"responsive-vertical-menu-expander-icon",depth:Y,expanded:oe||Z,reduceMotion:!!G,type:Y>=1?"chevron_down_thick":"chevron_right_thick"})]})),oe&&e(h,{"data-component":`${_}-nested-menu-wrapper`,"data-role":`${_}-nested-menu-wrapper`,depth:Y,hasIcon:!!x||!!j,id:`${_}-nested-menu-wrapper`,responsive:T,children:e(f,{"data-component":`${_}-nested-menu`,"data-role":`${_}-nested-menu`,depth:Y,hasIcon:!!x||!!j,id:`${_}-nested-menu`,responsive:T,children:e(D.Provider,{value:_,children:b})})}),Z&&!T&&e(p,{"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:te,responsive:!1,tabIndex:-1,top:J,width:L,children:q.children})]}):e(y,k($({"data-component":`responsive-vertical-menu-item-${_}`,"data-depth":Y,"data-role":`responsive-vertical-menu-item-${_}`,depth:Y,href:P,id:_,onClick:e=>{null==A||A(e),z(!1)},onFocus:()=>U(_),onKeyDown:e=>{T||le(e)},ref:s,rel:E,responsive:T,tabIndex:0,target:K},F),{children:e(M,{customIcon:j,depth:Y,hasChildren:!1,icon:x,label:S,responsive:T})}))}))})),A=n=>{var{children:t,id:r,label:l}=n,s=C(n,["children","id","label"]);const d=O(),a=o(null),{registerMenuItem:p}=w(),u=i(D),m=o(r||_());return c((()=>{const e=m.current;p(e,a,u)}),[u,p]),e(S,k($({id:m.current,label:l},s),{"data-depth":d,ref:a,children:t&&e(D.Provider,{value:r,children:e(j,{children:t})})}))};export{A as ResponsiveVerticalMenuItem,A as default};
1
+ import{jsx as e,jsxs as n,Fragment as t}from"react/jsx-runtime";import r,{useRef as o,useContext as i,createContext as l,useEffect as c,forwardRef as s,useMemo as d,useState as a}from"react";import{StyledResponsiveMenu as p}from"../responsive-vertical-menu.style.js";import{StyledResponsiveMenuListItem as u,StyledResponsiveMenuItem as m,StyledIcon as v,StyledNestedMenuWrapper as h,StyledNestedMenu as f,StyledMenuItemContent as y,StyledResponsiveMenuActionButton as b,StyledResponsiveMenuActionLink as g}from"./responsive-vertical-menu-item.style.js";import"../../../../style/utils/filter-styled-system-padding-props.js";import O from"../../../../style/utils/filter-styled-system-margin-props.js";import{useDepth as j,IncreaseDepth as w}from"../__internal__/depth.context.js";import{useMenuFocus as I}from"../__internal__/focus.context.js";import{useResponsiveVerticalMenu as x}from"../responsive-vertical-menu.context.js";import _ from"../../../icon/icon.component.js";import P from"../../../../__internal__/utils/helpers/guid/index.js";function k(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function $(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{},r=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),r.forEach((function(n){k(e,n,t[n])}))}return e}function C(e,n){return n=null!=n?n:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):function(e){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);n.push.apply(n,t)}return n}(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})),e}function D(e,n){if(null==e)return{};var t,r,o=function(e,n){if(null==e)return{};var t,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}const M=l(void 0),S=({customIcon:t,depth:r,hasChildren:o,icon:i,label:l,responsive:c})=>n(y,t?{"data-component":"responsive-vertical-menu-custom-icon","data-role":"responsive-vertical-menu-custom-icon",depth:r,hasChildren:o,icon:!0,responsive:c,children:[t,l]}:{"data-component":"responsive-vertical-menu-icon","data-role":"responsive-vertical-menu-icon",depth:r,hasChildren:o,icon:!!i,responsive:c,children:[i&&e(_,{type:i}),l]}),A=s(((l,s)=>{var{children:y,customIcon:w,icon:_,id:P,href:k,label:A,onClick:E,rel:K,target:F}=l,q=D(l,["children","customIcon","icon","id","href","label","onClick","rel","target"]);const{activeMenuItem:R,containerRef:T,responsiveMode:z,setActive:B,setActiveMenuItem:G,reducedMotion:H,left:J,top:L,width:N,height:Q}=x(),{expandItem:U,focusItem:V,getRegisteredItems:W,moveFocus:X,registerMenuItem:Y}=I(),Z=j(),ee=(null==R?void 0:R.id)===P,ne=r.Children.count(y)>0,te=i(M),re=o(null),oe=d((()=>z&&0===Z),[Z,z]),[ie,le]=a(oe&&ne||Z>=2);c((()=>{Y(P,s,te)}),[P,te,s,Y]);const ce=e=>{let n,t;switch(e.key){case"Tab":var r;if(t=(null===(r=T.current)||void 0===r?void 0:r.querySelectorAll(`[data-depth="${Z}"]`))||[],n=Array.from(t),0===Z&&ne&&(null==R?void 0:R.id)===P&&e.shiftKey&&(e.preventDefault(),X("lastChild")),1===Z&&n.findIndex((e=>e.id===P))===n.length-1&&(!ne||ne&&!ie)&&(e.shiftKey||(e.preventDefault(),X("parent"))),2===Z&&n.findIndex((e=>e.id===P))===n.length-1&&(!ne||ne&&!ie)){const n=W(),t=n.find((e=>e.id===te)),r=n.find((e=>e.id===(null==t?void 0:t.parentId)));if(r){var o;const n=Array.from((null===(o=T.current)||void 0===o?void 0:o.querySelectorAll(`[data-depth="${Z-1}"]`))||[]);n.findIndex((e=>e.id===te))===n.length-1&&!e.shiftKey&&(e.preventDefault(),V(r.id))}}break;case"Enter":case" ":if(ne&&e.preventDefault(),E||" "!==e.key||e.preventDefault(),oe)return;if(ne)if(0!==Z||z)le(!ie),U(P,!ie);else{const e=(null==R?void 0:R.id)===P;G(e?null:{id:P,label:A,children:y})}else k&&"Enter"===e.key&&(window.location.href=k)}},se=e=>{null==E||E(e),B(!1)};return e(u,C($({},O(q)),{children:ne?n(t,{children:[n(m,C($({active:ee,"aria-expanded":z&&0===Z?void 0:ee||ie,"aria-controls":ee||ie?z?0===Z?void 0:`${P}-nested-menu-wrapper`:"responsive-vertical-menu-secondary":void 0,"data-component":`responsive-vertical-menu-item-${P}`,"data-depth":Z,"data-role":`responsive-vertical-menu-item-${P}`,depth:Z,hasIcon:!!_||!!w,id:P,onClick:()=>{if(!oe){if(0!==Z||z)le(!ie),U(P,!ie);else{const e=(null==R?void 0:R.id)===P;G(e?null:{id:P,label:A,children:y})}V(P)}},onKeyDown:e=>{z||ce(e)},onFocus:()=>V(P),ref:s,responsive:z,tabIndex:oe?-1:0,type:"button"},q),{children:[e(S,{customIcon:w,depth:Z,hasChildren:!0,icon:_,label:A,responsive:z}),!oe&&e(v,{"data-component":"responsive-vertical-menu-expander-icon","data-role":"responsive-vertical-menu-expander-icon",depth:Z,expanded:ie||ee,reduceMotion:!!H,type:Z>=1?"chevron_down_thick":"chevron_right_thick"})]})),ie&&e(h,{"data-component":`${P}-nested-menu-wrapper`,"data-role":`${P}-nested-menu-wrapper`,depth:Z,hasIcon:!!_||!!w,id:`${P}-nested-menu-wrapper`,responsive:z,children:e(f,{"data-component":`${P}-nested-menu`,"data-role":`${P}-nested-menu`,depth:Z,hasIcon:!!_||!!w,id:`${P}-nested-menu`,responsive:z,children:e(M.Provider,{value:P,children:y})})}),ee&&!z&&e(p,{"data-component":"responsive-vertical-menu-secondary","data-role":"responsive-vertical-menu-secondary",height:Q||"100%",id:"responsive-vertical-menu-secondary",left:J,menu:"secondary",reduceMotion:!1,ref:re,responsive:!1,tabIndex:-1,top:L,width:N,children:R.children})]}):(()=>{const n=$({"data-component":`responsive-vertical-menu-item-${P}`,"data-depth":Z,"data-role":`responsive-vertical-menu-item-${P}`,depth:Z,href:k,id:P,onClick:se,onFocus:()=>V(P),onKeyDown:e=>{z||ce(e)},rel:K,responsive:z,tabIndex:0,target:F},q),t=e(S,{customIcon:w,depth:Z,hasChildren:!1,icon:_,label:A,responsive:z});return e(E&&!k?b:g,C($({ref:s},n),{children:t}))})()}))})),E=n=>{var{children:t,id:r,label:l}=n,s=D(n,["children","id","label"]);const d=j(),a=o(null),{registerMenuItem:p}=I(),u=i(M),m=o(r||P());return c((()=>{const e=m.current;p(e,a,u)}),[u,p]),e(A,C($({id:m.current,label:l},s),{"data-depth":d,ref:a,children:t&&e(M.Provider,{value:r,children:e(w,{children:t})})}))};export{E as ResponsiveVerticalMenuItem,E as default};
@@ -30,7 +30,11 @@ export declare const StyledNestedMenu: import("styled-components").StyledCompone
30
30
  }, never>;
31
31
  export declare const StyledResponsiveMenuListItem: import("styled-components").StyledComponent<"li", any, {}, never>;
32
32
  export declare const StyledResponsiveMenuItem: import("styled-components").StyledComponent<"button", any, StyledResponsiveMenuItemProps, never>;
33
- export declare const StyledResponsiveMenuAction: import("styled-components").StyledComponent<"a", any, {
33
+ export declare const StyledResponsiveMenuActionLink: import("styled-components").StyledComponent<"a", any, {
34
+ depth: number;
35
+ responsive?: boolean;
36
+ }, never>;
37
+ export declare const StyledResponsiveMenuActionButton: import("styled-components").StyledComponent<"button", any, {
34
38
  depth: number;
35
39
  responsive?: boolean;
36
40
  }, never>;
@@ -1 +1 @@
1
- import e,{css as t}from"styled-components";import{padding as o,margin as i}from"styled-system";import n from"../../../icon/icon.component.js";import r from"../../../../style/utils/add-focus-styling.js";const s=(e,t)=>e&&t?"180deg":"0deg",a=t(["align-items:center;background-color:transparent;border:none;border-radius:var(--borderRadius100);box-sizing:border-box;color:var(--colorsUtilityYang100);cursor:pointer;display:flex;flex-direction:row;font-size:14px;font-weight:500;justify-content:space-between;min-height:var(--sizing500);padding:var(--spacing100) var(--spacing200);width:100%;",' &:hover{background-color:var(--colorsActionMajor500);color:var(--colorsUtilityYang100);text-decoration:none;}[data-component="icon"]{color:var(--colorsUtilityYang100);margin-right:var(--spacing100);}&:focus{',"}"],o,r(!0)),c=e(n).withConfig({displayName:"responsive-vertical-menu-item.style__StyledIcon",componentId:"sc-5d3180c7-0"})(["rotate:",";transition:rotate "," ease-in;",";"],(({depth:e,expanded:t})=>s(e,t)),(({reduceMotion:e})=>e?0:"0.2s"),(({depth:e,expanded:o,reduceMotion:i})=>o&&t(["rotate:",";transition:rotate "," ease-out;"],s(e,o),i?0:"0.2s"))),d=e.span.withConfig({displayName:"responsive-vertical-menu-item.style__StyledMenuItemContent",componentId:"sc-5d3180c7-1"})(["align-items:center;display:flex;flex-direction:row;gap:var(--spacing100);svg{margin-right:var(--spacing100);max-width:var(--sizing300);min-width:var(--sizing300);}"]),l=e.div.withConfig({displayName:"responsive-vertical-menu-item.style__StyledNestedMenuWrapper",componentId:"sc-5d3180c7-2"})(["box-sizing:border-box;display:flex;justify-content:",";width:100%;",""],(({hasIcon:e,responsive:t})=>e&&t?"flex-end":"flex-start"),(({depth:e,responsive:o})=>1===e&&o&&t(["padding:0 0 0 16px;"]))),p=e.ul.withConfig({displayName:"responsive-vertical-menu-item.style__StyledNestedMenu",componentId:"sc-5d3180c7-3"})(["padding:0;",""],(({depth:e,hasIcon:o,responsive:i})=>t(["width:",";margin-left:var(--spacing400);"," li > a{font-weight:",";}"],e<2&&!o?"100%":"88%",i&&t(["margin-left:",";"],o||1===e?"var(--spacing200)":"0"),1===e?"var(--fontWeights400)":"var(--fontWeights500)"))),g=e.li.withConfig({displayName:"responsive-vertical-menu-item.style__StyledResponsiveMenuListItem",componentId:"sc-5d3180c7-4"})(["list-style:none;"," padding:0;"],i),m=e.button.withConfig({displayName:"responsive-vertical-menu-item.style__StyledResponsiveMenuItem",componentId:"sc-5d3180c7-5"})([""," "," "," ",""],a,(({active:e,responsive:o})=>e&&!o&&t(["background-color:var(--colorsGray850);"])),(({depth:e,responsive:o})=>0===e&&o&&t(["color:var(--colorsUtilityYang080);cursor:default;"])),(({depth:e})=>e>=2&&t(['&{color:var(--colorsUtilityYang080);font-weight:var(--fontWeights400);[data-component="icon"]{color:var(--colorsUtilityYang080);}}']))),v=e.a.withConfig({displayName:"responsive-vertical-menu-item.style__StyledResponsiveMenuAction",componentId:"sc-5d3180c7-6"})([""," min-height:40px;text-decoration:none;",""],a,(({depth:e,responsive:o})=>e>=2&&t(["&&{color:var(--colorsUtilityYang080);font-weight:var(--fontWeights400);","}"],o&&e>=3&&t(["margin-left:var(--spacing300);"]))));export{c as StyledIcon,d as StyledMenuItemContent,p as StyledNestedMenu,l as StyledNestedMenuWrapper,v as StyledResponsiveMenuAction,m as StyledResponsiveMenuItem,g as StyledResponsiveMenuListItem};
1
+ import e,{css as t}from"styled-components";import{padding as i,margin as o}from"styled-system";import n from"../../../icon/icon.component.js";import a from"../../../../style/utils/add-focus-styling.js";const s=(e,t)=>e&&t?"180deg":"0deg",r=t(["align-items:center;background-color:transparent;border:none;border-radius:var(--borderRadius100);box-sizing:border-box;color:var(--colorsUtilityYang100);cursor:pointer;display:flex;flex-direction:row;font-size:14px;font-weight:500;justify-content:space-between;min-height:var(--sizing500);padding:var(--spacing100) var(--spacing200);width:100%;",' &:hover{background-color:var(--colorsActionMajor500);color:var(--colorsUtilityYang100);text-decoration:none;}[data-component="icon"]{color:var(--colorsUtilityYang100);margin-right:var(--spacing100);}&:focus{',"}"],i,a(!0)),c=e(n).withConfig({displayName:"responsive-vertical-menu-item.style__StyledIcon",componentId:"sc-ffae1a5b-0"})(["rotate:",";transition:rotate "," ease-in;",";"],(({depth:e,expanded:t})=>s(e,t)),(({reduceMotion:e})=>e?0:"0.2s"),(({depth:e,expanded:i,reduceMotion:o})=>i&&t(["rotate:",";transition:rotate "," ease-out;"],s(e,i),o?0:"0.2s"))),l=e.span.withConfig({displayName:"responsive-vertical-menu-item.style__StyledMenuItemContent",componentId:"sc-ffae1a5b-1"})(["align-items:center;display:flex;flex-direction:row;gap:var(--spacing100);svg{margin-right:var(--spacing100);max-width:var(--sizing300);min-width:var(--sizing300);}"]),d=e.div.withConfig({displayName:"responsive-vertical-menu-item.style__StyledNestedMenuWrapper",componentId:"sc-ffae1a5b-2"})(["box-sizing:border-box;display:flex;justify-content:",";width:100%;",""],(({hasIcon:e,responsive:t})=>e&&t?"flex-end":"flex-start"),(({depth:e,responsive:i})=>1===e&&i&&t(["padding:0 0 0 16px;"]))),p=e.ul.withConfig({displayName:"responsive-vertical-menu-item.style__StyledNestedMenu",componentId:"sc-ffae1a5b-3"})(["padding:0;",""],(({depth:e,hasIcon:i,responsive:o})=>t(["width:",";margin-left:var(--spacing400);"," li > a{font-weight:",";}"],e<2&&!i?"100%":"88%",o&&t(["margin-left:",";"],i||1===e?"var(--spacing200)":"0"),1===e?"var(--fontWeights400)":"var(--fontWeights500)"))),g=e.li.withConfig({displayName:"responsive-vertical-menu-item.style__StyledResponsiveMenuListItem",componentId:"sc-ffae1a5b-4"})(["list-style:none;"," padding:0;"],o),m=e.button.withConfig({displayName:"responsive-vertical-menu-item.style__StyledResponsiveMenuItem",componentId:"sc-ffae1a5b-5"})([""," "," "," ",""],r,(({active:e,responsive:i})=>e&&!i&&t(["background-color:var(--colorsGray850);"])),(({depth:e,responsive:i})=>0===e&&i&&t(["color:var(--colorsUtilityYang080);cursor:default;"])),(({depth:e})=>e>=2&&t(['&{color:var(--colorsUtilityYang080);font-weight:var(--fontWeights400);[data-component="icon"]{color:var(--colorsUtilityYang080);}}']))),v=e.a.withConfig({displayName:"responsive-vertical-menu-item.style__StyledResponsiveMenuActionLink",componentId:"sc-ffae1a5b-6"})([""," min-height:40px;text-decoration:none;",""],r,(({depth:e,responsive:i})=>e>=2&&t(["&&{color:var(--colorsUtilityYang080);font-weight:var(--fontWeights400);","}"],i&&e>=3&&t(["margin-left:var(--spacing300);"])))),f=e.button.withConfig({displayName:"responsive-vertical-menu-item.style__StyledResponsiveMenuActionButton",componentId:"sc-ffae1a5b-7"})([""," min-height:40px;text-decoration:none;",""],r,(({depth:e,responsive:i})=>e>=2&&t(["&&{color:var(--colorsUtilityYang080);font-weight:var(--fontWeights400);","}"],i&&e>=3&&t(["margin-left:var(--spacing300);"]))));export{c as StyledIcon,l as StyledMenuItemContent,p as StyledNestedMenu,d as StyledNestedMenuWrapper,f as StyledResponsiveMenuActionButton,v as StyledResponsiveMenuActionLink,m as StyledResponsiveMenuItem,g as StyledResponsiveMenuListItem};
@@ -2,6 +2,6 @@ export { ResponsiveVerticalMenuProvider } from "./responsive-vertical-menu.conte
2
2
  export { ResponsiveVerticalMenu } from "./responsive-vertical-menu.component";
3
3
  export type { ResponsiveVerticalMenuProps, ResponsiveVerticalMenuHandle, } from "./responsive-vertical-menu.component";
4
4
  export { ResponsiveVerticalMenuItem } from "./responsive-vertical-menu-item";
5
- export type { ResponsiveVerticalMenuItemProps } from "./responsive-vertical-menu-item";
5
+ export type { ResponsiveVerticalMenuItemProps, ResponsiveVerticalMenuItemClickEvent, } from "./responsive-vertical-menu-item";
6
6
  export { ResponsiveVerticalMenuDivider } from "./responsive-vertical-menu-divider";
7
7
  export type { ResponsiveVerticalMenuDividerProps } from "./responsive-vertical-menu-divider";
@@ -1,2 +1,2 @@
1
1
  export { default as ResponsiveVerticalMenuItem } from "./responsive-vertical-menu-item.component";
2
- export type { ResponsiveVerticalMenuItemProps } from "./responsive-vertical-menu-item.component";
2
+ export type { ResponsiveVerticalMenuItemProps, ResponsiveVerticalMenuItemClickEvent, } from "./responsive-vertical-menu-item.component";
@@ -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
+ export type ResponsiveVerticalMenuItemClickEvent = React.MouseEvent<HTMLButtonElement | HTMLAnchorElement> | React.KeyboardEvent<HTMLButtonElement | HTMLAnchorElement>;
4
5
  interface BaseItemProps extends MarginProps, PaddingProps {
5
6
  /** The content of the menu item. This will render the menu item as a parent menu. */
6
7
  children?: ReactNode;
@@ -15,7 +16,7 @@ interface BaseItemProps extends MarginProps, PaddingProps {
15
16
  /** The label for the menu item. */
16
17
  label: React.ReactNode;
17
18
  /** A custom click handler to run when an anchor link is clicked */
18
- onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
19
+ onClick?: (event: ResponsiveVerticalMenuItemClickEvent) => void;
19
20
  /** The rel attribute to be used for the underlying <a> tag */
20
21
  rel?: string;
21
22
  /** The target to use 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"),o=require("../__internal__/depth.context.js"),s=require("../__internal__/focus.context.js"),l=require("../responsive-vertical-menu.context.js"),c=require("../../../icon/icon.component.js"),d=require("../../../../__internal__/utils/helpers/guid/index.js");function a(e){return e&&e.__esModule?e:{default:e}}var u=a(t);function p(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function v(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),r.forEach((function(t){p(e,t,n[t])}))}return e}function h(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t.push.apply(t,n)}return t}(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))})),e}function f(e,t){if(null==e)return{};var n,r,i=function(e,t){if(null==e)return{};var n,r,i={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}const m=t.createContext(void 0),y=({customIcon:t,depth:n,hasChildren:i,icon:o,label:s,responsive:l})=>t?e.jsxs(r.StyledMenuItemContent,{"data-component":"responsive-vertical-menu-custom-icon","data-role":"responsive-vertical-menu-custom-icon",depth:n,hasChildren:i,icon:!0,responsive:l,children:[t,s]}):e.jsxs(r.StyledMenuItemContent,{"data-component":"responsive-vertical-menu-icon","data-role":"responsive-vertical-menu-icon",depth:n,hasChildren:i,icon:!!o,responsive:l,children:[o&&e.jsx(c.default,{type:o}),s]}),b=t.forwardRef(((c,d)=>{var{children:a,customIcon:p,icon:b,id:j,href:x,label:g,onClick:O,rel:I,target:w}=c,M=f(c,["children","customIcon","icon","id","href","label","onClick","rel","target"]);const{activeMenuItem:_,containerRef:S,responsiveMode:C,setActive:P,setActiveMenuItem:q,reducedMotion:D,left:$,top:k,width:R,height:A}=l.useResponsiveVerticalMenu(),{expandItem:E,focusItem:F,getRegisteredItems:K,moveFocus:N,registerMenuItem:V}=s.useMenuFocus(),L=o.useDepth(),T=(null==_?void 0:_.id)===j,W=u.default.Children.count(a)>0,z=t.useContext(m),B=t.useRef(null),G=t.useMemo((()=>C&&0===L),[L,C]),[H,J]=t.useState(G&&W||L>=2);t.useEffect((()=>{V(j,d,z)}),[j,z,d,V]);const Q=e=>{let t,n;switch(e.key){case"Tab":var r;if(n=(null===(r=S.current)||void 0===r?void 0:r.querySelectorAll(`[data-depth="${L}"]`))||[],t=Array.from(n),0===L&&W&&(null==_?void 0:_.id)===j&&e.shiftKey&&(e.preventDefault(),N("lastChild")),1===L&&t.findIndex((e=>e.id===j))===t.length-1&&(!W||W&&!H)&&(e.shiftKey||(e.preventDefault(),N("parent"))),2===L&&t.findIndex((e=>e.id===j))===t.length-1&&(!W||W&&!H)){const t=K(),n=t.find((e=>e.id===z)),r=t.find((e=>e.id===(null==n?void 0:n.parentId)));if(r){var i;const t=Array.from((null===(i=S.current)||void 0===i?void 0:i.querySelectorAll(`[data-depth="${L-1}"]`))||[]);t.findIndex((e=>e.id===z))===t.length-1&&!e.shiftKey&&(e.preventDefault(),F(r.id))}}break;case"Enter":case" ":if(e.preventDefault(),G)return;if(W)if(0!==L||C)J(!H),E(j,!H);else{const e=(null==_?void 0:_.id)===j;q(e?null:{id:j,label:g,children:a})}else x&&"Enter"===e.key&&(window.location.href=x)}};return e.jsx(r.StyledResponsiveMenuListItem,h(v({},i.default(M)),{children:W?e.jsxs(e.Fragment,{children:[e.jsxs(r.StyledResponsiveMenuItem,h(v({active:T,"aria-expanded":C&&0===L?void 0:T||H,"aria-controls":T||H?C?0===L?void 0:`${j}-nested-menu-wrapper`:"responsive-vertical-menu-secondary":void 0,"data-component":`responsive-vertical-menu-item-${j}`,"data-depth":L,"data-role":`responsive-vertical-menu-item-${j}`,depth:L,hasIcon:!!b||!!p,id:j,onClick:()=>{if(!G){if(0!==L||C)J(!H),E(j,!H);else{const e=(null==_?void 0:_.id)===j;q(e?null:{id:j,label:g,children:a})}F(j)}},onKeyDown:e=>{C||Q(e)},onFocus:()=>F(j),ref:d,responsive:C,tabIndex:G?-1:0,type:"button"},M),{children:[e.jsx(y,{customIcon:p,depth:L,hasChildren:!0,icon:b,label:g,responsive:C}),!G&&e.jsx(r.StyledIcon,{"data-component":"responsive-vertical-menu-expander-icon","data-role":"responsive-vertical-menu-expander-icon",depth:L,expanded:H||T,reduceMotion:!!D,type:L>=1?"chevron_down_thick":"chevron_right_thick"})]})),H&&e.jsx(r.StyledNestedMenuWrapper,{"data-component":`${j}-nested-menu-wrapper`,"data-role":`${j}-nested-menu-wrapper`,depth:L,hasIcon:!!b||!!p,id:`${j}-nested-menu-wrapper`,responsive:C,children:e.jsx(r.StyledNestedMenu,{"data-component":`${j}-nested-menu`,"data-role":`${j}-nested-menu`,depth:L,hasIcon:!!b||!!p,id:`${j}-nested-menu`,responsive:C,children:e.jsx(m.Provider,{value:j,children:a})})}),T&&!C&&e.jsx(n.StyledResponsiveMenu,{"data-component":"responsive-vertical-menu-secondary","data-role":"responsive-vertical-menu-secondary",height:A||"100%",id:"responsive-vertical-menu-secondary",left:$,menu:"secondary",reduceMotion:!1,ref:B,responsive:!1,tabIndex:-1,top:k,width:R,children:_.children})]}):e.jsx(r.StyledResponsiveMenuAction,h(v({"data-component":`responsive-vertical-menu-item-${j}`,"data-depth":L,"data-role":`responsive-vertical-menu-item-${j}`,depth:L,href:x,id:j,onClick:e=>{null==O||O(e),P(!1)},onFocus:()=>F(j),onKeyDown:e=>{C||Q(e)},ref:d,rel:I,responsive:C,tabIndex:0,target:w},M),{children:e.jsx(y,{customIcon:p,depth:L,hasChildren:!1,icon:b,label:g,responsive:C})}))}))})),j=n=>{var{children:r,id:i,label:l}=n,c=f(n,["children","id","label"]);const a=o.useDepth(),u=t.useRef(null),{registerMenuItem:p}=s.useMenuFocus(),y=t.useContext(m),j=t.useRef(i||d.default());return t.useEffect((()=>{const e=j.current;p(e,u,y)}),[y,p]),e.jsx(b,h(v({id:j.current,label:l},c),{"data-depth":a,ref:u,children:r&&e.jsx(m.Provider,{value:i,children:e.jsx(o.IncreaseDepth,{children:r})})}))};exports.ResponsiveVerticalMenuItem=j,exports.default=j;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("../responsive-vertical-menu.style.js"),r=require("./responsive-vertical-menu-item.style.js");require("../../../../style/utils/filter-styled-system-padding-props.js");var i=require("../../../../style/utils/filter-styled-system-margin-props.js"),o=require("../__internal__/depth.context.js"),s=require("../__internal__/focus.context.js"),l=require("../responsive-vertical-menu.context.js"),c=require("../../../icon/icon.component.js"),d=require("../../../../__internal__/utils/helpers/guid/index.js");function a(e){return e&&e.__esModule?e:{default:e}}var u=a(t);function p(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function v(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),r.forEach((function(t){p(e,t,n[t])}))}return e}function h(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t.push.apply(t,n)}return t}(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))})),e}function f(e,t){if(null==e)return{};var n,r,i=function(e,t){if(null==e)return{};var n,r,i={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}const m=t.createContext(void 0),y=({customIcon:t,depth:n,hasChildren:i,icon:o,label:s,responsive:l})=>t?e.jsxs(r.StyledMenuItemContent,{"data-component":"responsive-vertical-menu-custom-icon","data-role":"responsive-vertical-menu-custom-icon",depth:n,hasChildren:i,icon:!0,responsive:l,children:[t,s]}):e.jsxs(r.StyledMenuItemContent,{"data-component":"responsive-vertical-menu-icon","data-role":"responsive-vertical-menu-icon",depth:n,hasChildren:i,icon:!!o,responsive:l,children:[o&&e.jsx(c.default,{type:o}),s]}),j=t.forwardRef(((c,d)=>{var{children:a,customIcon:p,icon:j,id:b,href:x,label:g,onClick:O,rel:I,target:w}=c,M=f(c,["children","customIcon","icon","id","href","label","onClick","rel","target"]);const{activeMenuItem:_,containerRef:S,responsiveMode:C,setActive:P,setActiveMenuItem:k,reducedMotion:D,left:q,top:R,width:$,height:A}=l.useResponsiveVerticalMenu(),{expandItem:E,focusItem:F,getRegisteredItems:K,moveFocus:L,registerMenuItem:N}=s.useMenuFocus(),V=o.useDepth(),B=(null==_?void 0:_.id)===b,T=u.default.Children.count(a)>0,W=t.useContext(m),z=t.useRef(null),G=t.useMemo((()=>C&&0===V),[V,C]),[H,J]=t.useState(G&&T||V>=2);t.useEffect((()=>{N(b,d,W)}),[b,W,d,N]);const Q=e=>{let t,n;switch(e.key){case"Tab":var r;if(n=(null===(r=S.current)||void 0===r?void 0:r.querySelectorAll(`[data-depth="${V}"]`))||[],t=Array.from(n),0===V&&T&&(null==_?void 0:_.id)===b&&e.shiftKey&&(e.preventDefault(),L("lastChild")),1===V&&t.findIndex((e=>e.id===b))===t.length-1&&(!T||T&&!H)&&(e.shiftKey||(e.preventDefault(),L("parent"))),2===V&&t.findIndex((e=>e.id===b))===t.length-1&&(!T||T&&!H)){const t=K(),n=t.find((e=>e.id===W)),r=t.find((e=>e.id===(null==n?void 0:n.parentId)));if(r){var i;const t=Array.from((null===(i=S.current)||void 0===i?void 0:i.querySelectorAll(`[data-depth="${V-1}"]`))||[]);t.findIndex((e=>e.id===W))===t.length-1&&!e.shiftKey&&(e.preventDefault(),F(r.id))}}break;case"Enter":case" ":if(T&&e.preventDefault(),O||" "!==e.key||e.preventDefault(),G)return;if(T)if(0!==V||C)J(!H),E(b,!H);else{const e=(null==_?void 0:_.id)===b;k(e?null:{id:b,label:g,children:a})}else x&&"Enter"===e.key&&(window.location.href=x)}},U=e=>{null==O||O(e),P(!1)};return e.jsx(r.StyledResponsiveMenuListItem,h(v({},i.default(M)),{children:T?e.jsxs(e.Fragment,{children:[e.jsxs(r.StyledResponsiveMenuItem,h(v({active:B,"aria-expanded":C&&0===V?void 0:B||H,"aria-controls":B||H?C?0===V?void 0:`${b}-nested-menu-wrapper`:"responsive-vertical-menu-secondary":void 0,"data-component":`responsive-vertical-menu-item-${b}`,"data-depth":V,"data-role":`responsive-vertical-menu-item-${b}`,depth:V,hasIcon:!!j||!!p,id:b,onClick:()=>{if(!G){if(0!==V||C)J(!H),E(b,!H);else{const e=(null==_?void 0:_.id)===b;k(e?null:{id:b,label:g,children:a})}F(b)}},onKeyDown:e=>{C||Q(e)},onFocus:()=>F(b),ref:d,responsive:C,tabIndex:G?-1:0,type:"button"},M),{children:[e.jsx(y,{customIcon:p,depth:V,hasChildren:!0,icon:j,label:g,responsive:C}),!G&&e.jsx(r.StyledIcon,{"data-component":"responsive-vertical-menu-expander-icon","data-role":"responsive-vertical-menu-expander-icon",depth:V,expanded:H||B,reduceMotion:!!D,type:V>=1?"chevron_down_thick":"chevron_right_thick"})]})),H&&e.jsx(r.StyledNestedMenuWrapper,{"data-component":`${b}-nested-menu-wrapper`,"data-role":`${b}-nested-menu-wrapper`,depth:V,hasIcon:!!j||!!p,id:`${b}-nested-menu-wrapper`,responsive:C,children:e.jsx(r.StyledNestedMenu,{"data-component":`${b}-nested-menu`,"data-role":`${b}-nested-menu`,depth:V,hasIcon:!!j||!!p,id:`${b}-nested-menu`,responsive:C,children:e.jsx(m.Provider,{value:b,children:a})})}),B&&!C&&e.jsx(n.StyledResponsiveMenu,{"data-component":"responsive-vertical-menu-secondary","data-role":"responsive-vertical-menu-secondary",height:A||"100%",id:"responsive-vertical-menu-secondary",left:q,menu:"secondary",reduceMotion:!1,ref:z,responsive:!1,tabIndex:-1,top:R,width:$,children:_.children})]}):(()=>{const t=v({"data-component":`responsive-vertical-menu-item-${b}`,"data-depth":V,"data-role":`responsive-vertical-menu-item-${b}`,depth:V,href:x,id:b,onClick:U,onFocus:()=>F(b),onKeyDown:e=>{C||Q(e)},rel:I,responsive:C,tabIndex:0,target:w},M),n=e.jsx(y,{customIcon:p,depth:V,hasChildren:!1,icon:j,label:g,responsive:C});return O&&!x?e.jsx(r.StyledResponsiveMenuActionButton,h(v({ref:d},t),{children:n})):e.jsx(r.StyledResponsiveMenuActionLink,h(v({ref:d},t),{children:n}))})()}))})),b=n=>{var{children:r,id:i,label:l}=n,c=f(n,["children","id","label"]);const a=o.useDepth(),u=t.useRef(null),{registerMenuItem:p}=s.useMenuFocus(),y=t.useContext(m),b=t.useRef(i||d.default());return t.useEffect((()=>{const e=b.current;p(e,u,y)}),[y,p]),e.jsx(j,h(v({id:b.current,label:l},c),{"data-depth":a,ref:u,children:r&&e.jsx(m.Provider,{value:i,children:e.jsx(o.IncreaseDepth,{children:r})})}))};exports.ResponsiveVerticalMenuItem=b,exports.default=b;
@@ -30,7 +30,11 @@ export declare const StyledNestedMenu: import("styled-components").StyledCompone
30
30
  }, never>;
31
31
  export declare const StyledResponsiveMenuListItem: import("styled-components").StyledComponent<"li", any, {}, never>;
32
32
  export declare const StyledResponsiveMenuItem: import("styled-components").StyledComponent<"button", any, StyledResponsiveMenuItemProps, never>;
33
- export declare const StyledResponsiveMenuAction: import("styled-components").StyledComponent<"a", any, {
33
+ export declare const StyledResponsiveMenuActionLink: import("styled-components").StyledComponent<"a", any, {
34
+ depth: number;
35
+ responsive?: boolean;
36
+ }, never>;
37
+ export declare const StyledResponsiveMenuActionButton: import("styled-components").StyledComponent<"button", any, {
34
38
  depth: number;
35
39
  responsive?: boolean;
36
40
  }, never>;
@@ -1 +1 @@
1
- "use strict";var e=require("styled-components"),t=require("styled-system"),n=require("../../../icon/icon.component.js"),i=require("../../../../style/utils/add-focus-styling.js");function o(e){return e&&e.__esModule?e:{default:e}}var s=o(e);const r=(e,t)=>e&&t?"180deg":"0deg",a=e.css(["align-items:center;background-color:transparent;border:none;border-radius:var(--borderRadius100);box-sizing:border-box;color:var(--colorsUtilityYang100);cursor:pointer;display:flex;flex-direction:row;font-size:14px;font-weight:500;justify-content:space-between;min-height:var(--sizing500);padding:var(--spacing100) var(--spacing200);width:100%;",' &:hover{background-color:var(--colorsActionMajor500);color:var(--colorsUtilityYang100);text-decoration:none;}[data-component="icon"]{color:var(--colorsUtilityYang100);margin-right:var(--spacing100);}&:focus{',"}"],t.padding,i.default(!0)),d=s.default(n.default).withConfig({displayName:"responsive-vertical-menu-item.style__StyledIcon",componentId:"sc-5d3180c7-0"})(["rotate:",";transition:rotate "," ease-in;",";"],(({depth:e,expanded:t})=>r(e,t)),(({reduceMotion:e})=>e?0:"0.2s"),(({depth:t,expanded:n,reduceMotion:i})=>n&&e.css(["rotate:",";transition:rotate "," ease-out;"],r(t,n),i?0:"0.2s"))),c=s.default.span.withConfig({displayName:"responsive-vertical-menu-item.style__StyledMenuItemContent",componentId:"sc-5d3180c7-1"})(["align-items:center;display:flex;flex-direction:row;gap:var(--spacing100);svg{margin-right:var(--spacing100);max-width:var(--sizing300);min-width:var(--sizing300);}"]),l=s.default.div.withConfig({displayName:"responsive-vertical-menu-item.style__StyledNestedMenuWrapper",componentId:"sc-5d3180c7-2"})(["box-sizing:border-box;display:flex;justify-content:",";width:100%;",""],(({hasIcon:e,responsive:t})=>e&&t?"flex-end":"flex-start"),(({depth:t,responsive:n})=>1===t&&n&&e.css(["padding:0 0 0 16px;"]))),p=s.default.ul.withConfig({displayName:"responsive-vertical-menu-item.style__StyledNestedMenu",componentId:"sc-5d3180c7-3"})(["padding:0;",""],(({depth:t,hasIcon:n,responsive:i})=>e.css(["width:",";margin-left:var(--spacing400);"," li > a{font-weight:",";}"],t<2&&!n?"100%":"88%",i&&e.css(["margin-left:",";"],n||1===t?"var(--spacing200)":"0"),1===t?"var(--fontWeights400)":"var(--fontWeights500)"))),g=s.default.li.withConfig({displayName:"responsive-vertical-menu-item.style__StyledResponsiveMenuListItem",componentId:"sc-5d3180c7-4"})(["list-style:none;"," padding:0;"],t.margin),v=s.default.button.withConfig({displayName:"responsive-vertical-menu-item.style__StyledResponsiveMenuItem",componentId:"sc-5d3180c7-5"})([""," "," "," ",""],a,(({active:t,responsive:n})=>t&&!n&&e.css(["background-color:var(--colorsGray850);"])),(({depth:t,responsive:n})=>0===t&&n&&e.css(["color:var(--colorsUtilityYang080);cursor:default;"])),(({depth:t})=>t>=2&&e.css(['&{color:var(--colorsUtilityYang080);font-weight:var(--fontWeights400);[data-component="icon"]{color:var(--colorsUtilityYang080);}}']))),u=s.default.a.withConfig({displayName:"responsive-vertical-menu-item.style__StyledResponsiveMenuAction",componentId:"sc-5d3180c7-6"})([""," min-height:40px;text-decoration:none;",""],a,(({depth:t,responsive:n})=>t>=2&&e.css(["&&{color:var(--colorsUtilityYang080);font-weight:var(--fontWeights400);","}"],n&&t>=3&&e.css(["margin-left:var(--spacing300);"]))));exports.StyledIcon=d,exports.StyledMenuItemContent=c,exports.StyledNestedMenu=p,exports.StyledNestedMenuWrapper=l,exports.StyledResponsiveMenuAction=u,exports.StyledResponsiveMenuItem=v,exports.StyledResponsiveMenuListItem=g;
1
+ "use strict";var e=require("styled-components"),t=require("styled-system"),n=require("../../../icon/icon.component.js"),i=require("../../../../style/utils/add-focus-styling.js");function o(e){return e&&e.__esModule?e:{default:e}}var s=o(e);const a=(e,t)=>e&&t?"180deg":"0deg",r=e.css(["align-items:center;background-color:transparent;border:none;border-radius:var(--borderRadius100);box-sizing:border-box;color:var(--colorsUtilityYang100);cursor:pointer;display:flex;flex-direction:row;font-size:14px;font-weight:500;justify-content:space-between;min-height:var(--sizing500);padding:var(--spacing100) var(--spacing200);width:100%;",' &:hover{background-color:var(--colorsActionMajor500);color:var(--colorsUtilityYang100);text-decoration:none;}[data-component="icon"]{color:var(--colorsUtilityYang100);margin-right:var(--spacing100);}&:focus{',"}"],t.padding,i.default(!0)),l=s.default(n.default).withConfig({displayName:"responsive-vertical-menu-item.style__StyledIcon",componentId:"sc-ffae1a5b-0"})(["rotate:",";transition:rotate "," ease-in;",";"],(({depth:e,expanded:t})=>a(e,t)),(({reduceMotion:e})=>e?0:"0.2s"),(({depth:t,expanded:n,reduceMotion:i})=>n&&e.css(["rotate:",";transition:rotate "," ease-out;"],a(t,n),i?0:"0.2s"))),c=s.default.span.withConfig({displayName:"responsive-vertical-menu-item.style__StyledMenuItemContent",componentId:"sc-ffae1a5b-1"})(["align-items:center;display:flex;flex-direction:row;gap:var(--spacing100);svg{margin-right:var(--spacing100);max-width:var(--sizing300);min-width:var(--sizing300);}"]),d=s.default.div.withConfig({displayName:"responsive-vertical-menu-item.style__StyledNestedMenuWrapper",componentId:"sc-ffae1a5b-2"})(["box-sizing:border-box;display:flex;justify-content:",";width:100%;",""],(({hasIcon:e,responsive:t})=>e&&t?"flex-end":"flex-start"),(({depth:t,responsive:n})=>1===t&&n&&e.css(["padding:0 0 0 16px;"]))),p=s.default.ul.withConfig({displayName:"responsive-vertical-menu-item.style__StyledNestedMenu",componentId:"sc-ffae1a5b-3"})(["padding:0;",""],(({depth:t,hasIcon:n,responsive:i})=>e.css(["width:",";margin-left:var(--spacing400);"," li > a{font-weight:",";}"],t<2&&!n?"100%":"88%",i&&e.css(["margin-left:",";"],n||1===t?"var(--spacing200)":"0"),1===t?"var(--fontWeights400)":"var(--fontWeights500)"))),g=s.default.li.withConfig({displayName:"responsive-vertical-menu-item.style__StyledResponsiveMenuListItem",componentId:"sc-ffae1a5b-4"})(["list-style:none;"," padding:0;"],t.margin),v=s.default.button.withConfig({displayName:"responsive-vertical-menu-item.style__StyledResponsiveMenuItem",componentId:"sc-ffae1a5b-5"})([""," "," "," ",""],r,(({active:t,responsive:n})=>t&&!n&&e.css(["background-color:var(--colorsGray850);"])),(({depth:t,responsive:n})=>0===t&&n&&e.css(["color:var(--colorsUtilityYang080);cursor:default;"])),(({depth:t})=>t>=2&&e.css(['&{color:var(--colorsUtilityYang080);font-weight:var(--fontWeights400);[data-component="icon"]{color:var(--colorsUtilityYang080);}}']))),f=s.default.a.withConfig({displayName:"responsive-vertical-menu-item.style__StyledResponsiveMenuActionLink",componentId:"sc-ffae1a5b-6"})([""," min-height:40px;text-decoration:none;",""],r,(({depth:t,responsive:n})=>t>=2&&e.css(["&&{color:var(--colorsUtilityYang080);font-weight:var(--fontWeights400);","}"],n&&t>=3&&e.css(["margin-left:var(--spacing300);"])))),u=s.default.button.withConfig({displayName:"responsive-vertical-menu-item.style__StyledResponsiveMenuActionButton",componentId:"sc-ffae1a5b-7"})([""," min-height:40px;text-decoration:none;",""],r,(({depth:t,responsive:n})=>t>=2&&e.css(["&&{color:var(--colorsUtilityYang080);font-weight:var(--fontWeights400);","}"],n&&t>=3&&e.css(["margin-left:var(--spacing300);"]))));exports.StyledIcon=l,exports.StyledMenuItemContent=c,exports.StyledNestedMenu=p,exports.StyledNestedMenuWrapper=d,exports.StyledResponsiveMenuActionButton=u,exports.StyledResponsiveMenuActionLink=f,exports.StyledResponsiveMenuItem=v,exports.StyledResponsiveMenuListItem=g;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "157.9.0",
3
+ "version": "158.0.0",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "files": [
6
6
  "lib",
@@ -14,7 +14,7 @@
14
14
  "test-storybook": "test-storybook --url http://127.0.0.1:9001",
15
15
  "format": "prettier --write './{src,playwright}/**/*.{js,jsx,ts,tsx}'",
16
16
  "lint": "npm run generate-tokens:dev && eslint ./src ./playwright --max-warnings=636 --report-unused-disable-directives",
17
- "precompile": "npm run type-check && npm run build",
17
+ "precompile": "npm run generate-tokens && npm run type-check && npm run build",
18
18
  "prepublishOnly": "npm run precompile",
19
19
  "build-storybook": "npm run generate-tokens:dev && dotenvx run -- storybook build -c .storybook",
20
20
  "build-storybook:prod": "npm run generate-tokens && dotenvx run -f .env.production -- storybook build -c .storybook",
@@ -32,7 +32,7 @@
32
32
  "clear-playwright-coverage-json": "rimraf ./playwright/coverage/*.json",
33
33
  "test:ct:coverage": "npm run generate-tokens:dev && npm run clear-playwright-cache && npm run clear-playwright-coverage-json && rimraf ./playwright/coverage && playwright test -c playwright-ct.config.ts",
34
34
  "pw:coverage:report": "nyc report --reporter=html --report-dir=./playwright/coverage --temp-dir=./playwright/coverage",
35
- "build": "npm run clean-lib && npm run generate-tokens && rollup -c \"./rollup.config.mjs\" && npm run build:generate-package-json-files && npm run build:move-svg && npm run build:types",
35
+ "build": "npm run clean-lib && rollup -c \"./rollup.config.mjs\" && npm run build:generate-package-json-files && npm run build:move-svg && npm run build:types",
36
36
  "build:generate-package-json-files": "node ./scripts/generate_package_json_files/index.js",
37
37
  "build:move-svg": "node ./scripts/copy_svg/index.js",
38
38
  "generate-tokens": "rimraf ./src/components/tokens-wrapper/static-tokens && node ./scripts/generate_tokens/generate_tokens.mjs",