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

package/dist/react-resizable-panels.development.node.cjs.js

@@ -678,47 +678,6 @@ function calculateDeltaPercentage(event, dragHandleId, direction, initialDragSta
   }
 }
 
-function calculateUnsafeDefaultLayout({
-  panelDataArray
-}) {
-  const layout = Array(panelDataArray.length);
-  const panelConstraintsArray = panelDataArray.map(panelData => panelData.constraints);
-  let numPanelsWithSizes = 0;
-  let remainingSize = 100;
-
-  // Distribute default sizes first
-  for (let index = 0; index < panelDataArray.length; index++) {
-    const panelConstraints = panelConstraintsArray[index];
-    assert(panelConstraints);
-    const {
-      defaultSize
-    } = panelConstraints;
-    if (defaultSize != null) {
-      numPanelsWithSizes++;
-      layout[index] = defaultSize;
-      remainingSize -= defaultSize;
-    }
-  }
-
-  // Remaining size should be distributed evenly between panels without default sizes
-  for (let index = 0; index < panelDataArray.length; index++) {
-    const panelConstraints = panelConstraintsArray[index];
-    assert(panelConstraints);
-    const {
-      defaultSize
-    } = panelConstraints;
-    if (defaultSize != null) {
-      continue;
-    }
-    const numRemainingPanels = panelDataArray.length - numPanelsWithSizes;
-    const size = remainingSize / numRemainingPanels;
-    numPanelsWithSizes++;
-    layout[index] = size;
-    remainingSize -= size;
-  }
-  return layout;
-}
-
 // Layout should be pre-converted into percentages
 function callPanelCallbacks(panelsArray, layout, panelIdToLastNotifiedSizeMap) {
   layout.forEach((size, index) => {
@@ -852,10 +811,6 @@ 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,
@@ -911,15 +866,6 @@ 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) || {};
@@ -1069,6 +1015,7 @@ function PanelGroupWithForwardedRef({
   const groupId = useUniqueId(idFromProps);
   const [dragState, setDragState] = useState(null);
   const [layout, setLayout] = useState([]);
+  useState([]);
   const panelIdToLastNotifiedSizeMapRef = useRef({});
   const panelSizeBeforeCollapseRef = useRef(new Map());
   const prevDeltaRef = useRef(0);
@@ -1083,7 +1030,8 @@ function PanelGroupWithForwardedRef({
   });
   const eagerValuesRef = useRef({
     layout,
-    panelDataArray: []
+    panelDataArray: [],
+    panelDataArrayChanged: false
   });
   const devWarningsRef = useRef({
     didLogIdAndOrderWarning: false,
@@ -1216,7 +1164,7 @@ function PanelGroupWithForwardedRef({
         // Store size before collapse;
         // This is the size that gets restored if the expand() API is used.
         panelSizeBeforeCollapseRef.current.set(panelData.id, panelSize);
-        const isLastPanel = panelDataArray.indexOf(panelData) === panelDataArray.length - 1;
+        const isLastPanel = findPanelDataIndex(panelDataArray, panelData) === panelDataArray.length - 1;
         const delta = isLastPanel ? panelSize - collapsedSize : collapsedSize - panelSize;
         const nextLayout = adjustLayoutByDelta({
           delta,
@@ -1258,7 +1206,7 @@ function PanelGroupWithForwardedRef({
         // Restore this panel to the size it was before it was collapsed, if possible.
         const prevPanelSize = panelSizeBeforeCollapseRef.current.get(panelData.id);
         const baseSize = prevPanelSize != null && prevPanelSize >= minSize ? prevPanelSize : minSize;
-        const isLastPanel = panelDataArray.indexOf(panelData) === panelDataArray.length - 1;
+        const isLastPanel = findPanelDataIndex(panelDataArray, panelData) === panelDataArray.length - 1;
         const delta = isLastPanel ? panelSize - baseSize : baseSize - panelSize;
         const nextLayout = adjustLayoutByDelta({
           delta,
@@ -1297,7 +1245,7 @@ function PanelGroupWithForwardedRef({
     const {
       panelDataArray
     } = eagerValuesRef.current;
-    const panelIndex = panelDataArray.indexOf(panelData);
+    const panelIndex = findPanelDataIndex(panelDataArray, panelData);
     return computePanelFlexBoxStyle({
       dragState,
       layout,
@@ -1336,13 +1284,6 @@ function PanelGroupWithForwardedRef({
   }, []);
   const registerPanel = useCallback(panelData => {
     const {
-      autoSaveId,
-      id: groupId,
-      onLayout,
-      storage
-    } = committedValuesRef.current;
-    const {
-      layout: prevLayout,
       panelDataArray
     } = eagerValuesRef.current;
     panelDataArray.push(panelData);
@@ -1359,44 +1300,7 @@ function PanelGroupWithForwardedRef({
         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);
-    }
-    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)
-    });
-
-    // 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);
-      }
-      callPanelCallbacks(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
-    }
+    eagerValuesRef.current.panelDataArrayChanged = true;
   }, []);
   const registerResizeHandle = useCallback(dragHandleId => {
     return function resizeHandler(event) {
@@ -1486,7 +1390,7 @@ function PanelGroupWithForwardedRef({
       pivotIndices
     } = panelDataHelper(panelDataArray, panelData, prevLayout);
     assert(panelSize != null);
-    const isLastPanel = panelDataArray.indexOf(panelData) === panelDataArray.length - 1;
+    const isLastPanel = findPanelDataIndex(panelDataArray, panelData) === panelDataArray.length - 1;
     const delta = isLastPanel ? panelSize - unsafePanelSize : unsafePanelSize - panelSize;
     const nextLayout = adjustLayoutByDelta({
       delta,
@@ -1525,79 +1429,21 @@ function PanelGroupWithForwardedRef({
     resetGlobalCursorStyle();
     setDragState(null);
   }, []);
-  const unregisterPanelRef = useRef({
-    pendingPanelIds: new Set(),
-    timeout: null
-  });
   const unregisterPanel = useCallback(panelData => {
     const {
-      onLayout
-    } = committedValuesRef.current;
-    const {
-      layout: prevLayout,
       panelDataArray
     } = eagerValuesRef.current;
-    const index = panelDataArray.indexOf(panelData);
+    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 map = panelIdToLastNotifiedSizeMapRef.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;
-      }
-      if (panelDataArray.length === 0) {
-        // The group is unmounting; skip layout calculation.
-        return;
-      }
-      let 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)
-      });
-      if (!areEqual(prevLayout, nextLayout)) {
-        setLayout(nextLayout);
-        eagerValuesRef.current.layout = nextLayout;
-        if (onLayout) {
-          onLayout(nextLayout);
-        }
-        callPanelCallbacks(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
-      }
-    }, 0);
+      // 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];
+      eagerValuesRef.current.panelDataArrayChanged = true;
+    }
   }, []);
   const context = useMemo(() => ({
     collapsePanel,
@@ -1645,9 +1491,12 @@ const PanelGroup = forwardRef((props, ref) => createElement(PanelGroupWithForwar
 }));
 PanelGroupWithForwardedRef.displayName = "PanelGroup";
 PanelGroup.displayName = "forwardRef(PanelGroup)";
+function findPanelDataIndex(panelDataArray, panelData) {
+  return panelDataArray.findIndex(prevPanelData => prevPanelData === panelData || prevPanelData.id === panelData.id);
+}
 function panelDataHelper(panelDataArray, panelData, layout) {
   const panelConstraintsArray = panelDataArray.map(panelData => panelData.constraints);
-  const panelIndex = panelDataArray.indexOf(panelData);
+  const panelIndex = findPanelDataIndex(panelDataArray, panelData);
   const panelConstraints = panelConstraintsArray[panelIndex];
   const isLastPanel = panelIndex === panelDataArray.length - 1;
   const pivotIndices = isLastPanel ? [panelIndex - 1, panelIndex] : [panelIndex, panelIndex + 1];

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

@@ -654,47 +654,6 @@ function calculateDeltaPercentage(event, dragHandleId, direction, initialDragSta
   }
 }
 
-function calculateUnsafeDefaultLayout({
-  panelDataArray
-}) {
-  const layout = Array(panelDataArray.length);
-  const panelConstraintsArray = panelDataArray.map(panelData => panelData.constraints);
-  let numPanelsWithSizes = 0;
-  let remainingSize = 100;
-
-  // Distribute default sizes first
-  for (let index = 0; index < panelDataArray.length; index++) {
-    const panelConstraints = panelConstraintsArray[index];
-    assert(panelConstraints);
-    const {
-      defaultSize
-    } = panelConstraints;
-    if (defaultSize != null) {
-      numPanelsWithSizes++;
-      layout[index] = defaultSize;
-      remainingSize -= defaultSize;
-    }
-  }
-
-  // Remaining size should be distributed evenly between panels without default sizes
-  for (let index = 0; index < panelDataArray.length; index++) {
-    const panelConstraints = panelConstraintsArray[index];
-    assert(panelConstraints);
-    const {
-      defaultSize
-    } = panelConstraints;
-    if (defaultSize != null) {
-      continue;
-    }
-    const numRemainingPanels = panelDataArray.length - numPanelsWithSizes;
-    const size = remainingSize / numRemainingPanels;
-    numPanelsWithSizes++;
-    layout[index] = size;
-    remainingSize -= size;
-  }
-  return layout;
-}
-
 // Layout should be pre-converted into percentages
 function callPanelCallbacks(panelsArray, layout, panelIdToLastNotifiedSizeMap) {
   layout.forEach((size, index) => {
@@ -828,10 +787,6 @@ 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,
@@ -887,15 +842,6 @@ 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) || {};
@@ -1045,6 +991,7 @@ function PanelGroupWithForwardedRef({
   const groupId = useUniqueId(idFromProps);
   const [dragState, setDragState] = useState(null);
   const [layout, setLayout] = useState([]);
+  useState([]);
   const panelIdToLastNotifiedSizeMapRef = useRef({});
   const panelSizeBeforeCollapseRef = useRef(new Map());
   const prevDeltaRef = useRef(0);
@@ -1059,7 +1006,8 @@ function PanelGroupWithForwardedRef({
   });
   const eagerValuesRef = useRef({
     layout,
-    panelDataArray: []
+    panelDataArray: [],
+    panelDataArrayChanged: false
   });
   const devWarningsRef = useRef({
     didLogIdAndOrderWarning: false,
@@ -1192,7 +1140,7 @@ function PanelGroupWithForwardedRef({
         // Store size before collapse;
         // This is the size that gets restored if the expand() API is used.
         panelSizeBeforeCollapseRef.current.set(panelData.id, panelSize);
-        const isLastPanel = panelDataArray.indexOf(panelData) === panelDataArray.length - 1;
+        const isLastPanel = findPanelDataIndex(panelDataArray, panelData) === panelDataArray.length - 1;
         const delta = isLastPanel ? panelSize - collapsedSize : collapsedSize - panelSize;
         const nextLayout = adjustLayoutByDelta({
           delta,
@@ -1234,7 +1182,7 @@ function PanelGroupWithForwardedRef({
         // Restore this panel to the size it was before it was collapsed, if possible.
         const prevPanelSize = panelSizeBeforeCollapseRef.current.get(panelData.id);
         const baseSize = prevPanelSize != null && prevPanelSize >= minSize ? prevPanelSize : minSize;
-        const isLastPanel = panelDataArray.indexOf(panelData) === panelDataArray.length - 1;
+        const isLastPanel = findPanelDataIndex(panelDataArray, panelData) === panelDataArray.length - 1;
         const delta = isLastPanel ? panelSize - baseSize : baseSize - panelSize;
         const nextLayout = adjustLayoutByDelta({
           delta,
@@ -1273,7 +1221,7 @@ function PanelGroupWithForwardedRef({
     const {
       panelDataArray
     } = eagerValuesRef.current;
-    const panelIndex = panelDataArray.indexOf(panelData);
+    const panelIndex = findPanelDataIndex(panelDataArray, panelData);
     return computePanelFlexBoxStyle({
       dragState,
       layout,
@@ -1312,13 +1260,6 @@ function PanelGroupWithForwardedRef({
   }, []);
   const registerPanel = useCallback(panelData => {
     const {
-      autoSaveId,
-      id: groupId,
-      onLayout,
-      storage
-    } = committedValuesRef.current;
-    const {
-      layout: prevLayout,
       panelDataArray
     } = eagerValuesRef.current;
     panelDataArray.push(panelData);
@@ -1335,44 +1276,7 @@ function PanelGroupWithForwardedRef({
         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);
-    }
-    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)
-    });
-
-    // 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);
-      }
-      callPanelCallbacks(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
-    }
+    eagerValuesRef.current.panelDataArrayChanged = true;
   }, []);
   const registerResizeHandle = useCallback(dragHandleId => {
     return function resizeHandler(event) {
@@ -1462,7 +1366,7 @@ function PanelGroupWithForwardedRef({
       pivotIndices
     } = panelDataHelper(panelDataArray, panelData, prevLayout);
     assert(panelSize != null);
-    const isLastPanel = panelDataArray.indexOf(panelData) === panelDataArray.length - 1;
+    const isLastPanel = findPanelDataIndex(panelDataArray, panelData) === panelDataArray.length - 1;
     const delta = isLastPanel ? panelSize - unsafePanelSize : unsafePanelSize - panelSize;
     const nextLayout = adjustLayoutByDelta({
       delta,
@@ -1501,79 +1405,21 @@ function PanelGroupWithForwardedRef({
     resetGlobalCursorStyle();
     setDragState(null);
   }, []);
-  const unregisterPanelRef = useRef({
-    pendingPanelIds: new Set(),
-    timeout: null
-  });
   const unregisterPanel = useCallback(panelData => {
     const {
-      onLayout
-    } = committedValuesRef.current;
-    const {
-      layout: prevLayout,
       panelDataArray
     } = eagerValuesRef.current;
-    const index = panelDataArray.indexOf(panelData);
+    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 map = panelIdToLastNotifiedSizeMapRef.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;
-      }
-      if (panelDataArray.length === 0) {
-        // The group is unmounting; skip layout calculation.
-        return;
-      }
-      let 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)
-      });
-      if (!areEqual(prevLayout, nextLayout)) {
-        setLayout(nextLayout);
-        eagerValuesRef.current.layout = nextLayout;
-        if (onLayout) {
-          onLayout(nextLayout);
-        }
-        callPanelCallbacks(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
-      }
-    }, 0);
+      // 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];
+      eagerValuesRef.current.panelDataArrayChanged = true;
+    }
   }, []);
   const context = useMemo(() => ({
     collapsePanel,
@@ -1621,9 +1467,12 @@ const PanelGroup = forwardRef((props, ref) => createElement(PanelGroupWithForwar
 }));
 PanelGroupWithForwardedRef.displayName = "PanelGroup";
 PanelGroup.displayName = "forwardRef(PanelGroup)";
+function findPanelDataIndex(panelDataArray, panelData) {
+  return panelDataArray.findIndex(prevPanelData => prevPanelData === panelData || prevPanelData.id === panelData.id);
+}
 function panelDataHelper(panelDataArray, panelData, layout) {
   const panelConstraintsArray = panelDataArray.map(panelData => panelData.constraints);
-  const panelIndex = panelDataArray.indexOf(panelData);
+  const panelIndex = findPanelDataIndex(panelDataArray, panelData);
   const panelConstraints = panelConstraintsArray[panelIndex];
   const isLastPanel = panelIndex === panelDataArray.length - 1;
   const pivotIndices = isLastPanel ? [panelIndex - 1, panelIndex] : [panelIndex, panelIndex + 1];