react-resizable-panels 0.0.59 → 0.0.61

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 0.0.61
+
+- Better unstable Offscreen/Activity API.
+
+## 0.0.60
+
+- Better support imperative API usage from mount effects.
+- Better support strict effects mode.
+- Better checks not to call `onResize` or `onLayout` more than once.
+
 ## 0.0.59
 
 - Support imperative panel API usage on-mount.

package/dist/declarations/src/PanelGroup.d.ts

@@ -11,7 +11,7 @@ export type PanelGroupStorage = {
 };
 export type PanelGroupOnLayout = (layout: MixedSizes[]) => void;
 export type PanelGroupProps = PropsWithChildren<{
-    autoSaveId?: string;
+    autoSaveId?: string | null;
     className?: string;
     dataAttributes?: DataAttributes;
     direction: Direction;
@@ -24,7 +24,7 @@ export type PanelGroupProps = PropsWithChildren<{
     tagName?: ElementType;
 }>;
 export declare const PanelGroup: import("react").ForwardRefExoticComponent<{
-    autoSaveId?: string | undefined;
+    autoSaveId?: string | null | undefined;
     className?: string | undefined;
     dataAttributes?: DataAttributes | undefined;
     direction: Direction;

package/dist/react-resizable-panels.browser.cjs.js

@@ -93,6 +93,7 @@ function PanelWithForwardedRef({
     expandPanel,
     getPanelSize,
     getPanelStyle,
+    groupId,
     isPanelCollapsed,
     registerPanel,
     resizePanel,
@@ -186,6 +187,7 @@ function PanelWithForwardedRef({
     // CSS selectors
     "data-panel": "",
     "data-panel-id": panelId,
+    "data-panel-group-id": groupId,
     // e2e test attributes
     "data-panel-collapsible": undefined,
     "data-panel-size": undefined
@@ -709,6 +711,7 @@ function getResizeHandlePanelIds(groupId, handleId, panelsArray) {
 
 function useWindowSplitterPanelGroupBehavior({
   committedValuesRef,
+  eagerValuesRef,
   groupId,
   layout,
   panelDataArray,
@@ -751,7 +754,7 @@ function useWindowSplitterPanelGroupBehavior({
   useEffect(() => {
     const {
       panelDataArray
-    } = committedValuesRef.current;
+    } = eagerValuesRef.current;
     const groupElement = getPanelGroupElement(groupId);
     assert(groupElement != null, `No group found for id "${groupId}"`);
     const handles = getResizeHandleElementsForGroup(groupId);
@@ -809,7 +812,7 @@ function useWindowSplitterPanelGroupBehavior({
     return () => {
       cleanupFunctions.forEach(cleanupFunction => cleanupFunction());
     };
-  }, [committedValuesRef, groupId, layout, panelDataArray, setLayout]);
+  }, [committedValuesRef, eagerValuesRef, groupId, layout, panelDataArray, setLayout]);
 }
 
 function areEqual(arrayA, arrayB) {
@@ -1094,6 +1097,10 @@ function debounce(callback, durationMs = 10) {
   return callable;
 }
 
+function getPanelElementsForGroup(groupId) {
+  return Array.from(document.querySelectorAll(`[data-panel][data-panel-group-id="${groupId}"]`));
+}
+
 // PanelGroup might be rendering in a server-side environment where localStorage is not available
 // or on a browser with cookies/storage disabled.
 // In either case, this function avoids accessing localStorage until needed,
@@ -1243,7 +1250,7 @@ const defaultStorage = {
 };
 const debounceMap = {};
 function PanelGroupWithForwardedRef({
-  autoSaveId,
+  autoSaveId = null,
   children,
   className: classNameFromProps = "",
   dataAttributes,
@@ -1260,20 +1267,22 @@ function PanelGroupWithForwardedRef({
   const groupId = useUniqueId(idFromProps);
   const [dragState, setDragState] = useState(null);
   const [layout, setLayout] = useState([]);
-  const [panelDataArray, setPanelDataArray] = useState([]);
   const panelIdToLastNotifiedMixedSizesMapRef = useRef({});
   const panelSizeBeforeCollapseRef = useRef(new Map());
   const prevDeltaRef = useRef(0);
-  const [imperativeApiQueue, setImperativeApiQueue] = useState([]);
   const committedValuesRef = useRef({
+    autoSaveId,
     direction,
     dragState,
     id: groupId,
     keyboardResizeByPercentage,
     keyboardResizeByPixels,
-    layout,
     onLayout,
-    panelDataArray
+    storage
+  });
+  const eagerValuesRef = useRef({
+    layout,
+    panelDataArray: []
   });
   useRef({
     didLogIdAndOrderWarning: false,
@@ -1284,9 +1293,11 @@ function PanelGroupWithForwardedRef({
     getId: () => committedValuesRef.current.id,
     getLayout: () => {
       const {
-        id: groupId,
-        layout
+        id: groupId
       } = committedValuesRef.current;
+      const {
+        layout
+      } = eagerValuesRef.current;
       const groupSizePixels = calculateAvailablePanelSizeInPixels(groupId);
       return layout.map(sizePercentage => {
         return {
@@ -1298,10 +1309,12 @@ function PanelGroupWithForwardedRef({
     setLayout: mixedSizes => {
       const {
         id: groupId,
+        onLayout
+      } = committedValuesRef.current;
+      const {
         layout: prevLayout,
-        onLayout,
         panelDataArray
-      } = committedValuesRef.current;
+      } = eagerValuesRef.current;
       const groupSizePixels = calculateAvailablePanelSizeInPixels(groupId);
       const unsafeLayout = mixedSizes.map(mixedSize => getPercentageSizeFromMixedSizes(mixedSize, groupSizePixels));
       const safeLayout = validatePanelGroupLayout({
@@ -1311,6 +1324,7 @@ function PanelGroupWithForwardedRef({
       });
       if (!areEqual(prevLayout, safeLayout)) {
         setLayout(safeLayout);
+        eagerValuesRef.current.layout = safeLayout;
         if (onLayout) {
           onLayout(safeLayout.map(sizePercentage => ({
             sizePercentage,
@@ -1322,21 +1336,30 @@ 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) {
@@ -1349,63 +1372,12 @@ function PanelGroupWithForwardedRef({
       }
       debounceMap[autoSaveId](autoSaveId, panelDataArray, layout, storage);
     }
-  }, [autoSaveId, layout, panelDataArray, 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)!
+  }, [autoSaveId, layout, storage]);
   useIsomorphicLayoutEffect(() => {
     const {
-      id: groupId,
-      layout,
-      onLayout
-    } = committedValuesRef.current;
-    if (layout.length === panelDataArray.length) {
-      // Only compute (or restore) default layout once per panel configuration.
-      return;
-    }
-
-    // If this panel has been configured to persist sizing information,
-    // default size should be restored from local storage if possible.
-    let unsafeLayout = 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(() => {
+      layout: prevLayout,
+      panelDataArray
+    } = eagerValuesRef.current;
     const constraints = panelDataArray.map(({
       constraints
     }) => constraints);
@@ -1419,7 +1391,6 @@ function PanelGroupWithForwardedRef({
       const resizeObserver = new ResizeObserver(() => {
         const groupSizePixels = calculateAvailablePanelSizeInPixels(groupId);
         const {
-          layout: prevLayout,
           onLayout
         } = committedValuesRef.current;
         const nextLayout = validatePanelGroupLayout({
@@ -1429,6 +1400,7 @@ function PanelGroupWithForwardedRef({
         });
         if (!areEqual(prevLayout, nextLayout)) {
           setLayout(nextLayout);
+          eagerValuesRef.current.layout = nextLayout;
           if (onLayout) {
             onLayout(nextLayout.map(sizePercentage => ({
               sizePercentage,
@@ -1443,7 +1415,7 @@ function PanelGroupWithForwardedRef({
         resizeObserver.disconnect();
       };
     }
-  }, [groupId, panelDataArray]);
+  }, [groupId]);
 
   // DEV warnings
   useEffect(() => {
@@ -1451,22 +1423,13 @@ function PanelGroupWithForwardedRef({
 
   // External APIs are safe to memoize via committed values ref
   const collapsePanel = useCallback(panelData => {
+    const {
+      onLayout
+    } = committedValuesRef.current;
     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;
-    }
+    } = eagerValuesRef.current;
     if (panelData.constraints.collapsible) {
       const panelConstraintsArray = panelDataArray.map(panelData => panelData.constraints);
       const {
@@ -1491,6 +1454,7 @@ function PanelGroupWithForwardedRef({
         });
         if (!compareLayouts(prevLayout, nextLayout)) {
           setLayout(nextLayout);
+          eagerValuesRef.current.layout = nextLayout;
           if (onLayout) {
             onLayout(nextLayout.map(sizePercentage => ({
               sizePercentage,
@@ -1505,22 +1469,13 @@ function PanelGroupWithForwardedRef({
 
   // External APIs are safe to memoize via committed values ref
   const expandPanel = useCallback(panelData => {
+    const {
+      onLayout
+    } = committedValuesRef.current;
     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;
-    }
+    } = eagerValuesRef.current;
     if (panelData.constraints.collapsible) {
       const panelConstraintsArray = panelDataArray.map(panelData => panelData.constraints);
       const {
@@ -1546,6 +1501,7 @@ function PanelGroupWithForwardedRef({
         });
         if (!compareLayouts(prevLayout, nextLayout)) {
           setLayout(nextLayout);
+          eagerValuesRef.current.layout = nextLayout;
           if (onLayout) {
             onLayout(nextLayout.map(sizePercentage => ({
               sizePercentage,
@@ -1563,7 +1519,7 @@ function PanelGroupWithForwardedRef({
     const {
       layout,
       panelDataArray
-    } = committedValuesRef.current;
+    } = eagerValuesRef.current;
     const {
       panelSizePercentage,
       panelSizePixels
@@ -1576,6 +1532,9 @@ function PanelGroupWithForwardedRef({
 
   // This API should never read from committedValuesRef
   const getPanelStyle = useCallback(panelData => {
+    const {
+      panelDataArray
+    } = eagerValuesRef.current;
     const panelIndex = panelDataArray.indexOf(panelData);
     return computePanelFlexBoxStyle({
       dragState,
@@ -1583,14 +1542,14 @@ function PanelGroupWithForwardedRef({
       panelData: panelDataArray,
       panelIndex
     });
-  }, [dragState, layout, panelDataArray]);
+  }, [dragState, layout]);
 
   // External APIs are safe to memoize via committed values ref
   const isPanelCollapsed = useCallback(panelData => {
     const {
       layout,
       panelDataArray
-    } = committedValuesRef.current;
+    } = eagerValuesRef.current;
     const {
       collapsedSizePercentage,
       collapsible,
@@ -1604,7 +1563,7 @@ function PanelGroupWithForwardedRef({
     const {
       layout,
       panelDataArray
-    } = committedValuesRef.current;
+    } = eagerValuesRef.current;
     const {
       collapsedSizePercentage,
       collapsible,
@@ -1613,22 +1572,82 @@ function PanelGroupWithForwardedRef({
     return !collapsible || panelSizePercentage > collapsedSizePercentage;
   }, [groupId]);
   const registerPanel = useCallback(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 = 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 => {
     return function resizeHandler(event) {
@@ -1639,10 +1658,12 @@ function PanelGroupWithForwardedRef({
         id: groupId,
         keyboardResizeByPercentage,
         keyboardResizeByPixels,
-        onLayout,
-        panelDataArray,
-        layout: prevLayout
+        onLayout
       } = committedValuesRef.current;
+      const {
+        layout: prevLayout,
+        panelDataArray
+      } = eagerValuesRef.current;
       const {
         initialLayout
       } = dragState !== null && dragState !== void 0 ? dragState : {};
@@ -1698,6 +1719,7 @@ function PanelGroupWithForwardedRef({
       }
       if (layoutChanged) {
         setLayout(nextLayout);
+        eagerValuesRef.current.layout = nextLayout;
         if (onLayout) {
           onLayout(nextLayout.map(sizePercentage => ({
             sizePercentage,
@@ -1711,23 +1733,13 @@ function PanelGroupWithForwardedRef({
 
   // External APIs are safe to memoize via committed values ref
   const resizePanel = useCallback((panelData, mixedSizes) => {
+    const {
+      onLayout
+    } = committedValuesRef.current;
     const {
       layout: prevLayout,
-      onLayout,
       panelDataArray
-    } = committedValuesRef.current;
-
-    // See issues/211
-    if (panelDataArray.find(({
-      id
-    }) => id === panelData.id) == null) {
-      setImperativeApiQueue(prev => [...prev, {
-        panelData,
-        mixedSizes,
-        type: "resize"
-      }]);
-      return;
-    }
+    } = eagerValuesRef.current;
     const panelConstraintsArray = panelDataArray.map(panelData => panelData.constraints);
     const {
       groupSizePixels,
@@ -1747,6 +1759,7 @@ function PanelGroupWithForwardedRef({
     });
     if (!compareLayouts(prevLayout, nextLayout)) {
       setLayout(nextLayout);
+      eagerValuesRef.current.layout = nextLayout;
       if (onLayout) {
         onLayout(nextLayout.map(sizePercentage => ({
           sizePercentage,
@@ -1758,9 +1771,11 @@ function PanelGroupWithForwardedRef({
   }, [groupId]);
   const startDragging = useCallback((dragHandleId, event) => {
     const {
-      direction,
-      layout
+      direction
     } = committedValuesRef.current;
+    const {
+      layout
+    } = eagerValuesRef.current;
     const handleElement = getResizeHandleElement(dragHandleId);
     const initialCursorPosition = getResizeEventCursorPosition(direction, event);
     setDragState({
@@ -1774,42 +1789,87 @@ function PanelGroupWithForwardedRef({
     resetGlobalCursorStyle();
     setDragState(null);
   }, []);
+  const unregisterPanelRef = useRef({
+    pendingPanelIds: new Set(),
+    timeout: null
+  });
   const unregisterPanel = useCallback(panelData => {
-    delete panelIdToLastNotifiedMixedSizesMapRef.current[panelData.id];
-    setPanelDataArray(panelDataArray => {
-      const index = panelDataArray.indexOf(panelData);
-      if (index >= 0) {
-        panelDataArray = [...panelDataArray];
-        panelDataArray.splice(index, 1);
+    const {
+      id: groupId,
+      onLayout
+    } = committedValuesRef.current;
+    const {
+      layout: prevLayout,
+      panelDataArray
+    } = eagerValuesRef.current;
+    const index = panelDataArray.indexOf(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 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];
+        }
+      });
+      if (!unmountDueToStrictMode) {
+        return;
       }
-      return panelDataArray;
-    });
-  }, []);
+      if (panelDataArray.length === 0) {
+        // The group is unmounting; skip layout calculation.
+        return;
+      }
+      const groupSizePixels = calculateAvailablePanelSizeInPixels(groupId);
+      let unsafeLayout = calculateUnsafeDefaultLayout({
+        groupSizePixels,
+        panelDataArray
+      });
 
-  // 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;
-          }
-        case "resize":
-          {
-            resizePanel(current.panelData, current.mixedSizes);
-            break;
-          }
+      // 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(() => ({
     collapsePanel,
     direction,