From f8f4ca8fbc6ab7b83c1f85f8f588188e7051522a Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Tue, 30 Dec 2025 11:04:25 +0100 Subject: [PATCH] Update dependency react-resizable-panels to v4 (#22279) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Micha Reiser --- playground/package-lock.json | 16 +++--- playground/ruff/package.json | 2 +- playground/ruff/src/Editor/Editor.tsx | 39 ++++++++------ playground/ruff/src/Editor/SecondaryPanel.tsx | 28 ---------- playground/shared/package.json | 2 +- playground/shared/src/ResizeHandle.tsx | 6 +-- playground/ty/package.json | 2 +- playground/ty/src/Editor/Chrome.tsx | 52 +++++++++---------- playground/ty/src/Editor/SecondaryPanel.tsx | 4 +- 9 files changed, 64 insertions(+), 87 deletions(-) diff --git a/playground/package-lock.json b/playground/package-lock.json index 1860ad25af..3b4afe326e 100644 --- a/playground/package-lock.json +++ b/playground/package-lock.json @@ -5555,13 +5555,13 @@ "license": "MIT" }, "node_modules/react-resizable-panels": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/react-resizable-panels/-/react-resizable-panels-3.0.4.tgz", - "integrity": "sha512-8Y4KNgV94XhUvI2LeByyPIjoUJb71M/0hyhtzkHaqpVHs+ZQs8b627HmzyhmVYi3C9YP6R+XD1KmG7hHjEZXFQ==", + "version": "4.0.16", + "resolved": "https://registry.npmjs.org/react-resizable-panels/-/react-resizable-panels-4.0.16.tgz", + "integrity": "sha512-xhU02yogk3lD1f353oNAGm419pov2imCtxegHJN6FclXtGrfLglkl/h4K/RBHBxsGtR79lp12Zmz3Bbi/BoHpA==", "license": "MIT", "peerDependencies": { - "react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc", - "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" + "react": "^18.0.0 || ^19.0.0", + "react-dom": "^18.0.0 || ^19.0.0" } }, "node_modules/readdirp": { @@ -6798,7 +6798,7 @@ "monaco-editor": "^0.55.0", "react": "^19.0.0", "react-dom": "^19.0.0", - "react-resizable-panels": "^3.0.0", + "react-resizable-panels": "^4.0.0", "ruff_wasm": "file:ruff_wasm", "shared": "0.0.0", "smol-toml": "^1.3.0" @@ -6814,7 +6814,7 @@ "@monaco-editor/react": "^4.7.0", "classnames": "^2.3.2", "react": "^19.0.0", - "react-resizable-panels": "^3.0.0" + "react-resizable-panels": "^4.0.0" } }, "ty": { @@ -6828,7 +6828,7 @@ "pyodide": "^0.29.0", "react": "^19.0.0", "react-dom": "^19.0.0", - "react-resizable-panels": "^3.0.0", + "react-resizable-panels": "^4.0.0", "shared": "0.0.0", "smol-toml": "^1.3.1", "ty_wasm": "file:ty_wasm" diff --git a/playground/ruff/package.json b/playground/ruff/package.json index 39282e746a..ebae6503ca 100644 --- a/playground/ruff/package.json +++ b/playground/ruff/package.json @@ -21,7 +21,7 @@ "monaco-editor": "^0.55.0", "react": "^19.0.0", "react-dom": "^19.0.0", - "react-resizable-panels": "^3.0.0", + "react-resizable-panels": "^4.0.0", "ruff_wasm": "file:ruff_wasm", "shared": "0.0.0", "smol-toml": "^1.3.0" diff --git a/playground/ruff/src/Editor/Editor.tsx b/playground/ruff/src/Editor/Editor.tsx index 6aa707c533..2df8f4857b 100644 --- a/playground/ruff/src/Editor/Editor.tsx +++ b/playground/ruff/src/Editor/Editor.tsx @@ -5,7 +5,11 @@ import { useRef, useState, } from "react"; -import { Panel, PanelGroup } from "react-resizable-panels"; +import { + Panel, + Group as PanelGroup, + useDefaultLayout, +} from "react-resizable-panels"; import { Diagnostic, Workspace, PositionEncoding } from "ruff_wasm"; import { ErrorMessage, @@ -236,14 +240,25 @@ export default function Editor({ } }, [deferredSource, secondaryTool]); + const { defaultLayout, onLayoutChange } = useDefaultLayout({ + groupId: "main", + storage: localStorage, + }); + return ( <> - + setTab(tool)} selected={tab} /> - - - + + + - + - + -
- -
- - ); -} - -function Content({ - tool, - result, - theme, - selectionOffset, - onSourceByteRangeClicked, -}: { - tool: SecondaryTool; - result: SecondaryPanelResult; - theme: Theme; - selectionOffset: number | null; - onSourceByteRangeClicked(start: number, end: number): void; -}) { const [editor, setEditor] = useState(null); const [prevSelection, setPrevSelection] = useState(null); const [ranges, setRanges] = useState< diff --git a/playground/shared/package.json b/playground/shared/package.json index 50b86da136..7aaf977ceb 100644 --- a/playground/shared/package.json +++ b/playground/shared/package.json @@ -7,7 +7,7 @@ "@monaco-editor/react": "^4.7.0", "classnames": "^2.3.2", "react": "^19.0.0", - "react-resizable-panels": "^3.0.0" + "react-resizable-panels": "^4.0.0" }, "exports": "./src/index.ts" } diff --git a/playground/shared/src/ResizeHandle.tsx b/playground/shared/src/ResizeHandle.tsx index 6c983b93a2..c1b6111864 100644 --- a/playground/shared/src/ResizeHandle.tsx +++ b/playground/shared/src/ResizeHandle.tsx @@ -1,13 +1,13 @@ -import { PanelResizeHandle } from "react-resizable-panels"; +import { Separator } from "react-resizable-panels"; export function HorizontalResizeHandle() { return ( - + ); } export function VerticalResizeHandle() { return ( - + ); } diff --git a/playground/ty/package.json b/playground/ty/package.json index e246cee19d..35928577d5 100644 --- a/playground/ty/package.json +++ b/playground/ty/package.json @@ -22,7 +22,7 @@ "pyodide": "^0.29.0", "react": "^19.0.0", "react-dom": "^19.0.0", - "react-resizable-panels": "^3.0.0", + "react-resizable-panels": "^4.0.0", "shared": "0.0.0", "smol-toml": "^1.3.1", "ty_wasm": "file:ty_wasm" diff --git a/playground/ty/src/Editor/Chrome.tsx b/playground/ty/src/Editor/Chrome.tsx index 737228d5da..537eac11e1 100644 --- a/playground/ty/src/Editor/Chrome.tsx +++ b/playground/ty/src/Editor/Chrome.tsx @@ -14,7 +14,11 @@ import { VerticalResizeHandle, } from "shared"; import { FileHandle, Workspace } from "ty_wasm"; -import { Panel, PanelGroup } from "react-resizable-panels"; +import { + Panel, + Group as PanelGroup, + useDefaultLayout, +} from "react-resizable-panels"; import { Files, isPythonFile } from "./Files"; import SecondarySideBar from "./SecondarySideBar"; import SecondaryPanel, { @@ -159,6 +163,11 @@ export default function Chrome({ [workspace, files.index, onRemoveFile], ); + const { defaultLayout, onLayoutChange } = useDefaultLayout({ + groupId: "editor-diagnostics", + storage: localStorage, + }); + const checkResult = useCheckResult( files, workspace, @@ -179,19 +188,20 @@ export default function Chrome({ onSelect={onSelectFile} onRemove={handleRemoved} /> - - - - + + + + {files.currentVendoredFile != null && ( - + - + +
+
{result.error}