@mui/x-tree-view 7.3.0 → 7.4.0

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 (66) hide show
  1. package/CHANGELOG.md +220 -7
  2. package/TreeItem/TreeItem.js +1 -2
  3. package/TreeItem/TreeItemContent.js +1 -2
  4. package/TreeItem/useTreeItemState.js +1 -3
  5. package/TreeItem2/TreeItem2.js +2 -3
  6. package/hooks/useTreeItem2Utils/useTreeItem2Utils.js +1 -3
  7. package/index.js +1 -1
  8. package/internals/TreeViewProvider/useTreeViewContext.d.ts +1 -1
  9. package/internals/hooks/useInstanceEventHandler.d.ts +2 -2
  10. package/internals/models/treeView.d.ts +0 -6
  11. package/internals/plugins/useTreeViewFocus/useTreeViewFocus.js +1 -4
  12. package/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js +31 -63
  13. package/internals/plugins/useTreeViewSelection/useTreeViewSelection.js +82 -94
  14. package/internals/plugins/useTreeViewSelection/useTreeViewSelection.types.d.ts +32 -5
  15. package/internals/plugins/useTreeViewSelection/useTreeViewSelection.utils.d.ts +9 -0
  16. package/internals/plugins/useTreeViewSelection/useTreeViewSelection.utils.js +21 -0
  17. package/internals/useTreeView/useTreeView.types.d.ts +1 -1
  18. package/internals/useTreeView/useTreeViewModels.d.ts +1 -1
  19. package/internals/utils/extractPluginParamsFromProps.d.ts +1 -1
  20. package/internals/utils/publishTreeViewEvent.d.ts +1 -1
  21. package/internals/utils/tree.d.ts +17 -1
  22. package/internals/utils/tree.js +34 -4
  23. package/modern/TreeItem/TreeItem.js +1 -2
  24. package/modern/TreeItem/TreeItemContent.js +1 -2
  25. package/modern/TreeItem/useTreeItemState.js +1 -3
  26. package/modern/TreeItem2/TreeItem2.js +2 -3
  27. package/modern/hooks/useTreeItem2Utils/useTreeItem2Utils.js +1 -3
  28. package/modern/index.js +1 -1
  29. package/modern/internals/plugins/useTreeViewFocus/useTreeViewFocus.js +1 -4
  30. package/modern/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js +31 -63
  31. package/modern/internals/plugins/useTreeViewSelection/useTreeViewSelection.js +82 -94
  32. package/modern/internals/plugins/useTreeViewSelection/useTreeViewSelection.utils.js +21 -0
  33. package/modern/internals/utils/tree.js +34 -4
  34. package/modern/useTreeItem2/useTreeItem2.js +3 -3
  35. package/node/RichTreeView/RichTreeView.js +1 -1
  36. package/node/SimpleTreeView/SimpleTreeView.js +1 -1
  37. package/node/TreeItem/TreeItem.js +1 -1
  38. package/node/TreeItem/TreeItemContent.js +1 -1
  39. package/node/TreeItem/useTreeItemState.js +1 -3
  40. package/node/TreeItem2/TreeItem2.js +2 -2
  41. package/node/TreeItem2Icon/TreeItem2Icon.js +1 -1
  42. package/node/TreeView/TreeView.js +1 -1
  43. package/node/hooks/useTreeItem2Utils/useTreeItem2Utils.js +1 -3
  44. package/node/hooks/useTreeViewApiRef.js +1 -1
  45. package/node/icons/icons.js +1 -1
  46. package/node/index.js +1 -1
  47. package/node/internals/TreeViewProvider/TreeViewChildrenItemProvider.js +1 -1
  48. package/node/internals/TreeViewProvider/TreeViewContext.js +1 -1
  49. package/node/internals/TreeViewProvider/TreeViewProvider.js +1 -1
  50. package/node/internals/TreeViewProvider/useTreeViewContext.js +1 -1
  51. package/node/internals/corePlugins/useTreeViewInstanceEvents/useTreeViewInstanceEvents.js +1 -1
  52. package/node/internals/hooks/useInstanceEventHandler.js +1 -1
  53. package/node/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js +1 -1
  54. package/node/internals/plugins/useTreeViewFocus/useTreeViewFocus.js +2 -5
  55. package/node/internals/plugins/useTreeViewId/useTreeViewId.js +1 -1
  56. package/node/internals/plugins/useTreeViewItems/useTreeViewItems.js +1 -1
  57. package/node/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.js +1 -1
  58. package/node/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js +32 -64
  59. package/node/internals/plugins/useTreeViewSelection/useTreeViewSelection.js +82 -94
  60. package/node/internals/plugins/useTreeViewSelection/useTreeViewSelection.utils.js +29 -0
  61. package/node/internals/useTreeView/useTreeView.js +1 -1
  62. package/node/internals/useTreeView/useTreeViewModels.js +1 -1
  63. package/node/internals/utils/tree.js +37 -5
  64. package/node/useTreeItem2/useTreeItem2.js +3 -3
  65. package/package.json +4 -6
  66. package/useTreeItem2/useTreeItem2.js +3 -3
@@ -5,14 +5,6 @@ import { getFirstNavigableItem, getLastNavigableItem, getNextNavigableItem, getP
5
5
  function isPrintableCharacter(string) {
6
6
  return !!string && string.length === 1 && !!string.match(/\S/);
7
7
  }
8
- function findNextFirstChar(firstChars, startIndex, char) {
9
- for (let i = startIndex; i < firstChars.length; i += 1) {
10
- if (char === firstChars[i]) {
11
- return i;
12
- }
13
- }
14
- return -1;
15
- }
16
8
  export const useTreeViewKeyboardNavigation = ({
17
9
  instance,
18
10
  params,
@@ -35,42 +27,29 @@ export const useTreeViewKeyboardNavigation = ({
35
27
  Object.values(state.items.itemMetaMap).forEach(processItem);
36
28
  firstCharMap.current = newFirstCharMap;
37
29
  }, [state.items.itemMetaMap, params.getItemId, instance]);
38
- const getFirstMatchingItem = (itemId, firstChar) => {
39
- let start;
40
- let index;
41
- const lowercaseChar = firstChar.toLowerCase();
42
- const firstCharIds = [];
43
- const firstChars = [];
44
- // This really only works since the ids are strings
45
- Object.keys(firstCharMap.current).forEach(mapItemId => {
46
- const map = instance.getItemMeta(mapItemId);
47
- const visible = map.parentId ? instance.isItemExpanded(map.parentId) : true;
48
- const shouldBeSkipped = params.disabledItemsFocusable ? false : instance.isItemDisabled(mapItemId);
49
- if (visible && !shouldBeSkipped) {
50
- firstCharIds.push(mapItemId);
51
- firstChars.push(firstCharMap.current[mapItemId]);
30
+ const getFirstMatchingItem = (itemId, query) => {
31
+ const cleanQuery = query.toLowerCase();
32
+ const getNextItem = itemIdToCheck => {
33
+ const nextItemId = getNextNavigableItem(instance, itemIdToCheck);
34
+ // We reached the end of the tree, check from the beginning
35
+ if (nextItemId === null) {
36
+ return getFirstNavigableItem(instance);
37
+ }
38
+ return nextItemId;
39
+ };
40
+ let matchingItemId = null;
41
+ let currentItemId = getNextItem(itemId);
42
+ const checkedItems = {};
43
+ // The "!checkedItems[currentItemId]" condition avoids an infinite loop when there is no matching item.
44
+ while (matchingItemId == null && !checkedItems[currentItemId]) {
45
+ if (firstCharMap.current[currentItemId] === cleanQuery) {
46
+ matchingItemId = currentItemId;
47
+ } else {
48
+ checkedItems[currentItemId] = true;
49
+ currentItemId = getNextItem(currentItemId);
52
50
  }
53
- });
54
-
55
- // Get start index for search based on position of currentItem
56
- start = firstCharIds.indexOf(itemId) + 1;
57
- if (start >= firstCharIds.length) {
58
- start = 0;
59
- }
60
-
61
- // Check remaining slots in the menu
62
- index = findNextFirstChar(firstChars, start, lowercaseChar);
63
-
64
- // If not found in remaining slots, check from beginning
65
- if (index === -1) {
66
- index = findNextFirstChar(firstChars, 0, lowercaseChar);
67
- }
68
-
69
- // If a match was found...
70
- if (index > -1) {
71
- return firstCharIds[index];
72
51
  }
73
- return null;
52
+ return matchingItemId;
74
53
  };
75
54
  const canToggleItemSelection = itemId => !params.disableSelection && !instance.isItemDisabled(itemId);
76
55
  const canToggleItemExpansion = itemId => {
@@ -95,9 +74,7 @@ export const useTreeViewKeyboardNavigation = ({
95
74
  {
96
75
  event.preventDefault();
97
76
  if (params.multiSelect && event.shiftKey) {
98
- instance.selectRange(event, {
99
- end: itemId
100
- });
77
+ instance.expandSelectionRange(event, itemId);
101
78
  } else if (params.multiSelect) {
102
79
  instance.selectItem(event, itemId, true);
103
80
  } else {
@@ -136,10 +113,7 @@ export const useTreeViewKeyboardNavigation = ({
136
113
  // Multi select behavior when pressing Shift + ArrowDown
137
114
  // Toggles the selection state of the next item
138
115
  if (params.multiSelect && event.shiftKey && canToggleItemSelection(nextItem)) {
139
- instance.selectRange(event, {
140
- end: nextItem,
141
- current: itemId
142
- }, true);
116
+ instance.selectItemFromArrowNavigation(event, itemId, nextItem);
143
117
  }
144
118
  }
145
119
  break;
@@ -156,10 +130,7 @@ export const useTreeViewKeyboardNavigation = ({
156
130
  // Multi select behavior when pressing Shift + ArrowUp
157
131
  // Toggles the selection state of the previous item
158
132
  if (params.multiSelect && event.shiftKey && canToggleItemSelection(previousItem)) {
159
- instance.selectRange(event, {
160
- end: previousItem,
161
- current: itemId
162
- }, true);
133
+ instance.selectItemFromArrowNavigation(event, itemId, previousItem);
163
134
  }
164
135
  }
165
136
  break;
@@ -202,12 +173,12 @@ export const useTreeViewKeyboardNavigation = ({
202
173
  // Focuses the first item in the tree
203
174
  case key === 'Home':
204
175
  {
205
- instance.focusItem(event, getFirstNavigableItem(instance));
206
-
207
176
  // Multi select behavior when pressing Ctrl + Shift + Home
208
177
  // Selects the focused item and all items up to the first item.
209
178
  if (canToggleItemSelection(itemId) && params.multiSelect && ctrlPressed && event.shiftKey) {
210
- instance.rangeSelectToFirst(event, itemId);
179
+ instance.selectRangeFromStartToItem(event, itemId);
180
+ } else {
181
+ instance.focusItem(event, getFirstNavigableItem(instance));
211
182
  }
212
183
  event.preventDefault();
213
184
  break;
@@ -216,12 +187,12 @@ export const useTreeViewKeyboardNavigation = ({
216
187
  // Focuses the last item in the tree
217
188
  case key === 'End':
218
189
  {
219
- instance.focusItem(event, getLastNavigableItem(instance));
220
-
221
190
  // Multi select behavior when pressing Ctrl + Shirt + End
222
191
  // Selects the focused item and all the items down to the last item.
223
192
  if (canToggleItemSelection(itemId) && params.multiSelect && ctrlPressed && event.shiftKey) {
224
- instance.rangeSelectToLast(event, itemId);
193
+ instance.selectRangeFromItemToEnd(event, itemId);
194
+ } else {
195
+ instance.focusItem(event, getLastNavigableItem(instance));
225
196
  }
226
197
  event.preventDefault();
227
198
  break;
@@ -239,10 +210,7 @@ export const useTreeViewKeyboardNavigation = ({
239
210
  // Selects all the items
240
211
  case key === 'a' && ctrlPressed && params.multiSelect && !params.disableSelection:
241
212
  {
242
- instance.selectRange(event, {
243
- start: getFirstNavigableItem(instance),
244
- end: getLastNavigableItem(instance)
245
- });
213
+ instance.selectAllNavigableItems(event);
246
214
  event.preventDefault();
247
215
  break;
248
216
  }
@@ -1,14 +1,25 @@
1
1
  import _extends from "@babel/runtime/helpers/esm/extends";
2
2
  import * as React from 'react';
3
- import { getFirstNavigableItem, getLastNavigableItem, getNavigableItemsInRange } from '../../utils/tree';
3
+ import { findOrderInTremauxTree, getAllNavigableItems, getFirstNavigableItem, getLastNavigableItem, getNonDisabledItemsInRange } from '../../utils/tree';
4
+ import { convertSelectedItemsToArray, getLookupFromArray } from './useTreeViewSelection.utils';
4
5
  export const useTreeViewSelection = ({
5
6
  instance,
6
7
  params,
7
8
  models
8
9
  }) => {
9
10
  const lastSelectedItem = React.useRef(null);
10
- const lastSelectionWasRange = React.useRef(false);
11
- const currentRangeSelection = React.useRef([]);
11
+ const lastSelectedRange = React.useRef({});
12
+ const selectedItemsMap = React.useMemo(() => {
13
+ const temp = new Map();
14
+ if (Array.isArray(models.selectedItems.value)) {
15
+ models.selectedItems.value.forEach(id => {
16
+ temp.set(id, true);
17
+ });
18
+ } else if (models.selectedItems.value != null) {
19
+ temp.set(models.selectedItems.value, true);
20
+ }
21
+ return temp;
22
+ }, [models.selectedItems.value]);
12
23
  const setSelectedItems = (event, newSelectedItems) => {
13
24
  if (params.onItemSelectionToggle) {
14
25
  if (params.multiSelect) {
@@ -34,115 +45,90 @@ export const useTreeViewSelection = ({
34
45
  }
35
46
  models.selectedItems.setControlledValue(newSelectedItems);
36
47
  };
37
- const isItemSelected = itemId => Array.isArray(models.selectedItems.value) ? models.selectedItems.value.indexOf(itemId) !== -1 : models.selectedItems.value === itemId;
48
+ const isItemSelected = itemId => selectedItemsMap.has(itemId);
38
49
  const selectItem = (event, itemId, multiple = false) => {
39
50
  if (params.disableSelection) {
40
51
  return;
41
52
  }
53
+ let newSelected;
42
54
  if (multiple) {
43
- if (Array.isArray(models.selectedItems.value)) {
44
- let newSelected;
45
- if (models.selectedItems.value.indexOf(itemId) !== -1) {
46
- newSelected = models.selectedItems.value.filter(id => id !== itemId);
47
- } else {
48
- newSelected = [itemId].concat(models.selectedItems.value);
49
- }
50
- setSelectedItems(event, newSelected);
55
+ const cleanSelectedItems = convertSelectedItemsToArray(models.selectedItems.value);
56
+ if (instance.isItemSelected(itemId)) {
57
+ newSelected = cleanSelectedItems.filter(id => id !== itemId);
58
+ } else {
59
+ newSelected = [itemId].concat(cleanSelectedItems);
51
60
  }
52
61
  } else {
53
- const newSelected = params.multiSelect ? [itemId] : itemId;
54
- setSelectedItems(event, newSelected);
62
+ newSelected = params.multiSelect ? [itemId] : itemId;
55
63
  }
64
+ setSelectedItems(event, newSelected);
56
65
  lastSelectedItem.current = itemId;
57
- lastSelectionWasRange.current = false;
58
- currentRangeSelection.current = [];
66
+ lastSelectedRange.current = {};
59
67
  };
60
- const handleRangeArrowSelect = (event, items) => {
61
- let base = models.selectedItems.value.slice();
62
- const {
63
- start,
64
- next,
65
- current
66
- } = items;
67
- if (!next || !current) {
68
+ const selectRange = (event, [start, end]) => {
69
+ if (params.disableSelection || !params.multiSelect) {
68
70
  return;
69
71
  }
70
- if (currentRangeSelection.current.indexOf(current) === -1) {
71
- currentRangeSelection.current = [];
72
+ let newSelectedItems = convertSelectedItemsToArray(models.selectedItems.value).slice();
73
+
74
+ // If the last selection was a range selection,
75
+ // remove the items that were part of the last range from the model
76
+ if (Object.keys(lastSelectedRange.current).length > 0) {
77
+ newSelectedItems = newSelectedItems.filter(id => !lastSelectedRange.current[id]);
72
78
  }
73
- if (lastSelectionWasRange.current) {
74
- if (currentRangeSelection.current.indexOf(next) !== -1) {
75
- base = base.filter(id => id === start || id !== current);
76
- currentRangeSelection.current = currentRangeSelection.current.filter(id => id === start || id !== current);
77
- } else {
78
- base.push(next);
79
- currentRangeSelection.current.push(next);
80
- }
81
- } else {
82
- base.push(next);
83
- currentRangeSelection.current.push(current, next);
84
- }
85
- setSelectedItems(event, base);
79
+
80
+ // Add to the model the items that are part of the new range and not already part of the model.
81
+ const selectedItemsLookup = getLookupFromArray(newSelectedItems);
82
+ const range = getNonDisabledItemsInRange(instance, start, end);
83
+ const itemsToAddToModel = range.filter(id => !selectedItemsLookup[id]);
84
+ newSelectedItems = newSelectedItems.concat(itemsToAddToModel);
85
+ setSelectedItems(event, newSelectedItems);
86
+ lastSelectedRange.current = getLookupFromArray(range);
86
87
  };
87
- const handleRangeSelect = (event, items) => {
88
- let base = models.selectedItems.value.slice();
89
- const {
90
- start,
91
- end
92
- } = items;
93
- // If last selection was a range selection ignore items that were selected.
94
- if (lastSelectionWasRange.current) {
95
- base = base.filter(id => currentRangeSelection.current.indexOf(id) === -1);
88
+ const expandSelectionRange = (event, itemId) => {
89
+ if (lastSelectedItem.current != null) {
90
+ const [start, end] = findOrderInTremauxTree(instance, itemId, lastSelectedItem.current);
91
+ selectRange(event, [start, end]);
96
92
  }
97
- let range = getNavigableItemsInRange(instance, start, end);
98
- range = range.filter(item => !instance.isItemDisabled(item));
99
- currentRangeSelection.current = range;
100
- let newSelected = base.concat(range);
101
- newSelected = newSelected.filter((id, i) => newSelected.indexOf(id) === i);
102
- setSelectedItems(event, newSelected);
103
93
  };
104
- const selectRange = (event, items, stacked = false) => {
105
- if (params.disableSelection) {
94
+ const selectRangeFromStartToItem = (event, itemId) => {
95
+ selectRange(event, [getFirstNavigableItem(instance), itemId]);
96
+ };
97
+ const selectRangeFromItemToEnd = (event, itemId) => {
98
+ selectRange(event, [itemId, getLastNavigableItem(instance)]);
99
+ };
100
+ const selectAllNavigableItems = event => {
101
+ if (params.disableSelection || !params.multiSelect) {
106
102
  return;
107
103
  }
108
- const {
109
- start = lastSelectedItem.current,
110
- end,
111
- current
112
- } = items;
113
- if (stacked) {
114
- handleRangeArrowSelect(event, {
115
- start,
116
- next: end,
117
- current
118
- });
119
- } else if (start != null && end != null) {
120
- handleRangeSelect(event, {
121
- start,
122
- end
123
- });
124
- }
125
- lastSelectionWasRange.current = true;
104
+ const navigableItems = getAllNavigableItems(instance);
105
+ setSelectedItems(event, navigableItems);
106
+ lastSelectedRange.current = getLookupFromArray(navigableItems);
126
107
  };
127
- const rangeSelectToFirst = (event, itemId) => {
128
- if (!lastSelectedItem.current) {
129
- lastSelectedItem.current = itemId;
108
+ const selectItemFromArrowNavigation = (event, currentItem, nextItem) => {
109
+ if (params.disableSelection || !params.multiSelect) {
110
+ return;
130
111
  }
131
- const start = lastSelectionWasRange.current ? lastSelectedItem.current : itemId;
132
- instance.selectRange(event, {
133
- start,
134
- end: getFirstNavigableItem(instance)
135
- });
136
- };
137
- const rangeSelectToLast = (event, itemId) => {
138
- if (!lastSelectedItem.current) {
139
- lastSelectedItem.current = itemId;
112
+ let newSelectedItems = convertSelectedItemsToArray(models.selectedItems.value).slice();
113
+ if (Object.keys(lastSelectedRange.current).length === 0) {
114
+ newSelectedItems.push(nextItem);
115
+ lastSelectedRange.current = {
116
+ [currentItem]: true,
117
+ [nextItem]: true
118
+ };
119
+ } else {
120
+ if (!lastSelectedRange.current[currentItem]) {
121
+ lastSelectedRange.current = {};
122
+ }
123
+ if (lastSelectedRange.current[nextItem]) {
124
+ newSelectedItems = newSelectedItems.filter(id => id !== currentItem);
125
+ delete lastSelectedRange.current[currentItem];
126
+ } else {
127
+ newSelectedItems.push(nextItem);
128
+ lastSelectedRange.current[nextItem] = true;
129
+ }
140
130
  }
141
- const start = lastSelectionWasRange.current ? lastSelectedItem.current : itemId;
142
- instance.selectRange(event, {
143
- start,
144
- end: getLastNavigableItem(instance)
145
- });
131
+ setSelectedItems(event, newSelectedItems);
146
132
  };
147
133
  return {
148
134
  getRootProps: () => ({
@@ -151,9 +137,11 @@ export const useTreeViewSelection = ({
151
137
  instance: {
152
138
  isItemSelected,
153
139
  selectItem,
154
- selectRange,
155
- rangeSelectToLast,
156
- rangeSelectToFirst
140
+ selectAllNavigableItems,
141
+ expandSelectionRange,
142
+ selectRangeFromStartToItem,
143
+ selectRangeFromItemToEnd,
144
+ selectItemFromArrowNavigation
157
145
  },
158
146
  contextValue: {
159
147
  selection: {
@@ -0,0 +1,21 @@
1
+ /**
2
+ * Transform the `selectedItems` model to be an array if it was a string or null.
3
+ * @param {string[] | string | null} model The raw model.
4
+ * @returns {string[]} The converted model.
5
+ */
6
+ export const convertSelectedItemsToArray = model => {
7
+ if (Array.isArray(model)) {
8
+ return model;
9
+ }
10
+ if (model != null) {
11
+ return [model];
12
+ }
13
+ return [];
14
+ };
15
+ export const getLookupFromArray = array => {
16
+ const lookup = {};
17
+ array.forEach(itemId => {
18
+ lookup[itemId] = true;
19
+ });
20
+ return lookup;
21
+ };
@@ -84,7 +84,7 @@ export const getFirstNavigableItem = instance => instance.getItemOrderedChildren
84
84
  * Another way to put it is which item is shallower in a trémaux tree
85
85
  * https://en.wikipedia.org/wiki/Tr%C3%A9maux_tree
86
86
  */
87
- const findOrderInTremauxTree = (instance, itemAId, itemBId) => {
87
+ export const findOrderInTremauxTree = (instance, itemAId, itemBId) => {
88
88
  if (itemAId === itemBId) {
89
89
  return [itemAId, itemBId];
90
90
  }
@@ -125,13 +125,43 @@ const findOrderInTremauxTree = (instance, itemAId, itemBId) => {
125
125
  const bSide = bFamily[bFamily.indexOf(commonAncestor) - 1];
126
126
  return ancestorFamily.indexOf(aSide) < ancestorFamily.indexOf(bSide) ? [itemAId, itemBId] : [itemBId, itemAId];
127
127
  };
128
- export const getNavigableItemsInRange = (instance, itemAId, itemBId) => {
128
+ export const getNonDisabledItemsInRange = (instance, itemAId, itemBId) => {
129
+ const getNextItem = itemId => {
130
+ // If the item is expanded and has some children, return the first of them.
131
+ if (instance.isItemExpandable(itemId) && instance.isItemExpanded(itemId)) {
132
+ return instance.getItemOrderedChildrenIds(itemId)[0];
133
+ }
134
+ let itemMeta = instance.getItemMeta(itemId);
135
+ while (itemMeta != null) {
136
+ // Try to find the first navigable sibling after the current item.
137
+ const siblings = instance.getItemOrderedChildrenIds(itemMeta.parentId);
138
+ const currentItemIndex = instance.getItemIndex(itemMeta.id);
139
+ if (currentItemIndex < siblings.length - 1) {
140
+ return siblings[currentItemIndex + 1];
141
+ }
142
+
143
+ // If the item is the last of its siblings, go up a level to the parent and try again.
144
+ itemMeta = instance.getItemMeta(itemMeta.parentId);
145
+ }
146
+ throw new Error('Invalid range');
147
+ };
129
148
  const [first, last] = findOrderInTremauxTree(instance, itemAId, itemBId);
130
149
  const items = [first];
131
150
  let current = first;
132
151
  while (current !== last) {
133
- current = getNextNavigableItem(instance, current);
134
- items.push(current);
152
+ current = getNextItem(current);
153
+ if (!instance.isItemDisabled(current)) {
154
+ items.push(current);
155
+ }
135
156
  }
136
157
  return items;
158
+ };
159
+ export const getAllNavigableItems = instance => {
160
+ let item = getFirstNavigableItem(instance);
161
+ const navigableItems = [];
162
+ while (item != null) {
163
+ navigableItems.push(item);
164
+ item = getNextNavigableItem(instance, item);
165
+ }
166
+ return navigableItems;
137
167
  };
@@ -105,7 +105,7 @@ export const useTreeItem2 = parameters => {
105
105
  });
106
106
  };
107
107
  const getContentProps = (externalProps = {}) => {
108
- const externalEventHandlers = _extends({}, extractEventHandlers(parameters), extractEventHandlers(externalProps));
108
+ const externalEventHandlers = extractEventHandlers(externalProps);
109
109
  return _extends({}, externalEventHandlers, externalProps, {
110
110
  ref: contentRef,
111
111
  onClick: createContentHandleClick(externalEventHandlers),
@@ -120,11 +120,11 @@ export const useTreeItem2 = parameters => {
120
120
  }, externalProps);
121
121
  };
122
122
  const getIconContainerProps = (externalProps = {}) => {
123
- const externalEventHandlers = _extends({}, extractEventHandlers(parameters), extractEventHandlers(externalProps));
123
+ const externalEventHandlers = extractEventHandlers(externalProps);
124
124
  return _extends({}, externalEventHandlers, externalProps);
125
125
  };
126
126
  const getGroupTransitionProps = (externalProps = {}) => {
127
- const externalEventHandlers = _extends({}, extractEventHandlers(parameters), extractEventHandlers(externalProps));
127
+ const externalEventHandlers = extractEventHandlers(externalProps);
128
128
  return _extends({}, externalEventHandlers, {
129
129
  unmountOnExit: true,
130
130
  component: 'ul',
@@ -20,7 +20,7 @@ var _warning = require("../internals/utils/warning");
20
20
  var _extractPluginParamsFromProps = require("../internals/utils/extractPluginParamsFromProps");
21
21
  var _jsxRuntime = require("react/jsx-runtime");
22
22
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
23
- function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
23
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
24
24
  const useUtilityClasses = ownerState => {
25
25
  const {
26
26
  classes
@@ -19,7 +19,7 @@ var _warning = require("../internals/utils/warning");
19
19
  var _extractPluginParamsFromProps = require("../internals/utils/extractPluginParamsFromProps");
20
20
  var _jsxRuntime = require("react/jsx-runtime");
21
21
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
22
- function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
22
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
23
23
  const useUtilityClasses = ownerState => {
24
24
  const {
25
25
  classes
@@ -28,7 +28,7 @@ const _excluded = ["children", "className", "slots", "slotProps", "ContentCompon
28
28
  _excluded3 = ["ownerState"],
29
29
  _excluded4 = ["ownerState"];
30
30
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
31
- function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
31
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
32
32
  const useUtilityClasses = ownerState => {
33
33
  const {
34
34
  classes
@@ -14,7 +14,7 @@ var _useTreeItemState = require("./useTreeItemState");
14
14
  var _jsxRuntime = require("react/jsx-runtime");
15
15
  const _excluded = ["classes", "className", "displayIcon", "expansionIcon", "icon", "label", "itemId", "onClick", "onMouseDown"];
16
16
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
17
- function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
17
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
18
18
  /**
19
19
  * @ignore - internal component.
20
20
  */
@@ -38,9 +38,7 @@ function useTreeItemState(itemId) {
38
38
  const multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);
39
39
  if (multiple) {
40
40
  if (event.shiftKey) {
41
- instance.selectRange(event, {
42
- end: itemId
43
- });
41
+ instance.expandSelectionRange(event, itemId);
44
42
  } else {
45
43
  instance.selectItem(event, itemId, true);
46
44
  }
@@ -23,7 +23,7 @@ var _TreeItem2Provider = require("../TreeItem2Provider");
23
23
  var _jsxRuntime = require("react/jsx-runtime");
24
24
  const _excluded = ["id", "itemId", "label", "disabled", "children", "slots", "slotProps"];
25
25
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
26
- function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
26
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
27
27
  const TreeItem2Root = exports.TreeItem2Root = (0, _styles.styled)('li', {
28
28
  name: 'MuiTreeItem2',
29
29
  slot: 'Root',
@@ -130,7 +130,7 @@ const TreeItem2IconContainer = exports.TreeItem2IconContainer = (0, _styles.styl
130
130
  }
131
131
  });
132
132
  const TreeItem2GroupTransition = exports.TreeItem2GroupTransition = (0, _styles.styled)(_Collapse.default, {
133
- name: 'MuiTreeItem2GroupTransition',
133
+ name: 'MuiTreeItem2',
134
134
  slot: 'GroupTransition',
135
135
  overridesResolver: (props, styles) => styles.groupTransition
136
136
  })({
@@ -13,7 +13,7 @@ var _useTreeViewContext = require("../internals/TreeViewProvider/useTreeViewCont
13
13
  var _icons = require("../icons");
14
14
  var _jsxRuntime = require("react/jsx-runtime");
15
15
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
16
- function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
16
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
17
17
  function TreeItem2Icon(props) {
18
18
  const {
19
19
  slots,
@@ -14,7 +14,7 @@ var _treeViewClasses = require("./treeViewClasses");
14
14
  var _SimpleTreeView = require("../SimpleTreeView");
15
15
  var _jsxRuntime = require("react/jsx-runtime");
16
16
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
17
- function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
17
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
18
18
  const useUtilityClasses = ownerState => {
19
19
  const {
20
20
  classes
@@ -46,9 +46,7 @@ const useTreeItem2Utils = ({
46
46
  const multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);
47
47
  if (multiple) {
48
48
  if (event.shiftKey) {
49
- instance.selectRange(event, {
50
- end: itemId
51
- });
49
+ instance.expandSelectionRange(event, itemId);
52
50
  } else {
53
51
  instance.selectItem(event, itemId, true);
54
52
  }
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.useTreeViewApiRef = void 0;
7
7
  var React = _interopRequireWildcard(require("react"));
8
8
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
9
- function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
9
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
10
10
  /**
11
11
  * Hook that instantiates a [[TreeViewApiRef]].
12
12
  */
@@ -8,7 +8,7 @@ var _utils = require("@mui/material/utils");
8
8
  var React = _interopRequireWildcard(require("react"));
9
9
  var _jsxRuntime = require("react/jsx-runtime");
10
10
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
11
- function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
11
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
12
12
  const TreeViewExpandIcon = exports.TreeViewExpandIcon = (0, _utils.createSvgIcon)( /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
13
13
  d: "M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
14
14
  }), 'TreeViewExpandIcon');
package/node/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/x-tree-view v7.3.0
2
+ * @mui/x-tree-view v7.4.0
3
3
  *
4
4
  * @license MIT
5
5
  * This source code is licensed under the MIT license found in the