chore(dev): update devDeps

Author: STRML

.flowconfig

@@ -6,8 +6,5 @@ lib/
 index.js
 
 [options]
-esproposal.class_instance_fields=enable
-esproposal.class_static_fields=enable
 sharedmemory.heap_size=3221225472
-esproposal.optional_chaining=enable
 exact_by_default=true

lib/utils/domFns.js

@@ -42,6 +42,7 @@ export function matchesSelectorAndParentsTo(el: Node, selector: string, baseNode
 export function addEvent(el: ?Node, event: string, handler: Function, inputOptions?: Object): void {
   if (!el) return;
   const options = {capture: true, ...inputOptions};
+  // $FlowIgnore[method-unbinding]
   if (el.addEventListener) {
     el.addEventListener(event, handler, options);
   } else if (el.attachEvent) {
@@ -55,6 +56,7 @@ export function addEvent(el: ?Node, event: string, handler: Function, inputOptio
 export function removeEvent(el: ?Node, event: string, handler: Function, inputOptions?: Object): void {
   if (!el) return;
   const options = {capture: true, ...inputOptions};
+  // $FlowIgnore[method-unbinding]
   if (el.removeEventListener) {
     el.removeEventListener(event, handler, options);
   } else if (el.detachEvent) {
@@ -100,8 +102,12 @@ export function innerWidth(node: HTMLElement): number {
   return width;
 }
 
+interface EventWithOffset {
+  clientX: number, clientY: number
+}
+
 // Get from offsetParent
-export function offsetXYFromParent(evt: {clientX: number, clientY: number, ...}, offsetParent: HTMLElement, scale: number): ControlPosition {
+export function offsetXYFromParent(evt: EventWithOffset, offsetParent: HTMLElement, scale: number): ControlPosition {
   const isBody = offsetParent === offsetParent.ownerDocument.body;
   const offsetParentRect = isBody ? {left: 0, top: 0} : offsetParent.getBoundingClientRect();
 

lib/utils/shims.js

@@ -7,6 +7,7 @@ export function findInArray(array: Array<any> | TouchList, callback: Function):
 }
 
 export function isFunction(func: any): boolean %checks {
+  // $FlowIgnore[method-unbinding]
   return typeof func === 'function' || Object.prototype.toString.call(func) === '[object Function]';
 }
 

package.json

@@ -39,27 +39,27 @@
   },
   "homepage": "https://github.com/react-grid-layout/react-draggable",
   "devDependencies": {
-    "@babel/cli": "^7.13.10",
-    "@babel/core": "^7.13.10",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
-    "@babel/plugin-transform-flow-comments": "^7.8.3",
-    "@babel/preset-env": "^7.13.12",
-    "@babel/preset-flow": "^7.9.0",
-    "@babel/preset-react": "^7.9.4",
-    "@types/react": "^16.9.35",
-    "@types/react-dom": "^16.9.8",
+    "@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",
+    "@types/react": "^17.0.19",
+    "@types/react-dom": "^17.0.9",
     "assert": "^2.0.0",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.1.0",
     "babel-plugin-transform-inline-environment-variables": "^0.4.3",
-    "eslint": "^7.22.0",
-    "eslint-plugin-react": "^7.20.0",
-    "flow-bin": "^0.147.0",
-    "jasmine-core": "^3.7.1",
-    "karma": "^6.2.0",
+    "eslint": "^7.32.0",
+    "eslint-plugin-react": "^7.24.0",
+    "flow-bin": "^0.158.0",
+    "jasmine-core": "^3.9.0",
+    "karma": "^6.3.4",
     "karma-chrome-launcher": "^3.1.0",
     "karma-cli": "2.0.0",
-    "karma-firefox-launcher": "^2.1.0",
+    "karma-firefox-launcher": "^2.1.1",
     "karma-ie-launcher": "^1.0.0",
     "karma-jasmine": "^4.0.1",
     "karma-phantomjs-launcher": "^1.0.4",
@@ -69,17 +69,17 @@
     "phantomjs-prebuilt": "^2.1.16",
     "pre-commit": "^1.2.2",
     "process": "^0.11.10",
-    "puppeteer": "^3.1.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-frame-component": "^4.1.2",
     "react-test-renderer": "^16.13.1",
-    "semver": "^7.3.2",
+    "puppeteer": "^10.2.0",
+    "react-frame-component": "^5.1.0",
+    "semver": "^7.3.5",
     "static-server": "^3.0.0",
-    "typescript": "^3.9.3",
-    "webpack": "^5.27.2",
-    "webpack-cli": "^4.5.0",
-    "webpack-dev-server": "^3.11.0"
+    "typescript": "^4.3.5",
+    "webpack": "^5.51.1",
+    "webpack-cli": "^4.8.0",
+    "webpack-dev-server": "^4.0.0"
   },
   "resolutions": {
     "minimist": "^1.2.5"

specs/draggable.spec.jsx

@@ -457,9 +457,8 @@ describe('react-draggable', function () {
 
       setTimeout(function checkIframe() {
         const iframeDoc = ReactDOM.findDOMNode(frame).contentDocument;
-        if (!iframeDoc) return setTimeout(checkIframe, 50);
-        const body = iframeDoc.body;
-        const node = body.querySelector('.react-draggable');
+        if (!(iframeDoc && iframeDoc.body)) return setTimeout(checkIframe, 50);
+        const node = iframeDoc.body.querySelector('.react-draggable');
         if (!node) return setTimeout(checkIframe, 50);
         simulateMovementFromTo(node, 0, 0, 100, 100);
 

webpack.config.js

@@ -15,13 +15,18 @@ module.exports = (env, argv) => ({
     path: path.resolve(__dirname, 'build', 'web'),
 	},
   devServer: {
-    contentBase: '.',
     hot: true,
-    open: true,
-    inline: false,
-    openPage: 'example/index.html',
-    disableHostCheck: true,
-    writeToDisk: true,
+    open: 'example/index.html',
+    client: {
+      overlay: true,
+    },
+    devMiddleware: {
+      // disableHostCheck: true,
+      writeToDisk: true,
+    },
+    static: {
+      directory: '.',
+    }
   },
   devtool: 'source-map',
   externals: {