react-resizable-panels 1.0.0-rc.1 → 1.0.0-rc.2

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.
@@ -1,1842 +1,1625 @@
1
- import * as React from 'react';
1
+ import * as $jhddX$react from "react";
2
2
 
3
- const isBrowser = typeof window !== "undefined";
3
+ const $6901cffdef780071$export$4e09c449d6c407f7 = true;
4
4
 
5
- // This module exists to work around Webpack issue https://github.com/webpack/webpack/issues/14814
6
5
 
7
- // eslint-disable-next-line no-restricted-imports
6
+ const $aedbef154d609804$export$df77466336fe5355 = true;
7
+
8
8
 
9
- const {
10
- createElement,
11
- createContext,
12
- createRef,
13
- forwardRef,
14
- useCallback,
15
- useContext,
16
- useEffect,
17
- useImperativeHandle,
18
- useLayoutEffect,
19
- useMemo,
20
- useRef,
21
- useState
22
- } = React;
9
+ // This module exists to work around Webpack issue https://github.com/webpack/webpack/issues/14814
10
+ // and limitations with ParcelJS parsing of the useId workaround (used below).
11
+ // For the time being, all react-resizable-panels must import "react" with the "* as React" syntax.
12
+ // To avoid mistakes, we use the ESLint "no-restricted-imports" to prevent "react" imports except in this file.
13
+ // See https://github.com/bvaughn/react-resizable-panels/issues/118
14
+ // eslint-disable-next-line no-restricted-imports
23
15
 
16
+ const { createElement: $ef07efbe5fa7d87e$export$c8a8987d4410bf2d, createContext: $ef07efbe5fa7d87e$export$fd42f52fd3ae1109, createRef: $ef07efbe5fa7d87e$export$7d1e3a5e95ceca43, forwardRef: $ef07efbe5fa7d87e$export$257a8862b851cb5b, useCallback: $ef07efbe5fa7d87e$export$35808ee640e87ca7, useContext: $ef07efbe5fa7d87e$export$fae74005e78b1a27, useEffect: $ef07efbe5fa7d87e$export$6d9c69b0de29b591, useImperativeHandle: $ef07efbe5fa7d87e$export$d5a552a76deda3c2, useLayoutEffect: $ef07efbe5fa7d87e$export$e5c5a5f917a5871c, useMemo: $ef07efbe5fa7d87e$export$1538c33de8887b59, useRef: $ef07efbe5fa7d87e$export$b8f5890fc79d6aca, useState: $ef07efbe5fa7d87e$export$60241385465d0a34 } = $jhddX$react;
24
17
  // `toString()` prevents bundlers from trying to `import { useId } from 'react'`
25
- const useId = React["useId".toString()];
26
-
27
- const PanelGroupContext = createContext(null);
28
- PanelGroupContext.displayName = "PanelGroupContext";
29
-
30
- const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : () => {};
31
-
32
- const wrappedUseId = typeof useId === "function" ? useId : () => null;
33
- let counter = 0;
34
- function useUniqueId(idFromParams = null) {
35
- const idFromUseId = wrappedUseId();
36
- const idRef = useRef(idFromParams || idFromUseId || null);
37
- if (idRef.current === null) {
38
- idRef.current = "" + counter++;
39
- }
40
- return idFromParams !== null && idFromParams !== void 0 ? idFromParams : idRef.current;
18
+ const $ef07efbe5fa7d87e$export$f680877a34711e37 = $jhddX$react["useId".toString()];
19
+
20
+
21
+ const $e30963544e64b604$export$7d8c6d083caec74a = (0, $ef07efbe5fa7d87e$export$fd42f52fd3ae1109)(null);
22
+ $e30963544e64b604$export$7d8c6d083caec74a.displayName = "PanelGroupContext";
23
+
24
+
25
+
26
+
27
+ const $3f95d3e171760903$var$useIsomorphicLayoutEffect = (0, $6901cffdef780071$export$4e09c449d6c407f7) ? (0, $ef07efbe5fa7d87e$export$e5c5a5f917a5871c) : ()=>{};
28
+ var $3f95d3e171760903$export$2e2bcd8739ae039 = $3f95d3e171760903$var$useIsomorphicLayoutEffect;
29
+
30
+
31
+
32
+ const $e504a2438473eda9$var$wrappedUseId = typeof (0, $ef07efbe5fa7d87e$export$f680877a34711e37) === "function" ? (0, $ef07efbe5fa7d87e$export$f680877a34711e37) : ()=>null;
33
+ let $e504a2438473eda9$var$counter = 0;
34
+ function $e504a2438473eda9$export$2e2bcd8739ae039(idFromParams = null) {
35
+ const idFromUseId = $e504a2438473eda9$var$wrappedUseId();
36
+ const idRef = (0, $ef07efbe5fa7d87e$export$b8f5890fc79d6aca)(idFromParams || idFromUseId || null);
37
+ if (idRef.current === null) idRef.current = "" + $e504a2438473eda9$var$counter++;
38
+ return idFromParams !== null && idFromParams !== void 0 ? idFromParams : idRef.current;
41
39
  }
42
40
 
43
- function PanelWithForwardedRef({
44
- children,
45
- className: classNameFromProps = "",
46
- collapsedSize,
47
- collapsible,
48
- defaultSize,
49
- forwardedRef,
50
- id: idFromProps,
51
- maxSize,
52
- minSize,
53
- onCollapse,
54
- onExpand,
55
- onResize,
56
- order,
57
- style: styleFromProps,
58
- tagName: Type = "div",
59
- ...rest
60
- }) {
61
- const context = useContext(PanelGroupContext);
62
- if (context === null) {
63
- throw Error(`Panel components must be rendered within a PanelGroup container`);
64
- }
65
- const {
66
- collapsePanel,
67
- expandPanel,
68
- getPanelSize,
69
- getPanelStyle,
70
- groupId,
71
- isPanelCollapsed,
72
- registerPanel,
73
- resizePanel,
74
- unregisterPanel
75
- } = context;
76
- const panelId = useUniqueId(idFromProps);
77
- const panelDataRef = useRef({
78
- callbacks: {
79
- onCollapse,
80
- onExpand,
81
- onResize
82
- },
83
- constraints: {
84
- collapsedSize,
85
- collapsible,
86
- defaultSize,
87
- maxSize,
88
- minSize
89
- },
90
- id: panelId,
91
- idIsFromProps: idFromProps !== undefined,
92
- order
93
- });
94
- useRef({
95
- didLogMissingDefaultSizeWarning: false
96
- });
97
- useIsomorphicLayoutEffect(() => {
98
- const {
99
- callbacks,
100
- constraints
101
- } = panelDataRef.current;
102
- panelDataRef.current.id = panelId;
103
- panelDataRef.current.idIsFromProps = idFromProps !== undefined;
104
- panelDataRef.current.order = order;
105
- callbacks.onCollapse = onCollapse;
106
- callbacks.onExpand = onExpand;
107
- callbacks.onResize = onResize;
108
- constraints.collapsedSize = collapsedSize;
109
- constraints.collapsible = collapsible;
110
- constraints.defaultSize = defaultSize;
111
- constraints.maxSize = maxSize;
112
- constraints.minSize = minSize;
113
- });
114
- useIsomorphicLayoutEffect(() => {
115
- const panelData = panelDataRef.current;
116
- registerPanel(panelData);
117
- return () => {
118
- unregisterPanel(panelData);
119
- };
120
- }, [order, panelId, registerPanel, unregisterPanel]);
121
- useImperativeHandle(forwardedRef, () => ({
122
- collapse: () => {
123
- collapsePanel(panelDataRef.current);
124
- },
125
- expand: () => {
126
- expandPanel(panelDataRef.current);
127
- },
128
- getId() {
129
- return panelId;
130
- },
131
- getSize() {
132
- return getPanelSize(panelDataRef.current);
133
- },
134
- isCollapsed() {
135
- return isPanelCollapsed(panelDataRef.current);
136
- },
137
- isExpanded() {
138
- return !isPanelCollapsed(panelDataRef.current);
139
- },
140
- resize: size => {
141
- resizePanel(panelDataRef.current, size);
41
+
42
+
43
+ function $c33df6d7c39fd3ee$export$35d79d63a6984ee1({ children: children, className: classNameFromProps = "", collapsedSize: collapsedSize, collapsible: collapsible, defaultSize: defaultSize, forwardedRef: forwardedRef, id: idFromProps, maxSize: maxSize, minSize: minSize, onCollapse: onCollapse, onExpand: onExpand, onResize: onResize, order: order, style: styleFromProps, tagName: Type = "div", ...rest }) {
44
+ const context = (0, $ef07efbe5fa7d87e$export$fae74005e78b1a27)((0, $e30963544e64b604$export$7d8c6d083caec74a));
45
+ if (context === null) throw Error(`Panel components must be rendered within a PanelGroup container`);
46
+ const { collapsePanel: collapsePanel, expandPanel: expandPanel, getPanelSize: getPanelSize, getPanelStyle: getPanelStyle, groupId: groupId, isPanelCollapsed: isPanelCollapsed, registerPanel: registerPanel, resizePanel: resizePanel, unregisterPanel: unregisterPanel } = context;
47
+ const panelId = (0, $e504a2438473eda9$export$2e2bcd8739ae039)(idFromProps);
48
+ const panelDataRef = (0, $ef07efbe5fa7d87e$export$b8f5890fc79d6aca)({
49
+ callbacks: {
50
+ onCollapse: onCollapse,
51
+ onExpand: onExpand,
52
+ onResize: onResize
53
+ },
54
+ constraints: {
55
+ collapsedSize: collapsedSize,
56
+ collapsible: collapsible,
57
+ defaultSize: defaultSize,
58
+ maxSize: maxSize,
59
+ minSize: minSize
60
+ },
61
+ id: panelId,
62
+ idIsFromProps: idFromProps !== undefined,
63
+ order: order
64
+ });
65
+ const devWarningsRef = (0, $ef07efbe5fa7d87e$export$b8f5890fc79d6aca)({
66
+ didLogMissingDefaultSizeWarning: false
67
+ });
68
+ // Normally we wouldn't log a warning during render,
69
+ // but effects don't run on the server, so we can't do it there
70
+ if (0, $aedbef154d609804$export$df77466336fe5355) {
71
+ if (!devWarningsRef.current.didLogMissingDefaultSizeWarning) {
72
+ if (!(0, $6901cffdef780071$export$4e09c449d6c407f7) && defaultSize == null) {
73
+ devWarningsRef.current.didLogMissingDefaultSizeWarning = true;
74
+ console.warn(`WARNING: Panel defaultSize prop recommended to avoid layout shift after server rendering`);
75
+ }
76
+ }
142
77
  }
143
- }), [collapsePanel, expandPanel, getPanelSize, isPanelCollapsed, panelId, resizePanel]);
144
- const style = getPanelStyle(panelDataRef.current);
145
- return createElement(Type, {
146
- ...rest,
147
- children,
148
- className: classNameFromProps,
149
- style: {
150
- ...style,
151
- ...styleFromProps
152
- },
153
- // CSS selectors
154
- "data-panel": "",
155
- "data-panel-id": panelId,
156
- "data-panel-group-id": groupId,
157
- // e2e test attributes
158
- "data-panel-collapsible": undefined,
159
- "data-panel-size": undefined
160
- });
78
+ (0, $3f95d3e171760903$export$2e2bcd8739ae039)(()=>{
79
+ const { callbacks: callbacks, constraints: constraints } = panelDataRef.current;
80
+ panelDataRef.current.id = panelId;
81
+ panelDataRef.current.idIsFromProps = idFromProps !== undefined;
82
+ panelDataRef.current.order = order;
83
+ callbacks.onCollapse = onCollapse;
84
+ callbacks.onExpand = onExpand;
85
+ callbacks.onResize = onResize;
86
+ constraints.collapsedSize = collapsedSize;
87
+ constraints.collapsible = collapsible;
88
+ constraints.defaultSize = defaultSize;
89
+ constraints.maxSize = maxSize;
90
+ constraints.minSize = minSize;
91
+ });
92
+ (0, $3f95d3e171760903$export$2e2bcd8739ae039)(()=>{
93
+ const panelData = panelDataRef.current;
94
+ registerPanel(panelData);
95
+ return ()=>{
96
+ unregisterPanel(panelData);
97
+ };
98
+ }, [
99
+ order,
100
+ panelId,
101
+ registerPanel,
102
+ unregisterPanel
103
+ ]);
104
+ (0, $ef07efbe5fa7d87e$export$d5a552a76deda3c2)(forwardedRef, ()=>({
105
+ collapse: ()=>{
106
+ collapsePanel(panelDataRef.current);
107
+ },
108
+ expand: ()=>{
109
+ expandPanel(panelDataRef.current);
110
+ },
111
+ getId () {
112
+ return panelId;
113
+ },
114
+ getSize () {
115
+ return getPanelSize(panelDataRef.current);
116
+ },
117
+ isCollapsed () {
118
+ return isPanelCollapsed(panelDataRef.current);
119
+ },
120
+ isExpanded () {
121
+ return !isPanelCollapsed(panelDataRef.current);
122
+ },
123
+ resize: (size)=>{
124
+ resizePanel(panelDataRef.current, size);
125
+ }
126
+ }), [
127
+ collapsePanel,
128
+ expandPanel,
129
+ getPanelSize,
130
+ isPanelCollapsed,
131
+ panelId,
132
+ resizePanel
133
+ ]);
134
+ const style = getPanelStyle(panelDataRef.current);
135
+ return (0, $ef07efbe5fa7d87e$export$c8a8987d4410bf2d)(Type, {
136
+ ...rest,
137
+ children: children,
138
+ className: classNameFromProps,
139
+ style: {
140
+ ...style,
141
+ ...styleFromProps
142
+ },
143
+ // CSS selectors
144
+ "data-panel": "",
145
+ "data-panel-id": panelId,
146
+ "data-panel-group-id": groupId,
147
+ // e2e test attributes
148
+ "data-panel-collapsible": (0, $aedbef154d609804$export$df77466336fe5355) ? collapsible || undefined : undefined,
149
+ "data-panel-size": (0, $aedbef154d609804$export$df77466336fe5355) ? parseFloat("" + style.flexGrow).toFixed(1) : undefined
150
+ });
161
151
  }
162
- const Panel = forwardRef((props, ref) => createElement(PanelWithForwardedRef, {
163
- ...props,
164
- forwardedRef: ref
165
- }));
166
- PanelWithForwardedRef.displayName = "Panel";
167
- Panel.displayName = "forwardRef(Panel)";
168
-
169
- function assert(expectedCondition, message = "Assertion failed!") {
170
- if (!expectedCondition) {
171
- console.error(message);
172
- throw Error(message);
173
- }
152
+ const $c33df6d7c39fd3ee$export$2ddb90ad54e5f587 = (0, $ef07efbe5fa7d87e$export$257a8862b851cb5b)((props, ref)=>(0, $ef07efbe5fa7d87e$export$c8a8987d4410bf2d)($c33df6d7c39fd3ee$export$35d79d63a6984ee1, {
153
+ ...props,
154
+ forwardedRef: ref
155
+ }));
156
+ $c33df6d7c39fd3ee$export$35d79d63a6984ee1.displayName = "Panel";
157
+ $c33df6d7c39fd3ee$export$2ddb90ad54e5f587.displayName = "forwardRef(Panel)";
158
+
159
+
160
+
161
+
162
+
163
+
164
+
165
+ function $5f33910cd46e8ae7$export$a7a9523472993e97(expectedCondition, message = "Assertion failed!") {
166
+ if (!expectedCondition) {
167
+ console.error(message);
168
+ throw Error(message);
169
+ }
174
170
  }
175
171
 
176
- const PRECISION = 10;
177
-
178
- function fuzzyCompareNumbers(actual, expected, fractionDigits = PRECISION) {
179
- actual = parseFloat(actual.toFixed(fractionDigits));
180
- expected = parseFloat(expected.toFixed(fractionDigits));
181
- const delta = actual - expected;
182
- if (delta === 0) {
183
- return 0;
184
- } else {
185
- return delta > 0 ? 1 : -1;
186
- }
172
+
173
+ const $a8e83be196252871$export$d6d3992f3becc879 = 10;
174
+
175
+
176
+ function $fa17b68d3c9353a3$export$1d75b1119dff900(actual, expected, fractionDigits = (0, $a8e83be196252871$export$d6d3992f3becc879)) {
177
+ actual = parseFloat(actual.toFixed(fractionDigits));
178
+ expected = parseFloat(expected.toFixed(fractionDigits));
179
+ const delta = actual - expected;
180
+ if (delta === 0) return 0;
181
+ else return delta > 0 ? 1 : -1;
187
182
  }
188
183
 
189
- function fuzzyNumbersEqual(actual, expected, fractionDigits) {
190
- return fuzzyCompareNumbers(actual, expected, fractionDigits) === 0;
184
+
185
+
186
+ function $ee71a189401d6914$export$db9c8bd2fae72e82(actual, expected, fractionDigits) {
187
+ return (0, $fa17b68d3c9353a3$export$1d75b1119dff900)(actual, expected, fractionDigits) === 0;
191
188
  }
192
189
 
193
- // Panel size must be in percentages; pixel values should be pre-converted
194
- function resizePanel({
195
- panelConstraints: panelConstraintsArray,
196
- panelIndex,
197
- size
198
- }) {
199
- const panelConstraints = panelConstraintsArray[panelIndex];
200
- assert(panelConstraints != null);
201
- let {
202
- collapsedSize = 0,
203
- collapsible,
204
- maxSize = 100,
205
- minSize = 0
206
- } = panelConstraints;
207
- if (fuzzyCompareNumbers(size, minSize) < 0) {
208
- if (collapsible) {
209
- // Collapsible panels should snap closed or open only once they cross the halfway point between collapsed and min size.
210
- const halfwayPoint = (collapsedSize + minSize) / 2;
211
- if (fuzzyCompareNumbers(size, halfwayPoint) < 0) {
212
- size = collapsedSize;
213
- } else {
214
- size = minSize;
215
- }
216
- } else {
217
- size = minSize;
190
+
191
+
192
+
193
+
194
+ function $40f29f7a20511409$export$2f98edcf4006376f({ panelConstraints: panelConstraintsArray, panelIndex: panelIndex, size: size }) {
195
+ const panelConstraints = panelConstraintsArray[panelIndex];
196
+ (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(panelConstraints != null);
197
+ let { collapsedSize: collapsedSize = 0, collapsible: collapsible, maxSize: maxSize = 100, minSize: minSize = 0 } = panelConstraints;
198
+ if ((0, $fa17b68d3c9353a3$export$1d75b1119dff900)(size, minSize) < 0) {
199
+ if (collapsible) {
200
+ // Collapsible panels should snap closed or open only once they cross the halfway point between collapsed and min size.
201
+ const halfwayPoint = (collapsedSize + minSize) / 2;
202
+ if ((0, $fa17b68d3c9353a3$export$1d75b1119dff900)(size, halfwayPoint) < 0) size = collapsedSize;
203
+ else size = minSize;
204
+ } else size = minSize;
218
205
  }
219
- }
220
- size = Math.min(maxSize, size);
221
- size = parseFloat(size.toFixed(PRECISION));
222
- return size;
206
+ size = Math.min(maxSize, size);
207
+ size = parseFloat(size.toFixed((0, $a8e83be196252871$export$d6d3992f3becc879)));
208
+ return size;
223
209
  }
224
210
 
225
- // All units must be in percentages; pixel values should be pre-converted
226
- function adjustLayoutByDelta({
227
- delta,
228
- layout: prevLayout,
229
- panelConstraints: panelConstraintsArray,
230
- pivotIndices,
231
- trigger
232
- }) {
233
- if (fuzzyNumbersEqual(delta, 0)) {
234
- return prevLayout;
235
- }
236
- const nextLayout = [...prevLayout];
237
- const [firstPivotIndex, secondPivotIndex] = pivotIndices;
238
- assert(firstPivotIndex != null);
239
- assert(secondPivotIndex != null);
240
- let deltaApplied = 0;
241
-
242
- //const DEBUG = [];
243
- //DEBUG.push(`adjustLayoutByDelta() ${prevLayout.join(", ")}`);
244
- //DEBUG.push(` delta: ${delta}`);
245
- //DEBUG.push(` pivotIndices: ${pivotIndices.join(", ")}`);
246
- //DEBUG.push(` trigger: ${trigger}`);
247
- //DEBUG.push("");
248
-
249
- // A resizing panel affects the panels before or after it.
250
- //
251
- // A negative delta means the panel(s) immediately after the resize handle should grow/expand by decreasing its offset.
252
- // Other panels may also need to shrink/contract (and shift) to make room, depending on the min weights.
253
- //
254
- // A positive delta means the panel(s) immediately before the resize handle should "expand".
255
- // This is accomplished by shrinking/contracting (and shifting) one or more of the panels after the resize handle.
256
-
257
- {
211
+
212
+ function $fe96098ae4f2a44d$export$7fead5cc734d205b({ delta: delta, layout: prevLayout, panelConstraints: panelConstraintsArray, pivotIndices: pivotIndices, trigger: trigger }) {
213
+ if ((0, $ee71a189401d6914$export$db9c8bd2fae72e82)(delta, 0)) return prevLayout;
214
+ const nextLayout = [
215
+ ...prevLayout
216
+ ];
217
+ const [firstPivotIndex, secondPivotIndex] = pivotIndices;
218
+ (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(firstPivotIndex != null);
219
+ (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(secondPivotIndex != null);
220
+ let deltaApplied = 0;
258
221
  // If this is a resize triggered by a keyboard event, our logic for expanding/collapsing is different.
259
222
  // We no longer check the halfway threshold because this may prevent the panel from expanding at all.
260
223
  if (trigger === "keyboard") {
261
- {
262
- // Check if we should expand a collapsed panel
263
- const index = delta < 0 ? secondPivotIndex : firstPivotIndex;
264
- const panelConstraints = panelConstraintsArray[index];
265
- assert(panelConstraints);
266
-
267
- //DEBUG.push(`edge case check 1: ${index}`);
268
- //DEBUG.push(` -> collapsible? ${constraints.collapsible}`);
269
- if (panelConstraints.collapsible) {
270
- const prevSize = prevLayout[index];
271
- assert(prevSize != null);
272
- const panelConstraints = panelConstraintsArray[index];
273
- assert(panelConstraints);
274
- const {
275
- collapsedSize = 0,
276
- minSize = 0
277
- } = panelConstraints;
278
- if (fuzzyNumbersEqual(prevSize, collapsedSize)) {
279
- const localDelta = minSize - prevSize;
280
- //DEBUG.push(` -> expand delta: ${localDelta}`);
281
-
282
- if (fuzzyCompareNumbers(localDelta, Math.abs(delta)) > 0) {
283
- delta = delta < 0 ? 0 - localDelta : localDelta;
284
- //DEBUG.push(` -> delta: ${delta}`);
224
+ {
225
+ // Check if we should expand a collapsed panel
226
+ const index = delta < 0 ? secondPivotIndex : firstPivotIndex;
227
+ const panelConstraints = panelConstraintsArray[index];
228
+ (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(panelConstraints);
229
+ //DEBUG.push(`edge case check 1: ${index}`);
230
+ //DEBUG.push(` -> collapsible? ${constraints.collapsible}`);
231
+ if (panelConstraints.collapsible) {
232
+ const prevSize = prevLayout[index];
233
+ (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(prevSize != null);
234
+ const panelConstraints = panelConstraintsArray[index];
235
+ (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(panelConstraints);
236
+ const { collapsedSize: collapsedSize = 0, minSize: minSize = 0 } = panelConstraints;
237
+ if ((0, $ee71a189401d6914$export$db9c8bd2fae72e82)(prevSize, collapsedSize)) {
238
+ const localDelta = minSize - prevSize;
239
+ //DEBUG.push(` -> expand delta: ${localDelta}`);
240
+ if ((0, $fa17b68d3c9353a3$export$1d75b1119dff900)(localDelta, Math.abs(delta)) > 0) delta = delta < 0 ? 0 - localDelta : localDelta;
241
+ }
285
242
  }
286
- }
287
243
  }
288
- }
289
-
290
- {
291
- // Check if we should collapse a panel at its minimum size
292
- const index = delta < 0 ? firstPivotIndex : secondPivotIndex;
293
- const panelConstraints = panelConstraintsArray[index];
294
- assert(panelConstraints);
295
- const {
296
- collapsible
297
- } = panelConstraints;
298
-
299
- //DEBUG.push(`edge case check 2: ${index}`);
300
- //DEBUG.push(` -> collapsible? ${collapsible}`);
301
- if (collapsible) {
302
- const prevSize = prevLayout[index];
303
- assert(prevSize != null);
304
- const panelConstraints = panelConstraintsArray[index];
305
- assert(panelConstraints);
306
- const {
307
- collapsedSize = 0,
308
- minSize = 0
309
- } = panelConstraints;
310
- if (fuzzyNumbersEqual(prevSize, minSize)) {
311
- const localDelta = prevSize - collapsedSize;
312
- //DEBUG.push(` -> expand delta: ${localDelta}`);
313
-
314
- if (fuzzyCompareNumbers(localDelta, Math.abs(delta)) > 0) {
315
- delta = delta < 0 ? 0 - localDelta : localDelta;
316
- //DEBUG.push(` -> delta: ${delta}`);
244
+ {
245
+ // Check if we should collapse a panel at its minimum size
246
+ const index = delta < 0 ? firstPivotIndex : secondPivotIndex;
247
+ const panelConstraints = panelConstraintsArray[index];
248
+ (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(panelConstraints);
249
+ const { collapsible: collapsible } = panelConstraints;
250
+ //DEBUG.push(`edge case check 2: ${index}`);
251
+ //DEBUG.push(` -> collapsible? ${collapsible}`);
252
+ if (collapsible) {
253
+ const prevSize = prevLayout[index];
254
+ (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(prevSize != null);
255
+ const panelConstraints = panelConstraintsArray[index];
256
+ (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(panelConstraints);
257
+ const { collapsedSize: collapsedSize = 0, minSize: minSize = 0 } = panelConstraints;
258
+ if ((0, $ee71a189401d6914$export$db9c8bd2fae72e82)(prevSize, minSize)) {
259
+ const localDelta = prevSize - collapsedSize;
260
+ //DEBUG.push(` -> expand delta: ${localDelta}`);
261
+ if ((0, $fa17b68d3c9353a3$export$1d75b1119dff900)(localDelta, Math.abs(delta)) > 0) delta = delta < 0 ? 0 - localDelta : localDelta;
262
+ }
317
263
  }
318
- }
319
264
  }
320
- }
321
265
  }
266
+ {
267
+ // Pre-calculate max available delta in the opposite direction of our pivot.
268
+ // This will be the maximum amount we're allowed to expand/contract the panels in the primary direction.
269
+ // If this amount is less than the requested delta, adjust the requested delta.
270
+ // If this amount is greater than the requested delta, that's useful information too–
271
+ // as an expanding panel might change from collapsed to min size.
272
+ const increment = delta < 0 ? 1 : -1;
273
+ let index = delta < 0 ? secondPivotIndex : firstPivotIndex;
274
+ let maxAvailableDelta = 0;
275
+ //DEBUG.push("pre calc...");
276
+ while(true){
277
+ const prevSize = prevLayout[index];
278
+ (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(prevSize != null);
279
+ const maxSafeSize = (0, $40f29f7a20511409$export$2f98edcf4006376f)({
280
+ panelConstraints: panelConstraintsArray,
281
+ panelIndex: index,
282
+ size: 100
283
+ });
284
+ const delta = maxSafeSize - prevSize;
285
+ //DEBUG.push(` ${index}: ${prevSize} -> ${maxSafeSize}`);
286
+ maxAvailableDelta += delta;
287
+ index += increment;
288
+ if (index < 0 || index >= panelConstraintsArray.length) break;
289
+ }
290
+ //DEBUG.push(` -> max available delta: ${maxAvailableDelta}`);
291
+ const minAbsDelta = Math.min(Math.abs(delta), Math.abs(maxAvailableDelta));
292
+ delta = delta < 0 ? 0 - minAbsDelta : minAbsDelta;
293
+ //DEBUG.push(` -> adjusted delta: ${delta}`);
322
294
  //DEBUG.push("");
323
- }
324
-
325
- {
326
- // Pre-calculate max available delta in the opposite direction of our pivot.
327
- // This will be the maximum amount we're allowed to expand/contract the panels in the primary direction.
328
- // If this amount is less than the requested delta, adjust the requested delta.
329
- // If this amount is greater than the requested delta, that's useful information too–
330
- // as an expanding panel might change from collapsed to min size.
331
-
332
- const increment = delta < 0 ? 1 : -1;
333
- let index = delta < 0 ? secondPivotIndex : firstPivotIndex;
334
- let maxAvailableDelta = 0;
335
-
336
- //DEBUG.push("pre calc...");
337
- while (true) {
338
- const prevSize = prevLayout[index];
339
- assert(prevSize != null);
340
- const maxSafeSize = resizePanel({
341
- panelConstraints: panelConstraintsArray,
342
- panelIndex: index,
343
- size: 100
344
- });
345
- const delta = maxSafeSize - prevSize;
346
- //DEBUG.push(` ${index}: ${prevSize} -> ${maxSafeSize}`);
347
-
348
- maxAvailableDelta += delta;
349
- index += increment;
350
- if (index < 0 || index >= panelConstraintsArray.length) {
351
- break;
352
- }
353
295
  }
354
-
355
- //DEBUG.push(` -> max available delta: ${maxAvailableDelta}`);
356
- const minAbsDelta = Math.min(Math.abs(delta), Math.abs(maxAvailableDelta));
357
- delta = delta < 0 ? 0 - minAbsDelta : minAbsDelta;
358
- //DEBUG.push(` -> adjusted delta: ${delta}`);
296
+ {
297
+ // Delta added to a panel needs to be subtracted from other panels (within the constraints that those panels allow).
298
+ const pivotIndex = delta < 0 ? firstPivotIndex : secondPivotIndex;
299
+ let index = pivotIndex;
300
+ while(index >= 0 && index < panelConstraintsArray.length){
301
+ const deltaRemaining = Math.abs(delta) - Math.abs(deltaApplied);
302
+ const prevSize = prevLayout[index];
303
+ (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(prevSize != null);
304
+ const unsafeSize = prevSize - deltaRemaining;
305
+ const safeSize = (0, $40f29f7a20511409$export$2f98edcf4006376f)({
306
+ panelConstraints: panelConstraintsArray,
307
+ panelIndex: index,
308
+ size: unsafeSize
309
+ });
310
+ if (!(0, $ee71a189401d6914$export$db9c8bd2fae72e82)(prevSize, safeSize)) {
311
+ deltaApplied += prevSize - safeSize;
312
+ nextLayout[index] = safeSize;
313
+ if (deltaApplied.toPrecision(3).localeCompare(Math.abs(delta).toPrecision(3), undefined, {
314
+ numeric: true
315
+ }) >= 0) break;
316
+ }
317
+ if (delta < 0) index--;
318
+ else index++;
319
+ }
320
+ }
321
+ //DEBUG.push(`after 1: ${nextLayout.join(", ")}`);
322
+ //DEBUG.push(` deltaApplied: ${deltaApplied}`);
359
323
  //DEBUG.push("");
360
- }
361
-
362
- {
363
- // Delta added to a panel needs to be subtracted from other panels (within the constraints that those panels allow).
364
-
365
- const pivotIndex = delta < 0 ? firstPivotIndex : secondPivotIndex;
366
- let index = pivotIndex;
367
- while (index >= 0 && index < panelConstraintsArray.length) {
368
- const deltaRemaining = Math.abs(delta) - Math.abs(deltaApplied);
369
- const prevSize = prevLayout[index];
370
- assert(prevSize != null);
371
- const unsafeSize = prevSize - deltaRemaining;
372
- const safeSize = resizePanel({
373
- panelConstraints: panelConstraintsArray,
374
- panelIndex: index,
375
- size: unsafeSize
376
- });
377
- if (!fuzzyNumbersEqual(prevSize, safeSize)) {
378
- deltaApplied += prevSize - safeSize;
379
- nextLayout[index] = safeSize;
380
- if (deltaApplied.toPrecision(3).localeCompare(Math.abs(delta).toPrecision(3), undefined, {
381
- numeric: true
382
- }) >= 0) {
383
- break;
324
+ // If we were unable to resize any of the panels panels, return the previous state.
325
+ // This will essentially bailout and ignore e.g. drags past a panel's boundaries
326
+ if ((0, $ee71a189401d6914$export$db9c8bd2fae72e82)(deltaApplied, 0)) //console.log(DEBUG.join("\n"));
327
+ return prevLayout;
328
+ {
329
+ // Now distribute the applied delta to the panels in the other direction
330
+ const pivotIndex = delta < 0 ? secondPivotIndex : firstPivotIndex;
331
+ const prevSize = prevLayout[pivotIndex];
332
+ (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(prevSize != null);
333
+ const unsafeSize = prevSize + deltaApplied;
334
+ const safeSize = (0, $40f29f7a20511409$export$2f98edcf4006376f)({
335
+ panelConstraints: panelConstraintsArray,
336
+ panelIndex: pivotIndex,
337
+ size: unsafeSize
338
+ });
339
+ // Adjust the pivot panel before, but only by the amount that surrounding panels were able to shrink/contract.
340
+ nextLayout[pivotIndex] = safeSize;
341
+ // Edge case where expanding or contracting one panel caused another one to change collapsed state
342
+ if (!(0, $ee71a189401d6914$export$db9c8bd2fae72e82)(safeSize, unsafeSize)) {
343
+ let deltaRemaining = unsafeSize - safeSize;
344
+ const pivotIndex = delta < 0 ? secondPivotIndex : firstPivotIndex;
345
+ let index = pivotIndex;
346
+ while(index >= 0 && index < panelConstraintsArray.length){
347
+ const prevSize = nextLayout[index];
348
+ (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(prevSize != null);
349
+ const unsafeSize = prevSize + deltaRemaining;
350
+ const safeSize = (0, $40f29f7a20511409$export$2f98edcf4006376f)({
351
+ panelConstraints: panelConstraintsArray,
352
+ panelIndex: index,
353
+ size: unsafeSize
354
+ });
355
+ if (!(0, $ee71a189401d6914$export$db9c8bd2fae72e82)(prevSize, safeSize)) {
356
+ deltaRemaining -= safeSize - prevSize;
357
+ nextLayout[index] = safeSize;
358
+ }
359
+ if ((0, $ee71a189401d6914$export$db9c8bd2fae72e82)(deltaRemaining, 0)) break;
360
+ if (delta > 0) index--;
361
+ else index++;
362
+ }
384
363
  }
385
- }
386
- if (delta < 0) {
387
- index--;
388
- } else {
389
- index++;
390
- }
391
364
  }
392
- }
393
- //DEBUG.push(`after 1: ${nextLayout.join(", ")}`);
394
- //DEBUG.push(` deltaApplied: ${deltaApplied}`);
395
- //DEBUG.push("");
396
-
397
- // If we were unable to resize any of the panels panels, return the previous state.
398
- // This will essentially bailout and ignore e.g. drags past a panel's boundaries
399
- if (fuzzyNumbersEqual(deltaApplied, 0)) {
365
+ //DEBUG.push(`after 2: ${nextLayout.join(", ")}`);
366
+ //DEBUG.push(` deltaApplied: ${deltaApplied}`);
367
+ //DEBUG.push("");
368
+ const totalSize = nextLayout.reduce((total, size)=>size + total, 0);
369
+ //DEBUG.push(`total size: ${totalSize}`);
400
370
  //console.log(DEBUG.join("\n"));
401
- return prevLayout;
402
- }
403
- {
404
- // Now distribute the applied delta to the panels in the other direction
405
- const pivotIndex = delta < 0 ? secondPivotIndex : firstPivotIndex;
406
- const prevSize = prevLayout[pivotIndex];
407
- assert(prevSize != null);
408
- const unsafeSize = prevSize + deltaApplied;
409
- const safeSize = resizePanel({
410
- panelConstraints: panelConstraintsArray,
411
- panelIndex: pivotIndex,
412
- size: unsafeSize
413
- });
371
+ if (!(0, $ee71a189401d6914$export$db9c8bd2fae72e82)(totalSize, 100)) return prevLayout;
372
+ return nextLayout;
373
+ }
414
374
 
415
- // Adjust the pivot panel before, but only by the amount that surrounding panels were able to shrink/contract.
416
- nextLayout[pivotIndex] = safeSize;
417
375
 
418
- // Edge case where expanding or contracting one panel caused another one to change collapsed state
419
- if (!fuzzyNumbersEqual(safeSize, unsafeSize)) {
420
- let deltaRemaining = unsafeSize - safeSize;
421
- const pivotIndex = delta < 0 ? secondPivotIndex : firstPivotIndex;
422
- let index = pivotIndex;
423
- while (index >= 0 && index < panelConstraintsArray.length) {
424
- const prevSize = nextLayout[index];
425
- assert(prevSize != null);
426
- const unsafeSize = prevSize + deltaRemaining;
427
- const safeSize = resizePanel({
428
- panelConstraints: panelConstraintsArray,
429
- panelIndex: index,
430
- size: unsafeSize
431
- });
432
- if (!fuzzyNumbersEqual(prevSize, safeSize)) {
433
- deltaRemaining -= safeSize - prevSize;
434
- nextLayout[index] = safeSize;
435
- }
436
- if (fuzzyNumbersEqual(deltaRemaining, 0)) {
437
- break;
438
- }
439
- if (delta > 0) {
440
- index--;
376
+
377
+
378
+ function $a662cadf71ffedbc$export$b8372a468ba36f7d({ layout: layout, panelsArray: panelsArray, pivotIndices: pivotIndices }) {
379
+ let currentMinSize = 0;
380
+ let currentMaxSize = 100;
381
+ let totalMinSize = 0;
382
+ let totalMaxSize = 0;
383
+ const firstIndex = pivotIndices[0];
384
+ (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(firstIndex != null);
385
+ // A panel's effective min/max sizes also need to account for other panel's sizes.
386
+ panelsArray.forEach((panelData, index)=>{
387
+ const { constraints: constraints } = panelData;
388
+ const { maxSize: maxSize = 100, minSize: minSize = 0 } = constraints;
389
+ if (index === firstIndex) {
390
+ currentMinSize = minSize;
391
+ currentMaxSize = maxSize;
441
392
  } else {
442
- index++;
393
+ totalMinSize += minSize;
394
+ totalMaxSize += maxSize;
443
395
  }
444
- }
445
- }
446
- }
447
- //DEBUG.push(`after 2: ${nextLayout.join(", ")}`);
448
- //DEBUG.push(` deltaApplied: ${deltaApplied}`);
449
- //DEBUG.push("");
396
+ });
397
+ const valueMax = Math.min(currentMaxSize, 100 - totalMinSize);
398
+ const valueMin = Math.max(currentMinSize, 100 - totalMaxSize);
399
+ const valueNow = layout[firstIndex];
400
+ return {
401
+ valueMax: valueMax,
402
+ valueMin: valueMin,
403
+ valueNow: valueNow
404
+ };
405
+ }
450
406
 
451
- const totalSize = nextLayout.reduce((total, size) => size + total, 0);
452
- //DEBUG.push(`total size: ${totalSize}`);
453
- //console.log(DEBUG.join("\n"));
454
407
 
455
- if (!fuzzyNumbersEqual(totalSize, 100)) {
456
- return prevLayout;
457
- }
458
- return nextLayout;
408
+ function $9196ba7c0d09e3f3$export$63eb605e437b214f(groupId) {
409
+ return Array.from(document.querySelectorAll(`[data-panel-resize-handle-id][data-panel-group-id="${groupId}"]`));
459
410
  }
460
411
 
461
- function calculateAriaValues({
462
- layout,
463
- panelsArray,
464
- pivotIndices
465
- }) {
466
- let currentMinSize = 0;
467
- let currentMaxSize = 100;
468
- let totalMinSize = 0;
469
- let totalMaxSize = 0;
470
- const firstIndex = pivotIndices[0];
471
- assert(firstIndex != null);
472
-
473
- // A panel's effective min/max sizes also need to account for other panel's sizes.
474
- panelsArray.forEach((panelData, index) => {
475
- const {
476
- constraints
477
- } = panelData;
478
- const {
479
- maxSize = 100,
480
- minSize = 0
481
- } = constraints;
482
- if (index === firstIndex) {
483
- currentMinSize = minSize;
484
- currentMaxSize = maxSize;
485
- } else {
486
- totalMinSize += minSize;
487
- totalMaxSize += maxSize;
488
- }
489
- });
490
- const valueMax = Math.min(currentMaxSize, 100 - totalMinSize);
491
- const valueMin = Math.max(currentMinSize, 100 - totalMaxSize);
492
- const valueNow = layout[firstIndex];
493
- return {
494
- valueMax,
495
- valueMin,
496
- valueNow
497
- };
498
- }
499
412
 
500
- function getResizeHandleElementsForGroup(groupId) {
501
- return Array.from(document.querySelectorAll(`[data-panel-resize-handle-id][data-panel-group-id="${groupId}"]`));
413
+ function $a144d12e0d2017d1$export$4c92fedbbc2381ca(groupId, id) {
414
+ const handles = (0, $9196ba7c0d09e3f3$export$63eb605e437b214f)(groupId);
415
+ const index = handles.findIndex((handle)=>handle.getAttribute("data-panel-resize-handle-id") === id);
416
+ return index !== null && index !== void 0 ? index : null;
502
417
  }
503
418
 
504
- function getResizeHandleElementIndex(groupId, id) {
505
- const handles = getResizeHandleElementsForGroup(groupId);
506
- const index = handles.findIndex(handle => handle.getAttribute("data-panel-resize-handle-id") === id);
507
- return index !== null && index !== void 0 ? index : null;
508
- }
509
419
 
510
- function determinePivotIndices(groupId, dragHandleId) {
511
- const index = getResizeHandleElementIndex(groupId, dragHandleId);
512
- return index != null ? [index, index + 1] : [-1, -1];
420
+ function $0a239c1e1cd1e940$export$cf92598869f99b8f(groupId, dragHandleId) {
421
+ const index = (0, $a144d12e0d2017d1$export$4c92fedbbc2381ca)(groupId, dragHandleId);
422
+ return index != null ? [
423
+ index,
424
+ index + 1
425
+ ] : [
426
+ -1,
427
+ -1
428
+ ];
513
429
  }
514
430
 
515
- function getPanelGroupElement(id) {
516
- const element = document.querySelector(`[data-panel-group][data-panel-group-id="${id}"]`);
517
- if (element) {
518
- return element;
519
- }
520
- return null;
431
+
432
+ function $18131dcc0be2e4e0$export$4e72aefa594058df(id) {
433
+ const element = document.querySelector(`[data-panel-group][data-panel-group-id="${id}"]`);
434
+ if (element) return element;
435
+ return null;
521
436
  }
522
437
 
523
- function getResizeHandleElement(id) {
524
- const element = document.querySelector(`[data-panel-resize-handle-id="${id}"]`);
525
- if (element) {
526
- return element;
527
- }
528
- return null;
438
+
439
+
440
+ function $99b0d18e36332b26$export$4c5229c874a62620(id) {
441
+ const element = document.querySelector(`[data-panel-resize-handle-id="${id}"]`);
442
+ if (element) return element;
443
+ return null;
529
444
  }
530
445
 
531
- function getResizeHandlePanelIds(groupId, handleId, panelsArray) {
532
- var _panelsArray$index$id, _panelsArray$index, _panelsArray$id, _panelsArray;
533
- const handle = getResizeHandleElement(handleId);
534
- const handles = getResizeHandleElementsForGroup(groupId);
535
- const index = handle ? handles.indexOf(handle) : -1;
536
- const idBefore = (_panelsArray$index$id = (_panelsArray$index = panelsArray[index]) === null || _panelsArray$index === void 0 ? void 0 : _panelsArray$index.id) !== null && _panelsArray$index$id !== void 0 ? _panelsArray$index$id : null;
537
- const idAfter = (_panelsArray$id = (_panelsArray = panelsArray[index + 1]) === null || _panelsArray === void 0 ? void 0 : _panelsArray.id) !== null && _panelsArray$id !== void 0 ? _panelsArray$id : null;
538
- return [idBefore, idAfter];
446
+
447
+
448
+ function $1420c4509c675b80$export$68d3a33c21dfbe27(groupId, handleId, panelsArray) {
449
+ var _panelsArray_index, _panelsArray_;
450
+ const handle = (0, $99b0d18e36332b26$export$4c5229c874a62620)(handleId);
451
+ const handles = (0, $9196ba7c0d09e3f3$export$63eb605e437b214f)(groupId);
452
+ const index = handle ? handles.indexOf(handle) : -1;
453
+ var _panelsArray_index_id;
454
+ const idBefore = (_panelsArray_index_id = (_panelsArray_index = panelsArray[index]) === null || _panelsArray_index === void 0 ? void 0 : _panelsArray_index.id) !== null && _panelsArray_index_id !== void 0 ? _panelsArray_index_id : null;
455
+ var _panelsArray__id;
456
+ const idAfter = (_panelsArray__id = (_panelsArray_ = panelsArray[index + 1]) === null || _panelsArray_ === void 0 ? void 0 : _panelsArray_.id) !== null && _panelsArray__id !== void 0 ? _panelsArray__id : null;
457
+ return [
458
+ idBefore,
459
+ idAfter
460
+ ];
539
461
  }
540
462
 
541
- // https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/
542
-
543
- function useWindowSplitterPanelGroupBehavior({
544
- committedValuesRef,
545
- eagerValuesRef,
546
- groupId,
547
- layout,
548
- panelDataArray,
549
- setLayout
550
- }) {
551
- useRef({
552
- didWarnAboutMissingResizeHandle: false
553
- });
554
- useIsomorphicLayoutEffect(() => {
555
- const resizeHandleElements = getResizeHandleElementsForGroup(groupId);
556
- for (let index = 0; index < panelDataArray.length - 1; index++) {
557
- const {
558
- valueMax,
559
- valueMin,
560
- valueNow
561
- } = calculateAriaValues({
562
- layout,
563
- panelsArray: panelDataArray,
564
- pivotIndices: [index, index + 1]
565
- });
566
- const resizeHandleElement = resizeHandleElements[index];
567
- if (resizeHandleElement == null) ; else {
568
- const panelData = panelDataArray[index];
569
- assert(panelData);
570
- resizeHandleElement.setAttribute("aria-controls", panelData.id);
571
- resizeHandleElement.setAttribute("aria-valuemax", "" + Math.round(valueMax));
572
- resizeHandleElement.setAttribute("aria-valuemin", "" + Math.round(valueMin));
573
- resizeHandleElement.setAttribute("aria-valuenow", valueNow != null ? "" + Math.round(valueNow) : "");
574
- }
575
- }
576
- return () => {
577
- resizeHandleElements.forEach((resizeHandleElement, index) => {
578
- resizeHandleElement.removeAttribute("aria-controls");
579
- resizeHandleElement.removeAttribute("aria-valuemax");
580
- resizeHandleElement.removeAttribute("aria-valuemin");
581
- resizeHandleElement.removeAttribute("aria-valuenow");
582
- });
583
- };
584
- }, [groupId, layout, panelDataArray]);
585
- useEffect(() => {
586
- const eagerValues = eagerValuesRef.current;
587
- assert(eagerValues);
588
- const {
589
- panelDataArray
590
- } = eagerValues;
591
- const groupElement = getPanelGroupElement(groupId);
592
- assert(groupElement != null, `No group found for id "${groupId}"`);
593
- const handles = getResizeHandleElementsForGroup(groupId);
594
- assert(handles);
595
- const cleanupFunctions = handles.map(handle => {
596
- const handleId = handle.getAttribute("data-panel-resize-handle-id");
597
- assert(handleId);
598
- const [idBefore, idAfter] = getResizeHandlePanelIds(groupId, handleId, panelDataArray);
599
- if (idBefore == null || idAfter == null) {
600
- return () => {};
601
- }
602
- const onKeyDown = event => {
603
- if (event.defaultPrevented) {
604
- return;
605
- }
606
- switch (event.key) {
607
- case "Enter":
608
- {
609
- event.preventDefault();
610
- const index = panelDataArray.findIndex(panelData => panelData.id === idBefore);
611
- if (index >= 0) {
612
- const panelData = panelDataArray[index];
613
- assert(panelData);
614
- const size = layout[index];
615
- const {
616
- collapsedSize = 0,
617
- collapsible,
618
- minSize = 0
619
- } = panelData.constraints;
620
- if (size != null && collapsible) {
621
- const nextLayout = adjustLayoutByDelta({
622
- delta: fuzzyNumbersEqual(size, collapsedSize) ? minSize - collapsedSize : collapsedSize - size,
623
- layout,
624
- panelConstraints: panelDataArray.map(panelData => panelData.constraints),
625
- pivotIndices: determinePivotIndices(groupId, handleId),
626
- trigger: "keyboard"
627
- });
628
- if (layout !== nextLayout) {
629
- setLayout(nextLayout);
630
- }
463
+
464
+
465
+
466
+
467
+ function $20152a6c44989ce6$export$d9fcbe062527d159({ committedValuesRef: committedValuesRef, eagerValuesRef: eagerValuesRef, groupId: groupId, layout: layout, panelDataArray: panelDataArray, setLayout: setLayout }) {
468
+ const devWarningsRef = (0, $ef07efbe5fa7d87e$export$b8f5890fc79d6aca)({
469
+ didWarnAboutMissingResizeHandle: false
470
+ });
471
+ (0, $3f95d3e171760903$export$2e2bcd8739ae039)(()=>{
472
+ const resizeHandleElements = (0, $9196ba7c0d09e3f3$export$63eb605e437b214f)(groupId);
473
+ for(let index = 0; index < panelDataArray.length - 1; index++){
474
+ const { valueMax: valueMax, valueMin: valueMin, valueNow: valueNow } = (0, $a662cadf71ffedbc$export$b8372a468ba36f7d)({
475
+ layout: layout,
476
+ panelsArray: panelDataArray,
477
+ pivotIndices: [
478
+ index,
479
+ index + 1
480
+ ]
481
+ });
482
+ const resizeHandleElement = resizeHandleElements[index];
483
+ if (resizeHandleElement == null) {
484
+ if (0, $aedbef154d609804$export$df77466336fe5355) {
485
+ const { didWarnAboutMissingResizeHandle: didWarnAboutMissingResizeHandle } = devWarningsRef.current;
486
+ if (!didWarnAboutMissingResizeHandle) {
487
+ devWarningsRef.current.didWarnAboutMissingResizeHandle = true;
488
+ console.warn(`WARNING: Missing resize handle for PanelGroup "${groupId}"`);
489
+ }
631
490
  }
632
- }
633
- break;
491
+ } else {
492
+ const panelData = panelDataArray[index];
493
+ (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(panelData);
494
+ resizeHandleElement.setAttribute("aria-controls", panelData.id);
495
+ resizeHandleElement.setAttribute("aria-valuemax", "" + Math.round(valueMax));
496
+ resizeHandleElement.setAttribute("aria-valuemin", "" + Math.round(valueMin));
497
+ resizeHandleElement.setAttribute("aria-valuenow", valueNow != null ? "" + Math.round(valueNow) : "");
634
498
  }
635
499
  }
636
- };
637
- handle.addEventListener("keydown", onKeyDown);
638
- return () => {
639
- handle.removeEventListener("keydown", onKeyDown);
640
- };
641
- });
642
- return () => {
643
- cleanupFunctions.forEach(cleanupFunction => cleanupFunction());
644
- };
645
- }, [committedValuesRef, eagerValuesRef, groupId, layout, panelDataArray, setLayout]);
500
+ return ()=>{
501
+ resizeHandleElements.forEach((resizeHandleElement, index)=>{
502
+ resizeHandleElement.removeAttribute("aria-controls");
503
+ resizeHandleElement.removeAttribute("aria-valuemax");
504
+ resizeHandleElement.removeAttribute("aria-valuemin");
505
+ resizeHandleElement.removeAttribute("aria-valuenow");
506
+ });
507
+ };
508
+ }, [
509
+ groupId,
510
+ layout,
511
+ panelDataArray
512
+ ]);
513
+ (0, $ef07efbe5fa7d87e$export$6d9c69b0de29b591)(()=>{
514
+ const eagerValues = eagerValuesRef.current;
515
+ (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(eagerValues);
516
+ const { panelDataArray: panelDataArray } = eagerValues;
517
+ const groupElement = (0, $18131dcc0be2e4e0$export$4e72aefa594058df)(groupId);
518
+ (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(groupElement != null, `No group found for id "${groupId}"`);
519
+ const handles = (0, $9196ba7c0d09e3f3$export$63eb605e437b214f)(groupId);
520
+ (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(handles);
521
+ const cleanupFunctions = handles.map((handle)=>{
522
+ const handleId = handle.getAttribute("data-panel-resize-handle-id");
523
+ (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(handleId);
524
+ const [idBefore, idAfter] = (0, $1420c4509c675b80$export$68d3a33c21dfbe27)(groupId, handleId, panelDataArray);
525
+ if (idBefore == null || idAfter == null) return ()=>{};
526
+ const onKeyDown = (event)=>{
527
+ if (event.defaultPrevented) return;
528
+ switch(event.key){
529
+ case "Enter":
530
+ {
531
+ event.preventDefault();
532
+ const index = panelDataArray.findIndex((panelData)=>panelData.id === idBefore);
533
+ if (index >= 0) {
534
+ const panelData = panelDataArray[index];
535
+ (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(panelData);
536
+ const size = layout[index];
537
+ const { collapsedSize: collapsedSize = 0, collapsible: collapsible, minSize: minSize = 0 } = panelData.constraints;
538
+ if (size != null && collapsible) {
539
+ const nextLayout = (0, $fe96098ae4f2a44d$export$7fead5cc734d205b)({
540
+ delta: (0, $ee71a189401d6914$export$db9c8bd2fae72e82)(size, collapsedSize) ? minSize - collapsedSize : collapsedSize - size,
541
+ layout: layout,
542
+ panelConstraints: panelDataArray.map((panelData)=>panelData.constraints),
543
+ pivotIndices: (0, $0a239c1e1cd1e940$export$cf92598869f99b8f)(groupId, handleId),
544
+ trigger: "keyboard"
545
+ });
546
+ if (layout !== nextLayout) setLayout(nextLayout);
547
+ }
548
+ }
549
+ break;
550
+ }
551
+ }
552
+ };
553
+ handle.addEventListener("keydown", onKeyDown);
554
+ return ()=>{
555
+ handle.removeEventListener("keydown", onKeyDown);
556
+ };
557
+ });
558
+ return ()=>{
559
+ cleanupFunctions.forEach((cleanupFunction)=>cleanupFunction());
560
+ };
561
+ }, [
562
+ committedValuesRef,
563
+ eagerValuesRef,
564
+ groupId,
565
+ layout,
566
+ panelDataArray,
567
+ setLayout
568
+ ]);
646
569
  }
647
570
 
648
- function areEqual(arrayA, arrayB) {
649
- if (arrayA.length !== arrayB.length) {
650
- return false;
651
- }
652
- for (let index = 0; index < arrayA.length; index++) {
653
- if (arrayA[index] !== arrayB[index]) {
654
- return false;
571
+
572
+
573
+ function $c892f0f705e6ded5$export$b141efd0b0fb9174(arrayA, arrayB) {
574
+ if (arrayA.length !== arrayB.length) return false;
575
+ for(let index = 0; index < arrayA.length; index++){
576
+ if (arrayA[index] !== arrayB[index]) return false;
655
577
  }
656
- }
657
- return true;
578
+ return true;
658
579
  }
659
580
 
660
- function isKeyDown(event) {
661
- return event.type === "keydown";
581
+
582
+
583
+
584
+
585
+
586
+
587
+ function $5bf95d6f4b7f490d$export$e7bf60a870f429b0(event) {
588
+ return event.type === "keydown";
662
589
  }
663
- function isMouseEvent(event) {
664
- return event.type.startsWith("mouse");
590
+ function $5bf95d6f4b7f490d$export$764db16956f554f8(event) {
591
+ return event.type.startsWith("mouse");
665
592
  }
666
- function isTouchEvent(event) {
667
- return event.type.startsWith("touch");
593
+ function $5bf95d6f4b7f490d$export$c4dfce035d43d1e0(event) {
594
+ return event.type.startsWith("touch");
668
595
  }
669
596
 
670
- function getResizeEventCursorPosition(direction, event) {
671
- const isHorizontal = direction === "horizontal";
672
- if (isMouseEvent(event)) {
673
- return isHorizontal ? event.clientX : event.clientY;
674
- } else if (isTouchEvent(event)) {
675
- const firstTouch = event.touches[0];
676
- assert(firstTouch);
677
- return isHorizontal ? firstTouch.screenX : firstTouch.screenY;
678
- } else {
679
- throw Error(`Unsupported event type "${event.type}"`);
680
- }
681
- }
682
597
 
683
- function calculateDragOffsetPercentage(event, dragHandleId, direction, initialDragState) {
684
- const isHorizontal = direction === "horizontal";
685
- const handleElement = getResizeHandleElement(dragHandleId);
686
- assert(handleElement);
687
- const groupId = handleElement.getAttribute("data-panel-group-id");
688
- assert(groupId);
689
- let {
690
- initialCursorPosition
691
- } = initialDragState;
692
- const cursorPosition = getResizeEventCursorPosition(direction, event);
693
- const groupElement = getPanelGroupElement(groupId);
694
- assert(groupElement);
695
- const groupRect = groupElement.getBoundingClientRect();
696
- const groupSizeInPixels = isHorizontal ? groupRect.width : groupRect.height;
697
- const offsetPixels = cursorPosition - initialCursorPosition;
698
- const offsetPercentage = offsetPixels / groupSizeInPixels * 100;
699
- return offsetPercentage;
598
+ function $a568cbd9a3e686f5$export$ae0c59ca751ba81d(direction, event) {
599
+ const isHorizontal = direction === "horizontal";
600
+ if ((0, $5bf95d6f4b7f490d$export$764db16956f554f8)(event)) return isHorizontal ? event.clientX : event.clientY;
601
+ else if ((0, $5bf95d6f4b7f490d$export$c4dfce035d43d1e0)(event)) {
602
+ const firstTouch = event.touches[0];
603
+ (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(firstTouch);
604
+ return isHorizontal ? firstTouch.screenX : firstTouch.screenY;
605
+ } else throw Error(`Unsupported event type "${event.type}"`);
700
606
  }
701
607
 
702
- // https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/movementX
703
- function calculateDeltaPercentage(event, dragHandleId, direction, initialDragState, keyboardResizeBy) {
704
- if (isKeyDown(event)) {
608
+
609
+ function $27aab610d2a81ebc$export$e3b8a38f1f6abc89(event, dragHandleId, direction, initialDragState) {
705
610
  const isHorizontal = direction === "horizontal";
706
- let delta = 0;
707
- if (event.shiftKey) {
708
- delta = 100;
709
- } else if (keyboardResizeBy != null) {
710
- delta = keyboardResizeBy;
611
+ const handleElement = (0, $99b0d18e36332b26$export$4c5229c874a62620)(dragHandleId);
612
+ (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(handleElement);
613
+ const groupId = handleElement.getAttribute("data-panel-group-id");
614
+ (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(groupId);
615
+ let { initialCursorPosition: initialCursorPosition } = initialDragState;
616
+ const cursorPosition = (0, $a568cbd9a3e686f5$export$ae0c59ca751ba81d)(direction, event);
617
+ const groupElement = (0, $18131dcc0be2e4e0$export$4e72aefa594058df)(groupId);
618
+ (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(groupElement);
619
+ const groupRect = groupElement.getBoundingClientRect();
620
+ const groupSizeInPixels = isHorizontal ? groupRect.width : groupRect.height;
621
+ const offsetPixels = cursorPosition - initialCursorPosition;
622
+ const offsetPercentage = offsetPixels / groupSizeInPixels * 100;
623
+ return offsetPercentage;
624
+ }
625
+
626
+
627
+
628
+ function $c845d5a27273095d$export$b08134b65f9db46a(event, dragHandleId, direction, initialDragState, keyboardResizeBy) {
629
+ if ((0, $5bf95d6f4b7f490d$export$e7bf60a870f429b0)(event)) {
630
+ const isHorizontal = direction === "horizontal";
631
+ let delta = 0;
632
+ if (event.shiftKey) delta = 100;
633
+ else if (keyboardResizeBy != null) delta = keyboardResizeBy;
634
+ else delta = 10;
635
+ let movement = 0;
636
+ switch(event.key){
637
+ case "ArrowDown":
638
+ movement = isHorizontal ? 0 : delta;
639
+ break;
640
+ case "ArrowLeft":
641
+ movement = isHorizontal ? -delta : 0;
642
+ break;
643
+ case "ArrowRight":
644
+ movement = isHorizontal ? delta : 0;
645
+ break;
646
+ case "ArrowUp":
647
+ movement = isHorizontal ? 0 : -delta;
648
+ break;
649
+ case "End":
650
+ movement = 100;
651
+ break;
652
+ case "Home":
653
+ movement = -100;
654
+ break;
655
+ }
656
+ return movement;
711
657
  } else {
712
- delta = 10;
713
- }
714
- let movement = 0;
715
- switch (event.key) {
716
- case "ArrowDown":
717
- movement = isHorizontal ? 0 : delta;
718
- break;
719
- case "ArrowLeft":
720
- movement = isHorizontal ? -delta : 0;
721
- break;
722
- case "ArrowRight":
723
- movement = isHorizontal ? delta : 0;
724
- break;
725
- case "ArrowUp":
726
- movement = isHorizontal ? 0 : -delta;
727
- break;
728
- case "End":
729
- movement = 100;
730
- break;
731
- case "Home":
732
- movement = -100;
733
- break;
658
+ if (initialDragState == null) return 0;
659
+ return (0, $27aab610d2a81ebc$export$e3b8a38f1f6abc89)(event, dragHandleId, direction, initialDragState);
734
660
  }
735
- return movement;
736
- } else {
737
- if (initialDragState == null) {
738
- return 0;
739
- }
740
- return calculateDragOffsetPercentage(event, dragHandleId, direction, initialDragState);
741
- }
742
661
  }
743
662
 
744
- function calculateUnsafeDefaultLayout({
745
- panelDataArray
746
- }) {
747
- const layout = Array(panelDataArray.length);
748
- const panelConstraintsArray = panelDataArray.map(panelData => panelData.constraints);
749
- let numPanelsWithSizes = 0;
750
- let remainingSize = 100;
751
-
752
- // Distribute default sizes first
753
- for (let index = 0; index < panelDataArray.length; index++) {
754
- const panelConstraints = panelConstraintsArray[index];
755
- assert(panelConstraints);
756
- const {
757
- defaultSize
758
- } = panelConstraints;
759
- if (defaultSize != null) {
760
- numPanelsWithSizes++;
761
- layout[index] = defaultSize;
762
- remainingSize -= defaultSize;
663
+
664
+
665
+ function $457c46ca858cf2c6$export$47337a21c443778e({ panelDataArray: panelDataArray }) {
666
+ const layout = Array(panelDataArray.length);
667
+ const panelConstraintsArray = panelDataArray.map((panelData)=>panelData.constraints);
668
+ let numPanelsWithSizes = 0;
669
+ let remainingSize = 100;
670
+ // Distribute default sizes first
671
+ for(let index = 0; index < panelDataArray.length; index++){
672
+ const panelConstraints = panelConstraintsArray[index];
673
+ (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(panelConstraints);
674
+ const { defaultSize: defaultSize } = panelConstraints;
675
+ if (defaultSize != null) {
676
+ numPanelsWithSizes++;
677
+ layout[index] = defaultSize;
678
+ remainingSize -= defaultSize;
679
+ }
763
680
  }
764
- }
765
-
766
- // Remaining size should be distributed evenly between panels without default sizes
767
- for (let index = 0; index < panelDataArray.length; index++) {
768
- const panelConstraints = panelConstraintsArray[index];
769
- assert(panelConstraints);
770
- const {
771
- defaultSize
772
- } = panelConstraints;
773
- if (defaultSize != null) {
774
- continue;
681
+ // Remaining size should be distributed evenly between panels without default sizes
682
+ for(let index = 0; index < panelDataArray.length; index++){
683
+ const panelConstraints = panelConstraintsArray[index];
684
+ (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(panelConstraints);
685
+ const { defaultSize: defaultSize } = panelConstraints;
686
+ if (defaultSize != null) continue;
687
+ const numRemainingPanels = panelDataArray.length - numPanelsWithSizes;
688
+ const size = remainingSize / numRemainingPanels;
689
+ numPanelsWithSizes++;
690
+ layout[index] = size;
691
+ remainingSize -= size;
775
692
  }
776
- const numRemainingPanels = panelDataArray.length - numPanelsWithSizes;
777
- const size = remainingSize / numRemainingPanels;
778
- numPanelsWithSizes++;
779
- layout[index] = size;
780
- remainingSize -= size;
781
- }
782
- return layout;
693
+ return layout;
783
694
  }
784
695
 
785
- // Layout should be pre-converted into percentages
786
- function callPanelCallbacks(panelsArray, layout, panelIdToLastNotifiedSizeMap) {
787
- layout.forEach((size, index) => {
788
- const panelData = panelsArray[index];
789
- assert(panelData);
790
- const {
791
- callbacks,
792
- constraints,
793
- id: panelId
794
- } = panelData;
795
- const {
796
- collapsedSize = 0,
797
- collapsible
798
- } = constraints;
799
- const lastNotifiedSize = panelIdToLastNotifiedSizeMap[panelId];
800
- if (lastNotifiedSize == null || size !== lastNotifiedSize) {
801
- panelIdToLastNotifiedSizeMap[panelId] = size;
802
- const {
803
- onCollapse,
804
- onExpand,
805
- onResize
806
- } = callbacks;
807
- if (onResize) {
808
- onResize(size, lastNotifiedSize);
809
- }
810
- if (collapsible && (onCollapse || onExpand)) {
811
- if (onExpand && (lastNotifiedSize == null || lastNotifiedSize === collapsedSize) && size !== collapsedSize) {
812
- onExpand();
813
- }
814
- if (onCollapse && (lastNotifiedSize == null || lastNotifiedSize !== collapsedSize) && size === collapsedSize) {
815
- onCollapse();
696
+
697
+
698
+ function $2743876c6469fb21$export$b8e48269e4faa934(panelsArray, layout, panelIdToLastNotifiedSizeMap) {
699
+ layout.forEach((size, index)=>{
700
+ const panelData = panelsArray[index];
701
+ (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(panelData);
702
+ const { callbacks: callbacks, constraints: constraints, id: panelId } = panelData;
703
+ const { collapsedSize: collapsedSize = 0, collapsible: collapsible } = constraints;
704
+ const lastNotifiedSize = panelIdToLastNotifiedSizeMap[panelId];
705
+ if (lastNotifiedSize == null || size !== lastNotifiedSize) {
706
+ panelIdToLastNotifiedSizeMap[panelId] = size;
707
+ const { onCollapse: onCollapse, onExpand: onExpand, onResize: onResize } = callbacks;
708
+ if (onResize) onResize(size, lastNotifiedSize);
709
+ if (collapsible && (onCollapse || onExpand)) {
710
+ if (onExpand && (lastNotifiedSize == null || lastNotifiedSize === collapsedSize) && size !== collapsedSize) onExpand();
711
+ if (onCollapse && (lastNotifiedSize == null || lastNotifiedSize !== collapsedSize) && size === collapsedSize) onCollapse();
712
+ }
816
713
  }
817
- }
818
- }
819
- });
714
+ });
820
715
  }
821
716
 
822
- function compareLayouts(a, b) {
823
- if (a.length !== b.length) {
824
- return false;
825
- } else {
826
- for (let index = 0; index < a.length; index++) {
827
- if (a[index] != b[index]) {
828
- return false;
829
- }
717
+
718
+ function $81d2449822663a2a$export$a10903e2e57656c1(a, b) {
719
+ if (a.length !== b.length) return false;
720
+ else for(let index = 0; index < a.length; index++){
721
+ if (a[index] != b[index]) return false;
830
722
  }
831
- }
832
- return true;
723
+ return true;
833
724
  }
834
725
 
835
- // This method returns a number between 1 and 100 representing
836
726
 
837
- // the % of the group's overall space this panel should occupy.
838
- function computePanelFlexBoxStyle({
839
- dragState,
840
- layout,
841
- panelData,
842
- panelIndex,
843
- precision = 3
844
- }) {
845
- const size = layout[panelIndex];
846
- let flexGrow;
847
- if (panelData.length === 1) {
848
- flexGrow = "1";
849
- } else if (size == null) {
850
- // Initial render (before panels have registered themselves)
727
+ // This method returns a number between 1 and 100 representing
728
+ function $d4957558c333bad2$export$fc25f3248e61edf5({ dragState: dragState, layout: layout, panelData: panelData, panelIndex: panelIndex, precision: precision = 3 }) {
729
+ const size = layout[panelIndex];
730
+ let flexGrow;
731
+ if (panelData.length === 1) flexGrow = "1";
732
+ else if (size == null) // Initial render (before panels have registered themselves)
851
733
  flexGrow = "1";
852
- } else {
853
- flexGrow = size.toPrecision(precision);
854
- }
855
- return {
856
- flexBasis: 0,
857
- flexGrow,
858
- flexShrink: 1,
859
- // Without this, Panel sizes may be unintentionally overridden by their content
860
- overflow: "hidden",
861
- // Disable pointer events inside of a panel during resize
862
- // This avoid edge cases like nested iframes
863
- pointerEvents: dragState !== null ? "none" : undefined
864
- };
734
+ else flexGrow = size.toPrecision(precision);
735
+ return {
736
+ flexBasis: 0,
737
+ flexGrow: flexGrow,
738
+ flexShrink: 1,
739
+ // Without this, Panel sizes may be unintentionally overridden by their content
740
+ overflow: "hidden",
741
+ // Disable pointer events inside of a panel during resize
742
+ // This avoid edge cases like nested iframes
743
+ pointerEvents: dragState !== null ? "none" : undefined
744
+ };
865
745
  }
866
746
 
867
- let currentState = null;
868
- let element = null;
869
- function getCursorStyle(state) {
870
- switch (state) {
871
- case "horizontal":
872
- return "ew-resize";
873
- case "horizontal-max":
874
- return "w-resize";
875
- case "horizontal-min":
876
- return "e-resize";
877
- case "vertical":
878
- return "ns-resize";
879
- case "vertical-max":
880
- return "n-resize";
881
- case "vertical-min":
882
- return "s-resize";
883
- }
747
+
748
+ let $8d9d88bebf1a8ace$var$currentState = null;
749
+ let $8d9d88bebf1a8ace$var$element = null;
750
+ function $8d9d88bebf1a8ace$export$fa35f3322c52262f(state) {
751
+ switch(state){
752
+ case "horizontal":
753
+ return "ew-resize";
754
+ case "horizontal-max":
755
+ return "w-resize";
756
+ case "horizontal-min":
757
+ return "e-resize";
758
+ case "vertical":
759
+ return "ns-resize";
760
+ case "vertical-max":
761
+ return "n-resize";
762
+ case "vertical-min":
763
+ return "s-resize";
764
+ }
884
765
  }
885
- function resetGlobalCursorStyle() {
886
- if (element !== null) {
887
- document.head.removeChild(element);
888
- currentState = null;
889
- element = null;
890
- }
766
+ function $8d9d88bebf1a8ace$export$b61932ee18f96e08() {
767
+ if ($8d9d88bebf1a8ace$var$element !== null) {
768
+ document.head.removeChild($8d9d88bebf1a8ace$var$element);
769
+ $8d9d88bebf1a8ace$var$currentState = null;
770
+ $8d9d88bebf1a8ace$var$element = null;
771
+ }
891
772
  }
892
- function setGlobalCursorStyle(state) {
893
- if (currentState === state) {
894
- return;
895
- }
896
- currentState = state;
897
- const style = getCursorStyle(state);
898
- if (element === null) {
899
- element = document.createElement("style");
900
- document.head.appendChild(element);
901
- }
902
- element.innerHTML = `*{cursor: ${style}!important;}`;
773
+ function $8d9d88bebf1a8ace$export$d395b5dfd066a659(state) {
774
+ if ($8d9d88bebf1a8ace$var$currentState === state) return;
775
+ $8d9d88bebf1a8ace$var$currentState = state;
776
+ const style = $8d9d88bebf1a8ace$export$fa35f3322c52262f(state);
777
+ if ($8d9d88bebf1a8ace$var$element === null) {
778
+ $8d9d88bebf1a8ace$var$element = document.createElement("style");
779
+ document.head.appendChild($8d9d88bebf1a8ace$var$element);
780
+ }
781
+ $8d9d88bebf1a8ace$var$element.innerHTML = `*{cursor: ${style}!important;}`;
903
782
  }
904
783
 
905
- function debounce(callback, durationMs = 10) {
906
- let timeoutId = null;
907
- let callable = (...args) => {
908
- if (timeoutId !== null) {
909
- clearTimeout(timeoutId);
910
- }
911
- timeoutId = setTimeout(() => {
912
- callback(...args);
913
- }, durationMs);
914
- };
915
- return callable;
784
+
785
+ function $f7d932e9304c1581$export$2e2bcd8739ae039(callback, durationMs = 10) {
786
+ let timeoutId = null;
787
+ let callable = (...args)=>{
788
+ if (timeoutId !== null) clearTimeout(timeoutId);
789
+ timeoutId = setTimeout(()=>{
790
+ callback(...args);
791
+ }, durationMs);
792
+ };
793
+ return callable;
916
794
  }
917
795
 
918
- function getPanelElementsForGroup(groupId) {
919
- return Array.from(document.querySelectorAll(`[data-panel][data-panel-group-id="${groupId}"]`));
796
+
797
+
798
+ function $8b4e4613c531093d$export$80bbb698e7429afe(groupId) {
799
+ return Array.from(document.querySelectorAll(`[data-panel][data-panel-group-id="${groupId}"]`));
920
800
  }
921
801
 
922
- // PanelGroup might be rendering in a server-side environment where localStorage is not available
923
- // or on a browser with cookies/storage disabled.
924
- // In either case, this function avoids accessing localStorage until needed,
925
- // and avoids throwing user-visible errors.
926
- function initializeDefaultStorage(storageObject) {
927
- try {
928
- if (typeof localStorage !== "undefined") {
929
- // Bypass this check for future calls
930
- storageObject.getItem = name => {
931
- return localStorage.getItem(name);
932
- };
933
- storageObject.setItem = (name, value) => {
934
- localStorage.setItem(name, value);
935
- };
936
- } else {
937
- throw new Error("localStorage not supported in this environment");
802
+
803
+
804
+
805
+
806
+ function $a7cb003aae329b18$export$cb0adc12c8406347(storageObject) {
807
+ try {
808
+ if (typeof localStorage !== "undefined") {
809
+ // Bypass this check for future calls
810
+ storageObject.getItem = (name)=>{
811
+ return localStorage.getItem(name);
812
+ };
813
+ storageObject.setItem = (name, value)=>{
814
+ localStorage.setItem(name, value);
815
+ };
816
+ } else throw new Error("localStorage not supported in this environment");
817
+ } catch (error) {
818
+ console.error(error);
819
+ storageObject.getItem = ()=>null;
820
+ storageObject.setItem = ()=>{};
938
821
  }
939
- } catch (error) {
940
- console.error(error);
941
- storageObject.getItem = () => null;
942
- storageObject.setItem = () => {};
943
- }
944
822
  }
945
823
 
824
+
946
825
  // Note that Panel ids might be user-provided (stable) or useId generated (non-deterministic)
947
826
  // so they should not be used as part of the serialization key.
948
827
  // Using the min/max size attributes should work well enough as a backup.
949
828
  // Pre-sorting by minSize allows remembering layouts even if panels are re-ordered/dragged.
950
- function getSerializationKey(panels) {
951
- return panels.map(panel => {
952
- const {
953
- constraints,
954
- id,
955
- idIsFromProps,
956
- order
957
- } = panel;
958
- if (idIsFromProps) {
959
- return id;
960
- } else {
961
- return `${order}:${JSON.stringify(constraints)}`;
962
- }
963
- }).sort((a, b) => a.localeCompare(b)).join(",");
829
+ function $6889c3a3ed41cfd1$var$getSerializationKey(panels) {
830
+ return panels.map((panel)=>{
831
+ const { constraints: constraints, id: id, idIsFromProps: idIsFromProps, order: order } = panel;
832
+ if (idIsFromProps) return id;
833
+ else return `${order}:${JSON.stringify(constraints)}`;
834
+ }).sort((a, b)=>a.localeCompare(b)).join(",");
964
835
  }
965
- function loadSerializedPanelGroupState(autoSaveId, storage) {
966
- try {
967
- const serialized = storage.getItem(`PanelGroup:sizes:${autoSaveId}`);
968
- if (serialized) {
969
- const parsed = JSON.parse(serialized);
970
- if (typeof parsed === "object" && parsed != null) {
971
- return parsed;
972
- }
973
- }
974
- } catch (error) {}
975
- return null;
836
+ function $6889c3a3ed41cfd1$var$loadSerializedPanelGroupState(autoSaveId, storage) {
837
+ try {
838
+ const serialized = storage.getItem(`PanelGroup:sizes:${autoSaveId}`);
839
+ if (serialized) {
840
+ const parsed = JSON.parse(serialized);
841
+ if (typeof parsed === "object" && parsed != null) return parsed;
842
+ }
843
+ } catch (error) {}
844
+ return null;
976
845
  }
977
- function loadPanelLayout(autoSaveId, panels, storage) {
978
- const state = loadSerializedPanelGroupState(autoSaveId, storage);
979
- if (state) {
980
- var _state$key;
981
- const key = getSerializationKey(panels);
982
- return (_state$key = state[key]) !== null && _state$key !== void 0 ? _state$key : null;
983
- }
984
- return null;
846
+ function $6889c3a3ed41cfd1$export$9c80c6617f0386da(autoSaveId, panels, storage) {
847
+ const state = $6889c3a3ed41cfd1$var$loadSerializedPanelGroupState(autoSaveId, storage);
848
+ if (state) {
849
+ const key = $6889c3a3ed41cfd1$var$getSerializationKey(panels);
850
+ var _state_key;
851
+ return (_state_key = state[key]) !== null && _state_key !== void 0 ? _state_key : null;
852
+ }
853
+ return null;
985
854
  }
986
- function savePanelGroupLayout(autoSaveId, panels, sizes, storage) {
987
- const key = getSerializationKey(panels);
988
- const state = loadSerializedPanelGroupState(autoSaveId, storage) || {};
989
- state[key] = sizes;
990
- try {
991
- storage.setItem(`PanelGroup:sizes:${autoSaveId}`, JSON.stringify(state));
992
- } catch (error) {
993
- console.error(error);
994
- }
855
+ function $6889c3a3ed41cfd1$export$af183b313c61be4f(autoSaveId, panels, sizes, storage) {
856
+ const key = $6889c3a3ed41cfd1$var$getSerializationKey(panels);
857
+ const state = $6889c3a3ed41cfd1$var$loadSerializedPanelGroupState(autoSaveId, storage) || {};
858
+ state[key] = sizes;
859
+ try {
860
+ storage.setItem(`PanelGroup:sizes:${autoSaveId}`, JSON.stringify(state));
861
+ } catch (error) {
862
+ console.error(error);
863
+ }
995
864
  }
996
865
 
997
- // All units must be in percentages; pixel values should be pre-converted
998
- function validatePanelGroupLayout({
999
- layout: prevLayout,
1000
- panelConstraints
1001
- }) {
1002
- const nextLayout = [...prevLayout];
1003
- const nextLayoutTotalSize = nextLayout.reduce((accumulated, current) => accumulated + current, 0);
1004
-
1005
- // Validate layout expectations
1006
- if (nextLayout.length !== panelConstraints.length) {
1007
- throw Error(`Invalid ${panelConstraints.length} panel layout: ${nextLayout.map(size => `${size}%`).join(", ")}`);
1008
- } else if (!fuzzyNumbersEqual(nextLayoutTotalSize, 100)) {
1009
- for (let index = 0; index < panelConstraints.length; index++) {
1010
- const unsafeSize = nextLayout[index];
1011
- assert(unsafeSize != null);
1012
- const safeSize = 100 / nextLayoutTotalSize * unsafeSize;
1013
- nextLayout[index] = safeSize;
1014
- }
1015
- }
1016
- let remainingSize = 0;
1017
-
1018
- // First pass: Validate the proposed layout given each panel's constraints
1019
- for (let index = 0; index < panelConstraints.length; index++) {
1020
- const unsafeSize = nextLayout[index];
1021
- assert(unsafeSize != null);
1022
- const safeSize = resizePanel({
1023
- panelConstraints,
1024
- panelIndex: index,
1025
- size: unsafeSize
1026
- });
1027
- if (unsafeSize != safeSize) {
1028
- remainingSize += unsafeSize - safeSize;
1029
- nextLayout[index] = safeSize;
1030
- }
1031
- }
1032
-
1033
- // If there is additional, left over space, assign it to any panel(s) that permits it
1034
- // (It's not worth taking multiple additional passes to evenly distribute)
1035
- if (!fuzzyNumbersEqual(remainingSize, 0)) {
1036
- for (let index = 0; index < panelConstraints.length; index++) {
1037
- const prevSize = nextLayout[index];
1038
- assert(prevSize != null);
1039
- const unsafeSize = prevSize + remainingSize;
1040
- const safeSize = resizePanel({
1041
- panelConstraints,
1042
- panelIndex: index,
1043
- size: unsafeSize
1044
- });
1045
- if (prevSize !== safeSize) {
1046
- remainingSize -= safeSize - prevSize;
1047
- nextLayout[index] = safeSize;
1048
-
1049
- // Once we've used up the remainder, bail
1050
- if (fuzzyNumbersEqual(remainingSize, 0)) {
1051
- break;
866
+
867
+
868
+
869
+ function $006440f9579d3b07$export$d00cfefa2c395b39({ panelConstraints: panelConstraintsArray, panelId: panelId, panelIndex: panelIndex }) {
870
+ if (0, $aedbef154d609804$export$df77466336fe5355) {
871
+ const warnings = [];
872
+ const panelConstraints = panelConstraintsArray[panelIndex];
873
+ (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(panelConstraints);
874
+ const { collapsedSize: collapsedSize = 0, defaultSize: defaultSize, maxSize: maxSize = 100, minSize: minSize = 0 } = panelConstraints;
875
+ if (minSize > maxSize) warnings.push(`min size (${minSize}%) should not be greater than max size (${maxSize}%)`);
876
+ if (defaultSize != null) {
877
+ if (defaultSize < 0) warnings.push("default size should not be less than 0");
878
+ else if (defaultSize < minSize) warnings.push("default size should not be less than min size");
879
+ if (defaultSize > 100) warnings.push("default size should not be greater than 100");
880
+ else if (defaultSize > maxSize) warnings.push("default size should not be greater than max size");
881
+ }
882
+ if (collapsedSize > minSize) warnings.push("collapsed size should not be greater than min size");
883
+ if (warnings.length > 0) {
884
+ const name = panelId != null ? `Panel "${panelId}"` : "Panel";
885
+ console.warn(`${name} has an invalid configuration:\n\n${warnings.join("\n")}`);
886
+ return false;
1052
887
  }
1053
- }
1054
888
  }
1055
- }
1056
- return nextLayout;
889
+ return true;
1057
890
  }
1058
891
 
1059
- const LOCAL_STORAGE_DEBOUNCE_INTERVAL = 100;
1060
- const defaultStorage = {
1061
- getItem: name => {
1062
- initializeDefaultStorage(defaultStorage);
1063
- return defaultStorage.getItem(name);
1064
- },
1065
- setItem: (name, value) => {
1066
- initializeDefaultStorage(defaultStorage);
1067
- defaultStorage.setItem(name, value);
1068
- }
1069
- };
1070
- const debounceMap = {};
1071
- function PanelGroupWithForwardedRef({
1072
- autoSaveId = null,
1073
- children,
1074
- className: classNameFromProps = "",
1075
- direction,
1076
- forwardedRef,
1077
- id: idFromProps = null,
1078
- onLayout = null,
1079
- keyboardResizeBy = null,
1080
- storage = defaultStorage,
1081
- style: styleFromProps,
1082
- tagName: Type = "div",
1083
- ...rest
1084
- }) {
1085
- const groupId = useUniqueId(idFromProps);
1086
- const [dragState, setDragState] = useState(null);
1087
- const [layout, setLayout] = useState([]);
1088
- const panelIdToLastNotifiedSizeMapRef = useRef({});
1089
- const panelSizeBeforeCollapseRef = useRef(new Map());
1090
- const prevDeltaRef = useRef(0);
1091
- const committedValuesRef = useRef({
1092
- autoSaveId,
1093
- direction,
1094
- dragState,
1095
- id: groupId,
1096
- keyboardResizeBy,
1097
- onLayout,
1098
- storage
1099
- });
1100
- const eagerValuesRef = useRef({
1101
- layout,
1102
- panelDataArray: []
1103
- });
1104
- useRef({
1105
- didLogIdAndOrderWarning: false,
1106
- didLogPanelConstraintsWarning: false,
1107
- prevPanelIds: []
1108
- });
1109
- useImperativeHandle(forwardedRef, () => ({
1110
- getId: () => committedValuesRef.current.id,
1111
- getLayout: () => {
1112
- const {
1113
- layout
1114
- } = eagerValuesRef.current;
1115
- return layout;
1116
- },
1117
- setLayout: unsafeLayout => {
1118
- const {
1119
- onLayout
1120
- } = committedValuesRef.current;
1121
- const {
1122
- layout: prevLayout,
1123
- panelDataArray
1124
- } = eagerValuesRef.current;
1125
- const safeLayout = validatePanelGroupLayout({
1126
- layout: unsafeLayout,
1127
- panelConstraints: panelDataArray.map(panelData => panelData.constraints)
1128
- });
1129
- if (!areEqual(prevLayout, safeLayout)) {
1130
- setLayout(safeLayout);
1131
- eagerValuesRef.current.layout = safeLayout;
1132
- if (onLayout) {
1133
- onLayout(safeLayout);
892
+
893
+
894
+
895
+
896
+
897
+ function $6f1a05873bb6ec6f$export$64432a52a1035c18({ layout: prevLayout, panelConstraints: panelConstraints }) {
898
+ const nextLayout = [
899
+ ...prevLayout
900
+ ];
901
+ const nextLayoutTotalSize = nextLayout.reduce((accumulated, current)=>accumulated + current, 0);
902
+ // Validate layout expectations
903
+ if (nextLayout.length !== panelConstraints.length) throw Error(`Invalid ${panelConstraints.length} panel layout: ${nextLayout.map((size)=>`${size}%`).join(", ")}`);
904
+ else if (!(0, $ee71a189401d6914$export$db9c8bd2fae72e82)(nextLayoutTotalSize, 100)) {
905
+ // This is not ideal so we should warn about it, but it may be recoverable in some cases
906
+ // (especially if the amount is small)
907
+ if (0, $aedbef154d609804$export$df77466336fe5355) console.warn(`WARNING: Invalid layout total size: ${nextLayout.map((size)=>`${size}%`).join(", ")}. Layout normalization will be applied.`);
908
+ for(let index = 0; index < panelConstraints.length; index++){
909
+ const unsafeSize = nextLayout[index];
910
+ (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(unsafeSize != null);
911
+ const safeSize = 100 / nextLayoutTotalSize * unsafeSize;
912
+ nextLayout[index] = safeSize;
1134
913
  }
1135
- callPanelCallbacks(panelDataArray, safeLayout, panelIdToLastNotifiedSizeMapRef.current);
1136
- }
1137
- }
1138
- }), []);
1139
- useIsomorphicLayoutEffect(() => {
1140
- committedValuesRef.current.autoSaveId = autoSaveId;
1141
- committedValuesRef.current.direction = direction;
1142
- committedValuesRef.current.dragState = dragState;
1143
- committedValuesRef.current.id = groupId;
1144
- committedValuesRef.current.onLayout = onLayout;
1145
- committedValuesRef.current.storage = storage;
1146
- });
1147
- useWindowSplitterPanelGroupBehavior({
1148
- committedValuesRef,
1149
- eagerValuesRef,
1150
- groupId,
1151
- layout,
1152
- panelDataArray: eagerValuesRef.current.panelDataArray,
1153
- setLayout
1154
- });
1155
- useEffect(() => {
1156
- const {
1157
- panelDataArray
1158
- } = eagerValuesRef.current;
1159
-
1160
- // If this panel has been configured to persist sizing information, save sizes to local storage.
1161
- if (autoSaveId) {
1162
- if (layout.length === 0 || layout.length !== panelDataArray.length) {
1163
- return;
1164
- }
1165
- let debouncedSave = debounceMap[autoSaveId];
1166
-
1167
- // Limit the frequency of localStorage updates.
1168
- if (debouncedSave == null) {
1169
- debouncedSave = debounce(savePanelGroupLayout, LOCAL_STORAGE_DEBOUNCE_INTERVAL);
1170
- debounceMap[autoSaveId] = debouncedSave;
1171
- }
1172
- debouncedSave(autoSaveId, panelDataArray, layout, storage);
1173
914
  }
1174
- }, [autoSaveId, layout, storage]);
1175
-
1176
- // DEV warnings
1177
- useEffect(() => {
1178
- });
1179
-
1180
- // External APIs are safe to memoize via committed values ref
1181
- const collapsePanel = useCallback(panelData => {
1182
- const {
1183
- onLayout
1184
- } = committedValuesRef.current;
1185
- const {
1186
- layout: prevLayout,
1187
- panelDataArray
1188
- } = eagerValuesRef.current;
1189
- if (panelData.constraints.collapsible) {
1190
- const panelConstraintsArray = panelDataArray.map(panelData => panelData.constraints);
1191
- const {
1192
- collapsedSize = 0,
1193
- panelSize,
1194
- pivotIndices
1195
- } = panelDataHelper(panelDataArray, panelData, prevLayout);
1196
- assert(panelSize != null);
1197
- if (panelSize !== collapsedSize) {
1198
- // Store size before collapse;
1199
- // This is the size that gets restored if the expand() API is used.
1200
- panelSizeBeforeCollapseRef.current.set(panelData.id, panelSize);
1201
- const isLastPanel = panelDataArray.indexOf(panelData) === panelDataArray.length - 1;
1202
- const delta = isLastPanel ? panelSize - collapsedSize : collapsedSize - panelSize;
1203
- const nextLayout = adjustLayoutByDelta({
1204
- delta,
1205
- layout: prevLayout,
1206
- panelConstraints: panelConstraintsArray,
1207
- pivotIndices,
1208
- trigger: "imperative-api"
915
+ let remainingSize = 0;
916
+ // First pass: Validate the proposed layout given each panel's constraints
917
+ for(let index = 0; index < panelConstraints.length; index++){
918
+ const unsafeSize = nextLayout[index];
919
+ (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(unsafeSize != null);
920
+ const safeSize = (0, $40f29f7a20511409$export$2f98edcf4006376f)({
921
+ panelConstraints: panelConstraints,
922
+ panelIndex: index,
923
+ size: unsafeSize
1209
924
  });
1210
- if (!compareLayouts(prevLayout, nextLayout)) {
1211
- setLayout(nextLayout);
1212
- eagerValuesRef.current.layout = nextLayout;
1213
- if (onLayout) {
1214
- onLayout(nextLayout);
1215
- }
1216
- callPanelCallbacks(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
925
+ if (unsafeSize != safeSize) {
926
+ remainingSize += unsafeSize - safeSize;
927
+ nextLayout[index] = safeSize;
1217
928
  }
1218
- }
1219
929
  }
1220
- }, []);
1221
-
1222
- // External APIs are safe to memoize via committed values ref
1223
- const expandPanel = useCallback(panelData => {
1224
- const {
1225
- onLayout
1226
- } = committedValuesRef.current;
1227
- const {
1228
- layout: prevLayout,
1229
- panelDataArray
1230
- } = eagerValuesRef.current;
1231
- if (panelData.constraints.collapsible) {
1232
- const panelConstraintsArray = panelDataArray.map(panelData => panelData.constraints);
1233
- const {
1234
- collapsedSize = 0,
1235
- panelSize,
1236
- minSize = 0,
1237
- pivotIndices
1238
- } = panelDataHelper(panelDataArray, panelData, prevLayout);
1239
- if (panelSize === collapsedSize) {
1240
- // Restore this panel to the size it was before it was collapsed, if possible.
1241
- const prevPanelSize = panelSizeBeforeCollapseRef.current.get(panelData.id);
1242
- const baseSize = prevPanelSize != null && prevPanelSize >= minSize ? prevPanelSize : minSize;
1243
- const isLastPanel = panelDataArray.indexOf(panelData) === panelDataArray.length - 1;
1244
- const delta = isLastPanel ? panelSize - baseSize : baseSize - panelSize;
1245
- const nextLayout = adjustLayoutByDelta({
1246
- delta,
1247
- layout: prevLayout,
1248
- panelConstraints: panelConstraintsArray,
1249
- pivotIndices,
1250
- trigger: "imperative-api"
930
+ // If there is additional, left over space, assign it to any panel(s) that permits it
931
+ // (It's not worth taking multiple additional passes to evenly distribute)
932
+ if (!(0, $ee71a189401d6914$export$db9c8bd2fae72e82)(remainingSize, 0)) for(let index = 0; index < panelConstraints.length; index++){
933
+ const prevSize = nextLayout[index];
934
+ (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(prevSize != null);
935
+ const unsafeSize = prevSize + remainingSize;
936
+ const safeSize = (0, $40f29f7a20511409$export$2f98edcf4006376f)({
937
+ panelConstraints: panelConstraints,
938
+ panelIndex: index,
939
+ size: unsafeSize
1251
940
  });
1252
- if (!compareLayouts(prevLayout, nextLayout)) {
1253
- setLayout(nextLayout);
1254
- eagerValuesRef.current.layout = nextLayout;
1255
- if (onLayout) {
1256
- onLayout(nextLayout);
1257
- }
1258
- callPanelCallbacks(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
941
+ if (prevSize !== safeSize) {
942
+ remainingSize -= safeSize - prevSize;
943
+ nextLayout[index] = safeSize;
944
+ // Once we've used up the remainder, bail
945
+ if ((0, $ee71a189401d6914$export$db9c8bd2fae72e82)(remainingSize, 0)) break;
1259
946
  }
1260
- }
1261
947
  }
1262
- }, []);
1263
-
1264
- // External APIs are safe to memoize via committed values ref
1265
- const getPanelSize = useCallback(panelData => {
1266
- const {
1267
- layout,
1268
- panelDataArray
1269
- } = eagerValuesRef.current;
1270
- const {
1271
- panelSize
1272
- } = panelDataHelper(panelDataArray, panelData, layout);
1273
- assert(panelSize != null);
1274
- return panelSize;
1275
- }, []);
1276
-
1277
- // This API should never read from committedValuesRef
1278
- const getPanelStyle = useCallback(panelData => {
1279
- const {
1280
- panelDataArray
1281
- } = eagerValuesRef.current;
1282
- const panelIndex = panelDataArray.indexOf(panelData);
1283
- return computePanelFlexBoxStyle({
1284
- dragState,
1285
- layout,
1286
- panelData: panelDataArray,
1287
- panelIndex
1288
- });
1289
- }, [dragState, layout]);
1290
-
1291
- // External APIs are safe to memoize via committed values ref
1292
- const isPanelCollapsed = useCallback(panelData => {
1293
- const {
1294
- layout,
1295
- panelDataArray
1296
- } = eagerValuesRef.current;
1297
- const {
1298
- collapsedSize,
1299
- collapsible,
1300
- panelSize
1301
- } = panelDataHelper(panelDataArray, panelData, layout);
1302
- return collapsible === true && panelSize === collapsedSize;
1303
- }, []);
1304
-
1305
- // External APIs are safe to memoize via committed values ref
1306
- const isPanelExpanded = useCallback(panelData => {
1307
- const {
1308
- layout,
1309
- panelDataArray
1310
- } = eagerValuesRef.current;
1311
- const {
1312
- collapsedSize = 0,
1313
- collapsible,
1314
- panelSize
1315
- } = panelDataHelper(panelDataArray, panelData, layout);
1316
- assert(panelSize != null);
1317
- return !collapsible || panelSize > collapsedSize;
1318
- }, []);
1319
- const registerPanel = useCallback(panelData => {
1320
- const {
1321
- autoSaveId,
1322
- id: groupId,
1323
- onLayout,
1324
- storage
1325
- } = committedValuesRef.current;
1326
- const {
1327
- layout: prevLayout,
1328
- panelDataArray
1329
- } = eagerValuesRef.current;
1330
- panelDataArray.push(panelData);
1331
- panelDataArray.sort((panelA, panelB) => {
1332
- const orderA = panelA.order;
1333
- const orderB = panelB.order;
1334
- if (orderA == null && orderB == null) {
1335
- return 0;
1336
- } else if (orderA == null) {
1337
- return -1;
1338
- } else if (orderB == null) {
1339
- return 1;
1340
- } else {
1341
- return orderA - orderB;
1342
- }
1343
- });
948
+ return nextLayout;
949
+ }
1344
950
 
1345
- // Wait until all panels have registered before we try to compute layout;
1346
- // doing it earlier is both wasteful and may trigger misleading warnings in development mode.
1347
- const panelElements = getPanelElementsForGroup(groupId);
1348
- if (panelElements.length !== panelDataArray.length) {
1349
- return;
1350
- }
1351
951
 
1352
- // If this panel has been configured to persist sizing information,
1353
- // default size should be restored from local storage if possible.
1354
- let unsafeLayout = null;
1355
- if (autoSaveId) {
1356
- unsafeLayout = loadPanelLayout(autoSaveId, panelDataArray, storage);
1357
- }
1358
- if (unsafeLayout == null) {
1359
- unsafeLayout = calculateUnsafeDefaultLayout({
1360
- panelDataArray
1361
- });
1362
- }
1363
-
1364
- // Validate even saved layouts in case something has changed since last render
1365
- // e.g. for pixel groups, this could be the size of the window
1366
- const nextLayout = validatePanelGroupLayout({
1367
- layout: unsafeLayout,
1368
- panelConstraints: panelDataArray.map(panelData => panelData.constraints)
1369
- });
1370
952
 
1371
- // Offscreen mode makes this a bit weird;
1372
- // Panels unregister when hidden and re-register when shown again,
1373
- // but the overall layout doesn't change between these two cases.
1374
- setLayout(nextLayout);
1375
- eagerValuesRef.current.layout = nextLayout;
1376
- if (!areEqual(prevLayout, nextLayout)) {
1377
- if (onLayout) {
1378
- onLayout(nextLayout);
1379
- }
1380
- callPanelCallbacks(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
953
+ const $3daa5d4c086ea816$var$LOCAL_STORAGE_DEBOUNCE_INTERVAL = 100;
954
+ const $3daa5d4c086ea816$var$defaultStorage = {
955
+ getItem: (name)=>{
956
+ (0, $a7cb003aae329b18$export$cb0adc12c8406347)($3daa5d4c086ea816$var$defaultStorage);
957
+ return $3daa5d4c086ea816$var$defaultStorage.getItem(name);
958
+ },
959
+ setItem: (name, value)=>{
960
+ (0, $a7cb003aae329b18$export$cb0adc12c8406347)($3daa5d4c086ea816$var$defaultStorage);
961
+ $3daa5d4c086ea816$var$defaultStorage.setItem(name, value);
1381
962
  }
1382
- }, []);
1383
- const registerResizeHandle = useCallback(dragHandleId => {
1384
- return function resizeHandler(event) {
1385
- event.preventDefault();
1386
- const {
1387
- direction,
1388
- dragState,
963
+ };
964
+ const $3daa5d4c086ea816$var$debounceMap = {};
965
+ function $3daa5d4c086ea816$var$PanelGroupWithForwardedRef({ autoSaveId: autoSaveId = null, children: children, className: classNameFromProps = "", direction: direction, forwardedRef: forwardedRef, id: idFromProps = null, onLayout: onLayout = null, keyboardResizeBy: keyboardResizeBy = null, storage: storage = $3daa5d4c086ea816$var$defaultStorage, style: styleFromProps, tagName: Type = "div", ...rest }) {
966
+ const groupId = (0, $e504a2438473eda9$export$2e2bcd8739ae039)(idFromProps);
967
+ const [dragState, setDragState] = (0, $ef07efbe5fa7d87e$export$60241385465d0a34)(null);
968
+ const [layout, setLayout] = (0, $ef07efbe5fa7d87e$export$60241385465d0a34)([]);
969
+ const panelIdToLastNotifiedSizeMapRef = (0, $ef07efbe5fa7d87e$export$b8f5890fc79d6aca)({});
970
+ const panelSizeBeforeCollapseRef = (0, $ef07efbe5fa7d87e$export$b8f5890fc79d6aca)(new Map());
971
+ const prevDeltaRef = (0, $ef07efbe5fa7d87e$export$b8f5890fc79d6aca)(0);
972
+ const committedValuesRef = (0, $ef07efbe5fa7d87e$export$b8f5890fc79d6aca)({
973
+ autoSaveId: autoSaveId,
974
+ direction: direction,
975
+ dragState: dragState,
1389
976
  id: groupId,
1390
- keyboardResizeBy,
1391
- onLayout
1392
- } = committedValuesRef.current;
1393
- const {
1394
- layout: prevLayout,
1395
- panelDataArray
1396
- } = eagerValuesRef.current;
1397
- const {
1398
- initialLayout
1399
- } = dragState !== null && dragState !== void 0 ? dragState : {};
1400
- const pivotIndices = determinePivotIndices(groupId, dragHandleId);
1401
- let delta = calculateDeltaPercentage(event, dragHandleId, direction, dragState, keyboardResizeBy);
1402
- if (delta === 0) {
1403
- return;
1404
- }
1405
-
1406
- // Support RTL layouts
1407
- const isHorizontal = direction === "horizontal";
1408
- if (document.dir === "rtl" && isHorizontal) {
1409
- delta = -delta;
1410
- }
1411
- const panelConstraints = panelDataArray.map(panelData => panelData.constraints);
1412
- const nextLayout = adjustLayoutByDelta({
1413
- delta,
1414
- layout: initialLayout !== null && initialLayout !== void 0 ? initialLayout : prevLayout,
1415
- panelConstraints,
1416
- pivotIndices,
1417
- trigger: isKeyDown(event) ? "keyboard" : "mouse-or-touch"
1418
- });
1419
- const layoutChanged = !compareLayouts(prevLayout, nextLayout);
1420
-
1421
- // Only update the cursor for layout changes triggered by touch/mouse events (not keyboard)
1422
- // Update the cursor even if the layout hasn't changed (we may need to show an invalid cursor state)
1423
- if (isMouseEvent(event) || isTouchEvent(event)) {
1424
- // Watch for multiple subsequent deltas; this might occur for tiny cursor movements.
1425
- // In this case, Panel sizes might not change–
1426
- // but updating cursor in this scenario would cause a flicker.
1427
- if (prevDeltaRef.current != delta) {
1428
- prevDeltaRef.current = delta;
1429
- if (!layoutChanged) {
1430
- // If the pointer has moved too far to resize the panel any further,
1431
- // update the cursor style for a visual clue.
1432
- // This mimics VS Code behavior.
1433
-
1434
- if (isHorizontal) {
1435
- setGlobalCursorStyle(delta < 0 ? "horizontal-min" : "horizontal-max");
1436
- } else {
1437
- setGlobalCursorStyle(delta < 0 ? "vertical-min" : "vertical-max");
977
+ keyboardResizeBy: keyboardResizeBy,
978
+ onLayout: onLayout,
979
+ storage: storage
980
+ });
981
+ const eagerValuesRef = (0, $ef07efbe5fa7d87e$export$b8f5890fc79d6aca)({
982
+ layout: layout,
983
+ panelDataArray: []
984
+ });
985
+ const devWarningsRef = (0, $ef07efbe5fa7d87e$export$b8f5890fc79d6aca)({
986
+ didLogIdAndOrderWarning: false,
987
+ didLogPanelConstraintsWarning: false,
988
+ prevPanelIds: []
989
+ });
990
+ (0, $ef07efbe5fa7d87e$export$d5a552a76deda3c2)(forwardedRef, ()=>({
991
+ getId: ()=>committedValuesRef.current.id,
992
+ getLayout: ()=>{
993
+ const { layout: layout } = eagerValuesRef.current;
994
+ return layout;
995
+ },
996
+ setLayout: (unsafeLayout)=>{
997
+ const { onLayout: onLayout } = committedValuesRef.current;
998
+ const { layout: prevLayout, panelDataArray: panelDataArray } = eagerValuesRef.current;
999
+ const safeLayout = (0, $6f1a05873bb6ec6f$export$64432a52a1035c18)({
1000
+ layout: unsafeLayout,
1001
+ panelConstraints: panelDataArray.map((panelData)=>panelData.constraints)
1002
+ });
1003
+ if (!(0, $c892f0f705e6ded5$export$b141efd0b0fb9174)(prevLayout, safeLayout)) {
1004
+ setLayout(safeLayout);
1005
+ eagerValuesRef.current.layout = safeLayout;
1006
+ if (onLayout) onLayout(safeLayout);
1007
+ (0, $2743876c6469fb21$export$b8e48269e4faa934)(panelDataArray, safeLayout, panelIdToLastNotifiedSizeMapRef.current);
1008
+ }
1438
1009
  }
1439
- } else {
1440
- // Reset the cursor style to the the normal resize cursor.
1441
- setGlobalCursorStyle(isHorizontal ? "horizontal" : "vertical");
1442
- }
1010
+ }), []);
1011
+ (0, $3f95d3e171760903$export$2e2bcd8739ae039)(()=>{
1012
+ committedValuesRef.current.autoSaveId = autoSaveId;
1013
+ committedValuesRef.current.direction = direction;
1014
+ committedValuesRef.current.dragState = dragState;
1015
+ committedValuesRef.current.id = groupId;
1016
+ committedValuesRef.current.onLayout = onLayout;
1017
+ committedValuesRef.current.storage = storage;
1018
+ });
1019
+ (0, $20152a6c44989ce6$export$d9fcbe062527d159)({
1020
+ committedValuesRef: committedValuesRef,
1021
+ eagerValuesRef: eagerValuesRef,
1022
+ groupId: groupId,
1023
+ layout: layout,
1024
+ panelDataArray: eagerValuesRef.current.panelDataArray,
1025
+ setLayout: setLayout
1026
+ });
1027
+ (0, $ef07efbe5fa7d87e$export$6d9c69b0de29b591)(()=>{
1028
+ const { panelDataArray: panelDataArray } = eagerValuesRef.current;
1029
+ // If this panel has been configured to persist sizing information, save sizes to local storage.
1030
+ if (autoSaveId) {
1031
+ if (layout.length === 0 || layout.length !== panelDataArray.length) return;
1032
+ let debouncedSave = $3daa5d4c086ea816$var$debounceMap[autoSaveId];
1033
+ // Limit the frequency of localStorage updates.
1034
+ if (debouncedSave == null) {
1035
+ debouncedSave = (0, $f7d932e9304c1581$export$2e2bcd8739ae039)((0, $6889c3a3ed41cfd1$export$af183b313c61be4f), $3daa5d4c086ea816$var$LOCAL_STORAGE_DEBOUNCE_INTERVAL);
1036
+ $3daa5d4c086ea816$var$debounceMap[autoSaveId] = debouncedSave;
1037
+ }
1038
+ debouncedSave(autoSaveId, panelDataArray, layout, storage);
1443
1039
  }
1444
- }
1445
- if (layoutChanged) {
1446
- setLayout(nextLayout);
1447
- eagerValuesRef.current.layout = nextLayout;
1448
- if (onLayout) {
1449
- onLayout(nextLayout);
1040
+ }, [
1041
+ autoSaveId,
1042
+ layout,
1043
+ storage
1044
+ ]);
1045
+ // DEV warnings
1046
+ (0, $ef07efbe5fa7d87e$export$6d9c69b0de29b591)(()=>{
1047
+ if (0, $aedbef154d609804$export$df77466336fe5355) {
1048
+ const { panelDataArray: panelDataArray } = eagerValuesRef.current;
1049
+ const { didLogIdAndOrderWarning: didLogIdAndOrderWarning, didLogPanelConstraintsWarning: didLogPanelConstraintsWarning, prevPanelIds: prevPanelIds } = devWarningsRef.current;
1050
+ if (!didLogIdAndOrderWarning) {
1051
+ const panelIds = panelDataArray.map(({ id: id })=>id);
1052
+ devWarningsRef.current.prevPanelIds = panelIds;
1053
+ const panelsHaveChanged = prevPanelIds.length > 0 && !(0, $c892f0f705e6ded5$export$b141efd0b0fb9174)(prevPanelIds, panelIds);
1054
+ if (panelsHaveChanged) {
1055
+ if (panelDataArray.find(({ idIsFromProps: idIsFromProps, order: order })=>!idIsFromProps || order == null)) {
1056
+ devWarningsRef.current.didLogIdAndOrderWarning = true;
1057
+ console.warn(`WARNING: Panel id and order props recommended when panels are dynamically rendered`);
1058
+ }
1059
+ }
1060
+ }
1061
+ if (!didLogPanelConstraintsWarning) {
1062
+ const panelConstraints = panelDataArray.map((panelData)=>panelData.constraints);
1063
+ for(let panelIndex = 0; panelIndex < panelConstraints.length; panelIndex++){
1064
+ const panelData = panelDataArray[panelIndex];
1065
+ (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(panelData);
1066
+ const isValid = (0, $006440f9579d3b07$export$d00cfefa2c395b39)({
1067
+ panelConstraints: panelConstraints,
1068
+ panelId: panelData.id,
1069
+ panelIndex: panelIndex
1070
+ });
1071
+ if (!isValid) {
1072
+ devWarningsRef.current.didLogPanelConstraintsWarning = true;
1073
+ break;
1074
+ }
1075
+ }
1076
+ }
1450
1077
  }
1451
- callPanelCallbacks(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
1452
- }
1453
- };
1454
- }, []);
1455
-
1456
- // External APIs are safe to memoize via committed values ref
1457
- const resizePanel = useCallback((panelData, unsafePanelSize) => {
1458
- const {
1459
- onLayout
1460
- } = committedValuesRef.current;
1461
- const {
1462
- layout: prevLayout,
1463
- panelDataArray
1464
- } = eagerValuesRef.current;
1465
- const panelConstraintsArray = panelDataArray.map(panelData => panelData.constraints);
1466
- const {
1467
- panelSize,
1468
- pivotIndices
1469
- } = panelDataHelper(panelDataArray, panelData, prevLayout);
1470
- assert(panelSize != null);
1471
- const isLastPanel = panelDataArray.indexOf(panelData) === panelDataArray.length - 1;
1472
- const delta = isLastPanel ? panelSize - unsafePanelSize : unsafePanelSize - panelSize;
1473
- const nextLayout = adjustLayoutByDelta({
1474
- delta,
1475
- layout: prevLayout,
1476
- panelConstraints: panelConstraintsArray,
1477
- pivotIndices,
1478
- trigger: "imperative-api"
1479
- });
1480
- if (!compareLayouts(prevLayout, nextLayout)) {
1481
- setLayout(nextLayout);
1482
- eagerValuesRef.current.layout = nextLayout;
1483
- if (onLayout) {
1484
- onLayout(nextLayout);
1485
- }
1486
- callPanelCallbacks(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
1487
- }
1488
- }, []);
1489
- const startDragging = useCallback((dragHandleId, event) => {
1490
- const {
1491
- direction
1492
- } = committedValuesRef.current;
1493
- const {
1494
- layout
1495
- } = eagerValuesRef.current;
1496
- const handleElement = getResizeHandleElement(dragHandleId);
1497
- assert(handleElement);
1498
- const initialCursorPosition = getResizeEventCursorPosition(direction, event);
1499
- setDragState({
1500
- dragHandleId,
1501
- dragHandleRect: handleElement.getBoundingClientRect(),
1502
- initialCursorPosition,
1503
- initialLayout: layout
1504
1078
  });
1505
- }, []);
1506
- const stopDragging = useCallback(() => {
1507
- resetGlobalCursorStyle();
1508
- setDragState(null);
1509
- }, []);
1510
- const unregisterPanelRef = useRef({
1511
- pendingPanelIds: new Set(),
1512
- timeout: null
1513
- });
1514
- const unregisterPanel = useCallback(panelData => {
1515
- const {
1516
- onLayout
1517
- } = committedValuesRef.current;
1518
- const {
1519
- layout: prevLayout,
1520
- panelDataArray
1521
- } = eagerValuesRef.current;
1522
- const index = panelDataArray.indexOf(panelData);
1523
- if (index >= 0) {
1524
- panelDataArray.splice(index, 1);
1525
- unregisterPanelRef.current.pendingPanelIds.add(panelData.id);
1526
- }
1527
- if (unregisterPanelRef.current.timeout != null) {
1528
- clearTimeout(unregisterPanelRef.current.timeout);
1529
- }
1530
-
1531
- // Batch panel unmounts so that we only calculate layout once;
1532
- // This is more efficient and avoids misleading warnings in development mode.
1533
- // We can't check the DOM to detect this because Panel elements have not yet been removed.
1534
- unregisterPanelRef.current.timeout = setTimeout(() => {
1535
- const {
1536
- pendingPanelIds
1537
- } = unregisterPanelRef.current;
1538
- const map = panelIdToLastNotifiedSizeMapRef.current;
1539
-
1540
- // TRICKY
1541
- // Strict effects mode
1542
- let unmountDueToStrictMode = false;
1543
- pendingPanelIds.forEach(panelId => {
1544
- pendingPanelIds.delete(panelId);
1545
- if (panelDataArray.find(({
1546
- id
1547
- }) => id === panelId) == null) {
1548
- unmountDueToStrictMode = true;
1549
-
1550
- // TRICKY
1551
- // When a panel is removed from the group, we should delete the most recent prev-size entry for it.
1552
- // If we don't do this, then a conditionally rendered panel might not call onResize when it's re-mounted.
1553
- // Strict effects mode makes this tricky though because all panels will be registered, unregistered, then re-registered on mount.
1554
- delete map[panelData.id];
1079
+ // External APIs are safe to memoize via committed values ref
1080
+ const collapsePanel = (0, $ef07efbe5fa7d87e$export$35808ee640e87ca7)((panelData)=>{
1081
+ const { onLayout: onLayout } = committedValuesRef.current;
1082
+ const { layout: prevLayout, panelDataArray: panelDataArray } = eagerValuesRef.current;
1083
+ if (panelData.constraints.collapsible) {
1084
+ const panelConstraintsArray = panelDataArray.map((panelData)=>panelData.constraints);
1085
+ const { collapsedSize: collapsedSize = 0, panelSize: panelSize, pivotIndices: pivotIndices } = $3daa5d4c086ea816$var$panelDataHelper(panelDataArray, panelData, prevLayout);
1086
+ (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(panelSize != null);
1087
+ if (panelSize !== collapsedSize) {
1088
+ // Store size before collapse;
1089
+ // This is the size that gets restored if the expand() API is used.
1090
+ panelSizeBeforeCollapseRef.current.set(panelData.id, panelSize);
1091
+ const isLastPanel = $3daa5d4c086ea816$var$findPanelDataIndex(panelDataArray, panelData) === panelDataArray.length - 1;
1092
+ const delta = isLastPanel ? panelSize - collapsedSize : collapsedSize - panelSize;
1093
+ const nextLayout = (0, $fe96098ae4f2a44d$export$7fead5cc734d205b)({
1094
+ delta: delta,
1095
+ layout: prevLayout,
1096
+ panelConstraints: panelConstraintsArray,
1097
+ pivotIndices: pivotIndices,
1098
+ trigger: "imperative-api"
1099
+ });
1100
+ if (!(0, $81d2449822663a2a$export$a10903e2e57656c1)(prevLayout, nextLayout)) {
1101
+ setLayout(nextLayout);
1102
+ eagerValuesRef.current.layout = nextLayout;
1103
+ if (onLayout) onLayout(nextLayout);
1104
+ (0, $2743876c6469fb21$export$b8e48269e4faa934)(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
1105
+ }
1106
+ }
1555
1107
  }
1556
- });
1557
- if (!unmountDueToStrictMode) {
1558
- return;
1559
- }
1560
- if (panelDataArray.length === 0) {
1561
- // The group is unmounting; skip layout calculation.
1562
- return;
1563
- }
1564
- let unsafeLayout = calculateUnsafeDefaultLayout({
1565
- panelDataArray
1566
- });
1567
-
1568
- // Validate even saved layouts in case something has changed since last render
1569
- // e.g. for pixel groups, this could be the size of the window
1570
- const nextLayout = validatePanelGroupLayout({
1571
- layout: unsafeLayout,
1572
- panelConstraints: panelDataArray.map(panelData => panelData.constraints)
1573
- });
1574
- if (!areEqual(prevLayout, nextLayout)) {
1108
+ }, []);
1109
+ // External APIs are safe to memoize via committed values ref
1110
+ const expandPanel = (0, $ef07efbe5fa7d87e$export$35808ee640e87ca7)((panelData)=>{
1111
+ const { onLayout: onLayout } = committedValuesRef.current;
1112
+ const { layout: prevLayout, panelDataArray: panelDataArray } = eagerValuesRef.current;
1113
+ if (panelData.constraints.collapsible) {
1114
+ const panelConstraintsArray = panelDataArray.map((panelData)=>panelData.constraints);
1115
+ const { collapsedSize: collapsedSize = 0, panelSize: panelSize, minSize: minSize = 0, pivotIndices: pivotIndices } = $3daa5d4c086ea816$var$panelDataHelper(panelDataArray, panelData, prevLayout);
1116
+ if (panelSize === collapsedSize) {
1117
+ // Restore this panel to the size it was before it was collapsed, if possible.
1118
+ const prevPanelSize = panelSizeBeforeCollapseRef.current.get(panelData.id);
1119
+ const baseSize = prevPanelSize != null && prevPanelSize >= minSize ? prevPanelSize : minSize;
1120
+ const isLastPanel = $3daa5d4c086ea816$var$findPanelDataIndex(panelDataArray, panelData) === panelDataArray.length - 1;
1121
+ const delta = isLastPanel ? panelSize - baseSize : baseSize - panelSize;
1122
+ const nextLayout = (0, $fe96098ae4f2a44d$export$7fead5cc734d205b)({
1123
+ delta: delta,
1124
+ layout: prevLayout,
1125
+ panelConstraints: panelConstraintsArray,
1126
+ pivotIndices: pivotIndices,
1127
+ trigger: "imperative-api"
1128
+ });
1129
+ if (!(0, $81d2449822663a2a$export$a10903e2e57656c1)(prevLayout, nextLayout)) {
1130
+ setLayout(nextLayout);
1131
+ eagerValuesRef.current.layout = nextLayout;
1132
+ if (onLayout) onLayout(nextLayout);
1133
+ (0, $2743876c6469fb21$export$b8e48269e4faa934)(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
1134
+ }
1135
+ }
1136
+ }
1137
+ }, []);
1138
+ // External APIs are safe to memoize via committed values ref
1139
+ const getPanelSize = (0, $ef07efbe5fa7d87e$export$35808ee640e87ca7)((panelData)=>{
1140
+ const { layout: layout, panelDataArray: panelDataArray } = eagerValuesRef.current;
1141
+ const { panelSize: panelSize } = $3daa5d4c086ea816$var$panelDataHelper(panelDataArray, panelData, layout);
1142
+ (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(panelSize != null);
1143
+ return panelSize;
1144
+ }, []);
1145
+ // This API should never read from committedValuesRef
1146
+ const getPanelStyle = (0, $ef07efbe5fa7d87e$export$35808ee640e87ca7)((panelData)=>{
1147
+ const { panelDataArray: panelDataArray } = eagerValuesRef.current;
1148
+ const panelIndex = $3daa5d4c086ea816$var$findPanelDataIndex(panelDataArray, panelData);
1149
+ return (0, $d4957558c333bad2$export$fc25f3248e61edf5)({
1150
+ dragState: dragState,
1151
+ layout: layout,
1152
+ panelData: panelDataArray,
1153
+ panelIndex: panelIndex
1154
+ });
1155
+ }, [
1156
+ dragState,
1157
+ layout
1158
+ ]);
1159
+ // External APIs are safe to memoize via committed values ref
1160
+ const isPanelCollapsed = (0, $ef07efbe5fa7d87e$export$35808ee640e87ca7)((panelData)=>{
1161
+ const { layout: layout, panelDataArray: panelDataArray } = eagerValuesRef.current;
1162
+ const { collapsedSize: collapsedSize, collapsible: collapsible, panelSize: panelSize } = $3daa5d4c086ea816$var$panelDataHelper(panelDataArray, panelData, layout);
1163
+ return collapsible === true && panelSize === collapsedSize;
1164
+ }, []);
1165
+ // External APIs are safe to memoize via committed values ref
1166
+ const isPanelExpanded = (0, $ef07efbe5fa7d87e$export$35808ee640e87ca7)((panelData)=>{
1167
+ const { layout: layout, panelDataArray: panelDataArray } = eagerValuesRef.current;
1168
+ const { collapsedSize: collapsedSize = 0, collapsible: collapsible, panelSize: panelSize } = $3daa5d4c086ea816$var$panelDataHelper(panelDataArray, panelData, layout);
1169
+ (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(panelSize != null);
1170
+ return !collapsible || panelSize > collapsedSize;
1171
+ }, []);
1172
+ const registerPanel = (0, $ef07efbe5fa7d87e$export$35808ee640e87ca7)((panelData)=>{
1173
+ const { autoSaveId: autoSaveId, id: groupId, onLayout: onLayout, storage: storage } = committedValuesRef.current;
1174
+ const { layout: prevLayout, panelDataArray: panelDataArray } = eagerValuesRef.current;
1175
+ // HACK
1176
+ // This appears to be triggered by some React Suspense+Offscreen+StrictMode bug;
1177
+ // see app.replay.io/recording/17b6e11d-4500-4173-b23d-61dfd141fed1
1178
+ const index = $3daa5d4c086ea816$var$findPanelDataIndex(panelDataArray, panelData);
1179
+ if (index >= 0) {
1180
+ if (panelData.idIsFromProps) console.warn(`Panel with id "${panelData.id}" registered twice`);
1181
+ else console.warn(`Panel registered twice`);
1182
+ return;
1183
+ }
1184
+ panelDataArray.push(panelData);
1185
+ panelDataArray.sort((panelA, panelB)=>{
1186
+ const orderA = panelA.order;
1187
+ const orderB = panelB.order;
1188
+ if (orderA == null && orderB == null) return 0;
1189
+ else if (orderA == null) return -1;
1190
+ else if (orderB == null) return 1;
1191
+ else return orderA - orderB;
1192
+ });
1193
+ // Wait until all panels have registered before we try to compute layout;
1194
+ // doing it earlier is both wasteful and may trigger misleading warnings in development mode.
1195
+ const panelElements = (0, $8b4e4613c531093d$export$80bbb698e7429afe)(groupId);
1196
+ if (panelElements.length !== panelDataArray.length) return;
1197
+ // If this panel has been configured to persist sizing information,
1198
+ // default size should be restored from local storage if possible.
1199
+ let unsafeLayout = null;
1200
+ if (autoSaveId) unsafeLayout = (0, $6889c3a3ed41cfd1$export$9c80c6617f0386da)(autoSaveId, panelDataArray, storage);
1201
+ if (unsafeLayout == null) unsafeLayout = (0, $457c46ca858cf2c6$export$47337a21c443778e)({
1202
+ panelDataArray: panelDataArray
1203
+ });
1204
+ // Validate even saved layouts in case something has changed since last render
1205
+ // e.g. for pixel groups, this could be the size of the window
1206
+ const nextLayout = (0, $6f1a05873bb6ec6f$export$64432a52a1035c18)({
1207
+ layout: unsafeLayout,
1208
+ panelConstraints: panelDataArray.map((panelData)=>panelData.constraints)
1209
+ });
1210
+ // Offscreen mode makes this a bit weird;
1211
+ // Panels unregister when hidden and re-register when shown again,
1212
+ // but the overall layout doesn't change between these two cases.
1575
1213
  setLayout(nextLayout);
1576
1214
  eagerValuesRef.current.layout = nextLayout;
1577
- if (onLayout) {
1578
- onLayout(nextLayout);
1215
+ if (!(0, $c892f0f705e6ded5$export$b141efd0b0fb9174)(prevLayout, nextLayout)) {
1216
+ if (onLayout) onLayout(nextLayout);
1217
+ (0, $2743876c6469fb21$export$b8e48269e4faa934)(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
1579
1218
  }
1580
- callPanelCallbacks(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
1581
- }
1582
- }, 0);
1583
- }, []);
1584
- const context = useMemo(() => ({
1585
- collapsePanel,
1586
- direction,
1587
- dragState,
1588
- expandPanel,
1589
- getPanelSize,
1590
- getPanelStyle,
1591
- groupId,
1592
- isPanelCollapsed,
1593
- isPanelExpanded,
1594
- registerPanel,
1595
- registerResizeHandle,
1596
- resizePanel,
1597
- startDragging,
1598
- stopDragging,
1599
- unregisterPanel
1600
- }), [collapsePanel, dragState, direction, expandPanel, getPanelSize, getPanelStyle, groupId, isPanelCollapsed, isPanelExpanded, registerPanel, registerResizeHandle, resizePanel, startDragging, stopDragging, unregisterPanel]);
1601
- const style = {
1602
- display: "flex",
1603
- flexDirection: direction === "horizontal" ? "row" : "column",
1604
- height: "100%",
1605
- overflow: "hidden",
1606
- width: "100%"
1607
- };
1608
- return createElement(PanelGroupContext.Provider, {
1609
- value: context
1610
- }, createElement(Type, {
1611
- ...rest,
1612
- children,
1613
- className: classNameFromProps,
1614
- style: {
1615
- ...style,
1616
- ...styleFromProps
1617
- },
1618
- // CSS selectors
1619
- "data-panel-group": "",
1620
- "data-panel-group-direction": direction,
1621
- "data-panel-group-id": groupId
1622
- }));
1219
+ }, []);
1220
+ const registerResizeHandle = (0, $ef07efbe5fa7d87e$export$35808ee640e87ca7)((dragHandleId)=>{
1221
+ return function resizeHandler(event) {
1222
+ event.preventDefault();
1223
+ const { direction: direction, dragState: dragState, id: groupId, keyboardResizeBy: keyboardResizeBy, onLayout: onLayout } = committedValuesRef.current;
1224
+ const { layout: prevLayout, panelDataArray: panelDataArray } = eagerValuesRef.current;
1225
+ const { initialLayout: initialLayout } = dragState !== null && dragState !== void 0 ? dragState : {};
1226
+ const pivotIndices = (0, $0a239c1e1cd1e940$export$cf92598869f99b8f)(groupId, dragHandleId);
1227
+ let delta = (0, $c845d5a27273095d$export$b08134b65f9db46a)(event, dragHandleId, direction, dragState, keyboardResizeBy);
1228
+ if (delta === 0) return;
1229
+ // Support RTL layouts
1230
+ const isHorizontal = direction === "horizontal";
1231
+ if (document.dir === "rtl" && isHorizontal) delta = -delta;
1232
+ const panelConstraints = panelDataArray.map((panelData)=>panelData.constraints);
1233
+ const nextLayout = (0, $fe96098ae4f2a44d$export$7fead5cc734d205b)({
1234
+ delta: delta,
1235
+ layout: initialLayout !== null && initialLayout !== void 0 ? initialLayout : prevLayout,
1236
+ panelConstraints: panelConstraints,
1237
+ pivotIndices: pivotIndices,
1238
+ trigger: (0, $5bf95d6f4b7f490d$export$e7bf60a870f429b0)(event) ? "keyboard" : "mouse-or-touch"
1239
+ });
1240
+ const layoutChanged = !(0, $81d2449822663a2a$export$a10903e2e57656c1)(prevLayout, nextLayout);
1241
+ // Only update the cursor for layout changes triggered by touch/mouse events (not keyboard)
1242
+ // Update the cursor even if the layout hasn't changed (we may need to show an invalid cursor state)
1243
+ if ((0, $5bf95d6f4b7f490d$export$764db16956f554f8)(event) || (0, $5bf95d6f4b7f490d$export$c4dfce035d43d1e0)(event)) // Watch for multiple subsequent deltas; this might occur for tiny cursor movements.
1244
+ // In this case, Panel sizes might not change–
1245
+ // but updating cursor in this scenario would cause a flicker.
1246
+ {
1247
+ if (prevDeltaRef.current != delta) {
1248
+ prevDeltaRef.current = delta;
1249
+ if (!layoutChanged) {
1250
+ // If the pointer has moved too far to resize the panel any further,
1251
+ // update the cursor style for a visual clue.
1252
+ // This mimics VS Code behavior.
1253
+ if (isHorizontal) (0, $8d9d88bebf1a8ace$export$d395b5dfd066a659)(delta < 0 ? "horizontal-min" : "horizontal-max");
1254
+ else (0, $8d9d88bebf1a8ace$export$d395b5dfd066a659)(delta < 0 ? "vertical-min" : "vertical-max");
1255
+ } else // Reset the cursor style to the the normal resize cursor.
1256
+ (0, $8d9d88bebf1a8ace$export$d395b5dfd066a659)(isHorizontal ? "horizontal" : "vertical");
1257
+ }
1258
+ }
1259
+ if (layoutChanged) {
1260
+ setLayout(nextLayout);
1261
+ eagerValuesRef.current.layout = nextLayout;
1262
+ if (onLayout) onLayout(nextLayout);
1263
+ (0, $2743876c6469fb21$export$b8e48269e4faa934)(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
1264
+ }
1265
+ };
1266
+ }, []);
1267
+ // External APIs are safe to memoize via committed values ref
1268
+ const resizePanel = (0, $ef07efbe5fa7d87e$export$35808ee640e87ca7)((panelData, unsafePanelSize)=>{
1269
+ const { onLayout: onLayout } = committedValuesRef.current;
1270
+ const { layout: prevLayout, panelDataArray: panelDataArray } = eagerValuesRef.current;
1271
+ const panelConstraintsArray = panelDataArray.map((panelData)=>panelData.constraints);
1272
+ const { panelSize: panelSize, pivotIndices: pivotIndices } = $3daa5d4c086ea816$var$panelDataHelper(panelDataArray, panelData, prevLayout);
1273
+ (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(panelSize != null);
1274
+ const isLastPanel = $3daa5d4c086ea816$var$findPanelDataIndex(panelDataArray, panelData) === panelDataArray.length - 1;
1275
+ const delta = isLastPanel ? panelSize - unsafePanelSize : unsafePanelSize - panelSize;
1276
+ const nextLayout = (0, $fe96098ae4f2a44d$export$7fead5cc734d205b)({
1277
+ delta: delta,
1278
+ layout: prevLayout,
1279
+ panelConstraints: panelConstraintsArray,
1280
+ pivotIndices: pivotIndices,
1281
+ trigger: "imperative-api"
1282
+ });
1283
+ if (!(0, $81d2449822663a2a$export$a10903e2e57656c1)(prevLayout, nextLayout)) {
1284
+ setLayout(nextLayout);
1285
+ eagerValuesRef.current.layout = nextLayout;
1286
+ if (onLayout) onLayout(nextLayout);
1287
+ (0, $2743876c6469fb21$export$b8e48269e4faa934)(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
1288
+ }
1289
+ }, []);
1290
+ const startDragging = (0, $ef07efbe5fa7d87e$export$35808ee640e87ca7)((dragHandleId, event)=>{
1291
+ const { direction: direction } = committedValuesRef.current;
1292
+ const { layout: layout } = eagerValuesRef.current;
1293
+ const handleElement = (0, $99b0d18e36332b26$export$4c5229c874a62620)(dragHandleId);
1294
+ (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(handleElement);
1295
+ const initialCursorPosition = (0, $a568cbd9a3e686f5$export$ae0c59ca751ba81d)(direction, event);
1296
+ setDragState({
1297
+ dragHandleId: dragHandleId,
1298
+ dragHandleRect: handleElement.getBoundingClientRect(),
1299
+ initialCursorPosition: initialCursorPosition,
1300
+ initialLayout: layout
1301
+ });
1302
+ }, []);
1303
+ const stopDragging = (0, $ef07efbe5fa7d87e$export$35808ee640e87ca7)(()=>{
1304
+ (0, $8d9d88bebf1a8ace$export$b61932ee18f96e08)();
1305
+ setDragState(null);
1306
+ }, []);
1307
+ const unregisterPanelRef = (0, $ef07efbe5fa7d87e$export$b8f5890fc79d6aca)({
1308
+ pendingPanelIds: new Set(),
1309
+ timeout: null
1310
+ });
1311
+ const unregisterPanel = (0, $ef07efbe5fa7d87e$export$35808ee640e87ca7)((panelData)=>{
1312
+ const { onLayout: onLayout } = committedValuesRef.current;
1313
+ const { layout: prevLayout, panelDataArray: panelDataArray } = eagerValuesRef.current;
1314
+ const index = $3daa5d4c086ea816$var$findPanelDataIndex(panelDataArray, panelData);
1315
+ if (index >= 0) {
1316
+ panelDataArray.splice(index, 1);
1317
+ unregisterPanelRef.current.pendingPanelIds.add(panelData.id);
1318
+ }
1319
+ if (unregisterPanelRef.current.timeout != null) clearTimeout(unregisterPanelRef.current.timeout);
1320
+ // Batch panel unmounts so that we only calculate layout once;
1321
+ // This is more efficient and avoids misleading warnings in development mode.
1322
+ // We can't check the DOM to detect this because Panel elements have not yet been removed.
1323
+ unregisterPanelRef.current.timeout = setTimeout(()=>{
1324
+ const { pendingPanelIds: pendingPanelIds } = unregisterPanelRef.current;
1325
+ const panelIdToLastNotifiedSizeMap = panelIdToLastNotifiedSizeMapRef.current;
1326
+ // TRICKY
1327
+ // Strict effects mode
1328
+ let unmountDueToStrictMode = false;
1329
+ pendingPanelIds.forEach((panelId)=>{
1330
+ pendingPanelIds.delete(panelId);
1331
+ if (panelDataArray.find(({ id: id })=>id === panelId) != null) unmountDueToStrictMode = true;
1332
+ else // TRICKY
1333
+ // When a panel is removed from the group, we should delete the most recent prev-size entry for it.
1334
+ // If we don't do this, then a conditionally rendered panel might not call onResize when it's re-mounted.
1335
+ // Strict effects mode makes this tricky though because all panels will be registered, unregistered, then re-registered on mount.
1336
+ delete panelIdToLastNotifiedSizeMap[panelId];
1337
+ });
1338
+ if (unmountDueToStrictMode) return;
1339
+ if (panelDataArray.length === 0) // The group is unmounting; skip layout calculation.
1340
+ return;
1341
+ let unsafeLayout = (0, $457c46ca858cf2c6$export$47337a21c443778e)({
1342
+ panelDataArray: panelDataArray
1343
+ });
1344
+ // Validate even saved layouts in case something has changed since last render
1345
+ // e.g. for pixel groups, this could be the size of the window
1346
+ const nextLayout = (0, $6f1a05873bb6ec6f$export$64432a52a1035c18)({
1347
+ layout: unsafeLayout,
1348
+ panelConstraints: panelDataArray.map((panelData)=>panelData.constraints)
1349
+ });
1350
+ if (!(0, $c892f0f705e6ded5$export$b141efd0b0fb9174)(prevLayout, nextLayout)) {
1351
+ setLayout(nextLayout);
1352
+ eagerValuesRef.current.layout = nextLayout;
1353
+ if (onLayout) onLayout(nextLayout);
1354
+ (0, $2743876c6469fb21$export$b8e48269e4faa934)(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
1355
+ }
1356
+ }, 0);
1357
+ }, []);
1358
+ const context = (0, $ef07efbe5fa7d87e$export$1538c33de8887b59)(()=>({
1359
+ collapsePanel: collapsePanel,
1360
+ direction: direction,
1361
+ dragState: dragState,
1362
+ expandPanel: expandPanel,
1363
+ getPanelSize: getPanelSize,
1364
+ getPanelStyle: getPanelStyle,
1365
+ groupId: groupId,
1366
+ isPanelCollapsed: isPanelCollapsed,
1367
+ isPanelExpanded: isPanelExpanded,
1368
+ registerPanel: registerPanel,
1369
+ registerResizeHandle: registerResizeHandle,
1370
+ resizePanel: resizePanel,
1371
+ startDragging: startDragging,
1372
+ stopDragging: stopDragging,
1373
+ unregisterPanel: unregisterPanel
1374
+ }), [
1375
+ collapsePanel,
1376
+ dragState,
1377
+ direction,
1378
+ expandPanel,
1379
+ getPanelSize,
1380
+ getPanelStyle,
1381
+ groupId,
1382
+ isPanelCollapsed,
1383
+ isPanelExpanded,
1384
+ registerPanel,
1385
+ registerResizeHandle,
1386
+ resizePanel,
1387
+ startDragging,
1388
+ stopDragging,
1389
+ unregisterPanel
1390
+ ]);
1391
+ const style = {
1392
+ display: "flex",
1393
+ flexDirection: direction === "horizontal" ? "row" : "column",
1394
+ height: "100%",
1395
+ overflow: "hidden",
1396
+ width: "100%"
1397
+ };
1398
+ return (0, $ef07efbe5fa7d87e$export$c8a8987d4410bf2d)((0, $e30963544e64b604$export$7d8c6d083caec74a).Provider, {
1399
+ value: context
1400
+ }, (0, $ef07efbe5fa7d87e$export$c8a8987d4410bf2d)(Type, {
1401
+ ...rest,
1402
+ children: children,
1403
+ className: classNameFromProps,
1404
+ style: {
1405
+ ...style,
1406
+ ...styleFromProps
1407
+ },
1408
+ // CSS selectors
1409
+ "data-panel-group": "",
1410
+ "data-panel-group-direction": direction,
1411
+ "data-panel-group-id": groupId
1412
+ }));
1623
1413
  }
1624
- const PanelGroup = forwardRef((props, ref) => createElement(PanelGroupWithForwardedRef, {
1625
- ...props,
1626
- forwardedRef: ref
1627
- }));
1628
- PanelGroupWithForwardedRef.displayName = "PanelGroup";
1629
- PanelGroup.displayName = "forwardRef(PanelGroup)";
1630
- function panelDataHelper(panelDataArray, panelData, layout) {
1631
- const panelConstraintsArray = panelDataArray.map(panelData => panelData.constraints);
1632
- const panelIndex = panelDataArray.indexOf(panelData);
1633
- const panelConstraints = panelConstraintsArray[panelIndex];
1634
- const isLastPanel = panelIndex === panelDataArray.length - 1;
1635
- const pivotIndices = isLastPanel ? [panelIndex - 1, panelIndex] : [panelIndex, panelIndex + 1];
1636
- const panelSize = layout[panelIndex];
1637
- return {
1638
- ...panelConstraints,
1639
- panelSize,
1640
- pivotIndices
1641
- };
1414
+ const $3daa5d4c086ea816$export$1d05749f6f573bb = (0, $ef07efbe5fa7d87e$export$257a8862b851cb5b)((props, ref)=>(0, $ef07efbe5fa7d87e$export$c8a8987d4410bf2d)($3daa5d4c086ea816$var$PanelGroupWithForwardedRef, {
1415
+ ...props,
1416
+ forwardedRef: ref
1417
+ }));
1418
+ $3daa5d4c086ea816$var$PanelGroupWithForwardedRef.displayName = "PanelGroup";
1419
+ $3daa5d4c086ea816$export$1d05749f6f573bb.displayName = "forwardRef(PanelGroup)";
1420
+ function $3daa5d4c086ea816$var$findPanelDataIndex(panelDataArray, panelData) {
1421
+ return panelDataArray.findIndex((prevPanelData)=>prevPanelData === panelData || prevPanelData.id === panelData.id);
1422
+ }
1423
+ function $3daa5d4c086ea816$var$panelDataHelper(panelDataArray, panelData, layout) {
1424
+ const panelConstraintsArray = panelDataArray.map((panelData)=>panelData.constraints);
1425
+ const panelIndex = $3daa5d4c086ea816$var$findPanelDataIndex(panelDataArray, panelData);
1426
+ const panelConstraints = panelConstraintsArray[panelIndex];
1427
+ const isLastPanel = panelIndex === panelDataArray.length - 1;
1428
+ const pivotIndices = isLastPanel ? [
1429
+ panelIndex - 1,
1430
+ panelIndex
1431
+ ] : [
1432
+ panelIndex,
1433
+ panelIndex + 1
1434
+ ];
1435
+ const panelSize = layout[panelIndex];
1436
+ return {
1437
+ ...panelConstraints,
1438
+ panelSize: panelSize,
1439
+ pivotIndices: pivotIndices
1440
+ };
1642
1441
  }
1643
1442
 
1644
- // https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/
1645
1443
 
1646
- function useWindowSplitterResizeHandlerBehavior({
1647
- disabled,
1648
- handleId,
1649
- resizeHandler
1650
- }) {
1651
- useEffect(() => {
1652
- if (disabled || resizeHandler == null) {
1653
- return;
1654
- }
1655
- const handleElement = getResizeHandleElement(handleId);
1656
- if (handleElement == null) {
1657
- return;
1658
- }
1659
- const onKeyDown = event => {
1660
- if (event.defaultPrevented) {
1661
- return;
1662
- }
1663
- switch (event.key) {
1664
- case "ArrowDown":
1665
- case "ArrowLeft":
1666
- case "ArrowRight":
1667
- case "ArrowUp":
1668
- case "End":
1669
- case "Home":
1670
- {
1671
- event.preventDefault();
1672
- resizeHandler(event);
1673
- break;
1674
- }
1675
- case "F6":
1676
- {
1677
- event.preventDefault();
1678
- const groupId = handleElement.getAttribute("data-panel-group-id");
1679
- assert(groupId);
1680
- const handles = getResizeHandleElementsForGroup(groupId);
1681
- const index = getResizeHandleElementIndex(groupId, handleId);
1682
- assert(index !== null);
1683
- const nextIndex = event.shiftKey ? index > 0 ? index - 1 : handles.length - 1 : index + 1 < handles.length ? index + 1 : 0;
1684
- const nextHandle = handles[nextIndex];
1685
- nextHandle.focus();
1686
- break;
1687
- }
1688
- }
1689
- };
1690
- handleElement.addEventListener("keydown", onKeyDown);
1691
- return () => {
1692
- handleElement.removeEventListener("keydown", onKeyDown);
1693
- };
1694
- }, [disabled, handleId, resizeHandler]);
1444
+
1445
+
1446
+
1447
+
1448
+
1449
+
1450
+
1451
+ function $4a90471e7083b52f$export$33b0bea6ac3ffb03({ disabled: disabled, handleId: handleId, resizeHandler: resizeHandler }) {
1452
+ (0, $ef07efbe5fa7d87e$export$6d9c69b0de29b591)(()=>{
1453
+ if (disabled || resizeHandler == null) return;
1454
+ const handleElement = (0, $99b0d18e36332b26$export$4c5229c874a62620)(handleId);
1455
+ if (handleElement == null) return;
1456
+ const onKeyDown = (event)=>{
1457
+ if (event.defaultPrevented) return;
1458
+ switch(event.key){
1459
+ case "ArrowDown":
1460
+ case "ArrowLeft":
1461
+ case "ArrowRight":
1462
+ case "ArrowUp":
1463
+ case "End":
1464
+ case "Home":
1465
+ event.preventDefault();
1466
+ resizeHandler(event);
1467
+ break;
1468
+ case "F6":
1469
+ {
1470
+ event.preventDefault();
1471
+ const groupId = handleElement.getAttribute("data-panel-group-id");
1472
+ (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(groupId);
1473
+ const handles = (0, $9196ba7c0d09e3f3$export$63eb605e437b214f)(groupId);
1474
+ const index = (0, $a144d12e0d2017d1$export$4c92fedbbc2381ca)(groupId, handleId);
1475
+ (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(index !== null);
1476
+ const nextIndex = event.shiftKey ? index > 0 ? index - 1 : handles.length - 1 : index + 1 < handles.length ? index + 1 : 0;
1477
+ const nextHandle = handles[nextIndex];
1478
+ nextHandle.focus();
1479
+ break;
1480
+ }
1481
+ }
1482
+ };
1483
+ handleElement.addEventListener("keydown", onKeyDown);
1484
+ return ()=>{
1485
+ handleElement.removeEventListener("keydown", onKeyDown);
1486
+ };
1487
+ }, [
1488
+ disabled,
1489
+ handleId,
1490
+ resizeHandler
1491
+ ]);
1695
1492
  }
1696
1493
 
1697
- function PanelResizeHandle({
1698
- children = null,
1699
- className: classNameFromProps = "",
1700
- disabled = false,
1701
- id: idFromProps,
1702
- onDragging,
1703
- style: styleFromProps = {},
1704
- tabIndex = 0,
1705
- tagName: Type = "div",
1706
- ...rest
1707
- }) {
1708
- const divElementRef = useRef(null);
1709
-
1710
- // Use a ref to guard against users passing inline props
1711
- const callbacksRef = useRef({
1712
- onDragging
1713
- });
1714
- useEffect(() => {
1715
- callbacksRef.current.onDragging = onDragging;
1716
- });
1717
- const panelGroupContext = useContext(PanelGroupContext);
1718
- if (panelGroupContext === null) {
1719
- throw Error(`PanelResizeHandle components must be rendered within a PanelGroup container`);
1720
- }
1721
- const {
1722
- direction,
1723
- dragState,
1724
- groupId,
1725
- registerResizeHandle,
1726
- startDragging,
1727
- stopDragging
1728
- } = panelGroupContext;
1729
- const resizeHandleId = useUniqueId(idFromProps);
1730
- const isDragging = (dragState === null || dragState === void 0 ? void 0 : dragState.dragHandleId) === resizeHandleId;
1731
- const [isFocused, setIsFocused] = useState(false);
1732
- const [resizeHandler, setResizeHandler] = useState(null);
1733
- const stopDraggingAndBlur = useCallback(() => {
1734
- // Clicking on the drag handle shouldn't leave it focused;
1735
- // That would cause the PanelGroup to think it was still active.
1736
- const divElement = divElementRef.current;
1737
- assert(divElement);
1738
- divElement.blur();
1739
- stopDragging();
1740
- const {
1741
- onDragging
1742
- } = callbacksRef.current;
1743
- if (onDragging) {
1744
- onDragging(false);
1745
- }
1746
- }, [stopDragging]);
1747
- useEffect(() => {
1748
- if (disabled) {
1749
- setResizeHandler(null);
1750
- } else {
1751
- const resizeHandler = registerResizeHandle(resizeHandleId);
1752
- setResizeHandler(() => resizeHandler);
1753
- }
1754
- }, [disabled, resizeHandleId, registerResizeHandle]);
1755
- useEffect(() => {
1756
- if (disabled || resizeHandler == null || !isDragging) {
1757
- return;
1758
- }
1759
- const onMove = event => {
1760
- resizeHandler(event);
1761
- };
1762
- const onMouseLeave = event => {
1763
- resizeHandler(event);
1764
- };
1765
- const divElement = divElementRef.current;
1766
- assert(divElement);
1767
- const targetDocument = divElement.ownerDocument;
1768
- targetDocument.body.addEventListener("contextmenu", stopDraggingAndBlur);
1769
- targetDocument.body.addEventListener("mousemove", onMove);
1770
- targetDocument.body.addEventListener("touchmove", onMove);
1771
- targetDocument.body.addEventListener("mouseleave", onMouseLeave);
1772
- window.addEventListener("mouseup", stopDraggingAndBlur);
1773
- window.addEventListener("touchend", stopDraggingAndBlur);
1774
- return () => {
1775
- targetDocument.body.removeEventListener("contextmenu", stopDraggingAndBlur);
1776
- targetDocument.body.removeEventListener("mousemove", onMove);
1777
- targetDocument.body.removeEventListener("touchmove", onMove);
1778
- targetDocument.body.removeEventListener("mouseleave", onMouseLeave);
1779
- window.removeEventListener("mouseup", stopDraggingAndBlur);
1780
- window.removeEventListener("touchend", stopDraggingAndBlur);
1494
+
1495
+
1496
+
1497
+
1498
+ function $971f2c37f9d2b98e$export$8829ecf6b6b15484({ children: children = null, className: classNameFromProps = "", disabled: disabled = false, id: idFromProps, onDragging: onDragging, style: styleFromProps = {}, tabIndex: tabIndex = 0, tagName: Type = "div", ...rest }) {
1499
+ const divElementRef = (0, $ef07efbe5fa7d87e$export$b8f5890fc79d6aca)(null);
1500
+ // Use a ref to guard against users passing inline props
1501
+ const callbacksRef = (0, $ef07efbe5fa7d87e$export$b8f5890fc79d6aca)({
1502
+ onDragging: onDragging
1503
+ });
1504
+ (0, $ef07efbe5fa7d87e$export$6d9c69b0de29b591)(()=>{
1505
+ callbacksRef.current.onDragging = onDragging;
1506
+ });
1507
+ const panelGroupContext = (0, $ef07efbe5fa7d87e$export$fae74005e78b1a27)((0, $e30963544e64b604$export$7d8c6d083caec74a));
1508
+ if (panelGroupContext === null) throw Error(`PanelResizeHandle components must be rendered within a PanelGroup container`);
1509
+ const { direction: direction, dragState: dragState, groupId: groupId, registerResizeHandle: registerResizeHandle, startDragging: startDragging, stopDragging: stopDragging } = panelGroupContext;
1510
+ const resizeHandleId = (0, $e504a2438473eda9$export$2e2bcd8739ae039)(idFromProps);
1511
+ const isDragging = (dragState === null || dragState === void 0 ? void 0 : dragState.dragHandleId) === resizeHandleId;
1512
+ const [isFocused, setIsFocused] = (0, $ef07efbe5fa7d87e$export$60241385465d0a34)(false);
1513
+ const [resizeHandler, setResizeHandler] = (0, $ef07efbe5fa7d87e$export$60241385465d0a34)(null);
1514
+ const stopDraggingAndBlur = (0, $ef07efbe5fa7d87e$export$35808ee640e87ca7)(()=>{
1515
+ // Clicking on the drag handle shouldn't leave it focused;
1516
+ // That would cause the PanelGroup to think it was still active.
1517
+ const divElement = divElementRef.current;
1518
+ (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(divElement);
1519
+ divElement.blur();
1520
+ stopDragging();
1521
+ const { onDragging: onDragging } = callbacksRef.current;
1522
+ if (onDragging) onDragging(false);
1523
+ }, [
1524
+ stopDragging
1525
+ ]);
1526
+ (0, $ef07efbe5fa7d87e$export$6d9c69b0de29b591)(()=>{
1527
+ if (disabled) setResizeHandler(null);
1528
+ else {
1529
+ const resizeHandler = registerResizeHandle(resizeHandleId);
1530
+ setResizeHandler(()=>resizeHandler);
1531
+ }
1532
+ }, [
1533
+ disabled,
1534
+ resizeHandleId,
1535
+ registerResizeHandle
1536
+ ]);
1537
+ (0, $ef07efbe5fa7d87e$export$6d9c69b0de29b591)(()=>{
1538
+ if (disabled || resizeHandler == null || !isDragging) return;
1539
+ const onMove = (event)=>{
1540
+ resizeHandler(event);
1541
+ };
1542
+ const onMouseLeave = (event)=>{
1543
+ resizeHandler(event);
1544
+ };
1545
+ const divElement = divElementRef.current;
1546
+ (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(divElement);
1547
+ const targetDocument = divElement.ownerDocument;
1548
+ targetDocument.body.addEventListener("contextmenu", stopDraggingAndBlur);
1549
+ targetDocument.body.addEventListener("mousemove", onMove);
1550
+ targetDocument.body.addEventListener("touchmove", onMove);
1551
+ targetDocument.body.addEventListener("mouseleave", onMouseLeave);
1552
+ window.addEventListener("mouseup", stopDraggingAndBlur);
1553
+ window.addEventListener("touchend", stopDraggingAndBlur);
1554
+ return ()=>{
1555
+ targetDocument.body.removeEventListener("contextmenu", stopDraggingAndBlur);
1556
+ targetDocument.body.removeEventListener("mousemove", onMove);
1557
+ targetDocument.body.removeEventListener("touchmove", onMove);
1558
+ targetDocument.body.removeEventListener("mouseleave", onMouseLeave);
1559
+ window.removeEventListener("mouseup", stopDraggingAndBlur);
1560
+ window.removeEventListener("touchend", stopDraggingAndBlur);
1561
+ };
1562
+ }, [
1563
+ direction,
1564
+ disabled,
1565
+ isDragging,
1566
+ resizeHandler,
1567
+ stopDraggingAndBlur
1568
+ ]);
1569
+ (0, $4a90471e7083b52f$export$33b0bea6ac3ffb03)({
1570
+ disabled: disabled,
1571
+ handleId: resizeHandleId,
1572
+ resizeHandler: resizeHandler
1573
+ });
1574
+ const style = {
1575
+ cursor: (0, $8d9d88bebf1a8ace$export$fa35f3322c52262f)(direction),
1576
+ touchAction: "none",
1577
+ userSelect: "none"
1781
1578
  };
1782
- }, [direction, disabled, isDragging, resizeHandler, stopDraggingAndBlur]);
1783
- useWindowSplitterResizeHandlerBehavior({
1784
- disabled,
1785
- handleId: resizeHandleId,
1786
- resizeHandler
1787
- });
1788
- const style = {
1789
- cursor: getCursorStyle(direction),
1790
- touchAction: "none",
1791
- userSelect: "none"
1792
- };
1793
- return createElement(Type, {
1794
- ...rest,
1795
- children,
1796
- className: classNameFromProps,
1797
- onBlur: () => setIsFocused(false),
1798
- onFocus: () => setIsFocused(true),
1799
- onMouseDown: event => {
1800
- startDragging(resizeHandleId, event.nativeEvent);
1801
- const callbacks = callbacksRef.current;
1802
- assert(callbacks);
1803
- const {
1804
- onDragging
1805
- } = callbacks;
1806
- if (onDragging) {
1807
- onDragging(true);
1808
- }
1809
- },
1810
- onMouseUp: stopDraggingAndBlur,
1811
- onTouchCancel: stopDraggingAndBlur,
1812
- onTouchEnd: stopDraggingAndBlur,
1813
- onTouchStart: event => {
1814
- startDragging(resizeHandleId, event.nativeEvent);
1815
- const callbacks = callbacksRef.current;
1816
- assert(callbacks);
1817
- const {
1818
- onDragging
1819
- } = callbacks;
1820
- if (onDragging) {
1821
- onDragging(true);
1822
- }
1823
- },
1824
- ref: divElementRef,
1825
- role: "separator",
1826
- style: {
1827
- ...style,
1828
- ...styleFromProps
1829
- },
1830
- tabIndex,
1831
- // CSS selectors
1832
- "data-panel-group-direction": direction,
1833
- "data-panel-group-id": groupId,
1834
- "data-resize-handle": "",
1835
- "data-resize-handle-active": isDragging ? "pointer" : isFocused ? "keyboard" : undefined,
1836
- "data-panel-resize-handle-enabled": !disabled,
1837
- "data-panel-resize-handle-id": resizeHandleId
1838
- });
1579
+ return (0, $ef07efbe5fa7d87e$export$c8a8987d4410bf2d)(Type, {
1580
+ ...rest,
1581
+ children: children,
1582
+ className: classNameFromProps,
1583
+ onBlur: ()=>setIsFocused(false),
1584
+ onFocus: ()=>setIsFocused(true),
1585
+ onMouseDown: (event)=>{
1586
+ startDragging(resizeHandleId, event.nativeEvent);
1587
+ const callbacks = callbacksRef.current;
1588
+ (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(callbacks);
1589
+ const { onDragging: onDragging } = callbacks;
1590
+ if (onDragging) onDragging(true);
1591
+ },
1592
+ onMouseUp: stopDraggingAndBlur,
1593
+ onTouchCancel: stopDraggingAndBlur,
1594
+ onTouchEnd: stopDraggingAndBlur,
1595
+ onTouchStart: (event)=>{
1596
+ startDragging(resizeHandleId, event.nativeEvent);
1597
+ const callbacks = callbacksRef.current;
1598
+ (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(callbacks);
1599
+ const { onDragging: onDragging } = callbacks;
1600
+ if (onDragging) onDragging(true);
1601
+ },
1602
+ ref: divElementRef,
1603
+ role: "separator",
1604
+ style: {
1605
+ ...style,
1606
+ ...styleFromProps
1607
+ },
1608
+ tabIndex: tabIndex,
1609
+ // CSS selectors
1610
+ "data-panel-group-direction": direction,
1611
+ "data-panel-group-id": groupId,
1612
+ "data-resize-handle": "",
1613
+ "data-resize-handle-active": isDragging ? "pointer" : isFocused ? "keyboard" : undefined,
1614
+ "data-panel-resize-handle-enabled": !disabled,
1615
+ "data-panel-resize-handle-id": resizeHandleId
1616
+ });
1839
1617
  }
1840
- PanelResizeHandle.displayName = "PanelResizeHandle";
1618
+ $971f2c37f9d2b98e$export$8829ecf6b6b15484.displayName = "PanelResizeHandle";
1619
+
1620
+
1621
+
1622
+
1841
1623
 
1842
- export { Panel, PanelGroup, PanelResizeHandle, assert };
1624
+ export {$5f33910cd46e8ae7$export$a7a9523472993e97 as assert, $c33df6d7c39fd3ee$export$2ddb90ad54e5f587 as Panel, $3daa5d4c086ea816$export$1d05749f6f573bb as PanelGroup, $971f2c37f9d2b98e$export$8829ecf6b6b15484 as PanelResizeHandle};
1625
+ //# sourceMappingURL=react-resizable-panels.esm.js.map