@elliemae/ds-treeview 2.1.0 → 2.2.0-alpha.3

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 (177) hide show
  1. package/cjs/TreeView.js +49 -31
  2. package/cjs/TreeView.js.map +7 -0
  3. package/cjs/TreeViewContext.js +53 -35
  4. package/cjs/TreeViewContext.js.map +7 -0
  5. package/cjs/config/cssClassesConstants.js +41 -13
  6. package/cjs/config/cssClassesConstants.js.map +7 -0
  7. package/cjs/config/useTreeview.js +108 -80
  8. package/cjs/config/useTreeview.js.map +7 -0
  9. package/cjs/index.js +37 -27
  10. package/cjs/index.js.map +7 -0
  11. package/cjs/parts/CheckboxSelectable.js +70 -59
  12. package/cjs/parts/CheckboxSelectable.js.map +7 -0
  13. package/cjs/parts/ChildrenCountDisplayer.js +45 -28
  14. package/cjs/parts/ChildrenCountDisplayer.js.map +7 -0
  15. package/cjs/parts/ExpandCaret.js +85 -83
  16. package/cjs/parts/ExpandCaret.js.map +7 -0
  17. package/cjs/parts/Icon.js +46 -31
  18. package/cjs/parts/Icon.js.map +7 -0
  19. package/cjs/parts/NestingSpace.js +43 -35
  20. package/cjs/parts/NestingSpace.js.map +7 -0
  21. package/cjs/parts/RadioSelectable.js +52 -37
  22. package/cjs/parts/RadioSelectable.js.map +7 -0
  23. package/cjs/parts/TreeItem.js +128 -147
  24. package/cjs/parts/TreeItem.js.map +7 -0
  25. package/cjs/parts/TreeItemText.js +88 -95
  26. package/cjs/parts/TreeItemText.js.map +7 -0
  27. package/cjs/parts/TreeList.js +117 -130
  28. package/cjs/parts/TreeList.js.map +7 -0
  29. package/cjs/plugins/dnd/TreeDndPlugin.js +51 -36
  30. package/cjs/plugins/dnd/TreeDndPlugin.js.map +7 -0
  31. package/cjs/plugins/dnd/index.js +28 -10
  32. package/cjs/plugins/dnd/index.js.map +7 -0
  33. package/cjs/plugins/index.js +34 -22
  34. package/cjs/plugins/index.js.map +7 -0
  35. package/cjs/plugins/roving/TreeRovingPlugin.js +35 -7
  36. package/cjs/plugins/roving/TreeRovingPlugin.js.map +7 -0
  37. package/cjs/plugins/roving/index.js +28 -9
  38. package/cjs/plugins/roving/index.js.map +7 -0
  39. package/cjs/plugins/searchable/SearchableTreePlugin.js +35 -7
  40. package/cjs/plugins/searchable/SearchableTreePlugin.js.map +7 -0
  41. package/cjs/plugins/searchable/index.js +28 -9
  42. package/cjs/plugins/searchable/index.js.map +7 -0
  43. package/cjs/plugins/selectable/SelectablePluginTree.js +35 -7
  44. package/cjs/plugins/selectable/SelectablePluginTree.js.map +7 -0
  45. package/cjs/plugins/selectable/index.js +28 -9
  46. package/cjs/plugins/selectable/index.js.map +7 -0
  47. package/cjs/plugins/toolbar/TreeToolbarPlugin.js +35 -7
  48. package/cjs/plugins/toolbar/TreeToolbarPlugin.js.map +7 -0
  49. package/cjs/plugins/toolbar/index.js +28 -9
  50. package/cjs/plugins/toolbar/index.js.map +7 -0
  51. package/cjs/plugins/tree/TreeDataPlugin.js +35 -7
  52. package/cjs/plugins/tree/TreeDataPlugin.js.map +7 -0
  53. package/cjs/plugins/tree/index.js +28 -9
  54. package/cjs/plugins/tree/index.js.map +7 -0
  55. package/cjs/plugins/virtualization/TreeVirtualizationPlugin.js +35 -7
  56. package/cjs/plugins/virtualization/TreeVirtualizationPlugin.js.map +7 -0
  57. package/cjs/plugins/virtualization/index.js +28 -9
  58. package/cjs/plugins/virtualization/index.js.map +7 -0
  59. package/cjs/react-desc-prop-types.js +82 -53
  60. package/cjs/react-desc-prop-types.js.map +7 -0
  61. package/cjs/related-components/TreeViewSearchBar.js +42 -40
  62. package/cjs/related-components/TreeViewSearchBar.js.map +7 -0
  63. package/cjs/sharedTypes.js +27 -2
  64. package/cjs/sharedTypes.js.map +7 -0
  65. package/cjs/utils/array-helpers.js +35 -11
  66. package/cjs/utils/array-helpers.js.map +7 -0
  67. package/cjs/utils/dnd-helpers.js +90 -84
  68. package/cjs/utils/dnd-helpers.js.map +7 -0
  69. package/cjs/utils/group-expands-helpers.js +86 -59
  70. package/cjs/utils/group-expands-helpers.js.map +7 -0
  71. package/cjs/utils/keyboard-helpers.js +84 -88
  72. package/cjs/utils/keyboard-helpers.js.map +7 -0
  73. package/cjs/utils/object-helpers.js +43 -36
  74. package/cjs/utils/object-helpers.js.map +7 -0
  75. package/cjs/utils/refs-helpers.js +43 -22
  76. package/cjs/utils/refs-helpers.js.map +7 -0
  77. package/cjs/utils/selectable-helper.js +61 -53
  78. package/cjs/utils/selectable-helper.js.map +7 -0
  79. package/cjs/utils/string-helpers.js +35 -7
  80. package/cjs/utils/string-helpers.js.map +7 -0
  81. package/cjs/utils/tree-helpers.js +105 -135
  82. package/cjs/utils/tree-helpers.js.map +7 -0
  83. package/cjs/utils/useDnDHelpers.js +97 -118
  84. package/cjs/utils/useDnDHelpers.js.map +7 -0
  85. package/cjs/utils/useInstanceRefActions.js +54 -43
  86. package/cjs/utils/useInstanceRefActions.js.map +7 -0
  87. package/cjs/utils/useTree.js +76 -78
  88. package/cjs/utils/useTree.js.map +7 -0
  89. package/esm/TreeView.js +18 -20
  90. package/esm/TreeView.js.map +7 -0
  91. package/esm/TreeViewContext.js +24 -29
  92. package/esm/TreeViewContext.js.map +7 -0
  93. package/esm/config/cssClassesConstants.js +12 -6
  94. package/esm/config/cssClassesConstants.js.map +7 -0
  95. package/esm/config/useTreeview.js +61 -54
  96. package/esm/config/useTreeview.js.map +7 -0
  97. package/esm/index.js +8 -9
  98. package/esm/index.js.map +7 -0
  99. package/esm/parts/CheckboxSelectable.js +36 -46
  100. package/esm/parts/CheckboxSelectable.js.map +7 -0
  101. package/esm/parts/ChildrenCountDisplayer.js +16 -20
  102. package/esm/parts/ChildrenCountDisplayer.js.map +7 -0
  103. package/esm/parts/ExpandCaret.js +54 -72
  104. package/esm/parts/ExpandCaret.js.map +7 -0
  105. package/esm/parts/Icon.js +16 -22
  106. package/esm/parts/Icon.js.map +7 -0
  107. package/esm/parts/NestingSpace.js +14 -27
  108. package/esm/parts/NestingSpace.js.map +7 -0
  109. package/esm/parts/RadioSelectable.js +20 -28
  110. package/esm/parts/RadioSelectable.js.map +7 -0
  111. package/esm/parts/TreeItem.js +91 -127
  112. package/esm/parts/TreeItem.js.map +7 -0
  113. package/esm/parts/TreeItemText.js +58 -85
  114. package/esm/parts/TreeItemText.js.map +7 -0
  115. package/esm/parts/TreeList.js +88 -117
  116. package/esm/parts/TreeList.js.map +7 -0
  117. package/esm/plugins/dnd/TreeDndPlugin.js +21 -26
  118. package/esm/plugins/dnd/TreeDndPlugin.js.map +7 -0
  119. package/esm/plugins/dnd/index.js +3 -1
  120. package/esm/plugins/dnd/index.js.map +7 -0
  121. package/esm/plugins/index.js +9 -7
  122. package/esm/plugins/index.js.map +7 -0
  123. package/esm/plugins/roving/TreeRovingPlugin.js +6 -3
  124. package/esm/plugins/roving/TreeRovingPlugin.js.map +7 -0
  125. package/esm/plugins/roving/index.js +3 -1
  126. package/esm/plugins/roving/index.js.map +7 -0
  127. package/esm/plugins/searchable/SearchableTreePlugin.js +6 -3
  128. package/esm/plugins/searchable/SearchableTreePlugin.js.map +7 -0
  129. package/esm/plugins/searchable/index.js +3 -1
  130. package/esm/plugins/searchable/index.js.map +7 -0
  131. package/esm/plugins/selectable/SelectablePluginTree.js +6 -3
  132. package/esm/plugins/selectable/SelectablePluginTree.js.map +7 -0
  133. package/esm/plugins/selectable/index.js +3 -1
  134. package/esm/plugins/selectable/index.js.map +7 -0
  135. package/esm/plugins/toolbar/TreeToolbarPlugin.js +6 -3
  136. package/esm/plugins/toolbar/TreeToolbarPlugin.js.map +7 -0
  137. package/esm/plugins/toolbar/index.js +3 -1
  138. package/esm/plugins/toolbar/index.js.map +7 -0
  139. package/esm/plugins/tree/TreeDataPlugin.js +6 -3
  140. package/esm/plugins/tree/TreeDataPlugin.js.map +7 -0
  141. package/esm/plugins/tree/index.js +3 -1
  142. package/esm/plugins/tree/index.js.map +7 -0
  143. package/esm/plugins/virtualization/TreeVirtualizationPlugin.js +6 -3
  144. package/esm/plugins/virtualization/TreeVirtualizationPlugin.js.map +7 -0
  145. package/esm/plugins/virtualization/index.js +3 -1
  146. package/esm/plugins/virtualization/index.js.map +7 -0
  147. package/esm/react-desc-prop-types.js +47 -43
  148. package/esm/react-desc-prop-types.js.map +7 -0
  149. package/esm/related-components/TreeViewSearchBar.js +13 -32
  150. package/esm/related-components/TreeViewSearchBar.js.map +7 -0
  151. package/esm/sharedTypes.js +2 -1
  152. package/esm/sharedTypes.js.map +7 -0
  153. package/esm/utils/array-helpers.js +6 -6
  154. package/esm/utils/array-helpers.js.map +7 -0
  155. package/esm/utils/dnd-helpers.js +58 -73
  156. package/esm/utils/dnd-helpers.js.map +7 -0
  157. package/esm/utils/group-expands-helpers.js +56 -46
  158. package/esm/utils/group-expands-helpers.js.map +7 -0
  159. package/esm/utils/keyboard-helpers.js +45 -72
  160. package/esm/utils/keyboard-helpers.js.map +7 -0
  161. package/esm/utils/object-helpers.js +14 -31
  162. package/esm/utils/object-helpers.js.map +7 -0
  163. package/esm/utils/refs-helpers.js +15 -19
  164. package/esm/utils/refs-helpers.js.map +7 -0
  165. package/esm/utils/selectable-helper.js +32 -43
  166. package/esm/utils/selectable-helper.js.map +7 -0
  167. package/esm/utils/string-helpers.js +6 -3
  168. package/esm/utils/string-helpers.js.map +7 -0
  169. package/esm/utils/tree-helpers.js +74 -119
  170. package/esm/utils/tree-helpers.js.map +7 -0
  171. package/esm/utils/useDnDHelpers.js +60 -106
  172. package/esm/utils/useDnDHelpers.js.map +7 -0
  173. package/esm/utils/useInstanceRefActions.js +21 -35
  174. package/esm/utils/useInstanceRefActions.js.map +7 -0
  175. package/esm/utils/useTree.js +35 -57
  176. package/esm/utils/useTree.js.map +7 -0
  177. package/package.json +10 -10
@@ -1,180 +1,135 @@
1
- import 'core-js/modules/esnext.async-iterator.for-each.js';
2
- import 'core-js/modules/esnext.iterator.constructor.js';
3
- import 'core-js/modules/esnext.iterator.for-each.js';
4
- import 'core-js/modules/web.dom-collections.iterator.js';
5
- import 'core-js/modules/esnext.async-iterator.find.js';
6
- import 'core-js/modules/esnext.iterator.find.js';
7
- import 'core-js/modules/esnext.async-iterator.every.js';
8
- import 'core-js/modules/esnext.iterator.every.js';
9
- import { createRef } from 'react';
10
- import { standardizeSearchQueryString } from './string-helpers.js';
11
-
12
- const walkVisibles = function (node, callback) {
13
- let skipRoot = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
14
- let highlightOnlyQuery = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
15
- const {
16
- children,
17
- model
18
- } = node;
19
- const {
20
- name,
21
- isExpanded,
22
- childrenMatchesSearchQuery,
23
- matchesSearchQuery
24
- } = model;
25
- const shouldSkipBecauseIsRoot = skipRoot && name === '__root';
1
+ import * as React from "react";
2
+ import { createRef } from "react";
3
+ import { standardizeSearchQueryString } from "./string-helpers";
4
+ const walkVisibles = (node, callback, skipRoot = true, highlightOnlyQuery = false) => {
5
+ const { children, model } = node;
6
+ const { name, isExpanded, childrenMatchesSearchQuery, matchesSearchQuery } = model;
7
+ const shouldSkipBecauseIsRoot = skipRoot && name === "__root";
26
8
  const queryRestrictionsPassed = !!(highlightOnlyQuery || childrenMatchesSearchQuery || matchesSearchQuery);
27
- if (!shouldSkipBecauseIsRoot && queryRestrictionsPassed) callback(node);
9
+ if (!shouldSkipBecauseIsRoot && queryRestrictionsPassed)
10
+ callback(node);
28
11
  const shouldWalkChildren = !!(children.length > 0 && isExpanded && queryRestrictionsPassed);
29
-
30
12
  if (shouldWalkChildren) {
31
- children.forEach(childNode => {
13
+ children.forEach((childNode) => {
32
14
  walkVisibles(childNode, callback, skipRoot, highlightOnlyQuery);
33
15
  });
34
16
  }
35
17
  };
36
- const walkParents = function (nodePath, callback) {
37
- let skipRoot = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
18
+ const walkParents = (nodePath, callback, skipRoot = true) => {
38
19
  const parents = [...nodePath].reverse();
39
- parents.shift(); // remove current node from the parents array
40
-
41
- if (skipRoot) parents.pop(); // remove the root from the parents if skipping root
42
-
20
+ parents.shift();
21
+ if (skipRoot)
22
+ parents.pop();
43
23
  parents.forEach(callback);
44
24
  };
45
- const walkAllNodeChildren = function (node, callback) {
46
- let isFirst = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
47
- const {
48
- children = []
49
- } = node;
25
+ const walkAllNodeChildren = (node, callback, isFirst = true) => {
26
+ const { children = [] } = node;
50
27
  const shouldWalkChildren = children.length;
51
- if (!isFirst) callback(node);
52
-
28
+ if (!isFirst)
29
+ callback(node);
53
30
  if (shouldWalkChildren) {
54
- children.forEach(childNode => {
31
+ children.forEach((childNode) => {
55
32
  walkAllNodeChildren(childNode, callback, false);
56
33
  });
57
34
  }
58
35
  };
59
36
  const getNodeById = (treeRoot, id) => {
60
- const nodes = treeRoot.all(node => node.model.id === id);
37
+ const nodes = treeRoot.all((node) => node.model.id === id);
61
38
  return nodes[0];
62
39
  };
63
40
  const cloneNode = (tree, node) => tree.parse(node.model);
64
- const itemsShareSameParent = function () {
65
- let items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
66
- if (items.length === 0) throw new Error('Received empty items for comparison');
67
- if (items.length === 1) return true; // when moving in first position we receive [undefined,...{items}]
68
- // when moving in last position we receive [...{items}, undefined]
69
-
70
- const firstExistingItem = items.find(item => !!item);
71
- if (!firstExistingItem) throw new Error("Received no items, can't retrieve parent");
72
- const firstExistingItemPath = firstExistingItem.node.getPath(); // path is like [rootParent, ...[parentsNodes], currentNode]
73
- // length -1 is the current-node
74
- // length -2 is the parent-node
75
- // root node is not printed and is always present so minimum path length is 2 (root + currentNode)
76
-
41
+ const itemsShareSameParent = (items = []) => {
42
+ if (items.length === 0)
43
+ throw new Error("Received empty items for comparison");
44
+ if (items.length === 1)
45
+ return true;
46
+ const firstExistingItem = items.find((item) => !!item);
47
+ if (!firstExistingItem)
48
+ throw new Error("Received no items, can't retrieve parent");
49
+ const firstExistingItemPath = firstExistingItem.node.getPath();
77
50
  const directParentNode = firstExistingItemPath[firstExistingItemPath.length - 2];
78
- return items.every(item => {
79
- // undefined nodes count as having the same parent
80
- if (!item) return true;
51
+ return items.every((item) => {
52
+ if (!item)
53
+ return true;
81
54
  const itemPath = item.node.getPath();
82
55
  const itemDirectParent = itemPath[itemPath.length - 2];
83
56
  return directParentNode === itemDirectParent;
84
57
  });
85
58
  };
86
- const getItemsParentNode = function () {
87
- let items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
88
- let skipSameParentCheck = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
89
- if (items.length === 0) throw new Error("Received empty items, can't retrieve parent"); // in case we already know the items compared shares the same parent
90
-
91
- if (!skipSameParentCheck) if (!itemsShareSameParent(items)) // if we don't know (default, we don't) check if they share the parent
92
- throw new Error("Received items don't share the same parent, can't retrieve parent"); // when moving in first position we receive [undefined,...{items}]
93
- // when moving in last position we receive [...{items}, undefined]
94
-
95
- const firstExistingItem = items.find(item => !!item);
96
- if (!firstExistingItem) throw new Error("Received no items, can't retrieve parent");
97
- const firstExistingItemPath = firstExistingItem.node.getPath(); // path is like [rootParent, ...[parentsNodes], currentNode]
98
- // length -1 is the current-node
99
- // length -2 is the parent-node
100
- // root node is not printed and is always present so minimum path length is 2 (root + currentNode)
101
-
59
+ const getItemsParentNode = (items = [], skipSameParentCheck = false) => {
60
+ if (items.length === 0)
61
+ throw new Error("Received empty items, can't retrieve parent");
62
+ if (!skipSameParentCheck) {
63
+ if (!itemsShareSameParent(items))
64
+ throw new Error("Received items don't share the same parent, can't retrieve parent");
65
+ }
66
+ const firstExistingItem = items.find((item) => !!item);
67
+ if (!firstExistingItem)
68
+ throw new Error("Received no items, can't retrieve parent");
69
+ const firstExistingItemPath = firstExistingItem.node.getPath();
102
70
  const directParentNode = firstExistingItemPath[firstExistingItemPath.length - 2];
103
71
  return directParentNode;
104
72
  };
105
- const getNodeMatchesSearchQuery = function (node) {
106
- let searchQuery = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
73
+ const getNodeMatchesSearchQuery = (node, searchQuery = "") => {
107
74
  const standardizedName = standardizeSearchQueryString(node.model.name);
108
75
  const standardizedSearchQuery = standardizeSearchQueryString(searchQuery);
109
76
  return standardizedName.includes(standardizedSearchQuery);
110
77
  };
111
- const getChildrenMatchesSearchQuery = function (parentNode) {
112
- let searchQuery = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
78
+ const getChildrenMatchesSearchQuery = (parentNode, searchQuery = "") => {
113
79
  let anyChildMatch = false;
114
- walkAllNodeChildren(parentNode, node => {
115
- if (getNodeMatchesSearchQuery(node, searchQuery)) anyChildMatch = true;
80
+ walkAllNodeChildren(parentNode, (node) => {
81
+ if (getNodeMatchesSearchQuery(node, searchQuery))
82
+ anyChildMatch = true;
116
83
  });
117
84
  return anyChildMatch;
118
85
  };
119
- /**
120
- * Mutate in place a node from tree-model normalizing object properties like "isGroup" even if user didn't specify it explicitly,
121
- * after execution the node will have "nodePath" "treeDepth" "nodeItemRef" "isGroup" "isExpanded"
122
- * (optionally, based on the provided arguments) "matchesSearchQuery" "childrenMatchesSearchQuery" "isChecked"
123
- *
124
- * @param {Object} node - node (based on 'tree-model' lib) that you wish to mutate with extra props
125
- * @param {string} [searchQuery=''] - optional string used to parse "matchesSearchQuery"/"childrenMatchesSearchQuery" properties
126
- * @param {Object} [selection=null] - optional selection hashmap used to parse "isChecked" properties
127
- * @param {Object} [expanded=null] - optional expanded hashmap used to parse "isExpanded" properties
128
- */
129
-
130
- const enrichNodeModelInPlace = function (node) {
131
- var _node$model, _node$model$children;
132
-
133
- let searchQuery = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
134
- let selection = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
135
- let expanded = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
86
+ const enrichNodeModelInPlace = (node, searchQuery = "", selection = null, expanded = null) => {
136
87
  const path = node.getPath();
137
88
  const depth = path.length - 1;
138
89
  node.model.nodePath = path;
139
90
  node.model.treeDepth = depth;
140
-
141
91
  if (!node.model.nodeItemRef) {
142
- node.model.nodeItemRef = /*#__PURE__*/createRef();
143
- } // if a node has children but was not marked as isGroup, force-mark as group
144
- // this is useful to avoid having to always check both the flag and the children.length...
145
-
146
-
147
- if (typeof node.model.isGroup !== 'boolean' && ((_node$model = node.model) === null || _node$model === void 0 ? void 0 : (_node$model$children = _node$model.children) === null || _node$model$children === void 0 ? void 0 : _node$model$children.length) > 0) {
92
+ node.model.nodeItemRef = createRef();
93
+ }
94
+ if (typeof node.model.isGroup !== "boolean" && node.model?.children?.length > 0) {
148
95
  node.model.isGroup = true;
149
96
  }
150
-
151
- if (node.model.isGroup && node.model.id !== '__ds_tree_root') {
152
- if (expanded) node.model.isExpanded = !!expanded[node.model.id];else if (typeof node.model.isExpanded !== 'boolean') {
97
+ if (node.model.isGroup && node.model.id !== "__ds_tree_root") {
98
+ if (expanded)
99
+ node.model.isExpanded = !!expanded[node.model.id];
100
+ else if (typeof node.model.isExpanded !== "boolean") {
153
101
  node.model.isExpanded = false;
154
102
  }
155
103
  }
156
-
157
104
  node.model.matchesSearchQuery = true;
158
105
  node.model.childrenMatchesSearchQuery = false;
159
106
  const partiallyEnrichedNode = node;
160
-
161
107
  if (searchQuery) {
162
108
  partiallyEnrichedNode.model.matchesSearchQuery = getNodeMatchesSearchQuery(partiallyEnrichedNode, searchQuery);
163
-
164
109
  if (partiallyEnrichedNode.model.isGroup === true) {
165
110
  partiallyEnrichedNode.model.childrenMatchesSearchQuery = getChildrenMatchesSearchQuery(partiallyEnrichedNode, searchQuery);
166
- if (partiallyEnrichedNode.model.childrenMatchesSearchQuery) partiallyEnrichedNode.model.isExpanded = true;
111
+ if (partiallyEnrichedNode.model.childrenMatchesSearchQuery)
112
+ partiallyEnrichedNode.model.isExpanded = true;
167
113
  }
168
114
  }
169
-
170
115
  if (selection && selection[partiallyEnrichedNode.model.id]) {
171
116
  partiallyEnrichedNode.model.isChecked = selection[partiallyEnrichedNode.model.id];
172
117
  }
173
118
  };
174
- const focusItem = item => {
175
- var _item$nodeItemRef, _item$nodeItemRef$cur;
176
-
177
- item === null || item === void 0 ? void 0 : (_item$nodeItemRef = item.nodeItemRef) === null || _item$nodeItemRef === void 0 ? void 0 : (_item$nodeItemRef$cur = _item$nodeItemRef.current) === null || _item$nodeItemRef$cur === void 0 ? void 0 : _item$nodeItemRef$cur.focus();
119
+ const focusItem = (item) => {
120
+ item?.nodeItemRef?.current?.focus();
121
+ };
122
+ export {
123
+ cloneNode,
124
+ enrichNodeModelInPlace,
125
+ focusItem,
126
+ getChildrenMatchesSearchQuery,
127
+ getItemsParentNode,
128
+ getNodeById,
129
+ getNodeMatchesSearchQuery,
130
+ itemsShareSameParent,
131
+ walkAllNodeChildren,
132
+ walkParents,
133
+ walkVisibles
178
134
  };
179
-
180
- export { cloneNode, enrichNodeModelInPlace, focusItem, getChildrenMatchesSearchQuery, getItemsParentNode, getNodeById, getNodeMatchesSearchQuery, itemsShareSameParent, walkAllNodeChildren, walkParents, walkVisibles };
135
+ //# sourceMappingURL=tree-helpers.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/tree-helpers.tsx"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable max-params */\n/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport { createRef } from 'react';\nimport type TreeModel from 'tree-model';\nimport { standardizeSearchQueryString } from './string-helpers';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\n\nexport const walkVisibles = (\n node: DSTreeviewT.Item['node'],\n callback: (node: DSTreeviewT.Item['node']) => void,\n skipRoot = true,\n highlightOnlyQuery = false,\n) => {\n const { children, model } = node;\n const { name, isExpanded, childrenMatchesSearchQuery, matchesSearchQuery } = model;\n\n const shouldSkipBecauseIsRoot = skipRoot && name === '__root';\n const queryRestrictionsPassed = !!(highlightOnlyQuery || childrenMatchesSearchQuery || matchesSearchQuery);\n\n if (!shouldSkipBecauseIsRoot && queryRestrictionsPassed) callback(node);\n\n const shouldWalkChildren = !!(children.length > 0 && isExpanded && queryRestrictionsPassed);\n if (shouldWalkChildren) {\n children.forEach((childNode) => {\n walkVisibles(childNode, callback, skipRoot, highlightOnlyQuery);\n });\n }\n};\n\nexport const walkParents = (\n nodePath: DSTreeviewT.Item['nodePath'],\n callback: (currParent: DSTreeviewT.Item['node']) => void,\n skipRoot = true,\n) => {\n const parents = [...nodePath].reverse();\n parents.shift(); // remove current node from the parents array\n if (skipRoot) parents.pop(); // remove the root from the parents if skipping root\n parents.forEach(callback);\n};\n\ntype RecursiveCallbackT = (childNode: DSTreeviewT.Item['node'], cb?: RecursiveCallbackT, isFirst?: boolean) => void;\nexport const walkAllNodeChildren = (node: DSTreeviewT.Item['node'], callback: RecursiveCallbackT, isFirst = true) => {\n const { children = [] } = node;\n const shouldWalkChildren = children.length;\n\n if (!isFirst) callback(node);\n\n if (shouldWalkChildren) {\n children.forEach((childNode) => {\n walkAllNodeChildren(childNode, callback, false);\n });\n }\n};\n\nexport const getNodeById = (treeRoot: DSTreeviewT.Item['node'], id: DSTreeviewT.StringOrNum) => {\n const nodes = treeRoot.all((node) => (node as unknown as DSTreeviewT.Item).model.id === id);\n return nodes[0];\n};\n\nexport const cloneNode = (tree: TreeModel, node: DSTreeviewT.Item) => tree.parse(node.model);\n\nexport const itemsShareSameParent = (items: DSTreeviewT.Item[] = []) => {\n if (items.length === 0) throw new Error('Received empty items for comparison');\n if (items.length === 1) return true;\n\n // when moving in first position we receive [undefined,...{items}]\n // when moving in last position we receive [...{items}, undefined]\n const firstExistingItem = items.find((item) => !!item);\n if (!firstExistingItem) throw new Error(\"Received no items, can't retrieve parent\");\n\n const firstExistingItemPath = firstExistingItem.node.getPath();\n // path is like [rootParent, ...[parentsNodes], currentNode]\n // length -1 is the current-node\n // length -2 is the parent-node\n // root node is not printed and is always present so minimum path length is 2 (root + currentNode)\n const directParentNode = firstExistingItemPath[firstExistingItemPath.length - 2];\n\n return items.every((item) => {\n // undefined nodes count as having the same parent\n if (!item) return true;\n const itemPath = item.node.getPath();\n const itemDirectParent = itemPath[itemPath.length - 2];\n return directParentNode === itemDirectParent;\n });\n};\n\nexport const getItemsParentNode = (items: DSTreeviewT.Item[] = [], skipSameParentCheck = false) => {\n if (items.length === 0) throw new Error(\"Received empty items, can't retrieve parent\");\n\n // in case we already know the items compared shares the same parent\n if (!skipSameParentCheck)\n if (!itemsShareSameParent(items))\n // if we don't know (default, we don't) check if they share the parent\n throw new Error(\"Received items don't share the same parent, can't retrieve parent\");\n\n // when moving in first position we receive [undefined,...{items}]\n // when moving in last position we receive [...{items}, undefined]\n const firstExistingItem = items.find((item) => !!item);\n if (!firstExistingItem) throw new Error(\"Received no items, can't retrieve parent\");\n\n const firstExistingItemPath = firstExistingItem.node.getPath();\n // path is like [rootParent, ...[parentsNodes], currentNode]\n // length -1 is the current-node\n // length -2 is the parent-node\n // root node is not printed and is always present so minimum path length is 2 (root + currentNode)\n const directParentNode = firstExistingItemPath[firstExistingItemPath.length - 2];\n return directParentNode as unknown as DSTreeviewT.Item['node'];\n};\n\nexport const getNodeMatchesSearchQuery = (node: DSTreeviewT.Item['node'], searchQuery = '') => {\n const standardizedName = standardizeSearchQueryString(node.model.name);\n const standardizedSearchQuery = standardizeSearchQueryString(searchQuery);\n return standardizedName.includes(standardizedSearchQuery);\n};\n\nexport const getChildrenMatchesSearchQuery = (parentNode: DSTreeviewT.Item['node'], searchQuery = '') => {\n let anyChildMatch = false;\n walkAllNodeChildren(parentNode, (node) => {\n if (getNodeMatchesSearchQuery(node, searchQuery)) anyChildMatch = true;\n });\n return anyChildMatch;\n};\n\n/**\n * Mutate in place a node from tree-model normalizing object properties like \"isGroup\" even if user didn't specify it explicitly,\n * after execution the node will have \"nodePath\" \"treeDepth\" \"nodeItemRef\" \"isGroup\" \"isExpanded\"\n * (optionally, based on the provided arguments) \"matchesSearchQuery\" \"childrenMatchesSearchQuery\" \"isChecked\"\n *\n * @param {Object} node - node (based on 'tree-model' lib) that you wish to mutate with extra props\n * @param {string} [searchQuery=''] - optional string used to parse \"matchesSearchQuery\"/\"childrenMatchesSearchQuery\" properties\n * @param {Object} [selection=null] - optional selection hashmap used to parse \"isChecked\" properties\n * @param {Object} [expanded=null] - optional expanded hashmap used to parse \"isExpanded\" properties\n */\nexport const enrichNodeModelInPlace = (\n node: TreeModel.Node<DSTreeviewT.SimpleItem>,\n searchQuery = '',\n selection: DSTreeviewT.SelectionItems | null = null,\n expanded: DSTreeviewT.ExpandedItems | null = null,\n) => {\n const path = node.getPath();\n const depth = path.length - 1;\n node.model.nodePath = path;\n node.model.treeDepth = depth;\n\n if (!node.model.nodeItemRef) {\n node.model.nodeItemRef = createRef();\n }\n\n // if a node has children but was not marked as isGroup, force-mark as group\n // this is useful to avoid having to always check both the flag and the children.length...\n if (typeof node.model.isGroup !== 'boolean' && node.model?.children?.length > 0) {\n node.model.isGroup = true;\n }\n\n if (node.model.isGroup && node.model.id !== '__ds_tree_root') {\n if (expanded) node.model.isExpanded = !!expanded[node.model.id];\n else if (typeof node.model.isExpanded !== 'boolean') {\n node.model.isExpanded = false;\n }\n }\n\n node.model.matchesSearchQuery = true;\n node.model.childrenMatchesSearchQuery = false;\n const partiallyEnrichedNode = node as unknown as TreeModel.Node<DSTreeviewT.Item>;\n if (searchQuery) {\n partiallyEnrichedNode.model.matchesSearchQuery = getNodeMatchesSearchQuery(partiallyEnrichedNode, searchQuery);\n\n if (partiallyEnrichedNode.model.isGroup === true) {\n partiallyEnrichedNode.model.childrenMatchesSearchQuery = getChildrenMatchesSearchQuery(\n partiallyEnrichedNode,\n searchQuery,\n );\n if (partiallyEnrichedNode.model.childrenMatchesSearchQuery) partiallyEnrichedNode.model.isExpanded = true;\n }\n }\n if (selection && selection[partiallyEnrichedNode.model.id]) {\n partiallyEnrichedNode.model.isChecked = selection[partiallyEnrichedNode.model.id];\n }\n};\n\nexport const focusItem = (item: DSTreeviewT.Item | null) => {\n item?.nodeItemRef?.current?.focus();\n};\n"],
5
+ "mappings": "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",
6
+ "names": []
7
+ }
@@ -1,22 +1,13 @@
1
- import 'core-js/modules/esnext.async-iterator.constructor.js';
2
- import 'core-js/modules/esnext.async-iterator.drop.js';
3
- import 'core-js/modules/esnext.iterator.constructor.js';
4
- import 'core-js/modules/esnext.iterator.drop.js';
5
- import 'core-js/modules/web.dom-collections.iterator.js';
6
- import { useContext, useCallback } from 'react';
7
- import { cloneDeep } from 'lodash';
8
- import TreeViewContext, { defaultRelativeMouseCoord } from '../TreeViewContext.js';
9
- import { getNodeById, focusItem } from './tree-helpers.js';
10
- import { inferKeyboardKinshipDrop, inferHoverItemKinshipDrop, isDropValid } from './dnd-helpers.js';
11
-
1
+ import * as React from "react";
2
+ import { useContext, useCallback } from "react";
3
+ import { cloneDeep } from "lodash";
4
+ import TreeViewContext, { defaultRelativeMouseCoord } from "../TreeViewContext";
5
+ import { getNodeById, focusItem } from "./tree-helpers";
6
+ import { inferHoverItemKinshipDrop, inferKeyboardKinshipDrop, isDropValid } from "./dnd-helpers";
12
7
  const useDnDHelpers = () => {
13
8
  const ctx = useContext(TreeViewContext);
14
9
  const {
15
- props: {
16
- data,
17
- onOrderChange,
18
- restrictDragAndDrop
19
- },
10
+ props: { data, onOrderChange, restrictDragAndDrop },
20
11
  relativeMouseCord,
21
12
  setRelativeMouseCord,
22
13
  visibleItems,
@@ -31,36 +22,19 @@ const useDnDHelpers = () => {
31
22
  treeRoot,
32
23
  draggedItem
33
24
  } = ctx;
34
- const onSortEnd = useCallback(_ref => {
35
- let {
36
- oldIndex,
37
- newIndex,
38
- isKeySorting
39
- } = _ref;
40
- const {
41
- isBefore,
42
- isAfter,
43
- item: overItem,
44
- isValid
45
- } = relativeMouseCord;
46
-
25
+ const onSortEnd = useCallback(({ oldIndex, newIndex, isKeySorting }) => {
26
+ const { isBefore, isAfter, item: overItem, isValid } = relativeMouseCord;
47
27
  if (draggedItem && tree && treeRoot && overItem) {
48
- let newItems = cloneDeep(data); // if dropping in same position do nothing
49
- // if the drop is not allowed do nothing
50
-
28
+ let newItems = cloneDeep(data);
51
29
  if (oldIndex === newIndex || !isValid) {
52
- // onOrderChange(newItems, data);
53
30
  setIsDragging(false);
54
31
  setDraggedItem(null);
55
32
  triggerTreeRerender();
56
33
  return;
57
- } // if we are moving from topToBottom the offset changes
58
-
59
-
60
- const movementDirection = newIndex > oldIndex ? 'topToBottom' : 'bottomToTop';
34
+ }
35
+ const movementDirection = newIndex > oldIndex ? "topToBottom" : "bottomToTop";
61
36
  let newNestedIndex;
62
37
  let newParentNode;
63
-
64
38
  if (isKeySorting) {
65
39
  const kinship = inferKeyboardKinshipDrop({
66
40
  items: visibleItems,
@@ -79,94 +53,76 @@ const useDnDHelpers = () => {
79
53
  newNestedIndex = kinship.newNestedIndex;
80
54
  newParentNode = kinship.newParentNode;
81
55
  }
82
-
83
56
  const newMovedItemNode = tree.parse(draggedItem.node.model);
84
57
  getNodeById(treeRoot, draggedItem.id).drop();
85
-
86
- if (newParentNode && typeof newNestedIndex === 'number') {
58
+ if (newParentNode && typeof newNestedIndex === "number") {
87
59
  newParentNode.addChildAtIndex(newMovedItemNode, newNestedIndex);
88
-
89
60
  if (newParentNode.isRoot()) {
90
61
  newItems = [...newParentNode.model.children];
91
62
  } else {
92
63
  newItems = [...treeRoot.model.children];
93
64
  }
94
65
  }
95
-
96
66
  onOrderChange(newItems, data, draggedItem);
97
67
  setIsDragging(false);
98
68
  setDraggedItem(null);
99
69
  triggerTreeRerender();
100
70
  }
101
- }, [data, draggedItem, relativeMouseCord, visibleItems, tree, treeRoot, onOrderChange, triggerTreeRerender, setIsDragging, setDraggedItem]);
102
- const onSortStart = useCallback(() => {}, // ({ node, index, collection, isKeySorting }, event) => {
103
- // console.log('node :>> ', node);
104
- // console.log('isKeySorting :>> ', isKeySorting);
105
- // console.log('event :>> ', event);
106
- // const item = collection?.[index] || visibleItems[index];
107
- // setIsDragging(true);
108
- // setDraggedItem(item);
109
- // },
110
- []);
111
- const updateBeforeSortStart = useCallback(beforeStartArgs => new Promise(resolve => {
112
- const {
113
- index,
114
- isKeySorting
115
- } = beforeStartArgs;
71
+ }, [
72
+ data,
73
+ draggedItem,
74
+ relativeMouseCord,
75
+ visibleItems,
76
+ tree,
77
+ treeRoot,
78
+ onOrderChange,
79
+ triggerTreeRerender,
80
+ setIsDragging,
81
+ setDraggedItem
82
+ ]);
83
+ const onSortStart = useCallback(() => {
84
+ }, []);
85
+ const updateBeforeSortStart = useCallback((beforeStartArgs) => new Promise((resolve) => {
86
+ const { index, isKeySorting } = beforeStartArgs;
116
87
  const item = visibleItems[index];
117
- const {
118
- isExpanded
119
- } = item.node.model;
120
-
88
+ const { isExpanded } = item.node.model;
121
89
  if (isExpanded) {
122
90
  item.node.model.isExpanded = false;
123
91
  triggerTreeRerender();
124
92
  }
125
-
126
93
  setRelativeMouseCord(defaultRelativeMouseCoord);
127
94
  setIsKeyboardDragging(isKeySorting);
128
95
  setIsDragging(true);
129
96
  setDraggedItem(item);
130
97
  focusItem(null);
131
98
  setFocusedItem(null);
132
- if (document.activeElement && typeof document.activeElement.blur === 'function') document.activeElement.blur();
99
+ if (document.activeElement && typeof document.activeElement.blur === "function")
100
+ document.activeElement.blur();
133
101
  resolve(true);
134
- }), [visibleItems, setRelativeMouseCord, setIsKeyboardDragging, setIsDragging, setDraggedItem, setFocusedItem, triggerTreeRerender]); // tracks mouse coords relative to an element to check if the drop happens
135
- // at the top/center/bottom of an element to choose where to move the element
136
- // requested in the specs
137
-
138
- const onMouseDragOverItem = useCallback(_ref2 => {
139
- let {
140
- event,
141
- item,
142
- itemIndex,
143
- setIsDraggingOverThis,
144
- openFolderOnHoverTimeout
145
- } = _ref2;
146
- const {
147
- node
148
- } = item;
149
- const {
150
- nodeItemRef
151
- } = node.model;
152
-
102
+ }), [
103
+ visibleItems,
104
+ setRelativeMouseCord,
105
+ setIsKeyboardDragging,
106
+ setIsDragging,
107
+ setDraggedItem,
108
+ setFocusedItem,
109
+ triggerTreeRerender
110
+ ]);
111
+ const onMouseDragOverItem = useCallback(({
112
+ event,
113
+ item,
114
+ itemIndex,
115
+ setIsDraggingOverThis,
116
+ openFolderOnHoverTimeout
117
+ }) => {
118
+ const { node } = item;
119
+ const { nodeItemRef } = node.model;
153
120
  if (isDragging && !isKeyboardDragging && draggedItem) {
154
- var _nodeItemRef$current;
155
-
156
- const rect = nodeItemRef === null || nodeItemRef === void 0 ? void 0 : (_nodeItemRef$current = nodeItemRef.current) === null || _nodeItemRef$current === void 0 ? void 0 : _nodeItemRef$current.getBoundingClientRect();
157
-
121
+ const rect = nodeItemRef?.current?.getBoundingClientRect();
158
122
  if (rect) {
159
- const x = event.clientX - rect.left; // x position within the element.
160
-
161
- const y = event.clientY - rect.top; // y position within the element.
162
- // by spec we need to track where the drop will happens
163
- // if drop happens on top 25% drop before
164
- // if drop happens on bottom of 25% drop after
165
- // if drop happens in the middle 50% either invalid or drop into children
166
-
167
- const {
168
- height: elementHeight
169
- } = rect;
123
+ const x = event.clientX - rect.left;
124
+ const y = event.clientY - rect.top;
125
+ const { height: elementHeight } = rect;
170
126
  const dropBeforeMaxY = elementHeight * 0.25;
171
127
  const dropAfterMinY = elementHeight - elementHeight * 0.25;
172
128
  const isBefore = y < dropBeforeMaxY;
@@ -189,16 +145,12 @@ const useDnDHelpers = () => {
189
145
  relativeElementIndex: itemIndex
190
146
  });
191
147
  setIsDraggingOverThis(true);
192
-
193
- if (!(openFolderOnHoverTimeout !== null && openFolderOnHoverTimeout !== void 0 && openFolderOnHoverTimeout.current) && // only set the interval if it wasn't set already once
194
- (draggedItem === null || draggedItem === void 0 ? void 0 : draggedItem.id) !== (item === null || item === void 0 ? void 0 : item.id) && ( // don't open ghost element
195
- item.isGroup || item.children.length > 0) && // only open groups
196
- !restrictDragAndDrop) {
148
+ if (!openFolderOnHoverTimeout?.current && draggedItem?.id !== item?.id && (item.isGroup || item.children.length > 0) && !restrictDragAndDrop) {
197
149
  openFolderOnHoverTimeout.current = setTimeout(() => {
198
150
  item.node.model.isExpanded = true;
199
151
  openFolderOnHoverTimeout.current = null;
200
152
  triggerTreeRerender();
201
- }, 1000);
153
+ }, 1e3);
202
154
  }
203
155
  }
204
156
  } else {
@@ -212,5 +164,7 @@ const useDnDHelpers = () => {
212
164
  onMouseDragOverItem
213
165
  };
214
166
  };
215
-
216
- export { useDnDHelpers };
167
+ export {
168
+ useDnDHelpers
169
+ };
170
+ //# sourceMappingURL=useDnDHelpers.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/useDnDHelpers.tsx"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-depth */\n/* eslint-disable no-lonely-if */\n/* eslint-disable max-lines */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport React, { useContext, useCallback } from 'react';\nimport { cloneDeep } from 'lodash';\n\nimport TreeViewContext, { defaultRelativeMouseCoord } from '../TreeViewContext';\nimport { getNodeById, focusItem } from './tree-helpers';\nimport { inferHoverItemKinshipDrop, inferKeyboardKinshipDrop, isDropValid } from './dnd-helpers';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\nimport type { DSTreeviewInternalsT } from '../sharedTypes';\n\nexport const useDnDHelpers = () => {\n const ctx = useContext(TreeViewContext);\n\n const {\n props: { data, onOrderChange, restrictDragAndDrop },\n relativeMouseCord,\n setRelativeMouseCord,\n visibleItems,\n isDragging,\n setIsDragging,\n isKeyboardDragging,\n setIsKeyboardDragging,\n setDraggedItem,\n setFocusedItem,\n triggerTreeRerender,\n tree,\n treeRoot,\n draggedItem,\n } = ctx;\n\n const onSortEnd = useCallback(\n ({ oldIndex, newIndex, isKeySorting }: { oldIndex: number; newIndex: number; isKeySorting: boolean }) => {\n const { isBefore, isAfter, item: overItem, isValid } = relativeMouseCord;\n if (draggedItem && tree && treeRoot && overItem) {\n let newItems = cloneDeep(data);\n // if dropping in same position do nothing\n // if the drop is not allowed do nothing\n if (oldIndex === newIndex || !isValid) {\n // onOrderChange(newItems, data);\n setIsDragging(false);\n setDraggedItem(null);\n triggerTreeRerender();\n return;\n }\n\n // if we are moving from topToBottom the offset changes\n const movementDirection = newIndex > oldIndex ? ('topToBottom' as const) : ('bottomToTop' as const);\n\n let newNestedIndex;\n let newParentNode;\n if (isKeySorting) {\n const kinship = inferKeyboardKinshipDrop({\n items: visibleItems,\n\n newIndex,\n });\n newNestedIndex = kinship.newNestedIndex;\n newParentNode = kinship.newParentNode;\n } else {\n const kinship = inferHoverItemKinshipDrop({\n isBefore,\n isAfter,\n overItem,\n movementDirection,\n draggedItem,\n });\n newNestedIndex = kinship.newNestedIndex;\n newParentNode = kinship.newParentNode;\n }\n\n const newMovedItemNode = tree.parse(draggedItem.node.model);\n getNodeById(treeRoot, draggedItem.id).drop();\n if (newParentNode && typeof newNestedIndex === 'number') {\n newParentNode.addChildAtIndex(newMovedItemNode, newNestedIndex);\n\n if (newParentNode.isRoot()) {\n newItems = [...newParentNode.model.children];\n } else {\n newItems = [...treeRoot.model.children];\n }\n }\n\n onOrderChange(newItems, data, draggedItem);\n setIsDragging(false);\n setDraggedItem(null);\n triggerTreeRerender();\n }\n },\n [\n data,\n draggedItem,\n relativeMouseCord,\n visibleItems,\n tree,\n treeRoot,\n onOrderChange,\n triggerTreeRerender,\n setIsDragging,\n setDraggedItem,\n ],\n );\n\n const onSortStart = useCallback(\n () => {},\n // ({ node, index, collection, isKeySorting }, event) => {\n // console.log('node :>> ', node);\n // console.log('isKeySorting :>> ', isKeySorting);\n // console.log('event :>> ', event);\n // const item = collection?.[index] || visibleItems[index];\n // setIsDragging(true);\n // setDraggedItem(item);\n // },\n [],\n );\n\n const updateBeforeSortStart = useCallback(\n (beforeStartArgs: { index: number; isKeySorting: boolean }) =>\n new Promise((resolve) => {\n const { index, isKeySorting } = beforeStartArgs;\n\n const item = visibleItems[index];\n const { isExpanded } = item.node.model;\n\n if (isExpanded) {\n item.node.model.isExpanded = false;\n triggerTreeRerender();\n }\n setRelativeMouseCord(defaultRelativeMouseCoord);\n setIsKeyboardDragging(isKeySorting);\n setIsDragging(true);\n setDraggedItem(item);\n focusItem(null);\n setFocusedItem(null);\n if (document.activeElement && typeof (document.activeElement as HTMLElement).blur === 'function')\n (document.activeElement as HTMLElement).blur();\n resolve(true);\n }),\n [\n visibleItems,\n setRelativeMouseCord,\n setIsKeyboardDragging,\n setIsDragging,\n setDraggedItem,\n setFocusedItem,\n triggerTreeRerender,\n ],\n );\n\n // tracks mouse coords relative to an element to check if the drop happens\n // at the top/center/bottom of an element to choose where to move the element\n // requested in the specs\n const onMouseDragOverItem = useCallback(\n ({\n event,\n item,\n itemIndex,\n setIsDraggingOverThis,\n openFolderOnHoverTimeout,\n }: {\n event: React.MouseEvent<HTMLLIElement>;\n item: DSTreeviewT.Item;\n itemIndex: number;\n setIsDraggingOverThis: DSTreeviewInternalsT.StateSetter<boolean>;\n openFolderOnHoverTimeout: React.MutableRefObject<NodeJS.Timeout | null>;\n }) => {\n const { node } = item;\n const { nodeItemRef } = node.model;\n if (isDragging && !isKeyboardDragging && draggedItem) {\n const rect = nodeItemRef?.current?.getBoundingClientRect();\n if (rect) {\n const x = event.clientX - rect.left; // x position within the element.\n const y = event.clientY - rect.top; // y position within the element.\n\n // by spec we need to track where the drop will happens\n // if drop happens on top 25% drop before\n // if drop happens on bottom of 25% drop after\n // if drop happens in the middle 50% either invalid or drop into children\n const { height: elementHeight } = rect;\n const dropBeforeMaxY = elementHeight * 0.25;\n const dropAfterMinY = elementHeight - elementHeight * 0.25;\n const isBefore = y < dropBeforeMaxY;\n const isAfter = y > dropAfterMinY;\n const isValid = isDropValid({\n isBefore,\n isAfter,\n draggedItem,\n overItem: item,\n restrictDragAndDrop,\n });\n setRelativeMouseCord({\n isBefore,\n isAfter,\n isValid,\n item,\n x,\n y,\n relativeElementDOMRect: rect,\n relativeElementIndex: itemIndex,\n });\n setIsDraggingOverThis(true);\n\n if (\n !openFolderOnHoverTimeout?.current && // only set the interval if it wasn't set already once\n draggedItem?.id !== item?.id && // don't open ghost element\n (item.isGroup || item.children.length > 0) && // only open groups\n !restrictDragAndDrop\n ) {\n openFolderOnHoverTimeout.current = setTimeout(() => {\n item.node.model.isExpanded = true;\n openFolderOnHoverTimeout.current = null;\n triggerTreeRerender();\n }, 1000);\n }\n }\n } else {\n setRelativeMouseCord(defaultRelativeMouseCoord);\n }\n },\n [isDragging, isKeyboardDragging, draggedItem, restrictDragAndDrop, setRelativeMouseCord, triggerTreeRerender],\n );\n\n return {\n updateBeforeSortStart,\n onSortStart,\n onSortEnd,\n onMouseDragOverItem,\n };\n};\n"],
5
+ "mappings": "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",
6
+ "names": []
7
+ }
@@ -1,16 +1,10 @@
1
- import 'core-js/modules/web.dom-collections.iterator.js';
2
- import { useRef, useMemo, useState, useEffect, useCallback } from 'react';
3
- import { focusItem } from './tree-helpers.js';
4
- import { toggleExpandAllHelper } from './group-expands-helpers.js';
5
-
6
- const useInstanceRefActions = (_ref, ctx) => {
7
- let {
8
- actions
9
- } = _ref;
1
+ import * as React from "react";
2
+ import { useEffect, useMemo, useState, useRef, useCallback } from "react";
3
+ import { focusItem } from "./tree-helpers";
4
+ import { toggleExpandAllHelper } from "./group-expands-helpers";
5
+ const useInstanceRefActions = ({ actions }, ctx) => {
10
6
  const {
11
- props: {
12
- onItemFocus
13
- },
7
+ props: { onItemFocus },
14
8
  virtualListHelpers,
15
9
  treeRoot,
16
10
  visibleItems,
@@ -20,12 +14,8 @@ const useInstanceRefActions = (_ref, ctx) => {
20
14
  setFocusedItem,
21
15
  setLatestToggledItem
22
16
  } = ctx;
23
- const {
24
- current: promises
25
- } = useRef({});
26
- const {
27
- scrollToIndex
28
- } = useMemo(() => virtualListHelpers, [virtualListHelpers]);
17
+ const { current: promises } = useRef({});
18
+ const { scrollToIndex } = useMemo(() => virtualListHelpers, [virtualListHelpers]);
29
19
  const [expandPromise, setPromise] = useState();
30
20
  useEffect(() => {
31
21
  if (expandPromise && promises.expandResolve) {
@@ -34,36 +24,30 @@ const useInstanceRefActions = (_ref, ctx) => {
34
24
  setPromise(null);
35
25
  }
36
26
  }, [visibleItems, expandPromise, promises]);
37
- actions.toggleExpandAll = useCallback(isExpand => {
38
- const p = new Promise(resolve => {
27
+ actions.toggleExpandAll = useCallback((isExpand) => {
28
+ const p = new Promise((resolve) => {
39
29
  promises.expandResolve = resolve;
40
- if (treeRoot) toggleExpandAllHelper(isExpand, treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState);
30
+ if (treeRoot)
31
+ toggleExpandAllHelper(isExpand, treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState);
41
32
  });
42
33
  setPromise(p);
43
34
  return p;
44
35
  }, [promises, treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState]);
45
- actions.scrollTo = useCallback(function (indx) {
46
- let opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
47
- align: 'start'
48
- };
49
- if (scrollToIndex) scrollToIndex(indx, opts);
36
+ actions.scrollTo = useCallback((indx, opts = { align: "start" }) => {
37
+ if (scrollToIndex)
38
+ scrollToIndex(indx, opts);
50
39
  }, [scrollToIndex]);
51
- actions.setSelectedItemByVirtualIndex = useCallback(index => {
40
+ actions.setSelectedItemByVirtualIndex = useCallback((index) => {
52
41
  const itemByIndex = visibleItems[index];
53
42
  setSelectedItem(itemByIndex);
54
43
  }, [visibleItems, setSelectedItem]);
55
- actions.setFocusedItemByVirtualIndex = useCallback(function (index) {
56
- let opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
57
- align: 'start',
58
- withScroll: false
59
- };
44
+ actions.setFocusedItemByVirtualIndex = useCallback((index, opts = { align: "start", withScroll: false }) => {
60
45
  const itemByIndex = visibleItems[index];
61
46
  const onItemFocusParams = {
62
47
  itemIndex: itemByIndex.virtualIndex,
63
48
  scrollToItem: () => scrollToIndex(index, opts),
64
49
  item: itemByIndex
65
50
  };
66
-
67
51
  if (opts.withScroll && scrollToIndex) {
68
52
  scrollToIndex(index, opts);
69
53
  setTimeout(() => {
@@ -79,5 +63,7 @@ const useInstanceRefActions = (_ref, ctx) => {
79
63
  }, [visibleItems, scrollToIndex, setFocusedItem, onItemFocus]);
80
64
  return actions;
81
65
  };
82
-
83
- export { useInstanceRefActions };
66
+ export {
67
+ useInstanceRefActions
68
+ };
69
+ //# sourceMappingURL=useInstanceRefActions.js.map