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

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 (296) hide show
  1. package/CHANGELOG.md +486 -11
  2. package/README.md +4 -4
  3. package/RichTreeView/RichTreeView.js +22 -5
  4. package/RichTreeView/RichTreeView.types.d.ts +4 -17
  5. package/SimpleTreeView/SimpleTreeView.js +21 -3
  6. package/TreeItem/TreeItem.d.ts +20 -2
  7. package/TreeItem/TreeItem.js +241 -371
  8. package/TreeItem/TreeItem.types.d.ts +52 -85
  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/TreeItemProvider/TreeItemProvider.js +43 -0
  31. package/{TreeItem2Provider/TreeItem2Provider.types.d.ts → TreeItemProvider/TreeItemProvider.types.d.ts} +2 -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 +2 -1
  36. package/hooks/index.js +2 -1
  37. package/hooks/useTreeItemModel.d.ts +2 -0
  38. package/hooks/useTreeItemModel.js +11 -0
  39. package/hooks/useTreeItemUtils/index.d.ts +1 -0
  40. package/hooks/useTreeItemUtils/index.js +1 -0
  41. package/hooks/{useTreeItem2Utils/useTreeItem2Utils.d.ts → useTreeItemUtils/useTreeItemUtils.d.ts} +13 -12
  42. package/{modern/hooks/useTreeItem2Utils/useTreeItem2Utils.js → hooks/useTreeItemUtils/useTreeItemUtils.js} +36 -18
  43. package/index.d.ts +5 -7
  44. package/index.js +6 -8
  45. package/internals/TreeViewItemDepthContext/TreeViewItemDepthContext.d.ts +3 -1
  46. package/internals/TreeViewProvider/TreeViewChildrenItemProvider.d.ts +2 -1
  47. package/internals/TreeViewProvider/TreeViewChildrenItemProvider.js +6 -22
  48. package/internals/TreeViewProvider/TreeViewProvider.js +1 -2
  49. package/internals/TreeViewProvider/TreeViewProvider.types.d.ts +5 -2
  50. package/internals/components/RichTreeViewItems.d.ts +3 -6
  51. package/internals/components/RichTreeViewItems.js +42 -30
  52. package/internals/corePlugins/useTreeViewId/useTreeViewId.js +10 -11
  53. package/internals/corePlugins/useTreeViewId/useTreeViewId.selectors.d.ts +36 -0
  54. package/internals/corePlugins/useTreeViewId/useTreeViewId.selectors.js +9 -0
  55. package/internals/corePlugins/useTreeViewId/useTreeViewId.types.d.ts +1 -5
  56. package/internals/hooks/useSelector.d.ts +4 -0
  57. package/internals/hooks/useSelector.js +6 -0
  58. package/internals/index.d.ts +6 -1
  59. package/internals/index.js +5 -1
  60. package/internals/models/helpers.d.ts +0 -2
  61. package/internals/models/itemPlugin.d.ts +13 -10
  62. package/internals/models/plugin.d.ts +20 -8
  63. package/internals/models/treeView.d.ts +6 -0
  64. package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js +36 -24
  65. package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.selectors.d.ts +124 -0
  66. package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.selectors.js +17 -0
  67. package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.types.d.ts +8 -15
  68. package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.utils.d.ts +1 -0
  69. package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.utils.js +7 -0
  70. package/internals/plugins/useTreeViewFocus/useTreeViewFocus.js +62 -40
  71. package/internals/plugins/useTreeViewFocus/useTreeViewFocus.selectors.d.ts +182 -0
  72. package/internals/plugins/useTreeViewFocus/useTreeViewFocus.selectors.js +34 -0
  73. package/internals/plugins/useTreeViewFocus/useTreeViewFocus.types.d.ts +4 -16
  74. package/internals/plugins/useTreeViewIcons/useTreeViewIcons.js +15 -13
  75. package/internals/plugins/useTreeViewItems/index.d.ts +1 -1
  76. package/internals/plugins/useTreeViewItems/useTreeViewItems.js +58 -100
  77. package/internals/plugins/useTreeViewItems/useTreeViewItems.selectors.d.ts +718 -0
  78. package/internals/plugins/useTreeViewItems/useTreeViewItems.selectors.js +103 -0
  79. package/internals/plugins/useTreeViewItems/useTreeViewItems.types.d.ts +16 -55
  80. package/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.js +29 -26
  81. package/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js +27 -18
  82. package/internals/plugins/useTreeViewLabel/useTreeViewLabel.itemPlugin.d.ts +1 -1
  83. package/internals/plugins/useTreeViewLabel/useTreeViewLabel.itemPlugin.js +13 -5
  84. package/internals/plugins/useTreeViewLabel/useTreeViewLabel.js +19 -30
  85. package/internals/plugins/useTreeViewLabel/useTreeViewLabel.selectors.d.ts +74 -0
  86. package/internals/plugins/useTreeViewLabel/useTreeViewLabel.selectors.js +26 -0
  87. package/internals/plugins/useTreeViewLabel/useTreeViewLabel.types.d.ts +13 -29
  88. package/internals/plugins/useTreeViewSelection/useTreeViewSelection.itemPlugin.d.ts +2 -0
  89. package/internals/plugins/useTreeViewSelection/useTreeViewSelection.itemPlugin.js +88 -0
  90. package/internals/plugins/useTreeViewSelection/useTreeViewSelection.js +79 -43
  91. package/internals/plugins/useTreeViewSelection/useTreeViewSelection.selectors.d.ts +32 -0
  92. package/internals/plugins/useTreeViewSelection/useTreeViewSelection.selectors.js +9 -0
  93. package/internals/plugins/useTreeViewSelection/useTreeViewSelection.types.d.ts +39 -9
  94. package/internals/plugins/useTreeViewSelection/useTreeViewSelection.utils.d.ts +20 -1
  95. package/internals/plugins/useTreeViewSelection/useTreeViewSelection.utils.js +105 -0
  96. package/internals/useTreeView/useTreeView.js +30 -17
  97. package/internals/useTreeView/useTreeView.types.d.ts +1 -2
  98. package/internals/useTreeView/useTreeViewBuildContext.d.ts +3 -1
  99. package/internals/useTreeView/useTreeViewBuildContext.js +24 -18
  100. package/internals/utils/TreeViewStore.d.ts +12 -0
  101. package/internals/utils/TreeViewStore.js +24 -0
  102. package/internals/utils/selectors.d.ts +9 -0
  103. package/internals/utils/selectors.js +37 -0
  104. package/internals/utils/tree.d.ts +8 -8
  105. package/internals/utils/tree.js +51 -43
  106. package/models/items.d.ts +7 -2
  107. package/modern/RichTreeView/RichTreeView.js +22 -5
  108. package/modern/SimpleTreeView/SimpleTreeView.js +21 -3
  109. package/modern/TreeItem/TreeItem.js +241 -371
  110. package/modern/TreeItem/index.js +2 -4
  111. package/{TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.js → modern/TreeItemDragAndDropOverlay/TreeItemDragAndDropOverlay.js} +8 -6
  112. package/modern/TreeItemDragAndDropOverlay/index.js +1 -0
  113. package/modern/{TreeItem2Icon/TreeItem2Icon.js → TreeItemIcon/TreeItemIcon.js} +5 -3
  114. package/modern/TreeItemIcon/index.js +1 -0
  115. package/modern/{TreeItem2LabelInput/TreeItem2LabelInput.js → TreeItemLabelInput/TreeItemLabelInput.js} +3 -3
  116. package/modern/TreeItemLabelInput/index.js +1 -0
  117. package/modern/TreeItemProvider/TreeItemProvider.js +43 -0
  118. package/modern/TreeItemProvider/index.js +1 -0
  119. package/modern/hooks/index.js +2 -1
  120. package/modern/hooks/useTreeItemModel.js +11 -0
  121. package/modern/hooks/useTreeItemUtils/index.js +1 -0
  122. package/{hooks/useTreeItem2Utils/useTreeItem2Utils.js → modern/hooks/useTreeItemUtils/useTreeItemUtils.js} +36 -18
  123. package/modern/index.js +6 -8
  124. package/modern/internals/TreeViewProvider/TreeViewChildrenItemProvider.js +6 -22
  125. package/modern/internals/TreeViewProvider/TreeViewProvider.js +1 -2
  126. package/modern/internals/components/RichTreeViewItems.js +42 -30
  127. package/modern/internals/corePlugins/useTreeViewId/useTreeViewId.js +10 -11
  128. package/modern/internals/corePlugins/useTreeViewId/useTreeViewId.selectors.js +9 -0
  129. package/modern/internals/hooks/useSelector.js +6 -0
  130. package/modern/internals/index.js +5 -1
  131. package/modern/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js +36 -24
  132. package/modern/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.selectors.js +17 -0
  133. package/modern/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.utils.js +7 -0
  134. package/modern/internals/plugins/useTreeViewFocus/useTreeViewFocus.js +62 -40
  135. package/modern/internals/plugins/useTreeViewFocus/useTreeViewFocus.selectors.js +34 -0
  136. package/modern/internals/plugins/useTreeViewIcons/useTreeViewIcons.js +15 -13
  137. package/modern/internals/plugins/useTreeViewItems/useTreeViewItems.js +58 -100
  138. package/modern/internals/plugins/useTreeViewItems/useTreeViewItems.selectors.js +103 -0
  139. package/modern/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.js +29 -26
  140. package/modern/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js +27 -18
  141. package/modern/internals/plugins/useTreeViewLabel/useTreeViewLabel.itemPlugin.js +13 -5
  142. package/modern/internals/plugins/useTreeViewLabel/useTreeViewLabel.js +19 -30
  143. package/modern/internals/plugins/useTreeViewLabel/useTreeViewLabel.selectors.js +26 -0
  144. package/modern/internals/plugins/useTreeViewSelection/useTreeViewSelection.itemPlugin.js +88 -0
  145. package/modern/internals/plugins/useTreeViewSelection/useTreeViewSelection.js +79 -43
  146. package/modern/internals/plugins/useTreeViewSelection/useTreeViewSelection.selectors.js +9 -0
  147. package/modern/internals/plugins/useTreeViewSelection/useTreeViewSelection.utils.js +105 -0
  148. package/modern/internals/useTreeView/useTreeView.js +30 -17
  149. package/modern/internals/useTreeView/useTreeViewBuildContext.js +24 -18
  150. package/modern/internals/utils/TreeViewStore.js +24 -0
  151. package/modern/internals/utils/selectors.js +37 -0
  152. package/modern/internals/utils/tree.js +51 -43
  153. package/modern/useTreeItem/index.js +1 -0
  154. package/modern/{useTreeItem2/useTreeItem2.js → useTreeItem/useTreeItem.js} +45 -51
  155. package/node/RichTreeView/RichTreeView.js +22 -5
  156. package/node/SimpleTreeView/SimpleTreeView.js +21 -3
  157. package/node/TreeItem/TreeItem.js +242 -372
  158. package/node/TreeItem/index.js +38 -16
  159. package/node/{TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.js → TreeItemDragAndDropOverlay/TreeItemDragAndDropOverlay.js} +7 -6
  160. package/node/TreeItemDragAndDropOverlay/index.js +12 -0
  161. package/node/{TreeItem2Icon/TreeItem2Icon.js → TreeItemIcon/TreeItemIcon.js} +4 -3
  162. package/node/TreeItemIcon/index.js +12 -0
  163. package/node/{TreeItem2LabelInput/TreeItem2LabelInput.js → TreeItemLabelInput/TreeItemLabelInput.js} +3 -3
  164. package/node/TreeItemLabelInput/index.js +12 -0
  165. package/node/{TreeItem2Provider/TreeItem2Provider.js → TreeItemProvider/TreeItemProvider.js} +22 -6
  166. package/node/TreeItemProvider/index.js +12 -0
  167. package/node/hooks/index.js +10 -3
  168. package/node/hooks/useTreeItemModel.js +17 -0
  169. package/node/hooks/useTreeItemUtils/index.js +12 -0
  170. package/node/hooks/{useTreeItem2Utils/useTreeItem2Utils.js → useTreeItemUtils/useTreeItemUtils.js} +37 -19
  171. package/node/index.js +18 -42
  172. package/node/internals/TreeViewProvider/TreeViewChildrenItemProvider.js +6 -22
  173. package/node/internals/TreeViewProvider/TreeViewProvider.js +1 -2
  174. package/node/internals/components/RichTreeViewItems.js +42 -30
  175. package/node/internals/corePlugins/useTreeViewId/useTreeViewId.js +12 -13
  176. package/node/internals/corePlugins/useTreeViewId/useTreeViewId.selectors.js +15 -0
  177. package/node/internals/hooks/useSelector.js +13 -0
  178. package/node/internals/index.js +47 -1
  179. package/node/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js +36 -24
  180. package/node/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.selectors.js +23 -0
  181. package/node/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.utils.js +14 -0
  182. package/node/internals/plugins/useTreeViewFocus/useTreeViewFocus.js +62 -40
  183. package/node/internals/plugins/useTreeViewFocus/useTreeViewFocus.selectors.js +40 -0
  184. package/node/internals/plugins/useTreeViewIcons/useTreeViewIcons.js +16 -13
  185. package/node/internals/plugins/useTreeViewItems/useTreeViewItems.js +60 -102
  186. package/node/internals/plugins/useTreeViewItems/useTreeViewItems.selectors.js +109 -0
  187. package/node/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.js +30 -27
  188. package/node/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js +27 -18
  189. package/node/internals/plugins/useTreeViewLabel/useTreeViewLabel.itemPlugin.js +13 -5
  190. package/node/internals/plugins/useTreeViewLabel/useTreeViewLabel.js +19 -30
  191. package/node/internals/plugins/useTreeViewLabel/useTreeViewLabel.selectors.js +32 -0
  192. package/node/internals/plugins/useTreeViewSelection/useTreeViewSelection.itemPlugin.js +96 -0
  193. package/node/internals/plugins/useTreeViewSelection/useTreeViewSelection.js +78 -42
  194. package/node/internals/plugins/useTreeViewSelection/useTreeViewSelection.selectors.js +15 -0
  195. package/node/internals/plugins/useTreeViewSelection/useTreeViewSelection.utils.js +109 -2
  196. package/node/internals/useTreeView/useTreeView.js +30 -17
  197. package/node/internals/useTreeView/useTreeViewBuildContext.js +25 -18
  198. package/node/internals/utils/TreeViewStore.js +31 -0
  199. package/node/internals/utils/selectors.js +44 -0
  200. package/node/internals/utils/tree.js +51 -43
  201. package/node/useTreeItem/index.js +12 -0
  202. package/node/{useTreeItem2/useTreeItem2.js → useTreeItem/useTreeItem.js} +46 -53
  203. package/package.json +7 -5
  204. package/themeAugmentation/components.d.ts +0 -10
  205. package/themeAugmentation/overrides.d.ts +0 -3
  206. package/themeAugmentation/props.d.ts +1 -5
  207. package/useTreeItem/index.d.ts +2 -0
  208. package/useTreeItem/index.js +1 -0
  209. package/{TreeItem2 → useTreeItem}/package.json +1 -1
  210. package/useTreeItem/useTreeItem.d.ts +2 -0
  211. package/{useTreeItem2/useTreeItem2.js → useTreeItem/useTreeItem.js} +45 -51
  212. package/{useTreeItem2/useTreeItem2.types.d.ts → useTreeItem/useTreeItem.types.d.ts} +51 -58
  213. package/TreeItem/TreeItemContent.d.ts +0 -61
  214. package/TreeItem/TreeItemContent.js +0 -146
  215. package/TreeItem/useTreeItemState.d.ts +0 -21
  216. package/TreeItem/useTreeItemState.js +0 -143
  217. package/TreeItem2/TreeItem2.d.ts +0 -34
  218. package/TreeItem2/TreeItem2.js +0 -387
  219. package/TreeItem2/TreeItem2.types.d.ts +0 -92
  220. package/TreeItem2/index.d.ts +0 -2
  221. package/TreeItem2/index.js +0 -1
  222. package/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.d.ts +0 -7
  223. package/TreeItem2DragAndDropOverlay/index.d.ts +0 -2
  224. package/TreeItem2DragAndDropOverlay/index.js +0 -1
  225. package/TreeItem2DragAndDropOverlay/package.json +0 -6
  226. package/TreeItem2Icon/TreeItem2Icon.d.ts +0 -7
  227. package/TreeItem2Icon/index.d.ts +0 -2
  228. package/TreeItem2Icon/index.js +0 -1
  229. package/TreeItem2LabelInput/TreeItem2LabelInput.d.ts +0 -5
  230. package/TreeItem2LabelInput/index.d.ts +0 -2
  231. package/TreeItem2LabelInput/index.js +0 -1
  232. package/TreeItem2Provider/TreeItem2Provider.d.ts +0 -6
  233. package/TreeItem2Provider/TreeItem2Provider.js +0 -26
  234. package/TreeItem2Provider/index.d.ts +0 -2
  235. package/TreeItem2Provider/index.js +0 -1
  236. package/TreeView/TreeView.d.ts +0 -21
  237. package/TreeView/TreeView.js +0 -211
  238. package/TreeView/TreeView.types.d.ts +0 -9
  239. package/TreeView/index.d.ts +0 -3
  240. package/TreeView/index.js +0 -3
  241. package/TreeView/package.json +0 -6
  242. package/TreeView/treeViewClasses.d.ts +0 -7
  243. package/TreeView/treeViewClasses.js +0 -6
  244. package/hooks/useTreeItem2Utils/index.d.ts +0 -1
  245. package/hooks/useTreeItem2Utils/index.js +0 -1
  246. package/modern/TreeItem/TreeItemContent.js +0 -146
  247. package/modern/TreeItem/useTreeItemState.js +0 -143
  248. package/modern/TreeItem2/TreeItem2.js +0 -387
  249. package/modern/TreeItem2/index.js +0 -1
  250. package/modern/TreeItem2DragAndDropOverlay/index.js +0 -1
  251. package/modern/TreeItem2Icon/index.js +0 -1
  252. package/modern/TreeItem2LabelInput/index.js +0 -1
  253. package/modern/TreeItem2Provider/TreeItem2Provider.js +0 -26
  254. package/modern/TreeItem2Provider/TreeItem2Provider.types.js +0 -1
  255. package/modern/TreeItem2Provider/index.js +0 -1
  256. package/modern/TreeView/TreeView.js +0 -211
  257. package/modern/TreeView/TreeView.types.js +0 -1
  258. package/modern/TreeView/index.js +0 -3
  259. package/modern/TreeView/treeViewClasses.js +0 -6
  260. package/modern/hooks/useTreeItem2Utils/index.js +0 -1
  261. package/modern/useTreeItem2/index.js +0 -4
  262. package/modern/useTreeItem2/useTreeItem2.types.js +0 -1
  263. package/node/TreeItem/TreeItemContent.js +0 -153
  264. package/node/TreeItem/useTreeItemState.js +0 -148
  265. package/node/TreeItem2/TreeItem2.js +0 -394
  266. package/node/TreeItem2/index.js +0 -48
  267. package/node/TreeItem2DragAndDropOverlay/index.js +0 -12
  268. package/node/TreeItem2Icon/index.js +0 -12
  269. package/node/TreeItem2LabelInput/index.js +0 -12
  270. package/node/TreeItem2Provider/index.js +0 -12
  271. package/node/TreeView/TreeView.js +0 -217
  272. package/node/TreeView/TreeView.types.js +0 -5
  273. package/node/TreeView/index.js +0 -27
  274. package/node/TreeView/treeViewClasses.js +0 -14
  275. package/node/hooks/useTreeItem2Utils/index.js +0 -12
  276. package/node/useTreeItem2/index.js +0 -10
  277. package/node/useTreeItem2/useTreeItem2.types.js +0 -5
  278. package/useTreeItem2/index.d.ts +0 -3
  279. package/useTreeItem2/index.js +0 -4
  280. package/useTreeItem2/useTreeItem2.d.ts +0 -2
  281. package/useTreeItem2/useTreeItem2.types.js +0 -1
  282. /package/{TreeItem2/TreeItem2.types.js → TreeItemDragAndDropOverlay/TreeItemDragAndDropOverlay.types.js} +0 -0
  283. /package/{TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.types.js → TreeItemIcon/TreeItemIcon.types.js} +0 -0
  284. /package/{TreeItem2Icon/TreeItem2Icon.types.js → TreeItemLabelInput/TreeItemLabelInput.types.js} +0 -0
  285. /package/{TreeItem2LabelInput/TreeItem2LabelInput.types.js → TreeItemProvider/TreeItemProvider.types.js} +0 -0
  286. /package/{TreeItem2Provider/TreeItem2Provider.types.js → modern/TreeItemDragAndDropOverlay/TreeItemDragAndDropOverlay.types.js} +0 -0
  287. /package/{TreeView/TreeView.types.js → modern/TreeItemIcon/TreeItemIcon.types.js} +0 -0
  288. /package/modern/{TreeItem2/TreeItem2.types.js → TreeItemLabelInput/TreeItemLabelInput.types.js} +0 -0
  289. /package/modern/{TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.types.js → TreeItemProvider/TreeItemProvider.types.js} +0 -0
  290. /package/modern/{TreeItem2Icon/TreeItem2Icon.types.js → useTreeItem/useTreeItem.types.js} +0 -0
  291. /package/node/{TreeItem2/TreeItem2.types.js → TreeItemDragAndDropOverlay/TreeItemDragAndDropOverlay.types.js} +0 -0
  292. /package/node/{TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.types.js → TreeItemIcon/TreeItemIcon.types.js} +0 -0
  293. /package/node/{TreeItem2Icon/TreeItem2Icon.types.js → TreeItemLabelInput/TreeItemLabelInput.types.js} +0 -0
  294. /package/node/{TreeItem2LabelInput/TreeItem2LabelInput.types.js → TreeItemProvider/TreeItemProvider.types.js} +0 -0
  295. /package/node/{TreeItem2Provider/TreeItem2Provider.types.js → useTreeItem/useTreeItem.types.js} +0 -0
  296. /package/{modern/TreeItem2LabelInput/TreeItem2LabelInput.types.js → useTreeItem/useTreeItem.types.js} +0 -0
@@ -7,7 +7,7 @@ import { UseTreeViewFocusSignature } from '../internals/plugins/useTreeViewFocus
7
7
  import { UseTreeViewKeyboardNavigationSignature } from '../internals/plugins/useTreeViewKeyboardNavigation';
8
8
  import { UseTreeViewLabelSignature } from '../internals/plugins/useTreeViewLabel';
9
9
  import { UseTreeViewExpansionSignature } from '../internals/plugins/useTreeViewExpansion';
10
- export interface UseTreeItem2Parameters {
10
+ export interface UseTreeItemParameters {
11
11
  /**
12
12
  * The id attribute of the item. If not provided, it will be generated.
13
13
  */
@@ -32,7 +32,11 @@ export interface UseTreeItem2Parameters {
32
32
  */
33
33
  children?: React.ReactNode;
34
34
  }
35
- export interface UseTreeItem2RootSlotPropsFromUseTreeItem {
35
+ export interface UseTreeItemContextProviderProps {
36
+ itemId: string;
37
+ id: string | undefined;
38
+ }
39
+ export interface UseTreeItemRootSlotPropsFromUseTreeItem {
36
40
  role: 'treeitem';
37
41
  tabIndex: 0 | -1;
38
42
  id: string;
@@ -43,32 +47,25 @@ export interface UseTreeItem2RootSlotPropsFromUseTreeItem {
43
47
  onBlur: TreeViewCancellableEventHandler<React.FocusEvent<HTMLElement>>;
44
48
  onKeyDown: TreeViewCancellableEventHandler<React.KeyboardEvent<HTMLElement>>;
45
49
  ref: React.RefCallback<HTMLLIElement>;
46
- /**
47
- * Only defined when the `indentationAtItemLevel` experimental feature is enabled.
48
- */
49
- style?: React.CSSProperties;
50
+ style: React.CSSProperties;
50
51
  }
51
- export interface UseTreeItem2RootSlotOwnProps extends UseTreeItem2RootSlotPropsFromUseTreeItem {
52
+ export interface UseTreeItemRootSlotOwnProps extends UseTreeItemRootSlotPropsFromUseTreeItem {
52
53
  }
53
- export type UseTreeItem2RootSlotProps<ExternalProps = {}> = ExternalProps & UseTreeItem2RootSlotOwnProps;
54
- export interface UseTreeItem2ContentSlotPropsFromUseTreeItem {
54
+ export type UseTreeItemRootSlotProps<ExternalProps = {}> = ExternalProps & UseTreeItemRootSlotOwnProps;
55
+ export interface UseTreeItemContentSlotPropsFromUseTreeItem {
55
56
  onClick: TreeViewCancellableEventHandler<React.MouseEvent>;
56
57
  onMouseDown: TreeViewCancellableEventHandler<React.MouseEvent>;
57
58
  ref: React.RefCallback<HTMLDivElement> | null;
58
- status: UseTreeItem2Status;
59
- /**
60
- * Only defined when the `indentationAtItemLevel` experimental feature is enabled.
61
- */
62
- indentationAtItemLevel?: true;
59
+ status: UseTreeItemStatus;
63
60
  }
64
- export interface UseTreeItem2ContentSlotOwnProps extends UseTreeItem2ContentSlotPropsFromUseTreeItem {
61
+ export interface UseTreeItemContentSlotOwnProps extends UseTreeItemContentSlotPropsFromUseTreeItem {
65
62
  }
66
- export type UseTreeItem2ContentSlotProps<ExternalProps = {}> = ExternalProps & UseTreeItem2ContentSlotOwnProps;
67
- export interface UseTreeItem2IconContainerSlotOwnProps {
63
+ export type UseTreeItemContentSlotProps<ExternalProps = {}> = ExternalProps & UseTreeItemContentSlotOwnProps;
64
+ export interface UseTreeItemIconContainerSlotOwnProps {
68
65
  onClick: TreeViewCancellableEventHandler<React.MouseEvent>;
69
66
  }
70
- export type UseTreeItemIconContainerSlotProps<ExternalProps = {}> = ExternalProps & UseTreeItem2IconContainerSlotOwnProps;
71
- export interface UseTreeItem2LabelSlotOwnProps {
67
+ export type UseTreeItemIconContainerSlotProps<ExternalProps = {}> = ExternalProps & UseTreeItemIconContainerSlotOwnProps;
68
+ export interface UseTreeItemLabelSlotOwnProps {
72
69
  children: React.ReactNode;
73
70
  onDoubleClick: TreeViewCancellableEventHandler<React.MouseEvent>;
74
71
  /**
@@ -76,35 +73,26 @@ export interface UseTreeItem2LabelSlotOwnProps {
76
73
  */
77
74
  editable?: boolean;
78
75
  }
79
- export type UseTreeItem2LabelSlotProps<ExternalProps = {}> = ExternalProps & UseTreeItem2LabelSlotOwnProps;
80
- export interface UseTreeItem2LabelInputSlotOwnProps {
76
+ export type UseTreeItemLabelSlotProps<ExternalProps = {}> = ExternalProps & UseTreeItemLabelSlotOwnProps;
77
+ export interface UseTreeItemLabelInputSlotOwnProps {
81
78
  }
82
- export type UseTreeItem2LabelInputSlotProps<ExternalProps = {}> = ExternalProps & UseTreeItem2LabelInputSlotOwnProps;
83
- export interface UseTreeItem2CheckboxSlotOwnProps {
84
- visible: boolean;
85
- checked: boolean;
86
- onChange: TreeViewCancellableEventHandler<React.ChangeEvent<HTMLInputElement>>;
87
- disabled: boolean;
79
+ export type UseTreeItemLabelInputSlotProps<ExternalProps = {}> = ExternalProps & UseTreeItemLabelInputSlotOwnProps;
80
+ export interface UseTreeItemCheckboxSlotOwnProps {
88
81
  ref: React.RefObject<HTMLButtonElement>;
89
- tabIndex: -1;
90
82
  }
91
- export type UseTreeItem2CheckboxSlotProps<ExternalProps = {}> = ExternalProps & UseTreeItem2CheckboxSlotOwnProps;
92
- export interface UseTreeItem2GroupTransitionSlotOwnProps {
83
+ export type UseTreeItemCheckboxSlotProps<ExternalProps = {}> = ExternalProps & UseTreeItemCheckboxSlotOwnProps;
84
+ export interface UseTreeItemGroupTransitionSlotOwnProps {
93
85
  unmountOnExit: boolean;
94
86
  in: boolean;
95
87
  component: 'ul';
96
88
  role: 'group';
97
89
  children: React.ReactNode;
98
- /**
99
- * Only defined when the `indentationAtItemLevel` experimental feature is enabled.
100
- */
101
- indentationAtItemLevel?: true;
102
90
  }
103
- export type UseTreeItem2GroupTransitionSlotProps<ExternalProps = {}> = ExternalProps & UseTreeItem2GroupTransitionSlotOwnProps;
104
- export interface UseTreeItem2DragAndDropOverlaySlotOwnProps {
91
+ export type UseTreeItemGroupTransitionSlotProps<ExternalProps = {}> = ExternalProps & UseTreeItemGroupTransitionSlotOwnProps;
92
+ export interface UseTreeItemDragAndDropOverlaySlotOwnProps {
105
93
  }
106
- export type UseTreeItem2DragAndDropOverlaySlotProps<ExternalProps = {}> = ExternalProps & UseTreeItem2DragAndDropOverlaySlotOwnProps;
107
- export interface UseTreeItem2Status {
94
+ export type UseTreeItemDragAndDropOverlaySlotProps<ExternalProps = {}> = ExternalProps & UseTreeItemDragAndDropOverlaySlotOwnProps;
95
+ export interface UseTreeItemStatus {
108
96
  expandable: boolean;
109
97
  expanded: boolean;
110
98
  focused: boolean;
@@ -113,37 +101,42 @@ export interface UseTreeItem2Status {
113
101
  editing: boolean;
114
102
  editable: boolean;
115
103
  }
116
- export interface UseTreeItem2ReturnValue<TSignatures extends UseTreeItem2MinimalPlugins, TOptionalSignatures extends UseTreeItem2OptionalPlugins> {
104
+ export interface UseTreeItemReturnValue<TSignatures extends UseTreeItemMinimalPlugins, TOptionalSignatures extends UseTreeItemOptionalPlugins> {
105
+ /**
106
+ * Resolver for the context provider's props.
107
+ * @returns {UseTreeItemContextProviderProps} Props that should be spread on the context provider slot.
108
+ */
109
+ getContextProviderProps: () => UseTreeItemContextProviderProps;
117
110
  /**
118
111
  * Resolver for the root slot's props.
119
112
  * @param {ExternalProps} externalProps Additional props for the root slot.
120
- * @returns {UseTreeItem2RootSlotProps<ExternalProps>} Props that should be spread on the root slot.
113
+ * @returns {UseTreeItemRootSlotProps<ExternalProps>} Props that should be spread on the root slot.
121
114
  */
122
- getRootProps: <ExternalProps extends Record<string, any> = {}>(externalProps?: ExternalProps) => UseTreeItem2RootSlotProps<ExternalProps>;
115
+ getRootProps: <ExternalProps extends Record<string, any> = {}>(externalProps?: ExternalProps) => UseTreeItemRootSlotProps<ExternalProps>;
123
116
  /**
124
117
  * Resolver for the content slot's props.
125
118
  * @param {ExternalProps} externalProps Additional props for the content slot.
126
- * @returns {UseTreeItem2ContentSlotProps<ExternalProps>} Props that should be spread on the content slot.
119
+ * @returns {UseTreeItemContentSlotProps<ExternalProps>} Props that should be spread on the content slot.
127
120
  */
128
- getContentProps: <ExternalProps extends Record<string, any> = {}>(externalProps?: ExternalProps) => UseTreeItem2ContentSlotProps<ExternalProps>;
121
+ getContentProps: <ExternalProps extends Record<string, any> = {}>(externalProps?: ExternalProps) => UseTreeItemContentSlotProps<ExternalProps>;
129
122
  /**
130
123
  * Resolver for the label slot's props.
131
124
  * @param {ExternalProps} externalProps Additional props for the label slot.
132
- * @returns {UseTreeItem2LabelSlotProps<ExternalProps>} Props that should be spread on the label slot.
125
+ * @returns {UseTreeItemLabelSlotProps<ExternalProps>} Props that should be spread on the label slot.
133
126
  */
134
- getLabelProps: <ExternalProps extends Record<string, any> = {}>(externalProps?: ExternalProps) => UseTreeItem2LabelSlotProps<ExternalProps>;
127
+ getLabelProps: <ExternalProps extends Record<string, any> = {}>(externalProps?: ExternalProps) => UseTreeItemLabelSlotProps<ExternalProps>;
135
128
  /**
136
129
  * Resolver for the labelInput slot's props.
137
130
  * @param {ExternalProps} externalProps Additional props for the labelInput slot.
138
- * @returns {UseTreeItem2LabelInputSlotProps<ExternalProps>} Props that should be spread on the labelInput slot.
131
+ * @returns {UseTreeItemLabelInputSlotProps<ExternalProps>} Props that should be spread on the labelInput slot.
139
132
  */
140
- getLabelInputProps: <ExternalProps extends Record<string, any> = {}>(externalProps?: ExternalProps) => UseTreeItem2LabelInputSlotProps<ExternalProps>;
133
+ getLabelInputProps: <ExternalProps extends Record<string, any> = {}>(externalProps?: ExternalProps) => UseTreeItemLabelInputSlotProps<ExternalProps>;
141
134
  /**
142
135
  * Resolver for the checkbox slot's props.
143
136
  * @param {ExternalProps} externalProps Additional props for the checkbox slot.
144
- * @returns {UseTreeItem2CheckboxSlotProps<ExternalProps>} Props that should be spread on the checkbox slot.
137
+ * @returns {UseTreeItemCheckboxSlotProps<ExternalProps>} Props that should be spread on the checkbox slot.
145
138
  */
146
- getCheckboxProps: <ExternalProps extends Record<string, any> = {}>(externalProps?: ExternalProps) => UseTreeItem2CheckboxSlotProps<ExternalProps>;
139
+ getCheckboxProps: <ExternalProps extends Record<string, any> = {}>(externalProps?: ExternalProps) => UseTreeItemCheckboxSlotProps<ExternalProps>;
147
140
  /**
148
141
  * Resolver for the iconContainer slot's props.
149
142
  * @param {ExternalProps} externalProps Additional props for the iconContainer slot.
@@ -153,16 +146,16 @@ export interface UseTreeItem2ReturnValue<TSignatures extends UseTreeItem2Minimal
153
146
  /**
154
147
  * Resolver for the GroupTransition slot's props.
155
148
  * @param {ExternalProps} externalProps Additional props for the GroupTransition slot.
156
- * @returns {UseTreeItem2GroupTransitionSlotProps<ExternalProps>} Props that should be spread on the GroupTransition slot.
149
+ * @returns {UseTreeItemGroupTransitionSlotProps<ExternalProps>} Props that should be spread on the GroupTransition slot.
157
150
  */
158
- getGroupTransitionProps: <ExternalProps extends Record<string, any> = {}>(externalProps?: ExternalProps) => UseTreeItem2GroupTransitionSlotProps<ExternalProps>;
151
+ getGroupTransitionProps: <ExternalProps extends Record<string, any> = {}>(externalProps?: ExternalProps) => UseTreeItemGroupTransitionSlotProps<ExternalProps>;
159
152
  /**
160
153
  * Resolver for the DragAndDropOverlay slot's props.
161
154
  * Warning: This slot is only useful when using the `<RichTreeViewPro />` component.
162
155
  * @param {ExternalProps} externalProps Additional props for the DragAndDropOverlay slot.
163
- * @returns {UseTreeItem2DragAndDropOverlaySlotProps<ExternalProps>} Props that should be spread on the DragAndDropOverlay slot.
156
+ * @returns {UseTreeItemDragAndDropOverlaySlotProps<ExternalProps>} Props that should be spread on the DragAndDropOverlay slot.
164
157
  */
165
- getDragAndDropOverlayProps: <ExternalProps extends Record<string, any> = {}>(externalProps?: ExternalProps) => UseTreeItem2DragAndDropOverlaySlotProps<ExternalProps>;
158
+ getDragAndDropOverlayProps: <ExternalProps extends Record<string, any> = {}>(externalProps?: ExternalProps) => UseTreeItemDragAndDropOverlaySlotProps<ExternalProps>;
166
159
  /**
167
160
  * A ref to the component's root DOM element.
168
161
  */
@@ -170,16 +163,16 @@ export interface UseTreeItem2ReturnValue<TSignatures extends UseTreeItem2Minimal
170
163
  /**
171
164
  * Current status of the item.
172
165
  */
173
- status: UseTreeItem2Status;
166
+ status: UseTreeItemStatus;
174
167
  /**
175
168
  * The object the allows Tree View manipulation.
176
169
  */
177
170
  publicAPI: TreeViewPublicAPI<TSignatures, TOptionalSignatures>;
178
171
  }
179
172
  /**
180
- * Plugins that need to be present in the Tree View in order for `useTreeItem2` to work correctly.
173
+ * Plugins that need to be present in the Tree View in order for `UseTreeItem` to work correctly.
181
174
  */
182
- export type UseTreeItem2MinimalPlugins = readonly [
175
+ export type UseTreeItemMinimalPlugins = readonly [
183
176
  UseTreeViewSelectionSignature,
184
177
  UseTreeViewExpansionSignature,
185
178
  UseTreeViewItemsSignature,
@@ -188,6 +181,6 @@ export type UseTreeItem2MinimalPlugins = readonly [
188
181
  UseTreeViewLabelSignature
189
182
  ];
190
183
  /**
191
- * Plugins that `useTreeItem2` can use if they are present, but are not required.
184
+ * Plugins that `UseTreeItem` can use if they are present, but are not required.
192
185
  */
193
- export type UseTreeItem2OptionalPlugins = readonly [];
186
+ export type UseTreeItemOptionalPlugins = readonly [];
@@ -1,61 +0,0 @@
1
- import * as React from 'react';
2
- import { TreeItem2DragAndDropOverlayProps } from '../TreeItem2DragAndDropOverlay';
3
- import { TreeItem2LabelInputProps } from '../TreeItem2LabelInput';
4
- export interface TreeItemContentProps extends React.HTMLAttributes<HTMLElement> {
5
- className?: string;
6
- /**
7
- * Override or extend the styles applied to the component.
8
- */
9
- classes: {
10
- /** Styles applied to the root element. */
11
- root: string;
12
- /** State class applied to the content element when expanded. */
13
- expanded: string;
14
- /** State class applied to the content element when selected. */
15
- selected: string;
16
- /** State class applied to the content element when focused. */
17
- focused: string;
18
- /** State class applied to the element when disabled. */
19
- disabled: string;
20
- /** Styles applied to the Tree Item icon and collapse/expand icon. */
21
- iconContainer: string;
22
- /** Styles applied to the label element. */
23
- label: string;
24
- /** Styles applied to the checkbox element. */
25
- checkbox: string;
26
- /** Styles applied to the input element that is visible when editing is enabled. */
27
- labelInput: string;
28
- /** Styles applied to the content element when editing is enabled. */
29
- editing: string;
30
- /** Styles applied to the content of the items that are editable. */
31
- editable: string;
32
- };
33
- /**
34
- * The Tree Item label.
35
- */
36
- label?: React.ReactNode;
37
- /**
38
- * The id of the item.
39
- */
40
- itemId: string;
41
- /**
42
- * The icon to display next to the Tree Item's label.
43
- */
44
- icon?: React.ReactNode;
45
- /**
46
- * The icon to display next to the Tree Item's label. Either an expansion or collapse icon.
47
- */
48
- expansionIcon?: React.ReactNode;
49
- /**
50
- * The icon to display next to the Tree Item's label. Either a parent or end icon.
51
- */
52
- displayIcon?: React.ReactNode;
53
- dragAndDropOverlayProps?: TreeItem2DragAndDropOverlayProps;
54
- labelInputProps?: TreeItem2LabelInputProps;
55
- }
56
- export type TreeItemContentClassKey = keyof NonNullable<TreeItemContentProps['classes']>;
57
- /**
58
- * @ignore - internal component.
59
- */
60
- declare const TreeItemContent: React.ForwardRefExoticComponent<TreeItemContentProps & React.RefAttributes<HTMLDivElement>>;
61
- export { TreeItemContent };
@@ -1,146 +0,0 @@
1
- import _extends from "@babel/runtime/helpers/esm/extends";
2
- import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
3
- const _excluded = ["classes", "className", "displayIcon", "expansionIcon", "icon", "label", "itemId", "onClick", "onMouseDown", "dragAndDropOverlayProps", "labelInputProps"];
4
- import * as React from 'react';
5
- import PropTypes from 'prop-types';
6
- import clsx from 'clsx';
7
- import Checkbox from '@mui/material/Checkbox';
8
- import { useTreeItemState } from "./useTreeItemState.js";
9
- import { TreeItem2DragAndDropOverlay } from "../TreeItem2DragAndDropOverlay/index.js";
10
- import { TreeItem2LabelInput } from "../TreeItem2LabelInput/index.js";
11
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
12
- /**
13
- * @ignore - internal component.
14
- */
15
- const TreeItemContent = /*#__PURE__*/React.forwardRef(function TreeItemContent(props, ref) {
16
- const {
17
- classes,
18
- className,
19
- displayIcon,
20
- expansionIcon,
21
- icon: iconProp,
22
- label,
23
- itemId,
24
- onClick,
25
- onMouseDown,
26
- dragAndDropOverlayProps,
27
- labelInputProps
28
- } = props,
29
- other = _objectWithoutPropertiesLoose(props, _excluded);
30
- const {
31
- disabled,
32
- expanded,
33
- selected,
34
- focused,
35
- editing,
36
- editable,
37
- disableSelection,
38
- checkboxSelection,
39
- handleExpansion,
40
- handleSelection,
41
- handleCheckboxSelection,
42
- handleContentClick,
43
- preventSelection,
44
- expansionTrigger,
45
- toggleItemEditing
46
- } = useTreeItemState(itemId);
47
- const icon = iconProp || expansionIcon || displayIcon;
48
- const checkboxRef = React.useRef(null);
49
- const handleMouseDown = event => {
50
- preventSelection(event);
51
- if (onMouseDown) {
52
- onMouseDown(event);
53
- }
54
- };
55
- const handleClick = event => {
56
- handleContentClick?.(event, itemId);
57
- if (checkboxRef.current?.contains(event.target)) {
58
- return;
59
- }
60
- if (expansionTrigger === 'content') {
61
- handleExpansion(event);
62
- }
63
- if (!checkboxSelection) {
64
- handleSelection(event);
65
- }
66
- if (onClick) {
67
- onClick(event);
68
- }
69
- };
70
- const handleLabelDoubleClick = event => {
71
- if (event.defaultMuiPrevented) {
72
- return;
73
- }
74
- toggleItemEditing();
75
- };
76
- return /*#__PURE__*/ /* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions -- Key event is handled by the TreeView */_jsxs("div", _extends({}, other, {
77
- className: clsx(classes.root, className, expanded && classes.expanded, selected && classes.selected, focused && classes.focused, disabled && classes.disabled, editing && classes.editing, editable && classes.editable),
78
- onClick: handleClick,
79
- onMouseDown: handleMouseDown,
80
- ref: ref,
81
- children: [/*#__PURE__*/_jsx("div", {
82
- className: classes.iconContainer,
83
- children: icon
84
- }), checkboxSelection && /*#__PURE__*/_jsx(Checkbox, {
85
- className: classes.checkbox,
86
- checked: selected,
87
- onChange: handleCheckboxSelection,
88
- disabled: disabled || disableSelection,
89
- ref: checkboxRef,
90
- tabIndex: -1
91
- }), editing ? /*#__PURE__*/_jsx(TreeItem2LabelInput, _extends({}, labelInputProps, {
92
- className: classes.labelInput
93
- })) : /*#__PURE__*/_jsx("div", _extends({
94
- className: classes.label
95
- }, editable && {
96
- onDoubleClick: handleLabelDoubleClick
97
- }, {
98
- children: label
99
- })), dragAndDropOverlayProps && /*#__PURE__*/_jsx(TreeItem2DragAndDropOverlay, _extends({}, dragAndDropOverlayProps))]
100
- }));
101
- });
102
- process.env.NODE_ENV !== "production" ? TreeItemContent.propTypes = {
103
- // ----------------------------- Warning --------------------------------
104
- // | These PropTypes are generated from the TypeScript type definitions |
105
- // | To update them edit the TypeScript types and run "pnpm proptypes" |
106
- // ----------------------------------------------------------------------
107
- /**
108
- * Override or extend the styles applied to the component.
109
- */
110
- classes: PropTypes.object.isRequired,
111
- className: PropTypes.string,
112
- /**
113
- * The icon to display next to the Tree Item's label. Either a parent or end icon.
114
- */
115
- displayIcon: PropTypes.node,
116
- dragAndDropOverlayProps: PropTypes.shape({
117
- action: PropTypes.oneOf(['make-child', 'move-to-parent', 'reorder-above', 'reorder-below']),
118
- style: PropTypes.object
119
- }),
120
- /**
121
- * The icon to display next to the Tree Item's label. Either an expansion or collapse icon.
122
- */
123
- expansionIcon: PropTypes.node,
124
- /**
125
- * The icon to display next to the Tree Item's label.
126
- */
127
- icon: PropTypes.node,
128
- /**
129
- * The id of the item.
130
- */
131
- itemId: PropTypes.string.isRequired,
132
- /**
133
- * The Tree Item label.
134
- */
135
- label: PropTypes.node,
136
- labelInputProps: PropTypes.shape({
137
- autoFocus: PropTypes.oneOf([true]),
138
- 'data-element': PropTypes.oneOf(['labelInput']),
139
- onBlur: PropTypes.func,
140
- onChange: PropTypes.func,
141
- onKeyDown: PropTypes.func,
142
- type: PropTypes.oneOf(['text']),
143
- value: PropTypes.string
144
- })
145
- } : void 0;
146
- export { TreeItemContent };
@@ -1,21 +0,0 @@
1
- import * as React from 'react';
2
- import { TreeViewCancellableEvent } from '../models';
3
- export declare function useTreeItemState(itemId: string): {
4
- disabled: boolean;
5
- expanded: boolean;
6
- selected: boolean;
7
- focused: boolean;
8
- editable: boolean;
9
- editing: boolean;
10
- disableSelection: boolean;
11
- checkboxSelection: boolean;
12
- handleExpansion: (event: React.MouseEvent<HTMLDivElement>) => void;
13
- handleSelection: (event: React.MouseEvent) => void;
14
- handleCheckboxSelection: (event: React.ChangeEvent<HTMLInputElement>) => void;
15
- handleContentClick: ((event: React.MouseEvent, itemId: string) => void) | undefined;
16
- preventSelection: (event: React.MouseEvent<HTMLDivElement>) => void;
17
- expansionTrigger: "content" | "iconContainer" | undefined;
18
- toggleItemEditing: () => void;
19
- handleSaveItemLabel: (event: React.SyntheticEvent & TreeViewCancellableEvent, label: string) => void;
20
- handleCancelItemLabelEditing: (event: React.SyntheticEvent) => void;
21
- };
@@ -1,143 +0,0 @@
1
- 'use client';
2
-
3
- import { useTreeViewContext } from "../internals/TreeViewProvider/index.js";
4
- import { useTreeViewLabel } from "../internals/plugins/useTreeViewLabel/index.js";
5
- import { hasPlugin } from "../internals/utils/plugins.js";
6
- export function useTreeItemState(itemId) {
7
- const {
8
- instance,
9
- items: {
10
- onItemClick
11
- },
12
- selection: {
13
- multiSelect,
14
- checkboxSelection,
15
- disableSelection
16
- },
17
- expansion: {
18
- expansionTrigger
19
- }
20
- } = useTreeViewContext();
21
- const expandable = instance.isItemExpandable(itemId);
22
- const expanded = instance.isItemExpanded(itemId);
23
- const focused = instance.isItemFocused(itemId);
24
- const selected = instance.isItemSelected(itemId);
25
- const disabled = instance.isItemDisabled(itemId);
26
- const editing = instance?.isItemBeingEdited ? instance?.isItemBeingEdited(itemId) : false;
27
- const editable = instance.isItemEditable ? instance.isItemEditable(itemId) : false;
28
- const handleExpansion = event => {
29
- if (!disabled) {
30
- if (!focused) {
31
- instance.focusItem(event, itemId);
32
- }
33
- const multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);
34
-
35
- // If already expanded and trying to toggle selection don't close
36
- if (expandable && !(multiple && instance.isItemExpanded(itemId))) {
37
- instance.toggleItemExpansion(event, itemId);
38
- }
39
- }
40
- };
41
- const handleSelection = event => {
42
- if (!disabled) {
43
- if (!focused) {
44
- instance.focusItem(event, itemId);
45
- }
46
- const multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);
47
- if (multiple) {
48
- if (event.shiftKey) {
49
- instance.expandSelectionRange(event, itemId);
50
- } else {
51
- instance.selectItem({
52
- event,
53
- itemId,
54
- keepExistingSelection: true
55
- });
56
- }
57
- } else {
58
- instance.selectItem({
59
- event,
60
- itemId,
61
- shouldBeSelected: true
62
- });
63
- }
64
- }
65
- };
66
- const handleCheckboxSelection = event => {
67
- if (disableSelection || disabled) {
68
- return;
69
- }
70
- const hasShift = event.nativeEvent.shiftKey;
71
- if (multiSelect && hasShift) {
72
- instance.expandSelectionRange(event, itemId);
73
- } else {
74
- instance.selectItem({
75
- event,
76
- itemId,
77
- keepExistingSelection: multiSelect,
78
- shouldBeSelected: event.target.checked
79
- });
80
- }
81
- };
82
- const preventSelection = event => {
83
- if (event.shiftKey || event.ctrlKey || event.metaKey || disabled) {
84
- // Prevent text selection
85
- event.preventDefault();
86
- }
87
- };
88
- const toggleItemEditing = () => {
89
- if (!hasPlugin(instance, useTreeViewLabel)) {
90
- return;
91
- }
92
- if (instance.isItemEditable(itemId)) {
93
- if (instance.isItemBeingEdited(itemId)) {
94
- instance.setEditedItemId(null);
95
- } else {
96
- instance.setEditedItemId(itemId);
97
- }
98
- }
99
- };
100
- const handleSaveItemLabel = (event, label) => {
101
- if (!hasPlugin(instance, useTreeViewLabel)) {
102
- return;
103
- }
104
-
105
- // As a side effect of `instance.focusItem` called here and in `handleCancelItemLabelEditing` the `labelInput` is blurred
106
- // The `onBlur` event is triggered, which calls `handleSaveItemLabel` again.
107
- // To avoid creating an unwanted behavior we need to check if the item is being edited before calling `updateItemLabel`
108
- // using `instance.isItemBeingEditedRef` instead of `instance.isItemBeingEdited` since the state is not yet updated in this point
109
- if (instance.isItemBeingEditedRef(itemId)) {
110
- instance.updateItemLabel(itemId, label);
111
- toggleItemEditing();
112
- instance.focusItem(event, itemId);
113
- }
114
- };
115
- const handleCancelItemLabelEditing = event => {
116
- if (!hasPlugin(instance, useTreeViewLabel)) {
117
- return;
118
- }
119
- if (instance.isItemBeingEditedRef(itemId)) {
120
- toggleItemEditing();
121
- instance.focusItem(event, itemId);
122
- }
123
- };
124
- return {
125
- disabled,
126
- expanded,
127
- selected,
128
- focused,
129
- editable,
130
- editing,
131
- disableSelection,
132
- checkboxSelection,
133
- handleExpansion,
134
- handleSelection,
135
- handleCheckboxSelection,
136
- handleContentClick: onItemClick,
137
- preventSelection,
138
- expansionTrigger,
139
- toggleItemEditing,
140
- handleSaveItemLabel,
141
- handleCancelItemLabelEditing
142
- };
143
- }
@@ -1,34 +0,0 @@
1
- import * as React from 'react';
2
- import { CheckboxProps } from '@mui/material/Checkbox';
3
- import { TreeItem2Props } from './TreeItem2.types';
4
- import { UseTreeItem2Status } from '../useTreeItem2';
5
- export declare const TreeItem2Root: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, Pick<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, keyof React.ClassAttributes<HTMLLIElement> | keyof React.LiHTMLAttributes<HTMLLIElement>>, {}>;
6
- export declare const TreeItem2Content: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
7
- status: UseTreeItem2Status;
8
- indentationAtItemLevel?: true;
9
- }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
10
- export declare const TreeItem2Label: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
11
- editable?: boolean;
12
- }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
13
- export declare const TreeItem2IconContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
14
- export declare const TreeItem2GroupTransition: import("@emotion/styled").StyledComponent<import("@mui/material").CollapseProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
15
- indentationAtItemLevel?: true;
16
- }, {}, {}>;
17
- export declare const TreeItem2Checkbox: import("@emotion/styled").StyledComponent<Pick<Omit<CheckboxProps & {
18
- visible: boolean;
19
- }, "ref"> & React.RefAttributes<HTMLButtonElement>, "hidden" | "visible" | "color" | "content" | "size" | "style" | "icon" | "translate" | "disabled" | "form" | "slot" | "title" | "suppressHydrationWarning" | "className" | "id" | "lang" | "name" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "nonce" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "readOnly" | "required" | "action" | "checked" | "component" | "sx" | "classes" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "checkedIcon" | "inputProps" | "inputRef" | "indeterminate" | "indeterminateIcon" | keyof React.RefAttributes<HTMLButtonElement>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
20
- type TreeItem2Component = ((props: TreeItem2Props & React.RefAttributes<HTMLLIElement>) => React.JSX.Element) & {
21
- propTypes?: any;
22
- };
23
- /**
24
- *
25
- * Demos:
26
- *
27
- * - [Tree View](https://mui.com/x/react-tree-view/)
28
- *
29
- * API:
30
- *
31
- * - [TreeItem2 API](https://mui.com/x/api/tree-view/tree-item-2/)
32
- */
33
- export declare const TreeItem2: TreeItem2Component;
34
- export {};