chore(pkg): update devDependencies

Author: STRML

.babelrc.js

@@ -13,7 +13,7 @@ module.exports = {
   ],
   "plugins": [
     "@babel/plugin-transform-flow-comments",
-    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-transform-class-properties",
     "transform-inline-environment-variables"
   ]
 }

.eslintrc

@@ -27,8 +27,8 @@
     // For Flow
     "ReactElement",
     "ReactClass",
-    "$Shape",
     "$Exact",
+    "Partial",
     "$Keys",
     "MouseTouchEvent",
   }

.flowconfig

@@ -1,11 +1,11 @@
 [ignore]
 <PROJECT_ROOT>/node_modules/webpack-cli.*
-<PROJECT_ROOT>/node_modules/resolve.*
+<PROJECT_ROOT>/node_modules/.*malformed_package_json.*
 
 [include]
 lib/
 index.js
 
 [options]
 sharedmemory.heap_size=3221225472
-exact_by_default=true
+exact_by_default=true

lib/Draggable.js

@@ -47,7 +47,7 @@ class Draggable extends React.Component<DraggableProps, DraggableState> {
 
   static displayName: ?string = 'Draggable';
 
-  static propTypes = {
+  static propTypes: DraggableProps = {
     // Accepts all props <DraggableCore> accepts.
     ...DraggableCore.propTypes,
 
@@ -179,7 +179,7 @@ class Draggable extends React.Component<DraggableProps, DraggableState> {
 
   // React 16.3+
   // Arity (props, state)
-  static getDerivedStateFromProps({position}: DraggableProps, {prevPropsPosition}: DraggableState): ?$Shape<DraggableState> {
+  static getDerivedStateFromProps({position}: DraggableProps, {prevPropsPosition}: DraggableState): ?Partial<DraggableState> {
     // Set x/y if a new position is provided in props that is different than the previous.
     if (
       position &&
@@ -262,9 +262,11 @@ class Draggable extends React.Component<DraggableProps, DraggableState> {
 
     const uiData = createDraggableData(this, coreData);
 
-    const newState: $Shape<DraggableState> = {
+    const newState = {
       x: uiData.x,
-      y: uiData.y
+      y: uiData.y,
+      slackX: 0,
+      slackY: 0,
     };
 
     // Keep within bounds.
@@ -310,7 +312,7 @@ class Draggable extends React.Component<DraggableProps, DraggableState> {
 
     log('Draggable: onDragStop: %j', coreData);
 
-    const newState: $Shape<DraggableState> = {
+    const newState: Partial<DraggableState> = {
       dragging: false,
       slackX: 0,
       slackY: 0

lib/DraggableCore.js

@@ -72,7 +72,7 @@ export default class DraggableCore extends React.Component<DraggableCoreProps> {
 
   static displayName: ?string = 'DraggableCore';
 
-  static propTypes = {
+  static propTypes: Object = {
     /**
      * `allowAnyClick` allows dragging using any mouse button.
      * By default, we only accept the left button.
@@ -81,6 +81,8 @@ export default class DraggableCore extends React.Component<DraggableCoreProps> {
      */
     allowAnyClick: PropTypes.bool,
 
+    children: PropTypes.node.isRequired,
+
     /**
      * `disabled`, if true, stops the <Draggable> from dragging. All handlers,
      * with the exception of `onMouseDown`, will not fire.

lib/utils/domFns.js

@@ -33,6 +33,7 @@ export function matchesSelectorAndParentsTo(el: Node, selector: string, baseNode
   do {
     if (matchesSelector(node, selector)) return true;
     if (node === baseNode) return false;
+    // $FlowIgnore[incompatible-type]
     node = node.parentNode;
   } while (node);
 

package.json

@@ -42,47 +42,48 @@
   },
   "homepage": "https://github.com/react-grid-layout/react-draggable",
   "devDependencies": {
-    "@babel/cli": "^7.17.6",
-    "@babel/core": "^7.17.9",
-    "@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",
-    "@types/react": "^17.0.19",
-    "@types/react-dom": "^17.0.9",
-    "assert": "^2.0.0",
-    "babel-loader": "^8.2.5",
-    "babel-plugin-transform-inline-environment-variables": "^0.4.3",
-    "eslint": "^8.14.0",
-    "eslint-plugin-react": "^7.29.4",
-    "flow-bin": "^0.176.3",
-    "jasmine-core": "^4.1.0",
-    "karma": "^6.3.19",
-    "karma-chrome-launcher": "^3.1.1",
+    "@babel/cli": "^7.23.0",
+    "@babel/core": "^7.23.0",
+    "@babel/eslint-parser": "^7.22.15",
+    "@babel/plugin-transform-class-properties": "^7.18.6",
+    "@babel/plugin-transform-flow-comments": "^7.22.10",
+    "@babel/preset-env": "^7.22.20",
+    "@babel/preset-flow": "^7.22.15",
+    "@babel/preset-react": "^7.22.15",
+    "@types/node": "^20.7.0",
+    "@types/react": "^18.2.23",
+    "@types/react-dom": "^18.2.8",
+    "assert": "^2.1.0",
+    "babel-loader": "^9.1.3",
+    "babel-plugin-transform-inline-environment-variables": "^0.4.4",
+    "eslint": "^8.50.0",
+    "eslint-plugin-react": "^7.33.2",
+    "flow-bin": "^0.217.0",
+    "jasmine-core": "^5.1.1",
+    "karma": "^6.4.2",
+    "karma-chrome-launcher": "^3.2.0",
     "karma-cli": "2.0.0",
     "karma-firefox-launcher": "^2.1.2",
     "karma-ie-launcher": "^1.0.0",
-    "karma-jasmine": "^5.0.0",
+    "karma-jasmine": "^5.1.0",
     "karma-phantomjs-launcher": "^1.0.4",
     "karma-phantomjs-shim": "^1.5.0",
     "karma-webpack": "^5.0.0",
     "lodash": "^4.17.4",
     "phantomjs-prebuilt": "^2.1.16",
     "pre-commit": "^1.2.2",
     "process": "^0.11.10",
-    "puppeteer": "^13.6.0",
+    "puppeteer": "^21.3.5",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-frame-component": "^5.2.1",
+    "react-frame-component": "^5.2.6",
     "react-test-renderer": "^16.13.1",
-    "semver": "^7.3.7",
+    "semver": "^7.5.4",
     "static-server": "^3.0.0",
-    "typescript": "^4.6.3",
-    "webpack": "^5.72.0",
-    "webpack-cli": "^4.9.2",
-    "webpack-dev-server": "^4.8.1"
+    "typescript": "^5.2.2",
+    "webpack": "^5.88.2",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1"
   },
   "resolutions": {
     "minimist": "^1.2.5"
@@ -99,4 +100,4 @@
     "react": ">= 16.3.0",
     "react-dom": ">= 16.3.0"
   }
-}
+}