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.
- package/CHANGELOG.md +8 -0
- package/dist/declarations/src/utils/assert.d.ts +1 -1
- package/dist/react-resizable-panels.browser.cjs.js +55 -57
- package/dist/react-resizable-panels.browser.development.cjs.js +57 -59
- package/dist/react-resizable-panels.browser.development.esm.js +57 -59
- package/dist/react-resizable-panels.browser.esm.js +55 -57
- package/dist/react-resizable-panels.cjs.js +55 -57
- package/dist/react-resizable-panels.development.cjs.js +57 -59
- package/dist/react-resizable-panels.development.esm.js +57 -59
- package/dist/react-resizable-panels.development.node.cjs.js +53 -55
- package/dist/react-resizable-panels.development.node.esm.js +53 -55
- package/dist/react-resizable-panels.esm.js +55 -57
- package/dist/react-resizable-panels.node.cjs.js +51 -53
- package/dist/react-resizable-panels.node.esm.js +51 -53
- package/package.json +1 -1
- package/src/Panel.test.tsx +23 -23
- package/src/PanelGroup.test.tsx +32 -3
- package/src/PanelGroup.ts +25 -7
- package/src/PanelResizeHandle.test.tsx +3 -3
- package/src/PanelResizeHandle.ts +1 -1
- package/src/hooks/useWindowSplitterBehavior.ts +5 -2
- package/src/hooks/useWindowSplitterPanelGroupBehavior.ts +5 -5
- package/src/utils/adjustLayoutByDelta.ts +47 -20
- package/src/utils/assert.ts +1 -1
- package/src/utils/calculateAriaValues.ts +1 -1
- package/src/utils/calculateDragOffsetPercentage.ts +6 -3
- package/src/utils/calculateUnsafeDefaultLayout.ts +2 -2
- package/src/utils/callPanelCallbacks.ts +1 -1
- package/src/utils/events/getResizeEventCoordinates.ts +5 -5
- package/src/utils/resizePanel.ts +4 -1
- package/src/utils/test-utils.ts +1 -1
- package/src/utils/validatePanelConstraints.ts +4 -1
- package/src/utils/validatePanelGroupLayout.ts +3 -3
- 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(
|
|
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 (
|
|
69
|
+
if (collapsible) {
|
|
61
70
|
const prevSize = prevLayout[index];
|
|
62
|
-
assert(
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
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(
|
|
85
|
-
|
|
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(
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
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(
|
|
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(
|
|
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(
|
|
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(
|
|
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({
|
package/src/utils/assert.ts
CHANGED
|
@@ -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(
|
|
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.
|
|
8
|
-
y: event.
|
|
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.
|
|
12
|
+
if (touch && touch.clientX && touch.clientY) {
|
|
13
13
|
return {
|
|
14
|
-
x: touch.
|
|
15
|
-
y: touch.
|
|
14
|
+
x: touch.clientX,
|
|
15
|
+
y: touch.clientY,
|
|
16
16
|
};
|
|
17
17
|
}
|
|
18
18
|
}
|
package/src/utils/resizePanel.ts
CHANGED
|
@@ -14,7 +14,10 @@ export function resizePanel({
|
|
|
14
14
|
size: number;
|
|
15
15
|
}) {
|
|
16
16
|
const panelConstraints = panelConstraintsArray[panelIndex];
|
|
17
|
-
assert(
|
|
17
|
+
assert(
|
|
18
|
+
panelConstraints != null,
|
|
19
|
+
`Panel constraints not found for index ${panelIndex}`
|
|
20
|
+
);
|
|
18
21
|
|
|
19
22
|
let {
|
|
20
23
|
collapsedSize = 0,
|
package/src/utils/test-utils.ts
CHANGED
|
@@ -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(
|
|
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(
|
|
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
|
|