@lanaco/lnc-react-ui/dist/MenuItem.cjs

React component library

"use strict";const c=require("react/jsx-runtime"),f=require("react"),s=require("./index-BPVoEhTF.cjs"),G=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),M=require("./Icon.cjs"),l=require("./utils-NZLCh-J5.cjs"),H=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),J=G.newStyled.div`
  box-sizing: border-box;
  cursor: ${n=>n.disabled==!1?"pointer":"context-menu"};
  width: 100%;
  border-radius: 6px;
  display: flex;
  align-items: center;
  min-height: 2.25rem;
  gap: 0.563rem;
  padding: 0.563rem;
  color: ${n=>l.getColorRgbaValue(n.theme,"MenuItem",n.color,"enabled","text")};
  ${n=>l.getComponentTypographyCss(n.theme,"MenuItem",n.size,"enabled")};
  & .menu-icon-lnc {
    color: ${n=>n.isActive&&n.disabled==!1?l.getColorRgbaValue(n.theme,"MenuItem",n.color,"focus","icon"):l.getColorRgbaValue(n.theme,"MenuItem",n.color,"enabled","icon")};

    ${n=>n.disabled===!0&&l.getDisabledStateCss(n.theme)};
    background: transparent;
  }
  & .sub-menu-icon-lnc {
    margin-left: auto;
    transform: ${n=>n.showNested?"rotate(180deg)":"rotate(0)"};
    transition: transform 0.25s ease;
  }

  ${n=>n.isActive==!0&&n.disabled==!1&&`background-color: ${l.getColorRgbaValue(n.theme,"MenuItem",n.color,"focus","background","backgroundOpacity")};
    color: ${l.getColorRgbaValue(n.theme,"MenuItem",n.color,"focus","text")};
  `}
  outline: none;

  ${n=>n.disabled===!0&&l.getDisabledStateCss(n.theme)};
  &:hover {
    ${n=>n.disabled==!1&&`background-color: ${l.getColorRgbaValue(n.theme,"MenuItem",n.color,"hover","background","backgroundOpacity")};
      color: ${l.getColorRgbaValue(n.theme,"MenuItem",n.color,"hover","text")};
      `}
  }
`,h=f.forwardRef((n,a)=>{const{value:T,active:r=null,icon:E,disabled:m=!1,isNested:d=!1,showNested:P,justifyToEnd:Q=!1,onFocus:N=()=>{},onBlur:k=()=>{},onClick:C=()=>{},onKeyDown:v=()=>{},onMouseEnter:W=()=>{},onMouseLeave:X=()=>{},toggleNested:u=()=>{},onItemSelected:w=()=>{},className:x="",style:_={},color:$="primary",size:R="small",iconProps:S,__TYPE__:Z="MENU_ITEM",children:A,...j}=n,q={theme:H.useTheme(),color:$,style:_,size:R},y=f.useRef(),[O,g]=f.useState(r??!1);f.useEffect(()=>{g(r)},[r]);const D=e=>{m==!1&&(d&&u&&u(),w(e,T)),C(C)},F=e=>{g(!0),N(e)},V=e=>{r==null&&g(!1),k(e)},z=e=>{e.preventDefault(),e.key=="ArrowDown"?b(a?a.current:y.current):e.key=="ArrowUp"?p(a?a.current:y.current):(e.key=="Enter"||e.keyCode==32)&&m==!1&&(d&&u&&u(),w(e,T)),v(e)},b=e=>{if(e!=null&&e.nextSibling){let o=B(e);if(o!=null&&o.node&&(o==null?void 0:o.type)=="item")o.node.focus();else if(o!=null&&o.node&&(o==null?void 0:o.type)=="nested"){let i=L(o.node);i&&i.focus()}else e!=null&&e.parentElement&&t(e.parentElement,"nested-item-lnc")&&b(e.parentElement)}else e!=null&&e.parentElement&&t(e.parentElement,"nested-item-lnc")&&b(e.parentElement)},p=e=>{if(e!=null&&e.previousSibling){let o=K(e);if(o!=null&&o.node&&(o==null?void 0:o.type)=="item")o.node.focus();else if(o!=null&&o.node&&(o==null?void 0:o.type)=="nested"){let i=U(o.node);i&&i.focus()}else e!=null&&e.parentElement&&t(e.parentElement,"nested-item-lnc")&&p(e.parentElement)}else e!=null&&e.parentElement&&t(e.parentElement,"nested-item-lnc")&&p(e.parentElement)},B=e=>{for(;e=e.nextSibling;){if(t(e,"menu-item-lnc"))return{node:e,type:"item"};if(t(e,"nested-item-lnc"))return{node:e,type:"nested"}}return null},K=e=>{for(;e=e.previousSibling;){if(t(e,"menu-item-lnc"))return{node:e,type:"item"};if(t(e,"nested-item-lnc"))return{node:e,type:"nested"}}return null},L=e=>{var o;return(o=Array.from(e.querySelectorAll(".menu-item-lnc")))==null?void 0:o[0]},U=e=>{var o;return(o=Array.from(e.querySelectorAll(".menu-item-lnc")))==null?void 0:o.pop()},t=(e,o)=>{var i=" "+e.className+" ",Y=" "+o+" ";return i.indexOf(Y)!=-1};return c.jsx(c.Fragment,{children:c.jsxs(J,{ref:a||y,className:"menu-item-lnc "+(d?"nested-menu-item-lnc ":"")+(P?"spread-nested-item-lnc ":"")+x,...q,disabled:m,tabIndex:0,onKeyDown:z,onFocus:F,onBlur:V,onClick:D,isActive:O,showNested:P,...j,children:[E&&c.jsx(M,{icon:E,className:"menu-icon-lnc",...S}),c.jsx("div",{children:A}),d&&c.jsx(M,{icon:"angle-down",className:"sub-menu-icon-lnc"})]})})});h.propTypes={value:s.PropTypes.any,active:s.PropTypes.bool,icon:s.PropTypes.string,disabled:s.PropTypes.bool,isNested:s.PropTypes.bool,justifyToEnd:s.PropTypes.bool,onBlur:s.PropTypes.func,onFocus:s.PropTypes.func,onClick:s.PropTypes.func,onKeyDown:s.PropTypes.func,onMouseEnter:s.PropTypes.func,onMouseLeave:s.PropTypes.func,className:s.PropTypes.string,style:s.PropTypes.object,color:s.PropTypes.oneOf(["primary","secondary","success","warning","danger","information","neutral","gray"]),iconProps:s.PropTypes.any,size:s.PropTypes.oneOf(["small","medium","large"]),__TYPE__:s.PropTypes.string};h.displayName="MENU_ITEM";module.exports=h;