Merge branch '2.x' into structure_change_and_renaming

src/components/Movable/Movable.hooks.js

@@ -17,19 +17,22 @@
 import {useRef, useCallback} from 'react';
 
 export const useMove = ops => {
+    const opsRef = useRef(ops);
     const shared = useRef({});
 
+    opsRef.current = ops;
+
     const onBeginMove = useCallback(e => {
-        ops.forEach(({onBeginMove}) => onBeginMove(e, shared.current));
-    }, [ops]);
+        opsRef.current.forEach(({onBeginMove}) => onBeginMove(e, shared.current));
+    }, []);
 
     const onMove = useCallback(e => {
-        ops.forEach(({onMove}) => onMove(e, shared.current));
-    }, [ops]);
+        opsRef.current.forEach(({onMove}) => onMove(e, shared.current));
+    }, []);
 
     const onEndMove = useCallback(e => {
-        ops.forEach(({onEndMove}) => onEndMove(e, shared.current))
-    }, [ops]);
+        opsRef.current.forEach(({onEndMove}) => onEndMove(e, shared.current))
+    }, []);
 
     return {onBeginMove, onMove, onEndMove};
 };

src/components/Movable/Movable.test.js

@@ -32,13 +32,14 @@ describe('<Movable/>', () => {
             expect(stopPropagation.calledOnce).toEqual(true);
             expect(preventDefault.calledOnce).toEqual(true);
         });
+
         it('onMove()', () => {
             const handleOnMove = sinon.spy();
             const wrapper = mount(<Movable onMove={handleOnMove}/>);
             const handlers = {};
             let event;
 
-            document.addEventListener = (type, handler) => handlers[type] = handler;
+            document.addEventListener = (type, handler) => {handlers[type] = handler};
             wrapper.simulate('mousedown', {clientX: 10, clientY: 10});
             wrapper.simulate('touchstart', {changedTouches: [{clientX: 10, clientY: 10}]});
 
@@ -78,12 +79,13 @@ describe('<Movable/>', () => {
             expect(event.dx).toEqual(-10);
             expect(event.dy).toEqual(-10);
         });
+
         it('onEndMove()', () => {
             const handleOnEndMove = sinon.spy();
             const wrapper = mount(<Movable onEndMove={handleOnEndMove}/>);
             const handlers = {};
 
-            document.addEventListener = (type, handler) => handlers[type] = handler;
+            document.addEventListener = (type, handler) => {handlers[type] = handler};
             document.removeEventListener = sinon.spy();
 
             wrapper.simulate('mousedown', {clientX: 10, clientY: 10});

src/components/Resizable/Resizable.hooks.js

@@ -17,19 +17,22 @@
 import {useRef, useCallback} from 'react';
 
 export const useResize = ops => {
+    const opsRef = useRef(ops);
     const shared = useRef({});
 
+    opsRef.current = ops;
+
     const onBeginResize = useCallback(e => {
-        ops.forEach(({onBeginResize}) => onBeginResize(e, shared.current));
-    }, [ops]);
+        opsRef.current.forEach(({onBeginResize}) => onBeginResize(e, shared.current));
+    }, []);
 
     const onResize = useCallback(e => {
-        ops.forEach(({onResize}) => onResize(e, shared.current));
-    }, [ops]);
+        opsRef.current.forEach(({onResize}) => onResize(e, shared.current));
+    }, []);
 
     const onEndResize = useCallback(e => {
-        ops.forEach(({onEndResize}) => onEndResize(e, shared.current));
-    }, [ops]);
+        opsRef.current.forEach(({onEndResize}) => onEndResize(e, shared.current));
+    }, []);
 
     return {onBeginResize, onResize, onEndResize};
 };

src/components/Scrollable/Scrollable.jsx

@@ -167,14 +167,14 @@ export default class Scrollable extends React.PureComponent {
     };
 
     render() {
-        const {children, style, element} = this.props;
+        const {children, element, className} = 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}>
+                <div {...this.props} className={classNames('scrollbar', className)} onTransitionEnd={this.handleOnTransitionEnd}>
                     {React.cloneElement(element, this.getElementProps(), content)}
                     <Context.Provider value={this.state}>
                         {vsb ? vsb.props.children : <VerticalScrollbar/>}

src/components/Scrollable/Scrollable.props.js

@@ -15,11 +15,11 @@
  */
 
 import React from 'react';
-import {func, shape, node, bool} from 'prop-types';
+import {func, node, bool, string} from 'prop-types';
 import {noop} from 'utility/memory';
 
 export const propTypes = {
-    style: shape({}),
+    className: string,
     onScroll: func,
     onUpdate: func,
     scrollOnDOMChange: bool,
@@ -29,7 +29,7 @@ export const propTypes = {
 };
 
 export const defaultProps = {
-    style: null,
+    className: null,
     onScroll: noop,
     onUpdate: noop,
     scrollOnDOMChange: true,

src/components/Scrollable/Scrollable.scss

@@ -2,17 +2,13 @@
   --scrollable-track-thickness: 12px;
   --scrollable-thumb-thickness: Calc(var(--scrollable-track-thickness)/2);
   --scrollable-thumb-offset: 3px;
+  --scrollable-thumb-color: silver;
 
   position: relative;
   max-height: 100%;
   max-width: 100%;
   display: flex;
 
-  &:hover > .scrollbar-track .scrollbar-thumb .scrollbar-thumb-inner {
-    opacity: 1;
-    transition-delay: 0s;
-  }
-
   .scrollbar-inner {
     position: relative;
     overflow: auto;
@@ -37,10 +33,7 @@
       cursor: pointer;
 
       .scrollbar-thumb-inner {
-        background-color: rgba(28, 34, 43, 0.6);
-        border-radius: 4px;
-        opacity: 0;
-        transition: opacity 0.2s ease-out 0.5s; // The transition delay is used to keep the thumb visible for a short time when the cursor leaves. (see `Scrollable.constants.js`)
+        background-color: var(--scrollable-thumb-color);
       }
     }
   }

src/components/Scrollable/components/HorizontalScrollbar/HorizontalScrollbar.jsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, {useContext, useMemo, useRef} from 'react';
+import React, {useContext, useRef} from 'react';
 import Movable from 'components/Movable';
 import Context from '../../Scrollable.context';
 import {CSS_VARS} from '../../Scrollable.constants';
@@ -25,7 +25,7 @@ const HorizontalScrollbar = () => {
     const track = useRef();
     const thumb = useRef();
     const {container, scrollLeft, cssVarsOnTracks} = useContext(Context);
-    const props = Movable.useMove(useMemo(() => [move(container, thumb, track)], [container]));
+    const props = Movable.useMove([move(container, thumb, track)]);
 
     const handleOnClick = e => {
         e.stopPropagation();

src/components/Scrollable/components/VerticalScrollbar/VerticalScrollbar.jsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, {useContext, useMemo, useRef} from 'react';
+import React, {useContext, useRef} from 'react';
 import Movable from 'components/Movable';
 import Context from '../../Scrollable.context';
 import {CSS_VARS} from '../../Scrollable.constants';
@@ -25,7 +25,7 @@ const VerticalScrollbar = () => {
     const track = useRef();
     const thumb = useRef();
     const {container, scrollTop, cssVarsOnTracks} = useContext(Context);
-    const props = Movable.useMove(useMemo(() => [move(container, thumb, track)], [container]));
+    const props = Movable.useMove([move(container, thumb, track)]);
 
     const handleOnClick = e => {
         e.stopPropagation();

src/hooks/useMounted/index.js

@@ -15,5 +15,4 @@
  */
 
 import {useMounted} from './useMounted';
-export {useUnmounted} from './useMounted';
 export default useMounted;

src/hooks/useMounted/useMounted.js

@@ -20,13 +20,6 @@ export const useMounted = () => {
     const mounted = useRef(false);
     useEffect(() => {
         mounted.current = true;
-        return () => mounted.current = false;
     }, []);
     return mounted.current;
-};
-
-export const useUnmounted = () => {
-    const unmounted = useRef(false);
-    useEffect(() => () => {unmounted.current = true}, []);
-    return unmounted.current;
 };

src/hooks/useMounted/useMounted.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import {act} from 'react-dom/test-utils';
 import {mount} from 'enzyme';
-import {useMounted, useUnmounted} from './useMounted';
+import {useMounted} from './useMounted';
 
 describe('useMounted()', () => {
     it('Should return the previous value', () => {
@@ -20,21 +20,3 @@ describe('useMounted()', () => {
         expect(wrapper.find('.unmounted').length).toEqual(0);
     });
 });
-
-describe('useUnmounted()', () => {
-    it('Should return the previous value', () => {
-        const Elem = () => {
-            const unmounted = useUnmounted();
-            return (
-                <div className={`${unmounted ? 'un' : ''}mounted`}/>
-            );
-        };
-        let wrapper = null;
-        act(() => {wrapper = mount(<Elem/>)});
-        expect(wrapper.find('.unmounted').length).toEqual(0);
-        expect(wrapper.find('.mounted').length).toEqual(1);
-        wrapper.setProps({foo: 'bar'}); // Force an update...
-        expect(wrapper.find('.mounted').length).toEqual(1);
-        expect(wrapper.find('.unmounted').length).toEqual(0);
-    });
-});

src/utility/object/object.test.js

@@ -1,4 +1,4 @@
-import {get, set, isEqual, omit, clone} from './object';
+import {get, set, isEqual, omit, clone, EqualityIterators} from './object';
 
 describe('Object', () => {
 
@@ -86,6 +86,32 @@ describe('Object', () => {
         expect(isEqual(parent1, parent2)).toEqual(false);
     });
 
+    it('isEqual() with shallow comparison', () => {
+        expect(isEqual(1, 1, EqualityIterators.SHALLOW)).toEqual(true);
+        expect(isEqual(true, false, EqualityIterators.SHALLOW)).toEqual(false);
+        expect(isEqual('hello', 'hello', EqualityIterators.SHALLOW)).toEqual(true);
+        expect(isEqual([1, 2, 3], [1, 2, 3], EqualityIterators.SHALLOW)).toEqual(true);
+        expect(isEqual([1, 2, 3], [3, 2, 1], EqualityIterators.SHALLOW)).toEqual(false);
+        expect(isEqual([{id: 1}], [{id: 2}], EqualityIterators.SHALLOW)).toEqual(false);
+        expect(isEqual({foo: 'bar'}, {foo: 'bar'}, EqualityIterators.SHALLOW)).toEqual(true);
+        expect(isEqual({foo: 'bar'}, {bar: 'foo'}, EqualityIterators.SHALLOW)).toEqual(false);
+        expect(isEqual({foo: [1, 2, {a: 1}]}, {foo: [1, 2, {a: 1}]}, EqualityIterators.SHALLOW)).toEqual(false);
+        expect(isEqual({foo: [1, 2, {a: 1}]}, {foo: [1, 2, {a: 2}]}, EqualityIterators.SHALLOW)).toEqual(false);
+
+        /* Check Circular Traversal */
+        const sub1 = {foo: [1, 2, {a: 1}]};
+        const sub2 = {foo: [1, 2, {a: 1}]};
+        const parent1 = {foo: [1, 2, {a: 1}], sub1, sub2};
+        const parent2 = {foo: [1, 2, {a: 1}], sub1, sub2};
+        parent1.aaa = parent2;
+        parent1.bbb = parent1;
+        parent2.aaa = parent1;
+        parent2.bbb = parent2;
+        expect(isEqual(parent1, parent2, EqualityIterators.SHALLOW)).toEqual(false);
+        parent2.ccc = 6;
+        expect(isEqual(parent1, parent2, EqualityIterators.SHALLOW)).toEqual(false);
+    });
+
     it('clone()', () => {
         const source = {foo: 1, bar: 'hello', baz: {baq: 23, test: [1, 2, 3]}};
         const target = clone(source);