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

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

@@ -1332,7 +1332,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,
@@ -1374,7 +1374,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,
@@ -1413,7 +1413,7 @@ function PanelGroupWithForwardedRef({
     const {
       panelDataArray
     } = eagerValuesRef.current;
-    const panelIndex = panelDataArray.indexOf(panelData);
+    const panelIndex = findPanelDataIndex(panelDataArray, panelData);
     return computePanelFlexBoxStyle({
       dragState,
       layout,
@@ -1461,6 +1461,19 @@ function PanelGroupWithForwardedRef({
       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;
+    }
     panelDataArray.push(panelData);
     panelDataArray.sort((panelA, panelB) => {
       const orderA = panelA.order;
@@ -1602,7 +1615,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,
@@ -1653,7 +1666,7 @@ function PanelGroupWithForwardedRef({
       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);
@@ -1669,7 +1682,7 @@ function PanelGroupWithForwardedRef({
       const {
         pendingPanelIds
       } = unregisterPanelRef.current;
-      const map = panelIdToLastNotifiedSizeMapRef.current;
+      const panelIdToLastNotifiedSizeMap = panelIdToLastNotifiedSizeMapRef.current;
 
       // TRICKY
       // Strict effects mode
@@ -1680,15 +1693,15 @@ function PanelGroupWithForwardedRef({
           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 map[panelData.id];
+          delete panelIdToLastNotifiedSizeMap[panelId];
         }
       });
-      if (!unmountDueToStrictMode) {
+      if (unmountDueToStrictMode) {
         return;
       }
       if (panelDataArray.length === 0) {
@@ -1761,9 +1774,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.esm.js

@@ -1308,7 +1308,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,
@@ -1350,7 +1350,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,
@@ -1389,7 +1389,7 @@ function PanelGroupWithForwardedRef({
     const {
       panelDataArray
     } = eagerValuesRef.current;
-    const panelIndex = panelDataArray.indexOf(panelData);
+    const panelIndex = findPanelDataIndex(panelDataArray, panelData);
     return computePanelFlexBoxStyle({
       dragState,
       layout,
@@ -1437,6 +1437,19 @@ function PanelGroupWithForwardedRef({
       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;
+    }
     panelDataArray.push(panelData);
     panelDataArray.sort((panelA, panelB) => {
       const orderA = panelA.order;
@@ -1578,7 +1591,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,
@@ -1629,7 +1642,7 @@ function PanelGroupWithForwardedRef({
       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);
@@ -1645,7 +1658,7 @@ function PanelGroupWithForwardedRef({
       const {
         pendingPanelIds
       } = unregisterPanelRef.current;
-      const map = panelIdToLastNotifiedSizeMapRef.current;
+      const panelIdToLastNotifiedSizeMap = panelIdToLastNotifiedSizeMapRef.current;
 
       // TRICKY
       // Strict effects mode
@@ -1656,15 +1669,15 @@ function PanelGroupWithForwardedRef({
           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 map[panelData.id];
+          delete panelIdToLastNotifiedSizeMap[panelId];
         }
       });
-      if (!unmountDueToStrictMode) {
+      if (unmountDueToStrictMode) {
         return;
       }
       if (panelDataArray.length === 0) {
@@ -1737,9 +1750,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.cjs.js

@@ -1216,7 +1216,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 +1258,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 +1297,7 @@ function PanelGroupWithForwardedRef({
     const {
       panelDataArray
     } = eagerValuesRef.current;
-    const panelIndex = panelDataArray.indexOf(panelData);
+    const panelIndex = findPanelDataIndex(panelDataArray, panelData);
     return computePanelFlexBoxStyle({
       dragState,
       layout,
@@ -1345,6 +1345,19 @@ function PanelGroupWithForwardedRef({
       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;
+    }
     panelDataArray.push(panelData);
     panelDataArray.sort((panelA, panelB) => {
       const orderA = panelA.order;
@@ -1486,7 +1499,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,
@@ -1537,7 +1550,7 @@ function PanelGroupWithForwardedRef({
       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);
@@ -1553,7 +1566,7 @@ function PanelGroupWithForwardedRef({
       const {
         pendingPanelIds
       } = unregisterPanelRef.current;
-      const map = panelIdToLastNotifiedSizeMapRef.current;
+      const panelIdToLastNotifiedSizeMap = panelIdToLastNotifiedSizeMapRef.current;
 
       // TRICKY
       // Strict effects mode
@@ -1564,15 +1577,15 @@ function PanelGroupWithForwardedRef({
           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 map[panelData.id];
+          delete panelIdToLastNotifiedSizeMap[panelId];
         }
       });
-      if (!unmountDueToStrictMode) {
+      if (unmountDueToStrictMode) {
         return;
       }
       if (panelDataArray.length === 0) {
@@ -1645,9 +1658,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

@@ -1192,7 +1192,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 +1234,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 +1273,7 @@ function PanelGroupWithForwardedRef({
     const {
       panelDataArray
     } = eagerValuesRef.current;
-    const panelIndex = panelDataArray.indexOf(panelData);
+    const panelIndex = findPanelDataIndex(panelDataArray, panelData);
     return computePanelFlexBoxStyle({
       dragState,
       layout,
@@ -1321,6 +1321,19 @@ function PanelGroupWithForwardedRef({
       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;
+    }
     panelDataArray.push(panelData);
     panelDataArray.sort((panelA, panelB) => {
       const orderA = panelA.order;
@@ -1462,7 +1475,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,
@@ -1513,7 +1526,7 @@ function PanelGroupWithForwardedRef({
       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);
@@ -1529,7 +1542,7 @@ function PanelGroupWithForwardedRef({
       const {
         pendingPanelIds
       } = unregisterPanelRef.current;
-      const map = panelIdToLastNotifiedSizeMapRef.current;
+      const panelIdToLastNotifiedSizeMap = panelIdToLastNotifiedSizeMapRef.current;
 
       // TRICKY
       // Strict effects mode
@@ -1540,15 +1553,15 @@ function PanelGroupWithForwardedRef({
           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 map[panelData.id];
+          delete panelIdToLastNotifiedSizeMap[panelId];
         }
       });
-      if (!unmountDueToStrictMode) {
+      if (unmountDueToStrictMode) {
         return;
       }
       if (panelDataArray.length === 0) {
@@ -1621,9 +1634,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];