feat(scroll-container): modify scrollbarWidth (#155)

* feat: modify scrollbarWidth

* fix(scroll-list): drop default scrollbarWith to 8

* chore: de-dupe yarn.lock

Author: Jakub Rożek

src/ScrollContainer/index.tsx

@@ -19,7 +19,7 @@ interface IScrollContainer extends Omit<ScrollbarProps, 'ref'> {
 }
 
 const ScrollContainer = React.forwardRef<ScrollbarRefInstance, IScrollContainer>(
-  ({ id, children, shadows = true, autosize = true, ...props }, scrollbarRef) => {
+  ({ id, children, shadows = true, autosize = true, scrollbarWidth = 6, ...props }, scrollbarRef) => {
     const scrollbar = React.useRef<any>(null);
     const scrollbarCallback = React.useCallback<ScrollbarRef>(
       ref => {
@@ -103,7 +103,7 @@ const ScrollContainer = React.forwardRef<ScrollbarRefInstance, IScrollContainer>
             opacity: 0,
             cursor: 'pointer',
             background: 'inherit',
-            width: 6,
+            width: scrollbarWidth,
             marginRight: 0,
             borderRadius: 0,
             top: 0,
@@ -116,7 +116,7 @@ const ScrollContainer = React.forwardRef<ScrollbarRefInstance, IScrollContainer>
             opacity: 0,
             cursor: 'pointer',
             background: 'inherit',
-            height: 6,
+            height: scrollbarWidth,
             marginBottom: 0,
             borderRadius: 0,
             left: 0,

src/ScrollList/index.tsx

@@ -12,22 +12,24 @@ import { ScrollContainer } from '../ScrollContainer';
  * HELPERS
  */
 
-export const CustomScrollContainer = React.forwardRef<HTMLDivElement, IFixedSizeListProps & { listHeight: number }>(
-  ({ onScroll = noop, children, style, className }, ref) => {
-    return (
-      <div style={style} className="ScrollList-Scrollbars">
-        <ScrollContainer
-          ref={ref}
-          // @ts-ignore typings on onScroll are not right?
-          onScroll={scrollValues => onScroll({ currentTarget: scrollValues })}
-          autosize={false}
-        >
-          <div className={cn('ScrollList-Content relative', className)}>{children}</div>
-        </ScrollContainer>
-      </div>
-    );
-  },
-);
+export const CustomScrollContainer = React.forwardRef<
+  HTMLDivElement,
+  IFixedSizeListProps & { listHeight: number; scrollbarWidth?: number }
+>(({ onScroll = noop, children, style, className, scrollbarWidth = 8 }, ref) => {
+  return (
+    <div style={style} className="ScrollList-Scrollbars">
+      <ScrollContainer
+        ref={ref}
+        // @ts-ignore typings on onScroll are not right?
+        onScroll={scrollValues => onScroll({ currentTarget: scrollValues })}
+        autosize={false}
+        scrollbarWidth={scrollbarWidth}
+      >
+        <div className={cn('ScrollList-Content relative', className)}>{children}</div>
+      </ScrollContainer>
+    </div>
+  );
+});
 
 /**
  * FIXED SIZE LIST