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

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 (139) hide show
  1. package/CHANGELOG.md +379 -2
  2. package/README.md +1 -1
  3. package/RichTreeView/RichTreeView.js +10 -36
  4. package/RichTreeView/RichTreeView.types.d.ts +6 -9
  5. package/RichTreeView/index.d.ts +1 -1
  6. package/SimpleTreeView/SimpleTreeView.js +12 -37
  7. package/SimpleTreeView/SimpleTreeView.plugins.d.ts +4 -2
  8. package/SimpleTreeView/SimpleTreeView.types.d.ts +8 -7
  9. package/SimpleTreeView/index.d.ts +1 -1
  10. package/TreeItem/TreeItem.js +62 -39
  11. package/TreeItem/TreeItem.types.d.ts +33 -17
  12. package/TreeItem/TreeItemContent.d.ts +0 -3
  13. package/TreeItem/TreeItemContent.js +2 -5
  14. package/TreeItem/index.d.ts +2 -2
  15. package/TreeItem/index.js +1 -1
  16. package/TreeItem/{useTreeItem.d.ts → useTreeItemState.d.ts} +1 -1
  17. package/{modern/TreeItem/useTreeItem.js → TreeItem/useTreeItemState.js} +4 -2
  18. package/TreeView/TreeView.js +0 -21
  19. package/TreeView/TreeView.types.d.ts +5 -1
  20. package/TreeView/index.d.ts +1 -1
  21. package/icons/icons.d.ts +6 -0
  22. package/icons/icons.js +9 -0
  23. package/icons/index.d.ts +1 -0
  24. package/icons/index.js +1 -0
  25. package/icons/package.json +6 -0
  26. package/index.d.ts +1 -0
  27. package/index.js +3 -2
  28. package/internals/TreeViewProvider/TreeViewContext.d.ts +4 -2
  29. package/internals/TreeViewProvider/TreeViewProvider.types.d.ts +3 -11
  30. package/internals/corePlugins/useTreeViewInstanceEvents/useTreeViewInstanceEvents.types.d.ts +3 -2
  31. package/internals/index.d.ts +15 -0
  32. package/internals/index.js +4 -0
  33. package/internals/models/helpers.d.ts +7 -1
  34. package/internals/models/plugin.d.ts +64 -20
  35. package/internals/models/treeView.d.ts +1 -2
  36. package/internals/package.json +6 -0
  37. package/internals/plugins/defaultPlugins.d.ts +6 -4
  38. package/internals/plugins/defaultPlugins.js +2 -2
  39. package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js +8 -10
  40. package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.types.d.ts +7 -3
  41. package/internals/plugins/useTreeViewFocus/useTreeViewFocus.js +0 -6
  42. package/internals/plugins/useTreeViewFocus/useTreeViewFocus.types.d.ts +12 -6
  43. package/internals/plugins/useTreeViewIcons/index.d.ts +2 -0
  44. package/internals/plugins/useTreeViewIcons/index.js +1 -0
  45. package/internals/plugins/useTreeViewIcons/useTreeViewIcons.d.ts +3 -0
  46. package/internals/plugins/useTreeViewIcons/useTreeViewIcons.js +22 -0
  47. package/internals/plugins/useTreeViewIcons/useTreeViewIcons.types.d.ts +43 -0
  48. package/internals/plugins/useTreeViewId/useTreeViewId.types.d.ts +6 -2
  49. package/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.types.d.ts +6 -4
  50. package/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.types.d.ts +9 -6
  51. package/internals/plugins/useTreeViewNodes/useTreeViewNodes.js +11 -0
  52. package/internals/plugins/useTreeViewNodes/useTreeViewNodes.types.d.ts +10 -2
  53. package/internals/plugins/useTreeViewSelection/useTreeViewSelection.js +9 -5
  54. package/internals/plugins/useTreeViewSelection/useTreeViewSelection.types.d.ts +15 -5
  55. package/internals/useTreeView/useTreeView.js +7 -3
  56. package/internals/useTreeView/useTreeView.types.d.ts +6 -6
  57. package/internals/useTreeView/useTreeViewModels.js +10 -11
  58. package/internals/utils/extractPluginParamsFromProps.d.ts +8 -5
  59. package/internals/utils/extractPluginParamsFromProps.js +17 -6
  60. package/legacy/RichTreeView/RichTreeView.js +3 -27
  61. package/legacy/SimpleTreeView/SimpleTreeView.js +4 -28
  62. package/legacy/TreeItem/TreeItem.js +63 -39
  63. package/legacy/TreeItem/TreeItemContent.js +9 -12
  64. package/legacy/TreeItem/index.js +1 -1
  65. package/legacy/TreeItem/{useTreeItem.js → useTreeItemState.js} +2 -2
  66. package/legacy/TreeView/TreeView.js +0 -21
  67. package/legacy/icons/icons.js +9 -0
  68. package/legacy/icons/index.js +1 -0
  69. package/legacy/index.js +3 -2
  70. package/legacy/internals/index.js +4 -0
  71. package/legacy/internals/plugins/defaultPlugins.js +2 -2
  72. package/legacy/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js +10 -10
  73. package/legacy/internals/plugins/useTreeViewFocus/useTreeViewFocus.js +0 -6
  74. package/legacy/internals/plugins/useTreeViewIcons/index.js +1 -0
  75. package/legacy/internals/plugins/useTreeViewIcons/useTreeViewIcons.js +21 -0
  76. package/legacy/internals/plugins/useTreeViewNodes/useTreeViewNodes.js +11 -0
  77. package/legacy/internals/plugins/useTreeViewSelection/useTreeViewSelection.js +12 -6
  78. package/legacy/internals/useTreeView/useTreeView.js +6 -2
  79. package/legacy/internals/useTreeView/useTreeViewModels.js +10 -11
  80. package/legacy/internals/utils/extractPluginParamsFromProps.js +11 -2
  81. package/modern/RichTreeView/RichTreeView.js +10 -36
  82. package/modern/SimpleTreeView/SimpleTreeView.js +12 -37
  83. package/modern/TreeItem/TreeItem.js +61 -39
  84. package/modern/TreeItem/TreeItemContent.js +2 -5
  85. package/modern/TreeItem/index.js +1 -1
  86. package/{TreeItem/useTreeItem.js → modern/TreeItem/useTreeItemState.js} +4 -2
  87. package/modern/TreeView/TreeView.js +0 -21
  88. package/modern/icons/icons.js +9 -0
  89. package/modern/icons/index.js +1 -0
  90. package/modern/index.js +3 -2
  91. package/modern/internals/index.js +4 -0
  92. package/modern/internals/plugins/defaultPlugins.js +2 -2
  93. package/modern/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js +7 -10
  94. package/modern/internals/plugins/useTreeViewFocus/useTreeViewFocus.js +0 -3
  95. package/modern/internals/plugins/useTreeViewIcons/index.js +1 -0
  96. package/modern/internals/plugins/useTreeViewIcons/useTreeViewIcons.js +22 -0
  97. package/modern/internals/plugins/useTreeViewNodes/useTreeViewNodes.js +8 -0
  98. package/modern/internals/plugins/useTreeViewSelection/useTreeViewSelection.js +9 -5
  99. package/modern/internals/useTreeView/useTreeView.js +7 -3
  100. package/modern/internals/useTreeView/useTreeViewModels.js +10 -11
  101. package/modern/internals/utils/extractPluginParamsFromProps.js +17 -6
  102. package/node/RichTreeView/RichTreeView.js +10 -36
  103. package/node/SimpleTreeView/SimpleTreeView.js +12 -37
  104. package/node/TreeItem/TreeItem.js +61 -39
  105. package/node/TreeItem/TreeItemContent.js +2 -5
  106. package/node/TreeItem/index.js +4 -4
  107. package/node/TreeItem/{useTreeItem.js → useTreeItemState.js} +5 -3
  108. package/node/TreeView/TreeView.js +0 -21
  109. package/node/icons/icons.js +17 -0
  110. package/node/icons/index.js +16 -0
  111. package/node/index.js +13 -1
  112. package/node/internals/index.js +33 -0
  113. package/node/internals/plugins/defaultPlugins.js +2 -2
  114. package/node/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js +7 -10
  115. package/node/internals/plugins/useTreeViewFocus/useTreeViewFocus.js +0 -3
  116. package/node/internals/plugins/useTreeViewIcons/index.js +12 -0
  117. package/node/internals/plugins/useTreeViewIcons/useTreeViewIcons.js +29 -0
  118. package/node/internals/plugins/useTreeViewNodes/useTreeViewNodes.js +8 -0
  119. package/node/internals/plugins/useTreeViewSelection/useTreeViewSelection.js +9 -5
  120. package/node/internals/useTreeView/useTreeView.js +7 -3
  121. package/node/internals/useTreeView/useTreeViewModels.js +10 -11
  122. package/node/internals/utils/extractPluginParamsFromProps.js +18 -6
  123. package/package.json +7 -7
  124. package/themeAugmentation/components.d.ts +4 -4
  125. package/internals/plugins/useTreeViewContextValueBuilder/index.d.ts +0 -2
  126. package/internals/plugins/useTreeViewContextValueBuilder/index.js +0 -1
  127. package/internals/plugins/useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.d.ts +0 -3
  128. package/internals/plugins/useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.js +0 -32
  129. package/internals/plugins/useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.types.d.ts +0 -29
  130. package/legacy/internals/plugins/useTreeViewContextValueBuilder/index.js +0 -1
  131. package/legacy/internals/plugins/useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.js +0 -34
  132. package/modern/internals/plugins/useTreeViewContextValueBuilder/index.js +0 -1
  133. package/modern/internals/plugins/useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.js +0 -32
  134. package/node/internals/plugins/useTreeViewContextValueBuilder/index.js +0 -12
  135. package/node/internals/plugins/useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.js +0 -39
  136. /package/internals/plugins/{useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.types.js → useTreeViewIcons/useTreeViewIcons.types.js} +0 -0
  137. /package/legacy/internals/plugins/{useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.types.js → useTreeViewIcons/useTreeViewIcons.types.js} +0 -0
  138. /package/modern/internals/plugins/{useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.types.js → useTreeViewIcons/useTreeViewIcons.types.js} +0 -0
  139. /package/node/internals/plugins/{useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.types.js → useTreeViewIcons/useTreeViewIcons.types.js} +0 -0
@@ -0,0 +1,16 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ var _icons = require("./icons");
7
+ Object.keys(_icons).forEach(function (key) {
8
+ if (key === "default" || key === "__esModule") return;
9
+ if (key in exports && exports[key] === _icons[key]) return;
10
+ Object.defineProperty(exports, key, {
11
+ enumerable: true,
12
+ get: function () {
13
+ return _icons[key];
14
+ }
15
+ });
16
+ });
package/node/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/x-tree-view v7.0.0-alpha.8
2
+ * @mui/x-tree-view v7.0.0-alpha.9
3
3
  *
4
4
  * @license MIT
5
5
  * This source code is licensed under the MIT license found in the
@@ -79,4 +79,16 @@ Object.keys(_models).forEach(function (key) {
79
79
  return _models[key];
80
80
  }
81
81
  });
82
+ });
83
+ var _icons = require("./icons");
84
+ Object.keys(_icons).forEach(function (key) {
85
+ if (key === "default" || key === "__esModule") return;
86
+ if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
87
+ if (key in exports && exports[key] === _icons[key]) return;
88
+ Object.defineProperty(exports, key, {
89
+ enumerable: true,
90
+ get: function () {
91
+ return _icons[key];
92
+ }
93
+ });
82
94
  });
@@ -0,0 +1,33 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ Object.defineProperty(exports, "DEFAULT_TREE_VIEW_PLUGINS", {
7
+ enumerable: true,
8
+ get: function () {
9
+ return _defaultPlugins.DEFAULT_TREE_VIEW_PLUGINS;
10
+ }
11
+ });
12
+ Object.defineProperty(exports, "TreeViewProvider", {
13
+ enumerable: true,
14
+ get: function () {
15
+ return _TreeViewProvider.TreeViewProvider;
16
+ }
17
+ });
18
+ Object.defineProperty(exports, "extractPluginParamsFromProps", {
19
+ enumerable: true,
20
+ get: function () {
21
+ return _extractPluginParamsFromProps.extractPluginParamsFromProps;
22
+ }
23
+ });
24
+ Object.defineProperty(exports, "useTreeView", {
25
+ enumerable: true,
26
+ get: function () {
27
+ return _useTreeView.useTreeView;
28
+ }
29
+ });
30
+ var _useTreeView = require("./useTreeView");
31
+ var _TreeViewProvider = require("./TreeViewProvider");
32
+ var _defaultPlugins = require("./plugins/defaultPlugins");
33
+ var _extractPluginParamsFromProps = require("./utils/extractPluginParamsFromProps");
@@ -10,7 +10,7 @@ var _useTreeViewExpansion = require("./useTreeViewExpansion");
10
10
  var _useTreeViewSelection = require("./useTreeViewSelection");
11
11
  var _useTreeViewFocus = require("./useTreeViewFocus");
12
12
  var _useTreeViewKeyboardNavigation = require("./useTreeViewKeyboardNavigation");
13
- var _useTreeViewContextValueBuilder = require("./useTreeViewContextValueBuilder");
14
- const DEFAULT_TREE_VIEW_PLUGINS = exports.DEFAULT_TREE_VIEW_PLUGINS = [_useTreeViewId.useTreeViewId, _useTreeViewNodes.useTreeViewNodes, _useTreeViewExpansion.useTreeViewExpansion, _useTreeViewSelection.useTreeViewSelection, _useTreeViewFocus.useTreeViewFocus, _useTreeViewKeyboardNavigation.useTreeViewKeyboardNavigation, _useTreeViewContextValueBuilder.useTreeViewContextValueBuilder];
13
+ var _useTreeViewIcons = require("./useTreeViewIcons");
14
+ const DEFAULT_TREE_VIEW_PLUGINS = exports.DEFAULT_TREE_VIEW_PLUGINS = [_useTreeViewId.useTreeViewId, _useTreeViewNodes.useTreeViewNodes, _useTreeViewExpansion.useTreeViewExpansion, _useTreeViewSelection.useTreeViewSelection, _useTreeViewFocus.useTreeViewFocus, _useTreeViewKeyboardNavigation.useTreeViewKeyboardNavigation, _useTreeViewIcons.useTreeViewIcons];
15
15
 
16
16
  // We can't infer this type from the plugin, otherwise we would lose the generics.
@@ -16,6 +16,10 @@ const useTreeViewExpansion = ({
16
16
  params,
17
17
  models
18
18
  }) => {
19
+ const setExpandedNodes = (event, value) => {
20
+ params.onExpandedNodesChange?.(event, value);
21
+ models.expandedNodes.setControlledValue(value);
22
+ };
19
23
  const isNodeExpanded = React.useCallback(nodeId => {
20
24
  return Array.isArray(models.expandedNodes.value) ? models.expandedNodes.value.indexOf(nodeId) !== -1 : false;
21
25
  }, [models.expandedNodes.value]);
@@ -34,10 +38,7 @@ const useTreeViewExpansion = ({
34
38
  if (params.onNodeExpansionToggle) {
35
39
  params.onNodeExpansionToggle(event, nodeId, !isExpandedBefore);
36
40
  }
37
- if (params.onExpandedNodesChange) {
38
- params.onExpandedNodesChange(event, newExpanded);
39
- }
40
- models.expandedNodes.setValue(newExpanded);
41
+ setExpandedNodes(event, newExpanded);
41
42
  });
42
43
  const expandAllSiblings = (event, nodeId) => {
43
44
  const node = instance.getNode(nodeId);
@@ -50,10 +51,7 @@ const useTreeViewExpansion = ({
50
51
  params.onNodeExpansionToggle(event, newlyExpandedNodeId, true);
51
52
  });
52
53
  }
53
- if (params.onExpandedNodesChange) {
54
- params.onExpandedNodesChange(event, newExpanded);
55
- }
56
- models.expandedNodes.setValue(newExpanded);
54
+ setExpandedNodes(event, newExpanded);
57
55
  }
58
56
  };
59
57
  (0, _useTreeView.populateInstance)(instance, {
@@ -66,8 +64,7 @@ const useTreeViewExpansion = ({
66
64
  exports.useTreeViewExpansion = useTreeViewExpansion;
67
65
  useTreeViewExpansion.models = {
68
66
  expandedNodes: {
69
- controlledProp: 'expandedNodes',
70
- defaultProp: 'defaultExpandedNodes'
67
+ getDefaultValue: params => params.defaultExpandedNodes
71
68
  }
72
69
  };
73
70
  const DEFAULT_EXPANDED_NODES = [];
@@ -95,9 +95,6 @@ exports.useTreeViewFocus = useTreeViewFocus;
95
95
  useTreeViewFocus.getInitialState = () => ({
96
96
  focusedNodeId: null
97
97
  });
98
- useTreeViewFocus.getDefaultizedParams = params => (0, _extends2.default)({}, params, {
99
- disabledItemsFocusable: params.disabledItemsFocusable ?? false
100
- });
101
98
  useTreeViewFocus.params = {
102
99
  onNodeFocus: true
103
100
  };
@@ -0,0 +1,12 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ Object.defineProperty(exports, "useTreeViewIcons", {
7
+ enumerable: true,
8
+ get: function () {
9
+ return _useTreeViewIcons.useTreeViewIcons;
10
+ }
11
+ });
12
+ var _useTreeViewIcons = require("./useTreeViewIcons");
@@ -0,0 +1,29 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.useTreeViewIcons = void 0;
7
+ const useTreeViewIcons = ({
8
+ slots,
9
+ slotProps
10
+ }) => {
11
+ return {
12
+ contextValue: {
13
+ icons: {
14
+ slots: {
15
+ collapseIcon: slots.collapseIcon,
16
+ expandIcon: slots.expandIcon,
17
+ endIcon: slots.endIcon
18
+ },
19
+ slotProps: {
20
+ collapseIcon: slotProps.collapseIcon,
21
+ expandIcon: slotProps.expandIcon,
22
+ endIcon: slotProps.endIcon
23
+ }
24
+ }
25
+ }
26
+ };
27
+ };
28
+ exports.useTreeViewIcons = useTreeViewIcons;
29
+ useTreeViewIcons.params = {};
@@ -124,6 +124,11 @@ const useTreeViewNodes = ({
124
124
  getNavigableChildrenIds,
125
125
  isNodeDisabled
126
126
  });
127
+ return {
128
+ contextValue: {
129
+ disabledItemsFocusable: params.disabledItemsFocusable
130
+ }
131
+ };
127
132
  };
128
133
  exports.useTreeViewNodes = useTreeViewNodes;
129
134
  useTreeViewNodes.getInitialState = params => updateState({
@@ -132,6 +137,9 @@ useTreeViewNodes.getInitialState = params => updateState({
132
137
  getItemId: params.getItemId,
133
138
  getItemLabel: params.getItemLabel
134
139
  });
140
+ useTreeViewNodes.getDefaultizedParams = params => (0, _extends2.default)({}, params, {
141
+ disabledItemsFocusable: params.disabledItemsFocusable ?? false
142
+ });
135
143
  useTreeViewNodes.params = {
136
144
  disabledItemsFocusable: true,
137
145
  items: true,
@@ -19,7 +19,6 @@ const useTreeViewSelection = ({
19
19
  const lastSelectedNode = React.useRef(null);
20
20
  const lastSelectionWasRange = React.useRef(false);
21
21
  const currentRangeSelection = React.useRef([]);
22
- const isNodeSelected = nodeId => Array.isArray(models.selectedNodes.value) ? models.selectedNodes.value.indexOf(nodeId) !== -1 : models.selectedNodes.value === nodeId;
23
22
  const setSelectedNodes = (event, newSelectedNodes) => {
24
23
  if (params.onNodeSelectionToggle) {
25
24
  if (params.multiSelect) {
@@ -43,8 +42,9 @@ const useTreeViewSelection = ({
43
42
  if (params.onSelectedNodesChange) {
44
43
  params.onSelectedNodesChange(event, newSelectedNodes);
45
44
  }
46
- models.selectedNodes.setValue(newSelectedNodes);
45
+ models.selectedNodes.setControlledValue(newSelectedNodes);
47
46
  };
47
+ const isNodeSelected = nodeId => Array.isArray(models.selectedNodes.value) ? models.selectedNodes.value.indexOf(nodeId) !== -1 : models.selectedNodes.value === nodeId;
48
48
  const selectNode = (event, nodeId, multiple = false) => {
49
49
  if (params.disableSelection) {
50
50
  return;
@@ -174,14 +174,18 @@ const useTreeViewSelection = ({
174
174
  return {
175
175
  getRootProps: () => ({
176
176
  'aria-multiselectable': params.multiSelect
177
- })
177
+ }),
178
+ contextValue: {
179
+ selection: {
180
+ multiSelect: params.multiSelect
181
+ }
182
+ }
178
183
  };
179
184
  };
180
185
  exports.useTreeViewSelection = useTreeViewSelection;
181
186
  useTreeViewSelection.models = {
182
187
  selectedNodes: {
183
- controlledProp: 'selectedNodes',
184
- defaultProp: 'defaultSelectedNodes'
188
+ getDefaultValue: params => params.defaultSelectedNodes
185
189
  }
186
190
  };
187
191
  const DEFAULT_SELECTED_NODES = [];
@@ -35,11 +35,15 @@ const useTreeView = inParams => {
35
35
  return temp;
36
36
  });
37
37
  const rootPropsGetters = [];
38
- let contextValue = {};
38
+ const contextValue = {
39
+ instance: instance
40
+ };
39
41
  const runPlugin = plugin => {
40
42
  const pluginResponse = plugin({
41
43
  instance,
42
44
  params,
45
+ slots: params.slots,
46
+ slotProps: params.slotProps,
43
47
  state,
44
48
  setState,
45
49
  rootRef: innerRootRef,
@@ -49,7 +53,7 @@ const useTreeView = inParams => {
49
53
  rootPropsGetters.push(pluginResponse.getRootProps);
50
54
  }
51
55
  if (pluginResponse.contextValue) {
52
- contextValue = pluginResponse.contextValue;
56
+ Object.assign(contextValue, pluginResponse.contextValue);
53
57
  }
54
58
  };
55
59
  plugins.forEach(runPlugin);
@@ -105,7 +109,7 @@ const useTreeView = inParams => {
105
109
  return {
106
110
  getRootProps,
107
111
  rootRef: handleRootRef,
108
- contextValue,
112
+ contextValue: contextValue,
109
113
  instance: instance
110
114
  };
111
115
  };
@@ -19,23 +19,22 @@ const useTreeViewModels = (plugins, props) => {
19
19
  const initialState = {};
20
20
  plugins.forEach(plugin => {
21
21
  if (plugin.models) {
22
- Object.entries(plugin.models).forEach(([modelName, model]) => {
22
+ Object.entries(plugin.models).forEach(([modelName, modelInitializer]) => {
23
23
  modelsRef.current[modelName] = {
24
- controlledProp: model.controlledProp,
25
- defaultProp: model.defaultProp,
26
- isControlled: props[model.controlledProp] !== undefined
24
+ isControlled: props[modelName] !== undefined,
25
+ getDefaultValue: modelInitializer.getDefaultValue
27
26
  };
28
- initialState[modelName] = props[model.defaultProp];
27
+ initialState[modelName] = modelInitializer.getDefaultValue(props);
29
28
  });
30
29
  }
31
30
  });
32
31
  return initialState;
33
32
  });
34
33
  const models = Object.fromEntries(Object.entries(modelsRef.current).map(([modelName, model]) => {
35
- const value = model.isControlled ? props[model.controlledProp] : modelsState[modelName];
34
+ const value = model.isControlled ? props[modelName] : modelsState[modelName];
36
35
  return [modelName, {
37
36
  value,
38
- setValue: newValue => {
37
+ setControlledValue: newValue => {
39
38
  if (!model.isControlled) {
40
39
  setModelsState(prevState => (0, _extends2.default)({}, prevState, {
41
40
  [modelName]: newValue
@@ -49,8 +48,8 @@ const useTreeViewModels = (plugins, props) => {
49
48
  /* eslint-disable react-hooks/rules-of-hooks, react-hooks/exhaustive-deps */
50
49
  if (process.env.NODE_ENV !== 'production') {
51
50
  Object.entries(modelsRef.current).forEach(([modelName, model]) => {
52
- const controlled = props[model.controlledProp];
53
- const defaultProp = props[model.defaultProp];
51
+ const controlled = props[modelName];
52
+ const newDefaultValue = model.getDefaultValue(props);
54
53
  React.useEffect(() => {
55
54
  if (model.isControlled !== (controlled !== undefined)) {
56
55
  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'));
@@ -58,9 +57,9 @@ const useTreeViewModels = (plugins, props) => {
58
57
  }, [controlled]);
59
58
  const {
60
59
  current: defaultValue
61
- } = React.useRef(defaultProp);
60
+ } = React.useRef(newDefaultValue);
62
61
  React.useEffect(() => {
63
- if (!model.isControlled && defaultValue !== defaultProp) {
62
+ if (!model.isControlled && defaultValue !== newDefaultValue) {
64
63
  console.error([`MUI X: A component is changing the default ${modelName} state of an uncontrolled TreeView after being initialized. ` + `To suppress this warning opt to use a controlled TreeView.`].join('\n'));
65
64
  }
66
65
  }, [JSON.stringify(defaultValue)]);
@@ -1,21 +1,31 @@
1
1
  "use strict";
2
2
 
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
3
4
  Object.defineProperty(exports, "__esModule", {
4
5
  value: true
5
6
  });
6
7
  exports.extractPluginParamsFromProps = void 0;
7
- const extractPluginParamsFromProps = ({
8
- props,
9
- plugins,
10
- rootRef
11
- }) => {
8
+ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
9
+ const _excluded = ["slots", "slotProps"];
10
+ const extractPluginParamsFromProps = _ref => {
11
+ let {
12
+ props: {
13
+ slots,
14
+ slotProps
15
+ },
16
+ plugins,
17
+ rootRef
18
+ } = _ref,
19
+ props = (0, _objectWithoutPropertiesLoose2.default)(_ref.props, _excluded);
12
20
  const paramsLookup = {};
13
21
  plugins.forEach(plugin => {
14
22
  Object.assign(paramsLookup, plugin.params);
15
23
  });
16
24
  const pluginParams = {
17
25
  plugins,
18
- rootRef
26
+ rootRef,
27
+ slots: slots ?? {},
28
+ slotProps: slotProps ?? {}
19
29
  };
20
30
  const otherProps = {};
21
31
  Object.keys(props).forEach(propName => {
@@ -28,6 +38,8 @@ const extractPluginParamsFromProps = ({
28
38
  });
29
39
  return {
30
40
  pluginParams,
41
+ slots,
42
+ slotProps,
31
43
  otherProps
32
44
  };
33
45
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mui/x-tree-view",
3
- "version": "7.0.0-alpha.8",
3
+ "version": "7.0.0-alpha.9",
4
4
  "description": "The community edition of the tree view components (MUI X).",
5
5
  "author": "MUI Team",
6
6
  "main": "./node/index.js",
@@ -32,19 +32,19 @@
32
32
  "directory": "packages/x-tree-view"
33
33
  },
34
34
  "dependencies": {
35
- "@babel/runtime": "^7.23.7",
36
- "@mui/base": "^5.0.0-beta.29",
37
- "@mui/system": "^5.15.2",
38
- "@mui/utils": "^5.15.2",
35
+ "@babel/runtime": "^7.23.8",
36
+ "@mui/base": "^5.0.0-beta.32",
37
+ "@mui/system": "^5.15.5",
38
+ "@mui/utils": "^5.15.5",
39
39
  "@types/react-transition-group": "^4.4.10",
40
- "clsx": "^2.0.0",
40
+ "clsx": "^2.1.0",
41
41
  "prop-types": "^15.8.1",
42
42
  "react-transition-group": "^4.4.5"
43
43
  },
44
44
  "peerDependencies": {
45
45
  "@emotion/react": "^11.9.0",
46
46
  "@emotion/styled": "^11.8.1",
47
- "@mui/material": "^5.8.6",
47
+ "@mui/material": "^5.15.0",
48
48
  "react": "^17.0.0 || ^18.0.0",
49
49
  "react-dom": "^17.0.0 || ^18.0.0"
50
50
  },
@@ -4,22 +4,22 @@ export interface TreeViewComponents<Theme = unknown> {
4
4
  MuiSimpleTreeView?: {
5
5
  defaultProps?: ComponentsProps['MuiSimpleTreeView'];
6
6
  styleOverrides?: ComponentsOverrides<Theme>['MuiSimpleTreeView'];
7
- variants?: ComponentsVariants['MuiSimpleTreeView'];
7
+ variants?: ComponentsVariants<Theme>['MuiSimpleTreeView'];
8
8
  };
9
9
  MuiRichTreeView?: {
10
10
  defaultProps?: ComponentsProps['MuiRichTreeView'];
11
11
  styleOverrides?: ComponentsOverrides<Theme>['MuiRichTreeView'];
12
- variants?: ComponentsVariants['MuiRichTreeView'];
12
+ variants?: ComponentsVariants<Theme>['MuiRichTreeView'];
13
13
  };
14
14
  MuiTreeView?: {
15
15
  defaultProps?: ComponentsProps['MuiTreeView'];
16
16
  styleOverrides?: ComponentsOverrides<Theme>['MuiTreeView'];
17
- variants?: ComponentsVariants['MuiTreeView'];
17
+ variants?: ComponentsVariants<Theme>['MuiTreeView'];
18
18
  };
19
19
  MuiTreeItem?: {
20
20
  defaultProps?: ComponentsProps['MuiTreeItem'];
21
21
  styleOverrides?: ComponentsOverrides<Theme>['MuiTreeItem'];
22
- variants?: ComponentsVariants['MuiTreeItem'];
22
+ variants?: ComponentsVariants<Theme>['MuiTreeItem'];
23
23
  };
24
24
  }
25
25
 
@@ -1,2 +0,0 @@
1
- export { useTreeViewContextValueBuilder } from './useTreeViewContextValueBuilder';
2
- export type { UseTreeViewContextValueBuilderSignature, UseTreeViewContextValueBuilderParameters, UseTreeViewContextValueBuilderDefaultizedParameters, } from './useTreeViewContextValueBuilder.types';
@@ -1 +0,0 @@
1
- export { useTreeViewContextValueBuilder } from './useTreeViewContextValueBuilder';
@@ -1,3 +0,0 @@
1
- import { TreeViewPlugin } from '../../models';
2
- import { UseTreeViewContextValueBuilderSignature } from './useTreeViewContextValueBuilder.types';
3
- export declare const useTreeViewContextValueBuilder: TreeViewPlugin<UseTreeViewContextValueBuilderSignature>;
@@ -1,32 +0,0 @@
1
- export const useTreeViewContextValueBuilder = ({
2
- instance,
3
- params
4
- }) => {
5
- return {
6
- contextValue: {
7
- instance: instance,
8
- multiSelect: params.multiSelect,
9
- runItemPlugins: ({
10
- props,
11
- ref
12
- }) => ({
13
- props,
14
- ref,
15
- wrapItem: children => children
16
- }),
17
- disabledItemsFocusable: params.disabledItemsFocusable,
18
- icons: {
19
- defaultCollapseIcon: params.defaultCollapseIcon,
20
- defaultEndIcon: params.defaultEndIcon,
21
- defaultExpandIcon: params.defaultExpandIcon,
22
- defaultParentIcon: params.defaultParentIcon
23
- }
24
- }
25
- };
26
- };
27
- useTreeViewContextValueBuilder.params = {
28
- defaultCollapseIcon: true,
29
- defaultEndIcon: true,
30
- defaultExpandIcon: true,
31
- defaultParentIcon: true
32
- };
@@ -1,29 +0,0 @@
1
- import * as React from 'react';
2
- import { TreeViewPluginSignature } from '../../models';
3
- import { UseTreeViewNodesSignature } from '../useTreeViewNodes';
4
- import { UseTreeViewSelectionSignature } from '../useTreeViewSelection';
5
- export interface UseTreeViewContextValueBuilderParameters {
6
- /**
7
- * The default icon used to collapse the node.
8
- */
9
- defaultCollapseIcon?: React.ReactNode;
10
- /**
11
- * The default icon displayed next to a end node. This is applied to all
12
- * tree nodes and can be overridden by the TreeItem `icon` prop.
13
- */
14
- defaultEndIcon?: React.ReactNode;
15
- /**
16
- * The default icon used to expand the node.
17
- */
18
- defaultExpandIcon?: React.ReactNode;
19
- /**
20
- * The default icon displayed next to a parent node. This is applied to all
21
- * parent nodes and can be overridden by the TreeItem `icon` prop.
22
- */
23
- defaultParentIcon?: React.ReactNode;
24
- }
25
- export type UseTreeViewContextValueBuilderDefaultizedParameters = UseTreeViewContextValueBuilderParameters;
26
- export type UseTreeViewContextValueBuilderSignature = TreeViewPluginSignature<UseTreeViewContextValueBuilderParameters, UseTreeViewContextValueBuilderDefaultizedParameters, {}, {}, {}, never, [
27
- UseTreeViewNodesSignature,
28
- UseTreeViewSelectionSignature
29
- ]>;
@@ -1 +0,0 @@
1
- export { useTreeViewContextValueBuilder } from './useTreeViewContextValueBuilder';
@@ -1,34 +0,0 @@
1
- export var useTreeViewContextValueBuilder = function useTreeViewContextValueBuilder(_ref) {
2
- var instance = _ref.instance,
3
- params = _ref.params;
4
- return {
5
- contextValue: {
6
- instance: instance,
7
- multiSelect: params.multiSelect,
8
- runItemPlugins: function runItemPlugins(_ref2) {
9
- var props = _ref2.props,
10
- ref = _ref2.ref;
11
- return {
12
- props: props,
13
- ref: ref,
14
- wrapItem: function wrapItem(children) {
15
- return children;
16
- }
17
- };
18
- },
19
- disabledItemsFocusable: params.disabledItemsFocusable,
20
- icons: {
21
- defaultCollapseIcon: params.defaultCollapseIcon,
22
- defaultEndIcon: params.defaultEndIcon,
23
- defaultExpandIcon: params.defaultExpandIcon,
24
- defaultParentIcon: params.defaultParentIcon
25
- }
26
- }
27
- };
28
- };
29
- useTreeViewContextValueBuilder.params = {
30
- defaultCollapseIcon: true,
31
- defaultEndIcon: true,
32
- defaultExpandIcon: true,
33
- defaultParentIcon: true
34
- };
@@ -1 +0,0 @@
1
- export { useTreeViewContextValueBuilder } from './useTreeViewContextValueBuilder';
@@ -1,32 +0,0 @@
1
- export const useTreeViewContextValueBuilder = ({
2
- instance,
3
- params
4
- }) => {
5
- return {
6
- contextValue: {
7
- instance: instance,
8
- multiSelect: params.multiSelect,
9
- runItemPlugins: ({
10
- props,
11
- ref
12
- }) => ({
13
- props,
14
- ref,
15
- wrapItem: children => children
16
- }),
17
- disabledItemsFocusable: params.disabledItemsFocusable,
18
- icons: {
19
- defaultCollapseIcon: params.defaultCollapseIcon,
20
- defaultEndIcon: params.defaultEndIcon,
21
- defaultExpandIcon: params.defaultExpandIcon,
22
- defaultParentIcon: params.defaultParentIcon
23
- }
24
- }
25
- };
26
- };
27
- useTreeViewContextValueBuilder.params = {
28
- defaultCollapseIcon: true,
29
- defaultEndIcon: true,
30
- defaultExpandIcon: true,
31
- defaultParentIcon: true
32
- };
@@ -1,12 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- Object.defineProperty(exports, "useTreeViewContextValueBuilder", {
7
- enumerable: true,
8
- get: function () {
9
- return _useTreeViewContextValueBuilder.useTreeViewContextValueBuilder;
10
- }
11
- });
12
- var _useTreeViewContextValueBuilder = require("./useTreeViewContextValueBuilder");
@@ -1,39 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.useTreeViewContextValueBuilder = void 0;
7
- const useTreeViewContextValueBuilder = ({
8
- instance,
9
- params
10
- }) => {
11
- return {
12
- contextValue: {
13
- instance: instance,
14
- multiSelect: params.multiSelect,
15
- runItemPlugins: ({
16
- props,
17
- ref
18
- }) => ({
19
- props,
20
- ref,
21
- wrapItem: children => children
22
- }),
23
- disabledItemsFocusable: params.disabledItemsFocusable,
24
- icons: {
25
- defaultCollapseIcon: params.defaultCollapseIcon,
26
- defaultEndIcon: params.defaultEndIcon,
27
- defaultExpandIcon: params.defaultExpandIcon,
28
- defaultParentIcon: params.defaultParentIcon
29
- }
30
- }
31
- };
32
- };
33
- exports.useTreeViewContextValueBuilder = useTreeViewContextValueBuilder;
34
- useTreeViewContextValueBuilder.params = {
35
- defaultCollapseIcon: true,
36
- defaultEndIcon: true,
37
- defaultExpandIcon: true,
38
- defaultParentIcon: true
39
- };