@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.
- package/CHANGELOG.md +486 -11
- package/README.md +4 -4
- package/RichTreeView/RichTreeView.js +22 -5
- package/RichTreeView/RichTreeView.types.d.ts +4 -17
- package/SimpleTreeView/SimpleTreeView.js +21 -3
- package/TreeItem/TreeItem.d.ts +20 -2
- package/TreeItem/TreeItem.js +241 -371
- package/TreeItem/TreeItem.types.d.ts +52 -85
- package/TreeItem/index.d.ts +1 -4
- package/TreeItem/index.js +2 -4
- package/TreeItemDragAndDropOverlay/TreeItemDragAndDropOverlay.d.ts +7 -0
- package/{modern/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.js → TreeItemDragAndDropOverlay/TreeItemDragAndDropOverlay.js} +8 -6
- package/{TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.types.d.ts → TreeItemDragAndDropOverlay/TreeItemDragAndDropOverlay.types.d.ts} +1 -1
- package/TreeItemDragAndDropOverlay/index.d.ts +2 -0
- package/TreeItemDragAndDropOverlay/index.js +1 -0
- package/{TreeItem2LabelInput → TreeItemDragAndDropOverlay}/package.json +1 -1
- package/TreeItemIcon/TreeItemIcon.d.ts +7 -0
- package/{TreeItem2Icon/TreeItem2Icon.js → TreeItemIcon/TreeItemIcon.js} +5 -3
- package/{TreeItem2Icon/TreeItem2Icon.types.d.ts → TreeItemIcon/TreeItemIcon.types.d.ts} +7 -7
- package/TreeItemIcon/index.d.ts +2 -0
- package/TreeItemIcon/index.js +1 -0
- package/{useTreeItem2 → TreeItemIcon}/package.json +1 -1
- package/TreeItemLabelInput/TreeItemLabelInput.d.ts +5 -0
- package/{TreeItem2LabelInput/TreeItem2LabelInput.js → TreeItemLabelInput/TreeItemLabelInput.js} +3 -3
- package/{TreeItem2LabelInput/TreeItem2LabelInput.types.d.ts → TreeItemLabelInput/TreeItemLabelInput.types.d.ts} +1 -1
- package/TreeItemLabelInput/index.d.ts +2 -0
- package/TreeItemLabelInput/index.js +1 -0
- package/{TreeItem2Provider → TreeItemLabelInput}/package.json +1 -1
- package/TreeItemProvider/TreeItemProvider.d.ts +9 -0
- package/TreeItemProvider/TreeItemProvider.js +43 -0
- package/{TreeItem2Provider/TreeItem2Provider.types.d.ts → TreeItemProvider/TreeItemProvider.types.d.ts} +2 -1
- package/TreeItemProvider/index.d.ts +2 -0
- package/TreeItemProvider/index.js +1 -0
- package/{TreeItem2Icon → TreeItemProvider}/package.json +1 -1
- package/hooks/index.d.ts +2 -1
- package/hooks/index.js +2 -1
- package/hooks/useTreeItemModel.d.ts +2 -0
- package/hooks/useTreeItemModel.js +11 -0
- package/hooks/useTreeItemUtils/index.d.ts +1 -0
- package/hooks/useTreeItemUtils/index.js +1 -0
- package/hooks/{useTreeItem2Utils/useTreeItem2Utils.d.ts → useTreeItemUtils/useTreeItemUtils.d.ts} +13 -12
- package/{modern/hooks/useTreeItem2Utils/useTreeItem2Utils.js → hooks/useTreeItemUtils/useTreeItemUtils.js} +36 -18
- package/index.d.ts +5 -7
- package/index.js +6 -8
- package/internals/TreeViewItemDepthContext/TreeViewItemDepthContext.d.ts +3 -1
- package/internals/TreeViewProvider/TreeViewChildrenItemProvider.d.ts +2 -1
- package/internals/TreeViewProvider/TreeViewChildrenItemProvider.js +6 -22
- package/internals/TreeViewProvider/TreeViewProvider.js +1 -2
- package/internals/TreeViewProvider/TreeViewProvider.types.d.ts +5 -2
- package/internals/components/RichTreeViewItems.d.ts +3 -6
- package/internals/components/RichTreeViewItems.js +42 -30
- package/internals/corePlugins/useTreeViewId/useTreeViewId.js +10 -11
- package/internals/corePlugins/useTreeViewId/useTreeViewId.selectors.d.ts +36 -0
- package/internals/corePlugins/useTreeViewId/useTreeViewId.selectors.js +9 -0
- package/internals/corePlugins/useTreeViewId/useTreeViewId.types.d.ts +1 -5
- package/internals/hooks/useSelector.d.ts +4 -0
- package/internals/hooks/useSelector.js +6 -0
- package/internals/index.d.ts +6 -1
- package/internals/index.js +5 -1
- package/internals/models/helpers.d.ts +0 -2
- package/internals/models/itemPlugin.d.ts +13 -10
- package/internals/models/plugin.d.ts +20 -8
- package/internals/models/treeView.d.ts +6 -0
- package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js +36 -24
- package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.selectors.d.ts +124 -0
- package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.selectors.js +17 -0
- package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.types.d.ts +8 -15
- package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.utils.d.ts +1 -0
- package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.utils.js +7 -0
- package/internals/plugins/useTreeViewFocus/useTreeViewFocus.js +62 -40
- package/internals/plugins/useTreeViewFocus/useTreeViewFocus.selectors.d.ts +182 -0
- package/internals/plugins/useTreeViewFocus/useTreeViewFocus.selectors.js +34 -0
- package/internals/plugins/useTreeViewFocus/useTreeViewFocus.types.d.ts +4 -16
- package/internals/plugins/useTreeViewIcons/useTreeViewIcons.js +15 -13
- package/internals/plugins/useTreeViewItems/index.d.ts +1 -1
- package/internals/plugins/useTreeViewItems/useTreeViewItems.js +58 -100
- package/internals/plugins/useTreeViewItems/useTreeViewItems.selectors.d.ts +718 -0
- package/internals/plugins/useTreeViewItems/useTreeViewItems.selectors.js +103 -0
- package/internals/plugins/useTreeViewItems/useTreeViewItems.types.d.ts +16 -55
- package/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.js +29 -26
- package/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js +27 -18
- package/internals/plugins/useTreeViewLabel/useTreeViewLabel.itemPlugin.d.ts +1 -1
- package/internals/plugins/useTreeViewLabel/useTreeViewLabel.itemPlugin.js +13 -5
- package/internals/plugins/useTreeViewLabel/useTreeViewLabel.js +19 -30
- package/internals/plugins/useTreeViewLabel/useTreeViewLabel.selectors.d.ts +74 -0
- package/internals/plugins/useTreeViewLabel/useTreeViewLabel.selectors.js +26 -0
- package/internals/plugins/useTreeViewLabel/useTreeViewLabel.types.d.ts +13 -29
- package/internals/plugins/useTreeViewSelection/useTreeViewSelection.itemPlugin.d.ts +2 -0
- package/internals/plugins/useTreeViewSelection/useTreeViewSelection.itemPlugin.js +88 -0
- package/internals/plugins/useTreeViewSelection/useTreeViewSelection.js +79 -43
- package/internals/plugins/useTreeViewSelection/useTreeViewSelection.selectors.d.ts +32 -0
- package/internals/plugins/useTreeViewSelection/useTreeViewSelection.selectors.js +9 -0
- package/internals/plugins/useTreeViewSelection/useTreeViewSelection.types.d.ts +39 -9
- package/internals/plugins/useTreeViewSelection/useTreeViewSelection.utils.d.ts +20 -1
- package/internals/plugins/useTreeViewSelection/useTreeViewSelection.utils.js +105 -0
- package/internals/useTreeView/useTreeView.js +30 -17
- package/internals/useTreeView/useTreeView.types.d.ts +1 -2
- package/internals/useTreeView/useTreeViewBuildContext.d.ts +3 -1
- package/internals/useTreeView/useTreeViewBuildContext.js +24 -18
- package/internals/utils/TreeViewStore.d.ts +12 -0
- package/internals/utils/TreeViewStore.js +24 -0
- package/internals/utils/selectors.d.ts +9 -0
- package/internals/utils/selectors.js +37 -0
- package/internals/utils/tree.d.ts +8 -8
- package/internals/utils/tree.js +51 -43
- package/models/items.d.ts +7 -2
- package/modern/RichTreeView/RichTreeView.js +22 -5
- package/modern/SimpleTreeView/SimpleTreeView.js +21 -3
- package/modern/TreeItem/TreeItem.js +241 -371
- package/modern/TreeItem/index.js +2 -4
- package/{TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.js → modern/TreeItemDragAndDropOverlay/TreeItemDragAndDropOverlay.js} +8 -6
- package/modern/TreeItemDragAndDropOverlay/index.js +1 -0
- package/modern/{TreeItem2Icon/TreeItem2Icon.js → TreeItemIcon/TreeItemIcon.js} +5 -3
- package/modern/TreeItemIcon/index.js +1 -0
- package/modern/{TreeItem2LabelInput/TreeItem2LabelInput.js → TreeItemLabelInput/TreeItemLabelInput.js} +3 -3
- package/modern/TreeItemLabelInput/index.js +1 -0
- package/modern/TreeItemProvider/TreeItemProvider.js +43 -0
- package/modern/TreeItemProvider/index.js +1 -0
- package/modern/hooks/index.js +2 -1
- package/modern/hooks/useTreeItemModel.js +11 -0
- package/modern/hooks/useTreeItemUtils/index.js +1 -0
- package/{hooks/useTreeItem2Utils/useTreeItem2Utils.js → modern/hooks/useTreeItemUtils/useTreeItemUtils.js} +36 -18
- package/modern/index.js +6 -8
- package/modern/internals/TreeViewProvider/TreeViewChildrenItemProvider.js +6 -22
- package/modern/internals/TreeViewProvider/TreeViewProvider.js +1 -2
- package/modern/internals/components/RichTreeViewItems.js +42 -30
- package/modern/internals/corePlugins/useTreeViewId/useTreeViewId.js +10 -11
- package/modern/internals/corePlugins/useTreeViewId/useTreeViewId.selectors.js +9 -0
- package/modern/internals/hooks/useSelector.js +6 -0
- package/modern/internals/index.js +5 -1
- package/modern/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js +36 -24
- package/modern/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.selectors.js +17 -0
- package/modern/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.utils.js +7 -0
- package/modern/internals/plugins/useTreeViewFocus/useTreeViewFocus.js +62 -40
- package/modern/internals/plugins/useTreeViewFocus/useTreeViewFocus.selectors.js +34 -0
- package/modern/internals/plugins/useTreeViewIcons/useTreeViewIcons.js +15 -13
- package/modern/internals/plugins/useTreeViewItems/useTreeViewItems.js +58 -100
- package/modern/internals/plugins/useTreeViewItems/useTreeViewItems.selectors.js +103 -0
- package/modern/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.js +29 -26
- package/modern/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js +27 -18
- package/modern/internals/plugins/useTreeViewLabel/useTreeViewLabel.itemPlugin.js +13 -5
- package/modern/internals/plugins/useTreeViewLabel/useTreeViewLabel.js +19 -30
- package/modern/internals/plugins/useTreeViewLabel/useTreeViewLabel.selectors.js +26 -0
- package/modern/internals/plugins/useTreeViewSelection/useTreeViewSelection.itemPlugin.js +88 -0
- package/modern/internals/plugins/useTreeViewSelection/useTreeViewSelection.js +79 -43
- package/modern/internals/plugins/useTreeViewSelection/useTreeViewSelection.selectors.js +9 -0
- package/modern/internals/plugins/useTreeViewSelection/useTreeViewSelection.utils.js +105 -0
- package/modern/internals/useTreeView/useTreeView.js +30 -17
- package/modern/internals/useTreeView/useTreeViewBuildContext.js +24 -18
- package/modern/internals/utils/TreeViewStore.js +24 -0
- package/modern/internals/utils/selectors.js +37 -0
- package/modern/internals/utils/tree.js +51 -43
- package/modern/useTreeItem/index.js +1 -0
- package/modern/{useTreeItem2/useTreeItem2.js → useTreeItem/useTreeItem.js} +45 -51
- package/node/RichTreeView/RichTreeView.js +22 -5
- package/node/SimpleTreeView/SimpleTreeView.js +21 -3
- package/node/TreeItem/TreeItem.js +242 -372
- package/node/TreeItem/index.js +38 -16
- package/node/{TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.js → TreeItemDragAndDropOverlay/TreeItemDragAndDropOverlay.js} +7 -6
- package/node/TreeItemDragAndDropOverlay/index.js +12 -0
- package/node/{TreeItem2Icon/TreeItem2Icon.js → TreeItemIcon/TreeItemIcon.js} +4 -3
- package/node/TreeItemIcon/index.js +12 -0
- package/node/{TreeItem2LabelInput/TreeItem2LabelInput.js → TreeItemLabelInput/TreeItemLabelInput.js} +3 -3
- package/node/TreeItemLabelInput/index.js +12 -0
- package/node/{TreeItem2Provider/TreeItem2Provider.js → TreeItemProvider/TreeItemProvider.js} +22 -6
- package/node/TreeItemProvider/index.js +12 -0
- package/node/hooks/index.js +10 -3
- package/node/hooks/useTreeItemModel.js +17 -0
- package/node/hooks/useTreeItemUtils/index.js +12 -0
- package/node/hooks/{useTreeItem2Utils/useTreeItem2Utils.js → useTreeItemUtils/useTreeItemUtils.js} +37 -19
- package/node/index.js +18 -42
- package/node/internals/TreeViewProvider/TreeViewChildrenItemProvider.js +6 -22
- package/node/internals/TreeViewProvider/TreeViewProvider.js +1 -2
- package/node/internals/components/RichTreeViewItems.js +42 -30
- package/node/internals/corePlugins/useTreeViewId/useTreeViewId.js +12 -13
- package/node/internals/corePlugins/useTreeViewId/useTreeViewId.selectors.js +15 -0
- package/node/internals/hooks/useSelector.js +13 -0
- package/node/internals/index.js +47 -1
- package/node/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js +36 -24
- package/node/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.selectors.js +23 -0
- package/node/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.utils.js +14 -0
- package/node/internals/plugins/useTreeViewFocus/useTreeViewFocus.js +62 -40
- package/node/internals/plugins/useTreeViewFocus/useTreeViewFocus.selectors.js +40 -0
- package/node/internals/plugins/useTreeViewIcons/useTreeViewIcons.js +16 -13
- package/node/internals/plugins/useTreeViewItems/useTreeViewItems.js +60 -102
- package/node/internals/plugins/useTreeViewItems/useTreeViewItems.selectors.js +109 -0
- package/node/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.js +30 -27
- package/node/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js +27 -18
- package/node/internals/plugins/useTreeViewLabel/useTreeViewLabel.itemPlugin.js +13 -5
- package/node/internals/plugins/useTreeViewLabel/useTreeViewLabel.js +19 -30
- package/node/internals/plugins/useTreeViewLabel/useTreeViewLabel.selectors.js +32 -0
- package/node/internals/plugins/useTreeViewSelection/useTreeViewSelection.itemPlugin.js +96 -0
- package/node/internals/plugins/useTreeViewSelection/useTreeViewSelection.js +78 -42
- package/node/internals/plugins/useTreeViewSelection/useTreeViewSelection.selectors.js +15 -0
- package/node/internals/plugins/useTreeViewSelection/useTreeViewSelection.utils.js +109 -2
- package/node/internals/useTreeView/useTreeView.js +30 -17
- package/node/internals/useTreeView/useTreeViewBuildContext.js +25 -18
- package/node/internals/utils/TreeViewStore.js +31 -0
- package/node/internals/utils/selectors.js +44 -0
- package/node/internals/utils/tree.js +51 -43
- package/node/useTreeItem/index.js +12 -0
- package/node/{useTreeItem2/useTreeItem2.js → useTreeItem/useTreeItem.js} +46 -53
- package/package.json +7 -5
- package/themeAugmentation/components.d.ts +0 -10
- package/themeAugmentation/overrides.d.ts +0 -3
- package/themeAugmentation/props.d.ts +1 -5
- package/useTreeItem/index.d.ts +2 -0
- package/useTreeItem/index.js +1 -0
- package/{TreeItem2 → useTreeItem}/package.json +1 -1
- package/useTreeItem/useTreeItem.d.ts +2 -0
- package/{useTreeItem2/useTreeItem2.js → useTreeItem/useTreeItem.js} +45 -51
- package/{useTreeItem2/useTreeItem2.types.d.ts → useTreeItem/useTreeItem.types.d.ts} +51 -58
- package/TreeItem/TreeItemContent.d.ts +0 -61
- package/TreeItem/TreeItemContent.js +0 -146
- package/TreeItem/useTreeItemState.d.ts +0 -21
- package/TreeItem/useTreeItemState.js +0 -143
- package/TreeItem2/TreeItem2.d.ts +0 -34
- package/TreeItem2/TreeItem2.js +0 -387
- package/TreeItem2/TreeItem2.types.d.ts +0 -92
- package/TreeItem2/index.d.ts +0 -2
- package/TreeItem2/index.js +0 -1
- package/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.d.ts +0 -7
- package/TreeItem2DragAndDropOverlay/index.d.ts +0 -2
- package/TreeItem2DragAndDropOverlay/index.js +0 -1
- package/TreeItem2DragAndDropOverlay/package.json +0 -6
- package/TreeItem2Icon/TreeItem2Icon.d.ts +0 -7
- package/TreeItem2Icon/index.d.ts +0 -2
- package/TreeItem2Icon/index.js +0 -1
- package/TreeItem2LabelInput/TreeItem2LabelInput.d.ts +0 -5
- package/TreeItem2LabelInput/index.d.ts +0 -2
- package/TreeItem2LabelInput/index.js +0 -1
- package/TreeItem2Provider/TreeItem2Provider.d.ts +0 -6
- package/TreeItem2Provider/TreeItem2Provider.js +0 -26
- package/TreeItem2Provider/index.d.ts +0 -2
- package/TreeItem2Provider/index.js +0 -1
- package/TreeView/TreeView.d.ts +0 -21
- package/TreeView/TreeView.js +0 -211
- package/TreeView/TreeView.types.d.ts +0 -9
- package/TreeView/index.d.ts +0 -3
- package/TreeView/index.js +0 -3
- package/TreeView/package.json +0 -6
- package/TreeView/treeViewClasses.d.ts +0 -7
- package/TreeView/treeViewClasses.js +0 -6
- package/hooks/useTreeItem2Utils/index.d.ts +0 -1
- package/hooks/useTreeItem2Utils/index.js +0 -1
- package/modern/TreeItem/TreeItemContent.js +0 -146
- package/modern/TreeItem/useTreeItemState.js +0 -143
- package/modern/TreeItem2/TreeItem2.js +0 -387
- package/modern/TreeItem2/index.js +0 -1
- package/modern/TreeItem2DragAndDropOverlay/index.js +0 -1
- package/modern/TreeItem2Icon/index.js +0 -1
- package/modern/TreeItem2LabelInput/index.js +0 -1
- package/modern/TreeItem2Provider/TreeItem2Provider.js +0 -26
- package/modern/TreeItem2Provider/TreeItem2Provider.types.js +0 -1
- package/modern/TreeItem2Provider/index.js +0 -1
- package/modern/TreeView/TreeView.js +0 -211
- package/modern/TreeView/TreeView.types.js +0 -1
- package/modern/TreeView/index.js +0 -3
- package/modern/TreeView/treeViewClasses.js +0 -6
- package/modern/hooks/useTreeItem2Utils/index.js +0 -1
- package/modern/useTreeItem2/index.js +0 -4
- package/modern/useTreeItem2/useTreeItem2.types.js +0 -1
- package/node/TreeItem/TreeItemContent.js +0 -153
- package/node/TreeItem/useTreeItemState.js +0 -148
- package/node/TreeItem2/TreeItem2.js +0 -394
- package/node/TreeItem2/index.js +0 -48
- package/node/TreeItem2DragAndDropOverlay/index.js +0 -12
- package/node/TreeItem2Icon/index.js +0 -12
- package/node/TreeItem2LabelInput/index.js +0 -12
- package/node/TreeItem2Provider/index.js +0 -12
- package/node/TreeView/TreeView.js +0 -217
- package/node/TreeView/TreeView.types.js +0 -5
- package/node/TreeView/index.js +0 -27
- package/node/TreeView/treeViewClasses.js +0 -14
- package/node/hooks/useTreeItem2Utils/index.js +0 -12
- package/node/useTreeItem2/index.js +0 -10
- package/node/useTreeItem2/useTreeItem2.types.js +0 -5
- package/useTreeItem2/index.d.ts +0 -3
- package/useTreeItem2/index.js +0 -4
- package/useTreeItem2/useTreeItem2.d.ts +0 -2
- package/useTreeItem2/useTreeItem2.types.js +0 -1
- /package/{TreeItem2/TreeItem2.types.js → TreeItemDragAndDropOverlay/TreeItemDragAndDropOverlay.types.js} +0 -0
- /package/{TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.types.js → TreeItemIcon/TreeItemIcon.types.js} +0 -0
- /package/{TreeItem2Icon/TreeItem2Icon.types.js → TreeItemLabelInput/TreeItemLabelInput.types.js} +0 -0
- /package/{TreeItem2LabelInput/TreeItem2LabelInput.types.js → TreeItemProvider/TreeItemProvider.types.js} +0 -0
- /package/{TreeItem2Provider/TreeItem2Provider.types.js → modern/TreeItemDragAndDropOverlay/TreeItemDragAndDropOverlay.types.js} +0 -0
- /package/{TreeView/TreeView.types.js → modern/TreeItemIcon/TreeItemIcon.types.js} +0 -0
- /package/modern/{TreeItem2/TreeItem2.types.js → TreeItemLabelInput/TreeItemLabelInput.types.js} +0 -0
- /package/modern/{TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.types.js → TreeItemProvider/TreeItemProvider.types.js} +0 -0
- /package/modern/{TreeItem2Icon/TreeItem2Icon.types.js → useTreeItem/useTreeItem.types.js} +0 -0
- /package/node/{TreeItem2/TreeItem2.types.js → TreeItemDragAndDropOverlay/TreeItemDragAndDropOverlay.types.js} +0 -0
- /package/node/{TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.types.js → TreeItemIcon/TreeItemIcon.types.js} +0 -0
- /package/node/{TreeItem2Icon/TreeItem2Icon.types.js → TreeItemLabelInput/TreeItemLabelInput.types.js} +0 -0
- /package/node/{TreeItem2LabelInput/TreeItem2LabelInput.types.js → TreeItemProvider/TreeItemProvider.types.js} +0 -0
- /package/node/{TreeItem2Provider/TreeItem2Provider.types.js → useTreeItem/useTreeItem.types.js} +0 -0
- /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
|
|
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
|
|
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
|
|
52
|
+
export interface UseTreeItemRootSlotOwnProps extends UseTreeItemRootSlotPropsFromUseTreeItem {
|
|
52
53
|
}
|
|
53
|
-
export type
|
|
54
|
-
export interface
|
|
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:
|
|
59
|
-
/**
|
|
60
|
-
* Only defined when the `indentationAtItemLevel` experimental feature is enabled.
|
|
61
|
-
*/
|
|
62
|
-
indentationAtItemLevel?: true;
|
|
59
|
+
status: UseTreeItemStatus;
|
|
63
60
|
}
|
|
64
|
-
export interface
|
|
61
|
+
export interface UseTreeItemContentSlotOwnProps extends UseTreeItemContentSlotPropsFromUseTreeItem {
|
|
65
62
|
}
|
|
66
|
-
export type
|
|
67
|
-
export interface
|
|
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 &
|
|
71
|
-
export interface
|
|
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
|
|
80
|
-
export interface
|
|
76
|
+
export type UseTreeItemLabelSlotProps<ExternalProps = {}> = ExternalProps & UseTreeItemLabelSlotOwnProps;
|
|
77
|
+
export interface UseTreeItemLabelInputSlotOwnProps {
|
|
81
78
|
}
|
|
82
|
-
export type
|
|
83
|
-
export interface
|
|
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
|
|
92
|
-
export interface
|
|
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
|
|
104
|
-
export interface
|
|
91
|
+
export type UseTreeItemGroupTransitionSlotProps<ExternalProps = {}> = ExternalProps & UseTreeItemGroupTransitionSlotOwnProps;
|
|
92
|
+
export interface UseTreeItemDragAndDropOverlaySlotOwnProps {
|
|
105
93
|
}
|
|
106
|
-
export type
|
|
107
|
-
export interface
|
|
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
|
|
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 {
|
|
113
|
+
* @returns {UseTreeItemRootSlotProps<ExternalProps>} Props that should be spread on the root slot.
|
|
121
114
|
*/
|
|
122
|
-
getRootProps: <ExternalProps extends Record<string, any> = {}>(externalProps?: 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 {
|
|
119
|
+
* @returns {UseTreeItemContentSlotProps<ExternalProps>} Props that should be spread on the content slot.
|
|
127
120
|
*/
|
|
128
|
-
getContentProps: <ExternalProps extends Record<string, any> = {}>(externalProps?: 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 {
|
|
125
|
+
* @returns {UseTreeItemLabelSlotProps<ExternalProps>} Props that should be spread on the label slot.
|
|
133
126
|
*/
|
|
134
|
-
getLabelProps: <ExternalProps extends Record<string, any> = {}>(externalProps?: 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 {
|
|
131
|
+
* @returns {UseTreeItemLabelInputSlotProps<ExternalProps>} Props that should be spread on the labelInput slot.
|
|
139
132
|
*/
|
|
140
|
-
getLabelInputProps: <ExternalProps extends Record<string, any> = {}>(externalProps?: 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 {
|
|
137
|
+
* @returns {UseTreeItemCheckboxSlotProps<ExternalProps>} Props that should be spread on the checkbox slot.
|
|
145
138
|
*/
|
|
146
|
-
getCheckboxProps: <ExternalProps extends Record<string, any> = {}>(externalProps?: 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 {
|
|
149
|
+
* @returns {UseTreeItemGroupTransitionSlotProps<ExternalProps>} Props that should be spread on the GroupTransition slot.
|
|
157
150
|
*/
|
|
158
|
-
getGroupTransitionProps: <ExternalProps extends Record<string, any> = {}>(externalProps?: 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 {
|
|
156
|
+
* @returns {UseTreeItemDragAndDropOverlaySlotProps<ExternalProps>} Props that should be spread on the DragAndDropOverlay slot.
|
|
164
157
|
*/
|
|
165
|
-
getDragAndDropOverlayProps: <ExternalProps extends Record<string, any> = {}>(externalProps?: 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:
|
|
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 `
|
|
173
|
+
* Plugins that need to be present in the Tree View in order for `UseTreeItem` to work correctly.
|
|
181
174
|
*/
|
|
182
|
-
export type
|
|
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 `
|
|
184
|
+
* Plugins that `UseTreeItem` can use if they are present, but are not required.
|
|
192
185
|
*/
|
|
193
|
-
export type
|
|
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
|
-
}
|
package/TreeItem2/TreeItem2.d.ts
DELETED
|
@@ -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 {};
|