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);