react-resizable-panels 1.0.5 → 1.0.6

package/CHANGELOG.md

@@ -1,12 +1,16 @@
 # Changelog
 
+## 1.0.6
+
+- Export internal DOM helper methods.
+
 ## 1.0.5
 
-- Fix regression that broke server rendering (#240)
+- 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

@@ -91,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

@@ -1823,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

@@ -1928,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

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

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

@@ -1799,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

@@ -1825,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

@@ -1935,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

@@ -1911,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

@@ -1724,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

@@ -1700,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 };

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

@@ -1801,4 +1801,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.node.cjs.js

@@ -1624,7 +1624,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.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.node.cjs.js";

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

@@ -1600,4 +1600,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/package.json

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

package/src/index.ts

@@ -2,6 +2,15 @@ import { Panel } from "./Panel";
 import { PanelGroup } from "./PanelGroup";
 import { PanelResizeHandle } from "./PanelResizeHandle";
 import { assert } from "./utils/assert";
+import { calculateAvailablePanelSizeInPixels } from "./utils/dom/calculateAvailablePanelSizeInPixels";
+import { getAvailableGroupSizePixels } from "./utils/dom/getAvailableGroupSizePixels";
+import { getPanelElement } from "./utils/dom/getPanelElement";
+import { getPanelElementsForGroup } from "./utils/dom/getPanelElementsForGroup";
+import { getPanelGroupElement } from "./utils/dom/getPanelGroupElement";
+import { getResizeHandleElement } from "./utils/dom/getResizeHandleElement";
+import { getResizeHandleElementIndex } from "./utils/dom/getResizeHandleElementIndex";
+import { getResizeHandleElementsForGroup } from "./utils/dom/getResizeHandleElementsForGroup";
+import { getResizeHandlePanelIds } from "./utils/dom/getResizeHandlePanelIds";
 
 import type {
   ImperativePanelHandle,
@@ -35,11 +44,22 @@ export {
   PanelResizeHandleOnDragging,
   PanelResizeHandleProps,
 
-  // Utiltiy methods
-  assert,
-
   // React components
   Panel,
   PanelGroup,
   PanelResizeHandle,
+
+  // Utility methods
+  assert,
+
+  // DOM helpers
+  calculateAvailablePanelSizeInPixels,
+  getAvailableGroupSizePixels,
+  getPanelElement,
+  getPanelElementsForGroup,
+  getPanelGroupElement,
+  getResizeHandleElement,
+  getResizeHandleElementIndex,
+  getResizeHandleElementsForGroup,
+  getResizeHandlePanelIds,
 };