@mui/x-tree-view 7.0.0-alpha.7 → 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 +554 -51
- package/README.md +1 -1
- package/RichTreeView/RichTreeView.js +14 -79
- package/RichTreeView/RichTreeView.types.d.ts +6 -9
- package/RichTreeView/index.d.ts +1 -1
- package/SimpleTreeView/SimpleTreeView.js +17 -75
- 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/TreeItem/{useTreeItem.js → useTreeItemState.js} +4 -2
- package/TreeView/TreeView.js +1 -22
- 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/TreeViewProvider/useTreeViewContext.js +1 -1
- package/internals/corePlugins/useTreeViewInstanceEvents/useTreeViewInstanceEvents.js +2 -1
- 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/MuiCancellableEvent.d.ts +4 -0
- package/internals/models/helpers.d.ts +7 -1
- package/internals/models/plugin.d.ts +65 -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 +14 -10
- package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.types.d.ts +7 -3
- package/internals/plugins/useTreeViewFocus/useTreeViewFocus.js +2 -5
- 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.js +3 -0
- package/internals/plugins/useTreeViewId/useTreeViewId.types.d.ts +6 -2
- package/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.js +2 -1
- package/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.types.d.ts +6 -4
- package/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js +155 -112
- package/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.types.d.ts +9 -6
- package/internals/plugins/useTreeViewNodes/useTreeViewNodes.js +21 -3
- package/internals/plugins/useTreeViewNodes/useTreeViewNodes.types.d.ts +10 -2
- package/internals/plugins/useTreeViewSelection/useTreeViewSelection.js +17 -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 +12 -13
- package/internals/utils/extractPluginParamsFromProps.d.ts +16 -0
- package/internals/utils/extractPluginParamsFromProps.js +38 -0
- package/legacy/RichTreeView/RichTreeView.js +15 -77
- package/legacy/SimpleTreeView/SimpleTreeView.js +14 -70
- 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 +1 -22
- package/legacy/icons/icons.js +9 -0
- package/legacy/icons/index.js +1 -0
- package/legacy/index.js +3 -2
- package/legacy/internals/TreeViewProvider/useTreeViewContext.js +1 -1
- package/legacy/internals/corePlugins/useTreeViewInstanceEvents/useTreeViewInstanceEvents.js +2 -1
- package/legacy/internals/index.js +4 -0
- package/legacy/internals/plugins/defaultPlugins.js +2 -2
- package/legacy/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js +16 -10
- package/legacy/internals/plugins/useTreeViewFocus/useTreeViewFocus.js +2 -5
- package/legacy/internals/plugins/useTreeViewIcons/index.js +1 -0
- package/legacy/internals/plugins/useTreeViewIcons/useTreeViewIcons.js +21 -0
- package/legacy/internals/plugins/useTreeViewIcons/useTreeViewIcons.types.js +1 -0
- package/legacy/internals/plugins/useTreeViewId/useTreeViewId.js +3 -0
- package/legacy/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.js +2 -1
- package/legacy/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js +157 -110
- package/legacy/internals/plugins/useTreeViewNodes/useTreeViewNodes.js +20 -2
- package/legacy/internals/plugins/useTreeViewSelection/useTreeViewSelection.js +20 -6
- package/legacy/internals/useTreeView/useTreeView.js +6 -2
- package/legacy/internals/useTreeView/useTreeViewModels.js +12 -13
- package/legacy/internals/utils/extractPluginParamsFromProps.js +36 -0
- package/modern/RichTreeView/RichTreeView.js +14 -79
- package/modern/SimpleTreeView/SimpleTreeView.js +17 -75
- package/modern/TreeItem/TreeItem.js +61 -39
- package/modern/TreeItem/TreeItemContent.js +2 -5
- package/modern/TreeItem/index.js +1 -1
- package/modern/TreeItem/{useTreeItem.js → useTreeItemState.js} +4 -2
- package/modern/TreeView/TreeView.js +1 -22
- package/modern/icons/icons.js +9 -0
- package/modern/icons/index.js +1 -0
- package/modern/index.js +3 -2
- package/modern/internals/TreeViewProvider/useTreeViewContext.js +1 -1
- package/modern/internals/corePlugins/useTreeViewInstanceEvents/useTreeViewInstanceEvents.js +2 -1
- package/modern/internals/index.js +4 -0
- package/modern/internals/models/MuiCancellableEvent.js +1 -0
- package/modern/internals/plugins/defaultPlugins.js +2 -2
- package/modern/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js +14 -11
- package/modern/internals/plugins/useTreeViewFocus/useTreeViewFocus.js +3 -3
- package/modern/internals/plugins/useTreeViewIcons/index.js +1 -0
- package/modern/internals/plugins/useTreeViewIcons/useTreeViewIcons.js +22 -0
- package/modern/internals/plugins/useTreeViewIcons/useTreeViewIcons.types.js +1 -0
- package/modern/internals/plugins/useTreeViewId/useTreeViewId.js +3 -0
- package/modern/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.js +2 -1
- package/modern/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js +155 -112
- package/modern/internals/plugins/useTreeViewNodes/useTreeViewNodes.js +18 -3
- package/modern/internals/plugins/useTreeViewSelection/useTreeViewSelection.js +18 -6
- package/modern/internals/useTreeView/useTreeView.js +7 -3
- package/modern/internals/useTreeView/useTreeViewModels.js +12 -13
- package/modern/internals/utils/extractPluginParamsFromProps.js +38 -0
- package/node/RichTreeView/RichTreeView.js +14 -79
- package/node/SimpleTreeView/SimpleTreeView.js +17 -75
- 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 +1 -22
- package/node/icons/icons.js +17 -0
- package/node/icons/index.js +16 -0
- package/node/index.js +13 -1
- package/node/internals/TreeViewProvider/useTreeViewContext.js +1 -1
- package/node/internals/corePlugins/useTreeViewInstanceEvents/useTreeViewInstanceEvents.js +2 -1
- package/node/internals/index.js +33 -0
- package/node/internals/plugins/defaultPlugins.js +2 -2
- package/node/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js +14 -11
- package/node/internals/plugins/useTreeViewFocus/useTreeViewFocus.js +3 -3
- package/node/internals/plugins/useTreeViewIcons/index.js +12 -0
- package/node/internals/plugins/useTreeViewIcons/useTreeViewIcons.js +29 -0
- package/node/internals/plugins/useTreeViewIcons/useTreeViewIcons.types.js +5 -0
- package/node/internals/plugins/useTreeViewId/useTreeViewId.js +4 -1
- package/node/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.js +2 -1
- package/node/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js +155 -112
- package/node/internals/plugins/useTreeViewNodes/useTreeViewNodes.js +18 -3
- package/node/internals/plugins/useTreeViewSelection/useTreeViewSelection.js +18 -6
- package/node/internals/useTreeView/useTreeView.js +7 -3
- package/node/internals/useTreeView/useTreeViewModels.js +12 -13
- package/node/internals/utils/extractPluginParamsFromProps.js +46 -0
- 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 -26
- 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 -28
- package/modern/internals/plugins/useTreeViewContextValueBuilder/index.js +0 -1
- package/modern/internals/plugins/useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.js +0 -26
- package/node/internals/plugins/useTreeViewContextValueBuilder/index.js +0 -12
- package/node/internals/plugins/useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.js +0 -33
- /package/internals/{plugins/useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.types.js → models/MuiCancellableEvent.js} +0 -0
- /package/{legacy/internals/plugins/useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.types.js → internals/plugins/useTreeViewIcons/useTreeViewIcons.types.js} +0 -0
- /package/{modern/internals/plugins/useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.types.js → legacy/internals/models/MuiCancellableEvent.js} +0 -0
- /package/node/internals/{plugins/useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.types.js → models/MuiCancellableEvent.js} +0 -0
|
@@ -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);
|
|
@@ -23,7 +23,7 @@ var TreeViewRoot = styled(SimpleTreeViewRoot, {
|
|
|
23
23
|
var warnedOnce = false;
|
|
24
24
|
var warn = function warn() {
|
|
25
25
|
if (!warnedOnce) {
|
|
26
|
-
console.warn(['MUI: The TreeView component was renamed SimpleTreeView.', 'The component with the old naming will be removed in the version v8.0.0.', '', "You should use `import { SimpleTreeView } from '@mui/x-tree-view'`", "or `import { SimpleTreeView } from '@mui/x-tree-view/TreeView'`"].join('\n'));
|
|
26
|
+
console.warn(['MUI X: The TreeView component was renamed SimpleTreeView.', 'The component with the old naming will be removed in the version v8.0.0.', '', "You should use `import { SimpleTreeView } from '@mui/x-tree-view'`", "or `import { SimpleTreeView } from '@mui/x-tree-view/TreeView'`"].join('\n'));
|
|
27
27
|
warnedOnce = true;
|
|
28
28
|
}
|
|
29
29
|
};
|
|
@@ -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.
|
|
@@ -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-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
|
|
@@ -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';
|
|
@@ -3,7 +3,7 @@ import { TreeViewContext } from './TreeViewContext';
|
|
|
3
3
|
export var useTreeViewContext = function useTreeViewContext() {
|
|
4
4
|
var context = React.useContext(TreeViewContext);
|
|
5
5
|
if (context == null) {
|
|
6
|
-
throw new Error(['MUI: Could not find the Tree View context.', 'It looks like you rendered your component outside of a SimpleTreeView or RichTreeView parent component.', 'This can also happen if you are bundling multiple versions of the Tree View.'].join('\n'));
|
|
6
|
+
throw new Error(['MUI X: Could not find the Tree View context.', 'It looks like you rendered your component outside of a SimpleTreeView or RichTreeView parent component.', 'This can also happen if you are bundling multiple versions of the Tree View.'].join('\n'));
|
|
7
7
|
}
|
|
8
8
|
return context;
|
|
9
9
|
};
|
|
@@ -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 = [];
|
|
@@ -72,4 +72,10 @@ useTreeViewExpansion.getDefaultizedParams = function (params) {
|
|
|
72
72
|
return _extends({}, params, {
|
|
73
73
|
defaultExpandedNodes: (_params$defaultExpand = params.defaultExpandedNodes) != null ? _params$defaultExpand : DEFAULT_EXPANDED_NODES
|
|
74
74
|
});
|
|
75
|
+
};
|
|
76
|
+
useTreeViewExpansion.params = {
|
|
77
|
+
expandedNodes: true,
|
|
78
|
+
defaultExpandedNodes: true,
|
|
79
|
+
onExpandedNodesChange: true,
|
|
80
|
+
onNodeExpansionToggle: true
|
|
75
81
|
};
|
|
@@ -98,9 +98,6 @@ useTreeViewFocus.getInitialState = function () {
|
|
|
98
98
|
focusedNodeId: null
|
|
99
99
|
};
|
|
100
100
|
};
|
|
101
|
-
useTreeViewFocus.
|
|
102
|
-
|
|
103
|
-
return _extends({}, params, {
|
|
104
|
-
disabledItemsFocusable: (_params$disabledItems = params.disabledItemsFocusable) != null ? _params$disabledItems : false
|
|
105
|
-
});
|
|
101
|
+
useTreeViewFocus.params = {
|
|
102
|
+
onNodeFocus: true
|
|
106
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 = {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -117,4 +117,5 @@ var useTreeViewJSXNodesItemPlugin = function useTreeViewJSXNodesItemPlugin(_ref2
|
|
|
117
117
|
}
|
|
118
118
|
};
|
|
119
119
|
};
|
|
120
|
-
useTreeViewJSXNodes.itemPlugin = useTreeViewJSXNodesItemPlugin;
|
|
120
|
+
useTreeViewJSXNodes.itemPlugin = useTreeViewJSXNodesItemPlugin;
|
|
121
|
+
useTreeViewJSXNodes.params = {};
|
package/legacy/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js
CHANGED
|
@@ -3,7 +3,7 @@ import { useTheme } from '@mui/material/styles';
|
|
|
3
3
|
import useEventCallback from '@mui/utils/useEventCallback';
|
|
4
4
|
import { getFirstNode, getLastNode, getNextNode, getPreviousNode, populateInstance } from '../../useTreeView/useTreeView.utils';
|
|
5
5
|
function isPrintableCharacter(string) {
|
|
6
|
-
return string && string.length === 1 && string.match(/\S/);
|
|
6
|
+
return !!string && string.length === 1 && !!string.match(/\S/);
|
|
7
7
|
}
|
|
8
8
|
function findNextFirstChar(firstChars, startIndex, char) {
|
|
9
9
|
for (var i = startIndex; i < firstChars.length; i += 1) {
|
|
@@ -18,7 +18,7 @@ export var useTreeViewKeyboardNavigation = function useTreeViewKeyboardNavigatio
|
|
|
18
18
|
params = _ref.params,
|
|
19
19
|
state = _ref.state;
|
|
20
20
|
var theme = useTheme();
|
|
21
|
-
var
|
|
21
|
+
var isRTL = theme.direction === 'rtl';
|
|
22
22
|
var firstCharMap = React.useRef({});
|
|
23
23
|
var hasFirstCharMapBeenUpdatedImperatively = React.useRef(false);
|
|
24
24
|
var updateFirstCharMap = useEventCallback(function (callback) {
|
|
@@ -43,32 +43,7 @@ export var useTreeViewKeyboardNavigation = function useTreeViewKeyboardNavigatio
|
|
|
43
43
|
populateInstance(instance, {
|
|
44
44
|
updateFirstCharMap: updateFirstCharMap
|
|
45
45
|
});
|
|
46
|
-
var
|
|
47
|
-
if (state.focusedNodeId != null && instance.isNodeExpandable(state.focusedNodeId)) {
|
|
48
|
-
if (instance.isNodeExpanded(state.focusedNodeId)) {
|
|
49
|
-
instance.focusNode(event, getNextNode(instance, state.focusedNodeId));
|
|
50
|
-
} else if (!instance.isNodeDisabled(state.focusedNodeId)) {
|
|
51
|
-
instance.toggleNodeExpansion(event, state.focusedNodeId);
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
|
-
return true;
|
|
55
|
-
};
|
|
56
|
-
var handlePreviousArrow = function handlePreviousArrow(event) {
|
|
57
|
-
if (state.focusedNodeId == null) {
|
|
58
|
-
return false;
|
|
59
|
-
}
|
|
60
|
-
if (instance.isNodeExpanded(state.focusedNodeId) && !instance.isNodeDisabled(state.focusedNodeId)) {
|
|
61
|
-
instance.toggleNodeExpansion(event, state.focusedNodeId);
|
|
62
|
-
return true;
|
|
63
|
-
}
|
|
64
|
-
var parent = instance.getNode(state.focusedNodeId).parentId;
|
|
65
|
-
if (parent) {
|
|
66
|
-
instance.focusNode(event, parent);
|
|
67
|
-
return true;
|
|
68
|
-
}
|
|
69
|
-
return false;
|
|
70
|
-
};
|
|
71
|
-
var focusByFirstCharacter = function focusByFirstCharacter(event, nodeId, firstChar) {
|
|
46
|
+
var getFirstMatchingNode = function getFirstMatchingNode(nodeId, firstChar) {
|
|
72
47
|
var start;
|
|
73
48
|
var index;
|
|
74
49
|
var lowercaseChar = firstChar.toLowerCase();
|
|
@@ -99,43 +74,41 @@ export var useTreeViewKeyboardNavigation = function useTreeViewKeyboardNavigatio
|
|
|
99
74
|
index = findNextFirstChar(firstChars, 0, lowercaseChar);
|
|
100
75
|
}
|
|
101
76
|
|
|
102
|
-
// If match was found...
|
|
77
|
+
// If a match was found...
|
|
103
78
|
if (index > -1) {
|
|
104
|
-
|
|
79
|
+
return firstCharIds[index];
|
|
105
80
|
}
|
|
81
|
+
return null;
|
|
106
82
|
};
|
|
107
|
-
var
|
|
108
|
-
|
|
109
|
-
instance.selectRange(event, {
|
|
110
|
-
end: getNextNode(instance, id),
|
|
111
|
-
current: id
|
|
112
|
-
}, true);
|
|
113
|
-
}
|
|
83
|
+
var canToggleNodeSelection = function canToggleNodeSelection(nodeId) {
|
|
84
|
+
return !params.disableSelection && !instance.isNodeDisabled(nodeId);
|
|
114
85
|
};
|
|
115
|
-
var
|
|
116
|
-
|
|
117
|
-
instance.selectRange(event, {
|
|
118
|
-
end: getPreviousNode(instance, nodeId),
|
|
119
|
-
current: nodeId
|
|
120
|
-
}, true);
|
|
121
|
-
}
|
|
86
|
+
var canToggleNodeExpansion = function canToggleNodeExpansion(nodeId) {
|
|
87
|
+
return !instance.isNodeDisabled(nodeId) && instance.isNodeExpandable(nodeId);
|
|
122
88
|
};
|
|
89
|
+
|
|
90
|
+
// ARIA specification: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/#keyboardinteraction
|
|
123
91
|
var createHandleKeyDown = function createHandleKeyDown(otherHandlers) {
|
|
124
92
|
return function (event) {
|
|
125
93
|
var _otherHandlers$onKeyD;
|
|
126
94
|
(_otherHandlers$onKeyD = otherHandlers.onKeyDown) == null || _otherHandlers$onKeyD.call(otherHandlers, event);
|
|
127
|
-
|
|
128
|
-
|
|
95
|
+
if (event.defaultMuiPrevented) {
|
|
96
|
+
return;
|
|
97
|
+
}
|
|
129
98
|
|
|
130
99
|
// If the tree is empty there will be no focused node
|
|
131
100
|
if (event.altKey || event.currentTarget !== event.target || state.focusedNodeId == null) {
|
|
132
101
|
return;
|
|
133
102
|
}
|
|
134
103
|
var ctrlPressed = event.ctrlKey || event.metaKey;
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
104
|
+
var key = event.key;
|
|
105
|
+
|
|
106
|
+
// eslint-disable-next-line default-case
|
|
107
|
+
switch (true) {
|
|
108
|
+
// Select the node when pressing "Space"
|
|
109
|
+
case key === ' ' && canToggleNodeSelection(state.focusedNodeId):
|
|
110
|
+
{
|
|
111
|
+
event.preventDefault();
|
|
139
112
|
if (params.multiSelect && event.shiftKey) {
|
|
140
113
|
instance.selectRange(event, {
|
|
141
114
|
end: state.focusedNodeId
|
|
@@ -145,85 +118,158 @@ export var useTreeViewKeyboardNavigation = function useTreeViewKeyboardNavigatio
|
|
|
145
118
|
} else {
|
|
146
119
|
instance.selectNode(event, state.focusedNodeId);
|
|
147
120
|
}
|
|
121
|
+
break;
|
|
148
122
|
}
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
123
|
+
|
|
124
|
+
// If the focused node has children, we expand it.
|
|
125
|
+
// If the focused node has no children, we select it.
|
|
126
|
+
case key === 'Enter':
|
|
127
|
+
{
|
|
128
|
+
if (canToggleNodeExpansion(state.focusedNodeId)) {
|
|
154
129
|
instance.toggleNodeExpansion(event, state.focusedNodeId);
|
|
155
|
-
|
|
156
|
-
} else if (
|
|
157
|
-
flag = true;
|
|
130
|
+
event.preventDefault();
|
|
131
|
+
} else if (canToggleNodeSelection(state.focusedNodeId)) {
|
|
158
132
|
if (params.multiSelect) {
|
|
133
|
+
event.preventDefault();
|
|
159
134
|
instance.selectNode(event, state.focusedNodeId, true);
|
|
160
|
-
} else {
|
|
135
|
+
} else if (!instance.isNodeSelected(state.focusedNodeId)) {
|
|
161
136
|
instance.selectNode(event, state.focusedNodeId);
|
|
137
|
+
event.preventDefault();
|
|
162
138
|
}
|
|
163
139
|
}
|
|
140
|
+
break;
|
|
164
141
|
}
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
case 'ArrowDown':
|
|
168
|
-
|
|
169
|
-
|
|
142
|
+
|
|
143
|
+
// Focus the next focusable node
|
|
144
|
+
case key === 'ArrowDown':
|
|
145
|
+
{
|
|
146
|
+
var nextNode = getNextNode(instance, state.focusedNodeId);
|
|
147
|
+
if (nextNode) {
|
|
148
|
+
event.preventDefault();
|
|
149
|
+
instance.focusNode(event, nextNode);
|
|
150
|
+
|
|
151
|
+
// Multi select behavior when pressing Shift + ArrowDown
|
|
152
|
+
// Toggles the selection state of the next node
|
|
153
|
+
if (params.multiSelect && event.shiftKey && canToggleNodeSelection(nextNode)) {
|
|
154
|
+
instance.selectRange(event, {
|
|
155
|
+
end: nextNode,
|
|
156
|
+
current: state.focusedNodeId
|
|
157
|
+
}, true);
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
break;
|
|
170
161
|
}
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
162
|
+
|
|
163
|
+
// Focuses the previous focusable node
|
|
164
|
+
case key === 'ArrowUp':
|
|
165
|
+
{
|
|
166
|
+
var previousNode = getPreviousNode(instance, state.focusedNodeId);
|
|
167
|
+
if (previousNode) {
|
|
168
|
+
event.preventDefault();
|
|
169
|
+
instance.focusNode(event, previousNode);
|
|
170
|
+
|
|
171
|
+
// Multi select behavior when pressing Shift + ArrowUp
|
|
172
|
+
// Toggles the selection state of the previous node
|
|
173
|
+
if (params.multiSelect && event.shiftKey && canToggleNodeSelection(previousNode)) {
|
|
174
|
+
instance.selectRange(event, {
|
|
175
|
+
end: previousNode,
|
|
176
|
+
current: state.focusedNodeId
|
|
177
|
+
}, true);
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
break;
|
|
177
181
|
}
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
case 'ArrowRight':
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
182
|
+
|
|
183
|
+
// If the focused node is expanded, we move the focus to its first child
|
|
184
|
+
// If the focused node is collapsed and has children, we expand it
|
|
185
|
+
case key === 'ArrowRight' && !isRTL || key === 'ArrowLeft' && isRTL:
|
|
186
|
+
{
|
|
187
|
+
if (instance.isNodeExpanded(state.focusedNodeId)) {
|
|
188
|
+
instance.focusNode(event, getNextNode(instance, state.focusedNodeId));
|
|
189
|
+
event.preventDefault();
|
|
190
|
+
} else if (canToggleNodeExpansion(state.focusedNodeId)) {
|
|
191
|
+
instance.toggleNodeExpansion(event, state.focusedNodeId);
|
|
192
|
+
event.preventDefault();
|
|
193
|
+
}
|
|
194
|
+
break;
|
|
186
195
|
}
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
196
|
+
|
|
197
|
+
// If the focused node is expanded, we collapse it
|
|
198
|
+
// If the focused node is collapsed and has a parent, we move the focus to this parent
|
|
199
|
+
case key === 'ArrowLeft' && !isRTL || key === 'ArrowRight' && isRTL:
|
|
200
|
+
{
|
|
201
|
+
if (canToggleNodeExpansion(state.focusedNodeId) && instance.isNodeExpanded(state.focusedNodeId)) {
|
|
202
|
+
instance.toggleNodeExpansion(event, state.focusedNodeId);
|
|
203
|
+
event.preventDefault();
|
|
204
|
+
} else {
|
|
205
|
+
var parent = instance.getNode(state.focusedNodeId).parentId;
|
|
206
|
+
if (parent) {
|
|
207
|
+
instance.focusNode(event, parent);
|
|
208
|
+
event.preventDefault();
|
|
209
|
+
}
|
|
210
|
+
}
|
|
211
|
+
break;
|
|
193
212
|
}
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
213
|
+
|
|
214
|
+
// Focuses the first node in the tree
|
|
215
|
+
case key === 'Home':
|
|
216
|
+
{
|
|
217
|
+
instance.focusNode(event, getFirstNode(instance));
|
|
218
|
+
|
|
219
|
+
// Multi select behavior when pressing Ctrl + Shift + Home
|
|
220
|
+
// Selects the focused node and all nodes up to the first node.
|
|
221
|
+
if (canToggleNodeSelection(state.focusedNodeId) && params.multiSelect && ctrlPressed && event.shiftKey) {
|
|
222
|
+
instance.rangeSelectToFirst(event, state.focusedNodeId);
|
|
223
|
+
}
|
|
224
|
+
event.preventDefault();
|
|
225
|
+
break;
|
|
198
226
|
}
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
227
|
+
|
|
228
|
+
// Focuses the last node in the tree
|
|
229
|
+
case key === 'End':
|
|
230
|
+
{
|
|
231
|
+
instance.focusNode(event, getLastNode(instance));
|
|
232
|
+
|
|
233
|
+
// Multi select behavior when pressing Ctrl + Shirt + End
|
|
234
|
+
// Selects the focused node and all the nodes down to the last node.
|
|
235
|
+
if (canToggleNodeSelection(state.focusedNodeId) && params.multiSelect && ctrlPressed && event.shiftKey) {
|
|
236
|
+
instance.rangeSelectToLast(event, state.focusedNodeId);
|
|
237
|
+
}
|
|
238
|
+
event.preventDefault();
|
|
239
|
+
break;
|
|
205
240
|
}
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
if (key === '*') {
|
|
241
|
+
|
|
242
|
+
// Expand all siblings that are at the same level as the focused node
|
|
243
|
+
case key === '*':
|
|
244
|
+
{
|
|
211
245
|
instance.expandAllSiblings(event, state.focusedNodeId);
|
|
212
|
-
|
|
213
|
-
|
|
246
|
+
event.preventDefault();
|
|
247
|
+
break;
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
// Multi select behavior when pressing Ctrl + a
|
|
251
|
+
// Selects all the nodes
|
|
252
|
+
case key === 'a' && ctrlPressed && params.multiSelect && !params.disableSelection:
|
|
253
|
+
{
|
|
214
254
|
instance.selectRange(event, {
|
|
215
255
|
start: getFirstNode(instance),
|
|
216
256
|
end: getLastNode(instance)
|
|
217
257
|
});
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
258
|
+
event.preventDefault();
|
|
259
|
+
break;
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
// Type-ahead
|
|
263
|
+
// TODO: Support typing multiple characters
|
|
264
|
+
case !ctrlPressed && !event.shiftKey && isPrintableCharacter(key):
|
|
265
|
+
{
|
|
266
|
+
var matchingNode = getFirstMatchingNode(state.focusedNodeId, key);
|
|
267
|
+
if (matchingNode != null) {
|
|
268
|
+
instance.focusNode(event, matchingNode);
|
|
269
|
+
event.preventDefault();
|
|
270
|
+
}
|
|
271
|
+
break;
|
|
222
272
|
}
|
|
223
|
-
}
|
|
224
|
-
if (flag) {
|
|
225
|
-
event.preventDefault();
|
|
226
|
-
event.stopPropagation();
|
|
227
273
|
}
|
|
228
274
|
};
|
|
229
275
|
};
|
|
@@ -234,4 +280,5 @@ export var useTreeViewKeyboardNavigation = function useTreeViewKeyboardNavigatio
|
|
|
234
280
|
};
|
|
235
281
|
}
|
|
236
282
|
};
|
|
237
|
-
};
|
|
283
|
+
};
|
|
284
|
+
useTreeViewKeyboardNavigation.params = {};
|
|
@@ -13,11 +13,11 @@ var updateState = function updateState(_ref) {
|
|
|
13
13
|
var _item$children, _item$children2;
|
|
14
14
|
var id = getItemId ? getItemId(item) : item.id;
|
|
15
15
|
if (id == null) {
|
|
16
|
-
throw new Error(['MUI: 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'));
|
|
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
18
|
var label = getItemLabel ? getItemLabel(item) : item.label;
|
|
19
19
|
if (label == null) {
|
|
20
|
-
throw new Error(['MUI: 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'));
|
|
20
|
+
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'));
|
|
21
21
|
}
|
|
22
22
|
nodeMap[id] = {
|
|
23
23
|
id: id,
|
|
@@ -129,6 +129,11 @@ export var useTreeViewNodes = function useTreeViewNodes(_ref2) {
|
|
|
129
129
|
getNavigableChildrenIds: getNavigableChildrenIds,
|
|
130
130
|
isNodeDisabled: isNodeDisabled
|
|
131
131
|
});
|
|
132
|
+
return {
|
|
133
|
+
contextValue: {
|
|
134
|
+
disabledItemsFocusable: params.disabledItemsFocusable
|
|
135
|
+
}
|
|
136
|
+
};
|
|
132
137
|
};
|
|
133
138
|
useTreeViewNodes.getInitialState = function (params) {
|
|
134
139
|
return updateState({
|
|
@@ -137,4 +142,17 @@ useTreeViewNodes.getInitialState = function (params) {
|
|
|
137
142
|
getItemId: params.getItemId,
|
|
138
143
|
getItemLabel: params.getItemLabel
|
|
139
144
|
});
|
|
145
|
+
};
|
|
146
|
+
useTreeViewNodes.getDefaultizedParams = function (params) {
|
|
147
|
+
var _params$disabledItems;
|
|
148
|
+
return _extends({}, params, {
|
|
149
|
+
disabledItemsFocusable: (_params$disabledItems = params.disabledItemsFocusable) != null ? _params$disabledItems : false
|
|
150
|
+
});
|
|
151
|
+
};
|
|
152
|
+
useTreeViewNodes.params = {
|
|
153
|
+
disabledItemsFocusable: true,
|
|
154
|
+
items: true,
|
|
155
|
+
isItemDisabled: true,
|
|
156
|
+
getItemLabel: true,
|
|
157
|
+
getItemId: true
|
|
140
158
|
};
|