react-resizable-panels 0.0.51 → 0.0.53

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 0.0.53
+* Fix edge case race condition for `onResize` callbacks during initial mount
+
+## 0.0.52
+* [162](https://github.com/bvaughn/react-resizable-panels/issues/162): Add `Panel.collapsedSize` property to allow panels to be collapsed to custom, non-0 sizes
+* [161](https://github.com/bvaughn/react-resizable-panels/pull/161): Bug fix: `onResize` should be called for the initial `Panel` size regardless of the `onLayout` prop
+
 ## 0.0.51
 * [154](https://github.com/bvaughn/react-resizable-panels/issues/154): `onResize` and `onCollapse` props are called in response to `PanelGroup.setLayout`
 * [123](https://github.com/bvaughn/react-resizable-panels/issues/123): `onResize` called when number of panels in a group change due to conditional rendering

package/README.md

@@ -49,20 +49,21 @@ import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 | `setLayout(panelSizes: number[])` | Resize panel group to the specified _panelSizes_ (`[1 - 100, ...]`).
 
 ### `Panel`
-| prop          | type                            | description
-| :------------ | :------------------------------ | :---
-| `children`    | `ReactNode`                     | Arbitrary React element(s)
-| `className`   | `?string`                       | Class name to attach to root element
-| `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`    | `?(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
 
 <sup>1</sup>: If any `Panel` has an `onResize` callback, the `order` prop should be provided for all `Panel`s.
 

package/dist/declarations/src/Panel.d.ts

@@ -3,6 +3,7 @@ import { PanelOnCollapse, PanelOnResize } from "./types";
 export type PanelProps = {
     children?: ReactNode;
     className?: string;
+    collapsedSize?: number;
     collapsible?: boolean;
     defaultSize?: number | null;
     id?: string | null;

package/dist/declarations/src/types.d.ts

@@ -6,7 +6,7 @@ export type PanelGroupStorage = {
 };
 export type PanelGroupOnLayout = (sizes: number[]) => void;
 export type PanelOnCollapse = (collapsed: boolean) => void;
-export type PanelOnResize = (size: number) => void;
+export type PanelOnResize = (size: number, prevSize: number) => void;
 export type PanelResizeHandleOnDragging = (isDragging: boolean) => void;
 export type PanelCallbackRef = RefObject<{
     onCollapse: PanelOnCollapse | null;
@@ -15,6 +15,7 @@ export type PanelCallbackRef = RefObject<{
 export type PanelData = {
     current: {
         callbacksRef: PanelCallbackRef;
+        collapsedSize: number;
         collapsible: boolean;
         defaultSize: number | null;
         id: string;

package/dist/react-resizable-panels.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;
@@ -283,11 +286,18 @@ function adjustByDelta(event, panels, idBefore, idAfter, delta, prevSizes, panel
 }
 function callPanelCallbacks(panelsArray, sizes, panelIdToLastNotifiedSizeMap) {
   sizes.forEach((size, index) => {
+    const panelRef = panelsArray[index];
+    if (!panelRef) {
+      // Handle initial mount (when panels are registered too late to be in the panels array)
+      // The subsequent render+effects will handle the resize notification
+      return;
+    }
     const {
       callbacksRef,
+      collapsedSize,
       collapsible,
       id
-    } = panelsArray[index].current;
+    } = panelRef.current;
     const lastNotifiedSize = panelIdToLastNotifiedSizeMap[id];
     if (lastNotifiedSize !== size) {
       panelIdToLastNotifiedSizeMap[id] = size;
@@ -296,14 +306,12 @@ function callPanelCallbacks(panelsArray, sizes, panelIdToLastNotifiedSizeMap) {
         onResize
       } = callbacksRef.current;
       if (onResize) {
-        onResize(size);
+        onResize(size, lastNotifiedSize);
       }
       if (collapsible && onCollapse) {
-        // Falsy check handles both previous size of 0
-        // and initial size of undefined (when mounting)
-        if (!lastNotifiedSize && size !== 0) {
+        if ((lastNotifiedSize == null || lastNotifiedSize === collapsedSize) && size !== collapsedSize) {
           onCollapse(false);
-        } else if (lastNotifiedSize !== 0 && size === 0) {
+        } else if (lastNotifiedSize !== collapsedSize && size === collapsedSize) {
           onCollapse(true);
         }
       }
@@ -395,11 +403,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");
@@ -407,13 +421,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;
 }
 
@@ -869,8 +883,8 @@ function PanelGroupWithForwardedRef({
       } = committedValuesRef.current;
       const panelIdToLastNotifiedSizeMap = panelIdToLastNotifiedSizeMapRef.current;
       const panelsArray = panelsMapToSortedArray(panels);
-      callPanelCallbacks(panelsArray, sizes, panelIdToLastNotifiedSizeMap);
       setSizes(sizes);
+      callPanelCallbacks(panelsArray, sizes, panelIdToLastNotifiedSizeMap);
     }
   }), []);
   useIsomorphicLayoutEffect(() => {
@@ -892,25 +906,25 @@ function PanelGroupWithForwardedRef({
     const {
       onLayout
     } = callbacksRef.current;
-    if (onLayout) {
-      const {
-        panels,
-        sizes
-      } = committedValuesRef.current;
+    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) {
+    // Don't commit layout until all panels have registered and re-rendered with their actual sizes.
+    if (sizes.length > 0) {
+      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, panelIdToLastNotifiedSizeMap);
       }
+      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, panelIdToLastNotifiedSizeMap);
     }
   }, [sizes]);
 
@@ -1075,10 +1089,11 @@ function PanelGroupWithForwardedRef({
       }
       if (sizesChanged) {
         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);
-        setSizes(nextSizes);
       }
       prevDeltaRef.current = delta;
     };
@@ -1100,7 +1115,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);
@@ -1109,7 +1131,7 @@ function PanelGroupWithForwardedRef({
       return;
     }
     const currentSize = prevSizes[index];
-    if (currentSize === 0) {
+    if (currentSize === collapsedSize) {
       // Panel is already collapsed.
       return;
     }
@@ -1119,14 +1141,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) {
       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);
-      setSizes(nextSizes);
     }
   }, []);
   const expandPanel = useCallback(id => {
@@ -1138,7 +1161,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;
     }
@@ -1148,7 +1175,7 @@ function PanelGroupWithForwardedRef({
       return;
     }
     const currentSize = prevSizes[index];
-    if (currentSize !== 0) {
+    if (currentSize !== collapsedSize) {
       // Panel is already expanded.
       return;
     }
@@ -1157,14 +1184,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) {
       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);
-      setSizes(nextSizes);
     }
   }, []);
   const resizePanel = useCallback((id, nextSize) => {
@@ -1176,6 +1204,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) {
@@ -1185,8 +1219,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) {
@@ -1197,10 +1231,11 @@ function PanelGroupWithForwardedRef({
     const nextSizes = adjustByDelta(null, panels, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse.current, null);
     if (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);
-      setSizes(nextSizes);
     }
   }, []);
   const context = useMemo(() => ({

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;
@@ -283,11 +286,18 @@ function adjustByDelta(event, panels, idBefore, idAfter, delta, prevSizes, panel
 }
 function callPanelCallbacks(panelsArray, sizes, panelIdToLastNotifiedSizeMap) {
   sizes.forEach((size, index) => {
+    const panelRef = panelsArray[index];
+    if (!panelRef) {
+      // Handle initial mount (when panels are registered too late to be in the panels array)
+      // The subsequent render+effects will handle the resize notification
+      return;
+    }
     const {
       callbacksRef,
+      collapsedSize,
       collapsible,
       id
-    } = panelsArray[index].current;
+    } = panelRef.current;
     const lastNotifiedSize = panelIdToLastNotifiedSizeMap[id];
     if (lastNotifiedSize !== size) {
       panelIdToLastNotifiedSizeMap[id] = size;
@@ -296,14 +306,12 @@ function callPanelCallbacks(panelsArray, sizes, panelIdToLastNotifiedSizeMap) {
         onResize
       } = callbacksRef.current;
       if (onResize) {
-        onResize(size);
+        onResize(size, lastNotifiedSize);
       }
       if (collapsible && onCollapse) {
-        // Falsy check handles both previous size of 0
-        // and initial size of undefined (when mounting)
-        if (!lastNotifiedSize && size !== 0) {
+        if ((lastNotifiedSize == null || lastNotifiedSize === collapsedSize) && size !== collapsedSize) {
           onCollapse(false);
-        } else if (lastNotifiedSize !== 0 && size === 0) {
+        } else if (lastNotifiedSize !== collapsedSize && size === collapsedSize) {
           onCollapse(true);
         }
       }
@@ -395,11 +403,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");
@@ -407,13 +421,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;
 }
 
@@ -876,8 +890,8 @@ function PanelGroupWithForwardedRef({
       } = committedValuesRef.current;
       const panelIdToLastNotifiedSizeMap = panelIdToLastNotifiedSizeMapRef.current;
       const panelsArray = panelsMapToSortedArray(panels);
-      callPanelCallbacks(panelsArray, sizes, panelIdToLastNotifiedSizeMap);
       setSizes(sizes);
+      callPanelCallbacks(panelsArray, sizes, panelIdToLastNotifiedSizeMap);
     }
   }), []);
   useIsomorphicLayoutEffect(() => {
@@ -899,25 +913,25 @@ function PanelGroupWithForwardedRef({
     const {
       onLayout
     } = callbacksRef.current;
-    if (onLayout) {
-      const {
-        panels,
-        sizes
-      } = committedValuesRef.current;
+    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) {
+    // Don't commit layout until all panels have registered and re-rendered with their actual sizes.
+    if (sizes.length > 0) {
+      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, panelIdToLastNotifiedSizeMap);
       }
+      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, panelIdToLastNotifiedSizeMap);
     }
   }, [sizes]);
 
@@ -1087,10 +1101,11 @@ function PanelGroupWithForwardedRef({
       }
       if (sizesChanged) {
         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);
-        setSizes(nextSizes);
       }
       prevDeltaRef.current = delta;
     };
@@ -1112,7 +1127,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);
@@ -1121,7 +1143,7 @@ function PanelGroupWithForwardedRef({
       return;
     }
     const currentSize = prevSizes[index];
-    if (currentSize === 0) {
+    if (currentSize === collapsedSize) {
       // Panel is already collapsed.
       return;
     }
@@ -1131,14 +1153,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) {
       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);
-      setSizes(nextSizes);
     }
   }, []);
   const expandPanel = useCallback(id => {
@@ -1150,7 +1173,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;
     }
@@ -1160,7 +1187,7 @@ function PanelGroupWithForwardedRef({
       return;
     }
     const currentSize = prevSizes[index];
-    if (currentSize !== 0) {
+    if (currentSize !== collapsedSize) {
       // Panel is already expanded.
       return;
     }
@@ -1169,14 +1196,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) {
       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);
-      setSizes(nextSizes);
     }
   }, []);
   const resizePanel = useCallback((id, nextSize) => {
@@ -1188,6 +1216,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) {
@@ -1197,8 +1231,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) {
@@ -1209,10 +1243,11 @@ function PanelGroupWithForwardedRef({
     const nextSizes = adjustByDelta(null, panels, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse.current, null);
     if (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);
-      setSizes(nextSizes);
     }
   }, []);
   const context = useMemo(() => ({