react-panel-layout 0.6.1 → 0.7.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.
Files changed (127) hide show
  1. package/dist/FloatingWindow-CE-WzkNv.js +1542 -0
  2. package/dist/FloatingWindow-CE-WzkNv.js.map +1 -0
  3. package/dist/FloatingWindow-DpFpmX1f.cjs +2 -0
  4. package/dist/FloatingWindow-DpFpmX1f.cjs.map +1 -0
  5. package/dist/GridLayout-EwKszYBy.cjs +2 -0
  6. package/dist/{GridLayout-DKTg_N61.cjs.map → GridLayout-EwKszYBy.cjs.map} +1 -1
  7. package/dist/GridLayout-kiWdpMLQ.js +947 -0
  8. package/dist/{GridLayout-UWNxXw77.js.map → GridLayout-kiWdpMLQ.js.map} +1 -1
  9. package/dist/PanelSystem-Dmy5YI_6.cjs +3 -0
  10. package/dist/PanelSystem-Dmy5YI_6.cjs.map +1 -0
  11. package/dist/{PanelSystem-BqUzNtf2.js → PanelSystem-DrYsYwuV.js} +208 -247
  12. package/dist/PanelSystem-DrYsYwuV.js.map +1 -0
  13. package/dist/components/window/Drawer.d.ts +1 -0
  14. package/dist/components/window/DrawerRevealContext.d.ts +61 -0
  15. package/dist/components/window/drawerRevealAnimationUtils.d.ts +212 -0
  16. package/dist/components/window/drawerStyles.d.ts +5 -0
  17. package/dist/components/window/useDrawerSwipeTransform.d.ts +8 -2
  18. package/dist/components/window/useDrawerTransform.d.ts +68 -0
  19. package/dist/components/window/useRevealDrawerTransform.d.ts +56 -0
  20. package/dist/config.cjs +1 -1
  21. package/dist/config.cjs.map +1 -1
  22. package/dist/config.js +8 -7
  23. package/dist/config.js.map +1 -1
  24. package/dist/dialog/index.d.ts +1 -1
  25. package/dist/grid.cjs +1 -1
  26. package/dist/grid.js +2 -2
  27. package/dist/index.cjs +1 -1
  28. package/dist/index.js +4 -4
  29. package/dist/modules/dialog/DialogContainer.d.ts +22 -2
  30. package/dist/modules/dialog/Modal.d.ts +23 -2
  31. package/dist/modules/dialog/SwipeDialogContainer.d.ts +6 -2
  32. package/dist/modules/dialog/types.d.ts +12 -0
  33. package/dist/modules/drawer/drawerStateMachine.d.ts +168 -0
  34. package/dist/modules/drawer/revealDrawerConstants.d.ts +33 -0
  35. package/dist/modules/drawer/revealDrawerStateMachine.d.ts +146 -0
  36. package/dist/modules/drawer/strategies/index.d.ts +8 -0
  37. package/dist/modules/drawer/strategies/overlayStrategy.d.ts +12 -0
  38. package/dist/modules/drawer/strategies/revealStrategy.d.ts +12 -0
  39. package/dist/modules/drawer/strategies/types.d.ts +116 -0
  40. package/dist/panels.cjs +1 -1
  41. package/dist/panels.js +1 -1
  42. package/dist/stack.cjs +1 -1
  43. package/dist/stack.cjs.map +1 -1
  44. package/dist/stack.js +306 -347
  45. package/dist/stack.js.map +1 -1
  46. package/dist/types.d.ts +14 -0
  47. package/dist/useAnimationFrame-CRuFlk5t.js +394 -0
  48. package/dist/useAnimationFrame-CRuFlk5t.js.map +1 -0
  49. package/dist/useAnimationFrame-XRpDXkwV.cjs +2 -0
  50. package/dist/useAnimationFrame-XRpDXkwV.cjs.map +1 -0
  51. package/dist/window.cjs +1 -1
  52. package/dist/window.js +1 -1
  53. package/package.json +1 -1
  54. package/src/components/gesture/SwipeSafeZone.tsx +1 -0
  55. package/src/components/grid/GridLayout.tsx +110 -38
  56. package/src/components/window/Drawer.tsx +114 -10
  57. package/src/components/window/DrawerLayers.tsx +48 -15
  58. package/src/components/window/DrawerRevealContext.spec.ts +20 -0
  59. package/src/components/window/DrawerRevealContext.tsx +99 -0
  60. package/src/components/window/drawerRevealAnimationUtils.spec.ts +375 -0
  61. package/src/components/window/drawerRevealAnimationUtils.ts +415 -0
  62. package/src/components/window/drawerStyles.spec.ts +39 -0
  63. package/src/components/window/drawerStyles.ts +24 -0
  64. package/src/components/window/useDrawerSwipeTransform.ts +28 -90
  65. package/src/components/window/useDrawerTransform.ts +505 -0
  66. package/src/components/window/useRevealDrawerTransform.spec.ts +1936 -0
  67. package/src/components/window/useRevealDrawerTransform.ts +105 -0
  68. package/src/demo/components/FullscreenDemoPage.tsx +47 -0
  69. package/src/demo/fullscreenRoutes.tsx +32 -0
  70. package/src/demo/index.tsx +5 -0
  71. package/src/demo/pages/Dialog/components/CardExpandDemo.tsx +23 -8
  72. package/src/demo/pages/Drawer/components/DrawerBasics.module.css +6 -1
  73. package/src/demo/pages/Drawer/components/DrawerBasics.tsx +14 -4
  74. package/src/demo/pages/Drawer/components/DrawerReveal.module.css +157 -0
  75. package/src/demo/pages/Drawer/components/DrawerReveal.tsx +128 -0
  76. package/src/demo/pages/Drawer/reveal/index.tsx +17 -0
  77. package/src/demo/pages/Drawer/reveal-fullscreen/index.tsx +135 -0
  78. package/src/demo/pages/Drawer/reveal-fullscreen/styles.module.css +233 -0
  79. package/src/demo/pages/Stack/components/StackBasics.spec.tsx +56 -52
  80. package/src/demo/pages/Stack/components/StackTablet.spec.tsx +39 -49
  81. package/src/demo/routes.tsx +2 -0
  82. package/src/dialog/index.ts +2 -0
  83. package/src/hooks/gesture/testing/createGestureSimulator.ts +1 -0
  84. package/src/hooks/gesture/useNativeGestureGuard.spec.ts +10 -2
  85. package/src/hooks/gesture/useSwipeInput.spec.ts +69 -0
  86. package/src/hooks/gesture/useSwipeInput.ts +2 -0
  87. package/src/hooks/gesture/utils.ts +15 -4
  88. package/src/hooks/useAnimatedVisibility.spec.ts +3 -3
  89. package/src/hooks/useOperationContinuity.spec.ts +17 -10
  90. package/src/hooks/useOperationContinuity.ts +5 -5
  91. package/src/hooks/useSharedElementTransition.ts +28 -7
  92. package/src/modules/dialog/DialogContainer.tsx +39 -5
  93. package/src/modules/dialog/Modal.tsx +46 -4
  94. package/src/modules/dialog/SwipeDialogContainer.tsx +12 -2
  95. package/src/modules/dialog/dialogAnimationUtils.spec.ts +0 -1
  96. package/src/modules/dialog/types.ts +14 -0
  97. package/src/modules/dialog/useDialogContainer.spec.ts +11 -3
  98. package/src/modules/dialog/useDialogSwipeInput.spec.ts +49 -28
  99. package/src/modules/dialog/useDialogSwipeInput.ts +37 -6
  100. package/src/modules/dialog/useDialogTransform.spec.ts +63 -30
  101. package/src/modules/drawer/drawerStateMachine.ts +500 -0
  102. package/src/modules/drawer/revealDrawerConstants.ts +38 -0
  103. package/src/modules/drawer/revealDrawerStateMachine.spec.ts +558 -0
  104. package/src/modules/drawer/revealDrawerStateMachine.ts +197 -0
  105. package/src/modules/drawer/strategies/index.ts +9 -0
  106. package/src/modules/drawer/strategies/overlayStrategy.ts +133 -0
  107. package/src/modules/drawer/strategies/revealStrategy.ts +111 -0
  108. package/src/modules/drawer/strategies/types.ts +160 -0
  109. package/src/modules/drawer/useDrawerSwipeInput.ts +7 -4
  110. package/src/modules/pivot/SwipePivotContent.spec.tsx +48 -37
  111. package/src/modules/pivot/usePivotSwipeInput.spec.ts +8 -8
  112. package/src/modules/stack/swipeTransitionContinuity.spec.tsx +1 -1
  113. package/src/types.ts +15 -0
  114. package/dist/FloatingWindow-CUXnEtrb.js +0 -827
  115. package/dist/FloatingWindow-CUXnEtrb.js.map +0 -1
  116. package/dist/FloatingWindow-DMwyK0eK.cjs +0 -2
  117. package/dist/FloatingWindow-DMwyK0eK.cjs.map +0 -1
  118. package/dist/GridLayout-DKTg_N61.cjs +0 -2
  119. package/dist/GridLayout-UWNxXw77.js +0 -926
  120. package/dist/PanelSystem-BqUzNtf2.js.map +0 -1
  121. package/dist/PanelSystem-D603LKKv.cjs +0 -3
  122. package/dist/PanelSystem-D603LKKv.cjs.map +0 -1
  123. package/dist/useNativeGestureGuard-C7TSqEkr.cjs +0 -2
  124. package/dist/useNativeGestureGuard-C7TSqEkr.cjs.map +0 -1
  125. package/dist/useNativeGestureGuard-CGYo6O0r.js +0 -347
  126. package/dist/useNativeGestureGuard-CGYo6O0r.js.map +0 -1
  127. package/src/components/window/useDrawerSwipeTransform.spec.ts +0 -234
@@ -1,827 +0,0 @@
1
- import { jsx as p, jsxs as F, Fragment as N } from "react/jsx-runtime";
2
- import * as i from "react";
3
- import { F as q, e as j, a as K, b as J, f as Q, d as ue } from "./FloatingPanelFrame-3eU9AwPo.js";
4
- import { x as ce, y as le, z as de, A as fe, B as pe, E as me, I as he } from "./styles-NkjuMOVS.js";
5
- import { u as we, a as ge, b as Se, i as be, c as Ee, m as Ce } from "./useNativeGestureGuard-CGYo6O0r.js";
6
- import { createPortal as De } from "react-dom";
7
- import { u as Pe } from "./useContentCache-CO3LYNmz.js";
8
- const ve = "data-swipe-safe-zone", Lt = ({
9
- children: e,
10
- className: t,
11
- style: n
12
- }) => /* @__PURE__ */ p(
13
- "div",
14
- {
15
- className: t,
16
- style: n,
17
- "data-swipe-safe-zone": "true",
18
- children: e
19
- }
20
- );
21
- function Re(e, t) {
22
- let n = e;
23
- for (; n && n !== t; ) {
24
- if (n.hasAttribute(ve))
25
- return !0;
26
- n = n.parentElement;
27
- }
28
- return !1;
29
- }
30
- function ee(e) {
31
- switch (e) {
32
- case "left":
33
- case "right":
34
- return "x";
35
- case "top":
36
- case "bottom":
37
- return "y";
38
- }
39
- }
40
- function G(e) {
41
- switch (e) {
42
- case "left":
43
- return -1;
44
- case "right":
45
- return 1;
46
- case "top":
47
- return -1;
48
- case "bottom":
49
- return 1;
50
- }
51
- }
52
- function ye(e) {
53
- return G(e) * -1;
54
- }
55
- const Me = 0.3, Te = 0.5;
56
- function xe(e, t) {
57
- return t === "x" ? e.clientWidth : e.clientHeight;
58
- }
59
- function Ae(e, t, n) {
60
- return n === "x" ? t.x - e.x : t.y - e.y;
61
- }
62
- const Le = {
63
- idle: "idle",
64
- ended: "ended"
65
- };
66
- function _e(e) {
67
- return Le[e] ?? "operating";
68
- }
69
- function Oe(e, t, n) {
70
- const r = e * n;
71
- return t === "x" ? { x: r, y: 0 } : { x: 0, y: r };
72
- }
73
- function We(e, t) {
74
- return Math.abs(t === "x" ? e.x : e.y);
75
- }
76
- function Fe(e, t) {
77
- return e ? !t : !1;
78
- }
79
- function Ie(e, t) {
80
- return e ? t : !1;
81
- }
82
- function ke(e, t) {
83
- return e ? !t : !1;
84
- }
85
- function Ne(e, t) {
86
- return e === "idle" ? !1 : t;
87
- }
88
- function Be(e, t, n) {
89
- if (!e || !t)
90
- return 0;
91
- const r = Math.max(1, t.timestamp - e.timestamp);
92
- return n / r;
93
- }
94
- function $e(e) {
95
- const {
96
- edgeContainerRef: t,
97
- drawerContentRef: n,
98
- direction: r,
99
- isOpen: o,
100
- onSwipeOpen: s,
101
- onSwipeClose: c,
102
- enableEdgeSwipeOpen: d = !0,
103
- enableSwipeClose: a = !0,
104
- edgeWidth: u = 20,
105
- dismissThreshold: l = Me
106
- } = e, f = ee(r), w = G(r), b = ye(r), m = i.useRef(0);
107
- i.useLayoutEffect(() => {
108
- const S = n.current;
109
- if (!S)
110
- return;
111
- const D = () => {
112
- m.current = xe(S, f);
113
- };
114
- D();
115
- const M = new ResizeObserver(D);
116
- return M.observe(S), () => M.disconnect();
117
- }, [n, f]);
118
- const g = i.useCallback(
119
- (S) => {
120
- S.direction === b && s();
121
- },
122
- [b, s]
123
- ), {
124
- isEdgeGesture: E,
125
- state: v,
126
- containerProps: L
127
- } = we({
128
- containerRef: t,
129
- edge: r,
130
- edgeWidth: u,
131
- enabled: Fe(d, o),
132
- onSwipeEnd: g
133
- }), { containerProps: I } = ge({
134
- containerRef: t,
135
- active: E,
136
- preventEdgeBack: !0,
137
- preventOverscroll: !0,
138
- edgeWidth: u
139
- }), { state: h, onPointerDown: _ } = Se({
140
- enabled: Ie(a, o)
141
- }), [C, R] = i.useState("idle"), P = i.useRef(0), O = i.useCallback(
142
- (S) => {
143
- if (!a || !o)
144
- return;
145
- const D = n.current;
146
- if (!D)
147
- return;
148
- const M = S.target;
149
- Re(M, D) || be(M, D, f, w) || _(S);
150
- },
151
- [a, o, n, f, w, _]
152
- ), T = i.useMemo(() => {
153
- if (!h.isDown || !h.start || !h.current)
154
- return P.current;
155
- const D = Ae(h.start, h.current, f) * w;
156
- return Math.max(0, D);
157
- }, [h.isDown, h.start, h.current, f, w]);
158
- i.useEffect(() => {
159
- h.isDown && h.current && (P.current = T);
160
- }, [h.isDown, h.current, T]), i.useEffect(() => {
161
- h.isDown && C === "idle" && R("operating");
162
- }, [h.isDown, C]), i.useEffect(() => {
163
- if (!h.isDown && C === "operating") {
164
- const S = P.current;
165
- if (S > 1) {
166
- R("ended");
167
- const M = m.current;
168
- if (M > 0) {
169
- const ie = S / M, ae = Be(h.start, h.current, S);
170
- (ie >= l || ae >= Te) && c();
171
- }
172
- } else
173
- R("idle"), P.current = 0;
174
- }
175
- }, [h.isDown, C, l, c, h.start, h.current]), i.useEffect(() => {
176
- C === "ended" && queueMicrotask(() => {
177
- R("idle"), P.current = 0;
178
- });
179
- }, [C]), i.useEffect(() => {
180
- o || (R("idle"), P.current = 0);
181
- }, [o]);
182
- const x = ke(E, o), y = Ne(C, o), W = i.useMemo(() => x ? We(v.displacement, f) : y ? T : 0, [x, y, f, v.displacement, T]), B = i.useMemo(() => {
183
- const S = m.current;
184
- return S <= 0 ? 0 : Math.min(W / S, 1);
185
- }, [W]), $ = i.useMemo(() => x ? {
186
- phase: _e(v.phase),
187
- displacement: v.displacement,
188
- velocity: v.velocity
189
- } : y ? {
190
- phase: C,
191
- displacement: Oe(w, f, T),
192
- velocity: { x: 0, y: 0 }
193
- } : Ee, [x, y, v, C, T, f, w]), H = i.useMemo(
194
- () => Ce(L, I),
195
- [L, I]
196
- ), z = i.useMemo(() => ({
197
- onPointerDown: O,
198
- style: {
199
- touchAction: "none",
200
- userSelect: "none",
201
- WebkitUserSelect: "none"
202
- }
203
- }), [O]);
204
- return {
205
- state: $,
206
- isOpening: x,
207
- isClosing: y,
208
- progress: B,
209
- displacement: W,
210
- edgeContainerProps: H,
211
- drawerContentProps: z
212
- };
213
- }
214
- const He = {
215
- position: "fixed",
216
- inset: 0,
217
- background: ce
218
- }, ze = {
219
- willChange: "transform"
220
- }, Ge = {
221
- left: {
222
- top: 0,
223
- bottom: 0,
224
- left: 0,
225
- transform: "translateX(-100%)"
226
- },
227
- right: {
228
- top: 0,
229
- bottom: 0,
230
- right: 0,
231
- transform: "translateX(100%)"
232
- },
233
- top: {
234
- top: 0,
235
- left: 0,
236
- right: 0,
237
- transform: "translateY(-100%)"
238
- },
239
- bottom: {
240
- bottom: 0,
241
- left: 0,
242
- right: 0,
243
- transform: "translateY(100%)"
244
- }
245
- }, Ve = {
246
- left: "translateX(0)",
247
- right: "translateX(0)",
248
- top: "translateY(0)",
249
- bottom: "translateY(0)"
250
- };
251
- function Ze(e) {
252
- return Ge[e];
253
- }
254
- function Ue(e) {
255
- return Ve[e];
256
- }
257
- function Ye(e, t, n) {
258
- return e === "none" ? void 0 : `transform ${t ?? le} ${n ?? de}`;
259
- }
260
- function Xe(e, t) {
261
- if (e !== "none")
262
- return `opacity ${t ?? "220ms"} ease`;
263
- }
264
- function U(e) {
265
- if (e !== void 0)
266
- return typeof e == "number" ? `${e}px` : e;
267
- }
268
- function qe(e) {
269
- const { placement: t, inline: n, edgeWidth: r, zIndex: o } = e, s = n ? "absolute" : "fixed", c = o !== void 0 ? o - 2 : 1e3;
270
- return je(t, s, r, c);
271
- }
272
- function je(e, t, n, r) {
273
- const o = {
274
- position: t,
275
- zIndex: r,
276
- background: "transparent",
277
- pointerEvents: "auto"
278
- };
279
- return e === "left" ? {
280
- ...o,
281
- top: 0,
282
- bottom: 0,
283
- left: 0,
284
- width: n
285
- } : e === "right" ? {
286
- ...o,
287
- top: 0,
288
- bottom: 0,
289
- right: 0,
290
- width: n
291
- } : e === "top" ? {
292
- ...o,
293
- top: 0,
294
- left: 0,
295
- right: 0,
296
- height: n
297
- } : {
298
- ...o,
299
- bottom: 0,
300
- left: 0,
301
- right: 0,
302
- height: n
303
- };
304
- }
305
- const V = 20, Z = 0.3, Ke = {
306
- enabled: !1,
307
- edgeSwipeOpen: !1,
308
- swipeClose: !1,
309
- edgeWidth: V,
310
- dismissThreshold: Z
311
- }, Je = {
312
- enabled: !0,
313
- edgeSwipeOpen: !0,
314
- swipeClose: !0,
315
- edgeWidth: V,
316
- dismissThreshold: Z
317
- };
318
- function Qe(e) {
319
- return e === !0 ? Je : e === !1 || e === void 0 ? Ke : {
320
- enabled: !0,
321
- edgeSwipeOpen: e.edgeSwipeOpen ?? !0,
322
- swipeClose: e.swipeClose ?? !0,
323
- edgeWidth: e.edgeWidth ?? V,
324
- dismissThreshold: e.dismissThreshold ?? Z
325
- };
326
- }
327
- function et(e, t) {
328
- return e || (t ? t.left !== void 0 ? "left" : t.right !== void 0 ? "right" : t.top !== void 0 ? "top" : t.bottom !== void 0 ? "bottom" : "right" : "right");
329
- }
330
- function tt(e, t, n) {
331
- return !e.enabled || !e.edgeSwipeOpen ? !1 : t ? n : !0;
332
- }
333
- function nt(e) {
334
- const {
335
- drawerRef: t,
336
- backdropRef: n,
337
- placement: r,
338
- swipeState: o,
339
- displacement: s,
340
- isOpening: c,
341
- isClosing: d,
342
- enabled: a
343
- } = e, u = o.phase === "operating";
344
- i.useLayoutEffect(() => {
345
- if (!a || !u)
346
- return;
347
- const l = t.current, f = n.current;
348
- if (!l)
349
- return;
350
- const w = ee(r), b = G(r), m = w === "x" ? l.clientWidth : l.clientHeight;
351
- if (m <= 0)
352
- return;
353
- const g = w === "x" ? "translateX" : "translateY";
354
- d ? ot(l, f, g, b, s, m) : c && rt(l, f, g, b, s, m);
355
- }, [a, u, d, c, s, r, t, n]), i.useLayoutEffect(() => {
356
- if (!a || o.phase !== "ended")
357
- return;
358
- const l = t.current, f = n.current;
359
- l && (l.style.transform = ""), f && (f.style.opacity = "");
360
- }, [a, o.phase, t, n]);
361
- }
362
- function ot(e, t, n, r, o, s) {
363
- const c = r * o;
364
- e.style.transform = `${n}(${c}px)`;
365
- const d = Math.min(o / s, 1);
366
- t && (t.style.opacity = String(1 - d));
367
- }
368
- function rt(e, t, n, r, o, s) {
369
- const d = r * s + r * -1 * o, a = st(d, r);
370
- e.style.transform = `${n}(${a}px)`;
371
- const u = Math.min(o / s, 1);
372
- t && (t.style.opacity = String(u), t.style.pointerEvents = "auto");
373
- }
374
- function st(e, t) {
375
- return t > 0 ? Math.max(0, e) : Math.min(0, e);
376
- }
377
- const it = ({
378
- chrome: e,
379
- frameStyle: t,
380
- header: n,
381
- dismissible: r,
382
- onClose: o,
383
- children: s
384
- }) => e ? /* @__PURE__ */ F(q, { style: t, children: [
385
- /* @__PURE__ */ p(lt, { header: n, dismissible: r, onClose: o }),
386
- /* @__PURE__ */ p(
387
- j,
388
- {
389
- style: { padding: fe, flex: 1, display: "flex", flexDirection: "column" },
390
- children: s
391
- }
392
- )
393
- ] }) : /* @__PURE__ */ p(N, { children: s });
394
- function at(e, t) {
395
- return e ? t : !1;
396
- }
397
- function ut(e, t) {
398
- return e ? /* @__PURE__ */ p(
399
- Q,
400
- {
401
- onClick: t,
402
- "aria-label": "Close drawer",
403
- style: { marginLeft: "auto" }
404
- }
405
- ) : null;
406
- }
407
- function ct(e, t, n, r, o) {
408
- return e ? /* @__PURE__ */ p(
409
- "div",
410
- {
411
- ref: t,
412
- style: n,
413
- onPointerDown: r,
414
- "data-drawer-edge-zone": o
415
- }
416
- ) : null;
417
- }
418
- const lt = ({ header: e, dismissible: t, onClose: n }) => {
419
- if (!e)
420
- return null;
421
- const r = e.showCloseButton ?? !0, o = at(t, r);
422
- return /* @__PURE__ */ F(
423
- K,
424
- {
425
- style: { padding: `${me} ${he}`, gap: pe },
426
- children: [
427
- /* @__PURE__ */ p(J, { children: e.title }),
428
- ut(o, n)
429
- ]
430
- }
431
- );
432
- };
433
- function dt(e, t, n, r, o) {
434
- return i.useMemo(() => {
435
- const s = n ? "none" : r.transitionMode, c = Ye(
436
- s,
437
- r.transitionDuration,
438
- r.transitionEasing
439
- ), d = Ze(e), a = t ? Ue(e) : d.transform, u = r.inline ? "absolute" : "fixed";
440
- return {
441
- ...ze,
442
- position: u,
443
- ...d,
444
- transform: a,
445
- transition: c,
446
- zIndex: o.zIndex,
447
- width: U(o.width),
448
- height: U(o.height)
449
- };
450
- }, [e, t, n, r, o]);
451
- }
452
- function ft(e, t, n, r, o) {
453
- return i.useMemo(() => {
454
- const s = n ? "none" : r.transitionMode, c = Xe(s, r.transitionDuration), d = r.inline ? "absolute" : "fixed";
455
- return {
456
- ...He,
457
- position: d,
458
- opacity: t ? 1 : 0,
459
- pointerEvents: t ? "auto" : "none",
460
- transition: c,
461
- zIndex: o !== void 0 ? o - 1 : void 0
462
- };
463
- }, [t, n, r, o]);
464
- }
465
- function pt(e) {
466
- return i.useMemo(() => {
467
- const t = { borderRadius: 0 };
468
- return (e === "left" || e === "right") && (t.height = "100%"), t;
469
- }, [e]);
470
- }
471
- const mt = ({
472
- id: e,
473
- config: t,
474
- isOpen: n,
475
- onClose: r,
476
- onOpen: o,
477
- children: s,
478
- zIndex: c,
479
- width: d,
480
- height: a,
481
- position: u
482
- }) => {
483
- const {
484
- dismissible: l = !0,
485
- header: f,
486
- chrome: w = !0,
487
- inline: b = !1
488
- } = t, m = Qe(t.swipeGestures), g = et(t.anchor, u), E = i.useRef(null), v = i.useRef(null), L = i.useRef(null), I = i.useCallback(() => {
489
- o?.(), t.onStateChange?.(!0);
490
- }, [o, t]), h = i.useCallback(() => {
491
- r();
492
- }, [r]), {
493
- state: _,
494
- displacement: C,
495
- edgeContainerProps: R,
496
- drawerContentProps: P,
497
- isOpening: O,
498
- isClosing: T
499
- } = $e({
500
- edgeContainerRef: L,
501
- drawerContentRef: E,
502
- direction: g,
503
- isOpen: n,
504
- onSwipeOpen: I,
505
- onSwipeClose: h,
506
- enableEdgeSwipeOpen: m.edgeSwipeOpen,
507
- enableSwipeClose: m.swipeClose,
508
- edgeWidth: m.edgeWidth,
509
- dismissThreshold: m.dismissThreshold
510
- }), x = _.phase === "operating";
511
- nt({
512
- drawerRef: E,
513
- backdropRef: v,
514
- placement: g,
515
- swipeState: _,
516
- displacement: C,
517
- isOpening: O,
518
- isClosing: T,
519
- enabled: m.enabled
520
- });
521
- const y = dt(g, n, x, t, { width: d, height: a, zIndex: c }), W = ft(g, n, x, t, c), B = pt(g), $ = i.useMemo(() => ({ ...qe({
522
- placement: g,
523
- inline: b,
524
- edgeWidth: m.edgeWidth,
525
- zIndex: c
526
- }), ...R.style }), [g, b, m.edgeWidth, c, R.style]), H = i.useMemo(() => m.enabled ? { ...y, ...P.style } : y, [m.enabled, y, P.style]), z = tt(m, n, O), S = f?.title ?? t.ariaLabel ?? "Drawer", D = ct(z, L, $, R.onPointerDown, g);
527
- return /* @__PURE__ */ F(N, { children: [
528
- D,
529
- /* @__PURE__ */ p(
530
- "div",
531
- {
532
- ref: v,
533
- style: W,
534
- onClick: l ? r : void 0
535
- }
536
- ),
537
- /* @__PURE__ */ p(
538
- "div",
539
- {
540
- ref: E,
541
- "data-layer-id": e,
542
- "data-placement": g,
543
- style: H,
544
- role: "dialog",
545
- "aria-modal": l ? !0 : void 0,
546
- "aria-hidden": n ? void 0 : !0,
547
- "aria-label": S,
548
- onPointerDown: m.enabled ? P.onPointerDown : void 0,
549
- children: /* @__PURE__ */ p(
550
- it,
551
- {
552
- chrome: w,
553
- frameStyle: B,
554
- header: f,
555
- dismissible: l,
556
- onClose: r,
557
- children: s
558
- }
559
- )
560
- }
561
- )
562
- ] });
563
- }, ht = (e, t) => new Promise((n) => {
564
- let r = !1;
565
- const o = () => {
566
- r || (r = !0, e.removeEventListener("transitionend", s), n());
567
- }, s = (c) => {
568
- c.target === e && o();
569
- };
570
- e.addEventListener("transitionend", s), setTimeout(o, t + 50);
571
- }), te = async (e, t, n, r) => {
572
- switch (t) {
573
- case "none":
574
- e();
575
- return;
576
- case "css":
577
- e(), n && await ht(n, r);
578
- return;
579
- }
580
- }, _t = (e) => {
581
- const [t, n] = i.useState({}), r = i.useRef(e);
582
- r.current = e;
583
- const o = i.useCallback(
584
- async (a, u, l) => {
585
- const { mode: f = "none", element: w, duration: b = 300 } = l ?? {};
586
- await te(() => {
587
- n((E) => E[a] === u ? E : { ...E, [a]: u });
588
- }, f, w?.current, b);
589
- const g = r.current;
590
- u ? g?.onOpen?.(a) : g?.onClose?.(a), g?.onTransitionEnd?.(a, u);
591
- },
592
- []
593
- ), s = i.useCallback((a) => t[a] ?? !1, [t]), c = i.useCallback(
594
- (a, u) => o(a, !0, u),
595
- [o]
596
- ), d = i.useCallback(
597
- (a, u) => o(a, !1, u),
598
- [o]
599
- );
600
- return { state: s, open: c, close: d };
601
- }, wt = (e) => {
602
- if (!e)
603
- return 300;
604
- const t = e.match(/(\d+)/);
605
- return t ? parseInt(t[1], 10) : 300;
606
- }, gt = (e) => {
607
- const [t, n] = i.useState(() => {
608
- const a = {};
609
- return e.forEach((u) => {
610
- u.drawer && (a[u.id] = u.drawer.defaultOpen ?? !1);
611
- }), a;
612
- }), r = i.useMemo(() => {
613
- const a = /* @__PURE__ */ new Map();
614
- return e.forEach((u) => a.set(u.id, u)), a;
615
- }, [e]), o = i.useCallback(
616
- async (a, u, l) => {
617
- const f = r.get(a);
618
- if (!f?.drawer)
619
- return;
620
- const w = l?.mode ?? f.drawer.transitionMode ?? "css", b = l?.duration ?? wt(f.drawer.transitionDuration), m = l?.element?.current;
621
- await te(() => {
622
- f.drawer?.open === void 0 && n((E) => E[a] === u ? E : { ...E, [a]: u }), f.drawer?.onStateChange?.(u);
623
- }, w, m, b);
624
- },
625
- [r]
626
- ), s = i.useCallback(
627
- (a) => {
628
- const u = r.get(a);
629
- return u?.drawer?.open !== void 0 ? u.drawer.open : t[a] ?? !1;
630
- },
631
- [r, t]
632
- ), c = i.useCallback(
633
- (a, u) => o(a, !0, u),
634
- [o]
635
- ), d = i.useCallback(
636
- (a, u) => o(a, !1, u),
637
- [o]
638
- );
639
- return { state: s, open: c, close: d };
640
- }, Ot = ({ layers: e }) => {
641
- const t = gt(e), n = i.useMemo(() => e.filter((s) => s.drawer), [e]), r = i.useMemo(() => {
642
- const s = /* @__PURE__ */ new Map();
643
- return n.forEach((c) => {
644
- s.set(c.id, () => t.close(c.id));
645
- }), s;
646
- }, [n, t.close]), o = i.useMemo(() => {
647
- const s = /* @__PURE__ */ new Map();
648
- return n.forEach((c) => {
649
- s.set(c.id, () => t.open(c.id));
650
- }), s;
651
- }, [n, t.open]);
652
- return /* @__PURE__ */ p(N, { children: n.map((s) => {
653
- if (!s.drawer)
654
- return null;
655
- const c = t.state(s.id), d = r.get(s.id), a = o.get(s.id);
656
- return d ? /* @__PURE__ */ p(
657
- mt,
658
- {
659
- id: s.id,
660
- config: s.drawer,
661
- isOpen: c,
662
- onClose: d,
663
- onOpen: a,
664
- zIndex: s.zIndex,
665
- width: s.width,
666
- height: s.height,
667
- position: s.position,
668
- children: s.component
669
- },
670
- s.id
671
- ) : null;
672
- }) });
673
- }, ne = i.createContext(null), Wt = ({ value: e, children: t }) => /* @__PURE__ */ p(ne.Provider, { value: e, children: t }), Ft = () => {
674
- const e = i.useContext(ne);
675
- if (!e)
676
- throw new Error("useGridLayoutContext must be used within a GridLayoutProvider.");
677
- return e;
678
- }, oe = i.createContext(null), It = () => {
679
- const e = i.useContext(oe);
680
- if (!e)
681
- throw new Error("usePanelSystem must be used within a PanelSystemProvider.");
682
- return e;
683
- }, kt = ({ config: e, layers: t, style: n, children: r }) => {
684
- const o = i.useMemo(() => {
685
- const u = /* @__PURE__ */ new Map();
686
- return t.forEach((l) => {
687
- u.set(l.id, l);
688
- }), u;
689
- }, [t]), s = i.useCallback(
690
- (u) => o.get(u)?.component ?? null,
691
- [o]
692
- ), c = i.useMemo(() => t.map((u) => u.id), [t]), { getCachedContent: d } = Pe({
693
- resolveContent: s,
694
- validIds: c
695
- }), a = i.useMemo(
696
- () => ({
697
- config: e,
698
- style: n,
699
- layers: {
700
- defs: t,
701
- layerById: o
702
- },
703
- getCachedContent: d
704
- }),
705
- [e, n, t, o, d]
706
- );
707
- return /* @__PURE__ */ p(oe.Provider, { value: a, children: r });
708
- }, re = i.createContext(null), St = ({ layerId: e, children: t }) => {
709
- const n = i.useMemo(() => ({ layerId: e }), [e]);
710
- return /* @__PURE__ */ p(re.Provider, { value: n, children: t });
711
- }, Nt = () => {
712
- const e = i.useContext(re);
713
- if (!e)
714
- throw new Error("useLayerInstance must be used within a LayerInstanceProvider.");
715
- return e;
716
- }, Y = (e, t, n) => {
717
- if (typeof e == "number" && Number.isFinite(e))
718
- return e;
719
- throw new Error(`Popup layer "${n}" requires a numeric "${t}" value.`);
720
- }, se = (e, t) => {
721
- if (!e)
722
- throw new Error(`Popup layer "${t}" must define position (left/top).`);
723
- return {
724
- left: Y(e.left, "left", t),
725
- top: Y(e.top, "top", t)
726
- };
727
- }, k = (e) => `${Math.round(e)}`, A = (e) => {
728
- if (e !== void 0)
729
- return e ? "yes" : "no";
730
- }, bt = (e, t, n, r, o) => {
731
- const s = {}, c = se(t, e);
732
- if (typeof n != "number" || typeof r != "number")
733
- throw new Error(`Popup layer "${e}" requires numeric width/height.`);
734
- s.width = k(n), s.height = k(r), s.left = k(c.left), s.top = k(c.top);
735
- const d = o?.features;
736
- if (d) {
737
- const a = A(d.toolbar), u = A(d.menubar), l = A(d.location), f = A(d.status), w = A(d.resizable), b = A(d.scrollbars);
738
- a !== void 0 && (s.toolbar = a), u !== void 0 && (s.menubar = u), l !== void 0 && (s.location = l), f !== void 0 && (s.status = f), w !== void 0 && (s.resizable = w), b !== void 0 && (s.scrollbars = b);
739
- }
740
- return Object.entries(s).map(([a, u]) => `${a}=${u}`).join(",");
741
- }, X = (e, t, n, r, o) => {
742
- const s = se(n, t);
743
- if (typeof r != "number" || typeof o != "number")
744
- throw new Error(`Popup layer "${t}" requires numeric width/height.`);
745
- e.moveTo(Math.round(s.left), Math.round(s.top)), e.resizeTo(Math.round(r), Math.round(o));
746
- }, Bt = ({ layer: e }) => {
747
- const t = e.floating;
748
- if (!t)
749
- throw new Error(`Layer "${e.id}" is missing floating configuration required for popup mode.`);
750
- if ((t.mode ?? "embedded") !== "popup")
751
- throw new Error(`PopupLayerPortal received layer "${e.id}" that is not configured for popup mode.`);
752
- const r = i.useRef(null), o = i.useRef(null), [s, c] = i.useState(!1);
753
- return i.useEffect(() => {
754
- if (typeof window > "u")
755
- return;
756
- const d = bt(e.id, e.position, e.width, e.height, t.popup), a = t.popup?.name ?? e.id, u = Et(
757
- a,
758
- d,
759
- {
760
- position: e.position,
761
- size: { width: e.width, height: e.height }
762
- },
763
- t.popup
764
- );
765
- if (!u)
766
- throw new Error(`Failed to open popup window for layer "${e.id}".`);
767
- const l = u;
768
- o.current = l, t.popup?.focus !== !1 && l.focus(), l.document.title || (l.document.title = e.id), l.document.body.innerHTML = "";
769
- const f = l.document.createElement("div");
770
- f.dataset.layerId = e.id, l.document.body.appendChild(f), r.current = f, c(!0), X(l, e.id, e.position, e.width, e.height);
771
- const w = () => {
772
- o.current = null, r.current = null, c(!1);
773
- };
774
- return l.addEventListener("beforeunload", w), () => {
775
- l.removeEventListener("beforeunload", w), t.popup?.closeOnUnmount !== !1 && l.close(), o.current = null, r.current = null, c(!1);
776
- };
777
- }, [
778
- t.popup?.closeOnUnmount,
779
- t.popup?.features?.location,
780
- t.popup?.features?.menubar,
781
- t.popup?.features?.resizable,
782
- t.popup?.features?.scrollbars,
783
- t.popup?.features?.status,
784
- t.popup?.features?.toolbar,
785
- t.popup?.focus,
786
- t.popup?.name,
787
- e.id
788
- ]), i.useEffect(() => {
789
- const d = o.current;
790
- d && X(d, e.id, e.position, e.width, e.height);
791
- }, [e.position?.left, e.position?.top, e.height, e.width, e.id]), !s || !r.current ? null : De(/* @__PURE__ */ p(St, { layerId: e.id, children: e.component }), r.current);
792
- }, Et = (e, t, n, r) => {
793
- const o = r?.createWindow;
794
- return o ? o({ name: e, features: t, bounds: n }) : window.open("", e, t);
795
- }, Ct = ({ onClick: e }) => /* @__PURE__ */ p(ue, { children: /* @__PURE__ */ p(Q, { onClick: e, "aria-label": "Close window", "data-drag-ignore": "true" }) }), Dt = ({ header: e, draggable: t, onClose: n }) => {
796
- if (!e)
797
- return null;
798
- const r = e.showCloseButton ?? !1;
799
- return /* @__PURE__ */ F(K, { ...t ? { "data-drag-handle": "true" } : {}, style: { cursor: t ? "grab" : void 0 }, children: [
800
- e.title ? /* @__PURE__ */ p(J, { children: e.title }) : null,
801
- r ? /* @__PURE__ */ p(Ct, { onClick: n }) : null
802
- ] });
803
- }, Pt = ({ header: e, draggable: t, chrome: n, onClose: r, children: o }) => n ? /* @__PURE__ */ F(q, { style: { height: "100%", width: "100%" }, children: [
804
- /* @__PURE__ */ p(Dt, { header: e, draggable: t, onClose: r }),
805
- /* @__PURE__ */ p(j, { style: { flex: 1, display: "flex", flexDirection: "column" }, children: o })
806
- ] }) : /* @__PURE__ */ p(N, { children: o }), vt = ({ id: e, config: t, onClose: n, children: r }) => {
807
- const o = t.chrome ?? !1, s = t.draggable ?? !1, c = t.header?.title ?? t.ariaLabel ?? "Floating window";
808
- return /* @__PURE__ */ p("div", { "data-floating-window": e, role: "dialog", "aria-label": c, style: { height: "100%", width: "100%" }, children: /* @__PURE__ */ p(Pt, { header: t.header, draggable: s, chrome: o, onClose: n, children: r }) });
809
- };
810
- vt.displayName = "FloatingWindow";
811
- export {
812
- mt as D,
813
- vt as F,
814
- Wt as G,
815
- St as L,
816
- Bt as P,
817
- Lt as S,
818
- Nt as a,
819
- Ot as b,
820
- _t as c,
821
- gt as d,
822
- It as e,
823
- kt as f,
824
- te as r,
825
- Ft as u
826
- };
827
- //# sourceMappingURL=FloatingWindow-CUXnEtrb.js.map