react-resizable-panels 2.0.9 → 2.0.10

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 (33) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/dist/declarations/src/utils/assert.d.ts +1 -1
  3. package/dist/react-resizable-panels.browser.cjs.js +50 -52
  4. package/dist/react-resizable-panels.browser.development.cjs.js +52 -54
  5. package/dist/react-resizable-panels.browser.development.esm.js +52 -54
  6. package/dist/react-resizable-panels.browser.esm.js +50 -52
  7. package/dist/react-resizable-panels.cjs.js +50 -52
  8. package/dist/react-resizable-panels.development.cjs.js +52 -54
  9. package/dist/react-resizable-panels.development.esm.js +52 -54
  10. package/dist/react-resizable-panels.development.node.cjs.js +48 -50
  11. package/dist/react-resizable-panels.development.node.esm.js +48 -50
  12. package/dist/react-resizable-panels.esm.js +50 -52
  13. package/dist/react-resizable-panels.node.cjs.js +46 -48
  14. package/dist/react-resizable-panels.node.esm.js +46 -48
  15. package/package.json +1 -1
  16. package/src/Panel.test.tsx +23 -23
  17. package/src/PanelGroup.test.tsx +32 -3
  18. package/src/PanelGroup.ts +25 -7
  19. package/src/PanelResizeHandle.test.tsx +3 -3
  20. package/src/PanelResizeHandle.ts +1 -1
  21. package/src/hooks/useWindowSplitterBehavior.ts +5 -2
  22. package/src/hooks/useWindowSplitterPanelGroupBehavior.ts +5 -5
  23. package/src/utils/adjustLayoutByDelta.ts +47 -20
  24. package/src/utils/assert.ts +1 -1
  25. package/src/utils/calculateAriaValues.ts +1 -1
  26. package/src/utils/calculateDragOffsetPercentage.ts +6 -3
  27. package/src/utils/calculateUnsafeDefaultLayout.ts +2 -2
  28. package/src/utils/callPanelCallbacks.ts +1 -1
  29. package/src/utils/resizePanel.ts +4 -1
  30. package/src/utils/test-utils.ts +1 -1
  31. package/src/utils/validatePanelConstraints.ts +4 -1
  32. package/src/utils/validatePanelGroupLayout.ts +3 -3
  33. package/src/vendor/stacking-order.ts +5 -2
@@ -331,7 +331,7 @@ function compare(a, b) {
331
331
  b = ancestors.b.pop();
332
332
  common_ancestor = a;
333
333
  }
334
- assert(common_ancestor);
334
+ assert(common_ancestor, "Stacking order can only be calculated for elements with a common ancestor");
335
335
  const z_indexes = {
336
336
  a: get_z_index(find_stacking_context(ancestors.a)),
337
337
  b: get_z_index(find_stacking_context(ancestors.b))
@@ -389,7 +389,7 @@ function find_stacking_context(nodes) {
389
389
  let i = nodes.length;
390
390
  while (i--) {
391
391
  const node = nodes[i];
392
- assert(node);
392
+ assert(node, "Missing node");
393
393
  if (creates_stacking_context(node)) return node;
394
394
  }
395
395
  return null;
@@ -676,7 +676,7 @@ function updateResizeHandlerStates(action, event) {
676
676
  });
677
677
  }
678
678
 
679
- function assert(expectedCondition, message = "Assertion failed!") {
679
+ function assert(expectedCondition, message) {
680
680
  if (!expectedCondition) {
681
681
  console.error(message);
682
682
  throw Error(message);
@@ -707,7 +707,7 @@ function resizePanel({
707
707
  size
708
708
  }) {
709
709
  const panelConstraints = panelConstraintsArray[panelIndex];
710
- assert(panelConstraints != null);
710
+ assert(panelConstraints != null, `Panel constraints not found for index ${panelIndex}`);
711
711
  let {
712
712
  collapsedSize = 0,
713
713
  collapsible,
@@ -745,8 +745,8 @@ function adjustLayoutByDelta({
745
745
  }
746
746
  const nextLayout = [...prevLayout];
747
747
  const [firstPivotIndex, secondPivotIndex] = pivotIndices;
748
- assert(firstPivotIndex != null);
749
- assert(secondPivotIndex != null);
748
+ assert(firstPivotIndex != null, "Invalid first pivot index");
749
+ assert(secondPivotIndex != null, "Invalid second pivot index");
750
750
  let deltaApplied = 0;
751
751
 
752
752
  //const DEBUG = [];
@@ -772,19 +772,18 @@ function adjustLayoutByDelta({
772
772
  // Check if we should expand a collapsed panel
773
773
  const index = delta < 0 ? secondPivotIndex : firstPivotIndex;
774
774
  const panelConstraints = panelConstraintsArray[index];
775
- assert(panelConstraints);
775
+ assert(panelConstraints, `Panel constraints not found for index ${index}`);
776
+ const {
777
+ collapsedSize = 0,
778
+ collapsible,
779
+ minSize = 0
780
+ } = panelConstraints;
776
781
 
777
782
  //DEBUG.push(`edge case check 1: ${index}`);
778
783
  //DEBUG.push(` -> collapsible? ${constraints.collapsible}`);
779
- if (panelConstraints.collapsible) {
784
+ if (collapsible) {
780
785
  const prevSize = prevLayout[index];
781
- assert(prevSize != null);
782
- const panelConstraints = panelConstraintsArray[index];
783
- assert(panelConstraints);
784
- const {
785
- collapsedSize = 0,
786
- minSize = 0
787
- } = panelConstraints;
786
+ assert(prevSize != null, `Previous layout not found for panel index ${index}`);
788
787
  if (fuzzyNumbersEqual(prevSize, collapsedSize)) {
789
788
  const localDelta = minSize - prevSize;
790
789
  //DEBUG.push(` -> expand delta: ${localDelta}`);
@@ -801,22 +800,18 @@ function adjustLayoutByDelta({
801
800
  // Check if we should collapse a panel at its minimum size
802
801
  const index = delta < 0 ? firstPivotIndex : secondPivotIndex;
803
802
  const panelConstraints = panelConstraintsArray[index];
804
- assert(panelConstraints);
803
+ assert(panelConstraints, `No panel constraints found for index ${index}`);
805
804
  const {
806
- collapsible
805
+ collapsedSize = 0,
806
+ collapsible,
807
+ minSize = 0
807
808
  } = panelConstraints;
808
809
 
809
810
  //DEBUG.push(`edge case check 2: ${index}`);
810
811
  //DEBUG.push(` -> collapsible? ${collapsible}`);
811
812
  if (collapsible) {
812
813
  const prevSize = prevLayout[index];
813
- assert(prevSize != null);
814
- const panelConstraints = panelConstraintsArray[index];
815
- assert(panelConstraints);
816
- const {
817
- collapsedSize = 0,
818
- minSize = 0
819
- } = panelConstraints;
814
+ assert(prevSize != null, `Previous layout not found for panel index ${index}`);
820
815
  if (fuzzyNumbersEqual(prevSize, minSize)) {
821
816
  const localDelta = prevSize - collapsedSize;
822
817
  //DEBUG.push(` -> expand delta: ${localDelta}`);
@@ -846,7 +841,7 @@ function adjustLayoutByDelta({
846
841
  //DEBUG.push("pre calc...");
847
842
  while (true) {
848
843
  const prevSize = prevLayout[index];
849
- assert(prevSize != null);
844
+ assert(prevSize != null, `Previous layout not found for panel index ${index}`);
850
845
  const maxSafeSize = resizePanel({
851
846
  panelConstraints: panelConstraintsArray,
852
847
  panelIndex: index,
@@ -877,7 +872,7 @@ function adjustLayoutByDelta({
877
872
  while (index >= 0 && index < panelConstraintsArray.length) {
878
873
  const deltaRemaining = Math.abs(delta) - Math.abs(deltaApplied);
879
874
  const prevSize = prevLayout[index];
880
- assert(prevSize != null);
875
+ assert(prevSize != null, `Previous layout not found for panel index ${index}`);
881
876
  const unsafeSize = prevSize - deltaRemaining;
882
877
  const safeSize = resizePanel({
883
878
  panelConstraints: panelConstraintsArray,
@@ -914,7 +909,7 @@ function adjustLayoutByDelta({
914
909
  // Now distribute the applied delta to the panels in the other direction
915
910
  const pivotIndex = delta < 0 ? secondPivotIndex : firstPivotIndex;
916
911
  const prevSize = prevLayout[pivotIndex];
917
- assert(prevSize != null);
912
+ assert(prevSize != null, `Previous layout not found for panel index ${pivotIndex}`);
918
913
  const unsafeSize = prevSize + deltaApplied;
919
914
  const safeSize = resizePanel({
920
915
  panelConstraints: panelConstraintsArray,
@@ -932,7 +927,7 @@ function adjustLayoutByDelta({
932
927
  let index = pivotIndex;
933
928
  while (index >= 0 && index < panelConstraintsArray.length) {
934
929
  const prevSize = nextLayout[index];
935
- assert(prevSize != null);
930
+ assert(prevSize != null, `Previous layout not found for panel index ${index}`);
936
931
  const unsafeSize = prevSize + deltaRemaining;
937
932
  const safeSize = resizePanel({
938
933
  panelConstraints: panelConstraintsArray,
@@ -978,7 +973,7 @@ function calculateAriaValues({
978
973
  let totalMinSize = 0;
979
974
  let totalMaxSize = 0;
980
975
  const firstIndex = pivotIndices[0];
981
- assert(firstIndex != null);
976
+ assert(firstIndex != null, "No pivot index found");
982
977
 
983
978
  // A panel's effective min/max sizes also need to account for other panel's sizes.
984
979
  panelsArray.forEach((panelData, index) => {
@@ -1097,7 +1092,7 @@ function useWindowSplitterPanelGroupBehavior({
1097
1092
  }
1098
1093
  } else {
1099
1094
  const panelData = panelDataArray[index];
1100
- assert(panelData);
1095
+ assert(panelData, `No panel data found for index "${index}"`);
1101
1096
  resizeHandleElement.setAttribute("aria-controls", panelData.id);
1102
1097
  resizeHandleElement.setAttribute("aria-valuemax", "" + Math.round(valueMax));
1103
1098
  resizeHandleElement.setAttribute("aria-valuemin", "" + Math.round(valueMin));
@@ -1118,17 +1113,17 @@ function useWindowSplitterPanelGroupBehavior({
1118
1113
  return;
1119
1114
  }
1120
1115
  const eagerValues = eagerValuesRef.current;
1121
- assert(eagerValues);
1116
+ assert(eagerValues, `Eager values not found`);
1122
1117
  const {
1123
1118
  panelDataArray
1124
1119
  } = eagerValues;
1125
1120
  const groupElement = getPanelGroupElement(groupId, panelGroupElement);
1126
1121
  assert(groupElement != null, `No group found for id "${groupId}"`);
1127
1122
  const handles = getResizeHandleElementsForGroup(groupId, panelGroupElement);
1128
- assert(handles);
1123
+ assert(handles, `No resize handles found for group id "${groupId}"`);
1129
1124
  const cleanupFunctions = handles.map(handle => {
1130
1125
  const handleId = handle.getAttribute("data-panel-resize-handle-id");
1131
- assert(handleId);
1126
+ assert(handleId, `Resize handle element has no handle id attribute`);
1132
1127
  const [idBefore, idAfter] = getResizeHandlePanelIds(groupId, handleId, panelDataArray, panelGroupElement);
1133
1128
  if (idBefore == null || idAfter == null) {
1134
1129
  return () => {};
@@ -1144,7 +1139,7 @@ function useWindowSplitterPanelGroupBehavior({
1144
1139
  const index = panelDataArray.findIndex(panelData => panelData.id === idBefore);
1145
1140
  if (index >= 0) {
1146
1141
  const panelData = panelDataArray[index];
1147
- assert(panelData);
1142
+ assert(panelData, `No panel data found for index ${index}`);
1148
1143
  const size = layout[index];
1149
1144
  const {
1150
1145
  collapsedSize = 0,
@@ -1203,15 +1198,15 @@ function getResizeEventCursorPosition(direction, event) {
1203
1198
  function calculateDragOffsetPercentage(event, dragHandleId, direction, initialDragState, panelGroupElement) {
1204
1199
  const isHorizontal = direction === "horizontal";
1205
1200
  const handleElement = getResizeHandleElement(dragHandleId, panelGroupElement);
1206
- assert(handleElement);
1201
+ assert(handleElement, `No resize handle element found for id "${dragHandleId}"`);
1207
1202
  const groupId = handleElement.getAttribute("data-panel-group-id");
1208
- assert(groupId);
1203
+ assert(groupId, `Resize handle element has no group id attribute`);
1209
1204
  let {
1210
1205
  initialCursorPosition
1211
1206
  } = initialDragState;
1212
1207
  const cursorPosition = getResizeEventCursorPosition(direction, event);
1213
1208
  const groupElement = getPanelGroupElement(groupId, panelGroupElement);
1214
- assert(groupElement);
1209
+ assert(groupElement, `No group element found for id "${groupId}"`);
1215
1210
  const groupRect = groupElement.getBoundingClientRect();
1216
1211
  const groupSizeInPixels = isHorizontal ? groupRect.width : groupRect.height;
1217
1212
  const offsetPixels = cursorPosition - initialCursorPosition;
@@ -1272,7 +1267,7 @@ function calculateUnsafeDefaultLayout({
1272
1267
  // Distribute default sizes first
1273
1268
  for (let index = 0; index < panelDataArray.length; index++) {
1274
1269
  const panelConstraints = panelConstraintsArray[index];
1275
- assert(panelConstraints);
1270
+ assert(panelConstraints, `Panel constraints not found for index ${index}`);
1276
1271
  const {
1277
1272
  defaultSize
1278
1273
  } = panelConstraints;
@@ -1286,7 +1281,7 @@ function calculateUnsafeDefaultLayout({
1286
1281
  // Remaining size should be distributed evenly between panels without default sizes
1287
1282
  for (let index = 0; index < panelDataArray.length; index++) {
1288
1283
  const panelConstraints = panelConstraintsArray[index];
1289
- assert(panelConstraints);
1284
+ assert(panelConstraints, `Panel constraints not found for index ${index}`);
1290
1285
  const {
1291
1286
  defaultSize
1292
1287
  } = panelConstraints;
@@ -1306,7 +1301,7 @@ function calculateUnsafeDefaultLayout({
1306
1301
  function callPanelCallbacks(panelsArray, layout, panelIdToLastNotifiedSizeMap) {
1307
1302
  layout.forEach((size, index) => {
1308
1303
  const panelData = panelsArray[index];
1309
- assert(panelData);
1304
+ assert(panelData, `Panel data not found for index ${index}`);
1310
1305
  const {
1311
1306
  callbacks,
1312
1307
  constraints,
@@ -1490,7 +1485,7 @@ function validatePanelConstraints({
1490
1485
  {
1491
1486
  const warnings = [];
1492
1487
  const panelConstraints = panelConstraintsArray[panelIndex];
1493
- assert(panelConstraints);
1488
+ assert(panelConstraints, `No panel constraints found for index ${panelIndex}`);
1494
1489
  const {
1495
1490
  collapsedSize = 0,
1496
1491
  collapsible = false,
@@ -1544,7 +1539,7 @@ function validatePanelGroupLayout({
1544
1539
  }
1545
1540
  for (let index = 0; index < panelConstraints.length; index++) {
1546
1541
  const unsafeSize = nextLayout[index];
1547
- assert(unsafeSize != null);
1542
+ assert(unsafeSize != null, `No layout data found for index ${index}`);
1548
1543
  const safeSize = 100 / nextLayoutTotalSize * unsafeSize;
1549
1544
  nextLayout[index] = safeSize;
1550
1545
  }
@@ -1554,7 +1549,7 @@ function validatePanelGroupLayout({
1554
1549
  // First pass: Validate the proposed layout given each panel's constraints
1555
1550
  for (let index = 0; index < panelConstraints.length; index++) {
1556
1551
  const unsafeSize = nextLayout[index];
1557
- assert(unsafeSize != null);
1552
+ assert(unsafeSize != null, `No layout data found for index ${index}`);
1558
1553
  const safeSize = resizePanel({
1559
1554
  panelConstraints,
1560
1555
  panelIndex: index,
@@ -1571,7 +1566,7 @@ function validatePanelGroupLayout({
1571
1566
  if (!fuzzyNumbersEqual(remainingSize, 0)) {
1572
1567
  for (let index = 0; index < panelConstraints.length; index++) {
1573
1568
  const prevSize = nextLayout[index];
1574
- assert(prevSize != null);
1569
+ assert(prevSize != null, `No layout data found for index ${index}`);
1575
1570
  const unsafeSize = prevSize + remainingSize;
1576
1571
  const safeSize = resizePanel({
1577
1572
  panelConstraints,
@@ -1748,7 +1743,7 @@ function PanelGroupWithForwardedRef({
1748
1743
  const panelConstraints = panelDataArray.map(panelData => panelData.constraints);
1749
1744
  for (let panelIndex = 0; panelIndex < panelConstraints.length; panelIndex++) {
1750
1745
  const panelData = panelDataArray[panelIndex];
1751
- assert(panelData);
1746
+ assert(panelData, `Panel data not found for index ${panelIndex}`);
1752
1747
  const isValid = validatePanelConstraints({
1753
1748
  panelConstraints,
1754
1749
  panelId: panelData.id,
@@ -1779,7 +1774,7 @@ function PanelGroupWithForwardedRef({
1779
1774
  panelSize,
1780
1775
  pivotIndices
1781
1776
  } = panelDataHelper(panelDataArray, panelData, prevLayout);
1782
- assert(panelSize != null);
1777
+ assert(panelSize != null, `Panel size not found for panel "${panelData.id}"`);
1783
1778
  if (panelSize !== collapsedSize) {
1784
1779
  // Store size before collapse;
1785
1780
  // This is the size that gets restored if the expand() API is used.
@@ -1856,7 +1851,7 @@ function PanelGroupWithForwardedRef({
1856
1851
  const {
1857
1852
  panelSize
1858
1853
  } = panelDataHelper(panelDataArray, panelData, layout);
1859
- assert(panelSize != null);
1854
+ assert(panelSize != null, `Panel size not found for panel "${panelData.id}"`);
1860
1855
  return panelSize;
1861
1856
  }, []);
1862
1857
 
@@ -1900,7 +1895,7 @@ function PanelGroupWithForwardedRef({
1900
1895
  collapsible,
1901
1896
  panelSize
1902
1897
  } = panelDataHelper(panelDataArray, panelData, layout);
1903
- assert(panelSize != null);
1898
+ assert(panelSize != null, `Panel size not found for panel "${panelData.id}"`);
1904
1899
  return !collapsible || panelSize > collapsedSize;
1905
1900
  }, []);
1906
1901
  const registerPanel = useCallback(panelData => {
@@ -2067,7 +2062,7 @@ function PanelGroupWithForwardedRef({
2067
2062
  panelSize,
2068
2063
  pivotIndices
2069
2064
  } = panelDataHelper(panelDataArray, panelData, prevLayout);
2070
- assert(panelSize != null);
2065
+ assert(panelSize != null, `Panel size not found for panel "${panelData.id}"`);
2071
2066
  const isLastPanel = findPanelDataIndex(panelDataArray, panelData) === panelDataArray.length - 1;
2072
2067
  const delta = isLastPanel ? panelSize - unsafePanelSize : unsafePanelSize - panelSize;
2073
2068
  const nextLayout = adjustLayoutByDelta({
@@ -2104,7 +2099,10 @@ function PanelGroupWithForwardedRef({
2104
2099
  const {
2105
2100
  panelSize: prevPanelSize
2106
2101
  } = panelDataHelper(panelDataArray, panelData, layout);
2107
- assert(prevPanelSize != null);
2102
+ if (prevPanelSize == null) {
2103
+ // It's possible that the panels in this group have changed since the last render
2104
+ return;
2105
+ }
2108
2106
  if (prevCollapsible && nextCollapsible && prevPanelSize === prevCollapsedSize) {
2109
2107
  if (prevCollapsedSize !== nextCollapsedSize) {
2110
2108
  resizePanel(panelData, nextCollapsedSize);
@@ -2126,7 +2124,7 @@ function PanelGroupWithForwardedRef({
2126
2124
  return;
2127
2125
  }
2128
2126
  const handleElement = getResizeHandleElement(dragHandleId, panelGroupElementRef.current);
2129
- assert(handleElement);
2127
+ assert(handleElement, `Drag handle element not found for id "${dragHandleId}"`);
2130
2128
  const initialCursorPosition = getResizeEventCursorPosition(direction, event);
2131
2129
  setDragState({
2132
2130
  dragHandleId,
@@ -2255,10 +2253,10 @@ function useWindowSplitterResizeHandlerBehavior({
2255
2253
  {
2256
2254
  event.preventDefault();
2257
2255
  const groupId = handleElement.getAttribute("data-panel-group-id");
2258
- assert(groupId);
2256
+ assert(groupId, `No group element found for id "${groupId}"`);
2259
2257
  const handles = getResizeHandleElementsForGroup(groupId, panelGroupElement);
2260
2258
  const index = getResizeHandleElementIndex(groupId, handleId, panelGroupElement);
2261
- assert(index !== null);
2259
+ assert(index !== null, `No resize element found for id "${handleId}"`);
2262
2260
  const nextIndex = event.shiftKey ? index > 0 ? index - 1 : handles.length - 1 : index + 1 < handles.length ? index + 1 : 0;
2263
2261
  const nextHandle = handles[nextIndex];
2264
2262
  nextHandle.focus();
@@ -2330,7 +2328,7 @@ function PanelResizeHandle({
2330
2328
  return;
2331
2329
  }
2332
2330
  const element = elementRef.current;
2333
- assert(element);
2331
+ assert(element, "Element ref not attached");
2334
2332
  const setResizeHandlerState = (action, isActive, event) => {
2335
2333
  if (isActive) {
2336
2334
  switch (action) {