react-resizable-panels 1.0.3 → 1.0.5

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 1.0.5
+
+- Fix regression that broke server rendering (#240)
+
+## 1.0.4
+
+- Edge case bug fix for `isCollapsed` panel method
+
 ## 1.0.3
 
 - Remember most recently expanded panel size in local storage (#234)

package/README.md

@@ -26,26 +26,23 @@ import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 
 ### `PanelGroup`
 
-| prop                               | type                         | description                                                       |
-| :--------------------------------- | :--------------------------- | :---------------------------------------------------------------- |
-| `autoSaveId`                       | `?string`                    | Unique id used to auto-save group arrangement via `localStorage`  |
-| `children`                         | `ReactNode`                  | Arbitrary React element(s)                                        |
-| `className`                        | `?string`                    | Class name to attach to root element                              |
-| `direction`                        | `"horizontal" \| "vertical"` | Group orientation                                                 |
-| `disablePointerEventsDuringResize` | `?boolean = false`           | Disable pointer events inside `Panel`s during resize <sup>2</sup> |
-| `id`                               | `?string`                    | Group id; falls back to `useId` when not provided                 |
-| `onLayout`                         | `?(sizes: number[]) => void` | Called when group layout changes                                  |
-| `storage`                          | `?PanelGroupStorage`         | Custom storage API; defaults to `localStorage` <sup>1</sup>       |
-| `style`                            | `?CSSProperties`             | CSS style to attach to root element                               |
-| `tagName`                          | `?string = "div"`            | HTML element tag name for root element                            |
+| prop         | type                         | description                                                      |
+| :----------- | :--------------------------- | :--------------------------------------------------------------- |
+| `autoSaveId` | `?string`                    | Unique id used to auto-save group arrangement via `localStorage` |
+| `children`   | `ReactNode`                  | Arbitrary React element(s)                                       |
+| `className`  | `?string`                    | Class name to attach to root element                             |
+| `direction`  | `"horizontal" \| "vertical"` | Group orientation                                                |
+| `id`         | `?string`                    | Group id; falls back to `useId` when not provided                |
+| `onLayout`   | `?(sizes: number[]) => void` | Called when group layout changes                                 |
+| `storage`    | `?PanelGroupStorage`         | Custom storage API; defaults to `localStorage` <sup>1</sup>      |
+| `style`      | `?CSSProperties`             | CSS style to attach to root element                              |
+| `tagName`    | `?string = "div"`            | HTML element tag name for root element                           |
 
 <sup>1</sup>: Storage API must define the following _synchronous_ methods:
 
 - `getItem: (name:string) => string`
 - `setItem: (name: string, value: string) => void`
 
-<sup>2</sup>: This behavior is disabled by default because it can interfere with scrollbar styles, but it can be useful in the edge case where a `Panel` contains an `<iframe>`
-
 `PanelGroup` components also expose an imperative API for manual resizing:
 | method | description
 | :-------------------------------- | :---

package/dist/react-resizable-panels.browser.cjs.js

@@ -163,7 +163,7 @@ function PanelWithForwardedRef({
       resizePanel(panelDataRef.current, size);
     }
   }), [collapsePanel, expandPanel, getPanelSize, isPanelCollapsed, panelId, resizePanel]);
-  const style = getPanelStyle(panelDataRef.current);
+  const style = getPanelStyle(panelDataRef.current, defaultSize);
   return createElement(Type, {
     ...rest,
     children,
@@ -858,6 +858,7 @@ function compareLayouts(a, b) {
 
 // the % of the group's overall space this panel should occupy.
 function computePanelFlexBoxStyle({
+  defaultSize,
   dragState,
   layout,
   panelData,
@@ -866,10 +867,12 @@ 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 !== null && defaultSize !== void 0 ? 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);
@@ -1306,12 +1309,13 @@ function PanelGroupWithForwardedRef({
   }, []);
 
   // This API should never read from committedValuesRef
-  const getPanelStyle = useCallback(panelData => {
+  const getPanelStyle = useCallback((panelData, defaultSize) => {
     const {
       panelDataArray
     } = eagerValuesRef.current;
     const panelIndex = findPanelDataIndex(panelDataArray, panelData);
     return computePanelFlexBoxStyle({
+      defaultSize,
       dragState,
       layout,
       panelData: panelDataArray,
@@ -1326,7 +1330,7 @@ function PanelGroupWithForwardedRef({
       panelDataArray
     } = eagerValuesRef.current;
     const {
-      collapsedSize,
+      collapsedSize = 0,
       collapsible,
       panelSize
     } = panelDataHelper(panelDataArray, panelData, layout);

package/dist/react-resizable-panels.browser.development.cjs.js

@@ -169,7 +169,7 @@ function PanelWithForwardedRef({
       resizePanel(panelDataRef.current, size);
     }
   }), [collapsePanel, expandPanel, getPanelSize, isPanelCollapsed, panelId, resizePanel]);
-  const style = getPanelStyle(panelDataRef.current);
+  const style = getPanelStyle(panelDataRef.current, defaultSize);
   return createElement(Type, {
     ...rest,
     children,
@@ -874,6 +874,7 @@ function compareLayouts(a, b) {
 
 // the % of the group's overall space this panel should occupy.
 function computePanelFlexBoxStyle({
+  defaultSize,
   dragState,
   layout,
   panelData,
@@ -882,10 +883,12 @@ 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 !== null && defaultSize !== void 0 ? 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);
@@ -1411,12 +1414,13 @@ function PanelGroupWithForwardedRef({
   }, []);
 
   // This API should never read from committedValuesRef
-  const getPanelStyle = useCallback(panelData => {
+  const getPanelStyle = useCallback((panelData, defaultSize) => {
     const {
       panelDataArray
     } = eagerValuesRef.current;
     const panelIndex = findPanelDataIndex(panelDataArray, panelData);
     return computePanelFlexBoxStyle({
+      defaultSize,
       dragState,
       layout,
       panelData: panelDataArray,
@@ -1431,7 +1435,7 @@ function PanelGroupWithForwardedRef({
       panelDataArray
     } = eagerValuesRef.current;
     const {
-      collapsedSize,
+      collapsedSize = 0,
       collapsible,
       panelSize
     } = panelDataHelper(panelDataArray, panelData, layout);

package/dist/react-resizable-panels.browser.development.esm.js

@@ -145,7 +145,7 @@ function PanelWithForwardedRef({
       resizePanel(panelDataRef.current, size);
     }
   }), [collapsePanel, expandPanel, getPanelSize, isPanelCollapsed, panelId, resizePanel]);
-  const style = getPanelStyle(panelDataRef.current);
+  const style = getPanelStyle(panelDataRef.current, defaultSize);
   return createElement(Type, {
     ...rest,
     children,
@@ -850,6 +850,7 @@ function compareLayouts(a, b) {
 
 // the % of the group's overall space this panel should occupy.
 function computePanelFlexBoxStyle({
+  defaultSize,
   dragState,
   layout,
   panelData,
@@ -858,10 +859,12 @@ 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 !== null && defaultSize !== void 0 ? 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);
@@ -1387,12 +1390,13 @@ function PanelGroupWithForwardedRef({
   }, []);
 
   // This API should never read from committedValuesRef
-  const getPanelStyle = useCallback(panelData => {
+  const getPanelStyle = useCallback((panelData, defaultSize) => {
     const {
       panelDataArray
     } = eagerValuesRef.current;
     const panelIndex = findPanelDataIndex(panelDataArray, panelData);
     return computePanelFlexBoxStyle({
+      defaultSize,
       dragState,
       layout,
       panelData: panelDataArray,
@@ -1407,7 +1411,7 @@ function PanelGroupWithForwardedRef({
       panelDataArray
     } = eagerValuesRef.current;
     const {
-      collapsedSize,
+      collapsedSize = 0,
       collapsible,
       panelSize
     } = panelDataHelper(panelDataArray, panelData, layout);

package/dist/react-resizable-panels.browser.esm.js

@@ -139,7 +139,7 @@ function PanelWithForwardedRef({
       resizePanel(panelDataRef.current, size);
     }
   }), [collapsePanel, expandPanel, getPanelSize, isPanelCollapsed, panelId, resizePanel]);
-  const style = getPanelStyle(panelDataRef.current);
+  const style = getPanelStyle(panelDataRef.current, defaultSize);
   return createElement(Type, {
     ...rest,
     children,
@@ -834,6 +834,7 @@ function compareLayouts(a, b) {
 
 // the % of the group's overall space this panel should occupy.
 function computePanelFlexBoxStyle({
+  defaultSize,
   dragState,
   layout,
   panelData,
@@ -842,10 +843,12 @@ 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 !== null && defaultSize !== void 0 ? 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);
@@ -1282,12 +1285,13 @@ function PanelGroupWithForwardedRef({
   }, []);
 
   // This API should never read from committedValuesRef
-  const getPanelStyle = useCallback(panelData => {
+  const getPanelStyle = useCallback((panelData, defaultSize) => {
     const {
       panelDataArray
     } = eagerValuesRef.current;
     const panelIndex = findPanelDataIndex(panelDataArray, panelData);
     return computePanelFlexBoxStyle({
+      defaultSize,
       dragState,
       layout,
       panelData: panelDataArray,
@@ -1302,7 +1306,7 @@ function PanelGroupWithForwardedRef({
       panelDataArray
     } = eagerValuesRef.current;
     const {
-      collapsedSize,
+      collapsedSize = 0,
       collapsible,
       panelSize
     } = panelDataHelper(panelDataArray, panelData, layout);

package/dist/react-resizable-panels.cjs.js

@@ -165,7 +165,7 @@ function PanelWithForwardedRef({
       resizePanel(panelDataRef.current, size);
     }
   }), [collapsePanel, expandPanel, getPanelSize, isPanelCollapsed, panelId, resizePanel]);
-  const style = getPanelStyle(panelDataRef.current);
+  const style = getPanelStyle(panelDataRef.current, defaultSize);
   return createElement(Type, {
     ...rest,
     children,
@@ -860,6 +860,7 @@ function compareLayouts(a, b) {
 
 // the % of the group's overall space this panel should occupy.
 function computePanelFlexBoxStyle({
+  defaultSize,
   dragState,
   layout,
   panelData,
@@ -868,10 +869,12 @@ 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 !== null && defaultSize !== void 0 ? 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);
@@ -1308,12 +1311,13 @@ function PanelGroupWithForwardedRef({
   }, []);
 
   // This API should never read from committedValuesRef
-  const getPanelStyle = useCallback(panelData => {
+  const getPanelStyle = useCallback((panelData, defaultSize) => {
     const {
       panelDataArray
     } = eagerValuesRef.current;
     const panelIndex = findPanelDataIndex(panelDataArray, panelData);
     return computePanelFlexBoxStyle({
+      defaultSize,
       dragState,
       layout,
       panelData: panelDataArray,
@@ -1328,7 +1332,7 @@ function PanelGroupWithForwardedRef({
       panelDataArray
     } = eagerValuesRef.current;
     const {
-      collapsedSize,
+      collapsedSize = 0,
       collapsible,
       panelSize
     } = panelDataHelper(panelDataArray, panelData, layout);

package/dist/react-resizable-panels.development.cjs.js

@@ -176,7 +176,7 @@ function PanelWithForwardedRef({
       resizePanel(panelDataRef.current, size);
     }
   }), [collapsePanel, expandPanel, getPanelSize, isPanelCollapsed, panelId, resizePanel]);
-  const style = getPanelStyle(panelDataRef.current);
+  const style = getPanelStyle(panelDataRef.current, defaultSize);
   return createElement(Type, {
     ...rest,
     children,
@@ -881,6 +881,7 @@ function compareLayouts(a, b) {
 
 // the % of the group's overall space this panel should occupy.
 function computePanelFlexBoxStyle({
+  defaultSize,
   dragState,
   layout,
   panelData,
@@ -889,10 +890,12 @@ 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 !== null && defaultSize !== void 0 ? 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);
@@ -1418,12 +1421,13 @@ function PanelGroupWithForwardedRef({
   }, []);
 
   // This API should never read from committedValuesRef
-  const getPanelStyle = useCallback(panelData => {
+  const getPanelStyle = useCallback((panelData, defaultSize) => {
     const {
       panelDataArray
     } = eagerValuesRef.current;
     const panelIndex = findPanelDataIndex(panelDataArray, panelData);
     return computePanelFlexBoxStyle({
+      defaultSize,
       dragState,
       layout,
       panelData: panelDataArray,
@@ -1438,7 +1442,7 @@ function PanelGroupWithForwardedRef({
       panelDataArray
     } = eagerValuesRef.current;
     const {
-      collapsedSize,
+      collapsedSize = 0,
       collapsible,
       panelSize
     } = panelDataHelper(panelDataArray, panelData, layout);

package/dist/react-resizable-panels.development.esm.js

@@ -152,7 +152,7 @@ function PanelWithForwardedRef({
       resizePanel(panelDataRef.current, size);
     }
   }), [collapsePanel, expandPanel, getPanelSize, isPanelCollapsed, panelId, resizePanel]);
-  const style = getPanelStyle(panelDataRef.current);
+  const style = getPanelStyle(panelDataRef.current, defaultSize);
   return createElement(Type, {
     ...rest,
     children,
@@ -857,6 +857,7 @@ function compareLayouts(a, b) {
 
 // the % of the group's overall space this panel should occupy.
 function computePanelFlexBoxStyle({
+  defaultSize,
   dragState,
   layout,
   panelData,
@@ -865,10 +866,12 @@ 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 !== null && defaultSize !== void 0 ? 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);
@@ -1394,12 +1397,13 @@ function PanelGroupWithForwardedRef({
   }, []);
 
   // This API should never read from committedValuesRef
-  const getPanelStyle = useCallback(panelData => {
+  const getPanelStyle = useCallback((panelData, defaultSize) => {
     const {
       panelDataArray
     } = eagerValuesRef.current;
     const panelIndex = findPanelDataIndex(panelDataArray, panelData);
     return computePanelFlexBoxStyle({
+      defaultSize,
       dragState,
       layout,
       panelData: panelDataArray,
@@ -1414,7 +1418,7 @@ function PanelGroupWithForwardedRef({
       panelDataArray
     } = eagerValuesRef.current;
     const {
-      collapsedSize,
+      collapsedSize = 0,
       collapsible,
       panelSize
     } = panelDataHelper(panelDataArray, panelData, layout);

package/dist/react-resizable-panels.development.node.cjs.js

@@ -148,7 +148,7 @@ function PanelWithForwardedRef({
       resizePanel(panelDataRef.current, size);
     }
   }), [collapsePanel, expandPanel, getPanelSize, isPanelCollapsed, panelId, resizePanel]);
-  const style = getPanelStyle(panelDataRef.current);
+  const style = getPanelStyle(panelDataRef.current, defaultSize);
   return createElement(Type, {
     ...rest,
     children,
@@ -732,6 +732,7 @@ function compareLayouts(a, b) {
 
 // the % of the group's overall space this panel should occupy.
 function computePanelFlexBoxStyle({
+  defaultSize,
   dragState,
   layout,
   panelData,
@@ -740,10 +741,12 @@ 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 !== null && defaultSize !== void 0 ? 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);
@@ -1255,12 +1258,13 @@ function PanelGroupWithForwardedRef({
   }, []);
 
   // This API should never read from committedValuesRef
-  const getPanelStyle = useCallback(panelData => {
+  const getPanelStyle = useCallback((panelData, defaultSize) => {
     const {
       panelDataArray
     } = eagerValuesRef.current;
     const panelIndex = findPanelDataIndex(panelDataArray, panelData);
     return computePanelFlexBoxStyle({
+      defaultSize,
       dragState,
       layout,
       panelData: panelDataArray,
@@ -1275,7 +1279,7 @@ function PanelGroupWithForwardedRef({
       panelDataArray
     } = eagerValuesRef.current;
     const {
-      collapsedSize,
+      collapsedSize = 0,
       collapsible,
       panelSize
     } = panelDataHelper(panelDataArray, panelData, layout);

package/dist/react-resizable-panels.development.node.esm.js

@@ -124,7 +124,7 @@ function PanelWithForwardedRef({
       resizePanel(panelDataRef.current, size);
     }
   }), [collapsePanel, expandPanel, getPanelSize, isPanelCollapsed, panelId, resizePanel]);
-  const style = getPanelStyle(panelDataRef.current);
+  const style = getPanelStyle(panelDataRef.current, defaultSize);
   return createElement(Type, {
     ...rest,
     children,
@@ -708,6 +708,7 @@ function compareLayouts(a, b) {
 
 // the % of the group's overall space this panel should occupy.
 function computePanelFlexBoxStyle({
+  defaultSize,
   dragState,
   layout,
   panelData,
@@ -716,10 +717,12 @@ 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 !== null && defaultSize !== void 0 ? 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);
@@ -1231,12 +1234,13 @@ function PanelGroupWithForwardedRef({
   }, []);
 
   // This API should never read from committedValuesRef
-  const getPanelStyle = useCallback(panelData => {
+  const getPanelStyle = useCallback((panelData, defaultSize) => {
     const {
       panelDataArray
     } = eagerValuesRef.current;
     const panelIndex = findPanelDataIndex(panelDataArray, panelData);
     return computePanelFlexBoxStyle({
+      defaultSize,
       dragState,
       layout,
       panelData: panelDataArray,
@@ -1251,7 +1255,7 @@ function PanelGroupWithForwardedRef({
       panelDataArray
     } = eagerValuesRef.current;
     const {
-      collapsedSize,
+      collapsedSize = 0,
       collapsible,
       panelSize
     } = panelDataHelper(panelDataArray, panelData, layout);

package/dist/react-resizable-panels.esm.js

@@ -141,7 +141,7 @@ function PanelWithForwardedRef({
       resizePanel(panelDataRef.current, size);
     }
   }), [collapsePanel, expandPanel, getPanelSize, isPanelCollapsed, panelId, resizePanel]);
-  const style = getPanelStyle(panelDataRef.current);
+  const style = getPanelStyle(panelDataRef.current, defaultSize);
   return createElement(Type, {
     ...rest,
     children,
@@ -836,6 +836,7 @@ function compareLayouts(a, b) {
 
 // the % of the group's overall space this panel should occupy.
 function computePanelFlexBoxStyle({
+  defaultSize,
   dragState,
   layout,
   panelData,
@@ -844,10 +845,12 @@ 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 !== null && defaultSize !== void 0 ? 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);
@@ -1284,12 +1287,13 @@ function PanelGroupWithForwardedRef({
   }, []);
 
   // This API should never read from committedValuesRef
-  const getPanelStyle = useCallback(panelData => {
+  const getPanelStyle = useCallback((panelData, defaultSize) => {
     const {
       panelDataArray
     } = eagerValuesRef.current;
     const panelIndex = findPanelDataIndex(panelDataArray, panelData);
     return computePanelFlexBoxStyle({
+      defaultSize,
       dragState,
       layout,
       panelData: panelDataArray,
@@ -1304,7 +1308,7 @@ function PanelGroupWithForwardedRef({
       panelDataArray
     } = eagerValuesRef.current;
     const {
-      collapsedSize,
+      collapsedSize = 0,
       collapsible,
       panelSize
     } = panelDataHelper(panelDataArray, panelData, layout);

package/dist/react-resizable-panels.node.cjs.js

@@ -137,7 +137,7 @@ function PanelWithForwardedRef({
       resizePanel(panelDataRef.current, size);
     }
   }), [collapsePanel, expandPanel, getPanelSize, isPanelCollapsed, panelId, resizePanel]);
-  const style = getPanelStyle(panelDataRef.current);
+  const style = getPanelStyle(panelDataRef.current, defaultSize);
   return createElement(Type, {
     ...rest,
     children,
@@ -721,6 +721,7 @@ function compareLayouts(a, b) {
 
 // the % of the group's overall space this panel should occupy.
 function computePanelFlexBoxStyle({
+  defaultSize,
   dragState,
   layout,
   panelData,
@@ -729,10 +730,12 @@ 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 !== null && defaultSize !== void 0 ? 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);
@@ -1155,12 +1158,13 @@ function PanelGroupWithForwardedRef({
   }, []);
 
   // This API should never read from committedValuesRef
-  const getPanelStyle = useCallback(panelData => {
+  const getPanelStyle = useCallback((panelData, defaultSize) => {
     const {
       panelDataArray
     } = eagerValuesRef.current;
     const panelIndex = findPanelDataIndex(panelDataArray, panelData);
     return computePanelFlexBoxStyle({
+      defaultSize,
       dragState,
       layout,
       panelData: panelDataArray,
@@ -1175,7 +1179,7 @@ function PanelGroupWithForwardedRef({
       panelDataArray
     } = eagerValuesRef.current;
     const {
-      collapsedSize,
+      collapsedSize = 0,
       collapsible,
       panelSize
     } = panelDataHelper(panelDataArray, panelData, layout);

package/dist/react-resizable-panels.node.esm.js

@@ -113,7 +113,7 @@ function PanelWithForwardedRef({
       resizePanel(panelDataRef.current, size);
     }
   }), [collapsePanel, expandPanel, getPanelSize, isPanelCollapsed, panelId, resizePanel]);
-  const style = getPanelStyle(panelDataRef.current);
+  const style = getPanelStyle(panelDataRef.current, defaultSize);
   return createElement(Type, {
     ...rest,
     children,
@@ -697,6 +697,7 @@ function compareLayouts(a, b) {
 
 // the % of the group's overall space this panel should occupy.
 function computePanelFlexBoxStyle({
+  defaultSize,
   dragState,
   layout,
   panelData,
@@ -705,10 +706,12 @@ 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 !== null && defaultSize !== void 0 ? 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);
@@ -1131,12 +1134,13 @@ function PanelGroupWithForwardedRef({
   }, []);
 
   // This API should never read from committedValuesRef
-  const getPanelStyle = useCallback(panelData => {
+  const getPanelStyle = useCallback((panelData, defaultSize) => {
     const {
       panelDataArray
     } = eagerValuesRef.current;
     const panelIndex = findPanelDataIndex(panelDataArray, panelData);
     return computePanelFlexBoxStyle({
+      defaultSize,
       dragState,
       layout,
       panelData: panelDataArray,
@@ -1151,7 +1155,7 @@ function PanelGroupWithForwardedRef({
       panelDataArray
     } = eagerValuesRef.current;
     const {
-      collapsedSize,
+      collapsedSize = 0,
       collapsible,
       panelSize
     } = panelDataHelper(panelDataArray, panelData, layout);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-resizable-panels",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "React components for resizable panel groups/layouts",
   "author": "Brian Vaughn <brian.david.vaughn@gmail.com>",
   "license": "MIT",

package/src/Panel.test.tsx

@@ -89,13 +89,19 @@ describe("PanelGroup", () => {
         assert(mostRecentLayout);
 
         verifyExpandedPanelGroupLayout(mostRecentLayout, [50, 50]);
+        expect(leftPanelRef.current?.isCollapsed()).toBe(false);
+        expect(rightPanelRef.current?.isCollapsed()).toBe(false);
         act(() => {
           leftPanelRef.current?.collapse();
         });
+        expect(leftPanelRef.current?.isCollapsed()).toBe(true);
+        expect(rightPanelRef.current?.isCollapsed()).toBe(false);
         verifyExpandedPanelGroupLayout(mostRecentLayout, [0, 100]);
         act(() => {
           leftPanelRef.current?.expand();
         });
+        expect(leftPanelRef.current?.isCollapsed()).toBe(false);
+        expect(rightPanelRef.current?.isCollapsed()).toBe(false);
         verifyExpandedPanelGroupLayout(mostRecentLayout, [50, 50]);
       });
 
@@ -103,14 +109,20 @@ describe("PanelGroup", () => {
         assert(mostRecentLayout);
 
         verifyExpandedPanelGroupLayout(mostRecentLayout, [50, 50]);
+        expect(leftPanelRef.current?.isCollapsed()).toBe(false);
+        expect(rightPanelRef.current?.isCollapsed()).toBe(false);
         act(() => {
           rightPanelRef.current?.collapse();
         });
         verifyExpandedPanelGroupLayout(mostRecentLayout, [100, 0]);
+        expect(leftPanelRef.current?.isCollapsed()).toBe(false);
+        expect(rightPanelRef.current?.isCollapsed()).toBe(true);
         act(() => {
           rightPanelRef.current?.expand();
         });
         verifyExpandedPanelGroupLayout(mostRecentLayout, [50, 50]);
+        expect(leftPanelRef.current?.isCollapsed()).toBe(false);
+        expect(rightPanelRef.current?.isCollapsed()).toBe(false);
       });
 
       it("should re-expand to the most recent size before collapsing", () => {

package/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,

package/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,
@@ -454,11 +455,11 @@ function PanelGroupWithForwardedRef({
   const isPanelCollapsed = useCallback((panelData: PanelData) => {
     const { layout, panelDataArray } = eagerValuesRef.current;
 
-    const { collapsedSize, collapsible, panelSize } = panelDataHelper(
-      panelDataArray,
-      panelData,
-      layout
-    );
+    const {
+      collapsedSize = 0,
+      collapsible,
+      panelSize,
+    } = panelDataHelper(panelDataArray, panelData, layout);
 
     return collapsible === true && panelSize === collapsedSize;
   }, []);

package/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;

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