react-panel-layout 0.6.0 → 0.7.0

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 (258) hide show
  1. package/dist/{FloatingPanelFrame-SgYLc6Ud.js → FloatingPanelFrame-3eU9AwPo.js} +2 -2
  2. package/dist/{FloatingPanelFrame-SgYLc6Ud.js.map → FloatingPanelFrame-3eU9AwPo.js.map} +1 -1
  3. package/dist/FloatingWindow-Bw2djgpz.js +1542 -0
  4. package/dist/FloatingWindow-Bw2djgpz.js.map +1 -0
  5. package/dist/FloatingWindow-Cvyokf0m.cjs +2 -0
  6. package/dist/FloatingWindow-Cvyokf0m.cjs.map +1 -0
  7. package/dist/GridLayout-B4aCqSyd.js +947 -0
  8. package/dist/{GridLayout-BltqeCPK.js.map → GridLayout-B4aCqSyd.js.map} +1 -1
  9. package/dist/GridLayout-DNOClFzz.cjs +2 -0
  10. package/dist/{GridLayout-B4VRsC0r.cjs.map → GridLayout-DNOClFzz.cjs.map} +1 -1
  11. package/dist/{HorizontalDivider-WF1k_qND.js → HorizontalDivider-DdxzfV0l.js} +3 -3
  12. package/dist/{HorizontalDivider-WF1k_qND.js.map → HorizontalDivider-DdxzfV0l.js.map} +1 -1
  13. package/dist/{HorizontalDivider-B5Z-KZLk.cjs → HorizontalDivider-_pgV4Mcv.cjs} +2 -2
  14. package/dist/{HorizontalDivider-B5Z-KZLk.cjs.map → HorizontalDivider-_pgV4Mcv.cjs.map} +1 -1
  15. package/dist/PanelSystem-B8Igvnb2.cjs +3 -0
  16. package/dist/PanelSystem-B8Igvnb2.cjs.map +1 -0
  17. package/dist/{PanelSystem-Dr1TBhxM.js → PanelSystem-DDUSFjXD.js} +209 -248
  18. package/dist/PanelSystem-DDUSFjXD.js.map +1 -0
  19. package/dist/ResizeHandle-CBcAS918.cjs +2 -0
  20. package/dist/{ResizeHandle-CScipO5l.cjs.map → ResizeHandle-CBcAS918.cjs.map} +1 -1
  21. package/dist/{ResizeHandle-CdA_JYfN.js → ResizeHandle-CXjc1meV.js} +28 -29
  22. package/dist/{ResizeHandle-CdA_JYfN.js.map → ResizeHandle-CXjc1meV.js.map} +1 -1
  23. package/dist/SwipePivotTabBar-DWrCuwEI.js +411 -0
  24. package/dist/SwipePivotTabBar-DWrCuwEI.js.map +1 -0
  25. package/dist/SwipePivotTabBar-fjjXkpj7.cjs +2 -0
  26. package/dist/SwipePivotTabBar-fjjXkpj7.cjs.map +1 -0
  27. package/dist/components/gesture/SwipeSafeZone.d.ts +40 -0
  28. package/dist/components/window/Drawer.d.ts +4 -1
  29. package/dist/components/window/DrawerLayers.d.ts +1 -1
  30. package/dist/components/window/DrawerRevealContext.d.ts +61 -0
  31. package/dist/components/window/drawerRevealAnimationUtils.d.ts +212 -0
  32. package/dist/components/window/drawerStyles.d.ts +74 -0
  33. package/dist/components/window/drawerSwipeConfig.d.ts +29 -0
  34. package/dist/components/window/useDrawerSwipeTransform.d.ts +29 -0
  35. package/dist/components/window/useDrawerTransform.d.ts +68 -0
  36. package/dist/components/window/useRevealDrawerTransform.d.ts +56 -0
  37. package/dist/config.cjs +1 -1
  38. package/dist/config.cjs.map +1 -1
  39. package/dist/config.js +9 -8
  40. package/dist/config.js.map +1 -1
  41. package/dist/constants/styles.d.ts +17 -0
  42. package/dist/dialog/index.d.ts +69 -0
  43. package/dist/floating.js +1 -1
  44. package/dist/grid.cjs +1 -1
  45. package/dist/grid.js +2 -2
  46. package/dist/hooks/gesture/testing/createGestureSimulator.d.ts +7 -0
  47. package/dist/hooks/gesture/types.d.ts +48 -5
  48. package/dist/hooks/gesture/utils.d.ts +19 -0
  49. package/dist/hooks/useAnimationFrame.d.ts +2 -0
  50. package/dist/hooks/useOperationContinuity.d.ts +64 -0
  51. package/dist/hooks/useResizeObserver.d.ts +33 -1
  52. package/dist/hooks/useSharedElementTransition.d.ts +112 -0
  53. package/dist/hooks/useSwipeContentTransform.d.ts +9 -2
  54. package/dist/index.cjs +1 -1
  55. package/dist/index.js +7 -7
  56. package/dist/modules/dialog/AlertDialog.d.ts +9 -0
  57. package/dist/modules/dialog/DialogContainer.d.ts +37 -0
  58. package/dist/modules/dialog/Modal.d.ts +26 -0
  59. package/dist/modules/dialog/SwipeDialogContainer.d.ts +16 -0
  60. package/dist/modules/dialog/dialogAnimationUtils.d.ts +113 -0
  61. package/dist/modules/dialog/types.d.ts +183 -0
  62. package/dist/modules/dialog/useDialog.d.ts +39 -0
  63. package/dist/modules/dialog/useDialogContainer.d.ts +47 -0
  64. package/dist/modules/dialog/useDialogSwipeInput.d.ts +70 -0
  65. package/dist/modules/dialog/useDialogTransform.d.ts +82 -0
  66. package/dist/modules/drawer/drawerStateMachine.d.ts +168 -0
  67. package/dist/modules/drawer/revealDrawerConstants.d.ts +33 -0
  68. package/dist/modules/drawer/revealDrawerStateMachine.d.ts +146 -0
  69. package/dist/modules/drawer/strategies/index.d.ts +8 -0
  70. package/dist/modules/drawer/strategies/overlayStrategy.d.ts +12 -0
  71. package/dist/modules/drawer/strategies/revealStrategy.d.ts +12 -0
  72. package/dist/modules/drawer/strategies/types.d.ts +116 -0
  73. package/dist/modules/drawer/types.d.ts +74 -0
  74. package/dist/modules/drawer/useDrawerSwipeInput.d.ts +24 -0
  75. package/dist/modules/pivot/SwipePivotTabBar.d.ts +3 -0
  76. package/dist/modules/stack/SwipeStackContent.d.ts +6 -3
  77. package/dist/modules/stack/SwipeStackOutlet.d.ts +4 -4
  78. package/dist/modules/stack/computeSwipeStackTransform.d.ts +1 -1
  79. package/dist/panels.cjs +1 -1
  80. package/dist/panels.js +1 -1
  81. package/dist/pivot.cjs +1 -1
  82. package/dist/pivot.js +1 -1
  83. package/dist/resizer.cjs +1 -1
  84. package/dist/resizer.js +2 -2
  85. package/dist/stack.cjs +1 -1
  86. package/dist/stack.cjs.map +1 -1
  87. package/dist/stack.js +480 -780
  88. package/dist/stack.js.map +1 -1
  89. package/dist/sticky-header/calculateStickyMetrics.d.ts +28 -0
  90. package/dist/sticky-header.cjs +1 -1
  91. package/dist/sticky-header.cjs.map +1 -1
  92. package/dist/sticky-header.js +59 -51
  93. package/dist/sticky-header.js.map +1 -1
  94. package/dist/{styles-DPPuJ0sf.js → styles-NkjuMOVS.js} +13 -13
  95. package/dist/{styles-DPPuJ0sf.js.map → styles-NkjuMOVS.js.map} +1 -1
  96. package/dist/styles-qf6ptVLD.cjs.map +1 -1
  97. package/dist/types.d.ts +30 -0
  98. package/dist/useAnimationFrame-BZ6D2lMq.cjs +2 -0
  99. package/dist/useAnimationFrame-BZ6D2lMq.cjs.map +1 -0
  100. package/dist/useAnimationFrame-Bg4e-H8O.js +394 -0
  101. package/dist/useAnimationFrame-Bg4e-H8O.js.map +1 -0
  102. package/dist/useDocumentPointerEvents-DXxw3qWj.js +54 -0
  103. package/dist/useDocumentPointerEvents-DXxw3qWj.js.map +1 -0
  104. package/dist/useDocumentPointerEvents-DxDSOtip.cjs +2 -0
  105. package/dist/useDocumentPointerEvents-DxDSOtip.cjs.map +1 -0
  106. package/dist/window/index.d.ts +2 -0
  107. package/dist/window.cjs +1 -1
  108. package/dist/window.cjs.map +1 -1
  109. package/dist/window.js +114 -103
  110. package/dist/window.js.map +1 -1
  111. package/package.json +6 -1
  112. package/src/components/gesture/SwipeSafeZone.tsx +70 -0
  113. package/src/components/grid/GridLayout.tsx +110 -38
  114. package/src/components/window/Drawer.tsx +353 -162
  115. package/src/components/window/DrawerLayers.tsx +54 -11
  116. package/src/components/window/DrawerRevealContext.spec.ts +20 -0
  117. package/src/components/window/DrawerRevealContext.tsx +99 -0
  118. package/src/components/window/drawerRevealAnimationUtils.spec.ts +375 -0
  119. package/src/components/window/drawerRevealAnimationUtils.ts +415 -0
  120. package/src/components/window/drawerStyles.spec.ts +302 -0
  121. package/src/components/window/drawerStyles.ts +252 -0
  122. package/src/components/window/drawerSwipeConfig.spec.ts +131 -0
  123. package/src/components/window/drawerSwipeConfig.ts +112 -0
  124. package/src/components/window/useDrawerSwipeTransform.ts +67 -0
  125. package/src/components/window/useDrawerTransform.ts +505 -0
  126. package/src/components/window/useRevealDrawerTransform.spec.ts +1936 -0
  127. package/src/components/window/useRevealDrawerTransform.ts +105 -0
  128. package/src/constants/styles.ts +19 -0
  129. package/src/demo/components/FullscreenDemoPage.tsx +47 -0
  130. package/src/demo/fullscreenRoutes.tsx +32 -0
  131. package/src/demo/index.tsx +5 -0
  132. package/src/demo/pages/Dialog/alerts/index.tsx +22 -0
  133. package/src/demo/pages/Dialog/card/index.tsx +22 -0
  134. package/src/demo/pages/Dialog/components/AlertDialogDemo.tsx +124 -0
  135. package/src/demo/pages/Dialog/components/CardExpandDemo.module.css +243 -0
  136. package/src/demo/pages/Dialog/components/CardExpandDemo.tsx +219 -0
  137. package/src/demo/pages/Dialog/components/CustomAlertDialogDemo.tsx +219 -0
  138. package/src/demo/pages/Dialog/components/DialogDemos.module.css +77 -0
  139. package/src/demo/pages/Dialog/components/ModalBasics.tsx +45 -0
  140. package/src/demo/pages/Dialog/components/SwipeDialogDemo.module.css +77 -0
  141. package/src/demo/pages/Dialog/components/SwipeDialogDemo.tsx +181 -0
  142. package/src/demo/pages/Dialog/custom-alert/index.tsx +22 -0
  143. package/src/demo/pages/Dialog/modal/index.tsx +17 -0
  144. package/src/demo/pages/Dialog/swipe/index.tsx +22 -0
  145. package/src/demo/pages/Drawer/components/DrawerBasics.module.css +6 -1
  146. package/src/demo/pages/Drawer/components/DrawerBasics.tsx +14 -4
  147. package/src/demo/pages/Drawer/components/DrawerReveal.module.css +157 -0
  148. package/src/demo/pages/Drawer/components/DrawerReveal.tsx +128 -0
  149. package/src/demo/pages/Drawer/components/DrawerSwipe.module.css +316 -0
  150. package/src/demo/pages/Drawer/components/DrawerSwipe.tsx +178 -0
  151. package/src/demo/pages/Drawer/reveal/index.tsx +17 -0
  152. package/src/demo/pages/Drawer/reveal-fullscreen/index.tsx +135 -0
  153. package/src/demo/pages/Drawer/reveal-fullscreen/styles.module.css +233 -0
  154. package/src/demo/pages/Drawer/swipe/index.tsx +17 -0
  155. package/src/demo/pages/Pivot/components/SwipeTabsPivot.tsx +54 -23
  156. package/src/demo/pages/Pivot/swipe-debug/index.tsx +1 -1
  157. package/src/demo/pages/Stack/components/StackBasics.spec.tsx +156 -0
  158. package/src/demo/pages/Stack/components/StackBasics.tsx +179 -95
  159. package/src/demo/pages/Stack/components/StackTablet.spec.tsx +110 -0
  160. package/src/demo/pages/Stack/components/StackTablet.tsx +42 -21
  161. package/src/demo/routes.tsx +24 -1
  162. package/src/dialog/index.ts +85 -0
  163. package/src/hooks/gesture/testing/createGestureSimulator.spec.ts +68 -64
  164. package/src/hooks/gesture/testing/createGestureSimulator.ts +113 -37
  165. package/src/hooks/gesture/types.ts +83 -6
  166. package/src/hooks/gesture/useEdgeSwipeInput.spec.ts +22 -14
  167. package/src/hooks/gesture/useNativeGestureGuard.spec.ts +99 -31
  168. package/src/hooks/gesture/useNativeGestureGuard.ts +3 -1
  169. package/src/hooks/gesture/utils.ts +102 -0
  170. package/src/hooks/useAnimatedVisibility.spec.ts +44 -24
  171. package/src/hooks/useAnimatedVisibility.ts +28 -2
  172. package/src/hooks/useAnimationFrame.ts +8 -0
  173. package/src/hooks/useOperationContinuity.spec.ts +394 -0
  174. package/src/hooks/useOperationContinuity.ts +135 -0
  175. package/src/hooks/useResizeObserver.spec.tsx +277 -0
  176. package/src/hooks/useResizeObserver.tsx +108 -39
  177. package/src/hooks/useScrollContainer.ts +4 -10
  178. package/src/hooks/useSharedElementTransition.ts +354 -0
  179. package/src/hooks/useSwipeContentTransform.spec.ts +18 -18
  180. package/src/hooks/useSwipeContentTransform.ts +166 -28
  181. package/src/modules/dialog/AlertDialog.spec.tsx +387 -0
  182. package/src/modules/dialog/AlertDialog.tsx +221 -0
  183. package/src/modules/dialog/DialogContainer.spec.tsx +228 -0
  184. package/src/modules/dialog/DialogContainer.tsx +188 -0
  185. package/src/modules/dialog/Modal.spec.tsx +220 -0
  186. package/src/modules/dialog/Modal.tsx +182 -0
  187. package/src/modules/dialog/SwipeDialogContainer.tsx +208 -0
  188. package/src/modules/dialog/dialogAnimationUtils.spec.ts +252 -0
  189. package/src/modules/dialog/dialogAnimationUtils.ts +297 -0
  190. package/src/modules/dialog/types.ts +186 -0
  191. package/src/modules/dialog/useDialog.spec.tsx +447 -0
  192. package/src/modules/dialog/useDialog.ts +214 -0
  193. package/src/modules/dialog/useDialogContainer.spec.ts +339 -0
  194. package/src/modules/dialog/useDialogContainer.ts +150 -0
  195. package/src/modules/dialog/useDialogSwipeInput.spec.ts +178 -0
  196. package/src/modules/dialog/useDialogSwipeInput.ts +350 -0
  197. package/src/modules/dialog/useDialogTransform.spec.ts +403 -0
  198. package/src/modules/dialog/useDialogTransform.ts +407 -0
  199. package/src/modules/drawer/drawerStateMachine.ts +500 -0
  200. package/src/modules/drawer/revealDrawerConstants.ts +38 -0
  201. package/src/modules/drawer/revealDrawerStateMachine.spec.ts +558 -0
  202. package/src/modules/drawer/revealDrawerStateMachine.ts +197 -0
  203. package/src/modules/drawer/strategies/index.ts +9 -0
  204. package/src/modules/drawer/strategies/overlayStrategy.ts +133 -0
  205. package/src/modules/drawer/strategies/revealStrategy.ts +111 -0
  206. package/src/modules/drawer/strategies/types.ts +160 -0
  207. package/src/modules/drawer/types.ts +102 -0
  208. package/src/modules/drawer/useDrawerSwipeInput.spec.ts +566 -0
  209. package/src/modules/drawer/useDrawerSwipeInput.ts +402 -0
  210. package/src/modules/panels/rendering/ContentRegistry.spec.tsx +21 -14
  211. package/src/modules/pivot/SwipePivotContent.position.spec.tsx +12 -8
  212. package/src/modules/pivot/SwipePivotContent.spec.tsx +66 -25
  213. package/src/modules/pivot/SwipePivotContent.tsx +2 -2
  214. package/src/modules/pivot/SwipePivotTabBar.spec.tsx +85 -68
  215. package/src/modules/pivot/SwipePivotTabBar.tsx +75 -15
  216. package/src/modules/pivot/scaleInputState.spec.ts +11 -2
  217. package/src/modules/pivot/usePivot.spec.ts +17 -3
  218. package/src/modules/pivot/usePivotSwipeInput.spec.ts +182 -123
  219. package/src/modules/stack/SwipeStackContent.spec.tsx +387 -100
  220. package/src/modules/stack/SwipeStackContent.tsx +43 -33
  221. package/src/modules/stack/SwipeStackOutlet.spec.tsx +14 -16
  222. package/src/modules/stack/SwipeStackOutlet.tsx +6 -6
  223. package/src/modules/stack/computeSwipeStackTransform.spec.ts +5 -5
  224. package/src/modules/stack/computeSwipeStackTransform.ts +3 -3
  225. package/src/modules/stack/swipeTransitionContinuity.spec.tsx +1133 -0
  226. package/src/modules/stack/useStackAnimationState.spec.ts +3 -1
  227. package/src/modules/stack/useStackAnimationState.ts +18 -13
  228. package/src/modules/stack/useStackNavigation.spec.ts +198 -3
  229. package/src/modules/stack/useStackNavigation.tsx +113 -56
  230. package/src/modules/stack/useStackSwipeInput.spec.ts +65 -32
  231. package/src/modules/stack/useStackSwipeInput.ts +1 -1
  232. package/src/sticky-header/StickyArea.tsx +29 -57
  233. package/src/sticky-header/calculateStickyMetrics.spec.ts +105 -0
  234. package/src/sticky-header/calculateStickyMetrics.ts +50 -0
  235. package/src/types.ts +33 -0
  236. package/src/window/index.ts +2 -0
  237. package/dist/FloatingWindow-BpdOpg_L.js +0 -400
  238. package/dist/FloatingWindow-BpdOpg_L.js.map +0 -1
  239. package/dist/FloatingWindow-TCDNY5gE.cjs +0 -2
  240. package/dist/FloatingWindow-TCDNY5gE.cjs.map +0 -1
  241. package/dist/GridLayout-B4VRsC0r.cjs +0 -2
  242. package/dist/GridLayout-BltqeCPK.js +0 -927
  243. package/dist/PanelSystem-Bs8bQwQF.cjs +0 -3
  244. package/dist/PanelSystem-Bs8bQwQF.cjs.map +0 -1
  245. package/dist/PanelSystem-Dr1TBhxM.js.map +0 -1
  246. package/dist/ResizeHandle-CScipO5l.cjs +0 -2
  247. package/dist/SwipePivotTabBar-BGO9X94m.js +0 -407
  248. package/dist/SwipePivotTabBar-BGO9X94m.js.map +0 -1
  249. package/dist/SwipePivotTabBar-BrQismcZ.cjs +0 -2
  250. package/dist/SwipePivotTabBar-BrQismcZ.cjs.map +0 -1
  251. package/dist/useDocumentPointerEvents-CKdhGXd0.js +0 -46
  252. package/dist/useDocumentPointerEvents-CKdhGXd0.js.map +0 -1
  253. package/dist/useDocumentPointerEvents-ChqrKXDk.cjs +0 -2
  254. package/dist/useDocumentPointerEvents-ChqrKXDk.cjs.map +0 -1
  255. package/dist/useEffectEvent-Dp7HLCf0.js +0 -13
  256. package/dist/useEffectEvent-Dp7HLCf0.js.map +0 -1
  257. package/dist/useEffectEvent-huSsGUnl.cjs +0 -2
  258. package/dist/useEffectEvent-huSsGUnl.cjs.map +0 -1
@@ -1,927 +0,0 @@
1
- import { jsx as w, Fragment as Z, jsxs as K } from "react/jsx-runtime";
2
- import * as d from "react";
3
- import { e as zt, F as Tt, u as wt, L as Mt, P as Pt, f as xt, G as kt, b as Ht } from "./FloatingWindow-BpdOpg_L.js";
4
- import { G as $, z as L, A as j } from "./styles-DPPuJ0sf.js";
5
- import { u as Nt } from "./SwipePivotTabBar-BGO9X94m.js";
6
- import { R as At } from "./ResizeHandle-CdA_JYfN.js";
7
- import { u as St } from "./useIsomorphicLayoutEffect-DhmEnmZ_.js";
8
- import { a as st } from "./useDocumentPointerEvents-CKdhGXd0.js";
9
- import { u as it } from "./useEffectEvent-Dp7HLCf0.js";
10
- const Dt = () => {
11
- const t = /* @__PURE__ */ new Map();
12
- return (e) => {
13
- if (!e)
14
- return;
15
- const n = t.get(e);
16
- if (n !== void 0)
17
- return n;
18
- const r = t.size;
19
- return t.set(e, r), r;
20
- };
21
- }, Gt = Dt(), V = /* @__PURE__ */ new Map(), $t = (t) => {
22
- const e = `ovs-threshold:${t.threshold}-rootMargin:${t.rootMargin}-root:${Gt(t.root)}`;
23
- if (V.has(e))
24
- return V.get(e);
25
- const n = new class {
26
- #t = /* @__PURE__ */ new Map();
27
- #e = new IntersectionObserver((r) => {
28
- r.forEach((o) => {
29
- const s = this.#t.get(o.target);
30
- s && s(o);
31
- });
32
- }, t);
33
- observe(r, o) {
34
- return this.#t.set(r, o), this.#e.observe(r), () => {
35
- this.#t.delete(r), this.#e.unobserve(r);
36
- };
37
- }
38
- }();
39
- return V.set(e, n), n;
40
- }, at = Object.freeze({
41
- x: 0,
42
- y: 0,
43
- width: 0,
44
- height: 0,
45
- top: 0,
46
- right: 0,
47
- bottom: 0,
48
- left: 0
49
- });
50
- function Ft(t, { threshold: e = 0, rootMargin: n = "0px", root: r = null }) {
51
- const [o, s] = d.useState(null);
52
- return d.useEffect(() => {
53
- const a = t.current;
54
- return a ? $t({
55
- threshold: e,
56
- rootMargin: n,
57
- root: r
58
- }).observe(a, (u) => {
59
- s({
60
- isIntersecting: u.isIntersecting,
61
- boundingClientRect: u.boundingClientRect,
62
- intersectionRatio: u.intersectionRatio,
63
- intersectionRect: u.intersectionRect,
64
- rootBounds: u.rootBounds,
65
- target: u.target,
66
- time: u.time
67
- });
68
- }) : void 0;
69
- }, [t, e, n, r]), d.useMemo(() => ({
70
- isIntersecting: o?.isIntersecting ?? !1,
71
- boundingClientRect: o?.boundingClientRect ?? at,
72
- intersectionRatio: o?.intersectionRatio ?? 0,
73
- intersectionRect: o?.intersectionRect ?? at,
74
- rootBounds: o?.rootBounds ?? null,
75
- target: o?.target ?? t.current,
76
- time: o?.time ?? 0
77
- }), [o, t]);
78
- }
79
- const vt = {
80
- position: "absolute",
81
- pointerEvents: "auto",
82
- boxSizing: "border-box",
83
- background: "transparent",
84
- border: "none"
85
- }, Ot = {
86
- ...vt,
87
- width: L,
88
- height: L,
89
- zIndex: 2
90
- }, Yt = {
91
- ...vt,
92
- zIndex: 1
93
- }, _t = {
94
- "top-left": {
95
- top: 0,
96
- left: 0,
97
- transform: "translate(-50%, -50%)",
98
- cursor: "nwse-resize"
99
- },
100
- "top-right": {
101
- top: 0,
102
- right: 0,
103
- transform: "translate(50%, -50%)",
104
- cursor: "nesw-resize"
105
- },
106
- "bottom-left": {
107
- bottom: 0,
108
- left: 0,
109
- transform: "translate(-50%, 50%)",
110
- cursor: "nesw-resize"
111
- },
112
- "bottom-right": {
113
- bottom: 0,
114
- right: 0,
115
- transform: "translate(50%, 50%)",
116
- cursor: "nwse-resize"
117
- }
118
- }, Bt = {
119
- left: {
120
- top: L,
121
- bottom: L,
122
- left: 0,
123
- width: $,
124
- transform: "translateX(-50%)",
125
- cursor: "ew-resize"
126
- },
127
- right: {
128
- top: L,
129
- bottom: L,
130
- right: 0,
131
- width: $,
132
- transform: "translateX(50%)",
133
- cursor: "ew-resize"
134
- },
135
- top: {
136
- left: L,
137
- right: L,
138
- top: 0,
139
- height: $,
140
- transform: "translateY(-50%)",
141
- cursor: "ns-resize"
142
- },
143
- bottom: {
144
- left: L,
145
- right: L,
146
- bottom: 0,
147
- height: $,
148
- transform: "translateY(50%)",
149
- cursor: "ns-resize"
150
- }
151
- }, Wt = [
152
- { key: "top-left", variant: "corner", horizontal: "left", vertical: "top" },
153
- { key: "top-right", variant: "corner", horizontal: "right", vertical: "top" },
154
- { key: "bottom-left", variant: "corner", horizontal: "left", vertical: "bottom" },
155
- { key: "bottom-right", variant: "corner", horizontal: "right", vertical: "bottom" },
156
- { key: "left", variant: "edge", horizontal: "left" },
157
- { key: "right", variant: "edge", horizontal: "right" },
158
- { key: "top", variant: "edge", vertical: "top" },
159
- { key: "bottom", variant: "edge", vertical: "bottom" }
160
- ], Xt = ({ layerId: t, onPointerDown: e }) => /* @__PURE__ */ w(Z, { children: Wt.map((n) => {
161
- const r = n.variant === "corner" ? Ot : Yt, o = n.variant === "corner" ? _t[n.key] : Bt[n.key], s = { ...r, ...o }, a = n.variant === "corner" ? { "data-resize-corner": n.key } : { "data-resize-edge": n.key };
162
- return /* @__PURE__ */ w(
163
- "div",
164
- {
165
- role: "presentation",
166
- "aria-hidden": "true",
167
- style: s,
168
- ...a,
169
- "data-layer-id": t,
170
- onPointerDown: (l) => e(n, l)
171
- },
172
- n.key
173
- );
174
- }) }), jt = ({ pivot: t }) => {
175
- const { Outlet: e } = Nt({
176
- items: t.items,
177
- activeId: t.activeId,
178
- defaultActiveId: t.defaultActiveId,
179
- onActiveChange: t.onActiveChange,
180
- transitionMode: t.transitionMode
181
- });
182
- return /* @__PURE__ */ w(e, {});
183
- }, Vt = (t, e) => t.pivot ? /* @__PURE__ */ w(jt, { pivot: t.pivot }) : t.cache ? e(t.id) : t.component, Ct = d.memo(({ layer: t, onClose: e }) => {
184
- const { getCachedContent: n } = zt(), r = Vt(t, n);
185
- return t.floating?.chrome ? /* @__PURE__ */ w(Tt, { id: t.id, config: t.floating, onClose: e, children: r }) : r;
186
- });
187
- Ct.displayName = "LayerContentRenderer";
188
- const Rt = d.memo(({ layerId: t, isResizable: e, onPointerDown: n }) => e ? /* @__PURE__ */ w(Xt, { layerId: t, onPointerDown: n }) : null);
189
- Rt.displayName = "LayerResizeHandles";
190
- const Kt = (t, e) => t ? "auto" : e ? "visible" : "hidden", Et = d.memo(({ layer: t, handleLayerPointerDown: e }) => {
191
- const { getLayerRenderState: n } = wt(), { style: r, isResizable: o, isResizing: s, onResizeHandlePointerDown: a } = n(t), l = d.useMemo(() => {
192
- const f = {};
193
- return t.gridArea && (f.gridArea = t.gridArea), t.gridRow && (f.gridRow = t.gridRow), t.gridColumn && (f.gridColumn = t.gridColumn), f;
194
- }, [t.gridArea, t.gridRow, t.gridColumn]), u = d.useMemo(() => {
195
- const f = !!t.floating, g = Kt(t.scrollable, f), b = {
196
- ...r,
197
- ...l,
198
- minWidth: 0,
199
- minHeight: 0,
200
- overflow: g
201
- };
202
- return o ? { ...b, position: "relative" } : b;
203
- }, [r, l, o, t.scrollable, t.floating]), p = d.useCallback(() => {
204
- t.floating?.onClose?.();
205
- }, [t.floating]);
206
- return /* @__PURE__ */ K(
207
- "div",
208
- {
209
- "data-layer-id": t.id,
210
- "data-draggable": !!t.floating?.draggable,
211
- "data-resizable": o,
212
- "data-resizing": s,
213
- style: u,
214
- onPointerDown: e,
215
- children: [
216
- /* @__PURE__ */ w(Mt, { layerId: t.id, children: /* @__PURE__ */ w(Ct, { layer: t, onClose: p }) }),
217
- /* @__PURE__ */ w(Rt, { layerId: t.id, isResizable: o, onPointerDown: a })
218
- ]
219
- }
220
- );
221
- });
222
- Et.displayName = "EmbeddedLayer";
223
- const Ut = ({ layers: t }) => {
224
- const { handleLayerPointerDown: e } = wt();
225
- return /* @__PURE__ */ w(Z, { children: t.map((n) => {
226
- const r = n.floating?.mode ?? "embedded";
227
- return n.floating && r === "popup" ? /* @__PURE__ */ w(Pt, { layer: n }, n.id) : /* @__PURE__ */ w(Et, { layer: n, handleLayerPointerDown: e }, n.id);
228
- }) });
229
- }, ct = {
230
- position: "absolute",
231
- pointerEvents: "auto"
232
- }, lt = ({
233
- direction: t,
234
- trackIndex: e,
235
- align: n,
236
- gap: r,
237
- span: o,
238
- onResize: s
239
- }) => {
240
- const a = t === "col" ? "vertical" : "horizontal", l = d.useCallback(
241
- (f) => {
242
- const g = n === "start" ? -f : f;
243
- s(t, e, g);
244
- },
245
- [n, t, e, s]
246
- ), u = d.useMemo(() => t === "col" ? {
247
- gridColumn: `${e + 1} / ${e + 2}`,
248
- gridRow: `${o.start} / ${o.end}`
249
- } : {
250
- gridRow: `${e + 1} / ${e + 2}`,
251
- gridColumn: `${o.start} / ${o.end}`
252
- }, [t, e, o]), p = d.useMemo(() => {
253
- const g = Math.max(0, r) / 2 + j / 2;
254
- return t === "col" ? {
255
- ...ct,
256
- width: j,
257
- height: "100%",
258
- top: 0,
259
- bottom: 0,
260
- ...n === "start" ? { left: -g } : { right: -g }
261
- } : {
262
- ...ct,
263
- width: "100%",
264
- height: j,
265
- left: 0,
266
- right: 0,
267
- ...n === "start" ? { top: -g } : { bottom: -g }
268
- };
269
- }, [n, t, r]);
270
- return /* @__PURE__ */ w("div", { "data-resizable": "true", style: { ...u, position: "relative", pointerEvents: "none" }, children: /* @__PURE__ */ w("div", { "data-direction": a, "data-align": n, "data-handle": "true", style: p, children: /* @__PURE__ */ w(At, { direction: a, onResize: l }) }) });
271
- }, Zt = (t) => {
272
- const e = /* @__PURE__ */ new Map();
273
- t.forEach((r, o) => {
274
- r.forEach((s, a) => {
275
- if (!s || s === ".")
276
- return;
277
- const l = e.get(s);
278
- if (l) {
279
- const p = {
280
- rowStart: Math.min(l.rowStart, o),
281
- rowEnd: Math.max(l.rowEnd, o),
282
- colStart: Math.min(l.colStart, a),
283
- colEnd: Math.max(l.colEnd, a)
284
- };
285
- e.set(s, p);
286
- return;
287
- }
288
- const u = {
289
- rowStart: o,
290
- rowEnd: o,
291
- colStart: a,
292
- colEnd: a
293
- };
294
- e.set(s, u);
295
- });
296
- });
297
- const n = /* @__PURE__ */ new Map();
298
- return e.forEach((r, o) => {
299
- const s = r.rowStart + 1, a = r.rowEnd + 2, l = r.colStart + 1, u = r.colEnd + 2, p = {
300
- gridArea: o,
301
- gridRow: `${s} / ${a}`,
302
- gridColumn: `${l} / ${u}`
303
- };
304
- n.set(o, p);
305
- }), n;
306
- }, qt = (t, e) => {
307
- if ((t.positionMode ?? "grid") !== "grid")
308
- return t;
309
- const r = t.gridArea ?? t.id, o = e.get(r);
310
- if (!o)
311
- return t;
312
- const s = !t.gridArea, a = !t.gridRow, l = !t.gridColumn;
313
- return !s && !a && !l ? t : {
314
- ...t,
315
- gridArea: s ? o.gridArea : t.gridArea,
316
- gridRow: a ? o.gridRow : t.gridRow,
317
- gridColumn: l ? o.gridColumn : t.gridColumn
318
- };
319
- }, Jt = (t, e) => {
320
- const n = d.useMemo(() => Zt(t.areas), [t.areas]), r = d.useMemo(() => e.map((l) => qt(l, n)), [e, n]), o = d.useMemo(
321
- () => r.filter((l) => l.visible !== !1),
322
- [r]
323
- ), s = d.useMemo(
324
- () => o.filter((l) => !l.drawer),
325
- [o]
326
- ), a = d.useMemo(() => {
327
- const l = /* @__PURE__ */ new Map();
328
- return r.forEach((u) => {
329
- l.set(u.id, u);
330
- }), l;
331
- }, [r]);
332
- return {
333
- normalizedLayers: r,
334
- visibleLayers: o,
335
- regularLayers: s,
336
- layerById: a
337
- };
338
- }, Qt = (t) => {
339
- if (!t)
340
- return { rowGap: 0, columnGap: 0 };
341
- const e = t.split(/\s+/).map((r) => r.trim()).filter(Boolean), n = (r) => {
342
- const o = r.match(/^(-?\d+(?:\.\d+)?)px$/);
343
- return o ? Number.parseFloat(o[1]) : 0;
344
- };
345
- if (e.length === 1) {
346
- const r = n(e[0]);
347
- return { rowGap: r, columnGap: r };
348
- }
349
- return {
350
- rowGap: n(e[0]),
351
- columnGap: n(e[1])
352
- };
353
- }, te = (t, e) => {
354
- if (!t)
355
- return [];
356
- const n = getComputedStyle(t);
357
- return (e === "col" ? n.gridTemplateColumns : n.gridTemplateRows).split(/\s+/).map((o) => parseFloat(o)).filter((o) => !Number.isNaN(o));
358
- }, yt = (t, e = Number.NEGATIVE_INFINITY, n = Number.POSITIVE_INFINITY) => Math.min(Math.max(t, e), n), Ve = (t, e) => typeof t != "number" || !Number.isFinite(t) ? e : t, _ = (t, e) => `${t}-${e}`, ee = (t, e, n, r) => {
359
- const o = _(n, r), s = e[o];
360
- return s !== void 0 ? `minmax(${t.minSize ?? 0}px, ${s}px)` : t.size;
361
- }, ut = (t, e, n) => t.map((r, o) => ee(r, e, n, o)).join(" "), F = (t, e) => t.reduce((n, r, o) => (r.resizable && r.size.endsWith("px") && (n[_(e, o)] = parseInt(r.size, 10)), n), {}), ne = ({
362
- trackSizes: t,
363
- track: e,
364
- direction: n,
365
- trackIndex: r,
366
- containerRef: o
367
- }) => {
368
- const s = _(n, r), a = t[s];
369
- if (a !== void 0)
370
- return a;
371
- const u = te(o?.current ?? null, n)[r];
372
- return u !== void 0 && u > 0 ? u : e.size.endsWith("px") ? Number.parseInt(e.size, 10) : 300;
373
- }, re = (t, e) => t.reduce((n, r, o) => o === e ? n : r.size.includes("fr") ? n + 100 : n + (r.minSize ?? 50), 0), oe = ({
374
- track: t,
375
- tracks: e,
376
- trackIndex: n,
377
- direction: r,
378
- containerRef: o,
379
- gapSizes: s
380
- }) => {
381
- if (!o?.current)
382
- return t.maxSize;
383
- const a = r === "col" ? o.current.offsetWidth : o.current.offsetHeight, l = re(e, n), u = e.length - 1, p = r === "col" ? s.columnGap : s.rowGap, f = u * p, g = a - l - f;
384
- return t.maxSize !== void 0 ? Math.min(t.maxSize, g) : g;
385
- }, se = (t, e, n) => yt(t, e ?? Number.NEGATIVE_INFINITY, n ?? Number.POSITIVE_INFINITY), dt = (t, e) => {
386
- const n = t.length, r = [];
387
- for (let a = 0; a < n; a++) {
388
- const l = t[a], u = l[e], p = l[e + 1];
389
- u !== p && r.push(a);
390
- }
391
- if (r.length === 0)
392
- return { start: 1, end: n + 1 };
393
- const o = Math.min(...r), s = Math.max(...r);
394
- return { start: o + 1, end: s + 2 };
395
- }, gt = (t, e) => {
396
- const n = t[e], r = t[e + 1], o = n?.length ?? 0, s = [];
397
- for (let u = 0; u < o; u++) {
398
- const p = n?.[u], f = r?.[u];
399
- p !== f && s.push(u);
400
- }
401
- if (s.length === 0)
402
- return { start: 1, end: o + 1 };
403
- const a = Math.min(...s), l = Math.max(...s);
404
- return { start: a + 1, end: l + 2 };
405
- }, ie = (t, e) => {
406
- if (t.length === 0)
407
- return [];
408
- const n = e.length;
409
- if (t.length === 1)
410
- return t[0]?.resizable ? [{ trackIndex: 0, align: "end", span: { start: 1, end: n + 1 } }] : [];
411
- const r = [];
412
- return Array.from({ length: t.length - 1 }, (s, a) => a).forEach((s) => {
413
- const a = t[s];
414
- if (t[s + 1]?.resizable) {
415
- const u = dt(e, s);
416
- r.push({ trackIndex: s + 1, align: "start", span: u });
417
- return;
418
- }
419
- if (a?.resizable) {
420
- const u = dt(e, s);
421
- r.push({ trackIndex: s, align: "end", span: u });
422
- }
423
- }), r;
424
- }, ae = (t, e) => {
425
- if (t.length === 0)
426
- return [];
427
- const n = e[0]?.length ?? 0;
428
- if (t.length === 1)
429
- return t[0]?.resizable ? [{ trackIndex: 0, align: "end", span: { start: 1, end: n + 1 } }] : [];
430
- const r = [];
431
- return Array.from({ length: t.length - 1 }, (s, a) => a).forEach((s) => {
432
- const a = t[s];
433
- if (t[s + 1]?.resizable) {
434
- const u = gt(e, s);
435
- r.push({ trackIndex: s + 1, align: "start", span: u });
436
- return;
437
- }
438
- if (a?.resizable) {
439
- const u = gt(e, s);
440
- r.push({ trackIndex: s, align: "end", span: u });
441
- }
442
- }), r;
443
- }, ce = (t) => t !== void 0 ? { gap: t } : {}, le = (t, e) => {
444
- const n = Object.keys(e), r = {};
445
- for (const f of n)
446
- r[f] = t[f] ?? e[f];
447
- const o = Object.keys(t), s = o.length !== n.length, a = o.some(
448
- (f) => !Object.prototype.hasOwnProperty.call(r, f)
449
- ), l = s ? !0 : a, u = n.some((f) => t[f] !== r[f]);
450
- return (l ? !0 : u) ? r : null;
451
- }, ue = (t, e, n) => {
452
- const [r, o] = d.useState(() => ({
453
- ...F(t.columns, "col"),
454
- ...F(t.rows, "row")
455
- }));
456
- St(() => {
457
- const g = {
458
- ...F(t.columns, "col"),
459
- ...F(t.rows, "row")
460
- };
461
- o((b) => le(b, g) ?? b);
462
- }, [t.columns, t.rows]);
463
- const s = d.useMemo(() => t.areas.map((g) => `"${g.join(" ")}"`).join(" "), [t.areas]), a = d.useMemo(() => Qt(t.gap), [t.gap]), l = d.useMemo(
464
- () => ie(t.columns, t.areas),
465
- [t.columns, t.areas]
466
- ), u = d.useMemo(
467
- () => ae(t.rows, t.areas),
468
- [t.rows, t.areas]
469
- ), p = d.useMemo(() => ({
470
- ...t.style,
471
- ...e,
472
- gridTemplateAreas: s,
473
- gridTemplateRows: ut(t.rows, r, "row"),
474
- gridTemplateColumns: ut(t.columns, r, "col"),
475
- ...ce(t.gap)
476
- }), [s, t.columns, t.gap, t.rows, t.style, e, r]), f = d.useCallback(
477
- (g, b, v) => {
478
- const E = g === "row" ? t.rows : t.columns, R = E[b];
479
- if (!R || !R.resizable)
480
- return;
481
- const M = ne({
482
- trackSizes: r,
483
- track: R,
484
- direction: g,
485
- trackIndex: b,
486
- containerRef: n
487
- }), P = oe({
488
- track: R,
489
- tracks: E,
490
- trackIndex: b,
491
- direction: g,
492
- containerRef: n,
493
- gapSizes: a
494
- }), x = _(g, b);
495
- o((A) => {
496
- const y = M + v, I = se(y, R.minSize, P);
497
- return { ...A, [x]: I };
498
- });
499
- },
500
- [t.columns, t.rows, r, n, a]
501
- );
502
- return {
503
- columnHandles: l,
504
- rowHandles: u,
505
- gapSizes: a,
506
- gridStyle: p,
507
- handleResize: f
508
- };
509
- }, de = (t) => t.positionMode ? t.positionMode : t.floating ? (t.floating.mode ?? "embedded") === "embedded" ? "absolute" : "relative" : "grid", ge = (t) => ({ position: t === "grid" ? "relative" : t }), he = (t, e) => e !== "grid" ? {} : {
510
- gridArea: t.gridArea,
511
- gridRow: t.gridRow,
512
- gridColumn: t.gridColumn
513
- }, fe = (t) => t ? {
514
- top: t.top,
515
- right: t.right,
516
- bottom: t.bottom,
517
- left: t.left
518
- } : {}, me = (t) => t !== void 0 ? { zIndex: t } : {}, pe = (t, e) => ({
519
- width: t,
520
- height: e
521
- }), be = (t, e) => t.pointerEvents !== void 0 ? typeof t.pointerEvents == "boolean" ? { pointerEvents: t.pointerEvents ? "auto" : "none" } : { pointerEvents: t.pointerEvents } : e === "absolute" || e === "fixed" ? { pointerEvents: "auto" } : {}, ze = (t) => t.floating ? t.floating.position ?? t.floating.defaultPosition ?? t.position : t.position, we = (t) => {
522
- if (t.floating) {
523
- const e = t.floating.size ?? t.floating.defaultSize;
524
- if (e)
525
- return {
526
- width: e.width,
527
- height: e.height
528
- };
529
- }
530
- return {
531
- width: t.width,
532
- height: t.height
533
- };
534
- }, Se = (t) => t.floating?.zIndex !== void 0 ? t.floating.zIndex : t.zIndex, ve = (t) => {
535
- const e = de(t), n = ze(t), r = we(t), o = Se(t);
536
- return {
537
- ...t.style,
538
- ...ge(e),
539
- ...he(t, e),
540
- ...fe(n),
541
- ...me(o),
542
- ...pe(r.width, r.height),
543
- ...be(t, e)
544
- };
545
- }, Ce = (t) => {
546
- const e = t.floating;
547
- return e ? e.mode ?? "embedded" : null;
548
- }, H = (t) => Ce(t) !== "embedded" ? null : t.floating ?? null, ht = (t) => t instanceof HTMLElement ? ["INPUT", "TEXTAREA", "SELECT", "BUTTON"].includes(t.tagName) : !1, ft = (t, e, n) => {
549
- const r = e ?? Number.NEGATIVE_INFINITY, o = n ?? Number.POSITIVE_INFINITY;
550
- return yt(t, r, o);
551
- }, mt = (t, e, n) => {
552
- if (typeof t == "number" && Number.isFinite(t))
553
- return t;
554
- throw new Error(
555
- `Floating layer "${n}" must provide a numeric "${e}" value when draggable mode is enabled.`
556
- );
557
- }, pt = (t) => {
558
- const e = H(t);
559
- if (!e)
560
- throw new Error(`Floating layer "${t.id}" is missing floating configuration required for dragging.`);
561
- const n = e.position ?? e.defaultPosition ?? t.position;
562
- if (!n)
563
- throw new Error(`Floating layer "${t.id}" must define position with left and top values.`);
564
- return {
565
- left: mt(n.left, "left", t.id),
566
- top: mt(n.top, "top", t.id)
567
- };
568
- }, Re = (t) => {
569
- const e = H(t);
570
- return e ? e.constraints ?? {} : {};
571
- }, Ee = (t, e, n) => t ? t === "left" ? e - n : e + n : e, ye = (t, e, n) => t ? t === "top" ? e - n : e + n : e, Ie = (t, e, n) => !t || t === "right" ? e : e + n, Le = (t, e, n) => !t || t === "bottom" ? e : e + n, U = (t, e) => t ? t.dataset.layerId === e ? t : U(t.parentElement, e) : null, q = (t, e, n) => !t || n?.(t) ? null : e(t) ? t : q(t.parentElement, e, n), Te = (t) => t instanceof HTMLElement ? q(
572
- t,
573
- (e) => e.dataset.dragHandle === "true",
574
- (e) => e.dataset.dragIgnore === "true"
575
- ) : null, bt = (t) => t instanceof HTMLElement ? q(
576
- t,
577
- (e) => e.dataset.resizeCorner !== void 0 || e.dataset.resizeEdge !== void 0
578
- ) !== null : !1, O = (t) => {
579
- const e = H(t);
580
- return e ? e.resizable === !0 : !1;
581
- }, Y = (t) => {
582
- if (!H(t))
583
- return null;
584
- const n = xe(t);
585
- if (!n)
586
- throw new Error(`Floating layer "${t.id}" must define width and height when resizable or draggable.`);
587
- return {
588
- width: n.width,
589
- height: n.height
590
- };
591
- }, Me = (t, e, n) => {
592
- const r = t.filter(O).reduce((g, b) => {
593
- if (n === b.id) {
594
- const E = e[b.id];
595
- if (E)
596
- return g[b.id] = E, g;
597
- }
598
- const v = Y(b);
599
- return v && (g[b.id] = v), g;
600
- }, {}), o = Object.keys(e), s = Object.keys(r), a = o.length !== s.length, l = o.some((g) => !Object.prototype.hasOwnProperty.call(r, g)), u = a ? !0 : l, p = s.some((g) => {
601
- const b = e[g], v = r[g];
602
- return !b || !v ? !0 : b.width !== v.width || b.height !== v.height;
603
- });
604
- return {
605
- sizes: r,
606
- changed: u ? !0 : p
607
- };
608
- }, Pe = ({
609
- layers: t,
610
- layerById: e,
611
- isRootLevel: n
612
- }) => {
613
- const [r, o] = d.useState(null), [s, a] = d.useState(null), [l, u] = d.useState({}), [p, f] = d.useState({}), g = d.useRef(null), b = d.useRef(null), v = it((c, i) => {
614
- e.get(c)?.floating?.onMove?.(i);
615
- }), E = it((c, i) => {
616
- e.get(c)?.floating?.onResize?.(i);
617
- });
618
- St(() => {
619
- const { sizes: c, changed: i } = Me(t, p, s);
620
- i && f(c);
621
- }, [t, s]);
622
- const R = d.useCallback(
623
- (c, i, h, m) => {
624
- const z = pt(i), C = l[c] ?? { x: 0, y: 0 }, S = {
625
- pointerStartX: m.clientX,
626
- pointerStartY: m.clientY,
627
- initialTranslationX: C.x,
628
- initialTranslationY: C.y,
629
- baseLeft: z.left,
630
- baseTop: z.top,
631
- layerId: c,
632
- pointerId: m.pointerId,
633
- target: h
634
- };
635
- if (S.target.setPointerCapture)
636
- try {
637
- S.target.setPointerCapture(S.pointerId);
638
- } catch {
639
- }
640
- g.current = S, o(c);
641
- },
642
- [l]
643
- ), M = d.useCallback(
644
- (c) => {
645
- const i = c.target, h = Te(i);
646
- if (!h)
647
- return;
648
- const m = h.closest("[data-layer-id]")?.getAttribute("data-layer-id");
649
- if (!m)
650
- return;
651
- const z = e.get(m);
652
- if (!z)
653
- return;
654
- const C = H(z);
655
- if (!(!C || C.draggable !== !0) && !ht(c.target) && !bt(c.target) && h) {
656
- const S = U(h, m);
657
- if (!S)
658
- return;
659
- R(m, z, S, c);
660
- return;
661
- }
662
- },
663
- [R, e]
664
- ), P = d.useCallback(
665
- (c, i) => {
666
- const h = e.get(c), m = h ? H(h) : null;
667
- if (!h || !m || m.draggable !== !0 || ht(i.target) || bt(i.target))
668
- return;
669
- const z = U(i.currentTarget, c);
670
- z && R(c, h, z, i);
671
- },
672
- [R, e]
673
- ), x = d.useCallback(
674
- (c, i, h) => {
675
- const m = e.get(c);
676
- if (!m || !O(m))
677
- return;
678
- const z = p[c] ?? Y(m);
679
- if (!z)
680
- return;
681
- const C = pt(m), S = Re(m), T = l[c] ?? { x: 0, y: 0 };
682
- if (h.stopPropagation(), h.preventDefault(), h.currentTarget.setPointerCapture)
683
- try {
684
- h.currentTarget.setPointerCapture(h.pointerId);
685
- } catch {
686
- }
687
- b.current = {
688
- layerId: c,
689
- pointerId: h.pointerId,
690
- horizontalEdge: i.horizontal,
691
- verticalEdge: i.vertical,
692
- startX: h.clientX,
693
- startY: h.clientY,
694
- startWidth: z.width,
695
- startHeight: z.height,
696
- startPosition: T,
697
- baseLeft: C.left,
698
- baseTop: C.top,
699
- minWidth: S.minWidth,
700
- maxWidth: S.maxWidth,
701
- minHeight: S.minHeight,
702
- maxHeight: S.maxHeight,
703
- target: h.currentTarget
704
- }, a(c);
705
- },
706
- [e, l, p]
707
- ), A = d.useCallback(
708
- (c) => {
709
- const i = g.current;
710
- if (!i)
711
- return;
712
- const h = c.clientX - i.pointerStartX, m = c.clientY - i.pointerStartY, z = {
713
- x: i.initialTranslationX + h,
714
- y: i.initialTranslationY + m
715
- };
716
- u((C) => ({ ...C, [i.layerId]: z })), v(i.layerId, {
717
- left: i.baseLeft + z.x,
718
- top: i.baseTop + z.y
719
- });
720
- },
721
- [v]
722
- ), y = d.useCallback(
723
- (c) => {
724
- const i = b.current;
725
- if (!i || i.pointerId !== c.pointerId || !e.get(i.layerId))
726
- return;
727
- const m = c.clientX - i.startX, z = c.clientY - i.startY, C = Ee(i.horizontalEdge, i.startWidth, m), S = ye(i.verticalEdge, i.startHeight, z), T = ft(C, i.minWidth, i.maxWidth), k = ft(S, i.minHeight, i.maxHeight), D = i.startWidth - T, B = i.startHeight - k, nt = Ie(
728
- i.horizontalEdge,
729
- i.startPosition.x,
730
- D
731
- ), Lt = Le(i.verticalEdge, i.startPosition.y, B), W = p[i.layerId], rt = { width: T, height: k };
732
- (!W || W.width !== T || W.height !== k) && (f((X) => ({
733
- ...X,
734
- [i.layerId]: rt
735
- })), E(i.layerId, rt));
736
- const ot = l[i.layerId] ?? { x: 0, y: 0 }, G = { x: nt, y: Lt };
737
- (ot.x !== G.x || ot.y !== G.y) && (u((X) => ({
738
- ...X,
739
- [i.layerId]: G
740
- })), v(i.layerId, {
741
- left: i.baseLeft + G.x,
742
- top: i.baseTop + G.y
743
- }));
744
- },
745
- [e, l, p, v, E]
746
- ), I = d.useCallback((c) => {
747
- const i = g.current;
748
- if (i) {
749
- if (i.pointerId === c.pointerId && i.target.releasePointerCapture)
750
- try {
751
- i.target.releasePointerCapture(i.pointerId);
752
- } catch {
753
- }
754
- g.current = null;
755
- }
756
- o(null);
757
- }, []), N = d.useCallback((c) => {
758
- const i = b.current;
759
- if (i) {
760
- if (i.pointerId === c.pointerId && i.target.releasePointerCapture)
761
- try {
762
- i.target.releasePointerCapture(i.pointerId);
763
- } catch {
764
- }
765
- b.current = null;
766
- }
767
- a(null);
768
- }, []);
769
- st(r !== null, {
770
- onMove: A,
771
- onUp: I,
772
- onCancel: I
773
- }), st(s !== null, {
774
- onMove: y,
775
- onUp: N,
776
- onCancel: N
777
- });
778
- const J = d.useCallback(
779
- (c) => {
780
- const i = ve(c), h = H(c);
781
- if (!h || h.draggable !== !0)
782
- return i;
783
- const m = l[c.id], z = r === c.id, C = s === c.id, S = m ? { transform: `translate(${m.x}px, ${m.y}px)` } : {}, T = p[c.id], k = O(c) ? Y(c) : null, D = T ?? k, B = D ? { width: `${D.width}px`, height: `${D.height}px` } : {};
784
- return {
785
- ...i,
786
- ...B,
787
- ...S,
788
- ...z || C ? { cursor: "grabbing" } : {}
789
- };
790
- },
791
- [r, l, p, s]
792
- ), Q = d.useCallback(
793
- (c) => {
794
- if (!O(c))
795
- return { isResizable: !1 };
796
- const h = p[c.id], m = Y(c);
797
- return (h ?? m) !== null ? { isResizable: !0, onPointerDown: (T, k) => {
798
- x(c.id, T, k);
799
- } } : { isResizable: !1 };
800
- },
801
- [x, p]
802
- ), tt = d.useCallback(
803
- (c) => {
804
- const { isResizable: i, onPointerDown: h } = Q(c), m = J(c), z = s === c.id;
805
- return {
806
- style: m,
807
- isResizable: i,
808
- isResizing: z,
809
- onResizeHandlePointerDown: (C, S) => {
810
- h && h(C, S);
811
- }
812
- };
813
- },
814
- [J, Q, s]
815
- ), et = d.useCallback(
816
- (c) => ({
817
- "data-drag-handle": "true",
818
- role: "button",
819
- "aria-roledescription": "Drag handle",
820
- "aria-label": "Drag layer",
821
- onPointerDown: (i) => {
822
- P(c, i);
823
- }
824
- }),
825
- [P]
826
- );
827
- return {
828
- providerValue: d.useMemo(
829
- () => ({
830
- handleLayerPointerDown: M,
831
- getLayerRenderState: tt,
832
- getLayerHandleProps: et,
833
- isRootLevel: n
834
- }),
835
- [et, tt, M, n]
836
- ),
837
- draggingLayerId: r,
838
- resizingLayerId: s
839
- };
840
- }, xe = (t) => {
841
- if (t.floating) {
842
- const e = t.floating.size ?? t.floating.defaultSize;
843
- if (e)
844
- return { width: e.width, height: e.height };
845
- }
846
- if (typeof t.width == "number" && typeof t.height == "number")
847
- return { width: t.width, height: t.height };
848
- }, It = {
849
- display: "grid",
850
- width: "100%",
851
- height: "100%",
852
- overflow: "hidden"
853
- }, ke = {
854
- touchAction: "none",
855
- WebkitTouchCallout: "none",
856
- WebkitUserSelect: "none",
857
- userSelect: "none"
858
- }, He = {
859
- ...It,
860
- overflow: "visible",
861
- height: "auto",
862
- minHeight: "100%"
863
- }, Ne = (t) => t ? He : It, Ke = ({ config: t, layers: e, style: n, root: r = !1 }) => {
864
- const o = d.useRef(null), { isIntersecting: s } = Ft(o, { threshold: 0 });
865
- return /* @__PURE__ */ w(xt, { config: t, layers: e, style: n, children: /* @__PURE__ */ w(Ae, { gridRef: o, isIntersecting: s, isRoot: r }) });
866
- }, Ae = ({ gridRef: t, isIntersecting: e, isRoot: n }) => {
867
- const { config: r, style: o, layers: s } = zt(), { normalizedLayers: a, visibleLayers: l, regularLayers: u, layerById: p } = Jt(r, s.defs), { columnHandles: f, rowHandles: g, gapSizes: b, gridStyle: v, handleResize: E } = ue(r, o, t), { providerValue: R, draggingLayerId: M, resizingLayerId: P } = Pe({
868
- layers: a,
869
- layerById: p,
870
- isRootLevel: n
871
- }), x = M ? !0 : !!P, A = d.useMemo(() => ({
872
- ...Ne(n),
873
- ...v,
874
- ...x ? ke : {}
875
- }), [v, x, n]);
876
- return /* @__PURE__ */ K(Z, { children: [
877
- /* @__PURE__ */ K(
878
- "div",
879
- {
880
- ref: t,
881
- style: A,
882
- "data-dragging": !!M,
883
- "data-resizing": !!P,
884
- "data-visible": e,
885
- children: [
886
- /* @__PURE__ */ w(kt, { value: R, children: /* @__PURE__ */ w(Ut, { layers: u }) }),
887
- f.map(({ trackIndex: y, align: I, span: N }) => /* @__PURE__ */ w(
888
- lt,
889
- {
890
- direction: "col",
891
- trackIndex: y,
892
- align: I,
893
- gap: b.columnGap,
894
- span: N,
895
- onResize: E
896
- },
897
- `col-${y}:${I}`
898
- )),
899
- g.map(({ trackIndex: y, align: I, span: N }) => /* @__PURE__ */ w(
900
- lt,
901
- {
902
- direction: "row",
903
- trackIndex: y,
904
- align: I,
905
- gap: b.rowGap,
906
- span: N,
907
- onResize: E
908
- },
909
- `row-${y}:${I}`
910
- ))
911
- ]
912
- }
913
- ),
914
- /* @__PURE__ */ w(Ht, { layers: l })
915
- ] });
916
- };
917
- export {
918
- Ke as G,
919
- Ut as a,
920
- Xt as b,
921
- lt as c,
922
- ue as d,
923
- yt as e,
924
- Ve as t,
925
- Jt as u
926
- };
927
- //# sourceMappingURL=GridLayout-BltqeCPK.js.map