react-pannable - npm Package Compare versions

Comparing version 2.2.3 to 2.3.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(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}function r(){return(r=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)}var o=0,a={target:null,startPoint:null,movePoint:null,moveTime:null,translation:null,velocity:null,interval:null};function l(e,t){switch(t.type){case"disable":case"end":return function(e,t){return e.target?a: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,l=e.moveTime,u=e.translation,s=t.point,c=t.now,d=t.shouldStart;if(!n)return e;var f=c-l,h={x:s.x-i.x,y:s.y-i.y},p={x:(s.x-r.x)/f,y:(s.y-r.y)/f};if(u)return{target:n,startPoint:i,movePoint:s,moveTime:c,translation:h,velocity:p,interval:f};if(o>=Math.sqrt(Math.pow(h.x,2)+Math.pow(h.y,2)))return{target:n,startPoint:i,movePoint:s,moveTime:c,translation:null,velocity:null,interval:null};if(!d({target:n,translation:h,velocity:p,interval:f}))return a;return{target:n,startPoint:s,movePoint:s,moveTime:c,translation:{x:0,y:0},velocity:p,interval:f}}(e,t);default:return e}}function u(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 s(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]))}"number"==typeof n&&(n=u(n,e));var l={x:s(e,t,n,"x"),y:s(e,t,n,"y")};return l.x===e.x&&l.y===e.y?e:l}function c(e,t,n,i,r,o){if(o){var a="y"===o?["y","height"]:["x","width"],l=a[0],u=a[1],s=t[u],d=Math.min(s-n[u],0),f=e[l];return i&&s>0&&(d=s*Math.ceil(d/s)),f>0?f=0:d>f?f=d:!r&&i&&s>0&&(f=s*Math.round(f/s)),f}var h={x:c(e,t,n,i,r,"x"),y:c(e,t,n,i,r,"y")};return h.x===e.x&&h.y===e.y?e:h}function d(e,t,n,i,r,o){if(o){var a="y"===o?["y","height"]:["x","width"],l=a[0],s=a[1],c=e[l];if(i&&n[s]>0){var f=c/n[s];c=n[s]*(f=t[l]>.5?Math.ceil(f):-.5>t[l]?Math.floor(f):Math.round(f))}else r[l]&&(c+=.5*t[l]*(t[l]/r[l]));return c}return"number"==typeof r&&(r=u(r,t)),{x:d(e,t,n,i,r,"x"),y:d(e,t,n,i,r,"y")}}function f(e,t,n,i){var r,o,a={x:n.x-e.x,y:n.y-e.y},l=Math.sqrt(Math.pow(a.x,2)+Math.pow(a.y,2));if(l){var u=Math.sqrt(.5*Math.pow(r=(t.x*a.x+t.y*a.y)/l,2)+i*l),s=(u-r)/i;0>s&&(u=r,s=0),o=s+u/i}else r=Math.sqrt(Math.pow(t.x,2)+Math.pow(t.y,2)),o=(Math.sqrt(2)+1)*r/i;return o>0?{points:{x:[e.x,e.x+t.x*(o/3),n.x,n.x],y:[e.y,e.y+t.y*(o/3),n.y,n.y]},duration:o,startTime:(new Date).getTime(),endOffset:n,rate:i}:null}var h=.025,p=.0025,v={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:a};function m(e,t){return function(e,t){var n=e.size,i=e.contentSize,o=e.contentOffset,a=e.contentVelocity,l=e.drag,u=e.deceleration,p=e.options[0],v=h;if(u){var m=u.endOffset;if(m!==c(m,n,i,p,!0)&&o!==c(o,n,i,p,!0)){var y=a;return u.rate!==v&&(y=s(y,n,v),m=d(o,y,n,p,v)),m=c(m,n,i,p,!0),r({},e,{contentVelocity:y,drag:null,deceleration:f(o,y,m,v)})}}else if(!l){var g=c(o,n,i,p);if(o!==g){var w=d(g,{x:0,y:0},n,p,v);return r({},e,{drag:null,deceleration:f(o,a,w,v)})}}return e}(function(e,t){switch(t.type){case"setPannable":return function(e,t){return r({},e,{pannable:t.value})}(e,t);case"setOptions":return function(e,t){return r({},e,{options:t.value})}(e,t);case"setSize":return function(e,t){return r({},e,{size:t.value})}(e,t);case"setContentSize":return function(e,t){return r({},e,{contentSize:t.value})}(e,t);case"dragStart":return function(e,t){var n=e.contentOffset,i=e.pannable.velocity,o={x:1,y:1};e.options[1]&&(Math.abs(i.x)>Math.abs(i.y)?o.y=0:o.x=0);return r({},e,{contentVelocity:{x:o.x*i.x,y:o.y*i.y},drag:{direction:o,startOffset:n},deceleration:null})}(e);case"dragMove":return function(e,t){var n=e.contentOffset,i=e.drag,o=e.options,a=e.pannable,l=a.translation,u=a.interval,s=function e(t,n,i,r,o){if(o){var a="y"===o?["y","height","width"]:["x","width","height"],l=a[0],u=a[1],s=a[2],c=t[l],d=Math.min(i[u]-r[u],0),f=.5*Math.min(i[u],i[s]);return c>0?n[l]?f*(1-f/(f+c)):0:d>c?n[l]?d-f*(1-f/(f-c+d)):d:c}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:i.startOffset.x+i.direction.x*l.x,y:i.startOffset.y+i.direction.y*l.y},{x:o[2],y:o[3]},e.size,e.contentSize);return r({},e,{contentOffset:s,contentVelocity:{x:(s.x-n.x)/u,y:(s.y-n.y)/u},drag:i,deceleration:null})}(e);case"dragEnd":return function(e,t){var n=e.size,i=e.contentOffset,o=e.options[0],a=p,l=e.contentVelocity;o&&(l=s(l,n,a=h));var u=d(i,l,n,o,a);return r({},e,{contentVelocity:l,drag:null,deceleration:f(i,l,u,a)})}(e);case"dragCancel":return function(e,t){var n=e.contentOffset,i=e.contentVelocity,o=h,a=d(e.drag.startOffset,{x:0,y:0},e.size,e.options[0],o);return r({},e,{drag:null,deceleration:f(n,i,a,o)})}(e);case"decelerate":return function(e,t){var n=e.deceleration,i=t.now;if(!n)return e;if(i>=n.startTime+n.duration)return r({},e,{contentOffset:n.endOffset,contentVelocity:{x:0,y:0},drag:null,deceleration:null});var o=function e(t,n,i){if(i){var o,a=("y"===i?["y"]:["x"])[0],l=t.points,u=t.duration,s=Math.max(0,Math.min((n-t.startTime)/u,1)),c=l[a],d=c[0],f=c[1],h=c[2],p=c[3],v=d-3*(d-f)*s+3*(d-2*f+h)*Math.pow(s,2)-(d-3*f+3*h-p)*Math.pow(s,3),m=(-3*(d-f)+6*(d-2*f+h)*s-3*(d-3*f+3*h-p)*Math.pow(s,2))/u;return(o={})[a+"Offset"]=v,o[a+"Velocity"]=m,o}return r({},e(t,n,"x"),{},e(t,n,"y"))}(n,i);return r({},e,{contentOffset:{x:o.xOffset,y:o.yOffset},contentVelocity:{x:o.xVelocity,y:o.yVelocity},drag:null,deceleration:n})}(e,t);case"setContentOffset":return y(e,t);case"scrollToRect":return function(e,t){var n=e.contentOffset,i=e.size,r=t.animated,o=function e(t,n,i,r){if(r){var o="y"===r?["y","height"]:["x","width"],a=o[0],l=o[1],u=-t[a],s=n[l]-t[l];if("auto"===i[a]){var c=0>s?-1:1;u+=c*Math.max(0,Math.min(c*(-n[a]-u),c*s))}else"start"===i[a]?i[a]=0:"center"===i[a]?i[a]=.5:"end"===i[a]&&(i[a]=1),("number"!=typeof i[a]||isNaN(i[a]))&&(i[a]=.5),u+=i[a]*s;return u}return"object"!=typeof i&&(i={x:i,y:i}),{x:e(t,n,i,"x"),y:e(t,n,i,"y")}}(t.rect,{x:-n.x,y:-n.y,width:i.width,height:i.height},t.align);return y(e,{type:"setContentOffset",offset:o,animated:r})}(e,t);default:return e}}(e,t))}function y(e,t){var n=e.size,i=e.contentOffset,o=e.contentVelocity,a=e.drag,l=e.deceleration,u=e.options[0],s=t.offset;if(a||!t.animated){if(s.x===i.x&&s.y===i.y)return e;var c=r({},e,{contentOffset:s});return a&&(c.drag=r({},a,{startOffset:{x:a.startOffset.x+s.x-i.x,y:a.startOffset.y+s.y-i.y}})),l&&(c.deceleration=f(s,o,{x:l.endOffset.x+s.x-i.x,y:l.endOffset.y+s.y-i.y},l.rate)),c}return r({},e,{drag:null,deceleration:f(i,o,d(s,{x:0,y:0},n,u,h),h)})}var g="undefined"!=typeof window&&void 0!==window.document&&void 0!==window.document.createElement?t.useLayoutEffect:t.useEffect;function w(e){var n=t.useRef(e);return t.useEffect((function(){n.current=e})),n}var b={create:function(e){var t=e.transformTranslate,n=e.userSelect,r=i(e,["transformTranslate","userSelect"]);return t&&function(e,t){t.transform="translate3d("+e[0]+"px, "+e[1]+"px, 0)",t.WebkitTransform="translate3d("+e[0]+"px, "+e[1]+"px, 0)",t.msTransform="translate("+e[0]+"px, "+e[1]+"px)"}(t,r),n&&function(e,t){t.userSelect=e,t.WebkitUserSelect=e,t.msUserSelect=e}(n,r),r}},x=function(){},E=function(){};void 0!==typeof window&&(x=window.addEventListener,E=window.removeEventListener);function S(e){var o=e.enabled,u=e.shouldStart,s=e.onStart,c=e.onMove,d=e.onEnd,f=e.onCancel,h=i(e,["enabled","shouldStart","onStart","onMove","onEnd","onCancel"]),p=t.useReducer(l,a),v=p[0],m=p[1],y=w(v),S=t.useRef(null),C=t.useRef({touchSupported:!1});C.current.state=v,C.current.shouldStart=u;var z=v.target,M=v.translation,T=v.velocity,I=v.interval,O=y.current;g((function(){function e(e,t){m({type:"track",target:e,point:t,now:(new Date).getTime()})}function t(t){if(C.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){C.current.state.translation&&e.preventDefault()}function i(t){C.current.touchSupported||e(t.target,{x:t.pageX,y:t.pageY})}if(o){var r=S.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)}}}),[o]),g((function(){function e(e){m({type:"move",point:e,now:(new Date).getTime(),shouldStart:C.current.shouldStart})}function t(){m({type:"end"})}function n(t){var n=t.touches[0];C.current.state.translation&&t.preventDefault(),e({x:n.pageX,y:n.pageY})}function i(e){C.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 C.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)}):(x("mousemove",r,!1),x("mouseup",o,!1),function(){E("mousemove",r,!1),E("mouseup",o,!1)})}),[z]),g((function(){var e={target:z,translation:M,velocity:T,interval:I};M!==O.translation&&(M?O.translation?c(e):s(e):O.translation&&(o?d(e):f(e)))})),t.useMemo((function(){o||m({type:"disable"})}),[o]);var k={};M&&(k.touchAction="none",k.pointerEvents="none",k.userSelect="none"),h.style=r({},b.create(k),{},h.style),h.ref=S;var L=h.children;return"function"==typeof L&&(L=L(v)),n.createElement("div",h,L)}S.defaultProps={enabled:!0,shouldStart:function(){return!0},onStart:function(){},onMove:function(){},onEnd:function(){},onCancel:function(){}};var C=n.createContext({visibleRect:null,resizeContent:function(){}});function z(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 M(e,t){return e===t||!(!e||!t||e.width!==t.width||e.height!==t.height)}function T(e){var o=e.width,a=e.height,l=i(e,["width","height"]),u=t.useState(null),s=u[0],c=u[1],d=w(s),f=t.useContext(C),h=t.useRef(null),p=d.current,v=t.useCallback((function(){}),[]),m=t.useCallback((function(){return h.current}),[]),y=t.useCallback((function(){var e=z(h.current);c(e)}),[]);g((function(){}),[]),g((function(){M(s,p)||s&&f.resizeContent(s),s||y()})),t.useMemo((function(){c("number"==typeof o&&"number"==typeof a?{width:o,height:a}:null)}),[o,a]);var b={position:"relative"},x={position:"absolute"};"number"==typeof o&&(x.width=o),"number"==typeof a&&(x.height=a),s&&(b.width=s.width,b.height=s.height),l.style=r({},b,{},l.style);var E=l.children;return"function"==typeof E&&(E=E(s,{getResizeNode:m,calculateSize:y})),n.createElement(C.Provider,{value:r({},f,{resizeContent:v})},n.createElement("div",l,n.createElement("div",{ref:h,style:x},E)))}function I(e,t){return e(t={exports:{}},t.exports),t.exports}T.defaultProps={width:null,height:null},T.PadContent=!0;var O=I((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}}})),k=I((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}})),L=I((function(e){(e.exports={}).getOption=function(e,t,n){var i=e[t];if(null==i&&void 0!==n)return n;return i}})),R=function(e){var t=(e=e||{}).reporter,n=L.getOption(e,"async",!0),i=L.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=P(),a=!1;function l(){for(a=!0;o.size();){var e=o;o=P(),e.process()}a=!1}function u(){r=setTimeout(l,0)}return{add:function(e,t){!a&&i&&n&&0===o.size()&&u(),o.add(e,t)},force:function(e){a||(void 0===e&&(e=n),r&&(clearTimeout(r),r=null),e?u():l())}}};function P(){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}}}var A="_erd";function D(e){return e[A]}var W={initState:function(e){return e[A]={},D(e)},getState:D,cleanState:function(e){delete e[A]}},H=O.forEach,N=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}}(),a="erd_scroll_detection_container";function l(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 c(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",a),{makeDetectable:function(e,u,d){function f(){if(e.debug){var n=Array.prototype.slice.call(arguments);if(n.unshift(r.get(u),"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(u),t={};return t.position=e.position,t.width=u.offsetWidth,t.height=u.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 v(){if(f("storeStyle invoked."),i(u)){var e=p();i(u).style=e}else f("Aborting because element has been uninstalled")}function m(e,t,n){i(e).lastWidth=t,i(e).lastHeight=n}function y(){return 2*o.width+1}function g(){return 2*o.height+1}function w(e){return e+10+y()}function b(e){return e+10+g()}function x(e,t,n){var i=s(e),r=c(e),o=w(t),a=b(n),l=function(e){return 2*e+y()}(t),u=function(e){return 2*e+g()}(n);i.scrollLeft=o,i.scrollTop=a,r.scrollLeft=l,r.scrollTop=u}function E(){var e=i(u).container;if(!e){(e=document.createElement("div")).className=a,e.style.cssText="visibility: hidden; display: inline; width: 0px; height: 0px; z-index: -1; overflow: hidden; margin: 0; padding: 0;",i(u).container=e,function(e){e.className+=" "+a+"_animation_active"}(e),u.appendChild(e);var t=function(){i(u).onRendered&&i(u).onRendered()};l(e,"animationstart",t),i(u).onAnimationStart=t}return e}function S(){if(f("Injecting elements"),i(u)){!function(){var e=i(u).style;if("static"===e.position){u.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,u,e,"top"),n(t,u,e,"right"),n(t,u,e,"bottom"),n(t,u,e,"left")}}();var e=i(u).container;e||(e=E());var n,r,s,c,d=o.width,h=o.height,p="position: absolute; flex: none; overflow: hidden; z-index: -1; visibility: hidden; "+("left: "+(n=(n=-(1+d))?n+"px":"0")+"; top: "+(r=(r=-(1+h))?r+"px":"0")+"; right: "+(c=(c=-d)?c+"px":"0")+"; bottom: "+(s=(s=-h)?s+"px":"0")+";"),v=document.createElement("div"),m=document.createElement("div"),y=document.createElement("div"),g=document.createElement("div"),w=document.createElement("div"),b=document.createElement("div");v.dir="ltr",v.style.cssText="position: absolute; flex: none; overflow: hidden; z-index: -1; visibility: hidden; width: 100%; height: 100%; left: 0px; top: 0px;",v.className=a,m.className=a,m.style.cssText=p,y.style.cssText="position: absolute; flex: none; overflow: scroll; z-index: -1; visibility: hidden; width: 100%; height: 100%;",g.style.cssText="position: absolute; left: 0; top: 0;",w.style.cssText="position: absolute; flex: none; overflow: scroll; z-index: -1; visibility: hidden; width: 100%; height: 100%;",b.style.cssText="position: absolute; width: 200%; height: 200%;",y.appendChild(g),w.appendChild(b),m.appendChild(y),m.appendChild(w),v.appendChild(m),e.appendChild(v),l(y,"scroll",x),l(w,"scroll",S),i(u).onExpandScroll=x,i(u).onShrinkScroll=S}else f("Aborting because element has been uninstalled");function x(){i(u).onExpand&&i(u).onExpand()}function S(){i(u).onShrink&&i(u).onShrink()}}function C(){function o(e,t,n){var i=function(e){return s(e).childNodes[0]}(e),r=w(t),o=b(n);i.style.width=r+"px",i.style.height=o+"px"}function a(a){var s=u.offsetWidth,c=u.offsetHeight;f("Storing current size",s,c),m(u,s,c),n.add(0,(function(){if(i(u))if(l()){if(e.debug)u.offsetWidth===s&&u.offsetHeight===c||t.warn(r.get(u),"Scroll: Size changed before updating detector elements.");o(u,s,c)}else f("Aborting because element container has not been initialized");else f("Aborting because element has been uninstalled")})),n.add(1,(function(){i(u)?l()?x(u,s,c):f("Aborting because element container has not been initialized"):f("Aborting because element has been uninstalled")})),a&&n.add(2,(function(){i(u)?l()?a():f("Aborting because element container has not been initialized"):f("Aborting because element has been uninstalled")}))}function l(){return!!i(u).container}function d(){f("notifyListenersIfNeeded invoked");var e=i(u);return void 0===i(u).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 H(i(u).listeners,(function(e){e(u)})))}function p(){if(f("Scroll detected."),h(u))f("Scroll event fired while unrendered. Ignoring...");else{var e=u.offsetWidth,t=u.offsetHeight;e!==i(u).lastWidth||t!==i(u).lastHeight?(f("Element size changed."),a(d)):f("Element size has not changed ("+e+"x"+t+").")}}if(f("registerListenersAndPositionElements invoked."),i(u)){i(u).onRendered=function(){if(f("startanimation triggered."),h(u))f("Ignoring since element is still unrendered...");else{f("Element rendered.");var e=s(u),t=c(u);0!==e.scrollLeft&&0!==e.scrollTop&&0!==t.scrollLeft&&0!==t.scrollTop||(f("Scrollbars out of sync. Updating detector elements..."),a(d))}},i(u).onExpand=p,i(u).onShrink=p;var v=i(u).style;o(u,v.width,v.height)}else f("Aborting because element has been uninstalled")}function z(){if(f("finalizeDomMutation invoked."),i(u)){var e=i(u).style;m(u,e.width,e.height),x(u,e.width,e.height)}else f("Aborting because element has been uninstalled")}function M(){d(u)}function T(){var e;f("Installing..."),i(u).listeners=[],e=p(),i(u).startSize={width:e.width,height:e.height},f("Element start size",i(u).startSize),n.add(0,v),n.add(1,S),n.add(2,C),n.add(3,z),n.add(4,M)}d||(d=u,u=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)}(u)?T():(f("Element is detached"),E(),f("Waiting until element is attached..."),i(u).onRendered=function(){f("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&&u(s(e),"scroll",t.onExpandScroll),t.onShrinkScroll&&u(c(e),"scroll",t.onShrinkScroll),t.onAnimationStart&&u(t.container,"animationstart",t.onAnimationStart),t.container&&e.removeChild(t.container))}}},V=O.forEach;function j(e){return Array.isArray(e)||void 0!==e.length}function B(e){if(Array.isArray(e))return e;var t=[];return V(e,(function(e){t.push(e)})),t}function q(e){return e&&1===e.nodeType}function _(e,t,n){var i=e[t];return null==i&&void 0!==n?n:i}var X=null;"undefined"!=typeof window&&(X=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=_(e,"batchProcessor",R({reporter:r})),a={};a.callOnAdd=!!_(e,"callOnAdd",!0),a.debug=!!_(e,"debug",!1);var l,u=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),s=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}),c=_(e,"strategy","object"),d={reporter:r,batchProcessor:o,stateHandler:W,idHandler:t};if("scroll"===c&&(k.isLegacyOpera()?(r.warn("Scroll strategy is not supported on legacy Opera. Changing to object strategy."),c="object"):k.isIE(9)&&(r.warn("Scroll strategy is not supported on IE9. Changing to object strategy."),c="object")),"scroll"===c)l=N(d);else{if("object"!==c)throw Error("Invalid strategy name: "+c);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||{},k.isIE(8)?o(r):function(e,r){var o="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;",a=!1,l=window.getComputedStyle(e),u=e.offsetWidth,s=e.offsetHeight;function c(){function n(){if("static"===l.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,l,"top"),n(t,e,l,"right"),n(t,e,l,"bottom"),n(t,e,l,"left")}}""!==l.position&&(n(),a=!0);var u=document.createElement("object");u.style.cssText=o,u.tabIndex=-1,u.type="text/html",u.setAttribute("aria-hidden","true"),u.onload=function(){a||n(),function e(t,n){t.contentDocument?n(t.contentDocument):setTimeout((function(){e(t,n)}),100)}(this,(function(t){r(e)}))},k.isIE()||(u.data="about:blank"),e.appendChild(u),i(e).object=u,k.isIE()&&(u.data="about:blank")}i(e).startSize={width:u,height:s},n?n.add(c):c()}(r,o)},addListener:function(e,t){if(!r(e))throw Error("Element is not detectable by this strategy.");function n(){t(e)}k.isIE(8)?(i(e).object={proxy:n},e.attachEvent("onresize",n)):r(e).contentDocument.defaultView.addEventListener("resize",n)},uninstall:function(e){k.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=u.get(e);V(t,(function(t){t(e)}))}function c(e,t,n){u.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(q(n))n=[n];else{if(!j(n))return r.error("Invalid arguments. Must be a DOM element or a collection of DOM elements.");n=B(n)}var d=0,h=_(e,"callOnAdd",a.callOnAdd),p=_(e,"onReady",(function(){})),v=_(e,"debug",a.debug);V(n,(function(e){W.getState(e)||(W.initState(e),t.set(e));var a=t.get(e);if(v&&r.log("Attaching listener to element",a,e),!s.isDetectable(e))return v&&r.log(a,"Not detectable."),s.isBusy(e)?(v&&r.log(a,"System busy making it detectable"),c(h,e,i),f[a]=f[a]||[],void f[a].push((function(){++d===n.length&&p()}))):(v&&r.log(a,"Making detectable..."),s.markBusy(e,!0),l.makeDetectable({debug:v},e,(function(e){if(v&&r.log(a,"onElementDetectable"),W.getState(e)){s.markAsDetectable(e),s.markBusy(e,!1),l.addListener(e,o),c(h,e,i);var t=W.getState(e);if(t&&t.startSize)t.startSize.width===e.offsetWidth&&t.startSize.height===e.offsetHeight||o(e);f[a]&&V(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."),c(h,e,i),d++})),d===n.length&&p()},removeListener:u.removeListener,removeAllListeners:u.removeAllListeners,uninstall:function(e){if(!e)return r.error("At least one element is required.");if(q(e))e=[e];else{if(!j(e))return r.error("Invalid arguments. Must be a DOM element or a collection of DOM elements.");e=B(e)}V(e,(function(e){u.removeAllListeners(e),l.uninstall(e),W.cleanState(e)}))}}}({strategy:"scroll"}));var Y=X,F=r({},T.defaultProps);function G(e){var i=e.width,r=e.height,o=t.useRef(null);return g((function(){if(("number"!=typeof i||"number"!=typeof r)&&Y){var e=o.current.getResizeNode();return Y.listenTo(e,(function(){return o.current.calculateSize()})),function(){return Y.uninstall(e)}}}),[i,r]),n.createElement(T,e,(function(t,n){o.current=n;var i=e.children;return"function"==typeof i&&(i=i(t,n)),i}))}G.defaultProps=F,G.PadContent=!0;var U=function(){},J=function(){};if("undefined"!=typeof window){U=window.requestAnimationFrame,J=window.cancelAnimationFrame;for(var K=["ms","moz","webkit","o"],Q=0,Z=0;4>Z&&!U;++Z)U=window[K[Z]+"RequestAnimationFrame"],J=window[K[Z]+"CancelAnimationFrame"]||window[K[Z]+"CancelRequestAnimationFrame"];U||(U=function(e){var t=(new Date).getTime(),n=Math.max(0,16-(t-Q)),i=window.setTimeout((function(){e(t+n)}),n);return Q=t+n,i},J=function(e){clearTimeout(e)})}var $=r({width:0,height:0,pagingEnabled:!1,directionalLockEnabled:!1,alwaysBounceX:!0,alwaysBounceY:!0,scrollTo:null,scrollToRect:null,onScroll:function(){},onDragStart:function(){},onDragEnd:function(){},onDecelerationStart:function(){},onDecelerationEnd:function(){},onContentResize:function(){}},S.defaultProps);function ee(e){var o=e.width,a=e.height,l=e.pagingEnabled,u=e.directionalLockEnabled,s=e.alwaysBounceX,c=e.alwaysBounceY,d=e.scrollTo,f=e.scrollToRect,h=e.onScroll,p=e.onDragStart,y=e.onDragEnd,x=e.onDecelerationStart,E=e.onDecelerationEnd,z=e.onContentResize,M=i(e,["width","height","pagingEnabled","directionalLockEnabled","alwaysBounceX","alwaysBounceY","scrollTo","scrollToRect","onScroll","onDragStart","onDragEnd","onDecelerationStart","onDecelerationEnd","onContentResize"]),T=M.enabled,I=M.shouldStart,O=t.useReducer(m,v),k=O[0],L=O[1],R=w(k),P=t.useRef({}),A=k.size,D=k.contentSize,W=k.contentOffset,H=k.contentVelocity,N=k.drag,V=k.deceleration,j=R.current;P.current.state=k;var B=t.useCallback((function(e){return L({type:"setContentSize",value:e})}),[]),q=t.useCallback((function(e){var t=P.current.state;return!(t.options[1]&&!function(e,t,n){var i=Math.abs(e.x)>Math.abs(e.y)?"width":"height";return n[i]>t[i]}(e.velocity,t.size,t.contentSize))&&I(e)}),[I]);return g((function(){k.pannable.translation!==j.pannable.translation&&(k.pannable.translation?L(j.pannable.translation?{type:"dragMove"}:{type:"dragStart"}):j.pannable.translation&&L(T?{type:"dragEnd"}:{type:"dragCancel"}));var e={size:A,contentSize:D,contentOffset:W,contentVelocity:H,dragging:!!N,decelerating:!!V};D!==j.contentSize&&z(D),W!==j.contentOffset&&h(e),N!==j.drag&&(j.drag?N||y(e):p(e)),V!==j.deceleration&&(j.deceleration?V||E(e):x(e))})),g((function(){if(k.deceleration){var e=U((function(){e=void 0,L({type:"decelerate",now:(new Date).getTime()})}));return function(){e&&J(e)}}}),[k]),t.useMemo((function(){L({type:"setSize",value:{width:o,height:a}})}),[o,a]),t.useMemo((function(){L({type:"setOptions",value:[l,u,s,c]})}),[l,u,s,c]),t.useMemo((function(){d&&L(r({type:"setContentOffset"},d))}),[d]),t.useMemo((function(){f&&L(r({type:"scrollToRect"},f))}),[f]),M.shouldStart=q,M.style=r({},{overflow:"hidden",position:"relative",width:A.width,height:A.height},{},M.style),n.createElement(C.Provider,{value:{visibleRect:{x:-W.x,y:-W.y,width:A.width,height:A.height},resizeContent:B}},n.createElement(S,M,(function(e){e!==k.pannable&&L({type:"setPannable",value:e});var i=b.create({position:"relative",width:D.width,height:D.height,transformTranslate:[W.x,W.y],willChange:"transform"}),o=M.children;return"function"==typeof o&&(o=o(k)),t.isValidElement(o)&&o.type.PadContent?(o.props.style&&(i=r({},i,{},o.props.style)),o=t.cloneElement(o,{style:i,ref:o.ref})):o=n.createElement(G,{style:i},o),o})))}function te(e,t,n){if(!t)return t;if(n){var i,o="y"===n?["y","height"]:["x","width"],a=o[0],l=o[1];return(i={})[a]=t[a]-e[a],i[l]=t[l],i}return r({},te(e,t,"x"),{},te(e,t,"y"))}function ne(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 ne(e,t,"x")&&ne(e,t,"y")}function ie(){}ee.defaultProps=$;function re(e){var o=e.width,a=e.height,l=e.direction,u=e.rowSpacing,s=e.columnSpacing,c=e.itemCount,d=e.itemWidth,f=e.itemHeight,h=e.renderItem,p=i(e,["width","height","direction","rowSpacing","columnSpacing","itemCount","itemWidth","itemHeight","renderItem"]),v=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],u=a[1],s=a[2],c=a[3],d=a[4],f=a[5],h={width:e.width,height:e.height}[s],p=0,v=0,m=0,y=[];"number"!=typeof h?(m=i,0===r[s]?h=0:(h=i*r[s],i>1&&(h+=(i-1)*o[f]))):0===r[s]?m=i:(m=1,h>r[s]&&(m+=Math.floor((h-r[s])/(r[s]+o[f]))));m>0&&(v=Math.ceil(i/m));for(var g=0;v>g;g++){g>0&&(p+=o[d]);for(var w=0;m>w;w++){var b,x,E=w+g*m,S=0;if(m>1&&(S+=Math.round(w*((h-r[s])/(m-1)))),E>=i)break;y.push(((x={rect:(b={},b[l]=S,b[u]=p,b[s]=r[s],b[c]=r[c],b)})[d+"Index"]=g,x[f+"Index"]=w,x))}p+=r[c]}return{size:(t={},t[s]=h,t[c]=p,t),count:(n={},n[d]=v,n[f]=m,n),layoutList:y}}({direction:l,width:o,height:a,rowSpacing:u,columnSpacing:s,itemCount:c,itemWidth:d,itemHeight:f})}),[l,o,a,u,s,c,d,f]),m=w(v),y=t.useContext(C),b=v.size,x=v.count,E=v.layoutList,S=m.current,z=t.useCallback((function(){}),[]),T=t.useCallback((function(e){return function(e,t,n){var i="x"===n?["column","row"]:["row","column"],r=i[1];return e[r]+e[i[0]]*t[r]}({row:e.rowIndex,column:e.columnIndex},x,l)}),[l,x]);function I(e){var i,o,a=e.itemIndex,l=e.rect,u=e.visibleRect,s=e.needsRender,c=e.Item,d=h(e),f={position:"absolute",left:l.x,top:l.y,width:l.width,height:l.height};return t.isValidElement(d)&&d.type===c&&(d.props.style&&(f=r({},f,{},d.props.style)),i=d.props.forceRender,o=d.key,d=d.props.children),o||(o=""+a),i||s?(t.isValidElement(d)?(d.props.style&&(f=r({},f,{},d.props.style)),d=t.cloneElement(d,{style:f,ref:d.ref})):d=n.createElement("div",{style:f},d),n.createElement(C.Provider,{key:o,value:r({},y,{visibleRect:u,resizeContent:z})},d)):null}g((function(){y.resizeContent(b)}),[]),g((function(){M(b,S.size)||y.resizeContent(b)}));var O={position:"relative"};b&&(O.width=b.width,O.height=b.height),p.style=r({},O,{},p.style);for(var k=[],L=0;E.length>L;L++){var R=E[L],P=r({},R,{itemIndex:L,visibleRect:te(R.rect,y.visibleRect),needsRender:ne(R.rect,y.visibleRect),Item:ie});k.push(I(P))}return"function"==typeof p.children&&p.children(v,{getItemIndex:T}),n.createElement("div",p,k)}function oe(){}re.defaultProps={width:null,height:null,direction:"y",rowSpacing:0,columnSpacing:0,itemCount:0,itemWidth:0,itemHeight:0,renderItem:function(){return null}},re.PadContent=!0;function ae(e){var o=e.width,a=e.height,l=e.direction,u=e.spacing,s=e.itemCount,c=e.estimatedItemWidth,d=e.estimatedItemHeight,f=e.renderItem,h=i(e,["width","height","direction","spacing","itemCount","estimatedItemWidth","estimatedItemHeight","renderItem"]),p=t.useState([]),v=p[0],m=p[1],y=t.useState({}),b=y[0],x=y[1],E=t.useMemo((function(){return function(e,t,n){var i,r=e.spacing,o=e.itemCount,a={width:e.width,height:e.height},l={width:e.estimatedItemWidth,height:e.estimatedItemHeight},u="x"===e.direction?["y","x","height","width"]:["x","y","width","height"],s=u[0],c=u[1],d=u[2],f=u[3],h=0,p=0,v=[],m={};"number"==typeof a[d]&&(m[d]=a[d]);for(var y=0;o>y;y++){var g,w,b=n[t[y]]||((g={})[d]=void 0===m[d]?l[d]:m[d],g[f]=l[f],g);v.push({rect:(w={},w[s]=0,w[c]=p,w[d]=b[d],w[f]=b[f],w)}),b[f]>0&&(p+=b[f],o-1>y&&(p+=r)),b[d]>h&&(h=b[d])}return{size:(i={},i[d]=h,i[f]=p,i),fixed:m,layoutList:v}}({width:o,height:a,direction:l,spacing:u,itemCount:s,estimatedItemWidth:c,estimatedItemHeight:d},v,b)}),[o,a,l,u,s,c,d,v,b]),S=w(E),z=t.useContext(C),I=E.size,O=E.fixed,k=E.layoutList,L=S.current,R=[],P=t.useCallback((function(e){return function(t){return x((function(n){var i;return M(t,n[e])?n:r({},n,((i={})[e]=t,i))}))}}),[]);function A(e){var i,o,a,l=e.itemIndex,u=e.rect,s=e.visibleRect,c=e.needsRender,d=e.Item,h=f(e),p={position:"absolute",left:u.x,top:u.y,width:u.width,height:u.height};t.isValidElement(h)&&h.type===d&&(h.props.style&&(p=r({},p,{},h.props.style)),i=h.props.forceRender,o=h.props.hash,a=h.key,h=h.props.children),a||(a=""+l),void 0===o&&(o=a);var v=i||c,m=b[o];if(m||-1===R.indexOf(o)||(v=!1),R[l]=o,!v)return null;var y={};return m?(y.width=m.width,y.height=m.height):("number"==typeof O.width&&(y.width=O.width),"number"==typeof O.height&&(y.height=O.height)),t.isValidElement(h)&&h.type.PadContent?(h.props.style&&(p=r({},p,{},h.props.style)),"number"==typeof h.props.width&&(y.width=h.props.width),"number"==typeof h.props.height&&(y.height=h.props.height),h=t.cloneElement(h,r({ref:h.ref,style:p},y))):h=n.createElement(T,r({style:p},y),h),n.createElement(C.Provider,{key:a,value:r({},z,{visibleRect:s,resizeContent:P(o)})},h)}g((function(){z.resizeContent(I)}),[]),g((function(){M(I,L.size)||z.resizeContent(I)}));var D={position:"relative"};I&&(D.width=I.width,D.height=I.height),h.style=r({},D,{},h.style);for(var W=[],H=0;k.length>H;H++){var N=k[H],V=r({},N,{itemIndex:H,visibleRect:te(N.rect,z.visibleRect),needsRender:ne(N.rect,z.visibleRect),Item:oe});W.push(A(V))}return R.join()!==v.join()&&m(R),n.createElement("div",h,W)}ae.defaultProps={width:null,height:null,direction:"y",spacing:0,itemCount:0,estimatedItemWidth:0,estimatedItemHeight:0,renderItem:function(){return null}},ae.PadContext=!0;function le(e){var o=e.width,a=e.height,l=e.onResize,u=i(e,["width","height","onResize"]),s=t.useState(null),c=s[0],d=s[1],f=w(c),h=t.useRef(null),p=f.current,v=t.useCallback((function(){var e=z(h.current);d(e)}),[]);g((function(){M(c,p)||(c?l(c):v())})),g((function(){if(("number"!=typeof o||"number"!=typeof a)&&Y){var e=h.current;return Y.listenTo(e,(function(){return v()})),function(){return Y.uninstall(e)}}}),[o,a]),t.useMemo((function(){d("number"==typeof o&&"number"==typeof a?{width:o,height:a}:null)}),[o,a]);var m=u.children;return c?"function"==typeof m&&(m=m(c)):m=null,u.style=r({width:ue(o),height:ue(a)},u.style),n.createElement("div",r({},u,{ref:h}),m)}function ue(e){return null==e||""===e?"100%":e}le.defaultProps={width:null,height:null,onResize:function(){}};var se={mouseEntered:!1,loopCount:1,loopOffset:0,loopWidth:0,scrollTo:null,options:["x",!0],pad:v};function ce(e,t){switch(t.type){case"setMouseEntered":return function(e,t){return r({},e,{mouseEntered:t.value})}(e,t);case"setPad":return function(e,t){var n=r({},e,{pad:t.value});return n=de(n=function(e,t){var n,i=e.loopCount,o=e.loopOffset,a=e.options,l=a[0],u=e.pad,s=u.contentOffset,c=u.size,d=u.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],u=a[1],s=a[2],c=n[l],d=t[l],f=c/i,h=.5*(c-f-d),p=0,v=d-c,m=e[u],y=0;if(p-=h,m>=(v+=h)&&p>=m)return[e,0];v>m?y=Math.floor((p-m)/f):m>p&&(y=-Math.floor((m-v)/f));return[(o={},o[u]=m+=f*y,o[s]=e[s],o),y]}(s,c,d,i,l),h=f[0],p=f[1];s!==h&&((n=n||r({},e)).loopOffset=o+p,n.scrollTo={offset:h,animated:!1})}return n||e}(n))}(e,t);case"setOptions":return function(e,t){var n=r({},e,{options:t.value});return n=de(n)}(e,t);case"setScrollTo":return function(e,t){return r({},e,{scrollTo:t.value})}(e,t);case"playNext":return function(e,t){var n=e.pad,i=function(e,t,n,i,r){var o,a="y"===r?["height","y","x"]:["width","x","y"],l=a[0],u=a[1],s=a[2],c=t[l],d=Math.min(c-n[l],0),f=e[u];i&&c>0&&(d=c*Math.ceil(d/c));f=f>d?Math.max(d,f-c):0;return(o={})[u]=f,o[s]=e[s],o}(n.contentOffset,n.size,n.contentSize,n.pagingEnabled,e.options[0]);return r({},e,{scrollTo:{offset:i,animated:!0}})}(e);default:return e}}function de(e,t){var n=e.options,i=e.pad;return r({},e,{},function(e,t,n,i,r){var o="y"===r?"height":"width",a=e[o],l=t[o],u=l/n;if(!i||0===l||0===a)return{loopCount:1,loopOffset:0,loopWidth:u};return{loopCount:2+Math.floor(a/u),loopWidth:u}}(i.size,i.contentSize,e.loopCount,n[1],n[0]))}var fe=r({direction:"x",loop:!0,autoplayEnabled:!0,autoplayInterval:5e3},ee.defaultProps,{pagingEnabled:!0,directionalLockEnabled:!0});function he(e){var r=e.direction,o=e.loop,a=e.autoplayEnabled,l=e.autoplayInterval,u=i(e,["direction","loop","autoplayEnabled","autoplayInterval"]),s=u.onMouseEnter,c=u.onMouseLeave,d=t.useReducer(ce,se),f=d[0],h=d[1],p=f.mouseEntered,v=f.loopCount,m=f.loopOffset,y=f.scrollTo,g=f.pad,w=g.drag,b=g.deceleration;t.useEffect((function(){if(a&&!w&&!b&&!p){var e=setTimeout((function(){e=void 0,h({type:"playNext"})}),l);return function(){e&&clearTimeout(e)}}}),[a,p,w,b,l]),t.useMemo((function(){u.scrollTo&&h({type:"setScrollTo",value:u.scrollTo})}),[u.scrollTo]),t.useMemo((function(){h({type:"setOptions",value:[r,o]})}),[o,r]);var x=t.useCallback((function(e){h({type:"setMouseEntered",value:!0}),s&&s(e)}),[s]),E=t.useCallback((function(e){h({type:"setMouseEntered",value:!1}),c&&c(e)}),[c]);return"x"===r?u.alwaysBounceY=!1:u.alwaysBounceX=!1,a&&(u.onMouseEnter=x,u.onMouseLeave=E),u.scrollTo=y,n.createElement(ee,u,(function(e){e!==f.pad&&h({type:"setPad",value:e});var t=u.children;return"function"==typeof t&&(t=t(f)),n.createElement(ae,{direction:r,itemCount:v,renderItem:function(e){return n.createElement(e.Item,{key:e.itemIndex+m,hash:"loop"},t)}})}))}var pe={pageIndex:0,scrollTo:null,player:se};function ve(e,t){switch(t.type){case"setPlayer":return function(e,t){var n=r({},e,{player:t.value});return n=function(e){var t=e.pageIndex,n=e.player.pad,i=function(e,t,n,i){var r="y"===i?["height","y"]:["width","x"],o=r[0],a=r[1],l=t[o],u=0;if(l>0){u=Math.round(-Math.max(Math.min(l-n[o],0),Math.min(e[a],0))/l)}return u}(n.contentOffset,n.size,n.contentSize,e.player.options[0]);if(i!==t)return r({},e,{pageIndex:i});return e}(n)}(e,t);case"setScrollTo":return function(e,t){return r({},e,{scrollTo:t.value})}(e,t);case"slideTo":return function(e,t){var n=e.pageIndex,i=e.player.options,o=i[0],a=i[1],l=e.player.pad,u=l.contentOffset,s=l.size,c=t.activeIndex,d=t.itemCount,f=t.animated,h=t.index;if(0===d)return e;"function"==typeof h&&(h=h({activeIndex:c,itemCount:d}));a&&(h+=d*Math.round((n-h)/d));if(h===n)return e;var p=function(e,t,n,i){var r,o="y"===i?["height","y","x"]:["width","x","y"],a=o[2];return(r={})[o[1]]=-e*n[o[0]],r[a]=t[a],r}(h,u,s,o);return r({},e,{scrollTo:{offset:p,animated:f}})}(e,t);default:return e}}var me=r({itemCount:0,renderItem:function(){return null},onSlideChange:function(){},slideTo:null},he.defaultProps=fe);function ye(e){var o=e.itemCount,a=e.renderItem,l=e.onSlideChange,u=e.slideTo,s=i(e,["itemCount","renderItem","onSlideChange","slideTo"]),c=s.width,d=s.height,f=s.direction,h=t.useReducer(ve,pe),p=h[0],v=h[1],m=p.scrollTo,y=p.pageIndex%o,b=w({activeIndex:y,itemCount:o}),x=b.current;g((function(){y!==x.activeIndex&&l({activeIndex:y,itemCount:o})})),t.useMemo((function(){s.scrollTo&&v({type:"setScrollTo",value:s.scrollTo})}),[s.scrollTo]),t.useMemo((function(){u&&v(r({type:"slideTo"},u,{},b.current))}),[u,b]);var E={width:c,height:d,itemWidth:c,itemHeight:d,direction:f,itemCount:o,renderItem:a};s.scrollTo=m;var S=s.children;return"function"==typeof S&&(S=S({activeIndex:y,itemCount:o})),n.createElement(t.Fragment,null,n.createElement(he,s,(function(e){return e!==p.player&&v({type:"setPlayer",value:e}),n.createElement(re,E)})),S)}ye.defaultProps=me,e.AutoResizing=le,e.Carousel=ye,e.GeneralContent=G,e.GridContent=re,e.ItemContent=T,e.ListContent=ae,e.Pad=ee,e.Pannable=S,e.Player=he,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(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}function r(){return(r=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)}var o=0,a={target:null,startPoint:null,movePoint:null,moveTime:null,translation:null,velocity:null,interval:null};function l(e,t){switch(t.type){case"disable":case"end":return function(e,t){return e.target?a: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,l=e.moveTime,u=e.translation,s=t.point,c=t.now,d=t.shouldStart;if(!n)return e;var f=c-l,h={x:s.x-i.x,y:s.y-i.y},p={x:(s.x-r.x)/f,y:(s.y-r.y)/f};if(u)return{target:n,startPoint:i,movePoint:s,moveTime:c,translation:h,velocity:p,interval:f};if(o>=Math.sqrt(Math.pow(h.x,2)+Math.pow(h.y,2)))return{target:n,startPoint:i,movePoint:s,moveTime:c,translation:null,velocity:null,interval:null};if(!d({target:n,translation:h,velocity:p,interval:f}))return a;return{target:n,startPoint:s,movePoint:s,moveTime:c,translation:{x:0,y:0},velocity:p,interval:f}}(e,t);default:return e}}function u(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 s(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]))}"number"==typeof n&&(n=u(n,e));var l={x:s(e,t,n,"x"),y:s(e,t,n,"y")};return l.x===e.x&&l.y===e.y?e:l}function c(e,t,n,i,r,o){if(o){var a="y"===o?["y","height"]:["x","width"],l=a[0],u=a[1],s=t[u],d=Math.min(s-n[u],0),f=e[l];return i&&s>0&&(d=s*Math.ceil(d/s)),f>0?f=0:d>f?f=d:!r&&i&&s>0&&(f=s*Math.round(f/s)),f}var h={x:c(e,t,n,i,r,"x"),y:c(e,t,n,i,r,"y")};return h.x===e.x&&h.y===e.y?e:h}function d(e,t,n,i,r,o){if(o){var a="y"===o?["y","height"]:["x","width"],l=a[0],s=a[1],c=e[l];if(i&&n[s]>0){var f=c/n[s];c=n[s]*(f=t[l]>.5?Math.ceil(f):-.5>t[l]?Math.floor(f):Math.round(f))}else r[l]&&(c+=.5*t[l]*(t[l]/r[l]));return c}return"number"==typeof r&&(r=u(r,t)),{x:d(e,t,n,i,r,"x"),y:d(e,t,n,i,r,"y")}}function f(e,t,n,i){var r,o,a={x:n.x-e.x,y:n.y-e.y},l=Math.sqrt(Math.pow(a.x,2)+Math.pow(a.y,2));if(l){var u=Math.sqrt(.5*Math.pow(r=(t.x*a.x+t.y*a.y)/l,2)+i*l),s=(u-r)/i;0>s&&(u=r,s=0),o=s+u/i}else r=Math.sqrt(Math.pow(t.x,2)+Math.pow(t.y,2)),o=(Math.sqrt(2)+1)*r/i;return o>0?{points:{x:[e.x,e.x+t.x*(o/3),n.x,n.x],y:[e.y,e.y+t.y*(o/3),n.y,n.y]},duration:o,startTime:(new Date).getTime(),endOffset:n,rate:i}:null}var h=.025,p=.0025,v={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:a};function y(e,t){return function(e,t){var n=e.size,i=e.contentSize,o=e.contentOffset,a=e.contentVelocity,l=e.drag,u=e.deceleration,p=e.options[0],v=h;if(u){var y=u.endOffset;if(y!==c(y,n,i,p,!0)&&o!==c(o,n,i,p,!0)){var m=a;return u.rate!==v&&(m=s(m,n,v),y=d(o,m,n,p,v)),y=c(y,n,i,p,!0),r({},e,{contentVelocity:m,drag:null,deceleration:f(o,m,y,v)})}}else if(!l){var g=c(o,n,i,p);if(o!==g){var w=d(g,{x:0,y:0},n,p,v);return r({},e,{drag:null,deceleration:f(o,a,w,v)})}}return e}(function(e,t){switch(t.type){case"setPannable":return function(e,t){return r({},e,{pannable:t.value})}(e,t);case"setOptions":return function(e,t){return r({},e,{options:t.value})}(e,t);case"setSize":return function(e,t){return r({},e,{size:t.value})}(e,t);case"setContentSize":return function(e,t){return r({},e,{contentSize:t.value})}(e,t);case"dragStart":return function(e,t){var n=e.contentOffset,i=e.pannable.velocity,o={x:1,y:1};e.options[1]&&(Math.abs(i.x)>Math.abs(i.y)?o.y=0:o.x=0);return r({},e,{contentVelocity:{x:o.x*i.x,y:o.y*i.y},drag:{direction:o,startOffset:n},deceleration:null})}(e);case"dragMove":return function(e,t){var n=e.contentOffset,i=e.drag,o=e.options,a=e.pannable,l=a.translation,u=a.interval,s=function e(t,n,i,r,o){if(o){var a="y"===o?["y","height","width"]:["x","width","height"],l=a[0],u=a[1],s=a[2],c=t[l],d=Math.min(i[u]-r[u],0),f=.5*Math.min(i[u],i[s]);return c>0?n[l]?f*(1-f/(f+c)):0:d>c?n[l]?d-f*(1-f/(f-c+d)):d:c}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:i.startOffset.x+i.direction.x*l.x,y:i.startOffset.y+i.direction.y*l.y},{x:o[2],y:o[3]},e.size,e.contentSize);return r({},e,{contentOffset:s,contentVelocity:{x:(s.x-n.x)/u,y:(s.y-n.y)/u},drag:i,deceleration:null})}(e);case"dragEnd":return function(e,t){var n=e.size,i=e.contentOffset,o=e.options[0],a=p,l=e.contentVelocity;o&&(l=s(l,n,a=h));var u=d(i,l,n,o,a);return r({},e,{contentVelocity:l,drag:null,deceleration:f(i,l,u,a)})}(e);case"dragCancel":return function(e,t){var n=e.contentOffset,i=e.contentVelocity,o=h,a=d(e.drag.startOffset,{x:0,y:0},e.size,e.options[0],o);return r({},e,{drag:null,deceleration:f(n,i,a,o)})}(e);case"decelerate":return function(e,t){var n=e.deceleration,i=t.now;if(!n)return e;if(i>=n.startTime+n.duration)return r({},e,{contentOffset:n.endOffset,contentVelocity:{x:0,y:0},drag:null,deceleration:null});var o=function e(t,n,i){if(i){var o,a=("y"===i?["y"]:["x"])[0],l=t.points,u=t.duration,s=Math.max(0,Math.min((n-t.startTime)/u,1)),c=l[a],d=c[0],f=c[1],h=c[2],p=c[3],v=d-3*(d-f)*s+3*(d-2*f+h)*Math.pow(s,2)-(d-3*f+3*h-p)*Math.pow(s,3),y=(-3*(d-f)+6*(d-2*f+h)*s-3*(d-3*f+3*h-p)*Math.pow(s,2))/u;return(o={})[a+"Offset"]=v,o[a+"Velocity"]=y,o}return r({},e(t,n,"x"),{},e(t,n,"y"))}(n,i);return r({},e,{contentOffset:{x:o.xOffset,y:o.yOffset},contentVelocity:{x:o.xVelocity,y:o.yVelocity},drag:null,deceleration:n})}(e,t);case"scrollTo":return m(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],u=a[1],s=-t[l],c=r[u]-t[u];if("auto"===n[l]){var d=0>c?-1:1;s+=d*Math.max(0,Math.min(d*(i[l]-s),d*c))}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),s+=n[l]*c;return s}"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 m(e,{type:"scrollTo",offset:i,animated:n})}(e,t);default:return e}}(e,t))}function m(e,t){var n=e.size,i=e.contentOffset,o=e.contentVelocity,a=e.drag,l=e.deceleration,u=e.options[0],s=t.point,c=t.offset,p=void 0===c?{x:0,y:0}:c;if(s&&(p={x:-s.x,y:-s.y}),a||!t.animated){if(p.x===i.x&&p.y===i.y)return e;var v=r({},e,{contentOffset:p});return a&&(v.drag=r({},a,{startOffset:{x:a.startOffset.x+p.x-i.x,y:a.startOffset.y+p.y-i.y}})),l&&(v.deceleration=f(p,o,{x:l.endOffset.x+p.x-i.x,y:l.endOffset.y+p.y-i.y},l.rate)),v}return r({},e,{drag:null,deceleration:f(i,o,d(p,{x:0,y:0},n,u,h),h)})}var g="undefined"!=typeof window&&void 0!==window.document&&void 0!==window.document.createElement?t.useLayoutEffect:t.useEffect;function w(e){var n=t.useRef(e);return t.useEffect((function(){n.current=e})),n}var b={create:function(e){var t=e.transformTranslate,n=e.userSelect,r=i(e,["transformTranslate","userSelect"]);return t&&function(e,t){t.transform="translate3d("+e[0]+"px, "+e[1]+"px, 0)",t.WebkitTransform="translate3d("+e[0]+"px, "+e[1]+"px, 0)",t.msTransform="translate("+e[0]+"px, "+e[1]+"px)"}(t,r),n&&function(e,t){t.userSelect=e,t.WebkitUserSelect=e,t.msUserSelect=e}(n,r),r}},x=function(){},E=function(){};void 0!==typeof window&&(x=window.addEventListener,E=window.removeEventListener);function S(e){var o=e.enabled,u=e.shouldStart,s=e.onStart,c=e.onMove,d=e.onEnd,f=e.onCancel,h=e.children,p=i(e,["enabled","shouldStart","onStart","onMove","onEnd","onCancel","children"]),v=t.useReducer(l,a),y=v[0],m=v[1],S=w(y),C=t.useRef(null),z=t.useRef({touchSupported:!1});z.current.state=y,z.current.shouldStart=u;var M=y.target,T=y.translation,O=y.velocity,I=y.interval,k=S.current;g((function(){function e(e,t){m({type:"track",target:e,point:t,now:(new Date).getTime()})}function t(t){if(z.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){z.current.state.translation&&e.preventDefault()}function i(t){z.current.touchSupported||e(t.target,{x:t.pageX,y:t.pageY})}if(o){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)}}}),[o]),g((function(){function e(e){m({type:"move",point:e,now:(new Date).getTime(),shouldStart:z.current.shouldStart})}function t(){m({type:"end"})}function n(t){var n=t.touches[0];z.current.state.translation&&t.preventDefault(),e({x:n.pageX,y:n.pageY})}function i(e){z.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(M)return z.current.touchSupported?(M.addEventListener("touchmove",n,!1),M.addEventListener("touchend",i,!1),M.addEventListener("touchcancel",i,!1),function(){M.removeEventListener("touchmove",n,!1),M.removeEventListener("touchend",i,!1),M.removeEventListener("touchcancel",i,!1)}):(x("mousemove",r,!1),x("mouseup",o,!1),function(){E("mousemove",r,!1),E("mouseup",o,!1)})}),[M]),g((function(){var e={target:M,translation:T,velocity:O,interval:I};k.translation!==T&&(T?k.translation?c(e):s(e):k.translation&&(o?d(e):f(e)))})),t.useMemo((function(){o||m({type:"disable"})}),[o]);var L={};T&&Object.assign(L,b.create({touchAction:"none",pointerEvents:"none",userSelect:"none"})),p.style&&Object.assign(L,p.style),p.style=L;var R="function"==typeof h?h(y):h;return n.createElement("div",r({},p,{ref:C}),R)}S.defaultProps={enabled:!0,shouldStart:function(){return!0},onStart:function(){},onMove:function(){},onEnd:function(){},onCancel:function(){}};var C=n.createContext({visibleRect:null,resizeContent:function(){}});function z(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 M(e,t){return e===t||!(!e||!t||e.width!==t.width||e.height!==t.height)}function T(e){var o=e.width,a=e.height,l=e.children,u=i(e,["width","height","children"]),s=t.useState(null),c=s[0],d=s[1],f=w(c),h=t.useContext(C),p=t.useRef(null),v=f.current,y=t.useCallback((function(){}),[]),m=t.useCallback((function(){return p.current}),[]),b=t.useCallback((function(){var e=z(p.current);d(e)}),[]);g((function(){M(v,c)||c&&h.resizeContent(c),c||b()})),t.useMemo((function(){var e=null;"number"==typeof o&&"number"==typeof a&&(e={width:o,height:a}),d(e)}),[o,a]);var x={position:"relative"},E={position:"absolute"};"number"==typeof o&&(E.width=o),"number"==typeof a&&(E.height=a),c&&(x.width=c.width,x.height=c.height),u.style&&Object.assign(x,u.style),u.style=x;var S="function"==typeof l?l(c,{getResizeNode:m,calculateSize:b}):l;return n.createElement(C.Provider,{value:r({},h,{resizeContent:y})},n.createElement("div",u,n.createElement("div",{ref:p,style:E},S)))}function O(e,t){return e(t={exports:{}},t.exports),t.exports}T.defaultProps={width:null,height:null},T.PadContent=!0;var I=O((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}}})),k=O((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}})),L=O((function(e){(e.exports={}).getOption=function(e,t,n){var i=e[t];if(null==i&&void 0!==n)return n;return i}})),R=function(e){var t=(e=e||{}).reporter,n=L.getOption(e,"async",!0),i=L.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=P(),a=!1;function l(){for(a=!0;o.size();){var e=o;o=P(),e.process()}a=!1}function u(){r=setTimeout(l,0)}return{add:function(e,t){!a&&i&&n&&0===o.size()&&u(),o.add(e,t)},force:function(e){a||(void 0===e&&(e=n),r&&(clearTimeout(r),r=null),e?u():l())}}};function P(){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}}}var A="_erd";function D(e){return e[A]}var W={initState:function(e){return e[A]={},D(e)},getState:D,cleanState:function(e){delete e[A]}},H=I.forEach,j=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}}(),a="erd_scroll_detection_container";function l(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 c(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",a),{makeDetectable:function(e,u,d){function f(){if(e.debug){var n=Array.prototype.slice.call(arguments);if(n.unshift(r.get(u),"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(u),t={};return t.position=e.position,t.width=u.offsetWidth,t.height=u.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 v(){if(f("storeStyle invoked."),i(u)){var e=p();i(u).style=e}else f("Aborting because element has been uninstalled")}function y(e,t,n){i(e).lastWidth=t,i(e).lastHeight=n}function m(){return 2*o.width+1}function g(){return 2*o.height+1}function w(e){return e+10+m()}function b(e){return e+10+g()}function x(e,t,n){var i=s(e),r=c(e),o=w(t),a=b(n),l=function(e){return 2*e+m()}(t),u=function(e){return 2*e+g()}(n);i.scrollLeft=o,i.scrollTop=a,r.scrollLeft=l,r.scrollTop=u}function E(){var e=i(u).container;if(!e){(e=document.createElement("div")).className=a,e.style.cssText="visibility: hidden; display: inline; width: 0px; height: 0px; z-index: -1; overflow: hidden; margin: 0; padding: 0;",i(u).container=e,function(e){e.className+=" "+a+"_animation_active"}(e),u.appendChild(e);var t=function(){i(u).onRendered&&i(u).onRendered()};l(e,"animationstart",t),i(u).onAnimationStart=t}return e}function S(){if(f("Injecting elements"),i(u)){!function(){var e=i(u).style;if("static"===e.position){u.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,u,e,"top"),n(t,u,e,"right"),n(t,u,e,"bottom"),n(t,u,e,"left")}}();var e=i(u).container;e||(e=E());var n,r,s,c,d=o.width,h=o.height,p="position: absolute; flex: none; overflow: hidden; z-index: -1; visibility: hidden; "+("left: "+(n=(n=-(1+d))?n+"px":"0")+"; top: "+(r=(r=-(1+h))?r+"px":"0")+"; right: "+(c=(c=-d)?c+"px":"0")+"; bottom: "+(s=(s=-h)?s+"px":"0")+";"),v=document.createElement("div"),y=document.createElement("div"),m=document.createElement("div"),g=document.createElement("div"),w=document.createElement("div"),b=document.createElement("div");v.dir="ltr",v.style.cssText="position: absolute; flex: none; overflow: hidden; z-index: -1; visibility: hidden; width: 100%; height: 100%; left: 0px; top: 0px;",v.className=a,y.className=a,y.style.cssText=p,m.style.cssText="position: absolute; flex: none; overflow: scroll; z-index: -1; visibility: hidden; width: 100%; height: 100%;",g.style.cssText="position: absolute; left: 0; top: 0;",w.style.cssText="position: absolute; flex: none; overflow: scroll; z-index: -1; visibility: hidden; width: 100%; height: 100%;",b.style.cssText="position: absolute; width: 200%; height: 200%;",m.appendChild(g),w.appendChild(b),y.appendChild(m),y.appendChild(w),v.appendChild(y),e.appendChild(v),l(m,"scroll",x),l(w,"scroll",S),i(u).onExpandScroll=x,i(u).onShrinkScroll=S}else f("Aborting because element has been uninstalled");function x(){i(u).onExpand&&i(u).onExpand()}function S(){i(u).onShrink&&i(u).onShrink()}}function C(){function o(e,t,n){var i=function(e){return s(e).childNodes[0]}(e),r=w(t),o=b(n);i.style.width=r+"px",i.style.height=o+"px"}function a(a){var s=u.offsetWidth,c=u.offsetHeight;f("Storing current size",s,c),y(u,s,c),n.add(0,(function(){if(i(u))if(l()){if(e.debug)u.offsetWidth===s&&u.offsetHeight===c||t.warn(r.get(u),"Scroll: Size changed before updating detector elements.");o(u,s,c)}else f("Aborting because element container has not been initialized");else f("Aborting because element has been uninstalled")})),n.add(1,(function(){i(u)?l()?x(u,s,c):f("Aborting because element container has not been initialized"):f("Aborting because element has been uninstalled")})),a&&n.add(2,(function(){i(u)?l()?a():f("Aborting because element container has not been initialized"):f("Aborting because element has been uninstalled")}))}function l(){return!!i(u).container}function d(){f("notifyListenersIfNeeded invoked");var e=i(u);return void 0===i(u).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 H(i(u).listeners,(function(e){e(u)})))}function p(){if(f("Scroll detected."),h(u))f("Scroll event fired while unrendered. Ignoring...");else{var e=u.offsetWidth,t=u.offsetHeight;e!==i(u).lastWidth||t!==i(u).lastHeight?(f("Element size changed."),a(d)):f("Element size has not changed ("+e+"x"+t+").")}}if(f("registerListenersAndPositionElements invoked."),i(u)){i(u).onRendered=function(){if(f("startanimation triggered."),h(u))f("Ignoring since element is still unrendered...");else{f("Element rendered.");var e=s(u),t=c(u);0!==e.scrollLeft&&0!==e.scrollTop&&0!==t.scrollLeft&&0!==t.scrollTop||(f("Scrollbars out of sync. Updating detector elements..."),a(d))}},i(u).onExpand=p,i(u).onShrink=p;var v=i(u).style;o(u,v.width,v.height)}else f("Aborting because element has been uninstalled")}function z(){if(f("finalizeDomMutation invoked."),i(u)){var e=i(u).style;y(u,e.width,e.height),x(u,e.width,e.height)}else f("Aborting because element has been uninstalled")}function M(){d(u)}function T(){var e;f("Installing..."),i(u).listeners=[],e=p(),i(u).startSize={width:e.width,height:e.height},f("Element start size",i(u).startSize),n.add(0,v),n.add(1,S),n.add(2,C),n.add(3,z),n.add(4,M)}d||(d=u,u=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)}(u)?T():(f("Element is detached"),E(),f("Waiting until element is attached..."),i(u).onRendered=function(){f("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&&u(s(e),"scroll",t.onExpandScroll),t.onShrinkScroll&&u(c(e),"scroll",t.onShrinkScroll),t.onAnimationStart&&u(t.container,"animationstart",t.onAnimationStart),t.container&&e.removeChild(t.container))}}},N=I.forEach;function V(e){return Array.isArray(e)||void 0!==e.length}function B(e){if(Array.isArray(e))return e;var t=[];return N(e,(function(e){t.push(e)})),t}function q(e){return e&&1===e.nodeType}function _(e,t,n){var i=e[t];return null==i&&void 0!==n?n:i}var X=null;"undefined"!=typeof window&&(X=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=_(e,"batchProcessor",R({reporter:r})),a={};a.callOnAdd=!!_(e,"callOnAdd",!0),a.debug=!!_(e,"debug",!1);var l,u=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),s=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}),c=_(e,"strategy","object"),d={reporter:r,batchProcessor:o,stateHandler:W,idHandler:t};if("scroll"===c&&(k.isLegacyOpera()?(r.warn("Scroll strategy is not supported on legacy Opera. Changing to object strategy."),c="object"):k.isIE(9)&&(r.warn("Scroll strategy is not supported on IE9. Changing to object strategy."),c="object")),"scroll"===c)l=j(d);else{if("object"!==c)throw Error("Invalid strategy name: "+c);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||{},k.isIE(8)?o(r):function(e,r){var o="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;",a=!1,l=window.getComputedStyle(e),u=e.offsetWidth,s=e.offsetHeight;function c(){function n(){if("static"===l.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,l,"top"),n(t,e,l,"right"),n(t,e,l,"bottom"),n(t,e,l,"left")}}""!==l.position&&(n(),a=!0);var u=document.createElement("object");u.style.cssText=o,u.tabIndex=-1,u.type="text/html",u.setAttribute("aria-hidden","true"),u.onload=function(){a||n(),function e(t,n){t.contentDocument?n(t.contentDocument):setTimeout((function(){e(t,n)}),100)}(this,(function(t){r(e)}))},k.isIE()||(u.data="about:blank"),e.appendChild(u),i(e).object=u,k.isIE()&&(u.data="about:blank")}i(e).startSize={width:u,height:s},n?n.add(c):c()}(r,o)},addListener:function(e,t){if(!r(e))throw Error("Element is not detectable by this strategy.");function n(){t(e)}k.isIE(8)?(i(e).object={proxy:n},e.attachEvent("onresize",n)):r(e).contentDocument.defaultView.addEventListener("resize",n)},uninstall:function(e){k.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=u.get(e);N(t,(function(t){t(e)}))}function c(e,t,n){u.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(q(n))n=[n];else{if(!V(n))return r.error("Invalid arguments. Must be a DOM element or a collection of DOM elements.");n=B(n)}var d=0,h=_(e,"callOnAdd",a.callOnAdd),p=_(e,"onReady",(function(){})),v=_(e,"debug",a.debug);N(n,(function(e){W.getState(e)||(W.initState(e),t.set(e));var a=t.get(e);if(v&&r.log("Attaching listener to element",a,e),!s.isDetectable(e))return v&&r.log(a,"Not detectable."),s.isBusy(e)?(v&&r.log(a,"System busy making it detectable"),c(h,e,i),f[a]=f[a]||[],void f[a].push((function(){++d===n.length&&p()}))):(v&&r.log(a,"Making detectable..."),s.markBusy(e,!0),l.makeDetectable({debug:v},e,(function(e){if(v&&r.log(a,"onElementDetectable"),W.getState(e)){s.markAsDetectable(e),s.markBusy(e,!1),l.addListener(e,o),c(h,e,i);var t=W.getState(e);if(t&&t.startSize)t.startSize.width===e.offsetWidth&&t.startSize.height===e.offsetHeight||o(e);f[a]&&N(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."),c(h,e,i),d++})),d===n.length&&p()},removeListener:u.removeListener,removeAllListeners:u.removeAllListeners,uninstall:function(e){if(!e)return r.error("At least one element is required.");if(q(e))e=[e];else{if(!V(e))return r.error("Invalid arguments. Must be a DOM element or a collection of DOM elements.");e=B(e)}N(e,(function(e){u.removeAllListeners(e),l.uninstall(e),W.cleanState(e)}))}}}({strategy:"scroll"}));var Y=X,F=r({},T.defaultProps);function G(e){var i=e.width,r=e.height,o=e.children,a=t.useRef(null);return g((function(){if(("number"!=typeof i||"number"!=typeof r)&&Y){var e=a.current.getResizeNode();return Y.listenTo(e,(function(){return a.current.calculateSize()})),function(){return Y.uninstall(e)}}}),[i,r]),n.createElement(T,e,(function(e,t){return a.current=t,"function"==typeof o?o(e,t):o}))}G.defaultProps=F,G.PadContent=!0;var U=function(){},J=function(){};if("undefined"!=typeof window){U=window.requestAnimationFrame,J=window.cancelAnimationFrame;for(var K=["ms","moz","webkit","o"],Q=0,Z=0;4>Z&&!U;++Z)U=window[K[Z]+"RequestAnimationFrame"],J=window[K[Z]+"CancelAnimationFrame"]||window[K[Z]+"CancelRequestAnimationFrame"];U||(U=function(e){var t=(new Date).getTime(),n=Math.max(0,16-(t-Q)),i=window.setTimeout((function(){e(t+n)}),n);return Q=t+n,i},J=function(e){clearTimeout(e)})}var $=r({width:0,height:0,pagingEnabled:!1,directionalLockEnabled:!1,alwaysBounceX:!0,alwaysBounceY:!0,scrollTo:null,scrollToRect:null,onScroll:function(){},onDragStart:function(){},onDragEnd:function(){},onDecelerationStart:function(){},onDecelerationEnd:function(){},onContentResize:function(){}},S.defaultProps);function ee(e){var o=e.width,a=e.height,l=e.pagingEnabled,u=e.directionalLockEnabled,s=e.alwaysBounceX,c=e.alwaysBounceY,d=e.scrollTo,f=e.scrollToRect,h=e.onScroll,p=e.onDragStart,m=e.onDragEnd,x=e.onDecelerationStart,E=e.onDecelerationEnd,z=e.onContentResize,M=e.children,T=i(e,["width","height","pagingEnabled","directionalLockEnabled","alwaysBounceX","alwaysBounceY","scrollTo","scrollToRect","onScroll","onDragStart","onDragEnd","onDecelerationStart","onDecelerationEnd","onContentResize","children"]),O=T.enabled,I=T.shouldStart,k=t.useReducer(y,v),L=k[0],R=k[1],P=w(L),A=L.size,D=L.contentSize,W=L.contentOffset,H=L.contentVelocity,j=L.drag,N=L.deceleration,V=P.current,B=t.useCallback((function(e){R({type:"setContentSize",value:e})}),[]),q=t.useCallback((function(e){return!(u&&!function(e,t,n){var i=Math.abs(e.x)>Math.abs(e.y)?"width":"height";return n[i]>t[i]}(e.velocity,A,D))&&I(e)}),[I,u,A,D]);g((function(){V.pannable.translation!==L.pannable.translation&&(L.pannable.translation?R(V.pannable.translation?{type:"dragMove"}:{type:"dragStart"}):V.pannable.translation&&R(O?{type:"dragEnd"}:{type:"dragCancel"}));var e={size:A,contentSize:D,contentOffset:W,contentVelocity:H,dragging:!!j,decelerating:!!N};V.contentSize!==D&&z(D),V.contentOffset!==W&&h(e),V.drag!==j&&(V.drag?j||m(e):p(e)),V.deceleration!==N&&(V.deceleration?N||E(e):x(e))})),g((function(){if(L.deceleration){var e=U((function(){R({type:"decelerate",now:(new Date).getTime()})}));return function(){J(e)}}}),[L]),t.useMemo((function(){R({type:"setSize",value:{width:o,height:a}})}),[o,a]),t.useMemo((function(){R({type:"setOptions",value:[l,u,s,c]})}),[l,u,s,c]),t.useMemo((function(){d&&R(r({type:"scrollTo"},d))}),[d]),t.useMemo((function(){f&&R(r({type:"scrollToRect"},f))}),[f]),T.shouldStart=q;var _={overflow:"hidden",position:"relative",width:A.width,height:A.height};return T.style&&Object.assign(_,T.style),T.style=_,n.createElement(C.Provider,{value:{visibleRect:{x:-W.x,y:-W.y,width:A.width,height:A.height},resizeContent:B}},n.createElement(S,T,(function(e){L.pannable!==e&&R({type:"setPannable",value:e});var i=b.create({position:"relative",width:D.width,height:D.height,transformTranslate:[W.x,W.y],willChange:"transform"}),r="function"==typeof M?M(L):M;return t.isValidElement(r)&&r.type.PadContent?(r.props.style&&Object.assign(i,r.props.style),r=t.cloneElement(r,{style:i,ref:r.ref})):r=n.createElement(G,{style:i},r),r})))}function te(e,t,n){if(!t)return t;if(n){var i,o="y"===n?["y","height"]:["x","width"],a=o[0],l=o[1];return(i={})[a]=t[a]-e[a],i[l]=t[l],i}return r({},te(e,t,"x"),{},te(e,t,"y"))}function ne(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 ne(e,t,"x")&&ne(e,t,"y")}function ie(){}ee.defaultProps=$;function re(e){var o=e.width,a=e.height,l=e.direction,u=e.rowSpacing,s=e.columnSpacing,c=e.itemCount,d=e.itemWidth,f=e.itemHeight,h=e.renderItem,p=e.children,v=i(e,["width","height","direction","rowSpacing","columnSpacing","itemCount","itemWidth","itemHeight","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],u=a[1],s=a[2],c=a[3],d=a[4],f=a[5],h={width:e.width,height:e.height}[s],p=0,v=0,y=0,m=[];"number"!=typeof h?(y=i,0===r[s]?h=0:(h=i*r[s],i>1&&(h+=(i-1)*o[f]))):0===r[s]?y=i:(y=1,h>r[s]&&(y+=Math.floor((h-r[s])/(r[s]+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 b,x,E=w+g*y,S=0;if(y>1&&(S+=Math.round(w*((h-r[s])/(y-1)))),E>=i)break;m.push(((x={rect:(b={},b[l]=S,b[u]=p,b[s]=r[s],b[c]=r[c],b)})[d+"Index"]=g,x[f+"Index"]=w,x.itemIndex=E,x))}p+=r[c]}return{size:(t={},t[s]=h,t[c]=p,t),count:(n={},n[d]=v,n[f]=y,n),layoutList:m}}({direction:l,width:o,height:a,rowSpacing:u,columnSpacing:s,itemCount:c,itemWidth:d,itemHeight:f})}),[l,o,a,u,s,c,d,f]),m=w(y),b=t.useContext(C),x=y.size,E=y.layoutList,S=m.current,z=t.useCallback((function(){}),[]);g((function(){b.resizeContent(x)}),[]),g((function(){M(S.size,x)||b.resizeContent(x)}));var T={position:"relative"};x&&(T.width=x.width,T.height=x.height),v.style&&Object.assign(T,v.style),v.style=T;var O=E.map((function(e){return function(e){var i=e.rect,o=e.itemIndex,a=e.visibleRect,l=e.needsRender,u=e.Item,s=!1,c=h(e),d=o+"",f={position:"absolute",left:i.x,top:i.y,width:i.width,height:i.height};return t.isValidElement(c)&&c.type===u&&(void 0!==c.props.forceRender&&(s=c.props.forceRender),c.key&&(d=c.key),c=c.props.children),l||s?(t.isValidElement(c)?(c.props.style&&Object.assign(f,c.props.style),c=t.cloneElement(c,{style:f,ref:c.ref})):c=n.createElement("div",{style:f},c),n.createElement(C.Provider,{key:d,value:r({},b,{visibleRect:a,resizeContent:z})},c)):null}(r({},e,{visibleRect:te(e.rect,b.visibleRect),needsRender:ne(e.rect,b.visibleRect),Item:ie}))}));return"function"==typeof p&&p(y),n.createElement("div",v,O)}function oe(){}re.defaultProps={width:null,height:null,direction:"y",rowSpacing:0,columnSpacing:0,itemCount:0,itemWidth:0,itemHeight:0,renderItem:function(){return null}},re.PadContent=!0;function ae(e){var o=e.width,a=e.height,l=e.direction,u=e.spacing,s=e.itemCount,c=e.estimatedItemWidth,d=e.estimatedItemHeight,f=e.renderItem,h=e.children,p=i(e,["width","height","direction","spacing","itemCount","estimatedItemWidth","estimatedItemHeight","renderItem","children"]),v=t.useState([]),y=v[0],m=v[1],b=t.useState({}),x=b[0],E=b[1],S=t.useMemo((function(){return function(e,t,n){var i,r=e.spacing,o=e.itemCount,a={width:e.width,height:e.height},l={width:e.estimatedItemWidth,height:e.estimatedItemHeight},u="x"===e.direction?["y","x","height","width"]:["x","y","width","height"],s=u[0],c=u[1],d=u[2],f=u[3],h=0,p=0,v=[],y={};"number"==typeof a[d]&&(y[d]=a[d]);for(var m=0;o>m;m++){var g,w,b=n[t[m]]||((g={})[d]=void 0===y[d]?l[d]:y[d],g[f]=l[f],g);v.push({rect:(w={},w[s]=0,w[c]=p,w[d]=b[d],w[f]=b[f],w),itemIndex:m}),b[f]>0&&(p+=b[f],o-1>m&&(p+=r)),b[d]>h&&(h=b[d])}return{size:(i={},i[d]=h,i[f]=p,i),fixed:y,layoutList:v}}({width:o,height:a,direction:l,spacing:u,itemCount:s,estimatedItemWidth:c,estimatedItemHeight:d},y,x)}),[o,a,l,u,s,c,d,y,x]),z=w(S),O=t.useContext(C),I=S.size,k=S.fixed,L=S.layoutList,R=z.current,P=[],A=t.useCallback((function(e){return function(t){E((function(n){var i;return M(n[e],t)?n:r({},n,((i={})[e]=t,i))}))}}),[]);g((function(){O.resizeContent(I)}),[]),g((function(){M(R.size,I)||O.resizeContent(I)}));var D={position:"relative"};I&&(D.width=I.width,D.height=I.height),p.style&&Object.assign(D,p.style),p.style=D;var W=L.map((function(e){return function(e){var i,o=e.rect,a=e.itemIndex,l=e.visibleRect,u=e.needsRender,s=e.Item,c=!1,d=f(e),h=a+"",p={position:"absolute",left:o.x,top:o.y,width:o.width,height:o.height};t.isValidElement(d)&&d.type===s&&(void 0!==d.props.forceRender&&(c=d.props.forceRender),d.key&&(h=d.key),void 0!==d.props.hash&&(i=d.props.hash),d=d.props.children),void 0===i&&(i=h);var v=x[i],y=!u&&!c;if(v||-1===P.indexOf(i)||(y=!0),P[a]=i,y)return null;var m={};return v?(m.width=v.width,m.height=v.height):("number"==typeof k.width&&(m.width=k.width),"number"==typeof k.height&&(m.height=k.height)),t.isValidElement(d)&&d.type.PadContent?(d.props.style&&Object.assign(p,d.props.style),"number"==typeof d.props.width&&(m.width=d.props.width),"number"==typeof d.props.height&&(m.height=d.props.height),d=t.cloneElement(d,r({},m,{style:p,ref:d.ref}))):d=n.createElement(T,r({style:p},m),d),n.createElement(C.Provider,{key:h,value:r({},O,{visibleRect:l,resizeContent:A(i)})},d)}(r({},e,{visibleRect:te(e.rect,O.visibleRect),needsRender:ne(e.rect,O.visibleRect),Item:oe}))}));return y.join()!==P.join()&&m(P),"function"==typeof h&&h(S),n.createElement("div",p,W)}ae.defaultProps={width:null,height:null,direction:"y",spacing:0,itemCount:0,estimatedItemWidth:0,estimatedItemHeight:0,renderItem:function(){return null}},ae.PadContext=!0;function le(e){var o=e.width,a=e.height,l=e.onResize,u=e.children,s=i(e,["width","height","onResize","children"]),c=t.useState(null),d=c[0],f=c[1],h=w(d),p=t.useRef(null),v=h.current,y=t.useCallback((function(){var e=z(p.current);f(e)}),[]);g((function(){M(v,d)||d&&l(d),d||y()})),g((function(){if(("number"!=typeof o||"number"!=typeof a)&&Y){var e=p.current;return Y.listenTo(e,(function(){return y()})),function(){return Y.uninstall(e)}}}),[o,a]),t.useMemo((function(){var e=null;"number"==typeof o&&"number"==typeof a&&(e={width:o,height:a}),f(e)}),[o,a]),s.style=r({width:ue(o),height:ue(a)},s.style);var m=null;return d&&(m="function"==typeof u?u(d):u),n.createElement("div",r({},s,{ref:p}),m)}function ue(e){return null==e||""===e?"100%":e}le.defaultProps={width:null,height:null,onResize:function(){}};var se={mouseEntered:!1,loopCount:1,loopOffset:0,loopWidth:0,scrollTo:null,options:["x",!0],pad:v};function ce(e,t){switch(t.type){case"setMouseEntered":return function(e,t){return r({},e,{mouseEntered:t.value})}(e,t);case"setPad":return function(e,t){var n=r({},e,{pad:t.value});return n=de(n=function(e,t){var n,i=e.loopCount,o=e.loopOffset,a=e.options,l=a[0],u=e.pad,s=u.contentOffset,c=u.size,d=u.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],u=a[1],s=a[2],c=n[l],d=t[l],f=c/i,h=.5*(c-f-d),p=0,v=d-c,y=e[u],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[u]=y+=f*m,o[s]=e[s],o),m]}(s,c,d,i,l),h=f[0],p=f[1];s!==h&&((n=n||r({},e)).loopOffset=o+p,n.scrollTo={offset:h,animated:!1})}return n||e}(n))}(e,t);case"setOptions":return function(e,t){var n=r({},e,{options:t.value});return n=de(n)}(e,t);case"setScrollTo":return function(e,t){return r({},e,{scrollTo:t.value})}(e,t);case"playNext":return function(e,t){var n=e.pad,i=function(e,t,n,i,r){var o,a="y"===r?["height","y","x"]:["width","x","y"],l=a[0],u=a[1],s=a[2],c=t[l],d=Math.min(c-n[l],0),f=e[u];i&&c>0&&(d=c*Math.ceil(d/c));f=f>d?Math.max(d,f-c):0;return(o={})[u]=f,o[s]=e[s],o}(n.contentOffset,n.size,n.contentSize,n.pagingEnabled,e.options[0]);return r({},e,{scrollTo:{offset:i,animated:!0}})}(e);default:return e}}function de(e,t){var n=e.options,i=e.pad;return r({},e,{},function(e,t,n,i,r){var o="y"===r?"height":"width",a=e[o],l=t[o],u=l/n;if(!i||0===l||0===a)return{loopCount:1,loopOffset:0,loopWidth:u};return{loopCount:2+Math.floor(a/u),loopWidth:u}}(i.size,i.contentSize,e.loopCount,n[1],n[0]))}var fe=r({direction:"x",loop:!0,autoplayEnabled:!0,autoplayInterval:5e3},ee.defaultProps,{pagingEnabled:!0,directionalLockEnabled:!0});function he(e){var r=e.direction,o=e.loop,a=e.autoplayEnabled,l=e.autoplayInterval,u=e.children,s=i(e,["direction","loop","autoplayEnabled","autoplayInterval","children"]),c=s.scrollTo,d=s.onMouseEnter,f=s.onMouseLeave,h=t.useReducer(ce,se),p=h[0],v=h[1],y=p.mouseEntered,m=p.loopCount,g=p.loopOffset,w=p.scrollTo,b=p.pad,x=b.drag,E=b.deceleration,S=t.useCallback((function(e){v({type:"setMouseEntered",value:!0}),d&&d(e)}),[d]),C=t.useCallback((function(e){v({type:"setMouseEntered",value:!1}),f&&f(e)}),[f]);return t.useEffect((function(){if(a&&!y&&!x&&!E){var e=setTimeout((function(){v({type:"playNext"})}),l);return function(){clearTimeout(e)}}}),[a,l,y,x,E]),t.useMemo((function(){v({type:"setOptions",value:[r,o]})}),[o,r]),t.useMemo((function(){c&&v({type:"setScrollTo",value:c})}),[c]),"x"===r?s.alwaysBounceY=!1:s.alwaysBounceX=!1,a&&(s.onMouseEnter=S,s.onMouseLeave=C),s.scrollTo=w,n.createElement(ee,s,(function(e){p.pad!==e&&v({type:"setPad",value:e});var t="function"==typeof u?u(p):u;return n.createElement(ae,{direction:r,itemCount:m,renderItem:function(e){return n.createElement(e.Item,{key:e.itemIndex+g,hash:"loop"},t)}})}))}var pe={activeIndex:0,itemCount:0,scrollTo:null,player:se};function ve(e,t){switch(t.type){case"setPlayer":return function(e,t){var n=t.value,i=n.options[0],o=n.pad,a=o.contentOffset,l=o.size,u=o.contentSize,s=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,i),c=0;if(s>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],u=0;if(l>0){u=Math.round(-Math.max(Math.min(l-n[o],0),Math.min(e[a],0))/l)}return u}(a,l,u,i);c=d%s}return r({},e,{player:n,itemCount:s,activeIndex:c})}(e,t);case"setScrollTo":return function(e,t){return r({},e,{scrollTo:t.value})}(e,t);case"slideTo":return function(e,t){var n=e.activeIndex,i=e.itemCount,o=e.player.options[0],a=e.player.pad,l=a.contentOffset,u=a.size,s=t.animated,c=t.index;if(0===i)return e;"function"==typeof c&&(c=c({activeIndex:n,itemCount:i}));if(c===n)return e;var d=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}(c-n,l,u,o);return r({},e,{scrollTo:{offset:d,animated:s}})}(e,t);default:return e}}var ye=r({itemCount:0,renderItem:function(){return null},onSlideChange:function(){},slideTo:null},he.defaultProps=fe);function me(e){var o=e.itemCount,a=e.renderItem,l=e.onSlideChange,u=e.slideTo,s=e.children,c=i(e,["itemCount","renderItem","onSlideChange","slideTo","children"]),d=c.width,f=c.height,h=c.direction,p=c.scrollTo,v=t.useReducer(ve,pe),y=v[0],m=v[1],b=w(y),x=y.activeIndex,E=y.itemCount,S=y.scrollTo,C=b.current;g((function(){C.activeIndex!==x&&l({activeIndex:x,itemCount:E})})),t.useMemo((function(){p&&m({type:"setScrollTo",value:p})}),[p]),t.useMemo((function(){u&&m(r({type:"slideTo"},u))}),[u]);var z={width:d,height:f,itemWidth:d,itemHeight:f,direction:h,itemCount:o,renderItem:a};c.scrollTo=S;var M="function"==typeof s?s({activeIndex:x,itemCount:E}):s;return n.createElement(t.Fragment,null,n.createElement(he,c,(function(e){return y.player!==e&&m({type:"setPlayer",value:e}),n.createElement(re,z)})),M)}me.defaultProps=ye,e.AutoResizing=le,e.Carousel=me,e.GeneralContent=G,e.GridContent=re,e.ItemContent=T,e.ListContent=ae,e.Pad=ee,e.Pannable=S,e.Player=he,Object.defineProperty(e,"__esModule",{value:!0})}));

es/AutoResizing.js

@@ -15,7 +15,8 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 
-function AutoResizing(_ref) {
-  var width = _ref.width,
-      height = _ref.height,
-      onResize = _ref.onResize,
-      props = _objectWithoutPropertiesLoose(_ref, ["width", "height", "onResize"]);
+function AutoResizing(props) {
+  var width = props.width,
+      height = props.height,
+      onResize = props.onResize,
+      children = props.children,
+      divProps = _objectWithoutPropertiesLoose(props, ["width", "height", "onResize", "children"]);
 
@@ -34,9 +35,11 @@ var _useState = useState(null),
   useIsomorphicLayoutEffect(function () {
-    if (!isEqualToSize(size, prevSize)) {
+    if (!isEqualToSize(prevSize, size)) {
       if (size) {
         onResize(size);
-      } else {
-        calculateSize();
       }
     }
+
+    if (!size) {
+      calculateSize();
+    }
   });
@@ -59,23 +62,24 @@ useIsomorphicLayoutEffect(function () {
   useMemo(function () {
-    var nextSize = typeof width === 'number' && typeof height === 'number' ? {
-      width: width,
-      height: height
-    } : null;
+    var nextSize = null;
+
+    if (typeof width === 'number' && typeof height === 'number') {
+      nextSize = {
+        width: width,
+        height: height
+      };
+    }
+
     setSize(nextSize);
   }, [width, height]);
-  var element = props.children;
+  divProps.style = _extends({
+    width: getStyleDimension(width),
+    height: getStyleDimension(height)
+  }, divProps.style);
+  var element = null;
 
   if (size) {
-    if (typeof element === 'function') {
-      element = element(size);
-    }
-  } else {
-    element = null;
+    element = typeof children === 'function' ? children(size) : children;
   }
 
-  props.style = _extends({
-    width: getStyleDimension(width),
-    height: getStyleDimension(height)
-  }, props.style);
-  return React.createElement("div", _extends({}, props, {
+  return React.createElement("div", _extends({}, divProps, {
     ref: resizeRef
@@ -86,2 +90,3 @@ }), element);
 AutoResizing.defaultProps = defaultAutoResizingProps;
+export default AutoResizing;
 
@@ -94,4 +99,2 @@ function getStyleDimension(value) {
   return value;
-}
-
-export default AutoResizing;
+}

es/carousel/Carousel.js

@@ -19,12 +19,14 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 
-function Carousel(_ref) {
-  var itemCount = _ref.itemCount,
-      renderItem = _ref.renderItem,
-      onSlideChange = _ref.onSlideChange,
-      slideTo = _ref.slideTo,
-      playerProps = _objectWithoutPropertiesLoose(_ref, ["itemCount", "renderItem", "onSlideChange", "slideTo"]);
+function Carousel(props) {
+  var gridItemCount = props.itemCount,
+      renderItem = props.renderItem,
+      onSlideChange = props.onSlideChange,
+      slideTo = props.slideTo,
+      children = props.children,
+      playerProps = _objectWithoutPropertiesLoose(props, ["itemCount", "renderItem", "onSlideChange", "slideTo", "children"]);
 
   var width = playerProps.width,
       height = playerProps.height,
-      direction = playerProps.direction;
+      direction = playerProps.direction,
+      playerScrollTo = playerProps.scrollTo;
 
@@ -35,12 +37,9 @@ var _useReducer = useReducer(reducer, initialState),
 
-  var pageIndex = state.pageIndex,
+  var prevStateRef = usePrevRef(state);
+  var activeIndex = state.activeIndex,
+      itemCount = state.itemCount,
       scrollTo = state.scrollTo;
-  var activeIndex = pageIndex % itemCount;
-  var innerRef = usePrevRef({
-    activeIndex: activeIndex,
-    itemCount: itemCount
-  });
-  var prevInner = innerRef.current;
+  var prevState = prevStateRef.current;
   useIsomorphicLayoutEffect(function () {
-    if (activeIndex !== prevInner.activeIndex) {
+    if (prevState.activeIndex !== activeIndex) {
       onSlideChange({
@@ -53,9 +52,9 @@ activeIndex: activeIndex,
   useMemo(function () {
-    if (playerProps.scrollTo) {
+    if (playerScrollTo) {
       dispatch({
         type: 'setScrollTo',
-        value: playerProps.scrollTo
+        value: playerScrollTo
       });
     }
-  }, [playerProps.scrollTo]);
+  }, [playerScrollTo]);
   useMemo(function () {
@@ -65,5 +64,5 @@ if (slideTo) {
         type: 'slideTo'
-      }, slideTo, {}, innerRef.current));
+      }, slideTo));
     }
-  }, [slideTo, innerRef]);
+  }, [slideTo]);
   var gridProps = {
@@ -75,17 +74,12 @@ width: width,
     direction: direction,
-    itemCount: itemCount,
+    itemCount: gridItemCount,
     renderItem: renderItem
   };
   playerProps.scrollTo = scrollTo;
-  var element = playerProps.children;
-
-  if (typeof element === 'function') {
-    element = element({
-      activeIndex: activeIndex,
-      itemCount: itemCount
-    });
-  }
-
+  var element = typeof children === 'function' ? children({
+    activeIndex: activeIndex,
+    itemCount: itemCount
+  }) : children;
   return React.createElement(Fragment, null, React.createElement(Player, playerProps, function (player) {
-    if (player !== state.player) {
+    if (state.player !== player) {
       dispatch({
@@ -92,0 +86,0 @@ type: 'setPlayer',

es/carousel/carouselReducer.js

 import _extends from "@babel/runtime/helpers/esm/extends";
 import { initialState as playerInitialState } from './playerReducer';
 export var initialState = {
-  pageIndex: 0,
+  activeIndex: 0,
+  itemCount: 0,
   scrollTo: null,
@@ -25,8 +26,23 @@ player: playerInitialState
 function setPlayerReducer(state, action) {
-  var nextState = _extends({}, state, {
-    player: action.value
+  var player = action.value;
+  var loopWidth = player.loopWidth;
+  var _player$options = player.options,
+      direction = _player$options[0];
+  var _player$pad = player.pad,
+      contentOffset = _player$pad.contentOffset,
+      size = _player$pad.size,
+      contentSize = _player$pad.contentSize;
+  var itemCount = calculateItemCount(size, loopWidth, direction);
+  var activeIndex = 0;
+
+  if (itemCount > 0) {
+    var pageIndex = calculatePageIndex(contentOffset, size, contentSize, direction);
+    activeIndex = pageIndex % itemCount;
+  }
+
+  return _extends({}, state, {
+    player: player,
+    itemCount: itemCount,
+    activeIndex: activeIndex
   });
-
-  nextState = calculatePageIndexReducer(nextState);
-  return nextState;
 }
@@ -41,12 +57,10 @@
 function slideToReducer(state, action) {
-  var pageIndex = state.pageIndex;
+  var activeIndex = state.activeIndex,
+      itemCount = state.itemCount;
   var _state$player$options = state.player.options,
-      direction = _state$player$options[0],
-      loop = _state$player$options[1];
+      direction = _state$player$options[0];
   var _state$player$pad = state.player.pad,
       contentOffset = _state$player$pad.contentOffset,
       size = _state$player$pad.size;
-  var activeIndex = action.activeIndex,
-      itemCount = action.itemCount,
-      animated = action.animated;
+  var animated = action.animated;
   var index = action.index;
@@ -65,11 +79,7 @@
 
-  if (loop) {
-    index += itemCount * Math.round((pageIndex - index) / itemCount);
-  }
-
-  if (index === pageIndex) {
+  if (index === activeIndex) {
     return state;
   }
 
-  var offset = getContentOffsetAtIndex(index, contentOffset, size, direction);
+  var offset = getContentOffsetForIndexOffset(index - activeIndex, contentOffset, size, direction);
   return _extends({}, state, {
@@ -83,21 +93,2 @@ scrollTo: {
 
-function calculatePageIndexReducer(state) {
-  var pageIndex = state.pageIndex;
-  var _state$player$options2 = state.player.options,
-      direction = _state$player$options2[0];
-  var _state$player$pad2 = state.player.pad,
-      contentOffset = _state$player$pad2.contentOffset,
-      size = _state$player$pad2.size,
-      contentSize = _state$player$pad2.contentSize;
-  var nextPageIndex = calculatePageIndex(contentOffset, size, contentSize, direction);
-
-  if (nextPageIndex !== pageIndex) {
-    return _extends({}, state, {
-      pageIndex: nextPageIndex
-    });
-  }
-
-  return state;
-}
-
 function calculatePageIndex(offset, size, cSize, direction) {
@@ -120,3 +111,15 @@ var _ref = direction === 'y' ? ['height', 'y'] : ['width', 'x'],
 
-function getContentOffsetAtIndex(index, offset, size, direction) {
+function calculateItemCount(size, loopWidth, direction) {
+  var width = direction === 'y' ? 'height' : 'width';
+  var sizeWidth = size[width];
+  var count = 0;
+
+  if (sizeWidth > 0) {
+    count = Math.ceil(loopWidth / sizeWidth);
+  }
+
+  return count;
+}
+
+function getContentOffsetForIndexOffset(indexOffset, offset, size, direction) {
   var _ref3;
@@ -130,3 +133,3 @@
   var sizeWidth = size[width];
-  return _ref3 = {}, _ref3[x] = -index * sizeWidth, _ref3[y] = offset[y], _ref3;
+  return _ref3 = {}, _ref3[x] = offset[x] - indexOffset * sizeWidth, _ref3[y] = offset[y], _ref3;
 }

es/carousel/Player.js

@@ -18,10 +18,12 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 
-function Player(_ref) {
-  var direction = _ref.direction,
-      loop = _ref.loop,
-      autoplayEnabled = _ref.autoplayEnabled,
-      autoplayInterval = _ref.autoplayInterval,
-      padProps = _objectWithoutPropertiesLoose(_ref, ["direction", "loop", "autoplayEnabled", "autoplayInterval"]);
+function Player(props) {
+  var direction = props.direction,
+      loop = props.loop,
+      autoplayEnabled = props.autoplayEnabled,
+      autoplayInterval = props.autoplayInterval,
+      children = props.children,
+      padProps = _objectWithoutPropertiesLoose(props, ["direction", "loop", "autoplayEnabled", "autoplayInterval", "children"]);
 
-  var onMouseEnter = padProps.onMouseEnter,
+  var padScrollTo = padProps.scrollTo,
+      onMouseEnter = padProps.onMouseEnter,
       onMouseLeave = padProps.onMouseLeave;
@@ -40,33 +42,2 @@
       deceleration = _state$pad.deceleration;
-  useEffect(function () {
-    if (!autoplayEnabled || drag || deceleration || mouseEntered) {
-      return;
-    }
-
-    var autoplayTimer = setTimeout(function () {
-      autoplayTimer = undefined;
-      dispatch({
-        type: 'playNext'
-      });
-    }, autoplayInterval);
-    return function () {
-      if (autoplayTimer) {
-        clearTimeout(autoplayTimer);
-      }
-    };
-  }, [autoplayEnabled, mouseEntered, drag, deceleration, autoplayInterval]);
-  useMemo(function () {
-    if (padProps.scrollTo) {
-      dispatch({
-        type: 'setScrollTo',
-        value: padProps.scrollTo
-      });
-    }
-  }, [padProps.scrollTo]);
-  useMemo(function () {
-    dispatch({
-      type: 'setOptions',
-      value: [direction, loop]
-    });
-  }, [loop, direction]);
   var onPadMouseEnter = useCallback(function (evt) {
@@ -92,3 +63,31 @@ dispatch({
   }, [onMouseLeave]);
+  useEffect(function () {
+    if (!autoplayEnabled || mouseEntered || drag || deceleration) {
+      return;
+    }
 
+    var autoplayTimer = setTimeout(function () {
+      dispatch({
+        type: 'playNext'
+      });
+    }, autoplayInterval);
+    return function () {
+      clearTimeout(autoplayTimer);
+    };
+  }, [autoplayEnabled, autoplayInterval, mouseEntered, drag, deceleration]);
+  useMemo(function () {
+    dispatch({
+      type: 'setOptions',
+      value: [direction, loop]
+    });
+  }, [loop, direction]);
+  useMemo(function () {
+    if (padScrollTo) {
+      dispatch({
+        type: 'setScrollTo',
+        value: padScrollTo
+      });
+    }
+  }, [padScrollTo]);
+
   if (direction === 'x') {
@@ -107,3 +106,3 @@ padProps.alwaysBounceY = false;
   return React.createElement(Pad, padProps, function (pad) {
-    if (pad !== state.pad) {
+    if (state.pad !== pad) {
       dispatch({
@@ -115,14 +114,9 @@ type: 'setPad',
 
-    var element = padProps.children;
-
-    if (typeof element === 'function') {
-      element = element(state);
-    }
-
+    var element = typeof children === 'function' ? children(state) : children;
     return React.createElement(ListContent, {
       direction: direction,
       itemCount: loopCount,
-      renderItem: function renderItem(_ref2) {
-        var Item = _ref2.Item,
-            itemIndex = _ref2.itemIndex;
+      renderItem: function renderItem(_ref) {
+        var Item = _ref.Item,
+            itemIndex = _ref.itemIndex;
         return React.createElement(Item, {
@@ -129,0 +123,0 @@ key: itemIndex + loopOffset,

es/GeneralContent.js

@@ -11,3 +11,4 @@ import _extends from "@babel/runtime/helpers/esm/extends";
   var width = props.width,
-      height = props.height;
+      height = props.height,
+      children = props.children;
   var itemRef = useRef(null);
@@ -31,9 +32,3 @@ useIsomorphicLayoutEffect(function () {
     itemRef.current = apis;
-    var element = props.children;
-
-    if (typeof element === 'function') {
-      element = element(size, apis);
-    }
-
-    return element;
+    return typeof children === 'function' ? children(size, apis) : children;
   });
@@ -40,0 +35,0 @@ }

es/GridContent.js

@@ -26,13 +26,14 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 
-function GridContent(_ref) {
-  var width = _ref.width,
-      height = _ref.height,
-      direction = _ref.direction,
-      rowSpacing = _ref.rowSpacing,
-      columnSpacing = _ref.columnSpacing,
-      itemCount = _ref.itemCount,
-      itemWidth = _ref.itemWidth,
-      itemHeight = _ref.itemHeight,
-      renderItem = _ref.renderItem,
-      props = _objectWithoutPropertiesLoose(_ref, ["width", "height", "direction", "rowSpacing", "columnSpacing", "itemCount", "itemWidth", "itemHeight", "renderItem"]);
+function GridContent(props) {
+  var width = props.width,
+      height = props.height,
+      direction = props.direction,
+      rowSpacing = props.rowSpacing,
+      columnSpacing = props.columnSpacing,
+      itemCount = props.itemCount,
+      itemWidth = props.itemWidth,
+      itemHeight = props.itemHeight,
+      renderItem = props.renderItem,
+      children = props.children,
+      divProps = _objectWithoutPropertiesLoose(props, ["width", "height", "direction", "rowSpacing", "columnSpacing", "itemCount", "itemWidth", "itemHeight", "renderItem", "children"]);
 
@@ -54,14 +55,5 @@ var layout = useMemo(function () {
   var size = layout.size,
-      count = layout.count,
       layoutList = layout.layoutList;
   var prevLayout = prevLayoutRef.current;
   var resizeContent = useCallback(function () {}, []);
-  var getItemIndex = useCallback(function (_ref2) {
-    var rowIndex = _ref2.rowIndex,
-        columnIndex = _ref2.columnIndex;
-    return calculateItemIndex({
-      row: rowIndex,
-      column: columnIndex
-    }, count, direction);
-  }, [direction, count]);
   useIsomorphicLayoutEffect(function () {
@@ -71,3 +63,3 @@ context.resizeContent(size);
   useIsomorphicLayoutEffect(function () {
-    if (!isEqualToSize(size, prevLayout.size)) {
+    if (!isEqualToSize(prevLayout.size, size)) {
       context.resizeContent(size);
@@ -77,9 +69,11 @@ }
 
-  function buildItem(layoutAttrs) {
-    var itemIndex = layoutAttrs.itemIndex,
-        rect = layoutAttrs.rect,
-        visibleRect = layoutAttrs.visibleRect,
-        needsRender = layoutAttrs.needsRender,
-        Item = layoutAttrs.Item;
-    var element = renderItem(layoutAttrs);
+  function buildItem(attrs) {
+    var rect = attrs.rect,
+        itemIndex = attrs.itemIndex,
+        visibleRect = attrs.visibleRect,
+        needsRender = attrs.needsRender,
+        Item = attrs.Item;
+    var forceRender = false;
+    var element = renderItem(attrs);
+    var key = String(itemIndex);
     var itemStyle = {
@@ -92,20 +86,16 @@ position: 'absolute',
     };
-    var forceRender;
-    var key;
 
     if (isValidElement(element) && element.type === Item) {
-      if (element.props.style) {
-        itemStyle = _extends({}, itemStyle, {}, element.props.style);
+      if (element.props.forceRender !== undefined) {
+        forceRender = element.props.forceRender;
       }
 
-      forceRender = element.props.forceRender;
-      key = element.key;
+      if (element.key) {
+        key = element.key;
+      }
+
       element = element.props.children;
     }
 
-    if (!key) {
-      key = '' + itemIndex;
-    }
-
-    if (!(forceRender || needsRender)) {
+    if (!needsRender && !forceRender) {
       return null;
@@ -116,3 +106,3 @@ }
       if (element.props.style) {
-        itemStyle = _extends({}, itemStyle, {}, element.props.style);
+        Object.assign(itemStyle, element.props.style);
       }
@@ -148,35 +138,22 @@
 
-  props.style = _extends({}, elemStyle, {}, props.style);
-  var items = [];
+  if (divProps.style) {
+    Object.assign(elemStyle, divProps.style);
+  }
 
-  for (var itemIndex = 0; itemIndex < layoutList.length; itemIndex++) {
-    var attrs = layoutList[itemIndex];
-
-    var layoutAttrs = _extends({}, attrs, {
-      itemIndex: itemIndex,
+  divProps.style = elemStyle;
+  var items = layoutList.map(function (attrs) {
+    return buildItem(_extends({}, attrs, {
       visibleRect: getItemVisibleRect(attrs.rect, context.visibleRect),
       needsRender: needsRender(attrs.rect, context.visibleRect),
       Item: Item
-    });
+    }));
+  });
 
-    items.push(buildItem(layoutAttrs));
+  if (typeof children === 'function') {
+    children(layout);
   }
 
-  if (typeof props.children === 'function') {
-    props.children(layout, {
-      getItemIndex: getItemIndex
-    });
-  }
-
-  return React.createElement("div", props, items);
+  return React.createElement("div", divProps, items);
 }
 
-function calculateItemIndex(index, count, direction) {
-  var _ref3 = direction === 'x' ? ['column', 'row'] : ['row', 'column'],
-      row = _ref3[0],
-      column = _ref3[1];
-
-  return index[column] + index[row] * count[column];
-}
-
 function calculateLayout(props) {
@@ -204,9 +181,9 @@ var _size, _count;
 
-  var _ref4 = direction === 'x' ? ['y', 'x', 'height', 'width', 'column', 'row'] : ['x', 'y', 'width', 'height', 'row', 'column'],
-      x = _ref4[0],
-      y = _ref4[1],
-      width = _ref4[2],
-      height = _ref4[3],
-      row = _ref4[4],
-      column = _ref4[5];
+  var _ref = direction === 'x' ? ['y', 'x', 'height', 'width', 'column', 'row'] : ['x', 'y', 'width', 'height', 'row', 'column'],
+      x = _ref[0],
+      y = _ref[1],
+      width = _ref[2],
+      height = _ref[3],
+      row = _ref[4],
+      column = _ref[5];
 
@@ -268,3 +245,3 @@ var sizeWidth = size[width];
         rect: (_rect = {}, _rect[x] = attrX, _rect[y] = sizeHeight, _rect[width] = itemSize[width], _rect[height] = itemSize[height], _rect)
-      }, _layoutList$push[row + 'Index'] = rowIndex, _layoutList$push[column + 'Index'] = columnIndex, _layoutList$push));
+      }, _layoutList$push[row + 'Index'] = rowIndex, _layoutList$push[column + 'Index'] = columnIndex, _layoutList$push.itemIndex = itemIndex, _layoutList$push));
     }
@@ -271,0 +248,0 @@

es/ItemContent.js

@@ -14,6 +14,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 
-function ItemContent(_ref) {
-  var width = _ref.width,
-      height = _ref.height,
-      props = _objectWithoutPropertiesLoose(_ref, ["width", "height"]);
+function ItemContent(props) {
+  var width = props.width,
+      height = props.height,
+      children = props.children,
+      divProps = _objectWithoutPropertiesLoose(props, ["width", "height", "children"]);
 
@@ -36,5 +37,4 @@ var _useState = useState(null),
   }, []);
-  useIsomorphicLayoutEffect(function () {}, []);
   useIsomorphicLayoutEffect(function () {
-    if (!isEqualToSize(size, prevSize)) {
+    if (!isEqualToSize(prevSize, size)) {
       if (size) {
@@ -50,6 +50,11 @@ context.resizeContent(size);
   useMemo(function () {
-    var nextSize = typeof width === 'number' && typeof height === 'number' ? {
-      width: width,
-      height: height
-    } : null;
+    var nextSize = null;
+
+    if (typeof width === 'number' && typeof height === 'number') {
+      nextSize = {
+        width: width,
+        height: height
+      };
+    }
+
     setSize(nextSize);
@@ -77,12 +82,11 @@ }, [width, height]);
 
-  props.style = _extends({}, elemStyle, {}, props.style);
-  var element = props.children;
-
-  if (typeof element === 'function') {
-    element = element(size, {
-      getResizeNode: getResizeNode,
-      calculateSize: calculateSize
-    });
+  if (divProps.style) {
+    Object.assign(elemStyle, divProps.style);
   }
 
+  divProps.style = elemStyle;
+  var element = typeof children === 'function' ? children(size, {
+    getResizeNode: getResizeNode,
+    calculateSize: calculateSize
+  }) : children;
   return React.createElement(PadContext.Provider, {
@@ -92,3 +96,3 @@ value: _extends({}, context, {
     })
-  }, React.createElement("div", props, React.createElement("div", {
+  }, React.createElement("div", divProps, React.createElement("div", {
     ref: resizeRef,
@@ -95,0 +99,0 @@ style: resizeStyle

es/ListContent.js

@@ -26,12 +26,13 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 
-function ListContent(_ref) {
-  var width = _ref.width,
-      height = _ref.height,
-      direction = _ref.direction,
-      spacing = _ref.spacing,
-      itemCount = _ref.itemCount,
-      estimatedItemWidth = _ref.estimatedItemWidth,
-      estimatedItemHeight = _ref.estimatedItemHeight,
-      renderItem = _ref.renderItem,
-      props = _objectWithoutPropertiesLoose(_ref, ["width", "height", "direction", "spacing", "itemCount", "estimatedItemWidth", "estimatedItemHeight", "renderItem"]);
+function ListContent(props) {
+  var width = props.width,
+      height = props.height,
+      direction = props.direction,
+      spacing = props.spacing,
+      itemCount = props.itemCount,
+      estimatedItemWidth = props.estimatedItemWidth,
+      estimatedItemHeight = props.estimatedItemHeight,
+      renderItem = props.renderItem,
+      children = props.children,
+      divProps = _objectWithoutPropertiesLoose(props, ["width", "height", "direction", "spacing", "itemCount", "estimatedItemWidth", "estimatedItemHeight", "renderItem", "children"]);
 
@@ -66,6 +67,6 @@ var _useState = useState([]),
     return function (itemSize) {
-      return setItemSizeDict(function (itemSizeDict) {
+      setItemSizeDict(function (itemSizeDict) {
         var _extends2;
 
-        return isEqualToSize(itemSize, itemSizeDict[itemHash]) ? itemSizeDict : _extends({}, itemSizeDict, (_extends2 = {}, _extends2[itemHash] = itemSize, _extends2));
+        return isEqualToSize(itemSizeDict[itemHash], itemSize) ? itemSizeDict : _extends({}, itemSizeDict, (_extends2 = {}, _extends2[itemHash] = itemSize, _extends2));
       });
@@ -78,3 +79,3 @@ };
   useIsomorphicLayoutEffect(function () {
-    if (!isEqualToSize(size, prevLayout.size)) {
+    if (!isEqualToSize(prevLayout.size, size)) {
       context.resizeContent(size);
@@ -84,9 +85,12 @@ }
 
-  function buildItem(layoutAttrs) {
-    var itemIndex = layoutAttrs.itemIndex,
-        rect = layoutAttrs.rect,
-        visibleRect = layoutAttrs.visibleRect,
-        needsRender = layoutAttrs.needsRender,
-        Item = layoutAttrs.Item;
-    var element = renderItem(layoutAttrs);
+  function buildItem(attrs) {
+    var rect = attrs.rect,
+        itemIndex = attrs.itemIndex,
+        visibleRect = attrs.visibleRect,
+        needsRender = attrs.needsRender,
+        Item = attrs.Item;
+    var forceRender = false;
+    var element = renderItem(attrs);
+    var key = String(itemIndex);
+    var hash;
     var itemStyle = {
@@ -99,21 +103,19 @@ position: 'absolute',
     };
-    var forceRender;
-    var hash;
-    var key;
 
     if (isValidElement(element) && element.type === Item) {
-      if (element.props.style) {
-        itemStyle = _extends({}, itemStyle, {}, element.props.style);
+      if (element.props.forceRender !== undefined) {
+        forceRender = element.props.forceRender;
       }
 
-      forceRender = element.props.forceRender;
-      hash = element.props.hash;
-      key = element.key;
+      if (element.key) {
+        key = element.key;
+      }
+
+      if (element.props.hash !== undefined) {
+        hash = element.props.hash;
+      }
+
       element = element.props.children;
     }
 
-    if (!key) {
-      key = '' + itemIndex;
-    }
-
     if (hash === undefined) {
@@ -123,7 +125,7 @@ hash = key;
 
-    var shouldRender = forceRender || needsRender;
     var itemSize = itemSizeDict[hash];
+    var skipRender = !needsRender && !forceRender;
 
     if (!itemSize && nextItemHashList.indexOf(hash) !== -1) {
-      shouldRender = false;
+      skipRender = true;
     }
@@ -133,3 +135,3 @@
 
-    if (!shouldRender) {
+    if (skipRender) {
       return null;
@@ -155,3 +157,3 @@ }
       if (element.props.style) {
-        itemStyle = _extends({}, itemStyle, {}, element.props.style);
+        Object.assign(itemStyle, element.props.style);
       }
@@ -167,6 +169,6 @@
 
-      element = cloneElement(element, _extends({
-        ref: element.ref,
-        style: itemStyle
-      }, sizeProps));
+      element = cloneElement(element, _extends({}, sizeProps, {
+        style: itemStyle,
+        ref: element.ref
+      }));
     } else {
@@ -196,23 +198,24 @@ element = React.createElement(ItemContent, _extends({
 
-  props.style = _extends({}, elemStyle, {}, props.style);
-  var items = [];
+  if (divProps.style) {
+    Object.assign(elemStyle, divProps.style);
+  }
 
-  for (var itemIndex = 0; itemIndex < layoutList.length; itemIndex++) {
-    var attrs = layoutList[itemIndex];
-
-    var layoutAttrs = _extends({}, attrs, {
-      itemIndex: itemIndex,
+  divProps.style = elemStyle;
+  var items = layoutList.map(function (attrs) {
+    return buildItem(_extends({}, attrs, {
       visibleRect: getItemVisibleRect(attrs.rect, context.visibleRect),
       needsRender: needsRender(attrs.rect, context.visibleRect),
       Item: Item
-    });
+    }));
+  });
 
-    items.push(buildItem(layoutAttrs));
+  if (itemHashList.join() !== nextItemHashList.join()) {
+    setItemHashList(nextItemHashList);
   }
 
-  if (nextItemHashList.join() !== itemHashList.join()) {
-    setItemHashList(nextItemHashList);
+  if (typeof children === 'function') {
+    children(layout);
   }
 
-  return React.createElement("div", props, items);
+  return React.createElement("div", divProps, items);
 }
@@ -239,7 +242,7 @@
 
-  var _ref2 = direction === 'x' ? ['y', 'x', 'height', 'width'] : ['x', 'y', 'width', 'height'],
-      x = _ref2[0],
-      y = _ref2[1],
-      width = _ref2[2],
-      height = _ref2[3];
+  var _ref = direction === 'x' ? ['y', 'x', 'height', 'width'] : ['x', 'y', 'width', 'height'],
+      x = _ref[0],
+      y = _ref[1],
+      width = _ref[2],
+      height = _ref[3];
 
@@ -256,8 +259,9 @@ var sizeWidth = 0;
   for (var itemIndex = 0; itemIndex < itemCount; itemIndex++) {
-    var _ref3, _rect;
+    var _ref2, _rect;
 
     var itemHash = itemHashList[itemIndex];
-    var itemSize = itemSizeDict[itemHash] || (_ref3 = {}, _ref3[width] = fixed[width] === undefined ? estimatedItemSize[width] : fixed[width], _ref3[height] = estimatedItemSize[height], _ref3);
+    var itemSize = itemSizeDict[itemHash] || (_ref2 = {}, _ref2[width] = fixed[width] === undefined ? estimatedItemSize[width] : fixed[width], _ref2[height] = estimatedItemSize[height], _ref2);
     layoutList.push({
-      rect: (_rect = {}, _rect[x] = 0, _rect[y] = sizeHeight, _rect[width] = itemSize[width], _rect[height] = itemSize[height], _rect)
+      rect: (_rect = {}, _rect[x] = 0, _rect[y] = sizeHeight, _rect[width] = itemSize[width], _rect[height] = itemSize[height], _rect),
+      itemIndex: itemIndex
     });
@@ -264,0 +268,0 @@

es/Pad.js

 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-import React, { isValidElement, cloneElement, useRef, useMemo, useCallback, useReducer } from 'react';
+import React, { isValidElement, cloneElement, useMemo, useCallback, useReducer } from 'react';
 import { reducer, initialState } from './padReducer';
@@ -11,3 +11,2 @@ import Pannable from './Pannable';
 import StyleSheet from './utils/StyleSheet';
-import { shouldDragStart } from './utils/motion';
 import { requestAnimationFrame, cancelAnimationFrame } from './utils/animationFrame';
@@ -32,18 +31,19 @@
 
-function Pad(_ref) {
-  var width = _ref.width,
-      height = _ref.height,
-      pagingEnabled = _ref.pagingEnabled,
-      directionalLockEnabled = _ref.directionalLockEnabled,
-      alwaysBounceX = _ref.alwaysBounceX,
-      alwaysBounceY = _ref.alwaysBounceY,
-      scrollTo = _ref.scrollTo,
-      scrollToRect = _ref.scrollToRect,
-      onScroll = _ref.onScroll,
-      onDragStart = _ref.onDragStart,
-      onDragEnd = _ref.onDragEnd,
-      onDecelerationStart = _ref.onDecelerationStart,
-      onDecelerationEnd = _ref.onDecelerationEnd,
-      onContentResize = _ref.onContentResize,
-      pannableProps = _objectWithoutPropertiesLoose(_ref, ["width", "height", "pagingEnabled", "directionalLockEnabled", "alwaysBounceX", "alwaysBounceY", "scrollTo", "scrollToRect", "onScroll", "onDragStart", "onDragEnd", "onDecelerationStart", "onDecelerationEnd", "onContentResize"]);
+function Pad(props) {
+  var width = props.width,
+      height = props.height,
+      pagingEnabled = props.pagingEnabled,
+      directionalLockEnabled = props.directionalLockEnabled,
+      alwaysBounceX = props.alwaysBounceX,
+      alwaysBounceY = props.alwaysBounceY,
+      scrollTo = props.scrollTo,
+      scrollToRect = props.scrollToRect,
+      onScroll = props.onScroll,
+      onDragStart = props.onDragStart,
+      onDragEnd = props.onDragEnd,
+      onDecelerationStart = props.onDecelerationStart,
+      onDecelerationEnd = props.onDecelerationEnd,
+      onContentResize = props.onContentResize,
+      children = props.children,
+      pannableProps = _objectWithoutPropertiesLoose(props, ["width", "height", "pagingEnabled", "directionalLockEnabled", "alwaysBounceX", "alwaysBounceY", "scrollTo", "scrollToRect", "onScroll", "onDragStart", "onDragEnd", "onDecelerationStart", "onDecelerationEnd", "onContentResize", "children"]);
 
@@ -58,3 +58,2 @@ var enabled = pannableProps.enabled,
   var prevStateRef = usePrevRef(state);
-  var innerRef = useRef({});
   var size = state.size,
@@ -67,5 +66,4 @@ contentSize = state.contentSize,
   var prevState = prevStateRef.current;
-  innerRef.current.state = state;
   var resizeContent = useCallback(function (contentSize) {
-    return dispatch({
+    dispatch({
       type: 'setContentSize',
@@ -76,8 +74,2 @@ value: contentSize
   var shouldPannableStart = useCallback(function (evt) {
-    var _innerRef$current$sta = innerRef.current.state,
-        size = _innerRef$current$sta.size,
-        contentSize = _innerRef$current$sta.contentSize,
-        _innerRef$current$sta2 = _innerRef$current$sta.options,
-        directionalLockEnabled = _innerRef$current$sta2[1];
-
     if (directionalLockEnabled && !shouldDragStart(evt.velocity, size, contentSize)) {
@@ -88,5 +80,5 @@ return false;
     return shouldStart(evt);
-  }, [shouldStart]);
+  }, [shouldStart, directionalLockEnabled, size, contentSize]);
   useIsomorphicLayoutEffect(function () {
-    if (state.pannable.translation !== prevState.pannable.translation) {
+    if (prevState.pannable.translation !== state.pannable.translation) {
       if (state.pannable.translation) {
@@ -124,11 +116,11 @@ if (prevState.pannable.translation) {
 
-    if (contentSize !== prevState.contentSize) {
+    if (prevState.contentSize !== contentSize) {
       onContentResize(contentSize);
     }
 
-    if (contentOffset !== prevState.contentOffset) {
+    if (prevState.contentOffset !== contentOffset) {
       onScroll(output);
     }
 
-    if (drag !== prevState.drag) {
+    if (prevState.drag !== drag) {
       if (!prevState.drag) {
@@ -141,3 +133,3 @@ onDragStart(output);
 
-    if (deceleration !== prevState.deceleration) {
+    if (prevState.deceleration !== deceleration) {
       if (!prevState.deceleration) {
@@ -156,3 +148,2 @@ onDecelerationStart(output);
     var timer = requestAnimationFrame(function () {
-      timer = undefined;
       dispatch({
@@ -164,5 +155,3 @@ type: 'decelerate',
     return function () {
-      if (timer) {
-        cancelAnimationFrame(timer);
-      }
+      cancelAnimationFrame(timer);
     };
@@ -188,3 +177,3 @@ }, [state]);
       dispatch(_extends({
-        type: 'setContentOffset'
+        type: 'scrollTo'
       }, scrollTo));
@@ -207,3 +196,8 @@ }
   };
-  pannableProps.style = _extends({}, elemStyle, {}, pannableProps.style);
+
+  if (pannableProps.style) {
+    Object.assign(elemStyle, pannableProps.style);
+  }
+
+  pannableProps.style = elemStyle;
   var visibleRect = {
@@ -221,3 +215,3 @@ x: -contentOffset.x,
   }, React.createElement(Pannable, pannableProps, function (pannable) {
-    if (pannable !== state.pannable) {
+    if (state.pannable !== pannable) {
       dispatch({
@@ -236,11 +230,7 @@ type: 'setPannable',
     });
-    var element = pannableProps.children;
+    var element = typeof children === 'function' ? children(state) : children;
 
-    if (typeof element === 'function') {
-      element = element(state);
-    }
-
     if (isValidElement(element) && element.type.PadContent) {
       if (element.props.style) {
-        contentStyle = _extends({}, contentStyle, {}, element.props.style);
+        Object.assign(contentStyle, element.props.style);
       }
@@ -263,2 +253,7 @@
 Pad.defaultProps = defaultPadProps;
-export default Pad;
+export default Pad;
+
+function shouldDragStart(velocity, size, cSize) {
+  var height = Math.abs(velocity.y) < Math.abs(velocity.x) ? 'width' : 'height';
+  return size[height] < cSize[height];
+}

es/padReducer.js

 import _extends from "@babel/runtime/helpers/esm/extends";
 import { initialState as pannableInitialState } from './pannableReducer';
-import { getAdjustedContentVelocity, getAdjustedContentOffset, getAdjustedBounceOffset, getDecelerationEndOffset, createDeceleration, calculateDeceleration, calculateRectOffset } from './utils/motion';
+import { getAdjustedContentVelocity, getAdjustedContentOffset, getAdjustedBounceOffset, getDecelerationEndOffset, createDeceleration, calculateDeceleration } from './utils/motion';
 var DECELERATION_RATE_STRONG = 0.025;
@@ -63,4 +63,4 @@ var DECELERATION_RATE_WEAK = 0.0025;
 
-    case 'setContentOffset':
-      return setContentOffsetReducer(state, action);
+    case 'scrollTo':
+      return scrollToReducer(state, action);
 
@@ -289,3 +289,3 @@ case 'scrollToRect':
 
-function setContentOffsetReducer(state, action) {
+function scrollToReducer(state, action) {
   var size = state.size,
@@ -298,5 +298,17 @@ contentOffset = state.contentOffset,
       pagingEnabled = _state$options6[0];
-  var offset = action.offset,
+  var point = action.point,
       animated = action.animated;
+  var _action$offset = action.offset,
+      offset = _action$offset === void 0 ? {
+    x: 0,
+    y: 0
+  } : _action$offset;
 
+  if (point) {
+    offset = {
+      x: -point.x,
+      y: -point.y
+    };
+  }
+
   if (drag || !animated) {
@@ -346,14 +358,53 @@ if (offset.x === contentOffset.x && offset.y === contentOffset.y) {
       animated = action.animated;
-  var visibleRect = {
-    x: -contentOffset.x,
-    y: -contentOffset.y,
-    width: size.width,
-    height: size.height
-  };
-  var offset = calculateRectOffset(rect, visibleRect, align);
-  return setContentOffsetReducer(state, {
-    type: 'setContentOffset',
+  var offset = getContentOffsetForRect(rect, align, contentOffset, size);
+  return scrollToReducer(state, {
+    type: 'scrollTo',
     offset: offset,
     animated: animated
   });
+}
+
+function getContentOffsetForRect(rect, align, cOffset, size, name) {
+  if (name) {
+    var _ref = name === 'y' ? ['y', 'height'] : ['x', 'width'],
+        x = _ref[0],
+        width = _ref[1];
+
+    var offsetX = -rect[x];
+    var delta = size[width] - rect[width];
+
+    if (align[x] === 'auto') {
+      var direction = delta < 0 ? -1 : 1;
+      var dOffsetX = cOffset[x] - offsetX;
+      offsetX += direction * Math.max(0, Math.min(direction * dOffsetX, direction * delta));
+    } else {
+      if (align[x] === 'start') {
+        align[x] = 0;
+      } else if (align[x] === 'center') {
+        align[x] = 0.5;
+      } else if (align[x] === 'end') {
+        align[x] = 1;
+      }
+
+      if (typeof align[x] !== 'number' || isNaN(align[x])) {
+        align[x] = 0.5;
+      }
+
+      offsetX += align[x] * delta;
+    }
+
+    return offsetX;
+  }
+
+  if (typeof align !== 'object') {
+    align = {
+      x: align,
+      y: align
+    };
+  }
+
+  return {
+    x: getContentOffsetForRect(rect, align, cOffset, size, 'x'),
+    y: getContentOffsetForRect(rect, align, cOffset, size, 'y')
+  };
 }

es/Pannable.js

@@ -20,10 +20,11 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 
-function Pannable(_ref) {
-  var enabled = _ref.enabled,
-      shouldStart = _ref.shouldStart,
-      onStart = _ref.onStart,
-      onMove = _ref.onMove,
-      onEnd = _ref.onEnd,
-      onCancel = _ref.onCancel,
-      props = _objectWithoutPropertiesLoose(_ref, ["enabled", "shouldStart", "onStart", "onMove", "onEnd", "onCancel"]);
+function Pannable(props) {
+  var enabled = props.enabled,
+      shouldStart = props.shouldStart,
+      onStart = props.onStart,
+      onMove = props.onMove,
+      onEnd = props.onEnd,
+      onCancel = props.onCancel,
+      children = props.children,
+      divProps = _objectWithoutPropertiesLoose(props, ["enabled", "shouldStart", "onStart", "onMove", "onEnd", "onCancel", "children"]);
 
@@ -182,3 +183,3 @@ var _useReducer = useReducer(reducer, initialState),
 
-    if (translation !== prevState.translation) {
+    if (prevState.translation !== translation) {
       if (translation) {
@@ -209,16 +210,18 @@ if (prevState.translation) {
   if (translation) {
-    elemStyle.touchAction = 'none';
-    elemStyle.pointerEvents = 'none';
-    elemStyle.userSelect = 'none';
+    Object.assign(elemStyle, StyleSheet.create({
+      touchAction: 'none',
+      pointerEvents: 'none',
+      userSelect: 'none'
+    }));
   }
 
-  props.style = _extends({}, StyleSheet.create(elemStyle), {}, props.style);
-  props.ref = elemRef;
-  var element = props.children;
-
-  if (typeof element === 'function') {
-    element = element(state);
+  if (divProps.style) {
+    Object.assign(elemStyle, divProps.style);
   }
 
-  return React.createElement("div", props, element);
+  divProps.style = elemStyle;
+  var element = typeof children === 'function' ? children(state) : children;
+  return React.createElement("div", _extends({}, divProps, {
+    ref: elemRef
+  }), element);
 }
@@ -225,0 +228,0 @@

es/utils/motion.js

@@ -170,6 +170,2 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 }
-export function shouldDragStart(velocity, size, cSize) {
-  var height = Math.abs(velocity.y) < Math.abs(velocity.x) ? 'width' : 'height';
-  return size[height] < cSize[height];
-}
 export function calculateDeceleration(deceleration, moveTime, name) {
@@ -238,46 +234,2 @@ if (name) {
   };
-}
-export function calculateRectOffset(rect, vRect, align, name) {
-  if (name) {
-    var _ref8 = name === 'y' ? ['y', 'height'] : ['x', 'width'],
-        x = _ref8[0],
-        width = _ref8[1];
-
-    var offsetX = -rect[x];
-    var maxOffsetX = vRect[width] - rect[width];
-
-    if (align[x] === 'auto') {
-      var direction = maxOffsetX < 0 ? -1 : 1;
-      var vOffsetX = -vRect[x];
-      offsetX += direction * Math.max(0, Math.min(direction * (vOffsetX - offsetX), direction * maxOffsetX));
-    } else {
-      if (align[x] === 'start') {
-        align[x] = 0;
-      } else if (align[x] === 'center') {
-        align[x] = 0.5;
-      } else if (align[x] === 'end') {
-        align[x] = 1;
-      }
-
-      if (typeof align[x] !== 'number' || isNaN(align[x])) {
-        align[x] = 0.5;
-      }
-
-      offsetX += align[x] * maxOffsetX;
-    }
-
-    return offsetX;
-  }
-
-  if (typeof align !== 'object') {
-    align = {
-      x: align,
-      y: align
-    };
-  }
-
-  return {
-    x: calculateRectOffset(rect, vRect, align, 'x'),
-    y: calculateRectOffset(rect, vRect, align, 'y')
-  };
 }

lib/AutoResizing.js

@@ -32,7 +32,8 @@ "use strict";
 
-function AutoResizing(_ref) {
-  var width = _ref.width,
-      height = _ref.height,
-      onResize = _ref.onResize,
-      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["width", "height", "onResize"]);
+function AutoResizing(props) {
+  var width = props.width,
+      height = props.height,
+      onResize = props.onResize,
+      children = props.children,
+      divProps = (0, _objectWithoutPropertiesLoose2["default"])(props, ["width", "height", "onResize", "children"]);
 
@@ -51,9 +52,11 @@ var _useState = (0, _react.useState)(null),
   (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
-    if (!(0, _geometry.isEqualToSize)(size, prevSize)) {
+    if (!(0, _geometry.isEqualToSize)(prevSize, size)) {
       if (size) {
         onResize(size);
-      } else {
-        calculateSize();
       }
     }
+
+    if (!size) {
+      calculateSize();
+    }
   });
@@ -78,23 +81,24 @@ (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
   (0, _react.useMemo)(function () {
-    var nextSize = typeof width === 'number' && typeof height === 'number' ? {
-      width: width,
-      height: height
-    } : null;
+    var nextSize = null;
+
+    if (typeof width === 'number' && typeof height === 'number') {
+      nextSize = {
+        width: width,
+        height: height
+      };
+    }
+
     setSize(nextSize);
   }, [width, height]);
-  var element = props.children;
+  divProps.style = (0, _extends2["default"])({
+    width: getStyleDimension(width),
+    height: getStyleDimension(height)
+  }, divProps.style);
+  var element = null;
 
   if (size) {
-    if (typeof element === 'function') {
-      element = element(size);
-    }
-  } else {
-    element = null;
+    element = typeof children === 'function' ? children(size) : children;
   }
 
-  props.style = (0, _extends2["default"])({
-    width: getStyleDimension(width),
-    height: getStyleDimension(height)
-  }, props.style);
-  return _react["default"].createElement("div", (0, _extends2["default"])({}, props, {
+  return _react["default"].createElement("div", (0, _extends2["default"])({}, divProps, {
     ref: resizeRef
@@ -105,2 +109,4 @@ }), element);
 AutoResizing.defaultProps = defaultAutoResizingProps;
+var _default = AutoResizing;
+exports["default"] = _default;
 
@@ -113,5 +119,2 @@ function getStyleDimension(value) {
   return value;
-}
-
-var _default = AutoResizing;
-exports["default"] = _default;
+}

lib/carousel/Carousel.js

@@ -35,11 +35,13 @@ "use strict";
 
-function Carousel(_ref) {
-  var itemCount = _ref.itemCount,
-      renderItem = _ref.renderItem,
-      onSlideChange = _ref.onSlideChange,
-      slideTo = _ref.slideTo,
-      playerProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["itemCount", "renderItem", "onSlideChange", "slideTo"]);
+function Carousel(props) {
+  var gridItemCount = props.itemCount,
+      renderItem = props.renderItem,
+      onSlideChange = props.onSlideChange,
+      slideTo = props.slideTo,
+      children = props.children,
+      playerProps = (0, _objectWithoutPropertiesLoose2["default"])(props, ["itemCount", "renderItem", "onSlideChange", "slideTo", "children"]);
   var width = playerProps.width,
       height = playerProps.height,
-      direction = playerProps.direction;
+      direction = playerProps.direction,
+      playerScrollTo = playerProps.scrollTo;
 
@@ -50,12 +52,9 @@ var _useReducer = (0, _react.useReducer)(_carouselReducer.reducer, _carouselReducer.initialState),
 
-  var pageIndex = state.pageIndex,
+  var prevStateRef = (0, _usePrevRef.usePrevRef)(state);
+  var activeIndex = state.activeIndex,
+      itemCount = state.itemCount,
       scrollTo = state.scrollTo;
-  var activeIndex = pageIndex % itemCount;
-  var innerRef = (0, _usePrevRef.usePrevRef)({
-    activeIndex: activeIndex,
-    itemCount: itemCount
-  });
-  var prevInner = innerRef.current;
+  var prevState = prevStateRef.current;
   (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
-    if (activeIndex !== prevInner.activeIndex) {
+    if (prevState.activeIndex !== activeIndex) {
       onSlideChange({
@@ -68,9 +67,9 @@ activeIndex: activeIndex,
   (0, _react.useMemo)(function () {
-    if (playerProps.scrollTo) {
+    if (playerScrollTo) {
       dispatch({
         type: 'setScrollTo',
-        value: playerProps.scrollTo
+        value: playerScrollTo
       });
     }
-  }, [playerProps.scrollTo]);
+  }, [playerScrollTo]);
   (0, _react.useMemo)(function () {
@@ -80,5 +79,5 @@ if (slideTo) {
         type: 'slideTo'
-      }, slideTo, {}, innerRef.current));
+      }, slideTo));
     }
-  }, [slideTo, innerRef]);
+  }, [slideTo]);
   var gridProps = {
@@ -90,17 +89,12 @@ width: width,
     direction: direction,
-    itemCount: itemCount,
+    itemCount: gridItemCount,
     renderItem: renderItem
   };
   playerProps.scrollTo = scrollTo;
-  var element = playerProps.children;
-
-  if (typeof element === 'function') {
-    element = element({
-      activeIndex: activeIndex,
-      itemCount: itemCount
-    });
-  }
-
+  var element = typeof children === 'function' ? children({
+    activeIndex: activeIndex,
+    itemCount: itemCount
+  }) : children;
   return _react["default"].createElement(_react.Fragment, null, _react["default"].createElement(_Player["default"], playerProps, function (player) {
-    if (player !== state.player) {
+    if (state.player !== player) {
       dispatch({
@@ -107,0 +101,0 @@ type: 'setPlayer',

lib/carousel/carouselReducer.js

@@ -14,3 +14,4 @@ "use strict";
 var initialState = {
-  pageIndex: 0,
+  activeIndex: 0,
+  itemCount: 0,
   scrollTo: null,
@@ -38,7 +39,23 @@ player: _playerReducer.initialState
 function setPlayerReducer(state, action) {
-  var nextState = (0, _extends2["default"])({}, state, {
-    player: action.value
+  var player = action.value;
+  var loopWidth = player.loopWidth;
+  var _player$options = player.options,
+      direction = _player$options[0];
+  var _player$pad = player.pad,
+      contentOffset = _player$pad.contentOffset,
+      size = _player$pad.size,
+      contentSize = _player$pad.contentSize;
+  var itemCount = calculateItemCount(size, loopWidth, direction);
+  var activeIndex = 0;
+
+  if (itemCount > 0) {
+    var pageIndex = calculatePageIndex(contentOffset, size, contentSize, direction);
+    activeIndex = pageIndex % itemCount;
+  }
+
+  return (0, _extends2["default"])({}, state, {
+    player: player,
+    itemCount: itemCount,
+    activeIndex: activeIndex
   });
-  nextState = calculatePageIndexReducer(nextState);
-  return nextState;
 }
@@ -53,12 +70,10 @@
 function slideToReducer(state, action) {
-  var pageIndex = state.pageIndex;
+  var activeIndex = state.activeIndex,
+      itemCount = state.itemCount;
   var _state$player$options = state.player.options,
-      direction = _state$player$options[0],
-      loop = _state$player$options[1];
+      direction = _state$player$options[0];
   var _state$player$pad = state.player.pad,
       contentOffset = _state$player$pad.contentOffset,
       size = _state$player$pad.size;
-  var activeIndex = action.activeIndex,
-      itemCount = action.itemCount,
-      animated = action.animated;
+  var animated = action.animated;
   var index = action.index;
@@ -77,11 +92,7 @@
 
-  if (loop) {
-    index += itemCount * Math.round((pageIndex - index) / itemCount);
-  }
-
-  if (index === pageIndex) {
+  if (index === activeIndex) {
     return state;
   }
 
-  var offset = getContentOffsetAtIndex(index, contentOffset, size, direction);
+  var offset = getContentOffsetForIndexOffset(index - activeIndex, contentOffset, size, direction);
   return (0, _extends2["default"])({}, state, {
@@ -95,21 +106,2 @@ scrollTo: {
 
-function calculatePageIndexReducer(state) {
-  var pageIndex = state.pageIndex;
-  var _state$player$options2 = state.player.options,
-      direction = _state$player$options2[0];
-  var _state$player$pad2 = state.player.pad,
-      contentOffset = _state$player$pad2.contentOffset,
-      size = _state$player$pad2.size,
-      contentSize = _state$player$pad2.contentSize;
-  var nextPageIndex = calculatePageIndex(contentOffset, size, contentSize, direction);
-
-  if (nextPageIndex !== pageIndex) {
-    return (0, _extends2["default"])({}, state, {
-      pageIndex: nextPageIndex
-    });
-  }
-
-  return state;
-}
-
 function calculatePageIndex(offset, size, cSize, direction) {
@@ -132,3 +124,15 @@ var _ref = direction === 'y' ? ['height', 'y'] : ['width', 'x'],
 
-function getContentOffsetAtIndex(index, offset, size, direction) {
+function calculateItemCount(size, loopWidth, direction) {
+  var width = direction === 'y' ? 'height' : 'width';
+  var sizeWidth = size[width];
+  var count = 0;
+
+  if (sizeWidth > 0) {
+    count = Math.ceil(loopWidth / sizeWidth);
+  }
+
+  return count;
+}
+
+function getContentOffsetForIndexOffset(indexOffset, offset, size, direction) {
   var _ref3;
@@ -142,3 +146,3 @@
   var sizeWidth = size[width];
-  return _ref3 = {}, _ref3[x] = -index * sizeWidth, _ref3[y] = offset[y], _ref3;
+  return _ref3 = {}, _ref3[x] = offset[x] - indexOffset * sizeWidth, _ref3[y] = offset[y], _ref3;
 }

lib/carousel/Player.js

@@ -32,9 +32,11 @@ "use strict";
 
-function Player(_ref) {
-  var direction = _ref.direction,
-      loop = _ref.loop,
-      autoplayEnabled = _ref.autoplayEnabled,
-      autoplayInterval = _ref.autoplayInterval,
-      padProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["direction", "loop", "autoplayEnabled", "autoplayInterval"]);
-  var onMouseEnter = padProps.onMouseEnter,
+function Player(props) {
+  var direction = props.direction,
+      loop = props.loop,
+      autoplayEnabled = props.autoplayEnabled,
+      autoplayInterval = props.autoplayInterval,
+      children = props.children,
+      padProps = (0, _objectWithoutPropertiesLoose2["default"])(props, ["direction", "loop", "autoplayEnabled", "autoplayInterval", "children"]);
+  var padScrollTo = padProps.scrollTo,
+      onMouseEnter = padProps.onMouseEnter,
       onMouseLeave = padProps.onMouseLeave;
@@ -53,33 +55,2 @@
       deceleration = _state$pad.deceleration;
-  (0, _react.useEffect)(function () {
-    if (!autoplayEnabled || drag || deceleration || mouseEntered) {
-      return;
-    }
-
-    var autoplayTimer = setTimeout(function () {
-      autoplayTimer = undefined;
-      dispatch({
-        type: 'playNext'
-      });
-    }, autoplayInterval);
-    return function () {
-      if (autoplayTimer) {
-        clearTimeout(autoplayTimer);
-      }
-    };
-  }, [autoplayEnabled, mouseEntered, drag, deceleration, autoplayInterval]);
-  (0, _react.useMemo)(function () {
-    if (padProps.scrollTo) {
-      dispatch({
-        type: 'setScrollTo',
-        value: padProps.scrollTo
-      });
-    }
-  }, [padProps.scrollTo]);
-  (0, _react.useMemo)(function () {
-    dispatch({
-      type: 'setOptions',
-      value: [direction, loop]
-    });
-  }, [loop, direction]);
   var onPadMouseEnter = (0, _react.useCallback)(function (evt) {
@@ -105,3 +76,31 @@ dispatch({
   }, [onMouseLeave]);
+  (0, _react.useEffect)(function () {
+    if (!autoplayEnabled || mouseEntered || drag || deceleration) {
+      return;
+    }
 
+    var autoplayTimer = setTimeout(function () {
+      dispatch({
+        type: 'playNext'
+      });
+    }, autoplayInterval);
+    return function () {
+      clearTimeout(autoplayTimer);
+    };
+  }, [autoplayEnabled, autoplayInterval, mouseEntered, drag, deceleration]);
+  (0, _react.useMemo)(function () {
+    dispatch({
+      type: 'setOptions',
+      value: [direction, loop]
+    });
+  }, [loop, direction]);
+  (0, _react.useMemo)(function () {
+    if (padScrollTo) {
+      dispatch({
+        type: 'setScrollTo',
+        value: padScrollTo
+      });
+    }
+  }, [padScrollTo]);
+
   if (direction === 'x') {
@@ -120,3 +119,3 @@ padProps.alwaysBounceY = false;
   return _react["default"].createElement(_Pad["default"], padProps, function (pad) {
-    if (pad !== state.pad) {
+    if (state.pad !== pad) {
       dispatch({
@@ -128,14 +127,9 @@ type: 'setPad',
 
-    var element = padProps.children;
-
-    if (typeof element === 'function') {
-      element = element(state);
-    }
-
+    var element = typeof children === 'function' ? children(state) : children;
     return _react["default"].createElement(_ListContent["default"], {
       direction: direction,
       itemCount: loopCount,
-      renderItem: function renderItem(_ref2) {
-        var Item = _ref2.Item,
-            itemIndex = _ref2.itemIndex;
+      renderItem: function renderItem(_ref) {
+        var Item = _ref.Item,
+            itemIndex = _ref.itemIndex;
         return _react["default"].createElement(Item, {
@@ -142,0 +136,0 @@ key: itemIndex + loopOffset,

lib/GeneralContent.js

@@ -24,3 +24,4 @@ "use strict";
   var width = props.width,
-      height = props.height;
+      height = props.height,
+      children = props.children;
   var itemRef = (0, _react.useRef)(null);
@@ -46,9 +47,3 @@ (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
     itemRef.current = apis;
-    var element = props.children;
-
-    if (typeof element === 'function') {
-      element = element(size, apis);
-    }
-
-    return element;
+    return typeof children === 'function' ? children(size, apis) : children;
   });
@@ -55,0 +50,0 @@ }

lib/GridContent.js

@@ -42,13 +42,14 @@ "use strict";
 
-function GridContent(_ref) {
-  var width = _ref.width,
-      height = _ref.height,
-      direction = _ref.direction,
-      rowSpacing = _ref.rowSpacing,
-      columnSpacing = _ref.columnSpacing,
-      itemCount = _ref.itemCount,
-      itemWidth = _ref.itemWidth,
-      itemHeight = _ref.itemHeight,
-      renderItem = _ref.renderItem,
-      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["width", "height", "direction", "rowSpacing", "columnSpacing", "itemCount", "itemWidth", "itemHeight", "renderItem"]);
+function GridContent(props) {
+  var width = props.width,
+      height = props.height,
+      direction = props.direction,
+      rowSpacing = props.rowSpacing,
+      columnSpacing = props.columnSpacing,
+      itemCount = props.itemCount,
+      itemWidth = props.itemWidth,
+      itemHeight = props.itemHeight,
+      renderItem = props.renderItem,
+      children = props.children,
+      divProps = (0, _objectWithoutPropertiesLoose2["default"])(props, ["width", "height", "direction", "rowSpacing", "columnSpacing", "itemCount", "itemWidth", "itemHeight", "renderItem", "children"]);
   var layout = (0, _react.useMemo)(function () {
@@ -69,14 +70,5 @@ return calculateLayout({
   var size = layout.size,
-      count = layout.count,
       layoutList = layout.layoutList;
   var prevLayout = prevLayoutRef.current;
   var resizeContent = (0, _react.useCallback)(function () {}, []);
-  var getItemIndex = (0, _react.useCallback)(function (_ref2) {
-    var rowIndex = _ref2.rowIndex,
-        columnIndex = _ref2.columnIndex;
-    return calculateItemIndex({
-      row: rowIndex,
-      column: columnIndex
-    }, count, direction);
-  }, [direction, count]);
   (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
@@ -86,3 +78,3 @@ context.resizeContent(size);
   (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
-    if (!(0, _geometry.isEqualToSize)(size, prevLayout.size)) {
+    if (!(0, _geometry.isEqualToSize)(prevLayout.size, size)) {
       context.resizeContent(size);
@@ -92,9 +84,11 @@ }
 
-  function buildItem(layoutAttrs) {
-    var itemIndex = layoutAttrs.itemIndex,
-        rect = layoutAttrs.rect,
-        visibleRect = layoutAttrs.visibleRect,
-        needsRender = layoutAttrs.needsRender,
-        Item = layoutAttrs.Item;
-    var element = renderItem(layoutAttrs);
+  function buildItem(attrs) {
+    var rect = attrs.rect,
+        itemIndex = attrs.itemIndex,
+        visibleRect = attrs.visibleRect,
+        needsRender = attrs.needsRender,
+        Item = attrs.Item;
+    var forceRender = false;
+    var element = renderItem(attrs);
+    var key = String(itemIndex);
     var itemStyle = {
@@ -107,20 +101,16 @@ position: 'absolute',
     };
-    var forceRender;
-    var key;
 
     if ((0, _react.isValidElement)(element) && element.type === Item) {
-      if (element.props.style) {
-        itemStyle = (0, _extends2["default"])({}, itemStyle, {}, element.props.style);
+      if (element.props.forceRender !== undefined) {
+        forceRender = element.props.forceRender;
       }
 
-      forceRender = element.props.forceRender;
-      key = element.key;
+      if (element.key) {
+        key = element.key;
+      }
+
       element = element.props.children;
     }
 
-    if (!key) {
-      key = '' + itemIndex;
-    }
-
-    if (!(forceRender || needsRender)) {
+    if (!needsRender && !forceRender) {
       return null;
@@ -131,3 +121,3 @@ }
       if (element.props.style) {
-        itemStyle = (0, _extends2["default"])({}, itemStyle, {}, element.props.style);
+        Object.assign(itemStyle, element.props.style);
       }
@@ -163,33 +153,22 @@
 
-  props.style = (0, _extends2["default"])({}, elemStyle, {}, props.style);
-  var items = [];
+  if (divProps.style) {
+    Object.assign(elemStyle, divProps.style);
+  }
 
-  for (var itemIndex = 0; itemIndex < layoutList.length; itemIndex++) {
-    var attrs = layoutList[itemIndex];
-    var layoutAttrs = (0, _extends2["default"])({}, attrs, {
-      itemIndex: itemIndex,
+  divProps.style = elemStyle;
+  var items = layoutList.map(function (attrs) {
+    return buildItem((0, _extends2["default"])({}, attrs, {
       visibleRect: (0, _visible.getItemVisibleRect)(attrs.rect, context.visibleRect),
       needsRender: (0, _visible.needsRender)(attrs.rect, context.visibleRect),
       Item: Item
-    });
-    items.push(buildItem(layoutAttrs));
-  }
+    }));
+  });
 
-  if (typeof props.children === 'function') {
-    props.children(layout, {
-      getItemIndex: getItemIndex
-    });
+  if (typeof children === 'function') {
+    children(layout);
   }
 
-  return _react["default"].createElement("div", props, items);
+  return _react["default"].createElement("div", divProps, items);
 }
 
-function calculateItemIndex(index, count, direction) {
-  var _ref3 = direction === 'x' ? ['column', 'row'] : ['row', 'column'],
-      row = _ref3[0],
-      column = _ref3[1];
-
-  return index[column] + index[row] * count[column];
-}
-
 function calculateLayout(props) {
@@ -217,9 +196,9 @@ var _size, _count;
 
-  var _ref4 = direction === 'x' ? ['y', 'x', 'height', 'width', 'column', 'row'] : ['x', 'y', 'width', 'height', 'row', 'column'],
-      x = _ref4[0],
-      y = _ref4[1],
-      width = _ref4[2],
-      height = _ref4[3],
-      row = _ref4[4],
-      column = _ref4[5];
+  var _ref = direction === 'x' ? ['y', 'x', 'height', 'width', 'column', 'row'] : ['x', 'y', 'width', 'height', 'row', 'column'],
+      x = _ref[0],
+      y = _ref[1],
+      width = _ref[2],
+      height = _ref[3],
+      row = _ref[4],
+      column = _ref[5];
 
@@ -281,3 +260,3 @@ var sizeWidth = size[width];
         rect: (_rect = {}, _rect[x] = attrX, _rect[y] = sizeHeight, _rect[width] = itemSize[width], _rect[height] = itemSize[height], _rect)
-      }, _layoutList$push[row + 'Index'] = rowIndex, _layoutList$push[column + 'Index'] = columnIndex, _layoutList$push));
+      }, _layoutList$push[row + 'Index'] = rowIndex, _layoutList$push[column + 'Index'] = columnIndex, _layoutList$push.itemIndex = itemIndex, _layoutList$push));
     }
@@ -284,0 +263,0 @@

lib/ItemContent.js

@@ -31,6 +31,7 @@ "use strict";
 
-function ItemContent(_ref) {
-  var width = _ref.width,
-      height = _ref.height,
-      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["width", "height"]);
+function ItemContent(props) {
+  var width = props.width,
+      height = props.height,
+      children = props.children,
+      divProps = (0, _objectWithoutPropertiesLoose2["default"])(props, ["width", "height", "children"]);
 
@@ -53,5 +54,4 @@ var _useState = (0, _react.useState)(null),
   }, []);
-  (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {}, []);
   (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
-    if (!(0, _geometry.isEqualToSize)(size, prevSize)) {
+    if (!(0, _geometry.isEqualToSize)(prevSize, size)) {
       if (size) {
@@ -67,6 +67,11 @@ context.resizeContent(size);
   (0, _react.useMemo)(function () {
-    var nextSize = typeof width === 'number' && typeof height === 'number' ? {
-      width: width,
-      height: height
-    } : null;
+    var nextSize = null;
+
+    if (typeof width === 'number' && typeof height === 'number') {
+      nextSize = {
+        width: width,
+        height: height
+      };
+    }
+
     setSize(nextSize);
@@ -94,12 +99,11 @@ }, [width, height]);
 
-  props.style = (0, _extends2["default"])({}, elemStyle, {}, props.style);
-  var element = props.children;
-
-  if (typeof element === 'function') {
-    element = element(size, {
-      getResizeNode: getResizeNode,
-      calculateSize: calculateSize
-    });
+  if (divProps.style) {
+    Object.assign(elemStyle, divProps.style);
   }
 
+  divProps.style = elemStyle;
+  var element = typeof children === 'function' ? children(size, {
+    getResizeNode: getResizeNode,
+    calculateSize: calculateSize
+  }) : children;
   return _react["default"].createElement(_PadContext["default"].Provider, {
@@ -109,3 +113,3 @@ value: (0, _extends2["default"])({}, context, {
     })
-  }, _react["default"].createElement("div", props, _react["default"].createElement("div", {
+  }, _react["default"].createElement("div", divProps, _react["default"].createElement("div", {
     ref: resizeRef,
@@ -112,0 +116,0 @@ style: resizeStyle

lib/ListContent.js

@@ -43,12 +43,13 @@ "use strict";
 
-function ListContent(_ref) {
-  var width = _ref.width,
-      height = _ref.height,
-      direction = _ref.direction,
-      spacing = _ref.spacing,
-      itemCount = _ref.itemCount,
-      estimatedItemWidth = _ref.estimatedItemWidth,
-      estimatedItemHeight = _ref.estimatedItemHeight,
-      renderItem = _ref.renderItem,
-      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["width", "height", "direction", "spacing", "itemCount", "estimatedItemWidth", "estimatedItemHeight", "renderItem"]);
+function ListContent(props) {
+  var width = props.width,
+      height = props.height,
+      direction = props.direction,
+      spacing = props.spacing,
+      itemCount = props.itemCount,
+      estimatedItemWidth = props.estimatedItemWidth,
+      estimatedItemHeight = props.estimatedItemHeight,
+      renderItem = props.renderItem,
+      children = props.children,
+      divProps = (0, _objectWithoutPropertiesLoose2["default"])(props, ["width", "height", "direction", "spacing", "itemCount", "estimatedItemWidth", "estimatedItemHeight", "renderItem", "children"]);
 
@@ -83,6 +84,6 @@ var _useState = (0, _react.useState)([]),
     return function (itemSize) {
-      return setItemSizeDict(function (itemSizeDict) {
+      setItemSizeDict(function (itemSizeDict) {
         var _extends2;
 
-        return (0, _geometry.isEqualToSize)(itemSize, itemSizeDict[itemHash]) ? itemSizeDict : (0, _extends3["default"])({}, itemSizeDict, (_extends2 = {}, _extends2[itemHash] = itemSize, _extends2));
+        return (0, _geometry.isEqualToSize)(itemSizeDict[itemHash], itemSize) ? itemSizeDict : (0, _extends3["default"])({}, itemSizeDict, (_extends2 = {}, _extends2[itemHash] = itemSize, _extends2));
       });
@@ -95,3 +96,3 @@ };
   (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
-    if (!(0, _geometry.isEqualToSize)(size, prevLayout.size)) {
+    if (!(0, _geometry.isEqualToSize)(prevLayout.size, size)) {
       context.resizeContent(size);
@@ -101,9 +102,12 @@ }
 
-  function buildItem(layoutAttrs) {
-    var itemIndex = layoutAttrs.itemIndex,
-        rect = layoutAttrs.rect,
-        visibleRect = layoutAttrs.visibleRect,
-        needsRender = layoutAttrs.needsRender,
-        Item = layoutAttrs.Item;
-    var element = renderItem(layoutAttrs);
+  function buildItem(attrs) {
+    var rect = attrs.rect,
+        itemIndex = attrs.itemIndex,
+        visibleRect = attrs.visibleRect,
+        needsRender = attrs.needsRender,
+        Item = attrs.Item;
+    var forceRender = false;
+    var element = renderItem(attrs);
+    var key = String(itemIndex);
+    var hash;
     var itemStyle = {
@@ -116,21 +120,19 @@ position: 'absolute',
     };
-    var forceRender;
-    var hash;
-    var key;
 
     if ((0, _react.isValidElement)(element) && element.type === Item) {
-      if (element.props.style) {
-        itemStyle = (0, _extends3["default"])({}, itemStyle, {}, element.props.style);
+      if (element.props.forceRender !== undefined) {
+        forceRender = element.props.forceRender;
       }
 
-      forceRender = element.props.forceRender;
-      hash = element.props.hash;
-      key = element.key;
+      if (element.key) {
+        key = element.key;
+      }
+
+      if (element.props.hash !== undefined) {
+        hash = element.props.hash;
+      }
+
       element = element.props.children;
     }
 
-    if (!key) {
-      key = '' + itemIndex;
-    }
-
     if (hash === undefined) {
@@ -140,7 +142,7 @@ hash = key;
 
-    var shouldRender = forceRender || needsRender;
     var itemSize = itemSizeDict[hash];
+    var skipRender = !needsRender && !forceRender;
 
     if (!itemSize && nextItemHashList.indexOf(hash) !== -1) {
-      shouldRender = false;
+      skipRender = true;
     }
@@ -150,3 +152,3 @@
 
-    if (!shouldRender) {
+    if (skipRender) {
       return null;
@@ -172,3 +174,3 @@ }
       if (element.props.style) {
-        itemStyle = (0, _extends3["default"])({}, itemStyle, {}, element.props.style);
+        Object.assign(itemStyle, element.props.style);
       }
@@ -184,6 +186,6 @@
 
-      element = (0, _react.cloneElement)(element, (0, _extends3["default"])({
-        ref: element.ref,
-        style: itemStyle
-      }, sizeProps));
+      element = (0, _react.cloneElement)(element, (0, _extends3["default"])({}, sizeProps, {
+        style: itemStyle,
+        ref: element.ref
+      }));
     } else {
@@ -213,21 +215,24 @@ element = _react["default"].createElement(_ItemContent["default"], (0, _extends3["default"])({
 
-  props.style = (0, _extends3["default"])({}, elemStyle, {}, props.style);
-  var items = [];
+  if (divProps.style) {
+    Object.assign(elemStyle, divProps.style);
+  }
 
-  for (var itemIndex = 0; itemIndex < layoutList.length; itemIndex++) {
-    var attrs = layoutList[itemIndex];
-    var layoutAttrs = (0, _extends3["default"])({}, attrs, {
-      itemIndex: itemIndex,
+  divProps.style = elemStyle;
+  var items = layoutList.map(function (attrs) {
+    return buildItem((0, _extends3["default"])({}, attrs, {
       visibleRect: (0, _visible.getItemVisibleRect)(attrs.rect, context.visibleRect),
       needsRender: (0, _visible.needsRender)(attrs.rect, context.visibleRect),
       Item: Item
-    });
-    items.push(buildItem(layoutAttrs));
-  }
+    }));
+  });
 
-  if (nextItemHashList.join() !== itemHashList.join()) {
+  if (itemHashList.join() !== nextItemHashList.join()) {
     setItemHashList(nextItemHashList);
   }
 
-  return _react["default"].createElement("div", props, items);
+  if (typeof children === 'function') {
+    children(layout);
+  }
+
+  return _react["default"].createElement("div", divProps, items);
 }
@@ -255,7 +260,7 @@
 
-  var _ref2 = direction === 'x' ? ['y', 'x', 'height', 'width'] : ['x', 'y', 'width', 'height'],
-      x = _ref2[0],
-      y = _ref2[1],
-      width = _ref2[2],
-      height = _ref2[3];
+  var _ref = direction === 'x' ? ['y', 'x', 'height', 'width'] : ['x', 'y', 'width', 'height'],
+      x = _ref[0],
+      y = _ref[1],
+      width = _ref[2],
+      height = _ref[3];
 
@@ -272,8 +277,9 @@ var sizeWidth = 0;
   for (var itemIndex = 0; itemIndex < itemCount; itemIndex++) {
-    var _ref3, _rect;
+    var _ref2, _rect;
 
     var itemHash = itemHashList[itemIndex];
-    var itemSize = itemSizeDict[itemHash] || (_ref3 = {}, _ref3[width] = fixed[width] === undefined ? estimatedItemSize[width] : fixed[width], _ref3[height] = estimatedItemSize[height], _ref3);
+    var itemSize = itemSizeDict[itemHash] || (_ref2 = {}, _ref2[width] = fixed[width] === undefined ? estimatedItemSize[width] : fixed[width], _ref2[height] = estimatedItemSize[height], _ref2);
     layoutList.push({
-      rect: (_rect = {}, _rect[x] = 0, _rect[y] = sizeHeight, _rect[width] = itemSize[width], _rect[height] = itemSize[height], _rect)
+      rect: (_rect = {}, _rect[x] = 0, _rect[y] = sizeHeight, _rect[width] = itemSize[width], _rect[height] = itemSize[height], _rect),
+      itemIndex: itemIndex
     });
@@ -280,0 +286,0 @@

lib/Pad.js

@@ -30,4 +30,2 @@ "use strict";
 
-var _motion = require("./utils/motion");
-
 var _animationFrame = require("./utils/animationFrame");
@@ -52,18 +50,19 @@
 
-function Pad(_ref) {
-  var width = _ref.width,
-      height = _ref.height,
-      pagingEnabled = _ref.pagingEnabled,
-      directionalLockEnabled = _ref.directionalLockEnabled,
-      alwaysBounceX = _ref.alwaysBounceX,
-      alwaysBounceY = _ref.alwaysBounceY,
-      scrollTo = _ref.scrollTo,
-      scrollToRect = _ref.scrollToRect,
-      onScroll = _ref.onScroll,
-      onDragStart = _ref.onDragStart,
-      onDragEnd = _ref.onDragEnd,
-      onDecelerationStart = _ref.onDecelerationStart,
-      onDecelerationEnd = _ref.onDecelerationEnd,
-      onContentResize = _ref.onContentResize,
-      pannableProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["width", "height", "pagingEnabled", "directionalLockEnabled", "alwaysBounceX", "alwaysBounceY", "scrollTo", "scrollToRect", "onScroll", "onDragStart", "onDragEnd", "onDecelerationStart", "onDecelerationEnd", "onContentResize"]);
+function Pad(props) {
+  var width = props.width,
+      height = props.height,
+      pagingEnabled = props.pagingEnabled,
+      directionalLockEnabled = props.directionalLockEnabled,
+      alwaysBounceX = props.alwaysBounceX,
+      alwaysBounceY = props.alwaysBounceY,
+      scrollTo = props.scrollTo,
+      scrollToRect = props.scrollToRect,
+      onScroll = props.onScroll,
+      onDragStart = props.onDragStart,
+      onDragEnd = props.onDragEnd,
+      onDecelerationStart = props.onDecelerationStart,
+      onDecelerationEnd = props.onDecelerationEnd,
+      onContentResize = props.onContentResize,
+      children = props.children,
+      pannableProps = (0, _objectWithoutPropertiesLoose2["default"])(props, ["width", "height", "pagingEnabled", "directionalLockEnabled", "alwaysBounceX", "alwaysBounceY", "scrollTo", "scrollToRect", "onScroll", "onDragStart", "onDragEnd", "onDecelerationStart", "onDecelerationEnd", "onContentResize", "children"]);
   var enabled = pannableProps.enabled,
@@ -77,3 +76,2 @@ shouldStart = pannableProps.shouldStart;
   var prevStateRef = (0, _usePrevRef.usePrevRef)(state);
-  var innerRef = (0, _react.useRef)({});
   var size = state.size,
@@ -86,5 +84,4 @@ contentSize = state.contentSize,
   var prevState = prevStateRef.current;
-  innerRef.current.state = state;
   var resizeContent = (0, _react.useCallback)(function (contentSize) {
-    return dispatch({
+    dispatch({
       type: 'setContentSize',
@@ -95,9 +92,3 @@ value: contentSize
   var shouldPannableStart = (0, _react.useCallback)(function (evt) {
-    var _innerRef$current$sta = innerRef.current.state,
-        size = _innerRef$current$sta.size,
-        contentSize = _innerRef$current$sta.contentSize,
-        _innerRef$current$sta2 = _innerRef$current$sta.options,
-        directionalLockEnabled = _innerRef$current$sta2[1];
-
-    if (directionalLockEnabled && !(0, _motion.shouldDragStart)(evt.velocity, size, contentSize)) {
+    if (directionalLockEnabled && !shouldDragStart(evt.velocity, size, contentSize)) {
       return false;
@@ -107,5 +98,5 @@ }
     return shouldStart(evt);
-  }, [shouldStart]);
+  }, [shouldStart, directionalLockEnabled, size, contentSize]);
   (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
-    if (state.pannable.translation !== prevState.pannable.translation) {
+    if (prevState.pannable.translation !== state.pannable.translation) {
       if (state.pannable.translation) {
@@ -143,11 +134,11 @@ if (prevState.pannable.translation) {
 
-    if (contentSize !== prevState.contentSize) {
+    if (prevState.contentSize !== contentSize) {
       onContentResize(contentSize);
     }
 
-    if (contentOffset !== prevState.contentOffset) {
+    if (prevState.contentOffset !== contentOffset) {
       onScroll(output);
     }
 
-    if (drag !== prevState.drag) {
+    if (prevState.drag !== drag) {
       if (!prevState.drag) {
@@ -160,3 +151,3 @@ onDragStart(output);
 
-    if (deceleration !== prevState.deceleration) {
+    if (prevState.deceleration !== deceleration) {
       if (!prevState.deceleration) {
@@ -175,3 +166,2 @@ onDecelerationStart(output);
     var timer = (0, _animationFrame.requestAnimationFrame)(function () {
-      timer = undefined;
       dispatch({
@@ -183,5 +173,3 @@ type: 'decelerate',
     return function () {
-      if (timer) {
-        (0, _animationFrame.cancelAnimationFrame)(timer);
-      }
+      (0, _animationFrame.cancelAnimationFrame)(timer);
     };
@@ -207,3 +195,3 @@ }, [state]);
       dispatch((0, _extends2["default"])({
-        type: 'setContentOffset'
+        type: 'scrollTo'
       }, scrollTo));
@@ -226,3 +214,8 @@ }
   };
-  pannableProps.style = (0, _extends2["default"])({}, elemStyle, {}, pannableProps.style);
+
+  if (pannableProps.style) {
+    Object.assign(elemStyle, pannableProps.style);
+  }
+
+  pannableProps.style = elemStyle;
   var visibleRect = {
@@ -240,3 +233,3 @@ x: -contentOffset.x,
   }, _react["default"].createElement(_Pannable["default"], pannableProps, function (pannable) {
-    if (pannable !== state.pannable) {
+    if (state.pannable !== pannable) {
       dispatch({
@@ -256,11 +249,7 @@ type: 'setPannable',
 
-    var element = pannableProps.children;
+    var element = typeof children === 'function' ? children(state) : children;
 
-    if (typeof element === 'function') {
-      element = element(state);
-    }
-
     if ((0, _react.isValidElement)(element) && element.type.PadContent) {
       if (element.props.style) {
-        contentStyle = (0, _extends2["default"])({}, contentStyle, {}, element.props.style);
+        Object.assign(contentStyle, element.props.style);
       }
@@ -284,2 +273,7 @@
 var _default = Pad;
-exports["default"] = _default;
+exports["default"] = _default;
+
+function shouldDragStart(velocity, size, cSize) {
+  var height = Math.abs(velocity.y) < Math.abs(velocity.x) ? 'width' : 'height';
+  return size[height] < cSize[height];
+}

lib/padReducer.js

@@ -76,4 +76,4 @@ "use strict";
 
-    case 'setContentOffset':
-      return setContentOffsetReducer(state, action);
+    case 'scrollTo':
+      return scrollToReducer(state, action);
 
@@ -302,3 +302,3 @@ case 'scrollToRect':
 
-function setContentOffsetReducer(state, action) {
+function scrollToReducer(state, action) {
   var size = state.size,
@@ -311,5 +311,17 @@ contentOffset = state.contentOffset,
       pagingEnabled = _state$options6[0];
-  var offset = action.offset,
+  var point = action.point,
       animated = action.animated;
+  var _action$offset = action.offset,
+      offset = _action$offset === void 0 ? {
+    x: 0,
+    y: 0
+  } : _action$offset;
 
+  if (point) {
+    offset = {
+      x: -point.x,
+      y: -point.y
+    };
+  }
+
   if (drag || !animated) {
@@ -359,14 +371,53 @@ if (offset.x === contentOffset.x && offset.y === contentOffset.y) {
       animated = action.animated;
-  var visibleRect = {
-    x: -contentOffset.x,
-    y: -contentOffset.y,
-    width: size.width,
-    height: size.height
-  };
-  var offset = (0, _motion.calculateRectOffset)(rect, visibleRect, align);
-  return setContentOffsetReducer(state, {
-    type: 'setContentOffset',
+  var offset = getContentOffsetForRect(rect, align, contentOffset, size);
+  return scrollToReducer(state, {
+    type: 'scrollTo',
     offset: offset,
     animated: animated
   });
+}
+
+function getContentOffsetForRect(rect, align, cOffset, size, name) {
+  if (name) {
+    var _ref = name === 'y' ? ['y', 'height'] : ['x', 'width'],
+        x = _ref[0],
+        width = _ref[1];
+
+    var offsetX = -rect[x];
+    var delta = size[width] - rect[width];
+
+    if (align[x] === 'auto') {
+      var direction = delta < 0 ? -1 : 1;
+      var dOffsetX = cOffset[x] - offsetX;
+      offsetX += direction * Math.max(0, Math.min(direction * dOffsetX, direction * delta));
+    } else {
+      if (align[x] === 'start') {
+        align[x] = 0;
+      } else if (align[x] === 'center') {
+        align[x] = 0.5;
+      } else if (align[x] === 'end') {
+        align[x] = 1;
+      }
+
+      if (typeof align[x] !== 'number' || isNaN(align[x])) {
+        align[x] = 0.5;
+      }
+
+      offsetX += align[x] * delta;
+    }
+
+    return offsetX;
+  }
+
+  if (typeof align !== 'object') {
+    align = {
+      x: align,
+      y: align
+    };
+  }
+
+  return {
+    x: getContentOffsetForRect(rect, align, cOffset, size, 'x'),
+    y: getContentOffsetForRect(rect, align, cOffset, size, 'y')
+  };
 }

lib/Pannable.js

@@ -37,10 +37,11 @@ "use strict";
 
-function Pannable(_ref) {
-  var enabled = _ref.enabled,
-      shouldStart = _ref.shouldStart,
-      onStart = _ref.onStart,
-      onMove = _ref.onMove,
-      onEnd = _ref.onEnd,
-      onCancel = _ref.onCancel,
-      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["enabled", "shouldStart", "onStart", "onMove", "onEnd", "onCancel"]);
+function Pannable(props) {
+  var enabled = props.enabled,
+      shouldStart = props.shouldStart,
+      onStart = props.onStart,
+      onMove = props.onMove,
+      onEnd = props.onEnd,
+      onCancel = props.onCancel,
+      children = props.children,
+      divProps = (0, _objectWithoutPropertiesLoose2["default"])(props, ["enabled", "shouldStart", "onStart", "onMove", "onEnd", "onCancel", "children"]);
 
@@ -199,3 +200,3 @@ var _useReducer = (0, _react.useReducer)(_pannableReducer.reducer, _pannableReducer.initialState),
 
-    if (translation !== prevState.translation) {
+    if (prevState.translation !== translation) {
       if (translation) {
@@ -226,16 +227,18 @@ if (prevState.translation) {
   if (translation) {
-    elemStyle.touchAction = 'none';
-    elemStyle.pointerEvents = 'none';
-    elemStyle.userSelect = 'none';
+    Object.assign(elemStyle, _StyleSheet["default"].create({
+      touchAction: 'none',
+      pointerEvents: 'none',
+      userSelect: 'none'
+    }));
   }
 
-  props.style = (0, _extends2["default"])({}, _StyleSheet["default"].create(elemStyle), {}, props.style);
-  props.ref = elemRef;
-  var element = props.children;
-
-  if (typeof element === 'function') {
-    element = element(state);
+  if (divProps.style) {
+    Object.assign(elemStyle, divProps.style);
   }
 
-  return _react["default"].createElement("div", props, element);
+  divProps.style = elemStyle;
+  var element = typeof children === 'function' ? children(state) : children;
+  return _react["default"].createElement("div", (0, _extends2["default"])({}, divProps, {
+    ref: elemRef
+  }), element);
 }
@@ -242,0 +245,0 @@

lib/utils/motion.js

@@ -10,6 +10,4 @@ "use strict";
 exports.getDecelerationEndOffset = getDecelerationEndOffset;
-exports.shouldDragStart = shouldDragStart;
 exports.calculateDeceleration = calculateDeceleration;
 exports.createDeceleration = createDeceleration;
-exports.calculateRectOffset = calculateRectOffset;
 
@@ -189,7 +187,2 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-function shouldDragStart(velocity, size, cSize) {
-  var height = Math.abs(velocity.y) < Math.abs(velocity.x) ? 'width' : 'height';
-  return size[height] < cSize[height];
-}
-
 function calculateDeceleration(deceleration, moveTime, name) {
@@ -259,47 +252,2 @@ if (name) {
   };
-}
-
-function calculateRectOffset(rect, vRect, align, name) {
-  if (name) {
-    var _ref8 = name === 'y' ? ['y', 'height'] : ['x', 'width'],
-        x = _ref8[0],
-        width = _ref8[1];
-
-    var offsetX = -rect[x];
-    var maxOffsetX = vRect[width] - rect[width];
-
-    if (align[x] === 'auto') {
-      var direction = maxOffsetX < 0 ? -1 : 1;
-      var vOffsetX = -vRect[x];
-      offsetX += direction * Math.max(0, Math.min(direction * (vOffsetX - offsetX), direction * maxOffsetX));
-    } else {
-      if (align[x] === 'start') {
-        align[x] = 0;
-      } else if (align[x] === 'center') {
-        align[x] = 0.5;
-      } else if (align[x] === 'end') {
-        align[x] = 1;
-      }
-
-      if (typeof align[x] !== 'number' || isNaN(align[x])) {
-        align[x] = 0.5;
-      }
-
-      offsetX += align[x] * maxOffsetX;
-    }
-
-    return offsetX;
-  }
-
-  if (typeof align !== 'object') {
-    align = {
-      x: align,
-      y: align
-    };
-  }
-
-  return {
-    x: calculateRectOffset(rect, vRect, align, 'x'),
-    y: calculateRectOffset(rect, vRect, align, 'y')
-  };
 }

package.json

 {
   "name": "react-pannable",
-  "version": "2.2.3",
+  "version": "2.3.0",
   "description": "Flexible and Customizable Layouts for Scrolling Content with React",
@@ -79,3 +79,3 @@ "keywords": [
     "babel-jest": "^24.9.0",
-    "coveralls": "^3.0.8",
+    "coveralls": "^3.0.9",
     "eslint": "^6.7.1",
@@ -82,0 +82,0 @@ "eslint-config-react-app": "^5.0.2",

src/AutoResizing.js

@@ -14,3 +14,4 @@ import React, { useState, useRef, useMemo, useCallback } from 'react';
 
-function AutoResizing({ width, height, onResize, ...props }) {
+function AutoResizing(props) {
+  const { width, height, onResize, children, ...divProps } = props;
   const [size, setSize] = useState(null);
@@ -29,9 +30,11 @@ const prevSizeRef = usePrevRef(size);
   useIsomorphicLayoutEffect(() => {
-    if (!isEqualToSize(size, prevSize)) {
+    if (!isEqualToSize(prevSize, size)) {
       if (size) {
         onResize(size);
-      } else {
-        calculateSize();
       }
     }
+
+    if (!size) {
+      calculateSize();
+    }
   });
@@ -53,28 +56,25 @@
   useMemo(() => {
-    const nextSize =
-      typeof width === 'number' && typeof height === 'number'
-        ? { width, height }
-        : null;
+    let nextSize = null;
 
+    if (typeof width === 'number' && typeof height === 'number') {
+      nextSize = { width, height };
+    }
+
     setSize(nextSize);
   }, [width, height]);
 
-  let element = props.children;
+  divProps.style = {
+    width: getStyleDimension(width),
+    height: getStyleDimension(height),
+    ...divProps.style,
+  };
 
+  let element = null;
+
   if (size) {
-    if (typeof element === 'function') {
-      element = element(size);
-    }
-  } else {
-    element = null;
+    element = typeof children === 'function' ? children(size) : children;
   }
 
-  props.style = {
-    width: getStyleDimension(width),
-    height: getStyleDimension(height),
-    ...props.style,
-  };
-
   return (
-    <div {...props} ref={resizeRef}>
+    <div {...divProps} ref={resizeRef}>
       {element}
@@ -87,2 +87,4 @@ </div>
 
+export default AutoResizing;
+
 function getStyleDimension(value) {
@@ -95,3 +97,1 @@ if (value === undefined || value === null || value === '') {
 }
-
-export default AutoResizing;

src/carousel/Carousel.js

@@ -16,18 +16,20 @@ import React, { Fragment, useMemo, useReducer } from 'react';
 
-function Carousel({
-  itemCount,
-  renderItem,
-  onSlideChange,
-  slideTo,
-  ...playerProps
-}) {
-  const { width, height, direction } = playerProps;
+function Carousel(props) {
+  const {
+    itemCount: gridItemCount,
+    renderItem,
+    onSlideChange,
+    slideTo,
+    children,
+    ...playerProps
+  } = props;
+  const { width, height, direction, scrollTo: playerScrollTo } = playerProps;
   const [state, dispatch] = useReducer(reducer, initialState);
-  const { pageIndex, scrollTo } = state;
-  const activeIndex = pageIndex % itemCount;
-  const innerRef = usePrevRef({ activeIndex, itemCount });
-  const prevInner = innerRef.current;
+  const prevStateRef = usePrevRef(state);
 
+  const { activeIndex, itemCount, scrollTo } = state;
+  const prevState = prevStateRef.current;
+
   useIsomorphicLayoutEffect(() => {
-    if (activeIndex !== prevInner.activeIndex) {
+    if (prevState.activeIndex !== activeIndex) {
       onSlideChange({ activeIndex, itemCount });
@@ -38,12 +40,12 @@ }
   useMemo(() => {
-    if (playerProps.scrollTo) {
-      dispatch({ type: 'setScrollTo', value: playerProps.scrollTo });
+    if (playerScrollTo) {
+      dispatch({ type: 'setScrollTo', value: playerScrollTo });
     }
-  }, [playerProps.scrollTo]);
+  }, [playerScrollTo]);
 
   useMemo(() => {
     if (slideTo) {
-      dispatch({ type: 'slideTo', ...slideTo, ...innerRef.current });
+      dispatch({ type: 'slideTo', ...slideTo });
     }
-  }, [slideTo, innerRef]);
+  }, [slideTo]);
 
@@ -56,3 +58,3 @@ const gridProps = {
     direction,
-    itemCount,
+    itemCount: gridItemCount,
     renderItem,
@@ -63,8 +65,7 @@ };
 
-  let element = playerProps.children;
+  const element =
+    typeof children === 'function'
+      ? children({ activeIndex, itemCount })
+      : children;
 
-  if (typeof element === 'function') {
-    element = element({ activeIndex, itemCount });
-  }
-
   return (
@@ -74,3 +75,3 @@ <Fragment>
         {player => {
-          if (player !== state.player) {
+          if (state.player !== player) {
             dispatch({ type: 'setPlayer', value: player });
@@ -77,0 +78,0 @@ }

src/carousel/carouselReducer.js

 import { initialState as playerInitialState } from './playerReducer';
 
 export const initialState = {
-  pageIndex: 0,
+  activeIndex: 0,
+  itemCount: 0,
   scrollTo: null,
@@ -23,6 +24,22 @@ player: playerInitialState,
 function setPlayerReducer(state, action) {
-  let nextState = { ...state, player: action.value };
-  nextState = calculatePageIndexReducer(nextState);
+  const player = action.value;
 
-  return nextState;
+  const { loopWidth } = player;
+  const [direction] = player.options;
+  const { contentOffset, size, contentSize } = player.pad;
+  const itemCount = calculateItemCount(size, loopWidth, direction);
+  let activeIndex = 0;
+
+  if (itemCount > 0) {
+    const pageIndex = calculatePageIndex(
+      contentOffset,
+      size,
+      contentSize,
+      direction
+    );
+
+    activeIndex = pageIndex % itemCount;
+  }
+
+  return { ...state, player, itemCount, activeIndex };
 }
@@ -38,7 +55,7 @@
 function slideToReducer(state, action) {
-  const { pageIndex } = state;
-  const [direction, loop] = state.player.options;
+  const { activeIndex, itemCount } = state;
+  const [direction] = state.player.options;
   const { contentOffset, size } = state.player.pad;
-  const { activeIndex, itemCount, animated } = action;
-  let index = action.index;
+  const { animated } = action;
+  let { index } = action;
 
@@ -48,33 +65,19 @@ if (itemCount === 0) {
   }
+
   if (typeof index === 'function') {
     index = index({ activeIndex, itemCount });
   }
-  if (loop) {
-    index += itemCount * Math.round((pageIndex - index) / itemCount);
-  }
 
-  if (index === pageIndex) {
+  if (index === activeIndex) {
     return state;
   }
-  const offset = getContentOffsetAtIndex(index, contentOffset, size, direction);
 
-  return { ...state, scrollTo: { offset, animated } };
-}
-
-function calculatePageIndexReducer(state) {
-  const { pageIndex } = state;
-  const [direction] = state.player.options;
-  const { contentOffset, size, contentSize } = state.player.pad;
-  const nextPageIndex = calculatePageIndex(
+  const offset = getContentOffsetForIndexOffset(
+    index - activeIndex,
     contentOffset,
     size,
-    contentSize,
     direction
   );
 
-  if (nextPageIndex !== pageIndex) {
-    return { ...state, pageIndex: nextPageIndex };
-  }
-
-  return state;
+  return { ...state, scrollTo: { offset, animated } };
 }
@@ -97,3 +100,15 @@
 
-function getContentOffsetAtIndex(index, offset, size, direction) {
+function calculateItemCount(size, loopWidth, direction) {
+  const width = direction === 'y' ? 'height' : 'width';
+  const sizeWidth = size[width];
+  let count = 0;
+
+  if (sizeWidth > 0) {
+    count = Math.ceil(loopWidth / sizeWidth);
+  }
+
+  return count;
+}
+
+function getContentOffsetForIndexOffset(indexOffset, offset, size, direction) {
   const [width, x, y] =
@@ -103,3 +118,3 @@ direction === 'y' ? ['height', 'y', 'x'] : ['width', 'x', 'y'];
 
-  return { [x]: -index * sizeWidth, [y]: offset[y] };
+  return { [x]: offset[x] - indexOffset * sizeWidth, [y]: offset[y] };
 }

src/carousel/Player.js

@@ -16,10 +16,12 @@ import React, { useCallback, useMemo, useReducer, useEffect } from 'react';
 
-function Player({
-  direction,
-  loop,
-  autoplayEnabled,
-  autoplayInterval,
-  ...padProps
-}) {
-  const { onMouseEnter, onMouseLeave } = padProps;
+function Player(props) {
+  const {
+    direction,
+    loop,
+    autoplayEnabled,
+    autoplayInterval,
+    children,
+    ...padProps
+  } = props;
+  const { scrollTo: padScrollTo, onMouseEnter, onMouseLeave } = padProps;
 
@@ -30,29 +32,2 @@ const [state, dispatch] = useReducer(reducer, initialState);
 
-  useEffect(() => {
-    if (!autoplayEnabled || drag || deceleration || mouseEntered) {
-      return;
-    }
-
-    let autoplayTimer = setTimeout(() => {
-      autoplayTimer = undefined;
-      dispatch({ type: 'playNext' });
-    }, autoplayInterval);
-
-    return () => {
-      if (autoplayTimer) {
-        clearTimeout(autoplayTimer);
-      }
-    };
-  }, [autoplayEnabled, mouseEntered, drag, deceleration, autoplayInterval]);
-
-  useMemo(() => {
-    if (padProps.scrollTo) {
-      dispatch({ type: 'setScrollTo', value: padProps.scrollTo });
-    }
-  }, [padProps.scrollTo]);
-
-  useMemo(() => {
-    dispatch({ type: 'setOptions', value: [direction, loop] });
-  }, [loop, direction]);
-
   const onPadMouseEnter = useCallback(
@@ -80,2 +55,26 @@ evt => {
 
+  useEffect(() => {
+    if (!autoplayEnabled || mouseEntered || drag || deceleration) {
+      return;
+    }
+
+    const autoplayTimer = setTimeout(() => {
+      dispatch({ type: 'playNext' });
+    }, autoplayInterval);
+
+    return () => {
+      clearTimeout(autoplayTimer);
+    };
+  }, [autoplayEnabled, autoplayInterval, mouseEntered, drag, deceleration]);
+
+  useMemo(() => {
+    dispatch({ type: 'setOptions', value: [direction, loop] });
+  }, [loop, direction]);
+
+  useMemo(() => {
+    if (padScrollTo) {
+      dispatch({ type: 'setScrollTo', value: padScrollTo });
+    }
+  }, [padScrollTo]);
+
   if (direction === 'x') {
@@ -97,12 +96,9 @@ padProps.alwaysBounceY = false;
       {pad => {
-        if (pad !== state.pad) {
+        if (state.pad !== pad) {
           dispatch({ type: 'setPad', value: pad });
         }
 
-        let element = padProps.children;
+        const element =
+          typeof children === 'function' ? children(state) : children;
 
-        if (typeof element === 'function') {
-          element = element(state);
-        }
-
         return (
@@ -109,0 +105,0 @@ <ListContent

src/GeneralContent.js

@@ -9,3 +9,3 @@ import React, { useRef } from 'react';
 function GeneralContent(props) {
-  const { width, height } = props;
+  const { width, height, children } = props;
   const itemRef = useRef(null);
@@ -33,9 +33,3 @@
 
-        let element = props.children;
-
-        if (typeof element === 'function') {
-          element = element(size, apis);
-        }
-
-        return element;
+        return typeof children === 'function' ? children(size, apis) : children;
       }}
@@ -42,0 +36,0 @@ </ItemContent>

src/GridContent.js

@@ -28,14 +28,16 @@ import React, {
 
-function GridContent({
-  width,
-  height,
-  direction,
-  rowSpacing,
-  columnSpacing,
-  itemCount,
-  itemWidth,
-  itemHeight,
-  renderItem,
-  ...props
-}) {
+function GridContent(props) {
+  const {
+    width,
+    height,
+    direction,
+    rowSpacing,
+    columnSpacing,
+    itemCount,
+    itemWidth,
+    itemHeight,
+    renderItem,
+    children,
+    ...divProps
+  } = props;
   const layout = useMemo(
@@ -67,15 +69,6 @@ () =>
 
-  const { size, count, layoutList } = layout;
+  const { size, layoutList } = layout;
   const prevLayout = prevLayoutRef.current;
 
   const resizeContent = useCallback(() => {}, []);
-  const getItemIndex = useCallback(
-    ({ rowIndex, columnIndex }) =>
-      calculateItemIndex(
-        { row: rowIndex, column: columnIndex },
-        count,
-        direction
-      ),
-    [direction, count]
-  );
 
@@ -85,5 +78,4 @@ useIsomorphicLayoutEffect(() => {
   }, []);
-
   useIsomorphicLayoutEffect(() => {
-    if (!isEqualToSize(size, prevLayout.size)) {
+    if (!isEqualToSize(prevLayout.size, size)) {
       context.resizeContent(size);
@@ -93,7 +85,9 @@ }
 
-  function buildItem(layoutAttrs) {
-    const { itemIndex, rect, visibleRect, needsRender, Item } = layoutAttrs;
-    let element = renderItem(layoutAttrs);
+  function buildItem(attrs) {
+    const { rect, itemIndex, visibleRect, needsRender, Item } = attrs;
+    let forceRender = false;
+    let element = renderItem(attrs);
 
-    let itemStyle = {
+    let key = String(itemIndex);
+    const itemStyle = {
       position: 'absolute',
@@ -105,11 +99,10 @@ left: rect.x,
     };
-    let forceRender;
-    let key;
 
     if (isValidElement(element) && element.type === Item) {
-      if (element.props.style) {
-        itemStyle = { ...itemStyle, ...element.props.style };
+      if (element.props.forceRender !== undefined) {
+        forceRender = element.props.forceRender;
       }
-      forceRender = element.props.forceRender;
-      key = element.key;
+      if (element.key) {
+        key = element.key;
+      }
 
@@ -119,6 +112,3 @@ element = element.props.children;
 
-    if (!key) {
-      key = '' + itemIndex;
-    }
-    if (!(forceRender || needsRender)) {
+    if (!needsRender && !forceRender) {
       return null;
@@ -129,9 +119,6 @@ }
       if (element.props.style) {
-        itemStyle = { ...itemStyle, ...element.props.style };
+        Object.assign(itemStyle, element.props.style);
       }
 
-      element = cloneElement(element, {
-        style: itemStyle,
-        ref: element.ref,
-      });
+      element = cloneElement(element, { style: itemStyle, ref: element.ref });
     } else {
@@ -158,33 +145,23 @@ element = <div style={itemStyle}>{element}</div>;
 
-  props.style = { ...elemStyle, ...props.style };
+  if (divProps.style) {
+    Object.assign(elemStyle, divProps.style);
+  }
+  divProps.style = elemStyle;
 
-  const items = [];
-
-  for (let itemIndex = 0; itemIndex < layoutList.length; itemIndex++) {
-    const attrs = layoutList[itemIndex];
-    const layoutAttrs = {
+  const items = layoutList.map(attrs =>
+    buildItem({
       ...attrs,
-      itemIndex,
       visibleRect: getItemVisibleRect(attrs.rect, context.visibleRect),
       needsRender: needsRender(attrs.rect, context.visibleRect),
       Item,
-    };
+    })
+  );
 
-    items.push(buildItem(layoutAttrs));
+  if (typeof children === 'function') {
+    children(layout);
   }
 
-  if (typeof props.children === 'function') {
-    props.children(layout, { getItemIndex });
-  }
-
-  return <div {...props}>{items}</div>;
+  return <div {...divProps}>{items}</div>;
 }
 
-function calculateItemIndex(index, count, direction) {
-  const [row, column] =
-    direction === 'x' ? ['column', 'row'] : ['row', 'column'];
-
-  return index[column] + index[row] * count[column];
-}
-
 function calculateLayout(props) {
@@ -272,2 +249,3 @@ const {
         [column + 'Index']: columnIndex,
+        itemIndex,
       });
@@ -274,0 +252,0 @@ }

src/ItemContent.js

@@ -19,3 +19,4 @@ import React, {
 
-function ItemContent({ width, height, ...props }) {
+function ItemContent(props) {
+  const { width, height, children, ...divProps } = props;
   const [size, setSize] = useState(null);
@@ -36,6 +37,4 @@ const prevSizeRef = usePrevRef(size);
 
-  useIsomorphicLayoutEffect(() => {}, []);
-
   useIsomorphicLayoutEffect(() => {
-    if (!isEqualToSize(size, prevSize)) {
+    if (!isEqualToSize(prevSize, size)) {
       if (size) {
@@ -45,2 +44,3 @@ context.resizeContent(size);
     }
+
     if (!size) {
@@ -52,6 +52,8 @@ calculateSize();
   useMemo(() => {
-    const nextSize =
-      typeof width === 'number' && typeof height === 'number'
-        ? { width, height }
-        : null;
+    let nextSize = null;
+
+    if (typeof width === 'number' && typeof height === 'number') {
+      nextSize = { width, height };
+    }
+
     setSize(nextSize);
@@ -74,13 +76,15 @@ }, [width, height]);
 
-  props.style = { ...elemStyle, ...props.style };
+  if (divProps.style) {
+    Object.assign(elemStyle, divProps.style);
+  }
+  divProps.style = elemStyle;
 
-  let element = props.children;
+  const element =
+    typeof children === 'function'
+      ? children(size, { getResizeNode, calculateSize })
+      : children;
 
-  if (typeof element === 'function') {
-    element = element(size, { getResizeNode, calculateSize });
-  }
-
   return (
     <PadContext.Provider value={{ ...context, resizeContent }}>
-      <div {...props}>
+      <div {...divProps}>
         <div ref={resizeRef} style={resizeStyle}>
@@ -87,0 +91,0 @@ {element}

src/ListContent.js

@@ -29,13 +29,15 @@ import React, {
 
-function ListContent({
-  width,
-  height,
-  direction,
-  spacing,
-  itemCount,
-  estimatedItemWidth,
-  estimatedItemHeight,
-  renderItem,
-  ...props
-}) {
+function ListContent(props) {
+  const {
+    width,
+    height,
+    direction,
+    spacing,
+    itemCount,
+    estimatedItemWidth,
+    estimatedItemHeight,
+    renderItem,
+    children,
+    ...divProps
+  } = props;
   const [itemHashList, setItemHashList] = useState([]);
@@ -78,8 +80,10 @@ const [itemSizeDict, setItemSizeDict] = useState({});
   const resizeContent = useCallback(
-    itemHash => itemSize =>
-      setItemSizeDict(itemSizeDict => {
-        return isEqualToSize(itemSize, itemSizeDict[itemHash])
+    itemHash => itemSize => {
+      setItemSizeDict(itemSizeDict =>
+        isEqualToSize(itemSizeDict[itemHash], itemSize)
           ? itemSizeDict
-          : { ...itemSizeDict, [itemHash]: itemSize };
-      }),
+          : { ...itemSizeDict, [itemHash]: itemSize }
+      );
+    },
+
     []
@@ -91,5 +95,4 @@ );
   }, []);
-
   useIsomorphicLayoutEffect(() => {
-    if (!isEqualToSize(size, prevLayout.size)) {
+    if (!isEqualToSize(prevLayout.size, size)) {
       context.resizeContent(size);
@@ -99,7 +102,10 @@ }
 
-  function buildItem(layoutAttrs) {
-    const { itemIndex, rect, visibleRect, needsRender, Item } = layoutAttrs;
-    let element = renderItem(layoutAttrs);
+  function buildItem(attrs) {
+    const { rect, itemIndex, visibleRect, needsRender, Item } = attrs;
+    let forceRender = false;
+    let element = renderItem(attrs);
 
-    let itemStyle = {
+    let key = String(itemIndex);
+    let hash;
+    const itemStyle = {
       position: 'absolute',
@@ -111,13 +117,13 @@ left: rect.x,
     };
-    let forceRender;
-    let hash;
-    let key;
 
     if (isValidElement(element) && element.type === Item) {
-      if (element.props.style) {
-        itemStyle = { ...itemStyle, ...element.props.style };
+      if (element.props.forceRender !== undefined) {
+        forceRender = element.props.forceRender;
       }
-      forceRender = element.props.forceRender;
-      hash = element.props.hash;
-      key = element.key;
+      if (element.key) {
+        key = element.key;
+      }
+      if (element.props.hash !== undefined) {
+        hash = element.props.hash;
+      }
 
@@ -127,5 +133,2 @@ element = element.props.children;
 
-    if (!key) {
-      key = '' + itemIndex;
-    }
     if (hash === undefined) {
@@ -135,7 +138,7 @@ hash = key;
 
-    let shouldRender = forceRender || needsRender;
     const itemSize = itemSizeDict[hash];
+    let skipRender = !needsRender && !forceRender;
 
     if (!itemSize && nextItemHashList.indexOf(hash) !== -1) {
-      shouldRender = false;
+      skipRender = true;
     }
@@ -145,3 +148,3 @@
 
-    if (!shouldRender) {
+    if (skipRender) {
       return null;
@@ -166,3 +169,3 @@ }
       if (element.props.style) {
-        itemStyle = { ...itemStyle, ...element.props.style };
+        Object.assign(itemStyle, element.props.style);
       }
@@ -177,5 +180,5 @@ if (typeof element.props.width === 'number') {
       element = cloneElement(element, {
+        ...sizeProps,
+        style: itemStyle,
         ref: element.ref,
-        style: itemStyle,
-        ...sizeProps,
       });
@@ -207,27 +210,25 @@ } else {
 
-  props.style = {
-    ...elemStyle,
-    ...props.style,
-  };
+  if (divProps.style) {
+    Object.assign(elemStyle, divProps.style);
+  }
+  divProps.style = elemStyle;
 
-  const items = [];
-
-  for (let itemIndex = 0; itemIndex < layoutList.length; itemIndex++) {
-    const attrs = layoutList[itemIndex];
-    const layoutAttrs = {
+  const items = layoutList.map(attrs =>
+    buildItem({
       ...attrs,
-      itemIndex,
       visibleRect: getItemVisibleRect(attrs.rect, context.visibleRect),
       needsRender: needsRender(attrs.rect, context.visibleRect),
       Item,
-    };
+    })
+  );
 
-    items.push(buildItem(layoutAttrs));
+  if (itemHashList.join() !== nextItemHashList.join()) {
+    setItemHashList(nextItemHashList);
   }
 
-  if (nextItemHashList.join() !== itemHashList.join()) {
-    setItemHashList(nextItemHashList);
+  if (typeof children === 'function') {
+    children(layout);
   }
 
-  return <div {...props}>{items}</div>;
+  return <div {...divProps}>{items}</div>;
 }
@@ -277,2 +278,3 @@
       },
+      itemIndex,
     });
@@ -279,0 +281,0 @@

src/Pad.js

 import React, {
   isValidElement,
   cloneElement,
-  useRef,
   useMemo,
@@ -16,3 +15,2 @@ useCallback,
 import StyleSheet from './utils/StyleSheet';
-import { shouldDragStart } from './utils/motion';
 import {
@@ -41,23 +39,24 @@ requestAnimationFrame,
 
-function Pad({
-  width,
-  height,
-  pagingEnabled,
-  directionalLockEnabled,
-  alwaysBounceX,
-  alwaysBounceY,
-  scrollTo,
-  scrollToRect,
-  onScroll,
-  onDragStart,
-  onDragEnd,
-  onDecelerationStart,
-  onDecelerationEnd,
-  onContentResize,
-  ...pannableProps
-}) {
+function Pad(props) {
+  const {
+    width,
+    height,
+    pagingEnabled,
+    directionalLockEnabled,
+    alwaysBounceX,
+    alwaysBounceY,
+    scrollTo,
+    scrollToRect,
+    onScroll,
+    onDragStart,
+    onDragEnd,
+    onDecelerationStart,
+    onDecelerationEnd,
+    onContentResize,
+    children,
+    ...pannableProps
+  } = props;
   const { enabled, shouldStart } = pannableProps;
   const [state, dispatch] = useReducer(reducer, initialState);
   const prevStateRef = usePrevRef(state);
-  const innerRef = useRef({});
 
@@ -73,17 +72,9 @@ const {
   const prevState = prevStateRef.current;
-  innerRef.current.state = state;
 
-  const resizeContent = useCallback(
-    contentSize => dispatch({ type: 'setContentSize', value: contentSize }),
-    []
-  );
+  const resizeContent = useCallback(contentSize => {
+    dispatch({ type: 'setContentSize', value: contentSize });
+  }, []);
 
   const shouldPannableStart = useCallback(
     evt => {
-      const {
-        size,
-        contentSize,
-        options: [, directionalLockEnabled],
-      } = innerRef.current.state;
-
       if (
@@ -98,7 +89,7 @@ directionalLockEnabled &&
     },
-    [shouldStart]
+    [shouldStart, directionalLockEnabled, size, contentSize]
   );
 
   useIsomorphicLayoutEffect(() => {
-    if (state.pannable.translation !== prevState.pannable.translation) {
+    if (prevState.pannable.translation !== state.pannable.translation) {
       if (state.pannable.translation) {
@@ -128,9 +119,9 @@ if (prevState.pannable.translation) {
 
-    if (contentSize !== prevState.contentSize) {
+    if (prevState.contentSize !== contentSize) {
       onContentResize(contentSize);
     }
-    if (contentOffset !== prevState.contentOffset) {
+    if (prevState.contentOffset !== contentOffset) {
       onScroll(output);
     }
-    if (drag !== prevState.drag) {
+    if (prevState.drag !== drag) {
       if (!prevState.drag) {
@@ -142,3 +133,3 @@ onDragStart(output);
     }
-    if (deceleration !== prevState.deceleration) {
+    if (prevState.deceleration !== deceleration) {
       if (!prevState.deceleration) {
@@ -157,4 +148,3 @@ onDecelerationStart(output);
 
-    let timer = requestAnimationFrame(() => {
-      timer = undefined;
+    const timer = requestAnimationFrame(() => {
       dispatch({ type: 'decelerate', now: new Date().getTime() });
@@ -164,5 +154,3 @@ });
     return () => {
-      if (timer) {
-        cancelAnimationFrame(timer);
-      }
+      cancelAnimationFrame(timer);
     };
@@ -189,3 +177,3 @@ }, [state]);
     if (scrollTo) {
-      dispatch({ type: 'setContentOffset', ...scrollTo });
+      dispatch({ type: 'scrollTo', ...scrollTo });
     }
@@ -209,4 +197,8 @@ }, [scrollTo]);
 
-  pannableProps.style = { ...elemStyle, ...pannableProps.style };
+  if (pannableProps.style) {
+    Object.assign(elemStyle, pannableProps.style);
+  }
 
+  pannableProps.style = elemStyle;
+
   const visibleRect = {
@@ -223,7 +215,7 @@ x: -contentOffset.x,
         {pannable => {
-          if (pannable !== state.pannable) {
+          if (state.pannable !== pannable) {
             dispatch({ type: 'setPannable', value: pannable });
           }
 
-          let contentStyle = StyleSheet.create({
+          const contentStyle = StyleSheet.create({
             position: 'relative',
@@ -236,11 +228,8 @@ width: contentSize.width,
 
-          let element = pannableProps.children;
+          let element =
+            typeof children === 'function' ? children(state) : children;
 
-          if (typeof element === 'function') {
-            element = element(state);
-          }
-
           if (isValidElement(element) && element.type.PadContent) {
             if (element.props.style) {
-              contentStyle = { ...contentStyle, ...element.props.style };
+              Object.assign(contentStyle, element.props.style);
             }
@@ -268,1 +257,8 @@
 export default Pad;
+
+function shouldDragStart(velocity, size, cSize) {
+  const height =
+    Math.abs(velocity.y) < Math.abs(velocity.x) ? 'width' : 'height';
+
+  return size[height] < cSize[height];
+}

src/padReducer.js

@@ -9,3 +9,2 @@ import { initialState as pannableInitialState } from './pannableReducer';
   calculateDeceleration,
-  calculateRectOffset,
 } from './utils/motion';
@@ -52,4 +51,4 @@
       return decelerateReducer(state, action);
-    case 'setContentOffset':
-      return setContentOffsetReducer(state, action);
+    case 'scrollTo':
+      return scrollToReducer(state, action);
     case 'scrollToRect':
@@ -347,3 +346,3 @@ return scrollToRectReducer(state, action);
 
-function setContentOffsetReducer(state, action) {
+function scrollToReducer(state, action) {
   const {
@@ -357,4 +356,9 @@ size,
   } = state;
-  const { offset, animated } = action;
+  const { point, animated } = action;
+  let { offset = { x: 0, y: 0 } } = action;
 
+  if (point) {
+    offset = { x: -point.x, y: -point.y };
+  }
+
   if (drag || !animated) {
@@ -414,12 +418,6 @@ if (offset.x === contentOffset.x && offset.y === contentOffset.y) {
   const { rect, align, animated } = action;
-  const visibleRect = {
-    x: -contentOffset.x,
-    y: -contentOffset.y,
-    width: size.width,
-    height: size.height,
-  };
-  const offset = calculateRectOffset(rect, visibleRect, align);
+  const offset = getContentOffsetForRect(rect, align, contentOffset, size);
 
-  return setContentOffsetReducer(state, {
-    type: 'setContentOffset',
+  return scrollToReducer(state, {
+    type: 'scrollTo',
     offset,
@@ -429,1 +427,43 @@ animated,
 }
+
+function getContentOffsetForRect(rect, align, cOffset, size, name) {
+  if (name) {
+    const [x, width] = name === 'y' ? ['y', 'height'] : ['x', 'width'];
+
+    let offsetX = -rect[x];
+    const delta = size[width] - rect[width];
+
+    if (align[x] === 'auto') {
+      const direction = delta < 0 ? -1 : 1;
+      const dOffsetX = cOffset[x] - offsetX;
+
+      offsetX +=
+        direction *
+        Math.max(0, Math.min(direction * dOffsetX, direction * delta));
+    } else {
+      if (align[x] === 'start') {
+        align[x] = 0;
+      } else if (align[x] === 'center') {
+        align[x] = 0.5;
+      } else if (align[x] === 'end') {
+        align[x] = 1;
+      }
+      if (typeof align[x] !== 'number' || isNaN(align[x])) {
+        align[x] = 0.5;
+      }
+
+      offsetX += align[x] * delta;
+    }
+
+    return offsetX;
+  }
+
+  if (typeof align !== 'object') {
+    align = { x: align, y: align };
+  }
+
+  return {
+    x: getContentOffsetForRect(rect, align, cOffset, size, 'x'),
+    y: getContentOffsetForRect(rect, align, cOffset, size, 'y'),
+  };
+}

src/Pannable.js

@@ -17,11 +17,13 @@ import React, { useRef, useMemo, useReducer } from 'react';
 
-function Pannable({
-  enabled,
-  shouldStart,
-  onStart,
-  onMove,
-  onEnd,
-  onCancel,
-  ...props
-}) {
+function Pannable(props) {
+  const {
+    enabled,
+    shouldStart,
+    onStart,
+    onMove,
+    onEnd,
+    onCancel,
+    children,
+    ...divProps
+  } = props;
   const [state, dispatch] = useReducer(reducer, initialState);
@@ -157,3 +159,3 @@ const prevStateRef = usePrevRef(state);
 
-    if (translation !== prevState.translation) {
+    if (prevState.translation !== translation) {
       if (translation) {
@@ -184,17 +186,25 @@ if (prevState.translation) {
   if (translation) {
-    elemStyle.touchAction = 'none';
-    elemStyle.pointerEvents = 'none';
-    elemStyle.userSelect = 'none';
+    Object.assign(
+      elemStyle,
+      StyleSheet.create({
+        touchAction: 'none',
+        pointerEvents: 'none',
+        userSelect: 'none',
+      })
+    );
   }
 
-  props.style = { ...StyleSheet.create(elemStyle), ...props.style };
-  props.ref = elemRef;
+  if (divProps.style) {
+    Object.assign(elemStyle, divProps.style);
+  }
 
-  let element = props.children;
+  divProps.style = elemStyle;
 
-  if (typeof element === 'function') {
-    element = element(state);
-  }
+  const element = typeof children === 'function' ? children(state) : children;
 
-  return <div {...props}>{element}</div>;
+  return (
+    <div {...divProps} ref={elemRef}>
+      {element}
+    </div>
+  );
 }
@@ -201,0 +211,0 @@

src/utils/motion.js

@@ -175,9 +175,2 @@ function getAcc(rate, { x, y }) {
 
-export function shouldDragStart(velocity, size, cSize) {
-  const height =
-    Math.abs(velocity.y) < Math.abs(velocity.x) ? 'width' : 'height';
-
-  return size[height] < cSize[height];
-}
-
 export function calculateDeceleration(deceleration, moveTime, name) {
@@ -268,46 +261,1 @@ if (name) {
 }
-
-export function calculateRectOffset(rect, vRect, align, name) {
-  if (name) {
-    const [x, width] = name === 'y' ? ['y', 'height'] : ['x', 'width'];
-
-    let offsetX = -rect[x];
-    const maxOffsetX = vRect[width] - rect[width];
-
-    if (align[x] === 'auto') {
-      const direction = maxOffsetX < 0 ? -1 : 1;
-      const vOffsetX = -vRect[x];
-
-      offsetX +=
-        direction *
-        Math.max(
-          0,
-          Math.min(direction * (vOffsetX - offsetX), direction * maxOffsetX)
-        );
-    } else {
-      if (align[x] === 'start') {
-        align[x] = 0;
-      } else if (align[x] === 'center') {
-        align[x] = 0.5;
-      } else if (align[x] === 'end') {
-        align[x] = 1;
-      }
-      if (typeof align[x] !== 'number' || isNaN(align[x])) {
-        align[x] = 0.5;
-      }
-
-      offsetX += align[x] * maxOffsetX;
-    }
-
-    return offsetX;
-  }
-
-  if (typeof align !== 'object') {
-    align = { x: align, y: align };
-  }
-
-  return {
-    x: calculateRectOffset(rect, vRect, align, 'x'),
-    y: calculateRectOffset(rect, vRect, align, 'y'),
-  };
-}

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

Worsened metrics

Total package byte prevSize

410579

decreased by-0.83%

Lines of code

10972

decreased by-0.7%

No dependency changes