react-resizable-panels 1.0.8 → 1.0.10

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

@@ -67,6 +67,7 @@ function PanelWithForwardedRef({
     getPanelStyle,
     groupId,
     isPanelCollapsed,
+    reevaluatePanelConstraints,
     registerPanel,
     resizePanel,
     unregisterPanel
@@ -103,6 +104,9 @@ function PanelWithForwardedRef({
       callbacks,
       constraints
     } = panelDataRef.current;
+    const prevConstraints = {
+      ...constraints
+    };
     panelDataRef.current.id = panelId;
     panelDataRef.current.idIsFromProps = idFromProps !== undefined;
     panelDataRef.current.order = order;
@@ -114,6 +118,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;
@@ -501,12 +511,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;
 }
@@ -516,7 +526,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) {
@@ -531,18 +541,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;
@@ -1627,6 +1637,35 @@ function PanelGroupWithForwardedRef({
       callPanelCallbacks(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
     }
   }, []);
+  const reevaluatePanelConstraints = useCallback((panelData, prevConstraints) => {
+    const {
+      layout,
+      panelDataArray
+    } = eagerValuesRef.current;
+    const {
+      collapsedSize: prevCollapsedSize = 0,
+      collapsible: prevCollapsible
+    } = prevConstraints;
+    const {
+      collapsedSize: nextCollapsedSize = 0,
+      collapsible: nextCollapsible,
+      maxSize: nextMaxSize = 100,
+      minSize: nextMinSize = 0
+    } = panelData.constraints;
+    const {
+      panelSize: prevPanelSize
+    } = panelDataHelper(panelDataArray, panelData, layout);
+    assert(prevPanelSize != null);
+    if (prevCollapsible && nextCollapsible && prevPanelSize === prevCollapsedSize) {
+      if (prevCollapsedSize !== nextCollapsedSize) {
+        resizePanel(panelData, nextCollapsedSize);
+      }
+    } else if (prevPanelSize < nextMinSize) {
+      resizePanel(panelData, nextMinSize);
+    } else if (prevPanelSize > nextMaxSize) {
+      resizePanel(panelData, nextMaxSize);
+    }
+  }, [resizePanel]);
   const startDragging = useCallback((dragHandleId, event) => {
     const {
       direction
@@ -1677,6 +1716,7 @@ function PanelGroupWithForwardedRef({
     groupId,
     isPanelCollapsed,
     isPanelExpanded,
+    reevaluatePanelConstraints,
     registerPanel,
     registerResizeHandle,
     resizePanel,
@@ -1684,7 +1724,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",
@@ -1719,14 +1759,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
   };
@@ -1933,47 +1971,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.browser.esm.js

@@ -67,6 +67,7 @@ function PanelWithForwardedRef({
     getPanelStyle,
     groupId,
     isPanelCollapsed,
+    reevaluatePanelConstraints,
     registerPanel,
     resizePanel,
     unregisterPanel
@@ -97,6 +98,9 @@ function PanelWithForwardedRef({
       callbacks,
       constraints
     } = panelDataRef.current;
+    const prevConstraints = {
+      ...constraints
+    };
     panelDataRef.current.id = panelId;
     panelDataRef.current.idIsFromProps = idFromProps !== undefined;
     panelDataRef.current.order = order;
@@ -108,6 +112,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;
@@ -495,12 +505,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;
 }
@@ -510,7 +520,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) {
@@ -525,18 +535,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;
@@ -1521,6 +1531,35 @@ function PanelGroupWithForwardedRef({
       callPanelCallbacks(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
     }
   }, []);
+  const reevaluatePanelConstraints = useCallback((panelData, prevConstraints) => {
+    const {
+      layout,
+      panelDataArray
+    } = eagerValuesRef.current;
+    const {
+      collapsedSize: prevCollapsedSize = 0,
+      collapsible: prevCollapsible
+    } = prevConstraints;
+    const {
+      collapsedSize: nextCollapsedSize = 0,
+      collapsible: nextCollapsible,
+      maxSize: nextMaxSize = 100,
+      minSize: nextMinSize = 0
+    } = panelData.constraints;
+    const {
+      panelSize: prevPanelSize
+    } = panelDataHelper(panelDataArray, panelData, layout);
+    assert(prevPanelSize != null);
+    if (prevCollapsible && nextCollapsible && prevPanelSize === prevCollapsedSize) {
+      if (prevCollapsedSize !== nextCollapsedSize) {
+        resizePanel(panelData, nextCollapsedSize);
+      }
+    } else if (prevPanelSize < nextMinSize) {
+      resizePanel(panelData, nextMinSize);
+    } else if (prevPanelSize > nextMaxSize) {
+      resizePanel(panelData, nextMaxSize);
+    }
+  }, [resizePanel]);
   const startDragging = useCallback((dragHandleId, event) => {
     const {
       direction
@@ -1571,6 +1610,7 @@ function PanelGroupWithForwardedRef({
     groupId,
     isPanelCollapsed,
     isPanelExpanded,
+    reevaluatePanelConstraints,
     registerPanel,
     registerResizeHandle,
     resizePanel,
@@ -1578,7 +1618,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",
@@ -1613,14 +1653,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
   };
@@ -1827,47 +1865,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.cjs.js

@@ -93,6 +93,7 @@ function PanelWithForwardedRef({
     getPanelStyle,
     groupId,
     isPanelCollapsed,
+    reevaluatePanelConstraints,
     registerPanel,
     resizePanel,
     unregisterPanel
@@ -123,6 +124,9 @@ function PanelWithForwardedRef({
       callbacks,
       constraints
     } = panelDataRef.current;
+    const prevConstraints = {
+      ...constraints
+    };
     panelDataRef.current.id = panelId;
     panelDataRef.current.idIsFromProps = idFromProps !== undefined;
     panelDataRef.current.order = order;
@@ -134,6 +138,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;
@@ -521,12 +531,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;
 }
@@ -536,7 +546,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) {
@@ -551,18 +561,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;
@@ -1547,6 +1557,35 @@ function PanelGroupWithForwardedRef({
       callPanelCallbacks(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
     }
   }, []);
+  const reevaluatePanelConstraints = useCallback((panelData, prevConstraints) => {
+    const {
+      layout,
+      panelDataArray
+    } = eagerValuesRef.current;
+    const {
+      collapsedSize: prevCollapsedSize = 0,
+      collapsible: prevCollapsible
+    } = prevConstraints;
+    const {
+      collapsedSize: nextCollapsedSize = 0,
+      collapsible: nextCollapsible,
+      maxSize: nextMaxSize = 100,
+      minSize: nextMinSize = 0
+    } = panelData.constraints;
+    const {
+      panelSize: prevPanelSize
+    } = panelDataHelper(panelDataArray, panelData, layout);
+    assert(prevPanelSize != null);
+    if (prevCollapsible && nextCollapsible && prevPanelSize === prevCollapsedSize) {
+      if (prevCollapsedSize !== nextCollapsedSize) {
+        resizePanel(panelData, nextCollapsedSize);
+      }
+    } else if (prevPanelSize < nextMinSize) {
+      resizePanel(panelData, nextMinSize);
+    } else if (prevPanelSize > nextMaxSize) {
+      resizePanel(panelData, nextMaxSize);
+    }
+  }, [resizePanel]);
   const startDragging = useCallback((dragHandleId, event) => {
     const {
       direction
@@ -1597,6 +1636,7 @@ function PanelGroupWithForwardedRef({
     groupId,
     isPanelCollapsed,
     isPanelExpanded,
+    reevaluatePanelConstraints,
     registerPanel,
     registerResizeHandle,
     resizePanel,
@@ -1604,7 +1644,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",
@@ -1639,14 +1679,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
   };
@@ -1853,55 +1891,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.cjs.mjs

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