@asup/tree-of-nodes 2.0.4 → 2.0.6

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 (10) hide show
  1. package/dist/cjs/main.css +64 -9
  2. package/dist/cjs/main.css.map +1 -1
  3. package/dist/cjs/main.js +195 -167
  4. package/dist/cjs/main.js.map +1 -1
  5. package/dist/main.css +64 -9
  6. package/dist/main.css.map +1 -1
  7. package/dist/main.js +197 -169
  8. package/dist/main.js.map +1 -1
  9. package/dist/tree-of-nodes.d.ts.map +1 -1
  10. package/package.json +1 -1
package/dist/cjs/main.css CHANGED
@@ -1,48 +1,103 @@
1
+ :root {
2
+ --ton-transition-time: .3s;
3
+ --ton-long-transition-time: .6s;
4
+ }
5
+
6
+ .tree-of-nodes {
7
+ flex-direction: column;
8
+ gap: 1px;
9
+ width: 100%;
10
+ max-width: 100%;
11
+ display: flex;
12
+ }
13
+
1
14
  .ton-checkbox {
2
15
  margin-top: 3px;
3
16
  margin-right: 3px;
4
17
  }
5
18
 
6
19
  .ton-expander {
7
- margin-bottom: 4px;
20
+ margin: 0;
21
+ }
22
+
23
+ .ton-node {
24
+ cursor: pointer;
25
+ align-items: center;
26
+ width: 100%;
27
+ max-width: 100%;
28
+ height: 30px;
29
+ display: flex;
30
+ }
31
+
32
+ .ton-label {
33
+ height: 26px;
34
+ }
35
+
36
+ .ton-label-span {
37
+ text-overflow: ellipsis;
38
+ white-space: nowrap;
39
+ border: 1px;
40
+ border-radius: 3px;
41
+ width: 100%;
42
+ padding: 1px 3px;
43
+ display: inline-block;
44
+ overflow: hidden;
45
+ }
46
+
47
+ .ton-rename-holder {
48
+ width: 100%;
49
+ }
50
+
51
+ .ton-rename {
52
+ border: 1px dotted #000;
53
+ width: 100%;
54
+ min-width: 0;
55
+ line-height: 24px;
8
56
  }
9
57
 
10
58
  .ton-child {
11
59
  opacity: 1;
60
+ transition: opacity var(--ton-long-transition-time) linear;
12
61
  margin-left: 16px;
13
- transition: opacity .6s linear;
14
62
  display: block;
15
63
  }
16
64
 
17
65
  .ton-collapsible-wrapper {
66
+ width: 100%;
67
+ max-width: 100%;
18
68
  display: flex;
19
69
  overflow: hidden;
20
70
  }
21
71
 
22
72
  .ton-collapsible-wrapper:after {
23
73
  content: "";
24
- height: 20px;
74
+ height: 1px;
75
+ transition: height var(--ton-transition-time) linear, max-height 0s var(--ton-transition-time) linear;
25
76
  max-height: 0;
26
- transition: height .3s linear, max-height 0s linear .3s;
27
77
  }
28
78
 
29
79
  .ton-collapsible {
80
+ transition: margin-bottom var(--ton-transition-time) cubic-bezier(0, 0, 0, 1);
81
+ flex-direction: column;
82
+ gap: 1px;
83
+ width: 100%;
30
84
  max-height: 10000px;
31
- margin-bottom: 0;
32
- transition: margin-bottom .3s cubic-bezier(0, 0, 0, 1);
85
+ margin-top: 1px;
86
+ margin-bottom: 1px;
87
+ display: flex;
33
88
  }
34
89
 
35
90
  .ton-collapsible-wrapper.collapsed > .ton-collapsible {
91
+ transition: margin-bottom var(--ton-transition-time) cubic-bezier(1, 0, 1, 1), visibility 0s var(--ton-transition-time), max-height 0s var(--ton-transition-time);
36
92
  visibility: hidden;
37
93
  max-height: 0;
38
94
  margin-bottom: -2000px;
39
- transition: margin-bottom .3s cubic-bezier(1, 0, 1, 1), visibility 0s .3s, max-height 0s .3s;
40
95
  }
41
96
 
42
97
  .ton-collapsible-wrapper.collapsed:after {
43
98
  height: 0;
99
+ transition: height var(--ton-transition-time) linear;
44
100
  max-height: 20px;
45
- transition: height .3s linear;
46
101
  }
47
102
 
48
103
  .ton-collapsible-wrapper.collapsed {
@@ -51,6 +106,6 @@
51
106
 
52
107
  .ton-collapsible-wrapper.collapsed .ton-child {
53
108
  opacity: 0;
54
- transition: opacity .6s linear;
109
+ transition: opacity var(--ton-long-transition-time) linear;
55
110
  }
56
111
  /*# sourceMappingURL=main.css.map */
package/dist/cjs/main.css.map CHANGED
@@ -1 +1 @@
1
- {"mappings":"AAAA;;;;;AAKA;;;;AAIA;;;;;;;AAOA;;;;;AAIA;;;;;;;AAQA;;;;;;AAKA;;;;;;;AASA;;;;;;AAKA;;;;AAGA","sources":["src/components/TreeNode.css"],"sourcesContent":[".ton-checkbox {\n margin-right: 3px;\n margin-top: 3px;\n}\n\n.ton-expander {\n margin-bottom: 4px;\n}\n\n.ton-child {\n margin-left: 16px;\n display: block;\n opacity: 1;\n transition: opacity 0.6s linear;\n}\n\n.ton-collapsible-wrapper {\n display: flex;\n overflow: hidden;\n}\n.ton-collapsible-wrapper:after {\n content: \"\";\n height: 20px;\n transition:\n height 0.3s linear,\n max-height 0s 0.3s linear;\n max-height: 0px;\n}\n.ton-collapsible {\n transition: margin-bottom 0.3s cubic-bezier(0, 0, 0, 1);\n margin-bottom: 0;\n max-height: 10000px;\n}\n.ton-collapsible-wrapper.collapsed > .ton-collapsible {\n margin-bottom: -2000px;\n transition:\n margin-bottom 0.3s cubic-bezier(1, 0, 1, 1),\n visibility 0s 0.3s,\n max-height 0s 0.3s;\n visibility: hidden;\n max-height: 0;\n}\n.ton-collapsible-wrapper.collapsed:after {\n height: 0;\n transition: height 0.3s linear;\n max-height: 20px;\n}\n.ton-collapsible-wrapper.collapsed {\n visibility: hidden;\n}\n.ton-collapsible-wrapper.collapsed .ton-child {\n opacity: 0;\n transition: opacity 0.6s linear;\n}\n"],"names":[],"version":3,"file":"main.css.map"}
1
+ {"mappings":"AAAA;;;;;AAKA;;;;;;;;AAQA;;;;;AAKA;;;;AAIA;;;;;;;;;AASA;;;;AAIA;;;;;;;;;;;AAaA;;;;AAIA;;;;;;;AAOA;;;;;;;AAOA;;;;;;;AAMA;;;;;;;AAQA;;;;;;;;;;;AAUA;;;;;;;AASA;;;;;;AAKA;;;;AAGA","sources":["src/components/TreeNode.css"],"sourcesContent":[":root {\n --ton-transition-time: 0.3s;\n --ton-long-transition-time: 0.6s;\n}\n\n.tree-of-nodes {\n display: flex;\n flex-direction: column;\n width: 100%;\n max-width: 100%;\n gap: 1px;\n}\n\n.ton-checkbox {\n margin-right: 3px;\n margin-top: 3px;\n}\n\n.ton-expander {\n margin: 0;\n}\n\n.ton-node {\n display: flex;\n align-items: center;\n cursor: pointer;\n width: 100%;\n max-width: 100%;\n height: 30px;\n}\n\n.ton-label {\n height: 26px;\n}\n\n.ton-label-span {\n display: inline-block;\n width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n padding: 1px;\n padding-left: 3px;\n padding-right: 3px;\n border: 1px;\n border-radius: 3px;\n}\n\n.ton-rename-holder {\n width: 100%;\n}\n\n.ton-rename {\n line-height: 24px;\n border: 1px dotted black;\n width: 100%;\n min-width: 0;\n}\n\n.ton-child {\n margin-left: 16px;\n display: block;\n opacity: 1;\n transition: opacity var(--ton-long-transition-time) linear;\n}\n\n.ton-collapsible-wrapper {\n display: flex;\n overflow: hidden;\n width: 100%;\n max-width: 100%;\n}\n.ton-collapsible-wrapper:after {\n content: \"\";\n height: 1px;\n transition:\n height var(--ton-transition-time) linear,\n max-height 0s var(--ton-transition-time) linear;\n max-height: 0px;\n}\n.ton-collapsible {\n display: flex;\n flex-direction: column;\n gap: 1px;\n transition: margin-bottom var(--ton-transition-time) cubic-bezier(0, 0, 0, 1);\n margin-top: 1px;\n margin-bottom: 1px;\n max-height: 10000px;\n width: 100%;\n}\n.ton-collapsible-wrapper.collapsed > .ton-collapsible {\n margin-bottom: -2000px;\n transition:\n margin-bottom var(--ton-transition-time) cubic-bezier(1, 0, 1, 1),\n visibility 0s var(--ton-transition-time),\n max-height 0s var(--ton-transition-time);\n visibility: hidden;\n max-height: 0;\n}\n.ton-collapsible-wrapper.collapsed:after {\n height: 0;\n transition: height var(--ton-transition-time) linear;\n max-height: 20px;\n}\n.ton-collapsible-wrapper.collapsed {\n visibility: hidden;\n}\n.ton-collapsible-wrapper.collapsed .ton-child {\n opacity: 0;\n transition: opacity var(--ton-long-transition-time) linear;\n}\n"],"names":[],"version":3,"file":"main.css.map"}
package/dist/cjs/main.js CHANGED
@@ -3,7 +3,6 @@ var $gTuX4$reactjsxruntime = require("react/jsx-runtime");
3
3
  var $gTuX4$asupcontextmenu = require("@asup/context-menu");
4
4
  var $gTuX4$react = require("react");
5
5
  var $gTuX4$reactbootstrapicons = require("react-bootstrap-icons");
6
- var $gTuX4$swchelperscjs_object_spreadcjs = require("@swc/helpers/cjs/_object_spread.cjs");
7
6
  var $gTuX4$reactbootstrap = require("react-bootstrap");
8
7
 
9
8
 
@@ -75,21 +74,7 @@ const $ff9cca1fe8f6b24e$export$29ec378200e05207 = (0, $gTuX4$react.createContext
75
74
 
76
75
 
77
76
 
78
-
79
77
  const $176d21a51def1fce$export$14f190ac910bde69 = /*#__PURE__*/ (0, ($parcel$interopDefault($gTuX4$react))).forwardRef(({ id: id, value: value, editing: editing, saving: saving, setValue: setValue, sendEscape: sendEscape, style: style, spellCheck: spellCheck = "true" }, ref)=>{
80
- $176d21a51def1fce$export$14f190ac910bde69.displayName = "WordEntry";
81
- const currentStyle = (0, $gTuX4$react.useMemo)(()=>{
82
- return (0, $gTuX4$swchelperscjs_object_spreadcjs._)({
83
- display: "inline-block",
84
- padding: "1px",
85
- paddingLeft: "3px",
86
- paddingRight: "3px",
87
- border: "1px",
88
- borderRadius: "3px"
89
- }, style);
90
- }, [
91
- style
92
- ]);
93
78
  const [currentValue, setCurrentValue] = (0, $gTuX4$react.useState)(value !== null && value !== void 0 ? value : "");
94
79
  (0, $gTuX4$react.useEffect)(()=>{
95
80
  setCurrentValue(value !== null && value !== void 0 ? value : "");
@@ -112,17 +97,36 @@ const $176d21a51def1fce$export$14f190ac910bde69 = /*#__PURE__*/ (0, ($parcel$int
112
97
  sendEscape,
113
98
  value
114
99
  ]);
115
- // Simple if not editing
116
- if (!editing) return /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("span", {
117
- style: currentStyle,
100
+ // Add window onMouseDown event to stop events when editing
101
+ (0, $gTuX4$react.useEffect)(()=>{
102
+ const handleMouseDown = (e)=>{
103
+ const target = e.target;
104
+ if (editing && target.id !== `${id}` && target.id !== `${id}-holder` && target.id !== `${id}-spinner` && target.className !== "ton-rename") {
105
+ e.preventDefault();
106
+ e.stopPropagation();
107
+ returnData();
108
+ }
109
+ };
110
+ window.addEventListener("mousedown", handleMouseDown);
111
+ return ()=>{
112
+ window.removeEventListener("mousedown", handleMouseDown);
113
+ };
114
+ }, [
115
+ editing,
116
+ id,
117
+ returnData
118
+ ]);
119
+ return !editing ? /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("span", {
120
+ className: "ton-label-span",
121
+ style: style,
118
122
  id: `${id}`,
119
123
  children: value ? value : /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $gTuX4$reactjsxruntime.Fragment), {
120
124
  children: "\xa0"
121
125
  })
122
- });
123
- return /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsxs)("div", {
124
- style: currentStyle,
126
+ }) : /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsxs)("div", {
127
+ style: style,
125
128
  id: `${id}-holder`,
129
+ className: "ton-rename-holder",
126
130
  children: [
127
131
  saving && /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $gTuX4$reactbootstrap.Spinner), {
128
132
  id: `${id}-spinner`,
@@ -135,12 +139,7 @@ const $176d21a51def1fce$export$14f190ac910bde69 = /*#__PURE__*/ (0, ($parcel$int
135
139
  id: String(id),
136
140
  ref: ref,
137
141
  type: "text",
138
- style: {
139
- lineHeight: "0.75rem",
140
- border: "1px dotted black",
141
- width: "auto",
142
- minWidth: "0"
143
- },
142
+ className: "ton-rename",
144
143
  value: currentValue,
145
144
  disabled: saving,
146
145
  onChange: (e)=>setCurrentValue(e.currentTarget.value),
@@ -150,6 +149,7 @@ const $176d21a51def1fce$export$14f190ac910bde69 = /*#__PURE__*/ (0, ($parcel$int
150
149
  ]
151
150
  });
152
151
  });
152
+ $176d21a51def1fce$export$14f190ac910bde69.displayName = "WordEntry";
153
153
 
154
154
 
155
155
  const $a56aac35d4408806$export$2eba8ec3a333fdbb = ({ id: id, canRemove: canRemove, canRename: canRename, canAddChildren: canAddChildren, canRemoveChildren: canRemoveChildren, canRenameChildren: canRenameChildren })=>{
@@ -173,7 +173,7 @@ const $a56aac35d4408806$export$2eba8ec3a333fdbb = ({ id: id, canRemove: canRemov
173
173
  ]);
174
174
  // State
175
175
  const [error, setError] = (0, $gTuX4$react.useState)(false);
176
- const [errorText, setErrotText] = (0, $gTuX4$react.useState)("");
176
+ const [errorText, setErrorText] = (0, $gTuX4$react.useState)("");
177
177
  const expanded = (0, $gTuX4$react.useMemo)(()=>{
178
178
  var _treeContext_expandedNodes_findIndex;
179
179
  return ((_treeContext_expandedNodes_findIndex = treeContext === null || treeContext === void 0 ? void 0 : treeContext.expandedNodes.findIndex((e)=>e === id)) !== null && _treeContext_expandedNodes_findIndex !== void 0 ? _treeContext_expandedNodes_findIndex : -1) > -1;
@@ -181,6 +181,14 @@ const $a56aac35d4408806$export$2eba8ec3a333fdbb = ({ id: id, canRemove: canRemov
181
181
  id,
182
182
  treeContext === null || treeContext === void 0 ? void 0 : treeContext.expandedNodes
183
183
  ]);
184
+ // Ensures that child nodes are drawn before they are expanded
185
+ const [hasRenderedClosed, setHasRenderedClosed] = (0, $gTuX4$react.useState)(childNodes !== undefined && childNodes.length > 0);
186
+ (0, $gTuX4$react.useEffect)(()=>{
187
+ if (childNodes && childNodes.length > 0 && !hasRenderedClosed) setHasRenderedClosed(true);
188
+ }, [
189
+ childNodes,
190
+ hasRenderedClosed
191
+ ]);
184
192
  // Checkbox
185
193
  const checkRef = (0, $gTuX4$react.useRef)(null);
186
194
  (0, $gTuX4$react.useEffect)(()=>{
@@ -234,10 +242,10 @@ const $a56aac35d4408806$export$2eba8ec3a333fdbb = ({ id: id, canRemove: canRemov
234
242
  if (!ret.success) {
235
243
  setError(true);
236
244
  var _ret_ErrorText;
237
- setErrotText((_ret_ErrorText = ret.ErrorText) !== null && _ret_ErrorText !== void 0 ? _ret_ErrorText : "An unknown error has occured");
245
+ setErrorText((_ret_ErrorText = ret.ErrorText) !== null && _ret_ErrorText !== void 0 ? _ret_ErrorText : "An unknown error has occured");
238
246
  } else {
239
247
  setError(false);
240
- setErrotText("");
248
+ setErrorText("");
241
249
  }
242
250
  }, []);
243
251
  const confirmNewNode = (0, $gTuX4$react.useCallback)(async (label)=>{
@@ -321,124 +329,140 @@ const $a56aac35d4408806$export$2eba8ec3a333fdbb = ({ id: id, canRemove: canRemov
321
329
  renameThis
322
330
  ]);
323
331
  // Return node
324
- return !treeContext ? null : /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $gTuX4$asupcontextmenu.ContextMenuHandler), {
325
- menuItems: menuItems,
326
- children: /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsxs)("div", {
327
- id: `${treeContext.id}-treenode-${id}`,
328
- className: "treenode",
329
- children: [
330
- error ? /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsxs)((0, $gTuX4$reactjsxruntime.Fragment), {
331
- children: [
332
- /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $gTuX4$reactbootstrapicons.ExclamationCircleFill), {
333
- color: "var(--bs-danger)"
334
- }),
335
- " ",
336
- errorText
337
- ]
338
- }) : /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsxs)("div", {
339
- className: "ton-node",
340
- children: [
341
- treeContext.showCheckBox && /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("input", {
342
- ref: checkRef,
343
- type: "checkbox",
344
- role: "checkbox",
345
- className: "ton-checkbox",
346
- id: `${treeContext.id}-treenode-checkbox-${id}`,
347
- onClick: ()=>{
348
- var _treeContext_handleSelect;
349
- treeContext === null || treeContext === void 0 ? void 0 : (_treeContext_handleSelect = treeContext.handleSelect) === null || _treeContext_handleSelect === void 0 ? void 0 : _treeContext_handleSelect.call(treeContext, descendents);
350
- }
351
- }),
352
- childNodes !== undefined && childNodes.length > 0 ? !expanded ? /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $gTuX4$reactbootstrapicons.CaretRightFill), {
353
- id: `${treeContext.id}-treenode-caret-${id}`,
354
- className: "ton-expander",
355
- role: "button",
356
- color: nodeColour,
357
- "aria-expanded": false,
358
- "aria-label": "Expander",
359
- onClick: ()=>treeContext.handleExpandClick(id)
360
- }) : /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $gTuX4$reactbootstrapicons.CaretDownFill), {
361
- id: `${treeContext.id}-treenode-caret-${id}`,
362
- className: "ton-expander",
363
- role: "button",
364
- "aria-expanded": true,
365
- "aria-label": "Expander",
366
- color: nodeColour,
367
- onClick: ()=>{
368
- treeContext.handleExpandClick(id);
369
- }
370
- }) : /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $gTuX4$reactbootstrapicons.CaretRight), {
371
- id: `${treeContext.id}-treenode-caret-${id}`,
372
- className: "ton-expander",
373
- role: "button",
374
- color: nodeColour,
375
- "aria-expanded": false,
376
- "aria-label": "Disabled expander",
377
- onClick: ()=>treeContext.handleSelect && treeContext.handleSelect(id)
378
- }),
379
- thisNode && /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
380
- style: {
381
- display: "inline-block"
382
- },
383
- onContextMenuCapture: ()=>treeContext.handleSelect && treeContext.handleSelect(id),
384
- onClickCapture: ()=>treeContext.handleSelect && treeContext.handleSelect(id),
385
- onFocusCapture: ()=>treeContext.handleSelect && treeContext.handleSelect(id),
386
- children: /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $176d21a51def1fce$export$14f190ac910bde69), {
387
- id: `${treeContext.id}-treenode-entry-${id}`,
388
- ref: currentNameRef,
389
- value: thisNode.label,
390
- editing: renaming,
391
- saving: updatingNode,
392
- setValue: (ret)=>renameNode(ret),
393
- sendEscape: ()=>setRenaming(false),
332
+ return !treeContext ? null : /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsxs)((0, $gTuX4$reactjsxruntime.Fragment), {
333
+ children: [
334
+ /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $gTuX4$asupcontextmenu.ContextMenuHandler), {
335
+ menuItems: menuItems,
336
+ style: {
337
+ display: "inline-block",
338
+ width: "100%"
339
+ },
340
+ children: /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
341
+ id: `${treeContext.id}-treenode-${id}`,
342
+ className: "treenode",
343
+ children: error ? /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsxs)((0, $gTuX4$reactjsxruntime.Fragment), {
344
+ children: [
345
+ /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $gTuX4$reactbootstrapicons.ExclamationCircleFill), {
346
+ color: "var(--bs-danger)"
347
+ }),
348
+ " ",
349
+ errorText
350
+ ]
351
+ }) : /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsxs)("div", {
352
+ className: "ton-node",
353
+ children: [
354
+ treeContext.showCheckBox && /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("input", {
355
+ ref: checkRef,
356
+ type: "checkbox",
357
+ role: "checkbox",
358
+ className: "ton-checkbox",
359
+ id: `${treeContext.id}-treenode-checkbox-${id}`,
360
+ onClick: ()=>{
361
+ var _treeContext_handleSelect;
362
+ return (_treeContext_handleSelect = treeContext.handleSelect) === null || _treeContext_handleSelect === void 0 ? void 0 : _treeContext_handleSelect.call(treeContext, descendents);
363
+ }
364
+ }),
365
+ childNodes && childNodes.length > 0 ? !expanded ? /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $gTuX4$reactbootstrapicons.CaretRightFill), {
366
+ id: `${treeContext.id}-treenode-caret-${id}`,
394
367
  style: {
395
- border: currentBorder,
396
- margin: currentBorder === "" ? "1px" : "",
397
- backgroundColor: currentBorder === "" ? "" : treeContext.textHighlight
368
+ width: "16px",
369
+ height: "16px"
398
370
  },
399
- spellCheck: treeContext.spellCheck
400
- })
401
- })
402
- ]
403
- }),
404
- childNodes !== undefined && /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
405
- className: `ton-collapsible-wrapper ${expanded ? "" : "collapsed"}`,
406
- children: /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
407
- className: "ton-collapsible",
408
- children: childNodes.map((h)=>/*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("span", {
409
- id: `${treeContext.id}-treenode-child-${h.id}`,
410
- className: "ton-child",
411
- children: /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)($a56aac35d4408806$export$2eba8ec3a333fdbb, {
412
- id: h.id,
413
- canRemove: canRemoveChildren,
414
- canRename: canRenameChildren,
415
- canAddChildren: canAddChildren,
416
- canRemoveChildren: canRemoveChildren,
417
- canRenameChildren: canRenameChildren
371
+ className: "ton-expander",
372
+ role: "button",
373
+ color: nodeColour,
374
+ "aria-expanded": false,
375
+ "aria-label": "Expander",
376
+ onClick: ()=>treeContext.handleExpandClick(id)
377
+ }) : /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $gTuX4$reactbootstrapicons.CaretDownFill), {
378
+ id: `${treeContext.id}-treenode-caret-${id}`,
379
+ className: "ton-expander",
380
+ role: "button",
381
+ "aria-expanded": true,
382
+ "aria-label": "Expander",
383
+ color: nodeColour,
384
+ onClick: ()=>treeContext.handleExpandClick(id)
385
+ }) : /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $gTuX4$reactbootstrapicons.CaretRight), {
386
+ id: `${treeContext.id}-treenode-caret-${id}`,
387
+ className: "ton-expander",
388
+ role: "button",
389
+ color: nodeColour,
390
+ "aria-expanded": false,
391
+ "aria-label": "Disabled expander",
392
+ onClick: ()=>{
393
+ var _treeContext_handleSelect;
394
+ return (_treeContext_handleSelect = treeContext.handleSelect) === null || _treeContext_handleSelect === void 0 ? void 0 : _treeContext_handleSelect.call(treeContext, id);
395
+ }
396
+ }),
397
+ thisNode && /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
398
+ className: "ton-label",
399
+ style: {
400
+ width: `calc(100% - ${treeContext.showCheckBox ? "32px" : "16px"})`
401
+ },
402
+ onContextMenuCapture: ()=>{
403
+ var _treeContext_handleSelect;
404
+ return (_treeContext_handleSelect = treeContext.handleSelect) === null || _treeContext_handleSelect === void 0 ? void 0 : _treeContext_handleSelect.call(treeContext, id);
405
+ },
406
+ onClickCapture: ()=>{
407
+ var _treeContext_handleSelect;
408
+ if (!treeContext.expandedNodes.includes(id)) treeContext.handleExpandClick(id);
409
+ (_treeContext_handleSelect = treeContext.handleSelect) === null || _treeContext_handleSelect === void 0 ? void 0 : _treeContext_handleSelect.call(treeContext, id);
410
+ },
411
+ onFocusCapture: ()=>{
412
+ var _treeContext_handleSelect;
413
+ return (_treeContext_handleSelect = treeContext.handleSelect) === null || _treeContext_handleSelect === void 0 ? void 0 : _treeContext_handleSelect.call(treeContext, id);
414
+ },
415
+ children: /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $176d21a51def1fce$export$14f190ac910bde69), {
416
+ id: `${treeContext.id}-treenode-entry-${id}`,
417
+ ref: currentNameRef,
418
+ value: thisNode.label,
419
+ editing: renaming,
420
+ saving: updatingNode,
421
+ setValue: (ret)=>renameNode(ret),
422
+ sendEscape: ()=>setRenaming(false),
423
+ style: {
424
+ border: currentBorder,
425
+ margin: currentBorder === "" ? "1px" : "",
426
+ backgroundColor: currentBorder === "" ? "" : treeContext.textHighlight
427
+ },
428
+ spellCheck: treeContext.spellCheck
418
429
  })
419
- }, h.id))
420
- })
421
- }),
422
- showNewNode && /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
423
- children: /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $176d21a51def1fce$export$14f190ac910bde69), {
424
- style: {
425
- marginLeft: "14px"
426
- },
427
- id: `treenode-new-${id}`,
428
- ref: newNameRef,
429
- editing: true,
430
- setValue: (ret)=>{
431
- confirmNewNode(ret);
432
- },
433
- saving: savingNewNode,
434
- sendEscape: ()=>{
435
- setShowNewNode(false);
436
- },
437
- spellCheck: treeContext.spellCheck
430
+ })
431
+ ]
438
432
  })
439
433
  })
440
- ]
441
- })
434
+ }),
435
+ childNodes && /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
436
+ className: `ton-collapsible-wrapper ${expanded && hasRenderedClosed && childNodes.length > 0 ? "" : "collapsed"}`,
437
+ children: childNodes.length > 0 && /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
438
+ className: "ton-collapsible",
439
+ children: childNodes.map((h)=>/*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("span", {
440
+ id: `${treeContext.id}-treenode-child-${h.id}`,
441
+ className: "ton-child",
442
+ children: /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)($a56aac35d4408806$export$2eba8ec3a333fdbb, {
443
+ id: h.id,
444
+ canRemove: canRemoveChildren,
445
+ canRename: canRenameChildren,
446
+ canAddChildren: canAddChildren,
447
+ canRemoveChildren: canRemoveChildren,
448
+ canRenameChildren: canRenameChildren
449
+ })
450
+ }, h.id))
451
+ })
452
+ }),
453
+ showNewNode && /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $176d21a51def1fce$export$14f190ac910bde69), {
454
+ style: {
455
+ marginLeft: "14px"
456
+ },
457
+ id: `treenode-new-${id}`,
458
+ ref: newNameRef,
459
+ editing: true,
460
+ setValue: (ret)=>confirmNewNode(ret),
461
+ saving: savingNewNode,
462
+ sendEscape: ()=>setShowNewNode(false),
463
+ spellCheck: treeContext.spellCheck
464
+ })
465
+ ]
442
466
  });
443
467
  };
444
468
  $a56aac35d4408806$export$2eba8ec3a333fdbb.displayName = "TreeNode";
@@ -487,30 +511,34 @@ const $9becaaec3a803ae7$export$5580fff3e08a8be5 = ({ id: id, nodeList: nodeList,
487
511
  }, [
488
512
  expandedNodes
489
513
  ]);
490
- return /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $ff9cca1fe8f6b24e$export$29ec378200e05207).Provider, {
491
- value: {
492
- id: id,
493
- nodeList: nodeList,
494
- selected: selectedArray,
495
- showCheckBox: showCheckBox,
496
- handleSelect: handleSelect,
497
- expandedNodes: expandedNodes,
498
- handleExpandClick: (r, f)=>changeExpand(r, f),
499
- onAddChild: onAdd,
500
- onRename: onRename,
501
- onRemove: onRemove,
502
- nodeHighlight: nodeHighlight,
503
- textHighlight: textHighlight,
504
- spellCheck: spellCheck
505
- },
506
- children: roots.map((r)=>/*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $a56aac35d4408806$export$2eba8ec3a333fdbb), {
507
- id: r,
508
- canRemove: canRemoveRoot,
509
- canAddChildren: canAddChildren,
510
- canRename: canRenameRoot,
511
- canRemoveChildren: canRemoveChildren,
512
- canRenameChildren: canRenameChildren
513
- }, r))
514
+ return /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
515
+ id: id,
516
+ className: "tree-of-nodes",
517
+ children: /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $ff9cca1fe8f6b24e$export$29ec378200e05207).Provider, {
518
+ value: {
519
+ id: id,
520
+ nodeList: nodeList,
521
+ selected: selectedArray,
522
+ showCheckBox: showCheckBox,
523
+ handleSelect: handleSelect,
524
+ expandedNodes: expandedNodes,
525
+ handleExpandClick: (r, f)=>changeExpand(r, f),
526
+ onAddChild: onAdd,
527
+ onRename: onRename,
528
+ onRemove: onRemove,
529
+ nodeHighlight: nodeHighlight,
530
+ textHighlight: textHighlight,
531
+ spellCheck: spellCheck
532
+ },
533
+ children: roots.map((r)=>/*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $a56aac35d4408806$export$2eba8ec3a333fdbb), {
534
+ id: r,
535
+ canRemove: canRemoveRoot,
536
+ canAddChildren: canAddChildren,
537
+ canRename: canRenameRoot,
538
+ canRemoveChildren: canRemoveChildren,
539
+ canRenameChildren: canRenameChildren
540
+ }, r))
541
+ })
514
542
  });
515
543
  };
516
544
  $9becaaec3a803ae7$export$5580fff3e08a8be5.displayName = "TreeOfNodes";