@mui/x-tree-view 7.22.1 → 8.0.0-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (196) hide show
  1. package/CHANGELOG.md +143 -92
  2. package/README.md +2 -2
  3. package/RichTreeView/RichTreeView.js +20 -1
  4. package/RichTreeView/RichTreeView.types.d.ts +4 -4
  5. package/SimpleTreeView/SimpleTreeView.js +21 -3
  6. package/TreeItem/TreeItem.d.ts +20 -2
  7. package/TreeItem/TreeItem.js +238 -368
  8. package/TreeItem/TreeItem.types.d.ts +51 -86
  9. package/TreeItem/index.d.ts +1 -4
  10. package/TreeItem/index.js +2 -4
  11. package/TreeItemDragAndDropOverlay/TreeItemDragAndDropOverlay.d.ts +7 -0
  12. package/{modern/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.js → TreeItemDragAndDropOverlay/TreeItemDragAndDropOverlay.js} +8 -6
  13. package/{TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.types.d.ts → TreeItemDragAndDropOverlay/TreeItemDragAndDropOverlay.types.d.ts} +1 -1
  14. package/TreeItemDragAndDropOverlay/index.d.ts +2 -0
  15. package/TreeItemDragAndDropOverlay/index.js +1 -0
  16. package/{TreeItem2LabelInput → TreeItemDragAndDropOverlay}/package.json +1 -1
  17. package/TreeItemIcon/TreeItemIcon.d.ts +7 -0
  18. package/{TreeItem2Icon/TreeItem2Icon.js → TreeItemIcon/TreeItemIcon.js} +5 -3
  19. package/{TreeItem2Icon/TreeItem2Icon.types.d.ts → TreeItemIcon/TreeItemIcon.types.d.ts} +7 -7
  20. package/TreeItemIcon/index.d.ts +2 -0
  21. package/TreeItemIcon/index.js +1 -0
  22. package/{useTreeItem2 → TreeItemIcon}/package.json +1 -1
  23. package/TreeItemLabelInput/TreeItemLabelInput.d.ts +5 -0
  24. package/{TreeItem2LabelInput/TreeItem2LabelInput.js → TreeItemLabelInput/TreeItemLabelInput.js} +3 -3
  25. package/{TreeItem2LabelInput/TreeItem2LabelInput.types.d.ts → TreeItemLabelInput/TreeItemLabelInput.types.d.ts} +1 -1
  26. package/TreeItemLabelInput/index.d.ts +2 -0
  27. package/TreeItemLabelInput/index.js +1 -0
  28. package/{TreeItem2Provider → TreeItemLabelInput}/package.json +1 -1
  29. package/TreeItemProvider/TreeItemProvider.d.ts +9 -0
  30. package/{TreeItem2Provider/TreeItem2Provider.js → TreeItemProvider/TreeItemProvider.js} +7 -3
  31. package/{TreeItem2Provider/TreeItem2Provider.types.d.ts → TreeItemProvider/TreeItemProvider.types.d.ts} +1 -1
  32. package/TreeItemProvider/index.d.ts +2 -0
  33. package/TreeItemProvider/index.js +1 -0
  34. package/{TreeItem2Icon → TreeItemProvider}/package.json +1 -1
  35. package/hooks/index.d.ts +1 -1
  36. package/hooks/index.js +1 -1
  37. package/hooks/useTreeItemUtils/index.d.ts +1 -0
  38. package/hooks/useTreeItemUtils/index.js +1 -0
  39. package/hooks/{useTreeItem2Utils/useTreeItem2Utils.d.ts → useTreeItemUtils/useTreeItemUtils.d.ts} +11 -11
  40. package/{modern/hooks/useTreeItem2Utils/useTreeItem2Utils.js → hooks/useTreeItemUtils/useTreeItemUtils.js} +5 -3
  41. package/index.d.ts +5 -7
  42. package/index.js +6 -8
  43. package/internals/TreeViewProvider/TreeViewProvider.types.d.ts +2 -1
  44. package/internals/components/RichTreeViewItems.d.ts +1 -2
  45. package/internals/index.d.ts +1 -1
  46. package/internals/models/helpers.d.ts +0 -2
  47. package/internals/models/itemPlugin.d.ts +11 -8
  48. package/internals/models/plugin.d.ts +1 -1
  49. package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.types.d.ts +2 -1
  50. package/internals/plugins/useTreeViewItems/useTreeViewItems.js +2 -4
  51. package/internals/plugins/useTreeViewItems/useTreeViewItems.types.d.ts +3 -5
  52. package/internals/plugins/useTreeViewLabel/useTreeViewLabel.itemPlugin.d.ts +1 -1
  53. package/internals/plugins/useTreeViewLabel/useTreeViewLabel.types.d.ts +6 -5
  54. package/internals/plugins/useTreeViewSelection/useTreeViewSelection.itemPlugin.d.ts +2 -0
  55. package/internals/plugins/useTreeViewSelection/useTreeViewSelection.itemPlugin.js +86 -0
  56. package/internals/plugins/useTreeViewSelection/useTreeViewSelection.js +43 -18
  57. package/internals/plugins/useTreeViewSelection/useTreeViewSelection.types.d.ts +33 -3
  58. package/internals/plugins/useTreeViewSelection/useTreeViewSelection.utils.d.ts +20 -1
  59. package/internals/plugins/useTreeViewSelection/useTreeViewSelection.utils.js +95 -0
  60. package/models/items.d.ts +4 -0
  61. package/modern/RichTreeView/RichTreeView.js +20 -1
  62. package/modern/SimpleTreeView/SimpleTreeView.js +21 -3
  63. package/modern/TreeItem/TreeItem.js +238 -368
  64. package/modern/TreeItem/index.js +2 -4
  65. package/{TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.js → modern/TreeItemDragAndDropOverlay/TreeItemDragAndDropOverlay.js} +8 -6
  66. package/modern/TreeItemDragAndDropOverlay/index.js +1 -0
  67. package/modern/{TreeItem2Icon/TreeItem2Icon.js → TreeItemIcon/TreeItemIcon.js} +5 -3
  68. package/modern/TreeItemIcon/index.js +1 -0
  69. package/modern/{TreeItem2LabelInput/TreeItem2LabelInput.js → TreeItemLabelInput/TreeItemLabelInput.js} +3 -3
  70. package/modern/TreeItemLabelInput/index.js +1 -0
  71. package/modern/{TreeItem2Provider/TreeItem2Provider.js → TreeItemProvider/TreeItemProvider.js} +7 -3
  72. package/modern/TreeItemProvider/index.js +1 -0
  73. package/modern/hooks/index.js +1 -1
  74. package/modern/hooks/useTreeItemUtils/index.js +1 -0
  75. package/{hooks/useTreeItem2Utils/useTreeItem2Utils.js → modern/hooks/useTreeItemUtils/useTreeItemUtils.js} +5 -3
  76. package/modern/index.js +6 -8
  77. package/modern/internals/plugins/useTreeViewItems/useTreeViewItems.js +2 -4
  78. package/modern/internals/plugins/useTreeViewSelection/useTreeViewSelection.itemPlugin.js +86 -0
  79. package/modern/internals/plugins/useTreeViewSelection/useTreeViewSelection.js +43 -18
  80. package/modern/internals/plugins/useTreeViewSelection/useTreeViewSelection.utils.js +95 -0
  81. package/modern/useTreeItem/index.js +1 -0
  82. package/modern/{useTreeItem2/useTreeItem2.js → useTreeItem/useTreeItem.js} +21 -42
  83. package/node/RichTreeView/RichTreeView.js +20 -1
  84. package/node/SimpleTreeView/SimpleTreeView.js +21 -3
  85. package/node/TreeItem/TreeItem.js +239 -369
  86. package/node/TreeItem/index.js +38 -16
  87. package/node/{TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.js → TreeItemDragAndDropOverlay/TreeItemDragAndDropOverlay.js} +7 -6
  88. package/node/TreeItemDragAndDropOverlay/index.js +12 -0
  89. package/node/{TreeItem2Icon/TreeItem2Icon.js → TreeItemIcon/TreeItemIcon.js} +4 -3
  90. package/node/TreeItemIcon/index.js +12 -0
  91. package/node/{TreeItem2LabelInput/TreeItem2LabelInput.js → TreeItemLabelInput/TreeItemLabelInput.js} +3 -3
  92. package/node/TreeItemLabelInput/index.js +12 -0
  93. package/node/{TreeItem2Provider/TreeItem2Provider.js → TreeItemProvider/TreeItemProvider.js} +6 -3
  94. package/node/TreeItemProvider/index.js +12 -0
  95. package/node/hooks/index.js +3 -3
  96. package/node/hooks/useTreeItemUtils/index.js +12 -0
  97. package/node/hooks/{useTreeItem2Utils/useTreeItem2Utils.js → useTreeItemUtils/useTreeItemUtils.js} +6 -5
  98. package/node/index.js +18 -42
  99. package/node/internals/plugins/useTreeViewItems/useTreeViewItems.js +2 -4
  100. package/node/internals/plugins/useTreeViewSelection/useTreeViewSelection.itemPlugin.js +94 -0
  101. package/node/internals/plugins/useTreeViewSelection/useTreeViewSelection.js +42 -17
  102. package/node/internals/plugins/useTreeViewSelection/useTreeViewSelection.utils.js +99 -2
  103. package/node/useTreeItem/index.js +12 -0
  104. package/node/{useTreeItem2/useTreeItem2.js → useTreeItem/useTreeItem.js} +22 -44
  105. package/package.json +3 -3
  106. package/themeAugmentation/components.d.ts +0 -10
  107. package/themeAugmentation/overrides.d.ts +0 -3
  108. package/themeAugmentation/props.d.ts +1 -5
  109. package/useTreeItem/index.d.ts +2 -0
  110. package/useTreeItem/index.js +1 -0
  111. package/{TreeItem2 → useTreeItem}/package.json +1 -1
  112. package/useTreeItem/useTreeItem.d.ts +2 -0
  113. package/{useTreeItem2/useTreeItem2.js → useTreeItem/useTreeItem.js} +21 -42
  114. package/{useTreeItem2/useTreeItem2.types.d.ts → useTreeItem/useTreeItem.types.d.ts} +42 -58
  115. package/TreeItem/TreeItemContent.d.ts +0 -61
  116. package/TreeItem/TreeItemContent.js +0 -146
  117. package/TreeItem/useTreeItemState.d.ts +0 -21
  118. package/TreeItem/useTreeItemState.js +0 -143
  119. package/TreeItem2/TreeItem2.d.ts +0 -34
  120. package/TreeItem2/TreeItem2.js +0 -387
  121. package/TreeItem2/TreeItem2.types.d.ts +0 -92
  122. package/TreeItem2/index.d.ts +0 -2
  123. package/TreeItem2/index.js +0 -1
  124. package/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.d.ts +0 -7
  125. package/TreeItem2DragAndDropOverlay/index.d.ts +0 -2
  126. package/TreeItem2DragAndDropOverlay/index.js +0 -1
  127. package/TreeItem2DragAndDropOverlay/package.json +0 -6
  128. package/TreeItem2Icon/TreeItem2Icon.d.ts +0 -7
  129. package/TreeItem2Icon/index.d.ts +0 -2
  130. package/TreeItem2Icon/index.js +0 -1
  131. package/TreeItem2LabelInput/TreeItem2LabelInput.d.ts +0 -5
  132. package/TreeItem2LabelInput/index.d.ts +0 -2
  133. package/TreeItem2LabelInput/index.js +0 -1
  134. package/TreeItem2Provider/TreeItem2Provider.d.ts +0 -6
  135. package/TreeItem2Provider/index.d.ts +0 -2
  136. package/TreeItem2Provider/index.js +0 -1
  137. package/TreeView/TreeView.d.ts +0 -21
  138. package/TreeView/TreeView.js +0 -211
  139. package/TreeView/TreeView.types.d.ts +0 -9
  140. package/TreeView/index.d.ts +0 -3
  141. package/TreeView/index.js +0 -3
  142. package/TreeView/package.json +0 -6
  143. package/TreeView/treeViewClasses.d.ts +0 -7
  144. package/TreeView/treeViewClasses.js +0 -6
  145. package/hooks/useTreeItem2Utils/index.d.ts +0 -1
  146. package/hooks/useTreeItem2Utils/index.js +0 -1
  147. package/modern/TreeItem/TreeItemContent.js +0 -146
  148. package/modern/TreeItem/useTreeItemState.js +0 -143
  149. package/modern/TreeItem2/TreeItem2.js +0 -387
  150. package/modern/TreeItem2/index.js +0 -1
  151. package/modern/TreeItem2DragAndDropOverlay/index.js +0 -1
  152. package/modern/TreeItem2Icon/index.js +0 -1
  153. package/modern/TreeItem2LabelInput/index.js +0 -1
  154. package/modern/TreeItem2Provider/TreeItem2Provider.types.js +0 -1
  155. package/modern/TreeItem2Provider/index.js +0 -1
  156. package/modern/TreeView/TreeView.js +0 -211
  157. package/modern/TreeView/TreeView.types.js +0 -1
  158. package/modern/TreeView/index.js +0 -3
  159. package/modern/TreeView/treeViewClasses.js +0 -6
  160. package/modern/hooks/useTreeItem2Utils/index.js +0 -1
  161. package/modern/useTreeItem2/index.js +0 -4
  162. package/modern/useTreeItem2/useTreeItem2.types.js +0 -1
  163. package/node/TreeItem/TreeItemContent.js +0 -153
  164. package/node/TreeItem/useTreeItemState.js +0 -148
  165. package/node/TreeItem2/TreeItem2.js +0 -394
  166. package/node/TreeItem2/index.js +0 -48
  167. package/node/TreeItem2DragAndDropOverlay/index.js +0 -12
  168. package/node/TreeItem2Icon/index.js +0 -12
  169. package/node/TreeItem2LabelInput/index.js +0 -12
  170. package/node/TreeItem2Provider/index.js +0 -12
  171. package/node/TreeView/TreeView.js +0 -217
  172. package/node/TreeView/TreeView.types.js +0 -5
  173. package/node/TreeView/index.js +0 -27
  174. package/node/TreeView/treeViewClasses.js +0 -14
  175. package/node/hooks/useTreeItem2Utils/index.js +0 -12
  176. package/node/useTreeItem2/index.js +0 -10
  177. package/node/useTreeItem2/useTreeItem2.types.js +0 -5
  178. package/useTreeItem2/index.d.ts +0 -3
  179. package/useTreeItem2/index.js +0 -4
  180. package/useTreeItem2/useTreeItem2.d.ts +0 -2
  181. package/useTreeItem2/useTreeItem2.types.js +0 -1
  182. /package/{TreeItem2/TreeItem2.types.js → TreeItemDragAndDropOverlay/TreeItemDragAndDropOverlay.types.js} +0 -0
  183. /package/{TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.types.js → TreeItemIcon/TreeItemIcon.types.js} +0 -0
  184. /package/{TreeItem2Icon/TreeItem2Icon.types.js → TreeItemLabelInput/TreeItemLabelInput.types.js} +0 -0
  185. /package/{TreeItem2LabelInput/TreeItem2LabelInput.types.js → TreeItemProvider/TreeItemProvider.types.js} +0 -0
  186. /package/{TreeItem2Provider/TreeItem2Provider.types.js → modern/TreeItemDragAndDropOverlay/TreeItemDragAndDropOverlay.types.js} +0 -0
  187. /package/{TreeView/TreeView.types.js → modern/TreeItemIcon/TreeItemIcon.types.js} +0 -0
  188. /package/modern/{TreeItem2/TreeItem2.types.js → TreeItemLabelInput/TreeItemLabelInput.types.js} +0 -0
  189. /package/modern/{TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.types.js → TreeItemProvider/TreeItemProvider.types.js} +0 -0
  190. /package/modern/{TreeItem2Icon/TreeItem2Icon.types.js → useTreeItem/useTreeItem.types.js} +0 -0
  191. /package/node/{TreeItem2/TreeItem2.types.js → TreeItemDragAndDropOverlay/TreeItemDragAndDropOverlay.types.js} +0 -0
  192. /package/node/{TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.types.js → TreeItemIcon/TreeItemIcon.types.js} +0 -0
  193. /package/node/{TreeItem2Icon/TreeItem2Icon.types.js → TreeItemLabelInput/TreeItemLabelInput.types.js} +0 -0
  194. /package/node/{TreeItem2LabelInput/TreeItem2LabelInput.types.js → TreeItemProvider/TreeItemProvider.types.js} +0 -0
  195. /package/node/{TreeItem2Provider/TreeItem2Provider.types.js → useTreeItem/useTreeItem.types.js} +0 -0
  196. /package/{modern/TreeItem2LabelInput/TreeItem2LabelInput.types.js → useTreeItem/useTreeItem.types.js} +0 -0
@@ -162,7 +162,6 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
162
162
  * the feature will be fully disabled and any property / method call will not have any effect.
163
163
  */
164
164
  experimentalFeatures: _propTypes.default.shape({
165
- indentationAtItemLevel: _propTypes.default.bool,
166
165
  labelEditing: _propTypes.default.bool
167
166
  }),
168
167
  /**
@@ -267,6 +266,26 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
267
266
  * When `multiSelect` is true this takes an array of strings; when false (default) a string.
268
267
  */
269
268
  selectedItems: _propTypes.default.any,
269
+ /**
270
+ * When `selectionPropagation.descendants` is set to `true`.
271
+ *
272
+ * - Selecting a parent selects all its descendants automatically.
273
+ * - Deselecting a parent deselects all its descendants automatically.
274
+ *
275
+ * When `selectionPropagation.parents` is set to `true`.
276
+ *
277
+ * - Selecting all the descendants of a parent selects the parent automatically.
278
+ * - Deselecting a descendant of a selected parent deselects the parent automatically.
279
+ *
280
+ * Only works when `multiSelect` is `true`.
281
+ * On the <SimpleTreeView />, only the expanded items are considered (since the collapsed item are not passed to the Tree View component at all)
282
+ *
283
+ * @default { parents: false, descendants: false }
284
+ */
285
+ selectionPropagation: _propTypes.default.shape({
286
+ descendants: _propTypes.default.bool,
287
+ parents: _propTypes.default.bool
288
+ }),
270
289
  /**
271
290
  * The props used for each component slot.
272
291
  * @default {}
@@ -161,9 +161,7 @@ process.env.NODE_ENV !== "production" ? SimpleTreeView.propTypes = {
161
161
  * For each feature, if the flag is not explicitly set to `true`,
162
162
  * the feature will be fully disabled and any property / method call will not have any effect.
163
163
  */
164
- experimentalFeatures: _propTypes.default.shape({
165
- indentationAtItemLevel: _propTypes.default.bool
166
- }),
164
+ experimentalFeatures: _propTypes.default.object,
167
165
  /**
168
166
  * This prop is used to help implement the accessibility logic.
169
167
  * If you don't provide this prop. It falls back to a randomly generated id.
@@ -224,6 +222,26 @@ process.env.NODE_ENV !== "production" ? SimpleTreeView.propTypes = {
224
222
  * When `multiSelect` is true this takes an array of strings; when false (default) a string.
225
223
  */
226
224
  selectedItems: _propTypes.default.any,
225
+ /**
226
+ * When `selectionPropagation.descendants` is set to `true`.
227
+ *
228
+ * - Selecting a parent selects all its descendants automatically.
229
+ * - Deselecting a parent deselects all its descendants automatically.
230
+ *
231
+ * When `selectionPropagation.parents` is set to `true`.
232
+ *
233
+ * - Selecting all the descendants of a parent selects the parent automatically.
234
+ * - Deselecting a descendant of a selected parent deselects the parent automatically.
235
+ *
236
+ * Only works when `multiSelect` is `true`.
237
+ * On the <SimpleTreeView />, only the expanded items are considered (since the collapsed item are not passed to the Tree View component at all)
238
+ *
239
+ * @default { parents: false, descendants: false }
240
+ */
241
+ selectionPropagation: _propTypes.default.shape({
242
+ descendants: _propTypes.default.bool,
243
+ parents: _propTypes.default.bool
244
+ }),
227
245
  /**
228
246
  * The props used for each component slot.
229
247
  */