react-resizable-panels 1.0.5 → 1.0.7

package/CHANGELOG.md

@@ -1,12 +1,20 @@
 # Changelog
 
+## 1.0.7
+
+- Narrow `tagName` prop to only allow `HTMLElement` names (rather than the broader `Element` type) (#251)
+
+## 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

@@ -46,7 +46,9 @@ import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 `PanelGroup` components also expose an imperative API for manual resizing:
 | method | description
 | :-------------------------------- | :---
-| `setLayout(panelSizes: number[])` | Resize panel group to the specified _panelSizes_ (`[1 - 100, ...]`).
+| `getId(): string` | Gets the panel group's ID.
+| `getLayout(): number[]` | Gets the panel group's current _layout_ (`[1 - 100, ...]`).
+| `setLayout(layout: number[])` | Resize panel group to the specified _layout_ (`[1 - 100, ...]`).
 
 ### `Panel`
 
@@ -73,9 +75,12 @@ import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 | :--------------------------- | :---
 | `collapse()` | If panel is `collapsible`, collapse it fully.
 | `expand()` | If panel is currently _collapsed_, expand it to its most recent size.
-| `getCollapsed(): boolean` | Returns `true` if the panel is currently _collapsed_ (`size === 0`).
+| `getId(): string` | Gets the ID of the panel.
+| `getSize(): number` | Gets the current size of the panel as a percentage (`1 - 100`).
+| `isCollapsed(): boolean` | Returns `true` if the panel is currently _collapsed_ (`size === 0`).
+| `isExpanded(): boolean` | Returns `true` if the panel is currently _not collapsed_ (`!isCollapsed()`).
 | `getSize(): number` | Returns the most recently commited size of the panel as a percentage (`1 - 100`).
-| `resize(percentage: number)` | Resize panel to the specified _percentage_ (`1 - 100`).
+| `resize(size: number)` | Resize panel to the specified _percentage_ (`1 - 100`).
 
 ### `PanelResizeHandle`
 
@@ -91,4 +96,205 @@ 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
+import {
+  getPanelElement,
+  getPanelGroupElement,
+  getResizeHandleElement,
+  Panel,
+  PanelGroup,
+  PanelResizeHandle,
+} from "react-resizable-panels";
+
+export function Example() {
+  const refs = useRef();
+
+  useEffect(() => {
+    const groupElement = getPanelGroupElement("group");
+    const leftPanelElement = getPanelElement("left-panel");
+    const rightPanelElement = getPanelElement("right-panel");
+    const resizeHandleElement = getResizeHandleElement("resize-handle");
+
+    // If you want to, you can store them in a ref to pass around
+    refs.current = {
+      groupElement,
+      leftPanelElement,
+      rightPanelElement,
+      resizeHandleElement,
+    };
+  }, []);
+
+  return (
+    <PanelGroup direction="horizontal" id="group">
+      <Panel id="left-panel">{/* ... */}</Panel>
+      <PanelResizeHandle id="resize-handle" />
+      <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/Panel.d.ts

@@ -1,4 +1,4 @@
-import { ElementType, ForwardedRef, HTMLAttributes, PropsWithChildren } from "./vendor/react.js";
+import { ForwardedRef, HTMLAttributes, PropsWithChildren, ReactNode } from "./vendor/react.js";
 export type PanelOnCollapse = () => void;
 export type PanelOnExpand = () => void;
 export type PanelOnResize = (size: number, prevSize: number | undefined) => void;
@@ -30,7 +30,7 @@ export type ImperativePanelHandle = {
     isExpanded: () => boolean;
     resize: (size: number) => void;
 };
-export type PanelProps = Omit<HTMLAttributes<ElementType>, "id" | "onResize"> & PropsWithChildren<{
+export type PanelProps = Omit<HTMLAttributes<keyof HTMLElementTagNameMap>, "id" | "onResize"> & PropsWithChildren<{
     className?: string;
     collapsedSize?: number | undefined;
     collapsible?: boolean | undefined;
@@ -43,15 +43,15 @@ export type PanelProps = Omit<HTMLAttributes<ElementType>, "id" | "onResize"> &
     onResize?: PanelOnResize;
     order?: number;
     style?: object;
-    tagName?: ElementType;
+    tagName?: keyof HTMLElementTagNameMap;
 }>;
 export declare function PanelWithForwardedRef({ children, className: classNameFromProps, collapsedSize, collapsible, defaultSize, forwardedRef, id: idFromProps, maxSize, minSize, onCollapse, onExpand, onResize, order, style: styleFromProps, tagName: Type, ...rest }: PanelProps & {
     forwardedRef: ForwardedRef<ImperativePanelHandle>;
-}): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+}): ReactNode;
 export declare namespace PanelWithForwardedRef {
     var displayName: string;
 }
-export declare const Panel: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<ElementType>, "id" | "onResize"> & {
+export declare const Panel: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<keyof HTMLElementTagNameMap>, "id" | "onResize"> & {
     className?: string | undefined;
     collapsedSize?: number | undefined;
     collapsible?: boolean | undefined;
@@ -64,7 +64,7 @@ export declare const Panel: import("react").ForwardRefExoticComponent<Omit<HTMLA
     onResize?: PanelOnResize | undefined;
     order?: number | undefined;
     style?: object | undefined;
-    tagName?: ElementType | undefined;
+    tagName?: keyof HTMLElementTagNameMap | undefined;
 } & {
-    children?: import("react").ReactNode;
+    children?: ReactNode;
 } & import("react").RefAttributes<ImperativePanelHandle>>;

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

@@ -1,5 +1,5 @@
 import { Direction } from "./types.js";
-import { CSSProperties, ElementType, HTMLAttributes, PropsWithChildren } from "./vendor/react.js";
+import { CSSProperties, HTMLAttributes, PropsWithChildren, ReactNode } from "./vendor/react.js";
 export type ImperativePanelGroupHandle = {
     getId: () => string;
     getLayout: () => number[];
@@ -10,7 +10,7 @@ export type PanelGroupStorage = {
     setItem(name: string, value: string): void;
 };
 export type PanelGroupOnLayout = (layout: number[]) => void;
-export type PanelGroupProps = Omit<HTMLAttributes<ElementType>, "id"> & PropsWithChildren<{
+export type PanelGroupProps = Omit<HTMLAttributes<keyof HTMLElementTagNameMap>, "id"> & PropsWithChildren<{
     autoSaveId?: string | null;
     className?: string;
     direction: Direction;
@@ -19,9 +19,9 @@ export type PanelGroupProps = Omit<HTMLAttributes<ElementType>, "id"> & PropsWit
     onLayout?: PanelGroupOnLayout | null;
     storage?: PanelGroupStorage;
     style?: CSSProperties;
-    tagName?: ElementType;
+    tagName?: keyof HTMLElementTagNameMap;
 }>;
-export declare const PanelGroup: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<ElementType>, "id"> & {
+export declare const PanelGroup: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<keyof HTMLElementTagNameMap>, "id"> & {
     autoSaveId?: string | null | undefined;
     className?: string | undefined;
     direction: Direction;
@@ -30,7 +30,7 @@ export declare const PanelGroup: import("react").ForwardRefExoticComponent<Omit<
     onLayout?: PanelGroupOnLayout | null | undefined;
     storage?: PanelGroupStorage | undefined;
     style?: CSSProperties | undefined;
-    tagName?: ElementType | undefined;
+    tagName?: keyof HTMLElementTagNameMap | undefined;
 } & {
-    children?: import("react").ReactNode;
+    children?: ReactNode;
 } & import("react").RefAttributes<ImperativePanelGroupHandle>>;

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

@@ -1,15 +1,15 @@
-import { CSSProperties, ElementType, HTMLAttributes, PropsWithChildren } from "./vendor/react.js";
+import { CSSProperties, HTMLAttributes, PropsWithChildren, ReactNode } from "./vendor/react.js";
 export type PanelResizeHandleOnDragging = (isDragging: boolean) => void;
-export type PanelResizeHandleProps = Omit<HTMLAttributes<ElementType>, "id"> & PropsWithChildren<{
+export type PanelResizeHandleProps = Omit<HTMLAttributes<keyof HTMLElementTagNameMap>, "id"> & PropsWithChildren<{
     className?: string;
     disabled?: boolean;
     id?: string | null;
     onDragging?: PanelResizeHandleOnDragging;
     style?: CSSProperties;
     tabIndex?: number;
-    tagName?: ElementType;
+    tagName?: keyof HTMLElementTagNameMap;
 }>;
-export declare function PanelResizeHandle({ children, className: classNameFromProps, disabled, id: idFromProps, onDragging, style: styleFromProps, tabIndex, tagName: Type, ...rest }: PanelResizeHandleProps): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export declare function PanelResizeHandle({ children, className: classNameFromProps, disabled, id: idFromProps, onDragging, style: styleFromProps, tabIndex, tagName: Type, ...rest }: PanelResizeHandleProps): ReactNode;
 export declare namespace PanelResizeHandle {
     var displayName: string;
 }

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): HTMLElement | null;

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

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

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

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

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

@@ -0,0 +1 @@
+export declare function getResizeHandleElement(id: string): HTMLElement | 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): HTMLElement[];

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

@@ -1689,7 +1689,7 @@ function PanelResizeHandle({
   tagName: Type = "div",
   ...rest
 }) {
-  const divElementRef = useRef(null);
+  const elementRef = useRef(null);
 
   // Use a ref to guard against users passing inline props
   const callbacksRef = useRef({
@@ -1717,9 +1717,9 @@ function PanelResizeHandle({
   const stopDraggingAndBlur = useCallback(() => {
     // Clicking on the drag handle shouldn't leave it focused;
     // That would cause the PanelGroup to think it was still active.
-    const divElement = divElementRef.current;
-    assert(divElement);
-    divElement.blur();
+    const element = elementRef.current;
+    assert(element);
+    element.blur();
     stopDragging();
     const {
       onDragging
@@ -1746,9 +1746,9 @@ function PanelResizeHandle({
     const onMouseLeave = event => {
       resizeHandler(event);
     };
-    const divElement = divElementRef.current;
-    assert(divElement);
-    const targetDocument = divElement.ownerDocument;
+    const element = elementRef.current;
+    assert(element);
+    const targetDocument = element.ownerDocument;
     targetDocument.body.addEventListener("contextmenu", stopDraggingAndBlur);
     targetDocument.body.addEventListener("mousemove", onMove);
     targetDocument.body.addEventListener("touchmove", onMove);
@@ -1805,7 +1805,7 @@ function PanelResizeHandle({
         onDragging(true);
       }
     },
-    ref: divElementRef,
+    ref: elementRef,
     role: "separator",
     style: {
       ...style,
@@ -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

@@ -1794,7 +1794,7 @@ function PanelResizeHandle({
   tagName: Type = "div",
   ...rest
 }) {
-  const divElementRef = useRef(null);
+  const elementRef = useRef(null);
 
   // Use a ref to guard against users passing inline props
   const callbacksRef = useRef({
@@ -1822,9 +1822,9 @@ function PanelResizeHandle({
   const stopDraggingAndBlur = useCallback(() => {
     // Clicking on the drag handle shouldn't leave it focused;
     // That would cause the PanelGroup to think it was still active.
-    const divElement = divElementRef.current;
-    assert(divElement);
-    divElement.blur();
+    const element = elementRef.current;
+    assert(element);
+    element.blur();
     stopDragging();
     const {
       onDragging
@@ -1851,9 +1851,9 @@ function PanelResizeHandle({
     const onMouseLeave = event => {
       resizeHandler(event);
     };
-    const divElement = divElementRef.current;
-    assert(divElement);
-    const targetDocument = divElement.ownerDocument;
+    const element = elementRef.current;
+    assert(element);
+    const targetDocument = element.ownerDocument;
     targetDocument.body.addEventListener("contextmenu", stopDraggingAndBlur);
     targetDocument.body.addEventListener("mousemove", onMove);
     targetDocument.body.addEventListener("touchmove", onMove);
@@ -1910,7 +1910,7 @@ function PanelResizeHandle({
         onDragging(true);
       }
     },
-    ref: divElementRef,
+    ref: elementRef,
     role: "separator",
     style: {
       ...style,
@@ -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";