Merge pull request #5 from itsjavi/issue-3-react19

refactor: add React 19 compatibility

Author: zheksoon

examples/yarn.lock

@@ -35,6 +35,7 @@
     }
   },
   "scripts": {
+    "dev": "yarn build && cd ./examples && yarn dev",
     "build": "yarn build:core && yarn build:react",
     "build:core": "cd ./core && yarn && yarn build",
     "build:react": "cd ./react && yarn && yarn build"
@@ -68,5 +69,6 @@
   "devDependencies": {
     "vite": "^5.2.7",
     "vite-plugin-dts": "^3.8.1"
-  }
+  },
+  "packageManager": "yarn@1.22.22"
 }

package.json

@@ -161,15 +161,15 @@ export function useDraggable(config: DraggableConfig) {
   );
 
   const draggable = useCallback(
-    (child: React.ReactElement) => {
+    (child: React.ReactElement<React.ComponentPropsWithRef<any>>) => {
       if (!child) {
         return null;
       }
 
       const current = refs.current;
 
-      // @ts-ignore
-      current.originalRef = child.ref;
+      // @ts-ignore React 16-19+ refs compatibility.
+      current.originalRef = child.props?.ref ?? child.ref;
 
       const clone = React.cloneElement(child, { ref: componentRef });
 

react/src/useDraggable.tsx

@@ -94,16 +94,19 @@ export function useDroppable(config: DroppableConfig) {
     }
   }, []);
 
-  const droppable = useCallback((child: React.ReactElement | null) => {
-    if (!child) {
-      return null;
-    }
+  const droppable = useCallback(
+    (child: React.ReactElement<React.ComponentPropsWithRef<any>> | null) => {
+      if (!child) {
+        return null;
+      }
 
-    // @ts-ignore
-    originalRef.current = child.ref;
+      // @ts-ignore React 16-19+ refs compatibility.
+      originalRef.current = child.props?.ref ?? child.ref;
 
-    return React.cloneElement(child, { ref: dropComponentRef });
-  }, []);
+      return React.cloneElement(child, { ref: dropComponentRef });
+    },
+    []
+  );
 
   return {
     droppable,

react/src/useDroppable.tsx

@@ -1,6 +1,7 @@
 {
   "compilerOptions": {
     "baseUrl": ".",
+    "lib": ["ES2015", "DOM"],
     "strict": true,
     "moduleResolution": "node",
     "sourceMap": true,

react/tsconfig.json

@@ -2,17 +2,11 @@
 # yarn lockfile v1
 
 
-"@types/prop-types@*":
-  version "15.7.12"
-  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.12.tgz#12bb1e2be27293c1406acb6af1c3f3a1481d98c6"
-  integrity sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==
-
 "@types/react@>=16.8.0":
-  version "18.3.3"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.3.tgz#9679020895318b0915d7a3ab004d92d33375c45f"
-  integrity sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==
+  version "19.1.2"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-19.1.2.tgz#11df86f66f188f212c90ecb537327ec68bfd593f"
+  integrity sha512-oxLPMytKchWGbnQM9O7D67uPa9paTNxO7jVoNMXgkkErULBPhPARCfkKL9ytcIJJRGjbsVwW4ugJzyFFvm/Tiw==
   dependencies:
-    "@types/prop-types" "*"
     csstype "^3.0.2"
 
 csstype@^3.0.2:
@@ -22,5 +16,3 @@ csstype@^3.0.2:
 
 "snapdrag/core@file:../core":
   version "1.0.0"
-"snapdrag/core@file:../core":
-  version "1.0.0"