next-modal/dist/index.es.js

A sustainable and lightweight react modal component project based on greenCSS. SSR ready.

import{createPortal as e}from"react-dom";import t,{useEffect as o,useRef as n}from"react";function i(){return i=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var n in o)Object.prototype.hasOwnProperty.call(o,n)&&(e[n]=o[n])}return e},i.apply(this,arguments)}function a({width:e="20",height:o="20"}){return t.createElement("svg",{className:"cursor-pointer",xmlns:"http://www.w3.org/2000/svg",width:e,height:o,fill:"none",viewBox:"0 0 20 20"},t.createElement("path",{className:"fill-gray",d:"M5.187 4.01A.833.833 0 004.01 5.187L8.822 10l-4.814 4.813a.835.835 0 101.179 1.178L10 11.178l4.813 4.813a.833.833 0 001.178-1.178L11.178 10l4.813-4.812a.833.833 0 00-1.178-1.179L10 8.822 5.187 4.008v.001z"}))}!function(e,t){void 0===t&&(t={});var o=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===o&&n.firstChild?n.insertBefore(i,n.firstChild):n.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}("@media(prefers-reduced-motion:reduce){*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}*,:after,:before{box-sizing:border-box}*{margin:0}::-moz-focus-inner{border:0}.fade-in{-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-backface-visibility:hidden;backface-visibility:hidden}@keyframes fadeIn{0%{opacity:0}45%{opacity:.33}to{opacity:1}}.font-bold{font-weight:700}.text-20px{font-size:20px}.text-black{color:#101010}.bg-white{background-color:#fdfdfd}.overflow-x-hidden{overflow-x:hidden}.absolute{position:absolute}.fixed{position:fixed}.top-0per{top:0}.top-50per{top:50%}.right-0per{right:0}.bottom-0per{bottom:0}.left-0per{left:0}.left-50per{left:50%}.z-1{z-index:1}.max-w-90per{max-width:90%}.max-w-50vw{max-width:50vw}.min-w-50rem{min-width:50rem}.max-h-75vh{max-height:75vh}.p-20px{padding:20px}.mt-20px{margin-top:20px}.mb-20px{margin-bottom:20px}.animation-forwards{animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards}.animation-duration-500ms{animation-duration:.5s;-webkit-animation-duration:.5s}.shadow-small-gray{box-shadow:5px 5px 10px -1px #7d7d7d;-webkit-box-shadow:5px 5px 10px -1px #7d7d7d;-moz-box-shadow:5px 5px 10px -1px #7d7d7d;-ms-box-shadow:5px 5px 10px -1px #7d7d7d}.backdrop-blur-30px{backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px)}.focus\\:outline-solid:focus{outline-style:solid}.rounded-20px{border-radius:20px}.focus\\:outline-1px:focus{outline-width:1px}.cursor-pointer{cursor:pointer}.fill-gray{fill:#7d7d7d}@media(max-width:480px){.sm\\:min-w-90vw{min-width:90vw}}@media(min-width:481px)and (max-width:768px){.md\\:min-w-90vw{min-width:90vw}}");const r=({children:n,toggle:i,setToggle:r,className:m,backgroundAnimation:l="fade-in animation-duration-500ms animation-forwards",closeIcon:s=t.createElement(a,null),modalContentAnimation:p="fade-in animation-duration-500ms animation-forwards",useKeyInput:c=!0})=>(!0===c&&o((()=>{const e=e=>{27===e.keyCode&&r()};window.addEventListener("keydown",e);const t=e=>{e.ctrlKey&&"k"===e.key&&(e.preventDefault(),r(!0))};return document.addEventListener("keydown",t),()=>window.removeEventListener("keydown",e)||document.removeEventListener("keydown",t)}),[]),"undefined"!=typeof window&&e(t.createElement(t.Fragment,null,i&&t.createElement(t.Fragment,null,t.createElement("div",{onClick:r.bind(void 0,!1),className:`fixed left-0per top-0per bottom-0per right-0per backdrop-blur-30px text-black ${l}`,style:{backgroundColor:"rgba(16,16,16,0.75)"}}),t.createElement(d,{className:m,setToggle:r,closeIcon:s,modalContentAnimation:p},n))),document.querySelector("#modal-portal"))),d=({children:e,className:o,modalContentAnimation:a,closeIcon:r,setToggle:d,...m})=>{const l=n();return t.createElement("div",i({ref:l,tabIndex:0},m,{className:`text-black overflow-x-hidden fixed left-50per top-50per rounded-20px bg-white min-w-50rem max-w-50vw sm:min-w-90vw md:min-w-90vw max-h-75vh shadow-small-gray ${o} ${a}`,style:{transform:"translate(-50%, -50%)"}}),t.createElement("div",{role:"button",tabIndex:0,onKeyPress:d.bind(void 0,!1),onClick:d.bind(void 0,!1),className:"absolute z-1 focus:outline-1px focus:outline-solid focus:outline-gray",style:{top:"20px",right:"20px"}},r),t.createElement("div",{className:"p-20px"},e))};r.Header=({children:e,className:o,...n})=>t.createElement("header",i({className:`text-20px font-bold mb-20px max-w-90per ${o}`},n),e),r.Body=({children:e,className:o,...n})=>t.createElement("div",i({className:`${o}`},n),e),r.Footer=({children:e,className:o,...n})=>t.createElement("footer",i({className:`mt-20px ${o}`},n),e);export{r as Modal};