react-grid-layout 1.2.2 → 1.3.0

package/.flowconfig

@@ -1,5 +1,5 @@
 [version]
-^0.145.0
+^0.158.0
 
 [ignore]
 <PROJECT_ROOT>/build/.*
@@ -11,10 +11,8 @@
 [include]
 
 [libs]
-interfaces/
 flow-typed/
 
 [options]
-sharedmemory.heap_size=3221225472
 emoji=true
 module.use_strict=true

package/CHANGELOG.md

@@ -1,5 +1,60 @@
 # Changelog
 
+1.3.0 (Aug 27, 2021)
+---
+
+### New Features
+  - `allowOverlap` prop, when `true`, allows overlapping grid items. [#1470](https://github.com/react-grid-layout/react-grid-layout/pull/1470)
+  - Add `onDropDragOver` callback. [#1395](https://github.com/react-grid-layout/react-grid-layout/pull/1395)
+    - Use this callback to dynamically adjust the `droppingItem` based on what is being dragged over. Return `w` and `h` to adjust the item. It is then [spread into the dropping placeholder](https://github.com/react-grid-layout/react-grid-layout/pull/1395/files#diff-83ab569936bfd4bf0460a4f23653ecbe8bc88509062c95e75c9402218b2b8733R609).
+    - This callback has the type:
+      - `onDragOver: (e: DragOverEvent) => { w: number, h: number } | false;`
+      - Return `false` to short-circuit the dragover.
+
+### Bugfixes
+  - Remove sorting when `compactType` is `null`. [#1474](https://github.com/react-grid-layout/react-grid-layout/pull/1474)
+  - Droppable fixes for Chrome behavior. [#1442](https://github.com/react-grid-layout/react-grid-layout/issues/1442) [#1448](https://github.com/react-grid-layout/react-grid-layout/issues/1442)
+  - Allow `null` children as a convenience so that inline expressions don't break the library. [#1296](https://github.com/react-grid-layout/react-grid-layout/pull/1296)
+  - Various dependency upgrades.
+
+### Documentation
+  - Add docs on using custom components as grid children.
+  - Note required class on resizable handles for proper styling.
+
+
+1.2.5 (May 10, 2021)
+---
+
+### Bugfixes
+  - Ensure no negative positions are possible when compacting
+    - Thanks @DonnyLi [#829](https://github.com/react-grid-layout/react-grid-layout/pull/829)
+    - Fixes [#535](https://github.com/react-grid-layout/react-grid-layout/issues/535)
+  - Fix resizing on mobile. This was caused by the `ref` refactor to remove ReactDOM in 1.2.3.
+    - Fixes #[1458](https://github.com/react-grid-layout/react-grid-layout/issues/1458)
+    - Note: this upgrades `react-resizable` to `3.0.1`, which like our other deps, is only compatible with `React@>=16.3`.
+
+### Documentation
+  - Document new arity of `resizeHandle` (`(axis: ResizeHandleAxis, ref: ReactRef<HTMLElement>) => React$Element`)
+  - Remove references to the deprecated `verticalCompact` prop
+
+1.2.4 (Mar 18, 2021)
+---
+
+*This version fixes a serious render bug in `<WidthProvider>`. 1.2.3 should not be used.*
+
+### Bugfixes
+  - Fix failure to mount when layout is WidthProvider-wrapped and `measureBeforeMount` is `true`.
+    - Ref: [#1428](https://github.com/react-grid-layout/react-grid-layout/issues/1428)
+  - `<WidthProvider>` no longer updates grid with if it has been set to 0. This prevents unnecessary updates
+    if the grid is set to `display: none;`. Thanks @405go [#1427](https://github.com/react-grid-layout/react-grid-layout/pull/1427)
+
+1.2.3 (Mar 16, 2021)
+---
+
+### New Features
+  - React-Grid-Layout is now fully compatible with `<React.StrictMode>`.
+    - Usage of `ReactDOM` has been removed by using `React.createRef()` inside RGL, and the new [`nodeRef` prop](https://github.com/react-grid-layout/react-draggable/blob/master/CHANGELOG.md#440-may-12-2020) in `react-draggable`.
+
 1.2.2 (Mar 1, 2021)
 ---
 

package/README.md

@@ -16,7 +16,7 @@ RGL is React-only and does not require jQuery.
 ![BitMEX UI](http://i.imgur.com/oo1NT6c.gif)
 > GIF from production usage on [BitMEX.com](https://www.bitmex.com)
 
-[**[Demo](https://react-grid-layout.github.io/react-grid-layout/examples/0-showcase.html) | [Changelog](/CHANGELOG.md) | [CodeSandbox Editable demo](https://codesandbox.io/s/5wy3rz5z1x?module=%2Fsrc%2FShowcaseLayout.js)**]
+[**[Demo](https://react-grid-layout.github.io/react-grid-layout/) | [Changelog](/CHANGELOG.md) | [CodeSandbox Editable demo](https://codesandbox.io/s/5wy3rz5z1x?module=%2Fsrc%2FShowcaseLayout.js)**]
 
 ## Table of Contents
 
@@ -55,6 +55,7 @@ RGL is React-only and does not require jQuery.
 1. [Bounded Layout](https://react-grid-layout.github.io/react-grid-layout/examples/16-bounded.html)
 1. [Resizable Handles](https://react-grid-layout.github.io/react-grid-layout/examples/17-resizable-handles.html)
 1. [Scaled Containers](https://react-grid-layout.github.io/react-grid-layout/examples/18-scale.html)
+1. [Allow Overlap](https://react-grid-layout.github.io/react-grid-layout/examples/19-allow-overlap.html)
 
 #### Projects Using React-Grid-Layout
 
@@ -74,6 +75,7 @@ RGL is React-only and does not require jQuery.
 - [Hakkiri](https://www.hakkiri.io)
 - [Ubidots](https://help.ubidots.com/en/articles/2400308-create-dashboards-and-widgets)
 - [Statsout](https://statsout.com/)
+- [Datto RMM](https://www.datto.com/uk/products/rmm/)
 
 *Know of others? Create a PR to let me know!*
 
@@ -92,11 +94,12 @@ RGL is React-only and does not require jQuery.
 * Separate layouts per responsive breakpoint
 * Grid Items placed using CSS Transforms
   * Performance with CSS Transforms: [on](http://i.imgur.com/FTogpLp.jpg) / [off](http://i.imgur.com/gOveMm8.jpg), note paint (green) as % of time
+* Compatibility with `<React.StrictMode>`
 
 |Version         | Compatibility    |
 |----------------|------------------|
-| >= 0.17.0      | React 0.16       |
-| >= 0.11.3      | React 0.14 & v15 |
+| >= 0.17.0      | React 16 & 17    |
+| >= 0.11.3      | React 0.14 & 15  |
 | >= 0.10.0      | React 0.14       |
 | 0.8. - 0.9.2   | React 0.13       |
 | < 0.8          | React 0.12       |
@@ -265,6 +268,7 @@ cols: ?number = 12,
 // A CSS selector for tags that will not be draggable.
 // For example: draggableCancel:'.MyNonDraggableAreaClassName'
 // If you forget the leading . it will not work.
+// .react-resizable-handle" is always prepended to this value.
 draggableCancel: ?string = '',
 
 // A CSS selector for tags that will act as the draggable handle.
@@ -272,9 +276,6 @@ draggableCancel: ?string = '',
 // If you forget the leading . it will not work.
 draggableHandle: ?string = '',
 
-// If true, the layout will compact vertically
-verticalCompact: ?boolean = true,
-
 // Compaction type.
 compactType: ?('vertical' | 'horizontal') = 'vertical';
 
@@ -317,9 +318,12 @@ useCSSTransforms: ?boolean = true,
 // we should set scale coefficient to avoid render artefacts while dragging.
 transformScale: ?number = 1,
 
+// If true, grid can be placed one over the other.
+allowOverlap: ?boolean = false,
+
 // If true, grid items won't change position when being
 // dragged over.
-preventCollision: ?boolean = false;
+preventCollision: ?boolean = false,
 
 // If true, droppable elements (with `draggable={true}` attribute)
 // can be dropped on the grid. It triggers "onDrop" callback
@@ -331,7 +335,7 @@ preventCollision: ?boolean = false;
 // along with `draggable={true}` otherwise this feature will work incorrect.
 // onDragStart attribute is required for Firefox for a dragging initialization
 // @see https://bugzilla.mozilla.org/show_bug.cgi?id=568313
-isDroppable: ?boolean = false
+isDroppable: ?boolean = false,
 // Defines which resize handles should be rendered
 // Allows for any combination of:
 // 's' - South handle (bottom-center)
@@ -342,9 +346,12 @@ isDroppable: ?boolean = false
 // 'nw' - Northwest handle (top-left)
 // 'se' - Southeast handle (bottom-right)
 // 'ne' - Northeast handle (top-right)
-resizeHandles: ?Array<'s' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne'> = ['se']
+resizeHandles: ?Array<'s' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne'> = ['se'],
 // Custom component for resize handles
-resizeHandle?: ReactElement<any> | ((resizeHandleAxis: ResizeHandleAxis) => ReactElement<any>)
+// See `handle` as used in https://github.com/react-grid-layout/react-resizable#resize-handle
+// Your component should have the class `.react-resizable-handle`, or you should add your custom
+// class to the `draggableCancel` prop.
+resizeHandle?: ReactElement<any> | ((resizeHandleAxis: ResizeHandleAxis, ref: ReactRef<HTMLElement>) => ReactElement<any>),
 
 //
 // Callbacks
@@ -359,7 +366,7 @@ onLayoutChange: (layout: Layout) => void,
 // 'start' and 'stop' callbacks pass `undefined` for 'placeholder'.
 //
 type ItemCallback = (layout: Layout, oldItem: LayoutItem, newItem: LayoutItem,
-                     placeholder: LayoutItem, e: MouseEvent, element: HTMLElement) => void;
+                     placeholder: LayoutItem, e: MouseEvent, element: HTMLElement) => void,
 
 // Calls when drag starts.
 onDragStart: ItemCallback,
@@ -373,12 +380,21 @@ onResizeStart: ItemCallback,
 onResize: ItemCallback,
 // Calls when resize is complete.
 onResizeStop: ItemCallback,
+
+//
+// Dropover functionality
+//
+
 // Calls when an element has been dropped into the grid from outside.
-onDrop: (layout: Layout, item: ?LayoutItem, e: Event) => void
+onDrop: (layout: Layout, item: ?LayoutItem, e: Event) => void,
+// Calls when an element is being dragged over the grid from outside as above.
+// This callback should return an object to dynamically change the droppingItem size
+// Return false to short-circuit the dragover
+onDropDragOver: (e: DragOverEvent) => ?({|w?: number, h?: number|} | false),
 
 // Ref for getting a reference for the grid's wrapping div.
 // You can use this instead of a regular ref and the deprecated `ReactDOM.findDOMNode()`` function.
-innerRef: ?React.Ref<"div">
+innerRef: ?React.Ref<"div">,
 ```
 
 ### Responsive Grid Layout Props
@@ -396,16 +412,16 @@ cols: ?Object = {lg: 12, md: 10, sm: 6, xs: 4, xxs: 2},
 
 
 // margin (in pixels). Can be specified either as horizontal and vertical margin, e.g. `[10, 10]` or as a breakpoint -> margin map, e.g. `{lg: [10, 10], md: [10, 10], ...}.
-margin: [number, number] | {[breakpoint: $Keys<breakpoints>]: [number, number]}
+margin: [number, number] | {[breakpoint: $Keys<breakpoints>]: [number, number]},
 
 
 // containerPadding (in pixels). Can be specified either as horizontal and vertical padding, e.g. `[10, 10]` or as a breakpoint -> containerPadding map, e.g. `{lg: [10, 10], md: [10, 10], ...}.
-containerPadding: [number, number] | {[breakpoint: $Keys<breakpoints>]: [number, number]}
+containerPadding: [number, number] | {[breakpoint: $Keys<breakpoints>]: [number, number]},
 
 
 // layouts is an object mapping breakpoints to layouts.
 // e.g. {lg: Layout, md: Layout, ...}
-layouts: {[key: $Keys<breakpoints>]: Layout}
+layouts: {[key: $Keys<breakpoints>]: Layout},
 
 //
 // Callbacks
@@ -508,6 +524,29 @@ function MyGrid(props) {
 
 Because the `children` prop doesn't change between rerenders, updates to `<MyGrid>` won't result in new renders, improving performance.
 
+### Custom Child Components and Draggable Handles
+
+If you use React Components as grid children, they need to do a few things:
+
+1. Forward refs to an underlying DOM node, and
+2. Forward `style` and `className` to that same DOM node.
+
+For example:
+
+```js
+const CustomGridItemComponent = React.forwardRef(({style, className, ...props}, ref) => {
+  return (
+    <div style={{ /* styles */, ...style}} className={className} ref={ref}>
+      {/* Some other content */}
+    </div>  
+  );
+}
+```
+
+The same is true of custom elements as draggable handles using the `draggableHandle` prop. This is so that
+the underlying `react-draggable` library can get a reference to the DOM node underneath, manipulate
+positioning via `style`, and set classes.
+
 ## Contribute
 
 If you have a feature request, please add it as an issue or make a pull request.

package/build/GridItem.js

@@ -9,8 +9,6 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactDom = _interopRequireDefault(require("react-dom"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _reactDraggable = require("react-draggable");
@@ -27,7 +25,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-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; }
+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; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
@@ -43,7 +41,7 @@ function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || func
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
 
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 
@@ -78,7 +76,7 @@ var GridItem = /*#__PURE__*/function (_React$Component) {
       className: ""
     });
 
-    _defineProperty(_assertThisInitialized(_this), "currentNode", void 0);
+    _defineProperty(_assertThisInitialized(_this), "elementRef", /*#__PURE__*/_react.default.createRef());
 
     _defineProperty(_assertThisInitialized(_this), "onDragStart", function (e, _ref) {
       var node = _ref.node;
@@ -273,26 +271,19 @@ var GridItem = /*#__PURE__*/function (_React$Component) {
     ) {
       var droppingPosition = this.props.droppingPosition;
       if (!droppingPosition) return;
+      var node = this.elementRef.current; // Can't find DOM node (are we unmounted?)
+
+      if (!node) return;
       var prevDroppingPosition = prevProps.droppingPosition || {
         left: 0,
         top: 0
       };
       var dragging = this.state.dragging;
-
-      if (!this.currentNode) {
-        // eslint-disable-next-line react/no-find-dom-node
-        this.currentNode = ((_reactDom.default.findDOMNode(this)
-        /*: any*/
-        )
-        /*: HTMLElement*/
-        );
-      }
-
       var shouldDrag = dragging && droppingPosition.left !== prevDroppingPosition.left || droppingPosition.top !== prevDroppingPosition.top;
 
       if (!dragging) {
         this.onDragStart(droppingPosition.e, {
-          node: this.currentNode,
+          node: node,
           deltaX: droppingPosition.left,
           deltaY: droppingPosition.top
         });
@@ -300,7 +291,7 @@ var GridItem = /*#__PURE__*/function (_React$Component) {
         var deltaX = droppingPosition.left - dragging.left;
         var deltaY = droppingPosition.top - dragging.top;
         this.onDrag(droppingPosition.e, {
-          node: this.currentNode,
+          node: node,
           deltaX: deltaX,
           deltaY: deltaY
         });
@@ -383,7 +374,8 @@ var GridItem = /*#__PURE__*/function (_React$Component) {
         onStop: this.onDragStop,
         handle: this.props.handle,
         cancel: ".react-resizable-handle" + (this.props.cancel ? "," + this.props.cancel : ""),
-        scale: this.props.transformScale
+        scale: this.props.transformScale,
+        nodeRef: this.elementRef
       }, child);
     }
     /**
@@ -422,7 +414,8 @@ var GridItem = /*#__PURE__*/function (_React$Component) {
       var maxes = (0, _calculateUtils.calcGridItemPosition)(positionParams, 0, 0, maxW, maxH);
       var minConstraints = [mins.width, mins.height];
       var maxConstraints = [Math.min(maxes.width, maxWidth), Math.min(maxes.height, Infinity)];
-      return /*#__PURE__*/_react.default.createElement(_reactResizable.Resizable, {
+      return /*#__PURE__*/_react.default.createElement(_reactResizable.Resizable // These are opts for the resize handle itself
+      , {
         draggableOpts: {
           disabled: !isResizable
         },
@@ -518,6 +511,7 @@ var GridItem = /*#__PURE__*/function (_React$Component) {
 
 
       var newChild = /*#__PURE__*/_react.default.cloneElement(child, {
+        ref: this.elementRef,
         className: (0, _classnames.default)("react-grid-item", child.props.className, this.props.className, {
           static: this.props.static,
           resizing: Boolean(this.state.resizing),
@@ -598,7 +592,7 @@ _defineProperty(GridItem, "propTypes", {
   // ID is nice to have for callbacks
   i: _propTypes.default.string.isRequired,
   // Resize handle options
-  resizeHandles: _ReactGridLayoutPropTypes.resizeHandlesType,
+  resizeHandles: _ReactGridLayoutPropTypes.resizeHandleAxesType,
   resizeHandle: _ReactGridLayoutPropTypes.resizeHandleType,
   // Functions
   onDragStop: _propTypes.default.func,