react-resizable-panels 0.0.59 → 0.0.61

package/src/PanelGroup.ts

@@ -18,6 +18,7 @@ import { resetGlobalCursorStyle, setGlobalCursorStyle } from "./utils/cursor";
 import debounce from "./utils/debounce";
 import { determinePivotIndices } from "./utils/determinePivotIndices";
 import { calculateAvailablePanelSizeInPixels } from "./utils/dom/calculateAvailablePanelSizeInPixels";
+import { getPanelElementsForGroup } from "./utils/dom/getPanelElementsForGroup";
 import { getPanelGroupElement } from "./utils/dom/getPanelGroupElement";
 import { getResizeHandleElement } from "./utils/dom/getResizeHandleElement";
 import { isKeyDown, isMouseEvent, isTouchEvent } from "./utils/events";
@@ -70,7 +71,7 @@ const defaultStorage: PanelGroupStorage = {
 };
 
 export type PanelGroupProps = PropsWithChildren<{
-  autoSaveId?: string;
+  autoSaveId?: string | null;
   className?: string;
   dataAttributes?: DataAttributes;
   direction: Direction;
@@ -83,18 +84,12 @@ export type PanelGroupProps = PropsWithChildren<{
   tagName?: ElementType;
 }>;
 
-type ImperativeApiQueue = {
-  type: "collapse" | "expand" | "resize";
-  mixedSizes?: Partial<MixedSizes>;
-  panelData: PanelData;
-};
-
 const debounceMap: {
   [key: string]: typeof savePanelGroupLayout;
 } = {};
 
 function PanelGroupWithForwardedRef({
-  autoSaveId,
+  autoSaveId = null,
   children,
   className: classNameFromProps = "",
   dataAttributes,
@@ -114,7 +109,6 @@ function PanelGroupWithForwardedRef({
 
   const [dragState, setDragState] = useState<DragState | null>(null);
   const [layout, setLayout] = useState<number[]>([]);
-  const [panelDataArray, setPanelDataArray] = useState<PanelData[]>([]);
 
   const panelIdToLastNotifiedMixedSizesMapRef = useRef<
     Record<string, MixedSizes>
@@ -122,28 +116,32 @@ function PanelGroupWithForwardedRef({
   const panelSizeBeforeCollapseRef = useRef<Map<string, number>>(new Map());
   const prevDeltaRef = useRef<number>(0);
 
-  const [imperativeApiQueue, setImperativeApiQueue] = useState<
-    ImperativeApiQueue[]
-  >([]);
-
   const committedValuesRef = useRef<{
+    autoSaveId: string | null;
     direction: Direction;
     dragState: DragState | null;
     id: string;
     keyboardResizeByPercentage: number | null;
     keyboardResizeByPixels: number | null;
-    layout: number[];
     onLayout: PanelGroupOnLayout | null;
-    panelDataArray: PanelData[];
+    storage: PanelGroupStorage;
   }>({
+    autoSaveId,
     direction,
     dragState,
     id: groupId,
     keyboardResizeByPercentage,
     keyboardResizeByPixels,
-    layout,
     onLayout,
-    panelDataArray,
+    storage,
+  });
+
+  const eagerValuesRef = useRef<{
+    layout: number[];
+    panelDataArray: PanelData[];
+  }>({
+    layout,
+    panelDataArray: [],
   });
 
   const devWarningsRef = useRef<{
@@ -161,7 +159,8 @@ function PanelGroupWithForwardedRef({
     () => ({
       getId: () => committedValuesRef.current.id,
       getLayout: () => {
-        const { id: groupId, layout } = committedValuesRef.current;
+        const { id: groupId } = committedValuesRef.current;
+        const { layout } = eagerValuesRef.current;
 
         const groupSizePixels = calculateAvailablePanelSizeInPixels(groupId);
 
@@ -176,12 +175,8 @@ function PanelGroupWithForwardedRef({
         });
       },
       setLayout: (mixedSizes: Partial<MixedSizes>[]) => {
-        const {
-          id: groupId,
-          layout: prevLayout,
-          onLayout,
-          panelDataArray,
-        } = committedValuesRef.current;
+        const { id: groupId, onLayout } = committedValuesRef.current;
+        const { layout: prevLayout, panelDataArray } = eagerValuesRef.current;
 
         const groupSizePixels = calculateAvailablePanelSizeInPixels(groupId);
 
@@ -201,6 +196,8 @@ function PanelGroupWithForwardedRef({
         if (!areEqual(prevLayout, safeLayout)) {
           setLayout(safeLayout);
 
+          eagerValuesRef.current.layout = safeLayout;
+
           if (onLayout) {
             onLayout(
               safeLayout.map((sizePercentage) => ({
@@ -226,23 +223,29 @@ function PanelGroupWithForwardedRef({
   );
 
   useIsomorphicLayoutEffect(() => {
+    committedValuesRef.current.autoSaveId = autoSaveId;
     committedValuesRef.current.direction = direction;
     committedValuesRef.current.dragState = dragState;
     committedValuesRef.current.id = groupId;
-    committedValuesRef.current.layout = layout;
     committedValuesRef.current.onLayout = onLayout;
-    committedValuesRef.current.panelDataArray = panelDataArray;
+    committedValuesRef.current.storage = storage;
+
+    // panelDataArray and layout are updated in-sync with scheduled state updates.
+    // TODO [217] Move these values into a separate ref
   });
 
   useWindowSplitterPanelGroupBehavior({
     committedValuesRef,
+    eagerValuesRef,
     groupId,
     layout,
-    panelDataArray,
+    panelDataArray: eagerValuesRef.current.panelDataArray,
     setLayout,
   });
 
   useEffect(() => {
+    const { panelDataArray } = eagerValuesRef.current;
+
     // If this panel has been configured to persist sizing information, save sizes to local storage.
     if (autoSaveId) {
       if (layout.length === 0 || layout.length !== panelDataArray.length) {
@@ -258,79 +261,11 @@ function PanelGroupWithForwardedRef({
       }
       debounceMap[autoSaveId](autoSaveId, panelDataArray, layout, storage);
     }
-  }, [autoSaveId, layout, panelDataArray, storage]);
+  }, [autoSaveId, layout, storage]);
 
-  // Once all panels have registered themselves,
-  // Compute the initial sizes based on default weights.
-  // This assumes that panels register during initial mount (no conditional rendering)!
   useIsomorphicLayoutEffect(() => {
-    const { id: groupId, layout, onLayout } = committedValuesRef.current;
-    if (layout.length === panelDataArray.length) {
-      // Only compute (or restore) default layout once per panel configuration.
-      return;
-    }
+    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);
-    }
-
-    const groupSizePixels = calculateAvailablePanelSizeInPixels(groupId);
-    if (groupSizePixels <= 0) {
-      if (
-        shouldMonitorPixelBasedConstraints(
-          panelDataArray.map(({ constraints }) => constraints)
-        )
-      ) {
-        // Wait until the group has rendered a non-zero size before computing layout.
-        return;
-      }
-    }
-
-    if (unsafeLayout == null) {
-      unsafeLayout = calculateUnsafeDefaultLayout({
-        groupSizePixels,
-        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 validatedLayout = validatePanelGroupLayout({
-      groupSizePixels,
-      layout: unsafeLayout,
-      panelConstraints: panelDataArray.map(
-        (panelData) => panelData.constraints
-      ),
-    });
-
-    if (!areEqual(layout, validatedLayout)) {
-      setLayout(validatedLayout);
-    }
-
-    if (onLayout) {
-      onLayout(
-        validatedLayout.map((sizePercentage) => ({
-          sizePercentage,
-          sizePixels: convertPercentageToPixels(
-            sizePercentage,
-            groupSizePixels
-          ),
-        }))
-      );
-    }
-
-    callPanelCallbacks(
-      groupId,
-      panelDataArray,
-      validatedLayout,
-      panelIdToLastNotifiedMixedSizesMapRef.current
-    );
-  }, [autoSaveId, layout, panelDataArray, storage]);
-
-  useIsomorphicLayoutEffect(() => {
     const constraints = panelDataArray.map(({ constraints }) => constraints);
     if (!shouldMonitorPixelBasedConstraints(constraints)) {
       // Avoid the overhead of ResizeObserver if no pixel constraints require monitoring
@@ -345,7 +280,7 @@ function PanelGroupWithForwardedRef({
       const resizeObserver = new ResizeObserver(() => {
         const groupSizePixels = calculateAvailablePanelSizeInPixels(groupId);
 
-        const { layout: prevLayout, onLayout } = committedValuesRef.current;
+        const { onLayout } = committedValuesRef.current;
 
         const nextLayout = validatePanelGroupLayout({
           groupSizePixels,
@@ -358,6 +293,8 @@ function PanelGroupWithForwardedRef({
         if (!areEqual(prevLayout, nextLayout)) {
           setLayout(nextLayout);
 
+          eagerValuesRef.current.layout = nextLayout;
+
           if (onLayout) {
             onLayout(
               nextLayout.map((sizePercentage) => ({
@@ -385,11 +322,13 @@ function PanelGroupWithForwardedRef({
         resizeObserver.disconnect();
       };
     }
-  }, [groupId, panelDataArray]);
+  }, [groupId]);
 
   // DEV warnings
   useEffect(() => {
     if (isDevelopment) {
+      const { panelDataArray } = eagerValuesRef.current;
+
       const {
         didLogIdAndOrderWarning,
         didLogPanelConstraintsWarning,
@@ -397,8 +336,6 @@ function PanelGroupWithForwardedRef({
       } = devWarningsRef.current;
 
       if (!didLogIdAndOrderWarning) {
-        const { panelDataArray } = committedValuesRef.current;
-
         const panelIds = panelDataArray.map(({ id }) => id);
 
         devWarningsRef.current.prevPanelIds = panelIds;
@@ -452,23 +389,8 @@ function PanelGroupWithForwardedRef({
   // External APIs are safe to memoize via committed values ref
   const collapsePanel = useCallback(
     (panelData: PanelData) => {
-      const {
-        layout: prevLayout,
-        onLayout,
-        panelDataArray,
-      } = committedValuesRef.current;
-
-      // See issues/211
-      if (panelDataArray.find(({ id }) => id === panelData.id) == null) {
-        setImperativeApiQueue((prev) => [
-          ...prev,
-          {
-            panelData,
-            type: "collapse",
-          },
-        ]);
-        return;
-      }
+      const { onLayout } = committedValuesRef.current;
+      const { layout: prevLayout, panelDataArray } = eagerValuesRef.current;
 
       if (panelData.constraints.collapsible) {
         const panelConstraintsArray = panelDataArray.map(
@@ -508,6 +430,8 @@ function PanelGroupWithForwardedRef({
           if (!compareLayouts(prevLayout, nextLayout)) {
             setLayout(nextLayout);
 
+            eagerValuesRef.current.layout = nextLayout;
+
             if (onLayout) {
               onLayout(
                 nextLayout.map((sizePercentage) => ({
@@ -536,23 +460,8 @@ function PanelGroupWithForwardedRef({
   // External APIs are safe to memoize via committed values ref
   const expandPanel = useCallback(
     (panelData: PanelData) => {
-      const {
-        layout: prevLayout,
-        onLayout,
-        panelDataArray,
-      } = committedValuesRef.current;
-
-      // See issues/211
-      if (panelDataArray.find(({ id }) => id === panelData.id) == null) {
-        setImperativeApiQueue((prev) => [
-          ...prev,
-          {
-            panelData,
-            type: "expand",
-          },
-        ]);
-        return;
-      }
+      const { onLayout } = committedValuesRef.current;
+      const { layout: prevLayout, panelDataArray } = eagerValuesRef.current;
 
       if (panelData.constraints.collapsible) {
         const panelConstraintsArray = panelDataArray.map(
@@ -595,6 +504,8 @@ function PanelGroupWithForwardedRef({
           if (!compareLayouts(prevLayout, nextLayout)) {
             setLayout(nextLayout);
 
+            eagerValuesRef.current.layout = nextLayout;
+
             if (onLayout) {
               onLayout(
                 nextLayout.map((sizePercentage) => ({
@@ -623,7 +534,7 @@ function PanelGroupWithForwardedRef({
   // External APIs are safe to memoize via committed values ref
   const getPanelSize = useCallback(
     (panelData: PanelData) => {
-      const { layout, panelDataArray } = committedValuesRef.current;
+      const { layout, panelDataArray } = eagerValuesRef.current;
 
       const { panelSizePercentage, panelSizePixels } = panelDataHelper(
         groupId,
@@ -643,6 +554,8 @@ function PanelGroupWithForwardedRef({
   // This API should never read from committedValuesRef
   const getPanelStyle = useCallback(
     (panelData: PanelData) => {
+      const { panelDataArray } = eagerValuesRef.current;
+
       const panelIndex = panelDataArray.indexOf(panelData);
 
       return computePanelFlexBoxStyle({
@@ -652,13 +565,13 @@ function PanelGroupWithForwardedRef({
         panelIndex,
       });
     },
-    [dragState, layout, panelDataArray]
+    [dragState, layout]
   );
 
   // External APIs are safe to memoize via committed values ref
   const isPanelCollapsed = useCallback(
     (panelData: PanelData) => {
-      const { layout, panelDataArray } = committedValuesRef.current;
+      const { layout, panelDataArray } = eagerValuesRef.current;
 
       const { collapsedSizePercentage, collapsible, panelSizePercentage } =
         panelDataHelper(groupId, panelDataArray, panelData, layout);
@@ -673,7 +586,7 @@ function PanelGroupWithForwardedRef({
   // External APIs are safe to memoize via committed values ref
   const isPanelExpanded = useCallback(
     (panelData: PanelData) => {
-      const { layout, panelDataArray } = committedValuesRef.current;
+      const { layout, panelDataArray } = eagerValuesRef.current;
 
       const { collapsedSizePercentage, collapsible, panelSizePercentage } =
         panelDataHelper(groupId, panelDataArray, panelData, layout);
@@ -684,22 +597,99 @@ function PanelGroupWithForwardedRef({
   );
 
   const registerPanel = useCallback((panelData: PanelData) => {
-    setPanelDataArray((prevPanelDataArray) => {
-      const nextPanelDataArray = [...prevPanelDataArray, panelData];
-      return nextPanelDataArray.sort((panelA, panelB) => {
-        const orderA = panelA.order;
-        const orderB = panelB.order;
-        if (orderA == null && orderB == null) {
-          return 0;
-        } else if (orderA == null) {
-          return -1;
-        } else if (orderB == null) {
-          return 1;
-        } else {
-          return orderA - orderB;
-        }
+    const {
+      autoSaveId,
+      id: groupId,
+      onLayout,
+      storage,
+    } = committedValuesRef.current;
+    const { layout: prevLayout, panelDataArray } = eagerValuesRef.current;
+
+    panelDataArray.push(panelData);
+    panelDataArray.sort((panelA, panelB) => {
+      const orderA = panelA.order;
+      const orderB = panelB.order;
+      if (orderA == null && orderB == null) {
+        return 0;
+      } else if (orderA == null) {
+        return -1;
+      } else if (orderB == null) {
+        return 1;
+      } else {
+        return orderA - orderB;
+      }
+    });
+
+    // 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;
+    }
+
+    // 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);
+    }
+
+    const groupSizePixels = calculateAvailablePanelSizeInPixels(groupId);
+    if (groupSizePixels <= 0) {
+      if (
+        shouldMonitorPixelBasedConstraints(
+          panelDataArray.map(({ constraints }) => constraints)
+        )
+      ) {
+        // Wait until the group has rendered a non-zero size before computing layout.
+        return;
+      }
+    }
+
+    if (unsafeLayout == null) {
+      unsafeLayout = calculateUnsafeDefaultLayout({
+        groupSizePixels,
+        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({
+      groupSizePixels,
+      layout: unsafeLayout,
+      panelConstraints: panelDataArray.map(
+        (panelData) => panelData.constraints
+      ),
     });
+
+    // 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;
+
+    if (!areEqual(prevLayout, nextLayout)) {
+      if (onLayout) {
+        onLayout(
+          nextLayout.map((sizePercentage) => ({
+            sizePercentage,
+            sizePixels: convertPercentageToPixels(
+              sizePercentage,
+              groupSizePixels
+            ),
+          }))
+        );
+      }
+
+      callPanelCallbacks(
+        groupId,
+        panelDataArray,
+        nextLayout,
+        panelIdToLastNotifiedMixedSizesMapRef.current
+      );
+    }
   }, []);
 
   const registerResizeHandle = useCallback((dragHandleId: string) => {
@@ -713,9 +703,8 @@ function PanelGroupWithForwardedRef({
         keyboardResizeByPercentage,
         keyboardResizeByPixels,
         onLayout,
-        panelDataArray,
-        layout: prevLayout,
       } = committedValuesRef.current;
+      const { layout: prevLayout, panelDataArray } = eagerValuesRef.current;
 
       const { initialLayout } = dragState ?? {};
 
@@ -789,6 +778,8 @@ function PanelGroupWithForwardedRef({
       if (layoutChanged) {
         setLayout(nextLayout);
 
+        eagerValuesRef.current.layout = nextLayout;
+
         if (onLayout) {
           onLayout(
             nextLayout.map((sizePercentage) => ({
@@ -814,24 +805,9 @@ function PanelGroupWithForwardedRef({
   // External APIs are safe to memoize via committed values ref
   const resizePanel = useCallback(
     (panelData: PanelData, mixedSizes: Partial<MixedSizes>) => {
-      const {
-        layout: prevLayout,
-        onLayout,
-        panelDataArray,
-      } = committedValuesRef.current;
+      const { onLayout } = committedValuesRef.current;
 
-      // See issues/211
-      if (panelDataArray.find(({ id }) => id === panelData.id) == null) {
-        setImperativeApiQueue((prev) => [
-          ...prev,
-          {
-            panelData,
-            mixedSizes,
-            type: "resize",
-          },
-        ]);
-        return;
-      }
+      const { layout: prevLayout, panelDataArray } = eagerValuesRef.current;
 
       const panelConstraintsArray = panelDataArray.map(
         (panelData) => panelData.constraints
@@ -863,6 +839,8 @@ function PanelGroupWithForwardedRef({
       if (!compareLayouts(prevLayout, nextLayout)) {
         setLayout(nextLayout);
 
+        eagerValuesRef.current.layout = nextLayout;
+
         if (onLayout) {
           onLayout(
             nextLayout.map((sizePercentage) => ({
@@ -888,7 +866,8 @@ function PanelGroupWithForwardedRef({
 
   const startDragging = useCallback(
     (dragHandleId: string, event: ResizeEvent) => {
-      const { direction, layout } = committedValuesRef.current;
+      const { direction } = committedValuesRef.current;
+      const { layout } = eagerValuesRef.current;
 
       const handleElement = getResizeHandleElement(dragHandleId)!;
 
@@ -912,48 +891,103 @@ function PanelGroupWithForwardedRef({
     setDragState(null);
   }, []);
 
+  const unregisterPanelRef = useRef<{
+    pendingPanelIds: Set<string>;
+    timeout: NodeJS.Timeout | null;
+  }>({
+    pendingPanelIds: new Set(),
+    timeout: null,
+  });
   const unregisterPanel = useCallback((panelData: PanelData) => {
-    delete panelIdToLastNotifiedMixedSizesMapRef.current[panelData.id];
+    const { id: groupId, onLayout } = committedValuesRef.current;
+    const { layout: prevLayout, panelDataArray } = eagerValuesRef.current;
 
-    setPanelDataArray((panelDataArray) => {
-      const index = panelDataArray.indexOf(panelData);
-      if (index >= 0) {
-        panelDataArray = [...panelDataArray];
-        panelDataArray.splice(index, 1);
-      }
+    const index = panelDataArray.indexOf(panelData);
+    if (index >= 0) {
+      panelDataArray.splice(index, 1);
+      unregisterPanelRef.current.pendingPanelIds.add(panelData.id);
+    }
 
-      return panelDataArray;
-    });
-  }, []);
+    if (unregisterPanelRef.current.timeout != null) {
+      clearTimeout(unregisterPanelRef.current.timeout);
+    }
 
-  // Handle imperative API calls that were made before panels were registered
-  useIsomorphicLayoutEffect(() => {
-    const queue = imperativeApiQueue;
-    while (queue.length > 0) {
-      const current = queue.shift()!;
-      switch (current.type) {
-        case "collapse": {
-          collapsePanel(current.panelData);
-          break;
-        }
-        case "expand": {
-          expandPanel(current.panelData);
-          break;
+    // 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 map = panelIdToLastNotifiedMixedSizesMapRef.current;
+
+      // TRICKY
+      // Strict effects mode
+      let unmountDueToStrictMode = false;
+      pendingPanelIds.forEach((panelId) => {
+        pendingPanelIds.delete(panelId);
+
+        if (panelDataArray.find(({ id }) => id === panelId) == null) {
+          unmountDueToStrictMode = true;
+
+          // 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 map[panelData.id];
         }
-        case "resize": {
-          resizePanel(current.panelData, current.mixedSizes!);
-          break;
+      });
+
+      if (!unmountDueToStrictMode) {
+        return;
+      }
+
+      if (panelDataArray.length === 0) {
+        // The group is unmounting; skip layout calculation.
+        return;
+      }
+
+      const groupSizePixels = calculateAvailablePanelSizeInPixels(groupId);
+
+      let unsafeLayout: number[] = calculateUnsafeDefaultLayout({
+        groupSizePixels,
+        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({
+        groupSizePixels,
+        layout: unsafeLayout,
+        panelConstraints: panelDataArray.map(
+          (panelData) => panelData.constraints
+        ),
+      });
+
+      if (!areEqual(prevLayout, nextLayout)) {
+        setLayout(nextLayout);
+
+        eagerValuesRef.current.layout = nextLayout;
+
+        if (onLayout) {
+          onLayout(
+            nextLayout.map((sizePercentage) => ({
+              sizePercentage,
+              sizePixels: convertPercentageToPixels(
+                sizePercentage,
+                groupSizePixels
+              ),
+            }))
+          );
         }
+
+        callPanelCallbacks(
+          groupId,
+          panelDataArray,
+          nextLayout,
+          panelIdToLastNotifiedMixedSizesMapRef.current
+        );
       }
-    }
-  }, [
-    collapsePanel,
-    expandPanel,
-    imperativeApiQueue,
-    layout,
-    panelDataArray,
-    resizePanel,
-  ]);
+    }, 0);
+  }, []);
 
   const context = useMemo(
     () => ({