react-grid-layout 0.16.2 → 0.16.6

package/.flowconfig

@@ -1,5 +1,5 @@
 [version]
-0.61.0
+0.65.0
 
 [ignore]
 

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # Changelog
 
+0.16.6 (Mar 8, 2018)
+----
+
+- Fixed collision issue where items below could rearrange on a move.
+  - The root cause was "teleportation", or practically the same bug that leads to Pac-Man going through
+    ghosts now and then. If a large element moves up by a few grid units, the space it vacates can suddenly
+    become occupiable by an element below it. Rather than the collision happening properly, they exchange spaces
+    atomically. The fix is to move items down one grid unit at a time to ensure
+    this rearrangement does not happen.
+  - Thanks @torkelo for your hard work on this for Grafana 5, which I very unfortunately managed to break
+    when refactoring for 0.16.1.
+  - Ref: #650, #739
+- Added a "Toolbox" demo (thanks @jhob)
+
+0.16.5 (Feb 26, 2018)
+----
+
+- Minor fix to `isUserAction` on certain types of compaction cascades (#714, #720, #729)
+
+0.16.4 (Feb 15, 2018)
+----
+
+- Skip null items in processGridItem (#578)
+- Resize is broken for grids with preventCollision: true, fixes #655 (#656)
+- Minor refactoring
+
+0.16.3 (Jan 31, 2018)
+----
+
+- Fix overriding of `onStart` behaviour (#707, thanks @ersel)
+- Fixed Flow type of WidthProvider
+- Devdep updates
+
 0.16.2 (Dec 17, 2017)
 ----
 

package/README.md

@@ -1,6 +1,7 @@
 # React-Grid-Layout
 
 [![travis build](https://travis-ci.org/STRML/react-grid-layout.svg?branch=master)](https://travis-ci.org/STRML/react-grid-layout)
+[![CDNJS](https://img.shields.io/cdnjs/v/react-grid-layout.svg)](https://cdnjs.com/libraries/react-grid-layout)
 [![npm package](https://img.shields.io/npm/v/react-grid-layout.svg?style=flat-square)](https://www.npmjs.org/package/react-grid-layout)
 [![npm downloads](https://img.shields.io/npm/dt/react-grid-layout.svg?maxAge=2592000)]()
 
@@ -46,16 +47,18 @@ RGL is React-only and does not require jQuery.
 1. [Dynamic Minimum and Maximum Width/Height](https://strml.github.io/react-grid-layout/examples/10-dynamic-min-max-wh.html)
 1. [No Vertical Compacting (Free Movement)](https://strml.github.io/react-grid-layout/examples/11-no-vertical-compact.html)
 
-#### Projects based on React-Grid-Layout
+#### Projects Using React-Grid-Layout
 
 - [BitMEX](https://www.bitmex.com/)
 - [AWS CloudFront Dashboards](https://aws.amazon.com/blogs/aws/cloudwatch-dashboards-create-use-customized-metrics-views/)
+- [Grafana](https://grafana.com/)
 - [Metabase](http://www.metabase.com/)
 - [HubSpot](http://www.hubspot.com)
 - [ComNetViz](http://www.grotto-networking.com/ComNetViz/ComNetViz.html)
 - [Stoplight](https://app.stoplight.io)
 - [Reflect](https://reflect.io)
 - [ez-Dashing](https://github.com/ylacaute/ez-Dashing)
+- [Kibana](https://www.elastic.co/products/kibana)
 
 *Know of others? Create a PR to let me know!*
 

package/build/GridItem.js

@@ -331,7 +331,7 @@ var GridItem = function (_React$Component) {
           x = _calcXY.x,
           y = _calcXY.y;
 
-      handler.call(_this2, _this2.props.i, x, y, { e: e, node: node, newPosition: newPosition });
+      return handler.call(_this2, _this2.props.i, x, y, { e: e, node: node, newPosition: newPosition });
     };
   };
 

package/build/GridItem.js.flow

@@ -415,7 +415,7 @@ export default class GridItem extends React.Component<Props, State> {
 
       const { x, y } = this.calcXY(newPosition.top, newPosition.left);
 
-      handler.call(this, this.props.i, x, y, { e, node, newPosition });
+      return handler.call(this, this.props.i, x, y, { e, node, newPosition });
     };
   }
 

package/build/ReactGridLayout.js

@@ -126,7 +126,7 @@ var ReactGridLayout = function (_React$Component) {
       oldLayout: this.state.layout
     });
 
-    this.props.onDragStart(layout, l, l, null, e, node);
+    return this.props.onDragStart(layout, l, l, null, e, node);
   };
 
   /**
@@ -249,19 +249,40 @@ var ReactGridLayout = function (_React$Component) {
     var l = (0, _utils.getLayoutItem)(layout, i);
     if (!l) return;
 
-    // Short circuit if there is a collision in no rearrangement mode.
-    if (preventCollision && (0, _utils.getFirstCollision)(layout, _extends({}, l, { w: w, h: h }))) {
-      return;
+    // Something like quad tree should be used
+    // to find collisions faster
+    var hasCollisions = void 0;
+    if (preventCollision) {
+      var collisions = (0, _utils.getAllCollisions)(layout, _extends({}, l, { w: w, h: h })).filter(function (layoutItem) {
+        return layoutItem.i !== l.i;
+      });
+      hasCollisions = collisions.length > 0;
+
+      // If we're colliding, we need adjust the placeholder.
+      if (hasCollisions) {
+        // adjust w && h to maximum allowed space
+        var leastX = Infinity,
+            leastY = Infinity;
+        collisions.forEach(function (layoutItem) {
+          if (layoutItem.x > l.x) leastX = Math.min(leastX, layoutItem.x);
+          if (layoutItem.y > l.y) leastY = Math.min(leastY, layoutItem.y);
+        });
+
+        if (Number.isFinite(leastX)) l.w = leastX - l.x;
+        if (Number.isFinite(leastY)) l.h = leastY - l.y;
+      }
     }
 
-    // Set new width and height.
-    l.w = w;
-    l.h = h;
+    if (!hasCollisions) {
+      // Set new width and height.
+      l.w = w;
+      l.h = h;
+    }
 
     // Create placeholder element (display only)
     var placeholder = {
-      w: w,
-      h: h,
+      w: l.w,
+      h: l.h,
       x: l.x,
       y: l.y,
       static: true,
@@ -355,7 +376,7 @@ var ReactGridLayout = function (_React$Component) {
 
 
   ReactGridLayout.prototype.processGridItem = function processGridItem(child) {
-    if (!child.key) return;
+    if (!child || !child.key) return;
     var l = (0, _utils.getLayoutItem)(this.state.layout, String(child.key));
     if (!l) return null;
     var _props4 = this.props,

package/build/ReactGridLayout.js.flow

@@ -13,7 +13,7 @@ import {
   moveElement,
   synchronizeLayoutWithChildren,
   validateLayout,
-  getFirstCollision,
+  getAllCollisions,
   noop
 } from "./utils";
 import GridItem from "./GridItem";
@@ -331,7 +331,7 @@ export default class ReactGridLayout extends React.Component<Props, State> {
       oldLayout: this.state.layout
     });
 
-    this.props.onDragStart(layout, l, l, null, e, node);
+    return this.props.onDragStart(layout, l, l, null, e, node);
   }
 
   /**
@@ -446,22 +446,43 @@ export default class ReactGridLayout extends React.Component<Props, State> {
   onResize(i: string, w: number, h: number, { e, node }: GridResizeEvent) {
     const { layout, oldResizeItem } = this.state;
     const { cols, preventCollision } = this.props;
-    var l = getLayoutItem(layout, i);
+    const l: ?LayoutItem = getLayoutItem(layout, i);
     if (!l) return;
 
-    // Short circuit if there is a collision in no rearrangement mode.
-    if (preventCollision && getFirstCollision(layout, { ...l, w, h })) {
-      return;
+    // Something like quad tree should be used
+    // to find collisions faster
+    let hasCollisions;
+    if (preventCollision) {
+      const collisions = getAllCollisions(layout, { ...l, w, h }).filter(
+        layoutItem => layoutItem.i !== l.i
+      );
+      hasCollisions = collisions.length > 0;
+
+      // If we're colliding, we need adjust the placeholder.
+      if (hasCollisions) {
+        // adjust w && h to maximum allowed space
+        let leastX = Infinity,
+          leastY = Infinity;
+        collisions.forEach(layoutItem => {
+          if (layoutItem.x > l.x) leastX = Math.min(leastX, layoutItem.x);
+          if (layoutItem.y > l.y) leastY = Math.min(leastY, layoutItem.y);
+        });
+
+        if (Number.isFinite(leastX)) l.w = leastX - l.x;
+        if (Number.isFinite(leastY)) l.h = leastY - l.y;
+      }
     }
 
-    // Set new width and height.
-    l.w = w;
-    l.h = h;
+    if (!hasCollisions) {
+      // Set new width and height.
+      l.w = w;
+      l.h = h;
+    }
 
     // Create placeholder element (display only)
     var placeholder = {
-      w: w,
-      h: h,
+      w: l.w,
+      h: l.h,
       x: l.x,
       y: l.y,
       static: true,
@@ -544,7 +565,7 @@ export default class ReactGridLayout extends React.Component<Props, State> {
    * @return {Element}       Element wrapped in draggable and properly placed.
    */
   processGridItem(child: ReactElement<any>): ?ReactElement<any> {
-    if (!child.key) return;
+    if (!child || !child.key) return;
     const l = getLayoutItem(this.state.layout, String(child.key));
     if (!l) return null;
     const {

package/build/components/WidthProvider.js

@@ -4,6 +4,8 @@ exports.__esModule = true;
 
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
+exports.default = WidthProvider;
+
 var _react = require("react");
 
 var _react2 = _interopRequireDefault(_react);
@@ -18,6 +20,8 @@ var _reactDom2 = _interopRequireDefault(_reactDom);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
@@ -27,7 +31,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
 /*
  * A simple HOC that provides facility for listening to container resizes.
  */
-var WidthProvider = function WidthProvider(ComposedComponent) {
+function WidthProvider(ComposedComponent) {
   var _class, _temp2;
 
   return _temp2 = _class = function (_React$Component) {
@@ -68,11 +72,15 @@ var WidthProvider = function WidthProvider(ComposedComponent) {
     };
 
     WidthProvider.prototype.render = function render() {
-      if (this.props.measureBeforeMount && !this.mounted) {
+      var _props = this.props,
+          measureBeforeMount = _props.measureBeforeMount,
+          rest = _objectWithoutProperties(_props, ["measureBeforeMount"]);
+
+      if (measureBeforeMount && !this.mounted) {
         return _react2.default.createElement("div", { className: this.props.className, style: this.props.style });
       }
 
-      return _react2.default.createElement(ComposedComponent, _extends({}, this.props, this.state));
+      return _react2.default.createElement(ComposedComponent, _extends({}, rest, this.state));
     };
 
     return WidthProvider;
@@ -83,6 +91,4 @@ var WidthProvider = function WidthProvider(ComposedComponent) {
     // rendering, to prevent any unsightly resizing.
     measureBeforeMount: _propTypes2.default.bool
   }, _temp2;
-};
-
-exports.default = WidthProvider;
+}

package/build/components/WidthProvider.js.flow

@@ -4,24 +4,26 @@ import PropTypes from "prop-types";
 import ReactDOM from "react-dom";
 import type { ComponentType as ReactComponentType } from "react";
 
-type Props = {
+type WPProps = {
   className?: string,
   measureBeforeMount: boolean,
   style?: Object
 };
 
-type State = {
+type WPState = {
   width: number
 };
 
 /*
  * A simple HOC that provides facility for listening to container resizes.
  */
-type ProviderT = (
-  ComposedComponent: ReactComponentType<any>
-) => ReactComponentType<any>;
-const WidthProvider: ProviderT = ComposedComponent =>
-  class WidthProvider extends React.Component<Props, State> {
+export default function WidthProvider<
+  Props,
+  ComposedProps: { ...Props, ...WPProps }
+>(
+  ComposedComponent: ReactComponentType<Props>
+): ReactComponentType<ComposedProps> {
+  return class WidthProvider extends React.Component<ComposedProps, WPState> {
     static defaultProps = {
       measureBeforeMount: false
     };
@@ -32,7 +34,7 @@ const WidthProvider: ProviderT = ComposedComponent =>
       measureBeforeMount: PropTypes.bool
     };
 
-    state: State = {
+    state = {
       width: 1280
     };
 
@@ -62,14 +64,14 @@ const WidthProvider: ProviderT = ComposedComponent =>
     };
 
     render() {
-      if (this.props.measureBeforeMount && !this.mounted) {
+      const { measureBeforeMount, ...rest } = this.props;
+      if (measureBeforeMount && !this.mounted) {
         return (
           <div className={this.props.className} style={this.props.style} />
         );
       }
 
-      return <ComposedComponent {...this.props} {...this.state} />;
+      return <ComposedComponent {...rest} {...this.state} />;
     }
   };
-
-export default WidthProvider;
+}

package/build/utils.js

@@ -162,10 +162,13 @@ function resolveCompactionCollision(layout, item, moveToCoord, axis) {
   // Go through each item we collide with.
   for (var _i4 = itemIndex + 1; _i4 < layout.length; _i4++) {
     var otherItem = layout[_i4];
-
     // Ignore static items
     if (otherItem.static) continue;
 
+    // Optimization: we can break early if we know we're past this el
+    // We can do this b/c it's a sorted layout
+    if (otherItem.y > item.y + item.h) break;
+
     if (collides(item, otherItem)) {
       resolveCompactionCollision(layout, otherItem, moveToCoord + item[sizeProp], axis);
     }
@@ -296,17 +299,17 @@ function getStatics(layout) {
  */
 function moveElement(layout, l, x, y, isUserAction, preventCollision, compactType, cols) {
   if (l.static) return layout;
-  log("Moving element " + l.i + " to [" + x + "," + y + "] from [" + l.x + "," + l.y + "]");
 
   // Short-circuit if nothing to do.
   if (l.y === y && l.x === x) return layout;
 
+  log("Moving element " + l.i + " to [" + String(x) + "," + String(y) + "] from [" + l.x + "," + l.y + "]");
   var oldX = l.x;
   var oldY = l.y;
 
   // This is quite a bit faster than extending the object
-  l.x = x;
-  l.y = y;
+  if (typeof x === 'number') l.x = x;
+  if (typeof y === 'number') l.y = y;
   l.moved = true;
 
   // If this collides with anything, move it.
@@ -314,7 +317,7 @@ function moveElement(layout, l, x, y, isUserAction, preventCollision, compactTyp
   // to ensure, in the case of multiple collisions, that we're getting the
   // nearest collision.
   var sorted = sortLayoutItems(layout, compactType);
-  var movingUp = compactType === "vertical" ? oldY >= y : compactType === "horizontal" ? oldX >= x : false;
+  var movingUp = compactType === "vertical" && typeof y === 'number' ? oldY >= y : compactType === "horizontal" && typeof x === 'number' ? oldX >= x : false;
   if (movingUp) sorted = sorted.reverse();
   var collisions = getAllCollisions(sorted, l);
 
@@ -363,33 +366,26 @@ function moveElementAwayFromCollision(layout, collidesWith, itemToMove, isUserAc
   // We only do this on the main collision as this can get funky in cascades and cause
   // unwanted swapping behavior.
   if (isUserAction) {
+    // Reset isUserAction flag because we're not in the main collision anymore.
+    isUserAction = false;
+
     // Make a mock item so we don't modify the item here, only modify in moveElement.
     var fakeItem = {
       x: compactH ? Math.max(collidesWith.x - itemToMove.w, 0) : itemToMove.x,
-      y: !compactH ? Math.max(collidesWith.y - itemToMove.h, 0) : itemToMove.y,
+      y: compactV ? Math.max(collidesWith.y - itemToMove.h, 0) : itemToMove.y,
       w: itemToMove.w,
       h: itemToMove.h,
       i: "-1"
     };
 
-    // This makes it feel a bit more precise by waiting to swap for just a bit when moving up.
-
-    var _ref = compactType === "horizontal" ? ["x", "w"] : ["y", "h"],
-        axis = _ref[0],
-        dimension = _ref[1];
-
-    var shouldSkip = false &&
-    // Our collision is below the item to move, and only encroaches by 25% of its dimension; ignore
-    collidesWith[axis] > itemToMove[axis] && collidesWith[axis] - itemToMove[axis] > itemToMove[dimension] / 4;
-
     // No collision? If so, we can go up there; otherwise, we'll end up moving down as normal
-    if (!shouldSkip && !getFirstCollision(layout, fakeItem)) {
+    if (!getFirstCollision(layout, fakeItem)) {
       log("Doing reverse collision on " + itemToMove.i + " up to [" + fakeItem.x + "," + fakeItem.y + "].");
-      return moveElement(layout, itemToMove, fakeItem.x, fakeItem.y, isUserAction, preventCollision, compactType, cols);
+      return moveElement(layout, itemToMove, compactH ? fakeItem.x : undefined, compactV ? fakeItem.y : undefined, isUserAction, preventCollision, compactType, cols);
     }
   }
 
-  return moveElement(layout, itemToMove, compactH ? collidesWith.x + collidesWith.w : itemToMove.x, compactV ? collidesWith.y + collidesWith.h : itemToMove.y, isUserAction, preventCollision, compactType, cols);
+  return moveElement(layout, itemToMove, compactH ? itemToMove.x + 1 : undefined, compactV ? itemToMove.y + 1 : undefined, isUserAction, preventCollision, compactType, cols);
 }
 
 /**
@@ -402,11 +398,11 @@ function perc(num) {
   return num * 100 + "%";
 }
 
-function setTransform(_ref2) {
-  var top = _ref2.top,
-      left = _ref2.left,
-      width = _ref2.width,
-      height = _ref2.height;
+function setTransform(_ref) {
+  var top = _ref.top,
+      left = _ref.left,
+      width = _ref.width,
+      height = _ref.height;
 
   // Replace unitless items with px
   var translate = "translate(" + left + "px," + top + "px)";
@@ -422,11 +418,11 @@ function setTransform(_ref2) {
   };
 }
 
-function setTopLeft(_ref3) {
-  var top = _ref3.top,
-      left = _ref3.left,
-      width = _ref3.width,
-      height = _ref3.height;
+function setTopLeft(_ref2) {
+  var top = _ref2.top,
+      left = _ref2.left,
+      width = _ref2.width,
+      height = _ref2.height;
 
   return {
     top: top + "px",

package/build/utils.js.flow

@@ -190,10 +190,13 @@ function resolveCompactionCollision(
   // Go through each item we collide with.
   for (let i = itemIndex + 1; i < layout.length; i++) {
     const otherItem = layout[i];
-
     // Ignore static items
     if (otherItem.static) continue;
 
+    // Optimization: we can break early if we know we're past this el
+    // We can do this b/c it's a sorted layout
+    if (otherItem.y > (item.y + item.h)) break;
+
     if (collides(item, otherItem)) {
       resolveCompactionCollision(
         layout,
@@ -342,25 +345,25 @@ export function getStatics(layout: Layout): Array<LayoutItem> {
 export function moveElement(
   layout: Layout,
   l: LayoutItem,
-  x: number,
-  y: number,
+  x: ?number,
+  y: ?number,
   isUserAction: ?boolean,
   preventCollision: ?boolean,
   compactType: CompactType,
-  cols: number
+  cols: number,
 ): Layout {
   if (l.static) return layout;
-  log(`Moving element ${l.i} to [${x},${y}] from [${l.x},${l.y}]`);
 
   // Short-circuit if nothing to do.
   if (l.y === y && l.x === x) return layout;
 
+  log(`Moving element ${l.i} to [${String(x)},${String(y)}] from [${l.x},${l.y}]`);
   const oldX = l.x;
   const oldY = l.y;
 
   // This is quite a bit faster than extending the object
-  l.x = x;
-  l.y = y;
+  if (typeof x === 'number') l.x = x;
+  if (typeof y === 'number') l.y = y;
   l.moved = true;
 
   // If this collides with anything, move it.
@@ -369,9 +372,9 @@ export function moveElement(
   // nearest collision.
   let sorted = sortLayoutItems(layout, compactType);
   const movingUp =
-    compactType === "vertical"
-      ? oldY >= y
-      : compactType === "horizontal" ? oldX >= x : false;
+    compactType === "vertical" && typeof y === 'number' ? oldY >= y
+    : compactType === "horizontal" && typeof x === 'number' ? oldX >= x
+    : false;
   if (movingUp) sorted = sorted.reverse();
   const collisions = getAllCollisions(sorted, l);
 
@@ -445,26 +448,20 @@ export function moveElementAwayFromCollision(
   // We only do this on the main collision as this can get funky in cascades and cause
   // unwanted swapping behavior.
   if (isUserAction) {
+    // Reset isUserAction flag because we're not in the main collision anymore.
+    isUserAction = false;
+
     // Make a mock item so we don't modify the item here, only modify in moveElement.
     const fakeItem: LayoutItem = {
       x: compactH ? Math.max(collidesWith.x - itemToMove.w, 0) : itemToMove.x,
-      y: !compactH ? Math.max(collidesWith.y - itemToMove.h, 0) : itemToMove.y,
+      y: compactV ? Math.max(collidesWith.y - itemToMove.h, 0) : itemToMove.y,
       w: itemToMove.w,
       h: itemToMove.h,
       i: "-1"
     };
 
-    // This makes it feel a bit more precise by waiting to swap for just a bit when moving up.
-    const [axis, dimension] =
-      compactType === "horizontal" ? ["x", "w"] : ["y", "h"];
-    const shouldSkip =
-      false &&
-      // Our collision is below the item to move, and only encroaches by 25% of its dimension; ignore
-      (collidesWith[axis] > itemToMove[axis] &&
-        collidesWith[axis] - itemToMove[axis] > itemToMove[dimension] / 4);
-
     // No collision? If so, we can go up there; otherwise, we'll end up moving down as normal
-    if (!shouldSkip && !getFirstCollision(layout, fakeItem)) {
+    if (!getFirstCollision(layout, fakeItem)) {
       log(
         `Doing reverse collision on ${itemToMove.i} up to [${fakeItem.x},${
           fakeItem.y
@@ -473,8 +470,8 @@ export function moveElementAwayFromCollision(
       return moveElement(
         layout,
         itemToMove,
-        fakeItem.x,
-        fakeItem.y,
+        compactH ? fakeItem.x : undefined,
+        compactV ? fakeItem.y : undefined,
         isUserAction,
         preventCollision,
         compactType,
@@ -486,8 +483,8 @@ export function moveElementAwayFromCollision(
   return moveElement(
     layout,
     itemToMove,
-    compactH ? collidesWith.x + collidesWith.w : itemToMove.x,
-    compactV ? collidesWith.y + collidesWith.h : itemToMove.y,
+    compactH ? itemToMove.x + 1 : undefined,
+    compactV ? itemToMove.y + 1 : undefined,
     isUserAction,
     preventCollision,
     compactType,

package/interfaces/classnames.js

@@ -2,14 +2,14 @@
 // flow-typed version: 94e9f7e0a4/classnames_v2.x.x/flow_>=v0.28.x
 
 type $npm$classnames$Classes =
-  string |
-  {[className: string]: ?boolean } |
-  Array<string> |
-  void |
-  null
+  | string
+  | { [className: string]: ?boolean }
+  | Array<string>
+  | void
+  | null;
 
-declare module 'classnames' {
-  declare function exports(
+declare module "classnames" {
+  declare module.exports: (
     ...classes: Array<$npm$classnames$Classes>
-  ): string;
+  ) => string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-grid-layout",
-  "version": "0.16.2",
+  "version": "0.16.6",
   "description": "A draggable and resizable grid layout with responsive breakpoints, for React.",
   "main": "index.js",
   "scripts": {
@@ -39,16 +39,16 @@
     "classnames": "2.x",
     "lodash.isequal": "^4.0.0",
     "prop-types": "15.x",
-    "react-draggable": "^3.0.3",
-    "react-resizable": "^1.7.5"
+    "react-draggable": "3.x",
+    "react-resizable": "1.x"
   },
   "devDependencies": {
     "babel-cli": "^6.24.1",
     "babel-core": "^6.24.1",
-    "babel-eslint": "^8.0.3",
-    "babel-jest": "^21.2.0",
+    "babel-eslint": "^8.2.1",
+    "babel-jest": "^22.2.2",
     "babel-loader": "^7.1.2",
-    "babel-plugin-espower": "^2.3.2",
+    "babel-plugin-espower": "^2.4.0",
     "babel-plugin-react-transform": "^3.0.0",
     "babel-plugin-transform-react-constant-elements": "^6.5.0",
     "babel-plugin-transform-react-inline-elements": "^6.6.5",
@@ -56,30 +56,30 @@
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-1": "^6.24.1",
-    "css-loader": "^0.28.7",
+    "css-loader": "^0.28.9",
     "ejs": "^2.4.1",
-    "eslint": "^4.13.0",
-    "eslint-plugin-flowtype": "^2.40.1",
+    "eslint": "^4.17.0",
+    "eslint-plugin-flowtype": "^2.44.0",
     "eslint-plugin-mocha": "^4.11.0",
-    "eslint-plugin-react": "^7.5.1",
-    "exports-loader": "^0.6.4",
-    "flow-bin": "^0.61.0",
+    "eslint-plugin-react": "^7.6.1",
+    "exports-loader": "^0.7.0",
+    "flow-bin": "^0.65.0",
     "husky": "^0.14.3",
     "imports-loader": "^0.7.1",
-    "jest-cli": "^21.2.1",
-    "lint-staged": "^6.0.0",
-    "lodash": "^4.3.0",
+    "jest-cli": "^22.3.0",
+    "lint-staged": "^6.1.0",
+    "lodash": "^4.17.5",
     "opener": "^1.4.3",
     "power-assert": "^1.4.4",
-    "prettier": "^1.9.1",
+    "prettier": "^1.10.2",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
-    "react-hot-loader": "^1.3.0",
+    "react-hot-loader": "^3.1.3",
     "react-transform-hmr": "^1.0.2",
-    "style-loader": "^0.19.0",
+    "style-loader": "^0.20.2",
     "valiquire": "^0.3.0",
-    "webpack": "^3.10.0",
-    "webpack-dev-server": "^2.9.7"
+    "webpack": "^3.11.0",
+    "webpack-dev-server": "^2.11.1"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org"