react-custom-scrollbars - npm Package Compare versions

Comparing version 4.0.2 to 4.1.0

dist/react-custom-scrollbars.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.ReactCustomScrollbars=t(require("react")):e.ReactCustomScrollbars=t(e.React)}(this,function(e){return function(e){function t(n){if(r[n])return r[n].exports;var o=r[n]={exports:{},id:n,loaded:!1};return e[n].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var r={};return t.m=e,t.c=r,t.p="",t(0)}([function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0}),t.Scrollbars=void 0;var o=r(5),i=n(o);t["default"]=i["default"],t.Scrollbars=i["default"]},function(e,t,r){function n(e,t,r){var n=s[t];if("undefined"==typeof n&&(n=i(t)),n){if(void 0===r)return e.style[n];e.style[n]=c(n,r)}}function o(e,t){for(var r in t)t.hasOwnProperty(r)&&n(e,r,t[r])}function i(e){var t=u(e),r=l(t);return s[t]=s[e]=s[r]=r,r}function a(){2===arguments.length?"string"==typeof arguments[1]?arguments[0].style.cssText=arguments[1]:o(arguments[0],arguments[1]):n(arguments[0],arguments[1],arguments[2])}var l=r(13),u=r(16),s={"float":"cssFloat"},c=r(3);e.exports=a,e.exports.set=a,e.exports.get=function(e,t){return Array.isArray(t)?t.reduce(function(t,r){return t[r]=n(e,r||""),t},{}):n(e,t||"")}},function(t,r){t.exports=e},function(e,t){var r={animationIterationCount:!0,boxFlex:!0,boxFlexGroup:!0,boxOrdinalGroup:!0,columnCount:!0,flex:!0,flexGrow:!0,flexPositive:!0,flexShrink:!0,flexNegative:!0,flexOrder:!0,gridRow:!0,gridColumn:!0,fontWeight:!0,lineClamp:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,tabSize:!0,widows:!0,zIndex:!0,zoom:!0,fillOpacity:!0,stopOpacity:!0,strokeDashoffset:!0,strokeOpacity:!0,strokeWidth:!0};e.exports=function(e,t){return"number"!=typeof t||r[e]?t:t+"px"}},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}function o(e,t){var r={};for(var n in e)t.indexOf(n)>=0||Object.prototype.hasOwnProperty.call(e,n)&&(r[n]=e[n]);return r}function i(e){return h["default"].createElement("div",e)}function a(e){var t=e.style,r=o(e,["style"]),n=c({},t,{right:2,bottom:2,left:2,borderRadius:3});return h["default"].createElement("div",c({style:n},r))}function l(e){var t=e.style,r=o(e,["style"]),n=c({},t,{right:2,bottom:2,top:2,borderRadius:3});return h["default"].createElement("div",c({style:n},r))}function u(e){var t=e.style,r=o(e,["style"]),n=c({},t,{cursor:"pointer",borderRadius:"inherit",backgroundColor:"rgba(0,0,0,.2)"});return h["default"].createElement("div",c({style:n},r))}function s(e){var t=e.style,r=o(e,["style"]),n=c({},t,{cursor:"pointer",borderRadius:"inherit",backgroundColor:"rgba(0,0,0,.2)"});return h["default"].createElement("div",c({style:n},r))}Object.defineProperty(t,"__esModule",{value:!0});var c=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e};t.renderViewDefault=i,t.renderTrackHorizontalDefault=a,t.renderTrackVerticalDefault=l,t.renderThumbHorizontalDefault=u,t.renderThumbVerticalDefault=s;var d=r(2),h=n(d)},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}function o(e,t){var r={};for(var n in e)t.indexOf(n)>=0||Object.prototype.hasOwnProperty.call(e,n)&&(r[n]=e[n]);return r}Object.defineProperty(t,"__esModule",{value:!0});var i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},a=r(15),l=n(a),u=r(1),s=n(u),c=r(2),d=r(10),h=n(d),f=r(9),p=n(f),v=r(11),m=n(v),g=r(8),T=n(g),y=r(7),b=n(y),w=r(6),S=r(4);t["default"]=(0,c.createClass)({displayName:"Scrollbars",propTypes:{onScroll:c.PropTypes.func,onScrollFrame:c.PropTypes.func,onScrollStart:c.PropTypes.func,onScrollStop:c.PropTypes.func,onUpdate:c.PropTypes.func,renderView:c.PropTypes.func,renderTrackHorizontal:c.PropTypes.func,renderTrackVertical:c.PropTypes.func,renderThumbHorizontal:c.PropTypes.func,renderThumbVertical:c.PropTypes.func,tagName:c.PropTypes.string,thumbSize:c.PropTypes.number,thumbMinSize:c.PropTypes.number,hideTracksWhenNotNeeded:c.PropTypes.bool,autoHide:c.PropTypes.bool,autoHideTimeout:c.PropTypes.number,autoHideDuration:c.PropTypes.number,autoHeight:c.PropTypes.bool,autoHeightMin:c.PropTypes.oneOfType([c.PropTypes.number,c.PropTypes.string]),autoHeightMax:c.PropTypes.oneOfType([c.PropTypes.number,c.PropTypes.string]),universal:c.PropTypes.bool,style:c.PropTypes.object,children:c.PropTypes.node},getDefaultProps:function(){return{renderView:S.renderViewDefault,renderTrackHorizontal:S.renderTrackHorizontalDefault,renderTrackVertical:S.renderTrackVerticalDefault,renderThumbHorizontal:S.renderThumbHorizontalDefault,renderThumbVertical:S.renderThumbVerticalDefault,tagName:"div",thumbMinSize:30,hideTracksWhenNotNeeded:!1,autoHide:!1,autoHideTimeout:1e3,autoHideDuration:200,autoHeight:!1,autoHeightMin:0,autoHeightMax:200,universal:!1}},getInitialState:function(){return{didMountUniversal:!1}},componentDidMount:function(){this.addListeners(),this.update(),this.componentDidMountUniversal()},componentDidMountUniversal:function(){var e=this.props.universal;e&&this.setState({didMountUniversal:!0})},componentDidUpdate:function(){this.update()},componentWillUnmount:function(){this.removeListeners(),(0,a.cancel)(this.requestFrame),clearTimeout(this.hideTracksTimeout),clearInterval(this.detectScrollingInterval)},getScrollLeft:function(){var e=this.refs.view;return e.scrollLeft},getScrollTop:function(){var e=this.refs.view;return e.scrollTop},getScrollWidth:function(){var e=this.refs.view;return e.scrollWidth},getScrollHeight:function(){var e=this.refs.view;return e.scrollHeight},getClientWidth:function(){var e=this.refs.view;return e.clientWidth},getClientHeight:function(){var e=this.refs.view;return e.clientHeight},getValues:function(){var e=this.refs.view,t=e.scrollLeft,r=e.scrollTop,n=e.scrollWidth,o=e.scrollHeight,i=e.clientWidth,a=e.clientHeight;return{left:t/(n-i)||0,top:r/(o-a)||0,scrollLeft:t,scrollTop:r,scrollWidth:n,scrollHeight:o,clientWidth:i,clientHeight:a}},getThumbHorizontalWidth:function(){var e=this.props,t=e.thumbSize,r=e.thumbMinSize,n=this.refs,o=n.view,i=n.trackHorizontal,a=o.scrollWidth,l=o.clientWidth,u=(0,T["default"])(i),s=Math.ceil(l/a*u);return u===s?0:t?t:Math.max(s,r)},getThumbVerticalHeight:function(){var e=this.props,t=e.thumbSize,r=e.thumbMinSize,n=this.refs,o=n.view,i=n.trackVertical,a=o.scrollHeight,l=o.clientHeight,u=(0,b["default"])(i),s=Math.ceil(l/a*u);return u===s?0:t?t:Math.max(s,r)},getScrollLeftForOffset:function(e){var t=this.refs,r=t.view,n=t.trackHorizontal,o=r.scrollWidth,i=r.clientWidth,a=(0,T["default"])(n),l=this.getThumbHorizontalWidth();return e/(a-l)*(o-i)},getScrollTopForOffset:function(e){var t=this.refs,r=t.view,n=t.trackVertical,o=r.scrollHeight,i=r.clientHeight,a=(0,b["default"])(n),l=this.getThumbVerticalHeight();return e/(a-l)*(o-i)},scrollLeft:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,t=this.refs.view;t.scrollLeft=e},scrollTop:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,t=this.refs.view;t.scrollTop=e},scrollToLeft:function(){var e=this.refs.view;e.scrollLeft=0},scrollToTop:function(){var e=this.refs.view;e.scrollTop=0},scrollToRight:function(){var e=this.refs.view;e.scrollLeft=e.scrollWidth},scrollToBottom:function(){var e=this.refs.view;e.scrollTop=e.scrollHeight},addListeners:function(){if("undefined"!=typeof document){var e=this.refs,t=e.view,r=e.trackHorizontal,n=e.trackVertical,o=e.thumbHorizontal,i=e.thumbVertical;t.addEventListener("scroll",this.handleScroll),(0,p["default"])()&&(r.addEventListener("mouseenter",this.handleTrackMouseEnter),r.addEventListener("mouseleave",this.handleTrackMouseLeave),r.addEventListener("mousedown",this.handleHorizontalTrackMouseDown),n.addEventListener("mouseenter",this.handleTrackMouseEnter),n.addEventListener("mouseleave",this.handleTrackMouseLeave),n.addEventListener("mousedown",this.handleVerticalTrackMouseDown),o.addEventListener("mousedown",this.handleHorizontalThumbMouseDown),i.addEventListener("mousedown",this.handleVerticalThumbMouseDown),window.addEventListener("resize",this.handleWindowResize))}},removeListeners:function(){if("undefined"!=typeof document){var e=this.refs,t=e.view,r=e.trackHorizontal,n=e.trackVertical,o=e.thumbHorizontal,i=e.thumbVertical;t.removeEventListener("scroll",this.handleScroll),(0,p["default"])()&&(r.removeEventListener("mouseenter",this.handleTrackMouseEnter),r.removeEventListener("mouseleave",this.handleTrackMouseLeave),r.removeEventListener("mousedown",this.handleHorizontalTrackMouseDown),n.removeEventListener("mouseenter",this.handleTrackMouseEnter),n.removeEventListener("mouseleave",this.handleTrackMouseLeave),n.removeEventListener("mousedown",this.handleVerticalTrackMouseDown),o.removeEventListener("mousedown",this.handleHorizontalThumbMouseDown),i.removeEventListener("mousedown",this.handleVerticalThumbMouseDown),window.removeEventListener("resize",this.handleWindowResize),this.teardownDragging())}},handleScroll:function(e){var t=this,r=this.props,n=r.onScroll,o=r.onScrollFrame;n&&n(e),this.update(function(e){var r=e.scrollLeft,n=e.scrollTop;t.viewScrollLeft=r,t.viewScrollTop=n,o&&o(e)}),this.detectScrolling()},handleScrollStart:function(){var e=this.props.onScrollStart;e&&e(),this.handleScrollStartAutoHide()},handleScrollStartAutoHide:function(){var e=this.props.autoHide;e&&this.showTracks()},handleScrollStop:function(){var e=this.props.onScrollStop;e&&e(),this.handleScrollStopAutoHide()},handleScrollStopAutoHide:function(){var e=this.props.autoHide;e&&this.hideTracks()},handleWindowResize:function(){this.update()},handleHorizontalTrackMouseDown:function(e){e.preventDefault();var t=this.refs.view,r=e.target,n=e.clientX,o=r.getBoundingClientRect(),i=o.left,a=this.getThumbHorizontalWidth(),l=Math.abs(i-n)-a/2;t.scrollLeft=this.getScrollLeftForOffset(l)},handleVerticalTrackMouseDown:function(e){e.preventDefault();var t=this.refs.view,r=e.target,n=e.clientY,o=r.getBoundingClientRect(),i=o.top,a=this.getThumbVerticalHeight(),l=Math.abs(i-n)-a/2;t.scrollTop=this.getScrollTopForOffset(l)},handleHorizontalThumbMouseDown:function(e){e.preventDefault(),this.handleDragStart(e);var t=e.target,r=e.clientX,n=t.offsetWidth,o=t.getBoundingClientRect(),i=o.left;this.prevPageX=n-(r-i)},handleVerticalThumbMouseDown:function(e){e.preventDefault(),this.handleDragStart(e);var t=e.target,r=e.clientY,n=t.offsetHeight,o=t.getBoundingClientRect(),i=o.top;this.prevPageY=n-(r-i)},setupDragging:function(){(0,s["default"])(document.body,w.disableSelectStyle),document.addEventListener("mousemove",this.handleDrag),document.addEventListener("mouseup",this.handleDragEnd),document.onselectstart=m["default"]},teardownDragging:function(){(0,s["default"])(document.body,w.disableSelectStyleReset),document.removeEventListener("mousemove",this.handleDrag),document.removeEventListener("mouseup",this.handleDragEnd),document.onselectstart=void 0},handleDragStart:function(e){this.dragging=!0,e.stopImmediatePropagation(),this.setupDragging()},handleDrag:function(e){if(this.prevPageX){var t=e.clientX,r=this.refs,n=r.view,o=r.trackHorizontal,i=o.getBoundingClientRect(),a=i.left,l=this.getThumbHorizontalWidth(),u=l-this.prevPageX,s=-a+t-u;n.scrollLeft=this.getScrollLeftForOffset(s)}if(this.prevPageY){var c=e.clientY,d=this.refs,h=d.view,f=d.trackVertical,p=f.getBoundingClientRect(),v=p.top,m=this.getThumbVerticalHeight(),g=m-this.prevPageY,T=-v+c-g;h.scrollTop=this.getScrollTopForOffset(T)}return!1},handleDragEnd:function(){this.dragging=!1,this.prevPageX=this.prevPageY=0,this.teardownDragging(),this.handleDragEndAutoHide()},handleDragEndAutoHide:function(){var e=this.props.autoHide;e&&this.hideTracks()},handleTrackMouseEnter:function(){this.trackMouseOver=!0,this.handleTrackMouseEnterAutoHide()},handleTrackMouseEnterAutoHide:function(){var e=this.props.autoHide;e&&this.showTracks()},handleTrackMouseLeave:function(){this.trackMouseOver=!1,this.handleTrackMouseLeaveAutoHide()},handleTrackMouseLeaveAutoHide:function(){var e=this.props.autoHide;e&&this.hideTracks()},showTracks:function(){var e=this.refs,t=e.trackHorizontal,r=e.trackVertical;clearTimeout(this.hideTracksTimeout),(0,s["default"])(t,{opacity:1}),(0,s["default"])(r,{opacity:1})},hideTracks:function(){if(!this.dragging&&!this.scrolling&&!this.trackMouseOver){var e=this.props.autoHideTimeout,t=this.refs,r=t.trackHorizontal,n=t.trackVertical;clearTimeout(this.hideTracksTimeout),this.hideTracksTimeout=setTimeout(function(){(0,s["default"])(r,{opacity:0}),(0,s["default"])(n,{opacity:0})},e)}},detectScrolling:function(){var e=this;this.scrolling||(this.scrolling=!0,this.handleScrollStart(),this.detectScrollingInterval=setInterval(function(){e.lastViewScrollLeft===e.viewScrollLeft&&e.lastViewScrollTop===e.viewScrollTop&&(clearInterval(e.detectScrollingInterval),e.scrolling=!1,e.handleScrollStop()),e.lastViewScrollLeft=e.viewScrollLeft,e.lastViewScrollTop=e.viewScrollTop},100))},raf:function(e){var t=this;this.requestFrame&&l["default"].cancel(this.requestFrame),this.requestFrame=(0,l["default"])(function(){t.requestFrame=void 0,e()})},update:function(e){var t=this;this.raf(function(){return t._update(e)})},_update:function(e){var t=this.props,r=t.onUpdate,n=t.hideTracksWhenNotNeeded,o=this.getValues();if((0,p["default"])()){var i=this.refs,a=i.thumbHorizontal,l=i.thumbVertical,u=i.trackHorizontal,c=i.trackVertical,d=o.scrollLeft,h=o.clientWidth,f=o.scrollWidth,v=(0,T["default"])(u),m=this.getThumbHorizontalWidth(),g=d/(f-h)*(v-m),y={width:m,transform:"translateX("+g+"px)"},w=o.scrollTop,S=o.clientHeight,H=o.scrollHeight,k=(0,b["default"])(c),M=this.getThumbVerticalHeight(),D=w/(H-S)*(k-M),L={height:M,transform:"translateY("+D+"px)"};if(n){var z={visibility:f>h?"visible":"hidden"},x={visibility:H>S?"visible":"hidden"};(0,s["default"])(u,z),(0,s["default"])(c,x)}(0,s["default"])(a,y),(0,s["default"])(l,L)}r&&r(o),"function"==typeof e&&e(o)},render:function(){var e=(0,p["default"])(),t=this.props,r=(t.onScroll,t.onScrollFrame,t.onScrollStart,t.onScrollStop,t.onUpdate,t.renderView),n=t.renderTrackHorizontal,a=t.renderTrackVertical,l=t.renderThumbHorizontal,u=t.renderThumbVertical,s=t.tagName,d=(t.hideTracksWhenNotNeeded,t.autoHide),f=(t.autoHideTimeout,t.autoHideDuration),v=(t.thumbSize,t.thumbMinSize,t.universal),m=t.autoHeight,g=t.autoHeightMin,T=t.autoHeightMax,y=t.style,b=t.children,S=o(t,["onScroll","onScrollFrame","onScrollStart","onScrollStop","onUpdate","renderView","renderTrackHorizontal","renderTrackVertical","renderThumbHorizontal","renderThumbVertical","tagName","hideTracksWhenNotNeeded","autoHide","autoHideTimeout","autoHideDuration","thumbSize","thumbMinSize","universal","autoHeight","autoHeightMin","autoHeightMax","style","children"]),H=this.state.didMountUniversal,k=i({},w.containerStyleDefault,m&&i({},w.containerStyleAutoHeight,{minHeight:g,maxHeight:T}),y),M=i({},w.viewStyleDefault,{marginRight:e?-e:0,marginBottom:e?-e:0},m&&i({},w.viewStyleAutoHeight,{minHeight:(0,h["default"])(g)?"calc("+g+" + "+e+"px)":g+e,maxHeight:(0,h["default"])(T)?"calc("+T+" + "+e+"px)":T+e}),m&&v&&!H&&{minHeight:g,maxHeight:T},v&&!H&&w.viewStyleUniversalInitial),D={transition:"opacity "+f+"ms",opacity:0},L=i({},w.trackHorizontalStyleDefault,d&&D,(!e||v&&!H)&&{display:"none"}),z=i({},w.trackVerticalStyleDefault,d&&D,(!e||v&&!H)&&{display:"none"});return(0,c.createElement)(s,i({},S,{style:k,ref:"container"}),[(0,c.cloneElement)(r({style:M}),{key:"view",ref:"view"},b),(0,c.cloneElement)(n({style:L}),{key:"trackHorizontal",ref:"trackHorizontal"},(0,c.cloneElement)(l({style:w.thumbHorizontalStyleDefault}),{ref:"thumbHorizontal"})),(0,c.cloneElement)(a({style:z}),{key:"trackVertical",ref:"trackVertical"},(0,c.cloneElement)(u({style:w.thumbVerticalStyleDefault}),{ref:"thumbVertical"}))])}})},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.containerStyleDefault={position:"relative",overflow:"hidden",width:"100%",height:"100%"},t.containerStyleAutoHeight={height:"auto"},t.viewStyleDefault={position:"absolute",top:0,left:0,right:0,bottom:0,overflow:"scroll",WebkitOverflowScrolling:"touch"},t.viewStyleAutoHeight={position:"relative",top:void 0,left:void 0,right:void 0,bottom:void 0},t.viewStyleUniversalInitial={overflow:"hidden",marginRight:0,marginBottom:0},t.trackHorizontalStyleDefault={position:"absolute",height:6},t.trackVerticalStyleDefault={position:"absolute",width:6},t.thumbHorizontalStyleDefault={position:"relative",display:"block",height:"100%"},t.thumbVerticalStyleDefault={position:"relative",display:"block",width:"100%"},t.disableSelectStyle={userSelect:"none"},t.disableSelectStyleReset={userSelect:""}},function(e,t){"use strict";function r(e){var t=e.clientHeight,r=getComputedStyle(e),n=r.paddingTop,o=r.paddingBottom;return t-parseFloat(n)-parseFloat(o)}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=r},function(e,t){"use strict";function r(e){var t=e.clientWidth,r=getComputedStyle(e),n=r.paddingLeft,o=r.paddingRight;return t-parseFloat(n)-parseFloat(o)}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=r},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}function o(){if(l!==!1)return l;if("undefined"!=typeof document){var e=document.createElement("div");(0,a["default"])(e,{width:100,height:100,position:"absolute",top:-9999,overflow:"scroll",MsOverflowStyle:"scrollbar"}),document.body.appendChild(e),l=e.offsetWidth-e.clientWidth,document.body.removeChild(e)}else l=0;return l||0}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=o;var i=r(1),a=n(i),l=!1},function(e,t){"use strict";function r(e){return"string"==typeof e}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=r},function(e,t){"use strict";function r(){return!1}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=r},function(e,t,r){(function(t){(function(){var r,n,o;"undefined"!=typeof performance&&null!==performance&&performance.now?e.exports=function(){return performance.now()}:"undefined"!=typeof t&&null!==t&&t.hrtime?(e.exports=function(){return(r()-o)/1e6},n=t.hrtime,r=function(){var e;return e=n(),1e9*e[0]+e[1]},o=r()):Date.now?(e.exports=function(){return Date.now()-o},o=Date.now()):(e.exports=function(){return(new Date).getTime()-o},o=(new Date).getTime())}).call(this)}).call(t,r(14))},function(e,t){var r=null,n=["Webkit","Moz","O","ms"];e.exports=function(e){r||(r=document.createElement("div"));var t=r.style;if(e in t)return e;for(var o=e.charAt(0).toUpperCase()+e.slice(1),i=n.length;i>=0;i--){var a=n[i]+o;if(a in t)return a}return!1}},function(e,t){function r(){throw new Error("setTimeout has not been defined")}function n(){throw new Error("clearTimeout has not been defined")}function o(e){if(c===setTimeout)return setTimeout(e,0);if((c===r||!c)&&setTimeout)return c=setTimeout,setTimeout(e,0);try{return c(e,0)}catch(t){try{return c.call(null,e,0)}catch(t){return c.call(this,e,0)}}}function i(e){if(d===clearTimeout)return clearTimeout(e);if((d===n||!d)&&clearTimeout)return d=clearTimeout,clearTimeout(e);try{return d(e)}catch(t){try{return d.call(null,e)}catch(t){return d.call(this,e)}}}function a(){v&&f&&(v=!1,f.length?p=f.concat(p):m=-1,p.length&&l())}function l(){if(!v){var e=o(a);v=!0;for(var t=p.length;t;){for(f=p,p=[];++m<t;)f&&f[m].run();m=-1,t=p.length}f=null,v=!1,i(e)}}function u(e,t){this.fun=e,this.array=t}function s(){}var c,d,h=e.exports={};!function(){try{c="function"==typeof setTimeout?setTimeout:r}catch(e){c=r}try{d="function"==typeof clearTimeout?clearTimeout:n}catch(e){d=n}}();var f,p=[],v=!1,m=-1;h.nextTick=function(e){var t=new Array(arguments.length-1);if(arguments.length>1)for(var r=1;r<arguments.length;r++)t[r-1]=arguments[r];p.push(new u(e,t)),1!==p.length||v||o(l)},u.prototype.run=function(){this.fun.apply(null,this.array)},h.title="browser",h.browser=!0,h.env={},h.argv=[],h.version="",h.versions={},h.on=s,h.addListener=s,h.once=s,h.off=s,h.removeListener=s,h.removeAllListeners=s,h.emit=s,h.binding=function(e){throw new Error("process.binding is not supported")},h.cwd=function(){return"/"},h.chdir=function(e){throw new Error("process.chdir is not supported")},h.umask=function(){return 0}},function(e,t,r){(function(t){for(var n=r(12),o="undefined"==typeof window?t:window,i=["moz","webkit"],a="AnimationFrame",l=o["request"+a],u=o["cancel"+a]||o["cancelRequest"+a],s=0;!l&&s<i.length;s++)l=o[i[s]+"Request"+a],u=o[i[s]+"Cancel"+a]||o[i[s]+"CancelRequest"+a];if(!l||!u){var c=0,d=0,h=[],f=1e3/60;l=function(e){if(0===h.length){var t=n(),r=Math.max(0,f-(t-c));c=r+t,setTimeout(function(){var e=h.slice(0);h.length=0;for(var t=0;t<e.length;t++)if(!e[t].cancelled)try{e[t].callback(c)}catch(e){setTimeout(function(){throw e},0)}},Math.round(r))}return h.push({handle:++d,callback:e,cancelled:!1}),d},u=function(e){for(var t=0;t<h.length;t++)h[t].handle===e&&(h[t].cancelled=!0)}}e.exports=function(e){return l.call(o,e)},e.exports.cancel=function(){u.apply(o,arguments)},e.exports.polyfill=function(){o.requestAnimationFrame=l,o.cancelAnimationFrame=u}}).call(t,function(){return this}())},function(e,t,r){function n(e){return o(e).replace(/\s(\w)/g,function(e,t){return t.toUpperCase()})}var o=r(18);e.exports=n},function(e,t){function r(e){return i.test(e)?e.toLowerCase():a.test(e)?(n(e)||e).toLowerCase():l.test(e)?o(e).toLowerCase():e.toLowerCase()}function n(e){return e.replace(u,function(e,t){return t?" "+t:""})}function o(e){return e.replace(s,function(e,t,r){return t+" "+r.toLowerCase().split("").join(" ")})}e.exports=r;var i=/\s/,a=/(_|-|\.|:)/,l=/([a-z][A-Z]|[A-Z][a-z])/,u=/[\W_]+(.|$)/g,s=/(.)([A-Z]+)/g},function(e,t,r){function n(e){return o(e).replace(/[\W_]+(.|$)/g,function(e,t){return t?" "+t:""}).trim()}var o=r(17);e.exports=n}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.ReactCustomScrollbars=t(require("react")):e.ReactCustomScrollbars=t(e.React)}(this,function(e){return function(e){function t(n){if(r[n])return r[n].exports;var o=r[n]={exports:{},id:n,loaded:!1};return e[n].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var r={};return t.m=e,t.c=r,t.p="",t(0)}([function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0}),t.Scrollbars=void 0;var o=r(5),i=n(o);t["default"]=i["default"],t.Scrollbars=i["default"]},function(e,t,r){function n(e,t,r){var n=c[t];if("undefined"==typeof n&&(n=i(t)),n){if(void 0===r)return e.style[n];e.style[n]=s(n,r)}}function o(e,t){for(var r in t)t.hasOwnProperty(r)&&n(e,r,t[r])}function i(e){var t=u(e),r=l(t);return c[t]=c[e]=c[r]=r,r}function a(){2===arguments.length?"string"==typeof arguments[1]?arguments[0].style.cssText=arguments[1]:o(arguments[0],arguments[1]):n(arguments[0],arguments[1],arguments[2])}var l=r(15),u=r(20),c={"float":"cssFloat"},s=r(3);e.exports=a,e.exports.set=a,e.exports.get=function(e,t){return Array.isArray(t)?t.reduce(function(t,r){return t[r]=n(e,r||""),t},{}):n(e,t||"")}},function(t,r){t.exports=e},function(e,t){var r={animationIterationCount:!0,boxFlex:!0,boxFlexGroup:!0,boxOrdinalGroup:!0,columnCount:!0,flex:!0,flexGrow:!0,flexPositive:!0,flexShrink:!0,flexNegative:!0,flexOrder:!0,gridRow:!0,gridColumn:!0,fontWeight:!0,lineClamp:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,tabSize:!0,widows:!0,zIndex:!0,zoom:!0,fillOpacity:!0,stopOpacity:!0,strokeDashoffset:!0,strokeOpacity:!0,strokeWidth:!0};e.exports=function(e,t){return"number"!=typeof t||r[e]?t:t+"px"}},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}function o(e,t){var r={};for(var n in e)t.indexOf(n)>=0||Object.prototype.hasOwnProperty.call(e,n)&&(r[n]=e[n]);return r}function i(e){return f["default"].createElement("div",e)}function a(e){var t=e.style,r=o(e,["style"]),n=s({},t,{right:2,bottom:2,left:2,borderRadius:3});return f["default"].createElement("div",s({style:n},r))}function l(e){var t=e.style,r=o(e,["style"]),n=s({},t,{right:2,bottom:2,top:2,borderRadius:3});return f["default"].createElement("div",s({style:n},r))}function u(e){var t=e.style,r=o(e,["style"]),n=s({},t,{cursor:"pointer",borderRadius:"inherit",backgroundColor:"rgba(0,0,0,.2)"});return f["default"].createElement("div",s({style:n},r))}function c(e){var t=e.style,r=o(e,["style"]),n=s({},t,{cursor:"pointer",borderRadius:"inherit",backgroundColor:"rgba(0,0,0,.2)"});return f["default"].createElement("div",s({style:n},r))}Object.defineProperty(t,"__esModule",{value:!0});var s=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e};t.renderViewDefault=i,t.renderTrackHorizontalDefault=a,t.renderTrackVerticalDefault=l,t.renderThumbHorizontalDefault=u,t.renderThumbVerticalDefault=c;var d=r(2),f=n(d)},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}function o(e,t){var r={};for(var n in e)t.indexOf(n)>=0||Object.prototype.hasOwnProperty.call(e,n)&&(r[n]=e[n]);return r}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function l(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var u=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},c=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),s=r(19),d=n(s),f=r(1),h=n(f),v=r(2),p=r(18),m=n(p),g=r(10),y=n(g),b=r(9),T=n(b),k=r(11),w=n(k),S=r(8),H=n(S),M=r(7),D=n(M),z=r(6),L=r(4),x=function(e){function t(e){var r;i(this,t);for(var n=arguments.length,o=Array(n>1?n-1:0),l=1;l<n;l++)o[l-1]=arguments[l];var u=a(this,(r=t.__proto__||Object.getPrototypeOf(t)).call.apply(r,[this,e].concat(o)));return u.handleTrackMouseEnter=u.handleTrackMouseEnter.bind(u),u.handleTrackMouseLeave=u.handleTrackMouseLeave.bind(u),u.handleHorizontalTrackMouseDown=u.handleHorizontalTrackMouseDown.bind(u),u.handleVerticalTrackMouseDown=u.handleVerticalTrackMouseDown.bind(u),u.handleHorizontalThumbMouseDown=u.handleHorizontalThumbMouseDown.bind(u),u.handleVerticalThumbMouseDown=u.handleVerticalThumbMouseDown.bind(u),u.handleWindowResize=u.handleWindowResize.bind(u),u.handleScroll=u.handleScroll.bind(u),u.handleDrag=u.handleDrag.bind(u),u.handleDragEnd=u.handleDragEnd.bind(u),u.state=u.getInitialState(),u}return l(t,e),c(t,[{key:"getInitialState",value:function(){return{didMountUniversal:!1}}},{key:"componentDidMount",value:function(){this.addListeners(),this.update(),this.componentDidMountUniversal()}},{key:"componentDidMountUniversal",value:function(){var e=this.props.universal;e&&this.setState({didMountUniversal:!0})}},{key:"componentDidUpdate",value:function(){this.update()}},{key:"componentWillUnmount",value:function(){this.removeListeners(),(0,s.cancel)(this.requestFrame),clearTimeout(this.hideTracksTimeout),clearInterval(this.detectScrollingInterval)}},{key:"getScrollLeft",value:function(){var e=this.refs.view;return e.scrollLeft}},{key:"getScrollTop",value:function(){var e=this.refs.view;return e.scrollTop}},{key:"getScrollWidth",value:function(){var e=this.refs.view;return e.scrollWidth}},{key:"getScrollHeight",value:function(){var e=this.refs.view;return e.scrollHeight}},{key:"getClientWidth",value:function(){var e=this.refs.view;return e.clientWidth}},{key:"getClientHeight",value:function(){var e=this.refs.view;return e.clientHeight}},{key:"getValues",value:function(){var e=this.refs.view,t=e.scrollLeft,r=e.scrollTop,n=e.scrollWidth,o=e.scrollHeight,i=e.clientWidth,a=e.clientHeight;return{left:t/(n-i)||0,top:r/(o-a)||0,scrollLeft:t,scrollTop:r,scrollWidth:n,scrollHeight:o,clientWidth:i,clientHeight:a}}},{key:"getThumbHorizontalWidth",value:function(){var e=this.props,t=e.thumbSize,r=e.thumbMinSize,n=this.refs,o=n.view,i=n.trackHorizontal,a=o.scrollWidth,l=o.clientWidth,u=(0,H["default"])(i),c=Math.ceil(l/a*u);return u===c?0:t?t:Math.max(c,r)}},{key:"getThumbVerticalHeight",value:function(){var e=this.props,t=e.thumbSize,r=e.thumbMinSize,n=this.refs,o=n.view,i=n.trackVertical,a=o.scrollHeight,l=o.clientHeight,u=(0,D["default"])(i),c=Math.ceil(l/a*u);return u===c?0:t?t:Math.max(c,r)}},{key:"getScrollLeftForOffset",value:function(e){var t=this.refs,r=t.view,n=t.trackHorizontal,o=r.scrollWidth,i=r.clientWidth,a=(0,H["default"])(n),l=this.getThumbHorizontalWidth();return e/(a-l)*(o-i)}},{key:"getScrollTopForOffset",value:function(e){var t=this.refs,r=t.view,n=t.trackVertical,o=r.scrollHeight,i=r.clientHeight,a=(0,D["default"])(n),l=this.getThumbVerticalHeight();return e/(a-l)*(o-i)}},{key:"scrollLeft",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,t=this.refs.view;t.scrollLeft=e}},{key:"scrollTop",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,t=this.refs.view;t.scrollTop=e}},{key:"scrollToLeft",value:function(){var e=this.refs.view;e.scrollLeft=0}},{key:"scrollToTop",value:function(){var e=this.refs.view;e.scrollTop=0}},{key:"scrollToRight",value:function(){var e=this.refs.view;e.scrollLeft=e.scrollWidth}},{key:"scrollToBottom",value:function(){var e=this.refs.view;e.scrollTop=e.scrollHeight}},{key:"addListeners",value:function(){if("undefined"!=typeof document){var e=this.refs,t=e.view,r=e.trackHorizontal,n=e.trackVertical,o=e.thumbHorizontal,i=e.thumbVertical;t.addEventListener("scroll",this.handleScroll),(0,T["default"])()&&(r.addEventListener("mouseenter",this.handleTrackMouseEnter),r.addEventListener("mouseleave",this.handleTrackMouseLeave),r.addEventListener("mousedown",this.handleHorizontalTrackMouseDown),n.addEventListener("mouseenter",this.handleTrackMouseEnter),n.addEventListener("mouseleave",this.handleTrackMouseLeave),n.addEventListener("mousedown",this.handleVerticalTrackMouseDown),o.addEventListener("mousedown",this.handleHorizontalThumbMouseDown),i.addEventListener("mousedown",this.handleVerticalThumbMouseDown),window.addEventListener("resize",this.handleWindowResize))}}},{key:"removeListeners",value:function(){if("undefined"!=typeof document){var e=this.refs,t=e.view,r=e.trackHorizontal,n=e.trackVertical,o=e.thumbHorizontal,i=e.thumbVertical;t.removeEventListener("scroll",this.handleScroll),(0,T["default"])()&&(r.removeEventListener("mouseenter",this.handleTrackMouseEnter),r.removeEventListener("mouseleave",this.handleTrackMouseLeave),r.removeEventListener("mousedown",this.handleHorizontalTrackMouseDown),n.removeEventListener("mouseenter",this.handleTrackMouseEnter),n.removeEventListener("mouseleave",this.handleTrackMouseLeave),n.removeEventListener("mousedown",this.handleVerticalTrackMouseDown),o.removeEventListener("mousedown",this.handleHorizontalThumbMouseDown),i.removeEventListener("mousedown",this.handleVerticalThumbMouseDown),window.removeEventListener("resize",this.handleWindowResize),this.teardownDragging())}}},{key:"handleScroll",value:function(e){var t=this,r=this.props,n=r.onScroll,o=r.onScrollFrame;n&&n(e),this.update(function(e){var r=e.scrollLeft,n=e.scrollTop;t.viewScrollLeft=r,t.viewScrollTop=n,o&&o(e)}),this.detectScrolling()}},{key:"handleScrollStart",value:function(){var e=this.props.onScrollStart;e&&e(),this.handleScrollStartAutoHide()}},{key:"handleScrollStartAutoHide",value:function(){var e=this.props.autoHide;e&&this.showTracks()}},{key:"handleScrollStop",value:function(){var e=this.props.onScrollStop;e&&e(),this.handleScrollStopAutoHide()}},{key:"handleScrollStopAutoHide",value:function(){var e=this.props.autoHide;e&&this.hideTracks()}},{key:"handleWindowResize",value:function(){this.update()}},{key:"handleHorizontalTrackMouseDown",value:function(e){e.preventDefault();var t=this.refs.view,r=e.target,n=e.clientX,o=r.getBoundingClientRect(),i=o.left,a=this.getThumbHorizontalWidth(),l=Math.abs(i-n)-a/2;t.scrollLeft=this.getScrollLeftForOffset(l)}},{key:"handleVerticalTrackMouseDown",value:function(e){e.preventDefault();var t=this.refs.view,r=e.target,n=e.clientY,o=r.getBoundingClientRect(),i=o.top,a=this.getThumbVerticalHeight(),l=Math.abs(i-n)-a/2;t.scrollTop=this.getScrollTopForOffset(l)}},{key:"handleHorizontalThumbMouseDown",value:function(e){e.preventDefault(),this.handleDragStart(e);var t=e.target,r=e.clientX,n=t.offsetWidth,o=t.getBoundingClientRect(),i=o.left;this.prevPageX=n-(r-i)}},{key:"handleVerticalThumbMouseDown",value:function(e){e.preventDefault(),this.handleDragStart(e);var t=e.target,r=e.clientY,n=t.offsetHeight,o=t.getBoundingClientRect(),i=o.top;this.prevPageY=n-(r-i)}},{key:"setupDragging",value:function(){(0,h["default"])(document.body,z.disableSelectStyle),document.addEventListener("mousemove",this.handleDrag),document.addEventListener("mouseup",this.handleDragEnd),document.onselectstart=w["default"]}},{key:"teardownDragging",value:function(){(0,h["default"])(document.body,z.disableSelectStyleReset),document.removeEventListener("mousemove",this.handleDrag),document.removeEventListener("mouseup",this.handleDragEnd),document.onselectstart=void 0}},{key:"handleDragStart",value:function(e){this.dragging=!0,e.stopImmediatePropagation(),this.setupDragging()}},{key:"handleDrag",value:function(e){if(this.prevPageX){var t=e.clientX,r=this.refs,n=r.view,o=r.trackHorizontal,i=o.getBoundingClientRect(),a=i.left,l=this.getThumbHorizontalWidth(),u=l-this.prevPageX,c=-a+t-u;n.scrollLeft=this.getScrollLeftForOffset(c)}if(this.prevPageY){var s=e.clientY,d=this.refs,f=d.view,h=d.trackVertical,v=h.getBoundingClientRect(),p=v.top,m=this.getThumbVerticalHeight(),g=m-this.prevPageY,y=-p+s-g;f.scrollTop=this.getScrollTopForOffset(y)}return!1}},{key:"handleDragEnd",value:function(){this.dragging=!1,this.prevPageX=this.prevPageY=0,this.teardownDragging(),this.handleDragEndAutoHide()}},{key:"handleDragEndAutoHide",value:function(){var e=this.props.autoHide;e&&this.hideTracks()}},{key:"handleTrackMouseEnter",value:function(){this.trackMouseOver=!0,this.handleTrackMouseEnterAutoHide()}},{key:"handleTrackMouseEnterAutoHide",value:function(){var e=this.props.autoHide;e&&this.showTracks()}},{key:"handleTrackMouseLeave",value:function(){this.trackMouseOver=!1,this.handleTrackMouseLeaveAutoHide()}},{key:"handleTrackMouseLeaveAutoHide",value:function(){var e=this.props.autoHide;e&&this.hideTracks()}},{key:"showTracks",value:function(){var e=this.refs,t=e.trackHorizontal,r=e.trackVertical;clearTimeout(this.hideTracksTimeout),(0,h["default"])(t,{opacity:1}),(0,h["default"])(r,{opacity:1})}},{key:"hideTracks",value:function(){if(!this.dragging&&!this.scrolling&&!this.trackMouseOver){var e=this.props.autoHideTimeout,t=this.refs,r=t.trackHorizontal,n=t.trackVertical;clearTimeout(this.hideTracksTimeout),this.hideTracksTimeout=setTimeout(function(){(0,h["default"])(r,{opacity:0}),(0,h["default"])(n,{opacity:0})},e)}}},{key:"detectScrolling",value:function(){var e=this;this.scrolling||(this.scrolling=!0,this.handleScrollStart(),this.detectScrollingInterval=setInterval(function(){e.lastViewScrollLeft===e.viewScrollLeft&&e.lastViewScrollTop===e.viewScrollTop&&(clearInterval(e.detectScrollingInterval),e.scrolling=!1,e.handleScrollStop()),e.lastViewScrollLeft=e.viewScrollLeft,e.lastViewScrollTop=e.viewScrollTop},100))}},{key:"raf",value:function(e){var t=this;this.requestFrame&&d["default"].cancel(this.requestFrame),this.requestFrame=(0,d["default"])(function(){t.requestFrame=void 0,e()})}},{key:"update",value:function(e){var t=this;this.raf(function(){return t._update(e)})}},{key:"_update",value:function(e){var t=this.props,r=t.onUpdate,n=t.hideTracksWhenNotNeeded,o=this.getValues();if((0,T["default"])()){var i=this.refs,a=i.thumbHorizontal,l=i.thumbVertical,u=i.trackHorizontal,c=i.trackVertical,s=o.scrollLeft,d=o.clientWidth,f=o.scrollWidth,v=(0,H["default"])(u),p=this.getThumbHorizontalWidth(),m=s/(f-d)*(v-p),g={width:p,transform:"translateX("+m+"px)"},y=o.scrollTop,b=o.clientHeight,k=o.scrollHeight,w=(0,D["default"])(c),S=this.getThumbVerticalHeight(),M=y/(k-b)*(w-S),z={height:S,transform:"translateY("+M+"px)"};if(n){var L={visibility:f>d?"visible":"hidden"},x={visibility:k>b?"visible":"hidden"};(0,h["default"])(u,L),(0,h["default"])(c,x)}(0,h["default"])(a,g),(0,h["default"])(l,z)}r&&r(o),"function"==typeof e&&e(o)}},{key:"render",value:function(){var e=(0,T["default"])(),t=this.props,r=(t.onScroll,t.onScrollFrame,t.onScrollStart,t.onScrollStop,t.onUpdate,t.renderView),n=t.renderTrackHorizontal,i=t.renderTrackVertical,a=t.renderThumbHorizontal,l=t.renderThumbVertical,c=t.tagName,s=(t.hideTracksWhenNotNeeded,t.autoHide),d=(t.autoHideTimeout,t.autoHideDuration),f=(t.thumbSize,t.thumbMinSize,t.universal),h=t.autoHeight,p=t.autoHeightMin,m=t.autoHeightMax,g=t.style,b=t.children,k=o(t,["onScroll","onScrollFrame","onScrollStart","onScrollStop","onUpdate","renderView","renderTrackHorizontal","renderTrackVertical","renderThumbHorizontal","renderThumbVertical","tagName","hideTracksWhenNotNeeded","autoHide","autoHideTimeout","autoHideDuration","thumbSize","thumbMinSize","universal","autoHeight","autoHeightMin","autoHeightMax","style","children"]),w=this.state.didMountUniversal,S=u({},z.containerStyleDefault,h&&u({},z.containerStyleAutoHeight,{minHeight:p,maxHeight:m}),g),H=u({},z.viewStyleDefault,{marginRight:e?-e:0,marginBottom:e?-e:0},h&&u({},z.viewStyleAutoHeight,{minHeight:(0,y["default"])(p)?"calc("+p+" + "+e+"px)":p+e,maxHeight:(0,y["default"])(m)?"calc("+m+" + "+e+"px)":m+e}),h&&f&&!w&&{minHeight:p,maxHeight:m},f&&!w&&z.viewStyleUniversalInitial),M={transition:"opacity "+d+"ms",opacity:0},D=u({},z.trackHorizontalStyleDefault,s&&M,(!e||f&&!w)&&{display:"none"}),L=u({},z.trackVerticalStyleDefault,s&&M,(!e||f&&!w)&&{display:"none"});return(0,v.createElement)(c,u({},k,{style:S,ref:"container"}),[(0,v.cloneElement)(r({style:H}),{key:"view",ref:"view"},b),(0,v.cloneElement)(n({style:D}),{key:"trackHorizontal",ref:"trackHorizontal"},(0,v.cloneElement)(a({style:z.thumbHorizontalStyleDefault}),{ref:"thumbHorizontal"})),(0,v.cloneElement)(i({style:L}),{key:"trackVertical",ref:"trackVertical"},(0,v.cloneElement)(l({style:z.thumbVerticalStyleDefault}),{ref:"thumbVertical"}))])}}]),t}(v.Component);t["default"]=x,x.propTypes={onScroll:m["default"].func,onScrollFrame:m["default"].func,onScrollStart:m["default"].func,onScrollStop:m["default"].func,onUpdate:m["default"].func,renderView:m["default"].func,renderTrackHorizontal:m["default"].func,renderTrackVertical:m["default"].func,renderThumbHorizontal:m["default"].func,renderThumbVertical:m["default"].func,tagName:m["default"].string,thumbSize:m["default"].number,thumbMinSize:m["default"].number,hideTracksWhenNotNeeded:m["default"].bool,autoHide:m["default"].bool,autoHideTimeout:m["default"].number,autoHideDuration:m["default"].number,autoHeight:m["default"].bool,autoHeightMin:m["default"].oneOfType([m["default"].number,m["default"].string]),autoHeightMax:m["default"].oneOfType([m["default"].number,m["default"].string]),universal:m["default"].bool,style:m["default"].object,children:m["default"].node},x.defaultProps={renderView:L.renderViewDefault,renderTrackHorizontal:L.renderTrackHorizontalDefault,renderTrackVertical:L.renderTrackVerticalDefault,renderThumbHorizontal:L.renderThumbHorizontalDefault,renderThumbVertical:L.renderThumbVerticalDefault,tagName:"div",thumbMinSize:30,hideTracksWhenNotNeeded:!1,autoHide:!1,autoHideTimeout:1e3,autoHideDuration:200,autoHeight:!1,autoHeightMin:0,autoHeightMax:200,universal:!1}},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.containerStyleDefault={position:"relative",overflow:"hidden",width:"100%",height:"100%"},t.containerStyleAutoHeight={height:"auto"},t.viewStyleDefault={position:"absolute",top:0,left:0,right:0,bottom:0,overflow:"scroll",WebkitOverflowScrolling:"touch"},t.viewStyleAutoHeight={position:"relative",top:void 0,left:void 0,right:void 0,bottom:void 0},t.viewStyleUniversalInitial={overflow:"hidden",marginRight:0,marginBottom:0},t.trackHorizontalStyleDefault={position:"absolute",height:6},t.trackVerticalStyleDefault={position:"absolute",width:6},t.thumbHorizontalStyleDefault={position:"relative",display:"block",height:"100%"},t.thumbVerticalStyleDefault={position:"relative",display:"block",width:"100%"},t.disableSelectStyle={userSelect:"none"},t.disableSelectStyleReset={userSelect:""}},function(e,t){"use strict";function r(e){var t=e.clientHeight,r=getComputedStyle(e),n=r.paddingTop,o=r.paddingBottom;return t-parseFloat(n)-parseFloat(o)}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=r},function(e,t){"use strict";function r(e){var t=e.clientWidth,r=getComputedStyle(e),n=r.paddingLeft,o=r.paddingRight;return t-parseFloat(n)-parseFloat(o)}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=r},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}function o(){if(l!==!1)return l;if("undefined"!=typeof document){var e=document.createElement("div");(0,a["default"])(e,{width:100,height:100,position:"absolute",top:-9999,overflow:"scroll",MsOverflowStyle:"scrollbar"}),document.body.appendChild(e),l=e.offsetWidth-e.clientWidth,document.body.removeChild(e)}else l=0;return l||0}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=o;var i=r(1),a=n(i),l=!1},function(e,t){"use strict";function r(e){return"string"==typeof e}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=r},function(e,t){"use strict";function r(){return!1}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=r},function(e,t){"use strict";function r(e){return function(){return e}}var n=function(){};n.thatReturns=r,n.thatReturnsFalse=r(!1),n.thatReturnsTrue=r(!0),n.thatReturnsNull=r(null),n.thatReturnsThis=function(){return this},n.thatReturnsArgument=function(e){return e},e.exports=n},function(e,t,r){"use strict";function n(e,t,r,n,i,a,l,u){if(o(t),!e){var c;if(void 0===t)c=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var s=[r,n,i,a,l,u],d=0;c=new Error(t.replace(/%s/g,function(){return s[d++]})),c.name="Invariant Violation"}throw c.framesToPop=1,c}}var o=function(e){};e.exports=n},function(e,t,r){(function(t){(function(){var r,n,o;"undefined"!=typeof performance&&null!==performance&&performance.now?e.exports=function(){return performance.now()}:"undefined"!=typeof t&&null!==t&&t.hrtime?(e.exports=function(){return(r()-o)/1e6},n=t.hrtime,r=function(){var e;return e=n(),1e9*e[0]+e[1]},o=r()):Date.now?(e.exports=function(){return Date.now()-o},o=Date.now()):(e.exports=function(){return(new Date).getTime()-o},o=(new Date).getTime())}).call(this)}).call(t,r(16))},function(e,t){var r=null,n=["Webkit","Moz","O","ms"];e.exports=function(e){r||(r=document.createElement("div"));var t=r.style;if(e in t)return e;for(var o=e.charAt(0).toUpperCase()+e.slice(1),i=n.length;i>=0;i--){var a=n[i]+o;if(a in t)return a}return!1}},function(e,t){function r(){throw new Error("setTimeout has not been defined")}function n(){throw new Error("clearTimeout has not been defined")}function o(e){if(s===setTimeout)return setTimeout(e,0);if((s===r||!s)&&setTimeout)return s=setTimeout,setTimeout(e,0);try{return s(e,0)}catch(t){try{return s.call(null,e,0)}catch(t){return s.call(this,e,0)}}}function i(e){if(d===clearTimeout)return clearTimeout(e);if((d===n||!d)&&clearTimeout)return d=clearTimeout,clearTimeout(e);try{return d(e)}catch(t){try{return d.call(null,e)}catch(t){return d.call(this,e)}}}function a(){p&&h&&(p=!1,h.length?v=h.concat(v):m=-1,v.length&&l())}function l(){if(!p){var e=o(a);p=!0;for(var t=v.length;t;){for(h=v,v=[];++m<t;)h&&h[m].run();m=-1,t=v.length}h=null,p=!1,i(e)}}function u(e,t){this.fun=e,this.array=t}function c(){}var s,d,f=e.exports={};!function(){try{s="function"==typeof setTimeout?setTimeout:r}catch(e){s=r}try{d="function"==typeof clearTimeout?clearTimeout:n}catch(e){d=n}}();var h,v=[],p=!1,m=-1;f.nextTick=function(e){var t=new Array(arguments.length-1);if(arguments.length>1)for(var r=1;r<arguments.length;r++)t[r-1]=arguments[r];v.push(new u(e,t)),1!==v.length||p||o(l)},u.prototype.run=function(){this.fun.apply(null,this.array)},f.title="browser",f.browser=!0,f.env={},f.argv=[],f.version="",f.versions={},f.on=c,f.addListener=c,f.once=c,f.off=c,f.removeListener=c,f.removeAllListeners=c,f.emit=c,f.binding=function(e){throw new Error("process.binding is not supported")},f.cwd=function(){return"/"},f.chdir=function(e){throw new Error("process.chdir is not supported")},f.umask=function(){return 0}},function(e,t,r){"use strict";var n=r(12),o=r(13);e.exports=function(){function e(){o(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types")}function t(){return e}e.isRequired=e;var r={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t};return r.checkPropTypes=n,r.PropTypes=r,r}},function(e,t,r){e.exports=r(17)()},function(e,t,r){(function(t){for(var n=r(14),o="undefined"==typeof window?t:window,i=["moz","webkit"],a="AnimationFrame",l=o["request"+a],u=o["cancel"+a]||o["cancelRequest"+a],c=0;!l&&c<i.length;c++)l=o[i[c]+"Request"+a],u=o[i[c]+"Cancel"+a]||o[i[c]+"CancelRequest"+a];if(!l||!u){var s=0,d=0,f=[],h=1e3/60;l=function(e){if(0===f.length){var t=n(),r=Math.max(0,h-(t-s));s=r+t,setTimeout(function(){var e=f.slice(0);f.length=0;for(var t=0;t<e.length;t++)if(!e[t].cancelled)try{e[t].callback(s)}catch(e){setTimeout(function(){throw e},0)}},Math.round(r))}return f.push({handle:++d,callback:e,cancelled:!1}),d},u=function(e){for(var t=0;t<f.length;t++)f[t].handle===e&&(f[t].cancelled=!0)}}e.exports=function(e){return l.call(o,e)},e.exports.cancel=function(){u.apply(o,arguments)},e.exports.polyfill=function(){o.requestAnimationFrame=l,o.cancelAnimationFrame=u}}).call(t,function(){return this}())},function(e,t,r){function n(e){return o(e).replace(/\s(\w)/g,function(e,t){return t.toUpperCase()})}var o=r(22);e.exports=n},function(e,t){function r(e){return i.test(e)?e.toLowerCase():a.test(e)?(n(e)||e).toLowerCase():l.test(e)?o(e).toLowerCase():e.toLowerCase()}function n(e){return e.replace(u,function(e,t){return t?" "+t:""})}function o(e){return e.replace(c,function(e,t,r){return t+" "+r.toLowerCase().split("").join(" ")})}e.exports=r;var i=/\s/,a=/(_|-|\.|:)/,l=/([a-z][A-Z]|[A-Z][a-z])/,u=/[\W_]+(.|$)/g,c=/(.)([A-Z]+)/g},function(e,t,r){function n(e){return o(e).replace(/[\W_]+(.|$)/g,function(e,t){return t?" "+t:""}).trim()}var o=r(21);e.exports=n}])});

docs/API.md

@@ -45,4 +45,4 @@ # API
 
-* `scrollTop(top)`: scroll to the top value
-* `scrollLeft(left)`: scroll to the left value
+* `scrollTop(top = 0)`: scroll to the top value
+* `scrollLeft(left = 0)`: scroll to the left value
 * `scrollToTop()`: scroll to top
@@ -49,0 +49,0 @@ * `scrollToBottom()`: scroll to bottom

lib/Scrollbars/index.js

@@ -9,2 +9,4 @@ 'use strict';
 
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
 var _raf2 = require('raf');
@@ -20,2 +22,6 @@
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _isString = require('../utils/isString');
@@ -49,609 +55,747 @@
 
-exports["default"] = (0, _react.createClass)({
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-    displayName: 'Scrollbars',
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
 
-    propTypes: {
-        onScroll: _react.PropTypes.func,
-        onScrollFrame: _react.PropTypes.func,
-        onScrollStart: _react.PropTypes.func,
-        onScrollStop: _react.PropTypes.func,
-        onUpdate: _react.PropTypes.func,
-        renderView: _react.PropTypes.func,
-        renderTrackHorizontal: _react.PropTypes.func,
-        renderTrackVertical: _react.PropTypes.func,
-        renderThumbHorizontal: _react.PropTypes.func,
-        renderThumbVertical: _react.PropTypes.func,
-        tagName: _react.PropTypes.string,
-        thumbSize: _react.PropTypes.number,
-        thumbMinSize: _react.PropTypes.number,
-        hideTracksWhenNotNeeded: _react.PropTypes.bool,
-        autoHide: _react.PropTypes.bool,
-        autoHideTimeout: _react.PropTypes.number,
-        autoHideDuration: _react.PropTypes.number,
-        autoHeight: _react.PropTypes.bool,
-        autoHeightMin: _react.PropTypes.oneOfType([_react.PropTypes.number, _react.PropTypes.string]),
-        autoHeightMax: _react.PropTypes.oneOfType([_react.PropTypes.number, _react.PropTypes.string]),
-        universal: _react.PropTypes.bool,
-        style: _react.PropTypes.object,
-        children: _react.PropTypes.node
-    },
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
-    getDefaultProps: function getDefaultProps() {
-        return {
-            renderView: _defaultRenderElements.renderViewDefault,
-            renderTrackHorizontal: _defaultRenderElements.renderTrackHorizontalDefault,
-            renderTrackVertical: _defaultRenderElements.renderTrackVerticalDefault,
-            renderThumbHorizontal: _defaultRenderElements.renderThumbHorizontalDefault,
-            renderThumbVertical: _defaultRenderElements.renderThumbVerticalDefault,
-            tagName: 'div',
-            thumbMinSize: 30,
-            hideTracksWhenNotNeeded: false,
-            autoHide: false,
-            autoHideTimeout: 1000,
-            autoHideDuration: 200,
-            autoHeight: false,
-            autoHeightMin: 0,
-            autoHeightMax: 200,
-            universal: false
-        };
-    },
-    getInitialState: function getInitialState() {
-        return {
-            didMountUniversal: false
-        };
-    },
-    componentDidMount: function componentDidMount() {
-        this.addListeners();
-        this.update();
-        this.componentDidMountUniversal();
-    },
-    componentDidMountUniversal: function componentDidMountUniversal() {
-        // eslint-disable-line react/sort-comp
-        var universal = this.props.universal;
+var Scrollbars = function (_Component) {
+    _inherits(Scrollbars, _Component);
 
-        if (!universal) return;
-        this.setState({ didMountUniversal: true });
-    },
-    componentDidUpdate: function componentDidUpdate() {
-        this.update();
-    },
-    componentWillUnmount: function componentWillUnmount() {
-        this.removeListeners();
-        (0, _raf2.cancel)(this.requestFrame);
-        clearTimeout(this.hideTracksTimeout);
-        clearInterval(this.detectScrollingInterval);
-    },
-    getScrollLeft: function getScrollLeft() {
-        var view = this.refs.view;
+    function Scrollbars(props) {
+        var _ref;
 
-        return view.scrollLeft;
-    },
-    getScrollTop: function getScrollTop() {
-        var view = this.refs.view;
+        _classCallCheck(this, Scrollbars);
 
-        return view.scrollTop;
-    },
-    getScrollWidth: function getScrollWidth() {
-        var view = this.refs.view;
+        for (var _len = arguments.length, rest = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+            rest[_key - 1] = arguments[_key];
+        }
 
-        return view.scrollWidth;
-    },
-    getScrollHeight: function getScrollHeight() {
-        var view = this.refs.view;
+        var _this = _possibleConstructorReturn(this, (_ref = Scrollbars.__proto__ || Object.getPrototypeOf(Scrollbars)).call.apply(_ref, [this, props].concat(rest)));
 
-        return view.scrollHeight;
-    },
-    getClientWidth: function getClientWidth() {
-        var view = this.refs.view;
+        _this.handleTrackMouseEnter = _this.handleTrackMouseEnter.bind(_this);
+        _this.handleTrackMouseLeave = _this.handleTrackMouseLeave.bind(_this);
+        _this.handleHorizontalTrackMouseDown = _this.handleHorizontalTrackMouseDown.bind(_this);
+        _this.handleVerticalTrackMouseDown = _this.handleVerticalTrackMouseDown.bind(_this);
+        _this.handleHorizontalThumbMouseDown = _this.handleHorizontalThumbMouseDown.bind(_this);
+        _this.handleVerticalThumbMouseDown = _this.handleVerticalThumbMouseDown.bind(_this);
+        _this.handleWindowResize = _this.handleWindowResize.bind(_this);
+        _this.handleScroll = _this.handleScroll.bind(_this);
+        _this.handleDrag = _this.handleDrag.bind(_this);
+        _this.handleDragEnd = _this.handleDragEnd.bind(_this);
 
-        return view.clientWidth;
-    },
-    getClientHeight: function getClientHeight() {
-        var view = this.refs.view;
+        _this.state = _this.getInitialState();
+        return _this;
+    }
 
-        return view.clientHeight;
-    },
-    getValues: function getValues() {
-        var view = this.refs.view;
-        var scrollLeft = view.scrollLeft,
-            scrollTop = view.scrollTop,
-            scrollWidth = view.scrollWidth,
-            scrollHeight = view.scrollHeight,
-            clientWidth = view.clientWidth,
-            clientHeight = view.clientHeight;
+    _createClass(Scrollbars, [{
+        key: 'getInitialState',
+        value: function getInitialState() {
+            return {
+                didMountUniversal: false
+            };
+        }
+    }, {
+        key: 'componentDidMount',
+        value: function componentDidMount() {
+            this.addListeners();
+            this.update();
+            this.componentDidMountUniversal();
+        }
+    }, {
+        key: 'componentDidMountUniversal',
+        value: function componentDidMountUniversal() {
+            // eslint-disable-line react/sort-comp
+            var universal = this.props.universal;
 
+            if (!universal) return;
+            this.setState({ didMountUniversal: true });
+        }
+    }, {
+        key: 'componentDidUpdate',
+        value: function componentDidUpdate() {
+            this.update();
+        }
+    }, {
+        key: 'componentWillUnmount',
+        value: function componentWillUnmount() {
+            this.removeListeners();
+            (0, _raf2.cancel)(this.requestFrame);
+            clearTimeout(this.hideTracksTimeout);
+            clearInterval(this.detectScrollingInterval);
+        }
+    }, {
+        key: 'getScrollLeft',
+        value: function getScrollLeft() {
+            var view = this.refs.view;
 
-        return {
-            left: scrollLeft / (scrollWidth - clientWidth) || 0,
-            top: scrollTop / (scrollHeight - clientHeight) || 0,
-            scrollLeft: scrollLeft,
-            scrollTop: scrollTop,
-            scrollWidth: scrollWidth,
-            scrollHeight: scrollHeight,
-            clientWidth: clientWidth,
-            clientHeight: clientHeight
-        };
-    },
-    getThumbHorizontalWidth: function getThumbHorizontalWidth() {
-        var _props = this.props,
-            thumbSize = _props.thumbSize,
-            thumbMinSize = _props.thumbMinSize;
-        var _refs = this.refs,
-            view = _refs.view,
-            trackHorizontal = _refs.trackHorizontal;
-        var scrollWidth = view.scrollWidth,
-            clientWidth = view.clientWidth;
+            return view.scrollLeft;
+        }
+    }, {
+        key: 'getScrollTop',
+        value: function getScrollTop() {
+            var view = this.refs.view;
 
-        var trackWidth = (0, _getInnerWidth2["default"])(trackHorizontal);
-        var width = Math.ceil(clientWidth / scrollWidth * trackWidth);
-        if (trackWidth === width) return 0;
-        if (thumbSize) return thumbSize;
-        return Math.max(width, thumbMinSize);
-    },
-    getThumbVerticalHeight: function getThumbVerticalHeight() {
-        var _props2 = this.props,
-            thumbSize = _props2.thumbSize,
-            thumbMinSize = _props2.thumbMinSize;
-        var _refs2 = this.refs,
-            view = _refs2.view,
-            trackVertical = _refs2.trackVertical;
-        var scrollHeight = view.scrollHeight,
-            clientHeight = view.clientHeight;
+            return view.scrollTop;
+        }
+    }, {
+        key: 'getScrollWidth',
+        value: function getScrollWidth() {
+            var view = this.refs.view;
 
-        var trackHeight = (0, _getInnerHeight2["default"])(trackVertical);
-        var height = Math.ceil(clientHeight / scrollHeight * trackHeight);
-        if (trackHeight === height) return 0;
-        if (thumbSize) return thumbSize;
-        return Math.max(height, thumbMinSize);
-    },
-    getScrollLeftForOffset: function getScrollLeftForOffset(offset) {
-        var _refs3 = this.refs,
-            view = _refs3.view,
-            trackHorizontal = _refs3.trackHorizontal;
-        var scrollWidth = view.scrollWidth,
-            clientWidth = view.clientWidth;
+            return view.scrollWidth;
+        }
+    }, {
+        key: 'getScrollHeight',
+        value: function getScrollHeight() {
+            var view = this.refs.view;
 
-        var trackWidth = (0, _getInnerWidth2["default"])(trackHorizontal);
-        var thumbWidth = this.getThumbHorizontalWidth();
-        return offset / (trackWidth - thumbWidth) * (scrollWidth - clientWidth);
-    },
-    getScrollTopForOffset: function getScrollTopForOffset(offset) {
-        var _refs4 = this.refs,
-            view = _refs4.view,
-            trackVertical = _refs4.trackVertical;
-        var scrollHeight = view.scrollHeight,
-            clientHeight = view.clientHeight;
+            return view.scrollHeight;
+        }
+    }, {
+        key: 'getClientWidth',
+        value: function getClientWidth() {
+            var view = this.refs.view;
 
-        var trackHeight = (0, _getInnerHeight2["default"])(trackVertical);
-        var thumbHeight = this.getThumbVerticalHeight();
-        return offset / (trackHeight - thumbHeight) * (scrollHeight - clientHeight);
-    },
-    scrollLeft: function scrollLeft() {
-        var left = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-        var view = this.refs.view;
+            return view.clientWidth;
+        }
+    }, {
+        key: 'getClientHeight',
+        value: function getClientHeight() {
+            var view = this.refs.view;
 
-        view.scrollLeft = left;
-    },
-    scrollTop: function scrollTop() {
-        var top = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-        var view = this.refs.view;
+            return view.clientHeight;
+        }
+    }, {
+        key: 'getValues',
+        value: function getValues() {
+            var view = this.refs.view;
+            var scrollLeft = view.scrollLeft,
+                scrollTop = view.scrollTop,
+                scrollWidth = view.scrollWidth,
+                scrollHeight = view.scrollHeight,
+                clientWidth = view.clientWidth,
+                clientHeight = view.clientHeight;
 
-        view.scrollTop = top;
-    },
-    scrollToLeft: function scrollToLeft() {
-        var view = this.refs.view;
 
-        view.scrollLeft = 0;
-    },
-    scrollToTop: function scrollToTop() {
-        var view = this.refs.view;
+            return {
+                left: scrollLeft / (scrollWidth - clientWidth) || 0,
+                top: scrollTop / (scrollHeight - clientHeight) || 0,
+                scrollLeft: scrollLeft,
+                scrollTop: scrollTop,
+                scrollWidth: scrollWidth,
+                scrollHeight: scrollHeight,
+                clientWidth: clientWidth,
+                clientHeight: clientHeight
+            };
+        }
+    }, {
+        key: 'getThumbHorizontalWidth',
+        value: function getThumbHorizontalWidth() {
+            var _props = this.props,
+                thumbSize = _props.thumbSize,
+                thumbMinSize = _props.thumbMinSize;
+            var _refs = this.refs,
+                view = _refs.view,
+                trackHorizontal = _refs.trackHorizontal;
+            var scrollWidth = view.scrollWidth,
+                clientWidth = view.clientWidth;
 
-        view.scrollTop = 0;
-    },
-    scrollToRight: function scrollToRight() {
-        var view = this.refs.view;
+            var trackWidth = (0, _getInnerWidth2["default"])(trackHorizontal);
+            var width = Math.ceil(clientWidth / scrollWidth * trackWidth);
+            if (trackWidth === width) return 0;
+            if (thumbSize) return thumbSize;
+            return Math.max(width, thumbMinSize);
+        }
+    }, {
+        key: 'getThumbVerticalHeight',
+        value: function getThumbVerticalHeight() {
+            var _props2 = this.props,
+                thumbSize = _props2.thumbSize,
+                thumbMinSize = _props2.thumbMinSize;
+            var _refs2 = this.refs,
+                view = _refs2.view,
+                trackVertical = _refs2.trackVertical;
+            var scrollHeight = view.scrollHeight,
+                clientHeight = view.clientHeight;
 
-        view.scrollLeft = view.scrollWidth;
-    },
-    scrollToBottom: function scrollToBottom() {
-        var view = this.refs.view;
+            var trackHeight = (0, _getInnerHeight2["default"])(trackVertical);
+            var height = Math.ceil(clientHeight / scrollHeight * trackHeight);
+            if (trackHeight === height) return 0;
+            if (thumbSize) return thumbSize;
+            return Math.max(height, thumbMinSize);
+        }
+    }, {
+        key: 'getScrollLeftForOffset',
+        value: function getScrollLeftForOffset(offset) {
+            var _refs3 = this.refs,
+                view = _refs3.view,
+                trackHorizontal = _refs3.trackHorizontal;
+            var scrollWidth = view.scrollWidth,
+                clientWidth = view.clientWidth;
 
-        view.scrollTop = view.scrollHeight;
-    },
-    addListeners: function addListeners() {
-        /* istanbul ignore if */
-        if (typeof document === 'undefined') return;
-        var _refs5 = this.refs,
-            view = _refs5.view,
-            trackHorizontal = _refs5.trackHorizontal,
-            trackVertical = _refs5.trackVertical,
-            thumbHorizontal = _refs5.thumbHorizontal,
-            thumbVertical = _refs5.thumbVertical;
+            var trackWidth = (0, _getInnerWidth2["default"])(trackHorizontal);
+            var thumbWidth = this.getThumbHorizontalWidth();
+            return offset / (trackWidth - thumbWidth) * (scrollWidth - clientWidth);
+        }
+    }, {
+        key: 'getScrollTopForOffset',
+        value: function getScrollTopForOffset(offset) {
+            var _refs4 = this.refs,
+                view = _refs4.view,
+                trackVertical = _refs4.trackVertical;
+            var scrollHeight = view.scrollHeight,
+                clientHeight = view.clientHeight;
 
-        view.addEventListener('scroll', this.handleScroll);
-        if (!(0, _getScrollbarWidth2["default"])()) return;
-        trackHorizontal.addEventListener('mouseenter', this.handleTrackMouseEnter);
-        trackHorizontal.addEventListener('mouseleave', this.handleTrackMouseLeave);
-        trackHorizontal.addEventListener('mousedown', this.handleHorizontalTrackMouseDown);
-        trackVertical.addEventListener('mouseenter', this.handleTrackMouseEnter);
-        trackVertical.addEventListener('mouseleave', this.handleTrackMouseLeave);
-        trackVertical.addEventListener('mousedown', this.handleVerticalTrackMouseDown);
-        thumbHorizontal.addEventListener('mousedown', this.handleHorizontalThumbMouseDown);
-        thumbVertical.addEventListener('mousedown', this.handleVerticalThumbMouseDown);
-        window.addEventListener('resize', this.handleWindowResize);
-    },
-    removeListeners: function removeListeners() {
-        /* istanbul ignore if */
-        if (typeof document === 'undefined') return;
-        var _refs6 = this.refs,
-            view = _refs6.view,
-            trackHorizontal = _refs6.trackHorizontal,
-            trackVertical = _refs6.trackVertical,
-            thumbHorizontal = _refs6.thumbHorizontal,
-            thumbVertical = _refs6.thumbVertical;
+            var trackHeight = (0, _getInnerHeight2["default"])(trackVertical);
+            var thumbHeight = this.getThumbVerticalHeight();
+            return offset / (trackHeight - thumbHeight) * (scrollHeight - clientHeight);
+        }
+    }, {
+        key: 'scrollLeft',
+        value: function scrollLeft() {
+            var left = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+            var view = this.refs.view;
 
-        view.removeEventListener('scroll', this.handleScroll);
-        if (!(0, _getScrollbarWidth2["default"])()) return;
-        trackHorizontal.removeEventListener('mouseenter', this.handleTrackMouseEnter);
-        trackHorizontal.removeEventListener('mouseleave', this.handleTrackMouseLeave);
-        trackHorizontal.removeEventListener('mousedown', this.handleHorizontalTrackMouseDown);
-        trackVertical.removeEventListener('mouseenter', this.handleTrackMouseEnter);
-        trackVertical.removeEventListener('mouseleave', this.handleTrackMouseLeave);
-        trackVertical.removeEventListener('mousedown', this.handleVerticalTrackMouseDown);
-        thumbHorizontal.removeEventListener('mousedown', this.handleHorizontalThumbMouseDown);
-        thumbVertical.removeEventListener('mousedown', this.handleVerticalThumbMouseDown);
-        window.removeEventListener('resize', this.handleWindowResize);
-        // Possibly setup by `handleDragStart`
-        this.teardownDragging();
-    },
-    handleScroll: function handleScroll(event) {
-        var _this = this;
+            view.scrollLeft = left;
+        }
+    }, {
+        key: 'scrollTop',
+        value: function scrollTop() {
+            var top = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+            var view = this.refs.view;
 
-        var _props3 = this.props,
-            onScroll = _props3.onScroll,
-            onScrollFrame = _props3.onScrollFrame;
+            view.scrollTop = top;
+        }
+    }, {
+        key: 'scrollToLeft',
+        value: function scrollToLeft() {
+            var view = this.refs.view;
 
-        if (onScroll) onScroll(event);
-        this.update(function (values) {
-            var scrollLeft = values.scrollLeft,
-                scrollTop = values.scrollTop;
+            view.scrollLeft = 0;
+        }
+    }, {
+        key: 'scrollToTop',
+        value: function scrollToTop() {
+            var view = this.refs.view;
 
-            _this.viewScrollLeft = scrollLeft;
-            _this.viewScrollTop = scrollTop;
-            if (onScrollFrame) onScrollFrame(values);
-        });
-        this.detectScrolling();
-    },
-    handleScrollStart: function handleScrollStart() {
-        var onScrollStart = this.props.onScrollStart;
+            view.scrollTop = 0;
+        }
+    }, {
+        key: 'scrollToRight',
+        value: function scrollToRight() {
+            var view = this.refs.view;
 
-        if (onScrollStart) onScrollStart();
-        this.handleScrollStartAutoHide();
-    },
-    handleScrollStartAutoHide: function handleScrollStartAutoHide() {
-        var autoHide = this.props.autoHide;
+            view.scrollLeft = view.scrollWidth;
+        }
+    }, {
+        key: 'scrollToBottom',
+        value: function scrollToBottom() {
+            var view = this.refs.view;
 
-        if (!autoHide) return;
-        this.showTracks();
-    },
-    handleScrollStop: function handleScrollStop() {
-        var onScrollStop = this.props.onScrollStop;
+            view.scrollTop = view.scrollHeight;
+        }
+    }, {
+        key: 'addListeners',
+        value: function addListeners() {
+            /* istanbul ignore if */
+            if (typeof document === 'undefined') return;
+            var _refs5 = this.refs,
+                view = _refs5.view,
+                trackHorizontal = _refs5.trackHorizontal,
+                trackVertical = _refs5.trackVertical,
+                thumbHorizontal = _refs5.thumbHorizontal,
+                thumbVertical = _refs5.thumbVertical;
 
-        if (onScrollStop) onScrollStop();
-        this.handleScrollStopAutoHide();
-    },
-    handleScrollStopAutoHide: function handleScrollStopAutoHide() {
-        var autoHide = this.props.autoHide;
+            view.addEventListener('scroll', this.handleScroll);
+            if (!(0, _getScrollbarWidth2["default"])()) return;
+            trackHorizontal.addEventListener('mouseenter', this.handleTrackMouseEnter);
+            trackHorizontal.addEventListener('mouseleave', this.handleTrackMouseLeave);
+            trackHorizontal.addEventListener('mousedown', this.handleHorizontalTrackMouseDown);
+            trackVertical.addEventListener('mouseenter', this.handleTrackMouseEnter);
+            trackVertical.addEventListener('mouseleave', this.handleTrackMouseLeave);
+            trackVertical.addEventListener('mousedown', this.handleVerticalTrackMouseDown);
+            thumbHorizontal.addEventListener('mousedown', this.handleHorizontalThumbMouseDown);
+            thumbVertical.addEventListener('mousedown', this.handleVerticalThumbMouseDown);
+            window.addEventListener('resize', this.handleWindowResize);
+        }
+    }, {
+        key: 'removeListeners',
+        value: function removeListeners() {
+            /* istanbul ignore if */
+            if (typeof document === 'undefined') return;
+            var _refs6 = this.refs,
+                view = _refs6.view,
+                trackHorizontal = _refs6.trackHorizontal,
+                trackVertical = _refs6.trackVertical,
+                thumbHorizontal = _refs6.thumbHorizontal,
+                thumbVertical = _refs6.thumbVertical;
 
-        if (!autoHide) return;
-        this.hideTracks();
-    },
-    handleWindowResize: function handleWindowResize() {
-        this.update();
-    },
-    handleHorizontalTrackMouseDown: function handleHorizontalTrackMouseDown(event) {
-        event.preventDefault();
-        var view = this.refs.view;
-        var target = event.target,
-            clientX = event.clientX;
+            view.removeEventListener('scroll', this.handleScroll);
+            if (!(0, _getScrollbarWidth2["default"])()) return;
+            trackHorizontal.removeEventListener('mouseenter', this.handleTrackMouseEnter);
+            trackHorizontal.removeEventListener('mouseleave', this.handleTrackMouseLeave);
+            trackHorizontal.removeEventListener('mousedown', this.handleHorizontalTrackMouseDown);
+            trackVertical.removeEventListener('mouseenter', this.handleTrackMouseEnter);
+            trackVertical.removeEventListener('mouseleave', this.handleTrackMouseLeave);
+            trackVertical.removeEventListener('mousedown', this.handleVerticalTrackMouseDown);
+            thumbHorizontal.removeEventListener('mousedown', this.handleHorizontalThumbMouseDown);
+            thumbVertical.removeEventListener('mousedown', this.handleVerticalThumbMouseDown);
+            window.removeEventListener('resize', this.handleWindowResize);
+            // Possibly setup by `handleDragStart`
+            this.teardownDragging();
+        }
+    }, {
+        key: 'handleScroll',
+        value: function handleScroll(event) {
+            var _this2 = this;
 
-        var _target$getBoundingCl = target.getBoundingClientRect(),
-            targetLeft = _target$getBoundingCl.left;
+            var _props3 = this.props,
+                onScroll = _props3.onScroll,
+                onScrollFrame = _props3.onScrollFrame;
 
-        var thumbWidth = this.getThumbHorizontalWidth();
-        var offset = Math.abs(targetLeft - clientX) - thumbWidth / 2;
-        view.scrollLeft = this.getScrollLeftForOffset(offset);
-    },
-    handleVerticalTrackMouseDown: function handleVerticalTrackMouseDown(event) {
-        event.preventDefault();
-        var view = this.refs.view;
-        var target = event.target,
-            clientY = event.clientY;
+            if (onScroll) onScroll(event);
+            this.update(function (values) {
+                var scrollLeft = values.scrollLeft,
+                    scrollTop = values.scrollTop;
 
-        var _target$getBoundingCl2 = target.getBoundingClientRect(),
-            targetTop = _target$getBoundingCl2.top;
+                _this2.viewScrollLeft = scrollLeft;
+                _this2.viewScrollTop = scrollTop;
+                if (onScrollFrame) onScrollFrame(values);
+            });
+            this.detectScrolling();
+        }
+    }, {
+        key: 'handleScrollStart',
+        value: function handleScrollStart() {
+            var onScrollStart = this.props.onScrollStart;
 
-        var thumbHeight = this.getThumbVerticalHeight();
-        var offset = Math.abs(targetTop - clientY) - thumbHeight / 2;
-        view.scrollTop = this.getScrollTopForOffset(offset);
-    },
-    handleHorizontalThumbMouseDown: function handleHorizontalThumbMouseDown(event) {
-        event.preventDefault();
-        this.handleDragStart(event);
-        var target = event.target,
-            clientX = event.clientX;
-        var offsetWidth = target.offsetWidth;
+            if (onScrollStart) onScrollStart();
+            this.handleScrollStartAutoHide();
+        }
+    }, {
+        key: 'handleScrollStartAutoHide',
+        value: function handleScrollStartAutoHide() {
+            var autoHide = this.props.autoHide;
 
-        var _target$getBoundingCl3 = target.getBoundingClientRect(),
-            left = _target$getBoundingCl3.left;
+            if (!autoHide) return;
+            this.showTracks();
+        }
+    }, {
+        key: 'handleScrollStop',
+        value: function handleScrollStop() {
+            var onScrollStop = this.props.onScrollStop;
 
-        this.prevPageX = offsetWidth - (clientX - left);
-    },
-    handleVerticalThumbMouseDown: function handleVerticalThumbMouseDown(event) {
-        event.preventDefault();
-        this.handleDragStart(event);
-        var target = event.target,
-            clientY = event.clientY;
-        var offsetHeight = target.offsetHeight;
+            if (onScrollStop) onScrollStop();
+            this.handleScrollStopAutoHide();
+        }
+    }, {
+        key: 'handleScrollStopAutoHide',
+        value: function handleScrollStopAutoHide() {
+            var autoHide = this.props.autoHide;
 
-        var _target$getBoundingCl4 = target.getBoundingClientRect(),
-            top = _target$getBoundingCl4.top;
+            if (!autoHide) return;
+            this.hideTracks();
+        }
+    }, {
+        key: 'handleWindowResize',
+        value: function handleWindowResize() {
+            this.update();
+        }
+    }, {
+        key: 'handleHorizontalTrackMouseDown',
+        value: function handleHorizontalTrackMouseDown(event) {
+            event.preventDefault();
+            var view = this.refs.view;
+            var target = event.target,
+                clientX = event.clientX;
 
-        this.prevPageY = offsetHeight - (clientY - top);
-    },
-    setupDragging: function setupDragging() {
-        (0, _domCss2["default"])(document.body, _styles.disableSelectStyle);
-        document.addEventListener('mousemove', this.handleDrag);
-        document.addEventListener('mouseup', this.handleDragEnd);
-        document.onselectstart = _returnFalse2["default"];
-    },
-    teardownDragging: function teardownDragging() {
-        (0, _domCss2["default"])(document.body, _styles.disableSelectStyleReset);
-        document.removeEventListener('mousemove', this.handleDrag);
-        document.removeEventListener('mouseup', this.handleDragEnd);
-        document.onselectstart = undefined;
-    },
-    handleDragStart: function handleDragStart(event) {
-        this.dragging = true;
-        event.stopImmediatePropagation();
-        this.setupDragging();
-    },
-    handleDrag: function handleDrag(event) {
-        if (this.prevPageX) {
-            var clientX = event.clientX;
-            var _refs7 = this.refs,
-                view = _refs7.view,
-                trackHorizontal = _refs7.trackHorizontal;
+            var _target$getBoundingCl = target.getBoundingClientRect(),
+                targetLeft = _target$getBoundingCl.left;
 
-            var _trackHorizontal$getB = trackHorizontal.getBoundingClientRect(),
-                trackLeft = _trackHorizontal$getB.left;
-
             var thumbWidth = this.getThumbHorizontalWidth();
-            var clickPosition = thumbWidth - this.prevPageX;
-            var offset = -trackLeft + clientX - clickPosition;
+            var offset = Math.abs(targetLeft - clientX) - thumbWidth / 2;
             view.scrollLeft = this.getScrollLeftForOffset(offset);
         }
-        if (this.prevPageY) {
-            var clientY = event.clientY;
-            var _refs8 = this.refs,
-                _view = _refs8.view,
-                trackVertical = _refs8.trackVertical;
+    }, {
+        key: 'handleVerticalTrackMouseDown',
+        value: function handleVerticalTrackMouseDown(event) {
+            event.preventDefault();
+            var view = this.refs.view;
+            var target = event.target,
+                clientY = event.clientY;
 
-            var _trackVertical$getBou = trackVertical.getBoundingClientRect(),
-                trackTop = _trackVertical$getBou.top;
+            var _target$getBoundingCl2 = target.getBoundingClientRect(),
+                targetTop = _target$getBoundingCl2.top;
 
             var thumbHeight = this.getThumbVerticalHeight();
-            var _clickPosition = thumbHeight - this.prevPageY;
-            var _offset = -trackTop + clientY - _clickPosition;
-            _view.scrollTop = this.getScrollTopForOffset(_offset);
+            var offset = Math.abs(targetTop - clientY) - thumbHeight / 2;
+            view.scrollTop = this.getScrollTopForOffset(offset);
         }
-        return false;
-    },
-    handleDragEnd: function handleDragEnd() {
-        this.dragging = false;
-        this.prevPageX = this.prevPageY = 0;
-        this.teardownDragging();
-        this.handleDragEndAutoHide();
-    },
-    handleDragEndAutoHide: function handleDragEndAutoHide() {
-        var autoHide = this.props.autoHide;
+    }, {
+        key: 'handleHorizontalThumbMouseDown',
+        value: function handleHorizontalThumbMouseDown(event) {
+            event.preventDefault();
+            this.handleDragStart(event);
+            var target = event.target,
+                clientX = event.clientX;
+            var offsetWidth = target.offsetWidth;
 
-        if (!autoHide) return;
-        this.hideTracks();
-    },
-    handleTrackMouseEnter: function handleTrackMouseEnter() {
-        this.trackMouseOver = true;
-        this.handleTrackMouseEnterAutoHide();
-    },
-    handleTrackMouseEnterAutoHide: function handleTrackMouseEnterAutoHide() {
-        var autoHide = this.props.autoHide;
+            var _target$getBoundingCl3 = target.getBoundingClientRect(),
+                left = _target$getBoundingCl3.left;
 
-        if (!autoHide) return;
-        this.showTracks();
-    },
-    handleTrackMouseLeave: function handleTrackMouseLeave() {
-        this.trackMouseOver = false;
-        this.handleTrackMouseLeaveAutoHide();
-    },
-    handleTrackMouseLeaveAutoHide: function handleTrackMouseLeaveAutoHide() {
-        var autoHide = this.props.autoHide;
+            this.prevPageX = offsetWidth - (clientX - left);
+        }
+    }, {
+        key: 'handleVerticalThumbMouseDown',
+        value: function handleVerticalThumbMouseDown(event) {
+            event.preventDefault();
+            this.handleDragStart(event);
+            var target = event.target,
+                clientY = event.clientY;
+            var offsetHeight = target.offsetHeight;
 
-        if (!autoHide) return;
-        this.hideTracks();
-    },
-    showTracks: function showTracks() {
-        var _refs9 = this.refs,
-            trackHorizontal = _refs9.trackHorizontal,
-            trackVertical = _refs9.trackVertical;
+            var _target$getBoundingCl4 = target.getBoundingClientRect(),
+                top = _target$getBoundingCl4.top;
 
-        clearTimeout(this.hideTracksTimeout);
-        (0, _domCss2["default"])(trackHorizontal, { opacity: 1 });
-        (0, _domCss2["default"])(trackVertical, { opacity: 1 });
-    },
-    hideTracks: function hideTracks() {
-        if (this.dragging) return;
-        if (this.scrolling) return;
-        if (this.trackMouseOver) return;
-        var autoHideTimeout = this.props.autoHideTimeout;
-        var _refs10 = this.refs,
-            trackHorizontal = _refs10.trackHorizontal,
-            trackVertical = _refs10.trackVertical;
+            this.prevPageY = offsetHeight - (clientY - top);
+        }
+    }, {
+        key: 'setupDragging',
+        value: function setupDragging() {
+            (0, _domCss2["default"])(document.body, _styles.disableSelectStyle);
+            document.addEventListener('mousemove', this.handleDrag);
+            document.addEventListener('mouseup', this.handleDragEnd);
+            document.onselectstart = _returnFalse2["default"];
+        }
+    }, {
+        key: 'teardownDragging',
+        value: function teardownDragging() {
+            (0, _domCss2["default"])(document.body, _styles.disableSelectStyleReset);
+            document.removeEventListener('mousemove', this.handleDrag);
+            document.removeEventListener('mouseup', this.handleDragEnd);
+            document.onselectstart = undefined;
+        }
+    }, {
+        key: 'handleDragStart',
+        value: function handleDragStart(event) {
+            this.dragging = true;
+            event.stopImmediatePropagation();
+            this.setupDragging();
+        }
+    }, {
+        key: 'handleDrag',
+        value: function handleDrag(event) {
+            if (this.prevPageX) {
+                var clientX = event.clientX;
+                var _refs7 = this.refs,
+                    view = _refs7.view,
+                    trackHorizontal = _refs7.trackHorizontal;
 
-        clearTimeout(this.hideTracksTimeout);
-        this.hideTracksTimeout = setTimeout(function () {
-            (0, _domCss2["default"])(trackHorizontal, { opacity: 0 });
-            (0, _domCss2["default"])(trackVertical, { opacity: 0 });
-        }, autoHideTimeout);
-    },
-    detectScrolling: function detectScrolling() {
-        var _this2 = this;
+                var _trackHorizontal$getB = trackHorizontal.getBoundingClientRect(),
+                    trackLeft = _trackHorizontal$getB.left;
 
-        if (this.scrolling) return;
-        this.scrolling = true;
-        this.handleScrollStart();
-        this.detectScrollingInterval = setInterval(function () {
-            if (_this2.lastViewScrollLeft === _this2.viewScrollLeft && _this2.lastViewScrollTop === _this2.viewScrollTop) {
-                clearInterval(_this2.detectScrollingInterval);
-                _this2.scrolling = false;
-                _this2.handleScrollStop();
+                var thumbWidth = this.getThumbHorizontalWidth();
+                var clickPosition = thumbWidth - this.prevPageX;
+                var offset = -trackLeft + clientX - clickPosition;
+                view.scrollLeft = this.getScrollLeftForOffset(offset);
             }
-            _this2.lastViewScrollLeft = _this2.viewScrollLeft;
-            _this2.lastViewScrollTop = _this2.viewScrollTop;
-        }, 100);
-    },
-    raf: function raf(callback) {
-        var _this3 = this;
+            if (this.prevPageY) {
+                var clientY = event.clientY;
+                var _refs8 = this.refs,
+                    _view = _refs8.view,
+                    trackVertical = _refs8.trackVertical;
 
-        if (this.requestFrame) _raf3["default"].cancel(this.requestFrame);
-        this.requestFrame = (0, _raf3["default"])(function () {
-            _this3.requestFrame = undefined;
-            callback();
-        });
-    },
-    update: function update(callback) {
-        var _this4 = this;
+                var _trackVertical$getBou = trackVertical.getBoundingClientRect(),
+                    trackTop = _trackVertical$getBou.top;
 
-        this.raf(function () {
-            return _this4._update(callback);
-        });
-    },
-    _update: function _update(callback) {
-        var _props4 = this.props,
-            onUpdate = _props4.onUpdate,
-            hideTracksWhenNotNeeded = _props4.hideTracksWhenNotNeeded;
+                var thumbHeight = this.getThumbVerticalHeight();
+                var _clickPosition = thumbHeight - this.prevPageY;
+                var _offset = -trackTop + clientY - _clickPosition;
+                _view.scrollTop = this.getScrollTopForOffset(_offset);
+            }
+            return false;
+        }
+    }, {
+        key: 'handleDragEnd',
+        value: function handleDragEnd() {
+            this.dragging = false;
+            this.prevPageX = this.prevPageY = 0;
+            this.teardownDragging();
+            this.handleDragEndAutoHide();
+        }
+    }, {
+        key: 'handleDragEndAutoHide',
+        value: function handleDragEndAutoHide() {
+            var autoHide = this.props.autoHide;
 
-        var values = this.getValues();
-        if ((0, _getScrollbarWidth2["default"])()) {
-            var _refs11 = this.refs,
-                thumbHorizontal = _refs11.thumbHorizontal,
-                thumbVertical = _refs11.thumbVertical,
-                trackHorizontal = _refs11.trackHorizontal,
-                trackVertical = _refs11.trackVertical;
-            var scrollLeft = values.scrollLeft,
-                clientWidth = values.clientWidth,
-                scrollWidth = values.scrollWidth;
+            if (!autoHide) return;
+            this.hideTracks();
+        }
+    }, {
+        key: 'handleTrackMouseEnter',
+        value: function handleTrackMouseEnter() {
+            this.trackMouseOver = true;
+            this.handleTrackMouseEnterAutoHide();
+        }
+    }, {
+        key: 'handleTrackMouseEnterAutoHide',
+        value: function handleTrackMouseEnterAutoHide() {
+            var autoHide = this.props.autoHide;
 
-            var trackHorizontalWidth = (0, _getInnerWidth2["default"])(trackHorizontal);
-            var thumbHorizontalWidth = this.getThumbHorizontalWidth();
-            var thumbHorizontalX = scrollLeft / (scrollWidth - clientWidth) * (trackHorizontalWidth - thumbHorizontalWidth);
-            var thumbHorizontalStyle = {
-                width: thumbHorizontalWidth,
-                transform: 'translateX(' + thumbHorizontalX + 'px)'
-            };
-            var scrollTop = values.scrollTop,
-                clientHeight = values.clientHeight,
-                scrollHeight = values.scrollHeight;
+            if (!autoHide) return;
+            this.showTracks();
+        }
+    }, {
+        key: 'handleTrackMouseLeave',
+        value: function handleTrackMouseLeave() {
+            this.trackMouseOver = false;
+            this.handleTrackMouseLeaveAutoHide();
+        }
+    }, {
+        key: 'handleTrackMouseLeaveAutoHide',
+        value: function handleTrackMouseLeaveAutoHide() {
+            var autoHide = this.props.autoHide;
 
-            var trackVerticalHeight = (0, _getInnerHeight2["default"])(trackVertical);
-            var thumbVerticalHeight = this.getThumbVerticalHeight();
-            var thumbVerticalY = scrollTop / (scrollHeight - clientHeight) * (trackVerticalHeight - thumbVerticalHeight);
-            var thumbVerticalStyle = {
-                height: thumbVerticalHeight,
-                transform: 'translateY(' + thumbVerticalY + 'px)'
-            };
-            if (hideTracksWhenNotNeeded) {
-                var trackHorizontalStyle = {
-                    visibility: scrollWidth > clientWidth ? 'visible' : 'hidden'
+            if (!autoHide) return;
+            this.hideTracks();
+        }
+    }, {
+        key: 'showTracks',
+        value: function showTracks() {
+            var _refs9 = this.refs,
+                trackHorizontal = _refs9.trackHorizontal,
+                trackVertical = _refs9.trackVertical;
+
+            clearTimeout(this.hideTracksTimeout);
+            (0, _domCss2["default"])(trackHorizontal, { opacity: 1 });
+            (0, _domCss2["default"])(trackVertical, { opacity: 1 });
+        }
+    }, {
+        key: 'hideTracks',
+        value: function hideTracks() {
+            if (this.dragging) return;
+            if (this.scrolling) return;
+            if (this.trackMouseOver) return;
+            var autoHideTimeout = this.props.autoHideTimeout;
+            var _refs10 = this.refs,
+                trackHorizontal = _refs10.trackHorizontal,
+                trackVertical = _refs10.trackVertical;
+
+            clearTimeout(this.hideTracksTimeout);
+            this.hideTracksTimeout = setTimeout(function () {
+                (0, _domCss2["default"])(trackHorizontal, { opacity: 0 });
+                (0, _domCss2["default"])(trackVertical, { opacity: 0 });
+            }, autoHideTimeout);
+        }
+    }, {
+        key: 'detectScrolling',
+        value: function detectScrolling() {
+            var _this3 = this;
+
+            if (this.scrolling) return;
+            this.scrolling = true;
+            this.handleScrollStart();
+            this.detectScrollingInterval = setInterval(function () {
+                if (_this3.lastViewScrollLeft === _this3.viewScrollLeft && _this3.lastViewScrollTop === _this3.viewScrollTop) {
+                    clearInterval(_this3.detectScrollingInterval);
+                    _this3.scrolling = false;
+                    _this3.handleScrollStop();
+                }
+                _this3.lastViewScrollLeft = _this3.viewScrollLeft;
+                _this3.lastViewScrollTop = _this3.viewScrollTop;
+            }, 100);
+        }
+    }, {
+        key: 'raf',
+        value: function raf(callback) {
+            var _this4 = this;
+
+            if (this.requestFrame) _raf3["default"].cancel(this.requestFrame);
+            this.requestFrame = (0, _raf3["default"])(function () {
+                _this4.requestFrame = undefined;
+                callback();
+            });
+        }
+    }, {
+        key: 'update',
+        value: function update(callback) {
+            var _this5 = this;
+
+            this.raf(function () {
+                return _this5._update(callback);
+            });
+        }
+    }, {
+        key: '_update',
+        value: function _update(callback) {
+            var _props4 = this.props,
+                onUpdate = _props4.onUpdate,
+                hideTracksWhenNotNeeded = _props4.hideTracksWhenNotNeeded;
+
+            var values = this.getValues();
+            if ((0, _getScrollbarWidth2["default"])()) {
+                var _refs11 = this.refs,
+                    thumbHorizontal = _refs11.thumbHorizontal,
+                    thumbVertical = _refs11.thumbVertical,
+                    trackHorizontal = _refs11.trackHorizontal,
+                    trackVertical = _refs11.trackVertical;
+                var scrollLeft = values.scrollLeft,
+                    clientWidth = values.clientWidth,
+                    scrollWidth = values.scrollWidth;
+
+                var trackHorizontalWidth = (0, _getInnerWidth2["default"])(trackHorizontal);
+                var thumbHorizontalWidth = this.getThumbHorizontalWidth();
+                var thumbHorizontalX = scrollLeft / (scrollWidth - clientWidth) * (trackHorizontalWidth - thumbHorizontalWidth);
+                var thumbHorizontalStyle = {
+                    width: thumbHorizontalWidth,
+                    transform: 'translateX(' + thumbHorizontalX + 'px)'
                 };
-                var trackVerticalStyle = {
-                    visibility: scrollHeight > clientHeight ? 'visible' : 'hidden'
+                var scrollTop = values.scrollTop,
+                    clientHeight = values.clientHeight,
+                    scrollHeight = values.scrollHeight;
+
+                var trackVerticalHeight = (0, _getInnerHeight2["default"])(trackVertical);
+                var thumbVerticalHeight = this.getThumbVerticalHeight();
+                var thumbVerticalY = scrollTop / (scrollHeight - clientHeight) * (trackVerticalHeight - thumbVerticalHeight);
+                var thumbVerticalStyle = {
+                    height: thumbVerticalHeight,
+                    transform: 'translateY(' + thumbVerticalY + 'px)'
                 };
-                (0, _domCss2["default"])(trackHorizontal, trackHorizontalStyle);
-                (0, _domCss2["default"])(trackVertical, trackVerticalStyle);
+                if (hideTracksWhenNotNeeded) {
+                    var trackHorizontalStyle = {
+                        visibility: scrollWidth > clientWidth ? 'visible' : 'hidden'
+                    };
+                    var trackVerticalStyle = {
+                        visibility: scrollHeight > clientHeight ? 'visible' : 'hidden'
+                    };
+                    (0, _domCss2["default"])(trackHorizontal, trackHorizontalStyle);
+                    (0, _domCss2["default"])(trackVertical, trackVerticalStyle);
+                }
+                (0, _domCss2["default"])(thumbHorizontal, thumbHorizontalStyle);
+                (0, _domCss2["default"])(thumbVertical, thumbVerticalStyle);
             }
-            (0, _domCss2["default"])(thumbHorizontal, thumbHorizontalStyle);
-            (0, _domCss2["default"])(thumbVertical, thumbVerticalStyle);
+            if (onUpdate) onUpdate(values);
+            if (typeof callback !== 'function') return;
+            callback(values);
         }
-        if (onUpdate) onUpdate(values);
-        if (typeof callback !== 'function') return;
-        callback(values);
-    },
-    render: function render() {
-        var scrollbarWidth = (0, _getScrollbarWidth2["default"])();
-        /* eslint-disable no-unused-vars */
+    }, {
+        key: 'render',
+        value: function render() {
+            var scrollbarWidth = (0, _getScrollbarWidth2["default"])();
+            /* eslint-disable no-unused-vars */
 
-        var _props5 = this.props,
-            onScroll = _props5.onScroll,
-            onScrollFrame = _props5.onScrollFrame,
-            onScrollStart = _props5.onScrollStart,
-            onScrollStop = _props5.onScrollStop,
-            onUpdate = _props5.onUpdate,
-            renderView = _props5.renderView,
-            renderTrackHorizontal = _props5.renderTrackHorizontal,
-            renderTrackVertical = _props5.renderTrackVertical,
-            renderThumbHorizontal = _props5.renderThumbHorizontal,
-            renderThumbVertical = _props5.renderThumbVertical,
-            tagName = _props5.tagName,
-            hideTracksWhenNotNeeded = _props5.hideTracksWhenNotNeeded,
-            autoHide = _props5.autoHide,
-            autoHideTimeout = _props5.autoHideTimeout,
-            autoHideDuration = _props5.autoHideDuration,
-            thumbSize = _props5.thumbSize,
-            thumbMinSize = _props5.thumbMinSize,
-            universal = _props5.universal,
-            autoHeight = _props5.autoHeight,
-            autoHeightMin = _props5.autoHeightMin,
-            autoHeightMax = _props5.autoHeightMax,
-            style = _props5.style,
-            children = _props5.children,
-            props = _objectWithoutProperties(_props5, ['onScroll', 'onScrollFrame', 'onScrollStart', 'onScrollStop', 'onUpdate', 'renderView', 'renderTrackHorizontal', 'renderTrackVertical', 'renderThumbHorizontal', 'renderThumbVertical', 'tagName', 'hideTracksWhenNotNeeded', 'autoHide', 'autoHideTimeout', 'autoHideDuration', 'thumbSize', 'thumbMinSize', 'universal', 'autoHeight', 'autoHeightMin', 'autoHeightMax', 'style', 'children']);
-        /* eslint-enable no-unused-vars */
+            var _props5 = this.props,
+                onScroll = _props5.onScroll,
+                onScrollFrame = _props5.onScrollFrame,
+                onScrollStart = _props5.onScrollStart,
+                onScrollStop = _props5.onScrollStop,
+                onUpdate = _props5.onUpdate,
+                renderView = _props5.renderView,
+                renderTrackHorizontal = _props5.renderTrackHorizontal,
+                renderTrackVertical = _props5.renderTrackVertical,
+                renderThumbHorizontal = _props5.renderThumbHorizontal,
+                renderThumbVertical = _props5.renderThumbVertical,
+                tagName = _props5.tagName,
+                hideTracksWhenNotNeeded = _props5.hideTracksWhenNotNeeded,
+                autoHide = _props5.autoHide,
+                autoHideTimeout = _props5.autoHideTimeout,
+                autoHideDuration = _props5.autoHideDuration,
+                thumbSize = _props5.thumbSize,
+                thumbMinSize = _props5.thumbMinSize,
+                universal = _props5.universal,
+                autoHeight = _props5.autoHeight,
+                autoHeightMin = _props5.autoHeightMin,
+                autoHeightMax = _props5.autoHeightMax,
+                style = _props5.style,
+                children = _props5.children,
+                props = _objectWithoutProperties(_props5, ['onScroll', 'onScrollFrame', 'onScrollStart', 'onScrollStop', 'onUpdate', 'renderView', 'renderTrackHorizontal', 'renderTrackVertical', 'renderThumbHorizontal', 'renderThumbVertical', 'tagName', 'hideTracksWhenNotNeeded', 'autoHide', 'autoHideTimeout', 'autoHideDuration', 'thumbSize', 'thumbMinSize', 'universal', 'autoHeight', 'autoHeightMin', 'autoHeightMax', 'style', 'children']);
+            /* eslint-enable no-unused-vars */
 
-        var didMountUniversal = this.state.didMountUniversal;
+            var didMountUniversal = this.state.didMountUniversal;
 
 
-        var containerStyle = _extends({}, _styles.containerStyleDefault, autoHeight && _extends({}, _styles.containerStyleAutoHeight, {
-            minHeight: autoHeightMin,
-            maxHeight: autoHeightMax
-        }), style);
+            var containerStyle = _extends({}, _styles.containerStyleDefault, autoHeight && _extends({}, _styles.containerStyleAutoHeight, {
+                minHeight: autoHeightMin,
+                maxHeight: autoHeightMax
+            }), style);
 
-        var viewStyle = _extends({}, _styles.viewStyleDefault, {
-            // Hide scrollbars by setting a negative margin
-            marginRight: scrollbarWidth ? -scrollbarWidth : 0,
-            marginBottom: scrollbarWidth ? -scrollbarWidth : 0
-        }, autoHeight && _extends({}, _styles.viewStyleAutoHeight, {
-            // Add scrollbarWidth to autoHeight in order to compensate negative margins
-            minHeight: (0, _isString2["default"])(autoHeightMin) ? 'calc(' + autoHeightMin + ' + ' + scrollbarWidth + 'px)' : autoHeightMin + scrollbarWidth,
-            maxHeight: (0, _isString2["default"])(autoHeightMax) ? 'calc(' + autoHeightMax + ' + ' + scrollbarWidth + 'px)' : autoHeightMax + scrollbarWidth
-        }), autoHeight && universal && !didMountUniversal && {
-            minHeight: autoHeightMin,
-            maxHeight: autoHeightMax
-        }, universal && !didMountUniversal && _styles.viewStyleUniversalInitial);
+            var viewStyle = _extends({}, _styles.viewStyleDefault, {
+                // Hide scrollbars by setting a negative margin
+                marginRight: scrollbarWidth ? -scrollbarWidth : 0,
+                marginBottom: scrollbarWidth ? -scrollbarWidth : 0
+            }, autoHeight && _extends({}, _styles.viewStyleAutoHeight, {
+                // Add scrollbarWidth to autoHeight in order to compensate negative margins
+                minHeight: (0, _isString2["default"])(autoHeightMin) ? 'calc(' + autoHeightMin + ' + ' + scrollbarWidth + 'px)' : autoHeightMin + scrollbarWidth,
+                maxHeight: (0, _isString2["default"])(autoHeightMax) ? 'calc(' + autoHeightMax + ' + ' + scrollbarWidth + 'px)' : autoHeightMax + scrollbarWidth
+            }), autoHeight && universal && !didMountUniversal && {
+                minHeight: autoHeightMin,
+                maxHeight: autoHeightMax
+            }, universal && !didMountUniversal && _styles.viewStyleUniversalInitial);
 
-        var trackAutoHeightStyle = {
-            transition: 'opacity ' + autoHideDuration + 'ms',
-            opacity: 0
-        };
+            var trackAutoHeightStyle = {
+                transition: 'opacity ' + autoHideDuration + 'ms',
+                opacity: 0
+            };
 
-        var trackHorizontalStyle = _extends({}, _styles.trackHorizontalStyleDefault, autoHide && trackAutoHeightStyle, (!scrollbarWidth || universal && !didMountUniversal) && {
-            display: 'none'
-        });
+            var trackHorizontalStyle = _extends({}, _styles.trackHorizontalStyleDefault, autoHide && trackAutoHeightStyle, (!scrollbarWidth || universal && !didMountUniversal) && {
+                display: 'none'
+            });
 
-        var trackVerticalStyle = _extends({}, _styles.trackVerticalStyleDefault, autoHide && trackAutoHeightStyle, (!scrollbarWidth || universal && !didMountUniversal) && {
-            display: 'none'
-        });
+            var trackVerticalStyle = _extends({}, _styles.trackVerticalStyleDefault, autoHide && trackAutoHeightStyle, (!scrollbarWidth || universal && !didMountUniversal) && {
+                display: 'none'
+            });
 
-        return (0, _react.createElement)(tagName, _extends({}, props, { style: containerStyle, ref: 'container' }), [(0, _react.cloneElement)(renderView({ style: viewStyle }), { key: 'view', ref: 'view' }, children), (0, _react.cloneElement)(renderTrackHorizontal({ style: trackHorizontalStyle }), { key: 'trackHorizontal', ref: 'trackHorizontal' }, (0, _react.cloneElement)(renderThumbHorizontal({ style: _styles.thumbHorizontalStyleDefault }), { ref: 'thumbHorizontal' })), (0, _react.cloneElement)(renderTrackVertical({ style: trackVerticalStyle }), { key: 'trackVertical', ref: 'trackVertical' }, (0, _react.cloneElement)(renderThumbVertical({ style: _styles.thumbVerticalStyleDefault }), { ref: 'thumbVertical' }))]);
-    }
-});
+            return (0, _react.createElement)(tagName, _extends({}, props, { style: containerStyle, ref: 'container' }), [(0, _react.cloneElement)(renderView({ style: viewStyle }), { key: 'view', ref: 'view' }, children), (0, _react.cloneElement)(renderTrackHorizontal({ style: trackHorizontalStyle }), { key: 'trackHorizontal', ref: 'trackHorizontal' }, (0, _react.cloneElement)(renderThumbHorizontal({ style: _styles.thumbHorizontalStyleDefault }), { ref: 'thumbHorizontal' })), (0, _react.cloneElement)(renderTrackVertical({ style: trackVerticalStyle }), { key: 'trackVertical', ref: 'trackVertical' }, (0, _react.cloneElement)(renderThumbVertical({ style: _styles.thumbVerticalStyleDefault }), { ref: 'thumbVertical' }))]);
+        }
+    }]);
+
+    return Scrollbars;
+}(_react.Component);
+
+exports["default"] = Scrollbars;
+
+
+Scrollbars.propTypes = {
+    onScroll: _propTypes2["default"].func,
+    onScrollFrame: _propTypes2["default"].func,
+    onScrollStart: _propTypes2["default"].func,
+    onScrollStop: _propTypes2["default"].func,
+    onUpdate: _propTypes2["default"].func,
+    renderView: _propTypes2["default"].func,
+    renderTrackHorizontal: _propTypes2["default"].func,
+    renderTrackVertical: _propTypes2["default"].func,
+    renderThumbHorizontal: _propTypes2["default"].func,
+    renderThumbVertical: _propTypes2["default"].func,
+    tagName: _propTypes2["default"].string,
+    thumbSize: _propTypes2["default"].number,
+    thumbMinSize: _propTypes2["default"].number,
+    hideTracksWhenNotNeeded: _propTypes2["default"].bool,
+    autoHide: _propTypes2["default"].bool,
+    autoHideTimeout: _propTypes2["default"].number,
+    autoHideDuration: _propTypes2["default"].number,
+    autoHeight: _propTypes2["default"].bool,
+    autoHeightMin: _propTypes2["default"].oneOfType([_propTypes2["default"].number, _propTypes2["default"].string]),
+    autoHeightMax: _propTypes2["default"].oneOfType([_propTypes2["default"].number, _propTypes2["default"].string]),
+    universal: _propTypes2["default"].bool,
+    style: _propTypes2["default"].object,
+    children: _propTypes2["default"].node
+};
+
+Scrollbars.defaultProps = {
+    renderView: _defaultRenderElements.renderViewDefault,
+    renderTrackHorizontal: _defaultRenderElements.renderTrackHorizontalDefault,
+    renderTrackVertical: _defaultRenderElements.renderTrackVerticalDefault,
+    renderThumbHorizontal: _defaultRenderElements.renderThumbHorizontalDefault,
+    renderThumbVertical: _defaultRenderElements.renderThumbVerticalDefault,
+    tagName: 'div',
+    thumbMinSize: 30,
+    hideTracksWhenNotNeeded: false,
+    autoHide: false,
+    autoHideTimeout: 1000,
+    autoHideDuration: 200,
+    autoHeight: false,
+    autoHeightMin: 0,
+    autoHeightMax: 200,
+    universal: false
+};

package.json

 {
   "name": "react-custom-scrollbars",
-  "version": "4.0.2",
+  "version": "4.1.0",
   "description": "React scrollbars component",
   "main": "lib/index.js",
-  "typings": "index.d.ts",
   "scripts": {
     "clean": "rimraf lib dist",
     "build": "babel src --out-dir lib",
-    "build:umd": "NODE_ENV=development webpack src/index.js dist/react-custom-scrollbars.js",
-    "build:umd:min": "NODE_ENV=production webpack src/index.js dist/react-custom-scrollbars.min.js",
+    "build:umd": "cross-env NODE_ENV=development webpack src/index.js dist/react-custom-scrollbars.js",
+    "build:umd:min": "cross-env NODE_ENV=production webpack src/index.js dist/react-custom-scrollbars.min.js",
     "lint": "eslint src test examples",
-    "test": "NODE_ENV=test karma start",
-    "test:watch": "NODE_ENV=test karma start --auto-watch --no-single-run",
-    "test:cov": "NODE_ENV=test COVERAGE=true karma start --single-run",
+    "test": "cross-env NODE_ENV=test karma start",
+    "test:watch": "cross-env NODE_ENV=test karma start --auto-watch --no-single-run",
+    "test:cov": "cross-env NODE_ENV=test COVERAGE=true karma start --single-run",
     "prepublish": "npm run lint && npm run test && npm run clean && npm run build && npm run build:umd && npm run build:umd:min && node ./prepublish"
@@ -46,2 +45,3 @@ },
     "babel-runtime": "^6.3.19",
+    "cross-env": "^3.1.3",
     "es3ify": "^0.2.1",
@@ -79,4 +79,5 @@ "eslint": "^2.9.0",
     "dom-css": "^2.0.0",
+    "prop-types": "^15.5.8",
     "raf": "^3.1.0"
   }
 }

No alert changes

Improved metrics

Total package byte prevSize

343282

increased by147.8%

Lines of code

3162

increased by39.54%

Worsened metrics

Dependency count

5

increased by25%

Dev dependency count

35

increased by2.94%

Dependency changes

• + Addedprop-types@^15.5.8