chore(dev): upgrade devDeps and cleanup lock file (#216)

Author: STRML

.flowconfig

@@ -3,8 +3,7 @@
 
 [ignore]
 .*/node_modules/@babel.*
-.*/node_modules/express/.*
-.*/node_modules/serve-index/.*
+.*/node_modules/.*/malformed_package_json/.*
 <PROJECT_ROOT>/build/.*
 
 [include]

__tests__/Resizable.test.js

@@ -152,7 +152,7 @@ describe('render Resizable', () => {
       expect(props.onResize).not.toHaveBeenCalled();
       const seHandle = element.find('.react-resizable-handle-se').parent();
       seHandle.prop('onDrag')(mockEvent, { node, deltaX: 5, deltaY: 10 });
-      expect(props.onResize).lastCalledWith(
+      expect(props.onResize).toHaveBeenLastCalledWith(
         mockEvent,
         expect.objectContaining({
           size: {
@@ -169,7 +169,7 @@ describe('render Resizable', () => {
       const nwHandle = findHandle(element, 'nw');
       mockClientRect.top = -10; // Object moves between callbacks
       nwHandle.prop('onDrag')(mockEvent, { node, deltaX: 5, deltaY: 10 });
-      expect(props.onResize).lastCalledWith(
+      expect(props.onResize).toHaveBeenLastCalledWith(
         mockEvent,
         expect.objectContaining({
           size: {
@@ -181,7 +181,7 @@ describe('render Resizable', () => {
 
       mockClientRect.left = 20; // Object moves between callbacks
       nwHandle.prop('onDrag')(mockEvent, { node, deltaX: 5, deltaY: 10 });
-      expect(props.onResize).lastCalledWith(
+      expect(props.onResize).toHaveBeenLastCalledWith(
         mockEvent,
         expect.objectContaining({
           size: {
@@ -201,7 +201,7 @@ describe('render Resizable', () => {
       mockClientRect.top -= 10; // Object moves between callbacks
       const swHandle = findHandle(element, 'sw');
       swHandle.prop('onDrag')(mockEvent, { node, deltaX: 10, deltaY: 10 });
-      expect(props.onResize).lastCalledWith(
+      expect(props.onResize).toHaveBeenLastCalledWith(
         mockEvent,
         expect.objectContaining({
           size: {
@@ -215,7 +215,7 @@ describe('render Resizable', () => {
       mockClientRect.top -= 10; // Object moves between callbacks
       const neHandle = findHandle(element, 'ne');
       neHandle.prop('onDrag')(mockEvent, { node, deltaX: 10, deltaY: 10 });
-      expect(props.onResize).lastCalledWith(
+      expect(props.onResize).toHaveBeenLastCalledWith(
         mockEvent,
         expect.objectContaining({
           size: {
@@ -229,7 +229,7 @@ describe('render Resizable', () => {
       mockClientRect.top -= 10; // Object moves between callbacks
       const seHandle = element.find('DraggableCore').at(3);
       seHandle.prop('onDrag')(mockEvent, { node, deltaX: 10, deltaY: 10 });
-      expect(props.onResize).lastCalledWith(
+      expect(props.onResize).toHaveBeenLastCalledWith(
         mockEvent,
         expect.objectContaining({
           size: {
@@ -245,7 +245,7 @@ describe('render Resizable', () => {
       expect(props.onResize).not.toHaveBeenCalled();
       const nwHandle = findHandle(element, 'nw');
       nwHandle.prop('onDrag')(mockEvent, { node, deltaX: 5, deltaY: 10 });
-      expect(props.onResize).lastCalledWith(
+      expect(props.onResize).toHaveBeenLastCalledWith(
         mockEvent,
         expect.objectContaining({
           size: {
@@ -258,7 +258,7 @@ describe('render Resizable', () => {
 
       mockClientRect.left = 20; // Object moves between callbacks
       nwHandle.prop('onDrag')(mockEvent, { node, deltaX: 5, deltaY: 10 });
-      expect(props.onResize).lastCalledWith(
+      expect(props.onResize).toHaveBeenLastCalledWith(
         mockEvent,
         expect.objectContaining({
           size: {
@@ -274,7 +274,7 @@ describe('render Resizable', () => {
       expect(props.onResize).not.toHaveBeenCalled();
       const nwHandle = findHandle(element, 'nw');
       nwHandle.prop('onDrag')(mockEvent, { node, deltaX: 5, deltaY: 10 });
-      expect(props.onResize).lastCalledWith(
+      expect(props.onResize).toHaveBeenLastCalledWith(
         mockEvent,
         expect.objectContaining({
           size: {
@@ -294,7 +294,7 @@ describe('render Resizable', () => {
           expect(props.onResize).not.toHaveBeenCalled();
           const seHandle = findHandle(element, 'se');
           seHandle.prop('onDrag')(mockEvent, { node, deltaX: w, deltaY: h });
-          expect(props.onResize).lastCalledWith(
+          expect(props.onResize).toHaveBeenLastCalledWith(
             mockEvent,
             expect.objectContaining({
               size: {

__tests__/__snapshots__/Resizable.test.js.snap

@@ -4,7 +4,7 @@ exports[`render Resizable snapshot default props 1`] = `
 <div
   className="test-classname react-resizable"
   style={
-    Object {
+    {
       "height": "50px",
       "width": "50px",
     }

__tests__/__snapshots__/ResizableBox.test.js.snap

@@ -4,7 +4,7 @@ exports[`render ResizableBox snapshot default props 1`] = `
 <div
   className="react-resizable"
   style={
-    Object {
+    {
       "height": "50px",
       "width": "50px",
     }

examples/example.css

@@ -12,9 +12,9 @@
 }
 .scaledLayout {
   width: 125%;
-  left: -12.5%;
+  left: -12.5vw;
   transform: scale(0.75);
-  margin-top: -7.5%;
+  margin-top: -7.5vh;
 }
 
 .box {

package.json

@@ -33,33 +33,34 @@
   },
   "homepage": "https://github.com/react-grid-layout/react-resizable",
   "devDependencies": {
-    "@babel/cli": "^7.14.5",
-    "@babel/core": "^7.14.6",
-    "@babel/eslint-parser": "^7.14.5",
-    "@babel/plugin-proposal-class-properties": "^7.14.5",
-    "@babel/plugin-proposal-object-rest-spread": "^7.14.5",
-    "@babel/preset-env": "^7.14.5",
-    "@babel/preset-flow": "^7.14.5",
-    "@babel/preset-react": "^7.14.5",
-    "babel-loader": "^8.0.6",
+    "@babel/cli": "^7.21.0",
+    "@babel/core": "^7.21.3",
+    "@babel/eslint-parser": "^7.21.3",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-flow": "^7.18.6",
+    "@babel/preset-react": "^7.18.6",
+    "babel-loader": "^9.1.2",
     "cross-env": "^7.0.2",
-    "css-loader": "^5.2.6",
+    "css-loader": "^6.7.3",
     "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.4",
-    "eslint": "^7.28.0",
-    "eslint-plugin-jest": "^24.3.6",
-    "eslint-plugin-react": "^7.24.0",
+    "enzyme-adapter-react-16": "^1.15.7",
+    "eslint": "^8.36.0",
+    "eslint-plugin-jest": "^27.2.1",
+    "eslint-plugin-react": "^7.32.2",
     "flow-bin": "^0.153.0",
-    "jest": "^27.0.4",
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.5.0",
     "lodash": "^4.17.20",
     "pre-commit": "^1.1.2",
     "react": "^16.10.2",
     "react-dom": "^16.10.2",
     "react-test-renderer": "^16.11.0",
-    "style-loader": "^2.0.0",
-    "webpack": "^5.39.0",
-    "webpack-cli": "^4.7.2",
-    "webpack-dev-server": "^3.8.2"
+    "style-loader": "^3.3.2",
+    "webpack": "^5.76.2",
+    "webpack-cli": "^5.0.1",
+    "webpack-dev-server": "^4.13.1"
   },
   "dependencies": {
     "prop-types": "15.x",

webpack.config.js

@@ -43,7 +43,7 @@ module.exports = {
     extensions: [".js"]
   },
   devServer: {
-    contentBase: path.join(__dirname, 'examples'),
+    static: path.join(__dirname, 'examples'),
     compress: true,
     port: 4003,
     hot: true,