@mui/x-tree-view 7.0.0-alpha.1 → 7.0.0-alpha.8

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 (217) hide show
  1. package/CHANGELOG.md +1380 -188
  2. package/README.md +0 -1
  3. package/RichTreeView/RichTreeView.d.ts +20 -0
  4. package/RichTreeView/RichTreeView.js +285 -0
  5. package/RichTreeView/RichTreeView.types.d.ts +55 -0
  6. package/RichTreeView/RichTreeView.types.js +1 -0
  7. package/RichTreeView/index.d.ts +3 -0
  8. package/RichTreeView/index.js +3 -0
  9. package/RichTreeView/package.json +6 -0
  10. package/RichTreeView/richTreeViewClasses.d.ts +7 -0
  11. package/RichTreeView/richTreeViewClasses.js +6 -0
  12. package/SimpleTreeView/SimpleTreeView.d.ts +20 -0
  13. package/SimpleTreeView/SimpleTreeView.js +235 -0
  14. package/SimpleTreeView/SimpleTreeView.plugins.d.ts +6 -0
  15. package/SimpleTreeView/SimpleTreeView.plugins.js +5 -0
  16. package/SimpleTreeView/SimpleTreeView.types.d.ts +38 -0
  17. package/SimpleTreeView/SimpleTreeView.types.js +1 -0
  18. package/SimpleTreeView/index.d.ts +3 -0
  19. package/SimpleTreeView/index.js +3 -0
  20. package/SimpleTreeView/package.json +6 -0
  21. package/SimpleTreeView/simpleTreeViewClasses.d.ts +7 -0
  22. package/SimpleTreeView/simpleTreeViewClasses.js +6 -0
  23. package/TreeItem/TreeItem.js +44 -89
  24. package/TreeItem/TreeItem.types.d.ts +2 -1
  25. package/TreeItem/index.d.ts +2 -2
  26. package/TreeItem/index.js +2 -2
  27. package/TreeItem/useTreeItem.js +5 -5
  28. package/TreeView/TreeView.d.ts +4 -0
  29. package/TreeView/TreeView.js +80 -87
  30. package/TreeView/TreeView.types.d.ts +4 -26
  31. package/TreeView/index.d.ts +1 -1
  32. package/index.d.ts +3 -0
  33. package/index.js +5 -2
  34. package/internals/TreeViewProvider/TreeViewContext.d.ts +1 -2
  35. package/internals/TreeViewProvider/TreeViewContext.js +1 -14
  36. package/internals/TreeViewProvider/TreeViewProvider.types.d.ts +3 -3
  37. package/internals/TreeViewProvider/useTreeViewContext.js +7 -1
  38. package/internals/corePlugins/corePlugins.d.ts +1 -1
  39. package/internals/corePlugins/corePlugins.js +1 -1
  40. package/internals/corePlugins/useTreeViewInstanceEvents/useTreeViewInstanceEvents.d.ts +0 -5
  41. package/internals/corePlugins/useTreeViewInstanceEvents/useTreeViewInstanceEvents.js +2 -7
  42. package/internals/hooks/useLazyRef.d.ts +2 -0
  43. package/internals/hooks/useLazyRef.js +11 -0
  44. package/internals/hooks/useOnMount.d.ts +2 -0
  45. package/internals/hooks/useOnMount.js +7 -0
  46. package/internals/hooks/useTimeout.d.ts +9 -0
  47. package/internals/hooks/useTimeout.js +28 -0
  48. package/internals/models/MuiCancellableEvent.d.ts +4 -0
  49. package/internals/models/MuiCancellableEvent.js +1 -0
  50. package/internals/models/plugin.d.ts +24 -0
  51. package/internals/models/treeView.d.ts +5 -1
  52. package/internals/plugins/defaultPlugins.d.ts +3 -2
  53. package/internals/plugins/defaultPlugins.js +2 -1
  54. package/internals/plugins/useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.js +14 -6
  55. package/internals/plugins/useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.types.d.ts +1 -6
  56. package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js +32 -17
  57. package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.types.d.ts +12 -5
  58. package/internals/plugins/useTreeViewFocus/useTreeViewFocus.js +16 -6
  59. package/internals/plugins/useTreeViewFocus/useTreeViewFocus.types.d.ts +4 -1
  60. package/internals/plugins/useTreeViewId/index.d.ts +2 -0
  61. package/internals/plugins/useTreeViewId/index.js +1 -0
  62. package/internals/plugins/useTreeViewId/useTreeViewId.d.ts +3 -0
  63. package/internals/plugins/useTreeViewId/useTreeViewId.js +21 -0
  64. package/internals/plugins/useTreeViewId/useTreeViewId.types.d.ts +17 -0
  65. package/internals/plugins/useTreeViewId/useTreeViewId.types.js +1 -0
  66. package/internals/plugins/useTreeViewJSXNodes/index.d.ts +2 -0
  67. package/internals/plugins/useTreeViewJSXNodes/index.js +1 -0
  68. package/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.d.ts +3 -0
  69. package/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.js +115 -0
  70. package/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.types.d.ts +16 -0
  71. package/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.types.js +1 -0
  72. package/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js +175 -121
  73. package/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.types.d.ts +5 -2
  74. package/internals/plugins/useTreeViewNodes/useTreeViewNodes.js +89 -17
  75. package/internals/plugins/useTreeViewNodes/useTreeViewNodes.types.d.ts +48 -5
  76. package/internals/plugins/useTreeViewSelection/useTreeViewSelection.d.ts +1 -1
  77. package/internals/plugins/useTreeViewSelection/useTreeViewSelection.js +49 -28
  78. package/internals/plugins/useTreeViewSelection/useTreeViewSelection.types.d.ts +15 -8
  79. package/internals/useTreeView/useTreeView.js +40 -3
  80. package/internals/useTreeView/useTreeView.types.d.ts +2 -1
  81. package/internals/useTreeView/useTreeViewModels.js +2 -2
  82. package/internals/utils/extractPluginParamsFromProps.d.ts +13 -0
  83. package/internals/utils/extractPluginParamsFromProps.js +27 -0
  84. package/internals/utils/warning.d.ts +1 -0
  85. package/internals/utils/warning.js +14 -0
  86. package/legacy/RichTreeView/RichTreeView.js +279 -0
  87. package/legacy/RichTreeView/RichTreeView.types.js +1 -0
  88. package/legacy/RichTreeView/index.js +3 -0
  89. package/legacy/RichTreeView/richTreeViewClasses.js +6 -0
  90. package/legacy/SimpleTreeView/SimpleTreeView.js +232 -0
  91. package/legacy/SimpleTreeView/SimpleTreeView.plugins.js +6 -0
  92. package/legacy/SimpleTreeView/SimpleTreeView.types.js +1 -0
  93. package/legacy/SimpleTreeView/index.js +3 -0
  94. package/legacy/SimpleTreeView/simpleTreeViewClasses.js +6 -0
  95. package/legacy/TreeItem/TreeItem.js +49 -103
  96. package/legacy/TreeItem/index.js +2 -2
  97. package/legacy/TreeItem/useTreeItem.js +5 -5
  98. package/legacy/TreeView/TreeView.js +80 -82
  99. package/legacy/index.js +5 -2
  100. package/legacy/internals/TreeViewProvider/TreeViewContext.js +1 -14
  101. package/legacy/internals/TreeViewProvider/useTreeViewContext.js +5 -1
  102. package/legacy/internals/corePlugins/corePlugins.js +1 -1
  103. package/legacy/internals/corePlugins/useTreeViewInstanceEvents/useTreeViewInstanceEvents.js +2 -7
  104. package/legacy/internals/hooks/useLazyRef.js +11 -0
  105. package/legacy/internals/hooks/useOnMount.js +7 -0
  106. package/legacy/internals/hooks/useTimeout.js +38 -0
  107. package/legacy/internals/models/MuiCancellableEvent.js +1 -0
  108. package/legacy/internals/plugins/defaultPlugins.js +2 -1
  109. package/legacy/internals/plugins/useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.js +17 -8
  110. package/legacy/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js +32 -17
  111. package/legacy/internals/plugins/useTreeViewFocus/useTreeViewFocus.js +16 -6
  112. package/legacy/internals/plugins/useTreeViewId/index.js +1 -0
  113. package/legacy/internals/plugins/useTreeViewId/useTreeViewId.js +24 -0
  114. package/legacy/internals/plugins/useTreeViewId/useTreeViewId.types.js +1 -0
  115. package/legacy/internals/plugins/useTreeViewJSXNodes/index.js +1 -0
  116. package/legacy/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.js +121 -0
  117. package/legacy/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.types.js +1 -0
  118. package/legacy/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js +177 -119
  119. package/legacy/internals/plugins/useTreeViewNodes/useTreeViewNodes.js +96 -20
  120. package/legacy/internals/plugins/useTreeViewSelection/useTreeViewSelection.js +53 -28
  121. package/legacy/internals/useTreeView/useTreeView.js +39 -3
  122. package/legacy/internals/useTreeView/useTreeViewModels.js +2 -2
  123. package/legacy/internals/utils/extractPluginParamsFromProps.js +27 -0
  124. package/legacy/internals/utils/warning.js +15 -0
  125. package/legacy/models/index.js +1 -0
  126. package/legacy/models/items.js +1 -0
  127. package/models/index.d.ts +1 -0
  128. package/models/index.js +1 -0
  129. package/models/items.d.ts +7 -0
  130. package/models/items.js +1 -0
  131. package/models/package.json +6 -0
  132. package/modern/RichTreeView/RichTreeView.js +283 -0
  133. package/modern/RichTreeView/RichTreeView.types.js +1 -0
  134. package/modern/RichTreeView/index.js +3 -0
  135. package/modern/RichTreeView/richTreeViewClasses.js +6 -0
  136. package/modern/SimpleTreeView/SimpleTreeView.js +234 -0
  137. package/modern/SimpleTreeView/SimpleTreeView.plugins.js +5 -0
  138. package/modern/SimpleTreeView/SimpleTreeView.types.js +1 -0
  139. package/modern/SimpleTreeView/index.js +3 -0
  140. package/modern/SimpleTreeView/simpleTreeViewClasses.js +6 -0
  141. package/modern/TreeItem/TreeItem.js +44 -88
  142. package/modern/TreeItem/index.js +2 -2
  143. package/modern/TreeItem/useTreeItem.js +5 -5
  144. package/modern/TreeView/TreeView.js +80 -87
  145. package/modern/index.js +5 -2
  146. package/modern/internals/TreeViewProvider/TreeViewContext.js +1 -14
  147. package/modern/internals/TreeViewProvider/useTreeViewContext.js +7 -1
  148. package/modern/internals/corePlugins/corePlugins.js +1 -1
  149. package/modern/internals/corePlugins/useTreeViewInstanceEvents/useTreeViewInstanceEvents.js +2 -7
  150. package/modern/internals/hooks/useLazyRef.js +11 -0
  151. package/modern/internals/hooks/useOnMount.js +7 -0
  152. package/modern/internals/hooks/useTimeout.js +28 -0
  153. package/modern/internals/models/MuiCancellableEvent.js +1 -0
  154. package/modern/internals/plugins/defaultPlugins.js +2 -1
  155. package/modern/internals/plugins/useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.js +14 -6
  156. package/modern/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js +33 -18
  157. package/modern/internals/plugins/useTreeViewFocus/useTreeViewFocus.js +16 -7
  158. package/modern/internals/plugins/useTreeViewId/index.js +1 -0
  159. package/modern/internals/plugins/useTreeViewId/useTreeViewId.js +21 -0
  160. package/modern/internals/plugins/useTreeViewId/useTreeViewId.types.js +1 -0
  161. package/modern/internals/plugins/useTreeViewJSXNodes/index.js +1 -0
  162. package/modern/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.js +114 -0
  163. package/modern/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.types.js +1 -0
  164. package/modern/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js +174 -121
  165. package/modern/internals/plugins/useTreeViewNodes/useTreeViewNodes.js +88 -17
  166. package/modern/internals/plugins/useTreeViewSelection/useTreeViewSelection.js +50 -29
  167. package/modern/internals/useTreeView/useTreeView.js +40 -3
  168. package/modern/internals/useTreeView/useTreeViewModels.js +2 -2
  169. package/modern/internals/utils/extractPluginParamsFromProps.js +27 -0
  170. package/modern/internals/utils/warning.js +14 -0
  171. package/modern/models/index.js +1 -0
  172. package/modern/models/items.js +1 -0
  173. package/node/RichTreeView/RichTreeView.js +291 -0
  174. package/node/RichTreeView/RichTreeView.types.js +5 -0
  175. package/node/RichTreeView/index.js +27 -0
  176. package/node/RichTreeView/richTreeViewClasses.js +14 -0
  177. package/node/SimpleTreeView/SimpleTreeView.js +242 -0
  178. package/node/SimpleTreeView/SimpleTreeView.plugins.js +11 -0
  179. package/node/SimpleTreeView/SimpleTreeView.types.js +5 -0
  180. package/node/SimpleTreeView/index.js +27 -0
  181. package/node/SimpleTreeView/simpleTreeViewClasses.js +14 -0
  182. package/node/TreeItem/TreeItem.js +44 -88
  183. package/node/TreeItem/index.js +11 -15
  184. package/node/TreeItem/useTreeItem.js +5 -5
  185. package/node/TreeView/TreeView.js +80 -87
  186. package/node/index.js +38 -2
  187. package/node/internals/TreeViewProvider/TreeViewContext.js +2 -15
  188. package/node/internals/TreeViewProvider/useTreeViewContext.js +7 -1
  189. package/node/internals/corePlugins/corePlugins.js +1 -1
  190. package/node/internals/corePlugins/useTreeViewInstanceEvents/useTreeViewInstanceEvents.js +2 -7
  191. package/node/internals/hooks/useLazyRef.js +19 -0
  192. package/node/internals/hooks/useOnMount.js +15 -0
  193. package/node/internals/hooks/useTimeout.js +34 -0
  194. package/node/internals/models/MuiCancellableEvent.js +5 -0
  195. package/node/internals/plugins/defaultPlugins.js +2 -1
  196. package/node/internals/plugins/useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.js +15 -8
  197. package/node/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js +33 -18
  198. package/node/internals/plugins/useTreeViewFocus/useTreeViewFocus.js +16 -7
  199. package/node/internals/plugins/useTreeViewId/index.js +12 -0
  200. package/node/internals/plugins/useTreeViewId/useTreeViewId.js +31 -0
  201. package/node/internals/plugins/useTreeViewId/useTreeViewId.types.js +5 -0
  202. package/node/internals/plugins/useTreeViewJSXNodes/index.js +12 -0
  203. package/node/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.js +124 -0
  204. package/node/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.types.js +5 -0
  205. package/node/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js +174 -121
  206. package/node/internals/plugins/useTreeViewNodes/useTreeViewNodes.js +89 -18
  207. package/node/internals/plugins/useTreeViewSelection/useTreeViewSelection.js +50 -29
  208. package/node/internals/useTreeView/useTreeView.js +40 -3
  209. package/node/internals/useTreeView/useTreeViewModels.js +2 -2
  210. package/node/internals/utils/extractPluginParamsFromProps.js +34 -0
  211. package/node/internals/utils/warning.js +21 -0
  212. package/node/models/index.js +16 -0
  213. package/node/models/items.js +5 -0
  214. package/package.json +8 -7
  215. package/themeAugmentation/components.d.ts +14 -4
  216. package/themeAugmentation/overrides.d.ts +8 -4
  217. package/themeAugmentation/props.d.ts +7 -3
@@ -10,30 +10,49 @@ export const useTreeViewSelection = ({
10
10
  const lastSelectedNode = React.useRef(null);
11
11
  const lastSelectionWasRange = React.useRef(false);
12
12
  const currentRangeSelection = React.useRef([]);
13
- const isNodeSelected = nodeId => Array.isArray(models.selected.value) ? models.selected.value.indexOf(nodeId) !== -1 : models.selected.value === nodeId;
13
+ const isNodeSelected = nodeId => Array.isArray(models.selectedNodes.value) ? models.selectedNodes.value.indexOf(nodeId) !== -1 : models.selectedNodes.value === nodeId;
14
+ const setSelectedNodes = (event, newSelectedNodes) => {
15
+ if (params.onNodeSelectionToggle) {
16
+ if (params.multiSelect) {
17
+ const addedNodes = newSelectedNodes.filter(nodeId => !instance.isNodeSelected(nodeId));
18
+ const removedNodes = models.selectedNodes.value.filter(nodeId => !newSelectedNodes.includes(nodeId));
19
+ addedNodes.forEach(nodeId => {
20
+ params.onNodeSelectionToggle(event, nodeId, true);
21
+ });
22
+ removedNodes.forEach(nodeId => {
23
+ params.onNodeSelectionToggle(event, nodeId, false);
24
+ });
25
+ } else if (newSelectedNodes !== models.selectedNodes.value) {
26
+ if (models.selectedNodes.value != null) {
27
+ params.onNodeSelectionToggle(event, models.selectedNodes.value, false);
28
+ }
29
+ if (newSelectedNodes != null) {
30
+ params.onNodeSelectionToggle(event, newSelectedNodes, true);
31
+ }
32
+ }
33
+ }
34
+ if (params.onSelectedNodesChange) {
35
+ params.onSelectedNodesChange(event, newSelectedNodes);
36
+ }
37
+ models.selectedNodes.setValue(newSelectedNodes);
38
+ };
14
39
  const selectNode = (event, nodeId, multiple = false) => {
15
40
  if (params.disableSelection) {
16
41
  return;
17
42
  }
18
43
  if (multiple) {
19
- if (Array.isArray(models.selected.value)) {
44
+ if (Array.isArray(models.selectedNodes.value)) {
20
45
  let newSelected;
21
- if (models.selected.value.indexOf(nodeId) !== -1) {
22
- newSelected = models.selected.value.filter(id => id !== nodeId);
46
+ if (models.selectedNodes.value.indexOf(nodeId) !== -1) {
47
+ newSelected = models.selectedNodes.value.filter(id => id !== nodeId);
23
48
  } else {
24
- newSelected = [nodeId].concat(models.selected.value);
25
- }
26
- if (params.onNodeSelect) {
27
- params.onNodeSelect(event, newSelected);
49
+ newSelected = [nodeId].concat(models.selectedNodes.value);
28
50
  }
29
- models.selected.setValue(newSelected);
51
+ setSelectedNodes(event, newSelected);
30
52
  }
31
53
  } else {
32
54
  const newSelected = params.multiSelect ? [nodeId] : nodeId;
33
- if (params.onNodeSelect) {
34
- params.onNodeSelect(event, newSelected);
35
- }
36
- models.selected.setValue(newSelected);
55
+ setSelectedNodes(event, newSelected);
37
56
  }
38
57
  lastSelectedNode.current = nodeId;
39
58
  lastSelectionWasRange.current = false;
@@ -50,7 +69,7 @@ export const useTreeViewSelection = ({
50
69
  return nodes;
51
70
  };
52
71
  const handleRangeArrowSelect = (event, nodes) => {
53
- let base = models.selected.value.slice();
72
+ let base = models.selectedNodes.value.slice();
54
73
  const {
55
74
  start,
56
75
  next,
@@ -74,13 +93,10 @@ export const useTreeViewSelection = ({
74
93
  base.push(next);
75
94
  currentRangeSelection.current.push(current, next);
76
95
  }
77
- if (params.onNodeSelect) {
78
- params.onNodeSelect(event, base);
79
- }
80
- models.selected.setValue(base);
96
+ setSelectedNodes(event, base);
81
97
  };
82
98
  const handleRangeSelect = (event, nodes) => {
83
- let base = models.selected.value.slice();
99
+ let base = models.selectedNodes.value.slice();
84
100
  const {
85
101
  start,
86
102
  end
@@ -94,10 +110,7 @@ export const useTreeViewSelection = ({
94
110
  currentRangeSelection.current = range;
95
111
  let newSelected = base.concat(range);
96
112
  newSelected = newSelected.filter((id, i) => newSelected.indexOf(id) === i);
97
- if (params.onNodeSelect) {
98
- params.onNodeSelect(event, newSelected);
99
- }
100
- models.selected.setValue(newSelected);
113
+ setSelectedNodes(event, newSelected);
101
114
  };
102
115
  const selectRange = (event, nodes, stacked = false) => {
103
116
  if (params.disableSelection) {
@@ -156,14 +169,22 @@ export const useTreeViewSelection = ({
156
169
  };
157
170
  };
158
171
  useTreeViewSelection.models = {
159
- selected: {
160
- controlledProp: 'selected',
161
- defaultProp: 'defaultSelected'
172
+ selectedNodes: {
173
+ controlledProp: 'selectedNodes',
174
+ defaultProp: 'defaultSelectedNodes'
162
175
  }
163
176
  };
164
- const DEFAULT_SELECTED = [];
177
+ const DEFAULT_SELECTED_NODES = [];
165
178
  useTreeViewSelection.getDefaultizedParams = params => _extends({}, params, {
166
179
  disableSelection: params.disableSelection ?? false,
167
180
  multiSelect: params.multiSelect ?? false,
168
- defaultSelected: params.defaultSelected ?? (params.multiSelect ? DEFAULT_SELECTED : null)
169
- });
181
+ defaultSelectedNodes: params.defaultSelectedNodes ?? (params.multiSelect ? DEFAULT_SELECTED_NODES : null)
182
+ });
183
+ useTreeViewSelection.params = {
184
+ disableSelection: true,
185
+ multiSelect: true,
186
+ defaultSelectedNodes: true,
187
+ selectedNodes: true,
188
+ onSelectedNodesChange: true,
189
+ onNodeSelectionToggle: true
190
+ };
@@ -1,7 +1,6 @@
1
1
  import _extends from "@babel/runtime/helpers/esm/extends";
2
2
  import * as React from 'react';
3
3
  import useForkRef from '@mui/utils/useForkRef';
4
- import { DEFAULT_TREE_VIEW_CONTEXT_VALUE } from '../TreeViewProvider/TreeViewContext';
5
4
  import { useTreeViewModels } from './useTreeViewModels';
6
5
  import { TREE_VIEW_CORE_PLUGINS } from '../corePlugins';
7
6
  export const useTreeView = inParams => {
@@ -27,7 +26,7 @@ export const useTreeView = inParams => {
27
26
  return temp;
28
27
  });
29
28
  const rootPropsGetters = [];
30
- let contextValue = DEFAULT_TREE_VIEW_CONTEXT_VALUE;
29
+ let contextValue = {};
31
30
  const runPlugin = plugin => {
32
31
  const pluginResponse = plugin({
33
32
  instance,
@@ -45,6 +44,43 @@ export const useTreeView = inParams => {
45
44
  }
46
45
  };
47
46
  plugins.forEach(runPlugin);
47
+ contextValue.runItemPlugins = ({
48
+ props,
49
+ ref
50
+ }) => {
51
+ let finalProps = props;
52
+ let finalRef = ref;
53
+ const itemWrappers = [];
54
+ plugins.forEach(plugin => {
55
+ if (!plugin.itemPlugin) {
56
+ return;
57
+ }
58
+ const itemPluginResponse = plugin.itemPlugin({
59
+ props: finalProps,
60
+ ref: finalRef
61
+ });
62
+ if (itemPluginResponse?.props) {
63
+ finalProps = itemPluginResponse.props;
64
+ }
65
+ if (itemPluginResponse?.ref) {
66
+ finalRef = itemPluginResponse.ref;
67
+ }
68
+ if (itemPluginResponse?.wrapItem) {
69
+ itemWrappers.push(itemPluginResponse.wrapItem);
70
+ }
71
+ });
72
+ return {
73
+ props: finalProps,
74
+ ref: finalRef,
75
+ wrapItem: children => {
76
+ let finalChildren = children;
77
+ itemWrappers.forEach(itemWrapper => {
78
+ finalChildren = itemWrapper(finalChildren);
79
+ });
80
+ return finalChildren;
81
+ }
82
+ };
83
+ };
48
84
  const getRootProps = (otherHandlers = {}) => {
49
85
  const rootProps = _extends({
50
86
  role: 'tree',
@@ -60,6 +96,7 @@ export const useTreeView = inParams => {
60
96
  return {
61
97
  getRootProps,
62
98
  rootRef: handleRootRef,
63
- contextValue
99
+ contextValue,
100
+ instance: instance
64
101
  };
65
102
  };
@@ -44,7 +44,7 @@ export const useTreeViewModels = (plugins, props) => {
44
44
  const defaultProp = props[model.defaultProp];
45
45
  React.useEffect(() => {
46
46
  if (model.isControlled !== (controlled !== undefined)) {
47
- console.error([`MUI: A component is changing the ${model.isControlled ? '' : 'un'}controlled ${modelName} state of TreeView to be ${model.isControlled ? 'un' : ''}controlled.`, 'Elements should not switch from uncontrolled to controlled (or vice versa).', `Decide between using a controlled or uncontrolled ${modelName} ` + 'element for the lifetime of the component.', "The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.", 'More info: https://fb.me/react-controlled-components'].join('\n'));
47
+ console.error([`MUI X: A component is changing the ${model.isControlled ? '' : 'un'}controlled ${modelName} state of TreeView to be ${model.isControlled ? 'un' : ''}controlled.`, 'Elements should not switch from uncontrolled to controlled (or vice versa).', `Decide between using a controlled or uncontrolled ${modelName} ` + 'element for the lifetime of the component.', "The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.", 'More info: https://fb.me/react-controlled-components'].join('\n'));
48
48
  }
49
49
  }, [controlled]);
50
50
  const {
@@ -52,7 +52,7 @@ export const useTreeViewModels = (plugins, props) => {
52
52
  } = React.useRef(defaultProp);
53
53
  React.useEffect(() => {
54
54
  if (!model.isControlled && defaultValue !== defaultProp) {
55
- console.error([`MUI: 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'));
55
+ 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'));
56
56
  }
57
57
  }, [JSON.stringify(defaultValue)]);
58
58
  });
@@ -0,0 +1,27 @@
1
+ export const extractPluginParamsFromProps = ({
2
+ props,
3
+ plugins,
4
+ rootRef
5
+ }) => {
6
+ const paramsLookup = {};
7
+ plugins.forEach(plugin => {
8
+ Object.assign(paramsLookup, plugin.params);
9
+ });
10
+ const pluginParams = {
11
+ plugins,
12
+ rootRef
13
+ };
14
+ const otherProps = {};
15
+ Object.keys(props).forEach(propName => {
16
+ const prop = props[propName];
17
+ if (paramsLookup[propName]) {
18
+ pluginParams[propName] = prop;
19
+ } else {
20
+ otherProps[propName] = prop;
21
+ }
22
+ });
23
+ return {
24
+ pluginParams,
25
+ otherProps
26
+ };
27
+ };
@@ -0,0 +1,14 @@
1
+ export const buildWarning = (message, gravity = 'warning') => {
2
+ let alreadyWarned = false;
3
+ const cleanMessage = Array.isArray(message) ? message.join('\n') : message;
4
+ return () => {
5
+ if (!alreadyWarned) {
6
+ alreadyWarned = true;
7
+ if (gravity === 'error') {
8
+ console.error(cleanMessage);
9
+ } else {
10
+ console.warn(cleanMessage);
11
+ }
12
+ }
13
+ };
14
+ };
@@ -0,0 +1 @@
1
+ export * from './items';
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,291 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.RichTreeViewRoot = exports.RichTreeView = void 0;
8
+ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
9
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
10
+ var React = _interopRequireWildcard(require("react"));
11
+ var _propTypes = _interopRequireDefault(require("prop-types"));
12
+ var _styles = require("@mui/material/styles");
13
+ var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
14
+ var _utils = require("@mui/base/utils");
15
+ var _richTreeViewClasses = require("./richTreeViewClasses");
16
+ var _useTreeView = require("../internals/useTreeView");
17
+ var _TreeViewProvider = require("../internals/TreeViewProvider");
18
+ var _plugins = require("../internals/plugins");
19
+ var _TreeItem = require("../TreeItem");
20
+ var _warning = require("../internals/utils/warning");
21
+ var _extractPluginParamsFromProps = require("../internals/utils/extractPluginParamsFromProps");
22
+ var _jsxRuntime = require("react/jsx-runtime");
23
+ const _excluded = ["slots", "slotProps"];
24
+ 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); }
25
+ 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
+ const useUtilityClasses = ownerState => {
27
+ const {
28
+ classes
29
+ } = ownerState;
30
+ const slots = {
31
+ root: ['root']
32
+ };
33
+ return (0, _composeClasses.default)(slots, _richTreeViewClasses.getRichTreeViewUtilityClass, classes);
34
+ };
35
+ const RichTreeViewRoot = exports.RichTreeViewRoot = (0, _styles.styled)('ul', {
36
+ name: 'MuiRichTreeView',
37
+ slot: 'Root',
38
+ overridesResolver: (props, styles) => styles.root
39
+ })({
40
+ padding: 0,
41
+ margin: 0,
42
+ listStyle: 'none',
43
+ outline: 0
44
+ });
45
+ function WrappedTreeItem({
46
+ slots,
47
+ slotProps,
48
+ label,
49
+ id,
50
+ nodeId,
51
+ children
52
+ }) {
53
+ const Item = slots?.item ?? _TreeItem.TreeItem;
54
+ const itemProps = (0, _utils.useSlotProps)({
55
+ elementType: Item,
56
+ externalSlotProps: slotProps?.item,
57
+ additionalProps: {
58
+ nodeId,
59
+ id,
60
+ label
61
+ },
62
+ ownerState: {
63
+ nodeId,
64
+ label
65
+ }
66
+ });
67
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(Item, (0, _extends2.default)({}, itemProps, {
68
+ children: children
69
+ }));
70
+ }
71
+ const childrenWarning = (0, _warning.buildWarning)(['MUI X: The `RichTreeView` component does not support JSX children.', 'If you want to add items, you need to use the `items` prop', 'Check the documentation for more details: https://next.mui.com/x/react-tree-view/rich-tree-view/items/']);
72
+
73
+ /**
74
+ *
75
+ * Demos:
76
+ *
77
+ * - [Tree View](https://mui.com/x/react-tree-view/)
78
+ *
79
+ * API:
80
+ *
81
+ * - [RichTreeView API](https://mui.com/x/api/tree-view/rich-tree-view/)
82
+ */
83
+ const RichTreeView = exports.RichTreeView = /*#__PURE__*/React.forwardRef(function RichTreeView(inProps, ref) {
84
+ const props = (0, _styles.useThemeProps)({
85
+ props: inProps,
86
+ name: 'MuiRichTreeView'
87
+ });
88
+ if (process.env.NODE_ENV !== 'production') {
89
+ if (props.children != null) {
90
+ childrenWarning();
91
+ }
92
+ }
93
+ const _extractPluginParamsF = (0, _extractPluginParamsFromProps.extractPluginParamsFromProps)({
94
+ props,
95
+ plugins: _plugins.DEFAULT_TREE_VIEW_PLUGINS,
96
+ rootRef: ref
97
+ }),
98
+ {
99
+ pluginParams,
100
+ otherProps: {
101
+ slots,
102
+ slotProps
103
+ }
104
+ } = _extractPluginParamsF,
105
+ otherProps = (0, _objectWithoutPropertiesLoose2.default)(_extractPluginParamsF.otherProps, _excluded);
106
+ const {
107
+ getRootProps,
108
+ contextValue,
109
+ instance
110
+ } = (0, _useTreeView.useTreeView)(pluginParams);
111
+ const classes = useUtilityClasses(props);
112
+ const Root = slots?.root ?? RichTreeViewRoot;
113
+ const rootProps = (0, _utils.useSlotProps)({
114
+ elementType: Root,
115
+ externalSlotProps: slotProps?.root,
116
+ externalForwardedProps: otherProps,
117
+ className: classes.root,
118
+ getSlotProps: getRootProps,
119
+ ownerState: props
120
+ });
121
+ const nodesToRender = instance.getNodesToRender();
122
+ const renderNode = ({
123
+ label,
124
+ nodeId,
125
+ id,
126
+ children
127
+ }) => {
128
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedTreeItem, {
129
+ slots: slots,
130
+ slotProps: slotProps,
131
+ label: label,
132
+ id: id,
133
+ nodeId: nodeId,
134
+ children: children?.map(renderNode)
135
+ }, nodeId);
136
+ };
137
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeViewProvider.TreeViewProvider, {
138
+ value: contextValue,
139
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, (0, _extends2.default)({}, rootProps, {
140
+ children: nodesToRender.map(renderNode)
141
+ }))
142
+ });
143
+ });
144
+ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
145
+ // ----------------------------- Warning --------------------------------
146
+ // | These PropTypes are generated from the TypeScript type definitions |
147
+ // | To update them edit the TypeScript types and run "yarn proptypes" |
148
+ // ----------------------------------------------------------------------
149
+ /**
150
+ * Override or extend the styles applied to the component.
151
+ */
152
+ classes: _propTypes.default.object,
153
+ /**
154
+ * className applied to the root element.
155
+ */
156
+ className: _propTypes.default.string,
157
+ /**
158
+ * The default icon used to collapse the node.
159
+ */
160
+ defaultCollapseIcon: _propTypes.default.node,
161
+ /**
162
+ * The default icon displayed next to a end node. This is applied to all
163
+ * tree nodes and can be overridden by the TreeItem `icon` prop.
164
+ */
165
+ defaultEndIcon: _propTypes.default.node,
166
+ /**
167
+ * Expanded node ids.
168
+ * Used when the item's expansion is not controlled.
169
+ * @default []
170
+ */
171
+ defaultExpandedNodes: _propTypes.default.arrayOf(_propTypes.default.string),
172
+ /**
173
+ * The default icon used to expand the node.
174
+ */
175
+ defaultExpandIcon: _propTypes.default.node,
176
+ /**
177
+ * The default icon displayed next to a parent node. This is applied to all
178
+ * parent nodes and can be overridden by the TreeItem `icon` prop.
179
+ */
180
+ defaultParentIcon: _propTypes.default.node,
181
+ /**
182
+ * Selected node ids. (Uncontrolled)
183
+ * When `multiSelect` is true this takes an array of strings; when false (default) a string.
184
+ * @default []
185
+ */
186
+ defaultSelectedNodes: _propTypes.default.any,
187
+ /**
188
+ * If `true`, will allow focus on disabled items.
189
+ * @default false
190
+ */
191
+ disabledItemsFocusable: _propTypes.default.bool,
192
+ /**
193
+ * If `true` selection is disabled.
194
+ * @default false
195
+ */
196
+ disableSelection: _propTypes.default.bool,
197
+ /**
198
+ * Expanded node ids.
199
+ * Used when the item's expansion is controlled.
200
+ */
201
+ expandedNodes: _propTypes.default.arrayOf(_propTypes.default.string),
202
+ /**
203
+ * Used to determine the string label for a given item.
204
+ *
205
+ * @template R
206
+ * @param {R} item The item to check.
207
+ * @returns {string} The id of the item.
208
+ * @default `(item) => item.id`
209
+ */
210
+ getItemId: _propTypes.default.func,
211
+ /**
212
+ * Used to determine the string label for a given item.
213
+ *
214
+ * @template R
215
+ * @param {R} item The item to check.
216
+ * @returns {string} The label of the item.
217
+ * @default `(item) => item.label`
218
+ */
219
+ getItemLabel: _propTypes.default.func,
220
+ /**
221
+ * This prop is used to help implement the accessibility logic.
222
+ * If you don't provide this prop. It falls back to a randomly generated id.
223
+ */
224
+ id: _propTypes.default.string,
225
+ /**
226
+ * Used to determine if a given item should be disabled.
227
+ * @template R
228
+ * @param {R} item The item to check.
229
+ * @returns {boolean} `true` if the item should be disabled.
230
+ */
231
+ isItemDisabled: _propTypes.default.func,
232
+ items: _propTypes.default.array.isRequired,
233
+ /**
234
+ * If true `ctrl` and `shift` will trigger multiselect.
235
+ * @default false
236
+ */
237
+ multiSelect: _propTypes.default.bool,
238
+ /**
239
+ * Callback fired when tree items are expanded/collapsed.
240
+ * @param {React.SyntheticEvent} event The event source of the callback.
241
+ * @param {array} nodeIds The ids of the expanded nodes.
242
+ */
243
+ onExpandedNodesChange: _propTypes.default.func,
244
+ /**
245
+ * Callback fired when a tree item is expanded or collapsed.
246
+ * @param {React.SyntheticEvent} event The event source of the callback.
247
+ * @param {array} nodeId The nodeId of the modified node.
248
+ * @param {array} isExpanded `true` if the node has just been expanded, `false` if it has just been collapsed.
249
+ */
250
+ onNodeExpansionToggle: _propTypes.default.func,
251
+ /**
252
+ * Callback fired when tree items are focused.
253
+ * @param {React.SyntheticEvent} event The event source of the callback **Warning**: This is a generic event not a focus event.
254
+ * @param {string} nodeId The id of the node focused.
255
+ * @param {string} value of the focused node.
256
+ */
257
+ onNodeFocus: _propTypes.default.func,
258
+ /**
259
+ * Callback fired when a tree item is selected or deselected.
260
+ * @param {React.SyntheticEvent} event The event source of the callback.
261
+ * @param {array} nodeId The nodeId of the modified node.
262
+ * @param {array} isSelected `true` if the node has just been selected, `false` if it has just been deselected.
263
+ */
264
+ onNodeSelectionToggle: _propTypes.default.func,
265
+ /**
266
+ * Callback fired when tree items are selected/deselected.
267
+ * @param {React.SyntheticEvent} event The event source of the callback
268
+ * @param {string[] | string} nodeIds The ids of the selected nodes.
269
+ * When `multiSelect` is `true`, this is an array of strings; when false (default) a string.
270
+ */
271
+ onSelectedNodesChange: _propTypes.default.func,
272
+ /**
273
+ * Selected node ids. (Controlled)
274
+ * When `multiSelect` is true this takes an array of strings; when false (default) a string.
275
+ */
276
+ selectedNodes: _propTypes.default.any,
277
+ /**
278
+ * The props used for each component slot.
279
+ * @default {}
280
+ */
281
+ slotProps: _propTypes.default.object,
282
+ /**
283
+ * Overridable component slots.
284
+ * @default {}
285
+ */
286
+ slots: _propTypes.default.object,
287
+ /**
288
+ * The system prop that allows defining system overrides as well as additional CSS styles.
289
+ */
290
+ sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
291
+ } : void 0;
@@ -0,0 +1,5 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
@@ -0,0 +1,27 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ var _RichTreeView = require("./RichTreeView");
7
+ Object.keys(_RichTreeView).forEach(function (key) {
8
+ if (key === "default" || key === "__esModule") return;
9
+ if (key in exports && exports[key] === _RichTreeView[key]) return;
10
+ Object.defineProperty(exports, key, {
11
+ enumerable: true,
12
+ get: function () {
13
+ return _RichTreeView[key];
14
+ }
15
+ });
16
+ });
17
+ var _richTreeViewClasses = require("./richTreeViewClasses");
18
+ Object.keys(_richTreeViewClasses).forEach(function (key) {
19
+ if (key === "default" || key === "__esModule") return;
20
+ if (key in exports && exports[key] === _richTreeViewClasses[key]) return;
21
+ Object.defineProperty(exports, key, {
22
+ enumerable: true,
23
+ get: function () {
24
+ return _richTreeViewClasses[key];
25
+ }
26
+ });
27
+ });
@@ -0,0 +1,14 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.getRichTreeViewUtilityClass = getRichTreeViewUtilityClass;
8
+ exports.richTreeViewClasses = void 0;
9
+ var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
10
+ var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
11
+ function getRichTreeViewUtilityClass(slot) {
12
+ return (0, _generateUtilityClass.default)('MuiRichTreeView', slot);
13
+ }
14
+ const richTreeViewClasses = exports.richTreeViewClasses = (0, _generateUtilityClasses.default)('MuiRichTreeView', ['root']);