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

React component library

"use strict";const c=require("react/jsx-runtime"),d=require("react"),l=require("./index-BPVoEhTF.cjs"),G=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),C=require("./Icon.cjs"),s=require("./utils-NZLCh-J5.cjs"),H=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),J=G.newStyled.div`
  box-sizing: border-box;
  cursor: ${o=>o.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: ${o=>s.getColorRgbaValue(o.theme,"MenuItem",o.color,o.isActive===!0?"active":"enabled","text")};
  &:hover {
    ${o=>o.disabled===!1&&`background-color: ${s.getColorRgbaValue(o.theme,"MenuItem",o.color,"hover","background","backgroundOpacity")};`}

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