react-st-modal/build/index.js

React St Modal is a simple and flexible library for implementing modal dialogs

import e,{forwardRef as t,useRef as o,useEffect as n,useState as l,useCallback as a,useContext as r}from"react";import d from"react-dom";
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.

Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */function i(e,t,o,n){return new(o||(o=Promise))((function(l,a){function r(e){try{i(n.next(e))}catch(e){a(e)}}function d(e){try{i(n.throw(e))}catch(e){a(e)}}function i(e){var t;e.done?l(e.value):(t=e.value,t instanceof o?t:new o((function(e){e(t)}))).then(r,d)}i((n=n.apply(e,t||[])).next())}))}function s(e,t){void 0===t&&(t={});var o=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===o&&n.firstChild?n.insertBefore(l,n.firstChild):n.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}var c={button:"Button-module_button__3FnXy","--primary":"Button-module_--primary__1ZLkB Button-module_button__3FnXy","--danger":"Button-module_--danger__2K53z Button-module_button__3FnXy","--light":"Button-module_--light__3HiwO Button-module_button__3FnXy","--dark":"Button-module_--dark__1kDBA Button-module_button__3FnXy",buttonPending:"Button-module_buttonPending__1mRIX",spin:"Button-module_spin__25Z1R"};function u(){return e.createElement("svg",{viewBox:"0 0 512 512",width:"20",height:"20",fill:"#ffffff",fillRule:"nonzero"},e.createElement("g",null,e.createElement("path",{d:"M102.59,341.42a15,15,0,0,1-13.42-8.28,187.41,187.41,0,0,1,35.11-216.86c73.18-73.19,192.26-73.19,265.44,0a15,15,0,0,1-21.21,21.21C307,76,207,76,145.49,137.49A157.45,157.45,0,0,0,116,319.69a15,15,0,0,1-13.4,21.73Z"}),e.createElement("path",{d:"M257,436.61a187.1,187.1,0,0,1-132.72-54.88,15,15,0,1,1,21.21-21.22C207,422,307,422,368.51,360.51A157.45,157.45,0,0,0,398,178.31a15,15,0,0,1,26.82-13.45A187.62,187.62,0,0,1,257,436.61Z"}),e.createElement("path",{d:"M315.21,148.25a15,15,0,0,1-1.47-29.92l47.43-4.73-9.51-47.67a15,15,0,0,1,29.42-5.86L393.82,124a15,15,0,0,1-13.22,17.86l-63.88,6.37C316.21,148.23,315.71,148.25,315.21,148.25Z"}),e.createElement("path",{d:"M147.61,450a15,15,0,0,1-14.7-12.07l-12.74-63.88a15,15,0,0,1,13.23-17.86l63.88-6.37a15,15,0,0,1,3,29.85l-47.43,4.73,9.5,47.67A15,15,0,0,1,147.61,450Z"})))}s("@-webkit-keyframes Button-module_spin__25Z1R{to{transform:rotate(1turn)}}@keyframes Button-module_spin__25Z1R{to{transform:rotate(1turn)}}.Button-module_button__3FnXy{display:inline-flex;align-items:center;justify-content:center;position:relative;overflow:hidden;padding:.8rem 3rem;border:none;border-radius:6px;font-size:80%;text-transform:uppercase;font-weight:bolder}.Button-module_button__3FnXy svg{margin-right:3px}.Button-module_button__3FnXy:active{padding:.9rem 3rem .7rem}.Button-module_--primary__1ZLkB{background-color:var(--st-button-primaryColor);color:var(--st-button-primaryTextColor)}.Button-module_--danger__2K53z{background-color:var(--st-button-dangerColor);color:var(--st-button-dangerTextColor)}.Button-module_--light__3HiwO{background-color:var(--st-button-lightColor);color:var(--st-button-lightTextColor)}.Button-module_--dark__1kDBA{background-color:var(--st-button-darkColor);color:var(--st-button-darkTextColor)}.Button-module_buttonPending__1mRIX{pointer-events:none;opacity:.8;padding-left:2.7rem}.Button-module_buttonPending__1mRIX svg{margin-right:.3rem;-webkit-animation:Button-module_spin__25Z1R 1s linear infinite;animation:Button-module_spin__25Z1R 1s linear infinite}");const m=t(((t,o)=>{var n;return e.createElement("button",{ref:o,autoFocus:t.autoFocus,onClick:t.onClick,type:t.formRole||"button",disabled:"disabled"===t.state||"pending"===t.state,className:[null!==(n=t.className)&&void 0!==n?n:"",c[t.type?"--"+t.type:"--primary"],"pending"===t.state?c.buttonPending:""].join(" ")},"pending"===t.state&&e.createElement(u,null),t.children)}));m.displayName="Button";function p(t){var l;const a=o(),r=o(),d=null===(l=t.isLocked)||void 0===l||l;return n((()=>{const e=()=>{var e;r.current=null===(e=a.current)||void 0===e?void 0:e.querySelectorAll('input, select, textarea, button, [href], [tabindex]:not([tabindex="-1"]), video')},t=new MutationObserver((()=>{e()}));return e(),t.observe(a.current,{childList:!0}),()=>{t.disconnect()}}),[a]),n((()=>{var e,o;if(t.isOpen){if(0===(null===(e=a.current)||void 0===e?void 0:e.querySelectorAll('input:focus, button:focus, [href]:focus, select:focus, textarea:focus, [tabindex]:not([tabindex="-1"]):focus, video:focus')).length&&r.current.length>0){let e=null;const t=null===(o=a.current)||void 0===o?void 0:o.querySelector(".stf__dialogClose");r.current.forEach((o=>{o!==t&&null===e&&(e=o)})),null===e&&(e=t),e.focus()}}}),[t.isOpen]),n((()=>{const e=e=>{if(!r.current||0===r.current.length)return;const{key:t,shiftKey:o}=e,{length:n,0:l,[n-1]:a}=r.current;if(d&&"Tab"===t){if(1===n)return void e.preventDefault();if(!o&&document.activeElement===a)return e.preventDefault(),void l.focus();if(o&&document.activeElement===l)return e.preventDefault(),void a.focus()}};if(t.isOpen)return window.addEventListener("keydown",e),()=>{window.removeEventListener("keydown",e)}}),[d,r,t.isOpen]),e.createElement("div",{ref:a},t.children)}function _(e){let t=document.getElementById(e);return t||(t=document.createElement("div"),t.setAttribute("id",e),document.body.appendChild(t)),t}s(":root{--st-overlay-color:rgba(0,0,0,0.4);--st-overlay-z-index:1000;--st-overlay-transition:opacity 0.6s cubic-bezier(0.25,1,0.5,1);--st-overlay-perspective:1000px;--st-modal-minWidth:300px;--st-modal-borderRadius:5px;--st-modal-border:none;--st-modal-boxShadow:0 0 10px rgba(0,0,0,0.3);--st-modal-transformVisible:translate3d(-50%,-50%,0) scale(1) rotateX(0);--st-modal-transformHidden:translate3d(-50%,100%,0) scale(0.5) rotateX(-90deg);--st-modal-transition:all 0.6s cubic-bezier(0.25,1,0.5,1);--st-modal-backgroundColor:#fff;--st-modal-titleTextColor:#444;--st-modal-secondColor:#f6f6f6;--st-button-dangerColor:#ff5c5c;--st-button-dangerTextColor:#fff;--st-button-primaryColor:#5d9aff;--st-button-primaryTextColor:#fff;--st-button-lightColor:#f6f6f6;--st-button-lightTextColor:#444;--st-button-darkColor:#444;--st-button-darkTextColor:#f6f6f6;--st-button-borderRadius:6px;--st-input-padding:0.5rem;--st-input-border:solid 1px #eee;--st-input-borderRadius:6px;--st-dialog-baseWidth:95%;--st-dialog-maxWidth:600px;--st-dialog-padding:1rem;--st-dialog-maxContentHeight:85vh;--st-dialog-contentColor:#000}");var v={overlay:"Modal-module_overlay__21YAk",overlayHidden:"Modal-module_overlayHidden__1PlEe",modal:"Modal-module_modal__FqeFw",modalHidden:"Modal-module_modalHidden__3kGH6",modalBody:"Modal-module_modalBody__3_RoW",modalTitle:"Modal-module_modalTitle__1TtY9",modalContent:"Modal-module_modalContent__nuwvF",promtInput:"Modal-module_promtInput__1ceBZ",promtErrorInput:"Modal-module_promtErrorInput__1dvtX Modal-module_promtInput__1ceBZ",promtErrorText:"Modal-module_promtErrorText__2Eyj9",modalButtonPlace:"Modal-module_modalButtonPlace__AYeOm",modalCloseIcon:"Modal-module_modalCloseIcon__20QFz",dialog:"Modal-module_dialog__2UBIn",staticDialog:"Modal-module_staticDialog__1ApBK",alert:"Modal-module_alert__vNcoS Modal-module_dialog__2UBIn"};function g(t){var r;const d=null===(r=t.isBodyScrollLocked)||void 0===r||r,[i,s]=l(!1),[c,u]=l(!0),m=o(i),_=o(!1),g=o(),f=a((e=>{t.isOpen&&t.onAttemptClose&&("Esc"===e.key||"Escape"===e.key)&&t.onAttemptClose()}),[t]);return n((()=>{var e,o;if(s(t.isOpen),m.current=t.isOpen,d){(null===(e=t.replaceScrollBar)||void 0===e||e)&&(document.body.style.borderRight=t.isOpen?`solid ${window.innerWidth-document.documentElement.clientWidth}px ${null!==(o=t.scrollBarPlaceholderColor)&&void 0!==o?o:"#eeeeee"}`:"none"),document.body.style.overflow=t.isOpen?"hidden":t.defaultBodyOverflow||"visible"}}),[t.isOpen,t.defaultBodyOverflow,t.scrollBarPlaceholderColor,t.replaceScrollBar,d]),n((()=>(window.addEventListener("keydown",f),()=>{window.removeEventListener("keydown",f)})),[f]),e.createElement(p,{isLocked:t.isFocusLock,isOpen:i},e.createElement("div",{ref:g,className:[v.overlay,i?"":v.overlayHidden,c&&!i&&t.isStatic?v.staticDialog:""].join(" "),onMouseDown:e=>{e.target===g.current&&(_.current=!0)},onMouseUp:e=>{e.target===g.current&&!0===_.current&&(_.current=!1,t.onAttemptClose())}},e.createElement("div",{role:"dialog","aria-modal":"true","aria-labelledby":t.labelledby||"","aria-describedby":t.describedby||"",onTransitionEnd:()=>{m.current&&t.onCompletelyVisible&&t.onCompletelyVisible(),!m.current&&t.onCompletelyHidden&&t.onCompletelyHidden(),t.isStatic&&u(!m.current)},className:[v.modal,t.className||"",i?"":v.modalHidden].join(" ")},t.children)))}function f(t){const[o,n]=l(!0),a=(~~(1e8*Math.random())).toString(16),r=e=>{n(!1),t.onClose&&t.onClose(e)};return e.createElement(g,{className:v.alert,isOpen:o,labelledby:"header_"+a,describedby:"content_"+a,onAttemptClose:()=>r("cancel"),onCompletelyHidden:()=>{t.onCompletelyHidden&&t.onCompletelyHidden()}},t.title&&e.createElement("div",{className:v.modalTitle,id:"header_"+a},t.title),e.createElement("div",{className:v.modalContent,id:"content_"+a},t.body),e.createElement("div",{className:v.modalButtonPlace},e.createElement(m,{onClick:()=>{r("ok")}},t.okButtonText||"Ok"),e.createElement(m,{onClick:()=>{r("cancel")},autoFocus:!0,type:"light"},t.cancelButtonText||"Cancel")))}function b(t){const[o,n]=l(!0),a=(~~(1e8*Math.random())).toString(16),r=()=>{n(!1),t.onClose&&t.onClose()};return e.createElement(g,{className:v.alert,isOpen:o,labelledby:"header_"+a,describedby:"content_"+a,onAttemptClose:r,onCompletelyHidden:()=>{t.onCompletelyHidden&&t.onCompletelyHidden()}},t.title&&e.createElement("h3",{className:v.modalTitle,id:"header_"+a},t.title),e.createElement("div",{className:v.modalContent,id:"content_"+a},t.body),e.createElement("div",{className:v.modalButtonPlace},e.createElement(m,{onClick:r,autoFocus:!0},t.buttonText||"Ok")))}s(".Modal-module_overlay__21YAk{position:fixed;display:block;z-index:var(--st-overlay-z-index);left:0;top:0;width:100%;height:100%;background-color:var(--st-overlay-color);opacity:1;transition:var(--st-overlay-transition);perspective:var(--st-overlay-perspective)}.Modal-module_overlay__21YAk.Modal-module_overlayHidden__1PlEe{opacity:0;transition:var(--st-overlay-transition)}.Modal-module_modal__FqeFw{position:absolute;overflow:hidden;display:block;z-index:calc(var(--st-overlay-z-index) + 1);min-width:var(--st-modal-minWidth);transform:var(--st-modal-transformVisible);transition:var(--st-modal-transition);left:50%;top:50%;border:var(--st-modal-border);border-radius:var(--st-modal-borderRadius);box-shadow:var(--st-modal-boxShadow);background-color:var(--st-modal-backgroundColor);opacity:1}.Modal-module_modal__FqeFw.Modal-module_modalHidden__3kGH6{opacity:0;transform:var(--st-modal-transformHidden)}.Modal-module_modalBody__3_RoW{position:relative;max-height:var(--st-dialog-maxContentHeight);overflow-y:auto}.Modal-module_modalTitle__1TtY9{text-transform:uppercase;font-size:80%;font-weight:700;padding:var(--st-dialog-padding) var(--st-dialog-padding) calc(var(--st-dialog-padding)/2) var(--st-dialog-padding);color:var(--st-modal-titleTextColor);border-bottom:1px solid var(--st-modal-secondColor);margin:0}.Modal-module_modalContent__nuwvF{padding:calc(var(--st-dialog-padding)/2) var(--st-dialog-padding);color:var(--st-dialog-contentColor)}.Modal-module_promtInput__1ceBZ{width:100%;padding:var(--st-input-padding);border:var(--st-input-border);border-radius:var(--st-input-borderRadius)}.Modal-module_promtErrorInput__1dvtX{border-color:var(--st-button-dangerColor);box-shadow:0 0 3px var(--st-button-dangerColor)}.Modal-module_promtErrorText__2Eyj9{color:var(--st-button-dangerColor);font-size:80%;font-style:italic}.Modal-module_modalButtonPlace__AYeOm{display:flex;justify-content:flex-end;position:relative;overflow:hidden;padding:calc(var(--st-dialog-padding)/2) var(--st-dialog-padding);background-color:var(--st-modal-secondColor)}.Modal-module_modalButtonPlace__AYeOm>button{margin-left:1rem}.Modal-module_modalCloseIcon__20QFz{border:none;background:none;display:block;width:15px;height:15px;padding:0;overflow:hidden;position:absolute;right:var(--st-dialog-padding);top:var(--st-dialog-padding);cursor:pointer}.Modal-module_modalCloseIcon__20QFz svg{width:15px;height:15px;fill:var(--st-modal-titleTextColor)}.Modal-module_dialog__2UBIn{width:var(--st-dialog-baseWidth);max-width:var(--st-dialog-maxWidth)}.Modal-module_staticDialog__1ApBK{width:0;height:0;z-index:-1}");const y=e.createContext({dialogState:{result:void 0,isOpen:!1,isForce:!1},setDialogState:()=>null}),h=t=>{const[o,n]=l({result:void 0,isOpen:!1,isForce:!1});return e.createElement(y.Provider,{value:{dialogState:o,setDialogState:n}},t.children)};function C(t){var o;const l=t.onClose,a=t.onAfterClose,d=(~~(1e8*Math.random())).toString(16),i=null===(o=t.isCanClose)||void 0===o||o,{dialogState:s,setDialogState:c}=r(y);n((()=>{c({isOpen:t.isOpen,isForce:!1})}),[t.isOpen,c]);const u=()=>{c({isOpen:!1,result:void 0,isForce:!0})};n((()=>{!s.isOpen&&s.isForce&&(l&&l(s.result),a&&a(s.result)),s.isOpen&&t.onAfterOpen&&t.onAfterOpen()}),[s]);return e.createElement(g,{className:[v.dialog,t.className].join(" "),labelledby:"header_"+d,describedby:"content_"+d,isOpen:s.isOpen,isStatic:t.isStatic,isFocusLock:t.isFocusLock,defaultBodyOverflow:t.defaultBodyOverflow,isBodyScrollLocked:t.isBodyScrollLocked,replaceScrollBar:t.replaceScrollBar,scrollBarPlaceholderColor:t.scrollBarPlaceholderColor,onAttemptClose:()=>{i&&(a?a(s.result):u())},onCompletelyHidden:()=>{t.onCompletelyHidden&&t.onCompletelyHidden()}},t.showCloseIcon&&e.createElement("button",{className:["stf__dialogClose",v.modalCloseIcon].join(" "),"aria-label":"Close",onClick:()=>{a?a(s.result):u()}},e.createElement(x,null)),t.title&&e.createElement("h3",{className:v.modalTitle,id:"header_"+d},t.title),e.createElement("div",{id:"content_"+d,className:v.modalBody},t.children))}function x(){return e.createElement("svg",{height:"512px",viewBox:"0 0 512 512",width:"512px"},e.createElement("path",{d:"M437.5,386.6L306.9,256l130.6-130.6c14.1-14.1,14.1-36.8,0-50.9c-14.1-14.1-36.8-14.1-50.9,0L256,205.1L125.4,74.5  c-14.1-14.1-36.8-14.1-50.9,0c-14.1,14.1-14.1,36.8,0,50.9L205.1,256L74.5,386.6c-14.1,14.1-14.1,36.8,0,50.9c14.1,14.1,36.8,14.1,50.9,0L256,306.9l130.6,130.6c14.1,14.1,36.8,14.1,50.9,0C451.5,423.4,451.5,400.6,437.5,386.6z"}))}function B(t){var o;const[a,r]=l(!0),[d,i]=l(!1),s=(~~(1e8*Math.random())).toString(16),c=void 0!==t.defaultValue?String(t.defaultValue):void 0,[u,p]=l(c),_=e=>{r(!1),t.onClose&&t.onClose(e)};return n((()=>{t.isRequired&&void 0!==u&&(""===u.trim()?i(!0):i(!1))}),[u,t]),e.createElement(g,{className:v.alert,isOpen:a,labelledby:"header_"+s,describedby:"content_"+s,onAttemptClose:()=>_(void 0),onCompletelyHidden:()=>{t.onCompletelyHidden&&t.onCompletelyHidden()}},t.title&&e.createElement("div",{className:v.modalTitle,id:"header_"+s},t.title),e.createElement("div",{className:v.modalContent,id:"content_"+s},e.createElement("input",{type:"text",className:d?v.promtErrorInput:v.promtInput,onChange:e=>{p(e.target.value)},defaultValue:u,name:"promtDialog",autoFocus:!0}),e.createElement("div",{className:v.promtErrorText},null!==(o=d&&t.errorText)&&void 0!==o?o:"Value input required")),e.createElement("div",{className:v.modalButtonPlace},e.createElement(m,{onClick:()=>{!t.isRequired||u&&""!==u.trim()?_(u):i(!0)}},t.okButtonText||"Ok"),e.createElement(m,{onClick:()=>{_(void 0)},type:"light"},t.cancelButtonText||"Cancel")))}function E(t,o){const n=_("stfDialogPlace"),l=document.createElement("div");return l.classList.add("stf__modalDialogsPlace"),n.appendChild(l),new Promise((a=>{const r=document.activeElement;d.render(e.createElement(h,null,e.createElement(t,Object.assign({},o,{onClose:e=>{a(e),r&&1===n.childNodes.length&&r.focus()},onCompletelyHidden:()=>{d.render(void 0,l),l.remove()}}))),l)}))}function k(e,t,o){return E(b,{body:e,title:t,buttonText:o})}function w(e,t){return E(B,Object.assign({title:e},t))}function M(e,t,o,n){return i(this,void 0,void 0,(function*(){return"ok"===(yield E(f,{body:e,title:t,okButtonText:o,cancelButtonText:n}))}))}function O(e,t){return i(this,void 0,void 0,(function*(){return E(C,Object.assign(Object.assign({},t),{children:e,isOpen:!0}))}))}var T={content:"Content-module_content__1e-91"};function F(t){return e.createElement("div",{className:[t.className,T.content].join(" ")},t.children)}s(".Content-module_content__1e-91{padding:calc(var(--st-dialog-padding)/2) var(--st-dialog-padding) var(--st-dialog-padding) var(--st-dialog-padding)}");var N={footer:"Footer-module_footer__1VyaK"};function S(t){return e.createElement("div",{className:[t.className,N.footer].join(" ")},t.children)}function H(t){const l=o();return n((()=>{t.isOpen?l.current=document.activeElement:l.current&&(l.current.focus(),l.current=null)}),[t.isOpen]),d.createPortal(e.createElement(h,null,e.createElement(C,Object.assign({},t,{isStatic:!0}))),_("stfMountedDialogPlace"))}function A(){const{dialogState:e,setDialogState:t}=r(y),o=a((e=>{t({isOpen:!1,isForce:!0,result:e})}),[t]);return{isOpen:e.isOpen,close:o}}s(".Footer-module_footer__1VyaK{display:flex;justify-content:flex-end;position:relative;overflow:hidden;padding:calc(var(--st-dialog-padding)/2) var(--st-dialog-padding);background-color:var(--st-modal-secondColor)}.Footer-module_footer__1VyaK>button{margin-left:1rem}");export{k as Alert,M as Confirm,O as CustomDialog,C as Dialog,g as Modal,m as ModalButton,F as ModalContent,S as ModalFooter,w as Prompt,H as StaticDialog,A as useDialog};
//# sourceMappingURL=index.js.map