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

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 (217) hide show
  1. package/CHANGELOG.md +1380 -188
  2. package/README.md +0 -1
  3. package/RichTreeView/RichTreeView.d.ts +20 -0
  4. package/RichTreeView/RichTreeView.js +285 -0
  5. package/RichTreeView/RichTreeView.types.d.ts +55 -0
  6. package/RichTreeView/RichTreeView.types.js +1 -0
  7. package/RichTreeView/index.d.ts +3 -0
  8. package/RichTreeView/index.js +3 -0
  9. package/RichTreeView/package.json +6 -0
  10. package/RichTreeView/richTreeViewClasses.d.ts +7 -0
  11. package/RichTreeView/richTreeViewClasses.js +6 -0
  12. package/SimpleTreeView/SimpleTreeView.d.ts +20 -0
  13. package/SimpleTreeView/SimpleTreeView.js +235 -0
  14. package/SimpleTreeView/SimpleTreeView.plugins.d.ts +6 -0
  15. package/SimpleTreeView/SimpleTreeView.plugins.js +5 -0
  16. package/SimpleTreeView/SimpleTreeView.types.d.ts +38 -0
  17. package/SimpleTreeView/SimpleTreeView.types.js +1 -0
  18. package/SimpleTreeView/index.d.ts +3 -0
  19. package/SimpleTreeView/index.js +3 -0
  20. package/SimpleTreeView/package.json +6 -0
  21. package/SimpleTreeView/simpleTreeViewClasses.d.ts +7 -0
  22. package/SimpleTreeView/simpleTreeViewClasses.js +6 -0
  23. package/TreeItem/TreeItem.js +44 -89
  24. package/TreeItem/TreeItem.types.d.ts +2 -1
  25. package/TreeItem/index.d.ts +2 -2
  26. package/TreeItem/index.js +2 -2
  27. package/TreeItem/useTreeItem.js +5 -5
  28. package/TreeView/TreeView.d.ts +4 -0
  29. package/TreeView/TreeView.js +80 -87
  30. package/TreeView/TreeView.types.d.ts +4 -26
  31. package/TreeView/index.d.ts +1 -1
  32. package/index.d.ts +3 -0
  33. package/index.js +5 -2
  34. package/internals/TreeViewProvider/TreeViewContext.d.ts +1 -2
  35. package/internals/TreeViewProvider/TreeViewContext.js +1 -14
  36. package/internals/TreeViewProvider/TreeViewProvider.types.d.ts +3 -3
  37. package/internals/TreeViewProvider/useTreeViewContext.js +7 -1
  38. package/internals/corePlugins/corePlugins.d.ts +1 -1
  39. package/internals/corePlugins/corePlugins.js +1 -1
  40. package/internals/corePlugins/useTreeViewInstanceEvents/useTreeViewInstanceEvents.d.ts +0 -5
  41. package/internals/corePlugins/useTreeViewInstanceEvents/useTreeViewInstanceEvents.js +2 -7
  42. package/internals/hooks/useLazyRef.d.ts +2 -0
  43. package/internals/hooks/useLazyRef.js +11 -0
  44. package/internals/hooks/useOnMount.d.ts +2 -0
  45. package/internals/hooks/useOnMount.js +7 -0
  46. package/internals/hooks/useTimeout.d.ts +9 -0
  47. package/internals/hooks/useTimeout.js +28 -0
  48. package/internals/models/MuiCancellableEvent.d.ts +4 -0
  49. package/internals/models/MuiCancellableEvent.js +1 -0
  50. package/internals/models/plugin.d.ts +24 -0
  51. package/internals/models/treeView.d.ts +5 -1
  52. package/internals/plugins/defaultPlugins.d.ts +3 -2
  53. package/internals/plugins/defaultPlugins.js +2 -1
  54. package/internals/plugins/useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.js +14 -6
  55. package/internals/plugins/useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.types.d.ts +1 -6
  56. package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js +32 -17
  57. package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.types.d.ts +12 -5
  58. package/internals/plugins/useTreeViewFocus/useTreeViewFocus.js +16 -6
  59. package/internals/plugins/useTreeViewFocus/useTreeViewFocus.types.d.ts +4 -1
  60. package/internals/plugins/useTreeViewId/index.d.ts +2 -0
  61. package/internals/plugins/useTreeViewId/index.js +1 -0
  62. package/internals/plugins/useTreeViewId/useTreeViewId.d.ts +3 -0
  63. package/internals/plugins/useTreeViewId/useTreeViewId.js +21 -0
  64. package/internals/plugins/useTreeViewId/useTreeViewId.types.d.ts +17 -0
  65. package/internals/plugins/useTreeViewId/useTreeViewId.types.js +1 -0
  66. package/internals/plugins/useTreeViewJSXNodes/index.d.ts +2 -0
  67. package/internals/plugins/useTreeViewJSXNodes/index.js +1 -0
  68. package/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.d.ts +3 -0
  69. package/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.js +115 -0
  70. package/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.types.d.ts +16 -0
  71. package/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.types.js +1 -0
  72. package/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js +175 -121
  73. package/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.types.d.ts +5 -2
  74. package/internals/plugins/useTreeViewNodes/useTreeViewNodes.js +89 -17
  75. package/internals/plugins/useTreeViewNodes/useTreeViewNodes.types.d.ts +48 -5
  76. package/internals/plugins/useTreeViewSelection/useTreeViewSelection.d.ts +1 -1
  77. package/internals/plugins/useTreeViewSelection/useTreeViewSelection.js +49 -28
  78. package/internals/plugins/useTreeViewSelection/useTreeViewSelection.types.d.ts +15 -8
  79. package/internals/useTreeView/useTreeView.js +40 -3
  80. package/internals/useTreeView/useTreeView.types.d.ts +2 -1
  81. package/internals/useTreeView/useTreeViewModels.js +2 -2
  82. package/internals/utils/extractPluginParamsFromProps.d.ts +13 -0
  83. package/internals/utils/extractPluginParamsFromProps.js +27 -0
  84. package/internals/utils/warning.d.ts +1 -0
  85. package/internals/utils/warning.js +14 -0
  86. package/legacy/RichTreeView/RichTreeView.js +279 -0
  87. package/legacy/RichTreeView/RichTreeView.types.js +1 -0
  88. package/legacy/RichTreeView/index.js +3 -0
  89. package/legacy/RichTreeView/richTreeViewClasses.js +6 -0
  90. package/legacy/SimpleTreeView/SimpleTreeView.js +232 -0
  91. package/legacy/SimpleTreeView/SimpleTreeView.plugins.js +6 -0
  92. package/legacy/SimpleTreeView/SimpleTreeView.types.js +1 -0
  93. package/legacy/SimpleTreeView/index.js +3 -0
  94. package/legacy/SimpleTreeView/simpleTreeViewClasses.js +6 -0
  95. package/legacy/TreeItem/TreeItem.js +49 -103
  96. package/legacy/TreeItem/index.js +2 -2
  97. package/legacy/TreeItem/useTreeItem.js +5 -5
  98. package/legacy/TreeView/TreeView.js +80 -82
  99. package/legacy/index.js +5 -2
  100. package/legacy/internals/TreeViewProvider/TreeViewContext.js +1 -14
  101. package/legacy/internals/TreeViewProvider/useTreeViewContext.js +5 -1
  102. package/legacy/internals/corePlugins/corePlugins.js +1 -1
  103. package/legacy/internals/corePlugins/useTreeViewInstanceEvents/useTreeViewInstanceEvents.js +2 -7
  104. package/legacy/internals/hooks/useLazyRef.js +11 -0
  105. package/legacy/internals/hooks/useOnMount.js +7 -0
  106. package/legacy/internals/hooks/useTimeout.js +38 -0
  107. package/legacy/internals/models/MuiCancellableEvent.js +1 -0
  108. package/legacy/internals/plugins/defaultPlugins.js +2 -1
  109. package/legacy/internals/plugins/useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.js +17 -8
  110. package/legacy/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js +32 -17
  111. package/legacy/internals/plugins/useTreeViewFocus/useTreeViewFocus.js +16 -6
  112. package/legacy/internals/plugins/useTreeViewId/index.js +1 -0
  113. package/legacy/internals/plugins/useTreeViewId/useTreeViewId.js +24 -0
  114. package/legacy/internals/plugins/useTreeViewId/useTreeViewId.types.js +1 -0
  115. package/legacy/internals/plugins/useTreeViewJSXNodes/index.js +1 -0
  116. package/legacy/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.js +121 -0
  117. package/legacy/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.types.js +1 -0
  118. package/legacy/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js +177 -119
  119. package/legacy/internals/plugins/useTreeViewNodes/useTreeViewNodes.js +96 -20
  120. package/legacy/internals/plugins/useTreeViewSelection/useTreeViewSelection.js +53 -28
  121. package/legacy/internals/useTreeView/useTreeView.js +39 -3
  122. package/legacy/internals/useTreeView/useTreeViewModels.js +2 -2
  123. package/legacy/internals/utils/extractPluginParamsFromProps.js +27 -0
  124. package/legacy/internals/utils/warning.js +15 -0
  125. package/legacy/models/index.js +1 -0
  126. package/legacy/models/items.js +1 -0
  127. package/models/index.d.ts +1 -0
  128. package/models/index.js +1 -0
  129. package/models/items.d.ts +7 -0
  130. package/models/items.js +1 -0
  131. package/models/package.json +6 -0
  132. package/modern/RichTreeView/RichTreeView.js +283 -0
  133. package/modern/RichTreeView/RichTreeView.types.js +1 -0
  134. package/modern/RichTreeView/index.js +3 -0
  135. package/modern/RichTreeView/richTreeViewClasses.js +6 -0
  136. package/modern/SimpleTreeView/SimpleTreeView.js +234 -0
  137. package/modern/SimpleTreeView/SimpleTreeView.plugins.js +5 -0
  138. package/modern/SimpleTreeView/SimpleTreeView.types.js +1 -0
  139. package/modern/SimpleTreeView/index.js +3 -0
  140. package/modern/SimpleTreeView/simpleTreeViewClasses.js +6 -0
  141. package/modern/TreeItem/TreeItem.js +44 -88
  142. package/modern/TreeItem/index.js +2 -2
  143. package/modern/TreeItem/useTreeItem.js +5 -5
  144. package/modern/TreeView/TreeView.js +80 -87
  145. package/modern/index.js +5 -2
  146. package/modern/internals/TreeViewProvider/TreeViewContext.js +1 -14
  147. package/modern/internals/TreeViewProvider/useTreeViewContext.js +7 -1
  148. package/modern/internals/corePlugins/corePlugins.js +1 -1
  149. package/modern/internals/corePlugins/useTreeViewInstanceEvents/useTreeViewInstanceEvents.js +2 -7
  150. package/modern/internals/hooks/useLazyRef.js +11 -0
  151. package/modern/internals/hooks/useOnMount.js +7 -0
  152. package/modern/internals/hooks/useTimeout.js +28 -0
  153. package/modern/internals/models/MuiCancellableEvent.js +1 -0
  154. package/modern/internals/plugins/defaultPlugins.js +2 -1
  155. package/modern/internals/plugins/useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.js +14 -6
  156. package/modern/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js +33 -18
  157. package/modern/internals/plugins/useTreeViewFocus/useTreeViewFocus.js +16 -7
  158. package/modern/internals/plugins/useTreeViewId/index.js +1 -0
  159. package/modern/internals/plugins/useTreeViewId/useTreeViewId.js +21 -0
  160. package/modern/internals/plugins/useTreeViewId/useTreeViewId.types.js +1 -0
  161. package/modern/internals/plugins/useTreeViewJSXNodes/index.js +1 -0
  162. package/modern/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.js +114 -0
  163. package/modern/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.types.js +1 -0
  164. package/modern/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js +174 -121
  165. package/modern/internals/plugins/useTreeViewNodes/useTreeViewNodes.js +88 -17
  166. package/modern/internals/plugins/useTreeViewSelection/useTreeViewSelection.js +50 -29
  167. package/modern/internals/useTreeView/useTreeView.js +40 -3
  168. package/modern/internals/useTreeView/useTreeViewModels.js +2 -2
  169. package/modern/internals/utils/extractPluginParamsFromProps.js +27 -0
  170. package/modern/internals/utils/warning.js +14 -0
  171. package/modern/models/index.js +1 -0
  172. package/modern/models/items.js +1 -0
  173. package/node/RichTreeView/RichTreeView.js +291 -0
  174. package/node/RichTreeView/RichTreeView.types.js +5 -0
  175. package/node/RichTreeView/index.js +27 -0
  176. package/node/RichTreeView/richTreeViewClasses.js +14 -0
  177. package/node/SimpleTreeView/SimpleTreeView.js +242 -0
  178. package/node/SimpleTreeView/SimpleTreeView.plugins.js +11 -0
  179. package/node/SimpleTreeView/SimpleTreeView.types.js +5 -0
  180. package/node/SimpleTreeView/index.js +27 -0
  181. package/node/SimpleTreeView/simpleTreeViewClasses.js +14 -0
  182. package/node/TreeItem/TreeItem.js +44 -88
  183. package/node/TreeItem/index.js +11 -15
  184. package/node/TreeItem/useTreeItem.js +5 -5
  185. package/node/TreeView/TreeView.js +80 -87
  186. package/node/index.js +38 -2
  187. package/node/internals/TreeViewProvider/TreeViewContext.js +2 -15
  188. package/node/internals/TreeViewProvider/useTreeViewContext.js +7 -1
  189. package/node/internals/corePlugins/corePlugins.js +1 -1
  190. package/node/internals/corePlugins/useTreeViewInstanceEvents/useTreeViewInstanceEvents.js +2 -7
  191. package/node/internals/hooks/useLazyRef.js +19 -0
  192. package/node/internals/hooks/useOnMount.js +15 -0
  193. package/node/internals/hooks/useTimeout.js +34 -0
  194. package/node/internals/models/MuiCancellableEvent.js +5 -0
  195. package/node/internals/plugins/defaultPlugins.js +2 -1
  196. package/node/internals/plugins/useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.js +15 -8
  197. package/node/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js +33 -18
  198. package/node/internals/plugins/useTreeViewFocus/useTreeViewFocus.js +16 -7
  199. package/node/internals/plugins/useTreeViewId/index.js +12 -0
  200. package/node/internals/plugins/useTreeViewId/useTreeViewId.js +31 -0
  201. package/node/internals/plugins/useTreeViewId/useTreeViewId.types.js +5 -0
  202. package/node/internals/plugins/useTreeViewJSXNodes/index.js +12 -0
  203. package/node/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.js +124 -0
  204. package/node/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.types.js +5 -0
  205. package/node/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js +174 -121
  206. package/node/internals/plugins/useTreeViewNodes/useTreeViewNodes.js +89 -18
  207. package/node/internals/plugins/useTreeViewSelection/useTreeViewSelection.js +50 -29
  208. package/node/internals/useTreeView/useTreeView.js +40 -3
  209. package/node/internals/useTreeView/useTreeViewModels.js +2 -2
  210. package/node/internals/utils/extractPluginParamsFromProps.js +34 -0
  211. package/node/internals/utils/warning.js +21 -0
  212. package/node/models/index.js +16 -0
  213. package/node/models/items.js +5 -0
  214. package/package.json +8 -7
  215. package/themeAugmentation/components.d.ts +14 -4
  216. package/themeAugmentation/overrides.d.ts +8 -4
  217. package/themeAugmentation/props.d.ts +7 -3
@@ -0,0 +1,242 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.SimpleTreeViewRoot = exports.SimpleTreeView = void 0;
8
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
9
+ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
10
+ var React = _interopRequireWildcard(require("react"));
11
+ var _propTypes = _interopRequireDefault(require("prop-types"));
12
+ var _styles = require("@mui/material/styles");
13
+ var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
14
+ var _utils = require("@mui/base/utils");
15
+ var _simpleTreeViewClasses = require("./simpleTreeViewClasses");
16
+ var _useTreeView = require("../internals/useTreeView");
17
+ var _TreeViewProvider = require("../internals/TreeViewProvider");
18
+ var _SimpleTreeView = require("./SimpleTreeView.plugins");
19
+ var _warning = require("../internals/utils/warning");
20
+ var _extractPluginParamsFromProps = require("../internals/utils/extractPluginParamsFromProps");
21
+ var _jsxRuntime = require("react/jsx-runtime");
22
+ const _excluded = ["slots", "slotProps"];
23
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
24
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
25
+ const useUtilityClasses = ownerState => {
26
+ const {
27
+ classes
28
+ } = ownerState;
29
+ const slots = {
30
+ root: ['root']
31
+ };
32
+ return (0, _composeClasses.default)(slots, _simpleTreeViewClasses.getSimpleTreeViewUtilityClass, classes);
33
+ };
34
+ const SimpleTreeViewRoot = exports.SimpleTreeViewRoot = (0, _styles.styled)('ul', {
35
+ name: 'MuiSimpleTreeView',
36
+ slot: 'Root',
37
+ overridesResolver: (props, styles) => styles.root
38
+ })({
39
+ padding: 0,
40
+ margin: 0,
41
+ listStyle: 'none',
42
+ outline: 0
43
+ });
44
+ const EMPTY_ITEMS = [];
45
+ const itemsPropWarning = (0, _warning.buildWarning)(['MUI X: The `SimpleTreeView` component does not support the `items` prop.', 'If you want to add items, you need to pass them as JSX children.', 'Check the documentation for more details: https://next.mui.com/x/react-tree-view/simple-tree-view/items/']);
46
+
47
+ /**
48
+ *
49
+ * Demos:
50
+ *
51
+ * - [Tree View](https://mui.com/x/react-tree-view/)
52
+ *
53
+ * API:
54
+ *
55
+ * - [SimpleTreeView API](https://mui.com/x/api/tree-view/simple-tree-view/)
56
+ */
57
+ const SimpleTreeView = exports.SimpleTreeView = /*#__PURE__*/React.forwardRef(function SimpleTreeView(inProps, ref) {
58
+ const props = (0, _styles.useThemeProps)({
59
+ props: inProps,
60
+ name: 'MuiSimpleTreeView'
61
+ });
62
+ const ownerState = props;
63
+ if (process.env.NODE_ENV !== 'production') {
64
+ if (props.items != null) {
65
+ itemsPropWarning();
66
+ }
67
+ }
68
+ const _extractPluginParamsF = (0, _extractPluginParamsFromProps.extractPluginParamsFromProps)({
69
+ props: (0, _extends2.default)({}, props, {
70
+ items: EMPTY_ITEMS
71
+ }),
72
+ plugins: _SimpleTreeView.SIMPLE_TREE_VIEW_PLUGINS,
73
+ rootRef: ref
74
+ }),
75
+ {
76
+ pluginParams,
77
+ otherProps: {
78
+ slots
79
+ }
80
+ } = _extractPluginParamsF,
81
+ otherProps = (0, _objectWithoutPropertiesLoose2.default)(_extractPluginParamsF.otherProps, _excluded);
82
+ const {
83
+ getRootProps,
84
+ contextValue
85
+ } = (0, _useTreeView.useTreeView)(pluginParams);
86
+ const classes = useUtilityClasses(props);
87
+ const Root = slots?.root ?? SimpleTreeViewRoot;
88
+ const rootProps = (0, _utils.useSlotProps)({
89
+ elementType: Root,
90
+ externalSlotProps: {},
91
+ externalForwardedProps: otherProps,
92
+ className: classes.root,
93
+ getSlotProps: getRootProps,
94
+ ownerState
95
+ });
96
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeViewProvider.TreeViewProvider, {
97
+ value: contextValue,
98
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, (0, _extends2.default)({}, rootProps))
99
+ });
100
+ });
101
+ process.env.NODE_ENV !== "production" ? SimpleTreeView.propTypes = {
102
+ // ----------------------------- Warning --------------------------------
103
+ // | These PropTypes are generated from the TypeScript type definitions |
104
+ // | To update them edit the TypeScript types and run "yarn proptypes" |
105
+ // ----------------------------------------------------------------------
106
+ /**
107
+ * The content of the component.
108
+ */
109
+ children: _propTypes.default.node,
110
+ /**
111
+ * Override or extend the styles applied to the component.
112
+ */
113
+ classes: _propTypes.default.object,
114
+ /**
115
+ * className applied to the root element.
116
+ */
117
+ className: _propTypes.default.string,
118
+ /**
119
+ * The default icon used to collapse the node.
120
+ */
121
+ defaultCollapseIcon: _propTypes.default.node,
122
+ /**
123
+ * The default icon displayed next to a end node. This is applied to all
124
+ * tree nodes and can be overridden by the TreeItem `icon` prop.
125
+ */
126
+ defaultEndIcon: _propTypes.default.node,
127
+ /**
128
+ * Expanded node ids.
129
+ * Used when the item's expansion is not controlled.
130
+ * @default []
131
+ */
132
+ defaultExpandedNodes: _propTypes.default.arrayOf(_propTypes.default.string),
133
+ /**
134
+ * The default icon used to expand the node.
135
+ */
136
+ defaultExpandIcon: _propTypes.default.node,
137
+ /**
138
+ * The default icon displayed next to a parent node. This is applied to all
139
+ * parent nodes and can be overridden by the TreeItem `icon` prop.
140
+ */
141
+ defaultParentIcon: _propTypes.default.node,
142
+ /**
143
+ * Selected node ids. (Uncontrolled)
144
+ * When `multiSelect` is true this takes an array of strings; when false (default) a string.
145
+ * @default []
146
+ */
147
+ defaultSelectedNodes: _propTypes.default.any,
148
+ /**
149
+ * If `true`, will allow focus on disabled items.
150
+ * @default false
151
+ */
152
+ disabledItemsFocusable: _propTypes.default.bool,
153
+ /**
154
+ * If `true` selection is disabled.
155
+ * @default false
156
+ */
157
+ disableSelection: _propTypes.default.bool,
158
+ /**
159
+ * Expanded node ids.
160
+ * Used when the item's expansion is controlled.
161
+ */
162
+ expandedNodes: _propTypes.default.arrayOf(_propTypes.default.string),
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 id of the item.
169
+ * @default `(item) => item.id`
170
+ */
171
+ getItemId: _propTypes.default.func,
172
+ /**
173
+ * Used to determine the string label for a given item.
174
+ *
175
+ * @template R
176
+ * @param {R} item The item to check.
177
+ * @returns {string} The label of the item.
178
+ * @default `(item) => item.label`
179
+ */
180
+ getItemLabel: _propTypes.default.func,
181
+ /**
182
+ * This prop is used to help implement the accessibility logic.
183
+ * If you don't provide this prop. It falls back to a randomly generated id.
184
+ */
185
+ id: _propTypes.default.string,
186
+ /**
187
+ * If true `ctrl` and `shift` will trigger multiselect.
188
+ * @default false
189
+ */
190
+ multiSelect: _propTypes.default.bool,
191
+ /**
192
+ * Callback fired when tree items are expanded/collapsed.
193
+ * @param {React.SyntheticEvent} event The event source of the callback.
194
+ * @param {array} nodeIds The ids of the expanded nodes.
195
+ */
196
+ onExpandedNodesChange: _propTypes.default.func,
197
+ /**
198
+ * Callback fired when a tree item is expanded or collapsed.
199
+ * @param {React.SyntheticEvent} event The event source of the callback.
200
+ * @param {array} nodeId The nodeId of the modified node.
201
+ * @param {array} isExpanded `true` if the node has just been expanded, `false` if it has just been collapsed.
202
+ */
203
+ onNodeExpansionToggle: _propTypes.default.func,
204
+ /**
205
+ * Callback fired when tree items are focused.
206
+ * @param {React.SyntheticEvent} event The event source of the callback **Warning**: This is a generic event not a focus event.
207
+ * @param {string} nodeId The id of the node focused.
208
+ * @param {string} value of the focused node.
209
+ */
210
+ onNodeFocus: _propTypes.default.func,
211
+ /**
212
+ * Callback fired when a tree item is selected or deselected.
213
+ * @param {React.SyntheticEvent} event The event source of the callback.
214
+ * @param {array} nodeId The nodeId of the modified node.
215
+ * @param {array} isSelected `true` if the node has just been selected, `false` if it has just been deselected.
216
+ */
217
+ onNodeSelectionToggle: _propTypes.default.func,
218
+ /**
219
+ * Callback fired when tree items are selected/deselected.
220
+ * @param {React.SyntheticEvent} event The event source of the callback
221
+ * @param {string[] | string} nodeIds The ids of the selected nodes.
222
+ * When `multiSelect` is `true`, this is an array of strings; when false (default) a string.
223
+ */
224
+ onSelectedNodesChange: _propTypes.default.func,
225
+ /**
226
+ * Selected node ids. (Controlled)
227
+ * When `multiSelect` is true this takes an array of strings; when false (default) a string.
228
+ */
229
+ selectedNodes: _propTypes.default.any,
230
+ /**
231
+ * The props used for each component slot.
232
+ */
233
+ slotProps: _propTypes.default.object,
234
+ /**
235
+ * Overridable component slots.
236
+ */
237
+ slots: _propTypes.default.object,
238
+ /**
239
+ * The system prop that allows defining system overrides as well as additional CSS styles.
240
+ */
241
+ sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
242
+ } : void 0;
@@ -0,0 +1,11 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.SIMPLE_TREE_VIEW_PLUGINS = void 0;
7
+ var _defaultPlugins = require("../internals/plugins/defaultPlugins");
8
+ var _useTreeViewJSXNodes = require("../internals/plugins/useTreeViewJSXNodes");
9
+ const SIMPLE_TREE_VIEW_PLUGINS = exports.SIMPLE_TREE_VIEW_PLUGINS = [..._defaultPlugins.DEFAULT_TREE_VIEW_PLUGINS, _useTreeViewJSXNodes.useTreeViewJSXNodes];
10
+
11
+ // We can't infer this type from the plugin, otherwise we would lose the generics.
@@ -0,0 +1,5 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
@@ -0,0 +1,27 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ var _SimpleTreeView = require("./SimpleTreeView");
7
+ Object.keys(_SimpleTreeView).forEach(function (key) {
8
+ if (key === "default" || key === "__esModule") return;
9
+ if (key in exports && exports[key] === _SimpleTreeView[key]) return;
10
+ Object.defineProperty(exports, key, {
11
+ enumerable: true,
12
+ get: function () {
13
+ return _SimpleTreeView[key];
14
+ }
15
+ });
16
+ });
17
+ var _simpleTreeViewClasses = require("./simpleTreeViewClasses");
18
+ Object.keys(_simpleTreeViewClasses).forEach(function (key) {
19
+ if (key === "default" || key === "__esModule") return;
20
+ if (key in exports && exports[key] === _simpleTreeViewClasses[key]) return;
21
+ Object.defineProperty(exports, key, {
22
+ enumerable: true,
23
+ get: function () {
24
+ return _simpleTreeViewClasses[key];
25
+ }
26
+ });
27
+ });
@@ -0,0 +1,14 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.getSimpleTreeViewUtilityClass = getSimpleTreeViewUtilityClass;
8
+ exports.simpleTreeViewClasses = void 0;
9
+ var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
10
+ var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
11
+ function getSimpleTreeViewUtilityClass(slot) {
12
+ return (0, _generateUtilityClass.default)('MuiSimpleTreeView', slot);
13
+ }
14
+ const simpleTreeViewClasses = exports.simpleTreeViewClasses = (0, _generateUtilityClasses.default)('MuiSimpleTreeView', ['root']);
@@ -12,17 +12,14 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
12
12
  var _clsx = _interopRequireDefault(require("clsx"));
13
13
  var _Collapse = _interopRequireDefault(require("@mui/material/Collapse"));
14
14
  var _styles = require("@mui/material/styles");
15
- var _ownerDocument = _interopRequireDefault(require("@mui/utils/ownerDocument"));
16
- var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
17
15
  var _unsupportedProp = _interopRequireDefault(require("@mui/utils/unsupportedProp"));
18
16
  var _elementTypeAcceptingRef = _interopRequireDefault(require("@mui/utils/elementTypeAcceptingRef"));
19
17
  var _base = require("@mui/base");
20
- var _DescendantProvider = require("../internals/TreeViewProvider/DescendantProvider");
21
18
  var _TreeItemContent = require("./TreeItemContent");
22
19
  var _treeItemClasses = require("./treeItemClasses");
23
20
  var _useTreeViewContext = require("../internals/TreeViewProvider/useTreeViewContext");
24
21
  var _jsxRuntime = require("react/jsx-runtime");
25
- const _excluded = ["children", "className", "collapseIcon", "ContentComponent", "ContentProps", "endIcon", "expandIcon", "disabled", "icon", "id", "label", "nodeId", "onClick", "onMouseDown", "TransitionComponent", "TransitionProps"];
22
+ const _excluded = ["children", "className", "collapseIcon", "ContentComponent", "ContentProps", "endIcon", "expandIcon", "icon", "nodeId", "id", "label", "onClick", "onMouseDown", "TransitionComponent", "TransitionProps"];
26
23
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
27
24
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
28
25
  const useUtilityClasses = ownerState => {
@@ -140,11 +137,26 @@ const TreeItemGroup = (0, _styles.styled)(_Collapse.default, {
140
137
  *
141
138
  * - [TreeItem API](https://mui.com/x/api/tree-view/tree-item/)
142
139
  */
143
- const TreeItem = exports.TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps, ref) {
144
- const props = (0, _styles.useThemeProps)({
140
+ const TreeItem = exports.TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps, inRef) {
141
+ const {
142
+ icons: contextIcons,
143
+ runItemPlugins,
144
+ multiSelect,
145
+ disabledItemsFocusable,
146
+ instance
147
+ } = (0, _useTreeViewContext.useTreeViewContext)();
148
+ const inPropsWithTheme = (0, _styles.useThemeProps)({
145
149
  props: inProps,
146
150
  name: 'MuiTreeItem'
147
151
  });
152
+ const {
153
+ props,
154
+ ref,
155
+ wrapItem
156
+ } = runItemPlugins({
157
+ props: inPropsWithTheme,
158
+ ref: inRef
159
+ });
148
160
  const {
149
161
  children,
150
162
  className,
@@ -153,46 +165,21 @@ const TreeItem = exports.TreeItem = /*#__PURE__*/React.forwardRef(function TreeI
153
165
  ContentProps,
154
166
  endIcon,
155
167
  expandIcon,
156
- disabled: disabledProp,
157
168
  icon,
158
- id: idProp,
159
- label,
160
169
  nodeId,
170
+ id,
171
+ label,
161
172
  onClick,
162
173
  onMouseDown,
163
174
  TransitionComponent = _Collapse.default,
164
175
  TransitionProps
165
176
  } = props,
166
177
  other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
167
- const {
168
- icons: contextIcons,
169
- multiSelect,
170
- disabledItemsFocusable,
171
- treeId,
172
- instance
173
- } = (0, _useTreeViewContext.useTreeViewContext)();
174
- let id;
175
- if (idProp != null) {
176
- id = idProp;
177
- } else if (treeId && nodeId) {
178
- id = `${treeId}-${nodeId}`;
179
- }
180
- const [treeItemElement, setTreeItemElement] = React.useState(null);
181
- const contentRef = React.useRef(null);
182
- const handleRef = (0, _useForkRef.default)(setTreeItemElement, ref);
183
- const descendant = React.useMemo(() => ({
184
- element: treeItemElement,
185
- id: nodeId
186
- }), [nodeId, treeItemElement]);
187
- const {
188
- index,
189
- parentId
190
- } = (0, _DescendantProvider.useDescendant)(descendant);
191
178
  const expandable = Boolean(Array.isArray(children) ? children.length : children);
192
- const expanded = instance ? instance.isNodeExpanded(nodeId) : false;
193
- const focused = instance ? instance.isNodeFocused(nodeId) : false;
194
- const selected = instance ? instance.isNodeSelected(nodeId) : false;
195
- const disabled = instance ? instance.isNodeDisabled(nodeId) : false;
179
+ const expanded = instance.isNodeExpanded(nodeId);
180
+ const focused = instance.isNodeFocused(nodeId);
181
+ const selected = instance.isNodeSelected(nodeId);
182
+ const disabled = instance.isNodeDisabled(nodeId);
196
183
  const ownerState = (0, _extends2.default)({}, props, {
197
184
  expanded,
198
185
  focused,
@@ -214,27 +201,6 @@ const TreeItem = exports.TreeItem = /*#__PURE__*/React.forwardRef(function TreeI
214
201
  } else {
215
202
  displayIcon = endIcon || contextIcons.defaultEndIcon;
216
203
  }
217
- React.useEffect(() => {
218
- // On the first render a node's index will be -1. We want to wait for the real index.
219
- if (instance && index !== -1) {
220
- instance.updateNode({
221
- id: nodeId,
222
- idAttribute: id,
223
- index,
224
- parentId,
225
- expandable,
226
- disabled: disabledProp
227
- });
228
- return () => instance.removeNode(nodeId);
229
- }
230
- return undefined;
231
- }, [instance, parentId, index, nodeId, expandable, disabledProp, id]);
232
- React.useEffect(() => {
233
- if (instance && label) {
234
- return instance.mapFirstChar(nodeId, (contentRef.current?.textContent ?? '').substring(0, 1).toLowerCase());
235
- }
236
- return undefined;
237
- }, [instance, nodeId, label]);
238
204
  let ariaSelected;
239
205
  if (multiSelect) {
240
206
  ariaSelected = selected;
@@ -250,36 +216,28 @@ const TreeItem = exports.TreeItem = /*#__PURE__*/React.forwardRef(function TreeI
250
216
  function handleFocus(event) {
251
217
  // DOM focus stays on the tree which manages focus with aria-activedescendant
252
218
  if (event.target === event.currentTarget) {
253
- let rootElement;
254
- if (typeof event.target.getRootNode === 'function') {
255
- rootElement = event.target.getRootNode();
256
- } else {
257
- rootElement = (0, _ownerDocument.default)(event.target);
258
- }
259
- rootElement.getElementById(treeId).focus({
260
- preventScroll: true
261
- });
219
+ instance.focusRoot();
262
220
  }
263
- const unfocusable = !disabledItemsFocusable && disabled;
264
- if (instance && !focused && event.currentTarget === event.target && !unfocusable) {
221
+ const canBeFocused = !disabled || disabledItemsFocusable;
222
+ if (!focused && canBeFocused && event.currentTarget === event.target) {
265
223
  instance.focusNode(event, nodeId);
266
224
  }
267
225
  }
268
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)(TreeItemRoot, (0, _extends2.default)({
226
+ const idAttribute = instance.getTreeItemId(nodeId, id);
227
+ const item = /*#__PURE__*/(0, _jsxRuntime.jsxs)(TreeItemRoot, (0, _extends2.default)({
269
228
  className: (0, _clsx.default)(classes.root, className),
270
229
  role: "treeitem",
271
230
  "aria-expanded": expandable ? expanded : undefined,
272
231
  "aria-selected": ariaSelected,
273
232
  "aria-disabled": disabled || undefined,
274
- id: id,
233
+ id: idAttribute,
275
234
  tabIndex: -1
276
235
  }, other, {
277
236
  ownerState: ownerState,
278
237
  onFocus: handleFocus,
279
- ref: handleRef,
238
+ ref: ref,
280
239
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTreeItemContent, (0, _extends2.default)({
281
240
  as: ContentComponent,
282
- ref: contentRef,
283
241
  classes: {
284
242
  root: classes.content,
285
243
  expanded: classes.expanded,
@@ -297,22 +255,20 @@ const TreeItem = exports.TreeItem = /*#__PURE__*/React.forwardRef(function TreeI
297
255
  expansionIcon: expansionIcon,
298
256
  displayIcon: displayIcon,
299
257
  ownerState: ownerState
300
- }, ContentProps)), children && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DescendantProvider.DescendantProvider, {
301
- id: nodeId,
302
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TreeItemGroup, (0, _extends2.default)({
303
- as: TransitionComponent,
304
- unmountOnExit: true,
305
- className: classes.group,
306
- in: expanded,
307
- component: "ul",
308
- role: "group"
309
- }, TransitionProps, {
310
- children: children
311
- }))
312
- })]
258
+ }, ContentProps)), children && /*#__PURE__*/(0, _jsxRuntime.jsx)(TreeItemGroup, (0, _extends2.default)({
259
+ as: TransitionComponent,
260
+ unmountOnExit: true,
261
+ className: classes.group,
262
+ in: expanded,
263
+ component: "ul",
264
+ role: "group"
265
+ }, TransitionProps, {
266
+ children: children
267
+ }))]
313
268
  }));
269
+ return wrapItem(item);
314
270
  });
315
- process.env.NODE_ENV !== "production" ? TreeItem.propTypes = {
271
+ TreeItem.propTypes = {
316
272
  // ----------------------------- Warning --------------------------------
317
273
  // | These PropTypes are generated from the TypeScript type definitions |
318
274
  // | To update them edit the TypeScript types and run "yarn proptypes" |
@@ -387,4 +343,4 @@ process.env.NODE_ENV !== "production" ? TreeItem.propTypes = {
387
343
  * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component.
388
344
  */
389
345
  TransitionProps: _propTypes.default.object
390
- } : void 0;
346
+ };
@@ -4,8 +4,15 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  var _exportNames = {
7
+ TreeItem: true,
7
8
  TreeItemContent: true
8
9
  };
10
+ Object.defineProperty(exports, "TreeItem", {
11
+ enumerable: true,
12
+ get: function () {
13
+ return _TreeItem.TreeItem;
14
+ }
15
+ });
9
16
  Object.defineProperty(exports, "TreeItemContent", {
10
17
  enumerable: true,
11
18
  get: function () {
@@ -13,14 +20,15 @@ Object.defineProperty(exports, "TreeItemContent", {
13
20
  }
14
21
  });
15
22
  var _TreeItem = require("./TreeItem");
16
- Object.keys(_TreeItem).forEach(function (key) {
23
+ var _treeItemClasses = require("./treeItemClasses");
24
+ Object.keys(_treeItemClasses).forEach(function (key) {
17
25
  if (key === "default" || key === "__esModule") return;
18
26
  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
19
- if (key in exports && exports[key] === _TreeItem[key]) return;
27
+ if (key in exports && exports[key] === _treeItemClasses[key]) return;
20
28
  Object.defineProperty(exports, key, {
21
29
  enumerable: true,
22
30
  get: function () {
23
- return _TreeItem[key];
31
+ return _treeItemClasses[key];
24
32
  }
25
33
  });
26
34
  });
@@ -36,16 +44,4 @@ Object.keys(_useTreeItem).forEach(function (key) {
36
44
  }
37
45
  });
38
46
  });
39
- var _treeItemClasses = require("./treeItemClasses");
40
- Object.keys(_treeItemClasses).forEach(function (key) {
41
- if (key === "default" || key === "__esModule") return;
42
- if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
43
- if (key in exports && exports[key] === _treeItemClasses[key]) return;
44
- Object.defineProperty(exports, key, {
45
- enumerable: true,
46
- get: function () {
47
- return _treeItemClasses[key];
48
- }
49
- });
50
- });
51
47
  var _TreeItemContent = require("./TreeItemContent");
@@ -10,11 +10,11 @@ function useTreeItem(nodeId) {
10
10
  instance,
11
11
  multiSelect
12
12
  } = (0, _useTreeViewContext.useTreeViewContext)();
13
- const expandable = instance ? instance.isNodeExpandable(nodeId) : false;
14
- const expanded = instance ? instance.isNodeExpanded(nodeId) : false;
15
- const focused = instance ? instance.isNodeFocused(nodeId) : false;
16
- const selected = instance ? instance.isNodeSelected(nodeId) : false;
17
- const disabled = instance ? instance.isNodeDisabled(nodeId) : false;
13
+ const expandable = instance.isNodeExpandable(nodeId);
14
+ const expanded = instance.isNodeExpanded(nodeId);
15
+ const focused = instance.isNodeFocused(nodeId);
16
+ const selected = instance.isNodeSelected(nodeId);
17
+ const disabled = instance.isNodeDisabled(nodeId);
18
18
  const handleExpansion = event => {
19
19
  if (instance && !disabled) {
20
20
  if (!focused) {