@mui/x-tree-view 7.0.0-beta.3 → 7.0.0-beta.5

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 (147) hide show
  1. package/CHANGELOG.md +357 -22
  2. package/RichTreeView/RichTreeView.js +8 -0
  3. package/RichTreeView/RichTreeView.types.d.ts +7 -1
  4. package/SimpleTreeView/SimpleTreeView.js +8 -0
  5. package/SimpleTreeView/SimpleTreeView.types.d.ts +7 -1
  6. package/TreeItem/TreeItem.js +1 -1
  7. package/TreeItem/TreeItem.types.d.ts +1 -1
  8. package/TreeView/TreeView.js +8 -0
  9. package/hooks/index.d.ts +1 -0
  10. package/hooks/index.js +1 -0
  11. package/hooks/package.json +6 -0
  12. package/hooks/useTreeViewApiRef.d.ts +6 -0
  13. package/hooks/useTreeViewApiRef.js +5 -0
  14. package/index.d.ts +1 -0
  15. package/index.js +3 -2
  16. package/internals/TreeViewProvider/DescendantProvider.js +1 -11
  17. package/internals/hooks/useTimeout.d.ts +5 -3
  18. package/internals/hooks/useTimeout.js +13 -5
  19. package/internals/models/helpers.d.ts +1 -0
  20. package/internals/models/plugin.d.ts +12 -0
  21. package/internals/models/treeView.d.ts +1 -0
  22. package/internals/plugins/useTreeViewFocus/useTreeViewFocus.js +40 -22
  23. package/internals/plugins/useTreeViewFocus/useTreeViewFocus.types.d.ts +5 -0
  24. package/internals/useTreeView/useTreeView.d.ts +2 -0
  25. package/internals/useTreeView/useTreeView.js +12 -0
  26. package/internals/useTreeView/useTreeView.types.d.ts +2 -1
  27. package/internals/useTreeView/useTreeView.utils.d.ts +2 -1
  28. package/internals/useTreeView/useTreeView.utils.js +3 -0
  29. package/internals/utils/extractPluginParamsFromProps.d.ts +3 -2
  30. package/internals/utils/extractPluginParamsFromProps.js +5 -3
  31. package/internals/utils/utils.d.ts +1 -0
  32. package/internals/utils/utils.js +10 -0
  33. package/modern/RichTreeView/RichTreeView.js +8 -0
  34. package/modern/SimpleTreeView/SimpleTreeView.js +8 -0
  35. package/modern/TreeItem/TreeItem.js +1 -1
  36. package/modern/TreeView/TreeView.js +8 -0
  37. package/modern/hooks/index.js +1 -0
  38. package/modern/hooks/useTreeViewApiRef.js +5 -0
  39. package/modern/index.js +3 -2
  40. package/modern/internals/TreeViewProvider/DescendantProvider.js +1 -11
  41. package/modern/internals/hooks/useTimeout.js +13 -5
  42. package/modern/internals/plugins/useTreeViewFocus/useTreeViewFocus.js +40 -22
  43. package/modern/internals/useTreeView/useTreeView.js +12 -0
  44. package/modern/internals/useTreeView/useTreeView.utils.js +3 -0
  45. package/modern/internals/utils/extractPluginParamsFromProps.js +5 -3
  46. package/modern/internals/utils/utils.js +10 -0
  47. package/node/RichTreeView/RichTreeView.js +8 -0
  48. package/node/SimpleTreeView/SimpleTreeView.js +8 -0
  49. package/node/TreeItem/TreeItem.js +1 -1
  50. package/node/TreeView/TreeView.js +8 -0
  51. package/node/hooks/index.js +12 -0
  52. package/node/hooks/useTreeViewApiRef.js +14 -0
  53. package/node/index.js +13 -1
  54. package/node/internals/TreeViewProvider/DescendantProvider.js +1 -10
  55. package/node/internals/hooks/useTimeout.js +13 -4
  56. package/node/internals/plugins/useTreeViewFocus/useTreeViewFocus.js +39 -21
  57. package/node/internals/useTreeView/useTreeView.js +13 -0
  58. package/node/internals/useTreeView/useTreeView.utils.js +6 -2
  59. package/node/internals/utils/extractPluginParamsFromProps.js +5 -3
  60. package/node/internals/utils/utils.js +17 -0
  61. package/package.json +1 -1
  62. package/legacy/RichTreeView/RichTreeView.js +0 -255
  63. package/legacy/RichTreeView/RichTreeView.types.js +0 -1
  64. package/legacy/RichTreeView/index.js +0 -3
  65. package/legacy/RichTreeView/richTreeViewClasses.js +0 -6
  66. package/legacy/SimpleTreeView/SimpleTreeView.js +0 -190
  67. package/legacy/SimpleTreeView/SimpleTreeView.plugins.js +0 -6
  68. package/legacy/SimpleTreeView/SimpleTreeView.types.js +0 -1
  69. package/legacy/SimpleTreeView/index.js +0 -3
  70. package/legacy/SimpleTreeView/simpleTreeViewClasses.js +0 -6
  71. package/legacy/TreeItem/TreeItem.js +0 -360
  72. package/legacy/TreeItem/TreeItem.types.js +0 -1
  73. package/legacy/TreeItem/TreeItemContent.js +0 -95
  74. package/legacy/TreeItem/index.js +0 -4
  75. package/legacy/TreeItem/treeItemClasses.js +0 -6
  76. package/legacy/TreeItem/useTreeItemState.js +0 -58
  77. package/legacy/TreeView/TreeView.js +0 -165
  78. package/legacy/TreeView/TreeView.types.js +0 -1
  79. package/legacy/TreeView/index.js +0 -3
  80. package/legacy/TreeView/treeViewClasses.js +0 -6
  81. package/legacy/icons/icons.js +0 -9
  82. package/legacy/icons/index.js +0 -1
  83. package/legacy/index.js +0 -14
  84. package/legacy/internals/TreeViewProvider/DescendantProvider.js +0 -199
  85. package/legacy/internals/TreeViewProvider/TreeViewContext.js +0 -8
  86. package/legacy/internals/TreeViewProvider/TreeViewProvider.js +0 -19
  87. package/legacy/internals/TreeViewProvider/TreeViewProvider.types.js +0 -1
  88. package/legacy/internals/TreeViewProvider/index.js +0 -1
  89. package/legacy/internals/TreeViewProvider/useTreeViewContext.js +0 -9
  90. package/legacy/internals/corePlugins/corePlugins.js +0 -6
  91. package/legacy/internals/corePlugins/index.js +0 -1
  92. package/legacy/internals/corePlugins/useTreeViewInstanceEvents/index.js +0 -1
  93. package/legacy/internals/corePlugins/useTreeViewInstanceEvents/useTreeViewInstanceEvents.js +0 -40
  94. package/legacy/internals/corePlugins/useTreeViewInstanceEvents/useTreeViewInstanceEvents.types.js +0 -1
  95. package/legacy/internals/hooks/useInstanceEventHandler.js +0 -87
  96. package/legacy/internals/hooks/useLazyRef.js +0 -11
  97. package/legacy/internals/hooks/useOnMount.js +0 -7
  98. package/legacy/internals/hooks/useTimeout.js +0 -38
  99. package/legacy/internals/index.js +0 -4
  100. package/legacy/internals/models/MuiCancellableEvent.js +0 -1
  101. package/legacy/internals/models/events.js +0 -1
  102. package/legacy/internals/models/helpers.js +0 -1
  103. package/legacy/internals/models/index.js +0 -3
  104. package/legacy/internals/models/plugin.js +0 -1
  105. package/legacy/internals/models/treeView.js +0 -1
  106. package/legacy/internals/plugins/defaultPlugins.js +0 -10
  107. package/legacy/internals/plugins/index.js +0 -1
  108. package/legacy/internals/plugins/useTreeViewExpansion/index.js +0 -1
  109. package/legacy/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js +0 -81
  110. package/legacy/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.types.js +0 -1
  111. package/legacy/internals/plugins/useTreeViewFocus/index.js +0 -1
  112. package/legacy/internals/plugins/useTreeViewFocus/useTreeViewFocus.js +0 -103
  113. package/legacy/internals/plugins/useTreeViewFocus/useTreeViewFocus.types.js +0 -1
  114. package/legacy/internals/plugins/useTreeViewIcons/index.js +0 -1
  115. package/legacy/internals/plugins/useTreeViewIcons/useTreeViewIcons.js +0 -21
  116. package/legacy/internals/plugins/useTreeViewIcons/useTreeViewIcons.types.js +0 -1
  117. package/legacy/internals/plugins/useTreeViewId/index.js +0 -1
  118. package/legacy/internals/plugins/useTreeViewId/useTreeViewId.js +0 -24
  119. package/legacy/internals/plugins/useTreeViewId/useTreeViewId.types.js +0 -1
  120. package/legacy/internals/plugins/useTreeViewJSXNodes/index.js +0 -1
  121. package/legacy/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.js +0 -130
  122. package/legacy/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.types.js +0 -1
  123. package/legacy/internals/plugins/useTreeViewKeyboardNavigation/index.js +0 -1
  124. package/legacy/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js +0 -284
  125. package/legacy/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.types.js +0 -1
  126. package/legacy/internals/plugins/useTreeViewNodes/index.js +0 -1
  127. package/legacy/internals/plugins/useTreeViewNodes/useTreeViewNodes.js +0 -161
  128. package/legacy/internals/plugins/useTreeViewNodes/useTreeViewNodes.types.js +0 -1
  129. package/legacy/internals/plugins/useTreeViewSelection/index.js +0 -1
  130. package/legacy/internals/plugins/useTreeViewSelection/useTreeViewSelection.js +0 -219
  131. package/legacy/internals/plugins/useTreeViewSelection/useTreeViewSelection.types.js +0 -1
  132. package/legacy/internals/plugins/useTreeViewSelection/useTreeViewSelection.utils.js +0 -55
  133. package/legacy/internals/useTreeView/index.js +0 -1
  134. package/legacy/internals/useTreeView/useTreeView.js +0 -111
  135. package/legacy/internals/useTreeView/useTreeView.types.js +0 -1
  136. package/legacy/internals/useTreeView/useTreeView.utils.js +0 -46
  137. package/legacy/internals/useTreeView/useTreeViewModels.js +0 -75
  138. package/legacy/internals/utils/EventManager.js +0 -91
  139. package/legacy/internals/utils/cleanupTracking/CleanupTracking.js +0 -1
  140. package/legacy/internals/utils/cleanupTracking/FinalizationRegistryBasedCleanupTracking.js +0 -29
  141. package/legacy/internals/utils/cleanupTracking/TimerBasedCleanupTracking.js +0 -52
  142. package/legacy/internals/utils/extractPluginParamsFromProps.js +0 -36
  143. package/legacy/internals/utils/publishTreeViewEvent.js +0 -3
  144. package/legacy/internals/utils/warning.js +0 -15
  145. package/legacy/models/index.js +0 -1
  146. package/legacy/models/items.js +0 -1
  147. package/legacy/themeAugmentation/index.js +0 -3
@@ -1,284 +0,0 @@
1
- import * as React from 'react';
2
- import { useTheme } from '@mui/material/styles';
3
- import useEventCallback from '@mui/utils/useEventCallback';
4
- import { getFirstNode, getLastNode, getNextNode, getPreviousNode, populateInstance } from '../../useTreeView/useTreeView.utils';
5
- function isPrintableCharacter(string) {
6
- return !!string && string.length === 1 && !!string.match(/\S/);
7
- }
8
- function findNextFirstChar(firstChars, startIndex, char) {
9
- for (var i = startIndex; i < firstChars.length; i += 1) {
10
- if (char === firstChars[i]) {
11
- return i;
12
- }
13
- }
14
- return -1;
15
- }
16
- export var useTreeViewKeyboardNavigation = function useTreeViewKeyboardNavigation(_ref) {
17
- var instance = _ref.instance,
18
- params = _ref.params,
19
- state = _ref.state;
20
- var theme = useTheme();
21
- var isRTL = theme.direction === 'rtl';
22
- var firstCharMap = React.useRef({});
23
- var hasFirstCharMapBeenUpdatedImperatively = React.useRef(false);
24
- var updateFirstCharMap = useEventCallback(function (callback) {
25
- hasFirstCharMapBeenUpdatedImperatively.current = true;
26
- firstCharMap.current = callback(firstCharMap.current);
27
- });
28
- React.useEffect(function () {
29
- if (hasFirstCharMapBeenUpdatedImperatively.current) {
30
- return;
31
- }
32
- var newFirstCharMap = {};
33
- var processItem = function processItem(item) {
34
- var _item$children;
35
- var getItemId = params.getItemId;
36
- var nodeId = getItemId ? getItemId(item) : item.id;
37
- newFirstCharMap[nodeId] = instance.getNode(nodeId).label.substring(0, 1).toLowerCase();
38
- (_item$children = item.children) == null || _item$children.forEach(processItem);
39
- };
40
- params.items.forEach(processItem);
41
- firstCharMap.current = newFirstCharMap;
42
- }, [params.items, params.getItemId, instance]);
43
- populateInstance(instance, {
44
- updateFirstCharMap: updateFirstCharMap
45
- });
46
- var getFirstMatchingNode = function getFirstMatchingNode(nodeId, firstChar) {
47
- var start;
48
- var index;
49
- var lowercaseChar = firstChar.toLowerCase();
50
- var firstCharIds = [];
51
- var firstChars = [];
52
- // This really only works since the ids are strings
53
- Object.keys(firstCharMap.current).forEach(function (mapNodeId) {
54
- var map = instance.getNode(mapNodeId);
55
- var visible = map.parentId ? instance.isNodeExpanded(map.parentId) : true;
56
- var shouldBeSkipped = params.disabledItemsFocusable ? false : instance.isNodeDisabled(mapNodeId);
57
- if (visible && !shouldBeSkipped) {
58
- firstCharIds.push(mapNodeId);
59
- firstChars.push(firstCharMap.current[mapNodeId]);
60
- }
61
- });
62
-
63
- // Get start index for search based on position of currentItem
64
- start = firstCharIds.indexOf(nodeId) + 1;
65
- if (start >= firstCharIds.length) {
66
- start = 0;
67
- }
68
-
69
- // Check remaining slots in the menu
70
- index = findNextFirstChar(firstChars, start, lowercaseChar);
71
-
72
- // If not found in remaining slots, check from beginning
73
- if (index === -1) {
74
- index = findNextFirstChar(firstChars, 0, lowercaseChar);
75
- }
76
-
77
- // If a match was found...
78
- if (index > -1) {
79
- return firstCharIds[index];
80
- }
81
- return null;
82
- };
83
- var canToggleNodeSelection = function canToggleNodeSelection(nodeId) {
84
- return !params.disableSelection && !instance.isNodeDisabled(nodeId);
85
- };
86
- var canToggleNodeExpansion = function canToggleNodeExpansion(nodeId) {
87
- return !instance.isNodeDisabled(nodeId) && instance.isNodeExpandable(nodeId);
88
- };
89
-
90
- // ARIA specification: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/#keyboardinteraction
91
- var createHandleKeyDown = function createHandleKeyDown(otherHandlers) {
92
- return function (event) {
93
- var _otherHandlers$onKeyD;
94
- (_otherHandlers$onKeyD = otherHandlers.onKeyDown) == null || _otherHandlers$onKeyD.call(otherHandlers, event);
95
- if (event.defaultMuiPrevented) {
96
- return;
97
- }
98
-
99
- // If the tree is empty there will be no focused node
100
- if (event.altKey || event.currentTarget !== event.target || state.focusedNodeId == null) {
101
- return;
102
- }
103
- var ctrlPressed = event.ctrlKey || event.metaKey;
104
- var key = event.key;
105
-
106
- // eslint-disable-next-line default-case
107
- switch (true) {
108
- // Select the node when pressing "Space"
109
- case key === ' ' && canToggleNodeSelection(state.focusedNodeId):
110
- {
111
- event.preventDefault();
112
- if (params.multiSelect && event.shiftKey) {
113
- instance.selectRange(event, {
114
- end: state.focusedNodeId
115
- });
116
- } else if (params.multiSelect) {
117
- instance.selectNode(event, state.focusedNodeId, true);
118
- } else {
119
- instance.selectNode(event, state.focusedNodeId);
120
- }
121
- break;
122
- }
123
-
124
- // If the focused node has children, we expand it.
125
- // If the focused node has no children, we select it.
126
- case key === 'Enter':
127
- {
128
- if (canToggleNodeExpansion(state.focusedNodeId)) {
129
- instance.toggleNodeExpansion(event, state.focusedNodeId);
130
- event.preventDefault();
131
- } else if (canToggleNodeSelection(state.focusedNodeId)) {
132
- if (params.multiSelect) {
133
- event.preventDefault();
134
- instance.selectNode(event, state.focusedNodeId, true);
135
- } else if (!instance.isNodeSelected(state.focusedNodeId)) {
136
- instance.selectNode(event, state.focusedNodeId);
137
- event.preventDefault();
138
- }
139
- }
140
- break;
141
- }
142
-
143
- // Focus the next focusable node
144
- case key === 'ArrowDown':
145
- {
146
- var nextNode = getNextNode(instance, state.focusedNodeId);
147
- if (nextNode) {
148
- event.preventDefault();
149
- instance.focusNode(event, nextNode);
150
-
151
- // Multi select behavior when pressing Shift + ArrowDown
152
- // Toggles the selection state of the next node
153
- if (params.multiSelect && event.shiftKey && canToggleNodeSelection(nextNode)) {
154
- instance.selectRange(event, {
155
- end: nextNode,
156
- current: state.focusedNodeId
157
- }, true);
158
- }
159
- }
160
- break;
161
- }
162
-
163
- // Focuses the previous focusable node
164
- case key === 'ArrowUp':
165
- {
166
- var previousNode = getPreviousNode(instance, state.focusedNodeId);
167
- if (previousNode) {
168
- event.preventDefault();
169
- instance.focusNode(event, previousNode);
170
-
171
- // Multi select behavior when pressing Shift + ArrowUp
172
- // Toggles the selection state of the previous node
173
- if (params.multiSelect && event.shiftKey && canToggleNodeSelection(previousNode)) {
174
- instance.selectRange(event, {
175
- end: previousNode,
176
- current: state.focusedNodeId
177
- }, true);
178
- }
179
- }
180
- break;
181
- }
182
-
183
- // If the focused node is expanded, we move the focus to its first child
184
- // If the focused node is collapsed and has children, we expand it
185
- case key === 'ArrowRight' && !isRTL || key === 'ArrowLeft' && isRTL:
186
- {
187
- if (instance.isNodeExpanded(state.focusedNodeId)) {
188
- instance.focusNode(event, getNextNode(instance, state.focusedNodeId));
189
- event.preventDefault();
190
- } else if (canToggleNodeExpansion(state.focusedNodeId)) {
191
- instance.toggleNodeExpansion(event, state.focusedNodeId);
192
- event.preventDefault();
193
- }
194
- break;
195
- }
196
-
197
- // If the focused node is expanded, we collapse it
198
- // If the focused node is collapsed and has a parent, we move the focus to this parent
199
- case key === 'ArrowLeft' && !isRTL || key === 'ArrowRight' && isRTL:
200
- {
201
- if (canToggleNodeExpansion(state.focusedNodeId) && instance.isNodeExpanded(state.focusedNodeId)) {
202
- instance.toggleNodeExpansion(event, state.focusedNodeId);
203
- event.preventDefault();
204
- } else {
205
- var parent = instance.getNode(state.focusedNodeId).parentId;
206
- if (parent) {
207
- instance.focusNode(event, parent);
208
- event.preventDefault();
209
- }
210
- }
211
- break;
212
- }
213
-
214
- // Focuses the first node in the tree
215
- case key === 'Home':
216
- {
217
- instance.focusNode(event, getFirstNode(instance));
218
-
219
- // Multi select behavior when pressing Ctrl + Shift + Home
220
- // Selects the focused node and all nodes up to the first node.
221
- if (canToggleNodeSelection(state.focusedNodeId) && params.multiSelect && ctrlPressed && event.shiftKey) {
222
- instance.rangeSelectToFirst(event, state.focusedNodeId);
223
- }
224
- event.preventDefault();
225
- break;
226
- }
227
-
228
- // Focuses the last node in the tree
229
- case key === 'End':
230
- {
231
- instance.focusNode(event, getLastNode(instance));
232
-
233
- // Multi select behavior when pressing Ctrl + Shirt + End
234
- // Selects the focused node and all the nodes down to the last node.
235
- if (canToggleNodeSelection(state.focusedNodeId) && params.multiSelect && ctrlPressed && event.shiftKey) {
236
- instance.rangeSelectToLast(event, state.focusedNodeId);
237
- }
238
- event.preventDefault();
239
- break;
240
- }
241
-
242
- // Expand all siblings that are at the same level as the focused node
243
- case key === '*':
244
- {
245
- instance.expandAllSiblings(event, state.focusedNodeId);
246
- event.preventDefault();
247
- break;
248
- }
249
-
250
- // Multi select behavior when pressing Ctrl + a
251
- // Selects all the nodes
252
- case key === 'a' && ctrlPressed && params.multiSelect && !params.disableSelection:
253
- {
254
- instance.selectRange(event, {
255
- start: getFirstNode(instance),
256
- end: getLastNode(instance)
257
- });
258
- event.preventDefault();
259
- break;
260
- }
261
-
262
- // Type-ahead
263
- // TODO: Support typing multiple characters
264
- case !ctrlPressed && !event.shiftKey && isPrintableCharacter(key):
265
- {
266
- var matchingNode = getFirstMatchingNode(state.focusedNodeId, key);
267
- if (matchingNode != null) {
268
- instance.focusNode(event, matchingNode);
269
- event.preventDefault();
270
- }
271
- break;
272
- }
273
- }
274
- };
275
- };
276
- return {
277
- getRootProps: function getRootProps(otherHandlers) {
278
- return {
279
- onKeyDown: createHandleKeyDown(otherHandlers)
280
- };
281
- }
282
- };
283
- };
284
- useTreeViewKeyboardNavigation.params = {};
@@ -1 +0,0 @@
1
- export { useTreeViewNodes } from './useTreeViewNodes';
@@ -1,161 +0,0 @@
1
- import _extends from "@babel/runtime/helpers/esm/extends";
2
- import * as React from 'react';
3
- import useEventCallback from '@mui/utils/useEventCallback';
4
- import { populateInstance } from '../../useTreeView/useTreeView.utils';
5
- import { publishTreeViewEvent } from '../../utils/publishTreeViewEvent';
6
- var updateState = function updateState(_ref) {
7
- var items = _ref.items,
8
- isItemDisabled = _ref.isItemDisabled,
9
- getItemLabel = _ref.getItemLabel,
10
- getItemId = _ref.getItemId;
11
- var nodeMap = {};
12
- var processItem = function processItem(item, index, parentId) {
13
- var _item$children, _item$children2;
14
- var id = getItemId ? getItemId(item) : item.id;
15
- if (id == null) {
16
- throw new Error(['MUI X: The Tree View component requires all items to have a unique `id` property.', 'Alternatively, you can use the `getItemId` prop to specify a custom id for each item.', 'An item was provided without id in the `items` prop:', JSON.stringify(item)].join('\n'));
17
- }
18
- if (nodeMap[id] != null) {
19
- throw new Error(['MUI X: The Tree View component requires all items to have a unique `id` property.', 'Alternatively, you can use the `getItemId` prop to specify a custom id for each item.', "Tow items were provided with the same id in the `items` prop: \"".concat(id, "\"")].join('\n'));
20
- }
21
- var label = getItemLabel ? getItemLabel(item) : item.label;
22
- if (label == null) {
23
- throw new Error(['MUI X: The Tree View component requires all items to have a `label` property.', 'Alternatively, you can use the `getItemLabel` prop to specify a custom label for each item.', 'An item was provided without label in the `items` prop:', JSON.stringify(item)].join('\n'));
24
- }
25
- nodeMap[id] = {
26
- id: id,
27
- label: label,
28
- index: index,
29
- parentId: parentId,
30
- idAttribute: id,
31
- expandable: !!((_item$children = item.children) != null && _item$children.length),
32
- disabled: isItemDisabled ? isItemDisabled(item) : false
33
- };
34
- return {
35
- id: id,
36
- children: (_item$children2 = item.children) == null ? void 0 : _item$children2.map(function (child, childIndex) {
37
- return processItem(child, childIndex, id);
38
- })
39
- };
40
- };
41
- var nodeTree = items.map(function (item, itemIndex) {
42
- return processItem(item, itemIndex, null);
43
- });
44
- return {
45
- nodeMap: nodeMap,
46
- nodeTree: nodeTree
47
- };
48
- };
49
- export var useTreeViewNodes = function useTreeViewNodes(_ref2) {
50
- var instance = _ref2.instance,
51
- params = _ref2.params,
52
- state = _ref2.state,
53
- setState = _ref2.setState;
54
- var getNode = React.useCallback(function (nodeId) {
55
- return state.nodeMap[nodeId];
56
- }, [state.nodeMap]);
57
- var isNodeDisabled = React.useCallback(function (nodeId) {
58
- if (nodeId == null) {
59
- return false;
60
- }
61
- var node = instance.getNode(nodeId);
62
-
63
- // This can be called before the node has been added to the node map.
64
- if (!node) {
65
- return false;
66
- }
67
- if (node.disabled) {
68
- return true;
69
- }
70
- while (node.parentId != null) {
71
- node = instance.getNode(node.parentId);
72
- if (node.disabled) {
73
- return true;
74
- }
75
- }
76
- return false;
77
- }, [instance]);
78
- var getChildrenIds = useEventCallback(function (nodeId) {
79
- return Object.values(state.nodeMap).filter(function (node) {
80
- return node.parentId === nodeId;
81
- }).sort(function (a, b) {
82
- return a.index - b.index;
83
- }).map(function (child) {
84
- return child.id;
85
- });
86
- });
87
- var getNavigableChildrenIds = function getNavigableChildrenIds(nodeId) {
88
- var childrenIds = instance.getChildrenIds(nodeId);
89
- if (!params.disabledItemsFocusable) {
90
- childrenIds = childrenIds.filter(function (node) {
91
- return !instance.isNodeDisabled(node);
92
- });
93
- }
94
- return childrenIds;
95
- };
96
- React.useEffect(function () {
97
- setState(function (prevState) {
98
- var newState = updateState({
99
- items: params.items,
100
- isItemDisabled: params.isItemDisabled,
101
- getItemId: params.getItemId,
102
- getItemLabel: params.getItemLabel
103
- });
104
- Object.values(prevState.nodeMap).forEach(function (node) {
105
- if (!newState.nodeMap[node.id]) {
106
- publishTreeViewEvent(instance, 'removeNode', {
107
- id: node.id
108
- });
109
- }
110
- });
111
- return _extends({}, prevState, newState);
112
- });
113
- }, [instance, setState, params.items, params.isItemDisabled, params.getItemId, params.getItemLabel]);
114
- var getNodesToRender = useEventCallback(function () {
115
- var getPropsFromNodeId = function getPropsFromNodeId(_ref3) {
116
- var id = _ref3.id,
117
- children = _ref3.children;
118
- var node = state.nodeMap[id];
119
- return {
120
- label: node.label,
121
- nodeId: node.id,
122
- id: node.idAttribute,
123
- children: children == null ? void 0 : children.map(getPropsFromNodeId)
124
- };
125
- };
126
- return state.nodeTree.map(getPropsFromNodeId);
127
- });
128
- populateInstance(instance, {
129
- getNode: getNode,
130
- getNodesToRender: getNodesToRender,
131
- getChildrenIds: getChildrenIds,
132
- getNavigableChildrenIds: getNavigableChildrenIds,
133
- isNodeDisabled: isNodeDisabled
134
- });
135
- return {
136
- contextValue: {
137
- disabledItemsFocusable: params.disabledItemsFocusable
138
- }
139
- };
140
- };
141
- useTreeViewNodes.getInitialState = function (params) {
142
- return updateState({
143
- items: params.items,
144
- isItemDisabled: params.isItemDisabled,
145
- getItemId: params.getItemId,
146
- getItemLabel: params.getItemLabel
147
- });
148
- };
149
- useTreeViewNodes.getDefaultizedParams = function (params) {
150
- var _params$disabledItems;
151
- return _extends({}, params, {
152
- disabledItemsFocusable: (_params$disabledItems = params.disabledItemsFocusable) != null ? _params$disabledItems : false
153
- });
154
- };
155
- useTreeViewNodes.params = {
156
- disabledItemsFocusable: true,
157
- items: true,
158
- isItemDisabled: true,
159
- getItemLabel: true,
160
- getItemId: true
161
- };
@@ -1 +0,0 @@
1
- export { useTreeViewSelection } from './useTreeViewSelection';
@@ -1,219 +0,0 @@
1
- import _extends from "@babel/runtime/helpers/esm/extends";
2
- import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
3
- import * as React from 'react';
4
- import { populateInstance, getNextNode, getFirstNode, getLastNode } from '../../useTreeView/useTreeView.utils';
5
- import { findOrderInTremauxTree } from './useTreeViewSelection.utils';
6
- export var useTreeViewSelection = function useTreeViewSelection(_ref) {
7
- var instance = _ref.instance,
8
- params = _ref.params,
9
- models = _ref.models;
10
- var lastSelectedNode = React.useRef(null);
11
- var lastSelectionWasRange = React.useRef(false);
12
- var currentRangeSelection = React.useRef([]);
13
- var setSelectedNodes = function setSelectedNodes(event, newSelectedNodes) {
14
- if (params.onNodeSelectionToggle) {
15
- if (params.multiSelect) {
16
- var addedNodes = newSelectedNodes.filter(function (nodeId) {
17
- return !instance.isNodeSelected(nodeId);
18
- });
19
- var removedNodes = models.selectedNodes.value.filter(function (nodeId) {
20
- return !newSelectedNodes.includes(nodeId);
21
- });
22
- addedNodes.forEach(function (nodeId) {
23
- params.onNodeSelectionToggle(event, nodeId, true);
24
- });
25
- removedNodes.forEach(function (nodeId) {
26
- params.onNodeSelectionToggle(event, nodeId, false);
27
- });
28
- } else if (newSelectedNodes !== models.selectedNodes.value) {
29
- if (models.selectedNodes.value != null) {
30
- params.onNodeSelectionToggle(event, models.selectedNodes.value, false);
31
- }
32
- if (newSelectedNodes != null) {
33
- params.onNodeSelectionToggle(event, newSelectedNodes, true);
34
- }
35
- }
36
- }
37
- if (params.onSelectedNodesChange) {
38
- params.onSelectedNodesChange(event, newSelectedNodes);
39
- }
40
- models.selectedNodes.setControlledValue(newSelectedNodes);
41
- };
42
- var isNodeSelected = function isNodeSelected(nodeId) {
43
- return Array.isArray(models.selectedNodes.value) ? models.selectedNodes.value.indexOf(nodeId) !== -1 : models.selectedNodes.value === nodeId;
44
- };
45
- var selectNode = function selectNode(event, nodeId) {
46
- var multiple = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
47
- if (params.disableSelection) {
48
- return;
49
- }
50
- if (multiple) {
51
- if (Array.isArray(models.selectedNodes.value)) {
52
- var newSelected;
53
- if (models.selectedNodes.value.indexOf(nodeId) !== -1) {
54
- newSelected = models.selectedNodes.value.filter(function (id) {
55
- return id !== nodeId;
56
- });
57
- } else {
58
- newSelected = [nodeId].concat(models.selectedNodes.value);
59
- }
60
- setSelectedNodes(event, newSelected);
61
- }
62
- } else {
63
- var _newSelected = params.multiSelect ? [nodeId] : nodeId;
64
- setSelectedNodes(event, _newSelected);
65
- }
66
- lastSelectedNode.current = nodeId;
67
- lastSelectionWasRange.current = false;
68
- currentRangeSelection.current = [];
69
- };
70
- var getNodesInRange = function getNodesInRange(nodeAId, nodeBId) {
71
- var _findOrderInTremauxTr = findOrderInTremauxTree(instance, nodeAId, nodeBId),
72
- _findOrderInTremauxTr2 = _slicedToArray(_findOrderInTremauxTr, 2),
73
- first = _findOrderInTremauxTr2[0],
74
- last = _findOrderInTremauxTr2[1];
75
- var nodes = [first];
76
- var current = first;
77
- while (current !== last) {
78
- current = getNextNode(instance, current);
79
- nodes.push(current);
80
- }
81
- return nodes;
82
- };
83
- var handleRangeArrowSelect = function handleRangeArrowSelect(event, nodes) {
84
- var base = models.selectedNodes.value.slice();
85
- var start = nodes.start,
86
- next = nodes.next,
87
- current = nodes.current;
88
- if (!next || !current) {
89
- return;
90
- }
91
- if (currentRangeSelection.current.indexOf(current) === -1) {
92
- currentRangeSelection.current = [];
93
- }
94
- if (lastSelectionWasRange.current) {
95
- if (currentRangeSelection.current.indexOf(next) !== -1) {
96
- base = base.filter(function (id) {
97
- return id === start || id !== current;
98
- });
99
- currentRangeSelection.current = currentRangeSelection.current.filter(function (id) {
100
- return id === start || id !== current;
101
- });
102
- } else {
103
- base.push(next);
104
- currentRangeSelection.current.push(next);
105
- }
106
- } else {
107
- base.push(next);
108
- currentRangeSelection.current.push(current, next);
109
- }
110
- setSelectedNodes(event, base);
111
- };
112
- var handleRangeSelect = function handleRangeSelect(event, nodes) {
113
- var base = models.selectedNodes.value.slice();
114
- var start = nodes.start,
115
- end = nodes.end;
116
- // If last selection was a range selection ignore nodes that were selected.
117
- if (lastSelectionWasRange.current) {
118
- base = base.filter(function (id) {
119
- return currentRangeSelection.current.indexOf(id) === -1;
120
- });
121
- }
122
- var range = getNodesInRange(start, end);
123
- range = range.filter(function (node) {
124
- return !instance.isNodeDisabled(node);
125
- });
126
- currentRangeSelection.current = range;
127
- var newSelected = base.concat(range);
128
- newSelected = newSelected.filter(function (id, i) {
129
- return newSelected.indexOf(id) === i;
130
- });
131
- setSelectedNodes(event, newSelected);
132
- };
133
- var selectRange = function selectRange(event, nodes) {
134
- var stacked = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
135
- if (params.disableSelection) {
136
- return;
137
- }
138
- var _nodes$start = nodes.start,
139
- start = _nodes$start === void 0 ? lastSelectedNode.current : _nodes$start,
140
- end = nodes.end,
141
- current = nodes.current;
142
- if (stacked) {
143
- handleRangeArrowSelect(event, {
144
- start: start,
145
- next: end,
146
- current: current
147
- });
148
- } else if (start != null && end != null) {
149
- handleRangeSelect(event, {
150
- start: start,
151
- end: end
152
- });
153
- }
154
- lastSelectionWasRange.current = true;
155
- };
156
- var rangeSelectToFirst = function rangeSelectToFirst(event, nodeId) {
157
- if (!lastSelectedNode.current) {
158
- lastSelectedNode.current = nodeId;
159
- }
160
- var start = lastSelectionWasRange.current ? lastSelectedNode.current : nodeId;
161
- instance.selectRange(event, {
162
- start: start,
163
- end: getFirstNode(instance)
164
- });
165
- };
166
- var rangeSelectToLast = function rangeSelectToLast(event, nodeId) {
167
- if (!lastSelectedNode.current) {
168
- lastSelectedNode.current = nodeId;
169
- }
170
- var start = lastSelectionWasRange.current ? lastSelectedNode.current : nodeId;
171
- instance.selectRange(event, {
172
- start: start,
173
- end: getLastNode(instance)
174
- });
175
- };
176
- populateInstance(instance, {
177
- isNodeSelected: isNodeSelected,
178
- selectNode: selectNode,
179
- selectRange: selectRange,
180
- rangeSelectToLast: rangeSelectToLast,
181
- rangeSelectToFirst: rangeSelectToFirst
182
- });
183
- return {
184
- getRootProps: function getRootProps() {
185
- return {
186
- 'aria-multiselectable': params.multiSelect
187
- };
188
- },
189
- contextValue: {
190
- selection: {
191
- multiSelect: params.multiSelect
192
- }
193
- }
194
- };
195
- };
196
- useTreeViewSelection.models = {
197
- selectedNodes: {
198
- getDefaultValue: function getDefaultValue(params) {
199
- return params.defaultSelectedNodes;
200
- }
201
- }
202
- };
203
- var DEFAULT_SELECTED_NODES = [];
204
- useTreeViewSelection.getDefaultizedParams = function (params) {
205
- var _params$disableSelect, _params$multiSelect, _params$defaultSelect;
206
- return _extends({}, params, {
207
- disableSelection: (_params$disableSelect = params.disableSelection) != null ? _params$disableSelect : false,
208
- multiSelect: (_params$multiSelect = params.multiSelect) != null ? _params$multiSelect : false,
209
- defaultSelectedNodes: (_params$defaultSelect = params.defaultSelectedNodes) != null ? _params$defaultSelect : params.multiSelect ? DEFAULT_SELECTED_NODES : null
210
- });
211
- };
212
- useTreeViewSelection.params = {
213
- disableSelection: true,
214
- multiSelect: true,
215
- defaultSelectedNodes: true,
216
- selectedNodes: true,
217
- onSelectedNodesChange: true,
218
- onNodeSelectionToggle: true
219
- };