react-resizable-panels 0.0.50 → 0.0.52

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

@@ -69,6 +69,7 @@ PanelGroupContext.displayName = "PanelGroupContext";
 function PanelWithForwardedRef({
   children = null,
   className: classNameFromProps = "",
+  collapsedSize = 0,
   collapsible = false,
   defaultSize = null,
   forwardedRef,
@@ -126,6 +127,7 @@ function PanelWithForwardedRef({
   });
   const panelDataRef = useRef({
     callbacksRef,
+    collapsedSize,
     collapsible,
     defaultSize,
     id: panelId,
@@ -136,6 +138,7 @@ function PanelWithForwardedRef({
   useIsomorphicLayoutEffect(() => {
     committedValuesRef.current.size = parseSizeFromStyle(style);
     panelDataRef.current.callbacksRef = callbacksRef;
+    panelDataRef.current.collapsedSize = collapsedSize;
     panelDataRef.current.collapsible = collapsible;
     panelDataRef.current.defaultSize = defaultSize;
     panelDataRef.current.id = panelId;
@@ -281,27 +284,28 @@ function adjustByDelta(event, panels, idBefore, idAfter, delta, prevSizes, panel
   nextSizes[index] = baseSizes[index] + deltaApplied;
   return nextSizes;
 }
-function callPanelCallbacks(panelsArray, prevSizes, nextSizes) {
-  nextSizes.forEach((nextSize, index) => {
-    const prevSize = prevSizes[index];
-    if (prevSize !== nextSize) {
-      const {
-        callbacksRef,
-        collapsible
-      } = panelsArray[index].current;
+function callPanelCallbacks(panelsArray, sizes, panelIdToLastNotifiedSizeMap) {
+  sizes.forEach((size, index) => {
+    const {
+      callbacksRef,
+      collapsedSize,
+      collapsible,
+      id
+    } = panelsArray[index].current;
+    const lastNotifiedSize = panelIdToLastNotifiedSizeMap[id];
+    if (lastNotifiedSize !== size) {
+      panelIdToLastNotifiedSizeMap[id] = size;
       const {
         onCollapse,
         onResize
       } = callbacksRef.current;
       if (onResize) {
-        onResize(nextSize);
+        onResize(size, lastNotifiedSize);
       }
       if (collapsible && onCollapse) {
-        // Falsy check handles both previous size of 0
-        // and initial size of undefined (when mounting)
-        if (!prevSize && nextSize !== 0) {
+        if ((lastNotifiedSize == null || lastNotifiedSize === collapsedSize) && size !== collapsedSize) {
           onCollapse(false);
-        } else if (prevSize !== 0 && nextSize === 0) {
+        } else if (lastNotifiedSize !== collapsedSize && size === collapsedSize) {
           onCollapse(true);
         }
       }
@@ -393,11 +397,17 @@ function panelsMapToSortedArray(panels) {
 }
 function safeResizePanel(panel, delta, prevSize, event) {
   const nextSizeUnsafe = prevSize + delta;
-  if (panel.current.collapsible) {
-    if (prevSize > 0) {
+  const {
+    collapsedSize,
+    collapsible,
+    maxSize,
+    minSize
+  } = panel.current;
+  if (collapsible) {
+    if (prevSize > collapsedSize) {
       // Mimic VS COde behavior; collapse a panel if it's smaller than half of its min-size
-      if (nextSizeUnsafe <= panel.current.minSize / 2) {
-        return 0;
+      if (nextSizeUnsafe <= minSize / 2 + collapsedSize) {
+        return collapsedSize;
       }
     } else {
       const isKeyboardEvent = event?.type?.startsWith("key");
@@ -405,13 +415,13 @@ function safeResizePanel(panel, delta, prevSize, event) {
         // Keyboard events should expand a collapsed panel to the min size,
         // but mouse events should wait until the panel has reached its min size
         // to avoid a visual flickering when dragging between collapsed and min size.
-        if (nextSizeUnsafe < panel.current.minSize) {
-          return 0;
+        if (nextSizeUnsafe < minSize) {
+          return collapsedSize;
         }
       }
     }
   }
-  const nextSize = Math.min(panel.current.maxSize, Math.max(panel.current.minSize, nextSizeUnsafe));
+  const nextSize = Math.min(maxSize, Math.max(minSize, nextSizeUnsafe));
   return nextSize;
 }
 
@@ -844,6 +854,7 @@ function PanelGroupWithForwardedRef({
   useEffect(() => {
     callbacksRef.current.onLayout = onLayout;
   });
+  const panelIdToLastNotifiedSizeMapRef = useRef({});
 
   // 0-1 values representing the relative size of each panel.
   const [sizes, setSizes] = useState([]);
@@ -868,7 +879,13 @@ function PanelGroupWithForwardedRef({
     setLayout: sizes => {
       const total = sizes.reduce((accumulated, current) => accumulated + current, 0);
       assert(total === 100, "Panel sizes must add up to 100%");
+      const {
+        panels
+      } = committedValuesRef.current;
+      const panelIdToLastNotifiedSizeMap = panelIdToLastNotifiedSizeMapRef.current;
+      const panelsArray = panelsMapToSortedArray(panels);
       setSizes(sizes);
+      callPanelCallbacks(panelsArray, sizes, panelIdToLastNotifiedSizeMap);
     }
   }), []);
   useIsomorphicLayoutEffect(() => {
@@ -890,33 +907,25 @@ function PanelGroupWithForwardedRef({
     const {
       onLayout
     } = callbacksRef.current;
-    if (onLayout) {
-      const {
-        sizes
-      } = committedValuesRef.current;
-
-      // Don't commit layout until all panels have registered and re-rendered with their actual sizes.
-      if (sizes.length > 0) {
-        onLayout(sizes);
-      }
-    }
-  }, [sizes]);
-
-  // Notify Panel listeners about their initial sizes and collapsed state after mount.
-  // Subsequent changes will be called by the resizeHandler.
-  const didNotifyCallbacksAfterMountRef = useRef(false);
-  useIsomorphicLayoutEffect(() => {
-    if (didNotifyCallbacksAfterMountRef.current) {
-      return;
-    }
     const {
       panels,
       sizes
     } = committedValuesRef.current;
+
+    // Don't commit layout until all panels have registered and re-rendered with their actual sizes.
     if (sizes.length > 0) {
-      didNotifyCallbacksAfterMountRef.current = true;
+      if (onLayout) {
+        onLayout(sizes);
+      }
+      const panelIdToLastNotifiedSizeMap = panelIdToLastNotifiedSizeMapRef.current;
+
+      // When possible, we notify before the next render so that rendering work can be batched together.
+      // Some cases are difficult to detect though,
+      // for example– panels that are conditionally rendered can affect the size of neighboring panels.
+      // In this case, the best we can do is notify on commit.
+      // The callPanelCallbacks() uses its own memoization to avoid notifying panels twice in these cases.
       const panelsArray = panelsMapToSortedArray(panels);
-      callPanelCallbacks(panelsArray, [], sizes);
+      callPanelCallbacks(panelsArray, sizes, panelIdToLastNotifiedSizeMap);
     }
   }, [sizes]);
 
@@ -1085,9 +1094,12 @@ function PanelGroupWithForwardedRef({
         }
       }
       if (sizesChanged) {
-        // If resize change handlers have been declared, this is the time to call them.
-        callPanelCallbacks(panelsArray, prevSizes, nextSizes);
+        const panelIdToLastNotifiedSizeMap = panelIdToLastNotifiedSizeMapRef.current;
         setSizes(nextSizes);
+
+        // If resize change handlers have been declared, this is the time to call them.
+        // Trigger user callbacks after updating state, so that user code can override the sizes.
+        callPanelCallbacks(panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
       }
       prevDeltaRef.current = delta;
     };
@@ -1109,7 +1121,14 @@ function PanelGroupWithForwardedRef({
       sizes: prevSizes
     } = committedValuesRef.current;
     const panel = panels.get(id);
-    if (panel == null || !panel.current.collapsible) {
+    if (panel == null) {
+      return;
+    }
+    const {
+      collapsedSize,
+      collapsible
+    } = panel.current;
+    if (!collapsible) {
       return;
     }
     const panelsArray = panelsMapToSortedArray(panels);
@@ -1118,7 +1137,7 @@ function PanelGroupWithForwardedRef({
       return;
     }
     const currentSize = prevSizes[index];
-    if (currentSize === 0) {
+    if (currentSize === collapsedSize) {
       // Panel is already collapsed.
       return;
     }
@@ -1128,12 +1147,15 @@ function PanelGroupWithForwardedRef({
       return;
     }
     const isLastPanel = index === panelsArray.length - 1;
-    const delta = isLastPanel ? currentSize : 0 - currentSize;
+    const delta = isLastPanel ? currentSize : collapsedSize - currentSize;
     const nextSizes = adjustByDelta(null, panels, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse.current, null);
     if (prevSizes !== nextSizes) {
-      // If resize change handlers have been declared, this is the time to call them.
-      callPanelCallbacks(panelsArray, prevSizes, nextSizes);
+      const panelIdToLastNotifiedSizeMap = panelIdToLastNotifiedSizeMapRef.current;
       setSizes(nextSizes);
+
+      // If resize change handlers have been declared, this is the time to call them.
+      // Trigger user callbacks after updating state, so that user code can override the sizes.
+      callPanelCallbacks(panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
     }
   }, []);
   const expandPanel = useCallback(id => {
@@ -1145,7 +1167,11 @@ function PanelGroupWithForwardedRef({
     if (panel == null) {
       return;
     }
-    const sizeBeforeCollapse = panelSizeBeforeCollapse.current.get(id) || panel.current.minSize;
+    const {
+      collapsedSize,
+      minSize
+    } = panel.current;
+    const sizeBeforeCollapse = panelSizeBeforeCollapse.current.get(id) || minSize;
     if (!sizeBeforeCollapse) {
       return;
     }
@@ -1155,7 +1181,7 @@ function PanelGroupWithForwardedRef({
       return;
     }
     const currentSize = prevSizes[index];
-    if (currentSize !== 0) {
+    if (currentSize !== collapsedSize) {
       // Panel is already expanded.
       return;
     }
@@ -1164,12 +1190,15 @@ function PanelGroupWithForwardedRef({
       return;
     }
     const isLastPanel = index === panelsArray.length - 1;
-    const delta = isLastPanel ? 0 - sizeBeforeCollapse : sizeBeforeCollapse;
+    const delta = isLastPanel ? collapsedSize - sizeBeforeCollapse : sizeBeforeCollapse;
     const nextSizes = adjustByDelta(null, panels, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse.current, null);
     if (prevSizes !== nextSizes) {
-      // If resize change handlers have been declared, this is the time to call them.
-      callPanelCallbacks(panelsArray, prevSizes, nextSizes);
+      const panelIdToLastNotifiedSizeMap = panelIdToLastNotifiedSizeMapRef.current;
       setSizes(nextSizes);
+
+      // If resize change handlers have been declared, this is the time to call them.
+      // Trigger user callbacks after updating state, so that user code can override the sizes.
+      callPanelCallbacks(panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
     }
   }, []);
   const resizePanel = useCallback((id, nextSize) => {
@@ -1181,6 +1210,12 @@ function PanelGroupWithForwardedRef({
     if (panel == null) {
       return;
     }
+    const {
+      collapsedSize,
+      collapsible,
+      maxSize,
+      minSize
+    } = panel.current;
     const panelsArray = panelsMapToSortedArray(panels);
     const index = panelsArray.indexOf(panel);
     if (index < 0) {
@@ -1190,8 +1225,8 @@ function PanelGroupWithForwardedRef({
     if (currentSize === nextSize) {
       return;
     }
-    if (panel.current.collapsible && nextSize === 0) ; else {
-      nextSize = Math.min(panel.current.maxSize, Math.max(panel.current.minSize, nextSize));
+    if (collapsible && nextSize === collapsedSize) ; else {
+      nextSize = Math.min(maxSize, Math.max(minSize, nextSize));
     }
     const [idBefore, idAfter] = getBeforeAndAfterIds(id, panelsArray);
     if (idBefore == null || idAfter == null) {
@@ -1201,9 +1236,12 @@ function PanelGroupWithForwardedRef({
     const delta = isLastPanel ? currentSize - nextSize : nextSize - currentSize;
     const nextSizes = adjustByDelta(null, panels, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse.current, null);
     if (prevSizes !== nextSizes) {
-      // If resize change handlers have been declared, this is the time to call them.
-      callPanelCallbacks(panelsArray, prevSizes, nextSizes);
+      const panelIdToLastNotifiedSizeMap = panelIdToLastNotifiedSizeMapRef.current;
       setSizes(nextSizes);
+
+      // If resize change handlers have been declared, this is the time to call them.
+      // Trigger user callbacks after updating state, so that user code can override the sizes.
+      callPanelCallbacks(panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
     }
   }, []);
   const context = useMemo(() => ({

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

@@ -45,6 +45,7 @@ PanelGroupContext.displayName = "PanelGroupContext";
 function PanelWithForwardedRef({
   children = null,
   className: classNameFromProps = "",
+  collapsedSize = 0,
   collapsible = false,
   defaultSize = null,
   forwardedRef,
@@ -102,6 +103,7 @@ function PanelWithForwardedRef({
   });
   const panelDataRef = useRef({
     callbacksRef,
+    collapsedSize,
     collapsible,
     defaultSize,
     id: panelId,
@@ -112,6 +114,7 @@ function PanelWithForwardedRef({
   useIsomorphicLayoutEffect(() => {
     committedValuesRef.current.size = parseSizeFromStyle(style);
     panelDataRef.current.callbacksRef = callbacksRef;
+    panelDataRef.current.collapsedSize = collapsedSize;
     panelDataRef.current.collapsible = collapsible;
     panelDataRef.current.defaultSize = defaultSize;
     panelDataRef.current.id = panelId;
@@ -257,27 +260,28 @@ function adjustByDelta(event, panels, idBefore, idAfter, delta, prevSizes, panel
   nextSizes[index] = baseSizes[index] + deltaApplied;
   return nextSizes;
 }
-function callPanelCallbacks(panelsArray, prevSizes, nextSizes) {
-  nextSizes.forEach((nextSize, index) => {
-    const prevSize = prevSizes[index];
-    if (prevSize !== nextSize) {
-      const {
-        callbacksRef,
-        collapsible
-      } = panelsArray[index].current;
+function callPanelCallbacks(panelsArray, sizes, panelIdToLastNotifiedSizeMap) {
+  sizes.forEach((size, index) => {
+    const {
+      callbacksRef,
+      collapsedSize,
+      collapsible,
+      id
+    } = panelsArray[index].current;
+    const lastNotifiedSize = panelIdToLastNotifiedSizeMap[id];
+    if (lastNotifiedSize !== size) {
+      panelIdToLastNotifiedSizeMap[id] = size;
       const {
         onCollapse,
         onResize
       } = callbacksRef.current;
       if (onResize) {
-        onResize(nextSize);
+        onResize(size, lastNotifiedSize);
       }
       if (collapsible && onCollapse) {
-        // Falsy check handles both previous size of 0
-        // and initial size of undefined (when mounting)
-        if (!prevSize && nextSize !== 0) {
+        if ((lastNotifiedSize == null || lastNotifiedSize === collapsedSize) && size !== collapsedSize) {
           onCollapse(false);
-        } else if (prevSize !== 0 && nextSize === 0) {
+        } else if (lastNotifiedSize !== collapsedSize && size === collapsedSize) {
           onCollapse(true);
         }
       }
@@ -369,11 +373,17 @@ function panelsMapToSortedArray(panels) {
 }
 function safeResizePanel(panel, delta, prevSize, event) {
   const nextSizeUnsafe = prevSize + delta;
-  if (panel.current.collapsible) {
-    if (prevSize > 0) {
+  const {
+    collapsedSize,
+    collapsible,
+    maxSize,
+    minSize
+  } = panel.current;
+  if (collapsible) {
+    if (prevSize > collapsedSize) {
       // Mimic VS COde behavior; collapse a panel if it's smaller than half of its min-size
-      if (nextSizeUnsafe <= panel.current.minSize / 2) {
-        return 0;
+      if (nextSizeUnsafe <= minSize / 2 + collapsedSize) {
+        return collapsedSize;
       }
     } else {
       const isKeyboardEvent = event?.type?.startsWith("key");
@@ -381,13 +391,13 @@ function safeResizePanel(panel, delta, prevSize, event) {
         // Keyboard events should expand a collapsed panel to the min size,
         // but mouse events should wait until the panel has reached its min size
         // to avoid a visual flickering when dragging between collapsed and min size.
-        if (nextSizeUnsafe < panel.current.minSize) {
-          return 0;
+        if (nextSizeUnsafe < minSize) {
+          return collapsedSize;
         }
       }
     }
   }
-  const nextSize = Math.min(panel.current.maxSize, Math.max(panel.current.minSize, nextSizeUnsafe));
+  const nextSize = Math.min(maxSize, Math.max(minSize, nextSizeUnsafe));
   return nextSize;
 }
 
@@ -820,6 +830,7 @@ function PanelGroupWithForwardedRef({
   useEffect(() => {
     callbacksRef.current.onLayout = onLayout;
   });
+  const panelIdToLastNotifiedSizeMapRef = useRef({});
 
   // 0-1 values representing the relative size of each panel.
   const [sizes, setSizes] = useState([]);
@@ -844,7 +855,13 @@ function PanelGroupWithForwardedRef({
     setLayout: sizes => {
       const total = sizes.reduce((accumulated, current) => accumulated + current, 0);
       assert(total === 100, "Panel sizes must add up to 100%");
+      const {
+        panels
+      } = committedValuesRef.current;
+      const panelIdToLastNotifiedSizeMap = panelIdToLastNotifiedSizeMapRef.current;
+      const panelsArray = panelsMapToSortedArray(panels);
       setSizes(sizes);
+      callPanelCallbacks(panelsArray, sizes, panelIdToLastNotifiedSizeMap);
     }
   }), []);
   useIsomorphicLayoutEffect(() => {
@@ -866,33 +883,25 @@ function PanelGroupWithForwardedRef({
     const {
       onLayout
     } = callbacksRef.current;
-    if (onLayout) {
-      const {
-        sizes
-      } = committedValuesRef.current;
-
-      // Don't commit layout until all panels have registered and re-rendered with their actual sizes.
-      if (sizes.length > 0) {
-        onLayout(sizes);
-      }
-    }
-  }, [sizes]);
-
-  // Notify Panel listeners about their initial sizes and collapsed state after mount.
-  // Subsequent changes will be called by the resizeHandler.
-  const didNotifyCallbacksAfterMountRef = useRef(false);
-  useIsomorphicLayoutEffect(() => {
-    if (didNotifyCallbacksAfterMountRef.current) {
-      return;
-    }
     const {
       panels,
       sizes
     } = committedValuesRef.current;
+
+    // Don't commit layout until all panels have registered and re-rendered with their actual sizes.
     if (sizes.length > 0) {
-      didNotifyCallbacksAfterMountRef.current = true;
+      if (onLayout) {
+        onLayout(sizes);
+      }
+      const panelIdToLastNotifiedSizeMap = panelIdToLastNotifiedSizeMapRef.current;
+
+      // When possible, we notify before the next render so that rendering work can be batched together.
+      // Some cases are difficult to detect though,
+      // for example– panels that are conditionally rendered can affect the size of neighboring panels.
+      // In this case, the best we can do is notify on commit.
+      // The callPanelCallbacks() uses its own memoization to avoid notifying panels twice in these cases.
       const panelsArray = panelsMapToSortedArray(panels);
-      callPanelCallbacks(panelsArray, [], sizes);
+      callPanelCallbacks(panelsArray, sizes, panelIdToLastNotifiedSizeMap);
     }
   }, [sizes]);
 
@@ -1061,9 +1070,12 @@ function PanelGroupWithForwardedRef({
         }
       }
       if (sizesChanged) {
-        // If resize change handlers have been declared, this is the time to call them.
-        callPanelCallbacks(panelsArray, prevSizes, nextSizes);
+        const panelIdToLastNotifiedSizeMap = panelIdToLastNotifiedSizeMapRef.current;
         setSizes(nextSizes);
+
+        // If resize change handlers have been declared, this is the time to call them.
+        // Trigger user callbacks after updating state, so that user code can override the sizes.
+        callPanelCallbacks(panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
       }
       prevDeltaRef.current = delta;
     };
@@ -1085,7 +1097,14 @@ function PanelGroupWithForwardedRef({
       sizes: prevSizes
     } = committedValuesRef.current;
     const panel = panels.get(id);
-    if (panel == null || !panel.current.collapsible) {
+    if (panel == null) {
+      return;
+    }
+    const {
+      collapsedSize,
+      collapsible
+    } = panel.current;
+    if (!collapsible) {
       return;
     }
     const panelsArray = panelsMapToSortedArray(panels);
@@ -1094,7 +1113,7 @@ function PanelGroupWithForwardedRef({
       return;
     }
     const currentSize = prevSizes[index];
-    if (currentSize === 0) {
+    if (currentSize === collapsedSize) {
       // Panel is already collapsed.
       return;
     }
@@ -1104,12 +1123,15 @@ function PanelGroupWithForwardedRef({
       return;
     }
     const isLastPanel = index === panelsArray.length - 1;
-    const delta = isLastPanel ? currentSize : 0 - currentSize;
+    const delta = isLastPanel ? currentSize : collapsedSize - currentSize;
     const nextSizes = adjustByDelta(null, panels, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse.current, null);
     if (prevSizes !== nextSizes) {
-      // If resize change handlers have been declared, this is the time to call them.
-      callPanelCallbacks(panelsArray, prevSizes, nextSizes);
+      const panelIdToLastNotifiedSizeMap = panelIdToLastNotifiedSizeMapRef.current;
       setSizes(nextSizes);
+
+      // If resize change handlers have been declared, this is the time to call them.
+      // Trigger user callbacks after updating state, so that user code can override the sizes.
+      callPanelCallbacks(panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
     }
   }, []);
   const expandPanel = useCallback(id => {
@@ -1121,7 +1143,11 @@ function PanelGroupWithForwardedRef({
     if (panel == null) {
       return;
     }
-    const sizeBeforeCollapse = panelSizeBeforeCollapse.current.get(id) || panel.current.minSize;
+    const {
+      collapsedSize,
+      minSize
+    } = panel.current;
+    const sizeBeforeCollapse = panelSizeBeforeCollapse.current.get(id) || minSize;
     if (!sizeBeforeCollapse) {
       return;
     }
@@ -1131,7 +1157,7 @@ function PanelGroupWithForwardedRef({
       return;
     }
     const currentSize = prevSizes[index];
-    if (currentSize !== 0) {
+    if (currentSize !== collapsedSize) {
       // Panel is already expanded.
       return;
     }
@@ -1140,12 +1166,15 @@ function PanelGroupWithForwardedRef({
       return;
     }
     const isLastPanel = index === panelsArray.length - 1;
-    const delta = isLastPanel ? 0 - sizeBeforeCollapse : sizeBeforeCollapse;
+    const delta = isLastPanel ? collapsedSize - sizeBeforeCollapse : sizeBeforeCollapse;
     const nextSizes = adjustByDelta(null, panels, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse.current, null);
     if (prevSizes !== nextSizes) {
-      // If resize change handlers have been declared, this is the time to call them.
-      callPanelCallbacks(panelsArray, prevSizes, nextSizes);
+      const panelIdToLastNotifiedSizeMap = panelIdToLastNotifiedSizeMapRef.current;
       setSizes(nextSizes);
+
+      // If resize change handlers have been declared, this is the time to call them.
+      // Trigger user callbacks after updating state, so that user code can override the sizes.
+      callPanelCallbacks(panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
     }
   }, []);
   const resizePanel = useCallback((id, nextSize) => {
@@ -1157,6 +1186,12 @@ function PanelGroupWithForwardedRef({
     if (panel == null) {
       return;
     }
+    const {
+      collapsedSize,
+      collapsible,
+      maxSize,
+      minSize
+    } = panel.current;
     const panelsArray = panelsMapToSortedArray(panels);
     const index = panelsArray.indexOf(panel);
     if (index < 0) {
@@ -1166,8 +1201,8 @@ function PanelGroupWithForwardedRef({
     if (currentSize === nextSize) {
       return;
     }
-    if (panel.current.collapsible && nextSize === 0) ; else {
-      nextSize = Math.min(panel.current.maxSize, Math.max(panel.current.minSize, nextSize));
+    if (collapsible && nextSize === collapsedSize) ; else {
+      nextSize = Math.min(maxSize, Math.max(minSize, nextSize));
     }
     const [idBefore, idAfter] = getBeforeAndAfterIds(id, panelsArray);
     if (idBefore == null || idAfter == null) {
@@ -1177,9 +1212,12 @@ function PanelGroupWithForwardedRef({
     const delta = isLastPanel ? currentSize - nextSize : nextSize - currentSize;
     const nextSizes = adjustByDelta(null, panels, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse.current, null);
     if (prevSizes !== nextSizes) {
-      // If resize change handlers have been declared, this is the time to call them.
-      callPanelCallbacks(panelsArray, prevSizes, nextSizes);
+      const panelIdToLastNotifiedSizeMap = panelIdToLastNotifiedSizeMapRef.current;
       setSizes(nextSizes);
+
+      // If resize change handlers have been declared, this is the time to call them.
+      // Trigger user callbacks after updating state, so that user code can override the sizes.
+      callPanelCallbacks(panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
     }
   }, []);
   const context = useMemo(() => ({