@mui/x-tree-view 7.0.0-alpha.8 → 7.0.0-alpha.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (139) hide show
  1. package/CHANGELOG.md +379 -2
  2. package/README.md +1 -1
  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 -37
  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/{modern/TreeItem/useTreeItem.js → TreeItem/useTreeItemState.js} +4 -2
  18. package/TreeView/TreeView.js +0 -21
  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.types.d.ts +6 -4
  50. package/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.types.d.ts +9 -6
  51. package/internals/plugins/useTreeViewNodes/useTreeViewNodes.js +11 -0
  52. package/internals/plugins/useTreeViewNodes/useTreeViewNodes.types.d.ts +10 -2
  53. package/internals/plugins/useTreeViewSelection/useTreeViewSelection.js +9 -5
  54. package/internals/plugins/useTreeViewSelection/useTreeViewSelection.types.d.ts +15 -5
  55. package/internals/useTreeView/useTreeView.js +7 -3
  56. package/internals/useTreeView/useTreeView.types.d.ts +6 -6
  57. package/internals/useTreeView/useTreeViewModels.js +10 -11
  58. package/internals/utils/extractPluginParamsFromProps.d.ts +8 -5
  59. package/internals/utils/extractPluginParamsFromProps.js +17 -6
  60. package/legacy/RichTreeView/RichTreeView.js +3 -27
  61. package/legacy/SimpleTreeView/SimpleTreeView.js +4 -28
  62. package/legacy/TreeItem/TreeItem.js +63 -39
  63. package/legacy/TreeItem/TreeItemContent.js +9 -12
  64. package/legacy/TreeItem/index.js +1 -1
  65. package/legacy/TreeItem/{useTreeItem.js → useTreeItemState.js} +2 -2
  66. package/legacy/TreeView/TreeView.js +0 -21
  67. package/legacy/icons/icons.js +9 -0
  68. package/legacy/icons/index.js +1 -0
  69. package/legacy/index.js +3 -2
  70. package/legacy/internals/index.js +4 -0
  71. package/legacy/internals/plugins/defaultPlugins.js +2 -2
  72. package/legacy/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js +10 -10
  73. package/legacy/internals/plugins/useTreeViewFocus/useTreeViewFocus.js +0 -6
  74. package/legacy/internals/plugins/useTreeViewIcons/index.js +1 -0
  75. package/legacy/internals/plugins/useTreeViewIcons/useTreeViewIcons.js +21 -0
  76. package/legacy/internals/plugins/useTreeViewNodes/useTreeViewNodes.js +11 -0
  77. package/legacy/internals/plugins/useTreeViewSelection/useTreeViewSelection.js +12 -6
  78. package/legacy/internals/useTreeView/useTreeView.js +6 -2
  79. package/legacy/internals/useTreeView/useTreeViewModels.js +10 -11
  80. package/legacy/internals/utils/extractPluginParamsFromProps.js +11 -2
  81. package/modern/RichTreeView/RichTreeView.js +10 -36
  82. package/modern/SimpleTreeView/SimpleTreeView.js +12 -37
  83. package/modern/TreeItem/TreeItem.js +61 -39
  84. package/modern/TreeItem/TreeItemContent.js +2 -5
  85. package/modern/TreeItem/index.js +1 -1
  86. package/{TreeItem/useTreeItem.js → modern/TreeItem/useTreeItemState.js} +4 -2
  87. package/modern/TreeView/TreeView.js +0 -21
  88. package/modern/icons/icons.js +9 -0
  89. package/modern/icons/index.js +1 -0
  90. package/modern/index.js +3 -2
  91. package/modern/internals/index.js +4 -0
  92. package/modern/internals/plugins/defaultPlugins.js +2 -2
  93. package/modern/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js +7 -10
  94. package/modern/internals/plugins/useTreeViewFocus/useTreeViewFocus.js +0 -3
  95. package/modern/internals/plugins/useTreeViewIcons/index.js +1 -0
  96. package/modern/internals/plugins/useTreeViewIcons/useTreeViewIcons.js +22 -0
  97. package/modern/internals/plugins/useTreeViewNodes/useTreeViewNodes.js +8 -0
  98. package/modern/internals/plugins/useTreeViewSelection/useTreeViewSelection.js +9 -5
  99. package/modern/internals/useTreeView/useTreeView.js +7 -3
  100. package/modern/internals/useTreeView/useTreeViewModels.js +10 -11
  101. package/modern/internals/utils/extractPluginParamsFromProps.js +17 -6
  102. package/node/RichTreeView/RichTreeView.js +10 -36
  103. package/node/SimpleTreeView/SimpleTreeView.js +12 -37
  104. package/node/TreeItem/TreeItem.js +61 -39
  105. package/node/TreeItem/TreeItemContent.js +2 -5
  106. package/node/TreeItem/index.js +4 -4
  107. package/node/TreeItem/{useTreeItem.js → useTreeItemState.js} +5 -3
  108. package/node/TreeView/TreeView.js +0 -21
  109. package/node/icons/icons.js +17 -0
  110. package/node/icons/index.js +16 -0
  111. package/node/index.js +13 -1
  112. package/node/internals/index.js +33 -0
  113. package/node/internals/plugins/defaultPlugins.js +2 -2
  114. package/node/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js +7 -10
  115. package/node/internals/plugins/useTreeViewFocus/useTreeViewFocus.js +0 -3
  116. package/node/internals/plugins/useTreeViewIcons/index.js +12 -0
  117. package/node/internals/plugins/useTreeViewIcons/useTreeViewIcons.js +29 -0
  118. package/node/internals/plugins/useTreeViewNodes/useTreeViewNodes.js +8 -0
  119. package/node/internals/plugins/useTreeViewSelection/useTreeViewSelection.js +9 -5
  120. package/node/internals/useTreeView/useTreeView.js +7 -3
  121. package/node/internals/useTreeView/useTreeViewModels.js +10 -11
  122. package/node/internals/utils/extractPluginParamsFromProps.js +18 -6
  123. package/package.json +7 -7
  124. package/themeAugmentation/components.d.ts +4 -4
  125. package/internals/plugins/useTreeViewContextValueBuilder/index.d.ts +0 -2
  126. package/internals/plugins/useTreeViewContextValueBuilder/index.js +0 -1
  127. package/internals/plugins/useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.d.ts +0 -3
  128. package/internals/plugins/useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.js +0 -32
  129. package/internals/plugins/useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.types.d.ts +0 -29
  130. package/legacy/internals/plugins/useTreeViewContextValueBuilder/index.js +0 -1
  131. package/legacy/internals/plugins/useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.js +0 -34
  132. package/modern/internals/plugins/useTreeViewContextValueBuilder/index.js +0 -1
  133. package/modern/internals/plugins/useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.js +0 -32
  134. package/node/internals/plugins/useTreeViewContextValueBuilder/index.js +0 -12
  135. package/node/internals/plugins/useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.js +0 -39
  136. /package/internals/plugins/{useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.types.js → useTreeViewIcons/useTreeViewIcons.types.js} +0 -0
  137. /package/legacy/internals/plugins/{useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.types.js → useTreeViewIcons/useTreeViewIcons.types.js} +0 -0
  138. /package/modern/internals/plugins/{useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.types.js → useTreeViewIcons/useTreeViewIcons.types.js} +0 -0
  139. /package/node/internals/plugins/{useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.types.js → useTreeViewIcons/useTreeViewIcons.types.js} +0 -0
@@ -1,13 +1,16 @@
1
1
  import * as React from 'react';
2
2
  import { ConvertPluginsIntoSignatures, MergePluginsProperty, TreeViewPlugin } from '../models';
3
- export declare const extractPluginParamsFromProps: <TProps extends {}, TPlugins extends readonly TreeViewPlugin<any>[]>({ props, plugins, rootRef, }: {
3
+ import { UseTreeViewBaseParameters } from '../useTreeView/useTreeView.types';
4
+ export declare const extractPluginParamsFromProps: <TPlugins extends readonly TreeViewPlugin<any>[], TSlots extends MergePluginsProperty<TPlugins, "slots">, TSlotProps extends MergePluginsProperty<TPlugins, "slotProps">, TProps extends {
5
+ slots?: TSlots | undefined;
6
+ slotProps?: TSlotProps | undefined;
7
+ }>({ props: { slots, slotProps, ...props }, plugins, rootRef, }: {
4
8
  props: TProps;
5
9
  plugins: TPlugins;
6
10
  rootRef?: React.Ref<HTMLUListElement> | undefined;
7
11
  }) => {
8
- pluginParams: MergePluginsProperty<ConvertPluginsIntoSignatures<TPlugins>, "params"> & {
9
- plugins: TPlugins;
10
- rootRef?: React.Ref<HTMLUListElement> | undefined;
11
- };
12
+ pluginParams: UseTreeViewBaseParameters<TPlugins> & MergePluginsProperty<ConvertPluginsIntoSignatures<TPlugins>, "params">;
13
+ slots: TSlots | undefined;
14
+ slotProps: TSlotProps | undefined;
12
15
  otherProps: Omit<TProps, keyof MergePluginsProperty<ConvertPluginsIntoSignatures<TPlugins>, "params">>;
13
16
  };
@@ -1,15 +1,24 @@
1
- export const extractPluginParamsFromProps = ({
2
- props,
3
- plugins,
4
- rootRef
5
- }) => {
1
+ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
2
+ const _excluded = ["slots", "slotProps"];
3
+ export const extractPluginParamsFromProps = _ref => {
4
+ let {
5
+ props: {
6
+ slots,
7
+ slotProps
8
+ },
9
+ plugins,
10
+ rootRef
11
+ } = _ref,
12
+ props = _objectWithoutPropertiesLoose(_ref.props, _excluded);
6
13
  const paramsLookup = {};
7
14
  plugins.forEach(plugin => {
8
15
  Object.assign(paramsLookup, plugin.params);
9
16
  });
10
17
  const pluginParams = {
11
18
  plugins,
12
- rootRef
19
+ rootRef,
20
+ slots: slots != null ? slots : {},
21
+ slotProps: slotProps != null ? slotProps : {}
13
22
  };
14
23
  const otherProps = {};
15
24
  Object.keys(props).forEach(propName => {
@@ -22,6 +31,8 @@ export const extractPluginParamsFromProps = ({
22
31
  });
23
32
  return {
24
33
  pluginParams,
34
+ slots,
35
+ slotProps,
25
36
  otherProps
26
37
  };
27
38
  };
@@ -1,6 +1,4 @@
1
- import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
2
1
  import _extends from "@babel/runtime/helpers/esm/extends";
3
- var _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';
@@ -88,10 +86,9 @@ var RichTreeView = /*#__PURE__*/React.forwardRef(function RichTreeView(inProps,
88
86
  rootRef: ref
89
87
  }),
90
88
  pluginParams = _extractPluginParamsF.pluginParams,
91
- _extractPluginParamsF2 = _extractPluginParamsF.otherProps,
92
- slots = _extractPluginParamsF2.slots,
93
- slotProps = _extractPluginParamsF2.slotProps,
94
- otherProps = _objectWithoutProperties(_extractPluginParamsF2, _excluded);
89
+ slots = _extractPluginParamsF.slots,
90
+ slotProps = _extractPluginParamsF.slotProps,
91
+ otherProps = _extractPluginParamsF.otherProps;
95
92
  var _useTreeView = useTreeView(pluginParams),
96
93
  getRootProps = _useTreeView.getRootProps,
97
94
  contextValue = _useTreeView.contextValue,
@@ -137,34 +134,13 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
137
134
  * Override or extend the styles applied to the component.
138
135
  */
139
136
  classes: PropTypes.object,
140
- /**
141
- * className applied to the root element.
142
- */
143
137
  className: PropTypes.string,
144
- /**
145
- * The default icon used to collapse the node.
146
- */
147
- defaultCollapseIcon: PropTypes.node,
148
- /**
149
- * The default icon displayed next to a end node. This is applied to all
150
- * tree nodes and can be overridden by the TreeItem `icon` prop.
151
- */
152
- defaultEndIcon: PropTypes.node,
153
138
  /**
154
139
  * Expanded node ids.
155
140
  * Used when the item's expansion is not controlled.
156
141
  * @default []
157
142
  */
158
143
  defaultExpandedNodes: PropTypes.arrayOf(PropTypes.string),
159
- /**
160
- * The default icon used to expand the node.
161
- */
162
- defaultExpandIcon: PropTypes.node,
163
- /**
164
- * The default icon displayed next to a parent node. This is applied to all
165
- * parent nodes and can be overridden by the TreeItem `icon` prop.
166
- */
167
- defaultParentIcon: PropTypes.node,
168
144
  /**
169
145
  * Selected node ids. (Uncontrolled)
170
146
  * 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 _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
3
- var _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';
@@ -65,10 +63,9 @@ var SimpleTreeView = /*#__PURE__*/React.forwardRef(function SimpleTreeView(inPro
65
63
  rootRef: ref
66
64
  }),
67
65
  pluginParams = _extractPluginParamsF.pluginParams,
68
- _extractPluginParamsF2 = _extractPluginParamsF.otherProps,
69
- slots = _extractPluginParamsF2.slots,
70
- slotProps = _extractPluginParamsF2.slotProps,
71
- otherProps = _objectWithoutProperties(_extractPluginParamsF2, _excluded);
66
+ slots = _extractPluginParamsF.slots,
67
+ slotProps = _extractPluginParamsF.slotProps,
68
+ otherProps = _extractPluginParamsF.otherProps;
72
69
  var _useTreeView = useTreeView(pluginParams),
73
70
  getRootProps = _useTreeView.getRootProps,
74
71
  contextValue = _useTreeView.contextValue;
@@ -76,7 +73,7 @@ var SimpleTreeView = /*#__PURE__*/React.forwardRef(function SimpleTreeView(inPro
76
73
  var Root = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : SimpleTreeViewRoot;
77
74
  var rootProps = useSlotProps({
78
75
  elementType: Root,
79
- externalSlotProps: {},
76
+ externalSlotProps: slotProps == null ? void 0 : slotProps.root,
80
77
  externalForwardedProps: otherProps,
81
78
  className: classes.root,
82
79
  getSlotProps: getRootProps,
@@ -100,34 +97,13 @@ process.env.NODE_ENV !== "production" ? SimpleTreeView.propTypes = {
100
97
  * Override or extend the styles applied to the component.
101
98
  */
102
99
  classes: PropTypes.object,
103
- /**
104
- * className applied to the root element.
105
- */
106
100
  className: PropTypes.string,
107
- /**
108
- * The default icon used to collapse the node.
109
- */
110
- defaultCollapseIcon: PropTypes.node,
111
- /**
112
- * The default icon displayed next to a end node. This is applied to all
113
- * tree nodes and can be overridden by the TreeItem `icon` prop.
114
- */
115
- defaultEndIcon: PropTypes.node,
116
101
  /**
117
102
  * Expanded node ids.
118
103
  * Used when the item's expansion is not controlled.
119
104
  * @default []
120
105
  */
121
106
  defaultExpandedNodes: PropTypes.arrayOf(PropTypes.string),
122
- /**
123
- * The default icon used to expand the node.
124
- */
125
- defaultExpandIcon: PropTypes.node,
126
- /**
127
- * The default icon displayed next to a parent node. This is applied to all
128
- * parent nodes and can be overridden by the TreeItem `icon` prop.
129
- */
130
- defaultParentIcon: PropTypes.node,
131
107
  /**
132
108
  * Selected node ids. (Uncontrolled)
133
109
  * When `multiSelect` is true this takes an array of strings; when false (default) a string.
@@ -1,11 +1,15 @@
1
1
  import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
2
2
  import _extends from "@babel/runtime/helpers/esm/extends";
3
3
  import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
4
- var _excluded = ["children", "className", "collapseIcon", "ContentComponent", "ContentProps", "endIcon", "expandIcon", "icon", "nodeId", "id", "label", "onClick", "onMouseDown", "TransitionComponent", "TransitionProps"];
4
+ var _excluded = ["children", "className", "slots", "slotProps", "ContentComponent", "ContentProps", "nodeId", "id", "label", "onClick", "onMouseDown", "TransitionComponent", "TransitionProps"],
5
+ _excluded2 = ["ownerState"],
6
+ _excluded3 = ["ownerState"],
7
+ _excluded4 = ["ownerState"];
5
8
  import * as React from 'react';
6
9
  import PropTypes from 'prop-types';
7
10
  import clsx from 'clsx';
8
11
  import Collapse from '@mui/material/Collapse';
12
+ import { resolveComponentProps, useSlotProps } from '@mui/base/utils';
9
13
  import { alpha, styled, useThemeProps } from '@mui/material/styles';
10
14
  import unsupportedProp from '@mui/utils/unsupportedProp';
11
15
  import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef';
@@ -13,6 +17,7 @@ import { unstable_composeClasses as composeClasses } from '@mui/base';
13
17
  import { TreeItemContent } from './TreeItemContent';
14
18
  import { treeItemClasses, getTreeItemUtilityClass } from './treeItemClasses';
15
19
  import { useTreeViewContext } from '../internals/TreeViewProvider/useTreeViewContext';
20
+ import { TreeViewCollapseIcon, TreeViewExpandIcon } from '../icons';
16
21
  import { jsx as _jsx } from "react/jsx-runtime";
17
22
  import { jsxs as _jsxs } from "react/jsx-runtime";
18
23
  var useUtilityClasses = function useUtilityClasses(ownerState) {
@@ -124,10 +129,11 @@ var TreeItemGroup = styled(Collapse, {
124
129
  * - [TreeItem API](https://mui.com/x/api/tree-view/tree-item/)
125
130
  */
126
131
  export var TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps, inRef) {
132
+ var _ref5, _inSlots$expandIcon, _ref6, _inSlots$collapseIcon, _inSlots$endIcon;
127
133
  var _useTreeViewContext = useTreeViewContext(),
128
134
  contextIcons = _useTreeViewContext.icons,
129
135
  runItemPlugins = _useTreeViewContext.runItemPlugins,
130
- multiSelect = _useTreeViewContext.multiSelect,
136
+ multiSelect = _useTreeViewContext.selection.multiSelect,
131
137
  disabledItemsFocusable = _useTreeViewContext.disabledItemsFocusable,
132
138
  instance = _useTreeViewContext.instance;
133
139
  var inPropsWithTheme = useThemeProps({
@@ -143,13 +149,11 @@ export var TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps, i
143
149
  wrapItem = _runItemPlugins.wrapItem;
144
150
  var children = props.children,
145
151
  className = props.className,
146
- collapseIcon = props.collapseIcon,
152
+ inSlots = props.slots,
153
+ inSlotProps = props.slotProps,
147
154
  _props$ContentCompone = props.ContentComponent,
148
155
  ContentComponent = _props$ContentCompone === void 0 ? TreeItemContent : _props$ContentCompone,
149
156
  ContentProps = props.ContentProps,
150
- endIcon = props.endIcon,
151
- expandIcon = props.expandIcon,
152
- icon = props.icon,
153
157
  nodeId = props.nodeId,
154
158
  id = props.id,
155
159
  label = props.label,
@@ -159,6 +163,12 @@ export var TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps, i
159
163
  TransitionComponent = _props$TransitionComp === void 0 ? Collapse : _props$TransitionComp,
160
164
  TransitionProps = props.TransitionProps,
161
165
  other = _objectWithoutProperties(props, _excluded);
166
+ var slots = {
167
+ expandIcon: (_ref5 = (_inSlots$expandIcon = inSlots == null ? void 0 : inSlots.expandIcon) != null ? _inSlots$expandIcon : contextIcons.slots.expandIcon) != null ? _ref5 : TreeViewExpandIcon,
168
+ collapseIcon: (_ref6 = (_inSlots$collapseIcon = inSlots == null ? void 0 : inSlots.collapseIcon) != null ? _inSlots$collapseIcon : contextIcons.slots.collapseIcon) != null ? _ref6 : TreeViewCollapseIcon,
169
+ endIcon: (_inSlots$endIcon = inSlots == null ? void 0 : inSlots.endIcon) != null ? _inSlots$endIcon : contextIcons.slots.endIcon,
170
+ icon: inSlots == null ? void 0 : inSlots.icon
171
+ };
162
172
  var expandable = Boolean(Array.isArray(children) ? children.length : children);
163
173
  var expanded = instance.isNodeExpanded(nodeId);
164
174
  var focused = instance.isNodeFocused(nodeId);
@@ -171,20 +181,43 @@ export var TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps, i
171
181
  disabled: disabled
172
182
  });
173
183
  var classes = useUtilityClasses(ownerState);
174
- var displayIcon;
175
- var expansionIcon;
176
- if (expandable) {
177
- if (!expanded) {
178
- expansionIcon = expandIcon || contextIcons.defaultExpandIcon;
179
- } else {
180
- expansionIcon = collapseIcon || contextIcons.defaultCollapseIcon;
181
- }
182
- }
183
- if (expandable) {
184
- displayIcon = contextIcons.defaultParentIcon;
185
- } else {
186
- displayIcon = endIcon || contextIcons.defaultEndIcon;
187
- }
184
+ var ExpansionIcon = expanded ? slots.collapseIcon : slots.expandIcon;
185
+ var _useSlotProps = useSlotProps({
186
+ elementType: ExpansionIcon,
187
+ ownerState: {},
188
+ externalSlotProps: function externalSlotProps(tempOwnerState) {
189
+ if (expanded) {
190
+ return _extends({}, resolveComponentProps(contextIcons.slotProps.collapseIcon, tempOwnerState), resolveComponentProps(inSlotProps == null ? void 0 : inSlotProps.collapseIcon, tempOwnerState));
191
+ }
192
+ return _extends({}, resolveComponentProps(contextIcons.slotProps.expandIcon, tempOwnerState), resolveComponentProps(inSlotProps == null ? void 0 : inSlotProps.expandIcon, tempOwnerState));
193
+ }
194
+ }),
195
+ expansionIconOwnerState = _useSlotProps.ownerState,
196
+ expansionIconProps = _objectWithoutProperties(_useSlotProps, _excluded2);
197
+ var expansionIcon = expandable && !!ExpansionIcon ? /*#__PURE__*/_jsx(ExpansionIcon, _extends({}, expansionIconProps)) : null;
198
+ var DisplayIcon = expandable ? undefined : slots.endIcon;
199
+ var _useSlotProps2 = useSlotProps({
200
+ elementType: DisplayIcon,
201
+ ownerState: {},
202
+ externalSlotProps: function externalSlotProps(tempOwnerState) {
203
+ if (expandable) {
204
+ return {};
205
+ }
206
+ return _extends({}, resolveComponentProps(contextIcons.slotProps.endIcon, tempOwnerState), resolveComponentProps(inSlotProps == null ? void 0 : inSlotProps.endIcon, tempOwnerState));
207
+ }
208
+ }),
209
+ displayIconOwnerState = _useSlotProps2.ownerState,
210
+ displayIconProps = _objectWithoutProperties(_useSlotProps2, _excluded3);
211
+ var displayIcon = DisplayIcon ? /*#__PURE__*/_jsx(DisplayIcon, _extends({}, displayIconProps)) : null;
212
+ var Icon = slots.icon;
213
+ var _useSlotProps3 = useSlotProps({
214
+ elementType: Icon,
215
+ ownerState: {},
216
+ externalSlotProps: inSlotProps == null ? void 0 : inSlotProps.icon
217
+ }),
218
+ iconOwnerState = _useSlotProps3.ownerState,
219
+ iconProps = _objectWithoutProperties(_useSlotProps3, _excluded4);
220
+ var icon = Icon ? /*#__PURE__*/_jsx(Icon, _extends({}, iconProps)) : null;
188
221
  var ariaSelected;
189
222
  if (multiSelect) {
190
223
  ariaSelected = selected;
@@ -265,14 +298,7 @@ TreeItem.propTypes = {
265
298
  * Override or extend the styles applied to the component.
266
299
  */
267
300
  classes: PropTypes.object,
268
- /**
269
- * className applied to the root element.
270
- */
271
301
  className: PropTypes.string,
272
- /**
273
- * The icon used to collapse the node.
274
- */
275
- collapseIcon: PropTypes.node,
276
302
  /**
277
303
  * The component used for the content node.
278
304
  * @default TreeItemContent
@@ -287,18 +313,6 @@ TreeItem.propTypes = {
287
313
  * @default false
288
314
  */
289
315
  disabled: PropTypes.bool,
290
- /**
291
- * The icon displayed next to an end node.
292
- */
293
- endIcon: PropTypes.node,
294
- /**
295
- * The icon used to expand the node.
296
- */
297
- expandIcon: PropTypes.node,
298
- /**
299
- * The icon to display next to the tree node's label.
300
- */
301
- icon: PropTypes.node,
302
316
  /**
303
317
  * The tree node label.
304
318
  */
@@ -312,6 +326,16 @@ TreeItem.propTypes = {
312
326
  * Use the `onNodeFocus` callback on the tree if you need to monitor a node's focus.
313
327
  */
314
328
  onFocus: unsupportedProp,
329
+ /**
330
+ * The props used for each component slot.
331
+ * @default {}
332
+ */
333
+ slotProps: PropTypes.object,
334
+ /**
335
+ * Overridable component slots.
336
+ * @default {}
337
+ */
338
+ slots: PropTypes.object,
315
339
  /**
316
340
  * The system prop that allows defining system overrides as well as additional CSS styles.
317
341
  */
@@ -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.
@@ -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-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';
@@ -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 = {};
@@ -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({
@@ -138,6 +143,12 @@ useTreeViewNodes.getInitialState = function (params) {
138
143
  getItemLabel: params.getItemLabel
139
144
  });
140
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
+ };
141
152
  useTreeViewNodes.params = {
142
153
  disabledItemsFocusable: true,
143
154
  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 = [];