react-resizable-panels 1.0.5 → 1.0.7

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

@@ -1770,7 +1770,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({
@@ -1798,9 +1798,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
@@ -1827,9 +1827,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);
@@ -1886,7 +1886,7 @@ function PanelResizeHandle({
         onDragging(true);
       }
     },
-    ref: divElementRef,
+    ref: elementRef,
     role: "separator",
     style: {
       ...style,
@@ -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

@@ -1665,7 +1665,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({
@@ -1693,9 +1693,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
@@ -1722,9 +1722,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);
@@ -1781,7 +1781,7 @@ function PanelResizeHandle({
         onDragging(true);
       }
     },
-    ref: divElementRef,
+    ref: elementRef,
     role: "separator",
     style: {
       ...style,
@@ -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

@@ -1691,7 +1691,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({
@@ -1719,9 +1719,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
@@ -1748,9 +1748,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);
@@ -1807,7 +1807,7 @@ function PanelResizeHandle({
         onDragging(true);
       }
     },
-    ref: divElementRef,
+    ref: elementRef,
     role: "separator",
     style: {
       ...style,
@@ -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

@@ -1801,7 +1801,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({
@@ -1829,9 +1829,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
@@ -1858,9 +1858,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);
@@ -1917,7 +1917,7 @@ function PanelResizeHandle({
         onDragging(true);
       }
     },
-    ref: divElementRef,
+    ref: elementRef,
     role: "separator",
     style: {
       ...style,
@@ -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

@@ -1777,7 +1777,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({
@@ -1805,9 +1805,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
@@ -1834,9 +1834,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);
@@ -1893,7 +1893,7 @@ function PanelResizeHandle({
         onDragging(true);
       }
     },
-    ref: divElementRef,
+    ref: elementRef,
     role: "separator",
     style: {
       ...style,
@@ -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

@@ -1590,7 +1590,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({
@@ -1618,9 +1618,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
@@ -1647,9 +1647,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);
@@ -1706,7 +1706,7 @@ function PanelResizeHandle({
         onDragging(true);
       }
     },
-    ref: divElementRef,
+    ref: elementRef,
     role: "separator",
     style: {
       ...style,
@@ -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";