pure-modal-react-portal/index.js

A simple, pure, and accessible modal component for React with portal support.

!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("react"),require("react-dom"));else if("function"==typeof define&&define.amd)define(["react","react-dom"],t);else{var r="object"==typeof exports?t(require("react"),require("react-dom")):t(e.react,e["react-dom"]);for(var n in r)("object"==typeof exports?exports:e)[n]=r[n]}}(self,(function(e,t){return(()=>{"use strict";var r={462:(e,t,r)=>{r.d(t,{Z:()=>a});var n=r(645),o=r.n(n)()((function(e){return e[1]}));o.push([e.id,"#pure-modal-root .wrapper{position:fixed;inset:0;overflow:auto;outline:0}#pure-modal-root .wrapper--close{display:none}#pure-modal-root .mask{position:fixed;inset:0;height:100%;background-color:#00000073}#pure-modal-root .wrapper-content{width:512px;position:relative;margin:0 auto;height:fit-content;max-width:calc(100vw - 32px)}#pure-modal-root .content{background-color:white}#pure-modal-root .close-element{position:absolute;top:0;right:0;cursor:pointer}\n",""]);const a=o},645:e=>{e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var r=e(t);return t[2]?"@media ".concat(t[2]," {").concat(r,"}"):r})).join("")},t.i=function(e,r,n){"string"==typeof e&&(e=[[null,e,""]]);var o={};if(n)for(var a=0;a<this.length;a++){var i=this[a][0];null!=i&&(o[i]=!0)}for(var c=0;c<e.length;c++){var l=[].concat(e[c]);n&&o[l[0]]||(r&&(l[2]?l[2]="".concat(r," and ").concat(l[2]):l[2]=r),t.push(l))}},t}},379:e=>{var t=[];function r(e){for(var r=-1,n=0;n<t.length;n++)if(t[n].identifier===e){r=n;break}return r}function n(e,n){for(var a={},i=[],c=0;c<e.length;c++){var l=e[c],s=n.base?l[0]+n.base:l[0],u=a[s]||0,d="".concat(s," ").concat(u);a[s]=u+1;var p=r(d),f={css:l[1],media:l[2],sourceMap:l[3]};-1!==p?(t[p].references++,t[p].updater(f)):t.push({identifier:d,updater:o(f,n),references:1}),i.push(d)}return i}function o(e,t){var r=t.domAPI(t);return r.update(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap)return;r.update(e=t)}else r.remove()}}e.exports=function(e,o){var a=n(e=e||[],o=o||{});return function(e){e=e||[];for(var i=0;i<a.length;i++){var c=r(a[i]);t[c].references--}for(var l=n(e,o),s=0;s<a.length;s++){var u=r(a[s]);0===t[u].references&&(t[u].updater(),t.splice(u,1))}a=l}}},569:e=>{var t={};e.exports=function(e,r){var n=function(e){if(void 0===t[e]){var r=document.querySelector(e);if(window.HTMLIFrameElement&&r instanceof window.HTMLIFrameElement)try{r=r.contentDocument.head}catch(e){r=null}t[e]=r}return t[e]}(e);if(!n)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");n.appendChild(r)}},216:e=>{e.exports=function(e){var t=document.createElement("style");return e.setAttributes(t,e.attributes),e.insert(t),t}},565:(e,t,r)=>{e.exports=function(e){var t=r.nc;t&&e.setAttribute("nonce",t)}},795:e=>{e.exports=function(e){var t=e.insertStyleElement(e);return{update:function(r){!function(e,t,r){var n=r.css,o=r.media,a=r.sourceMap;o?e.setAttribute("media",o):e.removeAttribute("media"),a&&"undefined"!=typeof btoa&&(n+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(a))))," */")),t.styleTagTransform(n,e)}(t,e,r)},remove:function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(t)}}}},589:e=>{e.exports=function(e,t){if(t.styleSheet)t.styleSheet.cssText=e;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(e))}}},297:t=>{t.exports=e},268:e=>{e.exports=t}},n={};function o(e){var t=n[e];if(void 0!==t)return t.exports;var a=n[e]={id:e,exports:{}};return r[e](a,a.exports,o),a.exports}o.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return o.d(t,{a:t}),t},o.d=(e,t)=>{for(var r in t)o.o(t,r)&&!o.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var a={};return(()=>{o.r(a),o.d(a,{default:()=>O});var e=o(297),t=o.n(e),r=o(268);const n=function(t){var n=t.children,o=t.wrapperId,a=void 0===o?"react-portal":o,i=(0,e.useState)(null),c=i[0],l=i[1];return(0,e.useLayoutEffect)((function(){var e=document.getElementById(a),t=!1;return e||(t=!0,e=function(e){var t=document.createElement("div");return t.setAttribute("id",e),document.body.appendChild(t),t}(a)),l(e),function(){t&&(null==e?void 0:e.parentNode)&&e.parentNode.removeChild(e)}}),[a]),null===c?null:(0,r.createPortal)(n,c)};var i=function(){return(i=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var o in t=arguments[r])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e}).apply(this,arguments)};const c=function(e){var r=e.zIndex,n=e.className,o=e.style,a=function(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(e);o<n.length;o++)t.indexOf(n[o])<0&&Object.prototype.propertyIsEnumerable.call(e,n[o])&&(r[n[o]]=e[n[o]])}return r}(e,["zIndex","className","style"]);return t().createElement("div",i({className:n,style:Object.assign({},{zIndex:r},o)},a))};var l=o(379),s=o.n(l),u=o(795),d=o.n(u),p=o(569),f=o.n(p),m=o(565),v=o.n(m),y=o(216),h=o.n(y),b=o(589),x=o.n(b),g=o(462),w={};w.styleTagTransform=x(),w.setAttributes=v(),w.insert=f().bind(null,"head"),w.domAPI=d(),w.insertStyleElement=h(),s()(g.Z,w),g.Z&&g.Z.locals&&g.Z.locals;var E=function(e){return e.filter(Boolean).join(" ")};const O=function(r){var o=r.open,a=void 0!==o&&o,i=r.onClose,l=void 0===i?function(){}:i,s=r.children,u=r.destroyOnClose,d=void 0!==u&&u,p=r.closeIcon,f=void 0===p?null:p,m=r.prefixCls,v=void 0===m?"":m,y=r.header,h=void 0===y?null:y,b=r.footer,x=void 0===b?null:b,g=r.maskCloseable,w=void 0===g||g,O=r.zIndex,N=void 0===O?1e3:O,j=(0,e.useRef)(null),C=t().useCallback((function(e){return v?v+"__"+e:""}),[v]),I=t().useCallback((function(e,t){return e+"--"+t}),[]);if(!a&&d)return null;var S=t().createElement("div",{className:E(["close-element",C("close-element")]),onClick:l,style:{zIndex:N}},f||t().createElement("span",{className:E(["close-icon",C("close-icon")])},"×")),k=v,P=E(["mask",C("mask")]),T=E(["wrapper",I("wrapper",a?"open":"close"),C("wrapper")]),M=E(["wrapper-content",C("wrapper-content")]),A=E(["content",C("content")]),z=function(){};return w&&(z=function(e){e.target===j.current&&l()}),t().createElement(n,null,t().createElement("div",{id:"pure-modal-root",className:k},a&&t().createElement(c,{zIndex:N,className:P}),t().createElement("div",{tabIndex:-1,ref:j,onClick:z,className:T,style:{zIndex:N}},t().createElement("div",{className:M},t().createElement("div",{className:A},S,h&&t().createElement("div",{className:"header"},h),t().createElement("div",{className:"body"},s),x&&t().createElement("div",{className:"footer"},x))))))}})(),a})()}));