@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.
Files changed (143) hide show
  1. package/CHANGELOG.md +508 -30
  2. package/README.md +3 -3
  3. package/RichTreeView/RichTreeView.js +10 -36
  4. package/RichTreeView/RichTreeView.types.d.ts +6 -9
  5. package/RichTreeView/index.d.ts +1 -1
  6. package/SimpleTreeView/SimpleTreeView.js +12 -55
  7. package/SimpleTreeView/SimpleTreeView.plugins.d.ts +5 -3
  8. package/SimpleTreeView/SimpleTreeView.types.d.ts +8 -7
  9. package/SimpleTreeView/index.d.ts +1 -1
  10. package/TreeItem/TreeItem.js +62 -39
  11. package/TreeItem/TreeItem.types.d.ts +33 -17
  12. package/TreeItem/TreeItemContent.d.ts +0 -3
  13. package/TreeItem/TreeItemContent.js +2 -5
  14. package/TreeItem/index.d.ts +2 -2
  15. package/TreeItem/index.js +1 -1
  16. package/TreeItem/{useTreeItem.d.ts → useTreeItemState.d.ts} +1 -1
  17. package/{modern/TreeItem/useTreeItem.js → TreeItem/useTreeItemState.js} +4 -2
  18. package/TreeView/TreeView.js +0 -39
  19. package/TreeView/TreeView.types.d.ts +5 -1
  20. package/TreeView/index.d.ts +1 -1
  21. package/icons/icons.d.ts +6 -0
  22. package/icons/icons.js +9 -0
  23. package/icons/index.d.ts +1 -0
  24. package/icons/index.js +1 -0
  25. package/icons/package.json +6 -0
  26. package/index.d.ts +1 -0
  27. package/index.js +3 -2
  28. package/internals/TreeViewProvider/TreeViewContext.d.ts +4 -2
  29. package/internals/TreeViewProvider/TreeViewProvider.types.d.ts +3 -11
  30. package/internals/corePlugins/useTreeViewInstanceEvents/useTreeViewInstanceEvents.types.d.ts +3 -2
  31. package/internals/index.d.ts +15 -0
  32. package/internals/index.js +4 -0
  33. package/internals/models/helpers.d.ts +7 -1
  34. package/internals/models/plugin.d.ts +64 -20
  35. package/internals/models/treeView.d.ts +1 -2
  36. package/internals/package.json +6 -0
  37. package/internals/plugins/defaultPlugins.d.ts +6 -4
  38. package/internals/plugins/defaultPlugins.js +2 -2
  39. package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js +8 -10
  40. package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.types.d.ts +7 -3
  41. package/internals/plugins/useTreeViewFocus/useTreeViewFocus.js +0 -6
  42. package/internals/plugins/useTreeViewFocus/useTreeViewFocus.types.d.ts +12 -6
  43. package/internals/plugins/useTreeViewIcons/index.d.ts +2 -0
  44. package/internals/plugins/useTreeViewIcons/index.js +1 -0
  45. package/internals/plugins/useTreeViewIcons/useTreeViewIcons.d.ts +3 -0
  46. package/internals/plugins/useTreeViewIcons/useTreeViewIcons.js +22 -0
  47. package/internals/plugins/useTreeViewIcons/useTreeViewIcons.types.d.ts +43 -0
  48. package/internals/plugins/useTreeViewId/useTreeViewId.types.d.ts +6 -2
  49. package/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.js +10 -5
  50. package/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.types.d.ts +6 -4
  51. package/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.types.d.ts +9 -6
  52. package/internals/plugins/useTreeViewNodes/useTreeViewNodes.js +14 -0
  53. package/internals/plugins/useTreeViewNodes/useTreeViewNodes.types.d.ts +10 -2
  54. package/internals/plugins/useTreeViewSelection/useTreeViewSelection.js +9 -5
  55. package/internals/plugins/useTreeViewSelection/useTreeViewSelection.types.d.ts +15 -5
  56. package/internals/useTreeView/useTreeView.js +7 -3
  57. package/internals/useTreeView/useTreeView.types.d.ts +6 -6
  58. package/internals/useTreeView/useTreeViewModels.js +10 -11
  59. package/internals/utils/extractPluginParamsFromProps.d.ts +8 -5
  60. package/internals/utils/extractPluginParamsFromProps.js +17 -6
  61. package/legacy/RichTreeView/RichTreeView.js +3 -27
  62. package/legacy/SimpleTreeView/SimpleTreeView.js +4 -46
  63. package/legacy/TreeItem/TreeItem.js +63 -39
  64. package/legacy/TreeItem/TreeItemContent.js +9 -12
  65. package/legacy/TreeItem/index.js +1 -1
  66. package/legacy/TreeItem/{useTreeItem.js → useTreeItemState.js} +2 -2
  67. package/legacy/TreeView/TreeView.js +0 -39
  68. package/legacy/icons/icons.js +9 -0
  69. package/legacy/icons/index.js +1 -0
  70. package/legacy/index.js +3 -2
  71. package/legacy/internals/index.js +4 -0
  72. package/legacy/internals/plugins/defaultPlugins.js +2 -2
  73. package/legacy/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js +10 -10
  74. package/legacy/internals/plugins/useTreeViewFocus/useTreeViewFocus.js +0 -6
  75. package/legacy/internals/plugins/useTreeViewIcons/index.js +1 -0
  76. package/legacy/internals/plugins/useTreeViewIcons/useTreeViewIcons.js +21 -0
  77. package/legacy/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.js +3 -0
  78. package/legacy/internals/plugins/useTreeViewNodes/useTreeViewNodes.js +14 -0
  79. package/legacy/internals/plugins/useTreeViewSelection/useTreeViewSelection.js +12 -6
  80. package/legacy/internals/useTreeView/useTreeView.js +6 -2
  81. package/legacy/internals/useTreeView/useTreeViewModels.js +10 -11
  82. package/legacy/internals/utils/extractPluginParamsFromProps.js +11 -2
  83. package/modern/RichTreeView/RichTreeView.js +10 -36
  84. package/modern/SimpleTreeView/SimpleTreeView.js +12 -55
  85. package/modern/TreeItem/TreeItem.js +61 -39
  86. package/modern/TreeItem/TreeItemContent.js +2 -5
  87. package/modern/TreeItem/index.js +1 -1
  88. package/{TreeItem/useTreeItem.js → modern/TreeItem/useTreeItemState.js} +4 -2
  89. package/modern/TreeView/TreeView.js +0 -39
  90. package/modern/icons/icons.js +9 -0
  91. package/modern/icons/index.js +1 -0
  92. package/modern/index.js +3 -2
  93. package/modern/internals/index.js +4 -0
  94. package/modern/internals/plugins/defaultPlugins.js +2 -2
  95. package/modern/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js +7 -10
  96. package/modern/internals/plugins/useTreeViewFocus/useTreeViewFocus.js +0 -3
  97. package/modern/internals/plugins/useTreeViewIcons/index.js +1 -0
  98. package/modern/internals/plugins/useTreeViewIcons/useTreeViewIcons.js +22 -0
  99. package/modern/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.js +10 -5
  100. package/modern/internals/plugins/useTreeViewNodes/useTreeViewNodes.js +11 -0
  101. package/modern/internals/plugins/useTreeViewSelection/useTreeViewSelection.js +9 -5
  102. package/modern/internals/useTreeView/useTreeView.js +7 -3
  103. package/modern/internals/useTreeView/useTreeViewModels.js +10 -11
  104. package/modern/internals/utils/extractPluginParamsFromProps.js +17 -6
  105. package/node/RichTreeView/RichTreeView.js +10 -36
  106. package/node/SimpleTreeView/SimpleTreeView.js +12 -55
  107. package/node/TreeItem/TreeItem.js +61 -39
  108. package/node/TreeItem/TreeItemContent.js +2 -5
  109. package/node/TreeItem/index.js +4 -4
  110. package/node/TreeItem/{useTreeItem.js → useTreeItemState.js} +5 -3
  111. package/node/TreeView/TreeView.js +0 -39
  112. package/node/icons/icons.js +17 -0
  113. package/node/icons/index.js +16 -0
  114. package/node/index.js +13 -1
  115. package/node/internals/index.js +33 -0
  116. package/node/internals/plugins/defaultPlugins.js +2 -2
  117. package/node/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js +7 -10
  118. package/node/internals/plugins/useTreeViewFocus/useTreeViewFocus.js +0 -3
  119. package/node/internals/plugins/useTreeViewIcons/index.js +12 -0
  120. package/node/internals/plugins/useTreeViewIcons/useTreeViewIcons.js +29 -0
  121. package/node/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.js +10 -5
  122. package/node/internals/plugins/useTreeViewNodes/useTreeViewNodes.js +11 -0
  123. package/node/internals/plugins/useTreeViewSelection/useTreeViewSelection.js +9 -5
  124. package/node/internals/useTreeView/useTreeView.js +7 -3
  125. package/node/internals/useTreeView/useTreeViewModels.js +10 -11
  126. package/node/internals/utils/extractPluginParamsFromProps.js +18 -6
  127. package/package.json +7 -7
  128. package/themeAugmentation/components.d.ts +4 -4
  129. package/internals/plugins/useTreeViewContextValueBuilder/index.d.ts +0 -2
  130. package/internals/plugins/useTreeViewContextValueBuilder/index.js +0 -1
  131. package/internals/plugins/useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.d.ts +0 -3
  132. package/internals/plugins/useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.js +0 -32
  133. package/internals/plugins/useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.types.d.ts +0 -29
  134. package/legacy/internals/plugins/useTreeViewContextValueBuilder/index.js +0 -1
  135. package/legacy/internals/plugins/useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.js +0 -34
  136. package/modern/internals/plugins/useTreeViewContextValueBuilder/index.js +0 -1
  137. package/modern/internals/plugins/useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.js +0 -32
  138. package/node/internals/plugins/useTreeViewContextValueBuilder/index.js +0 -12
  139. package/node/internals/plugins/useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.js +0 -39
  140. /package/internals/plugins/{useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.types.js → useTreeViewIcons/useTreeViewIcons.types.js} +0 -0
  141. /package/legacy/internals/plugins/{useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.types.js → useTreeViewIcons/useTreeViewIcons.types.js} +0 -0
  142. /package/modern/internals/plugins/{useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.types.js → useTreeViewIcons/useTreeViewIcons.types.js} +0 -0
  143. /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 { useTreeItem } from './useTreeItem';
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 _useTreeItem = useTreeItem(nodeId),
25
- disabled = _useTreeItem.disabled,
26
- expanded = _useTreeItem.expanded,
27
- selected = _useTreeItem.selected,
28
- focused = _useTreeItem.focused,
29
- handleExpansion = _useTreeItem.handleExpansion,
30
- handleSelection = _useTreeItem.handleSelection,
31
- preventSelection = _useTreeItem.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.
@@ -1,4 +1,4 @@
1
1
  export { TreeItem } from './TreeItem';
2
2
  export * from './treeItemClasses';
3
- export * from './useTreeItem';
3
+ export * from './useTreeItemState';
4
4
  export { TreeItemContent } from './TreeItemContent';
@@ -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);
@@ -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-alpha.8
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';
@@ -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 = [];
@@ -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.setValue(newSelectedNodes);
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
- controlledProp: 'selectedNodes',
194
- defaultProp: 'defaultSelectedNodes'
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 = pluginResponse.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
- model = _ref2[1];
18
+ modelInitializer = _ref2[1];
19
19
  modelsRef.current[modelName] = {
20
- controlledProp: model.controlledProp,
21
- defaultProp: model.defaultProp,
22
- isControlled: props[model.controlledProp] !== undefined
20
+ isControlled: props[modelName] !== undefined,
21
+ getDefaultValue: modelInitializer.getDefaultValue
23
22
  };
24
- initialState[modelName] = props[model.defaultProp];
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[model.controlledProp] : modelsState[modelName];
36
+ var value = model.isControlled ? props[modelName] : modelsState[modelName];
38
37
  return [modelName, {
39
38
  value: value,
40
- setValue: function setValue(newValue) {
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[model.controlledProp];
58
- var defaultProp = props[model.defaultProp];
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(defaultProp),
63
+ var _React$useRef = React.useRef(newDefaultValue),
65
64
  defaultValue = _React$useRef.current;
66
65
  React.useEffect(function () {
67
- if (!model.isControlled && defaultValue !== defaultProp) {
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 _extractPluginParamsF = extractPluginParamsFromProps({
85
- props,
86
- plugins: DEFAULT_TREE_VIEW_PLUGINS,
87
- rootRef: ref
88
- }),
89
- {
90
- pluginParams,
91
- otherProps: {
92
- slots,
93
- slotProps
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 _extractPluginParamsF = extractPluginParamsFromProps({
60
- props: _extends({}, props, {
61
- items: EMPTY_ITEMS
62
- }),
63
- plugins: SIMPLE_TREE_VIEW_PLUGINS,
64
- rootRef: ref
57
+ const {
58
+ pluginParams,
59
+ slots,
60
+ slotProps,
61
+ otherProps
62
+ } = extractPluginParamsFromProps({
63
+ props: _extends({}, props, {
64
+ items: EMPTY_ITEMS
65
65
  }),
66
- {
67
- pluginParams,
68
- otherProps: {
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.