react-resizable-panels 1.0.1 → 1.0.3

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 1.0.3
+
+- Remember most recently expanded panel size in local storage (#234)
+
+## 1.0.2
+
+- Change local storage key for persisted sizes to avoid restoring pixel-based sizes (#233)
+
 ## 1.0.1
 
 - Small bug fix to guard against saving an incorrect panel layout to local storage

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

@@ -961,11 +961,15 @@ function initializeDefaultStorage(storageObject) {
   }
 }
 
+function getPanelGroupKey(autoSaveId) {
+  return `react-resizable-panels:${autoSaveId}`;
+}
+
 // 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 the min/max size attributes should work well enough as a backup.
 // Pre-sorting by minSize allows remembering layouts even if panels are re-ordered/dragged.
-function getSerializationKey(panels) {
+function getPanelKey(panels) {
   return panels.map(panel => {
     const {
       constraints,
@@ -976,13 +980,14 @@ function getSerializationKey(panels) {
     if (idIsFromProps) {
       return id;
     } else {
-      return `${order}:${JSON.stringify(constraints)}`;
+      return order ? `${order}:${JSON.stringify(constraints)}` : JSON.stringify(constraints);
     }
   }).sort((a, b) => a.localeCompare(b)).join(",");
 }
 function loadSerializedPanelGroupState(autoSaveId, storage) {
   try {
-    const serialized = storage.getItem(`PanelGroup:sizes:${autoSaveId}`);
+    const panelGroupKey = getPanelGroupKey(autoSaveId);
+    const serialized = storage.getItem(panelGroupKey);
     if (serialized) {
       const parsed = JSON.parse(serialized);
       if (typeof parsed === "object" && parsed != null) {
@@ -992,21 +997,23 @@ function loadSerializedPanelGroupState(autoSaveId, storage) {
   } catch (error) {}
   return null;
 }
-function loadPanelLayout(autoSaveId, panels, storage) {
-  const state = loadSerializedPanelGroupState(autoSaveId, storage);
-  if (state) {
-    var _state$key;
-    const key = getSerializationKey(panels);
-    return (_state$key = state[key]) !== null && _state$key !== void 0 ? _state$key : null;
-  }
-  return null;
+function loadPanelGroupState(autoSaveId, panels, storage) {
+  var _loadSerializedPanelG, _state$panelKey;
+  const state = (_loadSerializedPanelG = loadSerializedPanelGroupState(autoSaveId, storage)) !== null && _loadSerializedPanelG !== void 0 ? _loadSerializedPanelG : {};
+  const panelKey = getPanelKey(panels);
+  return (_state$panelKey = state[panelKey]) !== null && _state$panelKey !== void 0 ? _state$panelKey : null;
 }
-function savePanelGroupLayout(autoSaveId, panels, sizes, storage) {
-  const key = getSerializationKey(panels);
-  const state = loadSerializedPanelGroupState(autoSaveId, storage) || {};
-  state[key] = sizes;
+function savePanelGroupState(autoSaveId, panels, panelSizesBeforeCollapse, sizes, storage) {
+  var _loadSerializedPanelG2;
+  const panelGroupKey = getPanelGroupKey(autoSaveId);
+  const panelKey = getPanelKey(panels);
+  const state = (_loadSerializedPanelG2 = loadSerializedPanelGroupState(autoSaveId, storage)) !== null && _loadSerializedPanelG2 !== void 0 ? _loadSerializedPanelG2 : {};
+  state[panelKey] = {
+    expandToSizes: Object.fromEntries(panelSizesBeforeCollapse.entries()),
+    layout: sizes
+  };
   try {
-    storage.setItem(`PanelGroup:sizes:${autoSaveId}`, JSON.stringify(state));
+    storage.setItem(panelGroupKey, JSON.stringify(state));
   } catch (error) {
     console.error(error);
   }
@@ -1103,7 +1110,6 @@ function PanelGroupWithForwardedRef({
   const groupId = useUniqueId(idFromProps);
   const [dragState, setDragState] = useState(null);
   const [layout, setLayout] = useState([]);
-  useState([]);
   const panelIdToLastNotifiedSizeMapRef = useRef({});
   const panelSizeBeforeCollapseRef = useRef(new Map());
   const prevDeltaRef = useRef(0);
@@ -1186,13 +1192,15 @@ function PanelGroupWithForwardedRef({
 
       // Limit the frequency of localStorage updates.
       if (debouncedSave == null) {
-        debouncedSave = debounce(savePanelGroupLayout, LOCAL_STORAGE_DEBOUNCE_INTERVAL);
+        debouncedSave = debounce(savePanelGroupState, LOCAL_STORAGE_DEBOUNCE_INTERVAL);
         debounceMap[autoSaveId] = debouncedSave;
       }
 
-      // Clone panel data array before saving since this array is mutated.
-      // If we don't clone, we run the risk of saving the wrong panel and layout pair.
-      debouncedSave(autoSaveId, [...panelDataArray], layout, storage);
+      // Clone mutable data before passing to the debounced function,
+      // else we run the risk of saving an incorrect combination of mutable and immutable values to state.
+      const clonedPanelDataArray = [...panelDataArray];
+      const clonedPanelSizesBeforeCollapse = new Map(panelSizeBeforeCollapseRef.current);
+      debouncedSave(autoSaveId, clonedPanelDataArray, clonedPanelSizesBeforeCollapse, layout, storage);
     }
   }, [autoSaveId, layout, storage]);
 
@@ -1379,7 +1387,11 @@ function PanelGroupWithForwardedRef({
       // default size should be restored from local storage if possible.
       let unsafeLayout = null;
       if (autoSaveId) {
-        unsafeLayout = loadPanelLayout(autoSaveId, panelDataArray, storage);
+        const state = loadPanelGroupState(autoSaveId, panelDataArray, storage);
+        if (state) {
+          panelSizeBeforeCollapseRef.current = new Map(Object.entries(state.expandToSizes));
+          unsafeLayout = state.layout;
+        }
       }
       if (unsafeLayout == null) {
         unsafeLayout = calculateUnsafeDefaultLayout({

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

@@ -977,11 +977,15 @@ function initializeDefaultStorage(storageObject) {
   }
 }
 
+function getPanelGroupKey(autoSaveId) {
+  return `react-resizable-panels:${autoSaveId}`;
+}
+
 // 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 the min/max size attributes should work well enough as a backup.
 // Pre-sorting by minSize allows remembering layouts even if panels are re-ordered/dragged.
-function getSerializationKey(panels) {
+function getPanelKey(panels) {
   return panels.map(panel => {
     const {
       constraints,
@@ -992,13 +996,14 @@ function getSerializationKey(panels) {
     if (idIsFromProps) {
       return id;
     } else {
-      return `${order}:${JSON.stringify(constraints)}`;
+      return order ? `${order}:${JSON.stringify(constraints)}` : JSON.stringify(constraints);
     }
   }).sort((a, b) => a.localeCompare(b)).join(",");
 }
 function loadSerializedPanelGroupState(autoSaveId, storage) {
   try {
-    const serialized = storage.getItem(`PanelGroup:sizes:${autoSaveId}`);
+    const panelGroupKey = getPanelGroupKey(autoSaveId);
+    const serialized = storage.getItem(panelGroupKey);
     if (serialized) {
       const parsed = JSON.parse(serialized);
       if (typeof parsed === "object" && parsed != null) {
@@ -1008,21 +1013,23 @@ function loadSerializedPanelGroupState(autoSaveId, storage) {
   } catch (error) {}
   return null;
 }
-function loadPanelLayout(autoSaveId, panels, storage) {
-  const state = loadSerializedPanelGroupState(autoSaveId, storage);
-  if (state) {
-    var _state$key;
-    const key = getSerializationKey(panels);
-    return (_state$key = state[key]) !== null && _state$key !== void 0 ? _state$key : null;
-  }
-  return null;
+function loadPanelGroupState(autoSaveId, panels, storage) {
+  var _loadSerializedPanelG, _state$panelKey;
+  const state = (_loadSerializedPanelG = loadSerializedPanelGroupState(autoSaveId, storage)) !== null && _loadSerializedPanelG !== void 0 ? _loadSerializedPanelG : {};
+  const panelKey = getPanelKey(panels);
+  return (_state$panelKey = state[panelKey]) !== null && _state$panelKey !== void 0 ? _state$panelKey : null;
 }
-function savePanelGroupLayout(autoSaveId, panels, sizes, storage) {
-  const key = getSerializationKey(panels);
-  const state = loadSerializedPanelGroupState(autoSaveId, storage) || {};
-  state[key] = sizes;
+function savePanelGroupState(autoSaveId, panels, panelSizesBeforeCollapse, sizes, storage) {
+  var _loadSerializedPanelG2;
+  const panelGroupKey = getPanelGroupKey(autoSaveId);
+  const panelKey = getPanelKey(panels);
+  const state = (_loadSerializedPanelG2 = loadSerializedPanelGroupState(autoSaveId, storage)) !== null && _loadSerializedPanelG2 !== void 0 ? _loadSerializedPanelG2 : {};
+  state[panelKey] = {
+    expandToSizes: Object.fromEntries(panelSizesBeforeCollapse.entries()),
+    layout: sizes
+  };
   try {
-    storage.setItem(`PanelGroup:sizes:${autoSaveId}`, JSON.stringify(state));
+    storage.setItem(panelGroupKey, JSON.stringify(state));
   } catch (error) {
     console.error(error);
   }
@@ -1166,7 +1173,6 @@ function PanelGroupWithForwardedRef({
   const groupId = useUniqueId(idFromProps);
   const [dragState, setDragState] = useState(null);
   const [layout, setLayout] = useState([]);
-  useState([]);
   const panelIdToLastNotifiedSizeMapRef = useRef({});
   const panelSizeBeforeCollapseRef = useRef(new Map());
   const prevDeltaRef = useRef(0);
@@ -1249,13 +1255,15 @@ function PanelGroupWithForwardedRef({
 
       // Limit the frequency of localStorage updates.
       if (debouncedSave == null) {
-        debouncedSave = debounce(savePanelGroupLayout, LOCAL_STORAGE_DEBOUNCE_INTERVAL);
+        debouncedSave = debounce(savePanelGroupState, LOCAL_STORAGE_DEBOUNCE_INTERVAL);
         debounceMap[autoSaveId] = debouncedSave;
       }
 
-      // Clone panel data array before saving since this array is mutated.
-      // If we don't clone, we run the risk of saving the wrong panel and layout pair.
-      debouncedSave(autoSaveId, [...panelDataArray], layout, storage);
+      // Clone mutable data before passing to the debounced function,
+      // else we run the risk of saving an incorrect combination of mutable and immutable values to state.
+      const clonedPanelDataArray = [...panelDataArray];
+      const clonedPanelSizesBeforeCollapse = new Map(panelSizeBeforeCollapseRef.current);
+      debouncedSave(autoSaveId, clonedPanelDataArray, clonedPanelSizesBeforeCollapse, layout, storage);
     }
   }, [autoSaveId, layout, storage]);
 
@@ -1484,7 +1492,11 @@ function PanelGroupWithForwardedRef({
       // default size should be restored from local storage if possible.
       let unsafeLayout = null;
       if (autoSaveId) {
-        unsafeLayout = loadPanelLayout(autoSaveId, panelDataArray, storage);
+        const state = loadPanelGroupState(autoSaveId, panelDataArray, storage);
+        if (state) {
+          panelSizeBeforeCollapseRef.current = new Map(Object.entries(state.expandToSizes));
+          unsafeLayout = state.layout;
+        }
       }
       if (unsafeLayout == null) {
         unsafeLayout = calculateUnsafeDefaultLayout({

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

@@ -953,11 +953,15 @@ function initializeDefaultStorage(storageObject) {
   }
 }
 
+function getPanelGroupKey(autoSaveId) {
+  return `react-resizable-panels:${autoSaveId}`;
+}
+
 // 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 the min/max size attributes should work well enough as a backup.
 // Pre-sorting by minSize allows remembering layouts even if panels are re-ordered/dragged.
-function getSerializationKey(panels) {
+function getPanelKey(panels) {
   return panels.map(panel => {
     const {
       constraints,
@@ -968,13 +972,14 @@ function getSerializationKey(panels) {
     if (idIsFromProps) {
       return id;
     } else {
-      return `${order}:${JSON.stringify(constraints)}`;
+      return order ? `${order}:${JSON.stringify(constraints)}` : JSON.stringify(constraints);
     }
   }).sort((a, b) => a.localeCompare(b)).join(",");
 }
 function loadSerializedPanelGroupState(autoSaveId, storage) {
   try {
-    const serialized = storage.getItem(`PanelGroup:sizes:${autoSaveId}`);
+    const panelGroupKey = getPanelGroupKey(autoSaveId);
+    const serialized = storage.getItem(panelGroupKey);
     if (serialized) {
       const parsed = JSON.parse(serialized);
       if (typeof parsed === "object" && parsed != null) {
@@ -984,21 +989,23 @@ function loadSerializedPanelGroupState(autoSaveId, storage) {
   } catch (error) {}
   return null;
 }
-function loadPanelLayout(autoSaveId, panels, storage) {
-  const state = loadSerializedPanelGroupState(autoSaveId, storage);
-  if (state) {
-    var _state$key;
-    const key = getSerializationKey(panels);
-    return (_state$key = state[key]) !== null && _state$key !== void 0 ? _state$key : null;
-  }
-  return null;
+function loadPanelGroupState(autoSaveId, panels, storage) {
+  var _loadSerializedPanelG, _state$panelKey;
+  const state = (_loadSerializedPanelG = loadSerializedPanelGroupState(autoSaveId, storage)) !== null && _loadSerializedPanelG !== void 0 ? _loadSerializedPanelG : {};
+  const panelKey = getPanelKey(panels);
+  return (_state$panelKey = state[panelKey]) !== null && _state$panelKey !== void 0 ? _state$panelKey : null;
 }
-function savePanelGroupLayout(autoSaveId, panels, sizes, storage) {
-  const key = getSerializationKey(panels);
-  const state = loadSerializedPanelGroupState(autoSaveId, storage) || {};
-  state[key] = sizes;
+function savePanelGroupState(autoSaveId, panels, panelSizesBeforeCollapse, sizes, storage) {
+  var _loadSerializedPanelG2;
+  const panelGroupKey = getPanelGroupKey(autoSaveId);
+  const panelKey = getPanelKey(panels);
+  const state = (_loadSerializedPanelG2 = loadSerializedPanelGroupState(autoSaveId, storage)) !== null && _loadSerializedPanelG2 !== void 0 ? _loadSerializedPanelG2 : {};
+  state[panelKey] = {
+    expandToSizes: Object.fromEntries(panelSizesBeforeCollapse.entries()),
+    layout: sizes
+  };
   try {
-    storage.setItem(`PanelGroup:sizes:${autoSaveId}`, JSON.stringify(state));
+    storage.setItem(panelGroupKey, JSON.stringify(state));
   } catch (error) {
     console.error(error);
   }
@@ -1142,7 +1149,6 @@ function PanelGroupWithForwardedRef({
   const groupId = useUniqueId(idFromProps);
   const [dragState, setDragState] = useState(null);
   const [layout, setLayout] = useState([]);
-  useState([]);
   const panelIdToLastNotifiedSizeMapRef = useRef({});
   const panelSizeBeforeCollapseRef = useRef(new Map());
   const prevDeltaRef = useRef(0);
@@ -1225,13 +1231,15 @@ function PanelGroupWithForwardedRef({
 
       // Limit the frequency of localStorage updates.
       if (debouncedSave == null) {
-        debouncedSave = debounce(savePanelGroupLayout, LOCAL_STORAGE_DEBOUNCE_INTERVAL);
+        debouncedSave = debounce(savePanelGroupState, LOCAL_STORAGE_DEBOUNCE_INTERVAL);
         debounceMap[autoSaveId] = debouncedSave;
       }
 
-      // Clone panel data array before saving since this array is mutated.
-      // If we don't clone, we run the risk of saving the wrong panel and layout pair.
-      debouncedSave(autoSaveId, [...panelDataArray], layout, storage);
+      // Clone mutable data before passing to the debounced function,
+      // else we run the risk of saving an incorrect combination of mutable and immutable values to state.
+      const clonedPanelDataArray = [...panelDataArray];
+      const clonedPanelSizesBeforeCollapse = new Map(panelSizeBeforeCollapseRef.current);
+      debouncedSave(autoSaveId, clonedPanelDataArray, clonedPanelSizesBeforeCollapse, layout, storage);
     }
   }, [autoSaveId, layout, storage]);
 
@@ -1460,7 +1468,11 @@ function PanelGroupWithForwardedRef({
       // default size should be restored from local storage if possible.
       let unsafeLayout = null;
       if (autoSaveId) {
-        unsafeLayout = loadPanelLayout(autoSaveId, panelDataArray, storage);
+        const state = loadPanelGroupState(autoSaveId, panelDataArray, storage);
+        if (state) {
+          panelSizeBeforeCollapseRef.current = new Map(Object.entries(state.expandToSizes));
+          unsafeLayout = state.layout;
+        }
       }
       if (unsafeLayout == null) {
         unsafeLayout = calculateUnsafeDefaultLayout({

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

@@ -937,11 +937,15 @@ function initializeDefaultStorage(storageObject) {
   }
 }
 
+function getPanelGroupKey(autoSaveId) {
+  return `react-resizable-panels:${autoSaveId}`;
+}
+
 // 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 the min/max size attributes should work well enough as a backup.
 // Pre-sorting by minSize allows remembering layouts even if panels are re-ordered/dragged.
-function getSerializationKey(panels) {
+function getPanelKey(panels) {
   return panels.map(panel => {
     const {
       constraints,
@@ -952,13 +956,14 @@ function getSerializationKey(panels) {
     if (idIsFromProps) {
       return id;
     } else {
-      return `${order}:${JSON.stringify(constraints)}`;
+      return order ? `${order}:${JSON.stringify(constraints)}` : JSON.stringify(constraints);
     }
   }).sort((a, b) => a.localeCompare(b)).join(",");
 }
 function loadSerializedPanelGroupState(autoSaveId, storage) {
   try {
-    const serialized = storage.getItem(`PanelGroup:sizes:${autoSaveId}`);
+    const panelGroupKey = getPanelGroupKey(autoSaveId);
+    const serialized = storage.getItem(panelGroupKey);
     if (serialized) {
       const parsed = JSON.parse(serialized);
       if (typeof parsed === "object" && parsed != null) {
@@ -968,21 +973,23 @@ function loadSerializedPanelGroupState(autoSaveId, storage) {
   } catch (error) {}
   return null;
 }
-function loadPanelLayout(autoSaveId, panels, storage) {
-  const state = loadSerializedPanelGroupState(autoSaveId, storage);
-  if (state) {
-    var _state$key;
-    const key = getSerializationKey(panels);
-    return (_state$key = state[key]) !== null && _state$key !== void 0 ? _state$key : null;
-  }
-  return null;
+function loadPanelGroupState(autoSaveId, panels, storage) {
+  var _loadSerializedPanelG, _state$panelKey;
+  const state = (_loadSerializedPanelG = loadSerializedPanelGroupState(autoSaveId, storage)) !== null && _loadSerializedPanelG !== void 0 ? _loadSerializedPanelG : {};
+  const panelKey = getPanelKey(panels);
+  return (_state$panelKey = state[panelKey]) !== null && _state$panelKey !== void 0 ? _state$panelKey : null;
 }
-function savePanelGroupLayout(autoSaveId, panels, sizes, storage) {
-  const key = getSerializationKey(panels);
-  const state = loadSerializedPanelGroupState(autoSaveId, storage) || {};
-  state[key] = sizes;
+function savePanelGroupState(autoSaveId, panels, panelSizesBeforeCollapse, sizes, storage) {
+  var _loadSerializedPanelG2;
+  const panelGroupKey = getPanelGroupKey(autoSaveId);
+  const panelKey = getPanelKey(panels);
+  const state = (_loadSerializedPanelG2 = loadSerializedPanelGroupState(autoSaveId, storage)) !== null && _loadSerializedPanelG2 !== void 0 ? _loadSerializedPanelG2 : {};
+  state[panelKey] = {
+    expandToSizes: Object.fromEntries(panelSizesBeforeCollapse.entries()),
+    layout: sizes
+  };
   try {
-    storage.setItem(`PanelGroup:sizes:${autoSaveId}`, JSON.stringify(state));
+    storage.setItem(panelGroupKey, JSON.stringify(state));
   } catch (error) {
     console.error(error);
   }
@@ -1079,7 +1086,6 @@ function PanelGroupWithForwardedRef({
   const groupId = useUniqueId(idFromProps);
   const [dragState, setDragState] = useState(null);
   const [layout, setLayout] = useState([]);
-  useState([]);
   const panelIdToLastNotifiedSizeMapRef = useRef({});
   const panelSizeBeforeCollapseRef = useRef(new Map());
   const prevDeltaRef = useRef(0);
@@ -1162,13 +1168,15 @@ function PanelGroupWithForwardedRef({
 
       // Limit the frequency of localStorage updates.
       if (debouncedSave == null) {
-        debouncedSave = debounce(savePanelGroupLayout, LOCAL_STORAGE_DEBOUNCE_INTERVAL);
+        debouncedSave = debounce(savePanelGroupState, LOCAL_STORAGE_DEBOUNCE_INTERVAL);
         debounceMap[autoSaveId] = debouncedSave;
       }
 
-      // Clone panel data array before saving since this array is mutated.
-      // If we don't clone, we run the risk of saving the wrong panel and layout pair.
-      debouncedSave(autoSaveId, [...panelDataArray], layout, storage);
+      // Clone mutable data before passing to the debounced function,
+      // else we run the risk of saving an incorrect combination of mutable and immutable values to state.
+      const clonedPanelDataArray = [...panelDataArray];
+      const clonedPanelSizesBeforeCollapse = new Map(panelSizeBeforeCollapseRef.current);
+      debouncedSave(autoSaveId, clonedPanelDataArray, clonedPanelSizesBeforeCollapse, layout, storage);
     }
   }, [autoSaveId, layout, storage]);
 
@@ -1355,7 +1363,11 @@ function PanelGroupWithForwardedRef({
       // default size should be restored from local storage if possible.
       let unsafeLayout = null;
       if (autoSaveId) {
-        unsafeLayout = loadPanelLayout(autoSaveId, panelDataArray, storage);
+        const state = loadPanelGroupState(autoSaveId, panelDataArray, storage);
+        if (state) {
+          panelSizeBeforeCollapseRef.current = new Map(Object.entries(state.expandToSizes));
+          unsafeLayout = state.layout;
+        }
       }
       if (unsafeLayout == null) {
         unsafeLayout = calculateUnsafeDefaultLayout({

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

@@ -963,11 +963,15 @@ function initializeDefaultStorage(storageObject) {
   }
 }
 
+function getPanelGroupKey(autoSaveId) {
+  return `react-resizable-panels:${autoSaveId}`;
+}
+
 // 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 the min/max size attributes should work well enough as a backup.
 // Pre-sorting by minSize allows remembering layouts even if panels are re-ordered/dragged.
-function getSerializationKey(panels) {
+function getPanelKey(panels) {
   return panels.map(panel => {
     const {
       constraints,
@@ -978,13 +982,14 @@ function getSerializationKey(panels) {
     if (idIsFromProps) {
       return id;
     } else {
-      return `${order}:${JSON.stringify(constraints)}`;
+      return order ? `${order}:${JSON.stringify(constraints)}` : JSON.stringify(constraints);
     }
   }).sort((a, b) => a.localeCompare(b)).join(",");
 }
 function loadSerializedPanelGroupState(autoSaveId, storage) {
   try {
-    const serialized = storage.getItem(`PanelGroup:sizes:${autoSaveId}`);
+    const panelGroupKey = getPanelGroupKey(autoSaveId);
+    const serialized = storage.getItem(panelGroupKey);
     if (serialized) {
       const parsed = JSON.parse(serialized);
       if (typeof parsed === "object" && parsed != null) {
@@ -994,21 +999,23 @@ function loadSerializedPanelGroupState(autoSaveId, storage) {
   } catch (error) {}
   return null;
 }
-function loadPanelLayout(autoSaveId, panels, storage) {
-  const state = loadSerializedPanelGroupState(autoSaveId, storage);
-  if (state) {
-    var _state$key;
-    const key = getSerializationKey(panels);
-    return (_state$key = state[key]) !== null && _state$key !== void 0 ? _state$key : null;
-  }
-  return null;
+function loadPanelGroupState(autoSaveId, panels, storage) {
+  var _loadSerializedPanelG, _state$panelKey;
+  const state = (_loadSerializedPanelG = loadSerializedPanelGroupState(autoSaveId, storage)) !== null && _loadSerializedPanelG !== void 0 ? _loadSerializedPanelG : {};
+  const panelKey = getPanelKey(panels);
+  return (_state$panelKey = state[panelKey]) !== null && _state$panelKey !== void 0 ? _state$panelKey : null;
 }
-function savePanelGroupLayout(autoSaveId, panels, sizes, storage) {
-  const key = getSerializationKey(panels);
-  const state = loadSerializedPanelGroupState(autoSaveId, storage) || {};
-  state[key] = sizes;
+function savePanelGroupState(autoSaveId, panels, panelSizesBeforeCollapse, sizes, storage) {
+  var _loadSerializedPanelG2;
+  const panelGroupKey = getPanelGroupKey(autoSaveId);
+  const panelKey = getPanelKey(panels);
+  const state = (_loadSerializedPanelG2 = loadSerializedPanelGroupState(autoSaveId, storage)) !== null && _loadSerializedPanelG2 !== void 0 ? _loadSerializedPanelG2 : {};
+  state[panelKey] = {
+    expandToSizes: Object.fromEntries(panelSizesBeforeCollapse.entries()),
+    layout: sizes
+  };
   try {
-    storage.setItem(`PanelGroup:sizes:${autoSaveId}`, JSON.stringify(state));
+    storage.setItem(panelGroupKey, JSON.stringify(state));
   } catch (error) {
     console.error(error);
   }
@@ -1105,7 +1112,6 @@ function PanelGroupWithForwardedRef({
   const groupId = useUniqueId(idFromProps);
   const [dragState, setDragState] = useState(null);
   const [layout, setLayout] = useState([]);
-  useState([]);
   const panelIdToLastNotifiedSizeMapRef = useRef({});
   const panelSizeBeforeCollapseRef = useRef(new Map());
   const prevDeltaRef = useRef(0);
@@ -1188,13 +1194,15 @@ function PanelGroupWithForwardedRef({
 
       // Limit the frequency of localStorage updates.
       if (debouncedSave == null) {
-        debouncedSave = debounce(savePanelGroupLayout, LOCAL_STORAGE_DEBOUNCE_INTERVAL);
+        debouncedSave = debounce(savePanelGroupState, LOCAL_STORAGE_DEBOUNCE_INTERVAL);
         debounceMap[autoSaveId] = debouncedSave;
       }
 
-      // Clone panel data array before saving since this array is mutated.
-      // If we don't clone, we run the risk of saving the wrong panel and layout pair.
-      debouncedSave(autoSaveId, [...panelDataArray], layout, storage);
+      // Clone mutable data before passing to the debounced function,
+      // else we run the risk of saving an incorrect combination of mutable and immutable values to state.
+      const clonedPanelDataArray = [...panelDataArray];
+      const clonedPanelSizesBeforeCollapse = new Map(panelSizeBeforeCollapseRef.current);
+      debouncedSave(autoSaveId, clonedPanelDataArray, clonedPanelSizesBeforeCollapse, layout, storage);
     }
   }, [autoSaveId, layout, storage]);
 
@@ -1381,7 +1389,11 @@ function PanelGroupWithForwardedRef({
       // default size should be restored from local storage if possible.
       let unsafeLayout = null;
       if (autoSaveId) {
-        unsafeLayout = loadPanelLayout(autoSaveId, panelDataArray, storage);
+        const state = loadPanelGroupState(autoSaveId, panelDataArray, storage);
+        if (state) {
+          panelSizeBeforeCollapseRef.current = new Map(Object.entries(state.expandToSizes));
+          unsafeLayout = state.layout;
+        }
       }
       if (unsafeLayout == null) {
         unsafeLayout = calculateUnsafeDefaultLayout({