react-resizable-panels 1.0.8 → 1.0.10

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

@@ -65,6 +65,7 @@ function PanelWithForwardedRef({
     getPanelStyle,
     groupId,
     isPanelCollapsed,
+    reevaluatePanelConstraints,
     registerPanel,
     resizePanel,
     unregisterPanel
@@ -430,12 +431,12 @@ function adjustLayoutByDelta({
   return nextLayout;
 }
 
-function getResizeHandleElementsForGroup(groupId, panelGroupElement) {
-  return Array.from(panelGroupElement.querySelectorAll(`[data-panel-resize-handle-id][data-panel-group-id="${groupId}"]`));
+function getResizeHandleElementsForGroup(groupId, scope = document) {
+  return Array.from(scope.querySelectorAll(`[data-panel-resize-handle-id][data-panel-group-id="${groupId}"]`));
 }
 
-function getResizeHandleElementIndex(groupId, id, panelGroupElement) {
-  const handles = getResizeHandleElementsForGroup(groupId, panelGroupElement);
+function getResizeHandleElementIndex(groupId, id, scope = document) {
+  const handles = getResizeHandleElementsForGroup(groupId, scope);
   const index = handles.findIndex(handle => handle.getAttribute("data-panel-resize-handle-id") === id);
   return index !== null && index !== void 0 ? index : null;
 }
@@ -445,7 +446,7 @@ function determinePivotIndices(groupId, dragHandleId, panelGroupElement) {
   return index != null ? [index, index + 1] : [-1, -1];
 }
 
-function getPanelGroupElement(id, rootElement) {
+function getPanelGroupElement(id, rootElement = document) {
   var _dataset;
   //If the root element is the PanelGroup
   if (rootElement instanceof HTMLElement && (rootElement === null || rootElement === void 0 ? void 0 : (_dataset = rootElement.dataset) === null || _dataset === void 0 ? void 0 : _dataset.panelGroupId) == id) {
@@ -460,18 +461,18 @@ function getPanelGroupElement(id, rootElement) {
   return null;
 }
 
-function getResizeHandleElement(id, panelGroupElement) {
-  const element = panelGroupElement.querySelector(`[data-panel-resize-handle-id="${id}"]`);
+function getResizeHandleElement(id, scope = document) {
+  const element = scope.querySelector(`[data-panel-resize-handle-id="${id}"]`);
   if (element) {
     return element;
   }
   return null;
 }
 
-function getResizeHandlePanelIds(groupId, handleId, panelsArray, panelGroupElement) {
+function getResizeHandlePanelIds(groupId, handleId, panelsArray, scope = document) {
   var _panelsArray$index$id, _panelsArray$index, _panelsArray$id, _panelsArray;
-  const handle = getResizeHandleElement(handleId, panelGroupElement);
-  const handles = getResizeHandleElementsForGroup(groupId, panelGroupElement);
+  const handle = getResizeHandleElement(handleId, scope);
+  const handles = getResizeHandleElementsForGroup(groupId, scope);
   const index = handle ? handles.indexOf(handle) : -1;
   const idBefore = (_panelsArray$index$id = (_panelsArray$index = panelsArray[index]) === null || _panelsArray$index === void 0 ? void 0 : _panelsArray$index.id) !== null && _panelsArray$index$id !== void 0 ? _panelsArray$index$id : null;
   const idAfter = (_panelsArray$id = (_panelsArray = panelsArray[index + 1]) === null || _panelsArray === void 0 ? void 0 : _panelsArray.id) !== null && _panelsArray$id !== void 0 ? _panelsArray$id : null;
@@ -1319,6 +1320,35 @@ function PanelGroupWithForwardedRef({
       callPanelCallbacks(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
     }
   }, []);
+  const reevaluatePanelConstraints = useCallback((panelData, prevConstraints) => {
+    const {
+      layout,
+      panelDataArray
+    } = eagerValuesRef.current;
+    const {
+      collapsedSize: prevCollapsedSize = 0,
+      collapsible: prevCollapsible
+    } = prevConstraints;
+    const {
+      collapsedSize: nextCollapsedSize = 0,
+      collapsible: nextCollapsible,
+      maxSize: nextMaxSize = 100,
+      minSize: nextMinSize = 0
+    } = panelData.constraints;
+    const {
+      panelSize: prevPanelSize
+    } = panelDataHelper(panelDataArray, panelData, layout);
+    assert(prevPanelSize != null);
+    if (prevCollapsible && nextCollapsible && prevPanelSize === prevCollapsedSize) {
+      if (prevCollapsedSize !== nextCollapsedSize) {
+        resizePanel(panelData, nextCollapsedSize);
+      }
+    } else if (prevPanelSize < nextMinSize) {
+      resizePanel(panelData, nextMinSize);
+    } else if (prevPanelSize > nextMaxSize) {
+      resizePanel(panelData, nextMaxSize);
+    }
+  }, [resizePanel]);
   const startDragging = useCallback((dragHandleId, event) => {
     const {
       direction
@@ -1369,6 +1399,7 @@ function PanelGroupWithForwardedRef({
     groupId,
     isPanelCollapsed,
     isPanelExpanded,
+    reevaluatePanelConstraints,
     registerPanel,
     registerResizeHandle,
     resizePanel,
@@ -1376,7 +1407,7 @@ function PanelGroupWithForwardedRef({
     stopDragging,
     unregisterPanel,
     panelGroupElement: panelGroupElementRef.current
-  }), [collapsePanel, dragState, direction, expandPanel, getPanelSize, getPanelStyle, groupId, isPanelCollapsed, isPanelExpanded, registerPanel, registerResizeHandle, resizePanel, startDragging, stopDragging, unregisterPanel]);
+  }), [collapsePanel, dragState, direction, expandPanel, getPanelSize, getPanelStyle, groupId, isPanelCollapsed, isPanelExpanded, reevaluatePanelConstraints, registerPanel, registerResizeHandle, resizePanel, startDragging, stopDragging, unregisterPanel]);
   const style = {
     display: "flex",
     flexDirection: direction === "horizontal" ? "row" : "column",
@@ -1411,14 +1442,12 @@ function findPanelDataIndex(panelDataArray, panelData) {
   return panelDataArray.findIndex(prevPanelData => prevPanelData === panelData || prevPanelData.id === panelData.id);
 }
 function panelDataHelper(panelDataArray, panelData, layout) {
-  const panelConstraintsArray = panelDataArray.map(panelData => panelData.constraints);
   const panelIndex = findPanelDataIndex(panelDataArray, panelData);
-  const panelConstraints = panelConstraintsArray[panelIndex];
   const isLastPanel = panelIndex === panelDataArray.length - 1;
   const pivotIndices = isLastPanel ? [panelIndex - 1, panelIndex] : [panelIndex, panelIndex + 1];
   const panelSize = layout[panelIndex];
   return {
-    ...panelConstraints,
+    ...panelData.constraints,
     panelSize,
     pivotIndices
   };
@@ -1625,47 +1654,16 @@ function PanelResizeHandle({
 }
 PanelResizeHandle.displayName = "PanelResizeHandle";
 
-function calculateAvailablePanelSizeInPixels(groupId, panelGroupElement) {
-  if (panelGroupElement == null) {
-    return NaN;
-  }
-  const direction = panelGroupElement.getAttribute("data-panel-group-direction");
-  const resizeHandles = getResizeHandleElementsForGroup(groupId, panelGroupElement);
-  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, panelGroupElement) {
-  const direction = panelGroupElement.getAttribute("data-panel-group-direction");
-  const resizeHandles = getResizeHandleElementsForGroup(groupId, panelGroupElement);
-  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, panelGroupElement) {
-  const element = panelGroupElement.querySelector(`[data-panel-id="${id}"]`);
+function getPanelElement(id, scope = document) {
+  const element = scope.querySelector(`[data-panel-id="${id}"]`);
   if (element) {
     return element;
   }
   return null;
 }
 
-function getPanelElementsForGroup(groupId, panelGroupElement) {
-  return Array.from(panelGroupElement.querySelectorAll(`[data-panel][data-panel-group-id="${groupId}"]`));
+function getPanelElementsForGroup(groupId, scope = document) {
+  return Array.from(scope.querySelectorAll(`[data-panel][data-panel-group-id="${groupId}"]`));
 }
 
-export { Panel, PanelGroup, PanelResizeHandle, assert, calculateAvailablePanelSizeInPixels, getAvailableGroupSizePixels, getPanelElement, getPanelElementsForGroup, getPanelGroupElement, getResizeHandleElement, getResizeHandleElementIndex, getResizeHandleElementsForGroup, getResizeHandlePanelIds };
+export { Panel, PanelGroup, PanelResizeHandle, assert, getPanelElement, getPanelElementsForGroup, getPanelGroupElement, getResizeHandleElement, getResizeHandleElementIndex, getResizeHandleElementsForGroup, getResizeHandlePanelIds };

package/package.json

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

package/src/Panel.test.tsx

@@ -266,6 +266,192 @@ describe("PanelGroup", () => {
     expect(element.title).toBe("bar");
   });
 
+  describe("constraints", () => {
+    it("should resize a collapsed panel if the collapsedSize prop changes", () => {
+      act(() => {
+        root.render(
+          <PanelGroup direction="horizontal">
+            <Panel
+              id="left"
+              collapsedSize={10}
+              collapsible
+              defaultSize={10}
+              minSize={25}
+            />
+            <PanelResizeHandle />
+            <Panel id="middle" />
+            <PanelResizeHandle />
+            <Panel
+              id="right"
+              collapsedSize={10}
+              collapsible
+              defaultSize={10}
+              minSize={25}
+            />
+          </PanelGroup>
+        );
+      });
+
+      let leftElement = getPanelElement("left", container);
+      let middleElement = getPanelElement("middle", container);
+      let rightElement = getPanelElement("right", container);
+      assert(leftElement);
+      assert(middleElement);
+      assert(rightElement);
+      expect(leftElement.getAttribute("data-panel-size")).toBe("10.0");
+      expect(middleElement.getAttribute("data-panel-size")).toBe("80.0");
+      expect(rightElement.getAttribute("data-panel-size")).toBe("10.0");
+
+      act(() => {
+        root.render(
+          <PanelGroup direction="horizontal">
+            <Panel id="left" collapsedSize={5} collapsible minSize={25} />
+            <PanelResizeHandle />
+            <Panel id="middle" />
+            <PanelResizeHandle />
+            <Panel id="right" collapsedSize={5} collapsible minSize={25} />
+          </PanelGroup>
+        );
+      });
+
+      expect(leftElement.getAttribute("data-panel-size")).toBe("5.0");
+      expect(middleElement.getAttribute("data-panel-size")).toBe("90.0");
+      expect(rightElement.getAttribute("data-panel-size")).toBe("5.0");
+    });
+
+    it("it should not expand a collapsed panel if other constraints change", () => {
+      act(() => {
+        root.render(
+          <PanelGroup direction="horizontal">
+            <Panel
+              id="left"
+              collapsedSize={10}
+              collapsible
+              defaultSize={10}
+              minSize={25}
+            />
+            <PanelResizeHandle />
+            <Panel id="middle" />
+            <PanelResizeHandle />
+            <Panel
+              id="right"
+              collapsedSize={10}
+              collapsible
+              defaultSize={10}
+              minSize={25}
+            />
+          </PanelGroup>
+        );
+      });
+
+      let leftElement = getPanelElement("left", container);
+      let middleElement = getPanelElement("middle", container);
+      let rightElement = getPanelElement("right", container);
+      assert(leftElement);
+      assert(middleElement);
+      assert(rightElement);
+      expect(leftElement.getAttribute("data-panel-size")).toBe("10.0");
+      expect(middleElement.getAttribute("data-panel-size")).toBe("80.0");
+      expect(rightElement.getAttribute("data-panel-size")).toBe("10.0");
+
+      act(() => {
+        root.render(
+          <PanelGroup direction="horizontal">
+            <Panel id="left" collapsedSize={10} collapsible minSize={20} />
+            <PanelResizeHandle />
+            <Panel id="middle" />
+            <PanelResizeHandle />
+            <Panel id="right" collapsedSize={10} collapsible minSize={20} />
+          </PanelGroup>
+        );
+      });
+
+      expect(leftElement.getAttribute("data-panel-size")).toBe("10.0");
+      expect(middleElement.getAttribute("data-panel-size")).toBe("80.0");
+      expect(rightElement.getAttribute("data-panel-size")).toBe("10.0");
+    });
+
+    it("should resize a panel if the minSize prop changes", () => {
+      act(() => {
+        root.render(
+          <PanelGroup direction="horizontal">
+            <Panel id="left" defaultSize={15} minSize={10} />
+            <PanelResizeHandle />
+            <Panel id="middle" />
+            <PanelResizeHandle />
+            <Panel id="right" defaultSize={15} minSize={10} />
+          </PanelGroup>
+        );
+      });
+
+      let leftElement = getPanelElement("left", container);
+      let middleElement = getPanelElement("middle", container);
+      let rightElement = getPanelElement("right", container);
+      assert(leftElement);
+      assert(middleElement);
+      assert(rightElement);
+      expect(leftElement.getAttribute("data-panel-size")).toBe("15.0");
+      expect(middleElement.getAttribute("data-panel-size")).toBe("70.0");
+      expect(rightElement.getAttribute("data-panel-size")).toBe("15.0");
+
+      act(() => {
+        root.render(
+          <PanelGroup direction="horizontal">
+            <Panel id="left" minSize={20} />
+            <PanelResizeHandle />
+            <Panel id="middle" />
+            <PanelResizeHandle />
+            <Panel id="right" minSize={20} />
+          </PanelGroup>
+        );
+      });
+
+      expect(leftElement.getAttribute("data-panel-size")).toBe("20.0");
+      expect(middleElement.getAttribute("data-panel-size")).toBe("60.0");
+      expect(rightElement.getAttribute("data-panel-size")).toBe("20.0");
+    });
+
+    it("should resize a panel if the maxSize prop changes", () => {
+      act(() => {
+        root.render(
+          <PanelGroup direction="horizontal">
+            <Panel id="left" defaultSize={25} maxSize={30} />
+            <PanelResizeHandle />
+            <Panel id="middle" />
+            <PanelResizeHandle />
+            <Panel id="right" defaultSize={25} maxSize={30} />
+          </PanelGroup>
+        );
+      });
+
+      let leftElement = getPanelElement("left", container);
+      let middleElement = getPanelElement("middle", container);
+      let rightElement = getPanelElement("right", container);
+      assert(leftElement);
+      assert(middleElement);
+      assert(rightElement);
+      expect(leftElement.getAttribute("data-panel-size")).toBe("25.0");
+      expect(middleElement.getAttribute("data-panel-size")).toBe("50.0");
+      expect(rightElement.getAttribute("data-panel-size")).toBe("25.0");
+
+      act(() => {
+        root.render(
+          <PanelGroup direction="horizontal">
+            <Panel id="left" maxSize={20} />
+            <PanelResizeHandle />
+            <Panel id="middle" />
+            <PanelResizeHandle />
+            <Panel id="right" maxSize={20} />
+          </PanelGroup>
+        );
+      });
+
+      expect(leftElement.getAttribute("data-panel-size")).toBe("20.0");
+      expect(middleElement.getAttribute("data-panel-size")).toBe("60.0");
+      expect(rightElement.getAttribute("data-panel-size")).toBe("20.0");
+    });
+  });
+
   describe("callbacks", () => {
     describe("onCollapse", () => {
       it("should be called on mount if a panels initial size is 0", () => {

package/src/Panel.ts

@@ -108,6 +108,7 @@ export function PanelWithForwardedRef({
     getPanelStyle,
     groupId,
     isPanelCollapsed,
+    reevaluatePanelConstraints,
     registerPanel,
     resizePanel,
     unregisterPanel,
@@ -155,6 +156,8 @@ export function PanelWithForwardedRef({
   useIsomorphicLayoutEffect(() => {
     const { callbacks, constraints } = panelDataRef.current;
 
+    const prevConstraints = { ...constraints };
+
     panelDataRef.current.id = panelId;
     panelDataRef.current.idIsFromProps = idFromProps !== undefined;
     panelDataRef.current.order = order;
@@ -168,6 +171,17 @@ export function PanelWithForwardedRef({
     constraints.defaultSize = defaultSize;
     constraints.maxSize = maxSize;
     constraints.minSize = minSize;
+
+    // If constraints have changed, we should revisit panel sizes.
+    // This is uncommon but may happen if people are trying to implement pixel based constraints.
+    if (
+      prevConstraints.collapsedSize !== constraints.collapsedSize ||
+      prevConstraints.collapsible !== constraints.collapsible ||
+      prevConstraints.maxSize !== constraints.maxSize ||
+      prevConstraints.minSize !== constraints.minSize
+    ) {
+      reevaluatePanelConstraints(panelDataRef.current, prevConstraints);
+    }
   });
 
   useIsomorphicLayoutEffect(() => {

package/src/PanelGroup.ts

@@ -1,5 +1,5 @@
 import { isDevelopment } from "#is-development";
-import { PanelData } from "./Panel";
+import { PanelConstraints, PanelData } from "./Panel";
 import {
   DragState,
   PanelGroupContext,
@@ -719,6 +719,48 @@ function PanelGroupWithForwardedRef({
     []
   );
 
+  const reevaluatePanelConstraints = useCallback(
+    (panelData: PanelData, prevConstraints: PanelConstraints) => {
+      const { layout, panelDataArray } = eagerValuesRef.current;
+
+      const {
+        collapsedSize: prevCollapsedSize = 0,
+        collapsible: prevCollapsible,
+      } = prevConstraints;
+
+      const {
+        collapsedSize: nextCollapsedSize = 0,
+        collapsible: nextCollapsible,
+        maxSize: nextMaxSize = 100,
+        minSize: nextMinSize = 0,
+      } = panelData.constraints;
+
+      const { panelSize: prevPanelSize } = panelDataHelper(
+        panelDataArray,
+        panelData,
+        layout
+      );
+      assert(prevPanelSize != null);
+
+      if (
+        prevCollapsible &&
+        nextCollapsible &&
+        prevPanelSize === prevCollapsedSize
+      ) {
+        if (prevCollapsedSize !== nextCollapsedSize) {
+          resizePanel(panelData, nextCollapsedSize);
+        } else {
+          // Stay collapsed
+        }
+      } else if (prevPanelSize < nextMinSize) {
+        resizePanel(panelData, nextMinSize);
+      } else if (prevPanelSize > nextMaxSize) {
+        resizePanel(panelData, nextMaxSize);
+      }
+    },
+    [resizePanel]
+  );
+
   const startDragging = useCallback(
     (dragHandleId: string, event: ResizeEvent) => {
       const { direction } = committedValuesRef.current;
@@ -781,6 +823,7 @@ function PanelGroupWithForwardedRef({
         groupId,
         isPanelCollapsed,
         isPanelExpanded,
+        reevaluatePanelConstraints,
         registerPanel,
         registerResizeHandle,
         resizePanel,
@@ -799,6 +842,7 @@ function PanelGroupWithForwardedRef({
       groupId,
       isPanelCollapsed,
       isPanelExpanded,
+      reevaluatePanelConstraints,
       registerPanel,
       registerResizeHandle,
       resizePanel,
@@ -858,12 +902,7 @@ function panelDataHelper(
   panelData: PanelData,
   layout: number[]
 ) {
-  const panelConstraintsArray = panelDataArray.map(
-    (panelData) => panelData.constraints
-  );
-
   const panelIndex = findPanelDataIndex(panelDataArray, panelData);
-  const panelConstraints = panelConstraintsArray[panelIndex];
 
   const isLastPanel = panelIndex === panelDataArray.length - 1;
   const pivotIndices = isLastPanel
@@ -873,7 +912,7 @@ function panelDataHelper(
   const panelSize = layout[panelIndex];
 
   return {
-    ...panelConstraints,
+    ...panelData.constraints,
     panelSize,
     pivotIndices,
   };

package/src/PanelGroupContext.ts

@@ -1,4 +1,4 @@
-import { PanelData } from "./Panel";
+import { PanelConstraints, PanelData } from "./Panel";
 import { CSSProperties, createContext } from "./vendor/react";
 
 export type ResizeEvent = KeyboardEvent | MouseEvent | TouchEvent;
@@ -24,6 +24,10 @@ export type TPanelGroupContext = {
   groupId: string;
   isPanelCollapsed: (panelData: PanelData) => boolean;
   isPanelExpanded: (panelData: PanelData) => boolean;
+  reevaluatePanelConstraints: (
+    panelData: PanelData,
+    prevConstraints: PanelConstraints
+  ) => void;
   registerPanel: (panelData: PanelData) => void;
   registerResizeHandle: (dragHandleId: string) => ResizeHandler;
   resizePanel: (panelData: PanelData, size: number) => void;

package/src/index.ts

@@ -2,8 +2,6 @@ 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";
@@ -53,8 +51,6 @@ export {
   assert,
 
   // DOM helpers
-  calculateAvailablePanelSizeInPixels,
-  getAvailableGroupSizePixels,
   getPanelElement,
   getPanelElementsForGroup,
   getPanelGroupElement,

package/src/utils/dom/getPanelElement.ts

@@ -1,8 +1,8 @@
 export function getPanelElement(
   id: string,
-  panelGroupElement: HTMLElement
+  scope: ParentNode | HTMLElement = document
 ): HTMLElement | null {
-  const element = panelGroupElement.querySelector(`[data-panel-id="${id}"]`);
+  const element = scope.querySelector(`[data-panel-id="${id}"]`);
   if (element) {
     return element as HTMLElement;
   }

package/src/utils/dom/getPanelElementsForGroup.ts

@@ -1,10 +1,8 @@
 export function getPanelElementsForGroup(
   groupId: string,
-  panelGroupElement: HTMLElement
+  scope: ParentNode | HTMLElement = document
 ): HTMLElement[] {
   return Array.from(
-    panelGroupElement.querySelectorAll(
-      `[data-panel][data-panel-group-id="${groupId}"]`
-    )
+    scope.querySelectorAll(`[data-panel][data-panel-group-id="${groupId}"]`)
   );
 }

package/src/utils/dom/getPanelGroupElement.ts

@@ -1,6 +1,6 @@
 export function getPanelGroupElement(
   id: string,
-  rootElement: ParentNode | HTMLElement
+  rootElement: ParentNode | HTMLElement = document
 ): HTMLElement | null {
   //If the root element is the PanelGroup
   if (

package/src/utils/dom/getResizeHandleElement.ts

@@ -1,10 +1,8 @@
 export function getResizeHandleElement(
   id: string,
-  panelGroupElement: ParentNode
+  scope: ParentNode | HTMLElement = document
 ): HTMLElement | null {
-  const element = panelGroupElement.querySelector(
-    `[data-panel-resize-handle-id="${id}"]`
-  );
+  const element = scope.querySelector(`[data-panel-resize-handle-id="${id}"]`);
   if (element) {
     return element as HTMLElement;
   }

package/src/utils/dom/getResizeHandleElementIndex.ts

@@ -3,9 +3,9 @@ import { getResizeHandleElementsForGroup } from "./getResizeHandleElementsForGro
 export function getResizeHandleElementIndex(
   groupId: string,
   id: string,
-  panelGroupElement: ParentNode
+  scope: ParentNode | HTMLElement = document
 ): number | null {
-  const handles = getResizeHandleElementsForGroup(groupId, panelGroupElement);
+  const handles = getResizeHandleElementsForGroup(groupId, scope);
   const index = handles.findIndex(
     (handle) => handle.getAttribute("data-panel-resize-handle-id") === id
   );

package/src/utils/dom/getResizeHandleElementsForGroup.ts

@@ -1,9 +1,9 @@
 export function getResizeHandleElementsForGroup(
   groupId: string,
-  panelGroupElement: ParentNode
+  scope: ParentNode | HTMLElement = document
 ): HTMLElement[] {
   return Array.from(
-    panelGroupElement.querySelectorAll(
+    scope.querySelectorAll(
       `[data-panel-resize-handle-id][data-panel-group-id="${groupId}"]`
     )
   );

package/src/utils/dom/getResizeHandlePanelIds.ts

@@ -6,10 +6,10 @@ export function getResizeHandlePanelIds(
   groupId: string,
   handleId: string,
   panelsArray: PanelData[],
-  panelGroupElement: ParentNode
+  scope: ParentNode | HTMLElement = document
 ): [idBefore: string | null, idAfter: string | null] {
-  const handle = getResizeHandleElement(handleId, panelGroupElement);
-  const handles = getResizeHandleElementsForGroup(groupId, panelGroupElement);
+  const handle = getResizeHandleElement(handleId, scope);
+  const handles = getResizeHandleElementsForGroup(groupId, scope);
   const index = handle ? handles.indexOf(handle) : -1;
 
   const idBefore: string | null = panelsArray[index]?.id ?? null;

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

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

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

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

package/src/utils/dom/calculateAvailablePanelSizeInPixels.ts

@@ -1,34 +0,0 @@
-import { getPanelGroupElement } from "./getPanelGroupElement";
-import { getResizeHandleElementsForGroup } from "./getResizeHandleElementsForGroup";
-
-export function calculateAvailablePanelSizeInPixels(
-  groupId: string,
-  panelGroupElement: HTMLElement
-): number {
-  if (panelGroupElement == null) {
-    return NaN;
-  }
-
-  const direction = panelGroupElement.getAttribute(
-    "data-panel-group-direction"
-  );
-  const resizeHandles = getResizeHandleElementsForGroup(
-    groupId,
-    panelGroupElement
-  );
-  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)
-    );
-  }
-}