react-hyper-modal/dist/index.js

Fully customizable and accessible modal react component

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),n=require("react-dom");function t(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,r.get?r:{enumerable:!0,get:function(){return e[t]}})}})),n.default=e,Object.freeze(n)}var r=t(e),o=function(){return o=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},o.apply(this,arguments)};
/*! *****************************************************************************
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 a(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 i(e){return e}var l=function(e){var n=e.sideCar,t=a(e,["sideCar"]);if(!n)throw new Error("Sidecar: please provide `sideCar` property to import the right car");var i=n.read();if(!i)throw new Error("Sidecar medium not found");return r.createElement(i,o({},t))};l.isSideCarExport=!0;var c=function(e){void 0===e&&(e={});var n=function(e,n){void 0===n&&(n=i);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=o({async:!0,ssr:!1},e),n}();function s(n,t){return r=t,o=function(e){return n.forEach((function(n){return function(e,n){return"function"==typeof e?e(n):e&&(e.current=n),e}(n,e)}))},(a=e.useState((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 u=function(){},d=r.forwardRef((function(e,n){var t=r.useRef(null),i=r.useState({onScrollCapture:u,onWheelCapture:u,onTouchMoveCapture:u}),l=i[0],d=i[1],p=e.forwardProps,f=e.children,h=e.className,m=e.removeScrollBar,v=e.enabled,b=e.shards,g=e.sideCar,y=e.noIsolation,C=e.inert,w=e.allowPinchZoom,k=e.as,E=void 0===k?"div":k,x=a(e,["forwardProps","children","className","removeScrollBar","enabled","shards","sideCar","noIsolation","inert","allowPinchZoom","as"]),_=g,I=s([t,n]),M=o({},x,l);return r.createElement(r.Fragment,null,v&&r.createElement(_,{sideCar:c,removeScrollBar:m,shards:b,noIsolation:y,inert:C,setCallbacks:d,allowPinchZoom:!!w,lockRef:t}),p?r.cloneElement(r.Children.only(f),o({},M,{ref:I})):r.createElement(E,o({},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 p(){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 f=function(){var e=0,n=null;return{add:function(t){var r,o;0==e&&(n=p())&&(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)}}},h=function(){var e,n=(e=f(),function(n){r.useEffect((function(){return e.add(n),function(){e.remove()}}),[])});return function(e){var t=e.styles;return n(t),null}},m={left:0,top:0,right:0,gap:0},v=function(e){return parseInt(e||"",10)||0},b=function(e){if(void 0===e&&(e="margin"),"undefined"==typeof window)return m;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[v(t),v(r),v(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=h(),y=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"},C=function(e){var n=r.useState(b(e.gapMode)),t=n[0],o=n[1];r.useEffect((function(){o(b(e.gapMode))}),[e.gapMode]);var a=e.noRelative,i=e.noImportant,l=e.gapMode,c=void 0===l?"margin":l;return r.createElement(g,{styles:y(t,!a,c,i?"":"!important")})},w=function(e,n){var t=n;do{if("undefined"!=typeof ShadowRoot&&t instanceof ShadowRoot&&(t=t.host),k(e,t)){var r=E(e,t);if(r[1]>r[2])return!0}t=t.parentNode}while(t&&t!==document.body);return!1},k=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)},E=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},x=!1;if("undefined"!=typeof window)try{var _=Object.defineProperty({},"passive",{get:function(){return x=!0,!0}});window.addEventListener("test",_,_),window.removeEventListener("test",_,_)}catch(e){x=!1}var I=!!x&&{passive:!1},M=function(e){return"changedTouches"in e?[e.changedTouches[0].clientX,e.changedTouches[0].clientY]:[0,0]},O=function(e){return[e.deltaX,e.deltaY]},S=function(e){return e&&"current"in e?e.current:e},P=function(e){return"\n  .block-interactivity-"+e+" {pointer-events: none;}\n  .allow-interactivity-"+e+" {pointer-events: all;}\n"},N=0,R=[];var W,T=(W=function(e){var n=r.useRef([]),t=r.useRef([0,0]),o=r.useRef(),a=r.useState(N++)[0],i=r.useState((function(){return h()}))[0],l=r.useRef(e);r.useEffect((function(){l.current=e}),[e]),r.useEffect((function(){if(e.inert){document.body.classList.add("block-interactivity-"+a);var n=[e.lockRef.current].concat((e.shards||[]).map(S)).filter(Boolean);return n.forEach((function(e){return e.classList.add("allow-interactivity-"+a)})),function(){document.body.classList.remove("block-interactivity-"+a),n.forEach((function(e){return e.classList.remove("allow-interactivity-"+a)}))}}}),[e.inert,e.lockRef.current,e.shards]);var c=r.useCallback((function(e,n){if("touches"in e&&2===e.touches.length)return!l.current.allowPinchZoom;var r,a=M(e),i=t.current,c="deltaX"in e?e.deltaX:i[0]-a[0],s="deltaY"in e?e.deltaY:i[1]-a[1],u=e.target,d=Math.abs(c)>Math.abs(s)?"h":"v",p=w(d,u);if(!p)return!0;if(p?r=d:(r="v"===d?"h":"v",p=w(d,u)),!p)return!1;if(!o.current&&"changedTouches"in e&&(c||s)&&(o.current=r),!r)return!0;var f=o.current||r;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,u=i>0,d=0,p=0;do{var f=E(e,l),h=f[0],m=f[1]-f[2]-a*h;(h||m)&&k(e,l)&&(d+=m,p+=h),l=l.parentNode}while(!c&&l!==document.body||c&&(n.contains(l)||n===l));return(u&&(o&&0===d||!o&&i>d)||!u&&(o&&0===p||!o&&-i>p))&&(s=!0),s}(f,n,e,"h"===f?c:s,!0)}),[]),s=r.useCallback((function(e){var t=e;if(R.length&&R[R.length-1]===i){var r="deltaY"in t?O(t):M(t),o=n.current.filter((function(e){return e.name===t.type&&e.target===t.target&&(n=e.delta,o=r,n[0]===o[0]&&n[1]===o[1]);var n,o}))[0];if(o&&o.should)t.preventDefault();else if(!o){var a=(l.current.shards||[]).map(S).filter(Boolean).filter((function(e){return e.contains(t.target)}));(a.length>0?c(t,a[0]):!l.current.noIsolation)&&t.preventDefault()}}}),[]),u=r.useCallback((function(e,t,r,o){var a={name:e,delta:t,target:r,should:o};n.current.push(a),setTimeout((function(){n.current=n.current.filter((function(e){return e!==a}))}),1)}),[]),d=r.useCallback((function(e){t.current=M(e),o.current=void 0}),[]),p=r.useCallback((function(n){u(n.type,O(n),n.target,c(n,e.lockRef.current))}),[]),f=r.useCallback((function(n){u(n.type,M(n),n.target,c(n,e.lockRef.current))}),[]);r.useEffect((function(){return R.push(i),e.setCallbacks({onScrollCapture:p,onWheelCapture:p,onTouchMoveCapture:f}),document.addEventListener("wheel",s,I),document.addEventListener("touchmove",s,I),document.addEventListener("touchstart",d,I),function(){R=R.filter((function(e){return e!==i})),document.removeEventListener("wheel",s,I),document.removeEventListener("touchmove",s,I),document.removeEventListener("touchstart",d,I)}}),[]);var m=e.removeScrollBar,v=e.inert;return r.createElement(r.Fragment,null,v?r.createElement(i,{styles:P(a)}):null,m?r.createElement(C,{gapMode:"margin"}):null)},c.useMedium(W),l),j=r.forwardRef((function(e,n){return r.createElement(d,o({},e,{ref:n,sideCar:T}))}));j.classNames=d.classNames;var D=j;function L(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 B="hm_customButton";L(".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(e){var n=e.onClick;return r.createElement("button",{type:"button",className:B,onClick:n},"open modal")},F="hm_hyperCloseIcon";L('.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 Y=function(){return r.createElement("i",{className:F})},X="hm_hyperModalDefaultContent",A="hm_title",Z="hm_description";L(".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 q=function(e){var n=e.ariaEnabled,t=e.ariaProps,o=e.handleClose,a=n&&t?t["aria-labelledby"]:void 0,i=n&&t?t["aria-describedby"]:void 0;return r.createElement("div",{className:X},r.createElement("div",{className:A,id:a},"Hyper modal"),r.createElement("div",{className:Z,id:i},"Fully customizable and accessible modal"),r.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}},G=function(e){var n=o({display:"flex"},H.position);return e?o(o({},n),e):n},J=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)}),""):""},K=function(){for(var e=[],n=0;n<arguments.length;n++)e[n]=arguments[n];return e[0]&&"string"==typeof e[0]?e.join(" "):J(e[0])},Q="hm_stackWrapper",U="hm_hyperModalContentWrapper";L(".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 V="hm_hyperModalWrapper",$="hm_visible",ee="hm_hyperModalContentWrapper",ne="hm_hyperDimmerWrapper",te="hm_hyperCloseIconWrapper";L(".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(e){var n=e.classes,t=e.renderCloseIconProp,o=e.closeOnCloseIconClick,a=e.closeIconPosition,i=e.close,l=a?K(te,a.horizontal,a.vertical):te;return r.createElement("div",{"data-name":"close-icon",className:K(l,n&&n.closeIconClassName),onClick:o?i:void 0},t?t():r.createElement(Y,null))};exports.ModalStack=function(e){var n=e.children,t=e.classes,i=e.closeIcon,l=e.getProps;e.handleClose;var c=e.isFullscreen,s=e.modalContentRef,u=e.stackableIndex,d=void 0===u?0:u,p=a(e,["children","classes","closeIcon","getProps","handleClose","isFullscreen","modalContentRef","stackableIndex"]);return r.createElement("div",o({},p,{className:Q}),r.Children.toArray(n).slice(0,d+1).map((function(e,n,a){var u;return r.createElement("div",o({key:"content-".concat(n),"data-type":"hyper-modal-content"},l(n,e.props,a.length),{className:K((u={},u[U]=!0,u.fullscreen=c||!1,u[t&&t.contentClassName||""]=!0,u)),ref:s}),e,i)})))},exports.default=function(e){var t=e.afterClose,a=e.ariaEnabled,i=void 0===a?H.ariaEnabled:a,l=e.ariaProps,c=void 0===l?H.ariaProps:l,s=e.beforeClose,u=e.children,d=e.childrenMode,p=void 0===d?H.childrenMode:d,f=e.classes,h=e.closeDebounceTimeout,m=void 0===h?H.closeDebounceTimeout:h,v=e.closeIconPosition,b=void 0===v?H.closeIconPosition:v,g=e.closeOnCloseIconClick,y=void 0===g?H.closeOnCloseIconClick:g,C=e.closeOnDimmerClick,w=void 0===C?H.closeOnDimmerClick:C,k=e.closeOnEscClick,E=void 0===k?H.closeOnEscClick:k,x=e.dimmerEnabled,_=void 0===x?H.dimmerEnabled:x,I=e.disableScroll,M=void 0===I?H.disableScroll:I,O=e.isFullscreen,S=void 0===O?H.isFullscreen:O,P=e.isOpen,N=e.modalContentRef,R=e.modalWrapperRef,W=e.portalMode,T=void 0===W?H.portalMode:W,j=e.portalNode,L=e.position,B=void 0===L?H.position:L,F=e.renderCloseIcon,Y=e.renderContent,X=e.renderOpenButton,A=e.requestClose,Z=e.stackable,J=void 0===Z?H.stackable:Z,Q=e.stackableIndex,U=void 0===Q?H.stackableIndex:Q,te=e.stackContentSettings,oe=void 0===te?H.stackContentSettings:te,ae=e.unmountOnClose,ie=r.useState(P||!1),le=ie[0],ce=ie[1];r.useEffect((function(){void 0!==P&&ce(P)}),[P]);var se=r.useCallback((function(){ce(!0)}),[]),ue=r.useCallback((function(){ce(!1)}),[]),de=r.useCallback((function(){t&&t()}),[t]),pe=r.useCallback((function(){return s&&s(),m?(e=function(){ue(),A&&A(),de()},void 0===(n=m)&&(n=500),void 0===t&&(t={}),new Promise((function(r){setTimeout((function(){e(t),r(null)}),n)}))):(ue(),A&&A(),de(),!0);var e,n,t}),[s,m,ue,de,A]),fe=r.useCallback((function(e){E&&27===e.keyCode&&le&&(e.stopPropagation(),pe())}),[E,pe,le]);r.useEffect((function(){return document.addEventListener("keydown",fe),function(){document.removeEventListener("keydown",fe)}}),[fe]);var he=r.useCallback((function(){var e,n=null;return p?n=u:Y&&(n=Y()),r.createElement("div",{className:K((e={},e[ee]=!0,e.fullscreen=S||!1,e[f&&f.contentClassName||""]=!0,e)),ref:N},n||r.createElement(q,{ariaProps:c,ariaEnabled:i,handleClose:pe}),re({classes:f,closeOnCloseIconClick:y,closeIconPosition:b,close:pe,renderCloseIconProp:F}))}),[i,c,u,p,f,b,y,pe,S,N,F,Y]),me=r.useCallback((function(e,n,t){var r=oe.widthRatio,a=void 0===r?H.stackContentSettings.widthRatio:r,i=oe.topOffsetRatio,l=void 0===i?H.stackContentSettings.topOffsetRatio:i,c=oe.transition,s=void 0===c?H.stackContentSettings.transition:c,u=oe.opacityRatio,d=void 0===u?H.stackContentSettings.opacityRatio:u;return o(o({},n),{style:{transition:s,width:"".concat(100-(t-e-1)*a,"%"),top:"".concat(0-(t-e-1)*l,"%"),opacity:1-(t-e-1)*d,zIndex:1e3-10*(t-e-1)}})}),[oe]),ve=r.useCallback((function(){if(u){var e=re({classes:f,closeOnCloseIconClick:y,closeIconPosition:b,close:pe,renderCloseIconProp:F});return u({classes:f,closeIcon:e,getProps:me,handleClose:pe,isFullscreen:S,modalContentRef:N,stackableIndex:U})}return null}),[u,f,b,y,me,pe,S,N,F,U]),be=r.useCallback((function(){var e;return r.createElement(D,{forwardProps:!0,enabled:M&&le},r.createElement("div",{id:"hyper-modal-wrapper_component_id",className:K((e={},e[V]=!0,e[$]=le,e[f&&f.wrapperClassName||""]=!0,e)),ref:R,style:G(B)},_&&function(e){var n=e.classes,t=e.closeOnDimmerClick,o=e.close;return r.createElement("div",{className:K(ne,n&&n.dimmerClassName),onClick:t?o:void 0})}({classes:f,closeOnDimmerClick:w,close:pe}),J?ve():he()))}),[M,f,w,_,pe,le,R,B,he,ve,J]),ge=r.useCallback((function(){if(!le&&ae)return null;if(T&&n.createPortal){var e=j||(t=f&&f.portalWrapperClassName,(r=document.getElementById("hyper-modal-portal-id"))||((r=document.createElement("div")).setAttribute("id","hyper-modal-portal-id"),document.body.appendChild(r)),t&&!r.classList.contains(t)&&r.classList.add(t),r);return n.createPortal(be(),e)}var t,r;return be()}),[f,le,T,j,be,ae]);return r.createElement(r.Fragment,null,function(e){var n=e.renderOpenButton,t=e.open;return n?"boolean"==typeof n?r.createElement(z,{onClick:t}):n(t):null}({renderOpenButton:X,open:se}),ge())};
//# sourceMappingURL=index.js.map