react-resizable-panels 0.0.30 → 0.0.31

package/src/PanelGroup.ts

@@ -105,6 +105,7 @@ export function PanelGroup({
     panels,
     setSizes,
     sizes,
+    panelSizeBeforeCollapse,
   });
 
   // Notify external code when sizes have changed.
@@ -288,7 +289,8 @@ export function PanelGroup({
           idBefore,
           idAfter,
           delta,
-          prevSizes
+          prevSizes,
+          panelSizeBeforeCollapse.current
         );
         if (prevSizes === nextSizes) {
           // If the pointer has moved too far to resize the panel any further,
@@ -368,7 +370,8 @@ export function PanelGroup({
       idBefore,
       idAfter,
       delta,
-      prevSizes
+      prevSizes,
+      panelSizeBeforeCollapse.current
     );
     if (prevSizes !== nextSizes) {
       // If resize change handlers have been declared, this is the time to call them.
@@ -418,7 +421,8 @@ export function PanelGroup({
       idBefore,
       idAfter,
       delta,
-      prevSizes
+      prevSizes,
+      panelSizeBeforeCollapse.current
     );
     if (prevSizes !== nextSizes) {
       // If resize change handlers have been declared, this is the time to call them.
@@ -461,7 +465,8 @@ export function PanelGroup({
       idBefore,
       idAfter,
       delta,
-      prevSizes
+      prevSizes,
+      panelSizeBeforeCollapse.current
     );
     if (prevSizes !== nextSizes) {
       // If resize change handlers have been declared, this is the time to call them.

package/src/hooks/useWindowSplitterBehavior.ts

@@ -24,12 +24,14 @@ export function useWindowSplitterPanelGroupBehavior({
   panels,
   setSizes,
   sizes,
+  panelSizeBeforeCollapse,
 }: {
   committedValuesRef: RefObject<CommittedValues>;
   groupId: string;
   panels: PanelDataMap;
   setSizes: (sizes: number[]) => void;
   sizes: number[];
+  panelSizeBeforeCollapse: RefObject<Map<string, number>>;
 }): void {
   useEffect(() => {
     const { direction, panels } = committedValuesRef.current;
@@ -104,7 +106,8 @@ export function useWindowSplitterPanelGroupBehavior({
                   idBefore,
                   idAfter,
                   delta,
-                  sizes
+                  sizes,
+                  panelSizeBeforeCollapse.current
                 );
                 if (sizes !== nextSizes) {
                   setSizes(nextSizes);

package/src/utils/group.ts

@@ -6,7 +6,8 @@ export function adjustByDelta(
   idBefore: string,
   idAfter: string,
   delta: number,
-  prevSizes: number[]
+  prevSizes: number[],
+  panelSizeBeforeCollapse: Map<string, number>
 ): number[] {
   if (delta === 0) {
     return prevSizes;
@@ -37,6 +38,10 @@ export function adjustByDelta(
     if (prevSize === nextSize) {
       return prevSizes;
     } else {
+      if (nextSize === 0 && prevSize > 0) {
+        panelSizeBeforeCollapse.set(pivotId, prevSize);
+      }
+
       delta = delta < 0 ? prevSize - nextSize : nextSize - prevSize;
     }
   }
@@ -49,6 +54,10 @@ export function adjustByDelta(
 
     const nextSize = safeResizePanel(panel, 0 - Math.abs(delta), prevSize);
     if (prevSize !== nextSize) {
+      if (nextSize === 0 && prevSize > 0) {
+        panelSizeBeforeCollapse.set(panel.id, prevSize);
+      }
+
       deltaApplied += prevSize - nextSize;
 
       nextSizes[index] = nextSize;
@@ -182,7 +191,7 @@ export function getResizeHandleIndex(id: string): number | null {
   const index = handles.findIndex(
     (handle) => handle.getAttribute("data-panel-resize-handle-id") === id
   );
-  return index ?? null;
+  return index || null;
 }
 
 export function getResizeHandles(): HTMLDivElement[] {
@@ -206,8 +215,8 @@ export function getResizeHandlePanelIds(
   const handles = getResizeHandlesForGroup(groupId);
   const index = handles.indexOf(handle);
 
-  const idBefore: string | null = panelsArray[index]?.id ?? null;
-  const idAfter: string | null = panelsArray[index + 1]?.id ?? null;
+  const idBefore: string | null = panelsArray[index]?.id || null;
+  const idAfter: string | null = panelsArray[index + 1]?.id || null;
 
   return [idBefore, idAfter];
 }

package/src/utils/serialization.ts

@@ -39,7 +39,7 @@ export function loadPanelLayout(
   const state = loadSerializedPanelGroupState(autoSaveId);
   if (state) {
     const key = getSerializationKey(panels);
-    return state[key] ?? null;
+    return state[key] || null;
   }
 
   return null;