react-resizable-panels 0.0.58 → 0.0.60

package/dist/react-resizable-panels.node.esm.js

@@ -67,6 +67,7 @@ function PanelWithForwardedRef({
     expandPanel,
     getPanelSize,
     getPanelStyle,
+    groupId,
     isPanelCollapsed,
     registerPanel,
     resizePanel,
@@ -132,6 +133,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
@@ -144,8 +146,6 @@ const Panel = forwardRef((props, ref) => createElement(PanelWithForwardedRef, {
 PanelWithForwardedRef.displayName = "Panel";
 Panel.displayName = "forwardRef(Panel)";
 
-const PRECISION = 10;
-
 function convertPixelsToPercentage(pixels, groupSizePixels) {
   return pixels / groupSizePixels * 100;
 }
@@ -223,6 +223,8 @@ function computePercentagePanelConstraints(panelConstraintsArray, panelIndex, gr
   };
 }
 
+const PRECISION = 10;
+
 function fuzzyCompareNumbers(actual, expected, fractionDigits = PRECISION) {
   actual = parseFloat(actual.toFixed(fractionDigits));
   expected = parseFloat(expected.toFixed(fractionDigits));
@@ -616,15 +618,10 @@ function useWindowSplitterPanelGroupBehavior({
   });
   useEffect(() => {
     const {
-      direction,
       panelDataArray
     } = committedValuesRef.current;
     const groupElement = getPanelGroupElement(groupId);
     assert(groupElement != null, `No group found for id "${groupId}"`);
-    const {
-      height,
-      width
-    } = groupElement.getBoundingClientRect();
     const handles = getResizeHandleElementsForGroup(groupId);
     const cleanupFunctions = handles.map(handle => {
       const handleId = handle.getAttribute("data-panel-resize-handle-id");
@@ -644,21 +641,19 @@ function useWindowSplitterPanelGroupBehavior({
               if (index >= 0) {
                 const panelData = panelDataArray[index];
                 const size = layout[index];
-                if (size != null) {
-                  var _getPercentageSizeFro;
+                if (size != null && panelData.constraints.collapsible) {
+                  var _getPercentageSizeFro, _getPercentageSizeFro2;
                   const groupSizePixels = getAvailableGroupSizePixels(groupId);
-                  const minSize = (_getPercentageSizeFro = getPercentageSizeFromMixedSizes({
+                  const collapsedSize = (_getPercentageSizeFro = getPercentageSizeFromMixedSizes({
+                    sizePercentage: panelData.constraints.collapsedSizePercentage,
+                    sizePixels: panelData.constraints.collapsedSizePixels
+                  }, groupSizePixels)) !== null && _getPercentageSizeFro !== void 0 ? _getPercentageSizeFro : 0;
+                  const minSize = (_getPercentageSizeFro2 = getPercentageSizeFromMixedSizes({
                     sizePercentage: panelData.constraints.minSizePercentage,
                     sizePixels: panelData.constraints.minSizePixels
-                  }, groupSizePixels)) !== null && _getPercentageSizeFro !== void 0 ? _getPercentageSizeFro : 0;
-                  let delta = 0;
-                  if (size.toPrecision(PRECISION) <= minSize.toPrecision(PRECISION)) {
-                    delta = direction === "horizontal" ? width : height;
-                  } else {
-                    delta = -(direction === "horizontal" ? width : height);
-                  }
+                  }, groupSizePixels)) !== null && _getPercentageSizeFro2 !== void 0 ? _getPercentageSizeFro2 : 0;
                   const nextLayout = adjustLayoutByDelta({
-                    delta,
+                    delta: fuzzyNumbersEqual(size, collapsedSize) ? minSize - collapsedSize : collapsedSize - size,
                     groupSizePixels,
                     layout,
                     panelConstraints: panelDataArray.map(panelData => panelData.constraints),
@@ -779,6 +774,44 @@ function calculateDeltaPercentage(event, groupId, dragHandleId, direction, initi
   }
 }
 
+function calculateUnsafeDefaultLayout({
+  groupSizePixels,
+  panelDataArray
+}) {
+  const layout = Array(panelDataArray.length);
+  const panelDataConstraints = panelDataArray.map(panelData => panelData.constraints);
+  let numPanelsWithSizes = 0;
+  let remainingSize = 100;
+
+  // Distribute default sizes first
+  for (let index = 0; index < panelDataArray.length; index++) {
+    const {
+      defaultSizePercentage
+    } = computePercentagePanelConstraints(panelDataConstraints, index, groupSizePixels);
+    if (defaultSizePercentage != null) {
+      numPanelsWithSizes++;
+      layout[index] = defaultSizePercentage;
+      remainingSize -= defaultSizePercentage;
+    }
+  }
+
+  // Remaining size should be distributed evenly between panels without default sizes
+  for (let index = 0; index < panelDataArray.length; index++) {
+    const {
+      defaultSizePercentage
+    } = computePercentagePanelConstraints(panelDataConstraints, index, groupSizePixels);
+    if (defaultSizePercentage != null) {
+      continue;
+    }
+    const numRemainingPanels = panelDataArray.length - numPanelsWithSizes;
+    const size = remainingSize / numRemainingPanels;
+    numPanelsWithSizes++;
+    layout[index] = size;
+    remainingSize -= size;
+  }
+  return layout;
+}
+
 function convertPercentageToPixels(percentage, groupSizePixels) {
   return percentage / 100 * groupSizePixels;
 }
@@ -929,6 +962,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,
@@ -984,6 +1021,15 @@ function loadSerializedPanelGroupState(autoSaveId, storage) {
   } catch (error) {}
   return null;
 }
+function loadPanelLayout(autoSaveId, panels, storage) {
+  const state = loadSerializedPanelGroupState(autoSaveId, storage);
+  if (state) {
+    var _state$key;
+    const key = getSerializationKey(panels);
+    return (_state$key = state[key]) !== null && _state$key !== void 0 ? _state$key : null;
+  }
+  return null;
+}
 function savePanelGroupLayout(autoSaveId, panels, sizes, storage) {
   const key = getSerializationKey(panels);
   const state = loadSerializedPanelGroupState(autoSaveId, storage) || {};
@@ -995,6 +1041,12 @@ function savePanelGroupLayout(autoSaveId, panels, sizes, storage) {
   }
 }
 
+function shouldMonitorPixelBasedConstraints(constraints) {
+  return constraints.some(constraints => {
+    return constraints.collapsedSizePixels !== undefined || constraints.maxSizePixels !== undefined || constraints.minSizePixels !== undefined;
+  });
+}
+
 // All units must be in percentages; pixel values should be pre-converted
 function validatePanelGroupLayout({
   groupSizePixels,
@@ -1063,7 +1115,7 @@ const defaultStorage = {
 };
 const debounceMap = {};
 function PanelGroupWithForwardedRef({
-  autoSaveId,
+  autoSaveId = null,
   children,
   className: classNameFromProps = "",
   dataAttributes,
@@ -1080,11 +1132,11 @@ 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 committedValuesRef = useRef({
+    autoSaveId,
     direction,
     dragState,
     id: groupId,
@@ -1092,7 +1144,8 @@ function PanelGroupWithForwardedRef({
     keyboardResizeByPixels,
     layout,
     onLayout,
-    panelDataArray
+    panelDataArray: [],
+    storage
   });
   useRef({
     didLogIdAndOrderWarning: false,
@@ -1130,6 +1183,7 @@ function PanelGroupWithForwardedRef({
       });
       if (!areEqual(prevLayout, safeLayout)) {
         setLayout(safeLayout);
+        committedValuesRef.current.layout = safeLayout;
         if (onLayout) {
           onLayout(safeLayout.map(sizePercentage => ({
             sizePercentage,
@@ -1140,14 +1194,19 @@ function PanelGroupWithForwardedRef({
       }
     }
   }), []);
+
   useWindowSplitterPanelGroupBehavior({
     committedValuesRef,
     groupId,
     layout,
-    panelDataArray,
+    panelDataArray: committedValuesRef.current.panelDataArray,
     setLayout
   });
   useEffect(() => {
+    const {
+      panelDataArray
+    } = committedValuesRef.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) {
@@ -1160,7 +1219,7 @@ function PanelGroupWithForwardedRef({
       }
       debounceMap[autoSaveId](autoSaveId, panelDataArray, layout, storage);
     }
-  }, [autoSaveId, layout, panelDataArray, storage]);
+  }, [autoSaveId, layout, storage]);
 
   // DEV warnings
   useEffect(() => {
@@ -1197,6 +1256,7 @@ function PanelGroupWithForwardedRef({
         });
         if (!compareLayouts(prevLayout, nextLayout)) {
           setLayout(nextLayout);
+          committedValuesRef.current.layout = nextLayout;
           if (onLayout) {
             onLayout(nextLayout.map(sizePercentage => ({
               sizePercentage,
@@ -1241,6 +1301,7 @@ function PanelGroupWithForwardedRef({
         });
         if (!compareLayouts(prevLayout, nextLayout)) {
           setLayout(nextLayout);
+          committedValuesRef.current.layout = nextLayout;
           if (onLayout) {
             onLayout(nextLayout.map(sizePercentage => ({
               sizePercentage,
@@ -1271,6 +1332,9 @@ function PanelGroupWithForwardedRef({
 
   // This API should never read from committedValuesRef
   const getPanelStyle = useCallback(panelData => {
+    const {
+      panelDataArray
+    } = committedValuesRef.current;
     const panelIndex = panelDataArray.indexOf(panelData);
     return computePanelFlexBoxStyle({
       dragState,
@@ -1278,7 +1342,7 @@ function PanelGroupWithForwardedRef({
       panelData: panelDataArray,
       panelIndex
     });
-  }, [dragState, layout, panelDataArray]);
+  }, [dragState, layout]);
 
   // External APIs are safe to memoize via committed values ref
   const isPanelCollapsed = useCallback(panelData => {
@@ -1308,22 +1372,76 @@ 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,
+      layout: prevLayout,
+      onLayout,
+      panelDataArray,
+      storage
+    } = committedValuesRef.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)
     });
+    if (!areEqual(prevLayout, nextLayout)) {
+      setLayout(nextLayout);
+      committedValuesRef.current.layout = 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) {
@@ -1393,6 +1511,7 @@ function PanelGroupWithForwardedRef({
       }
       if (layoutChanged) {
         setLayout(nextLayout);
+        committedValuesRef.current.layout = nextLayout;
         if (onLayout) {
           onLayout(nextLayout.map(sizePercentage => ({
             sizePercentage,
@@ -1430,6 +1549,7 @@ function PanelGroupWithForwardedRef({
     });
     if (!compareLayouts(prevLayout, nextLayout)) {
       setLayout(nextLayout);
+      committedValuesRef.current.layout = nextLayout;
       if (onLayout) {
         onLayout(nextLayout.map(sizePercentage => ({
           sizePercentage,
@@ -1457,16 +1577,84 @@ 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,
+      layout: prevLayout,
+      onLayout,
+      panelDataArray
+    } = committedValuesRef.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;
+      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 panelIdToLastNotifiedMixedSizesMapRef.current[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
+      });
+
+      // 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);
+        committedValuesRef.current.layout = nextLayout;
+        if (onLayout) {
+          onLayout(nextLayout.map(sizePercentage => ({
+            sizePercentage,
+            sizePixels: convertPercentageToPixels(sizePercentage, groupSizePixels)
+          })));
+        }
+        callPanelCallbacks(groupId, panelDataArray, nextLayout, panelIdToLastNotifiedMixedSizesMapRef.current);
+      }
+    }, 0);
   }, []);
   const context = useMemo(() => ({
     collapsePanel,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-resizable-panels",
-  "version": "0.0.58",
+  "version": "0.0.60",
   "description": "React components for resizable panel groups/layouts",
   "author": "Brian Vaughn <brian.david.vaughn@gmail.com>",
   "license": "MIT",

package/src/Panel.ts

@@ -115,6 +115,7 @@ export function PanelWithForwardedRef({
     expandPanel,
     getPanelSize,
     getPanelStyle,
+    groupId,
     isPanelCollapsed,
     registerPanel,
     resizePanel,
@@ -250,6 +251,7 @@ export function PanelWithForwardedRef({
     // CSS selectors
     "data-panel": "",
     "data-panel-id": panelId,
+    "data-panel-group-id": groupId,
 
     // e2e test attributes
     "data-panel-collapsible": isDevelopment