@mui/x-tree-view 7.0.0-alpha.8 → 7.0.0-beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +508 -30
- package/README.md +3 -3
- 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 -55
- package/SimpleTreeView/SimpleTreeView.plugins.d.ts +5 -3
- 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 -39
- 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.js +10 -5
- 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 +14 -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 -46
- 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 -39
- 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/useTreeViewJSXNodes/useTreeViewJSXNodes.js +3 -0
- package/legacy/internals/plugins/useTreeViewNodes/useTreeViewNodes.js +14 -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 -55
- 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 -39
- 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/useTreeViewJSXNodes/useTreeViewJSXNodes.js +10 -5
- package/modern/internals/plugins/useTreeViewNodes/useTreeViewNodes.js +11 -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 -55
- 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 -39
- 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/useTreeViewJSXNodes/useTreeViewJSXNodes.js +10 -5
- package/node/internals/plugins/useTreeViewNodes/useTreeViewNodes.js +11 -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
|
@@ -4,7 +4,7 @@ var _excluded = ["classes", "className", "displayIcon", "expansionIcon", "icon",
|
|
|
4
4
|
import * as React from 'react';
|
|
5
5
|
import PropTypes from 'prop-types';
|
|
6
6
|
import clsx from 'clsx';
|
|
7
|
-
import {
|
|
7
|
+
import { useTreeItemState } from './useTreeItemState';
|
|
8
8
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
9
9
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
10
10
|
/**
|
|
@@ -21,14 +21,14 @@ var TreeItemContent = /*#__PURE__*/React.forwardRef(function TreeItemContent(pro
|
|
|
21
21
|
onClick = props.onClick,
|
|
22
22
|
onMouseDown = props.onMouseDown,
|
|
23
23
|
other = _objectWithoutProperties(props, _excluded);
|
|
24
|
-
var
|
|
25
|
-
disabled =
|
|
26
|
-
expanded =
|
|
27
|
-
selected =
|
|
28
|
-
focused =
|
|
29
|
-
handleExpansion =
|
|
30
|
-
handleSelection =
|
|
31
|
-
preventSelection =
|
|
24
|
+
var _useTreeItemState = useTreeItemState(nodeId),
|
|
25
|
+
disabled = _useTreeItemState.disabled,
|
|
26
|
+
expanded = _useTreeItemState.expanded,
|
|
27
|
+
selected = _useTreeItemState.selected,
|
|
28
|
+
focused = _useTreeItemState.focused,
|
|
29
|
+
handleExpansion = _useTreeItemState.handleExpansion,
|
|
30
|
+
handleSelection = _useTreeItemState.handleSelection,
|
|
31
|
+
preventSelection = _useTreeItemState.preventSelection;
|
|
32
32
|
var icon = iconProp || expansionIcon || displayIcon;
|
|
33
33
|
var handleMouseDown = function handleMouseDown(event) {
|
|
34
34
|
preventSelection(event);
|
|
@@ -70,9 +70,6 @@ process.env.NODE_ENV !== "production" ? TreeItemContent.propTypes = {
|
|
|
70
70
|
* Override or extend the styles applied to the component.
|
|
71
71
|
*/
|
|
72
72
|
classes: PropTypes.object.isRequired,
|
|
73
|
-
/**
|
|
74
|
-
* className applied to the root element.
|
|
75
|
-
*/
|
|
76
73
|
className: PropTypes.string,
|
|
77
74
|
/**
|
|
78
75
|
* The icon to display next to the tree node's label. Either a parent or end icon.
|
package/legacy/TreeItem/index.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { useTreeViewContext } from '../internals/TreeViewProvider/useTreeViewContext';
|
|
2
|
-
export function
|
|
2
|
+
export function useTreeItemState(nodeId) {
|
|
3
3
|
var _useTreeViewContext = useTreeViewContext(),
|
|
4
4
|
instance = _useTreeViewContext.instance,
|
|
5
|
-
multiSelect = _useTreeViewContext.multiSelect;
|
|
5
|
+
multiSelect = _useTreeViewContext.selection.multiSelect;
|
|
6
6
|
var expandable = instance.isNodeExpandable(nodeId);
|
|
7
7
|
var expanded = instance.isNodeExpanded(nodeId);
|
|
8
8
|
var focused = instance.isNodeFocused(nodeId);
|
|
@@ -72,34 +72,13 @@ process.env.NODE_ENV !== "production" ? TreeView.propTypes = {
|
|
|
72
72
|
* Override or extend the styles applied to the component.
|
|
73
73
|
*/
|
|
74
74
|
classes: PropTypes.object,
|
|
75
|
-
/**
|
|
76
|
-
* className applied to the root element.
|
|
77
|
-
*/
|
|
78
75
|
className: PropTypes.string,
|
|
79
|
-
/**
|
|
80
|
-
* The default icon used to collapse the node.
|
|
81
|
-
*/
|
|
82
|
-
defaultCollapseIcon: PropTypes.node,
|
|
83
|
-
/**
|
|
84
|
-
* The default icon displayed next to a end node. This is applied to all
|
|
85
|
-
* tree nodes and can be overridden by the TreeItem `icon` prop.
|
|
86
|
-
*/
|
|
87
|
-
defaultEndIcon: PropTypes.node,
|
|
88
76
|
/**
|
|
89
77
|
* Expanded node ids.
|
|
90
78
|
* Used when the item's expansion is not controlled.
|
|
91
79
|
* @default []
|
|
92
80
|
*/
|
|
93
81
|
defaultExpandedNodes: PropTypes.arrayOf(PropTypes.string),
|
|
94
|
-
/**
|
|
95
|
-
* The default icon used to expand the node.
|
|
96
|
-
*/
|
|
97
|
-
defaultExpandIcon: PropTypes.node,
|
|
98
|
-
/**
|
|
99
|
-
* The default icon displayed next to a parent node. This is applied to all
|
|
100
|
-
* parent nodes and can be overridden by the TreeItem `icon` prop.
|
|
101
|
-
*/
|
|
102
|
-
defaultParentIcon: PropTypes.node,
|
|
103
82
|
/**
|
|
104
83
|
* Selected node ids. (Uncontrolled)
|
|
105
84
|
* When `multiSelect` is true this takes an array of strings; when false (default) a string.
|
|
@@ -121,24 +100,6 @@ process.env.NODE_ENV !== "production" ? TreeView.propTypes = {
|
|
|
121
100
|
* Used when the item's expansion is controlled.
|
|
122
101
|
*/
|
|
123
102
|
expandedNodes: PropTypes.arrayOf(PropTypes.string),
|
|
124
|
-
/**
|
|
125
|
-
* Used to determine the string label for a given item.
|
|
126
|
-
*
|
|
127
|
-
* @template R
|
|
128
|
-
* @param {R} item The item to check.
|
|
129
|
-
* @returns {string} The id of the item.
|
|
130
|
-
* @default `(item) => item.id`
|
|
131
|
-
*/
|
|
132
|
-
getItemId: PropTypes.func,
|
|
133
|
-
/**
|
|
134
|
-
* Used to determine the string label for a given item.
|
|
135
|
-
*
|
|
136
|
-
* @template R
|
|
137
|
-
* @param {R} item The item to check.
|
|
138
|
-
* @returns {string} The label of the item.
|
|
139
|
-
* @default `(item) => item.label`
|
|
140
|
-
*/
|
|
141
|
-
getItemLabel: PropTypes.func,
|
|
142
103
|
/**
|
|
143
104
|
* This prop is used to help implement the accessibility logic.
|
|
144
105
|
* If you don't provide this prop. It falls back to a randomly generated id.
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { createSvgIcon } from '@mui/material/utils';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
4
|
+
export var TreeViewExpandIcon = createSvgIcon( /*#__PURE__*/_jsx("path", {
|
|
5
|
+
d: "M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
|
|
6
|
+
}), 'TreeViewExpandIcon');
|
|
7
|
+
export var TreeViewCollapseIcon = createSvgIcon( /*#__PURE__*/_jsx("path", {
|
|
8
|
+
d: "M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"
|
|
9
|
+
}), 'TreeViewCollapseIcon');
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './icons';
|
package/legacy/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @mui/x-tree-view v7.0.0-
|
|
2
|
+
* @mui/x-tree-view v7.0.0-beta.0
|
|
3
3
|
*
|
|
4
4
|
* @license MIT
|
|
5
5
|
* This source code is licensed under the MIT license found in the
|
|
@@ -10,4 +10,5 @@ export * from './TreeView';
|
|
|
10
10
|
export * from './SimpleTreeView';
|
|
11
11
|
export * from './RichTreeView';
|
|
12
12
|
export { unstable_resetCleanupTracking } from './internals/hooks/useInstanceEventHandler';
|
|
13
|
-
export * from './models';
|
|
13
|
+
export * from './models';
|
|
14
|
+
export * from './icons';
|
|
@@ -4,7 +4,7 @@ import { useTreeViewExpansion } from './useTreeViewExpansion';
|
|
|
4
4
|
import { useTreeViewSelection } from './useTreeViewSelection';
|
|
5
5
|
import { useTreeViewFocus } from './useTreeViewFocus';
|
|
6
6
|
import { useTreeViewKeyboardNavigation } from './useTreeViewKeyboardNavigation';
|
|
7
|
-
import {
|
|
8
|
-
export var DEFAULT_TREE_VIEW_PLUGINS = [useTreeViewId, useTreeViewNodes, useTreeViewExpansion, useTreeViewSelection, useTreeViewFocus, useTreeViewKeyboardNavigation,
|
|
7
|
+
import { useTreeViewIcons } from './useTreeViewIcons';
|
|
8
|
+
export var DEFAULT_TREE_VIEW_PLUGINS = [useTreeViewId, useTreeViewNodes, useTreeViewExpansion, useTreeViewSelection, useTreeViewFocus, useTreeViewKeyboardNavigation, useTreeViewIcons];
|
|
9
9
|
|
|
10
10
|
// We can't infer this type from the plugin, otherwise we would lose the generics.
|
|
@@ -6,6 +6,11 @@ export var useTreeViewExpansion = function useTreeViewExpansion(_ref) {
|
|
|
6
6
|
var instance = _ref.instance,
|
|
7
7
|
params = _ref.params,
|
|
8
8
|
models = _ref.models;
|
|
9
|
+
var setExpandedNodes = function setExpandedNodes(event, value) {
|
|
10
|
+
var _params$onExpandedNod;
|
|
11
|
+
(_params$onExpandedNod = params.onExpandedNodesChange) == null || _params$onExpandedNod.call(params, event, value);
|
|
12
|
+
models.expandedNodes.setControlledValue(value);
|
|
13
|
+
};
|
|
9
14
|
var isNodeExpanded = React.useCallback(function (nodeId) {
|
|
10
15
|
return Array.isArray(models.expandedNodes.value) ? models.expandedNodes.value.indexOf(nodeId) !== -1 : false;
|
|
11
16
|
}, [models.expandedNodes.value]);
|
|
@@ -29,10 +34,7 @@ export var useTreeViewExpansion = function useTreeViewExpansion(_ref) {
|
|
|
29
34
|
if (params.onNodeExpansionToggle) {
|
|
30
35
|
params.onNodeExpansionToggle(event, nodeId, !isExpandedBefore);
|
|
31
36
|
}
|
|
32
|
-
|
|
33
|
-
params.onExpandedNodesChange(event, newExpanded);
|
|
34
|
-
}
|
|
35
|
-
models.expandedNodes.setValue(newExpanded);
|
|
37
|
+
setExpandedNodes(event, newExpanded);
|
|
36
38
|
});
|
|
37
39
|
var expandAllSiblings = function expandAllSiblings(event, nodeId) {
|
|
38
40
|
var node = instance.getNode(nodeId);
|
|
@@ -47,10 +49,7 @@ export var useTreeViewExpansion = function useTreeViewExpansion(_ref) {
|
|
|
47
49
|
params.onNodeExpansionToggle(event, newlyExpandedNodeId, true);
|
|
48
50
|
});
|
|
49
51
|
}
|
|
50
|
-
|
|
51
|
-
params.onExpandedNodesChange(event, newExpanded);
|
|
52
|
-
}
|
|
53
|
-
models.expandedNodes.setValue(newExpanded);
|
|
52
|
+
setExpandedNodes(event, newExpanded);
|
|
54
53
|
}
|
|
55
54
|
};
|
|
56
55
|
populateInstance(instance, {
|
|
@@ -62,8 +61,9 @@ export var useTreeViewExpansion = function useTreeViewExpansion(_ref) {
|
|
|
62
61
|
};
|
|
63
62
|
useTreeViewExpansion.models = {
|
|
64
63
|
expandedNodes: {
|
|
65
|
-
|
|
66
|
-
|
|
64
|
+
getDefaultValue: function getDefaultValue(params) {
|
|
65
|
+
return params.defaultExpandedNodes;
|
|
66
|
+
}
|
|
67
67
|
}
|
|
68
68
|
};
|
|
69
69
|
var DEFAULT_EXPANDED_NODES = [];
|
|
@@ -98,12 +98,6 @@ useTreeViewFocus.getInitialState = function () {
|
|
|
98
98
|
focusedNodeId: null
|
|
99
99
|
};
|
|
100
100
|
};
|
|
101
|
-
useTreeViewFocus.getDefaultizedParams = function (params) {
|
|
102
|
-
var _params$disabledItems;
|
|
103
|
-
return _extends({}, params, {
|
|
104
|
-
disabledItemsFocusable: (_params$disabledItems = params.disabledItemsFocusable) != null ? _params$disabledItems : false
|
|
105
|
-
});
|
|
106
|
-
};
|
|
107
101
|
useTreeViewFocus.params = {
|
|
108
102
|
onNodeFocus: true
|
|
109
103
|
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { useTreeViewIcons } from './useTreeViewIcons';
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
export var useTreeViewIcons = function useTreeViewIcons(_ref) {
|
|
2
|
+
var slots = _ref.slots,
|
|
3
|
+
slotProps = _ref.slotProps;
|
|
4
|
+
return {
|
|
5
|
+
contextValue: {
|
|
6
|
+
icons: {
|
|
7
|
+
slots: {
|
|
8
|
+
collapseIcon: slots.collapseIcon,
|
|
9
|
+
expandIcon: slots.expandIcon,
|
|
10
|
+
endIcon: slots.endIcon
|
|
11
|
+
},
|
|
12
|
+
slotProps: {
|
|
13
|
+
collapseIcon: slotProps.collapseIcon,
|
|
14
|
+
expandIcon: slotProps.expandIcon,
|
|
15
|
+
endIcon: slotProps.endIcon
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
};
|
|
20
|
+
};
|
|
21
|
+
useTreeViewIcons.params = {};
|
|
@@ -14,6 +14,9 @@ export var useTreeViewJSXNodes = function useTreeViewJSXNodes(_ref) {
|
|
|
14
14
|
setState = _ref.setState;
|
|
15
15
|
var insertJSXNode = useEventCallback(function (node) {
|
|
16
16
|
setState(function (prevState) {
|
|
17
|
+
if (prevState.nodeMap[node.id] != null) {
|
|
18
|
+
throw new Error(['MUI X: The Tree View component requires all items to have a unique `id` property.', 'Alternatively, you can use the `getItemId` prop to specify a custom id for each item.', "Tow items were provided with the same id in the `items` prop: \"".concat(node.id, "\"")].join('\n'));
|
|
19
|
+
}
|
|
17
20
|
return _extends({}, prevState, {
|
|
18
21
|
nodeMap: _extends({}, prevState.nodeMap, _defineProperty({}, node.id, node))
|
|
19
22
|
});
|
|
@@ -15,6 +15,9 @@ var updateState = function updateState(_ref) {
|
|
|
15
15
|
if (id == null) {
|
|
16
16
|
throw new Error(['MUI X: The Tree View component requires all items to have a unique `id` property.', 'Alternatively, you can use the `getItemId` prop to specify a custom id for each item.', 'An item was provided without id in the `items` prop:', JSON.stringify(item)].join('\n'));
|
|
17
17
|
}
|
|
18
|
+
if (nodeMap[id] != null) {
|
|
19
|
+
throw new Error(['MUI X: The Tree View component requires all items to have a unique `id` property.', 'Alternatively, you can use the `getItemId` prop to specify a custom id for each item.', "Tow items were provided with the same id in the `items` prop: \"".concat(id, "\"")].join('\n'));
|
|
20
|
+
}
|
|
18
21
|
var label = getItemLabel ? getItemLabel(item) : item.label;
|
|
19
22
|
if (label == null) {
|
|
20
23
|
throw new Error(['MUI X: The Tree View component requires all items to have a `label` property.', 'Alternatively, you can use the `getItemLabel` prop to specify a custom label for each item.', 'An item was provided without label in the `items` prop:', JSON.stringify(item)].join('\n'));
|
|
@@ -129,6 +132,11 @@ export var useTreeViewNodes = function useTreeViewNodes(_ref2) {
|
|
|
129
132
|
getNavigableChildrenIds: getNavigableChildrenIds,
|
|
130
133
|
isNodeDisabled: isNodeDisabled
|
|
131
134
|
});
|
|
135
|
+
return {
|
|
136
|
+
contextValue: {
|
|
137
|
+
disabledItemsFocusable: params.disabledItemsFocusable
|
|
138
|
+
}
|
|
139
|
+
};
|
|
132
140
|
};
|
|
133
141
|
useTreeViewNodes.getInitialState = function (params) {
|
|
134
142
|
return updateState({
|
|
@@ -138,6 +146,12 @@ useTreeViewNodes.getInitialState = function (params) {
|
|
|
138
146
|
getItemLabel: params.getItemLabel
|
|
139
147
|
});
|
|
140
148
|
};
|
|
149
|
+
useTreeViewNodes.getDefaultizedParams = function (params) {
|
|
150
|
+
var _params$disabledItems;
|
|
151
|
+
return _extends({}, params, {
|
|
152
|
+
disabledItemsFocusable: (_params$disabledItems = params.disabledItemsFocusable) != null ? _params$disabledItems : false
|
|
153
|
+
});
|
|
154
|
+
};
|
|
141
155
|
useTreeViewNodes.params = {
|
|
142
156
|
disabledItemsFocusable: true,
|
|
143
157
|
items: true,
|
|
@@ -10,9 +10,6 @@ export var useTreeViewSelection = function useTreeViewSelection(_ref) {
|
|
|
10
10
|
var lastSelectedNode = React.useRef(null);
|
|
11
11
|
var lastSelectionWasRange = React.useRef(false);
|
|
12
12
|
var currentRangeSelection = React.useRef([]);
|
|
13
|
-
var isNodeSelected = function isNodeSelected(nodeId) {
|
|
14
|
-
return Array.isArray(models.selectedNodes.value) ? models.selectedNodes.value.indexOf(nodeId) !== -1 : models.selectedNodes.value === nodeId;
|
|
15
|
-
};
|
|
16
13
|
var setSelectedNodes = function setSelectedNodes(event, newSelectedNodes) {
|
|
17
14
|
if (params.onNodeSelectionToggle) {
|
|
18
15
|
if (params.multiSelect) {
|
|
@@ -40,7 +37,10 @@ export var useTreeViewSelection = function useTreeViewSelection(_ref) {
|
|
|
40
37
|
if (params.onSelectedNodesChange) {
|
|
41
38
|
params.onSelectedNodesChange(event, newSelectedNodes);
|
|
42
39
|
}
|
|
43
|
-
models.selectedNodes.
|
|
40
|
+
models.selectedNodes.setControlledValue(newSelectedNodes);
|
|
41
|
+
};
|
|
42
|
+
var isNodeSelected = function isNodeSelected(nodeId) {
|
|
43
|
+
return Array.isArray(models.selectedNodes.value) ? models.selectedNodes.value.indexOf(nodeId) !== -1 : models.selectedNodes.value === nodeId;
|
|
44
44
|
};
|
|
45
45
|
var selectNode = function selectNode(event, nodeId) {
|
|
46
46
|
var multiple = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
|
|
@@ -185,13 +185,19 @@ export var useTreeViewSelection = function useTreeViewSelection(_ref) {
|
|
|
185
185
|
return {
|
|
186
186
|
'aria-multiselectable': params.multiSelect
|
|
187
187
|
};
|
|
188
|
+
},
|
|
189
|
+
contextValue: {
|
|
190
|
+
selection: {
|
|
191
|
+
multiSelect: params.multiSelect
|
|
192
|
+
}
|
|
188
193
|
}
|
|
189
194
|
};
|
|
190
195
|
};
|
|
191
196
|
useTreeViewSelection.models = {
|
|
192
197
|
selectedNodes: {
|
|
193
|
-
|
|
194
|
-
|
|
198
|
+
getDefaultValue: function getDefaultValue(params) {
|
|
199
|
+
return params.defaultSelectedNodes;
|
|
200
|
+
}
|
|
195
201
|
}
|
|
196
202
|
};
|
|
197
203
|
var DEFAULT_SELECTED_NODES = [];
|
|
@@ -31,11 +31,15 @@ export var useTreeView = function useTreeView(inParams) {
|
|
|
31
31
|
state = _React$useState2[0],
|
|
32
32
|
setState = _React$useState2[1];
|
|
33
33
|
var rootPropsGetters = [];
|
|
34
|
-
var contextValue = {
|
|
34
|
+
var contextValue = {
|
|
35
|
+
instance: instance
|
|
36
|
+
};
|
|
35
37
|
var runPlugin = function runPlugin(plugin) {
|
|
36
38
|
var pluginResponse = plugin({
|
|
37
39
|
instance: instance,
|
|
38
40
|
params: params,
|
|
41
|
+
slots: params.slots,
|
|
42
|
+
slotProps: params.slotProps,
|
|
39
43
|
state: state,
|
|
40
44
|
setState: setState,
|
|
41
45
|
rootRef: innerRootRef,
|
|
@@ -45,7 +49,7 @@ export var useTreeView = function useTreeView(inParams) {
|
|
|
45
49
|
rootPropsGetters.push(pluginResponse.getRootProps);
|
|
46
50
|
}
|
|
47
51
|
if (pluginResponse.contextValue) {
|
|
48
|
-
contextValue
|
|
52
|
+
_extends(contextValue, pluginResponse.contextValue);
|
|
49
53
|
}
|
|
50
54
|
};
|
|
51
55
|
plugins.forEach(runPlugin);
|
|
@@ -15,13 +15,12 @@ export var useTreeViewModels = function useTreeViewModels(plugins, props) {
|
|
|
15
15
|
Object.entries(plugin.models).forEach(function (_ref) {
|
|
16
16
|
var _ref2 = _slicedToArray(_ref, 2),
|
|
17
17
|
modelName = _ref2[0],
|
|
18
|
-
|
|
18
|
+
modelInitializer = _ref2[1];
|
|
19
19
|
modelsRef.current[modelName] = {
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
isControlled: props[model.controlledProp] !== undefined
|
|
20
|
+
isControlled: props[modelName] !== undefined,
|
|
21
|
+
getDefaultValue: modelInitializer.getDefaultValue
|
|
23
22
|
};
|
|
24
|
-
initialState[modelName] = props
|
|
23
|
+
initialState[modelName] = modelInitializer.getDefaultValue(props);
|
|
25
24
|
});
|
|
26
25
|
}
|
|
27
26
|
});
|
|
@@ -34,10 +33,10 @@ export var useTreeViewModels = function useTreeViewModels(plugins, props) {
|
|
|
34
33
|
var _ref4 = _slicedToArray(_ref3, 2),
|
|
35
34
|
modelName = _ref4[0],
|
|
36
35
|
model = _ref4[1];
|
|
37
|
-
var value = model.isControlled ? props[
|
|
36
|
+
var value = model.isControlled ? props[modelName] : modelsState[modelName];
|
|
38
37
|
return [modelName, {
|
|
39
38
|
value: value,
|
|
40
|
-
|
|
39
|
+
setControlledValue: function setControlledValue(newValue) {
|
|
41
40
|
if (!model.isControlled) {
|
|
42
41
|
setModelsState(function (prevState) {
|
|
43
42
|
return _extends({}, prevState, _defineProperty({}, modelName, newValue));
|
|
@@ -54,17 +53,17 @@ export var useTreeViewModels = function useTreeViewModels(plugins, props) {
|
|
|
54
53
|
var _ref6 = _slicedToArray(_ref5, 2),
|
|
55
54
|
modelName = _ref6[0],
|
|
56
55
|
model = _ref6[1];
|
|
57
|
-
var controlled = props[
|
|
58
|
-
var
|
|
56
|
+
var controlled = props[modelName];
|
|
57
|
+
var newDefaultValue = model.getDefaultValue(props);
|
|
59
58
|
React.useEffect(function () {
|
|
60
59
|
if (model.isControlled !== (controlled !== undefined)) {
|
|
61
60
|
console.error(["MUI X: A component is changing the ".concat(model.isControlled ? '' : 'un', "controlled ").concat(modelName, " state of TreeView to be ").concat(model.isControlled ? 'un' : '', "controlled."), 'Elements should not switch from uncontrolled to controlled (or vice versa).', "Decide between using a controlled or uncontrolled ".concat(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'));
|
|
62
61
|
}
|
|
63
62
|
}, [controlled]);
|
|
64
|
-
var _React$useRef = React.useRef(
|
|
63
|
+
var _React$useRef = React.useRef(newDefaultValue),
|
|
65
64
|
defaultValue = _React$useRef.current;
|
|
66
65
|
React.useEffect(function () {
|
|
67
|
-
if (!model.isControlled && defaultValue !==
|
|
66
|
+
if (!model.isControlled && defaultValue !== newDefaultValue) {
|
|
68
67
|
console.error(["MUI X: A component is changing the default ".concat(modelName, " state of an uncontrolled TreeView after being initialized. ") + "To suppress this warning opt to use a controlled TreeView."].join('\n'));
|
|
69
68
|
}
|
|
70
69
|
}, [JSON.stringify(defaultValue)]);
|
|
@@ -1,6 +1,11 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
3
|
+
var _excluded = ["slots", "slotProps"];
|
|
2
4
|
export var extractPluginParamsFromProps = function extractPluginParamsFromProps(_ref) {
|
|
3
|
-
var props = _ref.props,
|
|
5
|
+
var _ref$props = _ref.props,
|
|
6
|
+
slots = _ref$props.slots,
|
|
7
|
+
slotProps = _ref$props.slotProps,
|
|
8
|
+
props = _objectWithoutProperties(_ref$props, _excluded),
|
|
4
9
|
plugins = _ref.plugins,
|
|
5
10
|
rootRef = _ref.rootRef;
|
|
6
11
|
var paramsLookup = {};
|
|
@@ -9,7 +14,9 @@ export var extractPluginParamsFromProps = function extractPluginParamsFromProps(
|
|
|
9
14
|
});
|
|
10
15
|
var pluginParams = {
|
|
11
16
|
plugins: plugins,
|
|
12
|
-
rootRef: rootRef
|
|
17
|
+
rootRef: rootRef,
|
|
18
|
+
slots: slots != null ? slots : {},
|
|
19
|
+
slotProps: slotProps != null ? slotProps : {}
|
|
13
20
|
};
|
|
14
21
|
var otherProps = {};
|
|
15
22
|
Object.keys(props).forEach(function (propName) {
|
|
@@ -22,6 +29,8 @@ export var extractPluginParamsFromProps = function extractPluginParamsFromProps(
|
|
|
22
29
|
});
|
|
23
30
|
return {
|
|
24
31
|
pluginParams: pluginParams,
|
|
32
|
+
slots: slots,
|
|
33
|
+
slotProps: slotProps,
|
|
25
34
|
otherProps: otherProps
|
|
26
35
|
};
|
|
27
36
|
};
|
|
@@ -1,6 +1,4 @@
|
|
|
1
|
-
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
2
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
3
|
-
const _excluded = ["slots", "slotProps"];
|
|
4
2
|
import * as React from 'react';
|
|
5
3
|
import PropTypes from 'prop-types';
|
|
6
4
|
import { styled, useThemeProps } from '@mui/material/styles';
|
|
@@ -81,19 +79,16 @@ const RichTreeView = /*#__PURE__*/React.forwardRef(function RichTreeView(inProps
|
|
|
81
79
|
childrenWarning();
|
|
82
80
|
}
|
|
83
81
|
}
|
|
84
|
-
const
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
}
|
|
95
|
-
} = _extractPluginParamsF,
|
|
96
|
-
otherProps = _objectWithoutPropertiesLoose(_extractPluginParamsF.otherProps, _excluded);
|
|
82
|
+
const {
|
|
83
|
+
pluginParams,
|
|
84
|
+
slots,
|
|
85
|
+
slotProps,
|
|
86
|
+
otherProps
|
|
87
|
+
} = extractPluginParamsFromProps({
|
|
88
|
+
props,
|
|
89
|
+
plugins: DEFAULT_TREE_VIEW_PLUGINS,
|
|
90
|
+
rootRef: ref
|
|
91
|
+
});
|
|
97
92
|
const {
|
|
98
93
|
getRootProps,
|
|
99
94
|
contextValue,
|
|
@@ -141,34 +136,13 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
|
|
|
141
136
|
* Override or extend the styles applied to the component.
|
|
142
137
|
*/
|
|
143
138
|
classes: PropTypes.object,
|
|
144
|
-
/**
|
|
145
|
-
* className applied to the root element.
|
|
146
|
-
*/
|
|
147
139
|
className: PropTypes.string,
|
|
148
|
-
/**
|
|
149
|
-
* The default icon used to collapse the node.
|
|
150
|
-
*/
|
|
151
|
-
defaultCollapseIcon: PropTypes.node,
|
|
152
|
-
/**
|
|
153
|
-
* The default icon displayed next to a end node. This is applied to all
|
|
154
|
-
* tree nodes and can be overridden by the TreeItem `icon` prop.
|
|
155
|
-
*/
|
|
156
|
-
defaultEndIcon: PropTypes.node,
|
|
157
140
|
/**
|
|
158
141
|
* Expanded node ids.
|
|
159
142
|
* Used when the item's expansion is not controlled.
|
|
160
143
|
* @default []
|
|
161
144
|
*/
|
|
162
145
|
defaultExpandedNodes: PropTypes.arrayOf(PropTypes.string),
|
|
163
|
-
/**
|
|
164
|
-
* The default icon used to expand the node.
|
|
165
|
-
*/
|
|
166
|
-
defaultExpandIcon: PropTypes.node,
|
|
167
|
-
/**
|
|
168
|
-
* The default icon displayed next to a parent node. This is applied to all
|
|
169
|
-
* parent nodes and can be overridden by the TreeItem `icon` prop.
|
|
170
|
-
*/
|
|
171
|
-
defaultParentIcon: PropTypes.node,
|
|
172
146
|
/**
|
|
173
147
|
* Selected node ids. (Uncontrolled)
|
|
174
148
|
* When `multiSelect` is true this takes an array of strings; when false (default) a string.
|
|
@@ -1,6 +1,4 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
-
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
3
|
-
const _excluded = ["slots", "slotProps"];
|
|
4
2
|
import * as React from 'react';
|
|
5
3
|
import PropTypes from 'prop-types';
|
|
6
4
|
import { styled, useThemeProps } from '@mui/material/styles';
|
|
@@ -56,20 +54,18 @@ const SimpleTreeView = /*#__PURE__*/React.forwardRef(function SimpleTreeView(inP
|
|
|
56
54
|
itemsPropWarning();
|
|
57
55
|
}
|
|
58
56
|
}
|
|
59
|
-
const
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
57
|
+
const {
|
|
58
|
+
pluginParams,
|
|
59
|
+
slots,
|
|
60
|
+
slotProps,
|
|
61
|
+
otherProps
|
|
62
|
+
} = extractPluginParamsFromProps({
|
|
63
|
+
props: _extends({}, props, {
|
|
64
|
+
items: EMPTY_ITEMS
|
|
65
65
|
}),
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
slots
|
|
70
|
-
}
|
|
71
|
-
} = _extractPluginParamsF,
|
|
72
|
-
otherProps = _objectWithoutPropertiesLoose(_extractPluginParamsF.otherProps, _excluded);
|
|
66
|
+
plugins: SIMPLE_TREE_VIEW_PLUGINS,
|
|
67
|
+
rootRef: ref
|
|
68
|
+
});
|
|
73
69
|
const {
|
|
74
70
|
getRootProps,
|
|
75
71
|
contextValue
|
|
@@ -78,7 +74,7 @@ const SimpleTreeView = /*#__PURE__*/React.forwardRef(function SimpleTreeView(inP
|
|
|
78
74
|
const Root = slots?.root ?? SimpleTreeViewRoot;
|
|
79
75
|
const rootProps = useSlotProps({
|
|
80
76
|
elementType: Root,
|
|
81
|
-
externalSlotProps:
|
|
77
|
+
externalSlotProps: slotProps?.root,
|
|
82
78
|
externalForwardedProps: otherProps,
|
|
83
79
|
className: classes.root,
|
|
84
80
|
getSlotProps: getRootProps,
|
|
@@ -102,34 +98,13 @@ process.env.NODE_ENV !== "production" ? SimpleTreeView.propTypes = {
|
|
|
102
98
|
* Override or extend the styles applied to the component.
|
|
103
99
|
*/
|
|
104
100
|
classes: PropTypes.object,
|
|
105
|
-
/**
|
|
106
|
-
* className applied to the root element.
|
|
107
|
-
*/
|
|
108
101
|
className: PropTypes.string,
|
|
109
|
-
/**
|
|
110
|
-
* The default icon used to collapse the node.
|
|
111
|
-
*/
|
|
112
|
-
defaultCollapseIcon: PropTypes.node,
|
|
113
|
-
/**
|
|
114
|
-
* The default icon displayed next to a end node. This is applied to all
|
|
115
|
-
* tree nodes and can be overridden by the TreeItem `icon` prop.
|
|
116
|
-
*/
|
|
117
|
-
defaultEndIcon: PropTypes.node,
|
|
118
102
|
/**
|
|
119
103
|
* Expanded node ids.
|
|
120
104
|
* Used when the item's expansion is not controlled.
|
|
121
105
|
* @default []
|
|
122
106
|
*/
|
|
123
107
|
defaultExpandedNodes: PropTypes.arrayOf(PropTypes.string),
|
|
124
|
-
/**
|
|
125
|
-
* The default icon used to expand the node.
|
|
126
|
-
*/
|
|
127
|
-
defaultExpandIcon: PropTypes.node,
|
|
128
|
-
/**
|
|
129
|
-
* The default icon displayed next to a parent node. This is applied to all
|
|
130
|
-
* parent nodes and can be overridden by the TreeItem `icon` prop.
|
|
131
|
-
*/
|
|
132
|
-
defaultParentIcon: PropTypes.node,
|
|
133
108
|
/**
|
|
134
109
|
* Selected node ids. (Uncontrolled)
|
|
135
110
|
* When `multiSelect` is true this takes an array of strings; when false (default) a string.
|
|
@@ -151,24 +126,6 @@ process.env.NODE_ENV !== "production" ? SimpleTreeView.propTypes = {
|
|
|
151
126
|
* Used when the item's expansion is controlled.
|
|
152
127
|
*/
|
|
153
128
|
expandedNodes: PropTypes.arrayOf(PropTypes.string),
|
|
154
|
-
/**
|
|
155
|
-
* Used to determine the string label for a given item.
|
|
156
|
-
*
|
|
157
|
-
* @template R
|
|
158
|
-
* @param {R} item The item to check.
|
|
159
|
-
* @returns {string} The id of the item.
|
|
160
|
-
* @default `(item) => item.id`
|
|
161
|
-
*/
|
|
162
|
-
getItemId: PropTypes.func,
|
|
163
|
-
/**
|
|
164
|
-
* Used to determine the string label for a given item.
|
|
165
|
-
*
|
|
166
|
-
* @template R
|
|
167
|
-
* @param {R} item The item to check.
|
|
168
|
-
* @returns {string} The label of the item.
|
|
169
|
-
* @default `(item) => item.label`
|
|
170
|
-
*/
|
|
171
|
-
getItemLabel: PropTypes.func,
|
|
172
129
|
/**
|
|
173
130
|
* This prop is used to help implement the accessibility logic.
|
|
174
131
|
* If you don't provide this prop. It falls back to a randomly generated id.
|