react-resizable-panels 1.0.4 → 1.0.6

package/CHANGELOG.md

@@ -1,8 +1,16 @@
 # Changelog
 
+## 1.0.6
+
+- Export internal DOM helper methods.
+
+## 1.0.5
+
+- Fix server rendering regression (#240); Panels will now render with their `defaultSize` during initial mount (if one is specified). This allows server-rendered components to store the most recent size in a cookie and use that value as the default for subsequent page visits.
+
 ## 1.0.4
 
-- Edge case bug fix for `isCollapsed` panel method
+- Edge case bug fix for `isCollapsed` panel method; previously an uninitialized `collapsedSize` value was not being initialized to `0`, which caused `isCollapsed` to incorrectly report `false` in some cases.
 
 ## 1.0.3
 

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
 | :-------------------------------- | :---
@@ -94,4 +91,194 @@ import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 
 ---
 
-#### If you like this project, [buy me a coffee](http://givebrian.coffee/).
+## FAQ
+
+### Can panel sizes be specified in pixels?
+
+No. Pixel-based constraints [added significant complexity](https://github.com/bvaughn/react-resizable-panels/pull/176) to the initialization and validation logic and so I've decided not to support them. You may be able to implement a version of this yourself following [a pattern like this](https://github.com/bvaughn/react-resizable-panels/issues/46#issuecomment-1368108416) but it is not officially supported by this library.
+
+### How can I fix layout/sizing problems with conditionally rendered panels?
+
+The `Panel` API doesn't _require_ `id` and `order` props because they aren't necessary for static layouts. When panels are conditionally rendered though, it's best to supply these values.
+
+```tsx
+<PanelGroup direction="horizontal">
+  {renderSideBar && (
+    <>
+      <Panel id="sidebar" minSize={25} order={1}>
+        <Sidebar />
+      </Panel>
+      <PanelResizeHandle />
+    </>
+  )}
+  <Panel minSize={25} order={2}>
+    <Main />
+  </Panel>
+</PanelGroup>
+```
+
+### How can I use persistent layouts with SSR?
+
+By default, this library uses `localStorage` to persist layouts. With server rendering, this can cause a flicker when the default layout (rendered on the server) is replaced with the persisted layout (in `localStorage`). The way to avoid this flicker is to also persist the layout with a cookie like so:
+
+##### Server component
+
+```tsx
+import ResizablePanels from "@/app/ResizablePanels";
+import { cookies } from "next/headers";
+
+export function ServerComponent() {
+  const layout = cookies().get("react-resizable-panels:layout");
+
+  let defaultLayout;
+  if (layout) {
+    defaultLayout = JSON.parse(layout.value);
+  }
+
+  return <ClientComponent defaultLayout={defaultLayout} />;
+}
+```
+
+##### Client component
+
+```tsx
+"use client";
+
+import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
+
+export function ClientComponent({
+  defaultLayout = [33, 67],
+}: {
+  defaultLayout: number[] | undefined;
+}) {
+  const onLayout = (sizes: number[]) => {
+    document.cookie = `react-resizable-panels:layout=${JSON.stringify(sizes)}`;
+  };
+
+  return (
+    <PanelGroup direction="horizontal" onLayout={onLayout}>
+      <Panel defaultSize={defaultLayout[0]}>{/* ... */}</Panel>
+      <PanelResizeHandle className="w-2 bg-blue-800" />
+      <Panel defaultSize={defaultLayout[1]}>{/* ... */}</Panel>
+    </PanelGroup>
+  );
+}
+```
+
+---
+
+## FAQ
+
+### Can panel sizes be specified in pixels?
+
+No. Pixel-based constraints [added significant complexity](https://github.com/bvaughn/react-resizable-panels/pull/176) to the initialization and validation logic and so I've decided not to support them. You may be able to implement a version of this yourself following [a pattern like this](https://github.com/bvaughn/react-resizable-panels/issues/46#issuecomment-1368108416) but it is not officially supported by this library.
+
+### Can a attach a ref to the DOM elements?
+
+No. I think exposing two refs (one for the component's imperative API and one for a DOM element) would be awkward. This library does export several utility methods for accessing the underlying DOM elements though. For example:
+
+```tsx
+export function Example() {
+  const refs = useRef();
+
+  useEffect(() => {
+    const groupElement = getPanelGroupElement("group");
+    const leftPanelElement = getPanelElement("left-panel");
+    const rightPanelElement = getPanelElement("right-panel");
+
+    // If you want to, you can store them in a ref to pass around
+    refs.current = {
+      groupElement,
+      leftPanelElement,
+      rightPanelElement,
+    };
+  }, []);
+
+  return (
+    <PanelGroup direction="horizontal" id="group">
+      <Panel id="left-panel">{/* ... */}</Panel>
+      <PanelResizeHandle />
+      <Panel id="right-panel">{/* ... */}</Panel>
+    </PanelGroup>
+  );
+}
+```
+
+### Why don't I see any resize UI?
+
+This likely means that you haven't applied any CSS to style the resize handles. By default, a resize handle is just an empty DOM element. To add styling, use the `className` or `style` props:
+
+```tsx
+// Tailwind example
+<PanelResizeHandle className="w-2 bg-blue-800" />
+```
+
+### How can I fix layout/sizing problems with conditionally rendered panels?
+
+The `Panel` API doesn't _require_ `id` and `order` props because they aren't necessary for static layouts. When panels are conditionally rendered though, it's best to supply these values.
+
+```tsx
+<PanelGroup direction="horizontal">
+  {renderSideBar && (
+    <>
+      <Panel id="sidebar" minSize={25} order={1}>
+        <Sidebar />
+      </Panel>
+      <PanelResizeHandle />
+    </>
+  )}
+  <Panel minSize={25} order={2}>
+    <Main />
+  </Panel>
+</PanelGroup>
+```
+
+### How can I use persistent layouts with SSR?
+
+By default, this library uses `localStorage` to persist layouts. With server rendering, this can cause a flicker when the default layout (rendered on the server) is replaced with the persisted layout (in `localStorage`). The way to avoid this flicker is to also persist the layout with a cookie like so:
+
+##### Server component
+
+```tsx
+import ResizablePanels from "@/app/ResizablePanels";
+import { cookies } from "next/headers";
+
+export function ServerComponent() {
+  const layout = cookies().get("react-resizable-panels:layout");
+
+  let defaultLayout;
+  if (layout) {
+    defaultLayout = JSON.parse(layout.value);
+  }
+
+  return <ClientComponent defaultLayout={defaultLayout} />;
+}
+```
+
+##### Client component
+
+```tsx
+"use client";
+
+import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
+
+export function ClientComponent({
+  defaultLayout = [33, 67],
+}: {
+  defaultLayout: number[] | undefined;
+}) {
+  const onLayout = (sizes: number[]) => {
+    document.cookie = `react-resizable-panels:layout=${JSON.stringify(sizes)}`;
+  };
+
+  return (
+    <PanelGroup direction="horizontal" onLayout={onLayout}>
+      <Panel defaultSize={defaultLayout[0]}>{/* ... */}</Panel>
+      <PanelResizeHandle className="w-2 bg-blue-800" />
+      <Panel defaultSize={defaultLayout[1]}>{/* ... */}</Panel>
+    </PanelGroup>
+  );
+}
+```
+
+A demo of this is available [here](https://github.com/bvaughn/react-resizable-panels-demo-ssr).

package/dist/declarations/src/index.d.ts

@@ -2,7 +2,16 @@ import { Panel } from "./Panel.js";
 import { PanelGroup } from "./PanelGroup.js";
 import { PanelResizeHandle } from "./PanelResizeHandle.js";
 import { assert } from "./utils/assert.js";
+import { calculateAvailablePanelSizeInPixels } from "./utils/dom/calculateAvailablePanelSizeInPixels.js";
+import { getAvailableGroupSizePixels } from "./utils/dom/getAvailableGroupSizePixels.js";
+import { getPanelElement } from "./utils/dom/getPanelElement.js";
+import { getPanelElementsForGroup } from "./utils/dom/getPanelElementsForGroup.js";
+import { getPanelGroupElement } from "./utils/dom/getPanelGroupElement.js";
+import { getResizeHandleElement } from "./utils/dom/getResizeHandleElement.js";
+import { getResizeHandleElementIndex } from "./utils/dom/getResizeHandleElementIndex.js";
+import { getResizeHandleElementsForGroup } from "./utils/dom/getResizeHandleElementsForGroup.js";
+import { getResizeHandlePanelIds } from "./utils/dom/getResizeHandlePanelIds.js";
 import type { ImperativePanelHandle, PanelOnCollapse, PanelOnExpand, PanelOnResize, PanelProps } from "./Panel.js";
 import type { ImperativePanelGroupHandle, PanelGroupOnLayout, PanelGroupProps, PanelGroupStorage } from "./PanelGroup.js";
 import type { PanelResizeHandleOnDragging, PanelResizeHandleProps } from "./PanelResizeHandle.js";
-export { ImperativePanelGroupHandle, ImperativePanelHandle, PanelGroupOnLayout, PanelGroupProps, PanelGroupStorage, PanelOnCollapse, PanelOnExpand, PanelOnResize, PanelProps, PanelResizeHandleOnDragging, PanelResizeHandleProps, assert, Panel, PanelGroup, PanelResizeHandle, };
+export { ImperativePanelGroupHandle, ImperativePanelHandle, PanelGroupOnLayout, PanelGroupProps, PanelGroupStorage, PanelOnCollapse, PanelOnExpand, PanelOnResize, PanelProps, PanelResizeHandleOnDragging, PanelResizeHandleProps, Panel, PanelGroup, PanelResizeHandle, assert, calculateAvailablePanelSizeInPixels, getAvailableGroupSizePixels, getPanelElement, getPanelElementsForGroup, getPanelGroupElement, getResizeHandleElement, getResizeHandleElementIndex, getResizeHandleElementsForGroup, getResizeHandlePanelIds, };

package/dist/declarations/src/utils/dom/calculateAvailablePanelSizeInPixels.d.ts

@@ -0,0 +1 @@
+export declare function calculateAvailablePanelSizeInPixels(groupId: string): number;

package/dist/declarations/src/utils/dom/getAvailableGroupSizePixels.d.ts

@@ -0,0 +1 @@
+export declare function getAvailableGroupSizePixels(groupId: string): number;

package/dist/declarations/src/utils/dom/getPanelElement.d.ts

@@ -0,0 +1 @@
+export declare function getPanelElement(id: string): HTMLDivElement | null;

package/dist/declarations/src/utils/dom/getPanelElementsForGroup.d.ts

@@ -0,0 +1 @@
+export declare function getPanelElementsForGroup(groupId: string): HTMLDivElement[];

package/dist/declarations/src/utils/dom/getPanelGroupElement.d.ts

@@ -0,0 +1 @@
+export declare function getPanelGroupElement(id: string): HTMLDivElement | null;

package/dist/declarations/src/utils/dom/getResizeHandleElement.d.ts

@@ -0,0 +1 @@
+export declare function getResizeHandleElement(id: string): HTMLDivElement | null;

package/dist/declarations/src/utils/dom/getResizeHandleElementIndex.d.ts

@@ -0,0 +1 @@
+export declare function getResizeHandleElementIndex(groupId: string, id: string): number | null;

package/dist/declarations/src/utils/dom/getResizeHandleElementsForGroup.d.ts

@@ -0,0 +1 @@
+export declare function getResizeHandleElementsForGroup(groupId: string): HTMLDivElement[];

package/dist/declarations/src/utils/dom/getResizeHandlePanelIds.d.ts

@@ -0,0 +1,2 @@
+import { PanelData } from "../../Panel.js";
+export declare function getResizeHandlePanelIds(groupId: string, handleId: string, panelsArray: PanelData[]): [idBefore: string | null, idAfter: string | null];

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,
@@ -1819,7 +1823,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.browser.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.browser.cjs.js";

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,
@@ -1924,7 +1928,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.browser.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.browser.development.cjs.js";

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,
@@ -1900,4 +1904,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 };