Upgrade

.gitignore

@@ -1,5 +1,6 @@
 .DS_Store
 node_modules
+dist
 dist/*
 !dist/react-grid-layout.min*
 !dist/*.html

lib/GridItem.jsx

@@ -510,15 +510,15 @@ export default class GridItem extends React.Component<Props, State> {
       const { offsetParent } = node;
 
       if (offsetParent) {
-        const { margin, rowHeight, containerPadding } = this.props;
+        const { margin, rowHeight } = this.props;
         const bottomBoundary =
           offsetParent.clientHeight - calcGridItemWHPx(h, rowHeight, margin[1]);
-        top = clamp(top - containerPadding[1], 0, bottomBoundary);
+        top = clamp(top, 0, bottomBoundary);
 
         const colWidth = calcGridColWidth(positionParams);
         const rightBoundary =
           containerWidth - calcGridItemWHPx(w, colWidth, margin[0]);
-        left = clamp(left - containerPadding[0], 0, rightBoundary);
+        left = clamp(left, 0, rightBoundary);
       }
     }
 

lib/ResponsiveReactGridLayout.jsx

@@ -161,9 +161,9 @@ export default class ResponsiveReactGridLayout extends React.Component<
   };
 
   static defaultProps: DefaultProps = {
-    breakpoints: { lg: 1200, md: 996, sm: 768 },
-    cols: { lg: 12, md: 10, sm: 6 },
-    containerPadding: { lg: null, md: null, sm: null },
+    breakpoints: { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 },
+    cols: { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 },
+    containerPadding: { lg: null, md: null, sm: null, xs: null, xxs: null },
     layouts: {},
     margin: [10, 10],
     allowOverlap: false,

lib/responsiveUtils.js

@@ -5,7 +5,7 @@ import { cloneLayout, compact, correctBounds } from "./utils";
 import type { CompactType, Layout } from "./utils";
 
 export type Breakpoint = string;
-export type DefaultBreakpoints = "lg" | "md" | "sm";
+export type DefaultBreakpoints = "lg" | "md" | "sm" | "xs" | "xxs";
 
 // + indicates read-only
 export type ResponsiveLayout<T: Breakpoint> = {

lib/utils.js

@@ -239,6 +239,8 @@ export function compact(
 ): Layout {
   // Statics go in the compareWith array right away so items flow around them.
   const compareWith = getStatics(layout);
+  // We keep track of the bottom position.
+  let b = bottom(compareWith);
   // We go through the items by row and column.
   const sorted = sortLayoutItems(layout, compactType);
   // Holding for new items.
@@ -249,7 +251,8 @@ export function compact(
 
     // Don't move static elements
     if (!l.static) {
-      l = compactItem(compareWith, l, compactType, cols, sorted, allowOverlap);
+      l = compactItem(compareWith, l, compactType, cols, sorted, allowOverlap, b);
+      b = Math.max(b, l.y + l.h);
 
       // Add to comparison array. We only collide with items before this one.
       // Statics are already in this array.
@@ -319,15 +322,16 @@ export function compactItem(
   compactType: CompactType,
   cols: number,
   fullLayout: Layout,
-  allowOverlap: ?boolean
+  allowOverlap: ?boolean,
+  b: number
 ): LayoutItem {
   const compactV = compactType === "vertical";
   const compactH = compactType === "horizontal";
   if (compactV) {
     // Bottom 'y' possible is the bottom of the layout.
     // This allows you to do nice stuff like specify {y: Infinity}
     // This is here because the layout must be sorted in order to get the correct bottom `y`.
-    l.y = Math.min(bottom(compareWith), l.y);
+    l.y = Math.min(b, l.y);
     // Move the element up as far as it can go without colliding.
     while (l.y > 0 && !getFirstCollision(compareWith, l)) {
       l.y--;

test/examples/00-showcase.jsx

@@ -28,7 +28,7 @@ export default class ShowcaseLayout extends React.Component<Props, State> {
     className: "layout",
     rowHeight: 30,
     onLayoutChange: function() {},
-    cols: { lg: 12, md: 10, sm: 6 },
+    cols: { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 },
   };
 
   state: State = {

test/examples/06-dynamic-add-remove.jsx

@@ -9,7 +9,7 @@ const ResponsiveReactGridLayout = WidthProvider(Responsive);
 export default class AddRemoveLayout extends React.PureComponent {
   static defaultProps = {
     className: "layout",
-    cols: { lg: 12, md: 10, sm: 6 },
+    cols: { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 },
     rowHeight: 100
   };
 

test/examples/08-localstorage-responsive.jsx

@@ -19,7 +19,7 @@ export default class ResponsiveLocalStorageLayout extends React.PureComponent {
   static get defaultProps() {
     return {
       className: "layout",
-      cols: { lg: 12, md: 10, sm: 6 },
+      cols: { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 },
       rowHeight: 30
     };
   }
@@ -39,7 +39,7 @@ export default class ResponsiveLocalStorageLayout extends React.PureComponent {
         <button onClick={() => this.resetLayout()}>Reset Layout</button>
         <ResponsiveReactGridLayout
           className="layout"
-          cols={{ lg: 12, md: 10, sm: 6 }}
+          cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
           rowHeight={30}
           layouts={this.state.layouts}
           onLayoutChange={(layout, layouts) =>

test/examples/14-toolbox.jsx

@@ -39,7 +39,7 @@ export default class ToolboxLayout extends React.Component {
     className: "layout",
     rowHeight: 30,
     onLayoutChange: function() {},
-    cols: { lg: 12, md: 10, sm: 6 },
+    cols: { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 },
     initialLayout: generateLayout()
   };
 

test/examples/15-drag-from-outside.jsx

@@ -8,7 +8,7 @@ export default class DragFromOutsideLayout extends React.Component {
     className: "layout",
     rowHeight: 30,
     onLayoutChange: function() {},
-    cols: { lg: 12, md: 10, sm: 6 },
+    cols: { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 },
   };
 
   state = {

test/examples/17-responsive-bootstrap-style.jsx

@@ -13,7 +13,7 @@ export default class BootstrapStyleLayout extends React.PureComponent {
     items: 20,
     rowHeight: 30,
     onLayoutChange: function() {},
-    cols: {lg: 12, md: 12, sm: 12}
+    cols: {lg: 12, md: 12, sm: 12, xs: 12, xxs: 12}
   };
 
   state = {
@@ -36,7 +36,7 @@ export default class BootstrapStyleLayout extends React.PureComponent {
   // the viewport shrinks
   generateLayouts() {
     const times = [...Array(this.props.items)];
-    const widths = {lg: 3, md: 4, sm: 6};
+    const widths = {lg: 3, md: 4, sm: 6, xs: 12, xxs: 12};
     return Object.keys(widths).reduce((memo, breakpoint) => {
       const width = widths[breakpoint];
       const cols = this.props.cols[breakpoint];

test/examples/test_demo.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import RGL, { WidthProvider } from 'react-grid-layout';
+
+const ReactGridLayout = WidthProvider(RGL);
+
+
+export const IsBounded = ({ onDragStop }) => {
+
+  const layout = [
+    { i: '0', x: 0, y: 0, w: 1, h: 1 },
+    { i: '1', x: 1, y: 0, w: 1, h: 1 },
+  ]
+
+  return (
+    <ReactGridLayout
+      layout={layout}
+      isBounded={true}
+      onDragStop={onDragStop}
+    >
+      {
+        layout.map(ele => <div key={ele.i}>{ele.i}</div>)
+      }
+    </ReactGridLayout>
+  );
+};

test/spec/lifecycle-test.js

@@ -14,6 +14,40 @@ import DroppableLayout from "../examples/15-drag-from-outside";
 import ResizableLayout from "../examples/20-resizable-handles";
 import deepFreeze from "../util/deepFreeze";
 import { mount } from "enzyme";
+import { IsBounded } from "../examples/test_demo.jsx";
+
+function mouseMove(x, y, node) {
+  const doc = node ? node.ownerDocument : document;
+  const evt = doc.createEvent("MouseEvents");
+  // $FlowIgnore
+  evt.initMouseEvent(
+    "mousemove",
+    true,
+    true,
+    window,
+    0,
+    0,
+    0,
+    x,
+    y,
+    false,
+    false,
+    false,
+    false,
+    0,
+    null
+  );
+  doc.dispatchEvent(evt);
+  return evt;
+}
+function simulateMovementFromTo(drag, fromX, fromY, toX, toY) {
+  TestUtils.Simulate.mouseDown(drag, {
+    clientX: fromX,
+    clientY: fromY
+  });
+  mouseMove(toX, toY, drag);
+  TestUtils.Simulate.mouseUp(drag);
+}
 
 describe("Lifecycle tests", function () {
   // Example layouts use randomness
@@ -429,6 +463,22 @@ describe("Lifecycle tests", function () {
         });
       });
 
+      it("should transform output correctly when isBounded is true", () => {
+        let transform = "transform";
+
+        const wrapper = mount(
+          <IsBounded
+            onDragStop={(_, __, ___, ____, _____, element) => {
+              transform = element.style.transform;
+            }}
+          />
+        );
+        const Item = wrapper.find("GridItem").at(1);
+
+        simulateMovementFromTo(Item.getDOMNode(), 0, 0, 10, 0);
+        expect(transform).toBe("translate(10px,0px)");
+      });
+
       it("Allows customizing the droppable placeholder", function () {
         const wrapper = mount(
           <DroppableLayout onDropDragOver={() => ({ w: 2, h: 2 })} />

test/test-hook.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { createRoot } from "react-dom/client";
+import ReactDOM from "react-dom";
 import "style-loader!css-loader!../css/styles.css";
 import "style-loader!css-loader!../examples/util/example-styles.css";
 typeof window !== "undefined" && (window.React = React); // for devtools
@@ -44,8 +44,10 @@ export default function makeLayout(Layout) {
   function run() {
     const contentDiv = document.getElementById("content");
     const gridProps = window.gridProps || {};
-    const root = createRoot(contentDiv);
-    root.render(React.createElement(ListeningLayout, gridProps));
+    ReactDOM.render(
+      React.createElement(ListeningLayout, gridProps),
+      contentDiv
+    );
   }
   if (!document.getElementById("content")) {
     document.addEventListener("DOMContentLoaded", run);