react-a-gate/dist/index.js

function t(t){if(t&&"undefined"!=typeof window){var r=document.createElement("style");return r.setAttribute("type","text/css"),r.innerHTML=t,document.head.appendChild(r),t}}Object.defineProperty(exports,"__esModule",{value:!0});var r=require("react"),e=require("react-dom");function o(t){if(t&&t.__esModule)return t;var r=Object.create(null);return t&&Object.keys(t).forEach((function(e){if("default"!==e){var o=Object.getOwnPropertyDescriptor(t,e);Object.defineProperty(r,e,o.get?o:{enumerable:!0,get:function(){return t[e]}})}})),r.default=t,Object.freeze(r)}var n=o(r),a=function(t){var e=r.useRef(null);r.useEffect((function(){var r,o=document.querySelector("#"+t),n=o||function(t){var r=document.createElement("div");return r.setAttribute("id",t),r}(t);return o||(r=n,document.body.lastElementChild&&document.body.insertBefore(r,document.body.lastElementChild.nextElementSibling)),e.current&&n.appendChild(e.current),function(){e.current&&e.current.remove(),-1===n.childNodes.length&&n.remove()}}),[t]);return e.current||(e.current=document.createElement("div")),e.current};t(".modal__backdrop {\n  position: fixed;\n  width: 100%;\n  height: 100%;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  display: -webkit-flex;\n  display: flex;\n  -webkit-align-items: center;\n          align-items: center;\n  -webkit-justify-content: center;\n          justify-content: center;\n  background: rgba(0, 0, 0, 0.3);\n  opacity: 0;\n  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.modal__backdrop .modal__content {\n  position: relative;\n  opacity: 0;\n  width: 100%;\n  max-width: 30rem;\n  max-height: 80%;\n  padding: 16px;\n  background-color: #fff;\n  border: 1px solid #d1d5da;\n  border-radius: 3px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  -webkit-transform: translateY(100px);\n          transform: translateY(100px);\n  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.modal__backdrop--active {\n  transition-duration: 250ms;\n  opacity: 1;\n}\n.modal__backdrop--active .modal__content {\n  opacity: 1;\n  -webkit-transform: translateY(0);\n          transform: translateY(0);\n  transition-delay: 100ms;\n  transition-duration: 350ms;\n}");var i=function(){return(i=Object.assign||function(t){for(var r,e=1,o=arguments.length;e<o;e++)for(var n in r=arguments[e])Object.prototype.hasOwnProperty.call(r,n)&&(t[n]=r[n]);return t}).apply(this,arguments)},l=function(t,e){var o=r.useRef(null);r.useLayoutEffect((function(){return o.current=new ResizeObserver((function(){e&&e()})),o.current.observe(t),function(){o.current&&o.current.disconnect()}}),[e,t])},p=function(t){var r=t.triggerRef,e=t.portalRef,o=t.arrowRef,n=t.place,a=t.offset,i=0,l=0,p=0,d=0,c=n;if(!(null==e?void 0:e.current)||!(null==r?void 0:r.current)||!(null==o?void 0:o.current))return{top:i,left:l,arrowTop:p,arrowLeft:d,place:c};var s=document.documentElement.clientWidth,u=document.documentElement.clientHeight,f=r.current.getBoundingClientRect(),m=e.current.getBoundingClientRect(),b=o.current.getBoundingClientRect(),_=f.x+f.width,h=f.x,w=f.y,g=f.y+f.height,x=window.scrollX,v=window.scrollY;if(Number.isNaN(_)||Number.isNaN(h)||Number.isNaN(w)||Number.isNaN(g))return{top:i,left:l,arrowTop:p,arrowLeft:d,place:c};var k=_+m.width+a+x<=x+s,y=h-m.width>=0,E=w-m.height>=0,N=g+m.height+a+v<=v+u;switch(n){case"top":E?p=(i=w-m.height-a+v)+m.height:(p=(i=g+a+v)-b.height,c="bottom"),l=h+x+(f.width-m.width)/2,d=h+x+(f.width-b.width)/2,l+m.width>s+x?l=_-m.width+x:l<0&&(l=h+x);break;case"bottom":N?p=(i=g+a+v)-b.height:(p=(i=w-m.height-a+v)+m.height,c="top"),l=h+x+(f.width-m.width)/2,d=h+x+(f.width-b.width)/2,l+m.width>s+x?l=_-m.width+x:l<0&&(l=h+x);break;case"left":y?d=(l=h-m.width-a+x)+m.width:(d=(l=_+a+x)-b.width,c="right"),i=w+v+(f.height-m.height)/2,p=w+v+(f.height-b.height)/2,i+m.height>u+v?i=g-m.height+v:i<0&&(i=w+v);break;case"right":k?d=(l=_+a+x)-b.width:(d=(l=h-m.width-a+x)+m.width,c="left"),i=w+v+(f.height-m.height)/2,p=w+v+(f.height-b.height)/2,i+m.height>u+v?i=g-m.height+v:i<0&&(i=w+v)}return{top:i,left:l,arrowTop:p,arrowLeft:d,place:c}};
/*! *****************************************************************************
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.
***************************************************************************** */t(".tooltip__container {\n  position: absolute;\n  display: inline-block;\n}\n.tooltip__container--top {\n  margin-top: -5px;\n}\n.tooltip__container--bottom {\n  margin-top: 5px;\n}\n.tooltip__container--left {\n  margin-left: -5px;\n}\n.tooltip__container--right {\n  margin-left: 5px;\n}\n.tooltip__arrow {\n  position: absolute;\n  width: 0;\n  height: 0;\n  border-style: solid;\n  z-index: 3;\n}\n.tooltip__arrow--top {\n  margin-top: -6px;\n  border-width: 5px 5px 0;\n  border-bottom-color: transparent !important;\n  border-left-color: transparent !important;\n  border-right-color: transparent !important;\n}\n.tooltip__arrow--bottom {\n  margin-top: 6px;\n  border-width: 0 5px 5px;\n  border-top-color: transparent !important;\n  border-left-color: transparent !important;\n  border-right-color: transparent !important;\n}\n.tooltip__arrow--left {\n  margin-left: -6px;\n  border-width: 5px 0 5px 5px;\n  border-top-color: transparent !important;\n  border-bottom-color: transparent !important;\n  border-right-color: transparent !important;\n}\n.tooltip__arrow--right {\n  margin-left: 6px;\n  border-width: 5px 5px 5px 0;\n  border-top-color: transparent !important;\n  border-bottom-color: transparent !important;\n  border-left-color: transparent !important;\n}\n.tooltip__arrow-border {\n  z-index: 2;\n}\n.tooltip__arrow-border.tooltip__arrow--top {\n  margin-left: -1px;\n  border-width: 6px 6px 0;\n}\n.tooltip__arrow-border.tooltip__arrow--bottom {\n  margin-top: 5px;\n  margin-left: -1px;\n  border-width: 0 6px 6px;\n}\n.tooltip__arrow-border.tooltip__arrow--left {\n  margin-top: -1px;\n  border-width: 6px 0 6px 6px;\n}\n.tooltip__arrow-border.tooltip__arrow--right {\n  margin-left: 5px;\n  margin-top: -1px;\n  border-width: 6px 6px 6px 0;\n}\n.tooltip__inner {\n  width: -webkit-max-content;\n  width: max-content;\n  max-width: 200px;\n  padding: 0.3rem 0.5rem;\n  font-size: 0.8em;\n  text-align: center;\n  border-radius: 0.25rem;\n}\n\n.dark .tooltip__inner {\n  background-color: #222;\n  border: 1px solid #666;\n  color: #fff;\n  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);\n}\n.dark .tooltip__arrow {\n  border-color: #222;\n}\n.dark .tooltip__arrow-border {\n  border-color: #666;\n}\n\n.light .tooltip__inner {\n  background-color: #fff;\n  border: 1px solid #e1e4e8;\n  color: #333;\n  box-shadow: 0 8px 24px rgba(149, 157, 165, 0.2);\n}\n.light .tooltip__arrow {\n  border-color: #fff;\n}\n.light .tooltip__arrow-border {\n  border-color: rgba(27, 31, 35, 0.13);\n}");t(".popover__container {\n  position: absolute;\n  display: inline-block;\n}\n.popover__container--top {\n  margin-top: -5px;\n}\n.popover__container--bottom {\n  margin-top: 5px;\n}\n.popover__container--left {\n  margin-left: -5px;\n}\n.popover__container--right {\n  margin-left: 5px;\n}\n.popover__arrow {\n  position: absolute;\n  width: 0;\n  height: 0;\n  border-style: solid;\n  z-index: 3;\n}\n.popover__arrow--top {\n  margin-top: -6px;\n  border-width: 5px 5px 0;\n  border-bottom-color: transparent !important;\n  border-left-color: transparent !important;\n  border-right-color: transparent !important;\n}\n.popover__arrow--bottom {\n  margin-top: 6px;\n  border-width: 0 5px 5px;\n  border-top-color: transparent !important;\n  border-left-color: transparent !important;\n  border-right-color: transparent !important;\n}\n.popover__arrow--left {\n  margin-left: -6px;\n  border-width: 5px 0 5px 5px;\n  border-top-color: transparent !important;\n  border-bottom-color: transparent !important;\n  border-right-color: transparent !important;\n}\n.popover__arrow--right {\n  margin-left: 6px;\n  border-width: 5px 5px 5px 0;\n  border-top-color: transparent !important;\n  border-bottom-color: transparent !important;\n  border-left-color: transparent !important;\n}\n.popover__arrow-border {\n  z-index: 2;\n}\n.popover__arrow-border.popover__arrow--top {\n  margin-left: -1px;\n  border-width: 6px 6px 0;\n}\n.popover__arrow-border.popover__arrow--bottom {\n  margin-top: 5px;\n  margin-left: -1px;\n  border-width: 0 6px 6px;\n}\n.popover__arrow-border.popover__arrow--left {\n  margin-top: -1px;\n  border-width: 6px 0 6px 6px;\n}\n.popover__arrow-border.popover__arrow--right {\n  margin-left: 5px;\n  margin-top: -1px;\n  border-width: 6px 6px 6px 0;\n}\n.popover__inner {\n  width: -webkit-max-content;\n  width: max-content;\n  max-width: 200px;\n  padding: 0.3rem 0.5rem;\n  font-size: 0.8em;\n  text-align: center;\n  border-radius: 0.25rem;\n}\n\n.dark .popover__inner {\n  background-color: #222;\n  border: 1px solid #666;\n  color: #fff;\n  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);\n}\n.dark .popover__arrow {\n  border-color: #222;\n}\n.dark .popover__arrow-border {\n  border-color: #666;\n}\n\n.light .popover__inner {\n  background-color: #fff;\n  border: 1px solid #e1e4e8;\n  color: #333;\n  box-shadow: 0 8px 24px rgba(149, 157, 165, 0.2);\n}\n.light .popover__arrow {\n  border-color: #fff;\n}\n.light .popover__arrow-border {\n  border-color: rgba(27, 31, 35, 0.13);\n}");exports.ModalGate=function(t){var o,i,l=t.id,p=t.isOpen,d=t.rootId,c=void 0===d?"portal-root":d,s=t.className,u=t.closeWhenClickOutside,f=void 0===u||u,m=t.onClose,b=t.children,_=r.useState(!1),h=_[0],w=_[1],g=r.useRef(null),x=a(c);o=m,i=r.useCallback((function(t){"Escape"===t.key&&o&&o()}),[o]),r.useEffect((function(){return window.addEventListener("keydown",i),function(){window.removeEventListener("keydown",i)}}),[i]),function(t,e){void 0===t&&(t=!1),void 0===e&&(e=document.body);var o=r.useRef("");r.useLayoutEffect((function(){t&&!o.current?(o.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"):!t&&o.current&&(e.style.overflow=o.current,o.current="")}),[t,e])}(h),r.useEffect((function(){p&&w(!0)}),[p]);var v=r.useCallback((function(t){f&&t.target===g.current&&m&&m()}),[f,m]),k=r.useCallback((function(){p||w(!1)}),[p]);return p||h?e.createPortal(n.createElement("div",{id:l,ref:g,"data-testid":"modal_backdrop",className:"modal__backdrop"+(p&&h?" modal__backdrop--active":"")+" "+(s||""),role:"dialog","aria-labelledby":"modal_gate_"+l,"aria-modal":"true",onClick:v,onTransitionEnd:k},n.createElement("div",{className:"modal__content"},b)),x):null},exports.PopoverGate=function(t){var o=t.rootId,d=void 0===o?"portal-root":o,c=t.className,s=t.content,u=t.place,f=void 0===u?"top":u,m=t.mode,b=void 0===m?"click":m,_=t.closeWhenClickOutside,h=void 0===_||_,w=t.theme,g=void 0===w?"dark":w,x=t.offset,v=void 0===x?10:x,k=t.children,y=r.useState(!1),E=y[0],N=y[1],R=r.useState({top:-99999,left:-99999}),C=R[0],L=R[1],O=r.useState({top:-99999,left:-99999}),S=O[0],j=O[1],z=r.useState(f),M=z[0],P=z[1],T=r.useRef(null),Y=r.useRef(null),B=r.useRef(null),q=a(d),G=r.useCallback((function(t){var r;h&&B.current!==t.target&&!(null===(r=T.current)||void 0===r?void 0:r.contains(t.target))&&N(!1)}),[h]),I=r.useCallback((function(){if(B.current){var t=p({triggerRef:B,portalRef:T,arrowRef:Y,place:f,offset:v}),r=t.top,e=t.left,o=t.arrowTop,n=t.arrowLeft,a=t.place;L({top:r,left:e}),j({top:o,left:n}),P(a)}}),[f,v]);l(document.body,I),r.useLayoutEffect((function(){T.current&&I()}),[E,I]),r.useEffect((function(){return"click"===b&&window.addEventListener("click",G),function(){"click"===b&&window.removeEventListener("click",G)}}),[b,G]);var W=r.useCallback((function(){switch(b){case"click":default:return{onClick:function(){N((function(t){return!t}))}};case"hover":return{onMouseEnter:function(){N(!0)},onMouseLeave:function(){N(!1)}}}}),[b]);return n.createElement(n.Fragment,null,n.cloneElement(k,i(i({},W()),{"data-testid":"popover_trigger",ref:B})),E&&e.createPortal(n.createElement("div",{className:g+" "+(c||"")},n.createElement("div",{ref:T,className:"popover__container popover__container--"+M,style:i({},C),role:"tooltip"},n.createElement("div",{className:"popover__inner"},s)),n.createElement("div",{ref:Y,className:"popover__arrow popover__arrow--"+M,style:i({},S)}),n.createElement("div",{className:"tooltip__arrow tooltip__arrow-border tooltip__arrow--"+M,style:i({},S)})),q))},exports.TooltipGate=function(t){var o=t.rootId,d=void 0===o?"portal-root":o,c=t.className,s=t.content,u=t.place,f=void 0===u?"top":u,m=t.theme,b=void 0===m?"dark":m,_=t.offset,h=void 0===_?10:_,w=t.children,g=r.useState(!1),x=g[0],v=g[1],k=r.useState({top:-99999,left:-99999}),y=k[0],E=k[1],N=r.useState({top:-99999,left:-99999}),R=N[0],C=N[1],L=r.useState(f),O=L[0],S=L[1],j=r.useRef(null),z=r.useRef(null),M=r.useRef(null),P=a(d),T=r.useCallback((function(){if(M.current){var t=p({triggerRef:M,portalRef:j,arrowRef:z,place:f,offset:h}),r=t.top,e=t.left,o=t.arrowTop,n=t.arrowLeft,a=t.place;E({top:r,left:e}),C({top:o,left:n}),S(a)}}),[f,h]);return l(document.body,T),r.useLayoutEffect((function(){j.current&&T()}),[x,T]),n.createElement(n.Fragment,null,n.cloneElement(w,{onMouseEnter:function(){v(!0)},onMouseLeave:function(){v(!1)},"data-testid":"tooltip_trigger",ref:M}),x&&e.createPortal(n.createElement("div",{className:b+" "+(c||"")},n.createElement("div",{ref:j,className:"tooltip__container tooltip__container--"+O,style:i({},y)},n.createElement("div",{className:"tooltip__inner"},s)),n.createElement("div",{ref:z,className:"tooltip__arrow tooltip__arrow--"+O,style:i({},R)}),n.createElement("div",{className:"tooltip__arrow tooltip__arrow-border tooltip__arrow--"+O,style:i({},R)})),P))};
//# sourceMappingURL=index.js.map