react-panel-layout 0.2.0 → 0.4.1

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,1295 +0,0 @@
1
- import { jsxs as _, Fragment as O, jsx as w } from "react/jsx-runtime";
2
- import * as a from "react";
3
- import { o as xt, p as kt, q as Tt, r as It, s as Ht, t as At, u as _t, v as $t, G as W, w as y, C as Nt, a as Gt, b as Ot, R as ct, x as Wt, y as K } from "./styles-BnvLfp6e.js";
4
- import { createPortal as Ft } from "react-dom";
5
- const Bt = () => {
6
- const t = /* @__PURE__ */ new Map();
7
- return (e) => {
8
- if (!e)
9
- return;
10
- const n = t.get(e);
11
- if (n !== void 0)
12
- return n;
13
- const o = t.size;
14
- return t.set(e, o), o;
15
- };
16
- }, Yt = Bt(), q = /* @__PURE__ */ new Map(), Xt = (t) => {
17
- const e = `ovs-threshold:${t.threshold}-rootMargin:${t.rootMargin}-root:${Yt(t.root)}`;
18
- if (q.has(e))
19
- return q.get(e);
20
- const n = new class {
21
- #t = /* @__PURE__ */ new Map();
22
- #e = new IntersectionObserver((o) => {
23
- o.forEach((r) => {
24
- const s = this.#t.get(r.target);
25
- s && s(r);
26
- });
27
- }, t);
28
- observe(o, r) {
29
- return this.#t.set(o, r), this.#e.observe(o), () => {
30
- this.#t.delete(o), this.#e.unobserve(o);
31
- };
32
- }
33
- }();
34
- return q.set(e, n), n;
35
- }, ut = Object.freeze({
36
- x: 0,
37
- y: 0,
38
- width: 0,
39
- height: 0,
40
- top: 0,
41
- right: 0,
42
- bottom: 0,
43
- left: 0
44
- });
45
- function Ut(t, { threshold: e = 0, rootMargin: n = "0px", root: o = null }) {
46
- const [r, s] = a.useState(null);
47
- return a.useEffect(() => {
48
- const c = t.current;
49
- return c ? Xt({
50
- threshold: e,
51
- rootMargin: n,
52
- root: o
53
- }).observe(c, (i) => {
54
- s({
55
- isIntersecting: i.isIntersecting,
56
- boundingClientRect: i.boundingClientRect,
57
- intersectionRatio: i.intersectionRatio,
58
- intersectionRect: i.intersectionRect,
59
- rootBounds: i.rootBounds,
60
- target: i.target,
61
- time: i.time
62
- });
63
- }) : void 0;
64
- }, [t, e, n, o]), a.useMemo(() => ({
65
- isIntersecting: r?.isIntersecting ?? !1,
66
- boundingClientRect: r?.boundingClientRect ?? ut,
67
- intersectionRatio: r?.intersectionRatio ?? 0,
68
- intersectionRect: r?.intersectionRect ?? ut,
69
- rootBounds: r?.rootBounds ?? null,
70
- target: r?.target ?? t.current,
71
- time: r?.time ?? 0
72
- }), [r, t]);
73
- }
74
- const jt = {
75
- position: "fixed",
76
- inset: 0,
77
- background: "rgba(0, 0, 0, 0.5)"
78
- }, Zt = {
79
- position: "fixed",
80
- background: kt,
81
- boxShadow: xt,
82
- willChange: "transform"
83
- }, Vt = {
84
- left: {
85
- top: 0,
86
- bottom: 0,
87
- left: 0,
88
- transform: "translateX(-100%)"
89
- },
90
- right: {
91
- top: 0,
92
- bottom: 0,
93
- right: 0,
94
- transform: "translateX(100%)"
95
- },
96
- top: {
97
- top: 0,
98
- left: 0,
99
- right: 0,
100
- transform: "translateY(-100%)"
101
- },
102
- bottom: {
103
- bottom: 0,
104
- left: 0,
105
- right: 0,
106
- transform: "translateY(100%)"
107
- }
108
- }, Kt = {
109
- display: "flex",
110
- alignItems: "center",
111
- padding: `${At} ${_t}`,
112
- gap: Ht,
113
- borderBottom: `1px solid ${It}`
114
- }, qt = {
115
- fontWeight: 600
116
- }, Jt = {
117
- marginLeft: "auto",
118
- border: "none",
119
- background: "transparent",
120
- cursor: "pointer",
121
- fontSize: $t
122
- }, Qt = {
123
- padding: Tt
124
- }, te = a.memo(({ style: t, dismissible: e, onClose: n }) => {
125
- const o = e ? n : void 0, r = a.useMemo(() => ({ ...jt, ...t }), [t]);
126
- return /* @__PURE__ */ w("div", { style: r, onClick: o });
127
- }), ee = a.memo(({ header: t, dismissible: e, onClose: n }) => {
128
- if (!t)
129
- return null;
130
- const o = t.showCloseButton ?? !0, r = () => t.title ? /* @__PURE__ */ w("div", { style: qt, children: t.title }) : null, s = () => !o || !e ? null : /* @__PURE__ */ w("button", { style: Jt, onClick: n, "aria-label": "Close drawer", type: "button", children: "×" });
131
- return /* @__PURE__ */ _("div", { style: Kt, children: [
132
- r(),
133
- s()
134
- ] });
135
- }), ne = ({
136
- id: t,
137
- config: e,
138
- isOpen: n,
139
- onClose: o,
140
- children: r,
141
- className: s,
142
- style: c,
143
- zIndex: u,
144
- width: i,
145
- height: f,
146
- position: d,
147
- backdropStyle: p
148
- }) => {
149
- const { dismissible: h = !0, header: v } = e, P = a.useCallback((z) => z ? z.left !== void 0 ? "left" : z.right !== void 0 ? "right" : z.top !== void 0 ? "top" : z.bottom !== void 0 ? "bottom" : "right" : "right", [])(d), M = a.useMemo(() => {
150
- const z = {
151
- ...Zt,
152
- ...Vt[P],
153
- ...c
154
- };
155
- return u !== void 0 && (z.zIndex = u), i !== void 0 && (z.width = typeof i == "number" ? `${i}px` : i), f !== void 0 && (z.height = typeof f == "number" ? `${f}px` : f), z;
156
- }, [c, u, i, f, P]), x = v ? Qt : void 0, $ = () => v ? /* @__PURE__ */ w(ee, { header: v, dismissible: h, onClose: o }) : null;
157
- return /* @__PURE__ */ _(O, { children: [
158
- p ? /* @__PURE__ */ w(a.Activity, { mode: n ? "visible" : "hidden", children: /* @__PURE__ */ w(te, { style: p, dismissible: h, onClose: o }) }) : null,
159
- /* @__PURE__ */ w(a.Activity, { mode: n ? "visible" : "hidden", children: /* @__PURE__ */ _(
160
- "div",
161
- {
162
- className: s,
163
- "data-layer-id": t,
164
- "data-placement": P,
165
- style: M,
166
- role: "dialog",
167
- "aria-modal": h ? !0 : void 0,
168
- "aria-hidden": n ? void 0 : !0,
169
- "aria-label": v?.title ?? "Drawer",
170
- children: [
171
- $(),
172
- /* @__PURE__ */ w("div", { style: x, children: r })
173
- ]
174
- }
175
- ) })
176
- ] });
177
- };
178
- function T(t) {
179
- const e = a.useRef(t);
180
- return e.current = t, a.useCallback((...n) => {
181
- const o = e.current;
182
- if (o)
183
- return o(...n);
184
- }, []);
185
- }
186
- const re = (t) => {
187
- const [e, n] = a.useState(() => {
188
- const i = {};
189
- return t.forEach((f) => {
190
- f.drawer && (i[f.id] = f.drawer.defaultOpen ?? !1);
191
- }), i;
192
- }), o = a.useMemo(() => {
193
- const i = /* @__PURE__ */ new Map();
194
- return t.forEach((f) => {
195
- i.set(f.id, f);
196
- }), i;
197
- }, [t]), r = T((i, f) => {
198
- o.get(i)?.drawer?.onStateChange?.(f);
199
- }), s = a.useCallback(
200
- (i) => {
201
- const f = o.get(i);
202
- return f?.drawer ? f.drawer.open !== void 0 ? f.drawer.open : e[i] ?? !1 : !1;
203
- },
204
- [o, e]
205
- ), c = a.useCallback(
206
- (i) => {
207
- const f = o.get(i);
208
- if (f?.drawer) {
209
- if (f.drawer.open !== void 0) {
210
- r(i, !0);
211
- return;
212
- }
213
- n((d) => d[i] ? d : (r(i, !0), { ...d, [i]: !0 }));
214
- }
215
- },
216
- [o, r]
217
- ), u = a.useCallback(
218
- (i) => {
219
- const f = o.get(i);
220
- if (f?.drawer) {
221
- if (f.drawer.open !== void 0) {
222
- r(i, !1);
223
- return;
224
- }
225
- n((d) => d[i] ? (r(i, !1), { ...d, [i]: !1 }) : d);
226
- }
227
- },
228
- [o, r]
229
- );
230
- return {
231
- state: s,
232
- open: c,
233
- close: u
234
- };
235
- }, oe = ({ layers: t }) => {
236
- const e = re(t), n = a.useMemo(() => t.filter((r) => r.drawer), [t]), o = a.useMemo(() => {
237
- const r = /* @__PURE__ */ new Map();
238
- return n.forEach((s) => {
239
- r.set(s.id, () => e.close(s.id));
240
- }), r;
241
- }, [n, e.close]);
242
- return /* @__PURE__ */ w(O, { children: n.map((r) => {
243
- if (!r.drawer)
244
- return null;
245
- const s = e.state(r.id), c = o.get(r.id);
246
- return c ? /* @__PURE__ */ w(
247
- ne,
248
- {
249
- id: r.id,
250
- config: r.drawer,
251
- isOpen: s,
252
- onClose: c,
253
- style: r.style,
254
- zIndex: r.zIndex,
255
- width: r.width,
256
- height: r.height,
257
- position: r.position,
258
- backdropStyle: r.backdropStyle,
259
- children: r.component
260
- },
261
- r.id
262
- ) : null;
263
- }) });
264
- }, zt = a.createContext(null), se = ({ value: t, children: e }) => /* @__PURE__ */ w(zt.Provider, { value: t, children: e }), ie = () => {
265
- const t = a.useContext(zt);
266
- if (!t)
267
- throw new Error("useGridLayoutContext must be used within a GridLayoutProvider.");
268
- return t;
269
- }, Ct = a.createContext(null), ae = () => {
270
- const t = a.useContext(Ct);
271
- if (!t)
272
- throw new Error("usePanelSystem must be used within a PanelSystemProvider.");
273
- return t;
274
- }, ce = ({ config: t, layers: e, style: n, children: o }) => {
275
- const r = a.useMemo(() => {
276
- const c = /* @__PURE__ */ new Map();
277
- return e.forEach((u) => {
278
- c.set(u.id, u);
279
- }), c;
280
- }, [e]), s = a.useMemo(
281
- () => ({
282
- config: t,
283
- style: n,
284
- layers: {
285
- defs: e,
286
- layerById: r
287
- }
288
- }),
289
- [t, n, e, r]
290
- );
291
- return /* @__PURE__ */ w(Ct.Provider, { value: s, children: o });
292
- }, Rt = a.createContext(null), Pt = ({ layerId: t, children: e }) => {
293
- const n = a.useMemo(() => ({ layerId: t }), [t]);
294
- return /* @__PURE__ */ w(Rt.Provider, { value: n, children: e });
295
- }, Sn = () => {
296
- const t = a.useContext(Rt);
297
- if (!t)
298
- throw new Error("useLayerInstance must be used within a LayerInstanceProvider.");
299
- return t;
300
- }, lt = (t, e, n) => {
301
- if (typeof t == "number" && Number.isFinite(t))
302
- return t;
303
- throw new Error(`Popup layer "${n}" requires a numeric "${e}" value.`);
304
- }, yt = (t, e) => {
305
- if (!t)
306
- throw new Error(`Popup layer "${e}" must define position (left/top).`);
307
- return {
308
- left: lt(t.left, "left", e),
309
- top: lt(t.top, "top", e)
310
- };
311
- }, F = (t) => `${Math.round(t)}`, A = (t) => {
312
- if (t !== void 0)
313
- return t ? "yes" : "no";
314
- }, ue = (t, e, n, o, r) => {
315
- const s = {}, c = yt(e, t);
316
- if (typeof n != "number" || typeof o != "number")
317
- throw new Error(`Popup layer "${t}" requires numeric width/height.`);
318
- s.width = F(n), s.height = F(o), s.left = F(c.left), s.top = F(c.top);
319
- const u = r?.features;
320
- if (u) {
321
- const i = A(u.toolbar), f = A(u.menubar), d = A(u.location), p = A(u.status), h = A(u.resizable), v = A(u.scrollbars);
322
- i !== void 0 && (s.toolbar = i), f !== void 0 && (s.menubar = f), d !== void 0 && (s.location = d), p !== void 0 && (s.status = p), h !== void 0 && (s.resizable = h), v !== void 0 && (s.scrollbars = v);
323
- }
324
- return Object.entries(s).map(([i, f]) => `${i}=${f}`).join(",");
325
- }, dt = (t, e, n, o, r) => {
326
- const s = yt(n, e);
327
- if (typeof o != "number" || typeof r != "number")
328
- throw new Error(`Popup layer "${e}" requires numeric width/height.`);
329
- t.moveTo(Math.round(s.left), Math.round(s.top)), t.resizeTo(Math.round(o), Math.round(r));
330
- }, le = ({ layer: t }) => {
331
- const e = t.floating;
332
- if (!e)
333
- throw new Error(`Layer "${t.id}" is missing floating configuration required for popup mode.`);
334
- if ((e.mode ?? "embedded") !== "popup")
335
- throw new Error(`PopupLayerPortal received layer "${t.id}" that is not configured for popup mode.`);
336
- const o = a.useRef(null), r = a.useRef(null), [s, c] = a.useState(!1);
337
- return a.useEffect(() => {
338
- if (typeof window > "u")
339
- return;
340
- const u = ue(t.id, t.position, t.width, t.height, e.popup), i = e.popup?.name ?? t.id, f = de(
341
- i,
342
- u,
343
- {
344
- position: t.position,
345
- size: { width: t.width, height: t.height }
346
- },
347
- e.popup
348
- );
349
- if (!f)
350
- throw new Error(`Failed to open popup window for layer "${t.id}".`);
351
- const d = f;
352
- r.current = d, e.popup?.focus !== !1 && d.focus(), d.document.title || (d.document.title = t.id), d.document.body.innerHTML = "";
353
- const p = d.document.createElement("div");
354
- p.dataset.layerId = t.id, d.document.body.appendChild(p), o.current = p, c(!0), dt(d, t.id, t.position, t.width, t.height);
355
- const h = () => {
356
- r.current = null, o.current = null, c(!1);
357
- };
358
- return d.addEventListener("beforeunload", h), () => {
359
- d.removeEventListener("beforeunload", h), e.popup?.closeOnUnmount !== !1 && d.close(), r.current = null, o.current = null, c(!1);
360
- };
361
- }, [
362
- e.popup?.closeOnUnmount,
363
- e.popup?.features?.location,
364
- e.popup?.features?.menubar,
365
- e.popup?.features?.resizable,
366
- e.popup?.features?.scrollbars,
367
- e.popup?.features?.status,
368
- e.popup?.features?.toolbar,
369
- e.popup?.focus,
370
- e.popup?.name,
371
- t.id
372
- ]), a.useEffect(() => {
373
- const u = r.current;
374
- u && dt(u, t.id, t.position, t.width, t.height);
375
- }, [t.position?.left, t.position?.top, t.height, t.width, t.id]), !s || !o.current ? null : Ft(/* @__PURE__ */ w(Pt, { layerId: t.id, children: t.component }), o.current);
376
- }, de = (t, e, n, o) => {
377
- const r = o?.createWindow;
378
- return r ? r({ name: t, features: e, bounds: n }) : window.open("", t, e);
379
- }, Dt = {
380
- position: "absolute",
381
- pointerEvents: "auto",
382
- boxSizing: "border-box",
383
- background: "transparent",
384
- border: "none"
385
- }, fe = {
386
- ...Dt,
387
- width: y,
388
- height: y,
389
- zIndex: 2
390
- }, pe = {
391
- ...Dt,
392
- zIndex: 1
393
- }, ge = {
394
- "top-left": {
395
- top: 0,
396
- left: 0,
397
- transform: "translate(-50%, -50%)",
398
- cursor: "nwse-resize"
399
- },
400
- "top-right": {
401
- top: 0,
402
- right: 0,
403
- transform: "translate(50%, -50%)",
404
- cursor: "nesw-resize"
405
- },
406
- "bottom-left": {
407
- bottom: 0,
408
- left: 0,
409
- transform: "translate(-50%, 50%)",
410
- cursor: "nesw-resize"
411
- },
412
- "bottom-right": {
413
- bottom: 0,
414
- right: 0,
415
- transform: "translate(50%, 50%)",
416
- cursor: "nwse-resize"
417
- }
418
- }, he = {
419
- left: {
420
- top: y,
421
- bottom: y,
422
- left: 0,
423
- width: W,
424
- transform: "translateX(-50%)",
425
- cursor: "ew-resize"
426
- },
427
- right: {
428
- top: y,
429
- bottom: y,
430
- right: 0,
431
- width: W,
432
- transform: "translateX(50%)",
433
- cursor: "ew-resize"
434
- },
435
- top: {
436
- left: y,
437
- right: y,
438
- top: 0,
439
- height: W,
440
- transform: "translateY(-50%)",
441
- cursor: "ns-resize"
442
- },
443
- bottom: {
444
- left: y,
445
- right: y,
446
- bottom: 0,
447
- height: W,
448
- transform: "translateY(50%)",
449
- cursor: "ns-resize"
450
- }
451
- }, me = [
452
- { key: "top-left", variant: "corner", horizontal: "left", vertical: "top" },
453
- { key: "top-right", variant: "corner", horizontal: "right", vertical: "top" },
454
- { key: "bottom-left", variant: "corner", horizontal: "left", vertical: "bottom" },
455
- { key: "bottom-right", variant: "corner", horizontal: "right", vertical: "bottom" },
456
- { key: "left", variant: "edge", horizontal: "left" },
457
- { key: "right", variant: "edge", horizontal: "right" },
458
- { key: "top", variant: "edge", vertical: "top" },
459
- { key: "bottom", variant: "edge", vertical: "bottom" }
460
- ], we = ({ layerId: t, onPointerDown: e }) => /* @__PURE__ */ w(O, { children: me.map((n) => {
461
- const o = n.variant === "corner" ? fe : pe, r = n.variant === "corner" ? ge[n.key] : he[n.key], s = { ...o, ...r }, c = n.variant === "corner" ? { "data-resize-corner": n.key } : { "data-resize-edge": n.key };
462
- return /* @__PURE__ */ w(
463
- "div",
464
- {
465
- role: "presentation",
466
- "aria-hidden": "true",
467
- style: s,
468
- ...c,
469
- "data-layer-id": t,
470
- onPointerDown: (u) => e(n, u)
471
- },
472
- n.key
473
- );
474
- }) }), be = ({ layers: t }) => {
475
- const { handleLayerPointerDown: e, getLayerRenderState: n } = ie(), o = a.useCallback((r) => r.length === 0 ? null : r.map((s) => /* @__PURE__ */ w(we, { layerId: s.layerId, onPointerDown: s.onPointerDown }, s.layerId)), []);
476
- return /* @__PURE__ */ w(O, { children: t.map((r) => {
477
- const s = r.floating?.mode ?? "embedded";
478
- if (r.floating && s === "popup")
479
- return /* @__PURE__ */ w(le, { layer: r }, r.id);
480
- const { style: c, isResizable: u, isResizing: i, onResizeHandlePointerDown: f } = n(r), d = {};
481
- r.gridArea && (d.gridArea = r.gridArea), r.gridRow && (d.gridRow = r.gridRow), r.gridColumn && (d.gridColumn = r.gridColumn);
482
- const h = u ? { ...c, ...d, position: "relative" } : { ...c, ...d }, S = o(u ? [
483
- {
484
- layerId: r.id,
485
- onPointerDown: f
486
- }
487
- ] : []);
488
- return /* @__PURE__ */ _(
489
- "div",
490
- {
491
- "data-layer-id": r.id,
492
- "data-draggable": !!r.floating?.draggable,
493
- "data-resizable": u,
494
- "data-resizing": i,
495
- style: h,
496
- onPointerDown: e,
497
- children: [
498
- /* @__PURE__ */ w(Pt, { layerId: r.id, children: r.component }),
499
- S
500
- ]
501
- },
502
- r.id
503
- );
504
- }) });
505
- };
506
- function J(t, e) {
507
- const n = T(e.onMove), o = T(e.onUp), r = T(e.onCancel);
508
- a.useEffect(() => {
509
- if (t)
510
- return e.onMove && document.addEventListener("pointermove", n, { passive: !1 }), e.onUp && document.addEventListener("pointerup", o), e.onCancel && document.addEventListener("pointercancel", r), () => {
511
- e.onMove && document.removeEventListener("pointermove", n), e.onUp && document.removeEventListener("pointerup", o), e.onCancel && document.removeEventListener("pointercancel", r);
512
- };
513
- }, [t, e.onMove, e.onUp, e.onCancel, n, o, r]);
514
- }
515
- function ve(t, e, n) {
516
- a.useEffect(() => {
517
- const o = t.current;
518
- if (!(!e || !o || n === void 0))
519
- return o.setPointerCapture(n), () => {
520
- o.hasPointerCapture && o.hasPointerCapture(n) && o.releasePointerCapture(n);
521
- };
522
- }, [t, e, n]);
523
- }
524
- function Ee(t, e, n = ["pointerdown", "pointermove", "pointerup"]) {
525
- a.useEffect(() => {
526
- const o = t.current;
527
- if (!e || !o)
528
- return;
529
- const r = (s) => {
530
- s.preventDefault();
531
- };
532
- return n.forEach((s) => {
533
- o.addEventListener(s, r, { passive: !1 });
534
- }), () => {
535
- n.forEach((s) => {
536
- o.removeEventListener(s, r);
537
- });
538
- };
539
- }, [t, e, n]);
540
- }
541
- function Se(t, e, n) {
542
- const { onMove: o, onUp: r, onCancel: s, pointerId: c, capturePointer: u = !0, preventDefaults: i = !0 } = n;
543
- J(e, { onMove: o, onUp: r, onCancel: s }), ve(t, e ? u : !1, c), Ee(t, e ? i : !1);
544
- }
545
- const ze = (t) => {
546
- const e = a.useRef(null), n = a.useRef(null), o = a.useRef(0), [r, s] = a.useState(!1), c = T((p) => {
547
- t.onResize?.(p);
548
- }), u = a.useCallback(
549
- (p) => t.axis === "x" ? p.clientX : p.clientY,
550
- [t.axis]
551
- ), i = a.useCallback(
552
- (p) => {
553
- p.preventDefault(), e.current = p.currentTarget, n.current = p.pointerId, o.current = u(p), s(!0);
554
- },
555
- [u]
556
- ), f = a.useCallback(
557
- (p) => {
558
- const h = u(p), v = h - o.current;
559
- v !== 0 && (o.current = h, c(v));
560
- },
561
- [u, c]
562
- ), d = a.useCallback(() => {
563
- s(!1), n.current = null;
564
- }, []);
565
- return Se(e, r, {
566
- onMove: f,
567
- onUp: d,
568
- pointerId: n.current ?? void 0,
569
- capturePointer: !0,
570
- preventDefaults: !1
571
- }), {
572
- ref: e,
573
- onPointerDown: i,
574
- isDragging: r
575
- };
576
- }, Ce = ({
577
- element: t,
578
- component: e
579
- }) => a.forwardRef(({ children: n, ...o }, r) => t ? a.cloneElement(
580
- t,
581
- { ...o, ref: r },
582
- n ?? t.props.children
583
- ) : e ? /* @__PURE__ */ w(e, { ...o, ref: r, children: n }) : /* @__PURE__ */ w("div", { ...o, ref: r, children: n }));
584
- function Re({
585
- element: t,
586
- component: e
587
- }) {
588
- return a.useMemo(
589
- () => Ce({
590
- element: t,
591
- component: e
592
- }),
593
- [e, t]
594
- );
595
- }
596
- const Pe = {
597
- position: "absolute",
598
- zIndex: Wt
599
- }, ye = {
600
- vertical: {
601
- width: ct,
602
- height: "100%",
603
- top: 0,
604
- cursor: "col-resize"
605
- },
606
- horizontal: {
607
- width: "100%",
608
- height: ct,
609
- left: 0,
610
- cursor: "row-resize"
611
- }
612
- }, De = {
613
- idle: Ot,
614
- hovered: Gt,
615
- dragging: Nt
616
- }, Le = ({
617
- direction: t,
618
- onResize: e,
619
- component: n,
620
- element: o,
621
- children: r
622
- }) => {
623
- const s = t === "vertical" ? "x" : "y", { ref: c, isDragging: u, onPointerDown: i } = ze({ axis: s, onResize: e }), [f, d] = a.useState(!1), p = a.useCallback(() => {
624
- d(!0);
625
- }, []), h = a.useCallback(() => {
626
- d(!1);
627
- }, []), v = Re({
628
- element: o,
629
- component: n
630
- }), S = a.useMemo(() => u ? "dragging" : f ? "hovered" : "idle", [u, f]), P = a.useMemo(() => ({
631
- ...Pe,
632
- ...ye[t],
633
- backgroundColor: De[S],
634
- touchAction: "none"
635
- }), [t, S]);
636
- return /* @__PURE__ */ w(
637
- v,
638
- {
639
- ref: c,
640
- style: P,
641
- role: "separator",
642
- "aria-orientation": t,
643
- "aria-hidden": void 0,
644
- "data-resize-handle": "true",
645
- "data-direction": t,
646
- "data-is-dragging": u ? "true" : void 0,
647
- onPointerDown: i,
648
- onPointerEnter: p,
649
- onPointerLeave: h,
650
- children: r
651
- }
652
- );
653
- }, ft = {
654
- position: "absolute",
655
- pointerEvents: "auto"
656
- }, pt = ({
657
- direction: t,
658
- trackIndex: e,
659
- align: n,
660
- gap: o,
661
- span: r,
662
- onResize: s
663
- }) => {
664
- const c = t === "col" ? "vertical" : "horizontal", u = a.useCallback(
665
- (d) => {
666
- s(t, e, d);
667
- },
668
- [t, e, s]
669
- ), i = a.useMemo(() => t === "col" ? {
670
- gridColumn: `${e + 1} / ${e + 2}`,
671
- gridRow: `${r.start} / ${r.end}`
672
- } : {
673
- gridRow: `${e + 1} / ${e + 2}`,
674
- gridColumn: `${r.start} / ${r.end}`
675
- }, [t, e, r]), f = a.useMemo(() => {
676
- const p = Math.max(0, o) / 2 + K / 2;
677
- return t === "col" ? {
678
- ...ft,
679
- width: K,
680
- height: "100%",
681
- top: 0,
682
- bottom: 0,
683
- ...n === "start" ? { left: -p } : { right: -p }
684
- } : {
685
- ...ft,
686
- width: "100%",
687
- height: K,
688
- left: 0,
689
- right: 0,
690
- ...n === "start" ? { top: -p } : { bottom: -p }
691
- };
692
- }, [n, t, o]);
693
- return /* @__PURE__ */ w("div", { "data-resizable": "true", style: { ...i, position: "relative", pointerEvents: "none" }, children: /* @__PURE__ */ w("div", { "data-direction": c, "data-align": n, "data-handle": "true", style: f, children: /* @__PURE__ */ w(Le, { direction: c, onResize: u }) }) });
694
- }, Me = (t) => {
695
- const e = /* @__PURE__ */ new Map();
696
- t.forEach((o, r) => {
697
- o.forEach((s, c) => {
698
- if (!s || s === ".")
699
- return;
700
- const u = e.get(s);
701
- if (u) {
702
- const f = {
703
- rowStart: Math.min(u.rowStart, r),
704
- rowEnd: Math.max(u.rowEnd, r),
705
- colStart: Math.min(u.colStart, c),
706
- colEnd: Math.max(u.colEnd, c)
707
- };
708
- e.set(s, f);
709
- return;
710
- }
711
- const i = {
712
- rowStart: r,
713
- rowEnd: r,
714
- colStart: c,
715
- colEnd: c
716
- };
717
- e.set(s, i);
718
- });
719
- });
720
- const n = /* @__PURE__ */ new Map();
721
- return e.forEach((o, r) => {
722
- const s = o.rowStart + 1, c = o.rowEnd + 2, u = o.colStart + 1, i = o.colEnd + 2, f = {
723
- gridArea: r,
724
- gridRow: `${s} / ${c}`,
725
- gridColumn: `${u} / ${i}`
726
- };
727
- n.set(r, f);
728
- }), n;
729
- }, xe = (t, e) => {
730
- if ((t.positionMode ?? "grid") !== "grid")
731
- return t;
732
- const o = t.gridArea ?? t.id, r = e.get(o);
733
- if (!r)
734
- return t;
735
- const s = !t.gridArea, c = !t.gridRow, u = !t.gridColumn;
736
- return !s && !c && !u ? t : {
737
- ...t,
738
- gridArea: s ? r.gridArea : t.gridArea,
739
- gridRow: c ? r.gridRow : t.gridRow,
740
- gridColumn: u ? r.gridColumn : t.gridColumn
741
- };
742
- }, ke = (t, e) => {
743
- const n = a.useMemo(() => Me(t.areas), [t.areas]), o = a.useMemo(() => e.map((u) => xe(u, n)), [e, n]), r = a.useMemo(
744
- () => o.filter((u) => u.visible !== !1),
745
- [o]
746
- ), s = a.useMemo(
747
- () => r.filter((u) => !u.drawer),
748
- [r]
749
- ), c = a.useMemo(() => {
750
- const u = /* @__PURE__ */ new Map();
751
- return o.forEach((i) => {
752
- u.set(i.id, i);
753
- }), u;
754
- }, [o]);
755
- return {
756
- normalizedLayers: o,
757
- visibleLayers: r,
758
- regularLayers: s,
759
- layerById: c
760
- };
761
- }, Te = typeof window < "u" && typeof window.document < "u", Lt = Te ? a.useLayoutEffect : a.useEffect, U = (t, e) => `${t}-${e}`, Ie = (t, e, n, o) => {
762
- const r = U(n, o), s = e[r];
763
- return s !== void 0 ? `${s}px` : t.size;
764
- }, gt = (t, e, n) => t.map((o, r) => Ie(o, e, n, r)).join(" "), B = (t, e) => t.reduce((n, o, r) => (o.resizable && o.size.endsWith("px") && (n[U(e, r)] = parseInt(o.size, 10)), n), {}), He = (t, e, n) => {
765
- const o = e !== void 0 ? Math.max(t, e) : t;
766
- return n !== void 0 ? Math.min(o, n) : o;
767
- }, Ae = (t, e, n) => {
768
- const o = t + e;
769
- return He(o, n.minSize, n.maxSize);
770
- }, _e = (t, e, n, o, r) => {
771
- const s = U(t, e);
772
- return (c) => {
773
- const u = Ae(n, o, r);
774
- return { ...c, [s]: u };
775
- };
776
- }, ht = (t, e) => {
777
- const n = t.length, o = [];
778
- for (let c = 0; c < n; c++) {
779
- const u = t[c], i = u[e], f = u[e + 1];
780
- i !== f && o.push(c);
781
- }
782
- if (o.length === 0)
783
- return { start: 1, end: n + 1 };
784
- const r = Math.min(...o), s = Math.max(...o);
785
- return { start: r + 1, end: s + 2 };
786
- }, mt = (t, e) => {
787
- const n = t[e], o = t[e + 1], r = n?.length ?? 0, s = [];
788
- for (let i = 0; i < r; i++) {
789
- const f = n?.[i], d = o?.[i];
790
- f !== d && s.push(i);
791
- }
792
- if (s.length === 0)
793
- return { start: 1, end: r + 1 };
794
- const c = Math.min(...s), u = Math.max(...s);
795
- return { start: c + 1, end: u + 2 };
796
- }, $e = (t, e) => {
797
- if (t.length === 0)
798
- return [];
799
- const n = e.length;
800
- if (t.length === 1)
801
- return t[0]?.resizable ? [{ trackIndex: 0, align: "end", span: { start: 1, end: n + 1 } }] : [];
802
- const o = [];
803
- return Array.from({ length: t.length - 1 }, (s, c) => c).forEach((s) => {
804
- const c = t[s];
805
- if (t[s + 1]?.resizable) {
806
- const i = ht(e, s);
807
- o.push({ trackIndex: s + 1, align: "start", span: i });
808
- return;
809
- }
810
- if (c?.resizable) {
811
- const i = ht(e, s);
812
- o.push({ trackIndex: s, align: "end", span: i });
813
- }
814
- }), o;
815
- }, Ne = (t, e) => {
816
- if (t.length === 0)
817
- return [];
818
- const n = e[0]?.length ?? 0;
819
- if (t.length === 1)
820
- return t[0]?.resizable ? [{ trackIndex: 0, align: "end", span: { start: 1, end: n + 1 } }] : [];
821
- const o = [];
822
- return Array.from({ length: t.length - 1 }, (s, c) => c).forEach((s) => {
823
- const c = t[s];
824
- if (t[s + 1]?.resizable) {
825
- const i = mt(e, s);
826
- o.push({ trackIndex: s + 1, align: "start", span: i });
827
- return;
828
- }
829
- if (c?.resizable) {
830
- const i = mt(e, s);
831
- o.push({ trackIndex: s, align: "end", span: i });
832
- }
833
- }), o;
834
- }, Ge = (t) => {
835
- if (!t)
836
- return { rowGap: 0, columnGap: 0 };
837
- const e = t.split(/\s+/).map((o) => o.trim()).filter(Boolean), n = (o) => {
838
- const r = o.match(/^(-?\d+(?:\.\d+)?)px$/);
839
- return r ? Number.parseFloat(r[1]) : 0;
840
- };
841
- if (e.length === 1) {
842
- const o = n(e[0]);
843
- return { rowGap: o, columnGap: o };
844
- }
845
- return {
846
- rowGap: n(e[0]),
847
- columnGap: n(e[1])
848
- };
849
- }, Oe = (t) => t !== void 0 ? { gap: t } : {}, We = (t, e, n, o) => {
850
- const r = U(n, o), s = t[r];
851
- return s !== void 0 ? s : e.size.endsWith("px") ? Number.parseInt(e.size, 10) : 300;
852
- }, Fe = (t, e) => {
853
- const [n, o] = a.useState(() => ({
854
- ...B(t.columns, "col"),
855
- ...B(t.rows, "row")
856
- }));
857
- Lt(() => {
858
- const d = {
859
- ...B(t.columns, "col"),
860
- ...B(t.rows, "row")
861
- };
862
- o((p) => {
863
- const h = /* @__PURE__ */ new Set([...Object.keys(p), ...Object.keys(d)]);
864
- return Array.from(h).some((S) => p[S] !== d[S]) ? d : p;
865
- });
866
- }, [t.columns, t.rows]);
867
- const r = a.useMemo(() => t.areas.map((d) => `"${d.join(" ")}"`).join(" "), [t.areas]), s = a.useMemo(() => Ge(t.gap), [t.gap]), c = a.useMemo(
868
- () => $e(t.columns, t.areas),
869
- [t.columns, t.areas]
870
- ), u = a.useMemo(
871
- () => Ne(t.rows, t.areas),
872
- [t.rows, t.areas]
873
- ), i = a.useMemo(() => ({
874
- ...t.style,
875
- ...e,
876
- gridTemplateAreas: r,
877
- gridTemplateRows: gt(t.rows, n, "row"),
878
- gridTemplateColumns: gt(t.columns, n, "col"),
879
- ...Oe(t.gap)
880
- }), [r, t.columns, t.gap, t.rows, t.style, e, n]), f = a.useCallback(
881
- (d, p, h) => {
882
- const S = (d === "row" ? t.rows : t.columns)[p];
883
- if (!S || !S.resizable)
884
- return;
885
- const P = We(n, S, d, p);
886
- o(_e(d, p, P, h, S));
887
- },
888
- [t.columns, t.rows, n]
889
- );
890
- return {
891
- columnHandles: c,
892
- rowHandles: u,
893
- gapSizes: s,
894
- gridStyle: i,
895
- handleResize: f
896
- };
897
- }, Be = (t, e = Number.NEGATIVE_INFINITY, n = Number.POSITIVE_INFINITY) => Math.min(Math.max(t, e), n), zn = (t, e) => typeof t != "number" || !Number.isFinite(t) ? e : t, Ye = (t) => t.positionMode ? t.positionMode : t.floating ? (t.floating.mode ?? "embedded") === "embedded" ? "absolute" : "relative" : "grid", Xe = (t) => ({ position: t === "grid" ? "relative" : t }), Ue = (t, e) => e !== "grid" ? {} : {
898
- gridArea: t.gridArea,
899
- gridRow: t.gridRow,
900
- gridColumn: t.gridColumn
901
- }, je = (t) => t ? {
902
- top: t.top,
903
- right: t.right,
904
- bottom: t.bottom,
905
- left: t.left
906
- } : {}, Ze = (t) => t !== void 0 ? { zIndex: t } : {}, Ve = (t, e) => ({
907
- width: t,
908
- height: e
909
- }), Ke = (t, e) => t.pointerEvents !== void 0 ? typeof t.pointerEvents == "boolean" ? { pointerEvents: t.pointerEvents ? "auto" : "none" } : { pointerEvents: t.pointerEvents } : e === "absolute" || e === "fixed" ? { pointerEvents: "auto" } : {}, qe = (t) => t.position, Je = (t) => ({
910
- width: t.width,
911
- height: t.height
912
- }), Qe = (t) => t.zIndex, tn = (t) => {
913
- const e = Ye(t), n = qe(t), o = Je(t), r = Qe(t);
914
- return {
915
- ...t.style,
916
- ...Xe(e),
917
- ...Ue(t, e),
918
- ...je(n),
919
- ...Ze(r),
920
- ...Ve(o.width, o.height),
921
- ...Ke(t, e)
922
- };
923
- }, en = (t) => {
924
- const e = t.floating;
925
- return e ? e.mode ?? "embedded" : null;
926
- }, I = (t) => en(t) !== "embedded" ? null : t.floating ?? null, wt = (t) => t instanceof HTMLElement ? ["INPUT", "TEXTAREA", "SELECT", "BUTTON"].includes(t.tagName) : !1, bt = (t, e, n) => {
927
- const o = e ?? Number.NEGATIVE_INFINITY, r = n ?? Number.POSITIVE_INFINITY;
928
- return Be(t, o, r);
929
- }, vt = (t, e, n) => {
930
- if (typeof t == "number" && Number.isFinite(t))
931
- return t;
932
- throw new Error(
933
- `Floating layer "${n}" must provide a numeric "${e}" value when draggable mode is enabled.`
934
- );
935
- }, Et = (t) => {
936
- if (!I(t))
937
- throw new Error(`Floating layer "${t.id}" is missing floating configuration required for dragging.`);
938
- const n = t.position;
939
- if (!n)
940
- throw new Error(`Floating layer "${t.id}" must define position with left and top values.`);
941
- return {
942
- left: vt(n.left, "left", t.id),
943
- top: vt(n.top, "top", t.id)
944
- };
945
- }, nn = (t) => {
946
- const e = I(t);
947
- return e ? e.constraints ?? {} : {};
948
- }, rn = (t, e, n) => t ? t === "left" ? e - n : e + n : e, on = (t, e, n) => t ? t === "top" ? e - n : e + n : e, sn = (t, e, n) => !t || t === "right" ? e : e + n, an = (t, e, n) => !t || t === "bottom" ? e : e + n, Q = (t, e) => t ? t.dataset.layerId === e ? t : Q(t.parentElement, e) : null, tt = (t, e, n) => !t || n?.(t) ? null : e(t) ? t : tt(t.parentElement, e, n), cn = (t) => t instanceof HTMLElement ? tt(
949
- t,
950
- (e) => e.dataset.dragHandle === "true",
951
- (e) => e.dataset.dragIgnore === "true"
952
- ) : null, St = (t) => t instanceof HTMLElement ? tt(
953
- t,
954
- (e) => e.dataset.resizeCorner !== void 0 || e.dataset.resizeEdge !== void 0
955
- ) !== null : !1, Y = (t) => {
956
- const e = I(t);
957
- return e ? e.resizable === !0 : !1;
958
- }, X = (t) => {
959
- if (!I(t))
960
- return null;
961
- const n = dn(t);
962
- if (!n)
963
- throw new Error(`Floating layer "${t.id}" must define width and height when resizable or draggable.`);
964
- return {
965
- width: n.width,
966
- height: n.height
967
- };
968
- }, un = (t, e, n) => {
969
- const o = t.filter(Y).reduce((p, h) => {
970
- if (n === h.id) {
971
- const S = e[h.id];
972
- if (S)
973
- return p[h.id] = S, p;
974
- }
975
- const v = X(h);
976
- return v && (p[h.id] = v), p;
977
- }, {}), r = Object.keys(e), s = Object.keys(o), c = r.length !== s.length, u = r.some((p) => !Object.prototype.hasOwnProperty.call(o, p)), i = c ? !0 : u, f = s.some((p) => {
978
- const h = e[p], v = o[p];
979
- return !h || !v ? !0 : h.width !== v.width || h.height !== v.height;
980
- });
981
- return {
982
- sizes: o,
983
- changed: i ? !0 : f
984
- };
985
- }, ln = ({
986
- layers: t,
987
- layerById: e
988
- }) => {
989
- const [n, o] = a.useState(null), [r, s] = a.useState(null), [c, u] = a.useState({}), [i, f] = a.useState({}), d = a.useRef(null), p = a.useRef(null), h = T((g, l) => {
990
- e.get(g)?.floating?.onMove?.(l);
991
- }), v = T((g, l) => {
992
- e.get(g)?.floating?.onResize?.(l);
993
- });
994
- Lt(() => {
995
- const { sizes: g, changed: l } = un(t, i, r);
996
- l && f(g);
997
- }, [t, r]);
998
- const S = a.useCallback(
999
- (g, l, m, b) => {
1000
- const E = Et(l), R = c[g] ?? { x: 0, y: 0 }, C = {
1001
- pointerStartX: b.clientX,
1002
- pointerStartY: b.clientY,
1003
- initialTranslationX: R.x,
1004
- initialTranslationY: R.y,
1005
- baseLeft: E.left,
1006
- baseTop: E.top,
1007
- layerId: g,
1008
- pointerId: b.pointerId,
1009
- target: m
1010
- };
1011
- if (C.target.setPointerCapture)
1012
- try {
1013
- C.target.setPointerCapture(C.pointerId);
1014
- } catch {
1015
- }
1016
- d.current = C, o(g);
1017
- },
1018
- [c]
1019
- ), P = a.useCallback(
1020
- (g) => {
1021
- const l = g.target, m = cn(l);
1022
- if (!m)
1023
- return;
1024
- const b = m.closest("[data-layer-id]")?.getAttribute("data-layer-id");
1025
- if (!b)
1026
- return;
1027
- const E = e.get(b);
1028
- if (!E)
1029
- return;
1030
- const R = I(E);
1031
- if (!(!R || R.draggable !== !0) && !wt(g.target) && !St(g.target) && m) {
1032
- const C = Q(m, b);
1033
- if (!C)
1034
- return;
1035
- S(b, E, C, g);
1036
- return;
1037
- }
1038
- },
1039
- [S, e]
1040
- ), M = a.useCallback(
1041
- (g, l) => {
1042
- const m = e.get(g), b = m ? I(m) : null;
1043
- if (!m || !b || b.draggable !== !0 || wt(l.target) || St(l.target))
1044
- return;
1045
- const E = Q(l.currentTarget, g);
1046
- E && S(g, m, E, l);
1047
- },
1048
- [S, e]
1049
- ), x = a.useCallback(
1050
- (g, l, m) => {
1051
- const b = e.get(g);
1052
- if (!b || !Y(b))
1053
- return;
1054
- const E = i[g] ?? X(b);
1055
- if (!E)
1056
- return;
1057
- const R = Et(b), C = nn(b), D = c[g] ?? { x: 0, y: 0 };
1058
- if (m.stopPropagation(), m.preventDefault(), m.currentTarget.setPointerCapture)
1059
- try {
1060
- m.currentTarget.setPointerCapture(m.pointerId);
1061
- } catch {
1062
- }
1063
- p.current = {
1064
- layerId: g,
1065
- pointerId: m.pointerId,
1066
- horizontalEdge: l.horizontal,
1067
- verticalEdge: l.vertical,
1068
- startX: m.clientX,
1069
- startY: m.clientY,
1070
- startWidth: E.width,
1071
- startHeight: E.height,
1072
- startPosition: D,
1073
- baseLeft: R.left,
1074
- baseTop: R.top,
1075
- minWidth: C.minWidth,
1076
- maxWidth: C.maxWidth,
1077
- minHeight: C.minHeight,
1078
- maxHeight: C.maxHeight,
1079
- target: m.currentTarget
1080
- }, s(g);
1081
- },
1082
- [e, c, i]
1083
- ), $ = a.useCallback(
1084
- (g) => {
1085
- const l = d.current;
1086
- if (!l)
1087
- return;
1088
- const m = g.clientX - l.pointerStartX, b = g.clientY - l.pointerStartY, E = {
1089
- x: l.initialTranslationX + m,
1090
- y: l.initialTranslationY + b
1091
- };
1092
- u((R) => ({ ...R, [l.layerId]: E })), h(l.layerId, {
1093
- left: l.baseLeft + E.x,
1094
- top: l.baseTop + E.y
1095
- });
1096
- },
1097
- [h]
1098
- ), L = a.useCallback(
1099
- (g) => {
1100
- const l = p.current;
1101
- if (!l || l.pointerId !== g.pointerId || !e.get(l.layerId))
1102
- return;
1103
- const b = g.clientX - l.startX, E = g.clientY - l.startY, R = rn(l.horizontalEdge, l.startWidth, b), C = on(l.verticalEdge, l.startHeight, E), D = bt(R, l.minWidth, l.maxWidth), k = bt(C, l.minHeight, l.maxHeight), N = l.startWidth - D, j = l.startHeight - k, st = sn(
1104
- l.horizontalEdge,
1105
- l.startPosition.x,
1106
- N
1107
- ), Mt = an(l.verticalEdge, l.startPosition.y, j), Z = i[l.layerId], it = { width: D, height: k };
1108
- (!Z || Z.width !== D || Z.height !== k) && (f((V) => ({
1109
- ...V,
1110
- [l.layerId]: it
1111
- })), v(l.layerId, it));
1112
- const at = c[l.layerId] ?? { x: 0, y: 0 }, G = { x: st, y: Mt };
1113
- (at.x !== G.x || at.y !== G.y) && (u((V) => ({
1114
- ...V,
1115
- [l.layerId]: G
1116
- })), h(l.layerId, {
1117
- left: l.baseLeft + G.x,
1118
- top: l.baseTop + G.y
1119
- }));
1120
- },
1121
- [e, c, i, h, v]
1122
- ), z = a.useCallback((g) => {
1123
- const l = d.current;
1124
- if (l) {
1125
- if (l.pointerId === g.pointerId && l.target.releasePointerCapture)
1126
- try {
1127
- l.target.releasePointerCapture(l.pointerId);
1128
- } catch {
1129
- }
1130
- d.current = null;
1131
- }
1132
- o(null);
1133
- }, []), H = a.useCallback((g) => {
1134
- const l = p.current;
1135
- if (l) {
1136
- if (l.pointerId === g.pointerId && l.target.releasePointerCapture)
1137
- try {
1138
- l.target.releasePointerCapture(l.pointerId);
1139
- } catch {
1140
- }
1141
- p.current = null;
1142
- }
1143
- s(null);
1144
- }, []);
1145
- J(n !== null, {
1146
- onMove: $,
1147
- onUp: z,
1148
- onCancel: z
1149
- }), J(r !== null, {
1150
- onMove: L,
1151
- onUp: H,
1152
- onCancel: H
1153
- });
1154
- const et = a.useCallback(
1155
- (g) => {
1156
- const l = tn(g), m = I(g);
1157
- if (!m || m.draggable !== !0)
1158
- return l;
1159
- const b = c[g.id], E = n === g.id, R = r === g.id, C = b ? { transform: `translate(${b.x}px, ${b.y}px)` } : {}, D = i[g.id], k = Y(g) ? X(g) : null, N = D ?? k, j = N ? { width: `${N.width}px`, height: `${N.height}px` } : {};
1160
- return {
1161
- ...l,
1162
- ...j,
1163
- ...C,
1164
- ...E || R ? { cursor: "grabbing" } : {}
1165
- };
1166
- },
1167
- [n, c, i, r]
1168
- ), nt = a.useCallback(
1169
- (g) => {
1170
- if (!Y(g))
1171
- return { isResizable: !1 };
1172
- const m = i[g.id], b = X(g);
1173
- return (m ?? b) !== null ? { isResizable: !0, onPointerDown: (D, k) => {
1174
- x(g.id, D, k);
1175
- } } : { isResizable: !1 };
1176
- },
1177
- [x, i]
1178
- ), rt = a.useCallback(
1179
- (g) => {
1180
- const { isResizable: l, onPointerDown: m } = nt(g), b = et(g), E = r === g.id;
1181
- return {
1182
- style: b,
1183
- isResizable: l,
1184
- isResizing: E,
1185
- onResizeHandlePointerDown: (R, C) => {
1186
- m && m(R, C);
1187
- }
1188
- };
1189
- },
1190
- [et, nt, r]
1191
- ), ot = a.useCallback(
1192
- (g) => ({
1193
- "data-drag-handle": "true",
1194
- role: "button",
1195
- "aria-roledescription": "Drag handle",
1196
- "aria-label": "Drag layer",
1197
- onPointerDown: (l) => {
1198
- M(g, l);
1199
- }
1200
- }),
1201
- [M]
1202
- );
1203
- return {
1204
- providerValue: a.useMemo(
1205
- () => ({
1206
- handleLayerPointerDown: P,
1207
- getLayerRenderState: rt,
1208
- getLayerHandleProps: ot
1209
- }),
1210
- [ot, rt, P]
1211
- ),
1212
- draggingLayerId: n,
1213
- resizingLayerId: r
1214
- };
1215
- }, dn = (t) => {
1216
- if (typeof t.width == "number" && typeof t.height == "number")
1217
- return { width: t.width, height: t.height };
1218
- }, fn = {
1219
- display: "grid",
1220
- width: "100%",
1221
- height: "100%",
1222
- overflow: "hidden"
1223
- }, pn = {
1224
- touchAction: "none",
1225
- WebkitTouchCallout: "none",
1226
- WebkitUserSelect: "none",
1227
- userSelect: "none"
1228
- }, Cn = ({ config: t, layers: e, style: n }) => {
1229
- const o = a.useRef(null), { isIntersecting: r } = Ut(o, { threshold: 0 });
1230
- return /* @__PURE__ */ w(ce, { config: t, layers: e, style: n, children: /* @__PURE__ */ w(gn, { gridRef: o, isIntersecting: r }) });
1231
- }, gn = ({ gridRef: t, isIntersecting: e }) => {
1232
- const { config: n, style: o, layers: r } = ae(), { normalizedLayers: s, visibleLayers: c, regularLayers: u, layerById: i } = ke(n, r.defs), { columnHandles: f, rowHandles: d, gapSizes: p, gridStyle: h, handleResize: v } = Fe(n, o), { providerValue: S, draggingLayerId: P, resizingLayerId: M } = ln({
1233
- layers: s,
1234
- layerById: i
1235
- }), x = P ? !0 : !!M, $ = a.useMemo(() => ({
1236
- ...fn,
1237
- ...h,
1238
- ...x ? pn : {}
1239
- }), [h, x]);
1240
- return /* @__PURE__ */ _(O, { children: [
1241
- /* @__PURE__ */ _(
1242
- "div",
1243
- {
1244
- ref: t,
1245
- style: $,
1246
- "data-dragging": !!P,
1247
- "data-resizing": !!M,
1248
- "data-visible": e,
1249
- children: [
1250
- /* @__PURE__ */ w(se, { value: S, children: /* @__PURE__ */ w(be, { layers: u }) }),
1251
- f.map(({ trackIndex: L, align: z, span: H }) => /* @__PURE__ */ w(
1252
- pt,
1253
- {
1254
- direction: "col",
1255
- trackIndex: L,
1256
- align: z,
1257
- gap: p.columnGap,
1258
- span: H,
1259
- onResize: v
1260
- },
1261
- `col-${L}:${z}`
1262
- )),
1263
- d.map(({ trackIndex: L, align: z, span: H }) => /* @__PURE__ */ w(
1264
- pt,
1265
- {
1266
- direction: "row",
1267
- trackIndex: L,
1268
- align: z,
1269
- gap: p.rowGap,
1270
- span: H,
1271
- onResize: v
1272
- },
1273
- `row-${L}:${z}`
1274
- ))
1275
- ]
1276
- }
1277
- ),
1278
- /* @__PURE__ */ w(oe, { layers: c })
1279
- ] });
1280
- };
1281
- export {
1282
- ne as D,
1283
- Cn as G,
1284
- Le as R,
1285
- Sn as a,
1286
- ie as b,
1287
- T as c,
1288
- Re as d,
1289
- Be as e,
1290
- Lt as f,
1291
- oe as g,
1292
- zn as t,
1293
- ze as u
1294
- };
1295
- //# sourceMappingURL=GridLayout-CmzKfbPP.js.map