react-resizable-panels 1.0.2 → 1.0.4

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]);
 
@@ -1140,7 +1151,7 @@ function PanelGroupWithForwardedRef({
       panelDataArray
     } = eagerValuesRef.current;
     const {
-      collapsedSize,
+      collapsedSize = 0,
       collapsible,
       panelSize
     } = panelDataHelper(panelDataArray, panelData, layout);

package/package.json

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

package/src/Panel.test.tsx

@@ -89,13 +89,19 @@ describe("PanelGroup", () => {
         assert(mostRecentLayout);
 
         verifyExpandedPanelGroupLayout(mostRecentLayout, [50, 50]);
+        expect(leftPanelRef.current?.isCollapsed()).toBe(false);
+        expect(rightPanelRef.current?.isCollapsed()).toBe(false);
         act(() => {
           leftPanelRef.current?.collapse();
         });
+        expect(leftPanelRef.current?.isCollapsed()).toBe(true);
+        expect(rightPanelRef.current?.isCollapsed()).toBe(false);
         verifyExpandedPanelGroupLayout(mostRecentLayout, [0, 100]);
         act(() => {
           leftPanelRef.current?.expand();
         });
+        expect(leftPanelRef.current?.isCollapsed()).toBe(false);
+        expect(rightPanelRef.current?.isCollapsed()).toBe(false);
         verifyExpandedPanelGroupLayout(mostRecentLayout, [50, 50]);
       });
 
@@ -103,14 +109,20 @@ describe("PanelGroup", () => {
         assert(mostRecentLayout);
 
         verifyExpandedPanelGroupLayout(mostRecentLayout, [50, 50]);
+        expect(leftPanelRef.current?.isCollapsed()).toBe(false);
+        expect(rightPanelRef.current?.isCollapsed()).toBe(false);
         act(() => {
           rightPanelRef.current?.collapse();
         });
         verifyExpandedPanelGroupLayout(mostRecentLayout, [100, 0]);
+        expect(leftPanelRef.current?.isCollapsed()).toBe(false);
+        expect(rightPanelRef.current?.isCollapsed()).toBe(true);
         act(() => {
           rightPanelRef.current?.expand();
         });
         verifyExpandedPanelGroupLayout(mostRecentLayout, [50, 50]);
+        expect(leftPanelRef.current?.isCollapsed()).toBe(false);
+        expect(rightPanelRef.current?.isCollapsed()).toBe(false);
       });
 
       it("should re-expand to the most recent size before collapsing", () => {

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]);
 
@@ -442,11 +454,11 @@ function PanelGroupWithForwardedRef({
   const isPanelCollapsed = useCallback((panelData: PanelData) => {
     const { layout, panelDataArray } = eagerValuesRef.current;
 
-    const { collapsedSize, collapsible, panelSize } = panelDataHelper(
-      panelDataArray,
-      panelData,
-      layout
-    );
+    const {
+      collapsedSize = 0,
+      collapsible,
+      panelSize,
+    } = panelDataHelper(panelDataArray, panelData, layout);
 
     return collapsible === true && panelSize === collapsedSize;
   }, []);
@@ -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) {

package/src/utils/serialization.ts

@@ -1,13 +1,26 @@
 import { PanelData } from "../Panel";
 import { PanelGroupStorage } from "../PanelGroup";
 
-type SerializedPanelGroupState = { [panelIds: string]: number[] };
+export type PanelConfigurationState = {
+  expandToSizes: {
+    [panelId: string]: number;
+  };
+  layout: number[];
+};
+
+export type SerializedPanelGroupState = {
+  [panelIds: string]: PanelConfigurationState;
+};
+
+function getPanelGroupKey(autoSaveId: string): string {
+  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: PanelData[]): string {
+function getPanelKey(panels: PanelData[]): string {
   return panels
     .map((panel) => {
       const { constraints, id, idIsFromProps, order } = panel;
@@ -28,11 +41,12 @@ function loadSerializedPanelGroupState(
   storage: PanelGroupStorage
 ): SerializedPanelGroupState | null {
   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) {
-        return parsed;
+        return parsed as SerializedPanelGroupState;
       }
     }
   } catch (error) {}
@@ -40,32 +54,33 @@ function loadSerializedPanelGroupState(
   return null;
 }
 
-export function loadPanelLayout(
+export function loadPanelGroupState(
   autoSaveId: string,
   panels: PanelData[],
   storage: PanelGroupStorage
-): number[] | null {
-  const state = loadSerializedPanelGroupState(autoSaveId, storage);
-  if (state) {
-    const key = getSerializationKey(panels);
-    return state[key] ?? null;
-  }
-
-  return null;
+): PanelConfigurationState | null {
+  const state = loadSerializedPanelGroupState(autoSaveId, storage) ?? {};
+  const panelKey = getPanelKey(panels);
+  return state[panelKey] ?? null;
 }
 
-export function savePanelGroupLayout(
+export function savePanelGroupState(
   autoSaveId: string,
   panels: PanelData[],
+  panelSizesBeforeCollapse: Map<string, number>,
   sizes: number[],
   storage: PanelGroupStorage
 ): void {
-  const key = getSerializationKey(panels);
-  const state = loadSerializedPanelGroupState(autoSaveId, storage) || {};
-  state[key] = sizes;
+  const panelGroupKey = getPanelGroupKey(autoSaveId);
+  const panelKey = getPanelKey(panels);
+  const state = loadSerializedPanelGroupState(autoSaveId, storage) ?? {};
+  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);
   }