react-micro-modal/dist/index.cjs.production.min.js

React accessible micro modal component

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