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