likec4 1.2.1 → 1.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,1469 +0,0 @@
1
- import { q as React, j as jsxRuntimeExports, B as Box, t as CopyButton$1, T as Tooltip, A as ActionIcon, I as IconCheck, v as rem, w as IconCopy } from "./main-yVRq2dIl.js";
2
- const {
3
- createElement,
4
- createContext,
5
- createRef,
6
- forwardRef,
7
- useCallback,
8
- useContext,
9
- useEffect,
10
- useImperativeHandle,
11
- useLayoutEffect,
12
- useMemo,
13
- useRef,
14
- useState
15
- } = React, useId = React.useId, useLayoutEffect_do_not_use_directly = useLayoutEffect, PanelGroupContext = createContext(null);
16
- PanelGroupContext.displayName = "PanelGroupContext";
17
- const useIsomorphicLayoutEffect = useLayoutEffect_do_not_use_directly, wrappedUseId = typeof useId == "function" ? useId : () => null;
18
- let counter = 0;
19
- function useUniqueId(idFromParams = null) {
20
- const idFromUseId = wrappedUseId(), idRef = useRef(idFromParams || idFromUseId || null);
21
- return idRef.current === null && (idRef.current = "" + counter++), idFromParams ?? idRef.current;
22
- }
23
- function PanelWithForwardedRef({
24
- children,
25
- className: classNameFromProps = "",
26
- collapsedSize,
27
- collapsible,
28
- defaultSize,
29
- forwardedRef,
30
- id: idFromProps,
31
- maxSize,
32
- minSize,
33
- onCollapse,
34
- onExpand,
35
- onResize,
36
- order,
37
- style: styleFromProps,
38
- tagName: Type = "div",
39
- ...rest
40
- }) {
41
- const context = useContext(PanelGroupContext);
42
- if (context === null)
43
- throw Error("Panel components must be rendered within a PanelGroup container");
44
- const {
45
- collapsePanel,
46
- expandPanel,
47
- getPanelSize,
48
- getPanelStyle,
49
- groupId,
50
- isPanelCollapsed,
51
- reevaluatePanelConstraints,
52
- registerPanel,
53
- resizePanel: resizePanel2,
54
- unregisterPanel
55
- } = context, panelId = useUniqueId(idFromProps), panelDataRef = useRef({
56
- callbacks: {
57
- onCollapse,
58
- onExpand,
59
- onResize
60
- },
61
- constraints: {
62
- collapsedSize,
63
- collapsible,
64
- defaultSize,
65
- maxSize,
66
- minSize
67
- },
68
- id: panelId,
69
- idIsFromProps: idFromProps !== void 0,
70
- order
71
- });
72
- useRef({
73
- didLogMissingDefaultSizeWarning: !1
74
- }), useIsomorphicLayoutEffect(() => {
75
- const {
76
- callbacks,
77
- constraints
78
- } = panelDataRef.current, prevConstraints = {
79
- ...constraints
80
- };
81
- panelDataRef.current.id = panelId, panelDataRef.current.idIsFromProps = idFromProps !== void 0, panelDataRef.current.order = order, callbacks.onCollapse = onCollapse, callbacks.onExpand = onExpand, callbacks.onResize = onResize, constraints.collapsedSize = collapsedSize, constraints.collapsible = collapsible, constraints.defaultSize = defaultSize, constraints.maxSize = maxSize, constraints.minSize = minSize, (prevConstraints.collapsedSize !== constraints.collapsedSize || prevConstraints.collapsible !== constraints.collapsible || prevConstraints.maxSize !== constraints.maxSize || prevConstraints.minSize !== constraints.minSize) && reevaluatePanelConstraints(panelDataRef.current, prevConstraints);
82
- }), useIsomorphicLayoutEffect(() => {
83
- const panelData = panelDataRef.current;
84
- return registerPanel(panelData), () => {
85
- unregisterPanel(panelData);
86
- };
87
- }, [order, panelId, registerPanel, unregisterPanel]), useImperativeHandle(forwardedRef, () => ({
88
- collapse: () => {
89
- collapsePanel(panelDataRef.current);
90
- },
91
- expand: (minSize2) => {
92
- expandPanel(panelDataRef.current, minSize2);
93
- },
94
- getId() {
95
- return panelId;
96
- },
97
- getSize() {
98
- return getPanelSize(panelDataRef.current);
99
- },
100
- isCollapsed() {
101
- return isPanelCollapsed(panelDataRef.current);
102
- },
103
- isExpanded() {
104
- return !isPanelCollapsed(panelDataRef.current);
105
- },
106
- resize: (size) => {
107
- resizePanel2(panelDataRef.current, size);
108
- }
109
- }), [collapsePanel, expandPanel, getPanelSize, isPanelCollapsed, panelId, resizePanel2]);
110
- const style = getPanelStyle(panelDataRef.current, defaultSize);
111
- return createElement(Type, {
112
- ...rest,
113
- children,
114
- className: classNameFromProps,
115
- id: idFromProps,
116
- style: {
117
- ...style,
118
- ...styleFromProps
119
- },
120
- // CSS selectors
121
- "data-panel": "",
122
- "data-panel-collapsible": collapsible || void 0,
123
- "data-panel-group-id": groupId,
124
- "data-panel-id": panelId,
125
- "data-panel-size": parseFloat("" + style.flexGrow).toFixed(1)
126
- });
127
- }
128
- const Panel = forwardRef((props2, ref) => createElement(PanelWithForwardedRef, {
129
- ...props2,
130
- forwardedRef: ref
131
- }));
132
- PanelWithForwardedRef.displayName = "Panel";
133
- Panel.displayName = "forwardRef(Panel)";
134
- let currentCursorStyle = null, styleElement = null;
135
- function getCursorStyle(state, constraintFlags) {
136
- if (constraintFlags) {
137
- const horizontalMin = (constraintFlags & EXCEEDED_HORIZONTAL_MIN) !== 0, horizontalMax = (constraintFlags & EXCEEDED_HORIZONTAL_MAX) !== 0, verticalMin = (constraintFlags & EXCEEDED_VERTICAL_MIN) !== 0, verticalMax = (constraintFlags & EXCEEDED_VERTICAL_MAX) !== 0;
138
- if (horizontalMin)
139
- return verticalMin ? "se-resize" : verticalMax ? "ne-resize" : "e-resize";
140
- if (horizontalMax)
141
- return verticalMin ? "sw-resize" : verticalMax ? "nw-resize" : "w-resize";
142
- if (verticalMin)
143
- return "s-resize";
144
- if (verticalMax)
145
- return "n-resize";
146
- }
147
- switch (state) {
148
- case "horizontal":
149
- return "ew-resize";
150
- case "intersection":
151
- return "move";
152
- case "vertical":
153
- return "ns-resize";
154
- }
155
- }
156
- function resetGlobalCursorStyle() {
157
- styleElement !== null && (document.head.removeChild(styleElement), currentCursorStyle = null, styleElement = null);
158
- }
159
- function setGlobalCursorStyle(state, constraintFlags) {
160
- const style = getCursorStyle(state, constraintFlags);
161
- currentCursorStyle !== style && (currentCursorStyle = style, styleElement === null && (styleElement = document.createElement("style"), document.head.appendChild(styleElement)), styleElement.innerHTML = `*{cursor: ${style}!important;}`);
162
- }
163
- function isKeyDown(event) {
164
- return event.type === "keydown";
165
- }
166
- function isPointerEvent(event) {
167
- return event.type.startsWith("pointer");
168
- }
169
- function isMouseEvent(event) {
170
- return event.type.startsWith("mouse");
171
- }
172
- function getResizeEventCoordinates(event) {
173
- if (isPointerEvent(event)) {
174
- if (event.isPrimary)
175
- return {
176
- x: event.clientX,
177
- y: event.clientY
178
- };
179
- } else if (isMouseEvent(event))
180
- return {
181
- x: event.clientX,
182
- y: event.clientY
183
- };
184
- return {
185
- x: 1 / 0,
186
- y: 1 / 0
187
- };
188
- }
189
- function getInputType() {
190
- if (typeof matchMedia == "function")
191
- return matchMedia("(pointer:coarse)").matches ? "coarse" : "fine";
192
- }
193
- function intersects(rectOne, rectTwo, strict) {
194
- return strict ? rectOne.x < rectTwo.x + rectTwo.width && rectOne.x + rectOne.width > rectTwo.x && rectOne.y < rectTwo.y + rectTwo.height && rectOne.y + rectOne.height > rectTwo.y : rectOne.x <= rectTwo.x + rectTwo.width && rectOne.x + rectOne.width >= rectTwo.x && rectOne.y <= rectTwo.y + rectTwo.height && rectOne.y + rectOne.height >= rectTwo.y;
195
- }
196
- function compare(a, b) {
197
- if (a === b) throw new Error("Cannot compare node with itself");
198
- const ancestors = {
199
- a: get_ancestors(a),
200
- b: get_ancestors(b)
201
- };
202
- let common_ancestor;
203
- for (; ancestors.a.at(-1) === ancestors.b.at(-1); )
204
- a = ancestors.a.pop(), b = ancestors.b.pop(), common_ancestor = a;
205
- assert(common_ancestor, "Stacking order can only be calculated for elements with a common ancestor");
206
- const z_indexes = {
207
- a: get_z_index(find_stacking_context(ancestors.a)),
208
- b: get_z_index(find_stacking_context(ancestors.b))
209
- };
210
- if (z_indexes.a === z_indexes.b) {
211
- const children = common_ancestor.childNodes, furthest_ancestors = {
212
- a: ancestors.a.at(-1),
213
- b: ancestors.b.at(-1)
214
- };
215
- let i = children.length;
216
- for (; i--; ) {
217
- const child = children[i];
218
- if (child === furthest_ancestors.a) return 1;
219
- if (child === furthest_ancestors.b) return -1;
220
- }
221
- }
222
- return Math.sign(z_indexes.a - z_indexes.b);
223
- }
224
- const props = /\b(?:position|zIndex|opacity|transform|webkitTransform|mixBlendMode|filter|webkitFilter|isolation)\b/;
225
- function is_flex_item(node) {
226
- var _get_parent;
227
- const display = getComputedStyle((_get_parent = get_parent(node)) !== null && _get_parent !== void 0 ? _get_parent : node).display;
228
- return display === "flex" || display === "inline-flex";
229
- }
230
- function creates_stacking_context(node) {
231
- const style = getComputedStyle(node);
232
- return !!(style.position === "fixed" || style.zIndex !== "auto" && (style.position !== "static" || is_flex_item(node)) || +style.opacity < 1 || "transform" in style && style.transform !== "none" || "webkitTransform" in style && style.webkitTransform !== "none" || "mixBlendMode" in style && style.mixBlendMode !== "normal" || "filter" in style && style.filter !== "none" || "webkitFilter" in style && style.webkitFilter !== "none" || "isolation" in style && style.isolation === "isolate" || props.test(style.willChange) || style.webkitOverflowScrolling === "touch");
233
- }
234
- function find_stacking_context(nodes) {
235
- let i = nodes.length;
236
- for (; i--; ) {
237
- const node = nodes[i];
238
- if (assert(node, "Missing node"), creates_stacking_context(node)) return node;
239
- }
240
- return null;
241
- }
242
- function get_z_index(node) {
243
- return node && Number(getComputedStyle(node).zIndex) || 0;
244
- }
245
- function get_ancestors(node) {
246
- const ancestors = [];
247
- for (; node; )
248
- ancestors.push(node), node = get_parent(node);
249
- return ancestors;
250
- }
251
- function get_parent(node) {
252
- const {
253
- parentNode
254
- } = node;
255
- return parentNode && parentNode instanceof ShadowRoot ? parentNode.host : parentNode;
256
- }
257
- const EXCEEDED_HORIZONTAL_MIN = 1, EXCEEDED_HORIZONTAL_MAX = 2, EXCEEDED_VERTICAL_MIN = 4, EXCEEDED_VERTICAL_MAX = 8, isCoarsePointer = getInputType() === "coarse";
258
- let intersectingHandles = [], isPointerDown = !1, ownerDocumentCounts = /* @__PURE__ */ new Map(), panelConstraintFlags = /* @__PURE__ */ new Map();
259
- const registeredResizeHandlers = /* @__PURE__ */ new Set();
260
- function registerResizeHandle(resizeHandleId, element, direction, hitAreaMargins, setResizeHandlerState) {
261
- var _ownerDocumentCounts$;
262
- const {
263
- ownerDocument
264
- } = element, data = {
265
- direction,
266
- element,
267
- hitAreaMargins,
268
- setResizeHandlerState
269
- }, count = (_ownerDocumentCounts$ = ownerDocumentCounts.get(ownerDocument)) !== null && _ownerDocumentCounts$ !== void 0 ? _ownerDocumentCounts$ : 0;
270
- return ownerDocumentCounts.set(ownerDocument, count + 1), registeredResizeHandlers.add(data), updateListeners(), function() {
271
- var _ownerDocumentCounts$2;
272
- panelConstraintFlags.delete(resizeHandleId), registeredResizeHandlers.delete(data);
273
- const count2 = (_ownerDocumentCounts$2 = ownerDocumentCounts.get(ownerDocument)) !== null && _ownerDocumentCounts$2 !== void 0 ? _ownerDocumentCounts$2 : 1;
274
- ownerDocumentCounts.set(ownerDocument, count2 - 1), updateListeners(), count2 === 1 && ownerDocumentCounts.delete(ownerDocument);
275
- };
276
- }
277
- function handlePointerDown(event) {
278
- const {
279
- target
280
- } = event, {
281
- x,
282
- y
283
- } = getResizeEventCoordinates(event);
284
- isPointerDown = !0, recalculateIntersectingHandles({
285
- target,
286
- x,
287
- y
288
- }), updateListeners(), intersectingHandles.length > 0 && (updateResizeHandlerStates("down", event), event.preventDefault(), event.stopPropagation());
289
- }
290
- function handlePointerMove(event) {
291
- const {
292
- x,
293
- y
294
- } = getResizeEventCoordinates(event);
295
- if (!isPointerDown) {
296
- const {
297
- target
298
- } = event;
299
- recalculateIntersectingHandles({
300
- target,
301
- x,
302
- y
303
- });
304
- }
305
- updateResizeHandlerStates("move", event), updateCursor(), intersectingHandles.length > 0 && event.preventDefault();
306
- }
307
- function handlePointerUp(event) {
308
- const {
309
- target
310
- } = event, {
311
- x,
312
- y
313
- } = getResizeEventCoordinates(event);
314
- panelConstraintFlags.clear(), isPointerDown = !1, intersectingHandles.length > 0 && event.preventDefault(), updateResizeHandlerStates("up", event), recalculateIntersectingHandles({
315
- target,
316
- x,
317
- y
318
- }), updateCursor(), updateListeners();
319
- }
320
- function recalculateIntersectingHandles({
321
- target,
322
- x,
323
- y
324
- }) {
325
- intersectingHandles.splice(0);
326
- let targetElement = null;
327
- target instanceof HTMLElement && (targetElement = target), registeredResizeHandlers.forEach((data) => {
328
- const {
329
- element: dragHandleElement,
330
- hitAreaMargins
331
- } = data, dragHandleRect = dragHandleElement.getBoundingClientRect(), {
332
- bottom,
333
- left,
334
- right,
335
- top
336
- } = dragHandleRect, margin = isCoarsePointer ? hitAreaMargins.coarse : hitAreaMargins.fine;
337
- if (x >= left - margin && x <= right + margin && y >= top - margin && y <= bottom + margin) {
338
- if (targetElement !== null && dragHandleElement !== targetElement && !dragHandleElement.contains(targetElement) && !targetElement.contains(dragHandleElement) && // Calculating stacking order has a cost, so we should avoid it if possible
339
- // That is why we only check potentially intersecting handles,
340
- // and why we skip if the event target is within the handle's DOM
341
- compare(targetElement, dragHandleElement) > 0) {
342
- let currentElement = targetElement, didIntersect = !1;
343
- for (; currentElement && !currentElement.contains(dragHandleElement); ) {
344
- if (intersects(currentElement.getBoundingClientRect(), dragHandleRect, !0)) {
345
- didIntersect = !0;
346
- break;
347
- }
348
- currentElement = currentElement.parentElement;
349
- }
350
- if (didIntersect)
351
- return;
352
- }
353
- intersectingHandles.push(data);
354
- }
355
- });
356
- }
357
- function reportConstraintsViolation(resizeHandleId, flag) {
358
- panelConstraintFlags.set(resizeHandleId, flag);
359
- }
360
- function updateCursor() {
361
- let intersectsHorizontal = !1, intersectsVertical = !1;
362
- intersectingHandles.forEach((data) => {
363
- const {
364
- direction
365
- } = data;
366
- direction === "horizontal" ? intersectsHorizontal = !0 : intersectsVertical = !0;
367
- });
368
- let constraintFlags = 0;
369
- panelConstraintFlags.forEach((flag) => {
370
- constraintFlags |= flag;
371
- }), intersectsHorizontal && intersectsVertical ? setGlobalCursorStyle("intersection", constraintFlags) : intersectsHorizontal ? setGlobalCursorStyle("horizontal", constraintFlags) : intersectsVertical ? setGlobalCursorStyle("vertical", constraintFlags) : resetGlobalCursorStyle();
372
- }
373
- function updateListeners() {
374
- ownerDocumentCounts.forEach((_, ownerDocument) => {
375
- const {
376
- body
377
- } = ownerDocument;
378
- body.removeEventListener("contextmenu", handlePointerUp), body.removeEventListener("pointerdown", handlePointerDown), body.removeEventListener("pointerleave", handlePointerMove), body.removeEventListener("pointermove", handlePointerMove);
379
- }), window.removeEventListener("pointerup", handlePointerUp), window.removeEventListener("pointercancel", handlePointerUp), registeredResizeHandlers.size > 0 && (isPointerDown ? (intersectingHandles.length > 0 && ownerDocumentCounts.forEach((count, ownerDocument) => {
380
- const {
381
- body
382
- } = ownerDocument;
383
- count > 0 && (body.addEventListener("contextmenu", handlePointerUp), body.addEventListener("pointerleave", handlePointerMove), body.addEventListener("pointermove", handlePointerMove));
384
- }), window.addEventListener("pointerup", handlePointerUp), window.addEventListener("pointercancel", handlePointerUp)) : ownerDocumentCounts.forEach((count, ownerDocument) => {
385
- const {
386
- body
387
- } = ownerDocument;
388
- count > 0 && (body.addEventListener("pointerdown", handlePointerDown, {
389
- capture: !0
390
- }), body.addEventListener("pointermove", handlePointerMove));
391
- }));
392
- }
393
- function updateResizeHandlerStates(action, event) {
394
- registeredResizeHandlers.forEach((data) => {
395
- const {
396
- setResizeHandlerState
397
- } = data, isActive = intersectingHandles.includes(data);
398
- setResizeHandlerState(action, isActive, event);
399
- });
400
- }
401
- function assert(expectedCondition, message) {
402
- if (!expectedCondition)
403
- throw console.error(message), Error(message);
404
- }
405
- const PRECISION = 10;
406
- function fuzzyCompareNumbers(actual, expected, fractionDigits = PRECISION) {
407
- return actual.toFixed(fractionDigits) === expected.toFixed(fractionDigits) ? 0 : actual > expected ? 1 : -1;
408
- }
409
- function fuzzyNumbersEqual$1(actual, expected, fractionDigits = PRECISION) {
410
- return fuzzyCompareNumbers(actual, expected, fractionDigits) === 0;
411
- }
412
- function fuzzyNumbersEqual(actual, expected, fractionDigits) {
413
- return fuzzyCompareNumbers(actual, expected, fractionDigits) === 0;
414
- }
415
- function fuzzyLayoutsEqual(actual, expected, fractionDigits) {
416
- if (actual.length !== expected.length)
417
- return !1;
418
- for (let index = 0; index < actual.length; index++) {
419
- const actualSize = actual[index], expectedSize = expected[index];
420
- if (!fuzzyNumbersEqual(actualSize, expectedSize, fractionDigits))
421
- return !1;
422
- }
423
- return !0;
424
- }
425
- function resizePanel({
426
- panelConstraints: panelConstraintsArray,
427
- panelIndex,
428
- size
429
- }) {
430
- const panelConstraints = panelConstraintsArray[panelIndex];
431
- assert(panelConstraints != null, `Panel constraints not found for index ${panelIndex}`);
432
- let {
433
- collapsedSize = 0,
434
- collapsible,
435
- maxSize = 100,
436
- minSize = 0
437
- } = panelConstraints;
438
- if (fuzzyCompareNumbers(size, minSize) < 0)
439
- if (collapsible) {
440
- const halfwayPoint = (collapsedSize + minSize) / 2;
441
- fuzzyCompareNumbers(size, halfwayPoint) < 0 ? size = collapsedSize : size = minSize;
442
- } else
443
- size = minSize;
444
- return size = Math.min(maxSize, size), size = parseFloat(size.toFixed(PRECISION)), size;
445
- }
446
- function adjustLayoutByDelta({
447
- delta,
448
- initialLayout,
449
- panelConstraints: panelConstraintsArray,
450
- pivotIndices,
451
- prevLayout,
452
- trigger
453
- }) {
454
- if (fuzzyNumbersEqual(delta, 0))
455
- return initialLayout;
456
- const nextLayout = [...initialLayout], [firstPivotIndex, secondPivotIndex] = pivotIndices;
457
- assert(firstPivotIndex != null, "Invalid first pivot index"), assert(secondPivotIndex != null, "Invalid second pivot index");
458
- let deltaApplied = 0;
459
- if (trigger === "keyboard") {
460
- {
461
- const index = delta < 0 ? secondPivotIndex : firstPivotIndex, panelConstraints = panelConstraintsArray[index];
462
- assert(panelConstraints, `Panel constraints not found for index ${index}`);
463
- const {
464
- collapsedSize = 0,
465
- collapsible,
466
- minSize = 0
467
- } = panelConstraints;
468
- if (collapsible) {
469
- const prevSize = initialLayout[index];
470
- if (assert(prevSize != null, `Previous layout not found for panel index ${index}`), fuzzyNumbersEqual(prevSize, collapsedSize)) {
471
- const localDelta = minSize - prevSize;
472
- fuzzyCompareNumbers(localDelta, Math.abs(delta)) > 0 && (delta = delta < 0 ? 0 - localDelta : localDelta);
473
- }
474
- }
475
- }
476
- {
477
- const index = delta < 0 ? firstPivotIndex : secondPivotIndex, panelConstraints = panelConstraintsArray[index];
478
- assert(panelConstraints, `No panel constraints found for index ${index}`);
479
- const {
480
- collapsedSize = 0,
481
- collapsible,
482
- minSize = 0
483
- } = panelConstraints;
484
- if (collapsible) {
485
- const prevSize = initialLayout[index];
486
- if (assert(prevSize != null, `Previous layout not found for panel index ${index}`), fuzzyNumbersEqual(prevSize, minSize)) {
487
- const localDelta = prevSize - collapsedSize;
488
- fuzzyCompareNumbers(localDelta, Math.abs(delta)) > 0 && (delta = delta < 0 ? 0 - localDelta : localDelta);
489
- }
490
- }
491
- }
492
- }
493
- {
494
- const increment = delta < 0 ? 1 : -1;
495
- let index = delta < 0 ? secondPivotIndex : firstPivotIndex, maxAvailableDelta = 0;
496
- for (; ; ) {
497
- const prevSize = initialLayout[index];
498
- assert(prevSize != null, `Previous layout not found for panel index ${index}`);
499
- const delta2 = resizePanel({
500
- panelConstraints: panelConstraintsArray,
501
- panelIndex: index,
502
- size: 100
503
- }) - prevSize;
504
- if (maxAvailableDelta += delta2, index += increment, index < 0 || index >= panelConstraintsArray.length)
505
- break;
506
- }
507
- const minAbsDelta = Math.min(Math.abs(delta), Math.abs(maxAvailableDelta));
508
- delta = delta < 0 ? 0 - minAbsDelta : minAbsDelta;
509
- }
510
- {
511
- let index = delta < 0 ? firstPivotIndex : secondPivotIndex;
512
- for (; index >= 0 && index < panelConstraintsArray.length; ) {
513
- const deltaRemaining = Math.abs(delta) - Math.abs(deltaApplied), prevSize = initialLayout[index];
514
- assert(prevSize != null, `Previous layout not found for panel index ${index}`);
515
- const unsafeSize = prevSize - deltaRemaining, safeSize = resizePanel({
516
- panelConstraints: panelConstraintsArray,
517
- panelIndex: index,
518
- size: unsafeSize
519
- });
520
- if (!fuzzyNumbersEqual(prevSize, safeSize) && (deltaApplied += prevSize - safeSize, nextLayout[index] = safeSize, deltaApplied.toPrecision(3).localeCompare(Math.abs(delta).toPrecision(3), void 0, {
521
- numeric: !0
522
- }) >= 0))
523
- break;
524
- delta < 0 ? index-- : index++;
525
- }
526
- }
527
- if (fuzzyLayoutsEqual(prevLayout, nextLayout))
528
- return prevLayout;
529
- {
530
- const pivotIndex = delta < 0 ? secondPivotIndex : firstPivotIndex, prevSize = initialLayout[pivotIndex];
531
- assert(prevSize != null, `Previous layout not found for panel index ${pivotIndex}`);
532
- const unsafeSize = prevSize + deltaApplied, safeSize = resizePanel({
533
- panelConstraints: panelConstraintsArray,
534
- panelIndex: pivotIndex,
535
- size: unsafeSize
536
- });
537
- if (nextLayout[pivotIndex] = safeSize, !fuzzyNumbersEqual(safeSize, unsafeSize)) {
538
- let deltaRemaining = unsafeSize - safeSize, index = delta < 0 ? secondPivotIndex : firstPivotIndex;
539
- for (; index >= 0 && index < panelConstraintsArray.length; ) {
540
- const prevSize2 = nextLayout[index];
541
- assert(prevSize2 != null, `Previous layout not found for panel index ${index}`);
542
- const unsafeSize2 = prevSize2 + deltaRemaining, safeSize2 = resizePanel({
543
- panelConstraints: panelConstraintsArray,
544
- panelIndex: index,
545
- size: unsafeSize2
546
- });
547
- if (fuzzyNumbersEqual(prevSize2, safeSize2) || (deltaRemaining -= safeSize2 - prevSize2, nextLayout[index] = safeSize2), fuzzyNumbersEqual(deltaRemaining, 0))
548
- break;
549
- delta > 0 ? index-- : index++;
550
- }
551
- }
552
- }
553
- const totalSize = nextLayout.reduce((total, size) => size + total, 0);
554
- return fuzzyNumbersEqual(totalSize, 100) ? nextLayout : prevLayout;
555
- }
556
- function calculateAriaValues({
557
- layout,
558
- panelsArray,
559
- pivotIndices
560
- }) {
561
- let currentMinSize = 0, currentMaxSize = 100, totalMinSize = 0, totalMaxSize = 0;
562
- const firstIndex = pivotIndices[0];
563
- assert(firstIndex != null, "No pivot index found"), panelsArray.forEach((panelData, index) => {
564
- const {
565
- constraints
566
- } = panelData, {
567
- maxSize = 100,
568
- minSize = 0
569
- } = constraints;
570
- index === firstIndex ? (currentMinSize = minSize, currentMaxSize = maxSize) : (totalMinSize += minSize, totalMaxSize += maxSize);
571
- });
572
- const valueMax = Math.min(currentMaxSize, 100 - totalMinSize), valueMin = Math.max(currentMinSize, 100 - totalMaxSize), valueNow = layout[firstIndex];
573
- return {
574
- valueMax,
575
- valueMin,
576
- valueNow
577
- };
578
- }
579
- function getResizeHandleElementsForGroup(groupId, scope = document) {
580
- return Array.from(scope.querySelectorAll(`[data-panel-resize-handle-id][data-panel-group-id="${groupId}"]`));
581
- }
582
- function getResizeHandleElementIndex(groupId, id, scope = document) {
583
- const index = getResizeHandleElementsForGroup(groupId, scope).findIndex((handle) => handle.getAttribute("data-panel-resize-handle-id") === id);
584
- return index ?? null;
585
- }
586
- function determinePivotIndices(groupId, dragHandleId, panelGroupElement) {
587
- const index = getResizeHandleElementIndex(groupId, dragHandleId, panelGroupElement);
588
- return index != null ? [index, index + 1] : [-1, -1];
589
- }
590
- function getPanelGroupElement(id, rootElement = document) {
591
- var _dataset;
592
- if (rootElement instanceof HTMLElement && (rootElement == null || (_dataset = rootElement.dataset) === null || _dataset === void 0 ? void 0 : _dataset.panelGroupId) == id)
593
- return rootElement;
594
- const element = rootElement.querySelector(`[data-panel-group][data-panel-group-id="${id}"]`);
595
- return element || null;
596
- }
597
- function getResizeHandleElement(id, scope = document) {
598
- const element = scope.querySelector(`[data-panel-resize-handle-id="${id}"]`);
599
- return element || null;
600
- }
601
- function getResizeHandlePanelIds(groupId, handleId, panelsArray, scope = document) {
602
- var _panelsArray$index$id, _panelsArray$index, _panelsArray$id, _panelsArray;
603
- const handle = getResizeHandleElement(handleId, scope), handles = getResizeHandleElementsForGroup(groupId, scope), index = handle ? handles.indexOf(handle) : -1, 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, idAfter = (_panelsArray$id = (_panelsArray = panelsArray[index + 1]) === null || _panelsArray === void 0 ? void 0 : _panelsArray.id) !== null && _panelsArray$id !== void 0 ? _panelsArray$id : null;
604
- return [idBefore, idAfter];
605
- }
606
- function useWindowSplitterPanelGroupBehavior({
607
- committedValuesRef,
608
- eagerValuesRef,
609
- groupId,
610
- layout,
611
- panelDataArray,
612
- panelGroupElement,
613
- setLayout
614
- }) {
615
- useRef({
616
- didWarnAboutMissingResizeHandle: !1
617
- }), useIsomorphicLayoutEffect(() => {
618
- if (!panelGroupElement)
619
- return;
620
- const resizeHandleElements = getResizeHandleElementsForGroup(groupId, panelGroupElement);
621
- for (let index = 0; index < panelDataArray.length - 1; index++) {
622
- const {
623
- valueMax,
624
- valueMin,
625
- valueNow
626
- } = calculateAriaValues({
627
- layout,
628
- panelsArray: panelDataArray,
629
- pivotIndices: [index, index + 1]
630
- }), resizeHandleElement = resizeHandleElements[index];
631
- if (resizeHandleElement != null) {
632
- const panelData = panelDataArray[index];
633
- assert(panelData, `No panel data found for index "${index}"`), resizeHandleElement.setAttribute("aria-controls", panelData.id), resizeHandleElement.setAttribute("aria-valuemax", "" + Math.round(valueMax)), resizeHandleElement.setAttribute("aria-valuemin", "" + Math.round(valueMin)), resizeHandleElement.setAttribute("aria-valuenow", valueNow != null ? "" + Math.round(valueNow) : "");
634
- }
635
- }
636
- return () => {
637
- resizeHandleElements.forEach((resizeHandleElement, index) => {
638
- resizeHandleElement.removeAttribute("aria-controls"), resizeHandleElement.removeAttribute("aria-valuemax"), resizeHandleElement.removeAttribute("aria-valuemin"), resizeHandleElement.removeAttribute("aria-valuenow");
639
- });
640
- };
641
- }, [groupId, layout, panelDataArray, panelGroupElement]), useEffect(() => {
642
- if (!panelGroupElement)
643
- return;
644
- const eagerValues = eagerValuesRef.current;
645
- assert(eagerValues, "Eager values not found");
646
- const {
647
- panelDataArray: panelDataArray2
648
- } = eagerValues, groupElement = getPanelGroupElement(groupId, panelGroupElement);
649
- assert(groupElement != null, `No group found for id "${groupId}"`);
650
- const handles = getResizeHandleElementsForGroup(groupId, panelGroupElement);
651
- assert(handles, `No resize handles found for group id "${groupId}"`);
652
- const cleanupFunctions = handles.map((handle) => {
653
- const handleId = handle.getAttribute("data-panel-resize-handle-id");
654
- assert(handleId, "Resize handle element has no handle id attribute");
655
- const [idBefore, idAfter] = getResizeHandlePanelIds(groupId, handleId, panelDataArray2, panelGroupElement);
656
- if (idBefore == null || idAfter == null)
657
- return () => {
658
- };
659
- const onKeyDown = (event) => {
660
- if (!event.defaultPrevented)
661
- switch (event.key) {
662
- case "Enter": {
663
- event.preventDefault();
664
- const index = panelDataArray2.findIndex((panelData) => panelData.id === idBefore);
665
- if (index >= 0) {
666
- const panelData = panelDataArray2[index];
667
- assert(panelData, `No panel data found for index ${index}`);
668
- const size = layout[index], {
669
- collapsedSize = 0,
670
- collapsible,
671
- minSize = 0
672
- } = panelData.constraints;
673
- if (size != null && collapsible) {
674
- const nextLayout = adjustLayoutByDelta({
675
- delta: fuzzyNumbersEqual(size, collapsedSize) ? minSize - collapsedSize : collapsedSize - size,
676
- initialLayout: layout,
677
- panelConstraints: panelDataArray2.map((panelData2) => panelData2.constraints),
678
- pivotIndices: determinePivotIndices(groupId, handleId, panelGroupElement),
679
- prevLayout: layout,
680
- trigger: "keyboard"
681
- });
682
- layout !== nextLayout && setLayout(nextLayout);
683
- }
684
- }
685
- break;
686
- }
687
- }
688
- };
689
- return handle.addEventListener("keydown", onKeyDown), () => {
690
- handle.removeEventListener("keydown", onKeyDown);
691
- };
692
- });
693
- return () => {
694
- cleanupFunctions.forEach((cleanupFunction) => cleanupFunction());
695
- };
696
- }, [panelGroupElement, committedValuesRef, eagerValuesRef, groupId, layout, panelDataArray, setLayout]);
697
- }
698
- function areEqual(arrayA, arrayB) {
699
- if (arrayA.length !== arrayB.length)
700
- return !1;
701
- for (let index = 0; index < arrayA.length; index++)
702
- if (arrayA[index] !== arrayB[index])
703
- return !1;
704
- return !0;
705
- }
706
- function getResizeEventCursorPosition(direction, event) {
707
- const isHorizontal = direction === "horizontal", {
708
- x,
709
- y
710
- } = getResizeEventCoordinates(event);
711
- return isHorizontal ? x : y;
712
- }
713
- function calculateDragOffsetPercentage(event, dragHandleId, direction, initialDragState, panelGroupElement) {
714
- const isHorizontal = direction === "horizontal", handleElement = getResizeHandleElement(dragHandleId, panelGroupElement);
715
- assert(handleElement, `No resize handle element found for id "${dragHandleId}"`);
716
- const groupId = handleElement.getAttribute("data-panel-group-id");
717
- assert(groupId, "Resize handle element has no group id attribute");
718
- let {
719
- initialCursorPosition
720
- } = initialDragState;
721
- const cursorPosition = getResizeEventCursorPosition(direction, event), groupElement = getPanelGroupElement(groupId, panelGroupElement);
722
- assert(groupElement, `No group element found for id "${groupId}"`);
723
- const groupRect = groupElement.getBoundingClientRect(), groupSizeInPixels = isHorizontal ? groupRect.width : groupRect.height;
724
- return (cursorPosition - initialCursorPosition) / groupSizeInPixels * 100;
725
- }
726
- function calculateDeltaPercentage(event, dragHandleId, direction, initialDragState, keyboardResizeBy, panelGroupElement) {
727
- if (isKeyDown(event)) {
728
- const isHorizontal = direction === "horizontal";
729
- let delta = 0;
730
- event.shiftKey ? delta = 100 : keyboardResizeBy != null ? delta = keyboardResizeBy : delta = 10;
731
- let movement = 0;
732
- switch (event.key) {
733
- case "ArrowDown":
734
- movement = isHorizontal ? 0 : delta;
735
- break;
736
- case "ArrowLeft":
737
- movement = isHorizontal ? -delta : 0;
738
- break;
739
- case "ArrowRight":
740
- movement = isHorizontal ? delta : 0;
741
- break;
742
- case "ArrowUp":
743
- movement = isHorizontal ? 0 : -delta;
744
- break;
745
- case "End":
746
- movement = 100;
747
- break;
748
- case "Home":
749
- movement = -100;
750
- break;
751
- }
752
- return movement;
753
- } else
754
- return initialDragState == null ? 0 : calculateDragOffsetPercentage(event, dragHandleId, direction, initialDragState, panelGroupElement);
755
- }
756
- function calculateUnsafeDefaultLayout({
757
- panelDataArray
758
- }) {
759
- const layout = Array(panelDataArray.length), panelConstraintsArray = panelDataArray.map((panelData) => panelData.constraints);
760
- let numPanelsWithSizes = 0, remainingSize = 100;
761
- for (let index = 0; index < panelDataArray.length; index++) {
762
- const panelConstraints = panelConstraintsArray[index];
763
- assert(panelConstraints, `Panel constraints not found for index ${index}`);
764
- const {
765
- defaultSize
766
- } = panelConstraints;
767
- defaultSize != null && (numPanelsWithSizes++, layout[index] = defaultSize, remainingSize -= defaultSize);
768
- }
769
- for (let index = 0; index < panelDataArray.length; index++) {
770
- const panelConstraints = panelConstraintsArray[index];
771
- assert(panelConstraints, `Panel constraints not found for index ${index}`);
772
- const {
773
- defaultSize
774
- } = panelConstraints;
775
- if (defaultSize != null)
776
- continue;
777
- const numRemainingPanels = panelDataArray.length - numPanelsWithSizes, size = remainingSize / numRemainingPanels;
778
- numPanelsWithSizes++, layout[index] = size, remainingSize -= size;
779
- }
780
- return layout;
781
- }
782
- function callPanelCallbacks(panelsArray, layout, panelIdToLastNotifiedSizeMap) {
783
- layout.forEach((size, index) => {
784
- const panelData = panelsArray[index];
785
- assert(panelData, `Panel data not found for index ${index}`);
786
- const {
787
- callbacks,
788
- constraints,
789
- id: panelId
790
- } = panelData, {
791
- collapsedSize = 0,
792
- collapsible
793
- } = constraints, lastNotifiedSize = panelIdToLastNotifiedSizeMap[panelId];
794
- if (lastNotifiedSize == null || size !== lastNotifiedSize) {
795
- panelIdToLastNotifiedSizeMap[panelId] = size;
796
- const {
797
- onCollapse,
798
- onExpand,
799
- onResize
800
- } = callbacks;
801
- onResize && onResize(size, lastNotifiedSize), collapsible && (onCollapse || onExpand) && (onExpand && (lastNotifiedSize == null || fuzzyNumbersEqual$1(lastNotifiedSize, collapsedSize)) && !fuzzyNumbersEqual$1(size, collapsedSize) && onExpand(), onCollapse && (lastNotifiedSize == null || !fuzzyNumbersEqual$1(lastNotifiedSize, collapsedSize)) && fuzzyNumbersEqual$1(size, collapsedSize) && onCollapse());
802
- }
803
- });
804
- }
805
- function compareLayouts(a, b) {
806
- if (a.length !== b.length)
807
- return !1;
808
- for (let index = 0; index < a.length; index++)
809
- if (a[index] != b[index])
810
- return !1;
811
- return !0;
812
- }
813
- function computePanelFlexBoxStyle({
814
- defaultSize,
815
- dragState,
816
- layout,
817
- panelData,
818
- panelIndex,
819
- precision = 3
820
- }) {
821
- const size = layout[panelIndex];
822
- let flexGrow;
823
- return size == null ? flexGrow = defaultSize != null ? defaultSize.toPrecision(precision) : "1" : panelData.length === 1 ? flexGrow = "1" : flexGrow = size.toPrecision(precision), {
824
- flexBasis: 0,
825
- flexGrow,
826
- flexShrink: 1,
827
- // Without this, Panel sizes may be unintentionally overridden by their content
828
- overflow: "hidden",
829
- // Disable pointer events inside of a panel during resize
830
- // This avoid edge cases like nested iframes
831
- pointerEvents: dragState !== null ? "none" : void 0
832
- };
833
- }
834
- function debounce(callback, durationMs = 10) {
835
- let timeoutId = null;
836
- return (...args) => {
837
- timeoutId !== null && clearTimeout(timeoutId), timeoutId = setTimeout(() => {
838
- callback(...args);
839
- }, durationMs);
840
- };
841
- }
842
- function initializeDefaultStorage(storageObject) {
843
- try {
844
- if (typeof localStorage < "u")
845
- storageObject.getItem = (name) => localStorage.getItem(name), storageObject.setItem = (name, value) => {
846
- localStorage.setItem(name, value);
847
- };
848
- else
849
- throw new Error("localStorage not supported in this environment");
850
- } catch (error) {
851
- console.error(error), storageObject.getItem = () => null, storageObject.setItem = () => {
852
- };
853
- }
854
- }
855
- function getPanelGroupKey(autoSaveId) {
856
- return `react-resizable-panels:${autoSaveId}`;
857
- }
858
- function getPanelKey(panels) {
859
- return panels.map((panel) => {
860
- const {
861
- constraints,
862
- id,
863
- idIsFromProps,
864
- order
865
- } = panel;
866
- return idIsFromProps ? id : order ? `${order}:${JSON.stringify(constraints)}` : JSON.stringify(constraints);
867
- }).sort((a, b) => a.localeCompare(b)).join(",");
868
- }
869
- function loadSerializedPanelGroupState(autoSaveId, storage) {
870
- try {
871
- const panelGroupKey = getPanelGroupKey(autoSaveId), serialized = storage.getItem(panelGroupKey);
872
- if (serialized) {
873
- const parsed = JSON.parse(serialized);
874
- if (typeof parsed == "object" && parsed != null)
875
- return parsed;
876
- }
877
- } catch {
878
- }
879
- return null;
880
- }
881
- function loadPanelGroupState(autoSaveId, panels, storage) {
882
- var _loadSerializedPanelG, _state$panelKey;
883
- const state = (_loadSerializedPanelG = loadSerializedPanelGroupState(autoSaveId, storage)) !== null && _loadSerializedPanelG !== void 0 ? _loadSerializedPanelG : {}, panelKey = getPanelKey(panels);
884
- return (_state$panelKey = state[panelKey]) !== null && _state$panelKey !== void 0 ? _state$panelKey : null;
885
- }
886
- function savePanelGroupState(autoSaveId, panels, panelSizesBeforeCollapse, sizes, storage) {
887
- var _loadSerializedPanelG2;
888
- const panelGroupKey = getPanelGroupKey(autoSaveId), panelKey = getPanelKey(panels), state = (_loadSerializedPanelG2 = loadSerializedPanelGroupState(autoSaveId, storage)) !== null && _loadSerializedPanelG2 !== void 0 ? _loadSerializedPanelG2 : {};
889
- state[panelKey] = {
890
- expandToSizes: Object.fromEntries(panelSizesBeforeCollapse.entries()),
891
- layout: sizes
892
- };
893
- try {
894
- storage.setItem(panelGroupKey, JSON.stringify(state));
895
- } catch (error) {
896
- console.error(error);
897
- }
898
- }
899
- function validatePanelGroupLayout({
900
- layout: prevLayout,
901
- panelConstraints
902
- }) {
903
- const nextLayout = [...prevLayout], nextLayoutTotalSize = nextLayout.reduce((accumulated, current) => accumulated + current, 0);
904
- if (nextLayout.length !== panelConstraints.length)
905
- throw Error(`Invalid ${panelConstraints.length} panel layout: ${nextLayout.map((size) => `${size}%`).join(", ")}`);
906
- if (!fuzzyNumbersEqual(nextLayoutTotalSize, 100))
907
- for (let index = 0; index < panelConstraints.length; index++) {
908
- const unsafeSize = nextLayout[index];
909
- assert(unsafeSize != null, `No layout data found for index ${index}`);
910
- const safeSize = 100 / nextLayoutTotalSize * unsafeSize;
911
- nextLayout[index] = safeSize;
912
- }
913
- let remainingSize = 0;
914
- for (let index = 0; index < panelConstraints.length; index++) {
915
- const unsafeSize = nextLayout[index];
916
- assert(unsafeSize != null, `No layout data found for index ${index}`);
917
- const safeSize = resizePanel({
918
- panelConstraints,
919
- panelIndex: index,
920
- size: unsafeSize
921
- });
922
- unsafeSize != safeSize && (remainingSize += unsafeSize - safeSize, nextLayout[index] = safeSize);
923
- }
924
- if (!fuzzyNumbersEqual(remainingSize, 0))
925
- for (let index = 0; index < panelConstraints.length; index++) {
926
- const prevSize = nextLayout[index];
927
- assert(prevSize != null, `No layout data found for index ${index}`);
928
- const unsafeSize = prevSize + remainingSize, safeSize = resizePanel({
929
- panelConstraints,
930
- panelIndex: index,
931
- size: unsafeSize
932
- });
933
- if (prevSize !== safeSize && (remainingSize -= safeSize - prevSize, nextLayout[index] = safeSize, fuzzyNumbersEqual(remainingSize, 0)))
934
- break;
935
- }
936
- return nextLayout;
937
- }
938
- const LOCAL_STORAGE_DEBOUNCE_INTERVAL = 100, defaultStorage = {
939
- getItem: (name) => (initializeDefaultStorage(defaultStorage), defaultStorage.getItem(name)),
940
- setItem: (name, value) => {
941
- initializeDefaultStorage(defaultStorage), defaultStorage.setItem(name, value);
942
- }
943
- }, debounceMap = {};
944
- function PanelGroupWithForwardedRef({
945
- autoSaveId = null,
946
- children,
947
- className: classNameFromProps = "",
948
- direction,
949
- forwardedRef,
950
- id: idFromProps = null,
951
- onLayout = null,
952
- keyboardResizeBy = null,
953
- storage = defaultStorage,
954
- style: styleFromProps,
955
- tagName: Type = "div",
956
- ...rest
957
- }) {
958
- const groupId = useUniqueId(idFromProps), panelGroupElementRef = useRef(null), [dragState, setDragState] = useState(null), [layout, setLayout] = useState([]), panelIdToLastNotifiedSizeMapRef = useRef({}), panelSizeBeforeCollapseRef = useRef(/* @__PURE__ */ new Map()), prevDeltaRef = useRef(0), committedValuesRef = useRef({
959
- autoSaveId,
960
- direction,
961
- dragState,
962
- id: groupId,
963
- keyboardResizeBy,
964
- onLayout,
965
- storage
966
- }), eagerValuesRef = useRef({
967
- layout,
968
- panelDataArray: [],
969
- panelDataArrayChanged: !1
970
- });
971
- useRef({
972
- didLogIdAndOrderWarning: !1,
973
- didLogPanelConstraintsWarning: !1,
974
- prevPanelIds: []
975
- }), useImperativeHandle(forwardedRef, () => ({
976
- getId: () => committedValuesRef.current.id,
977
- getLayout: () => {
978
- const {
979
- layout: layout2
980
- } = eagerValuesRef.current;
981
- return layout2;
982
- },
983
- setLayout: (unsafeLayout) => {
984
- const {
985
- onLayout: onLayout2
986
- } = committedValuesRef.current, {
987
- layout: prevLayout,
988
- panelDataArray
989
- } = eagerValuesRef.current, safeLayout = validatePanelGroupLayout({
990
- layout: unsafeLayout,
991
- panelConstraints: panelDataArray.map((panelData) => panelData.constraints)
992
- });
993
- areEqual(prevLayout, safeLayout) || (setLayout(safeLayout), eagerValuesRef.current.layout = safeLayout, onLayout2 && onLayout2(safeLayout), callPanelCallbacks(panelDataArray, safeLayout, panelIdToLastNotifiedSizeMapRef.current));
994
- }
995
- }), []), useIsomorphicLayoutEffect(() => {
996
- committedValuesRef.current.autoSaveId = autoSaveId, committedValuesRef.current.direction = direction, committedValuesRef.current.dragState = dragState, committedValuesRef.current.id = groupId, committedValuesRef.current.onLayout = onLayout, committedValuesRef.current.storage = storage;
997
- }), useWindowSplitterPanelGroupBehavior({
998
- committedValuesRef,
999
- eagerValuesRef,
1000
- groupId,
1001
- layout,
1002
- panelDataArray: eagerValuesRef.current.panelDataArray,
1003
- setLayout,
1004
- panelGroupElement: panelGroupElementRef.current
1005
- }), useEffect(() => {
1006
- const {
1007
- panelDataArray
1008
- } = eagerValuesRef.current;
1009
- if (autoSaveId) {
1010
- if (layout.length === 0 || layout.length !== panelDataArray.length)
1011
- return;
1012
- let debouncedSave = debounceMap[autoSaveId];
1013
- debouncedSave == null && (debouncedSave = debounce(savePanelGroupState, LOCAL_STORAGE_DEBOUNCE_INTERVAL), debounceMap[autoSaveId] = debouncedSave);
1014
- const clonedPanelDataArray = [...panelDataArray], clonedPanelSizesBeforeCollapse = new Map(panelSizeBeforeCollapseRef.current);
1015
- debouncedSave(autoSaveId, clonedPanelDataArray, clonedPanelSizesBeforeCollapse, layout, storage);
1016
- }
1017
- }, [autoSaveId, layout, storage]), useEffect(() => {
1018
- });
1019
- const collapsePanel = useCallback((panelData) => {
1020
- const {
1021
- onLayout: onLayout2
1022
- } = committedValuesRef.current, {
1023
- layout: prevLayout,
1024
- panelDataArray
1025
- } = eagerValuesRef.current;
1026
- if (panelData.constraints.collapsible) {
1027
- const panelConstraintsArray = panelDataArray.map((panelData2) => panelData2.constraints), {
1028
- collapsedSize = 0,
1029
- panelSize,
1030
- pivotIndices
1031
- } = panelDataHelper(panelDataArray, panelData, prevLayout);
1032
- if (assert(panelSize != null, `Panel size not found for panel "${panelData.id}"`), !fuzzyNumbersEqual$1(panelSize, collapsedSize)) {
1033
- panelSizeBeforeCollapseRef.current.set(panelData.id, panelSize);
1034
- const delta = findPanelDataIndex(panelDataArray, panelData) === panelDataArray.length - 1 ? panelSize - collapsedSize : collapsedSize - panelSize, nextLayout = adjustLayoutByDelta({
1035
- delta,
1036
- initialLayout: prevLayout,
1037
- panelConstraints: panelConstraintsArray,
1038
- pivotIndices,
1039
- prevLayout,
1040
- trigger: "imperative-api"
1041
- });
1042
- compareLayouts(prevLayout, nextLayout) || (setLayout(nextLayout), eagerValuesRef.current.layout = nextLayout, onLayout2 && onLayout2(nextLayout), callPanelCallbacks(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current));
1043
- }
1044
- }
1045
- }, []), expandPanel = useCallback((panelData, minSizeOverride) => {
1046
- const {
1047
- onLayout: onLayout2
1048
- } = committedValuesRef.current, {
1049
- layout: prevLayout,
1050
- panelDataArray
1051
- } = eagerValuesRef.current;
1052
- if (panelData.constraints.collapsible) {
1053
- const panelConstraintsArray = panelDataArray.map((panelData2) => panelData2.constraints), {
1054
- collapsedSize = 0,
1055
- panelSize = 0,
1056
- minSize: minSizeFromProps = 0,
1057
- pivotIndices
1058
- } = panelDataHelper(panelDataArray, panelData, prevLayout), minSize = minSizeOverride ?? minSizeFromProps;
1059
- if (fuzzyNumbersEqual$1(panelSize, collapsedSize)) {
1060
- const prevPanelSize = panelSizeBeforeCollapseRef.current.get(panelData.id), baseSize = prevPanelSize != null && prevPanelSize >= minSize ? prevPanelSize : minSize, delta = findPanelDataIndex(panelDataArray, panelData) === panelDataArray.length - 1 ? panelSize - baseSize : baseSize - panelSize, nextLayout = adjustLayoutByDelta({
1061
- delta,
1062
- initialLayout: prevLayout,
1063
- panelConstraints: panelConstraintsArray,
1064
- pivotIndices,
1065
- prevLayout,
1066
- trigger: "imperative-api"
1067
- });
1068
- compareLayouts(prevLayout, nextLayout) || (setLayout(nextLayout), eagerValuesRef.current.layout = nextLayout, onLayout2 && onLayout2(nextLayout), callPanelCallbacks(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current));
1069
- }
1070
- }
1071
- }, []), getPanelSize = useCallback((panelData) => {
1072
- const {
1073
- layout: layout2,
1074
- panelDataArray
1075
- } = eagerValuesRef.current, {
1076
- panelSize
1077
- } = panelDataHelper(panelDataArray, panelData, layout2);
1078
- return assert(panelSize != null, `Panel size not found for panel "${panelData.id}"`), panelSize;
1079
- }, []), getPanelStyle = useCallback((panelData, defaultSize) => {
1080
- const {
1081
- panelDataArray
1082
- } = eagerValuesRef.current, panelIndex = findPanelDataIndex(panelDataArray, panelData);
1083
- return computePanelFlexBoxStyle({
1084
- defaultSize,
1085
- dragState,
1086
- layout,
1087
- panelData: panelDataArray,
1088
- panelIndex
1089
- });
1090
- }, [dragState, layout]), isPanelCollapsed = useCallback((panelData) => {
1091
- const {
1092
- layout: layout2,
1093
- panelDataArray
1094
- } = eagerValuesRef.current, {
1095
- collapsedSize = 0,
1096
- collapsible,
1097
- panelSize
1098
- } = panelDataHelper(panelDataArray, panelData, layout2);
1099
- return assert(panelSize != null, `Panel size not found for panel "${panelData.id}"`), collapsible === !0 && fuzzyNumbersEqual$1(panelSize, collapsedSize);
1100
- }, []), isPanelExpanded = useCallback((panelData) => {
1101
- const {
1102
- layout: layout2,
1103
- panelDataArray
1104
- } = eagerValuesRef.current, {
1105
- collapsedSize = 0,
1106
- collapsible,
1107
- panelSize
1108
- } = panelDataHelper(panelDataArray, panelData, layout2);
1109
- return assert(panelSize != null, `Panel size not found for panel "${panelData.id}"`), !collapsible || fuzzyCompareNumbers(panelSize, collapsedSize) > 0;
1110
- }, []), registerPanel = useCallback((panelData) => {
1111
- const {
1112
- panelDataArray
1113
- } = eagerValuesRef.current;
1114
- panelDataArray.push(panelData), panelDataArray.sort((panelA, panelB) => {
1115
- const orderA = panelA.order, orderB = panelB.order;
1116
- return orderA == null && orderB == null ? 0 : orderA == null ? -1 : orderB == null ? 1 : orderA - orderB;
1117
- }), eagerValuesRef.current.panelDataArrayChanged = !0;
1118
- }, []);
1119
- useIsomorphicLayoutEffect(() => {
1120
- if (eagerValuesRef.current.panelDataArrayChanged) {
1121
- eagerValuesRef.current.panelDataArrayChanged = !1;
1122
- const {
1123
- autoSaveId: autoSaveId2,
1124
- onLayout: onLayout2,
1125
- storage: storage2
1126
- } = committedValuesRef.current, {
1127
- layout: prevLayout,
1128
- panelDataArray
1129
- } = eagerValuesRef.current;
1130
- let unsafeLayout = null;
1131
- if (autoSaveId2) {
1132
- const state = loadPanelGroupState(autoSaveId2, panelDataArray, storage2);
1133
- state && (panelSizeBeforeCollapseRef.current = new Map(Object.entries(state.expandToSizes)), unsafeLayout = state.layout);
1134
- }
1135
- unsafeLayout == null && (unsafeLayout = calculateUnsafeDefaultLayout({
1136
- panelDataArray
1137
- }));
1138
- const nextLayout = validatePanelGroupLayout({
1139
- layout: unsafeLayout,
1140
- panelConstraints: panelDataArray.map((panelData) => panelData.constraints)
1141
- });
1142
- areEqual(prevLayout, nextLayout) || (setLayout(nextLayout), eagerValuesRef.current.layout = nextLayout, onLayout2 && onLayout2(nextLayout), callPanelCallbacks(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current));
1143
- }
1144
- }), useIsomorphicLayoutEffect(() => {
1145
- const eagerValues = eagerValuesRef.current;
1146
- return () => {
1147
- eagerValues.layout = [];
1148
- };
1149
- }, []);
1150
- const registerResizeHandle2 = useCallback((dragHandleId) => function(event) {
1151
- event.preventDefault();
1152
- const panelGroupElement = panelGroupElementRef.current;
1153
- if (!panelGroupElement)
1154
- return () => null;
1155
- const {
1156
- direction: direction2,
1157
- dragState: dragState2,
1158
- id: groupId2,
1159
- keyboardResizeBy: keyboardResizeBy2,
1160
- onLayout: onLayout2
1161
- } = committedValuesRef.current, {
1162
- layout: prevLayout,
1163
- panelDataArray
1164
- } = eagerValuesRef.current, {
1165
- initialLayout
1166
- } = dragState2 ?? {}, pivotIndices = determinePivotIndices(groupId2, dragHandleId, panelGroupElement);
1167
- let delta = calculateDeltaPercentage(event, dragHandleId, direction2, dragState2, keyboardResizeBy2, panelGroupElement);
1168
- if (delta === 0)
1169
- return;
1170
- const isHorizontal = direction2 === "horizontal";
1171
- document.dir === "rtl" && isHorizontal && (delta = -delta);
1172
- const panelConstraints = panelDataArray.map((panelData) => panelData.constraints), nextLayout = adjustLayoutByDelta({
1173
- delta,
1174
- initialLayout: initialLayout ?? prevLayout,
1175
- panelConstraints,
1176
- pivotIndices,
1177
- prevLayout,
1178
- trigger: isKeyDown(event) ? "keyboard" : "mouse-or-touch"
1179
- }), layoutChanged = !compareLayouts(prevLayout, nextLayout);
1180
- (isPointerEvent(event) || isMouseEvent(event)) && prevDeltaRef.current != delta && (prevDeltaRef.current = delta, layoutChanged ? reportConstraintsViolation(dragHandleId, 0) : isHorizontal ? reportConstraintsViolation(dragHandleId, delta < 0 ? EXCEEDED_HORIZONTAL_MIN : EXCEEDED_HORIZONTAL_MAX) : reportConstraintsViolation(dragHandleId, delta < 0 ? EXCEEDED_VERTICAL_MIN : EXCEEDED_VERTICAL_MAX)), layoutChanged && (setLayout(nextLayout), eagerValuesRef.current.layout = nextLayout, onLayout2 && onLayout2(nextLayout), callPanelCallbacks(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current));
1181
- }, []), resizePanel2 = useCallback((panelData, unsafePanelSize) => {
1182
- const {
1183
- onLayout: onLayout2
1184
- } = committedValuesRef.current, {
1185
- layout: prevLayout,
1186
- panelDataArray
1187
- } = eagerValuesRef.current, panelConstraintsArray = panelDataArray.map((panelData2) => panelData2.constraints), {
1188
- panelSize,
1189
- pivotIndices
1190
- } = panelDataHelper(panelDataArray, panelData, prevLayout);
1191
- assert(panelSize != null, `Panel size not found for panel "${panelData.id}"`);
1192
- const delta = findPanelDataIndex(panelDataArray, panelData) === panelDataArray.length - 1 ? panelSize - unsafePanelSize : unsafePanelSize - panelSize, nextLayout = adjustLayoutByDelta({
1193
- delta,
1194
- initialLayout: prevLayout,
1195
- panelConstraints: panelConstraintsArray,
1196
- pivotIndices,
1197
- prevLayout,
1198
- trigger: "imperative-api"
1199
- });
1200
- compareLayouts(prevLayout, nextLayout) || (setLayout(nextLayout), eagerValuesRef.current.layout = nextLayout, onLayout2 && onLayout2(nextLayout), callPanelCallbacks(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current));
1201
- }, []), reevaluatePanelConstraints = useCallback((panelData, prevConstraints) => {
1202
- const {
1203
- layout: layout2,
1204
- panelDataArray
1205
- } = eagerValuesRef.current, {
1206
- collapsedSize: prevCollapsedSize = 0,
1207
- collapsible: prevCollapsible
1208
- } = prevConstraints, {
1209
- collapsedSize: nextCollapsedSize = 0,
1210
- collapsible: nextCollapsible,
1211
- maxSize: nextMaxSize = 100,
1212
- minSize: nextMinSize = 0
1213
- } = panelData.constraints, {
1214
- panelSize: prevPanelSize
1215
- } = panelDataHelper(panelDataArray, panelData, layout2);
1216
- prevPanelSize != null && (prevCollapsible && nextCollapsible && fuzzyNumbersEqual$1(prevPanelSize, prevCollapsedSize) ? fuzzyNumbersEqual$1(prevCollapsedSize, nextCollapsedSize) || resizePanel2(panelData, nextCollapsedSize) : prevPanelSize < nextMinSize ? resizePanel2(panelData, nextMinSize) : prevPanelSize > nextMaxSize && resizePanel2(panelData, nextMaxSize));
1217
- }, [resizePanel2]), startDragging = useCallback((dragHandleId, event) => {
1218
- const {
1219
- direction: direction2
1220
- } = committedValuesRef.current, {
1221
- layout: layout2
1222
- } = eagerValuesRef.current;
1223
- if (!panelGroupElementRef.current)
1224
- return;
1225
- const handleElement = getResizeHandleElement(dragHandleId, panelGroupElementRef.current);
1226
- assert(handleElement, `Drag handle element not found for id "${dragHandleId}"`);
1227
- const initialCursorPosition = getResizeEventCursorPosition(direction2, event);
1228
- setDragState({
1229
- dragHandleId,
1230
- dragHandleRect: handleElement.getBoundingClientRect(),
1231
- initialCursorPosition,
1232
- initialLayout: layout2
1233
- });
1234
- }, []), stopDragging = useCallback(() => {
1235
- setDragState(null);
1236
- }, []), unregisterPanel = useCallback((panelData) => {
1237
- const {
1238
- panelDataArray
1239
- } = eagerValuesRef.current, index = findPanelDataIndex(panelDataArray, panelData);
1240
- index >= 0 && (panelDataArray.splice(index, 1), delete panelIdToLastNotifiedSizeMapRef.current[panelData.id], eagerValuesRef.current.panelDataArrayChanged = !0);
1241
- }, []), context = useMemo(() => ({
1242
- collapsePanel,
1243
- direction,
1244
- dragState,
1245
- expandPanel,
1246
- getPanelSize,
1247
- getPanelStyle,
1248
- groupId,
1249
- isPanelCollapsed,
1250
- isPanelExpanded,
1251
- reevaluatePanelConstraints,
1252
- registerPanel,
1253
- registerResizeHandle: registerResizeHandle2,
1254
- resizePanel: resizePanel2,
1255
- startDragging,
1256
- stopDragging,
1257
- unregisterPanel,
1258
- panelGroupElement: panelGroupElementRef.current
1259
- }), [collapsePanel, dragState, direction, expandPanel, getPanelSize, getPanelStyle, groupId, isPanelCollapsed, isPanelExpanded, reevaluatePanelConstraints, registerPanel, registerResizeHandle2, resizePanel2, startDragging, stopDragging, unregisterPanel]), style = {
1260
- display: "flex",
1261
- flexDirection: direction === "horizontal" ? "row" : "column",
1262
- height: "100%",
1263
- overflow: "hidden",
1264
- width: "100%"
1265
- };
1266
- return createElement(PanelGroupContext.Provider, {
1267
- value: context
1268
- }, createElement(Type, {
1269
- ...rest,
1270
- children,
1271
- className: classNameFromProps,
1272
- id: idFromProps,
1273
- ref: panelGroupElementRef,
1274
- style: {
1275
- ...style,
1276
- ...styleFromProps
1277
- },
1278
- // CSS selectors
1279
- "data-panel-group": "",
1280
- "data-panel-group-direction": direction,
1281
- "data-panel-group-id": groupId
1282
- }));
1283
- }
1284
- const PanelGroup = forwardRef((props2, ref) => createElement(PanelGroupWithForwardedRef, {
1285
- ...props2,
1286
- forwardedRef: ref
1287
- }));
1288
- PanelGroupWithForwardedRef.displayName = "PanelGroup";
1289
- PanelGroup.displayName = "forwardRef(PanelGroup)";
1290
- function findPanelDataIndex(panelDataArray, panelData) {
1291
- return panelDataArray.findIndex((prevPanelData) => prevPanelData === panelData || prevPanelData.id === panelData.id);
1292
- }
1293
- function panelDataHelper(panelDataArray, panelData, layout) {
1294
- const panelIndex = findPanelDataIndex(panelDataArray, panelData), pivotIndices = panelIndex === panelDataArray.length - 1 ? [panelIndex - 1, panelIndex] : [panelIndex, panelIndex + 1], panelSize = layout[panelIndex];
1295
- return {
1296
- ...panelData.constraints,
1297
- panelSize,
1298
- pivotIndices
1299
- };
1300
- }
1301
- function useWindowSplitterResizeHandlerBehavior({
1302
- disabled,
1303
- handleId,
1304
- resizeHandler,
1305
- panelGroupElement
1306
- }) {
1307
- useEffect(() => {
1308
- if (disabled || resizeHandler == null || panelGroupElement == null)
1309
- return;
1310
- const handleElement = getResizeHandleElement(handleId, panelGroupElement);
1311
- if (handleElement == null)
1312
- return;
1313
- const onKeyDown = (event) => {
1314
- if (!event.defaultPrevented)
1315
- switch (event.key) {
1316
- case "ArrowDown":
1317
- case "ArrowLeft":
1318
- case "ArrowRight":
1319
- case "ArrowUp":
1320
- case "End":
1321
- case "Home": {
1322
- event.preventDefault(), resizeHandler(event);
1323
- break;
1324
- }
1325
- case "F6": {
1326
- event.preventDefault();
1327
- const groupId = handleElement.getAttribute("data-panel-group-id");
1328
- assert(groupId, `No group element found for id "${groupId}"`);
1329
- const handles = getResizeHandleElementsForGroup(groupId, panelGroupElement), index = getResizeHandleElementIndex(groupId, handleId, panelGroupElement);
1330
- assert(index !== null, `No resize element found for id "${handleId}"`);
1331
- const nextIndex = event.shiftKey ? index > 0 ? index - 1 : handles.length - 1 : index + 1 < handles.length ? index + 1 : 0;
1332
- handles[nextIndex].focus();
1333
- break;
1334
- }
1335
- }
1336
- };
1337
- return handleElement.addEventListener("keydown", onKeyDown), () => {
1338
- handleElement.removeEventListener("keydown", onKeyDown);
1339
- };
1340
- }, [panelGroupElement, disabled, handleId, resizeHandler]);
1341
- }
1342
- function PanelResizeHandle({
1343
- children = null,
1344
- className: classNameFromProps = "",
1345
- disabled = !1,
1346
- hitAreaMargins,
1347
- id: idFromProps,
1348
- onDragging,
1349
- style: styleFromProps = {},
1350
- tabIndex = 0,
1351
- tagName: Type = "div",
1352
- ...rest
1353
- }) {
1354
- var _hitAreaMargins$coars, _hitAreaMargins$fine;
1355
- const elementRef = useRef(null), callbacksRef = useRef({
1356
- onDragging
1357
- });
1358
- useEffect(() => {
1359
- callbacksRef.current.onDragging = onDragging;
1360
- });
1361
- const panelGroupContext = useContext(PanelGroupContext);
1362
- if (panelGroupContext === null)
1363
- throw Error("PanelResizeHandle components must be rendered within a PanelGroup container");
1364
- const {
1365
- direction,
1366
- groupId,
1367
- registerResizeHandle: registerResizeHandleWithParentGroup,
1368
- startDragging,
1369
- stopDragging,
1370
- panelGroupElement
1371
- } = panelGroupContext, resizeHandleId = useUniqueId(idFromProps), [state, setState] = useState("inactive"), [isFocused, setIsFocused] = useState(!1), [resizeHandler, setResizeHandler] = useState(null), committedValuesRef = useRef({
1372
- state
1373
- });
1374
- useIsomorphicLayoutEffect(() => {
1375
- committedValuesRef.current.state = state;
1376
- }), useEffect(() => {
1377
- if (disabled)
1378
- setResizeHandler(null);
1379
- else {
1380
- const resizeHandler2 = registerResizeHandleWithParentGroup(resizeHandleId);
1381
- setResizeHandler(() => resizeHandler2);
1382
- }
1383
- }, [disabled, resizeHandleId, registerResizeHandleWithParentGroup]);
1384
- const coarseHitAreaMargins = (_hitAreaMargins$coars = hitAreaMargins?.coarse) !== null && _hitAreaMargins$coars !== void 0 ? _hitAreaMargins$coars : 15, fineHitAreaMargins = (_hitAreaMargins$fine = hitAreaMargins?.fine) !== null && _hitAreaMargins$fine !== void 0 ? _hitAreaMargins$fine : 5;
1385
- return useEffect(() => {
1386
- if (disabled || resizeHandler == null)
1387
- return;
1388
- const element = elementRef.current;
1389
- return assert(element, "Element ref not attached"), registerResizeHandle(resizeHandleId, element, direction, {
1390
- coarse: coarseHitAreaMargins,
1391
- fine: fineHitAreaMargins
1392
- }, (action, isActive, event) => {
1393
- if (isActive)
1394
- switch (action) {
1395
- case "down": {
1396
- setState("drag"), startDragging(resizeHandleId, event);
1397
- const {
1398
- onDragging: onDragging2
1399
- } = callbacksRef.current;
1400
- onDragging2 && onDragging2(!0);
1401
- break;
1402
- }
1403
- case "move": {
1404
- const {
1405
- state: state2
1406
- } = committedValuesRef.current;
1407
- state2 !== "drag" && setState("hover"), resizeHandler(event);
1408
- break;
1409
- }
1410
- case "up": {
1411
- setState("hover"), stopDragging();
1412
- const {
1413
- onDragging: onDragging2
1414
- } = callbacksRef.current;
1415
- onDragging2 && onDragging2(!1);
1416
- break;
1417
- }
1418
- }
1419
- else
1420
- setState("inactive");
1421
- });
1422
- }, [coarseHitAreaMargins, direction, disabled, fineHitAreaMargins, registerResizeHandleWithParentGroup, resizeHandleId, resizeHandler, startDragging, stopDragging]), useWindowSplitterResizeHandlerBehavior({
1423
- disabled,
1424
- handleId: resizeHandleId,
1425
- resizeHandler,
1426
- panelGroupElement
1427
- }), createElement(Type, {
1428
- ...rest,
1429
- children,
1430
- className: classNameFromProps,
1431
- id: idFromProps,
1432
- onBlur: () => setIsFocused(!1),
1433
- onFocus: () => setIsFocused(!0),
1434
- ref: elementRef,
1435
- role: "separator",
1436
- style: {
1437
- ...{
1438
- touchAction: "none",
1439
- userSelect: "none"
1440
- },
1441
- ...styleFromProps
1442
- },
1443
- tabIndex,
1444
- // CSS selectors
1445
- "data-panel-group-direction": direction,
1446
- "data-panel-group-id": groupId,
1447
- "data-resize-handle": "",
1448
- "data-resize-handle-active": state === "drag" ? "pointer" : isFocused ? "keyboard" : void 0,
1449
- "data-resize-handle-state": state,
1450
- "data-panel-resize-handle-enabled": !disabled,
1451
- "data-panel-resize-handle-id": resizeHandleId
1452
- });
1453
- }
1454
- PanelResizeHandle.displayName = "PanelResizeHandle";
1455
- function CopyButton({ text }) {
1456
- return /* @__PURE__ */ jsxRuntimeExports.jsx(CopyButton$1, { value: text, timeout: 2e3, children: ({ copied, copy }) => /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { label: copied ? "Copied" : "Copy", withArrow: !0, position: "right", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ActionIcon, { color: copied ? "teal" : "gray", variant: copied ? "light" : "subtle", onClick: copy, children: copied ? /* @__PURE__ */ jsxRuntimeExports.jsx(IconCheck, { style: { width: rem(16) } }) : /* @__PURE__ */ jsxRuntimeExports.jsx(IconCopy, { style: { width: rem(16) } }) }) }) });
1457
- }
1458
- function CopyToClipboard({ text }) {
1459
- return /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { pos: "absolute", top: "0", right: "0", p: "4", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CopyButton, { text }) });
1460
- }
1461
- var cssScrollArea = "_5k2wbq0", cssCodeBlock = "_5k2wbq1";
1462
- export {
1463
- CopyToClipboard as C,
1464
- PanelGroup as P,
1465
- Panel as a,
1466
- cssCodeBlock as b,
1467
- cssScrollArea as c,
1468
- PanelResizeHandle as d
1469
- };