react-resizable-panels - npm Package Compare versions

Comparing version 1.0.8 to 1.0.9

CHANGELOG.md

 # Changelog
 
+## 1.0.9
+
+- DOM util methods scope param defaults to `document` (#262)
+- Updating a `Panel`'s pixel constraints will trigger revalidation of the `Panel`'s size (#266)
+
 ## 1.0.8
@@ -4,0 +9,0 @@

dist/declarations/src/index.d.ts

@@ -5,4 +5,2 @@ import { Panel } from "./Panel.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";
@@ -18,2 +16,2 @@ import { getPanelElementsForGroup } from "./utils/dom/getPanelElementsForGroup.js";
 import type { PanelResizeHandleOnDragging, PanelResizeHandleProps } from "./PanelResizeHandle.js";
-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, };
+export { ImperativePanelGroupHandle, ImperativePanelHandle, PanelGroupOnLayout, PanelGroupProps, PanelGroupStorage, PanelOnCollapse, PanelOnExpand, PanelOnResize, PanelProps, PanelResizeHandleOnDragging, PanelResizeHandleProps, Panel, PanelGroup, PanelResizeHandle, assert, getPanelElement, getPanelElementsForGroup, getPanelGroupElement, getResizeHandleElement, getResizeHandleElementIndex, getResizeHandleElementsForGroup, getResizeHandlePanelIds, };

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

@@ -1,1 +0,1 @@
-export declare function getPanelElement(id: string, panelGroupElement: HTMLElement): HTMLElement | null;
+export declare function getPanelElement(id: string, scope?: ParentNode | HTMLElement): HTMLElement | null;

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

@@ -1,1 +0,1 @@
-export declare function getPanelElementsForGroup(groupId: string, panelGroupElement: HTMLElement): HTMLElement[];
+export declare function getPanelElementsForGroup(groupId: string, scope?: ParentNode | HTMLElement): HTMLElement[];

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

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

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

@@ -1,1 +0,1 @@
-export declare function getResizeHandleElement(id: string, panelGroupElement: ParentNode): HTMLElement | null;
+export declare function getResizeHandleElement(id: string, scope?: ParentNode | HTMLElement): HTMLElement | null;

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

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

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

@@ -1,1 +0,1 @@
-export declare function getResizeHandleElementsForGroup(groupId: string, panelGroupElement: ParentNode): HTMLElement[];
+export declare function getResizeHandleElementsForGroup(groupId: string, scope?: ParentNode | HTMLElement): HTMLElement[];

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

 import { PanelData } from "../../Panel.js";
-export declare function getResizeHandlePanelIds(groupId: string, handleId: string, panelsArray: PanelData[], panelGroupElement: ParentNode): [idBefore: string | null, idAfter: string | null];
+export declare function getResizeHandlePanelIds(groupId: string, handleId: string, panelsArray: PanelData[], scope?: ParentNode | HTMLElement): [idBefore: string | null, idAfter: string | null];

dist/react-resizable-panels.browser.cjs.js

@@ -94,2 +94,3 @@ 'use strict';
     isPanelCollapsed,
+    reevaluatePanelConstraints,
     registerPanel,
@@ -125,2 +126,5 @@ resizePanel,
     } = panelDataRef.current;
+    const prevConstraints = {
+      ...constraints
+    };
     panelDataRef.current.id = panelId;
@@ -137,2 +141,8 @@ panelDataRef.current.idIsFromProps = idFromProps !== undefined;
     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);
+    }
   });
@@ -525,8 +535,8 @@ useIsomorphicLayoutEffect(() => {
 
-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);
@@ -541,3 +551,3 @@ return index !== null && index !== void 0 ? index : null;
 
-function getPanelGroupElement(id, rootElement) {
+function getPanelGroupElement(id, rootElement = document) {
   var _dataset;
@@ -557,4 +567,4 @@ //If the root element is the PanelGroup
 
-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) {
@@ -566,6 +576,6 @@ return element;
 
-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;
@@ -1555,2 +1565,33 @@ 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 reevaluatePanelConstraints = useCallback((panelData, prevConstraints) => {
+    const {
+      layout,
+      panelDataArray
+    } = eagerValuesRef.current;
+    const {
+      collapsedSize: prevCollapsedSize = 0,
+      collapsible: prevCollapsible,
+      defaultSize: prevDefaultSize,
+      maxSize: prevMaxSize = 100,
+      minSize: prevMinSize = 0
+    } = prevConstraints;
+    const {
+      collapsedSize: nextCollapsedSize = 0,
+      collapsible: nextCollapsible,
+      defaultSize: nextDefaultSize,
+      maxSize: nextMaxSize = 100,
+      minSize: nextMinSize = 0
+    } = panelData.constraints;
+    const {
+      panelSize: prevPanelSize
+    } = panelDataHelper(panelDataArray, panelData, layout);
+    assert(prevPanelSize != null);
+    if (prevCollapsible && nextCollapsible && prevCollapsedSize !== nextCollapsedSize && prevPanelSize === prevCollapsedSize) {
+      resizePanel(panelData, nextCollapsedSize);
+    } else if (prevPanelSize < nextMinSize) {
+      resizePanel(panelData, nextMinSize);
+    } else if (prevPanelSize > nextMaxSize) {
+      resizePanel(panelData, nextMaxSize);
+    }
+  }, [resizePanel]);
   const startDragging = useCallback((dragHandleId, event) => {
@@ -1606,2 +1647,3 @@ const {
     isPanelExpanded,
+    reevaluatePanelConstraints,
     registerPanel,
@@ -1614,3 +1656,3 @@ registerResizeHandle,
     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 = {
@@ -1650,5 +1692,3 @@ display: "flex",
 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;
@@ -1658,3 +1698,3 @@ const pivotIndices = isLastPanel ? [panelIndex - 1, panelIndex] : [panelIndex, panelIndex + 1];
   return {
-    ...panelConstraints,
+    ...panelData.constraints,
     panelSize,
@@ -1866,35 +1906,4 @@ pivotIndices
 
-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) {
@@ -1906,4 +1915,4 @@ return element;
 
-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}"]`));
 }
@@ -1915,4 +1924,2 @@
 exports.assert = assert;
-exports.calculateAvailablePanelSizeInPixels = calculateAvailablePanelSizeInPixels;
-exports.getAvailableGroupSizePixels = getAvailableGroupSizePixels;
 exports.getPanelElement = getPanelElement;
@@ -1919,0 +1926,0 @@ exports.getPanelElementsForGroup = getPanelElementsForGroup;

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

@@ -70,2 +70,3 @@ import * as React from 'react';
     isPanelCollapsed,
+    reevaluatePanelConstraints,
     registerPanel,
@@ -101,2 +102,5 @@ resizePanel,
     } = panelDataRef.current;
+    const prevConstraints = {
+      ...constraints
+    };
     panelDataRef.current.id = panelId;
@@ -113,2 +117,8 @@ panelDataRef.current.idIsFromProps = idFromProps !== undefined;
     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);
+    }
   });
@@ -501,8 +511,8 @@ useIsomorphicLayoutEffect(() => {
 
-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);
@@ -517,3 +527,3 @@ return index !== null && index !== void 0 ? index : null;
 
-function getPanelGroupElement(id, rootElement) {
+function getPanelGroupElement(id, rootElement = document) {
   var _dataset;
@@ -533,4 +543,4 @@ //If the root element is the PanelGroup
 
-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) {
@@ -542,6 +552,6 @@ return element;
 
-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;
@@ -1531,2 +1541,33 @@ 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 reevaluatePanelConstraints = useCallback((panelData, prevConstraints) => {
+    const {
+      layout,
+      panelDataArray
+    } = eagerValuesRef.current;
+    const {
+      collapsedSize: prevCollapsedSize = 0,
+      collapsible: prevCollapsible,
+      defaultSize: prevDefaultSize,
+      maxSize: prevMaxSize = 100,
+      minSize: prevMinSize = 0
+    } = prevConstraints;
+    const {
+      collapsedSize: nextCollapsedSize = 0,
+      collapsible: nextCollapsible,
+      defaultSize: nextDefaultSize,
+      maxSize: nextMaxSize = 100,
+      minSize: nextMinSize = 0
+    } = panelData.constraints;
+    const {
+      panelSize: prevPanelSize
+    } = panelDataHelper(panelDataArray, panelData, layout);
+    assert(prevPanelSize != null);
+    if (prevCollapsible && nextCollapsible && prevCollapsedSize !== nextCollapsedSize && prevPanelSize === prevCollapsedSize) {
+      resizePanel(panelData, nextCollapsedSize);
+    } else if (prevPanelSize < nextMinSize) {
+      resizePanel(panelData, nextMinSize);
+    } else if (prevPanelSize > nextMaxSize) {
+      resizePanel(panelData, nextMaxSize);
+    }
+  }, [resizePanel]);
   const startDragging = useCallback((dragHandleId, event) => {
@@ -1582,2 +1623,3 @@ const {
     isPanelExpanded,
+    reevaluatePanelConstraints,
     registerPanel,
@@ -1590,3 +1632,3 @@ registerResizeHandle,
     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 = {
@@ -1626,5 +1668,3 @@ display: "flex",
 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;
@@ -1634,3 +1674,3 @@ const pivotIndices = isLastPanel ? [panelIndex - 1, panelIndex] : [panelIndex, panelIndex + 1];
   return {
-    ...panelConstraints,
+    ...panelData.constraints,
     panelSize,
@@ -1842,35 +1882,4 @@ pivotIndices
 
-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) {
@@ -1882,6 +1891,6 @@ return element;
 
-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 };

dist/react-resizable-panels.cjs.js

@@ -96,2 +96,3 @@ 'use strict';
     isPanelCollapsed,
+    reevaluatePanelConstraints,
     registerPanel,
@@ -127,2 +128,5 @@ resizePanel,
     } = panelDataRef.current;
+    const prevConstraints = {
+      ...constraints
+    };
     panelDataRef.current.id = panelId;
@@ -139,2 +143,8 @@ panelDataRef.current.idIsFromProps = idFromProps !== undefined;
     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);
+    }
   });
@@ -527,8 +537,8 @@ useIsomorphicLayoutEffect(() => {
 
-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);
@@ -543,3 +553,3 @@ return index !== null && index !== void 0 ? index : null;
 
-function getPanelGroupElement(id, rootElement) {
+function getPanelGroupElement(id, rootElement = document) {
   var _dataset;
@@ -559,4 +569,4 @@ //If the root element is the PanelGroup
 
-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) {
@@ -568,6 +578,6 @@ return element;
 
-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;
@@ -1557,2 +1567,33 @@ 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 reevaluatePanelConstraints = useCallback((panelData, prevConstraints) => {
+    const {
+      layout,
+      panelDataArray
+    } = eagerValuesRef.current;
+    const {
+      collapsedSize: prevCollapsedSize = 0,
+      collapsible: prevCollapsible,
+      defaultSize: prevDefaultSize,
+      maxSize: prevMaxSize = 100,
+      minSize: prevMinSize = 0
+    } = prevConstraints;
+    const {
+      collapsedSize: nextCollapsedSize = 0,
+      collapsible: nextCollapsible,
+      defaultSize: nextDefaultSize,
+      maxSize: nextMaxSize = 100,
+      minSize: nextMinSize = 0
+    } = panelData.constraints;
+    const {
+      panelSize: prevPanelSize
+    } = panelDataHelper(panelDataArray, panelData, layout);
+    assert(prevPanelSize != null);
+    if (prevCollapsible && nextCollapsible && prevCollapsedSize !== nextCollapsedSize && prevPanelSize === prevCollapsedSize) {
+      resizePanel(panelData, nextCollapsedSize);
+    } else if (prevPanelSize < nextMinSize) {
+      resizePanel(panelData, nextMinSize);
+    } else if (prevPanelSize > nextMaxSize) {
+      resizePanel(panelData, nextMaxSize);
+    }
+  }, [resizePanel]);
   const startDragging = useCallback((dragHandleId, event) => {
@@ -1608,2 +1649,3 @@ const {
     isPanelExpanded,
+    reevaluatePanelConstraints,
     registerPanel,
@@ -1616,3 +1658,3 @@ registerResizeHandle,
     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 = {
@@ -1652,5 +1694,3 @@ display: "flex",
 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;
@@ -1660,3 +1700,3 @@ const pivotIndices = isLastPanel ? [panelIndex - 1, panelIndex] : [panelIndex, panelIndex + 1];
   return {
-    ...panelConstraints,
+    ...panelData.constraints,
     panelSize,
@@ -1868,35 +1908,4 @@ pivotIndices
 
-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) {
@@ -1908,4 +1917,4 @@ return element;
 
-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}"]`));
 }
@@ -1917,4 +1926,2 @@
 exports.assert = assert;
-exports.calculateAvailablePanelSizeInPixels = calculateAvailablePanelSizeInPixels;
-exports.getAvailableGroupSizePixels = getAvailableGroupSizePixels;
 exports.getPanelElement = getPanelElement;
@@ -1921,0 +1928,0 @@ exports.getPanelElementsForGroup = getPanelElementsForGroup;

dist/react-resizable-panels.development.node.cjs.js

@@ -92,2 +92,3 @@ 'use strict';
     isPanelCollapsed,
+    reevaluatePanelConstraints,
     registerPanel,
@@ -469,8 +470,8 @@ resizePanel,
 
-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);
@@ -485,3 +486,3 @@ return index !== null && index !== void 0 ? index : null;
 
-function getPanelGroupElement(id, rootElement) {
+function getPanelGroupElement(id, rootElement = document) {
   var _dataset;
@@ -501,4 +502,4 @@ //If the root element is the PanelGroup
 
-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) {
@@ -510,6 +511,6 @@ return element;
 
-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;
@@ -1452,2 +1453,33 @@ 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 reevaluatePanelConstraints = useCallback((panelData, prevConstraints) => {
+    const {
+      layout,
+      panelDataArray
+    } = eagerValuesRef.current;
+    const {
+      collapsedSize: prevCollapsedSize = 0,
+      collapsible: prevCollapsible,
+      defaultSize: prevDefaultSize,
+      maxSize: prevMaxSize = 100,
+      minSize: prevMinSize = 0
+    } = prevConstraints;
+    const {
+      collapsedSize: nextCollapsedSize = 0,
+      collapsible: nextCollapsible,
+      defaultSize: nextDefaultSize,
+      maxSize: nextMaxSize = 100,
+      minSize: nextMinSize = 0
+    } = panelData.constraints;
+    const {
+      panelSize: prevPanelSize
+    } = panelDataHelper(panelDataArray, panelData, layout);
+    assert(prevPanelSize != null);
+    if (prevCollapsible && nextCollapsible && prevCollapsedSize !== nextCollapsedSize && prevPanelSize === prevCollapsedSize) {
+      resizePanel(panelData, nextCollapsedSize);
+    } else if (prevPanelSize < nextMinSize) {
+      resizePanel(panelData, nextMinSize);
+    } else if (prevPanelSize > nextMaxSize) {
+      resizePanel(panelData, nextMaxSize);
+    }
+  }, [resizePanel]);
   const startDragging = useCallback((dragHandleId, event) => {
@@ -1503,2 +1535,3 @@ const {
     isPanelExpanded,
+    reevaluatePanelConstraints,
     registerPanel,
@@ -1511,3 +1544,3 @@ registerResizeHandle,
     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 = {
@@ -1547,5 +1580,3 @@ display: "flex",
 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;
@@ -1555,3 +1586,3 @@ const pivotIndices = isLastPanel ? [panelIndex - 1, panelIndex] : [panelIndex, panelIndex + 1];
   return {
-    ...panelConstraints,
+    ...panelData.constraints,
     panelSize,
@@ -1763,35 +1794,4 @@ pivotIndices
 
-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) {
@@ -1803,4 +1803,4 @@ return element;
 
-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}"]`));
 }
@@ -1812,4 +1812,2 @@
 exports.assert = assert;
-exports.calculateAvailablePanelSizeInPixels = calculateAvailablePanelSizeInPixels;
-exports.getAvailableGroupSizePixels = getAvailableGroupSizePixels;
 exports.getPanelElement = getPanelElement;
@@ -1816,0 +1814,0 @@ exports.getPanelElementsForGroup = getPanelElementsForGroup;

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

@@ -68,2 +68,3 @@ import * as React from 'react';
     isPanelCollapsed,
+    reevaluatePanelConstraints,
     registerPanel,
@@ -445,8 +446,8 @@ resizePanel,
 
-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);
@@ -461,3 +462,3 @@ return index !== null && index !== void 0 ? index : null;
 
-function getPanelGroupElement(id, rootElement) {
+function getPanelGroupElement(id, rootElement = document) {
   var _dataset;
@@ -477,4 +478,4 @@ //If the root element is the PanelGroup
 
-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) {
@@ -486,6 +487,6 @@ return element;
 
-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;
@@ -1428,2 +1429,33 @@ 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 reevaluatePanelConstraints = useCallback((panelData, prevConstraints) => {
+    const {
+      layout,
+      panelDataArray
+    } = eagerValuesRef.current;
+    const {
+      collapsedSize: prevCollapsedSize = 0,
+      collapsible: prevCollapsible,
+      defaultSize: prevDefaultSize,
+      maxSize: prevMaxSize = 100,
+      minSize: prevMinSize = 0
+    } = prevConstraints;
+    const {
+      collapsedSize: nextCollapsedSize = 0,
+      collapsible: nextCollapsible,
+      defaultSize: nextDefaultSize,
+      maxSize: nextMaxSize = 100,
+      minSize: nextMinSize = 0
+    } = panelData.constraints;
+    const {
+      panelSize: prevPanelSize
+    } = panelDataHelper(panelDataArray, panelData, layout);
+    assert(prevPanelSize != null);
+    if (prevCollapsible && nextCollapsible && prevCollapsedSize !== nextCollapsedSize && prevPanelSize === prevCollapsedSize) {
+      resizePanel(panelData, nextCollapsedSize);
+    } else if (prevPanelSize < nextMinSize) {
+      resizePanel(panelData, nextMinSize);
+    } else if (prevPanelSize > nextMaxSize) {
+      resizePanel(panelData, nextMaxSize);
+    }
+  }, [resizePanel]);
   const startDragging = useCallback((dragHandleId, event) => {
@@ -1479,2 +1511,3 @@ const {
     isPanelExpanded,
+    reevaluatePanelConstraints,
     registerPanel,
@@ -1487,3 +1520,3 @@ registerResizeHandle,
     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 = {
@@ -1523,5 +1556,3 @@ display: "flex",
 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;
@@ -1531,3 +1562,3 @@ const pivotIndices = isLastPanel ? [panelIndex - 1, panelIndex] : [panelIndex, panelIndex + 1];
   return {
-    ...panelConstraints,
+    ...panelData.constraints,
     panelSize,
@@ -1739,35 +1770,4 @@ pivotIndices
 
-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) {
@@ -1779,6 +1779,6 @@ return element;
 
-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 };

dist/react-resizable-panels.esm.js

@@ -72,2 +72,3 @@ import * as React from 'react';
     isPanelCollapsed,
+    reevaluatePanelConstraints,
     registerPanel,
@@ -103,2 +104,5 @@ resizePanel,
     } = panelDataRef.current;
+    const prevConstraints = {
+      ...constraints
+    };
     panelDataRef.current.id = panelId;
@@ -115,2 +119,8 @@ panelDataRef.current.idIsFromProps = idFromProps !== undefined;
     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);
+    }
   });
@@ -503,8 +513,8 @@ useIsomorphicLayoutEffect(() => {
 
-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);
@@ -519,3 +529,3 @@ return index !== null && index !== void 0 ? index : null;
 
-function getPanelGroupElement(id, rootElement) {
+function getPanelGroupElement(id, rootElement = document) {
   var _dataset;
@@ -535,4 +545,4 @@ //If the root element is the PanelGroup
 
-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) {
@@ -544,6 +554,6 @@ return element;
 
-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;
@@ -1533,2 +1543,33 @@ 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 reevaluatePanelConstraints = useCallback((panelData, prevConstraints) => {
+    const {
+      layout,
+      panelDataArray
+    } = eagerValuesRef.current;
+    const {
+      collapsedSize: prevCollapsedSize = 0,
+      collapsible: prevCollapsible,
+      defaultSize: prevDefaultSize,
+      maxSize: prevMaxSize = 100,
+      minSize: prevMinSize = 0
+    } = prevConstraints;
+    const {
+      collapsedSize: nextCollapsedSize = 0,
+      collapsible: nextCollapsible,
+      defaultSize: nextDefaultSize,
+      maxSize: nextMaxSize = 100,
+      minSize: nextMinSize = 0
+    } = panelData.constraints;
+    const {
+      panelSize: prevPanelSize
+    } = panelDataHelper(panelDataArray, panelData, layout);
+    assert(prevPanelSize != null);
+    if (prevCollapsible && nextCollapsible && prevCollapsedSize !== nextCollapsedSize && prevPanelSize === prevCollapsedSize) {
+      resizePanel(panelData, nextCollapsedSize);
+    } else if (prevPanelSize < nextMinSize) {
+      resizePanel(panelData, nextMinSize);
+    } else if (prevPanelSize > nextMaxSize) {
+      resizePanel(panelData, nextMaxSize);
+    }
+  }, [resizePanel]);
   const startDragging = useCallback((dragHandleId, event) => {
@@ -1584,2 +1625,3 @@ const {
     isPanelExpanded,
+    reevaluatePanelConstraints,
     registerPanel,
@@ -1592,3 +1634,3 @@ registerResizeHandle,
     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 = {
@@ -1628,5 +1670,3 @@ display: "flex",
 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;
@@ -1636,3 +1676,3 @@ const pivotIndices = isLastPanel ? [panelIndex - 1, panelIndex] : [panelIndex, panelIndex + 1];
   return {
-    ...panelConstraints,
+    ...panelData.constraints,
     panelSize,
@@ -1844,35 +1884,4 @@ pivotIndices
 
-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) {
@@ -1884,6 +1893,6 @@ return element;
 
-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 };

dist/react-resizable-panels.node.cjs.js

@@ -92,2 +92,3 @@ 'use strict';
     isPanelCollapsed,
+    reevaluatePanelConstraints,
     registerPanel,
@@ -458,8 +459,8 @@ resizePanel,
 
-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);
@@ -474,3 +475,3 @@ return index !== null && index !== void 0 ? index : null;
 
-function getPanelGroupElement(id, rootElement) {
+function getPanelGroupElement(id, rootElement = document) {
   var _dataset;
@@ -490,4 +491,4 @@ //If the root element is the PanelGroup
 
-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) {
@@ -499,6 +500,6 @@ return element;
 
-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;
@@ -1351,2 +1352,33 @@ 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 reevaluatePanelConstraints = useCallback((panelData, prevConstraints) => {
+    const {
+      layout,
+      panelDataArray
+    } = eagerValuesRef.current;
+    const {
+      collapsedSize: prevCollapsedSize = 0,
+      collapsible: prevCollapsible,
+      defaultSize: prevDefaultSize,
+      maxSize: prevMaxSize = 100,
+      minSize: prevMinSize = 0
+    } = prevConstraints;
+    const {
+      collapsedSize: nextCollapsedSize = 0,
+      collapsible: nextCollapsible,
+      defaultSize: nextDefaultSize,
+      maxSize: nextMaxSize = 100,
+      minSize: nextMinSize = 0
+    } = panelData.constraints;
+    const {
+      panelSize: prevPanelSize
+    } = panelDataHelper(panelDataArray, panelData, layout);
+    assert(prevPanelSize != null);
+    if (prevCollapsible && nextCollapsible && prevCollapsedSize !== nextCollapsedSize && prevPanelSize === prevCollapsedSize) {
+      resizePanel(panelData, nextCollapsedSize);
+    } else if (prevPanelSize < nextMinSize) {
+      resizePanel(panelData, nextMinSize);
+    } else if (prevPanelSize > nextMaxSize) {
+      resizePanel(panelData, nextMaxSize);
+    }
+  }, [resizePanel]);
   const startDragging = useCallback((dragHandleId, event) => {
@@ -1402,2 +1434,3 @@ const {
     isPanelExpanded,
+    reevaluatePanelConstraints,
     registerPanel,
@@ -1410,3 +1443,3 @@ registerResizeHandle,
     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 = {
@@ -1446,5 +1479,3 @@ display: "flex",
 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;
@@ -1454,3 +1485,3 @@ const pivotIndices = isLastPanel ? [panelIndex - 1, panelIndex] : [panelIndex, panelIndex + 1];
   return {
-    ...panelConstraints,
+    ...panelData.constraints,
     panelSize,
@@ -1662,35 +1693,4 @@ pivotIndices
 
-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) {
@@ -1702,4 +1702,4 @@ return element;
 
-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}"]`));
 }
@@ -1711,4 +1711,2 @@
 exports.assert = assert;
-exports.calculateAvailablePanelSizeInPixels = calculateAvailablePanelSizeInPixels;
-exports.getAvailableGroupSizePixels = getAvailableGroupSizePixels;
 exports.getPanelElement = getPanelElement;
@@ -1715,0 +1713,0 @@ exports.getPanelElementsForGroup = getPanelElementsForGroup;

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

@@ -68,2 +68,3 @@ import * as React from 'react';
     isPanelCollapsed,
+    reevaluatePanelConstraints,
     registerPanel,
@@ -434,8 +435,8 @@ resizePanel,
 
-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);
@@ -450,3 +451,3 @@ return index !== null && index !== void 0 ? index : null;
 
-function getPanelGroupElement(id, rootElement) {
+function getPanelGroupElement(id, rootElement = document) {
   var _dataset;
@@ -466,4 +467,4 @@ //If the root element is the PanelGroup
 
-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) {
@@ -475,6 +476,6 @@ return element;
 
-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;
@@ -1327,2 +1328,33 @@ 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 reevaluatePanelConstraints = useCallback((panelData, prevConstraints) => {
+    const {
+      layout,
+      panelDataArray
+    } = eagerValuesRef.current;
+    const {
+      collapsedSize: prevCollapsedSize = 0,
+      collapsible: prevCollapsible,
+      defaultSize: prevDefaultSize,
+      maxSize: prevMaxSize = 100,
+      minSize: prevMinSize = 0
+    } = prevConstraints;
+    const {
+      collapsedSize: nextCollapsedSize = 0,
+      collapsible: nextCollapsible,
+      defaultSize: nextDefaultSize,
+      maxSize: nextMaxSize = 100,
+      minSize: nextMinSize = 0
+    } = panelData.constraints;
+    const {
+      panelSize: prevPanelSize
+    } = panelDataHelper(panelDataArray, panelData, layout);
+    assert(prevPanelSize != null);
+    if (prevCollapsible && nextCollapsible && prevCollapsedSize !== nextCollapsedSize && prevPanelSize === prevCollapsedSize) {
+      resizePanel(panelData, nextCollapsedSize);
+    } else if (prevPanelSize < nextMinSize) {
+      resizePanel(panelData, nextMinSize);
+    } else if (prevPanelSize > nextMaxSize) {
+      resizePanel(panelData, nextMaxSize);
+    }
+  }, [resizePanel]);
   const startDragging = useCallback((dragHandleId, event) => {
@@ -1378,2 +1410,3 @@ const {
     isPanelExpanded,
+    reevaluatePanelConstraints,
     registerPanel,
@@ -1386,3 +1419,3 @@ registerResizeHandle,
     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 = {
@@ -1422,5 +1455,3 @@ display: "flex",
 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;
@@ -1430,3 +1461,3 @@ const pivotIndices = isLastPanel ? [panelIndex - 1, panelIndex] : [panelIndex, panelIndex + 1];
   return {
-    ...panelConstraints,
+    ...panelData.constraints,
     panelSize,
@@ -1638,35 +1669,4 @@ pivotIndices
 
-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) {
@@ -1678,6 +1678,6 @@ return element;
 
-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.json

 {
   "name": "react-resizable-panels",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "React components for resizable panel groups/layouts",
@@ -5,0 +5,0 @@ "author": "Brian Vaughn <[e-mail]>",

README.md

@@ -55,17 +55,18 @@ # react-resizable-panels
 
-| prop            | type                            | description                                                                                   |
-| :-------------- | :------------------------------ | :-------------------------------------------------------------------------------------------- |
-| `children`      | `ReactNode`                     | Arbitrary React element(s)                                                                    |
-| `className`     | `?string`                       | Class name to attach to root element                                                          |
-| `collapsedSize` | `?number=0`                     | Panel should collapse to this size                                                            |
-| `collapsible`   | `?boolean=false`                | Panel should collapse when resized beyond its `minSize`                                       |
-| `defaultSize`   | `?number`                       | Initial size of panel (numeric value between 1-100)                                           |
-| `id`            | `?string`                       | Panel id (unique within group); falls back to `useId` when not provided                       |
-| `maxSize`       | `?number = 100`                 | Maximum allowable size of panel (numeric value between 1-100); defaults to `100`              |
-| `minSize`       | `?number = 10`                  | Minimum allowable size of panel (numeric value between 1-100); defaults to `10`               |
-| `onCollapse`    | `?(collapsed: boolean) => void` | Called when panel is collapsed; `collapsed` boolean parameter reflecting the new state        |
-| `onResize`      | `?(size: number) => void`       | Called when panel is resized; `size` parameter is a numeric value between 1-100. <sup>1</sup> |
-| `order`         | `?number`                       | Order of panel within group; required for groups with conditionally rendered panels           |
-| `style`         | `?CSSProperties`                | CSS style to attach to root element                                                           |
-| `tagName`       | `?string = "div"`               | HTML element tag name for root element                                                        |
+| prop            | type                      | description                                                                                   |
+| :-------------- | :------------------------ | :-------------------------------------------------------------------------------------------- |
+| `children`      | `ReactNode`               | Arbitrary React element(s)                                                                    |
+| `className`     | `?string`                 | Class name to attach to root element                                                          |
+| `collapsedSize` | `?number=0`               | Panel should collapse to this size                                                            |
+| `collapsible`   | `?boolean=false`          | Panel should collapse when resized beyond its `minSize`                                       |
+| `defaultSize`   | `?number`                 | Initial size of panel (numeric value between 1-100)                                           |
+| `id`            | `?string`                 | Panel id (unique within group); falls back to `useId` when not provided                       |
+| `maxSize`       | `?number = 100`           | Maximum allowable size of panel (numeric value between 1-100); defaults to `100`              |
+| `minSize`       | `?number = 10`            | Minimum allowable size of panel (numeric value between 1-100); defaults to `10`               |
+| `onCollapse`    | `?() => void`             | Called when panel is collapsed                                                                |
+| `onExpande`     | `?() => void`             | Called when panel is expanded                                                                 |
+| `onResize`      | `?(size: number) => void` | Called when panel is resized; `size` parameter is a numeric value between 1-100. <sup>1</sup> |
+| `order`         | `?number`                 | Order of panel within group; required for groups with conditionally rendered panels           |
+| `style`         | `?CSSProperties`          | CSS style to attach to root element                                                           |
+| `tagName`       | `?string = "div"`         | HTML element tag name for root element                                                        |
 
@@ -72,0 +73,0 @@ <sup>1</sup>: If any `Panel` has an `onResize` callback, the `order` prop should be provided for all `Panel`s.

src/index.ts

@@ -5,4 +5,2 @@ import { Panel } from "./Panel";
 import { assert } from "./utils/assert";
-import { calculateAvailablePanelSizeInPixels } from "./utils/dom/calculateAvailablePanelSizeInPixels";
-import { getAvailableGroupSizePixels } from "./utils/dom/getAvailableGroupSizePixels";
 import { getPanelElement } from "./utils/dom/getPanelElement";
@@ -57,4 +55,2 @@ import { getPanelElementsForGroup } from "./utils/dom/getPanelElementsForGroup";
   // DOM helpers
-  calculateAvailablePanelSizeInPixels,
-  getAvailableGroupSizePixels,
   getPanelElement,
@@ -61,0 +57,0 @@ getPanelElementsForGroup,

src/Panel.ts

@@ -111,2 +111,3 @@ import { isBrowser } from "#is-browser";
     isPanelCollapsed,
+    reevaluatePanelConstraints,
     registerPanel,
@@ -159,2 +160,4 @@ resizePanel,
 
+    const prevConstraints = { ...constraints };
+
     panelDataRef.current.id = panelId;
@@ -173,2 +176,13 @@ panelDataRef.current.idIsFromProps = idFromProps !== undefined;
     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);
+    }
   });
@@ -175,0 +189,0 @@

src/PanelGroup.ts

 import { isDevelopment } from "#is-development";
-import { PanelData } from "./Panel";
+import { PanelConstraints, PanelData } from "./Panel";
 import {
@@ -722,2 +722,45 @@ DragState,
 
+  const reevaluatePanelConstraints = useCallback(
+    (panelData: PanelData, prevConstraints: PanelConstraints) => {
+      const { layout, panelDataArray } = eagerValuesRef.current;
+
+      const {
+        collapsedSize: prevCollapsedSize = 0,
+        collapsible: prevCollapsible,
+        defaultSize: prevDefaultSize,
+        maxSize: prevMaxSize = 100,
+        minSize: prevMinSize = 0,
+      } = prevConstraints;
+
+      const {
+        collapsedSize: nextCollapsedSize = 0,
+        collapsible: nextCollapsible,
+        defaultSize: nextDefaultSize,
+        maxSize: nextMaxSize = 100,
+        minSize: nextMinSize = 0,
+      } = panelData.constraints;
+
+      const { panelSize: prevPanelSize } = panelDataHelper(
+        panelDataArray,
+        panelData,
+        layout
+      );
+      assert(prevPanelSize != null);
+
+      if (
+        prevCollapsible &&
+        nextCollapsible &&
+        prevCollapsedSize !== nextCollapsedSize &&
+        prevPanelSize === prevCollapsedSize
+      ) {
+        resizePanel(panelData, nextCollapsedSize);
+      } else if (prevPanelSize < nextMinSize) {
+        resizePanel(panelData, nextMinSize);
+      } else if (prevPanelSize > nextMaxSize) {
+        resizePanel(panelData, nextMaxSize);
+      }
+    },
+    [resizePanel]
+  );
+
   const startDragging = useCallback(
@@ -785,2 +828,3 @@ (dragHandleId: string, event: ResizeEvent) => {
         isPanelExpanded,
+        reevaluatePanelConstraints,
         registerPanel,
@@ -804,2 +848,3 @@ registerResizeHandle,
       isPanelExpanded,
+      reevaluatePanelConstraints,
       registerPanel,
@@ -864,8 +909,3 @@ registerResizeHandle,
 ) {
-  const panelConstraintsArray = panelDataArray.map(
-    (panelData) => panelData.constraints
-  );
-
   const panelIndex = findPanelDataIndex(panelDataArray, panelData);
-  const panelConstraints = panelConstraintsArray[panelIndex];
 
@@ -880,3 +920,3 @@ const isLastPanel = panelIndex === panelDataArray.length - 1;
   return {
-    ...panelConstraints,
+    ...panelData.constraints,
     panelSize,
@@ -883,0 +923,0 @@ pivotIndices,

src/PanelGroupContext.ts

@@ -1,2 +0,2 @@
-import { PanelData } from "./Panel";
+import { PanelConstraints, PanelData } from "./Panel";
 import { CSSProperties, createContext } from "./vendor/react";
@@ -27,2 +27,6 @@
   isPanelExpanded: (panelData: PanelData) => boolean;
+  reevaluatePanelConstraints: (
+    panelData: PanelData,
+    prevConstraints: PanelConstraints
+  ) => void;
   registerPanel: (panelData: PanelData) => void;
@@ -29,0 +33,0 @@ registerResizeHandle: (dragHandleId: string) => ResizeHandler;

src/utils/dom/getPanelElement.ts

 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) {
@@ -7,0 +7,0 @@ return element as HTMLElement;

src/utils/dom/getPanelElementsForGroup.ts

 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}"]`)
   );
 }

src/utils/dom/getPanelGroupElement.ts

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

src/utils/dom/getResizeHandleElement.ts

 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) {
@@ -9,0 +7,0 @@ return element as HTMLElement;

src/utils/dom/getResizeHandleElementIndex.ts

@@ -6,5 +6,5 @@ import { getResizeHandleElementsForGroup } from "./getResizeHandleElementsForGroup";
   id: string,
-  panelGroupElement: ParentNode
+  scope: ParentNode | HTMLElement = document
 ): number | null {
-  const handles = getResizeHandleElementsForGroup(groupId, panelGroupElement);
+  const handles = getResizeHandleElementsForGroup(groupId, scope);
   const index = handles.findIndex(
@@ -11,0 +11,0 @@ (handle) => handle.getAttribute("data-panel-resize-handle-id") === id

src/utils/dom/getResizeHandleElementsForGroup.ts

 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}"]`
@@ -8,0 +8,0 @@ )

src/utils/dom/getResizeHandlePanelIds.ts

@@ -9,6 +9,6 @@ import { PanelData } from "../../Panel";
   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;
@@ -15,0 +15,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

964646

increased by0.41%

Lines of code

27665

increased by0.58%

Number of lines in readme file

302

increased by0.33%

Worsened metrics

Number of package files

99

decreased by-3.88%

No dependency changes