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

React component library

"use strict";const t=require("react/jsx-runtime"),x=require("react"),j=require("./emotion-styled.browser.esm-DwHBgTPn.cjs"),A=require("./Icon.cjs"),L=require("./utils-BK6B_Y9X.cjs"),V=require("./index-7Jsjuf-Q.cjs"),F=require("./motion-B_VPZaJq.cjs"),G=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),N=require("./index-DZoWlChs.cjs"),p="5rem",f="3.8rem",a="1.5rem",W=(e,r,n)=>r&&n?e=="FULL"?`calc(100dvh - ${f} - ${p})`:`calc(100dvh - ${f} - ${p} - ${a})`:r?e=="FULL"?`calc(100dvh - ${f})`:`calc(100dvh - ${f} - ${a})`:n?e=="FULL"?`calc(100dvh - ${p})`:`calc(100dvh - ${p} - ${a})`:e=="FULL"?"100dvh":`calc(100dvh - ${a})`,X=e=>e=="FULL"?"100vw":`calc(100vw - ${a})`,J=(e,r,n)=>e=="FULL"?"0":`${r?"0":"16px"} 0 ${n?"0":"16px"} 0`,K=j.styled(F.motion.div)`
  position: ${e=>e.scrollOverlay==!0?"absolute":"fixed"};
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: ${e=>e.scrollOverlay===!0?"transparent":e.overlayColor};
  z-index: ${e=>e.zIndex};
  display: flex;
`,Q=j.styled(F.motion.div)`
  position: relative;
  width: 50%;
  background-color: white;
  ${e=>e.scrollOverlay==!1?"position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);":"height: fit-content; margin-right: auto; margin-left: auto;"}
  background-color: ${e=>L.getColorRgbaValue(e.theme,"Modal","default","enabled","bg")};
  z-index: ${e=>e.zIndex};
  width: ${e=>ee[e.size.toUpperCase()]};
  max-width: ${e=>X(e.size.toUpperCase())};
  box-shadow: 0px 20px 25px -5px rgba(0, 0, 0, 0.1),
    0px 10px 10px -5px rgba(0, 0, 0, 0.04);
  border-radius: ${e=>e.size.toUpperCase()!="FULL"?"16px":"0"};
  display: flex;
  flex-direction: column;
  gap: 0.5rem;

  & .lnc-modal-header {
    max-height: ${f};
    overflow: hidden;
    padding: ${a} ${a} 0 ${a};
  }
  & .lnc-modal-header > h1,
  h2,
  h3 {
    margin: 0;
  }
  & .lnc-modal-footer {
    max-height: ${p};
    overflow: hidden;
    padding-top: 1rem;
  }
  ${e=>e.size.toUpperCase()=="FULL"&&"height: 100dvh"};

  & .lnc-modal-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    scrollbar-width: thin;
    ${e=>e.scrollOverlay==!1&&`max-height: ${W(e.size.toUpperCase(),e.header,e.footer)};`}
    overflow: auto;
    margin: ${e=>J(e.size,e.header,e.footer)};
    padding: 0 ${a} 0 ${a};
  }
`,Y=j.styled.div`
  position: absolute;
  cursor: pointer;
  top: 1.375rem;
  right: 1.375rem;
  color: ${e=>L.getColorRgbaValue(e.theme,"Modal","primary","enabled","cancelButton")};
  height: 1.5rem;
  width: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  & i {
    font-size: 1.125rem;
  }

  &:hover {
    background-color: ${e=>L.getColorRgbaValue(e.theme,"Modal","primary","hover","cancelBtnBg","cancelBtnBgOpacity")};
  }
  &:focus {
    background-color: ${e=>L.getColorRgbaValue(e.theme,"Modal","primary","focus","cancelBtnBg","cancelBtnBgOpacity")};
  }
`,Z=j.styled(F.motion.div)`
  display: ${e=>e.scrollOverlay===!0?"block":"none"};
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: ${e=>e.overlayColor};
  z-index: 3;
`,P=x.forwardRef((e,r)=>{const{preventDefault:n=!1,portalElement:d=document.body,isOpen:c=!1,header:i,footer:l,scrollOverlay:s=!1,overlay:u=!0,overlayColor:m="rgba(0, 0, 0, 0.3)",showCloseButton:h=!0,onOpen:g=()=>{},onClose:C=()=>{},zIndex:$=1e3,size:y="fluid",clickOutsideToClose:b=!0,className:H="",style:S={},overlayProps:O,overlayAnimation:U={animate:{opacity:1},exit:{opacity:0},initial:{opacity:0},transition:{type:"spring",duration:.6}},modalAnimation:M={animate:{opacity:1},exit:{opacity:0},initial:{opacity:0},transition:{type:"spring",duration:.6}},onFinishOpen:_=()=>{},children:R,rest:z}=e,k=x.useRef(),[v,B]=x.useState(c);let q={theme:G.useTheme(),size:y,zIndex:$,className:H,style:S};const E=o=>{n&&(o==null||o.preventDefault(),o==null||o.stopPropagation()),o.target===o.currentTarget&&b&&w(o)};x.useImperativeHandle(r,()=>({open(){T()},close(){w()},isOpen(){return v}}));const T=o=>{B(!0),g(o)},w=o=>{B(!1),C(o)};return x.useEffect(()=>{v===!0&&_()},[v]),t.jsx(t.Fragment,{children:v&&t.jsx(t.Fragment,{children:d?t.jsx(t.Fragment,{children:V.reactDomExports.createPortal(t.jsx(I,{ref:k,overlay:u,scrollOverlay:s,onClickOutsideModal:E,overlayColor:m,overlayProps:O,overlayAnimation:U,modalAnimation:M,themeProps:q,showCloseButton:h,close:w,header:i,footer:l,isOpen:c,...z,children:R}),d)}):t.jsx(I,{ref:k,overlay:u,scrollOverlay:s,onClickOutsideModal:E,overlayColor:m,overlayProps:O,overlayAnimation:U,modalAnimation:M,themeProps:q,showCloseButton:h,close:w,header:i,footer:l,isOpen:c,...z,children:R})})})}),I=x.forwardRef(({overlay:e,scrollOverlay:r,onClickOutsideModal:n,overlayColor:d,overlayProps:c,overlayAnimation:i,modalAnimation:l,themeProps:s,showCloseButton:u,header:m,footer:h,close:g,isOpen:C,children:$,...y},b)=>t.jsx(N.AnimatePresence,{children:e?t.jsxs(t.Fragment,{children:[t.jsx(Z,{scrollOverlay:r,onClick:n,overlayColor:d,...c,...i}),t.jsx(K,{...s,onClick:n,scrollOverlay:r,overlayColor:d,isOpen:C,...c,...i,children:t.jsx(D,{ref:b,themeProps:s,scrollOverlay:r,modalAnimation:l,showCloseButton:u,close:g,header:m,footer:h,...y,children:$})})]}):t.jsx(D,{ref:b,themeProps:s,modalAnimation:l,showCloseButton:u,close:g,header:m,footer:h,...y,children:$})})),D=x.forwardRef(({themeProps:e,scrollOverlay:r,modalAnimation:n,showCloseButton:d,close:c,header:i,footer:l,children:s,...u},m)=>t.jsx(N.AnimatePresence,{children:t.jsxs(Q,{ref:m,...e,...n,header:i,footer:l,scrollOverlay:r,...u,className:`modal-lnc-container ${e==null?void 0:e.className}`,children:[d&&t.jsx(Y,{...e,className:"modal-lnc-times",onClick:c,children:t.jsx(A,{icon:"times"})}),i&&t.jsx("div",{className:"lnc-modal-header",children:i}),t.jsx("div",{className:"lnc-modal-content",children:s}),l&&t.jsx("div",{className:"lnc-modal-footer",children:l})]})})),ee={FLUID:"max-content",XS:"320px",S:"412px",M:"672px",L:"1112px",XL:"1376px",FULL:"100vw"};module.exports=P;