react-resizable-panels 0.0.58 → 0.0.59

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

@@ -168,8 +168,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;
 }
@@ -247,6 +245,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));
@@ -640,15 +640,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");
@@ -668,21 +663,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),
@@ -1108,6 +1101,7 @@ function PanelGroupWithForwardedRef({
   const panelIdToLastNotifiedMixedSizesMapRef = useRef({});
   const panelSizeBeforeCollapseRef = useRef(new Map());
   const prevDeltaRef = useRef(0);
+  const [imperativeApiQueue, setImperativeApiQueue] = useState([]);
   const committedValuesRef = useRef({
     direction,
     dragState,
@@ -1197,6 +1191,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 {
@@ -1240,6 +1245,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 {
@@ -1435,6 +1451,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.node.esm.js

@@ -144,8 +144,6 @@ const Panel = forwardRef((props, ref) => createElement(PanelWithForwardedRef, {
 PanelWithForwardedRef.displayName = "Panel";
 Panel.displayName = "forwardRef(Panel)";
 
-const PRECISION = 10;
-
 function convertPixelsToPercentage(pixels, groupSizePixels) {
   return pixels / groupSizePixels * 100;
 }
@@ -223,6 +221,8 @@ function computePercentagePanelConstraints(panelConstraintsArray, panelIndex, gr
   };
 }
 
+const PRECISION = 10;
+
 function fuzzyCompareNumbers(actual, expected, fractionDigits = PRECISION) {
   actual = parseFloat(actual.toFixed(fractionDigits));
   expected = parseFloat(expected.toFixed(fractionDigits));
@@ -616,15 +616,10 @@ function useWindowSplitterPanelGroupBehavior({
   });
   useEffect(() => {
     const {
-      direction,
       panelDataArray
     } = committedValuesRef.current;
     const groupElement = getPanelGroupElement(groupId);
     assert(groupElement != null, `No group found for id "${groupId}"`);
-    const {
-      height,
-      width
-    } = groupElement.getBoundingClientRect();
     const handles = getResizeHandleElementsForGroup(groupId);
     const cleanupFunctions = handles.map(handle => {
       const handleId = handle.getAttribute("data-panel-resize-handle-id");
@@ -644,21 +639,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),
@@ -1084,6 +1077,7 @@ function PanelGroupWithForwardedRef({
   const panelIdToLastNotifiedMixedSizesMapRef = useRef({});
   const panelSizeBeforeCollapseRef = useRef(new Map());
   const prevDeltaRef = useRef(0);
+  const [imperativeApiQueue, setImperativeApiQueue] = useState([]);
   const committedValuesRef = useRef({
     direction,
     dragState,
@@ -1173,6 +1167,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 {
@@ -1216,6 +1221,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 {
@@ -1411,6 +1427,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/package.json

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

package/src/PanelGroup.ts

@@ -83,6 +83,12 @@ export type PanelGroupProps = PropsWithChildren<{
   tagName?: ElementType;
 }>;
 
+type ImperativeApiQueue = {
+  type: "collapse" | "expand" | "resize";
+  mixedSizes?: Partial<MixedSizes>;
+  panelData: PanelData;
+};
+
 const debounceMap: {
   [key: string]: typeof savePanelGroupLayout;
 } = {};
@@ -116,6 +122,10 @@ function PanelGroupWithForwardedRef({
   const panelSizeBeforeCollapseRef = useRef<Map<string, number>>(new Map());
   const prevDeltaRef = useRef<number>(0);
 
+  const [imperativeApiQueue, setImperativeApiQueue] = useState<
+    ImperativeApiQueue[]
+  >([]);
+
   const committedValuesRef = useRef<{
     direction: Direction;
     dragState: DragState | null;
@@ -269,8 +279,14 @@ 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) {
@@ -442,6 +458,18 @@ function PanelGroupWithForwardedRef({
         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
@@ -514,6 +542,18 @@ function PanelGroupWithForwardedRef({
         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
@@ -780,6 +820,19 @@ function PanelGroupWithForwardedRef({
         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
       );
@@ -873,6 +926,35 @@ function PanelGroupWithForwardedRef({
     });
   }, []);
 
+  // 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,

package/src/hooks/useWindowSplitterPanelGroupBehavior.ts

@@ -1,6 +1,5 @@
 import { isDevelopment } from "#is-development";
 import { PanelData } from "../Panel";
-import { PRECISION } from "../constants";
 import { Direction } from "../types";
 import { adjustLayoutByDelta } from "../utils/adjustLayoutByDelta";
 import { assert } from "../utils/assert";
@@ -12,6 +11,7 @@ import { getPanelGroupElement } from "../utils/dom/getPanelGroupElement";
 import { getResizeHandleElementsForGroup } from "../utils/dom/getResizeHandleElementsForGroup";
 import { getResizeHandlePanelIds } from "../utils/dom/getResizeHandlePanelIds";
 import { getPercentageSizeFromMixedSizes } from "../utils/getPercentageSizeFromMixedSizes";
+import { fuzzyNumbersEqual } from "../utils/numbers/fuzzyNumbersEqual";
 import { RefObject, useEffect, useRef } from "../vendor/react";
 import useIsomorphicLayoutEffect from "./useIsomorphicEffect";
 
@@ -95,13 +95,11 @@ export function useWindowSplitterPanelGroupBehavior({
   }, [groupId, layout, panelDataArray]);
 
   useEffect(() => {
-    const { direction, panelDataArray } = committedValuesRef.current!;
+    const { 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")!;
@@ -130,9 +128,18 @@ export function useWindowSplitterPanelGroupBehavior({
             if (index >= 0) {
               const panelData = panelDataArray[index];
               const size = layout[index];
-              if (size != null) {
+              if (size != null && panelData.constraints.collapsible) {
                 const groupSizePixels = getAvailableGroupSizePixels(groupId);
 
+                const collapsedSize =
+                  getPercentageSizeFromMixedSizes(
+                    {
+                      sizePercentage:
+                        panelData.constraints.collapsedSizePercentage,
+                      sizePixels: panelData.constraints.collapsedSizePixels,
+                    },
+                    groupSizePixels
+                  ) ?? 0;
                 const minSize =
                   getPercentageSizeFromMixedSizes(
                     {
@@ -142,17 +149,10 @@ export function useWindowSplitterPanelGroupBehavior({
                     groupSizePixels
                   ) ?? 0;
 
-                let delta = 0;
-                if (
-                  size.toPrecision(PRECISION) <= minSize.toPrecision(PRECISION)
-                ) {
-                  delta = direction === "horizontal" ? width : height;
-                } else {
-                  delta = -(direction === "horizontal" ? width : height);
-                }
-
                 const nextLayout = adjustLayoutByDelta({
-                  delta,
+                  delta: fuzzyNumbersEqual(size, collapsedSize)
+                    ? minSize - collapsedSize
+                    : collapsedSize - size,
                   groupSizePixels,
                   layout,
                   panelConstraints: panelDataArray.map(