react-hyper-modal/dist/index.es.js

Fully customizable and accessible modal react component

import*as e from"react";import{useState as n}from"react";import{createPortal as t}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.
***************************************************************************** */var r=function(){return r=Object.assign||function(e){for(var n,t=1,r=arguments.length;t<r;t++)for(var o in n=arguments[t])Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o]);return e},r.apply(this,arguments)};function o(e,n){var t={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&n.indexOf(r)<0&&(t[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);o<r.length;o++)n.indexOf(r[o])<0&&Object.prototype.propertyIsEnumerable.call(e,r[o])&&(t[r[o]]=e[r[o]])}return t}function a(e){return e}var i=function(n){var t=n.sideCar,a=o(n,["sideCar"]);if(!t)throw new Error("Sidecar: please provide `sideCar` property to import the right car");var i=t.read();if(!i)throw new Error("Sidecar medium not found");return e.createElement(i,r({},a))};i.isSideCarExport=!0;var l=function(e){void 0===e&&(e={});var n=function(e,n){void 0===n&&(n=a);var t=[],r=!1;return{read:function(){if(r)throw new Error("Sidecar: could not `read` from an `assigned` medium. `read` could be used only with `useMedium`.");return t.length?t[t.length-1]:e},useMedium:function(e){var o=n(e,r);return t.push(o),function(){t=t.filter((function(e){return e!==o}))}},assignSyncMedium:function(e){for(r=!0;t.length;){var n=t;t=[],n.forEach(e)}t={push:function(n){return e(n)},filter:function(){return t}}},assignMedium:function(e){r=!0;var n=[];if(t.length){var o=t;t=[],o.forEach(e),n=t}var a=function(){var t=n;n=[],t.forEach(e)},i=function(){return Promise.resolve().then(a)};i(),t={push:function(e){n.push(e),i()},filter:function(e){return n=n.filter(e),t}}}}}(null);return n.options=r({async:!0,ssr:!1},e),n}();function c(e,t){return r=t,o=function(n){return e.forEach((function(e){return function(e,n){return"function"==typeof e?e(n):e&&(e.current=n),e}(e,n)}))},(a=n((function(){return{value:r,callback:o,facade:{get current(){return a.value},set current(e){var n=a.value;n!==e&&(a.value=e,a.callback(e,n))}}}}))[0]).callback=o,a.facade;var r,o,a}var s=function(){},d=e.forwardRef((function(n,t){var a=e.useRef(null),i=e.useState({onScrollCapture:s,onWheelCapture:s,onTouchMoveCapture:s}),d=i[0],u=i[1],p=n.forwardProps,f=n.children,h=n.className,m=n.removeScrollBar,v=n.enabled,g=n.shards,b=n.sideCar,y=n.noIsolation,C=n.inert,w=n.allowPinchZoom,k=n.as,E=void 0===k?"div":k,x=o(n,["forwardProps","children","className","removeScrollBar","enabled","shards","sideCar","noIsolation","inert","allowPinchZoom","as"]),_=b,I=c([a,t]),M=r({},x,d);return e.createElement(e.Fragment,null,v&&e.createElement(_,{sideCar:l,removeScrollBar:m,shards:g,noIsolation:y,inert:C,setCallbacks:u,allowPinchZoom:!!w,lockRef:a}),p?e.cloneElement(e.Children.only(f),r({},M,{ref:I})):e.createElement(E,r({},M,{className:h,ref:I}),f))}));d.defaultProps={enabled:!0,removeScrollBar:!0,inert:!1},d.classNames={fullWidth:"width-before-scroll-bar",zeroRight:"right-scroll-bar-position"};function u(){if(!document)return null;var e=document.createElement("style");e.type="text/css";var n=function(){if("undefined"!=typeof __webpack_nonce__)return __webpack_nonce__}();return n&&e.setAttribute("nonce",n),e}var p=function(){var e=0,n=null;return{add:function(t){var r,o;0==e&&(n=u())&&(o=t,(r=n).styleSheet?r.styleSheet.cssText=o:r.appendChild(document.createTextNode(o)),function(e){(document.head||document.getElementsByTagName("head")[0]).appendChild(e)}(n)),e++},remove:function(){!--e&&n&&(n.parentNode&&n.parentNode.removeChild(n),n=null)}}},f=function(){var n,t=(n=p(),function(t){e.useEffect((function(){return n.add(t),function(){n.remove()}}),[])});return function(e){var n=e.styles;return t(n),null}},h={left:0,top:0,right:0,gap:0},m=function(e){return parseInt(e||"",10)||0},v=function(e){if(void 0===e&&(e="margin"),"undefined"==typeof window)return h;var n=function(e){var n=window.getComputedStyle(document.body),t=n["padding"===e?"paddingLeft":"marginLeft"],r=n["padding"===e?"paddingTop":"marginTop"],o=n["padding"===e?"paddingRight":"marginRight"];return[m(t),m(r),m(o)]}(e),t=document.documentElement.clientWidth,r=window.innerWidth;return{left:n[0],top:n[1],right:n[2],gap:Math.max(0,r-t+n[2]-n[0])}},g=f(),b=function(e,n,t,r){var o=e.left,a=e.top,i=e.right,l=e.gap;return void 0===t&&(t="margin"),"\n  .with-scroll-bars-hidden {\n   overflow: hidden "+r+";\n   padding-right: "+l+"px "+r+";\n  }\n  body {\n    overflow: hidden "+r+";\n    "+[n&&"position: relative "+r+";","margin"===t&&"\n    padding-left: "+o+"px;\n    padding-top: "+a+"px;\n    padding-right: "+i+"px;\n    margin-left:0;\n    margin-top:0;\n    margin-right: "+l+"px "+r+";\n    ","padding"===t&&"padding-right: "+l+"px "+r+";"].filter(Boolean).join("")+"\n  }\n  \n  .right-scroll-bar-position {\n    right: "+l+"px "+r+";\n  }\n  \n  .width-before-scroll-bar {\n    margin-right: "+l+"px "+r+";\n  }\n  \n  .right-scroll-bar-position .right-scroll-bar-position {\n    right: 0 "+r+";\n  }\n  \n  .width-before-scroll-bar .width-before-scroll-bar {\n    margin-right: 0 "+r+";\n  }\n  \n  body {\n    --removed-body-scroll-bar-size: "+l+"px;\n  }\n"},y=function(n){var t=e.useState(v(n.gapMode)),r=t[0],o=t[1];e.useEffect((function(){o(v(n.gapMode))}),[n.gapMode]);var a=n.noRelative,i=n.noImportant,l=n.gapMode,c=void 0===l?"margin":l;return e.createElement(g,{styles:b(r,!a,c,i?"":"!important")})},C=function(e,n){var t=n;do{if("undefined"!=typeof ShadowRoot&&t instanceof ShadowRoot&&(t=t.host),w(e,t)){var r=k(e,t);if(r[1]>r[2])return!0}t=t.parentNode}while(t&&t!==document.body);return!1},w=function(e,n){return"v"===e?function(e){var n=window.getComputedStyle(e);return"hidden"!==n.overflowY&&!(n.overflowY===n.overflowX&&"visible"===n.overflowY)}(n):function(e){var n=window.getComputedStyle(e);return"range"===e.type||"hidden"!==n.overflowX&&!(n.overflowY===n.overflowX&&"visible"===n.overflowX)}(n)},k=function(e,n){return"v"===e?[(t=n).scrollTop,t.scrollHeight,t.clientHeight]:function(e){return[e.scrollLeft,e.scrollWidth,e.clientWidth]}(n);var t},E=!1;if("undefined"!=typeof window)try{var x=Object.defineProperty({},"passive",{get:function(){return E=!0,!0}});window.addEventListener("test",x,x),window.removeEventListener("test",x,x)}catch(e){E=!1}var _=!!E&&{passive:!1},I=function(e){return"changedTouches"in e?[e.changedTouches[0].clientX,e.changedTouches[0].clientY]:[0,0]},M=function(e){return[e.deltaX,e.deltaY]},S=function(e){return e&&"current"in e?e.current:e},O=function(e){return"\n  .block-interactivity-"+e+" {pointer-events: none;}\n  .allow-interactivity-"+e+" {pointer-events: all;}\n"},P=0,N=[];var R,W=(R=function(n){var t=e.useRef([]),r=e.useRef([0,0]),o=e.useRef(),a=e.useState(P++)[0],i=e.useState((function(){return f()}))[0],l=e.useRef(n);e.useEffect((function(){l.current=n}),[n]),e.useEffect((function(){if(n.inert){document.body.classList.add("block-interactivity-"+a);var e=[n.lockRef.current].concat((n.shards||[]).map(S)).filter(Boolean);return e.forEach((function(e){return e.classList.add("allow-interactivity-"+a)})),function(){document.body.classList.remove("block-interactivity-"+a),e.forEach((function(e){return e.classList.remove("allow-interactivity-"+a)}))}}}),[n.inert,n.lockRef.current,n.shards]);var c=e.useCallback((function(e,n){if("touches"in e&&2===e.touches.length)return!l.current.allowPinchZoom;var t,a=I(e),i=r.current,c="deltaX"in e?e.deltaX:i[0]-a[0],s="deltaY"in e?e.deltaY:i[1]-a[1],d=e.target,u=Math.abs(c)>Math.abs(s)?"h":"v",p=C(u,d);if(!p)return!0;if(p?t=u:(t="v"===u?"h":"v",p=C(u,d)),!p)return!1;if(!o.current&&"changedTouches"in e&&(c||s)&&(o.current=t),!t)return!0;var f=o.current||t;return function(e,n,t,r,o){var a=function(e,n){return"h"===e&&"rtl"===n?-1:1}(e,window.getComputedStyle(n).direction),i=a*r,l=t.target,c=n.contains(l),s=!1,d=i>0,u=0,p=0;do{var f=k(e,l),h=f[0],m=f[1]-f[2]-a*h;(h||m)&&w(e,l)&&(u+=m,p+=h),l=l.parentNode}while(!c&&l!==document.body||c&&(n.contains(l)||n===l));return(d&&(o&&0===u||!o&&i>u)||!d&&(o&&0===p||!o&&-i>p))&&(s=!0),s}(f,n,e,"h"===f?c:s,!0)}),[]),s=e.useCallback((function(e){var n=e;if(N.length&&N[N.length-1]===i){var r="deltaY"in n?M(n):I(n),o=t.current.filter((function(e){return e.name===n.type&&e.target===n.target&&(t=e.delta,o=r,t[0]===o[0]&&t[1]===o[1]);var t,o}))[0];if(o&&o.should)n.preventDefault();else if(!o){var a=(l.current.shards||[]).map(S).filter(Boolean).filter((function(e){return e.contains(n.target)}));(a.length>0?c(n,a[0]):!l.current.noIsolation)&&n.preventDefault()}}}),[]),d=e.useCallback((function(e,n,r,o){var a={name:e,delta:n,target:r,should:o};t.current.push(a),setTimeout((function(){t.current=t.current.filter((function(e){return e!==a}))}),1)}),[]),u=e.useCallback((function(e){r.current=I(e),o.current=void 0}),[]),p=e.useCallback((function(e){d(e.type,M(e),e.target,c(e,n.lockRef.current))}),[]),h=e.useCallback((function(e){d(e.type,I(e),e.target,c(e,n.lockRef.current))}),[]);e.useEffect((function(){return N.push(i),n.setCallbacks({onScrollCapture:p,onWheelCapture:p,onTouchMoveCapture:h}),document.addEventListener("wheel",s,_),document.addEventListener("touchmove",s,_),document.addEventListener("touchstart",u,_),function(){N=N.filter((function(e){return e!==i})),document.removeEventListener("wheel",s,_),document.removeEventListener("touchmove",s,_),document.removeEventListener("touchstart",u,_)}}),[]);var m=n.removeScrollBar,v=n.inert;return e.createElement(e.Fragment,null,v?e.createElement(i,{styles:O(a)}):null,m?e.createElement(y,{gapMode:"margin"}):null)},l.useMedium(R),i),T=e.forwardRef((function(n,t){return e.createElement(d,r({},n,{ref:t,sideCar:W}))}));T.classNames=d.classNames;var L=T;function B(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===t&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}var D="hm_customButton";B(".hm_customButton {\n  height: 60px;\n  min-width: 200px;\n  font-size: 1.2em;\n  padding: 0 20px;\n  border: 0;\n  cursor: pointer;\n  text-transform: uppercase;\n  background-color: rgba(65, 70, 90, 0.5);\n  box-shadow: 0px 0px 5px 1px rgba(49, 52, 67, 0.4);\n  transition: all 0.2s ease; }\n  .hm_customButton:hover {\n    background-color: #41465a;\n    color: #e7e8ee;\n    box-shadow: 0px 0px 5px 1px rgba(49, 52, 67, 0.6); }\n");var z=function(n){var t=n.onClick;return e.createElement("button",{type:"button",className:D,onClick:t},"open modal")},j="hm_hyperCloseIcon";B('.hm_hyperCloseIcon {\n  display: block;\n  background-image: url("https://api.iconify.design/iwwa:close.svg");\n  background-repeat: no-repeat;\n  background-size: contain;\n  background-position: center;\n  width: 100%;\n  height: 100%; }\n');var F=function(){return e.createElement("i",{className:j})},Y="hm_hyperModalDefaultContent",X="hm_title",A="hm_description";B(".hm_hyperModalDefaultContent {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-around;\n  align-items: center;\n  color: #282c34;\n  overflow: auto; }\n  .hm_hyperModalDefaultContent .hm_title {\n    font-size: 30px;\n    color: #282c34; }\n  .hm_hyperModalDefaultContent .hm_description {\n    font-size: 24px; }\n  .hm_hyperModalDefaultContent button {\n    width: 200px;\n    height: 50px;\n    font-size: 18px;\n    font-weight: bold;\n    background-color: white;\n    color: #282c34;\n    border: 1px solid #282c34;\n    text-transform: uppercase;\n    transition: all 0.2s ease;\n    cursor: pointer; }\n    .hm_hyperModalDefaultContent button:hover {\n      background-color: #282c34;\n      color: white; }\n");var Z=function(n){var t=n.ariaEnabled,r=n.ariaProps,o=n.handleClose,a=t&&r?r["aria-labelledby"]:void 0,i=t&&r?r["aria-describedby"]:void 0;return e.createElement("div",{className:Y},e.createElement("div",{className:X,id:a},"Hyper modal"),e.createElement("div",{className:A,id:i},"Fully customizable and accessible modal"),e.createElement("button",{type:"button",onClick:o},"Close modal"))},H={ariaEnabled:!0,ariaProps:{"aria-describedby":"hyper-modal-description","aria-labelledby":"hyper-modal-title",role:"dialog"},disableScroll:!0,childrenMode:!0,closeDebounceTimeout:0,closeIconPosition:{vertical:"top",horizontal:"right"},closeOnCloseIconClick:!0,closeOnDimmerClick:!0,closeOnEscClick:!0,dimmerEnabled:!0,isFullscreen:!1,portalMode:!1,position:{alignItems:"center",justifyContent:"center"},stackable:!1,stackableIndex:0,stackContentSettings:{widthRatio:4,topOffsetRatio:2,transition:"all 0.3s ease",opacityRatio:.2}},q=function(e){var n=r({display:"flex"},H.position);return e?r(r({},n),e):n},G=function(e){return e?Object.keys(e).filter((function(n){return!!e[n]})).reduce((function(e,n){return e?"".concat(e).concat(n?" ".concat(n):""):"".concat(n)}),""):""},J=function(){for(var e=[],n=0;n<arguments.length;n++)e[n]=arguments[n];return e[0]&&"string"==typeof e[0]?e.join(" "):G(e[0])},K="hm_stackWrapper",Q="hm_hyperModalContentWrapper";B(".hm_stackWrapper {\n  position: relative;\n  width: 60%;\n  height: 60%;\n  display: flex;\n  justify-content: center; }\n\n.hm_hyperModalContentWrapper {\n  position: absolute;\n  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);\n  background-color: #ffffff;\n  width: 100%;\n  height: 100%;\n  z-index: 5;\n  border-radius: 10px;\n  overflow: auto; }\n  .hm_hyperModalContentWrapper.hm_fullscreen {\n    width: 100%;\n    height: 100%; }\n  .hm_hyperModalContentWrapper .hm_hyperCloseIconWrapper {\n    position: absolute;\n    display: block;\n    cursor: pointer;\n    width: 40px;\n    height: 40px;\n    top: 20px;\n    right: 20px;\n    transition: all 0.1s ease; }\n    .hm_hyperModalContentWrapper .hm_hyperCloseIconWrapper:hover {\n      transform: rotate(90deg); }\n");var U=function(n){var t=n.children,a=n.classes,i=n.closeIcon,l=n.getProps;n.handleClose;var c=n.isFullscreen,s=n.modalContentRef,d=n.stackableIndex,u=void 0===d?0:d,p=o(n,["children","classes","closeIcon","getProps","handleClose","isFullscreen","modalContentRef","stackableIndex"]);return e.createElement("div",r({},p,{className:K}),e.Children.toArray(t).slice(0,u+1).map((function(n,t,o){var d;return e.createElement("div",r({key:"content-".concat(t),"data-type":"hyper-modal-content"},l(t,n.props,o.length),{className:J((d={},d[Q]=!0,d.fullscreen=c||!1,d[a&&a.contentClassName||""]=!0,d)),ref:s}),n,i)})))},V="hm_hyperModalWrapper",$="hm_visible",ee="hm_hyperModalContentWrapper",ne="hm_hyperDimmerWrapper",te="hm_hyperCloseIconWrapper";B(".hm_hyperModalWrapper {\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  visibility: hidden;\n  opacity: 0;\n  transition: all 0.3s ease; }\n  .hm_hyperModalWrapper.hm_visible {\n    visibility: visible;\n    opacity: 1; }\n  .hm_hyperModalWrapper .hm_hyperModalContentWrapper {\n    position: relative;\n    background-color: #ffffff;\n    width: 60%;\n    height: 60%;\n    z-index: 5;\n    border-radius: 10px;\n    overflow: auto; }\n    .hm_hyperModalWrapper .hm_hyperModalContentWrapper.hm_fullscreen {\n      width: 100%;\n      height: 100%; }\n\n.hm_hyperDimmerWrapper {\n  background-color: rgba(0, 0, 0, 0.5);\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  z-index: 1; }\n\n.hm_hyperCloseIconWrapper {\n  position: absolute;\n  display: block;\n  cursor: pointer;\n  width: 40px;\n  height: 40px;\n  top: 20px;\n  right: 20px;\n  transition: all 0.1s ease; }\n  .hm_hyperCloseIconWrapper:hover {\n    transform: rotate(90deg); }\n\n.hm_body-noscroll {\n  overflow: hidden; }\n");var re=function(n){var t=n.classes,r=n.renderCloseIconProp,o=n.closeOnCloseIconClick,a=n.closeIconPosition,i=n.close,l=a?J(te,a.horizontal,a.vertical):te;return e.createElement("div",{"data-name":"close-icon",className:J(l,t&&t.closeIconClassName),onClick:o?i:void 0},r?r():e.createElement(F,null))},oe=function(n){var o=n.afterClose,a=n.ariaEnabled,i=void 0===a?H.ariaEnabled:a,l=n.ariaProps,c=void 0===l?H.ariaProps:l,s=n.beforeClose,d=n.children,u=n.childrenMode,p=void 0===u?H.childrenMode:u,f=n.classes,h=n.closeDebounceTimeout,m=void 0===h?H.closeDebounceTimeout:h,v=n.closeIconPosition,g=void 0===v?H.closeIconPosition:v,b=n.closeOnCloseIconClick,y=void 0===b?H.closeOnCloseIconClick:b,C=n.closeOnDimmerClick,w=void 0===C?H.closeOnDimmerClick:C,k=n.closeOnEscClick,E=void 0===k?H.closeOnEscClick:k,x=n.dimmerEnabled,_=void 0===x?H.dimmerEnabled:x,I=n.disableScroll,M=void 0===I?H.disableScroll:I,S=n.isFullscreen,O=void 0===S?H.isFullscreen:S,P=n.isOpen,N=n.modalContentRef,R=n.modalWrapperRef,W=n.portalMode,T=void 0===W?H.portalMode:W,B=n.portalNode,D=n.position,j=void 0===D?H.position:D,F=n.renderCloseIcon,Y=n.renderContent,X=n.renderOpenButton,A=n.requestClose,G=n.stackable,K=void 0===G?H.stackable:G,Q=n.stackableIndex,U=void 0===Q?H.stackableIndex:Q,te=n.stackContentSettings,oe=void 0===te?H.stackContentSettings:te,ae=n.unmountOnClose,ie=e.useState(P||!1),le=ie[0],ce=ie[1];e.useEffect((function(){void 0!==P&&ce(P)}),[P]);var se=e.useCallback((function(){ce(!0)}),[]),de=e.useCallback((function(){ce(!1)}),[]),ue=e.useCallback((function(){o&&o()}),[o]),pe=e.useCallback((function(){return s&&s(),m?(e=function(){de(),A&&A(),ue()},void 0===(n=m)&&(n=500),void 0===t&&(t={}),new Promise((function(r){setTimeout((function(){e(t),r(null)}),n)}))):(de(),A&&A(),ue(),!0);var e,n,t}),[s,m,de,ue,A]),fe=e.useCallback((function(e){E&&27===e.keyCode&&le&&(e.stopPropagation(),pe())}),[E,pe,le]);e.useEffect((function(){return document.addEventListener("keydown",fe),function(){document.removeEventListener("keydown",fe)}}),[fe]);var he=e.useCallback((function(){var n,t=null;return p?t=d:Y&&(t=Y()),e.createElement("div",{className:J((n={},n[ee]=!0,n.fullscreen=O||!1,n[f&&f.contentClassName||""]=!0,n)),ref:N},t||e.createElement(Z,{ariaProps:c,ariaEnabled:i,handleClose:pe}),re({classes:f,closeOnCloseIconClick:y,closeIconPosition:g,close:pe,renderCloseIconProp:F}))}),[i,c,d,p,f,g,y,pe,O,N,F,Y]),me=e.useCallback((function(e,n,t){var o=oe.widthRatio,a=void 0===o?H.stackContentSettings.widthRatio:o,i=oe.topOffsetRatio,l=void 0===i?H.stackContentSettings.topOffsetRatio:i,c=oe.transition,s=void 0===c?H.stackContentSettings.transition:c,d=oe.opacityRatio,u=void 0===d?H.stackContentSettings.opacityRatio:d;return r(r({},n),{style:{transition:s,width:"".concat(100-(t-e-1)*a,"%"),top:"".concat(0-(t-e-1)*l,"%"),opacity:1-(t-e-1)*u,zIndex:1e3-10*(t-e-1)}})}),[oe]),ve=e.useCallback((function(){if(d){var e=re({classes:f,closeOnCloseIconClick:y,closeIconPosition:g,close:pe,renderCloseIconProp:F});return d({classes:f,closeIcon:e,getProps:me,handleClose:pe,isFullscreen:O,modalContentRef:N,stackableIndex:U})}return null}),[d,f,g,y,me,pe,O,N,F,U]),ge=e.useCallback((function(){var n;return e.createElement(L,{forwardProps:!0,enabled:M&&le},e.createElement("div",{id:"hyper-modal-wrapper_component_id",className:J((n={},n[V]=!0,n[$]=le,n[f&&f.wrapperClassName||""]=!0,n)),ref:R,style:q(j)},_&&function(n){var t=n.classes,r=n.closeOnDimmerClick,o=n.close;return e.createElement("div",{className:J(ne,t&&t.dimmerClassName),onClick:r?o:void 0})}({classes:f,closeOnDimmerClick:w,close:pe}),K?ve():he()))}),[M,f,w,_,pe,le,R,j,he,ve,K]),be=e.useCallback((function(){if(!le&&ae)return null;if(T&&t){var e=B||(n=f&&f.portalWrapperClassName,(r=document.getElementById("hyper-modal-portal-id"))||((r=document.createElement("div")).setAttribute("id","hyper-modal-portal-id"),document.body.appendChild(r)),n&&!r.classList.contains(n)&&r.classList.add(n),r);return t(ge(),e)}var n,r;return ge()}),[f,le,T,B,ge,ae]);return e.createElement(e.Fragment,null,function(n){var t=n.renderOpenButton,r=n.open;return t?"boolean"==typeof t?e.createElement(z,{onClick:r}):t(r):null}({renderOpenButton:X,open:se}),be())};export{U as ModalStack,oe as default};
//# sourceMappingURL=index.es.js.map