react-resizable-panels 1.0.8 → 1.0.9

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

@@ -93,6 +93,7 @@ function PanelWithForwardedRef({
     getPanelStyle,
     groupId,
     isPanelCollapsed,
+    reevaluatePanelConstraints,
     registerPanel,
     resizePanel,
     unregisterPanel
@@ -134,6 +135,9 @@ function PanelWithForwardedRef({
       callbacks,
       constraints
     } = panelDataRef.current;
+    const prevConstraints = {
+      ...constraints
+    };
     panelDataRef.current.id = panelId;
     panelDataRef.current.idIsFromProps = idFromProps !== undefined;
     panelDataRef.current.order = order;
@@ -145,6 +149,12 @@ 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(() => {
     const panelData = panelDataRef.current;
@@ -532,12 +542,12 @@ function calculateAriaValues({
   };
 }
 
-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;
 }
@@ -547,7 +557,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) {
@@ -562,18 +572,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;
@@ -1658,6 +1668,37 @@ function PanelGroupWithForwardedRef({
       callPanelCallbacks(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
     }
   }, []);
+  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) => {
     const {
       direction
@@ -1708,6 +1749,7 @@ function PanelGroupWithForwardedRef({
     groupId,
     isPanelCollapsed,
     isPanelExpanded,
+    reevaluatePanelConstraints,
     registerPanel,
     registerResizeHandle,
     resizePanel,
@@ -1715,7 +1757,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",
@@ -1750,14 +1792,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
   };
@@ -1964,55 +2004,22 @@ 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}"]`));
 }
 
 exports.Panel = Panel;
 exports.PanelGroup = PanelGroup;
 exports.PanelResizeHandle = PanelResizeHandle;
 exports.assert = assert;
-exports.calculateAvailablePanelSizeInPixels = calculateAvailablePanelSizeInPixels;
-exports.getAvailableGroupSizePixels = getAvailableGroupSizePixels;
 exports.getPanelElement = getPanelElement;
 exports.getPanelElementsForGroup = getPanelElementsForGroup;
 exports.getPanelGroupElement = getPanelGroupElement;

package/dist/react-resizable-panels.development.cjs.mjs

@@ -3,8 +3,6 @@ export {
   PanelGroup,
   PanelResizeHandle,
   assert,
-  calculateAvailablePanelSizeInPixels,
-  getAvailableGroupSizePixels,
   getPanelElement,
   getPanelElementsForGroup,
   getPanelGroupElement,

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

@@ -69,6 +69,7 @@ function PanelWithForwardedRef({
     getPanelStyle,
     groupId,
     isPanelCollapsed,
+    reevaluatePanelConstraints,
     registerPanel,
     resizePanel,
     unregisterPanel
@@ -110,6 +111,9 @@ function PanelWithForwardedRef({
       callbacks,
       constraints
     } = panelDataRef.current;
+    const prevConstraints = {
+      ...constraints
+    };
     panelDataRef.current.id = panelId;
     panelDataRef.current.idIsFromProps = idFromProps !== undefined;
     panelDataRef.current.order = order;
@@ -121,6 +125,12 @@ 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(() => {
     const panelData = panelDataRef.current;
@@ -508,12 +518,12 @@ function calculateAriaValues({
   };
 }
 
-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;
 }
@@ -523,7 +533,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) {
@@ -538,18 +548,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;
@@ -1634,6 +1644,37 @@ function PanelGroupWithForwardedRef({
       callPanelCallbacks(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
     }
   }, []);
+  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) => {
     const {
       direction
@@ -1684,6 +1725,7 @@ function PanelGroupWithForwardedRef({
     groupId,
     isPanelCollapsed,
     isPanelExpanded,
+    reevaluatePanelConstraints,
     registerPanel,
     registerResizeHandle,
     resizePanel,
@@ -1691,7 +1733,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",
@@ -1726,14 +1768,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
   };
@@ -1940,47 +1980,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/dist/react-resizable-panels.development.node.cjs.js

@@ -89,6 +89,7 @@ function PanelWithForwardedRef({
     getPanelStyle,
     groupId,
     isPanelCollapsed,
+    reevaluatePanelConstraints,
     registerPanel,
     resizePanel,
     unregisterPanel
@@ -465,12 +466,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;
 }
@@ -480,7 +481,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) {
@@ -495,18 +496,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;
@@ -1444,6 +1445,37 @@ function PanelGroupWithForwardedRef({
       callPanelCallbacks(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
     }
   }, []);
+  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) => {
     const {
       direction
@@ -1494,6 +1526,7 @@ function PanelGroupWithForwardedRef({
     groupId,
     isPanelCollapsed,
     isPanelExpanded,
+    reevaluatePanelConstraints,
     registerPanel,
     registerResizeHandle,
     resizePanel,
@@ -1501,7 +1534,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",
@@ -1536,14 +1569,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
   };
@@ -1750,55 +1781,22 @@ 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}"]`));
 }
 
 exports.Panel = Panel;
 exports.PanelGroup = PanelGroup;
 exports.PanelResizeHandle = PanelResizeHandle;
 exports.assert = assert;
-exports.calculateAvailablePanelSizeInPixels = calculateAvailablePanelSizeInPixels;
-exports.getAvailableGroupSizePixels = getAvailableGroupSizePixels;
 exports.getPanelElement = getPanelElement;
 exports.getPanelElementsForGroup = getPanelElementsForGroup;
 exports.getPanelGroupElement = getPanelGroupElement;

package/dist/react-resizable-panels.development.node.cjs.mjs

@@ -3,8 +3,6 @@ export {
   PanelGroup,
   PanelResizeHandle,
   assert,
-  calculateAvailablePanelSizeInPixels,
-  getAvailableGroupSizePixels,
   getPanelElement,
   getPanelElementsForGroup,
   getPanelGroupElement,