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 <micha@reiser.io>
2026-01-20 21:10:48 -05:00 · 2025-12-30 11:04:25 +01:00
parent 3d35dbd334
commit f8f4ca8fbc
9 changed files with 64 additions and 87 deletions
--- 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"
--- 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"
--- 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 (
    <>
-      <PanelGroup direction="horizontal" autoSaveId="main">
+      <PanelGroup
+        id="chrome"
+        orientation="horizontal"
+        defaultLayout={defaultLayout}
+        onLayoutChange={onLayoutChange}
+        className="flex-1"
+      >
        <PrimarySideBar onSelectTool={(tool) => setTab(tool)} selected={tab} />

-        <Panel id="main" order={0} minSize={10}>
-          <PanelGroup id="vertical" direction="vertical">
-            <Panel minSize={10} className="my-2" order={0}>
+        <Panel id="main" minSize={100}>
+          <PanelGroup id="vertical" orientation="vertical" className="h-full">
+            <Panel minSize={100} id="editor">
              <SourceEditor
                visible={tab === "Source"}
                source={source.pythonSource}
@@ -262,12 +277,7 @@ export default function Editor({
            {tab === "Source" && (
              <>
                <VerticalResizeHandle />
-                <Panel
-                  id="diagnostics"
-                  minSize={3}
-                  order={1}
-                  className="my-2 flex grow"
-                >
+                <Panel id="diagnostics" minSize={150} className="my-2">
                  <Diagnostics
                    diagnostics={checkResult.diagnostics}
                    onGoTo={handleGoTo}
@@ -281,12 +291,7 @@ export default function Editor({
        {secondaryTool != null && (
          <>
            <HorizontalResizeHandle />
-            <Panel
-              id="secondary-panel"
-              order={1}
-              className={"my-2"}
-              minSize={10}
-            >
+            <Panel id="secondary-panel" minSize={100}>
              <SecondaryPanel
                theme={theme}
                tool={secondaryTool}
--- a/playground/ruff/src/Editor/SecondaryPanel.tsx
+++ b/playground/ruff/src/Editor/SecondaryPanel.tsx
@@ -32,34 +32,6 @@ export default function SecondaryPanel({
  selectionOffset,
  onSourceByteRangeClicked,
 }: SecondaryPanelProps) {
-  return (
-    <div className="flex flex-col h-full">
-      <div className="grow">
-        <Content
-          tool={tool}
-          result={result}
-          theme={theme}
-          selectionOffset={selectionOffset}
-          onSourceByteRangeClicked={onSourceByteRangeClicked}
-        />
-      </div>
-    </div>
-  );
-}
-
-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<IStandaloneCodeEditor | null>(null);
  const [prevSelection, setPrevSelection] = useState<number | null>(null);
  const [ranges, setRanges] = useState<
--- 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"
 }
--- 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 (
-    <PanelResizeHandle className="cursor-ew-resize w-0.5 bg-gray-200 hover:bg-gray-300"></PanelResizeHandle>
+    <Separator className="cursor-ew-resize w-0.5 bg-gray-200 hover:bg-gray-300"></Separator>
  );
 }

 export function VerticalResizeHandle() {
  return (
-    <PanelResizeHandle className="cursor-eh-resize h-0.5 bg-gray-200 hover:bg-gray-300"></PanelResizeHandle>
+    <Separator className="cursor-eh-resize h-0.5 bg-gray-200 hover:bg-gray-300"></Separator>
  );
 }
--- 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"
--- 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}
          />
-          <PanelGroup direction="horizontal" autoSaveId="main">
-            <Panel
-              id="main"
-              order={0}
-              className={`flex flex-col gap-2 ${files.currentVendoredFile ? "mb-4" : "my-4"}`}
-              minSize={10}
-            >
-              <PanelGroup id="vertical" direction="vertical">
-                <Panel
-                  minSize={10}
-                  className={files.currentVendoredFile ? "mb-2" : "my-2"}
-                  order={0}
-                >
+          <PanelGroup
+            id="main-group"
+            orientation="horizontal"
+            className="h-full"
+          >
+            <Panel id="main" minSize={100}>
+              <PanelGroup
+                id="editor-diagnostics"
+                orientation="vertical"
+                className="h-full"
+                defaultLayout={defaultLayout}
+                onLayoutChange={onLayoutChange}
+              >
+                <Panel id="editor" minSize={100}>
                  {files.currentVendoredFile != null && (
                    <VendoredFileBanner
                      currentVendoredFile={files.currentVendoredFile}
@@ -231,12 +241,7 @@ export default function Chrome({
                  ) : null}
                </Panel>
                <VerticalResizeHandle />
-                <Panel
-                  id="diagnostics"
-                  minSize={3}
-                  order={1}
-                  className="my-2 flex grow"
-                >
+                <Panel id="diagnostics" minSize={150} className="my-2">
                  <Diagnostics
                    diagnostics={checkResult.diagnostics}
                    onGoTo={handleGoTo}
@@ -248,12 +253,7 @@ export default function Chrome({
            {secondaryTool != null && (
              <>
                <HorizontalResizeHandle />
-                <Panel
-                  id="secondary-panel"
-                  order={1}
-                  className={"my-2"}
-                  minSize={10}
-                >
+                <Panel id="secondary-panel" minSize={100}>
                  <SecondaryPanel
                    files={files}
                    theme={theme}
--- a/playground/ty/src/Editor/SecondaryPanel.tsx
+++ b/playground/ty/src/Editor/SecondaryPanel.tsx
@@ -75,7 +75,7 @@ function Content({
        }

        return (
-          <div className="flex-grow">
+          <div className="flex grow">
            <MonacoEditor
              options={{
                readOnly: true,
@@ -93,7 +93,7 @@ function Content({
        );
      case "error":
        return (
-          <div className="flex-grow">
+          <div className="flex grow">
            <code className="whitespace-pre-wrap text-gray-900 dark:text-gray-100">
              {result.error}
            </code>