react-arborist 1.2.0 → 2.0.0-rc

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 (120) hide show
  1. package/dist/components/{drop-cursor.d.ts → cursor.d.ts} +0 -0
  2. package/dist/components/default-container.d.ts +2 -0
  3. package/dist/components/default-cursor.d.ts +3 -0
  4. package/dist/components/default-drag-preview.d.ts +3 -0
  5. package/dist/components/default-node.d.ts +4 -0
  6. package/dist/components/default-row.d.ts +4 -0
  7. package/dist/components/drag-preview-container.d.ts +2 -0
  8. package/dist/components/list-inner-element.d.ts +2 -0
  9. package/dist/components/provider.d.ts +11 -0
  10. package/dist/components/row-container.d.ts +8 -0
  11. package/dist/components/tree-container.d.ts +2 -0
  12. package/dist/components/tree.d.ts +5 -4
  13. package/dist/context.d.ts +20 -2
  14. package/dist/data/create-index.d.ts +5 -0
  15. package/dist/data/create-list.d.ts +4 -0
  16. package/dist/data/create-root.d.ts +5 -0
  17. package/dist/data/flatten-tree.d.ts +4 -2
  18. package/dist/data/simple-tree.d.ts +43 -0
  19. package/dist/dnd/compute-drop.d.ts +4 -4
  20. package/dist/dnd/drag-hook.d.ts +3 -4
  21. package/dist/dnd/drop-hook.d.ts +2 -3
  22. package/dist/hooks/use-fresh-node.d.ts +2 -0
  23. package/dist/hooks/use-simple-tree.d.ts +13 -0
  24. package/dist/hooks/use-uncontrolled-tree.d.ts +24 -0
  25. package/dist/hooks/use-validated-props.d.ts +3 -0
  26. package/dist/index.d.ts +8 -4
  27. package/dist/index.js +1900 -971
  28. package/dist/index.js.map +1 -1
  29. package/dist/interfaces/node-api.d.ts +67 -0
  30. package/dist/interfaces/tree-api.d.ts +112 -0
  31. package/dist/module.js +1886 -976
  32. package/dist/module.js.map +1 -1
  33. package/dist/state/dnd-slice.d.ts +20 -0
  34. package/dist/state/drag-slice.d.ts +7 -0
  35. package/dist/state/edit-slice.d.ts +8 -0
  36. package/dist/state/focus-slice.d.ts +12 -0
  37. package/dist/state/initial.d.ts +3 -0
  38. package/dist/state/open-slice.d.ts +30 -0
  39. package/dist/state/root-reducer.d.ts +13 -0
  40. package/dist/state/selection-slice.d.ts +36 -0
  41. package/dist/types/dnd.d.ts +9 -0
  42. package/dist/types/handlers.d.ts +24 -0
  43. package/dist/types/renderers.d.ts +30 -0
  44. package/dist/types/state.d.ts +2 -0
  45. package/dist/types/tree-props.d.ts +43 -0
  46. package/dist/types/utils.d.ts +21 -0
  47. package/dist/utils/props.d.ts +3 -0
  48. package/dist/utils.d.ts +15 -6
  49. package/package.json +10 -7
  50. package/src/components/cursor.tsx +15 -0
  51. package/src/components/default-container.tsx +229 -0
  52. package/src/components/{default-drop-cursor.tsx → default-cursor.tsx} +9 -8
  53. package/src/components/{preview.tsx → default-drag-preview.tsx} +25 -41
  54. package/src/components/default-node.tsx +15 -0
  55. package/src/components/default-row.tsx +21 -0
  56. package/src/components/drag-preview-container.tsx +26 -0
  57. package/src/components/list-inner-element.tsx +22 -0
  58. package/src/components/list-outer-element.tsx +26 -15
  59. package/src/components/provider.tsx +97 -0
  60. package/src/components/row-container.tsx +82 -0
  61. package/src/components/tree-container.tsx +13 -0
  62. package/src/components/tree.tsx +16 -44
  63. package/src/context.ts +36 -0
  64. package/src/data/create-index.ts +9 -0
  65. package/src/data/create-list.ts +56 -0
  66. package/src/data/create-root.ts +53 -0
  67. package/src/data/simple-tree.ts +103 -0
  68. package/src/dnd/compute-drop.ts +16 -16
  69. package/src/dnd/drag-hook.ts +25 -19
  70. package/src/dnd/drop-hook.ts +31 -17
  71. package/src/dnd/outer-drop-hook.ts +1 -1
  72. package/src/hooks/use-fresh-node.ts +16 -0
  73. package/src/hooks/use-simple-tree.ts +55 -0
  74. package/src/hooks/use-validated-props.ts +35 -0
  75. package/src/index.ts +9 -19
  76. package/src/interfaces/node-api.ts +187 -0
  77. package/src/interfaces/tree-api.ts +552 -0
  78. package/src/state/dnd-slice.ts +36 -0
  79. package/src/state/drag-slice.ts +31 -0
  80. package/src/state/edit-slice.ts +19 -0
  81. package/src/state/focus-slice.ts +28 -0
  82. package/src/state/initial.ts +14 -0
  83. package/src/state/open-slice.ts +53 -0
  84. package/src/state/root-reducer.ts +21 -0
  85. package/src/state/selection-slice.ts +75 -0
  86. package/src/types/dnd.ts +10 -0
  87. package/src/types/handlers.ts +24 -0
  88. package/src/types/renderers.ts +34 -0
  89. package/src/types/state.ts +3 -0
  90. package/src/types/tree-props.ts +63 -0
  91. package/src/types/utils.ts +26 -0
  92. package/src/utils/props.ts +8 -0
  93. package/src/utils.ts +125 -11
  94. package/README.md +0 -221
  95. package/dist/components/default-drop-cursor.d.ts +0 -3
  96. package/dist/components/list.d.ts +0 -4
  97. package/dist/components/preview.d.ts +0 -2
  98. package/dist/components/row.d.ts +0 -8
  99. package/dist/data/enrich-tree.d.ts +0 -2
  100. package/dist/provider.d.ts +0 -3
  101. package/dist/reducer.d.ts +0 -46
  102. package/dist/selection/range.d.ts +0 -13
  103. package/dist/selection/selection-hook.d.ts +0 -4
  104. package/dist/selection/selection.d.ts +0 -33
  105. package/dist/tree-api.d.ts +0 -50
  106. package/dist/types.d.ts +0 -122
  107. package/src/components/drop-cursor.tsx +0 -12
  108. package/src/components/list.tsx +0 -25
  109. package/src/components/row.tsx +0 -112
  110. package/src/context.tsx +0 -13
  111. package/src/data/enrich-tree.ts +0 -74
  112. package/src/data/flatten-tree.ts +0 -17
  113. package/src/provider.tsx +0 -41
  114. package/src/reducer.ts +0 -161
  115. package/src/selection/range.ts +0 -41
  116. package/src/selection/selection-hook.ts +0 -25
  117. package/src/selection/selection.test.ts +0 -111
  118. package/src/selection/selection.ts +0 -186
  119. package/src/tree-api.ts +0 -230
  120. package/src/types.ts +0 -148
package/dist/module.js CHANGED
@@ -1,431 +1,72 @@
1
- import {jsx as $g00cZ$jsx, jsxs as $g00cZ$jsxs} from "react/jsx-runtime";
2
- import $g00cZ$react, {forwardRef as $g00cZ$forwardRef, useMemo as $g00cZ$useMemo, useReducer as $g00cZ$useReducer, useRef as $g00cZ$useRef, useLayoutEffect as $g00cZ$useLayoutEffect, useImperativeHandle as $g00cZ$useImperativeHandle, createContext as $g00cZ$createContext, useContext as $g00cZ$useContext, useEffect as $g00cZ$useEffect, memo as $g00cZ$memo, useCallback as $g00cZ$useCallback} from "react";
3
- import {DndProvider as $g00cZ$DndProvider, useDragLayer as $g00cZ$useDragLayer, useDrop as $g00cZ$useDrop, useDrag as $g00cZ$useDrag} from "react-dnd";
1
+ import {jsxs as $g00cZ$jsxs, jsx as $g00cZ$jsx, Fragment as $g00cZ$Fragment} from "react/jsx-runtime";
2
+ import $g00cZ$react, {forwardRef as $g00cZ$forwardRef, useRef as $g00cZ$useRef, useMemo as $g00cZ$useMemo, useImperativeHandle as $g00cZ$useImperativeHandle, useEffect as $g00cZ$useEffect, createContext as $g00cZ$createContext, useContext as $g00cZ$useContext, memo as $g00cZ$memo, useCallback as $g00cZ$useCallback, useState as $g00cZ$useState} from "react";
3
+ import {useSyncExternalStore as $g00cZ$useSyncExternalStore} from "use-sync-external-store/shim";
4
4
  import {HTML5Backend as $g00cZ$HTML5Backend, getEmptyImage as $g00cZ$getEmptyImage} from "react-dnd-html5-backend";
5
- import $g00cZ$memoizeone from "memoize-one";
6
- import $g00cZ$reactdom from "react-dom";
5
+ import {DndProvider as $g00cZ$DndProvider, useDrag as $g00cZ$useDrag, useDrop as $g00cZ$useDrop, useDragLayer as $g00cZ$useDragLayer} from "react-dnd";
6
+ import {createStore as $g00cZ$createStore, combineReducers as $g00cZ$combineReducers} from "redux";
7
7
  import {FixedSizeList as $g00cZ$FixedSizeList} from "react-window";
8
8
 
9
-
10
-
11
-
12
-
13
- function $1e5818ce7991d06d$var$createNode(model, level, parent, children, isOpen, isDraggable, isDroppable) {
14
- return {
15
- id: model.id,
16
- level: level,
17
- parent: parent,
18
- children: children,
19
- isOpen: isOpen,
20
- isDraggable: isDraggable,
21
- isDroppable: isDroppable,
22
- model: model,
23
- rowIndex: null
24
- };
25
- }
26
- function $1e5818ce7991d06d$var$access(obj, accessor) {
27
- if (typeof accessor === "boolean") return accessor;
28
- if (typeof accessor === "string") return obj[accessor];
29
- return accessor(obj);
30
- }
31
- function $1e5818ce7991d06d$export$9c537176392280a0(model1, hideRoot = false, getChildren = "children", isOpen = "isOpen", disableDrag = false, disableDrop = false, openByDefault = true) {
32
- function visitSelfAndChildren(model, level, parent) {
33
- const open = $1e5818ce7991d06d$var$access(model, isOpen);
34
- const draggable = !$1e5818ce7991d06d$var$access(model, disableDrag);
35
- const droppable = !$1e5818ce7991d06d$var$access(model, disableDrop);
36
- const node = $1e5818ce7991d06d$var$createNode(model, level, parent, null, open === undefined ? openByDefault : open, draggable, droppable);
37
- const children = $1e5818ce7991d06d$var$access(model, getChildren);
38
- if (children) node.children = children.map((child)=>visitSelfAndChildren(child, level + 1, node)
39
- );
40
- return node;
41
- }
42
- return visitSelfAndChildren(model1, hideRoot ? -1 : 0, null);
9
+ function $parcel$export(e, n, v, s) {
10
+ Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
43
11
  }
44
12
 
45
13
 
46
14
 
47
15
 
48
16
 
49
- const $3273af3fe11a7001$export$feef243b04ff4151 = /*#__PURE__*/ $g00cZ$createContext(null);
50
- function $3273af3fe11a7001$export$367b0f2231a90ba0() {
51
- const value = $g00cZ$useContext($3273af3fe11a7001$export$feef243b04ff4151);
17
+
18
+ const $89e93131aae74bd9$export$feef243b04ff4151 = (0, $g00cZ$createContext)(null);
19
+ function $89e93131aae74bd9$export$367b0f2231a90ba0() {
20
+ const value = (0, $g00cZ$useContext)($89e93131aae74bd9$export$feef243b04ff4151);
52
21
  if (value === null) throw new Error("No Tree Api Provided");
53
22
  return value;
54
23
  }
55
-
56
-
57
- class $043ce40ea783107b$export$9a58ef0d7ad3278c {
58
- constructor(start, end){
59
- this.start = start;
60
- this.end = end;
61
- if (this.start > this.end) throw new Error("Invalid range: start larger than end");
62
- }
63
- serialize() {
64
- return [
65
- this.start,
66
- this.end
67
- ];
68
- }
69
- contains(n) {
70
- return n >= this.start && n <= this.end;
71
- }
72
- overlaps(r) {
73
- return this.contains(r.start - 1) || this.contains(r.end + 1);
74
- }
75
- combine(r) {
76
- this.start = Math.min(r.start, this.start);
77
- this.end = Math.max(r.end, this.end);
78
- }
79
- get size() {
80
- return this.end - this.start + 1;
81
- }
82
- clone() {
83
- return new $043ce40ea783107b$export$9a58ef0d7ad3278c(this.start, this.end);
84
- }
85
- map(fn) {
86
- let returns = [];
87
- for(let i = this.start; i <= this.end; i++)returns.push(fn(i));
88
- return returns;
89
- }
90
- isEqual(other) {
91
- return this.start === other.start && this.end === other.end;
92
- }
93
- }
94
-
95
-
96
- class $5ee99f971bd267fd$export$52baac22726c72bf {
97
- static parse(data, items) {
98
- if (data) return new $5ee99f971bd267fd$export$52baac22726c72bf(data.ranges, data.currentIndex, data.direction, items);
99
- else return new $5ee99f971bd267fd$export$52baac22726c72bf();
100
- }
101
- constructor(ranges = [], currentIndex = ranges.length ? ranges.length - 1 : null, direction = "none", items = []){
102
- this.ranges = [];
103
- this.direction = "none";
104
- ranges.forEach(([s, e])=>this.addRange(s, e)
105
- );
106
- this.currentIndex = currentIndex;
107
- this.direction = direction;
108
- this.items = items;
109
- }
110
- get current() {
111
- if (this.currentIndex === null) return null;
112
- const range = this.ranges[this.currentIndex];
113
- if (!range) return null;
114
- else return range;
115
- }
116
- select(n) {
117
- if (n < 0 || n >= this.items.length) return;
118
- this.clear();
119
- this.currentIndex = this.addRange(n, n);
120
- }
121
- multiSelect(n) {
122
- if (n < 0 || n >= this.items.length) return;
123
- if (this.contains(n)) return;
124
- this.currentIndex = this.addRange(n, n);
125
- this.compact(n);
126
- }
127
- deselect(n) {
128
- if (n < 0 || n >= this.items.length) return;
129
- const r1 = this.ranges.find((r)=>r.contains(n)
130
- );
131
- if (!r1) return;
132
- else if (r1.size === 1) this.removeRange(r1);
133
- else if (r1.start === n) r1.start++;
134
- else if (r1.end === n) r1.end--;
135
- else {
136
- this.removeRange(r1);
137
- this.addRange(r1.start, n - 1);
138
- this.currentIndex = this.addRange(n + 1, r1.end);
139
- }
140
- }
141
- getSelectedItems() {
142
- return this.ranges.flatMap((range)=>range.map((index)=>this.items[index]
143
- )
144
- );
145
- }
146
- extend(n) {
147
- if (n < 0 || n >= this.items.length) return;
148
- if (this.isEmpty()) this.select(n);
149
- else {
150
- const anchor = this.getAnchor();
151
- if (anchor !== null && this.current) {
152
- const [start, end] = [
153
- n,
154
- anchor
155
- ].sort((a, b)=>a - b
156
- );
157
- this.current.start = start;
158
- this.current.end = end;
159
- this.compact(n);
160
- }
161
- }
162
- }
163
- contains(n) {
164
- if (n === null) return false;
165
- return this.ranges.some((r)=>r.contains(n)
166
- );
167
- }
168
- getRanges() {
169
- return this.ranges.map((r)=>r.serialize()
170
- );
171
- }
172
- clear() {
173
- this.ranges = [];
174
- this.currentIndex = null;
175
- this.direction = "none";
176
- }
177
- serialize() {
178
- return {
179
- ranges: this.getRanges(),
180
- currentIndex: this.currentIndex,
181
- direction: this.direction
182
- };
183
- }
184
- isEqual(other) {
185
- if (other.ranges.length !== this.ranges.length) return false;
186
- for(let i = 0; i < this.ranges.length; ++i){
187
- if (!this.ranges[i].isEqual(other.ranges[i])) return false;
188
- }
189
- return true;
190
- }
191
- addRange(start, end) {
192
- const r2 = new $043ce40ea783107b$export$9a58ef0d7ad3278c(start, end);
193
- // Keep ranges sorted by start
194
- const index = this.ranges.findIndex((r)=>r.start >= start
195
- );
196
- if (index === -1) this.ranges.push(r2);
197
- else this.ranges.splice(index, 0, r2);
198
- return index === -1 ? this.ranges.length - 1 : index;
199
- }
200
- removeRange(r) {
201
- const index = this.ranges.indexOf(r);
202
- this.ranges.splice(index, 1);
203
- if (this.isEmpty()) this.currentIndex = null;
204
- else if (index === this.currentIndex) this.currentIndex = this.ranges.length - 1;
205
- }
206
- isEmpty() {
207
- return this.ranges.length === 0;
208
- }
209
- getAnchor() {
210
- if (!this.current) return null;
211
- return this.direction === "backward" ? this.current.end : this.current.start;
212
- }
213
- getFocus() {
214
- if (!this.current) return -1;
215
- return this.direction === "backward" ? this.current.start : this.current.end;
216
- }
217
- compact(focus) {
218
- const removals = [];
219
- const current = this.current;
220
- for (let r3 of this.ranges){
221
- if (!this.current || r3 === this.current) continue;
222
- if (this.current.overlaps(r3)) {
223
- this.current.combine(r3);
224
- removals.push(r3);
225
- }
226
- }
227
- removals.forEach((r)=>this.removeRange(r)
228
- );
229
- if (current) this.currentIndex = this.ranges.indexOf(current);
230
- if (!this.current) return;
231
- if (this.current.start < focus) this.direction = "forward";
232
- else if (this.current.end > focus) this.direction = "backward";
233
- else this.direction = "none";
234
- }
235
- }
236
-
237
-
238
- const $b26f0eafd5701d7d$export$f6196a6c6bb539b4 = ()=>({
239
- visibleIds: [],
240
- cursor: {
241
- type: "none"
242
- },
243
- editingId: null,
244
- selection: {
245
- data: null,
246
- ids: []
247
- }
248
- })
249
- ;
250
- const $b26f0eafd5701d7d$export$e324594224ef24da = {
251
- setCursorLocation: (cursor)=>({
252
- type: "SET_CURSOR_LOCATION",
253
- cursor: cursor
254
- })
255
- ,
256
- setVisibleIds: (ids, idMap // id to index
257
- )=>({
258
- type: "SET_VISIBLE_IDS",
259
- ids: ids,
260
- idMap: idMap
261
- })
262
- ,
263
- select: (index, meta, shift)=>({
264
- type: "SELECT",
265
- index: index,
266
- meta: meta,
267
- shift: shift
268
- })
269
- ,
270
- selectId: (id)=>({
271
- type: "SELECT_ID",
272
- id: id
273
- })
274
- ,
275
- edit: (id)=>({
276
- type: "EDIT",
277
- id: id
278
- })
279
- ,
280
- stepUp: (shift, ids)=>({
281
- type: "STEP_UP",
282
- shift: shift
283
- })
284
- ,
285
- stepDown: (shift, ids)=>({
286
- type: "STEP_DOWN",
287
- shift: shift
288
- })
289
- };
290
- function $b26f0eafd5701d7d$export$1650419e431d3ba3(state, action) {
291
- switch(action.type){
292
- case "EDIT":
293
- return {
294
- ...state,
295
- editingId: action.id
296
- };
297
- case "SET_CURSOR_LOCATION":
298
- if ($b26f0eafd5701d7d$var$equal(state.cursor, action.cursor)) return state;
299
- else return {
300
- ...state,
301
- cursor: action.cursor
302
- };
303
- case "SELECT":
304
- var s = $5ee99f971bd267fd$export$52baac22726c72bf.parse(state.selection.data, state.visibleIds);
305
- if (action.index === null) s.clear();
306
- else if (action.meta) {
307
- if (s.contains(action.index)) s.deselect(action.index);
308
- else s.multiSelect(action.index);
309
- } else if (action.shift) s.extend(action.index);
310
- else s.select(action.index);
311
- return {
312
- ...state,
313
- selection: {
314
- data: s.serialize(),
315
- ids: s.getSelectedItems()
316
- }
317
- };
318
- case "SELECT_ID":
319
- return {
320
- ...state,
321
- selection: {
322
- ...state.selection,
323
- ids: [
324
- action.id
325
- ]
326
- }
327
- };
328
- case "STEP_UP":
329
- var s3 = $5ee99f971bd267fd$export$52baac22726c72bf.parse(state.selection.data, state.visibleIds);
330
- var f = s3.getFocus();
331
- if (action.shift) s3.extend(f - 1);
332
- else s3.select(f - 1);
333
- return {
334
- ...state,
335
- selection: {
336
- data: s3.serialize(),
337
- ids: s3.getSelectedItems()
338
- }
339
- };
340
- case "STEP_DOWN":
341
- var s6 = $5ee99f971bd267fd$export$52baac22726c72bf.parse(state.selection.data, state.visibleIds);
342
- var f2 = s6.getFocus();
343
- if (action.shift) s6.extend(f2 + 1);
344
- else s6.select(f2 + 1);
345
- return {
346
- ...state,
347
- selection: {
348
- data: s6.serialize(),
349
- ids: s6.getSelectedItems()
350
- }
351
- };
352
- case "SET_VISIBLE_IDS":
353
- // The visible ids changed
354
- var ids = state.selection.ids;
355
- // Start with a blank selection
356
- var s2 = new $5ee99f971bd267fd$export$52baac22726c72bf([], null, "none", state.visibleIds);
357
- // Add each of the old selected ids to this new selection
358
- for (let id of ids)if (id in action.idMap) s2.multiSelect(action.idMap[id]);
359
- return {
360
- ...state,
361
- visibleIds: action.ids,
362
- selection: {
363
- ids: ids,
364
- data: s2.serialize()
365
- }
366
- };
367
- default:
368
- return state;
369
- }
370
- }
371
- function $b26f0eafd5701d7d$var$equal(a, b) {
372
- if (a === null || b === null) return false;
373
- return JSON.stringify(a) === JSON.stringify(b);
24
+ const $89e93131aae74bd9$export$f6d467aa8b3786af = (0, $g00cZ$createContext)(null);
25
+ function $89e93131aae74bd9$export$fd23f19d5d8f3033() {
26
+ const value = (0, $g00cZ$useContext)($89e93131aae74bd9$export$f6d467aa8b3786af);
27
+ if (value === null) throw new Error("Provide a NodesContext");
28
+ return value;
374
29
  }
375
-
376
-
377
-
378
- function $bafe08914d05476b$export$de605877a37dc399(ref, api) {
379
- $g00cZ$useEffect(()=>{
380
- const el = ref.current;
381
- const cb = (e)=>{
382
- if (e.code === "ArrowDown") {
383
- e.preventDefault();
384
- api.selectDownwards(e.shiftKey);
385
- } else if (e.code === "ArrowUp") {
386
- e.preventDefault();
387
- api.selectUpwards(e.shiftKey);
388
- }
389
- };
390
- el?.addEventListener("keydown", cb);
391
- return ()=>{
392
- el?.removeEventListener("keydown", cb);
393
- };
394
- }, [
395
- ref,
396
- api
397
- ]);
30
+ const $89e93131aae74bd9$export$2d5c5ceac203fc1e = (0, $g00cZ$createContext)(null);
31
+ function $89e93131aae74bd9$export$4930f6bf413be70e() {
32
+ const value = (0, $g00cZ$useContext)($89e93131aae74bd9$export$2d5c5ceac203fc1e);
33
+ if (value === null) throw new Error("Provide a DnDContext");
34
+ return value;
398
35
  }
399
-
400
-
401
-
402
- function $4dcb7be69f759cab$export$79f9fa345a841d8b(root) {
403
- const list = [];
404
- let index = 0;
405
- function collect(node) {
406
- if (node.level >= 0) {
407
- node.rowIndex = index++;
408
- list.push(node);
409
- }
410
- if (node.isOpen) node.children?.forEach(collect);
411
- }
412
- collect(root);
413
- return list;
36
+ const $89e93131aae74bd9$export$d0c71bc5e3e2d897 = (0, $g00cZ$createContext)(0);
37
+ function $89e93131aae74bd9$export$83a4f9dc3b36edb8() {
38
+ (0, $g00cZ$useContext)($89e93131aae74bd9$export$d0c71bc5e3e2d897);
414
39
  }
415
40
 
416
41
 
417
-
418
-
42
+ var $bfece7c4aed4e9c4$exports = {};
43
+
44
+ $parcel$export($bfece7c4aed4e9c4$exports, "TreeApi", () => $bfece7c4aed4e9c4$export$e2da3477247342d1);
45
+ var $0e6083160f4b36ed$exports = {};
46
+
47
+ $parcel$export($0e6083160f4b36ed$exports, "bound", () => $0e6083160f4b36ed$export$adf7c0fe6059d774);
48
+ $parcel$export($0e6083160f4b36ed$exports, "isItem", () => $0e6083160f4b36ed$export$5318634f2ee07019);
49
+ $parcel$export($0e6083160f4b36ed$exports, "isClosed", () => $0e6083160f4b36ed$export$4210f5ea57fbae57);
50
+ $parcel$export($0e6083160f4b36ed$exports, "isDecendent", () => $0e6083160f4b36ed$export$1e38f72c6c546f70);
51
+ $parcel$export($0e6083160f4b36ed$exports, "indexOf", () => $0e6083160f4b36ed$export$305f7d4e9d4624f2);
52
+ $parcel$export($0e6083160f4b36ed$exports, "noop", () => $0e6083160f4b36ed$export$8793edee2d425525);
53
+ $parcel$export($0e6083160f4b36ed$exports, "dfs", () => $0e6083160f4b36ed$export$51b654aff22fc5a6);
54
+ $parcel$export($0e6083160f4b36ed$exports, "focusNextElement", () => $0e6083160f4b36ed$export$3b0237e8566c8d65);
55
+ $parcel$export($0e6083160f4b36ed$exports, "focusPrevElement", () => $0e6083160f4b36ed$export$33b47db07a82b2fb);
56
+ $parcel$export($0e6083160f4b36ed$exports, "access", () => $0e6083160f4b36ed$export$9bb0e144ba4929ca);
57
+ $parcel$export($0e6083160f4b36ed$exports, "identifyNull", () => $0e6083160f4b36ed$export$611823266272db76);
58
+ $parcel$export($0e6083160f4b36ed$exports, "identify", () => $0e6083160f4b36ed$export$65e5b62a4c490288);
59
+ $parcel$export($0e6083160f4b36ed$exports, "mergeRefs", () => $0e6083160f4b36ed$export$c9058316764c140e);
60
+ $parcel$export($0e6083160f4b36ed$exports, "safeRun", () => $0e6083160f4b36ed$export$c6d63370cef03886);
61
+ $parcel$export($0e6083160f4b36ed$exports, "waitFor", () => $0e6083160f4b36ed$export$9bbfceb27f687c1b);
419
62
  function $0e6083160f4b36ed$export$adf7c0fe6059d774(n, min, max) {
420
63
  return Math.max(Math.min(n, max), min);
421
64
  }
422
- const $0e6083160f4b36ed$export$769c5e872f5f8638 = (node)=>!!node.children
423
- ;
424
65
  function $0e6083160f4b36ed$export$5318634f2ee07019(node) {
425
- return node && !$0e6083160f4b36ed$export$769c5e872f5f8638(node);
66
+ return node && node.isLeaf;
426
67
  }
427
68
  function $0e6083160f4b36ed$export$4210f5ea57fbae57(node) {
428
- return node && $0e6083160f4b36ed$export$769c5e872f5f8638(node) && !node.isOpen;
69
+ return node && node.isInternal && !node.isOpen;
429
70
  }
430
71
  const $0e6083160f4b36ed$export$1e38f72c6c546f70 = (a, b)=>{
431
72
  let n = a;
@@ -436,289 +77,612 @@ const $0e6083160f4b36ed$export$1e38f72c6c546f70 = (a, b)=>{
436
77
  return false;
437
78
  };
438
79
  const $0e6083160f4b36ed$export$305f7d4e9d4624f2 = (node)=>{
439
- // This should probably not throw an error, but instead return null
440
80
  if (!node.parent) throw Error("Node does not have a parent");
441
- return node.parent.children.findIndex((c)=>c.id === node.id
442
- );
81
+ return node.parent.children.findIndex((c)=>c.id === node.id);
443
82
  };
444
- function $0e6083160f4b36ed$export$8793edee2d425525() {
83
+ function $0e6083160f4b36ed$export$8793edee2d425525() {}
84
+ function $0e6083160f4b36ed$export$51b654aff22fc5a6(node, id) {
85
+ if (!node) return null;
86
+ if (node.id === id) return node;
87
+ if (node.children) for (let child of node.children){
88
+ const result = $0e6083160f4b36ed$export$51b654aff22fc5a6(child, id);
89
+ if (result) return result;
90
+ }
91
+ return null;
92
+ }
93
+ function $0e6083160f4b36ed$export$3b0237e8566c8d65(target) {
94
+ const elements = $0e6083160f4b36ed$var$getFocusable(target);
95
+ let next;
96
+ for(let i = 0; i < elements.length; ++i){
97
+ const item = elements[i];
98
+ if (item === target) {
99
+ next = $0e6083160f4b36ed$var$nextItem(elements, i);
100
+ break;
101
+ }
102
+ }
103
+ // @ts-ignore ??
104
+ next?.focus();
105
+ }
106
+ function $0e6083160f4b36ed$export$33b47db07a82b2fb(target) {
107
+ const elements = $0e6083160f4b36ed$var$getFocusable(target);
108
+ let next;
109
+ for(let i = 0; i < elements.length; ++i){
110
+ const item = elements[i];
111
+ if (item === target) {
112
+ next = $0e6083160f4b36ed$var$prevItem(elements, i);
113
+ break;
114
+ }
115
+ }
116
+ // @ts-ignore
117
+ next?.focus();
118
+ }
119
+ function $0e6083160f4b36ed$var$nextItem(list, index) {
120
+ if (index + 1 < list.length) return list[index + 1];
121
+ else return list[0];
122
+ }
123
+ function $0e6083160f4b36ed$var$prevItem(list, index) {
124
+ if (index - 1 >= 0) return list[index - 1];
125
+ else return list[list.length - 1];
126
+ }
127
+ function $0e6083160f4b36ed$var$getFocusable(target) {
128
+ return Array.from(document.querySelectorAll('button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]):not([disabled]), details:not([disabled]), summary:not(:disabled)')).filter((e)=>e === target || !target.contains(e));
129
+ }
130
+ function $0e6083160f4b36ed$export$9bb0e144ba4929ca(obj, accessor) {
131
+ if (typeof accessor === "boolean") return accessor;
132
+ if (typeof accessor === "string") return obj[accessor];
133
+ return accessor(obj);
134
+ }
135
+ function $0e6083160f4b36ed$export$611823266272db76(obj) {
136
+ if (obj === null) return null;
137
+ else return $0e6083160f4b36ed$export$65e5b62a4c490288(obj);
138
+ }
139
+ function $0e6083160f4b36ed$export$65e5b62a4c490288(obj) {
140
+ return typeof obj === "string" ? obj : obj.id;
141
+ }
142
+ function $0e6083160f4b36ed$export$c9058316764c140e(...refs) {
143
+ return (instance)=>{
144
+ refs.forEach((ref)=>{
145
+ if (typeof ref === "function") ref(instance);
146
+ else if (ref != null) ref.current = instance;
147
+ });
148
+ };
149
+ }
150
+ function $0e6083160f4b36ed$export$c6d63370cef03886(fn, ...args) {
151
+ if (fn) return fn(...args);
152
+ }
153
+ function $0e6083160f4b36ed$export$9bbfceb27f687c1b(fn) {
154
+ return new Promise((resolve, reject)=>{
155
+ let tries = 0;
156
+ function check() {
157
+ tries += 1;
158
+ if (tries === 100) reject();
159
+ if (fn()) resolve();
160
+ else setTimeout(check, 10);
161
+ }
162
+ check();
163
+ });
445
164
  }
446
165
 
447
166
 
448
167
 
449
168
 
450
-
451
- const $1b40c8f40669603d$var$placeholderStyle = {
169
+ const $fb4c15d8425379bd$var$placeholderStyle = {
452
170
  display: "flex",
453
- alignItems: "center"
171
+ alignItems: "center",
172
+ zIndex: 1
454
173
  };
455
- const $1b40c8f40669603d$var$lineStyle = {
174
+ const $fb4c15d8425379bd$var$lineStyle = {
456
175
  flex: 1,
457
176
  height: "2px",
458
177
  background: "#4B91E2",
459
178
  borderRadius: "1px"
460
179
  };
461
- const $1b40c8f40669603d$var$circleStyle = {
180
+ const $fb4c15d8425379bd$var$circleStyle = {
462
181
  width: "4px",
463
182
  height: "4px",
464
183
  boxShadow: "0 0 0 3px #4B91E2",
465
184
  borderRadius: "50%"
466
185
  };
467
- function $1b40c8f40669603d$var$DefaultCursor({ top: top , left: left , indent: indent }) {
186
+ const $fb4c15d8425379bd$export$6cb3c16721363d11 = /*#__PURE__*/ (0, $g00cZ$react).memo(function DefaultCursor({ top: top , left: left , indent: indent }) {
468
187
  const style = {
469
188
  position: "absolute",
470
189
  pointerEvents: "none",
471
190
  top: top - 2 + "px",
472
- left: indent + left + "px",
191
+ left: left + "px",
473
192
  right: indent + "px"
474
193
  };
475
- return(/*#__PURE__*/ $g00cZ$jsxs("div", {
194
+ return /*#__PURE__*/ (0, $g00cZ$jsxs)("div", {
476
195
  style: {
477
- ...$1b40c8f40669603d$var$placeholderStyle,
196
+ ...$fb4c15d8425379bd$var$placeholderStyle,
478
197
  ...style
479
198
  },
480
199
  children: [
481
- /*#__PURE__*/ $g00cZ$jsx("div", {
200
+ /*#__PURE__*/ (0, $g00cZ$jsx)("div", {
482
201
  style: {
483
- ...$1b40c8f40669603d$var$circleStyle
202
+ ...$fb4c15d8425379bd$var$circleStyle
484
203
  }
485
204
  }),
486
- /*#__PURE__*/ $g00cZ$jsx("div", {
205
+ /*#__PURE__*/ (0, $g00cZ$jsx)("div", {
487
206
  style: {
488
- ...$1b40c8f40669603d$var$lineStyle
207
+ ...$fb4c15d8425379bd$var$lineStyle
489
208
  }
490
209
  })
491
210
  ]
492
- }));
211
+ });
212
+ });
213
+
214
+
215
+
216
+
217
+ function $164e874d21fcd87e$export$f9c541e71856c524({ node: node , attrs: attrs , innerRef: innerRef , children: children }) {
218
+ return /*#__PURE__*/ (0, $g00cZ$jsx)("div", {
219
+ ...attrs,
220
+ ref: innerRef,
221
+ onFocus: (e)=>e.stopPropagation(),
222
+ onClick: node.handleClick,
223
+ children: children
224
+ });
225
+ }
226
+
227
+
228
+
229
+
230
+ function $c4edd692d5290432$export$909e23cbfbbd3351({ style: style , node: node , dragHandle: dragHandle }) {
231
+ return /*#__PURE__*/ (0, $g00cZ$jsxs)("div", {
232
+ style: style,
233
+ ref: dragHandle,
234
+ children: [
235
+ "ID: ",
236
+ node.data.id
237
+ ]
238
+ });
239
+ }
240
+
241
+
242
+ function $21783d2b0251be67$export$e1a8e267487c59d1(id) {
243
+ return {
244
+ type: "EDIT",
245
+ id: id
246
+ };
493
247
  }
494
- function $1b40c8f40669603d$export$61a6f16446012f00(props) {
495
- return(/*#__PURE__*/ $g00cZ$jsx($1b40c8f40669603d$var$DefaultCursor, {
496
- ...props
497
- }));
248
+ function $21783d2b0251be67$export$1650419e431d3ba3(state = {
249
+ id: null
250
+ }, action) {
251
+ if (action.type === "EDIT") return {
252
+ ...state,
253
+ id: action.id
254
+ };
255
+ else return state;
498
256
  }
499
257
 
500
258
 
501
- class $40fcfa3e17312481$export$e2da3477247342d1 {
502
- constructor(dispatch, state, props, list, listEl){
503
- this.dispatch = dispatch;
504
- this.state = state;
505
- this.props = props;
506
- this.list = list;
507
- this.listEl = listEl;
508
- this.edits = new Map();
509
- }
510
- sync(other) {
511
- this.dispatch = other.dispatch;
512
- this.state = other.state;
513
- this.props = other.props;
514
- this.list = other.list;
515
- this.listEl = other.listEl;
516
- }
517
- getNode(id) {
518
- if (id in this.idToIndex) return this.visibleNodes[this.idToIndex[id]] || null;
519
- else return null;
520
- }
521
- getSelectedIds() {
522
- return this.state.selection.ids;
523
- }
524
- edit(id) {
525
- const sid = id.toString();
526
- this.resolveEdit(sid, {
527
- cancelled: true
528
- });
529
- this.scrollToId(sid);
530
- this.dispatch($b26f0eafd5701d7d$export$e324594224ef24da.edit(sid));
531
- return new Promise((resolve)=>this.edits.set(sid, resolve)
532
- );
533
- }
534
- submit(id, value) {
535
- const sid = id.toString();
536
- this.onEdit(sid, value);
537
- this.dispatch($b26f0eafd5701d7d$export$e324594224ef24da.edit(null));
538
- this.resolveEdit(sid, {
539
- cancelled: false,
540
- value: value
541
- });
259
+ function $c27b8e9863235052$export$d7ddd398f22d79ef(id) {
260
+ return {
261
+ type: "FOCUS",
262
+ id: id
263
+ };
264
+ }
265
+ function $c27b8e9863235052$export$6b6c976e46a06288() {
266
+ return {
267
+ type: "TREE_BLUR"
268
+ };
269
+ }
270
+ function $c27b8e9863235052$export$1650419e431d3ba3(state = {
271
+ id: null,
272
+ treeFocused: false
273
+ }, action) {
274
+ if (action.type === "FOCUS") return {
275
+ ...state,
276
+ id: action.id,
277
+ treeFocused: true
278
+ };
279
+ else if (action.type === "TREE_BLUR") return {
280
+ ...state,
281
+ treeFocused: false
282
+ };
283
+ else return state;
284
+ }
285
+
286
+
287
+ var $096e74084443e9a3$exports = {};
288
+
289
+ $parcel$export($096e74084443e9a3$exports, "NodeApi", () => $096e74084443e9a3$export$d4b903da0f522dc8);
290
+
291
+ class $096e74084443e9a3$export$d4b903da0f522dc8 {
292
+ constructor(params){
293
+ this.tree = params.tree;
294
+ this.id = params.id;
295
+ this.data = params.data;
296
+ this.level = params.level;
297
+ this.children = params.children;
298
+ this.parent = params.parent;
299
+ this.isDraggable = params.isDraggable;
300
+ this.isDroppable = params.isDroppable;
301
+ this.rowIndex = params.rowIndex;
542
302
  }
543
- reset(id) {
544
- const sid = id.toString();
545
- this.dispatch($b26f0eafd5701d7d$export$e324594224ef24da.edit(null));
546
- this.resolveEdit(sid, {
547
- cancelled: true
548
- });
303
+ get next() {
304
+ if (this.rowIndex === null) return null;
305
+ return this.tree.at(this.rowIndex + 1);
549
306
  }
550
- resolveEdit(id, value) {
551
- const resolve = this.edits.get(id.toString());
552
- if (resolve) resolve(value);
553
- this.edits.delete(id);
307
+ get prev() {
308
+ if (this.rowIndex === null) return null;
309
+ return this.tree.at(this.rowIndex - 1);
554
310
  }
555
- select(index, meta = false, shift = false) {
556
- this.dispatch($b26f0eafd5701d7d$export$e324594224ef24da.select(index, meta, shift));
311
+ get nextSibling() {
312
+ const i = this.childIndex;
313
+ return this.parent?.children[i + 1] ?? null;
557
314
  }
558
- selectById(id, meta = false, shift = false) {
559
- const index = this.idToIndex[id];
560
- this.select(index, meta, shift);
315
+ get isRoot() {
316
+ return this.id === (0, $81080a351c006222$export$ec71a3379b43ae5c);
561
317
  }
562
- selectUpwards(shiftKey) {
563
- this.dispatch($b26f0eafd5701d7d$export$e324594224ef24da.stepUp(shiftKey, this.visibleIds));
318
+ get isLeaf() {
319
+ return !Array.isArray(this.children);
564
320
  }
565
- selectDownwards(shiftKey) {
566
- this.dispatch($b26f0eafd5701d7d$export$e324594224ef24da.stepDown(shiftKey, this.visibleIds));
321
+ get isInternal() {
322
+ return !this.isLeaf;
567
323
  }
568
- hideCursor() {
569
- this.dispatch($b26f0eafd5701d7d$export$e324594224ef24da.setCursorLocation({
570
- type: "none"
571
- }));
324
+ get isOpen() {
325
+ return this.isLeaf ? false : this.tree.isOpen(this.id);
572
326
  }
573
- showCursor(cursor) {
574
- this.dispatch($b26f0eafd5701d7d$export$e324594224ef24da.setCursorLocation(cursor));
327
+ get isEditing() {
328
+ return this.tree.editingId === this.id;
575
329
  }
576
- scrollToId(id) {
577
- if (!this.list) return;
578
- const index1 = this.idToIndex[id];
579
- if (index1) this.list.current?.scrollToItem(index1);
580
- else {
581
- this.openParents(id);
582
- $g00cZ$reactdom.flushSync(()=>{
583
- const index = this.idToIndex[id];
584
- if (index) this.list.current?.scrollToItem(index);
585
- });
586
- }
330
+ get isSelected() {
331
+ return this.tree.isSelected(this.id);
587
332
  }
588
- open(id) {
589
- this.onToggle(id, true);
333
+ get isSelectedStart() {
334
+ return this.isSelected && !this.prev?.isSelected;
590
335
  }
591
- openParents(id) {
592
- const node = $40fcfa3e17312481$var$dfs(this.props.root, id);
593
- let parent = node?.parent;
594
- while(parent){
595
- this.open(parent.id);
596
- parent = parent.parent;
597
- }
336
+ get isSelectedEnd() {
337
+ return this.isSelected && !this.next?.isSelected;
598
338
  }
599
- get visibleIds() {
600
- return $40fcfa3e17312481$var$getIds(this.visibleNodes);
339
+ get isFocused() {
340
+ return this.tree.isFocused(this.id);
601
341
  }
602
- get idToIndex() {
603
- return $40fcfa3e17312481$var$createIndex(this.visibleNodes);
342
+ get childIndex() {
343
+ if (this.parent && this.parent.children) return this.parent.children.findIndex((child)=>child.id === this.id);
344
+ else return -1;
604
345
  }
605
- get visibleNodes() {
606
- return $40fcfa3e17312481$var$createList(this.props.root);
346
+ get isDragging() {
347
+ return this.tree.isDragging(this.id);
607
348
  }
608
- get width() {
609
- return this.props.treeProps.width || 300;
349
+ get willReceiveDrop() {
350
+ return this.tree.willReceiveDrop(this.id);
610
351
  }
611
- get height() {
612
- return this.props.treeProps.height || 500;
352
+ get state() {
353
+ return {
354
+ isEditing: this.isEditing,
355
+ isDragging: this.isDragging,
356
+ isSelected: this.isSelected,
357
+ isSelectedStart: this.isSelectedStart,
358
+ isSelectedEnd: this.isSelectedEnd,
359
+ isFocused: this.isFocused,
360
+ isOpen: this.isOpen,
361
+ willReceiveDrop: this.willReceiveDrop
362
+ };
613
363
  }
614
- get indent() {
615
- return this.props.treeProps.indent || 24;
364
+ select() {
365
+ this.tree.select(this);
616
366
  }
617
- get renderer() {
618
- return this.props.treeProps.children;
367
+ deselect() {
368
+ this.tree.deselect(this);
619
369
  }
620
- get onToggle() {
621
- return this.props.treeProps.onToggle || $0e6083160f4b36ed$export$8793edee2d425525;
370
+ selectMulti() {
371
+ this.tree.selectMulti(this);
622
372
  }
623
- get rowHeight() {
624
- return this.props.treeProps.rowHeight || 24;
373
+ selectContiguous() {
374
+ this.tree.selectContiguous(this);
625
375
  }
626
- get onClick() {
627
- return this.props.treeProps.onClick || $0e6083160f4b36ed$export$8793edee2d425525;
376
+ activate() {
377
+ this.tree.activate(this);
628
378
  }
629
- get onContextMenu() {
630
- return this.props.treeProps.onContextMenu || $0e6083160f4b36ed$export$8793edee2d425525;
379
+ focus() {
380
+ this.tree.focus(this);
631
381
  }
632
- get onMove() {
633
- return this.props.treeProps.onMove || $0e6083160f4b36ed$export$8793edee2d425525;
382
+ toggle() {
383
+ this.tree.toggle(this);
634
384
  }
635
- get onEdit() {
636
- return this.props.treeProps.onEdit || $0e6083160f4b36ed$export$8793edee2d425525;
385
+ open() {
386
+ this.tree.open(this);
637
387
  }
638
- get cursorParentId() {
639
- const { cursor: cursor } = this.state;
640
- switch(cursor.type){
641
- case "highlight":
642
- return cursor.id;
643
- default:
644
- return null;
645
- }
388
+ openParents() {
389
+ this.tree.openParents(this);
646
390
  }
647
- get cursorOverFolder() {
648
- return this.state.cursor.type === "highlight";
391
+ close() {
392
+ this.tree.close(this);
649
393
  }
650
- get editingId() {
651
- return this.state.editingId;
394
+ submit(value) {
395
+ this.tree.submit(this, value);
652
396
  }
653
- isSelected(index) {
654
- const selection = $5ee99f971bd267fd$export$52baac22726c72bf.parse(this.state.selection.data, []);
655
- return selection.contains(index);
397
+ reset() {
398
+ this.tree.reset();
656
399
  }
657
- renderDropCursor(props) {
658
- const render = this.props.treeProps.dropCursor || $1b40c8f40669603d$export$61a6f16446012f00;
659
- return render(props);
400
+ clone() {
401
+ return new $096e74084443e9a3$export$d4b903da0f522dc8({
402
+ ...this
403
+ });
660
404
  }
661
- }
662
- const $40fcfa3e17312481$var$getIds = $g00cZ$memoizeone((nodes)=>nodes.map((n)=>n.id
663
- )
664
- );
665
- const $40fcfa3e17312481$var$createIndex = $g00cZ$memoizeone((nodes)=>{
666
- return nodes.reduce((map, node, index)=>{
667
- map[node.id] = index;
668
- return map;
669
- }, {
670
- });
671
- });
672
- const $40fcfa3e17312481$var$createList = $g00cZ$memoizeone($4dcb7be69f759cab$export$79f9fa345a841d8b);
673
- function $40fcfa3e17312481$var$dfs(node, id) {
674
- if (!node) return null;
675
- if (node.id === id) return node;
676
- if (node.children) for (let child of node.children){
677
- const result = $40fcfa3e17312481$var$dfs(child, id);
678
- if (result) return result;
405
+ edit() {
406
+ return this.tree.edit(this);
679
407
  }
680
- return null;
408
+ handleClick = (e)=>{
409
+ if (e.metaKey) this.isSelected ? this.deselect() : this.selectMulti();
410
+ else if (e.shiftKey) this.selectContiguous();
411
+ else {
412
+ this.select();
413
+ this.activate();
414
+ }
415
+ };
681
416
  }
682
417
 
683
418
 
684
- function $3a48b0a92affa3e3$export$6a399b2f7f12632c(props) {
685
- const [state, dispatch] = $g00cZ$useReducer($b26f0eafd5701d7d$export$1650419e431d3ba3, $b26f0eafd5701d7d$export$f6196a6c6bb539b4());
686
- const list = $g00cZ$useRef(null);
687
- const listEl = $g00cZ$useRef(null);
688
- const api = $g00cZ$useMemo(()=>new $40fcfa3e17312481$export$e2da3477247342d1(dispatch, state, props, list, listEl)
689
- , [
690
- dispatch,
691
- state,
692
- props,
693
- list,
694
- listEl
695
- ]);
696
- /**
697
- * This ensures that the selection remains correct even
698
- * after opening and closing a folders
699
- */ $g00cZ$useLayoutEffect(()=>{
700
- dispatch($b26f0eafd5701d7d$export$e324594224ef24da.setVisibleIds(api.visibleIds, api.idToIndex));
701
- }, [
702
- dispatch,
703
- api.visibleIds,
704
- api.idToIndex,
705
- props.root
706
- ]);
707
- $g00cZ$useImperativeHandle(props.imperativeHandle, ()=>api
708
- );
709
- $bafe08914d05476b$export$de605877a37dc399(listEl, api);
710
- return(/*#__PURE__*/ $g00cZ$jsx($3273af3fe11a7001$export$feef243b04ff4151.Provider, {
711
- value: api,
712
- children: props.children
713
- }));
419
+ const $81080a351c006222$export$ec71a3379b43ae5c = "__REACT_ARBORIST_INTERNAL_ROOT__";
420
+ function $81080a351c006222$export$882461b6382ed46c(tree) {
421
+ function visitSelfAndChildren(data, level, parent) {
422
+ const node = new (0, $096e74084443e9a3$export$d4b903da0f522dc8)({
423
+ tree: tree,
424
+ data: data,
425
+ level: level,
426
+ parent: parent,
427
+ id: data.id,
428
+ children: null,
429
+ isDraggable: tree.isDraggable(data),
430
+ isDroppable: tree.isDroppable(data),
431
+ rowIndex: null
432
+ });
433
+ const children = tree.getChildren(data);
434
+ if (children) node.children = children.map((child)=>visitSelfAndChildren(child, level + 1, node));
435
+ return node;
436
+ }
437
+ const root = new (0, $096e74084443e9a3$export$d4b903da0f522dc8)({
438
+ tree: tree,
439
+ id: $81080a351c006222$export$ec71a3379b43ae5c,
440
+ // @ts-ignore
441
+ data: {
442
+ id: $81080a351c006222$export$ec71a3379b43ae5c
443
+ },
444
+ level: -1,
445
+ parent: null,
446
+ children: null,
447
+ isDraggable: true,
448
+ isDroppable: true,
449
+ rowIndex: null
450
+ });
451
+ const data = tree.props.data ?? [];
452
+ root.children = data.map((child)=>{
453
+ return visitSelfAndChildren(child, 0, root);
454
+ });
455
+ return root;
714
456
  }
715
457
 
716
458
 
459
+ const $3c0bad2888bcd4bc$export$e324594224ef24da = {
460
+ open (id, filtered) {
461
+ return {
462
+ type: "VISIBILITY_OPEN",
463
+ id: id,
464
+ filtered: filtered
465
+ };
466
+ },
467
+ close (id, filtered) {
468
+ return {
469
+ type: "VISIBILITY_CLOSE",
470
+ id: id,
471
+ filtered: filtered
472
+ };
473
+ },
474
+ toggle (id, filtered) {
475
+ return {
476
+ type: "VISIBILITY_TOGGLE",
477
+ id: id,
478
+ filtered: filtered
479
+ };
480
+ },
481
+ clear (filtered) {
482
+ return {
483
+ type: "VISIBILITY_CLEAR",
484
+ filtered: filtered
485
+ };
486
+ }
487
+ };
488
+ /* Reducer */ function $3c0bad2888bcd4bc$var$openMapReducer(state = {}, action) {
489
+ if (action.type === "VISIBILITY_OPEN") return {
490
+ ...state,
491
+ [action.id]: true
492
+ };
493
+ else if (action.type === "VISIBILITY_CLOSE") return {
494
+ ...state,
495
+ [action.id]: false
496
+ };
497
+ else if (action.type === "VISIBILITY_TOGGLE") {
498
+ const prev = state[action.id];
499
+ return {
500
+ ...state,
501
+ [action.id]: !prev
502
+ };
503
+ } else if (action.type === "VISIBILITY_CLEAR") return {};
504
+ else return state;
505
+ }
506
+ function $3c0bad2888bcd4bc$export$1650419e431d3ba3(state = {
507
+ filtered: {},
508
+ unfiltered: {}
509
+ }, action) {
510
+ if (!action.type.startsWith("VISIBILITY")) return state;
511
+ if (action.filtered) return {
512
+ ...state,
513
+ filtered: $3c0bad2888bcd4bc$var$openMapReducer(state.filtered, action)
514
+ };
515
+ else return {
516
+ ...state,
517
+ unfiltered: $3c0bad2888bcd4bc$var$openMapReducer(state.unfiltered, action)
518
+ };
519
+ }
520
+
521
+
522
+
523
+ const $6ad32e02250c922e$export$d4c72bab9d6cc13a = (props)=>({
524
+ nodes: {
525
+ // Changes together
526
+ open: {
527
+ filtered: {},
528
+ unfiltered: props?.initialOpenState ?? {}
529
+ },
530
+ focus: {
531
+ id: null,
532
+ treeFocused: false
533
+ },
534
+ edit: {
535
+ id: null
536
+ },
537
+ drag: {
538
+ id: null,
539
+ idWillReceiveDrop: null
540
+ },
541
+ selection: {
542
+ ids: new Set(),
543
+ anchor: null,
544
+ mostRecent: null
545
+ }
546
+ },
547
+ dnd: {
548
+ cursor: {
549
+ type: "none"
550
+ },
551
+ dragId: null
552
+ }
553
+ });
554
+
555
+
556
+ const $37bc167debff36d2$export$e324594224ef24da = {
557
+ clear: ()=>({
558
+ type: "SELECTION_CLEAR"
559
+ }),
560
+ only: (id)=>({
561
+ type: "SELECTION_ONLY",
562
+ id: (0, $0e6083160f4b36ed$export$65e5b62a4c490288)(id)
563
+ }),
564
+ add: (id)=>({
565
+ type: "SELECTION_ADD",
566
+ ids: (Array.isArray(id) ? id : [
567
+ id
568
+ ]).map((0, $0e6083160f4b36ed$export$65e5b62a4c490288))
569
+ }),
570
+ remove: (id)=>({
571
+ type: "SELECTION_REMOVE",
572
+ ids: (Array.isArray(id) ? id : [
573
+ id
574
+ ]).map((0, $0e6083160f4b36ed$export$65e5b62a4c490288))
575
+ }),
576
+ set: (ids)=>({
577
+ type: "SELECTION_SET",
578
+ ids: ids
579
+ }),
580
+ mostRecent: (id)=>({
581
+ type: "SELECTION_MOST_RECENT",
582
+ id: id === null ? null : (0, $0e6083160f4b36ed$export$65e5b62a4c490288)(id)
583
+ }),
584
+ anchor: (id)=>({
585
+ type: "SELECTION_ANCHOR",
586
+ id: id === null ? null : (0, $0e6083160f4b36ed$export$65e5b62a4c490288)(id)
587
+ })
588
+ };
589
+ function $37bc167debff36d2$export$1650419e431d3ba3(state = (0, $6ad32e02250c922e$export$d4c72bab9d6cc13a)()["nodes"]["selection"], action) {
590
+ const ids = state.ids;
591
+ switch(action.type){
592
+ case "SELECTION_CLEAR":
593
+ return {
594
+ ...state,
595
+ ids: new Set()
596
+ };
597
+ case "SELECTION_ONLY":
598
+ return {
599
+ ...state,
600
+ ids: new Set([
601
+ action.id
602
+ ])
603
+ };
604
+ case "SELECTION_ADD":
605
+ if (action.ids.length === 0) return state;
606
+ action.ids.forEach((id)=>ids.add(id));
607
+ return {
608
+ ...state,
609
+ ids: new Set(ids)
610
+ };
611
+ case "SELECTION_REMOVE":
612
+ if (action.ids.length === 0) return state;
613
+ action.ids.forEach((id)=>ids.delete(id));
614
+ return {
615
+ ...state,
616
+ ids: new Set(ids)
617
+ };
618
+ case "SELECTION_SET":
619
+ return {
620
+ ...state,
621
+ ids: new Set(action.ids)
622
+ };
623
+ case "SELECTION_MOST_RECENT":
624
+ return {
625
+ ...state,
626
+ mostRecent: action.id
627
+ };
628
+ case "SELECTION_ANCHOR":
629
+ return {
630
+ ...state,
631
+ anchor: action.id
632
+ };
633
+ default:
634
+ return state;
635
+ }
636
+ }
637
+
638
+
639
+
640
+ const $59f144a8dd651e5e$export$e324594224ef24da = {
641
+ cursor (cursor) {
642
+ return {
643
+ type: "DND_CURSOR",
644
+ cursor: cursor
645
+ };
646
+ },
647
+ dragStart (id) {
648
+ return {
649
+ type: "DND_DRAG_START",
650
+ id: id
651
+ };
652
+ },
653
+ dragEnd () {
654
+ return {
655
+ type: "DND_DRAG_END"
656
+ };
657
+ }
658
+ };
659
+ function $59f144a8dd651e5e$export$1650419e431d3ba3(state = (0, $6ad32e02250c922e$export$d4c72bab9d6cc13a)()["dnd"], action) {
660
+ switch(action.type){
661
+ case "DND_CURSOR":
662
+ return {
663
+ ...state,
664
+ cursor: action.cursor
665
+ };
666
+ case "DND_DRAG_START":
667
+ return {
668
+ ...state,
669
+ dragId: action.id
670
+ };
671
+ case "DND_DRAG_END":
672
+ return {
673
+ ...state,
674
+ dragId: null
675
+ };
676
+ default:
677
+ return state;
678
+ }
679
+ }
717
680
 
718
-
719
-
720
-
721
- const $6d8109ab8cbcd5e7$var$layerStyles = {
681
+
682
+
683
+
684
+
685
+ const $77d34d95e44d2f58$var$layerStyles = {
722
686
  position: "fixed",
723
687
  pointerEvents: "none",
724
688
  zIndex: 100,
@@ -727,7 +691,7 @@ const $6d8109ab8cbcd5e7$var$layerStyles = {
727
691
  width: "100%",
728
692
  height: "100%"
729
693
  };
730
- const $6d8109ab8cbcd5e7$var$getStyle = (offset)=>{
694
+ const $77d34d95e44d2f58$var$getStyle = (offset)=>{
731
695
  if (!offset) return {
732
696
  display: "none"
733
697
  };
@@ -736,7 +700,7 @@ const $6d8109ab8cbcd5e7$var$getStyle = (offset)=>{
736
700
  transform: `translate(${x}px, ${y}px)`
737
701
  };
738
702
  };
739
- const $6d8109ab8cbcd5e7$var$getCountStyle = (offset)=>{
703
+ const $77d34d95e44d2f58$var$getCountStyle = (offset)=>{
740
704
  if (!offset) return {
741
705
  display: "none"
742
706
  };
@@ -745,96 +709,195 @@ const $6d8109ab8cbcd5e7$var$getCountStyle = (offset)=>{
745
709
  transform: `translate(${x + 10}px, ${y + 10}px)`
746
710
  };
747
711
  };
748
- function $6d8109ab8cbcd5e7$export$133773870222880f() {
749
- const { offset: offset , mouse: mouse , item: item , isDragging: isDragging } = $g00cZ$useDragLayer((m)=>({
750
- offset: m.getSourceClientOffset(),
751
- mouse: m.getClientOffset(),
752
- item: m.getItem(),
753
- isDragging: m.isDragging()
754
- })
755
- );
756
- return(/*#__PURE__*/ $g00cZ$jsxs($6d8109ab8cbcd5e7$var$Overlay, {
712
+ function $77d34d95e44d2f58$export$84e211ad8431a387({ offset: offset , mouse: mouse , id: id , dragIds: dragIds , isDragging: isDragging }) {
713
+ return /*#__PURE__*/ (0, $g00cZ$jsxs)($77d34d95e44d2f58$var$Overlay, {
757
714
  isDragging: isDragging,
758
715
  children: [
759
- /*#__PURE__*/ $g00cZ$jsx($6d8109ab8cbcd5e7$var$Position, {
716
+ /*#__PURE__*/ (0, $g00cZ$jsx)($77d34d95e44d2f58$var$Position, {
760
717
  offset: offset,
761
- children: /*#__PURE__*/ $g00cZ$jsx($6d8109ab8cbcd5e7$var$PreviewNode, {
762
- item: item
718
+ children: /*#__PURE__*/ (0, $g00cZ$jsx)($77d34d95e44d2f58$var$PreviewNode, {
719
+ id: id,
720
+ dragIds: dragIds
763
721
  })
764
722
  }),
765
- /*#__PURE__*/ $g00cZ$jsx($6d8109ab8cbcd5e7$var$Count, {
723
+ /*#__PURE__*/ (0, $g00cZ$jsx)($77d34d95e44d2f58$var$Count, {
766
724
  mouse: mouse,
767
- item: item
725
+ count: dragIds.length
768
726
  })
769
727
  ]
770
- }));
728
+ });
771
729
  }
772
- const $6d8109ab8cbcd5e7$var$Overlay = /*#__PURE__*/ $g00cZ$memo(function Overlay(props) {
730
+ const $77d34d95e44d2f58$var$Overlay = /*#__PURE__*/ (0, $g00cZ$memo)(function Overlay(props) {
773
731
  if (!props.isDragging) return null;
774
- return(/*#__PURE__*/ $g00cZ$jsx("div", {
775
- style: $6d8109ab8cbcd5e7$var$layerStyles,
732
+ return /*#__PURE__*/ (0, $g00cZ$jsx)("div", {
733
+ style: $77d34d95e44d2f58$var$layerStyles,
776
734
  children: props.children
777
- }));
735
+ });
778
736
  });
779
- function $6d8109ab8cbcd5e7$var$Position(props) {
780
- return(/*#__PURE__*/ $g00cZ$jsx("div", {
737
+ function $77d34d95e44d2f58$var$Position(props) {
738
+ return /*#__PURE__*/ (0, $g00cZ$jsx)("div", {
781
739
  className: "row preview",
782
- style: $6d8109ab8cbcd5e7$var$getStyle(props.offset),
740
+ style: $77d34d95e44d2f58$var$getStyle(props.offset),
783
741
  children: props.children
784
- }));
742
+ });
785
743
  }
786
- function $6d8109ab8cbcd5e7$var$Count(props) {
787
- const { item: item , mouse: mouse } = props;
788
- if (item?.dragIds?.length > 1) return(/*#__PURE__*/ $g00cZ$jsx("div", {
744
+ function $77d34d95e44d2f58$var$Count(props) {
745
+ const { count: count , mouse: mouse } = props;
746
+ if (count > 1) return /*#__PURE__*/ (0, $g00cZ$jsx)("div", {
789
747
  className: "selected-count",
790
- style: $6d8109ab8cbcd5e7$var$getCountStyle(mouse),
791
- children: item.dragIds.length
792
- }));
748
+ style: $77d34d95e44d2f58$var$getCountStyle(mouse),
749
+ children: count
750
+ });
793
751
  else return null;
794
752
  }
795
- const $6d8109ab8cbcd5e7$var$PreviewNode = /*#__PURE__*/ $g00cZ$memo(function PreviewNode(props) {
796
- const tree = $3273af3fe11a7001$export$367b0f2231a90ba0();
797
- if (!props.item) return null;
798
- const node = tree.getNode(props.item.id);
753
+ const $77d34d95e44d2f58$var$PreviewNode = /*#__PURE__*/ (0, $g00cZ$memo)(function PreviewNode(props) {
754
+ const tree = (0, $89e93131aae74bd9$export$367b0f2231a90ba0)();
755
+ const node = tree.get(props.id);
799
756
  if (!node) return null;
800
- return(/*#__PURE__*/ $g00cZ$jsx(tree.renderer, {
757
+ return /*#__PURE__*/ (0, $g00cZ$jsx)(tree.renderNode, {
801
758
  preview: true,
802
- innerRef: ()=>{
759
+ node: node,
760
+ style: {
761
+ paddingLeft: node.level * tree.indent,
762
+ opacity: 0.2,
763
+ background: "transparent"
803
764
  },
804
- data: node.model,
805
- styles: {
806
- row: {
807
- },
808
- indent: {
809
- paddingLeft: node.level * tree.indent
810
- }
765
+ tree: tree
766
+ });
767
+ });
768
+
769
+
770
+
771
+
772
+
773
+
774
+
775
+
776
+
777
+
778
+
779
+ function $f608be224a71d6f5$export$ef961593063b03e8() {
780
+ const tree = (0, $89e93131aae74bd9$export$367b0f2231a90ba0)();
781
+ const state = (0, $89e93131aae74bd9$export$4930f6bf413be70e)();
782
+ const cursor = state.cursor;
783
+ if (!cursor || cursor.type !== "line") return null;
784
+ const indent = tree.indent;
785
+ const top = tree.rowHeight * cursor.index + ((tree.props.padding ?? tree.props.paddingTop) ?? 0);
786
+ const left = indent * cursor.level;
787
+ const Cursor = tree.renderCursor;
788
+ return /*#__PURE__*/ (0, $g00cZ$jsx)(Cursor, {
789
+ top: top,
790
+ left: left,
791
+ indent: indent
792
+ });
793
+ }
794
+
795
+
796
+ const $05f64c7ebcbad8b5$export$70c2b8898b86d3ad = /*#__PURE__*/ (0, $g00cZ$forwardRef)(function Outer(props, ref) {
797
+ const { children: children , ...rest } = props;
798
+ const tree = (0, $89e93131aae74bd9$export$367b0f2231a90ba0)();
799
+ return /*#__PURE__*/ (0, $g00cZ$jsxs)("div", {
800
+ // @ts-ignore
801
+ ref: ref,
802
+ ...rest,
803
+ onClick: (e)=>{
804
+ if (e.currentTarget === e.target) tree.selectNone();
811
805
  },
812
- tree: tree,
813
- state: {
814
- isDragging: false,
815
- isEditing: false,
816
- isSelected: false,
817
- isSelectedStart: false,
818
- isSelectedEnd: false,
819
- isHoveringOverChild: false,
820
- isOpen: node.isOpen
806
+ children: [
807
+ /*#__PURE__*/ (0, $g00cZ$jsx)($05f64c7ebcbad8b5$var$DropContainer, {}),
808
+ children
809
+ ]
810
+ });
811
+ });
812
+ const $05f64c7ebcbad8b5$var$DropContainer = ()=>{
813
+ const tree = (0, $89e93131aae74bd9$export$367b0f2231a90ba0)();
814
+ return /*#__PURE__*/ (0, $g00cZ$jsx)("div", {
815
+ style: {
816
+ height: tree.visibleNodes.length * tree.rowHeight,
817
+ width: "100%",
818
+ position: "absolute",
819
+ left: "0",
820
+ right: "0"
821
821
  },
822
- handlers: {
823
- edit: ()=>Promise.resolve({
824
- cancelled: true
825
- })
826
- ,
827
- select: ()=>{
828
- },
829
- toggle: ()=>{
830
- },
831
- submit: ()=>{
822
+ onClick: (e)=>{
823
+ console.log(e.currentTarget, e.target);
824
+ },
825
+ children: /*#__PURE__*/ (0, $g00cZ$jsx)((0, $f608be224a71d6f5$export$ef961593063b03e8), {})
826
+ });
827
+ };
828
+
829
+
830
+
831
+
832
+
833
+
834
+ const $da9a6b47b6fff922$export$a9af0da3ae60cd00 = /*#__PURE__*/ (0, $g00cZ$forwardRef)(function InnerElement({ style: style , ...rest }, ref) {
835
+ const tree = (0, $89e93131aae74bd9$export$367b0f2231a90ba0)();
836
+ const paddingTop = (tree.props.padding ?? tree.props.paddingTop) ?? 0;
837
+ const paddingBottom = (tree.props.padding ?? tree.props.paddingBottom) ?? 0;
838
+ return /*#__PURE__*/ (0, $g00cZ$jsx)("div", {
839
+ ref: ref,
840
+ style: {
841
+ ...style,
842
+ height: `${parseFloat(style.height) + paddingTop + paddingBottom}px`
843
+ },
844
+ ...rest
845
+ });
846
+ });
847
+
848
+
849
+
850
+
851
+
852
+
853
+
854
+
855
+
856
+
857
+
858
+
859
+ function $907e707a330ef23a$export$715c0d031ede7907(node) {
860
+ const tree = (0, $89e93131aae74bd9$export$367b0f2231a90ba0)();
861
+ const ids = tree.selectedIds;
862
+ const [_, ref, preview] = (0, $g00cZ$useDrag)(()=>({
863
+ canDrag: ()=>node.isDraggable,
864
+ type: "NODE",
865
+ item: ()=>({
866
+ id: node.id,
867
+ dragIds: tree.isSelected(node.id) ? Array.from(ids) : [
868
+ node.id
869
+ ]
870
+ }),
871
+ start: ()=>{
872
+ tree.dispatch((0, $59f144a8dd651e5e$export$e324594224ef24da).dragStart(node.id));
832
873
  },
833
- reset: ()=>{
874
+ end: (item, monitor)=>{
875
+ tree.dispatch((0, $59f144a8dd651e5e$export$e324594224ef24da).dragEnd());
876
+ tree.hideCursor();
877
+ const drop = monitor.getDropResult();
878
+ // If they held down meta, we need to create a copy
879
+ // if (drop.dropEffect === "copy")
880
+ if (drop && drop.parentId) {
881
+ (0, $0e6083160f4b36ed$export$c6d63370cef03886)(tree.props.onMove, {
882
+ dragIds: item.dragIds,
883
+ parentId: drop.parentId === (0, $81080a351c006222$export$ec71a3379b43ae5c) ? null : drop.parentId,
884
+ index: drop.index
885
+ });
886
+ tree.open(drop.parentId);
887
+ }
834
888
  }
835
- }
836
- }));
837
- });
889
+ }), [
890
+ ids,
891
+ node
892
+ ]);
893
+ (0, $g00cZ$useEffect)(()=>{
894
+ preview((0, $g00cZ$getEmptyImage)());
895
+ }, [
896
+ preview
897
+ ]);
898
+ return ref;
899
+ }
900
+
838
901
 
839
902
 
840
903
 
@@ -867,7 +930,7 @@ function $2db980bfed6822da$var$getNodesAroundCursor(node, prev, next, hover) {
867
930
  prev,
868
931
  null
869
932
  ];
870
- if ($0e6083160f4b36ed$export$769c5e872f5f8638(node)) {
933
+ if (node.isInternal) {
871
934
  if (hover.atTop) return [
872
935
  prev,
873
936
  node
@@ -904,12 +967,12 @@ function $2db980bfed6822da$var$getDropLevel(hovering, aboveCursor, belowCursor,
904
967
  max = aboveCursor.level;
905
968
  min = belowCursor.level;
906
969
  }
907
- return $0e6083160f4b36ed$export$adf7c0fe6059d774(hoverLevel, min, max);
970
+ return (0, $0e6083160f4b36ed$export$adf7c0fe6059d774)(hoverLevel, min, max);
908
971
  }
909
972
  function $2db980bfed6822da$var$canDrop(above, below) {
910
973
  if (!above) return true;
911
974
  let n = above;
912
- if ($0e6083160f4b36ed$export$4210f5ea57fbae57(above) && above !== below) n = above.parent;
975
+ if ((0, $0e6083160f4b36ed$export$4210f5ea57fbae57)(above) && above !== below) n = above.parent;
913
976
  while(n){
914
977
  if (!n.isDroppable) return false;
915
978
  n = n.parent;
@@ -944,7 +1007,7 @@ function $2db980bfed6822da$var$walkUpFrom(node, level) {
944
1007
  let drop = node;
945
1008
  while(drop.parent && drop.level > level)drop = drop.parent;
946
1009
  const parentId = drop.parent?.id || null;
947
- const index = $0e6083160f4b36ed$export$305f7d4e9d4624f2(drop) + 1;
1010
+ const index = (0, $0e6083160f4b36ed$export$305f7d4e9d4624f2)(drop) + 1;
948
1011
  return {
949
1012
  parentId: parentId,
950
1013
  index: index
@@ -958,7 +1021,7 @@ function $2db980bfed6822da$export$f502ca02ebb85a1c(args) {
958
1021
  drop: null,
959
1022
  cursor: $2db980bfed6822da$var$noCursor()
960
1023
  };
961
- /* Hovering over the middle of a folder */ if (node && $0e6083160f4b36ed$export$769c5e872f5f8638(node) && hover.inMiddle) return {
1024
+ /* Hovering over the middle of a folder */ if (node && node.isInternal && hover.inMiddle) return {
962
1025
  drop: $2db980bfed6822da$var$dropAt(node.id, 0),
963
1026
  cursor: $2db980bfed6822da$var$highlightCursor(node.id)
964
1027
  };
@@ -966,7 +1029,7 @@ function $2db980bfed6822da$export$f502ca02ebb85a1c(args) {
966
1029
  drop: $2db980bfed6822da$var$dropAt(below?.parent?.id, 0),
967
1030
  cursor: $2db980bfed6822da$var$lineCursor(0, 0)
968
1031
  };
969
- /* The above node is an item or a closed folder */ if ($0e6083160f4b36ed$export$5318634f2ee07019(above) || $0e6083160f4b36ed$export$4210f5ea57fbae57(above)) {
1032
+ /* The above node is an item or a closed folder */ if ((0, $0e6083160f4b36ed$export$5318634f2ee07019)(above) || (0, $0e6083160f4b36ed$export$4210f5ea57fbae57)(above)) {
970
1033
  const level = $2db980bfed6822da$var$getDropLevel(hover, above, below, args.indent);
971
1034
  return {
972
1035
  drop: $2db980bfed6822da$var$walkUpFrom(above, level),
@@ -980,108 +1043,820 @@ function $2db980bfed6822da$export$f502ca02ebb85a1c(args) {
980
1043
  }
981
1044
 
982
1045
 
983
- function $e739455e59c6aed3$export$5a6c424b1725f44f() {
984
- const tree = $3273af3fe11a7001$export$367b0f2231a90ba0();
985
- // In case we drop an item at the bottom of the list
986
- const [, drop1] = $g00cZ$useDrop(()=>({
1046
+ function $d38aa53467160173$export$57afafec4637d997(el, node) {
1047
+ const tree = (0, $89e93131aae74bd9$export$367b0f2231a90ba0)();
1048
+ const [_, dropRef] = (0, $g00cZ$useDrop)(()=>({
987
1049
  accept: "NODE",
988
- hover: (item, m)=>{
989
- if (!m.isOver({
990
- shallow: true
991
- })) return;
1050
+ canDrop: (item, m)=>{
1051
+ if (node.tree.isFiltered) return false;
992
1052
  const offset = m.getClientOffset();
993
- if (!tree.listEl.current || !offset) return;
994
- const { cursor: cursor } = $2db980bfed6822da$export$f502ca02ebb85a1c({
995
- element: tree.listEl.current,
1053
+ if (!el.current || !offset) return false;
1054
+ const { drop: drop } = (0, $2db980bfed6822da$export$f502ca02ebb85a1c)({
1055
+ element: el.current,
996
1056
  offset: offset,
997
1057
  indent: tree.indent,
998
- node: null,
999
- prevNode: tree.visibleNodes[tree.visibleNodes.length - 1],
1000
- nextNode: null
1058
+ node: node,
1059
+ prevNode: node.prev,
1060
+ nextNode: node.next
1001
1061
  });
1002
- if (cursor) tree.showCursor(cursor);
1062
+ if (!drop) return false;
1063
+ const dropParent = tree.get(drop.parentId) ?? tree.root;
1064
+ for (let id of item.dragIds){
1065
+ const drag = tree.get(id);
1066
+ if (!drag) return false;
1067
+ if (!dropParent) return false;
1068
+ if (drag.isInternal && (0, $0e6083160f4b36ed$export$1e38f72c6c546f70)(dropParent, drag)) return false;
1069
+ }
1070
+ return true;
1003
1071
  },
1004
- canDrop: (item, m)=>{
1005
- return m.isOver({
1006
- shallow: true
1007
- });
1072
+ hover: (item, m)=>{
1073
+ if (m.canDrop()) {
1074
+ const offset = m.getClientOffset();
1075
+ if (!el.current || !offset) return;
1076
+ const { cursor: cursor } = (0, $2db980bfed6822da$export$f502ca02ebb85a1c)({
1077
+ element: el.current,
1078
+ offset: offset,
1079
+ indent: tree.indent,
1080
+ node: node,
1081
+ prevNode: node.prev,
1082
+ nextNode: node.next
1083
+ });
1084
+ if (cursor) tree.showCursor(cursor);
1085
+ } else tree.hideCursor();
1008
1086
  },
1009
1087
  drop: (item, m)=>{
1010
- if (m.didDrop()) return;
1011
1088
  const offset = m.getClientOffset();
1012
- if (!tree.listEl.current || !offset) return;
1013
- const { drop: drop } = $2db980bfed6822da$export$f502ca02ebb85a1c({
1014
- element: tree.listEl.current,
1089
+ if (!el.current || !offset) return;
1090
+ const { drop: drop } = (0, $2db980bfed6822da$export$f502ca02ebb85a1c)({
1091
+ element: el.current,
1015
1092
  offset: offset,
1016
1093
  indent: tree.indent,
1017
- node: null,
1018
- prevNode: tree.visibleNodes[tree.visibleNodes.length - 1],
1019
- nextNode: null
1094
+ node: node,
1095
+ prevNode: node.prev,
1096
+ nextNode: node.next
1020
1097
  });
1021
1098
  return drop;
1022
1099
  }
1023
- })
1024
- , [
1025
- tree
1100
+ }), [
1101
+ node,
1102
+ el.current,
1103
+ tree.props
1026
1104
  ]);
1027
- drop1(tree.listEl);
1105
+ return dropRef;
1028
1106
  }
1029
1107
 
1030
1108
 
1031
- function $5d6a5680e6f62734$export$a6ee728c3c6ef11d(props) {
1032
- $e739455e59c6aed3$export$5a6c424b1725f44f();
1033
- return props.children;
1034
- }
1035
1109
 
1036
1110
 
1111
+ function $48ab254e4b4b72da$export$d75ab90b05ebbfaa(index) {
1112
+ const tree = (0, $89e93131aae74bd9$export$367b0f2231a90ba0)();
1113
+ const original = tree.at(index);
1114
+ if (!original) throw new Error(`Could not find node for index: ${index}`);
1115
+ return (0, $g00cZ$useMemo)(()=>{
1116
+ const fresh = original.clone();
1117
+ tree.visibleNodes[index] = fresh; // sneaky
1118
+ return fresh;
1119
+ // Return a fresh instance if the state values change
1120
+ }, [
1121
+ ...Object.values(original.state),
1122
+ original
1123
+ ]);
1124
+ }
1037
1125
 
1038
1126
 
1127
+ const $8c3aed0a01f84486$export$a9754b3c8daa5172 = /*#__PURE__*/ (0, $g00cZ$react).memo(function RowContainer({ index: index , style: style }) {
1128
+ /* When will the <Row> will re-render.
1129
+ *
1130
+ * The row component is memo'd so it will only render
1131
+ * when a new instance of the NodeApi class is passed
1132
+ * to it.
1133
+ *
1134
+ * The TreeApi instance is stable. It does not
1135
+ * change when the internal state changes.
1136
+ *
1137
+ * The TreeApi has all the references to the nodes.
1138
+ * We need to clone the nodes when their state
1139
+ * changes. The node class contains no state itself,
1140
+ * It always checks the tree for state. The tree's
1141
+ * state will always be up to date.
1142
+ */ (0, $89e93131aae74bd9$export$83a4f9dc3b36edb8)(); // Re-render when tree props or visability changes
1143
+ const _ = (0, $89e93131aae74bd9$export$fd23f19d5d8f3033)(); // So that we re-render appropriately
1144
+ const tree = (0, $89e93131aae74bd9$export$367b0f2231a90ba0)(); // Tree already has the fresh state
1145
+ const node = (0, $48ab254e4b4b72da$export$d75ab90b05ebbfaa)(index);
1146
+ const el = (0, $g00cZ$useRef)(null);
1147
+ const dragRef = (0, $907e707a330ef23a$export$715c0d031ede7907)(node);
1148
+ const dropRef = (0, $d38aa53467160173$export$57afafec4637d997)(el, node);
1149
+ const innerRef = (0, $g00cZ$useCallback)((n)=>{
1150
+ el.current = n;
1151
+ dropRef(n);
1152
+ }, [
1153
+ dropRef
1154
+ ]);
1155
+ const indent = tree.indent * node.level;
1156
+ const nodeStyle = (0, $g00cZ$useMemo)(()=>({
1157
+ paddingLeft: indent
1158
+ }), [
1159
+ indent
1160
+ ]);
1161
+ const rowStyle = (0, $g00cZ$useMemo)(()=>({
1162
+ ...style,
1163
+ top: parseFloat(style.top) + ((tree.props.padding ?? tree.props.paddingTop) ?? 0)
1164
+ }), [
1165
+ style,
1166
+ tree.props.padding,
1167
+ tree.props.paddingTop
1168
+ ]);
1169
+ const rowAttrs = {
1170
+ role: "treeitem",
1171
+ "aria-level": node.level,
1172
+ "aria-selected": node.isSelected,
1173
+ style: rowStyle,
1174
+ tabIndex: -1
1175
+ };
1176
+ (0, $g00cZ$useEffect)(()=>{
1177
+ if (!node.isEditing && node.isFocused) el.current?.focus();
1178
+ }, [
1179
+ node.isEditing,
1180
+ node.isFocused,
1181
+ el.current
1182
+ ]);
1183
+ const Node = tree.renderNode;
1184
+ const Row = tree.renderRow;
1185
+ return /*#__PURE__*/ (0, $g00cZ$jsx)(Row, {
1186
+ node: node,
1187
+ innerRef: innerRef,
1188
+ attrs: rowAttrs,
1189
+ children: /*#__PURE__*/ (0, $g00cZ$jsx)(Node, {
1190
+ node: node,
1191
+ tree: tree,
1192
+ style: nodeStyle,
1193
+ dragHandle: dragRef
1194
+ })
1195
+ });
1196
+ });
1039
1197
 
1040
1198
 
1199
+ let $065a164934293bf2$var$focusSearchTerm = "";
1200
+ let $065a164934293bf2$var$timeoutId = null;
1201
+ function $065a164934293bf2$export$ff4858a4110d9246() {
1202
+ (0, $89e93131aae74bd9$export$83a4f9dc3b36edb8)();
1203
+ const tree = (0, $89e93131aae74bd9$export$367b0f2231a90ba0)();
1204
+ return /*#__PURE__*/ (0, $g00cZ$jsx)("div", {
1205
+ style: {
1206
+ height: tree.height,
1207
+ width: tree.width,
1208
+ minHeight: 0,
1209
+ minWidth: 0
1210
+ },
1211
+ onContextMenu: tree.props.onContextMenu,
1212
+ onClick: tree.props.onClick,
1213
+ tabIndex: 0,
1214
+ onFocus: (e)=>{
1215
+ if (!e.currentTarget.contains(e.relatedTarget)) tree.onFocus();
1216
+ },
1217
+ onBlur: (e)=>{
1218
+ if (!e.currentTarget.contains(e.relatedTarget)) tree.onBlur();
1219
+ },
1220
+ onKeyDown: (e)=>{
1221
+ if (tree.isEditing) return;
1222
+ if (e.key === "Backspace") {
1223
+ const ids = Array.from(tree.selectedIds);
1224
+ if (ids.length > 1) {
1225
+ let nextFocus = tree.mostRecentNode;
1226
+ while(nextFocus && nextFocus.isSelected)nextFocus = nextFocus.nextSibling;
1227
+ if (!nextFocus) nextFocus = tree.lastNode;
1228
+ tree.focus(nextFocus, {
1229
+ scroll: false
1230
+ });
1231
+ tree.delete(Array.from(ids));
1232
+ } else {
1233
+ const node = tree.focusedNode;
1234
+ if (node) {
1235
+ const sib = node.nextSibling;
1236
+ const parent = node.parent;
1237
+ tree.focus(sib || parent, {
1238
+ scroll: false
1239
+ });
1240
+ tree.delete(node);
1241
+ }
1242
+ }
1243
+ return;
1244
+ }
1245
+ if (e.key === "Tab" && !e.shiftKey) {
1246
+ e.preventDefault();
1247
+ (0, $0e6083160f4b36ed$export$3b0237e8566c8d65)(e.currentTarget);
1248
+ return;
1249
+ }
1250
+ if (e.key === "Tab" && e.shiftKey) {
1251
+ e.preventDefault();
1252
+ (0, $0e6083160f4b36ed$export$33b47db07a82b2fb)(e.currentTarget);
1253
+ return;
1254
+ }
1255
+ if (e.key === "ArrowDown" && !e.shiftKey && !e.metaKey) {
1256
+ e.preventDefault();
1257
+ const next = tree.nextNode;
1258
+ tree.focus(next);
1259
+ return;
1260
+ }
1261
+ if (e.key === "ArrowDown" && e.shiftKey) {
1262
+ e.preventDefault();
1263
+ const next1 = tree.nextNode;
1264
+ if (!next1) return;
1265
+ const current = tree.focusedNode;
1266
+ if (!current) tree.focus(tree.firstNode);
1267
+ else if (current.isSelected) tree.selectContiguous(next1);
1268
+ else tree.selectMulti(next1);
1269
+ return;
1270
+ }
1271
+ if (e.key === "ArrowUp" && !e.shiftKey) {
1272
+ e.preventDefault();
1273
+ tree.focus(tree.prevNode);
1274
+ return;
1275
+ }
1276
+ if (e.key === "ArrowUp" && e.shiftKey) {
1277
+ e.preventDefault();
1278
+ const prev = tree.prevNode;
1279
+ const current1 = tree.focusedNode;
1280
+ if (!prev) return;
1281
+ if (!current1) tree.focus(tree.lastNode); // ?
1282
+ else if (current1.isSelected) tree.selectContiguous(prev);
1283
+ else tree.selectMulti(prev);
1284
+ return;
1285
+ }
1286
+ if (e.key === "ArrowRight") {
1287
+ const node1 = tree.focusedNode;
1288
+ if (!node1) return;
1289
+ if (node1.isInternal && node1.isOpen) tree.focus(tree.nextNode);
1290
+ else if (node1.isInternal) tree.open(node1.id);
1291
+ return;
1292
+ }
1293
+ if (e.key === "ArrowLeft") {
1294
+ const node2 = tree.focusedNode;
1295
+ if (!node2 || node2.isRoot) return;
1296
+ if (node2.isInternal && node2.isOpen) tree.close(node2.id);
1297
+ else if (!node2.parent?.isRoot) tree.focus(node2.parent);
1298
+ return;
1299
+ }
1300
+ if (e.key === "a" && e.metaKey) {
1301
+ e.preventDefault();
1302
+ tree.selectAll();
1303
+ return;
1304
+ }
1305
+ if (e.key === "a" && !e.metaKey) {
1306
+ tree.createLeaf();
1307
+ return;
1308
+ }
1309
+ if (e.key === "A" && !e.metaKey) {
1310
+ tree.createInternal();
1311
+ return;
1312
+ }
1313
+ if (e.key === "Home") {
1314
+ // add shift keys
1315
+ e.preventDefault();
1316
+ tree.focus(tree.firstNode);
1317
+ return;
1318
+ }
1319
+ if (e.key === "End") {
1320
+ // add shift keys
1321
+ e.preventDefault();
1322
+ tree.focus(tree.lastNode);
1323
+ return;
1324
+ }
1325
+ if (e.key === "Enter") {
1326
+ setTimeout(()=>{
1327
+ if (tree.focusedNode) tree.edit(tree.focusedNode);
1328
+ });
1329
+ return;
1330
+ }
1331
+ if (e.key === " ") {
1332
+ e.preventDefault();
1333
+ const node3 = tree.focusedNode;
1334
+ if (!node3) return;
1335
+ if (node3.isLeaf) {
1336
+ node3.select();
1337
+ node3.activate();
1338
+ } else node3.toggle();
1339
+ return;
1340
+ }
1341
+ if (e.key === "*") {
1342
+ const node4 = tree.focusedNode;
1343
+ if (!node4) return;
1344
+ tree.openSiblings(node4);
1345
+ return;
1346
+ }
1347
+ if (e.key === "ArrowDown" && e.metaKey) {
1348
+ e.preventDefault();
1349
+ tree.select(tree.focusedNode);
1350
+ tree.activate(tree.focusedNode);
1351
+ return;
1352
+ }
1353
+ if (e.key === "PageUp") {
1354
+ e.preventDefault();
1355
+ tree.pageUp();
1356
+ return;
1357
+ }
1358
+ if (e.key === "PageDown") {
1359
+ e.preventDefault();
1360
+ tree.pageDown();
1361
+ }
1362
+ // If they type a sequence of characters
1363
+ // collect them. Reset them after a timeout.
1364
+ // Use it to search the tree for a node, then focus it.
1365
+ // Clean this up a bit later
1366
+ clearTimeout($065a164934293bf2$var$timeoutId);
1367
+ $065a164934293bf2$var$focusSearchTerm += e.key;
1368
+ $065a164934293bf2$var$timeoutId = setTimeout(()=>{
1369
+ $065a164934293bf2$var$focusSearchTerm = "";
1370
+ }, 600);
1371
+ const node5 = tree.visibleNodes.find((n)=>{
1372
+ // @ts-ignore
1373
+ const name = n.data.name;
1374
+ if (typeof name === "string") return name.toLowerCase().startsWith($065a164934293bf2$var$focusSearchTerm);
1375
+ else return false;
1376
+ });
1377
+ if (node5) tree.focus(node5.id);
1378
+ },
1379
+ children: /*#__PURE__*/ (0, $g00cZ$jsx)((0, $g00cZ$FixedSizeList), {
1380
+ className: tree.props.className,
1381
+ outerRef: tree.listEl,
1382
+ itemCount: tree.visibleNodes.length,
1383
+ height: tree.height,
1384
+ width: tree.width,
1385
+ itemSize: tree.rowHeight,
1386
+ itemKey: (index)=>tree.visibleNodes[index]?.id || index,
1387
+ outerElementType: (0, $05f64c7ebcbad8b5$export$70c2b8898b86d3ad),
1388
+ innerElementType: (0, $da9a6b47b6fff922$export$a9af0da3ae60cd00),
1389
+ onScroll: tree.props.onScroll,
1390
+ onItemsRendered: tree.onItemsRendered.bind(tree),
1391
+ ref: tree.list,
1392
+ children: (0, $8c3aed0a01f84486$export$a9754b3c8daa5172)
1393
+ })
1394
+ });
1395
+ }
1396
+
1041
1397
 
1398
+ function $749bc746798c29ad$export$5897d8d7c7a3d871(tree) {
1399
+ if (tree.isFiltered) return $749bc746798c29ad$var$flattenAndFilterTree(tree.root, tree.isMatch.bind(tree));
1400
+ else return $749bc746798c29ad$var$flattenTree(tree.root);
1401
+ }
1402
+ function $749bc746798c29ad$var$flattenTree(root) {
1403
+ const list = [];
1404
+ function collect(node) {
1405
+ if (node.level >= 0) list.push(node);
1406
+ if (node.isOpen) node.children?.forEach(collect);
1407
+ }
1408
+ collect(root);
1409
+ list.forEach($749bc746798c29ad$var$assignRowIndex);
1410
+ return list;
1411
+ }
1412
+ function $749bc746798c29ad$var$flattenAndFilterTree(root, isMatch) {
1413
+ function collect(node) {
1414
+ let result = [];
1415
+ const yes = !node.isRoot && isMatch(node);
1416
+ if (node.children) for (let child of node.children)result = result.concat(collect(child));
1417
+ if (result.length) {
1418
+ if (!node.isRoot) result.unshift(node);
1419
+ return result;
1420
+ }
1421
+ if (yes) return [
1422
+ node
1423
+ ];
1424
+ else return [];
1425
+ }
1426
+ const list = collect(root).filter((n)=>n.parent?.isOpen);
1427
+ list.forEach($749bc746798c29ad$var$assignRowIndex);
1428
+ return list;
1429
+ }
1430
+ function $749bc746798c29ad$var$assignRowIndex(node, index) {
1431
+ node.rowIndex = index;
1432
+ }
1042
1433
 
1043
1434
 
1044
- function $fe2fd2e13360ebf7$export$ef961593063b03e8() {
1045
- const tree = $3273af3fe11a7001$export$367b0f2231a90ba0();
1046
- const cursor = tree.state.cursor;
1047
- if (!cursor || cursor.type !== "line") return null;
1048
- const indent = tree.indent;
1049
- const top = tree.rowHeight * cursor.index;
1050
- const left = indent * cursor.level;
1051
- return tree.renderDropCursor({
1052
- top: top,
1053
- left: left,
1054
- indent: indent
1055
- });
1435
+ const $659b2f68e1468ad0$export$c6d108d7c8095f19 = (nodes)=>{
1436
+ return nodes.reduce((map, node, index)=>{
1437
+ map[node.id] = index;
1438
+ return map;
1439
+ }, {});
1440
+ };
1441
+
1442
+
1443
+ const { safeRun: $bfece7c4aed4e9c4$var$safeRun , identify: $bfece7c4aed4e9c4$var$identify , identifyNull: $bfece7c4aed4e9c4$var$identifyNull } = $0e6083160f4b36ed$exports;
1444
+ class $bfece7c4aed4e9c4$export$e2da3477247342d1 {
1445
+ constructor(store, props, list, listEl){
1446
+ this.store = store;
1447
+ this.props = props;
1448
+ this.list = list;
1449
+ this.listEl = listEl;
1450
+ this.visibleStartIndex = 0;
1451
+ this.visibleStopIndex = 0;
1452
+ /* Changes here must also be made in update() */ this.root = (0, $81080a351c006222$export$882461b6382ed46c)(this);
1453
+ this.visibleNodes = (0, $749bc746798c29ad$export$5897d8d7c7a3d871)(this);
1454
+ this.idToIndex = (0, $659b2f68e1468ad0$export$c6d108d7c8095f19)(this.visibleNodes);
1455
+ }
1456
+ /* Changes here must also be made in constructor() */ update(props) {
1457
+ this.props = props;
1458
+ this.root = (0, $81080a351c006222$export$882461b6382ed46c)(this);
1459
+ this.visibleNodes = (0, $749bc746798c29ad$export$5897d8d7c7a3d871)(this);
1460
+ this.idToIndex = (0, $659b2f68e1468ad0$export$c6d108d7c8095f19)(this.visibleNodes);
1461
+ }
1462
+ /* Store helpers */ dispatch(action) {
1463
+ return this.store.dispatch(action);
1464
+ }
1465
+ get state() {
1466
+ return this.store.getState();
1467
+ }
1468
+ get openState() {
1469
+ return this.state.nodes.open.unfiltered;
1470
+ }
1471
+ /* Tree Props */ get width() {
1472
+ return this.props.width || 300;
1473
+ }
1474
+ get height() {
1475
+ return this.props.height || 500;
1476
+ }
1477
+ get indent() {
1478
+ return this.props.indent || 24;
1479
+ }
1480
+ get rowHeight() {
1481
+ return this.props.rowHeight || 24;
1482
+ }
1483
+ get searchTerm() {
1484
+ return (this.props.searchTerm || "").trim();
1485
+ }
1486
+ get matchFn() {
1487
+ const match = this.props.searchMatch ?? ((node, term)=>{
1488
+ const string = JSON.stringify(Object.values(node.data));
1489
+ return string.toLocaleLowerCase().includes(term.toLocaleLowerCase());
1490
+ });
1491
+ return (node)=>match(node, this.searchTerm);
1492
+ }
1493
+ getChildren(data) {
1494
+ const get = this.props.getChildren || "children";
1495
+ return $0e6083160f4b36ed$exports.access(data, get) ?? null;
1496
+ }
1497
+ /* Node Access */ get firstNode() {
1498
+ return this.visibleNodes[0] ?? null;
1499
+ }
1500
+ get lastNode() {
1501
+ return this.visibleNodes[this.visibleNodes.length - 1] ?? null;
1502
+ }
1503
+ get focusedNode() {
1504
+ return this.get(this.state.nodes.focus.id) ?? null;
1505
+ }
1506
+ get mostRecentNode() {
1507
+ return this.get(this.state.nodes.selection.mostRecent) ?? null;
1508
+ }
1509
+ get nextNode() {
1510
+ const index = this.indexOf(this.focusedNode);
1511
+ if (index === null) return null;
1512
+ else return this.at(index + 1);
1513
+ }
1514
+ get prevNode() {
1515
+ const index = this.indexOf(this.focusedNode);
1516
+ if (index === null) return null;
1517
+ else return this.at(index - 1);
1518
+ }
1519
+ get(id) {
1520
+ if (!id) return null;
1521
+ if (id in this.idToIndex) return this.visibleNodes[this.idToIndex[id]] || null;
1522
+ else return null;
1523
+ }
1524
+ at(index) {
1525
+ return this.visibleNodes[index] || null;
1526
+ }
1527
+ nodesBetween(startId, endId) {
1528
+ if (startId === null || endId === null) return [];
1529
+ const index1 = this.indexOf(startId) ?? 0;
1530
+ const index2 = this.indexOf(endId);
1531
+ if (index2 === null) return [];
1532
+ const start = Math.min(index1, index2);
1533
+ const end = Math.max(index1, index2);
1534
+ return this.visibleNodes.slice(start, end + 1);
1535
+ }
1536
+ indexOf(id) {
1537
+ const key = $0e6083160f4b36ed$exports.identifyNull(id);
1538
+ if (!key) return null;
1539
+ return this.idToIndex[key];
1540
+ }
1541
+ /* Data Operations */ get editingId() {
1542
+ return this.state.nodes.edit.id;
1543
+ }
1544
+ createInternal() {
1545
+ return this.create("internal");
1546
+ }
1547
+ createLeaf() {
1548
+ return this.create("leaf");
1549
+ }
1550
+ async create(type) {
1551
+ let index;
1552
+ let parentId;
1553
+ const focus = this.focusedNode;
1554
+ if (focus && focus.parent) {
1555
+ if (focus.isInternal && focus.isOpen) {
1556
+ parentId = focus.id;
1557
+ index = 0;
1558
+ } else {
1559
+ index = focus.childIndex + 1;
1560
+ parentId = focus.parent.isRoot ? null : focus.parent.id;
1561
+ }
1562
+ } else {
1563
+ index = this.root?.children?.length || -1;
1564
+ parentId = null;
1565
+ }
1566
+ const data = await $bfece7c4aed4e9c4$var$safeRun(this.props.onCreate, {
1567
+ parentId: parentId,
1568
+ index: index,
1569
+ type: type
1570
+ });
1571
+ if (data) {
1572
+ this.focus(data);
1573
+ setTimeout(()=>{
1574
+ this.edit(data).then(()=>{
1575
+ this.select(data);
1576
+ this.activate(data);
1577
+ });
1578
+ });
1579
+ }
1580
+ }
1581
+ async delete(node) {
1582
+ if (!node) return;
1583
+ const nodes = Array.isArray(node) ? node : [
1584
+ node
1585
+ ];
1586
+ const ids = nodes.map($bfece7c4aed4e9c4$var$identify);
1587
+ await $bfece7c4aed4e9c4$var$safeRun(this.props.onDelete, {
1588
+ ids: ids
1589
+ });
1590
+ }
1591
+ edit(node) {
1592
+ const id = $bfece7c4aed4e9c4$var$identify(node);
1593
+ this.resolveEdit({
1594
+ cancelled: true
1595
+ });
1596
+ this.scrollTo(id);
1597
+ this.dispatch((0, $21783d2b0251be67$export$e1a8e267487c59d1)(id));
1598
+ return new Promise((resolve)=>{
1599
+ $bfece7c4aed4e9c4$export$e2da3477247342d1.editPromise = resolve;
1600
+ });
1601
+ }
1602
+ async submit(node, value) {
1603
+ if (!node) return;
1604
+ const id = $bfece7c4aed4e9c4$var$identify(node);
1605
+ await $bfece7c4aed4e9c4$var$safeRun(this.props.onRename, {
1606
+ id: id,
1607
+ name: value
1608
+ });
1609
+ this.dispatch((0, $21783d2b0251be67$export$e1a8e267487c59d1)(null));
1610
+ this.resolveEdit({
1611
+ cancelled: false,
1612
+ value: value
1613
+ });
1614
+ setTimeout(()=>this.onFocus()); // Return focus to element;
1615
+ }
1616
+ reset() {
1617
+ this.dispatch((0, $21783d2b0251be67$export$e1a8e267487c59d1)(null));
1618
+ this.resolveEdit({
1619
+ cancelled: true
1620
+ });
1621
+ setTimeout(()=>this.onFocus()); // Return focus to element;
1622
+ }
1623
+ activate(id) {
1624
+ const node = this.get($bfece7c4aed4e9c4$var$identifyNull(id));
1625
+ if (!node) return;
1626
+ $bfece7c4aed4e9c4$var$safeRun(this.props.onActivate, node);
1627
+ }
1628
+ resolveEdit(value) {
1629
+ const resolve = $bfece7c4aed4e9c4$export$e2da3477247342d1.editPromise;
1630
+ if (resolve) resolve(value);
1631
+ $bfece7c4aed4e9c4$export$e2da3477247342d1.editPromise = null;
1632
+ }
1633
+ /* Focus and Selection */ get selectedIds() {
1634
+ return this.state.nodes.selection.ids;
1635
+ }
1636
+ get selectedNodes() {
1637
+ let nodes = [];
1638
+ for (let id of Array.from(this.selectedIds)){
1639
+ const node = this.get(id);
1640
+ if (node) nodes.push(node);
1641
+ }
1642
+ return nodes;
1643
+ }
1644
+ focus(node, opts = {}) {
1645
+ if (!node) return;
1646
+ /* Focus is responsible for scrolling, while selection is
1647
+ * responsible for focus. If selectionFollowsFocus, then
1648
+ * just select it. */ if (this.props.selectionFollowsFocus) this.select(node);
1649
+ else {
1650
+ this.dispatch((0, $c27b8e9863235052$export$d7ddd398f22d79ef)($bfece7c4aed4e9c4$var$identify(node)));
1651
+ if (opts.scroll !== false) this.scrollTo(node);
1652
+ }
1653
+ }
1654
+ pageUp() {
1655
+ const start = this.visibleStartIndex;
1656
+ const stop = this.visibleStopIndex;
1657
+ const page = stop - start;
1658
+ let index = this.focusedNode?.rowIndex ?? 0;
1659
+ if (index > start) index = start;
1660
+ else index = Math.max(start - page, 0);
1661
+ this.focus(this.at(index));
1662
+ }
1663
+ pageDown() {
1664
+ const start = this.visibleStartIndex;
1665
+ const stop = this.visibleStopIndex;
1666
+ const page = stop - start;
1667
+ let index = this.focusedNode?.rowIndex ?? 0;
1668
+ if (index < stop) index = stop;
1669
+ else index = Math.min(index + page, this.visibleNodes.length - 1);
1670
+ this.focus(this.at(index));
1671
+ }
1672
+ select(node, opts = {}) {
1673
+ if (!node) return;
1674
+ const id = $bfece7c4aed4e9c4$var$identify(node);
1675
+ this.dispatch((0, $c27b8e9863235052$export$d7ddd398f22d79ef)(id));
1676
+ this.dispatch((0, $37bc167debff36d2$export$e324594224ef24da).only(id));
1677
+ this.dispatch((0, $37bc167debff36d2$export$e324594224ef24da).anchor(id));
1678
+ this.dispatch((0, $37bc167debff36d2$export$e324594224ef24da).mostRecent(id));
1679
+ this.scrollTo(id, opts.align);
1680
+ $bfece7c4aed4e9c4$var$safeRun(this.props.onSelect, this.selectedNodes);
1681
+ }
1682
+ deselect(node) {
1683
+ if (!node) return;
1684
+ const id = $bfece7c4aed4e9c4$var$identify(node);
1685
+ this.dispatch((0, $37bc167debff36d2$export$e324594224ef24da).remove(id));
1686
+ }
1687
+ selectMulti(identity) {
1688
+ const node = this.get($bfece7c4aed4e9c4$var$identifyNull(identity));
1689
+ if (!node) return;
1690
+ this.dispatch((0, $c27b8e9863235052$export$d7ddd398f22d79ef)(node.id));
1691
+ this.dispatch((0, $37bc167debff36d2$export$e324594224ef24da).add(node.id));
1692
+ this.dispatch((0, $37bc167debff36d2$export$e324594224ef24da).anchor(node.id));
1693
+ this.dispatch((0, $37bc167debff36d2$export$e324594224ef24da).mostRecent(node.id));
1694
+ this.scrollTo(node);
1695
+ $bfece7c4aed4e9c4$var$safeRun(this.props.onSelect, this.selectedNodes);
1696
+ }
1697
+ selectContiguous(identity) {
1698
+ if (!identity) return;
1699
+ const id = $bfece7c4aed4e9c4$var$identify(identity);
1700
+ const { anchor: anchor , mostRecent: mostRecent } = this.state.nodes.selection;
1701
+ this.dispatch((0, $c27b8e9863235052$export$d7ddd398f22d79ef)(id));
1702
+ this.dispatch((0, $37bc167debff36d2$export$e324594224ef24da).remove(this.nodesBetween(anchor, mostRecent)));
1703
+ this.dispatch((0, $37bc167debff36d2$export$e324594224ef24da).add(this.nodesBetween(anchor, $bfece7c4aed4e9c4$var$identifyNull(id))));
1704
+ this.dispatch((0, $37bc167debff36d2$export$e324594224ef24da).mostRecent(id));
1705
+ this.scrollTo(id);
1706
+ $bfece7c4aed4e9c4$var$safeRun(this.props.onSelect, this.selectedNodes);
1707
+ }
1708
+ selectNone() {
1709
+ this.dispatch((0, $37bc167debff36d2$export$e324594224ef24da).clear());
1710
+ this.dispatch((0, $37bc167debff36d2$export$e324594224ef24da).anchor(null));
1711
+ this.dispatch((0, $37bc167debff36d2$export$e324594224ef24da).mostRecent(null));
1712
+ $bfece7c4aed4e9c4$var$safeRun(this.props.onSelect, this.selectedNodes);
1713
+ }
1714
+ selectAll() {
1715
+ this.dispatch((0, $37bc167debff36d2$export$e324594224ef24da).set(new Set(Object.keys(this.idToIndex))));
1716
+ this.dispatch((0, $c27b8e9863235052$export$d7ddd398f22d79ef)(this.lastNode?.id));
1717
+ this.dispatch((0, $37bc167debff36d2$export$e324594224ef24da).anchor(this.firstNode));
1718
+ this.dispatch((0, $37bc167debff36d2$export$e324594224ef24da).mostRecent(this.lastNode));
1719
+ $bfece7c4aed4e9c4$var$safeRun(this.props.onSelect, this.selectedNodes);
1720
+ }
1721
+ /* Drag and Drop */ get cursorParentId() {
1722
+ const { cursor: cursor } = this.state.dnd;
1723
+ switch(cursor.type){
1724
+ case "highlight":
1725
+ return cursor.id;
1726
+ default:
1727
+ return null;
1728
+ }
1729
+ }
1730
+ get cursorOverFolder() {
1731
+ return this.state.dnd.cursor.type === "highlight";
1732
+ }
1733
+ hideCursor() {
1734
+ this.dispatch((0, $59f144a8dd651e5e$export$e324594224ef24da).cursor({
1735
+ type: "none"
1736
+ }));
1737
+ }
1738
+ showCursor(cursor) {
1739
+ this.dispatch((0, $59f144a8dd651e5e$export$e324594224ef24da).cursor(cursor));
1740
+ }
1741
+ /* Visibility */ open(identity) {
1742
+ const id = $bfece7c4aed4e9c4$var$identifyNull(identity);
1743
+ if (!id) return;
1744
+ this.dispatch((0, $3c0bad2888bcd4bc$export$e324594224ef24da).open(id, this.isFiltered));
1745
+ }
1746
+ close(identity) {
1747
+ const id = $bfece7c4aed4e9c4$var$identifyNull(identity);
1748
+ if (!id) return;
1749
+ this.dispatch((0, $3c0bad2888bcd4bc$export$e324594224ef24da).close(id, this.isFiltered));
1750
+ }
1751
+ toggle(identity) {
1752
+ const id = $bfece7c4aed4e9c4$var$identifyNull(identity);
1753
+ if (!id) return;
1754
+ return this.isOpen(id) ? this.close(id) : this.open(id);
1755
+ }
1756
+ openParents(identity) {
1757
+ const id = $bfece7c4aed4e9c4$var$identifyNull(identity);
1758
+ if (!id) return;
1759
+ const node = $0e6083160f4b36ed$exports.dfs(this.root, id);
1760
+ let parent = node?.parent;
1761
+ while(parent){
1762
+ this.open(parent.id);
1763
+ parent = parent.parent;
1764
+ }
1765
+ }
1766
+ openSiblings(node) {
1767
+ const parent = node.parent;
1768
+ if (!parent) this.toggle(node.id);
1769
+ else if (parent.children) {
1770
+ const isOpen = node.isOpen;
1771
+ for (let sibling of parent.children)if (sibling.isInternal) isOpen ? this.close(sibling.id) : this.open(sibling.id);
1772
+ this.scrollTo(this.focusedNode);
1773
+ }
1774
+ }
1775
+ /* Scrolling */ scrollTo(identity, align = "smart") {
1776
+ if (!identity) return;
1777
+ const id = $bfece7c4aed4e9c4$var$identify(identity);
1778
+ this.openParents(id);
1779
+ return $0e6083160f4b36ed$exports.waitFor(()=>id in this.idToIndex).then(()=>{
1780
+ const index = this.idToIndex[id];
1781
+ if (index === undefined) return;
1782
+ this.list.current?.scrollToItem(index, align);
1783
+ }).catch(()=>{
1784
+ console.log(`Id: ${id} never appeared in the list.`);
1785
+ });
1786
+ }
1787
+ /* State Checks */ get isEditing() {
1788
+ return this.state.nodes.edit.id !== null;
1789
+ }
1790
+ get isFiltered() {
1791
+ return !!this.props.searchTerm?.trim();
1792
+ }
1793
+ get hasFocus() {
1794
+ return this.state.nodes.focus.treeFocused;
1795
+ }
1796
+ isSelected(id) {
1797
+ if (!id) return false;
1798
+ return this.state.nodes.selection.ids.has(id);
1799
+ }
1800
+ isOpen(id) {
1801
+ if (!id) return false;
1802
+ if (id === (0, $81080a351c006222$export$ec71a3379b43ae5c)) return true;
1803
+ const def = this.props.openByDefault ?? true;
1804
+ if (this.isFiltered) return this.state.nodes.open.filtered[id] ?? true; // Filtered folders are always opened by default
1805
+ else return this.state.nodes.open.unfiltered[id] ?? def;
1806
+ }
1807
+ isDraggable(data) {
1808
+ const check = this.props.disableDrag || (()=>false);
1809
+ return !$0e6083160f4b36ed$exports.access(data, check) ?? true;
1810
+ }
1811
+ isDroppable(data) {
1812
+ const check = this.props.disableDrop || (()=>false);
1813
+ return !$0e6083160f4b36ed$exports.access(data, check) ?? true;
1814
+ }
1815
+ isDragging(node) {
1816
+ const id = $bfece7c4aed4e9c4$var$identifyNull(node);
1817
+ if (!id) return false;
1818
+ return this.state.nodes.drag.id === id;
1819
+ }
1820
+ isFocused(id) {
1821
+ return this.hasFocus && this.state.nodes.focus.id === id;
1822
+ }
1823
+ isMatch(node) {
1824
+ return this.matchFn(node);
1825
+ }
1826
+ willReceiveDrop(node) {
1827
+ const id = $bfece7c4aed4e9c4$var$identifyNull(node);
1828
+ if (!id) return false;
1829
+ return id === this.state.nodes.drag.idWillReceiveDrop;
1830
+ }
1831
+ /* Tree Event Handlers */ onFocus() {
1832
+ const node = this.focusedNode || this.firstNode;
1833
+ if (node) this.dispatch((0, $c27b8e9863235052$export$d7ddd398f22d79ef)(node.id));
1834
+ }
1835
+ onBlur() {
1836
+ this.dispatch((0, $c27b8e9863235052$export$6b6c976e46a06288)());
1837
+ }
1838
+ onItemsRendered(args) {
1839
+ this.visibleStartIndex = args.visibleStartIndex;
1840
+ this.visibleStopIndex = args.visibleStopIndex;
1841
+ }
1842
+ /* Get Renderers */ get renderContainer() {
1843
+ return this.props.renderContainer || (0, $065a164934293bf2$export$ff4858a4110d9246);
1844
+ }
1845
+ get renderRow() {
1846
+ return this.props.renderRow || (0, $164e874d21fcd87e$export$f9c541e71856c524);
1847
+ }
1848
+ get renderNode() {
1849
+ return this.props.children || (0, $c4edd692d5290432$export$909e23cbfbbd3351);
1850
+ }
1851
+ get renderDragPreview() {
1852
+ return this.props.renderDragPreview || (0, $77d34d95e44d2f58$export$84e211ad8431a387);
1853
+ }
1854
+ get renderCursor() {
1855
+ return this.props.renderCursor || (0, $fb4c15d8425379bd$export$6cb3c16721363d11);
1856
+ }
1056
1857
  }
1057
1858
 
1058
1859
 
1059
- const $05f64c7ebcbad8b5$export$70c2b8898b86d3ad = /*#__PURE__*/ $g00cZ$forwardRef(function Outer(props, ref) {
1060
- const { children: children , ...rest } = props;
1061
- const tree = $3273af3fe11a7001$export$367b0f2231a90ba0();
1062
- return(/*#__PURE__*/ $g00cZ$jsxs("div", {
1063
- // @ts-ignore
1064
- ref: ref,
1065
- ...rest,
1066
- onClick: tree.onClick,
1067
- onContextMenu: tree.onContextMenu,
1068
- children: [
1069
- /*#__PURE__*/ $g00cZ$jsx("div", {
1070
- style: {
1071
- height: tree.visibleNodes.length * tree.rowHeight,
1072
- width: "100%",
1073
- overflow: "hidden",
1074
- position: "absolute",
1075
- left: "0",
1076
- right: "0"
1077
- },
1078
- children: /*#__PURE__*/ $g00cZ$jsx($fe2fd2e13360ebf7$export$ef961593063b03e8, {
1079
- })
1080
- }),
1081
- children
1082
- ]
1083
- }));
1084
- });
1085
1860
 
1086
1861
 
1087
1862
 
@@ -1089,268 +1864,403 @@ const $05f64c7ebcbad8b5$export$70c2b8898b86d3ad = /*#__PURE__*/ $g00cZ$forwardRe
1089
1864
 
1090
1865
 
1091
1866
 
1867
+ function $5c35ee13c124a8cc$export$1650419e431d3ba3(state = {
1868
+ id: null,
1869
+ idWillReceiveDrop: null
1870
+ }, action) {
1871
+ switch(action.type){
1872
+ case "DND_DRAG_START":
1873
+ return {
1874
+ ...state,
1875
+ id: action.id
1876
+ };
1877
+ case "DND_DRAG_END":
1878
+ return {
1879
+ ...state,
1880
+ id: null
1881
+ };
1882
+ case "DND_CURSOR":
1883
+ const c = action.cursor;
1884
+ if (c.type === "highlight" && c.id !== state.idWillReceiveDrop) return {
1885
+ ...state,
1886
+ idWillReceiveDrop: c.id
1887
+ };
1888
+ else if (c.type !== "highlight" && state.idWillReceiveDrop !== null) return {
1889
+ ...state,
1890
+ idWillReceiveDrop: null
1891
+ };
1892
+ else return state;
1893
+ default:
1894
+ return state;
1895
+ }
1896
+ }
1092
1897
 
1093
1898
 
1094
- function $907e707a330ef23a$export$715c0d031ede7907(node) {
1095
- const tree = $3273af3fe11a7001$export$367b0f2231a90ba0();
1096
- const ids = tree.getSelectedIds();
1097
- const [{ isDragging: isDragging }, ref, preview] = $g00cZ$useDrag(()=>({
1098
- canDrag: ()=>node.isDraggable
1099
- ,
1100
- type: "NODE",
1101
- item: ()=>({
1102
- id: node.id,
1103
- dragIds: tree.isSelected(node.rowIndex) ? ids : [
1104
- node.id
1105
- ]
1106
- })
1107
- ,
1108
- collect: (m)=>({
1109
- isDragging: m.isDragging()
1110
- })
1111
- ,
1112
- end: (item, monitor)=>{
1113
- tree.hideCursor();
1114
- const drop = monitor.getDropResult();
1115
- if (drop && drop.parentId) {
1116
- tree.onMove(item.dragIds, drop.parentId, drop.index);
1117
- tree.onToggle(drop.parentId, true);
1118
- }
1119
- }
1120
- })
1121
- , [
1122
- ids,
1123
- node
1899
+ const $a18760514dcf279e$export$a8a69c316169e623 = (0, $g00cZ$combineReducers)({
1900
+ nodes: (0, $g00cZ$combineReducers)({
1901
+ focus: $c27b8e9863235052$export$1650419e431d3ba3,
1902
+ edit: $21783d2b0251be67$export$1650419e431d3ba3,
1903
+ open: $3c0bad2888bcd4bc$export$1650419e431d3ba3,
1904
+ selection: $37bc167debff36d2$export$1650419e431d3ba3,
1905
+ drag: $5c35ee13c124a8cc$export$1650419e431d3ba3
1906
+ }),
1907
+ dnd: $59f144a8dd651e5e$export$1650419e431d3ba3
1908
+ });
1909
+
1910
+
1911
+
1912
+
1913
+
1914
+
1915
+ const $dac24389e46ba09d$var$SERVER_STATE = (0, $6ad32e02250c922e$export$d4c72bab9d6cc13a)();
1916
+ function $dac24389e46ba09d$export$c49dab5eb1b4ce0c({ treeProps: treeProps , imperativeHandle: imperativeHandle , children: children }) {
1917
+ const list = (0, $g00cZ$useRef)(null);
1918
+ const listEl = (0, $g00cZ$useRef)(null);
1919
+ const store = (0, $g00cZ$useRef)((0, $g00cZ$createStore)((0, $a18760514dcf279e$export$a8a69c316169e623), (0, $6ad32e02250c922e$export$d4c72bab9d6cc13a)(treeProps)));
1920
+ const state = (0, $g00cZ$useSyncExternalStore)(store.current.subscribe, store.current.getState, ()=>$dac24389e46ba09d$var$SERVER_STATE);
1921
+ /* The tree api object is stable. */ const api = (0, $g00cZ$useMemo)(()=>{
1922
+ return new (0, $bfece7c4aed4e9c4$export$e2da3477247342d1)(store.current, treeProps, list, listEl);
1923
+ }, []);
1924
+ /* Make sure the tree instance stays in sync */ const updateCount = (0, $g00cZ$useRef)(0);
1925
+ (0, $g00cZ$useMemo)(()=>{
1926
+ updateCount.current += 1;
1927
+ api.update(treeProps);
1928
+ }, [
1929
+ ...Object.values(treeProps),
1930
+ state.nodes.open
1124
1931
  ]);
1125
- $g00cZ$useEffect(()=>{
1126
- preview($g00cZ$getEmptyImage());
1932
+ /* Expose the tree api */ (0, $g00cZ$useImperativeHandle)(imperativeHandle, ()=>api);
1933
+ /* Change selection based on props */ (0, $g00cZ$useEffect)(()=>{
1934
+ if (api.props.selection) api.select(api.props.selection);
1935
+ else api.selectNone();
1127
1936
  }, [
1128
- preview
1937
+ api.props.selection
1129
1938
  ]);
1130
- return [
1131
- {
1132
- isDragging: isDragging
1133
- },
1134
- ref
1135
- ];
1939
+ /* Clear visability for filtered nodes */ (0, $g00cZ$useEffect)(()=>{
1940
+ if (!api.props.searchTerm) store.current.dispatch((0, $3c0bad2888bcd4bc$export$e324594224ef24da).clear(true));
1941
+ }, [
1942
+ api.props.searchTerm
1943
+ ]);
1944
+ return /*#__PURE__*/ (0, $g00cZ$jsx)((0, $89e93131aae74bd9$export$feef243b04ff4151).Provider, {
1945
+ value: api,
1946
+ children: /*#__PURE__*/ (0, $g00cZ$jsx)((0, $89e93131aae74bd9$export$d0c71bc5e3e2d897).Provider, {
1947
+ value: updateCount.current,
1948
+ children: /*#__PURE__*/ (0, $g00cZ$jsx)((0, $89e93131aae74bd9$export$f6d467aa8b3786af).Provider, {
1949
+ value: state.nodes,
1950
+ children: /*#__PURE__*/ (0, $g00cZ$jsx)((0, $89e93131aae74bd9$export$2d5c5ceac203fc1e).Provider, {
1951
+ value: state.dnd,
1952
+ children: /*#__PURE__*/ (0, $g00cZ$jsx)((0, $g00cZ$DndProvider), {
1953
+ backend: (0, $g00cZ$HTML5Backend),
1954
+ options: {
1955
+ rootElement: api.props.dndRootElement || undefined
1956
+ },
1957
+ children: children
1958
+ })
1959
+ })
1960
+ })
1961
+ })
1962
+ });
1136
1963
  }
1137
1964
 
1138
1965
 
1139
1966
 
1140
1967
 
1141
1968
 
1142
-
1143
- function $d38aa53467160173$export$57afafec4637d997(el, node, prev, next) {
1144
- const tree = $3273af3fe11a7001$export$367b0f2231a90ba0();
1145
- return $g00cZ$useDrop(()=>({
1969
+ function $e739455e59c6aed3$export$5a6c424b1725f44f() {
1970
+ const tree = (0, $89e93131aae74bd9$export$367b0f2231a90ba0)();
1971
+ // In case we drop an item at the bottom of the list
1972
+ const [, drop] = (0, $g00cZ$useDrop)(()=>({
1146
1973
  accept: "NODE",
1147
- canDrop: (item)=>{
1148
- for (let id of item.dragIds){
1149
- const drag = tree.getNode(id);
1150
- if (!drag) return false;
1151
- if ($0e6083160f4b36ed$export$769c5e872f5f8638(drag) && $0e6083160f4b36ed$export$1e38f72c6c546f70(node, drag)) return false;
1152
- }
1153
- return true;
1154
- },
1155
1974
  hover: (item, m)=>{
1156
- if (m.canDrop()) {
1157
- const offset = m.getClientOffset();
1158
- if (!el.current || !offset) return;
1159
- const { cursor: cursor } = $2db980bfed6822da$export$f502ca02ebb85a1c({
1160
- element: el.current,
1161
- offset: offset,
1162
- indent: tree.indent,
1163
- node: node,
1164
- prevNode: prev,
1165
- nextNode: next
1166
- });
1167
- if (cursor) tree.showCursor(cursor);
1168
- } else tree.hideCursor();
1975
+ if (!m.isOver({
1976
+ shallow: true
1977
+ })) return;
1978
+ const offset = m.getClientOffset();
1979
+ if (!tree.listEl.current || !offset) return;
1980
+ const { cursor: cursor } = (0, $2db980bfed6822da$export$f502ca02ebb85a1c)({
1981
+ element: tree.listEl.current,
1982
+ offset: offset,
1983
+ indent: tree.indent,
1984
+ node: null,
1985
+ prevNode: tree.visibleNodes[tree.visibleNodes.length - 1],
1986
+ nextNode: null
1987
+ });
1988
+ if (cursor) tree.showCursor(cursor);
1989
+ },
1990
+ canDrop: (item, m)=>{
1991
+ return m.isOver({
1992
+ shallow: true
1993
+ });
1169
1994
  },
1170
1995
  drop: (item, m)=>{
1996
+ if (m.didDrop()) return;
1171
1997
  const offset = m.getClientOffset();
1172
- if (!el.current || !offset) return;
1173
- const { drop: drop } = $2db980bfed6822da$export$f502ca02ebb85a1c({
1174
- element: el.current,
1998
+ if (!tree.listEl.current || !offset) return;
1999
+ const { drop: drop } = (0, $2db980bfed6822da$export$f502ca02ebb85a1c)({
2000
+ element: tree.listEl.current,
1175
2001
  offset: offset,
1176
2002
  indent: tree.indent,
1177
- node: node,
1178
- prevNode: prev,
1179
- nextNode: next
2003
+ node: null,
2004
+ prevNode: tree.visibleNodes[tree.visibleNodes.length - 1],
2005
+ nextNode: null
1180
2006
  });
1181
2007
  return drop;
1182
2008
  }
1183
- })
1184
- , [
1185
- node,
1186
- prev,
1187
- el,
2009
+ }), [
1188
2010
  tree
1189
2011
  ]);
2012
+ drop(tree.listEl);
1190
2013
  }
1191
2014
 
1192
2015
 
1193
- const $2c0a5a237609003e$export$b59bdbef9ce70de2 = /*#__PURE__*/ $g00cZ$react.memo(function $2c0a5a237609003e$export$b59bdbef9ce70de2({ index: index , style: style }) {
1194
- const realTree = $3273af3fe11a7001$export$367b0f2231a90ba0();
1195
- const tree = $g00cZ$useMemo(()=>realTree
1196
- , []);
1197
- tree.sync(realTree);
1198
- const node = tree.visibleNodes[index];
1199
- const next = tree.visibleNodes[index + 1] || null;
1200
- const prev = tree.visibleNodes[index - 1] || null;
1201
- const el = $g00cZ$useRef(null);
1202
- const [{ isDragging: isDragging }, dragRef] = $907e707a330ef23a$export$715c0d031ede7907(node);
1203
- const [, dropRef] = $d38aa53467160173$export$57afafec4637d997(el, node, prev, next);
1204
- const isEditing = node.id === tree.editingId;
1205
- const isSelected = tree.isSelected(index);
1206
- const nextSelected = next && tree.isSelected(index + 1);
1207
- const prevSelected = prev && tree.isSelected(index - 1);
1208
- const isHoveringOverChild = node.id === tree.cursorParentId;
1209
- const isOverFolder = node.id === tree.cursorParentId && tree.cursorOverFolder;
1210
- const isOpen = node.isOpen;
1211
- const indent = tree.indent * node.level;
1212
- const state = $g00cZ$useMemo(()=>{
2016
+ function $5d6a5680e6f62734$export$a6ee728c3c6ef11d(props) {
2017
+ (0, $e739455e59c6aed3$export$5a6c424b1725f44f)();
2018
+ return props.children;
2019
+ }
2020
+
2021
+
2022
+
2023
+
2024
+
2025
+
2026
+ function $f13a06e5444f84b6$export$cdf2ef3f6364d85() {
2027
+ const tree = (0, $89e93131aae74bd9$export$367b0f2231a90ba0)();
2028
+ const Container = tree.props.renderContainer || (0, $065a164934293bf2$export$ff4858a4110d9246);
2029
+ return /*#__PURE__*/ (0, $g00cZ$jsx)((0, $g00cZ$Fragment), {
2030
+ children: /*#__PURE__*/ (0, $g00cZ$jsx)(Container, {})
2031
+ });
2032
+ }
2033
+
2034
+
2035
+
2036
+
2037
+
2038
+
2039
+ function $8f8be4c9bb5ab52a$export$3e21b60650ec7e55() {
2040
+ const tree = (0, $89e93131aae74bd9$export$367b0f2231a90ba0)();
2041
+ const { offset: offset , mouse: mouse , item: item , isDragging: isDragging } = (0, $g00cZ$useDragLayer)((m)=>{
1213
2042
  return {
1214
- isEditing: isEditing,
1215
- isDragging: isDragging,
1216
- isSelectedStart: isSelected && !prevSelected,
1217
- isSelectedEnd: isSelected && !nextSelected,
1218
- isSelected: isSelected,
1219
- isHoveringOverChild: isHoveringOverChild,
1220
- isOpen: isOpen,
1221
- isOverFolder: isOverFolder
2043
+ offset: m.getSourceClientOffset(),
2044
+ mouse: m.getClientOffset(),
2045
+ item: m.getItem(),
2046
+ isDragging: m.isDragging()
1222
2047
  };
1223
- }, [
1224
- isEditing,
1225
- isSelected,
1226
- prevSelected,
1227
- nextSelected,
1228
- isHoveringOverChild,
1229
- isOpen,
1230
- isDragging,
1231
- isOverFolder,
1232
- ]);
1233
- const ref = $g00cZ$useCallback((n)=>{
1234
- el.current = n;
1235
- dragRef(dropRef(n));
1236
- }, [
1237
- dragRef,
1238
- dropRef
1239
- ]);
1240
- const styles = $g00cZ$useMemo(()=>({
1241
- row: {
1242
- ...style
1243
- },
1244
- indent: {
1245
- paddingLeft: indent
2048
+ });
2049
+ const DragPreview = tree.props.renderDragPreview || (0, $77d34d95e44d2f58$export$84e211ad8431a387);
2050
+ return /*#__PURE__*/ (0, $g00cZ$jsx)(DragPreview, {
2051
+ offset: offset,
2052
+ mouse: mouse,
2053
+ id: item?.id || null,
2054
+ dragIds: item?.dragIds || [],
2055
+ isDragging: isDragging
2056
+ });
2057
+ }
2058
+
2059
+
2060
+ var $0a3913338341addb$exports = {};
2061
+
2062
+ $parcel$export($0a3913338341addb$exports, "useSimpleTree", () => $0a3913338341addb$export$dcd27aa2043b2724);
2063
+
2064
+ var $65f74606ca594063$exports = {};
2065
+
2066
+ $parcel$export($65f74606ca594063$exports, "SimpleTree", () => $65f74606ca594063$export$e32206264f456dce);
2067
+ class $65f74606ca594063$export$e32206264f456dce {
2068
+ constructor(data){
2069
+ this.root = $65f74606ca594063$var$createRoot(data);
2070
+ }
2071
+ get data() {
2072
+ return this.root.children?.map((node)=>node.data) ?? [];
2073
+ }
2074
+ create(args) {
2075
+ const parent = args.parentId ? this.find(args.parentId) : this.root;
2076
+ if (!parent) return null;
2077
+ parent.addChild(args.data, args.index);
2078
+ }
2079
+ move(args) {
2080
+ const src = this.find(args.id);
2081
+ const parent = args.parentId ? this.find(args.parentId) : this.root;
2082
+ if (!src || !parent) return;
2083
+ parent.addChild(src.data, args.index);
2084
+ src.drop();
2085
+ }
2086
+ update(args) {
2087
+ const node = this.find(args.id);
2088
+ if (node) node.update(args.changes);
2089
+ }
2090
+ drop(args) {
2091
+ const node = this.find(args.id);
2092
+ if (node) node.drop();
2093
+ }
2094
+ find(id, node = this.root) {
2095
+ if (!node) return null;
2096
+ if (node.id === id) return node;
2097
+ if (node.children) {
2098
+ for (let child of node.children){
2099
+ const found = this.find(id, child);
2100
+ if (found) return found;
1246
2101
  }
1247
- })
1248
- , [
1249
- indent,
1250
- style
2102
+ return null;
2103
+ }
2104
+ return null;
2105
+ }
2106
+ }
2107
+ function $65f74606ca594063$var$createRoot(data) {
2108
+ const root = new $65f74606ca594063$var$SimpleNode({
2109
+ id: "ROOT"
2110
+ }, null);
2111
+ root.children = data.map((d)=>$65f74606ca594063$var$createNode(d, root));
2112
+ return root;
2113
+ }
2114
+ function $65f74606ca594063$var$createNode(data, parent) {
2115
+ const node = new $65f74606ca594063$var$SimpleNode(data, parent);
2116
+ if (data.children) node.children = data.children.map((d)=>$65f74606ca594063$var$createNode(d, node));
2117
+ return node;
2118
+ }
2119
+ class $65f74606ca594063$var$SimpleNode {
2120
+ constructor(data, parent){
2121
+ this.data = data;
2122
+ this.parent = parent;
2123
+ this.id = data.id;
2124
+ }
2125
+ hasParent() {
2126
+ return !!this.parent;
2127
+ }
2128
+ get childIndex() {
2129
+ return this.hasParent() ? this.parent.children.indexOf(this) : -1;
2130
+ }
2131
+ addChild(data, index) {
2132
+ const node = $65f74606ca594063$var$createNode(data, this);
2133
+ this.children = this.children ?? [];
2134
+ this.children.splice(index, 0, node);
2135
+ this.data.children = this.data.children ?? [];
2136
+ this.data.children.splice(index, 0, data);
2137
+ }
2138
+ removeChild(index) {
2139
+ this.children?.splice(index, 1);
2140
+ this.data.children?.splice(index, 1);
2141
+ }
2142
+ update(changes) {
2143
+ if (this.hasParent()) {
2144
+ const i = this.childIndex;
2145
+ this.parent.addChild({
2146
+ ...this.data,
2147
+ ...changes
2148
+ }, i);
2149
+ this.drop();
2150
+ }
2151
+ }
2152
+ drop() {
2153
+ if (this.hasParent()) this.parent.removeChild(this.childIndex);
2154
+ }
2155
+ }
2156
+
2157
+
2158
+ let $0a3913338341addb$var$nextId = 0;
2159
+ function $0a3913338341addb$export$dcd27aa2043b2724(initialData) {
2160
+ const [data, setData] = (0, $g00cZ$useState)(initialData);
2161
+ const tree = (0, $g00cZ$useMemo)(()=>new (0, $65f74606ca594063$export$e32206264f456dce)(data), [
2162
+ data
1251
2163
  ]);
1252
- const handlers = $g00cZ$useMemo(()=>{
1253
- return {
1254
- select: (e, args = {
1255
- selectOnClick: true
1256
- })=>{
1257
- if (node.rowIndex === null) return;
1258
- if (args.selectOnClick || e.metaKey || e.shiftKey) tree.select(node.rowIndex, e.metaKey, e.shiftKey);
1259
- else tree.select(null, false, false);
1260
- },
1261
- toggle: (e)=>{
1262
- e.stopPropagation();
1263
- tree.onToggle(node.id, !node.isOpen);
1264
- },
1265
- edit: ()=>tree.edit(node.id)
1266
- ,
1267
- submit: (name)=>{
1268
- name.trim() ? tree.submit(node.id, name) : tree.reset(node.id);
1269
- },
1270
- reset: ()=>tree.reset(node.id)
2164
+ const onMove = (args)=>{
2165
+ for (const id of args.dragIds)tree.move({
2166
+ id: id,
2167
+ parentId: args.parentId,
2168
+ index: args.index
2169
+ });
2170
+ setData(tree.data);
2171
+ };
2172
+ const onRename = ({ name: name , id: id })=>{
2173
+ tree.update({
2174
+ id: id,
2175
+ changes: {
2176
+ name: name
2177
+ }
2178
+ });
2179
+ setData(tree.data);
2180
+ };
2181
+ const onCreate = ({ parentId: parentId , index: index , type: type })=>{
2182
+ const data = {
2183
+ id: `simple-tree-id-${$0a3913338341addb$var$nextId++}`,
2184
+ name: ""
1271
2185
  };
1272
- }, [
1273
- node,
1274
- tree
1275
- ]);
1276
- const Renderer = $g00cZ$useMemo(()=>{
1277
- return(/*#__PURE__*/ $g00cZ$react.memo(tree.renderer));
1278
- }, [
1279
- tree.renderer
1280
- ]);
1281
- return(/*#__PURE__*/ $g00cZ$jsx(Renderer, {
1282
- innerRef: ref,
1283
- data: node.model,
1284
- styles: styles,
1285
- state: state,
1286
- handlers: handlers,
1287
- preview: false,
1288
- tree: tree
1289
- }));
1290
- });
2186
+ if (type === "internal") data.children = [];
2187
+ tree.create({
2188
+ parentId: parentId,
2189
+ index: index,
2190
+ data: data
2191
+ });
2192
+ setData(tree.data);
2193
+ return data;
2194
+ };
2195
+ const onDelete = (args)=>{
2196
+ args.ids.forEach((id)=>tree.drop({
2197
+ id: id
2198
+ }));
2199
+ setData(tree.data);
2200
+ };
2201
+ const controller = {
2202
+ onMove: onMove,
2203
+ onRename: onRename,
2204
+ onCreate: onCreate,
2205
+ onDelete: onDelete
2206
+ };
2207
+ return [
2208
+ data,
2209
+ controller
2210
+ ];
2211
+ }
1291
2212
 
1292
2213
 
1293
- function $334f7345c929ac88$export$54c2e3dc7acea9f5(props) {
1294
- const tree = $3273af3fe11a7001$export$367b0f2231a90ba0();
1295
- return(/*#__PURE__*/ $g00cZ$jsx("div", {
1296
- style: {
1297
- height: tree.height,
1298
- width: tree.width,
1299
- overflow: "hidden"
1300
- },
1301
- children: /*#__PURE__*/ $g00cZ$jsx($g00cZ$FixedSizeList, {
1302
- className: props.className,
1303
- outerRef: tree.listEl,
1304
- itemCount: tree.visibleNodes.length,
1305
- height: tree.height,
1306
- width: tree.width,
1307
- itemSize: tree.rowHeight,
1308
- itemKey: (index)=>tree.visibleNodes[index]?.id || index
1309
- ,
1310
- outerElementType: $05f64c7ebcbad8b5$export$70c2b8898b86d3ad,
1311
- ref: tree.list,
1312
- children: $2c0a5a237609003e$export$b59bdbef9ce70de2
1313
- })
1314
- }));
2214
+ function $c881d1adb735dfd0$export$d227906824a13416(props) {
2215
+ if (props.initialData && props.data) throw new Error(`React Arborist Tree => Provide either a data or initialData prop, but not both.`);
2216
+ if (props.initialData && (props.onCreate || props.onDelete || props.onMove || props.onRename)) throw new Error(`React Arborist Tree => You passed the initialData prop along with a data handler.
2217
+ Use the data prop if you want to provide your own handlers.`);
2218
+ if (props.initialData) {
2219
+ /**
2220
+ * Let's break the rules of hooks here. If the initialData prop
2221
+ * is provided, we will assume it will not change for the life of
2222
+ * the component.
2223
+ *
2224
+ * We will provide the real data and the handlers to update it.
2225
+ * */ const [data, controller] = (0, $0a3913338341addb$export$dcd27aa2043b2724)(props.initialData);
2226
+ return {
2227
+ ...props,
2228
+ ...controller,
2229
+ data: data
2230
+ };
2231
+ } else return props;
1315
2232
  }
1316
2233
 
1317
2234
 
1318
- const $2ba43033bb8eb39d$export$7fbedc92909ed28e = /*#__PURE__*/ $g00cZ$forwardRef(function $2ba43033bb8eb39d$export$7fbedc92909ed28e(props, ref) {
1319
- const root = $g00cZ$useMemo(()=>$1e5818ce7991d06d$export$9c537176392280a0(props.data, props.hideRoot, props.getChildren, props.isOpen, props.disableDrag, props.disableDrop, props.openByDefault)
1320
- , [
1321
- props.data,
1322
- props.hideRoot,
1323
- props.getChildren,
1324
- props.isOpen,
1325
- props.disableDrag,
1326
- props.disableDrop,
1327
- props.openByDefault,
1328
- ]);
1329
- return(/*#__PURE__*/ $g00cZ$jsx($3a48b0a92affa3e3$export$6a399b2f7f12632c, {
1330
- treeProps: props,
2235
+ const $2ba43033bb8eb39d$export$7fbedc92909ed28e = /*#__PURE__*/ (0, $g00cZ$forwardRef)(function Tree(props, ref) {
2236
+ const treeProps = (0, $c881d1adb735dfd0$export$d227906824a13416)(props);
2237
+ return /*#__PURE__*/ (0, $g00cZ$jsxs)((0, $dac24389e46ba09d$export$c49dab5eb1b4ce0c), {
2238
+ treeProps: treeProps,
1331
2239
  imperativeHandle: ref,
1332
- root: root,
1333
- children: /*#__PURE__*/ $g00cZ$jsxs($g00cZ$DndProvider, {
1334
- backend: $g00cZ$HTML5Backend,
1335
- options: {
1336
- rootElement: props.dndRootElement || undefined
1337
- },
1338
- children: [
1339
- /*#__PURE__*/ $g00cZ$jsx($5d6a5680e6f62734$export$a6ee728c3c6ef11d, {
1340
- children: /*#__PURE__*/ $g00cZ$jsx($334f7345c929ac88$export$54c2e3dc7acea9f5, {
1341
- className: props.className
1342
- })
1343
- }),
1344
- /*#__PURE__*/ $g00cZ$jsx($6d8109ab8cbcd5e7$export$133773870222880f, {
1345
- })
1346
- ]
1347
- })
1348
- }));
2240
+ children: [
2241
+ /*#__PURE__*/ (0, $g00cZ$jsx)((0, $5d6a5680e6f62734$export$a6ee728c3c6ef11d), {
2242
+ children: /*#__PURE__*/ (0, $g00cZ$jsx)((0, $f13a06e5444f84b6$export$cdf2ef3f6364d85), {})
2243
+ }),
2244
+ /*#__PURE__*/ (0, $g00cZ$jsx)((0, $8f8be4c9bb5ab52a$export$3e21b60650ec7e55), {})
2245
+ ]
2246
+ });
1349
2247
  });
1350
2248
 
1351
2249
 
2250
+ var $8c5b0bb55f55c0d2$exports = {};
2251
+
2252
+
2253
+ var $309635e603b9cc16$exports = {};
2254
+
2255
+
2256
+ var $c9ea992a6d07f0b8$exports = {};
2257
+
2258
+
2259
+
2260
+
2261
+
1352
2262
 
1353
2263
 
1354
2264
 
1355
- export {$2ba43033bb8eb39d$export$7fbedc92909ed28e as Tree, $40fcfa3e17312481$export$e2da3477247342d1 as TreeApi};
2265
+ export {$2ba43033bb8eb39d$export$7fbedc92909ed28e as Tree, $096e74084443e9a3$export$d4b903da0f522dc8 as NodeApi, $bfece7c4aed4e9c4$export$e2da3477247342d1 as TreeApi, $65f74606ca594063$export$e32206264f456dce as SimpleTree, $0a3913338341addb$export$dcd27aa2043b2724 as useSimpleTree};
1356
2266
  //# sourceMappingURL=module.js.map