@mui/x-tree-view 7.0.0 → 7.1.1

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 (111) hide show
  1. package/CHANGELOG.md +246 -4
  2. package/README.md +1 -1
  3. package/RichTreeView/RichTreeView.d.ts +2 -2
  4. package/RichTreeView/RichTreeView.js +11 -9
  5. package/SimpleTreeView/SimpleTreeView.js +4 -2
  6. package/SimpleTreeView/SimpleTreeView.plugins.d.ts +1 -1
  7. package/SimpleTreeView/SimpleTreeView.plugins.js +2 -2
  8. package/TreeItem/TreeItem.js +4 -4
  9. package/TreeItem/treeItemClasses.d.ts +1 -1
  10. package/TreeItem/useTreeItemState.js +9 -9
  11. package/TreeItem2Icon/TreeItem2Icon.types.d.ts +4 -4
  12. package/TreeView/TreeView.js +2 -1
  13. package/hooks/useTreeItem2Utils/useTreeItem2Utils.js +8 -8
  14. package/hooks/useTreeViewApiRef.d.ts +1 -1
  15. package/index.js +1 -1
  16. package/internals/TreeViewProvider/DescendantProvider.d.ts +1 -1
  17. package/internals/TreeViewProvider/DescendantProvider.js +1 -1
  18. package/internals/index.d.ts +18 -8
  19. package/internals/index.js +11 -0
  20. package/internals/models/plugin.d.ts +1 -1
  21. package/internals/plugins/defaultPlugins.d.ts +3 -3
  22. package/internals/plugins/defaultPlugins.js +2 -2
  23. package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js +32 -18
  24. package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.types.d.ts +16 -6
  25. package/internals/plugins/useTreeViewFocus/useTreeViewFocus.js +35 -33
  26. package/internals/plugins/useTreeViewFocus/useTreeViewFocus.types.d.ts +17 -9
  27. package/internals/plugins/useTreeViewIcons/useTreeViewIcons.types.d.ts +6 -6
  28. package/internals/plugins/useTreeViewId/useTreeViewId.types.d.ts +1 -1
  29. package/internals/plugins/useTreeViewItems/index.d.ts +2 -0
  30. package/internals/plugins/useTreeViewItems/index.js +1 -0
  31. package/internals/plugins/useTreeViewItems/useTreeViewItems.d.ts +3 -0
  32. package/internals/plugins/{useTreeViewNodes/useTreeViewNodes.js → useTreeViewItems/useTreeViewItems.js} +43 -33
  33. package/internals/plugins/useTreeViewItems/useTreeViewItems.types.d.ts +104 -0
  34. package/internals/plugins/useTreeViewJSXItems/index.d.ts +2 -0
  35. package/internals/plugins/useTreeViewJSXItems/index.js +1 -0
  36. package/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.d.ts +3 -0
  37. package/{modern/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.js → internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.js} +26 -25
  38. package/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.types.d.ts +18 -0
  39. package/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js +40 -44
  40. package/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.types.d.ts +2 -2
  41. package/internals/plugins/useTreeViewSelection/useTreeViewSelection.js +34 -34
  42. package/internals/plugins/useTreeViewSelection/useTreeViewSelection.types.d.ts +6 -6
  43. package/internals/plugins/useTreeViewSelection/useTreeViewSelection.utils.d.ts +7 -7
  44. package/internals/plugins/useTreeViewSelection/useTreeViewSelection.utils.js +5 -5
  45. package/internals/useTreeView/useTreeView.utils.d.ts +5 -5
  46. package/internals/useTreeView/useTreeView.utils.js +15 -15
  47. package/internals/useTreeView/useTreeViewModels.js +2 -2
  48. package/modern/RichTreeView/RichTreeView.js +11 -9
  49. package/modern/SimpleTreeView/SimpleTreeView.js +4 -2
  50. package/modern/SimpleTreeView/SimpleTreeView.plugins.js +2 -2
  51. package/modern/TreeItem/TreeItem.js +4 -4
  52. package/modern/TreeItem/useTreeItemState.js +9 -9
  53. package/modern/TreeView/TreeView.js +2 -1
  54. package/modern/hooks/useTreeItem2Utils/useTreeItem2Utils.js +8 -8
  55. package/modern/index.js +1 -1
  56. package/modern/internals/TreeViewProvider/DescendantProvider.js +1 -1
  57. package/modern/internals/index.js +11 -0
  58. package/modern/internals/plugins/defaultPlugins.js +2 -2
  59. package/modern/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js +32 -18
  60. package/modern/internals/plugins/useTreeViewFocus/useTreeViewFocus.js +35 -33
  61. package/modern/internals/plugins/useTreeViewItems/index.js +1 -0
  62. package/modern/internals/plugins/{useTreeViewNodes/useTreeViewNodes.js → useTreeViewItems/useTreeViewItems.js} +43 -33
  63. package/modern/internals/plugins/useTreeViewJSXItems/index.js +1 -0
  64. package/{internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.js → modern/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.js} +26 -25
  65. package/modern/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js +40 -44
  66. package/modern/internals/plugins/useTreeViewSelection/useTreeViewSelection.js +34 -34
  67. package/modern/internals/plugins/useTreeViewSelection/useTreeViewSelection.utils.js +5 -5
  68. package/modern/internals/useTreeView/useTreeView.utils.js +15 -15
  69. package/modern/internals/useTreeView/useTreeViewModels.js +2 -2
  70. package/node/RichTreeView/RichTreeView.js +11 -9
  71. package/node/SimpleTreeView/SimpleTreeView.js +4 -2
  72. package/node/SimpleTreeView/SimpleTreeView.plugins.js +2 -2
  73. package/node/TreeItem/TreeItem.js +4 -4
  74. package/node/TreeItem/useTreeItemState.js +9 -9
  75. package/node/TreeView/TreeView.js +2 -1
  76. package/node/hooks/useTreeItem2Utils/useTreeItem2Utils.js +8 -8
  77. package/node/index.js +1 -1
  78. package/node/internals/TreeViewProvider/DescendantProvider.js +1 -1
  79. package/node/internals/index.js +70 -0
  80. package/node/internals/plugins/defaultPlugins.js +2 -2
  81. package/node/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js +31 -17
  82. package/node/internals/plugins/useTreeViewFocus/useTreeViewFocus.js +35 -33
  83. package/node/internals/plugins/useTreeViewItems/index.js +12 -0
  84. package/node/internals/plugins/{useTreeViewNodes/useTreeViewNodes.js → useTreeViewItems/useTreeViewItems.js} +45 -35
  85. package/node/internals/plugins/useTreeViewJSXItems/index.js +12 -0
  86. package/node/internals/plugins/{useTreeViewJSXNodes/useTreeViewJSXNodes.js → useTreeViewJSXItems/useTreeViewJSXItems.js} +28 -27
  87. package/node/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js +39 -43
  88. package/node/internals/plugins/useTreeViewSelection/useTreeViewSelection.js +33 -33
  89. package/node/internals/plugins/useTreeViewSelection/useTreeViewSelection.utils.js +5 -5
  90. package/node/internals/useTreeView/useTreeView.utils.js +20 -20
  91. package/node/internals/useTreeView/useTreeViewModels.js +2 -2
  92. package/package.json +2 -2
  93. package/useTreeItem2/useTreeItem2.d.ts +1 -1
  94. package/internals/plugins/useTreeViewJSXNodes/index.d.ts +0 -2
  95. package/internals/plugins/useTreeViewJSXNodes/index.js +0 -1
  96. package/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.d.ts +0 -3
  97. package/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.types.d.ts +0 -18
  98. package/internals/plugins/useTreeViewNodes/index.d.ts +0 -2
  99. package/internals/plugins/useTreeViewNodes/index.js +0 -1
  100. package/internals/plugins/useTreeViewNodes/useTreeViewNodes.d.ts +0 -3
  101. package/internals/plugins/useTreeViewNodes/useTreeViewNodes.types.d.ts +0 -88
  102. package/modern/internals/plugins/useTreeViewJSXNodes/index.js +0 -1
  103. package/modern/internals/plugins/useTreeViewNodes/index.js +0 -1
  104. package/node/internals/plugins/useTreeViewJSXNodes/index.js +0 -12
  105. package/node/internals/plugins/useTreeViewNodes/index.js +0 -12
  106. /package/internals/plugins/{useTreeViewJSXNodes/useTreeViewJSXNodes.types.js → useTreeViewItems/useTreeViewItems.types.js} +0 -0
  107. /package/internals/plugins/{useTreeViewNodes/useTreeViewNodes.types.js → useTreeViewJSXItems/useTreeViewJSXItems.types.js} +0 -0
  108. /package/modern/internals/plugins/{useTreeViewJSXNodes/useTreeViewJSXNodes.types.js → useTreeViewItems/useTreeViewItems.types.js} +0 -0
  109. /package/modern/internals/plugins/{useTreeViewNodes/useTreeViewNodes.types.js → useTreeViewJSXItems/useTreeViewJSXItems.types.js} +0 -0
  110. /package/node/internals/plugins/{useTreeViewJSXNodes/useTreeViewJSXNodes.types.js → useTreeViewItems/useTreeViewItems.types.js} +0 -0
  111. /package/node/internals/plugins/{useTreeViewNodes/useTreeViewNodes.types.js → useTreeViewJSXItems/useTreeViewJSXItems.types.js} +0 -0
@@ -24,30 +24,26 @@ function findNextFirstChar(firstChars, startIndex, char) {
24
24
  }
25
25
  const useTreeViewKeyboardNavigation = ({
26
26
  instance,
27
- params
27
+ params,
28
+ state
28
29
  }) => {
29
30
  const theme = (0, _styles.useTheme)();
30
31
  const isRTL = theme.direction === 'rtl';
31
32
  const firstCharMap = React.useRef({});
32
- const hasFirstCharMapBeenUpdatedImperatively = React.useRef(false);
33
33
  const updateFirstCharMap = (0, _useEventCallback.default)(callback => {
34
- hasFirstCharMapBeenUpdatedImperatively.current = true;
35
34
  firstCharMap.current = callback(firstCharMap.current);
36
35
  });
37
36
  React.useEffect(() => {
38
- if (hasFirstCharMapBeenUpdatedImperatively.current) {
37
+ if (instance.areItemUpdatesPrevented()) {
39
38
  return;
40
39
  }
41
40
  const newFirstCharMap = {};
42
- const processItem = item => {
43
- const getItemId = params.getItemId;
44
- const itemId = getItemId ? getItemId(item) : item.id;
45
- newFirstCharMap[itemId] = instance.getNode(itemId).label.substring(0, 1).toLowerCase();
46
- item.children?.forEach(processItem);
41
+ const processItem = node => {
42
+ newFirstCharMap[node.id] = node.label.substring(0, 1).toLowerCase();
47
43
  };
48
- params.items.forEach(processItem);
44
+ Object.values(state.items.nodeMap).forEach(processItem);
49
45
  firstCharMap.current = newFirstCharMap;
50
- }, [params.items, params.getItemId, instance]);
46
+ }, [state.items.nodeMap, params.getItemId, instance]);
51
47
  const getFirstMatchingItem = (itemId, firstChar) => {
52
48
  let start;
53
49
  let index;
@@ -57,8 +53,8 @@ const useTreeViewKeyboardNavigation = ({
57
53
  // This really only works since the ids are strings
58
54
  Object.keys(firstCharMap.current).forEach(mapItemId => {
59
55
  const map = instance.getNode(mapItemId);
60
- const visible = map.parentId ? instance.isNodeExpanded(map.parentId) : true;
61
- const shouldBeSkipped = params.disabledItemsFocusable ? false : instance.isNodeDisabled(mapItemId);
56
+ const visible = map.parentId ? instance.isItemExpanded(map.parentId) : true;
57
+ const shouldBeSkipped = params.disabledItemsFocusable ? false : instance.isItemDisabled(mapItemId);
62
58
  if (visible && !shouldBeSkipped) {
63
59
  firstCharIds.push(mapItemId);
64
60
  firstChars.push(firstCharMap.current[mapItemId]);
@@ -85,9 +81,9 @@ const useTreeViewKeyboardNavigation = ({
85
81
  }
86
82
  return null;
87
83
  };
88
- const canToggleItemSelection = itemId => !params.disableSelection && !instance.isNodeDisabled(itemId);
84
+ const canToggleItemSelection = itemId => !params.disableSelection && !instance.isItemDisabled(itemId);
89
85
  const canToggleItemExpansion = itemId => {
90
- return !instance.isNodeDisabled(itemId) && instance.isNodeExpandable(itemId);
86
+ return !instance.isItemDisabled(itemId) && instance.isItemExpandable(itemId);
91
87
  };
92
88
 
93
89
  // ARIA specification: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/#keyboardinteraction
@@ -103,7 +99,7 @@ const useTreeViewKeyboardNavigation = ({
103
99
 
104
100
  // eslint-disable-next-line default-case
105
101
  switch (true) {
106
- // Select the node when pressing "Space"
102
+ // Select the item when pressing "Space"
107
103
  case key === ' ' && canToggleItemSelection(itemId):
108
104
  {
109
105
  event.preventDefault();
@@ -112,26 +108,26 @@ const useTreeViewKeyboardNavigation = ({
112
108
  end: itemId
113
109
  });
114
110
  } else if (params.multiSelect) {
115
- instance.selectNode(event, itemId, true);
111
+ instance.selectItem(event, itemId, true);
116
112
  } else {
117
- instance.selectNode(event, itemId);
113
+ instance.selectItem(event, itemId);
118
114
  }
119
115
  break;
120
116
  }
121
117
 
122
- // If the focused node has children, we expand it.
123
- // If the focused node has no children, we select it.
118
+ // If the focused item has children, we expand it.
119
+ // If the focused item has no children, we select it.
124
120
  case key === 'Enter':
125
121
  {
126
122
  if (canToggleItemExpansion(itemId)) {
127
- instance.toggleNodeExpansion(event, itemId);
123
+ instance.toggleItemExpansion(event, itemId);
128
124
  event.preventDefault();
129
125
  } else if (canToggleItemSelection(itemId)) {
130
126
  if (params.multiSelect) {
131
127
  event.preventDefault();
132
- instance.selectNode(event, itemId, true);
133
- } else if (!instance.isNodeSelected(itemId)) {
134
- instance.selectNode(event, itemId);
128
+ instance.selectItem(event, itemId, true);
129
+ } else if (!instance.isItemSelected(itemId)) {
130
+ instance.selectItem(event, itemId);
135
131
  event.preventDefault();
136
132
  }
137
133
  }
@@ -141,7 +137,7 @@ const useTreeViewKeyboardNavigation = ({
141
137
  // Focus the next focusable item
142
138
  case key === 'ArrowDown':
143
139
  {
144
- const nextItem = (0, _useTreeView.getNextNode)(instance, itemId);
140
+ const nextItem = (0, _useTreeView.getNextItem)(instance, itemId);
145
141
  if (nextItem) {
146
142
  event.preventDefault();
147
143
  instance.focusItem(event, nextItem);
@@ -161,7 +157,7 @@ const useTreeViewKeyboardNavigation = ({
161
157
  // Focuses the previous focusable item
162
158
  case key === 'ArrowUp':
163
159
  {
164
- const previousItem = (0, _useTreeView.getPreviousNode)(instance, itemId);
160
+ const previousItem = (0, _useTreeView.getPreviousItem)(instance, itemId);
165
161
  if (previousItem) {
166
162
  event.preventDefault();
167
163
  instance.focusItem(event, previousItem);
@@ -182,14 +178,14 @@ const useTreeViewKeyboardNavigation = ({
182
178
  // If the focused item is collapsed and has children, we expand it
183
179
  case key === 'ArrowRight' && !isRTL || key === 'ArrowLeft' && isRTL:
184
180
  {
185
- if (instance.isNodeExpanded(itemId)) {
186
- const nextNodeId = (0, _useTreeView.getNextNode)(instance, itemId);
187
- if (nextNodeId) {
188
- instance.focusItem(event, nextNodeId);
181
+ if (instance.isItemExpanded(itemId)) {
182
+ const nextItemId = (0, _useTreeView.getNextItem)(instance, itemId);
183
+ if (nextItemId) {
184
+ instance.focusItem(event, nextItemId);
189
185
  event.preventDefault();
190
186
  }
191
187
  } else if (canToggleItemExpansion(itemId)) {
192
- instance.toggleNodeExpansion(event, itemId);
188
+ instance.toggleItemExpansion(event, itemId);
193
189
  event.preventDefault();
194
190
  }
195
191
  break;
@@ -199,8 +195,8 @@ const useTreeViewKeyboardNavigation = ({
199
195
  // If the focused item is collapsed and has a parent, we move the focus to this parent
200
196
  case key === 'ArrowLeft' && !isRTL || key === 'ArrowRight' && isRTL:
201
197
  {
202
- if (canToggleItemExpansion(itemId) && instance.isNodeExpanded(itemId)) {
203
- instance.toggleNodeExpansion(event, itemId);
198
+ if (canToggleItemExpansion(itemId) && instance.isItemExpanded(itemId)) {
199
+ instance.toggleItemExpansion(event, itemId);
204
200
  event.preventDefault();
205
201
  } else {
206
202
  const parent = instance.getNode(itemId).parentId;
@@ -212,13 +208,13 @@ const useTreeViewKeyboardNavigation = ({
212
208
  break;
213
209
  }
214
210
 
215
- // Focuses the first node in the tree
211
+ // Focuses the first item in the tree
216
212
  case key === 'Home':
217
213
  {
218
- instance.focusItem(event, (0, _useTreeView.getFirstNode)(instance));
214
+ instance.focusItem(event, (0, _useTreeView.getFirstItem)(instance));
219
215
 
220
216
  // Multi select behavior when pressing Ctrl + Shift + Home
221
- // Selects the focused node and all nodes up to the first node.
217
+ // Selects the focused item and all items up to the first item.
222
218
  if (canToggleItemSelection(itemId) && params.multiSelect && ctrlPressed && event.shiftKey) {
223
219
  instance.rangeSelectToFirst(event, itemId);
224
220
  }
@@ -229,7 +225,7 @@ const useTreeViewKeyboardNavigation = ({
229
225
  // Focuses the last item in the tree
230
226
  case key === 'End':
231
227
  {
232
- instance.focusItem(event, (0, _useTreeView.getLastNode)(instance));
228
+ instance.focusItem(event, (0, _useTreeView.getLastItem)(instance));
233
229
 
234
230
  // Multi select behavior when pressing Ctrl + Shirt + End
235
231
  // Selects the focused item and all the items down to the last item.
@@ -249,12 +245,12 @@ const useTreeViewKeyboardNavigation = ({
249
245
  }
250
246
 
251
247
  // Multi select behavior when pressing Ctrl + a
252
- // Selects all the nodes
248
+ // Selects all the items
253
249
  case key === 'a' && ctrlPressed && params.multiSelect && !params.disableSelection:
254
250
  {
255
251
  instance.selectRange(event, {
256
- start: (0, _useTreeView.getFirstNode)(instance),
257
- end: (0, _useTreeView.getLastNode)(instance)
252
+ start: (0, _useTreeView.getFirstItem)(instance),
253
+ end: (0, _useTreeView.getLastItem)(instance)
258
254
  });
259
255
  event.preventDefault();
260
256
  break;
@@ -264,9 +260,9 @@ const useTreeViewKeyboardNavigation = ({
264
260
  // TODO: Support typing multiple characters
265
261
  case !ctrlPressed && !event.shiftKey && isPrintableCharacter(key):
266
262
  {
267
- const matchingNode = getFirstMatchingItem(itemId, key);
268
- if (matchingNode != null) {
269
- instance.focusItem(event, matchingNode);
263
+ const matchingItem = getFirstMatchingItem(itemId, key);
264
+ if (matchingItem != null) {
265
+ instance.focusItem(event, matchingItem);
270
266
  event.preventDefault();
271
267
  }
272
268
  break;
@@ -16,13 +16,13 @@ const useTreeViewSelection = ({
16
16
  params,
17
17
  models
18
18
  }) => {
19
- const lastSelectedNode = React.useRef(null);
19
+ const lastSelectedItem = React.useRef(null);
20
20
  const lastSelectionWasRange = React.useRef(false);
21
21
  const currentRangeSelection = React.useRef([]);
22
22
  const setSelectedItems = (event, newSelectedItems) => {
23
23
  if (params.onItemSelectionToggle) {
24
24
  if (params.multiSelect) {
25
- const addedItems = newSelectedItems.filter(itemId => !instance.isNodeSelected(itemId));
25
+ const addedItems = newSelectedItems.filter(itemId => !instance.isItemSelected(itemId));
26
26
  const removedItems = models.selectedItems.value.filter(itemId => !newSelectedItems.includes(itemId));
27
27
  addedItems.forEach(itemId => {
28
28
  params.onItemSelectionToggle(event, itemId, true);
@@ -44,8 +44,8 @@ const useTreeViewSelection = ({
44
44
  }
45
45
  models.selectedItems.setControlledValue(newSelectedItems);
46
46
  };
47
- const isNodeSelected = itemId => Array.isArray(models.selectedItems.value) ? models.selectedItems.value.indexOf(itemId) !== -1 : models.selectedItems.value === itemId;
48
- const selectNode = (event, itemId, multiple = false) => {
47
+ const isItemSelected = itemId => Array.isArray(models.selectedItems.value) ? models.selectedItems.value.indexOf(itemId) !== -1 : models.selectedItems.value === itemId;
48
+ const selectItem = (event, itemId, multiple = false) => {
49
49
  if (params.disableSelection) {
50
50
  return;
51
51
  }
@@ -63,27 +63,27 @@ const useTreeViewSelection = ({
63
63
  const newSelected = params.multiSelect ? [itemId] : itemId;
64
64
  setSelectedItems(event, newSelected);
65
65
  }
66
- lastSelectedNode.current = itemId;
66
+ lastSelectedItem.current = itemId;
67
67
  lastSelectionWasRange.current = false;
68
68
  currentRangeSelection.current = [];
69
69
  };
70
- const getNodesInRange = (nodeAId, nodeBId) => {
71
- const [first, last] = (0, _useTreeViewSelection.findOrderInTremauxTree)(instance, nodeAId, nodeBId);
72
- const nodes = [first];
70
+ const getItemsInRange = (itemAId, itemBId) => {
71
+ const [first, last] = (0, _useTreeViewSelection.findOrderInTremauxTree)(instance, itemAId, itemBId);
72
+ const items = [first];
73
73
  let current = first;
74
74
  while (current !== last) {
75
- current = (0, _useTreeView.getNextNode)(instance, current);
76
- nodes.push(current);
75
+ current = (0, _useTreeView.getNextItem)(instance, current);
76
+ items.push(current);
77
77
  }
78
- return nodes;
78
+ return items;
79
79
  };
80
- const handleRangeArrowSelect = (event, nodes) => {
80
+ const handleRangeArrowSelect = (event, items) => {
81
81
  let base = models.selectedItems.value.slice();
82
82
  const {
83
83
  start,
84
84
  next,
85
85
  current
86
- } = nodes;
86
+ } = items;
87
87
  if (!next || !current) {
88
88
  return;
89
89
  }
@@ -104,32 +104,32 @@ const useTreeViewSelection = ({
104
104
  }
105
105
  setSelectedItems(event, base);
106
106
  };
107
- const handleRangeSelect = (event, nodes) => {
107
+ const handleRangeSelect = (event, items) => {
108
108
  let base = models.selectedItems.value.slice();
109
109
  const {
110
110
  start,
111
111
  end
112
- } = nodes;
113
- // If last selection was a range selection ignore nodes that were selected.
112
+ } = items;
113
+ // If last selection was a range selection ignore items that were selected.
114
114
  if (lastSelectionWasRange.current) {
115
115
  base = base.filter(id => currentRangeSelection.current.indexOf(id) === -1);
116
116
  }
117
- let range = getNodesInRange(start, end);
118
- range = range.filter(node => !instance.isNodeDisabled(node));
117
+ let range = getItemsInRange(start, end);
118
+ range = range.filter(item => !instance.isItemDisabled(item));
119
119
  currentRangeSelection.current = range;
120
120
  let newSelected = base.concat(range);
121
121
  newSelected = newSelected.filter((id, i) => newSelected.indexOf(id) === i);
122
122
  setSelectedItems(event, newSelected);
123
123
  };
124
- const selectRange = (event, nodes, stacked = false) => {
124
+ const selectRange = (event, items, stacked = false) => {
125
125
  if (params.disableSelection) {
126
126
  return;
127
127
  }
128
128
  const {
129
- start = lastSelectedNode.current,
129
+ start = lastSelectedItem.current,
130
130
  end,
131
131
  current
132
- } = nodes;
132
+ } = items;
133
133
  if (stacked) {
134
134
  handleRangeArrowSelect(event, {
135
135
  start,
@@ -145,28 +145,28 @@ const useTreeViewSelection = ({
145
145
  lastSelectionWasRange.current = true;
146
146
  };
147
147
  const rangeSelectToFirst = (event, itemId) => {
148
- if (!lastSelectedNode.current) {
149
- lastSelectedNode.current = itemId;
148
+ if (!lastSelectedItem.current) {
149
+ lastSelectedItem.current = itemId;
150
150
  }
151
- const start = lastSelectionWasRange.current ? lastSelectedNode.current : itemId;
151
+ const start = lastSelectionWasRange.current ? lastSelectedItem.current : itemId;
152
152
  instance.selectRange(event, {
153
153
  start,
154
- end: (0, _useTreeView.getFirstNode)(instance)
154
+ end: (0, _useTreeView.getFirstItem)(instance)
155
155
  });
156
156
  };
157
157
  const rangeSelectToLast = (event, itemId) => {
158
- if (!lastSelectedNode.current) {
159
- lastSelectedNode.current = itemId;
158
+ if (!lastSelectedItem.current) {
159
+ lastSelectedItem.current = itemId;
160
160
  }
161
- const start = lastSelectionWasRange.current ? lastSelectedNode.current : itemId;
161
+ const start = lastSelectionWasRange.current ? lastSelectedItem.current : itemId;
162
162
  instance.selectRange(event, {
163
163
  start,
164
- end: (0, _useTreeView.getLastNode)(instance)
164
+ end: (0, _useTreeView.getLastItem)(instance)
165
165
  });
166
166
  };
167
167
  (0, _useTreeView.populateInstance)(instance, {
168
- isNodeSelected,
169
- selectNode,
168
+ isItemSelected,
169
+ selectItem,
170
170
  selectRange,
171
171
  rangeSelectToLast,
172
172
  rangeSelectToFirst
@@ -188,11 +188,11 @@ useTreeViewSelection.models = {
188
188
  getDefaultValue: params => params.defaultSelectedItems
189
189
  }
190
190
  };
191
- const DEFAULT_SELECTED_NODES = [];
191
+ const DEFAULT_SELECTED_ITEMS = [];
192
192
  useTreeViewSelection.getDefaultizedParams = params => (0, _extends2.default)({}, params, {
193
193
  disableSelection: params.disableSelection ?? false,
194
194
  multiSelect: params.multiSelect ?? false,
195
- defaultSelectedItems: params.defaultSelectedItems ?? (params.multiSelect ? DEFAULT_SELECTED_NODES : null)
195
+ defaultSelectedItems: params.defaultSelectedItems ?? (params.multiSelect ? DEFAULT_SELECTED_ITEMS : null)
196
196
  });
197
197
  useTreeViewSelection.params = {
198
198
  disableSelection: true,
@@ -6,16 +6,16 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.findOrderInTremauxTree = void 0;
7
7
  /**
8
8
  * This is used to determine the start and end of a selection range so
9
- * we can get the nodes between the two border nodes.
9
+ * we can get the items between the two border items.
10
10
  *
11
- * It finds the nodes' common ancestor using
11
+ * It finds the items' common ancestor using
12
12
  * a naive implementation of a lowest common ancestor algorithm
13
13
  * (https://en.wikipedia.org/wiki/Lowest_common_ancestor).
14
- * Then compares the ancestor's 2 children that are ancestors of nodeA and NodeB
15
- * so we can compare their indexes to work out which node comes first in a depth first search.
14
+ * Then compares the ancestor's 2 children that are ancestors of itemA and ItemB
15
+ * so we can compare their indexes to work out which item comes first in a depth first search.
16
16
  * (https://en.wikipedia.org/wiki/Depth-first_search)
17
17
  *
18
- * Another way to put it is which node is shallower in a trémaux tree
18
+ * Another way to put it is which item is shallower in a trémaux tree
19
19
  * https://en.wikipedia.org/wiki/Tr%C3%A9maux_tree
20
20
  */
21
21
  const findOrderInTremauxTree = (instance, nodeAId, nodeBId) => {
@@ -3,51 +3,51 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.populatePublicAPI = exports.populateInstance = exports.getPreviousNode = exports.getNextNode = exports.getLastNode = exports.getFirstNode = void 0;
7
- const getPreviousNode = (instance, itemId) => {
8
- const item = instance.getNode(itemId);
9
- const siblings = instance.getNavigableChildrenIds(item.parentId);
6
+ exports.populatePublicAPI = exports.populateInstance = exports.getPreviousItem = exports.getNextItem = exports.getLastItem = exports.getFirstItem = void 0;
7
+ const getPreviousItem = (instance, itemId) => {
8
+ const node = instance.getNode(itemId);
9
+ const siblings = instance.getNavigableChildrenIds(node.parentId);
10
10
  const itemIndex = siblings.indexOf(itemId);
11
11
  if (itemIndex === 0) {
12
- return item.parentId;
12
+ return node.parentId;
13
13
  }
14
14
  let currentItem = siblings[itemIndex - 1];
15
- while (instance.isNodeExpanded(currentItem) && instance.getNavigableChildrenIds(currentItem).length > 0) {
15
+ while (instance.isItemExpanded(currentItem) && instance.getNavigableChildrenIds(currentItem).length > 0) {
16
16
  currentItem = instance.getNavigableChildrenIds(currentItem).pop();
17
17
  }
18
18
  return currentItem;
19
19
  };
20
- exports.getPreviousNode = getPreviousNode;
21
- const getNextNode = (instance, itemId) => {
20
+ exports.getPreviousItem = getPreviousItem;
21
+ const getNextItem = (instance, itemId) => {
22
22
  // If expanded get first child
23
- if (instance.isNodeExpanded(itemId) && instance.getNavigableChildrenIds(itemId).length > 0) {
23
+ if (instance.isItemExpanded(itemId) && instance.getNavigableChildrenIds(itemId).length > 0) {
24
24
  return instance.getNavigableChildrenIds(itemId)[0];
25
25
  }
26
- let item = instance.getNode(itemId);
27
- while (item != null) {
26
+ let node = instance.getNode(itemId);
27
+ while (node != null) {
28
28
  // Try to get next sibling
29
- const siblings = instance.getNavigableChildrenIds(item.parentId);
30
- const nextSibling = siblings[siblings.indexOf(item.id) + 1];
29
+ const siblings = instance.getNavigableChildrenIds(node.parentId);
30
+ const nextSibling = siblings[siblings.indexOf(node.id) + 1];
31
31
  if (nextSibling) {
32
32
  return nextSibling;
33
33
  }
34
34
 
35
35
  // If the sibling does not exist, go up a level to the parent and try again.
36
- item = instance.getNode(item.parentId);
36
+ node = instance.getNode(node.parentId);
37
37
  }
38
38
  return null;
39
39
  };
40
- exports.getNextNode = getNextNode;
41
- const getLastNode = instance => {
40
+ exports.getNextItem = getNextItem;
41
+ const getLastItem = instance => {
42
42
  let lastItem = instance.getNavigableChildrenIds(null).pop();
43
- while (instance.isNodeExpanded(lastItem)) {
43
+ while (instance.isItemExpanded(lastItem)) {
44
44
  lastItem = instance.getNavigableChildrenIds(lastItem).pop();
45
45
  }
46
46
  return lastItem;
47
47
  };
48
- exports.getLastNode = getLastNode;
49
- const getFirstNode = instance => instance.getNavigableChildrenIds(null)[0];
50
- exports.getFirstNode = getFirstNode;
48
+ exports.getLastItem = getLastItem;
49
+ const getFirstItem = instance => instance.getNavigableChildrenIds(null)[0];
50
+ exports.getFirstItem = getFirstItem;
51
51
  const populateInstance = (instance, methods) => {
52
52
  Object.assign(instance, methods);
53
53
  };
@@ -31,7 +31,7 @@ const useTreeViewModels = (plugins, props) => {
31
31
  return initialState;
32
32
  });
33
33
  const models = Object.fromEntries(Object.entries(modelsRef.current).map(([modelName, model]) => {
34
- const value = model.isControlled ? props[modelName] : modelsState[modelName];
34
+ const value = props[modelName] ?? modelsState[modelName];
35
35
  return [modelName, {
36
36
  value,
37
37
  setControlledValue: newValue => {
@@ -62,7 +62,7 @@ const useTreeViewModels = (plugins, props) => {
62
62
  if (!model.isControlled && defaultValue !== newDefaultValue) {
63
63
  console.error([`MUI X: A component is changing the default ${modelName} state of an uncontrolled TreeView after being initialized. ` + `To suppress this warning opt to use a controlled TreeView.`].join('\n'));
64
64
  }
65
- }, [JSON.stringify(defaultValue)]);
65
+ }, [JSON.stringify(newDefaultValue)]);
66
66
  });
67
67
  }
68
68
  /* eslint-enable react-hooks/rules-of-hooks, react-hooks/exhaustive-deps */
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@mui/x-tree-view",
3
- "version": "7.0.0",
4
- "description": "The community edition of the tree view components (MUI X).",
3
+ "version": "7.1.1",
4
+ "description": "The community edition of the Tree View components (MUI X).",
5
5
  "author": "MUI Team",
6
6
  "main": "./node/index.js",
7
7
  "license": "MIT",
@@ -1,2 +1,2 @@
1
1
  import { UseTreeItem2Parameters, UseTreeItem2ReturnValue } from './useTreeItem2.types';
2
- export declare const useTreeItem2: <TPlugins extends [import("../internals").UseTreeViewIdSignature, import("../internals").UseTreeViewNodesSignature, import("../internals").UseTreeViewExpansionSignature, import("../internals").UseTreeViewSelectionSignature, import("../internals").UseTreeViewFocusSignature, import("../internals").UseTreeViewKeyboardNavigationSignature, import("../internals").UseTreeViewIconsSignature] = [import("../internals").UseTreeViewIdSignature, import("../internals").UseTreeViewNodesSignature, import("../internals").UseTreeViewExpansionSignature, import("../internals").UseTreeViewSelectionSignature, import("../internals").UseTreeViewFocusSignature, import("../internals").UseTreeViewKeyboardNavigationSignature, import("../internals").UseTreeViewIconsSignature]>(parameters: UseTreeItem2Parameters) => UseTreeItem2ReturnValue<TPlugins>;
2
+ export declare const useTreeItem2: <TPlugins extends [import("../internals").UseTreeViewIdSignature, import("../internals").UseTreeViewItemsSignature, import("../internals").UseTreeViewExpansionSignature, import("../internals").UseTreeViewSelectionSignature, import("../internals").UseTreeViewFocusSignature, import("../internals").UseTreeViewKeyboardNavigationSignature, import("../internals").UseTreeViewIconsSignature] = [import("../internals").UseTreeViewIdSignature, import("../internals").UseTreeViewItemsSignature, import("../internals").UseTreeViewExpansionSignature, import("../internals").UseTreeViewSelectionSignature, import("../internals").UseTreeViewFocusSignature, import("../internals").UseTreeViewKeyboardNavigationSignature, import("../internals").UseTreeViewIconsSignature]>(parameters: UseTreeItem2Parameters) => UseTreeItem2ReturnValue<TPlugins>;
@@ -1,2 +0,0 @@
1
- export { useTreeViewJSXNodes } from './useTreeViewJSXNodes';
2
- export type { UseTreeViewJSXNodesSignature, UseTreeViewNodesParameters, UseTreeViewNodesDefaultizedParameters, } from './useTreeViewJSXNodes.types';
@@ -1 +0,0 @@
1
- export { useTreeViewJSXNodes } from './useTreeViewJSXNodes';
@@ -1,3 +0,0 @@
1
- import { TreeViewPlugin } from '../../models';
2
- import { UseTreeViewJSXNodesSignature } from './useTreeViewJSXNodes.types';
3
- export declare const useTreeViewJSXNodes: TreeViewPlugin<UseTreeViewJSXNodesSignature>;
@@ -1,18 +0,0 @@
1
- import { TreeViewNode, TreeViewPluginSignature } from '../../models';
2
- import { UseTreeViewNodesSignature } from '../useTreeViewNodes';
3
- import { UseTreeViewKeyboardNavigationSignature } from '../useTreeViewKeyboardNavigation';
4
- export interface UseTreeViewNodesInstance {
5
- insertJSXNode: (node: TreeViewNode) => void;
6
- removeJSXNode: (itemId: string) => void;
7
- mapFirstCharFromJSX: (itemId: string, firstChar: string) => () => void;
8
- }
9
- export interface UseTreeViewNodesParameters {
10
- }
11
- export interface UseTreeViewNodesDefaultizedParameters {
12
- }
13
- export type UseTreeViewJSXNodesSignature = TreeViewPluginSignature<{
14
- params: UseTreeViewNodesParameters;
15
- defaultizedParams: UseTreeViewNodesDefaultizedParameters;
16
- instance: UseTreeViewNodesInstance;
17
- dependantPlugins: [UseTreeViewNodesSignature, UseTreeViewKeyboardNavigationSignature];
18
- }>;
@@ -1,2 +0,0 @@
1
- export { useTreeViewNodes } from './useTreeViewNodes';
2
- export type { UseTreeViewNodesSignature, UseTreeViewNodesParameters, UseTreeViewNodesDefaultizedParameters, } from './useTreeViewNodes.types';
@@ -1 +0,0 @@
1
- export { useTreeViewNodes } from './useTreeViewNodes';
@@ -1,3 +0,0 @@
1
- import { TreeViewPlugin } from '../../models';
2
- import { UseTreeViewNodesSignature } from './useTreeViewNodes.types';
3
- export declare const useTreeViewNodes: TreeViewPlugin<UseTreeViewNodesSignature>;
@@ -1,88 +0,0 @@
1
- import { TreeViewNode, DefaultizedProps, TreeViewPluginSignature } from '../../models';
2
- import { TreeViewItemId } from '../../../models';
3
- interface TreeViewNodeProps {
4
- label: string;
5
- itemId: string;
6
- id: string | undefined;
7
- children?: TreeViewNodeProps[];
8
- }
9
- export interface UseTreeViewNodesInstance<R extends {}> {
10
- getNode: (itemId: string) => TreeViewNode;
11
- getItem: (itemId: string) => R;
12
- getNodesToRender: () => TreeViewNodeProps[];
13
- getChildrenIds: (itemId: string | null) => string[];
14
- getNavigableChildrenIds: (itemId: string | null) => string[];
15
- isNodeDisabled: (itemId: string | null) => itemId is string;
16
- }
17
- export interface UseTreeViewNodesPublicAPI<R extends {}> extends Pick<UseTreeViewNodesInstance<R>, 'getItem'> {
18
- }
19
- export interface UseTreeViewNodesParameters<R extends {}> {
20
- /**
21
- * If `true`, will allow focus on disabled items.
22
- * @default false
23
- */
24
- disabledItemsFocusable?: boolean;
25
- items: readonly R[];
26
- /**
27
- * Used to determine if a given item should be disabled.
28
- * @template R
29
- * @param {R} item The item to check.
30
- * @returns {boolean} `true` if the item should be disabled.
31
- */
32
- isItemDisabled?: (item: R) => boolean;
33
- /**
34
- * Used to determine the string label for a given item.
35
- *
36
- * @template R
37
- * @param {R} item The item to check.
38
- * @returns {string} The label of the item.
39
- * @default `(item) => item.label`
40
- */
41
- getItemLabel?: (item: R) => string;
42
- /**
43
- * Used to determine the string label for a given item.
44
- *
45
- * @template R
46
- * @param {R} item The item to check.
47
- * @returns {string} The id of the item.
48
- * @default `(item) => item.id`
49
- */
50
- getItemId?: (item: R) => TreeViewItemId;
51
- }
52
- export type UseTreeViewNodesDefaultizedParameters<R extends {}> = DefaultizedProps<UseTreeViewNodesParameters<R>, 'disabledItemsFocusable'>;
53
- interface UseTreeViewNodesEventLookup {
54
- removeNode: {
55
- params: {
56
- id: string;
57
- };
58
- };
59
- }
60
- export interface TreeViewItemIdAndChildren {
61
- id: TreeViewItemId;
62
- children?: TreeViewItemIdAndChildren[];
63
- }
64
- export interface UseTreeViewNodesState<R extends {}> {
65
- nodes: {
66
- nodeTree: TreeViewItemIdAndChildren[];
67
- nodeMap: TreeViewNodeMap;
68
- itemMap: TreeViewItemMap<R>;
69
- };
70
- }
71
- interface UseTreeViewNodesContextValue extends Pick<UseTreeViewNodesDefaultizedParameters<any>, 'disabledItemsFocusable'> {
72
- }
73
- export type UseTreeViewNodesSignature = TreeViewPluginSignature<{
74
- params: UseTreeViewNodesParameters<any>;
75
- defaultizedParams: UseTreeViewNodesDefaultizedParameters<any>;
76
- instance: UseTreeViewNodesInstance<any>;
77
- publicAPI: UseTreeViewNodesPublicAPI<any>;
78
- events: UseTreeViewNodesEventLookup;
79
- state: UseTreeViewNodesState<any>;
80
- contextValue: UseTreeViewNodesContextValue;
81
- }>;
82
- export type TreeViewNodeMap = {
83
- [itemId: string]: TreeViewNode;
84
- };
85
- export type TreeViewItemMap<R extends {}> = {
86
- [itemId: string]: R;
87
- };
88
- export {};
@@ -1 +0,0 @@
1
- export { useTreeViewJSXNodes } from './useTreeViewJSXNodes';
@@ -1 +0,0 @@
1
- export { useTreeViewNodes } from './useTreeViewNodes';
@@ -1,12 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- Object.defineProperty(exports, "useTreeViewJSXNodes", {
7
- enumerable: true,
8
- get: function () {
9
- return _useTreeViewJSXNodes.useTreeViewJSXNodes;
10
- }
11
- });
12
- var _useTreeViewJSXNodes = require("./useTreeViewJSXNodes");