react-pannable - npm Package Compare versions

Comparing version 3.3.1 to 3.4.0

dist/react-pannable.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e=e||self).ReactPannable={},e.React)}(this,(function(e,t){"use strict";var n="default"in t?t.default:t;function i(){return(i=Object.assign||function(e){for(var t=1;arguments.length>t;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e}).apply(this,arguments)}function r(e,t){if(null==e)return{};var n,i,r={},o=Object.keys(e);for(i=0;o.length>i;i++)0>t.indexOf(n=o[i])&&(r[n]=e[n]);return r}var o={target:null,startPoint:null,movePoint:null,moveTime:null,translation:null,velocity:null,interval:null};function a(e,t){switch(t.type){case"disable":case"end":return function(e,t){return e.target?o:e}(e);case"track":return function(e,t){return{target:t.target,startPoint:t.point,movePoint:t.point,moveTime:t.now,translation:null,velocity:null,interval:null}}(0,t);case"move":return function(e,t){var n=e.target,i=e.startPoint,r=e.movePoint,a=e.moveTime,l=e.translation,c=t.point,u=t.now,s=t.shouldStart;if(!n)return e;var d=u-a,f={x:c.x-i.x,y:c.y-i.y},h={x:(c.x-r.x)/d,y:(c.y-r.y)/d};if(l)return{target:n,startPoint:i,movePoint:c,moveTime:u,translation:f,velocity:h,interval:d};if(0>=Math.sqrt(Math.pow(f.x,2)+Math.pow(f.y,2)))return{target:n,startPoint:i,movePoint:c,moveTime:u,translation:null,velocity:null,interval:null};if(!s({target:n,translation:f,velocity:h,interval:d}))return o;return{target:n,startPoint:c,movePoint:c,moveTime:u,translation:{x:0,y:0},velocity:h,interval:d}}(e,t);default:return e}}var l="undefined"!=typeof window&&void 0!==window.document&&void 0!==window.document.createElement?t.useLayoutEffect:t.useEffect;function c(e){var n=t.useRef(e);return t.useEffect((function(){n.current=e})),n}var u={create:function(e){var t=e.transformTranslate,n=e.userSelect,i=r(e,["transformTranslate","userSelect"]);return t&&function(e,t){t.transform="translate3d("+e.x+"px, "+e.y+"px, 0)",t.WebkitTransform="translate3d("+e.x+"px, "+e.y+"px, 0)",t.msTransform="translate("+e.x+"px, "+e.y+"px)"}(t,i),n&&function(e,t){t.userSelect=e,t.WebkitUserSelect=e,t.msUserSelect=e}(n,i),i}},s=function(){},d=function(){};void 0!==typeof window&&(s=window.addEventListener,d=window.removeEventListener);function f(e){var f=e.enabled,h=e.shouldStart,p=e.onStart,v=e.onMove,y=e.onEnd,m=e.onCancel,g=e.children,w=r(e,["enabled","shouldStart","onStart","onMove","onEnd","onCancel","children"]),x=t.useReducer(a,o),b=x[0],E=x[1],S=c(b),C=t.useRef(null),I=t.useRef({touchSupported:!1});I.current.state=b,I.current.shouldStart=h;var z=b.target,T=b.translation,M=b.velocity,O=b.interval,R=S.current;l((function(){function e(e,t){E({type:"track",target:e,point:t,now:(new Date).getTime()})}function t(t){if(I.current.touchSupported=!0,t.touches&&1===t.touches.length){var n=t.touches[0];e(n.target,{x:n.pageX,y:n.pageY})}}function n(e){I.current.state.translation&&e.preventDefault()}function i(t){I.current.touchSupported||e(t.target,{x:t.pageX,y:t.pageY})}if(f){var r=C.current;if(!r.addEventListener)return;return r.addEventListener("touchstart",t,!1),r.addEventListener("touchmove",n,!1),r.addEventListener("mousedown",i,!1),function(){r.removeEventListener("touchstart",t,!1),r.removeEventListener("touchmove",n,!1),r.removeEventListener("mousedown",i,!1)}}}),[f]),l((function(){function e(e){E({type:"move",point:e,now:(new Date).getTime(),shouldStart:I.current.shouldStart})}function t(){E({type:"end"})}function n(t){var n=t.touches[0];I.current.state.translation&&t.preventDefault(),e({x:n.pageX,y:n.pageY})}function i(e){I.current.state.translation&&e.preventDefault(),t()}function r(t){t.preventDefault(),e({x:t.pageX,y:t.pageY})}function o(e){e.preventDefault(),t()}if(z)return I.current.touchSupported?(z.addEventListener("touchmove",n,!1),z.addEventListener("touchend",i,!1),z.addEventListener("touchcancel",i,!1),function(){z.removeEventListener("touchmove",n,!1),z.removeEventListener("touchend",i,!1),z.removeEventListener("touchcancel",i,!1)}):(s("mousemove",r,!1),s("mouseup",o,!1),function(){d("mousemove",r,!1),d("mouseup",o,!1)})}),[z]),l((function(){if(R.translation!==T)if(T){var e={target:z,translation:T,velocity:M,interval:O};R.translation?v(e):p(e)}else if(R.translation){var t={target:R.target,translation:R.translation,velocity:R.velocity,interval:R.interval};f?y(t):m(t)}})),t.useMemo((function(){f||E({type:"disable"})}),[f]);var k={};T&&Object.assign(k,u.create({touchAction:"none",pointerEvents:"none",userSelect:"none"})),w.style&&Object.assign(k,w.style),w.style=k;var L="function"==typeof g?g(b):g;return n.createElement("div",i({},w,{ref:C}),L)}function h(e,t){return e(t={exports:{}},t.exports),t.exports}f.defaultProps={enabled:!0,shouldStart:function(){return!0},onStart:function(){},onMove:function(){},onEnd:function(){},onCancel:function(){}};var p=h((function(e){(e.exports={}).forEach=function(e,t){for(var n=0;e.length>n;n++){var i=t(e[n]);if(i)return i}}})),v=h((function(e){var t=e.exports={};t.isIE=function(e){return(-1!==(t=navigator.userAgent.toLowerCase()).indexOf("msie")||-1!==t.indexOf("trident")||-1!==t.indexOf(" edge/"))&&(!e||e===function(){var e=3,t=document.createElement("div"),n=t.getElementsByTagName("i");do{t.innerHTML="\x3c!--[if gt IE "+ ++e+"]><i></i><![endif]--\x3e"}while(n[0]);return e>4?e:void 0}());var t},t.isLegacyOpera=function(){return!!window.opera}})),y=h((function(e){(e.exports={}).getOption=function(e,t,n){var i=e[t];if(null==i&&void 0!==n)return n;return i}})),m=function(e){var t=(e=e||{}).reporter,n=y.getOption(e,"async",!0),i=y.getOption(e,"auto",!0);i&&!n&&(t&&t.warn("Invalid options combination. auto=true and async=false is invalid. Setting async=true."),n=!0);var r,o=g(),a=!1;function l(){for(a=!0;o.size();){var e=o;o=g(),e.process()}a=!1}function c(){r=setTimeout(l,0)}return{add:function(e,t){!a&&i&&n&&0===o.size()&&c(),o.add(e,t)},force:function(e){a||(void 0===e&&(e=n),r&&(clearTimeout(r),r=null),e?c():l())}}};function g(){var e={},t=0,n=0,i=0;return{add:function(r,o){o||(o=r,r=0),r>n?n=r:i>r&&(i=r),e[r]||(e[r]=[]),e[r].push(o),t++},process:function(){for(var t=i;n>=t;t++)for(var r=e[t],o=0;r.length>o;o++){(0,r[o])()}},size:function(){return t}}}function w(e){return e._erd}var x={initState:function(e){return e._erd={},w(e)},getState:w,cleanState:function(e){delete e._erd}},b=p.forEach,E=function(e){var t=(e=e||{}).reporter,n=e.batchProcessor,i=e.stateHandler.getState,r=e.idHandler;if(!n)throw Error("Missing required dependency: batchProcessor");if(!t)throw Error("Missing required dependency: reporter.");var o=function(){var e=document.createElement("div");e.style.cssText="position: absolute; width: 1000px; height: 1000px; visibility: hidden; margin: 0; padding: 0;";var t=document.createElement("div");t.style.cssText="position: absolute; width: 500px; height: 500px; overflow: scroll; visibility: none; top: -1500px; left: -1500px; visibility: hidden; margin: 0; padding: 0;",t.appendChild(e),document.body.insertBefore(t,document.body.firstChild);var n=500-t.clientWidth,i=500-t.clientHeight;return document.body.removeChild(t),{width:n,height:i}}();function a(e,n,i){if(e.addEventListener)e.addEventListener(n,i);else{if(!e.attachEvent)return t.error("[scroll] Don't know how to add event listeners.");e.attachEvent("on"+n,i)}}function l(e,n,i){if(e.removeEventListener)e.removeEventListener(n,i);else{if(!e.detachEvent)return t.error("[scroll] Don't know how to remove event listeners.");e.detachEvent("on"+n,i)}}function c(e){return i(e).container.childNodes[0].childNodes[0].childNodes[0]}function u(e){return i(e).container.childNodes[0].childNodes[0].childNodes[1]}return function(e,t){if(!document.getElementById(e)){var n=t+"_animation",i="/* Created by the element-resize-detector library. */\n";i+="."+t+" > div::-webkit-scrollbar { display: none; }\n\n",i+="."+(t+"_animation_active")+" { -webkit-animation-duration: 0.1s; animation-duration: 0.1s; -webkit-animation-name: "+n+"; animation-name: "+n+"; }\n",i+="@-webkit-keyframes "+n+" { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }\n",function(t,n){n=n||function(e){document.head.appendChild(e)};var i=document.createElement("style");i.innerHTML=t,i.id=e,n(i)}(i+="@keyframes "+n+" { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }")}}("erd_scroll_detection_scrollbar_style","erd_scroll_detection_container"),{makeDetectable:function(e,l,s){function d(){if(e.debug){var n=Array.prototype.slice.call(arguments);if(n.unshift(r.get(l),"Scroll: "),t.log.apply)t.log.apply(null,n);else for(var i=0;n.length>i;i++)t.log(n[i])}}function f(e){var t=i(e).container.childNodes[0],n=window.getComputedStyle(t);return!n.width||-1===n.width.indexOf("px")}function h(){var e=window.getComputedStyle(l),t={};return t.position=e.position,t.width=l.offsetWidth,t.height=l.offsetHeight,t.top=e.top,t.right=e.right,t.bottom=e.bottom,t.left=e.left,t.widthCSS=e.width,t.heightCSS=e.height,t}function p(){if(d("storeStyle invoked."),i(l)){var e=h();i(l).style=e}else d("Aborting because element has been uninstalled")}function v(e,t,n){i(e).lastWidth=t,i(e).lastHeight=n}function y(){return 2*o.width+1}function m(){return 2*o.height+1}function g(e){return e+10+y()}function w(e){return e+10+m()}function x(e,t,n){var i=c(e),r=u(e),o=g(t),a=w(n),l=function(e){return 2*e+y()}(t),s=function(e){return 2*e+m()}(n);i.scrollLeft=o,i.scrollTop=a,r.scrollLeft=l,r.scrollTop=s}function E(){var e=i(l).container;if(!e){(e=document.createElement("div")).className="erd_scroll_detection_container",e.style.cssText="visibility: hidden; display: inline; width: 0px; height: 0px; z-index: -1; overflow: hidden; margin: 0; padding: 0;",i(l).container=e,function(e){e.className+=" erd_scroll_detection_container_animation_active"}(e),l.appendChild(e);var t=function(){i(l).onRendered&&i(l).onRendered()};a(e,"animationstart",t),i(l).onAnimationStart=t}return e}function S(){if(d("Injecting elements"),i(l)){!function(){var e=i(l).style;if("static"===e.position){l.style.position="relative";var n=function(e,t,n,i){var r=n[i];"auto"!==r&&"0"!==function(e){return e.replace(/[^-\d\.]/g,"")}(r)&&(e.warn("An element that is positioned static has style."+i+"="+r+" which is ignored due to the static positioning. The element will need to be positioned relative, so the style."+i+" will be set to 0. Element: ",t),t.style[i]=0)};n(t,l,e,"top"),n(t,l,e,"right"),n(t,l,e,"bottom"),n(t,l,e,"left")}}();var e=i(l).container;e||(e=E());var n,r,c,u,s=o.width,f=o.height,h="position: absolute; flex: none; overflow: hidden; z-index: -1; visibility: hidden; "+("left: "+(n=(n=-(1+s))?n+"px":"0")+"; top: "+(r=(r=-(1+f))?r+"px":"0")+"; right: "+(u=(u=-s)?u+"px":"0")+"; bottom: "+(c=(c=-f)?c+"px":"0")+";"),p=document.createElement("div"),v=document.createElement("div"),y=document.createElement("div"),m=document.createElement("div"),g=document.createElement("div"),w=document.createElement("div");p.dir="ltr",p.style.cssText="position: absolute; flex: none; overflow: hidden; z-index: -1; visibility: hidden; width: 100%; height: 100%; left: 0px; top: 0px;",p.className="erd_scroll_detection_container",v.className="erd_scroll_detection_container",v.style.cssText=h,y.style.cssText="position: absolute; flex: none; overflow: scroll; z-index: -1; visibility: hidden; width: 100%; height: 100%;",m.style.cssText="position: absolute; left: 0; top: 0;",g.style.cssText="position: absolute; flex: none; overflow: scroll; z-index: -1; visibility: hidden; width: 100%; height: 100%;",w.style.cssText="position: absolute; width: 200%; height: 200%;",y.appendChild(m),g.appendChild(w),v.appendChild(y),v.appendChild(g),p.appendChild(v),e.appendChild(p),a(y,"scroll",x),a(g,"scroll",b),i(l).onExpandScroll=x,i(l).onShrinkScroll=b}else d("Aborting because element has been uninstalled");function x(){i(l).onExpand&&i(l).onExpand()}function b(){i(l).onShrink&&i(l).onShrink()}}function C(){function o(e,t,n){var i=function(e){return c(e).childNodes[0]}(e),r=g(t),o=w(n);i.style.width=r+"px",i.style.height=o+"px"}function a(a){var c=l.offsetWidth,u=l.offsetHeight;d("Storing current size",c,u),v(l,c,u),n.add(0,(function(){if(i(l))if(s()){if(e.debug)l.offsetWidth===c&&l.offsetHeight===u||t.warn(r.get(l),"Scroll: Size changed before updating detector elements.");o(l,c,u)}else d("Aborting because element container has not been initialized");else d("Aborting because element has been uninstalled")})),n.add(1,(function(){i(l)?s()?x(l,c,u):d("Aborting because element container has not been initialized"):d("Aborting because element has been uninstalled")})),a&&n.add(2,(function(){i(l)?s()?a():d("Aborting because element container has not been initialized"):d("Aborting because element has been uninstalled")}))}function s(){return!!i(l).container}function h(){d("notifyListenersIfNeeded invoked");var e=i(l);return void 0===i(l).lastNotifiedWidth&&e.lastWidth===e.startSize.width&&e.lastHeight===e.startSize.height?d("Not notifying: Size is the same as the start size, and there has been no notification yet."):e.lastWidth===e.lastNotifiedWidth&&e.lastHeight===e.lastNotifiedHeight?d("Not notifying: Size already notified"):(d("Current size not notified, notifying..."),e.lastNotifiedWidth=e.lastWidth,e.lastNotifiedHeight=e.lastHeight,void b(i(l).listeners,(function(e){e(l)})))}function p(){if(d("Scroll detected."),f(l))d("Scroll event fired while unrendered. Ignoring...");else{var e=l.offsetWidth,t=l.offsetHeight;e!==i(l).lastWidth||t!==i(l).lastHeight?(d("Element size changed."),a(h)):d("Element size has not changed ("+e+"x"+t+").")}}if(d("registerListenersAndPositionElements invoked."),i(l)){i(l).onRendered=function(){if(d("startanimation triggered."),f(l))d("Ignoring since element is still unrendered...");else{d("Element rendered.");var e=c(l),t=u(l);0!==e.scrollLeft&&0!==e.scrollTop&&0!==t.scrollLeft&&0!==t.scrollTop||(d("Scrollbars out of sync. Updating detector elements..."),a(h))}},i(l).onExpand=p,i(l).onShrink=p;var y=i(l).style;o(l,y.width,y.height)}else d("Aborting because element has been uninstalled")}function I(){if(d("finalizeDomMutation invoked."),i(l)){var e=i(l).style;v(l,e.width,e.height),x(l,e.width,e.height)}else d("Aborting because element has been uninstalled")}function z(){s(l)}function T(){var e;d("Installing..."),i(l).listeners=[],e=h(),i(l).startSize={width:e.width,height:e.height},d("Element start size",i(l).startSize),n.add(0,p),n.add(1,S),n.add(2,C),n.add(3,I),n.add(4,z)}s||(s=l,l=e,e=null),e=e||{},d("Making detectable..."),!function(e){return!function(e){return e===e.ownerDocument.body||e.ownerDocument.body.contains(e)}(e)||null===window.getComputedStyle(e)}(l)?T():(d("Element is detached"),E(),d("Waiting until element is attached..."),i(l).onRendered=function(){d("Element is now attached"),T()})},addListener:function(e,t){if(!i(e).listeners.push)throw Error("Cannot add listener to an element that is not detectable.");i(e).listeners.push(t)},uninstall:function(e){var t=i(e);t&&(t.onExpandScroll&&l(c(e),"scroll",t.onExpandScroll),t.onShrinkScroll&&l(u(e),"scroll",t.onShrinkScroll),t.onAnimationStart&&l(t.container,"animationstart",t.onAnimationStart),t.container&&e.removeChild(t.container))}}},S=p.forEach;function C(e){return Array.isArray(e)||void 0!==e.length}function I(e){if(Array.isArray(e))return e;var t=[];return S(e,(function(e){t.push(e)})),t}function z(e){return e&&1===e.nodeType}function T(e,t,n){var i=e[t];return null==i&&void 0!==n?n:i}var M=null;"undefined"!=typeof window&&(M=function(e){var t,n;if((e=e||{}).idHandler)t={get:function(t){return e.idHandler.get(t,!0)},set:e.idHandler.set};else{var i=function(e){var t=e.idGenerator,n=e.stateHandler.getState;return{get:function(e){var t=n(e);return t&&void 0!==t.id?t.id:null},set:function(e){var i=n(e);if(!i)throw Error("setId required the element to have a resize detection state.");var r=t.generate();return i.id=r,r}}}({idGenerator:(n=1,{generate:function(){return n++}}),stateHandler:x});t=i}var r=e.reporter;r||(r=function(e){function t(){}var n={log:t,warn:t,error:t};if(!e&&window.console){var i=function(e,t){e[t]=function(){var e=console[t];if(e.apply)e.apply(console,arguments);else for(var n=0;arguments.length>n;n++)e(arguments[n])}};i(n,"log"),i(n,"warn"),i(n,"error")}return n}(!1===r));var o=T(e,"batchProcessor",m({reporter:r})),a={};a.callOnAdd=!!T(e,"callOnAdd",!0),a.debug=!!T(e,"debug",!1);var l,c=function(e){var t={};function n(n){var i=e.get(n);return void 0===i?[]:t[i]||[]}return{get:n,add:function(n,i){var r=e.get(n);t[r]||(t[r]=[]),t[r].push(i)},removeListener:function(e,t){for(var i=n(e),r=0,o=i.length;o>r;++r)if(i[r]===t){i.splice(r,1);break}},removeAllListeners:function(e){var t=n(e);t&&(t.length=0)}}}(t),u=function(e){var t=e.stateHandler.getState;return{isDetectable:function(e){var n=t(e);return n&&!!n.isDetectable},markAsDetectable:function(e){t(e).isDetectable=!0},isBusy:function(e){return!!t(e).busy},markBusy:function(e,n){t(e).busy=!!n}}}({stateHandler:x}),s=T(e,"strategy","object"),d={reporter:r,batchProcessor:o,stateHandler:x,idHandler:t};if("scroll"===s&&(v.isLegacyOpera()?(r.warn("Scroll strategy is not supported on legacy Opera. Changing to object strategy."),s="object"):v.isIE(9)&&(r.warn("Scroll strategy is not supported on IE9. Changing to object strategy."),s="object")),"scroll"===s)l=E(d);else{if("object"!==s)throw Error("Invalid strategy name: "+s);l=function(e){var t=(e=e||{}).reporter,n=e.batchProcessor,i=e.stateHandler.getState;if(!t)throw Error("Missing required dependency: reporter.");function r(e){return i(e).object}return{makeDetectable:function(e,r,o){o||(o=r,r=e,e=null),e=e||{},v.isIE(8)?o(r):function(e,r){var o=!1,a=window.getComputedStyle(e),l=e.offsetWidth,c=e.offsetHeight;function u(){function n(){if("static"===a.position){e.style.position="relative";var n=function(e,t,n,i){var r=n[i];"auto"!==r&&"0"!==function(e){return e.replace(/[^-\d\.]/g,"")}(r)&&(e.warn("An element that is positioned static has style."+i+"="+r+" which is ignored due to the static positioning. The element will need to be positioned relative, so the style."+i+" will be set to 0. Element: ",t),t.style[i]=0)};n(t,e,a,"top"),n(t,e,a,"right"),n(t,e,a,"bottom"),n(t,e,a,"left")}}""!==a.position&&(n(),o=!0);var l=document.createElement("object");l.style.cssText="display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; padding: 0; margin: 0; opacity: 0; z-index: -1000; pointer-events: none;",l.tabIndex=-1,l.type="text/html",l.setAttribute("aria-hidden","true"),l.onload=function(){o||n(),function e(t,n){t.contentDocument?n(t.contentDocument):setTimeout((function(){e(t,n)}),100)}(this,(function(t){r(e)}))},v.isIE()||(l.data="about:blank"),e.appendChild(l),i(e).object=l,v.isIE()&&(l.data="about:blank")}i(e).startSize={width:l,height:c},n?n.add(u):u()}(r,o)},addListener:function(e,t){if(!r(e))throw Error("Element is not detectable by this strategy.");function n(){t(e)}v.isIE(8)?(i(e).object={proxy:n},e.attachEvent("onresize",n)):r(e).contentDocument.defaultView.addEventListener("resize",n)},uninstall:function(e){v.isIE(8)?e.detachEvent("onresize",i(e).object.proxy):e.removeChild(r(e)),delete i(e).object}}}(d)}var f={};return{listenTo:function(e,n,i){function o(e){var t=c.get(e);S(t,(function(t){t(e)}))}function s(e,t,n){c.add(t,n),e&&n(t)}if(i||(i=n,n=e,e={}),!n)throw Error("At least one element required.");if(!i)throw Error("Listener required.");if(z(n))n=[n];else{if(!C(n))return r.error("Invalid arguments. Must be a DOM element or a collection of DOM elements.");n=I(n)}var d=0,h=T(e,"callOnAdd",a.callOnAdd),p=T(e,"onReady",(function(){})),v=T(e,"debug",a.debug);S(n,(function(e){x.getState(e)||(x.initState(e),t.set(e));var a=t.get(e);if(v&&r.log("Attaching listener to element",a,e),!u.isDetectable(e))return v&&r.log(a,"Not detectable."),u.isBusy(e)?(v&&r.log(a,"System busy making it detectable"),s(h,e,i),f[a]=f[a]||[],void f[a].push((function(){++d===n.length&&p()}))):(v&&r.log(a,"Making detectable..."),u.markBusy(e,!0),l.makeDetectable({debug:v},e,(function(e){if(v&&r.log(a,"onElementDetectable"),x.getState(e)){u.markAsDetectable(e),u.markBusy(e,!1),l.addListener(e,o),s(h,e,i);var t=x.getState(e);if(t&&t.startSize)t.startSize.width===e.offsetWidth&&t.startSize.height===e.offsetHeight||o(e);f[a]&&S(f[a],(function(e){e()}))}else v&&r.log(a,"Element uninstalled before being detectable.");delete f[a],++d===n.length&&p()})));v&&r.log(a,"Already detecable, adding listener."),s(h,e,i),d++})),d===n.length&&p()},removeListener:c.removeListener,removeAllListeners:c.removeAllListeners,uninstall:function(e){if(!e)return r.error("At least one element is required.");if(z(e))e=[e];else{if(!C(e))return r.error("Invalid arguments. Must be a DOM element or a collection of DOM elements.");e=I(e)}S(e,(function(e){c.removeAllListeners(e),l.uninstall(e),x.cleanState(e)}))}}}({strategy:"scroll"}));var O=M;function R(e){var t=0,n=0;if("undefined"!=typeof window&&(t=e.offsetWidth,n=e.offsetHeight,window.getComputedStyle)){var i=window.getComputedStyle(e)||{};i.paddingLeft&&(t-=parseInt(i.paddingLeft,10)),i.paddingRight&&(t-=parseInt(i.paddingRight,10)),i.borderLeftWidth&&(t-=parseInt(i.borderLeftWidth,10)),i.borderRightWidth&&(t-=parseInt(i.borderRightWidth,10)),i.paddingTop&&(n-=parseInt(i.paddingTop,10)),i.paddingBottom&&(n-=parseInt(i.paddingBottom,10)),i.borderTopWidth&&(n-=parseInt(i.borderTopWidth,10)),i.borderBottomWidth&&(n-=parseInt(i.borderBottomWidth,10))}return{width:t,height:n}}function k(e,t){return e===t||!(!e||!t)&&(e.width===t.width&&e.height===t.height)}function L(e){return!isNaN(parseFloat(e))&&isFinite(e)}function P(e){var o=e.width,a=e.height,u=e.onResize,s=e.children,d=r(e,["width","height","onResize","children"]),f=t.useState(null),h=f[0],p=f[1],v=c(h),y=t.useRef(null),m=v.current,g=t.useCallback((function(){var e=R(y.current);p((function(t){return k(t,e)?t:e}))}),[]);l((function(){m!==h&&h&&u(h),h||g()})),l((function(){if((!L(o)||!L(a))&&O){var e=y.current;return O.listenTo(e,(function(){return g()})),function(){return O.uninstall(e)}}}),[o,a]),t.useMemo((function(){var e=null;L(o)&&L(a)&&(e={width:o,height:a}),p((function(t){return k(t,e)?t:e}))}),[o,a]);var w=null;h&&(w="function"==typeof s?s(h):s);var x={width:L(o)?o:"100%",height:L(a)?a:"100%"};return d.style&&Object.assign(x,d.style),d.style=x,n.createElement("div",i({},d,{ref:y}),w)}P.defaultProps={width:null,height:null,onResize:function(){}};var H=function(){},A=function(){};if("undefined"!=typeof window){H=window.requestAnimationFrame,A=window.cancelAnimationFrame;for(var W=["ms","moz","webkit","o"],D=0,j=0;4>j&&!H;++j)H=window[W[j]+"RequestAnimationFrame"],A=window[W[j]+"CancelAnimationFrame"]||window[W[j]+"CancelRequestAnimationFrame"];H||(H=function(e){var t=(new Date).getTime(),n=Math.max(0,16-(t-D)),i=window.setTimeout((function(){e(t+n)}),n);return D=t+n,i},A=function(e){clearTimeout(e)})}function _(e,t){var n=t.x,i=t.y,r=Math.sqrt(n*n+i*i);return 0===r?{x:0,y:0}:{x:e*(n/r),y:e*(i/r)}}function N(e,t,n,i){if(i){var r="y"===i?["y","height"]:["x","width"],o=r[0];if(!e[o])return 0;var a=0>e[o]?-1:1;return a*Math.min(a*e[o],Math.sqrt(2*(.5*t[r[1]])*a*n[o]))}"object"!=typeof n&&(n=_(n,e));var l={x:N(e,t,n,"x"),y:N(e,t,n,"y")};return l.x===e.x&&l.y===e.y?e:l}function B(e,t,n,i,r,o){if(o){var a="y"===o?["y","height"]:["x","width"],l=a[0],c=a[1],u=t[c],s=Math.min(u-n[c],0),d=e[l];return i&&u>0&&(s=u*Math.ceil(s/u)),d>0?d=0:s>d?d=s:!r&&i&&u>0&&(d=u*Math.round(d/u)),d}var f={x:B(e,t,n,i,r,"x"),y:B(e,t,n,i,r,"y")};return f.x===e.x&&f.y===e.y?e:f}function V(e,t,n,i,r,o){if(o){var a="y"===o?["y","height"]:["x","width"],l=a[0],c=a[1],u=e[l];if(i&&n[c]>0){var s=u/n[c];u=n[c]*(s=t[l]>.5?Math.ceil(s):-.5>t[l]?Math.floor(s):Math.round(s))}else r[l]&&(u+=.5*t[l]*(t[l]/r[l]));return u}return"object"!=typeof r&&(r=_(r,t)),{x:V(e,t,n,i,r,"x"),y:V(e,t,n,i,r,"y")}}function q(e,t,n,i){var r=(new Date).getTime(),o=0;if(!t)return{endOffset:e,rate:t,duration:o,startTime:r};var a,l={x:e.x-n.x,y:e.y-n.y},c=Math.sqrt(Math.pow(l.x,2)+Math.pow(l.y,2));if(c){var u=Math.sqrt(.5*Math.pow(a=(i.x*l.x+i.y*l.y)/c,2)+t*c),s=(u-a)/t;0>s&&(u=a,s=0),o=s+u/t}else a=Math.sqrt(Math.pow(i.x,2)+Math.pow(i.y,2)),o=(Math.sqrt(2)+1)*a/t;return{endOffset:e,rate:t,duration:o,startTime:r,points:{x:[n.x,n.x+i.x*(o/3),e.x,e.x],y:[n.y,n.y+i.y*(o/3),e.y,e.y]}}}var F={size:{width:0,height:0},contentSize:{width:0,height:0},contentOffset:{x:0,y:0},contentVelocity:{x:0,y:0},drag:null,deceleration:null,options:[!1,!1,!0,!0],pannable:o};function X(e,t){return function(e,t){var n=e.size,r=e.contentSize,o=e.contentOffset,a=e.contentVelocity,l=e.drag,c=e.deceleration,u=e.options,s=u[0],d=u[2],f=u[3];if(c){var h=c.endOffset;if(h!==B(h,n,r,s,!0)&&o!==B(o,n,r,s,!0)){var p=a;return d||(p.x=0),f||(p.y=0),.025!==c.rate&&(p=N(p,n,.025),h=V(o,p,n,s,.025)),h=B(h,n,r,s,!0),i({},e,{contentVelocity:p,drag:null,deceleration:q(h,.025,o,p)})}}else if(!l){var v=B(o,n,r,s);if(o!==v){var y=V(v,{x:0,y:0},n,s,.025);return i({},e,{drag:null,deceleration:q(y,.025,o,a)})}}return e}(function(e,t){switch(t.type){case"setPannable":return function(e,t){return i({},e,{pannable:t.value})}(e,t);case"setOptions":return function(e,t){return i({},e,{options:t.value})}(e,t);case"setSize":return function(e,t){return i({},e,{size:t.value})}(e,t);case"setContentSize":return function(e,t){return i({},e,{contentSize:t.value})}(e,t);case"dragStart":return function(e,t){var n=e.contentOffset,r=e.pannable.velocity,o={x:1,y:1};e.options[1]&&(Math.abs(r.x)>Math.abs(r.y)?o.y=0:o.x=0);return i({},e,{contentVelocity:{x:o.x*r.x,y:o.y*r.y},drag:{direction:o,startOffset:n},deceleration:null})}(e);case"dragMove":return function(e,t){var n=e.contentOffset,r=e.drag,o=e.options,a=e.pannable,l=a.translation,c=a.interval,u=function e(t,n,i,r,o){if(o){var a="y"===o?["y","height","width"]:["x","width","height"],l=a[0],c=a[1],u=a[2],s=t[l],d=Math.min(i[c]-r[c],0),f=.5*Math.min(i[c],i[u]);return s>0?n[l]?f*(1-f/(f+s)):0:d>s?n[l]?d-f*(1-f/(f-s+d)):d:s}var h={x:e(t,n,i,r,"x"),y:e(t,n,i,r,"y")};return h.x===t.x&&h.y===t.y?t:h}({x:r.startOffset.x+r.direction.x*l.x,y:r.startOffset.y+r.direction.y*l.y},{x:o[2],y:o[3]},e.size,e.contentSize);return i({},e,{contentOffset:u,contentVelocity:{x:(u.x-n.x)/c,y:(u.y-n.y)/c}})}(e);case"dragEnd":return function(e,t){var n=e.size,r=e.contentOffset,o=e.options[0],a=.0025,l=e.contentVelocity;o&&(l=N(l,n,a=.025));var c=V(r,l,n,o,a);return i({},e,{contentVelocity:l,drag:null,deceleration:q(c,a,r,l)})}(e);case"dragCancel":return function(e,t){var n=e.contentOffset,r=e.contentVelocity,o=V(e.drag.startOffset,{x:0,y:0},e.size,e.options[0],.025);return i({},e,{drag:null,deceleration:q(o,.025,n,r)})}(e);case"decelerate":return function(e,t){var n=e.deceleration,r=t.now;if(!n)return e;var o=function e(t,n,r){var o=t.duration,a=t.endOffset,l=1;if(o>0&&(l=(n-t.startTime)/o),r){var c,u=("y"===r?["y"]:["x"])[0],s=t.points[u],d=s[0],f=s[1],h=s[2],p=s[3],v=d-3*(d-f)*l+3*(d-2*f+h)*Math.pow(l,2)-(d-3*f+3*h-p)*Math.pow(l,3),y=(-3*(d-f)+6*(d-2*f+h)*l-3*(d-3*f+3*h-p)*Math.pow(l,2))/o;return(c={})[u+"Offset"]=v,c[u+"Velocity"]=y,c}if(0>l||l>=1)return{offset:a,velocity:{x:0,y:0},didEnd:!0};var m=i({},e(t,n,"x"),{},e(t,n,"y"));return{offset:{x:m.xOffset,y:m.yOffset},velocity:{x:m.xVelocity,y:m.yVelocity},didEnd:!1}}(n,r);return i({},e,{contentOffset:o.offset,contentVelocity:o.velocity,drag:null,deceleration:o.didEnd?null:n})}(e,t);case"scrollTo":return Y(e,t);case"scrollToRect":return function(e,t){var n=t.animated,i=function e(t,n,i,r,o){if(o){var a="y"===o?["y","height"]:["x","width"],l=a[0],c=a[1],u=-t[l],s=r[c]-t[c];if("auto"===n[l]){var d=0>s?-1:1;u+=d*Math.max(0,Math.min(d*(i[l]-u),d*s))}else"start"===n[l]?n[l]=0:"center"===n[l]?n[l]=.5:"end"===n[l]&&(n[l]=1),("number"!=typeof n[l]||isNaN(n[l]))&&(n[l]=.5),u+=n[l]*s;return u}"object"!=typeof n&&(n={x:n,y:n});return{x:e(t,n,i,r,"x"),y:e(t,n,i,r,"y")}}(t.rect,t.align,e.contentOffset,e.size);return Y(e,{type:"scrollTo",offset:i,animated:n})}(e,t);default:return e}}(e,t))}function Y(e,t){var n=e.contentOffset,r=e.contentVelocity,o=t.point,a=e.drag,l=e.deceleration,c=t.offset,u=void 0===c?{x:0,y:0}:c,s=t.animated;return o&&(u={x:-o.x,y:-o.y}),u.x===n.x&&u.y===n.y?e:(a&&(s=!1),s?i({},e,{deceleration:q(V(u,{x:0,y:0},e.size,e.options[0],.025),.025,n,r)}):(a?a=i({},a,{startOffset:{x:a.startOffset.x+u.x-n.x,y:a.startOffset.y+u.y-n.y}}):l=l?q({x:l.endOffset.x+u.x-n.x,y:l.endOffset.y+u.y-n.y},l.rate,u,r):q(u),i({},e,{contentOffset:u,drag:a,deceleration:l})))}var G=n.createContext({visibleRect:null,resizeContent:function(){}});function U(e){var o=e.width,a=e.height,u=e.children,s=r(e,["width","height","children"]),d=t.useState(null),f=d[0],h=d[1],p=c(f),v=t.useContext(G),y=t.useRef(null),m=p.current,g=t.useCallback((function(){}),[]),w=t.useCallback((function(){return y.current}),[]),x=t.useCallback((function(){var e=R(y.current);h((function(t){return k(t,e)?t:e}))}),[]);l((function(){m!==f&&f&&v.resizeContent(f),f||x()})),t.useMemo((function(){var e=null;L(o)&&L(a)&&(e={width:o,height:a}),h((function(t){return k(t,e)?t:e}))}),[o,a]);var b="function"==typeof u?u(f,{getResizeNode:w,calculateSize:x}):u,E={position:"relative"},S={position:"absolute"};return L(o)&&(S.width=o),L(a)&&(S.height=a),b=n.createElement("div",{ref:y,style:S},b),f?(E.width=f.width,E.height=f.height):b=n.createElement("div",{style:{position:"absolute"}},b),s.style&&Object.assign(E,s.style),s.style=E,n.createElement(G.Provider,{value:i({},v,{resizeContent:g})},n.createElement("div",s,b))}U.defaultProps={width:null,height:null},U.PadContent=!0;var J=i({},U.defaultProps);function K(e){var i=e.width,r=e.height,o=e.children,a=t.useState(null),l=a[0],c=a[1],u=t.useRef({});return t.useEffect((function(){if(!L(i)||!L(r)){var e=u.current,t=e.calculateSize;if(l){var n=(0,e.getResizeNode)();return O.listenTo(n,(function(){t()})),function(){O.uninstall(n)}}}}),[i,r,l]),n.createElement(U,e,(function(e,t){return u.current=t,l!==e&&c(e),"function"==typeof o?o(e,t):o}))}K.defaultProps=J,K.PadContent=!0;var Q=i({width:0,height:0,pagingEnabled:!1,directionalLockEnabled:!1,alwaysBounceX:!0,alwaysBounceY:!0,onScroll:function(){},onDragStart:function(){},onDragEnd:function(){},onDecelerationStart:function(){},onDecelerationEnd:function(){},onContentResize:function(){},renderBackground:function(){return null},renderOverlay:function(){return null},scrollTo:null,scrollToRect:null},f.defaultProps);function Z(e){var o=e.width,a=e.height,s=e.pagingEnabled,d=e.directionalLockEnabled,h=e.alwaysBounceX,p=e.alwaysBounceY,v=e.onScroll,y=e.onDragStart,m=e.onDragEnd,g=e.onDecelerationStart,w=e.onDecelerationEnd,x=e.onContentResize,b=e.renderBackground,E=e.renderOverlay,S=e.scrollTo,C=e.scrollToRect,I=e.children,z=r(e,["width","height","pagingEnabled","directionalLockEnabled","alwaysBounceX","alwaysBounceY","onScroll","onDragStart","onDragEnd","onDecelerationStart","onDecelerationEnd","onContentResize","renderBackground","renderOverlay","scrollTo","scrollToRect","children"]),T=z.enabled,M=z.shouldStart,O=t.useReducer(X,F),R=O[0],L=O[1],P=c(R),W=R.size,D=R.contentSize,j=R.contentOffset,_=R.drag,N=R.deceleration,B=R.pannable,V={size:W,contentSize:D,contentOffset:j,contentVelocity:R.contentVelocity,dragging:!!_,decelerating:!!N},q=P.current,Y=t.useCallback((function(e){k(D,e)||L({type:"setContentSize",value:e})}),[D]),U=t.useCallback((function(e){return!(d&&!function(e,t,n){var i=Math.abs(e.x)>Math.abs(e.y)?"width":"height";return n[i]>t[i]}(e.velocity,W,D))&&M(e)}),[M,d,W,D]);l((function(){q.pannable.translation!==B.translation&&(B.translation?L(q.pannable.translation?{type:"dragMove"}:{type:"dragStart"}):q.pannable.translation&&L(T?{type:"dragEnd"}:{type:"dragCancel"})),q.contentSize!==D&&x(D),q.contentOffset!==j&&v(V),q.drag!==_&&(q.drag?_||m(V):y(V)),q.deceleration!==N&&(q.deceleration?N||w(V):g(V))})),l((function(){if(R.deceleration){var e=H((function(){L({type:"decelerate",now:(new Date).getTime()})}));return function(){A(e)}}}),[R]),t.useMemo((function(){L({type:"setSize",value:{width:o,height:a}})}),[o,a]),t.useMemo((function(){L({type:"setOptions",value:[s,d,h,p]})}),[s,d,h,p]),t.useMemo((function(){S&&L(i({type:"scrollTo"},S))}),[S]),t.useMemo((function(){C&&L(i({type:"scrollToRect"},C))}),[C]),z.shouldStart=U;var J={overflow:"hidden",position:"relative",width:W.width,height:W.height};return z.style&&Object.assign(J,z.style),z.style=J,n.createElement(f,z,(function(e){var i;return B!==e&&L({type:"setPannable",value:e}),n.createElement(G.Provider,{value:{visibleRect:{x:-j.x,y:-j.y,width:W.width,height:W.height},resizeContent:Y}},null==(i=b(V))?null:n.createElement("div",{style:{position:"absolute",top:0,left:0,right:0,bottom:0}},i),function(){var e=u.create({position:"absolute",width:D.width,height:D.height,transformTranslate:j,willChange:"transform"}),i="function"==typeof I?I(R):I;return t.isValidElement(i)&&i.type.PadContent?(i.props.style&&Object.assign(e,i.props.style),i=t.cloneElement(i,{style:e,ref:i.ref})):i=n.createElement(K,{style:e},i),i}(),E(V))}))}function $(e,t,n){if(!t)return t;if(n){var r,o="y"===n?["y","height"]:["x","width"],a=o[0],l=o[1];return(r={})[a]=t[a]-e[a],r[l]=t[l],r}return i({},$(e,t,"x"),{},$(e,t,"y"))}function ee(e,t,n){if(!t)return!0;if(n){var i="y"===n?["y","height"]:["x","width"],r=i[0],o=i[1];return e[r]+e[o]>=t[r]-.25*t[o]&&t[r]+1.25*t[o]>=e[r]}return ee(e,t,"x")&&ee(e,t,"y")}function te(){}Z.defaultProps=Q;function ne(e){var o=e.width,a=e.height,u=e.direction,s=e.rowSpacing,d=e.columnSpacing,f=e.itemWidth,h=e.itemHeight,p=e.itemCount,v=e.renderItem,y=e.children,m=r(e,["width","height","direction","rowSpacing","columnSpacing","itemWidth","itemHeight","itemCount","renderItem","children"]),g=t.useMemo((function(){return function(e){var t,n,i=e.itemCount,r={width:e.itemWidth,height:e.itemHeight},o={row:e.rowSpacing,column:e.columnSpacing},a="x"===e.direction?["y","x","height","width","column","row"]:["x","y","width","height","row","column"],l=a[0],c=a[1],u=a[2],s=a[3],d=a[4],f=a[5],h={width:e.width,height:e.height}[u],p=0,v=0,y=0,m=[];"number"!=typeof h?(y=i,0===r[u]?h=0:(h=i*r[u],i>1&&(h+=(i-1)*o[f]))):0===r[u]?y=i:(y=1,h>r[u]&&(y+=Math.floor((h-r[u])/(r[u]+o[f]))));y>0&&(v=Math.ceil(i/y));for(var g=0;v>g;g++){g>0&&(p+=o[d]);for(var w=0;y>w;w++){var x,b,E=w+g*y,S=0;if(y>1&&(S+=Math.round(w*((h-r[u])/(y-1)))),E>=i)break;m.push(((b={rect:(x={},x[l]=S,x[c]=p,x[u]=r[u],x[s]=r[s],x)})[d+"Index"]=g,b[f+"Index"]=w,b.itemIndex=E,b))}p+=r[s]}return{size:(t={},t[u]=h,t[s]=p,t),count:(n={},n[d]=v,n[f]=y,n),layoutList:m}}({direction:u,width:o,height:a,rowSpacing:s,columnSpacing:d,itemCount:p,itemWidth:f,itemHeight:h})}),[u,o,a,s,d,p,f,h]),w=c(g),x=t.useContext(G),b=g.size,E=g.layoutList,S=w.current,C=t.useCallback((function(){}),[]);l((function(){x.resizeContent(b)}),[]),l((function(){k(S.size,b)||x.resizeContent(b)}));var I={position:"relative"};b&&(I.width=b.width,I.height=b.height),m.style&&Object.assign(I,m.style),m.style=I;var z=E.map((function(e){return function(e){var r=e.rect,o=e.itemIndex,a=e.visibleRect,l=e.needsRender,c=e.Item,u=!1,s=v(e),d="GridContent_"+o,f={position:"absolute",left:r.x,top:r.y,width:r.width,height:r.height};return t.isValidElement(s)&&s.type===c&&(void 0!==s.props.forceRender&&(u=s.props.forceRender),s.key&&(d=s.key),s=s.props.children),l||u?(t.isValidElement(s)?(s.props.style&&Object.assign(f,s.props.style),s=t.cloneElement(s,{style:f,ref:s.ref})):s=n.createElement("div",{style:f},s),n.createElement(G.Provider,{key:d,value:i({},x,{visibleRect:a,resizeContent:C})},s)):null}(i({},e,{visibleRect:$(e.rect,x.visibleRect),needsRender:ee(e.rect,x.visibleRect),Item:te}))}));return"function"==typeof y&&y(g),n.createElement("div",m,z)}function ie(){}ne.defaultProps={width:null,height:null,direction:"y",rowSpacing:0,columnSpacing:0,itemWidth:0,itemHeight:0,itemCount:0,renderItem:function(){return null}},ne.PadContent=!0;function re(e){var o=e.width,a=e.height,u=e.direction,s=e.spacing,d=e.estimatedItemWidth,f=e.estimatedItemHeight,h=e.itemCount,p=e.renderItem,v=e.children,y=r(e,["width","height","direction","spacing","estimatedItemWidth","estimatedItemHeight","itemCount","renderItem","children"]),m=t.useContext(G),g=t.useState([]),w=g[0],x=g[1],b=t.useState({}),E=b[0],S=b[1],C=t.useMemo((function(){return function(e,t,n){var i,r=e.direction,o=e.spacing,a=e.itemCount,l=e.estimatedItemWidth,c=e.estimatedItemHeight,u={width:e.width,height:e.height},s="x"===r?["y","x","height","width"]:["x","y","width","height"],d=s[0],f=s[1],h=s[2],p=s[3],v=0,y=0,m=[],g={},w=[r,u[h]].join();L(u[h])&&(g[h]=u[h]);for(var x=0;a>x;x++){var b,E=t[x]||null,S=n[E]||null,C=((b={})[d]=0,b[f]=y,b);S?Object.assign(C,S):(C[h]=void 0!==g[h]?g[h]:"function"==typeof l?l(x):l,C[p]="function"==typeof c?c(x):c),m.push({rect:C,itemIndex:x,itemHash:E,itemSize:S}),C[p]>0&&(y+=C[p],a-1>x&&(y+=o)),C[h]>v&&(v=C[h])}return{size:(i={},i[h]=v,i[p]=y,i),fixed:g,layoutList:m,type:w}}({width:o,height:a,direction:u,spacing:s,itemCount:h,estimatedItemWidth:d,estimatedItemHeight:f},w,E)}),[o,a,u,s,h,d,f,w,E]),I=c(C).current,z=[];l((function(){m.resizeContent(C.size)}),[]),l((function(){k(I.size,C.size)||m.resizeContent(C.size),I.type!==C.type&&S({})}));var T={position:"relative"};C.size&&(T.width=C.size.width,T.height=C.size.height),y.style&&Object.assign(T,y.style),y.style=T;var M=C.layoutList.map((function(e){return function(e){var r,o=e.rect,a=e.itemIndex,l=e.itemSize,c=e.visibleRect,u=e.needsRender,s=e.Item,d=!1,f=p(e),h="ListContent_"+a,v={position:"absolute",left:o.x,top:o.y,width:o.width,height:o.height};t.isValidElement(f)&&f.type===s&&(void 0!==f.props.forceRender&&(d=f.props.forceRender),f.key&&(h=f.key),void 0!==f.props.hash&&(r=f.props.hash),f=f.props.children),void 0===r&&(r=h);var y=!u&&!d;if(l||-1===z.indexOf(r)||(y=!0),z[a]=r,y)return null;var g,w={};return L(C.fixed.width)&&(w.width=C.fixed.width),L(C.fixed.height)&&(w.height=C.fixed.height),t.isValidElement(f)&&f.type.PadContent?(f.props.style&&Object.assign(v,f.props.style),L(f.props.width)&&(w.width=f.props.width),L(f.props.height)&&(w.height=f.props.height),f=t.cloneElement(f,i({},w,{style:v,ref:f.ref}))):(l&&Object.assign(w,l),f=n.createElement(U,i({},w,{style:v}),f)),n.createElement(G.Provider,{key:h,value:i({},m,{visibleRect:c,resizeContent:(g=r,function(e){S((function(t){var n;return k(t[g],e)?t:i({},t,((n={})[g]=e,n))}))})})},f)}(i({},e,{visibleRect:$(e.rect,m.visibleRect),needsRender:ee(e.rect,m.visibleRect),Item:ie}))}));return function(e,t){if(e===t)return!0;if(!e||!t)return!1;if(e.length!==t.length)return!1;for(var n=0;e.length>n;n++)if(e[n]!==t[n])return!1;return!0}(w,z)||x(z),"function"==typeof v&&v(C),n.createElement("div",y,M)}re.defaultProps={width:null,height:null,direction:"y",spacing:0,estimatedItemWidth:0,estimatedItemHeight:0,itemCount:0,renderItem:function(){return null}},re.PadContent=!0;var oe={mouseEntered:!1,loopCount:1,loopOffset:0,loopWidth:0,scrollTo:null,options:["x",!0],pad:F};function ae(e,t){switch(t.type){case"setMouseEntered":return function(e,t){return i({},e,{mouseEntered:t.value})}(e,t);case"setPad":return function(e,t){var n=i({},e,{pad:t.value});return n=le(n=function(e,t){var n,r=e.loopCount,o=e.loopOffset,a=e.options,l=a[0],c=e.pad,u=c.contentOffset,s=c.size,d=c.contentSize;if(a[1]){var f=function(e,t,n,i,r){var o;if(1===i)return[e,0];var a="y"===r?["height","y","x"]:["width","x","y"],l=a[0],c=a[1],u=a[2],s=n[l],d=t[l],f=s/i,h=.5*(s-f-d),p=0,v=d-s,y=e[c],m=0;if(p-=h,y>=(v+=h)&&p>=y)return[e,0];v>y?m=Math.floor((p-y)/f):y>p&&(m=-Math.floor((y-v)/f));return[(o={},o[c]=y+=f*m,o[u]=e[u],o),m]}(u,s,d,r,l),h=f[0],p=f[1];u!==h&&((n=n||i({},e)).loopOffset=o+p,n.scrollTo={offset:h,animated:!1})}return n||e}(n))}(e,t);case"setOptions":return function(e,t){var n=i({},e,{options:t.value});return n=le(n)}(e,t);case"setScrollTo":return function(e,t){return i({},e,{scrollTo:t.value})}(e,t);case"playNext":return function(e,t){var n=e.pad,r=function(e,t,n,i,r){var o,a="y"===r?["height","y","x"]:["width","x","y"],l=a[0],c=a[1],u=a[2],s=t[l],d=Math.min(s-n[l],0),f=e[c];i&&s>0&&(d=s*Math.ceil(d/s));f=f>d?Math.max(d,f-s):0;return(o={})[c]=f,o[u]=e[u],o}(n.contentOffset,n.size,n.contentSize,n.pagingEnabled,e.options[0]);return i({},e,{scrollTo:{offset:r,animated:!0}})}(e);default:return e}}function le(e,t){var n=e.options,r=e.pad;return i({},e,{},function(e,t,n,i,r){var o="y"===r?"height":"width",a=e[o],l=t[o],c=l/n;if(!i||0===l||0===a)return{loopCount:1,loopOffset:0,loopWidth:c};return{loopCount:2+Math.floor(a/c),loopWidth:c}}(r.size,r.contentSize,e.loopCount,n[1],n[0]))}var ce=i({direction:"x",loop:!0,autoplayEnabled:!0,autoplayInterval:5e3},Z.defaultProps,{pagingEnabled:!0,directionalLockEnabled:!0});function ue(e){var i=e.direction,o=e.loop,a=e.autoplayEnabled,l=e.autoplayInterval,c=e.children,u=r(e,["direction","loop","autoplayEnabled","autoplayInterval","children"]),s=u.scrollTo,d=u.onMouseEnter,f=u.onMouseLeave,h=t.useReducer(ae,oe),p=h[0],v=h[1],y=p.mouseEntered,m=p.loopCount,g=p.loopOffset,w=p.scrollTo,x=p.pad,b=t.useCallback((function(e){v({type:"setMouseEntered",value:!0}),d&&d(e)}),[d]),E=t.useCallback((function(e){v({type:"setMouseEntered",value:!1}),f&&f(e)}),[f]);return t.useEffect((function(){if(a&&!y&&!x.drag&&!x.deceleration){var e=setTimeout((function(){v({type:"playNext"})}),l);return function(){clearTimeout(e)}}}),[a,l,y,x.drag,x.deceleration]),t.useMemo((function(){v({type:"setOptions",value:[i,o]})}),[o,i]),t.useMemo((function(){v({type:"setScrollTo",value:s})}),[s]),u.scrollTo=w,"x"===i?u.alwaysBounceY=!1:u.alwaysBounceX=!1,a&&(u.onMouseEnter=b,u.onMouseLeave=E),n.createElement(Z,u,(function(e){x!==e&&v({type:"setPad",value:e});var t="function"==typeof c?c(p):c;return n.createElement(re,{direction:i,itemCount:m,renderItem:function(e){return n.createElement(e.Item,{key:e.itemIndex+g,hash:"Player_loop"},t)}})}))}var se={activeIndex:0,itemCount:0,scrollTo:null,player:oe};function de(e,t){switch(t.type){case"setPlayer":return function(e,t){var n=t.value,r=n.options[0],o=n.pad,a=o.contentOffset,l=o.size,c=o.contentSize,u=function(e,t,n){var i=e["y"===n?"height":"width"],r=0;i>0&&(r=Math.ceil(t/i));return r}(l,n.loopWidth,r),s=0;if(u>0){var d=function(e,t,n,i){var r="y"===i?["height","y"]:["width","x"],o=r[0],a=r[1],l=t[o],c=0;if(l>0){c=Math.round(-Math.max(Math.min(l-n[o],0),Math.min(e[a],0))/l)}return c}(a,l,c,r);s=d%u}return i({},e,{player:n,itemCount:u,activeIndex:s})}(e,t);case"setScrollTo":return function(e,t){return i({},e,{scrollTo:t.value})}(e,t);case"scrollToIndex":return function(e,t){var n=e.activeIndex,r=e.player.options[0],o=e.player.pad,a=o.contentOffset,l=o.size,c=t.animated,u=t.index;if(0===e.itemCount)return e;"function"==typeof u&&(u=u(e));if(u===n)return e;var s=function(e,t,n,i){var r,o="y"===i?["height","y","x"]:["width","x","y"],a=o[1],l=o[2];return(r={})[a]=t[a]-e*n[o[0]],r[l]=t[l],r}(u-n,a,l,r);return i({},e,{scrollTo:{offset:s,animated:c}})}(e,t);default:return e}}var fe=i({itemCount:0,renderItem:function(){return null},onActiveIndexChange:function(){},scrollToIndex:null},ue.defaultProps=ce);function he(e){var o=e.itemCount,a=e.renderItem,u=e.onActiveIndexChange,s=e.scrollToIndex,d=e.children,f=r(e,["itemCount","renderItem","onActiveIndexChange","scrollToIndex","children"]),h=f.width,p=f.height,v=f.direction,y=f.scrollTo,m=f.renderOverlay,g=t.useReducer(de,se),w=g[0],x=g[1],b=c(w),E=w.activeIndex,S=w.scrollTo,C=w.player,I={activeIndex:E,itemCount:w.itemCount},z=b.current;return l((function(){z.activeIndex!==E&&u(I)})),t.useMemo((function(){x({type:"setScrollTo",value:y})}),[y]),t.useMemo((function(){s&&x(i({type:"scrollToIndex"},s))}),[s]),f.scrollTo=S,f.renderOverlay=function(e){var i="function"==typeof d?d(w):d;return n.createElement(t.Fragment,null,m(e),i)},n.createElement(ue,f,(function(e){return C!==e&&x({type:"setPlayer",value:e}),n.createElement(ne,{width:h,height:p,itemWidth:h,itemHeight:p,direction:v,itemCount:o,renderItem:a})}))}he.defaultProps=fe;var pe={scrollToRect:null,scrolling:!1,pad:F};function ve(e,t){switch(t.type){case"setPad":return function(e,t){return i({},e,{pad:t.value})}(e,t);case"setScrollToRect":return function(e,t){return i({},e,{scrollToRect:t.value})}(e,t);case"scrollToIndex":return function(e,t){var n=t.list,r=t.index,o=void 0===r?0:r,a=n.box,l=n.body,c={x:0,y:0,width:0,height:0};a&&(c=a.layoutList[1].rect);if(l){var u=l.layoutList[o];u&&(c={x:c.x+u.rect.x,y:c.y+u.rect.y,width:u.rect.width,height:u.rect.height})}return i({},e,{scrollToRect:{rect:c,align:t.align,animated:t.animated},scrolling:!0})}(e,t);case"endScrolling":return function(e,t){return i({},e,{scrolling:!1})}(e);default:return e}}var ye=i({direction:"y",spacing:0,itemCount:0,estimatedItemWidth:0,estimatedItemHeight:0,renderItem:function(){return null},renderHeader:function(){return null},renderFooter:function(){return null},scrollToIndex:null},Z.defaultProps,{directionalLockEnabled:!0});function me(e){var o=e.direction,a=e.spacing,u=e.itemCount,s=e.estimatedItemWidth,d=e.estimatedItemHeight,f=e.renderItem,h=e.renderHeader,p=e.renderFooter,v=e.scrollToIndex,y=e.children,m=r(e,["direction","spacing","itemCount","estimatedItemWidth","estimatedItemHeight","renderItem","renderHeader","renderFooter","scrollToIndex","children"]),g=m.width,w=m.height,x=m.scrollToRect,b=t.useReducer(ve,pe),E=b[0],S=b[1],C=c(E),I=t.useRef({}),z=E.scrollToRect,T=E.scrolling,M=E.pad,O=C.current;return l((function(){O.pad.contentSize!==M.contentSize&&T&&v&&S(i({type:"scrollToIndex"},v,{list:I.current}))})),t.useEffect((function(){O.pad.deceleration!==M.deceleration&&!M.deceleration&&T&&S({type:"endScrolling"})})),t.useMemo((function(){S({type:"setScrollToRect",value:x})}),[x]),t.useMemo((function(){v&&S(i({type:"scrollToIndex"},v,{list:I.current}))}),[v]),m.scrollToRect=z,"x"===o?m.alwaysBounceY=!1:m.alwaysBounceX=!1,"function"==typeof y&&y(E),n.createElement(Z,m,(function(e){M!==e&&S({type:"setPad",value:e});var t={width:g,height:w,direction:o,itemCount:3,renderItem:function(e){var t=e.itemIndex,i=e.Item;return 0===t?h(e):2===t?p(e):n.createElement(i,{hash:"Infinite_body",forceRender:!0},n.createElement(re,{width:g,height:w,direction:o,spacing:a,itemCount:u,estimatedItemWidth:s,estimatedItemHeight:d,renderItem:f},(function(e){I.current.body=e})))}};return n.createElement(re,t,(function(e){I.current.box=e}))}))}me.defaultProps=ye,e.AutoResizing=P,e.Carousel=he,e.GeneralContent=K,e.GridContent=ne,e.Infinite=me,e.ItemContent=U,e.ListContent=re,e.Pad=Z,e.PadContext=G,e.Pannable=f,e.Player=ue,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e=e||self).ReactPannable={},e.React)}(this,(function(e,t){"use strict";var n="default"in t?t.default:t;function i(){return(i=Object.assign||function(e){for(var t=1;arguments.length>t;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e}).apply(this,arguments)}function r(e,t){if(null==e)return{};var n,i,r={},o=Object.keys(e);for(i=0;o.length>i;i++)0>t.indexOf(n=o[i])&&(r[n]=e[n]);return r}var o={target:null,startPoint:null,movePoint:null,moveTime:null,translation:null,velocity:null,interval:null};function a(e,t){switch(t.type){case"disable":case"end":return function(e,t){if(!e.target)return e;return o}(e);case"track":return function(e,t){return{target:t.target,startPoint:t.point,movePoint:t.point,moveTime:t.now,translation:null,velocity:null,interval:null}}(0,t);case"move":return function(e,t){var n=e.target,i=e.startPoint,r=e.movePoint,o=e.moveTime,a=e.translation,l=t.point,c=t.now,u=t.shouldStart;if(!n)return e;var s=c-o,d={x:l.x-i.x,y:l.y-i.y},f={x:(l.x-r.x)/s,y:(l.y-r.y)/s};if(a)return{target:n,startPoint:i,movePoint:l,moveTime:c,translation:d,velocity:f,interval:s};if(0>=Math.sqrt(Math.pow(d.x,2)+Math.pow(d.y,2))||!u({target:n,translation:d,velocity:f,interval:s}))return{target:n,startPoint:i,movePoint:l,moveTime:c,translation:null,velocity:null,interval:null};return{target:n,startPoint:l,movePoint:l,moveTime:c,translation:{x:0,y:0},velocity:f,interval:s}}(e,t);default:return e}}var l="undefined"!=typeof window?t.useLayoutEffect:t.useEffect;function c(e){var n=t.useRef(e);return t.useEffect((function(){n.current=e}),[e]),n}var u={create:function(e){var t=e.transformTranslate,n=e.userSelect,i=r(e,["transformTranslate","userSelect"]);return t&&function(e,t){t.transform="translate3d("+e.x+"px, "+e.y+"px, 0)",t.WebkitTransform="translate3d("+e.x+"px, "+e.y+"px, 0)",t.msTransform="translate("+e.x+"px, "+e.y+"px)"}(t,i),n&&function(e,t){t.userSelect=e,t.WebkitUserSelect=e,t.msUserSelect=e}(n,i),i}},s=function(){},d=function(){};void 0!==typeof window&&(s=function(e){if(e&&e.addEventListener){for(var t=arguments.length,n=Array(t>1?t-1:0),i=1;t>i;i++)n[i-1]=arguments[i];return e.addEventListener.apply(e,n)}},d=function(e){if(e&&e.removeEventListener){for(var t=arguments.length,n=Array(t>1?t-1:0),i=1;t>i;i++)n[i-1]=arguments[i];return e.removeEventListener.apply(e,n)}});function f(e){var f=e.enabled,h=e.shouldStart,p=e.onStateChange,m=e.onStart,g=e.onMove,v=e.onEnd,y=e.onCancel,b=e.children,w=r(e,["enabled","shouldStart","onStateChange","onStart","onMove","onEnd","onCancel","children"]),x=t.useReducer(a,o),S=x[0],E=x[1],C=c(S).current,z=t.useRef(null),I=t.useRef({});I.current.state=S,I.current.shouldStart=h;var T=void 0===typeof window||"ontouchstart"in document,O=t.useCallback((function(e,t){E({type:"track",target:e,point:t,now:(new Date).getTime()})}),[]),M=t.useCallback((function(e){E({type:"move",point:e,now:(new Date).getTime(),shouldStart:I.current.shouldStart})}),[]),k=t.useCallback((function(){E({type:"end"})}),[]);l((function(){if(f){var e=function(e){I.current.state.translation&&e.preventDefault()};if(S.target){if(T){var t=function(t){e(t);var n=t.touches[0];M({x:n.pageX,y:n.pageY})},n=function(t){e(t),k()};return s(S.target,"touchmove",t,!1),s(S.target,"touchend",n,!1),s(S.target,"touchcancel",n,!1),function(){d(S.target,"touchmove",t,!1),d(S.target,"touchend",n,!1),d(S.target,"touchcancel",n,!1)}}var i=function(t){e(t),1===t.buttons?M({x:t.pageX,y:t.pageY}):k()},r=function(t){e(t),k()},o=void 0!==typeof document?document.body:null;return s(o,"mousemove",i,!1),s(o,"mouseup",r,!1),function(){d(o,"mousemove",i,!1),d(o,"mouseup",r,!1)}}var a=z.current;if(T){var l=function(e){if(e.touches&&1===e.touches.length){var t=e.touches[0];O(t.target,{x:t.pageX,y:t.pageY})}};return s(a,"touchstart",l,!1),function(){d(a,"touchstart",l,!1)}}var c=function(e){1===e.buttons&&O(e.target,{x:e.pageX,y:e.pageY})};return s(a,"mousedown",c,!1),function(){d(a,"mousedown",c,!1)}}}),[f,S.target,O,M,k]),l((function(){C!==S&&p(S),C.translation!==S.translation&&(S.translation?C.translation?g(S):m(S):C.translation&&(f?v(C):y(C)))})),t.useMemo((function(){f||E({type:"disable"})}),[f]);var R={};S.translation&&Object.assign(R,u.create({touchAction:"none",pointerEvents:"none",userSelect:"none"})),w.style&&Object.assign(R,w.style),w.style=R;var P="function"==typeof b?b(S):b;return n.createElement("div",i({},w,{ref:z}),P)}function h(e,t){return e(t={exports:{}},t.exports),t.exports}f.defaultProps={enabled:!0,shouldStart:function(){return!0},onStateChange:function(){},onStart:function(){},onMove:function(){},onEnd:function(){},onCancel:function(){}};var p=h((function(e){(e.exports={}).forEach=function(e,t){for(var n=0;e.length>n;n++){var i=t(e[n]);if(i)return i}}})),m=h((function(e){var t=e.exports={};t.isIE=function(e){return(-1!==(t=navigator.userAgent.toLowerCase()).indexOf("msie")||-1!==t.indexOf("trident")||-1!==t.indexOf(" edge/"))&&(!e||e===function(){var e=3,t=document.createElement("div"),n=t.getElementsByTagName("i");do{t.innerHTML="\x3c!--[if gt IE "+ ++e+"]><i></i><![endif]--\x3e"}while(n[0]);return e>4?e:void 0}());var t},t.isLegacyOpera=function(){return!!window.opera}})),g=h((function(e){(e.exports={}).getOption=function(e,t,n){var i=e[t];if(null==i&&void 0!==n)return n;return i}})),v=function(e){var t=(e=e||{}).reporter,n=g.getOption(e,"async",!0),i=g.getOption(e,"auto",!0);i&&!n&&(t&&t.warn("Invalid options combination. auto=true and async=false is invalid. Setting async=true."),n=!0);var r,o=y(),a=!1;function l(){for(a=!0;o.size();){var e=o;o=y(),e.process()}a=!1}function c(){r=setTimeout(l,0)}return{add:function(e,t){!a&&i&&n&&0===o.size()&&c(),o.add(e,t)},force:function(e){a||(void 0===e&&(e=n),r&&(clearTimeout(r),r=null),e?c():l())}}};function y(){var e={},t=0,n=0,i=0;return{add:function(r,o){o||(o=r,r=0),r>n?n=r:i>r&&(i=r),e[r]||(e[r]=[]),e[r].push(o),t++},process:function(){for(var t=i;n>=t;t++)for(var r=e[t],o=0;r.length>o;o++){(0,r[o])()}},size:function(){return t}}}function b(e){return e._erd}var w={initState:function(e){return e._erd={},b(e)},getState:b,cleanState:function(e){delete e._erd}},x=p.forEach,S=function(e){var t=(e=e||{}).reporter,n=e.batchProcessor,i=e.stateHandler.getState,r=e.idHandler;if(!n)throw Error("Missing required dependency: batchProcessor");if(!t)throw Error("Missing required dependency: reporter.");var o=function(){var e=document.createElement("div");e.style.cssText=l(["position: absolute","width: 1000px","height: 1000px","visibility: hidden","margin: 0","padding: 0"]);var t=document.createElement("div");t.style.cssText=l(["position: absolute","width: 500px","height: 500px","overflow: scroll","visibility: none","top: -1500px","left: -1500px","visibility: hidden","margin: 0","padding: 0"]),t.appendChild(e),document.body.insertBefore(t,document.body.firstChild);var n=500-t.clientWidth,i=500-t.clientHeight;return document.body.removeChild(t),{width:n,height:i}}();function a(e){!function(e,t,n){if(!e.getElementById(t)){var i=n+"_animation",r=n+"_animation_active",o="/* Created by the element-resize-detector library. */\n";o+="."+n+" > div::-webkit-scrollbar { "+l(["display: none"])+" }\n\n",o+="."+r+" { "+l(["-webkit-animation-duration: 0.1s","animation-duration: 0.1s","-webkit-animation-name: "+i,"animation-name: "+i])+" }\n",o+="@-webkit-keyframes "+i+" { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }\n",function(n,i){i=i||function(t){e.head.appendChild(t)};var r=e.createElement("style");r.innerHTML=n,r.id=t,i(r)}(o+="@keyframes "+i+" { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }")}}(e,"erd_scroll_detection_scrollbar_style","erd_scroll_detection_container")}function l(t){var n=e.important?" !important; ":"; ";return(t.join(n)+n).trim()}function c(e,n,i){if(e.addEventListener)e.addEventListener(n,i);else{if(!e.attachEvent)return t.error("[scroll] Don't know how to add event listeners.");e.attachEvent("on"+n,i)}}function u(e,n,i){if(e.removeEventListener)e.removeEventListener(n,i);else{if(!e.detachEvent)return t.error("[scroll] Don't know how to remove event listeners.");e.detachEvent("on"+n,i)}}function s(e){return i(e).container.childNodes[0].childNodes[0].childNodes[0]}function d(e){return i(e).container.childNodes[0].childNodes[0].childNodes[1]}return a(window.document),{makeDetectable:function(e,a,u){function f(){if(e.debug){var n=Array.prototype.slice.call(arguments);if(n.unshift(r.get(a),"Scroll: "),t.log.apply)t.log.apply(null,n);else for(var i=0;n.length>i;i++)t.log(n[i])}}function h(e){var t=i(e).container.childNodes[0],n=window.getComputedStyle(t);return!n.width||-1===n.width.indexOf("px")}function p(){var e=window.getComputedStyle(a),t={};return t.position=e.position,t.width=a.offsetWidth,t.height=a.offsetHeight,t.top=e.top,t.right=e.right,t.bottom=e.bottom,t.left=e.left,t.widthCSS=e.width,t.heightCSS=e.height,t}function m(){if(f("storeStyle invoked."),i(a)){var e=p();i(a).style=e}else f("Aborting because element has been uninstalled")}function g(e,t,n){i(e).lastWidth=t,i(e).lastHeight=n}function v(){return 2*o.width+1}function y(){return 2*o.height+1}function b(e){return e+10+v()}function w(e){return e+10+y()}function S(e,t,n){var i=s(e),r=d(e),o=b(t),a=w(n),l=function(e){return 2*e+v()}(t),c=function(e){return 2*e+y()}(n);i.scrollLeft=o,i.scrollTop=a,r.scrollLeft=l,r.scrollTop=c}function E(){var e=i(a).container;if(!e){(e=document.createElement("div")).className="erd_scroll_detection_container",e.style.cssText=l(["visibility: hidden","display: inline","width: 0px","height: 0px","z-index: -1","overflow: hidden","margin: 0","padding: 0"]),i(a).container=e,function(e){e.className+=" erd_scroll_detection_container_animation_active"}(e),a.appendChild(e);var t=function(){i(a).onRendered&&i(a).onRendered()};c(e,"animationstart",t),i(a).onAnimationStart=t}return e}function C(){if(f("Injecting elements"),i(a)){!function(){var n=i(a).style;if("static"===n.position){a.style.setProperty("position","relative",e.important?"important":"");var r=function(e,t,n,i){var r=n[i];"auto"!==r&&"0"!==function(e){return e.replace(/[^-\d\.]/g,"")}(r)&&(e.warn("An element that is positioned static has style."+i+"="+r+" which is ignored due to the static positioning. The element will need to be positioned relative, so the style."+i+" will be set to 0. Element: ",t),t.style[i]=0)};r(t,a,n,"top"),r(t,a,n,"right"),r(t,a,n,"bottom"),r(t,a,n,"left")}}();var n=i(a).container;n||(n=E());var r,u,s,d,h=o.width,p=o.height,m=l(["position: absolute","flex: none","overflow: hidden","z-index: -1","visibility: hidden","width: 100%","height: 100%","left: 0px","top: 0px"]),g=l(["position: absolute","flex: none","overflow: hidden","z-index: -1","visibility: hidden"].concat(["left: "+(r=(r=-(1+h))?r+"px":"0"),"top: "+(u=(u=-(1+p))?u+"px":"0"),"right: "+(d=(d=-h)?d+"px":"0"),"bottom: "+(s=(s=-p)?s+"px":"0")])),v=l(["position: absolute","flex: none","overflow: scroll","z-index: -1","visibility: hidden","width: 100%","height: 100%"]),y=l(["position: absolute","flex: none","overflow: scroll","z-index: -1","visibility: hidden","width: 100%","height: 100%"]),b=l(["position: absolute","left: 0","top: 0"]),w=l(["position: absolute","width: 200%","height: 200%"]),x=document.createElement("div"),S=document.createElement("div"),C=document.createElement("div"),z=document.createElement("div"),I=document.createElement("div"),T=document.createElement("div");x.dir="ltr",x.style.cssText=m,x.className="erd_scroll_detection_container",S.className="erd_scroll_detection_container",S.style.cssText=g,C.style.cssText=v,z.style.cssText=b,I.style.cssText=y,T.style.cssText=w,C.appendChild(z),I.appendChild(T),S.appendChild(C),S.appendChild(I),x.appendChild(S),n.appendChild(x),c(C,"scroll",O),c(I,"scroll",M),i(a).onExpandScroll=O,i(a).onShrinkScroll=M}else f("Aborting because element has been uninstalled");function O(){i(a).onExpand&&i(a).onExpand()}function M(){i(a).onShrink&&i(a).onShrink()}}function z(){function o(t,n,i){var r=function(e){return s(e).childNodes[0]}(t),o=b(n),a=w(i);r.style.setProperty("width",o+"px",e.important?"important":""),r.style.setProperty("height",a+"px",e.important?"important":"")}function l(l){var u=a.offsetWidth,s=a.offsetHeight,d=u!==i(a).lastWidth||s!==i(a).lastHeight;f("Storing current size",u,s),g(a,u,s),n.add(0,(function(){if(d)if(i(a))if(c()){if(e.debug)a.offsetWidth===u&&a.offsetHeight===s||t.warn(r.get(a),"Scroll: Size changed before updating detector elements.");o(a,u,s)}else f("Aborting because element container has not been initialized");else f("Aborting because element has been uninstalled")})),n.add(1,(function(){i(a)?c()?S(a,u,s):f("Aborting because element container has not been initialized"):f("Aborting because element has been uninstalled")})),d&&l&&n.add(2,(function(){i(a)?c()?l():f("Aborting because element container has not been initialized"):f("Aborting because element has been uninstalled")}))}function c(){return!!i(a).container}function u(){f("notifyListenersIfNeeded invoked");var e=i(a);return void 0===i(a).lastNotifiedWidth&&e.lastWidth===e.startSize.width&&e.lastHeight===e.startSize.height?f("Not notifying: Size is the same as the start size, and there has been no notification yet."):e.lastWidth===e.lastNotifiedWidth&&e.lastHeight===e.lastNotifiedHeight?f("Not notifying: Size already notified"):(f("Current size not notified, notifying..."),e.lastNotifiedWidth=e.lastWidth,e.lastNotifiedHeight=e.lastHeight,void x(i(a).listeners,(function(e){e(a)})))}function p(){f("Scroll detected."),h(a)?f("Scroll event fired while unrendered. Ignoring..."):l(u)}if(f("registerListenersAndPositionElements invoked."),i(a)){i(a).onRendered=function(){if(f("startanimation triggered."),h(a))f("Ignoring since element is still unrendered...");else{f("Element rendered.");var e=s(a),t=d(a);0!==e.scrollLeft&&0!==e.scrollTop&&0!==t.scrollLeft&&0!==t.scrollTop||(f("Scrollbars out of sync. Updating detector elements..."),l(u))}},i(a).onExpand=p,i(a).onShrink=p;var m=i(a).style;o(a,m.width,m.height)}else f("Aborting because element has been uninstalled")}function I(){if(f("finalizeDomMutation invoked."),i(a)){var e=i(a).style;g(a,e.width,e.height),S(a,e.width,e.height)}else f("Aborting because element has been uninstalled")}function T(){u(a)}function O(){var e;f("Installing..."),i(a).listeners=[],e=p(),i(a).startSize={width:e.width,height:e.height},f("Element start size",i(a).startSize),n.add(0,m),n.add(1,C),n.add(2,z),n.add(3,I),n.add(4,T)}u||(u=a,a=e,e=null),e=e||{},f("Making detectable..."),!function(e){return!function(e){return e===e.ownerDocument.body||e.ownerDocument.body.contains(e)}(e)||null===window.getComputedStyle(e)}(a)?O():(f("Element is detached"),E(),f("Waiting until element is attached..."),i(a).onRendered=function(){f("Element is now attached"),O()})},addListener:function(e,t){if(!i(e).listeners.push)throw Error("Cannot add listener to an element that is not detectable.");i(e).listeners.push(t)},uninstall:function(e){var t=i(e);t&&(t.onExpandScroll&&u(s(e),"scroll",t.onExpandScroll),t.onShrinkScroll&&u(d(e),"scroll",t.onShrinkScroll),t.onAnimationStart&&u(t.container,"animationstart",t.onAnimationStart),t.container&&e.removeChild(t.container))},initDocument:a}},E=p.forEach;function C(e){return Array.isArray(e)||void 0!==e.length}function z(e){if(Array.isArray(e))return e;var t=[];return E(e,(function(e){t.push(e)})),t}function I(e){return e&&1===e.nodeType}function T(e,t,n){var i=e[t];return null==i&&void 0!==n?n:i}var O=null;"undefined"!=typeof window&&(O=function(e){var t,n;if((e=e||{}).idHandler)t={get:function(t){return e.idHandler.get(t,!0)},set:e.idHandler.set};else{var i=function(e){var t=e.idGenerator,n=e.stateHandler.getState;return{get:function(e){var t=n(e);return t&&void 0!==t.id?t.id:null},set:function(e){var i=n(e);if(!i)throw Error("setId required the element to have a resize detection state.");var r=t.generate();return i.id=r,r}}}({idGenerator:(n=1,{generate:function(){return n++}}),stateHandler:w});t=i}var r=e.reporter;r||(r=function(e){function t(){}var n={log:t,warn:t,error:t};if(!e&&window.console){var i=function(e,t){e[t]=function(){var e=console[t];if(e.apply)e.apply(console,arguments);else for(var n=0;arguments.length>n;n++)e(arguments[n])}};i(n,"log"),i(n,"warn"),i(n,"error")}return n}(!1===r));var o=T(e,"batchProcessor",v({reporter:r})),a={};a.callOnAdd=!!T(e,"callOnAdd",!0),a.debug=!!T(e,"debug",!1);var l,c=function(e){var t={};function n(n){var i=e.get(n);return void 0===i?[]:t[i]||[]}return{get:n,add:function(n,i){var r=e.get(n);t[r]||(t[r]=[]),t[r].push(i)},removeListener:function(e,t){for(var i=n(e),r=0,o=i.length;o>r;++r)if(i[r]===t){i.splice(r,1);break}},removeAllListeners:function(e){var t=n(e);t&&(t.length=0)}}}(t),u=function(e){var t=e.stateHandler.getState;return{isDetectable:function(e){var n=t(e);return n&&!!n.isDetectable},markAsDetectable:function(e){t(e).isDetectable=!0},isBusy:function(e){return!!t(e).busy},markBusy:function(e,n){t(e).busy=!!n}}}({stateHandler:w}),s=T(e,"strategy","object"),d=T(e,"important",!1),f={reporter:r,batchProcessor:o,stateHandler:w,idHandler:t,important:d};if("scroll"===s&&(m.isLegacyOpera()?(r.warn("Scroll strategy is not supported on legacy Opera. Changing to object strategy."),s="object"):m.isIE(9)&&(r.warn("Scroll strategy is not supported on IE9. Changing to object strategy."),s="object")),"scroll"===s)l=S(f);else{if("object"!==s)throw Error("Invalid strategy name: "+s);l=function(e){var t=(e=e||{}).reporter,n=e.batchProcessor,i=e.stateHandler.getState;if(!t)throw Error("Missing required dependency: reporter.");function r(t){var n=e.important?" !important; ":"; ";return(t.join(n)+n).trim()}function o(e){return i(e).object}return{makeDetectable:function(e,o,a){a||(a=o,o=e,e=null),e=e||{},m.isIE(8)?a(o):function(o,a){var l=r(["display: block","position: absolute","top: 0","left: 0","width: 100%","height: 100%","border: none","padding: 0","margin: 0","opacity: 0","z-index: -1000","pointer-events: none"]),c=!1,u=window.getComputedStyle(o),s=o.offsetWidth,d=o.offsetHeight;function f(){function n(){if("static"===u.position){o.style.setProperty("position","relative",e.important?"important":"");var n=function(t,n,i,r){var o=i[r];"auto"!==o&&"0"!==function(e){return e.replace(/[^-\d\.]/g,"")}(o)&&(t.warn("An element that is positioned static has style."+r+"="+o+" which is ignored due to the static positioning. The element will need to be positioned relative, so the style."+r+" will be set to 0. Element: ",n),n.style.setProperty(r,"0",e.important?"important":""))};n(t,o,u,"top"),n(t,o,u,"right"),n(t,o,u,"bottom"),n(t,o,u,"left")}}""!==u.position&&(n(),c=!0);var r=document.createElement("object");r.style.cssText=l,r.tabIndex=-1,r.type="text/html",r.setAttribute("aria-hidden","true"),r.onload=function(){c||n(),function e(t,n){if(!t.contentDocument){var r=i(t);return r.checkForObjectDocumentTimeoutId&&window.clearTimeout(r.checkForObjectDocumentTimeoutId),void(r.checkForObjectDocumentTimeoutId=setTimeout((function(){r.checkForObjectDocumentTimeoutId=0,e(t,n)}),100))}n(t.contentDocument)}(this,(function(e){a(o)}))},m.isIE()||(r.data="about:blank"),i(o)&&(o.appendChild(r),i(o).object=r,m.isIE()&&(r.data="about:blank"))}i(o).startSize={width:s,height:d},n?n.add(f):f()}(o,a)},addListener:function(e,t){function n(){t(e)}if(m.isIE(8))i(e).object={proxy:n},e.attachEvent("onresize",n);else{var r=o(e);if(!r)throw Error("Element is not detectable by this strategy.");r.contentDocument.defaultView.addEventListener("resize",n)}},uninstall:function(e){if(i(e)){var t=o(e);t&&(m.isIE(8)?e.detachEvent("onresize",t.proxy):e.removeChild(t),i(e).checkForObjectDocumentTimeoutId&&window.clearTimeout(i(e).checkForObjectDocumentTimeoutId),delete i(e).object)}}}}(f)}var h={};return{listenTo:function(e,n,i){function o(e){var t=c.get(e);E(t,(function(t){t(e)}))}function s(e,t,n){c.add(t,n),e&&n(t)}if(i||(i=n,n=e,e={}),!n)throw Error("At least one element required.");if(!i)throw Error("Listener required.");if(I(n))n=[n];else{if(!C(n))return r.error("Invalid arguments. Must be a DOM element or a collection of DOM elements.");n=z(n)}var f=0,p=T(e,"callOnAdd",a.callOnAdd),m=T(e,"onReady",(function(){})),g=T(e,"debug",a.debug);E(n,(function(e){w.getState(e)||(w.initState(e),t.set(e));var a=t.get(e);if(g&&r.log("Attaching listener to element",a,e),!u.isDetectable(e))return g&&r.log(a,"Not detectable."),u.isBusy(e)?(g&&r.log(a,"System busy making it detectable"),s(p,e,i),h[a]=h[a]||[],void h[a].push((function(){++f===n.length&&m()}))):(g&&r.log(a,"Making detectable..."),u.markBusy(e,!0),l.makeDetectable({debug:g,important:d},e,(function(e){if(g&&r.log(a,"onElementDetectable"),w.getState(e)){u.markAsDetectable(e),u.markBusy(e,!1),l.addListener(e,o),s(p,e,i);var t=w.getState(e);if(t&&t.startSize)t.startSize.width===e.offsetWidth&&t.startSize.height===e.offsetHeight||o(e);h[a]&&E(h[a],(function(e){e()}))}else g&&r.log(a,"Element uninstalled before being detectable.");delete h[a],++f===n.length&&m()})));g&&r.log(a,"Already detecable, adding listener."),s(p,e,i),f++})),f===n.length&&m()},removeListener:c.removeListener,removeAllListeners:c.removeAllListeners,uninstall:function(e){if(!e)return r.error("At least one element is required.");if(I(e))e=[e];else{if(!C(e))return r.error("Invalid arguments. Must be a DOM element or a collection of DOM elements.");e=z(e)}E(e,(function(e){c.removeAllListeners(e),l.uninstall(e),w.cleanState(e)}))},initDocument:function(e){l.initDocument&&l.initDocument(e)}}}({strategy:"scroll"}));var M=O;function k(e){var t=0,n=0;if("undefined"!=typeof window&&(t=e.offsetWidth,n=e.offsetHeight,window.getComputedStyle)){var i=window.getComputedStyle(e)||{};i.paddingLeft&&(t-=parseInt(i.paddingLeft,10)),i.paddingRight&&(t-=parseInt(i.paddingRight,10)),i.borderLeftWidth&&(t-=parseInt(i.borderLeftWidth,10)),i.borderRightWidth&&(t-=parseInt(i.borderRightWidth,10)),i.paddingTop&&(n-=parseInt(i.paddingTop,10)),i.paddingBottom&&(n-=parseInt(i.paddingBottom,10)),i.borderTopWidth&&(n-=parseInt(i.borderTopWidth,10)),i.borderBottomWidth&&(n-=parseInt(i.borderBottomWidth,10))}return{width:t,height:n}}function R(e,t){return e===t||!(!e||!t)&&(e.width===t.width&&e.height===t.height)}function P(e){return!isNaN(parseFloat(e))&&isFinite(e)}function L(e){var o=e.width,a=e.height,u=e.onResize,s=e.children,d=r(e,["width","height","onResize","children"]),f=t.useState(null),h=f[0],p=f[1],m=c(h),g=t.useRef(null),v=m.current,y=t.useCallback((function(){var e=k(g.current);p((function(t){return R(t,e)?t:e}))}),[]);l((function(){v!==h&&h&&u(h),h||y()})),l((function(){if((!P(o)||!P(a))&&M){var e=g.current;return M.listenTo(e,(function(){return y()})),function(){return M.uninstall(e)}}}),[o,a]),t.useMemo((function(){var e=null;P(o)&&P(a)&&(e={width:o,height:a}),p((function(t){return R(t,e)?t:e}))}),[o,a]);var b=null;h&&(b="function"==typeof s?s(h):s);var w={width:P(o)?o:"100%",height:P(a)?a:"100%"};return d.style&&Object.assign(w,d.style),d.style=w,n.createElement("div",i({},d,{ref:g}),b)}L.defaultProps={width:null,height:null,onResize:function(){}};var D=function(){},A=function(){};if("undefined"!=typeof window){D=window.requestAnimationFrame,A=window.cancelAnimationFrame;for(var H=["ms","moz","webkit","o"],W=0,j=0;4>j&&!D;++j)D=window[H[j]+"RequestAnimationFrame"],A=window[H[j]+"CancelAnimationFrame"]||window[H[j]+"CancelRequestAnimationFrame"];D||(D=function(e){var t=(new Date).getTime(),n=Math.max(0,16-(t-W)),i=window.setTimeout((function(){e(t+n)}),n);return W=t+n,i},A=function(e){clearTimeout(e)})}function _(e,t){var n=t.x,i=t.y,r=Math.sqrt(n*n+i*i);return 0===r?{x:0,y:0}:{x:e*(n/r),y:e*(i/r)}}function N(e,t,n,i){if(i){var r="y"===i?["y","height"]:["x","width"],o=r[0];if(!e[o])return 0;var a=0>e[o]?-1:1;return a*Math.min(a*e[o],Math.sqrt(2*(.5*t[r[1]])*a*n[o]))}"object"!=typeof n&&(n=_(n,e));var l={x:N(e,t,n,"x"),y:N(e,t,n,"y")};return l.x===e.x&&l.y===e.y?e:l}function B(e,t,n,i,r,o){if(o){var a="y"===o?["y","height"]:["x","width"],l=a[0],c=a[1],u=t[c],s=Math.min(u-n[c],0),d=e[l];return i&&u>0&&(s=u*Math.ceil(s/u)),d>0?d=0:s>d?d=s:!r&&i&&u>0&&(d=u*Math.round(d/u)),d}var f={x:B(e,t,n,i,r,"x"),y:B(e,t,n,i,r,"y")};return f.x===e.x&&f.y===e.y?e:f}function V(e,t,n,i,r,o){if(o){var a="y"===o?["y","height"]:["x","width"],l=a[0],c=a[1],u=e[l];if(i&&n[c]>0){var s=u/n[c];u=n[c]*(s=t[l]>.5?Math.ceil(s):-.5>t[l]?Math.floor(s):Math.round(s))}else r[l]&&(u+=.5*t[l]*(t[l]/r[l]));return u}return"object"!=typeof r&&(r=_(r,t)),{x:V(e,t,n,i,r,"x"),y:V(e,t,n,i,r,"y")}}function q(e,t,n,i){var r=(new Date).getTime(),o=0;if(!t)return{endOffset:e,rate:t,duration:o,startTime:r};var a,l={x:e.x-n.x,y:e.y-n.y},c=Math.sqrt(Math.pow(l.x,2)+Math.pow(l.y,2));if(c){var u=Math.sqrt(.5*Math.pow(a=(i.x*l.x+i.y*l.y)/c,2)+t*c),s=(u-a)/t;0>s&&(u=a,s=0),o=s+u/t}else a=Math.sqrt(Math.pow(i.x,2)+Math.pow(i.y,2)),o=(Math.sqrt(2)+1)*a/t;return{endOffset:e,rate:t,duration:o,startTime:r,points:{x:[n.x,n.x+i.x*(o/3),e.x,e.x],y:[n.y,n.y+i.y*(o/3),e.y,e.y]}}}var F={size:{width:0,height:0},contentSize:{width:0,height:0},contentOffset:{x:0,y:0},contentVelocity:{x:0,y:0},drag:null,deceleration:null,options:[!1,!1,!0,!0],pannable:o};function X(e,t){return function(e,t){var n=e.size,r=e.contentSize,o=e.contentOffset,a=e.contentVelocity,l=e.drag,c=e.deceleration,u=e.options,s=u[0],d=u[2],f=u[3];if(c){var h=c.endOffset;if(h!==B(h,n,r,s,!0)&&o!==B(o,n,r,s,!0)){var p=a;return d||(p.x=0),f||(p.y=0),.025!==c.rate&&(p=N(p,n,.025),h=V(o,p,n,s,.025)),h=B(h,n,r,s,!0),i({},e,{contentVelocity:p,drag:null,deceleration:q(h,.025,o,p)})}}else if(!l){var m=B(o,n,r,s);if(o!==m){var g=V(m,{x:0,y:0},n,s,.025);return i({},e,{drag:null,deceleration:q(g,.025,o,a)})}}return e}(function(e,t){switch(t.type){case"setPannable":return function(e,t){return i({},e,{pannable:t.value})}(e,t);case"setOptions":return function(e,t){return i({},e,{options:t.value})}(e,t);case"setSize":return function(e,t){return i({},e,{size:t.value})}(e,t);case"setContentSize":return function(e,t){return i({},e,{contentSize:t.value})}(e,t);case"dragStart":return function(e,t){var n=e.contentOffset,r=e.pannable.velocity,o={x:1,y:1};e.options[1]&&(Math.abs(r.x)>Math.abs(r.y)?o.y=0:o.x=0);return i({},e,{contentVelocity:{x:o.x*r.x,y:o.y*r.y},drag:{direction:o,startOffset:n},deceleration:null})}(e);case"dragMove":return function(e,t){var n=e.contentOffset,r=e.drag,o=e.options,a=e.pannable,l=a.translation,c=a.interval,u=function e(t,n,i,r,o){if(o){var a="y"===o?["y","height","width"]:["x","width","height"],l=a[0],c=a[1],u=a[2],s=t[l],d=Math.min(i[c]-r[c],0),f=.5*Math.min(i[c],i[u]);return s>0?n[l]?f*(1-f/(f+s)):0:d>s?n[l]?d-f*(1-f/(f-s+d)):d:s}var h={x:e(t,n,i,r,"x"),y:e(t,n,i,r,"y")};return h.x===t.x&&h.y===t.y?t:h}({x:r.startOffset.x+r.direction.x*l.x,y:r.startOffset.y+r.direction.y*l.y},{x:o[2],y:o[3]},e.size,e.contentSize);return i({},e,{contentOffset:u,contentVelocity:{x:(u.x-n.x)/c,y:(u.y-n.y)/c}})}(e);case"dragEnd":return function(e,t){var n=e.size,r=e.contentOffset,o=e.options[0],a=.0025,l=e.contentVelocity;o&&(l=N(l,n,a=.025));var c=V(r,l,n,o,a);return i({},e,{contentVelocity:l,drag:null,deceleration:q(c,a,r,l)})}(e);case"dragCancel":return function(e,t){var n=e.contentOffset,r=e.contentVelocity,o=V(e.drag.startOffset,{x:0,y:0},e.size,e.options[0],.025);return i({},e,{drag:null,deceleration:q(o,.025,n,r)})}(e);case"decelerate":return function(e,t){var n=e.deceleration,r=t.now;if(!n)return e;var o=function e(t,n,r){var o=t.duration,a=t.endOffset,l=1;if(o>0&&(l=(n-t.startTime)/o),r){var c,u=("y"===r?["y"]:["x"])[0],s=t.points[u],d=s[0],f=s[1],h=s[2],p=s[3],m=d-3*(d-f)*l+3*(d-2*f+h)*Math.pow(l,2)-(d-3*f+3*h-p)*Math.pow(l,3),g=(-3*(d-f)+6*(d-2*f+h)*l-3*(d-3*f+3*h-p)*Math.pow(l,2))/o;return(c={})[u+"Offset"]=m,c[u+"Velocity"]=g,c}if(0>l||l>=1)return{offset:a,velocity:{x:0,y:0},didEnd:!0};var v=i({},e(t,n,"x"),{},e(t,n,"y"));return{offset:{x:v.xOffset,y:v.yOffset},velocity:{x:v.xVelocity,y:v.yVelocity},didEnd:!1}}(n,r);return i({},e,{contentOffset:o.offset,contentVelocity:o.velocity,drag:null,deceleration:o.didEnd?null:n})}(e,t);case"scrollTo":return Y(e,t);case"scrollToRect":return function(e,t){var n=t.animated,i=function e(t,n,i,r,o){if(o){var a="y"===o?["y","height"]:["x","width"],l=a[0],c=a[1],u=-t[l],s=r[c]-t[c];if("auto"===n[l]){var d=0>s?-1:1;u+=d*Math.max(0,Math.min(d*(i[l]-u),d*s))}else"start"===n[l]?n[l]=0:"center"===n[l]?n[l]=.5:"end"===n[l]&&(n[l]=1),("number"!=typeof n[l]||isNaN(n[l]))&&(n[l]=.5),u+=n[l]*s;return u}"object"!=typeof n&&(n={x:n,y:n});return{x:e(t,n,i,r,"x"),y:e(t,n,i,r,"y")}}(t.rect,t.align,e.contentOffset,e.size);return Y(e,{type:"scrollTo",offset:i,animated:n})}(e,t);default:return e}}(e,t))}function Y(e,t){var n=e.contentOffset,r=e.contentVelocity,o=t.point,a=e.drag,l=e.deceleration,c=t.offset,u=void 0===c?{x:0,y:0}:c,s=t.animated;return o&&(u={x:-o.x,y:-o.y}),u.x===n.x&&u.y===n.y?e:(a&&(s=!1),s?i({},e,{deceleration:q(V(u,{x:0,y:0},e.size,e.options[0],.025),.025,n,r)}):(a?a=i({},a,{startOffset:{x:a.startOffset.x+u.x-n.x,y:a.startOffset.y+u.y-n.y}}):l=l?q({x:l.endOffset.x+u.x-n.x,y:l.endOffset.y+u.y-n.y},l.rate,u,r):q(u),i({},e,{contentOffset:u,drag:a,deceleration:l})))}var G=n.createContext({visibleRect:null,resizeContent:function(){}});function U(e){var o=e.width,a=e.height,u=e.children,s=r(e,["width","height","children"]),d=t.useState(null),f=d[0],h=d[1],p=c(f),m=t.useContext(G),g=t.useRef(null),v=p.current,y=t.useCallback((function(){}),[]),b=t.useCallback((function(){return g.current}),[]),w=t.useCallback((function(){var e=k(g.current);h((function(t){return R(t,e)?t:e}))}),[]);l((function(){v!==f&&f&&m.resizeContent(f),f||w()})),t.useMemo((function(){var e=null;P(o)&&P(a)&&(e={width:o,height:a}),h((function(t){return R(t,e)?t:e}))}),[o,a]);var x="function"==typeof u?u(f,{getResizeNode:b,calculateSize:w}):u,S={position:"relative"},E={position:"absolute"};return P(o)&&(E.width=o),P(a)&&(E.height=a),f&&(S.width=f.width,S.height=f.height),s.style&&Object.assign(S,s.style),s.style=S,n.createElement(G.Provider,{value:i({},m,{resizeContent:y})},n.createElement("div",s,n.createElement("div",{style:{position:"absolute",top:0,left:0}},n.createElement("div",{ref:g,style:E},x))))}U.defaultProps={width:null,height:null},U.PadContent=!0;var J=i({},U.defaultProps);function K(e){var i=e.width,r=e.height,o=e.children,a=t.useRef({});return t.useEffect((function(){if(!P(i)||!P(r)){var e=a.current,t=e.calculateSize,n=(0,e.getResizeNode)();return M.listenTo(n,(function(){t()})),function(){M.uninstall(n)}}}),[i,r]),n.createElement(U,e,(function(e,t){return a.current=t,"function"==typeof o?o(e,t):o}))}K.defaultProps=J,K.PadContent=!0;var Q=i({width:0,height:0,pagingEnabled:!1,directionalLockEnabled:!1,alwaysBounceX:!0,alwaysBounceY:!0,onStateChange:function(){},onScroll:function(){},onDragStart:function(){},onDragEnd:function(){},onDecelerationStart:function(){},onDecelerationEnd:function(){},onContentResize:function(){},renderBackground:function(){return null},renderOverlay:function(){return null},scrollTo:null,scrollToRect:null},f.defaultProps);function Z(e){var o=e.width,a=e.height,s=e.pagingEnabled,d=e.directionalLockEnabled,h=e.alwaysBounceX,p=e.alwaysBounceY,m=e.onStateChange,g=e.onScroll,v=e.onDragStart,y=e.onDragEnd,b=e.onDecelerationStart,w=e.onDecelerationEnd,x=e.onContentResize,S=e.renderBackground,E=e.renderOverlay,C=e.scrollTo,z=e.scrollToRect,I=e.children,T=r(e,["width","height","pagingEnabled","directionalLockEnabled","alwaysBounceX","alwaysBounceY","onStateChange","onScroll","onDragStart","onDragEnd","onDecelerationStart","onDecelerationEnd","onContentResize","renderBackground","renderOverlay","scrollTo","scrollToRect","children"]),O=T.enabled,M=T.shouldStart,k=t.useReducer(X,F),P=k[0],L=k[1],H=c(P).current,W=t.useCallback((function(e){R(P.contentSize,e)||L({type:"setContentSize",value:e})}),[P.contentSize]),j=t.useCallback((function(e){return!(d&&!function(e,t,n){var i=Math.abs(e.x)>Math.abs(e.y)?"width":"height";return n[i]>t[i]}(e.velocity,P.size,P.contentSize))&&M(e)}),[M,d,P.size,P.contentSize]),_=t.useCallback((function(e){L({type:"setPannable",value:e})}),[]);l((function(){H.pannable.translation!==P.pannable.translation&&(P.pannable.translation?L(H.pannable.translation?{type:"dragMove"}:{type:"dragStart"}):H.pannable.translation&&L(O?{type:"dragEnd"}:{type:"dragCancel"})),H!==P&&m(P);var e={size:P.size,contentSize:P.contentSize,contentOffset:P.contentOffset,contentVelocity:P.contentVelocity,dragging:!!P.drag,decelerating:!!P.deceleration};H.contentSize!==P.contentSize&&x(P.contentSize),H.contentOffset!==P.contentOffset&&g(e),H.drag!==P.drag&&(H.drag?P.drag||y(e):v(e)),H.deceleration!==P.deceleration&&(H.deceleration?P.deceleration||w(e):b(e))})),l((function(){if(P.deceleration){var e=D((function(){L({type:"decelerate",now:(new Date).getTime()})}));return function(){A(e)}}}),[P]),t.useMemo((function(){L({type:"setSize",value:{width:o,height:a}})}),[o,a]),t.useMemo((function(){L({type:"setOptions",value:[s,d,h,p]})}),[s,d,h,p]),t.useMemo((function(){C&&L(i({type:"scrollTo"},C))}),[C]),t.useMemo((function(){z&&L(i({type:"scrollToRect"},z))}),[z]),T.shouldStart=j,T.onStateChange=_;var N,B={overflow:"hidden",position:"relative",width:P.size.width,height:P.size.height};return T.style&&Object.assign(B,T.style),T.style=B,n.createElement(f,T,n.createElement(G.Provider,{value:{visibleRect:{x:-P.contentOffset.x,y:-P.contentOffset.y,width:P.size.width,height:P.size.height},resizeContent:W}},null==(N=S(P))?null:n.createElement("div",{style:{position:"absolute",top:0,left:0,right:0,bottom:0}},N),function(){var e=u.create({position:"absolute",width:P.contentSize.width,height:P.contentSize.height,transformTranslate:P.contentOffset,willChange:"transform"}),i="function"==typeof I?I(P):I;return t.isValidElement(i)&&i.type.PadContent?(i.props.style&&Object.assign(e,i.props.style),i=t.cloneElement(i,{style:e,ref:i.ref})):i=n.createElement(K,{style:e},i),i}(),E(P)))}function $(e,t,n){if(!t)return t;if(n){var r,o="y"===n?["y","height"]:["x","width"],a=o[0],l=o[1];return(r={})[a]=t[a]-e[a],r[l]=t[l],r}return i({},$(e,t,"x"),{},$(e,t,"y"))}function ee(e,t,n){if(!t)return!0;if(n){var i="y"===n?["y","height"]:["x","width"],r=i[0],o=i[1];return e[r]+e[o]>=t[r]-.25*t[o]&&t[r]+1.25*t[o]>=e[r]}return ee(e,t,"x")&&ee(e,t,"y")}function te(){}Z.defaultProps=Q;function ne(e){var o=e.width,a=e.height,u=e.direction,s=e.rowSpacing,d=e.columnSpacing,f=e.itemWidth,h=e.itemHeight,p=e.itemCount,m=e.renderItem,g=e.children,v=r(e,["width","height","direction","rowSpacing","columnSpacing","itemWidth","itemHeight","itemCount","renderItem","children"]),y=t.useMemo((function(){return function(e){var t,n,i=e.itemCount,r={width:e.itemWidth,height:e.itemHeight},o={row:e.rowSpacing,column:e.columnSpacing},a="x"===e.direction?["y","x","height","width","column","row"]:["x","y","width","height","row","column"],l=a[0],c=a[1],u=a[2],s=a[3],d=a[4],f=a[5],h={width:e.width,height:e.height}[u],p=0,m=0,g=0,v=[];"number"!=typeof h?(g=i,0===r[u]?h=0:(h=i*r[u],i>1&&(h+=(i-1)*o[f]))):0===r[u]?g=i:(g=1,h>r[u]&&(g+=Math.floor((h-r[u])/(r[u]+o[f]))));g>0&&(m=Math.ceil(i/g));for(var y=0;m>y;y++){y>0&&(p+=o[d]);for(var b=0;g>b;b++){var w,x,S=b+y*g,E=0;if(g>1&&(E+=Math.round(b*((h-r[u])/(g-1)))),S>=i)break;v.push(((x={rect:(w={},w[l]=E,w[c]=p,w[u]=r[u],w[s]=r[s],w)})[d+"Index"]=y,x[f+"Index"]=b,x.itemIndex=S,x))}p+=r[s]}return{size:(t={},t[u]=h,t[s]=p,t),count:(n={},n[d]=m,n[f]=g,n),layoutList:v}}({direction:u,width:o,height:a,rowSpacing:s,columnSpacing:d,itemCount:p,itemWidth:f,itemHeight:h})}),[u,o,a,s,d,p,f,h]),b=c(y),w=t.useContext(G),x=y.size,S=y.layoutList,E=b.current,C=t.useCallback((function(){}),[]);l((function(){w.resizeContent(x)}),[]),l((function(){R(E.size,x)||w.resizeContent(x)}));var z={position:"relative"};x&&(z.width=x.width,z.height=x.height),v.style&&Object.assign(z,v.style),v.style=z;var I=S.map((function(e){return function(e){var r=e.rect,o=e.itemIndex,a=e.visibleRect,l=e.needsRender,c=e.Item,u=!1,s=m(e),d="GridContent_"+o,f={position:"absolute",left:r.x,top:r.y,width:r.width,height:r.height};return t.isValidElement(s)&&s.type===c&&(void 0!==s.props.forceRender&&(u=s.props.forceRender),s.key&&(d=s.key),s=s.props.children),l||u?(t.isValidElement(s)?(s.props.style&&Object.assign(f,s.props.style),s=t.cloneElement(s,{style:f,ref:s.ref})):s=n.createElement("div",{style:f},s),n.createElement(G.Provider,{key:d,value:i({},w,{visibleRect:a,resizeContent:C})},s)):null}(i({},e,{visibleRect:$(e.rect,w.visibleRect),needsRender:ee(e.rect,w.visibleRect),Item:te}))}));return"function"==typeof g&&g(y),n.createElement("div",v,I)}function ie(){}ne.defaultProps={width:null,height:null,direction:"y",rowSpacing:0,columnSpacing:0,itemWidth:0,itemHeight:0,itemCount:0,renderItem:function(){return null}},ne.PadContent=!0;function re(e){var o=e.width,a=e.height,u=e.direction,s=e.spacing,d=e.estimatedItemWidth,f=e.estimatedItemHeight,h=e.itemCount,p=e.renderItem,m=e.children,g=r(e,["width","height","direction","spacing","estimatedItemWidth","estimatedItemHeight","itemCount","renderItem","children"]),v=t.useContext(G),y=t.useState([]),b=y[0],w=y[1],x=t.useState({}),S=x[0],E=x[1],C=t.useMemo((function(){return function(e,t,n){var i,r=e.direction,o=e.spacing,a=e.itemCount,l=e.estimatedItemWidth,c=e.estimatedItemHeight,u={width:e.width,height:e.height},s="x"===r?["y","x","height","width"]:["x","y","width","height"],d=s[0],f=s[1],h=s[2],p=s[3],m=0,g=0,v=[],y={},b=[r,u[h]].join();P(u[h])&&(y[h]=u[h]);for(var w=0;a>w;w++){var x,S=t[w]||null,E=n[S]||null,C=((x={})[d]=0,x[f]=g,x);E?Object.assign(C,E):(C[h]=void 0!==y[h]?y[h]:"function"==typeof l?l(w):l,C[p]="function"==typeof c?c(w):c),v.push({rect:C,itemIndex:w,itemHash:S,itemSize:E}),C[p]>0&&(g+=C[p],a-1>w&&(g+=o)),C[h]>m&&(m=C[h])}return{size:(i={},i[h]=m,i[p]=g,i),fixed:y,layoutList:v,type:b}}({width:o,height:a,direction:u,spacing:s,itemCount:h,estimatedItemWidth:d,estimatedItemHeight:f},b,S)}),[o,a,u,s,h,d,f,b,S]),z=c(C).current,I=[];l((function(){v.resizeContent(C.size)}),[]),l((function(){R(z.size,C.size)||v.resizeContent(C.size),z.type!==C.type&&E({})}));var T={position:"relative"};C.size&&(T.width=C.size.width,T.height=C.size.height),g.style&&Object.assign(T,g.style),g.style=T;var O=C.layoutList.map((function(e){return function(e){var r,o=e.rect,a=e.itemIndex,l=e.itemSize,c=e.visibleRect,u=e.needsRender,s=e.Item,d=!1,f=p(e),h="ListContent_"+a,m={position:"absolute",left:o.x,top:o.y,width:o.width,height:o.height};t.isValidElement(f)&&f.type===s&&(void 0!==f.props.forceRender&&(d=f.props.forceRender),f.key&&(h=f.key),void 0!==f.props.hash&&(r=f.props.hash),f=f.props.children),void 0===r&&(r=h);var g=!u&&!d;if(l||-1===I.indexOf(r)||(g=!0),I[a]=r,g)return null;var y,b={};return P(C.fixed.width)&&(b.width=C.fixed.width),P(C.fixed.height)&&(b.height=C.fixed.height),t.isValidElement(f)&&f.type.PadContent?(f.props.style&&Object.assign(m,f.props.style),P(f.props.width)&&(b.width=f.props.width),P(f.props.height)&&(b.height=f.props.height),f=t.cloneElement(f,i({},b,{style:m,ref:f.ref}))):(l&&Object.assign(b,l),f=n.createElement(U,i({},b,{style:m}),f)),n.createElement(G.Provider,{key:h,value:i({},v,{visibleRect:c,resizeContent:(y=r,function(e){E((function(t){var n;return R(t[y],e)?t:i({},t,((n={})[y]=e,n))}))})})},f)}(i({},e,{visibleRect:$(e.rect,v.visibleRect),needsRender:ee(e.rect,v.visibleRect),Item:ie}))}));return function(e,t){if(e===t)return!0;if(!e||!t)return!1;if(e.length!==t.length)return!1;for(var n=0;e.length>n;n++)if(e[n]!==t[n])return!1;return!0}(b,I)||w(I),"function"==typeof m&&m(C),n.createElement("div",g,O)}re.defaultProps={width:null,height:null,direction:"y",spacing:0,estimatedItemWidth:0,estimatedItemHeight:0,itemCount:0,renderItem:function(){return null}},re.PadContent=!0;var oe={mouseEntered:!1,loopCount:1,loopOffset:0,loopWidth:0,scrollTo:null,options:["x",!0],pad:F};function ae(e,t){switch(t.type){case"setMouseEntered":return function(e,t){return i({},e,{mouseEntered:t.value})}(e,t);case"setPad":return function(e,t){var n=i({},e,{pad:t.value});return n=le(n=function(e,t){var n,r=e.loopCount,o=e.loopOffset,a=e.options,l=a[0],c=e.pad,u=c.contentOffset,s=c.size,d=c.contentSize;if(a[1]){var f=function(e,t,n,i,r){var o;if(1===i)return[e,0];var a="y"===r?["height","y","x"]:["width","x","y"],l=a[0],c=a[1],u=a[2],s=n[l],d=t[l],f=s/i,h=.5*(s-f-d),p=0,m=d-s,g=e[c],v=0;if(p-=h,g>=(m+=h)&&p>=g)return[e,0];m>g?v=Math.floor((p-g)/f):g>p&&(v=-Math.floor((g-m)/f));return[(o={},o[c]=g+=f*v,o[u]=e[u],o),v]}(u,s,d,r,l),h=f[0],p=f[1];u!==h&&((n=n||i({},e)).loopOffset=o+p,n.scrollTo={offset:h,animated:!1})}return n||e}(n))}(e,t);case"setOptions":return function(e,t){var n=i({},e,{options:t.value});return n=le(n)}(e,t);case"setScrollTo":return function(e,t){return i({},e,{scrollTo:t.value})}(e,t);case"playNext":return function(e,t){var n=e.pad,r=function(e,t,n,i,r){var o,a="y"===r?["height","y","x"]:["width","x","y"],l=a[0],c=a[1],u=a[2],s=t[l],d=Math.min(s-n[l],0),f=e[c];i&&s>0&&(d=s*Math.ceil(d/s));f=f>d?Math.max(d,f-s):0;return(o={})[c]=f,o[u]=e[u],o}(n.contentOffset,n.size,n.contentSize,n.pagingEnabled,e.options[0]);return i({},e,{scrollTo:{offset:r,animated:!0}})}(e);default:return e}}function le(e,t){var n=e.options,r=e.pad;return i({},e,{},function(e,t,n,i,r){var o="y"===r?"height":"width",a=e[o],l=t[o],c=l/n;if(!i||0===l||0===a)return{loopCount:1,loopOffset:0,loopWidth:c};return{loopCount:2+Math.floor(a/c),loopWidth:c}}(r.size,r.contentSize,e.loopCount,n[1],n[0]))}var ce=i({direction:"x",loop:!0,autoplayEnabled:!0,autoplayInterval:5e3,onStateChange:function(){}},Z.defaultProps,{pagingEnabled:!0,directionalLockEnabled:!0});function ue(e){var i=e.direction,o=e.loop,a=e.autoplayEnabled,u=e.autoplayInterval,s=e.onStateChange,d=e.children,f=r(e,["direction","loop","autoplayEnabled","autoplayInterval","onStateChange","children"]),h=f.scrollTo,p=f.onMouseEnter,m=f.onMouseLeave,g=t.useReducer(ae,oe),v=g[0],y=g[1],b=c(v).current,w=t.useCallback((function(e){y({type:"setMouseEntered",value:!0}),p&&p(e)}),[p]),x=t.useCallback((function(e){y({type:"setMouseEntered",value:!1}),m&&m(e)}),[m]),S=t.useCallback((function(e){y({type:"setPad",value:e})}),[]);l((function(){b!==v&&s(v)})),t.useEffect((function(){if(a&&!v.mouseEntered&&!v.pad.drag&&!v.pad.deceleration){var e=setTimeout((function(){y({type:"playNext"})}),u);return function(){clearTimeout(e)}}}),[a,u,v.mouseEntered,v.pad.drag,v.pad.deceleration]),t.useMemo((function(){y({type:"setOptions",value:[i,o]})}),[o,i]),t.useMemo((function(){y({type:"setScrollTo",value:h})}),[h]),f.scrollTo=v.scrollTo,f.onStateChange=S,"x"===i?f.alwaysBounceY=!1:f.alwaysBounceX=!1,a&&(f.onMouseEnter=w,f.onMouseLeave=x);var E="function"==typeof d?d(v):d;return n.createElement(Z,f,n.createElement(re,{direction:i,itemCount:v.loopCount,renderItem:function(e){return n.createElement(e.Item,{key:e.itemIndex+v.loopOffset,hash:"Player_loop"},E)}}))}var se={activeIndex:0,itemCount:0,scrollTo:null,player:oe};function de(e,t){switch(t.type){case"setPlayer":return function(e,t){var n=t.value,r=n.options[0],o=n.pad,a=o.contentOffset,l=o.size,c=o.contentSize,u=function(e,t,n){var i=e["y"===n?"height":"width"],r=0;i>0&&(r=Math.ceil(t/i));return r}(l,n.loopWidth,r),s=0;if(u>0){var d=function(e,t,n,i){var r="y"===i?["height","y"]:["width","x"],o=r[0],a=r[1],l=t[o],c=0;if(l>0){c=Math.round(-Math.max(Math.min(l-n[o],0),Math.min(e[a],0))/l)}return c}(a,l,c,r);s=d%u}return i({},e,{player:n,itemCount:u,activeIndex:s})}(e,t);case"setScrollTo":return function(e,t){return i({},e,{scrollTo:t.value})}(e,t);case"scrollToIndex":return function(e,t){var n=e.activeIndex,r=e.player.options[0],o=e.player.pad,a=o.contentOffset,l=o.size,c=t.animated,u=t.index;if(0===e.itemCount)return e;"function"==typeof u&&(u=u(e));if(u===n)return e;var s=function(e,t,n,i){var r,o="y"===i?["height","y","x"]:["width","x","y"],a=o[1],l=o[2];return(r={})[a]=t[a]-e*n[o[0]],r[l]=t[l],r}(u-n,a,l,r);return i({},e,{scrollTo:{offset:s,animated:c}})}(e,t);default:return e}}var fe=i({itemCount:0,renderItem:function(){return null},onStateChange:function(){},onActiveIndexChange:function(){},scrollToIndex:null},ue.defaultProps=ce);function he(e){var o=e.itemCount,a=e.renderItem,u=e.onStateChange,s=e.onActiveIndexChange,d=e.scrollToIndex,f=e.children,h=r(e,["itemCount","renderItem","onStateChange","onActiveIndexChange","scrollToIndex","children"]),p=h.width,m=h.height,g=h.direction,v=h.scrollTo,y=h.renderOverlay,b=t.useReducer(de,se),w=b[0],x=b[1],S=c(w).current,E=t.useCallback((function(e){x({type:"setPlayer",value:e})}),[]);return l((function(){S!==w&&u(w),S.activeIndex!==w.activeIndex&&s({activeIndex:w.activeIndex,itemCount:w.itemCount})})),t.useMemo((function(){x({type:"setScrollTo",value:v})}),[v]),t.useMemo((function(){d&&x(i({type:"scrollToIndex"},d))}),[d]),h.scrollTo=w.scrollTo,h.onStateChange=E,h.renderOverlay=function(e){var i="function"==typeof f?f(w):f;return n.createElement(t.Fragment,null,y(e),i)},n.createElement(ue,h,n.createElement(ne,{width:p,height:m,itemWidth:p,itemHeight:m,direction:g,itemCount:o,renderItem:a}))}he.defaultProps=fe;var pe={scrollToRect:null,scrolling:!1,pad:F};function me(e,t){switch(t.type){case"setPad":return function(e,t){return i({},e,{pad:t.value})}(e,t);case"setScrollToRect":return function(e,t){return i({},e,{scrollToRect:t.value})}(e,t);case"scrollToIndex":return function(e,t){var n=t.list,r=t.index,o=void 0===r?0:r,a=n.box,l=n.body,c={x:0,y:0,width:0,height:0};a&&(c=a.layoutList[1].rect);if(l){var u=l.layoutList[o];u&&(c={x:c.x+u.rect.x,y:c.y+u.rect.y,width:u.rect.width,height:u.rect.height})}return i({},e,{scrollToRect:{rect:c,align:t.align,animated:t.animated},scrolling:!0})}(e,t);case"endScrolling":return function(e,t){return i({},e,{scrolling:!1})}(e);default:return e}}var ge=i({direction:"y",spacing:0,itemCount:0,estimatedItemWidth:0,estimatedItemHeight:0,renderItem:function(){return null},renderHeader:function(){return null},renderFooter:function(){return null},onStateChange:function(){},scrollToIndex:null},Z.defaultProps,{directionalLockEnabled:!0});function ve(e){var o=e.direction,a=e.spacing,u=e.itemCount,s=e.estimatedItemWidth,d=e.estimatedItemHeight,f=e.renderItem,h=e.renderHeader,p=e.renderFooter,m=e.onStateChange,g=e.scrollToIndex,v=e.children,y=r(e,["direction","spacing","itemCount","estimatedItemWidth","estimatedItemHeight","renderItem","renderHeader","renderFooter","onStateChange","scrollToIndex","children"]),b=y.width,w=y.height,x=y.scrollToRect,S=t.useReducer(me,pe),E=S[0],C=S[1],z=c(E).current,I=t.useRef({}),T=t.useCallback((function(e){C({type:"setPad",value:e})}),[]);return l((function(){z!==E&&m(E),z.pad.contentSize!==E.pad.contentSize&&E.scrolling&&g&&C(i({type:"scrollToIndex"},g,{list:I.current}))})),t.useEffect((function(){z.pad.deceleration!==E.pad.deceleration&&!E.pad.deceleration&&E.scrolling&&C({type:"endScrolling"})})),t.useMemo((function(){C({type:"setScrollToRect",value:x})}),[x]),t.useMemo((function(){g&&C(i({type:"scrollToIndex"},g,{list:I.current}))}),[g]),y.scrollToRect=E.scrollToRect,y.onStateChange=T,"x"===o?y.alwaysBounceY=!1:y.alwaysBounceX=!1,"function"==typeof v&&v(E),n.createElement(Z,y,n.createElement(re,{width:b,height:w,direction:o,itemCount:3,renderItem:function(e){var t=e.itemIndex,i=e.Item;return 0===t?h(e):2===t?p(e):n.createElement(i,{hash:"Infinite_body",forceRender:!0},n.createElement(re,{width:b,height:w,direction:o,spacing:a,itemCount:u,estimatedItemWidth:s,estimatedItemHeight:d,renderItem:f},(function(e){I.current.body=e})))}},(function(e){I.current.box=e})))}ve.defaultProps=ge,e.AutoResizing=L,e.Carousel=he,e.GeneralContent=K,e.GridContent=ne,e.Infinite=ve,e.ItemContent=U,e.ListContent=re,e.Pad=Z,e.PadContext=G,e.Pannable=f,e.Player=ue,Object.defineProperty(e,"__esModule",{value:!0})}));

es/AutoResizing.js

@@ -91,3 +91,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
   divProps.style = elemStyle;
-  return React.createElement("div", _extends({}, divProps, {
+  return /*#__PURE__*/React.createElement("div", _extends({}, divProps, {
     ref: resizeRef
@@ -94,0 +94,0 @@ }), element);

es/carousel/Carousel.js

 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-import React, { Fragment, useMemo, useReducer } from 'react';
+import React, { Fragment, useMemo, useCallback, useReducer } from 'react';
 import { useIsomorphicLayoutEffect } from '../hooks/useIsomorphicLayoutEffect';
@@ -15,2 +15,3 @@ import { usePrevRef } from '../hooks/usePrevRef';
   },
+  onStateChange: function onStateChange() {},
   onActiveIndexChange: function onActiveIndexChange() {},
@@ -23,6 +24,7 @@ scrollToIndex: null
       renderItem = props.renderItem,
+      onStateChange = props.onStateChange,
       onActiveIndexChange = props.onActiveIndexChange,
       scrollToIndex = props.scrollToIndex,
       children = props.children,
-      playerProps = _objectWithoutPropertiesLoose(props, ["itemCount", "renderItem", "onActiveIndexChange", "scrollToIndex", "children"]);
+      playerProps = _objectWithoutPropertiesLoose(props, ["itemCount", "renderItem", "onStateChange", "onActiveIndexChange", "scrollToIndex", "children"]);
 
@@ -40,13 +42,20 @@ var width = playerProps.width,
   var prevStateRef = usePrevRef(state);
-  var activeIndex = state.activeIndex,
-      itemCount = state.itemCount,
-      scrollTo = state.scrollTo,
-      player = state.player;
-  var output = {
-    activeIndex: activeIndex,
-    itemCount: itemCount
-  };
   var prevState = prevStateRef.current;
+  var onPlayerStateChange = useCallback(function (value) {
+    dispatch({
+      type: 'setPlayer',
+      value: value
+    });
+  }, []);
   useIsomorphicLayoutEffect(function () {
-    if (prevState.activeIndex !== activeIndex) {
+    if (prevState !== state) {
+      onStateChange(state);
+    }
+
+    var output = {
+      activeIndex: state.activeIndex,
+      itemCount: state.itemCount
+    };
+
+    if (prevState.activeIndex !== state.activeIndex) {
       onActiveIndexChange(output);
@@ -68,28 +77,20 @@ }
   }, [scrollToIndex]);
-  playerProps.scrollTo = scrollTo;
+  playerProps.scrollTo = state.scrollTo;
+  playerProps.onStateChange = onPlayerStateChange;
 
-  playerProps.renderOverlay = function (padAttrs) {
+  playerProps.renderOverlay = function (pad) {
     var element = typeof children === 'function' ? children(state) : children;
-    return React.createElement(Fragment, null, renderOverlay(padAttrs), element);
+    return /*#__PURE__*/React.createElement(Fragment, null, renderOverlay(pad), element);
   };
 
-  return React.createElement(Player, playerProps, function (nextPlayer) {
-    if (player !== nextPlayer) {
-      dispatch({
-        type: 'setPlayer',
-        value: nextPlayer
-      });
-    }
-
-    var gridProps = {
-      width: width,
-      height: height,
-      itemWidth: width,
-      itemHeight: height,
-      direction: direction,
-      itemCount: gridItemCount,
-      renderItem: renderItem
-    };
-    return React.createElement(GridContent, gridProps);
-  });
+  var gridProps = {
+    width: width,
+    height: height,
+    itemWidth: width,
+    itemHeight: height,
+    direction: direction,
+    itemCount: gridItemCount,
+    renderItem: renderItem
+  };
+  return /*#__PURE__*/React.createElement(Player, playerProps, /*#__PURE__*/React.createElement(GridContent, gridProps));
 }
@@ -96,0 +97,0 @@

es/carousel/Player.js

@@ -5,2 +5,4 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import Pad from '../pad/Pad';
+import { useIsomorphicLayoutEffect } from '../hooks/useIsomorphicLayoutEffect';
+import { usePrevRef } from '../hooks/usePrevRef';
 import ListContent from '../pad/ListContent';
@@ -13,3 +15,4 @@ import { reducer, initialState } from './playerReducer';
   autoplayEnabled: true,
-  autoplayInterval: 5000
+  autoplayInterval: 5000,
+  onStateChange: function onStateChange() {}
 }, Pad.defaultProps, {
@@ -25,4 +28,5 @@ pagingEnabled: true,
       autoplayInterval = props.autoplayInterval,
+      onStateChange = props.onStateChange,
       children = props.children,
-      padProps = _objectWithoutPropertiesLoose(props, ["direction", "loop", "autoplayEnabled", "autoplayInterval", "children"]);
+      padProps = _objectWithoutPropertiesLoose(props, ["direction", "loop", "autoplayEnabled", "autoplayInterval", "onStateChange", "children"]);
 
@@ -37,7 +41,4 @@ var padScrollTo = padProps.scrollTo,
 
-  var mouseEntered = state.mouseEntered,
-      loopCount = state.loopCount,
-      loopOffset = state.loopOffset,
-      scrollTo = state.scrollTo,
-      pad = state.pad;
+  var prevStateRef = usePrevRef(state);
+  var prevState = prevStateRef.current;
   var onPadMouseEnter = useCallback(function (evt) {
@@ -63,4 +64,15 @@ dispatch({
   }, [onMouseLeave]);
+  var onPadStateChange = useCallback(function (value) {
+    dispatch({
+      type: 'setPad',
+      value: value
+    });
+  }, []);
+  useIsomorphicLayoutEffect(function () {
+    if (prevState !== state) {
+      onStateChange(state);
+    }
+  });
   useEffect(function () {
-    if (!autoplayEnabled || mouseEntered || pad.drag || pad.deceleration) {
+    if (!autoplayEnabled || state.mouseEntered || state.pad.drag || state.pad.deceleration) {
       return;
@@ -77,3 +89,3 @@ }
     };
-  }, [autoplayEnabled, autoplayInterval, mouseEntered, pad.drag, pad.deceleration]);
+  }, [autoplayEnabled, autoplayInterval, state.mouseEntered, state.pad.drag, state.pad.deceleration]);
   useMemo(function () {
@@ -91,3 +103,4 @@ dispatch({
   }, [padScrollTo]);
-  padProps.scrollTo = scrollTo;
+  padProps.scrollTo = state.scrollTo;
+  padProps.onStateChange = onPadStateChange;
 
@@ -105,24 +118,15 @@ if (direction === 'x') {
 
-  return React.createElement(Pad, padProps, function (nextPad) {
-    if (pad !== nextPad) {
-      dispatch({
-        type: 'setPad',
-        value: nextPad
-      });
+  var element = typeof children === 'function' ? children(state) : children;
+  return /*#__PURE__*/React.createElement(Pad, padProps, /*#__PURE__*/React.createElement(ListContent, {
+    direction: direction,
+    itemCount: state.loopCount,
+    renderItem: function renderItem(_ref) {
+      var Item = _ref.Item,
+          itemIndex = _ref.itemIndex;
+      return /*#__PURE__*/React.createElement(Item, {
+        key: itemIndex + state.loopOffset,
+        hash: "Player_loop"
+      }, element);
     }
-
-    var element = typeof children === 'function' ? children(state) : children;
-    return React.createElement(ListContent, {
-      direction: direction,
-      itemCount: loopCount,
-      renderItem: function renderItem(_ref) {
-        var Item = _ref.Item,
-            itemIndex = _ref.itemIndex;
-        return React.createElement(Item, {
-          key: itemIndex + loopOffset,
-          hash: "Player_loop"
-        }, element);
-      }
-    });
-  });
+  }));
 }
@@ -129,0 +133,0 @@

es/hooks/useIsomorphicLayoutEffect.js

@@ -1,8 +0,3 @@
-import { useLayoutEffect, useEffect } from 'react'; // https://github.com/reduxjs/react-redux/blob/v7-beta/src/components/connectAdvanced.js#L35
-// React currently throws a warning when using useLayoutEffect on the server.
-// To get around it, we can conditionally useEffect on the server (no-op) and
-// useLayoutEffect in the browser. We need useLayoutEffect because we want
-// `connect` to perform sync updates to a ref to save the latest props after
-// a render is actually committed to the DOM.
+import { useLayoutEffect, useEffect } from 'react'; // suppress the useLayoutEffect warning on server side.
 
-export var useIsomorphicLayoutEffect = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined' ? useLayoutEffect : useEffect;
+export var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;

es/hooks/usePrevRef.js

 import { useRef, useEffect } from 'react';
-export function usePrevRef(current) {
-  var ref = useRef(current);
+export function usePrevRef(input) {
+  var ref = useRef(input);
   useEffect(function () {
-    ref.current = current;
-  });
+    ref.current = input;
+  }, [input]);
   return ref;
 }

es/infinite/Infinite.js

 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-import React, { useReducer, useMemo, useRef, useEffect } from 'react';
+import React, { useMemo, useRef, useEffect, useCallback, useReducer } from 'react';
 import { useIsomorphicLayoutEffect } from '../hooks/useIsomorphicLayoutEffect';
@@ -25,2 +25,3 @@ import { usePrevRef } from '../hooks/usePrevRef';
   },
+  onStateChange: function onStateChange() {},
   scrollToIndex: null
@@ -40,5 +41,6 @@ }, Pad.defaultProps, {
       renderFooter = props.renderFooter,
+      onStateChange = props.onStateChange,
       scrollToIndex = props.scrollToIndex,
       children = props.children,
-      padProps = _objectWithoutPropertiesLoose(props, ["direction", "spacing", "itemCount", "estimatedItemWidth", "estimatedItemHeight", "renderItem", "renderHeader", "renderFooter", "scrollToIndex", "children"]);
+      padProps = _objectWithoutPropertiesLoose(props, ["direction", "spacing", "itemCount", "estimatedItemWidth", "estimatedItemHeight", "renderItem", "renderHeader", "renderFooter", "onStateChange", "scrollToIndex", "children"]);
 
@@ -54,10 +56,17 @@ var width = padProps.width,
   var prevStateRef = usePrevRef(state);
+  var prevState = prevStateRef.current;
   var listRef = useRef({});
-  var scrollToRect = state.scrollToRect,
-      scrolling = state.scrolling,
-      pad = state.pad;
-  var prevState = prevStateRef.current;
+  var onPadStateChange = useCallback(function (value) {
+    dispatch({
+      type: 'setPad',
+      value: value
+    });
+  }, []);
   useIsomorphicLayoutEffect(function () {
-    if (prevState.pad.contentSize !== pad.contentSize) {
-      if (scrolling && scrollToIndex) {
+    if (prevState !== state) {
+      onStateChange(state);
+    }
+
+    if (prevState.pad.contentSize !== state.pad.contentSize) {
+      if (state.scrolling && scrollToIndex) {
         dispatch(_extends({
@@ -72,4 +81,4 @@ type: 'scrollToIndex'
   useEffect(function () {
-    if (prevState.pad.deceleration !== pad.deceleration) {
-      if (!pad.deceleration && scrolling) {
+    if (prevState.pad.deceleration !== state.pad.deceleration) {
+      if (!state.pad.deceleration && state.scrolling) {
         dispatch({
@@ -96,3 +105,4 @@ type: 'endScrolling'
   }, [scrollToIndex]);
-  padProps.scrollToRect = scrollToRect;
+  padProps.scrollToRect = state.scrollToRect;
+  padProps.onStateChange = onPadStateChange;
 
@@ -109,49 +119,40 @@ if (direction === 'x') {
 
-  return React.createElement(Pad, padProps, function (nextPad) {
-    if (pad !== nextPad) {
-      dispatch({
-        type: 'setPad',
-        value: nextPad
-      });
-    }
+  var listProps = {
+    width: width,
+    height: height,
+    direction: direction,
+    itemCount: 3,
+    renderItem: function renderItem(attrs) {
+      var itemIndex = attrs.itemIndex,
+          Item = attrs.Item;
 
-    var listProps = {
-      width: width,
-      height: height,
-      direction: direction,
-      itemCount: 3,
-      renderItem: function renderItem(attrs) {
-        var itemIndex = attrs.itemIndex,
-            Item = attrs.Item;
+      if (itemIndex === 0) {
+        return renderHeader(attrs);
+      }
 
-        if (itemIndex === 0) {
-          return renderHeader(attrs);
-        }
+      if (itemIndex === 2) {
+        return renderFooter(attrs);
+      }
 
-        if (itemIndex === 2) {
-          return renderFooter(attrs);
-        }
-
-        var listProps = {
-          width: width,
-          height: height,
-          direction: direction,
-          spacing: spacing,
-          itemCount: itemCount,
-          estimatedItemWidth: estimatedItemWidth,
-          estimatedItemHeight: estimatedItemHeight,
-          renderItem: _renderItem
-        };
-        return React.createElement(Item, {
-          hash: "Infinite_body",
-          forceRender: true
-        }, React.createElement(ListContent, listProps, function (layout) {
-          listRef.current.body = layout;
-        }));
-      }
-    };
-    return React.createElement(ListContent, listProps, function (layout) {
-      listRef.current.box = layout;
-    });
-  });
+      var listProps = {
+        width: width,
+        height: height,
+        direction: direction,
+        spacing: spacing,
+        itemCount: itemCount,
+        estimatedItemWidth: estimatedItemWidth,
+        estimatedItemHeight: estimatedItemHeight,
+        renderItem: _renderItem
+      };
+      return /*#__PURE__*/React.createElement(Item, {
+        hash: "Infinite_body",
+        forceRender: true
+      }, /*#__PURE__*/React.createElement(ListContent, listProps, function (layout) {
+        listRef.current.body = layout;
+      }));
+    }
+  };
+  return /*#__PURE__*/React.createElement(Pad, padProps, /*#__PURE__*/React.createElement(ListContent, listProps, function (layout) {
+    listRef.current.box = layout;
+  }));
 }
@@ -158,0 +159,0 @@

es/pad/GeneralContent.js

 import _extends from "@babel/runtime/helpers/esm/extends";
-import React, { useRef, useState, useEffect } from 'react';
+import React, { useRef, useEffect } from 'react';
 import resizeDetector from '../utils/resizeDetector';
@@ -13,7 +13,2 @@ import { isNumber } from '../utils/geometry';
       children = props.children;
-
-  var _useState = useState(null),
-      size = _useState[0],
-      setSize = _useState[1];
-
   var itemRef = useRef({});
@@ -28,21 +23,13 @@ useEffect(function () {
         calculateSize = _itemRef$current.calculateSize;
-
-    if (size) {
-      var resizeNode = getResizeNode();
-      resizeDetector.listenTo(resizeNode, function () {
-        calculateSize();
-      });
-      return function () {
-        resizeDetector.uninstall(resizeNode);
-      };
-    }
-  }, [width, height, size]);
-  return React.createElement(ItemContent, props, function (nextSize, apis) {
+    var resizeNode = getResizeNode();
+    resizeDetector.listenTo(resizeNode, function () {
+      calculateSize();
+    });
+    return function () {
+      resizeDetector.uninstall(resizeNode);
+    };
+  }, [width, height]);
+  return /*#__PURE__*/React.createElement(ItemContent, props, function (size, apis) {
     itemRef.current = apis;
-
-    if (size !== nextSize) {
-      setSize(nextSize);
-    }
-
-    return typeof children === 'function' ? children(nextSize, apis) : children;
+    return typeof children === 'function' ? children(size, apis) : children;
   });
@@ -49,0 +36,0 @@ }

es/pad/GridContent.js

@@ -109,3 +109,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
     } else {
-      element = React.createElement("div", {
+      element = /*#__PURE__*/React.createElement("div", {
         style: itemStyle
@@ -115,3 +115,3 @@ }, element);
 
-    return React.createElement(PadContext.Provider, {
+    return /*#__PURE__*/React.createElement(PadContext.Provider, {
       key: key,
@@ -151,3 +151,3 @@ value: _extends({}, context, {
 
-  return React.createElement("div", divProps, items);
+  return /*#__PURE__*/React.createElement("div", divProps, items);
 }
@@ -154,0 +154,0 @@

es/pad/ItemContent.js

@@ -82,16 +82,5 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 
-  element = React.createElement("div", {
-    ref: resizeRef,
-    style: resizeStyle
-  }, element);
-
   if (size) {
     elemStyle.width = size.width;
     elemStyle.height = size.height;
-  } else {
-    element = React.createElement("div", {
-      style: {
-        position: 'absolute'
-      }
-    }, element);
   }
@@ -104,7 +93,16 @@
   divProps.style = elemStyle;
-  return React.createElement(PadContext.Provider, {
+  return /*#__PURE__*/React.createElement(PadContext.Provider, {
     value: _extends({}, context, {
       resizeContent: resizeContent
     })
-  }, React.createElement("div", divProps, element));
+  }, /*#__PURE__*/React.createElement("div", divProps, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      top: 0,
+      left: 0
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: resizeRef,
+    style: resizeStyle
+  }, element))));
 }
@@ -111,0 +109,0 @@

es/pad/ListContent.js

@@ -158,3 +158,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 
-      element = React.createElement(ItemContent, _extends({}, sizeProps, {
+      element = /*#__PURE__*/React.createElement(ItemContent, _extends({}, sizeProps, {
         style: itemStyle
@@ -174,3 +174,3 @@ }), element);
 
-    return React.createElement(PadContext.Provider, {
+    return /*#__PURE__*/React.createElement(PadContext.Provider, {
       key: key,
@@ -214,3 +214,3 @@ value: _extends({}, context, {
 
-  return React.createElement("div", divProps, items);
+  return /*#__PURE__*/React.createElement("div", divProps, items);
 }
@@ -217,0 +217,0 @@

es/pad/Pad.js

@@ -21,2 +21,3 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
   alwaysBounceY: true,
+  onStateChange: function onStateChange() {},
   onScroll: function onScroll() {},
@@ -45,2 +46,3 @@ onDragStart: function onDragStart() {},
       alwaysBounceY = props.alwaysBounceY,
+      onStateChange = props.onStateChange,
       onScroll = props.onScroll,
@@ -57,3 +59,3 @@ onDragStart = props.onDragStart,
       children = props.children,
-      pannableProps = _objectWithoutPropertiesLoose(props, ["width", "height", "pagingEnabled", "directionalLockEnabled", "alwaysBounceX", "alwaysBounceY", "onScroll", "onDragStart", "onDragEnd", "onDecelerationStart", "onDecelerationEnd", "onContentResize", "renderBackground", "renderOverlay", "scrollTo", "scrollToRect", "children"]);
+      pannableProps = _objectWithoutPropertiesLoose(props, ["width", "height", "pagingEnabled", "directionalLockEnabled", "alwaysBounceX", "alwaysBounceY", "onStateChange", "onScroll", "onDragStart", "onDragEnd", "onDecelerationStart", "onDecelerationEnd", "onContentResize", "renderBackground", "renderOverlay", "scrollTo", "scrollToRect", "children"]);
 
@@ -68,28 +70,13 @@ var enabled = pannableProps.enabled,
   var prevStateRef = usePrevRef(state);
-  var size = state.size,
-      contentSize = state.contentSize,
-      contentOffset = state.contentOffset,
-      contentVelocity = state.contentVelocity,
-      drag = state.drag,
-      deceleration = state.deceleration,
-      pannable = state.pannable;
-  var output = {
-    size: size,
-    contentSize: contentSize,
-    contentOffset: contentOffset,
-    contentVelocity: contentVelocity,
-    dragging: !!drag,
-    decelerating: !!deceleration
-  };
   var prevState = prevStateRef.current;
-  var resizeContent = useCallback(function (nextContentSize) {
-    if (!isEqualToSize(contentSize, nextContentSize)) {
+  var resizeContent = useCallback(function (contentSize) {
+    if (!isEqualToSize(state.contentSize, contentSize)) {
       dispatch({
         type: 'setContentSize',
-        value: nextContentSize
+        value: contentSize
       });
     }
-  }, [contentSize]);
+  }, [state.contentSize]);
   var shouldPannableStart = useCallback(function (evt) {
-    if (directionalLockEnabled && !shouldDragStart(evt.velocity, size, contentSize)) {
+    if (directionalLockEnabled && !shouldDragStart(evt.velocity, state.size, state.contentSize)) {
       return false;
@@ -99,6 +86,12 @@ }
     return shouldStart(evt);
-  }, [shouldStart, directionalLockEnabled, size, contentSize]);
+  }, [shouldStart, directionalLockEnabled, state.size, state.contentSize]);
+  var onPannableStateChange = useCallback(function (value) {
+    dispatch({
+      type: 'setPannable',
+      value: value
+    });
+  }, []);
   useIsomorphicLayoutEffect(function () {
-    if (prevState.pannable.translation !== pannable.translation) {
-      if (pannable.translation) {
+    if (prevState.pannable.translation !== state.pannable.translation) {
+      if (state.pannable.translation) {
         if (prevState.pannable.translation) {
@@ -126,14 +119,27 @@ dispatch({
 
-    if (prevState.contentSize !== contentSize) {
-      onContentResize(contentSize);
+    if (prevState !== state) {
+      onStateChange(state);
     }
 
-    if (prevState.contentOffset !== contentOffset) {
+    var output = {
+      size: state.size,
+      contentSize: state.contentSize,
+      contentOffset: state.contentOffset,
+      contentVelocity: state.contentVelocity,
+      dragging: !!state.drag,
+      decelerating: !!state.deceleration
+    };
+
+    if (prevState.contentSize !== state.contentSize) {
+      onContentResize(state.contentSize);
+    }
+
+    if (prevState.contentOffset !== state.contentOffset) {
       onScroll(output);
     }
 
-    if (prevState.drag !== drag) {
+    if (prevState.drag !== state.drag) {
       if (!prevState.drag) {
         onDragStart(output);
-      } else if (!drag) {
+      } else if (!state.drag) {
         onDragEnd(output);
@@ -143,6 +149,6 @@ }
 
-    if (prevState.deceleration !== deceleration) {
+    if (prevState.deceleration !== state.deceleration) {
       if (!prevState.deceleration) {
         onDecelerationStart(output);
-      } else if (!deceleration) {
+      } else if (!state.deceleration) {
         onDecelerationEnd(output);
@@ -200,5 +206,5 @@ }
       position: 'absolute',
-      width: contentSize.width,
-      height: contentSize.height,
-      transformTranslate: contentOffset,
+      width: state.contentSize.width,
+      height: state.contentSize.height,
+      transformTranslate: state.contentOffset,
       willChange: 'transform'
@@ -218,3 +224,3 @@ });
     } else {
-      element = React.createElement(GeneralContent, {
+      element = /*#__PURE__*/React.createElement(GeneralContent, {
         style: contentStyle
@@ -228,3 +234,3 @@ }, element);
   function buildBackground() {
-    var element = renderBackground(output);
+    var element = renderBackground(state);
 
@@ -242,3 +248,3 @@ if (element === null || element === undefined) {
     };
-    return React.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", {
       style: elemStyle
@@ -249,11 +255,12 @@ }, element);
   function buildOverlay() {
-    return renderOverlay(output);
+    return renderOverlay(state);
   }
 
   pannableProps.shouldStart = shouldPannableStart;
+  pannableProps.onStateChange = onPannableStateChange;
   var elemStyle = {
     overflow: 'hidden',
     position: 'relative',
-    width: size.width,
-    height: size.height
+    width: state.size.width,
+    height: state.size.height
   };
@@ -266,23 +273,14 @@
   pannableProps.style = elemStyle;
-  return React.createElement(Pannable, pannableProps, function (nextPannable) {
-    if (pannable !== nextPannable) {
-      dispatch({
-        type: 'setPannable',
-        value: nextPannable
-      });
+  var visibleRect = {
+    x: -state.contentOffset.x,
+    y: -state.contentOffset.y,
+    width: state.size.width,
+    height: state.size.height
+  };
+  return /*#__PURE__*/React.createElement(Pannable, pannableProps, /*#__PURE__*/React.createElement(PadContext.Provider, {
+    value: {
+      visibleRect: visibleRect,
+      resizeContent: resizeContent
     }
-
-    var visibleRect = {
-      x: -contentOffset.x,
-      y: -contentOffset.y,
-      width: size.width,
-      height: size.height
-    };
-    return React.createElement(PadContext.Provider, {
-      value: {
-        visibleRect: visibleRect,
-        resizeContent: resizeContent
-      }
-    }, buildBackground(), buildContent(), buildOverlay());
-  });
+  }, buildBackground(), buildContent(), buildOverlay()));
 }
@@ -289,0 +287,0 @@

es/Pannable.js

 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React, { useRef, useMemo, useReducer } from 'react';
+import React, { useCallback, useRef, useMemo, useReducer } from 'react';
 import { initialState, reducer } from './pannableReducer';
@@ -14,2 +14,3 @@ import { useIsomorphicLayoutEffect } from './hooks/useIsomorphicLayoutEffect';
   },
+  onStateChange: function onStateChange() {},
   onStart: function onStart() {},
@@ -24,2 +25,3 @@ onMove: function onMove() {},
       shouldStart = props.shouldStart,
+      onStateChange = props.onStateChange,
       onStart = props.onStart,
@@ -30,3 +32,3 @@ onMove = props.onMove,
       children = props.children,
-      divProps = _objectWithoutPropertiesLoose(props, ["enabled", "shouldStart", "onStart", "onMove", "onEnd", "onCancel", "children"]);
+      divProps = _objectWithoutPropertiesLoose(props, ["enabled", "shouldStart", "onStateChange", "onStart", "onMove", "onEnd", "onCancel", "children"]);
 
@@ -38,168 +40,143 @@ var _useReducer = useReducer(reducer, initialState),
   var prevStateRef = usePrevRef(state);
+  var prevState = prevStateRef.current;
   var elemRef = useRef(null);
-  var innerRef = useRef({
-    touchSupported: false
-  });
+  var innerRef = useRef({});
   innerRef.current.state = state;
   innerRef.current.shouldStart = shouldStart;
-  var target = state.target,
-      translation = state.translation,
-      velocity = state.velocity,
-      interval = state.interval;
-  var prevState = prevStateRef.current;
+  var touchSupported = typeof window !== undefined ? 'ontouchstart' in document : true;
+  var track = useCallback(function (target, point) {
+    dispatch({
+      type: 'track',
+      target: target,
+      point: point,
+      now: new Date().getTime()
+    });
+  }, []);
+  var move = useCallback(function (point) {
+    dispatch({
+      type: 'move',
+      point: point,
+      now: new Date().getTime(),
+      shouldStart: innerRef.current.shouldStart
+    });
+  }, []);
+  var end = useCallback(function () {
+    dispatch({
+      type: 'end'
+    });
+  }, []);
   useIsomorphicLayoutEffect(function () {
-    function track(target, point) {
-      dispatch({
-        type: 'track',
-        target: target,
-        point: point,
-        now: new Date().getTime()
-      });
+    if (!enabled) {
+      return;
     }
 
-    function onTouchStart(evt) {
-      innerRef.current.touchSupported = true;
-
-      if (evt.touches && evt.touches.length === 1) {
-        var touchEvent = evt.touches[0];
-        track(touchEvent.target, {
-          x: touchEvent.pageX,
-          y: touchEvent.pageY
-        });
-      }
-    }
-
-    function onTouchMove(evt) {
+    var preventDefaultIfMoving = function preventDefaultIfMoving(evt) {
       if (innerRef.current.state.translation) {
         evt.preventDefault();
       }
-    }
+    };
 
-    function onMouseDown(evt) {
-      if (innerRef.current.touchSupported) {
-        return;
-      }
+    if (state.target) {
+      if (touchSupported) {
+        var onTargetTouchMove = function onTargetTouchMove(evt) {
+          preventDefaultIfMoving(evt);
+          var touchEvent = evt.touches[0];
+          move({
+            x: touchEvent.pageX,
+            y: touchEvent.pageY
+          });
+        };
 
-      track(evt.target, {
-        x: evt.pageX,
-        y: evt.pageY
-      });
-    }
+        var onTargetTouchEnd = function onTargetTouchEnd(evt) {
+          preventDefaultIfMoving(evt);
+          end();
+        };
 
-    if (enabled) {
-      var elemNode = elemRef.current;
+        addEventListener(state.target, 'touchmove', onTargetTouchMove, false);
+        addEventListener(state.target, 'touchend', onTargetTouchEnd, false);
+        addEventListener(state.target, 'touchcancel', onTargetTouchEnd, false);
+        return function () {
+          removeEventListener(state.target, 'touchmove', onTargetTouchMove, false);
+          removeEventListener(state.target, 'touchend', onTargetTouchEnd, false);
+          removeEventListener(state.target, 'touchcancel', onTargetTouchEnd, false);
+        };
+      } else {
+        var onBodyMouseMove = function onBodyMouseMove(evt) {
+          preventDefaultIfMoving(evt);
 
-      if (!elemNode.addEventListener) {
-        return;
-      }
+          if (evt.buttons === 1) {
+            move({
+              x: evt.pageX,
+              y: evt.pageY
+            });
+          } else {
+            end();
+          }
+        };
 
-      elemNode.addEventListener('touchstart', onTouchStart, false);
-      elemNode.addEventListener('touchmove', onTouchMove, false);
-      elemNode.addEventListener('mousedown', onMouseDown, false);
-      return function () {
-        elemNode.removeEventListener('touchstart', onTouchStart, false);
-        elemNode.removeEventListener('touchmove', onTouchMove, false);
-        elemNode.removeEventListener('mousedown', onMouseDown, false);
-      };
-    }
-  }, [enabled]);
-  useIsomorphicLayoutEffect(function () {
-    function move(point) {
-      dispatch({
-        type: 'move',
-        point: point,
-        now: new Date().getTime(),
-        shouldStart: innerRef.current.shouldStart
-      });
-    }
+        var onBodyMouseUp = function onBodyMouseUp(evt) {
+          preventDefaultIfMoving(evt);
+          end();
+        };
 
-    function end() {
-      dispatch({
-        type: 'end'
-      });
-    }
+        var body = typeof document !== undefined ? document.body : null;
+        addEventListener(body, 'mousemove', onBodyMouseMove, false);
+        addEventListener(body, 'mouseup', onBodyMouseUp, false);
+        return function () {
+          removeEventListener(body, 'mousemove', onBodyMouseMove, false);
+          removeEventListener(body, 'mouseup', onBodyMouseUp, false);
+        };
+      }
+    } else {
+      var elemNode = elemRef.current;
 
-    function onTargetTouchMove(evt) {
-      var touchEvent = evt.touches[0];
+      if (touchSupported) {
+        var onTouchStart = function onTouchStart(evt) {
+          if (evt.touches && evt.touches.length === 1) {
+            var touchEvent = evt.touches[0];
+            track(touchEvent.target, {
+              x: touchEvent.pageX,
+              y: touchEvent.pageY
+            });
+          }
+        };
 
-      if (innerRef.current.state.translation) {
-        evt.preventDefault();
-      }
+        addEventListener(elemNode, 'touchstart', onTouchStart, false);
+        return function () {
+          removeEventListener(elemNode, 'touchstart', onTouchStart, false);
+        };
+      } else {
+        var onMouseDown = function onMouseDown(evt) {
+          if (evt.buttons === 1) {
+            track(evt.target, {
+              x: evt.pageX,
+              y: evt.pageY
+            });
+          }
+        };
 
-      move({
-        x: touchEvent.pageX,
-        y: touchEvent.pageY
-      });
-    }
-
-    function onTargetTouchEnd(evt) {
-      if (innerRef.current.state.translation) {
-        evt.preventDefault();
+        addEventListener(elemNode, 'mousedown', onMouseDown, false);
+        return function () {
+          removeEventListener(elemNode, 'mousedown', onMouseDown, false);
+        };
       }
-
-      end();
     }
-
-    function onRootMouseMove(evt) {
-      evt.preventDefault();
-      move({
-        x: evt.pageX,
-        y: evt.pageY
-      });
+  }, [enabled, state.target, track, move, end]);
+  useIsomorphicLayoutEffect(function () {
+    if (prevState !== state) {
+      onStateChange(state);
     }
 
-    function onRootMouseUp(evt) {
-      evt.preventDefault();
-      end();
-    }
-
-    if (!target) {
-      return;
-    }
-
-    if (innerRef.current.touchSupported) {
-      target.addEventListener('touchmove', onTargetTouchMove, false);
-      target.addEventListener('touchend', onTargetTouchEnd, false);
-      target.addEventListener('touchcancel', onTargetTouchEnd, false);
-      return function () {
-        target.removeEventListener('touchmove', onTargetTouchMove, false);
-        target.removeEventListener('touchend', onTargetTouchEnd, false);
-        target.removeEventListener('touchcancel', onTargetTouchEnd, false);
-      };
-    } else {
-      addEventListener('mousemove', onRootMouseMove, false);
-      addEventListener('mouseup', onRootMouseUp, false);
-      return function () {
-        removeEventListener('mousemove', onRootMouseMove, false);
-        removeEventListener('mouseup', onRootMouseUp, false);
-      };
-    }
-  }, [target]);
-  useIsomorphicLayoutEffect(function () {
-    if (prevState.translation !== translation) {
-      if (translation) {
-        var output = {
-          target: target,
-          translation: translation,
-          velocity: velocity,
-          interval: interval
-        };
-
+    if (prevState.translation !== state.translation) {
+      if (state.translation) {
         if (prevState.translation) {
-          onMove(output);
+          onMove(state);
         } else {
-          onStart(output);
+          onStart(state);
         }
       } else if (prevState.translation) {
-        var _output = {
-          target: prevState.target,
-          translation: prevState.translation,
-          velocity: prevState.velocity,
-          interval: prevState.interval
-        };
-
         if (enabled) {
-          onEnd(_output);
+          onEnd(prevState);
         } else {
-          onCancel(_output);
+          onCancel(prevState);
         }
@@ -218,3 +195,3 @@ }
 
-  if (translation) {
+  if (state.translation) {
     Object.assign(elemStyle, StyleSheet.create({
@@ -233,3 +210,3 @@ touchAction: 'none',
   var element = typeof children === 'function' ? children(state) : children;
-  return React.createElement("div", _extends({}, divProps, {
+  return /*#__PURE__*/React.createElement("div", _extends({}, divProps, {
     ref: elemRef
@@ -236,0 +213,0 @@ }), element);

es/pannableReducer.js

@@ -30,3 +30,8 @@ var MIN_DISTANCE = 0;
   var target = state.target;
-  return target ? initialState : state;
+
+  if (!target) {
+    return state;
+  }
+
+  return initialState;
 }
@@ -69,2 +74,3 @@
   };
+  /* on moving */
 
@@ -84,4 +90,10 @@ if (translation) {
   var dist = Math.sqrt(Math.pow(nextTranslation.x, 2) + Math.pow(nextTranslation.y, 2));
+  /* not started yet  */
 
-  if (dist <= MIN_DISTANCE) {
+  if (dist <= MIN_DISTANCE || !shouldStart({
+    target: target,
+    translation: nextTranslation,
+    velocity: nextVelocity,
+    interval: nextInterval
+  })) {
     return {
@@ -97,11 +109,4 @@ target: target,
   }
+  /* start moving */
 
-  if (!shouldStart({
-    target: target,
-    translation: nextTranslation,
-    velocity: nextVelocity,
-    interval: nextInterval
-  })) {
-    return initialState;
-  }
 
@@ -108,0 +113,0 @@ return {

es/utils/eventListener.js

@@ -6,6 +6,23 @@ var addEventListener = function addEventListener() {};
 if (typeof window !== undefined) {
-  addEventListener = window.addEventListener;
-  removeEventListener = window.removeEventListener;
+  addEventListener = function addEventListener(target) {
+    if (target && target.addEventListener) {
+      for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+        args[_key - 1] = arguments[_key];
+      }
+
+      return target.addEventListener.apply(target, args);
+    }
+  };
+
+  removeEventListener = function removeEventListener(target) {
+    if (target && target.removeEventListener) {
+      for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+        args[_key2 - 1] = arguments[_key2];
+      }
+
+      return target.removeEventListener.apply(target, args);
+    }
+  };
 }
 
 export { addEventListener, removeEventListener };

lib/AutoResizing.js

@@ -110,3 +110,3 @@ "use strict";
   divProps.style = elemStyle;
-  return _react["default"].createElement("div", (0, _extends2["default"])({}, divProps, {
+  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, divProps, {
     ref: resizeRef
@@ -113,0 +113,0 @@ }), element);

lib/carousel/Carousel.js

@@ -31,2 +31,3 @@ "use strict";
   },
+  onStateChange: function onStateChange() {},
   onActiveIndexChange: function onActiveIndexChange() {},
@@ -39,6 +40,7 @@ scrollToIndex: null
       renderItem = props.renderItem,
+      onStateChange = props.onStateChange,
       onActiveIndexChange = props.onActiveIndexChange,
       scrollToIndex = props.scrollToIndex,
       children = props.children,
-      playerProps = (0, _objectWithoutPropertiesLoose2["default"])(props, ["itemCount", "renderItem", "onActiveIndexChange", "scrollToIndex", "children"]);
+      playerProps = (0, _objectWithoutPropertiesLoose2["default"])(props, ["itemCount", "renderItem", "onStateChange", "onActiveIndexChange", "scrollToIndex", "children"]);
   var width = playerProps.width,
@@ -55,13 +57,20 @@ height = playerProps.height,
   var prevStateRef = (0, _usePrevRef.usePrevRef)(state);
-  var activeIndex = state.activeIndex,
-      itemCount = state.itemCount,
-      scrollTo = state.scrollTo,
-      player = state.player;
-  var output = {
-    activeIndex: activeIndex,
-    itemCount: itemCount
-  };
   var prevState = prevStateRef.current;
+  var onPlayerStateChange = (0, _react.useCallback)(function (value) {
+    dispatch({
+      type: 'setPlayer',
+      value: value
+    });
+  }, []);
   (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
-    if (prevState.activeIndex !== activeIndex) {
+    if (prevState !== state) {
+      onStateChange(state);
+    }
+
+    var output = {
+      activeIndex: state.activeIndex,
+      itemCount: state.itemCount
+    };
+
+    if (prevState.activeIndex !== state.activeIndex) {
       onActiveIndexChange(output);
@@ -83,28 +92,20 @@ }
   }, [scrollToIndex]);
-  playerProps.scrollTo = scrollTo;
+  playerProps.scrollTo = state.scrollTo;
+  playerProps.onStateChange = onPlayerStateChange;
 
-  playerProps.renderOverlay = function (padAttrs) {
+  playerProps.renderOverlay = function (pad) {
     var element = typeof children === 'function' ? children(state) : children;
-    return _react["default"].createElement(_react.Fragment, null, renderOverlay(padAttrs), element);
+    return /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, renderOverlay(pad), element);
   };
 
-  return _react["default"].createElement(_Player["default"], playerProps, function (nextPlayer) {
-    if (player !== nextPlayer) {
-      dispatch({
-        type: 'setPlayer',
-        value: nextPlayer
-      });
-    }
-
-    var gridProps = {
-      width: width,
-      height: height,
-      itemWidth: width,
-      itemHeight: height,
-      direction: direction,
-      itemCount: gridItemCount,
-      renderItem: renderItem
-    };
-    return _react["default"].createElement(_GridContent["default"], gridProps);
-  });
+  var gridProps = {
+    width: width,
+    height: height,
+    itemWidth: width,
+    itemHeight: height,
+    direction: direction,
+    itemCount: gridItemCount,
+    renderItem: renderItem
+  };
+  return /*#__PURE__*/_react["default"].createElement(_Player["default"], playerProps, /*#__PURE__*/_react["default"].createElement(_GridContent["default"], gridProps));
 }
@@ -111,0 +112,0 @@

lib/carousel/Player.js

@@ -18,2 +18,6 @@ "use strict";
 
+var _useIsomorphicLayoutEffect = require("../hooks/useIsomorphicLayoutEffect");
+
+var _usePrevRef = require("../hooks/usePrevRef");
+
 var _ListContent = _interopRequireDefault(require("../pad/ListContent"));
@@ -27,3 +31,4 @@
   autoplayEnabled: true,
-  autoplayInterval: 5000
+  autoplayInterval: 5000,
+  onStateChange: function onStateChange() {}
 }, _Pad["default"].defaultProps, {
@@ -39,4 +44,5 @@ pagingEnabled: true,
       autoplayInterval = props.autoplayInterval,
+      onStateChange = props.onStateChange,
       children = props.children,
-      padProps = (0, _objectWithoutPropertiesLoose2["default"])(props, ["direction", "loop", "autoplayEnabled", "autoplayInterval", "children"]);
+      padProps = (0, _objectWithoutPropertiesLoose2["default"])(props, ["direction", "loop", "autoplayEnabled", "autoplayInterval", "onStateChange", "children"]);
   var padScrollTo = padProps.scrollTo,
@@ -50,7 +56,4 @@ onMouseEnter = padProps.onMouseEnter,
 
-  var mouseEntered = state.mouseEntered,
-      loopCount = state.loopCount,
-      loopOffset = state.loopOffset,
-      scrollTo = state.scrollTo,
-      pad = state.pad;
+  var prevStateRef = (0, _usePrevRef.usePrevRef)(state);
+  var prevState = prevStateRef.current;
   var onPadMouseEnter = (0, _react.useCallback)(function (evt) {
@@ -76,4 +79,15 @@ dispatch({
   }, [onMouseLeave]);
+  var onPadStateChange = (0, _react.useCallback)(function (value) {
+    dispatch({
+      type: 'setPad',
+      value: value
+    });
+  }, []);
+  (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
+    if (prevState !== state) {
+      onStateChange(state);
+    }
+  });
   (0, _react.useEffect)(function () {
-    if (!autoplayEnabled || mouseEntered || pad.drag || pad.deceleration) {
+    if (!autoplayEnabled || state.mouseEntered || state.pad.drag || state.pad.deceleration) {
       return;
@@ -90,3 +104,3 @@ }
     };
-  }, [autoplayEnabled, autoplayInterval, mouseEntered, pad.drag, pad.deceleration]);
+  }, [autoplayEnabled, autoplayInterval, state.mouseEntered, state.pad.drag, state.pad.deceleration]);
   (0, _react.useMemo)(function () {
@@ -104,3 +118,4 @@ dispatch({
   }, [padScrollTo]);
-  padProps.scrollTo = scrollTo;
+  padProps.scrollTo = state.scrollTo;
+  padProps.onStateChange = onPadStateChange;
 
@@ -118,24 +133,15 @@ if (direction === 'x') {
 
-  return _react["default"].createElement(_Pad["default"], padProps, function (nextPad) {
-    if (pad !== nextPad) {
-      dispatch({
-        type: 'setPad',
-        value: nextPad
-      });
+  var element = typeof children === 'function' ? children(state) : children;
+  return /*#__PURE__*/_react["default"].createElement(_Pad["default"], padProps, /*#__PURE__*/_react["default"].createElement(_ListContent["default"], {
+    direction: direction,
+    itemCount: state.loopCount,
+    renderItem: function renderItem(_ref) {
+      var Item = _ref.Item,
+          itemIndex = _ref.itemIndex;
+      return /*#__PURE__*/_react["default"].createElement(Item, {
+        key: itemIndex + state.loopOffset,
+        hash: "Player_loop"
+      }, element);
     }
-
-    var element = typeof children === 'function' ? children(state) : children;
-    return _react["default"].createElement(_ListContent["default"], {
-      direction: direction,
-      itemCount: loopCount,
-      renderItem: function renderItem(_ref) {
-        var Item = _ref.Item,
-            itemIndex = _ref.itemIndex;
-        return _react["default"].createElement(Item, {
-          key: itemIndex + loopOffset,
-          hash: "Player_loop"
-        }, element);
-      }
-    });
-  });
+  }));
 }
@@ -142,0 +148,0 @@

lib/hooks/useIsomorphicLayoutEffect.js

@@ -8,9 +8,4 @@ "use strict";
 
-// https://github.com/reduxjs/react-redux/blob/v7-beta/src/components/connectAdvanced.js#L35
-// React currently throws a warning when using useLayoutEffect on the server.
-// To get around it, we can conditionally useEffect on the server (no-op) and
-// useLayoutEffect in the browser. We need useLayoutEffect because we want
-// `connect` to perform sync updates to a ref to save the latest props after
-// a render is actually committed to the DOM.
-var useIsomorphicLayoutEffect = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined' ? _react.useLayoutEffect : _react.useEffect;
+// suppress the useLayoutEffect warning on server side.
+var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? _react.useLayoutEffect : _react.useEffect;
 exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;

lib/hooks/usePrevRef.js

@@ -8,8 +8,8 @@ "use strict";
 
-function usePrevRef(current) {
-  var ref = (0, _react.useRef)(current);
+function usePrevRef(input) {
+  var ref = (0, _react.useRef)(input);
   (0, _react.useEffect)(function () {
-    ref.current = current;
-  });
+    ref.current = input;
+  }, [input]);
   return ref;
 }

lib/infinite/Infinite.js

@@ -41,2 +41,3 @@ "use strict";
   },
+  onStateChange: function onStateChange() {},
   scrollToIndex: null
@@ -56,5 +57,6 @@ }, _Pad["default"].defaultProps, {
       renderFooter = props.renderFooter,
+      onStateChange = props.onStateChange,
       scrollToIndex = props.scrollToIndex,
       children = props.children,
-      padProps = (0, _objectWithoutPropertiesLoose2["default"])(props, ["direction", "spacing", "itemCount", "estimatedItemWidth", "estimatedItemHeight", "renderItem", "renderHeader", "renderFooter", "scrollToIndex", "children"]);
+      padProps = (0, _objectWithoutPropertiesLoose2["default"])(props, ["direction", "spacing", "itemCount", "estimatedItemWidth", "estimatedItemHeight", "renderItem", "renderHeader", "renderFooter", "onStateChange", "scrollToIndex", "children"]);
   var width = padProps.width,
@@ -69,10 +71,17 @@ height = padProps.height,
   var prevStateRef = (0, _usePrevRef.usePrevRef)(state);
+  var prevState = prevStateRef.current;
   var listRef = (0, _react.useRef)({});
-  var scrollToRect = state.scrollToRect,
-      scrolling = state.scrolling,
-      pad = state.pad;
-  var prevState = prevStateRef.current;
+  var onPadStateChange = (0, _react.useCallback)(function (value) {
+    dispatch({
+      type: 'setPad',
+      value: value
+    });
+  }, []);
   (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
-    if (prevState.pad.contentSize !== pad.contentSize) {
-      if (scrolling && scrollToIndex) {
+    if (prevState !== state) {
+      onStateChange(state);
+    }
+
+    if (prevState.pad.contentSize !== state.pad.contentSize) {
+      if (state.scrolling && scrollToIndex) {
         dispatch((0, _extends2["default"])({
@@ -87,4 +96,4 @@ type: 'scrollToIndex'
   (0, _react.useEffect)(function () {
-    if (prevState.pad.deceleration !== pad.deceleration) {
-      if (!pad.deceleration && scrolling) {
+    if (prevState.pad.deceleration !== state.pad.deceleration) {
+      if (!state.pad.deceleration && state.scrolling) {
         dispatch({
@@ -111,3 +120,4 @@ type: 'endScrolling'
   }, [scrollToIndex]);
-  padProps.scrollToRect = scrollToRect;
+  padProps.scrollToRect = state.scrollToRect;
+  padProps.onStateChange = onPadStateChange;
 
@@ -124,49 +134,40 @@ if (direction === 'x') {
 
-  return _react["default"].createElement(_Pad["default"], padProps, function (nextPad) {
-    if (pad !== nextPad) {
-      dispatch({
-        type: 'setPad',
-        value: nextPad
-      });
-    }
+  var listProps = {
+    width: width,
+    height: height,
+    direction: direction,
+    itemCount: 3,
+    renderItem: function renderItem(attrs) {
+      var itemIndex = attrs.itemIndex,
+          Item = attrs.Item;
 
-    var listProps = {
-      width: width,
-      height: height,
-      direction: direction,
-      itemCount: 3,
-      renderItem: function renderItem(attrs) {
-        var itemIndex = attrs.itemIndex,
-            Item = attrs.Item;
+      if (itemIndex === 0) {
+        return renderHeader(attrs);
+      }
 
-        if (itemIndex === 0) {
-          return renderHeader(attrs);
-        }
+      if (itemIndex === 2) {
+        return renderFooter(attrs);
+      }
 
-        if (itemIndex === 2) {
-          return renderFooter(attrs);
-        }
-
-        var listProps = {
-          width: width,
-          height: height,
-          direction: direction,
-          spacing: spacing,
-          itemCount: itemCount,
-          estimatedItemWidth: estimatedItemWidth,
-          estimatedItemHeight: estimatedItemHeight,
-          renderItem: _renderItem
-        };
-        return _react["default"].createElement(Item, {
-          hash: "Infinite_body",
-          forceRender: true
-        }, _react["default"].createElement(_ListContent["default"], listProps, function (layout) {
-          listRef.current.body = layout;
-        }));
-      }
-    };
-    return _react["default"].createElement(_ListContent["default"], listProps, function (layout) {
-      listRef.current.box = layout;
-    });
-  });
+      var listProps = {
+        width: width,
+        height: height,
+        direction: direction,
+        spacing: spacing,
+        itemCount: itemCount,
+        estimatedItemWidth: estimatedItemWidth,
+        estimatedItemHeight: estimatedItemHeight,
+        renderItem: _renderItem
+      };
+      return /*#__PURE__*/_react["default"].createElement(Item, {
+        hash: "Infinite_body",
+        forceRender: true
+      }, /*#__PURE__*/_react["default"].createElement(_ListContent["default"], listProps, function (layout) {
+        listRef.current.body = layout;
+      }));
+    }
+  };
+  return /*#__PURE__*/_react["default"].createElement(_Pad["default"], padProps, /*#__PURE__*/_react["default"].createElement(_ListContent["default"], listProps, function (layout) {
+    listRef.current.box = layout;
+  }));
 }
@@ -173,0 +174,0 @@

lib/pad/GeneralContent.js

@@ -26,7 +26,2 @@ "use strict";
       children = props.children;
-
-  var _useState = (0, _react.useState)(null),
-      size = _useState[0],
-      setSize = _useState[1];
-
   var itemRef = (0, _react.useRef)({});
@@ -41,23 +36,15 @@ (0, _react.useEffect)(function () {
         calculateSize = _itemRef$current.calculateSize;
+    var resizeNode = getResizeNode();
 
-    if (size) {
-      var resizeNode = getResizeNode();
+    _resizeDetector["default"].listenTo(resizeNode, function () {
+      calculateSize();
+    });
 
-      _resizeDetector["default"].listenTo(resizeNode, function () {
-        calculateSize();
-      });
-
-      return function () {
-        _resizeDetector["default"].uninstall(resizeNode);
-      };
-    }
-  }, [width, height, size]);
-  return _react["default"].createElement(_ItemContent["default"], props, function (nextSize, apis) {
+    return function () {
+      _resizeDetector["default"].uninstall(resizeNode);
+    };
+  }, [width, height]);
+  return /*#__PURE__*/_react["default"].createElement(_ItemContent["default"], props, function (size, apis) {
     itemRef.current = apis;
-
-    if (size !== nextSize) {
-      setSize(nextSize);
-    }
-
-    return typeof children === 'function' ? children(nextSize, apis) : children;
+    return typeof children === 'function' ? children(size, apis) : children;
   });
@@ -64,0 +51,0 @@ }

lib/pad/GridContent.js

@@ -124,3 +124,3 @@ "use strict";
     } else {
-      element = _react["default"].createElement("div", {
+      element = /*#__PURE__*/_react["default"].createElement("div", {
         style: itemStyle
@@ -130,3 +130,3 @@ }, element);
 
-    return _react["default"].createElement(_PadContext["default"].Provider, {
+    return /*#__PURE__*/_react["default"].createElement(_PadContext["default"].Provider, {
       key: key,
@@ -166,3 +166,3 @@ value: (0, _extends2["default"])({}, context, {
 
-  return _react["default"].createElement("div", divProps, items);
+  return /*#__PURE__*/_react["default"].createElement("div", divProps, items);
 }
@@ -169,0 +169,0 @@

lib/pad/ItemContent.js

@@ -99,16 +99,5 @@ "use strict";
 
-  element = _react["default"].createElement("div", {
-    ref: resizeRef,
-    style: resizeStyle
-  }, element);
-
   if (size) {
     elemStyle.width = size.width;
     elemStyle.height = size.height;
-  } else {
-    element = _react["default"].createElement("div", {
-      style: {
-        position: 'absolute'
-      }
-    }, element);
   }
@@ -121,7 +110,16 @@
   divProps.style = elemStyle;
-  return _react["default"].createElement(_PadContext["default"].Provider, {
+  return /*#__PURE__*/_react["default"].createElement(_PadContext["default"].Provider, {
     value: (0, _extends2["default"])({}, context, {
       resizeContent: resizeContent
     })
-  }, _react["default"].createElement("div", divProps, element));
+  }, /*#__PURE__*/_react["default"].createElement("div", divProps, /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      position: 'absolute',
+      top: 0,
+      left: 0
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    ref: resizeRef,
+    style: resizeStyle
+  }, element))));
 }
@@ -128,0 +126,0 @@

lib/pad/ListContent.js

@@ -174,3 +174,3 @@ "use strict";
 
-      element = _react["default"].createElement(_ItemContent["default"], (0, _extends3["default"])({}, sizeProps, {
+      element = /*#__PURE__*/_react["default"].createElement(_ItemContent["default"], (0, _extends3["default"])({}, sizeProps, {
         style: itemStyle
@@ -190,3 +190,3 @@ }), element);
 
-    return _react["default"].createElement(_PadContext["default"].Provider, {
+    return /*#__PURE__*/_react["default"].createElement(_PadContext["default"].Provider, {
       key: key,
@@ -230,3 +230,3 @@ value: (0, _extends3["default"])({}, context, {
 
-  return _react["default"].createElement("div", divProps, items);
+  return /*#__PURE__*/_react["default"].createElement("div", divProps, items);
 }
@@ -233,0 +233,0 @@

lib/pad/Pad.js

@@ -41,2 +41,3 @@ "use strict";
   alwaysBounceY: true,
+  onStateChange: function onStateChange() {},
   onScroll: function onScroll() {},
@@ -65,2 +66,3 @@ onDragStart: function onDragStart() {},
       alwaysBounceY = props.alwaysBounceY,
+      onStateChange = props.onStateChange,
       onScroll = props.onScroll,
@@ -77,3 +79,3 @@ onDragStart = props.onDragStart,
       children = props.children,
-      pannableProps = (0, _objectWithoutPropertiesLoose2["default"])(props, ["width", "height", "pagingEnabled", "directionalLockEnabled", "alwaysBounceX", "alwaysBounceY", "onScroll", "onDragStart", "onDragEnd", "onDecelerationStart", "onDecelerationEnd", "onContentResize", "renderBackground", "renderOverlay", "scrollTo", "scrollToRect", "children"]);
+      pannableProps = (0, _objectWithoutPropertiesLoose2["default"])(props, ["width", "height", "pagingEnabled", "directionalLockEnabled", "alwaysBounceX", "alwaysBounceY", "onStateChange", "onScroll", "onDragStart", "onDragEnd", "onDecelerationStart", "onDecelerationEnd", "onContentResize", "renderBackground", "renderOverlay", "scrollTo", "scrollToRect", "children"]);
   var enabled = pannableProps.enabled,
@@ -87,28 +89,13 @@ shouldStart = pannableProps.shouldStart;
   var prevStateRef = (0, _usePrevRef.usePrevRef)(state);
-  var size = state.size,
-      contentSize = state.contentSize,
-      contentOffset = state.contentOffset,
-      contentVelocity = state.contentVelocity,
-      drag = state.drag,
-      deceleration = state.deceleration,
-      pannable = state.pannable;
-  var output = {
-    size: size,
-    contentSize: contentSize,
-    contentOffset: contentOffset,
-    contentVelocity: contentVelocity,
-    dragging: !!drag,
-    decelerating: !!deceleration
-  };
   var prevState = prevStateRef.current;
-  var resizeContent = (0, _react.useCallback)(function (nextContentSize) {
-    if (!(0, _geometry.isEqualToSize)(contentSize, nextContentSize)) {
+  var resizeContent = (0, _react.useCallback)(function (contentSize) {
+    if (!(0, _geometry.isEqualToSize)(state.contentSize, contentSize)) {
       dispatch({
         type: 'setContentSize',
-        value: nextContentSize
+        value: contentSize
       });
     }
-  }, [contentSize]);
+  }, [state.contentSize]);
   var shouldPannableStart = (0, _react.useCallback)(function (evt) {
-    if (directionalLockEnabled && !shouldDragStart(evt.velocity, size, contentSize)) {
+    if (directionalLockEnabled && !shouldDragStart(evt.velocity, state.size, state.contentSize)) {
       return false;
@@ -118,6 +105,12 @@ }
     return shouldStart(evt);
-  }, [shouldStart, directionalLockEnabled, size, contentSize]);
+  }, [shouldStart, directionalLockEnabled, state.size, state.contentSize]);
+  var onPannableStateChange = (0, _react.useCallback)(function (value) {
+    dispatch({
+      type: 'setPannable',
+      value: value
+    });
+  }, []);
   (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
-    if (prevState.pannable.translation !== pannable.translation) {
-      if (pannable.translation) {
+    if (prevState.pannable.translation !== state.pannable.translation) {
+      if (state.pannable.translation) {
         if (prevState.pannable.translation) {
@@ -145,14 +138,27 @@ dispatch({
 
-    if (prevState.contentSize !== contentSize) {
-      onContentResize(contentSize);
+    if (prevState !== state) {
+      onStateChange(state);
     }
 
-    if (prevState.contentOffset !== contentOffset) {
+    var output = {
+      size: state.size,
+      contentSize: state.contentSize,
+      contentOffset: state.contentOffset,
+      contentVelocity: state.contentVelocity,
+      dragging: !!state.drag,
+      decelerating: !!state.deceleration
+    };
+
+    if (prevState.contentSize !== state.contentSize) {
+      onContentResize(state.contentSize);
+    }
+
+    if (prevState.contentOffset !== state.contentOffset) {
       onScroll(output);
     }
 
-    if (prevState.drag !== drag) {
+    if (prevState.drag !== state.drag) {
       if (!prevState.drag) {
         onDragStart(output);
-      } else if (!drag) {
+      } else if (!state.drag) {
         onDragEnd(output);
@@ -162,6 +168,6 @@ }
 
-    if (prevState.deceleration !== deceleration) {
+    if (prevState.deceleration !== state.deceleration) {
       if (!prevState.deceleration) {
         onDecelerationStart(output);
-      } else if (!deceleration) {
+      } else if (!state.deceleration) {
         onDecelerationEnd(output);
@@ -219,5 +225,5 @@ }
       position: 'absolute',
-      width: contentSize.width,
-      height: contentSize.height,
-      transformTranslate: contentOffset,
+      width: state.contentSize.width,
+      height: state.contentSize.height,
+      transformTranslate: state.contentOffset,
       willChange: 'transform'
@@ -238,3 +244,3 @@ });
     } else {
-      element = _react["default"].createElement(_GeneralContent["default"], {
+      element = /*#__PURE__*/_react["default"].createElement(_GeneralContent["default"], {
         style: contentStyle
@@ -248,3 +254,3 @@ }, element);
   function buildBackground() {
-    var element = renderBackground(output);
+    var element = renderBackground(state);
 
@@ -262,3 +268,3 @@ if (element === null || element === undefined) {
     };
-    return _react["default"].createElement("div", {
+    return /*#__PURE__*/_react["default"].createElement("div", {
       style: elemStyle
@@ -269,11 +275,12 @@ }, element);
   function buildOverlay() {
-    return renderOverlay(output);
+    return renderOverlay(state);
   }
 
   pannableProps.shouldStart = shouldPannableStart;
+  pannableProps.onStateChange = onPannableStateChange;
   var elemStyle = {
     overflow: 'hidden',
     position: 'relative',
-    width: size.width,
-    height: size.height
+    width: state.size.width,
+    height: state.size.height
   };
@@ -286,23 +293,14 @@
   pannableProps.style = elemStyle;
-  return _react["default"].createElement(_Pannable["default"], pannableProps, function (nextPannable) {
-    if (pannable !== nextPannable) {
-      dispatch({
-        type: 'setPannable',
-        value: nextPannable
-      });
+  var visibleRect = {
+    x: -state.contentOffset.x,
+    y: -state.contentOffset.y,
+    width: state.size.width,
+    height: state.size.height
+  };
+  return /*#__PURE__*/_react["default"].createElement(_Pannable["default"], pannableProps, /*#__PURE__*/_react["default"].createElement(_PadContext["default"].Provider, {
+    value: {
+      visibleRect: visibleRect,
+      resizeContent: resizeContent
     }
-
-    var visibleRect = {
-      x: -contentOffset.x,
-      y: -contentOffset.y,
-      width: size.width,
-      height: size.height
-    };
-    return _react["default"].createElement(_PadContext["default"].Provider, {
-      value: {
-        visibleRect: visibleRect,
-        resizeContent: resizeContent
-      }
-    }, buildBackground(), buildContent(), buildOverlay());
-  });
+  }, buildBackground(), buildContent(), buildOverlay()));
 }
@@ -309,0 +307,0 @@

lib/Pannable.js

@@ -31,2 +31,3 @@ "use strict";
   },
+  onStateChange: function onStateChange() {},
   onStart: function onStart() {},
@@ -41,2 +42,3 @@ onMove: function onMove() {},
       shouldStart = props.shouldStart,
+      onStateChange = props.onStateChange,
       onStart = props.onStart,
@@ -47,3 +49,3 @@ onMove = props.onMove,
       children = props.children,
-      divProps = (0, _objectWithoutPropertiesLoose2["default"])(props, ["enabled", "shouldStart", "onStart", "onMove", "onEnd", "onCancel", "children"]);
+      divProps = (0, _objectWithoutPropertiesLoose2["default"])(props, ["enabled", "shouldStart", "onStateChange", "onStart", "onMove", "onEnd", "onCancel", "children"]);
 
@@ -55,168 +57,143 @@ var _useReducer = (0, _react.useReducer)(_pannableReducer.reducer, _pannableReducer.initialState),
   var prevStateRef = (0, _usePrevRef.usePrevRef)(state);
+  var prevState = prevStateRef.current;
   var elemRef = (0, _react.useRef)(null);
-  var innerRef = (0, _react.useRef)({
-    touchSupported: false
-  });
+  var innerRef = (0, _react.useRef)({});
   innerRef.current.state = state;
   innerRef.current.shouldStart = shouldStart;
-  var target = state.target,
-      translation = state.translation,
-      velocity = state.velocity,
-      interval = state.interval;
-  var prevState = prevStateRef.current;
+  var touchSupported = typeof window !== undefined ? 'ontouchstart' in document : true;
+  var track = (0, _react.useCallback)(function (target, point) {
+    dispatch({
+      type: 'track',
+      target: target,
+      point: point,
+      now: new Date().getTime()
+    });
+  }, []);
+  var move = (0, _react.useCallback)(function (point) {
+    dispatch({
+      type: 'move',
+      point: point,
+      now: new Date().getTime(),
+      shouldStart: innerRef.current.shouldStart
+    });
+  }, []);
+  var end = (0, _react.useCallback)(function () {
+    dispatch({
+      type: 'end'
+    });
+  }, []);
   (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
-    function track(target, point) {
-      dispatch({
-        type: 'track',
-        target: target,
-        point: point,
-        now: new Date().getTime()
-      });
+    if (!enabled) {
+      return;
     }
 
-    function onTouchStart(evt) {
-      innerRef.current.touchSupported = true;
-
-      if (evt.touches && evt.touches.length === 1) {
-        var touchEvent = evt.touches[0];
-        track(touchEvent.target, {
-          x: touchEvent.pageX,
-          y: touchEvent.pageY
-        });
-      }
-    }
-
-    function onTouchMove(evt) {
+    var preventDefaultIfMoving = function preventDefaultIfMoving(evt) {
       if (innerRef.current.state.translation) {
         evt.preventDefault();
       }
-    }
+    };
 
-    function onMouseDown(evt) {
-      if (innerRef.current.touchSupported) {
-        return;
-      }
+    if (state.target) {
+      if (touchSupported) {
+        var onTargetTouchMove = function onTargetTouchMove(evt) {
+          preventDefaultIfMoving(evt);
+          var touchEvent = evt.touches[0];
+          move({
+            x: touchEvent.pageX,
+            y: touchEvent.pageY
+          });
+        };
 
-      track(evt.target, {
-        x: evt.pageX,
-        y: evt.pageY
-      });
-    }
+        var onTargetTouchEnd = function onTargetTouchEnd(evt) {
+          preventDefaultIfMoving(evt);
+          end();
+        };
 
-    if (enabled) {
-      var elemNode = elemRef.current;
+        (0, _eventListener.addEventListener)(state.target, 'touchmove', onTargetTouchMove, false);
+        (0, _eventListener.addEventListener)(state.target, 'touchend', onTargetTouchEnd, false);
+        (0, _eventListener.addEventListener)(state.target, 'touchcancel', onTargetTouchEnd, false);
+        return function () {
+          (0, _eventListener.removeEventListener)(state.target, 'touchmove', onTargetTouchMove, false);
+          (0, _eventListener.removeEventListener)(state.target, 'touchend', onTargetTouchEnd, false);
+          (0, _eventListener.removeEventListener)(state.target, 'touchcancel', onTargetTouchEnd, false);
+        };
+      } else {
+        var onBodyMouseMove = function onBodyMouseMove(evt) {
+          preventDefaultIfMoving(evt);
 
-      if (!elemNode.addEventListener) {
-        return;
-      }
+          if (evt.buttons === 1) {
+            move({
+              x: evt.pageX,
+              y: evt.pageY
+            });
+          } else {
+            end();
+          }
+        };
 
-      elemNode.addEventListener('touchstart', onTouchStart, false);
-      elemNode.addEventListener('touchmove', onTouchMove, false);
-      elemNode.addEventListener('mousedown', onMouseDown, false);
-      return function () {
-        elemNode.removeEventListener('touchstart', onTouchStart, false);
-        elemNode.removeEventListener('touchmove', onTouchMove, false);
-        elemNode.removeEventListener('mousedown', onMouseDown, false);
-      };
-    }
-  }, [enabled]);
-  (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
-    function move(point) {
-      dispatch({
-        type: 'move',
-        point: point,
-        now: new Date().getTime(),
-        shouldStart: innerRef.current.shouldStart
-      });
-    }
+        var onBodyMouseUp = function onBodyMouseUp(evt) {
+          preventDefaultIfMoving(evt);
+          end();
+        };
 
-    function end() {
-      dispatch({
-        type: 'end'
-      });
-    }
+        var body = typeof document !== undefined ? document.body : null;
+        (0, _eventListener.addEventListener)(body, 'mousemove', onBodyMouseMove, false);
+        (0, _eventListener.addEventListener)(body, 'mouseup', onBodyMouseUp, false);
+        return function () {
+          (0, _eventListener.removeEventListener)(body, 'mousemove', onBodyMouseMove, false);
+          (0, _eventListener.removeEventListener)(body, 'mouseup', onBodyMouseUp, false);
+        };
+      }
+    } else {
+      var elemNode = elemRef.current;
 
-    function onTargetTouchMove(evt) {
-      var touchEvent = evt.touches[0];
+      if (touchSupported) {
+        var onTouchStart = function onTouchStart(evt) {
+          if (evt.touches && evt.touches.length === 1) {
+            var touchEvent = evt.touches[0];
+            track(touchEvent.target, {
+              x: touchEvent.pageX,
+              y: touchEvent.pageY
+            });
+          }
+        };
 
-      if (innerRef.current.state.translation) {
-        evt.preventDefault();
-      }
+        (0, _eventListener.addEventListener)(elemNode, 'touchstart', onTouchStart, false);
+        return function () {
+          (0, _eventListener.removeEventListener)(elemNode, 'touchstart', onTouchStart, false);
+        };
+      } else {
+        var onMouseDown = function onMouseDown(evt) {
+          if (evt.buttons === 1) {
+            track(evt.target, {
+              x: evt.pageX,
+              y: evt.pageY
+            });
+          }
+        };
 
-      move({
-        x: touchEvent.pageX,
-        y: touchEvent.pageY
-      });
-    }
-
-    function onTargetTouchEnd(evt) {
-      if (innerRef.current.state.translation) {
-        evt.preventDefault();
+        (0, _eventListener.addEventListener)(elemNode, 'mousedown', onMouseDown, false);
+        return function () {
+          (0, _eventListener.removeEventListener)(elemNode, 'mousedown', onMouseDown, false);
+        };
       }
-
-      end();
     }
-
-    function onRootMouseMove(evt) {
-      evt.preventDefault();
-      move({
-        x: evt.pageX,
-        y: evt.pageY
-      });
+  }, [enabled, state.target, track, move, end]);
+  (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
+    if (prevState !== state) {
+      onStateChange(state);
     }
 
-    function onRootMouseUp(evt) {
-      evt.preventDefault();
-      end();
-    }
-
-    if (!target) {
-      return;
-    }
-
-    if (innerRef.current.touchSupported) {
-      target.addEventListener('touchmove', onTargetTouchMove, false);
-      target.addEventListener('touchend', onTargetTouchEnd, false);
-      target.addEventListener('touchcancel', onTargetTouchEnd, false);
-      return function () {
-        target.removeEventListener('touchmove', onTargetTouchMove, false);
-        target.removeEventListener('touchend', onTargetTouchEnd, false);
-        target.removeEventListener('touchcancel', onTargetTouchEnd, false);
-      };
-    } else {
-      (0, _eventListener.addEventListener)('mousemove', onRootMouseMove, false);
-      (0, _eventListener.addEventListener)('mouseup', onRootMouseUp, false);
-      return function () {
-        (0, _eventListener.removeEventListener)('mousemove', onRootMouseMove, false);
-        (0, _eventListener.removeEventListener)('mouseup', onRootMouseUp, false);
-      };
-    }
-  }, [target]);
-  (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
-    if (prevState.translation !== translation) {
-      if (translation) {
-        var output = {
-          target: target,
-          translation: translation,
-          velocity: velocity,
-          interval: interval
-        };
-
+    if (prevState.translation !== state.translation) {
+      if (state.translation) {
         if (prevState.translation) {
-          onMove(output);
+          onMove(state);
         } else {
-          onStart(output);
+          onStart(state);
         }
       } else if (prevState.translation) {
-        var _output = {
-          target: prevState.target,
-          translation: prevState.translation,
-          velocity: prevState.velocity,
-          interval: prevState.interval
-        };
-
         if (enabled) {
-          onEnd(_output);
+          onEnd(prevState);
         } else {
-          onCancel(_output);
+          onCancel(prevState);
         }
@@ -235,3 +212,3 @@ }
 
-  if (translation) {
+  if (state.translation) {
     Object.assign(elemStyle, _StyleSheet["default"].create({
@@ -250,3 +227,3 @@ touchAction: 'none',
   var element = typeof children === 'function' ? children(state) : children;
-  return _react["default"].createElement("div", (0, _extends2["default"])({}, divProps, {
+  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, divProps, {
     ref: elemRef
@@ -253,0 +230,0 @@ }), element);

lib/pannableReducer.js

@@ -37,3 +37,8 @@ "use strict";
   var target = state.target;
-  return target ? initialState : state;
+
+  if (!target) {
+    return state;
+  }
+
+  return initialState;
 }
@@ -76,2 +81,3 @@
   };
+  /* on moving */
 
@@ -91,4 +97,10 @@ if (translation) {
   var dist = Math.sqrt(Math.pow(nextTranslation.x, 2) + Math.pow(nextTranslation.y, 2));
+  /* not started yet  */
 
-  if (dist <= MIN_DISTANCE) {
+  if (dist <= MIN_DISTANCE || !shouldStart({
+    target: target,
+    translation: nextTranslation,
+    velocity: nextVelocity,
+    interval: nextInterval
+  })) {
     return {
@@ -104,11 +116,4 @@ target: target,
   }
+  /* start moving */
 
-  if (!shouldStart({
-    target: target,
-    translation: nextTranslation,
-    velocity: nextVelocity,
-    interval: nextInterval
-  })) {
-    return initialState;
-  }
 
@@ -115,0 +120,0 @@ return {

lib/utils/eventListener.js

@@ -15,4 +15,21 @@ "use strict";
 if (typeof window !== undefined) {
-  exports.addEventListener = addEventListener = window.addEventListener;
-  exports.removeEventListener = removeEventListener = window.removeEventListener;
+  exports.addEventListener = addEventListener = function addEventListener(target) {
+    if (target && target.addEventListener) {
+      for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+        args[_key - 1] = arguments[_key];
+      }
+
+      return target.addEventListener.apply(target, args);
+    }
+  };
+
+  exports.removeEventListener = removeEventListener = function removeEventListener(target) {
+    if (target && target.removeEventListener) {
+      for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+        args[_key2 - 1] = arguments[_key2];
+      }
+
+      return target.removeEventListener.apply(target, args);
+    }
+  };
 }

package.json

 {
   "name": "react-pannable",
-  "version": "3.3.1",
+  "version": "3.4.0",
   "description": "Flexible and Customizable Layouts for Scrolling Content with React",
@@ -56,3 +56,3 @@ "keywords": [
     "prebuild": "yarn clean",
-    "test": "jest",
+    "test": "jest -v",
     "pretest": "yarn lint && yarn build",
@@ -71,31 +71,31 @@ "prepare": "yarn test",
     "@babel/cli": "^7.8.4",
-    "@babel/core": "^7.8.6",
-    "@babel/plugin-proposal-object-rest-spread": "^7.8.3",
-    "@babel/plugin-transform-react-jsx": "^7.8.3",
-    "@babel/plugin-transform-runtime": "^7.8.3",
-    "@babel/preset-env": "^7.8.6",
-    "@typescript-eslint/eslint-plugin": "^2.21.0",
-    "@typescript-eslint/parser": "^2.21.0",
+    "@babel/core": "^7.9.0",
+    "@babel/plugin-proposal-object-rest-spread": "^7.9.5",
+    "@babel/plugin-transform-react-jsx": "^7.9.4",
+    "@babel/plugin-transform-runtime": "^7.9.0",
+    "@babel/preset-env": "^7.9.5",
+    "@typescript-eslint/eslint-plugin": "^2.29.0",
+    "@typescript-eslint/parser": "^2.29.0",
     "babel-eslint": "^10.1.0",
-    "babel-jest": "^25.1.0",
-    "coveralls": "^3.0.9",
+    "babel-jest": "^25.4.0",
+    "coveralls": "^3.0.13",
     "eslint": "^6.8.0",
-    "eslint-config-react-app": "^5.2.0",
-    "eslint-plugin-flowtype": "^3.13.0",
-    "eslint-plugin-import": "^2.20.1",
+    "eslint-config-react-app": "^5.2.1",
+    "eslint-plugin-flowtype": "^4.7.0",
+    "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-react": "^7.18.3",
-    "eslint-plugin-react-hooks": "^1.7.0",
-    "jest": "^25.1.0",
+    "eslint-plugin-react": "^7.19.0",
+    "eslint-plugin-react-hooks": "^2.5.1",
+    "jest": "^25.4.0",
     "react": "^16.8.3",
     "react-test-renderer": "^16.8.3",
     "rimraf": "^3.0.2",
-    "rollup": "^1.32.0",
-    "rollup-plugin-babel": "^4.3.3",
-    "@rollup/plugin-commonjs": "^11.0.2",
-    "@rollup/plugin-node-resolve": "^7.1.1",
-    "@rollup/plugin-replace": "^2.3.1",
-    "rollup-plugin-terser": "^5.1.3",
+    "rollup": "^2.7.1",
+    "rollup-plugin-babel": "^4.4.0",
+    "@rollup/plugin-commonjs": "^11.1.0",
+    "@rollup/plugin-node-resolve": "^7.1.3",
+    "@rollup/plugin-replace": "^2.3.2",
+    "rollup-plugin-terser": "^5.3.0",
     "typescript": "^3.8.3"
   }
 }

src/carousel/Carousel.js

@@ -1,2 +0,2 @@
-import React, { Fragment, useMemo, useReducer } from 'react';
+import React, { Fragment, useMemo, useCallback, useReducer } from 'react';
 import { useIsomorphicLayoutEffect } from '../hooks/useIsomorphicLayoutEffect';
@@ -11,2 +11,3 @@ import { usePrevRef } from '../hooks/usePrevRef';
   renderItem: () => null,
+  onStateChange: () => {},
   onActiveIndexChange: () => {},
@@ -21,2 +22,3 @@ scrollToIndex: null,
     renderItem,
+    onStateChange,
     onActiveIndexChange,
@@ -36,9 +38,19 @@ scrollToIndex,
   const prevStateRef = usePrevRef(state);
-
-  const { activeIndex, itemCount, scrollTo, player } = state;
-  const output = { activeIndex, itemCount };
   const prevState = prevStateRef.current;
 
+  const onPlayerStateChange = useCallback(value => {
+    dispatch({ type: 'setPlayer', value });
+  }, []);
+
   useIsomorphicLayoutEffect(() => {
-    if (prevState.activeIndex !== activeIndex) {
+    if (prevState !== state) {
+      onStateChange(state);
+    }
+
+    const output = {
+      activeIndex: state.activeIndex,
+      itemCount: state.itemCount,
+    };
+
+    if (prevState.activeIndex !== state.activeIndex) {
       onActiveIndexChange(output);
@@ -58,4 +70,5 @@ }
 
-  playerProps.scrollTo = scrollTo;
-  playerProps.renderOverlay = padAttrs => {
+  playerProps.scrollTo = state.scrollTo;
+  playerProps.onStateChange = onPlayerStateChange;
+  playerProps.renderOverlay = pad => {
     const element = typeof children === 'function' ? children(state) : children;
@@ -65,3 +78,3 @@
       <Fragment>
-        {renderOverlay(padAttrs)}
+        {renderOverlay(pad)}
         {element}
@@ -72,21 +85,15 @@ </Fragment>
 
+  const gridProps = {
+    width,
+    height,
+    itemWidth: width,
+    itemHeight: height,
+    direction,
+    itemCount: gridItemCount,
+    renderItem,
+  };
+
   return (
     <Player {...playerProps}>
-      {nextPlayer => {
-        if (player !== nextPlayer) {
-          dispatch({ type: 'setPlayer', value: nextPlayer });
-        }
-
-        const gridProps = {
-          width,
-          height,
-          itemWidth: width,
-          itemHeight: height,
-          direction,
-          itemCount: gridItemCount,
-          renderItem,
-        };
-
-        return <GridContent {...gridProps} />;
-      }}
+      <GridContent {...gridProps} />
     </Player>
@@ -93,0 +100,0 @@ );

src/carousel/Player.js

 import React, { useCallback, useMemo, useReducer, useEffect } from 'react';
 import Pad from '../pad/Pad';
+import { useIsomorphicLayoutEffect } from '../hooks/useIsomorphicLayoutEffect';
+import { usePrevRef } from '../hooks/usePrevRef';
 import ListContent from '../pad/ListContent';
@@ -11,2 +13,3 @@ import { reducer, initialState } from './playerReducer';
   autoplayInterval: 5000,
+  onStateChange: () => {},
   ...Pad.defaultProps,
@@ -23,2 +26,3 @@ pagingEnabled: true,
     autoplayInterval,
+    onStateChange,
     children,
@@ -29,5 +33,5 @@ ...padProps
   const [state, dispatch] = useReducer(reducer, initialState);
+  const prevStateRef = usePrevRef(state);
+  const prevState = prevStateRef.current;
 
-  const { mouseEntered, loopCount, loopOffset, scrollTo, pad } = state;
-
   const onPadMouseEnter = useCallback(
@@ -55,4 +59,19 @@ evt => {
 
+  const onPadStateChange = useCallback(value => {
+    dispatch({ type: 'setPad', value });
+  }, []);
+
+  useIsomorphicLayoutEffect(() => {
+    if (prevState !== state) {
+      onStateChange(state);
+    }
+  });
+
   useEffect(() => {
-    if (!autoplayEnabled || mouseEntered || pad.drag || pad.deceleration) {
+    if (
+      !autoplayEnabled ||
+      state.mouseEntered ||
+      state.pad.drag ||
+      state.pad.deceleration
+    ) {
       return;
@@ -71,5 +90,5 @@ }
     autoplayInterval,
-    mouseEntered,
-    pad.drag,
-    pad.deceleration,
+    state.mouseEntered,
+    state.pad.drag,
+    state.pad.deceleration,
   ]);
@@ -85,3 +104,4 @@
 
-  padProps.scrollTo = scrollTo;
+  padProps.scrollTo = state.scrollTo;
+  padProps.onStateChange = onPadStateChange;
 
@@ -99,24 +119,15 @@ if (direction === 'x') {
 
+  const element = typeof children === 'function' ? children(state) : children;
+
   return (
     <Pad {...padProps}>
-      {nextPad => {
-        if (pad !== nextPad) {
-          dispatch({ type: 'setPad', value: nextPad });
-        }
-
-        const element =
-          typeof children === 'function' ? children(state) : children;
-
-        return (
-          <ListContent
-            direction={direction}
-            itemCount={loopCount}
-            renderItem={({ Item, itemIndex }) => (
-              <Item key={itemIndex + loopOffset} hash="Player_loop">
-                {element}
-              </Item>
-            )}
-          />
-        );
-      }}
+      <ListContent
+        direction={direction}
+        itemCount={state.loopCount}
+        renderItem={({ Item, itemIndex }) => (
+          <Item key={itemIndex + state.loopOffset} hash="Player_loop">
+            {element}
+          </Item>
+        )}
+      />
     </Pad>
@@ -123,0 +134,0 @@ );

src/hooks/useIsomorphicLayoutEffect.js

 import { useLayoutEffect, useEffect } from 'react';
 
-// https://github.com/reduxjs/react-redux/blob/v7-beta/src/components/connectAdvanced.js#L35
-// React currently throws a warning when using useLayoutEffect on the server.
-// To get around it, we can conditionally useEffect on the server (no-op) and
-// useLayoutEffect in the browser. We need useLayoutEffect because we want
-// `connect` to perform sync updates to a ref to save the latest props after
-// a render is actually committed to the DOM.
-
+// suppress the useLayoutEffect warning on server side.
 export const useIsomorphicLayoutEffect =
-  typeof window !== 'undefined' &&
-  typeof window.document !== 'undefined' &&
-  typeof window.document.createElement !== 'undefined'
-    ? useLayoutEffect
-    : useEffect;
+  typeof window !== 'undefined' ? useLayoutEffect : useEffect;

src/hooks/usePrevRef.js

 import { useRef, useEffect } from 'react';
 
-export function usePrevRef(current) {
-  const ref = useRef(current);
+export function usePrevRef(input) {
+  const ref = useRef(input);
 
   useEffect(() => {
-    ref.current = current;
-  });
+    ref.current = input;
+  }, [input]);
 
   return ref;
 }

src/infinite/Infinite.js

@@ -1,2 +0,8 @@
-import React, { useReducer, useMemo, useRef, useEffect } from 'react';
+import React, {
+  useMemo,
+  useRef,
+  useEffect,
+  useCallback,
+  useReducer,
+} from 'react';
 import { useIsomorphicLayoutEffect } from '../hooks/useIsomorphicLayoutEffect';
@@ -17,2 +23,3 @@ import { usePrevRef } from '../hooks/usePrevRef';
   renderFooter: () => null,
+  onStateChange: () => {},
   scrollToIndex: null,
@@ -33,2 +40,3 @@ ...Pad.defaultProps,
     renderFooter,
+    onStateChange,
     scrollToIndex,
@@ -41,10 +49,16 @@ children,
   const prevStateRef = usePrevRef(state);
+  const prevState = prevStateRef.current;
   const listRef = useRef({});
 
-  const { scrollToRect, scrolling, pad } = state;
-  const prevState = prevStateRef.current;
+  const onPadStateChange = useCallback(value => {
+    dispatch({ type: 'setPad', value });
+  }, []);
 
   useIsomorphicLayoutEffect(() => {
-    if (prevState.pad.contentSize !== pad.contentSize) {
-      if (scrolling && scrollToIndex) {
+    if (prevState !== state) {
+      onStateChange(state);
+    }
+
+    if (prevState.pad.contentSize !== state.pad.contentSize) {
+      if (state.scrolling && scrollToIndex) {
         dispatch({
@@ -60,4 +74,4 @@ type: 'scrollToIndex',
   useEffect(() => {
-    if (prevState.pad.deceleration !== pad.deceleration) {
-      if (!pad.deceleration && scrolling) {
+    if (prevState.pad.deceleration !== state.pad.deceleration) {
+      if (!state.pad.deceleration && state.scrolling) {
         dispatch({ type: 'endScrolling' });
@@ -82,3 +96,4 @@ }
 
-  padProps.scrollToRect = scrollToRect;
+  padProps.scrollToRect = state.scrollToRect;
+  padProps.onStateChange = onPadStateChange;
 
@@ -95,55 +110,47 @@ if (direction === 'x') {
 
-  return (
-    <Pad {...padProps}>
-      {nextPad => {
-        if (pad !== nextPad) {
-          dispatch({ type: 'setPad', value: nextPad });
-        }
+  const listProps = {
+    width,
+    height,
+    direction,
+    itemCount: 3,
+    renderItem(attrs) {
+      const { itemIndex, Item } = attrs;
 
-        const listProps = {
-          width,
-          height,
-          direction,
-          itemCount: 3,
-          renderItem(attrs) {
-            const { itemIndex, Item } = attrs;
+      if (itemIndex === 0) {
+        return renderHeader(attrs);
+      }
+      if (itemIndex === 2) {
+        return renderFooter(attrs);
+      }
 
-            if (itemIndex === 0) {
-              return renderHeader(attrs);
-            }
-            if (itemIndex === 2) {
-              return renderFooter(attrs);
-            }
+      const listProps = {
+        width,
+        height,
+        direction,
+        spacing,
+        itemCount,
+        estimatedItemWidth,
+        estimatedItemHeight,
+        renderItem,
+      };
 
-            const listProps = {
-              width,
-              height,
-              direction,
-              spacing,
-              itemCount,
-              estimatedItemWidth,
-              estimatedItemHeight,
-              renderItem,
-            };
-
-            return (
-              <Item hash="Infinite_body" forceRender>
-                <ListContent {...listProps}>
-                  {layout => {
-                    listRef.current.body = layout;
-                  }}
-                </ListContent>
-              </Item>
-            );
-          },
-        };
-
-        return (
+      return (
+        <Item hash="Infinite_body" forceRender>
           <ListContent {...listProps}>
             {layout => {
-              listRef.current.box = layout;
+              listRef.current.body = layout;
             }}
           </ListContent>
-        );
-      }}
+        </Item>
+      );
+    },
+  };
+
+  return (
+    <Pad {...padProps}>
+      <ListContent {...listProps}>
+        {layout => {
+          listRef.current.box = layout;
+        }}
+      </ListContent>
     </Pad>
@@ -150,0 +157,0 @@ );

src/pad/GeneralContent.js

@@ -1,2 +0,2 @@
-import React, { useRef, useState, useEffect } from 'react';
+import React, { useRef, useEffect } from 'react';
 import resizeDetector from '../utils/resizeDetector';
@@ -10,3 +10,2 @@ import { isNumber } from '../utils/geometry';
   const { width, height, children } = props;
-  const [size, setSize] = useState(null);
   const itemRef = useRef({});
@@ -21,27 +20,19 @@
 
-    if (size) {
-      const resizeNode = getResizeNode();
+    const resizeNode = getResizeNode();
 
-      resizeDetector.listenTo(resizeNode, () => {
-        calculateSize();
-      });
+    resizeDetector.listenTo(resizeNode, () => {
+      calculateSize();
+    });
 
-      return () => {
-        resizeDetector.uninstall(resizeNode);
-      };
-    }
-  }, [width, height, size]);
+    return () => {
+      resizeDetector.uninstall(resizeNode);
+    };
+  }, [width, height]);
 
   return (
     <ItemContent {...props}>
-      {(nextSize, apis) => {
+      {(size, apis) => {
         itemRef.current = apis;
 
-        if (size !== nextSize) {
-          setSize(nextSize);
-        }
-
-        return typeof children === 'function'
-          ? children(nextSize, apis)
-          : children;
+        return typeof children === 'function' ? children(size, apis) : children;
       }}
@@ -48,0 +39,0 @@ </ItemContent>

src/pad/ItemContent.js

@@ -73,13 +73,5 @@ import React, {
 
-  element = (
-    <div ref={resizeRef} style={resizeStyle}>
-      {element}
-    </div>
-  );
-
   if (size) {
     elemStyle.width = size.width;
     elemStyle.height = size.height;
-  } else {
-    element = <div style={{ position: 'absolute' }}>{element}</div>;
   }
@@ -94,3 +86,9 @@
     <PadContext.Provider value={{ ...context, resizeContent }}>
-      <div {...divProps}>{element}</div>
+      <div {...divProps}>
+        <div style={{ position: 'absolute', top: 0, left: 0 }}>
+          <div ref={resizeRef} style={resizeStyle}>
+            {element}
+          </div>
+        </div>
+      </div>
     </PadContext.Provider>
@@ -97,0 +95,0 @@ );

src/pad/Pad.js

@@ -28,2 +28,3 @@ import React, {
   alwaysBounceY: true,
+  onStateChange: () => {},
   onScroll: () => {},
@@ -50,2 +51,3 @@ onDragStart: () => {},
     alwaysBounceY,
+    onStateChange,
     onScroll,
@@ -67,29 +69,11 @@ onDragStart,
   const prevStateRef = usePrevRef(state);
-
-  const {
-    size,
-    contentSize,
-    contentOffset,
-    contentVelocity,
-    drag,
-    deceleration,
-    pannable,
-  } = state;
-  const output = {
-    size,
-    contentSize,
-    contentOffset,
-    contentVelocity,
-    dragging: !!drag,
-    decelerating: !!deceleration,
-  };
   const prevState = prevStateRef.current;
 
   const resizeContent = useCallback(
-    nextContentSize => {
-      if (!isEqualToSize(contentSize, nextContentSize)) {
-        dispatch({ type: 'setContentSize', value: nextContentSize });
+    contentSize => {
+      if (!isEqualToSize(state.contentSize, contentSize)) {
+        dispatch({ type: 'setContentSize', value: contentSize });
       }
     },
-    [contentSize]
+    [state.contentSize]
   );
@@ -101,3 +85,3 @@
         directionalLockEnabled &&
-        !shouldDragStart(evt.velocity, size, contentSize)
+        !shouldDragStart(evt.velocity, state.size, state.contentSize)
       ) {
@@ -109,8 +93,12 @@ return false;
     },
-    [shouldStart, directionalLockEnabled, size, contentSize]
+    [shouldStart, directionalLockEnabled, state.size, state.contentSize]
   );
 
+  const onPannableStateChange = useCallback(value => {
+    dispatch({ type: 'setPannable', value });
+  }, []);
+
   useIsomorphicLayoutEffect(() => {
-    if (prevState.pannable.translation !== pannable.translation) {
-      if (pannable.translation) {
+    if (prevState.pannable.translation !== state.pannable.translation) {
+      if (state.pannable.translation) {
         if (prevState.pannable.translation) {
@@ -130,19 +118,32 @@ dispatch({ type: 'dragMove' });
 
-    if (prevState.contentSize !== contentSize) {
-      onContentResize(contentSize);
+    if (prevState !== state) {
+      onStateChange(state);
     }
-    if (prevState.contentOffset !== contentOffset) {
+
+    const output = {
+      size: state.size,
+      contentSize: state.contentSize,
+      contentOffset: state.contentOffset,
+      contentVelocity: state.contentVelocity,
+      dragging: !!state.drag,
+      decelerating: !!state.deceleration,
+    };
+
+    if (prevState.contentSize !== state.contentSize) {
+      onContentResize(state.contentSize);
+    }
+    if (prevState.contentOffset !== state.contentOffset) {
       onScroll(output);
     }
-    if (prevState.drag !== drag) {
+    if (prevState.drag !== state.drag) {
       if (!prevState.drag) {
         onDragStart(output);
-      } else if (!drag) {
+      } else if (!state.drag) {
         onDragEnd(output);
       }
     }
-    if (prevState.deceleration !== deceleration) {
+    if (prevState.deceleration !== state.deceleration) {
       if (!prevState.deceleration) {
         onDecelerationStart(output);
-      } else if (!deceleration) {
+      } else if (!state.deceleration) {
         onDecelerationEnd(output);
@@ -198,5 +199,5 @@ }
       position: 'absolute',
-      width: contentSize.width,
-      height: contentSize.height,
-      transformTranslate: contentOffset,
+      width: state.contentSize.width,
+      height: state.contentSize.height,
+      transformTranslate: state.contentOffset,
       willChange: 'transform',
@@ -224,3 +225,3 @@ });
   function buildBackground() {
-    const element = renderBackground(output);
+    const element = renderBackground(state);
 
@@ -243,6 +244,7 @@ if (element === null || element === undefined) {
   function buildOverlay() {
-    return renderOverlay(output);
+    return renderOverlay(state);
   }
 
   pannableProps.shouldStart = shouldPannableStart;
+  pannableProps.onStateChange = onPannableStateChange;
 
@@ -252,4 +254,4 @@ const elemStyle = {
     position: 'relative',
-    width: size.width,
-    height: size.height,
+    width: state.size.width,
+    height: state.size.height,
   };
@@ -263,24 +265,16 @@
 
+  const visibleRect = {
+    x: -state.contentOffset.x,
+    y: -state.contentOffset.y,
+    width: state.size.width,
+    height: state.size.height,
+  };
+
   return (
     <Pannable {...pannableProps}>
-      {nextPannable => {
-        if (pannable !== nextPannable) {
-          dispatch({ type: 'setPannable', value: nextPannable });
-        }
-
-        const visibleRect = {
-          x: -contentOffset.x,
-          y: -contentOffset.y,
-          width: size.width,
-          height: size.height,
-        };
-
-        return (
-          <PadContext.Provider value={{ visibleRect, resizeContent }}>
-            {buildBackground()}
-            {buildContent()}
-            {buildOverlay()}
-          </PadContext.Provider>
-        );
-      }}
+      <PadContext.Provider value={{ visibleRect, resizeContent }}>
+        {buildBackground()}
+        {buildContent()}
+        {buildOverlay()}
+      </PadContext.Provider>
     </Pannable>
@@ -287,0 +281,0 @@ );

src/Pannable.js

@@ -1,2 +0,2 @@
-import React, { useRef, useMemo, useReducer } from 'react';
+import React, { useCallback, useRef, useMemo, useReducer } from 'react';
 import { initialState, reducer } from './pannableReducer';
@@ -11,2 +11,3 @@ import { useIsomorphicLayoutEffect } from './hooks/useIsomorphicLayoutEffect';
   shouldStart: () => true,
+  onStateChange: () => {},
   onStart: () => {},
@@ -22,2 +23,3 @@ onMove: () => {},
     shouldStart,
+    onStateChange,
     onStart,
@@ -32,149 +34,158 @@ onMove,
   const prevStateRef = usePrevRef(state);
+  const prevState = prevStateRef.current;
   const elemRef = useRef(null);
-  const innerRef = useRef({ touchSupported: false });
 
+  const innerRef = useRef({});
   innerRef.current.state = state;
   innerRef.current.shouldStart = shouldStart;
-  const { target, translation, velocity, interval } = state;
-  const prevState = prevStateRef.current;
 
-  useIsomorphicLayoutEffect(() => {
-    function track(target, point) {
-      dispatch({ type: 'track', target, point, now: new Date().getTime() });
-    }
+  const touchSupported =
+    typeof window !== undefined ? 'ontouchstart' in document : true;
 
-    function onTouchStart(evt) {
-      innerRef.current.touchSupported = true;
+  const track = useCallback((target, point) => {
+    dispatch({ type: 'track', target, point, now: new Date().getTime() });
+  }, []);
 
-      if (evt.touches && evt.touches.length === 1) {
-        const touchEvent = evt.touches[0];
+  const move = useCallback((point) => {
+    dispatch({
+      type: 'move',
+      point,
+      now: new Date().getTime(),
+      shouldStart: innerRef.current.shouldStart,
+    });
+  }, []);
 
-        track(touchEvent.target, { x: touchEvent.pageX, y: touchEvent.pageY });
-      }
+  const end = useCallback(() => {
+    dispatch({ type: 'end' });
+  }, []);
+
+  useIsomorphicLayoutEffect(() => {
+    if (!enabled) {
+      return;
     }
 
-    function onTouchMove(evt) {
+    const preventDefaultIfMoving = (evt) => {
       if (innerRef.current.state.translation) {
         evt.preventDefault();
       }
-    }
+    };
 
-    function onMouseDown(evt) {
-      if (innerRef.current.touchSupported) {
-        return;
-      }
+    if (state.target) {
+      if (touchSupported) {
+        const onTargetTouchMove = (evt) => {
+          preventDefaultIfMoving(evt);
 
-      track(evt.target, { x: evt.pageX, y: evt.pageY });
-    }
+          const touchEvent = evt.touches[0];
 
-    if (enabled) {
-      const elemNode = elemRef.current;
+          move({ x: touchEvent.pageX, y: touchEvent.pageY });
+        };
+        const onTargetTouchEnd = (evt) => {
+          preventDefaultIfMoving(evt);
 
-      if (!elemNode.addEventListener) {
-        return;
-      }
+          end();
+        };
 
-      elemNode.addEventListener('touchstart', onTouchStart, false);
-      elemNode.addEventListener('touchmove', onTouchMove, false);
-      elemNode.addEventListener('mousedown', onMouseDown, false);
+        addEventListener(state.target, 'touchmove', onTargetTouchMove, false);
+        addEventListener(state.target, 'touchend', onTargetTouchEnd, false);
+        addEventListener(state.target, 'touchcancel', onTargetTouchEnd, false);
 
-      return () => {
-        elemNode.removeEventListener('touchstart', onTouchStart, false);
-        elemNode.removeEventListener('touchmove', onTouchMove, false);
-        elemNode.removeEventListener('mousedown', onMouseDown, false);
-      };
-    }
-  }, [enabled]);
+        return () => {
+          removeEventListener(
+            state.target,
+            'touchmove',
+            onTargetTouchMove,
+            false
+          );
+          removeEventListener(
+            state.target,
+            'touchend',
+            onTargetTouchEnd,
+            false
+          );
+          removeEventListener(
+            state.target,
+            'touchcancel',
+            onTargetTouchEnd,
+            false
+          );
+        };
+      } else {
+        const onBodyMouseMove = (evt) => {
+          preventDefaultIfMoving(evt);
 
-  useIsomorphicLayoutEffect(() => {
-    function move(point) {
-      dispatch({
-        type: 'move',
-        point,
-        now: new Date().getTime(),
-        shouldStart: innerRef.current.shouldStart,
-      });
-    }
+          if (evt.buttons === 1) {
+            move({ x: evt.pageX, y: evt.pageY });
+          } else {
+            end();
+          }
+        };
+        const onBodyMouseUp = (evt) => {
+          preventDefaultIfMoving(evt);
 
-    function end() {
-      dispatch({ type: 'end' });
-    }
+          end();
+        };
 
-    function onTargetTouchMove(evt) {
-      const touchEvent = evt.touches[0];
+        const body = typeof document !== undefined ? document.body : null;
 
-      if (innerRef.current.state.translation) {
-        evt.preventDefault();
-      }
+        addEventListener(body, 'mousemove', onBodyMouseMove, false);
+        addEventListener(body, 'mouseup', onBodyMouseUp, false);
 
-      move({ x: touchEvent.pageX, y: touchEvent.pageY });
-    }
-
-    function onTargetTouchEnd(evt) {
-      if (innerRef.current.state.translation) {
-        evt.preventDefault();
+        return () => {
+          removeEventListener(body, 'mousemove', onBodyMouseMove, false);
+          removeEventListener(body, 'mouseup', onBodyMouseUp, false);
+        };
       }
+    } else {
+      const elemNode = elemRef.current;
 
-      end();
-    }
+      if (touchSupported) {
+        const onTouchStart = (evt) => {
+          if (evt.touches && evt.touches.length === 1) {
+            const touchEvent = evt.touches[0];
 
-    function onRootMouseMove(evt) {
-      evt.preventDefault();
+            track(touchEvent.target, {
+              x: touchEvent.pageX,
+              y: touchEvent.pageY,
+            });
+          }
+        };
 
-      move({ x: evt.pageX, y: evt.pageY });
-    }
+        addEventListener(elemNode, 'touchstart', onTouchStart, false);
 
-    function onRootMouseUp(evt) {
-      evt.preventDefault();
+        return () => {
+          removeEventListener(elemNode, 'touchstart', onTouchStart, false);
+        };
+      } else {
+        const onMouseDown = (evt) => {
+          if (evt.buttons === 1) {
+            track(evt.target, { x: evt.pageX, y: evt.pageY });
+          }
+        };
 
-      end();
-    }
+        addEventListener(elemNode, 'mousedown', onMouseDown, false);
 
-    if (!target) {
-      return;
+        return () => {
+          removeEventListener(elemNode, 'mousedown', onMouseDown, false);
+        };
+      }
     }
+  }, [enabled, state.target, track, move, end]);
 
-    if (innerRef.current.touchSupported) {
-      target.addEventListener('touchmove', onTargetTouchMove, false);
-      target.addEventListener('touchend', onTargetTouchEnd, false);
-      target.addEventListener('touchcancel', onTargetTouchEnd, false);
-
-      return () => {
-        target.removeEventListener('touchmove', onTargetTouchMove, false);
-        target.removeEventListener('touchend', onTargetTouchEnd, false);
-        target.removeEventListener('touchcancel', onTargetTouchEnd, false);
-      };
-    } else {
-      addEventListener('mousemove', onRootMouseMove, false);
-      addEventListener('mouseup', onRootMouseUp, false);
-
-      return () => {
-        removeEventListener('mousemove', onRootMouseMove, false);
-        removeEventListener('mouseup', onRootMouseUp, false);
-      };
+  useIsomorphicLayoutEffect(() => {
+    if (prevState !== state) {
+      onStateChange(state);
     }
-  }, [target]);
 
-  useIsomorphicLayoutEffect(() => {
-    if (prevState.translation !== translation) {
-      if (translation) {
-        const output = { target, translation, velocity, interval };
-
+    if (prevState.translation !== state.translation) {
+      if (state.translation) {
         if (prevState.translation) {
-          onMove(output);
+          onMove(state);
         } else {
-          onStart(output);
+          onStart(state);
         }
       } else if (prevState.translation) {
-        const output = {
-          target: prevState.target,
-          translation: prevState.translation,
-          velocity: prevState.velocity,
-          interval: prevState.interval,
-        };
-
         if (enabled) {
-          onEnd(output);
+          onEnd(prevState);
         } else {
-          onCancel(output);
+          onCancel(prevState);
         }
@@ -193,3 +204,3 @@ }
 
-  if (translation) {
+  if (state.translation) {
     Object.assign(
@@ -196,0 +207,0 @@ elemStyle,

src/pannableReducer.js

@@ -30,3 +30,7 @@ const MIN_DISTANCE = 0;
 
-  return target ? initialState : state;
+  if (!target) {
+    return state;
+  }
+
+  return initialState;
 }
@@ -63,3 +67,3 @@
   };
-
+  /* on moving */
   if (translation) {
@@ -80,4 +84,12 @@ return {
   );
-
-  if (dist <= MIN_DISTANCE) {
+  /* not started yet  */
+  if (
+    dist <= MIN_DISTANCE ||
+    !shouldStart({
+      target,
+      translation: nextTranslation,
+      velocity: nextVelocity,
+      interval: nextInterval,
+    })
+  ) {
     return {
@@ -94,12 +106,3 @@ target,
 
-  if (
-    !shouldStart({
-      target,
-      translation: nextTranslation,
-      velocity: nextVelocity,
-      interval: nextInterval,
-    })
-  ) {
-    return initialState;
-  }
+  /* start moving */
 
@@ -106,0 +109,0 @@ return {

src/utils/eventListener.js

@@ -1,9 +0,17 @@
-let addEventListener = function() {};
-let removeEventListener = function() {};
+let addEventListener = function () {};
+let removeEventListener = function () {};
 
 if (typeof window !== undefined) {
-  addEventListener = window.addEventListener;
-  removeEventListener = window.removeEventListener;
+  addEventListener = function (target, ...args) {
+    if (target && target.addEventListener) {
+      return target.addEventListener.apply(target, args);
+    }
+  };
+  removeEventListener = function (target, ...args) {
+    if (target && target.removeEventListener) {
+      return target.removeEventListener.apply(target, args);
+    }
+  };
 }
 
 export { addEventListener, removeEventListener };

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

458223

increased by1.58%

Lines of code

12328

increased by0.36%

No dependency changes