react-grid-layout 1.1.0 → 1.2.2

package/build/ReactGridLayout.js

@@ -1,11 +1,13 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var React = _interopRequireWildcard(require("react"));
 
 var _lodash = _interopRequireDefault(require("lodash.isequal"));
 
@@ -21,7 +23,17 @@ var _ReactGridLayoutPropTypes = _interopRequireDefault(require("./ReactGridLayou
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
@@ -55,7 +67,7 @@ function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) ===
 
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
@@ -109,13 +121,16 @@ var ReactGridLayout = /*#__PURE__*/function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this), "dragEnterCounter", 0);
 
-    _defineProperty(_assertThisInitialized(_this), "onDragOver", function (e
-    /*: DragOverEvent*/
-    ) {
+    _defineProperty(_assertThisInitialized(_this), "onDragOver", function (e) {
+      var _e$nativeEvent$target;
+
       // we should ignore events from layout's children in Firefox
       // to avoid unpredictable jumping of a dropping placeholder
       // FIXME remove this hack
-      if (isFirefox && e.nativeEvent.target.className.indexOf(layoutClassName) === -1) {
+      if (isFirefox && // $FlowIgnore can't figure this out
+      !((_e$nativeEvent$target = e.nativeEvent.target) !== null && _e$nativeEvent$target !== void 0 && _e$nativeEvent$target.classList.contains(layoutClassName))) {
+        // without this Firefox will not allow drop if currently over droppingItem
+        e.preventDefault();
         return false;
       }
 
@@ -152,7 +167,7 @@ var ReactGridLayout = /*#__PURE__*/function (_React$Component) {
         var calculatedPosition = (0, _calculateUtils.calcXY)(positionParams, layerY, layerX, droppingItem.w, droppingItem.h);
 
         _this.setState({
-          droppingDOMNode: /*#__PURE__*/_react.default.createElement("div", {
+          droppingDOMNode: /*#__PURE__*/React.createElement("div", {
             key: droppingItem.i
           }),
           droppingPosition: droppingPosition,
@@ -220,7 +235,7 @@ var ReactGridLayout = /*#__PURE__*/function (_React$Component) {
       var layout = _this.state.layout;
       var item = layout.find(function (l) {
         return l.i === droppingItem.i;
-      }); // reset gragEnter counter on drop
+      }); // reset dragEnter counter on drop
 
       _this.dragEnterCounter = 0;
 
@@ -249,7 +264,9 @@ var ReactGridLayout = /*#__PURE__*/function (_React$Component) {
     /*: Props*/
     , nextState
     /*: State*/
-    ) {
+    )
+    /*: boolean*/
+    {
       return (// NOTE: this is almost always unequal. Therefore the only way to get better performance
         // from SCU is if the user intentionally memoizes children. If they do, and they can
         // handle changes properly, performance will increase.
@@ -276,7 +293,9 @@ var ReactGridLayout = /*#__PURE__*/function (_React$Component) {
 
   }, {
     key: "containerHeight",
-    value: function containerHeight() {
+    value: function containerHeight()
+    /*: ?string*/
+    {
       if (!this.props.autoSize) return;
       var nbRow = (0, _utils.bottom)(this.state.layout);
       var containerPaddingY = this.props.containerPadding ? this.props.containerPadding[1] : this.props.margin[1];
@@ -299,7 +318,9 @@ var ReactGridLayout = /*#__PURE__*/function (_React$Component) {
     /*: number*/
     , y
     /*: number*/
-    , _ref) {
+    , _ref)
+    /*: void*/
+    {
       var e = _ref.e,
           node = _ref.node;
       var layout = this.state.layout;
@@ -328,7 +349,9 @@ var ReactGridLayout = /*#__PURE__*/function (_React$Component) {
     /*: number*/
     , y
     /*: number*/
-    , _ref2) {
+    , _ref2)
+    /*: void*/
+    {
       var e = _ref2.e,
           node = _ref2.node;
       var oldDragItem = this.state.oldDragItem;
@@ -371,7 +394,9 @@ var ReactGridLayout = /*#__PURE__*/function (_React$Component) {
     /*: number*/
     , y
     /*: number*/
-    , _ref3) {
+    , _ref3)
+    /*: void*/
+    {
       var e = _ref3.e,
           node = _ref3.node;
       if (!this.state.activeDrag) return;
@@ -447,42 +472,48 @@ var ReactGridLayout = /*#__PURE__*/function (_React$Component) {
       var _this$props4 = this.props,
           cols = _this$props4.cols,
           preventCollision = _this$props4.preventCollision;
-      var l
-      /*: ?LayoutItem*/
-      = (0, _utils.getLayoutItem)(layout, i);
-      if (!l) return; // Something like quad tree should be used
-      // to find collisions faster
-
-      var hasCollisions;
-
-      if (preventCollision) {
-        var collisions = (0, _utils.getAllCollisions)(layout, _objectSpread(_objectSpread({}, 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);
+
+      var _withLayoutItem = (0, _utils.withLayoutItem)(layout, i, function (l) {
+        // Something like quad tree should be used
+        // to find collisions faster
+        var hasCollisions;
+
+        if (preventCollision) {
+          var collisions = (0, _utils.getAllCollisions)(layout, _objectSpread(_objectSpread({}, l), {}, {
+            w: w,
+            h: h
+          })).filter(function (layoutItem) {
+            return layoutItem.i !== l.i;
           });
-          if (Number.isFinite(leastX)) l.w = leastX - l.x;
-          if (Number.isFinite(leastY)) l.h = leastY - l.y;
+          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;
+          }
         }
-      }
 
-      if (!hasCollisions) {
-        // Set new width and height.
-        l.w = w;
-        l.h = h;
-      } // Create placeholder element (display only)
+        if (!hasCollisions) {
+          // Set new width and height.
+          l.w = w;
+          l.h = h;
+        }
+
+        return l;
+      }),
+          _withLayoutItem2 = _slicedToArray(_withLayoutItem, 2),
+          newLayout = _withLayoutItem2[0],
+          l = _withLayoutItem2[1]; // Shouldn't ever happen, but typechecking makes it necessary
+
 
+      if (!l) return; // Create placeholder element (display only)
 
       var placeholder = {
         w: l.w,
@@ -492,10 +523,10 @@ var ReactGridLayout = /*#__PURE__*/function (_React$Component) {
         static: true,
         i: i
       };
-      this.props.onResize(layout, oldResizeItem, l, placeholder, e, node); // Re-compact the layout and set the drag placeholder.
+      this.props.onResize(newLayout, oldResizeItem, l, placeholder, e, node); // Re-compact the newLayout and set the drag placeholder.
 
       this.setState({
-        layout: (0, _utils.compact)(layout, (0, _utils.compactType)(this.props), cols),
+        layout: (0, _utils.compact)(newLayout, (0, _utils.compactType)(this.props), cols),
         activeDrag: placeholder
       });
     }
@@ -549,7 +580,7 @@ var ReactGridLayout = /*#__PURE__*/function (_React$Component) {
           useCSSTransforms = _this$props5.useCSSTransforms,
           transformScale = _this$props5.transformScale; // {...this.state.activeDrag} is pretty slow, actually
 
-      return /*#__PURE__*/_react.default.createElement(_GridItem.default, {
+      return /*#__PURE__*/React.createElement(_GridItem.default, {
         w: activeDrag.w,
         h: activeDrag.h,
         x: activeDrag.x,
@@ -567,7 +598,7 @@ var ReactGridLayout = /*#__PURE__*/function (_React$Component) {
         isBounded: false,
         useCSSTransforms: useCSSTransforms,
         transformScale: transformScale
-      }, /*#__PURE__*/_react.default.createElement("div", null));
+      }, /*#__PURE__*/React.createElement("div", null));
     }
     /**
      * Given a grid item, set its style attributes & surround in a <Draggable>.
@@ -601,7 +632,8 @@ var ReactGridLayout = /*#__PURE__*/function (_React$Component) {
           transformScale = _this$props6.transformScale,
           draggableCancel = _this$props6.draggableCancel,
           draggableHandle = _this$props6.draggableHandle,
-          resizeHandles = _this$props6.resizeHandles;
+          resizeHandles = _this$props6.resizeHandles,
+          resizeHandle = _this$props6.resizeHandle;
       var _this$state3 = this.state,
           mounted = _this$state3.mounted,
           droppingPosition = _this$state3.droppingPosition; // Determine user manipulations possible.
@@ -613,7 +645,7 @@ var ReactGridLayout = /*#__PURE__*/function (_React$Component) {
       var resizeHandlesOptions = l.resizeHandles || resizeHandles; // isBounded set on child if set on parent, and child is not explicitly false
 
       var bounded = draggable && isBounded && l.isBounded !== false;
-      return /*#__PURE__*/_react.default.createElement(_GridItem.default, {
+      return /*#__PURE__*/React.createElement(_GridItem.default, {
         containerWidth: width,
         cols: cols,
         margin: margin,
@@ -645,14 +677,17 @@ var ReactGridLayout = /*#__PURE__*/function (_React$Component) {
         maxW: l.maxW,
         static: l.static,
         droppingPosition: isDroppingItem ? droppingPosition : undefined,
-        resizeHandles: resizeHandlesOptions
+        resizeHandles: resizeHandlesOptions,
+        resizeHandle: resizeHandle
       }, child);
     } // Called while dragging an element. Part of browser native drag/drop API.
     // Native event target might be the layout itself, or an element within the layout.
 
   }, {
     key: "render",
-    value: function render() {
+    value: function render()
+    /*: React.Element<"div">*/
+    {
       var _this2 = this;
 
       var _this$props7 = this.props,
@@ -666,7 +701,7 @@ var ReactGridLayout = /*#__PURE__*/function (_React$Component) {
         height: this.containerHeight()
       }, style);
 
-      return /*#__PURE__*/_react.default.createElement("div", {
+      return /*#__PURE__*/React.createElement("div", {
         ref: innerRef,
         className: mergedClassName,
         style: mergedStyle,
@@ -674,7 +709,7 @@ var ReactGridLayout = /*#__PURE__*/function (_React$Component) {
         onDragLeave: isDroppable ? this.onDragLeave : _utils.noop,
         onDragEnter: isDroppable ? this.onDragEnter : _utils.noop,
         onDragOver: isDroppable ? this.onDragOver : _utils.noop
-      }, _react.default.Children.map(this.props.children, function (child) {
+      }, React.Children.map(this.props.children, function (child) {
         return _this2.processGridItem(child);
       }), isDroppable && this.state.droppingDOMNode && this.processGridItem(this.state.droppingDOMNode, true), this.placeholder());
     }
@@ -684,7 +719,9 @@ var ReactGridLayout = /*#__PURE__*/function (_React$Component) {
     /*: Props*/
     , prevState
     /*: State*/
-    ) {
+    )
+    /*: $Shape<State> | null*/
+    {
       var newLayoutBase;
 
       if (prevState.activeDrag) {
@@ -720,7 +757,7 @@ var ReactGridLayout = /*#__PURE__*/function (_React$Component) {
   }]);
 
   return ReactGridLayout;
-}(_react.default.Component);
+}(React.Component);
 
 exports.default = ReactGridLayout;
 

package/build/ReactGridLayoutPropTypes.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.resizeHandleType = exports.resizeHandlesType = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -11,6 +11,75 @@ var _react = _interopRequireDefault(require("react"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+// Defines which resize handles should be rendered (default: 'se')
+// Allows for any combination of:
+// 's' - South handle (bottom-center)
+// 'w' - West handle (left-center)
+// 'e' - East handle (right-center)
+// 'n' - North handle (top-center)
+// 'sw' - Southwest handle (bottom-left)
+// 'nw' - Northwest handle (top-left)
+// 'se' - Southeast handle (bottom-right)
+// 'ne' - Northeast handle (top-right)
+var resizeHandlesType
+/*: ReactPropsChainableTypeChecker*/
+= _propTypes.default.arrayOf(_propTypes.default.oneOf(["s", "w", "e", "n", "sw", "nw", "se", "ne"])); // Custom component for resize handles
+
+
+exports.resizeHandlesType = resizeHandlesType;
+
+var resizeHandleType
+/*: ReactPropsChainableTypeChecker*/
+= _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]);
+/*:: export type Props = {|
+  className: string,
+  style: Object,
+  width: number,
+  autoSize: boolean,
+  cols: number,
+  draggableCancel: string,
+  draggableHandle: string,
+  verticalCompact: boolean,
+  compactType: CompactType,
+  layout: Layout,
+  margin: [number, number],
+  containerPadding: ?[number, number],
+  rowHeight: number,
+  maxRows: number,
+  isBounded: boolean,
+  isDraggable: boolean,
+  isResizable: boolean,
+  isDroppable: boolean,
+  preventCollision: boolean,
+  useCSSTransforms: boolean,
+  transformScale: number,
+  droppingItem: $Shape<LayoutItem>,
+  resizeHandles: ResizeHandles,
+  resizeHandle?: ResizeHandle,
+
+  // Callbacks
+  onLayoutChange: Layout => void,
+  onDrag: EventCallback,
+  onDragStart: EventCallback,
+  onDragStop: EventCallback,
+  onResize: EventCallback,
+  onResizeStart: EventCallback,
+  onResizeStop: EventCallback,
+  onDrop: (layout: Layout, item: ?LayoutItem, e: Event) => void,
+  children: ReactChildrenArray<ReactElement<any>>,
+  innerRef?: Ref<"div">
+|};*/
+
+/*:: export type DefaultProps = $Diff<
+  Props,
+  {
+    children: ReactChildrenArray<ReactElement<any>>,
+    width: number
+  }
+>;*/
+
+
+exports.resizeHandleType = resizeHandleType;
 var _default = {
   //
   // Basic props
@@ -39,7 +108,9 @@ var _default = {
     }
   },
   // Choose vertical or hotizontal compaction
-  compactType: _propTypes.default.oneOf(["vertical", "horizontal"]),
+  compactType: (_propTypes.default.oneOf(["vertical", "horizontal"])
+  /*: ReactPropsChainableTypeChecker*/
+  ),
   // layout is an array of object with the format:
   // {x: Number, y: Number, w: Number, h: Number, i: String}
   layout: function layout(props
@@ -55,9 +126,13 @@ var _default = {
   // Grid Dimensions
   //
   // Margin between items [x, y] in px
-  margin: _propTypes.default.arrayOf(_propTypes.default.number),
+  margin: (_propTypes.default.arrayOf(_propTypes.default.number)
+  /*: ReactPropsChainableTypeChecker*/
+  ),
   // Padding inside the container [x, y] in px
-  containerPadding: _propTypes.default.arrayOf(_propTypes.default.number),
+  containerPadding: (_propTypes.default.arrayOf(_propTypes.default.number)
+  /*: ReactPropsChainableTypeChecker*/
+  ),
   // Rows have a static height, but you can change this based on breakpoints if you like
   rowHeight: _propTypes.default.number,
   // Default Infinity, but you can specify a max here if you like.
@@ -80,17 +155,9 @@ var _default = {
   transformScale: _propTypes.default.number,
   // If true, an external element can trigger onDrop callback with a specific grid position as a parameter
   isDroppable: _propTypes.default.bool,
-  // Defines which resize handles should be rendered (default: 'se')
-  // Allows for any combination of:
-  // 's' - South handle (bottom-center)
-  // 'w' - West handle (left-center)
-  // 'e' - East handle (right-center)
-  // 'n' - North handle (top-center)
-  // 'sw' - Southwest handle (bottom-left)
-  // 'nw' - Northwest handle (top-left)
-  // 'se' - Southeast handle (bottom-right)
-  // 'ne' - Northeast handle (top-right)
-  resizeHandles: _propTypes.default.arrayOf(_propTypes.default.oneOf(["s", "w", "e", "n", "sw", "nw", "se", "ne"])),
+  // Resize handle options
+  resizeHandles: resizeHandlesType,
+  resizeHandle: resizeHandleType,
   //
   // Callbacks
   //
@@ -114,11 +181,13 @@ var _default = {
   //
   // Other validations
   //
-  droppingItem: _propTypes.default.shape({
+  droppingItem: (_propTypes.default.shape({
     i: _propTypes.default.string.isRequired,
     w: _propTypes.default.number.isRequired,
     h: _propTypes.default.number.isRequired
-  }),
+  })
+  /*: ReactPropsChainableTypeChecker*/
+  ),
   // Children must not have duplicate keys.
   children: function children(props
   /*: Props*/

package/build/ResponsiveReactGridLayout.js

@@ -1,5 +1,7 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -23,8 +25,6 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
 function _extends() { _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; }; return _extends.apply(this, arguments); }
 
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
@@ -51,7 +51,7 @@ function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) ===
 
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
@@ -78,15 +78,16 @@ function getIndentationValue
 )
 /*: T*/
 {
-  // $FlowIssue doesn't seem to understand this
-  if (param == null) return null;
+  // $FlowIgnore TODO fix this typedef
+  if (param == null) return null; // $FlowIgnore TODO fix this typedef
+
   return Array.isArray(param) ? param : param[breakpoint];
 }
 /*:: type State = {
   layout: Layout,
   breakpoint: string,
   cols: number,
-  layouts?: { [key: string]: Layout }
+  layouts?: ResponsiveLayout<string>
 };*/
 
 /*:: type Props<Breakpoint: string = string> = {|
@@ -104,7 +105,7 @@ function getIndentationValue
 
   // Callbacks
   onBreakpointChange: (Breakpoint, cols: number) => void,
-  onLayoutChange: (Layout, { [key: Breakpoint]: Layout }) => void,
+  onLayoutChange: OnLayoutChangeCallback,
   onWidthChange: (
     containerWidth: number,
     margin: [number, number],
@@ -113,6 +114,20 @@ function getIndentationValue
   ) => void
 |};*/
 
+/*:: type DefaultProps = Pick<
+  Props<>,
+  {|
+    breakpoints: 0,
+    cols: 0,
+    containerPadding: 0,
+    layouts: 0,
+    margin: 0,
+    onBreakpointChange: 0,
+    onLayoutChange: 0,
+    onWidthChange: 0
+  |}
+>;*/
+
 
 var ResponsiveReactGridLayout = /*#__PURE__*/function (_React$Component) {
   _inherits(ResponsiveReactGridLayout, _React$Component);
@@ -177,12 +192,12 @@ var ResponsiveReactGridLayout = /*#__PURE__*/function (_React$Component) {
 
   }, {
     key: "onWidthChange",
-
+    value:
     /**
      * When the width changes work through breakpoints and reset state with the new width & breakpoint.
      * Width changes are necessary to figure out the widget widths.
      */
-    value: function onWidthChange(prevProps
+    function onWidthChange(prevProps
     /*: Props<*>*/
     ) {
       var _this$props2 = this.props,
@@ -225,7 +240,9 @@ var ResponsiveReactGridLayout = /*#__PURE__*/function (_React$Component) {
     }
   }, {
     key: "render",
-    value: function render() {
+    value: function render()
+    /*: React.Element<typeof ReactGridLayout>*/
+    {
       /* eslint-disable no-unused-vars */
       var _this$props3 = this.props,
           breakpoint = _this$props3.breakpoint,
@@ -242,6 +259,7 @@ var ResponsiveReactGridLayout = /*#__PURE__*/function (_React$Component) {
 
 
       return /*#__PURE__*/React.createElement(_ReactGridLayout.default, _extends({}, other, {
+        // $FlowIgnore should allow nullable here due to DefaultProps
         margin: getIndentationValue(margin, this.state.breakpoint),
         containerPadding: getIndentationValue(containerPadding, this.state.breakpoint),
         onLayoutChange: this.onLayoutChange,
@@ -255,7 +273,9 @@ var ResponsiveReactGridLayout = /*#__PURE__*/function (_React$Component) {
     /*: Props<*>*/
     , prevState
     /*: State*/
-    ) {
+    )
+    /*: ?$Shape<State>*/
+    {
       if (!(0, _lodash.default)(nextProps.layouts, prevState.layouts)) {
         // Allow parent to set layouts directly.
         var breakpoint = prevState.breakpoint,
@@ -348,8 +368,6 @@ _defineProperty(ResponsiveReactGridLayout, "defaultProps", {
     xs: 4,
     xxs: 2
   },
-  layouts: {},
-  margin: [10, 10],
   containerPadding: {
     lg: null,
     md: null,
@@ -357,6 +375,8 @@ _defineProperty(ResponsiveReactGridLayout, "defaultProps", {
     xs: null,
     xxs: null
   },
+  layouts: {},
+  margin: [10, 10],
   onBreakpointChange: _utils.noop,
   onLayoutChange: _utils.noop,
   onWidthChange: _utils.noop

package/build/calculateUtils.js

@@ -43,7 +43,9 @@ function calcGridItemWHPx(gridUnits
 /*: number*/
 , marginPx
 /*: number*/
-) {
+)
+/*: number*/
+{
   // 0 * Infinity === NaN, which causes problems with resize contraints
   if (!Number.isFinite(gridUnits)) return gridUnits;
   return Math.round(colOrRowSize * gridUnits + Math.max(0, gridUnits - 1) * marginPx);
@@ -198,6 +200,8 @@ function clamp(num
 /*: number*/
 , upperBound
 /*: number*/
-) {
+)
+/*: number*/
+{
   return Math.max(Math.min(num, upperBound), lowerBound);
 }

package/build/components/WidthProvider.js

@@ -1,5 +1,7 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -17,8 +19,6 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
 function _extends() { _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; }; return _extends.apply(this, arguments); }
 
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
@@ -41,7 +41,7 @@ function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) ===
 
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }