feat: support all native div props on Scrollable

Fixes #25

- Spread native div props onto outer div element
- Support className prop merged with 'scrollbar' class

Author: ykadosh

src/components/Scrollable/Scrollable.jsx

@@ -173,21 +173,21 @@ export default class Scrollable extends React.PureComponent {
     }
 
     render() {
-        const {children, style, element} = this.props;
+        // eslint-disable-next-line no-unused-vars
+        const {children, style, element, onScroll, onUpdate, scrollOnDOMChange, cssVarsOnTracks, className, ...rest} = this.props;
         const vsb = findChildByType(children, VerticalScrollbarPlaceholder);
         const hsb = findChildByType(children, HorizontalScrollbarPlaceholder);
         const content = React.Children.toArray(children).filter(child => ![VerticalScrollbarPlaceholder, HorizontalScrollbarPlaceholder].includes(child.type));
 
         return (
-            <ResizeObserver onResize={this.updateScrollbars}>
-                <div className='scrollbar' style={style} onTransitionEnd={this.handleOnTransitionEnd}>
+            <Context.Provider value={this.state}>
+                <div {...rest} className={classNames('scrollbar', className)} style={style} onTransitionEnd={this.handleOnTransitionEnd}>
                     {React.cloneElement(element, this.getElementProps(), content)}
-                    <Context.Provider value={this.state}>
-                        {vsb ? vsb.props.children : <VerticalScrollbar/>}
-                        {hsb ? hsb.props.children : <HorizontalScrollbar/>}
-                    </Context.Provider>
+                    <ResizeObserver onResize={this.updateScrollbars}/>
+                    {vsb ? vsb.props.children : <VerticalScrollbar/>}
+                    {hsb ? hsb.props.children : <HorizontalScrollbar/>}
                 </div>
-            </ResizeObserver>
+            </Context.Provider>
         );
     }
-}
+}