react-resizable-panels 0.0.58 → 0.0.59

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

@@ -211,8 +211,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;
 }
@@ -290,6 +288,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));
@@ -773,15 +773,10 @@ function useWindowSplitterPanelGroupBehavior({
   }, [groupId, layout, panelDataArray]);
   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");
@@ -801,21 +796,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),
@@ -1371,6 +1364,7 @@ function PanelGroupWithForwardedRef({
   const panelIdToLastNotifiedMixedSizesMapRef = useRef({});
   const panelSizeBeforeCollapseRef = useRef(new Map());
   const prevDeltaRef = useRef(0);
+  const [imperativeApiQueue, setImperativeApiQueue] = useState([]);
   const committedValuesRef = useRef({
     direction,
     dragState,
@@ -1479,8 +1473,12 @@ function PanelGroupWithForwardedRef({
     }
     const groupSizePixels = calculateAvailablePanelSizeInPixels(groupId);
     if (groupSizePixels <= 0) {
-      // Wait until the group has rendered a non-zero size before computing layout.
-      return;
+      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({
@@ -1600,6 +1598,17 @@ function PanelGroupWithForwardedRef({
       onLayout,
       panelDataArray
     } = committedValuesRef.current;
+
+    // See issues/211
+    if (panelDataArray.find(({
+      id
+    }) => id === panelData.id) == null) {
+      setImperativeApiQueue(prev => [...prev, {
+        panelData,
+        type: "collapse"
+      }]);
+      return;
+    }
     if (panelData.constraints.collapsible) {
       const panelConstraintsArray = panelDataArray.map(panelData => panelData.constraints);
       const {
@@ -1643,6 +1652,17 @@ function PanelGroupWithForwardedRef({
       onLayout,
       panelDataArray
     } = committedValuesRef.current;
+
+    // See issues/211
+    if (panelDataArray.find(({
+      id
+    }) => id === panelData.id) == null) {
+      setImperativeApiQueue(prev => [...prev, {
+        panelData,
+        type: "expand"
+      }]);
+      return;
+    }
     if (panelData.constraints.collapsible) {
       const panelConstraintsArray = panelDataArray.map(panelData => panelData.constraints);
       const {
@@ -1838,6 +1858,18 @@ function PanelGroupWithForwardedRef({
       onLayout,
       panelDataArray
     } = committedValuesRef.current;
+
+    // See issues/211
+    if (panelDataArray.find(({
+      id
+    }) => id === panelData.id) == null) {
+      setImperativeApiQueue(prev => [...prev, {
+        panelData,
+        mixedSizes,
+        type: "resize"
+      }]);
+      return;
+    }
     const panelConstraintsArray = panelDataArray.map(panelData => panelData.constraints);
     const {
       groupSizePixels,
@@ -1895,6 +1927,31 @@ function PanelGroupWithForwardedRef({
       return 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;
+          }
+      }
+    }
+  }, [collapsePanel, expandPanel, imperativeApiQueue, layout, panelDataArray, resizePanel]);
   const context = useMemo(() => ({
     collapsePanel,
     direction,

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

@@ -187,8 +187,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;
 }
@@ -266,6 +264,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));
@@ -749,15 +749,10 @@ function useWindowSplitterPanelGroupBehavior({
   }, [groupId, layout, panelDataArray]);
   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");
@@ -777,21 +772,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),
@@ -1347,6 +1340,7 @@ function PanelGroupWithForwardedRef({
   const panelIdToLastNotifiedMixedSizesMapRef = useRef({});
   const panelSizeBeforeCollapseRef = useRef(new Map());
   const prevDeltaRef = useRef(0);
+  const [imperativeApiQueue, setImperativeApiQueue] = useState([]);
   const committedValuesRef = useRef({
     direction,
     dragState,
@@ -1455,8 +1449,12 @@ function PanelGroupWithForwardedRef({
     }
     const groupSizePixels = calculateAvailablePanelSizeInPixels(groupId);
     if (groupSizePixels <= 0) {
-      // Wait until the group has rendered a non-zero size before computing layout.
-      return;
+      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({
@@ -1576,6 +1574,17 @@ function PanelGroupWithForwardedRef({
       onLayout,
       panelDataArray
     } = committedValuesRef.current;
+
+    // See issues/211
+    if (panelDataArray.find(({
+      id
+    }) => id === panelData.id) == null) {
+      setImperativeApiQueue(prev => [...prev, {
+        panelData,
+        type: "collapse"
+      }]);
+      return;
+    }
     if (panelData.constraints.collapsible) {
       const panelConstraintsArray = panelDataArray.map(panelData => panelData.constraints);
       const {
@@ -1619,6 +1628,17 @@ function PanelGroupWithForwardedRef({
       onLayout,
       panelDataArray
     } = committedValuesRef.current;
+
+    // See issues/211
+    if (panelDataArray.find(({
+      id
+    }) => id === panelData.id) == null) {
+      setImperativeApiQueue(prev => [...prev, {
+        panelData,
+        type: "expand"
+      }]);
+      return;
+    }
     if (panelData.constraints.collapsible) {
       const panelConstraintsArray = panelDataArray.map(panelData => panelData.constraints);
       const {
@@ -1814,6 +1834,18 @@ function PanelGroupWithForwardedRef({
       onLayout,
       panelDataArray
     } = committedValuesRef.current;
+
+    // See issues/211
+    if (panelDataArray.find(({
+      id
+    }) => id === panelData.id) == null) {
+      setImperativeApiQueue(prev => [...prev, {
+        panelData,
+        mixedSizes,
+        type: "resize"
+      }]);
+      return;
+    }
     const panelConstraintsArray = panelDataArray.map(panelData => panelData.constraints);
     const {
       groupSizePixels,
@@ -1871,6 +1903,31 @@ function PanelGroupWithForwardedRef({
       return 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;
+          }
+      }
+    }
+  }, [collapsePanel, expandPanel, imperativeApiQueue, layout, panelDataArray, resizePanel]);
   const context = useMemo(() => ({
     collapsePanel,
     direction,

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

@@ -179,8 +179,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;
 }
@@ -258,6 +256,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));
@@ -651,15 +651,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");
@@ -679,21 +674,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),
@@ -1196,6 +1189,7 @@ function PanelGroupWithForwardedRef({
   const panelIdToLastNotifiedMixedSizesMapRef = useRef({});
   const panelSizeBeforeCollapseRef = useRef(new Map());
   const prevDeltaRef = useRef(0);
+  const [imperativeApiQueue, setImperativeApiQueue] = useState([]);
   const committedValuesRef = useRef({
     direction,
     dragState,
@@ -1327,6 +1321,17 @@ function PanelGroupWithForwardedRef({
       onLayout,
       panelDataArray
     } = committedValuesRef.current;
+
+    // See issues/211
+    if (panelDataArray.find(({
+      id
+    }) => id === panelData.id) == null) {
+      setImperativeApiQueue(prev => [...prev, {
+        panelData,
+        type: "collapse"
+      }]);
+      return;
+    }
     if (panelData.constraints.collapsible) {
       const panelConstraintsArray = panelDataArray.map(panelData => panelData.constraints);
       const {
@@ -1370,6 +1375,17 @@ function PanelGroupWithForwardedRef({
       onLayout,
       panelDataArray
     } = committedValuesRef.current;
+
+    // See issues/211
+    if (panelDataArray.find(({
+      id
+    }) => id === panelData.id) == null) {
+      setImperativeApiQueue(prev => [...prev, {
+        panelData,
+        type: "expand"
+      }]);
+      return;
+    }
     if (panelData.constraints.collapsible) {
       const panelConstraintsArray = panelDataArray.map(panelData => panelData.constraints);
       const {
@@ -1565,6 +1581,18 @@ function PanelGroupWithForwardedRef({
       onLayout,
       panelDataArray
     } = committedValuesRef.current;
+
+    // See issues/211
+    if (panelDataArray.find(({
+      id
+    }) => id === panelData.id) == null) {
+      setImperativeApiQueue(prev => [...prev, {
+        panelData,
+        mixedSizes,
+        type: "resize"
+      }]);
+      return;
+    }
     const panelConstraintsArray = panelDataArray.map(panelData => panelData.constraints);
     const {
       groupSizePixels,

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

@@ -155,8 +155,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;
 }
@@ -234,6 +232,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));
@@ -627,15 +627,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");
@@ -655,21 +650,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),
@@ -1172,6 +1165,7 @@ function PanelGroupWithForwardedRef({
   const panelIdToLastNotifiedMixedSizesMapRef = useRef({});
   const panelSizeBeforeCollapseRef = useRef(new Map());
   const prevDeltaRef = useRef(0);
+  const [imperativeApiQueue, setImperativeApiQueue] = useState([]);
   const committedValuesRef = useRef({
     direction,
     dragState,
@@ -1303,6 +1297,17 @@ function PanelGroupWithForwardedRef({
       onLayout,
       panelDataArray
     } = committedValuesRef.current;
+
+    // See issues/211
+    if (panelDataArray.find(({
+      id
+    }) => id === panelData.id) == null) {
+      setImperativeApiQueue(prev => [...prev, {
+        panelData,
+        type: "collapse"
+      }]);
+      return;
+    }
     if (panelData.constraints.collapsible) {
       const panelConstraintsArray = panelDataArray.map(panelData => panelData.constraints);
       const {
@@ -1346,6 +1351,17 @@ function PanelGroupWithForwardedRef({
       onLayout,
       panelDataArray
     } = committedValuesRef.current;
+
+    // See issues/211
+    if (panelDataArray.find(({
+      id
+    }) => id === panelData.id) == null) {
+      setImperativeApiQueue(prev => [...prev, {
+        panelData,
+        type: "expand"
+      }]);
+      return;
+    }
     if (panelData.constraints.collapsible) {
       const panelConstraintsArray = panelDataArray.map(panelData => panelData.constraints);
       const {
@@ -1541,6 +1557,18 @@ function PanelGroupWithForwardedRef({
       onLayout,
       panelDataArray
     } = committedValuesRef.current;
+
+    // See issues/211
+    if (panelDataArray.find(({
+      id
+    }) => id === panelData.id) == null) {
+      setImperativeApiQueue(prev => [...prev, {
+        panelData,
+        mixedSizes,
+        type: "resize"
+      }]);
+      return;
+    }
     const panelConstraintsArray = panelDataArray.map(panelData => panelData.constraints);
     const {
       groupSizePixels,