react-resizable-panels 0.0.50 → 0.0.52

package/src/PanelGroup.ts

@@ -169,6 +169,8 @@ function PanelGroupWithForwardedRef({
     callbacksRef.current.onLayout = onLayout;
   });
 
+  const panelIdToLastNotifiedSizeMapRef = useRef<Record<string, number>>({});
+
   // 0-1 values representing the relative size of each panel.
   const [sizes, setSizes] = useState<number[]>([]);
 
@@ -199,7 +201,14 @@ function PanelGroupWithForwardedRef({
 
         assert(total === 100, "Panel sizes must add up to 100%");
 
+        const { panels } = committedValuesRef.current;
+        const panelIdToLastNotifiedSizeMap =
+          panelIdToLastNotifiedSizeMapRef.current;
+        const panelsArray = panelsMapToSortedArray(panels);
+
         setSizes(sizes);
+
+        callPanelCallbacks(panelsArray, sizes, panelIdToLastNotifiedSizeMap);
       },
     }),
     []
@@ -223,30 +232,24 @@ function PanelGroupWithForwardedRef({
   // Notify external code when sizes have changed.
   useEffect(() => {
     const { onLayout } = callbacksRef.current!;
-    if (onLayout) {
-      const { sizes } = committedValuesRef.current;
+    const { panels, sizes } = committedValuesRef.current;
 
-      // Don't commit layout until all panels have registered and re-rendered with their actual sizes.
-      if (sizes.length > 0) {
+    // Don't commit layout until all panels have registered and re-rendered with their actual sizes.
+    if (sizes.length > 0) {
+      if (onLayout) {
         onLayout(sizes);
       }
-    }
-  }, [sizes]);
 
-  // Notify Panel listeners about their initial sizes and collapsed state after mount.
-  // Subsequent changes will be called by the resizeHandler.
-  const didNotifyCallbacksAfterMountRef = useRef(false);
-  useIsomorphicLayoutEffect(() => {
-    if (didNotifyCallbacksAfterMountRef.current) {
-      return;
-    }
-
-    const { panels, sizes } = committedValuesRef.current;
-    if (sizes.length > 0) {
-      didNotifyCallbacksAfterMountRef.current = true;
+      const panelIdToLastNotifiedSizeMap =
+        panelIdToLastNotifiedSizeMapRef.current;
 
+      // When possible, we notify before the next render so that rendering work can be batched together.
+      // Some cases are difficult to detect though,
+      // for example– panels that are conditionally rendered can affect the size of neighboring panels.
+      // In this case, the best we can do is notify on commit.
+      // The callPanelCallbacks() uses its own memoization to avoid notifying panels twice in these cases.
       const panelsArray = panelsMapToSortedArray(panels);
-      callPanelCallbacks(panelsArray, [], sizes);
+      callPanelCallbacks(panelsArray, sizes, panelIdToLastNotifiedSizeMap);
     }
   }, [sizes]);
 
@@ -481,10 +484,18 @@ function PanelGroupWithForwardedRef({
         }
 
         if (sizesChanged) {
-          // If resize change handlers have been declared, this is the time to call them.
-          callPanelCallbacks(panelsArray, prevSizes, nextSizes);
+          const panelIdToLastNotifiedSizeMap =
+            panelIdToLastNotifiedSizeMapRef.current;
 
           setSizes(nextSizes);
+
+          // If resize change handlers have been declared, this is the time to call them.
+          // Trigger user callbacks after updating state, so that user code can override the sizes.
+          callPanelCallbacks(
+            panelsArray,
+            nextSizes,
+            panelIdToLastNotifiedSizeMap
+          );
         }
 
         prevDeltaRef.current = delta;
@@ -512,7 +523,12 @@ function PanelGroupWithForwardedRef({
     const { panels, sizes: prevSizes } = committedValuesRef.current;
 
     const panel = panels.get(id);
-    if (panel == null || !panel.current.collapsible) {
+    if (panel == null) {
+      return;
+    }
+
+    const { collapsedSize, collapsible } = panel.current;
+    if (!collapsible) {
       return;
     }
 
@@ -524,7 +540,7 @@ function PanelGroupWithForwardedRef({
     }
 
     const currentSize = prevSizes[index];
-    if (currentSize === 0) {
+    if (currentSize === collapsedSize) {
       // Panel is already collapsed.
       return;
     }
@@ -537,7 +553,7 @@ function PanelGroupWithForwardedRef({
     }
 
     const isLastPanel = index === panelsArray.length - 1;
-    const delta = isLastPanel ? currentSize : 0 - currentSize;
+    const delta = isLastPanel ? currentSize : collapsedSize - currentSize;
 
     const nextSizes = adjustByDelta(
       null,
@@ -550,10 +566,14 @@ function PanelGroupWithForwardedRef({
       null
     );
     if (prevSizes !== nextSizes) {
-      // If resize change handlers have been declared, this is the time to call them.
-      callPanelCallbacks(panelsArray, prevSizes, nextSizes);
+      const panelIdToLastNotifiedSizeMap =
+        panelIdToLastNotifiedSizeMapRef.current;
 
       setSizes(nextSizes);
+
+      // If resize change handlers have been declared, this is the time to call them.
+      // Trigger user callbacks after updating state, so that user code can override the sizes.
+      callPanelCallbacks(panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
     }
   }, []);
 
@@ -565,8 +585,10 @@ function PanelGroupWithForwardedRef({
       return;
     }
 
+    const { collapsedSize, minSize } = panel.current;
+
     const sizeBeforeCollapse =
-      panelSizeBeforeCollapse.current.get(id) || panel.current.minSize;
+      panelSizeBeforeCollapse.current.get(id) || minSize;
     if (!sizeBeforeCollapse) {
       return;
     }
@@ -579,7 +601,7 @@ function PanelGroupWithForwardedRef({
     }
 
     const currentSize = prevSizes[index];
-    if (currentSize !== 0) {
+    if (currentSize !== collapsedSize) {
       // Panel is already expanded.
       return;
     }
@@ -590,7 +612,9 @@ function PanelGroupWithForwardedRef({
     }
 
     const isLastPanel = index === panelsArray.length - 1;
-    const delta = isLastPanel ? 0 - sizeBeforeCollapse : sizeBeforeCollapse;
+    const delta = isLastPanel
+      ? collapsedSize - sizeBeforeCollapse
+      : sizeBeforeCollapse;
 
     const nextSizes = adjustByDelta(
       null,
@@ -603,10 +627,14 @@ function PanelGroupWithForwardedRef({
       null
     );
     if (prevSizes !== nextSizes) {
-      // If resize change handlers have been declared, this is the time to call them.
-      callPanelCallbacks(panelsArray, prevSizes, nextSizes);
+      const panelIdToLastNotifiedSizeMap =
+        panelIdToLastNotifiedSizeMapRef.current;
 
       setSizes(nextSizes);
+
+      // If resize change handlers have been declared, this is the time to call them.
+      // Trigger user callbacks after updating state, so that user code can override the sizes.
+      callPanelCallbacks(panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
     }
   }, []);
 
@@ -618,6 +646,8 @@ function PanelGroupWithForwardedRef({
       return;
     }
 
+    const { collapsedSize, collapsible, maxSize, minSize } = panel.current;
+
     const panelsArray = panelsMapToSortedArray(panels);
 
     const index = panelsArray.indexOf(panel);
@@ -630,13 +660,10 @@ function PanelGroupWithForwardedRef({
       return;
     }
 
-    if (panel.current.collapsible && nextSize === 0) {
+    if (collapsible && nextSize === collapsedSize) {
       // This is a valid resize state.
     } else {
-      nextSize = Math.min(
-        panel.current.maxSize,
-        Math.max(panel.current.minSize, nextSize)
-      );
+      nextSize = Math.min(maxSize, Math.max(minSize, nextSize));
     }
 
     const [idBefore, idAfter] = getBeforeAndAfterIds(id, panelsArray);
@@ -658,10 +685,14 @@ function PanelGroupWithForwardedRef({
       null
     );
     if (prevSizes !== nextSizes) {
-      // If resize change handlers have been declared, this is the time to call them.
-      callPanelCallbacks(panelsArray, prevSizes, nextSizes);
+      const panelIdToLastNotifiedSizeMap =
+        panelIdToLastNotifiedSizeMapRef.current;
 
       setSizes(nextSizes);
+
+      // If resize change handlers have been declared, this is the time to call them.
+      // Trigger user callbacks after updating state, so that user code can override the sizes.
+      callPanelCallbacks(panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
     }
   }, []);
 

package/src/types.ts

@@ -9,7 +9,7 @@ export type PanelGroupStorage = {
 
 export type PanelGroupOnLayout = (sizes: number[]) => void;
 export type PanelOnCollapse = (collapsed: boolean) => void;
-export type PanelOnResize = (size: number) => void;
+export type PanelOnResize = (size: number, prevSize: number) => void;
 export type PanelResizeHandleOnDragging = (isDragging: boolean) => void;
 
 export type PanelCallbackRef = RefObject<{
@@ -20,6 +20,7 @@ export type PanelCallbackRef = RefObject<{
 export type PanelData = {
   current: {
     callbacksRef: PanelCallbackRef;
+    collapsedSize: number;
     collapsible: boolean;
     defaultSize: number | null;
     id: string;

package/src/utils/group.ts

@@ -119,25 +119,33 @@ export function adjustByDelta(
 
 export function callPanelCallbacks(
   panelsArray: PanelData[],
-  prevSizes: number[],
-  nextSizes: number[]
+  sizes: number[],
+  panelIdToLastNotifiedSizeMap: Record<string, number>
 ) {
-  nextSizes.forEach((nextSize, index) => {
-    const prevSize = prevSizes[index];
-    if (prevSize !== nextSize) {
-      const { callbacksRef, collapsible } = panelsArray[index].current;
+  sizes.forEach((size, index) => {
+    const { callbacksRef, collapsedSize, collapsible, id } =
+      panelsArray[index].current;
+
+    const lastNotifiedSize = panelIdToLastNotifiedSizeMap[id];
+    if (lastNotifiedSize !== size) {
+      panelIdToLastNotifiedSizeMap[id] = size;
+
       const { onCollapse, onResize } = callbacksRef.current!;
 
       if (onResize) {
-        onResize(nextSize);
+        onResize(size, lastNotifiedSize);
       }
 
       if (collapsible && onCollapse) {
-        // Falsy check handles both previous size of 0
-        // and initial size of undefined (when mounting)
-        if (!prevSize && nextSize !== 0) {
+        if (
+          (lastNotifiedSize == null || lastNotifiedSize === collapsedSize) &&
+          size !== collapsedSize
+        ) {
           onCollapse(false);
-        } else if (prevSize !== 0 && nextSize === 0) {
+        } else if (
+          lastNotifiedSize !== collapsedSize &&
+          size === collapsedSize
+        ) {
           onCollapse(true);
         }
       }
@@ -274,11 +282,13 @@ function safeResizePanel(
 ): number {
   const nextSizeUnsafe = prevSize + delta;
 
-  if (panel.current.collapsible) {
-    if (prevSize > 0) {
+  const { collapsedSize, collapsible, maxSize, minSize } = panel.current;
+
+  if (collapsible) {
+    if (prevSize > collapsedSize) {
       // Mimic VS COde behavior; collapse a panel if it's smaller than half of its min-size
-      if (nextSizeUnsafe <= panel.current.minSize / 2) {
-        return 0;
+      if (nextSizeUnsafe <= minSize / 2 + collapsedSize) {
+        return collapsedSize;
       }
     } else {
       const isKeyboardEvent = event?.type?.startsWith("key");
@@ -286,17 +296,14 @@ function safeResizePanel(
         // 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.current.minSize) {
-          return 0;
+        if (nextSizeUnsafe < minSize) {
+          return collapsedSize;
         }
       }
     }
   }
 
-  const nextSize = Math.min(
-    panel.current.maxSize,
-    Math.max(panel.current.minSize, nextSizeUnsafe)
-  );
+  const nextSize = Math.min(maxSize, Math.max(minSize, nextSizeUnsafe));
 
   return nextSize;
 }