react-resizable-panels 2.0.11 → 2.0.13

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 (26) hide show
  1. package/.parcel-cache/0e613961dce44a82 +0 -0
  2. package/.parcel-cache/13776de4870b0ae4.txt +2 -0
  3. package/.parcel-cache/35c20fb91e350b46 +0 -0
  4. package/.parcel-cache/data.mdb +0 -0
  5. package/.parcel-cache/lock.mdb +0 -0
  6. package/CHANGELOG.md +8 -0
  7. package/LICENSE +21 -0
  8. package/dist/react-resizable-panels.browser.cjs.js +84 -47
  9. package/dist/react-resizable-panels.browser.development.cjs.js +84 -47
  10. package/dist/react-resizable-panels.browser.development.esm.js +84 -47
  11. package/dist/react-resizable-panels.browser.esm.js +84 -47
  12. package/dist/react-resizable-panels.cjs.js +84 -47
  13. package/dist/react-resizable-panels.development.cjs.js +84 -47
  14. package/dist/react-resizable-panels.development.esm.js +84 -47
  15. package/dist/react-resizable-panels.development.node.cjs.js +84 -47
  16. package/dist/react-resizable-panels.development.node.esm.js +84 -47
  17. package/dist/react-resizable-panels.esm.js +84 -47
  18. package/dist/react-resizable-panels.node.cjs.js +84 -47
  19. package/dist/react-resizable-panels.node.esm.js +84 -47
  20. package/package.json +9 -9
  21. package/src/PanelGroup.ts +8 -4
  22. package/src/hooks/useWindowSplitterPanelGroupBehavior.ts +2 -1
  23. package/src/utils/adjustLayoutByDelta.test.ts +268 -115
  24. package/src/utils/adjustLayoutByDelta.ts +51 -39
  25. package/src/utils/numbers/fuzzyLayoutsEqual.ts +22 -0
  26. package/src/vendor/stacking-order.ts +10 -4
package/dist/react-resizable-panels.node.cjs.js CHANGED
@@ -313,7 +313,9 @@ const props = /\b(?:position|zIndex|opacity|transform|webkitTransform|mixBlendMo
313
313
 
314
314
  /** @param {HTMLElement} node */
315
315
  function is_flex_item(node) {
316
- const display = getComputedStyle(get_parent(node)).display;
316
+ var _get_parent;
317
+ // @ts-ignore
318
+ const display = getComputedStyle((_get_parent = get_parent(node)) !== null && _get_parent !== void 0 ? _get_parent : node).display;
317
319
  return display === "flex" || display === "inline-flex";
318
320
  }
319
321
 
@@ -363,6 +365,7 @@ function get_ancestors(node) {
363
365
  const ancestors = [];
364
366
  while (node) {
365
367
  ancestors.push(node);
368
+ // @ts-ignore
366
369
  node = get_parent(node);
367
370
  }
368
371
  return ancestors; // [ node, ... <body>, <html>, document ]
@@ -370,9 +373,13 @@ function get_ancestors(node) {
370
373
 
371
374
  /** @param {HTMLElement} node */
372
375
  function get_parent(node) {
373
- var _node$parentNode;
374
- // @ts-ignore
375
- return ((_node$parentNode = node.parentNode) === null || _node$parentNode === void 0 ? void 0 : _node$parentNode.host) || node.parentNode;
376
+ const {
377
+ parentNode
378
+ } = node;
379
+ if (parentNode && parentNode instanceof ShadowRoot) {
380
+ return parentNode.host;
381
+ }
382
+ return parentNode;
376
383
  }
377
384
 
378
385
  const EXCEEDED_HORIZONTAL_MIN = 0b0001;
@@ -658,6 +665,20 @@ function fuzzyNumbersEqual(actual, expected, fractionDigits) {
658
665
  return fuzzyCompareNumbers(actual, expected, fractionDigits) === 0;
659
666
  }
660
667
 
668
+ function fuzzyLayoutsEqual(actual, expected, fractionDigits) {
669
+ if (actual.length !== expected.length) {
670
+ return false;
671
+ }
672
+ for (let index = 0; index < actual.length; index++) {
673
+ const actualSize = actual[index];
674
+ const expectedSize = expected[index];
675
+ if (!fuzzyNumbersEqual(actualSize, expectedSize, fractionDigits)) {
676
+ return false;
677
+ }
678
+ }
679
+ return true;
680
+ }
681
+
661
682
  // Panel size must be in percentages; pixel values should be pre-converted
662
683
  function resizePanel({
663
684
  panelConstraints: panelConstraintsArray,
@@ -693,26 +714,29 @@ function resizePanel({
693
714
  // All units must be in percentages; pixel values should be pre-converted
694
715
  function adjustLayoutByDelta({
695
716
  delta,
696
- layout: prevLayout,
717
+ initialLayout,
697
718
  panelConstraints: panelConstraintsArray,
698
719
  pivotIndices,
720
+ prevLayout,
699
721
  trigger
700
722
  }) {
701
723
  if (fuzzyNumbersEqual(delta, 0)) {
702
- return prevLayout;
724
+ return initialLayout;
703
725
  }
704
- const nextLayout = [...prevLayout];
726
+ const nextLayout = [...initialLayout];
705
727
  const [firstPivotIndex, secondPivotIndex] = pivotIndices;
706
728
  assert(firstPivotIndex != null, "Invalid first pivot index");
707
729
  assert(secondPivotIndex != null, "Invalid second pivot index");
708
730
  let deltaApplied = 0;
709
731
 
710
- //const DEBUG = [];
711
- //DEBUG.push(`adjustLayoutByDelta() ${prevLayout.join(", ")}`);
712
- //DEBUG.push(` delta: ${delta}`);
713
- //DEBUG.push(` pivotIndices: ${pivotIndices.join(", ")}`);
714
- //DEBUG.push(` trigger: ${trigger}`);
715
- //DEBUG.push("");
732
+ // const DEBUG = [];
733
+ // DEBUG.push(`adjustLayoutByDelta()`);
734
+ // DEBUG.push(` initialLayout: ${initialLayout.join(", ")}`);
735
+ // DEBUG.push(` prevLayout: ${prevLayout.join(", ")}`);
736
+ // DEBUG.push(` delta: ${delta}`);
737
+ // DEBUG.push(` pivotIndices: ${pivotIndices.join(", ")}`);
738
+ // DEBUG.push(` trigger: ${trigger}`);
739
+ // DEBUG.push("");
716
740
 
717
741
  // A resizing panel affects the panels before or after it.
718
742
  //
@@ -737,18 +761,18 @@ function adjustLayoutByDelta({
737
761
  minSize = 0
738
762
  } = panelConstraints;
739
763
 
740
- //DEBUG.push(`edge case check 1: ${index}`);
741
- //DEBUG.push(` -> collapsible? ${constraints.collapsible}`);
764
+ // DEBUG.push(`edge case check 1: ${index}`);
765
+ // DEBUG.push(` -> collapsible? ${collapsible}`);
742
766
  if (collapsible) {
743
- const prevSize = prevLayout[index];
767
+ const prevSize = initialLayout[index];
744
768
  assert(prevSize != null, `Previous layout not found for panel index ${index}`);
745
769
  if (fuzzyNumbersEqual(prevSize, collapsedSize)) {
746
770
  const localDelta = minSize - prevSize;
747
- //DEBUG.push(` -> expand delta: ${localDelta}`);
771
+ // DEBUG.push(` -> expand delta: ${localDelta}`);
748
772
 
749
773
  if (fuzzyCompareNumbers(localDelta, Math.abs(delta)) > 0) {
750
774
  delta = delta < 0 ? 0 - localDelta : localDelta;
751
- //DEBUG.push(` -> delta: ${delta}`);
775
+ // DEBUG.push(` -> delta: ${delta}`);
752
776
  }
753
777
  }
754
778
  }
@@ -765,24 +789,24 @@ function adjustLayoutByDelta({
765
789
  minSize = 0
766
790
  } = panelConstraints;
767
791
 
768
- //DEBUG.push(`edge case check 2: ${index}`);
769
- //DEBUG.push(` -> collapsible? ${collapsible}`);
792
+ // DEBUG.push(`edge case check 2: ${index}`);
793
+ // DEBUG.push(` -> collapsible? ${collapsible}`);
770
794
  if (collapsible) {
771
- const prevSize = prevLayout[index];
795
+ const prevSize = initialLayout[index];
772
796
  assert(prevSize != null, `Previous layout not found for panel index ${index}`);
773
797
  if (fuzzyNumbersEqual(prevSize, minSize)) {
774
798
  const localDelta = prevSize - collapsedSize;
775
- //DEBUG.push(` -> expand delta: ${localDelta}`);
799
+ // DEBUG.push(` -> expand delta: ${localDelta}`);
776
800
 
777
801
  if (fuzzyCompareNumbers(localDelta, Math.abs(delta)) > 0) {
778
802
  delta = delta < 0 ? 0 - localDelta : localDelta;
779
- //DEBUG.push(` -> delta: ${delta}`);
803
+ // DEBUG.push(` -> delta: ${delta}`);
780
804
  }
781
805
  }
782
806
  }
783
807
  }
784
808
  }
785
- //DEBUG.push("");
809
+ // DEBUG.push("");
786
810
  }
787
811
 
788
812
  {
@@ -796,9 +820,9 @@ function adjustLayoutByDelta({
796
820
  let index = delta < 0 ? secondPivotIndex : firstPivotIndex;
797
821
  let maxAvailableDelta = 0;
798
822
 
799
- //DEBUG.push("pre calc...");
823
+ // DEBUG.push("pre calc...");
800
824
  while (true) {
801
- const prevSize = prevLayout[index];
825
+ const prevSize = initialLayout[index];
802
826
  assert(prevSize != null, `Previous layout not found for panel index ${index}`);
803
827
  const maxSafeSize = resizePanel({
804
828
  panelConstraints: panelConstraintsArray,
@@ -806,7 +830,7 @@ function adjustLayoutByDelta({
806
830
  size: 100
807
831
  });
808
832
  const delta = maxSafeSize - prevSize;
809
- //DEBUG.push(` ${index}: ${prevSize} -> ${maxSafeSize}`);
833
+ // DEBUG.push(` ${index}: ${prevSize} -> ${maxSafeSize}`);
810
834
 
811
835
  maxAvailableDelta += delta;
812
836
  index += increment;
@@ -815,11 +839,11 @@ function adjustLayoutByDelta({
815
839
  }
816
840
  }
817
841
 
818
- //DEBUG.push(` -> max available delta: ${maxAvailableDelta}`);
842
+ // DEBUG.push(` -> max available delta: ${maxAvailableDelta}`);
819
843
  const minAbsDelta = Math.min(Math.abs(delta), Math.abs(maxAvailableDelta));
820
844
  delta = delta < 0 ? 0 - minAbsDelta : minAbsDelta;
821
- //DEBUG.push(` -> adjusted delta: ${delta}`);
822
- //DEBUG.push("");
845
+ // DEBUG.push(` -> adjusted delta: ${delta}`);
846
+ // DEBUG.push("");
823
847
  }
824
848
 
825
849
  {
@@ -829,7 +853,7 @@ function adjustLayoutByDelta({
829
853
  let index = pivotIndex;
830
854
  while (index >= 0 && index < panelConstraintsArray.length) {
831
855
  const deltaRemaining = Math.abs(delta) - Math.abs(deltaApplied);
832
- const prevSize = prevLayout[index];
856
+ const prevSize = initialLayout[index];
833
857
  assert(prevSize != null, `Previous layout not found for panel index ${index}`);
834
858
  const unsafeSize = prevSize - deltaRemaining;
835
859
  const safeSize = resizePanel({
@@ -853,20 +877,22 @@ function adjustLayoutByDelta({
853
877
  }
854
878
  }
855
879
  }
856
- //DEBUG.push(`after 1: ${nextLayout.join(", ")}`);
857
- //DEBUG.push(` deltaApplied: ${deltaApplied}`);
858
- //DEBUG.push("");
880
+ // DEBUG.push(`after 1: ${nextLayout.join(", ")}`);
881
+ // DEBUG.push(` deltaApplied: ${deltaApplied}`);
882
+ // DEBUG.push("");
859
883
 
860
884
  // If we were unable to resize any of the panels panels, return the previous state.
861
885
  // This will essentially bailout and ignore e.g. drags past a panel's boundaries
862
- if (fuzzyNumbersEqual(deltaApplied, 0)) {
863
- //console.log(DEBUG.join("\n"));
886
+ if (fuzzyLayoutsEqual(prevLayout, nextLayout)) {
887
+ // DEBUG.push(`bailout to previous layout: ${prevLayout.join(", ")}`);
888
+ // console.log(DEBUG.join("\n"));
889
+
864
890
  return prevLayout;
865
891
  }
866
892
  {
867
893
  // Now distribute the applied delta to the panels in the other direction
868
894
  const pivotIndex = delta < 0 ? secondPivotIndex : firstPivotIndex;
869
- const prevSize = prevLayout[pivotIndex];
895
+ const prevSize = initialLayout[pivotIndex];
870
896
  assert(prevSize != null, `Previous layout not found for panel index ${pivotIndex}`);
871
897
  const unsafeSize = prevSize + deltaApplied;
872
898
  const safeSize = resizePanel({
@@ -907,17 +933,23 @@ function adjustLayoutByDelta({
907
933
  }
908
934
  }
909
935
  }
910
- //DEBUG.push(`after 2: ${nextLayout.join(", ")}`);
911
- //DEBUG.push(` deltaApplied: ${deltaApplied}`);
912
- //DEBUG.push("");
936
+ // DEBUG.push(`after 2: ${nextLayout.join(", ")}`);
937
+ // DEBUG.push(` deltaApplied: ${deltaApplied}`);
938
+ // DEBUG.push("");
913
939
 
914
940
  const totalSize = nextLayout.reduce((total, size) => size + total, 0);
915
- //DEBUG.push(`total size: ${totalSize}`);
916
- //console.log(DEBUG.join("\n"));
941
+ // DEBUG.push(`total size: ${totalSize}`);
917
942
 
943
+ // If our new layout doesn't add up to 100%, that means the requested delta can't be applied
944
+ // In that case, fall back to our most recent valid layout
918
945
  if (!fuzzyNumbersEqual(totalSize, 100)) {
946
+ // DEBUG.push(`bailout to previous layout: ${prevLayout.join(", ")}`);
947
+ // console.log(DEBUG.join("\n"));
948
+
919
949
  return prevLayout;
920
950
  }
951
+
952
+ // console.log(DEBUG.join("\n"));
921
953
  return nextLayout;
922
954
  }
923
955
 
@@ -1024,9 +1056,10 @@ function useWindowSplitterPanelGroupBehavior({
1024
1056
  if (size != null && collapsible) {
1025
1057
  const nextLayout = adjustLayoutByDelta({
1026
1058
  delta: fuzzyNumbersEqual(size, collapsedSize) ? minSize - collapsedSize : collapsedSize - size,
1027
- layout,
1059
+ initialLayout: layout,
1028
1060
  panelConstraints: panelDataArray.map(panelData => panelData.constraints),
1029
1061
  pivotIndices: determinePivotIndices(groupId, handleId, panelGroupElement),
1062
+ prevLayout: layout,
1030
1063
  trigger: "keyboard"
1031
1064
  });
1032
1065
  if (layout !== nextLayout) {
@@ -1513,9 +1546,10 @@ function PanelGroupWithForwardedRef({
1513
1546
  const delta = isLastPanel ? panelSize - collapsedSize : collapsedSize - panelSize;
1514
1547
  const nextLayout = adjustLayoutByDelta({
1515
1548
  delta,
1516
- layout: prevLayout,
1549
+ initialLayout: prevLayout,
1517
1550
  panelConstraints: panelConstraintsArray,
1518
1551
  pivotIndices,
1552
+ prevLayout,
1519
1553
  trigger: "imperative-api"
1520
1554
  });
1521
1555
  if (!compareLayouts(prevLayout, nextLayout)) {
@@ -1555,9 +1589,10 @@ function PanelGroupWithForwardedRef({
1555
1589
  const delta = isLastPanel ? panelSize - baseSize : baseSize - panelSize;
1556
1590
  const nextLayout = adjustLayoutByDelta({
1557
1591
  delta,
1558
- layout: prevLayout,
1592
+ initialLayout: prevLayout,
1559
1593
  panelConstraints: panelConstraintsArray,
1560
1594
  pivotIndices,
1595
+ prevLayout,
1561
1596
  trigger: "imperative-api"
1562
1597
  });
1563
1598
  if (!compareLayouts(prevLayout, nextLayout)) {
@@ -1683,9 +1718,10 @@ function PanelGroupWithForwardedRef({
1683
1718
  const panelConstraints = panelDataArray.map(panelData => panelData.constraints);
1684
1719
  const nextLayout = adjustLayoutByDelta({
1685
1720
  delta,
1686
- layout: initialLayout !== null && initialLayout !== void 0 ? initialLayout : prevLayout,
1721
+ initialLayout: initialLayout !== null && initialLayout !== void 0 ? initialLayout : prevLayout,
1687
1722
  panelConstraints,
1688
1723
  pivotIndices,
1724
+ prevLayout,
1689
1725
  trigger: isKeyDown(event) ? "keyboard" : "mouse-or-touch"
1690
1726
  });
1691
1727
  const layoutChanged = !compareLayouts(prevLayout, nextLayout);
@@ -1741,9 +1777,10 @@ function PanelGroupWithForwardedRef({
1741
1777
  const delta = isLastPanel ? panelSize - unsafePanelSize : unsafePanelSize - panelSize;
1742
1778
  const nextLayout = adjustLayoutByDelta({
1743
1779
  delta,
1744
- layout: prevLayout,
1780
+ initialLayout: prevLayout,
1745
1781
  panelConstraints: panelConstraintsArray,
1746
1782
  pivotIndices,
1783
+ prevLayout,
1747
1784
  trigger: "imperative-api"
1748
1785
  });
1749
1786
  if (!compareLayouts(prevLayout, nextLayout)) {
package/dist/react-resizable-panels.node.esm.js CHANGED
@@ -289,7 +289,9 @@ const props = /\b(?:position|zIndex|opacity|transform|webkitTransform|mixBlendMo
289
289
 
290
290
  /** @param {HTMLElement} node */
291
291
  function is_flex_item(node) {
292
- const display = getComputedStyle(get_parent(node)).display;
292
+ var _get_parent;
293
+ // @ts-ignore
294
+ const display = getComputedStyle((_get_parent = get_parent(node)) !== null && _get_parent !== void 0 ? _get_parent : node).display;
293
295
  return display === "flex" || display === "inline-flex";
294
296
  }
295
297
 
@@ -339,6 +341,7 @@ function get_ancestors(node) {
339
341
  const ancestors = [];
340
342
  while (node) {
341
343
  ancestors.push(node);
344
+ // @ts-ignore
342
345
  node = get_parent(node);
343
346
  }
344
347
  return ancestors; // [ node, ... <body>, <html>, document ]
@@ -346,9 +349,13 @@ function get_ancestors(node) {
346
349
 
347
350
  /** @param {HTMLElement} node */
348
351
  function get_parent(node) {
349
- var _node$parentNode;
350
- // @ts-ignore
351
- return ((_node$parentNode = node.parentNode) === null || _node$parentNode === void 0 ? void 0 : _node$parentNode.host) || node.parentNode;
352
+ const {
353
+ parentNode
354
+ } = node;
355
+ if (parentNode && parentNode instanceof ShadowRoot) {
356
+ return parentNode.host;
357
+ }
358
+ return parentNode;
352
359
  }
353
360
 
354
361
  const EXCEEDED_HORIZONTAL_MIN = 0b0001;
@@ -634,6 +641,20 @@ function fuzzyNumbersEqual(actual, expected, fractionDigits) {
634
641
  return fuzzyCompareNumbers(actual, expected, fractionDigits) === 0;
635
642
  }
636
643
 
644
+ function fuzzyLayoutsEqual(actual, expected, fractionDigits) {
645
+ if (actual.length !== expected.length) {
646
+ return false;
647
+ }
648
+ for (let index = 0; index < actual.length; index++) {
649
+ const actualSize = actual[index];
650
+ const expectedSize = expected[index];
651
+ if (!fuzzyNumbersEqual(actualSize, expectedSize, fractionDigits)) {
652
+ return false;
653
+ }
654
+ }
655
+ return true;
656
+ }
657
+
637
658
  // Panel size must be in percentages; pixel values should be pre-converted
638
659
  function resizePanel({
639
660
  panelConstraints: panelConstraintsArray,
@@ -669,26 +690,29 @@ function resizePanel({
669
690
  // All units must be in percentages; pixel values should be pre-converted
670
691
  function adjustLayoutByDelta({
671
692
  delta,
672
- layout: prevLayout,
693
+ initialLayout,
673
694
  panelConstraints: panelConstraintsArray,
674
695
  pivotIndices,
696
+ prevLayout,
675
697
  trigger
676
698
  }) {
677
699
  if (fuzzyNumbersEqual(delta, 0)) {
678
- return prevLayout;
700
+ return initialLayout;
679
701
  }
680
- const nextLayout = [...prevLayout];
702
+ const nextLayout = [...initialLayout];
681
703
  const [firstPivotIndex, secondPivotIndex] = pivotIndices;
682
704
  assert(firstPivotIndex != null, "Invalid first pivot index");
683
705
  assert(secondPivotIndex != null, "Invalid second pivot index");
684
706
  let deltaApplied = 0;
685
707
 
686
- //const DEBUG = [];
687
- //DEBUG.push(`adjustLayoutByDelta() ${prevLayout.join(", ")}`);
688
- //DEBUG.push(` delta: ${delta}`);
689
- //DEBUG.push(` pivotIndices: ${pivotIndices.join(", ")}`);
690
- //DEBUG.push(` trigger: ${trigger}`);
691
- //DEBUG.push("");
708
+ // const DEBUG = [];
709
+ // DEBUG.push(`adjustLayoutByDelta()`);
710
+ // DEBUG.push(` initialLayout: ${initialLayout.join(", ")}`);
711
+ // DEBUG.push(` prevLayout: ${prevLayout.join(", ")}`);
712
+ // DEBUG.push(` delta: ${delta}`);
713
+ // DEBUG.push(` pivotIndices: ${pivotIndices.join(", ")}`);
714
+ // DEBUG.push(` trigger: ${trigger}`);
715
+ // DEBUG.push("");
692
716
 
693
717
  // A resizing panel affects the panels before or after it.
694
718
  //
@@ -713,18 +737,18 @@ function adjustLayoutByDelta({
713
737
  minSize = 0
714
738
  } = panelConstraints;
715
739
 
716
- //DEBUG.push(`edge case check 1: ${index}`);
717
- //DEBUG.push(` -> collapsible? ${constraints.collapsible}`);
740
+ // DEBUG.push(`edge case check 1: ${index}`);
741
+ // DEBUG.push(` -> collapsible? ${collapsible}`);
718
742
  if (collapsible) {
719
- const prevSize = prevLayout[index];
743
+ const prevSize = initialLayout[index];
720
744
  assert(prevSize != null, `Previous layout not found for panel index ${index}`);
721
745
  if (fuzzyNumbersEqual(prevSize, collapsedSize)) {
722
746
  const localDelta = minSize - prevSize;
723
- //DEBUG.push(` -> expand delta: ${localDelta}`);
747
+ // DEBUG.push(` -> expand delta: ${localDelta}`);
724
748
 
725
749
  if (fuzzyCompareNumbers(localDelta, Math.abs(delta)) > 0) {
726
750
  delta = delta < 0 ? 0 - localDelta : localDelta;
727
- //DEBUG.push(` -> delta: ${delta}`);
751
+ // DEBUG.push(` -> delta: ${delta}`);
728
752
  }
729
753
  }
730
754
  }
@@ -741,24 +765,24 @@ function adjustLayoutByDelta({
741
765
  minSize = 0
742
766
  } = panelConstraints;
743
767
 
744
- //DEBUG.push(`edge case check 2: ${index}`);
745
- //DEBUG.push(` -> collapsible? ${collapsible}`);
768
+ // DEBUG.push(`edge case check 2: ${index}`);
769
+ // DEBUG.push(` -> collapsible? ${collapsible}`);
746
770
  if (collapsible) {
747
- const prevSize = prevLayout[index];
771
+ const prevSize = initialLayout[index];
748
772
  assert(prevSize != null, `Previous layout not found for panel index ${index}`);
749
773
  if (fuzzyNumbersEqual(prevSize, minSize)) {
750
774
  const localDelta = prevSize - collapsedSize;
751
- //DEBUG.push(` -> expand delta: ${localDelta}`);
775
+ // DEBUG.push(` -> expand delta: ${localDelta}`);
752
776
 
753
777
  if (fuzzyCompareNumbers(localDelta, Math.abs(delta)) > 0) {
754
778
  delta = delta < 0 ? 0 - localDelta : localDelta;
755
- //DEBUG.push(` -> delta: ${delta}`);
779
+ // DEBUG.push(` -> delta: ${delta}`);
756
780
  }
757
781
  }
758
782
  }
759
783
  }
760
784
  }
761
- //DEBUG.push("");
785
+ // DEBUG.push("");
762
786
  }
763
787
 
764
788
  {
@@ -772,9 +796,9 @@ function adjustLayoutByDelta({
772
796
  let index = delta < 0 ? secondPivotIndex : firstPivotIndex;
773
797
  let maxAvailableDelta = 0;
774
798
 
775
- //DEBUG.push("pre calc...");
799
+ // DEBUG.push("pre calc...");
776
800
  while (true) {
777
- const prevSize = prevLayout[index];
801
+ const prevSize = initialLayout[index];
778
802
  assert(prevSize != null, `Previous layout not found for panel index ${index}`);
779
803
  const maxSafeSize = resizePanel({
780
804
  panelConstraints: panelConstraintsArray,
@@ -782,7 +806,7 @@ function adjustLayoutByDelta({
782
806
  size: 100
783
807
  });
784
808
  const delta = maxSafeSize - prevSize;
785
- //DEBUG.push(` ${index}: ${prevSize} -> ${maxSafeSize}`);
809
+ // DEBUG.push(` ${index}: ${prevSize} -> ${maxSafeSize}`);
786
810
 
787
811
  maxAvailableDelta += delta;
788
812
  index += increment;
@@ -791,11 +815,11 @@ function adjustLayoutByDelta({
791
815
  }
792
816
  }
793
817
 
794
- //DEBUG.push(` -> max available delta: ${maxAvailableDelta}`);
818
+ // DEBUG.push(` -> max available delta: ${maxAvailableDelta}`);
795
819
  const minAbsDelta = Math.min(Math.abs(delta), Math.abs(maxAvailableDelta));
796
820
  delta = delta < 0 ? 0 - minAbsDelta : minAbsDelta;
797
- //DEBUG.push(` -> adjusted delta: ${delta}`);
798
- //DEBUG.push("");
821
+ // DEBUG.push(` -> adjusted delta: ${delta}`);
822
+ // DEBUG.push("");
799
823
  }
800
824
 
801
825
  {
@@ -805,7 +829,7 @@ function adjustLayoutByDelta({
805
829
  let index = pivotIndex;
806
830
  while (index >= 0 && index < panelConstraintsArray.length) {
807
831
  const deltaRemaining = Math.abs(delta) - Math.abs(deltaApplied);
808
- const prevSize = prevLayout[index];
832
+ const prevSize = initialLayout[index];
809
833
  assert(prevSize != null, `Previous layout not found for panel index ${index}`);
810
834
  const unsafeSize = prevSize - deltaRemaining;
811
835
  const safeSize = resizePanel({
@@ -829,20 +853,22 @@ function adjustLayoutByDelta({
829
853
  }
830
854
  }
831
855
  }
832
- //DEBUG.push(`after 1: ${nextLayout.join(", ")}`);
833
- //DEBUG.push(` deltaApplied: ${deltaApplied}`);
834
- //DEBUG.push("");
856
+ // DEBUG.push(`after 1: ${nextLayout.join(", ")}`);
857
+ // DEBUG.push(` deltaApplied: ${deltaApplied}`);
858
+ // DEBUG.push("");
835
859
 
836
860
  // If we were unable to resize any of the panels panels, return the previous state.
837
861
  // This will essentially bailout and ignore e.g. drags past a panel's boundaries
838
- if (fuzzyNumbersEqual(deltaApplied, 0)) {
839
- //console.log(DEBUG.join("\n"));
862
+ if (fuzzyLayoutsEqual(prevLayout, nextLayout)) {
863
+ // DEBUG.push(`bailout to previous layout: ${prevLayout.join(", ")}`);
864
+ // console.log(DEBUG.join("\n"));
865
+
840
866
  return prevLayout;
841
867
  }
842
868
  {
843
869
  // Now distribute the applied delta to the panels in the other direction
844
870
  const pivotIndex = delta < 0 ? secondPivotIndex : firstPivotIndex;
845
- const prevSize = prevLayout[pivotIndex];
871
+ const prevSize = initialLayout[pivotIndex];
846
872
  assert(prevSize != null, `Previous layout not found for panel index ${pivotIndex}`);
847
873
  const unsafeSize = prevSize + deltaApplied;
848
874
  const safeSize = resizePanel({
@@ -883,17 +909,23 @@ function adjustLayoutByDelta({
883
909
  }
884
910
  }
885
911
  }
886
- //DEBUG.push(`after 2: ${nextLayout.join(", ")}`);
887
- //DEBUG.push(` deltaApplied: ${deltaApplied}`);
888
- //DEBUG.push("");
912
+ // DEBUG.push(`after 2: ${nextLayout.join(", ")}`);
913
+ // DEBUG.push(` deltaApplied: ${deltaApplied}`);
914
+ // DEBUG.push("");
889
915
 
890
916
  const totalSize = nextLayout.reduce((total, size) => size + total, 0);
891
- //DEBUG.push(`total size: ${totalSize}`);
892
- //console.log(DEBUG.join("\n"));
917
+ // DEBUG.push(`total size: ${totalSize}`);
893
918
 
919
+ // If our new layout doesn't add up to 100%, that means the requested delta can't be applied
920
+ // In that case, fall back to our most recent valid layout
894
921
  if (!fuzzyNumbersEqual(totalSize, 100)) {
922
+ // DEBUG.push(`bailout to previous layout: ${prevLayout.join(", ")}`);
923
+ // console.log(DEBUG.join("\n"));
924
+
895
925
  return prevLayout;
896
926
  }
927
+
928
+ // console.log(DEBUG.join("\n"));
897
929
  return nextLayout;
898
930
  }
899
931
 
@@ -1000,9 +1032,10 @@ function useWindowSplitterPanelGroupBehavior({
1000
1032
  if (size != null && collapsible) {
1001
1033
  const nextLayout = adjustLayoutByDelta({
1002
1034
  delta: fuzzyNumbersEqual(size, collapsedSize) ? minSize - collapsedSize : collapsedSize - size,
1003
- layout,
1035
+ initialLayout: layout,
1004
1036
  panelConstraints: panelDataArray.map(panelData => panelData.constraints),
1005
1037
  pivotIndices: determinePivotIndices(groupId, handleId, panelGroupElement),
1038
+ prevLayout: layout,
1006
1039
  trigger: "keyboard"
1007
1040
  });
1008
1041
  if (layout !== nextLayout) {
@@ -1489,9 +1522,10 @@ function PanelGroupWithForwardedRef({
1489
1522
  const delta = isLastPanel ? panelSize - collapsedSize : collapsedSize - panelSize;
1490
1523
  const nextLayout = adjustLayoutByDelta({
1491
1524
  delta,
1492
- layout: prevLayout,
1525
+ initialLayout: prevLayout,
1493
1526
  panelConstraints: panelConstraintsArray,
1494
1527
  pivotIndices,
1528
+ prevLayout,
1495
1529
  trigger: "imperative-api"
1496
1530
  });
1497
1531
  if (!compareLayouts(prevLayout, nextLayout)) {
@@ -1531,9 +1565,10 @@ function PanelGroupWithForwardedRef({
1531
1565
  const delta = isLastPanel ? panelSize - baseSize : baseSize - panelSize;
1532
1566
  const nextLayout = adjustLayoutByDelta({
1533
1567
  delta,
1534
- layout: prevLayout,
1568
+ initialLayout: prevLayout,
1535
1569
  panelConstraints: panelConstraintsArray,
1536
1570
  pivotIndices,
1571
+ prevLayout,
1537
1572
  trigger: "imperative-api"
1538
1573
  });
1539
1574
  if (!compareLayouts(prevLayout, nextLayout)) {
@@ -1659,9 +1694,10 @@ function PanelGroupWithForwardedRef({
1659
1694
  const panelConstraints = panelDataArray.map(panelData => panelData.constraints);
1660
1695
  const nextLayout = adjustLayoutByDelta({
1661
1696
  delta,
1662
- layout: initialLayout !== null && initialLayout !== void 0 ? initialLayout : prevLayout,
1697
+ initialLayout: initialLayout !== null && initialLayout !== void 0 ? initialLayout : prevLayout,
1663
1698
  panelConstraints,
1664
1699
  pivotIndices,
1700
+ prevLayout,
1665
1701
  trigger: isKeyDown(event) ? "keyboard" : "mouse-or-touch"
1666
1702
  });
1667
1703
  const layoutChanged = !compareLayouts(prevLayout, nextLayout);
@@ -1717,9 +1753,10 @@ function PanelGroupWithForwardedRef({
1717
1753
  const delta = isLastPanel ? panelSize - unsafePanelSize : unsafePanelSize - panelSize;
1718
1754
  const nextLayout = adjustLayoutByDelta({
1719
1755
  delta,
1720
- layout: prevLayout,
1756
+ initialLayout: prevLayout,
1721
1757
  panelConstraints: panelConstraintsArray,
1722
1758
  pivotIndices,
1759
+ prevLayout,
1723
1760
  trigger: "imperative-api"
1724
1761
  });
1725
1762
  if (!compareLayouts(prevLayout, nextLayout)) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-resizable-panels",
3
- "version": "2.0.11",
3
+ "version": "2.0.13",
4
4
  "description": "React components for resizable panel groups/layouts",
5
5
  "author": "Brian Vaughn <brian.david.vaughn@gmail.com>",
6
6
  "license": "MIT",
@@ -60,12 +60,6 @@
60
60
  }
61
61
  },
62
62
  "types": "dist/react-resizable-panels.cjs.d.ts",
63
- "scripts": {
64
- "lint": "eslint \"src/**/*.{ts,tsx}\"",
65
- "test": "jest --config=jest.config.js",
66
- "test:watch": "jest --config=jest.config.js --watch",
67
- "watch": "parcel watch --port=2345"
68
- },
69
63
  "devDependencies": {
70
64
  "@babel/plugin-proposal-nullish-coalescing-operator": "7.18.6",
71
65
  "@babel/plugin-proposal-optional-chaining": "7.21.0",
@@ -83,5 +77,11 @@
83
77
  },
84
78
  "browserslist": [
85
79
  "Chrome 79"
86
- ]
87
- }
80
+ ],
81
+ "scripts": {
82
+ "lint": "eslint \"src/**/*.{ts,tsx}\"",
83
+ "test": "jest --config=jest.config.js",
84
+ "test:watch": "jest --config=jest.config.js --watch",
85
+ "watch": "parcel watch --port=2345"
86
+ }
87
+ }