Fix regression that broke server rendering (#242)

Panels should fall back to `defaultSize` on initial render. Fixes #240
bvaughn · Dec 24, 2023 · f689c59 · f689c59 · vercel · Dec 24, 2023
1 parent 2175180
commit f689c59
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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);