@itcase/ui 1.1.5 → 1.1.7

package/dist/components/ScrollOnDrag.js

@@ -1,203 +1,114 @@
-'use strict';
+import React__default, { forwardRef, useRef, useState, useCallback, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import borderColorProps from '../constants/componentProps/borderColor.js';
+import borderTypeProps from '../constants/componentProps/borderType.js';
+import borderWidthProps from '../constants/componentProps/borderWidth.js';
+import fillProps from '../constants/componentProps/fill.js';
+import fillHoverProps from '../constants/componentProps/fillHover.js';
+import heightProps from '../constants/componentProps/height.js';
+import widthProps from '../constants/componentProps/width.js';
+import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
+import { useStyles } from '../hooks/useStyles.js';
+import 'lodash/castArray';
+import 'lodash/camelCase';
+import '../context/UIContext.js';
+import '../hooks/useMediaQueries.js';
+import 'react-responsive';
+import 'lodash/maxBy';
+import 'lodash/upperFirst';
+import '../hooks/styleAttributes.js';
 
-var React = require('react');
-var PropTypes = require('prop-types');
-var clsx = require('clsx');
-var borderColor = require('../constants/componentProps/borderColor.js');
-var borderType = require('../constants/componentProps/borderType.js');
-var borderWidth = require('../constants/componentProps/borderWidth.js');
-var fillHover = require('../constants/componentProps/fillHover.js');
-var fill = require('../constants/componentProps/fill.js');
-var height = require('../constants/componentProps/height.js');
-var width = require('../constants/componentProps/width.js');
-var useStyles = require('../hooks/useStyles.js');
-var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
-require('lodash/camelCase');
-require('lodash/maxBy');
-require('lodash/upperFirst');
-require('../hooks/styleAttributes.js');
-require('../context/UIContext.js');
-require('../hooks/useMediaQueries.js');
-require('react-responsive');
-require('lodash/castArray');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefault(React);
-var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
-var clsx__default = /*#__PURE__*/_interopDefault(clsx);
-
-var isProduction = process.env.NODE_ENV === 'production';
-var prefix = 'Invariant failed';
-function invariant(condition, message) {
-    if (condition) {
-        return;
-    }
-    if (isProduction) {
-        throw new Error(prefix);
-    }
-    var provided = typeof message === 'function' ? message() : message;
-    var value = provided ? "".concat(prefix, ": ").concat(provided) : prefix;
-    throw new Error(value);
-}
-
-const maxHorizontalScroll = dom => dom.scrollWidth - dom.clientWidth;
-const maxVerticalScroll = dom => dom.scrollHeight - dom.clientHeight;
-var useScrollOnDrag = ((domRef, {
-  onDragStart = () => {},
-  onDragEnd = () => {},
-  runScroll = ({
-    dx,
-    dy
-  }) => {
-    const offsetX = Math.min(maxHorizontalScroll(domRef.current), domRef.current.scrollLeft + dx);
-    domRef.current.scrollLeft = offsetX; // eslint-disable-line no-param-reassign
-
-    const offsetY = Math.min(maxVerticalScroll(domRef.current), domRef.current.scrollTop + dy);
-    domRef.current.scrollTop = offsetY; // eslint-disable-line no-param-reassign
-  }
-} = {}) => {
-  const internalState = React.useRef({
-    lastMouseX: null,
-    lastMouseY: null,
-    isMouseDown: false,
-    isScrolling: false
-  });
-  const scroll = React.useCallback(({
-    dx,
-    dy
-  }) => {
-    !(domRef.current !== null) ? process.env.NODE_ENV !== "production" ? invariant(false, `Trying to scroll to the bottom, but no element was found.
-      Did you call this scrollBottom before the component with this hook finished mounting?`) : invariant(false) : void 0;
-    runScroll({
-      dx,
-      dy
-    });
-  }, [runScroll]);
-  const onMouseDown = React.useCallback(e => {
-    internalState.current.isMouseDown = true;
-    internalState.current.lastMouseX = e.clientX;
-    internalState.current.lastMouseY = e.clientY;
-  }, []);
-  const onMouseUp = () => {
-    internalState.current.isMouseDown = false;
-    internalState.current.lastMouseX = null;
-    internalState.current.lastMouseY = null;
-    if (internalState.current.isScrolling) {
-      internalState.current.isScrolling = false;
-      onDragEnd();
-    }
-  };
-  const onMouseMove = e => {
-    if (!internalState.current.isMouseDown) {
-      return;
-    }
-    if (!internalState.current.isScrolling) {
-      internalState.current.isScrolling = true;
-      onDragStart();
-    }
-
-    // diff is negative because we want to scroll in the opposite direction of the movement
-    const dx = -(e.clientX - internalState.current.lastMouseX);
-    const dy = -(e.clientY - internalState.current.lastMouseY);
-    internalState.current.lastMouseX = e.clientX;
-    internalState.current.lastMouseY = e.clientY;
-    scroll({
-      dx,
-      dy
-    });
-  };
-  React.useEffect(() => {
-    window.addEventListener('mouseup', onMouseUp);
-    window.addEventListener('mousemove', onMouseMove);
-    return () => {
-      window.removeEventListener('mouseup', onMouseUp);
-      window.removeEventListener('mousemove', onMouseMove);
-    };
-  }, []);
-  return {
-    events: {
-      onMouseDown
-    }
-  };
-});
+var l=function(){return (l=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var o in t=arguments[r])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e}).apply(this,arguments)};function i(e,t,r,n,o){var c=r>0?Math.max(0,Math.min(r,-t)):Math.min(0,Math.max(r,-t)),l=Math.min(Math.max(e+r-c,n),o)-Math.min(Math.max(e,n),o);return [l,r-l]}function u(e,t,r){return 0===Math.abs(t)&&Math.abs(r)>0||Math.sign(t)===Math.sign(r)?.3*e*Math.sign(r)*Math.log10(1+.5*Math.abs(r)/e):r}function s(e){return !!e&&e.scrollWidth>e.clientWidth}function a(e){return !!e&&e.scrollHeight>e.clientHeight}var f;function p(e){return "function"==typeof e}function d(e,t){var r,n,o=function(){for(var c=[],l=0;l<arguments.length;l++)c[l]=arguments[l];var i=Date.now()-r,u=p(t)?t():t||0;i<u&&i>=0?n=setTimeout((function(){return o.apply(void 0,c)}),u-i):e.apply(void 0,c);},c=function(){for(var e=[],c=0;c<arguments.length;c++)e[c]=arguments[c];r=Date.now(),n=setTimeout((function(){return o.apply(void 0,e)}),p(t)?t():t||0);};return c.clear=function(){clearTimeout(n);},c}function v(e){var n=useRef(e);return useEffect((function(){n.current=e;}),[e]),n}!function(e){e[e.Left=1]="Left",e[e.Middle=4]="Middle",e[e.Right=2]="Right";}(f||(f={}));var h=function(){function e(e,t){var r,n,o,c,l=this;this.getScrollMode=function(e){if(l.getOptions().overscroll&&l.reference.current&&e){var t=l.reference.current,r=t.scrollLeft,n=t.scrollTop,o=t.clientHeight,c=t.clientWidth,i=t.scrollHeight,u=t.scrollWidth;return e.left<0&&r>0||e.left>0&&r<u-c||e.top<0&&n>0||e.top>0&&n<i-o?"local":"global"}return "local"},this.clearStyles=function(){l.reference.current&&l.reference.current.childNodes.forEach((function(e,t){e.style.transition=l.originalStyles.transition[t],e.style.transform=l.originalStyles.transform[t],e.style.pointerEvents=l.originalStyles.pointerEvents[t];})),l.overflow.left=0,l.overflow.top=0,l.overflow.prevent=!1;},this.inertia=function(e,t){var r=l.calculateScroll({left:l.inertiaSpeed.left*e,top:l.inertiaSpeed.top*e});l.inertiaSpeed.left=(r.left.local+r.left.overflow)/e*.95,l.inertiaSpeed.top=(r.top.local+r.top.overflow)/e*.95,l.applyScroll(r),Math.abs(l.inertiaSpeed.left)<.05&&Math.abs(l.inertiaSpeed.top)<.05&&(null==t||t());},this.reference=e,this.options=t,this.originalStyles={transform:[],transition:[],pointerEvents:[]},this.overflow={left:0,top:0,prevent:!1},this.inertiaSpeed={left:0,top:0},this.mode=null,this.active=!1,this.loopedInertia=(r=this.inertia,o=!1,c={run:function(e){o=!1;var t=performance.now(),l=function(){c.cancel(),null==e||e();},i=function(e){o||(r(e-t,l),t=e,n=window.requestAnimationFrame((function(e){return i(e)})));};n=window.requestAnimationFrame((function(e){return i(e)}));},cancel:function(){o=!0,window.cancelAnimationFrame(n);}}),this.debouncedClearStyles=d(this.clearStyles,300);}return e.prototype.getOptions=function(){return l({inertia:!0,rubberBand:!0},this.options.current)},e.prototype.start=function(e){var t=this;this.active&&this.cancel(),this.mode=this.getScrollMode(e),this.reference.current&&this.reference.current.childNodes.forEach((function(e){e.addEventListener("click",t.preventEvent);var r=window.getComputedStyle(e),n=r.transform,o=r.transition,c=r.pointerEvents;t.originalStyles.transition.push(o),t.originalStyles.transform.push(n),t.originalStyles.pointerEvents.push(c),e.style.pointerEvents="none";})),this.active=!0;},e.prototype.scroll=function(e){this.applyScroll(this.calculateScroll(e));},e.prototype.end=function(e,t){var r=this,n=this.getOptions().inertia,o=function(){r.cancel(),null==t||t();};this.inertiaSpeed.left=e?e.left:0,this.inertiaSpeed.top=e?e.top:0,n?this.loopedInertia.run(o):o();},e.prototype.cancel=function(){var e,t=this;null===(e=this.reference.current)||void 0===e||e.childNodes.forEach((function(e){e.removeEventListener("click",t.preventEvent);})),this.resetOverflow(),this.loopedInertia.cancel(),this.mode=null,this.active=!1;},e.prototype.resetOverflow=function(){var e,t=this.overflow.left||this.overflow.top;t&&(this.overflow.prevent=!0,(null===(e=this.reference.current)||void 0===e?void 0:e.childNodes).forEach((function(e){e.style.transform="translate3d(0px, 0px, 0px)",e.style.transition="300ms";}))),t?this.debouncedClearStyles():this.clearStyles();},e.prototype.preventEvent=function(e){e.preventDefault(),e.stopImmediatePropagation();},e.prototype.applyScroll=function(e){var t=this,r=e.left,n=e.top;(r.global||n.global)&&window.scrollTo({left:window.scrollX+r.global,top:window.scrollY+n.global,behavior:"auto"}),this.reference.current&&(this.reference.current.scrollLeft+=r.local,this.reference.current.scrollTop+=n.local,this.overflow.prevent||!r.overflow&&!n.overflow||(this.overflow.left+=r.overflow,this.overflow.top+=n.overflow,this.reference.current.childNodes.forEach((function(e){e.style.transform="translate3d("+-t.overflow.left+"px, "+-t.overflow.top+"px, 0px)",e.style.transition="0ms";}))));},e.prototype.calculateScroll=function(e){var t=this.getOptions().rubberBand,r={local:0,global:0,overflow:0},n={local:0,global:0,overflow:0};if("global"===this.mode)r.global=e.left,n.global=e.top;else if(this.reference.current){var o=this.reference.current,c=o.scrollLeft,l=o.scrollTop,f=o.scrollWidth,p=o.clientWidth,d=o.scrollHeight,v=o.clientHeight;if(s(this.reference.current)){var h=i(c,this.overflow.left,e.left,0,f-p),m=h[0],S=h[1];r.local=m,t&&(r.overflow=u(p,this.overflow.left,S));}if(a(this.reference.current)){var w=i(l,this.overflow.top,e.top,0,d-v);m=w[0],S=w[1];n.local=m,t&&(n.overflow=u(p,this.overflow.top,S));}}return {left:r,top:n}},e}();function m(e){void 0===e&&(e={mouseScroll:!0});var c,i,u,p,m=useRef(null),S=1/60*1e3,w=useRef({scrolling:!1,started:!1,pressed:!1,artificial:!1,mouse:!1}),y=useRef({active:{left:!1,top:!1},initialClick:{left:0,top:0},speedX:0,speedY:0,clientX:0,clientY:0}),g=useRef({body:{},reference:{}}),b=v(e),E=v(l({activationDistance:20,cursor:!0,buttons:[f.Left]},null!==(c=b.current.mouseScroll)&&"object"==typeof c?b.current.mouseScroll:{})),M=useState("mouseScrollImplementation"in e&&e.mouseScrollImplementation?e.mouseScrollImplementation(m,E):function(e,t){return new h(e,t)}(m,E))[0],L=function(){var e=function(){window.requestAnimationFrame((function(){var e,t;null===(t=(e=b.current).onEndScroll)||void 0===t||t.call(e),w.current.started=!1,w.current.scrolling=!1,w.current.artificial=!1;}));};w.current.artificial?M.end({left:y.current.speedX,top:y.current.speedY},e):e();},O=function(e){var t,r,n=E.current.ignoreElements;b.current.mouseScroll&&(function(e,t,r){if(r&&e&&t){var n=e.closest(r);return null===n||n.contains(t)}return Boolean(e&&t)}(e.target,m.current,n)&&(s(m.current)||a(m.current))&&-1!==E.current.buttons.indexOf(e.buttons)&&(t=e.clientX,r=e.clientY,y.current.speedY=0,y.current.speedX=0,y.current.clientX=t,y.current.clientY=r,y.current.active.left=!1,y.current.active.top=!1,y.current.initialClick.top=r,y.current.initialClick.left=t,w.current.mouse=!0,w.current.pressed=!0,M.cancel()));},x=function(e){b.current.mouseScroll&&w.current.pressed&&w.current.mouse&&(!function(e,t){var r=E.current,n=r.activationDistance,o=r.cursor;Math.abs(e-y.current.initialClick.left)>n&&(y.current.active.left=!0),Math.abs(t-y.current.initialClick.top)>n&&(y.current.active.top=!0);var c={left:y.current.active.left?y.current.clientX-e:0,top:y.current.active.top?y.current.clientY-t:0};M.active?w.current.pressed&&(y.current.speedX=c.left/S,y.current.speedY=c.top/S,y.current.clientX=e,y.current.clientY=t,M.scroll(c),window.requestAnimationFrame((function(){y.current.speedX=0,y.current.speedY=0;}))):(y.current.active.top||y.current.active.left)&&(M.start(c),y.current.clientX=e,y.current.clientY=t,w.current.artificial=!0,o&&(g.current.body.cursor=document.body.style.cursor,document.body.style.cursor="grabbing",m.current&&(g.current.reference.cursor=m.current.style.cursor,m.current.style.cursor="grabbing")),m.current&&(g.current.reference.userSelect=m.current.style.userSelect,m.current.style.userSelect="none"));}(e.clientX,e.clientY),e.preventDefault(),e.stopPropagation());},X=function(){w.current.pressed&&(M.active&&L(),w.current.pressed=!1,w.current.mouse=!1,Y());},Y=function(){E.current.cursor&&(document.body.style.cursor=g.current.body.cursor||"",m.current&&(m.current.style.cursor=g.current.reference.cursor||"")),m.current&&(m.current.style.userSelect=g.current.reference.userSelect||"");},I=function(){w.current.artificial=!1,w.current.pressed=!0;},j=function(){w.current.pressed&&(w.current.started&&!w.current.scrolling&&L(),w.current.pressed=!1);},C=function(){var e,t;w.current.scrolling=!0,w.current.started?null===(t=(e=b.current).onScroll)||void 0===t||t.call(e):function(){var e,t;w.current.started=!0,null===(t=(e=b.current).onStartScroll)||void 0===t||t.call(e);}(),N();},N=(i=250,u=v((function(){var e=w.current,t=e.pressed,r=e.started,n=e.artificial;t||!r||n||L(),w.current.scrolling=!1;})),p=v(i),useRef(d((function(){var e;null===(e=u.current)||void 0===e||e.call(u);}),(function(){return p.current}))).current),k=useCallback((function(e){m.current!==e&&(m.current&&(m.current.removeEventListener("mousedown",O),m.current.removeEventListener("scroll",C),m.current.removeEventListener("touchstart",I)),m.current=e,m.current&&(m.current.addEventListener("mousedown",O,{passive:!1}),m.current.addEventListener("scroll",C,{passive:!1}),m.current.addEventListener("touchstart",I)));}),[]);return useEffect((function(){return window.addEventListener("mouseup",X),window.addEventListener("mousemove",x),window.addEventListener("touchend",j),function(){window.removeEventListener("mouseup",X),window.removeEventListener("mousemove",x),window.removeEventListener("touchend",j),Y();}}),[]),{ref:k}}var S=forwardRef((function(t,r){var n,o,c=l({mouseScrollImplementation:void 0},t),i=c.children,u=c.className,s=c.component,a=c.hideScrollbars,f=void 0===a||a,p=c.mouseScroll,d=void 0===p||p,v=c.mouseScrollImplementation,h=c.onStartScroll,S=c.onEndScroll,w=c.onScroll,y=function(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(e);o<n.length;o++)t.indexOf(n[o])<0&&Object.prototype.propertyIsEnumerable.call(e,n[o])&&(r[n[o]]=e[n[o]]);}return r}(c,["children","className","component","hideScrollbars","mouseScroll","mouseScrollImplementation","onStartScroll","onEndScroll","onScroll"]),g=s||"div",b=m({mouseScroll:d,mouseScrollImplementation:v,onStartScroll:h,onEndScroll:S,onScroll:w});return React__default.createElement(g,l({className:(o=[u,"indiana-scroll-container",f&&"indiana-scroll-container--hide-scrollbars"],o.filter((function(e){return e})).join(" ")),ref:(n=[r,b.ref],function(e){n.forEach((function(t){"function"==typeof t?t(e):null!=t&&(t.current=e);}));})},y),i)}));
 
 function ScrollOnDrag(props) {
   const {
     children,
     className,
-    speed
+    scrollContainerProps
   } = props;
-  const ref = React.useRef(null);
-  const fun = ref => ({
-    dx
-  }) => {
-    ref.current.scrollLeft += dx * speed; // eslint-disable-line no-param-reassign
-  };
-  const {
-    events
-  } = useScrollOnDrag(ref, {
-    runScroll: fun(ref)
-  });
-  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const ref = useRef(null);
+  const fillClass = useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'fill'
   });
-  const fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const fillHoverClass = useDeviceTargetClass(props, {
     prefix: 'fill_hover_',
     propsKey: 'fillHover'
   });
-  const widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const widthClass = useDeviceTargetClass(props, {
     prefix: 'width_',
     propsKey: 'width'
   });
-  const heightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const heightClass = useDeviceTargetClass(props, {
     prefix: 'height_',
     propsKey: 'height'
   });
-  const borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const borderColorClass = useDeviceTargetClass(props, {
     prefix: 'border-color_',
     propsKey: 'borderColor'
   });
-  const borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const borderWidthClass = useDeviceTargetClass(props, {
     prefix: 'border-width_',
     propsKey: 'borderWidth'
   });
-  const borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const borderTypeClass = useDeviceTargetClass(props, {
     prefix: 'border_type_',
     propsKey: 'borderType'
   });
-  const elevationClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const elevationClass = useDeviceTargetClass(props, {
     prefix: 'elevation_',
     propsKey: 'elevation'
   });
   const {
-    styles: groupStyles
-  } = useStyles.useStyles(props);
-  return /*#__PURE__*/React__default.default.createElement("div", Object.assign({
-    className: clsx__default.default(className, 'scrolldrag', borderColorClass, borderTypeClass, borderWidthClass, elevationClass, fillClass, fillHoverClass, heightClass, widthClass)
-  }, events, {
+    styles: styles,
+    scrollContainer: scrollContainerStyles
+  } = useStyles(props);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: clsx('scroll-on-drag', className, borderColorClass, borderTypeClass, borderWidthClass, elevationClass, fillClass, fillHoverClass, heightClass, widthClass),
     ref: ref,
-    style: groupStyles
-  }), children);
+    style: styles
+  }, /*#__PURE__*/React__default.createElement(S, Object.assign({
+    className: "scroll-on-drag__wrapper"
+  }, scrollContainerProps, {
+    style: scrollContainerStyles
+  }), children));
 }
+ScrollOnDrag.defaultProps = {
+  width: 'fill'
+};
 ScrollOnDrag.propTypes = {
-  borderColor: PropTypes__default.default.oneOf(borderColor.default),
-  borderType: PropTypes__default.default.oneOf(borderType.default),
-  borderWidth: PropTypes__default.default.oneOf(borderWidth.default),
-  children: PropTypes__default.default.any,
-  className: PropTypes__default.default.string,
-  elevation: PropTypes__default.default.oneOf(),
-  fill: PropTypes__default.default.oneOf(fill.default),
-  fillHover: PropTypes__default.default.oneOf(fillHover.default),
-  height: PropTypes__default.default.oneOf(height.default),
-  width: PropTypes__default.default.oneOf(width.default)
+  borderColor: PropTypes.oneOf(borderColorProps),
+  borderType: PropTypes.oneOf(borderTypeProps),
+  borderWidth: PropTypes.oneOf(borderWidthProps),
+  children: PropTypes.any,
+  className: PropTypes.string,
+  elevation: PropTypes.oneOf(),
+  fill: PropTypes.oneOf(fillProps),
+  fillHover: PropTypes.oneOf(fillHoverProps),
+  height: PropTypes.oneOf(heightProps),
+  isScrollHidden: PropTypes.bool,
+  speed: PropTypes.number,
+  width: PropTypes.oneOf(widthProps)
 };
 ScrollOnDrag.__docgenInfo = {
   "description": "",
   "methods": [],
   "displayName": "ScrollOnDrag",
   "props": {
+    "width": {
+      "defaultValue": {
+        "value": "'fill'",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "widthProps"
+      },
+      "required": false
+    },
     "borderColor": {
       "description": "",
       "type": {
@@ -275,16 +186,21 @@ ScrollOnDrag.__docgenInfo = {
       },
       "required": false
     },
-    "width": {
+    "isScrollHidden": {
       "description": "",
       "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "widthProps"
+        "name": "bool"
+      },
+      "required": false
+    },
+    "speed": {
+      "description": "",
+      "type": {
+        "name": "number"
       },
       "required": false
     }
   }
 };
 
-exports.ScrollOnDrag = ScrollOnDrag;
+export { ScrollOnDrag };

package/dist/components/Scrollbar.js

@@ -1,25 +1,22 @@
-'use strict';
-
-var React = require('react');
-require('prop-types');
-var clsx = require('clsx');
-var reactScrollbarsCustom = require('react-scrollbars-custom');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefault(React);
-var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+import React__default from 'react';
+import clsx from 'clsx';
+import { Scrollbar as Scrollbar$1 } from 'react-scrollbars-custom';
 
 function Scrollbar(props) {
   const {
     children,
     className,
+    scrollbarWidth,
     scrollHeight,
-    onScroll
+    onScroll,
+    noDefaultStyles
   } = props;
-  return /*#__PURE__*/React__default.default.createElement(reactScrollbarsCustom.Scrollbar, {
-    className: clsx__default.default('scrollbar', className),
+  console.log(scrollHeight);
+  return /*#__PURE__*/React__default.createElement(Scrollbar$1, {
+    className: clsx('scrollbar', className),
     onScroll: onScroll,
+    scrollbarWidth: scrollbarWidth,
+    noDefaultStyles: noDefaultStyles,
     wrapperProps: {
       className: 'scrollbar__wrapper'
     },
@@ -42,12 +39,12 @@ function Scrollbar(props) {
       className: 'scrollbar__track-y-item'
     },
     style: {
-      height: scrollHeight
+      height: scrollHeight + 'px'
     }
   }, children);
 }
 Scrollbar.defaultProps = {
-  scrollHeight: '200px'
+  scrollHeight: '200'
 };
 Scrollbar.__docgenInfo = {
   "description": "",
@@ -56,7 +53,7 @@ Scrollbar.__docgenInfo = {
   "props": {
     "scrollHeight": {
       "defaultValue": {
-        "value": "'200px'",
+        "value": "'200'",
         "computed": false
       },
       "required": false
@@ -64,4 +61,4 @@ Scrollbar.__docgenInfo = {
   }
 };
 
-exports.Scrollbar = Scrollbar;
+export { Scrollbar };