carbon-react
Version:
A library of reusable React components for easily building user interfaces.
2 lines (1 loc) • 5.67 kB
JavaScript
"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;