react-resizable-panels 0.0.60 → 0.0.61

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

@@ -643,6 +643,7 @@ function getResizeHandlePanelIds(groupId, handleId, panelsArray) {
 
 function useWindowSplitterPanelGroupBehavior({
   committedValuesRef,
+  eagerValuesRef,
   groupId,
   layout,
   panelDataArray,
@@ -654,7 +655,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);
@@ -712,7 +713,7 @@ function useWindowSplitterPanelGroupBehavior({
     return () => {
       cleanupFunctions.forEach(cleanupFunction => cleanupFunction());
     };
-  }, [committedValuesRef, groupId, layout, panelDataArray, setLayout]);
+  }, [committedValuesRef, eagerValuesRef, groupId, layout, panelDataArray, setLayout]);
 }
 
 function areEqual(arrayA, arrayB) {
@@ -1254,11 +1255,13 @@ function PanelGroupWithForwardedRef({
     id: groupId,
     keyboardResizeByPercentage,
     keyboardResizeByPixels,
-    layout,
     onLayout,
-    panelDataArray: [],
     storage
   });
+  const eagerValuesRef = useRef({
+    layout,
+    panelDataArray: []
+  });
   const devWarningsRef = useRef({
     didLogIdAndOrderWarning: false,
     didLogPanelConstraintsWarning: false,
@@ -1268,9 +1271,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 {
@@ -1282,10 +1287,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({
@@ -1295,7 +1302,7 @@ function PanelGroupWithForwardedRef({
       });
       if (!areEqual(prevLayout, safeLayout)) {
         setLayout(safeLayout);
-        committedValuesRef.current.layout = safeLayout;
+        eagerValuesRef.current.layout = safeLayout;
         if (onLayout) {
           onLayout(safeLayout.map(sizePercentage => ({
             sizePercentage,
@@ -1309,15 +1316,16 @@ function PanelGroupWithForwardedRef({
 
   useWindowSplitterPanelGroupBehavior({
     committedValuesRef,
+    eagerValuesRef,
     groupId,
     layout,
-    panelDataArray: committedValuesRef.current.panelDataArray,
+    panelDataArray: eagerValuesRef.current.panelDataArray,
     setLayout
   });
   useEffect(() => {
     const {
       panelDataArray
-    } = committedValuesRef.current;
+    } = eagerValuesRef.current;
 
     // If this panel has been configured to persist sizing information, save sizes to local storage.
     if (autoSaveId) {
@@ -1338,7 +1346,7 @@ function PanelGroupWithForwardedRef({
     {
       const {
         panelDataArray
-      } = committedValuesRef.current;
+      } = eagerValuesRef.current;
       const {
         didLogIdAndOrderWarning,
         didLogPanelConstraintsWarning,
@@ -1381,11 +1389,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;
+    } = eagerValuesRef.current;
     if (panelData.constraints.collapsible) {
       const panelConstraintsArray = panelDataArray.map(panelData => panelData.constraints);
       const {
@@ -1410,7 +1420,7 @@ function PanelGroupWithForwardedRef({
         });
         if (!compareLayouts(prevLayout, nextLayout)) {
           setLayout(nextLayout);
-          committedValuesRef.current.layout = nextLayout;
+          eagerValuesRef.current.layout = nextLayout;
           if (onLayout) {
             onLayout(nextLayout.map(sizePercentage => ({
               sizePercentage,
@@ -1425,11 +1435,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;
+    } = eagerValuesRef.current;
     if (panelData.constraints.collapsible) {
       const panelConstraintsArray = panelDataArray.map(panelData => panelData.constraints);
       const {
@@ -1455,7 +1467,7 @@ function PanelGroupWithForwardedRef({
         });
         if (!compareLayouts(prevLayout, nextLayout)) {
           setLayout(nextLayout);
-          committedValuesRef.current.layout = nextLayout;
+          eagerValuesRef.current.layout = nextLayout;
           if (onLayout) {
             onLayout(nextLayout.map(sizePercentage => ({
               sizePercentage,
@@ -1473,7 +1485,7 @@ function PanelGroupWithForwardedRef({
     const {
       layout,
       panelDataArray
-    } = committedValuesRef.current;
+    } = eagerValuesRef.current;
     const {
       panelSizePercentage,
       panelSizePixels
@@ -1488,7 +1500,7 @@ function PanelGroupWithForwardedRef({
   const getPanelStyle = useCallback(panelData => {
     const {
       panelDataArray
-    } = committedValuesRef.current;
+    } = eagerValuesRef.current;
     const panelIndex = panelDataArray.indexOf(panelData);
     return computePanelFlexBoxStyle({
       dragState,
@@ -1503,7 +1515,7 @@ function PanelGroupWithForwardedRef({
     const {
       layout,
       panelDataArray
-    } = committedValuesRef.current;
+    } = eagerValuesRef.current;
     const {
       collapsedSizePercentage,
       collapsible,
@@ -1517,7 +1529,7 @@ function PanelGroupWithForwardedRef({
     const {
       layout,
       panelDataArray
-    } = committedValuesRef.current;
+    } = eagerValuesRef.current;
     const {
       collapsedSizePercentage,
       collapsible,
@@ -1529,11 +1541,13 @@ function PanelGroupWithForwardedRef({
     const {
       autoSaveId,
       id: groupId,
-      layout: prevLayout,
       onLayout,
-      panelDataArray,
       storage
     } = committedValuesRef.current;
+    const {
+      layout: prevLayout,
+      panelDataArray
+    } = eagerValuesRef.current;
     panelDataArray.push(panelData);
     panelDataArray.sort((panelA, panelB) => {
       const orderA = panelA.order;
@@ -1585,9 +1599,13 @@ function PanelGroupWithForwardedRef({
       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)) {
-      setLayout(nextLayout);
-      committedValuesRef.current.layout = nextLayout;
       if (onLayout) {
         onLayout(nextLayout.map(sizePercentage => ({
           sizePercentage,
@@ -1606,10 +1624,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 : {};
@@ -1665,7 +1685,7 @@ function PanelGroupWithForwardedRef({
       }
       if (layoutChanged) {
         setLayout(nextLayout);
-        committedValuesRef.current.layout = nextLayout;
+        eagerValuesRef.current.layout = nextLayout;
         if (onLayout) {
           onLayout(nextLayout.map(sizePercentage => ({
             sizePercentage,
@@ -1679,11 +1699,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;
+    } = eagerValuesRef.current;
     const panelConstraintsArray = panelDataArray.map(panelData => panelData.constraints);
     const {
       groupSizePixels,
@@ -1703,7 +1725,7 @@ function PanelGroupWithForwardedRef({
     });
     if (!compareLayouts(prevLayout, nextLayout)) {
       setLayout(nextLayout);
-      committedValuesRef.current.layout = nextLayout;
+      eagerValuesRef.current.layout = nextLayout;
       if (onLayout) {
         onLayout(nextLayout.map(sizePercentage => ({
           sizePercentage,
@@ -1715,9 +1737,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({
@@ -1738,10 +1762,12 @@ function PanelGroupWithForwardedRef({
   const unregisterPanel = useCallback(panelData => {
     const {
       id: groupId,
+      onLayout
+    } = committedValuesRef.current;
+    const {
       layout: prevLayout,
-      onLayout,
       panelDataArray
-    } = committedValuesRef.current;
+    } = eagerValuesRef.current;
     const index = panelDataArray.indexOf(panelData);
     if (index >= 0) {
       panelDataArray.splice(index, 1);
@@ -1758,7 +1784,7 @@ function PanelGroupWithForwardedRef({
       const {
         pendingPanelIds
       } = unregisterPanelRef.current;
-      panelIdToLastNotifiedMixedSizesMapRef.current;
+      const map = panelIdToLastNotifiedMixedSizesMapRef.current;
 
       // TRICKY
       // Strict effects mode
@@ -1774,7 +1800,7 @@ function PanelGroupWithForwardedRef({
           // 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];
+          delete map[panelData.id];
         }
       });
       if (!unmountDueToStrictMode) {
@@ -1799,7 +1825,7 @@ function PanelGroupWithForwardedRef({
       });
       if (!areEqual(prevLayout, nextLayout)) {
         setLayout(nextLayout);
-        committedValuesRef.current.layout = nextLayout;
+        eagerValuesRef.current.layout = nextLayout;
         if (onLayout) {
           onLayout(nextLayout.map(sizePercentage => ({
             sizePercentage,

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

@@ -619,6 +619,7 @@ function getResizeHandlePanelIds(groupId, handleId, panelsArray) {
 
 function useWindowSplitterPanelGroupBehavior({
   committedValuesRef,
+  eagerValuesRef,
   groupId,
   layout,
   panelDataArray,
@@ -630,7 +631,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);
@@ -688,7 +689,7 @@ function useWindowSplitterPanelGroupBehavior({
     return () => {
       cleanupFunctions.forEach(cleanupFunction => cleanupFunction());
     };
-  }, [committedValuesRef, groupId, layout, panelDataArray, setLayout]);
+  }, [committedValuesRef, eagerValuesRef, groupId, layout, panelDataArray, setLayout]);
 }
 
 function areEqual(arrayA, arrayB) {
@@ -1230,11 +1231,13 @@ function PanelGroupWithForwardedRef({
     id: groupId,
     keyboardResizeByPercentage,
     keyboardResizeByPixels,
-    layout,
     onLayout,
-    panelDataArray: [],
     storage
   });
+  const eagerValuesRef = useRef({
+    layout,
+    panelDataArray: []
+  });
   const devWarningsRef = useRef({
     didLogIdAndOrderWarning: false,
     didLogPanelConstraintsWarning: false,
@@ -1244,9 +1247,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 {
@@ -1258,10 +1263,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({
@@ -1271,7 +1278,7 @@ function PanelGroupWithForwardedRef({
       });
       if (!areEqual(prevLayout, safeLayout)) {
         setLayout(safeLayout);
-        committedValuesRef.current.layout = safeLayout;
+        eagerValuesRef.current.layout = safeLayout;
         if (onLayout) {
           onLayout(safeLayout.map(sizePercentage => ({
             sizePercentage,
@@ -1285,15 +1292,16 @@ function PanelGroupWithForwardedRef({
 
   useWindowSplitterPanelGroupBehavior({
     committedValuesRef,
+    eagerValuesRef,
     groupId,
     layout,
-    panelDataArray: committedValuesRef.current.panelDataArray,
+    panelDataArray: eagerValuesRef.current.panelDataArray,
     setLayout
   });
   useEffect(() => {
     const {
       panelDataArray
-    } = committedValuesRef.current;
+    } = eagerValuesRef.current;
 
     // If this panel has been configured to persist sizing information, save sizes to local storage.
     if (autoSaveId) {
@@ -1314,7 +1322,7 @@ function PanelGroupWithForwardedRef({
     {
       const {
         panelDataArray
-      } = committedValuesRef.current;
+      } = eagerValuesRef.current;
       const {
         didLogIdAndOrderWarning,
         didLogPanelConstraintsWarning,
@@ -1357,11 +1365,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;
+    } = eagerValuesRef.current;
     if (panelData.constraints.collapsible) {
       const panelConstraintsArray = panelDataArray.map(panelData => panelData.constraints);
       const {
@@ -1386,7 +1396,7 @@ function PanelGroupWithForwardedRef({
         });
         if (!compareLayouts(prevLayout, nextLayout)) {
           setLayout(nextLayout);
-          committedValuesRef.current.layout = nextLayout;
+          eagerValuesRef.current.layout = nextLayout;
           if (onLayout) {
             onLayout(nextLayout.map(sizePercentage => ({
               sizePercentage,
@@ -1401,11 +1411,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;
+    } = eagerValuesRef.current;
     if (panelData.constraints.collapsible) {
       const panelConstraintsArray = panelDataArray.map(panelData => panelData.constraints);
       const {
@@ -1431,7 +1443,7 @@ function PanelGroupWithForwardedRef({
         });
         if (!compareLayouts(prevLayout, nextLayout)) {
           setLayout(nextLayout);
-          committedValuesRef.current.layout = nextLayout;
+          eagerValuesRef.current.layout = nextLayout;
           if (onLayout) {
             onLayout(nextLayout.map(sizePercentage => ({
               sizePercentage,
@@ -1449,7 +1461,7 @@ function PanelGroupWithForwardedRef({
     const {
       layout,
       panelDataArray
-    } = committedValuesRef.current;
+    } = eagerValuesRef.current;
     const {
       panelSizePercentage,
       panelSizePixels
@@ -1464,7 +1476,7 @@ function PanelGroupWithForwardedRef({
   const getPanelStyle = useCallback(panelData => {
     const {
       panelDataArray
-    } = committedValuesRef.current;
+    } = eagerValuesRef.current;
     const panelIndex = panelDataArray.indexOf(panelData);
     return computePanelFlexBoxStyle({
       dragState,
@@ -1479,7 +1491,7 @@ function PanelGroupWithForwardedRef({
     const {
       layout,
       panelDataArray
-    } = committedValuesRef.current;
+    } = eagerValuesRef.current;
     const {
       collapsedSizePercentage,
       collapsible,
@@ -1493,7 +1505,7 @@ function PanelGroupWithForwardedRef({
     const {
       layout,
       panelDataArray
-    } = committedValuesRef.current;
+    } = eagerValuesRef.current;
     const {
       collapsedSizePercentage,
       collapsible,
@@ -1505,11 +1517,13 @@ function PanelGroupWithForwardedRef({
     const {
       autoSaveId,
       id: groupId,
-      layout: prevLayout,
       onLayout,
-      panelDataArray,
       storage
     } = committedValuesRef.current;
+    const {
+      layout: prevLayout,
+      panelDataArray
+    } = eagerValuesRef.current;
     panelDataArray.push(panelData);
     panelDataArray.sort((panelA, panelB) => {
       const orderA = panelA.order;
@@ -1561,9 +1575,13 @@ function PanelGroupWithForwardedRef({
       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)) {
-      setLayout(nextLayout);
-      committedValuesRef.current.layout = nextLayout;
       if (onLayout) {
         onLayout(nextLayout.map(sizePercentage => ({
           sizePercentage,
@@ -1582,10 +1600,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 : {};
@@ -1641,7 +1661,7 @@ function PanelGroupWithForwardedRef({
       }
       if (layoutChanged) {
         setLayout(nextLayout);
-        committedValuesRef.current.layout = nextLayout;
+        eagerValuesRef.current.layout = nextLayout;
         if (onLayout) {
           onLayout(nextLayout.map(sizePercentage => ({
             sizePercentage,
@@ -1655,11 +1675,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;
+    } = eagerValuesRef.current;
     const panelConstraintsArray = panelDataArray.map(panelData => panelData.constraints);
     const {
       groupSizePixels,
@@ -1679,7 +1701,7 @@ function PanelGroupWithForwardedRef({
     });
     if (!compareLayouts(prevLayout, nextLayout)) {
       setLayout(nextLayout);
-      committedValuesRef.current.layout = nextLayout;
+      eagerValuesRef.current.layout = nextLayout;
       if (onLayout) {
         onLayout(nextLayout.map(sizePercentage => ({
           sizePercentage,
@@ -1691,9 +1713,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({
@@ -1714,10 +1738,12 @@ function PanelGroupWithForwardedRef({
   const unregisterPanel = useCallback(panelData => {
     const {
       id: groupId,
+      onLayout
+    } = committedValuesRef.current;
+    const {
       layout: prevLayout,
-      onLayout,
       panelDataArray
-    } = committedValuesRef.current;
+    } = eagerValuesRef.current;
     const index = panelDataArray.indexOf(panelData);
     if (index >= 0) {
       panelDataArray.splice(index, 1);
@@ -1734,7 +1760,7 @@ function PanelGroupWithForwardedRef({
       const {
         pendingPanelIds
       } = unregisterPanelRef.current;
-      panelIdToLastNotifiedMixedSizesMapRef.current;
+      const map = panelIdToLastNotifiedMixedSizesMapRef.current;
 
       // TRICKY
       // Strict effects mode
@@ -1750,7 +1776,7 @@ function PanelGroupWithForwardedRef({
           // 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];
+          delete map[panelData.id];
         }
       });
       if (!unmountDueToStrictMode) {
@@ -1775,7 +1801,7 @@ function PanelGroupWithForwardedRef({
       });
       if (!areEqual(prevLayout, nextLayout)) {
         setLayout(nextLayout);
-        committedValuesRef.current.layout = nextLayout;
+        eagerValuesRef.current.layout = nextLayout;
         if (onLayout) {
           onLayout(nextLayout.map(sizePercentage => ({
             sizePercentage,