@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,3 +1,3 @@
1
1
  export * from './SimpleTreeView';
2
2
  export * from './simpleTreeViewClasses';
3
- export type { SimpleTreeViewProps } from './SimpleTreeView.types';
3
+ export type { SimpleTreeViewProps, SimpleTreeViewSlots, SimpleTreeViewSlotProps, } from './SimpleTreeView.types';
@@ -1,10 +1,14 @@
1
1
  import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
2
2
  import _extends from "@babel/runtime/helpers/esm/extends";
3
- const _excluded = ["children", "className", "collapseIcon", "ContentComponent", "ContentProps", "endIcon", "expandIcon", "icon", "nodeId", "id", "label", "onClick", "onMouseDown", "TransitionComponent", "TransitionProps"];
3
+ const _excluded = ["children", "className", "slots", "slotProps", "ContentComponent", "ContentProps", "nodeId", "id", "label", "onClick", "onMouseDown", "TransitionComponent", "TransitionProps"],
4
+ _excluded2 = ["ownerState"],
5
+ _excluded3 = ["ownerState"],
6
+ _excluded4 = ["ownerState"];
4
7
  import * as React from 'react';
5
8
  import PropTypes from 'prop-types';
6
9
  import clsx from 'clsx';
7
10
  import Collapse from '@mui/material/Collapse';
11
+ import { resolveComponentProps, useSlotProps } from '@mui/base/utils';
8
12
  import { alpha, styled, useThemeProps } from '@mui/material/styles';
9
13
  import unsupportedProp from '@mui/utils/unsupportedProp';
10
14
  import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef';
@@ -12,6 +16,7 @@ import { unstable_composeClasses as composeClasses } from '@mui/base';
12
16
  import { TreeItemContent } from './TreeItemContent';
13
17
  import { treeItemClasses, getTreeItemUtilityClass } from './treeItemClasses';
14
18
  import { useTreeViewContext } from '../internals/TreeViewProvider/useTreeViewContext';
19
+ import { TreeViewCollapseIcon, TreeViewExpandIcon } from '../icons';
15
20
  import { jsx as _jsx } from "react/jsx-runtime";
16
21
  import { jsxs as _jsxs } from "react/jsx-runtime";
17
22
  const useUtilityClasses = ownerState => {
@@ -130,10 +135,13 @@ const TreeItemGroup = styled(Collapse, {
130
135
  * - [TreeItem API](https://mui.com/x/api/tree-view/tree-item/)
131
136
  */
132
137
  export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps, inRef) {
138
+ var _ref, _inSlots$expandIcon, _ref2, _inSlots$collapseIcon, _inSlots$endIcon;
133
139
  const {
134
140
  icons: contextIcons,
135
141
  runItemPlugins,
136
- multiSelect,
142
+ selection: {
143
+ multiSelect
144
+ },
137
145
  disabledItemsFocusable,
138
146
  instance
139
147
  } = useTreeViewContext();
@@ -152,12 +160,10 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
152
160
  const {
153
161
  children,
154
162
  className,
155
- collapseIcon,
163
+ slots: inSlots,
164
+ slotProps: inSlotProps,
156
165
  ContentComponent = TreeItemContent,
157
166
  ContentProps,
158
- endIcon,
159
- expandIcon,
160
- icon,
161
167
  nodeId,
162
168
  id,
163
169
  label,
@@ -167,6 +173,12 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
167
173
  TransitionProps
168
174
  } = props,
169
175
  other = _objectWithoutPropertiesLoose(props, _excluded);
176
+ const slots = {
177
+ expandIcon: (_ref = (_inSlots$expandIcon = inSlots == null ? void 0 : inSlots.expandIcon) != null ? _inSlots$expandIcon : contextIcons.slots.expandIcon) != null ? _ref : TreeViewExpandIcon,
178
+ collapseIcon: (_ref2 = (_inSlots$collapseIcon = inSlots == null ? void 0 : inSlots.collapseIcon) != null ? _inSlots$collapseIcon : contextIcons.slots.collapseIcon) != null ? _ref2 : TreeViewCollapseIcon,
179
+ endIcon: (_inSlots$endIcon = inSlots == null ? void 0 : inSlots.endIcon) != null ? _inSlots$endIcon : contextIcons.slots.endIcon,
180
+ icon: inSlots == null ? void 0 : inSlots.icon
181
+ };
170
182
  const expandable = Boolean(Array.isArray(children) ? children.length : children);
171
183
  const expanded = instance.isNodeExpanded(nodeId);
172
184
  const focused = instance.isNodeFocused(nodeId);
@@ -179,20 +191,40 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
179
191
  disabled
180
192
  });
181
193
  const classes = useUtilityClasses(ownerState);
182
- let displayIcon;
183
- let expansionIcon;
184
- if (expandable) {
185
- if (!expanded) {
186
- expansionIcon = expandIcon || contextIcons.defaultExpandIcon;
187
- } else {
188
- expansionIcon = collapseIcon || contextIcons.defaultCollapseIcon;
189
- }
190
- }
191
- if (expandable) {
192
- displayIcon = contextIcons.defaultParentIcon;
193
- } else {
194
- displayIcon = endIcon || contextIcons.defaultEndIcon;
195
- }
194
+ const ExpansionIcon = expanded ? slots.collapseIcon : slots.expandIcon;
195
+ const _useSlotProps = useSlotProps({
196
+ elementType: ExpansionIcon,
197
+ ownerState: {},
198
+ externalSlotProps: tempOwnerState => {
199
+ if (expanded) {
200
+ return _extends({}, resolveComponentProps(contextIcons.slotProps.collapseIcon, tempOwnerState), resolveComponentProps(inSlotProps == null ? void 0 : inSlotProps.collapseIcon, tempOwnerState));
201
+ }
202
+ return _extends({}, resolveComponentProps(contextIcons.slotProps.expandIcon, tempOwnerState), resolveComponentProps(inSlotProps == null ? void 0 : inSlotProps.expandIcon, tempOwnerState));
203
+ }
204
+ }),
205
+ expansionIconProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);
206
+ const expansionIcon = expandable && !!ExpansionIcon ? /*#__PURE__*/_jsx(ExpansionIcon, _extends({}, expansionIconProps)) : null;
207
+ const DisplayIcon = expandable ? undefined : slots.endIcon;
208
+ const _useSlotProps2 = useSlotProps({
209
+ elementType: DisplayIcon,
210
+ ownerState: {},
211
+ externalSlotProps: tempOwnerState => {
212
+ if (expandable) {
213
+ return {};
214
+ }
215
+ return _extends({}, resolveComponentProps(contextIcons.slotProps.endIcon, tempOwnerState), resolveComponentProps(inSlotProps == null ? void 0 : inSlotProps.endIcon, tempOwnerState));
216
+ }
217
+ }),
218
+ displayIconProps = _objectWithoutPropertiesLoose(_useSlotProps2, _excluded3);
219
+ const displayIcon = DisplayIcon ? /*#__PURE__*/_jsx(DisplayIcon, _extends({}, displayIconProps)) : null;
220
+ const Icon = slots.icon;
221
+ const _useSlotProps3 = useSlotProps({
222
+ elementType: Icon,
223
+ ownerState: {},
224
+ externalSlotProps: inSlotProps == null ? void 0 : inSlotProps.icon
225
+ }),
226
+ iconProps = _objectWithoutPropertiesLoose(_useSlotProps3, _excluded4);
227
+ const icon = Icon ? /*#__PURE__*/_jsx(Icon, _extends({}, iconProps)) : null;
196
228
  let ariaSelected;
197
229
  if (multiSelect) {
198
230
  ariaSelected = selected;
@@ -273,14 +305,7 @@ TreeItem.propTypes = {
273
305
  * Override or extend the styles applied to the component.
274
306
  */
275
307
  classes: PropTypes.object,
276
- /**
277
- * className applied to the root element.
278
- */
279
308
  className: PropTypes.string,
280
- /**
281
- * The icon used to collapse the node.
282
- */
283
- collapseIcon: PropTypes.node,
284
309
  /**
285
310
  * The component used for the content node.
286
311
  * @default TreeItemContent
@@ -295,18 +320,6 @@ TreeItem.propTypes = {
295
320
  * @default false
296
321
  */
297
322
  disabled: PropTypes.bool,
298
- /**
299
- * The icon displayed next to an end node.
300
- */
301
- endIcon: PropTypes.node,
302
- /**
303
- * The icon used to expand the node.
304
- */
305
- expandIcon: PropTypes.node,
306
- /**
307
- * The icon to display next to the tree node's label.
308
- */
309
- icon: PropTypes.node,
310
323
  /**
311
324
  * The tree node label.
312
325
  */
@@ -320,6 +333,16 @@ TreeItem.propTypes = {
320
333
  * Use the `onNodeFocus` callback on the tree if you need to monitor a node's focus.
321
334
  */
322
335
  onFocus: unsupportedProp,
336
+ /**
337
+ * The props used for each component slot.
338
+ * @default {}
339
+ */
340
+ slotProps: PropTypes.object,
341
+ /**
342
+ * Overridable component slots.
343
+ * @default {}
344
+ */
345
+ slots: PropTypes.object,
323
346
  /**
324
347
  * The system prop that allows defining system overrides as well as additional CSS styles.
325
348
  */
@@ -1,27 +1,55 @@
1
1
  import * as React from 'react';
2
2
  import { Theme } from '@mui/material/styles';
3
+ import { SlotComponentProps } from '@mui/base/utils';
3
4
  import { TransitionProps } from '@mui/material/transitions';
4
5
  import { SxProps } from '@mui/system';
5
6
  import { TreeItemContentProps } from './TreeItemContent';
6
7
  import { TreeItemClasses } from './treeItemClasses';
7
8
  import { TreeViewItemId } from '../models';
9
+ export interface TreeItemSlots {
10
+ /**
11
+ * The icon used to collapse the node.
12
+ */
13
+ collapseIcon?: React.ElementType;
14
+ /**
15
+ * The icon used to expand the node.
16
+ */
17
+ expandIcon?: React.ElementType;
18
+ /**
19
+ * The icon displayed next to an end node.
20
+ */
21
+ endIcon?: React.ElementType;
22
+ /**
23
+ * The icon to display next to the tree node's label.
24
+ */
25
+ icon?: React.ElementType;
26
+ }
27
+ export interface TreeItemSlotProps {
28
+ collapseIcon?: SlotComponentProps<'svg', {}, {}>;
29
+ expandIcon?: SlotComponentProps<'svg', {}, {}>;
30
+ endIcon?: SlotComponentProps<'svg', {}, {}>;
31
+ icon?: SlotComponentProps<'svg', {}, {}>;
32
+ }
8
33
  export interface TreeItemProps extends Omit<React.HTMLAttributes<HTMLLIElement>, 'onFocus'> {
9
34
  /**
10
35
  * The content of the component.
11
36
  */
12
37
  children?: React.ReactNode;
13
- /**
14
- * className applied to the root element.
15
- */
16
38
  className?: string;
17
39
  /**
18
40
  * Override or extend the styles applied to the component.
19
41
  */
20
42
  classes?: Partial<TreeItemClasses>;
21
43
  /**
22
- * The icon used to collapse the node.
44
+ * Overridable component slots.
45
+ * @default {}
23
46
  */
24
- collapseIcon?: React.ReactNode;
47
+ slots?: TreeItemSlots;
48
+ /**
49
+ * The props used for each component slot.
50
+ * @default {}
51
+ */
52
+ slotProps?: TreeItemSlotProps;
25
53
  /**
26
54
  * The component used for the content node.
27
55
  * @default TreeItemContent
@@ -36,18 +64,6 @@ export interface TreeItemProps extends Omit<React.HTMLAttributes<HTMLLIElement>,
36
64
  * @default false
37
65
  */
38
66
  disabled?: boolean;
39
- /**
40
- * The icon displayed next to an end node.
41
- */
42
- endIcon?: React.ReactNode;
43
- /**
44
- * The icon used to expand the node.
45
- */
46
- expandIcon?: React.ReactNode;
47
- /**
48
- * The icon to display next to the tree node's label.
49
- */
50
- icon?: React.ReactNode;
51
67
  /**
52
68
  * This prop isn't supported.
53
69
  * Use the `onNodeFocus` callback on the tree if you need to monitor a node's focus.
@@ -1,8 +1,5 @@
1
1
  import * as React from 'react';
2
2
  export interface TreeItemContentProps extends React.HTMLAttributes<HTMLElement> {
3
- /**
4
- * className applied to the root element.
5
- */
6
3
  className?: string;
7
4
  /**
8
5
  * Override or extend the styles applied to the component.
@@ -4,7 +4,7 @@ const _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
  /**
@@ -31,7 +31,7 @@ const TreeItemContent = /*#__PURE__*/React.forwardRef(function TreeItemContent(p
31
31
  handleExpansion,
32
32
  handleSelection,
33
33
  preventSelection
34
- } = useTreeItem(nodeId);
34
+ } = useTreeItemState(nodeId);
35
35
  const icon = iconProp || expansionIcon || displayIcon;
36
36
  const handleMouseDown = event => {
37
37
  preventSelection(event);
@@ -73,9 +73,6 @@ process.env.NODE_ENV !== "production" ? TreeItemContent.propTypes = {
73
73
  * Override or extend the styles applied to the component.
74
74
  */
75
75
  classes: PropTypes.object.isRequired,
76
- /**
77
- * className applied to the root element.
78
- */
79
76
  className: PropTypes.string,
80
77
  /**
81
78
  * The icon to display next to the tree node's label. Either a parent or end icon.
@@ -1,6 +1,6 @@
1
1
  export { TreeItem } from './TreeItem';
2
- export type { TreeItemProps } from './TreeItem.types';
2
+ export type { TreeItemProps, TreeItemSlots, TreeItemSlotProps } from './TreeItem.types';
3
3
  export * from './treeItemClasses';
4
- export * from './useTreeItem';
4
+ export * from './useTreeItemState';
5
5
  export { TreeItemContent } from './TreeItemContent';
6
6
  export type { TreeItemContentProps, TreeItemContentClassKey } from './TreeItemContent';
package/TreeItem/index.js CHANGED
@@ -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,5 +1,5 @@
1
1
  import * as React from 'react';
2
- export declare function useTreeItem(nodeId: string): {
2
+ export declare function useTreeItemState(nodeId: string): {
3
3
  disabled: boolean;
4
4
  expanded: boolean;
5
5
  selected: boolean;
@@ -1,8 +1,10 @@
1
1
  import { useTreeViewContext } from '../internals/TreeViewProvider/useTreeViewContext';
2
- export function useTreeItem(nodeId) {
2
+ export function useTreeItemState(nodeId) {
3
3
  const {
4
4
  instance,
5
- multiSelect
5
+ selection: {
6
+ multiSelect
7
+ }
6
8
  } = useTreeViewContext();
7
9
  const expandable = instance.isNodeExpandable(nodeId);
8
10
  const expanded = instance.isNodeExpanded(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.
@@ -1,5 +1,9 @@
1
- import { SimpleTreeViewProps } from '../SimpleTreeView';
1
+ import { SimpleTreeViewProps, SimpleTreeViewSlotProps, SimpleTreeViewSlots } from '../SimpleTreeView';
2
2
  export interface TreeViewProps<Multiple extends boolean | undefined> extends SimpleTreeViewProps<Multiple> {
3
3
  }
4
+ export interface TreeViewSlots extends SimpleTreeViewSlots {
5
+ }
6
+ export interface TreeViewSlotProps extends SimpleTreeViewSlotProps {
7
+ }
4
8
  export type SingleSelectTreeViewProps = SimpleTreeViewProps<false>;
5
9
  export type MultiSelectTreeViewProps = SimpleTreeViewProps<true>;
@@ -1,3 +1,3 @@
1
1
  export * from './TreeView';
2
2
  export * from './treeViewClasses';
3
- export type { TreeViewProps, SingleSelectTreeViewProps, MultiSelectTreeViewProps, } from './TreeView.types';
3
+ export type { TreeViewProps, SingleSelectTreeViewProps, MultiSelectTreeViewProps, TreeViewSlots, TreeViewSlotProps, } from './TreeView.types';
@@ -0,0 +1,6 @@
1
+ export declare const TreeViewExpandIcon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
2
+ muiName: string;
3
+ };
4
+ export declare const TreeViewCollapseIcon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
5
+ muiName: string;
6
+ };
package/icons/icons.js ADDED
@@ -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 const 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 const 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/icons/index.js ADDED
@@ -0,0 +1 @@
1
+ export * from './icons';
@@ -0,0 +1,6 @@
1
+ {
2
+ "sideEffects": false,
3
+ "module": "./index.js",
4
+ "main": "../node/icons/index.js",
5
+ "types": "./index.d.ts"
6
+ }
package/index.d.ts CHANGED
@@ -4,3 +4,4 @@ export * from './SimpleTreeView';
4
4
  export * from './RichTreeView';
5
5
  export { unstable_resetCleanupTracking } from './internals/hooks/useInstanceEventHandler';
6
6
  export * from './models';
7
+ export * from './icons';
package/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';
@@ -1,6 +1,8 @@
1
1
  import * as React from 'react';
2
- import { TreeViewContextValue } from './TreeViewProvider.types';
3
2
  /**
4
3
  * @ignore - internal component.
5
4
  */
6
- export declare const TreeViewContext: React.Context<TreeViewContextValue<any> | null>;
5
+ export declare const TreeViewContext: React.Context<{
6
+ instance: {};
7
+ runItemPlugins: (options: import("../models").TreeViewItemPluginOptions) => Required<import("../models").TreeViewItemPluginResponse>;
8
+ } | null>;
@@ -1,17 +1,9 @@
1
1
  import * as React from 'react';
2
- import { TreeViewAnyPluginSignature, TreeViewInstance, TreeViewItemPluginOptions, TreeViewItemPluginResponse } from '../models';
3
- export interface TreeViewContextValue<TPlugins extends readonly TreeViewAnyPluginSignature[]> {
2
+ import { MergePluginsProperty, TreeViewAnyPluginSignature, TreeViewInstance, TreeViewItemPluginOptions, TreeViewItemPluginResponse } from '../models';
3
+ export type TreeViewContextValue<TPlugins extends readonly TreeViewAnyPluginSignature[]> = MergePluginsProperty<TPlugins, 'contextValue'> & {
4
4
  instance: TreeViewInstance<TPlugins>;
5
5
  runItemPlugins: (options: TreeViewItemPluginOptions) => Required<TreeViewItemPluginResponse>;
6
- multiSelect: boolean;
7
- disabledItemsFocusable: boolean;
8
- icons: {
9
- defaultCollapseIcon: React.ReactNode;
10
- defaultExpandIcon: React.ReactNode;
11
- defaultParentIcon: React.ReactNode;
12
- defaultEndIcon: React.ReactNode;
13
- };
14
- }
6
+ };
15
7
  export interface TreeViewProviderProps<TPlugins extends readonly TreeViewAnyPluginSignature[]> {
16
8
  value: TreeViewContextValue<TPlugins>;
17
9
  children: React.ReactNode;
@@ -17,5 +17,6 @@ export interface UseTreeViewInstanceEventsInstance {
17
17
  */
18
18
  $$publishEvent: (eventName: string, params: any) => void;
19
19
  }
20
- export type UseTreeViewInstanceEventsSignature = TreeViewPluginSignature<{}, {}, UseTreeViewInstanceEventsInstance, {}, {}, never, [
21
- ]>;
20
+ export type UseTreeViewInstanceEventsSignature = TreeViewPluginSignature<{
21
+ instance: UseTreeViewInstanceEventsInstance;
22
+ }>;
@@ -0,0 +1,15 @@
1
+ export { useTreeView } from './useTreeView';
2
+ export { TreeViewProvider } from './TreeViewProvider';
3
+ export type { TreeViewPlugin, TreeViewPluginSignature } from './models';
4
+ export { DEFAULT_TREE_VIEW_PLUGINS } from './plugins/defaultPlugins';
5
+ export type { DefaultTreeViewPlugins, DefaultTreeViewPluginSlots, DefaultTreeViewPluginSlotProps, } from './plugins/defaultPlugins';
6
+ export type { DefaultTreeViewPluginParameters } from './plugins/defaultPlugins';
7
+ export type { UseTreeViewExpansionSignature } from './plugins/useTreeViewExpansion';
8
+ export type { UseTreeViewSelectionSignature } from './plugins/useTreeViewSelection';
9
+ export type { UseTreeViewFocusSignature } from './plugins/useTreeViewFocus';
10
+ export type { UseTreeViewKeyboardNavigationSignature } from './plugins/useTreeViewKeyboardNavigation';
11
+ export type { UseTreeViewIdSignature } from './plugins/useTreeViewId';
12
+ export type { UseTreeViewIconsSignature } from './plugins/useTreeViewIcons';
13
+ export type { UseTreeViewNodesSignature } from './plugins/useTreeViewNodes';
14
+ export type { UseTreeViewJSXNodesSignature } from './plugins/useTreeViewJSXNodes';
15
+ export { extractPluginParamsFromProps } from './utils/extractPluginParamsFromProps';
@@ -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';
@@ -1,5 +1,7 @@
1
- import { TreeViewAnyPluginSignature, TreeViewPlugin } from './plugin';
1
+ import type { TreeViewAnyPluginSignature, TreeViewPlugin } from './plugin';
2
2
  export type DefaultizedProps<P extends {}, RequiredProps extends keyof P, AdditionalProps extends {} = {}> = Omit<P, RequiredProps | keyof AdditionalProps> & Required<Pick<P, RequiredProps>> & AdditionalProps;
3
+ type IsAny<T> = 0 extends 1 & T ? true : false;
4
+ export type OptionalIfEmpty<A extends string, B> = keyof B extends never ? Partial<Record<A, B>> : IsAny<B> extends true ? Partial<Record<A, B>> : Record<A, B>;
3
5
  export type MergePluginsProperty<TPlugins extends readonly any[], TProperty extends keyof TreeViewAnyPluginSignature> = TPlugins extends readonly [plugin: infer P, ...otherPlugin: infer R] ? P extends TreeViewAnyPluginSignature ? P[TProperty] & MergePluginsProperty<R, TProperty> : {} : {};
4
6
  export type ConvertPluginsIntoSignatures<TPlugins extends readonly any[]> = TPlugins extends readonly [plugin: infer P, ...otherPlugin: infer R] ? P extends TreeViewPlugin<infer TSignature> ? [TSignature, ...ConvertPluginsIntoSignatures<R>] : ConvertPluginsIntoSignatures<R> : [];
5
7
  export interface MergePlugins<TPlugins extends readonly any[]> {
@@ -8,6 +10,10 @@ export interface MergePlugins<TPlugins extends readonly any[]> {
8
10
  params: MergePluginsProperty<TPlugins, 'params'>;
9
11
  defaultizedParams: MergePluginsProperty<TPlugins, 'defaultizedParams'>;
10
12
  dependantPlugins: MergePluginsProperty<TPlugins, 'dependantPlugins'>;
13
+ contextValue: MergePluginsProperty<TPlugins, 'contextValue'>;
14
+ slots: MergePluginsProperty<TPlugins, 'slots'>;
15
+ slotProps: MergePluginsProperty<TPlugins, 'slotProps'>;
11
16
  events: MergePluginsProperty<TPlugins, 'events'>;
12
17
  models: MergePluginsProperty<TPlugins, 'models'>;
13
18
  }
19
+ export {};