react-resizable-panels 2.0.15 → 2.0.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/dist/react-resizable-panels.browser.cjs.js +3 -3
  3. package/dist/react-resizable-panels.browser.development.cjs.js +3 -3
  4. package/dist/react-resizable-panels.browser.development.esm.js +3 -3
  5. package/dist/react-resizable-panels.browser.esm.js +3 -3
  6. package/dist/react-resizable-panels.cjs.js +3 -3
  7. package/dist/react-resizable-panels.development.cjs.js +3 -3
  8. package/dist/react-resizable-panels.development.esm.js +3 -3
  9. package/dist/react-resizable-panels.development.node.cjs.js +3 -3
  10. package/dist/react-resizable-panels.development.node.esm.js +3 -3
  11. package/dist/react-resizable-panels.esm.js +3 -3
  12. package/dist/react-resizable-panels.node.cjs.js +3 -3
  13. package/dist/react-resizable-panels.node.esm.js +3 -3
  14. package/package.json +1 -1
  15. package/src/utils/adjustLayoutByDelta.ts +2 -2
  16. package/src/utils/computePanelFlexBoxStyle.ts +2 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,9 @@
1
1
  # Changelog
2
2
 
3
+ ## 2.0.16
4
+
5
+ - Replaced `.toPrecision()` with `.toFixed()` to avoid undesirable layout shift (#323)
6
+
3
7
  ## 2.0.15
4
8
 
5
9
  - Better account for high-precision sizes with `onCollapse` and `onExpand` callbacks (#325)
package/dist/react-resizable-panels.browser.cjs.js CHANGED
@@ -900,7 +900,7 @@ function adjustLayoutByDelta({
900
900
  if (!fuzzyNumbersEqual(prevSize, safeSize)) {
901
901
  deltaApplied += prevSize - safeSize;
902
902
  nextLayout[index] = safeSize;
903
- if (deltaApplied.toPrecision(3).localeCompare(Math.abs(delta).toPrecision(3), undefined, {
903
+ if (deltaApplied.toFixed(3).localeCompare(Math.abs(delta).toFixed(3), undefined, {
904
904
  numeric: true
905
905
  }) >= 0) {
906
906
  break;
@@ -1380,12 +1380,12 @@ function computePanelFlexBoxStyle({
1380
1380
  if (size == null) {
1381
1381
  // Initial render (before panels have registered themselves)
1382
1382
  // In order to support server rendering, fall back to default size if provided
1383
- flexGrow = defaultSize != undefined ? defaultSize.toPrecision(precision) : "1";
1383
+ flexGrow = defaultSize != undefined ? defaultSize.toFixed(precision) : "1";
1384
1384
  } else if (panelData.length === 1) {
1385
1385
  // Special case: Single panel group should always fill full width/height
1386
1386
  flexGrow = "1";
1387
1387
  } else {
1388
- flexGrow = size.toPrecision(precision);
1388
+ flexGrow = size.toFixed(precision);
1389
1389
  }
1390
1390
  return {
1391
1391
  flexBasis: 0,
package/dist/react-resizable-panels.browser.development.cjs.js CHANGED
@@ -906,7 +906,7 @@ function adjustLayoutByDelta({
906
906
  if (!fuzzyNumbersEqual(prevSize, safeSize)) {
907
907
  deltaApplied += prevSize - safeSize;
908
908
  nextLayout[index] = safeSize;
909
- if (deltaApplied.toPrecision(3).localeCompare(Math.abs(delta).toPrecision(3), undefined, {
909
+ if (deltaApplied.toFixed(3).localeCompare(Math.abs(delta).toFixed(3), undefined, {
910
910
  numeric: true
911
911
  }) >= 0) {
912
912
  break;
@@ -1396,12 +1396,12 @@ function computePanelFlexBoxStyle({
1396
1396
  if (size == null) {
1397
1397
  // Initial render (before panels have registered themselves)
1398
1398
  // In order to support server rendering, fall back to default size if provided
1399
- flexGrow = defaultSize != undefined ? defaultSize.toPrecision(precision) : "1";
1399
+ flexGrow = defaultSize != undefined ? defaultSize.toFixed(precision) : "1";
1400
1400
  } else if (panelData.length === 1) {
1401
1401
  // Special case: Single panel group should always fill full width/height
1402
1402
  flexGrow = "1";
1403
1403
  } else {
1404
- flexGrow = size.toPrecision(precision);
1404
+ flexGrow = size.toFixed(precision);
1405
1405
  }
1406
1406
  return {
1407
1407
  flexBasis: 0,
package/dist/react-resizable-panels.browser.development.esm.js CHANGED
@@ -882,7 +882,7 @@ function adjustLayoutByDelta({
882
882
  if (!fuzzyNumbersEqual(prevSize, safeSize)) {
883
883
  deltaApplied += prevSize - safeSize;
884
884
  nextLayout[index] = safeSize;
885
- if (deltaApplied.toPrecision(3).localeCompare(Math.abs(delta).toPrecision(3), undefined, {
885
+ if (deltaApplied.toFixed(3).localeCompare(Math.abs(delta).toFixed(3), undefined, {
886
886
  numeric: true
887
887
  }) >= 0) {
888
888
  break;
@@ -1372,12 +1372,12 @@ function computePanelFlexBoxStyle({
1372
1372
  if (size == null) {
1373
1373
  // Initial render (before panels have registered themselves)
1374
1374
  // In order to support server rendering, fall back to default size if provided
1375
- flexGrow = defaultSize != undefined ? defaultSize.toPrecision(precision) : "1";
1375
+ flexGrow = defaultSize != undefined ? defaultSize.toFixed(precision) : "1";
1376
1376
  } else if (panelData.length === 1) {
1377
1377
  // Special case: Single panel group should always fill full width/height
1378
1378
  flexGrow = "1";
1379
1379
  } else {
1380
- flexGrow = size.toPrecision(precision);
1380
+ flexGrow = size.toFixed(precision);
1381
1381
  }
1382
1382
  return {
1383
1383
  flexBasis: 0,
package/dist/react-resizable-panels.browser.esm.js CHANGED
@@ -876,7 +876,7 @@ function adjustLayoutByDelta({
876
876
  if (!fuzzyNumbersEqual(prevSize, safeSize)) {
877
877
  deltaApplied += prevSize - safeSize;
878
878
  nextLayout[index] = safeSize;
879
- if (deltaApplied.toPrecision(3).localeCompare(Math.abs(delta).toPrecision(3), undefined, {
879
+ if (deltaApplied.toFixed(3).localeCompare(Math.abs(delta).toFixed(3), undefined, {
880
880
  numeric: true
881
881
  }) >= 0) {
882
882
  break;
@@ -1356,12 +1356,12 @@ function computePanelFlexBoxStyle({
1356
1356
  if (size == null) {
1357
1357
  // Initial render (before panels have registered themselves)
1358
1358
  // In order to support server rendering, fall back to default size if provided
1359
- flexGrow = defaultSize != undefined ? defaultSize.toPrecision(precision) : "1";
1359
+ flexGrow = defaultSize != undefined ? defaultSize.toFixed(precision) : "1";
1360
1360
  } else if (panelData.length === 1) {
1361
1361
  // Special case: Single panel group should always fill full width/height
1362
1362
  flexGrow = "1";
1363
1363
  } else {
1364
- flexGrow = size.toPrecision(precision);
1364
+ flexGrow = size.toFixed(precision);
1365
1365
  }
1366
1366
  return {
1367
1367
  flexBasis: 0,
package/dist/react-resizable-panels.cjs.js CHANGED
@@ -902,7 +902,7 @@ function adjustLayoutByDelta({
902
902
  if (!fuzzyNumbersEqual(prevSize, safeSize)) {
903
903
  deltaApplied += prevSize - safeSize;
904
904
  nextLayout[index] = safeSize;
905
- if (deltaApplied.toPrecision(3).localeCompare(Math.abs(delta).toPrecision(3), undefined, {
905
+ if (deltaApplied.toFixed(3).localeCompare(Math.abs(delta).toFixed(3), undefined, {
906
906
  numeric: true
907
907
  }) >= 0) {
908
908
  break;
@@ -1382,12 +1382,12 @@ function computePanelFlexBoxStyle({
1382
1382
  if (size == null) {
1383
1383
  // Initial render (before panels have registered themselves)
1384
1384
  // In order to support server rendering, fall back to default size if provided
1385
- flexGrow = defaultSize != undefined ? defaultSize.toPrecision(precision) : "1";
1385
+ flexGrow = defaultSize != undefined ? defaultSize.toFixed(precision) : "1";
1386
1386
  } else if (panelData.length === 1) {
1387
1387
  // Special case: Single panel group should always fill full width/height
1388
1388
  flexGrow = "1";
1389
1389
  } else {
1390
- flexGrow = size.toPrecision(precision);
1390
+ flexGrow = size.toFixed(precision);
1391
1391
  }
1392
1392
  return {
1393
1393
  flexBasis: 0,
package/dist/react-resizable-panels.development.cjs.js CHANGED
@@ -913,7 +913,7 @@ function adjustLayoutByDelta({
913
913
  if (!fuzzyNumbersEqual(prevSize, safeSize)) {
914
914
  deltaApplied += prevSize - safeSize;
915
915
  nextLayout[index] = safeSize;
916
- if (deltaApplied.toPrecision(3).localeCompare(Math.abs(delta).toPrecision(3), undefined, {
916
+ if (deltaApplied.toFixed(3).localeCompare(Math.abs(delta).toFixed(3), undefined, {
917
917
  numeric: true
918
918
  }) >= 0) {
919
919
  break;
@@ -1403,12 +1403,12 @@ function computePanelFlexBoxStyle({
1403
1403
  if (size == null) {
1404
1404
  // Initial render (before panels have registered themselves)
1405
1405
  // In order to support server rendering, fall back to default size if provided
1406
- flexGrow = defaultSize != undefined ? defaultSize.toPrecision(precision) : "1";
1406
+ flexGrow = defaultSize != undefined ? defaultSize.toFixed(precision) : "1";
1407
1407
  } else if (panelData.length === 1) {
1408
1408
  // Special case: Single panel group should always fill full width/height
1409
1409
  flexGrow = "1";
1410
1410
  } else {
1411
- flexGrow = size.toPrecision(precision);
1411
+ flexGrow = size.toFixed(precision);
1412
1412
  }
1413
1413
  return {
1414
1414
  flexBasis: 0,
package/dist/react-resizable-panels.development.esm.js CHANGED
@@ -889,7 +889,7 @@ function adjustLayoutByDelta({
889
889
  if (!fuzzyNumbersEqual(prevSize, safeSize)) {
890
890
  deltaApplied += prevSize - safeSize;
891
891
  nextLayout[index] = safeSize;
892
- if (deltaApplied.toPrecision(3).localeCompare(Math.abs(delta).toPrecision(3), undefined, {
892
+ if (deltaApplied.toFixed(3).localeCompare(Math.abs(delta).toFixed(3), undefined, {
893
893
  numeric: true
894
894
  }) >= 0) {
895
895
  break;
@@ -1379,12 +1379,12 @@ function computePanelFlexBoxStyle({
1379
1379
  if (size == null) {
1380
1380
  // Initial render (before panels have registered themselves)
1381
1381
  // In order to support server rendering, fall back to default size if provided
1382
- flexGrow = defaultSize != undefined ? defaultSize.toPrecision(precision) : "1";
1382
+ flexGrow = defaultSize != undefined ? defaultSize.toFixed(precision) : "1";
1383
1383
  } else if (panelData.length === 1) {
1384
1384
  // Special case: Single panel group should always fill full width/height
1385
1385
  flexGrow = "1";
1386
1386
  } else {
1387
- flexGrow = size.toPrecision(precision);
1387
+ flexGrow = size.toFixed(precision);
1388
1388
  }
1389
1389
  return {
1390
1390
  flexBasis: 0,
package/dist/react-resizable-panels.development.node.cjs.js CHANGED
@@ -875,7 +875,7 @@ function adjustLayoutByDelta({
875
875
  if (!fuzzyNumbersEqual(prevSize, safeSize)) {
876
876
  deltaApplied += prevSize - safeSize;
877
877
  nextLayout[index] = safeSize;
878
- if (deltaApplied.toPrecision(3).localeCompare(Math.abs(delta).toPrecision(3), undefined, {
878
+ if (deltaApplied.toFixed(3).localeCompare(Math.abs(delta).toFixed(3), undefined, {
879
879
  numeric: true
880
880
  }) >= 0) {
881
881
  break;
@@ -1241,12 +1241,12 @@ function computePanelFlexBoxStyle({
1241
1241
  if (size == null) {
1242
1242
  // Initial render (before panels have registered themselves)
1243
1243
  // In order to support server rendering, fall back to default size if provided
1244
- flexGrow = defaultSize != undefined ? defaultSize.toPrecision(precision) : "1";
1244
+ flexGrow = defaultSize != undefined ? defaultSize.toFixed(precision) : "1";
1245
1245
  } else if (panelData.length === 1) {
1246
1246
  // Special case: Single panel group should always fill full width/height
1247
1247
  flexGrow = "1";
1248
1248
  } else {
1249
- flexGrow = size.toPrecision(precision);
1249
+ flexGrow = size.toFixed(precision);
1250
1250
  }
1251
1251
  return {
1252
1252
  flexBasis: 0,
package/dist/react-resizable-panels.development.node.esm.js CHANGED
@@ -851,7 +851,7 @@ function adjustLayoutByDelta({
851
851
  if (!fuzzyNumbersEqual(prevSize, safeSize)) {
852
852
  deltaApplied += prevSize - safeSize;
853
853
  nextLayout[index] = safeSize;
854
- if (deltaApplied.toPrecision(3).localeCompare(Math.abs(delta).toPrecision(3), undefined, {
854
+ if (deltaApplied.toFixed(3).localeCompare(Math.abs(delta).toFixed(3), undefined, {
855
855
  numeric: true
856
856
  }) >= 0) {
857
857
  break;
@@ -1217,12 +1217,12 @@ function computePanelFlexBoxStyle({
1217
1217
  if (size == null) {
1218
1218
  // Initial render (before panels have registered themselves)
1219
1219
  // In order to support server rendering, fall back to default size if provided
1220
- flexGrow = defaultSize != undefined ? defaultSize.toPrecision(precision) : "1";
1220
+ flexGrow = defaultSize != undefined ? defaultSize.toFixed(precision) : "1";
1221
1221
  } else if (panelData.length === 1) {
1222
1222
  // Special case: Single panel group should always fill full width/height
1223
1223
  flexGrow = "1";
1224
1224
  } else {
1225
- flexGrow = size.toPrecision(precision);
1225
+ flexGrow = size.toFixed(precision);
1226
1226
  }
1227
1227
  return {
1228
1228
  flexBasis: 0,
package/dist/react-resizable-panels.esm.js CHANGED
@@ -878,7 +878,7 @@ function adjustLayoutByDelta({
878
878
  if (!fuzzyNumbersEqual(prevSize, safeSize)) {
879
879
  deltaApplied += prevSize - safeSize;
880
880
  nextLayout[index] = safeSize;
881
- if (deltaApplied.toPrecision(3).localeCompare(Math.abs(delta).toPrecision(3), undefined, {
881
+ if (deltaApplied.toFixed(3).localeCompare(Math.abs(delta).toFixed(3), undefined, {
882
882
  numeric: true
883
883
  }) >= 0) {
884
884
  break;
@@ -1358,12 +1358,12 @@ function computePanelFlexBoxStyle({
1358
1358
  if (size == null) {
1359
1359
  // Initial render (before panels have registered themselves)
1360
1360
  // In order to support server rendering, fall back to default size if provided
1361
- flexGrow = defaultSize != undefined ? defaultSize.toPrecision(precision) : "1";
1361
+ flexGrow = defaultSize != undefined ? defaultSize.toFixed(precision) : "1";
1362
1362
  } else if (panelData.length === 1) {
1363
1363
  // Special case: Single panel group should always fill full width/height
1364
1364
  flexGrow = "1";
1365
1365
  } else {
1366
- flexGrow = size.toPrecision(precision);
1366
+ flexGrow = size.toFixed(precision);
1367
1367
  }
1368
1368
  return {
1369
1369
  flexBasis: 0,
package/dist/react-resizable-panels.node.cjs.js CHANGED
@@ -864,7 +864,7 @@ function adjustLayoutByDelta({
864
864
  if (!fuzzyNumbersEqual(prevSize, safeSize)) {
865
865
  deltaApplied += prevSize - safeSize;
866
866
  nextLayout[index] = safeSize;
867
- if (deltaApplied.toPrecision(3).localeCompare(Math.abs(delta).toPrecision(3), undefined, {
867
+ if (deltaApplied.toFixed(3).localeCompare(Math.abs(delta).toFixed(3), undefined, {
868
868
  numeric: true
869
869
  }) >= 0) {
870
870
  break;
@@ -1230,12 +1230,12 @@ function computePanelFlexBoxStyle({
1230
1230
  if (size == null) {
1231
1231
  // Initial render (before panels have registered themselves)
1232
1232
  // In order to support server rendering, fall back to default size if provided
1233
- flexGrow = defaultSize != undefined ? defaultSize.toPrecision(precision) : "1";
1233
+ flexGrow = defaultSize != undefined ? defaultSize.toFixed(precision) : "1";
1234
1234
  } else if (panelData.length === 1) {
1235
1235
  // Special case: Single panel group should always fill full width/height
1236
1236
  flexGrow = "1";
1237
1237
  } else {
1238
- flexGrow = size.toPrecision(precision);
1238
+ flexGrow = size.toFixed(precision);
1239
1239
  }
1240
1240
  return {
1241
1241
  flexBasis: 0,
package/dist/react-resizable-panels.node.esm.js CHANGED
@@ -840,7 +840,7 @@ function adjustLayoutByDelta({
840
840
  if (!fuzzyNumbersEqual(prevSize, safeSize)) {
841
841
  deltaApplied += prevSize - safeSize;
842
842
  nextLayout[index] = safeSize;
843
- if (deltaApplied.toPrecision(3).localeCompare(Math.abs(delta).toPrecision(3), undefined, {
843
+ if (deltaApplied.toFixed(3).localeCompare(Math.abs(delta).toFixed(3), undefined, {
844
844
  numeric: true
845
845
  }) >= 0) {
846
846
  break;
@@ -1206,12 +1206,12 @@ function computePanelFlexBoxStyle({
1206
1206
  if (size == null) {
1207
1207
  // Initial render (before panels have registered themselves)
1208
1208
  // In order to support server rendering, fall back to default size if provided
1209
- flexGrow = defaultSize != undefined ? defaultSize.toPrecision(precision) : "1";
1209
+ flexGrow = defaultSize != undefined ? defaultSize.toFixed(precision) : "1";
1210
1210
  } else if (panelData.length === 1) {
1211
1211
  // Special case: Single panel group should always fill full width/height
1212
1212
  flexGrow = "1";
1213
1213
  } else {
1214
- flexGrow = size.toPrecision(precision);
1214
+ flexGrow = size.toFixed(precision);
1215
1215
  }
1216
1216
  return {
1217
1217
  flexBasis: 0,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-resizable-panels",
3
- "version": "2.0.15",
3
+ "version": "2.0.16",
4
4
  "description": "React components for resizable panel groups/layouts",
5
5
  "author": "Brian Vaughn <brian.david.vaughn@gmail.com>",
6
6
  "license": "MIT",
package/src/utils/adjustLayoutByDelta.ts CHANGED
@@ -200,8 +200,8 @@ export function adjustLayoutByDelta({
200
200
 
201
201
  if (
202
202
  deltaApplied
203
- .toPrecision(3)
204
- .localeCompare(Math.abs(delta).toPrecision(3), undefined, {
203
+ .toFixed(3)
204
+ .localeCompare(Math.abs(delta).toFixed(3), undefined, {
205
205
  numeric: true,
206
206
  }) >= 0
207
207
  ) {
package/src/utils/computePanelFlexBoxStyle.ts CHANGED
@@ -26,13 +26,12 @@ export function computePanelFlexBoxStyle({
26
26
  if (size == null) {
27
27
  // Initial render (before panels have registered themselves)
28
28
  // In order to support server rendering, fall back to default size if provided
29
- flexGrow =
30
- defaultSize != undefined ? defaultSize.toPrecision(precision) : "1";
29
+ flexGrow = defaultSize != undefined ? defaultSize.toFixed(precision) : "1";
31
30
  } else if (panelData.length === 1) {
32
31
  // Special case: Single panel group should always fill full width/height
33
32
  flexGrow = "1";
34
33
  } else {
35
- flexGrow = size.toPrecision(precision);
34
+ flexGrow = size.toFixed(precision);
36
35
  }
37
36
 
38
37
  return {