diff --git a/packages/jdm-editor/package.json b/packages/jdm-editor/package.json index a9f0dd13..f2edc984 100644 --- a/packages/jdm-editor/package.json +++ b/packages/jdm-editor/package.json @@ -39,6 +39,7 @@ }, "dependencies": { "@ant-design/icons": "6.0.0", + "@ant-design/v5-patch-for-react-19": "1.0.3", "@codemirror/autocomplete": "^6.18.6", "@codemirror/commands": "^6.8.1", "@codemirror/language": "^6.11.0", @@ -54,7 +55,7 @@ "@monaco-editor/react": "^4.7.0", "@tanstack/react-table": "8.21.3", "@tanstack/react-virtual": "3.13.6", - "antd": "5.21.2", + "antd": "5.27.1", "clsx": "2.1.1", "dnd-core": "^16.0.1", "exceljs": "^4.4.0", @@ -73,7 +74,6 @@ "react-resizable-panels": "^2.1.7", "reactflow": "11.11.4", "to-json-schema": "^0.2.5", - "transition-hook": "^1.5.2", "ts-pattern": "^5.7.0", "use-debounce": "^10.0.4", "zod": "^3.24.2", @@ -96,13 +96,13 @@ "@trivago/prettier-plugin-sort-imports": "5.2.2", "@types/big.js": "^6.2.2", "@types/lodash": "^4.17.16", - "@types/react": "18.3.11", - "@types/react-dom": "19.1.2", + "@types/react": "19.1.11", + "@types/react-dom": "19.1.7", "@types/to-json-schema": "^0.2.4", "@vitejs/plugin-react-swc": "^3.8.1", "dayjs": "^1.11.13", - "react": "18.3.1", - "react-dom": "18.3.1", + "react": "19.1.1", + "react-dom": "19.1.1", "sass": "^1.86.3", "storybook": "8.6.12", "storybook-dark-mode": "^4.0.2", @@ -123,7 +123,8 @@ ] }, "peerDependencies": { - "react": ">= 18", - "react-dom": ">= 18" + "antd": ">= 5.22.6", + "react": ">= 19", + "react-dom": ">= 19" } } diff --git a/packages/jdm-editor/src/components/autosize-text-area.tsx b/packages/jdm-editor/src/components/autosize-text-area.tsx index bb2af754..3dcffae7 100644 --- a/packages/jdm-editor/src/components/autosize-text-area.tsx +++ b/packages/jdm-editor/src/components/autosize-text-area.tsx @@ -5,6 +5,7 @@ import { composeRefs } from '../helpers/compose-refs'; export type AutosizeTextAreaProps = { maxRows: number; + ref?: React.Ref; } & React.DetailedHTMLProps, HTMLTextAreaElement>; const recalculateRows = (node: HTMLTextAreaElement, maxRows: number) => { @@ -21,48 +22,54 @@ const recalculateRows = (node: HTMLTextAreaElement, maxRows: number) => { node.rows = Math.min(Math.max(calculatedRows, 1), maxRows); }; -export const AutosizeTextArea = React.forwardRef( - ({ maxRows, className, value, ...props }, ref) => { - const textareaRef = useRef(null); +export const AutosizeTextArea = ( + { + maxRows, + className, + value, + ref, + ...props + }: AutosizeTextAreaProps +) => { + const textareaRef = useRef(null); - useEffect(() => { - if (!textareaRef.current) { - return; - } + useEffect(() => { + if (!textareaRef.current) { + return; + } - recalculateRows(textareaRef.current, maxRows); - }, [value, maxRows]); + recalculateRows(textareaRef.current, maxRows); + }, [value, maxRows]); - useEffect(() => { - if (!textareaRef.current) { - return; - } + useEffect(() => { + if (!textareaRef.current) { + return; + } - const observerCallback: ResizeObserverCallback = (entries: ResizeObserverEntry[]) => { - window.requestAnimationFrame((): void | undefined => { - if (!Array.isArray(entries) || entries.length === 0) { - return; - } + const observerCallback: ResizeObserverCallback = (entries: ResizeObserverEntry[]) => { + window.requestAnimationFrame((): void | undefined => { + if (!Array.isArray(entries) || entries.length === 0) { + return; + } - recalculateRows(entries[0].target as HTMLTextAreaElement, maxRows); - }); - }; + recalculateRows(entries[0].target as HTMLTextAreaElement, maxRows); + }); + }; - const resizeObserver = new ResizeObserver(observerCallback); - resizeObserver.observe(textareaRef.current); + const resizeObserver = new ResizeObserver(observerCallback); + resizeObserver.observe(textareaRef.current); - return () => { - resizeObserver.disconnect(); - }; - }, [maxRows]); + return () => { + resizeObserver.disconnect(); + }; + }, [maxRows]); - return ( -