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

React component library

"use strict";const a=require("react/jsx-runtime"),f=require("react"),G=require("./emotion-styled.browser.esm-DwHBgTPn.cjs"),x=require("./Icon.cjs"),t=require("./utils-BK6B_Y9X.cjs"),H=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),J=G.styled.div`
  box-sizing: border-box;
  cursor: ${l=>l.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: ${l=>t.getColorRgbaValue(l.theme,"MenuItem",l.color,"enabled","text")};
  ${l=>t.getComponentTypographyCss(l.theme,"MenuItem",l.size,"enabled")};
  & .menu-icon-lnc {
    color: ${l=>l.isActive&&l.disabled==!1?t.getColorRgbaValue(l.theme,"MenuItem",l.color,"focus","icon"):t.getColorRgbaValue(l.theme,"MenuItem",l.color,"enabled","icon")};

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

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

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