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.development.esm.js CHANGED
@@ -338,7 +338,9 @@ const props = /\b(?:position|zIndex|opacity|transform|webkitTransform|mixBlendMo
338
338
 
339
339
  /** @param {HTMLElement} node */
340
340
  function is_flex_item(node) {
341
- const display = getComputedStyle(get_parent(node)).display;
341
+ var _get_parent;
342
+ // @ts-ignore
343
+ const display = getComputedStyle((_get_parent = get_parent(node)) !== null && _get_parent !== void 0 ? _get_parent : node).display;
342
344
  return display === "flex" || display === "inline-flex";
343
345
  }
344
346
 
@@ -388,6 +390,7 @@ function get_ancestors(node) {
388
390
  const ancestors = [];
389
391
  while (node) {
390
392
  ancestors.push(node);
393
+ // @ts-ignore
391
394
  node = get_parent(node);
392
395
  }
393
396
  return ancestors; // [ node, ... <body>, <html>, document ]
@@ -395,9 +398,13 @@ function get_ancestors(node) {
395
398
 
396
399
  /** @param {HTMLElement} node */
397
400
  function get_parent(node) {
398
- var _node$parentNode;
399
- // @ts-ignore
400
- return ((_node$parentNode = node.parentNode) === null || _node$parentNode === void 0 ? void 0 : _node$parentNode.host) || node.parentNode;
401
+ const {
402
+ parentNode
403
+ } = node;
404
+ if (parentNode && parentNode instanceof ShadowRoot) {
405
+ return parentNode.host;
406
+ }
407
+ return parentNode;
401
408
  }
402
409
 
403
410
  const EXCEEDED_HORIZONTAL_MIN = 0b0001;
@@ -683,6 +690,20 @@ function fuzzyNumbersEqual(actual, expected, fractionDigits) {
683
690
  return fuzzyCompareNumbers(actual, expected, fractionDigits) === 0;
684
691
  }
685
692
 
693
+ function fuzzyLayoutsEqual(actual, expected, fractionDigits) {
694
+ if (actual.length !== expected.length) {
695
+ return false;
696
+ }
697
+ for (let index = 0; index < actual.length; index++) {
698
+ const actualSize = actual[index];
699
+ const expectedSize = expected[index];
700
+ if (!fuzzyNumbersEqual(actualSize, expectedSize, fractionDigits)) {
701
+ return false;
702
+ }
703
+ }
704
+ return true;
705
+ }
706
+
686
707
  // Panel size must be in percentages; pixel values should be pre-converted
687
708
  function resizePanel({
688
709
  panelConstraints: panelConstraintsArray,
@@ -718,26 +739,29 @@ function resizePanel({
718
739
  // All units must be in percentages; pixel values should be pre-converted
719
740
  function adjustLayoutByDelta({
720
741
  delta,
721
- layout: prevLayout,
742
+ initialLayout,
722
743
  panelConstraints: panelConstraintsArray,
723
744
  pivotIndices,
745
+ prevLayout,
724
746
  trigger
725
747
  }) {
726
748
  if (fuzzyNumbersEqual(delta, 0)) {
727
- return prevLayout;
749
+ return initialLayout;
728
750
  }
729
- const nextLayout = [...prevLayout];
751
+ const nextLayout = [...initialLayout];
730
752
  const [firstPivotIndex, secondPivotIndex] = pivotIndices;
731
753
  assert(firstPivotIndex != null, "Invalid first pivot index");
732
754
  assert(secondPivotIndex != null, "Invalid second pivot index");
733
755
  let deltaApplied = 0;
734
756
 
735
- //const DEBUG = [];
736
- //DEBUG.push(`adjustLayoutByDelta() ${prevLayout.join(", ")}`);
737
- //DEBUG.push(` delta: ${delta}`);
738
- //DEBUG.push(` pivotIndices: ${pivotIndices.join(", ")}`);
739
- //DEBUG.push(` trigger: ${trigger}`);
740
- //DEBUG.push("");
757
+ // const DEBUG = [];
758
+ // DEBUG.push(`adjustLayoutByDelta()`);
759
+ // DEBUG.push(` initialLayout: ${initialLayout.join(", ")}`);
760
+ // DEBUG.push(` prevLayout: ${prevLayout.join(", ")}`);
761
+ // DEBUG.push(` delta: ${delta}`);
762
+ // DEBUG.push(` pivotIndices: ${pivotIndices.join(", ")}`);
763
+ // DEBUG.push(` trigger: ${trigger}`);
764
+ // DEBUG.push("");
741
765
 
742
766
  // A resizing panel affects the panels before or after it.
743
767
  //
@@ -762,18 +786,18 @@ function adjustLayoutByDelta({
762
786
  minSize = 0
763
787
  } = panelConstraints;
764
788
 
765
- //DEBUG.push(`edge case check 1: ${index}`);
766
- //DEBUG.push(` -> collapsible? ${constraints.collapsible}`);
789
+ // DEBUG.push(`edge case check 1: ${index}`);
790
+ // DEBUG.push(` -> collapsible? ${collapsible}`);
767
791
  if (collapsible) {
768
- const prevSize = prevLayout[index];
792
+ const prevSize = initialLayout[index];
769
793
  assert(prevSize != null, `Previous layout not found for panel index ${index}`);
770
794
  if (fuzzyNumbersEqual(prevSize, collapsedSize)) {
771
795
  const localDelta = minSize - prevSize;
772
- //DEBUG.push(` -> expand delta: ${localDelta}`);
796
+ // DEBUG.push(` -> expand delta: ${localDelta}`);
773
797
 
774
798
  if (fuzzyCompareNumbers(localDelta, Math.abs(delta)) > 0) {
775
799
  delta = delta < 0 ? 0 - localDelta : localDelta;
776
- //DEBUG.push(` -> delta: ${delta}`);
800
+ // DEBUG.push(` -> delta: ${delta}`);
777
801
  }
778
802
  }
779
803
  }
@@ -790,24 +814,24 @@ function adjustLayoutByDelta({
790
814
  minSize = 0
791
815
  } = panelConstraints;
792
816
 
793
- //DEBUG.push(`edge case check 2: ${index}`);
794
- //DEBUG.push(` -> collapsible? ${collapsible}`);
817
+ // DEBUG.push(`edge case check 2: ${index}`);
818
+ // DEBUG.push(` -> collapsible? ${collapsible}`);
795
819
  if (collapsible) {
796
- const prevSize = prevLayout[index];
820
+ const prevSize = initialLayout[index];
797
821
  assert(prevSize != null, `Previous layout not found for panel index ${index}`);
798
822
  if (fuzzyNumbersEqual(prevSize, minSize)) {
799
823
  const localDelta = prevSize - collapsedSize;
800
- //DEBUG.push(` -> expand delta: ${localDelta}`);
824
+ // DEBUG.push(` -> expand delta: ${localDelta}`);
801
825
 
802
826
  if (fuzzyCompareNumbers(localDelta, Math.abs(delta)) > 0) {
803
827
  delta = delta < 0 ? 0 - localDelta : localDelta;
804
- //DEBUG.push(` -> delta: ${delta}`);
828
+ // DEBUG.push(` -> delta: ${delta}`);
805
829
  }
806
830
  }
807
831
  }
808
832
  }
809
833
  }
810
- //DEBUG.push("");
834
+ // DEBUG.push("");
811
835
  }
812
836
 
813
837
  {
@@ -821,9 +845,9 @@ function adjustLayoutByDelta({
821
845
  let index = delta < 0 ? secondPivotIndex : firstPivotIndex;
822
846
  let maxAvailableDelta = 0;
823
847
 
824
- //DEBUG.push("pre calc...");
848
+ // DEBUG.push("pre calc...");
825
849
  while (true) {
826
- const prevSize = prevLayout[index];
850
+ const prevSize = initialLayout[index];
827
851
  assert(prevSize != null, `Previous layout not found for panel index ${index}`);
828
852
  const maxSafeSize = resizePanel({
829
853
  panelConstraints: panelConstraintsArray,
@@ -831,7 +855,7 @@ function adjustLayoutByDelta({
831
855
  size: 100
832
856
  });
833
857
  const delta = maxSafeSize - prevSize;
834
- //DEBUG.push(` ${index}: ${prevSize} -> ${maxSafeSize}`);
858
+ // DEBUG.push(` ${index}: ${prevSize} -> ${maxSafeSize}`);
835
859
 
836
860
  maxAvailableDelta += delta;
837
861
  index += increment;
@@ -840,11 +864,11 @@ function adjustLayoutByDelta({
840
864
  }
841
865
  }
842
866
 
843
- //DEBUG.push(` -> max available delta: ${maxAvailableDelta}`);
867
+ // DEBUG.push(` -> max available delta: ${maxAvailableDelta}`);
844
868
  const minAbsDelta = Math.min(Math.abs(delta), Math.abs(maxAvailableDelta));
845
869
  delta = delta < 0 ? 0 - minAbsDelta : minAbsDelta;
846
- //DEBUG.push(` -> adjusted delta: ${delta}`);
847
- //DEBUG.push("");
870
+ // DEBUG.push(` -> adjusted delta: ${delta}`);
871
+ // DEBUG.push("");
848
872
  }
849
873
 
850
874
  {
@@ -854,7 +878,7 @@ function adjustLayoutByDelta({
854
878
  let index = pivotIndex;
855
879
  while (index >= 0 && index < panelConstraintsArray.length) {
856
880
  const deltaRemaining = Math.abs(delta) - Math.abs(deltaApplied);
857
- const prevSize = prevLayout[index];
881
+ const prevSize = initialLayout[index];
858
882
  assert(prevSize != null, `Previous layout not found for panel index ${index}`);
859
883
  const unsafeSize = prevSize - deltaRemaining;
860
884
  const safeSize = resizePanel({
@@ -878,20 +902,22 @@ function adjustLayoutByDelta({
878
902
  }
879
903
  }
880
904
  }
881
- //DEBUG.push(`after 1: ${nextLayout.join(", ")}`);
882
- //DEBUG.push(` deltaApplied: ${deltaApplied}`);
883
- //DEBUG.push("");
905
+ // DEBUG.push(`after 1: ${nextLayout.join(", ")}`);
906
+ // DEBUG.push(` deltaApplied: ${deltaApplied}`);
907
+ // DEBUG.push("");
884
908
 
885
909
  // If we were unable to resize any of the panels panels, return the previous state.
886
910
  // This will essentially bailout and ignore e.g. drags past a panel's boundaries
887
- if (fuzzyNumbersEqual(deltaApplied, 0)) {
888
- //console.log(DEBUG.join("\n"));
911
+ if (fuzzyLayoutsEqual(prevLayout, nextLayout)) {
912
+ // DEBUG.push(`bailout to previous layout: ${prevLayout.join(", ")}`);
913
+ // console.log(DEBUG.join("\n"));
914
+
889
915
  return prevLayout;
890
916
  }
891
917
  {
892
918
  // Now distribute the applied delta to the panels in the other direction
893
919
  const pivotIndex = delta < 0 ? secondPivotIndex : firstPivotIndex;
894
- const prevSize = prevLayout[pivotIndex];
920
+ const prevSize = initialLayout[pivotIndex];
895
921
  assert(prevSize != null, `Previous layout not found for panel index ${pivotIndex}`);
896
922
  const unsafeSize = prevSize + deltaApplied;
897
923
  const safeSize = resizePanel({
@@ -932,17 +958,23 @@ function adjustLayoutByDelta({
932
958
  }
933
959
  }
934
960
  }
935
- //DEBUG.push(`after 2: ${nextLayout.join(", ")}`);
936
- //DEBUG.push(` deltaApplied: ${deltaApplied}`);
937
- //DEBUG.push("");
961
+ // DEBUG.push(`after 2: ${nextLayout.join(", ")}`);
962
+ // DEBUG.push(` deltaApplied: ${deltaApplied}`);
963
+ // DEBUG.push("");
938
964
 
939
965
  const totalSize = nextLayout.reduce((total, size) => size + total, 0);
940
- //DEBUG.push(`total size: ${totalSize}`);
941
- //console.log(DEBUG.join("\n"));
966
+ // DEBUG.push(`total size: ${totalSize}`);
942
967
 
968
+ // If our new layout doesn't add up to 100%, that means the requested delta can't be applied
969
+ // In that case, fall back to our most recent valid layout
943
970
  if (!fuzzyNumbersEqual(totalSize, 100)) {
971
+ // DEBUG.push(`bailout to previous layout: ${prevLayout.join(", ")}`);
972
+ // console.log(DEBUG.join("\n"));
973
+
944
974
  return prevLayout;
945
975
  }
976
+
977
+ // console.log(DEBUG.join("\n"));
946
978
  return nextLayout;
947
979
  }
948
980
 
@@ -1132,9 +1164,10 @@ function useWindowSplitterPanelGroupBehavior({
1132
1164
  if (size != null && collapsible) {
1133
1165
  const nextLayout = adjustLayoutByDelta({
1134
1166
  delta: fuzzyNumbersEqual(size, collapsedSize) ? minSize - collapsedSize : collapsedSize - size,
1135
- layout,
1167
+ initialLayout: layout,
1136
1168
  panelConstraints: panelDataArray.map(panelData => panelData.constraints),
1137
1169
  pivotIndices: determinePivotIndices(groupId, handleId, panelGroupElement),
1170
+ prevLayout: layout,
1138
1171
  trigger: "keyboard"
1139
1172
  });
1140
1173
  if (layout !== nextLayout) {
@@ -1766,9 +1799,10 @@ function PanelGroupWithForwardedRef({
1766
1799
  const delta = isLastPanel ? panelSize - collapsedSize : collapsedSize - panelSize;
1767
1800
  const nextLayout = adjustLayoutByDelta({
1768
1801
  delta,
1769
- layout: prevLayout,
1802
+ initialLayout: prevLayout,
1770
1803
  panelConstraints: panelConstraintsArray,
1771
1804
  pivotIndices,
1805
+ prevLayout,
1772
1806
  trigger: "imperative-api"
1773
1807
  });
1774
1808
  if (!compareLayouts(prevLayout, nextLayout)) {
@@ -1808,9 +1842,10 @@ function PanelGroupWithForwardedRef({
1808
1842
  const delta = isLastPanel ? panelSize - baseSize : baseSize - panelSize;
1809
1843
  const nextLayout = adjustLayoutByDelta({
1810
1844
  delta,
1811
- layout: prevLayout,
1845
+ initialLayout: prevLayout,
1812
1846
  panelConstraints: panelConstraintsArray,
1813
1847
  pivotIndices,
1848
+ prevLayout,
1814
1849
  trigger: "imperative-api"
1815
1850
  });
1816
1851
  if (!compareLayouts(prevLayout, nextLayout)) {
@@ -1992,9 +2027,10 @@ function PanelGroupWithForwardedRef({
1992
2027
  const panelConstraints = panelDataArray.map(panelData => panelData.constraints);
1993
2028
  const nextLayout = adjustLayoutByDelta({
1994
2029
  delta,
1995
- layout: initialLayout !== null && initialLayout !== void 0 ? initialLayout : prevLayout,
2030
+ initialLayout: initialLayout !== null && initialLayout !== void 0 ? initialLayout : prevLayout,
1996
2031
  panelConstraints,
1997
2032
  pivotIndices,
2033
+ prevLayout,
1998
2034
  trigger: isKeyDown(event) ? "keyboard" : "mouse-or-touch"
1999
2035
  });
2000
2036
  const layoutChanged = !compareLayouts(prevLayout, nextLayout);
@@ -2050,9 +2086,10 @@ function PanelGroupWithForwardedRef({
2050
2086
  const delta = isLastPanel ? panelSize - unsafePanelSize : unsafePanelSize - panelSize;
2051
2087
  const nextLayout = adjustLayoutByDelta({
2052
2088
  delta,
2053
- layout: prevLayout,
2089
+ initialLayout: prevLayout,
2054
2090
  panelConstraints: panelConstraintsArray,
2055
2091
  pivotIndices,
2092
+ prevLayout,
2056
2093
  trigger: "imperative-api"
2057
2094
  });
2058
2095
  if (!compareLayouts(prevLayout, nextLayout)) {
package/dist/react-resizable-panels.development.node.cjs.js CHANGED
@@ -324,7 +324,9 @@ const props = /\b(?:position|zIndex|opacity|transform|webkitTransform|mixBlendMo
324
324
 
325
325
  /** @param {HTMLElement} node */
326
326
  function is_flex_item(node) {
327
- const display = getComputedStyle(get_parent(node)).display;
327
+ var _get_parent;
328
+ // @ts-ignore
329
+ const display = getComputedStyle((_get_parent = get_parent(node)) !== null && _get_parent !== void 0 ? _get_parent : node).display;
328
330
  return display === "flex" || display === "inline-flex";
329
331
  }
330
332
 
@@ -374,6 +376,7 @@ function get_ancestors(node) {
374
376
  const ancestors = [];
375
377
  while (node) {
376
378
  ancestors.push(node);
379
+ // @ts-ignore
377
380
  node = get_parent(node);
378
381
  }
379
382
  return ancestors; // [ node, ... <body>, <html>, document ]
@@ -381,9 +384,13 @@ function get_ancestors(node) {
381
384
 
382
385
  /** @param {HTMLElement} node */
383
386
  function get_parent(node) {
384
- var _node$parentNode;
385
- // @ts-ignore
386
- return ((_node$parentNode = node.parentNode) === null || _node$parentNode === void 0 ? void 0 : _node$parentNode.host) || node.parentNode;
387
+ const {
388
+ parentNode
389
+ } = node;
390
+ if (parentNode && parentNode instanceof ShadowRoot) {
391
+ return parentNode.host;
392
+ }
393
+ return parentNode;
387
394
  }
388
395
 
389
396
  const EXCEEDED_HORIZONTAL_MIN = 0b0001;
@@ -669,6 +676,20 @@ function fuzzyNumbersEqual(actual, expected, fractionDigits) {
669
676
  return fuzzyCompareNumbers(actual, expected, fractionDigits) === 0;
670
677
  }
671
678
 
679
+ function fuzzyLayoutsEqual(actual, expected, fractionDigits) {
680
+ if (actual.length !== expected.length) {
681
+ return false;
682
+ }
683
+ for (let index = 0; index < actual.length; index++) {
684
+ const actualSize = actual[index];
685
+ const expectedSize = expected[index];
686
+ if (!fuzzyNumbersEqual(actualSize, expectedSize, fractionDigits)) {
687
+ return false;
688
+ }
689
+ }
690
+ return true;
691
+ }
692
+
672
693
  // Panel size must be in percentages; pixel values should be pre-converted
673
694
  function resizePanel({
674
695
  panelConstraints: panelConstraintsArray,
@@ -704,26 +725,29 @@ function resizePanel({
704
725
  // All units must be in percentages; pixel values should be pre-converted
705
726
  function adjustLayoutByDelta({
706
727
  delta,
707
- layout: prevLayout,
728
+ initialLayout,
708
729
  panelConstraints: panelConstraintsArray,
709
730
  pivotIndices,
731
+ prevLayout,
710
732
  trigger
711
733
  }) {
712
734
  if (fuzzyNumbersEqual(delta, 0)) {
713
- return prevLayout;
735
+ return initialLayout;
714
736
  }
715
- const nextLayout = [...prevLayout];
737
+ const nextLayout = [...initialLayout];
716
738
  const [firstPivotIndex, secondPivotIndex] = pivotIndices;
717
739
  assert(firstPivotIndex != null, "Invalid first pivot index");
718
740
  assert(secondPivotIndex != null, "Invalid second pivot index");
719
741
  let deltaApplied = 0;
720
742
 
721
- //const DEBUG = [];
722
- //DEBUG.push(`adjustLayoutByDelta() ${prevLayout.join(", ")}`);
723
- //DEBUG.push(` delta: ${delta}`);
724
- //DEBUG.push(` pivotIndices: ${pivotIndices.join(", ")}`);
725
- //DEBUG.push(` trigger: ${trigger}`);
726
- //DEBUG.push("");
743
+ // const DEBUG = [];
744
+ // DEBUG.push(`adjustLayoutByDelta()`);
745
+ // DEBUG.push(` initialLayout: ${initialLayout.join(", ")}`);
746
+ // DEBUG.push(` prevLayout: ${prevLayout.join(", ")}`);
747
+ // DEBUG.push(` delta: ${delta}`);
748
+ // DEBUG.push(` pivotIndices: ${pivotIndices.join(", ")}`);
749
+ // DEBUG.push(` trigger: ${trigger}`);
750
+ // DEBUG.push("");
727
751
 
728
752
  // A resizing panel affects the panels before or after it.
729
753
  //
@@ -748,18 +772,18 @@ function adjustLayoutByDelta({
748
772
  minSize = 0
749
773
  } = panelConstraints;
750
774
 
751
- //DEBUG.push(`edge case check 1: ${index}`);
752
- //DEBUG.push(` -> collapsible? ${constraints.collapsible}`);
775
+ // DEBUG.push(`edge case check 1: ${index}`);
776
+ // DEBUG.push(` -> collapsible? ${collapsible}`);
753
777
  if (collapsible) {
754
- const prevSize = prevLayout[index];
778
+ const prevSize = initialLayout[index];
755
779
  assert(prevSize != null, `Previous layout not found for panel index ${index}`);
756
780
  if (fuzzyNumbersEqual(prevSize, collapsedSize)) {
757
781
  const localDelta = minSize - prevSize;
758
- //DEBUG.push(` -> expand delta: ${localDelta}`);
782
+ // DEBUG.push(` -> expand delta: ${localDelta}`);
759
783
 
760
784
  if (fuzzyCompareNumbers(localDelta, Math.abs(delta)) > 0) {
761
785
  delta = delta < 0 ? 0 - localDelta : localDelta;
762
- //DEBUG.push(` -> delta: ${delta}`);
786
+ // DEBUG.push(` -> delta: ${delta}`);
763
787
  }
764
788
  }
765
789
  }
@@ -776,24 +800,24 @@ function adjustLayoutByDelta({
776
800
  minSize = 0
777
801
  } = panelConstraints;
778
802
 
779
- //DEBUG.push(`edge case check 2: ${index}`);
780
- //DEBUG.push(` -> collapsible? ${collapsible}`);
803
+ // DEBUG.push(`edge case check 2: ${index}`);
804
+ // DEBUG.push(` -> collapsible? ${collapsible}`);
781
805
  if (collapsible) {
782
- const prevSize = prevLayout[index];
806
+ const prevSize = initialLayout[index];
783
807
  assert(prevSize != null, `Previous layout not found for panel index ${index}`);
784
808
  if (fuzzyNumbersEqual(prevSize, minSize)) {
785
809
  const localDelta = prevSize - collapsedSize;
786
- //DEBUG.push(` -> expand delta: ${localDelta}`);
810
+ // DEBUG.push(` -> expand delta: ${localDelta}`);
787
811
 
788
812
  if (fuzzyCompareNumbers(localDelta, Math.abs(delta)) > 0) {
789
813
  delta = delta < 0 ? 0 - localDelta : localDelta;
790
- //DEBUG.push(` -> delta: ${delta}`);
814
+ // DEBUG.push(` -> delta: ${delta}`);
791
815
  }
792
816
  }
793
817
  }
794
818
  }
795
819
  }
796
- //DEBUG.push("");
820
+ // DEBUG.push("");
797
821
  }
798
822
 
799
823
  {
@@ -807,9 +831,9 @@ function adjustLayoutByDelta({
807
831
  let index = delta < 0 ? secondPivotIndex : firstPivotIndex;
808
832
  let maxAvailableDelta = 0;
809
833
 
810
- //DEBUG.push("pre calc...");
834
+ // DEBUG.push("pre calc...");
811
835
  while (true) {
812
- const prevSize = prevLayout[index];
836
+ const prevSize = initialLayout[index];
813
837
  assert(prevSize != null, `Previous layout not found for panel index ${index}`);
814
838
  const maxSafeSize = resizePanel({
815
839
  panelConstraints: panelConstraintsArray,
@@ -817,7 +841,7 @@ function adjustLayoutByDelta({
817
841
  size: 100
818
842
  });
819
843
  const delta = maxSafeSize - prevSize;
820
- //DEBUG.push(` ${index}: ${prevSize} -> ${maxSafeSize}`);
844
+ // DEBUG.push(` ${index}: ${prevSize} -> ${maxSafeSize}`);
821
845
 
822
846
  maxAvailableDelta += delta;
823
847
  index += increment;
@@ -826,11 +850,11 @@ function adjustLayoutByDelta({
826
850
  }
827
851
  }
828
852
 
829
- //DEBUG.push(` -> max available delta: ${maxAvailableDelta}`);
853
+ // DEBUG.push(` -> max available delta: ${maxAvailableDelta}`);
830
854
  const minAbsDelta = Math.min(Math.abs(delta), Math.abs(maxAvailableDelta));
831
855
  delta = delta < 0 ? 0 - minAbsDelta : minAbsDelta;
832
- //DEBUG.push(` -> adjusted delta: ${delta}`);
833
- //DEBUG.push("");
856
+ // DEBUG.push(` -> adjusted delta: ${delta}`);
857
+ // DEBUG.push("");
834
858
  }
835
859
 
836
860
  {
@@ -840,7 +864,7 @@ function adjustLayoutByDelta({
840
864
  let index = pivotIndex;
841
865
  while (index >= 0 && index < panelConstraintsArray.length) {
842
866
  const deltaRemaining = Math.abs(delta) - Math.abs(deltaApplied);
843
- const prevSize = prevLayout[index];
867
+ const prevSize = initialLayout[index];
844
868
  assert(prevSize != null, `Previous layout not found for panel index ${index}`);
845
869
  const unsafeSize = prevSize - deltaRemaining;
846
870
  const safeSize = resizePanel({
@@ -864,20 +888,22 @@ function adjustLayoutByDelta({
864
888
  }
865
889
  }
866
890
  }
867
- //DEBUG.push(`after 1: ${nextLayout.join(", ")}`);
868
- //DEBUG.push(` deltaApplied: ${deltaApplied}`);
869
- //DEBUG.push("");
891
+ // DEBUG.push(`after 1: ${nextLayout.join(", ")}`);
892
+ // DEBUG.push(` deltaApplied: ${deltaApplied}`);
893
+ // DEBUG.push("");
870
894
 
871
895
  // If we were unable to resize any of the panels panels, return the previous state.
872
896
  // This will essentially bailout and ignore e.g. drags past a panel's boundaries
873
- if (fuzzyNumbersEqual(deltaApplied, 0)) {
874
- //console.log(DEBUG.join("\n"));
897
+ if (fuzzyLayoutsEqual(prevLayout, nextLayout)) {
898
+ // DEBUG.push(`bailout to previous layout: ${prevLayout.join(", ")}`);
899
+ // console.log(DEBUG.join("\n"));
900
+
875
901
  return prevLayout;
876
902
  }
877
903
  {
878
904
  // Now distribute the applied delta to the panels in the other direction
879
905
  const pivotIndex = delta < 0 ? secondPivotIndex : firstPivotIndex;
880
- const prevSize = prevLayout[pivotIndex];
906
+ const prevSize = initialLayout[pivotIndex];
881
907
  assert(prevSize != null, `Previous layout not found for panel index ${pivotIndex}`);
882
908
  const unsafeSize = prevSize + deltaApplied;
883
909
  const safeSize = resizePanel({
@@ -918,17 +944,23 @@ function adjustLayoutByDelta({
918
944
  }
919
945
  }
920
946
  }
921
- //DEBUG.push(`after 2: ${nextLayout.join(", ")}`);
922
- //DEBUG.push(` deltaApplied: ${deltaApplied}`);
923
- //DEBUG.push("");
947
+ // DEBUG.push(`after 2: ${nextLayout.join(", ")}`);
948
+ // DEBUG.push(` deltaApplied: ${deltaApplied}`);
949
+ // DEBUG.push("");
924
950
 
925
951
  const totalSize = nextLayout.reduce((total, size) => size + total, 0);
926
- //DEBUG.push(`total size: ${totalSize}`);
927
- //console.log(DEBUG.join("\n"));
952
+ // DEBUG.push(`total size: ${totalSize}`);
928
953
 
954
+ // If our new layout doesn't add up to 100%, that means the requested delta can't be applied
955
+ // In that case, fall back to our most recent valid layout
929
956
  if (!fuzzyNumbersEqual(totalSize, 100)) {
957
+ // DEBUG.push(`bailout to previous layout: ${prevLayout.join(", ")}`);
958
+ // console.log(DEBUG.join("\n"));
959
+
930
960
  return prevLayout;
931
961
  }
962
+
963
+ // console.log(DEBUG.join("\n"));
932
964
  return nextLayout;
933
965
  }
934
966
 
@@ -1035,9 +1067,10 @@ function useWindowSplitterPanelGroupBehavior({
1035
1067
  if (size != null && collapsible) {
1036
1068
  const nextLayout = adjustLayoutByDelta({
1037
1069
  delta: fuzzyNumbersEqual(size, collapsedSize) ? minSize - collapsedSize : collapsedSize - size,
1038
- layout,
1070
+ initialLayout: layout,
1039
1071
  panelConstraints: panelDataArray.map(panelData => panelData.constraints),
1040
1072
  pivotIndices: determinePivotIndices(groupId, handleId, panelGroupElement),
1073
+ prevLayout: layout,
1041
1074
  trigger: "keyboard"
1042
1075
  });
1043
1076
  if (layout !== nextLayout) {
@@ -1614,9 +1647,10 @@ function PanelGroupWithForwardedRef({
1614
1647
  const delta = isLastPanel ? panelSize - collapsedSize : collapsedSize - panelSize;
1615
1648
  const nextLayout = adjustLayoutByDelta({
1616
1649
  delta,
1617
- layout: prevLayout,
1650
+ initialLayout: prevLayout,
1618
1651
  panelConstraints: panelConstraintsArray,
1619
1652
  pivotIndices,
1653
+ prevLayout,
1620
1654
  trigger: "imperative-api"
1621
1655
  });
1622
1656
  if (!compareLayouts(prevLayout, nextLayout)) {
@@ -1656,9 +1690,10 @@ function PanelGroupWithForwardedRef({
1656
1690
  const delta = isLastPanel ? panelSize - baseSize : baseSize - panelSize;
1657
1691
  const nextLayout = adjustLayoutByDelta({
1658
1692
  delta,
1659
- layout: prevLayout,
1693
+ initialLayout: prevLayout,
1660
1694
  panelConstraints: panelConstraintsArray,
1661
1695
  pivotIndices,
1696
+ prevLayout,
1662
1697
  trigger: "imperative-api"
1663
1698
  });
1664
1699
  if (!compareLayouts(prevLayout, nextLayout)) {
@@ -1784,9 +1819,10 @@ function PanelGroupWithForwardedRef({
1784
1819
  const panelConstraints = panelDataArray.map(panelData => panelData.constraints);
1785
1820
  const nextLayout = adjustLayoutByDelta({
1786
1821
  delta,
1787
- layout: initialLayout !== null && initialLayout !== void 0 ? initialLayout : prevLayout,
1822
+ initialLayout: initialLayout !== null && initialLayout !== void 0 ? initialLayout : prevLayout,
1788
1823
  panelConstraints,
1789
1824
  pivotIndices,
1825
+ prevLayout,
1790
1826
  trigger: isKeyDown(event) ? "keyboard" : "mouse-or-touch"
1791
1827
  });
1792
1828
  const layoutChanged = !compareLayouts(prevLayout, nextLayout);
@@ -1842,9 +1878,10 @@ function PanelGroupWithForwardedRef({
1842
1878
  const delta = isLastPanel ? panelSize - unsafePanelSize : unsafePanelSize - panelSize;
1843
1879
  const nextLayout = adjustLayoutByDelta({
1844
1880
  delta,
1845
- layout: prevLayout,
1881
+ initialLayout: prevLayout,
1846
1882
  panelConstraints: panelConstraintsArray,
1847
1883
  pivotIndices,
1884
+ prevLayout,
1848
1885
  trigger: "imperative-api"
1849
1886
  });
1850
1887
  if (!compareLayouts(prevLayout, nextLayout)) {