Merge pull request #184 from wbkd/develop

Develop

.travis.yml

@@ -1,7 +1,7 @@
 language: node_js
 
 node_js:
-  - 10
+  - 10.8
 
 addons:
   apt:
@@ -19,7 +19,6 @@ install:
 before_script:
   - cd example && npm install
   - cd ..
-  - npm run dev &
 
 script:
-  - npm run cy:run
+  - npm run test

dist/ReactFlow.esm.js

@@ -7202,17 +7202,21 @@ function addEvent(el
 /*: string*/
 , handler
 /*: Function*/
+, inputOptions
+/*: Object*/
 )
 /*: void*/
 {
-  if (!el) {
+  if (!el) return;
-    return;
+  const options = {
-  }
+    capture: true,
+    ...inputOptions
+  };
 
-  if (el.attachEvent) {
+  if (el.addEventListener) {
+    el.addEventListener(event, handler, options);
+  } else if (el.attachEvent) {
     el.attachEvent('on' + event, handler);
-  } else if (el.addEventListener) {
-    el.addEventListener(event, handler, true);
   } else {
     // $FlowIgnore: Doesn't think elements are indexable
     el['on' + event] = handler;
@@ -7224,17 +7228,21 @@ function removeEvent(el
 /*: string*/
 , handler
 /*: Function*/
+, inputOptions
+/*: Object*/
 )
 /*: void*/
 {
-  if (!el) {
+  if (!el) return;
-    return;
+  const options = {
-  }
+    capture: true,
+    ...inputOptions
+  };
 
-  if (el.detachEvent) {
+  if (el.removeEventListener) {
+    el.removeEventListener(event, handler, options);
+  } else if (el.detachEvent) {
     el.detachEvent('on' + event, handler);
-  } else if (el.removeEventListener) {
-    el.removeEventListener(event, handler, true);
   } else {
     // $FlowIgnore: Doesn't think elements are indexable
     el['on' + event] = null;
@@ -7395,30 +7403,26 @@ function addUserSelectStyles(doc
 function removeUserSelectStyles(doc
 /*: ?Document*/
 ) {
+  if (!doc) return;
+
   try {
-    if (doc && doc.body) removeClassName(doc.body, 'react-draggable-transparent-selection'); // $FlowIgnore: IE
+    if (doc.body) removeClassName(doc.body, 'react-draggable-transparent-selection'); // $FlowIgnore: IE
 
     if (doc.selection) {
       // $FlowIgnore: IE
       doc.selection.empty();
     } else {
-      window.getSelection().removeAllRanges(); // remove selection caused by scroll
+      // Remove selection caused by scroll, unless it's a focused input
+      // (we use doc.defaultView in case we're in an iframe)
+      const selection = (doc.defaultView || window).getSelection();
+
+      if (selection && selection.type !== 'Caret') {
+        selection.removeAllRanges();
+      }
     }
   } catch (e) {// probably IE
   }
 }
-function styleHacks(childStyle
-/*: Object*/
-= {})
-/*: Object*/
-{
-  // Workaround IE pointer events; see #51
-  // https://github.com/mzabriskie/react-draggable/issues/51#issuecomment-103488278
-  return {
-    touchAction: 'none',
-    ...childStyle
-  };
-}
 function addClassName(el
 /*: HTMLElement*/
 , className
@@ -7708,7 +7712,9 @@ let dragEventFor = eventsFor.mouse;
 // <DraggableCore> is for advanced usage of <Draggable>. It maintains minimal internal state so it can
 // work well with libraries that require more control over the element.
 //
-class DraggableCore extends React__default.Component {
+class DraggableCore extends React__default.Component
+/*:: <DraggableCoreProps, DraggableCoreState>*/
+{
   constructor(...args) {
     super(...args);
 
@@ -7720,6 +7726,8 @@ class DraggableCore extends React__default.Component {
       touchIdentifier: null
     });
 
+    _defineProperty$1(this, "mounted", false);
+
     _defineProperty$1(this, "handleDragStart", e => {
       // Make it possible to attach event handlers on top of this one.
       this.props.onMouseDown(e); // Only accept left-clicks.
@@ -7738,11 +7746,14 @@ class DraggableCore extends React__default.Component {
 
       if (this.props.disabled || !(e.target instanceof ownerDocument.defaultView.Node) || this.props.handle && !matchesSelectorAndParentsTo(e.target, this.props.handle, thisNode) || this.props.cancel && matchesSelectorAndParentsTo(e.target, this.props.cancel, thisNode)) {
         return;
-      } // Set touch identifier in component state if this is a touch event. This allows us to
+      } // Prevent scrolling on mobile devices, like ipad/iphone.
+      // Important that this is after handle/cancel.
+
+
+      if (e.type === 'touchstart') e.preventDefault(); // Set touch identifier in component state if this is a touch event. This allows us to
       // distinguish between individual touches on multitouch screens by identifying which
       // touchpoint was set to this element.
 
-
       const touchIdentifier = getTouchIdentifier(e);
       this.setState({
         touchIdentifier
@@ -7760,7 +7771,7 @@ class DraggableCore extends React__default.Component {
 
       log('calling', this.props.onStart);
       const shouldUpdate = this.props.onStart(e, coreEvent);
-      if (shouldUpdate === false) return; // Add a style to the body to disable user-select. This prevents text from
+      if (shouldUpdate === false || this.mounted === false) return; // Add a style to the body to disable user-select. This prevents text from
       // being selected all over the page.
 
       if (this.props.enableUserSelectHack) addUserSelectStyles(ownerDocument); // Initiate dragging. Set the current x and y as offsets
@@ -7780,9 +7791,7 @@ class DraggableCore extends React__default.Component {
     });
 
     _defineProperty$1(this, "handleDrag", e => {
-      // Prevent scrolling on mobile devices, like ipad/iphone.
+      // Get the current drag point from the event. This is used as the offset.
-      if (e.type === 'touchmove') e.preventDefault(); // Get the current drag point from the event. This is used as the offset.
-
       const position = getControlPosition(e, this.state.touchIdentifier, this);
       if (position == null) return;
       let {
@@ -7803,7 +7812,7 @@ class DraggableCore extends React__default.Component {
 
       const shouldUpdate = this.props.onDrag(e, coreEvent);
 
-      if (shouldUpdate === false) {
+      if (shouldUpdate === false || this.mounted === false) {
         try {
           // $FlowIgnore
           this.handleDragStop(new MouseEvent('mouseup'));
@@ -7837,7 +7846,10 @@ class DraggableCore extends React__default.Component {
         x,
         y
       } = position;
-      const coreEvent = createCoreData(this, x, y);
+      const coreEvent = createCoreData(this, x, y); // Call event handler
+
+      const shouldContinue = this.props.onStop(e, coreEvent);
+      if (shouldContinue === false || this.mounted === false) return false;
       const thisNode = ReactDOM.findDOMNode(this);
 
       if (thisNode) {
@@ -7849,9 +7861,7 @@ class DraggableCore extends React__default.Component {
         dragging: false,
         lastX: NaN,
         lastY: NaN
-      }); // Call event handler
+      });
-
-      this.props.onStop(e, coreEvent);
 
       if (thisNode) {
         removeEvent(thisNode.ownerDocument, dragEventFor.move, this.handleDrag);
@@ -7883,9 +7893,23 @@ class DraggableCore extends React__default.Component {
     });
   }
 
+  componentDidMount() {
+    this.mounted = true; // Touch handlers must be added with {passive: false} to be cancelable.
+    // https://developers.google.com/web/updates/2017/01/scrolling-intervention
+
+    const thisNode = ReactDOM.findDOMNode(this);
+
+    if (thisNode) {
+      addEvent(thisNode, eventsFor.touch.start, this.onTouchStart, {
+        passive: false
+      });
+    }
+  }
+
   componentWillUnmount() {
-    // Remove any leftover event handlers. Remove both touch and mouse handlers in case
+    this.mounted = false; // Remove any leftover event handlers. Remove both touch and mouse handlers in case
     // some browser quirk caused a touch event to fire during a mouse move, or vice versa.
+
     const thisNode = ReactDOM.findDOMNode(this);
 
     if (thisNode) {
@@ -7896,6 +7920,9 @@ class DraggableCore extends React__default.Component {
       removeEvent(ownerDocument, eventsFor.touch.move, this.handleDrag);
       removeEvent(ownerDocument, eventsFor.mouse.stop, this.handleDragStop);
       removeEvent(ownerDocument, eventsFor.touch.stop, this.handleDragStop);
+      removeEvent(thisNode, eventsFor.touch.start, this.onTouchStart, {
+        passive: false
+      });
       if (this.props.enableUserSelectHack) removeUserSelectStyles(ownerDocument);
     }
   }
@@ -7904,12 +7931,13 @@ class DraggableCore extends React__default.Component {
     // Reuse the child provided
     // This makes it flexible to use whatever element is wanted (div, ul, etc)
     return React__default.cloneElement(React__default.Children.only(this.props.children), {
-      style: styleHacks(this.props.children.props.style),
       // Note: mouseMove handler is attached to document so it will still function
       // when the user drags quickly and leaves the bounds of the element.
       onMouseDown: this.onMouseDown,
-      onTouchStart: this.onTouchStart,
       onMouseUp: this.onMouseUp,
+      // onTouchStart is added on `componentDidMount` so they can be added with
+      // {passive: false}, which allows it to cancel. See 
+      // https://developers.google.com/web/updates/2017/01/scrolling-intervention
       onTouchEnd: this.onTouchEnd
     });
   }
@@ -8089,7 +8117,9 @@ function _defineProperty$2(obj, key, value) { if (key in obj) { Object.definePro
 //
 // Define <Draggable>
 //
-class Draggable extends React__default.Component {
+class Draggable extends React__default.Component
+/*:: <DraggableProps, DraggableState>*/
+{
   // React 16.3+
   // Arity (props, state)
   static getDerivedStateFromProps({
@@ -8174,8 +8204,8 @@ class Draggable extends React__default.Component {
     _defineProperty$2(this, "onDragStop", (e, coreData) => {
       if (!this.state.dragging) return false; // Short-circuit if user's callback killed it.
 
-      const shouldStop = this.props.onStop(e, createDraggableData(this, coreData));
+      const shouldContinue = this.props.onStop(e, createDraggableData(this, coreData));
-      if (shouldStop === false) return false;
+      if (shouldContinue === false) return false;
       const newState
       /*: $Shape<DraggableState>*/
       = {
@@ -8283,7 +8313,7 @@ class Draggable extends React__default.Component {
     }); // Reuse the child provided
     // This makes it flexible to use whatever element is wanted (div, ul, etc)
 
-    return React__default.createElement(DraggableCore, _extends$1({}, draggableCoreProps, {
+    return /*#__PURE__*/React__default.createElement(DraggableCore, _extends$1({}, draggableCoreProps, {
       onStart: this.onDragStart,
       onDrag: this.onDrag,
       onStop: this.onDragStop

dist/ReactFlow.js

@@ -7209,17 +7209,21 @@ function addEvent(el
 /*: string*/
 , handler
 /*: Function*/
+, inputOptions
+/*: Object*/
 )
 /*: void*/
 {
-  if (!el) {
+  if (!el) return;
-    return;
+  const options = {
-  }
+    capture: true,
+    ...inputOptions
+  };
 
-  if (el.attachEvent) {
+  if (el.addEventListener) {
+    el.addEventListener(event, handler, options);
+  } else if (el.attachEvent) {
     el.attachEvent('on' + event, handler);
-  } else if (el.addEventListener) {
-    el.addEventListener(event, handler, true);
   } else {
     // $FlowIgnore: Doesn't think elements are indexable
     el['on' + event] = handler;
@@ -7231,17 +7235,21 @@ function removeEvent(el
 /*: string*/
 , handler
 /*: Function*/
+, inputOptions
+/*: Object*/
 )
 /*: void*/
 {
-  if (!el) {
+  if (!el) return;
-    return;
+  const options = {
-  }
+    capture: true,
+    ...inputOptions
+  };
 
-  if (el.detachEvent) {
+  if (el.removeEventListener) {
+    el.removeEventListener(event, handler, options);
+  } else if (el.detachEvent) {
     el.detachEvent('on' + event, handler);
-  } else if (el.removeEventListener) {
-    el.removeEventListener(event, handler, true);
   } else {
     // $FlowIgnore: Doesn't think elements are indexable
     el['on' + event] = null;
@@ -7402,30 +7410,26 @@ function addUserSelectStyles(doc
 function removeUserSelectStyles(doc
 /*: ?Document*/
 ) {
+  if (!doc) return;
+
   try {
-    if (doc && doc.body) removeClassName(doc.body, 'react-draggable-transparent-selection'); // $FlowIgnore: IE
+    if (doc.body) removeClassName(doc.body, 'react-draggable-transparent-selection'); // $FlowIgnore: IE
 
     if (doc.selection) {
       // $FlowIgnore: IE
       doc.selection.empty();
     } else {
-      window.getSelection().removeAllRanges(); // remove selection caused by scroll
+      // Remove selection caused by scroll, unless it's a focused input
+      // (we use doc.defaultView in case we're in an iframe)
+      const selection = (doc.defaultView || window).getSelection();
+
+      if (selection && selection.type !== 'Caret') {
+        selection.removeAllRanges();
+      }
     }
   } catch (e) {// probably IE
   }
 }
-function styleHacks(childStyle
-/*: Object*/
-= {})
-/*: Object*/
-{
-  // Workaround IE pointer events; see #51
-  // https://github.com/mzabriskie/react-draggable/issues/51#issuecomment-103488278
-  return {
-    touchAction: 'none',
-    ...childStyle
-  };
-}
 function addClassName(el
 /*: HTMLElement*/
 , className
@@ -7715,7 +7719,9 @@ let dragEventFor = eventsFor.mouse;
 // <DraggableCore> is for advanced usage of <Draggable>. It maintains minimal internal state so it can
 // work well with libraries that require more control over the element.
 //
-class DraggableCore extends React__default.Component {
+class DraggableCore extends React__default.Component
+/*:: <DraggableCoreProps, DraggableCoreState>*/
+{
   constructor(...args) {
     super(...args);
 
@@ -7727,6 +7733,8 @@ class DraggableCore extends React__default.Component {
       touchIdentifier: null
     });
 
+    _defineProperty$1(this, "mounted", false);
+
     _defineProperty$1(this, "handleDragStart", e => {
       // Make it possible to attach event handlers on top of this one.
       this.props.onMouseDown(e); // Only accept left-clicks.
@@ -7745,11 +7753,14 @@ class DraggableCore extends React__default.Component {
 
       if (this.props.disabled || !(e.target instanceof ownerDocument.defaultView.Node) || this.props.handle && !matchesSelectorAndParentsTo(e.target, this.props.handle, thisNode) || this.props.cancel && matchesSelectorAndParentsTo(e.target, this.props.cancel, thisNode)) {
         return;
-      } // Set touch identifier in component state if this is a touch event. This allows us to
+      } // Prevent scrolling on mobile devices, like ipad/iphone.
+      // Important that this is after handle/cancel.
+
+
+      if (e.type === 'touchstart') e.preventDefault(); // Set touch identifier in component state if this is a touch event. This allows us to
       // distinguish between individual touches on multitouch screens by identifying which
       // touchpoint was set to this element.
 
-
       const touchIdentifier = getTouchIdentifier(e);
       this.setState({
         touchIdentifier
@@ -7767,7 +7778,7 @@ class DraggableCore extends React__default.Component {
 
       log('calling', this.props.onStart);
       const shouldUpdate = this.props.onStart(e, coreEvent);
-      if (shouldUpdate === false) return; // Add a style to the body to disable user-select. This prevents text from
+      if (shouldUpdate === false || this.mounted === false) return; // Add a style to the body to disable user-select. This prevents text from
       // being selected all over the page.
 
       if (this.props.enableUserSelectHack) addUserSelectStyles(ownerDocument); // Initiate dragging. Set the current x and y as offsets
@@ -7787,9 +7798,7 @@ class DraggableCore extends React__default.Component {
     });
 
     _defineProperty$1(this, "handleDrag", e => {
-      // Prevent scrolling on mobile devices, like ipad/iphone.
+      // Get the current drag point from the event. This is used as the offset.
-      if (e.type === 'touchmove') e.preventDefault(); // Get the current drag point from the event. This is used as the offset.
-
       const position = getControlPosition(e, this.state.touchIdentifier, this);
       if (position == null) return;
       let {
@@ -7810,7 +7819,7 @@ class DraggableCore extends React__default.Component {
 
       const shouldUpdate = this.props.onDrag(e, coreEvent);
 
-      if (shouldUpdate === false) {
+      if (shouldUpdate === false || this.mounted === false) {
         try {
           // $FlowIgnore
           this.handleDragStop(new MouseEvent('mouseup'));
@@ -7844,7 +7853,10 @@ class DraggableCore extends React__default.Component {
         x,
         y
       } = position;
-      const coreEvent = createCoreData(this, x, y);
+      const coreEvent = createCoreData(this, x, y); // Call event handler
+
+      const shouldContinue = this.props.onStop(e, coreEvent);
+      if (shouldContinue === false || this.mounted === false) return false;
       const thisNode = ReactDOM.findDOMNode(this);
 
       if (thisNode) {
@@ -7856,9 +7868,7 @@ class DraggableCore extends React__default.Component {
         dragging: false,
         lastX: NaN,
         lastY: NaN
-      }); // Call event handler
+      });
-
-      this.props.onStop(e, coreEvent);
 
       if (thisNode) {
         removeEvent(thisNode.ownerDocument, dragEventFor.move, this.handleDrag);
@@ -7890,9 +7900,23 @@ class DraggableCore extends React__default.Component {
     });
   }
 
+  componentDidMount() {
+    this.mounted = true; // Touch handlers must be added with {passive: false} to be cancelable.
+    // https://developers.google.com/web/updates/2017/01/scrolling-intervention
+
+    const thisNode = ReactDOM.findDOMNode(this);
+
+    if (thisNode) {
+      addEvent(thisNode, eventsFor.touch.start, this.onTouchStart, {
+        passive: false
+      });
+    }
+  }
+
   componentWillUnmount() {
-    // Remove any leftover event handlers. Remove both touch and mouse handlers in case
+    this.mounted = false; // Remove any leftover event handlers. Remove both touch and mouse handlers in case
     // some browser quirk caused a touch event to fire during a mouse move, or vice versa.
+
     const thisNode = ReactDOM.findDOMNode(this);
 
     if (thisNode) {
@@ -7903,6 +7927,9 @@ class DraggableCore extends React__default.Component {
       removeEvent(ownerDocument, eventsFor.touch.move, this.handleDrag);
       removeEvent(ownerDocument, eventsFor.mouse.stop, this.handleDragStop);
       removeEvent(ownerDocument, eventsFor.touch.stop, this.handleDragStop);
+      removeEvent(thisNode, eventsFor.touch.start, this.onTouchStart, {
+        passive: false
+      });
       if (this.props.enableUserSelectHack) removeUserSelectStyles(ownerDocument);
     }
   }
@@ -7911,12 +7938,13 @@ class DraggableCore extends React__default.Component {
     // Reuse the child provided
     // This makes it flexible to use whatever element is wanted (div, ul, etc)
     return React__default.cloneElement(React__default.Children.only(this.props.children), {
-      style: styleHacks(this.props.children.props.style),
       // Note: mouseMove handler is attached to document so it will still function
       // when the user drags quickly and leaves the bounds of the element.
       onMouseDown: this.onMouseDown,
-      onTouchStart: this.onTouchStart,
       onMouseUp: this.onMouseUp,
+      // onTouchStart is added on `componentDidMount` so they can be added with
+      // {passive: false}, which allows it to cancel. See 
+      // https://developers.google.com/web/updates/2017/01/scrolling-intervention
       onTouchEnd: this.onTouchEnd
     });
   }
@@ -8096,7 +8124,9 @@ function _defineProperty$2(obj, key, value) { if (key in obj) { Object.definePro
 //
 // Define <Draggable>
 //
-class Draggable extends React__default.Component {
+class Draggable extends React__default.Component
+/*:: <DraggableProps, DraggableState>*/
+{
   // React 16.3+
   // Arity (props, state)
   static getDerivedStateFromProps({
@@ -8181,8 +8211,8 @@ class Draggable extends React__default.Component {
     _defineProperty$2(this, "onDragStop", (e, coreData) => {
       if (!this.state.dragging) return false; // Short-circuit if user's callback killed it.
 
-      const shouldStop = this.props.onStop(e, createDraggableData(this, coreData));
+      const shouldContinue = this.props.onStop(e, createDraggableData(this, coreData));
-      if (shouldStop === false) return false;
+      if (shouldContinue === false) return false;
       const newState
       /*: $Shape<DraggableState>*/
       = {
@@ -8290,7 +8320,7 @@ class Draggable extends React__default.Component {
     }); // Reuse the child provided
     // This makes it flexible to use whatever element is wanted (div, ul, etc)
 
-    return React__default.createElement(DraggableCore, _extends$1({}, draggableCoreProps, {
+    return /*#__PURE__*/React__default.createElement(DraggableCore, _extends$1({}, draggableCoreProps, {
       onStart: this.onDragStart,
       onDrag: this.onDrag,
       onStop: this.onDragStop

example/package-lock.json

@@ -10957,7 +10957,7 @@
         "d3-zoom": "^1.8.3",
         "easy-peasy": "^3.3.0",
         "fast-deep-equal": "^3.1.1",
-        "react-draggable": "^4.2.0",
+        "react-draggable": "^4.3.1",
         "resize-observer": "^1.0.0",
         "scheduler": "^0.19.1"
       }

example/src/index.css

@@ -1,5 +1,8 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto@1,400;1,700&display=swap');
+
 body {
-  font-family: sans-serif;
+  font-family: 'Roboto', sans-serif;
+  color: #111;
 }
 
 html, body {
@@ -8,4 +11,53 @@ html, body {
 
 html, body, #root {
   height: 100%;
+}
+
+#root {
+  display: flex;
+  flex-direction: column;
+}
+
+header {
+  padding: 10px;
+  border-bottom: 1px solid #eee;
+  display: flex;
+  font-weight: 700;
+}
+
+header nav {
+  font-weight: 400;
+  margin-left: auto;
+}
+
+nav a {
+  margin-left: 10px;
+  text-decoration: none;
+  font-size: 12px;
+  background: rgb(255, 96, 96);
+  color: white;
+  padding: 5px 12px;
+  border-radius: 5px;
+  position: relative;
+}
+
+nav a, nav a:focus, nav a:active {
+  color: #fff;
+}
+
+nav a:hover {
+  color: #fff;
+  box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.12);
+}
+
+nav a.active:before {
+  content: '';
+  position: absolute;
+  width: 6px;
+  height: 6px;
+  background: white;
+  opacity: 0.5;
+  left:0;
+  top:50%;
+  transform: translateY(-50%);
 }

example/src/index.js

@@ -1,37 +1,59 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
+import { BrowserRouter as Router, Route, Switch, NavLink } from 'react-router-dom';
 
-import CustomNode from './CustomNode';
 import Rich from './Rich';
 import Basic from './Basic';
-import Empty from './Empty';
+import CustomNode from './CustomNode';
-import Inactive from './Inactive';
 import Stress from './Stress';
+import Inactive from './Inactive';
+import Empty from './Empty';
 
 import './index.css';
 
+const routes = [{
+  path: '/',
+  component: Rich,
+  label: 'Rich'
+}, {
+  path: '/basic',
+  component: Basic,
+  label: 'Basic'
+},{
+  path: '/custom-node',
+  component: CustomNode,
+  label: 'CustomNode'
+}, {
+  path: '/stress',
+  component: Stress,
+  label: 'StressTest'
+}, {
+  path: '/empty',
+  component: Empty
+},{
+  path: '/inactive',
+  component: Inactive
+}];
+
+const navLinks = routes.filter(route => route.label);
+
 ReactDOM.render((
-  <Router>
+  <Router forceRefresh={true}>
+    <header>
+      <div>React Flow Examples</div>
+      <nav>
+        {navLinks.map(route => (
+          <NavLink to={route.path} key={route.label} exact>
+            {route.label}
+          </NavLink>
+        ))}
+      </nav>
+    </header>
     <Switch>
-      <Route path="/basic">
+      {routes.map(route => (
-        <Basic />
+        <Route exact path={route.path} render={() => <route.component />} key={route.path} />
-      </Route>
+      ))}
-      <Route path="/empty">
-        <Empty />
-      </Route>
-      <Route path="/inactive">
-        <Inactive />
-      </Route>
-      <Route path="/custom-node">
-        <CustomNode />
-      </Route>
-      <Route path="/stress">
-        <Stress />
-      </Route>
-      <Route path="/">
-        <Rich />
-      </Route>
     </Switch>
   </Router>
 ), document.getElementById('root'));
+

package-lock.json

@@ -2448,9 +2448,9 @@
       }
     },
     "@hapi/address": {
-      "version": "2.1.2",
+      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.2.tgz",
+      "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
-      "integrity": "sha512-O4QDrx+JoGKZc6aN64L04vqa7e41tIiLU+OvKdcYaEMP97UttL0f9GIi9/0A4WAMx0uBd6SidDIhktZhgOcN8Q==",
+      "integrity": "sha512-QD1PhQk+s31P1ixsX0H0Suoupp3VMXzIVMSwobR3F3MSUO2YCV0B7xqLcUw/Bh8yuvd3LhpyqLQWTNcRmp6IdQ==",
       "dev": true
     },
     "@hapi/formula": {
@@ -2460,9 +2460,9 @@
       "dev": true
     },
     "@hapi/hoek": {
-      "version": "8.2.4",
+      "version": "8.5.1",
-      "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-8.2.4.tgz",
+      "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-8.5.1.tgz",
-      "integrity": "sha512-Ze5SDNt325yZvNO7s5C4fXDscjJ6dcqLFXJQ/M7dZRQCewuDj2iDUuBi6jLQt+APbW9RjjVEvLr35FXuOEqjow==",
+      "integrity": "sha512-yN7kbciD87WzLGc5539Tn0sApjyiGHAJgKvG9W8C7O+6c7qmoQMfVs0W4bX17eqz6C78QJqqFrtgdK5EWf6Qow==",
       "dev": true
     },
     "@hapi/joi": {
@@ -2523,12 +2523,12 @@
       "dev": true
     },
     "@hapi/topo": {
-      "version": "3.1.4",
+      "version": "3.1.6",
-      "resolved": "https://registry.npmjs.org/@hapi/topo/-/topo-3.1.4.tgz",
+      "resolved": "https://registry.npmjs.org/@hapi/topo/-/topo-3.1.6.tgz",
-      "integrity": "sha512-aVWQTOI9wBD6zawmOr6f+tdEIxQC8JXfQVLTjgGe8YEStAWGn/GNNVTobKJhbWKveQj2RyYF3oYbO9SC8/eOCA==",
+      "integrity": "sha512-tAag0jEcjwH+P2quUfipd7liWCNX2F8NvYjQp2wtInsZxnMlypdw0FtAOLxtvvkO+GSRRbmNi8m/5y42PQJYCQ==",
       "dev": true,
       "requires": {
-        "@hapi/hoek": "8.x.x"
+        "@hapi/hoek": "^8.3.0"
       }
     },
     "@rollup/pluginutils": {
@@ -3584,9 +3584,9 @@
       "dev": true
     },
     "@welldone-software/why-did-you-render": {
-      "version": "4.0.6",
+      "version": "4.1.3",
-      "resolved": "https://registry.npmjs.org/@welldone-software/why-did-you-render/-/why-did-you-render-4.0.6.tgz",
+      "resolved": "https://registry.npmjs.org/@welldone-software/why-did-you-render/-/why-did-you-render-4.1.3.tgz",
-      "integrity": "sha512-khH11lsu0MIV0aTRaH0n/80AwbulIoaXLu0mdCDwpYNjxbKhH3ypEFgsWdQyN0a+2IMVwC290icQ1ONojw+27A==",
+      "integrity": "sha512-xUlrJfG6zyqAqJ9M3uI/Wa88EF99fgeT3tb7VhztnVxWG/k6nn1kRuddlCIZSqrvDTen52seLLvLaqw/VEbWag==",
       "requires": {
         "lodash": "^4"
       }
@@ -5749,9 +5749,9 @@
       "dev": true
     },
     "cypress": {
-      "version": "4.4.0",
+      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/cypress/-/cypress-4.4.0.tgz",
+      "resolved": "https://registry.npmjs.org/cypress/-/cypress-4.5.0.tgz",
-      "integrity": "sha512-ZpsV3pVemANGi4Cxu0UIqFv23uHdDJZYlKY+8P/eixujCpI1TQ5RSPBp2grfV3ZvlGYrOXPJY44j9iEh1xoQug==",
+      "integrity": "sha512-2A4g5FW5d2fHzq8HKUGAMVTnW6P8nlWYQALiCoGN4bqBLvgwhYM/oG9oKc2CS6LnvgHFiKivKzpm9sfk3uU3zQ==",
       "dev": true,
       "requires": {
         "@cypress/listr-verbose-renderer": "0.4.1",
@@ -6249,9 +6249,9 @@
       },
       "dependencies": {
         "cross-spawn": {
-          "version": "7.0.1",
+          "version": "7.0.2",
-          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.1.tgz",
+          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.2.tgz",
-          "integrity": "sha512-u7v4o84SwFpD32Z8IIcPZ6z1/ie24O6RU3RbtL5Y316l3KuHVPx9ItBgWQ6VlfAFnRnTtMUrsQ9MUUTuEZjogg==",
+          "integrity": "sha512-PD6G8QG3S4FK/XCGFbEQrDqO2AnMMsy0meR7lerlIOHAAbkuavGU/pOqprrlvfTNjvowivTeBsjebAL0NSoMxw==",
           "dev": true,
           "requires": {
             "path-key": "^3.1.0",
@@ -6731,9 +6731,9 @@
       "dev": true
     },
     "fsevents": {
-      "version": "2.1.2",
+      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.1.2.tgz",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.1.3.tgz",
-      "integrity": "sha512-R4wDiBwZ0KzpgOWetKDug1FZcYhqYnUYKtfZYt4mD5SBz76q0KR4Q9o7GIPamsVPGmW3EYPPJ0dOOjvx32ldZA==",
+      "integrity": "sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==",
       "dev": true,
       "optional": true
     },
@@ -6984,14 +6984,14 @@
       "dev": true
     },
     "husky": {
-      "version": "4.2.3",
+      "version": "4.2.5",
-      "resolved": "https://registry.npmjs.org/husky/-/husky-4.2.3.tgz",
+      "resolved": "https://registry.npmjs.org/husky/-/husky-4.2.5.tgz",
-      "integrity": "sha512-VxTsSTRwYveKXN4SaH1/FefRJYCtx+wx04sSVcOpD7N2zjoHxa+cEJ07Qg5NmV3HAK+IRKOyNVpi2YBIVccIfQ==",
+      "integrity": "sha512-SYZ95AjKcX7goYVZtVZF2i6XiZcHknw50iXvY7b0MiGoj5RwdgRQNEHdb+gPDPCXKlzwrybjFjkL6FOj8uRhZQ==",
       "dev": true,
       "requires": {
-        "chalk": "^3.0.0",
+        "chalk": "^4.0.0",
         "ci-info": "^2.0.0",
-        "compare-versions": "^3.5.1",
+        "compare-versions": "^3.6.0",
         "cosmiconfig": "^6.0.0",
         "find-versions": "^3.2.0",
         "opencollective-postinstall": "^2.0.2",
@@ -7012,9 +7012,9 @@
           }
         },
         "chalk": {
-          "version": "3.0.0",
+          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.0.0.tgz",
-          "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
+          "integrity": "sha512-N9oWFcegS0sFr9oh1oz2d7Npos6vNoWW9HvtCg5N1KRFpUhaAhvTv5Y58g880fZaEYSNm3qDz8SU1UrGvp+n7A==",
           "dev": true,
           "requires": {
             "ansi-styles": "^4.1.0",
@@ -7407,9 +7407,9 @@
       }
     },
     "is-promise": {
-      "version": "2.1.0",
+      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.2.2.tgz",
-      "integrity": "sha1-eaKp7OfwlugPNtKy87wWwf9L8/o=",
+      "integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==",
       "dev": true
     },
     "is-reference": {
@@ -7471,10 +7471,13 @@
       "dev": true
     },
     "is-wsl": {
-      "version": "2.1.1",
+      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
-      "integrity": "sha512-umZHcSrwlDHo2TGMXv0DZ8dIUGunZ2Iv68YZnrmCiBPkZ4aaOhtv7pXJKeki9k3qJ3RJr0cDyitcl5wEH3AYog==",
+      "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
-      "dev": true
+      "dev": true,
+      "requires": {
+        "is-docker": "^2.0.0"
+      }
     },
     "isarray": {
       "version": "1.0.0",
@@ -8171,9 +8174,9 @@
       "optional": true
     },
     "nanoid": {
-      "version": "3.0.2",
+      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.3.tgz",
-      "integrity": "sha512-WOjyy/xu3199NlQiQWlx7VbspSFlGtOxa1bRX9ebmXOnp1fje4bJfjPs1wLQ8jZbJUfD+yceJmw879ZSaVJkdQ==",
+      "integrity": "sha512-Zw8rTOUfh6FlKgkEbHiB1buOF2zOPOQyGirABUWn+9Z7m9PpyoLVkh6Ksc53vBjndINQ2+9LfRPaHxb/u45EGg==",
       "dev": true
     },
     "nanomatch": {
@@ -9354,9 +9357,9 @@
       "dev": true
     },
     "prettier": {
-      "version": "2.0.2",
+      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.0.5.tgz",
-      "integrity": "sha512-5xJQIPT8BraI7ZnaDwSbu5zLrB6vvi8hVV58yHQ+QK64qrY40dULy0HSRlQ2/2IdzeBpjhDkqdcFBnFeDEMVdg==",
+      "integrity": "sha512-7PtVymN48hGcO4fGjybyBSIWDsLU4H4XlvOHfq91pz9kkGlonzwTfYkaIEwiRg/dAJF9YlbsduBAgtYLi+8cFg==",
       "dev": true
     },
     "pretty-bytes": {
@@ -9459,9 +9462,9 @@
       "dev": true
     },
     "react": {
-      "version": "16.12.0",
+      "version": "16.13.1",
-      "resolved": "https://registry.npmjs.org/react/-/react-16.12.0.tgz",
+      "resolved": "https://registry.npmjs.org/react/-/react-16.13.1.tgz",
-      "integrity": "sha512-fglqy3k5E+81pA8s+7K0/T3DBCF0ZDOher1elBFzF7O6arXJgzyu/FW+COxFvAWXJoJN9KIZbT2LXlukwphYTA==",
+      "integrity": "sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==",
       "dev": true,
       "requires": {
         "loose-envify": "^1.1.0",
@@ -9768,9 +9771,9 @@
       }
     },
     "rollup": {
-      "version": "2.3.2",
+      "version": "2.7.6",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.3.2.tgz",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.7.6.tgz",
-      "integrity": "sha512-p66+fbfaUUOGE84sHXAOgfeaYQMslgAazoQMp//nlR519R61213EPFgrMZa48j31jNacJwexSAR1Q8V/BwGKBA==",
+      "integrity": "sha512-AdHosxHBKyBsdtbT1/AqbWNQ87O4SSxS4N9iMwEpoCDAT6e4Du3uJSy83mp3ckgmCxly5VeXGx0WHsm21Djytg==",
       "dev": true,
       "requires": {
         "fsevents": "~2.1.2"
@@ -9902,9 +9905,9 @@
       "dev": true
     },
     "rollup-plugin-postcss": {
-      "version": "2.8.2",
+      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/rollup-plugin-postcss/-/rollup-plugin-postcss-2.8.2.tgz",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-postcss/-/rollup-plugin-postcss-3.1.1.tgz",
-      "integrity": "sha512-IZkOIlzWJLmMUS6EDbjUYZEwdhukdcM+39rmXKVl/WQ2rnMpQxF3ByDUzq9zYok6weT7rteuzVkV5nWjnrZrtw==",
+      "integrity": "sha512-4/FO5/2O5kv2uWRd7PPTN4mBCWoHwwFTnpEGokfPKfj6kygvTORqkBWNgVPXi7bBefNKtMA3FqQ10se6/J8kKw==",
       "dev": true,
       "requires": {
         "chalk": "^4.0.0",
@@ -9971,9 +9974,9 @@
           "dev": true
         },
         "resolve": {
-          "version": "1.16.1",
+          "version": "1.17.0",
-          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.16.1.tgz",
+          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.17.0.tgz",
-          "integrity": "sha512-rmAglCSqWWMrrBv/XM6sW0NuRFiKViw/W4d9EbC4pt+49H8JwHy+mcGmALTEg504AUDcLTvb1T2q3E9AnmY+ig==",
+          "integrity": "sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w==",
           "dev": true,
           "requires": {
             "path-parse": "^1.0.6"
@@ -10137,9 +10140,9 @@
       }
     },
     "rollup-plugin-visualizer": {
-      "version": "4.0.2",
+      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/rollup-plugin-visualizer/-/rollup-plugin-visualizer-4.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-visualizer/-/rollup-plugin-visualizer-4.0.4.tgz",
-      "integrity": "sha512-thacJQwxsnOqp18yFbXFQnnbQDiYH66L/THIvTaZxasqPavB4Vh45xoEwGtoyxsHj1FR22swhwaL+4bZH5FdoQ==",
+      "integrity": "sha512-odkyLiVxCEXh4AWFSl75+pbIapzhEZkOVww8pKUgraOHicSH67MYMnAOHWQVK/BYeD1cCiF/0kk8/XNX2+LM9A==",
       "dev": true,
       "requires": {
         "nanoid": "^3.0.1",
@@ -10577,9 +10580,9 @@
       "integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w=="
     },
     "start-server-and-test": {
-      "version": "1.10.11",
+      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/start-server-and-test/-/start-server-and-test-1.10.11.tgz",
+      "resolved": "https://registry.npmjs.org/start-server-and-test/-/start-server-and-test-1.11.0.tgz",
-      "integrity": "sha512-CZilaj293uQWdD4vgOxTOuzlCWxOyBm6bzmH1r6OGLG/q5zcBmGYevLfOimkg0kSn9jLHwYSXLuoKG/DDQJhww==",
+      "integrity": "sha512-FhkJFYL/lvbd0tKWvbxWNWjtFtq3Zpa09QDjA8EUH88AsgNL4hkAAKYNmbac+fFM8/GIZoJ1Mj4mm3SMI0X1bA==",
       "dev": true,
       "requires": {
         "bluebird": "3.7.2",
@@ -10604,27 +10607,12 @@
             "@hapi/topo": "^3.1.3"
           }
         },
-        "bluebird": {
-          "version": "3.7.2",
-          "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
-          "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
-          "dev": true
-        },
         "lodash": {
           "version": "4.17.15",
           "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
           "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==",
           "dev": true
         },
-        "rxjs": {
-          "version": "6.5.4",
-          "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.5.4.tgz",
-          "integrity": "sha512-naMQXcgEo3csAEGvw/NydRA0fuS2nDZJiw1YUWFKU7aPPAPGZEsD4Iimit96qwCieH6y614MCLYwdkrWx7z/7Q==",
-          "dev": true,
-          "requires": {
-            "tslib": "^1.9.0"
-          }
-        },
         "wait-on": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/wait-on/-/wait-on-4.0.0.tgz",
@@ -11162,17 +11150,17 @@
       }
     },
     "wait-on": {
-      "version": "4.0.1",
+      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/wait-on/-/wait-on-4.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/wait-on/-/wait-on-4.0.2.tgz",
-      "integrity": "sha512-x83fmTH2X0KL7vXoGt9aV5x4SMCvO8A/NbwWpaYYh4NJ16d3KSgbHwBy9dVdHj0B30cEhOFRvDob4fnpUmZxvA==",
+      "integrity": "sha512-Qpmgm3Hw/sXm7xK68FBsYy5r+Uid94/QymwnEjn9GTpfiWTUVYm0bccivVwY/BXGYO2r+5Cd8S/DzrRZqHK/9w==",
       "dev": true,
       "requires": {
-        "@hapi/joi": "^17.1.0",
+        "@hapi/joi": "^17.1.1",
         "lodash": "^4.17.15",
-        "minimist": "^1.2.0",
+        "minimist": "^1.2.5",
-        "request": "^2.88.0",
+        "request": "^2.88.2",
         "request-promise-native": "^1.0.8",
-        "rxjs": "^6.5.4"
+        "rxjs": "^6.5.5"
       },
       "dependencies": {
         "lodash": {
@@ -11181,13 +11169,38 @@
           "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==",
           "dev": true
         },
-        "rxjs": {
+        "minimist": {
-          "version": "6.5.4",
+          "version": "1.2.5",
-          "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.5.4.tgz",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-          "integrity": "sha512-naMQXcgEo3csAEGvw/NydRA0fuS2nDZJiw1YUWFKU7aPPAPGZEsD4Iimit96qwCieH6y614MCLYwdkrWx7z/7Q==",
+          "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
+          "dev": true
+        },
+        "request": {
+          "version": "2.88.2",
+          "resolved": "https://registry.npmjs.org/request/-/request-2.88.2.tgz",
+          "integrity": "sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==",
           "dev": true,
           "requires": {
-            "tslib": "^1.9.0"
+            "aws-sign2": "~0.7.0",
+            "aws4": "^1.8.0",
+            "caseless": "~0.12.0",
+            "combined-stream": "~1.0.6",
+            "extend": "~3.0.2",
+            "forever-agent": "~0.6.1",
+            "form-data": "~2.3.2",
+            "har-validator": "~5.1.3",
+            "http-signature": "~1.2.0",
+            "is-typedarray": "~1.0.0",
+            "isstream": "~0.1.2",
+            "json-stringify-safe": "~5.0.1",
+            "mime-types": "~2.1.19",
+            "oauth-sign": "~0.9.0",
+            "performance-now": "^2.1.0",
+            "qs": "~6.5.2",
+            "safe-buffer": "^5.1.2",
+            "tough-cookie": "~2.5.0",
+            "tunnel-agent": "^0.6.0",
+            "uuid": "^3.3.2"
           }
         }
       }
@@ -11333,9 +11346,9 @@
       }
     },
     "yargs-parser": {
-      "version": "18.1.2",
+      "version": "18.1.3",
-      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.2.tgz",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
-      "integrity": "sha512-hlIPNR3IzC1YuL1c2UwwDKpXlNFBqD1Fswwh1khz5+d8Cq/8yc/Mn0i+rQXduu8hcrFKvO7Eryk+09NecTQAAQ==",
+      "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
       "dev": true,
       "requires": {
         "camelcase": "^5.0.0",

package.json

@@ -3,10 +3,9 @@
   "version": "1.0.1",
   "main": "dist/ReactFlow.js",
   "module": "dist/ReactFlow.esm.js",
-  "private": true,
   "dependencies": {
     "@svgr/rollup": "^5.3.0",
-    "@welldone-software/why-did-you-render": "^4.0.6",
+    "@welldone-software/why-did-you-render": "^4.1.3",
     "classnames": "^2.2.6",
     "d3-selection": "^1.4.1",
     "d3-zoom": "^1.8.3",
@@ -27,29 +26,29 @@
     "autoprefixer": "^9.7.6",
     "babel-loader": "^8.1.0",
     "babel-preset-react-app": "^9.1.2",
-    "cypress": "^4.4.0",
+    "cypress": "^4.5.0",
-    "husky": "^4.2.3",
+    "husky": "^4.2.5",
     "postcss-nested": "^4.2.1",
-    "prettier": "2.0.2",
+    "prettier": "2.0.5",
     "prop-types": "^15.7.2",
-    "react": "^16.12.0",
+    "react": "^16.13.1",
-    "rollup": "^2.3.2",
+    "rollup": "^2.7.6",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-bundle-size": "^1.0.3",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-livereload": "^1.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-peer-deps-external": "^2.2.2",
-    "rollup-plugin-postcss": "^2.8.2",
+    "rollup-plugin-postcss": "^3.1.1",
     "rollup-plugin-replace": "^2.2.0",
     "rollup-plugin-serve": "^1.0.1",
     "rollup-plugin-terser": "^5.3.0",
     "rollup-plugin-typescript2": "^0.27.0",
     "rollup-plugin-uglify": "^6.0.4",
-    "rollup-plugin-visualizer": "^4.0.2",
+    "rollup-plugin-visualizer": "^4.0.4",
-    "start-server-and-test": "^1.10.11",
+    "start-server-and-test": "^1.11.0",
     "typescript": "^3.8.3",
-    "wait-on": "^4.0.1"
+    "wait-on": "^4.0.2"
   },
   "peerDependencies": {
     "react": "^16.13.1"