react-resizable-panels 1.0.2 → 1.0.3

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

@@ -960,11 +960,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,
@@ -981,7 +985,8 @@ function getSerializationKey(panels) {
 }
 function loadSerializedPanelGroupState(autoSaveId, storage) {
   try {
-    const serialized = storage.getItem(`PanelGroup:layout:${autoSaveId}`);
+    const panelGroupKey = getPanelGroupKey(autoSaveId);
+    const serialized = storage.getItem(panelGroupKey);
     if (serialized) {
       const parsed = JSON.parse(serialized);
       if (typeof parsed === "object" && parsed != null) {
@@ -991,21 +996,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:layout:${autoSaveId}`, JSON.stringify(state));
+    storage.setItem(panelGroupKey, JSON.stringify(state));
   } catch (error) {
     console.error(error);
   }
@@ -1149,7 +1156,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);
@@ -1232,13 +1238,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]);
 
@@ -1467,7 +1475,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.development.node.cjs.js

@@ -835,11 +835,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,
@@ -856,7 +860,8 @@ function getSerializationKey(panels) {
 }
 function loadSerializedPanelGroupState(autoSaveId, storage) {
   try {
-    const serialized = storage.getItem(`PanelGroup:layout:${autoSaveId}`);
+    const panelGroupKey = getPanelGroupKey(autoSaveId);
+    const serialized = storage.getItem(panelGroupKey);
     if (serialized) {
       const parsed = JSON.parse(serialized);
       if (typeof parsed === "object" && parsed != null) {
@@ -866,12 +871,17 @@ function loadSerializedPanelGroupState(autoSaveId, storage) {
   } catch (error) {}
   return 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:layout:${autoSaveId}`, JSON.stringify(state));
+    storage.setItem(panelGroupKey, JSON.stringify(state));
   } catch (error) {
     console.error(error);
   }
@@ -1015,7 +1025,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);
@@ -1090,13 +1099,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]);
 

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

@@ -811,11 +811,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,
@@ -832,7 +836,8 @@ function getSerializationKey(panels) {
 }
 function loadSerializedPanelGroupState(autoSaveId, storage) {
   try {
-    const serialized = storage.getItem(`PanelGroup:layout:${autoSaveId}`);
+    const panelGroupKey = getPanelGroupKey(autoSaveId);
+    const serialized = storage.getItem(panelGroupKey);
     if (serialized) {
       const parsed = JSON.parse(serialized);
       if (typeof parsed === "object" && parsed != null) {
@@ -842,12 +847,17 @@ function loadSerializedPanelGroupState(autoSaveId, storage) {
   } catch (error) {}
   return 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:layout:${autoSaveId}`, JSON.stringify(state));
+    storage.setItem(panelGroupKey, JSON.stringify(state));
   } catch (error) {
     console.error(error);
   }
@@ -991,7 +1001,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);
@@ -1066,13 +1075,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]);
 

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

@@ -939,11 +939,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,
@@ -960,7 +964,8 @@ function getSerializationKey(panels) {
 }
 function loadSerializedPanelGroupState(autoSaveId, storage) {
   try {
-    const serialized = storage.getItem(`PanelGroup:layout:${autoSaveId}`);
+    const panelGroupKey = getPanelGroupKey(autoSaveId);
+    const serialized = storage.getItem(panelGroupKey);
     if (serialized) {
       const parsed = JSON.parse(serialized);
       if (typeof parsed === "object" && parsed != null) {
@@ -970,21 +975,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:layout:${autoSaveId}`, JSON.stringify(state));
+    storage.setItem(panelGroupKey, JSON.stringify(state));
   } catch (error) {
     console.error(error);
   }
@@ -1081,7 +1088,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);
@@ -1164,13 +1170,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]);
 
@@ -1357,7 +1365,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.node.cjs.js

@@ -824,11 +824,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,
@@ -845,7 +849,8 @@ function getSerializationKey(panels) {
 }
 function loadSerializedPanelGroupState(autoSaveId, storage) {
   try {
-    const serialized = storage.getItem(`PanelGroup:layout:${autoSaveId}`);
+    const panelGroupKey = getPanelGroupKey(autoSaveId);
+    const serialized = storage.getItem(panelGroupKey);
     if (serialized) {
       const parsed = JSON.parse(serialized);
       if (typeof parsed === "object" && parsed != null) {
@@ -855,12 +860,17 @@ function loadSerializedPanelGroupState(autoSaveId, storage) {
   } catch (error) {}
   return 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:layout:${autoSaveId}`, JSON.stringify(state));
+    storage.setItem(panelGroupKey, JSON.stringify(state));
   } catch (error) {
     console.error(error);
   }
@@ -957,7 +967,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);
@@ -1032,13 +1041,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]);
 

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

@@ -800,11 +800,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,
@@ -821,7 +825,8 @@ function getSerializationKey(panels) {
 }
 function loadSerializedPanelGroupState(autoSaveId, storage) {
   try {
-    const serialized = storage.getItem(`PanelGroup:layout:${autoSaveId}`);
+    const panelGroupKey = getPanelGroupKey(autoSaveId);
+    const serialized = storage.getItem(panelGroupKey);
     if (serialized) {
       const parsed = JSON.parse(serialized);
       if (typeof parsed === "object" && parsed != null) {
@@ -831,12 +836,17 @@ function loadSerializedPanelGroupState(autoSaveId, storage) {
   } catch (error) {}
   return 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:layout:${autoSaveId}`, JSON.stringify(state));
+    storage.setItem(panelGroupKey, JSON.stringify(state));
   } catch (error) {
     console.error(error);
   }
@@ -933,7 +943,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);
@@ -1008,13 +1017,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]);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-resizable-panels",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "React components for resizable panel groups/layouts",
   "author": "Brian Vaughn <brian.david.vaughn@gmail.com>",
   "license": "MIT",

package/src/PanelGroup.ts

@@ -20,7 +20,10 @@ import { getResizeHandleElement } from "./utils/dom/getResizeHandleElement";
 import { isKeyDown, isMouseEvent, isTouchEvent } from "./utils/events";
 import { getResizeEventCursorPosition } from "./utils/getResizeEventCursorPosition";
 import { initializeDefaultStorage } from "./utils/initializeDefaultStorage";
-import { loadPanelLayout, savePanelGroupLayout } from "./utils/serialization";
+import {
+  loadPanelGroupState,
+  savePanelGroupState,
+} from "./utils/serialization";
 import { validatePanelConstraints } from "./utils/validatePanelConstraints";
 import { validatePanelGroupLayout } from "./utils/validatePanelGroupLayout";
 import {
@@ -79,7 +82,7 @@ export type PanelGroupProps = Omit<HTMLAttributes<ElementType>, "id"> &
   }>;
 
 const debounceMap: {
-  [key: string]: typeof savePanelGroupLayout;
+  [key: string]: typeof savePanelGroupState;
 } = {};
 
 function PanelGroupWithForwardedRef({
@@ -102,7 +105,6 @@ function PanelGroupWithForwardedRef({
 
   const [dragState, setDragState] = useState<DragState | null>(null);
   const [layout, setLayout] = useState<number[]>([]);
-  const [panelDataArray, setPanelDataArray] = useState<PanelData[]>([]);
 
   const panelIdToLastNotifiedSizeMapRef = useRef<Record<string, number>>({});
   const panelSizeBeforeCollapseRef = useRef<Map<string, number>>(new Map());
@@ -218,16 +220,26 @@ function PanelGroupWithForwardedRef({
       // Limit the frequency of localStorage updates.
       if (debouncedSave == null) {
         debouncedSave = debounce(
-          savePanelGroupLayout,
+          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]);
 
@@ -500,7 +512,13 @@ function PanelGroupWithForwardedRef({
       // default size should be restored from local storage if possible.
       let unsafeLayout: number[] | null = 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) {