npm - react-resizable-panels - Versions diffs - 0.0.42 → 0.0.44 - Mend

react-resizable-panels 0.0.42 → 0.0.44

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (17) hide show

package/CHANGELOG.md +7 -0
package/README.md +5 -0
package/dist/react-resizable-panels.d.ts +2 -1
package/dist/react-resizable-panels.d.ts.map +1 -1
package/dist/react-resizable-panels.js +193 -187
package/dist/react-resizable-panels.js.map +1 -1
package/dist/react-resizable-panels.module.js +193 -187
package/dist/react-resizable-panels.module.js.map +1 -1
package/package.json +1 -1
package/src/Panel.ts +41 -30
package/src/PanelGroup.ts +41 -23
package/src/hooks/useWindowSplitterBehavior.ts +7 -7
package/src/index.ts +4 -4
package/src/types.ts +14 -10
package/src/utils/coordinates.ts +5 -5
package/src/utils/group.ts +20 -18
package/src/utils/serialization.ts +1 -1

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,12 @@
 # Changelog
+## 0.0.44
+* [#142](https://github.com/bvaughn/react-resizable-panels/issues/142): Avoid re-registering `Panel` when props change
+## 0.0.43
+* Add imperative `getLayout` API to `PanelGroup`
+* [#139](https://github.com/bvaughn/react-resizable-panels/pull/139): Fix edge case bug where simultaneous `localStorage` updates to multiple saved groups would drop some values
 ## 0.0.42
 * Change cursor style from `col-resize`/`row-resize` to `ew-resize`/`ns-resize` to better match cursor style at edges of a panel.

package/README.md CHANGED Viewed

@@ -43,6 +43,11 @@ import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
  <sup>2</sup>: This behavior is disabled by default because it can interfere with scrollbar styles, but it can be useful in the edge case where a `Panel` contains an `<iframe>`
+`PanelGroup` components also expose an imperative API for manual resizing:
+| method                            | description
+| :-------------------------------- | :---
+| `setLayout(panelSizes: number[])` | Resize panel group to the specified _panelSizes_ (`[1 - 100, ...]`).
 ### `Panel`
 | prop          | type                            | description
 | :------------ | :------------------------------ | :---

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

@@ -42,7 +42,8 @@ export type PanelGroupProps = {
     style?: CSSProperties;
     tagName?: ElementType;
 };
-type ImperativePanelGroupHandle = {
+export type ImperativePanelGroupHandle = {
+    getLayout: () => number[];
     setLayout: (panelSizes: number[]) => void;
 };
 export const PanelGroup: import("react").ForwardRefExoticComponent<PanelGroupProps & import("react").RefAttributes<ImperativePanelGroupHandle>>;

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

	@@ -1 +1 @@
1	- {"mappings":";AGEA,iBAAwB,YAAY,GAAG,UAAU,CAAC;AAElD,gCAAgC;IAC9B,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IACrC,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CAC5C,CAAC;AAEF,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;AACnD,mCAA0C,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;~~AEMxE~~,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,YAAY,IAAI,OAAO,CAAC;IACxB,OAAO,IAAI,MAAM,CAAC;IAClB,MAAM,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC,CAAC;~~AAyIF~~,OAAO,MAAM,mHAGZ,CAAC;~~AUxFF~~,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,gCAAgC,CAAC,EAAE,OAAO,CAAC;IAC3C,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB,CAAC;AAEF,~~kCAAyC~~;IACvC,SAAS,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CAC3C,CAAC;~~AA2jBF~~,OAAO,MAAM,kIAKZ,CAAC;~~AClpBF~~,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,UAAU,CAAC,EAAE,2BAA2B,CAAC;IACzC,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,UAAU,EACV,KAAK,EAAE,cAAmB,EAC1B,OAAO,EAAE,IAAY,GACtB,EAAE,sBAAsB,0FAoJxB","sources":["packages/react-resizable-panels/src/src/vendor/react.ts","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/utils/~~assert~~.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/utils/~~arrays~~.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,null,null,null,"import { Panel } from \"./Panel\";\nimport { PanelGroup } from \"./PanelGroup\";\nimport { PanelResizeHandle } from \"./PanelResizeHandle\";\n\nimport type { ImperativePanelHandle, PanelProps } from \"./Panel\";\nimport type { ImperativePanelGroupHandle, PanelGroupProps } from \"./PanelGroup\";\nimport type { PanelResizeHandleProps } from \"./PanelResizeHandle\";\nimport type { PanelGroupStorage } from \"./types\";\n\nexport {\n ~~Panel,\~~n ~~PanelGroup~~,\n ~~PanelResizeHandle~~,\n\n ~~// TypeScript types\~~n ~~ImperativePanelHandle~~,\n PanelGroupProps,\n PanelGroupStorage,\n PanelProps,\n PanelResizeHandleProps,\n};\n"],"names":[],"version":3,"file":"react-resizable-panels.d.ts.map"}
1	+ {"mappings":";AGEA,iBAAwB,YAAY,GAAG,UAAU,CAAC;AAElD,gCAAgC;IAC9B,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IACrC,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CAC5C,CAAC;AAEF,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;AACnD,mCAA0C,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;AEWxE,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,YAAY,IAAI,OAAO,CAAC;IACxB,OAAO,IAAI,MAAM,CAAC;IAClB,MAAM,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC,CAAC;AA+IF,OAAO,MAAM,mHAGZ,CAAC;AU7FF,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,gCAAgC,CAAC,EAAE,OAAO,CAAC;IAC3C,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB,CAAC;AAEF,yCAAyC;IACvC,SAAS,EAAE,MAAM,MAAM,EAAE,CAAC;IAC1B,SAAS,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CAC3C,CAAC;AAskBF,OAAO,MAAM,kIAKZ,CAAC;ACpqBF,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,UAAU,CAAC,EAAE,2BAA2B,CAAC;IACzC,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,UAAU,EACV,KAAK,EAAE,cAAmB,EAC1B,OAAO,EAAE,IAAY,GACtB,EAAE,sBAAsB,0FAoJxB","sources":["packages/react-resizable-panels/src/src/vendor/react.ts","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/constants.ts","packages/react-resizable-panels/src/src/utils/group.ts","packages/react-resizable-panels/src/src/utils/assert.ts","packages/react-resizable-panels/src/src/hooks/useWindowSplitterBehavior.ts","packages/react-resizable-panels/src/src/utils/arrays.ts","packages/react-resizable-panels/src/src/utils/coordinates.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/utils/serialization.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,null,null,null,"import { Panel } from \"./Panel\";\nimport { PanelGroup } from \"./PanelGroup\";\nimport { PanelResizeHandle } from \"./PanelResizeHandle\";\n\nimport type { ImperativePanelHandle, PanelProps } from \"./Panel\";\nimport type { ImperativePanelGroupHandle, PanelGroupProps } from \"./PanelGroup\";\nimport type { PanelResizeHandleProps } from \"./PanelResizeHandle\";\nimport type { PanelGroupStorage } from \"./types\";\n\nexport {\n // TypeScript types\n ImperativePanelGroupHandle,\n ImperativePanelHandle,\n Panel,\n PanelGroup,\n PanelGroupProps,\n PanelGroupStorage,\n PanelProps,\n PanelResizeHandle,\n PanelResizeHandleProps,\n};\n"],"names":[],"version":3,"file":"react-resizable-panels.d.ts.map"}

package/dist/react-resizable-panels.js CHANGED Viewed

@@ -19,7 +19,6 @@ const { createElement: $6e687094f9ca8395$export$c8a8987d4410bf2d , createContext
 const $6e687094f9ca8395$export$f680877a34711e37 = $2IMI0$react["useId".toString()];
 const $129b5b9a317dcc10$var$canUseEffectHooks = !!(typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined");
 const $129b5b9a317dcc10$var$useIsomorphicLayoutEffect = $129b5b9a317dcc10$var$canUseEffectHooks ? (0, $6e687094f9ca8395$export$e5c5a5f917a5871c) : ()=>{};
 var $129b5b9a317dcc10$export$2e2bcd8739ae039 = $129b5b9a317dcc10$var$useIsomorphicLayoutEffect;
@@ -37,6 +36,7 @@ function $b1693d8d8f570e9c$export$2e2bcd8739ae039(idFromParams = null) {
 const $b9cf028330e7f243$export$7d8c6d083caec74a = (0, $6e687094f9ca8395$export$fd42f52fd3ae1109)(null);
 // Workaround for Parcel scope hoisting (which renames objects/functions).
 // Casting to :any is required to avoid corrupting the generated TypeScript types.
@@ -68,37 +68,38 @@ function $45da0e827c614f1d$var$PanelWithForwardedRef({ children: children = null
             defaultSize = minSize;
         }
     }
+    const style = getPanelStyle(panelId);
+    const committedValuesRef = (0, $6e687094f9ca8395$export$b8f5890fc79d6aca)({
+        size: $45da0e827c614f1d$var$parseSizeFromStyle(style)
+    });
+    const panelDataRef = (0, $6e687094f9ca8395$export$b8f5890fc79d6aca)({
+        callbacksRef: callbacksRef,
+        collapsible: collapsible,
+        defaultSize: defaultSize,
+        id: panelId,
+        maxSize: maxSize,
+        minSize: minSize,
+        order: order
+    });
     (0, $129b5b9a317dcc10$export$2e2bcd8739ae039)(()=>{
-        const panel = {
-            callbacksRef: callbacksRef,
-            collapsible: collapsible,
-            defaultSize: defaultSize,
-            id: panelId,
-            maxSize: maxSize,
-            minSize: minSize,
-            order: order
-        };
-        registerPanel(panelId, panel);
+        committedValuesRef.current.size = $45da0e827c614f1d$var$parseSizeFromStyle(style);
+        panelDataRef.current.callbacksRef = callbacksRef;
+        panelDataRef.current.collapsible = collapsible;
+        panelDataRef.current.defaultSize = defaultSize;
+        panelDataRef.current.id = panelId;
+        panelDataRef.current.maxSize = maxSize;
+        panelDataRef.current.minSize = minSize;
+        panelDataRef.current.order = order;
+    });
+    (0, $129b5b9a317dcc10$export$2e2bcd8739ae039)(()=>{
+        registerPanel(panelId, panelDataRef);
         return ()=>{
             unregisterPanel(panelId);
         };
     }, [
-        collapsible,
-        defaultSize,
-        panelId,
-        maxSize,
-        minSize,
-        order,
         registerPanel,
         unregisterPanel
     ]);
-    const style = getPanelStyle(panelId);
-    const committedValuesRef = (0, $6e687094f9ca8395$export$b8f5890fc79d6aca)({
-        size: $45da0e827c614f1d$var$parseSizeFromStyle(style)
-    });
-    (0, $129b5b9a317dcc10$export$2e2bcd8739ae039)(()=>{
-        committedValuesRef.current.size = $45da0e827c614f1d$var$parseSizeFromStyle(style);
-    });
     (0, $6e687094f9ca8395$export$d5a552a76deda3c2)(forwardedRef, ()=>({
             collapse: ()=>collapsePanel(panelId),
             expand: ()=>expandPanel(panelId),
@@ -148,45 +149,6 @@ function $45da0e827c614f1d$var$parseSizeFromStyle(style) {
-// Note that Panel ids might be user-provided (stable) or useId generated (non-deterministic)
-// so they should not be used as part of the serialization key.
-// Using an attribute like minSize instead should work well enough.
-// Pre-sorting by minSize allows remembering layouts even if panels are re-ordered/dragged.
-function $f9cb001fbb908626$var$getSerializationKey(panels) {
-    return panels.map((panel)=>{
-        const { minSize: minSize , order: order  } = panel;
-        return order ? `${order}:${minSize}` : `${minSize}`;
-    }).sort((a, b)=>a.localeCompare(b)).join(",");
-}
-function $f9cb001fbb908626$var$loadSerializedPanelGroupState(autoSaveId, storage) {
-    try {
-        const serialized = storage.getItem(`PanelGroup:sizes:${autoSaveId}`);
-        if (serialized) {
-            const parsed = JSON.parse(serialized);
-            if (typeof parsed === "object" && parsed != null) return parsed;
-        }
-    } catch (error) {}
-    return null;
-}
-function $f9cb001fbb908626$export$9c80c6617f0386da(autoSaveId, panels, storage) {
-    const state = $f9cb001fbb908626$var$loadSerializedPanelGroupState(autoSaveId, storage);
-    if (state) {
-        const key = $f9cb001fbb908626$var$getSerializationKey(panels);
-        var _state_key;
-        return (_state_key = state[key]) !== null && _state_key !== void 0 ? _state_key : null;
-    }
-    return null;
-}
-function $f9cb001fbb908626$export$af183b313c61be4f(autoSaveId, panels, sizes, storage) {
-    const key = $f9cb001fbb908626$var$getSerializationKey(panels);
-    const state = $f9cb001fbb908626$var$loadSerializedPanelGroupState(autoSaveId, storage) || {};
-    state[key] = sizes;
-    try {
-        storage.setItem(`PanelGroup:sizes:${autoSaveId}`, JSON.stringify(state));
-    } catch (error) {
-        console.error(error);
-    }
-}
 const $9abd79656a89cd3a$export$d6d3992f3becc879 = 10;
@@ -212,7 +174,7 @@ function $cda3cc4b1114cf23$export$f50bae335f53943c(event, panels, idBefore, idAf
     // Max-bounds check the panel being expanded first.
     {
         const pivotId = delta < 0 ? idAfter : idBefore;
-        const index = panelsArray.findIndex((panel)=>panel.id === pivotId);
+        const index = panelsArray.findIndex((panel)=>panel.current.id === pivotId);
         const panel = panelsArray[index];
         const baseSize = baseSizes[index];
         const nextSize = $cda3cc4b1114cf23$var$safeResizePanel(panel, Math.abs(delta), baseSize, event);
@@ -224,14 +186,14 @@ function $cda3cc4b1114cf23$export$f50bae335f53943c(event, panels, idBefore, idAf
         }
     }
     let pivotId = delta < 0 ? idBefore : idAfter;
-    let index = panelsArray.findIndex((panel)=>panel.id === pivotId);
+    let index = panelsArray.findIndex((panel)=>panel.current.id === pivotId);
     while(true){
         const panel = panelsArray[index];
         const baseSize = baseSizes[index];
         const deltaRemaining = Math.abs(delta) - Math.abs(deltaApplied);
         const nextSize = $cda3cc4b1114cf23$var$safeResizePanel(panel, 0 - deltaRemaining, baseSize, event);
         if (baseSize !== nextSize) {
-            if (nextSize === 0 && baseSize > 0) panelSizeBeforeCollapse.set(panel.id, baseSize);
+            if (nextSize === 0 && baseSize > 0) panelSizeBeforeCollapse.set(panel.current.id, baseSize);
             deltaApplied += baseSize - nextSize;
             nextSizes[index] = nextSize;
             if (deltaApplied.toPrecision((0, $9abd79656a89cd3a$export$d6d3992f3becc879)).localeCompare(Math.abs(delta).toPrecision((0, $9abd79656a89cd3a$export$d6d3992f3becc879)), undefined, {
@@ -249,7 +211,7 @@ function $cda3cc4b1114cf23$export$f50bae335f53943c(event, panels, idBefore, idAf
     if (deltaApplied === 0) return baseSizes;
     // Adjust the pivot panel before, but only by the amount that surrounding panels were able to shrink/contract.
     pivotId = delta < 0 ? idAfter : idBefore;
-    index = panelsArray.findIndex((panel)=>panel.id === pivotId);
+    index = panelsArray.findIndex((panel)=>panel.current.id === pivotId);
     nextSizes[index] = baseSizes[index] + deltaApplied;
     return nextSizes;
 }
@@ -257,7 +219,7 @@ function $cda3cc4b1114cf23$export$b8e48269e4faa934(panelsArray, prevSizes, nextS
     nextSizes.forEach((nextSize, index)=>{
         const prevSize = prevSizes[index];
         if (prevSize !== nextSize) {
-            const { callbacksRef: callbacksRef , collapsible: collapsible  } = panelsArray[index];
+            const { callbacksRef: callbacksRef , collapsible: collapsible  } = panelsArray[index].current;
             const { onCollapse: onCollapse , onResize: onResize  } = callbacksRef.current;
             if (onResize) onResize(nextSize);
             if (collapsible && onCollapse) {
@@ -274,14 +236,14 @@ function $cda3cc4b1114cf23$export$5a5b0c1d38c23c3b(id, panelsArray) {
         null,
         null
     ];
-    const index = panelsArray.findIndex((panel)=>panel.id === id);
+    const index = panelsArray.findIndex((panel)=>panel.current.id === id);
     if (index < 0) return [
         null,
         null
     ];
     const isLastPanel = index === panelsArray.length - 1;
-    const idBefore = isLastPanel ? panelsArray[index - 1].id : id;
-    const idAfter = isLastPanel ? id : panelsArray[index + 1].id;
+    const idBefore = isLastPanel ? panelsArray[index - 1].current.id : id;
+    const idAfter = isLastPanel ? id : panelsArray[index + 1].current.id;
     return [
         idBefore,
         idAfter
@@ -290,7 +252,7 @@ function $cda3cc4b1114cf23$export$5a5b0c1d38c23c3b(id, panelsArray) {
 function $cda3cc4b1114cf23$export$6f43503e166de6fb(panels, id, sizes) {
     if (panels.size === 1) return "100";
     const panelsArray = $cda3cc4b1114cf23$export$a861c0ad45885494(panels);
-    const index = panelsArray.findIndex((panel)=>panel.id === id);
+    const index = panelsArray.findIndex((panel)=>panel.current.id === id);
     const size = sizes[index];
     if (size == null) return "0";
     return size.toPrecision((0, $9abd79656a89cd3a$export$d6d3992f3becc879));
@@ -322,14 +284,14 @@ function $cda3cc4b1114cf23$export$ae14931f0a0256a3(groupId) {
     return Array.from(document.querySelectorAll(`[data-panel-resize-handle-id][data-panel-group-id="${groupId}"]`));
 }
 function $cda3cc4b1114cf23$export$68d3a33c21dfbe27(groupId, handleId, panelsArray) {
-    var _panelsArray_index, _panelsArray_;
+    var _panelsArray_index, _panelsArray_index_current, _panelsArray_, _panelsArray__current;
     const handle = $cda3cc4b1114cf23$export$2e27d3a347680388(handleId);
     const handles = $cda3cc4b1114cf23$export$ae14931f0a0256a3(groupId);
     const index = handle ? handles.indexOf(handle) : -1;
-    var _panelsArray_index_id;
-    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;
-    var _panelsArray__id;
-    const idAfter = (_panelsArray__id = (_panelsArray_ = panelsArray[index + 1]) === null || _panelsArray_ === void 0 ? void 0 : _panelsArray_.id) !== null && _panelsArray__id !== void 0 ? _panelsArray__id : null;
+    var _panelsArray_index_current_id;
+    const idBefore = (_panelsArray_index_current_id = (_panelsArray_index = panelsArray[index]) === null || _panelsArray_index === void 0 ? void 0 : (_panelsArray_index_current = _panelsArray_index.current) === null || _panelsArray_index_current === void 0 ? void 0 : _panelsArray_index_current.id) !== null && _panelsArray_index_current_id !== void 0 ? _panelsArray_index_current_id : null;
+    var _panelsArray__current_id;
+    const idAfter = (_panelsArray__current_id = (_panelsArray_ = panelsArray[index + 1]) === null || _panelsArray_ === void 0 ? void 0 : (_panelsArray__current = _panelsArray_.current) === null || _panelsArray__current === void 0 ? void 0 : _panelsArray__current.id) !== null && _panelsArray__current_id !== void 0 ? _panelsArray__current_id : null;
     return [
         idBefore,
         idAfter
@@ -337,8 +299,8 @@ function $cda3cc4b1114cf23$export$68d3a33c21dfbe27(groupId, handleId, panelsArra
 }
 function $cda3cc4b1114cf23$export$a861c0ad45885494(panels) {
     return Array.from(panels.values()).sort((panelA, panelB)=>{
-        const orderA = panelA.order;
-        const orderB = panelB.order;
+        const orderA = panelA.current.order;
+        const orderB = panelB.current.order;
         if (orderA == null && orderB == null) return 0;
         else if (orderA == null) return -1;
         else if (orderB == null) return 1;
@@ -347,7 +309,7 @@ function $cda3cc4b1114cf23$export$a861c0ad45885494(panels) {
 }
 function $cda3cc4b1114cf23$var$safeResizePanel(panel, delta, prevSize, event) {
     const nextSizeUnsafe = prevSize + delta;
-    if (panel.collapsible) {
+    if (panel.current.collapsible) {
         if (prevSize > 0) {
             if (nextSizeUnsafe <= 0) return 0;
         } else {
@@ -357,93 +319,15 @@ function $cda3cc4b1114cf23$var$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.minSize) return 0;
+                if (nextSizeUnsafe < panel.current.minSize) return 0;
             }
         }
     }
-    const nextSize = Math.min(panel.maxSize, Math.max(panel.minSize, nextSizeUnsafe));
+    const nextSize = Math.min(panel.current.maxSize, Math.max(panel.current.minSize, nextSizeUnsafe));
     return nextSize;
 }
-function $47eee9224cfec8e8$export$ec391ce65b083ed4(event, handleId, direction, initialOffset = 0, initialHandleElementRect = null) {
-    const isHorizontal = direction === "horizontal";
-    let pointerOffset = 0;
-    if ($47eee9224cfec8e8$export$764db16956f554f8(event)) pointerOffset = isHorizontal ? event.clientX : event.clientY;
-    else if ($47eee9224cfec8e8$export$c4dfce035d43d1e0(event)) {
-        const firstTouch = event.touches[0];
-        pointerOffset = isHorizontal ? firstTouch.screenX : firstTouch.screenY;
-    } else return 0;
-    const handleElement = (0, $cda3cc4b1114cf23$export$2e27d3a347680388)(handleId);
-    const rect = initialHandleElementRect || handleElement.getBoundingClientRect();
-    const elementOffset = isHorizontal ? rect.left : rect.top;
-    return pointerOffset - elementOffset - initialOffset;
-}
-function $47eee9224cfec8e8$export$354b17c0684607ed(event, groupId, handleId, panelsArray, direction, prevSizes, initialDragState) {
-    const { dragOffset: dragOffset = 0 , dragHandleRect: dragHandleRect , sizes: initialSizes  } = initialDragState || {};
-    // If we're resizing by mouse or touch, use the initial sizes as a base.
-    // This has the benefit of causing force-collapsed panels to spring back open if drag is reversed.
-    const baseSizes = initialSizes || prevSizes;
-    if ($47eee9224cfec8e8$export$e7bf60a870f429b0(event)) {
-        const isHorizontal = direction === "horizontal";
-        const groupElement = (0, $cda3cc4b1114cf23$export$5e67632cf3550a9c)(groupId);
-        const rect = groupElement.getBoundingClientRect();
-        const groupSizeInPixels = isHorizontal ? rect.width : rect.height;
-        const denominator = event.shiftKey ? 10 : 100;
-        const delta = groupSizeInPixels / denominator;
-        let movement = 0;
-        switch(event.key){
-            case "ArrowDown":
-                movement = isHorizontal ? 0 : delta;
-                break;
-            case "ArrowLeft":
-                movement = isHorizontal ? -delta : 0;
-                break;
-            case "ArrowRight":
-                movement = isHorizontal ? delta : 0;
-                break;
-            case "ArrowUp":
-                movement = isHorizontal ? 0 : -delta;
-                break;
-            case "End":
-                movement = groupSizeInPixels;
-                break;
-            case "Home":
-                movement = -groupSizeInPixels;
-                break;
-        }
-        // If the Panel being resized is collapsible,
-        // we need to special case resizing around the minSize boundary.
-        // If contracting, Panels should shrink to their minSize and then snap to fully collapsed.
-        // If expanding from collapsed, they should snap back to their minSize.
-        const [idBefore, idAfter] = (0, $cda3cc4b1114cf23$export$68d3a33c21dfbe27)(groupId, handleId, panelsArray);
-        const targetPanelId = movement < 0 ? idBefore : idAfter;
-        const targetPanelIndex = panelsArray.findIndex((panel)=>panel.id === targetPanelId);
-        const targetPanel = panelsArray[targetPanelIndex];
-        if (targetPanel.collapsible) {
-            const baseSize = baseSizes[targetPanelIndex];
-            if (baseSize === 0 || baseSize.toPrecision((0, $9abd79656a89cd3a$export$d6d3992f3becc879)) === targetPanel.minSize.toPrecision((0, $9abd79656a89cd3a$export$d6d3992f3becc879))) movement = movement < 0 ? -targetPanel.minSize * groupSizeInPixels : targetPanel.minSize * groupSizeInPixels;
-        }
-        return movement;
-    } else return $47eee9224cfec8e8$export$ec391ce65b083ed4(event, handleId, direction, dragOffset, dragHandleRect);
-}
-function $47eee9224cfec8e8$export$e7bf60a870f429b0(event) {
-    return event.type === "keydown";
-}
-function $47eee9224cfec8e8$export$764db16956f554f8(event) {
-    return event.type.startsWith("mouse");
-}
-function $47eee9224cfec8e8$export$c4dfce035d43d1e0(event) {
-    return event.type.startsWith("touch");
-}
 function $3b727a2145ecd6f8$export$a7a9523472993e97(expectedCondition, message = "Assertion failed!") {
     if (!expectedCondition) {
         console.error(message);
@@ -469,12 +353,12 @@ function $a695670cc57a5969$export$d9fcbe062527d159({ committedValuesRef: committ
             let totalMaxSize = 0;
             // A panel's effective min/max sizes also need to account for other panel's sizes.
             panelsArray.forEach((panelData)=>{
-                if (panelData.id === idBefore) {
-                    maxSize = panelData.maxSize;
-                    minSize = panelData.minSize;
+                if (panelData.current.id === idBefore) {
+                    maxSize = panelData.current.maxSize;
+                    minSize = panelData.current.minSize;
                 } else {
-                    totalMinSize += panelData.minSize;
-                    totalMaxSize += panelData.maxSize;
+                    totalMinSize += panelData.current.minSize;
+                    totalMaxSize += panelData.current.maxSize;
                 }
             });
             const ariaValueMax = Math.min(maxSize, 100 - totalMinSize);
@@ -489,13 +373,13 @@ function $a695670cc57a5969$export$d9fcbe062527d159({ committedValuesRef: committ
                     case "Enter":
                         {
                             event.preventDefault();
-                            const index = panelsArray.findIndex((panel)=>panel.id === idBefore);
+                            const index = panelsArray.findIndex((panel)=>panel.current.id === idBefore);
                             if (index >= 0) {
                                 const panelData = panelsArray[index];
                                 const size = sizes[index];
                                 if (size != null) {
                                     let delta = 0;
-                                    if (size.toPrecision((0, $9abd79656a89cd3a$export$d6d3992f3becc879)) <= panelData.minSize.toPrecision((0, $9abd79656a89cd3a$export$d6d3992f3becc879))) delta = direction === "horizontal" ? width : height;
+                                    if (size.toPrecision((0, $9abd79656a89cd3a$export$d6d3992f3becc879)) <= panelData.current.minSize.toPrecision((0, $9abd79656a89cd3a$export$d6d3992f3becc879))) delta = direction === "horizontal" ? width : height;
                                     else delta = -(direction === "horizontal" ? width : height);
                                     const nextSizes = (0, $cda3cc4b1114cf23$export$f50bae335f53943c)(event, panels, idBefore, idAfter, delta, sizes, panelSizeBeforeCollapse.current, null);
                                     if (sizes !== nextSizes) setSizes(nextSizes);
@@ -570,6 +454,91 @@ function $a695670cc57a5969$export$33b0bea6ac3ffb03({ disabled: disabled , handle
 }
+function $d31ef7445a11a6c5$export$b141efd0b0fb9174(arrayA, arrayB) {
+    if (arrayA.length !== arrayB.length) return false;
+    for(let index = 0; index < arrayA.length; index++){
+        if (arrayA[index] !== arrayB[index]) return false;
+    }
+    return true;
+}
+function $47eee9224cfec8e8$export$ec391ce65b083ed4(event, handleId, direction, initialOffset = 0, initialHandleElementRect = null) {
+    const isHorizontal = direction === "horizontal";
+    let pointerOffset = 0;
+    if ($47eee9224cfec8e8$export$764db16956f554f8(event)) pointerOffset = isHorizontal ? event.clientX : event.clientY;
+    else if ($47eee9224cfec8e8$export$c4dfce035d43d1e0(event)) {
+        const firstTouch = event.touches[0];
+        pointerOffset = isHorizontal ? firstTouch.screenX : firstTouch.screenY;
+    } else return 0;
+    const handleElement = (0, $cda3cc4b1114cf23$export$2e27d3a347680388)(handleId);
+    const rect = initialHandleElementRect || handleElement.getBoundingClientRect();
+    const elementOffset = isHorizontal ? rect.left : rect.top;
+    return pointerOffset - elementOffset - initialOffset;
+}
+function $47eee9224cfec8e8$export$354b17c0684607ed(event, groupId, handleId, panelsArray, direction, prevSizes, initialDragState) {
+    const { dragOffset: dragOffset = 0 , dragHandleRect: dragHandleRect , sizes: initialSizes  } = initialDragState || {};
+    // If we're resizing by mouse or touch, use the initial sizes as a base.
+    // This has the benefit of causing force-collapsed panels to spring back open if drag is reversed.
+    const baseSizes = initialSizes || prevSizes;
+    if ($47eee9224cfec8e8$export$e7bf60a870f429b0(event)) {
+        const isHorizontal = direction === "horizontal";
+        const groupElement = (0, $cda3cc4b1114cf23$export$5e67632cf3550a9c)(groupId);
+        const rect = groupElement.getBoundingClientRect();
+        const groupSizeInPixels = isHorizontal ? rect.width : rect.height;
+        const denominator = event.shiftKey ? 10 : 100;
+        const delta = groupSizeInPixels / denominator;
+        let movement = 0;
+        switch(event.key){
+            case "ArrowDown":
+                movement = isHorizontal ? 0 : delta;
+                break;
+            case "ArrowLeft":
+                movement = isHorizontal ? -delta : 0;
+                break;
+            case "ArrowRight":
+                movement = isHorizontal ? delta : 0;
+                break;
+            case "ArrowUp":
+                movement = isHorizontal ? 0 : -delta;
+                break;
+            case "End":
+                movement = groupSizeInPixels;
+                break;
+            case "Home":
+                movement = -groupSizeInPixels;
+                break;
+        }
+        // If the Panel being resized is collapsible,
+        // we need to special case resizing around the minSize boundary.
+        // If contracting, Panels should shrink to their minSize and then snap to fully collapsed.
+        // If expanding from collapsed, they should snap back to their minSize.
+        const [idBefore, idAfter] = (0, $cda3cc4b1114cf23$export$68d3a33c21dfbe27)(groupId, handleId, panelsArray);
+        const targetPanelId = movement < 0 ? idBefore : idAfter;
+        const targetPanelIndex = panelsArray.findIndex((panel)=>panel.current.id === targetPanelId);
+        const targetPanel = panelsArray[targetPanelIndex];
+        if (targetPanel.current.collapsible) {
+            const baseSize = baseSizes[targetPanelIndex];
+            if (baseSize === 0 || baseSize.toPrecision((0, $9abd79656a89cd3a$export$d6d3992f3becc879)) === targetPanel.current.minSize.toPrecision((0, $9abd79656a89cd3a$export$d6d3992f3becc879))) movement = movement < 0 ? -targetPanel.current.minSize * groupSizeInPixels : targetPanel.current.minSize * groupSizeInPixels;
+        }
+        return movement;
+    } else return $47eee9224cfec8e8$export$ec391ce65b083ed4(event, handleId, direction, dragOffset, dragHandleRect);
+}
+function $47eee9224cfec8e8$export$e7bf60a870f429b0(event) {
+    return event.type === "keydown";
+}
+function $47eee9224cfec8e8$export$764db16956f554f8(event) {
+    return event.type.startsWith("mouse");
+}
+function $47eee9224cfec8e8$export$c4dfce035d43d1e0(event) {
+    return event.type.startsWith("touch");
+}
 let $08745f7373322b05$var$currentState = null;
 let $08745f7373322b05$var$element = null;
 function $08745f7373322b05$export$fa35f3322c52262f(state) {
@@ -619,18 +588,49 @@ function $2e8572579e31d898$export$2e2bcd8739ae039(callback, durationMs = 10) {
 }
-function $d31ef7445a11a6c5$export$b141efd0b0fb9174(arrayA, arrayB) {
-    if (arrayA.length !== arrayB.length) return false;
-    for(let index = 0; index < arrayA.length; index++){
-        if (arrayA[index] !== arrayB[index]) return false;
+// Note that Panel ids might be user-provided (stable) or useId generated (non-deterministic)
+// so they should not be used as part of the serialization key.
+// Using an attribute like minSize instead should work well enough.
+// Pre-sorting by minSize allows remembering layouts even if panels are re-ordered/dragged.
+function $f9cb001fbb908626$var$getSerializationKey(panels) {
+    return panels.map((panel)=>{
+        const { minSize: minSize , order: order  } = panel.current;
+        return order ? `${order}:${minSize}` : `${minSize}`;
+    }).sort((a, b)=>a.localeCompare(b)).join(",");
+}
+function $f9cb001fbb908626$var$loadSerializedPanelGroupState(autoSaveId, storage) {
+    try {
+        const serialized = storage.getItem(`PanelGroup:sizes:${autoSaveId}`);
+        if (serialized) {
+            const parsed = JSON.parse(serialized);
+            if (typeof parsed === "object" && parsed != null) return parsed;
+        }
+    } catch (error) {}
+    return null;
+}
+function $f9cb001fbb908626$export$9c80c6617f0386da(autoSaveId, panels, storage) {
+    const state = $f9cb001fbb908626$var$loadSerializedPanelGroupState(autoSaveId, storage);
+    if (state) {
+        const key = $f9cb001fbb908626$var$getSerializationKey(panels);
+        var _state_key;
+        return (_state_key = state[key]) !== null && _state_key !== void 0 ? _state_key : null;
+    }
+    return null;
+}
+function $f9cb001fbb908626$export$af183b313c61be4f(autoSaveId, panels, sizes, storage) {
+    const key = $f9cb001fbb908626$var$getSerializationKey(panels);
+    const state = $f9cb001fbb908626$var$loadSerializedPanelGroupState(autoSaveId, storage) || {};
+    state[key] = sizes;
+    try {
+        storage.setItem(`PanelGroup:sizes:${autoSaveId}`, JSON.stringify(state));
+    } catch (error) {
+        console.error(error);
     }
-    return true;
 }
-// Limit the frequency of localStorage updates.
-const $cec4cafe75f3db78$var$savePanelGroupLayoutDebounced = (0, $2e8572579e31d898$export$2e2bcd8739ae039)((0, $f9cb001fbb908626$export$af183b313c61be4f), 100);
+const $cec4cafe75f3db78$var$debounceMap = {};
 function $cec4cafe75f3db78$var$throwServerError() {
     throw new Error('PanelGroup "storage" prop required for server rendering.');
 }
@@ -665,6 +665,10 @@ function $cec4cafe75f3db78$var$PanelGroupWithForwardedRef({ autoSaveId: autoSave
         sizes: sizes
     });
     (0, $6e687094f9ca8395$export$d5a552a76deda3c2)(forwardedRef, ()=>({
+            getLayout: ()=>{
+                const { sizes: sizes  } = committedValuesRef.current;
+                return sizes;
+            },
             setLayout: (sizes)=>{
                 const total = sizes.reduce((accumulated, current)=>accumulated + current, 0);
                 (0, $3b727a2145ecd6f8$export$a7a9523472993e97)(total === 100, "Panel sizes must add up to 100%");
@@ -734,15 +738,15 @@ function $cec4cafe75f3db78$var$PanelGroupWithForwardedRef({ autoSaveId: autoSave
             // e.g. if Panel A has a maxSize of 40 then Panels A and B can't both have an implicit default size of 50.
             // For now, these logic edge cases are left to the user to handle via props.
             panelsArray.forEach((panel)=>{
-                totalMinSize += panel.minSize;
-                if (panel.defaultSize === null) panelsWithNullDefaultSize++;
-                else totalDefaultSize += panel.defaultSize;
+                totalMinSize += panel.current.minSize;
+                if (panel.current.defaultSize === null) panelsWithNullDefaultSize++;
+                else totalDefaultSize += panel.current.defaultSize;
             });
             if (totalDefaultSize > 100) throw new Error(`The sum of the defaultSize of all panels in a group cannot exceed 100.`);
             else if (totalMinSize > 100) throw new Error(`The sum of the minSize of all panels in a group cannot exceed 100.`);
             setSizes(panelsArray.map((panel)=>{
-                if (panel.defaultSize === null) return (100 - totalDefaultSize) / panelsWithNullDefaultSize;
-                return panel.defaultSize;
+                if (panel.current.defaultSize === null) return (100 - totalDefaultSize) / panelsWithNullDefaultSize;
+                return panel.current.defaultSize;
             }));
         }
     }, [
@@ -755,7 +759,9 @@ function $cec4cafe75f3db78$var$PanelGroupWithForwardedRef({ autoSaveId: autoSave
         if (autoSaveId) {
             if (sizes.length === 0 || sizes.length !== panels.size) return;
             const panelsArray = (0, $cda3cc4b1114cf23$export$a861c0ad45885494)(panels);
-            $cec4cafe75f3db78$var$savePanelGroupLayoutDebounced(autoSaveId, panelsArray, sizes, storage);
+            // Limit the frequency of localStorage updates.
+            if (!$cec4cafe75f3db78$var$debounceMap[autoSaveId]) $cec4cafe75f3db78$var$debounceMap[autoSaveId] = (0, $2e8572579e31d898$export$2e2bcd8739ae039)((0, $f9cb001fbb908626$export$af183b313c61be4f), 100);
+            $cec4cafe75f3db78$var$debounceMap[autoSaveId](autoSaveId, panelsArray, sizes, storage);
         }
     }, [
         autoSaveId,
@@ -791,11 +797,11 @@ function $cec4cafe75f3db78$var$PanelGroupWithForwardedRef({ autoSaveId: autoSave
         disablePointerEventsDuringResize,
         sizes
     ]);
-    const registerPanel = (0, $6e687094f9ca8395$export$35808ee640e87ca7)((id, panel)=>{
+    const registerPanel = (0, $6e687094f9ca8395$export$35808ee640e87ca7)((id, panelRef)=>{
         setPanels((prevPanels)=>{
             if (prevPanels.has(id)) return prevPanels;
             const nextPanels = new Map(prevPanels);
-            nextPanels.set(id, panel);
+            nextPanels.set(id, panelRef);
             return nextPanels;
         });
     }, []);
@@ -853,7 +859,7 @@ function $cec4cafe75f3db78$var$PanelGroupWithForwardedRef({ autoSaveId: autoSave
     const collapsePanel = (0, $6e687094f9ca8395$export$35808ee640e87ca7)((id)=>{
         const { panels: panels , sizes: prevSizes  } = committedValuesRef.current;
         const panel = panels.get(id);
-        if (panel == null || !panel.collapsible) return;
+        if (panel == null || !panel.current.collapsible) return;
         const panelsArray = (0, $cda3cc4b1114cf23$export$a861c0ad45885494)(panels);
         const index = panelsArray.indexOf(panel);
         if (index < 0) return;
@@ -876,7 +882,7 @@ function $cec4cafe75f3db78$var$PanelGroupWithForwardedRef({ autoSaveId: autoSave
         const { panels: panels , sizes: prevSizes  } = committedValuesRef.current;
         const panel = panels.get(id);
         if (panel == null) return;
-        const sizeBeforeCollapse = panelSizeBeforeCollapse.current.get(id) || panel.minSize;
+        const sizeBeforeCollapse = panelSizeBeforeCollapse.current.get(id) || panel.current.minSize;
         if (!sizeBeforeCollapse) return;
         const panelsArray = (0, $cda3cc4b1114cf23$export$a861c0ad45885494)(panels);
         const index = panelsArray.indexOf(panel);
@@ -904,8 +910,8 @@ function $cec4cafe75f3db78$var$PanelGroupWithForwardedRef({ autoSaveId: autoSave
         if (index < 0) return;
         const currentSize = prevSizes[index];
         if (currentSize === nextSize) return;
-        if (panel.collapsible && nextSize === 0) ;
-        else nextSize = Math.min(panel.maxSize, Math.max(panel.minSize, nextSize));
+        if (panel.current.collapsible && nextSize === 0) ;
+        else nextSize = Math.min(panel.current.maxSize, Math.max(panel.current.minSize, nextSize));
         const [idBefore, idAfter] = (0, $cda3cc4b1114cf23$export$5a5b0c1d38c23c3b)(id, panelsArray);
         if (idBefore == null || idAfter == null) return;
         const isLastPanel = index === panelsArray.length - 1;