react-grid-layout 1.3.4 → 1.4.0

package/lib/utils.js

@@ -1,5 +1,5 @@
 // @flow
-import isEqual from "lodash.isequal";
+import { deepEqual } from "fast-equals";
 import React from "react";
 import type {
   ChildrenArray as ReactChildrenArray,
@@ -47,7 +47,12 @@ export type GridDragEvent = {
   node: HTMLElement,
   newPosition: PartialPosition
 };
-export type GridResizeEvent = { e: Event, node: HTMLElement, size: Size };
+export type GridResizeEvent = {
+  e: Event,
+  node: HTMLElement,
+  size: Size,
+  handle: string
+};
 export type DragOverEvent = MouseEvent & {
   nativeEvent: {
     layerX: number,
@@ -158,9 +163,15 @@ export function cloneLayoutItem(layoutItem: LayoutItem): LayoutItem {
  * This will catch differences in keys, order, and length.
  */
 export function childrenEqual(a: ReactChildren, b: ReactChildren): boolean {
-  return isEqual(
-    React.Children.map(a, c => c?.key),
-    React.Children.map(b, c => c?.key)
+  return (
+    deepEqual(
+      React.Children.map(a, c => c?.key),
+      React.Children.map(b, c => c?.key)
+    ) &&
+    deepEqual(
+      React.Children.map(a, c => c?.props["data-grid"]),
+      React.Children.map(b, c => c?.props["data-grid"])
+    )
   );
 }
 
@@ -206,12 +217,14 @@ export function collides(l1: LayoutItem, l2: LayoutItem): boolean {
  * @param  {Array} layout Layout.
  * @param  {Boolean} verticalCompact Whether or not to compact the layout
  *   vertically.
+ * @param  {Boolean} allowOverlap When `true`, allows overlapping grid items.
  * @return {Array}       Compacted Layout.
  */
 export function compact(
   layout: Layout,
   compactType: CompactType,
-  cols: number
+  cols: number,
+  allowOverlap: ?boolean
 ): Layout {
   // Statics go in the compareWith array right away so items flow around them.
   const compareWith = getStatics(layout);
@@ -225,7 +238,7 @@ export function compact(
 
     // Don't move static elements
     if (!l.static) {
-      l = compactItem(compareWith, l, compactType, cols, sorted);
+      l = compactItem(compareWith, l, compactType, cols, sorted, allowOverlap);
 
       // Add to comparison array. We only collide with items before this one.
       // Statics are already in this array.
@@ -294,7 +307,8 @@ export function compactItem(
   l: LayoutItem,
   compactType: CompactType,
   cols: number,
-  fullLayout: Layout
+  fullLayout: Layout,
+  allowOverlap: ?boolean
 ): LayoutItem {
   const compactV = compactType === "vertical";
   const compactH = compactType === "horizontal";
@@ -316,7 +330,11 @@ export function compactItem(
 
   // Move it down, and keep moving it down if it's colliding.
   let collides;
-  while ((collides = getFirstCollision(compareWith, l))) {
+  // Checking the compactType null value to avoid breaking the layout when overlapping is allowed.
+  while (
+    (collides = getFirstCollision(compareWith, l)) &&
+    !(compactType === null && allowOverlap)
+  ) {
     if (compactH) {
       resolveCompactionCollision(fullLayout, l, collides.x + collides.w, "x");
     } else {
@@ -326,6 +344,10 @@ export function compactItem(
     if (compactH && l.x + l.w > cols) {
       l.x = cols - l.w;
       l.y++;
+      // ALso move element as left as we can
+      while (l.x > 0 && !getFirstCollision(compareWith, l)) {
+        l.x--;
+      }
     }
   }
 
@@ -541,7 +563,7 @@ export function moveElementAwayFromCollision(
 ): Layout {
   const compactH = compactType === "horizontal";
   // Compact vertically if not set to horizontal
-  const compactV = compactType !== "horizontal";
+  const compactV = compactType === "vertical";
   const preventCollision = collidesWith.static; // we're already colliding (not for static items)
 
   // If there is enough space above the collision to put this element, move it there.
@@ -560,8 +582,14 @@ export function moveElementAwayFromCollision(
       i: "-1"
     };
 
+    const firstCollision = getFirstCollision(layout, fakeItem);
+    const collisionNorth =
+      firstCollision && firstCollision.y + firstCollision.h > collidesWith.y;
+    const collisionWest =
+      firstCollision && collidesWith.x + collidesWith.w > firstCollision.x;
+
     // No collision? If so, we can go up there; otherwise, we'll end up moving down as normal
-    if (!getFirstCollision(layout, fakeItem)) {
+    if (!firstCollision) {
       log(
         `Doing reverse collision on ${itemToMove.i} up to [${fakeItem.x},${fakeItem.y}].`
       );
@@ -575,9 +603,42 @@ export function moveElementAwayFromCollision(
         compactType,
         cols
       );
+    } else if (collisionNorth && compactV) {
+      return moveElement(
+        layout,
+        itemToMove,
+        undefined,
+        collidesWith.y + 1,
+        isUserAction,
+        preventCollision,
+        compactType,
+        cols
+      );
+    } else if (collisionNorth && compactType == null) {
+      collidesWith.y = itemToMove.y;
+      itemToMove.y = itemToMove.y + itemToMove.h;
+
+      return layout;
+    } else if (collisionWest && compactH) {
+      return moveElement(
+        layout,
+        collidesWith,
+        itemToMove.x,
+        undefined,
+        isUserAction,
+        preventCollision,
+        compactType,
+        cols
+      );
     }
   }
 
+  const newX = compactH ? itemToMove.x + 1 : undefined;
+  const newY = compactV ? itemToMove.y + 1 : undefined;
+
+  if (newX == null && newY == null) {
+    return layout;
+  }
   return moveElement(
     layout,
     itemToMove,
@@ -698,19 +759,13 @@ export function synchronizeLayoutWithChildren(
     // Child may not exist
     if (child?.key == null) return;
 
-    // Don't overwrite if it already exists.
     const exists = getLayoutItem(initialLayout, String(child.key));
-    if (exists) {
+    const g = child.props["data-grid"];
+    // Don't overwrite the layout item if it's already in the initial layout.
+    // If it has a `data-grid` property, prefer that over what's in the layout.
+    if (exists && g == null) {
       layout.push(cloneLayoutItem(exists));
     } else {
-      if (!isProduction && child.props._grid) {
-        console.warn(
-          "`_grid` properties on children have been deprecated as of React 15.2. " +
-            "Please use `data-grid` or add your properties directly to the `layout`."
-        );
-      }
-      const g = child.props["data-grid"] || child.props._grid;
-
       // Hey, this item has a data-grid property, use it.
       if (g) {
         if (!isProduction) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-grid-layout",
-  "version": "1.3.4",
+  "version": "1.4.0",
   "description": "A draggable and resizable grid layout with responsive breakpoints, for React.",
   "main": "index.js",
   "scripts": {
@@ -37,54 +37,56 @@
   },
   "homepage": "https://github.com/STRML/react-grid-layout",
   "dependencies": {
-    "clsx": "^1.1.1",
-    "lodash.isequal": "^4.0.0",
+    "clsx": "^2.0.0",
+    "fast-equals": "^5.0.1",
     "prop-types": "^15.8.1",
-    "react-draggable": "^4.0.0",
-    "react-resizable": "^3.0.4"
+    "react-draggable": "^4.4.5",
+    "react-resizable": "^3.0.5",
+    "resize-observer-polyfill": "^1.5.1"
   },
   "devDependencies": {
-    "@babel/cli": "^7.17.3",
-    "@babel/core": "^7.17.5",
-    "@babel/eslint-parser": "^7.17.0",
-    "@babel/plugin-proposal-class-properties": "^7.16.7",
-    "@babel/plugin-transform-flow-comments": "^7.16.7",
-    "@babel/preset-env": "^7.16.11",
-    "@babel/preset-flow": "^7.16.7",
-    "@babel/preset-react": "^7.16.7",
-    "@babel/register": "^7.17.0",
-    "@webpack-cli/serve": "^1.6.1",
-    "babel-jest": "^27.5.1",
-    "babel-loader": "^8.2.2",
+    "@babel/cli": "^7.22.15",
+    "@babel/core": "^7.22.17",
+    "@babel/eslint-parser": "^7.22.15",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-transform-flow-comments": "^7.22.10",
+    "@babel/preset-env": "^7.22.15",
+    "@babel/preset-flow": "^7.22.15",
+    "@babel/preset-react": "^7.22.15",
+    "@babel/register": "^7.22.15",
+    "@webpack-cli/serve": "^2.0.5",
+    "babel-jest": "^29.6.4",
+    "babel-loader": "^9.1.3",
     "babel-plugin-preval": "^5.1.0",
-    "css-loader": "^6.6.0",
-    "ejs": "^3.1.6",
+    "css-loader": "^6.8.1",
+    "ejs": "^3.1.9",
     "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.6",
+    "enzyme-adapter-react-16": "^1.15.7",
     "enzyme-to-json": "^3.6.2",
-    "eslint": "^8.9.0",
+    "eslint": "^8.49.0",
     "eslint-plugin-flowtype": "^8.0.3",
-    "eslint-plugin-mocha": "^10.0.3",
-    "eslint-plugin-react": "^7.28.0",
-    "eslint-plugin-unicorn": "^41.0.0",
-    "exports-loader": "^3.0.0",
+    "eslint-plugin-mocha": "^10.1.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-unicorn": "^48.0.1",
+    "exports-loader": "^4.0.0",
     "flow-bin": "^0.172.0",
-    "husky": "^7.0.2",
-    "imports-loader": "^3.0.0",
-    "jest": "^27.5.1",
-    "lint-staged": "^12.3.4",
+    "husky": "^8.0.3",
+    "imports-loader": "^4.0.1",
+    "jest": "^29.6.4",
+    "jest-environment-jsdom": "^29.6.4",
+    "lint-staged": "^14.0.1",
     "lodash": "^4.17.21",
     "opener": "^1.5.2",
-    "prettier": "^2.3.2",
+    "prettier": "^3.0.3",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-hot-loader": "^4.13.0",
+    "react-hot-loader": "^4.13.1",
     "react-transform-hmr": "^1.0.2",
-    "style-loader": "^3.2.1",
+    "style-loader": "^3.3.3",
     "timsort": "^0.3.0",
-    "webpack": "^5.69.1",
-    "webpack-cli": "^4.9.2",
-    "webpack-dev-server": "^4.7.4"
+    "webpack": "^5.88.2",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1"
   },
   "peerDependencies": {
     "react": ">= 16.3.0",
@@ -104,7 +106,9 @@
       "<rootDir>/test/spec/*.js"
     ],
     "testEnvironment": "jsdom",
-    "testURL": "http://localhost",
+    "testEnvironmentOptions": {
+      "url": "http://localhost"
+    },
     "coverageThreshold": {
       "global": {
         "statements": 77,