@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.
- package/CHANGELOG.md +379 -2
- package/README.md +1 -1
- package/RichTreeView/RichTreeView.js +10 -36
- package/RichTreeView/RichTreeView.types.d.ts +6 -9
- package/RichTreeView/index.d.ts +1 -1
- package/SimpleTreeView/SimpleTreeView.js +12 -37
- package/SimpleTreeView/SimpleTreeView.plugins.d.ts +4 -2
- package/SimpleTreeView/SimpleTreeView.types.d.ts +8 -7
- package/SimpleTreeView/index.d.ts +1 -1
- package/TreeItem/TreeItem.js +62 -39
- package/TreeItem/TreeItem.types.d.ts +33 -17
- package/TreeItem/TreeItemContent.d.ts +0 -3
- package/TreeItem/TreeItemContent.js +2 -5
- package/TreeItem/index.d.ts +2 -2
- package/TreeItem/index.js +1 -1
- package/TreeItem/{useTreeItem.d.ts → useTreeItemState.d.ts} +1 -1
- package/{modern/TreeItem/useTreeItem.js → TreeItem/useTreeItemState.js} +4 -2
- package/TreeView/TreeView.js +0 -21
- package/TreeView/TreeView.types.d.ts +5 -1
- package/TreeView/index.d.ts +1 -1
- package/icons/icons.d.ts +6 -0
- package/icons/icons.js +9 -0
- package/icons/index.d.ts +1 -0
- package/icons/index.js +1 -0
- package/icons/package.json +6 -0
- package/index.d.ts +1 -0
- package/index.js +3 -2
- package/internals/TreeViewProvider/TreeViewContext.d.ts +4 -2
- package/internals/TreeViewProvider/TreeViewProvider.types.d.ts +3 -11
- package/internals/corePlugins/useTreeViewInstanceEvents/useTreeViewInstanceEvents.types.d.ts +3 -2
- package/internals/index.d.ts +15 -0
- package/internals/index.js +4 -0
- package/internals/models/helpers.d.ts +7 -1
- package/internals/models/plugin.d.ts +64 -20
- package/internals/models/treeView.d.ts +1 -2
- package/internals/package.json +6 -0
- package/internals/plugins/defaultPlugins.d.ts +6 -4
- package/internals/plugins/defaultPlugins.js +2 -2
- package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js +8 -10
- package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.types.d.ts +7 -3
- package/internals/plugins/useTreeViewFocus/useTreeViewFocus.js +0 -6
- package/internals/plugins/useTreeViewFocus/useTreeViewFocus.types.d.ts +12 -6
- package/internals/plugins/useTreeViewIcons/index.d.ts +2 -0
- package/internals/plugins/useTreeViewIcons/index.js +1 -0
- package/internals/plugins/useTreeViewIcons/useTreeViewIcons.d.ts +3 -0
- package/internals/plugins/useTreeViewIcons/useTreeViewIcons.js +22 -0
- package/internals/plugins/useTreeViewIcons/useTreeViewIcons.types.d.ts +43 -0
- package/internals/plugins/useTreeViewId/useTreeViewId.types.d.ts +6 -2
- package/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.types.d.ts +6 -4
- package/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.types.d.ts +9 -6
- package/internals/plugins/useTreeViewNodes/useTreeViewNodes.js +11 -0
- package/internals/plugins/useTreeViewNodes/useTreeViewNodes.types.d.ts +10 -2
- package/internals/plugins/useTreeViewSelection/useTreeViewSelection.js +9 -5
- package/internals/plugins/useTreeViewSelection/useTreeViewSelection.types.d.ts +15 -5
- package/internals/useTreeView/useTreeView.js +7 -3
- package/internals/useTreeView/useTreeView.types.d.ts +6 -6
- package/internals/useTreeView/useTreeViewModels.js +10 -11
- package/internals/utils/extractPluginParamsFromProps.d.ts +8 -5
- package/internals/utils/extractPluginParamsFromProps.js +17 -6
- package/legacy/RichTreeView/RichTreeView.js +3 -27
- package/legacy/SimpleTreeView/SimpleTreeView.js +4 -28
- package/legacy/TreeItem/TreeItem.js +63 -39
- package/legacy/TreeItem/TreeItemContent.js +9 -12
- package/legacy/TreeItem/index.js +1 -1
- package/legacy/TreeItem/{useTreeItem.js → useTreeItemState.js} +2 -2
- package/legacy/TreeView/TreeView.js +0 -21
- package/legacy/icons/icons.js +9 -0
- package/legacy/icons/index.js +1 -0
- package/legacy/index.js +3 -2
- package/legacy/internals/index.js +4 -0
- package/legacy/internals/plugins/defaultPlugins.js +2 -2
- package/legacy/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js +10 -10
- package/legacy/internals/plugins/useTreeViewFocus/useTreeViewFocus.js +0 -6
- package/legacy/internals/plugins/useTreeViewIcons/index.js +1 -0
- package/legacy/internals/plugins/useTreeViewIcons/useTreeViewIcons.js +21 -0
- package/legacy/internals/plugins/useTreeViewNodes/useTreeViewNodes.js +11 -0
- package/legacy/internals/plugins/useTreeViewSelection/useTreeViewSelection.js +12 -6
- package/legacy/internals/useTreeView/useTreeView.js +6 -2
- package/legacy/internals/useTreeView/useTreeViewModels.js +10 -11
- package/legacy/internals/utils/extractPluginParamsFromProps.js +11 -2
- package/modern/RichTreeView/RichTreeView.js +10 -36
- package/modern/SimpleTreeView/SimpleTreeView.js +12 -37
- package/modern/TreeItem/TreeItem.js +61 -39
- package/modern/TreeItem/TreeItemContent.js +2 -5
- package/modern/TreeItem/index.js +1 -1
- package/{TreeItem/useTreeItem.js → modern/TreeItem/useTreeItemState.js} +4 -2
- package/modern/TreeView/TreeView.js +0 -21
- package/modern/icons/icons.js +9 -0
- package/modern/icons/index.js +1 -0
- package/modern/index.js +3 -2
- package/modern/internals/index.js +4 -0
- package/modern/internals/plugins/defaultPlugins.js +2 -2
- package/modern/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js +7 -10
- package/modern/internals/plugins/useTreeViewFocus/useTreeViewFocus.js +0 -3
- package/modern/internals/plugins/useTreeViewIcons/index.js +1 -0
- package/modern/internals/plugins/useTreeViewIcons/useTreeViewIcons.js +22 -0
- package/modern/internals/plugins/useTreeViewNodes/useTreeViewNodes.js +8 -0
- package/modern/internals/plugins/useTreeViewSelection/useTreeViewSelection.js +9 -5
- package/modern/internals/useTreeView/useTreeView.js +7 -3
- package/modern/internals/useTreeView/useTreeViewModels.js +10 -11
- package/modern/internals/utils/extractPluginParamsFromProps.js +17 -6
- package/node/RichTreeView/RichTreeView.js +10 -36
- package/node/SimpleTreeView/SimpleTreeView.js +12 -37
- package/node/TreeItem/TreeItem.js +61 -39
- package/node/TreeItem/TreeItemContent.js +2 -5
- package/node/TreeItem/index.js +4 -4
- package/node/TreeItem/{useTreeItem.js → useTreeItemState.js} +5 -3
- package/node/TreeView/TreeView.js +0 -21
- package/node/icons/icons.js +17 -0
- package/node/icons/index.js +16 -0
- package/node/index.js +13 -1
- package/node/internals/index.js +33 -0
- package/node/internals/plugins/defaultPlugins.js +2 -2
- package/node/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js +7 -10
- package/node/internals/plugins/useTreeViewFocus/useTreeViewFocus.js +0 -3
- package/node/internals/plugins/useTreeViewIcons/index.js +12 -0
- package/node/internals/plugins/useTreeViewIcons/useTreeViewIcons.js +29 -0
- package/node/internals/plugins/useTreeViewNodes/useTreeViewNodes.js +8 -0
- package/node/internals/plugins/useTreeViewSelection/useTreeViewSelection.js +9 -5
- package/node/internals/useTreeView/useTreeView.js +7 -3
- package/node/internals/useTreeView/useTreeViewModels.js +10 -11
- package/node/internals/utils/extractPluginParamsFromProps.js +18 -6
- package/package.json +7 -7
- package/themeAugmentation/components.d.ts +4 -4
- package/internals/plugins/useTreeViewContextValueBuilder/index.d.ts +0 -2
- package/internals/plugins/useTreeViewContextValueBuilder/index.js +0 -1
- package/internals/plugins/useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.d.ts +0 -3
- package/internals/plugins/useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.js +0 -32
- package/internals/plugins/useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.types.d.ts +0 -29
- package/legacy/internals/plugins/useTreeViewContextValueBuilder/index.js +0 -1
- package/legacy/internals/plugins/useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.js +0 -34
- package/modern/internals/plugins/useTreeViewContextValueBuilder/index.js +0 -1
- package/modern/internals/plugins/useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.js +0 -32
- package/node/internals/plugins/useTreeViewContextValueBuilder/index.js +0 -12
- package/node/internals/plugins/useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.js +0 -39
- /package/internals/plugins/{useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.types.js → useTreeViewIcons/useTreeViewIcons.types.js} +0 -0
- /package/legacy/internals/plugins/{useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.types.js → useTreeViewIcons/useTreeViewIcons.types.js} +0 -0
- /package/modern/internals/plugins/{useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.types.js → useTreeViewIcons/useTreeViewIcons.types.js} +0 -0
- /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.
|
|
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
|
|
14
|
-
const DEFAULT_TREE_VIEW_PLUGINS = exports.DEFAULT_TREE_VIEW_PLUGINS = [_useTreeViewId.useTreeViewId, _useTreeViewNodes.useTreeViewNodes, _useTreeViewExpansion.useTreeViewExpansion, _useTreeViewSelection.useTreeViewSelection, _useTreeViewFocus.useTreeViewFocus, _useTreeViewKeyboardNavigation.useTreeViewKeyboardNavigation,
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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.
|
|
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
|
-
|
|
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
|
-
|
|
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
|
|
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,
|
|
22
|
+
Object.entries(plugin.models).forEach(([modelName, modelInitializer]) => {
|
|
23
23
|
modelsRef.current[modelName] = {
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
isControlled: props[model.controlledProp] !== undefined
|
|
24
|
+
isControlled: props[modelName] !== undefined,
|
|
25
|
+
getDefaultValue: modelInitializer.getDefaultValue
|
|
27
26
|
};
|
|
28
|
-
initialState[modelName] = props
|
|
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[
|
|
34
|
+
const value = model.isControlled ? props[modelName] : modelsState[modelName];
|
|
36
35
|
return [modelName, {
|
|
37
36
|
value,
|
|
38
|
-
|
|
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[
|
|
53
|
-
const
|
|
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(
|
|
60
|
+
} = React.useRef(newDefaultValue);
|
|
62
61
|
React.useEffect(() => {
|
|
63
|
-
if (!model.isControlled && defaultValue !==
|
|
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
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
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.
|
|
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.
|
|
36
|
-
"@mui/base": "^5.0.0-beta.
|
|
37
|
-
"@mui/system": "^5.15.
|
|
38
|
-
"@mui/utils": "^5.15.
|
|
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.
|
|
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.
|
|
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,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
|
-
};
|
package/internals/plugins/useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.types.d.ts
DELETED
|
@@ -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';
|
package/legacy/internals/plugins/useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.js
DELETED
|
@@ -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';
|
package/modern/internals/plugins/useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.js
DELETED
|
@@ -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");
|
package/node/internals/plugins/useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.js
DELETED
|
@@ -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
|
-
};
|
|
File without changes
|
|
File without changes
|
|
File without changes
|