fix: maintain controlled pane sizes on container resize (#868) (#869)

When using controlled mode with pixel sizes, panes were incorrectly
being scaled proportionally when the container/window resized. This
fix checks for controlled size props in handleContainerSizeChange and
uses calculateInitialSizes instead of distributeSizes to maintain
the fixed sizes from props.

- Add hasControlledSizes check in handleContainerSizeChange
- Use calculateInitialSizes for controlled panes on resize
- Keep proportional distribution for uncontrolled panes
- Add tests for container resize behavior
- Extend test setup to support triggering resize events

Fixes #868

Author: tomkp

src/components/SplitPane.test.tsx

@@ -1,13 +1,18 @@
-import { describe, it, expect, vi } from 'vitest';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { render, screen, act } from '@testing-library/react';
 import { SplitPane } from './SplitPane';
 import { Pane } from './Pane';
+import { triggerResize, clearResizeObservers } from '../test/setup';
 
 // These match the mock in test/setup.ts
 const CONTAINER_WIDTH = 1024;
 const CONTAINER_HEIGHT = 768;
 
 describe('SplitPane', () => {
+  beforeEach(() => {
+    clearResizeObservers();
+  });
+
   it('renders children panes', async () => {
     render(
       <SplitPane>
@@ -279,3 +284,117 @@ describe('SplitPane initial size calculation', () => {
     expect(panes[1]).toHaveStyle({ width: '400px' });
   });
 });
+
+describe('SplitPane container resize behavior', () => {
+  beforeEach(() => {
+    clearResizeObservers();
+  });
+
+  it('maintains controlled pixel sizes when container resizes', async () => {
+    const onResize = vi.fn();
+    const sizesAfterResize: number[][] = [];
+
+    // Custom SplitPane wrapper to capture intermediate sizes
+    const CapturingSplitPane = () => {
+      return (
+        <SplitPane
+          direction="horizontal"
+          onResize={(sizes) => {
+            sizesAfterResize.push([...sizes]);
+            onResize(sizes);
+          }}
+        >
+          <Pane size={200}>Pane 1</Pane>
+          <Pane size={400}>Pane 2</Pane>
+        </SplitPane>
+      );
+    };
+
+    const { container } = render(<CapturingSplitPane />);
+
+    await act(async () => {
+      await vi.runAllTimersAsync();
+    });
+
+    const panes = container.querySelectorAll('[data-pane="true"]');
+    expect(panes).toHaveLength(2);
+
+    // Initial sizes should be respected
+    expect(panes[0]).toHaveStyle({ width: '200px' });
+    expect(panes[1]).toHaveStyle({ width: '400px' });
+
+    // Simulate container resize (window resize)
+    act(() => {
+      triggerResize(1200, 768);
+    });
+
+    await act(async () => {
+      await vi.runAllTimersAsync();
+    });
+
+    // After all updates, sizes should be maintained
+    expect(panes[0]).toHaveStyle({ width: '200px' });
+    expect(panes[1]).toHaveStyle({ width: '400px' });
+
+    // onResize should NOT be called for container resize (only for user drag)
+    // If onResize was called, it means distributeSizes was incorrectly applied
+    expect(onResize).not.toHaveBeenCalled();
+  });
+
+  it('distributes uncontrolled panes proportionally on container resize', async () => {
+    const { container } = render(
+      <SplitPane direction="horizontal">
+        <Pane defaultSize={200}>Pane 1</Pane>
+        <Pane>Pane 2</Pane>
+      </SplitPane>
+    );
+
+    await act(async () => {
+      await vi.runAllTimersAsync();
+    });
+
+    const panes = container.querySelectorAll('[data-pane="true"]');
+
+    // Initial: 200px + 824px = 1024px
+    expect(panes[0]).toHaveStyle({ width: '200px' });
+    expect(panes[1]).toHaveStyle({ width: `${CONTAINER_WIDTH - 200}px` });
+
+    // Simulate container resize to 2048px (double)
+    await act(async () => {
+      triggerResize(2048, 768);
+      await vi.runAllTimersAsync();
+    });
+
+    // Uncontrolled panes should scale proportionally
+    expect(panes[0]).toHaveStyle({ width: '400px' });
+    expect(panes[1]).toHaveStyle({ width: `${2048 - 400}px` });
+  });
+
+  it('maintains controlled sizes in vertical direction on container resize', async () => {
+    const { container } = render(
+      <SplitPane direction="vertical">
+        <Pane size={200}>Pane 1</Pane>
+        <Pane size={300}>Pane 2</Pane>
+      </SplitPane>
+    );
+
+    await act(async () => {
+      await vi.runAllTimersAsync();
+    });
+
+    const panes = container.querySelectorAll('[data-pane="true"]');
+
+    expect(panes[0]).toHaveStyle({ height: '200px' });
+    expect(panes[1]).toHaveStyle({ height: '300px' });
+
+    // Simulate container resize
+    await act(async () => {
+      triggerResize(1024, 1000);
+      await vi.runAllTimersAsync();
+    });
+
+    // Controlled sizes should be maintained
+    expect(panes[0]).toHaveStyle({ height: '200px' });
+    expect(panes[1]).toHaveStyle({ height: '300px' });
+  });
+});

src/components/SplitPane.tsx

@@ -176,15 +176,21 @@ export function SplitPane(props: SplitPaneProps) {
     });
   }, [containerSize, paneConfigs, calculateInitialSizes]);
 
-  // Handle container size changes - update sizes proportionally
-  // Using a ref comparison to avoid effect dependency issues
+  // Handle container size changes
+  // For controlled panes: maintain fixed pixel sizes from props
+  // For uncontrolled panes: distribute proportionally
   const handleContainerSizeChange = useCallback(
     (newContainerSize: number) => {
       const prevSize = prevContainerSizeRef.current;
       prevContainerSizeRef.current = newContainerSize;
 
       if (newContainerSize === 0) return;
 
+      // Check if any pane has a controlled size prop
+      const hasControlledSizes = paneConfigs.some(
+        (config) => config.size !== undefined
+      );
+
       setPaneSizes((currentSizes) => {
         // If sizes are uninitialized or pane count changed
         if (
@@ -194,8 +200,13 @@ export function SplitPane(props: SplitPaneProps) {
           return calculateInitialSizes(newContainerSize);
         }
 
-        // If container size changed, distribute proportionally
+        // If container size changed
         if (prevSize > 0 && prevSize !== newContainerSize) {
+          // For controlled panes, recalculate from props to maintain fixed sizes
+          if (hasControlledSizes) {
+            return calculateInitialSizes(newContainerSize);
+          }
+          // For uncontrolled panes, distribute proportionally
           return distributeSizes(currentSizes, newContainerSize);
         }
 
@@ -207,7 +218,7 @@ export function SplitPane(props: SplitPaneProps) {
         return currentSizes;
       });
     },
-    [paneCount, calculateInitialSizes]
+    [paneCount, paneConfigs, calculateInitialSizes]
   );
 
   // Measure container size with ResizeObserver

src/test/setup.ts

@@ -17,6 +17,44 @@ Element.prototype.getBoundingClientRect = vi.fn(() => ({
   toJSON: () => ({}),
 }));
 
+// Store observers to allow triggering resize events in tests
+type ObserverEntry = {
+  callback: ResizeObserverCallback;
+  observer: ResizeObserver;
+  target: Element;
+};
+const resizeObservers: ObserverEntry[] = [];
+
+// Helper to trigger resize on observed elements
+export function triggerResize(width: number, height: number) {
+  resizeObservers.forEach(({ callback, observer, target }) => {
+    const mockEntry = {
+      target,
+      contentRect: {
+        width,
+        height,
+        top: 0,
+        left: 0,
+        bottom: height,
+        right: width,
+        x: 0,
+        y: 0,
+        toJSON: () => ({}),
+      },
+      borderBoxSize: [],
+      contentBoxSize: [],
+      devicePixelContentBoxSize: [],
+    } as unknown as ResizeObserverEntry;
+
+    callback([mockEntry], observer);
+  });
+}
+
+// Clear observers between tests
+export function clearResizeObservers() {
+  resizeObservers.length = 0;
+}
+
 // Mock ResizeObserver with callback support
 (
   globalThis as unknown as {
@@ -30,6 +68,13 @@ Element.prototype.getBoundingClientRect = vi.fn(() => ({
   }
 
   observe(target: Element) {
+    // Store for later triggering
+    resizeObservers.push({
+      callback: this.callback,
+      observer: this,
+      target,
+    });
+
     // Call callback synchronously for predictable testing
     const mockEntry = {
       target,
@@ -58,6 +103,10 @@ Element.prototype.getBoundingClientRect = vi.fn(() => ({
   }
 
   disconnect() {
-    // Mock implementation
+    // Remove from tracked observers
+    const index = resizeObservers.findIndex((o) => o.observer === this);
+    if (index !== -1) {
+      resizeObservers.splice(index, 1);
+    }
   }
 };