Update react deps + fix missing children error with react 18

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@repath-project/react-timeline-editor",
+  "name": "react-timeline-editor",
   "version": "0.1.10",
   "author": "xzdarcy",
   "license": "MIT",
@@ -27,29 +27,28 @@
     "prepublishOnly": "npm run build"
   },
   "files": [
-    "dist"
+    "src"
   ],
-  "main": "dist/index.js",
-  "module": "dist/index.esm.js",
-  "typings": "dist/index.d.ts",
+  "main": "src/index.tsx",
+  "types": "src/index.tsx",
   "peerDependencies": {
     "react": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "dependencies": {
     "@interactjs/types": "^1.10.11",
-    "@types/react-virtualized": "^9.21.14",
+    "@types/react-virtualized": "^9.22.0",
     "framework-utils": "^1.1.0",
     "interactjs": "^1.10.11",
-    "react-virtualized": "^9.22.3"
+    "react-virtualized": "workspace:*"
   },
   "devDependencies": {
     "@types/howler": "^2.2.4",
     "@types/lodash": "^4.14.177",
     "@types/react": "^17.0.17",
     "@types/react-dom": "^17.0.17",
     "@umijs/test": "^3.0.5",
-    "antd": "^4.16.13",
+    "antd": "^5.23.1",
     "dumi": "^1.0.17",
     "father-build": "^1.17.2",
     "gh-pages": "^3.0.0",
@@ -58,8 +57,8 @@
     "lodash": "^4.17.21",
     "lottie-web": "^5.8.1",
     "prettier": "^2.2.1",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "yorkie": "^2.0.0"
   }
-}
+}

src/components/row_rnd/interactable.tsx

@@ -2,15 +2,15 @@ import { DraggableOptions } from "@interactjs/actions/drag/plugin";
 import { ResizableOptions } from "@interactjs/actions/resize/plugin";
 import { DragEvent, Interactable } from "@interactjs/types";
 import interact from "interactjs";
-import { cloneElement, FC, ReactElement, useEffect, useRef } from "react";
+import { cloneElement, FC, ReactElement, useEffect, useRef, PropsWithChildren } from "react";
 
-export const InteractComp: FC<{
+export const InteractComp: FC<PropsWithChildren<{
   interactRef?: React.MutableRefObject<Interactable>;
   draggable: boolean;
   draggableOptions: DraggableOptions;
   resizable: boolean;
   resizableOptions: ResizableOptions;
-}> = ({ children, interactRef, draggable, resizable, draggableOptions, resizableOptions }) => {
+}>> = ({ children, interactRef, draggable, resizable, draggableOptions, resizableOptions }) => {
   const nodeRef = useRef<HTMLElement>();
   const interactable = useRef<Interactable>();
   const draggableOptionsRef = useRef<DraggableOptions>();
@@ -36,7 +36,7 @@ export const InteractComp: FC<{
         onmove: (e) => draggableOptionsRef.current.onmove && (draggableOptionsRef.current.onmove as (e: DragEvent) => any)(e),
         onend: (e) => draggableOptionsRef.current.onend && (draggableOptionsRef.current.onend as (e: DragEvent) => any)(e),
       });
-    if (resizable) interactable.current.resizable({ 
+    if (resizable) interactable.current.resizable({
       ...resizableOptionsRef.current,
       onstart: (e) => resizableOptionsRef.current.onstart && (resizableOptionsRef.current.onstart as (e: DragEvent) => any)(e),
       onmove: (e) => resizableOptionsRef.current.onmove && (resizableOptionsRef.current.onmove as (e: DragEvent) => any)(e),

src/components/timeline.less

@@ -1,8 +1,6 @@
 .timeline-editor {
-  height: 600px;
-  width: 600px;
 
-  min-height: 32px;
+  min-height: 80vh;
   position: relative;
   font-size: 12px;
   font-family: "PingFang SC";