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

React component library

"use strict";const a=require("react/jsx-runtime"),d=require("react"),H=require("./emotion-styled.browser.esm-DwHBgTPn.cjs"),$=require("./Icon.cjs"),t=require("./utils-BK6B_Y9X.cjs"),J=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),Q=H.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,l.isActive===!0?"active":"enabled","text")};
  &:hover {
    ${l=>l.disabled===!1&&`background-color: ${t.getColorRgbaValue(l.theme,"MenuItem",l.color,"hover","background","backgroundOpacity")};`}

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