react-resizable-panels 0.0.30 → 0.0.32

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 0.0.32
+* [#75](https://github.com/bvaughn/react-resizable-panels/issues/75): Ensure `Panel` and `PanelGroup` callbacks are always called after mounting.
+
+## 0.0.31
+* [#71](https://github.com/bvaughn/react-resizable-panels/issues/71): Added `getSize` and `getCollapsed` to imperative API exposed by `Panel`.
+* [#67](https://github.com/bvaughn/react-resizable-panels/issues/67), [#72](https://github.com/bvaughn/react-resizable-panels/issues/72): Removed nullish coalescing operator (`??`) because it caused problems with default create-react-app configuration.
+* Fix edge case when expanding a panel via imperative API that was collapsed by user drag
+
 ## 0.0.30
 * [#68](https://github.com/bvaughn/react-resizable-panels/pull/68): Reduce volume/frequency of local storage writes for `PanelGroup`s configured to _auto-save_.
 * Added `onLayout` prop to `PanelGroup` to be called when group layout changes. Note that some form of debouncing is recommended before processing these values (e.g. saving to a database).

package/README.md

@@ -52,8 +52,10 @@ import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 `Panel` components also expose an imperative API for manual resizing:
 | method                       | description
 | :--------------------------- | :---
-| `collapse`                   | If panel is `collapsible`, collapse it fully.
-| `expand`                     | If panel is currently _collapsed_, expand it to its most recent size.
+| `collapse()`                 | If panel is `collapsible`, collapse it fully.
+| `expand()`                   | If panel is currently _collapsed_, expand it to its most recent size.
+| `getCollapsed(): boolean`    | Returns `true` if the panel is currently _collapsed_ (`size === 0`).
+| `getSize(): number`          | Returns the most recently commited size of the panel as a percentage (`1 - 100`).
 | `resize(percentage: number)` | Resize panel to the specified _percentage_ (`1 - 100`).
 
 ### `PanelResizeHandle`

package/dist/react-resizable-panels.d.ts

@@ -33,6 +33,8 @@ export type PanelProps = {
 export type ImperativePanelHandle = {
     collapse: () => void;
     expand: () => void;
+    getCollapsed(): boolean;
+    getSize(): number;
     resize: (percentage: number) => void;
 };
 export const Panel: import("react").ForwardRefExoticComponent<PanelProps & import("react").RefAttributes<ImperativePanelHandle>>;

package/dist/react-resizable-panels.d.ts.map

@@ -1 +1 @@
-{"mappings":";AEEA,iBAAwB,YAAY,GAAG,UAAU,CAAC;AAElD,0BAAiC,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;AAC3D,uBAA8B,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;AAC3D,qBAA4B,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;AAEnD,iBAAwB;IACtB,YAAY,EAAE,UAAU;QACtB,UAAU,EAAE,eAAe,GAAG,IAAI,CAAC;QACnC,QAAQ,EAAE,aAAa,GAAG,IAAI,CAAC;KAChC,CAAC,CAAC;IACH,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB,CAAC;AAEF,mBAA0B,aAAa,GAAG,UAAU,GAAG,UAAU,CAAC;AEHlE,yBAAyB;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IACpC,QAAQ,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB,CAAC;AAEF,oCAAoC;IAClC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,MAAM,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC,CAAC;AA0HF,OAAO,MAAM,mHAGZ,CAAC;AQpHF,8BAA8B;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,SAAS,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB,CAAC;AAEF,2BAA2B,EACzB,UAAU,EACV,QAAe,EACf,SAAS,EAAE,kBAAuB,EAClC,SAAS,EACT,EAAE,EAAE,WAAkB,EACtB,QAAe,EACf,KAAK,EAAE,cAAmB,EAC1B,OAAO,EAAE,IAAY,GACtB,EAAE,eAAe;;;;;;;;;;;;;IA6cjB;AC3fD,qCAAqC;IACnC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB,CAAC;AAEF,kCAAkC,EAChC,QAAe,EACf,SAAS,EAAE,kBAAuB,EAClC,QAAgB,EAChB,EAAE,EAAE,WAAkB,EACtB,KAAK,EAAE,cAAmB,EAC1B,OAAO,EAAE,IAAY,GACtB,EAAE,sBAAsB,0FA+GxB","sources":["packages/react-resizable-panels/src/src/hooks/useIsomorphicEffect.ts","packages/react-resizable-panels/src/src/hooks/useUniqueId.ts","packages/react-resizable-panels/src/src/types.ts","packages/react-resizable-panels/src/src/PanelContexts.ts","packages/react-resizable-panels/src/src/Panel.ts","packages/react-resizable-panels/src/src/utils/serialization.ts","packages/react-resizable-panels/src/src/constants.ts","packages/react-resizable-panels/src/src/utils/group.ts","packages/react-resizable-panels/src/src/utils/coordinates.ts","packages/react-resizable-panels/src/src/hooks/useWindowSplitterBehavior.ts","packages/react-resizable-panels/src/src/utils/cursor.ts","packages/react-resizable-panels/src/src/utils/debounce.ts","packages/react-resizable-panels/src/src/PanelGroup.ts","packages/react-resizable-panels/src/src/PanelResizeHandle.ts","packages/react-resizable-panels/src/src/index.ts","packages/react-resizable-panels/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,"import { Panel } from \"./Panel\";\nimport { PanelGroup } from \"./PanelGroup\";\nimport { PanelResizeHandle } from \"./PanelResizeHandle\";\n\nimport type { ImperativePanelHandle, PanelProps } from \"./Panel\";\nimport type { PanelGroupProps } from \"./PanelGroup\";\nimport type { PanelResizeHandleProps } from \"./PanelResizeHandle\";\n\nexport {\n  Panel,\n  PanelGroup,\n  PanelResizeHandle,\n\n  // TypeScript types\n  ImperativePanelHandle,\n  PanelGroupProps,\n  PanelProps,\n  PanelResizeHandleProps,\n};\n"],"names":[],"version":3,"file":"react-resizable-panels.d.ts.map"}
+{"mappings":"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","sources":["packages/react-resizable-panels/src/src/hooks/useIsomorphicEffect.ts","packages/react-resizable-panels/src/src/hooks/useUniqueId.ts","packages/react-resizable-panels/src/src/types.ts","packages/react-resizable-panels/src/src/PanelContexts.ts","packages/react-resizable-panels/src/src/Panel.ts","packages/react-resizable-panels/src/src/utils/serialization.ts","packages/react-resizable-panels/src/src/constants.ts","packages/react-resizable-panels/src/src/utils/group.ts","packages/react-resizable-panels/src/src/utils/coordinates.ts","packages/react-resizable-panels/src/src/hooks/useWindowSplitterBehavior.ts","packages/react-resizable-panels/src/src/utils/cursor.ts","packages/react-resizable-panels/src/src/utils/debounce.ts","packages/react-resizable-panels/src/src/PanelGroup.ts","packages/react-resizable-panels/src/src/PanelResizeHandle.ts","packages/react-resizable-panels/src/src/index.ts","packages/react-resizable-panels/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,"import { Panel } from \"./Panel\";\nimport { PanelGroup } from \"./PanelGroup\";\nimport { PanelResizeHandle } from \"./PanelResizeHandle\";\n\nimport type { ImperativePanelHandle, PanelProps } from \"./Panel\";\nimport type { PanelGroupProps } from \"./PanelGroup\";\nimport type { PanelResizeHandleProps } from \"./PanelResizeHandle\";\n\nexport {\n  Panel,\n  PanelGroup,\n  PanelResizeHandle,\n\n  // TypeScript types\n  ImperativePanelHandle,\n  PanelGroupProps,\n  PanelProps,\n  PanelResizeHandleProps,\n};\n"],"names":[],"version":3,"file":"react-resizable-panels.d.ts.map"}

package/dist/react-resizable-panels.js

@@ -37,16 +37,6 @@ function $4b51bd7b90b9da8b$var$PanelWithForwardedRef({ children: children = null
     if (context === null) throw Error(`Panel components must be rendered within a PanelGroup container`);
     const panelId = (0, $6d548a0d130941e3$export$2e2bcd8739ae039)(idFromProps);
     const { collapsePanel: collapsePanel , expandPanel: expandPanel , getPanelStyle: getPanelStyle , registerPanel: registerPanel , resizePanel: resizePanel , unregisterPanel: unregisterPanel  } = context;
-    (0, $b2QPe$react.useImperativeHandle)(forwardedRef, ()=>({
-            collapse: ()=>collapsePanel(panelId),
-            expand: ()=>expandPanel(panelId),
-            resize: (percentage)=>resizePanel(panelId, percentage)
-        }), [
-        collapsePanel,
-        expandPanel,
-        panelId,
-        resizePanel
-    ]);
     // Use a ref to guard against users passing inline props
     const callbacksRef = (0, $b2QPe$react.useRef)({
         onCollapse: onCollapse,
@@ -91,6 +81,28 @@ function $4b51bd7b90b9da8b$var$PanelWithForwardedRef({ children: children = null
         unregisterPanel
     ]);
     const style = getPanelStyle(panelId);
+    const committedValuesRef = (0, $b2QPe$react.useRef)({
+        size: $4b51bd7b90b9da8b$var$parseSizeFromStyle(style)
+    });
+    (0, $967abed3d1bd1fe9$export$2e2bcd8739ae039)(()=>{
+        committedValuesRef.current.size = $4b51bd7b90b9da8b$var$parseSizeFromStyle(style);
+    });
+    (0, $b2QPe$react.useImperativeHandle)(forwardedRef, ()=>({
+            collapse: ()=>collapsePanel(panelId),
+            expand: ()=>expandPanel(panelId),
+            getCollapsed () {
+                return committedValuesRef.current.size === 0;
+            },
+            getSize () {
+                return committedValuesRef.current.size;
+            },
+            resize: (percentage)=>resizePanel(panelId, percentage)
+        }), [
+        collapsePanel,
+        expandPanel,
+        panelId,
+        resizePanel
+    ]);
     return (0, $b2QPe$react.createElement)(Type, {
         children: children,
         className: classNameFromProps,
@@ -114,6 +126,12 @@ const $4b51bd7b90b9da8b$export$2ddb90ad54e5f587 = (0, $b2QPe$react.forwardRef)((
 // See github.com/parcel-bundler/parcel/issues/8724
 $4b51bd7b90b9da8b$var$PanelWithForwardedRef.displayName = "Panel";
 $4b51bd7b90b9da8b$export$2ddb90ad54e5f587.displayName = "forwardRef(Panel)";
+// HACK
+function $4b51bd7b90b9da8b$var$parseSizeFromStyle(style) {
+    const { flexGrow: flexGrow  } = style;
+    if (typeof flexGrow === "string") return parseFloat(flexGrow);
+    else return flexGrow;
+}
 
 
 
@@ -142,7 +160,7 @@ function $e045b0dd313f33c7$export$9c80c6617f0386da(autoSaveId, panels) {
     const state = $e045b0dd313f33c7$var$loadSerializedPanelGroupState(autoSaveId);
     if (state) {
         const key = $e045b0dd313f33c7$var$getSerializationKey(panels);
-        return state[key] ?? null;
+        return state[key] || null;
     }
     return null;
 }
@@ -162,7 +180,7 @@ const $3237bc4a138172cd$export$d6d3992f3becc879 = 10;
 
 
 
-function $d520236daad9c5d5$export$f50bae335f53943c(panels, idBefore, idAfter, delta, prevSizes) {
+function $d520236daad9c5d5$export$f50bae335f53943c(panels, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse) {
     if (delta === 0) return prevSizes;
     const panelsArray = $d520236daad9c5d5$export$a861c0ad45885494(panels);
     const nextSizes = prevSizes.concat();
@@ -182,7 +200,10 @@ function $d520236daad9c5d5$export$f50bae335f53943c(panels, idBefore, idAfter, de
         const prevSize = prevSizes[index];
         const nextSize = $d520236daad9c5d5$var$safeResizePanel(panel, Math.abs(delta), prevSize);
         if (prevSize === nextSize) return prevSizes;
-        else delta = delta < 0 ? prevSize - nextSize : nextSize - prevSize;
+        else {
+            if (nextSize === 0 && prevSize > 0) panelSizeBeforeCollapse.set(pivotId, prevSize);
+            delta = delta < 0 ? prevSize - nextSize : nextSize - prevSize;
+        }
     }
     let pivotId1 = delta < 0 ? idBefore : idAfter;
     let index1 = panelsArray.findIndex((panel)=>panel.id === pivotId1);
@@ -191,6 +212,7 @@ function $d520236daad9c5d5$export$f50bae335f53943c(panels, idBefore, idAfter, de
         const prevSize1 = prevSizes[index1];
         const nextSize1 = $d520236daad9c5d5$var$safeResizePanel(panel1, 0 - Math.abs(delta), prevSize1);
         if (prevSize1 !== nextSize1) {
+            if (nextSize1 === 0 && prevSize1 > 0) panelSizeBeforeCollapse.set(panel1.id, prevSize1);
             deltaApplied += prevSize1 - nextSize1;
             nextSizes[index1] = nextSize1;
             if (deltaApplied.toPrecision((0, $3237bc4a138172cd$export$d6d3992f3becc879)) >= delta.toPrecision((0, $3237bc4a138172cd$export$d6d3992f3becc879))) break;
@@ -268,7 +290,7 @@ function $d520236daad9c5d5$export$2e27d3a347680388(id) {
 function $d520236daad9c5d5$export$96a40be80fb6c3c8(id) {
     const handles = $d520236daad9c5d5$export$8d0cd3c32ddc045e();
     const index = handles.findIndex((handle)=>handle.getAttribute("data-panel-resize-handle-id") === id);
-    return index ?? null;
+    return index || null;
 }
 function $d520236daad9c5d5$export$8d0cd3c32ddc045e() {
     return Array.from(document.querySelectorAll(`[data-panel-resize-handle-id]`));
@@ -280,8 +302,8 @@ function $d520236daad9c5d5$export$68d3a33c21dfbe27(groupId, handleId, panelsArra
     const handle = $d520236daad9c5d5$export$2e27d3a347680388(handleId);
     const handles = $d520236daad9c5d5$export$ae14931f0a0256a3(groupId);
     const index = handles.indexOf(handle);
-    const idBefore = panelsArray[index]?.id ?? null;
-    const idAfter = panelsArray[index + 1]?.id ?? null;
+    const idBefore = panelsArray[index]?.id || null;
+    const idAfter = panelsArray[index + 1]?.id || null;
     return [
         idBefore,
         idAfter
@@ -293,7 +315,11 @@ function $d520236daad9c5d5$export$a861c0ad45885494(panels) {
 function $d520236daad9c5d5$var$safeResizePanel(panel, delta, prevSize) {
     const nextSizeUnsafe = prevSize + delta;
     if (panel.collapsible) {
-        if (nextSizeUnsafe <= 0) return 0;
+        if (prevSize > 0) {
+            if (nextSizeUnsafe <= 0) return 0;
+        } else {
+            if (nextSizeUnsafe < panel.minSize) return 0;
+        }
     }
     const nextSize = Math.min(panel.maxSize, Math.max(panel.minSize, nextSizeUnsafe));
     return nextSize;
@@ -374,7 +400,7 @@ function $f5af57c8e042a4ad$export$c4dfce035d43d1e0(event) {
 
 
 
-function $63be9a96d8675f03$export$d9fcbe062527d159({ committedValuesRef: committedValuesRef , groupId: groupId , panels: panels , setSizes: setSizes , sizes: sizes  }) {
+function $63be9a96d8675f03$export$d9fcbe062527d159({ committedValuesRef: committedValuesRef , groupId: groupId , panels: panels , setSizes: setSizes , sizes: sizes , panelSizeBeforeCollapse: panelSizeBeforeCollapse  }) {
     (0, $b2QPe$react.useEffect)(()=>{
         const { direction: direction , panels: panels  } = committedValuesRef.current;
         const groupElement = (0, $d520236daad9c5d5$export$5e67632cf3550a9c)(groupId);
@@ -417,7 +443,7 @@ function $63be9a96d8675f03$export$d9fcbe062527d159({ committedValuesRef: committ
                                     let delta = 0;
                                     if (size.toPrecision((0, $3237bc4a138172cd$export$d6d3992f3becc879)) <= panelData.minSize.toPrecision((0, $3237bc4a138172cd$export$d6d3992f3becc879))) delta = direction === "horizontal" ? width : height;
                                     else delta = -(direction === "horizontal" ? width : height);
-                                    const nextSizes = (0, $d520236daad9c5d5$export$f50bae335f53943c)(panels, idBefore, idAfter, delta, sizes);
+                                    const nextSizes = (0, $d520236daad9c5d5$export$f50bae335f53943c)(panels, idBefore, idAfter, delta, sizes, panelSizeBeforeCollapse.current);
                                     if (sizes !== nextSizes) setSizes(nextSizes);
                                 }
                             }
@@ -547,6 +573,8 @@ function $19bf0050f73d236b$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
     });
     // 0-1 values representing the relative size of each panel.
     const [sizes, setSizes] = (0, $b2QPe$react.useState)([]);
+    // Resize is calculated by the distance between the current pointer event and the resize handle being "dragged"
+    // This value accounts for the initial offset when the touch/click starts, so the handle doesn't appear to "jump"
     const dragOffsetRef = (0, $b2QPe$react.useRef)(0);
     // Used to support imperative collapse/expand API.
     const panelSizeBeforeCollapse = (0, $b2QPe$react.useRef)(new Map());
@@ -566,14 +594,30 @@ function $19bf0050f73d236b$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
         groupId: groupId,
         panels: panels,
         setSizes: setSizes,
-        sizes: sizes
+        sizes: sizes,
+        panelSizeBeforeCollapse: panelSizeBeforeCollapse
     });
     // Notify external code when sizes have changed.
     (0, $b2QPe$react.useEffect)(()=>{
         const { onLayout: onLayout  } = callbacksRef.current;
         if (onLayout) {
             const { sizes: sizes  } = committedValuesRef.current;
-            onLayout(sizes);
+            // 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 = (0, $b2QPe$react.useRef)(false);
+    (0, $967abed3d1bd1fe9$export$2e2bcd8739ae039)(()=>{
+        if (didNotifyCallbacksAfterMountRef.current) return;
+        const { panels: panels , sizes: sizes  } = committedValuesRef.current;
+        if (sizes.length > 0) {
+            didNotifyCallbacksAfterMountRef.current = true;
+            const panelsArray = (0, $d520236daad9c5d5$export$a861c0ad45885494)(panels);
+            (0, $d520236daad9c5d5$export$b8e48269e4faa934)(panelsArray, [], sizes);
         }
     }, [
         sizes
@@ -680,7 +724,7 @@ function $19bf0050f73d236b$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
             const isHorizontal = direction === "horizontal";
             const size = isHorizontal ? rect.width : rect.height;
             const delta = movement / size * 100;
-            const nextSizes = (0, $d520236daad9c5d5$export$f50bae335f53943c)(panels, idBefore, idAfter, delta, prevSizes);
+            const nextSizes = (0, $d520236daad9c5d5$export$f50bae335f53943c)(panels, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse.current);
             if (prevSizes === nextSizes) {
                 // If the pointer has moved too far to resize the panel any further,
                 // update the cursor style for a visual clue.
@@ -722,7 +766,7 @@ function $19bf0050f73d236b$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
         if (idBefore == null || idAfter == null) return;
         const isLastPanel = index === panelsArray.length - 1;
         const delta = isLastPanel ? currentSize : 0 - currentSize;
-        const nextSizes = (0, $d520236daad9c5d5$export$f50bae335f53943c)(panels, idBefore, idAfter, delta, prevSizes);
+        const nextSizes = (0, $d520236daad9c5d5$export$f50bae335f53943c)(panels, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse.current);
         if (prevSizes !== nextSizes) {
             // If resize change handlers have been declared, this is the time to call them.
             (0, $d520236daad9c5d5$export$b8e48269e4faa934)(panelsArray, prevSizes, nextSizes);
@@ -745,7 +789,7 @@ function $19bf0050f73d236b$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
         if (idBefore == null || idAfter == null) return;
         const isLastPanel = index === panelsArray.length - 1;
         const delta = isLastPanel ? 0 - sizeBeforeCollapse : sizeBeforeCollapse;
-        const nextSizes = (0, $d520236daad9c5d5$export$f50bae335f53943c)(panels, idBefore, idAfter, delta, prevSizes);
+        const nextSizes = (0, $d520236daad9c5d5$export$f50bae335f53943c)(panels, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse.current);
         if (prevSizes !== nextSizes) {
             // If resize change handlers have been declared, this is the time to call them.
             (0, $d520236daad9c5d5$export$b8e48269e4faa934)(panelsArray, prevSizes, nextSizes);
@@ -765,7 +809,7 @@ function $19bf0050f73d236b$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
         if (idBefore == null || idAfter == null) return;
         const isLastPanel = index === panelsArray.length - 1;
         const delta = isLastPanel ? currentSize - nextSize : nextSize - currentSize;
-        const nextSizes = (0, $d520236daad9c5d5$export$f50bae335f53943c)(panels, idBefore, idAfter, delta, prevSizes);
+        const nextSizes = (0, $d520236daad9c5d5$export$f50bae335f53943c)(panels, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse.current);
         if (prevSizes !== nextSizes) {
             // If resize change handlers have been declared, this is the time to call them.
             (0, $d520236daad9c5d5$export$b8e48269e4faa934)(panelsArray, prevSizes, nextSizes);