react-resizable-panels 1.0.0-rc.3 → 1.0.0-rc.4

package/src/Panel.test.tsx

@@ -253,6 +253,229 @@ describe("PanelGroup", () => {
     expect(element.title).toBe("bar");
   });
 
+  describe("callbacks", () => {
+    describe("onCollapse", () => {
+      it("should be called on mount if a panels initial size is 0", () => {
+        let onCollapseLeft = jest.fn();
+        let onCollapseRight = jest.fn();
+
+        act(() => {
+          root.render(
+            <PanelGroup direction="horizontal">
+              <Panel collapsible defaultSize={0} onCollapse={onCollapseLeft} />
+              <PanelResizeHandle />
+              <Panel collapsible onCollapse={onCollapseRight} />
+            </PanelGroup>
+          );
+        });
+
+        expect(onCollapseLeft).toHaveBeenCalledTimes(1);
+        expect(onCollapseRight).not.toHaveBeenCalled();
+      });
+
+      it("should be called when a panel is collapsed", () => {
+        let onCollapse = jest.fn();
+
+        let panelRef = createRef<ImperativePanelHandle>();
+
+        act(() => {
+          root.render(
+            <PanelGroup direction="horizontal">
+              <Panel collapsible onCollapse={onCollapse} ref={panelRef} />
+              <PanelResizeHandle />
+              <Panel />
+            </PanelGroup>
+          );
+        });
+
+        expect(onCollapse).not.toHaveBeenCalled();
+
+        act(() => {
+          panelRef.current?.collapse();
+        });
+
+        expect(onCollapse).toHaveBeenCalledTimes(1);
+      });
+    });
+
+    describe("onExpand", () => {
+      it("should be called on mount if a collapsible panels initial size is not 0", () => {
+        let onExpandLeft = jest.fn();
+        let onExpandRight = jest.fn();
+
+        act(() => {
+          root.render(
+            <PanelGroup direction="horizontal">
+              <Panel collapsible onExpand={onExpandLeft} />
+              <PanelResizeHandle />
+              <Panel onExpand={onExpandRight} />
+            </PanelGroup>
+          );
+        });
+
+        expect(onExpandLeft).toHaveBeenCalledTimes(1);
+        expect(onExpandRight).not.toHaveBeenCalled();
+      });
+
+      it("should be called when a collapsible panel is expanded", () => {
+        let onExpand = jest.fn();
+
+        let panelRef = createRef<ImperativePanelHandle>();
+
+        act(() => {
+          root.render(
+            <PanelGroup direction="horizontal">
+              <Panel
+                collapsible
+                defaultSize={0}
+                onExpand={onExpand}
+                ref={panelRef}
+              />
+              <PanelResizeHandle />
+              <Panel />
+            </PanelGroup>
+          );
+        });
+
+        expect(onExpand).not.toHaveBeenCalled();
+
+        act(() => {
+          panelRef.current?.resize(25);
+        });
+
+        expect(onExpand).toHaveBeenCalledTimes(1);
+      });
+    });
+
+    describe("onResize", () => {
+      it("should be called on mount", () => {
+        let onResizeLeft = jest.fn();
+        let onResizeMiddle = jest.fn();
+        let onResizeRight = jest.fn();
+
+        act(() => {
+          root.render(
+            <PanelGroup direction="horizontal">
+              <Panel id="left" onResize={onResizeLeft} order={1} />
+              <PanelResizeHandle />
+              <Panel
+                defaultSize={50}
+                id="middle"
+                onResize={onResizeMiddle}
+                order={2}
+              />
+              <PanelResizeHandle />
+              <Panel id="right" onResize={onResizeRight} order={3} />
+            </PanelGroup>
+          );
+        });
+
+        expect(onResizeLeft).toHaveBeenCalledTimes(1);
+        expect(onResizeLeft).toHaveBeenCalledWith(25, undefined);
+        expect(onResizeMiddle).toHaveBeenCalledTimes(1);
+        expect(onResizeMiddle).toHaveBeenCalledWith(50, undefined);
+        expect(onResizeRight).toHaveBeenCalledTimes(1);
+        expect(onResizeRight).toHaveBeenCalledWith(25, undefined);
+      });
+
+      it("should be called when a panel is added or removed from the group", () => {
+        let onResizeLeft = jest.fn();
+        let onResizeMiddle = jest.fn();
+        let onResizeRight = jest.fn();
+
+        act(() => {
+          root.render(
+            <PanelGroup direction="horizontal">
+              <Panel
+                id="middle"
+                key="middle"
+                onResize={onResizeMiddle}
+                order={2}
+              />
+            </PanelGroup>
+          );
+        });
+
+        expect(onResizeLeft).not.toHaveBeenCalled();
+        expect(onResizeMiddle).toHaveBeenCalledWith(100, undefined);
+        expect(onResizeRight).not.toHaveBeenCalled();
+
+        onResizeLeft.mockReset();
+        onResizeMiddle.mockReset();
+        onResizeRight.mockReset();
+
+        act(() => {
+          root.render(
+            <PanelGroup direction="horizontal">
+              <Panel
+                id="left"
+                key="left"
+                maxSize={25}
+                minSize={25}
+                onResize={onResizeLeft}
+                order={1}
+              />
+              <PanelResizeHandle />
+              <Panel
+                id="middle"
+                key="middle"
+                onResize={onResizeMiddle}
+                order={2}
+              />
+              <PanelResizeHandle />
+              <Panel
+                id="right"
+                key="right"
+                maxSize={25}
+                minSize={25}
+                onResize={onResizeRight}
+                order={3}
+              />
+            </PanelGroup>
+          );
+        });
+
+        expect(onResizeLeft).toHaveBeenCalledTimes(1);
+        expect(onResizeLeft).toHaveBeenCalledWith(25, undefined);
+        expect(onResizeMiddle).toHaveBeenCalledTimes(1);
+        expect(onResizeMiddle).toHaveBeenCalledWith(50, 100);
+        expect(onResizeRight).toHaveBeenCalledTimes(1);
+        expect(onResizeRight).toHaveBeenCalledWith(25, undefined);
+
+        onResizeLeft.mockReset();
+        onResizeMiddle.mockReset();
+        onResizeRight.mockReset();
+
+        act(() => {
+          root.render(
+            <PanelGroup direction="horizontal">
+              <Panel
+                id="left"
+                key="left"
+                maxSize={25}
+                minSize={25}
+                onResize={onResizeLeft}
+                order={1}
+              />
+              <PanelResizeHandle />
+              <Panel
+                id="middle"
+                key="middle"
+                onResize={onResizeMiddle}
+                order={2}
+              />
+            </PanelGroup>
+          );
+        });
+
+        expect(onResizeLeft).not.toHaveBeenCalled();
+        expect(onResizeMiddle).toHaveBeenCalledTimes(1);
+        expect(onResizeMiddle).toHaveBeenCalledWith(75, 50);
+        expect(onResizeRight).not.toHaveBeenCalled();
+      });
+    });
+  });
+
   describe("DEV warnings", () => {
     it("should warn about server rendered panels with no default size", () => {
       jest.resetModules();

package/src/PanelGroup.test.tsx

@@ -2,6 +2,7 @@ import { Root, createRoot } from "react-dom/client";
 import { act } from "react-dom/test-utils";
 import {
   ImperativePanelGroupHandle,
+  ImperativePanelHandle,
   Panel,
   PanelGroup,
   PanelResizeHandle,
@@ -130,6 +131,65 @@ describe("PanelGroup", () => {
     expect(element.title).toBe("bar");
   });
 
+  describe("callbacks", () => {
+    describe("onLayout", () => {
+      it("should be called with the initial group layout on mount", () => {
+        let onLayout = jest.fn();
+
+        act(() => {
+          root.render(
+            <PanelGroup direction="horizontal" onLayout={onLayout}>
+              <Panel defaultSize={35} />
+              <PanelResizeHandle />
+              <Panel defaultSize={65} />
+            </PanelGroup>
+          );
+        });
+
+        expect(onLayout).toHaveBeenCalledTimes(1);
+        expect(onLayout).toHaveBeenCalledWith([35, 65]);
+      });
+
+      it("should be called any time the group layout changes", () => {
+        let onLayout = jest.fn();
+        let panelGroupRef = createRef<ImperativePanelGroupHandle>();
+        let panelRef = createRef<ImperativePanelHandle>();
+
+        act(() => {
+          root.render(
+            <PanelGroup
+              direction="horizontal"
+              onLayout={onLayout}
+              ref={panelGroupRef}
+            >
+              <Panel defaultSize={35} ref={panelRef} />
+              <PanelResizeHandle />
+              <Panel defaultSize={65} />
+            </PanelGroup>
+          );
+        });
+
+        onLayout.mockReset();
+
+        act(() => {
+          panelGroupRef.current?.setLayout([25, 75]);
+        });
+
+        expect(onLayout).toHaveBeenCalledTimes(1);
+        expect(onLayout).toHaveBeenCalledWith([25, 75]);
+
+        onLayout.mockReset();
+
+        act(() => {
+          panelRef.current?.resize(50);
+        });
+
+        expect(onLayout).toHaveBeenCalledTimes(1);
+        expect(onLayout).toHaveBeenCalledWith([50, 50]);
+      });
+    });
+  });
+
   describe("DEV warnings", () => {
     it("should warn about unstable layouts without id and order props", () => {
       act(() => {

package/src/PanelGroup.ts

@@ -16,7 +16,6 @@ import { computePanelFlexBoxStyle } from "./utils/computePanelFlexBoxStyle";
 import { resetGlobalCursorStyle, setGlobalCursorStyle } from "./utils/cursor";
 import debounce from "./utils/debounce";
 import { determinePivotIndices } from "./utils/determinePivotIndices";
-import { getPanelElementsForGroup } from "./utils/dom/getPanelElementsForGroup";
 import { getResizeHandleElement } from "./utils/dom/getResizeHandleElement";
 import { isKeyDown, isMouseEvent, isTouchEvent } from "./utils/events";
 import { getResizeEventCursorPosition } from "./utils/getResizeEventCursorPosition";
@@ -103,6 +102,7 @@ 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());
@@ -129,9 +129,11 @@ function PanelGroupWithForwardedRef({
   const eagerValuesRef = useRef<{
     layout: number[];
     panelDataArray: PanelData[];
+    panelDataArrayChanged: boolean;
   }>({
     layout,
     panelDataArray: [],
+    panelDataArrayChanged: false,
   });
 
   const devWarningsRef = useRef<{
@@ -463,26 +465,7 @@ function PanelGroupWithForwardedRef({
   }, []);
 
   const registerPanel = useCallback((panelData: PanelData) => {
-    const {
-      autoSaveId,
-      id: groupId,
-      onLayout,
-      storage,
-    } = committedValuesRef.current;
-    const { layout: prevLayout, panelDataArray } = eagerValuesRef.current;
-
-    // HACK
-    // This appears to be triggered by some React Suspense+Offscreen+StrictMode bug;
-    // see app.replay.io/recording/17b6e11d-4500-4173-b23d-61dfd141fed1
-    const index = findPanelDataIndex(panelDataArray, panelData);
-    if (index >= 0) {
-      if (panelData.idIsFromProps) {
-        console.warn(`Panel with id "${panelData.id}" registered twice`);
-      } else {
-        console.warn(`Panel registered twice`);
-      }
-      return;
-    }
+    const { panelDataArray } = eagerValuesRef.current;
 
     panelDataArray.push(panelData);
     panelDataArray.sort((panelA, panelB) => {
@@ -499,54 +482,57 @@ function PanelGroupWithForwardedRef({
       }
     });
 
-    // Wait until all panels have registered before we try to compute layout;
-    // doing it earlier is both wasteful and may trigger misleading warnings in development mode.
-    const panelElements = getPanelElementsForGroup(groupId);
-    if (panelElements.length !== panelDataArray.length) {
-      return;
-    }
+    eagerValuesRef.current.panelDataArrayChanged = true;
+  }, []);
 
-    // If this panel has been configured to persist sizing information,
-    // default size should be restored from local storage if possible.
-    let unsafeLayout: number[] | null = null;
-    if (autoSaveId) {
-      unsafeLayout = loadPanelLayout(autoSaveId, panelDataArray, storage);
-    }
+  // (Re)calculate group layout whenever panels are registered or unregistered.
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useIsomorphicLayoutEffect(() => {
+    if (eagerValuesRef.current.panelDataArrayChanged) {
+      eagerValuesRef.current.panelDataArrayChanged = false;
 
-    if (unsafeLayout == null) {
-      unsafeLayout = calculateUnsafeDefaultLayout({
-        panelDataArray,
+      const { autoSaveId, onLayout, storage } = committedValuesRef.current;
+      const { layout: prevLayout, panelDataArray } = eagerValuesRef.current;
+
+      // If this panel has been configured to persist sizing information,
+      // default size should be restored from local storage if possible.
+      let unsafeLayout: number[] | null = null;
+      if (autoSaveId) {
+        unsafeLayout = loadPanelLayout(autoSaveId, panelDataArray, storage);
+      }
+
+      if (unsafeLayout == null) {
+        unsafeLayout = calculateUnsafeDefaultLayout({
+          panelDataArray,
+        });
+      }
+
+      // Validate even saved layouts in case something has changed since last render
+      // e.g. for pixel groups, this could be the size of the window
+      const nextLayout = validatePanelGroupLayout({
+        layout: unsafeLayout,
+        panelConstraints: panelDataArray.map(
+          (panelData) => panelData.constraints
+        ),
       });
-    }
 
-    // Validate even saved layouts in case something has changed since last render
-    // e.g. for pixel groups, this could be the size of the window
-    const nextLayout = validatePanelGroupLayout({
-      layout: unsafeLayout,
-      panelConstraints: panelDataArray.map(
-        (panelData) => panelData.constraints
-      ),
-    });
+      if (!areEqual(prevLayout, nextLayout)) {
+        setLayout(nextLayout);
 
-    // Offscreen mode makes this a bit weird;
-    // Panels unregister when hidden and re-register when shown again,
-    // but the overall layout doesn't change between these two cases.
-    setLayout(nextLayout);
+        eagerValuesRef.current.layout = nextLayout;
 
-    eagerValuesRef.current.layout = nextLayout;
+        if (onLayout) {
+          onLayout(nextLayout);
+        }
 
-    if (!areEqual(prevLayout, nextLayout)) {
-      if (onLayout) {
-        onLayout(nextLayout);
+        callPanelCallbacks(
+          panelDataArray,
+          nextLayout,
+          panelIdToLastNotifiedSizeMapRef.current
+        );
       }
-
-      callPanelCallbacks(
-        panelDataArray,
-        nextLayout,
-        panelIdToLastNotifiedSizeMapRef.current
-      );
     }
-  }, []);
+  });
 
   const registerResizeHandle = useCallback((dragHandleId: string) => {
     return function resizeHandler(event: ResizeEvent) {
@@ -723,90 +709,21 @@ function PanelGroupWithForwardedRef({
     setDragState(null);
   }, []);
 
-  const unregisterPanelRef = useRef<{
-    pendingPanelIds: Set<string>;
-    timeout: NodeJS.Timeout | null;
-  }>({
-    pendingPanelIds: new Set(),
-    timeout: null,
-  });
   const unregisterPanel = useCallback((panelData: PanelData) => {
-    const { onLayout } = committedValuesRef.current;
-    const { layout: prevLayout, panelDataArray } = eagerValuesRef.current;
+    const { panelDataArray } = eagerValuesRef.current;
 
     const index = findPanelDataIndex(panelDataArray, panelData);
     if (index >= 0) {
       panelDataArray.splice(index, 1);
-      unregisterPanelRef.current.pendingPanelIds.add(panelData.id);
-    }
-
-    if (unregisterPanelRef.current.timeout != null) {
-      clearTimeout(unregisterPanelRef.current.timeout);
-    }
-
-    // Batch panel unmounts so that we only calculate layout once;
-    // This is more efficient and avoids misleading warnings in development mode.
-    // We can't check the DOM to detect this because Panel elements have not yet been removed.
-    unregisterPanelRef.current.timeout = setTimeout(() => {
-      const { pendingPanelIds } = unregisterPanelRef.current;
-      const panelIdToLastNotifiedSizeMap =
-        panelIdToLastNotifiedSizeMapRef.current;
 
       // TRICKY
-      // Strict effects mode
-      let unmountDueToStrictMode = false;
-      pendingPanelIds.forEach((panelId) => {
-        pendingPanelIds.delete(panelId);
-
-        if (panelDataArray.find(({ id }) => id === panelId) != null) {
-          unmountDueToStrictMode = true;
-        } else {
-          // TRICKY
-          // When a panel is removed from the group, we should delete the most recent prev-size entry for it.
-          // If we don't do this, then a conditionally rendered panel might not call onResize when it's re-mounted.
-          // Strict effects mode makes this tricky though because all panels will be registered, unregistered, then re-registered on mount.
-          delete panelIdToLastNotifiedSizeMap[panelId];
-        }
-      });
-
-      if (unmountDueToStrictMode) {
-        return;
-      }
-
-      if (panelDataArray.length === 0) {
-        // The group is unmounting; skip layout calculation.
-        return;
-      }
-
-      let unsafeLayout: number[] = calculateUnsafeDefaultLayout({
-        panelDataArray,
-      });
+      // When a panel is removed from the group, we should delete the most recent prev-size entry for it.
+      // If we don't do this, then a conditionally rendered panel might not call onResize when it's re-mounted.
+      // Strict effects mode makes this tricky though because all panels will be registered, unregistered, then re-registered on mount.
+      delete panelIdToLastNotifiedSizeMapRef.current[panelData.id];
 
-      // Validate even saved layouts in case something has changed since last render
-      // e.g. for pixel groups, this could be the size of the window
-      const nextLayout = validatePanelGroupLayout({
-        layout: unsafeLayout,
-        panelConstraints: panelDataArray.map(
-          (panelData) => panelData.constraints
-        ),
-      });
-
-      if (!areEqual(prevLayout, nextLayout)) {
-        setLayout(nextLayout);
-
-        eagerValuesRef.current.layout = nextLayout;
-
-        if (onLayout) {
-          onLayout(nextLayout);
-        }
-
-        callPanelCallbacks(
-          panelDataArray,
-          nextLayout,
-          panelIdToLastNotifiedSizeMapRef.current
-        );
-      }
-    }, 0);
+      eagerValuesRef.current.panelDataArrayChanged = true;
+    }
   }, []);
 
   const context = useMemo(

package/src/PanelResizeHandle.test.tsx

@@ -65,4 +65,10 @@ describe("PanelResizeHandle", () => {
     expect(element.getAttribute("data-test-name")).toBe("foo");
     expect(element.title).toBe("bar");
   });
+
+  describe("callbacks", () => {
+    describe("onDragging", () => {
+      // TODO: Test this
+    });
+  });
 });