UNPKG

react-micro-modal

Version:
3 lines (2 loc) 4.5 kB
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["exports","react","react-dom"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).ReactMicroModal={},e.React,e.ReactDOM)}(this,(function(e,t,n){"use strict";function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=a(t);function l(e,t){var n={};for(var a in e)Object.prototype.hasOwnProperty.call(e,a)&&t.indexOf(a)<0&&(n[a]=e[a]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(a=Object.getOwnPropertySymbols(e);r<a.length;r++)t.indexOf(a[r])<0&&Object.prototype.propertyIsEnumerable.call(e,a[r])&&(n[a[r]]=e[a[r]])}return n}const o=["a[href]","area[href]",'input:not([disabled]):not([type="hidden"]):not([aria-hidden])',"select:not([disabled]):not([aria-hidden])","textarea:not([disabled]):not([aria-hidden])","button:not([disabled]):not([aria-hidden])","iframe","object","embed","[contenteditable]",'[tabindex]:not([tabindex^="-"])'],i=e=>Object.values(e.querySelectorAll(o)),s={position:"fixed",top:0,left:0,right:0,bottom:0,background:"rgba(0, 0, 0, 0.6)",display:"flex",justifyContent:"center",alignItems:"center"},c={backgroundColor:"#fff",padding:"30px",maxWidth:"500px",maxHeight:"100vh",borderRadius:"4px",overflowY:"auto",boxSizing:"border-box"},d=({parent:e,children:a})=>{const r=t.useMemo((()=>(()=>{const e=document.createElement("div");return e.className="react-micro-modal--portal",e})()),[]),l=()=>{var t;return null!==(t=null==e?void 0:e())&&void 0!==t?t:document.body};return t.useEffect((()=>(l().appendChild(r),()=>{l().removeChild(r)})),[]),n.createPortal(a,r)},u=e=>"false"===e?"modal-fade-in":"modal-fade-out",f=e=>"false"===e?"modal-slide-in":"modal-slide-out",b=[];e.default=e=>{var{trigger:n,children:a,open:o,handleClose:m,parent:p,openInitially:v,closeOnAnimationEnd:y,closeOnEscapePress:g=!0,closeOnOverlayClick:h=!0,disableFirstElementFocus:O}=e,E=e.overrides,j=void 0===E?{}:E,x=j.Root,k=void 0===x?{style:{}}:x,{style:C}=k,R=l(k,["style"]),P=j.Overlay,w=void 0===P?{style:{},className:""}:P,{style:D}=w,L=l(w,["style"]),M=j.Dialog,S=void 0===M?{style:{}}:M,{style:q}=S,z=l(S,["style"]);const F=t.useRef(null),I=t.useRef(null),T=t.useRef(null),[A,K]=t.useState(null!=v&&v),[N,$]=t.useState(!1),_=A&&!N?"false":"true",H=t.useMemo((()=>void 0!==o),[o]),W=t.useRef(!1),Y=t.useCallback((()=>{K(!0),$(!1)}),[K,$]),B=t.useCallback((()=>{K(!1),$(!1)}),[K,$]),G=t.useCallback((()=>{y?$(!0):B()}),[B,y]),J=t.useCallback((()=>{H?m&&m():G()}),[H,m,G]),Q=t.useCallback((e=>{I===b[b.length-1]&&("Escape"===e.key&&g&&(e.stopPropagation(),J()),"Tab"===e.key&&I.current&&((e,t)=>{const n=i(e);if(!n.length)return;const a=n[0];if(e.contains(document.activeElement)){const e=n.indexOf(document.activeElement);return t.shiftKey&&0===e&&(n[n.length-1].focus(),t.preventDefault()),t.shiftKey||e!==n.length-1||(a.focus(),t.preventDefault()),n[e]}a.focus(),t.preventDefault()})(I.current,e))}),[J]),U=t.useCallback((e=>{e.target&&I.current&&!I.current.contains(e.target)&&(J(),e.preventDefault())}),[J]);return t.useEffect((()=>{W.current?!0===o?Y():!1===o&&G():W.current=!0}),[o]),t.useEffect((()=>{const e=I.current;N&&e&&e.addEventListener("animationend",(function t(){B(),e.removeEventListener("animationend",t,!1)}))}),[N]),t.useEffect((()=>{var e,t;A?(T.current=document.activeElement,b.push(I),document.addEventListener("keydown",Q),h&&(null===(e=F.current)||void 0===e||e.addEventListener("click",U)),!O&&I.current&&(e=>{const t=i(e);let n;t.length&&([n]=t,n.focus())})(I.current)):(document.removeEventListener("keydown",Q),h&&(null===(t=F.current)||void 0===t||t.removeEventListener("click",U)),b.pop(),T.current&&(T.current.focus(),T.current=null))}),[A]),r.default.createElement(r.default.Fragment,null,void 0!==n&&n(Y),r.default.createElement(d,{parent:p},r.default.createElement("div",Object.assign({ref:F,"aria-hidden":_,style:Object.assign({display:A?"block":"none"},C)},R),r.default.createElement("div",Object.assign({style:Object.assign(Object.assign(Object.assign({},s),{animation:`${u(_)} 0.3s cubic-bezier(0, 0, 0.2, 1)`}),D)},L),r.default.createElement("div",Object.assign({ref:I,role:"dialog","aria-modal":"true",style:Object.assign(Object.assign(Object.assign({},c),{animation:`${f(_)} 0.3s cubic-bezier(0, 0, 0.2, 1)`}),q)},z),A?a(J):null)))))},Object.defineProperty(e,"__esModule",{value:!0})})); //# sourceMappingURL=index.umd.production.min.js.map