react-resizable-panels 1.0.4 → 1.0.6

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,
@@ -1795,4 +1799,52 @@ function PanelResizeHandle({
 }
 PanelResizeHandle.displayName = "PanelResizeHandle";
 
-export { Panel, PanelGroup, PanelResizeHandle, assert };
+function calculateAvailablePanelSizeInPixels(groupId) {
+  const panelGroupElement = getPanelGroupElement(groupId);
+  if (panelGroupElement == null) {
+    return NaN;
+  }
+  const direction = panelGroupElement.getAttribute("data-panel-group-direction");
+  const resizeHandles = getResizeHandleElementsForGroup(groupId);
+  if (direction === "horizontal") {
+    return panelGroupElement.offsetWidth - resizeHandles.reduce((accumulated, handle) => {
+      return accumulated + handle.offsetWidth;
+    }, 0);
+  } else {
+    return panelGroupElement.offsetHeight - resizeHandles.reduce((accumulated, handle) => {
+      return accumulated + handle.offsetHeight;
+    }, 0);
+  }
+}
+
+function getAvailableGroupSizePixels(groupId) {
+  const panelGroupElement = getPanelGroupElement(groupId);
+  if (panelGroupElement == null) {
+    return NaN;
+  }
+  const direction = panelGroupElement.getAttribute("data-panel-group-direction");
+  const resizeHandles = getResizeHandleElementsForGroup(groupId);
+  if (direction === "horizontal") {
+    return panelGroupElement.offsetWidth - resizeHandles.reduce((accumulated, handle) => {
+      return accumulated + handle.offsetWidth;
+    }, 0);
+  } else {
+    return panelGroupElement.offsetHeight - resizeHandles.reduce((accumulated, handle) => {
+      return accumulated + handle.offsetHeight;
+    }, 0);
+  }
+}
+
+function getPanelElement(id) {
+  const element = document.querySelector(`[data-panel-id="${id}"]`);
+  if (element) {
+    return element;
+  }
+  return null;
+}
+
+function getPanelElementsForGroup(groupId) {
+  return Array.from(document.querySelectorAll(`[data-panel][data-panel-group-id="${groupId}"]`));
+}
+
+export { Panel, PanelGroup, PanelResizeHandle, assert, calculateAvailablePanelSizeInPixels, getAvailableGroupSizePixels, getPanelElement, getPanelElementsForGroup, getPanelGroupElement, getResizeHandleElement, getResizeHandleElementIndex, getResizeHandleElementsForGroup, getResizeHandlePanelIds };

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,
@@ -1821,7 +1825,64 @@ function PanelResizeHandle({
 }
 PanelResizeHandle.displayName = "PanelResizeHandle";
 
+function calculateAvailablePanelSizeInPixels(groupId) {
+  const panelGroupElement = getPanelGroupElement(groupId);
+  if (panelGroupElement == null) {
+    return NaN;
+  }
+  const direction = panelGroupElement.getAttribute("data-panel-group-direction");
+  const resizeHandles = getResizeHandleElementsForGroup(groupId);
+  if (direction === "horizontal") {
+    return panelGroupElement.offsetWidth - resizeHandles.reduce((accumulated, handle) => {
+      return accumulated + handle.offsetWidth;
+    }, 0);
+  } else {
+    return panelGroupElement.offsetHeight - resizeHandles.reduce((accumulated, handle) => {
+      return accumulated + handle.offsetHeight;
+    }, 0);
+  }
+}
+
+function getAvailableGroupSizePixels(groupId) {
+  const panelGroupElement = getPanelGroupElement(groupId);
+  if (panelGroupElement == null) {
+    return NaN;
+  }
+  const direction = panelGroupElement.getAttribute("data-panel-group-direction");
+  const resizeHandles = getResizeHandleElementsForGroup(groupId);
+  if (direction === "horizontal") {
+    return panelGroupElement.offsetWidth - resizeHandles.reduce((accumulated, handle) => {
+      return accumulated + handle.offsetWidth;
+    }, 0);
+  } else {
+    return panelGroupElement.offsetHeight - resizeHandles.reduce((accumulated, handle) => {
+      return accumulated + handle.offsetHeight;
+    }, 0);
+  }
+}
+
+function getPanelElement(id) {
+  const element = document.querySelector(`[data-panel-id="${id}"]`);
+  if (element) {
+    return element;
+  }
+  return null;
+}
+
+function getPanelElementsForGroup(groupId) {
+  return Array.from(document.querySelectorAll(`[data-panel][data-panel-group-id="${groupId}"]`));
+}
+
 exports.Panel = Panel;
 exports.PanelGroup = PanelGroup;
 exports.PanelResizeHandle = PanelResizeHandle;
 exports.assert = assert;
+exports.calculateAvailablePanelSizeInPixels = calculateAvailablePanelSizeInPixels;
+exports.getAvailableGroupSizePixels = getAvailableGroupSizePixels;
+exports.getPanelElement = getPanelElement;
+exports.getPanelElementsForGroup = getPanelElementsForGroup;
+exports.getPanelGroupElement = getPanelGroupElement;
+exports.getResizeHandleElement = getResizeHandleElement;
+exports.getResizeHandleElementIndex = getResizeHandleElementIndex;
+exports.getResizeHandleElementsForGroup = getResizeHandleElementsForGroup;
+exports.getResizeHandlePanelIds = getResizeHandlePanelIds;

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

@@ -2,5 +2,14 @@ export {
   Panel,
   PanelGroup,
   PanelResizeHandle,
-  assert
+  assert,
+  calculateAvailablePanelSizeInPixels,
+  getAvailableGroupSizePixels,
+  getPanelElement,
+  getPanelElementsForGroup,
+  getPanelGroupElement,
+  getResizeHandleElement,
+  getResizeHandleElementIndex,
+  getResizeHandleElementsForGroup,
+  getResizeHandlePanelIds
 } from "./react-resizable-panels.cjs.js";

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,
@@ -1931,7 +1935,64 @@ function PanelResizeHandle({
 }
 PanelResizeHandle.displayName = "PanelResizeHandle";
 
+function calculateAvailablePanelSizeInPixels(groupId) {
+  const panelGroupElement = getPanelGroupElement(groupId);
+  if (panelGroupElement == null) {
+    return NaN;
+  }
+  const direction = panelGroupElement.getAttribute("data-panel-group-direction");
+  const resizeHandles = getResizeHandleElementsForGroup(groupId);
+  if (direction === "horizontal") {
+    return panelGroupElement.offsetWidth - resizeHandles.reduce((accumulated, handle) => {
+      return accumulated + handle.offsetWidth;
+    }, 0);
+  } else {
+    return panelGroupElement.offsetHeight - resizeHandles.reduce((accumulated, handle) => {
+      return accumulated + handle.offsetHeight;
+    }, 0);
+  }
+}
+
+function getAvailableGroupSizePixels(groupId) {
+  const panelGroupElement = getPanelGroupElement(groupId);
+  if (panelGroupElement == null) {
+    return NaN;
+  }
+  const direction = panelGroupElement.getAttribute("data-panel-group-direction");
+  const resizeHandles = getResizeHandleElementsForGroup(groupId);
+  if (direction === "horizontal") {
+    return panelGroupElement.offsetWidth - resizeHandles.reduce((accumulated, handle) => {
+      return accumulated + handle.offsetWidth;
+    }, 0);
+  } else {
+    return panelGroupElement.offsetHeight - resizeHandles.reduce((accumulated, handle) => {
+      return accumulated + handle.offsetHeight;
+    }, 0);
+  }
+}
+
+function getPanelElement(id) {
+  const element = document.querySelector(`[data-panel-id="${id}"]`);
+  if (element) {
+    return element;
+  }
+  return null;
+}
+
+function getPanelElementsForGroup(groupId) {
+  return Array.from(document.querySelectorAll(`[data-panel][data-panel-group-id="${groupId}"]`));
+}
+
 exports.Panel = Panel;
 exports.PanelGroup = PanelGroup;
 exports.PanelResizeHandle = PanelResizeHandle;
 exports.assert = assert;
+exports.calculateAvailablePanelSizeInPixels = calculateAvailablePanelSizeInPixels;
+exports.getAvailableGroupSizePixels = getAvailableGroupSizePixels;
+exports.getPanelElement = getPanelElement;
+exports.getPanelElementsForGroup = getPanelElementsForGroup;
+exports.getPanelGroupElement = getPanelGroupElement;
+exports.getResizeHandleElement = getResizeHandleElement;
+exports.getResizeHandleElementIndex = getResizeHandleElementIndex;
+exports.getResizeHandleElementsForGroup = getResizeHandleElementsForGroup;
+exports.getResizeHandlePanelIds = getResizeHandlePanelIds;

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

@@ -2,5 +2,14 @@ export {
   Panel,
   PanelGroup,
   PanelResizeHandle,
-  assert
+  assert,
+  calculateAvailablePanelSizeInPixels,
+  getAvailableGroupSizePixels,
+  getPanelElement,
+  getPanelElementsForGroup,
+  getPanelGroupElement,
+  getResizeHandleElement,
+  getResizeHandleElementIndex,
+  getResizeHandleElementsForGroup,
+  getResizeHandlePanelIds
 } from "./react-resizable-panels.development.cjs.js";

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,
@@ -1907,4 +1911,52 @@ function PanelResizeHandle({
 }
 PanelResizeHandle.displayName = "PanelResizeHandle";
 
-export { Panel, PanelGroup, PanelResizeHandle, assert };
+function calculateAvailablePanelSizeInPixels(groupId) {
+  const panelGroupElement = getPanelGroupElement(groupId);
+  if (panelGroupElement == null) {
+    return NaN;
+  }
+  const direction = panelGroupElement.getAttribute("data-panel-group-direction");
+  const resizeHandles = getResizeHandleElementsForGroup(groupId);
+  if (direction === "horizontal") {
+    return panelGroupElement.offsetWidth - resizeHandles.reduce((accumulated, handle) => {
+      return accumulated + handle.offsetWidth;
+    }, 0);
+  } else {
+    return panelGroupElement.offsetHeight - resizeHandles.reduce((accumulated, handle) => {
+      return accumulated + handle.offsetHeight;
+    }, 0);
+  }
+}
+
+function getAvailableGroupSizePixels(groupId) {
+  const panelGroupElement = getPanelGroupElement(groupId);
+  if (panelGroupElement == null) {
+    return NaN;
+  }
+  const direction = panelGroupElement.getAttribute("data-panel-group-direction");
+  const resizeHandles = getResizeHandleElementsForGroup(groupId);
+  if (direction === "horizontal") {
+    return panelGroupElement.offsetWidth - resizeHandles.reduce((accumulated, handle) => {
+      return accumulated + handle.offsetWidth;
+    }, 0);
+  } else {
+    return panelGroupElement.offsetHeight - resizeHandles.reduce((accumulated, handle) => {
+      return accumulated + handle.offsetHeight;
+    }, 0);
+  }
+}
+
+function getPanelElement(id) {
+  const element = document.querySelector(`[data-panel-id="${id}"]`);
+  if (element) {
+    return element;
+  }
+  return null;
+}
+
+function getPanelElementsForGroup(groupId) {
+  return Array.from(document.querySelectorAll(`[data-panel][data-panel-group-id="${groupId}"]`));
+}
+
+export { Panel, PanelGroup, PanelResizeHandle, assert, calculateAvailablePanelSizeInPixels, getAvailableGroupSizePixels, getPanelElement, getPanelElementsForGroup, getPanelGroupElement, getResizeHandleElement, getResizeHandleElementIndex, getResizeHandleElementsForGroup, getResizeHandlePanelIds };

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,
@@ -1720,7 +1724,64 @@ function PanelResizeHandle({
 }
 PanelResizeHandle.displayName = "PanelResizeHandle";
 
+function calculateAvailablePanelSizeInPixels(groupId) {
+  const panelGroupElement = getPanelGroupElement(groupId);
+  if (panelGroupElement == null) {
+    return NaN;
+  }
+  const direction = panelGroupElement.getAttribute("data-panel-group-direction");
+  const resizeHandles = getResizeHandleElementsForGroup(groupId);
+  if (direction === "horizontal") {
+    return panelGroupElement.offsetWidth - resizeHandles.reduce((accumulated, handle) => {
+      return accumulated + handle.offsetWidth;
+    }, 0);
+  } else {
+    return panelGroupElement.offsetHeight - resizeHandles.reduce((accumulated, handle) => {
+      return accumulated + handle.offsetHeight;
+    }, 0);
+  }
+}
+
+function getAvailableGroupSizePixels(groupId) {
+  const panelGroupElement = getPanelGroupElement(groupId);
+  if (panelGroupElement == null) {
+    return NaN;
+  }
+  const direction = panelGroupElement.getAttribute("data-panel-group-direction");
+  const resizeHandles = getResizeHandleElementsForGroup(groupId);
+  if (direction === "horizontal") {
+    return panelGroupElement.offsetWidth - resizeHandles.reduce((accumulated, handle) => {
+      return accumulated + handle.offsetWidth;
+    }, 0);
+  } else {
+    return panelGroupElement.offsetHeight - resizeHandles.reduce((accumulated, handle) => {
+      return accumulated + handle.offsetHeight;
+    }, 0);
+  }
+}
+
+function getPanelElement(id) {
+  const element = document.querySelector(`[data-panel-id="${id}"]`);
+  if (element) {
+    return element;
+  }
+  return null;
+}
+
+function getPanelElementsForGroup(groupId) {
+  return Array.from(document.querySelectorAll(`[data-panel][data-panel-group-id="${groupId}"]`));
+}
+
 exports.Panel = Panel;
 exports.PanelGroup = PanelGroup;
 exports.PanelResizeHandle = PanelResizeHandle;
 exports.assert = assert;
+exports.calculateAvailablePanelSizeInPixels = calculateAvailablePanelSizeInPixels;
+exports.getAvailableGroupSizePixels = getAvailableGroupSizePixels;
+exports.getPanelElement = getPanelElement;
+exports.getPanelElementsForGroup = getPanelElementsForGroup;
+exports.getPanelGroupElement = getPanelGroupElement;
+exports.getResizeHandleElement = getResizeHandleElement;
+exports.getResizeHandleElementIndex = getResizeHandleElementIndex;
+exports.getResizeHandleElementsForGroup = getResizeHandleElementsForGroup;
+exports.getResizeHandlePanelIds = getResizeHandlePanelIds;

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

@@ -2,5 +2,14 @@ export {
   Panel,
   PanelGroup,
   PanelResizeHandle,
-  assert
+  assert,
+  calculateAvailablePanelSizeInPixels,
+  getAvailableGroupSizePixels,
+  getPanelElement,
+  getPanelElementsForGroup,
+  getPanelGroupElement,
+  getResizeHandleElement,
+  getResizeHandleElementIndex,
+  getResizeHandleElementsForGroup,
+  getResizeHandlePanelIds
 } from "./react-resizable-panels.development.node.cjs.js";

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,
@@ -1696,4 +1700,52 @@ function PanelResizeHandle({
 }
 PanelResizeHandle.displayName = "PanelResizeHandle";
 
-export { Panel, PanelGroup, PanelResizeHandle, assert };
+function calculateAvailablePanelSizeInPixels(groupId) {
+  const panelGroupElement = getPanelGroupElement(groupId);
+  if (panelGroupElement == null) {
+    return NaN;
+  }
+  const direction = panelGroupElement.getAttribute("data-panel-group-direction");
+  const resizeHandles = getResizeHandleElementsForGroup(groupId);
+  if (direction === "horizontal") {
+    return panelGroupElement.offsetWidth - resizeHandles.reduce((accumulated, handle) => {
+      return accumulated + handle.offsetWidth;
+    }, 0);
+  } else {
+    return panelGroupElement.offsetHeight - resizeHandles.reduce((accumulated, handle) => {
+      return accumulated + handle.offsetHeight;
+    }, 0);
+  }
+}
+
+function getAvailableGroupSizePixels(groupId) {
+  const panelGroupElement = getPanelGroupElement(groupId);
+  if (panelGroupElement == null) {
+    return NaN;
+  }
+  const direction = panelGroupElement.getAttribute("data-panel-group-direction");
+  const resizeHandles = getResizeHandleElementsForGroup(groupId);
+  if (direction === "horizontal") {
+    return panelGroupElement.offsetWidth - resizeHandles.reduce((accumulated, handle) => {
+      return accumulated + handle.offsetWidth;
+    }, 0);
+  } else {
+    return panelGroupElement.offsetHeight - resizeHandles.reduce((accumulated, handle) => {
+      return accumulated + handle.offsetHeight;
+    }, 0);
+  }
+}
+
+function getPanelElement(id) {
+  const element = document.querySelector(`[data-panel-id="${id}"]`);
+  if (element) {
+    return element;
+  }
+  return null;
+}
+
+function getPanelElementsForGroup(groupId) {
+  return Array.from(document.querySelectorAll(`[data-panel][data-panel-group-id="${groupId}"]`));
+}
+
+export { Panel, PanelGroup, PanelResizeHandle, assert, calculateAvailablePanelSizeInPixels, getAvailableGroupSizePixels, getPanelElement, getPanelElementsForGroup, getPanelGroupElement, getResizeHandleElement, getResizeHandleElementIndex, getResizeHandleElementsForGroup, getResizeHandlePanelIds };