@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.
Files changed (164) hide show
  1. package/CHANGELOG.md +554 -51
  2. package/README.md +1 -1
  3. package/RichTreeView/RichTreeView.js +14 -79
  4. package/RichTreeView/RichTreeView.types.d.ts +6 -9
  5. package/RichTreeView/index.d.ts +1 -1
  6. package/SimpleTreeView/SimpleTreeView.js +17 -75
  7. package/SimpleTreeView/SimpleTreeView.plugins.d.ts +4 -2
  8. package/SimpleTreeView/SimpleTreeView.types.d.ts +8 -7
  9. package/SimpleTreeView/index.d.ts +1 -1
  10. package/TreeItem/TreeItem.js +62 -39
  11. package/TreeItem/TreeItem.types.d.ts +33 -17
  12. package/TreeItem/TreeItemContent.d.ts +0 -3
  13. package/TreeItem/TreeItemContent.js +2 -5
  14. package/TreeItem/index.d.ts +2 -2
  15. package/TreeItem/index.js +1 -1
  16. package/TreeItem/{useTreeItem.d.ts → useTreeItemState.d.ts} +1 -1
  17. package/TreeItem/{useTreeItem.js → useTreeItemState.js} +4 -2
  18. package/TreeView/TreeView.js +1 -22
  19. package/TreeView/TreeView.types.d.ts +5 -1
  20. package/TreeView/index.d.ts +1 -1
  21. package/icons/icons.d.ts +6 -0
  22. package/icons/icons.js +9 -0
  23. package/icons/index.d.ts +1 -0
  24. package/icons/index.js +1 -0
  25. package/icons/package.json +6 -0
  26. package/index.d.ts +1 -0
  27. package/index.js +3 -2
  28. package/internals/TreeViewProvider/TreeViewContext.d.ts +4 -2
  29. package/internals/TreeViewProvider/TreeViewProvider.types.d.ts +3 -11
  30. package/internals/TreeViewProvider/useTreeViewContext.js +1 -1
  31. package/internals/corePlugins/useTreeViewInstanceEvents/useTreeViewInstanceEvents.js +2 -1
  32. package/internals/corePlugins/useTreeViewInstanceEvents/useTreeViewInstanceEvents.types.d.ts +3 -2
  33. package/internals/index.d.ts +15 -0
  34. package/internals/index.js +4 -0
  35. package/internals/models/MuiCancellableEvent.d.ts +4 -0
  36. package/internals/models/helpers.d.ts +7 -1
  37. package/internals/models/plugin.d.ts +65 -20
  38. package/internals/models/treeView.d.ts +1 -2
  39. package/internals/package.json +6 -0
  40. package/internals/plugins/defaultPlugins.d.ts +6 -4
  41. package/internals/plugins/defaultPlugins.js +2 -2
  42. package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js +14 -10
  43. package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.types.d.ts +7 -3
  44. package/internals/plugins/useTreeViewFocus/useTreeViewFocus.js +2 -5
  45. package/internals/plugins/useTreeViewFocus/useTreeViewFocus.types.d.ts +12 -6
  46. package/internals/plugins/useTreeViewIcons/index.d.ts +2 -0
  47. package/internals/plugins/useTreeViewIcons/index.js +1 -0
  48. package/internals/plugins/useTreeViewIcons/useTreeViewIcons.d.ts +3 -0
  49. package/internals/plugins/useTreeViewIcons/useTreeViewIcons.js +22 -0
  50. package/internals/plugins/useTreeViewIcons/useTreeViewIcons.types.d.ts +43 -0
  51. package/internals/plugins/useTreeViewId/useTreeViewId.js +3 -0
  52. package/internals/plugins/useTreeViewId/useTreeViewId.types.d.ts +6 -2
  53. package/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.js +2 -1
  54. package/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.types.d.ts +6 -4
  55. package/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js +155 -112
  56. package/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.types.d.ts +9 -6
  57. package/internals/plugins/useTreeViewNodes/useTreeViewNodes.js +21 -3
  58. package/internals/plugins/useTreeViewNodes/useTreeViewNodes.types.d.ts +10 -2
  59. package/internals/plugins/useTreeViewSelection/useTreeViewSelection.js +17 -5
  60. package/internals/plugins/useTreeViewSelection/useTreeViewSelection.types.d.ts +15 -5
  61. package/internals/useTreeView/useTreeView.js +7 -3
  62. package/internals/useTreeView/useTreeView.types.d.ts +6 -6
  63. package/internals/useTreeView/useTreeViewModels.js +12 -13
  64. package/internals/utils/extractPluginParamsFromProps.d.ts +16 -0
  65. package/internals/utils/extractPluginParamsFromProps.js +38 -0
  66. package/legacy/RichTreeView/RichTreeView.js +15 -77
  67. package/legacy/SimpleTreeView/SimpleTreeView.js +14 -70
  68. package/legacy/TreeItem/TreeItem.js +63 -39
  69. package/legacy/TreeItem/TreeItemContent.js +9 -12
  70. package/legacy/TreeItem/index.js +1 -1
  71. package/legacy/TreeItem/{useTreeItem.js → useTreeItemState.js} +2 -2
  72. package/legacy/TreeView/TreeView.js +1 -22
  73. package/legacy/icons/icons.js +9 -0
  74. package/legacy/icons/index.js +1 -0
  75. package/legacy/index.js +3 -2
  76. package/legacy/internals/TreeViewProvider/useTreeViewContext.js +1 -1
  77. package/legacy/internals/corePlugins/useTreeViewInstanceEvents/useTreeViewInstanceEvents.js +2 -1
  78. package/legacy/internals/index.js +4 -0
  79. package/legacy/internals/plugins/defaultPlugins.js +2 -2
  80. package/legacy/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js +16 -10
  81. package/legacy/internals/plugins/useTreeViewFocus/useTreeViewFocus.js +2 -5
  82. package/legacy/internals/plugins/useTreeViewIcons/index.js +1 -0
  83. package/legacy/internals/plugins/useTreeViewIcons/useTreeViewIcons.js +21 -0
  84. package/legacy/internals/plugins/useTreeViewIcons/useTreeViewIcons.types.js +1 -0
  85. package/legacy/internals/plugins/useTreeViewId/useTreeViewId.js +3 -0
  86. package/legacy/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.js +2 -1
  87. package/legacy/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js +157 -110
  88. package/legacy/internals/plugins/useTreeViewNodes/useTreeViewNodes.js +20 -2
  89. package/legacy/internals/plugins/useTreeViewSelection/useTreeViewSelection.js +20 -6
  90. package/legacy/internals/useTreeView/useTreeView.js +6 -2
  91. package/legacy/internals/useTreeView/useTreeViewModels.js +12 -13
  92. package/legacy/internals/utils/extractPluginParamsFromProps.js +36 -0
  93. package/modern/RichTreeView/RichTreeView.js +14 -79
  94. package/modern/SimpleTreeView/SimpleTreeView.js +17 -75
  95. package/modern/TreeItem/TreeItem.js +61 -39
  96. package/modern/TreeItem/TreeItemContent.js +2 -5
  97. package/modern/TreeItem/index.js +1 -1
  98. package/modern/TreeItem/{useTreeItem.js → useTreeItemState.js} +4 -2
  99. package/modern/TreeView/TreeView.js +1 -22
  100. package/modern/icons/icons.js +9 -0
  101. package/modern/icons/index.js +1 -0
  102. package/modern/index.js +3 -2
  103. package/modern/internals/TreeViewProvider/useTreeViewContext.js +1 -1
  104. package/modern/internals/corePlugins/useTreeViewInstanceEvents/useTreeViewInstanceEvents.js +2 -1
  105. package/modern/internals/index.js +4 -0
  106. package/modern/internals/models/MuiCancellableEvent.js +1 -0
  107. package/modern/internals/plugins/defaultPlugins.js +2 -2
  108. package/modern/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js +14 -11
  109. package/modern/internals/plugins/useTreeViewFocus/useTreeViewFocus.js +3 -3
  110. package/modern/internals/plugins/useTreeViewIcons/index.js +1 -0
  111. package/modern/internals/plugins/useTreeViewIcons/useTreeViewIcons.js +22 -0
  112. package/modern/internals/plugins/useTreeViewIcons/useTreeViewIcons.types.js +1 -0
  113. package/modern/internals/plugins/useTreeViewId/useTreeViewId.js +3 -0
  114. package/modern/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.js +2 -1
  115. package/modern/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js +155 -112
  116. package/modern/internals/plugins/useTreeViewNodes/useTreeViewNodes.js +18 -3
  117. package/modern/internals/plugins/useTreeViewSelection/useTreeViewSelection.js +18 -6
  118. package/modern/internals/useTreeView/useTreeView.js +7 -3
  119. package/modern/internals/useTreeView/useTreeViewModels.js +12 -13
  120. package/modern/internals/utils/extractPluginParamsFromProps.js +38 -0
  121. package/node/RichTreeView/RichTreeView.js +14 -79
  122. package/node/SimpleTreeView/SimpleTreeView.js +17 -75
  123. package/node/TreeItem/TreeItem.js +61 -39
  124. package/node/TreeItem/TreeItemContent.js +2 -5
  125. package/node/TreeItem/index.js +4 -4
  126. package/node/TreeItem/{useTreeItem.js → useTreeItemState.js} +5 -3
  127. package/node/TreeView/TreeView.js +1 -22
  128. package/node/icons/icons.js +17 -0
  129. package/node/icons/index.js +16 -0
  130. package/node/index.js +13 -1
  131. package/node/internals/TreeViewProvider/useTreeViewContext.js +1 -1
  132. package/node/internals/corePlugins/useTreeViewInstanceEvents/useTreeViewInstanceEvents.js +2 -1
  133. package/node/internals/index.js +33 -0
  134. package/node/internals/plugins/defaultPlugins.js +2 -2
  135. package/node/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js +14 -11
  136. package/node/internals/plugins/useTreeViewFocus/useTreeViewFocus.js +3 -3
  137. package/node/internals/plugins/useTreeViewIcons/index.js +12 -0
  138. package/node/internals/plugins/useTreeViewIcons/useTreeViewIcons.js +29 -0
  139. package/node/internals/plugins/useTreeViewIcons/useTreeViewIcons.types.js +5 -0
  140. package/node/internals/plugins/useTreeViewId/useTreeViewId.js +4 -1
  141. package/node/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.js +2 -1
  142. package/node/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js +155 -112
  143. package/node/internals/plugins/useTreeViewNodes/useTreeViewNodes.js +18 -3
  144. package/node/internals/plugins/useTreeViewSelection/useTreeViewSelection.js +18 -6
  145. package/node/internals/useTreeView/useTreeView.js +7 -3
  146. package/node/internals/useTreeView/useTreeViewModels.js +12 -13
  147. package/node/internals/utils/extractPluginParamsFromProps.js +46 -0
  148. package/package.json +7 -7
  149. package/themeAugmentation/components.d.ts +4 -4
  150. package/internals/plugins/useTreeViewContextValueBuilder/index.d.ts +0 -2
  151. package/internals/plugins/useTreeViewContextValueBuilder/index.js +0 -1
  152. package/internals/plugins/useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.d.ts +0 -3
  153. package/internals/plugins/useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.js +0 -26
  154. package/internals/plugins/useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.types.d.ts +0 -29
  155. package/legacy/internals/plugins/useTreeViewContextValueBuilder/index.js +0 -1
  156. package/legacy/internals/plugins/useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.js +0 -28
  157. package/modern/internals/plugins/useTreeViewContextValueBuilder/index.js +0 -1
  158. package/modern/internals/plugins/useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.js +0 -26
  159. package/node/internals/plugins/useTreeViewContextValueBuilder/index.js +0 -12
  160. package/node/internals/plugins/useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.js +0 -33
  161. /package/internals/{plugins/useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.types.js → models/MuiCancellableEvent.js} +0 -0
  162. /package/{legacy/internals/plugins/useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.types.js → internals/plugins/useTreeViewIcons/useTreeViewIcons.types.js} +0 -0
  163. /package/{modern/internals/plugins/useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.types.js → legacy/internals/models/MuiCancellableEvent.js} +0 -0
  164. /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 useTreeItem(nodeId) {
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.7
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
  };
@@ -36,4 +36,5 @@ export var useTreeViewInstanceEvents = function useTreeViewInstanceEvents(_ref)
36
36
  $$publishEvent: publishEvent,
37
37
  $$subscribeEvent: subscribeEvent
38
38
  });
39
- };
39
+ };
40
+ useTreeViewInstanceEvents.params = {};
@@ -0,0 +1,4 @@
1
+ export { useTreeView } from './useTreeView';
2
+ export { TreeViewProvider } from './TreeViewProvider';
3
+ export { DEFAULT_TREE_VIEW_PLUGINS } from './plugins/defaultPlugins';
4
+ export { extractPluginParamsFromProps } from './utils/extractPluginParamsFromProps';
@@ -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 { useTreeViewContextValueBuilder } from './useTreeViewContextValueBuilder';
8
- export var DEFAULT_TREE_VIEW_PLUGINS = [useTreeViewId, useTreeViewNodes, useTreeViewExpansion, useTreeViewSelection, useTreeViewFocus, useTreeViewKeyboardNavigation, useTreeViewContextValueBuilder];
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
- if (params.onExpandedNodesChange) {
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
- if (params.onExpandedNodesChange) {
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
- controlledProp: 'expandedNodes',
66
- defaultProp: 'defaultExpandedNodes'
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.getDefaultizedParams = function (params) {
102
- var _params$disabledItems;
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 = {};
@@ -18,4 +18,7 @@ export var useTreeViewId = function useTreeViewId(_ref) {
18
18
  };
19
19
  }
20
20
  };
21
+ };
22
+ useTreeViewId.params = {
23
+ id: true
21
24
  };
@@ -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 = {};
@@ -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 isRtl = theme.direction === 'rtl';
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 handleNextArrow = function handleNextArrow(event) {
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
- instance.focusNode(event, firstCharIds[index]);
79
+ return firstCharIds[index];
105
80
  }
81
+ return null;
106
82
  };
107
- var selectNextNode = function selectNextNode(event, id) {
108
- if (!instance.isNodeDisabled(getNextNode(instance, id))) {
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 selectPreviousNode = function selectPreviousNode(event, nodeId) {
116
- if (!instance.isNodeDisabled(getPreviousNode(instance, nodeId))) {
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
- var flag = false;
128
- var key = event.key;
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
- switch (key) {
136
- case ' ':
137
- if (!params.disableSelection && !instance.isNodeDisabled(state.focusedNodeId)) {
138
- flag = true;
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
- event.stopPropagation();
150
- break;
151
- case 'Enter':
152
- if (!instance.isNodeDisabled(state.focusedNodeId)) {
153
- if (instance.isNodeExpandable(state.focusedNodeId)) {
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
- flag = true;
156
- } else if (!params.disableSelection) {
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
- event.stopPropagation();
166
- break;
167
- case 'ArrowDown':
168
- if (params.multiSelect && event.shiftKey && !params.disableSelection) {
169
- selectNextNode(event, state.focusedNodeId);
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
- instance.focusNode(event, getNextNode(instance, state.focusedNodeId));
172
- flag = true;
173
- break;
174
- case 'ArrowUp':
175
- if (params.multiSelect && event.shiftKey && !params.disableSelection) {
176
- selectPreviousNode(event, state.focusedNodeId);
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
- instance.focusNode(event, getPreviousNode(instance, state.focusedNodeId));
179
- flag = true;
180
- break;
181
- case 'ArrowRight':
182
- if (isRtl) {
183
- flag = handlePreviousArrow(event);
184
- } else {
185
- flag = handleNextArrow(event);
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
- break;
188
- case 'ArrowLeft':
189
- if (isRtl) {
190
- flag = handleNextArrow(event);
191
- } else {
192
- flag = handlePreviousArrow(event);
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
- break;
195
- case 'Home':
196
- if (params.multiSelect && ctrlPressed && event.shiftKey && !params.disableSelection && !instance.isNodeDisabled(state.focusedNodeId)) {
197
- instance.rangeSelectToFirst(event, state.focusedNodeId);
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
- instance.focusNode(event, getFirstNode(instance));
200
- flag = true;
201
- break;
202
- case 'End':
203
- if (params.multiSelect && ctrlPressed && event.shiftKey && !params.disableSelection && !instance.isNodeDisabled(state.focusedNodeId)) {
204
- instance.rangeSelectToLast(event, state.focusedNodeId);
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
- instance.focusNode(event, getLastNode(instance));
207
- flag = true;
208
- break;
209
- default:
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
- flag = true;
213
- } else if (params.multiSelect && ctrlPressed && key.toLowerCase() === 'a' && !params.disableSelection) {
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
- flag = true;
219
- } else if (!ctrlPressed && !event.shiftKey && isPrintableCharacter(key)) {
220
- focusByFirstCharacter(event, state.focusedNodeId, key);
221
- flag = true;
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
  };