From f689c59f8710a94b3a9840ff8d6ecdfba1ba7d30 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <brian.david.vaughn@gmail.com>
Date: Sun, 24 Dec 2023 09:36:57 -0500
Subject: [PATCH] Fix regression that broke server rendering (#242)

Panels should fall back to `defaultSize` on initial render.

Fixes #240
---
 packages/react-resizable-panels/src/Panel.ts           |  2 +-
 packages/react-resizable-panels/src/PanelGroup.ts      |  3 ++-
 .../react-resizable-panels/src/PanelGroupContext.ts    |  5 ++++-
 .../src/utils/computePanelFlexBoxStyle.ts              | 10 +++++++---
 4 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/packages/react-resizable-panels/src/Panel.ts b/packages/react-resizable-panels/src/Panel.ts
index be9ba9d27..7670989a1 100644
--- a/packages/react-resizable-panels/src/Panel.ts
+++ b/packages/react-resizable-panels/src/Panel.ts
@@ -212,7 +212,7 @@ export function PanelWithForwardedRef({
     ]
   );
 
-  const style = getPanelStyle(panelDataRef.current);
+  const style = getPanelStyle(panelDataRef.current, defaultSize);
 
   return createElement(Type, {
     ...rest,
diff --git a/packages/react-resizable-panels/src/PanelGroup.ts b/packages/react-resizable-panels/src/PanelGroup.ts
index bcb08cc0b..07ff9e23f 100644
--- a/packages/react-resizable-panels/src/PanelGroup.ts
+++ b/packages/react-resizable-panels/src/PanelGroup.ts
@@ -435,12 +435,13 @@ function PanelGroupWithForwardedRef({
 
   // This API should never read from committedValuesRef
   const getPanelStyle = useCallback(
-    (panelData: PanelData) => {
+    (panelData: PanelData, defaultSize: number | undefined) => {
       const { panelDataArray } = eagerValuesRef.current;
 
       const panelIndex = findPanelDataIndex(panelDataArray, panelData);
 
       return computePanelFlexBoxStyle({
+        defaultSize,
         dragState,
         layout,
         panelData: panelDataArray,
diff --git a/packages/react-resizable-panels/src/PanelGroupContext.ts b/packages/react-resizable-panels/src/PanelGroupContext.ts
index 094061344..f27bc58ec 100644
--- a/packages/react-resizable-panels/src/PanelGroupContext.ts
+++ b/packages/react-resizable-panels/src/PanelGroupContext.ts
@@ -17,7 +17,10 @@ export const PanelGroupContext = createContext<{
   dragState: DragState | null;
   expandPanel: (panelData: PanelData) => void;
   getPanelSize: (panelData: PanelData) => number;
-  getPanelStyle: (panelData: PanelData) => CSSProperties;
+  getPanelStyle: (
+    panelData: PanelData,
+    defaultSize: number | undefined
+  ) => CSSProperties;
   groupId: string;
   isPanelCollapsed: (panelData: PanelData) => boolean;
   isPanelExpanded: (panelData: PanelData) => boolean;
diff --git a/packages/react-resizable-panels/src/utils/computePanelFlexBoxStyle.ts b/packages/react-resizable-panels/src/utils/computePanelFlexBoxStyle.ts
index 188ea722c..c48e2307c 100644
--- a/packages/react-resizable-panels/src/utils/computePanelFlexBoxStyle.ts
+++ b/packages/react-resizable-panels/src/utils/computePanelFlexBoxStyle.ts
@@ -6,12 +6,14 @@ import { CSSProperties } from "../vendor/react";
 
 // the % of the group's overall space this panel should occupy.
 export function computePanelFlexBoxStyle({
+  defaultSize,
   dragState,
   layout,
   panelData,
   panelIndex,
   precision = 3,
 }: {
+  defaultSize: number | undefined;
   layout: number[];
   dragState: DragState | null;
   panelData: PanelData[];
@@ -21,10 +23,12 @@ export function computePanelFlexBoxStyle({
   const size = layout[panelIndex];
 
   let flexGrow;
-  if (panelData.length === 1) {
-    flexGrow = "1";
-  } else if (size == null) {
+  if (size == null) {
     // Initial render (before panels have registered themselves)
+    // In order to support server rendering, fall back to default size if provided
+    flexGrow = defaultSize ?? "1";
+  } else if (panelData.length === 1) {
+    // Special case: Single panel group should always fill full width/height
     flexGrow = "1";
   } else {
     flexGrow = size.toPrecision(precision);