react-grid-layout 1.2.5 → 1.3.3

package/README.md

@@ -14,6 +14,7 @@ or autogenerated.
 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/) | [Changelog](/CHANGELOG.md) | [CodeSandbox Editable demo](https://codesandbox.io/s/5wy3rz5z1x?module=%2Fsrc%2FShowcaseLayout.js)**]
@@ -55,6 +56,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,33 +76,34 @@ 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!*
+_Know of others? Create a PR to let me know!_
 
 ## Features
 
-* 100% React - no jQuery
-* Compatible with server-rendered apps
-* Draggable widgets
-* Resizable widgets
-* Static widgets
-* Configurable packing: horizontal, vertical, or off
-* Bounds checking for dragging and resizing
-* Widgets may be added or removed without rebuilding grid
-* Layout can be serialized and restored
-* Responsive breakpoints
-* 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 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       |
+- 100% React - no jQuery
+- Compatible with server-rendered apps
+- Draggable widgets
+- Resizable widgets
+- Static widgets
+- Configurable packing: horizontal, vertical, or off
+- Bounds checking for dragging and resizing
+- Widgets may be added or removed without rebuilding grid
+- Layout can be serialized and restored
+- Responsive breakpoints
+- 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 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      |
 
 ## Installation
 
@@ -127,23 +130,29 @@ produce a grid with three items where:
 - users will be able to freely drag and resize item `c`
 
 ```js
-import GridLayout from 'react-grid-layout';
+import GridLayout from "react-grid-layout";
 
 class MyFirstGrid extends React.Component {
   render() {
     // layout is an array of objects, see the demo for more complete usage
     const layout = [
-      {i: 'a', x: 0, y: 0, w: 1, h: 2, static: true},
-      {i: 'b', x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4},
-      {i: 'c', x: 4, y: 0, w: 1, h: 2}
+      { i: "a", x: 0, y: 0, w: 1, h: 2, static: true },
+      { i: "b", x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4 },
+      { i: "c", x: 4, y: 0, w: 1, h: 2 }
     ];
     return (
-      <GridLayout className="layout" layout={layout} cols={12} rowHeight={30} width={1200}>
+      <GridLayout
+        className="layout"
+        layout={layout}
+        cols={12}
+        rowHeight={30}
+        width={1200}
+      >
         <div key="a">a</div>
         <div key="b">b</div>
         <div key="c">c</div>
       </GridLayout>
-    )
+    );
   }
 }
 ```
@@ -151,17 +160,23 @@ class MyFirstGrid extends React.Component {
 You may also choose to set layout properties directly on the children:
 
 ```js
-import GridLayout from 'react-grid-layout';
+import GridLayout from "react-grid-layout";
 
 class MyFirstGrid extends React.Component {
   render() {
     return (
       <GridLayout className="layout" cols={12} rowHeight={30} width={1200}>
-        <div key="a" data-grid={{x: 0, y: 0, w: 1, h: 2, static: true}}>a</div>
-        <div key="b" data-grid={{x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4}}>b</div>
-        <div key="c" data-grid={{x: 4, y: 0, w: 1, h: 2}}>c</div>
+        <div key="a" data-grid={{ x: 0, y: 0, w: 1, h: 2, static: true }}>
+          a
+        </div>
+        <div key="b" data-grid={{ x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4 }}>
+          b
+        </div>
+        <div key="c" data-grid={{ x: 4, y: 0, w: 1, h: 2 }}>
+          c
+        </div>
       </GridLayout>
-    )
+    );
   }
 }
 ```
@@ -176,21 +191,24 @@ excludes `React`, so it must be otherwise available in your application, either
 To make RGL responsive, use the `<ResponsiveReactGridLayout>` element:
 
 ```js
-import { Responsive as ResponsiveGridLayout } from 'react-grid-layout';
+import { Responsive as ResponsiveGridLayout } from "react-grid-layout";
 
 class MyResponsiveGrid extends React.Component {
   render() {
     // {lg: layout1, md: layout2, ...}
     const layouts = getLayoutsFromSomewhere();
     return (
-      <ResponsiveGridLayout className="layout" layouts={layouts}
-        breakpoints={{lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0}}
-        cols={{lg: 12, md: 10, sm: 6, xs: 4, xxs: 2}}>
+      <ResponsiveGridLayout
+        className="layout"
+        layouts={layouts}
+        breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
+        cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
+      >
         <div key="1">1</div>
         <div key="2">2</div>
         <div key="3">3</div>
       </ResponsiveGridLayout>
-    )
+    );
   }
 }
 ```
@@ -213,7 +231,7 @@ positions on drag events. In simple cases a HOC `WidthProvider` can be used to a
 width upon initialization and window resize events.
 
 ```js
-import { Responsive, WidthProvider } from 'react-grid-layout';
+import { Responsive, WidthProvider } from "react-grid-layout";
 
 const ResponsiveGridLayout = WidthProvider(Responsive);
 
@@ -222,14 +240,17 @@ class MyResponsiveGrid extends React.Component {
     // {lg: layout1, md: layout2, ...}
     var layouts = getLayoutsFromSomewhere();
     return (
-      <ResponsiveGridLayout className="layout" layouts={layouts}
-        breakpoints={{lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0}}
-        cols={{lg: 12, md: 10, sm: 6, xs: 4, xxs: 2}}>
+      <ResponsiveGridLayout
+        className="layout"
+        layouts={layouts}
+        breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
+        cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
+      >
         <div key="1">1</div>
         <div key="2">2</div>
         <div key="3">3</div>
       </ResponsiveGridLayout>
-    )
+    );
   }
 }
 ```
@@ -266,6 +287,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.
@@ -315,9 +337,14 @@ 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.
+// If set, implies `preventCollision`.
+allowOverlap: ?boolean = false,
+
 // If true, grid items won't change position when being
-// dragged over.
-preventCollision: ?boolean = false;
+// dragged over. If `allowOverlap` is still false,
+// this simply won't allow one to drop on an existing object.
+preventCollision: ?boolean = false,
 
 // If true, droppable elements (with `draggable={true}` attribute)
 // can be dropped on the grid. It triggers "onDrop" callback
@@ -329,7 +356,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)
@@ -340,10 +367,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
-// See `handle` as used in https://github.com/react-grid-layout/react-resizable#props
-resizeHandle?: ReactElement<any> | ((resizeHandleAxis: ResizeHandleAxis, ref: ReactRef<HTMLElement>) => 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
@@ -358,7 +387,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,
@@ -372,12 +401,23 @@ 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">
+// Note that this type is React.Ref<HTMLDivElement> in TypeScript, Flow has a bug here
+// https://github.com/facebook/flow/issues/8671#issuecomment-862634865
+innerRef: {current: null | HTMLDivElement},
 ```
 
 ### Responsive Grid Layout Props
@@ -395,16 +435,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
@@ -475,7 +515,6 @@ will be draggable, even if the item is marked `static: true`.
 
 `<ReactGridLayout>` has [an optimized `shouldComponentUpdate` implementation](lib/ReactGridLayout.jsx), but it relies on the user memoizing the `children` array:
 
-
 ```js
 // lib/ReactGridLayout.jsx
 // ...
@@ -498,7 +537,7 @@ If you memoize your children, you can take advantage of this, and reap faster re
 function MyGrid(props) {
   const children = React.useMemo(() => {
     return new Array(props.count).fill(undefined).map((val, idx) => {
-      return <div key={idx} data-grid={{x: idx, y: 1, w: 1, h: 1}} />;
+      return <div key={idx} data-grid={{ x: idx, y: 1, w: 1, h: 1 }} />;
     });
   }, [props.count]);
   return <ReactGridLayout cols={12}>{children}</ReactGridLayout>;
@@ -507,11 +546,34 @@ 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.
 
-If you have a bug to report, please reproduce the bug in [CodeSandbox](https://codesandbox.io/s/5wy3rz5z1x?module=%2Fsrc%2FShowcaseLayout.js) to help
+If you have a bug to report, please reproduce the bug in [CodeSandbox](https://codesandbox.io/s/staging-bush-3lvt7?file=/src/ShowcaseLayout.js) to help
 us easily isolate it.
 
 ## TODO List
@@ -527,5 +589,5 @@ us easily isolate it.
 - [x] Static elements
 - [x] Persistent id per item for predictable localstorage restores, even when # items changes
 - [x] Min/max w/h per item
-- [ ] Resizable handles on other corners
+- [x] Resizable handles on other corners
 - [ ] Configurable w/h per breakpoint

package/build/GridItem.js

@@ -1,6 +1,6 @@
 "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); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -21,27 +21,27 @@ var _calculateUtils = require("./calculateUtils");
 
 var _ReactGridLayoutPropTypes = require("./ReactGridLayoutPropTypes");
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 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); 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; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
 
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } Object.defineProperty(subClass, "prototype", { value: Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }), writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
 
 function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 
 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; }
 
@@ -512,7 +512,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, {
+        className: (0, _clsx.default)("react-grid-item", child.props.className, this.props.className, {
           static: this.props.static,
           resizing: Boolean(this.state.resizing),
           "react-draggable": isDraggable,