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