react-resizable-panels 2.0.9 → 2.0.11

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 (34) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/declarations/src/utils/assert.d.ts +1 -1
  3. package/dist/react-resizable-panels.browser.cjs.js +55 -57
  4. package/dist/react-resizable-panels.browser.development.cjs.js +57 -59
  5. package/dist/react-resizable-panels.browser.development.esm.js +57 -59
  6. package/dist/react-resizable-panels.browser.esm.js +55 -57
  7. package/dist/react-resizable-panels.cjs.js +55 -57
  8. package/dist/react-resizable-panels.development.cjs.js +57 -59
  9. package/dist/react-resizable-panels.development.esm.js +57 -59
  10. package/dist/react-resizable-panels.development.node.cjs.js +53 -55
  11. package/dist/react-resizable-panels.development.node.esm.js +53 -55
  12. package/dist/react-resizable-panels.esm.js +55 -57
  13. package/dist/react-resizable-panels.node.cjs.js +51 -53
  14. package/dist/react-resizable-panels.node.esm.js +51 -53
  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/events/getResizeEventCoordinates.ts +5 -5
  30. package/src/utils/resizePanel.ts +4 -1
  31. package/src/utils/test-utils.ts +1 -1
  32. package/src/utils/validatePanelConstraints.ts +4 -1
  33. package/src/utils/validatePanelGroupLayout.ts +3 -3
  34. package/src/vendor/stacking-order.ts +5 -2
@@ -72,7 +72,7 @@ export function useWindowSplitterPanelGroupBehavior({
72
72
  }
73
73
  } else {
74
74
  const panelData = panelDataArray[index];
75
- assert(panelData);
75
+ assert(panelData, `No panel data found for index "${index}"`);
76
76
 
77
77
  resizeHandleElement.setAttribute("aria-controls", panelData.id);
78
78
  resizeHandleElement.setAttribute(
@@ -105,18 +105,18 @@ export function useWindowSplitterPanelGroupBehavior({
105
105
  return;
106
106
  }
107
107
  const eagerValues = eagerValuesRef.current;
108
- assert(eagerValues);
108
+ assert(eagerValues, `Eager values not found`);
109
109
 
110
110
  const { panelDataArray } = eagerValues;
111
111
  const groupElement = getPanelGroupElement(groupId, panelGroupElement);
112
112
  assert(groupElement != null, `No group found for id "${groupId}"`);
113
113
 
114
114
  const handles = getResizeHandleElementsForGroup(groupId, panelGroupElement);
115
- assert(handles);
115
+ assert(handles, `No resize handles found for group id "${groupId}"`);
116
116
 
117
117
  const cleanupFunctions = handles.map((handle) => {
118
118
  const handleId = handle.getAttribute("data-panel-resize-handle-id");
119
- assert(handleId);
119
+ assert(handleId, `Resize handle element has no handle id attribute`);
120
120
 
121
121
  const [idBefore, idAfter] = getResizeHandlePanelIds(
122
122
  groupId,
@@ -142,7 +142,7 @@ export function useWindowSplitterPanelGroupBehavior({
142
142
  );
143
143
  if (index >= 0) {
144
144
  const panelData = panelDataArray[index];
145
- assert(panelData);
145
+ assert(panelData, `No panel data found for index ${index}`);
146
146
 
147
147
  const size = layout[index];
148
148
 
@@ -25,8 +25,8 @@ export function adjustLayoutByDelta({
25
25
  const nextLayout = [...prevLayout];
26
26
 
27
27
  const [firstPivotIndex, secondPivotIndex] = pivotIndices;
28
- assert(firstPivotIndex != null);
29
- assert(secondPivotIndex != null);
28
+ assert(firstPivotIndex != null, "Invalid first pivot index");
29
+ assert(secondPivotIndex != null, "Invalid second pivot index");
30
30
 
31
31
  let deltaApplied = 0;
32
32
 
@@ -53,17 +53,25 @@ export function adjustLayoutByDelta({
53
53
  // Check if we should expand a collapsed panel
54
54
  const index = delta < 0 ? secondPivotIndex : firstPivotIndex;
55
55
  const panelConstraints = panelConstraintsArray[index];
56
- assert(panelConstraints);
56
+ assert(
57
+ panelConstraints,
58
+ `Panel constraints not found for index ${index}`
59
+ );
60
+
61
+ const {
62
+ collapsedSize = 0,
63
+ collapsible,
64
+ minSize = 0,
65
+ } = panelConstraints;
57
66
 
58
67
  //DEBUG.push(`edge case check 1: ${index}`);
59
68
  //DEBUG.push(` -> collapsible? ${constraints.collapsible}`);
60
- if (panelConstraints.collapsible) {
69
+ if (collapsible) {
61
70
  const prevSize = prevLayout[index];
62
- assert(prevSize != null);
63
-
64
- const panelConstraints = panelConstraintsArray[index];
65
- assert(panelConstraints);
66
- const { collapsedSize = 0, minSize = 0 } = panelConstraints;
71
+ assert(
72
+ prevSize != null,
73
+ `Previous layout not found for panel index ${index}`
74
+ );
67
75
 
68
76
  if (fuzzyNumbersEqual(prevSize, collapsedSize)) {
69
77
  const localDelta = minSize - prevSize;
@@ -81,18 +89,25 @@ export function adjustLayoutByDelta({
81
89
  // Check if we should collapse a panel at its minimum size
82
90
  const index = delta < 0 ? firstPivotIndex : secondPivotIndex;
83
91
  const panelConstraints = panelConstraintsArray[index];
84
- assert(panelConstraints);
85
- const { collapsible } = panelConstraints;
92
+ assert(
93
+ panelConstraints,
94
+ `No panel constraints found for index ${index}`
95
+ );
96
+
97
+ const {
98
+ collapsedSize = 0,
99
+ collapsible,
100
+ minSize = 0,
101
+ } = panelConstraints;
86
102
 
87
103
  //DEBUG.push(`edge case check 2: ${index}`);
88
104
  //DEBUG.push(` -> collapsible? ${collapsible}`);
89
105
  if (collapsible) {
90
106
  const prevSize = prevLayout[index];
91
- assert(prevSize != null);
92
-
93
- const panelConstraints = panelConstraintsArray[index];
94
- assert(panelConstraints);
95
- const { collapsedSize = 0, minSize = 0 } = panelConstraints;
107
+ assert(
108
+ prevSize != null,
109
+ `Previous layout not found for panel index ${index}`
110
+ );
96
111
 
97
112
  if (fuzzyNumbersEqual(prevSize, minSize)) {
98
113
  const localDelta = prevSize - collapsedSize;
@@ -124,7 +139,10 @@ export function adjustLayoutByDelta({
124
139
  //DEBUG.push("pre calc...");
125
140
  while (true) {
126
141
  const prevSize = prevLayout[index];
127
- assert(prevSize != null);
142
+ assert(
143
+ prevSize != null,
144
+ `Previous layout not found for panel index ${index}`
145
+ );
128
146
 
129
147
  const maxSafeSize = resizePanel({
130
148
  panelConstraints: panelConstraintsArray,
@@ -158,7 +176,10 @@ export function adjustLayoutByDelta({
158
176
  const deltaRemaining = Math.abs(delta) - Math.abs(deltaApplied);
159
177
 
160
178
  const prevSize = prevLayout[index];
161
- assert(prevSize != null);
179
+ assert(
180
+ prevSize != null,
181
+ `Previous layout not found for panel index ${index}`
182
+ );
162
183
 
163
184
  const unsafeSize = prevSize - deltaRemaining;
164
185
  const safeSize = resizePanel({
@@ -206,7 +227,10 @@ export function adjustLayoutByDelta({
206
227
  const pivotIndex = delta < 0 ? secondPivotIndex : firstPivotIndex;
207
228
 
208
229
  const prevSize = prevLayout[pivotIndex];
209
- assert(prevSize != null);
230
+ assert(
231
+ prevSize != null,
232
+ `Previous layout not found for panel index ${pivotIndex}`
233
+ );
210
234
 
211
235
  const unsafeSize = prevSize + deltaApplied;
212
236
  const safeSize = resizePanel({
@@ -226,7 +250,10 @@ export function adjustLayoutByDelta({
226
250
  let index = pivotIndex;
227
251
  while (index >= 0 && index < panelConstraintsArray.length) {
228
252
  const prevSize = nextLayout[index];
229
- assert(prevSize != null);
253
+ assert(
254
+ prevSize != null,
255
+ `Previous layout not found for panel index ${index}`
256
+ );
230
257
 
231
258
  const unsafeSize = prevSize + deltaRemaining;
232
259
  const safeSize = resizePanel({
@@ -1,6 +1,6 @@
1
1
  export function assert(
2
2
  expectedCondition: any,
3
- message: string = "Assertion failed!"
3
+ message: string
4
4
  ): asserts expectedCondition {
5
5
  if (!expectedCondition) {
6
6
  console.error(message);
@@ -16,7 +16,7 @@ export function calculateAriaValues({
16
16
  let totalMaxSize = 0;
17
17
 
18
18
  const firstIndex = pivotIndices[0];
19
- assert(firstIndex != null);
19
+ assert(firstIndex != null, "No pivot index found");
20
20
 
21
21
  // A panel's effective min/max sizes also need to account for other panel's sizes.
22
22
  panelsArray.forEach((panelData, index) => {
@@ -15,17 +15,20 @@ export function calculateDragOffsetPercentage(
15
15
  const isHorizontal = direction === "horizontal";
16
16
 
17
17
  const handleElement = getResizeHandleElement(dragHandleId, panelGroupElement);
18
- assert(handleElement);
18
+ assert(
19
+ handleElement,
20
+ `No resize handle element found for id "${dragHandleId}"`
21
+ );
19
22
 
20
23
  const groupId = handleElement.getAttribute("data-panel-group-id");
21
- assert(groupId);
24
+ assert(groupId, `Resize handle element has no group id attribute`);
22
25
 
23
26
  let { initialCursorPosition } = initialDragState;
24
27
 
25
28
  const cursorPosition = getResizeEventCursorPosition(direction, event);
26
29
 
27
30
  const groupElement = getPanelGroupElement(groupId, panelGroupElement);
28
- assert(groupElement);
31
+ assert(groupElement, `No group element found for id "${groupId}"`);
29
32
 
30
33
  const groupRect = groupElement.getBoundingClientRect();
31
34
  const groupSizeInPixels = isHorizontal ? groupRect.width : groupRect.height;
@@ -18,7 +18,7 @@ export function calculateUnsafeDefaultLayout({
18
18
  // Distribute default sizes first
19
19
  for (let index = 0; index < panelDataArray.length; index++) {
20
20
  const panelConstraints = panelConstraintsArray[index];
21
- assert(panelConstraints);
21
+ assert(panelConstraints, `Panel constraints not found for index ${index}`);
22
22
  const { defaultSize } = panelConstraints;
23
23
 
24
24
  if (defaultSize != null) {
@@ -31,7 +31,7 @@ export function calculateUnsafeDefaultLayout({
31
31
  // Remaining size should be distributed evenly between panels without default sizes
32
32
  for (let index = 0; index < panelDataArray.length; index++) {
33
33
  const panelConstraints = panelConstraintsArray[index];
34
- assert(panelConstraints);
34
+ assert(panelConstraints, `Panel constraints not found for index ${index}`);
35
35
  const { defaultSize } = panelConstraints;
36
36
 
37
37
  if (defaultSize != null) {
@@ -9,7 +9,7 @@ export function callPanelCallbacks(
9
9
  ) {
10
10
  layout.forEach((size, index) => {
11
11
  const panelData = panelsArray[index];
12
- assert(panelData);
12
+ assert(panelData, `Panel data not found for index ${index}`);
13
13
 
14
14
  const { callbacks, constraints, id: panelId } = panelData;
15
15
  const { collapsedSize = 0, collapsible } = constraints;
@@ -4,15 +4,15 @@ import { isMouseEvent, isTouchEvent } from ".";
4
4
  export function getResizeEventCoordinates(event: ResizeEvent) {
5
5
  if (isMouseEvent(event)) {
6
6
  return {
7
- x: event.pageX,
8
- y: event.pageY,
7
+ x: event.clientX,
8
+ y: event.clientY,
9
9
  };
10
10
  } else if (isTouchEvent(event)) {
11
11
  const touch = event.touches[0];
12
- if (touch && touch.pageX && touch.pageY) {
12
+ if (touch && touch.clientX && touch.clientY) {
13
13
  return {
14
- x: touch.pageX,
15
- y: touch.pageY,
14
+ x: touch.clientX,
15
+ y: touch.clientY,
16
16
  };
17
17
  }
18
18
  }
@@ -14,7 +14,10 @@ export function resizePanel({
14
14
  size: number;
15
15
  }) {
16
16
  const panelConstraints = panelConstraintsArray[panelIndex];
17
- assert(panelConstraints != null);
17
+ assert(
18
+ panelConstraints != null,
19
+ `Panel constraints not found for index ${panelIndex}`
20
+ );
18
21
 
19
22
  let {
20
23
  collapsedSize = 0,
@@ -38,7 +38,7 @@ export function expectToBeCloseToArray(
38
38
  try {
39
39
  actualNumbers.forEach((actualNumber, index) => {
40
40
  const expectedNumber = expectedNumbers[index];
41
- assert(expectedNumber != null);
41
+ assert(expectedNumber != null, `Expected number not found`);
42
42
 
43
43
  expect(actualNumber).toBeCloseTo(expectedNumber, 1);
44
44
  });
@@ -15,7 +15,10 @@ export function validatePanelConstraints({
15
15
  const warnings = [];
16
16
 
17
17
  const panelConstraints = panelConstraintsArray[panelIndex];
18
- assert(panelConstraints);
18
+ assert(
19
+ panelConstraints,
20
+ `No panel constraints found for index ${panelIndex}`
21
+ );
19
22
 
20
23
  const {
21
24
  collapsedSize = 0,
@@ -37,7 +37,7 @@ export function validatePanelGroupLayout({
37
37
  }
38
38
  for (let index = 0; index < panelConstraints.length; index++) {
39
39
  const unsafeSize = nextLayout[index];
40
- assert(unsafeSize != null);
40
+ assert(unsafeSize != null, `No layout data found for index ${index}`);
41
41
  const safeSize = (100 / nextLayoutTotalSize) * unsafeSize;
42
42
  nextLayout[index] = safeSize;
43
43
  }
@@ -48,7 +48,7 @@ export function validatePanelGroupLayout({
48
48
  // First pass: Validate the proposed layout given each panel's constraints
49
49
  for (let index = 0; index < panelConstraints.length; index++) {
50
50
  const unsafeSize = nextLayout[index];
51
- assert(unsafeSize != null);
51
+ assert(unsafeSize != null, `No layout data found for index ${index}`);
52
52
 
53
53
  const safeSize = resizePanel({
54
54
  panelConstraints,
@@ -68,7 +68,7 @@ export function validatePanelGroupLayout({
68
68
  if (!fuzzyNumbersEqual(remainingSize, 0)) {
69
69
  for (let index = 0; index < panelConstraints.length; index++) {
70
70
  const prevSize = nextLayout[index];
71
- assert(prevSize != null);
71
+ assert(prevSize != null, `No layout data found for index ${index}`);
72
72
  const unsafeSize = prevSize + remainingSize;
73
73
  const safeSize = resizePanel({
74
74
  panelConstraints,
@@ -27,7 +27,10 @@ export function compare(a: HTMLElement, b: HTMLElement): number {
27
27
  common_ancestor = a;
28
28
  }
29
29
 
30
- assert(common_ancestor);
30
+ assert(
31
+ common_ancestor,
32
+ "Stacking order can only be calculated for elements with a common ancestor"
33
+ );
31
34
 
32
35
  const z_indexes = {
33
36
  a: get_z_index(find_stacking_context(ancestors.a)),
@@ -99,7 +102,7 @@ function find_stacking_context(nodes: HTMLElement[]) {
99
102
 
100
103
  while (i--) {
101
104
  const node = nodes[i];
102
- assert(node);
105
+ assert(node, "Missing node");
103
106
  if (creates_stacking_context(node)) return node;
104
107
  }
105
108