@mui/x-tree-view 8.11.0 → 8.11.2

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 (158) hide show
  1. package/CHANGELOG.md +169 -0
  2. package/RichTreeView/RichTreeView.js +16 -15
  3. package/RichTreeView/RichTreeView.types.d.ts +3 -2
  4. package/SimpleTreeView/SimpleTreeView.js +10 -9
  5. package/SimpleTreeView/SimpleTreeView.types.d.ts +3 -2
  6. package/TreeItem/TreeItem.d.ts +1 -1
  7. package/TreeItemProvider/TreeItemProvider.js +3 -3
  8. package/esm/RichTreeView/RichTreeView.js +16 -15
  9. package/esm/RichTreeView/RichTreeView.types.d.ts +3 -2
  10. package/esm/SimpleTreeView/SimpleTreeView.js +10 -9
  11. package/esm/SimpleTreeView/SimpleTreeView.types.d.ts +3 -2
  12. package/esm/TreeItem/TreeItem.d.ts +1 -1
  13. package/esm/TreeItemProvider/TreeItemProvider.js +3 -3
  14. package/esm/hooks/index.d.ts +2 -1
  15. package/esm/hooks/index.js +2 -1
  16. package/esm/hooks/useApplyPropagationToSelectedItemsOnMount.d.ts +53 -0
  17. package/esm/hooks/useApplyPropagationToSelectedItemsOnMount.js +80 -0
  18. package/esm/hooks/useTreeItemModel.js +3 -3
  19. package/esm/hooks/useTreeItemUtils/useTreeItemUtils.js +24 -25
  20. package/esm/index.js +1 -1
  21. package/esm/internals/TreeViewProvider/TreeViewChildrenItemProvider.js +2 -2
  22. package/esm/internals/TreeViewProvider/TreeViewProvider.types.d.ts +3 -3
  23. package/esm/internals/components/RichTreeViewItems.js +5 -5
  24. package/esm/internals/corePlugins/useTreeViewId/index.d.ts +2 -1
  25. package/esm/internals/corePlugins/useTreeViewId/index.js +2 -1
  26. package/esm/internals/corePlugins/useTreeViewId/useTreeViewId.js +10 -13
  27. package/esm/internals/corePlugins/useTreeViewId/useTreeViewId.selectors.d.ts +8 -34
  28. package/esm/internals/corePlugins/useTreeViewId/useTreeViewId.selectors.js +9 -9
  29. package/esm/internals/index.d.ts +6 -14
  30. package/esm/internals/index.js +6 -13
  31. package/esm/internals/models/plugin.d.ts +2 -3
  32. package/esm/internals/models/treeView.d.ts +4 -6
  33. package/esm/internals/plugins/useTreeViewExpansion/index.d.ts +2 -1
  34. package/esm/internals/plugins/useTreeViewExpansion/index.js +2 -1
  35. package/esm/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js +26 -30
  36. package/esm/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.selectors.d.ts +24 -316
  37. package/esm/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.selectors.js +27 -38
  38. package/esm/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.types.d.ts +7 -1
  39. package/esm/internals/plugins/useTreeViewFocus/index.d.ts +2 -1
  40. package/esm/internals/plugins/useTreeViewFocus/index.js +2 -1
  41. package/esm/internals/plugins/useTreeViewFocus/useTreeViewFocus.js +17 -21
  42. package/esm/internals/plugins/useTreeViewFocus/useTreeViewFocus.selectors.d.ts +20 -628
  43. package/esm/internals/plugins/useTreeViewFocus/useTreeViewFocus.selectors.js +25 -37
  44. package/esm/internals/plugins/useTreeViewItems/index.d.ts +2 -1
  45. package/esm/internals/plugins/useTreeViewItems/index.js +2 -1
  46. package/esm/internals/plugins/useTreeViewItems/useTreeViewItems.js +82 -102
  47. package/esm/internals/plugins/useTreeViewItems/useTreeViewItems.selectors.d.ts +52 -1142
  48. package/esm/internals/plugins/useTreeViewItems/useTreeViewItems.selectors.js +58 -98
  49. package/esm/internals/plugins/useTreeViewItems/useTreeViewItems.utils.d.ts +1 -1
  50. package/esm/internals/plugins/useTreeViewItems/useTreeViewItems.utils.js +1 -1
  51. package/esm/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.js +32 -42
  52. package/esm/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js +22 -22
  53. package/esm/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.types.d.ts +2 -0
  54. package/esm/internals/plugins/useTreeViewLabel/index.d.ts +2 -1
  55. package/esm/internals/plugins/useTreeViewLabel/index.js +2 -1
  56. package/esm/internals/plugins/useTreeViewLabel/useTreeViewLabel.itemPlugin.js +4 -4
  57. package/esm/internals/plugins/useTreeViewLabel/useTreeViewLabel.js +17 -25
  58. package/esm/internals/plugins/useTreeViewLabel/useTreeViewLabel.selectors.d.ts +14 -100
  59. package/esm/internals/plugins/useTreeViewLabel/useTreeViewLabel.selectors.js +24 -34
  60. package/esm/internals/plugins/useTreeViewLazyLoading/index.d.ts +2 -1
  61. package/esm/internals/plugins/useTreeViewLazyLoading/index.js +1 -1
  62. package/esm/internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.selectors.d.ts +18 -245
  63. package/esm/internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.selectors.js +15 -27
  64. package/esm/internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.types.d.ts +20 -6
  65. package/esm/internals/plugins/useTreeViewSelection/index.d.ts +2 -1
  66. package/esm/internals/plugins/useTreeViewSelection/index.js +2 -1
  67. package/esm/internals/plugins/useTreeViewSelection/useTreeViewSelection.itemPlugin.js +25 -38
  68. package/esm/internals/plugins/useTreeViewSelection/useTreeViewSelection.js +30 -34
  69. package/esm/internals/plugins/useTreeViewSelection/useTreeViewSelection.selectors.d.ts +38 -517
  70. package/esm/internals/plugins/useTreeViewSelection/useTreeViewSelection.selectors.js +46 -71
  71. package/esm/internals/plugins/useTreeViewSelection/useTreeViewSelection.types.d.ts +1 -0
  72. package/esm/internals/plugins/useTreeViewSelection/useTreeViewSelection.utils.js +10 -10
  73. package/esm/internals/useTreeView/useTreeView.d.ts +1 -1
  74. package/esm/internals/useTreeView/useTreeView.js +11 -18
  75. package/esm/internals/useTreeView/useTreeView.types.d.ts +1 -1
  76. package/esm/internals/useTreeView/useTreeViewBuildContext.d.ts +2 -3
  77. package/esm/internals/utils/tree.js +33 -33
  78. package/esm/useTreeItem/useTreeItem.js +14 -14
  79. package/esm/useTreeItem/useTreeItem.types.d.ts +2 -1
  80. package/hooks/index.d.ts +2 -1
  81. package/hooks/index.js +8 -1
  82. package/hooks/useApplyPropagationToSelectedItemsOnMount.d.ts +53 -0
  83. package/hooks/useApplyPropagationToSelectedItemsOnMount.js +87 -0
  84. package/hooks/useTreeItemModel.js +3 -3
  85. package/hooks/useTreeItemUtils/useTreeItemUtils.js +18 -19
  86. package/index.js +1 -1
  87. package/internals/TreeViewProvider/TreeViewChildrenItemProvider.js +1 -1
  88. package/internals/TreeViewProvider/TreeViewProvider.types.d.ts +3 -3
  89. package/internals/components/RichTreeViewItems.js +5 -5
  90. package/internals/corePlugins/useTreeViewId/index.d.ts +2 -1
  91. package/internals/corePlugins/useTreeViewId/index.js +8 -1
  92. package/internals/corePlugins/useTreeViewId/useTreeViewId.js +9 -12
  93. package/internals/corePlugins/useTreeViewId/useTreeViewId.selectors.d.ts +8 -34
  94. package/internals/corePlugins/useTreeViewId/useTreeViewId.selectors.js +10 -10
  95. package/internals/index.d.ts +6 -14
  96. package/internals/index.js +12 -73
  97. package/internals/models/plugin.d.ts +2 -3
  98. package/internals/models/treeView.d.ts +4 -6
  99. package/internals/plugins/useTreeViewExpansion/index.d.ts +2 -1
  100. package/internals/plugins/useTreeViewExpansion/index.js +8 -1
  101. package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js +24 -28
  102. package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.selectors.d.ts +24 -316
  103. package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.selectors.js +27 -38
  104. package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.types.d.ts +7 -1
  105. package/internals/plugins/useTreeViewFocus/index.d.ts +2 -1
  106. package/internals/plugins/useTreeViewFocus/index.js +8 -1
  107. package/internals/plugins/useTreeViewFocus/useTreeViewFocus.js +14 -18
  108. package/internals/plugins/useTreeViewFocus/useTreeViewFocus.selectors.d.ts +20 -628
  109. package/internals/plugins/useTreeViewFocus/useTreeViewFocus.selectors.js +23 -35
  110. package/internals/plugins/useTreeViewItems/index.d.ts +2 -1
  111. package/internals/plugins/useTreeViewItems/index.js +8 -1
  112. package/internals/plugins/useTreeViewItems/useTreeViewItems.js +81 -101
  113. package/internals/plugins/useTreeViewItems/useTreeViewItems.selectors.d.ts +52 -1142
  114. package/internals/plugins/useTreeViewItems/useTreeViewItems.selectors.js +59 -99
  115. package/internals/plugins/useTreeViewItems/useTreeViewItems.utils.d.ts +1 -1
  116. package/internals/plugins/useTreeViewItems/useTreeViewItems.utils.js +1 -1
  117. package/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.js +32 -42
  118. package/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js +18 -18
  119. package/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.types.d.ts +2 -0
  120. package/internals/plugins/useTreeViewLabel/index.d.ts +2 -1
  121. package/internals/plugins/useTreeViewLabel/index.js +8 -1
  122. package/internals/plugins/useTreeViewLabel/useTreeViewLabel.itemPlugin.js +3 -3
  123. package/internals/plugins/useTreeViewLabel/useTreeViewLabel.js +16 -24
  124. package/internals/plugins/useTreeViewLabel/useTreeViewLabel.selectors.d.ts +14 -100
  125. package/internals/plugins/useTreeViewLabel/useTreeViewLabel.selectors.js +24 -34
  126. package/internals/plugins/useTreeViewLazyLoading/index.d.ts +2 -1
  127. package/internals/plugins/useTreeViewLazyLoading/index.js +8 -1
  128. package/internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.selectors.d.ts +18 -245
  129. package/internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.selectors.js +16 -28
  130. package/internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.types.d.ts +20 -6
  131. package/internals/plugins/useTreeViewSelection/index.d.ts +2 -1
  132. package/internals/plugins/useTreeViewSelection/index.js +8 -1
  133. package/internals/plugins/useTreeViewSelection/useTreeViewSelection.itemPlugin.js +23 -37
  134. package/internals/plugins/useTreeViewSelection/useTreeViewSelection.js +29 -33
  135. package/internals/plugins/useTreeViewSelection/useTreeViewSelection.selectors.d.ts +38 -517
  136. package/internals/plugins/useTreeViewSelection/useTreeViewSelection.selectors.js +46 -71
  137. package/internals/plugins/useTreeViewSelection/useTreeViewSelection.types.d.ts +1 -0
  138. package/internals/plugins/useTreeViewSelection/useTreeViewSelection.utils.js +8 -8
  139. package/internals/useTreeView/useTreeView.d.ts +1 -1
  140. package/internals/useTreeView/useTreeView.js +11 -18
  141. package/internals/useTreeView/useTreeView.types.d.ts +1 -1
  142. package/internals/useTreeView/useTreeViewBuildContext.d.ts +2 -3
  143. package/internals/utils/tree.js +31 -31
  144. package/package.json +13 -14
  145. package/useTreeItem/useTreeItem.js +14 -14
  146. package/useTreeItem/useTreeItem.types.d.ts +2 -1
  147. package/esm/internals/hooks/useSelector.d.ts +0 -4
  148. package/esm/internals/hooks/useSelector.js +0 -8
  149. package/esm/internals/utils/TreeViewStore.d.ts +0 -12
  150. package/esm/internals/utils/TreeViewStore.js +0 -22
  151. package/esm/internals/utils/selectors.d.ts +0 -21
  152. package/esm/internals/utils/selectors.js +0 -51
  153. package/internals/hooks/useSelector.d.ts +0 -4
  154. package/internals/hooks/useSelector.js +0 -16
  155. package/internals/utils/TreeViewStore.d.ts +0 -12
  156. package/internals/utils/TreeViewStore.js +0 -29
  157. package/internals/utils/selectors.d.ts +0 -21
  158. package/internals/utils/selectors.js +0 -58
@@ -4,7 +4,7 @@ import { useAssertModelConsistency } from '@mui/x-internals/useAssertModelConsis
4
4
  import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
5
5
  import { findOrderInTremauxTree, getAllNavigableItems, getFirstNavigableItem, getLastNavigableItem, getNonDisabledItemsInRange } from "../../utils/tree.js";
6
6
  import { propagateSelection, getAddedAndRemovedItems, getLookupFromArray } from "./useTreeViewSelection.utils.js";
7
- import { selectorIsItemSelected, selectorIsMultiSelectEnabled, selectorIsSelectionEnabled, selectorSelectionModel, selectorSelectionModelArray } from "./useTreeViewSelection.selectors.js";
7
+ import { selectionSelectors } from "./useTreeViewSelection.selectors.js";
8
8
  import { useTreeViewSelectionItemPlugin } from "./useTreeViewSelection.itemPlugin.js";
9
9
  export const useTreeViewSelection = ({
10
10
  store,
@@ -19,9 +19,9 @@ export const useTreeViewSelection = ({
19
19
  const lastSelectedItem = React.useRef(null);
20
20
  const lastSelectedRange = React.useRef({});
21
21
  const setSelectedItems = (event, newModel, additionalItemsToPropagate) => {
22
- const oldModel = selectorSelectionModel(store.value);
22
+ const oldModel = selectionSelectors.selectedItemsRaw(store.state);
23
23
  let cleanModel;
24
- const isMultiSelectEnabled = selectorIsMultiSelectEnabled(store.value);
24
+ const isMultiSelectEnabled = selectionSelectors.isMultiSelectEnabled(store.state);
25
25
  if (isMultiSelectEnabled && (params.selectionPropagation.descendants || params.selectionPropagation.parents)) {
26
26
  cleanModel = propagateSelection({
27
27
  store,
@@ -58,10 +58,8 @@ export const useTreeViewSelection = ({
58
58
  }
59
59
  }
60
60
  if (params.selectedItems === undefined) {
61
- store.update(prevState => _extends({}, prevState, {
62
- selection: _extends({}, prevState.selection, {
63
- selectedItems: cleanModel
64
- })
61
+ store.set('selection', _extends({}, store.state.selection, {
62
+ selectedItems: cleanModel
65
63
  }));
66
64
  }
67
65
  params.onSelectedItemsChange?.(event, cleanModel);
@@ -72,14 +70,14 @@ export const useTreeViewSelection = ({
72
70
  keepExistingSelection = false,
73
71
  shouldBeSelected
74
72
  }) => {
75
- if (!selectorIsSelectionEnabled(store.value)) {
73
+ if (!selectionSelectors.enabled(store.state)) {
76
74
  return;
77
75
  }
78
76
  let newSelected;
79
- const isMultiSelectEnabled = selectorIsMultiSelectEnabled(store.value);
77
+ const isMultiSelectEnabled = selectionSelectors.isMultiSelectEnabled(store.state);
80
78
  if (keepExistingSelection) {
81
- const oldSelected = selectorSelectionModelArray(store.value);
82
- const isSelectedBefore = selectorIsItemSelected(store.value, itemId);
79
+ const oldSelected = selectionSelectors.selectedItems(store.state);
80
+ const isSelectedBefore = selectionSelectors.isItemSelected(store.state, itemId);
83
81
  if (isSelectedBefore && (shouldBeSelected === false || shouldBeSelected == null)) {
84
82
  newSelected = oldSelected.filter(id => id !== itemId);
85
83
  } else if (!isSelectedBefore && (shouldBeSelected === true || shouldBeSelected == null)) {
@@ -89,25 +87,25 @@ export const useTreeViewSelection = ({
89
87
  }
90
88
  } else {
91
89
  // eslint-disable-next-line no-lonely-if
92
- if (shouldBeSelected === false || shouldBeSelected == null && selectorIsItemSelected(store.value, itemId)) {
90
+ if (shouldBeSelected === false || shouldBeSelected == null && selectionSelectors.isItemSelected(store.state, itemId)) {
93
91
  newSelected = isMultiSelectEnabled ? [] : null;
94
92
  } else {
95
93
  newSelected = isMultiSelectEnabled ? [itemId] : itemId;
96
94
  }
97
95
  }
98
96
  setSelectedItems(event, newSelected,
99
- // If shouldBeSelected === selectorIsItemSelected(store, itemId), we still want to propagate the select.
97
+ // If shouldBeSelected === selectionSelectors.isItemSelected(store, itemId), we still want to propagate the select.
100
98
  // This is useful when the element is in an indeterminate state.
101
99
  [itemId]);
102
100
  lastSelectedItem.current = itemId;
103
101
  lastSelectedRange.current = {};
104
102
  };
105
103
  const selectRange = (event, [start, end]) => {
106
- const isMultiSelectEnabled = selectorIsMultiSelectEnabled(store.value);
104
+ const isMultiSelectEnabled = selectionSelectors.isMultiSelectEnabled(store.state);
107
105
  if (!isMultiSelectEnabled) {
108
106
  return;
109
107
  }
110
- let newSelectedItems = selectorSelectionModelArray(store.value).slice();
108
+ let newSelectedItems = selectionSelectors.selectedItems(store.state).slice();
111
109
 
112
110
  // If the last selection was a range selection,
113
111
  // remove the items that were part of the last range from the model
@@ -117,7 +115,7 @@ export const useTreeViewSelection = ({
117
115
 
118
116
  // Add to the model the items that are part of the new range and not already part of the model.
119
117
  const selectedItemsLookup = getLookupFromArray(newSelectedItems);
120
- const range = getNonDisabledItemsInRange(store.value, start, end);
118
+ const range = getNonDisabledItemsInRange(store.state, start, end);
121
119
  const itemsToAddToModel = range.filter(id => !selectedItemsLookup[id]);
122
120
  newSelectedItems = newSelectedItems.concat(itemsToAddToModel);
123
121
  setSelectedItems(event, newSelectedItems);
@@ -125,31 +123,31 @@ export const useTreeViewSelection = ({
125
123
  };
126
124
  const expandSelectionRange = (event, itemId) => {
127
125
  if (lastSelectedItem.current != null) {
128
- const [start, end] = findOrderInTremauxTree(store.value, itemId, lastSelectedItem.current);
126
+ const [start, end] = findOrderInTremauxTree(store.state, itemId, lastSelectedItem.current);
129
127
  selectRange(event, [start, end]);
130
128
  }
131
129
  };
132
130
  const selectRangeFromStartToItem = (event, itemId) => {
133
- selectRange(event, [getFirstNavigableItem(store.value), itemId]);
131
+ selectRange(event, [getFirstNavigableItem(store.state), itemId]);
134
132
  };
135
133
  const selectRangeFromItemToEnd = (event, itemId) => {
136
- selectRange(event, [itemId, getLastNavigableItem(store.value)]);
134
+ selectRange(event, [itemId, getLastNavigableItem(store.state)]);
137
135
  };
138
136
  const selectAllNavigableItems = event => {
139
- const isMultiSelectEnabled = selectorIsMultiSelectEnabled(store.value);
137
+ const isMultiSelectEnabled = selectionSelectors.isMultiSelectEnabled(store.state);
140
138
  if (!isMultiSelectEnabled) {
141
139
  return;
142
140
  }
143
- const navigableItems = getAllNavigableItems(store.value);
141
+ const navigableItems = getAllNavigableItems(store.state);
144
142
  setSelectedItems(event, navigableItems);
145
143
  lastSelectedRange.current = getLookupFromArray(navigableItems);
146
144
  };
147
145
  const selectItemFromArrowNavigation = (event, currentItem, nextItem) => {
148
- const isMultiSelectEnabled = selectorIsMultiSelectEnabled(store.value);
146
+ const isMultiSelectEnabled = selectionSelectors.isMultiSelectEnabled(store.state);
149
147
  if (!isMultiSelectEnabled) {
150
148
  return;
151
149
  }
152
- let newSelectedItems = selectorSelectionModelArray(store.value).slice();
150
+ let newSelectedItems = selectionSelectors.selectedItems(store.state).slice();
153
151
  if (Object.keys(lastSelectedRange.current).length === 0) {
154
152
  newSelectedItems.push(nextItem);
155
153
  lastSelectedRange.current = {
@@ -171,18 +169,16 @@ export const useTreeViewSelection = ({
171
169
  setSelectedItems(event, newSelectedItems);
172
170
  };
173
171
  useEnhancedEffect(() => {
174
- store.update(prevState => _extends({}, prevState, {
175
- selection: {
176
- selectedItems: params.selectedItems === undefined ? prevState.selection.selectedItems : params.selectedItems,
177
- isEnabled: !params.disableSelection,
178
- isMultiSelectEnabled: params.multiSelect,
179
- isCheckboxSelectionEnabled: params.checkboxSelection,
180
- selectionPropagation: {
181
- descendants: params.selectionPropagation.descendants,
182
- parents: params.selectionPropagation.parents
183
- }
172
+ store.set('selection', {
173
+ selectedItems: params.selectedItems === undefined ? store.state.selection.selectedItems : params.selectedItems,
174
+ isEnabled: !params.disableSelection,
175
+ isMultiSelectEnabled: params.multiSelect,
176
+ isCheckboxSelectionEnabled: params.checkboxSelection,
177
+ selectionPropagation: {
178
+ descendants: params.selectionPropagation.descendants,
179
+ parents: params.selectionPropagation.parents
184
180
  }
185
- }));
181
+ });
186
182
  }, [store, params.selectedItems, params.multiSelect, params.checkboxSelection, params.disableSelection, params.selectionPropagation.descendants, params.selectionPropagation.parents]);
187
183
  return {
188
184
  getRootProps: () => ({