react-resizable-panels 2.0.14 → 2.0.16

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 2.0.16
+
+- Replaced `.toPrecision()` with `.toFixed()` to avoid undesirable layout shift (#323)
+
+## 2.0.15
+
+- Better account for high-precision sizes with `onCollapse` and `onExpand` callbacks (#325)
+
 ## 2.0.14
 
 - Better account for high-precision `collapsedSize` values (#325)

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

@@ -900,7 +900,7 @@ function adjustLayoutByDelta({
       if (!fuzzyNumbersEqual(prevSize, safeSize)) {
         deltaApplied += prevSize - safeSize;
         nextLayout[index] = safeSize;
-        if (deltaApplied.toPrecision(3).localeCompare(Math.abs(delta).toPrecision(3), undefined, {
+        if (deltaApplied.toFixed(3).localeCompare(Math.abs(delta).toFixed(3), undefined, {
           numeric: true
         }) >= 0) {
           break;
@@ -1340,10 +1340,10 @@ function callPanelCallbacks(panelsArray, layout, panelIdToLastNotifiedSizeMap) {
         onResize(size, lastNotifiedSize);
       }
       if (collapsible && (onCollapse || onExpand)) {
-        if (onExpand && (lastNotifiedSize == null || lastNotifiedSize === collapsedSize) && size !== collapsedSize) {
+        if (onExpand && (lastNotifiedSize == null || fuzzyNumbersEqual$1(lastNotifiedSize, collapsedSize)) && !fuzzyNumbersEqual$1(size, collapsedSize)) {
           onExpand();
         }
-        if (onCollapse && (lastNotifiedSize == null || lastNotifiedSize !== collapsedSize) && size === collapsedSize) {
+        if (onCollapse && (lastNotifiedSize == null || !fuzzyNumbersEqual$1(lastNotifiedSize, collapsedSize)) && fuzzyNumbersEqual$1(size, collapsedSize)) {
           onCollapse();
         }
       }
@@ -1380,12 +1380,12 @@ function computePanelFlexBoxStyle({
   if (size == null) {
     // Initial render (before panels have registered themselves)
     // In order to support server rendering, fall back to default size if provided
-    flexGrow = defaultSize != undefined ? defaultSize.toPrecision(precision) : "1";
+    flexGrow = defaultSize != undefined ? defaultSize.toFixed(precision) : "1";
   } else if (panelData.length === 1) {
     // Special case: Single panel group should always fill full width/height
     flexGrow = "1";
   } else {
-    flexGrow = size.toPrecision(precision);
+    flexGrow = size.toFixed(precision);
   }
   return {
     flexBasis: 0,

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

@@ -906,7 +906,7 @@ function adjustLayoutByDelta({
       if (!fuzzyNumbersEqual(prevSize, safeSize)) {
         deltaApplied += prevSize - safeSize;
         nextLayout[index] = safeSize;
-        if (deltaApplied.toPrecision(3).localeCompare(Math.abs(delta).toPrecision(3), undefined, {
+        if (deltaApplied.toFixed(3).localeCompare(Math.abs(delta).toFixed(3), undefined, {
           numeric: true
         }) >= 0) {
           break;
@@ -1356,10 +1356,10 @@ function callPanelCallbacks(panelsArray, layout, panelIdToLastNotifiedSizeMap) {
         onResize(size, lastNotifiedSize);
       }
       if (collapsible && (onCollapse || onExpand)) {
-        if (onExpand && (lastNotifiedSize == null || lastNotifiedSize === collapsedSize) && size !== collapsedSize) {
+        if (onExpand && (lastNotifiedSize == null || fuzzyNumbersEqual$1(lastNotifiedSize, collapsedSize)) && !fuzzyNumbersEqual$1(size, collapsedSize)) {
           onExpand();
         }
-        if (onCollapse && (lastNotifiedSize == null || lastNotifiedSize !== collapsedSize) && size === collapsedSize) {
+        if (onCollapse && (lastNotifiedSize == null || !fuzzyNumbersEqual$1(lastNotifiedSize, collapsedSize)) && fuzzyNumbersEqual$1(size, collapsedSize)) {
           onCollapse();
         }
       }
@@ -1396,12 +1396,12 @@ function computePanelFlexBoxStyle({
   if (size == null) {
     // Initial render (before panels have registered themselves)
     // In order to support server rendering, fall back to default size if provided
-    flexGrow = defaultSize != undefined ? defaultSize.toPrecision(precision) : "1";
+    flexGrow = defaultSize != undefined ? defaultSize.toFixed(precision) : "1";
   } else if (panelData.length === 1) {
     // Special case: Single panel group should always fill full width/height
     flexGrow = "1";
   } else {
-    flexGrow = size.toPrecision(precision);
+    flexGrow = size.toFixed(precision);
   }
   return {
     flexBasis: 0,

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

@@ -882,7 +882,7 @@ function adjustLayoutByDelta({
       if (!fuzzyNumbersEqual(prevSize, safeSize)) {
         deltaApplied += prevSize - safeSize;
         nextLayout[index] = safeSize;
-        if (deltaApplied.toPrecision(3).localeCompare(Math.abs(delta).toPrecision(3), undefined, {
+        if (deltaApplied.toFixed(3).localeCompare(Math.abs(delta).toFixed(3), undefined, {
           numeric: true
         }) >= 0) {
           break;
@@ -1332,10 +1332,10 @@ function callPanelCallbacks(panelsArray, layout, panelIdToLastNotifiedSizeMap) {
         onResize(size, lastNotifiedSize);
       }
       if (collapsible && (onCollapse || onExpand)) {
-        if (onExpand && (lastNotifiedSize == null || lastNotifiedSize === collapsedSize) && size !== collapsedSize) {
+        if (onExpand && (lastNotifiedSize == null || fuzzyNumbersEqual$1(lastNotifiedSize, collapsedSize)) && !fuzzyNumbersEqual$1(size, collapsedSize)) {
           onExpand();
         }
-        if (onCollapse && (lastNotifiedSize == null || lastNotifiedSize !== collapsedSize) && size === collapsedSize) {
+        if (onCollapse && (lastNotifiedSize == null || !fuzzyNumbersEqual$1(lastNotifiedSize, collapsedSize)) && fuzzyNumbersEqual$1(size, collapsedSize)) {
           onCollapse();
         }
       }
@@ -1372,12 +1372,12 @@ function computePanelFlexBoxStyle({
   if (size == null) {
     // Initial render (before panels have registered themselves)
     // In order to support server rendering, fall back to default size if provided
-    flexGrow = defaultSize != undefined ? defaultSize.toPrecision(precision) : "1";
+    flexGrow = defaultSize != undefined ? defaultSize.toFixed(precision) : "1";
   } else if (panelData.length === 1) {
     // Special case: Single panel group should always fill full width/height
     flexGrow = "1";
   } else {
-    flexGrow = size.toPrecision(precision);
+    flexGrow = size.toFixed(precision);
   }
   return {
     flexBasis: 0,

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

@@ -876,7 +876,7 @@ function adjustLayoutByDelta({
       if (!fuzzyNumbersEqual(prevSize, safeSize)) {
         deltaApplied += prevSize - safeSize;
         nextLayout[index] = safeSize;
-        if (deltaApplied.toPrecision(3).localeCompare(Math.abs(delta).toPrecision(3), undefined, {
+        if (deltaApplied.toFixed(3).localeCompare(Math.abs(delta).toFixed(3), undefined, {
           numeric: true
         }) >= 0) {
           break;
@@ -1316,10 +1316,10 @@ function callPanelCallbacks(panelsArray, layout, panelIdToLastNotifiedSizeMap) {
         onResize(size, lastNotifiedSize);
       }
       if (collapsible && (onCollapse || onExpand)) {
-        if (onExpand && (lastNotifiedSize == null || lastNotifiedSize === collapsedSize) && size !== collapsedSize) {
+        if (onExpand && (lastNotifiedSize == null || fuzzyNumbersEqual$1(lastNotifiedSize, collapsedSize)) && !fuzzyNumbersEqual$1(size, collapsedSize)) {
           onExpand();
         }
-        if (onCollapse && (lastNotifiedSize == null || lastNotifiedSize !== collapsedSize) && size === collapsedSize) {
+        if (onCollapse && (lastNotifiedSize == null || !fuzzyNumbersEqual$1(lastNotifiedSize, collapsedSize)) && fuzzyNumbersEqual$1(size, collapsedSize)) {
           onCollapse();
         }
       }
@@ -1356,12 +1356,12 @@ function computePanelFlexBoxStyle({
   if (size == null) {
     // Initial render (before panels have registered themselves)
     // In order to support server rendering, fall back to default size if provided
-    flexGrow = defaultSize != undefined ? defaultSize.toPrecision(precision) : "1";
+    flexGrow = defaultSize != undefined ? defaultSize.toFixed(precision) : "1";
   } else if (panelData.length === 1) {
     // Special case: Single panel group should always fill full width/height
     flexGrow = "1";
   } else {
-    flexGrow = size.toPrecision(precision);
+    flexGrow = size.toFixed(precision);
   }
   return {
     flexBasis: 0,

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

@@ -902,7 +902,7 @@ function adjustLayoutByDelta({
       if (!fuzzyNumbersEqual(prevSize, safeSize)) {
         deltaApplied += prevSize - safeSize;
         nextLayout[index] = safeSize;
-        if (deltaApplied.toPrecision(3).localeCompare(Math.abs(delta).toPrecision(3), undefined, {
+        if (deltaApplied.toFixed(3).localeCompare(Math.abs(delta).toFixed(3), undefined, {
           numeric: true
         }) >= 0) {
           break;
@@ -1342,10 +1342,10 @@ function callPanelCallbacks(panelsArray, layout, panelIdToLastNotifiedSizeMap) {
         onResize(size, lastNotifiedSize);
       }
       if (collapsible && (onCollapse || onExpand)) {
-        if (onExpand && (lastNotifiedSize == null || lastNotifiedSize === collapsedSize) && size !== collapsedSize) {
+        if (onExpand && (lastNotifiedSize == null || fuzzyNumbersEqual$1(lastNotifiedSize, collapsedSize)) && !fuzzyNumbersEqual$1(size, collapsedSize)) {
           onExpand();
         }
-        if (onCollapse && (lastNotifiedSize == null || lastNotifiedSize !== collapsedSize) && size === collapsedSize) {
+        if (onCollapse && (lastNotifiedSize == null || !fuzzyNumbersEqual$1(lastNotifiedSize, collapsedSize)) && fuzzyNumbersEqual$1(size, collapsedSize)) {
           onCollapse();
         }
       }
@@ -1382,12 +1382,12 @@ function computePanelFlexBoxStyle({
   if (size == null) {
     // Initial render (before panels have registered themselves)
     // In order to support server rendering, fall back to default size if provided
-    flexGrow = defaultSize != undefined ? defaultSize.toPrecision(precision) : "1";
+    flexGrow = defaultSize != undefined ? defaultSize.toFixed(precision) : "1";
   } else if (panelData.length === 1) {
     // Special case: Single panel group should always fill full width/height
     flexGrow = "1";
   } else {
-    flexGrow = size.toPrecision(precision);
+    flexGrow = size.toFixed(precision);
   }
   return {
     flexBasis: 0,

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

@@ -913,7 +913,7 @@ function adjustLayoutByDelta({
       if (!fuzzyNumbersEqual(prevSize, safeSize)) {
         deltaApplied += prevSize - safeSize;
         nextLayout[index] = safeSize;
-        if (deltaApplied.toPrecision(3).localeCompare(Math.abs(delta).toPrecision(3), undefined, {
+        if (deltaApplied.toFixed(3).localeCompare(Math.abs(delta).toFixed(3), undefined, {
           numeric: true
         }) >= 0) {
           break;
@@ -1363,10 +1363,10 @@ function callPanelCallbacks(panelsArray, layout, panelIdToLastNotifiedSizeMap) {
         onResize(size, lastNotifiedSize);
       }
       if (collapsible && (onCollapse || onExpand)) {
-        if (onExpand && (lastNotifiedSize == null || lastNotifiedSize === collapsedSize) && size !== collapsedSize) {
+        if (onExpand && (lastNotifiedSize == null || fuzzyNumbersEqual$1(lastNotifiedSize, collapsedSize)) && !fuzzyNumbersEqual$1(size, collapsedSize)) {
           onExpand();
         }
-        if (onCollapse && (lastNotifiedSize == null || lastNotifiedSize !== collapsedSize) && size === collapsedSize) {
+        if (onCollapse && (lastNotifiedSize == null || !fuzzyNumbersEqual$1(lastNotifiedSize, collapsedSize)) && fuzzyNumbersEqual$1(size, collapsedSize)) {
           onCollapse();
         }
       }
@@ -1403,12 +1403,12 @@ function computePanelFlexBoxStyle({
   if (size == null) {
     // Initial render (before panels have registered themselves)
     // In order to support server rendering, fall back to default size if provided
-    flexGrow = defaultSize != undefined ? defaultSize.toPrecision(precision) : "1";
+    flexGrow = defaultSize != undefined ? defaultSize.toFixed(precision) : "1";
   } else if (panelData.length === 1) {
     // Special case: Single panel group should always fill full width/height
     flexGrow = "1";
   } else {
-    flexGrow = size.toPrecision(precision);
+    flexGrow = size.toFixed(precision);
   }
   return {
     flexBasis: 0,

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

@@ -889,7 +889,7 @@ function adjustLayoutByDelta({
       if (!fuzzyNumbersEqual(prevSize, safeSize)) {
         deltaApplied += prevSize - safeSize;
         nextLayout[index] = safeSize;
-        if (deltaApplied.toPrecision(3).localeCompare(Math.abs(delta).toPrecision(3), undefined, {
+        if (deltaApplied.toFixed(3).localeCompare(Math.abs(delta).toFixed(3), undefined, {
           numeric: true
         }) >= 0) {
           break;
@@ -1339,10 +1339,10 @@ function callPanelCallbacks(panelsArray, layout, panelIdToLastNotifiedSizeMap) {
         onResize(size, lastNotifiedSize);
       }
       if (collapsible && (onCollapse || onExpand)) {
-        if (onExpand && (lastNotifiedSize == null || lastNotifiedSize === collapsedSize) && size !== collapsedSize) {
+        if (onExpand && (lastNotifiedSize == null || fuzzyNumbersEqual$1(lastNotifiedSize, collapsedSize)) && !fuzzyNumbersEqual$1(size, collapsedSize)) {
           onExpand();
         }
-        if (onCollapse && (lastNotifiedSize == null || lastNotifiedSize !== collapsedSize) && size === collapsedSize) {
+        if (onCollapse && (lastNotifiedSize == null || !fuzzyNumbersEqual$1(lastNotifiedSize, collapsedSize)) && fuzzyNumbersEqual$1(size, collapsedSize)) {
           onCollapse();
         }
       }
@@ -1379,12 +1379,12 @@ function computePanelFlexBoxStyle({
   if (size == null) {
     // Initial render (before panels have registered themselves)
     // In order to support server rendering, fall back to default size if provided
-    flexGrow = defaultSize != undefined ? defaultSize.toPrecision(precision) : "1";
+    flexGrow = defaultSize != undefined ? defaultSize.toFixed(precision) : "1";
   } else if (panelData.length === 1) {
     // Special case: Single panel group should always fill full width/height
     flexGrow = "1";
   } else {
-    flexGrow = size.toPrecision(precision);
+    flexGrow = size.toFixed(precision);
   }
   return {
     flexBasis: 0,

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

@@ -875,7 +875,7 @@ function adjustLayoutByDelta({
       if (!fuzzyNumbersEqual(prevSize, safeSize)) {
         deltaApplied += prevSize - safeSize;
         nextLayout[index] = safeSize;
-        if (deltaApplied.toPrecision(3).localeCompare(Math.abs(delta).toPrecision(3), undefined, {
+        if (deltaApplied.toFixed(3).localeCompare(Math.abs(delta).toFixed(3), undefined, {
           numeric: true
         }) >= 0) {
           break;
@@ -1201,10 +1201,10 @@ function callPanelCallbacks(panelsArray, layout, panelIdToLastNotifiedSizeMap) {
         onResize(size, lastNotifiedSize);
       }
       if (collapsible && (onCollapse || onExpand)) {
-        if (onExpand && (lastNotifiedSize == null || lastNotifiedSize === collapsedSize) && size !== collapsedSize) {
+        if (onExpand && (lastNotifiedSize == null || fuzzyNumbersEqual$1(lastNotifiedSize, collapsedSize)) && !fuzzyNumbersEqual$1(size, collapsedSize)) {
           onExpand();
         }
-        if (onCollapse && (lastNotifiedSize == null || lastNotifiedSize !== collapsedSize) && size === collapsedSize) {
+        if (onCollapse && (lastNotifiedSize == null || !fuzzyNumbersEqual$1(lastNotifiedSize, collapsedSize)) && fuzzyNumbersEqual$1(size, collapsedSize)) {
           onCollapse();
         }
       }
@@ -1241,12 +1241,12 @@ function computePanelFlexBoxStyle({
   if (size == null) {
     // Initial render (before panels have registered themselves)
     // In order to support server rendering, fall back to default size if provided
-    flexGrow = defaultSize != undefined ? defaultSize.toPrecision(precision) : "1";
+    flexGrow = defaultSize != undefined ? defaultSize.toFixed(precision) : "1";
   } else if (panelData.length === 1) {
     // Special case: Single panel group should always fill full width/height
     flexGrow = "1";
   } else {
-    flexGrow = size.toPrecision(precision);
+    flexGrow = size.toFixed(precision);
   }
   return {
     flexBasis: 0,

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

@@ -851,7 +851,7 @@ function adjustLayoutByDelta({
       if (!fuzzyNumbersEqual(prevSize, safeSize)) {
         deltaApplied += prevSize - safeSize;
         nextLayout[index] = safeSize;
-        if (deltaApplied.toPrecision(3).localeCompare(Math.abs(delta).toPrecision(3), undefined, {
+        if (deltaApplied.toFixed(3).localeCompare(Math.abs(delta).toFixed(3), undefined, {
           numeric: true
         }) >= 0) {
           break;
@@ -1177,10 +1177,10 @@ function callPanelCallbacks(panelsArray, layout, panelIdToLastNotifiedSizeMap) {
         onResize(size, lastNotifiedSize);
       }
       if (collapsible && (onCollapse || onExpand)) {
-        if (onExpand && (lastNotifiedSize == null || lastNotifiedSize === collapsedSize) && size !== collapsedSize) {
+        if (onExpand && (lastNotifiedSize == null || fuzzyNumbersEqual$1(lastNotifiedSize, collapsedSize)) && !fuzzyNumbersEqual$1(size, collapsedSize)) {
           onExpand();
         }
-        if (onCollapse && (lastNotifiedSize == null || lastNotifiedSize !== collapsedSize) && size === collapsedSize) {
+        if (onCollapse && (lastNotifiedSize == null || !fuzzyNumbersEqual$1(lastNotifiedSize, collapsedSize)) && fuzzyNumbersEqual$1(size, collapsedSize)) {
           onCollapse();
         }
       }
@@ -1217,12 +1217,12 @@ function computePanelFlexBoxStyle({
   if (size == null) {
     // Initial render (before panels have registered themselves)
     // In order to support server rendering, fall back to default size if provided
-    flexGrow = defaultSize != undefined ? defaultSize.toPrecision(precision) : "1";
+    flexGrow = defaultSize != undefined ? defaultSize.toFixed(precision) : "1";
   } else if (panelData.length === 1) {
     // Special case: Single panel group should always fill full width/height
     flexGrow = "1";
   } else {
-    flexGrow = size.toPrecision(precision);
+    flexGrow = size.toFixed(precision);
   }
   return {
     flexBasis: 0,

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

@@ -878,7 +878,7 @@ function adjustLayoutByDelta({
       if (!fuzzyNumbersEqual(prevSize, safeSize)) {
         deltaApplied += prevSize - safeSize;
         nextLayout[index] = safeSize;
-        if (deltaApplied.toPrecision(3).localeCompare(Math.abs(delta).toPrecision(3), undefined, {
+        if (deltaApplied.toFixed(3).localeCompare(Math.abs(delta).toFixed(3), undefined, {
           numeric: true
         }) >= 0) {
           break;
@@ -1318,10 +1318,10 @@ function callPanelCallbacks(panelsArray, layout, panelIdToLastNotifiedSizeMap) {
         onResize(size, lastNotifiedSize);
       }
       if (collapsible && (onCollapse || onExpand)) {
-        if (onExpand && (lastNotifiedSize == null || lastNotifiedSize === collapsedSize) && size !== collapsedSize) {
+        if (onExpand && (lastNotifiedSize == null || fuzzyNumbersEqual$1(lastNotifiedSize, collapsedSize)) && !fuzzyNumbersEqual$1(size, collapsedSize)) {
           onExpand();
         }
-        if (onCollapse && (lastNotifiedSize == null || lastNotifiedSize !== collapsedSize) && size === collapsedSize) {
+        if (onCollapse && (lastNotifiedSize == null || !fuzzyNumbersEqual$1(lastNotifiedSize, collapsedSize)) && fuzzyNumbersEqual$1(size, collapsedSize)) {
           onCollapse();
         }
       }
@@ -1358,12 +1358,12 @@ function computePanelFlexBoxStyle({
   if (size == null) {
     // Initial render (before panels have registered themselves)
     // In order to support server rendering, fall back to default size if provided
-    flexGrow = defaultSize != undefined ? defaultSize.toPrecision(precision) : "1";
+    flexGrow = defaultSize != undefined ? defaultSize.toFixed(precision) : "1";
   } else if (panelData.length === 1) {
     // Special case: Single panel group should always fill full width/height
     flexGrow = "1";
   } else {
-    flexGrow = size.toPrecision(precision);
+    flexGrow = size.toFixed(precision);
   }
   return {
     flexBasis: 0,

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

@@ -864,7 +864,7 @@ function adjustLayoutByDelta({
       if (!fuzzyNumbersEqual(prevSize, safeSize)) {
         deltaApplied += prevSize - safeSize;
         nextLayout[index] = safeSize;
-        if (deltaApplied.toPrecision(3).localeCompare(Math.abs(delta).toPrecision(3), undefined, {
+        if (deltaApplied.toFixed(3).localeCompare(Math.abs(delta).toFixed(3), undefined, {
           numeric: true
         }) >= 0) {
           break;
@@ -1190,10 +1190,10 @@ function callPanelCallbacks(panelsArray, layout, panelIdToLastNotifiedSizeMap) {
         onResize(size, lastNotifiedSize);
       }
       if (collapsible && (onCollapse || onExpand)) {
-        if (onExpand && (lastNotifiedSize == null || lastNotifiedSize === collapsedSize) && size !== collapsedSize) {
+        if (onExpand && (lastNotifiedSize == null || fuzzyNumbersEqual$1(lastNotifiedSize, collapsedSize)) && !fuzzyNumbersEqual$1(size, collapsedSize)) {
           onExpand();
         }
-        if (onCollapse && (lastNotifiedSize == null || lastNotifiedSize !== collapsedSize) && size === collapsedSize) {
+        if (onCollapse && (lastNotifiedSize == null || !fuzzyNumbersEqual$1(lastNotifiedSize, collapsedSize)) && fuzzyNumbersEqual$1(size, collapsedSize)) {
           onCollapse();
         }
       }
@@ -1230,12 +1230,12 @@ function computePanelFlexBoxStyle({
   if (size == null) {
     // Initial render (before panels have registered themselves)
     // In order to support server rendering, fall back to default size if provided
-    flexGrow = defaultSize != undefined ? defaultSize.toPrecision(precision) : "1";
+    flexGrow = defaultSize != undefined ? defaultSize.toFixed(precision) : "1";
   } else if (panelData.length === 1) {
     // Special case: Single panel group should always fill full width/height
     flexGrow = "1";
   } else {
-    flexGrow = size.toPrecision(precision);
+    flexGrow = size.toFixed(precision);
   }
   return {
     flexBasis: 0,

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

@@ -840,7 +840,7 @@ function adjustLayoutByDelta({
       if (!fuzzyNumbersEqual(prevSize, safeSize)) {
         deltaApplied += prevSize - safeSize;
         nextLayout[index] = safeSize;
-        if (deltaApplied.toPrecision(3).localeCompare(Math.abs(delta).toPrecision(3), undefined, {
+        if (deltaApplied.toFixed(3).localeCompare(Math.abs(delta).toFixed(3), undefined, {
           numeric: true
         }) >= 0) {
           break;
@@ -1166,10 +1166,10 @@ function callPanelCallbacks(panelsArray, layout, panelIdToLastNotifiedSizeMap) {
         onResize(size, lastNotifiedSize);
       }
       if (collapsible && (onCollapse || onExpand)) {
-        if (onExpand && (lastNotifiedSize == null || lastNotifiedSize === collapsedSize) && size !== collapsedSize) {
+        if (onExpand && (lastNotifiedSize == null || fuzzyNumbersEqual$1(lastNotifiedSize, collapsedSize)) && !fuzzyNumbersEqual$1(size, collapsedSize)) {
           onExpand();
         }
-        if (onCollapse && (lastNotifiedSize == null || lastNotifiedSize !== collapsedSize) && size === collapsedSize) {
+        if (onCollapse && (lastNotifiedSize == null || !fuzzyNumbersEqual$1(lastNotifiedSize, collapsedSize)) && fuzzyNumbersEqual$1(size, collapsedSize)) {
           onCollapse();
         }
       }
@@ -1206,12 +1206,12 @@ function computePanelFlexBoxStyle({
   if (size == null) {
     // Initial render (before panels have registered themselves)
     // In order to support server rendering, fall back to default size if provided
-    flexGrow = defaultSize != undefined ? defaultSize.toPrecision(precision) : "1";
+    flexGrow = defaultSize != undefined ? defaultSize.toFixed(precision) : "1";
   } else if (panelData.length === 1) {
     // Special case: Single panel group should always fill full width/height
     flexGrow = "1";
   } else {
-    flexGrow = size.toPrecision(precision);
+    flexGrow = size.toFixed(precision);
   }
   return {
     flexBasis: 0,

package/package.json

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

package/src/Panel.test.tsx

@@ -545,6 +545,44 @@ describe("PanelGroup", () => {
 
         expect(onCollapse).toHaveBeenCalledTimes(1);
       });
+
+      it("should be called with collapsedSizes that have many decimal places", () => {
+        let onCollapse = jest.fn();
+
+        let panelRef = createRef<ImperativePanelHandle>();
+
+        act(() => {
+          root.render(
+            <PanelGroup direction="horizontal">
+              <Panel
+                collapsible
+                onCollapse={onCollapse}
+                collapsedSize={3.8764385221078133}
+                minSize={10}
+                ref={panelRef}
+              />
+              <PanelResizeHandle />
+              <Panel />
+            </PanelGroup>
+          );
+        });
+        expect(onCollapse).not.toHaveBeenCalled();
+
+        act(() => {
+          panelRef.current?.collapse();
+        });
+        expect(onCollapse).toHaveBeenCalledTimes(1);
+
+        act(() => {
+          panelRef.current?.expand();
+        });
+        expect(onCollapse).toHaveBeenCalledTimes(1);
+
+        act(() => {
+          panelRef.current?.collapse();
+        });
+        expect(onCollapse).toHaveBeenCalledTimes(2);
+      });
     });
 
     describe("onExpand", () => {
@@ -594,6 +632,45 @@ describe("PanelGroup", () => {
 
         expect(onExpand).toHaveBeenCalledTimes(1);
       });
+
+      it("should be called with collapsedSizes that have many decimal places", () => {
+        let onExpand = jest.fn();
+
+        let panelRef = createRef<ImperativePanelHandle>();
+
+        act(() => {
+          root.render(
+            <PanelGroup direction="horizontal">
+              <Panel
+                collapsible
+                collapsedSize={3.8764385221078133}
+                defaultSize={3.8764385221078133}
+                minSize={10}
+                onExpand={onExpand}
+                ref={panelRef}
+              />
+              <PanelResizeHandle />
+              <Panel />
+            </PanelGroup>
+          );
+        });
+        expect(onExpand).not.toHaveBeenCalled();
+
+        act(() => {
+          panelRef.current?.resize(25);
+        });
+        expect(onExpand).toHaveBeenCalledTimes(1);
+
+        act(() => {
+          panelRef.current?.collapse();
+        });
+        expect(onExpand).toHaveBeenCalledTimes(1);
+
+        act(() => {
+          panelRef.current?.expand();
+        });
+        expect(onExpand).toHaveBeenCalledTimes(2);
+      });
     });
 
     describe("onResize", () => {
@@ -723,6 +800,33 @@ describe("PanelGroup", () => {
         expect(onResizeRight).not.toHaveBeenCalled();
       });
     });
+
+    it("should support sizes with many decimal places", () => {
+      let panelRef = createRef<ImperativePanelHandle>();
+      let onResize = jest.fn();
+
+      act(() => {
+        root.render(
+          <PanelGroup direction="horizontal">
+            <Panel onResize={onResize} ref={panelRef} />
+            <PanelResizeHandle />
+            <Panel />
+          </PanelGroup>
+        );
+      });
+      expect(onResize).toHaveBeenCalledTimes(1);
+
+      act(() => {
+        panelRef.current?.resize(3.8764385221078133);
+      });
+      expect(onResize).toHaveBeenCalledTimes(2);
+
+      // An overly-high precision change should be ignored
+      act(() => {
+        panelRef.current?.resize(3.8764385221078132);
+      });
+      expect(onResize).toHaveBeenCalledTimes(2);
+    });
   });
 
   describe("data attributes", () => {

package/src/utils/adjustLayoutByDelta.ts

@@ -200,8 +200,8 @@ export function adjustLayoutByDelta({
 
         if (
           deltaApplied
-            .toPrecision(3)
-            .localeCompare(Math.abs(delta).toPrecision(3), undefined, {
+            .toFixed(3)
+            .localeCompare(Math.abs(delta).toFixed(3), undefined, {
               numeric: true,
             }) >= 0
         ) {

package/src/utils/callPanelCallbacks.ts

@@ -1,5 +1,6 @@
 import { PanelData } from "../Panel";
 import { assert } from "./assert";
+import { fuzzyNumbersEqual } from "./numbers/fuzzyCompareNumbers";
 
 // Layout should be pre-converted into percentages
 export function callPanelCallbacks(
@@ -27,16 +28,18 @@ export function callPanelCallbacks(
       if (collapsible && (onCollapse || onExpand)) {
         if (
           onExpand &&
-          (lastNotifiedSize == null || lastNotifiedSize === collapsedSize) &&
-          size !== collapsedSize
+          (lastNotifiedSize == null ||
+            fuzzyNumbersEqual(lastNotifiedSize, collapsedSize)) &&
+          !fuzzyNumbersEqual(size, collapsedSize)
         ) {
           onExpand();
         }
 
         if (
           onCollapse &&
-          (lastNotifiedSize == null || lastNotifiedSize !== collapsedSize) &&
-          size === collapsedSize
+          (lastNotifiedSize == null ||
+            !fuzzyNumbersEqual(lastNotifiedSize, collapsedSize)) &&
+          fuzzyNumbersEqual(size, collapsedSize)
         ) {
           onCollapse();
         }

package/src/utils/computePanelFlexBoxStyle.ts

@@ -26,13 +26,12 @@ export function computePanelFlexBoxStyle({
   if (size == null) {
     // Initial render (before panels have registered themselves)
     // In order to support server rendering, fall back to default size if provided
-    flexGrow =
-      defaultSize != undefined ? defaultSize.toPrecision(precision) : "1";
+    flexGrow = defaultSize != undefined ? defaultSize.toFixed(precision) : "1";
   } else if (panelData.length === 1) {
     // Special case: Single panel group should always fill full width/height
     flexGrow = "1";
   } else {
-    flexGrow = size.toPrecision(precision);
+    flexGrow = size.toFixed(precision);
   }
 
   return {