Upgraded to React 17 with adjustments to Scrollable

package.json

@@ -42,13 +42,13 @@
     "@rollup/plugin-babel": "5.2.1",
     "@rollup/plugin-commonjs": "16.0.0",
     "@rollup/plugin-node-resolve": "10.0.0",
+    "@wojtekmaj/enzyme-adapter-react-17": "0.6.1",
     "babel-eslint": "10.1.0",
     "babel-loader": "8.2.2",
     "babel-plugin-module-resolver": "4.0.0",
     "babel-plugin-rewire": "1.2.0",
     "chai": "4.2.0",
     "enzyme": "3.11.0",
-    "enzyme-adapter-react-16": "1.15.5",
     "eslint": "7.15.0",
     "eslint-plugin-import": "2.22.1",
     "eslint-plugin-notice": "0.9.10",
@@ -59,8 +59,8 @@
     "nyc": "15.1.0",
     "postcss": "8.2.1",
     "prop-types": "15.7.2",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
     "rollup": "2.35.0",
     "rollup-plugin-postcss": "4.0.0",
     "rollup-plugin-terser": "7.0.2",

src/components/Scrollable/Scrollable.jsx

@@ -105,6 +105,7 @@ export default class Scrollable extends React.PureComponent {
         return {
             className: classNames('scrollbar-inner', element.props.className),
             ref: copyComponentRef(element.ref, this.container),
+            onScroll: this.handleOnScroll,
         }
     };
 
@@ -115,7 +116,7 @@ export default class Scrollable extends React.PureComponent {
         const content = React.Children.toArray(children).filter(child => ![VerticalScrollbarPlaceholder, HorizontalScrollbarPlaceholder].includes(child.type));
         return (
             <ResizeObserver onResize={this.updateScrollbars}>
-                <div className='scrollbar' style={style} onScroll={this.handleOnScroll}>
+                <div className='scrollbar' style={style}>
                     {React.cloneElement(element, this.getElementProps(), content)}
                     {React.cloneElement(vsb ? vsb.props.children : <VerticalScrollbar/>, {ref: this.vertical, container: this.container})}
                     {React.cloneElement(hsb ? hsb.props.children : <HorizontalScrollbar/>, {ref: this.horizontal, container: this.container})}

src/hooks/useClickOutside/useClickOutside.test.js

@@ -7,31 +7,34 @@ import {mount, shallow} from 'enzyme';
 import OverrideContext from './useClickOutside.context';
 import {useClickOutside, ClickOutside, ClickOutsideOverride} from './useClickOutside';
 
-const Elem = () => {
-    let test = 1234;
-    const ref = sinon.spy();
-    useClickOutside(ref, () => test = 4321);
-    return <div>{test}</div>;
+const Elem = callback => {
+    useClickOutside(callback);
+    return <div/>;
 };
 
 describe('useClickOutside()', () => {
     it('Should add an event listener to the document', () => {
         document.addEventListener = sinon.spy();
         document.removeEventListener = sinon.spy();
-
         let elem;
-        act(() => {
-            elem = mount(<Elem/>);
-        });
-        expect(elem.text()).to.eql('1234');
+        act(() => {elem = mount(<Elem/>)});
         expect(document.addEventListener.calledTwice).to.eql(true);
         expect(document.addEventListener.calledWith('mousedown')).to.eql(true);
         expect(document.addEventListener.calledWith('mouseup')).to.eql(true);
-        elem.unmount();
+        act(() => {elem.unmount()});
+        expect(document.removeEventListener.calledTwice).to.eql(true);
         expect(document.removeEventListener.calledWith('mousedown')).to.eql(true);
         expect(document.removeEventListener.calledWith('mouseup')).to.eql(true);
     });
 
+    it('Should not trigger the callback on click inside', () => {
+        const callback = sinon.spy();
+        const elem = mount(<Elem callback={callback}/>);
+        expect(elem.find('div'));
+        elem.simulate('click');
+        expect(callback.callCount).to.eql(0);
+    });
+
     it('<ClickOutside/>', () => {
         const wrapper = shallow(<ClickOutside><div/></ClickOutside>);
         expect(() => shallow(<ClickOutside/>)).to.throw();

src/hooks/useDebounce/useDebounce.test.js

@@ -42,7 +42,7 @@ describe('useDebounce()', () => {
         let wrapper = null;
         const spy = sinon.spy(global, 'clearTimeout');
         act(() => {wrapper = mount(<Elem/>)});
-        wrapper.unmount();
+        act(() => {wrapper.unmount()});
         expect(spy.callCount).to.eql(1);
         spy.restore();
     });

src/hooks/useDimensions/useDimensions.test.js

@@ -11,7 +11,7 @@ const Elem = () => {
     );
 };
 
-describe('useDebounce()', () => {
+describe('useDimensions()', () => {
     it('Should return the previous value', async () => {
         let wrapper = null;
         let observed = 0, disconnected = 0;
@@ -24,7 +24,7 @@ describe('useDebounce()', () => {
         expect(observed).to.eql(1);
         expect(disconnected).to.eql(0);
 
-        wrapper.unmount();
+        act(() => {wrapper.unmount()});
         expect(observed).to.eql(1);
         expect(disconnected).to.eql(1);
     });