react-custom-scrollbars - npm Package Compare versions

Comparing version 3.1.0 to 4.0.0-beta.1

dist/react-custom-scrollbars.js

@@ -291,7 +291,11 @@ (function webpackUniversalModuleDefinition(root, factory) {
 	        renderThumbVertical: _react.PropTypes.func,
+	        thumbSize: _react.PropTypes.number,
+	        thumbMinSize: _react.PropTypes.number,
+	        hideTracksWhenNotNeeded: _react.PropTypes.bool,
 	        autoHide: _react.PropTypes.bool,
 	        autoHideTimeout: _react.PropTypes.number,
 	        autoHideDuration: _react.PropTypes.number,
-	        thumbSize: _react.PropTypes.number,
-	        thumbMinSize: _react.PropTypes.number,
+	        autoHeight: _react.PropTypes.bool,
+	        autoHeightMin: _react.PropTypes.number,
+	        autoHeightMax: _react.PropTypes.number,
 	        universal: _react.PropTypes.bool,
@@ -309,6 +313,10 @@ style: _react.PropTypes.object,
 	            renderThumbVertical: _defaultRenderElements.renderThumbVerticalDefault,
+	            thumbMinSize: 30,
+	            hideTracksWhenNotNeeded: false,
 	            autoHide: false,
 	            autoHideTimeout: 1000,
 	            autoHideDuration: 200,
-	            thumbMinSize: 30,
+	            autoHeight: false,
+	            autoHeightMin: 0,
+	            autoHeightMax: 200,
 	            universal: false
@@ -757,3 +765,5 @@ };
 	        this.raf(function () {
-	            var onUpdate = _this4.props.onUpdate;
+	            var _props4 = _this4.props;
+	            var onUpdate = _props4.onUpdate;
+	            var hideTracksWhenNotNeeded = _props4.hideTracksWhenNotNeeded;
 
@@ -789,2 +799,12 @@ var values = _this4.getValues();
 	                };
+	                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);
@@ -800,22 +820,25 @@ (0, _domCss2["default"])(thumbVertical, thumbVerticalStyle);
 	        var scrollbarWidth = (0, _getScrollbarWidth2["default"])();
-	        var _props4 = this.props;
-	        var onScroll = _props4.onScroll;
-	        var onScrollFrame = _props4.onScrollFrame;
-	        var onScrollStart = _props4.onScrollStart;
-	        var onScrollStop = _props4.onScrollStop;
-	        var renderView = _props4.renderView;
-	        var renderTrackHorizontal = _props4.renderTrackHorizontal;
-	        var renderTrackVertical = _props4.renderTrackVertical;
-	        var renderThumbHorizontal = _props4.renderThumbHorizontal;
-	        var renderThumbVertical = _props4.renderThumbVertical;
-	        var autoHide = _props4.autoHide;
-	        var autoHideTimeout = _props4.autoHideTimeout;
-	        var autoHideDuration = _props4.autoHideDuration;
-	        var thumbSize = _props4.thumbSize;
-	        var thumbMinSize = _props4.thumbMinSize;
-	        var universal = _props4.universal;
-	        var style = _props4.style;
-	        var children = _props4.children;
+	        var _props5 = this.props;
+	        var onScroll = _props5.onScroll;
+	        var onScrollFrame = _props5.onScrollFrame;
+	        var onScrollStart = _props5.onScrollStart;
+	        var onScrollStop = _props5.onScrollStop;
+	        var renderView = _props5.renderView;
+	        var renderTrackHorizontal = _props5.renderTrackHorizontal;
+	        var renderTrackVertical = _props5.renderTrackVertical;
+	        var renderThumbHorizontal = _props5.renderThumbHorizontal;
+	        var renderThumbVertical = _props5.renderThumbVertical;
+	        var autoHide = _props5.autoHide;
+	        var autoHideTimeout = _props5.autoHideTimeout;
+	        var autoHideDuration = _props5.autoHideDuration;
+	        var thumbSize = _props5.thumbSize;
+	        var thumbMinSize = _props5.thumbMinSize;
+	        var universal = _props5.universal;
+	        var autoHeight = _props5.autoHeight;
+	        var autoHeightMin = _props5.autoHeightMin;
+	        var autoHeightMax = _props5.autoHeightMax;
+	        var style = _props5.style;
+	        var children = _props5.children;
 
-	        var props = _objectWithoutProperties(_props4, ['onScroll', 'onScrollFrame', 'onScrollStart', 'onScrollStop', 'renderView', 'renderTrackHorizontal', 'renderTrackVertical', 'renderThumbHorizontal', 'renderThumbVertical', 'autoHide', 'autoHideTimeout', 'autoHideDuration', 'thumbSize', 'thumbMinSize', 'universal', 'style', 'children']);
+	        var props = _objectWithoutProperties(_props5, ['onScroll', 'onScrollFrame', 'onScrollStart', 'onScrollStop', 'renderView', 'renderTrackHorizontal', 'renderTrackVertical', 'renderThumbHorizontal', 'renderThumbVertical', 'autoHide', 'autoHideTimeout', 'autoHideDuration', 'thumbSize', 'thumbMinSize', 'universal', 'autoHeight', 'autoHeightMin', 'autoHeightMax', 'style', 'children']);
 
@@ -825,9 +848,29 @@ var didMountUniversal = this.state.didMountUniversal;
 
-	        var containerStyle = _extends({}, _styles.containerStyleDefault, style);
+	        var containerStyle = _extends({}, _styles.containerStyleDefault, autoHeight && _extends({}, _styles.containerStyleAutoHeight, {
+	            minHeight: autoHeightMin,
+	            maxHeight: autoHeightMax
+	        }), style);
 
-	        var viewStyle = _extends({}, _styles.viewStyleDefault, scrollbarWidth ? { right: -scrollbarWidth, bottom: -scrollbarWidth } : { right: 0, bottom: 0 }, universal && !didMountUniversal ? _styles.viewStyleUniversalInitial : undefined);
+	        var viewStyle = _extends({}, _styles.viewStyleDefault, {
+	            // Hide scrollbars by setting a negative margin
+	            marginRight: scrollbarWidth ? -scrollbarWidth : 0,
+	            marginBottom: scrollbarWidth ? -scrollbarWidth : 0
+	        }, autoHeight && _extends({}, _styles.viewStyleAutoHeight, {
+	            minHeight: autoHeightMin + scrollbarWidth,
+	            maxHeight: autoHeightMax + scrollbarWidth
+	        }), universal && !didMountUniversal && _styles.viewStyleUniversalInitial);
 
-	        var trackHorizontalStyle = _extends({}, _styles.trackHorizontalStyleDefault, autoHide ? { transition: 'opacity ' + autoHideDuration + 'ms', opacity: 0 } : undefined, !scrollbarWidth || universal && !didMountUniversal ? { display: 'none' } : undefined);
+	        var trackHorizontalStyle = _extends({}, _styles.trackHorizontalStyleDefault, autoHide && {
+	            transition: 'opacity ' + autoHideDuration + 'ms',
+	            opacity: 0
+	        }, (!scrollbarWidth || universal) && !didMountUniversal && {
+	            display: 'none'
+	        });
 
-	        var trackVerticalStyle = _extends({}, _styles.trackVerticalStyleDefault, autoHide ? { transition: 'opacity ' + autoHideDuration + 'ms', opacity: 0 } : undefined, !scrollbarWidth || universal && !didMountUniversal ? { display: 'none' } : undefined);
+	        var trackVerticalStyle = _extends({}, _styles.trackVerticalStyleDefault, autoHide && {
+	            transition: 'opacity ' + autoHideDuration + 'ms',
+	            opacity: 0
+	        }, (!scrollbarWidth || universal) && !didMountUniversal && {
+	            display: 'none'
+	        });
 
@@ -860,2 +903,7 @@ return _react2["default"].createElement(
 
+	// Overrides containerStyleDefault properties
+	var containerStyleAutoHeight = exports.containerStyleAutoHeight = {
+	    height: 'auto'
+	};
+
 	var viewStyleDefault = exports.viewStyleDefault = {
@@ -865,2 +913,4 @@ position: 'absolute',
 	    left: 0,
+	    right: 0,
+	    bottom: 0,
 	    overflow: 'scroll',
@@ -870,6 +920,15 @@ WebkitOverflowScrolling: 'touch'
 
+	// Overrides viewStyleDefault properties
+	var viewStyleAutoHeight = exports.viewStyleAutoHeight = {
+	    position: 'relative',
+	    top: undefined,
+	    left: undefined,
+	    right: undefined,
+	    bottom: undefined
+	};
+
 	var viewStyleUniversalInitial = exports.viewStyleUniversalInitial = {
-	    right: 0,
-	    bottom: 0,
-	    overflow: 'hidden'
+	    overflow: 'hidden',
+	    marginRight: 0,
+	    marginBottom: 0
 	};
@@ -876,0 +935,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(4),i=n(o);t["default"]=i["default"],t.Scrollbars=i["default"]},function(e,t,r){function n(e,t,r){var n=u[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=s(e),r=a(t);return u[t]=u[e]=u[r]=r,r}function l(){2===arguments.length?o(arguments[0],arguments[1]):n(arguments[0],arguments[1],arguments[2])}var a=r(11),s=r(12),u={"float":"cssFloat"},c=r(10);e.exports=l,e.exports.set=l,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,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 l(e){var t=e.style,r=o(e,["style"]),n=c({},t,{right:2,bottom:2,left:2,borderRadius:3,cursor:"pointer"});return f["default"].createElement("div",c({style:n},r))}function a(e){var t=e.style,r=o(e,["style"]),n=c({},t,{right:2,bottom:2,top:2,borderRadius:3,cursor:"pointer"});return f["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 f["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 f["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=l,t.renderTrackVerticalDefault=a,t.renderThumbHorizontalDefault=s,t.renderThumbVerticalDefault=u;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}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},l=r(15),a=n(l),s=r(1),u=n(s),c=r(2),d=n(c),f=r(8),h=n(f),p=r(9),v=n(p),m=r(7),g=n(m),T=r(6),y=n(T),b=r(5),w=r(3);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,autoHide:c.PropTypes.bool,autoHideTimeout:c.PropTypes.number,autoHideDuration:c.PropTypes.number,thumbSize:c.PropTypes.number,thumbMinSize:c.PropTypes.number,universal:c.PropTypes.bool,style:c.PropTypes.object,children:c.PropTypes.node},getDefaultProps:function(){return{renderView:w.renderViewDefault,renderTrackHorizontal:w.renderTrackHorizontalDefault,renderTrackVertical:w.renderTrackVerticalDefault,renderThumbHorizontal:w.renderThumbHorizontalDefault,renderThumbVertical:w.renderThumbVerticalDefault,autoHide:!1,autoHideTimeout:1e3,autoHideDuration:200,thumbMinSize:30,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,l.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,l=e.clientHeight;return{left:t/(n-i)||0,top:r/(o-l)||0,scrollLeft:t,scrollTop:r,scrollWidth:n,scrollHeight:o,clientWidth:i,clientHeight:l}},getThumbHorizontalWidth:function(){var e=this.props,t=e.thumbSize,r=e.thumbMinSize,n=this.refs,o=n.view,i=n.trackHorizontal,l=o.scrollWidth,a=o.clientWidth,s=(0,g["default"])(i),u=a/l*s;return s===u?0:t?t:Math.max(u,r)},getThumbVerticalHeight:function(){var e=this.props,t=e.thumbSize,r=e.thumbMinSize,n=this.refs,o=n.view,i=n.trackVertical,l=o.scrollHeight,a=o.clientHeight,s=(0,y["default"])(i),u=a/l*s;return s===u?0:t?t:Math.max(u,r)},getScrollLeftForOffset:function(e){var t=this.refs,r=t.view,n=t.trackHorizontal,o=r.scrollWidth,i=r.clientWidth,l=(0,g["default"])(n),a=this.getThumbHorizontalWidth();return e/(l-a)*(o-i)},getScrollTopForOffset:function(e){var t=this.refs,r=t.view,n=t.trackVertical,o=r.scrollHeight,i=r.clientHeight,l=(0,y["default"])(n),a=this.getThumbVerticalHeight();return e/(l-a)*(o-i)},scrollLeft:function(){var e=arguments.length<=0||void 0===arguments[0]?0:arguments[0],t=this.refs.view;t.scrollLeft=e},scrollTop:function(){var e=arguments.length<=0||void 0===arguments[0]?0:arguments[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,h["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,h["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(){var e=this.refs.view,t=event,r=t.target,n=t.clientX,o=r.getBoundingClientRect(),i=o.left,l=this.getThumbHorizontalWidth(),a=Math.abs(i-n)-l/2;e.scrollLeft=this.getScrollLeftForOffset(a)},handleVerticalTrackMouseDown:function(e){var t=this.refs.view,r=e.target,n=e.clientY,o=r.getBoundingClientRect(),i=o.top,l=this.getThumbVerticalHeight(),a=Math.abs(i-n)-l/2;t.scrollTop=this.getScrollTopForOffset(a)},handleHorizontalThumbMouseDown:function(e){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){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,u["default"])(document.body,b.disableSelectStyle),document.addEventListener("mousemove",this.handleDrag),document.addEventListener("mouseup",this.handleDragEnd),document.onselectstart=v["default"]},teardownDragging:function(){(0,u["default"])(document.body,b.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(),l=i.left,a=this.getThumbHorizontalWidth(),s=a-this.prevPageX,u=-l+t-s;n.scrollLeft=this.getScrollLeftForOffset(u)}if(this.prevPageY){var c=e.clientY,d=this.refs,f=d.view,h=d.trackVertical,p=h.getBoundingClientRect(),v=p.top,m=this.getThumbVerticalHeight(),g=m-this.prevPageY,T=-v+c-g;f.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,u["default"])(t,{opacity:1}),(0,u["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,u["default"])(r,{opacity:0}),(0,u["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&&a["default"].cancel(this.requestFrame),this.requestFrame=(0,a["default"])(function(){t.requestFrame=void 0,e()})},update:function(e){var t=this;this.raf(function(){var r=t.props.onUpdate,n=t.getValues();if((0,h["default"])()){var o=t.refs,i=o.thumbHorizontal,l=o.thumbVertical,a=o.trackHorizontal,s=o.trackVertical,c=n.scrollLeft,d=n.clientWidth,f=n.scrollWidth,p=(0,g["default"])(a),v=t.getThumbHorizontalWidth(),m=c/(f-d)*(p-v),T={width:v,transform:"translateX("+m+"px)"},b=n.scrollTop,w=n.clientHeight,S=n.scrollHeight,H=(0,y["default"])(s),k=t.getThumbVerticalHeight(),D=b/(S-w)*(H-k),L={height:k,transform:"translateY("+D+"px)"};(0,u["default"])(i,T),(0,u["default"])(l,L)}r&&r(n),"function"==typeof e&&e(n)})},render:function(){var e=(0,h["default"])(),t=this.props,r=(t.onScroll,t.onScrollFrame,t.onScrollStart,t.onScrollStop,t.renderView),n=t.renderTrackHorizontal,l=t.renderTrackVertical,a=t.renderThumbHorizontal,s=t.renderThumbVertical,u=t.autoHide,f=(t.autoHideTimeout,t.autoHideDuration),p=(t.thumbSize,t.thumbMinSize,t.universal),v=t.style,m=t.children,g=o(t,["onScroll","onScrollFrame","onScrollStart","onScrollStop","renderView","renderTrackHorizontal","renderTrackVertical","renderThumbHorizontal","renderThumbVertical","autoHide","autoHideTimeout","autoHideDuration","thumbSize","thumbMinSize","universal","style","children"]),T=this.state.didMountUniversal,y=i({},b.containerStyleDefault,v),w=i({},b.viewStyleDefault,e?{right:-e,bottom:-e}:{right:0,bottom:0},p&&!T?b.viewStyleUniversalInitial:void 0),S=i({},b.trackHorizontalStyleDefault,u?{transition:"opacity "+f+"ms",opacity:0}:void 0,!e||p&&!T?{display:"none"}:void 0),H=i({},b.trackVerticalStyleDefault,u?{transition:"opacity "+f+"ms",opacity:0}:void 0,!e||p&&!T?{display:"none"}:void 0);return d["default"].createElement("div",i({},g,{style:y,ref:"container"}),(0,c.cloneElement)(r({style:w}),{ref:"view"},m),(0,c.cloneElement)(n({style:S}),{ref:"trackHorizontal"},(0,c.cloneElement)(a({style:b.thumbHorizontalStyleDefault}),{ref:"thumbHorizontal"})),(0,c.cloneElement)(l({style:H}),{ref:"trackVertical"},(0,c.cloneElement)(s({style:b.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.viewStyleDefault={position:"absolute",top:0,left:0,overflow:"scroll",WebkitOverflowScrolling:"touch"},t.viewStyleUniversalInitial={right:0,bottom:0,overflow:"hidden"},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(a!==!1)return a;if("undefined"!=typeof document){var e=document.createElement("div");(0,l["default"])(e,{width:100,height:100,position:"absolute",top:-9999,overflow:"scroll",MsOverflowStyle:"scrollbar"}),document.body.appendChild(e),a=e.offsetWidth-e.clientWidth,document.body.removeChild(e)}else a=0;return a}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=o;var i=r(1),l=n(i),a=!1},function(e,t){"use strict";function r(){return!1}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=r},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){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 l=n[i]+o;if(l in t)return l}return!1}},function(e,t,r){function n(e){return o(e).replace(/\s(\w)/g,function(e,t){return t.toUpperCase()})}var o=r(13);e.exports=n},function(e,t,r){function n(e){return o(e).replace(/[\W_]+(.|$)/g,function(e,t){return t?" "+t:""})}var o=r(14);e.exports=n},function(e,t){function r(e){return i.test(e)?e.toLowerCase():(a.test(e)&&(e=n(e)),l.test(e)&&(e=o(e)),e.toLowerCase())}function n(e){return e.replace(s,function(e,t){return t?" "+t:""})}function o(e){return e.replace(u,function(e,t,r){return t+" "+r.toLowerCase().split("").join(" ")})}e.exports=r;var i=/\s/,l=/[a-z][A-Z]/,a=/[\W_]/,s=/[\W_]+(.|$)/g,u=/(.)([A-Z]+)/g},function(e,t,r){(function(t){for(var n=r(16),o="undefined"==typeof window?t:window,i=["moz","webkit"],l="AnimationFrame",a=o["request"+l],s=o["cancel"+l]||o["cancelRequest"+l],u=0;!a&&u<i.length;u++)a=o[i[u]+"Request"+l],s=o[i[u]+"Cancel"+l]||o[i[u]+"CancelRequest"+l];if(!a||!s){var c=0,d=0,f=[],h=1e3/60;a=function(e){if(0===f.length){var t=n(),r=Math.max(0,h-(t-c));c=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(c)}catch(r){setTimeout(function(){throw r},0)}},Math.round(r))}return f.push({handle:++d,callback:e,cancelled:!1}),d},s=function(e){for(var t=0;t<f.length;t++)f[t].handle===e&&(f[t].cancelled=!0)}}e.exports=function(e){return a.call(o,e)},e.exports.cancel=function(){s.apply(o,arguments)},e.exports.polyfill=function(){o.requestAnimationFrame=a,o.cancelAnimationFrame=s}}).call(t,function(){return this}())},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(17))},function(e,t){function r(){u=!1,l.length?s=l.concat(s):c=-1,s.length&&n()}function n(){if(!u){var e=setTimeout(r);u=!0;for(var t=s.length;t;){for(l=s,s=[];++c<t;)l&&l[c].run();c=-1,t=s.length}l=null,u=!1,clearTimeout(e)}}function o(e,t){this.fun=e,this.array=t}function i(){}var l,a=e.exports={},s=[],u=!1,c=-1;a.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];s.push(new o(e,t)),1!==s.length||u||setTimeout(n,0)},o.prototype.run=function(){this.fun.apply(null,this.array)},a.title="browser",a.browser=!0,a.env={},a.argv=[],a.version="",a.versions={},a.on=i,a.addListener=i,a.once=i,a.off=i,a.removeListener=i,a.removeAllListeners=i,a.emit=i,a.binding=function(e){throw new Error("process.binding is not supported")},a.cwd=function(){return"/"},a.chdir=function(e){throw new Error("process.chdir is not supported")},a.umask=function(){return 0}}])});
+!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(4),i=n(o);t["default"]=i["default"],t.Scrollbars=i["default"]},function(e,t,r){function n(e,t,r){var n=u[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=s(e),r=a(t);return u[t]=u[e]=u[r]=r,r}function l(){2===arguments.length?o(arguments[0],arguments[1]):n(arguments[0],arguments[1],arguments[2])}var a=r(11),s=r(12),u={"float":"cssFloat"},c=r(10);e.exports=l,e.exports.set=l,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,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 l(e){var t=e.style,r=o(e,["style"]),n=c({},t,{right:2,bottom:2,left:2,borderRadius:3,cursor:"pointer"});return h["default"].createElement("div",c({style:n},r))}function a(e){var t=e.style,r=o(e,["style"]),n=c({},t,{right:2,bottom:2,top:2,borderRadius:3,cursor:"pointer"});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))}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))}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=l,t.renderTrackVerticalDefault=a,t.renderThumbHorizontalDefault=s,t.renderThumbVerticalDefault=u;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},l=r(15),a=n(l),s=r(1),u=n(s),c=r(2),d=n(c),h=r(8),f=n(h),p=r(9),v=n(p),m=r(7),g=n(m),T=r(6),y=n(T),b=r(5),w=r(3);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,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.number,autoHeightMax:c.PropTypes.number,universal:c.PropTypes.bool,style:c.PropTypes.object,children:c.PropTypes.node},getDefaultProps:function(){return{renderView:w.renderViewDefault,renderTrackHorizontal:w.renderTrackHorizontalDefault,renderTrackVertical:w.renderTrackVerticalDefault,renderThumbHorizontal:w.renderThumbHorizontalDefault,renderThumbVertical:w.renderThumbVerticalDefault,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,l.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,l=e.clientHeight;return{left:t/(n-i)||0,top:r/(o-l)||0,scrollLeft:t,scrollTop:r,scrollWidth:n,scrollHeight:o,clientWidth:i,clientHeight:l}},getThumbHorizontalWidth:function(){var e=this.props,t=e.thumbSize,r=e.thumbMinSize,n=this.refs,o=n.view,i=n.trackHorizontal,l=o.scrollWidth,a=o.clientWidth,s=(0,g["default"])(i),u=a/l*s;return s===u?0:t?t:Math.max(u,r)},getThumbVerticalHeight:function(){var e=this.props,t=e.thumbSize,r=e.thumbMinSize,n=this.refs,o=n.view,i=n.trackVertical,l=o.scrollHeight,a=o.clientHeight,s=(0,y["default"])(i),u=a/l*s;return s===u?0:t?t:Math.max(u,r)},getScrollLeftForOffset:function(e){var t=this.refs,r=t.view,n=t.trackHorizontal,o=r.scrollWidth,i=r.clientWidth,l=(0,g["default"])(n),a=this.getThumbHorizontalWidth();return e/(l-a)*(o-i)},getScrollTopForOffset:function(e){var t=this.refs,r=t.view,n=t.trackVertical,o=r.scrollHeight,i=r.clientHeight,l=(0,y["default"])(n),a=this.getThumbVerticalHeight();return e/(l-a)*(o-i)},scrollLeft:function(){var e=arguments.length<=0||void 0===arguments[0]?0:arguments[0],t=this.refs.view;t.scrollLeft=e},scrollTop:function(){var e=arguments.length<=0||void 0===arguments[0]?0:arguments[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,f["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,f["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(){var e=this.refs.view,t=event,r=t.target,n=t.clientX,o=r.getBoundingClientRect(),i=o.left,l=this.getThumbHorizontalWidth(),a=Math.abs(i-n)-l/2;e.scrollLeft=this.getScrollLeftForOffset(a)},handleVerticalTrackMouseDown:function(e){var t=this.refs.view,r=e.target,n=e.clientY,o=r.getBoundingClientRect(),i=o.top,l=this.getThumbVerticalHeight(),a=Math.abs(i-n)-l/2;t.scrollTop=this.getScrollTopForOffset(a)},handleHorizontalThumbMouseDown:function(e){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){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,u["default"])(document.body,b.disableSelectStyle),document.addEventListener("mousemove",this.handleDrag),document.addEventListener("mouseup",this.handleDragEnd),document.onselectstart=v["default"]},teardownDragging:function(){(0,u["default"])(document.body,b.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(),l=i.left,a=this.getThumbHorizontalWidth(),s=a-this.prevPageX,u=-l+t-s;n.scrollLeft=this.getScrollLeftForOffset(u)}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,u["default"])(t,{opacity:1}),(0,u["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,u["default"])(r,{opacity:0}),(0,u["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&&a["default"].cancel(this.requestFrame),this.requestFrame=(0,a["default"])(function(){t.requestFrame=void 0,e()})},update:function(e){var t=this;this.raf(function(){var r=t.props,n=r.onUpdate,o=r.hideTracksWhenNotNeeded,i=t.getValues();if((0,f["default"])()){var l=t.refs,a=l.thumbHorizontal,s=l.thumbVertical,c=l.trackHorizontal,d=l.trackVertical,h=i.scrollLeft,p=i.clientWidth,v=i.scrollWidth,m=(0,g["default"])(c),T=t.getThumbHorizontalWidth(),b=h/(v-p)*(m-T),w={width:T,transform:"translateX("+b+"px)"},S=i.scrollTop,H=i.clientHeight,k=i.scrollHeight,M=(0,y["default"])(d),D=t.getThumbVerticalHeight(),L=S/(k-H)*(M-D),z={height:D,transform:"translateY("+L+"px)"};if(o){var x={visibility:v>p?"visible":"hidden"},V={visibility:k>H?"visible":"hidden"};(0,u["default"])(c,x),(0,u["default"])(d,V)}(0,u["default"])(a,w),(0,u["default"])(s,z)}n&&n(i),"function"==typeof e&&e(i)})},render:function(){var e=(0,f["default"])(),t=this.props,r=(t.onScroll,t.onScrollFrame,t.onScrollStart,t.onScrollStop,t.renderView),n=t.renderTrackHorizontal,l=t.renderTrackVertical,a=t.renderThumbHorizontal,s=t.renderThumbVertical,u=t.autoHide,h=(t.autoHideTimeout,t.autoHideDuration),p=(t.thumbSize,t.thumbMinSize,t.universal),v=t.autoHeight,m=t.autoHeightMin,g=t.autoHeightMax,T=t.style,y=t.children,w=o(t,["onScroll","onScrollFrame","onScrollStart","onScrollStop","renderView","renderTrackHorizontal","renderTrackVertical","renderThumbHorizontal","renderThumbVertical","autoHide","autoHideTimeout","autoHideDuration","thumbSize","thumbMinSize","universal","autoHeight","autoHeightMin","autoHeightMax","style","children"]),S=this.state.didMountUniversal,H=i({},b.containerStyleDefault,v&&i({},b.containerStyleAutoHeight,{minHeight:m,maxHeight:g}),T),k=i({},b.viewStyleDefault,{marginRight:e?-e:0,marginBottom:e?-e:0},v&&i({},b.viewStyleAutoHeight,{minHeight:m+e,maxHeight:g+e}),p&&!S&&b.viewStyleUniversalInitial),M=i({},b.trackHorizontalStyleDefault,u&&{transition:"opacity "+h+"ms",opacity:0},(!e||p)&&!S&&{display:"none"}),D=i({},b.trackVerticalStyleDefault,u&&{transition:"opacity "+h+"ms",opacity:0},(!e||p)&&!S&&{display:"none"});return d["default"].createElement("div",i({},w,{style:H,ref:"container"}),(0,c.cloneElement)(r({style:k}),{ref:"view"},y),(0,c.cloneElement)(n({style:M}),{ref:"trackHorizontal"},(0,c.cloneElement)(a({style:b.thumbHorizontalStyleDefault}),{ref:"thumbHorizontal"})),(0,c.cloneElement)(l({style:D}),{ref:"trackVertical"},(0,c.cloneElement)(s({style:b.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(a!==!1)return a;if("undefined"!=typeof document){var e=document.createElement("div");(0,l["default"])(e,{width:100,height:100,position:"absolute",top:-9999,overflow:"scroll",MsOverflowStyle:"scrollbar"}),document.body.appendChild(e),a=e.offsetWidth-e.clientWidth,document.body.removeChild(e)}else a=0;return a}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=o;var i=r(1),l=n(i),a=!1},function(e,t){"use strict";function r(){return!1}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=r},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){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 l=n[i]+o;if(l in t)return l}return!1}},function(e,t,r){function n(e){return o(e).replace(/\s(\w)/g,function(e,t){return t.toUpperCase()})}var o=r(13);e.exports=n},function(e,t,r){function n(e){return o(e).replace(/[\W_]+(.|$)/g,function(e,t){return t?" "+t:""})}var o=r(14);e.exports=n},function(e,t){function r(e){return i.test(e)?e.toLowerCase():(a.test(e)&&(e=n(e)),l.test(e)&&(e=o(e)),e.toLowerCase())}function n(e){return e.replace(s,function(e,t){return t?" "+t:""})}function o(e){return e.replace(u,function(e,t,r){return t+" "+r.toLowerCase().split("").join(" ")})}e.exports=r;var i=/\s/,l=/[a-z][A-Z]/,a=/[\W_]/,s=/[\W_]+(.|$)/g,u=/(.)([A-Z]+)/g},function(e,t,r){(function(t){for(var n=r(16),o="undefined"==typeof window?t:window,i=["moz","webkit"],l="AnimationFrame",a=o["request"+l],s=o["cancel"+l]||o["cancelRequest"+l],u=0;!a&&u<i.length;u++)a=o[i[u]+"Request"+l],s=o[i[u]+"Cancel"+l]||o[i[u]+"CancelRequest"+l];if(!a||!s){var c=0,d=0,h=[],f=1e3/60;a=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(r){setTimeout(function(){throw r},0)}},Math.round(r))}return h.push({handle:++d,callback:e,cancelled:!1}),d},s=function(e){for(var t=0;t<h.length;t++)h[t].handle===e&&(h[t].cancelled=!0)}}e.exports=function(e){return a.call(o,e)},e.exports.cancel=function(){s.apply(o,arguments)},e.exports.polyfill=function(){o.requestAnimationFrame=a,o.cancelAnimationFrame=s}}).call(t,function(){return this}())},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(17))},function(e,t){function r(){u=!1,l.length?s=l.concat(s):c=-1,s.length&&n()}function n(){if(!u){var e=setTimeout(r);u=!0;for(var t=s.length;t;){for(l=s,s=[];++c<t;)l&&l[c].run();c=-1,t=s.length}l=null,u=!1,clearTimeout(e)}}function o(e,t){this.fun=e,this.array=t}function i(){}var l,a=e.exports={},s=[],u=!1,c=-1;a.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];s.push(new o(e,t)),1!==s.length||u||setTimeout(n,0)},o.prototype.run=function(){this.fun.apply(null,this.array)},a.title="browser",a.browser=!0,a.env={},a.argv=[],a.version="",a.versions={},a.on=i,a.addListener=i,a.once=i,a.off=i,a.removeListener=i,a.removeAllListeners=i,a.emit=i,a.binding=function(e){throw new Error("process.binding is not supported")},a.cwd=function(){return"/"},a.chdir=function(e){throw new Error("process.chdir is not supported")},a.umask=function(){return 0}}])});

docs/API.md

@@ -29,8 +29,13 @@ # API
 * `renderThumbVertical`: (Function) Vertical thumb element
-* `autoHide`: (Boolean) Auto hide (default: `false`)
+* `hideTracksWhenNotNeeded`: (Boolean) Hide tracks (`visibility: hidden`) when content does not overflow container. (default: false)
+* `thumbSize`: (Number) Set a fixed size for thumbs in px.
+* `thumbMinSize`: (Number) Minimal thumb size in px. (default: 30)
+* `autoHide`: (Boolean) Enable auto-hide mode (default: `false`)
   * When `true` tracks will hide automatically and are only visible while scrolling.
 * `autoHideTimeout`: (Number) Hide delay in ms. (default: 1000)
 * `autoHideDuration`: (Number) Duration for hide animation in ms. (default: 200)
-* `thumbSize`: (Number) Set a fixed size for thumbs in px.
-* `thumbMinSize`: (Number) Minimal thumb size in px. (default: 30)
+* `autoHeight`: (Boolean) Enable auto-height mode. (default: false)
+  * When `true` container grows with content
+* `autoHeightMin`: (Number) Set a minimum height for auto-height mode (default: 0)
+* `autoHeightMax`: (Number) Set a maximum height for auto-height mode (default: 200)
 * `universal`: (Boolean) Enable universal rendering (default: `false`)
@@ -37,0 +42,0 @@ * [Learn how to use universal rendering](#link)

docs/README.md

@@ -5,2 +5,3 @@ # Table of Contents
   * [Auto hide](usage.md#auto-hide)
+  * [Auto height](usage.md#auto-height)
   * [Working with events](usage.md#events)
@@ -7,0 +8,0 @@ * [Universal rendering](usage.md#universal-rendering)

docs/usage.md

@@ -48,2 +48,4 @@ # Usage
         onScrollStop={this.handlenScrollStop}>
+        // Called when ever the component is updated. Runs inside the animation frame
+        onUpdate={this.handleUpdate}
         <p>Some great content...</p>
@@ -57,5 +59,5 @@ </Scrollbars>
 
-## Auto hide
+## Auto-hide
 
-You can activate auto hide by setting the `autoHide` property.
+You can activate auto-hide by setting the `autoHide` property.
 
@@ -82,2 +84,23 @@ ```javascript
 
+## Auto-height
+
+You can active auto-height by setting the `autoHeight` property.
+```javascript
+import { Scrollbars } from 'react-custom-scrollbars';
+
+class App extends Component {
+  render() {
+    return (
+      <Scrollbars
+        // This will activate auto-height
+        autoHeight
+        autoHeightMin={100}
+        autoHeightMax={200}>
+        <p>Some great content...</p>
+      </Scrollbars>
+    );
+  }
+}
+```
+
 ## Universal rendering
@@ -84,0 +107,0 @@

lib/Scrollbars/index.js

@@ -60,7 +60,11 @@ 'use strict';
         renderThumbVertical: _react.PropTypes.func,
+        thumbSize: _react.PropTypes.number,
+        thumbMinSize: _react.PropTypes.number,
+        hideTracksWhenNotNeeded: _react.PropTypes.bool,
         autoHide: _react.PropTypes.bool,
         autoHideTimeout: _react.PropTypes.number,
         autoHideDuration: _react.PropTypes.number,
-        thumbSize: _react.PropTypes.number,
-        thumbMinSize: _react.PropTypes.number,
+        autoHeight: _react.PropTypes.bool,
+        autoHeightMin: _react.PropTypes.number,
+        autoHeightMax: _react.PropTypes.number,
         universal: _react.PropTypes.bool,
@@ -78,6 +82,10 @@ style: _react.PropTypes.object,
             renderThumbVertical: _defaultRenderElements.renderThumbVerticalDefault,
+            thumbMinSize: 30,
+            hideTracksWhenNotNeeded: false,
             autoHide: false,
             autoHideTimeout: 1000,
             autoHideDuration: 200,
-            thumbMinSize: 30,
+            autoHeight: false,
+            autoHeightMin: 0,
+            autoHeightMax: 200,
             universal: false
@@ -526,3 +534,5 @@ };
         this.raf(function () {
-            var onUpdate = _this4.props.onUpdate;
+            var _props4 = _this4.props;
+            var onUpdate = _props4.onUpdate;
+            var hideTracksWhenNotNeeded = _props4.hideTracksWhenNotNeeded;
 
@@ -558,2 +568,12 @@ var values = _this4.getValues();
                 };
+                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);
@@ -569,22 +589,25 @@ (0, _domCss2["default"])(thumbVertical, thumbVerticalStyle);
         var scrollbarWidth = (0, _getScrollbarWidth2["default"])();
-        var _props4 = this.props;
-        var onScroll = _props4.onScroll;
-        var onScrollFrame = _props4.onScrollFrame;
-        var onScrollStart = _props4.onScrollStart;
-        var onScrollStop = _props4.onScrollStop;
-        var renderView = _props4.renderView;
-        var renderTrackHorizontal = _props4.renderTrackHorizontal;
-        var renderTrackVertical = _props4.renderTrackVertical;
-        var renderThumbHorizontal = _props4.renderThumbHorizontal;
-        var renderThumbVertical = _props4.renderThumbVertical;
-        var autoHide = _props4.autoHide;
-        var autoHideTimeout = _props4.autoHideTimeout;
-        var autoHideDuration = _props4.autoHideDuration;
-        var thumbSize = _props4.thumbSize;
-        var thumbMinSize = _props4.thumbMinSize;
-        var universal = _props4.universal;
-        var style = _props4.style;
-        var children = _props4.children;
+        var _props5 = this.props;
+        var onScroll = _props5.onScroll;
+        var onScrollFrame = _props5.onScrollFrame;
+        var onScrollStart = _props5.onScrollStart;
+        var onScrollStop = _props5.onScrollStop;
+        var renderView = _props5.renderView;
+        var renderTrackHorizontal = _props5.renderTrackHorizontal;
+        var renderTrackVertical = _props5.renderTrackVertical;
+        var renderThumbHorizontal = _props5.renderThumbHorizontal;
+        var renderThumbVertical = _props5.renderThumbVertical;
+        var autoHide = _props5.autoHide;
+        var autoHideTimeout = _props5.autoHideTimeout;
+        var autoHideDuration = _props5.autoHideDuration;
+        var thumbSize = _props5.thumbSize;
+        var thumbMinSize = _props5.thumbMinSize;
+        var universal = _props5.universal;
+        var autoHeight = _props5.autoHeight;
+        var autoHeightMin = _props5.autoHeightMin;
+        var autoHeightMax = _props5.autoHeightMax;
+        var style = _props5.style;
+        var children = _props5.children;
 
-        var props = _objectWithoutProperties(_props4, ['onScroll', 'onScrollFrame', 'onScrollStart', 'onScrollStop', 'renderView', 'renderTrackHorizontal', 'renderTrackVertical', 'renderThumbHorizontal', 'renderThumbVertical', 'autoHide', 'autoHideTimeout', 'autoHideDuration', 'thumbSize', 'thumbMinSize', 'universal', 'style', 'children']);
+        var props = _objectWithoutProperties(_props5, ['onScroll', 'onScrollFrame', 'onScrollStart', 'onScrollStop', 'renderView', 'renderTrackHorizontal', 'renderTrackVertical', 'renderThumbHorizontal', 'renderThumbVertical', 'autoHide', 'autoHideTimeout', 'autoHideDuration', 'thumbSize', 'thumbMinSize', 'universal', 'autoHeight', 'autoHeightMin', 'autoHeightMax', 'style', 'children']);
 
@@ -594,9 +617,29 @@ var didMountUniversal = this.state.didMountUniversal;
 
-        var containerStyle = _extends({}, _styles.containerStyleDefault, style);
+        var containerStyle = _extends({}, _styles.containerStyleDefault, autoHeight && _extends({}, _styles.containerStyleAutoHeight, {
+            minHeight: autoHeightMin,
+            maxHeight: autoHeightMax
+        }), style);
 
-        var viewStyle = _extends({}, _styles.viewStyleDefault, scrollbarWidth ? { right: -scrollbarWidth, bottom: -scrollbarWidth } : { right: 0, bottom: 0 }, universal && !didMountUniversal ? _styles.viewStyleUniversalInitial : undefined);
+        var viewStyle = _extends({}, _styles.viewStyleDefault, {
+            // Hide scrollbars by setting a negative margin
+            marginRight: scrollbarWidth ? -scrollbarWidth : 0,
+            marginBottom: scrollbarWidth ? -scrollbarWidth : 0
+        }, autoHeight && _extends({}, _styles.viewStyleAutoHeight, {
+            minHeight: autoHeightMin + scrollbarWidth,
+            maxHeight: autoHeightMax + scrollbarWidth
+        }), universal && !didMountUniversal && _styles.viewStyleUniversalInitial);
 
-        var trackHorizontalStyle = _extends({}, _styles.trackHorizontalStyleDefault, autoHide ? { transition: 'opacity ' + autoHideDuration + 'ms', opacity: 0 } : undefined, !scrollbarWidth || universal && !didMountUniversal ? { display: 'none' } : undefined);
+        var trackHorizontalStyle = _extends({}, _styles.trackHorizontalStyleDefault, autoHide && {
+            transition: 'opacity ' + autoHideDuration + 'ms',
+            opacity: 0
+        }, (!scrollbarWidth || universal) && !didMountUniversal && {
+            display: 'none'
+        });
 
-        var trackVerticalStyle = _extends({}, _styles.trackVerticalStyleDefault, autoHide ? { transition: 'opacity ' + autoHideDuration + 'ms', opacity: 0 } : undefined, !scrollbarWidth || universal && !didMountUniversal ? { display: 'none' } : undefined);
+        var trackVerticalStyle = _extends({}, _styles.trackVerticalStyleDefault, autoHide && {
+            transition: 'opacity ' + autoHideDuration + 'ms',
+            opacity: 0
+        }, (!scrollbarWidth || universal) && !didMountUniversal && {
+            display: 'none'
+        });
 
@@ -603,0 +646,0 @@ return _react2["default"].createElement(

lib/Scrollbars/styles.js

@@ -13,2 +13,7 @@ 'use strict';
 
+// Overrides containerStyleDefault properties
+var containerStyleAutoHeight = exports.containerStyleAutoHeight = {
+    height: 'auto'
+};
+
 var viewStyleDefault = exports.viewStyleDefault = {
@@ -18,2 +23,4 @@ position: 'absolute',
     left: 0,
+    right: 0,
+    bottom: 0,
     overflow: 'scroll',
@@ -23,6 +30,15 @@ WebkitOverflowScrolling: 'touch'
 
+// Overrides viewStyleDefault properties
+var viewStyleAutoHeight = exports.viewStyleAutoHeight = {
+    position: 'relative',
+    top: undefined,
+    left: undefined,
+    right: undefined,
+    bottom: undefined
+};
+
 var viewStyleUniversalInitial = exports.viewStyleUniversalInitial = {
-    right: 0,
-    bottom: 0,
-    overflow: 'hidden'
+    overflow: 'hidden',
+    marginRight: 0,
+    marginBottom: 0
 };
@@ -29,0 +45,0 @@

package.json

 {
   "name": "react-custom-scrollbars",
-  "version": "3.1.0",
+  "version": "4.0.0-beta.1",
   "description": "React scrollbars component",
@@ -70,4 +70,4 @@ "main": "lib/index.js",
   "peerDependencies": {
-    "react": "^0.14.5",
-    "react-dom": "^0.14.5"
+    "react": "^0.14.0 || ^15.0.0-0",
+    "react-dom": "^0.14.0 || ^15.0.0-0"
   },
@@ -74,0 +74,0 @@ "dependencies": {

README.md

@@ -12,2 +12,3 @@ react-custom-scrollbars
 * [auto hide](https://github.com/malte-wessel/react-custom-scrollbars/blob/master/docs/usage.md#auto-hide)
+* [auto height](https://github.com/malte-wessel/react-custom-scrollbars/blob/master/docs/usage.md#auto-height)
 * [universal](https://github.com/malte-wessel/react-custom-scrollbars/blob/master/docs/usage.md#universal-rendering) (runs on client & server)
@@ -14,0 +15,0 @@ * `requestAnimationFrame` for 60fps

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

129338

increased by4.91%

Lines of code

2088

increased by5.78%

Number of lines in readme file

109

increased by0.93%

Worsened metrics

Number of low quality alerts

2

increased by100%

No dependency changes