react-grid-layout 1.3.0 → 1.3.4

package/index.js

@@ -1,5 +1,7 @@
 module.exports = require("./build/ReactGridLayout").default;
 module.exports.utils = require("./build/utils");
-module.exports.Responsive = require("./build/ResponsiveReactGridLayout").default;
+module.exports.Responsive =
+  require("./build/ResponsiveReactGridLayout").default;
 module.exports.Responsive.utils = require("./build/responsiveUtils");
-module.exports.WidthProvider = require("./build/components/WidthProvider").default;
+module.exports.WidthProvider =
+  require("./build/components/WidthProvider").default;

package/lib/GridItem.jsx

@@ -16,7 +16,7 @@ import {
   resizeHandleAxesType,
   resizeHandleType
 } from "./ReactGridLayoutPropTypes";
-import classNames from "classnames";
+import clsx from "clsx";
 import type { Element as ReactElement, Node as ReactNode } from "react";
 
 import type {
@@ -381,8 +381,13 @@ export default class GridItem extends React.Component<Props, State> {
     const positionParams = this.getPositionParams();
 
     // This is the max possible width - doesn't go to infinity because of the width of the window
-    const maxWidth = calcGridItemPosition(positionParams, 0, 0, cols - x, 0)
-      .width;
+    const maxWidth = calcGridItemPosition(
+      positionParams,
+      0,
+      0,
+      cols - x,
+      0
+    ).width;
 
     // Calculate min/max constraints using our min & maxes
     const mins = calcGridItemPosition(positionParams, 0, 0, minW, minH);
@@ -396,7 +401,7 @@ export default class GridItem extends React.Component<Props, State> {
       <Resizable
         // These are opts for the resize handle itself
         draggableOpts={{
-          disabled: !isResizable,
+          disabled: !isResizable
         }}
         className={isResizable ? undefined : "react-resizable-hide"}
         width={position.width}
@@ -634,7 +639,7 @@ export default class GridItem extends React.Component<Props, State> {
     // Create the child element. We clone the existing element but modify its className and style.
     let newChild = React.cloneElement(child, {
       ref: this.elementRef,
-      className: classNames(
+      className: clsx(
         "react-grid-item",
         child.props.className,
         this.props.className,

package/lib/ReactGridLayout.jsx

@@ -2,7 +2,7 @@
 import * as React from "react";
 
 import isEqual from "lodash.isequal";
-import classNames from "classnames";
+import clsx from "clsx";
 import {
   bottom,
   childrenEqual,
@@ -252,7 +252,7 @@ export default class ReactGridLayout extends React.Component<Props, State> {
 
     this.setState({
       oldDragItem: cloneLayoutItem(l),
-      oldLayout: this.state.layout
+      oldLayout: layout
     });
 
     return this.props.onDragStart(layout, l, l, null, e, node);
@@ -274,7 +274,7 @@ export default class ReactGridLayout extends React.Component<Props, State> {
   ) => {
     const { oldDragItem } = this.state;
     let { layout } = this.state;
-    const { cols, allowOverlap } = this.props;
+    const { cols, allowOverlap, preventCollision } = this.props;
     const l = getLayoutItem(layout, i);
     if (!l) return;
 
@@ -296,7 +296,7 @@ export default class ReactGridLayout extends React.Component<Props, State> {
       x,
       y,
       isUserAction,
-      this.props.preventCollision,
+      preventCollision,
       compactType(this.props),
       cols,
       allowOverlap
@@ -659,7 +659,11 @@ export default class ReactGridLayout extends React.Component<Props, State> {
     const { layout } = this.state;
     // This is relative to the DOM element that this event fired for.
     const { layerX, layerY } = e.nativeEvent;
-    const droppingPosition = { left: layerX / transformScale, top: layerY / transformScale, e };
+    const droppingPosition = {
+      left: layerX / transformScale,
+      top: layerY / transformScale,
+      e
+    };
 
     if (!this.state.droppingDOMNode) {
       const positionParams: PositionParams = {
@@ -722,6 +726,7 @@ export default class ReactGridLayout extends React.Component<Props, State> {
 
   onDragLeave: EventHandler = e => {
     e.preventDefault(); // Prevent any browser native action
+    e.stopPropagation();
     this.dragEnterCounter--;
 
     // onDragLeave can be triggered on each layout's child.
@@ -736,11 +741,13 @@ export default class ReactGridLayout extends React.Component<Props, State> {
 
   onDragEnter: EventHandler = e => {
     e.preventDefault(); // Prevent any browser native action
+    e.stopPropagation();
     this.dragEnterCounter++;
   };
 
   onDrop: EventHandler = (e: Event) => {
     e.preventDefault(); // Prevent any browser native action
+    e.stopPropagation();
     const { droppingItem } = this.props;
     const { layout } = this.state;
     const item = layout.find(l => l.i === droppingItem.i);
@@ -756,7 +763,7 @@ export default class ReactGridLayout extends React.Component<Props, State> {
   render(): React.Element<"div"> {
     const { className, style, isDroppable, innerRef } = this.props;
 
-    const mergedClassName = classNames(layoutClassName, className);
+    const mergedClassName = clsx(layoutClassName, className);
     const mergedStyle = {
       height: this.containerHeight(),
       ...style

package/lib/components/WidthProvider.jsx

@@ -1,7 +1,7 @@
 // @flow
 import * as React from "react";
 import PropTypes from "prop-types";
-import classNames from "classnames";
+import clsx from "clsx";
 import type { ReactRef } from "../ReactGridLayoutPropTypes";
 
 type WPDefaultProps = {|
@@ -88,7 +88,7 @@ export default function WidthProvideRGL<Config>(
       if (measureBeforeMount && !this.mounted) {
         return (
           <div
-            className={classNames(this.props.className, layoutClassName)}
+            className={clsx(this.props.className, layoutClassName)}
             style={this.props.style}
             // $FlowIgnore ref types
             ref={this.elementRef}

package/lib/utils.js

@@ -469,16 +469,23 @@ export function moveElement(
   // $FlowIgnore acceptable modification of read-only array as it was recently cloned
   if (movingUp) sorted = sorted.reverse();
   const collisions = getAllCollisions(sorted, l);
-
-  // There was a collision; abort
-  if (preventCollision && collisions.length) {
-    if (!allowOverlap) {
-      log(`Collision prevented on ${l.i}, reverting.`);
-      l.x = oldX;
-      l.y = oldY;
-      l.moved = false;
-    }
-    return layout;
+  const hasCollisions = collisions.length > 0;
+
+  // We may have collisions. We can short-circuit if we've turned off collisions or
+  // allowed overlap.
+  if (hasCollisions && allowOverlap) {
+    // Easy, we don't need to resolve collisions. But we *did* change the layout,
+    // so clone it on the way out.
+    return cloneLayout(layout);
+  } else if (hasCollisions && preventCollision) {
+    // If we are preventing collision but not allowing overlap, we need to
+    // revert the position of this element so it goes to where it came from, rather
+    // than the user's desired location.
+    log(`Collision prevented on ${l.i}, reverting.`);
+    l.x = oldX;
+    l.y = oldY;
+    l.moved = false;
+    return layout; // did not change so don't clone
   }
 
   // Move each item that collides away from this element.
@@ -698,7 +705,7 @@ export function synchronizeLayoutWithChildren(
     } else {
       if (!isProduction && child.props._grid) {
         console.warn(
-          "`_grid` properties on children have been deprecated as of React 15.2. " + // eslint-disable-line
+          "`_grid` properties on children have been deprecated as of React 15.2. " +
             "Please use `data-grid` or add your properties directly to the `layout`."
         );
       }
@@ -714,13 +721,15 @@ export function synchronizeLayoutWithChildren(
       } else {
         // Nothing provided: ensure this is added to the bottom
         // FIXME clone not really necessary here
-        layout.push(cloneLayoutItem({
-          w: 1,
-          h: 1,
-          x: 0,
-          y: bottom(layout),
-          i: String(child.key)
-        }));
+        layout.push(
+          cloneLayoutItem({
+            w: 1,
+            h: 1,
+            x: 0,
+            y: bottom(layout),
+            i: String(child.key)
+          })
+        );
       }
     }
   });
@@ -761,20 +770,6 @@ export function validateLayout(
         );
       }
     }
-    if (item.i && typeof item.i !== "string") {
-      throw new Error(
-        "ReactGridLayout: " + contextName + "[" + i + "].i must be a string!"
-      );
-    }
-    if (item.static !== undefined && typeof item.static !== "boolean") {
-      throw new Error(
-        "ReactGridLayout: " +
-          contextName +
-          "[" +
-          i +
-          "].static must be a boolean!"
-      );
-    }
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-grid-layout",
-  "version": "1.3.0",
+  "version": "1.3.4",
   "description": "A draggable and resizable grid layout with responsive breakpoints, for React.",
   "main": "index.js",
   "scripts": {
@@ -12,7 +12,9 @@
     "dev": "make dev",
     "prepublishOnly": "make build",
     "validate": "npm ls",
-    "flow": "flow"
+    "flow": "flow",
+    "fmt": "prettier --write ./**.{json,js,yml,md}",
+    "fmt:check": "prettier --check ./**.{json,js,yml,md}"
   },
   "repository": {
     "type": "git",
@@ -35,41 +37,42 @@
   },
   "homepage": "https://github.com/STRML/react-grid-layout",
   "dependencies": {
-    "classnames": "2.3.1",
+    "clsx": "^1.1.1",
     "lodash.isequal": "^4.0.0",
-    "prop-types": "^15.0.0",
+    "prop-types": "^15.8.1",
     "react-draggable": "^4.0.0",
     "react-resizable": "^3.0.4"
   },
   "devDependencies": {
-    "@babel/cli": "^7.14.8",
-    "@babel/core": "^7.15.0",
-    "@babel/plugin-proposal-class-properties": "^7.14.5",
-    "@babel/plugin-transform-flow-comments": "^7.14.5",
-    "@babel/preset-env": "^7.15.0",
-    "@babel/preset-flow": "^7.14.5",
-    "@babel/preset-react": "^7.14.5",
-    "@babel/register": "^7.15.3",
-    "@webpack-cli/serve": "^1.5.2",
-    "babel-eslint": "^10.1.0",
-    "babel-jest": "^27.0.6",
+    "@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-plugin-preval": "^5.0.0",
-    "css-loader": "^6.2.0",
+    "babel-plugin-preval": "^5.1.0",
+    "css-loader": "^6.6.0",
     "ejs": "^3.1.6",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.6",
     "enzyme-to-json": "^3.6.2",
-    "eslint": "^7.32.0",
-    "eslint-plugin-flowtype": "^5.9.0",
-    "eslint-plugin-mocha": "^9.0.0",
-    "eslint-plugin-react": "^7.24.0",
+    "eslint": "^8.9.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",
-    "flow-bin": "^0.158.0",
+    "flow-bin": "^0.172.0",
     "husky": "^7.0.2",
     "imports-loader": "^3.0.0",
-    "jest": "^27.0.6",
-    "lint-staged": "^11.1.2",
+    "jest": "^27.5.1",
+    "lint-staged": "^12.3.4",
     "lodash": "^4.17.21",
     "opener": "^1.5.2",
     "prettier": "^2.3.2",
@@ -79,9 +82,9 @@
     "react-transform-hmr": "^1.0.2",
     "style-loader": "^3.2.1",
     "timsort": "^0.3.0",
-    "webpack": "^5.51.1",
-    "webpack-cli": "^4.8.0",
-    "webpack-dev-server": "^4.0.0"
+    "webpack": "^5.69.1",
+    "webpack-cli": "^4.9.2",
+    "webpack-dev-server": "^4.7.4"
   },
   "peerDependencies": {
     "react": ">= 16.3.0",
@@ -101,11 +104,20 @@
       "<rootDir>/test/spec/*.js"
     ],
     "testEnvironment": "jsdom",
-    "testURL": "http://localhost"
+    "testURL": "http://localhost",
+    "coverageThreshold": {
+      "global": {
+        "statements": 77,
+        "branches": 72,
+        "functions": 77,
+        "lines": 78
+      }
+    }
   },
   "lint-staged": {
     "*.{js,jsx,css}": [
-      "prettier --write"
+      "eslint --ext .js,.jsx --fix",
+      "yarn fmt"
     ]
   }
-}
+}

package/dist/react-grid-layout.min.js.LICENSE.txt

@@ -1,5 +0,0 @@
-/*!
-  Copyright (c) 2018 Jed Watson.
-  Licensed under the MIT License (MIT), see
-  http://jedwatson.github.io/classnames
-*/